@shortwind/cli 0.1.0-beta.10 → 0.1.0-beta.12

package/README.md

@@ -10,7 +10,7 @@ The Shortwind command-line tool. Provides the `shortwind` command: `init`, `add`
 npx @shortwind/cli@beta init      # beta: published on the `beta` tag
 ```
 
-`init` is the one command you need — it detects your bundler, installs the right adapter, copies the recipe catalog into `./recipes/`, scaffolds a default theme, wires the plugin into your config, and generates `skills/shortwind/SKILL.md`.
+`init` is the one command you need — it detects your bundler, installs the right adapter, copies the recipe catalog into `./recipes/`, scaffolds a default theme, and generates `skills/shortwind/SKILL.md`. On Vite it also patches the plugin into your config; on Next/Astro it prints the one-line snippet to paste. Run it with `--yes` (default preset) or `--preset <name>` to skip the interactive prompt in CI and agent sessions.
 
 Install it to get the `shortwind` command in scripts:
 

package/dist/{bench-BGTQAha8.js → bench-BGO3pupw.js}

@@ -5,11 +5,11 @@ import { fileURLToPath } from "node:url";
 import { applyEdits, modify, parse } from "jsonc-parser";
 import { PLACEHOLDER_SHA, RECIPE_SHA_HEX_LENGTH, buildRegistry, isReservedRecipeName, normalizeRecipeBody, parseRecipeFile, renderSkillMarkdown } from "@shortwind/core";
 import { createHash } from "node:crypto";
+import { findTailwindEntryCssFiles, loadRegistryFromDir, modeForFile, syncSourceDirectiveToFile, transformContent } from "@shortwind/tailwind";
 import { glob } from "tinyglobby";
 import chokidar from "chokidar";
 import { Tiktoken } from "js-tiktoken/lite";
 import cl100k_base from "js-tiktoken/ranks/cl100k_base";
-import { loadRegistryFromDir, modeForFile, transformContent } from "@shortwind/tailwind";
 //#region src/fingerprint.ts
 const HEADER_PATTERN = /^\/\*\s*shortwind:\s+(\S+)@(\S+)\s+sha:([^\s*]+)(?:\s+—\s+DO NOT EDIT THIS LINE)?\s*\*\/\s*$/;
 function extractHeader(source) {
@@ -58,6 +58,9 @@ function sealRecipeFile(source, family, version) {
 }
 //#endregion
 //#region src/detect.ts
+function skillAdapterFor(bundler) {
+	return bundler === "unknown" ? void 0 : bundler;
+}
 function parsePackageJson(pkgPath) {
 	let parsed;
 	try {
@@ -165,7 +168,7 @@ const BUNDLED_ORIGIN = "bundled:@shortwind/catalog";
 function bundledSource() {
 	let cache = null;
 	const load = () => {
-		cache ??= import("./catalog.generated-B_ds7MPV.js");
+		cache ??= import("./catalog.generated-BdZstlkf.js");
 		return cache;
 	};
 	return {
@@ -203,9 +206,26 @@ function fileSource(origin) {
 		}
 	};
 }
+const FETCH_RETRIES = 2;
+const RETRY_BASE_DELAY_MS = 500;
+function isTransientFetchError(err) {
+	return err instanceof DOMException && err.name === "TimeoutError" || err instanceof TypeError;
+}
 function httpSource(origin) {
 	const base = origin.replace(/\/+$/, "");
-	const get = (url) => fetch(url, { signal: AbortSignal.timeout(FETCH_TIMEOUT_MS) });
+	const get = async (url) => {
+		let lastErr;
+		for (let attempt = 0; attempt <= FETCH_RETRIES; attempt++) {
+			if (attempt > 0) await new Promise((r) => setTimeout(r, RETRY_BASE_DELAY_MS * attempt));
+			try {
+				return await fetch(url, { signal: AbortSignal.timeout(FETCH_TIMEOUT_MS) });
+			} catch (err) {
+				if (!isTransientFetchError(err)) throw err;
+				lastErr = err;
+			}
+		}
+		throw lastErr;
+	};
 	let presetsCache = null;
 	return {
 		origin,
@@ -415,6 +435,21 @@ async function scaffoldTheme(cwd) {
 		action: "created"
 	};
 }
+const THEME_COLOR_TOKENS = new Set([...THEME_BLOCK.matchAll(/--color-([\w-]+)\s*:/g)].map((m) => m[1] ?? ""));
+const COLOR_UTILITY_RE = /^(?:bg|text|border|ring|outline|fill|stroke|divide|accent|caret|decoration|shadow|from|via|to|placeholder)-(.+)$/;
+function referencedThemeTokens(flattened) {
+	const out = /* @__PURE__ */ new Set();
+	for (const utilities of Object.values(flattened)) for (const raw of utilities) {
+		const m = (raw.split(":").pop() ?? raw).match(COLOR_UTILITY_RE);
+		if (!m) continue;
+		const name = (m[1] ?? "").replace(/\/.*$/, "");
+		if (THEME_COLOR_TOKENS.has(name)) out.add(name);
+	}
+	return [...out].sort();
+}
+function findMissingThemeTokens(css, flattened) {
+	return referencedThemeTokens(flattened).filter((name) => !new RegExp(`--(?:color-)?${name}\\s*:`).test(css));
+}
 function isTailwindV4(cwd) {
 	try {
 		const pkg = JSON.parse(readFileSync(path.join(cwd, "package.json"), "utf8"));
@@ -437,21 +472,22 @@ const VITE_CONFIGS = [
 const VITE_SNIPPET = [
 	`import { shortwind } from "@shortwind/vite";`,
 	`// add shortwind() to the Vite plugins array — it runs in the pre phase,`,
