onsystem 0.6.0 → 0.7.0

package/dist/{design-system-A3pRX3Ka.js → design-system-C4bhqLLw.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 os from "node:os";
 import { clampChroma, colorsNamed, converter, differenceEuclidean, formatHex, parse } 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,
@@ -116,6 +146,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("/");
@@ -778,7 +826,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);
@@ -1090,6 +1138,86 @@ 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). Installed packages (`tailwindcss`) and URLs resolve to nothing.
+*/
+function stylesheetResolver(root) {
+	const packages = new PackageFinder(root);
+	const stylesheet = (file) => [file, `${file}.css`].find((f) => f.endsWith(".css") && !/[\\/]node_modules[\\/]/.test(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));
+		if (relative || specifier.startsWith(".")) return relative;
+		const name = packageName(specifier);
+		const dir = name ? packages.find(name) : void 0;
+		if (!name || !dir) return void 0;
+		const subpath = specifier.slice(name.length + 1);
+		const style = readJson$1(path.join(dir, "package.json"))?.style;
+		return exportedFile(dir, subpath ? `./${subpath}` : ".", (f) => f.endsWith(".css")) ?? (subpath ? stylesheet(path.join(dir, subpath)) : stylesheet(path.resolve(dir, typeof style === "string" ? style : "index.css")));
+	};
+}
+/**
+* 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) {
+	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
+			});
+		}
+	}
+	matches.sort((a, b) => b.rank - a.rank);
+	for (const { middle, value } of matches) for (const target of exportTargets(value)) {
+		const file = path.resolve(dir, target.replaceAll("*", middle));
+		if (isInside(dir, file) && accept(file) && isFile(file)) return file;
+	}
+}
+/** Every target of an export condition map, in order, but its types. */
+function exportTargets(value) {
+	if (typeof value === "string") return [value];
+	if (Array.isArray(value)) return value.flatMap(exportTargets);
+	if (value && typeof value === "object") return Object.entries(value).flatMap(([condition, nested]) => condition === "types" ? [] : exportTargets(nested));
+	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
@@ -1305,24 +1433,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 +1531,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 +1540,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 +1580,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 +1659,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 +1684,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 +1784,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 +2146,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 +2206,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 +2487,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 +2542,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 +2558,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 +2570,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 +2583,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 +2694,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 +2745,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 +2760,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 {
@@ -2767,6 +3059,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 +3070,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,
@@ -3118,8 +3412,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 +3580,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 +3593,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 +3603,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 +3675,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 +3797,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 +3845,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(" | ");
 		}
@@ -4583,7 +4940,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 +4967,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" };
@@ -5596,7 +5953,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 +6108,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 +6148,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 +6338,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 +6363,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 +6384,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 +6515,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 +6637,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 +7086,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 +7254,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 +7288,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 +7377,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 +7464,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 +7958,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
@@ -7969,7 +8386,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 +8419,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 +8456,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 +8568,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 +8677,16 @@ const VALUE_GROUPS = [
 		"href",
 		"inline"
 	],
+	[
+		"xs",
+		"xsmall",
+		"x-small",
+		"extra-small"
+	],
 	[
 		"sm",
 		"small",
 		"s",
-		"xs",
 		"compact",
 		"tiny"
 	],
@@ -8200,6 +8705,13 @@ const VALUE_GROUPS = [
 		"l",
 		"big"
 	],
+	[
+		"xl",
+		"xlarge",
+		"x-large",
+		"extra-large",
+		"huge"
+	],
 	[
 		"icon",
 		"iconOnly",
@@ -8208,14 +8720,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 +8800,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 +8809,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 +8819,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",
@@ -8474,14 +9223,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 +9239,58 @@ const iconButtonAccessibleName = {
 };
 //#endregion
 //#region src/lint/rules/hardcoded.ts
+/** 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 +9298,94 @@ 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 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
-				});
+		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);
+			for (const token of splitClasses(classString.text, classString.start)) {
+				const utility = parseUtility(token.value);
+				const listed = {
+					value: token.value,
+					prefix: tokenColorPrefix(utility, tokens.colorKeys)
+				};
+				list.push(listed);
+				if (allow.has(token.value.toLowerCase())) continue;
+				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;
+					listed.color = literal.color;
+					listed.prefix = whole ? utility.prefix : void 0;
+					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 || allow.has(literal.text.toLowerCase())) continue;
+					listed.color = literal.color;
+					listed.prefix = whole ? property.prefix : void 0;
+					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.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
+					});
+				}
 			}
 		}
+		for (const list of lists.values()) {
+			keepStatesApart(list);
+			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 +9408,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 +9437,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 +9446,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 +9459,53 @@ 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;
+	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 (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 ? [{
+			range: [input.start, input.end],
+			text: edit
+		}] : void 0,
+		severity: noHue ? "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 +9522,237 @@ 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);
+}
+/**
+* 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;
+		}
 	}
-	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
+}
+/**
+* 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,6 +9818,7 @@ 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
@@ -8791,6 +9852,7 @@ 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}"`;
@@ -8963,13 +10025,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 +10044,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 +10061,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 +10126,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 +10199,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 +10217,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 +10236,7 @@ function isObject(value) {
 var name = "onsystem";
 //#endregion
 //#region src/version.ts
-const VERSION = "0.6.0";
+const VERSION = "0.7.0";
 const NAME = name;
 //#endregion
 //#region src/lint/sarif.ts
@@ -9260,6 +10400,7 @@ function formatDiagnostics(results, format, options = {}) {
 	if (fixedHint) lines.push(dim(fixedHint, useColor));
 	return lines.join("\n");
 }
+/** 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 +10904,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`),
@@ -9887,11 +11077,94 @@ function matchUtility(base, tokens) {
 	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 +11174,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 +11196,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 +11208,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 +11274,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 +11293,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 +11346,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 +11358,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 +11491,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 +11585,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 { loadConfig as $, TokenIndex as A, parseDoc as B, pruneBaseline as C, relativePath as Ct, updateBaseline as D, unrecordedRules as E, 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, toDtcg as P, hasOwnConfig as Q, parseCssTokens as R, countBaseline as S, matchesGlob as St, rulesRun as T, defaultProjectConfig as Tt, ConfigError as U, extractComponents as V, DEFAULT_DOCS as W, configJsonSchema as X, RULE_IDS as Y, defineConfig as Z, NAME as _, closest as _t, fingerprint as a, LIBRARY_IDS as at, LEGACY_BASELINE_FILE as b, unique as bt, silentLogger as c, PACKAGE_FIELD as ct, searchComponents as d, detectProject as dt, loadConfigWith as et, applyFixes as f, findDesignSystemPackage as ft, formatDiagnostics as g, workspacePatterns as gt, escapeData as h, workspacePackageDirs as ht, componentFiles as i, LIBRARIES as it, loadTokens as j, RULES as k, stderrLogger as l, PackageFinder as lt, uncheckedNotice as m, isWorkspaceRoot as mt, DesignSystemHost as n, formatPx as nt, loadDesignSystem as o, libraryTitle as ot, checkSource as p, isDesignSystemName as pt, DEFAULT_TEST_FOLDERS as q, buildModel as r, findVariantDefinitions as rt, tokenFiles as s, notReadYet as st, DesignSystem as t, rulesFor as tt, buildSearchIndex as u, declaredConfig as ut, VERSION as v, plural$1 as vt, readBaseline as w, toPosix as wt, applyBaseline as x, isInside as xt, BASELINE_FILE as y, truncate as yt, attachDocs as z };