@vvedantb/ui 0.10.0 → 0.11.0

package/README.md

@@ -4,10 +4,10 @@ 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`, `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`), `cn`, and the native tokens `tokens` and `Tokens`. See `app/README.md` in the repository for the app helpers. |
+| `@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`), `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`, `compat-shadcn-rgb`. 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/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. |
@@ -880,6 +880,61 @@ shown in that colour mode), `wordmark`, `price`, `tagline`,
 
 `RailCollapseTile({ collapsed, onToggle })`: the rail tile that shows or hides the sidebar panel ("Show sidebar" with the expand icon, or "Hide sidebar").
 
+## Animated nav icons (0.11.0)
+
+Eighteen 24x24 stroked icons that animate while their row or tile is hovered. Animation is plain CSS:
+
+```css
+@import "@vvedantb/ui/tokens/css/nav-icons.css"; /* or tokens/css/index.css, which includes it */
+```
+
+Hover needs an ancestor with the `group` class (rail tiles and nav rows have one):
+
+```tsx
+import { MemoryIcon, TerminalIcon } from "@vvedantb/ui";
+
+<a className="group" href="/memory"><MemoryIcon /> Memory</a>
+<button className="group"><TerminalIcon active={isCurrent} /></button>
+```
+
+| Icon | Shows | Stroke | Longest loop |
+| --- | --- | --- | --- |
+| `MemoryIcon` | Brain; the synapse fires | 1.7 | 1000 ms |
+| `BoltIcon` | Lightning bolt; flashes | 1.7 | 900 ms |
+| `FilesIcon` | Two stacked files; the back one slides | 1.7 | 1400 ms |
+| `InboxIcon` | Tray; a letter drops in | 1.7 | 1300 ms |
+| `BuildingIcon` | Building; windows blink | 1.7 | 1600 ms |
+| `SettingsIcon` | Gear; spins | 1.7 | 2500 ms |
+| `BoardIcon` | Three-column board; cards drop, one travels | 1.75 | 1800 ms |
+| `ChecklistIcon` | Two checked tasks; checks redraw | 1.75 | 1600 ms |
+| `TerminalIcon` | Terminal; prompt, typing, cursor. Has `active` | 1.75 | 1400 ms |
+| `DocumentIcon` | Page; lines draw, corner folds | 1.75 | 1500 ms |
+| `ReviewIcon` | Circle with a check | 1.75 | 1500 ms |
+| `FlaskIcon` | Flask; sloshes, bubbles rise | 1.75 | 1400 ms |
+| `InboxArrowIcon` | Tray with an arrow and a dot. Has `active` | 1.75 | 1100 ms |
+| `DraftIcon` | Page with a pencil nib | 1.75 | 1500 ms |
+| `AutomationIcon` | Orbit around a play button. Has `active` | 1.75 | 1800 ms |
+| `BarChartIcon` | Bars and a trend line | 1.75 | 1600 ms |
+| `SearchIcon` | Magnifying glass; scans | 1.75 | 1200 ms |
+| `SidebarToggleIcon` | Window with a side panel. Has `collapsed` | 1.75 | 900 ms |
+
+Props (type `IconProps`; all optional):
+
+| Prop | Default | Behaviour |
+| --- | --- | --- |
+| `size` | `20` | `width` and `height`. Number or string. |
+| `color` | `"currentColor"` | Any other value sets the svg's inline `color`; every part follows it. The default sets nothing, so `text-*` classes work. |
+| `strokeWidth` | icon's own (table) | Shapes with their own stroke width (the bar chart trend line, the inbox arrow halo) keep it. |
+| `className`, `style` | | Merged onto the svg (`vv-icon` class first). |
+| `title` | | Renders `<title>`, `role="img"` and `aria-labelledby`. Without it the svg is `aria-hidden="true"`. |
+| `animate` | `"hover"` | `"hover"`: animate while a `.group` ancestor is hovered. `true`: always. `false`: never, and no hover scale. Sets `data-animate`. |
+| `duration` | | Length in ms of the icon's longest loop (table). Sets `--vv-icon-duration-scale` to `duration / longest loop`; every duration and delay in the icon is multiplied by it, so staggers keep their proportions. |
+| `active` | `false` | `TerminalIcon`, `InboxArrowIcon`, `AutomationIcon`: solid variant with cut-out details. Other icons: `data-active="true"` only. |
+| `cutoutColor` | sidebar accent | Cut-out tone while `active` (`CutoutIconProps`). Default `var(--color-sidebar-accent, var(--sidebar-accent))`, so the solid icon suits a `bg-sidebar-accent` tile. |
+| `collapsed` | `false` | `SidebarToggleIcon` only: chevron points out (`SidebarToggleIconProps`). |
+
+Other SVG props (`id`, `data-*`, handlers, `ref`) go to the svg. On group hover the svg scales to 1.15 (the first six icons, spring ease) or 1.12 (the rest). `NavIconBase` is the shared svg wrapper, for icons drawn in the same style. The stylesheet has no reduced-motion override.
+
 ## Toaster
 
 ```tsx

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vvedantb/ui",
-  "version": "0.10.0",
+  "version": "0.11.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, native tokens), design-token CSS, shared Tailwind v4 CSS and a Tailwind preset.",
   "type": "module",
