@vvedantb/ui 0.14.0 → 0.15.1

package/README.md

@@ -7,7 +7,7 @@ Shared React 19 web UI. Source-exported: no build step.
 | `@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`, `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/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`, `animations`, `nav-icons`, `compat-shadcn-rgb`. 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`. 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-atmosphere`, `landing-grain`, `landing-pulse-dot`, ambient graph and preview animations, smooth `#top` scrolling). CSS. |
@@ -661,7 +661,7 @@ Rows in the panel beside the rail. Rail tiles are unchanged.
 | Focus ring | none | `focus-visible:ring-2 focus-visible:ring-foreground/35`, no outline |
 | Icon-only row | `justify-center px-0 py-1.5` | same, plus the radius, text, fill and focus classes above |
 | Icon (`sidebarNavIconClass`) | none (apps used 18px in a 20px box) | `size-[19px] shrink-0`; `text-muted-foreground` idle, `text-foreground` active |
-| Section label | `px-3 py-1 text-[11px]` | `px-4 py-1 text-[11px] leading-4` (16px line). Colour still comes from the app's `.sidebar-section-label` rule. |
+| Section label | `px-3 py-1 text-[11px]` | `px-4 py-1 text-[11px] leading-4` (16px line). Colour comes from `.sidebar-section-label` in `tokens.css` (0.15.0; `--muted` at `--sidebar-section-label-mix` 55%, 80% on hover). |
 
 The hover fill is static: it does not slide between rows. While another row is hovered, the active row keeps its fill.
 
@@ -1059,9 +1059,9 @@ Use this when the app defines shadcn-style variables as space-separated channels
 @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.
+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), `clear-input.css` and `motion.css` (import them yourself; `tokens.css` is what imports them otherwise), `modal.css` and `tabs.css` (both need the motion variables listed in `tokens/README.md` on the app `:root`, because `tokens.css` sets them), 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.
+The compat file defines `.glass-panel-strong` for toasts, dialogs and hover cards as the solid popover colour (`rgb(var(--popover))`, as `bg-overlay`), the same as `tokens.css`. Before 0.15.0 it was `rgb(var(--card) / 0.95)` with a 12px blur. The rule is in `@layer components`, so an app `.glass-panel-strong` rule after the import wins.
 
 A fixture that renders the main components against sample light and dark RGB variables is in `tokens/examples/compat-shadcn-rgb/`.
 

package/app/README.md

