onsystem 0.6.0 → 0.8.0

package/dist/{design-system-A3pRX3Ka.js → design-system-Dmcv7eHR.js}

@@ -4,10 +4,10 @@ import { pathToFileURL } from "node:url";
 import * as z from "zod";
 import { escapePath, glob, globSync } from "tinyglobby";
 import ts from "typescript";
-import { clampChroma, colorsNamed, converter, differenceEuclidean, formatHex, parse } from "culori";
+import os from "node:os";
+import { clampChroma, colorsNamed, converter, differenceEuclidean, formatHex, parse, wcagContrast } from "culori";
 import { createHash } from "node:crypto";
 import fsp from "node:fs/promises";
-import os from "node:os";
 import postcss from "postcss";
 import { LineCounter, isMap, isScalar, parseDocument, stringify } from "yaml";
 import { stemmer } from "stemmer";
@@ -23,13 +23,36 @@ const DEFAULT_OPTIONS = {
 	resolveJsonModule: true
 };
 /**
-* Reads the project's tsconfig (only from inside the root: walking further up
-* would pick up unrelated configs, e.g. this repository's own when extracting
-* test fixtures).
+* The configs read from a project's root without a `tsconfig` option, in order: a
+* JavaScript app keeps its `paths` in jsconfig.json (create-next-app, shadcn/ui with
+* `"tsx": false`), which TypeScript reads when there is no tsconfig.json.
+*/
+const PROJECT_CONFIG_FILES = ["tsconfig.json", "jsconfig.json"];
+/**
+* Build output, which a jsconfig.json's default `include` takes, as its `.js` files are
+* sources to TypeScript: the folders libraries/load.ts skips without a config, and VS Code's
+* jsconfig docs advise excluding.
+*/
+const BUILD_OUTPUT = /* @__PURE__ */ new Set([
+	"dist",
+	"build",
+	"out",
+	".next",
+	"coverage",
+	"public"
+]);
+/** The root's tsconfig.json, else its jsconfig.json. */
+function defaultProjectConfig(root) {
+	return PROJECT_CONFIG_FILES.map((file) => path.join(root, file)).find((file) => fs.existsSync(file));
+}
+/**
+* Reads the project's tsconfig, or its jsconfig without one (only from inside
+* the root: walking further up would pick up unrelated configs, e.g. this
+* repository's own when extracting test fixtures).
 */
 function readProjectConfig(root, tsconfig) {
-	const configFile = tsconfig ? path.resolve(root, tsconfig) : path.join(root, "tsconfig.json");
-	if (!fs.existsSync(configFile)) return {
+	const configFile = tsconfig ? path.resolve(root, tsconfig) : defaultProjectConfig(root);
+	if (!configFile || !fs.existsSync(configFile)) return {
 		options: { ...DEFAULT_OPTIONS },
 		pathsBase: root,
 		paths: {},
@@ -55,7 +78,10 @@ function readProjectConfig(root, tsconfig) {
 			return ts.sys.readFile(file);
 		}
 	};
-	const parsed = ts.parseJsonConfigFileContent(read.config, host, path.dirname(configFile));
+	const dir = path.dirname(configFile);
+	const jsconfig = path.basename(configFile) === "jsconfig.json";
+	const parsed = ts.parseJsonConfigFileContent(read.config, host, dir, jsconfig ? { allowJs: true } : void 0);
+	const fileNames = jsconfig && parsed.raw?.exclude === void 0 ? parsed.fileNames.filter((file) => !inBuildOutput(path.relative(dir, file))) : parsed.fileNames;
 	const options = {
 		...DEFAULT_OPTIONS,
 		...parsed.options
@@ -69,13 +95,17 @@ function readProjectConfig(root, tsconfig) {
 	delete options.tsBuildInfoFile;
 	return {
 		options,
-		pathsBase: options.baseUrl ?? (typeof options.pathsBasePath === "string" ? options.pathsBasePath : path.dirname(configFile)),
+		pathsBase: options.baseUrl ?? (typeof options.pathsBasePath === "string" ? options.pathsBasePath : dir),
 		paths: options.paths ?? {},
 		configFile,
 		configFiles,
-		fileNames: parsed.fileNames
+		fileNames
 	};
 }
+/** Whether a file, by its path relative to the config, is in a build output folder. */
+function inBuildOutput(relative) {
+	return relative.split(/[\\/]/).slice(0, -1).some((part) => BUILD_OUTPUT.has(part));
+}
 function createProgram(files, config, oldProgram) {
 	return ts.createProgram({
 		rootNames: files,
@@ -107,6 +137,12 @@ function slashGlob(pattern) {
 	if (!pattern.includes("/")) return pattern.replaceAll("\\", "/");
 	return pattern.replace(/\\(?![()[\]{}*?!+@])/g, "/");
 }
+/**
+* The files `check` and `check_ui` read: `.tsx`, `.jsx`, `.ts`, `.js` and the `.mts`, `.cts`,
+* `.mjs` and `.cjs` forms, in any case. CSS, Markdown or JSON parsed as TSX gives hundreds of
+* syntax errors (209 for a shadcn/ui `app/globals.css`).
+*/
+const SCRIPT_FILE$1 = /\.(?:[jt]sx?|[cm][jt]s)$/i;
 /** Path relative to `root`, always with forward slashes. */
 function relativePath(root, file) {
 	return toPosix(path.relative(root, file));
@@ -116,6 +152,24 @@ function isInside(root, file) {
 	const rel = path.relative(root, file);
 	return rel === "" || !rel.startsWith("..") && !path.isAbsolute(rel);
 }
+/**
+* Whether `dir` is the home folder, a folder that holds it, or a filesystem root, links
+* resolved. None of them is a project's workspace or repository, though a stray
+* `~/package.json` with `workspaces`, or a repository of dotfiles, makes one look like it, and
+* from there a `../` path reaches `~/.aws/credentials`.
+*/
+function isHomeOrAbove(dir) {
+	const home = os.homedir();
+	const holdsHome = (d, h) => d === path.parse(d).root || isInside(d, h);
+	return holdsHome(path.resolve(dir), path.resolve(home)) || holdsHome(realOrSelf(dir), realOrSelf(home));
+}
+function realOrSelf(p) {
+	try {
+		return fs.realpathSync(p);
+	} catch {
+		return path.resolve(p);
+	}
+}
 /** The static directory part of a glob (`components/ui/**\/*.tsx` → `components/ui`). */
 function globBase(glob) {
 	const parts = toPosix(glob).split("/");
@@ -143,6 +197,16 @@ function matchesGlob(file, pattern) {
 	return regex.test(file.replace(/^\.\//, ""));
 }
 const globRegExps = /* @__PURE__ */ new Map();
+/**
+* Whether a root-relative path is one a glob matches, or is in a folder it matches, as a
+* glob's `ignore` leaves a matching folder out: `app/legacy`, `app/legacy/`, `./app/legacy` and
+* `app/legacy/**` all cover `app/legacy/old.tsx`, and `**\/legacy` covers every legacy folder.
+* How `exclude` patterns are matched, wherever they apply.
+*/
+function coveredByGlob(file, pattern) {
+	const glob = pattern.replace(/^\.\//, "").replace(/\/+$/, "");
+	return matchesGlob(file, glob) || matchesGlob(file, `${glob}/**`);
+}
 function globSource(pattern) {
 	let out = "";
 	for (let i = 0; i < pattern.length; i++) {
@@ -534,7 +598,9 @@ const STYLESHEETS = [
 *    workspace sources, read the same way or through their own `components.json`,
 *    or, for a package without `exports` that apps import by path
 *    (`@acme/ui/primitives/button`), from the files the root's code imports. They
-*    are added to what `components.json` found, not skipped for it.
+*    are added to what `components.json` found, not skipped for it. One installed
+*    from a registry is read through its `exports` alone, when they point at the
+*    component sources it publishes, not from `dist/` back to `src/`.
 * 4. A flat folder of components that wrap a primitives library, the way React
 *    Aria's Tailwind starter ships them (`src/Button.tsx`, `src/Checkbox.tsx`).
 *
@@ -542,6 +608,10 @@ const STYLESHEETS = [
 * (`designSystems`). A candidate whose globs match no file is skipped. Returns undefined
 * when nothing applies, so the shadcn defaults stay in force.
 *
+* Next to the ui folder `components.json` names, the folders `npx shadcn add` copies other
+* registries' code into (its `registries`: `@signoff-ui` → `components/signoff-ui`) are
+* read-only design systems, after all the others ({@link fromRegistries}).
+*
 * `declared` is the dependency whose config the root takes on ({@link findDesignSystemPackage}):
 * it is read first among the dependencies in step 3, whatever its name, and also when it is
 * installed from a registry rather than a workspace package.
@@ -554,8 +624,9 @@ function detectProject(root, tsconfig, trace, declared, packages = new PackageFi
 	});
 	const found = [];
 	const shadcn = readJson$1(path.join(root, "components.json"));
+	const project = shadcn ? readProjectConfig(root, tsconfig) : void 0;
 	let why = "no ui or components alias";
-	const fromShadcn = shadcn ? fromComponentsJson(root, root, shadcn, readProjectConfig(root, tsconfig), packages, (r) => {
+	const fromShadcn = shadcn && project ? fromComponentsJson(root, root, shadcn, project, packages, (r) => {
 		why = r;
 	}) : void 0;
 	if (!shadcn) step("components.json", false, fs.existsSync(path.join(root, "components.json")) ? "not valid JSON" : "not found");
@@ -591,21 +662,23 @@ function detectProject(root, tsconfig, trace, declared, packages = new PackageFi
 	let imported;
 	for (const name of names) {
 		const own = name === declared?.name ? declared : void 0;
-		const kind = own?.installed ? "installed" : "workspace";
+		const workspaceDir = own ? void 0 : packages.find(name);
+		const installedDir = own || workspaceDir ? void 0 : packages.installed(name);
+		const kind = own?.installed ?? installedDir !== void 0 ? "installed" : "workspace";
 		const candidate = `${kind} package ${name}`;
 		if (found.some((f) => f.package === name)) {
 			step(candidate, false, "not added twice: components.json points into it");
 			continue;
 		}
-		const dir = own ? own.dir : packages.find(name);
+		const dir = own?.dir ?? workspaceDir ?? installedDir;
 		const pkg = dir ? readJson$1(path.join(dir, "package.json")) : void 0;
 		if (!dir || !pkg) {
-			step(candidate, false, "not a workspace package: an installed package is compiled, and only sources are read");
+			step(candidate, false, "not a workspace package, and not installed");
 			continue;
 		}
 		const reasons = [];
 		const note = (r) => reasons.push(r);
-		const result = fromPackage(root, dir, pkg, note) ?? fromPackageComponentsJson(root, dir, pkg, packages, note) ?? fromImports(root, dir, name, (imported ??= importedSubpaths(root, names)).get(name), note);
+		const result = installedDir ? fromPackage(root, dir, pkg, note, true) : fromPackage(root, dir, pkg, note) ?? fromPackageComponentsJson(root, dir, pkg, packages, note) ?? fromImports(root, dir, name, (imported ??= importedSubpaths(root, names)).get(name), note);
 		if (result && matchesAny(root, result)) {
 			found.push({
 				...result,
@@ -616,11 +689,28 @@ function detectProject(root, tsconfig, trace, declared, packages = new PackageFi
 			step(candidate, true, `${relativePath(root, dir)}, ${countFiles(root, result)}`);
 		} else step(candidate, false, result ? "its components match no file" : unique(reasons).join("; ") || "nothing to read");
 	}
+	const registries = shadcn && project && fromShadcn && !withDefaults ? fromRegistries(root, shadcn, fromShadcn, found, project, step) : [];
 	if (found.length) {
 		step("a flat src/ of components", false, "not read: a design system was found");
+		const named = (source) => registries.length ? `${source}; from shadcn registries, read-only: ${registries.map((r) => r.source).join(", ")}` : source;
+		const read = registries.map((f) => ({
+			source: f.source,
+			components: f.components,
+			imports: 0,
+			registry: f.registry
+		}));
 		if (found.length === 1) {
 			const [only] = found;
-			return detection(root, found, withDefaults, only?.source ?? "");
+			const source = only?.source ?? "";
+			if (!only || !read.length) return detection(root, found, withDefaults, source);
+			return {
+				...detection(root, [...found, ...registries], withDefaults, named(source)),
+				designSystems: [{
+					source,
+					components: only.components,
+					imports: 0
+				}, ...read]
+			};
 		}
 		const counts = importCounts(root, found.map((f) => f.prefixes ?? []));
 		const ranked = found.map((f, i) => ({
@@ -631,12 +721,12 @@ function detectProject(root, tsconfig, trace, declared, packages = new PackageFi
 		const [primary, ...rest] = ranked;
 		const describe = (r) => `${r.f.source} (${r.imports.toLocaleString("en-US")} ${r.imports === 1 ? "import" : "imports"})`;
 		return {
-			...detection(root, ranked.map((r) => r.f), withDefaults, `primary: ${primary ? describe(primary) : ""}; also: ${rest.map(describe).join(", ")}`),
-			designSystems: ranked.map((r) => ({
+			...detection(root, [...ranked.map((r) => r.f), ...registries], withDefaults, named(`primary: ${primary ? describe(primary) : ""}; also: ${rest.map(describe).join(", ")}`)),
+			designSystems: [...ranked.map((r) => ({
 				source: r.f.source,
 				components: r.f.components,
 				imports: r.imports
-			}))
+			})), ...read]
 		};
 	}
 	let flatWhy = "no package.json";
@@ -778,7 +868,7 @@ function fromComponentsJson(root, dir, json, project, packages, note = ignore) {
 		const pkgDir = name ? packages.find(name) : void 0;
 		const pkg = pkgDir ? readJson$1(path.join(pkgDir, "package.json")) : void 0;
 		if (!name || !pkgDir || !pkg) {
-			note(`the ui alias ${ui} resolves through neither tsconfig paths nor a workspace package`);
+			note(`the ui alias ${ui} resolves through neither ${project.configFile ? path.basename(project.configFile) : "tsconfig"} paths nor a workspace package`);
 			return;
 		}
 		imports = exportMappings(root, pkgDir, pkg);
@@ -799,6 +889,101 @@ function fromComponentsJson(root, dir, json, project, packages, note = ignore) {
 		...ownerPackage(root, uiDir, ui)
 	};
 }
+/** How a shadcn registry is named in components.json: `@` and a name, so none leads out of the folder. */
+const REGISTRY_NAMESPACE = /^@[a-z0-9][\w-]*$/i;
+/**
+* The registries `components.json` names (`"registries": { "@signoff-ui": … }`), sorted, and
+* where `npx shadcn add` copies their code: the components alias, through tsconfig `paths`, when
+* it names a folder in the project. `why` says why there is none.
+*/
+function registryBase(root, json, project) {
+	const namespaces = Object.keys(asRecord(json.registries)).filter((n) => REGISTRY_NAMESPACE.test(n)).sort();
+	const alias = asRecord(json.aliases).components;
+	if (typeof alias !== "string") return {
+		namespaces,
+		why: "no components alias"
+	};
+	const base = namespaces.length ? resolveThroughPaths(alias, project) : void 0;
+	if (!base || !isInside(root, base)) return {
+		namespaces,
+		why: `the components alias ${alias} names no folder in the project through tsconfig paths`
+	};
+	return {
+		namespaces,
+		base,
+		alias
+	};
+}
+/** The folder of a registry's code: the namespace without its `@`, under the components folder. */
+function registryFolder(root, base, namespace) {
+	const dir = relativePath(root, path.join(base, namespace.slice(1)));
+	return {
+		namespace,
+		dir,
+		glob: `${escapePath(dir)}/**/*.{tsx,jsx}`
+	};
+}
+/**
+* The folders `npx shadcn add` copies the code of the registries `components.json` names into,
+* whether they hold files yet or not, outside the ui folder ({@link fromRegistries}). A config
+* that lists them in `components` reads them as zero config does: read-only, after the rest.
+*/
+function registryFolders(root, tsconfig) {
+	const json = readJson$1(path.join(root, "components.json"));
+	if (!json || !Object.keys(asRecord(json.registries)).length) return [];
+	const project = readProjectConfig(root, tsconfig);
+	const { namespaces, base } = registryBase(root, json, project);
+	if (!base) return [];
+	const ui = asRecord(json.aliases).ui;
+	const uiDir = typeof ui === "string" ? resolveThroughPaths(ui, project) : void 0;
+	return namespaces.filter((namespace) => !uiDir || !isInside(uiDir, path.join(base, namespace.slice(1)))).map((namespace) => registryFolder(root, base, namespace));
+}
+/**
+* The folders `npx shadcn add` copies the code of the registries `components.json` names into
+* (`@/components` and `@signoff-ui` → `components/signoff-ui`). Each one that holds a .tsx or
+* .jsx file is a read-only design system: the app's code is checked against its components, and
+* its own files are skipped as the ui folder's are. Not when a design system found is imported
+* through a package's `exports` (`@workspace/ui`): a config that names that package would give
+* registry code its name too. A folder inside the ui folder is already part of it. Code a
+* registry copies loose into the components folder (React Bits) is not set apart.
+*/
+function fromRegistries(root, json, ui, others, project, step) {
+	const { namespaces, base, alias, why } = registryBase(root, json, project);
+	if (!namespaces.length) return [];
+	const no = (reason) => {
+		for (const namespace of namespaces) step(`registry ${namespace}`, false, reason);
+		return [];
+	};
+	const exported = others.find((f) => f.imports.length);
+	if (exported) return no(`not read: ${exported.package ?? "a package"} is imported through its exports, and the registry's code is not`);
+	if (!base || alias === void 0) return no(why ?? "no components alias");
+	const found = [];
+	for (const namespace of namespaces) {
+		const candidate = `registry ${namespace}`;
+		const { dir, glob } = registryFolder(root, base, namespace);
+		const absolute = path.join(root, dir);
+		if (ui.dirs.some((d) => isInside(d, absolute))) {
+			step(candidate, false, `${dir} is in the ui folder`);
+			continue;
+		}
+		const files = isDirectory$1(absolute) ? componentGlob(root, [glob]).length : 0;
+		if (!files) {
+			step(candidate, false, `${dir} ${isDirectory$1(absolute) ? "holds no .tsx or .jsx file yet" : "does not exist yet"}`);
+			continue;
+		}
+		step(candidate, true, `${dir}, ${plural(files, "component file")}, read-only`);
+		found.push({
+			components: [glob],
+			tokens: [],
+			imports: [],
+			dirs: [],
+			source: `${dir} (${namespace}, ${plural(files, "file")})`,
+			prefixes: [`${alias}/${namespace.slice(1)}`],
+			registry: namespace
+		});
+	}
+	return found;
+}
 /**
 * The workspace package a `components.json` folder belongs to, when it is not the root
 * itself (`@coss/ui/components`, through tsconfig `paths` or the package), and the
@@ -841,22 +1026,29 @@ function fromPackageComponentsJson(root, dir, pkg, packages, note = ignore) {
 * A package whose `exports` point at component source files is a design system. An export
 * that leads to a barrel (`./components/button` → `components/button/index.ts`, or `.` →
 * `src/index.tsx` behind `dist/`) stands for the files the barrel re-exports, each
-* suggested with the export's specifier.
-*/
-function fromPackage(root, dir, pkg, note = ignore) {
+* suggested with the export's specifier. An `installed` package's exports are read as an app
+* resolves them ({@link APP_CONDITIONS}), not from `dist/` back to `src/`: a widget kit
+* publishes `src/` beside `dist/` for its source maps, or points a `source` condition at it for
+* its own repository, and it is not the app's design system. Its compiled files ({@link isBuildOutput})
+* are not read at all: no barrel, component or stylesheet in them. Nor is an export that points
+* at JavaScript outside a build folder ({@link isCompiledExport}): its re-exports are not followed.
+*/
+function fromPackage(root, dir, pkg, note = ignore, installed = false) {
 	const imports = [];
 	const components = [];
 	const add = (mapping, component) => {
 		imports.push(mapping);
 		if (component && !components.some((m) => m.target === mapping.target)) components.push(mapping);
 	};
-	for (const mapping of exportMappings(root, dir, pkg)) {
+	const mappings = exportMappings(root, dir, pkg, installed);
+	for (const mapping of mappings) {
 		const file = path.resolve(root, mapping.target);
+		if (installed && isCompiledExport(dir, file)) continue;
 		if (mapping.target.includes("*") || !SCRIPT_FILE.test(file) || !isFile(file)) {
 			add(mapping, COMPONENT_FILE.test(mapping.target));
 			continue;
 		}
-		for (const reached of exportedFiles(file, dir)) if (COMPONENT_FILE.test(reached)) add({
+		for (const reached of exportedFiles(file, dir)) if (COMPONENT_FILE.test(reached) && !(installed && isBuildOutput(dir, reached))) add({
 			specifier: mapping.specifier,
 			target: relativePath(root, reached)
 		}, true);
@@ -864,8 +1056,9 @@ function fromPackage(root, dir, pkg, note = ignore) {
 	const files = components.filter((m) => !m.target.includes("*"));
 	const patterns = components.filter((m) => m.target.includes("*"));
 	if (files.length < 3 && !patterns.length) {
-		const built = exportMappings(root, dir, pkg).filter((m) => /(?:^|\/)(?:dist|build|lib|out|esm|cjs)\//.test(m.target));
-		note(pkg.exports === void 0 && typeof pkg.main !== "string" ? "no exports" : built.length ? `its exports point at build output with no source found (${built.slice(0, 2).map((m) => m.target).join(", ")})` : `its exports lead to ${plural(files.length, "component file")}; a design system exports at least 3`);
+		const built = mappings.filter((m) => /(?:^|\/)(?:dist|build|lib|out|esm|cjs)\//.test(m.target) || installed && isCompiledExport(dir, path.resolve(root, m.target)));
+		const output = built.slice(0, 2).map((m) => m.target).join(", ");
+		note(pkg.exports === void 0 && typeof pkg.main !== "string" ? "no exports" : built.length ? installed ? `its exports point at build output (${output}), not at component sources, and only sources are read` : `its exports point at build output with no source found (${output})` : `its exports lead to ${plural(files.length, "component file")}; a design system exports at least 3`);
 		return;
 	}
 	const stylesheets = imports.filter((m) => m.target.endsWith(".css") && !m.target.includes("*")).map((m) => path.resolve(root, m.target)).filter((f) => fs.existsSync(f));
@@ -983,10 +1176,11 @@ function importedSubpaths(root, names) {
 }
 /**
 * `exports` subpaths with a source target, as specifiers relative to `root`. A target
-* built to `dist/` maps back to its source (`src/`, through the build config's entries);
-* without an `exports` map, `main` stands for `.`.
+* built to `dist/` maps back to its source (`src/`, through the build config's entries),
+* unless `asWritten`: then each target is the one an app that installs the package resolves
+* ({@link APP_CONDITIONS}), as it is. Without an `exports` map, `main` stands for `.`.
 */
-function exportMappings(root, dir, pkg) {
+function exportMappings(root, dir, pkg, asWritten = false) {
 	const name = typeof pkg.name === "string" ? pkg.name : void 0;
 	if (!name) return [];
 	const exports = pkg.exports ?? (typeof pkg.main === "string" && /^\.?\/?(?:dist|build|lib)\//.test(pkg.main) ? pkg.main : void 0);
@@ -994,9 +1188,9 @@ function exportMappings(root, dir, pkg) {
 	let build;
 	const mappings = [];
 	for (const [key, value] of entries) {
-		const target = exportTarget(value);
+		const target = exportTarget(value, asWritten ? APP_CONDITIONS : void 0);
 		if (!target) continue;
-		const source = target.includes("*") ? sourcePattern(dir, target) : sourceTarget(dir, key, target, build ??= buildEntries(dir));
+		const source = asWritten ? void 0 : target.includes("*") ? sourcePattern(dir, target) : sourceTarget(dir, key, target, build ??= buildEntries(dir));
 		mappings.push({
 			specifier: key === "." ? name : `${name}/${key.replace(/^\.\//, "")}`,
 			target: relativePath(root, path.resolve(dir, source ?? target))
@@ -1004,6 +1198,23 @@ function exportMappings(root, dir, pkg) {
 	}
 	return mappings;
 }
+/**
+* A compiled file in package `dir`'s build folder: JavaScript, JSX or CSS (`dist/index.mjs`,
+* `lib/button.jsx`, `dist/index.css`), or a pattern of them (`dist/*.jsx`). TypeScript there
+* (`lib/utils.ts`) is source.
+*/
+function isBuildOutput(dir, file) {
+	return /^(?:dist|build|lib|out|esm|cjs)\/.*\.(?:[cm]?jsx?|css)$/.test(toPosix(path.relative(dir, file)));
+}
+/**
+* An `exports` target of installed package `dir` that is compiled: its build output, or
+* JavaScript in any folder (`./index.js`, `./es/index.mjs`, `./build-module/index.js`), which a
+* package published from TypeScript or JSX sources ships compiled. Its re-exports are not
+* followed, so a package that ships a `.js` barrel in front of `.jsx` sources is not read.
+*/
+function isCompiledExport(dir, file) {
+	return isBuildOutput(dir, file) || /\.[cm]?js$/.test(file);
+}
 /** `./dist/*.mjs` → `src/*.tsx` (or `.ts`) when files match it there; anything else as it is. */
 function sourcePattern(dir, target) {
 	const relative = target.replace(/^\.\//, "");
@@ -1019,19 +1230,40 @@ function sourcePattern(dir, target) {
 	}
 	return relative;
 }
-/** The source file an export condition map points at: the first string target that is not a declaration file. */
-function exportTarget(value) {
+/**
+* The `exports` conditions an app resolves an installed package through: Node.js's own
+* (`import`, `require`, `module-sync`, `node`, `default`), and the `module`, `browser` and
+* `style` that bundlers and Tailwind CSS add. Others, such as `source`, `expo-source` and
+* `development`, lead the package's own repository to its sources, and an app that installs it
+* builds the target after them: `@expo/ui`'s `"default": "./build/universal/index.js"`, not its
+* `"expo-source": "./src/universal/index.ts"` before it.
+*/
+const APP_CONDITIONS = /* @__PURE__ */ new Set([
+	"import",
+	"require",
+	"module-sync",
+	"node",
+	"module",
+	"browser",
+	"style",
+	"default"
+]);
+/**
+* The source file an export condition map points at: the first string target that is not a
+* declaration file, through any condition but `types`, or through `conditions` alone.
+*/
+function exportTarget(value, conditions) {
 	if (typeof value === "string") return value.endsWith(".d.ts") ? void 0 : value;
 	if (Array.isArray(value)) {
 		for (const item of value) {
-			const target = exportTarget(item);
+			const target = exportTarget(item, conditions);
 			if (target) return target;
 		}
 		return;
 	}
 	if (value && typeof value === "object") for (const [condition, nested] of Object.entries(value)) {
-		if (condition === "types") continue;
-		const target = exportTarget(nested);
+		if (condition === "types" || conditions && !conditions.has(condition)) continue;
+		const target = exportTarget(nested, conditions);
 		if (target) return target;
 	}
 }
@@ -1090,6 +1322,140 @@ function moduleResolver(root) {
 	};
 }
 /**
+* {@link moduleResolver} for a Tailwind config's presets, then a workspace package's
+* `exports` for what it leaves unresolved: `@repo/tailwind-config` through
+* `"exports": { ".": "./tailwind.config.ts" }`, as Turborepo's template has it.
+*/
+function presetResolver(root) {
+	const resolve = moduleResolver(root);
+	const packages = new PackageFinder(root);
+	return (specifier, fromFile) => {
+		const file = resolve(specifier, fromFile);
+		if (file || specifier.startsWith(".")) return file;
+		const name = packageName(specifier);
+		const dir = name ? packages.find(name) : void 0;
+		return name && dir ? exportedFile(dir, `.${specifier.slice(name.length)}`, (f) => SCRIPT_FILE.test(f)) : void 0;
+	};
+}
+/**
+* Resolves a stylesheet's `@import` to a project file: a path next to the stylesheet
+* (`./theme.css`, or `theme.css` as plain CSS reads it), or a stylesheet of a workspace
+* package (`@acme/theme/colors.css`, or `@acme/theme` through its `exports` or its `style`
+* field). An installed package resolves only when zero config reads it as a design system
+* ({@link installedDesignSystem}), and a stylesheet in it imports others of that package alone.
+* In an installed package, a stylesheet in a build folder (`dist/index.css`) is compiled, and
+* resolves to nothing. Other installed packages (`tailwindcss`) and URLs resolve to nothing.
+*/
+function stylesheetResolver(root) {
+	const packages = new PackageFinder(root);
+	const designSystems = /* @__PURE__ */ new Map();
+	const designSystem = (name) => {
+		if (!designSystems.has(name)) designSystems.set(name, installedDesignSystem(root, name, packages));
+		return designSystems.get(name);
+	};
+	const stylesheet = (file, within) => [file, `${file}.css`].find((f) => f.endsWith(".css") && (within === void 0 || isInside(within, f) && !isBuildOutput(within, f)) && !/(?:^|[\\/])node_modules[\\/]/.test(within === void 0 ? f : path.relative(within, f)) && isFile(f));
+	return (specifier, fromFile) => {
+		if (/^(?:[a-z][\w+.-]*:|\/)/i.test(specifier)) return void 0;
+		const relative = stylesheet(path.resolve(path.dirname(fromFile), specifier), installedPackageOf(fromFile));
+		if (relative || specifier.startsWith(".")) return relative;
+		const name = packageName(specifier);
+		const workspace = name ? packages.find(name) : void 0;
+		const installed = name && !workspace ? designSystem(name) : void 0;
+		const dir = workspace ?? installed;
+		if (!name || !dir) return void 0;
+		const subpath = specifier.slice(name.length + 1);
+		const key = subpath ? `./${subpath}` : ".";
+		const exported = installed ? installedStylesheet(installed, key) : exportedFile(dir, key, (f) => f.endsWith(".css"));
+		if (exported !== void 0) return exported ?? void 0;
+		const style = readJson$1(path.join(dir, "package.json"))?.style;
+		return subpath ? stylesheet(path.join(dir, subpath), installed) : stylesheet(path.resolve(dir, typeof style === "string" ? style : "index.css"), installed);
+	};
+}
+/**
+* The stylesheet an app resolves `subpath` (`./globals.css`) of installed package `dir` to,
+* as the package's exported stylesheets are found ({@link exportTarget}): the most specific
+* `exports` entry that maps it decides, through its first stylesheet target under
+* {@link APP_CONDITIONS}, and a later condition is not tried. `null` when that entry leads to no
+* stylesheet, or to one in a build folder (`{ "style": "./dist/x.css", "default": "./src/x.css" }`
+* gives apps the compiled `dist/x.css`); undefined when no entry maps the subpath.
+*/
+function installedStylesheet(dir, subpath) {
+	const [match] = exportMatches(dir, subpath);
+	if (!match) return void 0;
+	const target = exportTargets(match.value, APP_CONDITIONS).map((t) => t.replaceAll("*", match.middle)).find((t) => t.endsWith(".css"));
+	const file = target === void 0 ? void 0 : path.resolve(dir, target);
+	return file && isInside(dir, file) && !isBuildOutput(dir, file) && isFile(file) ? file : null;
+}
+/**
+* The folder of `name` installed from a registry, when zero config reads it as a design system:
+* named like one, with `exports` that point at the component sources it publishes.
+*/
+function installedDesignSystem(root, name, packages) {
+	if (!isDesignSystemName(name)) return void 0;
+	const dir = packages.installed(name);
+	const pkg = dir ? readJson$1(path.join(dir, "package.json")) : void 0;
+	const found = dir && pkg ? fromPackage(root, dir, pkg, ignore, true) : void 0;
+	return found && matchesAny(root, found) ? dir : void 0;
+}
+/** The installed package a file is in: `…/node_modules/@acme/ui` for `…/node_modules/@acme/ui/src/a.css`. */
+function installedPackageOf(file) {
+	const parts = path.resolve(file).split(path.sep);
+	const at = parts.lastIndexOf("node_modules");
+	const first = parts[at + 1] ?? ".";
+	if (at === -1 || first.startsWith(".")) return void 0;
+	const end = at + (first.startsWith("@") ? 3 : 2);
+	return end < parts.length ? parts.slice(0, end).join(path.sep) : void 0;
+}
+/**
+* The file a package's `exports` map `subpath` (`.`, `./theme`) to, through any condition
+* (`style`, `import`, `default`) and `*` patterns: the first target on disk, inside the
+* package, that `accept` takes.
+*/
+function exportedFile(dir, subpath, accept) {
+	for (const { middle, value } of exportMatches(dir, subpath)) for (const target of exportTargets(value)) {
+		const file = path.resolve(dir, target.replaceAll("*", middle));
+		if (isInside(dir, file) && accept(file) && isFile(file)) return file;
+	}
+}
+/**
+* The entries of package `dir`'s `exports` that map `subpath`, with what their `*` stands for:
+* an exact subpath first, then the most specific pattern, as Node.js picks them.
+*/
+function exportMatches(dir, subpath) {
+	const exports = readJson$1(path.join(dir, "package.json"))?.exports;
+	const entries = exports && typeof exports === "object" && !Array.isArray(exports) ? Object.keys(exports).every((k) => k.startsWith(".")) ? Object.entries(exports) : [[".", exports]] : exports === void 0 ? [] : [[".", exports]];
+	const matches = [];
+	for (const [key, value] of entries) {
+		const star = key.indexOf("*");
+		if (star === -1) {
+			if (key === subpath) matches.push({
+				middle: "",
+				value,
+				rank: Infinity
+			});
+			continue;
+		}
+		const prefix = key.slice(0, star);
+		const suffix = key.slice(star + 1);
+		if (subpath.startsWith(prefix) && subpath.endsWith(suffix) && subpath.length >= prefix.length + suffix.length) {
+			const middle = subpath.slice(prefix.length, subpath.length - suffix.length);
+			matches.push({
+				middle,
+				value,
+				rank: prefix.length
+			});
+		}
+	}
+	return matches.sort((a, b) => b.rank - a.rank);
+}
+/** Every target of an export condition map, in order, but its types, or those of `conditions` alone. */
+function exportTargets(value, conditions) {
+	if (typeof value === "string") return [value];
+	if (Array.isArray(value)) return value.flatMap((item) => exportTargets(item, conditions));
+	if (value && typeof value === "object") return Object.entries(value).flatMap(([condition, nested]) => condition === "types" || conditions && !conditions.has(condition) ? [] : exportTargets(nested, conditions));
+	return [];
+}
+/**
 * Where an import from a workspace package points: its file, or `{}` for a
 * subpath the package's `exports` declare but whose target is not on disk
 * (built to `dist/`). Undefined when no such module exists. The linter tells
@@ -1261,14 +1627,8 @@ var PackageFinder = class {
 	* checkout that is not installed (only then is the workspace scanned). With its package.json.
 	*/
 	locate(name) {
-		for (const nodeModules of this.nodeModulesDirs()) {
-			const dir = path.join(nodeModules, ...name.split("/"));
-			const json = cachedManifest(path.join(dir, "package.json"));
-			if (json) return {
-				dir,
-				json
-			};
-		}
+		const found = this.inNodeModules(name);
+		if (found) return found;
 		this.linkable ??= scanWorkspace(this.root, false);
 		const dir = this.linkable.get(name);
 		const json = dir ? cachedManifest(path.join(dir, "package.json")) : void 0;
@@ -1293,6 +1653,30 @@ var PackageFinder = class {
 			boundary: installed ? dir : this.boundaryOf(dir)
 		};
 	}
+	/**
+	* Where `name` is installed from a registry, rather than linked to a workspace package: its
+	* real folder, where pnpm puts its own dependencies beside it, expressed from the root. When
+	* that is outside the root and its workspace (pnpm's store elsewhere on the machine), the
+	* folder in `node_modules` it was found by, the only way the loader reads it.
+	*/
+	installed(name) {
+		const located = this.inNodeModules(name);
+		if (!located) return void 0;
+		const placed = this.place(located.dir);
+		if (!placed.installed) return void 0;
+		return isInside(this.root, placed.dir) || this.boundaryOf(placed.dir) !== placed.dir ? placed.dir : path.resolve(located.dir);
+	}
+	/** `name` in the nearest `node_modules` at or above the root that has it, with its package.json. */
+	inNodeModules(name) {
+		for (const nodeModules of this.nodeModulesDirs()) {
+			const dir = path.join(nodeModules, ...name.split("/"));
+			const json = cachedManifest(path.join(dir, "package.json"));
+			if (json) return {
+				dir,
+				json
+			};
+		}
+	}
 	/** The `node_modules` folders at and above the root, nearest first, looked up once. */
 	nodeModulesDirs() {
 		if (!this.nodeModules) {
@@ -1305,24 +1689,47 @@ var PackageFinder = class {
 		}
 		return this.nodeModules;
 	}
-	/** The workspace root when `dir` is in it, else `dir` itself. */
+	/**
+	* The workspace root when `dir` is in it, else `dir` itself. Never the home folder or above:
+	* a stray `~/package.json` with `workspaces` would let a package's config name
+	* `../../../.aws/credentials`.
+	*/
 	boundaryOf(dir) {
-		if (this.workspace === void 0) this.workspace = workspaceRootOf(this.root) ?? null;
+		if (this.workspace === void 0) {
+			const workspace = workspaceRootOf(this.root);
+			this.workspace = workspace !== void 0 && !isHomeOrAbove(workspace) ? workspace : null;
+		}
 		return this.workspace !== null && isInside(this.workspace, dir) ? this.workspace : dir;
 	}
 };
 /**
-* A monorepo root: a pnpm-workspace.yaml, `workspaces` in package.json (npm, Yarn, Bun),
-* a lerna.json with `packages`, or an nx.json. Turborepo runs on the package manager's
-* workspaces, so its roots are among these.
+* A monorepo root: a pnpm-workspace.yaml whose `packages` name more than the root,
+* `workspaces` in package.json (npm, Yarn, Bun), a lerna.json with `packages`, or an nx.json.
+* Turborepo runs on the package manager's workspaces, so its roots are among these. pnpm 11
+* keeps its settings in a pnpm-workspace.yaml in a single app too (`allowBuilds`, as
+* create-next-app --use-pnpm leaves it), and reads one without `packages`, or with only
+* `- '.'`, as the root alone: that is not a monorepo.
 */
 function isWorkspaceRoot(dir) {
-	if (fs.existsSync(path.join(dir, "pnpm-workspace.yaml"))) return true;
+	if (pnpmWorkspacePackages(dir).length) return true;
 	if (fs.existsSync(path.join(dir, "nx.json"))) return true;
 	const pkg = readJson$1(path.join(dir, "package.json"));
 	if (pkg !== void 0 && pkg.workspaces !== void 0) return true;
 	return Array.isArray(readJson$1(path.join(dir, "lerna.json"))?.packages);
 }
+/**
+* The `packages` of the pnpm-workspace.yaml in `dir` when they name a package other than the
+* root (`.`); none otherwise, and none without the file: then it holds only settings.
+*/
+function pnpmWorkspacePackages(dir) {
+	let list;
+	try {
+		list = pnpmPackages(fs.readFileSync(path.join(dir, "pnpm-workspace.yaml"), "utf8"));
+	} catch {
+		return [];
+	}
+	return list.some((p) => !p.startsWith("!") && path.posix.normalize(toPosix(p).replace(/\/+$/, "")) !== ".") ? list : [];
+}
 /** The nearest workspace root at or above `start`. */
 function workspaceRootOf(start) {
 	for (let dir = start;; dir = path.dirname(dir)) {
@@ -1380,7 +1787,8 @@ function stampOf(files) {
 }
 /**
 * `packages` from pnpm-workspace.yaml, `workspaces` from package.json (npm, Yarn, Bun), or
-* `packages` from lerna.json, in that order of precedence.
+* `packages` from lerna.json, in that order of precedence. A pnpm-workspace.yaml that names
+* no package beyond the root holds only settings, so the next source decides.
 */
 function workspacePatterns(dir) {
 	const split = (list, source) => ({
@@ -1388,8 +1796,8 @@ function workspacePatterns(dir) {
 		exclude: list.filter((p) => p.startsWith("!")).map((p) => toPosix(p.slice(1))),
 		source
 	});
-	const yaml = path.join(dir, "pnpm-workspace.yaml");
-	if (fs.existsSync(yaml)) return split(pnpmPackages(fs.readFileSync(yaml, "utf8")), "pnpm-workspace.yaml");
+	const pnpm = pnpmWorkspacePackages(dir);
+	if (pnpm.length) return split(pnpm, "pnpm-workspace.yaml");
 	const workspaces = readJson$1(path.join(dir, "package.json"))?.workspaces;
 	const list = Array.isArray(workspaces) ? workspaces : asRecord(workspaces).packages;
 	if (Array.isArray(list)) return split(list.filter((p) => typeof p === "string"), "package.json workspaces");
@@ -1428,12 +1836,13 @@ function workspacePackageDirs(root, nx = true) {
 }
 /**
 * The `packages` list of a pnpm-workspace.yaml, block (`- apps/*`, indented or
-* not) or flow (`[apps/*, packages/*]`) style, with comments. Only that key is
-* read, so this stays a few lines rather than a YAML parser.
+* not) or flow (`[apps/*, packages/*]`) style, with comments, a quoted key or a
+* leading byte order mark. Only that key is read, so this stays a few lines
+* rather than a YAML parser.
 */
 function pnpmPackages(text) {
-	const lines = text.split(/\r?\n/);
-	const start = lines.findIndex((line) => /^packages\s*:/.test(line));
+	const lines = text.replace(/^\uFEFF/, "").split(/\r?\n/);
+	const start = lines.findIndex((line) => /^(['"]?)packages\1\s*:/.test(line));
 	if (start === -1) return [];
 	const uncomment = (s) => s.replace(/(?:^|\s)#.*$/, "").trim();
 	const unquote = (s) => s.trim().replace(/^(['"])(.*)\1$/, "$2");
@@ -1506,9 +1915,21 @@ function isBareHsl(value) {
 	return BARE_HSL.test(value.trim());
 }
 /**
+* RGB channels without the function, `22 163 74` (commas and `/ alpha` allowed): how
+* Tailwind v3's docs store colors, to be used as `rgb(var(--success) / <alpha-value>)`.
+* Three numbers alone are no sure color, so they count as one only in a token already
+* known to be a color: one the Tailwind config reads with `rgb()`.
+*/
+const BARE_RGB = /^(\d{1,3})(?:\s*,\s*|\s+)(\d{1,3})(?:\s*,\s*|\s+)(\d{1,3})(?:\s*\/\s*(\d*\.?\d+%?))?$/;
+function isBareRgb(value) {
+	const match = BARE_RGB.exec(value.trim());
+	return match !== null && match.slice(1, 4).every((channel) => Number(channel) <= 255);
+}
+/**
 * Parses any CSS color (hex, rgb(), hsl(), oklch(), named, ...) into OKLCH.
 * With `bareHsl`, for token values, HSL channels count too: in a stylesheet
 * they can only be a color, while in a class or style they are not one.
+* With `bareRgb`, for the values of color tokens, RGB channels count too.
 */
 function parseColor(value, options = {}) {
 	const text = value.trim();
@@ -1519,10 +1940,27 @@ function parseColor(value, options = {}) {
 		const [, h, deg = "", s, l, alpha] = hsl;
 		parsed = parse(`hsl(${h}${deg} ${s}% ${l}%${alpha ? ` / ${alpha}` : ""})`);
 	}
+	const rgb = !parsed && options.bareRgb && isBareRgb(text) ? BARE_RGB.exec(text) : null;
+	if (rgb) {
+		const [, r, g, b, alpha] = rgb;
+		parsed = parse(`rgb(${r} ${g} ${b}${alpha ? ` / ${alpha}` : ""})`);
+	}
 	return parsed ? toOklch$1(parsed) : void 0;
 }
+/** A color's opacity, from 0 (transparent) to 1 (opaque). */
+function opacity(color) {
+	return color.alpha ?? 1;
+}
+/**
+* How much a difference in opacity weighs against ΔE, which leaves it out. Translucency is
+* part of what a color does (an overlay, a tint, a frosted header), so a token more than
+* 0.02 apart in opacity is never close (5 × 0.02 is CLOSE_COLOR): `bg-[#e7000b33]`, the red
+* at 20%, is not `bg-destructive`. One step of an 8-digit hex (1/255) is still the same color.
+*/
+const OPACITY_WEIGHT = 5;
+/** ΔE between two colors, plus their difference in opacity. */
 function colorDistance(a, b) {
-	return okDistance(a, b);
+	return okDistance(a, b) + OPACITY_WEIGHT * Math.abs(opacity(a) - opacity(b));
 }
 function isNamedColor(value) {
 	return Object.hasOwn(colorsNamed, value.toLowerCase());
@@ -1602,6 +2040,25 @@ function sameHue(color, token, tinted = isTinted(color), tolerance = 15) {
 function formatDeltaE(deltaE) {
 	return deltaE < 5e-4 ? "exact match" : `ΔE ${deltaE.toFixed(3)}`;
 }
+/** `opaque`, `20% opaque` or `transparent`, to the nearest percent. */
+function formatOpacity(color) {
+	const percent = Math.round(opacity(color) * 100);
+	return percent === 100 ? "opaque" : percent === 0 ? "transparent" : `${String(percent)}% opaque`;
+}
+/**
+* When a token's value (`token`) and a color differ in opacity, a sentence that says so:
+* `destructive is opaque, and this color is 20% opaque.`
+*/
+function formatOpacityGap(color, token, name) {
+	const [own, its] = [formatOpacity(color), formatOpacity(token)];
+	return own === its ? void 0 : `${name} is ${its}, and this color is ${own}.`;
+}
+/** ΔE between a color and a token's value, which `formatOpacityGap` completes. */
+function formatDistance(color, token) {
+	const deltaE = okDistance(color, token);
+	if (deltaE < 5e-4 && formatOpacityGap(color, token, "")) return "same color";
+	return formatDeltaE(deltaE);
+}
 //#endregion
 //#region src/libraries/mui.ts
 /** The palette groups MUI's components take as a `color` value (`<Button color="primary">`). */
@@ -1945,21 +2402,57 @@ function themeTokens(options, source) {
 const LIBRARY_IDS = ["mui"];
 /** The libraries onsystem can read, by package. */
 const LIBRARIES = [mui];
+/**
+* Published component libraries onsystem does not read yet, by package. A project that depends
+* on one is told so, since nothing in it is checked and a clean result would look like a
+* misconfigured one.
+*/
+const UNREAD_LIBRARIES = [
+	{
+		package: "@chakra-ui/react",
+		title: "Chakra UI"
+	},
+	{
+		package: "@mantine/core",
+		title: "Mantine"
+	},
+	{
+		package: "@heroui/react",
+		title: "HeroUI"
+	},
+	{
+		package: "@radix-ui/themes",
+		title: "Radix Themes"
+	},
+	{
+		package: "antd",
+		title: "Ant Design"
+	}
+];
 function libraryAdapter(name) {
 	return LIBRARIES.find((library) => library.package === name);
 }
+/** A library's name for messages, read or not: `MUI`, `Chakra UI`. */
+function libraryTitle(name) {
+	return [...LIBRARIES, ...UNREAD_LIBRARIES].find((l) => l.package === name)?.title ?? name;
+}
+/** Why a library in `UNREAD_LIBRARIES` is not read: `a dependency onsystem does not read yet (…)`. */
+function notReadYet() {
+	return `a dependency onsystem does not read yet (it reads only ${LIBRARIES.map((l) => l.title).join(", ")} so far)`;
+}
 /**
 * The libraries `root`'s package.json depends on (dependencies, devDependencies or
 * peerDependencies), each found where Node.js would find it: in `node_modules` at the root or a
 * folder above it, as a monorepo hoists it. Nothing in the package is run. `ids` is the config's
 * `libraries`: undefined reads every library onsystem supports, false none, a list those named;
-* the dependencies it leaves out are `off`.
+* the dependencies it leaves out are `off`. Those in `UNREAD_LIBRARIES` are `unread`.
 */
 function detectLibraries(root, ids) {
 	const pkg = readJson(path.join(root, "package.json"));
 	if (!pkg) return {
 		read: [],
-		off: []
+		off: [],
+		unread: []
 	};
 	const dependencies = new Set([
 		"dependencies",
@@ -1969,23 +2462,24 @@ function detectLibraries(root, ids) {
 		const value = pkg[field];
 		return value && typeof value === "object" ? Object.keys(value) : [];
 	}));
-	const found = LIBRARIES.filter((library) => dependencies.has(library.package)).map((library) => {
-		const dir = installedPackage(root, library.package);
+	const sourceOf = (name) => {
+		const dir = installedPackage(root, name);
 		const version = dir ? readJson(path.join(dir, "package.json"))?.version : void 0;
-		const source = {
-			package: library.package,
+		return {
+			package: name,
 			dir,
 			version: typeof version === "string" ? version : void 0
 		};
-		return {
-			id: library.id,
-			source
-		};
-	});
+	};
+	const found = LIBRARIES.filter((library) => dependencies.has(library.package)).map((library) => ({
+		id: library.id,
+		source: sourceOf(library.package)
+	}));
 	const wanted = (id) => ids === void 0 || ids !== false && ids.includes(id);
 	return {
 		read: found.filter((f) => wanted(f.id)).map((f) => f.source),
-		off: found.filter((f) => !wanted(f.id)).map((f) => f.source)
+		off: found.filter((f) => !wanted(f.id)).map((f) => f.source),
+		unread: UNREAD_LIBRARIES.filter((library) => dependencies.has(library.package)).map((library) => sourceOf(library.package))
 	};
 }
 /** The folder `name` is installed in for code in `root`, looking up through `node_modules` folders. */
@@ -2249,12 +2743,15 @@ function usageFor(token, tailwindNamespace) {
 }
 /**
 * The CSS value that uses the token: `var(--primary)`, or `hsl(var(--primary))`
-* when the property holds bare HSL channels (Tailwind v3), which are no color
-* on their own.
+* (`rgb(var(--success))`) when the property holds bare HSL (RGB) channels
+* (Tailwind v3), which are no color on their own.
 */
 function cssReference(token) {
 	if (!token.cssVar) return void 0;
-	return token.category === "color" && isBareHsl(token.value) ? `hsl(var(${token.cssVar}))` : `var(${token.cssVar})`;
+	if (token.category !== "color") return `var(${token.cssVar})`;
+	if (isBareHsl(token.value)) return `hsl(var(${token.cssVar}))`;
+	if (isBareRgb(token.value)) return `rgb(var(${token.cssVar}))`;
+	return `var(${token.cssVar})`;
 }
 function utilities(namespace, key) {
 	switch (namespace) {
@@ -2301,6 +2798,7 @@ const MAX_FILES = 12;
 */
 function readTailwindColors(file, resolve) {
 	const colors = /* @__PURE__ */ new Map();
+	const rgb = /* @__PURE__ */ new Set();
 	const files = [];
 	const queue = [file];
 	while (queue.length && files.length < MAX_FILES) {
@@ -2316,7 +2814,7 @@ function readTailwindColors(file, resolve) {
 		const source = ts.createSourceFile(current, text, ts.ScriptTarget.Latest, true, scriptKind(current));
 		const visit = (node) => {
 			if (ts.isPropertyAssignment(node) && propertyName(node.name) === "colors" && ts.isObjectLiteralExpression(node.initializer)) {
-				collect(node.initializer, [], colors);
+				collect(node.initializer, [], colors, rgb);
 				return;
 			}
 			const specifier = importedSpecifier(node);
@@ -2328,11 +2826,12 @@ function readTailwindColors(file, resolve) {
 	}
 	return {
 		colors,
+		rgb,
 		files
 	};
 }
 /** `primary: { DEFAULT: "hsl(var(--primary))", foreground: … }` → `--primary` → `primary`, `--primary-foreground` → `primary-foreground`. */
-function collect(object, keys, colors) {
+function collect(object, keys, colors, rgb) {
 	for (const property of object.properties) {
 		if (!ts.isPropertyAssignment(property)) continue;
 		const key = propertyName(property.name);
@@ -2340,13 +2839,15 @@ function collect(object, keys, colors) {
 		const value = property.initializer;
 		const nested = [...keys, key];
 		if (ts.isObjectLiteralExpression(value)) {
-			collect(value, nested, colors);
+			collect(value, nested, colors, rgb);
 			continue;
 		}
 		if (!ts.isStringLiteralLike(value)) continue;
 		const variable = /var\(\s*(--[\w-]+)/.exec(value.text)?.[1];
 		const name = nested.filter((k) => k !== "DEFAULT").join("-");
-		if (variable && name && !colors.has(variable)) colors.set(variable, name);
+		if (!variable || !name || colors.has(variable)) continue;
+		colors.set(variable, name);
+		if (/^\s*rgba?\(\s*var\(/.test(value.text)) rgb.add(variable);
 	}
 }
 /**
@@ -2449,9 +2950,9 @@ function applyTailwindRadii(tokens, radii, configFile = "tailwind.config") {
 		havePx.add(px);
 	}
 }
-/** The specifier of `require("x")`, `import x from "x"` or `import("x")`. */
+/** The specifier of `require("x")`, `import x from "x"`, `export { default } from "x"` or `import("x")`. */
 function importedSpecifier(node) {
-	if (ts.isImportDeclaration(node) && ts.isStringLiteral(node.moduleSpecifier)) return node.moduleSpecifier.text;
+	if ((ts.isImportDeclaration(node) || ts.isExportDeclaration(node)) && node.moduleSpecifier && ts.isStringLiteral(node.moduleSpecifier)) return node.moduleSpecifier.text;
 	if (ts.isCallExpression(node) && (node.expression.kind === ts.SyntaxKind.ImportKeyword || ts.isIdentifier(node.expression) && node.expression.text === "require") && node.arguments[0] && ts.isStringLiteralLike(node.arguments[0])) return node.arguments[0].text;
 }
 function scriptKind(file) {
@@ -2500,9 +3001,13 @@ const SHADCN_COLORS = /* @__PURE__ */ new Set([
 * Gives color tokens their Tailwind v3 class names: the key the config maps
 * the custom property to, or, when the config has no colors we can read,
 * shadcn/ui's convention. Tokens that already have a key (`@theme`) keep it.
+* A property the config reads as RGB channels (`rgb(var(--success) / <alpha-value>)`)
+* is a color token when its values are such channels (`22 163 74`), which the
+* stylesheet alone leaves undecided.
 */
-function applyTailwindColors(tokens, colors) {
+function applyTailwindColors(tokens, colors, rgb = /* @__PURE__ */ new Set()) {
 	for (const token of tokens) {
+		if (token.category === "other" && token.cssVar && rgb.has(token.cssVar) && [token.value, ...Object.values(token.modes ?? {})].every(isBareRgb)) token.category = "color";
 		if (token.category !== "color" || token.tailwind !== void 0 || !token.cssVar) continue;
 		const name = token.cssVar.slice(2);
 		const key = colors.size ? colors.get(token.cssVar) : SHADCN_COLORS.has(name) ? name.replace(/^sidebar-background$/, "sidebar") : void 0;
@@ -2511,6 +3016,49 @@ function applyTailwindColors(tokens, colors) {
 		token.usage = usageFor(token, "--color");
 	}
 }
+/** Enough of a package's stylesheets to find its theme, without reading a whole design system. */
+const MAX_PRESET_STYLESHEETS = 200;
+/**
+* The stylesheets that set the custom properties a Tailwind v3 config maps to colors, when
+* they sit in a workspace package the config reads its presets from rather than in the
+* project: Dub's `@dub/tailwind-config`, whose `themes.css` sets `--content-error` for the
+* `content-error` its config maps. Each CSS file of such a package (outside `node_modules`
+* and build output) that declares one of them, in path order. The project's own folder, and
+* a folder that holds it (a preset at the workspace root), are not searched.
+*/
+function presetStylesheets(read, root) {
+	if (!read.colors.size) return [];
+	const packages = /* @__PURE__ */ new Set();
+	for (const file of read.files) {
+		const dir = packageDir(path.dirname(file));
+		if (dir && !isInside(dir, root)) packages.add(dir);
+	}
+	const out = [];
+	for (const dir of packages) {
+		const sheets = globSync("**/*.css", {
+			cwd: dir,
+			absolute: true,
+			ignore: ["**/node_modules/**", "**/{dist,build,out,.next,.turbo,coverage}/**"]
+		}).sort().slice(0, MAX_PRESET_STYLESHEETS);
+		for (const sheet of sheets) {
+			let text;
+			try {
+				text = fs.readFileSync(sheet, "utf8");
+			} catch {
+				continue;
+			}
+			if ([...text.matchAll(/(--[\w-]+)\s*:/g)].some((m) => read.colors.has(m[1] ?? ""))) out.push(path.resolve(sheet));
+		}
+	}
+	return out;
+}
+/** The nearest folder at or above `dir` with a package.json. */
+function packageDir(dir) {
+	for (let current = dir;; current = path.dirname(current)) {
+		if (fs.existsSync(path.join(current, "package.json"))) return current;
+		if (current === path.dirname(current)) return void 0;
+	}
+}
 /** The project's Tailwind v3 config: `tailwind.config` in components.json, else `tailwind.config.*` in the root. */
 function findTailwindConfig(root) {
 	try {
@@ -2589,7 +3137,7 @@ const librariesSchema = z.union([z.literal(false), z.array(z.enum(LIBRARY_IDS))]
 const configShape = {
 	$schema: z.string().optional(),
 	components: globsSchema.optional().describe("Globs for component source files, relative to the root."),
-	exclude: z.array(z.string()).optional().describe("Globs to ignore when finding components and when `check` expands folders and globs (stories, tests). Replaces the defaults; node_modules is skipped either way unless a pattern names it."),
+	exclude: z.array(z.string()).optional().describe("Globs for files to leave out, relative to the root: `check` in folders and globs, the ESLint plugin, the Claude Code hook and check_ui leave them out, and finding components skips them. A folder (`app/legacy`) covers everything in it. Adds to the defaults (node_modules, .d.ts files, tests and stories); a pattern that starts with `!` takes out the default it names, such as `!**/*.d.ts`."),
 	tokens: z.union([tokenSourceSchema, z.array(tokenSourceSchema)]).optional().describe("Token files: W3C DTCG JSON (*.json), CSS custom properties (*.css) or a DESIGN.md's front matter (*.md)."),
 	docs: globsSchema.optional().describe("Globs for per-component Markdown/MDX docs."),
 	tsconfig: z.string().optional().describe("tsconfig used to resolve types and path aliases."),
@@ -2709,6 +3257,7 @@ async function loadConfigWith(options, context = {}) {
 	const excludeFromBase = (e) => {
 		if (!inherited || e.startsWith("**/")) return e;
 		if (declared) return fromBase(e);
+		if (e === toProject) return "**";
 		return e.startsWith(`${toProject}/`) ? e.slice(toProject.length + 1) : void 0;
 	};
 	const outside = [];
@@ -2756,7 +3305,14 @@ async function loadConfigWith(options, context = {}) {
 		path: p,
 		fallback: true
 	}))];
-	const exclude = (config.exclude ?? DEFAULT_EXCLUDE).map(slashGlob).map(excludeFromBase).filter((e) => e !== void 0);
+	const tidy = (e) => slashGlob(e).replace(/^(?:\.\/)+/, "").replace(/(.)\/+$/, "$1");
+	const listed = config.exclude ?? [];
+	const dropped = new Set(listed.filter((e) => e.startsWith("!")).map((e) => tidy(e.slice(1))));
+	for (const pattern of dropped) {
+		if (DEFAULT_EXCLUDE.includes(pattern)) continue;
+		warnings.push(`"!${pattern}" in "exclude" takes out none of the defaults, which are ${DEFAULT_EXCLUDE.map((d) => `"${d}"`).join(", ")}: a pattern that starts with "!" names one of them.`);
+	}
+	const exclude = [.../* @__PURE__ */ new Set([...DEFAULT_EXCLUDE.filter((d) => !dropped.has(d)), ...listed.filter((e) => !e.startsWith("!")).map(tidy)])].map(excludeFromBase).filter((e) => e !== void 0);
 	return {
 		root,
 		configFile,
@@ -2767,6 +3323,7 @@ async function loadConfigWith(options, context = {}) {
 			...t,
 			path: slashGlob(t.path)
 		})),
+		...!options.tokens?.length && configTokens === void 0 ? { tokensDetected: true } : {},
 		docs: (options.docs?.length ? options.docs : configDocs === void 0 ? [.../* @__PURE__ */ new Set([...DEFAULT_DOCS, ...detection?.docs ?? []])] : configDocs.map(fromBase)).map(slashGlob),
 		tsconfig,
 		importPath: config.importPath,
@@ -2777,6 +3334,7 @@ async function loadConfigWith(options, context = {}) {
 		libraries: libraries.read,
 		libraryIds: config.libraries,
 		librariesOff: libraries.off,
+		librariesUnread: libraries.unread,
 		elements: config.elements ?? {},
 		includeDesignSystem: options.includeDesignSystem ?? (declared ? void 0 : config.includeDesignSystem) ?? false,
 		rules,
@@ -2836,6 +3394,20 @@ function resolveRule(setting) {
 		options: setting[1] ?? {}
 	};
 }
+/** The default test and story patterns, which `--include-tests` lifts. */
+function isTestPattern(pattern) {
+	return pattern === "**/*.{test,spec,stories}.{ts,tsx,js,jsx}" || pattern === "**/__{tests,stories,mocks}__/**";
+}
+/**
+* The `exclude` pattern that leaves `file` (relative to the root) out, or undefined when none
+* does. The one test `check` (in folders and globs, and for files named outright with
+* `--skip-excluded`), the ESLint plugin, the Claude Code hook and check_ui all apply, so they
+* leave out the same files. A pattern covers the files it matches and everything in a folder it
+* matches. With `includeTests`, the default test and story patterns do not count.
+*/
+function excludedBy(config, file, options = {}) {
+	return config.exclude.find((pattern) => !(options.includeTests && isTestPattern(pattern)) && coveredByGlob(file, pattern));
+}
 /**
 * The rules for one file: the config's `rules`, then every override whose
 * `files` match the path (relative to the root), in order.
@@ -3118,8 +3690,14 @@ function buildComponent$1(context, candidate) {
 	const definitions = [...primary, ...nested];
 	const { props, inherits, openProps } = extractProps(context, candidate, typeNode, param);
 	const own = new Set(primary.flatMap((d) => d.variants.map((v) => v.name)));
-	const variants = mergeVariants([...primary.flatMap((d) => d.variants), ...nested.flatMap((d) => d.variants).filter((v) => !own.has(v.name) && props.some((p) => p.name === v.name))]);
-	mergeVariantProps(props, variants);
+	const adds = (name) => !own.has(name) && props.some((p) => p.name === name);
+	const variants = mergeVariants([...primary.flatMap((d) => d.variants), ...nested.flatMap((d) => d.variants).filter((v) => adds(v.name))]);
+	const layouts = /* @__PURE__ */ new Map();
+	for (const definition of definitions) for (const [name, layout] of variantLayouts(definition)) {
+		if (!primary.includes(definition) && !adds(name)) continue;
+		layouts.set(name, [...layouts.get(name) ?? [], ...layout]);
+	}
+	mergeVariantProps(props, variants, layouts);
 	applyDestructuredDefaults(props, param);
 	const position = sourceFile.getLineAndCharacterOfPosition(candidate.declaration.getStart());
 	const info = {
@@ -3280,10 +3858,11 @@ function extractProps(context, candidate, typeNode, param) {
 		if (checker.getIndexInfosOfType(t).length) openProps = true;
 		for (const symbol of checker.getPropertiesOfType(t)) {
 			const entry = own.get(symbol.getName()) ?? {
-				symbol,
+				symbols: [],
 				requiredIn: 0,
 				origin: originOf(symbol)
 			};
+			if (!entry.symbols.length || type.isUnion() && !entry.symbols.includes(symbol)) entry.symbols.push(symbol);
 			if (!(symbol.flags & ts.SymbolFlags.Optional)) entry.requiredIn++;
 			own.set(symbol.getName(), entry);
 		}
@@ -3292,9 +3871,9 @@ function extractProps(context, candidate, typeNode, param) {
 	for (const [name, { origin }] of own) byOrigin.set(origin, [...byOrigin.get(origin) ?? [], name]);
 	const summarised = new Set([...byOrigin].filter(([origin, names]) => origin === "react" || origin !== "own" && names.length > MAX_LISTED_INHERITED$1).map(([origin]) => origin));
 	const props = [];
-	for (const [name, { symbol, requiredIn, origin }] of own) {
+	for (const [name, { symbols, requiredIn, origin }] of own) {
 		if (summarised.has(origin)) continue;
-		props.push(describeProp$1(context, name, symbol, location, requiredIn === types.length, origin));
+		props.push(describeProp$1(context, name, symbols, location, requiredIn === types.length, origin));
 	}
 	const inherits = [];
 	for (const origin of summarised) {
@@ -3302,7 +3881,7 @@ function extractProps(context, candidate, typeNode, param) {
 		const key = registerPropSet(context.propSets, names);
 		const from = origin === "react" ? inheritedLabel(context, typeNode) : origin;
 		const deprecated = names.filter((name) => {
-			return (own.get(name)?.symbol)?.getJsDocTags(checker).some((tag) => tag.name === "deprecated");
+			return (own.get(name)?.symbols[0])?.getJsDocTags(checker).some((tag) => tag.name === "deprecated");
 		});
 		inherits.push({
 			from,
@@ -3374,21 +3953,35 @@ function originOf(symbol) {
 	if (pkg === "@types/react" || pkg === "typescript") return "react";
 	return pkg;
 }
-function describeProp$1(context, name, symbol, location, required, origin) {
+/**
+* A prop that several members of a union declare takes what any of them allows: its type is
+* the union of theirs, and so are its values when each declares a set of string literals.
+*/
+function describeProp$1(context, name, symbols, location, required, origin) {
 	const { checker } = context;
-	const declared = checker.getTypeOfSymbolAtLocation(symbol, location);
-	const type = checker.getNonNullableType(declared);
+	const allows = (symbol) => !(checker.getNonNullableType(checker.getTypeOfSymbolAtLocation(symbol, location)).flags & ts.TypeFlags.Never);
+	const members = symbols.some(allows) ? symbols.filter(allows) : symbols;
+	const printed = /* @__PURE__ */ new Map();
+	let values = [];
+	for (const symbol of members) {
+		const declared = checker.getTypeOfSymbolAtLocation(symbol, location);
+		const type = checker.getNonNullableType(declared);
+		const text = unwrapParens(checker.typeToString(declared, void 0, ts.TypeFormatFlags.NoTruncation | ts.TypeFormatFlags.UseAliasDefinedOutsideCurrentScope).replace(/^(?:(?:undefined|null) \| )+|(?: \| (?:undefined|null))+$/g, ""));
+		if (text) printed.set(text, !type.isUnion() && (type.getCallSignatures().length > 0 || type.getConstructSignatures().length > 0));
+		const found = literalValues$2(type);
+		values = found && values ? [...values, ...found] : void 0;
+	}
 	const prop = {
 		name,
-		type: truncate(unwrapParens(checker.typeToString(declared, void 0, ts.TypeFormatFlags.NoTruncation | ts.TypeFormatFlags.UseAliasDefinedOutsideCurrentScope).replace(/^(?:(?:undefined|null) \| )+|(?: \| (?:undefined|null))+$/g, "")) || "unknown", 200),
+		type: truncate([...printed].map(([text, fn]) => fn && printed.size > 1 ? `(${text})` : text).join(" | ") || "unknown", 200),
 		required,
 		kind: "prop"
 	};
-	const values = literalValues$2(type);
-	if (values) prop.values = values;
-	const description = ts.displayPartsToString(symbol.getDocumentationComment(checker)).trim();
+	if (values) prop.values = unique(values);
+	const documented = members.find((s) => s.getDocumentationComment(checker).length) ?? members[0];
+	const description = documented ? ts.displayPartsToString(documented.getDocumentationComment(checker)).trim() : "";
 	if (description) prop.description = description;
-	for (const tag of symbol.getJsDocTags(checker)) {
+	for (const tag of documented?.getJsDocTags(checker) ?? []) {
 		const text = ts.displayPartsToString(tag.text).trim();
 		if ((tag.name === "default" || tag.name === "defaultValue") && text) prop.default = text;
 		if (tag.name === "deprecated") prop.deprecated = text || true;
@@ -3482,11 +4075,47 @@ function mergeVariants(variants) {
 	}
 	return [...merged.values()];
 }
-/** Adds or enriches variant props from cva/tv definitions (works without type info). */
-function mergeVariantProps(props, variants) {
+/** The layout of each variant a cva/tv definition declares, read as `parseDefinition` reads it. */
+function variantLayouts(definition) {
+	const layouts = /* @__PURE__ */ new Map();
+	const [first, second] = definition.node.arguments;
+	const config = second ?? first;
+	if (!config || !ts.isObjectLiteralExpression(config)) return layouts;
+	const named = (name) => config.properties.find((p) => !ts.isSpreadAssignment(p) && propertyName(p.name) === name);
+	const variants = named("variants");
+	if (!variants || !ts.isPropertyAssignment(variants)) return layouts;
+	if (!ts.isObjectLiteralExpression(variants.initializer)) return layouts;
+	const extended = named("extend") !== void 0;
+	for (const prop of variants.initializer.properties) {
+		if (!ts.isPropertyAssignment(prop) || !ts.isObjectLiteralExpression(prop.initializer)) continue;
+		const name = propertyName(prop.name);
+		if (name === void 0) continue;
+		const layout = extended ? [void 0] : [];
+		for (const option of prop.initializer.properties) layout.push(ts.isPropertyAssignment(option) ? propertyName(option.name) : void 0);
+		layouts.set(name, layout);
+	}
+	return layouts;
+}
+/** `values` in a layout's order, those it does not list where it takes them (or last). */
+function ordered(values, layout) {
+	const unlisted = values.filter((v) => !layout.includes(v));
+	const placed = layout.flatMap((key) => key === void 0 ? unlisted : values.includes(key) ? [key] : []);
+	return unique(layout.includes(void 0) ? placed : [...placed, ...unlisted]);
+}
+/**
+* Adds or enriches variant props from cva/tv definitions (works without type info). A prop the
+* checker types as a set of strings keeps that set: the literal can take values it does not list
+* (`{ ...base, brand }`, tv's `extend`) and only gives their order. Without one, the literal's
+* keys are the values, unless it does not list them all: then the prop takes any value (or, when
+* the keys it lists are `true`/`false`, stays a boolean).
+*/
+function mergeVariantProps(props, variants, layouts) {
 	for (const variant of variants) {
-		const isBoolean = variant.values.every((v) => v === "true" || v === "false");
+		const layout = layouts.get(variant.name) ?? variant.values;
+		const open = layout.includes(void 0);
+		const isBoolean = (variant.values.length > 0 || !open) && variant.values.every((v) => v === "true" || v === "false");
 		const existing = props.find((p) => p.name === variant.name);
+		const typed = existing?.values;
 		const prop = existing ?? {
 			name: variant.name,
 			type: isBoolean ? "boolean" : variant.values.map((v) => JSON.stringify(v)).join(" | "),
@@ -3494,7 +4123,13 @@ function mergeVariantProps(props, variants) {
 			kind: "variant"
 		};
 		prop.kind = "variant";
-		if (!isBoolean) {
+		if (typed?.length) {
+			prop.values = ordered(typed, layout);
+			prop.type = prop.values.map((v) => JSON.stringify(v)).join(" | ");
+			variant.values = [...prop.values];
+		} else if (open && !isBoolean) {
+			if (!existing) prop.type = "string";
+		} else if (!isBoolean) {
 			prop.values = [...variant.values];
 			prop.type = variant.values.map((v) => JSON.stringify(v)).join(" | ");
 		}
@@ -4346,6 +4981,17 @@ function walk$1(root, enter) {
 	}
 }
 const VARIANT_FUNCTIONS = /^(cva|tv)$/;
+/** How many names deep a class value is followed: `className={tone}` with `const tone = base`. */
+const MAX_FOLLOW = 4;
+/** The node around `node`, or undefined at the file. */
+function parentScope(node) {
+	return ts.isSourceFile(node) ? void 0 : node.parent;
+}
+/** Whether a declared name (`tone`, or one in `{ tone, size }`) binds `name`. */
+function binds(declared, name) {
+	if (ts.isIdentifier(declared)) return declared.text === name;
+	return declared.elements.some((e) => !ts.isOmittedExpression(e) && binds(e.name, name));
+}
 function analyze(sourceFile) {
 	const analysis = {
 		imports: /* @__PURE__ */ new Map(),
@@ -4394,10 +5040,100 @@ function analyze(sourceFile) {
 			for (let i = children.length - 1; i >= 0; i--) stack.push(children[i]);
 		}
 	};
+	/**
+	* The `const` value or function a name refers to where it is used, declared in this file and
+	* in scope there: undefined for a parameter, an import, a `let` or anything else that can
+	* hold another value.
+	*/
+	const declarationOf = (use) => {
+		const name = use.text;
+		for (let node = use.parent; node; node = parentScope(node)) {
+			if (ts.isFunctionLike(node) && node.parameters.some((p) => binds(p.name, name))) return;
+			if (ts.isCatchClause(node) && node.variableDeclaration) {
+				if (binds(node.variableDeclaration.name, name)) return;
+			}
+			if ((ts.isForStatement(node) || ts.isForOfStatement(node) || ts.isForInStatement(node)) && node.initializer && ts.isVariableDeclarationList(node.initializer) && node.initializer.declarations.some((d) => binds(d.name, name))) return;
+			const statements = ts.isBlock(node) || ts.isSourceFile(node) || ts.isModuleBlock(node) || ts.isCaseClause(node) || ts.isDefaultClause(node) ? node.statements : void 0;
+			for (const statement of statements ?? []) {
+				if (ts.isFunctionDeclaration(statement) && statement.name?.text === name) return statement;
+				if ((ts.isClassDeclaration(statement) || ts.isEnumDeclaration(statement)) && statement.name?.text === name) return;
+				if (!ts.isVariableStatement(statement)) continue;
+				const list = statement.declarationList;
+				const declaration = list.declarations.find((d) => binds(d.name, name));
+				if (!declaration) continue;
+				return (list.flags & ts.NodeFlags.Const) !== 0 && ts.isIdentifier(declaration.name) ? declaration.initializer : void 0;
+			}
+		}
+	};
+	/** A same-file `const` value: `"bg-green-50"`, a condition, an object map. */
+	const constValue = (use) => {
+		const declaration = declarationOf(use);
+		return declaration && !ts.isFunctionDeclaration(declaration) ? declaration : void 0;
+	};
+	/** The object literals a value can be: a `const` map, or a map in one (`styles.badge`). */
+	const objectsOf = (expr, depth) => {
+		if (depth > MAX_FOLLOW) return [];
+		return valueBranches(expr).flatMap((leaf) => {
+			if (ts.isObjectLiteralExpression(leaf)) return [leaf];
+			if (ts.isIdentifier(leaf)) {
+				const value = constValue(leaf);
+				return value ? objectsOf(value, depth + 1) : [];
+			}
+			if (ts.isPropertyAccessExpression(leaf) || ts.isElementAccessExpression(leaf)) return entriesOf(leaf, depth).flatMap((value) => objectsOf(value, depth + 1));
+			return [];
+		});
+	};
+	/** What a key reads from a same-file map: `styles.badge`, or every value of `styles[status]`. */
+	const entriesOf = (access, depth) => {
+		const key = ts.isPropertyAccessExpression(access) ? access.name.text : ts.isStringLiteralLike(access.argumentExpression) || ts.isNumericLiteral(access.argumentExpression) ? access.argumentExpression.text : void 0;
+		return objectsOf(access.expression, depth + 1).flatMap((object) => object.properties.flatMap((prop) => ts.isPropertyAssignment(prop) && (key === void 0 || propertyName(prop.name) === key) ? [prop.initializer] : []));
+	};
+	/** What a call to a function of this file returns: `toneOf(status)`. */
+	const returnsOf = (call) => {
+		if (!ts.isIdentifier(call.expression)) return [];
+		const declaration = declarationOf(call.expression);
+		if (declaration && ts.isFunctionDeclaration(declaration)) return returnedExpressions(declaration);
+		const fn = declaration && asFunction(declaration);
+		return fn ? returnedExpressions(fn) : [];
+	};
+	const followed = /* @__PURE__ */ new Set();
+	const follow = (value, element, depth) => {
+		if (followed.has(value)) return;
+		followed.add(value);
+		classValue(value, element, depth + 1);
+	};
+	/**
+	* The classes a class value holds where it is not written out: a `const` (`className={tone}`,
+	* `cn("p-4", extra)`), a key of a `const` map (`statusStyles[status]`), what a function of
+	* this file returns (`toneOf(status)`), and the parts of a template or a concatenation,
+	* through conditions. Strings written out in it are collected as well, once.
+	*/
+	const classValue = (expr, element, depth) => {
+		if (depth > MAX_FOLLOW) return;
+		for (const leaf of valueBranches(expr)) if (ts.isStringLiteralLike(leaf) || ts.isObjectLiteralExpression(leaf)) collectStrings(leaf, element);
+		else if (ts.isTemplateExpression(leaf)) {
+			collectStrings(leaf, element);
+			for (const span of leaf.templateSpans) classValue(span.expression, element, depth);
+		} else if (ts.isBinaryExpression(leaf) && leaf.operatorToken.kind === ts.SyntaxKind.PlusToken) {
+			classValue(leaf.left, element, depth);
+			classValue(leaf.right, element, depth);
+		} else if (ts.isArrayLiteralExpression(leaf)) for (const item of leaf.elements) classValue(ts.isSpreadElement(item) ? item.expression : item, element, depth);
+		else if (ts.isIdentifier(leaf)) {
+			const value = constValue(leaf);
+			if (value) follow(value, element, depth);
+		} else if (ts.isPropertyAccessExpression(leaf) || ts.isElementAccessExpression(leaf)) for (const value of entriesOf(leaf, depth)) follow(value, element, depth);
+		else if (ts.isCallExpression(leaf)) {
+			const callee = leaf.expression.getText(sourceFile);
+			if (CLASS_FUNCTIONS.test(callee)) {
+				if (depth === 0 && !VARIANT_FUNCTIONS.test(callee)) for (const arg of leaf.arguments) classValue(arg, element, depth);
+			} else for (const value of returnsOf(leaf)) follow(value, element, depth);
+		}
+	};
 	/** A class value, or an object of them: tv slots, and variant options that style slots. */
 	const collectClassValues = (node) => {
 		if (!ts.isObjectLiteralExpression(node)) {
 			collectStrings(node);
+			classValue(node, void 0, 0);
 			return;
 		}
 		for (const prop of node.properties) if (ts.isPropertyAssignment(prop)) collectClassValues(prop.initializer);
@@ -4462,7 +5198,10 @@ function analyze(sourceFile) {
 				const name = attribute.name.getText(sourceFile);
 				const init = attribute.initializer;
 				if (!init) continue;
-				if (name === "className" || name === "class") collectStrings(init, element);
+				if (name === "className" || name === "class") {
+					collectStrings(init, element);
+					if (ts.isJsxExpression(init) && init.expression) classValue(init.expression, element, 0);
+				}
 				if (name === "style" && ts.isJsxExpression(init) && init.expression) for (const object of styleObjects(init.expression)) analysis.styles.push({
 					element,
 					object
@@ -4473,7 +5212,10 @@ function analyze(sourceFile) {
 			const variants = VARIANT_FUNCTIONS.test(node.expression.getText(sourceFile));
 			node.arguments.forEach((arg) => {
 				if (variants && ts.isObjectLiteralExpression(arg)) collectVariantConfig(arg);
-				else collectStrings(arg);
+				else {
+					collectStrings(arg);
+					classValue(arg, void 0, 0);
+				}
 			});
 		}
 		return true;
@@ -4544,6 +5286,7 @@ function valueBranches(expr) {
 * style functions (`style={({ isPressed }) => ({ ... })}`) are read through this.
 */
 function returnedExpressions(fn) {
+	if (!fn.body) return [];
 	if (!ts.isBlock(fn.body)) return [fn.body];
 	const out = [];
 	const stack = [fn.body];
@@ -4583,7 +5326,7 @@ function resolveElement(element, analysis, target, file) {
 	const [head = "", ...rest] = tag.split(".");
 	const binding = analysis.imports.get(head);
 	if (binding?.imported === "*" && rest.length) {
-		if (!target.isDesignSystemImport(binding.source, file)) return { kind: "external" };
+		if (!target.checksImport(binding.source, file)) return { kind: "external" };
 		const name = rest.join(".");
 		const library = target.libraryOf(binding.source);
 		if (library) return fromLibrary(target, library, name, binding.source, rest.length > 1);
@@ -4610,7 +5353,7 @@ function resolveElement(element, analysis, target, file) {
 		if (resolved.kind !== "component") return resolved;
 		owner = resolved.component;
 	} else if (binding) {
-		if (!target.isDesignSystemImport(binding.source, file)) return { kind: "external" };
+		if (!target.checksImport(binding.source, file)) return { kind: "external" };
 		const imported = binding.imported === "default" ? target.defaultExport(binding.source, file)?.name ?? head : binding.imported;
 		owner = target.componentFor(imported, binding.source, file);
 		if (!owner && target.components.has(imported)) return { kind: "external" };
@@ -5007,6 +5750,11 @@ const TAILWIND_PALETTE = {
 		950: "oklch(14.7% 0.004 49.3)"
 	}
 };
+/** Tailwind's colors without shades: `white` and `black`. */
+const TAILWIND_KEYWORD_COLORS = {
+	black: "#000",
+	white: "#fff"
+};
 //#endregion
 //#region src/tokens/css.ts
 /** Tailwind v4 theme namespaces → token category. Longest prefixes first. */
@@ -5596,7 +6344,7 @@ function parseDtcgTokens(text, file, options = {}) {
 			const type = typeOf(t);
 			const format = (value) => {
 				const resolved = resolve(value, /* @__PURE__ */ new Set([path]));
-				return t.own?.channels === "hsl" && hslChannels(resolved) || formatValue(resolved, type);
+				return t.own?.channels === "hsl" && hslChannels(resolved) || t.own?.channels === "rgb" && rgbChannels(resolved) || formatValue(resolved, type);
 			};
 			const segments = [options.prefix, ...t.path.filter((p) => p !== "$root")].filter(Boolean);
 			const generated = segments.length ? `--${segments.join("-").replace(/[^\w-]+/g, "-")}` : void 0;
@@ -5751,7 +6499,7 @@ function onsystemExtension(extensions) {
 	if (typeof own.name === "string" && /^[^\s{}]+$/.test(own.name)) out.name = own.name;
 	if (typeof own.cssVar === "string" && /^--[\w-]+$/.test(own.cssVar)) out.cssVar = own.cssVar;
 	if (typeof own.tailwind === "string" && themeVariable(own.tailwind)) out.tailwind = own.tailwind;
-	if (own.channels === "hsl") out.channels = "hsl";
+	if (own.channels === "hsl" || own.channels === "rgb") out.channels = own.channels;
 	if (isObject$2(own.modes)) out.modes = own.modes;
 	return out;
 }
@@ -5791,6 +6539,13 @@ function hslChannels(value) {
 	if (h === void 0 || s === void 0 || l === void 0) return void 0;
 	return `${h} ${s}% ${l}%${typeof value.alpha === "number" && value.alpha < 1 ? ` / ${value.alpha}` : ""}`;
 }
+/** `22 163 74`: an sRGB color as the bare channels a Tailwind v3 custom property holds. */
+function rgbChannels(value) {
+	if (!isObject$2(value) || value.colorSpace !== "srgb" || !Array.isArray(value.components)) return;
+	const [r, g, b] = value.components.map((c) => typeof c === "number" ? String(Math.round(c * 255)) : void 0);
+	if (r === void 0 || g === void 0 || b === void 0) return void 0;
+	return `${r} ${g} ${b}${typeof value.alpha === "number" && value.alpha < 1 ? ` / ${value.alpha}` : ""}`;
+}
 function formatValue(value, type) {
 	if (typeof value === "string") return value;
 	if (typeof value === "number" || typeof value === "boolean") return String(value);
@@ -5974,6 +6729,24 @@ function isStatusToken(token) {
 function tokenKey(token) {
 	return (token.tailwind || token.name).toLowerCase().replace(/[.\s_]+/g, "-").replace(/^colou?rs?-/, "");
 }
+/** Name segments of a line color: `card-border`, `input`, `ring`. */
+const LINE_WORDS = [
+	"border",
+	"input",
+	"ring",
+	"outline",
+	"divider",
+	"separator"
+];
+/** Name segments of a surface itself, as opposed to `muted`, which also describes text. */
+const SURFACE_NOUNS = [
+	"background",
+	"bg",
+	"surface",
+	"canvas",
+	"card",
+	"popover"
+];
 /** Name segments that say what a token is for, checked in this order (`card-border` is a border). */
 const KIND_WORDS = [
 	["foreground", [
@@ -5981,21 +6754,9 @@ const KIND_WORDS = [
 		"fg",
 		"text"
 	]],
-	["line", [
-		"border",
-		"input",
-		"ring",
-		"outline",
-		"divider",
-		"separator"
-	]],
+	["line", LINE_WORDS],
 	["surface", [
-		"background",
-		"bg",
-		"surface",
-		"canvas",
-		"card",
-		"popover",
+		...SURFACE_NOUNS,
 		"muted",
 		"secondary",
 		"accent"
@@ -6014,9 +6775,17 @@ function roleKey(token) {
 /** What a token is for, from its name: shadcn/ui's conventions and common DTCG names. */
 function kindOf(key) {
 	const segments = key.split("-");
+	if (segments[0] === "on") return "foreground";
+	const namesLineOrSurface = (s) => LINE_WORDS.includes(s) || SURFACE_NOUNS.includes(s);
+	if (segments[0] === "content" && !segments.some(namesLineOrSurface)) return "foreground";
 	for (const [kind, words] of KIND_WORDS) if (segments.some((s) => words.includes(s))) return kind;
 	return "other";
 }
+/** The role a token is made for, from its name (`text` for `content-muted`); undefined for `brand` or `destructive`. */
+function tokenRole(token) {
+	const kind = kindOf(roleKey(token));
+	return kind === "foreground" ? "text" : kind === "other" ? void 0 : kind;
+}
 /** Tokens made for each role, in the order to prefer them when their values tie. */
 const PREFERRED = {
 	text: ["foreground", "muted-foreground"],
@@ -6137,7 +6906,7 @@ function toDtcg(tokens) {
 		if (token.cssVar) extension.cssVar = token.cssVar;
 		const tailwind = tailwindVariable(token);
 		if (tailwind) extension.tailwind = tailwind;
-		if (own.channels) extension.channels = "hsl";
+		if (own.channels) extension.channels = own.channels;
 		if (token.modes && Object.keys(token.modes).length) extension.modes = Object.fromEntries(Object.entries(token.modes).map(([mode, value]) => [mode, typed(value, token, lookup).value]));
 		if (Object.keys(extension).length) node.$extensions = { [ONSYSTEM_EXTENSION]: extension };
 		insert(tree, path, node);
@@ -6259,14 +7028,17 @@ function typed(value, token, lookup) {
 	}
 }
 function colorValue(value) {
-	if (!parseColor(value, { bareHsl: true })) return { value };
-	const bare = isBareHsl(value);
-	const color = colorObject(bare ? `hsl(${value.replace(/,/g, " ")})` : value);
+	if (!parseColor(value, {
+		bareHsl: true,
+		bareRgb: true
+	})) return { value };
+	const channels = isBareHsl(value) ? "hsl" : isBareRgb(value) ? "rgb" : void 0;
+	const color = colorObject(channels ? `${channels}(${value.replace(/,/g, " ")})` : value);
 	if (!color) return { value };
-	return bare ? {
+	return channels ? {
 		type: "color",
 		value: color,
-		channels: true
+		channels
 	} : {
 		type: "color",
 		value: color
@@ -6705,8 +7477,11 @@ function frontMatterValue(token, key, lookup) {
 	const value = token.value.trim();
 	switch (key) {
 		case "colors":
-			if (!parseColor(value, { bareHsl: true })) return void 0;
-			return isBareHsl(value) ? `hsl(${value})` : value;
+			if (!parseColor(value, {
+				bareHsl: true,
+				bareRgb: true
+			})) return void 0;
+			return isBareHsl(value) ? `hsl(${value})` : isBareRgb(value) ? `rgb(${value})` : value;
 		case "rounded":
 		case "spacing": {
 			if (DESIGN_DIMENSION.test(value) || value === "0") return value;
@@ -6870,6 +7645,11 @@ const ROUNDED_FULL = {
 		line: 0
 	}
 };
+/** A color token's value: bare HSL or RGB channels are its color (Tailwind v3). */
+const TOKEN_COLOR = {
+	bareHsl: true,
+	bareRgb: true
+};
 /** Query helpers over the token list: lookups and nearest-token search. */
 var TokenIndex = class {
 	tokens;
@@ -6899,7 +7679,7 @@ var TokenIndex = class {
 		const resolve = (name) => this.byVar.get(name)?.value;
 		let unit;
 		for (const token of tokens) if (token.category === "color") {
-			const color = parseColor(token.value, { bareHsl: true });
+			const color = parseColor(token.value, TOKEN_COLOR);
 			if (color) this.colors.push({
 				token,
 				color,
@@ -6988,20 +7768,38 @@ var TokenIndex = class {
 			candidate: named.candidate,
 			distance: named.distance
 		};
-		if (match) return {
-			match: nearest,
-			nearest,
-			sameValue
-		};
+		if (match) {
+			const status = match.status ? void 0 : pool.filter((s) => s.status && s.looseHue && tinted && !s.foreign && s.fit.tier < 2 && s.distance < .1 && s.distance - match.distance < .03).sort(byDistance)[0];
+			return {
+				match: nearest,
+				nearest,
+				sameValue,
+				closeStatus: status && {
+					candidate: status.candidate,
+					distance: status.distance
+				}
+			};
+		}
 		if (!named.hue && named.status && named.looseHue && tinted) return {
 			nearest,
 			reason: "status",
 			hueOff: Math.round(hueDistance(color, valueOf(named.candidate))),
 			sameValue
 		};
+		const other = pool.filter((s) => s.hue && !s.foreign && s.fit.tier === 2 && s.distance < .1).sort(byDistance)[0];
+		const reason = !named.hue ? "hue" : named.distance >= .1 ? other ? "role" : "far" : named.foreign ? "scoped" : "role";
+		if (reason === "role" && other && other !== named) return {
+			nearest,
+			reason,
+			otherRole: {
+				candidate: other.candidate,
+				distance: other.distance
+			},
+			sameValue
+		};
 		return {
 			nearest,
-			reason: !named.hue ? "hue" : named.distance >= .1 ? "far" : named.foreign ? "scoped" : "role",
+			reason,
 			sameValue
 		};
 	}
@@ -7057,7 +7855,7 @@ var TokenIndex = class {
 function colorModes(token) {
 	const modes = {};
 	for (const [mode, value] of Object.entries(token.modes ?? {})) {
-		const color = parseColor(value, { bareHsl: true });
+		const color = parseColor(value, TOKEN_COLOR);
 		if (color) modes[mode] = color;
 	}
 	return Object.keys(modes).length ? { modes } : {};
@@ -7551,6 +8349,16 @@ var LintTarget = class {
 		return this.importPrefixes.some((prefix) => specifier.startsWith(prefix) || specifier === prefix.slice(0, -1));
 	}
 	/**
+	* Whether the component rules judge the components imported from `specifier`: it points at
+	* the design system, and the model has components to judge them by. A model with none (an
+	* app whose design-system package publishes only compiled `dist/`) still matches the
+	* configured `importPath`, but the component rules do not run there, as `check` says, so
+	* what comes from it is not called invented.
+	*/
+	checksImport(specifier, fromFile = "snippet.tsx") {
+		return this.model.components.length > 0 && this.isDesignSystemImport(specifier, fromFile);
+	}
+	/**
 	* Whether `name`, imported from the design system, may be a real export the
 	* model left out rather than an invented one: its module exists outside the
 	* folders extraction read and exports `name`, or re-exports from such a
@@ -7798,6 +8606,7 @@ const preferDesignSystemComponent = {
 			}
 			const component = context.target.elements.get(key);
 			if (!component) continue;
+			if (fromRegistry(component, context) && context.target.config.elements[key] === void 0) continue;
 			if (hiddenFromUser(element)) continue;
 			if (styledByParent(element, context)) continue;
 			if (isBare(element)) continue;
@@ -7815,6 +8624,14 @@ const preferDesignSystemComponent = {
 		}
 	}
 };
+/**
+* Whether `component` is in the folder of a shadcn registry that components.json names
+* (`components/signoff-ui`): a read-only design system, ranked after the others.
+*/
+function fromRegistry(component, context) {
+	const file = component.source.file;
+	return (context.target.config.designSystems ?? []).some((source) => source.registry !== void 0 && source.components.some((g) => matchesGlob(file, g)));
+}
 const definitionsByFile = /* @__PURE__ */ new WeakMap();
 /** Whether the element's `className` calls a `cva(...)` or `tv(...)` definition declared in this file. */
 function styledByOwnVariants(element, context) {
@@ -7969,7 +8786,10 @@ const noUnknownComponent = {
 		}
 	}
 };
-/** Prop names from other libraries → the conventional name in shadcn-style systems. */
+/**
+* Prop names from other libraries → the conventional name in shadcn-style systems, which mean the
+* same thing there, so the rename is a fix.
+*/
 const PROP_SYNONYMS = {
 	variant: [
 		"tone",
@@ -7999,20 +8819,20 @@ const PROP_SYNONYMS = {
 		"show",
 		"shown"
 	],
-	onOpenChange: [
-		"onClose",
-		"onDismiss",
-		"onToggle",
-		"onOpen",
-		"onVisibleChange"
-	],
-	asChild: [
-		"as",
-		"component",
-		"render"
-	]
+	onOpenChange: ["onVisibleChange"]
 };
 /**
+* Handlers other libraries call on one side of a change, against `onOpenChange`, which runs on
+* open and on close with the new state: renamed, `onClose={() => setOpen(false)}` would keep a
+* dialog shut. The message shows the check to add instead of offering the rename.
+*/
+const OPEN_CHANGE_HANDLERS = /* @__PURE__ */ new Map([
+	["onClose", "{ if (!open) … }"],
+	["onDismiss", "{ if (!open) … }"],
+	["onOpen", "{ if (open) … }"],
+	["onToggle", "…"]
+]);
+/**
 * Props that mean the same thing in different conventions: native elements and Radix on one
 * side, React Aria Components on the other. A native field states `isInvalid` as `aria-invalid`. Whichever spelling an agent writes, the one the
 * component takes is suggested, in either direction. Event handlers are left out: their
@@ -8036,14 +8856,96 @@ const PROP_EQUIVALENTS = [
 	["defaultChecked", "defaultSelected"],
 	["indeterminate", "isIndeterminate"]
 ];
+/** Props other libraries compose with, which no prop of a similar spelling stands in for. */
+const FOREIGN_COMPOSITION = /* @__PURE__ */ new Set([
+	"href",
+	"as",
+	"component"
+]);
 /**
 * Radix composes with `asChild` and a child element, Base UI with a `render`
-* element; shadcn/ui ships both, and agents mix them up. Renaming the prop is
-* not enough, so this explains the other way instead of offering a fix.
+* element; shadcn/ui ships both, and agents mix them up, or bring `as`, `component`
+* or `href` from other libraries. Renaming the prop is not enough (`asChild` is a
+* boolean, and a button with an `href` is still no link), so this explains the
+* other way instead of offering a fix.
 */
 function compositionHint(name, known, tag) {
-	if (name === "asChild" && known.has("render")) return `Base UI components compose with render instead: <${tag} render={<Link href="…" />}>…</${tag}>.`;
-	if (name === "render" && known.has("asChild")) return `Radix components compose with asChild and a single child instead: <${tag} asChild><Link href="…">…</Link></${tag}>.`;
+	const radix = `compose with asChild and a single child`;
+	const radixExample = `<${tag} asChild><Link href="…">…</Link></${tag}>`;
+	const base = `compose with render`;
+	const baseExample = `<${tag} render={<Link href="…" />}>…</${tag}>`;
+	if (name === "href") {
+		if (known.has("asChild")) return {
+			prop: "asChild",
+			text: `For a link, Radix components ${radix}: ${radixExample}.`
+		};
+		if (known.has("render")) return {
+			prop: "render",
+			text: `For a link, Base UI components ${base}: ${baseExample}.`
+		};
+		return;
+	}
+	if ([
+		"asChild",
+		"as",
+		"component"
+	].includes(name) && known.has("render")) return {
+		prop: "render",
+		text: `Base UI components ${base} instead: ${baseExample}.`
+	};
+	if ([
+		"render",
+		"as",
+		"component"
+	].includes(name) && known.has("asChild")) return {
+		prop: "asChild",
+		text: `Radix components ${radix} instead: ${radixExample}.`
+	};
+}
+/** `onClick`, `onValueChange`: a handler, whose arguments a spelling match does not tell. */
+const HANDLER = /^on[A-Z]/;
+/**
+* The prop an unknown one most likely means, and whether the rename is safe as a fix: an
+* equivalent, a synonym or the same name in other case (`onclick`, `tabindex`) means the same,
+* and so does an own prop one edit away (`varient`, `onPres`). A forwarded attribute of a
+* similar spelling is only named, since one letter can make another prop (`disable` is
+* `disabled`, but `href` is not `ref`). `ref`, own or forwarded, and forwarded handlers, whose
+* events differ (`onValueChange` is not `onVolumeChange`), are not guessed by spelling at all,
+* and neither is anything for `href`, `as` or `component` (`ref`, `is`), which compose.
+*/
+function guessProp(name, own, known) {
+	if (FOREIGN_COMPOSITION.has(name)) return void 0;
+	const equivalents = PROP_EQUIVALENTS.find((group) => group.includes(name)) ?? [];
+	const equivalent = equivalents.find((other) => other !== name && own.includes(other)) ?? equivalents.find((other) => other !== name && known.has(other));
+	if (equivalent) return {
+		prop: equivalent,
+		fix: true
+	};
+	const synonym = Object.entries(PROP_SYNONYMS).find(([target, aliases]) => known.has(target) && aliases.includes(name))?.[0];
+	if (synonym) return {
+		prop: synonym,
+		fix: true
+	};
+	if (OPEN_CHANGE_HANDLERS.has(name) && known.has("onOpenChange")) return {
+		prop: "onOpenChange",
+		fix: false
+	};
+	const lower = name.toLowerCase();
+	const recased = [...known].find((prop) => prop.toLowerCase() === lower);
+	if (recased) return {
+		prop: recased,
+		fix: true
+	};
+	const typo = closest(name, own.filter((prop) => prop !== "ref"));
+	if (typo) return {
+		prop: typo,
+		fix: editDistance(lower, typo.toLowerCase()) <= 1
+	};
+	const similar = closest(name, [...known].filter((prop) => prop !== "ref" && !HANDLER.test(prop)), .25);
+	return similar ? {
+		prop: similar,
+		fix: false
+	} : void 0;
 }
 const noUnknownProp = {
 	id: "no-unknown-prop",
@@ -8066,27 +8968,25 @@ const noUnknownProp = {
 					context.report({
 						start: attribute.name.getStart(context.sourceFile),
 						end: attribute.name.end,
-						message: `<${element.tag}> has no prop "${name}". ${composition}`,
-						suggestion: name === "asChild" ? "render" : "asChild"
+						message: `<${element.tag}> has no prop "${name}". ${composition.text}`,
+						suggestion: composition.prop
 					});
 					continue;
 				}
-				const equivalents = PROP_EQUIVALENTS.find((group) => group.includes(name)) ?? [];
-				const equivalent = equivalents.find((other) => other !== name && own.includes(other)) ?? equivalents.find((other) => other !== name && known.has(other));
-				const synonym = Object.entries(PROP_SYNONYMS).find(([target, aliases]) => known.has(target) && aliases.includes(name))?.[0];
-				const guess = equivalent ?? synonym ?? closest(name, own) ?? closest(name, known, .25);
-				const prop = guess ? component.props.find((p) => p.name === guess) : void 0;
+				const guess = guessProp(name, own, known);
+				const prop = guess ? component.props.find((p) => p.name === guess.prop) : void 0;
 				const values = prop?.values?.length ? ` (${prop.values.map((v) => `"${v}"`).join(" | ")})` : "";
+				const handler = guess?.prop === "onOpenChange" ? OPEN_CHANGE_HANDLERS.get(name) : void 0;
 				const valueOk = !prop?.values || literalValues(attribute).every((l) => prop.values?.includes(l.text));
-				const taken = guess !== void 0 && findAttribute(element, guess) !== void 0;
+				const taken = guess !== void 0 && findAttribute(element, guess.prop) !== void 0;
 				context.report({
 					start: attribute.name.getStart(context.sourceFile),
 					end: attribute.name.end,
-					message: `<${element.tag}> has no prop "${name}".` + (guess ? ` Did you mean "${guess}"${values}?` : ""),
-					suggestion: guess,
-					fix: guess && valueOk && !taken ? [{
+					message: `<${element.tag}> has no prop "${name}".` + (guess ? ` Did you mean "${guess.prop}"${values}?` : "") + (handler ? ` It is called with the new open state, on open as well as on close: onOpenChange={(open) => ${handler}}.` : ""),
+					suggestion: guess?.prop,
+					fix: guess?.fix && valueOk && !taken ? [{
 						range: [attribute.name.getStart(context.sourceFile), attribute.name.end],
-						text: guess
+						text: guess.prop
 					}] : void 0
 				});
 			}
@@ -8177,11 +9077,16 @@ const VALUE_GROUPS = [
 		"href",
 		"inline"
 	],
+	[
+		"xs",
+		"xsmall",
+		"x-small",
+		"extra-small"
+	],
 	[
 		"sm",
 		"small",
 		"s",
-		"xs",
 		"compact",
 		"tiny"
 	],
@@ -8200,6 +9105,13 @@ const VALUE_GROUPS = [
 		"l",
 		"big"
 	],
+	[
+		"xl",
+		"xlarge",
+		"x-large",
+		"extra-large",
+		"huge"
+	],
 	[
 		"icon",
 		"iconOnly",
@@ -8208,14 +9120,72 @@ const VALUE_GROUPS = [
 		"icon-button"
 	]
 ];
-function suggestValue(value, allowed) {
-	const lower = value.toLowerCase();
-	for (const group of VALUE_GROUPS) {
-		if (!group.includes(lower)) continue;
-		const match = group.find((member) => member !== lower && allowed.includes(member));
-		if (match) return match;
+/**
+* A value with the x's of its size step counted, so two spellings of one step compare equal:
+* `xxl` and `2xl` both give `2xl`, `icon-XXS` and `icon-2xs` both give `icon-2xs`.
+*/
+function stepSpelling(value) {
+	return value.toLowerCase().replace(/(^|-)(x{2,})([sl])$/, (_, start, xs, end) => `${start}${xs.length}x${end}`);
+}
+/** {@link VALUE_GROUPS} spelled as {@link stepSpelling} spells a value, to compare the two. */
+const SPELLED_GROUPS = VALUE_GROUPS.map((group) => group.map(stepSpelling));
+/**
+* An allowed value that means the same: the same step spelled another way (`xxl` → `2xl`,
+* `XL` → `xl`), or a synonym (`danger` → `destructive`, `small` → `sm`). A group is searched
+* in its own order, not the scale's: TypeScript orders a union by when the program first met
+* each literal, so another file can reorder the scale, and `positive` must stay `success` on
+* a scale that also has `active`.
+*/
+function synonymValue(value, allowed) {
+	const spelling = stepSpelling(value);
+	const same = allowed.find((member) => member !== value && stepSpelling(member) === spelling);
+	if (same) return same;
+	for (const group of SPELLED_GROUPS) {
+		if (!group.includes(spelling)) continue;
+		for (const member of group) {
+			if (member === spelling) continue;
+			const match = allowed.find((candidate) => stepSpelling(candidate) === member);
+			if (match) return match;
+		}
 	}
-	return closest(value, allowed, .5);
+}
+/**
+* The step a size one past an end of the scale stands next to, with its x's counted and its
+* prefix kept: `2xl` → `xl`, `3xl` → `2xl`, `2xs` → `xs`, `xs` → `sm`, `icon-2xl` → `icon-xl`.
+*/
+function stepInside(spelling) {
+	const match = /^(.*-)?(\d*)x([sl])$/.exec(spelling);
+	if (!match) return void 0;
+	const prefix = match[1] ?? "";
+	const end = match[3];
+	if (!match[2]) return end === "s" ? `${prefix}sm` : void 0;
+	const count = Number(match[2]);
+	if (count < 2) return void 0;
+	return `${prefix}${count === 2 ? "" : count - 1}x${end}`;
+}
+/**
+* The end of the scale a size one step past it stands next to, under whichever name the scale
+* gives it: `2xl` or `xxl` → `xl`, `3xl` → `2xl` or `xxl`, `xs` → `sm` or `small`, `icon-xxl`
+* → `icon-xl`. It renders another size than the one written, so it is named in the message
+* but not fixed.
+*/
+function nextStep(value, allowed) {
+	const step = stepInside(stepSpelling(value));
+	if (!step) return void 0;
+	return allowed.find((member) => stepSpelling(member) === step) ?? synonymValue(step, allowed);
+}
+/** The step of a size scale a value names, alone or at its end: `xs`, `lg`, `2xl`, `icon-sm`. */
+const SIZE_STEP = /(?:^|-)(\d*x*[sml]|sm|md|lg)$/i;
+/**
+* An allowed value spelled close to `value`, for the message only: it may be another value
+* altogether. Two steps of a size scale are never guessed from each other, since one letter
+* there is another size (`xl` and `xs`, `icon-xl` and `icon-xs`).
+*/
+function spelledLike(value, allowed) {
+	const guess = closest(value, allowed, .5);
+	const step = SIZE_STEP.exec(value)?.[1]?.toLowerCase();
+	const guessStep = guess ? SIZE_STEP.exec(guess)?.[1]?.toLowerCase() : void 0;
+	return step && guessStep && step !== guessStep ? void 0 : guess;
 }
 const noUnknownVariant = {
 	id: "no-unknown-variant",
@@ -8230,7 +9200,8 @@ const noUnknownVariant = {
 				if (!prop?.values) continue;
 				for (const literal of literalValues(attribute)) {
 					if (prop.values.includes(literal.text)) continue;
-					const guess = suggestValue(literal.text, prop.values);
+					const synonym = synonymValue(literal.text, prop.values);
+					const guess = synonym ?? nextStep(literal.text, prop.values) ?? spelledLike(literal.text, prop.values);
 					const start = literal.getStart(context.sourceFile) + 1;
 					const end = literal.end - 1;
 					context.report({
@@ -8238,9 +9209,9 @@ const noUnknownVariant = {
 						end: end + 1,
 						message: `"${literal.text}" is not a valid ${name} for <${element.tag}>. Allowed: ${prop.values.join(", ")}.` + (guess ? ` Did you mean "${guess}"?` : ""),
 						suggestion: guess ? `${name}="${guess}"` : void 0,
-						fix: guess ? [{
+						fix: synonym ? [{
 							range: [start, end],
-							text: guess
+							text: synonym
 						}] : void 0
 					});
 				}
@@ -8248,27 +9219,205 @@ const noUnknownVariant = {
 		}
 	}
 };
+/**
+* Labels guessed from an icon's name, for the message. The third pattern names the icons that mean
+* one thing on a button (a trash can deletes, a magnifier searches), matched against the name
+* without its digits or `Icon` suffix (`Trash2Icon` is `Trash`): only their label is fixed. A plus
+* may add or expand, a chevron page or expand, an X close, remove or clear, so those are fixed only
+* where the code says which (`iconLabel`), and the rest are named without a fix.
+*/
 const ICON_LABELS = [
-	[/^(Trash|Delete|Bin)/, "Delete"],
+	[
+		/^(Trash|Delete|Bin)/,
+		"Delete",
+		/^(?:Trash|Delete|Bin)$/
+	],
 	[/^(X|Close|Cross)(Icon)?$|^X(Circle|Square)/, "Close"],
 	[/^(Plus|Add)/, "Add"],
-	[/^(Pencil|Edit|PenLine|SquarePen)/, "Edit"],
-	[/^Search/, "Search"],
+	[
+		/^(Pencil|Edit|PenLine|SquarePen)/,
+		"Edit",
+		/^(?:Pencil|Edit|SquarePen)$/
+	],
+	[
+		/^Search/,
+		"Search",
+		/^Search$/
+	],
 	[/^(Menu|Hamburger)/, "Open menu"],
-	[/^(Settings|Cog|Gear)/, "Settings"],
-	[/^(Copy|Clipboard)/, "Copy"],
-	[/^Download/, "Download"],
-	[/^Upload/, "Upload"],
+	[
+		/^(Settings|Cog|Gear)/,
+		"Settings",
+		/^(?:Settings|Cog|Gear)$/
+	],
+	[
+		/^(Copy|Clipboard)/,
+		"Copy",
+		/^(?:Copy|ClipboardCopy)$/
+	],
+	[
+		/^Download/,
+		"Download",
+		/^Download$/
+	],
+	[
+		/^Upload/,
+		"Upload",
+		/^Upload$/
+	],
 	[/^(MoreHorizontal|MoreVertical|Ellipsis|DotsHorizontal|DotsVertical)/, "More options"],
 	[/^ChevronLeft|^ArrowLeft/, "Previous"],
 	[/^ChevronRight|^ArrowRight/, "Next"],
 	[/^(UserMinus|UserX)/, "Remove member"],
 	[/^(UserPlus)/, "Invite member"],
 	[/^(RefreshCw|RefreshCcw|RotateCw)/, "Refresh"],
-	[/^(Share)/, "Share"],
-	[/^(Filter)/, "Filter"],
+	[
+		/^(Share)/,
+		"Share",
+		/^Share$/
+	],
+	[
+		/^(Filter)/,
+		"Filter",
+		/^Filter$/
+	],
 	[/^(Info)/, "More information"]
 ];
+/** A part that expands and collapses: `CollapsibleTrigger`, `Accordion.Trigger`, `DisclosureButton`. */
+const TOGGLE_PART = /(?:Collapsible|Accordion|Disclosure)\w*\.?\w*(?:Trigger|Button)$/;
+/** A part that closes its dialog, sheet or popover: `DialogClose`, `Dialog.Close`. */
+const CLOSE_PART = /Close$/;
+/** A part that opens a menu: `DropdownMenuTrigger`, `Menu.Trigger`, Headless UI's `MenuButton`. */
+const MENU_TRIGGER = /Menu\w*\.?\w*Trigger$|^(?:\w+\.)?Menu\.?Button$/;
+/** Classes styled by an expanded state: `data-[state=open]:rotate-90`, `aria-expanded:bg-muted`. */
+const EXPANDED_CLASS = /data-\[state=(?:open|closed)\]|aria-expanded:/;
+/** The tags of the button and of every element around it, its `render` host included. */
+function enclosingTags(context, element) {
+	const tags = [element.tag];
+	ts.findAncestor(element.node.parent, (node) => {
+		if (ts.isJsxElement(node)) tags.push(node.openingElement.tagName.getText(context.sourceFile));
+		return false;
+	});
+	return tags;
+}
+/** The names a callee is reached by: `deleteMutation.mutate` is `deleteMutation` and `mutate`. */
+function calleeNames(expression) {
+	const names = [];
+	let current = expression;
+	for (;;) if (ts.isNonNullExpression(current) || ts.isParenthesizedExpression(current)) current = current.expression;
+	else if (ts.isPropertyAccessExpression(current)) {
+		names.unshift(current.name.text);
+		current = current.expression;
+	} else {
+		if (ts.isIdentifier(current)) names.unshift(current.text);
+		return names;
+	}
+}
+/** The words that name each action in a function's name. */
+const ACTION_WORDS = [
+	["Remove", ["remove", "delete"]],
+	["Clear", ["clear", "reset"]],
+	["Close", [
+		"close",
+		"dismiss",
+		"hide"
+	]]
+];
+/** Calls that tidy up around the action rather than name it: `clearTimeout(timer)`. */
+const HOUSEKEEPING = /^(?:clearTimeout|clearInterval|clearImmediate|removeEventListener|removeListener)$/;
+/**
+* What one call or handler reference does, by its name: `removeAssertion`, `onClose`,
+* `setOpen(false)`. A name with words of two actions (`closeDeleteDialog`, `hideRemoveConfirm`) or
+* with `cancel` (`onCancelDelete`) says none.
+*/
+function actionOf(names, argument) {
+	const last = names.at(-1) ?? "";
+	if (HOUSEKEEPING.test(last)) return void 0;
+	const words = names.flatMap((name) => name.split(/(?=[A-Z])|_/)).map((w) => w.toLowerCase());
+	if (argument?.kind === ts.SyntaxKind.FalseKeyword && words.some((w) => w === "open" || w === "show" || w === "visible")) return "Close";
+	if (/^set[A-Z]/.test(last) || words.includes("cancel")) return void 0;
+	const actions = ACTION_WORDS.filter(([, named]) => words.some((w) => named.includes(w)));
+	return actions.length === 1 ? actions[0]?.[0] : void 0;
+}
+/**
+* What a button's `onClick` (or React Aria's `onPress`) does, by the names of the functions it
+* calls or passes, and whether that is sure: only when every name says the same action. A close
+* button that also tidies up (`form.reset(); setOpen(false)`) or a button that removes a row and
+* closes a popover is named "Close", or "Remove" when it removes and clears, without a fix.
+* Callbacks inside the handler run later, on their own events (`mutate(id, { onSuccess: () =>
+* toast.dismiss() })`), so they do not count.
+*/
+function handlerAction(attributes) {
+	const found = /* @__PURE__ */ new Set();
+	for (const attribute of attributes) {
+		if (!/^on(?:Click|Press)$/.test(attributeName(attribute))) continue;
+		const init = attribute.initializer;
+		const value = init && ts.isJsxExpression(init) ? init.expression : void 0;
+		if (!value) continue;
+		const reference = actionOf(calleeNames(value));
+		if (reference) found.add(reference);
+		const stack = [value];
+		for (let node = stack.pop(); node; node = stack.pop()) {
+			if (ts.isCallExpression(node)) {
+				const action = actionOf(calleeNames(node.expression), node.arguments[0]);
+				if (action) found.add(action);
+			}
+			ts.forEachChild(node, (child) => {
+				if (!ts.isFunctionLike(child)) stack.push(child);
+			});
+		}
+	}
+	const [only] = found;
+	if (!only) return void 0;
+	if (found.size === 1) return {
+		action: only,
+		sure: true
+	};
+	return {
+		action: found.has("Close") ? "Close" : "Remove",
+		sure: false
+	};
+}
+/**
+* The label for an icon-only button, and whether the fix may write it: only when the icon means
+* one thing on a button, or the code says what it does. A chevron that expands or collapses gets
+* no direction; an X is named by its handler (`Remove`, `Clear`, `Close`), and `Close` is fixed
+* in a close part; "More options" is fixed on a menu's trigger.
+*/
+function iconLabel(context, element, host, icon) {
+	const entry = icon ? ICON_LABELS.find(([pattern]) => pattern.test(icon)) : void 0;
+	if (!icon || !entry) return { fixed: false };
+	const [, label, plain] = entry;
+	const tags = enclosingTags(context, element);
+	const owners = host ? [element, host] : [element];
+	const attributes = owners.flatMap((owner) => owner.attributes);
+	if (label === "Next" || label === "Previous") return {
+		label: tags.some((tag) => TOGGLE_PART.test(tag)) || attributes.some((a) => /^(?:aria-expanded|data-state)$/.test(attributeName(a))) || context.analysis.classStrings.some((c) => c.element && owners.includes(c.element) && EXPANDED_CLASS.test(c.text)) ? "Toggle" : label,
+		fixed: false
+	};
+	if (label === "Close") {
+		if (tags.some((tag) => CLOSE_PART.test(tag))) return {
+			label,
+			fixed: true
+		};
+		const handler = handlerAction(attributes);
+		return handler ? {
+			label: handler.action,
+			fixed: handler.sure
+		} : {
+			label,
+			fixed: false
+		};
+	}
+	if (label === "More options") return {
+		label,
+		fixed: tags.some((tag) => MENU_TRIGGER.test(tag))
+	};
+	return {
+		label,
+		fixed: plain?.test(icon.replace(/Icon$/, "").replace(/\d+$/, "")) ?? false
+	};
+}
 /** Text wins, then content the rule cannot read, then icons. */
 const PRECEDENCE = [
 	"text",
@@ -8456,14 +9605,58 @@ function isHidden(element) {
 		return opening !== void 0 && hiddenBy(opening.attributes);
 	}) !== void 0;
 }
+/**
+* A link a design system renders through `asChild`: `<a>`, a component that renders one, or a
+* router's `Link` (`next/link`, `NavLink`) with its `href` or `to`, not an icon named `ExternalLink`.
+*/
+function isLink(context, element) {
+	const resolution = context.resolve(element);
+	if (resolution.kind === "intrinsic") return resolution.tag === "a";
+	if (resolution.kind === "component" && resolution.component.element === "a") return true;
+	return /Link$/.test(element.tag) && Boolean(findAttribute(element, "href") ?? findAttribute(element, "to"));
+}
+/**
+* `<Button asChild size="icon"><Link href="/users/1/edit"><Pencil /></Link></Button>`: Radix's
+* Slot renders the link with the button's props, so the link is the button, and an icon alone
+* in it names nothing. A label on either counts (`aria-label`, `title`, visually hidden text in
+* the link). A child that is a button itself is checked on its own; any other child (a `<span>`
+* under a tooltip's trigger) is not a control.
+*/
+function checkAsChildLink(context, button) {
+	const children = button.children.filter((c) => !ts.isJsxText(c) || c.text.trim());
+	const [child] = children;
+	if (children.length !== 1 || !child) return;
+	const link = context.analysis.elements.find((e) => e.node === child);
+	if (!link || link.hasSpread || !isLink(context, link)) return;
+	if (hasLabel(button.attributes) || hasLabel(link.attributes)) return;
+	if (labelledByParent(context, button)) return;
+	const icons = [];
+	const content = classify(link.children, context, icons);
+	const sizeIcon = attributeLiterals(button, "size").some((v) => v.text.includes("icon"));
+	if (content !== "icon" && !(content === "empty" && sizeIcon)) return;
+	const { label, fixed } = iconLabel(context, link, button, icons[0]);
+	const attribute = `aria-label="${label ?? "…"}"`;
+	context.report({
+		...tagRange(context, link),
+		message: content === "icon" ? `Icon-only <${link.tag}> in <${button.tag} asChild> has no accessible name. Add ${attribute} describing the action, or visually hidden text.` : `<${link.tag}> in <${button.tag} asChild> has no content and no accessible name. Add ${attribute}.`,
+		suggestion: attribute,
+		fix: fixed ? [{
+			range: [link.tagName.end, link.tagName.end],
+			text: ` ${attribute}`
+		}] : void 0
+	});
+}
 const iconButtonAccessibleName = {
 	id: "icon-button-accessible-name",
 	description: "Buttons whose only content is an icon need an aria-label (or visually hidden text).",
 	run(context) {
 		for (const element of context.analysis.elements) {
 			const resolution = context.resolve(element);
-			if (!isButton(context, element) || element.hasSpread) continue;
-			if (findAttribute(element, "asChild") || isHidden(element)) continue;
+			if (!isButton(context, element) || element.hasSpread || isHidden(element)) continue;
+			if (findAttribute(element, "asChild")) {
+				checkAsChildLink(context, element);
+				continue;
+			}
 			const host = renderHost(context, element);
 			if (host === "object") continue;
 			if (host && (isButton(context, host) || host.hasSpread)) continue;
@@ -8474,14 +9667,13 @@ const iconButtonAccessibleName = {
 			const content = host && !children.length ? "unknown" : classify(children, context, icons);
 			const sizeIcon = attributeLiterals(element, "size").some((v) => v.text.includes("icon"));
 			if (content === "text" || content === "unknown" || content === "empty" && !sizeIcon && resolution.kind !== "intrinsic") continue;
-			const icon = icons[0];
-			const label = icon ? ICON_LABELS.find(([pattern]) => pattern.test(icon))?.[1] : void 0;
+			const { label, fixed } = iconLabel(context, element, host, icons[0]);
 			const attribute = `aria-label="${label ?? "…"}"`;
 			context.report({
 				...tagRange(context, element),
 				message: content === "icon" ? `Icon-only <${element.tag}> has no accessible name. Add ${attribute} describing the action, or visually hidden text.` : `<${element.tag}> has no content and no accessible name. Add ${attribute}.`,
 				suggestion: attribute,
-				fix: label ? [{
+				fix: fixed ? [{
 					range: [element.tagName.end, element.tagName.end],
 					text: ` ${attribute}`
 				}] : void 0
@@ -8491,6 +9683,60 @@ const iconButtonAccessibleName = {
 };
 //#endregion
 //#region src/lint/rules/hardcoded.ts
+/** `var(--color-green-50)`: a shade of Tailwind's palette through its CSS variable. */
+const PALETTE_VARIABLE = /^var\(\s*--color-([a-z]+-(?:50|[1-9]00|950))\s*\)$/;
+/** Luminance values, not design colors: `white`/`black` (and hex twins). */
+const MASK_LUMINANCE = /* @__PURE__ */ new Set([
+	"white",
+	"black",
+	"#fff",
+	"#ffffff",
+	"#000",
+	"#000000"
+]);
+/**
+* Whether the element sits inside an SVG `<mask>`: a stop's luminance sets
+* opacity there, so `white`/`black` stops are not design-system colors (#59).
+*/
+function isInsideMask(element) {
+	const sourceFile = element.node.getSourceFile();
+	return ts.findAncestor(element.node, (node) => {
+		if (!ts.isJsxElement(node) && !ts.isJsxSelfClosingElement(node)) return false;
+		return (ts.isJsxElement(node) ? node.openingElement : node).tagName.getText(sourceFile) === "mask";
+	}) !== void 0;
+}
+/** `id` of the wrapping gradient, if the stop sits directly in one. */
+function gradientIdOfStop(element) {
+	const gradient = ts.findAncestor(element.node.parent, (node) => ts.isJsxElement(node) || ts.isJsxSelfClosingElement(node));
+	if (gradient === void 0) return void 0;
+	const opening = ts.isJsxElement(gradient) ? gradient.openingElement : gradient;
+	const tag = opening.tagName.getText(element.node.getSourceFile());
+	if (tag !== "linearGradient" && tag !== "radialGradient") return;
+	const idAttr = opening.attributes.properties.filter(ts.isJsxAttribute).find((a) => attributeName(a) === "id");
+	return idAttr?.initializer && ts.isStringLiteralLike(idAttr.initializer) ? idAttr.initializer.text : void 0;
+}
+const URL_REF = /url\(\s*#([^)\s]+)\s*\)/g;
+/**
+* Gradient ids referenced via `fill="url(#id)"` (or `stroke`) from inside a
+* `<mask>` subtree: stops of those gradients paint mask luminance, not
+* colors (#59, cal.com gridFade/gridMask shape).
+*/
+function maskReferencedGradientIds(elements) {
+	const ids = /* @__PURE__ */ new Set();
+	const refsFrom = (node) => {
+		if (ts.isJsxAttribute(node)) {
+			const name = attributeName(node);
+			if ((name === "fill" || name === "stroke") && node.initializer && ts.isStringLiteralLike(node.initializer)) {
+				URL_REF.lastIndex = 0;
+				let match;
+				while ((match = URL_REF.exec(node.initializer.text)) !== null) if (match[1]) ids.add(match[1]);
+			}
+		}
+		ts.forEachChild(node, refsFrom);
+	};
+	for (const element of elements) if (element.tag === "mask") refsFrom(element.node);
+	return ids;
+}
 const noHardcodedColor = {
 	id: "no-hardcoded-color",
 	description: "Colors must come from design tokens: no hex/rgb/oklch literals, arbitrary Tailwind colors or default-palette classes.",
@@ -8498,71 +9744,174 @@ const noHardcodedColor = {
 		const { tokens } = context.target;
 		if (!tokens.has("color")) return;
 		const allow = new Set((context.options.allow ?? []).map((v) => v.toLowerCase()));
-		for (const classString of context.analysis.classStrings) for (const token of splitClasses(classString.text, classString.start)) {
-			if (allow.has(token.value.toLowerCase())) continue;
-			const utility = parseUtility(token.value);
+		const maskGradients = maskReferencedGradientIds(context.analysis.elements);
+		const lists = /* @__PURE__ */ new Map();
+		for (const classString of context.analysis.classStrings) {
+			const key = classString.element ?? classString;
+			const list = lists.get(key) ?? [];
+			lists.set(key, list);
 			const element = classString.element;
-			if (utility.arbitrary !== void 0 && utility.prefix && COLOR_PREFIXES.includes(utility.prefix)) {
-				const value = utility.arbitrary.replace(/^color:/, "").trim();
-				const whole = parseColor(value);
-				const literal = whole ? {
-					text: value,
-					color: whole
-				} : findColorLiterals(value)[0];
-				if (!literal || allow.has(literal.text.toLowerCase())) continue;
-				reportColor(context, {
-					start: token.start,
-					end: token.end,
-					what: `Hardcoded color \`${token.value}\``,
-					color: literal.color,
-					prefix: whole ? utility.prefix : void 0,
-					place: "class",
-					utility,
-					element,
-					classes: classString.text
-				});
-				continue;
-			}
-			const property = utility.property ? cssColorProperty(utility.property) : void 0;
-			if (property && utility.arbitrary !== void 0) {
-				const value = utility.arbitrary.trim();
-				const whole = parseColor(value);
-				const literal = whole ? {
-					text: value,
-					color: whole
-				} : findColorLiterals(value)[0];
-				if (!literal || allow.has(literal.text.toLowerCase())) continue;
-				reportColor(context, {
-					start: token.start,
-					end: token.end,
-					what: `Hardcoded color \`${token.value}\``,
-					color: literal.color,
-					prefix: whole ? property.prefix : void 0,
-					place: "class",
-					utility,
-					element,
-					classes: classString.text
-				});
-				continue;
-			}
-			const palette = paletteColor(utility.base);
-			if (palette && !tokens.colorKeys.has(palette.key)) {
-				const color = parseColor(palette.value);
-				if (!color) continue;
-				reportColor(context, {
-					start: token.start,
-					end: token.end,
-					what: `\`${token.value}\` is Tailwind's default palette, not a design-system color`,
-					color,
-					tinted: !palette.gray,
-					prefix: palette.prefix,
-					place: "class",
-					utility,
-					element,
-					classes: classString.text
-				});
+			for (const token of splitClasses(classString.text, classString.start)) {
+				const utility = parseUtility(token.value);
+				const listed = {
+					value: token.value,
+					prefix: tokenColorPrefix(utility, tokens.colorKeys),
+					element
+				};
+				list.push(listed);
+				const allowed = allow.has(token.value.toLowerCase());
+				if (utility.arbitrary !== void 0 && utility.prefix && COLOR_PREFIXES.includes(utility.prefix)) {
+					const value = utility.arbitrary.replace(/^color:/, "").trim();
+					const shade = PALETTE_VARIABLE.exec(value)?.[1];
+					const viaVariable = shade ? paletteColor(`${utility.prefix}-${shade}`) : void 0;
+					if (viaVariable) {
+						const color = tokens.colorKeys.has(viaVariable.key) ? void 0 : parseColor(viaVariable.value);
+						if (!color) continue;
+						listed.color = color;
+						listed.prefix = viaVariable.prefix;
+						listed.tinted = !viaVariable.gray;
+						if (allowed) continue;
+						listed.report = colorReport(context, {
+							start: token.start,
+							end: token.end,
+							what: `\`${token.value}\` is Tailwind's default palette (\`${viaVariable.key}\`), not a design-system color`,
+							color,
+							tinted: !viaVariable.gray,
+							palette: viaVariable.key,
+							prefix: viaVariable.prefix,
+							place: "class",
+							utility,
+							element,
+							classes: classString.text
+						});
+						continue;
+					}
+					const whole = parseColor(value);
+					const literal = whole ? {
+						text: value,
+						color: whole
+					} : findColorLiterals(value)[0];
+					if (!literal) continue;
+					listed.color = literal.color;
+					listed.prefix = whole ? utility.prefix : void 0;
+					if (allowed || allow.has(literal.text.toLowerCase())) continue;
+					listed.report = colorReport(context, {
+						start: token.start,
+						end: token.end,
+						what: `Hardcoded color \`${token.value}\``,
+						color: literal.color,
+						prefix: listed.prefix,
+						place: "class",
+						utility,
+						element,
+						classes: classString.text
+					});
+					continue;
+				}
+				const property = utility.property ? cssColorProperty(utility.property) : void 0;
+				if (property && utility.arbitrary !== void 0) {
+					const value = utility.arbitrary.trim();
+					const whole = parseColor(value);
+					const literal = whole ? {
+						text: value,
+						color: whole
+					} : findColorLiterals(value)[0];
+					if (!literal) continue;
+					listed.color = literal.color;
+					listed.prefix = whole ? property.prefix : void 0;
+					if (allowed || allow.has(literal.text.toLowerCase())) continue;
+					listed.report = colorReport(context, {
+						start: token.start,
+						end: token.end,
+						what: `Hardcoded color \`${token.value}\``,
+						color: literal.color,
+						prefix: listed.prefix,
+						place: "class",
+						utility,
+						element,
+						classes: classString.text
+					});
+					continue;
+				}
+				const palette = paletteColor(utility.base);
+				if (palette && !tokens.colorKeys.has(palette.key)) {
+					const color = parseColor(palette.value);
+					if (!color) continue;
+					listed.color = color;
+					listed.prefix = palette.prefix;
+					listed.tinted = !palette.gray;
+					if (allowed) continue;
+					listed.report = colorReport(context, {
+						start: token.start,
+						end: token.end,
+						what: `\`${token.value}\` is Tailwind's default palette, not a design-system color`,
+						color,
+						tinted: !palette.gray,
+						palette: palette.key,
+						prefix: palette.prefix,
+						place: "class",
+						utility,
+						element,
+						classes: classString.text
+					});
+					continue;
+				}
+				const keyword = keywordColor(utility, tokens.colorKeys);
+				const tint = keyword ? void 0 : keywordColor(utility, tokens.colorKeys, true);
+				if (tint && colorRole(tint.prefix) === "text" && !(element && isInsideMask(element))) {
+					listed.color = tint.color;
+					listed.prefix = tint.prefix;
+				}
+				if (keyword && !(element && isInsideMask(element))) {
+					listed.color = keyword.color;
+					listed.prefix = keyword.prefix;
+					if (allowed) continue;
+					listed.keyword = {
+						start: token.start,
+						end: token.end,
+						what: `\`${token.value}\` is a fixed color, not a design-system color`,
+						color: keyword.color,
+						tinted: false,
+						keyword: true,
+						prefix: keyword.prefix,
+						place: "class",
+						utility,
+						element,
+						classes: classString.text
+					};
+				}
 			}
 		}
+		const surfaces = new Surfaces(context, lists);
+		const texts = [];
+		const fixedTexts = [];
+		for (const list of lists.values()) for (const listed of list) {
+			const text = colorRole(listed.prefix) === "text" && listed.color !== void 0;
+			if (listed.keyword) {
+				if (text) {
+					const placed = surfaces.place(list, listed);
+					texts.push({
+						text: listed,
+						list
+					});
+					if (placed.contrasts) continue;
+				}
+				listed.report = colorReport(context, listed.keyword);
+			} else if (text) (listed.report?.fix ? fixedTexts : texts).push({
+				text: listed,
+				list
+			});
+		}
+		for (const { text, list } of texts) surfaces.holdUnderText(text, list);
+		for (const list of lists.values()) keepStatesApart(list);
+		const stays = new Set(texts.map(({ text }) => text));
+		for (const { text, list } of fixedTexts) {
+			if (text.report?.fix) continue;
+			stays.add(text);
+			surfaces.holdUnderText(text, list);
+		}
+		surfaces.holdUnderInherited(stays);
+		for (const list of lists.values()) for (const { report } of list) if (report) context.report(report);
 		for (const { object, element } of context.analysis.styles) for (const prop of object.properties) {
 			if (!ts.isPropertyAssignment(prop)) continue;
 			const name = propertyName(prop.name);
@@ -8585,13 +9934,16 @@ const noHardcodedColor = {
 				if (!isColorAttribute(name)) continue;
 				if (resolution.kind === "component" && resolution.component.props.some((p) => p.name === name && p.values?.length)) continue;
 				const prefix = name === "fill" || name === "stroke" ? name : "text";
-				for (const literal of literalValues(attribute)) reportLiteralColors(context, literal, element, {
-					where: `${name}="…"`,
-					prefix,
-					place: "attribute",
-					named: resolution.kind === "intrinsic",
-					allow
-				});
+				for (const literal of literalValues(attribute)) {
+					if ((name === "stopColor" || name === "stop-color") && element.tag === "stop" && MASK_LUMINANCE.has(literal.text.toLowerCase()) && (isInsideMask(element) || maskGradients.has(gradientIdOfStop(element) ?? ""))) continue;
+					reportLiteralColors(context, literal, element, {
+						where: `${name}="…"`,
+						prefix,
+						place: "attribute",
+						named: resolution.kind === "intrinsic",
+						allow
+					});
+				}
 			}
 		}
 	}
@@ -8611,7 +9963,7 @@ function reportLiteralColors(context, literal, element, options) {
 	}
 	for (const match of matches) {
 		if (options.allow.has(match.text.toLowerCase())) continue;
-		reportColor(context, {
+		const report = colorReport(context, {
 			start: start + match.index,
 			end: start + match.index + match.text.length,
 			what: `Hardcoded color \`${match.text}\` in ${options.where}`,
@@ -8620,9 +9972,11 @@ function reportLiteralColors(context, literal, element, options) {
 			place: options.place,
 			element
 		});
+		if (report) context.report(report);
 	}
 }
-function reportColor(context, input) {
+/** The finding for a color, or undefined when the design system has no color to name. */
+function colorReport(context, input) {
 	const role = colorRole(input.prefix ?? input.utility?.prefix);
 	const mode = input.utility?.variants.includes("dark") ? "dark" : void 0;
 	const suggestion = context.target.tokens.suggestColor(input.color, {
@@ -8631,13 +9985,56 @@ function reportColor(context, input) {
 		tinted: input.tinted,
 		mode
 	});
-	if (!suggestion) return;
-	const { match, nearest, reason, sameValue, hueOff } = suggestion;
+	if (!suggestion) return void 0;
+	const { match, nearest, reason, sameValue, hueOff, otherRole, closeStatus } = suggestion;
 	const token = nearest.candidate.token;
-	const cls = input.prefix && token.tailwind ? `${input.prefix}-${token.tailwind}` : void 0;
-	const cssVar = cssReference(token);
+	const { cls, replacement, advice, edit } = writing(input, token);
 	const close = match !== void 0;
+	const held = close && input.palette && nearest.distance >= .02 ? heldBack(input.palette, valueIn(nearest.candidate, mode), nearest.distance) : void 0;
+	const status = close && closeStatus ? statusTooClose(input, mode, closeStatus, token, advice) : void 0;
 	const variant = cls && input.element ? variantApplying(context, input.element, cls) : void 0;
+	const same = sameValue.length ? `, same value as ${sameValue.map((t) => t.name).join(", ")}` : "";
+	const inMode = mode && token.modes?.[mode] !== void 0 ? ` in ${mode} mode` : "";
+	const value = valueIn(nearest.candidate, mode);
+	const found = `${token.name}${inMode} (${formatDistance(input.color, value)}${same})`;
+	const opacityGap = formatOpacityGap(input.color, value, `${token.name}${inMode}`);
+	const tinted = input.tinted ?? isTinted(input.color);
+	const noHue = !close && reason === "hue" && tinted;
+	const keywordText = input.keyword === true && role === "text";
+	const keptBack = input.keyword && close && edit && !held && !status ? keywordText ? "White or black text depends on the surface under it, so this is not applied automatically: use the foreground token of that surface." : nearest.distance >= .02 ? "Only a token of exactly this color is applied automatically." : void 0 : void 0;
+	let message;
+	if (close) {
+		message = `${input.what}. ${nearest.distance < .02 ? "Matches token" : "Nearest token"} ${found}`;
+		if (advice) message += ` → ${advice}`;
+		if (variant) message += `, or use ${variant}`;
+		message += ".";
+		if (opacityGap) message += ` ${opacityGap}`;
+		if (status) message += ` ${status}`;
+		else if (held) message += ` ${held}`;
+		else if (keptBack) message += ` ${keptBack}`;
+	} else if (noHue) message = `${input.what}. ${NO_TOKEN_HAS_HUE}`;
+	else message = `${input.what}. ${noMatch(reason, role, found, hueOff)}${meantForAnother(otherRole, input.color, mode)}${opacityGap ? ` ${opacityGap}` : ""} Pick the semantic token that fits.`;
+	const owner = !variant && input.prefix && input.element ? variantProp(context, input.element, input.prefix) : void 0;
+	if (owner) message += ` <${owner.component}> already sets ${input.prefix}-* through \`${owner.prop}\`; prefer a variant over overriding it.`;
+	return {
+		start: input.start,
+		end: input.end,
+		message,
+		suggestion: close ? variant ?? replacement : void 0,
+		fix: close && edit && !held && !status && !keptBack ? [{
+			range: [input.start, input.end],
+			text: edit
+		}] : void 0,
+		severity: noHue || keywordText ? "warning" : void 0
+	};
+}
+/**
+* How code writes `token` where the color is: the class (`bg-primary`), what to suggest, the
+* message's advice and the text a fix puts in place of the color.
+*/
+function writing(input, token) {
+	const cls = input.prefix && token.tailwind ? `${input.prefix}-${token.tailwind}` : void 0;
+	const cssVar = cssReference(token);
 	let replacement;
 	let advice;
 	let edit;
@@ -8654,45 +10051,621 @@ function reportColor(context, input) {
 		advice = cls ? `\`${cls}\` in className` : void 0;
 	}
 	if (!cls && !cssVar && token.usage.length) advice = token.usage.map((usage) => `\`${usage}\``).join(" or ");
-	const same = sameValue.length ? `, same value as ${sameValue.map((t) => t.name).join(", ")}` : "";
+	return {
+		cls,
+		replacement,
+		advice,
+		edit
+	};
+}
+/**
+* Why a close match is not applied when a status color of the color's hue is about as close:
+* `destructive is close too (ΔE 0.071), and it is a status color, so this is not applied
+* automatically: use \`bg-destructive\` if the color shows a status, otherwise \`bg-brand\`.`
+*/
+function statusTooClose(input, mode, status, found, advice) {
+	const { token } = status.candidate;
 	const inMode = mode && token.modes?.[mode] !== void 0 ? ` in ${mode} mode` : "";
-	const found = `${token.name}${inMode} (${formatDeltaE(nearest.distance)}${same})`;
-	let message;
-	if (close) {
-		message = `${input.what}. ${nearest.distance < .02 ? "Matches token" : "Nearest token"} ${found}`;
-		if (advice) message += ` → ${advice}`;
-		if (variant) message += `, or use ${variant}`;
-		message += ".";
-	} else {
-		const tinted = input.tinted ?? isTinted(input.color);
-		message = `${input.what}. ${noMatch(reason, role, tinted, nearest.candidate.color, found, hueOff)} Pick the semantic token that fits.`;
+	const distance = formatDistance(input.color, valueIn(status.candidate, mode));
+	const statusAdvice = writing(input, token).advice || token.name;
+	return `${token.name}${inMode} is close too (${distance}), and it is a status color, so this is not applied automatically: use ${statusAdvice} if the color shows a status, otherwise ${advice || found.name}.`;
+}
+/** Color keywords that are no token but set a color (`bg-white`, `border-transparent`). */
+const KEYWORD_COLORS = /* @__PURE__ */ new Set([
+	"white",
+	"black",
+	"transparent",
+	"current",
+	"inherit"
+]);
+/** The prefix of a class that sets a token's color or a keyword color: `bg` for `bg-primary`. */
+function tokenColorPrefix(utility, colorKeys) {
+	const key = COLOR_UTILITY.exec(utility.base)?.[1];
+	if (!key || !(colorKeys.has(key) || KEYWORD_COLORS.has(key))) return void 0;
+	return utility.base.slice(0, -key.length - 1);
+}
+/** `bg-white`, `border-black`: Tailwind's colors without a shade, as a color utility sets them. */
+const KEYWORD_CLASS = new RegExp(`^(${COLOR_PREFIXES.join("|")})-(${Object.keys(TAILWIND_KEYWORD_COLORS).join("|")})$`);
+/**
+* The white or black an opaque class sets (`bg-white`, `text-black`). With an opacity modifier
+* (`bg-black/50`, `border-white/10`) it is a tint of whatever is under it, a scrim or a hairline
+* that suits both modes, so it is left alone: with `tint`, only such a class is read. A theme
+* that defines `--color-white` (after `--color-*: initial`) makes `bg-white` one of its tokens.
+*/
+function keywordColor(utility, colorKeys, tint = false) {
+	if (Boolean(utility.modifier) !== tint || utility.arbitrary !== void 0) return void 0;
+	const [, prefix, name] = KEYWORD_CLASS.exec(utility.base) ?? [];
+	if (!prefix || !name || colorKeys.has(name)) return void 0;
+	const color = parseColor(TAILWIND_KEYWORD_COLORS[name] ?? "");
+	return color ? {
+		prefix,
+		color
+	} : void 0;
+}
+/** The node around `node`, or undefined at the file. */
+function parentOf(node) {
+	return ts.isSourceFile(node) ? void 0 : node.parent;
+}
+/** Background classes that set no background of their own: what is under them shows through. */
+const NO_BACKGROUND = /^bg-(?:transparent|current|inherit|none)$/;
+/** Style properties that set an element's background, and values that set none. */
+const STYLE_BACKGROUNDS = /* @__PURE__ */ new Set([
+	"background",
+	"backgroundColor",
+	"backgroundImage"
+]);
+const NO_STYLE_BACKGROUND = /^(?:transparent|none|inherit|initial|unset|revert|currentcolor)$/i;
+/** `var(--primary)`: a custom property, which can be a token's. */
+const CSS_VARIABLE = /^var\(\s*(--[\w-]+)\s*\)$/;
+/**
+* How far apart in lightness (OKLCH L) white or black text and its surface must be for the
+* surface to be the text's own: white on `bg-indigo-600` or `bg-orange-500` (0.705), not on
+* `bg-amber-400` or `bg-muted`; black on `bg-yellow-300`, not on `bg-indigo-600`. A token is
+* judged in each mode the text shows in: shadcn/ui's `primary` is near white in dark mode, so
+* white text on `bg-primary` is not its own there.
+*/
+const SURFACE_CONTRAST = .25;
+/** Whether text of this color stands out from a surface of this color. */
+function standsOut(surface, text) {
+	return Math.abs(surface.l - text.l) >= SURFACE_CONTRAST;
+}
+/**
+* WCAG's least contrast for large text and the parts of a control. Lightness alone says too
+* little near black: `text-neutral-600` is 0.44 lighter than black and has 2.7:1 on it, and
+* `text-neutral-800` 1.6:1.
+*/
+const TEXT_CONTRAST = 3;
+/** How hardcoded text reads on a surface: far enough apart in lightness, and in WCAG contrast. */
+function legibility(surface, text) {
+	return {
+		apart: standsOut(surface, text),
+		contrast: wcagContrast(surface, text) >= TEXT_CONTRAST
+	};
+}
+/** The color a text, fill or stroke class hardcodes, or undefined when it sets none. */
+function paintOf(text) {
+	if (colorRole(text.prefix) !== "text" || !text.color) return void 0;
+	return {
+		color: text.color,
+		variants: parseUtility(text.value).variants,
+		element: text.element
+	};
+}
+/**
+* Where white or black text sits, which says whether the text is the surface's contrast color
+* (shadcn/ui's `bg-destructive text-white`) or the theme's: the background its own element sets,
+* in `style` or in its class list, its component's variants set (`<Button>` with `bg-*`
+* variants), or the nearest element around it that sets one. Any other hardcoded text is placed
+* the same way, to hold the fix of a background it would not stand out from.
+*/
+var Surfaces = class {
+	context;
+	lists;
+	byNode = /* @__PURE__ */ new Map();
+	tokenColors = /* @__PURE__ */ new Map();
+	byVar = /* @__PURE__ */ new Map();
+	/** Backgrounds an element sets in `style`: each value's color, by mode. */
+	styled = /* @__PURE__ */ new Map();
+	held = /* @__PURE__ */ new Set();
+	placed = /* @__PURE__ */ new Map();
+	constructor(context, lists) {
+		this.context = context;
+		this.lists = lists;
+		for (const element of context.analysis.elements) this.byNode.set(element.node, element);
+		for (const candidate of context.target.tokens.colors) {
+			const { tailwind, cssVar } = candidate.token;
+			if (tailwind) this.tokenColors.set(tailwind, candidate);
+			if (cssVar) this.byVar.set(cssVar, candidate);
+		}
+		for (const { element, object } of context.analysis.styles) for (const prop of object.properties) {
+			if (!ts.isPropertyAssignment(prop) && !ts.isShorthandPropertyAssignment(prop)) continue;
+			const name = propertyName(prop.name);
+			if (name === void 0 || !STYLE_BACKGROUNDS.has(name)) continue;
+			const values = ts.isPropertyAssignment(prop) ? valueBranches(prop.initializer) : [prop.name];
+			const colors = this.styled.get(element.node) ?? [];
+			for (const value of values) {
+				const read = this.styleColor(value);
+				if (read) colors.push(read);
+			}
+			if (colors.length) this.styled.set(element.node, colors);
+		}
 	}
-	const owner = !variant && input.prefix && input.element ? variantProp(context, input.element, input.prefix) : void 0;
-	if (owner) message += ` <${owner.component}> already sets ${input.prefix}-* through \`${owner.prop}\`; prefer a variant over overriding it.`;
-	context.report({
-		start: input.start,
-		end: input.end,
-		message,
-		suggestion: close ? variant ?? replacement : void 0,
-		fix: close && edit ? [{
-			range: [input.start, input.end],
-			text: edit
-		}] : void 0
+	/**
+	* Where the text sits, in each mode it shows in: a `dark:` class in dark mode only, another
+	* one in its base mode and in dark mode, unless its class list sets its dark color itself
+	* (`text-black dark:text-white`). It is the surface's own only if it stands out in each.
+	*/
+	place(list, text) {
+		let placed = this.placed.get(text);
+		if (!placed) {
+			const paint = paintOf(text);
+			placed = paint ? this.placeInModes(list, text, paint) : { contrasts: true };
+			this.placed.set(text, placed);
+		}
+		return placed;
+	}
+	placeInModes(list, text, paint) {
+		const { variants } = paint;
+		const modes = variants.includes("dark") ? ["dark"] : hasDarkCounterpart(list, text) ? [void 0] : [void 0, "dark"];
+		let under;
+		for (const mode of modes) {
+			const state = mode === "dark" && !variants.includes("dark") ? [...variants, "dark"] : variants;
+			const placed = this.placeIn(list, paint, state, mode);
+			if (!placed.contrasts) return placed;
+			under ??= placed.under;
+		}
+		return {
+			contrasts: true,
+			under
+		};
+	}
+	/**
+	* Takes back the fix of a hardcoded background when hardcoded text on it stays as it is and may
+	* no longer stand out: `bg-black text-white` or `bg-zinc-900 text-white` would become
+	* `bg-primary text-white`, white on near white where `primary` is light (shadcn/ui's dark
+	* mode), and `bg-white text-neutral-800` would become `bg-background text-neutral-800`, dark
+	* gray on near black. The text is on the backgrounds of its own class list, in their states too
+	* (`hover:bg-black`), and on the surface `place` finds for it.
+	*/
+	holdUnderText(text, list) {
+		this.holdUnder(text, list, list);
+		const { under } = this.place(list, text);
+		if (under && under !== list) this.holdUnder(text, list, under);
+	}
+	/**
+	* Takes back the fixes of backgrounds whose text color comes from around them, as text color is
+	* inherited: in `<div className="text-neutral-800"><p className="bg-white">` the paragraph is
+	* dark gray on white. An element in between that sets a text color, or a component, which can
+	* set one of its own, ends it. An element with nothing in it (a skeleton's `<span />`) shows no
+	* text.
+	*/
+	holdUnderInherited(stays) {
+		for (const list of this.lists.values()) {
+			const element = list[0]?.element;
+			if (!element || !element.children.some((c) => !(ts.isJsxText(c) && c.containsOnlyTriviaWhiteSpaces)) || !list.some((listed) => listed.prefix === "bg" && listed.report?.fix)) continue;
+			for (let node = element.node; node; node = parentOf(node)) {
+				const around = this.byNode.get(node);
+				if (!around) continue;
+				if (this.context.resolve(around).kind !== "intrinsic") break;
+				const aroundList = this.lists.get(around) ?? [];
+				const texts = aroundList.filter((listed) => listed.prefix === "text" && !parseUtility(listed.value).variants.some(stylesAnother));
+				if (!texts.length) continue;
+				if (around !== element) {
+					for (const text of texts) if (stays.has(text)) this.holdUnder(text, aroundList, list);
+				}
+				break;
+			}
+		}
+	}
+	/**
+	* Takes back the fixes of the backgrounds in `under` that the text would not stand out from.
+	* The text loses a token in a mode where it has less than it had on the hardcoded background:
+	* 0.25 of lightness apart, or 3:1 contrast. A token without other modes may still have a dark
+	* one onsystem does not read (`.dark:not(.light)`), so it counts as changing there. The fix
+	* stays when the token keeps that in every mode the text shows in, or the class lists set the
+	* dark-mode background or text (`dark:bg-zinc-900`, `dark:text-white`).
+	*/
+	holdUnder(text, list, under) {
+		const paint = paintOf(text);
+		if (!paint) return;
+		const textIsDark = paint.variants.includes("dark");
+		const textInDark = textIsDark || !hasDarkCounterpart(list, text);
+		for (const surface of under) {
+			const { report, color: surfaceColor } = surface;
+			const fix = report?.fix?.[0];
+			if (!report || !fix || !surfaceColor || surface.prefix !== "bg" || this.held.has(surface)) continue;
+			const surfaceUtility = parseUtility(surface.value);
+			if (surfaceUtility.variants.includes("dark")) continue;
+			const before = legibility(surfaceColor, paint.color);
+			if (!before.apart && !before.contrast) continue;
+			const token = this.fixedTo(fix.text);
+			if (!token) continue;
+			const surfaceInDark = !hasDarkCounterpart(under, surface);
+			const modes = Object.entries(token.modes ?? {});
+			const known = modes.length > 0;
+			if (!known) modes.push(["dark", void 0]);
+			const lost = modes.filter(([mode, value]) => {
+				if (!(mode === "dark" ? textInDark && surfaceInDark : !textIsDark)) return false;
+				if (value === void 0) return true;
+				const after = legibility(value, paint.color);
+				return before.apart && !after.apart || before.contrast && !after.contrast;
+			}).map(([mode]) => mode);
+			if (!lost.length) continue;
+			this.held.add(surface);
+			const textUtility = parseUtility(text.value);
+			const shade = KEYWORD_CLASS.exec(textUtility.base)?.[2] ?? "as it is";
+			const name = token.token.name;
+			const why = !known ? `and ${name} may be another color in a dark mode` : `which would not stand out from ${name} in ${lost.includes("dark") ? "dark mode" : `the ${lost[0] ?? ""} mode`}`;
+			const variants = [...textUtility.variants];
+			if (under === list) {
+				for (const variant of surfaceUtility.variants) if (!variants.includes(variant)) variants.push(variant);
+			}
+			const pair = text.tinted ?? isTinted(paint.color) ? void 0 : this.foregroundOf(token, {
+				...textUtility,
+				variants
+			}, text.prefix);
+			report.message += ` \`${text.value}\` on it stays ${shade}, ${why}, so this is not applied automatically: change the text with it${pair ? `, to \`${pair}\`` : ""}.`;
+			report.fix = void 0;
+		}
+	}
+	/** The token a background's fix puts in: `bg-primary`, or `bg-[var(--chart-bg)]`. */
+	fixedTo(fixed) {
+		const utility = parseUtility(fixed);
+		const variable = utility.arbitrary === void 0 ? void 0 : CSS_VARIABLE.exec(utility.arbitrary.trim())?.[1];
+		if (variable) return this.byVar.get(variable);
+		return this.tokenColors.get(utility.base.slice(3));
+	}
+	/** The text class of the token made for text on `surface`: `text-foreground` on `background`. */
+	foregroundOf(surface, text, prefix) {
+		const key = surface.token.tailwind;
+		if (!key || !prefix) return void 0;
+		const pair = key === "background" ? "foreground" : `${key}-foreground`;
+		return this.tokenColors.has(pair) ? withBase(text, `${prefix}-${pair}`) : void 0;
+	}
+	/**
+	* Where the text sits in one mode, and the class list that says so. Under a tint it does not
+	* stand out from (`bg-white/10` under white text), what is under the tint decides; with nothing
+	* under it in the file, the page's `background` in that mode does.
+	*/
+	placeIn(list, text, state, mode) {
+		const { color, element } = text;
+		/** Whether the text is under a tint it does not stand out from, which shows what is under it. */
+		const seen = { through: false };
+		/** What an element's `style`, then its class list, says: undefined to look further out. */
+		const at = (node, classes, component) => {
+			const styled = node ? this.styleVerdict(node, color, mode) : void 0;
+			if (styled === "through") seen.through = true;
+			if (styled !== void 0) return styled === "through" ? void 0 : { contrasts: styled };
+			const says = this.verdict(classes, color, state, mode);
+			if (says === "through") seen.through = true;
+			else if (says !== void 0) return {
+				contrasts: says,
+				under: classes
+			};
+			if (component && variantProp(this.context, component, "bg")) return { contrasts: true };
+		};
+		const own = at(element?.node, list, element);
+		if (own) return own;
+		for (let node = element?.node.parent; node; node = parentOf(node)) {
+			const around = this.byNode.get(node);
+			if (!around) continue;
+			const placed = at(node, this.lists.get(around) ?? [], around);
+			if (placed) return placed;
+		}
+		if (!seen.through) return { contrasts: false };
+		const page = this.tokenColors.get("background");
+		return { contrasts: !page || standsOut(valueIn(page, mode), color) };
+	}
+	/**
+	* What a class list's background says for the text, or undefined when it sets none. Any
+	* background the text stands out from is its own: a list holds the classes of every branch
+	* of a `cn()` object, which never apply together. Then a tint it does not stand out from,
+	* whose surface is under it: in dark mode, `bg-neutral-50 dark:bg-white/10` is a tint over the
+	* page.
+	*/
+	verdict(list, text, state, mode) {
+		let verdict;
+		for (const { value } of list) {
+			const says = this.excuses(parseUtility(value), text, state, mode);
+			if (says === true) return true;
+			if (says === "through" || verdict === void 0) verdict = says ?? verdict;
+		}
+		return verdict;
+	}
+	/**
+	* What a background set in `style` says for the text: an inline style is over the classes.
+	* A color known only at run time (a swatch) or an image is a surface of its own.
+	*/
+	styleVerdict(node, text, mode) {
+		const colors = this.styled.get(node);
+		if (!colors) return void 0;
+		let verdict = "through";
+		for (const read of colors) {
+			const color = read(mode);
+			if (color === "unknown" || standsOut(color, text)) verdict = true;
+			else if ((color.alpha ?? 1) >= 1) return false;
+		}
+		return verdict;
+	}
+	/** How a style value colors the background: undefined when it sets none. */
+	styleColor(value) {
+		if (value.kind === ts.SyntaxKind.NullKeyword) return void 0;
+		if (ts.isIdentifier(value) && value.text === "undefined") return void 0;
+		if (!ts.isStringLiteralLike(value)) return () => "unknown";
+		const text = value.text.trim();
+		if (!text || NO_STYLE_BACKGROUND.test(text)) return void 0;
+		const variable = CSS_VARIABLE.exec(text)?.[1];
+		const token = variable ? this.byVar.get(variable) : void 0;
+		if (token) return (mode) => valueIn(token, mode);
+		const color = parseColor(text);
+		return () => color ?? "unknown";
+	}
+	/**
+	* Whether a class sets a surface the text contrasts with: a gradient, an image, or a color far
+	* enough from the text's in lightness. An opaque `bg-white` or `bg-black` is the page's own
+	* color, as hardcoded as the text. A tint (`bg-black/60`) is a surface where it stands out;
+	* `bg-white/10` under white text shows what is under it (`through`). Undefined for a class
+	* that sets no background, or sets one only in a state the text is not in: `hover:bg-red-600`
+	* is the surface of `hover:text-white`, not of `text-white`.
+	*/
+	excuses(utility, text, state, mode) {
+		const { base, modifier } = utility;
+		if (!utility.variants.every((variant) => state.includes(variant))) return void 0;
+		if (/^(?:from|via)-/.test(base)) return true;
+		if (!base.startsWith("bg-") || NO_BACKGROUND.test(base)) return void 0;
+		if (keywordColor(utility, this.context.target.tokens.colorKeys)) return false;
+		const color = this.backgroundColor(utility, mode);
+		if (color === "unknown") return true;
+		const contrasts = standsOut(color, text);
+		return modifier && !contrasts ? "through" : contrasts;
+	}
+	/** The color a `bg-*` class sets in a mode: a token's, the palette's, or written in it. */
+	backgroundColor(utility, mode) {
+		const key = utility.base.slice(3);
+		const token = this.tokenColors.get(key);
+		if (token) return valueIn(token, mode);
+		const palette = paletteColor(utility.base);
+		if (palette) return parseColor(palette.value) ?? "unknown";
+		const keyword = TAILWIND_KEYWORD_COLORS[key];
+		if (keyword) return parseColor(keyword) ?? "unknown";
+		if (utility.arbitrary === void 0) return "unknown";
+		const value = utility.arbitrary.replace(/^color:/, "").trim();
+		const shade = PALETTE_VARIABLE.exec(value)?.[1];
+		const variable = shade ? void 0 : CSS_VARIABLE.exec(value)?.[1];
+		const viaVariable = variable ? this.byVar.get(variable) : void 0;
+		if (viaVariable) return valueIn(viaVariable, mode);
+		const color = shade ? paletteColor(`bg-${shade}`)?.value : value;
+		return color && parseColor(color) || "unknown";
+	}
+};
+/**
+* Whether the class list sets the color of `listed` for dark mode too: `text-black dark:text-white`,
+* `bg-white dark:bg-zinc-900`. Only a class that adds `dark:` and nothing else to its variants,
+* whatever its color: `dark:bg-darkgray-50` names a color of a config onsystem may not read.
+*/
+function hasDarkCounterpart(list, listed) {
+	const { prefix } = listed;
+	if (prefix === void 0) return false;
+	const { variants } = parseUtility(listed.value);
+	if (variants.includes("dark")) return false;
+	return list.some((other) => {
+		if (other === listed) return false;
+		const theirs = parseUtility(other.value);
+		if (other.prefix !== prefix && !(other.prefix === void 0 && setsColor(theirs, prefix))) return false;
+		return theirs.variants.includes("dark") && theirs.variants.every((variant) => variant === "dark" || variants.includes(variant)) && variants.every((variant) => theirs.variants.includes(variant));
 	});
 }
+/** Utilities of a color prefix that set no color: `bg-cover`, `text-sm`, `stroke-2`. */
+const NOT_A_COLOR = {
+	bg: /^bg-(?:auto|cover|contain|fixed|local|scroll|repeat.*|no-repeat|center|(?:top|bottom|left|right)(?:-.*)?|clip-.*|origin-.*|blend-.*|gradient-.*|linear.*|radial.*|conic.*|none|size-.*|position-.*|\[url\(.*)$/,
+	text: /^text-(?:xs|sm|base|lg|\d?xl|left|center|right|justify|start|end|wrap|nowrap|balance|pretty|ellipsis|clip|\[\d.*)$/,
+	fill: /^fill-none$/,
+	stroke: /^stroke-(?:none|\d.*|\[\d.*)$/
+};
+/** Whether a class of no known color sets the color of `prefix`: `dark:bg-darkgray-50`. */
+function setsColor(utility, prefix) {
+	if (!utility.base.startsWith(`${prefix}-`) || COLOR_UTILITY.exec(utility.base) === null) return false;
+	if (utility.prefix !== void 0 && utility.prefix !== prefix) return false;
+	return !NOT_A_COLOR[prefix]?.test(utility.base);
+}
+/**
+* Takes back a fix that would make a class under a condition (`hover:`, `focus-visible:`, `md:`)
+* the same color as the class without it: `bg-[#2563eb] hover:bg-[#1d4ed8]` would become
+* `bg-primary hover:bg-primary`, and the hover would change nothing. The state class gives way
+* first; a base class does when the state class already has the token it would get. `dark:` is
+* no such condition: dark classes are compared with the tokens' dark values, where the same
+* token is right. Two hardcoded classes of exactly the same color keep their fixes: the
+* condition changed nothing before either (`border-red-500 focus:border-red-500` keeps an error
+* border red on focus), and a hardcoded color is the same in every mode. A token class is not:
+* the class list's `bg-primary` is another color in dark mode than a `hover:bg-[#171717]` next
+* to it. A `dark:` state class starts from the list's `dark:` class, when it has one.
+*/
+function keepStatesApart(list) {
+	const after = (listed) => listed.report?.fix?.[0]?.text ?? listed.value;
+	for (const pass of ["state", "base"]) for (const listed of list) {
+		const { report } = listed;
+		if (!report?.fix?.[0]) continue;
+		for (const other of list) {
+			if (other === listed || oneColor(listed.color, other.color)) continue;
+			const [stateListed, baseListed] = pass === "state" ? [listed, other] : [other, listed];
+			const state = parseUtility(after(stateListed));
+			const base = parseUtility(after(baseListed));
+			const conditions = conditionsBetween(state, base);
+			if (!conditions || hasDarkBase(list, stateListed, baseListed, state, base, after)) continue;
+			const had = pass === "base" ? `\`${other.value}\` is in the class list too` : after(other) === other.value ? `The class list already has \`${other.value}\`` : `\`${other.value}\` becomes \`${after(other)}\` too`;
+			const apart = state.modifier ? "such as with another opacity modifier" : `such as with \`${withBase({
+				...state,
+				modifier: "/90"
+			}, state.base)}\``;
+			report.message += ` ${had}, so with this fix \`${conditions}\` would change nothing: it is not applied automatically. Keep the two apart, ${apart}.`;
+			report.fix = void 0;
+			break;
+		}
+	}
+}
+/**
+* Below this ΔE two hardcoded colors are one color written two ways: a palette class and its
+* hex (`neutral-100` is 0.00015 from `#f5f5f5`), or an OKLCH value rounded to hex (red-500 is
+* 0.00097 from `#fb2c36`). SAME_COLOR is too loose for this: `#fafafa` is 0.015 from `#fff`,
+* and a hover from one to the other is a change the fix must not remove.
+*/
+const ONE_COLOR = .003;
+/** Whether two hardcoded colors are exactly one color, so one token for both changes nothing. */
+function oneColor(a, b) {
+	return a !== void 0 && b !== void 0 && colorDistance(a, b) < ONE_COLOR;
+}
+/**
+* Whether the class list has the base class's dark-mode counterpart, which a `dark:` state class
+* starts from instead: with `bg-[#171717] dark:bg-[#0a0a0a]`, `dark:hover:` changes the dark
+* background, not `bg-[#171717]`. Only a class that adds `dark:` and nothing else to the base
+* class's variants counts: one that adds a condition (`group-hover:`) is off with it.
+*/
+function hasDarkBase(list, stateListed, baseListed, state, base, after) {
+	if (baseListed.prefix === void 0) return false;
+	if (base.variants.includes("dark") || !state.variants.includes("dark")) return false;
+	return list.some((other) => {
+		if (other === stateListed || other === baseListed || other.prefix !== baseListed.prefix) return false;
+		const { variants } = parseUtility(after(other));
+		return variants.includes("dark") && variants.every((variant) => variant === "dark" || base.variants.includes(variant)) && base.variants.every((variant) => variants.includes(variant));
+	});
+}
+/**
+* The conditions (`hover:`) under which `state` applies and `base` does too, when both are the
+* same color: undefined when they are not, or `state` adds no condition but `dark:`, or styles
+* another element (`placeholder:`, `prose-a:`), whose color the base class does not set.
+*/
+function conditionsBetween(state, base) {
+	if (state.base !== base.base || state.modifier !== base.modifier) return void 0;
+	if (!base.variants.every((variant) => state.variants.includes(variant))) return void 0;
+	const added = state.variants.filter((v) => v !== "dark" && !base.variants.includes(v));
+	if (added.some(stylesAnother)) return void 0;
+	return added.length ? `${added.join(":")}:` : void 0;
+}
+/** Variants for a pseudo-element or other elements than the one the class is on. */
+const OTHER_ELEMENT = /* @__PURE__ */ new Set([
+	"*",
+	"**",
+	"after",
+	"backdrop",
+	"before",
+	"details-content",
+	"file",
+	"first-letter",
+	"first-line",
+	"marker",
+	"placeholder",
+	"selection"
+]);
+/**
+* Whether a variant styles something else than the element: a pseudo-element (`placeholder:`),
+* children (`*:`), the typography plugin's elements (`prose-a:`), or an arbitrary selector that
+* goes on from `&` (`[&>svg]:`, `[&_a]:`, `[&::after]:`), not one that only narrows it
+* (`[&:hover]:`, `[.dark_&]:`).
+*/
+function stylesAnother(variant) {
+	if (OTHER_ELEMENT.has(variant) || variant.startsWith("prose-")) return true;
+	const selector = /^\[(.*)\]$/.exec(variant)?.[1];
+	if (!selector?.includes("&")) return false;
+	const after = selector.slice(selector.lastIndexOf("&") + 1).replace(/\([^()]*\)|\[[^\]]*\]/g, "");
+	return /[_>+~]|::/.test(after);
+}
+/**
+* When no token has the color's hue: add one, or keep the color and say why. Between JSX
+* children a `//` line is text, which suppresses nothing and renders, so that place gets the
+* `{/* *\/}` form.
+*/
+const NO_TOKEN_HAS_HUE = "No token has this hue. Add a token for it to the theme, such as `--success` for a status color, or keep this color and give the reason on the line above: `// onsystem-disable-next-line no-hardcoded-color -- <reason>` (between JSX children, `{/* onsystem-disable-next-line no-hardcoded-color -- <reason> */}`).";
+/**
+* The most Tailwind v3 and v4 differ on one shade, in ΔE: 0.036 for fuchsia-600,
+* under 0.01 for the grays. A token this close to a class's shade, and nearer it
+* than to the family's other shades, can be a v3 project's copy of it.
+*/
+const PALETTE_DRIFT = .037;
+/** Tailwind's default palette as colors: family → its shades, lightest first. */
+const PALETTE_SHADES = /* @__PURE__ */ new Map();
+/** A family's shades as colors, lightest first: `neutral` → 50, 100, … 950. */
+function shadesOf(family) {
+	let shades = PALETTE_SHADES.get(family);
+	if (!shades) {
+		shades = [];
+		for (const [shade, value] of Object.entries(TAILWIND_PALETTE[family] ?? {})) {
+			const parsed = parseColor(value);
+			if (parsed) shades.push([shade, parsed]);
+		}
+		PALETTE_SHADES.set(family, shades);
+	}
+	return shades;
+}
+/** Index of the color in `colors` nearest to `color`, or -1 when there is none. */
+function nearestOf(colors, color) {
+	let index = -1;
+	let best = Infinity;
+	colors.forEach(([, value], i) => {
+		const distance = colorDistance(color, value);
+		if (distance < best) [index, best] = [i, distance];
+	});
+	return index;
+}
+/** The palette color nearest to `color` across every family (`neutral-500`). */
+function nearestPaletteColor(color) {
+	const all = Object.keys(TAILWIND_PALETTE).flatMap((family) => shadesOf(family).map(([shade, value]) => [`${family}-${shade}`, value]));
+	return all[nearestOf(all, color)]?.[0];
+}
+/**
+* Why a token that is not an exact match for a palette class (`key`, `neutral-600`)
+* is suggested but not applied, or undefined when it may be: it is nearer another
+* shade of the family (Dub's `content-default`, neutral-700, for `text-neutral-600`),
+* or it is the class's shade but further from it than Tailwind v3 and v4 are from
+* each other (`content-subtle`, neutral-500, for `text-slate-500`).
+*/
+function heldBack(key, color, distance) {
+	const [family = "", own = ""] = key.split("-");
+	const shades = shadesOf(family);
+	const from = shades.findIndex(([shade]) => shade === own);
+	const to = nearestOf(shades, color);
+	if (from === -1 || to === -1) return void 0;
+	const steps = to - from;
+	let what;
+	let intended;
+	if (steps) {
+		const count = Math.abs(steps) === 1 ? "one shade" : `${String(Math.abs(steps))} shades`;
+		const way = steps > 0 ? "darker" : "lighter";
+		what = `${count} ${way} (${family}-${shades[to]?.[0] ?? ""})`;
+		intended = `the ${way} color`;
+	} else {
+		if (distance < PALETTE_DRIFT) return void 0;
+		const closest = nearestPaletteColor(color);
+		what = closest && closest !== key ? `closest to ${closest}, not ${key}` : `a different color from ${key}`;
+		intended = "that color";
+	}
+	return `That is ${what}, so it is not applied automatically: use it if ${intended} is intended, otherwise pick the semantic token that fits.`;
+}
+/** A token's value where the class applies: a `dark:` class takes its dark-mode value. */
+function valueIn(candidate, mode) {
+	return mode && candidate.modes?.[mode] || candidate.color;
+}
+/** `content-subtle has this color (exact match), but it is meant for text.` */
+function meantForAnother(other, color, mode) {
+	if (!other) return "";
+	const { token } = other.candidate;
+	const role = tokenRole(token);
+	const how = other.distance < .02 ? "has this color" : "is close";
+	const inMode = mode && token.modes?.[mode] !== void 0 ? ` in ${mode} mode` : "";
+	return ` ${token.name} ${how}${inMode} (${formatDistance(color, valueIn(other.candidate, mode))}), but it is meant for ${role ? ROLE_WORDS[role] : "another role"}.`;
+}
 const ROLE_WORDS = {
 	text: "text",
 	surface: "backgrounds",
 	line: "borders"
 };
-/** Why no token replaces the color, naming the nearest one (`found`). */
-function noMatch(reason, role, tinted, token, found, hueOff) {
+/**
+* Why no token replaces the color, naming the nearest one (`found`). A tinted color
+* with no token of its hue gets `NO_TOKEN_HAS_HUE` instead, which names none.
+*/
+function noMatch(reason, role, found, hueOff) {
 	if (reason === "status") return `Nearest is ${found}, a status color ${String(hueOff)}° away in hue; status colors are only suggested for their own hue.`;
 	if (reason === "scoped") return `Nearest is ${found}, a token one part of the UI uses (not this one).`;
-	if (reason === "hue") {
-		if (!tinted) return `No gray token is close; nearest is ${found}, which is tinted.`;
-		return `No token has this hue; nearest is ${found}, ${isTinted(token) ? "another hue" : "a gray"}.`;
-	}
+	if (reason === "hue") return `No gray token is close; nearest is ${found}, which is tinted.`;
 	if (reason === "role" && role) return `No close token is meant for ${ROLE_WORDS[role]}; nearest is ${found}.`;
 	return `No close token; nearest is ${found}.`;
 }
@@ -8758,17 +10731,19 @@ function lengthRule(id, description, spec) {
 				if (negative && !NEGATIVE_PREFIXES.has(utility.prefix)) continue;
 				const replacement = lengthReplacement(context, spec.category, px, utility.prefix);
 				if (!replacement || unnamed(replacement)) continue;
+				if (spec.category === "spacing" && Math.abs(px) <= 1 && (!replacement.exact || negative)) continue;
 				const fixed = withBase({
 					...utility,
 					negative
 				}, replacement.cls);
-				const message = replacement.exact ? `\`${token.value}\` is ${formatPx(px)}, which is on the ${spec.category} scale: use \`${fixed}\`.` : replacement.pill ? `\`${token.value}\` (${formatPx(px)}) is far above the radius scale, so it reads as fully rounded: use \`${fixed}\`.` : `Hardcoded ${spec.category} \`${token.value}\` (${formatPx(px)}) is off the scale. Nearest: \`${fixed}\` (${formatPx(replacement.px)})` + (replacement.far ? ", too far off to replace automatically." : ".");
+				const relative = !replacement.pill && FONT_RELATIVE.test(utility.arbitrary.trim());
+				const message = relative ? `\`${token.value}\` is font-relative: ${utility.arbitrary.trim()} is ${formatPx(px)} only at a 16px font. Nearest step: \`${fixed}\` (${formatPx(replacement.px)}), which does not grow with the font, so it is not applied automatically.` : replacement.exact ? `\`${token.value}\` is ${formatPx(px)}, which is on the ${spec.category} scale: use \`${fixed}\`.` : replacement.pill ? `\`${token.value}\` (${formatPx(px)}) is far above the radius scale, so it reads as fully rounded: use \`${fixed}\`.` : `Hardcoded ${spec.category} \`${token.value}\` (${formatPx(px)}) is off the scale. Nearest: \`${fixed}\` (${formatPx(replacement.px)})` + (replacement.far ? ", too far off to replace automatically." : ".");
 				context.report({
 					start: token.start,
 					end: token.end,
 					message,
 					suggestion: fixed,
-					fix: replacement.far ? void 0 : [{
+					fix: replacement.far || relative ? void 0 : [{
 						range: [token.start, token.end],
 						text: fixed
 					}]
@@ -8791,17 +10766,19 @@ function lengthRule(id, description, spec) {
 					if (negative && !NEGATIVE_PREFIXES.has(prefix)) continue;
 					const replacement = values.length === 1 ? lengthReplacement(context, spec.category, px, prefix) : void 0;
 					if (replacement && unnamed(replacement)) continue;
+					if (replacement && spec.category === "spacing" && Math.abs(px) <= 1 && (!replacement.exact || negative)) continue;
 					const cls = replacement && `${negative ? "-" : ""}${replacement.cls}`;
 					const cssVar = replacement?.cssVar && (negative ? `calc(${replacement.cssVar} * -1)` : replacement.cssVar);
 					const shown = number !== void 0 ? `${name}: ${raw}` : `${name}: "${raw}"`;
 					const size = replacement?.pill ? "fully rounded" : formatPx(replacement?.px ?? 0);
 					const advice = replacement ? replacement.tailwind ? `Use \`${cls}\` (${size}) in className instead of an inline style.` : `Use \`${cssVar ?? cls}\` (${size}).` : `Use ${spec.category} tokens instead.`;
+					const relative = number === void 0 && !replacement?.pill && values.some((v) => FONT_RELATIVE.test(v));
 					context.report({
 						start: init.getStart(context.sourceFile),
 						end: init.end,
-						message: `Hardcoded ${spec.category} \`${shown}\` in style. ${advice}`,
+						message: relative ? `Hardcoded ${spec.category} \`${shown}\` in style, font-relative: ${formatPx(px)} only at a 16px font. ${advice} No step of the scale grows with the font, so it is not applied automatically.` : `Hardcoded ${spec.category} \`${shown}\` in style. ${advice}`,
 						suggestion: replacement ? replacement.tailwind ? cls : cssVar : void 0,
-						fix: replacement && !replacement.tailwind && cssVar && replacement.exact ? [{
+						fix: replacement && !replacement.tailwind && cssVar && replacement.exact && !relative ? [{
 							range: [init.getStart(context.sourceFile), init.end],
 							text: `"${cssVar}"`
 						}] : void 0
@@ -8818,6 +10795,8 @@ function lengthRule(id, description, spec) {
 function unnamed(replacement) {
 	return replacement.exact && !replacement.tailwind && !replacement.cssVar;
 }
+/** A length in `em`, relative to the element's font size (`0.5em`, not `0.5rem`). */
+const FONT_RELATIVE = /^-?(?:\d+\.?\d*|\.\d+)em$/i;
 /** The nearest step is "far" when it is off by more than half the value and more than 4px. */
 const FAR_RATIO = .5;
 const FAR_PX = 4;
@@ -8963,13 +10942,14 @@ function findingKey(diagnostic) {
 	const text = diagnostic.source.replace(/\s+/g, " ").trim();
 	return (/^(['"`])(.*)\1$/.exec(text)?.[2] ?? text).slice(0, 200);
 }
-/** The baseline's entries, or undefined when the file does not exist. */
+/** The baseline, or undefined when the file does not exist. */
 function readBaseline(file) {
 	let text;
 	try {
 		text = fs.readFileSync(file, "utf8");
 	} catch (error) {
-		if (error.code === "ENOENT") return void 0;
+		const { code } = error;
+		if (code === "ENOENT" || code === "ENOTDIR") return void 0;
 		throw new ConfigError(`Could not read baseline ${file}: ${error.message}`);
 	}
 	const invalid = (why) => new ConfigError(`${file} is not a valid onsystem baseline (${why}). Fix it, or delete it and run check --update-baseline.`);
@@ -8981,6 +10961,8 @@ function readBaseline(file) {
 	}
 	if (!isObject(parsed) || parsed.version !== 1) throw invalid("expected \"version\": 1");
 	if (!isObject(parsed.files)) throw invalid("\"files\" must be an object");
+	if (parsed.onsystem !== void 0 && typeof parsed.onsystem !== "string") throw invalid("\"onsystem\" must be a version string");
+	if (parsed.rules !== void 0 && !(Array.isArray(parsed.rules) && parsed.rules.every((rule) => typeof rule === "string"))) throw invalid("\"rules\" must be a list of rule ids");
 	const entries = /* @__PURE__ */ new Map();
 	for (const [name, rules] of Object.entries(parsed.files)) {
 		if (!isObject(rules)) throw invalid(`"${name}" must map rules to findings`);
@@ -8996,7 +10978,11 @@ function readBaseline(file) {
 		}
 		entries.set(name, byRule);
 	}
-	return entries;
+	return {
+		entries,
+		onsystem: parsed.onsystem,
+		rules: parsed.rules ? new Set(parsed.rules) : void 0
+	};
 }
 /**
 * Removes the findings the baseline accepts for `file`. Within a file and
@@ -9057,6 +11043,71 @@ function updateBaseline(previous, checked, root, disabled = /* @__PURE__ */ new
 	}
 	return next;
 }
+/**
+* The rules an update records as run: those that `ran` now, those the previous baseline lists,
+* and those with entries in `next`, since a rule with recorded findings ran when they were
+* recorded. Undefined, as in a baseline written before onsystem recorded rules, when the
+* previous baseline does not list them and the update may have left out files it covers: the
+* run checked only a folder or files below the root (`wholeRoot` false), or `next` keeps
+* entries of files the run did not check. Whatever ran over those files was not recorded, so a
+* list built from this run could say a rule did not run where it did.
+*/
+function rulesRun(previous, next, checked, ran, wholeRoot) {
+	if (previous && !previous.rules && (!wholeRoot || [...next.keys()].some((file) => !checked.has(file)))) return;
+	const known = new Set(RULE_IDS);
+	const rules = /* @__PURE__ */ new Set([...previous?.rules ?? [], ...ran]);
+	for (const byRule of next.values()) for (const rule of byRule.keys()) if (known.has(rule)) rules.add(rule);
+	return [...rules];
+}
+/**
+* The baseline without the entries a run over `checked` (file → its findings) shows no longer
+* occur: a checked file keeps at most as many of each finding as it still has, plus its entries
+* for `disabled` rules, and files the run did not check keep theirs while they still exist under
+* `root`. Nothing is added, so a new finding stays new, unlike with `updateBaseline`.
+*/
+function pruneBaseline(previous, checked, root, disabled) {
+	const next = /* @__PURE__ */ new Map();
+	for (const [file, rules] of previous) {
+		const diagnostics = checked.get(file);
+		if (!diagnostics) {
+			if (fs.existsSync(path.resolve(root, file))) next.set(file, rules);
+			continue;
+		}
+		const found = /* @__PURE__ */ new Map();
+		for (const diagnostic of diagnostics) {
+			const id = `${diagnostic.ruleId}\0${findingKey(diagnostic)}`;
+			found.set(id, (found.get(id) ?? 0) + 1);
+		}
+		const off = disabled(file);
+		const kept = /* @__PURE__ */ new Map();
+		for (const [rule, sources] of rules) {
+			if (off.has(rule)) {
+				kept.set(rule, sources);
+				continue;
+			}
+			const left = /* @__PURE__ */ new Map();
+			for (const [source, count] of sources) {
+				const still = Math.min(count, found.get(`${rule}\0${source}`) ?? 0);
+				if (still) left.set(source, still);
+			}
+			if (left.size) kept.set(rule, left);
+		}
+		if (kept.size) next.set(file, kept);
+	}
+	return next;
+}
+/**
+* New findings of rules that did not run when the baseline was recorded, counted by rule: a
+* rule that starts to run (an upgrade that finds the tokens it needs, or a rule turned on)
+* reports what was in the code all along. Empty when the baseline does not say which rules ran.
+*/
+function unrecordedRules(baseline, diagnostics) {
+	const counts = /* @__PURE__ */ new Map();
+	if (!baseline.rules) return counts;
+	const rules = new Set(RULE_IDS);
+	for (const { ruleId } of diagnostics) if (rules.has(ruleId) && !baseline.rules.has(ruleId)) counts.set(ruleId, (counts.get(ruleId) ?? 0) + 1);
+	return counts;
+}
 function countBaseline(entries) {
 	let findings = 0;
 	for (const rules of entries.values()) for (const sources of rules.values()) for (const count of sources.values()) findings += count;
@@ -9065,8 +11116,11 @@ function countBaseline(entries) {
 		files: entries.size
 	};
 }
-/** Writes the baseline sorted at every level, so it diffs cleanly in review. */
-function writeBaseline(file, entries) {
+/**
+* Writes the baseline sorted at every level, so it diffs cleanly in review, with the onsystem
+* version and the rules that ran when given, and creates its folder.
+*/
+function writeBaseline(file, entries, about = {}) {
 	const sorted = (map) => [...map].sort(([a], [b]) => a < b ? -1 : a > b ? 1 : 0);
 	const files = {};
 	for (const [name, rules] of sorted(entries)) {
@@ -9080,9 +11134,12 @@ function writeBaseline(file, entries) {
 	}
 	const baseline = {
 		version: 1,
+		...about.onsystem === void 0 ? {} : { onsystem: about.onsystem },
+		...about.rules === void 0 ? {} : { rules: [...new Set(about.rules)].sort() },
 		files
 	};
 	try {
+		fs.mkdirSync(path.dirname(file), { recursive: true });
 		fs.writeFileSync(file, `${JSON.stringify(baseline, null, 2)}\n`);
 	} catch (error) {
 		throw new ConfigError(`Could not write baseline ${file}: ${error.message}`);
@@ -9096,7 +11153,7 @@ function isObject(value) {
 var name = "onsystem";
 //#endregion
 //#region src/version.ts
-const VERSION = "0.6.0";
+const VERSION = "0.8.0";
 const NAME = name;
 //#endregion
 //#region src/lint/sarif.ts
@@ -9209,6 +11266,10 @@ function fingerprint$1(uri, identity, occurrence) {
 }
 //#endregion
 //#region src/lint/format.ts
+/** From this many findings, `pretty` ends with a summary: more than a screen to scroll back through. */
+const SUMMARY_FROM = 50;
+/** The palette classes the summary lists. */
+const TOP_CLASSES = 10;
 const color = (code) => (text, enabled) => enabled ? `\u001b[${code}m${text}\u001b[39m` : text;
 const red = color(31);
 const yellow = color(33);
@@ -9252,6 +11313,7 @@ function formatDiagnostics(results, format, options = {}) {
 		lines.push("");
 	}
 	const total = errors + warnings;
+	if (total >= SUMMARY_FROM) lines.push(...summarize(results), "");
 	const notes = [options.baselined === void 0 ? "" : `${options.baselined.toLocaleString("en-US")} in the baseline`, ...options.notes ?? []].filter(Boolean);
 	const aside = notes.length ? ` (${notes.join("; ")})` : "";
 	const flagged = results.filter((r) => r.diagnostics.length).length;
@@ -9260,6 +11322,42 @@ function formatDiagnostics(results, format, options = {}) {
 	if (fixedHint) lines.push(dim(fixedHint, useColor));
 	return lines.join("\n");
 }
+/**
+* What a long run's findings add up to: the count per rule, as `init`'s dry run gives it, and
+* the Tailwind palette classes found most, each with the token to use. On a palette-heavy app
+* (Dub's web app, over 14,000 lines of findings) that reads as a plan for moving to the tokens.
+*/
+function summarize(results) {
+	const byRule = /* @__PURE__ */ new Map();
+	const pairs = /* @__PURE__ */ new Map();
+	const paletteFiles = /* @__PURE__ */ new Set();
+	let palette = 0;
+	for (const result of results) for (const d of result.diagnostics) {
+		byRule.set(d.ruleId, (byRule.get(d.ruleId) ?? 0) + 1);
+		if (d.ruleId !== "no-hardcoded-color") continue;
+		const utility = parseUtility(d.source);
+		if (!paletteColor(utility.base)) continue;
+		palette++;
+		paletteFiles.add(result.file);
+		const to = (d.fix?.length === 1 ? d.fix[0]?.text : void 0) ?? (d.suggestion && /^[^\s"'=]+$/.test(d.suggestion) ? withBase(utility, d.suggestion) : d.suggestion);
+		const nearest = d.message.includes(". Nearest token ") ? " (nearest token)" : "";
+		const text = `${d.source} → ${to ? `${to}${nearest}` : "no close token"}`;
+		const pair = pairs.get(text) ?? {
+			text,
+			count: 0
+		};
+		pair.count++;
+		pairs.set(text, pair);
+	}
+	const lines = [`By rule: ${[...byRule].sort((a, b) => b[1] - a[1] || a[0].localeCompare(b[0])).map(([rule, n]) => `${rule} ${n.toLocaleString("en-US")}`).join(", ")}.`];
+	const top = [...pairs.values()].sort((a, b) => b.count - a.count || a.text.localeCompare(b.text)).slice(0, TOP_CLASSES);
+	if (top.length) {
+		const width = Math.max(...top.map((pair) => pair.count.toLocaleString("en-US").length));
+		lines.push(`Tailwind palette classes: ${palette.toLocaleString("en-US")} in ${plural$1(paletteFiles.size, "file")}. The most common, with the token to use:`, ...top.map((pair) => `  ${pair.count.toLocaleString("en-US").padStart(width)}× ${pair.text}`));
+	}
+	return lines;
+}
+/** Escapes a workflow command's message, so `%` and line breaks reach GitHub as written. */
 function escapeData(value) {
 	return value.replace(/%/g, "%25").replace(/\r/g, "%0D").replace(/\n/g, "%0A");
 }
@@ -9763,6 +11861,55 @@ function searchComponents(index, query, limit = 5) {
 	}));
 }
 //#endregion
+//#region src/tokens/imports.ts
+/** Enough stylesheets for a theme split over files, without reading a whole design system. */
+const MAX_IMPORTED = 50;
+/**
+* The specifiers a stylesheet `@import`s: `@import "./theme.css" layer(base)`,
+* `@import url(theme.css)`, `@import "@acme/theme"`. Empty for CSS that does not parse.
+*/
+function cssImports(css) {
+	let root;
+	try {
+		root = postcss.parse(css);
+	} catch {
+		return [];
+	}
+	const out = [];
+	for (const node of root.nodes) {
+		if (node.type !== "atrule" || node.name !== "import") continue;
+		const match = /^\s*(?:url\(\s*)?(?:"([^"]+)"|'([^']+)'|([^\s"')]+)\s*\))/.exec(node.params);
+		const specifier = match?.[1] ?? match?.[2] ?? match?.[3];
+		if (specifier) out.push(specifier);
+	}
+	return out;
+}
+/**
+* The stylesheets `files` import, and the ones those import in turn, each once and in the
+* order they are imported. The files themselves are not repeated.
+*/
+function importedStylesheets(files, resolve) {
+	const seen = new Set(files);
+	const out = [];
+	const visit = (file) => {
+		let text;
+		try {
+			text = fs.readFileSync(file, "utf8");
+		} catch {
+			return;
+		}
+		for (const specifier of cssImports(text)) {
+			const target = resolve(specifier, file);
+			if (!target || seen.has(target) || out.length >= MAX_IMPORTED) continue;
+			seen.add(target);
+			out.push(target);
+			visit(target);
+		}
+	};
+	for (const file of files) visit(file);
+	return out;
+}
+//#endregion
 //#region src/util/log.ts
 const stderrLogger = {
 	info: (message) => process.stderr.write(`[onsystem] ${message}\n`),
@@ -9784,18 +11931,46 @@ var DesignSystem = class {
 	searchIndex;
 	/**
 	* The components the tools offer: all of them, except a library's (MUI's) where the project
-	* has its own of that name, a wrapper the team means to be used. The rules still check code
-	* that imports the library's directly against the library's.
+	* has its own of that name, a wrapper the team means to be used, and the helpers in a
+	* registry folder's `lib/` (signoff-ui's `Img` and icons). The rules still check code that
+	* imports either directly against them.
 	*/
 	offered;
+	/** The design systems the rules rank, with the registry folders a config lists. */
+	sources;
 	constructor(model, config) {
 		this.model = model;
 		this.config = config;
-		this.lint = new LintTarget(model, config, new ModuleResolver(config));
+		this.sources = rankedSources(config);
+		this.lint = new LintTarget(model, this.sources === config.designSystems ? config : {
+			...config,
+			designSystems: this.sources
+		}, new ModuleResolver(config));
 		const own = new Set(model.components.filter((c) => !c.library).flatMap((c) => [c.name, ...c.aliases]));
-		this.offered = model.components.filter((c) => !c.library || !(own.has(c.name) || c.parent !== void 0 && own.has(c.parent)));
+		this.offered = model.components.filter((c) => (!c.library || !(own.has(c.name) || c.parent !== void 0 && own.has(c.parent))) && !this.registryHelper(c));
 		this.searchIndex = buildSearchIndex(this.offered);
 	}
+	/**
+	* The shadcn registry a component was copied from (`@signoff-ui`), when its folder is one
+	* components.json names: a read-only design system, whose code is the registry's.
+	*/
+	registryOf(component) {
+		if (component.library) return void 0;
+		const file = component.source.file;
+		for (const source of this.sources ?? []) {
+			if (!source.registry) continue;
+			const folder = source.components.find((g) => matchesGlob(file, g))?.replace(/\/\*\*\/\*\.\{tsx,jsx\}$/, "").replace(/\\(.)/g, "$1");
+			if (folder !== void 0) return {
+				registry: source.registry,
+				folder
+			};
+		}
+	}
+	/** A component in a registry folder's `lib/`: an internal of its items, not one of them. */
+	registryHelper(component) {
+		const from = this.registryOf(component);
+		return from !== void 0 && component.source.file.startsWith(`${from.folder}/lib/`);
+	}
 	get root() {
 		return this.model.root;
 	}
@@ -9881,17 +12056,125 @@ var DesignSystem = class {
 	}
 };
 const CONFIGURATION_DOCS = "https://onsystem.vercel.app/docs/configuration";
+/**
+* The design systems the rules rank, first to last: zero config's, or, for a config that lists
+* the folders `npx shadcn add` copies the registries of components.json into (as `init` writes
+* them), its other components first and each such folder after them, read-only, as zero config
+* reads them.
+*/
+function rankedSources(config) {
+	if (config.designSystems || !config.configured) return config.designSystems;
+	const listed = registryFolders(config.root, config.tsconfig).filter((f) => config.components.some((g) => matchesGlob(`${f.dir}/index.tsx`, g)));
+	if (!listed.length) return void 0;
+	const inRegistry = (glob) => {
+		const base = globBase(glob);
+		return listed.some((f) => base === f.dir || base.startsWith(`${f.dir}/`));
+	};
+	return [{
+		source: "components",
+		components: config.components.filter((g) => !inRegistry(g)),
+		imports: 0
+	}, ...listed.map((f) => ({
+		source: `${f.dir} (${f.namespace})`,
+		components: [f.glob],
+		imports: 0,
+		registry: f.namespace
+	}))];
+}
 /** `border-ring` → token `ring`, for color utilities a token's usage list does not spell out. */
 function matchUtility(base, tokens) {
 	const key = COLOR_UTILITY.exec(base)?.[1];
 	return key ? tokens.find((t) => t.category === "color" && t.tailwind === key) : void 0;
 }
 /**
+* Where the design system's files may really be, links resolved: the project, the workspace
+* and the git repository it is in, the folder a design-system package's config stays in, and
+* packages reached through a `node_modules` folder in those, which pnpm can link from a store
+* elsewhere. A glob follows links, and a config can name `../` and absolute paths, so without
+* this a cloned repository could have the tools return any file on the machine
+* (`docs/credentials.md` linked to `~/.aws/credentials`).
+*/
+var Containment = class {
+	/** The folders, as given. */
+	dirs;
+	/** The same folders, links resolved. */
+	roots;
+	reals = /* @__PURE__ */ new Map();
+	/** Files left out, as they were found. */
+	outside = /* @__PURE__ */ new Set();
+	constructor(config) {
+		const around = [
+			workspaceRootOf(config.root),
+			repositoryOf(config.root),
+			config.base,
+			config.designSystemPackage?.boundary
+		].filter((dir) => dir !== void 0 && !isHomeOrAbove(dir));
+		this.dirs = unique([config.root, ...around].map((dir) => path.resolve(dir)));
+		this.roots = Promise.all(this.dirs.map((dir) => this.real(dir))).then((reals) => reals.filter((real) => real !== void 0));
+	}
+	/** Where `file` really is, links resolved; undefined when it is not there. */
+	real(file) {
+		let real = this.reals.get(file);
+		if (!real) {
+			real = fsp.realpath(file).catch(() => void 0);
+			this.reals.set(file, real);
+		}
+		return real;
+	}
+	/**
+	* `files` whose real path is inside, in their order, one path per real file: the shortest,
+	* so a folder that links back to its parent does not add its files again.
+	*/
+	async filter(files) {
+		const roots = await this.roots;
+		const reals = await Promise.all(files.map((file) => this.real(file)));
+		const kept = /* @__PURE__ */ new Map();
+		files.forEach((file, i) => {
+			const real = reals[i];
+			if (real === void 0) return;
+			if (!(roots.some((root) => isInside(root, real)) || isInstalled(real) && this.inNodeModules(file))) {
+				this.outside.add(file);
+				return;
+			}
+			const previous = kept.get(real);
+			if (previous === void 0 || file.length < previous.length) kept.set(real, file);
+		});
+		return [...kept.values()];
+	}
+	/**
+	* Whether `file`, as found, is in a package in a `node_modules` folder of the project, the
+	* workspace or the repository, as one pnpm links from its store is. A link elsewhere in the
+	* project to another project's `node_modules` is not.
+	*/
+	inNodeModules(file) {
+		const found = path.resolve(file);
+		return this.dirs.some((dir) => isInside(dir, found) && isInstalled(path.relative(dir, found)));
+	}
+};
+/** Whether a path is a file of a package in `node_modules`, not of `.cache` or `.bin` there. */
+function isInstalled(file) {
+	const parts = file.split(/[\\/]/);
+	const at = parts.lastIndexOf("node_modules");
+	return at !== -1 && at < parts.length - 2 && !(parts[at + 1] ?? ".").startsWith(".");
+}
+/** The nearest folder at or above `dir` with a `.git`: the repository it is in. */
+function repositoryOf(dir) {
+	for (let current = path.resolve(dir);; current = path.dirname(current)) {
+		if (fs.existsSync(path.join(current, ".git"))) return current;
+		if (current === path.dirname(current)) return void 0;
+	}
+}
+/** What `inspect` and the server's log say about files that lead outside the project. */
+function outsideWarning(root, files) {
+	const shown = files.map((file) => relativePath(root, file)).sort();
+	return `Not read: ${shown.length === 1 ? shown[0] ?? "" : shown.length <= 5 ? `${shown.slice(0, -1).join(", ")} and ${shown.at(-1) ?? ""}` : `${shown.slice(0, 5).join(", ")} and ${shown.length - 5} more`} ${shown.length === 1 ? "leads" : "lead"} outside the project. Links resolved, the design system's files must be in the project, the workspace or git repository it is in, a package installed in their node_modules, or a package that declares its config (run onsystem init in it).`;
+}
+/**
 * Absolute paths matching `patterns` under the root. `node_modules` is skipped
 * even when `exclude` replaces the defaults, except by patterns that name it
-* (tokens published as a package).
+* (tokens published as a package). Files that lead outside the project are left out.
 */
-async function find(config, patterns) {
+async function find(config, patterns, contain = new Containment(config)) {
 	const options = {
 		cwd: config.root,
 		absolute: true,
@@ -9901,7 +12184,7 @@ async function find(config, patterns) {
 	const named = patterns.filter((p) => p.includes("node_modules"));
 	const outside = patterns.filter((p) => !p.includes("node_modules") && p.startsWith("../"));
 	const rest = patterns.filter((p) => !p.includes("node_modules") && !p.startsWith("../"));
-	return unique((await Promise.all([
+	const found = await Promise.all([
 		rest.length ? glob(rest, {
 			...options,
 			ignore: unique(["**/node_modules/**", ...exclude])
@@ -9923,7 +12206,8 @@ async function find(config, patterns) {
 				])
 			});
 		})
-	])).flat()).sort();
+	]);
+	return (await contain.filter(unique(found.flat()))).sort();
 }
 /** The design system's own component files, as absolute paths. */
 function componentFiles(config) {
@@ -9934,28 +12218,51 @@ async function tokenFiles(config) {
 	return (await resolveFiles(config)).tokens.map((t) => t.file);
 }
 async function resolveFiles(config) {
-	const components = await find(config, config.components);
-	const docs = await find(config, config.docs);
+	const contain = new Containment(config);
+	const components = await find(config, config.components, contain);
+	const docs = await find(config, config.docs, contain);
 	const tokens = [];
 	const seen = /* @__PURE__ */ new Set();
+	const isNew = async (file) => {
+		const real = await contain.real(file) ?? path.resolve(file);
+		if (seen.has(real)) return false;
+		seen.add(real);
+		return true;
+	};
 	const add = async (sources) => {
-		for (const source of sources) for (const file of await find(config, [source.path])) {
-			if (seen.has(file)) continue;
-			seen.add(file);
-			tokens.push({
-				file,
-				prefix: source.prefix
-			});
-		}
+		for (const source of sources) for (const file of await find(config, [source.path], contain)) if (await isNew(file)) tokens.push({
+			file,
+			prefix: source.prefix
+		});
 	};
 	await add(config.tokens.filter((t) => !t.fallback));
+	if (config.tokensDetected) {
+		const found = tokens.map((t) => path.resolve(t.file));
+		for (const file of await contain.filter(linkedStylesheets(config, found))) if (await isNew(file)) tokens.push({ file });
+	}
 	if (!tokens.length) await add(config.tokens.filter((t) => t.fallback));
 	return {
 		components,
 		tokens,
-		docs
+		docs,
+		outside: [...contain.outside]
 	};
 }
+/**
+* The stylesheets zero config reads besides the ones it found: those they `@import` (by a
+* path, or from a workspace package: `@import "@acme/theme"`), then those that set the colors
+* a Tailwind v3 config maps, in the workspace package of a shared preset it reads (Dub's
+* `@dub/tailwind-config` and its `themes.css`), with what they import. May repeat a file.
+*/
+function linkedStylesheets(config, found) {
+	const resolve = stylesheetResolver(config.root);
+	const preset = config.tailwindConfig ? presetStylesheets(readTailwindColors(config.tailwindConfig, presetResolver(config.root)), config.root) : [];
+	return [
+		...importedStylesheets(found.filter((f) => f.endsWith(".css")), resolve),
+		...preset,
+		...importedStylesheets(preset, resolve)
+	];
+}
 /** Size and mtime of files, each read once per build. */
 var FileStats = class {
 	root;
@@ -9977,11 +12284,11 @@ var FileStats = class {
 /**
 * Everything that, when changed, invalidates the cached model: the tracked
 * files, `dependencies` (project files the components import and the tsconfig
-* chain, known after extraction), the lockfile and the config.
+* chain, known after extraction), the lockfile, the config and the files left out.
 */
 async function cacheKey(config, files, dependencies, stats = new FileStats(config.root)) {
 	const extra = [
-		"tsconfig.json",
+		...PROJECT_CONFIG_FILES,
 		"package.json",
 		"pnpm-lock.yaml",
 		"package-lock.json",
@@ -9996,9 +12303,11 @@ async function cacheKey(config, files, dependencies, stats = new FileStats(confi
 		...dependencies
 	]);
 	const { rules: _rules, overrides: _overrides, ...relevant } = config;
+	const outside = files.outside.map((file) => relativePath(config.root, file)).sort();
 	return createHash("sha256").update(JSON.stringify({
 		version: VERSION,
 		config: relevant,
+		outside,
 		stats: await stats.of(all)
 	})).digest("hex");
 }
@@ -10047,6 +12356,7 @@ async function buildModel(config, options = {}) {
 	});
 	const docs = [];
 	const warnings = [...extracted.warnings];
+	if (files.outside.length) warnings.push(outsideWarning(config.root, files.outside));
 	for (const file of files.docs) try {
 		docs.push(parseDoc(await fsp.readFile(file, "utf8"), relativePath(config.root, file)));
 	} catch (error) {
@@ -10058,11 +12368,11 @@ async function buildModel(config, options = {}) {
 	const libraries = await loadLibraries(config);
 	warnings.push(...libraries.warnings);
 	tokens.tokens.push(...libraries.tokens);
-	const tailwind = config.tailwindConfig ? readTailwindColors(config.tailwindConfig, moduleResolver(config.root)) : void 0;
-	if (tailwind) applyTailwindColors(tokens.tokens, tailwind.colors);
+	const tailwind = config.tailwindConfig ? readTailwindColors(config.tailwindConfig, presetResolver(config.root)) : void 0;
+	if (tailwind) applyTailwindColors(tokens.tokens, tailwind.colors, tailwind.rgb);
 	let radiiFiles = [];
 	if (config.tailwindConfig) {
-		const radii = readTailwindRadii(config.tailwindConfig, moduleResolver(config.root));
+		const radii = readTailwindRadii(config.tailwindConfig, presetResolver(config.root));
 		applyTailwindRadii(tokens.tokens, radii.radii, config.tailwindConfig);
 		radiiFiles = radii.files;
 	}
@@ -10191,7 +12501,7 @@ var DesignSystemHost = class {
 			configFile,
 			designSystemPackage && path.join(designSystemPackage.dir, "package.json"),
 			...DETECTION_FILES.map((f) => path.join(root, f)),
-			path.resolve(root, tsconfig ?? "tsconfig.json"),
+			...tsconfig ? [path.resolve(root, tsconfig)] : PROJECT_CONFIG_FILES.map((f) => path.join(root, f)),
 			...readProjectConfig(root, tsconfig).configFiles.filter(isProjectFile)
 		].filter((f) => Boolean(f)).map((f) => path.resolve(f));
 		for (const file of files) this.watchedFiles.add(file);
@@ -10285,4 +12595,4 @@ var DesignSystemHost = class {
 	}
 };
 //#endregion
-export { findVariantDefinitions as $, toDtcg as A, DEFAULT_DOCS as B, updateBaseline as C, loadTokens as D, TokenIndex as E, attachDocs as F, RULE_IDS as G, DEFAULT_TEST_EXCLUDE as H, parseDoc as I, hasOwnConfig as J, configJsonSchema as K, extractComponents as L, parseDtcgTokens as M, parseDesignMd as N, mergeTokens as O, parseCssTokens as P, formatPx as Q, CONFIG_FILES as R, readBaseline as S, RULES as T, DEFAULT_TEST_FOLDERS as U, DEFAULT_SEVERITY as V, LEGACY_CONFIG_FILES as W, loadConfigWith as X, loadConfig as Y, rulesFor as Z, VERSION as _, relativePath as _t, fingerprint as a, detectProject as at, applyBaseline as b, silentLogger as c, isWorkspaceRoot as ct, searchComponents as d, closest as dt, LIBRARY_IDS as et, applyFixes as f, plural$1 as ft, NAME as g, matchesGlob as gt, formatDiagnostics as h, isInside as ht, componentFiles as i, declaredConfig as it, TOKEN_CATEGORIES as j, toDesignMd as k, stderrLogger as l, workspacePackageDirs as lt, uncheckedNotice as m, unique as mt, DesignSystemHost as n, PACKAGE_FIELD as nt, loadDesignSystem as o, findDesignSystemPackage as ot, checkSource as p, truncate as pt, defineConfig as q, buildModel as r, PackageFinder as rt, tokenFiles as s, isDesignSystemName as st, DesignSystem as t, libraryAdapter as tt, buildSearchIndex as u, workspacePatterns as ut, BASELINE_FILE as v, toPosix as vt, writeBaseline as w, countBaseline as x, LEGACY_BASELINE_FILE as y, ConfigError as z };
+export { hasOwnConfig as $, TokenIndex as A, parseDoc as B, pruneBaseline as C, isInside as Ct, updateBaseline as D, defaultProjectConfig as Dt, unrecordedRules as E, toPosix as Et, TOKEN_CATEGORIES as F, DEFAULT_SEVERITY as G, CONFIG_FILES as H, parseDtcgTokens as I, LEGACY_CONFIG_FILES as J, DEFAULT_TEST_EXCLUDE as K, parseDesignMd as L, mergeTokens as M, toDesignMd as N, writeBaseline as O, readProjectConfig as Ot, toDtcg as P, excludedBy as Q, parseCssTokens as R, countBaseline as S, SCRIPT_FILE$1 as St, rulesRun as T, relativePath as Tt, ConfigError as U, extractComponents as V, DEFAULT_DOCS as W, configJsonSchema as X, RULE_IDS as Y, defineConfig as Z, NAME as _, workspacePatterns as _t, fingerprint as a, LIBRARIES as at, LEGACY_BASELINE_FILE as b, truncate as bt, silentLogger as c, notReadYet as ct, searchComponents as d, declaredConfig as dt, loadConfig as et, applyFixes as f, detectProject as ft, formatDiagnostics as g, workspacePackageDirs as gt, escapeData as h, isWorkspaceRoot as ht, componentFiles as i, findVariantDefinitions as it, loadTokens as j, RULES as k, stderrLogger as l, PACKAGE_FIELD as lt, uncheckedNotice as m, isDesignSystemName as mt, DesignSystemHost as n, rulesFor as nt, loadDesignSystem as o, LIBRARY_IDS as ot, checkSource as p, findDesignSystemPackage as pt, DEFAULT_TEST_FOLDERS as q, buildModel as r, formatPx as rt, tokenFiles as s, libraryTitle as st, DesignSystem as t, loadConfigWith as tt, buildSearchIndex as u, PackageFinder as ut, VERSION as v, closest as vt, readBaseline as w, matchesGlob as wt, applyBaseline as x, unique as xt, BASELINE_FILE as y, plural$1 as yt, attachDocs as z };