@ashwa-io/ui 0.0.0-stage → 0.0.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Ashwa
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,3 +1,73 @@
-# Temporary Holding Version
+# @ashwa-io/ui
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+Ashwa's design system: React components built on [shadcn/ui](https://ui.shadcn.com) (Base UI primitives) and Tailwind CSS v4, with a small, locked API and per-organisation brand theming.
+
+- **Locked API.** Components take `variant`, `size` and a few booleans. They never accept `className` or `style`, so screens stay consistent.
+- **Org theming.** One brand colour themes the whole app in light and dark mode, with WCAG contrast guaranteed in code.
+- **Storybook:** https://ds.ashwa.io
+
+## Install
+
+```bash
+yarn add @ashwa-io/ui react react-dom lucide-react
+yarn add -D tailwindcss @tailwindcss/vite
+```
+
+Requires React 19 and Tailwind CSS v4 (`@tailwindcss/vite` in your Vite config).
+
+## Styles
+
+In your app's main CSS file, **replace** `@import 'tailwindcss';` with:
+
+```css
+@import '@ashwa-io/ui/styles.css';
+```
+
+That one import brings Tailwind, the design tokens, the Inter font and the classes the components use. Do not also import `tailwindcss`: it would duplicate the CSS. Your own Tailwind classes and `@theme` additions keep working below the import.
+
+## Use
+
+```tsx
+import { Button } from '@ashwa-io/ui';
+import { PlusIcon } from 'lucide-react';
+
+<Button variant="primary" icon={PlusIcon} onClick={addVehicle}>
+  Add vehicle
+</Button>;
+```
+
+Layout is your app's job: wrap components in your own elements (`<div className="flex gap-2">…</div>`). Components themselves are never restyled from outside.
+
+## Theming
+
+Dark mode follows a `dark` class on `<html>`.
+
+Org brand colour comes from `@ashwa-io/ui/theme`:
+
+```ts
+import { brandThemeCss } from '@ashwa-io/ui/theme';
+
+const style = document.getElementById('org-theme') ?? document.createElement('style');
+style.id = 'org-theme';
+style.textContent = brandThemeCss(org.primaryColor); // '#1a73e8', or null for the default
+document.head.appendChild(style);
+```
+
+`brandTheme(hex)` returns the same tokens as data, plus `warnings` (`'adjusted'` when lightness was changed for contrast, `'near-destructive'` when the colour is close to the delete red) for an org-settings preview.
+
+## Develop
+
+```bash
+corepack enable
+yarn install
+yarn playwright install chromium
+yarn storybook   # http://localhost:6006
+yarn test        # unit tests + every story as a browser test (play functions + a11y)
+yarn lint && yarn typecheck && yarn build
+```
+
+See [CONTRIBUTING.md](./CONTRIBUTING.md).
+
+## License
+
+MIT

package/dist/components/atomic/Button/Button.d.ts

@@ -0,0 +1,22 @@
+import { IconComponent, Size } from "../../../lib/types.js";
+import React from "react";
+export type ButtonVariant = 'primary' | 'secondary' | 'outline' | 'ghost' | 'destructive' | 'link';
+export interface ButtonProps {
+  variant?: ButtonVariant;
+  size?: Size;
+  fullWidth?: boolean;
+  /** Disables the button, sets aria-busy and swaps the icon for a spinner. */
+  loading?: boolean;
+  disabled?: boolean;
+  type?: 'button' | 'submit';
+  /** Leading icon, decorative (aria-hidden). */
+  icon?: IconComponent;
+  onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
+  children: React.ReactNode;
+  ref?: React.Ref<HTMLButtonElement>;
+  id?: string;
+  'aria-label'?: string;
+  'aria-describedby'?: string;
+  'data-testid'?: string;
+}
+export declare const Button: React.FC<ButtonProps>;

package/dist/components/atomic/Button/Button.js

@@ -0,0 +1,44 @@
+import { Button as Button$1 } from "../../ui/button.js";
+import { cn } from "../../../lib/utils.js";
+import { LoaderCircleIcon } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+// src/components/atomic/Button/Button.tsx
+const VARIANT = {
+	primary: "default",
+	secondary: "secondary",
+	outline: "outline",
+	ghost: "ghost",
+	destructive: "destructive",
+	link: "link"
+};
+const VARIANT_CLASS = { link: "text-brand-text" };
+const SIZE = {
+	sm: "sm",
+	md: "default",
+	lg: "lg"
+};
+const Button = (props) => {
+	const { variant = "primary", size = "md", fullWidth = false, loading = false, disabled = false, type = "button", icon, onClick, children, ref, id, "aria-label": ariaLabel, "aria-describedby": ariaDescribedBy, "data-testid": testId } = props;
+	const LeadingIcon = loading ? LoaderCircleIcon : icon;
+	return /* @__PURE__ */ jsxs(Button$1, {
+		ref,
+		id,
+		type,
+		variant: VARIANT[variant],
+		size: SIZE[size],
+		className: cn(VARIANT_CLASS[variant], fullWidth && "w-full"),
+		disabled: disabled || loading,
+		focusableWhenDisabled: loading,
+		"aria-busy": loading || void 0,
+		"aria-label": ariaLabel,
+		"aria-describedby": ariaDescribedBy,
+		"data-testid": testId,
+		onClick,
+		children: [LeadingIcon && /* @__PURE__ */ jsx(LeadingIcon, {
+			"data-icon": "inline-start",
+			"aria-hidden": true,
+			className: cn(loading && "animate-spin")
+		}), children]
+	});
+};
+export { Button };

package/dist/components/atomic/Button/index.d.ts

@@ -0,0 +1,2 @@
+import { Button, ButtonProps, ButtonVariant } from "./Button.js";
+export { Button, type ButtonProps, type ButtonVariant };

package/dist/components/ui/button.js

