admin-ui-starter-kit 0.1.3 → 0.4.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "admin-ui-starter-kit",
-  "version": "0.1.3",
+  "version": "0.4.2",
   "description": "Opinionated React component kit for admin panels and SaaS dashboards, built on top of shadcn/ui + Tailwind CSS v4. Callback-driven, framework-agnostic, i18n-ready.",
   "type": "module",
   "license": "MIT",
@@ -42,6 +42,7 @@
     "AGENTS.md",
     ".agents/skills/component-library-rules",
     ".agents/skills/admin-ui-consumer-migration",
+    ".agents/skills/component-quality-pass",
     "scripts/audit-consumer.mjs",
     "scripts/install-skill.mjs",
     "scripts/serve-showcase.mjs"
@@ -61,13 +62,22 @@
     "build:lib": "node scripts/clean-dist.mjs && vite build -c vite.lib.config.ts && node scripts/prune-dist-aggregates.mjs && tailwindcss -i ./src/App.css -o ./dist/style.css --minify && node scripts/copy-style-assets.mjs",
     "lint": "eslint .",
     "lint:architecture": "node scripts/check-architecture.mjs",
+    "quality:smells": "node .agents/skills/component-quality-pass/scripts/scan-quality-smells.mjs",
     "test:exports": "node scripts/check-package-exports.mjs",
+    "docs:check-feature-parity": "node scripts/check-feature-parity.mjs",
     "test:dist-assets": "node scripts/check-dist-assets.mjs",
+    "test:package-smoke": "npm run build:lib && npm run build:showcase && node scripts/check-package-smoke.mjs",
+    "test:package-smoke:check": "node scripts/check-package-smoke.mjs",
+    "test:browser:features": "playwright test tests/showcase/features.browser.spec.ts",
+    "test:a11y:features": "playwright test tests/showcase/features.a11y.spec.ts",
+    "test:visual:features": "playwright test tests/showcase/features.visual.spec.ts",
+    "test:visual:update": "playwright test tests/showcase/features.visual.spec.ts --update-snapshots",
     "docs:generate-props": "node scripts/generate-props-tables.mjs",
     "docs:check-props": "node scripts/check-props-fresh.mjs",
     "docs:sync-skill": "node scripts/sync-skill-components.mjs",
     "typecheck": "tsc -p tsconfig.app.json --noEmit --ignoreDeprecations 6.0",
-    "verify": "npm run lint:architecture && npm run test:exports && npm run docs:check-props && npm run docs:sync-skill -- --check && npm run typecheck && npm run lint && npm run test -- --pool=threads --maxWorkers=1",
+    "verify": "npm run lint:architecture && npm run quality:smells && npm run test:exports && npm run docs:check-feature-parity && npm run docs:check-props && npm run docs:sync-skill -- --check && npm run typecheck && npm run lint && npm run test -- --pool=threads --maxWorkers=1",
+    "verify:release": "npm run verify && npm run build:lib && npm run test:dist-assets && npm run build:showcase && npm run test:package-smoke:check && npm run test:browser:features && npm run test:a11y:features && npm run test:visual:features && git diff --check",
     "test": "vitest run",
     "preview": "vite preview",
     "prepublishOnly": "npm run build:lib && npm run test:dist-assets && npm run build:showcase",
@@ -116,6 +126,11 @@
       "import": "./dist/components/base/cards/index.js",
       "require": "./dist/components/base/cards/index.cjs"
     },
+    "./base/carousel": {
+      "types": "./dist/components/base/carousel/index.d.ts",
+      "import": "./dist/components/base/carousel/index.js",
+      "require": "./dist/components/base/carousel/index.cjs"
+    },
     "./base/combobox": {
       "types": "./dist/components/base/combobox/index.d.ts",
       "import": "./dist/components/base/combobox/index.js",
@@ -146,6 +161,11 @@
       "import": "./dist/components/base/display/index.js",
       "require": "./dist/components/base/display/index.cjs"
     },
