@animus-ui/vite-plugin 0.1.0-next.21 → 0.1.0-next.30

package/dist/index.d.ts

@@ -11,8 +11,6 @@ export interface AnimusExtractOptions {
     include?: string[];
     /** Glob patterns to exclude. */
     exclude?: string[];
-    /** Package name patterns to resolve and include in analysis. Defaults to ['@animus-ui/*']. */
-    packagePatterns?: string[];
     /** When true, extraction failures throw instead of warning. Use in CI to enforce full extraction. */
     strict?: boolean;
     /** Enable verbose logging. Also activatable via ANIMUS_DEBUG=1 env var. */
@@ -49,6 +47,5 @@ export interface AnimusExtractOptions {
     layers?: string[];
 }
 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":"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,CAo6BnE;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":"AA2BA,OAAO,KAAK,EAAU,MAAM,EAAE,MAAM,MAAM,CAAC;AAI3C,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,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;AA6LD,wBAAgB,aAAa,CAAC,OAAO,EAAE,oBAAoB,GAAG,MAAM,CA46BnE;AAED,eAAe,aAAa,CAAC"}

package/dist/index.mjs

@@ -5,123 +5,12 @@ import { existsSync, readFileSync, readdirSync, statSync, unlinkSync, writeFileS
 import { tmpdir } from "os";
 import { dirname, extname, join, relative, resolve } from "path";
 import { fileURLToPath } from "url";
+import { applyPrefix, applyUnitFallback, detectRuntime, execSubprocess, extractSystemFilePackages } from "@animus-ui/extract/pipeline";
 import browserslist from "browserslist";
 import { browserslistToTargets, transform } from "lightningcss";
 //#region \0rolldown/runtime.js
 var __require = /* @__PURE__ */ createRequire(import.meta.url);
 //#endregion
-//#region src/theme-evaluator.ts
-/**
-* Evaluate a theme object that has already been loaded/imported.
-*
-* 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;
-		if (scaleName === "breakpoints") {
-			flattenScale(flat, "breakpoints", scaleValue);
-			continue;
-		}
-		if (typeof scaleValue === "object" && scaleValue !== null && !Array.isArray(scaleValue)) flattenScale(flat, scaleName, scaleValue);
-	}
-	const variableMap = {};
-	for (const [tokenPath, value] of Object.entries(flat)) if (value.startsWith("var(") && value.endsWith(")")) variableMap[tokenPath] = value.slice(4, -1);
-	const variableCss = buildVariableCss(theme);
-	return {
-		scalesJson: JSON.stringify(flat),
-		variableMapJson: JSON.stringify(variableMap),
-		variableCss
-	};
-}
-/**
-* Evaluate a theme module and flatten all scales to a JSON map.
-* Format: { "scale_name.key": "css_value" }
-*
-* Uses Vite's ssrLoadModule to evaluate the theme at build start,
-* so all computed scales (shadows, gradients that depend on colors)
-* are resolved to their final values.
-*/
-async function evaluateTheme(ssrLoadModule, themePath) {
-	const mod = await ssrLoadModule(themePath);
-	const theme = mod.theme || mod.default;
-	if (!theme) throw new Error(`Theme module at ${themePath} must export 'theme' or a default export`);
-	return evaluateThemeObject(theme);
-}
-/**
-* Build the full CSS variable block from a theme's _variables and _tokens.
-*
-* Produces:
-*   :root { --color-navy-500: #282a36; ... }
-*   [data-color-mode="dark"] { --color-primary: #ff80bf; ... }
-*/
-function buildVariableCss(theme) {
-	const parts = [];
-	if (theme._variables != null && typeof theme._variables === "object") {
-		const rootLines = [];
-		for (const categoryValue of Object.values(theme._variables)) {
-			if (categoryValue == null || typeof categoryValue !== "object") continue;
-			for (const [cssVar, cssValue] of Object.entries(categoryValue)) if (typeof cssValue === "string") rootLines.push(`  ${cssVar}: ${cssValue};`);
-		}
-		if (rootLines.length > 0) parts.push(`:root {\n${rootLines.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");
-}
-/**
-* Recursively flatten mode token objects into CSS variable declarations.
-*
-* Examples:
-*   { primary: '#ff80bf' }           → '  --color-primary: #ff80bf;'
-*   { background: { _: '#fff', muted: '#f5f5f5' } }
-*     → '  --color-background: #fff;'
-*        '  --color-background-muted: #f5f5f5;'
-*
-* The special key `_` maps to the base name (no suffix).
-*/
-function flattenModeTokens(lines, obj, prefix) {
-	for (const [key, value] of Object.entries(obj)) {
-		let namePart;
-		if (key === "_") namePart = prefix;
-		else namePart = prefix ? `${prefix}-${key}` : key;
-		if (typeof value === "string" || typeof value === "number") lines.push(`  --color-${namePart}: ${value};`);
-		else if (value != null && typeof value === "object" && !Array.isArray(value)) flattenModeTokens(lines, value, namePart);
-	}
-}
-function flattenScale(flat, prefix, obj, parentKey = "") {
-	if (typeof obj !== "object" || obj === null) {
-		const key = parentKey ? `${prefix}.${parentKey}` : prefix;
-		flat[key] = String(obj);
-		return;
-	}
-	for (const [key, value] of Object.entries(obj)) {
-		const fullKey = parentKey ? `${parentKey}-${key}` : key;
-		if (typeof value === "object" && value !== null && !Array.isArray(value)) flattenScale(flat, prefix, value, fullKey);
-		else flat[`${prefix}.${fullKey}`] = String(value);
-	}
-}
-//#endregion
 //#region src/index.ts
 const __pluginDir = dirname(fileURLToPath(import.meta.url));
 const VIRTUAL_CSS_ID = "virtual:animus/styles.css";
@@ -168,93 +57,6 @@ function discoverFiles(dir, rootDir, excludePatterns) {
 	return results;
 }
 /**
-* 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`.
-*/
-const UNITLESS_PROPERTIES = new Set([
-	"animation-iteration-count",
-	"border-image-outset",
-	"border-image-slice",
-	"border-image-width",
-	"box-flex",
-	"box-flex-group",
-	"box-ordinal-group",
-	"column-count",
-	"columns",
-	"flex",
-	"flex-grow",
-	"flex-positive",
-	"flex-shrink",
-	"flex-negative",
-	"flex-order",
-	"grid-area",
-	"grid-row",
-	"grid-row-end",
-	"grid-row-span",
-	"grid-row-start",
-	"grid-column",
-	"grid-column-end",
-	"grid-column-span",
-	"grid-column-start",
-	"font-weight",
-	"line-clamp",
-	"line-height",
-	"opacity",
-	"order",
-	"orphans",
-	"tab-size",
-	"widows",
-	"z-index",
-	"zoom",
-	"fill-opacity",
-	"flood-opacity",
-	"stop-opacity",
-	"stroke-dasharray",
-	"stroke-dashoffset",
-	"stroke-miterlimit",
-	"stroke-opacity",
-	"stroke-width"
-]);
-/**
-* Append `px` to bare numeric values in CSS declarations for properties
-* that expect length units. Unitless properties are preserved as-is.
-* 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) => {
-		if (UNITLESS_PROPERTIES.has(prop)) return match;
-		let depth = 0;
-		let fixed = "";
-		let i = 0;
-		while (i < value.length) if (value[i] === "(") {
-			depth++;
-			fixed += value[i];
-			i++;
-		} else if (value[i] === ")") {
-			depth--;
-			fixed += value[i];
-			i++;
-		} else if (depth > 0) {
-			fixed += value[i];
-			i++;
-		} else {
-			const numMatch = value.slice(i).match(/^(-?\d+\.?\d*)/);
-			if (numMatch) {
-				const num = numMatch[1];
-				const after = value[i + num.length];
-				if (after && /[a-z%]/i.test(after)) fixed += num;
-				else fixed += num + "px";
-				i += num.length;
-			} else {
-				fixed += value[i];
-				i++;
-			}
-		}
-		return fixed !== value ? `${prop}:${fixed};` : match;
-	});
-}
-/**
 * Resolve browser targets for Lightning CSS.
 * Priority: explicit config → project browserslist → 'defaults' fallback.
 */
@@ -306,29 +108,6 @@ function buildFileEntriesFromCache(cache, changedPath) {
 	return entries;
 }
 /**
-* 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 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.
 */
@@ -363,6 +142,7 @@ function validateLayerOrder(layers) {
 function animusExtract(options) {
 	let themeJson = "{}";
 	let variableMapJson = "{}";
+	let contextualVarsJson = "{}";
 	let configJson = "{}";
 	let groupRegistryJson = "{}";
 	let isProd = false;
@@ -381,6 +161,7 @@ function animusExtract(options) {
 	let storedManifest = null;
 	let storedManifestJson = "";
 	let resolvedComponentCss = "";
+	let systemResolveScript = null;
 	let storedSheets = null;
 	let storedSystemPropMapJson = "{}";
 	let storedDynamicPropsJson = "{}";
@@ -399,36 +180,28 @@ function animusExtract(options) {
 		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();\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"
-			});
+			execSubprocess(`const m = require(${JSON.stringify(resolvedSystemPath)});\nconst ds = m.ds || m.default || m.system;\nif (!ds || !ds.toConfig) { throw new Error('Module does not export a SystemInstance with .serialize()'); }\nconst cfg = ds.toConfig();\nconst tokens = m.tokens || m.theme || null;\nconst serialized = tokens && typeof tokens.serialize === 'function' ? tokens.serialize() : null;\nconst globalStyleBlocks = {};\nfor (const [key, val] of Object.entries(m)) {\n  if (val && typeof val === 'object' && val.__brand === 'GlobalStyleBlock') {\n    globalStyleBlocks[key] = val.styles;\n  }\n}\nrequire('fs').writeFileSync(${JSON.stringify(tmpOut)}, JSON.stringify({\n  propConfig: cfg.propConfig,\n  groupRegistry: cfg.groupRegistry,\n  serialized: serialized,\n  transformNames: Object.keys(cfg.transforms || {}),\n  globalStyleBlocks: Object.keys(globalStyleBlocks).length > 0 ? globalStyleBlocks : null\n}));\n`, rootDir);
 			const result = readFileSync(tmpOut, "utf-8");
 			try {
-				unlinkSync(tmpScript);
 				unlinkSync(tmpOut);
 			} catch {}
 			const parsed = JSON.parse(result);
 			configJson = parsed.propConfig;
 			groupRegistryJson = parsed.groupRegistry;
-			if (parsed.tokens && Object.keys(parsed.tokens).length > 0) {
-				const result = evaluateThemeObject(parsed.tokens);
-				themeJson = result.scalesJson;
-				variableMapJson = result.variableMapJson;
-				variableCss = result.variableCss;
+			if (parsed.serialized) {
+				themeJson = parsed.serialized.scalesJson;
+				variableMapJson = parsed.serialized.variableMapJson;
+				variableCss = parsed.serialized.variableCss;
+				contextualVarsJson = parsed.serialized.contextualVarsJson;
 				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;
-				if (hasReset || hasGlobal) try {
+			} else throw new Error("[animus-extract] Theme must be built with createTheme().build(). No .serialize() method found on tokens export.");
+			if (parsed.globalStyleBlocks) {
+				if (Object.keys(parsed.globalStyleBlocks).length > 0) try {
 					const gsTmp = Date.now();
 					const gsThemeFile = join(tmpdir(), `animus-gs-theme-${gsTmp}.json`);
 					const gsOut = join(tmpdir(), `animus-global-${gsTmp}.json`);
@@ -448,26 +221,27 @@ function animusExtract(options) {
 					} catch {}
 					const gsScriptPath = gsCandidates.find((p) => existsSync(p));
 					if (!gsScriptPath) throw new Error(`resolve-global-styles not found in: ${gsCandidates.join(", ")}`);
-					execSync(`bun run "${gsScriptPath}" "${resolvedSystemPath}" "${gsThemeFile}" "${gsOut}"`, {
+					execSync(`${detectRuntime()} run "${gsScriptPath}" "${resolvedSystemPath}" "${gsThemeFile}" "${gsOut}"`, {
 						cwd: rootDir,
 						encoding: "utf-8"
 					});
 					const gsResult = JSON.parse(readFileSync(gsOut, "utf-8"));
-					const parts = [gsResult.reset, gsResult.global].filter(Boolean);
+					const parts = Object.values(gsResult).filter(Boolean);
 					if (parts.length > 0) globalCss = `@layer global {\n${parts.join("\n\n")}\n}`;
 					try {
 						unlinkSync(gsThemeFile);
 						unlinkSync(gsOut);
 					} catch {}
 				} catch (e) {
+					if (options.strict) throw new Error(`[animus-extract] Global styles resolution failed: ${e?.message || e}`);
 					console.warn("[animus-extract] Global styles resolution failed:", e?.message || e);
 				}
 			}
 			if (parsed.transformNames && parsed.transformNames.length > 0) {
 				const tsTmp = Date.now();
 				const tmpResolve = join(tmpdir(), `animus-transforms-resolve-${tsTmp}.js`);
-				writeFileSync(tmpResolve, `const m = require(${JSON.stringify(resolvedSystemPath)});\nconst ds = m.ds || m.default || m.system;\nconst cfg = ds.serialize();\nconst css = require('fs').readFileSync(process.argv[2], 'utf-8');\nconst resolved = css.replace(/__TRANSFORM__(\\w+)__(.+?)__/g, (_, name, rawValue) => {\n  const fn = cfg.transforms[name];\n  if (!fn) return rawValue;\n  const value = rawValue !== '' && !isNaN(Number(rawValue)) ? Number(rawValue) : rawValue;\n  const result = fn(value);\n  return typeof result === 'object' ? JSON.stringify(result) : String(result);\n});\nrequire('fs').writeFileSync(process.argv[3], resolved);\n`);
-				globalThis.__animus_system_resolve_script = tmpResolve;
+				writeFileSync(tmpResolve, `const m = require(${JSON.stringify(resolvedSystemPath)});\nconst ds = m.ds || m.default || m.system;\nconst cfg = ds.toConfig();\nconst css = require('fs').readFileSync(process.argv[2], 'utf-8');\nconst resolved = css.replace(/__TRANSFORM__(\\w+)__(.+?)__/g, (_, name, rawValue) => {\n  const fn = cfg.transforms[name];\n  if (!fn) return rawValue;\n  const value = rawValue !== '' && !isNaN(Number(rawValue)) ? Number(rawValue) : rawValue;\n  const result = fn(value);\n  return typeof result === 'object' ? JSON.stringify(result) : String(result);\n});\nrequire('fs').writeFileSync(process.argv[3], resolved);\n`);
+				systemResolveScript = tmpResolve;
 			}
 		} catch (e) {
 			if (options.strict) throw new Error(`[animus-extract] Failed to load system from ${resolvedSystemPath}: ${e}`);
@@ -476,12 +250,19 @@ function animusExtract(options) {
 	}
 	/**
 	* Run project analysis and update the manifest.
-	* Uses fileCache if populated (dev mode), otherwise uses provided entries.
+	*
+	* Pipeline: NAPI analyzeProject → transform resolution (subprocess) → unit fallback.
+	* NAPI and unit fallback use @animus-ui/extract. Transform resolution stays as
+	* subprocess because it needs live JS functions from the system module (ESM isolation).
 	*/
 	function runAnalysis(fileEntries) {
 		try {
 			const { analyzeProject } = __require("@animus-ui/extract");
-			const manifestJson = analyzeProject(JSON.stringify(fileEntries), themeJson, variableMapJson, configJson, groupRegistryJson, JSON.stringify(packageMap), !isProd, options.prefix || null);
+			const emitterConfig = JSON.stringify({
+				runtime_import: "@animus-ui/system",
+				css_module_id: "virtual:animus/styles.css"
+			});
+			const manifestJson = analyzeProject(JSON.stringify(fileEntries), themeJson, variableMapJson, contextualVarsJson || null, configJson, groupRegistryJson, JSON.stringify(packageMap), !isProd, options.prefix || null, emitterConfig);
 			storedManifest = JSON.parse(manifestJson);
 			storedManifestJson = manifestJson;
 			storedSystemPropMapJson = JSON.stringify(storedManifest?.system_prop_map ?? {});
@@ -502,13 +283,12 @@ function animusExtract(options) {
 			bridgeInjected = false;
 			storedSheets = storedManifest?.sheets ?? null;
 			const rawCss = storedManifest?.css || "";
-			const systemResolveScript = globalThis.__animus_system_resolve_script;
 			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`);
 				writeFileSync(tmpIn, rawCss);
-				execSync(`bun run "${systemResolveScript}" "${tmpIn}" "${tmpOut}"`, {
+				execSync(`${detectRuntime()} run "${systemResolveScript}" "${tmpIn}" "${tmpOut}"`, {
 					cwd: rootDir,
 					encoding: "utf-8"
 				});
@@ -518,6 +298,7 @@ function animusExtract(options) {
 					unlinkSync(tmpOut);
 				} catch {}
 			} catch (e) {
+				if (options.strict) throw new Error(`[animus-extract] Transform resolution failed: ${e?.message}`);
 				console.warn("[animus-extract] Transform resolution failed:", e?.message);
 				resolvedComponentCss = rawCss;
 			}
@@ -570,19 +351,7 @@ function animusExtract(options) {
 				});
 			} catch {}
 			const localFileCount = fileEntries.length;
-			const patterns = options.packagePatterns ?? ["@animus-ui/*"];
-			const packageSpecifiers = /* @__PURE__ */ new Set();
-			for (const entry of fileEntries) {
-				const importRegex = /from\s+['"]([^'"]+)['"]/g;
-				let match;
-				while ((match = importRegex.exec(entry.source)) !== null) {
-					const source = match[1];
-					for (const pattern of patterns) {
-						const prefix = pattern.replace("*", "");
-						if (source.startsWith(prefix) || source === pattern.replace("/*", "")) packageSpecifiers.add(source);
-					}
-				}
-			}
+			const packageSpecifiers = extractSystemFilePackages(resolvedSystemPath);
 			packageMap = {};
 			for (const specifier of packageSpecifiers) try {
 				const resolved = await this.resolve(specifier);
@@ -686,7 +455,7 @@ function animusExtract(options) {
 			if (id === RESOLVED_BRIDGE_ID) return `
 import css from '${VIRTUAL_COMPONENTS_ID}';
 
-const GLOBAL_KEY = '__animus_component_sheet__';
+const GLOBAL_KEY = '__animus_sheet_${createHash("md5").update(options.system).digest("hex").slice(0, 8)}__';
 let sheet = globalThis[GLOBAL_KEY] || null;
 
 if (typeof CSSStyleSheet !== 'undefined' && 'adoptedStyleSheets' in document) {
@@ -858,4 +627,4 @@ if (import.meta.hot) {
 	};
 }
 //#endregion
-export { animusExtract, animusExtract as default, evaluateTheme, evaluateThemeObject };
+export { animusExtract, animusExtract as default };

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

@@ -1,13 +1,10 @@
 /**
  * Standalone script executed via `bun run` to resolve global styles.
  *
- * Usage: bun run resolve-global-styles.ts <system-path> <theme-json> <output-file>
+ * Usage: bun run resolve-global-styles.ts <system-path> <theme-json-path> <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).
+ * Imports the system module for live transform functions (ESM isolation),
+ * then delegates all resolution logic to @animus-ui/extract/pipeline.
  */
 export {};
 //# sourceMappingURL=resolve-global-styles.d.ts.map

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;AAsLH,OAAO,EAAE,CAAC"}
+{"version":3,"file":"resolve-global-styles.d.ts","sourceRoot":"","sources":["../src/resolve-global-styles.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAkEH,OAAO,EAAE,CAAC"}

package/dist/resolve-global-styles.mjs

@@ -1,15 +1,13 @@
 import { readFileSync, writeFileSync } from "fs";
+import { resolveGlobalStyles } from "@animus-ui/extract/pipeline";
 //#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>
+* Usage: bun run resolve-global-styles.ts <system-path> <theme-json-path> <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).
+* Imports the system module for live transform functions (ESM isolation),
+* then delegates all resolution logic to @animus-ui/extract/pipeline.
 */
 const [systemPath, themeJsonPath, outputFile] = process.argv.slice(2);
 if (!systemPath || !themeJsonPath || !outputFile) {
@@ -18,90 +16,16 @@ if (!systemPath || !themeJsonPath || !outputFile) {
 }
 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();
+if (!ds || !ds.toConfig) throw new Error("Module does not export a SystemInstance with .serialize()");
+const cfg = ds.toConfig();
 const flat = JSON.parse(readFileSync(themeJsonPath, "utf-8"));
 const propConfig = JSON.parse(cfg.propConfig);
 const transforms = cfg.transforms || {};
-const gs = cfg.globalStyles || {};
+const globalStyleBlocks = {};
+for (const [key, val] of Object.entries(mod)) if (val && typeof val === "object" && val.__brand === "GlobalStyleBlock") globalStyleBlocks[key] = val.styles;
 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());
-}
-/**
-* 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")) {
-			const frames = [];
-			for (const [pct, frameStyles] of Object.entries(styleObj)) if (typeof frameStyles === "object" && frameStyles !== null) {
-				const decls = [];
-				for (const [prop, raw] of Object.entries(frameStyles)) {
-					const cfg = propConfig[prop];
-					const cssProps = cfg?.properties?.length ? cfg.properties : cfg ? [cfg.property] : [prop];
-					let resolved = raw;
-					if (cfg?.scale) {
-						const key = cfg.scale + "." + raw;
-						if (flat[key] != null) resolved = flat[key];
-					}
-					resolved = resolveTokenAliases(String(resolved));
-					for (const cssProp of cssProps) decls.push(`    ${camelToKebab(cssProp)}: ${resolved};`);
-				}
-				frames.push(`  ${pct} {\n${decls.join("\n")}\n  }`);
-			}
-			rules.push(`${selector} {\n${frames.join("\n")}\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);
+const result = resolveGlobalStyles(globalStyleBlocks, propConfig, flat, variableMap, transforms);
 writeFileSync(outputFile, JSON.stringify(result));
 //#endregion
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@animus-ui/vite-plugin",
-  "version": "0.1.0-next.21",
+  "version": "0.1.0-next.30",
   "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/extract": "0.1.0-next.21",
+    "@animus-ui/extract": "0.1.0-next.30",
+    "@animus-ui/system": "0.1.0-next.30",
     "browserslist": "^4.24.0",
     "lightningcss": "^1.29.0"
   }

package/dist/theme-evaluator.d.ts

@@ -1,33 +0,0 @@
-/**
- * Evaluate a theme object that has already been loaded/imported.
- *
- * 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;
-    variableMapJson: string;
-    variableCss: string;
-};
-/**
- * Evaluate a theme module and flatten all scales to a JSON map.
- * Format: { "scale_name.key": "css_value" }
- *
- * Uses Vite's ssrLoadModule to evaluate the theme at build start,
- * so all computed scales (shadows, gradients that depend on colors)
- * are resolved to their final values.
- */
-export declare function evaluateTheme(ssrLoadModule: (url: string) => Promise<Record<string, any>>, themePath: string): Promise<{
-    scalesJson: string;
-    variableMapJson: string;
-    variableCss: string;
-}>;
-/**
- * Resolve global style objects to a CSS string.
- *
- * Each key in `globalStyles` is a CSS selector, each value is a style object
- * using the same prop shorthand as component `.styles()` blocks.
- */
-export declare function resolveGlobalStyles(globalStyles: Record<string, Record<string, any>>, propConfigJson: string, flat: Record<string, string>, transforms: Record<string, (v: any) => any>): string;
-//# sourceMappingURL=theme-evaluator.d.ts.map

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

@@ -1 +0,0 @@
-{"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"}