@parity-app/cli 0.0.0 → 0.2.0

package/dist/{src-rlZNC2MU.mjs → src-CcWc-KsX.mjs}

@@ -1,13 +1,13 @@
-import { S as lengthToPixels, a as applyLibraryEdits, c as isSampleElement, f as parseLibraryEdits, l as isSampleRender, m as renderSlotOf, p as parseLibraryManifest, s as isMadeValue, u as libraryManifestExtension } from "./src-CSeISXoZ.mjs";
-import "./src-uPmBVSsB.mjs";
+import { T as lengthToPixels, a as applyLibraryEdits, c as isSampleElement, f as parseLibraryEdits, l as isSampleRender, m as renderSlotOf, p as parseLibraryManifest, s as isMadeValue, u as libraryManifestExtension, x as collectCustomProperties } from "./src-BZ1p_ip_.mjs";
+import "./src-CAm6EBIK.mjs";
 import { a as publishedVersions, n as packageFile, o as repositoryFiles, r as publishedSource } from "./published-CdXoUgfD.mjs";
 import { createRequire } from "node:module";
 import { mkdir, readFile, readdir, realpath, rm, stat, writeFile } from "node:fs/promises";
-import { basename, dirname, join, posix, relative, resolve, sep } from "node:path";
+import { basename, dirname, extname, join, posix, relative, resolve, sep } from "node:path";
 import { promisify } from "node:util";
 import { createHash } from "node:crypto";
+import { existsSync, realpathSync } from "node:fs";
 import { homedir } from "node:os";
-import { existsSync } from "node:fs";
 import { pathToFileURL } from "node:url";
 import ts from "typescript";
 import "semver";
@@ -105,7 +105,7 @@ function componentOptions(compilerOptions) {
 }
 /** A file only the checker sees, naming React's `ReactNode` so it can tell what React renders. */
 function reactProbe(root) {
-	return slashes(join(root, probeName));
+	return slashes$2(join(root, probeName));
 }
 /** A compiler host that also serves `reactProbe(root)`. */
 function withReactProbe(host, root) {
@@ -113,9 +113,9 @@ function withReactProbe(host, root) {
 	const getSourceFile = host.getSourceFile.bind(host);
 	const fileExists = host.fileExists.bind(host);
 	const readFile = host.readFile.bind(host);
-	host.getSourceFile = (fileName, language, onError, create) => slashes(fileName) === probe ? ts.createSourceFile(fileName, probeText, language, true) : getSourceFile(fileName, language, onError, create);
-	host.fileExists = (fileName) => slashes(fileName) === probe || fileExists(fileName);
-	host.readFile = (fileName) => slashes(fileName) === probe ? probeText : readFile(fileName);
+	host.getSourceFile = (fileName, language, onError, create) => slashes$2(fileName) === probe ? ts.createSourceFile(fileName, probeText, language, true) : getSourceFile(fileName, language, onError, create);
+	host.fileExists = (fileName) => slashes$2(fileName) === probe || fileExists(fileName);
+	host.readFile = (fileName) => slashes$2(fileName) === probe ? probeText : readFile(fileName);
 	return host;
 }
 /**
@@ -169,7 +169,7 @@ function findComponents(scan) {
 		});
 		const existing = seen.get(symbol);
 		if (existing) {
-			const declaredIn = (entry) => slashes(entry) === slashes(declaration.getSourceFile().fileName);
+			const declaredIn = (entry) => slashes$2(entry) === slashes$2(declaration.getSourceFile().fileName);
 			if (scan.defaultExports && declaredIn(from.entry) !== declaredIn(existing.entry) ? declaredIn(from.entry) : preferred(name, existing.name, namespace)) Object.assign(existing, {
 				name,
 				...from
@@ -364,12 +364,12 @@ function defaultExportName(symbol, entry) {
 function shorten(text, length = 60) {
 	return text.length > length ? `${text.slice(0, length - 1)}…` : text;
 }
-function slashes(path) {
+function slashes$2(path) {
 	return path.replaceAll("\\", "/");
 }
 /** A path relative to a folder, with forward slashes. */
 function relativePath(from, to) {
-	return slashes(relative(from, to));
+	return slashes$2(relative(from, to));
 }
 /**
 * A component's own props: those its package declares, not the HTML attributes and React props it passes on, which
@@ -413,7 +413,118 @@ function sampleOf$1(checker, type, name) {
 function hash(text) {
 	return createHash("sha1").update(text).digest("hex").slice(0, 8);
 }
-({ ...ts.sys });
+// ../code/src/tsconfig.ts
+/** The configs a project's TypeScript setup starts from, at its root, in the order they're looked for. */
+const rootConfigNames = ["tsconfig.json", "jsconfig.json"];
+/**
+* Reads a project's tsconfig (or jsconfig) the way TypeScript does, with its own parser: `extends` chains, project
+* references (a Vite app's `tsconfig.json` is often `"files": []` with references to `tsconfig.app.json` and
+* `tsconfig.node.json`) and every `paths` entry. Parity uses its own TypeScript, so a project on a newer one still reads.
+*/
+function readTsconfig(root) {
+	const start = rootConfigNames.map((name) => join(root, name)).find((path) => existsSync(path));
+	const configs = [];
+	const seen = /* @__PURE__ */ new Set();
+	const read = /* @__PURE__ */ new Set();
+	const realRoot = realPath(root);
+	const real = (path) => existsSync(path) ? realPath(path) : join(realPath(dirname(path)), basename(path));
+	const readFile = (path) => read.add(slashes$1(relative(realRoot, real(path))));
+	const visit = (path) => {
+		const key = slashes$1(path);
+		if (seen.has(key)) return;
+		seen.add(key);
+		readFile(path);
+		if (!existsSync(path)) return;
+		const parsed = ts.getParsedCommandLineOfConfigFile(path, {}, host);
+		if (!parsed) return;
+		for (const base of extendedFiles(parsed.options)) readFile(base);
+		configs.push({
+			path: slashes$1(relative(root, path)),
+			files: parsed.fileNames.map(slashes$1),
+			options: parsed.options
+		});
+		for (const reference of parsed.projectReferences ?? []) visit(ts.resolveProjectReferencePath(reference));
+	};
+	if (start) visit(start);
+	const withFiles = configs.filter((config) => config.files.length > 0);
+	const app = withFiles.find((config) => config.options.jsx !== void 0) ?? withFiles[0];
+	return {
+		configs,
+		...app ? { app } : {},
+		read: [...read]
+	};
+}
+/** A path with its links and short names resolved, or as it is when it can't be. */
+function realPath(path) {
+	try {
+		return realpathSync.native(path);
+	} catch {
+		return path;
+	}
+}
+/**
+* The configs a parsed config's `extends` chain read, absolute. TypeScript keeps them on the config's own source file,
+* which `CompilerOptions` types only by its index signature.
+*/
+function extendedFiles(options) {
+	const file = options.configFile;
+	if (typeof file !== "object" || file === null || Array.isArray(file) || !("extendedSourceFiles" in file)) return [];
+	const extended = file.extendedSourceFiles;
+	return Array.isArray(extended) ? extended.filter((path) => typeof path === "string") : [];
+}
+const host = {
+	...ts.sys,
+	onUnRecoverableConfigFileDiagnostic: () => void 0
+};
+function slashes$1(path) {
+	return path.replaceAll("\\", "/");
+}
+// ../code/src/listing.ts
+/** Installed packages, build output, and folders of tests and scratch files. */
+const skippedFolders = /* @__PURE__ */ new Set([
+	"node_modules",
+	"dist",
+	"build",
+	"out",
+	"coverage",
+	"storybook-static",
+	"__tests__",
+	"__mocks__",
+	"e2e",
+	"tmp",
+	"temp"
+]);
+/** Stories, tests, generated and config files sit beside components and export everything but components. */
+const notComponents = /\.(stories|story|test|spec|gen|generated|config)\.[cm]?[jt]sx?$|\.d\.[cm]?ts$/;
+/**
+* The app's files the parse reads, relative to the root: those its tsconfigs include (references followed), else every
+* file under it. App libraries are generated from the same files, with their own extensions.
+*/
+async function appFiles(root, renderer, tsconfig) {
+	const fromConfigs = tsconfig.configs.flatMap((config) => config.files);
+	const files = (fromConfigs.length > 0 ? fromConfigs : await walk(root, renderer.componentExtensions)).map((file) => slashes(relative(root, file))).filter((path) => isCandidate(path, renderer.componentExtensions));
+	const from = fromConfigs.length > 0 ? tsconfig.app?.path ?? tsconfig.configs[0].path : "the project's files";
+	return {
+		files: [...new Set(files)].sort(),
+		from
+	};
+}
+function isCandidate(path, extensions) {
+	if (path.startsWith("../") || path.includes(":")) return false;
+	if (!extensions.includes(extname(path)) || notComponents.test(path)) return false;
+	return !path.split("/").some((part) => skippedFolders.has(part) || part.startsWith("."));
+}
+async function walk(folder, extensions) {
+	const entries = await readdir(folder, { withFileTypes: true }).catch(() => []);
+	return (await Promise.all(entries.map(async (entry) => {
+		const path = join(folder, entry.name);
+		if (entry.isDirectory()) return skippedFolders.has(entry.name) || entry.name.startsWith(".") ? [] : walk(path, extensions);
+		return extensions.includes(extname(entry.name)) ? [path] : [];
+	}))).flat();
+}
+function slashes(path) {
+	return path.replaceAll("\\", "/");
+}
 ts.TypeFlags.Any | ts.TypeFlags.Unknown | ts.TypeFlags.NonPrimitive | ts.TypeFlags.TypeParameter;
 // ../project/src/jsonc.ts
 /** Parses JSON with comments and trailing commas, as tsconfig files allow. Comment markers inside strings are kept. */
@@ -437,6 +548,322 @@ function parseJsonc(text) {
 	}
 	return JSON.parse(output.replace(/,(\s*[}\]])/g, "$1"));
 }