@@ -0,0 +1,41 @@
+import { Button } from "@base-ui/react/button";
+import { cva } from "class-variance-authority";
+import { cn } from "cn";
+import { jsx } from "react/jsx-runtime";
+// src/components/ui/button.tsx
+const buttonVariants = cva("group/button inline-flex shrink-0 items-center justify-center rounded-lg border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", {
+	variants: {
+		variant: {
+			default: "bg-primary text-primary-foreground hover:bg-primary/80",
+			outline: "border-border bg-background hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50",
+			secondary: "bg-secondary text-secondary-foreground hover:bg-[color-mix(in_oklch,var(--secondary),var(--foreground)_5%)] aria-expanded:bg-secondary aria-expanded:text-secondary-foreground",
+			ghost: "hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:hover:bg-muted/50",
+			destructive: "bg-destructive/10 text-destructive hover:bg-destructive/20 focus-visible:border-destructive/40 focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:hover:bg-destructive/30 dark:focus-visible:ring-destructive/40",
+			link: "text-primary underline-offset-4 hover:underline"
+		},
+		size: {
+			default: "h-8 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
+			xs: "h-6 gap-1 rounded-[min(var(--radius-md),10px)] px-2 text-xs in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3",
+			sm: "h-7 gap-1 rounded-[min(var(--radius-md),12px)] px-2.5 text-[0.8rem] in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5",
+			lg: "h-9 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
+			icon: "size-8",
+			"icon-xs": "size-6 rounded-[min(var(--radius-md),10px)] in-data-[slot=button-group]:rounded-lg [&_svg:not([class*='size-'])]:size-3",
+			"icon-sm": "size-7 rounded-[min(var(--radius-md),12px)] in-data-[slot=button-group]:rounded-lg",
+			"icon-lg": "size-9"
+		}
+	},
+	defaultVariants: {
+		variant: "default",
+		size: "default"
+	}
+});
+const Button$1 = ({ className, variant = "default", size = "default", ...props }) => /* @__PURE__ */ jsx(Button, {
+	"data-slot": "button",
+	className: cn(buttonVariants({
+		variant,
+		size,
+		className
+	})),
+	...props
+});
+export { Button$1 as Button, buttonVariants };

package/dist/index.d.ts

@@ -0,0 +1,4 @@
+import "./components/atomic/Button/index.js";
+import { Button, ButtonProps, ButtonVariant } from "./components/atomic/Button/Button.js";
+import { IconComponent, Size } from "./lib/types.js";
+export { Button, type ButtonProps, type ButtonVariant, type IconComponent, type Size };

package/dist/index.js

@@ -0,0 +1 @@
+export { Button } from "./components/atomic/Button/Button.js";

package/dist/lib/types.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+/** Shared size scale for every public component. */
+export type Size = 'sm' | 'md' | 'lg';
+/** An icon component (lucide-react, svgr): the design system controls its size and colour. */
+export type IconComponent = React.ComponentType<{
+  className?: string;
+  'aria-hidden'?: boolean;
+  'data-icon'?: string;
+}>;

package/dist/lib/utils.js

@@ -0,0 +1 @@
+export { cn } from "cn";

package/dist/theme/brandTheme.d.ts

@@ -0,0 +1,18 @@
+export declare const DEFAULT_BRAND_HEX = "#8750f6";
+export type BrandWarning = 'adjusted' | 'near-destructive' | 'invalid';
+export interface BrandTokens {
+  '--brand': string;
+  '--brand-foreground': string;
+  '--brand-text': string;
+  '--brand-tint': string;
+  '--brand-tint-foreground': string;
+  '--brand-map': string;
+}
+export interface BrandTheme {
+  light: BrandTokens;
+  dark: BrandTokens;
+  warnings: BrandWarning[];
+}
+/** Brand tokens for light and dark from one org hex. Never throws; bad input → default. */
+export declare const brandTheme: (hex: string | null | undefined) => BrandTheme;
+export declare const brandThemeCss: (hex: string | null | undefined) => string;

package/dist/theme/brandTheme.js