@@ -28,6 +28,7 @@
     "./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/nav-icons.css": "./tokens/src/css/nav-icons.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",
@@ -54,15 +55,6 @@
     "./src/ui/sonner.css",
     "./src/marketing/landing.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 app/tests-node/*.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",
@@ -181,5 +173,13 @@
     "zod": {
       "optional": true
     }
+  },
+  "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 app/tests-node/*.test.mjs",
+    "verify": "node tokens/scripts/check-component-tokens.mjs && node tokens/verify/run.mjs",
+    "analyze": "node tokens/verify/analyze.mjs"
   }
-}
+}

package/src/icons/automation-icon.tsx

@@ -0,0 +1,26 @@
+import { NavIconBase, cutoutStyle, type CutoutIconProps } from "./nav-icon-base";
+
+/** Dashed orbit around a play button; the orbit spins and sparks burst on hover. Solid while `active`. */
+export function AutomationIcon({ strokeWidth = 1.75, cutoutColor, ...props }: CutoutIconProps) {
+  const { active } = props;
+  return (
+    <NavIconBase {...props} strokeWidth={strokeWidth} hoverScale="1.12" loop={1800}>
+      <circle cx="12" cy="12" r="9" strokeDasharray="2.5 3.5" className="vv-icon-automation-orbit" />
+      {/* Filling the dashed orbit itself reads as a cog; a disc inside it keeps the orbit's silhouette. */}
+      {active ? <circle cx="12" cy="12" r="6.5" fill="currentColor" stroke="none" /> : null}
+      <g className="vv-icon-automation-sparks">
+        <line x1="3.7" y1="3.7" x2="2.2" y2="2.2" />
+        <line x1="20.3" y1="3.7" x2="21.8" y2="2.2" />
+        <line x1="3.7" y1="20.3" x2="2.2" y2="21.8" />
+        <line x1="20.3" y1="20.3" x2="21.8" y2="21.8" />
+      </g>
+      <path
+        d="M10.4 8.6v6.8l5.6-3.4z"
+        fill="currentColor"
+        stroke="none"
+        className="vv-icon-automation-play"
+        style={cutoutStyle(active, "fill", cutoutColor)}
+      />
+    </NavIconBase>
+  );
+}

package/src/icons/bar-chart-icon.tsx

@@ -0,0 +1,14 @@
+import { NavIconBase, type IconProps } from "./nav-icon-base";
+
+/** Three rising bars with a trend line; bars grow and the line draws on hover. */
+export function BarChartIcon({ strokeWidth = 1.75, ...props }: IconProps) {
+  return (
+    <NavIconBase {...props} strokeWidth={strokeWidth} hoverScale="1.12" loop={1600}>
+      <line x1="3" y1="20" x2="21" y2="20" />
+      <rect x="5" y="14" width="3" height="6" rx="0.5" fill="currentColor" stroke="none" className="vv-icon-chart-bar vv-icon-chart-bar-1" />
+      <rect x="10.5" y="9" width="3" height="11" rx="0.5" fill="currentColor" stroke="none" className="vv-icon-chart-bar vv-icon-chart-bar-2" />
+      <rect x="16" y="5" width="3" height="15" rx="0.5" fill="currentColor" stroke="none" className="vv-icon-chart-bar vv-icon-chart-bar-3" />
+      <polyline points="6.5,14 12,9 17.5,5" strokeWidth="1.3" className="vv-icon-chart-trend" />
+    </NavIconBase>
+  );
+}

package/src/icons/board-icon.tsx

