@animus-ui/extract 0.1.0-next.32 → 0.1.0-next.36

package/dist/assemble-stylesheet.d.ts

@@ -0,0 +1,34 @@
+/**
+ * The 7 Animus cascade layers in required order.
+ */
+export declare const ANIMUS_LAYERS: readonly ["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
+ */
+export declare function validateLayerOrder(layers: string[]): void;
+export interface AssembleStylesheetOptions {
+    /** Custom layer order. Must contain all 7 Animus layers as a subsequence. */
+    layers?: string[];
+    /** Variable CSS: `:root { --color-*: ... }` + color mode selectors */
+    variableCss?: string;
+    /** Global CSS: `@layer global { reset + global styles }` */
+    globalCss?: string;
+    /** Component CSS from the Rust crate (may contain embedded @layer declaration) */
+    componentCss?: string;
+}
+/**
+ * Assemble the final stylesheet in canonical order:
+ *
+ * 1. `@layer` declaration (cascade ordering)
+ * 2. Emitted variables (`:root`, color mode selectors)
+ * 3. `@layer global { ... }` (reset + global styles)
+ * 4. `@layer base/variants/compounds/states/system/custom { ... }` (components)
+ *
+ * This is the single source of truth for stylesheet assembly.
+ * Both Vite and Next.js plugins must use this function.
+ */
+export declare function assembleStylesheet(options: AssembleStylesheetOptions): string;
+//# sourceMappingURL=assemble-stylesheet.d.ts.map

package/dist/assemble-stylesheet.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"assemble-stylesheet.d.ts","sourceRoot":"","sources":["../pipeline/assemble-stylesheet.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,eAAO,MAAM,aAAa,oFAQhB,CAAC;AAIX;;;;;GAKG;AACH,wBAAgB,kBAAkB,CAAC,MAAM,EAAE,MAAM,EAAE,GAAG,IAAI,CAyBzD;AAYD,MAAM,WAAW,yBAAyB;IACxC,6EAA6E;IAC7E,MAAM,CAAC,EAAE,MAAM,EAAE,CAAC;IAClB,sEAAsE;IACtE,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,4DAA4D;IAC5D,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,kFAAkF;IAClF,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,kBAAkB,CAAC,OAAO,EAAE,yBAAyB,GAAG,MAAM,CAsB7E"}

package/dist/index.d.ts

@@ -1,3 +1,5 @@
+export type { AssembleStylesheetOptions } from './assemble-stylesheet';
+export { ANIMUS_LAYERS, assembleStylesheet, validateLayerOrder, } from './assemble-stylesheet';
 export { extractSystemFilePackages } from './discover-packages';
 export { applyPrefix } from './prefix';
 export { resolveGlobalStyles, resolveTokenAliases, resolveValue, } from './resolve-global-styles';

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../pipeline/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,yBAAyB,EAAE,MAAM,qBAAqB,CAAC;AAChE,OAAO,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AACvC,OAAO,EACL,mBAAmB,EACnB,mBAAmB,EACnB,YAAY,GACb,MAAM,yBAAyB,CAAC;AACjC,OAAO,EAAE,4BAA4B,EAAE,MAAM,sBAAsB,CAAC;AACpE,OAAO,EAAE,aAAa,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAC7D,OAAO,EAAE,iBAAiB,EAAE,MAAM,iBAAiB,CAAC;AACpD,OAAO,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../pipeline/index.ts"],"names":[],"mappings":"AAAA,YAAY,EAAE,yBAAyB,EAAE,MAAM,uBAAuB,CAAC;AACvE,OAAO,EACL,aAAa,EACb,kBAAkB,EAClB,kBAAkB,GACnB,MAAM,uBAAuB,CAAC;AAC/B,OAAO,EAAE,yBAAyB,EAAE,MAAM,qBAAqB,CAAC;AAChE,OAAO,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AACvC,OAAO,EACL,mBAAmB,EACnB,mBAAmB,EACnB,YAAY,GACb,MAAM,yBAAyB,CAAC;AACjC,OAAO,EAAE,4BAA4B,EAAE,MAAM,sBAAsB,CAAC;AACpE,OAAO,EAAE,aAAa,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAC7D,OAAO,EAAE,iBAAiB,EAAE,MAAM,iBAAiB,CAAC;AACpD,OAAO,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC"}

package/dist/index.mjs

@@ -1,9 +1,77 @@
 import { createRequire } from "node:module";
 import { readFileSync } from "fs";
 import { execSync } from "child_process";
+import { UNITLESS_PROPERTIES } from "@animus-ui/properties";
 //#region \0rolldown/runtime.js
 var __require = /* @__PURE__ */ createRequire(import.meta.url);
 //#endregion
+//#region pipeline/assemble-stylesheet.ts
+/**
+* The 7 Animus cascade layers in required order.
+*/
+const ANIMUS_LAYERS = [
+	"global",
+	"base",
+	"variants",
+	"compounds",
+	"states",
+	"system",
+	"custom"
+];
+const DEFAULT_LAYER_DECLARATION = `@layer ${ANIMUS_LAYERS.join(", ")};\n`;
+/**
+* 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-extract] Custom layers missing required layers: ${absent.join(", ")}. All 7 Animus layers must be present: ${ANIMUS_LAYERS.join(", ")}`);
+		}
+		throw new Error(`[animus-extract] Custom layers have wrong order. Found ${found.join(", ")} but then expected ${missing[0]}. Required order: (${ANIMUS_LAYERS.join(" < ")}). You may interleave custom layers but must preserve this subsequence.`);
+	}
+}
+/**
+* Strip a leading `@layer ...;` declaration line from CSS if present.
+* The Rust crate embeds this in prod-mode output; we strip it so the
+* shared assembler controls placement.
+*/
+function stripLeadingLayerDeclaration(css) {
+	return css.replace(/^@layer\s+[^;{]+;\s*\n?/, "");
+}
+/**
+* Assemble the final stylesheet in canonical order:
+*
+* 1. `@layer` declaration (cascade ordering)
+* 2. Emitted variables (`:root`, color mode selectors)
+* 3. `@layer global { ... }` (reset + global styles)
+* 4. `@layer base/variants/compounds/states/system/custom { ... }` (components)
+*
+* This is the single source of truth for stylesheet assembly.
+* Both Vite and Next.js plugins must use this function.
+*/
+function assembleStylesheet(options) {
+	let layerDeclaration;
+	if (options.layers) {
+		validateLayerOrder(options.layers);
+		layerDeclaration = `@layer ${options.layers.join(", ")};\n`;
+	} else layerDeclaration = DEFAULT_LAYER_DECLARATION;
+	const componentCss = options.componentCss ? stripLeadingLayerDeclaration(options.componentCss) : "";
+	return [
+		layerDeclaration,
+		options.variableCss || "",
+		options.globalCss || "",
+		componentCss
+	].filter(Boolean).join("\n");
+}
+//#endregion
 //#region pipeline/discover-packages.ts
 /**
 * Extract external DS package names from `.includes([...])` calls in the system file.
@@ -59,27 +127,39 @@ function extractSystemFilePackages(systemFilePath) {
 //#endregion
 //#region pipeline/prefix.ts
 /**
-* Apply namespace prefix to a variable map and CSS variable declarations.
+* Apply namespace prefix to a variable map, CSS variable declarations, and theme JSON.
 *
 * 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)`
+* Theme JSON:   `{ "colors.ember": "var(--color-ember)" }` -> `{ "colors.ember": "var(--prefix-color-ember)" }`
 */
-function applyPrefix(prefix, variableMapJson, variableCss) {
+function applyPrefix(prefix, variableMapJson, variableCss, themeJson, contextualVarsJson) {
 	if (!prefix) return {
 		variableMapJson,
-		variableCss
+		variableCss,
+		themeJson,
+		contextualVarsJson
 	};
+	const varRefRe = /var\(--([a-zA-Z][\w-]*)\)/g;
 	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 {
+	css = css.replace(varRefRe, `var(--${prefix}-$1)`);
+	const result = {
 		variableMapJson: JSON.stringify(prefixed),
 		variableCss: css
 	};
+	if (themeJson) result.themeJson = themeJson.replace(varRefRe, `var(--${prefix}-$1)`);
+	if (contextualVarsJson) {
+		const ctxVars = JSON.parse(contextualVarsJson);
+		const prefixedCtx = {};
+		for (const [scale, names] of Object.entries(ctxVars)) prefixedCtx[scale] = names.map((name) => `${prefix}-${name}`);
+		result.contextualVarsJson = JSON.stringify(prefixedCtx);
+	}
+	return result;
 }
 //#endregion
 //#region pipeline/utils.ts
@@ -240,55 +320,6 @@ function execSubprocess(script, cwd, args = []) {
 //#endregion
 //#region pipeline/unit-fallback.ts
 /**
-* 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.
@@ -327,4 +358,4 @@ function applyUnitFallback(css) {
 	});
 }
 //#endregion
-export { applyPrefix, applyUnitFallback, camelToKebab, detectRuntime, execSubprocess, extractSystemFilePackages, resolveGlobalStyles, resolveTokenAliases, resolveTransformPlaceholders, resolveValue };
+export { ANIMUS_LAYERS, applyPrefix, applyUnitFallback, assembleStylesheet, camelToKebab, detectRuntime, execSubprocess, extractSystemFilePackages, resolveGlobalStyles, resolveTokenAliases, resolveTransformPlaceholders, resolveValue, validateLayerOrder };

package/dist/prefix.d.ts

@@ -1,12 +1,15 @@
 /**
- * Apply namespace prefix to a variable map and CSS variable declarations.
+ * Apply namespace prefix to a variable map, CSS variable declarations, and theme JSON.
  *
  * 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)`
+ * Theme JSON:   `{ "colors.ember": "var(--color-ember)" }` -> `{ "colors.ember": "var(--prefix-color-ember)" }`
  */
-export declare function applyPrefix(prefix: string, variableMapJson: string, variableCss: string): {
+export declare function applyPrefix(prefix: string, variableMapJson: string, variableCss: string, themeJson?: string, contextualVarsJson?: string): {
     variableMapJson: string;
     variableCss: string;
+    themeJson?: string;
+    contextualVarsJson?: string;
 };
 //# sourceMappingURL=prefix.d.ts.map

package/dist/prefix.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"prefix.d.ts","sourceRoot":"","sources":["../pipeline/prefix.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AACH,wBAAgB,WAAW,CACzB,MAAM,EAAE,MAAM,EACd,eAAe,EAAE,MAAM,EACvB,WAAW,EAAE,MAAM,GAClB;IAAE,eAAe,EAAE,MAAM,CAAC;IAAC,WAAW,EAAE,MAAM,CAAA;CAAE,CAmBlD"}
+{"version":3,"file":"prefix.d.ts","sourceRoot":"","sources":["../pipeline/prefix.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AACH,wBAAgB,WAAW,CACzB,MAAM,EAAE,MAAM,EACd,eAAe,EAAE,MAAM,EACvB,WAAW,EAAE,MAAM,EACnB,SAAS,CAAC,EAAE,MAAM,EAClB,kBAAkB,CAAC,EAAE,MAAM,GAC1B;IACD,eAAe,EAAE,MAAM,CAAC;IACxB,WAAW,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,kBAAkB,CAAC,EAAE,MAAM,CAAC;CAC7B,CA0CA"}

package/dist/unit-fallback.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"unit-fallback.d.ts","sourceRoot":"","sources":["../pipeline/unit-fallback.ts"],"names":[],"mappings":"AAkDA;;;;GAIG;AACH,wBAAgB,iBAAiB,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CA2CrD"}
+{"version":3,"file":"unit-fallback.d.ts","sourceRoot":"","sources":["../pipeline/unit-fallback.ts"],"names":[],"mappings":"AAEA;;;;GAIG;AACH,wBAAgB,iBAAiB,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CA2CrD"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@animus-ui/extract",
-  "version": "0.1.0-next.32",
+  "version": "0.1.0-next.36",
   "description": "Animus static CSS extraction pipeline (Rust/NAPI)",
   "author": "codecaaron <airrobb@gmail.com>",
   "license": "MIT",
@@ -14,6 +14,7 @@
     "./pipeline": {
       "types": "./dist/index.d.ts",
       "import": "./dist/index.mjs",
+      "require": "./dist/index.mjs",
       "default": "./dist/index.mjs"
     }
   },
@@ -39,14 +40,18 @@
     ]
   },
   "scripts": {
-    "build": "napi build --platform --release && tsdown && tsc -p tsconfig.build.json",
+    "build": "napi build --platform --release && bun run build:ts",
+    "build:ts": "tsdown && tsc -p tsconfig.build.json",
     "build:debug": "napi build --platform",
-    "build:pipeline": "tsdown && tsc -p tsconfig.build.json"
+    "compile": "tsc -p tsconfig.build.json --noEmit"
   },
   "optionalDependencies": {
-    "@animus-ui/extract-darwin-arm64": "0.1.0-next.32",
-    "@animus-ui/extract-linux-x64-gnu": "0.1.0-next.32",
-    "@animus-ui/extract-linux-arm64-gnu": "0.1.0-next.32"
+    "@animus-ui/extract-darwin-arm64": "0.1.0-next.36",
+    "@animus-ui/extract-linux-x64-gnu": "0.1.0-next.36",
+    "@animus-ui/extract-linux-arm64-gnu": "0.1.0-next.36"
+  },
+  "dependencies": {
+    "@animus-ui/properties": "0.1.0-next.36"
   },
   "devDependencies": {
     "@animus-ui/system": "workspace:*",