+// ../tokens/src/policy.ts
+/**
+* At-rules that don't pick a theme: a cascade layer only orders rules, and a feature check holds whatever the theme.
+* Any other (`@media`, `@container`, `@scope`…) makes a value conditional, so it's no theme's value.
+*/
+const unconditionalAtRules = /* @__PURE__ */ new Set(["layer", "supports"]);
+/** The theme a `prefers-color-scheme` query picks, when it's the whole query. */
+function colorSchemeOf(atRule) {
+	if (atRule.name !== "media") return void 0;
+	const scheme = /^\(\s*prefers-color-scheme\s*:\s*(dark|light)\s*\)$/i.exec(atRule.prelude)?.[1]?.toLowerCase();
+	if (scheme === "light") return "default";
+	return scheme;
+}
+/** Whether a value comes from a `prefers-color-scheme` block, which a theme's own selector overrides. */
+function fromColorScheme(atRules) {
+	return atRules.some((atRule) => colorSchemeOf(atRule) !== void 0);
+}
+/**
+* The theme a rule's values belong to: `default` for the root, otherwise the theme it names, or none.
+*
+* - The root is `:root`, `:host`, `html` or `:where(:root)` (and, with `tailwindTheme`, Tailwind's `@theme`).
+* - A theme is named by a class or an attribute's value, alone or on the root: `.dark`, `[data-theme="dark"]`,
+*   `:root.dark`, `html[data-theme=dark]` and `:host([data-theme='dark'])` are all `dark`. `light` names the default,
+*   as Parity's own Light mode is the frame without a theme.
+* - `:not(…)` doesn't change the theme, so `:root:not(.dark)` is the root.
+* - In a selector list, a part that's the root makes the rule the root's; otherwise every part must name one theme.
+*
+* Left unsupported, so naming no theme: a selector with a combinator (`.dark .card` styles a component), two names at
+* once (`.dark.contrast`), attribute operators other than `=`, other pseudo-classes, a `:where()` or `:is()` holding a
+* list, and any at-rule besides `@layer` and `@supports` (and the ones the options allow).
+*/
+function themeOfSelector(selector, atRules, options = {}) {
+	let scheme;
+	for (const atRule of atRules) {
+		if (unconditionalAtRules.has(atRule.name) || options.tailwindTheme && atRule.name === "theme") continue;
+		const picked = options.colorScheme ? colorSchemeOf(atRule) : void 0;
+		if (picked === void 0 || scheme !== void 0 && scheme !== picked) return void 0;
+		scheme = picked;
+	}
+	const inTailwindTheme = options.tailwindTheme === true && atRules.at(-1)?.name === "theme";
+	let theme;
+	if (selector.trim() !== "") theme = listTheme(selector);
+	else if (inTailwindTheme) theme = "default";
+	if (theme === void 0 || scheme === void 0) return theme;
+	return theme === "default" || theme === scheme ? scheme : void 0;
+}
+function listTheme(selector) {
+	const themes = splitTopLevel(selector, ",").map((part) => compoundTheme(part.trim()));
+	if (themes.some((theme) => theme?.root && theme.name === void 0)) return "default";
+	const names = new Set(themes.map((theme) => theme ? theme.name ?? "default" : void 0));
+	const [only] = names;
+	return names.size === 1 ? only : void 0;
+}
+const simpleSelector = /^(?:(?<root>html|:root|:host)(?![\w(-])|\.(?<className>[\w-]+)|\[\s*[\w-]+\s*(?:=\s*(?:"(?<double>[^"]*)"|'(?<single>[^']*)'|(?<bare>[\w-]+))\s*(?:[is]\s*)?)?\]|(?<functional>:(?:not|where|is|host)\())/;
+/** The theme one compound selector (no combinators) names, or undefined when it isn't a theme's. */
+function compoundTheme(part) {
+	let root = false;
+	const names = [];
+	let rest = part;
+	while (rest.length > 0) {
+		const match = simpleSelector.exec(rest);
+		if (!match?.groups) return void 0;
+		const { groups } = match;
+		if (groups.functional) {
+			const open = groups.functional.length;
+			const close = matchingParen(rest, open - 1);
+			if (close === -1) return void 0;
+			const inner = rest.slice(open, close).trim();
+			rest = rest.slice(close + 1);
+			if (groups.functional === ":not(") continue;
+			if (groups.functional === ":host(") root = true;
+			const nested = compoundTheme(inner);
+			if (!nested) return void 0;
+			root ||= nested.root;
+			if (nested.name !== void 0) names.push(nested.name);
+			continue;
+		}
+		rest = rest.slice(match[0].length);
+		if (groups.root) root = true;
+		const name = groups.className ?? groups.double ?? groups.single ?? groups.bare;
+		if (name !== void 0) names.push(name);
+	}
+	if (names.length > 1) return void 0;
+	const name = names[0] === "light" ? void 0 : names[0];
+	if (!root && names.length === 0) return void 0;
+	return {
+		root: root || names[0] === "light",
+		...name === void 0 ? {} : { name }
+	};
+}
+function matchingParen(text, open) {
+	let depth = 0;
+	for (let index = open; index < text.length; index++) if (text[index] === "(") depth++;
+	else if (text[index] === ")" && --depth === 0) return index;
+	return -1;
+}
+/** Splits on a separator outside parentheses, brackets and quotes. */
+function splitTopLevel(text, separator) {
+	const parts = [];
+	let depth = 0;
+	let quote;
+	let start = 0;
+	for (let index = 0; index < text.length; index++) {
+		const char = text[index];
+		if (quote) {
+			if (char === "\\") index++;
+			else if (char === quote) quote = void 0;
+		} else if (char === "\"" || char === "'") quote = char;
+		else if (char === "(" || char === "[") depth++;
+		else if (char === ")" || char === "]") depth--;
+		else if (char === separator && depth === 0) {
+			parts.push(text.slice(start, index));
+			start = index + 1;
+		}
+	}
+	parts.push(text.slice(start));
+	return parts;
+}
+/**
+* Custom properties by theme, in the order they're first declared. A later declaration in the same theme wins, as in
+* the cascade, except that a `prefers-color-scheme` block never replaces a value a theme's own selector gives. A class
+* or attribute is a theme only if it overrides something the root defines; one that sets only its own variables, such
+* as a component's `.card` or a `.scroll-fade-b` utility, isn't.
+*/
+function themedProperties(declarations, options = {}) {
+	const themed = declarations.flatMap((declaration) => {
+		const theme = themeOfSelector(declaration.selector, declaration.atRules, options);
+		return theme === void 0 ? [] : [{
+			...declaration,
+			theme,
+			scheme: fromColorScheme(declaration.atRules)
+		}];
+	});
+	const rootNames = new Set(themed.flatMap(({ theme, name }) => theme === "default" ? [name] : []));
+	const themes = new Set(themed.flatMap(({ theme, name }) => rootNames.has(name) ? [theme] : []));
+	const properties = /* @__PURE__ */ new Map();
+	const fromScheme = /* @__PURE__ */ new Set();
+	for (const { name, value, theme, scheme } of themed) {
+		if (!themes.has(theme)) continue;
+		const property = properties.get(name) ?? {
+			name,
+			values: {},
+			first: value
+		};
+		const key = `${theme}\n${name}`;
+		if (scheme && property.values[theme] !== void 0 && !fromScheme.has(key)) continue;
+		property.values[theme] = value;
+		if (scheme) fromScheme.add(key);
+		else fromScheme.delete(key);
+		properties.set(name, property);
+	}
+	return [...properties.values()];
+}
+/** Framework internals and per-token modifiers (`text-sm--line-height`) aren't tokens a designer picks. */
+function isTokenName(name) {
+	return !name.startsWith("tw-") && !name.startsWith("default-") && !name.includes("--");
+}
+const colorValue = /^(?:#[\da-f]{3,8}|(?:rgba?|hsla?|oklch|oklab|lab|lch|hwb|color|color-mix|light-dark)\(|transparent$|currentcolor$)/i;
+/** Whether a CSS value is a colour. */
+function isColor(value) {
+	return colorValue.test(value.trim());
+}
+/**
+* The category a custom property belongs in, from the words in its name, then its value: `--mantine-spacing-md` is
+* spacing, `--fontSizeBase300` a font size, Tailwind's `--text-sm` a font size but `--text-shadow-sm` a shadow, and
+* anything whose value is a colour a colour.
+*/
+function categorize(name, value) {
+	const words = name.replace(/([a-z0-9])([A-Z])/g, "$1-$2").toLowerCase().split(/[-_]/).filter(Boolean);
+	const has = (...sequence) => words.some((_, index) => sequence.every((word, offset) => words[index + offset] === word));
+	if (has("breakpoint") || has("breakpoints") || has("screen") || has("screens")) return "breakpoint";
+	const textSize = words[0] === "text" && words.length > 1 && ![
+		"wrap",
+		"color",
+		"decoration",
+		"shadow"
+	].includes(words[1]);
+	if (has("font", "size") || has("font", "sizes") || textSize) return "font-size";
+	if (has("line", "height") || has("leading") || has("line", "heights")) return "leading";
+	if (has("font", "weight") || has("font", "weights")) return "font-weight";
+	if (has("letter", "spacing") || has("tracking")) return "tracking";
+	if (has("font", "family") || has("font") || has("fonts")) return "font";
+	if (has("radius") || has("radii") || has("rounded")) return "radius";
+	if (has("shadow") || has("shadows") || has("elevation")) return "shadow";
+	if (has("spacing") || has("space") || has("gap")) return "spacing";
+	if (has("blur") || has("perspective") || has("aspect")) return "effect";
+	if ([
+		"duration",
+		"easing",
+		"curve",
+		"ease",
+		"transition",
+		"animation",
+		"animate",
+		"delay"
+	].some((word) => has(word))) return "motion";
+	if (has("container") && !has("color")) return "container";
+	if (has("color") || has("colors") || has("palette") || isColor(value)) return "color";
+	return "other";
+}
+new Intl.Collator("en", {
+	numeric: true,
+	sensitivity: "base"
+});
+// ../project/src/styles.ts
+/**
+* Where an app keeps its global styles when neither `components.json` nor the entry says: Vite's and Create React App's
+* `src/index.css`, the usual alternatives, and Next's `globals.css`, which its layout imports with no HTML entry.
+*/
+const conventionalStylesheets = [
+	"src/index.css",
+	"src/styles.css",
+	"src/app.css",
+	"src/globals.css",
+	"src/app/globals.css",
+	"app/globals.css",
+	"styles/globals.css"
+];
+/**
+* The app's global stylesheets, by one set of rules that detection and app libraries share: the one shadcn's
+* `components.json` names; else what the app entry imports (index.html, its module script, that module's stylesheet
+* imports, side-effect or default); else the conventional places that exist. How they were found goes in `notes`.
+*/
+async function findStyles(root, notes = []) {
+	return stylesWith(root, await shadcnConfig(root, notes), notes);
+}
+/** `findStyles`, with `components.json` already read. */
+async function stylesWith(root, shadcn, notes) {
+	const fromShadcn = field(shadcn, "tailwind", "css");
+	if (typeof fromShadcn === "string" && fromShadcn) {
+		notes.push(`styles from components.json: ${fromShadcn}`);
+		return {
+			styles: [toPosix(fromShadcn)],
+			packageStyles: []
+		};
+	}
+	const html = await readText(join(root, "index.html"));
+	const entry = html && /<script[^>]*type=["']module["'][^>]*src=["']([^"']+)["']/i.exec(html)?.[1];
+	if (entry) {
+		const entryPath = join(root, entry.replace(/^\//, ""));
+		const specifiers = stylesheetImports(await readText(entryPath) ?? "");
+		const local = (specifier) => specifier.startsWith(".") || specifier.startsWith("/");
+		const imports = specifiers.filter(local).map((specifier) => toPosix(specifier.startsWith("/") ? specifier.slice(1) : relative(root, join(dirname(entryPath), specifier))));
+		const packageStyles = specifiers.filter((specifier) => !local(specifier));
+		if (specifiers.length > 0) {
+			notes.push(`styles from ${toPosix(entry)}: ${[...packageStyles, ...imports].join(", ")}`);
+			return {
+				styles: imports,
+				packageStyles
+			};
+		}
+	}
+	const conventional = conventionalStylesheets.filter((path) => existsSync(join(root, path)));
+	if (conventional.length > 0) {
+		notes.push(`styles from the conventional place: ${conventional.join(", ")}`);
+		return {
+			styles: conventional,
+			packageStyles: []
+		};
+	}
+	notes.push("no global styles found");
+	return {
+		styles: [],
+		packageStyles: []
+	};
+}
+/**
+* The global stylesheets a module imports, in order: `import "./a.css"` and `import styles from "./a.css"`, plain CSS
+* or Sass. CSS modules (`.module.css`) are scoped to the component that imports them, so they aren't global styles.
+*/
+function stylesheetImports(source) {
+	return [...source.matchAll(/\bimport\s+(?:[\w$*{}\s,]+?\s+from\s+)?["']([^"'?]+\.s?css)["']/g)].map((match) => match[1]).filter((specifier) => !/\.module\.s?css$/.test(specifier));
+}
+/**
+* A stylesheet's text with its relative `@import`s inlined, recursively and each file once, so tokens a Tailwind entry
+* keeps in a theme file it imports are read with it. Imports of packages stay as they are. A missing file reads as
+* empty.
+*/
+async function readStylesheet(path, seen = /* @__PURE__ */ new Set()) {
+	if (seen.has(path)) return "";
+	seen.add(path);
+	const source = await readText(path) ?? "";
+	const parts = [];
+	let last = 0;
+	for (const match of source.matchAll(/@import\s+(?:url\()?["'](\.{1,2}\/[^"']+\.s?css)["']\)?[^;]*;/g)) {
+		parts.push(source.slice(last, match.index), await readStylesheet(join(dirname(path), match[1]), seen));
+		last = match.index + match[0].length;
+	}
+	parts.push(source.slice(last));
+	return parts.join("");
+}
+/** shadcn's `components.json`, which it reads from the project's own folder only and which may have comments. */
+async function shadcnConfig(root, notes) {
+	const text = await readText(join(root, "components.json"));
+	if (text === void 0) return void 0;
+	try {
+		return parseJsonc(text);
+	} catch (error) {
+		notes.push(`Couldn't load components: ${error instanceof Error ? error.message : String(error)}`);
+		return;
+	}
+}
+function field(value, ...keys) {
+	let current = value;
+	for (const key of keys) {
+		if (typeof current !== "object" || current === null) return void 0;
+		current = current[key];
+	}
+	return current;
+}
+async function readText(path) {
+	return readFile(path, "utf8").catch(() => void 0);
+}
+function toPosix(path) {
+	return path.replaceAll("\\", "/").replace(/^\.\//, "");
+}
 // ../project/src/libraries.ts
 /**
 * Where a dependency is installed, found the way Node finds packages: in `node_modules` here or in a folder above. It
@@ -452,6 +879,25 @@ async function installedPackage(root, importName) {
 async function isFile(path) {
 	return stat(path).then((stats) => stats.isFile(), () => false);
 }
+/** A sentence that ends this far in is kept whole, rather than its words cut down to the length. */
+const shortestSentence = 20;
+/**
+* An example's text as a sample keeps it: whole when it's short, else shortened (see `shortenedText`), so a preview
+* reads "Manage how you receive notifications." rather than "…You can enable email a".
+*/
+function sampleText(text) {
+	return text.length <= 60 ? text : shortenedText(text.slice(0, 60));
+}
+/**
+* Text cut at `sampleTextLength`, ended where its last sentence in it ends, else after its last whole word with an
+* ellipsis. It reads only what was kept, so text earlier versions cut there mid-word is shortened as it would be now.
+*/
+function shortenedText(head) {
+	const end = [...head.matchAll(/[.!?](?=\s|$)/g)].findLast((match) => match.index >= shortestSentence);
+	if (end) return head.slice(0, end.index + 1);
+	const space = head.lastIndexOf(" ");
+	return `${(space > 0 ? head.slice(0, space) : head.slice(0, -1)).replace(/[\s,;:–—-]+$/, "")}…`;
+}
 // ../libgen/src/examples.ts
 const run = promisify(execFile);
 /** Example and story files: stories, demos, examples and docs' demo files, in TypeScript or JavaScript. */
@@ -1148,7 +1594,7 @@ function collectChildren(nodes, context, depth, children) {
 		if (children.length >= 4) return;
 		if (ts.isJsxText(child)) {
 			const text = child.text.replace(/\s+/g, " ").trim();
-			if (text) children.push(text.slice(0, 60));
+			if (text) children.push(sampleText(text));
 		} else if (ts.isJsxFragment(child)) collectChildren(child.children, context, depth, children);
 		else if (ts.isJsxElement(child) || ts.isJsxSelfClosingElement(child)) pushElement(child, context, depth, children);
 		else if (ts.isJsxExpression(child) && child.expression) pushExpression(unwrap$1(child.expression), context, depth, children);
@@ -1216,7 +1662,7 @@ function pushExpression(expression, context, depth, children) {
 		return;
 	}
 	const value = evaluate(expression, context, 0);
-	if (typeof value === "string" || typeof value === "number") children.push(String(value).slice(0, 60));
+	if (typeof value === "string" || typeof value === "number") children.push(sampleText(String(value)));
 }
 /**
 * A function that returns elements, as a sample's render function: what it returns, and whether it spreads its first
@@ -1595,7 +2041,7 @@ function textIn(node) {
 		ts.forEachChild(child, visit);
 	};
 	visit(node);
-	return parts.join(" ").replace(/\s+/g, " ").trim().slice(0, 60);
+	return sampleText(parts.join(" ").replace(/\s+/g, " ").trim());
 }
 function sampleWeight(sample) {
 	const children = sample.children ?? [];
@@ -1746,7 +2192,7 @@ function checkAnatomy(anatomy, list) {
 */
 async function readRenders(packageDir, names, calls, made) {
 	const renders = /* @__PURE__ */ new Map();
-	for (const file of await sourceFiles$1(packageDir)) {
+	for (const file of await sourceFiles(packageDir)) {
 		const text = await readFile(file, "utf8");
 		if (!names.some((name) => text.includes(name))) continue;
 		const source = ts.createSourceFile(file, text, ts.ScriptTarget.Latest, false, ts.ScriptKind.TSX);
@@ -1929,13 +2375,13 @@ function renderedBy(node, source) {
 	return first && ts.isIdentifier(first) && /^[A-Z]/.test(first.text) ? first.text : void 0;
 }
 /** The package's own script files, skipping type declarations, source maps and its dependencies. */
-async function sourceFiles$1(dir, found = [], depth = 0) {
+async function sourceFiles(dir, found = [], depth = 0) {
 	if (depth > 8 || found.length >= 4e3) return found;
 	const entries = await readdir(dir, { withFileTypes: true }).catch(() => []);
 	for (const entry of entries) {
 		const path = join(dir, entry.name);
 		if (entry.isDirectory()) {
-			if (entry.name !== "node_modules" && !entry.name.startsWith(".")) await sourceFiles$1(path, found, depth + 1);
+			if (entry.name !== "node_modules" && !entry.name.startsWith(".")) await sourceFiles(path, found, depth + 1);
 		} else if (/\.(?:m?js|cjs|jsx)$/.test(entry.name) && (await stat(path)).size < 1e6) found.push(path);
 	}
 	return found;
@@ -2923,14 +3369,39 @@ async function relateParts(load, specifier, components, providers = [], edits =
 		if (!relation.parents || relation.inside || relation.visual === false) continue;
 		if (!relation.parents.some((parent) => loose.has(parent))) continue;
 		if (!asInserted(relation.parents, name, relation.sample?.children)) continue;
+		const cleared = [];
 		for (const parent of relation.parents) {
 			const generated = loose.get(parent);
 			const sample = relations.get(parent)?.sample;
 			if (!generated || !sample) continue;
 			loose.delete(parent);
-			if (Object.keys(generated).length > 0) sample.props = generated;
+			const made = Object.entries(sample.props ?? {}).filter(([, value]) => isMadeValue(value) || Array.isArray(value) && value.some(isMadeValue));
+			const kept = {
+				...generated,
+				...Object.fromEntries(made)
+			};
+			if (made.length > 0) cleared.push([
+				parent,
+				generated,
+				kept
+			]);
+			if (Object.keys(kept).length > 0) sample.props = kept;
 			else delete sample.props;
-			if (!sample.props && !sample.children) delete relations.get(parent).sample;
+		}
+		if (cleared.length > 0) {
+			const saved = cleared.map(([parent]) => [parent, samples.get(parent)]);
+			for (const [parent, , kept] of cleared) samples.set(parent, kept);
+			const fails = attempt(relation.parents, name, relation.sample?.children);
+			for (const [parent, sample] of saved) samples.set(parent, sample ?? {});
+			if (fails) for (const [parent, generated] of cleared) {
+				const sample = relations.get(parent).sample;
+				if (Object.keys(generated).length > 0) sample.props = generated;
+				else delete sample.props;
+			}
+		}
+		for (const parent of relation.parents) {
+			const sample = relations.get(parent)?.sample;
+			if (sample && !sample.props && !sample.children) delete relations.get(parent).sample;
 		}
 	}
 	for (const [name, error] of Object.entries(appErrors)) {
@@ -2946,7 +3417,15 @@ async function relateParts(load, specifier, components, providers = [], edits =
 		if (relation.parentsFrom === "edit") continue;
 		const parents = relation.parents ?? [];
 		const needed = named(error, name, parents, false);
-		if (!needed) continue;
+		if (!needed) {
+			const shown = exampleChain(name);
+			if (shown && shown.join() !== parents.join() && !attempt(shown, name, relation.sample?.children)) {
+				relation.parents = shown;
+				relation.parentsFrom = "app";
+				delete relation.optionalParents;
+			}
+			continue;
+		}
 		const outer = (relations.get(needed)?.parents ?? []).filter((parent) => parent !== name);
 		relation.parents = namespaceOf(needed) === namespaceOf(name) ? [.../* @__PURE__ */ new Set([
 			...outer,
@@ -3012,6 +3491,46 @@ async function relateParts(load, specifier, components, providers = [], edits =
 			delete relation.inside;
 		}
 	}
+	const textOnly = /* @__PURE__ */ new Set();
+	for (const [name, relation] of relations) {
+		const texts = relation.sample?.children;
+		if (!texts?.length || !texts.every((child) => typeof child === "string")) continue;
+		const parents = relation.parents ?? [];
+		if (!attempt(parents, name, [{
+			component: "p",
+			children: texts
+		}]) || attempt(parents, name, texts)) continue;
+		const { children: _, ...sample } = relation.sample;
+		relation.sample = {
+			...sample,
+			props: {
+				...sample.props,
+				children: texts.join("")
+			}
+		};
+		textOnly.add(name);
+	}
+	const asText = (children) => children.map((child) => {
+		if (typeof child !== "object" || !("component" in child) || !child.children) return child;
+		const { children: inner, ...node } = child;
+		if (textOnly.has(child.component) && inner.length > 0 && inner.every((item) => typeof item === "string")) return {
+			...node,
+			props: {
+				...node.props,
+				children: inner.join("")
+			}
+		};
+		return {
+			...node,
+			children: asText(inner)
+		};
+	});
+	if (textOnly.size > 0) {
+		for (const relation of relations.values()) if (relation.sample?.children) relation.sample = {
+			...relation.sample,
+			children: asText(relation.sample.children)
+		};
+	}
 	for (const relation of relations.values()) {
 		const nearest = relation.parents?.at(-1);
 		if (nearest && relations.get(nearest)?.sample?.children?.length === 0 && relation.parentsFrom !== "edit") {
@@ -3567,6 +4086,11 @@ const presets = {
 			return { tokens: [...tokens.values()] };
 		}
 	},
+	recharts: {
+		id: "recharts",
+		name: "Recharts",
+		description: "Charts, axes, series and grids to compose, as shadcn's charts are."
+	},
 	"lucide-react": {
 		id: "lucide",
 		name: "Lucide",
@@ -3718,139 +4242,31 @@ function fluentCategory(name) {
 }
 // ../libgen/src/tokens.ts
 /**
-* The category a custom property belongs in, from the words in its name, then its value: `--mantine-spacing-md` is
-* spacing, `--fontSizeBase300` a font size, and anything whose value is a colour a colour.
-*/
-function categorizeVar(name, value) {
-	const words = name.replace(/([a-z0-9])([A-Z])/g, "$1-$2").toLowerCase().split(/[-_]/);
-	const has = (...sequence) => words.some((_, index) => sequence.every((word, offset) => words[index + offset] === word));
-	if (has("breakpoint") || has("breakpoints") || has("screen")) return "breakpoint";
-	const textSize = words[0] === "text" && ![
-		"wrap",
-		"color",
-		"decoration",
-		"shadow"
-	].includes(words[1] ?? "");
-	if (has("font", "size") || has("font", "sizes") || textSize) return "font-size";
-	if (has("line", "height") || has("leading") || has("line", "heights")) return "leading";
-	if (has("font", "weight") || has("font", "weights")) return "font-weight";
-	if (has("letter", "spacing") || has("tracking")) return "tracking";
-	if (has("font", "family") || has("font") || has("fonts")) return "font";
-	if (has("radius") || has("radii") || has("rounded")) return "radius";
-	if (has("shadow") || has("shadows") || has("elevation")) return "shadow";
-	if (has("spacing") || has("space") || has("gap")) return "spacing";
-	if ([
-		"duration",
-		"easing",
-		"curve",
-		"ease",
-		"transition",
-		"animation",
-		"animate",
-		"delay"
-	].some((word) => has(word))) return "motion";
-	if (has("container") && !has("color")) return "container";
-	if (has("color") || has("colors") || has("palette") || isColor(value)) return "color";
-	return "other";
-}
-const colorValue = /^(?:#[\da-f]{3,8}|(?:rgba?|hsla?|oklch|oklab|lab|lch|hwb|color|color-mix|light-dark)\(|transparent$)/i;
-function isColor(value) {
-	return colorValue.test(value.trim());
-}
-/** A theme a selector belongs to: the root's defaults, or a dark theme however it's written. Anything else, none. */
-function themeOfSelector(selector, media = "") {
-	const parts = selector.split(",").map((part) => part.trim().replaceAll(/\s+/g, " "));
-	const dark = /prefers-color-scheme:\s*dark/.test(media);
-	const isRoot = (part) => /^(?::where\()?(?::root|:host|html)(?:\)|\s|$|\[|\.|,)/.test(part) || part === ":host";
-	const isDark = (part) => /(?:^|[.\s])dark(?:[\s.:[]|$)|\[[\w-]+=["']?dark["']?\]/.test(part);
-	const isLight = (part) => /(?:^|[.\s])light(?:[\s.:[]|$)|\[[\w-]+=["']?light["']?\]/.test(part);
-	if (parts.some(isDark)) return "dark";
-	if (parts.some((part) => isRoot(part) || isLight(part))) return dark ? "dark" : "default";
-}
-/** Splits CSS into nested blocks, each with its prelude and its own declarations. */
-function blocks(css) {
-	let index = 0;
-	const level = () => {
-		let text = "";
-		let declarations = "";
-		const children = [];
-		while (index < css.length) {
-			const char = css[index];
-			if (char === "/" && css[index + 1] === "*") {
-				const end = css.indexOf("*/", index + 2);
-				index = end === -1 ? css.length : end + 2;
-			} else if (char === "\"" || char === "'") {
-				const end = css.indexOf(char, index + 1);
-				text += css.slice(index, end === -1 ? css.length : end + 1);
-				index = end === -1 ? css.length : end + 1;
-			} else if (char === "{") {
-				index++;
-				const split = text.lastIndexOf(";") + 1;
-				declarations += text.slice(0, split);
-				const inner = level();
-				children.push({
-					prelude: text.slice(split).trim(),
-					...inner
-				});
-				text = "";
-			} else if (char === "}") {
-				index++;
-				return {
-					declarations: declarations + text,
-					children
-				};
-			} else {
-				text += char;
-				index++;
-			}
-		}
-		return {
-			declarations: declarations + text,
-			children
-		};
-	};
-	return level().children;
-}
-/**
-* The tokens a library's CSS defines: custom properties on the root, on a dark theme (a `.dark` class, a
-* `[data-…=dark]` attribute or a `prefers-color-scheme: dark` block), and in Tailwind's `@theme`. Properties scoped to
-* one component's class aren't tokens.
+* The tokens a library's CSS defines, read with the same rules the app reads a project's CSS with (`themedProperties`
+* and `categorize` in `@parity-app/tokens`): custom properties on the root, and on each theme a class or attribute
+* names (`.dark`, `[data-theme="dark"]`). Two differences are deliberate, because this reads source CSS whose themes
+* reach a frame as the class blocks `describedTokenCss` writes: Tailwind's `@theme` is the default, and a
+* `prefers-color-scheme` block is its theme. Properties scoped to one component's class aren't tokens.
 */
 function cssTokens(css) {
-	const tokens = /* @__PURE__ */ new Map();
-	const visit = (list, media) => {
-		for (const block of list) {
-			if (/^@theme\b/.test(block.prelude)) declarations(block.declarations, "default");
-			else if (block.prelude.startsWith("@")) {
-				visit(block.children, block.prelude.startsWith("@media") ? `${media} ${block.prelude}` : media);
-				continue;
-			} else {
-				const theme = themeOfSelector(block.prelude, media);
-				if (theme) declarations(block.declarations, theme);
-			}
-			visit(block.children, media);
-		}
-	};
-	const declarations = (text, theme) => {
-		for (const match of text.matchAll(/--([\w-]+)\s*:\s*([^;]+)/g)) {
-			const name = match[1];
-			const value = match[2].trim();
-			if (name.includes("--") || name.startsWith("tw-")) continue;
-			const token = tokens.get(name) ?? {
-				var: name,
-				category: categorizeVar(name, value),
-				values: {}
-			};
-			token.values[theme] = value;
-			tokens.set(name, token);
-		}
-		for (const match of text.matchAll(/--([\w-]+)--line-height\s*:\s*([^;]+)/g)) {
-			const token = tokens.get(match[1]);
-			if (token && !token.lineHeight) token.lineHeight = match[2].trim().replace(/^var\(--([\w-]+)\)$/, "$1");
-		}
-	};
-	visit(blocks(css), "");
-	return [...tokens.values()];
+	const properties = themedProperties(collectCustomProperties(css), {
+		colorScheme: true,
+		tailwindTheme: true
+	});
+	const byName = new Map(properties.map((property) => [property.name, property]));
+	const tokens = [];
+	for (const { name, values, first } of properties) {
+		if (!isTokenName(name)) continue;
+		const token = {
+			var: name,
+			category: categorize(name, first),
+			values
+		};
+		const lineHeight = byName.get(`${name}--line-height`)?.values.default;
+		if (lineHeight) token.lineHeight = lineHeight.trim().replace(/^var\(--([\w-]+)\)$/, "$1");
+		tokens.push(token);
+	}
+	return tokens;
 }
 /**
 * Pairs each font size with the line height of the same step, as Parity's type controls do with Tailwind's
@@ -4019,7 +4435,7 @@ function dtcgValue(value, category, paths) {
 }
 // ../libgen/src/index.ts
 /**
-* Describes a component library, an icon set or an app as a version 3 `.lib.par`: its components found with the type
+* Describes a component library, an icon set or an app as a `.lib.par`: its components found with the type
 * checker, its tokens wherever it keeps them, written as DTCG in Parity's categories, its breakpoints, its icons' shape
 * and the decorators its components need.
 */
@@ -4053,7 +4469,7 @@ async function describePackage(options, importName) {
 	const isIcons = preset?.icons !== void 0 || looksLikeIcons(scan);
 	const tokens = /* @__PURE__ */ new Map();
 	const styles = preset?.styles ?? stylesheetOf(dir, pkg);
-	if (styles) for (const token of cssTokens(await readCss(exportedFile(dir, pkg, styles)))) tokens.set(token.var, token);
+	if (styles) for (const token of cssTokens(await readStylesheet(exportedFile(dir, pkg, styles)))) tokens.set(token.var, token);
 	let breakpoints;
 	if (preset?.theme) try {
 		const theme = await preset.theme(loader(root, dir));
@@ -4328,16 +4744,24 @@ function summarizeParts(relations) {
 	}
 	return summary;
 }
+/** The files an app library's components are read from: the type checker finds React components in JSX files. */
+const appExtensions = [".tsx", ".jsx"];
 async function describeApp(options) {
 	const root = resolve(options.root);
 	const pkg = JSON.parse(await readFile(join(root, "package.json"), "utf8"));
 	const notes = [];
-	const config = appConfig(root);
-	if (!config) notes.push("No tsconfig.json or jsconfig.json, so every .tsx and .jsx file under src was read.");
+	const tsconfig = readTsconfig(root);
+	const { files } = await appFiles(root, { componentExtensions: appExtensions }, tsconfig);
+	if (tsconfig.configs.length === 0) notes.push("No tsconfig.json or jsconfig.json, so every .tsx and .jsx file in the project was read.");
+	else if (!tsconfig.configs.some((config) => config.files.length > 0)) {
+		const names = tsconfig.configs.map((config) => config.path).join(", ");
+		const verb = tsconfig.configs.length === 1 ? "includes" : "include";
+		notes.push(`${names} ${verb} no files, so every .tsx and .jsx file in the project was read.`);
+	}
 	const scan = findComponents({
-		entries: (config?.fileNames ?? await sourceFiles(join(root, "src"))).filter((file) => /\.[jt]sx$/.test(file) && !/\.(stories|test|spec)\.[jt]sx$/.test(file) && !file.includes("/node_modules/")),
+		entries: files.map((file) => join(root, file).replaceAll("\\", "/")),
 		root,
-		...config ? { compilerOptions: config.options } : {},
+		...tsconfig.app ? { compilerOptions: tsconfig.app.options } : {},
 		defaultExports: true
 	});
 	const counts = /* @__PURE__ */ new Map();
@@ -4353,7 +4777,7 @@ async function describeApp(options) {
 		};
 	}
 	const tokens = /* @__PURE__ */ new Map();
-	for (const stylesheet of await appStylesheets(root)) for (const token of cssTokens(await readCss(join(root, stylesheet)))) tokens.set(token.var, token);
+	for (const stylesheet of (await findStyles(root)).styles) for (const token of cssTokens(await readStylesheet(join(root, stylesheet)))) tokens.set(token.var, token);
 	pairLineHeights(tokens);
 	const breakpoints = breakpointsOf([...tokens.values()]);
 	const name = pkg.name ?? basename(root);
@@ -4493,20 +4917,6 @@ function exportedFile(dir, pkg, specifier) {
 	const file = typeof target === "string" ? target : target?.default;
 	return join(dir, typeof file === "string" ? file : specifier);
 }
-/** A stylesheet with its relative `@import`s inlined, so a Tailwind entry brings its theme file with it. */
-async function readCss(path, seen = /* @__PURE__ */ new Set()) {
-	if (seen.has(path)) return "";
-	seen.add(path);
-	const source = await readFile(path, "utf8").catch(() => "");
-	const parts = [];
-	let last = 0;
-	for (const match of source.matchAll(/@import\s+(?:url\()?["'](\.{1,2}\/[^"']+\.css)["']\)?[^;]*;/g)) {
-		parts.push(source.slice(last, match.index), await readCss(join(dirname(path), match[1]), seen));
-		last = match.index + match[0].length;
-	}
-	parts.push(source.slice(last));
-	return parts.join("");
-}
 /** A DTCG token file the package ships, if it has one in the format; Buildkit's `tokens.json` isn't yet. */
 async function dtcgIn(dir) {
 	for (const candidate of [
@@ -4614,8 +5024,16 @@ function exportsByName(file, name) {
 function loader(root, packageDir) {
 	return async (specifier) => {
 		for (const from of [root, packageDir]) {
-			const path = await resolveImport(from, specifier) ?? resolveRequire(from, specifier);
-			if (path) return await import(pathToFileURL(path).href);
+			const esm = await resolveImport(from, specifier);
+			const cjs = resolveRequire(from, specifier);
+			const path = esm ?? cjs;
+			if (!path) continue;
+			try {
+				return await import(pathToFileURL(path).href);
+			} catch (error) {
+				if (!cjs || cjs === path) throw error;
+				return await import(pathToFileURL(cjs).href);
+			}
 		}
 		throw new Error(`Can't find ${specifier} from ${root}`);
 	};
@@ -4650,41 +5068,4 @@ async function resolveImport(from, specifier) {
 	const file = pick(exported[subpath(specifier, name)]) ?? (specifier === name ? pkg.module : void 0);
 	return file ? join(dir, file) : void 0;
 }
-function appConfig(root) {
-	for (const name of [
-		"tsconfig.app.json",
-		"tsconfig.json",
-		"jsconfig.json"
-	]) {
-		const path = join(root, name);
-		if (!existsSync(path)) continue;
-		const parsed = ts.getParsedCommandLineOfConfigFile(path, {}, {
-			...ts.sys,
-			onUnRecoverableConfigFileDiagnostic: () => void 0
-		});
-		if (parsed && parsed.fileNames.length > 0) return parsed;
-	}
-}
-async function sourceFiles(folder) {
-	const entries = await readdir(folder, { withFileTypes: true }).catch(() => []);
-	const files = [];
-	for (const entry of entries) {
-		const path = join(folder, entry.name).replaceAll("\\", "/");
-		if (entry.isDirectory() && !entry.name.startsWith(".") && entry.name !== "node_modules") files.push(...await sourceFiles(path));
-		else if (/\.[jt]sx?$/.test(entry.name)) files.push(path);
-	}
-	return files;
-}
-/** An app's global stylesheets: shadcn's `components.json` names one; otherwise the usual places. */
-async function appStylesheets(root) {
-	const shadcn = await readFile(join(root, "components.json"), "utf8").then((text) => JSON.parse(text), () => void 0);
-	if (shadcn?.tailwind?.css) return [shadcn.tailwind.css];
-	return [
-		"src/index.css",
-		"src/styles.css",
-		"src/app.css",
-		"src/globals.css",
-		"app/globals.css"
-	].filter((path) => existsSync(join(root, path)));
-}
 export { appManifestPath, generateLibrary, manifestText, mergeManifest, parseLibraryEdits, reviseLibrary, iconVariants as t };