@@ -0,0 +1,16 @@
+import { NavIconBase, type IconProps } from "./nav-icon-base";
+
+/** Three-column board; cards drop in and a card travels across on hover. */
+export function BoardIcon({ strokeWidth = 1.75, ...props }: IconProps) {
+  return (
+    <NavIconBase {...props} strokeWidth={strokeWidth} hoverScale="1.12" loop={1800}>
+      <rect x="3" y="3.5" width="5.5" height="17" rx="1.4" />
+      <rect x="9.25" y="3.5" width="5.5" height="11" rx="1.4" />
+      <rect x="15.5" y="3.5" width="5.5" height="14" rx="1.4" />
+      <rect x="4.4" y="5" width="2.7" height="2.2" rx="0.4" fill="currentColor" stroke="none" className="vv-icon-board-card vv-icon-board-card-1" />
+      <rect x="10.65" y="5" width="2.7" height="2.2" rx="0.4" fill="currentColor" stroke="none" className="vv-icon-board-card vv-icon-board-card-2" />
+      <rect x="16.9" y="5" width="2.7" height="2.2" rx="0.4" fill="currentColor" stroke="none" className="vv-icon-board-card vv-icon-board-card-3" />
+      <rect x="4.4" y="9" width="2.7" height="1.5" rx="0.4" fill="currentColor" stroke="none" className="vv-icon-board-traveler" />
+    </NavIconBase>
+  );
+}

package/src/icons/bolt-icon.tsx

@@ -0,0 +1,10 @@
+import { NavIconBase, type IconProps } from "./nav-icon-base";
+
+/** Lightning bolt that flashes on hover. */
+export function BoltIcon({ strokeWidth = 1.7, ...props }: IconProps) {
+  return (
+    <NavIconBase {...props} strokeWidth={strokeWidth} hoverScale="1.15" loop={900}>
+      <path className="vv-icon-bolt" d="M13 3L4 14h7l-1 7l9 -11h-7l1 -7z" />
+    </NavIconBase>
+  );
+}

package/src/icons/building-icon.tsx

@@ -0,0 +1,16 @@
+import { NavIconBase, type IconProps } from "./nav-icon-base";
+
+/** Building whose windows blink in turn on hover. */
+export function BuildingIcon({ strokeWidth = 1.7, ...props }: IconProps) {
+  return (
+    <NavIconBase {...props} strokeWidth={strokeWidth} hoverScale="1.15" loop={1600}>
+      <path d="M4 20V6.5a1.5 1.5 0 0 1 1.5 -1.5h13a1.5 1.5 0 0 1 1.5 1.5V20" />
+      <path d="M3 20h18" />
+      <path d="M10 20v-4a1 1 0 0 1 1 -1h2a1 1 0 0 1 1 1v4" />
+      <rect className="vv-icon-building-window vv-icon-building-window-1" x="7" y="8" width="3" height="3" rx="0.5" fill="currentColor" stroke="none" />
+      <rect className="vv-icon-building-window vv-icon-building-window-2" x="14" y="8" width="3" height="3" rx="0.5" fill="currentColor" stroke="none" />
+      <rect className="vv-icon-building-window vv-icon-building-window-3" x="7" y="12" width="3" height="2.5" rx="0.5" fill="currentColor" stroke="none" />
+      <rect className="vv-icon-building-window vv-icon-building-window-4" x="14" y="12" width="3" height="2.5" rx="0.5" fill="currentColor" stroke="none" />
+    </NavIconBase>
+  );
+}

package/src/icons/checklist-icon.tsx

@@ -0,0 +1,17 @@
+import { NavIconBase, type IconProps } from "./nav-icon-base";
+
+/** Two checkboxes with task lines; checks redraw and rings burst on hover. */
+export function ChecklistIcon({ strokeWidth = 1.75, ...props }: IconProps) {
+  return (
+    <NavIconBase {...props} strokeWidth={strokeWidth} hoverScale="1.12" loop={1600}>
+      <rect x="3" y="4" width="6" height="6" rx="1.2" />
+      <rect x="3" y="14" width="6" height="6" rx="1.2" />
+      <rect x="3" y="4" width="6" height="6" rx="1.2" className="vv-icon-checklist-ring vv-icon-checklist-ring-1" />
+      <rect x="3" y="14" width="6" height="6" rx="1.2" className="vv-icon-checklist-ring vv-icon-checklist-ring-2" />
+      <line x1="11" y1="7" x2="20" y2="7" className="vv-icon-checklist-line vv-icon-checklist-line-1" />
+      <line x1="11" y1="17" x2="18" y2="17" className="vv-icon-checklist-line vv-icon-checklist-line-2" />
+      <path d="M4.4 7.1l1.5 1.5 2.4-2.6" className="vv-icon-checklist-check vv-icon-checklist-check-1" />
+      <path d="M4.4 17.1l1.5 1.5 2.4-2.6" className="vv-icon-checklist-check vv-icon-checklist-check-2" />
+    </NavIconBase>
+  );
+}