@@ -0,0 +1,152 @@
+import { clampChroma, converter, formatHex, modeLrgb, modeOklab, modeOklch, modeRgb, parseHex, useMode, wcagContrast } from "culori/fn";
+// src/theme/brandTheme.ts
+useMode(modeRgb);
+useMode(modeLrgb);
+useMode(modeOklab);
+useMode(modeOklch);
+const DEFAULT_BRAND_HEX = "#8750f6";
+const SURFACES = {
+	light: [{
+		mode: "oklch",
+		l: 1,
+		c: 0
+	}],
+	dark: [{
+		mode: "oklch",
+		l: .145,
+		c: 0
+	}, {
+		mode: "oklch",
+		l: .205,
+		c: 0
+	}]
+};
+const DIRECTION = {
+	light: -1,
+	dark: 1
+};
+const TINT = {
+	light: {
+		l: .965,
+		chromaScale: .15,
+		maxChroma: .03
+	},
+	dark: {
+		l: .3,
+		chromaScale: .2,
+		maxChroma: .04
+	}
+};
+const WHITE = {
+	mode: "oklch",
+	l: 1,
+	c: 0
+};
+const BLACK = {
+	mode: "oklch",
+	l: 0,
+	c: 0
+};
+const MIN_UI_CONTRAST = 3;
+const MIN_TEXT_CONTRAST = 4.5;
+const LIGHTNESS_STEP = .005;
+const MAX_STEPS = 200;
+const WHITE_LABEL_MAX_STEPS = 10;
+const DESTRUCTIVE_HUE = 27;
+const NEAR_DESTRUCTIVE_HUE_RANGE = 20;
+const NEAR_DESTRUCTIVE_MIN_CHROMA = .1;
+const HEX_PATTERN = /^#[0-9a-fA-F]{6}$/;
+const toOklch = converter("oklch");
+const settle = (color) => {
+	const clamped = clampChroma(color, "oklch");
+	return {
+		mode: "oklch",
+		l: Math.round(clamped.l * 1e3) / 1e3,
+		c: Math.floor(clamped.c * 1e3) / 1e3,
+		h: clamped.h === void 0 ? void 0 : Math.round(clamped.h * 10) / 10
+	};
+};
+const stepUntil = (start, direction, passes, maxSteps = MAX_STEPS) => {
+	let l = start.l;
+	let color = settle(start);
+	for (let step = 0; step < maxSteps && !passes(color); step += 1) {
+		l = Math.min(1, Math.max(0, l + direction * LIGHTNESS_STEP));
+		color = settle({
+			...start,
+			l
+		});
+	}
+	return color;
+};
+const minContrast = (color, surfaces) => Math.min(...surfaces.map((surface) => wcagContrast(color, surface)));
+const round = (value, digits) => Number(value.toFixed(digits));
+const formatOklch = (color) => `oklch(${round(color.l, 3)} ${round(color.c, 3)} ${round(color.h ?? 0, 1)})`;
+const withLabel = (brand, surfaces) => {
+	const whitePasses = (c) => wcagContrast(WHITE, c) >= MIN_TEXT_CONTRAST;
+	const darker = stepUntil(brand, -1, whitePasses, WHITE_LABEL_MAX_STEPS);
+	if (whitePasses(darker) && minContrast(darker, surfaces) >= MIN_UI_CONTRAST) return {
+		brand: darker,
+		label: WHITE
+	};
+	return {
+		brand,
+		label: BLACK
+	};
+};
+const isNearDestructive = (input) => {
+	if (input.h === void 0 || input.c < NEAR_DESTRUCTIVE_MIN_CHROMA) return false;
+	return Math.abs((input.h - DESTRUCTIVE_HUE + 540) % 360 - 180) <= NEAR_DESTRUCTIVE_HUE_RANGE;
+};
+const modeTokens = (input, mode) => {
+	const surfaces = SURFACES[mode];
+	const direction = DIRECTION[mode];
+	const tintSpec = TINT[mode];
+	const { brand, label } = withLabel(stepUntil(input, direction, (c) => minContrast(c, surfaces) >= MIN_UI_CONTRAST), surfaces);
+	const text = stepUntil(brand, direction, (c) => minContrast(c, surfaces) >= MIN_TEXT_CONTRAST);
+	const tint = settle({
+		mode: "oklch",
+		l: tintSpec.l,
+		c: Math.min(input.c * tintSpec.chromaScale, tintSpec.maxChroma),
+		h: input.h
+	});
+	const tintForeground = stepUntil(text, direction, (c) => wcagContrast(c, tint) >= MIN_TEXT_CONTRAST);
+	return {
+		"--brand": formatOklch(brand),
+		"--brand-foreground": formatOklch(label),
+		"--brand-text": formatOklch(text),
+		"--brand-tint": formatOklch(tint),
+		"--brand-tint-foreground": formatOklch(tintForeground),
+		"--brand-map": formatHex(brand)
+	};
+};
+const buildTheme = (input) => {
+	const light = modeTokens(input, "light");
+	const warnings = [];
+	if (light["--brand"] !== formatOklch(settle(input))) warnings.push("adjusted");
+	if (isNearDestructive(input)) warnings.push("near-destructive");
+	return {
+		light,
+		dark: modeTokens(input, "dark"),
+		warnings
+	};
+};
+const parseBrand = (hex) => {
+	if (!HEX_PATTERN.test(hex)) return void 0;
+	const rgb = parseHex(hex);
+	return rgb && toOklch(rgb);
+};
+/** Brand tokens for light and dark from one org hex. Never throws; bad input → default. */
+const brandTheme = (hex) => {
+	const input = parseBrand(hex ?? "#8750f6");
+	if (input) return buildTheme(input);
+	return {
+		...buildTheme(parseBrand("#8750f6") ?? BLACK),
+		warnings: ["invalid"]
+	};
+};
+const declarations = (tokens) => Object.entries(tokens).map(([name, value]) => `${name}:${value};`).join("");
+const brandThemeCss = (hex) => {
+	const { light, dark } = brandTheme(hex);
+	return `:root:root{${declarations(light)}}:root:root.dark{${declarations(dark)}}`;
+};
+export { DEFAULT_BRAND_HEX, brandTheme, brandThemeCss };

package/dist/theme.d.ts

@@ -0,0 +1,2 @@
+import { BrandTheme, BrandTokens, BrandWarning, DEFAULT_BRAND_HEX, brandTheme, brandThemeCss } from "./theme/brandTheme.js";
+export { BrandTheme, BrandTokens, BrandWarning, DEFAULT_BRAND_HEX, brandTheme, brandThemeCss };

package/dist/theme.js

@@ -0,0 +1 @@
+export { DEFAULT_BRAND_HEX, brandTheme, brandThemeCss } from "./theme/brandTheme.js";

package/package.json

