@barocss/browser 0.0.1 → 0.4.0

package/dist/index.d.ts

@@ -1,5 +1,268 @@
-export * from './browser-runtime';
-export * from './change-detector';
-export * from './style-partition-manager';
-export * from './utils';
-export * from './baro-boot';
+import { Config } from '@barocss/kit';
+import { GenerateCssRulesResult } from '@barocss/kit';
+import { IncrementalParser } from '@barocss/kit';
+
+export declare function baroBoot({ loadingClassName, ...options }?: BaroBootOptions): void;
+
+declare type BaroBootOptions = BrowserRuntimeOptions & {
+    loadingClassName?: string;
+};
+
+export declare const baroStart: typeof baroBoot;
+
+export declare class BrowserRuntime {
+    private cache;
+    private rootCache;
+    private context;
+    private options;
+    private isDestroyed;
+    private incrementalParser;
+    private changeDetector;
+    private stylePartitionManager;
+    constructor(options?: BrowserRuntimeOptions);
+    /**
+     * Add debug logs (by level)
+     */
+    private debugLog;
+    private init;
+    private injectPreflightCSS;
+    private ensureCssVars;
+    private getInsertionPoint;
+    /**
+     * Dynamically add one or more class names and generate/insert CSS
+     */
+    addClass(classes: string | string[]): void;
+    /**
+     * Process classes
+     */
+    private processClasses;
+    /**
+     * Process classes using incremental parsing
+     */
+    private processClassesIncremental;
+    /**
+     * Public method to apply parser results, update internal caches, and inject CSS
+     */
+    applyParseResults(results: Array<GenerateCssRulesResult>, _opts?: {
+        isBrowser?: boolean;
+    }): void;
+    /**
+     * MutationObserver instance method to automatically call addClass when class attributes change in DOM
+     */
+    observe(root?: HTMLElement, options?: {
+        scan?: boolean;
+        onReady?: () => void;
+    }): MutationObserver;
+    private normalizeClasses;
+    has(cls: string): boolean;
+    getCss(cls: string): string | undefined;
+    getAllCss(): string;
+    getClasses(): string[];
+    /**
+     * Get comprehensive cache statistics
+     */
+    getCacheStats(): {
+        runtime: {
+            cachedClasses: number;
+            rootCacheSize: number;
+        };
+        ast: {
+            size: number;
+            maxSize: number;
+            hitRate: number;
+        };
+        incremental: {
+            processedClasses: number;
+            pendingClasses: number;
+            cacheStats: {
+                ast: {
+                    size: number;
+                    maxSize: number;
+                    hitRate: number;
+                };
+                css: {};
+            };
+        };
+    };
+    /**
+     * Clear all caches (useful for debugging or memory management)
+     */
+    clearCaches(): void;
+    reset(): void;
+    updateConfig(newConfig: Config): void;
+    removeClass(classes: string | string[]): void;
+    destroy(): void;
+    getStats(): {
+        cachedClasses: number;
+        styleElementId: string;
+        isDestroyed: boolean;
+        config: Config;
+        cacheStats: {
+            runtime: {
+                cachedClasses: number;
+                rootCacheSize: number;
+            };
+            ast: {
+                size: number;
+                maxSize: number;
+                hitRate: number;
+            };
+            incremental: {
+                processedClasses: number;
+                pendingClasses: number;
+                cacheStats: {
+                    ast: {
+                        size: number;
+                        maxSize: number;
+                        hitRate: number;
+                    };
+                    css: {};
+                };
+            };
+        };
+    };
+}
+
+export declare interface BrowserRuntimeOptions {
+    config?: Config;
+    styleId?: string;
+    insertionPoint?: 'head' | 'body' | HTMLElement;
+    maxRulesPerPartition?: number;
+}
+
+/**
+ * Change detection system for DOM mutations
+ *
+ * ⚠️ BROWSER-ONLY: This class is designed for browser environments only.
+ * It uses MutationObserver and DOM APIs that are not available in Node.js.
+ *
+ * This class monitors DOM changes and automatically processes new CSS classes
+ * that are added to elements. It uses MutationObserver to detect:
+ * - Class attribute changes on existing elements
+ * - New elements being added to the DOM
+ * - Changes in child elements
+ *
+ * For server-side usage, use IncrementalParser directly with processClassesSync()
+ * or processClasses() methods.
+ */
+export declare class ChangeDetector {
+    /** MutationObserver instance for DOM change detection */
+    private observer;
+    /** Reference to IncrementalParser for class processing */
+    private incrementalParser;
+    /** Reference to BrowserRuntime for CSS injection (optional) */
+    private BrowserRuntime?;
+    /**
+     * Create a new ChangeDetector instance
+     *
+     * @param incrementalParser - IncrementalParser instance for class processing
+     * @param BrowserRuntime - Optional BrowserRuntime instance for CSS injection
+     */
+    constructor(incrementalParser: IncrementalParser, BrowserRuntime?: BrowserRuntime);
+    setParser(parser: IncrementalParser): void;
+    /**
+     * Starts observing DOM changes for new CSS classes
+     *
+     * This method sets up a MutationObserver that monitors:
+     * - Attribute changes (specifically class attribute modifications)
+     * - Child list changes (new elements being added)
+     * - Subtree changes (changes in descendant elements)
+     *
+     * The observer automatically processes any new classes it discovers
+     * by adding them to the IncrementalParser's pending queue.
+     *
+     * @param root - The root element to observe (defaults to document.body)
+     * @param options - Configuration options including initial scan and onReady callback
+     * @returns The MutationObserver instance for external control
+     */
+    observe(root?: HTMLElement, options?: {
+        scan?: boolean;
+        onReady?: () => void;
+    }): MutationObserver;
+    /**
+     * Scan existing classes in the DOM and process them
+     */
+    private scanExistingClasses;
+    /**
+     * Processes an individual element and extracts new classes
+     *
+     * This method is called for each element discovered during DOM mutations.
+     * It:
+     * - Extracts all class names from the element's className
+     * - Filters out already processed classes
+     * - Adds new classes to the collection for batch processing
+     *
+     * @param element - The HTML element to process
+     * @param newClasses - Set to collect newly discovered class names
+     */
+    private processElement;
+    /**
+     * Stops observing DOM changes and cleans up resources
+     *
+     * This method disconnects the MutationObserver and clears the
+     * observer reference to prevent memory leaks and allow the
+     * ChangeDetector to be properly garbage collected.
+     */
+    disconnect(): void;
+}
+
+export declare function getRuntime(options: BrowserRuntimeOptions): BrowserRuntime;
+
+export declare function normalizeClassName(className: any): string;
+
+export declare function normalizeClassNameList(className: any): string[];
+
+export declare interface StylePartition {
+    id: string;
+    styles: string[];
+    styleElement: HTMLStyleElement;
+}
+
+export declare class StylePartitionManager {
+    private partitions;
+    private categoryPartitions;
+    private partitionCounter;
+    private maxRulesPerPartition;
+    private insertionPoint;
+    private classToPartitionMap;
+    private classToCategoryPartitionMap;
+    private styleIdPrefix;
+    constructor(insertionPoint: HTMLElement, maxRulesPerPartition?: number, styleIdPrefix?: string);
+    private initializeDefaultPartition;
+    private createNewCategoryPartition;
+    private createNewPartition;
+    hasRule(rule: string): boolean;
+    hasCategoryRule(rule: string, category: string): boolean;
+    setRuleCache(rule: string, partitionIndex: number): void;
+    setCategoryRuleCache(rule: string, category: string): void;
+    get currentPartition(): StylePartition;
+    getCategoryPartition(category: string): StylePartition | undefined;
+    hasDetachedPartitions(): boolean;
+    /**
+     * Escape CSS rule text
+     * - Properly escape special characters
+     * - Prevent CSS syntax errors
+     */
+    private escapeCssRule;
+    addRule(rule: string): boolean;
+    addCategoryRule(rule: string, category: string): boolean;
+    addRootRules(rules: string[]): {
+        success: number;
+        failed: number;
+    };
+    addRules(rules: GenerateCssRulesResult[]): {
+        success: number;
+        failed: number;
+    };
+    /**
+     * 특정 규칙이 어느 파티션에 있는지 찾기
+     */
+    findRulePartition(rule: string): StylePartition | null;
+    updateRuleContent(category: string, ruleContent: string): void;
+    /**
+     * 모든 파티션 정리
+     */
+    cleanup(): void;
+}
+
+export { }