package/src/icons/document-icon.tsx

@@ -0,0 +1,14 @@
+import { NavIconBase, type IconProps } from "./nav-icon-base";
+
+/** Page with a folded corner; lines draw on hover. */
+export function DocumentIcon({ strokeWidth = 1.75, ...props }: IconProps) {
+  return (
+    <NavIconBase {...props} strokeWidth={strokeWidth} hoverScale="1.12" loop={1500}>
+      <path d="M14 3H7a1.5 1.5 0 0 0-1.5 1.5v15A1.5 1.5 0 0 0 7 21h11a1.5 1.5 0 0 0 1.5-1.5V8.5z" />
+      <path d="M14 3v4.5a1 1 0 0 0 1 1h4.5" className="vv-icon-document-corner" />
+      <line x1="9" y1="12" x2="16" y2="12" className="vv-icon-document-line vv-icon-document-line-1" />
+      <line x1="9" y1="15" x2="16" y2="15" className="vv-icon-document-line vv-icon-document-line-2" />
+      <line x1="9" y1="18" x2="13" y2="18" className="vv-icon-document-line vv-icon-document-line-3" />
+    </NavIconBase>
+  );
+}

package/src/icons/draft-icon.tsx

@@ -0,0 +1,18 @@
+import { NavIconBase, type IconProps } from "./nav-icon-base";
+
+/** Page with a dashed line and a pencil nib. Shares the document animation. */
+export function DraftIcon({ strokeWidth = 1.75, ...props }: IconProps) {
+  return (
+    <NavIconBase {...props} strokeWidth={strokeWidth} hoverScale="1.12" loop={1500}>
+      <path d="M14 3H7a1.5 1.5 0 0 0-1.5 1.5v15A1.5 1.5 0 0 0 7 21h11a1.5 1.5 0 0 0 1.5-1.5V8.5z" />
+      <path d="M14 3v4.5a1 1 0 0 0 1 1h4.5" className="vv-icon-document-corner" />
+      <line x1="9" y1="12" x2="16" y2="12" className="vv-icon-document-line vv-icon-document-line-1" />
+      <line x1="9" y1="15" x2="13" y2="15" className="vv-icon-document-line vv-icon-document-line-2" strokeDasharray="1.5 1.5" />
+      {/* Pencil nib (not animated) */}
+      <g className="vv-icon-draft-pencil">
+        <path d="M16.5 16.5l1.5-1.5 1.2 1.2-1.5 1.5z" fill="currentColor" stroke="none" />
+        <path d="M16.5 16.5l-0.8 2.3 2.3-0.8z" fill="currentColor" stroke="none" />
+      </g>
+    </NavIconBase>
+  );
+}

package/src/icons/files-icon.tsx

@@ -0,0 +1,17 @@
+import { NavIconBase, type IconProps } from "./nav-icon-base";
+
+/** Two stacked files; the back one slides out on hover. */
+export function FilesIcon({ strokeWidth = 1.7, ...props }: IconProps) {
+  return (
+    <NavIconBase {...props} strokeWidth={strokeWidth} hoverScale="1.15" loop={1400}>
+      <g className="vv-icon-files-back">
+        <path d="M10 4h6l3 3v9a1.5 1.5 0 0 1 -1.5 1.5h-7.5a1.5 1.5 0 0 1 -1.5 -1.5v-10.5a1.5 1.5 0 0 1 1.5 -1.5z" />
+        <path d="M16 4v3h3" />
+      </g>
+      <g>
+        <path d="M6.5 8h6l3 3v9a1.5 1.5 0 0 1 -1.5 1.5h-7.5a1.5 1.5 0 0 1 -1.5 -1.5v-10.5a1.5 1.5 0 0 1 1.5 -1.5z" />
+        <path d="M12.5 8v3h3" />
+      </g>
+    </NavIconBase>
+  );
+}

package/src/icons/flask-icon.tsx

