@praxisjs/css 0.3.4 → 0.3.5

package/dist/internal/sheet.js

@@ -0,0 +1,56 @@
+import { hashCSS } from "./hash.js";
+import { isCSSBuilder } from "../builder/css-builder.js";
+const PARAM_META = new WeakMap();
+export function addParamName(ctor, name) {
+    let names = PARAM_META.get(ctor);
+    if (!names) {
+        names = new Set();
+        PARAM_META.set(ctor, names);
+    }
+    names.add(name);
+}
+export function getParamNames(ctor) {
+    return PARAM_META.get(ctor);
+}
+const cache = new WeakMap();
+/**
+ * Builds the scoped class names and CSS of a `Stylesheet` subclass, once per class: constructing
+ * the template instance fires its `@Param()` initializers, which register the param names.
+ */
+export function compileSheet(SheetClass) {
+    const cached = cache.get(SheetClass);
+    if (cached)
+        return cached;
+    const template = new SheetClass();
+    const paramNames = getParamNames(SheetClass);
+    const classMap = {};
+    const params = [];
+    const defaults = [];
+    let css = "";
+    for (const key of Object.keys(template)) {
+        const value = template[key];
+        if (key.startsWith("$")) {
+            const rule = typeof value === "string" ? value : isCSSBuilder(value) ? String(value) : null;
+            if (rule === null)
+                continue;
+            const className = `prx-${key.slice(1).replace(/[^\w-]/g, "-")}-${hashCSS(rule)}`;
+            classMap[key] = className;
+            const block = `.${className} { ${rule.trim()} }`;
+            css = css === "" ? block : `${css}\n${block}`;
+        }
+        else if (paramNames?.has(key) && (typeof value === "string" || typeof value === "number")) {
+            params.push(key);
+            defaults.push(value);
+        }
+    }
+    const compiled = {
+        classMap: Object.freeze(classMap),
+        css,
+        key: css ? hashCSS(css) : "",
+        params,
+        defaults,
+    };
+    cache.set(SheetClass, compiled);
+    return compiled;
+}
+//# sourceMappingURL=sheet.js.map

package/dist/internal/sheet.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sheet.js","sourceRoot":"","sources":["../../src/internal/sheet.ts"],"names":[],"mappings":"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"}

package/dist/internal/static-mode.d.ts

@@ -0,0 +1,2 @@
+export declare const STATIC_MODE: boolean;
+//# sourceMappingURL=static-mode.d.ts.map

package/dist/internal/static-mode.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"static-mode.d.ts","sourceRoot":"","sources":["../../src/internal/static-mode.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,WAAW,EAAE,OAC6C,CAAC"}

package/dist/internal/static-mode.js

@@ -0,0 +1,2 @@
+export const STATIC_MODE = typeof __PRAXIS_CSS_STATIC__ !== "undefined" && __PRAXIS_CSS_STATIC__;
+//# sourceMappingURL=static-mode.js.map

package/dist/internal/static-mode.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"static-mode.js","sourceRoot":"","sources":["../../src/internal/static-mode.ts"],"names":[],"mappings":"AAIA,MAAM,CAAC,MAAM,WAAW,GACtB,OAAO,qBAAqB,KAAK,WAAW,IAAI,qBAAqB,CAAC"}

package/dist/preflight.d.ts

@@ -23,5 +23,7 @@ export interface PreflightOptions {
  * import { preflight } from '@praxisjs/css'
  * preflight()
  */
-export declare function preflight({ layer }?: PreflightOptions): void;
+export declare function preflight(options?: PreflightOptions): void;
+/** The CSS `preflight()` injects — shared with build-time extraction. */
+export declare function preflightCSS({ layer }?: PreflightOptions): string;
 //# sourceMappingURL=preflight.d.ts.map

package/dist/preflight.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"preflight.d.ts","sourceRoot":"","sources":["../src/preflight.ts"],"names":[],"mappings":"AA6KA,MAAM,WAAW,gBAAgB;IAC/B;;;;;OAKG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC;CACxB;AAED;;;;;;;;;;;;;;;GAeG;AACH,wBAAgB,SAAS,CAAC,EAAE,KAAe,EAAE,GAAE,gBAAqB,GAAG,IAAI,CAE1E"}
+{"version":3,"file":"preflight.d.ts","sourceRoot":"","sources":["../src/preflight.ts"],"names":[],"mappings":"AA6KA,MAAM,WAAW,gBAAgB;IAC/B;;;;;OAKG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC;CACxB;AAED;;;;;;;;;;;;;;;GAeG;AACH,wBAAgB,SAAS,CAAC,OAAO,CAAC,EAAE,gBAAgB,GAAG,IAAI,CAE1D;AAED,yEAAyE;AACzE,wBAAgB,YAAY,CAAC,EAAE,KAAe,EAAE,GAAE,gBAAqB,GAAG,MAAM,CAE/E"}

package/dist/preflight.js