+    "./base/display/chart": {
+      "types": "./dist/components/base/display/chart.d.ts",
+      "import": "./dist/components/base/display/chart.js",
+      "require": "./dist/components/base/display/chart.cjs"
+    },
     "./base/display/metadata": {
       "types": "./dist/components/base/display/metadata/index.d.ts",
       "import": "./dist/components/base/display/metadata/index.js",
@@ -156,6 +176,11 @@
       "import": "./dist/components/base/event-calendar/index.js",
       "require": "./dist/components/base/event-calendar/index.cjs"
     },
+    "./base/frame": {
+      "types": "./dist/components/base/frame/index.d.ts",
+      "import": "./dist/components/base/frame/index.js",
+      "require": "./dist/components/base/frame/index.cjs"
+    },
     "./base/forms": {
       "types": "./dist/components/base/forms/index.d.ts",
       "import": "./dist/components/base/forms/index.js",
@@ -301,6 +326,11 @@
       "import": "./dist/components/features/kanban/index.js",
       "require": "./dist/components/features/kanban/index.cjs"
     },
+    "./features/media-library": {
+      "types": "./dist/components/features/media-library/index.d.ts",
+      "import": "./dist/components/features/media-library/index.js",
+      "require": "./dist/components/features/media-library/index.cjs"
+    },
     "./features/mentions": {
       "types": "./dist/components/features/mentions/index.d.ts",
       "import": "./dist/components/features/mentions/index.js",
@@ -311,11 +341,21 @@
       "import": "./dist/components/features/overlays/index.js",
       "require": "./dist/components/features/overlays/index.cjs"
     },
+    "./features/products": {
+      "types": "./dist/components/features/products/index.d.ts",
+      "import": "./dist/components/features/products/index.js",
+      "require": "./dist/components/features/products/index.cjs"
+    },
     "./features/rich-text-editor": {
       "types": "./dist/components/features/rich-text-editor/index.d.ts",
       "import": "./dist/components/features/rich-text-editor/index.js",
       "require": "./dist/components/features/rich-text-editor/index.cjs"
     },
+    "./features/schema-form": {
+      "types": "./dist/components/features/schema-form/index.d.ts",
+      "import": "./dist/components/features/schema-form/index.js",
+      "require": "./dist/components/features/schema-form/index.cjs"
+    },
     "./features/suggestions": {
       "types": "./dist/components/features/suggestions/index.d.ts",
       "import": "./dist/components/features/suggestions/index.js",
@@ -331,6 +371,16 @@
       "import": "./dist/components/layout/index.js",
       "require": "./dist/components/layout/index.cjs"
     },
+    "./layout/app-shell": {
+      "types": "./dist/components/layout/app-shell/index.d.ts",
+      "import": "./dist/components/layout/app-shell/index.js",
+      "require": "./dist/components/layout/app-shell/index.cjs"
+    },
+    "./layout/auth": {
+      "types": "./dist/components/layout/auth/index.d.ts",
+      "import": "./dist/components/layout/auth/index.js",
+      "require": "./dist/components/layout/auth/index.cjs"
+    },
     "./layout/containers": {
       "types": "./dist/components/layout/containers/index.d.ts",
       "import": "./dist/components/layout/containers/index.js",
@@ -351,6 +401,11 @@
       "import": "./dist/components/layout/sidebar/index.js",
       "require": "./dist/components/layout/sidebar/index.cjs"
     },