-	`// before Tailwind's scan:`,
-	`//   plugins: [shortwind(), tailwindcss(), react()]`
+	`// before Tailwind's scan. strict: true fails the build when a recipe`,
+	`// token leaks unexpanded (recommended; drop it to demote to a warning):`,
+	`//   plugins: [shortwind({ strict: true }), tailwindcss(), react()]`
 ].join("\n");
 async function wireBundler(cwd, bundler) {
 	if (bundler === "vite") return wireVite(cwd);
 	if (bundler === "next") return {
 		configPath: null,
 		action: "manual",
-		snippet: `import { withShortwind } from "@shortwind/next";\n// wrap your Next config: export default withShortwind(nextConfig);`,
+		snippet: `import { withShortwind } from "@shortwind/next";\n// withShortwind is curried — wrap your Next config. strict: true fails\n// the build when a recipe token leaks unexpanded (recommended):\n//   export default withShortwind({ strict: true })(nextConfig);`,
 		reason: "Next config wiring is manual"
 	};
 	if (bundler === "astro") return {
 		configPath: null,
 		action: "manual",
-		snippet: `import shortwind from "@shortwind/astro";\n// add to integrations: integrations: [shortwind()]`,
+		snippet: `import shortwind from "@shortwind/astro";\n// add to integrations — strict: true fails the build when a recipe\n// token leaks unexpanded (recommended):\n//   integrations: [shortwind({ strict: true })]`,
 		reason: "Astro config wiring is manual"
 	};
 	return {
@@ -499,25 +535,33 @@ function addImport(source, line) {
 //#endregion
 //#region src/agents-file.ts
 const MARKER = "skills/shortwind/SKILL.md";
+const DYNAMIC_MARKER = "expandClassList";
 function line(skillRel) {
 	return `For UI, prefer Shortwind \`@recipe\` class names (e.g. \`@card\`, \`@btn-primary\`, \`@row\`) over raw Tailwind where a recipe fits — full catalog in \`${skillRel}\`.`;
 }
+function dynamicLine() {
+	return "Never build a recipe name dynamically (variable, prop, concatenation) — it silently won't expand. For a runtime choice between recipes use the `rc()`/`expandClassList` helper, and turn on `strict: true` in the Shortwind adapter config to fail the build on leaked `@tokens` — worked snippets under \"Dynamic classes\" in the SKILL doc above.";
+}
 const CANDIDATES = ["AGENTS.md", "CLAUDE.md"];
 async function wireAgentsInstructions(cwd, skillPath) {
 	const pointer = line(path.relative(cwd, skillPath).split(path.sep).join("/"));
+	const dynamic = dynamicLine();
 	let touched = null;
 	for (const name of CANDIDATES) {
 		const file = path.join(cwd, name);
 		if (!existsSync(file)) continue;
 		const current = await readFile(file, "utf8");
-		if (current.includes(MARKER)) {
+		const missing = [];
+		if (!current.includes(MARKER)) missing.push(pointer);
+		if (!current.includes(DYNAMIC_MARKER)) missing.push(dynamic);
+		if (missing.length === 0) {
 			touched ??= {
 				path: file,
 				action: "skipped"
 			};
 			continue;
 		}
-		await writeFile(file, current + (current.endsWith("\n\n") ? "" : current.endsWith("\n") ? "\n" : "\n\n") + pointer + "\n");
+		await writeFile(file, current + (current.endsWith("\n\n") ? "" : current.endsWith("\n") ? "\n" : "\n\n") + missing.join("\n") + "\n");
 		return {
 			path: file,
 			action: "appended"
@@ -525,7 +569,7 @@ async function wireAgentsInstructions(cwd, skillPath) {
 	}
 	if (touched) return touched;
 	const target = path.join(cwd, "AGENTS.md");
-	await writeFile(target, `# AGENTS.md\n\n${pointer}\n`);
+	await writeFile(target, `# AGENTS.md\n\n${pointer}\n${dynamic}\n`);
 	return {
 		path: target,
 		action: "created"
@@ -553,7 +597,15 @@ async function init(options) {
 		installError = err instanceof Error ? err.message : String(err);
 	}
 	const recipesDir = path.join(cwd, "recipes");
-	const { installed, skipped } = await copyRecipes(source, families, recipesDir);
+	let copied;
+	try {
+		copied = await copyRecipes(source, families, recipesDir);
+	} catch (err) {
+		const done = families.filter((f) => existsSync(path.join(recipesDir, `${f}.css`)));
+		const reason = err instanceof Error ? err.message : String(err);
+		throw new Error(`init aborted while copying recipe families (${done.length}/${families.length} copied${done.length > 0 ? `: ${done.join(", ")}` : ""}) — ${reason}\nThe project is incomplete (no config/SKILL.md/theme yet). Re-run the same init command to resume; already-copied families are skipped.`);
+	}
+	const { installed, skipped } = copied;
 	await updateLockfile(recipesDir, registry, installed);
 	const configPath = path.join(cwd, "shortwind.config.json");
 	await writeConfig(configPath, {
@@ -562,11 +614,17 @@ async function init(options) {
 	});
 	const vscodePath = path.join(cwd, ".vscode", "settings.json");
 	await wireVscodeClassRegex(vscodePath);
-	const huskyPath = path.join(cwd, ".husky", "pre-commit");
-	await installHuskyHook(huskyPath);
+	const huskyPath = await installHuskyHook(cwd, path.join(cwd, ".husky", "pre-commit"));
 	const skillPath = path.join(cwd, "skills", "shortwind", "SKILL.md");
-	await writeSkillMd(skillPath, recipesDir, families);
+	const skillRegistry = await writeSkillMd(skillPath, recipesDir, families, shape.bundler);
 	const theme = await scaffoldTheme(cwd);
+	let missingThemeTokens = [];
+	if (theme.action === "skipped" && theme.themePath && skillRegistry) missingThemeTokens = findMissingThemeTokens(await readFile(theme.themePath, "utf8"), skillRegistry.flattened);
+	const safelistCssPaths = [];
+	if (shape.bundler !== "vite" && shape.bundler !== "astro" && skillRegistry) for (const file of findTailwindEntryCssFiles(cwd)) {
+		syncSourceDirectiveToFile(file, skillRegistry);
+		safelistCssPaths.push(file);
+	}
 	const bundlerConfig = await wireBundler(cwd, shape.bundler);
 	const agentsFile = await wireAgentsInstructions(cwd, skillPath);
 	return {
@@ -583,6 +641,8 @@ async function init(options) {
 		skillPath,
 		themePath: theme.themePath,
 		themeAction: theme.action,
+		safelistCssPaths,
+		missingThemeTokens,
 		bundlerConfigPath: bundlerConfig.configPath,
 		bundlerConfigAction: bundlerConfig.action,
 		...bundlerConfig.snippet ? { bundlerConfigSnippet: bundlerConfig.snippet } : {},
@@ -721,18 +781,20 @@ async function wireVscodeClassRegex(vscodePath) {
 	parse(next);
 	await writeFile(vscodePath, next.endsWith("\n") ? next : next + "\n");
 }
-const HUSKY_LINE = "npx shortwind build";
-async function installHuskyHook(huskyPath) {
+const HUSKY_LINE = "npx @shortwind/cli build";
+async function installHuskyHook(cwd, huskyPath) {
+	if (!existsSync(path.join(cwd, ".git"))) return null;
 	await mkdir(path.dirname(huskyPath), { recursive: true });
 	if (!existsSync(huskyPath)) {
 		await writeFile(huskyPath, `${HUSKY_LINE}\n`, { mode: 493 });
-		return;
+		return huskyPath;
 	}
 	const current = await readFile(huskyPath, "utf8");
-	if (current.includes(HUSKY_LINE)) return;
-	await writeFile(huskyPath, current.endsWith("\n") ? current + HUSKY_LINE + "\n" : current + "\nnpx shortwind build\n", { mode: 493 });
+	if (current.includes(HUSKY_LINE)) return huskyPath;
+	await writeFile(huskyPath, current.endsWith("\n") ? current + HUSKY_LINE + "\n" : current + "\nnpx @shortwind/cli build\n", { mode: 493 });
+	return huskyPath;
 }
-async function writeSkillMd(skillPath, recipesDir, families) {
+async function writeSkillMd(skillPath, recipesDir, families, bundler) {
 	const allRecipes = [];
 	const guidance = {};
 	const problems = [];
@@ -749,10 +811,15 @@ async function writeSkillMd(skillPath, recipesDir, families) {
 	if (problems.length > 0 || !resolved.ok) {
 		const all = resolved.ok ? problems : [...problems, ...resolved.errors.map((e) => e.message)];
 		console.warn(`[shortwind] SKILL.md not generated — recipe errors:\n  ${all.join("\n  ")}`);
-		return;
+		return null;
 	}
 	await mkdir(path.dirname(skillPath), { recursive: true });
-	await writeFile(skillPath, renderSkillMarkdown(resolved.value, { order: families }));
+	const adapter = skillAdapterFor(bundler);
+	await writeFile(skillPath, renderSkillMarkdown(resolved.value, {
+		order: families,
+		...adapter ? { adapter } : {}
+	}));
+	return resolved.value;
 }
 //#endregion
 //#region src/project.ts
@@ -827,7 +894,11 @@ async function regenerateSkillMd(cwd, config) {
 	}
 	const { mkdir } = await import("node:fs/promises");
 	await mkdir(path.dirname(skillPath), { recursive: true });
-	await writeFile(skillPath, renderSkillMarkdown(resolved.value, { order: families }));
+	const adapter = skillAdapterFor(detectProject(cwd).bundler);
+	await writeFile(skillPath, renderSkillMarkdown(resolved.value, {
+		order: families,
+		...adapter ? { adapter } : {}
+	}));
 	return skillPath;
 }
 /**
@@ -1145,8 +1216,13 @@ async function build(options) {
 	if (errors.length > 0) throw new BuildError(errors);
 	const resolved = buildRegistry(allRecipes, { guidance });
 	if (!resolved.ok) throw new BuildError(resolved.errors);
+	const { bundler } = detectProject(cwd);
+	const adapter = skillAdapterFor(bundler);
 	const skillPath = path.join(cwd, config.outputPath);
-	const next = renderSkillMarkdown(resolved.value, { order: families });
+	const next = renderSkillMarkdown(resolved.value, {
+		order: families,
+		...adapter ? { adapter } : {}
+	});
 	const current = existsSync(skillPath) ? readFileSync(skillPath, "utf8") : null;
 	let changed = false;
 	if (current !== next) {
@@ -1154,10 +1230,16 @@ async function build(options) {
 		await writeFile(skillPath, next);
 		changed = true;
 	}
+	const safelistCssPaths = [];
+	if (bundler !== "vite" && bundler !== "astro") for (const file of findTailwindEntryCssFiles(cwd)) {
+		if (syncSourceDirectiveToFile(file, resolved.value)) changed = true;
+		safelistCssPaths.push(file);
+	}
 	return {
 		changed,
 		families,
-		skillPath
+		skillPath,
+		safelistCssPaths
 	};
 }
 //#endregion
@@ -1511,7 +1593,7 @@ const DEFAULT_RECIPES_CSS = {
 	"dialog.css": "/* shortwind: dialog@0.0.1 sha:000000 */\n\n/* @guide\n   A modal is three layers: @dialog-overlay (dimmed backdrop), @dialog (the\n   centering wrapper), and @dialog-content (the panel). Structure the panel with\n   @dialog-header and @dialog-footer. Don't put content styling on @dialog\n   itself — it's only the positioner.\n*/\n\n/* Modal dialog wrapper — covers the viewport, centers content. */\n@recipe dialog {\n  fixed inset-0 z-50 flex items-center justify-center p-4\n}\n\n/* Dimmed overlay behind the dialog. */\n@recipe dialog-overlay {\n  fixed inset-0 z-40 bg-black/50\n}\n\n/* Dialog content panel. */\n@recipe dialog-content {\n  relative z-50 w-full max-w-md rounded-lg border border-border bg-popover text-popover-foreground p-6 shadow-xl\n}\n\n/* Dialog header region with title. */\n@recipe dialog-header {\n  mb-4 flex flex-col gap-1\n}\n\n/* Dialog footer with right-aligned actions. */\n@recipe dialog-footer {\n  mt-6 flex items-center justify-end gap-2\n}\n",
 	"empty.css": "/* shortwind: empty@0.0.1 sha:000000 */\n\n/* @guide\n   @empty is the container for a no-data state; fill it with @empty-icon,\n   @empty-title, and @empty-description. These are slots for that pattern — use\n   @heading-* / @body from the text family for ordinary copy.\n*/\n\n/* Empty-state container. */\n@recipe empty {\n  flex flex-col items-center justify-center gap-3 rounded-md border border-dashed border-border p-8 text-center\n}\n\n/* Empty-state icon slot. */\n@recipe empty-icon {\n  flex h-12 w-12 items-center justify-center rounded-full bg-muted text-muted-foreground\n}\n\n/* Empty-state title text. */\n@recipe empty-title {\n  text-base font-semibold text-foreground\n}\n\n/* Empty-state supporting description. */\n@recipe empty-description {\n  max-w-sm text-sm text-muted-foreground\n}\n",
 	"feedback.css": "/* shortwind: feedback@0.0.1 sha:000000 */\n\n/* @guide\n   Inline messages use @alert (neutral) or a tone variant @alert-success/\n   warning/danger/info — one tone each. @callout is a left-accent inline note,\n   @toast is a floating notification, @banner spans the full viewport width.\n*/\n\n/* Default informational alert. */\n@recipe alert {\n  flex items-start gap-3 rounded-md border border-border bg-card p-4 text-sm text-card-foreground\n}\n\n/* Success alert. */\n@recipe alert-success {\n  flex items-start gap-3 rounded-md border border-green-200 bg-green-50 p-4 text-sm text-green-900 dark:border-green-900 dark:bg-green-950 dark:text-green-100\n}\n\n/* Warning alert. */\n@recipe alert-warning {\n  flex items-start gap-3 rounded-md border border-amber-200 bg-amber-50 p-4 text-sm text-amber-900 dark:border-amber-900 dark:bg-amber-950 dark:text-amber-100\n}\n\n/* Danger alert. */\n@recipe alert-danger {\n  flex items-start gap-3 rounded-md border border-destructive/30 bg-destructive/10 p-4 text-sm text-destructive\n}\n\n/* Informational alert. */\n@recipe alert-info {\n  flex items-start gap-3 rounded-md border border-primary/30 bg-primary/10 p-4 text-sm text-primary\n}\n\n/* Inline callout — flush left edge accent. */\n@recipe callout {\n  border-l-4 border-primary bg-primary/10 p-4 text-sm text-foreground\n}\n\n/* Floating toast notification. */\n@recipe toast {\n  pointer-events-auto flex items-start gap-3 rounded-md border border-border bg-popover p-4 text-sm text-popover-foreground shadow-lg\n}\n\n/* Full-width banner spanning the viewport. */\n@recipe banner {\n  w-full bg-primary px-4 py-2 text-center text-sm font-medium text-primary-foreground\n}\n",
-	"form.css": "/* shortwind: form@0.0.1 sha:000000 */\n\n/* @guide\n   Wrap each label+control+message in @field (use @field-error for the invalid\n   state); group related fields with @fieldset. Controls are bare: @input,\n   @textarea, @select, @checkbox, @radio, plus @input-error for invalid text\n   and @input-shell for the transparent shadcn-style shell. Helper text is\n   @help. There is no @form-group (use @field), @form-input (use @input),\n   @form-helper (use @help) or @form-checkbox (use @checkbox); the field label\n   recipe is @label, in the text family.\n*/\n\n/* Text input field. */\n@recipe input {\n  block w-full rounded-md border border-input bg-background px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground focus:border-ring focus:outline-2 focus:outline-offset-2 focus:outline-ring disabled:cursor-not-allowed disabled:opacity-50\n}\n\n/* shadcn/dinachi-style input shell — transparent background, h-9, file/\n   placeholder/selection/aria-invalid/focus-visible states baked in. */\n@recipe input-shell {\n  flex h-9 w-full min-w-0 rounded-md border border-input bg-transparent px-3 py-1 text-base shadow-xs outline-none transition-[color,box-shadow] placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:border-destructive aria-invalid:ring-destructive/20 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm dark:bg-input/30 dark:aria-invalid:ring-destructive/40\n}\n\n/* Input in error state. */\n@recipe input-error {\n  @input border-destructive focus:border-destructive focus:outline-destructive\n}\n\n/* Multi-line textarea. */\n@recipe textarea {\n  block w-full rounded-md border border-input bg-background px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground focus:border-ring focus:outline-2 focus:outline-offset-2 focus:outline-ring disabled:cursor-not-allowed disabled:opacity-50\n}\n\n/* Native select control. */\n@recipe select {\n  block w-full rounded-md border border-input bg-background px-3 py-2 text-sm text-foreground focus:border-ring focus:outline-2 focus:outline-offset-2 focus:outline-ring disabled:cursor-not-allowed disabled:opacity-50\n}\n\n/* Checkbox input. */\n@recipe checkbox {\n  h-4 w-4 rounded border-input text-primary focus:outline-2 focus:outline-offset-2 focus:outline-ring\n}\n\n/* Radio input. */\n@recipe radio {\n  h-4 w-4 border-input text-primary focus:outline-2 focus:outline-offset-2 focus:outline-ring\n}\n\n/* Form field wrapper — label + input + help/error. */\n@recipe field {\n  flex flex-col gap-1.5\n}\n\n/* Form field in error state. */\n@recipe field-error {\n  flex flex-col gap-1.5\n}\n\n/* Grouped form section with optional legend. */\n@recipe fieldset {\n  flex flex-col gap-4 rounded-md border border-border p-4\n}\n\n/* Field-level helper text. */\n@recipe help {\n  text-xs text-muted-foreground\n}\n",
+	"form.css": "/* shortwind: form@0.0.2 sha:000000 */\n\n/* @guide\n   Wrap each label+control+message in @field (use @field-error for the invalid\n   state); group related fields with @fieldset. Controls are bare: @input,\n   @textarea, @select, @checkbox, @radio, plus @input-error for invalid text\n   and @input-shell for the transparent input shell. Helper text is\n   @help. There is no @form-group (use @field), @form-input (use @input),\n   @form-helper (use @help) or @form-checkbox (use @checkbox); the field label\n   recipe is @label, in the text family.\n*/\n\n/* Text input field. */\n@recipe input {\n  block w-full rounded-md border border-input bg-background px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground focus:border-ring focus:outline-2 focus:outline-offset-2 focus:outline-ring disabled:cursor-not-allowed disabled:opacity-50\n}\n\n/* Dinachi-style input shell — transparent background, h-9, file/\n   placeholder/selection/aria-invalid/focus-visible states baked in. */\n@recipe input-shell {\n  flex h-9 w-full min-w-0 rounded-md border border-input bg-transparent px-3 py-1 text-base shadow-xs outline-none transition-[color,box-shadow] placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:border-destructive aria-invalid:ring-destructive/20 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm dark:bg-input/30 dark:aria-invalid:ring-destructive/40\n}\n\n/* Input in error state. */\n@recipe input-error {\n  @input border-destructive focus:border-destructive focus:outline-destructive\n}\n\n/* Multi-line textarea. */\n@recipe textarea {\n  block w-full rounded-md border border-input bg-background px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground focus:border-ring focus:outline-2 focus:outline-offset-2 focus:outline-ring disabled:cursor-not-allowed disabled:opacity-50\n}\n\n/* Native select control. */\n@recipe select {\n  block w-full rounded-md border border-input bg-background px-3 py-2 text-sm text-foreground focus:border-ring focus:outline-2 focus:outline-offset-2 focus:outline-ring disabled:cursor-not-allowed disabled:opacity-50\n}\n\n/* Checkbox input. */\n@recipe checkbox {\n  h-4 w-4 rounded border-input text-primary focus:outline-2 focus:outline-offset-2 focus:outline-ring\n}\n\n/* Radio input. */\n@recipe radio {\n  h-4 w-4 border-input text-primary focus:outline-2 focus:outline-offset-2 focus:outline-ring\n}\n\n/* Form field wrapper — label + input + help/error. */\n@recipe field {\n  flex flex-col gap-1.5\n}\n\n/* Form field in error state. */\n@recipe field-error {\n  flex flex-col gap-1.5\n}\n\n/* Grouped form section with optional legend. */\n@recipe fieldset {\n  flex flex-col gap-4 rounded-md border border-border p-4\n}\n\n/* Field-level helper text. */\n@recipe help {\n  text-xs text-muted-foreground\n}\n",
 	"icon.css": "/* shortwind: icon@0.0.1 sha:000000 */\n\n/* @guide\n   Size an icon with @icon-sm/md/lg (16/20/24px) — these set width and height\n   only; add @icon-muted for secondary color. They're for SVG/icon elements, not\n   to be confused with @btn-icon (the icon button in the button family).\n*/\n\n/* Small icon — 16px. */\n@recipe icon-sm {\n  h-4 w-4 shrink-0\n}\n\n/* Default icon size — 20px. */\n@recipe icon-md {\n  h-5 w-5 shrink-0\n}\n\n/* Large icon — 24px. */\n@recipe icon-lg {\n  h-6 w-6 shrink-0\n}\n\n/* Icon with muted color. */\n@recipe icon-muted {\n  text-muted-foreground\n}\n",
 	"layout.css": "/* shortwind: layout@0.0.1 sha:000000 */\n\n/* @guide\n   Composition primitives. @stack-* stacks children vertically (flex-col);\n   @row* lays them out horizontally (flex-row). Choose the gap with the size\n   suffix (xs/sm/md/lg on stacks). Use @grid-2/3/4 only for true multi-column\n   grids, @center to center on both axes, @full to fill the parent. Common\n   slips: there is no @flex-row (use @row) or @flex-col (use a @stack-*), and\n   the grids are @grid-3, not @grid-cols-3.\n*/\n\n/* Vertical stack with extra-small gap. */\n@recipe stack-xs {\n  flex flex-col gap-1\n}\n\n/* Vertical stack with small gap. */\n@recipe stack-sm {\n  flex flex-col gap-2\n}\n\n/* Vertical stack with medium gap. */\n@recipe stack-md {\n  flex flex-col gap-4\n}\n\n/* Vertical stack with large gap. */\n@recipe stack-lg {\n  flex flex-col gap-8\n}\n\n/* Horizontal row with default gap and centered items. */\n@recipe row {\n  flex flex-row items-center gap-2\n}\n\n/* Horizontal row with space between children. */\n@recipe row-between {\n  flex flex-row items-center justify-between gap-2\n}\n\n/* Horizontal row aligned to the end. */\n@recipe row-end {\n  flex flex-row items-center justify-end gap-2\n}\n\n/* Two-column responsive grid. */\n@recipe grid-2 {\n  grid grid-cols-1 gap-4 sm:grid-cols-2\n}\n\n/* Three-column responsive grid. */\n@recipe grid-3 {\n  grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3\n}\n\n/* Four-column responsive grid. */\n@recipe grid-4 {\n  grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4\n}\n\n/* Center content horizontally and vertically. */\n@recipe center {\n  flex items-center justify-center\n}\n\n/* Fill the available width and height. */\n@recipe full {\n  h-full w-full\n}\n",
 	"list.css": "/* shortwind: list@0.0.1 sha:000000 */\n\n/* @guide\n   @list wraps a stack of @list-item rows; use @list-bordered for divided rows.\n   Definition lists are separate: @dl with @dt (term) and @dd (description).\n   For site navigation reach for the navigation family (@nav), not @list.\n*/\n\n/* Vertical list with default gap. */\n@recipe list {\n  flex flex-col gap-1\n}\n\n/* Single list item. */\n@recipe list-item {\n  flex items-center gap-2 rounded-md px-3 py-2 text-sm text-foreground\n}\n\n/* List with dividing borders between items. */\n@recipe list-bordered {\n  divide-y divide-border rounded-md border border-border\n}\n\n/* Definition list container. */\n@recipe dl {\n  grid grid-cols-1 gap-2 sm:grid-cols-3 sm:gap-4\n}\n\n/* Definition term. */\n@recipe dt {\n  text-sm font-medium text-muted-foreground\n}\n\n/* Definition description. */\n@recipe dd {\n  text-sm text-foreground sm:col-span-2\n}\n",
@@ -1519,9 +1601,9 @@ const DEFAULT_RECIPES_CSS = {
 	"navigation.css": "/* shortwind: navigation@0.0.1 sha:000000 */\n\n/* @guide\n   @nav is the container; links are @nav-link with @nav-link-active for the\n   current page. Tabs mirror that pair: @tab and @tab-active. Use @breadcrumb\n   for trail navigation. Active and inactive are separate recipes — swap the\n   whole class rather than combining them.\n*/\n\n/* Top-level nav container. */\n@recipe nav {\n  flex items-center gap-1\n}\n\n/* Inactive nav link with hover/focus states. */\n@recipe nav-link {\n  inline-flex items-center gap-2 rounded-md px-3 py-1.5 text-sm font-medium text-muted-foreground transition-colors hover:bg-muted hover:text-foreground focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring\n}\n\n/* Active nav link. */\n@recipe nav-link-active {\n  inline-flex items-center gap-2 rounded-md bg-muted px-3 py-1.5 text-sm font-medium text-foreground focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring\n}\n\n/* Breadcrumb trail container. */\n@recipe breadcrumb {\n  flex items-center gap-1.5 text-sm text-muted-foreground\n}\n\n/* Inactive tab control. */\n@recipe tab {\n  inline-flex items-center gap-2 border-b-2 border-transparent px-3 py-2 text-sm font-medium text-muted-foreground transition-colors hover:border-border hover:text-foreground focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring\n}\n\n/* Active tab control. */\n@recipe tab-active {\n  inline-flex items-center gap-2 border-b-2 border-primary px-3 py-2 text-sm font-medium text-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring\n}\n",
 	"progress.css": "/* shortwind: progress@0.0.1 sha:000000 */\n\n/* @guide\n   A bar is two pieces: @progress-track (the background) wrapping @progress-bar\n   (the fill). For an indeterminate state use @spinner instead — it's a\n   standalone loader, not a bar.\n*/\n\n/* Progress bar track (background). */\n@recipe progress-track {\n  h-2 w-full overflow-hidden rounded-full bg-muted\n}\n\n/* Progress bar fill. */\n@recipe progress-bar {\n  h-full rounded-full bg-primary transition-all\n}\n\n/* Indeterminate loading spinner. */\n@recipe spinner {\n  inline-block h-4 w-4 animate-spin rounded-full border-2 border-border border-t-primary\n}\n",
 	"skeleton.css": "/* shortwind: skeleton@0.0.1 sha:000000 */\n\n/* @guide\n   Match the skeleton to the shape it stands in for: @skeleton (block),\n   @skeleton-text (a text line), @skeleton-circle (avatar/icon). Size block and\n   text skeletons with raw width/height utilities.\n*/\n\n/* Default rectangular skeleton placeholder. */\n@recipe skeleton {\n  animate-pulse rounded-md bg-muted\n}\n\n/* Single-line text skeleton. */\n@recipe skeleton-text {\n  h-4 w-full animate-pulse rounded bg-muted\n}\n\n/* Circular skeleton (avatar/icon). */\n@recipe skeleton-circle {\n  h-10 w-10 animate-pulse rounded-full bg-muted\n}\n",
-	"surface.css": "/* shortwind: surface@0.0.1 sha:000000 */\n\n/* @guide\n   @surface / @surface-muted / @surface-accent set a background+foreground pair\n   for a region — one per section. @wrapper (or @wrapper-tight for prose)\n   centers and width-caps content; there is no @wrapper-lg, set a different cap\n   with max-w-* yourself. (Note: @container is reserved for Tailwind's\n   container-query utility, so the content wrapper is @wrapper.) @divider-h and\n   @divider-v are hairline rules.\n*/\n\n/* Default page/section surface. */\n@recipe surface {\n  bg-background text-foreground\n}\n\n/* Muted surface — secondary background. */\n@recipe surface-muted {\n  bg-muted text-foreground\n}\n\n/* Accent surface — soft brand background. */\n@recipe surface-accent {\n  bg-accent text-accent-foreground\n}\n\n/* Centered content wrapper with a max width. */\n@recipe wrapper {\n  mx-auto w-full max-w-6xl px-4 sm:px-6 lg:px-8\n}\n\n/* Narrow content wrapper for prose. */\n@recipe wrapper-tight {\n  mx-auto w-full max-w-3xl px-4 sm:px-6\n}\n\n/* Horizontal divider line. */\n@recipe divider-h {\n  shrink-0 h-px w-full bg-border\n}\n\n/* Vertical divider line. */\n@recipe divider-v {\n  shrink-0 h-full w-px bg-border\n}\n",
+	"surface.css": "/* shortwind: surface@0.0.2 sha:000000 */\n\n/* @guide\n   @surface / @surface-muted / @surface-accent set a background+foreground pair\n   for a region — one per section. @wrapper (or @wrapper-tight for prose)\n   centers and width-caps content; there is no @wrapper-lg, set a different cap\n   with max-w-* yourself. (Note: @container is reserved for Tailwind's\n   container-query utility, so the content wrapper is @wrapper.) @divider-h and\n   @divider-v are hairline rules.\n*/\n\n/* Default page/section surface. */\n@recipe surface {\n  bg-background text-foreground\n}\n\n/* Muted surface — secondary background. */\n@recipe surface-muted {\n  bg-muted text-foreground\n}\n\n/* Accent surface — soft brand background. */\n@recipe surface-accent {\n  bg-accent text-accent-foreground\n}\n\n/* Centered content wrapper with a max width. */\n@recipe wrapper {\n  mx-auto w-full max-w-6xl px-4 sm:px-6 lg:px-8\n}\n\n/* Narrow content wrapper for prose. */\n@recipe wrapper-tight {\n  mx-auto w-full max-w-3xl px-4 sm:px-6\n}\n\n/* Horizontal divider line. */\n@recipe divider-h {\n  shrink-0 h-px w-full bg-border\n}\n\n/* Vertical divider line. */\n@recipe divider-v {\n  shrink-0 h-full w-px bg-border\n}\n",
 	"table.css": "/* shortwind: table@0.0.1 sha:000000 */\n\n/* @guide\n   Wrap the table in @table-container for horizontal overflow, then put @table\n   (or @table-zebra for striped rows) on the <table>. Cells are @th (header) and\n   @td (body); add @tr-hover to a <tr> for row highlighting.\n*/\n\n/* Scroll container for a wide table — keeps overflow horizontal. */\n@recipe table-container {\n  w-full overflow-x-auto rounded-md border border-border\n}\n\n/* Data table base. */\n@recipe table {\n  w-full border-collapse text-left text-sm text-foreground\n}\n\n/* Table header cell. */\n@recipe th {\n  border-b border-border px-3 py-2 text-xs font-semibold uppercase tracking-wide text-muted-foreground\n}\n\n/* Table body cell. */\n@recipe td {\n  border-b border-border px-3 py-2\n}\n\n/* Row hover state. */\n@recipe tr-hover {\n  transition-colors hover:bg-muted\n}\n\n/* Table with zebra striping on alternating rows. */\n@recipe table-zebra {\n  w-full border-collapse text-left text-sm text-foreground [&_tbody_tr:nth-child(odd)]:bg-muted\n}\n",
-	"text.css": "/* shortwind: text@0.0.1 sha:000000 */\n\n/* @guide\n   Headings are sized by weight, not HTML level: @heading-xl/lg/md/sm — there\n   is no @h1..@h6. Body copy: @body (default), @lead (intro paragraphs), @muted\n   (secondary), @caption (fine print). Use @label for form labels and @link for\n   inline links. Don't append a -text suffix: it's @body not @body-text, @muted\n   not @muted-text, @link not @link-text.\n*/\n\n/* Top-level page heading. */\n@recipe heading-xl {\n  text-4xl font-bold tracking-tight text-foreground\n}\n\n/* Large section heading. */\n@recipe heading-lg {\n  text-2xl font-semibold tracking-tight text-foreground\n}\n\n/* Medium heading. */\n@recipe heading-md {\n  text-xl font-semibold text-foreground\n}\n\n/* Small heading. */\n@recipe heading-sm {\n  text-base font-semibold text-foreground\n}\n\n/* Default body text. */\n@recipe body {\n  text-sm leading-6 text-foreground\n}\n\n/* Lead paragraph — larger body copy for hero/intro sections. */\n@recipe lead {\n  text-lg leading-relaxed text-muted-foreground\n}\n\n/* Muted secondary text. */\n@recipe muted {\n  text-sm text-muted-foreground\n}\n\n/* Form label text. */\n@recipe label {\n  text-sm font-medium text-foreground\n}\n\n/* Caption — small supporting text. */\n@recipe caption {\n  text-xs text-muted-foreground\n}\n\n/* Inline link with hover/focus states. */\n@recipe link {\n  text-primary underline-offset-2 hover:underline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring\n}\n",
+	"text.css": "/* shortwind: text@0.0.2 sha:000000 */\n\n/* @guide\n   Headings are sized by weight, not HTML level: @heading-xl/lg/md/sm — there\n   is no @h1..@h6. Body copy: @body (default), @lead (intro paragraphs), @muted\n   (secondary), @caption (fine print), @eyebrow (uppercase kicker above a\n   heading). Use @label for form labels and @link for inline links. Don't\n   append a -text suffix: it's @body not @body-text, @muted not @muted-text,\n   @link not @link-text.\n*/\n\n/* Top-level page heading. */\n@recipe heading-xl {\n  text-4xl font-bold tracking-tight text-foreground\n}\n\n/* Large section heading. */\n@recipe heading-lg {\n  text-2xl font-semibold tracking-tight text-foreground\n}\n\n/* Medium heading. */\n@recipe heading-md {\n  text-xl font-semibold text-foreground\n}\n\n/* Small heading. */\n@recipe heading-sm {\n  text-base font-semibold text-foreground\n}\n\n/* Default body text. */\n@recipe body {\n  text-sm leading-6 text-foreground\n}\n\n/* Lead paragraph — larger body copy for hero/intro sections. */\n@recipe lead {\n  text-lg leading-relaxed text-muted-foreground\n}\n\n/* Muted secondary text. */\n@recipe muted {\n  text-sm text-muted-foreground\n}\n\n/* Form label text. */\n@recipe label {\n  text-sm font-medium text-foreground\n}\n\n/* Caption — small supporting text. */\n@recipe caption {\n  text-xs text-muted-foreground\n}\n\n/* Eyebrow — uppercase kicker above a heading. */\n@recipe eyebrow {\n  font-mono text-xs font-medium uppercase tracking-[0.2em] text-muted-foreground\n}\n\n/* Inline link with hover/focus states. */\n@recipe link {\n  text-primary underline-offset-2 hover:underline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring\n}\n",
 	"tooltip.css": "/* shortwind: tooltip@0.0.1 sha:000000 */\n\n/* @guide\n   @tooltip is the floating label bubble — it styles appearance only, so pair it\n   with your own positioning.\n*/\n\n/* Floating tooltip bubble. */\n@recipe tooltip {\n  pointer-events-none z-50 rounded-md bg-foreground px-2 py-1 text-xs font-medium text-background shadow-md\n}\n"
 };
 //#endregion
@@ -2365,4 +2447,4 @@ function formatBenchTable(result) {
 //#endregion
 export { buildHeaderLine as A, cliVersion as C, createRegistrySource as D, writeLockfile as E, verifyFetchedFamily as F, extractHeader as M, rewriteHeaderSha as N, resolvePresetFamilies as O, sealRecipeFile as P, DEFAULT_REGISTRY as S, readLockfile as T, NewFamilyError as _, formatFindingsText as a, add as b, UpgradeError as c, BuildError as d, build as f, reseal as g, preset as h, extractClassUsages as i, computeBodySha as j, detectProject as k, upgrade as l, ls as m, formatBenchTable as n, lint as o, formatLsText as p, ALL_RULES as r, verify as s, bench as t, dev as u, newFamily as v, init as w, renameFamilyInSource as x, remove as y };
 
-//# sourceMappingURL=bench-BGTQAha8.js.map
+//# sourceMappingURL=bench-BGO3pupw.js.map