@animus-ui/vite-plugin 0.1.0-next.10 → 0.1.0-next.17

package/dist/index.d.ts

@@ -1,48 +1,12 @@
 import type { Plugin } from 'vite';
 export interface AnimusExtractOptions {
-    /**
-     * Theme data for the extraction pipeline.
-     *
-     * Two forms are accepted:
-     *   - `string` — pre-serialized flat JSON (legacy; no CSS variable emission)
-     *   - `{ scales: string; variables: string }` — pre-evaluated scales JSON
-     *     plus fully-formed CSS variable declarations to prepend to the virtual
-     *     stylesheet.  The caller is responsible for evaluating the theme module
-     *     (e.g. via `evaluateTheme` or a Bun subprocess) before passing it here.
-     *
-     * When omitted, the plugin auto-detects `src/theme.ts`, `src/theme.js`,
-     * `theme.ts`, or `theme.js` relative to the project root.
-     */
-    theme?: string | {
-        scales: string;
-        variables: string;
-    };
-    /**
-     * Explicit path to the theme module (relative to project root or absolute).
-     * Takes precedence over auto-detection, but lower priority than `theme`.
-     */
-    themePath?: string;
     /**
      * Path to a module exporting a SystemInstance from `@animus-ui/system`.
      * The module is loaded via a single bun subprocess at build start.
-     * Replaces configPath + themePath when using the system package.
-     */
-    system?: string;
-    /**
-     * Path to a module exporting `getExtractConfig()`. The module is loaded via
-     * bun subprocess at build start. Use this for custom Animus instances created
-     * with `createAnimus().addGroup(...).build()`.
-     *
-     * When omitted, automatically imported from `@animus-ui/core`.
-     */
-    configPath?: string;
-    /**
-     * Pre-serialized prop config JSON. When omitted, automatically imported from
-     * `@animus-ui/core` via `getExtractConfig()`.
+     * It provides prop config, group registry, theme tokens, transforms,
+     * and global styles — everything the extraction pipeline needs.
      */
-    config?: string;
-    /** Pre-serialized group registry JSON. Maps group names to prop name arrays. */
-    groupRegistry?: string;
+    system: string;
     /** Glob patterns to include. Defaults to .ts/.tsx/.js/.jsx files. */
     include?: string[];
     /** Glob patterns to exclude. */
@@ -53,8 +17,38 @@ export interface AnimusExtractOptions {
     strict?: boolean;
     /** Enable verbose logging. Also activatable via ANIMUS_DEBUG=1 env var. */
     verbose?: boolean;
+    /**
+     * Browser targets for CSS autoprefixing and syntax lowering.
+     * Accepts a browserslist query string or array of queries.
+     * Falls back to project's browserslist config, then to `defaults`.
+     */
+    targets?: string | string[];
+    /**
+     * Control CSS minification.
+     * - `true`: always minify (dev + prod)
+     * - `false`: never minify (autoprefixing still applies)
+     * - `undefined` (default): minify in prod only
+     */
+    minify?: boolean;
+    /**
+     * Namespace prefix for CSS variables and class names.
+     * When set, all generated CSS variables become `--{prefix}-{name}`
+     * and class names become `{prefix}-{Component}-{hash}`.
+     * Defaults to no prefix.
+     */
+    prefix?: string;
+    /**
+     * Full `@layer` declaration order. Must include all 7 Animus layers
+     * (global, base, variants, states, system, custom) as a subsequence
+     * in their required order. Consumer layers may be interleaved around them.
+     *
+     * Example: `['reset', 'global', 'base', 'variants', 'states', 'system', 'custom', 'overrides']`
+     *
+     * When omitted, defaults to the 7 Animus layers.
+     */
+    layers?: string[];
 }
-export declare function animusExtract(options?: AnimusExtractOptions): Plugin;
+export declare function animusExtract(options: AnimusExtractOptions): Plugin;
 export { evaluateTheme, evaluateThemeObject } from './theme-evaluator';
 export default animusExtract;
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAcA,OAAO,KAAK,EAAU,MAAM,EAAE,MAAM,MAAM,CAAC;AAM3C,MAAM,WAAW,oBAAoB;IACnC;;;;;;;;;;;;OAYG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG;QAAE,MAAM,EAAE,MAAM,CAAC;QAAC,SAAS,EAAE,MAAM,CAAA;KAAE,CAAC;IACvD;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;;OAIG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;;;;;OAMG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,gFAAgF;IAChF,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,qEAAqE;IACrE,OAAO,CAAC,EAAE,MAAM,EAAE,CAAC;IACnB,gCAAgC;IAChC,OAAO,CAAC,EAAE,MAAM,EAAE,CAAC;IACnB,8FAA8F;IAC9F,eAAe,CAAC,EAAE,MAAM,EAAE,CAAC;IAC3B,qGAAqG;IACrG,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,2EAA2E;IAC3E,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AA6RD,wBAAgB,aAAa,CAAC,OAAO,GAAE,oBAAyB,GAAG,MAAM,CA+gCxE;AAED,OAAO,EAAE,aAAa,EAAE,mBAAmB,EAAE,MAAM,mBAAmB,CAAC;AACvE,eAAe,aAAa,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAoBA,OAAO,KAAK,EAAU,MAAM,EAAE,MAAM,MAAM,CAAC;AAM3C,MAAM,WAAW,oBAAoB;IACnC;;;;;OAKG;IACH,MAAM,EAAE,MAAM,CAAC;IACf,qEAAqE;IACrE,OAAO,CAAC,EAAE,MAAM,EAAE,CAAC;IACnB,gCAAgC;IAChC,OAAO,CAAC,EAAE,MAAM,EAAE,CAAC;IACnB,8FAA8F;IAC9F,eAAe,CAAC,EAAE,MAAM,EAAE,CAAC;IAC3B,qGAAqG;IACrG,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,2EAA2E;IAC3E,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;;OAIG;IACH,OAAO,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;IAC5B;;;;;OAKG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB;;;;;OAKG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;;;;;;;OAQG;IACH,MAAM,CAAC,EAAE,MAAM,EAAE,CAAC;CACnB;AAwUD,wBAAgB,aAAa,CAAC,OAAO,EAAE,oBAAoB,GAAG,MAAM,CAg6BnE;AAED,OAAO,EAAE,aAAa,EAAE,mBAAmB,EAAE,MAAM,mBAAmB,CAAC;AACvE,eAAe,aAAa,CAAC"}

package/dist/index.mjs

@@ -5,6 +5,8 @@ import { existsSync, readFileSync, readdirSync, statSync, unlinkSync, writeFileS
 import { tmpdir } from "os";
 import { dirname, extname, join, relative, resolve } from "path";
 import { fileURLToPath } from "url";
+import browserslist from "browserslist";
+import { browserslistToTargets, transform } from "lightningcss";
 //#region \0rolldown/runtime.js
 var __require = /* @__PURE__ */ createRequire(import.meta.url);
 //#endregion
@@ -12,10 +14,24 @@ var __require = /* @__PURE__ */ createRequire(import.meta.url);
 /**
 * Evaluate a theme object that has already been loaded/imported.
 *
-* This is the pure logic: takes a theme object, flattens scales, builds variable CSS.
-* Use this when you have already loaded the module yourself.
+* If the theme has a `.manifest` property (from ThemeBuilder.build()),
+* reads structured data directly — no re-flattening or var() pattern-matching.
+* Falls back to legacy path for themes without manifests.
 */
 function evaluateThemeObject(theme) {
+	if (theme.manifest && typeof theme.manifest === "object") {
+		const manifest = theme.manifest;
+		return {
+			scalesJson: JSON.stringify(manifest.tokenMap),
+			variableMapJson: JSON.stringify(manifest.variableMap),
+			variableCss: manifest.variableCss
+		};
+	}
+	console.warn("[animus] Theme has no .manifest property — using legacy evaluation. Update to @animus-ui/system >=0.2.0 for structured manifest support.");
+	return evaluateThemeObjectLegacy(theme);
+}
+/** Legacy theme evaluation — flattens theme and pattern-matches var() strings. */
+function evaluateThemeObjectLegacy(theme) {
 	const flat = {};
 	for (const [scaleName, scaleValue] of Object.entries(theme)) {
 		if (scaleName.startsWith("_")) continue;
@@ -152,24 +168,6 @@ function discoverFiles(dir, rootDir, excludePatterns) {
 	return results;
 }
 /**
-* Apply transform placeholders emitted by the Rust pipeline.
-*
-* Rust emits `__TRANSFORM__name__rawValue__` for props with transforms.
-* This function resolves each placeholder using the actual JS transform
-* functions from the config.
-*/
-function applyTransformPlaceholders(css, transformRegistry) {
-	return css.replace(/__TRANSFORM__(\w+)__(.+?)__/g, (_match, name, rawValue) => {
-		const fn = transformRegistry.get(name);
-		if (!fn) {
-			console.warn(`[animus-extract] Unknown transform: "${name}" — using raw value`);
-			return rawValue;
-		}
-		const result = fn(rawValue !== "" && !isNaN(Number(rawValue)) ? Number(rawValue) : rawValue);
-		return typeof result === "object" ? JSON.stringify(result) : String(result);
-	});
-}
-/**
 * CSS properties that accept unitless numeric values.
 * Matches @emotion/unitless and React DOM's style handling.
 * Bare numerics on properties NOT in this set receive `px`.
@@ -256,6 +254,38 @@ function applyUnitFallback(css) {
 		return fixed !== value ? `${prop}:${fixed};` : match;
 	});
 }
+/**
+* Resolve browser targets for Lightning CSS.
+* Priority: explicit config → project browserslist → 'defaults' fallback.
+*/
+function resolveLightningTargets(explicitTargets, rootDir) {
+	let queries;
+	if (explicitTargets) queries = Array.isArray(explicitTargets) ? explicitTargets : [explicitTargets];
+	else {
+		const detected = browserslist(void 0, { path: rootDir });
+		queries = detected.length > 0 ? detected : browserslist("defaults");
+	}
+	return browserslistToTargets(Array.isArray(queries) && typeof queries[0] === "string" && queries[0].includes(" ") ? browserslist(queries) : queries);
+}
+/**
+* Post-process CSS with Lightning CSS: autoprefixing + optional minification.
+* On failure, returns the original CSS and logs a warning.
+*/
+function postProcessCss(css, opts) {
+	if (!css) return css;
+	try {
+		return transform({
+			filename: "animus-extracted.css",
+			code: Buffer.from(css),
+			minify: opts.minify,
+			targets: opts.targets
+		}).code.toString();
+	} catch (e) {
+		const msg = e instanceof Error ? e.message : String(e);
+		(opts.warnFn ?? console.warn)(`[animus] Lightning CSS post-processing failed: ${msg}`);
+		return css;
+	}
+}
 /** Compute MD5 content hash for a string. */
 function contentHash(source) {
 	return createHash("md5").update(source).digest("hex");
@@ -276,39 +306,61 @@ function buildFileEntriesFromCache(cache, changedPath) {
 	return entries;
 }
 /**
-* Resolve transform placeholders in CSS via bun subprocess.
-* Falls back to in-process resolution if the subprocess fails.
+* Apply namespace prefix to a variable map and CSS variable declarations.
+*
+* Variable map: `{ "colors.ember": "--color-ember" }` → `{ "colors.ember": "--prefix-color-ember" }`
+* Variable CSS: `--color-ember: #FF2800` → `--prefix-color-ember: #FF2800`
+*               `var(--color-ember)` → `var(--prefix-color-ember)`
 */
-function resolveTransformPlaceholders(css, rootDir, configPath, transformRegistry) {
-	if (!css.includes("__TRANSFORM__")) return css;
-	try {
-		const ts = Date.now();
-		const tmpCss = join(tmpdir(), `animus-transforms-${ts}.css`);
-		const tmpOut = join(tmpdir(), `animus-transforms-${ts}.out.css`);
-		writeFileSync(tmpCss, css);
-		const candidates = [join(__pluginDir, "resolve-transforms.ts"), join(__pluginDir, "..", "src", "resolve-transforms.ts")];
-		try {
-			const pkgDir = dirname(__require.resolve("@animus-ui/vite-plugin/package.json", { paths: [rootDir] }));
-			candidates.push(join(pkgDir, "src", "resolve-transforms.ts"));
-		} catch {}
-		const scriptPath = candidates.find((p) => existsSync(p));
-		if (!scriptPath) throw new Error(`resolve-transforms.ts not found in: ${candidates.join(", ")}`);
-		execSync(`bun run "${scriptPath}" "${tmpCss}" "${tmpOut}" ${configPath ? `"${resolve(rootDir, configPath)}"` : ""}`, {
-			cwd: rootDir,
-			encoding: "utf-8"
-		});
-		const resolved = readFileSync(tmpOut, "utf-8");
-		try {
-			unlinkSync(tmpCss);
-			unlinkSync(tmpOut);
-		} catch {}
-		return resolved;
-	} catch (e) {
-		console.error("[animus-extract] Transform resolution failed:", e?.message || e);
-		return applyTransformPlaceholders(css, transformRegistry);
+function applyPrefix(prefix, variableMapJson, variableCss) {
+	if (!prefix) return {
+		variableMapJson,
+		variableCss
+	};
+	const map = JSON.parse(variableMapJson);
+	const prefixed = {};
+	for (const [key, varName] of Object.entries(map)) prefixed[key] = varName.startsWith("--") ? `--${prefix}-${varName.slice(2)}` : varName;
+	let css = variableCss;
+	css = css.replace(/--([a-zA-Z][\w-]*)\s*:/g, `--${prefix}-$1:`);
+	css = css.replace(/var\(--([a-zA-Z][\w-]*)\)/g, `var(--${prefix}-$1)`);
+	return {
+		variableMapJson: JSON.stringify(prefixed),
+		variableCss: css
+	};
+}
+/**
+* The 7 Animus cascade layers in required order.
+* Consumer-provided `layers` must contain these as a subsequence.
+*/
+const ANIMUS_LAYERS = [
+	"global",
+	"base",
+	"variants",
+	"compounds",
+	"states",
+	"system",
+	"custom"
+];
+/**
+* Validate that a consumer `layers` array contains all 7 Animus layers
+* in the correct relative order. Consumer layers may be interleaved.
+*
+* @throws Error with descriptive message on violation
+*/
+function validateLayerOrder(layers) {
+	let cursor = 0;
+	for (const layer of layers) if (cursor < ANIMUS_LAYERS.length && layer === ANIMUS_LAYERS[cursor]) cursor++;
+	if (cursor < ANIMUS_LAYERS.length) {
+		const missing = ANIMUS_LAYERS.slice(cursor);
+		const found = ANIMUS_LAYERS.slice(0, cursor);
+		if (!ANIMUS_LAYERS.every((l) => layers.includes(l))) {
+			const absent = ANIMUS_LAYERS.filter((l) => !layers.includes(l));
+			throw new Error(`[animus] Invalid layers config: missing required layers: ${absent.join(", ")}. All 7 Animus layers must be present: ${ANIMUS_LAYERS.join(", ")}`);
+		}
+		throw new Error(`[animus] Invalid layers config: Animus layers must appear in order (${ANIMUS_LAYERS.join(" < ")}). Found ${found.join(", ")} in order, but ${missing.join(", ")} appeared out of sequence. Received: [${layers.join(", ")}]`);
 	}
 }
-function animusExtract(options = {}) {
+function animusExtract(options) {
 	let themeJson = "{}";
 	let variableMapJson = "{}";
 	let configJson = "{}";
@@ -323,9 +375,9 @@ function animusExtract(options = {}) {
 	function warn(msg) {
 		(logger ?? console).warn(`[animus] ${msg}`);
 	}
+	let lcssTargets = {};
 	let variableCss = "";
 	let globalCss = "";
-	let transformRegistry = /* @__PURE__ */ new Map();
 	let storedManifest = null;
 	let storedManifestJson = "";
 	let resolvedComponentCss = "";
@@ -333,93 +385,17 @@ function animusExtract(options = {}) {
 	let storedSystemPropMapJson = "{}";
 	let storedDynamicPropsJson = "{}";
 	let storedTransformsSource = "";
+	let layerDeclaration = "";
 	const fileCache = /* @__PURE__ */ new Map();
 	let packageMap = {};
 	let bridgeInjected = false;
-	let resolvedConfigPath = null;
-	let resolvedThemePath = null;
 	let resolvedSystemPath = null;
-	/** Resolve config via bun subprocess. Updates configJson + groupRegistryJson. */
-	function loadConfig() {
-		if (options.config) {
-			configJson = options.config;
-			groupRegistryJson = options.groupRegistry ?? groupRegistryJson;
-			return;
-		}
-		const configSource = options.configPath ? resolve(rootDir, options.configPath) : "@animus-ui/core";
-		const requireExpr = options.configPath ? `require('${configSource.replace(/\\/g, "/")}')` : `require('@animus-ui/core')`;
-		if (options.configPath) resolvedConfigPath = resolve(rootDir, options.configPath);
-		try {
-			const result = execSync(`bun -e "const m = ${requireExpr}; const r = m.getExtractConfig(); process.stdout.write(JSON.stringify(r))"`, {
-				cwd: rootDir,
-				encoding: "utf-8"
-			});
-			const { propConfig, groupRegistry } = JSON.parse(result);
-			configJson = propConfig;
-			groupRegistryJson = groupRegistry;
-		} catch (e) {
-			if (options.strict) throw new Error(`[animus-extract] Failed to auto-import config from ${configSource}: ${e}`);
-			console.warn(`[animus-extract] Failed to auto-import config from ${configSource}:`, e);
-		}
-	}
-	/** Resolve theme via bun subprocess. Updates themeJson + variableCss. */
-	function loadTheme() {
-		if (options.theme) {
-			if (typeof options.theme === "string") {
-				themeJson = options.theme;
-				variableCss = "";
-			} else {
-				themeJson = options.theme.scales;
-				variableCss = options.theme.variables;
-			}
-			return;
-		}
-		resolvedThemePath = null;
-		if (options.themePath) {
-			const p = resolve(rootDir, options.themePath);
-			if (existsSync(p)) resolvedThemePath = p;
-			else if (options.strict) throw new Error(`[animus-extract] Theme file not found: ${p}`);
-			else console.warn(`[animus-extract] Theme file not found: ${p}`);
-		} else {
-			const candidates = [
-				join(rootDir, "src", "theme.ts"),
-				join(rootDir, "src", "theme.js"),
-				join(rootDir, "theme.ts"),
-				join(rootDir, "theme.js")
-			];
-			for (const candidate of candidates) if (existsSync(candidate)) {
-				resolvedThemePath = candidate;
-				break;
-			}
-		}
-		if (resolvedThemePath) try {
-			const themeJson_ = execSync(`bun -e "${[
-				`const m = require(${JSON.stringify(resolvedThemePath)});`,
-				`const theme = m.theme || m.default;`,
-				`process.stdout.write(JSON.stringify(theme || {}));`
-			].join(" ").replace(/"/g, "\\\"")}"`, {
-				cwd: rootDir,
-				encoding: "utf-8"
-			});
-			const theme = JSON.parse(themeJson_);
-			if (theme && Object.keys(theme).length > 0) {
-				const result = evaluateThemeObject(theme);
-				themeJson = result.scalesJson;
-				variableMapJson = result.variableMapJson;
-				variableCss = result.variableCss;
-			}
-		} catch (e) {
-			if (options.strict) throw new Error(`[animus-extract] Failed to load theme from ${resolvedThemePath}: ${e}`);
-			console.warn(`[animus-extract] Failed to load theme from ${resolvedThemePath}:`, e);
-		}
-	}
 	/**
 	* Load a SystemInstance via single bun subprocess.
-	* Replaces loadConfig() + loadTheme() when `system` option is provided.
-	* The subprocess imports the module and calls .serialize().
+	* The subprocess imports the module and calls .serialize() to provide
+	* prop config, group registry, tokens, transforms, and global styles.
 	*/
 	function loadSystem() {
-		if (!options.system) return;
 		resolvedSystemPath = resolve(rootDir, options.system);
 		try {
 			const ts = Date.now();
@@ -443,6 +419,11 @@ function animusExtract(options = {}) {
 				themeJson = result.scalesJson;
 				variableMapJson = result.variableMapJson;
 				variableCss = result.variableCss;
+				if (options.prefix) {
+					const prefixed = applyPrefix(options.prefix, variableMapJson, variableCss);
+					variableMapJson = prefixed.variableMapJson;
+					variableCss = prefixed.variableCss;
+				}
 			} else if (logger) logger.warn("[animus] No tokens export found in system module — CSS variables will not be generated. Export your theme as `tokens` or `theme`.");
 			if (parsed.globalStyles) {
 				const hasReset = parsed.globalStyles.reset && Object.keys(parsed.globalStyles.reset).length > 0;
@@ -452,13 +433,21 @@ function animusExtract(options = {}) {
 					const gsThemeFile = join(tmpdir(), `animus-gs-theme-${gsTmp}.json`);
 					const gsOut = join(tmpdir(), `animus-global-${gsTmp}.json`);
 					writeFileSync(gsThemeFile, themeJson);
-					const gsCandidates = [join(__pluginDir, "resolve-global-styles.ts"), join(__pluginDir, "..", "src", "resolve-global-styles.ts")];
+					const gsNames = [
+						"resolve-global-styles.mjs",
+						"resolve-global-styles.js",
+						"resolve-global-styles.ts"
+					];
+					const gsCandidates = gsNames.map((n) => join(__pluginDir, n));
 					try {
 						const pkgDir = dirname(__require.resolve("@animus-ui/vite-plugin/package.json", { paths: [rootDir] }));
-						gsCandidates.push(join(pkgDir, "src", "resolve-global-styles.ts"));
+						for (const n of gsNames) {
+							gsCandidates.push(join(pkgDir, "dist", n));
+							gsCandidates.push(join(pkgDir, "src", n));
+						}
 					} catch {}
 					const gsScriptPath = gsCandidates.find((p) => existsSync(p));
-					if (!gsScriptPath) throw new Error(`resolve-global-styles.ts not found in: ${gsCandidates.join(", ")}`);
+					if (!gsScriptPath) throw new Error(`resolve-global-styles not found in: ${gsCandidates.join(", ")}`);
 					execSync(`bun run "${gsScriptPath}" "${resolvedSystemPath}" "${gsThemeFile}" "${gsOut}"`, {
 						cwd: rootDir,
 						encoding: "utf-8"
@@ -492,7 +481,7 @@ function animusExtract(options = {}) {
 	function runAnalysis(fileEntries) {
 		try {
 			const { analyzeProject } = __require("@animus-ui/extract");
-			const manifestJson = analyzeProject(JSON.stringify(fileEntries), themeJson, variableMapJson, configJson, groupRegistryJson, JSON.stringify(packageMap), !isProd);
+			const manifestJson = analyzeProject(JSON.stringify(fileEntries), themeJson, variableMapJson, configJson, groupRegistryJson, JSON.stringify(packageMap), !isProd, options.prefix || null);
 			storedManifest = JSON.parse(manifestJson);
 			storedManifestJson = manifestJson;
 			storedSystemPropMapJson = JSON.stringify(storedManifest?.system_prop_map ?? {});
@@ -508,24 +497,13 @@ function animusExtract(options = {}) {
 						for (const match of matches) usedTransformNames.add(match[1]);
 					}
 				}
-				if (usedTransformNames.size > 0 && transformRegistry.size > 0) {
-					const transformParts = [];
-					for (const name of usedTransformNames) {
-						const fn = transformRegistry.get(name);
-						if (fn) try {
-							transformParts.push(`${JSON.stringify(name)}: ${fn.toString()}`);
-						} catch {
-							console.warn(`[animus-extract] Could not serialize transform "${name}" — dynamic props using it will fall back to raw values`);
-						}
-					}
-					storedTransformsSource = transformParts.length > 0 ? `{ ${transformParts.join(", ")} }` : "{}";
-				} else storedTransformsSource = "{}";
+				storedTransformsSource = "{}";
 			}
 			bridgeInjected = false;
 			storedSheets = storedManifest?.sheets ?? null;
 			const rawCss = storedManifest?.css || "";
 			const systemResolveScript = globalThis.__animus_system_resolve_script;
-			if (systemResolveScript && rawCss.includes("__TRANSFORM__") && isProd) try {
+			if (systemResolveScript && rawCss.includes("__TRANSFORM__")) try {
 				const tsTmp = Date.now();
 				const tmpIn = join(tmpdir(), `animus-css-${tsTmp}.css`);
 				const tmpOut = join(tmpdir(), `animus-css-${tsTmp}.out.css`);
@@ -540,10 +518,10 @@ function animusExtract(options = {}) {
 					unlinkSync(tmpOut);
 				} catch {}
 			} catch (e) {
-				console.warn("[animus-extract] System transform resolution failed:", e?.message);
-				resolvedComponentCss = resolveTransformPlaceholders(rawCss, rootDir, options.configPath, transformRegistry);
+				console.warn("[animus-extract] Transform resolution failed:", e?.message);
+				resolvedComponentCss = rawCss;
 			}
-			else resolvedComponentCss = resolveTransformPlaceholders(rawCss, rootDir, options.configPath, transformRegistry);
+			else resolvedComponentCss = rawCss;
 			resolvedComponentCss = applyUnitFallback(resolvedComponentCss);
 		} catch (e) {
 			if (options.strict) throw new Error(`[animus-extract] analyzeProject failed: ${e}`);
@@ -557,14 +535,17 @@ function animusExtract(options = {}) {
 			isProd = config.command === "build";
 			rootDir = config.root;
 			logger = config.logger;
+			lcssTargets = resolveLightningTargets(options.targets, rootDir);
+			log(`Lightning CSS targets resolved (${Object.keys(lcssTargets).length} browsers)`);
+			if (options.layers) {
+				validateLayerOrder(options.layers);
+				log(`Custom layers: [${options.layers.join(", ")}]`);
+			}
+			if (options.prefix) log(`Namespace prefix: "${options.prefix}"`);
 		},
 		async buildStart() {
 			let t0 = performance.now();
-			if (options.system) loadSystem();
-			else {
-				loadConfig();
-				loadTheme();
-			}
+			loadSystem();
 			if (verbose) {
 				const propCount = Object.keys(JSON.parse(configJson)).length;
 				const groupCount = Object.keys(JSON.parse(groupRegistryJson)).length;
@@ -659,8 +640,11 @@ function animusExtract(options = {}) {
 				for (const d of diagnostics) if (d.kind === "bail") warn(`⚠ ${d.component} not extracted: ${d.message}`);
 				else if (d.kind === "skip") warn(`⚠ ${d.component}: skipped ${d.message}`);
 				log(`CSS: ${resolvedComponentCss.length} bytes (${Object.keys(storedManifest.components || {}).length} components)`);
+				if (options.layers) layerDeclaration = `@layer ${options.layers.join(", ")};\n`;
+				else if (storedSheets) layerDeclaration = storedSheets.declaration;
+				else layerDeclaration = `@layer ${ANIMUS_LAYERS.join(", ")};\n`;
 				if (!isProd && storedSheets) {
-					const staticSize = (storedSheets.declaration + variableCss + globalCss).length;
+					const staticSize = (layerDeclaration + variableCss + globalCss).length;
 					const componentSize = resolvedComponentCss.length;
 					log(`Delivery: split mode — static ${staticSize} bytes, components ${componentSize} bytes (adopted stylesheet)`);
 				} else log("Delivery: single file mode (production)");
@@ -674,19 +658,31 @@ function animusExtract(options = {}) {
 			return null;
 		},
 		load(id) {
+			const lcssOpts = {
+				minify: options.minify ?? isProd,
+				targets: lcssTargets,
+				warnFn: warn
+			};
 			if (id === RESOLVED_CSS_ID) {
-				if (!isProd && storedSheets) return [
-					storedSheets.declaration,
+				if (!isProd && storedSheets) return postProcessCss([
+					layerDeclaration,
 					variableCss,
 					globalCss
-				].filter(Boolean).join("\n");
-				return [
+				].filter(Boolean).join("\n"), {
+					...lcssOpts,
+					minify: false
+				});
+				return postProcessCss([
+					layerDeclaration,
 					variableCss,
 					globalCss,
 					resolvedComponentCss
-				].filter(Boolean).join("\n");
+				].filter(Boolean).join("\n"), lcssOpts);
 			}
-			if (id === RESOLVED_COMPONENTS_ID) return `export default \`${(resolvedComponentCss || "").replace(/\\/g, "\\\\").replace(/`/g, "\\`").replace(/\$/g, "\\$")}\`;`;
+			if (id === RESOLVED_COMPONENTS_ID) return `export default \`${postProcessCss(resolvedComponentCss || "", {
+				...lcssOpts,
+				minify: false
+			}).replace(/\\/g, "\\\\").replace(/`/g, "\\`").replace(/\$/g, "\\$")}\`;`;
 			if (id === RESOLVED_BRIDGE_ID) return `
 import css from '${VIRTUAL_COMPONENTS_ID}';
 
@@ -774,17 +770,10 @@ if (import.meta.hot) {
 			if ((options.exclude ?? DEFAULT_EXCLUDE).some((pattern) => file.includes(pattern) || relative(rootDir, file).includes(pattern))) return;
 			const absFile = resolve(file);
 			const relPath = relative(rootDir, absFile);
-			const isConfigChange = resolvedConfigPath && absFile === resolve(resolvedConfigPath);
-			const isThemeChange = resolvedThemePath && absFile === resolve(resolvedThemePath);
-			const isSystemChange = resolvedSystemPath && absFile === resolve(resolvedSystemPath);
-			if (isConfigChange || isThemeChange || isSystemChange) {
+			if (resolvedSystemPath && absFile === resolve(resolvedSystemPath)) {
 				const resetStart = performance.now();
 				log(`HMR geological reset: ${relPath}`);
-				if (isSystemChange) loadSystem();
-				else {
-					if (isConfigChange) loadConfig();
-					if (isThemeChange) loadTheme();
-				}
+				loadSystem();
 				try {
 					const { clearAnalysisCache } = __require("@animus-ui/extract");
 					clearAnalysisCache();

package/dist/resolve-global-styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"resolve-global-styles.d.ts","sourceRoot":"","sources":["../src/resolve-global-styles.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG"}
+{"version":3,"file":"resolve-global-styles.d.ts","sourceRoot":"","sources":["../src/resolve-global-styles.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AAgLH,OAAO,EAAE,CAAC"}

package/dist/resolve-global-styles.mjs

@@ -0,0 +1,104 @@
+import { readFileSync, writeFileSync } from "fs";
+//#region src/resolve-global-styles.ts
+/**
+* Standalone script executed via `bun run` to resolve global styles.
+*
+* Usage: bun run resolve-global-styles.ts <system-path> <theme-json> <output-file>
+*
+* Imports the system module, extracts globalStyles from .serialize(),
+* resolves prop shorthand (bg → background-color, etc.) using the full
+* prop config + theme + transforms, and writes the resolved CSS to output.
+*
+* @keyframes blocks are serialized as raw CSS (no prop resolution needed).
+*/
+const [systemPath, themeJsonPath, outputFile] = process.argv.slice(2);
+if (!systemPath || !themeJsonPath || !outputFile) {
+	process.stderr.write("Usage: bun run resolve-global-styles.ts <system-path> <theme-json-path> <output-file>\n");
+	process.exit(1);
+}
+const mod = await import(systemPath);
+const ds = mod.ds || mod.default || mod.system;
+if (!ds || !ds.serialize) throw new Error("Module does not export a SystemInstance with .serialize()");
+const cfg = ds.serialize();
+const flat = JSON.parse(readFileSync(themeJsonPath, "utf-8"));
+const propConfig = JSON.parse(cfg.propConfig);
+const transforms = cfg.transforms || {};
+const gs = cfg.globalStyles || {};
+const variableMap = {};
+for (const [tokenPath, value] of Object.entries(flat)) if (typeof value === "string" && value.startsWith("var(") && value.endsWith(")")) variableMap[tokenPath] = value.slice(4, -1);
+function camelToKebab(s) {
+	if (s.startsWith("Webkit")) return "-webkit-" + camelToKebab(s.slice(6));
+	return s.replace(/[A-Z]/g, (m, i) => (i > 0 ? "-" : "") + m.toLowerCase());
+}
+/**
+* Serialize a raw nested block (e.g. @keyframes) without prop resolution.
+* Just camelToKebab on property names — no scale lookups, no transforms.
+*/
+function serializeRawBlock(obj, indent) {
+	const lines = [];
+	for (const [key, val] of Object.entries(obj)) if (typeof val === "object" && val !== null) {
+		lines.push(`${indent}${key} {`);
+		for (const [p, v] of Object.entries(val)) lines.push(`${indent}  ${camelToKebab(p)}: ${v};`);
+		lines.push(`${indent}}`);
+	}
+	return lines.join("\n");
+}
+/**
+* Resolve {scale.path} and {scale.path/alpha} token aliases in a CSS value string.
+* Mirrors the Rust theme_resolver's resolve_token_aliases logic.
+*/
+function resolveTokenAliases(value) {
+	if (!value.includes("{")) return value;
+	return value.replace(/\{([^}]+)\}/g, (_match, content) => {
+		const slashIdx = content.indexOf("/");
+		const tokenPath = slashIdx >= 0 ? content.slice(0, slashIdx) : content;
+		const alpha = slashIdx >= 0 ? parseInt(content.slice(slashIdx + 1), 10) : null;
+		const dotIdx = tokenPath.indexOf(".");
+		const flatKey = dotIdx >= 0 ? tokenPath.slice(0, dotIdx) + "." + tokenPath.slice(dotIdx + 1).replace(/\./g, "-") : tokenPath;
+		let resolved;
+		if (variableMap[flatKey]) resolved = `var(${variableMap[flatKey]})`;
+		else if (flat[flatKey] != null) resolved = flat[flatKey];
+		else return `{${content}}`;
+		if (alpha === 0) return "transparent";
+		if (alpha != null && alpha !== 100) return `color-mix(in srgb, ${resolved} ${alpha}%, transparent)`;
+		return resolved;
+	});
+}
+/**
+* Resolve a block of selectors → style objects using prop config + theme.
+* @keyframes selectors are delegated to serializeRawBlock.
+*/
+function resolveBlock(selectors) {
+	const rules = [];
+	for (const [selector, styleObj] of Object.entries(selectors)) {
+		if (selector.startsWith("@keyframes")) {
+			rules.push(`${selector} {\n${serializeRawBlock(styleObj, "  ")}\n}`);
+			continue;
+		}
+		const decls = [];
+		for (const [prop, raw] of Object.entries(styleObj)) {
+			const config = propConfig[prop];
+			const cssProps = config?.properties?.length ? config.properties : config ? [config.property] : [prop];
+			let resolved = raw;
+			if (config?.scale) {
+				const key = config.scale + "." + raw;
+				if (flat[key] != null) resolved = flat[key];
+			}
+			if (config?.transform && transforms[config.transform]) {
+				const fn = transforms[config.transform];
+				const input = typeof resolved === "string" && !isNaN(Number(resolved)) ? Number(resolved) : resolved;
+				resolved = String(fn(input));
+			} else resolved = String(resolved);
+			resolved = resolveTokenAliases(resolved);
+			for (const cssProp of cssProps) decls.push(`  ${camelToKebab(cssProp)}: ${resolved};`);
+		}
+		if (decls.length) rules.push(`${selector} {\n${decls.join("\n")}\n}`);
+	}
+	return rules.join("\n\n");
+}
+const result = {};
+if (gs.reset) result.reset = resolveBlock(gs.reset);
+if (gs.global) result.global = resolveBlock(gs.global);
+writeFileSync(outputFile, JSON.stringify(result));
+//#endregion
+export {};

package/dist/theme-evaluator.d.ts

@@ -1,8 +1,9 @@
 /**
  * Evaluate a theme object that has already been loaded/imported.
  *
- * This is the pure logic: takes a theme object, flattens scales, builds variable CSS.
- * Use this when you have already loaded the module yourself.
+ * If the theme has a `.manifest` property (from ThemeBuilder.build()),
+ * reads structured data directly — no re-flattening or var() pattern-matching.
+ * Falls back to legacy path for themes without manifests.
  */
 export declare function evaluateThemeObject(theme: Record<string, any>): {
     scalesJson: string;

package/dist/theme-evaluator.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"theme-evaluator.d.ts","sourceRoot":"","sources":["../src/theme-evaluator.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AACH,wBAAgB,mBAAmB,CAAC,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG;IAC/D,UAAU,EAAE,MAAM,CAAC;IACnB,eAAe,EAAE,MAAM,CAAC;IACxB,WAAW,EAAE,MAAM,CAAC;CACrB,CAuCA;AAED;;;;;;;GAOG;AACH,wBAAsB,aAAa,CACjC,aAAa,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,OAAO,CAAC,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC,EAC5D,SAAS,EAAE,MAAM,GAChB,OAAO,CAAC;IACT,UAAU,EAAE,MAAM,CAAC;IACnB,eAAe,EAAE,MAAM,CAAC;IACxB,WAAW,EAAE,MAAM,CAAC;CACrB,CAAC,CAWD;AAuKD;;;;;GAKG;AACH,wBAAgB,mBAAmB,CACjC,YAAY,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC,EACjD,cAAc,EAAE,MAAM,EACtB,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,EAC5B,UAAU,EAAE,MAAM,CAAC,MAAM,EAAE,CAAC,CAAC,EAAE,GAAG,KAAK,GAAG,CAAC,GAC1C,MAAM,CAiCR"}
+{"version":3,"file":"theme-evaluator.d.ts","sourceRoot":"","sources":["../src/theme-evaluator.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AACH,wBAAgB,mBAAmB,CAAC,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG;IAC/D,UAAU,EAAE,MAAM,CAAC;IACnB,eAAe,EAAE,MAAM,CAAC;IACxB,WAAW,EAAE,MAAM,CAAC;CACrB,CAiBA;AA0CD;;;;;;;GAOG;AACH,wBAAsB,aAAa,CACjC,aAAa,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,OAAO,CAAC,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC,EAC5D,SAAS,EAAE,MAAM,GAChB,OAAO,CAAC;IACT,UAAU,EAAE,MAAM,CAAC;IACnB,eAAe,EAAE,MAAM,CAAC;IACxB,WAAW,EAAE,MAAM,CAAC;CACrB,CAAC,CAWD;AAuKD;;;;;GAKG;AACH,wBAAgB,mBAAmB,CACjC,YAAY,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC,EACjD,cAAc,EAAE,MAAM,EACtB,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,EAC5B,UAAU,EAAE,MAAM,CAAC,MAAM,EAAE,CAAC,CAAC,EAAE,GAAG,KAAK,GAAG,CAAC,GAC1C,MAAM,CAiCR"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@animus-ui/vite-plugin",
-  "version": "0.1.0-next.10",
+  "version": "0.1.0-next.17",
   "description": "Animus static CSS extraction Vite plugin",
   "author": "codecaaron <airrobb@gmail.com>",
   "license": "MIT",
@@ -25,7 +25,8 @@
     "vite": ">=5.0.0"
   },
   "dependencies": {
-    "@animus-ui/core": "0.1.0-next.10",
-    "@animus-ui/extract": "0.1.0-next.10"
+    "@animus-ui/extract": "0.1.0-next.17",
+    "browserslist": "^4.24.0",
+    "lightningcss": "^1.29.0"
   }
 }

package/dist/config-serializer.d.ts

@@ -1,25 +0,0 @@
-/**
- * Serialize the prop config from @animus-ui/core for the Rust extraction pipeline.
- *
- * Maps JS transform functions to string identifiers that the Rust crate
- * can dispatch to its native implementations.
- */
-interface PropConfig {
-    property: string;
-    properties?: string[];
-    scale?: string | Record<string, any> | any[];
-    transform?: Function;
-}
-/**
- * Serialize all prop groups from the animus config into a JSON map.
- * Prop config entries with inline scales (object/array) are skipped
- * since the Rust crate only handles named theme scales.
- */
-export declare function serializeConfig(propRegistry: Record<string, PropConfig>): string;
-/**
- * Serialize the group registry from the Animus config.
- * Maps each group name to its array of constituent prop names.
- */
-export declare function serializeGroupRegistry(groupRegistry: Record<string, string[]>): string;
-export {};
-//# sourceMappingURL=config-serializer.d.ts.map

package/dist/config-serializer.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"config-serializer.d.ts","sourceRoot":"","sources":["../src/config-serializer.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAWH,UAAU,UAAU;IAClB,QAAQ,EAAE,MAAM,CAAC;IACjB,UAAU,CAAC,EAAE,MAAM,EAAE,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,CAAC;IAC7C,SAAS,CAAC,EAAE,QAAQ,CAAC;CACtB;AASD;;;;GAIG;AACH,wBAAgB,eAAe,CAC7B,YAAY,EAAE,MAAM,CAAC,MAAM,EAAE,UAAU,CAAC,GACvC,MAAM,CA8BR;AAED;;;GAGG;AACH,wBAAgB,sBAAsB,CACpC,aAAa,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,EAAE,CAAC,GACtC,MAAM,CAER"}

package/dist/resolve-transforms.d.ts

@@ -1,14 +0,0 @@
-/**
- * Standalone script executed via `bun run` to apply transform placeholders.
- *
- * Usage: bun run resolve-transforms.ts <input-file> <output-file> [config-path]
- *
- * Reads CSS from input file containing __TRANSFORM__name__rawValue__ placeholders,
- * loads transform functions from @animus-ui/core (and optionally a custom config),
- * applies them, and writes the resolved CSS to the output file.
- *
- * When config-path is provided, transforms from that module are loaded IN ADDITION
- * to core transforms. Custom transforms take precedence on name collisions.
- */
-export {};
-//# sourceMappingURL=resolve-transforms.d.ts.map

package/dist/resolve-transforms.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"resolve-transforms.d.ts","sourceRoot":"","sources":["../src/resolve-transforms.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG"}