+    "./layout/workspace": {
+      "types": "./dist/components/layout/workspace/index.d.ts",
+      "import": "./dist/components/layout/workspace/index.js",
+      "require": "./dist/components/layout/workspace/index.cjs"
+    },
     "./layout/hooks": {
       "types": "./dist/components/layout/hooks/index.d.ts",
       "import": "./dist/components/layout/hooks/index.js",
@@ -388,6 +443,7 @@
     "@tiptap/starter-kit": "^3.0.0",
     "cmdk": "^1.0.0",
     "culori": "^4.0.0",
+    "embla-carousel-react": "^8.6.0",
     "leaflet": "^1.0.0",
     "leaflet-draw": "^1.0.0",
     "leaflet.fullscreen": "^5.0.0",
@@ -395,7 +451,7 @@
     "lucide-react": "^1.0.0",
     "qrcode": "^1.0.0",
     "react": "^18.0.0 || ^19.0.0",
-    "react-day-picker": "^9.0.0",
+    "react-day-picker": "^10.0.0",
     "react-dom": "^18.0.0 || ^19.0.0",
     "react-hook-form": "^7.0.0",
     "react-leaflet": "^5.0.0",
@@ -448,6 +504,9 @@
     "culori": {
       "optional": true
     },
+    "embla-carousel-react": {
+      "optional": true
+    },
     "leaflet": {
       "optional": true
     },
@@ -483,12 +542,14 @@
     }
   },
   "devDependencies": {
+    "@axe-core/playwright": "^4.11.3",
     "@dnd-kit/core": "^6.3.1",
     "@dnd-kit/sortable": "^10.0.0",
     "@dnd-kit/utilities": "^3.2.2",
     "@eslint/js": "^10.0.1",
     "@fontsource-variable/inter": "^5.2.8",
     "@mdx-js/rollup": "^3.1.1",
+    "@playwright/test": "^1.61.0",
     "@tailwindcss/cli": "^4.2.4",
     "@tailwindcss/vite": "^4.2.4",
     "@tanstack/react-table": "^8.21.3",
@@ -509,6 +570,7 @@
     "@vitejs/plugin-react": "^6.0.1",
     "cmdk": "^1.1.1",
     "culori": "^4.0.2",
+    "embla-carousel-react": "^8.6.0",
     "eslint": "^10.2.1",
     "eslint-plugin-react-hooks": "^7.1.1",
     "eslint-plugin-react-refresh": "^0.5.2",
@@ -519,9 +581,10 @@
     "leaflet.fullscreen": "^5.3.1",
     "leaflet.markercluster": "^1.5.3",
     "lucide-react": "^1.14.0",
+    "playwright": "^1.60.0",
     "qrcode": "^1.5.4",
     "react": "^19.2.5",
-    "react-day-picker": "^9.14.0",
+    "react-day-picker": "^10.0.1",
     "react-docgen-typescript": "^2.4.0",
     "react-dom": "^19.2.5",
     "react-hook-form": "^7.74.0",

package/scripts/audit-consumer.mjs

@@ -17,6 +17,7 @@ import path from 'node:path';
 import { fileURLToPath } from 'node:url';
 
 const PACKAGE_NAME = 'admin-ui-starter-kit';
+const APP_OWNED_FEATURE_FAMILIES = new Set(['global-search']);
 const __filename = fileURLToPath(import.meta.url);
 const PACKAGE_ROOT = path.resolve(path.dirname(__filename), '..');
 const PACKAGE_JSON = JSON.parse(
@@ -143,6 +144,14 @@ function packageImportIssue(specifier) {
 }
 
 function mapOldSpecifier(specifier) {
+	const exactMappings = {
+		'@/components/layout': `${PACKAGE_NAME}/layout`,
+		'@/components/common/navigation': `${PACKAGE_NAME}/base/navigation`,
+		'@/components/ui/navigation': `${PACKAGE_NAME}/base/navigation`,
+	};
+
+	if (exactMappings[specifier]) return exactMappings[specifier];
+
 	const typographyPrefixes = [
 		'@/components/ui/base/typography',
 		'@/components/ui/typography',
@@ -154,7 +163,9 @@ function mapOldSpecifier(specifier) {
 
 	const layerMappings = [
 		{ prefix: '@/components/ui/base/', target: 'base' },
+		{ prefix: '@/components/ui/navigation/', target: 'base', family: 'navigation' },
 		{ prefix: '@/components/base/', target: 'base' },
+		{ prefix: '@/components/common/navigation/', target: 'base', family: 'navigation' },
 		{ prefix: '@/components/composed/', target: 'composed' },
 		{ prefix: '@/components/features/', target: 'features' },
 		{ prefix: '@/components/layout/', target: 'layout' },
@@ -164,18 +175,18 @@ function mapOldSpecifier(specifier) {
 		if (!specifier.startsWith(mapping.prefix)) continue;
 		const rest = specifier.slice(mapping.prefix.length);
 		const parts = rest.split('/').filter(Boolean);
-		if (parts.length === 0) continue;
+		const family = mapping.family ?? parts[0];
+		if (!family) continue;
+		if (mapping.target === 'features' && APP_OWNED_FEATURE_FAMILIES.has(family)) continue;
 
-		if (mapping.target === 'base' && parts[0] === 'display' && parts[1] === 'metadata') {
+		if (mapping.target === 'base' && family === 'display' && parts[1] === 'metadata') {
 			return `${PACKAGE_NAME}/base/display/metadata`;
 		}
 
-		const candidate = `${PACKAGE_NAME}/${mapping.target}/${parts[0]}`;
+		const candidate = `${PACKAGE_NAME}/${mapping.target}/${family}`;
 		if (PUBLIC_EXPORTS.has(normalizePackageKey(candidate))) return candidate;
 	}
 
-	if (specifier === '@/components/layout') return `${PACKAGE_NAME}/layout`;
-
 	return null;
 }
 
@@ -206,7 +217,7 @@ function isMirrorFile(source) {
 function replaceSpecifiers(source) {
 	let changed = false;
 	const next = source.replace(
-		/(['"])(@\/components\/(?:ui\/base|ui\/typography|base|typography|composed|features|layout)(?:\/[^'"]*)?)\1/g,
+		/(['"])(@\/components\/(?:ui\/base|ui\/typography|ui\/navigation|common\/navigation|base|typography|composed|features|layout)(?:\/[^'"]*)?)\1/g,
 		(match, quote, specifier) => {
 			const replacement = mapOldSpecifier(specifier);
 			if (!replacement) return match;

package/scripts/install-skill.mjs

@@ -19,7 +19,11 @@ import path from 'node:path';
 import readline from 'node:readline';
 import { fileURLToPath } from 'node:url';
 
-const SKILL_NAMES = ['component-library-rules', 'admin-ui-consumer-migration'];
+const SKILL_NAMES = [
+	'component-library-rules',
+	'admin-ui-consumer-migration',
+	'component-quality-pass',
+];
 const PACKAGE_NAME = 'admin-ui-starter-kit';
 
 const __filename = fileURLToPath(import.meta.url);

package/src/App.css

@@ -8,366 +8,15 @@
 @import "leaflet.markercluster/dist/MarkerCluster.css";
 @import "leaflet.markercluster/dist/MarkerCluster.Default.css";
 
-@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-success: var(--success);
-    --color-success-foreground: var(--success-foreground);
-    --color-info: var(--info);
-    --color-info-foreground: var(--info-foreground);
-    --color-warning: var(--warning);
-    --color-warning-foreground: var(--warning-foreground);
-    --color-error: var(--error);
-    --color-error-foreground: var(--error-foreground);
-    --color-main: var(--main);
-    --color-main-foreground: var(--main-foreground);
-    --color-text: var(--foreground);
-    --color-ring: var(--ring);
-    --color-input: var(--input);
-    --color-border: var(--border);
-    --color-destructive: var(--destructive);
-    --color-destructive-foreground: var(--destructive-foreground);
-    --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);
-    --radius-sm: calc(var(--radius) * 0.6);
-    --radius-md: calc(var(--radius) * 0.8);
-    --radius-lg: var(--radius);
-    --radius-xl: calc(var(--radius) * 1.4);
-    --radius-2xl: calc(var(--radius) * 1.8);
-    --radius-3xl: calc(var(--radius) * 2.2);
-    --radius-4xl: calc(var(--radius) * 2.6);
-
-    /*
-     * Typography font-size tokens.
-     *
-     * Library-wide source of truth for `Text` and `Heading` sizes.
-     * Consumers can override at `:root` (or any wrapping element) to
-     * resize the entire library — e.g. denser admin dashboards can set
-     * `--text-sm: 0.8125rem` to shave a pixel without touching JS.
-     *
-     * The `.text-*` utility overrides further down (under `@layer base`)
-     * compose these against the per-region `--typo-scale`.
-     */
-    --text-xxs:  0.625rem;
-    --text-xs:   0.75rem;
-    --text-sm:   0.875rem;
-    --text-base: 1rem;
-    --text-lg:   1.125rem;
-    --text-xl:   1.25rem;
-    --text-2xl:  1.5rem;
-    --text-3xl:  1.875rem;
-    --text-4xl:  2.25rem;
-    --text-5xl:  3rem;
-
-    /*
-     * Density tokens — list-row vertical padding.
-     *
-     * Consumed by base/composed/feature list rows (filters, global-search,
-     * comments, metrics, popover-menu items …). Override on a wrapping
-     * element to densify a single surface without forking components:
-     *
-     *   <div style={{ '--row-py: var(--row-py-tight)' }}> … </div>
-     */
-    --row-py-tight:   0.25rem;   /* 4px  — chip-dense rows  */
-    --row-py-default: 0.5rem;    /* 8px  — standard menu/list rows */
-    --row-py-loose:   0.625rem;  /* 10px — generous rows in cards */
-    --row-py: var(--row-py-default);
-
-    /*
-     * Component-specific theming knobs.
-     * Add narrowly-scoped vars here when a real consumer override exists —
-     * never re-purpose existing variables.
-     */
-    --popover-content-pad: 0.25rem; /* PopoverContent inner padding */
-}
-
+/* shadcn theme — swap this one file to retheme (palette, radius, dark/light). */
+@import "./css/themes/default.css";
 
-:root {
-    --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: oklch(0.205 0 0);
-    --primary-foreground: oklch(0.985 0 0);
-    --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);
-    --destructive: oklch(0.577 0.245 27.325);
-    --destructive-foreground: oklch(0.99 0 0);
-    --success: oklch(0.65 0.17 150);
-    --success-foreground: oklch(0.99 0 0);
-    --info: oklch(0.62 0.16 250);
-    --info-foreground: oklch(0.99 0 0);
-    --warning: oklch(0.78 0.16 80);
-    --warning-foreground: oklch(0.2 0.05 80);
-    --error: oklch(0.577 0.245 27.325);
-    --error-foreground: oklch(0.99 0 0);
-    --main: oklch(0.205 0 0);
-    --main-foreground: oklch(0.985 0 0);
-    --border: oklch(0.922 0 0);
-    --input: oklch(0.922 0 0);
-    --ring: oklch(0.708 0 0);
-    --chart-1: oklch(0.87 0 0);
-    --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.625rem;
-    --sidebar: oklch(0.985 0 0);
-    --sidebar-foreground: oklch(0.145 0 0);
-    --sidebar-primary: oklch(0.205 0 0);
-    --sidebar-primary-foreground: oklch(0.985 0 0);
-    --sidebar-accent: oklch(0.97 0 0);
-    --sidebar-accent-foreground: oklch(0.205 0 0);
-    --sidebar-border: oklch(0.922 0 0);
-    --sidebar-ring: oklch(0.708 0 0);
-}
+/* Global config + overrides that are not part of the shadcn theme. */
+@import "./css/defaults.css";
 
-.dark {
-    --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);
-    --primary: oklch(0.922 0 0);
-    --primary-foreground: oklch(0.205 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);
-    --destructive-foreground: oklch(0.99 0 0);
-    --success: oklch(0.72 0.18 150);
-    --success-foreground: oklch(0.13 0 0);
-    --info: oklch(0.7 0.16 250);
-    --info-foreground: oklch(0.13 0 0);
-    --warning: oklch(0.82 0.17 85);
-    --warning-foreground: oklch(0.18 0.05 80);
-    --error: oklch(0.704 0.191 22.216);
-    --error-foreground: oklch(0.13 0 0);
-    --main: oklch(0.985 0 0);
-    --main-foreground: oklch(0.205 0 0);
-    --border: oklch(1 0 0 / 10%);
-    --input: oklch(1 0 0 / 15%);
-    --ring: oklch(0.556 0 0);
-    --chart-1: oklch(0.87 0 0);
-    --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-primary: oklch(0.488 0.243 264.376);
-    --sidebar-primary-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%);
-    --sidebar-ring: oklch(0.556 0 0);
-}
+/* Feature-local stylesheets (co-located with their components, pulled into
+ * the published style.css here because App.css is the Tailwind CLI entry). */
+@import "./components/features/mentions/mention-chip.css";
+@import "./components/composed/ai/ai-shimmer/ai-shimmer.css";
 
-@layer base {
-  :root {
-    /*
-     * Typography scaling knobs.
-     * --base-font-scale  multiplies the document root font-size (16px baseline).
-     * The four kind-specific scales compound on top of --base-font-scale,
-     * letting consumers shrink/grow individual surfaces independently
-     * (e.g. denser tables, larger marketing headings) without touching JS.
-     *
-     *   <div style="--text-font-scale: 0.9">    // shrink Text only
-     *   <section style="--label-font-scale: 0.85"> // dense form labels
-     */
-    --base-font-scale: 1;
-    --heading-font-scale: 1;
-    --text-font-scale: 1;
-    --label-font-scale: 1;
-    --link-font-scale: 1;
-    font-size: calc(16px * var(--base-font-scale));
-  }
-  * {
-    @apply border-border outline-ring/50;
-    }
-  body {
-    @apply bg-background text-foreground;
-    }
-  /*
-   * Route each typography kind to its scale knob. Tailwind text-* utilities
-   * read `var(--typo-scale)` (declared in the @theme block above), so setting
-   * --typo-scale on the element transparently rescales every text-* utility
-   * applied to it without fighting the cascade.
-   */
-  /*
-   * Route each typography kind to its scale knob. The actual font-size scaling
-   * is applied through the .text-* utility overrides below, which read
-   * `var(--typo-scale)` lazily — so setting it on the typography element
-   * propagates correctly without fighting Tailwind's pre-resolved theme tokens.
-   */
-  [data-typography="heading"] { --typo-scale: var(--heading-font-scale, 1); }
-  [data-typography="text"]    { --typo-scale: var(--text-font-scale, 1); }
-  [data-typography="label"]   { --typo-scale: var(--label-font-scale, 1); }
-  [data-typography="link"]    { --typo-scale: var(--link-font-scale, 1); }
-  button:not(:disabled), [role="button"]:not(:disabled) {
-    cursor: pointer;
-    }
-  html {
-    @apply font-sans;
-    }
-}
-
-/*
- * Tailwind v4 text-* utility overrides.
- *
- * Tailwind's @theme tokens are resolved once at :root, so a `var(--typo-scale)`
- * embedded inside an @theme value collapses to its root fallback rather than
- * inheriting from descendants. To make per-region scaling actually work we
- * redeclare the utilities themselves so the var lookup happens at use-site.
- *
- * These rules sit outside any @layer so they win over Tailwind's utilities
- * layer regardless of import order. Outside elements with `data-typography`
- * --typo-scale falls back to 1, leaving non-typo usages unchanged.
- */
-.text-xxs  { font-size: calc(var(--text-xxs)  * var(--typo-scale, 1)); line-height: 1rem; }
-.text-xs   { font-size: calc(var(--text-xs)   * var(--typo-scale, 1)); line-height: 1rem; }
-.text-sm   { font-size: calc(var(--text-sm)   * var(--typo-scale, 1)); line-height: 1.25rem; }
-.text-base { font-size: calc(var(--text-base) * var(--typo-scale, 1)); line-height: 1.5rem; }
-.text-lg   { font-size: calc(var(--text-lg)   * var(--typo-scale, 1)); line-height: 1.75rem; }
-.text-xl   { font-size: calc(var(--text-xl)   * var(--typo-scale, 1)); line-height: 1.75rem; }
-.text-2xl  { font-size: calc(var(--text-2xl)  * var(--typo-scale, 1)); line-height: 2rem; }
-.text-3xl  { font-size: calc(var(--text-3xl)  * var(--typo-scale, 1)); line-height: 2.25rem; }
-.text-4xl  { font-size: calc(var(--text-4xl)  * var(--typo-scale, 1)); line-height: 2.5rem; }
-.text-5xl  { font-size: calc(var(--text-5xl)  * var(--typo-scale, 1)); line-height: 1; }
-/* ----------------------------------------------------------------- */
-/*  Inline mention chips                                              */
-/*                                                                    */
-/*  `.rsc-mention` is the editor-side counterpart to <MentionChip>    */
-/*  (which wraps <Badge>). Same tone palette, same shape, but driven  */
-/*  by `data-ref-tone` so the chip renders identically inside any     */
-/*  contenteditable surface — no React component required.            */
-/*                                                                    */
-/*  Tones map to the existing semantic CSS variables. If you rebrand  */
-/*  the lib's `--info`, `--success`, etc., chips follow automatically.*/
-/* ----------------------------------------------------------------- */
-.rsc-mention {
-    /* Inline-flow tweaks:
-     *   - `inline-block` (not `inline-flex`) so the chip sits on the
-     *     baseline of the surrounding text instead of the line's
-     *     midpoint — `inline-flex` was drifting below adjacent text.
-     *   - `em`-scaled font/padding so the chip scales with whatever
-     *     line it's embedded in (text-sm body, text-base body, …).
-     *   - small but visible vertical padding for breathing room.
-     */
-    display: inline-block;
-    padding: 0.125em 0.5em;
-    border-radius: 9999px;
-    font-size: 0.875em;
-    line-height: 1.35;
-    font-weight: 600;
-    white-space: nowrap;
-    vertical-align: baseline;
-    text-decoration: none;
-    cursor: default;
-    user-select: all;
-    background: color-mix(in oklab, var(--foreground) 8%, transparent);
-    color: var(--foreground);
-    box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--foreground) 10%, transparent);
-    transition: background 0.12s ease;
-}
-.rsc-mention:hover {
-    background: color-mix(in oklab, var(--foreground) 14%, transparent);
-}
-
-.rsc-mention[data-ref-tone="info"] {
-    background: color-mix(in oklab, var(--info) 18%, transparent);
-    color: var(--info);
-    box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--info) 30%, transparent);
-}
-.rsc-mention[data-ref-tone="success"] {
-    background: color-mix(in oklab, var(--success) 20%, transparent);
-    color: var(--success);
-    box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--success) 35%, transparent);
-}
-.rsc-mention[data-ref-tone="warning"] {
-    background: color-mix(in oklab, var(--warning) 50%, transparent);
-    color: var(--warning-foreground);
-    box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--warning) 50%, transparent);
-}
-.rsc-mention[data-ref-tone="destructive"] {
-    background: color-mix(in oklab, var(--destructive) 12%, transparent);
-    color: var(--destructive);
-    box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--destructive) 30%, transparent);
-}
-.rsc-mention[data-ref-tone="primary"] {
-    background: color-mix(in oklab, var(--primary) 12%, transparent);
-    color: var(--primary);
-    box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--primary) 25%, transparent);
-}
-.rsc-mention[data-ref-tone="secondary"] {
-    background: var(--muted);
-    color: var(--muted-foreground);
-    box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--foreground) 10%, transparent);
-}
-
-/* Inside the editor we also want spell-check disabled on chip labels.  */
-.ProseMirror .rsc-mention,
-[contenteditable="true"] .rsc-mention {
-    /* Treat the chip as an atomic, non-editable glyph. */
-    user-select: all;
-    -webkit-user-select: all;
-}
-
-/* ----------------------------------------------------------------- */
-/*  AI shimmer                                                        */
-/*                                                                    */
-/*  Token-driven shimmer used by <AiShimmer> and any "thinking…"      */
-/*  surface that wants the moving-gradient sweep effect.              */
-/*                                                                    */
-/*  Override --ai-shimmer-base / --ai-shimmer-highlight at any scope  */
-/*  to retone the sweep (e.g. brand-coloured wash on the hero).       */
-/* ----------------------------------------------------------------- */
-:root {
-    --ai-shimmer-base: color-mix(in oklab, var(--foreground) 45%, transparent);
-    --ai-shimmer-highlight: var(--foreground);
-}
-.dark {
-    --ai-shimmer-base: color-mix(in oklab, var(--foreground) 35%, transparent);
-    --ai-shimmer-highlight: var(--foreground);
-}
-@keyframes ai-shimmer-sweep {
-    0%   { background-position: 200% 0; }
-    100% { background-position: -200% 0; }
-}
+@custom-variant dark (&:is(.dark *));