@vvedantb/ui 0.27.0 → 0.28.0

package/README.md

@@ -4,13 +4,16 @@ Shared React 19 web UI. Source-exported: no build step.
 
 | Import | What it is |
 | --- | --- |
-| `@vvedantb/ui` | The only JavaScript entry. Primitives (Radix-based), AI elements, audio (`playChime`, `useReplyChime`, `playTone`), `toast` and `SonnerToaster`, the composer (`InputArea`, deprecated 0.3 `Composer`), shell (`SidebarHeader`, `SidebarUpgradeCard`, `PillTabs`, `SessionsHoverCard`, and the app shell: `AppShell`, `AppSidebar`, `SidebarRail`, `RailTile`, `SidebarPanel`, `SidebarAccountMenu`, `SignOutDialog` and related helpers), app helpers (confirm skip, update watcher, settings chrome, `useStableAuth`, and from 0.8.0 `createThemeProvider`, `createPageTitleContext`, `PageMotionProvider` and `formatCompactRelativeTime`), marketing pieces from 0.9.0 (`createLandingKit` and the `Landing*` parts, `SiteFooter`, `PricingModal`), animated nav icons from 0.11.0 (`MemoryIcon`, `BoardIcon`, ... and `NavIconBase`; `SettingsIcon` `variant` from 0.12.0), artifact viewers from 0.13.0 (`ArtifactFrame`, `ArtifactList`, `ArtifactViewer`, ...), date pickers from 0.14.0 (`Calendar`, `DatePicker`, `DateTimePicker`, `MonthPicker`), `cn`, and the native tokens `tokens` and `Tokens`. See `app/README.md` in the repository for the app helpers. |
+| `@vvedantb/ui` | The main JavaScript entry. Primitives (Radix-based), AI elements, audio (`playChime`, `useReplyChime`, `playTone`), `toast` and `SonnerToaster`, the composer (`InputArea`, deprecated 0.3 `Composer`), shell (`SidebarHeader`, `SidebarUpgradeCard`, `PillTabs`, `SessionsHoverCard`, and the app shell: `AppShell`, `AppSidebar`, `SidebarRail`, `RailTile`, `SidebarPanel`, `SidebarAccountMenu`, `SignOutDialog` and related helpers), app helpers (confirm skip, update watcher, settings chrome, `useStableAuth`, and from 0.8.0 `createThemeProvider`, `createPageTitleContext`, `PageMotionProvider` and `formatCompactRelativeTime`), marketing pieces from 0.9.0 (`createLandingKit` and the `Landing*` parts, `SiteFooter`, `PricingModal`), animated nav icons from 0.11.0 (`MemoryIcon`, `BoardIcon`, ... and `NavIconBase`; `SettingsIcon` `variant` from 0.12.0), artifact viewers from 0.13.0 (`ArtifactFrame`, `ArtifactList`, `ArtifactViewer`, ...), date pickers from 0.14.0 (`Calendar`, `DatePicker`, `DateTimePicker`, `MonthPicker`), `cn`, and the native tokens `tokens` and `Tokens`. See `app/README.md` in the repository for the app helpers. |
+| `@vvedantb/ui/client` | The root without `@vvedantb/server`, convex or Clerk, for Chrome extensions (0.28.0). Leaves out the artifact viewers, `ConvexClerkProvider`, `useStableAuth`, `createUseStableAuth`, `resetStableAuthSession` and `useEnsureUser`. See [Chrome extensions](#chrome-extensions-0280). |
+| `@vvedantb/ui/brand` | App icons (`Icon*`, `APP_ICONS`), `AppWordmark`, deprecated `AppMark`, raw SVG strings and `FAMILY_APPS`. Also in the root and `/client`. |
 | `@vvedantb/ui/tokens` | `tokens.css`: colour, radius, shadow, ease and font tokens for Tailwind v4. CSS. |
 | `@vvedantb/ui/tokens/tokens.css` | Same file as `@vvedantb/ui/tokens`. CSS. |
 | `@vvedantb/ui/tokens/css/*.css` | `index`, `base`, `dialog`, `modal`, `tabs`, `tabs-pills`, `utilities`, `scrollbar-thin`, `clear-input`, `motion`, `animations`, `nav-icons`, `compat-shadcn-rgb`, `border-beam` (opt-in, for `BorderBeam`), `markdown` (opt-in, for `Markdown`). CSS. `tokens.css` imports `scrollbar-thin`, `clear-input` and `motion`. |
 | `@vvedantb/ui/tokens/compat/shadcn-rgb.css` | Same file as `tokens/css/compat-shadcn-rgb.css`. CSS. |
 | `@vvedantb/ui/tokens/tailwind-preset` | Tailwind preset (`.mjs`) for `@config "@vvedantb/ui/tokens/tailwind-preset"`. Kept as a build-tool entry: Tailwind needs a resolvable package path, and it is not a React API. |
 | `@vvedantb/ui/landing.css` | Landing page classes (`landing-wordmark-text` for `AppWordmark`, `landing-atmosphere`, `landing-grain`, `landing-pulse-dot`, ambient graph and preview animations, smooth `#top` scrolling). CSS. |
+| `@vvedantb/ui/fonts/instrument-sans.css` | Instrument Sans `@font-face` rules over packaged woff2 files, and the Clerk Inter override, for extension pages (0.28.0). Opt-in. CSS. |
 | `@vvedantb/ui/package.json` | Package metadata. |
 
 Removed in 0.4.0-rc.1: the `/cn`, `/sonner`, `/audio`, `/shell`, `/app`, `/composer` and `/tokens/native` subpaths. Import from `@vvedantb/ui`. See [`MIGRATION.md`](MIGRATION.md).
@@ -910,7 +913,7 @@ Shared marketing wordmark for product app names across Project V sites: the `Ico
 
 Never use `AppWordmark` for `projectv` (the type rejects it).
 
-Setup. The package does not bundle the font. `--font-sans` comes from the package tokens. Load Instrument Sans in the app, as for the rest of the UI, if it is not already loaded.
+Setup. `--font-sans` comes from the package tokens. Load Instrument Sans in the app, as for the rest of the UI, if it is not already loaded. Extension pages can import `@vvedantb/ui/fonts/instrument-sans.css` (0.28.0); web apps keep their own font loading.
 
 ```css
 @import "@vvedantb/ui/landing.css"; /* provides .landing-wordmark-text */
@@ -1209,6 +1212,55 @@ import {
 - Hooks: `useMediaQuery(query)`, `useDocumentVisible()`, `useIdleCallback(ms, fn)` (trailing debounce; `createIdleCallback` is the React-free core), `useSingleFlight(fn)` (one call at a time, latest args run next), `usePersistedScrollParent(storageKey)` (restores a container's `scrollTop` from `sessionStorage`).
 - Convex: `convexErrorMessage(error, fallback)` reads `ConvexError` data first; `userFacingErrorMessage(error, fallback)` strips the client envelope and stack. `useHeldResult(result, key)` keeps the last result while a query is skipped (`key` `null`). None of these import `convex`.
 
+## Chrome extensions (0.28.0)
+
+Extension pages (popup, side panel, options, welcome) run under the MV3 extension-page CSP, which blocks remote font stylesheets, and should not load `@vvedantb/server`. Three pieces cover them. Web apps change nothing unless they opt in.
+
+### Fonts
+
+```css
+@import "tailwindcss";
+@import "@vvedantb/ui/tokens";
+@import "@vvedantb/ui/fonts/instrument-sans.css";
+@source "../node_modules/@vvedantb/ui/src/**/*.{ts,tsx}";
+```
+
+`instrument-sans.css` has four `@font-face` rules: variable weight 400-700, normal and italic, latin and latin-ext. The `url()`s are relative, so Vite and WXT copy the woff2 files into the build. The licence is `fonts/OFL.txt`. The file ends with the rule both extensions carried in `globals.css`:
+
+```css
+html,
+body {
+  font-family: var(--font-sans);
+}
+```
+
+Clerk injects an unlayered `body { font-family: Inter }`, which beats the `@layer base` rule in the tokens; this rule is unlayered too. `tokens.css` does not import the file. Once an extension imports it, it can drop its own copy of the fonts, the CSS and the override.
+
+### `@vvedantb/ui/client`
+
+```tsx
+import { AppWordmark, Button, Card, Tabs, TabsList, TabsTrigger, cn, createThemeProvider } from "@vvedantb/ui/client";
+```
+
+The root's exports, without:
+
+- the artifact viewers (`src/artifacts`: `ArtifactFrame`, `ArtifactViewer`, ...), which import `@vvedantb/server`;
+- `ConvexClerkProvider`, `useStableAuth`, `createUseStableAuth`, `resetStableAuthSession` and `useEnsureUser`, which import `convex` or `@clerk/clerk-react`.
+
+Every other name is the same binding as in the root. `src/client-exports.test.ts` keeps the two in step, and `app/tests-node/client-graph.test.mjs` checks that the entry's module graph has no `@vvedantb/server`, convex, Clerk or `node:` import. The root is unchanged.
+
+### Icons
+
+`scripts/build-brand-assets.mjs` ships in the package and writes `<out>/<app>/extension/icon-{16,32,48,128}.png` (the tile at 16, 32 and 48 px, `appExtension128Svg` at 128 px). Copy them into the extension's public folder:
+
+```sh
+out=$(mktemp -d)
+node node_modules/@vvedantb/ui/scripts/build-brand-assets.mjs --out "$out" --app vmem
+mkdir -p public/icons && cp "$out"/vmem/extension/icon-*.png public/icons/
+```
+
+PNGs need `rsvg-convert` (librsvg); without it the script writes only the SVGs and says so. It needs Node 22.18 or later. Under `node_modules` it strips the types from `src/brand/svg.ts` itself, because Node will not, and Node prints an `ExperimentalWarning` for that. `defineVExtensionConfig` in `@vvedantb/config/extension` points the manifest `icons` and `action.default_icon` at `icons/icon-{16,32,48,128}.png`.
+
 ## Slider (0.16.0, dark contrast and className props 0.16.1)
 
 shadcn's slider on `@radix-ui/react-slider` (a peer dependency), with package tokens.

package/fonts/OFL.txt

@@ -0,0 +1,93 @@
+Copyright 2022 The Instrument Sans Project Authors (https://github.com/Instrument/instrument-sans)
+
+This Font Software is licensed under the SIL Open Font License, Version 1.1.
+This license is copied below, and is also available with a FAQ at:
+https://scripts.sil.org/OFL
+
+
+-----------------------------------------------------------
+SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
+-----------------------------------------------------------
+
+PREAMBLE
+The goals of the Open Font License (OFL) are to stimulate worldwide
+development of collaborative font projects, to support the font creation
+efforts of academic and linguistic communities, and to provide a free and
+open framework in which fonts may be shared and improved in partnership
+with others.
+
+The OFL allows the licensed fonts to be used, studied, modified and
+redistributed freely as long as they are not sold by themselves. The
+fonts, including any derivative works, can be bundled, embedded, 
+redistributed and/or sold with any software provided that any reserved
+names are not used by derivative works. The fonts and derivatives,
+however, cannot be released under any other type of license. The
+requirement for fonts to remain under this license does not apply
+to any document created using the fonts or their derivatives.
+
+DEFINITIONS
+"Font Software" refers to the set of files released by the Copyright
+Holder(s) under this license and clearly marked as such. This may
+include source files, build scripts and documentation.
+
+"Reserved Font Name" refers to any names specified as such after the
+copyright statement(s).
+
+"Original Version" refers to the collection of Font Software components as
+distributed by the Copyright Holder(s).
+
+"Modified Version" refers to any derivative made by adding to, deleting,
+or substituting -- in part or in whole -- any of the components of the
+Original Version, by changing formats or by porting the Font Software to a
+new environment.
+
+"Author" refers to any designer, engineer, programmer, technical
+writer or other person who contributed to the Font Software.
+
+PERMISSION & CONDITIONS
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of the Font Software, to use, study, copy, merge, embed, modify,
+redistribute, and sell modified and unmodified copies of the Font
+Software, subject to the following conditions:
+
+1) Neither the Font Software nor any of its individual components,
+in Original or Modified Versions, may be sold by itself.
+
+2) Original or Modified Versions of the Font Software may be bundled,
+redistributed and/or sold with any software, provided that each copy
+contains the above copyright notice and this license. These can be
+included either as stand-alone text files, human-readable headers or
+in the appropriate machine-readable metadata fields within text or
+binary files as long as those fields can be easily viewed by the user.
+
+3) No Modified Version of the Font Software may use the Reserved Font
+Name(s) unless explicit written permission is granted by the corresponding
+Copyright Holder. This restriction only applies to the primary font name as
+presented to the users.
+
+4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
+Software shall not be used to promote, endorse or advertise any
+Modified Version, except to acknowledge the contribution(s) of the
+Copyright Holder(s) and the Author(s) or with their explicit written
+permission.
+
+5) The Font Software, modified or unmodified, in part or in whole,
+must be distributed entirely under this license, and must not be
+distributed under any other license. The requirement for fonts to
+remain under this license does not apply to any document created
+using the Font Software.
+
+TERMINATION
+This license becomes null and void if any of the above conditions are
+not met.
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
+OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
+COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
+DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
+OTHER DEALINGS IN THE FONT SOFTWARE.