@@ -0,0 +1,17 @@
+import { NavIconBase, type IconProps } from "./nav-icon-base";
+
+/** Flask that sloshes while bubbles rise on hover. */
+export function FlaskIcon({ strokeWidth = 1.75, ...props }: IconProps) {
+  return (
+    <NavIconBase {...props} strokeWidth={strokeWidth} hoverScale="1.12" loop={1400}>
+      <g className="vv-icon-flask">
+        <path d="M9 3h6" />
+        <path d="M10 3v6.4L5.4 18A2 2 0 0 0 7.2 21h9.6a2 2 0 0 0 1.8-3l-4.6-8.6V3" />
+      </g>
+      <circle cx="11" cy="17.5" r="0.7" fill="currentColor" stroke="none" className="vv-icon-flask-bubble vv-icon-flask-bubble-1" />
+      <circle cx="13.5" cy="15.5" r="0.55" fill="currentColor" stroke="none" className="vv-icon-flask-bubble vv-icon-flask-bubble-2" />
+      <circle cx="12.4" cy="19" r="0.45" fill="currentColor" stroke="none" className="vv-icon-flask-bubble vv-icon-flask-bubble-3" />
+      <circle cx="14.6" cy="18" r="0.4" fill="currentColor" stroke="none" className="vv-icon-flask-bubble vv-icon-flask-bubble-4" />
+    </NavIconBase>
+  );
+}

package/src/icons/inbox-arrow-icon.tsx

@@ -0,0 +1,25 @@
+import { NavIconBase, cutoutStyle, type CutoutIconProps } from "./nav-icon-base";
+
+/** Tray with an arrow dropping in and a notification dot. Solid while `active`. */
+export function InboxArrowIcon({ strokeWidth = 1.75, cutoutColor, ...props }: CutoutIconProps) {
+  const { active } = props;
+  const cutoutStroke = cutoutStyle(active, "stroke", cutoutColor);
+  return (
+    <NavIconBase {...props} strokeWidth={strokeWidth} hoverScale="1.12" loop={1100}>
+      <path d="M3 13.5l3-7.5h12l3 7.5v5.5A2 2 0 0 1 19 21H5a2 2 0 0 1-2-2z" fill={active ? "currentColor" : "none"} />
+      <path d="M3 13.5h5.2l1 2h5.6l1-2H21" style={cutoutStroke} />
+      <g className="vv-icon-inbox-arrow">
+        {/* The arrow dips into the tray; a cut-out halo keeps it legible against the solid body. */}
+        {active ? (
+          <g strokeWidth={4} style={cutoutStroke}>
+            <line x1="12" y1="2.5" x2="12" y2="8" />
+            <polyline points="9.6,5.6 12,8 14.4,5.6" />
+          </g>
+        ) : null}
+        <line x1="12" y1="2.5" x2="12" y2="8" />
+        <polyline points="9.6,5.6 12,8 14.4,5.6" />
+      </g>
+      <circle cx="18.5" cy="4" r="1.4" fill="currentColor" stroke="none" className="vv-icon-inbox-notif" />
+    </NavIconBase>
+  );
+}

package/src/icons/inbox-icon.tsx

@@ -0,0 +1,13 @@
+import { NavIconBase, type IconProps } from "./nav-icon-base";
+
+/** Tray with a letter dropping in on hover. */
+export function InboxIcon({ strokeWidth = 1.7, ...props }: IconProps) {
+  return (
+    <NavIconBase {...props} strokeWidth={strokeWidth} hoverScale="1.15" loop={1300}>
+      <rect className="vv-icon-inbox-letter" x="9" y="8" width="6" height="4" rx="0.5" fill="currentColor" stroke="none" />
+      <path d="M4 13l2 -8a1 1 0 0 1 1 -1h10a1 1 0 0 1 1 1l2 8" />
+      <path d="M4 13v6a1 1 0 0 0 1 1h14a1 1 0 0 0 1 -1v-6" />
+      <path d="M4 13h4l1 2h6l1 -2h4" />
+    </NavIconBase>
+  );
+}

package/src/icons/index.ts

