@animus-ui/vite-plugin 0.1.0-next.1 → 0.1.0-next.16

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;AA0RD,wBAAgB,aAAa,CAAC,OAAO,GAAE,oBAAyB,GAAG,MAAM,CAq5BxE;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,CA45BnE;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;
@@ -65,15 +81,11 @@ function buildVariableCss(theme) {
 		}
 		if (rootLines.length > 0) parts.push(`:root {\n${rootLines.join("\n")}\n}`);
 	}
-	if (theme._tokens?.modes != null && typeof theme._tokens.modes === "object") {
-		const defaultMode = typeof theme.mode === "string" ? theme.mode : Object.keys(theme._tokens.modes)[0];
-		for (const [modeName, modeTokens] of Object.entries(theme._tokens.modes)) {
-			if (modeName === defaultMode) continue;
-			if (modeTokens == null || typeof modeTokens !== "object") continue;
-			const modeLines = [];
-			flattenModeTokens(modeLines, modeTokens, "");
-			if (modeLines.length > 0) parts.push(`[data-color-mode="${modeName}"] {\n${modeLines.join("\n")}\n}`);
-		}
+	if (theme._tokens?.modes != null && typeof theme._tokens.modes === "object") for (const [modeName, modeTokens] of Object.entries(theme._tokens.modes)) {
+		if (modeTokens == null || typeof modeTokens !== "object") continue;
+		const modeLines = [];
+		flattenModeTokens(modeLines, modeTokens, "");
+		if (modeLines.length > 0) parts.push(`[data-color-mode="${modeName}"] {\n${modeLines.join("\n")}\n}`);
 	}
 	return parts.join("\n\n");
 }
@@ -118,6 +130,8 @@ const VIRTUAL_COMPONENTS_ID = "virtual:animus/components.js";
 const RESOLVED_COMPONENTS_ID = "\0virtual:animus/components.js";
 const VIRTUAL_BRIDGE_ID = "virtual:animus/hmr-bridge.js";
 const RESOLVED_BRIDGE_ID = "\0virtual:animus/hmr-bridge.js";
+const VIRTUAL_SYSTEM_PROPS_ID = "virtual:animus/system-props";
+const RESOLVED_SYSTEM_PROPS_ID = "\0virtual:animus/system-props";
 const DEFAULT_EXTENSIONS = new Set([
 	".ts",
 	".tsx",
@@ -154,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`.
@@ -226,7 +222,7 @@ const UNITLESS_PROPERTIES = new Set([
 * Numbers inside CSS function calls (cubic-bezier, rgb, calc, etc.) are skipped.
 */
 function applyUnitFallback(css) {
-	return css.replace(/([a-z-]+)\s*:\s*([^;]+);/g, (match, prop, value) => {
+	return css.replace(/([a-z-]+)\s*:\s*([^;{}]+);/g, (match, prop, value) => {
 		if (UNITLESS_PROPERTIES.has(prop)) return match;
 		let depth = 0;
 		let fixed = "";
@@ -258,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");
@@ -278,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 = "{}";
@@ -325,106 +375,33 @@ 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 = "";
 	let storedSheets = null;
+	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();
 			const tmpScript = join(tmpdir(), `animus-system-${ts}.js`);
 			const tmpOut = join(tmpdir(), `animus-system-${ts}.json`);
-			writeFileSync(tmpScript, `const m = require(${JSON.stringify(resolvedSystemPath)});\nconst ds = m.ds || m.default || m.system;\nif (!ds || !ds.serialize) { throw new Error('Module does not export a SystemInstance with .serialize()'); }\nconst cfg = ds.serialize();\nrequire('fs').writeFileSync(${JSON.stringify(tmpOut)}, JSON.stringify({\n  propConfig: cfg.propConfig,\n  groupRegistry: cfg.groupRegistry,\n  tokens: cfg.tokens,\n  transformNames: Object.keys(cfg.transforms || {}),\n  globalStyles: cfg.globalStyles || null\n}));\n`);
+			writeFileSync(tmpScript, `const m = require(${JSON.stringify(resolvedSystemPath)});\nconst ds = m.ds || m.default || m.system;\nif (!ds || !ds.serialize) { throw new Error('Module does not export a SystemInstance with .serialize()'); }\nconst cfg = ds.serialize();\nconst tokens = m.tokens || m.theme || null;\nrequire('fs').writeFileSync(${JSON.stringify(tmpOut)}, JSON.stringify({\n  propConfig: cfg.propConfig,\n  groupRegistry: cfg.groupRegistry,\n  tokens: tokens,\n  transformNames: Object.keys(cfg.transforms || {}),\n  globalStyles: cfg.globalStyles || null\n}));\n`);
 			execSync(`bun run "${tmpScript}"`, {
 				cwd: rootDir,
 				encoding: "utf-8"
@@ -442,7 +419,12 @@ 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;
 				const hasGlobal = parsed.globalStyles.global && Object.keys(parsed.globalStyles.global).length > 0;
@@ -491,14 +473,29 @@ 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 ?? {});
+			const dynamicProps = storedManifest?.dynamic_props ?? {};
+			const newDynamicPropsJson = JSON.stringify(dynamicProps);
+			if (newDynamicPropsJson !== storedDynamicPropsJson) {
+				storedDynamicPropsJson = newDynamicPropsJson;
+				const usedTransformNames = /* @__PURE__ */ new Set();
+				for (const meta of Object.values(dynamicProps)) if (meta.transform_name) usedTransformNames.add(meta.transform_name);
+				if (storedManifest?.components) {
+					for (const comp of Object.values(storedManifest.components)) if (comp.replacement) {
+						const matches = comp.replacement.matchAll(/transforms\.(\w+)/g);
+						for (const match of matches) usedTransformNames.add(match[1]);
+					}
+				}
+				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`);
@@ -513,10 +510,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}`);
@@ -530,14 +527,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;
@@ -632,8 +632,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)");
@@ -643,22 +646,35 @@ function animusExtract(options = {}) {
 			if (id === VIRTUAL_CSS_ID) return RESOLVED_CSS_ID;
 			if (id === VIRTUAL_COMPONENTS_ID) return RESOLVED_COMPONENTS_ID;
 			if (id === VIRTUAL_BRIDGE_ID) return RESOLVED_BRIDGE_ID;
+			if (id === VIRTUAL_SYSTEM_PROPS_ID) return RESOLVED_SYSTEM_PROPS_ID;
 			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}';
 
@@ -694,6 +710,22 @@ if (import.meta.hot) {
   });
 }
 `;