package/fonts/instrument-sans.css

@@ -0,0 +1,73 @@
+/*
+ * @vvedantb/ui/fonts/instrument-sans.css: Instrument Sans for chrome-extension
+ * pages (popup, welcome). Opt-in: tokens.css does not import it, so web apps
+ * are unchanged.
+ *
+ *   @import "@vvedantb/ui/fonts/instrument-sans.css";
+ *
+ * @vvedantb/ui/tokens only names the family; MV3 extension-page CSP cannot load
+ * remote webfont stylesheets, so the files ship here. Variable weight 400-700,
+ * normal and italic, latin and latin-ext. The url()s are relative, so Vite and
+ * WXT copy the woff2 files into the build. Licence: OFL.txt in this folder.
+ *
+ * The last rule sets html and body to --font-sans (from @vvedantb/ui/tokens).
+ * It is unlayered on purpose: see the comment above it.
+ */
+@font-face {
+  font-family: "Instrument Sans";
+  font-style: italic;
+  font-weight: 400 700;
+  font-stretch: 100%;
+  font-display: swap;
+  src: url("./InstrumentSans-Italic-latin-ext.woff2") format("woff2");
+  unicode-range:
+    U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
+    U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB,
+    U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+
+@font-face {
+  font-family: "Instrument Sans";
+  font-style: italic;
+  font-weight: 400 700;
+  font-stretch: 100%;
+  font-display: swap;
+  src: url("./InstrumentSans-Italic-latin.woff2") format("woff2");
+  unicode-range:
+    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
+    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212,
+    U+2215, U+FEFF, U+FFFD;
+}
+
+@font-face {
+  font-family: "Instrument Sans";
+  font-style: normal;
+  font-weight: 400 700;
+  font-stretch: 100%;
+  font-display: swap;
+  src: url("./InstrumentSans-latin-ext.woff2") format("woff2");
+  unicode-range:
+    U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
+    U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB,
+    U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+
+@font-face {
+  font-family: "Instrument Sans";
+  font-style: normal;
+  font-weight: 400 700;
+  font-stretch: 100%;
+  font-display: swap;
+  src: url("./InstrumentSans-latin.woff2") format("woff2");
+  unicode-range:
+    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
+    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212,
+    U+2215, U+FEFF, U+FFFD;
+}
+
+/* Clerk injects unlayered `body { font-family: Inter }` which beats
+ * `@layer base` from @vvedantb/ui/tokens. Keep extension pages on Instrument Sans. */
+html,
+body {
+  font-family: var(--font-sans);
+}

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "@vvedantb/ui",
-  "version": "0.27.0",
+  "version": "0.28.0",
   "license": "MIT",
-  "description": "Shared React 19 UI for web apps: one JavaScript entry (primitives, shell pieces, app helpers including the Convex and Clerk provider, VITE env parsing and ensure-user, artifact viewers over the @vvedantb/server artifacts core, native tokens), design-token CSS, shared Tailwind v4 CSS and a Tailwind preset.",
+  "description": "Shared React 19 UI for web apps: one main JavaScript entry (primitives, shell pieces, app helpers including the Convex and Clerk provider, VITE env parsing and ensure-user, artifact viewers over the @vvedantb/server artifacts core, native tokens), a client entry without @vvedantb/server, convex or Clerk for Chrome extensions, design-token CSS, shared Tailwind v4 CSS, a Tailwind preset and packaged Instrument Sans fonts.",
   "type": "module",
   "publishConfig": {
     "access": "public"
@@ -45,7 +45,12 @@
       "types": "./src/brand/index.ts",
       "default": "./src/brand/index.ts"
     },
+    "./client": {
+      "types": "./src/client.ts",
+      "default": "./src/client.ts"
+    },
     "./landing.css": "./src/marketing/landing.css",
+    "./fonts/instrument-sans.css": "./fonts/instrument-sans.css",
     "./package.json": "./package.json"
   },
   "types": "./src/index.ts",
@@ -55,6 +60,7 @@
     "app/src",
     "tokens/src",
     "tokens/examples",
+    "fonts",
     "scripts/build-brand-assets.mjs",
     "README.md",
     "LICENSE",
@@ -63,7 +69,8 @@
   ],
   "sideEffects": [
     "./src/ui/sonner.css",
-    "./src/marketing/landing.css"
+    "./src/marketing/landing.css",
+    "./fonts/instrument-sans.css"
   ],
   "scripts": {
     "check:tokens": "node tokens/scripts/check-component-tokens.mjs",

package/scripts/build-brand-assets.mjs

@@ -5,10 +5,19 @@
 // SVGs are always written. PNGs and favicon.ico need `rsvg-convert`; without it they are skipped
 // with a message. Layout: <dir>/<app>/{mark,icon,favicon,icon-light}.svg, PNGs, extension/, android/.
 import { spawnSync } from "node:child_process";
-import { mkdirSync, writeFileSync } from "node:fs";
-import { dirname, join } from "node:path";
+import { mkdirSync, readFileSync, writeFileSync } from "node:fs";
+import { dirname, join, sep } from "node:path";
 import { fileURLToPath } from "node:url";
-import { APP_NAMES, appAdaptiveSvg, appExtension128Svg, appMarkSvg, appTileSvg } from "../src/brand/svg.ts";
+
+// Node does not strip types from files under node_modules, so an installed copy
+// of this script strips svg.ts itself (svg.ts has no imports).
+async function loadSvg() {
+  const url = new URL("../src/brand/svg.ts", import.meta.url);
+  if (!fileURLToPath(url).split(sep).includes("node_modules")) return import(url.href);
+  const { stripTypeScriptTypes } = await import("node:module");
+  return import(`data:text/javascript,${encodeURIComponent(stripTypeScriptTypes(readFileSync(url, "utf8")))}`);
+}
+const { APP_NAMES, appAdaptiveSvg, appExtension128Svg, appMarkSvg, appTileSvg } = await loadSvg();
 
 /** Whether `rsvg-convert` can be run. */
 export function hasRsvg() {

package/src/client.ts

@@ -0,0 +1,393 @@
+// @vvedantb/ui/client: the root without `@vvedantb/server`, convex or Clerk, for
+// Chrome extensions and other pages that cannot load them. It leaves out the
+// artifact viewers (`src/artifacts`), `ConvexClerkProvider`, `useStableAuth`
+// and `useEnsureUser`; everything else matches the root. Keep it in step with
+// src/index.ts: src/client-exports.test.ts compares the two, and
+// app/tests-node/client-graph.test.mjs checks the module graph.
+export { cn } from "./utils/cn";
+export { UiConfigProvider, useUiConfig } from "./ui/ui-config";
+export type { UiConfig, UiConfigProviderProps } from "./ui/ui-config";
+export { floatingSurfaceClass } from "./ui/_menu-classes";
+export { fieldFocusClass, fieldFocusWithinClass } from "./ui/_field-classes";
+export * from "./ui/surface-classes";
+export * from "./motion/presets";
+export * from "./motion/panel-transition";
+export { ListEnter, useFirstPaintGate } from "./motion/list-enter";
+export type { ListEnterProps } from "./motion/list-enter";
+// Gesture physics and animation budget helpers (shared clock, on-screen and
+// page-visibility pausing for infinite animations).
+export { DRAG_ACTIVATION_DISTANCE_PX, projectVelocity, rubberband } from "./utils/gesture";
+export {
+  bindRuntimeAnimation,
+  ensureRuntimeVisibility,
+  observeAnimVisibility,
+  useAnimOffscreenRef,
+} from "./utils/runtimeVisibility";
+export { msUntilNextBoundary, quantizedSnapshot, subscribeQuantized } from "./utils/sharedClock";
+export { CAT_SLOT_COUNT, catColorForId, catColorForSlot, catSlotForId } from "./utils/cat-color";
+export type { CatColorClasses, CatSlot } from "./utils/cat-color";
+export { CONTROL_RADIUS_CLASS, SURFACE_RADIUS_CLASS } from "./utils/surface-radius";
+export { restoreModalScrollLock } from "./ui/overlay-a11y";
+// Generic hooks: media query, page visibility, trailing debounce,
+// single-flight async calls and a persisted scroll container.
+export * from "./hooks";
+export { ErrorBoundary } from "./ui/error-boundary";
+export type { ErrorBoundaryProps } from "./ui/error-boundary";
+export { CountPop, countLabel, UnreadDot } from "./ui/count-pop";
+export { MarqueeOnHover } from "./ui/marquee-on-hover";
+export { RelativeDateTime } from "./ui/relative-date-time";
+export type { RelativeDateTimeProps } from "./ui/relative-date-time";
+export { ImageLightbox } from "./ui/image-lightbox";
+export type { GalleryImage } from "./ui/image-lightbox";
+export { ImageGalleryPreview, ScreenshotPreview, VideoPreview } from "./ui/media-preview";
+
+export * from "./ui/avatar";
+export * from "./ui/badge";
+export * from "./ui/border-beam";
+export * from "./ui/breadcrumb";
+export * from "./ui/button";
+export * from "./ui/button-group";
+export * from "./ui/card";
+export * from "./ui/carousel";
+export * from "./ui/centered-spinner";
+export * from "./ui/checkbox";
+export * from "./ui/collapsible";
+export * from "./ui/command";
+export * from "./ui/context-menu";
+export * from "./ui/crossfade-icon";
+export * from "./ui/dialog";
+export * from "./ui/alert-dialog";
+export * from "./ui/confirm-dialog";
+export * from "./ui/dropdown-menu";
+export * from "./ui/empty-state";
+export * from "./ui/hover-card";
+export * from "./ui/input";
+export * from "./ui/label";
+export * from "./ui/labeled-slider-row";
+export * from "./ui/labeled-switch-row";
+export * from "./ui/list-row";
+export * from "./ui/loading-state";
+export * from "./ui/pagination";
+export * from "./ui/popover";
+export * from "./ui/progress";
+export * from "./ui/refresh-spin-icon";
+export {
+  Select as RadixSelect,
+  SelectContent as RadixSelectContent,
+  SelectGroup as RadixSelectGroup,
+  SelectItem as RadixSelectItem,
+  SelectLabel as RadixSelectLabel,
+  SelectScrollDownButton as RadixSelectScrollDownButton,
+  SelectScrollUpButton as RadixSelectScrollUpButton,
+  SelectSeparator as RadixSelectSeparator,
+  SelectTrigger as RadixSelectTrigger,
+  SelectValue as RadixSelectValue,
+} from "./ui/radix-select";
+export * from "./ui/search-input";
+export * from "./ui/select";
+export * from "./ui/select-field";
+export * from "./ui/separator";
+export * from "./ui/skeleton";
+export * from "./ui/slide-over-panel";
+export * from "./ui/slider";
+export * from "./ui/sonner";
+export * from "./ui/spinner";
+export * from "./ui/status-dot";
+export * from "./ui/surface";
+export * from "./ui/switch";
+export * from "./ui/table";
+export * from "./ui/tabs";
+export * from "./ui/textarea";
+export * from "./ui/toolbar-search-input";
+export * from "./ui/time-picker";
+export * from "./ui/calendar";
+export * from "./ui/date-picker";
+export * from "./ui/tooltip";
+export * from "./ui/kbd";
+export * from "./ui/sheet";
+export * from "./ui/visually-hidden";
+export * from "./ui/clearInputDissolve";
+
+// Animated nav icons. Styles: `@vvedantb/ui/tokens/css/nav-icons.css`.
+export * from "./icons";
+
+// Dual copies: the richer file uses the plain name. The deprecated `Alt` exports
+// (accordion, clear input, input group) wrap the main parts with the old markup.
+export * from "./ui/accordion";
+export {
+  AccordionAlt,
+  AccordionItemAlt,
+  AccordionTriggerAlt,
+  AccordionContentAlt,
+} from "./ui/accordion.alt";
+export * from "./ui/clear-input";
+export { ClearInputAlt } from "./ui/clear-input.alt";
+export * from "./ui/input-group";
+export {
+  InputGroupAlt,
+  InputGroupAddonAlt,
+  InputGroupButtonAlt,
+  InputGroupTextAlt,
+  InputGroupInputAlt,
+  InputGroupTextareaAlt,
+} from "./ui/input-group.alt";
+export * from "./ui/scroll-area";
+export {
+  ScrollArea as ScrollAreaAlt,
+  ScrollBar as ScrollBarAlt,
+} from "./ui/scroll-area.alt";
+
+export * from "./ai-elements/artifact";
+export * from "./ai-elements/attachments";
+export * from "./ai-elements/chain-of-thought";
+export * from "./ai-elements/code-block";
+export * from "./ai-elements/conversation";
+export * from "./ai-elements/file-chip";
+export * from "./ai-elements/image";
+export * from "./ai-elements/inline-citation";
+export * from "./ai-elements/jump-rail";
+export * from "./ai-elements/jump-rail-geometry";
+export * from "./ai-elements/chat-jump-rail";
+export * from "./ai-elements/message";
+export * from "./ai-elements/model-selector";
+export * from "./ai-elements/prompt-input";
+export * from "./ai-elements/prompt-input-settings";
+export * from "./ai-elements/prompt-input-speech";
+export * from "./ai-elements/prompt-input-traits";
+export * from "./ai-elements/queue";
+export * from "./ai-elements/reasoning";
+export * from "./ai-elements/shimmer";
+export * from "./ai-elements/sources";
+export * from "./ai-elements/speech-input";
+export * from "./ai-elements/suggestion";
+
+// Agent activity and run surfaces (moved from an app): the activity timeline and
+// its step model, Trace lines, plan, test results, web preview, context usage
+// and the model picker.
+export * from "./ai-elements/activity-shared";
+export * from "./ai-elements/activity-question";
+export * from "./ai-elements/activity-tasks";
+export * from "./ai-elements/trace";
+export * from "./ai-elements/use-streaming-disclosure";
+export * from "./ai-elements/plan";
+export * from "./ai-elements/test-results";
+export * from "./ai-elements/web-preview";
+export * from "./ai-elements/context";
+export * from "./ai-elements/model-picker";
+export * from "./ai-elements/provider-icon";
+
+// Kibo UI blocks: gantt, kanban, list, contribution graph, video player,
+// cursor, avatar stack, theme switcher. Kanban, list and gantt drag with
+// `useDragSensors`, the shared dnd-kit sensor split.
+export * from "./kibo";
+export { useDragSensors } from "./utils/useDragSensors";
+
+// Markdown renderer (Streamdown + code blocks, callouts, links, KaTeX).
+// Styles: `@vvedantb/ui/tokens/css/markdown.css`.
+export * from "./markdown";
+
+export * from "./audio";
+
+export * from "./composer";
+export { toast } from "sonner";
+
+// Shell: router-free pieces. Shell's own `cn` and `ClassValue` are not re-exported;
+// use the root `cn` (clsx + tailwind-merge).
+export { SidebarHeader } from "../shell/src/SidebarHeader";
+export type { SidebarHeaderProps } from "../shell/src/SidebarHeader";
+export { SidebarUpgradeCard } from "../shell/src/SidebarUpgradeCard";
+export type { SidebarUpgradeCardProps } from "../shell/src/SidebarUpgradeCard";
+export { PillTabs } from "../shell/src/PillTabs";
+export type { PillTabItem, PillTabsProps } from "../shell/src/PillTabs";
+export { SessionsHoverCard } from "../shell/src/SessionsHoverCard";
+export type {
+  SessionsHoverCardContext,
+  SessionsHoverCardProps,
+  SessionsHoverCardSurface,
+} from "../shell/src/SessionsHoverCard";
+
+// App shell: sidebar and main page layout. Widths come from the
+// `--app-shell-*` CSS variables that `AppShell` sets.
+export { AppShell } from "../shell/src/AppShell";
+export type {
+  AppShellContentProps,
+  AppShellMainProps,
+  AppShellProps,
+  AppShellRootProps,
+  AppShellSkipLinkProps,
+} from "../shell/src/AppShell";
+export { AppSidebar } from "../shell/src/AppSidebar";
+export type { AppSidebarProps } from "../shell/src/AppSidebar";
+// Composable sidebar parts (`Sidebar.Root`, `Sidebar.Rail`, ...) and their prop types.
+export * from "../shell/src/Sidebar";
+export { SidebarRail, RailTile, RailDivider, RailCollapseTile } from "../shell/src/SidebarRail";
+export type {
+  SidebarRailProps,
+  RailTileProps,
+  RailDividerProps,
+  RailCollapseTileProps,
+} from "../shell/src/SidebarRail";
+export { SidebarResizeHandle, useAppShellResize } from "../shell/src/SidebarResize";
+export type {
+  AppShellResize,
+  SidebarResizeHandleProps,
+  SidebarResizeOptions,
+} from "../shell/src/SidebarResize";
+export { SidebarIconTooltip } from "../shell/src/SidebarIconTooltip";
+export type { SidebarIconTooltipProps } from "../shell/src/SidebarIconTooltip";
+export { SidebarPanel } from "../shell/src/SidebarPanel";
+export type { SidebarPanelProps } from "../shell/src/SidebarPanel";
+export { SidebarAccountMenu, SidebarAccountMenuPlaceholder } from "../shell/src/SidebarAccountMenu";
+export type {
+  SidebarAccountMenuProps,
+  SidebarAccountMenuPlaceholderProps,
+} from "../shell/src/SidebarAccountMenu";
+export { SignOutDialog } from "../shell/src/SignOutDialog";
+export type { SignOutDialogProps } from "../shell/src/SignOutDialog";
+export {
+  railBadgeClass,
+  railTileClass,
+  railTileStateClass,
+  sidebarNavIconClass,
+  sidebarNavItemActionsClass,
+  sidebarNavItemClass,
+  sidebarNavItemIndentStyle,
+  sidebarNavItemLabelClass,
+  sidebarNavItemLeadingClass,
+  sidebarNavItemSubtitleClass,
+  sidebarNavItemTrailingClass,
+  sidebarNavLinkTextClass,
+  sidebarNavRowClass,
+  sidebarSectionLabelClass,
+} from "../shell/src/app-shell-classes";
+export type { SidebarNavItemClassOptions } from "../shell/src/app-shell-classes";
+
+// Marketing: landing kit, site footer and pricing dialog. Router- and Motion-free;
+// `createLandingKit` takes the app's `motion`. Styles: `@vvedantb/ui/landing.css`.
+export {
+  LandingFeatureCard,
+  LandingFooter,
+  LandingLattice,
+  LandingNavMenu,
+  LandingPageLayout,
+  LandingSection,
+  LandingSectionHeading,
+  landingItemVariants,
+} from "./marketing/landing";
+export type {
+  LandingFeature,
+  LandingFooterProps,
+  LandingLatticeProps,
+  LandingLink,
+  LandingNavMenuProps,
+  LandingPageLayoutProps,
+  LandingSectionHeadingProps,
+  LandingSectionProps,
+} from "./marketing/landing";
+export { createLandingKit } from "./marketing/createLandingKit";
+export type {
+  LandingCtaProps,
+  LandingHeroProps,
+  LandingKit,
+  LandingKitOptions,
+  LandingMotion,
+  LandingNavProps,
+  LandingRevealItemProps,
+  LandingRevealProps,
+} from "./marketing/createLandingKit";
+export {
+  landingFooterButtonClass,
+  landingFooterLinkClass,
+  landingPanelClass,
+  landingShellClass,
+} from "./marketing/marketing-classes";
+export type { PricingModalTone, SiteFooterVariant } from "./marketing/marketing-classes";
+export { SiteFooter } from "./marketing/SiteFooter";
+export type { SiteFooterLink, SiteFooterProps, SiteFooterSocial } from "./marketing/SiteFooter";
+export { PricingModal, V_PRO_APP_BENEFITS } from "./marketing/PricingModal";
+export type {
+  PricingModalLegacyProps,
+  PricingModalMultiProps,
+  PricingModalPeriod,
+  PricingModalProps,
+  PricingPlan,
+  PricingPlanAppBenefit,
+  PricingPlanBenefit,
+} from "./marketing/PricingModal";
+
+// App helpers: confirm skip, update watcher, settings chrome, theme, page title,
+// page motion, time, VITE env and error messages. Not here: `ConvexClerkProvider`,
+// `useStableAuth` and `useEnsureUser`, which import convex or Clerk.
+export {
+  bindToWindow,
+  createAltHeldStore,
+  getAltHeld,
+  useAltHeld,
+  type AltHeldBinding,
+  type AltHeldSignals,
+  type AltHeldStore,
+  type AltKeyEvent,
+} from "../app/src/confirm/useAltHeld";
+export { requestConfirm, shouldSkipConfirm } from "../app/src/confirm/confirmSkip";
+export { useRequestConfirm } from "../app/src/confirm/useRequestConfirm";
+export { ConfirmSkipHint, skipConfirmTitle } from "../app/src/confirm/ConfirmSkipHint";
+export { fetchDeployFingerprint, fingerprintFromHtml } from "../app/src/update/deployFingerprint";
+export {
+  startUpdateAvailableWatcher,
+  type UpdateAvailableWatcherOptions,
+  type UpdateToastOptions,
+} from "../app/src/update/updateWatcher";
+export { SettingsSection, type SettingsSectionConfig } from "../app/src/settings/SettingsSection";
+export { SettingsField } from "../app/src/settings/SettingsField";
+export { SettingsStack } from "../app/src/settings/SettingsStack";
+export { SettingsToggleRow } from "../app/src/settings/SettingsToggleRow";
+export { SettingsEmptyState, type SettingsEmptyStateConfig } from "../app/src/settings/SettingsEmptyState";
+export {
+  DefaultSettingsLayout,
+  SettingsPage,
+  type SettingsLayoutProps,
+  type SettingsPageProps,
+} from "../app/src/settings/SettingsPage";
+export {
+  applyThemeClass,
+  createThemeProvider,
+  getSystemTheme,
+  type ThemeAttribute,
+  type ThemeProviderKit,
+  type ThemeProviderOptions,
+  type ThemeProviderProps,
+  type ThemeState,
+} from "../app/src/theme/createThemeProvider";
+export {
+  createPageTitleContext,
+  type DocumentTitleOptions,
+  type PageTitleContextKit,
+  type PageTitleContextOptions,
+  type PageTitleValue,
+} from "../app/src/page-title/createPageTitleContext";
+export {
+  PageMotionProvider,
+  useDisablePageMotion,
+  type PageMotionConfigProps,
+  type PageMotionProviderProps,
+} from "../app/src/page-motion/PageMotionProvider";
+export { formatCompactRelativeTime, type CompactRelativeTimeOptions } from "../app/src/time/compactRelativeTime";
+export {
+  parseClientEnv,
+  VITE_ENV_NAMES,
+  type ClientEnv,
+  type ClientEnvOptions,
+  type ClientEnvSource,
+  type ClientEnvWithoutViteEnv,
+  type ViteEnvMode,
+  type ViteEnvName,
+} from "../app/src/convex/env";
+export { convexErrorMessage, userFacingErrorMessage } from "../app/src/convex/errorMessage";
+export { useHeldResult } from "../app/src/convex/useHeldResult";
+
+// Family app marks (Icon* components, deprecated AppMark and raw SVG strings for favicons).
+export * from "./brand";
+
+// Native tokens (JS values that match tokens.css).
+export { tokens } from "../tokens/src/native";
+export type { Tokens } from "../tokens/src/native";