@@ -0,0 +1,22 @@
+// Animated nav icons. Styles: `@vvedantb/ui/tokens/css/nav-icons.css` (also in `tokens/css/index.css`).
+export { NavIconBase } from "./nav-icon-base";
+export type { CutoutIconProps, IconAnimate, IconProps, NavIconBaseProps } from "./nav-icon-base";
+export { MemoryIcon } from "./memory-icon";
+export { BoltIcon } from "./bolt-icon";
+export { FilesIcon } from "./files-icon";
+export { InboxIcon } from "./inbox-icon";
+export { BuildingIcon } from "./building-icon";
+export { SettingsIcon } from "./settings-icon";
+export { BoardIcon } from "./board-icon";
+export { ChecklistIcon } from "./checklist-icon";
+export { TerminalIcon } from "./terminal-icon";
+export { DocumentIcon } from "./document-icon";
+export { ReviewIcon } from "./review-icon";
+export { FlaskIcon } from "./flask-icon";
+export { InboxArrowIcon } from "./inbox-arrow-icon";
+export { DraftIcon } from "./draft-icon";
+export { AutomationIcon } from "./automation-icon";
+export { BarChartIcon } from "./bar-chart-icon";
+export { SearchIcon } from "./search-icon";
+export { SidebarToggleIcon } from "./sidebar-toggle-icon";
+export type { SidebarToggleIconProps } from "./sidebar-toggle-icon";

package/src/icons/memory-icon.tsx

@@ -0,0 +1,20 @@
+import { NavIconBase, type IconProps } from "./nav-icon-base";
+
+/** Brain with a synapse that fires on hover. */
+export function MemoryIcon({ strokeWidth = 1.7, ...props }: IconProps) {
+  return (
+    <NavIconBase {...props} strokeWidth={strokeWidth} hoverScale="1.15" loop={1000}>
+      {/* brain silhouette (symmetric about x=12) */}
+      <path
+        d="M12 3.5C8.5 2.2 5.5 3.3 5 6.5C2.8 7 2.5 8.5 3.5 10C2.2 11.5 2.5 13.5 4.5 14.5C4.5 17 6 18.5 8 18.5C9.5 20 11 19.6 12 19C13 19.6 14.5 20 16 18.5C18 18.5 19.5 17 19.5 14.5C21.5 13.5 21.8 11.5 20.5 10C21.5 8.5 21.2 7 19 6.5C18.5 3.3 15.5 2.2 12 3.5Z"
+        fill="none"
+      />
+      {/* central fissure between the hemispheres */}
+      <path d="M12 3.9C10.6 6.5 13.4 8.8 12 11.4" fill="none" />
+      {/* synapse ping ring */}
+      <circle className="vv-icon-memory-ring" cx="12" cy="13.8" r="2.2" fill="none" />
+      {/* synapse core */}
+      <circle className="vv-icon-memory-core" cx="12" cy="13.8" r="1.7" fill="currentColor" stroke="none" />
+    </NavIconBase>
+  );
+}

package/src/icons/nav-icon-base.tsx