@@ -160,7 +160,7 @@ import { PageMotionProvider, useDisablePageMotion } from "@vvedantb/ui";
 </PageMotionProvider>;
 ```
 
-- Sets `html[data-page-motion]` to `"off"` or `"on"` in a layout effect (CSS can skip page and route transitions on `"off"`). The attribute stays after unmount.
+- Sets `html[data-page-motion]` to `"off"` or `"on"` in a layout effect. The attribute stays after unmount. From 0.15.0 `tokens.css` (through `tokens/css/motion.css`) ships the `"off"` rules: `.ui-page-enter`, `.ui-enter`, `.ui-enter-up` and `.ui-stagger` fade only, `animate-in` / `animate-out`, `.t-modal` and `.t-tabs-pill` stop transitioning, and view transitions stop.
 - Renders `motionConfig` with `reducedMotion` `"always"` when disabled, else `"never"`.
 - `useDisablePageMotion()`: the `disabled` value, `false` outside the provider.
 - This module does not import `motion`. Pass `MotionConfig`, or an app component that wraps it, defined at module level, for example with `LazyMotion`:

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vvedantb/ui",
-  "version": "0.14.0",
+  "version": "0.15.1",
   "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.",
   "type": "module",
@@ -27,6 +27,8 @@
     "./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/clear-input.css": "./tokens/src/css/clear-input.css",
+    "./tokens/css/motion.css": "./tokens/src/css/motion.css",
     "./tokens/css/animations.css": "./tokens/src/css/animations.css",
     "./tokens/css/nav-icons.css": "./tokens/src/css/nav-icons.css",
     "./tokens/css/compat-shadcn-rgb.css": "./tokens/src/css/compat-shadcn-rgb.css",

package/shell/src/app-shell-classes.ts

@@ -21,8 +21,8 @@ export const railBadgeClass = "absolute -bottom-0.5 -right-0.5 flex h-4 min-w-4
 
 /**
  * Static section label above a group of panel nav rows. `px-4` lines the text
- * up with the nav row icons; the colour comes from the app's
- * `.sidebar-section-label` rule.
+ * up with the nav row icons; the colour comes from `.sidebar-section-label` in
+ * tokens.css.
  */
 export const sidebarSectionLabelClass =
   "sidebar-section-label px-4 py-1 text-[11px] leading-4 font-medium tracking-[-0.01em]";

package/src/ui/clear-input.tsx

@@ -130,25 +130,25 @@ const ClearInput = React.forwardRef<HTMLInputElement, ClearInputProps>(
           )}
           {...props}
         />
-        <div
-          ref={mirrorRef}
-          className={cn(
-            "t-clear-mirror border-0 bg-transparent text-foreground shadow-none",
-            fieldClassName,
-          )}
-          aria-hidden="true"
-        />
-        <div
-          ref={placeholderRef}
-          className={cn(
-            "t-clear-placeholder border-0 bg-transparent text-field-placeholder shadow-none",
-            fieldClassName,
-          )}
-          aria-hidden="true"
-        >
-          {placeholder}
+        <div className="t-clear-clip" aria-hidden="true">
+          <div
+            ref={mirrorRef}
+            className={cn(
+              "t-clear-mirror border-0 bg-transparent text-foreground shadow-none",
+              fieldClassName,
+            )}
+          />
+          <div
+            ref={placeholderRef}
+            className={cn(
+              "t-clear-placeholder border-0 bg-transparent text-field-placeholder shadow-none",
+              fieldClassName,
+            )}
+          >
+            {placeholder}
+          </div>
+          <div ref={glowRef} className="t-clear-glow" />
         </div>
-        <div ref={glowRef} className="t-clear-glow" aria-hidden="true" />
         {value.length > 0 && !clearing ? (
           <button
             type="button"

package/src/ui/clearInputDissolve.ts

@@ -1,19 +1,24 @@
 /** transitions.dev input clear with dissolve — see 13-input-clear-dissolve.md */
 
-function readCssNumber(
+// Times come back in ms. CSS minifiers rewrite `1000ms` as `1s`, so a value
+// in seconds is converted rather than read as 1.
+export function readCssNumber(
   root: HTMLElement,
   name: string,
   fallback: number,
 ): number {
-  const raw = getComputedStyle(root).getPropertyValue(name);
+  const raw = getComputedStyle(root).getPropertyValue(name).trim();
   const parsed = parseFloat(raw);
-  return Number.isFinite(parsed) ? parsed : fallback;
+  if (!Number.isFinite(parsed)) {
+    return fallback;
+  }
+  return /\ds$/.test(raw) ? parsed * 1000 : parsed;
 }
 
-function readCssEase(root: HTMLElement, name: string): (t: number) => number {
+export function readCssEase(root: HTMLElement, name: string): (t: number) => number {
   const raw = getComputedStyle(root).getPropertyValue(name);
   const match = raw.match(
-    /cubic-bezier\(([-\d.]+),([-\d.]+),([-\d.]+),([-\d.]+)\)/,
+    /cubic-bezier\(\s*([-\d.]+)\s*,\s*([-\d.]+)\s*,\s*([-\d.]+)\s*,\s*([-\d.]+)\s*\)/,
   );
   if (!match) {
     return (t) => t;

package/src/ui/dialog.tsx

@@ -213,7 +213,7 @@ DialogBody.displayName = "DialogBody";
 
 // no fill of its own: the footer is not sticky, so it shows the content's
 // surface. a token here (it was `bg-overlay`) showed as an inset block when
-// that surface differs (`glass-panel-strong` from the app, or `bg-*` on the
+// that surface differs (an app's own `glass-panel-strong`, or `bg-*` on the
 // content)
 const DialogFooter = ({
   className,

package/tokens/README.md

@@ -6,18 +6,20 @@ Design tokens and shared Tailwind v4 CSS for the vvedantb web apps. The CSS and
 
 | Export | File | What it is |
 | --- | --- | --- |
-| `@vvedantb/ui/tokens`, `@vvedantb/ui/tokens/tokens.css` | `src/tokens.css` | Colour, radius, shadow, ease and font tokens (`@theme`), light/dark variables, `dark` variant, the radius utilities `rounded-surface` (`clamp(0.75rem, var(--radius), 1rem)`), `rounded-menu-item` (`min(var(--radius), 0.5rem)`) and `rounded-control` (`min(var(--radius), 0.625rem)`) (0.7.1; `rounded-surface` was in `utilities.css` before), `*` border and `body` defaults. 0.7.2 adds `--sidebar-accent` / `sidebar-accent` (sidebar nav row fill: light `var(--surface-tertiary)`, dark `oklch(22.64% 0 0)`). In 0.2.1 it also defines shadcn-style aliases (`primary`, `muted-foreground`, `secondary`, `destructive`, `card`, `popover`, `input`, `ring`) that point at the same tokens. |
+| `@vvedantb/ui/tokens`, `@vvedantb/ui/tokens/tokens.css` | `src/tokens.css` | Colour, radius, shadow, ease and font tokens (`@theme`), light/dark variables, `dark` variant, the radius utilities `rounded-surface` (`clamp(0.75rem, var(--radius), 1rem)`), `rounded-menu-item` (`min(var(--radius), 0.5rem)`) and `rounded-control` (`min(var(--radius), 0.625rem)`) (0.7.1; `rounded-surface` was in `utilities.css` before), `*` border and `body` defaults. 0.7.2 adds `--sidebar-accent` / `sidebar-accent` (sidebar nav row fill: light `var(--surface-tertiary)`, dark `oklch(22.64% 0 0)`). In 0.2.1 it also defines shadcn-style aliases (`primary`, `muted-foreground`, `secondary`, `destructive`, `card`, `popover`, `input`, `ring`) that point at the same tokens. From 0.15.0 it imports `clear-input.css`, `scrollbar-thin.css` and `motion.css`, sets the `--modal-*` and `--tabs-*` motion variables on `:root`, and defines `.glass-panel-strong` (`var(--overlay)`) and `.sidebar-section-label`. |
 | `tokens` and `Tokens` from `@vvedantb/ui` | `src/native.ts` | JS colours, radii and spacing for React Native. `@vvedantb/native-ui` keeps its own copy in `src/tokens.ts`; a test keeps the two equal. |
 | `@vvedantb/ui/tokens/css/base.css` | `src/css/base.css` | `html` touch/accent, `::selection`, control transitions, pointer cursor, range accent (`@layer base`). |
 | `@vvedantb/ui/tokens/css/dialog.css` | `src/css/dialog.css` | Unlayered `max-width: none` for `@vvedantb/ui` compact (bottom-sheet) dialogs. |
 | `@vvedantb/ui/tokens/css/modal.css` | `src/css/modal.css` | `.t-modal`, `.is-open`, `.is-closing` and `t-modal-presence-wait` (`@layer components`). |
-| `@vvedantb/ui/tokens/css/tabs.css` | `src/css/tabs.css` | `.t-tab`, active colour, `.t-tabs-pill`, small-screen `.t-tabs` scrolling. |
+| `@vvedantb/ui/tokens/css/tabs.css` | `src/css/tabs.css` | `.t-tabs` container (0.15.0), `.t-tab` with its press scale, active colour, `.t-tabs-pill`, small-screen `.t-tabs` scrolling. |
 | `@vvedantb/ui/tokens/css/tabs-pills.css` | `src/css/tabs-pills.css` | `--tabs-*` colour variables, `.t-tabs--segmented`, `.t-tabs--pills` and pill hover / active fills. |
 | `@vvedantb/ui/tokens/css/utilities.css` | `src/css/utilities.css` | `@utility hit-target` and `@utility reveal-on-hover`. `rounded-surface` moved to `tokens.css` in 0.7.1. |
-| `@vvedantb/ui/tokens/css/scrollbar-thin.css` | `src/css/scrollbar-thin.css` | `.scrollbar-thin` (`@layer utilities`, always emitted). |
+| `@vvedantb/ui/tokens/css/scrollbar-thin.css` | `src/css/scrollbar-thin.css` | `.scrollbar-thin` (`@layer utilities`, always emitted). Imported by `tokens.css` from 0.15.0. |
+| `@vvedantb/ui/tokens/css/clear-input.css` | `src/css/clear-input.css` | `ClearInput` layers (`.t-clear*`) and the `--clear-*` / `--glow-*` timings. Imported by `tokens.css`. From 0.15.1 the layers clip in `.t-clear-clip`, so `.t-clear` keeps the focus ring, and the placeholder layer only shows during `.is-clearing`. |
+| `@vvedantb/ui/tokens/css/motion.css` | `src/css/motion.css` | `.ui-page-enter`, `.ui-enter`, `.ui-enter-up`, `.ui-stagger`, their keyframes and reduced-motion rules, and the `html[data-page-motion="off"]` overrides for `PageMotionProvider`. Imported by `tokens.css`. |
 | `@vvedantb/ui/tokens/css/animations.css` | `src/css/animations.css` | `animate-aurora`, `animate-fade-in-up`, `animate-indeterminate` as `@theme` (CSS-first apps). |
-| `@vvedantb/ui/tokens/css/compat-shadcn-rgb.css`, `@vvedantb/ui/tokens/compat/shadcn-rgb.css` | `src/css/compat-shadcn-rgb.css` | Replaces `tokens.css` for apps with shadcn-style `R G B` channel variables. Defines only the UI-only `--color-*` names as `rgb(var(--x) / alpha)` references, `--radius-field`, `--scrollbar`, `--field-radius`, the same three radius utilities as `tokens.css` and a `glass-panel-strong` fallback. Import it **or** `tokens.css`, never both. |
-| `@vvedantb/ui/tokens/css/index.css` | `src/css/index.css` | base + dialog + utilities + scrollbar-thin + animations, for new CSS-first apps. |
+| `@vvedantb/ui/tokens/css/compat-shadcn-rgb.css`, `@vvedantb/ui/tokens/compat/shadcn-rgb.css` | `src/css/compat-shadcn-rgb.css` | Replaces `tokens.css` for apps with shadcn-style `R G B` channel variables. Defines only the UI-only `--color-*` names as `rgb(var(--x) / alpha)` references, `--radius-field`, `--scrollbar`, `--field-radius`, the same three radius utilities as `tokens.css` and `.glass-panel-strong` (solid `--popover` from 0.15.0). Import it **or** `tokens.css`, never both. |
+| `@vvedantb/ui/tokens/css/index.css` | `src/css/index.css` | base + dialog + modal + tabs + tabs-pills + utilities + animations + nav-icons, for new CSS-first apps (`tokens.css` brings scrollbar-thin). |
 | `@vvedantb/ui/tokens/tailwind-preset` | `src/tailwind-preset.mjs` (+ `.d.mts`) | Tailwind preset for apps that load a JS config with `@config`. |
 
 Every file was extracted because the same rule (same at-rule context, selector and body) sits in 3 or more of the five apps. The measured duplication is in `verify/ANALYSIS.md`, and the proof that each app compiles to the same CSS after migrating is in `verify/RESULTS.md`. Blocks that only 2 apps share, or that drift in a way that would change an app's CSS, stay in the apps; `verify/ANALYSIS.md` lists them.
@@ -35,6 +37,7 @@ CSS-first app (no `tailwind.config`):
 @import "@vvedantb/ui/tokens/css/modal.css";
 @import "@vvedantb/ui/tokens/css/tabs.css";
 /* ...app @layer components rules... */
+/* no --modal-* / --tabs-* needed: tokens.css sets them */
 ```
 
 App with a JS config (`@config "../tailwind.config.ts"`):