@@ -1,4 +1,4 @@
-import { globalStyle } from "./global.js";
+import { globalCSS, injectGlobalCSS } from "./global.js";
 // Tailwind CSS preflight — https://github.com/tailwindlabs/tailwindcss/blob/main/packages/tailwindcss/preflight.css
 // --theme() references stripped and replaced with their fallback values.
 const PREFLIGHT = `
@@ -185,7 +185,11 @@ input:where([type='button'], [type='reset'], [type='submit']),
  * import { preflight } from '@praxisjs/css'
  * preflight()
  */
-export function preflight({ layer = "reset" } = {}) {
-    globalStyle(_css => PREFLIGHT, { layer });
+export function preflight(options) {
+    injectGlobalCSS(preflightCSS(options));
+}
+/** The CSS `preflight()` injects — shared with build-time extraction. */
+export function preflightCSS({ layer = "reset" } = {}) {
+    return globalCSS(() => PREFLIGHT, { layer });
 }
 //# sourceMappingURL=preflight.js.map

package/dist/preflight.js.map

@@ -1 +1 @@
-{"version":3,"file":"preflight.js","sourceRoot":"","sources":["../src/preflight.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAE1C,oHAAoH;AACpH,yEAAyE;AACzE,MAAM,SAAS,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAuKjB,CAAC;AAYF;;;;;;;;;;;;;;;GAeG;AACH,MAAM,UAAU,SAAS,CAAC,EAAE,KAAK,GAAG,OAAO,KAAuB,EAAE;IAClE,WAAW,CAAC,IAAI,CAAC,EAAE,CAAC,SAAS,EAAE,EAAE,KAAK,EAAE,CAAC,CAAC;AAC5C,CAAC"}
+{"version":3,"file":"preflight.js","sourceRoot":"","sources":["../src/preflight.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,eAAe,EAAE,MAAM,aAAa,CAAC;AAEzD,oHAAoH;AACpH,yEAAyE;AACzE,MAAM,SAAS,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAuKjB,CAAC;AAYF;;;;;;;;;;;;;;;GAeG;AACH,MAAM,UAAU,SAAS,CAAC,OAA0B;IAClD,eAAe,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC,CAAC;AACzC,CAAC;AAED,yEAAyE;AACzE,MAAM,UAAU,YAAY,CAAC,EAAE,KAAK,GAAG,OAAO,KAAuB,EAAE;IACrE,OAAO,SAAS,CAAC,GAAG,EAAE,CAAC,SAAS,EAAE,EAAE,KAAK,EAAE,CAAC,CAAC;AAC/C,CAAC"}

package/dist/tokens/decorators.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"decorators.d.ts","sourceRoot":"","sources":["../../src/tokens/decorators.ts"],"names":[],"mappings":"AASA,OAAO,EAEL,KAAK,EACL,aAAa,EACb,KAAK,YAAY,EAClB,MAAM,qBAAqB,CAAC;AAyB7B;;;;;;;;;;;;;;;;;;GAkBG;AACH,wBAAgB,MAAM,CACpB,SAAS,EAAE,QAAQ,MAAM,GAAG,IAAI,EAAE,OAAO,EAAE,KAAK,OAAO,EACvD,YAAY,EAAE,UAAU,OAAO,EAC/B,MAAM,CAAC,EAAE,OAAO,CAAC,YAAY,CAAC,GAE7B,GAAG,CAQL;AAID;;;;;;;;;;;;;;;;GAgBG;AACH,wBAAgB,KAAK,IAYF,CAAC,MAAM,EAAE,SAAS,EAAE,OAAO,EAAE,0BAA0B,CAAC,GAAG,CAAC,KAAK,IAAI,CACvF;AAED,OAAO,EAAE,KAAK,EAAE,aAAa,EAAE,KAAK,YAAY,EAAE,CAAC"}
+{"version":3,"file":"decorators.d.ts","sourceRoot":"","sources":["../../src/tokens/decorators.ts"],"names":[],"mappings":"AASA,OAAO,EAGL,KAAK,EACL,aAAa,EACb,KAAK,YAAY,EAClB,MAAM,qBAAqB,CAAC;AAoC7B;;;;;;;;;;;;;;;;;;GAkBG;AACH,wBAAgB,MAAM,CACpB,SAAS,EAAE,QAAQ,MAAM,GAAG,IAAI,EAAE,OAAO,EAAE,KAAK,OAAO,EACvD,YAAY,EAAE,UAAU,OAAO,EAC/B,MAAM,CAAC,EAAE,OAAO,CAAC,YAAY,CAAC,GAE7B,GAAG,CAQL;AAID;;;;;;;;;;;;;;;;GAgBG;AACH,wBAAgB,KAAK,IAYF,CAAC,MAAM,EAAE,SAAS,EAAE,OAAO,EAAE,0BAA0B,CAAC,GAAG,CAAC,KAAK,IAAI,CACvF;AAED,OAAO,EAAE,KAAK,EAAE,aAAa,EAAE,KAAK,YAAY,EAAE,CAAC"}

package/dist/tokens/decorators.js

@@ -1,20 +1,29 @@
 import { createClassDecorator, ClassBehavior, createFieldDecorator, } from "@praxisjs/decorators";
-import { createThemeInstance, theme, ThemeInstance, } from "./theme-instance.js";
+import { createThemeInstance, isActiveTheme, theme, ThemeInstance, } from "./theme-instance.js";
 // ─── @Themed ─────────────────────────────────────────────────────────────────
+const NO_ENHANCEMENT = Object.freeze({});
 class ThemedBehavior extends ClassBehavior {
     DefaultTheme;
     config;
+    #instance = null;
     constructor(DefaultTheme, config) {
         super();
         this.DefaultTheme = DefaultTheme;
         this.config = config;
     }
+    // Makes this class's theme the active one again, e.g. after another @Themed class replaced it
+    // or it was destroyed. While it is still active it is kept, so a theme the user switched to
+    // survives the component being instantiated again.
     create(_instance) {
-        createThemeInstance(this.DefaultTheme, this.config);
-        return {};
+        if (!isActiveTheme(this.#instance))
+            this.#activate();
+        return NO_ENHANCEMENT;
     }
     initialize(_Enhanced, _original) {
-        createThemeInstance(this.DefaultTheme, this.config);
+        this.#activate();
+    }
+    #activate() {
+        this.#instance = createThemeInstance(this.DefaultTheme, this.config);
     }
 }
 /**

package/dist/tokens/decorators.js.map

@@ -1 +1 @@
-{"version":3,"file":"decorators.js","sourceRoot":"","sources":["../../src/tokens/decorators.ts"],"names":[],"mappings":"AACA,OAAO,EACL,oBAAoB,EACpB,aAAa,EAEb,oBAAoB,GAErB,MAAM,sBAAsB,CAAC;AAE9B,OAAO,EACL,mBAAmB,EACnB,KAAK,EACL,aAAa,GAEd,MAAM,qBAAqB,CAAC;AAE7B,gFAAgF;AAEhF,MAAM,cAAe,SAAQ,aAAa;IAErB;IACA;IAFnB,YACmB,YAA+B,EAC/B,MAA6B;QAE9C,KAAK,EAAE,CAAC;QAHS,iBAAY,GAAZ,YAAY,CAAmB;QAC/B,WAAM,GAAN,MAAM,CAAuB;IAGhD,CAAC;IAED,MAAM,CAAC,SAAwB;QAC7B,mBAAmB,CAAC,IAAI,CAAC,YAAY,EAAE,IAAI,CAAC,MAAM,CAAC,CAAC;QACpD,OAAO,EAAE,CAAC;IACZ,CAAC;IAED,UAAU,CACR,SAA8C,EAC9C,SAA8C;QAE9C,mBAAmB,CAAC,IAAI,CAAC,YAAY,EAAE,IAAI,CAAC,MAAM,CAAC,CAAC;IACtD,CAAC;CACF;AAED;;;;;;;;;;;;;;;;;;GAkBG;AACH,MAAM,UAAU,MAAM,CACpB,SAAuD,EACvD,YAA+B,EAC/B,MAA8B;IAG9B,OAAO,oBAAoB,CACzB,IAAI,cAAc,CAAC,YAAY,EAAE,MAAM,IAAI,EAAE,CAAC,CAKvC,CAAC;AACZ,CAAC;AAED,iFAAiF;AAEjF;;;;;;;;;;;;;;;;GAgBG;AACH,MAAM,UAAU,KAAK;IACnB,OAAO,oBAAoB,CAAC;QAC1B,IAAI,CAAC,SAAS,EAAE,KAAK,EAAE,aAAa;YAClC,OAAO;gBACL,UAAU,EAAE;oBACV,GAAG,KAAoB,OAAO,KAAK,EAAE,CAAC,CAAC,CAAC;oBACxC,gEAAgE;oBAChE,GAAG,KAAU,CAAC;iBACf;aACF,CAAC;QACJ,CAAC;QACD,8DAA8D;KAC/D,CAAqF,CAAC;AACzF,CAAC;AAED,OAAO,EAAE,KAAK,EAAE,aAAa,EAAqB,CAAC"}
+{"version":3,"file":"decorators.js","sourceRoot":"","sources":["../../src/tokens/decorators.ts"],"names":[],"mappings":"AACA,OAAO,EACL,oBAAoB,EACpB,aAAa,EAEb,oBAAoB,GAErB,MAAM,sBAAsB,CAAC;AAE9B,OAAO,EACL,mBAAmB,EACnB,aAAa,EACb,KAAK,EACL,aAAa,GAEd,MAAM,qBAAqB,CAAC;AAE7B,gFAAgF;AAEhF,MAAM,cAAc,GAAqB,MAAM,CAAC,MAAM,CAAC,EAAE,CAAC,CAAC;AAE3D,MAAM,cAAe,SAAQ,aAAa;IAIrB;IACA;IAJnB,SAAS,GAAyB,IAAI,CAAC;IAEvC,YACmB,YAA+B,EAC/B,MAA6B;QAE9C,KAAK,EAAE,CAAC;QAHS,iBAAY,GAAZ,YAAY,CAAmB;QAC/B,WAAM,GAAN,MAAM,CAAuB;IAGhD,CAAC;IAED,8FAA8F;IAC9F,4FAA4F;IAC5F,mDAAmD;IACnD,MAAM,CAAC,SAAwB;QAC7B,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,SAAS,CAAC;YAAE,IAAI,CAAC,SAAS,EAAE,CAAC;QACrD,OAAO,cAAc,CAAC;IACxB,CAAC;IAED,UAAU,CACR,SAA8C,EAC9C,SAA8C;QAE9C,IAAI,CAAC,SAAS,EAAE,CAAC;IACnB,CAAC;IAED,SAAS;QACP,IAAI,CAAC,SAAS,GAAG,mBAAmB,CAAC,IAAI,CAAC,YAAY,EAAE,IAAI,CAAC,MAAM,CAAC,CAAC;IACvE,CAAC;CACF;AAED;;;;;;;;;;;;;;;;;;GAkBG;AACH,MAAM,UAAU,MAAM,CACpB,SAAuD,EACvD,YAA+B,EAC/B,MAA8B;IAG9B,OAAO,oBAAoB,CACzB,IAAI,cAAc,CAAC,YAAY,EAAE,MAAM,IAAI,EAAE,CAAC,CAKvC,CAAC;AACZ,CAAC;AAED,iFAAiF;AAEjF;;;;;;;;;;;;;;;;GAgBG;AACH,MAAM,UAAU,KAAK;IACnB,OAAO,oBAAoB,CAAC;QAC1B,IAAI,CAAC,SAAS,EAAE,KAAK,EAAE,aAAa;YAClC,OAAO;gBACL,UAAU,EAAE;oBACV,GAAG,KAAoB,OAAO,KAAK,EAAE,CAAC,CAAC,CAAC;oBACxC,gEAAgE;oBAChE,GAAG,KAAU,CAAC;iBACf;aACF,CAAC;QACJ,CAAC;QACD,8DAA8D;KAC/D,CAAqF,CAAC;AACzF,CAAC;AAED,OAAO,EAAE,KAAK,EAAE,aAAa,EAAqB,CAAC"}

package/dist/tokens/theme-instance.d.ts

@@ -1,3 +1,6 @@
+/** The `--token: value` pairs of a theme instance's string and number fields. */
+export declare function instanceToVars(instance: Record<string, unknown>): Record<string, string>;
+export declare function varsToCSS(vars: Record<string, string>): string;
 export interface ThemedConfig {
     persist: boolean;
     syncTabs: boolean;
@@ -25,6 +28,8 @@ export declare class ThemeInstance {
     destroy(): void;
 }
 export declare function createThemeInstance(DefaultTheme: new () => unknown, config?: Partial<ThemedConfig>): ThemeInstance;
+/** Whether `instance` is the app-wide theme and has not been destroyed. */
+export declare function isActiveTheme(instance: ThemeInstance | null): boolean;
 /**
  * Returns the app-wide {@link ThemeInstance}.
  * Throws if `@Themed()` has not been applied to the root component.

package/dist/tokens/theme-instance.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"theme-instance.d.ts","sourceRoot":"","sources":["../../src/tokens/theme-instance.ts"],"names":[],"mappings":"AAyCA,MAAM,WAAW,YAAY;IAC3B,OAAO,EAAG,OAAO,CAAC;IAClB,QAAQ,EAAE,OAAO,CAAC;CACnB;AAOD;;;;;;;GAOG;AACH,qBAAa,aAAa;;gBAKZ,YAAY,EAAE,UAAU,OAAO,EAAE,MAAM,GAAE,OAAO,CAAC,YAAY,CAAM;IAY/E,2CAA2C;IAC3C,IAAI,OAAO,IAAI,OAAO,CAErB;IAED;;;;OAIG;IACH,MAAM,CAAC,UAAU,EAAE,UAAU,OAAO,GAAG,IAAI;IAS3C,sEAAsE;IACtE,OAAO,IAAI,IAAI;CA6BhB;AAMD,wBAAgB,mBAAmB,CACjC,YAAY,EAAE,UAAU,OAAO,EAC/B,MAAM,CAAC,EAAE,OAAO,CAAC,YAAY,CAAC,GAC7B,aAAa,CAGf;AAED;;;GAGG;AACH,wBAAgB,KAAK,IAAI,aAAa,CAKrC"}
+{"version":3,"file":"theme-instance.d.ts","sourceRoot":"","sources":["../../src/tokens/theme-instance.ts"],"names":[],"mappings":"AAKA,iFAAiF;AACjF,wBAAgB,cAAc,CAAC,QAAQ,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CASxF;AAED,wBAAgB,SAAS,CAAC,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,GAAG,MAAM,CAO9D;AAkBD,MAAM,WAAW,YAAY;IAC3B,OAAO,EAAG,OAAO,CAAC;IAClB,QAAQ,EAAE,OAAO,CAAC;CACnB;AASD;;;;;;;GAOG;AACH,qBAAa,aAAa;;gBAKZ,YAAY,EAAE,UAAU,OAAO,EAAE,MAAM,GAAE,OAAO,CAAC,YAAY,CAAM;IAW/E,2CAA2C;IAC3C,IAAI,OAAO,IAAI,OAAO,CAErB;IAED;;;;OAIG;IACH,MAAM,CAAC,UAAU,EAAE,UAAU,OAAO,GAAG,IAAI;IAS3C,sEAAsE;IACtE,OAAO,IAAI,IAAI;CA8BhB;AAMD,wBAAgB,mBAAmB,CACjC,YAAY,EAAE,UAAU,OAAO,EAC/B,MAAM,CAAC,EAAE,OAAO,CAAC,YAAY,CAAC,GAC7B,aAAa,CAKf;AAED,2EAA2E;AAC3E,wBAAgB,aAAa,CAAC,QAAQ,EAAE,aAAa,GAAG,IAAI,GAAG,OAAO,CAErE;AAED;;;GAGG;AACH,wBAAgB,KAAK,IAAI,aAAa,CAKrC"}

package/dist/tokens/theme-instance.js

@@ -1,21 +1,23 @@
 import { getCollector } from "../internal/collector.js";
+import { toKebab } from "../internal/kebab.js";
 // ─── helpers ──────────────────────────────────────────────────────────────────
-function camelToKebab(s) {
-    return s.replace(/([A-Z])/g, "-$1").toLowerCase();
-}
-function instanceToVars(instance) {
+/** The `--token: value` pairs of a theme instance's string and number fields. */
+export function instanceToVars(instance) {
     const result = {};
-    for (const [key, val] of Object.entries(instance)) {
+    for (const key of Object.keys(instance)) {
+        const val = instance[key];
         if (typeof val === "string" || typeof val === "number") {
-            result[`--${camelToKebab(key)}`] = String(val);
+            result[`--${toKebab(key)}`] = String(val);
         }
     }
     return result;
 }
-function varsToCSS(vars) {
-    const body = Object.entries(vars)
-        .map(([k, v]) => `  ${k}: ${v};`)
-        .join("\n");
+export function varsToCSS(vars) {
+    let body = "";
+    for (const name of Object.keys(vars)) {
+        const line = `  ${name}: ${vars[name]};`;
+        body = body === "" ? line : `${body}\n${line}`;
+    }
     return `:root {\n${body}\n}`;
 }
 function applyVarsToRoot(vars) {
@@ -36,6 +38,7 @@ function applyVarsToRoot(vars) {
 }
 const STORAGE_KEY = "praxis-theme";
 const BROADCAST_KEY = "praxis-theme";
+const destroyed = new WeakSet();
 // ─── ThemeInstance ────────────────────────────────────────────────────────────
 /**
  * Manages the active design token theme: injects CSS custom properties on
@@ -53,11 +56,10 @@ export class ThemeInstance {
         this.#config = { persist: false, syncTabs: false, ...config };
         this.#current = new DefaultTheme();
         const saved = this.#config.persist ? this.#loadFromStorage() : null;
-        if (typeof document !== "undefined") {
-            applyVarsToRoot(saved ?? instanceToVars(this.#current));
-            if (this.#config.syncTabs)
-                this.#setupBroadcast();
-        }
+        // Also reaches an active collector when there is no document (server render).
+        applyVarsToRoot(saved ?? instanceToVars(this.#current));
+        if (this.#config.syncTabs && typeof document !== "undefined")
+            this.#setupBroadcast();
     }
     /** The currently active theme instance. */
     get current() {
@@ -71,8 +73,7 @@ export class ThemeInstance {
     switch(ThemeClass) {
         this.#current = new ThemeClass();
         const vars = instanceToVars(this.#current);
-        if (typeof document !== "undefined")
-            applyVarsToRoot(vars);
+        applyVarsToRoot(vars);
         if (this.#config.persist)
             this.#saveToStorage(vars);
         if (this.#config.syncTabs)
@@ -80,6 +81,7 @@ export class ThemeInstance {
     }
     /** Removes the injected `<style>` and closes the BroadcastChannel. */
     destroy() {
+        destroyed.add(this);
         this.#channel?.close();
         this.#channel = null;
         if (typeof document !== "undefined") {
@@ -114,9 +116,15 @@ export class ThemeInstance {
 // ─── Singleton ────────────────────────────────────────────────────────────────
 let _instance = null;
 export function createThemeInstance(DefaultTheme, config) {
+    // The replaced instance would otherwise keep its BroadcastChannel open for the page lifetime.
+    _instance?.destroy();
     _instance = new ThemeInstance(DefaultTheme, config);
     return _instance;
 }
+/** Whether `instance` is the app-wide theme and has not been destroyed. */
+export function isActiveTheme(instance) {
+    return instance !== null && instance === _instance && !destroyed.has(instance);
+}
 /**
  * Returns the app-wide {@link ThemeInstance}.
  * Throws if `@Themed()` has not been applied to the root component.

package/dist/tokens/theme-instance.js.map

@@ -1 +1 @@
-{"version":3,"file":"theme-instance.js","sourceRoot":"","sources":["../../src/tokens/theme-instance.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"theme-instance.js","sourceRoot":"","sources":["../../src/tokens/theme-instance.ts"],"names":[],"mappings":"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"}

package/dist/tokens/token-sheet.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"token-sheet.d.ts","sourceRoot":"","sources":["../../src/tokens/token-sheet.ts"],"names":[],"mappings":"AAqBA;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,eAAO,MAAM,UAAU,EAaN,QAAQ,MAAM,GAAG,IAAI,EAAE,OAAO,EAAE,KAAK,MAAM,CAAC;AAI7D;;;;;;;;;;;;;;;GAeG;AACH,KAAK,WAAW,CAAC,CAAC,SAAS,QAAQ,MAAM,GAAG,IAAI,EAAE,OAAO,EAAE,KAAK,OAAO,IAAI;IACzE,QAAQ,EAAE,CAAC,IAAI,MAAM,YAAY,CAAC,CAAC,CAAC,IAAI,CAAC,SAAS,MAAM,GAAG,CAAC,GAAG,KAAK,GAAG,MAAM;CAC9E,CAAC;AAEF,wBAAgB,SAAS,CAAC,CAAC,SAAS,QAAQ,MAAM,GAAG,IAAI,EAAE,OAAO,EAAE,KAAK,OAAO,EAC9E,GAAG,EAAE,CAAC,GACL,WAAW,CAAC,CAAC,CAAC,CAEhB"}
+{"version":3,"file":"token-sheet.d.ts","sourceRoot":"","sources":["../../src/tokens/token-sheet.ts"],"names":[],"mappings":"AAoBA;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,eAAO,MAAM,UAAU,EAcN,QAAQ,MAAM,GAAG,IAAI,EAAE,OAAO,EAAE,KAAK,MAAM,CAAC;AAI7D;;;;;;;;;;;;;;;GAeG;AACH,KAAK,WAAW,CAAC,CAAC,SAAS,QAAQ,MAAM,GAAG,IAAI,EAAE,OAAO,EAAE,KAAK,OAAO,IAAI;IACzE,QAAQ,EAAE,CAAC,IAAI,MAAM,YAAY,CAAC,CAAC,CAAC,IAAI,CAAC,SAAS,MAAM,GAAG,CAAC,GAAG,KAAK,GAAG,MAAM;CAC9E,CAAC;AAEF,wBAAgB,SAAS,CAAC,CAAC,SAAS,QAAQ,MAAM,GAAG,IAAI,EAAE,OAAO,EAAE,KAAK,OAAO,EAC9E,GAAG,EAAE,CAAC,GACL,WAAW,CAAC,CAAC,CAAC,CAEhB"}

package/dist/tokens/token-sheet.js

@@ -1,7 +1,4 @@
-// ─── camelCase → --kebab-case ─────────────────────────────────────────────────
-function camelToKebab(s) {
-    return s.replace(/([A-Z])/g, "-$1").toLowerCase();
-}
+import { toKebab } from "../internal/kebab.js";
 // ─── Static props that must never be intercepted ──────────────────────────────
 const SKIP = new Set([
     "length", "name", "prototype", "constructor",
@@ -11,6 +8,8 @@ const SKIP = new Set([
     "__esModule", "then", "catch", "finally",
 ]);
 // ─── TokenSheet ───────────────────────────────────────────────────────────────
+// Every static read of a token goes through the trap, so each name's reference is built once.
+const refs = new Map();
 // eslint-disable-next-line @typescript-eslint/no-extraneous-class
 const _Base = class {
 };
@@ -39,11 +38,15 @@ const _Base = class {
  */
 export const TokenSheet = new Proxy(_Base, {
     get(target, prop, receiver) {
-        if (typeof prop === "string" &&
-            !SKIP.has(prop) &&
-            !prop.startsWith("_") &&
-            !prop.startsWith("$")) {
-            return `var(--${camelToKebab(prop)})`;
+        if (typeof prop === "string") {
+            const ref = refs.get(prop);
+            if (ref !== undefined)
+                return ref;
+            if (!SKIP.has(prop) && !prop.startsWith("_") && !prop.startsWith("$")) {
+                const created = `var(--${toKebab(prop)})`;
+                refs.set(prop, created);
+                return created;
+            }
         }
         // eslint-disable-next-line @typescript-eslint/no-unsafe-return
         return Reflect.get(target, prop, receiver);

package/dist/tokens/token-sheet.js.map

@@ -1 +1 @@
-{"version":3,"file":"token-sheet.js","sourceRoot":"","sources":["../../src/tokens/token-sheet.ts"],"names":[],"mappings":"AAAA,iFAAiF;AAEjF,SAAS,YAAY,CAAC,CAAS;IAC7B,OAAO,CAAC,CAAC,OAAO,CAAC,UAAU,EAAE,KAAK,CAAC,CAAC,WAAW,EAAE,CAAC;AACpD,CAAC;AAED,iFAAiF;AAEjF,MAAM,IAAI,GAAG,IAAI,GAAG,CAAC;IACnB,QAAQ,EAAE,MAAM,EAAE,WAAW,EAAE,aAAa;IAC5C,UAAU,EAAE,SAAS,EAAE,gBAAgB;IACvC,gBAAgB,EAAE,eAAe,EAAE,sBAAsB;IACzD,MAAM,EAAE,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,WAAW;IAC9C,YAAY,EAAE,MAAM,EAAE,OAAO,EAAE,SAAS;CACzC,CAAC,CAAC;AAEH,iFAAiF;AAEjF,kEAAkE;AAClE,MAAM,KAAK,GAAG;CAAQ,CAAC;AAEvB;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,MAAM,CAAC,MAAM,UAAU,GAAG,IAAI,KAAK,CAAC,KAAK,EAAE;IACzC,GAAG,CAAC,MAAM,EAAE,IAAI,EAAE,QAAQ;QACxB,IACE,OAAO,IAAI,KAAK,QAAQ;YACxB,CAAC,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC;YACf,CAAC,IAAI,CAAC,UAAU,CAAC,GAAG,CAAC;YACrB,CAAC,IAAI,CAAC,UAAU,CAAC,GAAG,CAAC,EACrB,CAAC;YACD,OAAO,SAAS,YAAY,CAAC,IAAI,CAAC,GAAG,CAAC;QACxC,CAAC;QACD,+DAA+D;QAC/D,OAAO,OAAO,CAAC,GAAG,CAAC,MAAM,EAAE,IAAI,EAAE,QAAQ,CAAC,CAAC;IAC7C,CAAC;CACF,CAA2D,CAAC;AAwB7D,MAAM,UAAU,SAAS,CACvB,GAAM;IAEN,OAAO,GAAgC,CAAC;AAC1C,CAAC"}
+{"version":3,"file":"token-sheet.js","sourceRoot":"","sources":["../../src/tokens/token-sheet.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAC;AAE/C,iFAAiF;AAEjF,MAAM,IAAI,GAAG,IAAI,GAAG,CAAC;IACnB,QAAQ,EAAE,MAAM,EAAE,WAAW,EAAE,aAAa;IAC5C,UAAU,EAAE,SAAS,EAAE,gBAAgB;IACvC,gBAAgB,EAAE,eAAe,EAAE,sBAAsB;IACzD,MAAM,EAAE,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,WAAW;IAC9C,YAAY,EAAE,MAAM,EAAE,OAAO,EAAE,SAAS;CACzC,CAAC,CAAC;AAEH,iFAAiF;AAEjF,8FAA8F;AAC9F,MAAM,IAAI,GAAG,IAAI,GAAG,EAAkB,CAAC;AAEvC,kEAAkE;AAClE,MAAM,KAAK,GAAG;CAAQ,CAAC;AAEvB;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,MAAM,CAAC,MAAM,UAAU,GAAG,IAAI,KAAK,CAAC,KAAK,EAAE;IACzC,GAAG,CAAC,MAAM,EAAE,IAAI,EAAE,QAAQ;QACxB,IAAI,OAAO,IAAI,KAAK,QAAQ,EAAE,CAAC;YAC7B,MAAM,GAAG,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC;YAC3B,IAAI,GAAG,KAAK,SAAS;gBAAE,OAAO,GAAG,CAAC;YAClC,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,GAAG,CAAC,EAAE,CAAC;gBACtE,MAAM,OAAO,GAAG,SAAS,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC;gBAC1C,IAAI,CAAC,GAAG,CAAC,IAAI,EAAE,OAAO,CAAC,CAAC;gBACxB,OAAO,OAAO,CAAC;YACjB,CAAC;QACH,CAAC;QACD,+DAA+D;QAC/D,OAAO,OAAO,CAAC,GAAG,CAAC,MAAM,EAAE,IAAI,EAAE,QAAQ,CAAC,CAAC;IAC7C,CAAC;CACF,CAA2D,CAAC;AAwB7D,MAAM,UAAU,SAAS,CACvB,GAAM;IAEN,OAAO,GAAgC,CAAC;AAC1C,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@praxisjs/css",
-  "version": "0.3.4",
+  "version": "0.3.5",
   "type": "module",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -18,16 +18,24 @@
       "types": "./dist/extract.d.ts"
     }
   },
+  "files": [
+    "dist",
+    "src",
+    "!dist/**/__tests__",
+    "!src/**/__tests__",
+    "CHANGELOG.md"
+  ],
   "devDependencies": {
     "typescript": "^6.0.3"
   },
   "dependencies": {
     "csstype": "^3.2.3",
-    "@praxisjs/core": "2.2.0",
-    "@praxisjs/decorators": "1.7.0"
+    "@praxisjs/core": "2.3.0",
+    "@praxisjs/decorators": "2.0.0"
   },
   "scripts": {
-    "build": "tsc",
-    "dev": "tsc --watch"
+    "build": "tsc -p tsconfig.build.json",
+    "dev": "tsc -p tsconfig.build.json --watch",
+    "typecheck": "tsc --noEmit"
   }
 }

package/src/builder/css-builder.ts

@@ -1,3 +1,5 @@
+import { declarations } from "../internal/kebab.js";
+
 import type { Properties } from "csstype";
 
 // ─── CSSProperties ────────────────────────────────────────────────────────────
@@ -113,92 +115,86 @@ export type CSSBuilder = string & {
 
 // ─── Runtime ──────────────────────────────────────────────────────────────────
 
-const CSS_BUILDER = Symbol("css-builder");
-
-export function isCSSBuilder(value: unknown): boolean {
-  return typeof value === "object" && value !== null &&
-    (value as Record<symbol, unknown>)[CSS_BUILDER] === true;
-}
-
-function toKebab(camel: string): string {
-  return camel.replace(/([A-Z])/g, "-$1").toLowerCase();
+type Props = CSSProperties;
+
+// Every method lives once on the prototype: `this.css()` runs for each `$` field of every
+// stylesheet, and a per-builder set of ~40 closures made each call allocate them all.
+class CSSBuilderImpl {
+  readonly #parts: string[] = [];
+
+  constructor(props: Props) {
+    const root = declarations(props, "");
+    if (root) this.#parts.push(root);
+  }
+
+  #nest(selector: string, props: Props): this {
+    const css = declarations(props, "");
+    // Indents every line, including the continuation lines of a multi-line value.
+    if (css) this.#parts.push(`${selector} {\n  ${css.replaceAll("\n", "\n  ")}\n}`);
+    return this;
+  }
+
+  toString(): string {
+    return this.#parts.join("\n");
+  }
+
+  [Symbol.toPrimitive](): string {
+    return this.toString();
+  }
+
+  // Pseudo-classes — interaction
+  hover(p: Props): this { return this.#nest("&:hover", p); }
+  focus(p: Props): this { return this.#nest("&:focus", p); }
+  focusWithin(p: Props): this { return this.#nest("&:focus-within", p); }
+  focusVisible(p: Props): this { return this.#nest("&:focus-visible", p); }
+  active(p: Props): this { return this.#nest("&:active", p); }
+  visited(p: Props): this { return this.#nest("&:visited", p); }
+  target(p: Props): this { return this.#nest("&:target", p); }
+
+  // Pseudo-classes — form state
+  disabled(p: Props): this { return this.#nest('&:disabled, &[disabled], &[aria-disabled="true"]', p); }
+  enabled(p: Props): this { return this.#nest("&:enabled", p); }
+  checked(p: Props): this { return this.#nest("&:checked", p); }
+  indeterminate(p: Props): this { return this.#nest("&:indeterminate", p); }
+  required(p: Props): this { return this.#nest("&:required", p); }
+  optional(p: Props): this { return this.#nest("&:optional", p); }
+  valid(p: Props): this { return this.#nest("&:valid", p); }
+  invalid(p: Props): this { return this.#nest("&:invalid", p); }
+  readOnly(p: Props): this { return this.#nest("&:read-only", p); }
+
+  // Pseudo-classes — structural
+  first(p: Props): this { return this.#nest("&:first-child", p); }
+  last(p: Props): this { return this.#nest("&:last-child", p); }
+  nthChild(n: string | number, p: Props): this { return this.#nest(`&:nth-child(${String(n)})`, p); }
+  empty(p: Props): this { return this.#nest("&:empty", p); }
+
+  // Pseudo-classes — relational (Selectors Level 4)
+  has(sel: string, p: Props): this { return this.#nest(`&:has(${sel})`, p); }
+  is(sel: string, p: Props): this { return this.#nest(`&:is(${sel})`, p); }
+  where(sel: string, p: Props): this { return this.#nest(`&:where(${sel})`, p); }
+  not(sel: string, p: Props): this { return this.#nest(`&:not(${sel})`, p); }
+
+  // Pseudo-elements
+  before(p: Props): this { return this.#nest("&::before", p); }
+  after(p: Props): this { return this.#nest("&::after", p); }
+  placeholder(p: Props): this { return this.#nest("&::placeholder", p); }
+  selection(p: Props): this { return this.#nest("&::selection", p); }
+  firstLine(p: Props): this { return this.#nest("&::first-line", p); }
+  firstLetter(p: Props): this { return this.#nest("&::first-letter", p); }
+  marker(p: Props): this { return this.#nest("&::marker", p); }
+  backdrop(p: Props): this { return this.#nest("&::backdrop", p); }
+
+  // At-rules
+  media(q: string, p: Props): this { return this.#nest(`@media (${q})`, p); }
+  container(q: string, p: Props): this { return this.#nest(`@container (${q})`, p); }
+  supports(cond: string, p: Props): this { return this.#nest(`@supports (${cond})`, p); }
+  on(sel: string, p: Props): this { return this.#nest(sel, p); }
 }
 
-function propsToCSS(props: CSSProperties): string {
-  return Object.entries(props)
-    .filter(([, v]) => v != null)
-    .map(([k, v]) => `${toKebab(k)}: ${String(v)};`)
-    .join("\n");
+export function isCSSBuilder(value: unknown): boolean {
+  return value instanceof CSSBuilderImpl;
 }
 
 export function createCSSBuilder(initialProps: CSSProperties): CSSBuilder {
-  const parts: string[] = [];
-  const rootCSS = propsToCSS(initialProps);
-  if (rootCSS) parts.push(rootCSS);
-
-  const addNested = (selector: string, props: CSSProperties): CSSBuilder => {
-    const rawCSS = propsToCSS(props);
-    if (!rawCSS) return builder;
-    const inner = rawCSS.split("\n").map((l) => `  ${l}`).join("\n");
-    parts.push(`${selector} {\n${inner}\n}`);
-    return builder;
-  };
-
-  const toCSS = (): string => parts.join("\n");
-
-  const builder = Object.assign(Object.create(null) as object, {
-    [CSS_BUILDER]:        true,
-    toString:             toCSS,
-    [Symbol.toPrimitive]: toCSS,
-
-    // Pseudo-classes — interaction
-    hover:        (p: CSSProperties) => addNested("&:hover", p),
-    focus:        (p: CSSProperties) => addNested("&:focus", p),
-    focusWithin:  (p: CSSProperties) => addNested("&:focus-within", p),
-    focusVisible: (p: CSSProperties) => addNested("&:focus-visible", p),
-    active:       (p: CSSProperties) => addNested("&:active", p),
-    visited:      (p: CSSProperties) => addNested("&:visited", p),
-    target:       (p: CSSProperties) => addNested("&:target", p),
-
-    // Pseudo-classes — form state
-    disabled:     (p: CSSProperties) => addNested('&:disabled, &[disabled], &[aria-disabled="true"]', p),
-    enabled:      (p: CSSProperties) => addNested("&:enabled", p),
-    checked:      (p: CSSProperties) => addNested("&:checked", p),
-    indeterminate:(p: CSSProperties) => addNested("&:indeterminate", p),
-    required:     (p: CSSProperties) => addNested("&:required", p),
-    optional:     (p: CSSProperties) => addNested("&:optional", p),
-    valid:        (p: CSSProperties) => addNested("&:valid", p),
-    invalid:      (p: CSSProperties) => addNested("&:invalid", p),
-    readOnly:     (p: CSSProperties) => addNested("&:read-only", p),
-
-    // Pseudo-classes — structural
-    first:        (p: CSSProperties) => addNested("&:first-child", p),
-    last:         (p: CSSProperties) => addNested("&:last-child", p),
-    nthChild:     (n: string | number, p: CSSProperties) => addNested(`&:nth-child(${String(n)})`, p),
-    empty:        (p: CSSProperties) => addNested("&:empty", p),
-
-    // Pseudo-classes — relational (Selectors Level 4)
-    has:          (sel: string, p: CSSProperties) => addNested(`&:has(${sel})`, p),
-    is:           (sel: string, p: CSSProperties) => addNested(`&:is(${sel})`, p),
-    where:        (sel: string, p: CSSProperties) => addNested(`&:where(${sel})`, p),
-    not:          (sel: string, p: CSSProperties) => addNested(`&:not(${sel})`, p),
-
-    // Pseudo-elements
-    before:       (p: CSSProperties) => addNested("&::before", p),
-    after:        (p: CSSProperties) => addNested("&::after", p),
-    placeholder:  (p: CSSProperties) => addNested("&::placeholder", p),
-    selection:    (p: CSSProperties) => addNested("&::selection", p),
-    firstLine:    (p: CSSProperties) => addNested("&::first-line", p),
-    firstLetter:  (p: CSSProperties) => addNested("&::first-letter", p),
-    marker:       (p: CSSProperties) => addNested("&::marker", p),
-    backdrop:     (p: CSSProperties) => addNested("&::backdrop", p),
-
-    // At-rules
-    media:        (q: string, p: CSSProperties) => addNested(`@media (${q})`, p),
-    container:    (q: string, p: CSSProperties) => addNested(`@container (${q})`, p),
-    supports:     (cond: string, p: CSSProperties) => addNested(`@supports (${cond})`, p),
-    on:           (sel: string, p: CSSProperties) => addNested(sel, p),
-  }) as unknown as CSSBuilder;
-
-  return builder;
+  return new CSSBuilderImpl(initialProps) as unknown as CSSBuilder;
 }

package/src/builder/keyframes.ts

@@ -1,26 +1,23 @@
 import { getCollector } from "../internal/collector.js";
 import { hashCSS } from "../internal/hash.js";
+import { declarations } from "../internal/kebab.js";
+import { STATIC_MODE } from "../internal/static-mode.js";
 
 import type { CSSProperties } from "./css-builder.js";
 
-// Defined by the Vite CSS plugin — skip DOM injection when CSS is static.
-declare const __PRAXIS_CSS_STATIC__: boolean | undefined;
-const STATIC_MODE: boolean =
-  typeof __PRAXIS_CSS_STATIC__ !== "undefined" && __PRAXIS_CSS_STATIC__;
-
 type KeyframeStops = Record<string, CSSProperties>;
 
 const injected = new Set<string>();
 
-function toKebab(camel: string): string {
-  return camel.replace(/([A-Z])/g, "-$1").toLowerCase();
-}
-
-function stopToCSS(props: CSSProperties): string {
-  return Object.entries(props)
-    .filter(([, v]) => v != null)
-    .map(([k, v]) => `    ${toKebab(k)}: ${String(v)};`)
-    .join("\n");
+/** The scoped name and `@keyframes` rule for a set of stops — shared with build-time extraction. */
+export function keyframesRule(name: string, stops: KeyframeStops): { name: string; css: string } {
+  let body = "";
+  for (const stop in stops) {
+    const block = `  ${stop} {\n${declarations(stops[stop], "    ")}\n  }`;
+    body = body === "" ? block : `${body}\n${block}`;
+  }
+  const scopedName = `prx-${name}-${hashCSS(body)}`;
+  return { name: scopedName, css: `@keyframes ${scopedName} {\n${body}\n}` };
 }
 
 /**
@@ -42,12 +39,7 @@ function stopToCSS(props: CSSProperties): string {
  * }
  */
 export function keyframes(name: string, stops: KeyframeStops): string {
-  const stopsCSS = Object.entries(stops)
-    .map(([stop, props]) => `  ${stop} {\n${stopToCSS(props)}\n  }`)
-    .join("\n");
-
-  const scopedName = `prx-${name}-${hashCSS(stopsCSS)}`;
-  const kfCSS = `@keyframes ${scopedName} {\n${stopsCSS}\n}`;
+  const { name: scopedName, css: kfCSS } = keyframesRule(name, stops);
 
   if (STATIC_MODE) return scopedName;