@@ -0,0 +1,98 @@
+import { useId, type CSSProperties, type ReactNode, type SVGProps } from "react";
+import { cn } from "../utils/cn";
+
+/** `"hover"`: animate while an ancestor with the `group` class is hovered. `true`: always. `false`: never. */
+export type IconAnimate = boolean | "hover";
+
+export type IconProps = Omit<SVGProps<SVGSVGElement>, "children" | "color" | "height" | "width" | "strokeWidth"> & {
+  /** Width and height. Default 20. */
+  size?: number | string;
+  /** Sets the svg's CSS `color`, which every `currentColor` part follows. Default `currentColor` (no inline colour). */
+  color?: string;
+  /** Default: the icon's own stroke (1.7 or 1.75). Shapes with their own stroke width keep it. */
+  strokeWidth?: number | string;
+  /** Accessible name. Without it the icon is `aria-hidden`. */
+  title?: string;
+  /** Default `"hover"`. */
+  animate?: IconAnimate;
+  /** Solid variant on icons that have one; elsewhere only sets `data-active`. */
+  active?: boolean;
+  /** Length in ms of the icon's longest loop. Every other duration and delay in the icon scales with it. */
+  duration?: number;
+};
+
+/** Icons with a solid `active` variant. Inner details are painted in `cutoutColor`. */
+export type CutoutIconProps = IconProps & {
+  /** Tone of the cut-out details while `active`. Default: the sidebar accent colour. */
+  cutoutColor?: string;
+};
+
+export type NavIconBaseProps = IconProps & {
+  children: ReactNode;
+  /** Root scale on group hover: `"1.15"` springs, `"1.12"` eases out. */
+  hoverScale: "1.15" | "1.12";
+  /** The icon's longest loop in ms, which `duration` replaces. */
+  loop: number;
+};
+
+type IconStyle = CSSProperties & { "--vv-icon-duration-scale"?: number };
+
+const CUTOUT_TONE = "var(--color-sidebar-accent, var(--sidebar-accent))";
+
+/** Inline stroke or fill for a cut-out detail while active, so it reads as a hole in the solid shape. */
+export function cutoutStyle(
+  active: boolean | undefined,
+  kind: "stroke" | "fill",
+  cutoutColor: string | undefined,
+): CSSProperties | undefined {
+  if (!active) return undefined;
+  const tone = cutoutColor ?? CUTOUT_TONE;
+  return kind === "stroke" ? { stroke: tone } : { fill: tone };
+}
+
+/** The 24x24 stroked svg every nav icon renders. Animation lives in `tokens/css/nav-icons.css`. */
+export function NavIconBase({
+  size = 20,
+  color,
+  strokeWidth,
+  className,
+  style,
+  title,
+  animate = "hover",
+  active,
+  duration,
+  hoverScale,
+  loop,
+  children,
+  ...rest
+}: NavIconBaseProps) {
+  const titleId = useId();
+  const iconStyle: IconStyle = { ...style };
+  if (color !== undefined && color !== "currentColor") iconStyle.color = color;
+  if (duration !== undefined && duration > 0) iconStyle["--vv-icon-duration-scale"] = duration / loop;
+  return (
+    <svg
+      {...rest}
+      xmlns="http://www.w3.org/2000/svg"
+      width={size}
+      height={size}
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth={strokeWidth}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      className={cn("vv-icon", className)}
+      style={Object.keys(iconStyle).length > 0 ? iconStyle : undefined}
+      data-animate={String(animate)}
+      data-hover-scale={hoverScale}
+      data-active={active ? "true" : undefined}
+      role={title ? "img" : undefined}
+      aria-hidden={title ? undefined : true}
+      aria-labelledby={title ? titleId : undefined}
+    >
+      {title ? <title id={titleId}>{title}</title> : null}
+      {children}
+    </svg>
+  );
+}

package/src/icons/review-icon.tsx

@@ -0,0 +1,15 @@
+import { NavIconBase, type IconProps } from "./nav-icon-base";
+
+/**
+ * Circle with a check and a line. The marks take the document line animation
+ * without `vv-icon-document-line`, so they scale from the svg origin, not their own box.
+ */
+export function ReviewIcon({ strokeWidth = 1.75, ...props }: IconProps) {
+  return (
+    <NavIconBase {...props} strokeWidth={strokeWidth} hoverScale="1.12" loop={1500}>
+      <circle cx="12" cy="12" r="9" />
+      <path d="M9.5 12.5 11.2 14.2 14.8 10" className="vv-icon-document-line-1" />
+      <path d="M8 7.5h8" className="vv-icon-document-line-2" />
+    </NavIconBase>
+  );
+}

package/src/icons/search-icon.tsx

@@ -0,0 +1,14 @@
+import { NavIconBase, type IconProps } from "./nav-icon-base";
+
+/** Magnifying glass that scans with a lens glint on hover. */
+export function SearchIcon({ strokeWidth = 1.75, ...props }: IconProps) {
+  return (
+    <NavIconBase {...props} strokeWidth={strokeWidth} hoverScale="1.12" loop={1200}>
+      <g className="vv-icon-search">
+        <circle cx="10.5" cy="10.5" r="6.5" />
+        <line x1="15.2" y1="15.2" x2="20.5" y2="20.5" />
+        <circle cx="8.6" cy="8.6" r="1.1" fill="currentColor" stroke="none" className="vv-icon-search-glint" />
+      </g>
+    </NavIconBase>
+  );
+}

package/src/icons/settings-icon.tsx