@@ -65,17 +68,18 @@ Tailwind inlines an `@import` where it sits, even in the middle of a file (it mu
 | --- | --- | --- |
 | `base.css` | `--accent`, `--foreground` | tokens.css or the app theme |
 | `dialog.css` | none | |
-| `modal.css` | `--modal-open-dur`, `--modal-close-dur`, `--modal-scale`, `--modal-scale-close`, `--modal-ease` | app `:root` |
-| `tabs.css` | `--tabs-dur`, `--tabs-ease` (app `:root`); `--tabs-text-muted`, `--tabs-text-active`, `--tabs-pill-bg` | colours: tabs-pills.css or the app theme |
+| `modal.css` | `--modal-open-dur`, `--modal-close-dur`, `--modal-scale`, `--modal-scale-close`, `--modal-ease` | tokens.css (0.15.0), or app `:root` with the compat file |
+| `tabs.css` | `--tabs-dur`, `--tabs-ease` (tokens.css, or app `:root` with the compat file); `--tabs-text-muted`, `--tabs-text-active`, `--tabs-pill-bg` | colours: tabs-pills.css or the app theme |
 | `tabs-pills.css` | `--muted`, `--segment`, `--segment-foreground`, `--default` | tokens.css or the app theme |
 | `utilities.css` | `--breakpoint-sm` (Tailwind default or app theme) | Tailwind |
 | `scrollbar-thin.css` | `--scrollbar` | tokens.css or the app theme |
+| `clear-input.css`, `motion.css` | none (own `:root` defaults) | |
 | `animations.css` | none | |
 | `tailwind-preset` | the CSS variables named in its colour map, `--radius`, `--field-radius` | tokens.css or the app theme |
 
 ### Using an existing shadcn RGB theme
 
-See the package `README.md`. With the compat file, `base.css`, `scrollbar-thin.css`, `utilities.css`, `dialog.css`, `modal.css` and `tabs.css` need no `tokens.css`. `base.css` reads `--accent` and `--foreground` and `tabs-pills.css` reads `--muted`, `--segment` and `--default`. Those are not channel-compatible, so skip `tabs-pills.css` and `index.css` (which includes `base.css`) unless the app defines those variables as full colours.
+See the package `README.md`. With the compat file, `base.css`, `scrollbar-thin.css`, `clear-input.css`, `motion.css`, `utilities.css`, `dialog.css`, `modal.css` and `tabs.css` need no `tokens.css` (`modal.css` and `tabs.css` then need the `--modal-*` / `--tabs-*` values on the app `:root`). `base.css` reads `--accent` and `--foreground` and `tabs-pills.css` reads `--muted`, `--segment` and `--default`. Those are not channel-compatible, so skip `tabs-pills.css` and `index.css` (which includes `base.css`) unless the app defines those variables as full colours.
 
 ### Parameters
 
@@ -86,6 +90,24 @@ Where apps share a rule but drifted in one value, the value is a custom property
 | `base.css` | `--tokens-control-transition-property` | `background-color, border-color, color, box-shadow, transform, opacity` | app-c: `background-color, color, transform, opacity` |
 | `base.css` | `--tokens-control-transition-duration` | `240ms` | app-c: `100ms` |
 
+From 0.15.0 the files that moved out of the apps take `:root` variables too. Every rule is in a Tailwind layer, so an app rule for the same selector (unlayered, or later in the same layer) also wins.
+
+| File | Property | Default |
+| --- | --- | --- |
+| `tokens.css` | `--modal-open-dur`, `--modal-close-dur` | `180ms`, `120ms` |
+| `tokens.css` | `--modal-scale`, `--modal-scale-close` | `0.96`, `0.96` |
+| `tokens.css` | `--modal-ease`, `--tabs-ease` | `cubic-bezier(0.22, 1, 0.36, 1)` |
+| `tokens.css` | `--tabs-dur` | `200ms` |
+| `tokens.css` | `--sidebar-section-label-mix`, `--sidebar-section-label-hover-mix` | `55%`, `80%` (share of `--muted`) |
+| `scrollbar-thin.css` | `--scrollbar-thin-rest`, `--scrollbar-thin-hover` | `40%`, `80%` (share of `--scrollbar`) |
+| `clear-input.css` | `--clear-dur`, `--clear-out-dur`, `--clear-in-dur` | `1000ms`, `400ms`, `400ms` |
+| `clear-input.css` | `--clear-out-fly`, `--clear-in-fly` | `12px`, `12px` |
+| `clear-input.css` | `--clear-out-ease`, `--clear-in-ease` | `cubic-bezier(0.22, 1, 0.36, 1)` |
+| `clear-input.css` | `--glow-delay`, `--glow-peak-at`, `--glow-opacity`, `--glow-spread` | `50ms`, `0.15`, `0.85`, `1.5` |
+| `motion.css` | `--ui-enter-ease` | `cubic-bezier(0.22, 1, 0.36, 1)` |
+| `motion.css` | `--ui-page-enter-dur`, `--ui-enter-dur`, `--ui-enter-up-dur` | `160ms`, `200ms`, `220ms` |
+| `motion.css` | `--ui-stagger-step` | `40ms` (children 1 to 8) |
+
 ## Develop
 
 ```sh

package/tokens/src/css/clear-input.css

@@ -0,0 +1,82 @@
+/*
+ * @vvedantb/ui/tokens/css/clear-input.css: layers for @vvedantb/ui
+ * ClearInput (`.t-clear`, clip, mirror, placeholder and glow), the transitions.dev
+ * input clear with dissolve. tokens.css imports it.
+ *
+ * clearInputDissolve reads the variables below from `html`. Set any of them
+ * on the app `:root` to change the timing (numbers in ms or px):
+ *   --clear-dur, --clear-out-dur, --clear-in-dur, --clear-out-fly,
+ *   --clear-in-fly, --clear-out-ease, --clear-in-ease, --glow-delay,
+ *   --glow-peak-at, --glow-opacity, --glow-spread
+ */
+
+@layer base {
+  :root {
+    --clear-dur: 1000ms;
+    --clear-out-dur: 400ms;
+    --clear-in-dur: 400ms;
+    --clear-out-fly: 12px;
+    --clear-in-fly: 12px;
+    --clear-out-ease: cubic-bezier(0.22, 1, 0.36, 1);
+    --clear-in-ease: cubic-bezier(0.22, 1, 0.36, 1);
+    --glow-delay: 50ms;
+    --glow-peak-at: 0.15;
+    --glow-opacity: 0.85;
+    --glow-spread: 1.5;
+  }
+}
+
+@layer components {
+  /* No overflow clip on .t-clear: it would cut the input's focus ring.
+     .t-clear-clip clips the layers to the field instead. It never moves, so
+     the mirror and placeholder can fly in and out under it. Its radius
+     follows .t-clear; put a rounded-* class on wrapperClassName to match an
+     input with another radius. */
+  .t-clear {
+    position: relative;
+    border-radius: var(--radius-field, 0);
+  }
+  .t-clear-clip,
+  .t-clear-mirror,
+  .t-clear-placeholder,
+  .t-clear-glow {
+    position: absolute;
+    inset: 0;
+    pointer-events: none;
+    overflow: hidden;
+  }
+  .t-clear-clip {
+    border-radius: inherit;
+  }
+  .t-clear-mirror,
+  .t-clear-placeholder {
+    display: flex;
+    align-items: center;
+    white-space: nowrap;
+    opacity: 0;
+    z-index: 2;
+  }
+  /* The input's own placeholder shows at rest. The layer only shows while
+     clearInputDissolve drops it in, and the native one hides meanwhile. */
+  .t-clear.has-value .t-clear-mirror,
+  .t-clear.is-clearing .t-clear-mirror,
+  .t-clear.is-clearing .t-clear-placeholder {
+    opacity: 1;
+  }
+  .t-clear.is-clearing > input::placeholder {
+    opacity: 0;
+  }
+  .t-clear.has-value > input,
+  .t-clear.is-clearing > input {
+    -webkit-text-fill-color: transparent;
+  }
+  .t-clear-glow {
+    opacity: 0;
+    z-index: 3;
+    mix-blend-mode: multiply;
+  }
+  .dark .t-clear-glow,
+  [data-theme="dark"] .t-clear-glow {
+    mix-blend-mode: screen;
+  }
+}

package/tokens/src/css/compat-shadcn-rgb.css

@@ -89,12 +89,13 @@
 }
 
 /*
- * Fallback fill for toasts, dialogs and hover cards (`glass-panel-strong`).
- * Equivalent to `bg-card/95 backdrop-blur-md`. An app may override it by
- * declaring its own `@utility glass-panel-strong` after this import.
+ * Fill for toasts, dialogs and hover cards (`glass-panel-strong`): the solid
+ * popover colour, as `bg-overlay`, matching tokens.css. Any app
+ * `.glass-panel-strong` rule (unlayered, or in @layer components after this
+ * import) wins.
  */
-@utility glass-panel-strong {
-  background-color: rgb(var(--card) / 0.95);
-  -webkit-backdrop-filter: blur(12px);
-  backdrop-filter: blur(12px);
+@layer components {
+  .glass-panel-strong {
+    background-color: rgb(var(--popover));
+  }
 }

package/tokens/src/css/index.css

@@ -6,15 +6,18 @@
  *   @import "@vvedantb/ui/tokens";
  *   @import "@vvedantb/ui/tokens/css/index.css";
  *
- * modal.css, tabs.css and tabs-pills.css need app motion variables
- * (--modal-*, --tabs-dur, --tabs-ease) and are not included. Apps that use
- * the tailwind preset must not import animations.css; import the other
- * files one by one instead. nav-icons.css styles the animated nav icons.
+ * tokens.css already brings scrollbar-thin.css, clear-input.css and
+ * motion.css, and the --modal-* / --tabs-* variables modal.css and tabs.css
+ * read. Apps that use the tailwind preset must not import animations.css;
+ * import the other files one by one instead. nav-icons.css styles the
+ * animated nav icons.
  */
 
 @import "./base.css";
 @import "./dialog.css";
+@import "./modal.css";
+@import "./tabs.css";
+@import "./tabs-pills.css";
 @import "./utilities.css";
-@import "./scrollbar-thin.css";
 @import "./animations.css";
 @import "./nav-icons.css";

package/tokens/src/css/modal.css

@@ -2,8 +2,9 @@
  * @vvedantb/ui/tokens/css/modal.css: .t-modal open / close transition used by
  * @vvedantb/ui Dialog (transitions.dev pattern).
  *
- * Needs on :root: --modal-open-dur, --modal-close-dur, --modal-scale,
- * --modal-scale-close, --modal-ease.
+ * Reads --modal-open-dur, --modal-close-dur, --modal-scale,
+ * --modal-scale-close and --modal-ease. tokens.css sets them on :root; set
+ * them on the app :root to change them (apps on compat-shadcn-rgb.css must).
  */
 
 @layer components {

package/tokens/src/css/motion.css

@@ -0,0 +1,156 @@
+/*
+ * @vvedantb/ui/tokens/css/motion.css: page and list enter animations
+ * (`.ui-page-enter`, `.ui-enter`, `.ui-enter-up`, `.ui-stagger`) and the
+ * overrides for PageMotionProvider's `html[data-page-motion="off"]`.
+ * tokens.css imports it. Keyframe names (`ui-*`) do not clash with
+ * animations.css or the tailwind preset.
+ *
+ * Set on :root to change (defaults shown):
+ *   --ui-enter-ease: cubic-bezier(0.22, 1, 0.36, 1)
+ *   --ui-page-enter-dur: 160ms
+ *   --ui-enter-dur: 200ms
+ *   --ui-enter-up-dur: 220ms
+ *   --ui-stagger-step: 40ms (delay between the first 8 children)
+ *
+ * The app keeps its own view transition setup (names, timings, morphs); this
+ * file only turns those animations off for reduced motion and page motion off.
+ */
+
+@layer base {
+  :root {
+    --ui-enter-ease: cubic-bezier(0.22, 1, 0.36, 1);
+    --ui-page-enter-dur: 160ms;
+    --ui-enter-dur: 200ms;
+    --ui-enter-up-dur: 220ms;
+    --ui-stagger-step: 40ms;
+  }
+}
+
+@layer components {
+  .ui-page-enter {
+    animation: ui-page-enter var(--ui-page-enter-dur) var(--ui-enter-ease)
+      backwards;
+  }
+
+  .ui-enter,
+  .ui-stagger > * {
+    animation: ui-enter var(--ui-enter-dur) var(--ui-enter-ease) backwards;
+  }
+
+  .ui-enter-up {
+    animation: ui-enter-up var(--ui-enter-up-dur) var(--ui-enter-ease)
+      backwards;
+  }
+
+  .ui-stagger > *:nth-child(2) {
+    animation-delay: calc(var(--ui-stagger-step) * 1);
+  }
+  .ui-stagger > *:nth-child(3) {
+    animation-delay: calc(var(--ui-stagger-step) * 2);
+  }
+  .ui-stagger > *:nth-child(4) {
+    animation-delay: calc(var(--ui-stagger-step) * 3);
+  }
+  .ui-stagger > *:nth-child(5) {
+    animation-delay: calc(var(--ui-stagger-step) * 4);
+  }
+  .ui-stagger > *:nth-child(6) {
+    animation-delay: calc(var(--ui-stagger-step) * 5);
+  }
+  .ui-stagger > *:nth-child(7) {
+    animation-delay: calc(var(--ui-stagger-step) * 6);
+  }
+  .ui-stagger > *:nth-child(8) {
+    animation-delay: calc(var(--ui-stagger-step) * 7);
+  }
+
+  @keyframes ui-page-enter {
+    from {
+      opacity: 0;
+      transform: translateY(4px);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+
+  @keyframes ui-enter {
+    from {
+      opacity: 0;
+      transform: translateY(6px);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+
+  @keyframes ui-enter-up {
+    from {
+      opacity: 0;
+      transform: translateY(12px);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+
+  @keyframes ui-fade-only {
+    from {
+      opacity: 0;
+    }
+    to {
+      opacity: 1;
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .ui-page-enter,
+    .ui-enter,
+    .ui-enter-up,
+    .ui-stagger > * {
+      animation-duration: 1ms;
+      animation-name: ui-fade-only;
+    }
+
+    ::view-transition-group(*),
+    ::view-transition-old(*),
+    ::view-transition-new(*) {
+      animation: none !important;
+    }
+  }
+
+  /*
+   * PageMotionProvider `disabled` sets `html[data-page-motion="off"]`. Page and
+   * route enters, list stagger, `animate-in` / `animate-out`, the modal and
+   * tab pill transitions and view transitions stop. Spinners keep running and
+   * the modal still reaches its open state, so dialogs still appear.
+   */
+  html[data-page-motion="off"] .ui-page-enter,
+  html[data-page-motion="off"] .ui-enter,
+  html[data-page-motion="off"] .ui-enter-up,
+  html[data-page-motion="off"] .ui-stagger > * {
+    animation-duration: 1ms;
+    animation-name: ui-fade-only;
+  }
+
+  html[data-page-motion="off"] .animate-in,
+  html[data-page-motion="off"] .animate-out {
+    animation-duration: 0s !important;
+    animation-delay: 0s !important;
+  }
+
+  html[data-page-motion="off"] .t-modal,
+  html[data-page-motion="off"] .t-modal.is-closing,
+  html[data-page-motion="off"] .t-tabs-pill {
+    transition-duration: 0s !important;
+  }
+
+  html[data-page-motion="off"]::view-transition-group(*),
+  html[data-page-motion="off"]::view-transition-old(*),
+  html[data-page-motion="off"]::view-transition-new(*) {
+    animation: none !important;
+  }
+}

package/tokens/src/css/scrollbar-thin.css

@@ -1,40 +1,68 @@
 /*
  * @vvedantb/ui/tokens/css/scrollbar-thin.css: `.scrollbar-thin` (always emitted,
- * plain @layer utilities). Needs --scrollbar.
+ * plain @layer utilities). Needs --scrollbar. tokens.css imports it; apps on
+ * compat-shadcn-rgb.css import it themselves.
  *
- * Standard scrollbar properties are ignored by Chrome 121+ when webkit rules
- * exist, so the Firefox fallback is gated with @supports. Chrome gets the
- * 6px thumb; Firefox gets thin themed.
+ * Standard properties first (Chrome 121+, Firefox). Chrome ignores webkit
+ * scrollbar rules once `scrollbar-color` is set, so the 6px webkit thumb is
+ * only a fallback for browsers without `scrollbar-color`.
+ *
+ * Thumb strength (share of --scrollbar), set on :root to change:
+ *   --scrollbar-thin-rest: 40%
+ *   --scrollbar-thin-hover: 80%
  */
 
-@layer utilities {
-  @supports not selector(::-webkit-scrollbar) {
-    .scrollbar-thin {
-      scrollbar-width: thin;
-      scrollbar-color: color-mix(in oklch, var(--scrollbar) 80%, transparent)
-        transparent;
-    }
-
-    .scrollbar-thin:hover {
-      scrollbar-color: color-mix(in oklch, var(--scrollbar) 100%, transparent)
-        transparent;
-    }
+@layer base {
+  :root {
+    --scrollbar-thin-rest: 40%;
+    --scrollbar-thin-hover: 80%;
   }
+}
 
-  .scrollbar-thin::-webkit-scrollbar {
-    width: 6px;
+@layer utilities {
+  .scrollbar-thin {
+    scrollbar-width: thin;
+    scrollbar-color: color-mix(
+        in oklch,
+        var(--scrollbar) var(--scrollbar-thin-rest),
+        transparent
+      )
+      transparent;
   }
 
-  .scrollbar-thin::-webkit-scrollbar-track {
-    background: transparent;
+  .scrollbar-thin:hover {
+    scrollbar-color: color-mix(
+        in oklch,
+        var(--scrollbar) var(--scrollbar-thin-hover),
+        transparent
+      )
+      transparent;
   }
 
-  .scrollbar-thin::-webkit-scrollbar-thumb {
-    background-color: color-mix(in oklch, var(--scrollbar) 80%, transparent);
-    border-radius: 3px;
-  }
+  @supports not (scrollbar-color: auto) {
+    .scrollbar-thin::-webkit-scrollbar {
+      width: 6px;
+    }
+
+    .scrollbar-thin::-webkit-scrollbar-track {
+      background: transparent;
+    }
 
-  .scrollbar-thin::-webkit-scrollbar-thumb:hover {
-    background-color: color-mix(in oklch, var(--scrollbar) 100%, transparent);
+    .scrollbar-thin::-webkit-scrollbar-thumb {
+      background-color: color-mix(
+        in oklch,
+        var(--scrollbar) var(--scrollbar-thin-rest),
+        transparent
+      );
+      border-radius: 3px;
+    }
+
+    .scrollbar-thin:hover::-webkit-scrollbar-thumb {
+      background-color: color-mix(
+        in oklch,
+        var(--scrollbar) var(--scrollbar-thin-hover),
+        transparent
+      );
+    }
   }
 }

package/tokens/src/css/tabs.css

@@ -1,13 +1,19 @@
 /*
  * @vvedantb/ui/tokens/css/tabs.css: sliding tab bar (.t-tab, .t-tabs-pill)
- * used by @vvedantb/ui tabsSliding (transitions.dev pattern). The .t-tabs
- * container rule stays in the app; it differs per app.
+ * used by @vvedantb/ui tabsSliding (transitions.dev pattern), and the .t-tabs
+ * container. An app rule for any of them wins (@layer components).
  *
- * Needs: --tabs-dur, --tabs-ease, --tabs-text-muted, --tabs-text-active,
- * --tabs-pill-bg. tabs-pills.css sets the three colour variables.
+ * Needs: --tabs-dur, --tabs-ease (defaults in tokens.css), --tabs-text-muted,
+ * --tabs-text-active, --tabs-pill-bg. tabs-pills.css sets the three colour
+ * variables.
  */
 
 @layer components {
+  .t-tabs {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+  }
   @media (max-width: 639px) {
     .t-tabs {
       justify-content: safe center;
@@ -29,7 +35,12 @@
     cursor: pointer;
     border-radius: 48px;
     z-index: 1;
-    transition: color var(--tabs-dur) var(--tabs-ease);
+    transition:
+      color var(--tabs-dur) var(--tabs-ease),
+      transform 100ms ease-out;
+  }
+  .t-tab:active {
+    transform: scale(0.97);
   }
   .t-tab:not([aria-selected="true"]):not([data-state="active"]):hover,
   .t-tab[aria-selected="true"],

package/tokens/src/tokens.css

@@ -16,8 +16,19 @@
  *   @import url("https://fonts.googleapis.com/css2?family=Instrument+Sans:ital,wght@0,400..700;1,400..700&display=swap");
  *
  * Without it, --font-sans falls back to system-ui.
+ *
+ * From 0.15.0 this file also brings, on by default: the ClearInput layers,
+ * `.scrollbar-thin`, the `.ui-enter` family with the PageMotionProvider
+ * overrides, `.glass-panel-strong`, `.sidebar-section-label` and the
+ * modal / tabs motion variables. Every rule sits in a Tailwind layer and the
+ * timings and strengths are `:root` variables, so app rules and app `:root`
+ * values win.
  */
 
+@import "./css/clear-input.css";
+@import "./css/scrollbar-thin.css";
+@import "./css/motion.css";
+
 @custom-variant dark (&:where(.dark, .dark *));
 
 @theme {
@@ -226,3 +237,44 @@
     -moz-osx-font-smoothing: grayscale;
   }
 }
+
+/* Motion for css/modal.css (`.t-modal`) and css/tabs.css (`.t-tab`,
+   `.t-tabs-pill`). Set any of them on the app `:root` to change it. */
+@layer base {
+  :root {
+    --modal-open-dur: 180ms;
+    --modal-close-dur: 120ms;
+    --modal-scale: 0.96;
+    --modal-scale-close: 0.96;
+    --modal-ease: cubic-bezier(0.22, 1, 0.36, 1);
+    --tabs-dur: 200ms;
+    --tabs-ease: cubic-bezier(0.22, 1, 0.36, 1);
+    --sidebar-section-label-mix: 55%;
+    --sidebar-section-label-hover-mix: 80%;
+  }
+}
+
+@layer components {
+  /* Solid overlay fill for Dialog, SonnerToaster, SlideOverPanel and
+     SessionsHoverCard `surface="glass"`. Same as `bg-overlay`. */
+  .glass-panel-strong {
+    background-color: var(--overlay);
+  }
+
+  /* Shell section label (`sidebarSectionLabelClass`). */
+  .sidebar-section-label {
+    color: color-mix(
+      in oklch,
+      var(--muted) var(--sidebar-section-label-mix),
+      transparent
+    );
+  }
+
+  .sidebar-section-label:hover {
+    color: color-mix(
+      in oklch,
+      var(--muted) var(--sidebar-section-label-hover-mix),
+      transparent
+    );
+  }
+}