@@ -1,6 +1,107 @@
 {
   "name": "@ashwa-io/ui",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "version": "0.0.1",
+  "description": "Ashwa design system: locked React components on shadcn/ui (Base UI) and Tailwind v4, with per-org brand theming.",
+  "license": "MIT",
+  "type": "module",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/ashwa-io/ashwa_ui.git"
+  },
+  "engines": {
+    "node": ">=22.18"
+  },
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./theme": {
+      "types": "./dist/theme.d.ts",
+      "import": "./dist/theme.js"
+    },
+    "./styles.css": "./src/styles/index.css",
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "dist",
+    "src/styles"
+  ],
+  "sideEffects": [
+    "*.css"
+  ],
+  "packageManager": "yarn@4.7.0",
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "lint": "eslint .",
+    "lint:fix": "eslint . --fix",
+    "format": "prettier --write .",
+    "typecheck": "tsc -b",
+    "test": "vitest run",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build",
+    "build": "tsdown",
+    "check:dist": "node scripts/check-dist.mjs",
+    "prepublishOnly": "yarn build && yarn check:dist",
+    "changeset": "changeset",
+    "version-packages": "changeset version"
+  },
+  "peerDependencies": {
+    "lucide-react": "^1",
+    "react": "^19",
+    "react-dom": "^19",
+    "tailwindcss": "^4"
+  },
+  "devDependencies": {
+    "@changesets/cli": "^3",
+    "@eslint/compat": "^2.1.1",
+    "@eslint/js": "^9",
+    "@storybook/addon-a11y": "^10.6.6",
+    "@storybook/addon-docs": "^10.6.6",
+    "@storybook/addon-vitest": "^10.6.6",
+    "@storybook/react-vite": "^10.6.6",
+    "@tailwindcss/vite": "^4.3.5",
+    "@types/culori": "^4.0.1",
+    "@types/eslint-plugin-jsx-a11y": "^6",
+    "@types/node": "^26.6.6",
+    "@types/react": "^19.3.0",
+    "@types/react-dom": "^19.3.0",
+    "@vitejs/plugin-react": "^6.2.1",
+    "@vitest/browser-playwright": "5.1.0",
+    "eslint": "^9",
+    "eslint-config-prettier": "^10.1.8",
+    "eslint-plugin-import": "^2.32.0",
+    "eslint-plugin-jsx-a11y": "^6.10.2",
+    "eslint-plugin-prettier": "^5.5.7",
+    "eslint-plugin-react": "^7.37.5",
+    "eslint-plugin-react-hooks": "^7.1.1",
+    "eslint-plugin-react-refresh": "^0.5.7",
+    "eslint-plugin-storybook": "^10.6.6",
+    "globals": "^17.14.0",
+    "lucide-react": "^1.70.0",
+    "playwright": "^1.65.0",
+    "prettier": "^3.9.10",
+    "prettier-plugin-tailwindcss": "^0.8.1",
+    "react": "^19",
+    "react-dom": "^19",
+    "shadcn": "^4.23.0",
+    "storybook": "^10.6.6",
+    "tailwindcss": "^4",
+    "tsdown": "^0.23.7",
+    "typescript": "^6",
+    "typescript-eslint": "^8.72.1",
+    "vite": "^8",
+    "vitest": "^5"
+  },
+  "dependencies": {
+    "@base-ui/react": "^1.9.0",
+    "@fontsource-variable/inter": "^5.3.0",
+    "class-variance-authority": "^0.7.1",
+    "cn": "^0.5.2",
+    "culori": "^4.0.2",
+    "tw-animate-css": "^1.4.0"
+  }
+}

package/src/styles/index.css

@@ -0,0 +1,155 @@
+@import 'tailwindcss';
+@import 'tw-animate-css';
+@import './shadcn.css';
+@import '@fontsource-variable/inter';
+
+/* Consumers compile our classes from the published JS: Tailwind skips node_modules
+   unless told. Path is relative to this file inside the package. */
+@source '../../dist';
+
+@custom-variant dark (&:is(.dark *));
+
+@theme inline {
+  --font-heading: var(--font-sans);
+  --font-sans: 'Inter Variable', sans-serif;
+  --color-sidebar-ring: var(--sidebar-ring);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar: var(--sidebar);
+  --color-chart-5: var(--chart-5);
+  --color-chart-4: var(--chart-4);
+  --color-chart-3: var(--chart-3);
+  --color-chart-2: var(--chart-2);
+  --color-chart-1: var(--chart-1);
+  --color-ring: var(--ring);
+  --color-input: var(--input);
+  --color-border: var(--border);
+  --color-destructive: var(--destructive);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-accent: var(--accent);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-muted: var(--muted);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-secondary: var(--secondary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-primary: var(--primary);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-popover: var(--popover);
+  --color-card-foreground: var(--card-foreground);
+  --color-card: var(--card);
+  --color-foreground: var(--foreground);
+  --color-background: var(--background);
+  --color-brand: var(--brand);
+  --color-brand-foreground: var(--brand-foreground);
+  --color-brand-text: var(--brand-text);
+  --color-brand-tint: var(--brand-tint);
+  --color-brand-tint-foreground: var(--brand-tint-foreground);
+  /* Radius scale matches nigam_platform (user decision 2026-11-08). */
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+  --radius-2xl: calc(var(--radius) + 8px);
+  --radius-3xl: calc(var(--radius) + 12px);
+  --radius-4xl: calc(var(--radius) + 16px);
+}
+
+:root {
+  /* Brand group: defaults = brandTheme(DEFAULT_BRAND_HEX). Per-org values come from
+     brandThemeCss(hex) in @ashwa-io/ui/theme, injected at runtime, and outrank these. */
+  --brand: oklch(0.585 0.233 293);
+  --brand-foreground: oklch(1 0 0);
+  --brand-text: oklch(0.585 0.233 293);
+  --brand-tint: oklch(0.965 0.018 293);
+  --brand-tint-foreground: oklch(0.565 0.233 293);
+  --brand-map: #8750f6;
+
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.145 0 0);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.145 0 0);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.145 0 0);
+  --primary: var(--brand);
+  --primary-foreground: var(--brand-foreground);
+  --secondary: oklch(0.97 0 0);
+  --secondary-foreground: oklch(0.205 0 0);
+  --muted: oklch(0.97 0 0);
+  --muted-foreground: oklch(0.556 0 0);
+  --accent: oklch(0.97 0 0);
+  --accent-foreground: oklch(0.205 0 0);
+  /* Tailwind red-700, darker than base-nova's red-600: destructive text on its 10% tint
+     (Button destructive) must reach WCAG AA 4.5:1; red-600 only reached 4:1. */
+  --destructive: oklch(0.505 0.213 27.518);
+  --border: oklch(0.922 0 0);
+  --input: oklch(0.922 0 0);
+  --ring: var(--brand);
+  --chart-1: var(--brand);
+  --chart-2: oklch(0.556 0 0);
+  --chart-3: oklch(0.439 0 0);
+  --chart-4: oklch(0.371 0 0);
+  --chart-5: oklch(0.269 0 0);
+  --radius: 0.5rem;
+  --sidebar: oklch(0.985 0 0);
+  --sidebar-foreground: oklch(0.145 0 0);
+  --sidebar-primary: var(--brand);
+  --sidebar-primary-foreground: var(--brand-foreground);
+  --sidebar-accent: oklch(0.97 0 0);
+  --sidebar-accent-foreground: oklch(0.205 0 0);
+  --sidebar-border: oklch(0.922 0 0);
+  --sidebar-ring: var(--brand);
+}
+
+.dark {
+  --brand: oklch(0.585 0.233 293);
+  --brand-foreground: oklch(1 0 0);
+  --brand-text: oklch(0.625 0.223 293);
+  --brand-tint: oklch(0.3 0.04 293);
+  --brand-tint-foreground: oklch(0.685 0.183 293);
+  --brand-map: #8750f6;
+
+  --background: oklch(0.145 0 0);
+  --foreground: oklch(0.985 0 0);
+  --card: oklch(0.205 0 0);
+  --card-foreground: oklch(0.985 0 0);
+  --popover: oklch(0.205 0 0);
+  --popover-foreground: oklch(0.985 0 0);
+  --secondary: oklch(0.269 0 0);
+  --secondary-foreground: oklch(0.985 0 0);
+  --muted: oklch(0.269 0 0);
+  --muted-foreground: oklch(0.708 0 0);
+  --accent: oklch(0.269 0 0);
+  --accent-foreground: oklch(0.985 0 0);
+  --destructive: oklch(0.704 0.191 22.216);
+  --border: oklch(1 0 0 / 10%);
+  --input: oklch(1 0 0 / 15%);
+  --chart-2: oklch(0.556 0 0);
+  --chart-3: oklch(0.439 0 0);
+  --chart-4: oklch(0.371 0 0);
+  --chart-5: oklch(0.269 0 0);
+  --sidebar: oklch(0.205 0 0);
+  --sidebar-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.269 0 0);
+  --sidebar-accent-foreground: oklch(0.985 0 0);
+  --sidebar-border: oklch(1 0 0 / 10%);
+}
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+  button:not(:disabled),
+  [role='button']:not(:disabled) {
+    cursor: pointer;
+  }
+  html {
+    @apply font-sans;
+  }
+}