package/dist/index.es.js

@@ -1,5 +1,5 @@
-import { parseResultCache as d, createContext as y, IncrementalParser as g, astCache as f } from "@barocss/kit";
-class p {
+import { parseResultCache as y, createContext as f, IncrementalParser as g, clearAstCache as P } from "@barocss/kit";
+class u {
   constructor(t, e = 50, s = "barocss-style-partition-") {
     this.partitions = [], this.categoryPartitions = /* @__PURE__ */ new Map(), this.partitionCounter = 0, this.maxRulesPerPartition = 50, this.classToPartitionMap = /* @__PURE__ */ new Map(), this.classToCategoryPartitionMap = /* @__PURE__ */ new Map(), this.styleIdPrefix = "barocss-style-partition-", this.insertionPoint = t, this.maxRulesPerPartition = e, this.styleIdPrefix = s, this.initializeDefaultPartition();
   }
@@ -43,6 +43,9 @@ class p {
   getCategoryPartition(t) {
     return this.categoryPartitions.get(t);
   }
+  hasDetachedPartitions() {
+    return [...this.partitions, ...this.categoryPartitions.values()].some((t) => !t.styleElement.isConnected);
+  }
   /**
    * Escape CSS rule text
    * - Properly escape special characters
@@ -104,10 +107,10 @@ class p {
   addRules(t) {
     let e = 0, s = 0;
     for (const i of t) {
-      const r = d.get(i.cls)?.utility?.category;
-      if (r)
+      const n = y.get(i.cls)?.utility?.category;
+      if (n)
         for (const o of i.cssList)
-          this.addCategoryRule(o, r);
+          this.addCategoryRule(o, n);
       else
         for (const o of i.cssList)
           this.addRule(o) ? e++ : s++;
@@ -141,16 +144,16 @@ class p {
       t.styleElement.parentNode && t.styleElement.parentNode.removeChild(t.styleElement);
     }), this.categoryPartitions.forEach((t) => {
       t.styleElement.parentNode && t.styleElement.parentNode.removeChild(t.styleElement);
-    }), this.partitions = [], this.partitionCounter = 0, this.classToPartitionMap.clear(), this.classToCategoryPartitionMap.clear();
+    }), this.partitions = [], this.categoryPartitions.clear(), this.partitionCounter = 0, this.classToPartitionMap.clear(), this.classToCategoryPartitionMap.clear();
   }
 }
-function C(a) {
+function p(a) {
   return a ? a instanceof SVGAnimatedString ? a.baseVal.toString() : a.toString() : "";
 }
 function c(a) {
-  return a ? C(a).split(/\s+/).filter(Boolean) : [];
+  return a ? p(a).split(/\s+/).filter(Boolean) : [];
 }
-class P {
+class m {
   /**
    * Create a new ChangeDetector instance
    * 
@@ -158,7 +161,10 @@ class P {
    * @param BrowserRuntime - Optional BrowserRuntime instance for CSS injection
    */
   constructor(t, e) {
-    this.observer = null, this.processedElements = /* @__PURE__ */ new WeakSet(), this.incrementalParser = t, this.BrowserRuntime = e;
+    this.observer = null, this.incrementalParser = t, this.BrowserRuntime = e;
+  }
+  setParser(t) {
+    this.incrementalParser = t;
   }
   /**
    * Starts observing DOM changes for new CSS classes
@@ -179,21 +185,21 @@ class P {
     return typeof window > "u" ? new MutationObserver(() => {
     }) : (this.observer && this.observer.disconnect(), this.observer = new MutationObserver((s) => {
       const i = /* @__PURE__ */ new Set();
-      if (s.forEach((n) => {
-        if (n.type === "attributes" && n.attributeName === "class") {
-          const r = n.target;
-          r.className && c(r.className).forEach((l) => {
+      if (s.forEach((r) => {
+        if (r.type === "attributes" && r.attributeName === "class") {
+          const n = r.target;
+          n.className && c(n.className).forEach((l) => {
             this.incrementalParser.isProcessed(l) || i.add(l);
           });
         }
-        n.type === "childList" && n.addedNodes.forEach((r) => {
-          r instanceof HTMLElement && (this.processElement(r, i), r.querySelectorAll("[class]").forEach((o) => {
+        r.type === "childList" && r.addedNodes.forEach((n) => {
+          n instanceof Element && (this.processElement(n, i), n.querySelectorAll("[class]").forEach((o) => {
             this.processElement(o, i);
           }));
         });
       }), i.size > 0) {
-        const n = Array.from(i), r = this.incrementalParser.processClasses(n);
-        this.BrowserRuntime?.applyParseResults(r);
+        const r = Array.from(i), n = this.incrementalParser.processClasses(r);
+        this.BrowserRuntime?.applyParseResults(n);
       }
     }), this.observer.observe(t, {
       attributes: !0,
@@ -207,18 +213,18 @@ class P {
    */
   scanExistingClasses(t, e) {
     const s = /* @__PURE__ */ new Set();
-    t.className && c(t.className).forEach((r) => {
-      this.incrementalParser.isProcessed(r) || s.add(r);
+    t.className && c(t.className).forEach((n) => {
+      this.incrementalParser.isProcessed(n) || s.add(n);
     });
     const i = t.querySelectorAll("[class]");
-    for (const n of i)
-      if (n.className) {
-        const r = c(n.className);
-        for (const o of r)
+    for (const r of i)
+      if (r.className) {
+        const n = c(r.className);
+        for (const o of n)
           this.incrementalParser.isProcessed(o) || s.add(o);
       }
     if (s.size > 0) {
-      const n = Array.from(s), r = this.incrementalParser.processClasses(n), o = r.filter((h) => d.get(h.cls)?.utility?.category === "layout"), l = r.filter((h) => d.get(h.cls)?.utility?.category !== "layout");
+      const r = Array.from(s), n = this.incrementalParser.processClasses(r), o = n.filter((h) => y.get(h.cls)?.utility?.category === "layout"), l = n.filter((h) => y.get(h.cls)?.utility?.category !== "layout");
       this.BrowserRuntime?.applyParseResults(o), e?.onReady?.(), this.BrowserRuntime?.applyParseResults(l);
     }
   }
@@ -227,19 +233,17 @@ class P {
    * 
    * This method is called for each element discovered during DOM mutations.
    * It:
-   * - Checks if the element has already been processed
    * - Extracts all class names from the element's className
    * - Filters out already processed classes
    * - Adds new classes to the collection for batch processing
-   * - Marks the element as processed to avoid duplicates
    * 
    * @param element - The HTML element to process
    * @param newClasses - Set to collect newly discovered class names
    */
   processElement(t, e) {
-    this.processedElements.has(t) || (t.className && c(t.className).forEach((i) => {
+    t.className && c(t.className).forEach((i) => {
       this.incrementalParser.isProcessed(i) || e.add(i);
-    }), this.processedElements.add(t));
+    });
   }
   /**
    * Stops observing DOM changes and cleans up resources
@@ -252,7 +256,7 @@ class P {
     this.observer && (this.observer.disconnect(), this.observer = null);
   }
 }
-class m {
+class C {
   constructor(t = {}) {
     this.cache = /* @__PURE__ */ new Map(), this.rootCache = /* @__PURE__ */ new Set(), this.isDestroyed = !1;
     const e = {};
@@ -261,7 +265,7 @@ class m {
       styleId: t.styleId || "barocss-runtime",
       insertionPoint: t.insertionPoint || "head",
       maxRulesPerPartition: t.maxRulesPerPartition || 50
-    }, this.context = y(this.options.config), this.incrementalParser = new g(this.context), this.changeDetector = new P(this.incrementalParser, this), this.stylePartitionManager = new p(this.getInsertionPoint(), this.options.maxRulesPerPartition, `${this.options.styleId}-partition`), this.init();
+    }, this.context = f(this.options.config), this.incrementalParser = new g(this.context), this.changeDetector = new m(this.incrementalParser, this), this.stylePartitionManager = new u(this.getInsertionPoint(), this.options.maxRulesPerPartition, `${this.options.styleId}-partition`), this.init();
   }
   // Debugging and logging helpers
   /**
@@ -320,11 +324,16 @@ class m {
    * Public method to apply parser results, update internal caches, and inject CSS
    */
   applyParseResults(t, e) {
+    if (this.isDestroyed) return;
+    if (this.getInsertionPoint().isConnected && this.stylePartitionManager.hasDetachedPartitions()) {
+      const r = Array.from(this.cache.values());
+      this.reset(), t = [...r, ...t], t.forEach((n) => this.incrementalParser.markProcessed(n.cls));
+    }
     const s = [], i = [];
-    for (const n of t)
-      if (n.css && Array.isArray(n.cssList) && s.push(n), n.rootCss && Array.isArray(n.rootCssList))
-        for (const r of n.rootCssList)
-          this.rootCache.has(r) || (this.rootCache.add(r), i.push(r));
+    for (const r of t)
+      if (r.css && Array.isArray(r.cssList) && (s.push(r), this.cache.set(r.cls, r)), r.rootCss && Array.isArray(r.rootCssList))
+        for (const n of r.rootCssList)
+          this.rootCache.has(n) || (this.rootCache.add(n), i.push(n));
     i.length > 0 && this.stylePartitionManager.addRootRules(i.filter(Boolean)), s.length > 0 && this.stylePartitionManager.addRules(s), this.debugLog("info", `Applied ${t.length} parser results`, {
       cssRuleCount: s.length,
       rootCssCount: i.length
@@ -357,36 +366,37 @@ class m {
    * Get comprehensive cache statistics
    */
   getCacheStats() {
+    const t = this.incrementalParser.getStats();
     return {
       runtime: {
         cachedClasses: this.cache.size,
         rootCacheSize: this.rootCache.size
       },
-      ast: f.getStats(),
-      incremental: this.incrementalParser.getStats()
+      ast: t.cacheStats.ast,
+      incremental: t
     };
   }
   /**
    * Clear all caches (useful for debugging or memory management)
    */
   clearCaches() {
-    this.cache.clear(), this.rootCache.clear(), f.clear(), this.incrementalParser.clearProcessed(), this.stylePartitionManager.cleanup();
+    this.isDestroyed || (this.cache.clear(), this.rootCache.clear(), P(this.context), this.incrementalParser.clearProcessed(), this.stylePartitionManager.cleanup(), this.stylePartitionManager = new u(this.getInsertionPoint(), this.options.maxRulesPerPartition, `${this.options.styleId}-partition`), this.injectPreflightCSS(), this.ensureCssVars());
   }
   reset() {
-    this.cache.clear(), this.rootCache.clear(), this.stylePartitionManager.cleanup();
+    this.isDestroyed || (this.cache.clear(), this.rootCache.clear(), this.incrementalParser.clearProcessed(), this.stylePartitionManager.cleanup(), this.stylePartitionManager = new u(this.getInsertionPoint(), this.options.maxRulesPerPartition, `${this.options.styleId}-partition`), this.injectPreflightCSS(), this.ensureCssVars());
   }
   updateConfig(t) {
-    this.options.config = t, this.context = y(t);
+    if (this.isDestroyed) return;
     const e = Array.from(this.cache.keys());
-    this.reset(), e.length > 0 && this.addClass(e);
+    this.options.config = t, this.context = f(t), this.incrementalParser = new g(this.context), this.changeDetector.setParser(this.incrementalParser), this.reset(), e.length > 0 && this.addClass(e);
   }
   removeClass(t) {
-    const e = this.normalizeClasses(t);
-    for (const s of e)
-      this.cache.delete(s);
+    if (this.isDestroyed) return;
+    const e = new Set(this.normalizeClasses(t)), s = Array.from(this.cache.values()).filter((i) => !e.has(i.cls));
+    s.length !== this.cache.size && (this.reset(), s.forEach((i) => this.incrementalParser.markProcessed(i.cls)), this.applyParseResults(s));
   }
   destroy() {
-    this.stylePartitionManager.cleanup(), this.cache.clear(), this.rootCache.clear(), this.isDestroyed = !0;
+    this.isDestroyed || (this.changeDetector.disconnect(), this.stylePartitionManager.cleanup(), this.cache.clear(), this.rootCache.clear(), this.isDestroyed = !0);
   }
   getStats() {
     return {
@@ -398,9 +408,9 @@ class m {
     };
   }
 }
-let u = null;
+let d = null;
 function R(a) {
-  return u || (u = new m(a)), u;
+  return d || (d = new C(a)), d;
 }
 function b({ loadingClassName: a = "baro-boot", ...t } = {}) {
   const e = `${a}-doing`, s = `${a}-done`;
@@ -412,14 +422,14 @@ function b({ loadingClassName: a = "baro-boot", ...t } = {}) {
     console.error("BaroCSS boot failed:", i);
   }
 }
-const w = b;
+const E = b;
 export {
-  m as BrowserRuntime,
-  P as ChangeDetector,
-  p as StylePartitionManager,
+  C as BrowserRuntime,
+  m as ChangeDetector,
+  u as StylePartitionManager,
   b as baroBoot,
-  w as baroStart,
+  E as baroStart,
   R as getRuntime,
-  C as normalizeClassName,
+  p as normalizeClassName,
   c as normalizeClassNameList
 };

package/dist/index.umd.js

@@ -1,7 +1,7 @@
-(function(o,l){typeof exports=="object"&&typeof module<"u"?l(exports,require("@barocss/kit")):typeof define=="function"&&define.amd?define(["exports","@barocss/kit"],l):(o=typeof globalThis<"u"?globalThis:o||self,l(o.BaroCSSBrowser={},o.BaroCSSKit))})(this,(function(o,l){"use strict";class y{constructor(t,e=50,s="barocss-style-partition-"){this.partitions=[],this.categoryPartitions=new Map,this.partitionCounter=0,this.maxRulesPerPartition=50,this.classToPartitionMap=new Map,this.classToCategoryPartitionMap=new Map,this.styleIdPrefix="barocss-style-partition-",this.insertionPoint=t,this.maxRulesPerPartition=e,this.styleIdPrefix=s,this.initializeDefaultPartition()}initializeDefaultPartition(){this.createNewPartition()}createNewCategoryPartition(t){const e={id:this.styleIdPrefix+`-${t}`,styles:[],styleElement:document.createElement("style")};return e.styleElement.id=e.id,e.styleElement.setAttribute("data-barocss","partition"),e.styleElement.setAttribute("data-category",t),this.insertionPoint.appendChild(e.styleElement),this.categoryPartitions.set(t,e),e}createNewPartition(){const t={id:this.styleIdPrefix+`-${this.partitionCounter++}`,styles:[],styleElement:document.createElement("style")};return this.partitions.push(t),t.styleElement.id=t.id,t.styleElement.setAttribute("data-barocss","partition"),t.styleElement.setAttribute("data-partition-index",this.partitionCounter.toString()),this.insertionPoint.appendChild(t.styleElement),t}hasRule(t){return this.classToPartitionMap.has(t)}hasCategoryRule(t,e){return this.classToCategoryPartitionMap.get(t)===e}setRuleCache(t,e){this.classToPartitionMap.set(t,e)}setCategoryRuleCache(t,e){this.classToCategoryPartitionMap.set(t,e)}get currentPartition(){return this.partitions[this.partitions.length-1]}getCategoryPartition(t){return this.categoryPartitions.get(t)}escapeCssRule(t){return t.replace(/\\\//g,"\\/")}addRule(t){if(this.hasRule(t))return!1;this.currentPartition.styles.length>=this.maxRulesPerPartition&&this.createNewPartition();const e=this.currentPartition,s=this.partitions.length-1;try{const i=e.styleElement.sheet;return i?i.insertRule(this.escapeCssRule(t),i.cssRules.length):e.styleElement.textContent+=t+`
+(function(o,l){typeof exports=="object"&&typeof module<"u"?l(exports,require("@barocss/kit")):typeof define=="function"&&define.amd?define(["exports","@barocss/kit"],l):(o=typeof globalThis<"u"?globalThis:o||self,l(o.BaroCSSBrowser={},o.BaroCSSKit))})(this,(function(o,l){"use strict";class u{constructor(t,e=50,s="barocss-style-partition-"){this.partitions=[],this.categoryPartitions=new Map,this.partitionCounter=0,this.maxRulesPerPartition=50,this.classToPartitionMap=new Map,this.classToCategoryPartitionMap=new Map,this.styleIdPrefix="barocss-style-partition-",this.insertionPoint=t,this.maxRulesPerPartition=e,this.styleIdPrefix=s,this.initializeDefaultPartition()}initializeDefaultPartition(){this.createNewPartition()}createNewCategoryPartition(t){const e={id:this.styleIdPrefix+`-${t}`,styles:[],styleElement:document.createElement("style")};return e.styleElement.id=e.id,e.styleElement.setAttribute("data-barocss","partition"),e.styleElement.setAttribute("data-category",t),this.insertionPoint.appendChild(e.styleElement),this.categoryPartitions.set(t,e),e}createNewPartition(){const t={id:this.styleIdPrefix+`-${this.partitionCounter++}`,styles:[],styleElement:document.createElement("style")};return this.partitions.push(t),t.styleElement.id=t.id,t.styleElement.setAttribute("data-barocss","partition"),t.styleElement.setAttribute("data-partition-index",this.partitionCounter.toString()),this.insertionPoint.appendChild(t.styleElement),t}hasRule(t){return this.classToPartitionMap.has(t)}hasCategoryRule(t,e){return this.classToCategoryPartitionMap.get(t)===e}setRuleCache(t,e){this.classToPartitionMap.set(t,e)}setCategoryRuleCache(t,e){this.classToCategoryPartitionMap.set(t,e)}get currentPartition(){return this.partitions[this.partitions.length-1]}getCategoryPartition(t){return this.categoryPartitions.get(t)}hasDetachedPartitions(){return[...this.partitions,...this.categoryPartitions.values()].some(t=>!t.styleElement.isConnected)}escapeCssRule(t){return t.replace(/\\\//g,"\\/")}addRule(t){if(this.hasRule(t))return!1;this.currentPartition.styles.length>=this.maxRulesPerPartition&&this.createNewPartition();const e=this.currentPartition,s=this.partitions.length-1;try{const i=e.styleElement.sheet;return i?i.insertRule(this.escapeCssRule(t),i.cssRules.length):e.styleElement.textContent+=t+`
 `,this.setRuleCache(t,s),e.styles.push(t),!0}catch(i){return console.warn(`[StylePartitionManager] Failed to insert rule: ${t}`,i),!1}}addCategoryRule(t,e){if(this.hasCategoryRule(t,e))return!1;let s=this.getCategoryPartition(e);s||(s=this.createNewCategoryPartition(e));try{const i=s.styleElement.sheet;i?i.insertRule(this.escapeCssRule(t),i.cssRules.length):s.styleElement.textContent+=t+`
 `}catch(i){return console.warn(`[StylePartitionManager] Failed to insert rule in category: ${e} ${t}`,i),!1}return this.setCategoryRuleCache(t,e),s.styles.push(t),!0}addRootRules(t){let e=this.getCategoryPartition("root");e||(e=this.createNewCategoryPartition("root"));try{const s=e.styleElement.sheet;for(const i of t)s?s.insertRule(this.escapeCssRule(i),s.cssRules.length):e.styleElement.textContent+=i+`
 `}catch(s){return console.warn(`[StylePartitionManager] Failed to insert rule in category: root ${t.join(`
-`)}`,s),{success:0,failed:t.length}}return{success:t.length,failed:0}}addRules(t){let e=0,s=0;for(const i of t){const r=l.parseResultCache.get(i.cls)?.utility?.category;if(r)for(const c of i.cssList)this.addCategoryRule(c,r);else for(const c of i.cssList)this.addRule(c)?e++:s++}return{success:e,failed:s}}findRulePartition(t){const e=this.classToPartitionMap.get(t);if(e!==void 0&&this.partitions[e])return this.partitions[e];const s=this.classToCategoryPartitionMap.get(t);return s!==void 0&&this.categoryPartitions.get(s)||null}updateRuleContent(t,e){const s=this.getCategoryPartition(t);if(s)s.styleElement.textContent=e;else{const i=this.createNewCategoryPartition(t);console.log(`[StylePartitionManager] Created new partition for category: ${t}`),i.styleElement.textContent=e}}cleanup(){this.partitions.forEach(t=>{t.styleElement.parentNode&&t.styleElement.parentNode.removeChild(t.styleElement)}),this.categoryPartitions.forEach(t=>{t.styleElement.parentNode&&t.styleElement.parentNode.removeChild(t.styleElement)}),this.partitions=[],this.partitionCounter=0,this.classToPartitionMap.clear(),this.classToCategoryPartitionMap.clear()}}function g(a){return a?a instanceof SVGAnimatedString?a.baseVal.toString():a.toString():""}function h(a){return a?g(a).split(/\s+/).filter(Boolean):[]}class p{constructor(t,e){this.observer=null,this.processedElements=new WeakSet,this.incrementalParser=t,this.BrowserRuntime=e}observe(t=document.body,e){return typeof window>"u"?new MutationObserver(()=>{}):(this.observer&&this.observer.disconnect(),this.observer=new MutationObserver(s=>{const i=new Set;if(s.forEach(n=>{if(n.type==="attributes"&&n.attributeName==="class"){const r=n.target;r.className&&h(r.className).forEach(u=>{this.incrementalParser.isProcessed(u)||i.add(u)})}n.type==="childList"&&n.addedNodes.forEach(r=>{r instanceof HTMLElement&&(this.processElement(r,i),r.querySelectorAll("[class]").forEach(c=>{this.processElement(c,i)}))})}),i.size>0){const n=Array.from(i),r=this.incrementalParser.processClasses(n);this.BrowserRuntime?.applyParseResults(r)}}),this.observer.observe(t,{attributes:!0,subtree:!0,attributeFilter:["class"],childList:!0}),e?.scan&&this.scanExistingClasses(t,e),this.observer)}scanExistingClasses(t,e){const s=new Set;t.className&&h(t.className).forEach(r=>{this.incrementalParser.isProcessed(r)||s.add(r)});const i=t.querySelectorAll("[class]");for(const n of i)if(n.className){const r=h(n.className);for(const c of r)this.incrementalParser.isProcessed(c)||s.add(c)}if(s.size>0){const n=Array.from(s),r=this.incrementalParser.processClasses(n),c=r.filter(f=>l.parseResultCache.get(f.cls)?.utility?.category==="layout"),u=r.filter(f=>l.parseResultCache.get(f.cls)?.utility?.category!=="layout");this.BrowserRuntime?.applyParseResults(c),e?.onReady?.(),this.BrowserRuntime?.applyParseResults(u)}}processElement(t,e){this.processedElements.has(t)||(t.className&&h(t.className).forEach(i=>{this.incrementalParser.isProcessed(i)||e.add(i)}),this.processedElements.add(t))}disconnect(){this.observer&&(this.observer.disconnect(),this.observer=null)}}class C{constructor(t={}){this.cache=new Map,this.rootCache=new Set,this.isDestroyed=!1;const e={};this.options={config:t.config||e,styleId:t.styleId||"barocss-runtime",insertionPoint:t.insertionPoint||"head",maxRulesPerPartition:t.maxRulesPerPartition||50},this.context=l.createContext(this.options.config),this.incrementalParser=new l.IncrementalParser(this.context),this.changeDetector=new p(this.incrementalParser,this),this.stylePartitionManager=new y(this.getInsertionPoint(),this.options.maxRulesPerPartition,`${this.options.styleId}-partition`),this.init()}debugLog(t,e,s){(console[t]||console.log)(`[BrowserRuntime:${t.toUpperCase()}] ${e}`,s||"")}init(){console.log("[BrowserRuntime] init"),this.injectPreflightCSS(),this.ensureCssVars()}injectPreflightCSS(){if(this.options.config.preflight){const t=this.context.getPreflightCSS(this.options.config.preflight);this.stylePartitionManager.updateRuleContent("preflight",t)}}ensureCssVars(){if(this.isDestroyed)return;const t=this.context.themeToCssVars?this.context.themeToCssVars():":root { /* CSS Variables will be generated here */ }";this.stylePartitionManager.updateRuleContent("css-vars",t)}getInsertionPoint(){if(this.options.insertionPoint instanceof HTMLElement)return this.options.insertionPoint;switch(this.options.insertionPoint){case"body":return document.body||document.head;case"head":default:return document.head}}addClass(t){if(this.isDestroyed)return;const e=this.normalizeClasses(t);this.processClasses(e)}processClasses(t){this.processClassesIncremental(t)}processClassesIncremental(t){const e=typeof window<"u",s=this.incrementalParser.processClasses(t);console.log("[BrowserRuntime] results",s,...t),this.applyParseResults(s,{isBrowser:e})}applyParseResults(t,e){const s=[],i=[];for(const n of t)if(n.css&&Array.isArray(n.cssList)&&s.push(n),n.rootCss&&Array.isArray(n.rootCssList))for(const r of n.rootCssList)this.rootCache.has(r)||(this.rootCache.add(r),i.push(r));i.length>0&&this.stylePartitionManager.addRootRules(i.filter(Boolean)),s.length>0&&this.stylePartitionManager.addRules(s),this.debugLog("info",`Applied ${t.length} parser results`,{cssRuleCount:s.length,rootCssCount:i.length})}observe(t=document.body,e){return this.changeDetector.observe(t,e)}normalizeClasses(t){return Array.isArray(t)?t.flatMap(e=>e.split(/\s+/)):t.split(/\s+/)}has(t){return this.cache.has(t)}getCss(t){return this.cache.get(t)?.cssList.join(`
+`)}`,s),{success:0,failed:t.length}}return{success:t.length,failed:0}}addRules(t){let e=0,s=0;for(const i of t){const n=l.parseResultCache.get(i.cls)?.utility?.category;if(n)for(const c of i.cssList)this.addCategoryRule(c,n);else for(const c of i.cssList)this.addRule(c)?e++:s++}return{success:e,failed:s}}findRulePartition(t){const e=this.classToPartitionMap.get(t);if(e!==void 0&&this.partitions[e])return this.partitions[e];const s=this.classToCategoryPartitionMap.get(t);return s!==void 0&&this.categoryPartitions.get(s)||null}updateRuleContent(t,e){const s=this.getCategoryPartition(t);if(s)s.styleElement.textContent=e;else{const i=this.createNewCategoryPartition(t);console.log(`[StylePartitionManager] Created new partition for category: ${t}`),i.styleElement.textContent=e}}cleanup(){this.partitions.forEach(t=>{t.styleElement.parentNode&&t.styleElement.parentNode.removeChild(t.styleElement)}),this.categoryPartitions.forEach(t=>{t.styleElement.parentNode&&t.styleElement.parentNode.removeChild(t.styleElement)}),this.partitions=[],this.categoryPartitions.clear(),this.partitionCounter=0,this.classToPartitionMap.clear(),this.classToCategoryPartitionMap.clear()}}function g(a){return a?a instanceof SVGAnimatedString?a.baseVal.toString():a.toString():""}function h(a){return a?g(a).split(/\s+/).filter(Boolean):[]}class P{constructor(t,e){this.observer=null,this.incrementalParser=t,this.BrowserRuntime=e}setParser(t){this.incrementalParser=t}observe(t=document.body,e){return typeof window>"u"?new MutationObserver(()=>{}):(this.observer&&this.observer.disconnect(),this.observer=new MutationObserver(s=>{const i=new Set;if(s.forEach(r=>{if(r.type==="attributes"&&r.attributeName==="class"){const n=r.target;n.className&&h(n.className).forEach(d=>{this.incrementalParser.isProcessed(d)||i.add(d)})}r.type==="childList"&&r.addedNodes.forEach(n=>{n instanceof Element&&(this.processElement(n,i),n.querySelectorAll("[class]").forEach(c=>{this.processElement(c,i)}))})}),i.size>0){const r=Array.from(i),n=this.incrementalParser.processClasses(r);this.BrowserRuntime?.applyParseResults(n)}}),this.observer.observe(t,{attributes:!0,subtree:!0,attributeFilter:["class"],childList:!0}),e?.scan&&this.scanExistingClasses(t,e),this.observer)}scanExistingClasses(t,e){const s=new Set;t.className&&h(t.className).forEach(n=>{this.incrementalParser.isProcessed(n)||s.add(n)});const i=t.querySelectorAll("[class]");for(const r of i)if(r.className){const n=h(r.className);for(const c of n)this.incrementalParser.isProcessed(c)||s.add(c)}if(s.size>0){const r=Array.from(s),n=this.incrementalParser.processClasses(r),c=n.filter(f=>l.parseResultCache.get(f.cls)?.utility?.category==="layout"),d=n.filter(f=>l.parseResultCache.get(f.cls)?.utility?.category!=="layout");this.BrowserRuntime?.applyParseResults(c),e?.onReady?.(),this.BrowserRuntime?.applyParseResults(d)}}processElement(t,e){t.className&&h(t.className).forEach(i=>{this.incrementalParser.isProcessed(i)||e.add(i)})}disconnect(){this.observer&&(this.observer.disconnect(),this.observer=null)}}class m{constructor(t={}){this.cache=new Map,this.rootCache=new Set,this.isDestroyed=!1;const e={};this.options={config:t.config||e,styleId:t.styleId||"barocss-runtime",insertionPoint:t.insertionPoint||"head",maxRulesPerPartition:t.maxRulesPerPartition||50},this.context=l.createContext(this.options.config),this.incrementalParser=new l.IncrementalParser(this.context),this.changeDetector=new P(this.incrementalParser,this),this.stylePartitionManager=new u(this.getInsertionPoint(),this.options.maxRulesPerPartition,`${this.options.styleId}-partition`),this.init()}debugLog(t,e,s){(console[t]||console.log)(`[BrowserRuntime:${t.toUpperCase()}] ${e}`,s||"")}init(){console.log("[BrowserRuntime] init"),this.injectPreflightCSS(),this.ensureCssVars()}injectPreflightCSS(){if(this.options.config.preflight){const t=this.context.getPreflightCSS(this.options.config.preflight);this.stylePartitionManager.updateRuleContent("preflight",t)}}ensureCssVars(){if(this.isDestroyed)return;const t=this.context.themeToCssVars?this.context.themeToCssVars():":root { /* CSS Variables will be generated here */ }";this.stylePartitionManager.updateRuleContent("css-vars",t)}getInsertionPoint(){if(this.options.insertionPoint instanceof HTMLElement)return this.options.insertionPoint;switch(this.options.insertionPoint){case"body":return document.body||document.head;case"head":default:return document.head}}addClass(t){if(this.isDestroyed)return;const e=this.normalizeClasses(t);this.processClasses(e)}processClasses(t){this.processClassesIncremental(t)}processClassesIncremental(t){const e=typeof window<"u",s=this.incrementalParser.processClasses(t);console.log("[BrowserRuntime] results",s,...t),this.applyParseResults(s,{isBrowser:e})}applyParseResults(t,e){if(this.isDestroyed)return;if(this.getInsertionPoint().isConnected&&this.stylePartitionManager.hasDetachedPartitions()){const r=Array.from(this.cache.values());this.reset(),t=[...r,...t],t.forEach(n=>this.incrementalParser.markProcessed(n.cls))}const s=[],i=[];for(const r of t)if(r.css&&Array.isArray(r.cssList)&&(s.push(r),this.cache.set(r.cls,r)),r.rootCss&&Array.isArray(r.rootCssList))for(const n of r.rootCssList)this.rootCache.has(n)||(this.rootCache.add(n),i.push(n));i.length>0&&this.stylePartitionManager.addRootRules(i.filter(Boolean)),s.length>0&&this.stylePartitionManager.addRules(s),this.debugLog("info",`Applied ${t.length} parser results`,{cssRuleCount:s.length,rootCssCount:i.length})}observe(t=document.body,e){return this.changeDetector.observe(t,e)}normalizeClasses(t){return Array.isArray(t)?t.flatMap(e=>e.split(/\s+/)):t.split(/\s+/)}has(t){return this.cache.has(t)}getCss(t){return this.cache.get(t)?.cssList.join(`
 `)}getAllCss(){return Array.from(this.cache.values()).flatMap(e=>e.cssList).join(`
-`)}getClasses(){return Array.from(this.cache.keys())}getCacheStats(){return{runtime:{cachedClasses:this.cache.size,rootCacheSize:this.rootCache.size},ast:l.astCache.getStats(),incremental:this.incrementalParser.getStats()}}clearCaches(){this.cache.clear(),this.rootCache.clear(),l.astCache.clear(),this.incrementalParser.clearProcessed(),this.stylePartitionManager.cleanup()}reset(){this.cache.clear(),this.rootCache.clear(),this.stylePartitionManager.cleanup()}updateConfig(t){this.options.config=t,this.context=l.createContext(t);const e=Array.from(this.cache.keys());this.reset(),e.length>0&&this.addClass(e)}removeClass(t){const e=this.normalizeClasses(t);for(const s of e)this.cache.delete(s)}destroy(){this.stylePartitionManager.cleanup(),this.cache.clear(),this.rootCache.clear(),this.isDestroyed=!0}getStats(){return{cachedClasses:this.cache.size,styleElementId:this.options.styleId,isDestroyed:this.isDestroyed,config:this.options.config,cacheStats:this.getCacheStats()}}}let d=null;function m(a){return d||(d=new C(a)),d}function P({loadingClassName:a="baro-boot",...t}={}){const e=`${a}-doing`,s=`${a}-done`;try{document.body.classList.add(e),m(t).observe(document.body,{scan:!0,onReady:()=>{document.body.classList.remove(e),document.body.classList.add(s)}})}catch(i){console.error("BaroCSS boot failed:",i)}}const R=P;o.BrowserRuntime=C,o.ChangeDetector=p,o.StylePartitionManager=y,o.baroBoot=P,o.baroStart=R,o.getRuntime=m,o.normalizeClassName=g,o.normalizeClassNameList=h,Object.defineProperty(o,Symbol.toStringTag,{value:"Module"})}));
+`)}getClasses(){return Array.from(this.cache.keys())}getCacheStats(){const t=this.incrementalParser.getStats();return{runtime:{cachedClasses:this.cache.size,rootCacheSize:this.rootCache.size},ast:t.cacheStats.ast,incremental:t}}clearCaches(){this.isDestroyed||(this.cache.clear(),this.rootCache.clear(),l.clearAstCache(this.context),this.incrementalParser.clearProcessed(),this.stylePartitionManager.cleanup(),this.stylePartitionManager=new u(this.getInsertionPoint(),this.options.maxRulesPerPartition,`${this.options.styleId}-partition`),this.injectPreflightCSS(),this.ensureCssVars())}reset(){this.isDestroyed||(this.cache.clear(),this.rootCache.clear(),this.incrementalParser.clearProcessed(),this.stylePartitionManager.cleanup(),this.stylePartitionManager=new u(this.getInsertionPoint(),this.options.maxRulesPerPartition,`${this.options.styleId}-partition`),this.injectPreflightCSS(),this.ensureCssVars())}updateConfig(t){if(this.isDestroyed)return;const e=Array.from(this.cache.keys());this.options.config=t,this.context=l.createContext(t),this.incrementalParser=new l.IncrementalParser(this.context),this.changeDetector.setParser(this.incrementalParser),this.reset(),e.length>0&&this.addClass(e)}removeClass(t){if(this.isDestroyed)return;const e=new Set(this.normalizeClasses(t)),s=Array.from(this.cache.values()).filter(i=>!e.has(i.cls));s.length!==this.cache.size&&(this.reset(),s.forEach(i=>this.incrementalParser.markProcessed(i.cls)),this.applyParseResults(s))}destroy(){this.isDestroyed||(this.changeDetector.disconnect(),this.stylePartitionManager.cleanup(),this.cache.clear(),this.rootCache.clear(),this.isDestroyed=!0)}getStats(){return{cachedClasses:this.cache.size,styleElementId:this.options.styleId,isDestroyed:this.isDestroyed,config:this.options.config,cacheStats:this.getCacheStats()}}}let y=null;function p(a){return y||(y=new m(a)),y}function C({loadingClassName:a="baro-boot",...t}={}){const e=`${a}-doing`,s=`${a}-done`;try{document.body.classList.add(e),p(t).observe(document.body,{scan:!0,onReady:()=>{document.body.classList.remove(e),document.body.classList.add(s)}})}catch(i){console.error("BaroCSS boot failed:",i)}}const R=C;o.BrowserRuntime=m,o.ChangeDetector=P,o.StylePartitionManager=u,o.baroBoot=C,o.baroStart=R,o.getRuntime=p,o.normalizeClassName=g,o.normalizeClassNameList=h,Object.defineProperty(o,Symbol.toStringTag,{value:"Module"})}));

package/package.json

@@ -1,14 +1,18 @@
 {
   "name": "@barocss/browser",
-  "version": "0.0.1",
+  "version": "0.4.0",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/barocss/barocss.git",
+    "directory": "packages/barocss-browser"
+  },
   "type": "module",
-  "main": "./dist/index.umd.js",
+  "main": "./dist/index.es.js",
   "types": "./dist/index.d.ts",
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
-      "import": "./dist/index.es.js",
-      "require": "./dist/index.umd.js"
+      "import": "./dist/index.es.js"
     }
   },
   "files": [
@@ -20,7 +24,7 @@
     "access": "public"
   },
   "dependencies": {
-    "@barocss/kit": "0.0.2"
+    "@barocss/kit": "0.4.0"
   },
   "devDependencies": {
     "jsdom": "^26.1.0",
@@ -33,7 +37,7 @@
     "build:cdn": "vite build --config vite.cdn.config.ts",
     "build:library": "pnpm run build && pnpm run build:cdn",
     "test:watch": "vitest",
-    "//test": "vitest run",
+    "test": "vitest run",
     "type-check": "tsc --noEmit",
     "lint": "eslint src/**/*.ts"
   },

package/dist/baro-boot.d.ts

@@ -1,8 +0,0 @@
-import { BrowserRuntime, BrowserRuntimeOptions } from './browser-runtime';
-export declare function getRuntime(options: BrowserRuntimeOptions): BrowserRuntime;
-type BaroBootOptions = BrowserRuntimeOptions & {
-    loadingClassName?: string;
-};
-export declare function baroBoot({ loadingClassName, ...options }?: BaroBootOptions): void;
-export declare const baroStart: typeof baroBoot;
-export {};