@@ -0,0 +1,13 @@
+import { NavIconBase, type IconProps } from "./nav-icon-base";
+
+/** Gear that spins on hover. */
+export function SettingsIcon({ strokeWidth = 1.7, ...props }: IconProps) {
+  return (
+    <NavIconBase {...props} strokeWidth={strokeWidth} hoverScale="1.15" loop={2500}>
+      <g className="vv-icon-gear">
+        <path d="M10.325 4.317c.426 -1.756 2.924 -1.756 3.35 0a1.724 1.724 0 0 0 2.573 1.066c1.543 -.94 3.31 .826 2.37 2.37a1.724 1.724 0 0 0 1.065 2.572c1.756 .426 1.756 2.924 0 3.35a1.724 1.724 0 0 0 -1.066 2.573c.94 1.543 -.826 3.31 -2.37 2.37a1.724 1.724 0 0 0 -2.572 1.065c-.426 1.756 -2.924 1.756 -3.35 0a1.724 1.724 0 0 0 -2.573 -1.066c-1.543 .94 -3.31 -.826 -2.37 -2.37a1.724 1.724 0 0 0 -1.065 -2.572c-1.756 -.426 -1.756 -2.924 0 -3.35a1.724 1.724 0 0 0 1.066 -2.573c-.94 -1.543 .826 -3.31 2.37 -2.37c1 .608 2.296 .07 2.572 -1.065z" />
+        <circle cx="12" cy="12" r="3" />
+      </g>
+    </NavIconBase>
+  );
+}

package/src/icons/sidebar-toggle-icon.tsx

@@ -0,0 +1,24 @@
+import { cn } from "../utils/cn";
+import { NavIconBase, type IconProps } from "./nav-icon-base";
+
+export type SidebarToggleIconProps = IconProps & {
+  /** Chevron points out (expand) instead of in (collapse). */
+  collapsed?: boolean;
+};
+
+/** Window with a side panel; the panel squeezes and the chevron nudges on hover. */
+export function SidebarToggleIcon({ strokeWidth = 1.75, collapsed = false, className, ...props }: SidebarToggleIconProps) {
+  return (
+    <NavIconBase
+      {...props}
+      strokeWidth={strokeWidth}
+      className={cn(collapsed && "vv-icon-sidebar-collapsed", className)}
+      hoverScale="1.12"
+      loop={900}
+    >
+      <rect x="3" y="4" width="18" height="16" rx="2" />
+      <rect x="3.5" y="4.5" width="5.5" height="15" rx="1.2" fill="currentColor" stroke="none" className="vv-icon-sidebar-panel" />
+      <path d={collapsed ? "M13 9l3 3-3 3" : "M16 9l-3 3 3 3"} className="vv-icon-sidebar-chevron" />
+    </NavIconBase>
+  );
+}

package/src/icons/terminal-icon.tsx

@@ -0,0 +1,17 @@
+import { NavIconBase, cutoutStyle, type CutoutIconProps } from "./nav-icon-base";
+
+/** Terminal window with a prompt, typed characters and a blinking cursor. Solid while `active`. */
+export function TerminalIcon({ strokeWidth = 1.75, cutoutColor, ...props }: CutoutIconProps) {
+  const { active } = props;
+  const cutoutFill = cutoutStyle(active, "fill", cutoutColor);
+  return (
+    <NavIconBase {...props} strokeWidth={strokeWidth} hoverScale="1.12" loop={1400}>
+      <rect x="3" y="4" width="18" height="16" rx="2" fill={active ? "currentColor" : "none"} />
+      <path d="M7 10l3 2-3 2" className="vv-icon-terminal-prompt" style={cutoutStyle(active, "stroke", cutoutColor)} />
+      <rect x="13" y="13.5" width="1" height="1" rx="0.2" fill="currentColor" stroke="none" className="vv-icon-terminal-typed vv-icon-terminal-typed-1" style={cutoutFill} />
+      <rect x="14.6" y="13.5" width="1" height="1" rx="0.2" fill="currentColor" stroke="none" className="vv-icon-terminal-typed vv-icon-terminal-typed-2" style={cutoutFill} />
+      <rect x="16.2" y="13.5" width="1" height="1" rx="0.2" fill="currentColor" stroke="none" className="vv-icon-terminal-typed vv-icon-terminal-typed-3" style={cutoutFill} />
+      <rect x="17.8" y="13.2" width="1.4" height="1.6" rx="0.3" fill="currentColor" stroke="none" className="vv-icon-terminal-cursor" style={cutoutFill} />
+    </NavIconBase>
+  );
+}

package/src/index.ts

@@ -61,6 +61,9 @@ 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 other keeps an `Alt` suffix.
 export * from "./ui/accordion";
 export {

package/tokens/src/css/index.css

@@ -9,7 +9,7 @@
  * 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.
+ * files one by one instead. nav-icons.css styles the animated nav icons.
  */
 
 @import "./base.css";
@@ -17,3 +17,4 @@
 @import "./utilities.css";
 @import "./scrollbar-thin.css";
 @import "./animations.css";
+@import "./nav-icons.css";