+			if (id === RESOLVED_SYSTEM_PROPS_ID) {
+				let moduleSource = `export const systemPropMap = ${storedSystemPropMapJson};\nexport const systemPropGroups = ${groupRegistryJson};`;
+				if (storedDynamicPropsJson !== "{}") {
+					const dynamicProps = JSON.parse(storedDynamicPropsJson);
+					const configEntries = {};
+					for (const [propName, meta] of Object.entries(dynamicProps)) configEntries[propName] = {
+						varName: meta.var_name,
+						slotClass: meta.slot_class,
+						...meta.transform_name ? { transformName: meta.transform_name } : {},
+						...meta.scale_values && Object.keys(meta.scale_values).length > 0 ? { scaleValues: meta.scale_values } : {}
+					};
+					moduleSource += `\nexport const dynamicPropConfig = ${JSON.stringify(configEntries)};`;
+					moduleSource += `\nexport const transforms = ${storedTransformsSource};`;
+				}
+				return moduleSource;
+			}
 			return null;
 		},
 		transform(code, id) {
@@ -730,17 +762,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();
@@ -764,6 +789,11 @@ if (import.meta.hot) {
 					hmrServer.moduleGraph.invalidateModule(compModule);
 					geologicalModules.push(compModule);
 				}
+				const sysPropModule = hmrServer.moduleGraph.getModuleById(RESOLVED_SYSTEM_PROPS_ID);
+				if (sysPropModule) {
+					hmrServer.moduleGraph.invalidateModule(sysPropModule);
+					geologicalModules.push(sysPropModule);
+				}
 				return geologicalModules;
 			}
 			let source;
@@ -794,6 +824,11 @@ if (import.meta.hot) {
 				hmrServer.moduleGraph.invalidateModule(compModule);
 				modulesToUpdate.push(compModule);
 			}
+			const sysPropModule = hmrServer.moduleGraph.getModuleById(RESOLVED_SYSTEM_PROPS_ID);
+			if (sysPropModule) {
+				hmrServer.moduleGraph.invalidateModule(sysPropModule);
+				modulesToUpdate.push(sysPropModule);
+			}
 			if (storedManifest?.components) {
 				const staleFiles = /* @__PURE__ */ new Set();
 				for (const [id, desc] of Object.entries(storedManifest.components)) if ((desc.replacement ?? "") !== (prevReplacements.get(id) ?? "")) staleFiles.add(desc.file);

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;AA6KD;;;;;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.1",
+  "version": "0.1.0-next.16",
   "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.1",
-    "@animus-ui/extract": "0.1.0-next.1"
+    "@animus-ui/extract": "0.1.0-next.16",
+    "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"}