package/src/styles/shadcn.css

@@ -0,0 +1,639 @@
+/* Vendored from shadcn@4.23.0 dist/tailwind.css (Base UI data-* variants, keyframes).
+   Consumers must not need the shadcn CLI package. Re-copy on shadcn upgrades. */
+@theme inline {
+  @keyframes accordion-down {
+    from {
+      height: 0;
+    }
+    to {
+      height: var(
+        --radix-accordion-content-height,
+        var(--accordion-panel-height, auto)
+      );
+    }
+  }
+
+  @keyframes accordion-up {
+    from {
+      height: var(
+        --radix-accordion-content-height,
+        var(--accordion-panel-height, auto)
+      );
+    }
+    to {
+      height: 0;
+    }
+  }
+}
+
+/* Custom variants */
+@custom-variant data-open {
+  &:where([data-state="open"]),
+  &:where([data-open]:not([data-open="false"])) {
+    @slot;
+  }
+}
+
+@custom-variant data-closed {
+  &:where([data-state="closed"]),
+  &:where([data-closed]:not([data-closed="false"])) {
+    @slot;
+  }
+}
+
+@custom-variant data-checked {
+  &:where([data-state="checked"]),
+  &:where([data-checked]:not([data-checked="false"])) {
+    @slot;
+  }
+}
+
+@custom-variant data-unchecked {
+  &:where([data-state="unchecked"]),
+  &:where([data-unchecked]:not([data-unchecked="false"])) {
+    @slot;
+  }
+}
+
+@custom-variant data-selected {
+  &:where([data-selected="true"]) {
+    @slot;
+  }
+}
+
+@custom-variant data-disabled {
+  &:where([data-disabled="true"]),
+  &:where([data-disabled]:not([data-disabled="false"])) {
+    @slot;
+  }
+}
+
+@custom-variant data-active {
+  &:where([data-state="active"]),
+  &:where([data-active]:not([data-active="false"])) {
+    @slot;
+  }
+}
+
+@custom-variant data-horizontal {
+  &:where([data-orientation="horizontal"]) {
+    @slot;
+  }
+}
+
+@custom-variant data-vertical {
+  &:where([data-orientation="vertical"]) {
+    @slot;
+  }
+}
+
+@utility no-scrollbar {
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+
+  &::-webkit-scrollbar {
+    display: none;
+  }
+}
+
+/* scroll-fade */
+@property --scroll-fade-t {
+  syntax: "<length-percentage>";
+  inherits: false;
+  initial-value: 0px;
+}
+@property --scroll-fade-b {
+  syntax: "<length-percentage>";
+  inherits: false;
+  initial-value: 0px;
+}
+@property --scroll-fade-s {
+  syntax: "<length-percentage>";
+  inherits: false;
+  initial-value: 0px;
+}
+@property --scroll-fade-e {
+  syntax: "<length-percentage>";
+  inherits: false;
+  initial-value: 0px;
+}
+@property --scroll-fade-mask {
+  syntax: "*";
+  inherits: false;
+}
+
+@theme inline {
+  @keyframes scroll-fade-reveal-t {
+    from {
+      --scroll-fade-t: 0px;
+    }
+    to {
+      --scroll-fade-t: var(--_scroll-fade-size-t, var(--scroll-fade-size, min(12%, calc(var(--spacing) * 10))));
+    }
+  }
+  @keyframes scroll-fade-reveal-b {
+    from {
+      --scroll-fade-b: var(--_scroll-fade-size-b, var(--scroll-fade-size, min(12%, calc(var(--spacing) * 10))));
+    }
+    to {
+      --scroll-fade-b: 0px;
+    }
+  }
+  @keyframes scroll-fade-reveal-s {
+    from {
+      --scroll-fade-s: 0px;
+    }
+    to {
+      --scroll-fade-s: var(--_scroll-fade-size-s, var(--scroll-fade-size, min(12%, calc(var(--spacing) * 10))));
+    }
+  }
+  @keyframes scroll-fade-reveal-e {
+    from {
+      --scroll-fade-e: var(--_scroll-fade-size-e, var(--scroll-fade-size, min(12%, calc(var(--spacing) * 10))));
+    }
+    to {
+      --scroll-fade-e: 0px;
+    }
+  }
+}
+
+@utility scroll-fade {
+  --_scroll-fade-size-t: var(
+    --scroll-fade-t-size,
+    var(--scroll-fade-size, min(12%, calc(var(--spacing) * 10)))
+  );
+  --_scroll-fade-size-b: var(
+    --scroll-fade-b-size,
+    var(--scroll-fade-size, min(12%, calc(var(--spacing) * 10)))
+  );
+  --scroll-fade-block: linear-gradient(
+    to bottom,
+    transparent 0,
+    #000 var(--scroll-fade-t, 0px),
+    #000 calc(100% - var(--scroll-fade-b, 0px)),
+    transparent 100%
+  );
+  -webkit-mask-image: var(--scroll-fade-mask, var(--scroll-fade-block));
+  mask-image: var(--scroll-fade-mask, var(--scroll-fade-block));
+  -webkit-mask-composite: source-in;
+  mask-composite: intersect;
+  -webkit-mask-repeat: no-repeat;
+  mask-repeat: no-repeat;
+
+  @supports (animation-timeline: scroll()) {
+    animation:
+      scroll-fade-reveal-t 1ms ease-in-out,
+      scroll-fade-reveal-b 1ms ease-in-out;
+    animation-timeline: scroll(self y), scroll(self y);
+    animation-range:
+      0 var(--scroll-fade-reveal, calc(var(--spacing) * 24)),
+      calc(100% - var(--scroll-fade-reveal, calc(var(--spacing) * 24))) 100%;
+    animation-fill-mode: both;
+  }
+
+  @supports not (animation-timeline: scroll()) {
+    --scroll-fade-t: var(--_scroll-fade-size-t);
+    --scroll-fade-b: var(--_scroll-fade-size-b);
+  }
+}
+
+@utility scroll-fade-y {
+  --_scroll-fade-size-t: var(
+    --scroll-fade-t-size,
+    var(--scroll-fade-size, min(12%, calc(var(--spacing) * 10)))
+  );
+  --_scroll-fade-size-b: var(
+    --scroll-fade-b-size,
+    var(--scroll-fade-size, min(12%, calc(var(--spacing) * 10)))
+  );
+  --scroll-fade-block: linear-gradient(
+    to bottom,
+    transparent 0,
+    #000 var(--scroll-fade-t, 0px),
+    #000 calc(100% - var(--scroll-fade-b, 0px)),
+    transparent 100%
+  );
+  -webkit-mask-image: var(--scroll-fade-mask, var(--scroll-fade-block));
+  mask-image: var(--scroll-fade-mask, var(--scroll-fade-block));
+  -webkit-mask-composite: source-in;
+  mask-composite: intersect;
+  -webkit-mask-repeat: no-repeat;
+  mask-repeat: no-repeat;
+
+  @supports (animation-timeline: scroll()) {
+    animation:
+      scroll-fade-reveal-t 1ms ease-in-out,
+      scroll-fade-reveal-b 1ms ease-in-out;
+    animation-timeline: scroll(self y), scroll(self y);
+    animation-range:
+      0 var(--scroll-fade-reveal, calc(var(--spacing) * 24)),
+      calc(100% - var(--scroll-fade-reveal, calc(var(--spacing) * 24))) 100%;
+    animation-fill-mode: both;
+  }
+
+  @supports not (animation-timeline: scroll()) {
+    --scroll-fade-t: var(--_scroll-fade-size-t);
+    --scroll-fade-b: var(--_scroll-fade-size-b);
+  }
+}
+
+@utility scroll-fade-x {
+  --_scroll-fade-size-s: var(
+    --scroll-fade-s-size,
+    var(--scroll-fade-size, min(12%, calc(var(--spacing) * 10)))
+  );
+  --_scroll-fade-size-e: var(
+    --scroll-fade-e-size,
+    var(--scroll-fade-size, min(12%, calc(var(--spacing) * 10)))
+  );
+  --scroll-fade-inline: linear-gradient(
+    to right,
+    transparent 0,
+    #000 var(--scroll-fade-s, 0px),
+    #000 calc(100% - var(--scroll-fade-e, 0px)),
+    transparent 100%
+  );
+  &:where([dir="rtl"], [dir="rtl"] *) {
+    --scroll-fade-inline: linear-gradient(
+      to left,
+      transparent 0,
+      #000 var(--scroll-fade-s, 0px),
+      #000 calc(100% - var(--scroll-fade-e, 0px)),
+      transparent 100%
+    );
+  }
+  -webkit-mask-image: var(--scroll-fade-mask, var(--scroll-fade-inline));
+  mask-image: var(--scroll-fade-mask, var(--scroll-fade-inline));
+  -webkit-mask-composite: source-in;
+  mask-composite: intersect;
+  -webkit-mask-repeat: no-repeat;
+  mask-repeat: no-repeat;
+
+  @supports (animation-timeline: scroll()) {
+    animation:
+      scroll-fade-reveal-s 1ms ease-in-out,
+      scroll-fade-reveal-e 1ms ease-in-out;
+    animation-timeline: scroll(self inline), scroll(self inline);
+    animation-range:
+      0 var(--scroll-fade-reveal, calc(var(--spacing) * 24)),
+      calc(100% - var(--scroll-fade-reveal, calc(var(--spacing) * 24))) 100%;
+    animation-fill-mode: both;
+  }
+
+  @supports not (animation-timeline: scroll()) {
+    --scroll-fade-s: var(--_scroll-fade-size-s);
+    --scroll-fade-e: var(--_scroll-fade-size-e);
+  }
+}
+
+@utility scroll-fade-t {
+  --_scroll-fade-size-t: var(
+    --scroll-fade-t-size,
+    var(--scroll-fade-size, min(12%, calc(var(--spacing) * 10)))
+  );
+  --scroll-fade-mask: linear-gradient(
+    to bottom,
+    transparent 0,
+    #000 var(--scroll-fade-t, 0px),
+    #000 100%
+  );
+  -webkit-mask-image: var(--scroll-fade-mask);
+  mask-image: var(--scroll-fade-mask);
+  -webkit-mask-composite: source-in;
+  mask-composite: intersect;
+  -webkit-mask-repeat: no-repeat;
+  mask-repeat: no-repeat;
+
+  @supports (animation-timeline: scroll()) {
+    animation: scroll-fade-reveal-t 1ms ease-in-out;
+    animation-timeline: scroll(self y);
+    animation-range: 0 var(--scroll-fade-reveal, calc(var(--spacing) * 24));
+    animation-fill-mode: both;
+  }
+
+  @supports not (animation-timeline: scroll()) {
+    --scroll-fade-t: var(--_scroll-fade-size-t);
+  }
+}
+
+@utility scroll-fade-b {
+  --_scroll-fade-size-b: var(
+    --scroll-fade-b-size,
+    var(--scroll-fade-size, min(12%, calc(var(--spacing) * 10)))
+  );
+  --scroll-fade-mask: linear-gradient(
+    to bottom,
+    #000 0,
+    #000 calc(100% - var(--scroll-fade-b, 0px)),
+    transparent 100%
+  );
+  -webkit-mask-image: var(--scroll-fade-mask);
+  mask-image: var(--scroll-fade-mask);
+  -webkit-mask-composite: source-in;
+  mask-composite: intersect;
+  -webkit-mask-repeat: no-repeat;
+  mask-repeat: no-repeat;
+
+  @supports (animation-timeline: scroll()) {
+    animation: scroll-fade-reveal-b 1ms ease-in-out;
+    animation-timeline: scroll(self y);
+    animation-range: calc(
+        100% - var(--scroll-fade-reveal, calc(var(--spacing) * 24))
+      )
+      100%;
+    animation-fill-mode: both;
+  }
+
+  @supports not (animation-timeline: scroll()) {
+    --scroll-fade-b: var(--_scroll-fade-size-b);
+  }
+}
+
+@utility scroll-fade-l {
+  --_scroll-fade-size-s: var(
+    --scroll-fade-s-size,
+    var(--scroll-fade-size, min(12%, calc(var(--spacing) * 10)))
+  );
+  --scroll-fade-mask: linear-gradient(
+    to right,
+    transparent 0,
+    #000 var(--scroll-fade-s, 0px),
+    #000 100%
+  );
+  -webkit-mask-image: var(--scroll-fade-mask);
+  mask-image: var(--scroll-fade-mask);
+  -webkit-mask-composite: source-in;
+  mask-composite: intersect;
+  -webkit-mask-repeat: no-repeat;
+  mask-repeat: no-repeat;
+
+  @supports (animation-timeline: scroll()) {
+    animation: scroll-fade-reveal-s 1ms ease-in-out;
+    animation-timeline: scroll(self x);
+    animation-range: 0 var(--scroll-fade-reveal, calc(var(--spacing) * 24));
+    animation-fill-mode: both;
+  }
+
+  @supports not (animation-timeline: scroll()) {
+    --scroll-fade-s: var(--_scroll-fade-size-s);
+  }
+}
+
+@utility scroll-fade-r {
+  --_scroll-fade-size-e: var(
+    --scroll-fade-e-size,
+    var(--scroll-fade-size, min(12%, calc(var(--spacing) * 10)))
+  );
+  --scroll-fade-mask: linear-gradient(
+    to right,
+    #000 0,
+    #000 calc(100% - var(--scroll-fade-e, 0px)),
+    transparent 100%
+  );
+  -webkit-mask-image: var(--scroll-fade-mask);
+  mask-image: var(--scroll-fade-mask);
+  -webkit-mask-composite: source-in;
+  mask-composite: intersect;
+  -webkit-mask-repeat: no-repeat;
+  mask-repeat: no-repeat;
+
+  @supports (animation-timeline: scroll()) {
+    animation: scroll-fade-reveal-e 1ms ease-in-out;
+    animation-timeline: scroll(self x);
+    animation-range: calc(
+        100% - var(--scroll-fade-reveal, calc(var(--spacing) * 24))
+      )
+      100%;
+    animation-fill-mode: both;
+  }
+
+  @supports not (animation-timeline: scroll()) {
+    --scroll-fade-e: var(--_scroll-fade-size-e);
+  }
+}
+
+@utility scroll-fade-s {
+  --_scroll-fade-size-s: var(
+    --scroll-fade-s-size,
+    var(--scroll-fade-size, min(12%, calc(var(--spacing) * 10)))
+  );
+  --scroll-fade-mask: linear-gradient(
+    to right,
+    transparent 0,
+    #000 var(--scroll-fade-s, 0px),
+    #000 100%
+  );
+  &:where([dir="rtl"], [dir="rtl"] *) {
+    --scroll-fade-mask: linear-gradient(
+      to left,
+      transparent 0,
+      #000 var(--scroll-fade-s, 0px),
+      #000 100%
+    );
+  }
+  -webkit-mask-image: var(--scroll-fade-mask);
+  mask-image: var(--scroll-fade-mask);
+  -webkit-mask-composite: source-in;
+  mask-composite: intersect;
+  -webkit-mask-repeat: no-repeat;
+  mask-repeat: no-repeat;
+
+  @supports (animation-timeline: scroll()) {
+    animation: scroll-fade-reveal-s 1ms ease-in-out;
+    animation-timeline: scroll(self inline);
+    animation-range: 0 var(--scroll-fade-reveal, calc(var(--spacing) * 24));
+    animation-fill-mode: both;
+  }
+
+  @supports not (animation-timeline: scroll()) {
+    --scroll-fade-s: var(--_scroll-fade-size-s);
+  }
+}
+
+@utility scroll-fade-e {
+  --_scroll-fade-size-e: var(
+    --scroll-fade-e-size,
+    var(--scroll-fade-size, min(12%, calc(var(--spacing) * 10)))
+  );
+  --scroll-fade-mask: linear-gradient(
+    to right,
+    #000 0,
+    #000 calc(100% - var(--scroll-fade-e, 0px)),
+    transparent 100%
+  );
+  &:where([dir="rtl"], [dir="rtl"] *) {
+    --scroll-fade-mask: linear-gradient(
+      to left,
+      #000 0,
+      #000 calc(100% - var(--scroll-fade-e, 0px)),
+      transparent 100%
+    );
+  }
+  -webkit-mask-image: var(--scroll-fade-mask);
+  mask-image: var(--scroll-fade-mask);
+  -webkit-mask-composite: source-in;
+  mask-composite: intersect;
+  -webkit-mask-repeat: no-repeat;
+  mask-repeat: no-repeat;
+
+  @supports (animation-timeline: scroll()) {
+    animation: scroll-fade-reveal-e 1ms ease-in-out;
+    animation-timeline: scroll(self inline);
+    animation-range: calc(
+        100% - var(--scroll-fade-reveal, calc(var(--spacing) * 24))
+      )
+      100%;
+    animation-fill-mode: both;
+  }
+
+  @supports not (animation-timeline: scroll()) {
+    --scroll-fade-e: var(--_scroll-fade-size-e);
+  }
+}
+
+@utility scroll-fade-* {
+  --scroll-fade-size: calc(var(--spacing) * --value(integer));
+  --scroll-fade-size: --value([length], [percentage]);
+}
+
+@utility scroll-fade-t-* {
+  --scroll-fade-t-size: calc(var(--spacing) * --value(integer));
+  --scroll-fade-t-size: --value([length], [percentage]);
+}
+
+@utility scroll-fade-b-* {
+  --scroll-fade-b-size: calc(var(--spacing) * --value(integer));
+  --scroll-fade-b-size: --value([length], [percentage]);
+}
+
+@utility scroll-fade-s-* {
+  --scroll-fade-s-size: calc(var(--spacing) * --value(integer));
+  --scroll-fade-s-size: --value([length], [percentage]);
+}
+
+@utility scroll-fade-e-* {
+  --scroll-fade-e-size: calc(var(--spacing) * --value(integer));
+  --scroll-fade-e-size: --value([length], [percentage]);
+}
+
+@utility scroll-fade-none {
+  --scroll-fade-mask: none;
+}
+
+/* shimmer */
+@property --shimmer-angle {
+  syntax: "<angle>";
+  inherits: true;
+  initial-value: 20deg;
+}
+@property --shimmer-image {
+  syntax: "*";
+  inherits: false;
+}
+@property --shimmer-text-fill {
+  syntax: "*";
+  inherits: false;
+}
+
+@theme inline {
+  @keyframes tw-shimmer {
+    from {
+      background-position: 100% 0;
+    }
+    to {
+      background-position: 0 0;
+    }
+  }
+}
+
+@utility shimmer {
+  --_spread: var(--shimmer-spread, calc(3ch + 40px));
+  --_base: currentColor;
+  --_highlight: var(
+    --shimmer-color,
+    oklch(from currentColor l c h / calc(alpha* 0.2))
+  );
+
+  background-image: var(
+    --shimmer-image,
+    linear-gradient(
+      calc(90deg + var(--shimmer-angle)),
+      var(--_base) calc(50% - var(--_spread)),
+      color-mix(in oklch, var(--_highlight), var(--_base) 50%)
+        calc(50% - var(--_spread) * 0.5),
+      var(--_highlight) 50%,
+      color-mix(in oklch, var(--_highlight), var(--_base) 50%)
+        calc(50% + var(--_spread) * 0.5),
+      var(--_base) calc(50% + var(--_spread))
+    )
+  );
+  background-repeat: no-repeat;
+  background-size: calc(200% + var(--_spread) * 2) 100%;
+  background-position: 0 0;
+  background-clip: text;
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: var(--shimmer-text-fill, transparent);
+  animation: tw-shimmer var(--shimmer-duration, 2s) linear infinite;
+
+  @variant dark {
+    --_highlight: var(
+      --shimmer-color,
+      oklch(from currentColor max(0.8, calc(l + 0.4)) c h / calc(alpha + 0.4))
+    );
+  }
+
+  &:where([dir="rtl"], [dir="rtl"] *) {
+    animation-direction: reverse;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    animation: none;
+    background-image: none;
+    -webkit-text-fill-color: currentColor;
+  }
+}
+
+@utility shimmer-once {
+  animation-iteration-count: 1;
+}
+
+@utility shimmer-reverse {
+  animation-direction: reverse;
+}
+
+@utility shimmer-none {
+  --shimmer-image: none;
+  --shimmer-text-fill: currentColor;
+}
+
+@utility shimmer-color-* {
+  --shimmer-color: --value(--color, [color]);
+  --shimmer-color: color-mix(
+    in oklch,
+    --value(--color, [color]) calc(--modifier(integer) * 1%),
+    transparent
+  );
+}
+
+@utility shimmer-duration-* {
+  --shimmer-duration: calc(--value(integer) * 1ms);
+}
+
+@utility shimmer-spread-* {
+  --shimmer-spread: calc(var(--spacing) * --value(integer));
+  --shimmer-spread: --value([length], [percentage]);
+}
+
+@utility shimmer-angle-* {
+  --shimmer-angle: calc(--value(integer) * 1deg);
+}
+
+/* Kept for backwards compatibility. Unlayered, so it still wins over other
+   utilities on a plain .shimmer element. Variants are handled in the utility. */
+@media (prefers-reduced-motion: reduce) {
+  .shimmer {
+    animation: none;
+    background-image: none;
+    -webkit-text-fill-color: currentColor;
+  }
+}