@barocss/browser 0.0.1

package/dist/change-detector.d.ts

@@ -0,0 +1,80 @@
+import { IncrementalParser } from '@barocss/kit';
+import { BrowserRuntime } from './browser-runtime';
+/**
+ * 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?;
+    /** Set of elements that have already been processed to avoid duplicates */
+    private processedElements;
+    /**
+     * 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);
+    /**
+     * 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:
+     * - 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
+     */
+    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;
+}

package/dist/index.d.ts

@@ -0,0 +1,5 @@
+export * from './browser-runtime';
+export * from './change-detector';
+export * from './style-partition-manager';
+export * from './utils';
+export * from './baro-boot';

package/dist/index.es.js

@@ -0,0 +1,425 @@
+import { parseResultCache as d, createContext as y, IncrementalParser as g, astCache as f } from "@barocss/kit";
+class p {
+  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();
+  }
+  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);
+  }
+  /**
+   * Escape CSS rule text
+   * - Properly escape special characters
+   * - Prevent CSS syntax errors
+   */
+  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 = d.get(i.cls)?.utility?.category;
+      if (r)
+        for (const o of i.cssList)
+          this.addCategoryRule(o, r);
+      else
+        for (const o of i.cssList)
+          this.addRule(o) ? 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 C(a) {
+  return a ? a instanceof SVGAnimatedString ? a.baseVal.toString() : a.toString() : "";
+}
+function c(a) {
+  return a ? C(a).split(/\s+/).filter(Boolean) : [];
+}
+class P {
+  /**
+   * Create a new ChangeDetector instance
+   * 
+   * @param incrementalParser - IncrementalParser instance for class processing
+   * @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;
+  }
+  /**
+   * 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(t = document.body, e) {
+    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) => {
+            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) => {
+            this.processElement(o, 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);
+  }
+  /**
+   * Scan existing classes in the DOM and process them
+   */
+  scanExistingClasses(t, e) {
+    const s = /* @__PURE__ */ new Set();
+    t.className && c(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 = c(n.className);
+        for (const o of r)
+          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");
+      this.BrowserRuntime?.applyParseResults(o), e?.onReady?.(), this.BrowserRuntime?.applyParseResults(l);
+    }
+  }
+  /**
+   * Processes an individual element and extracts new classes
+   * 
+   * 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) => {
+      this.incrementalParser.isProcessed(i) || e.add(i);
+    }), this.processedElements.add(t));
+  }
+  /**
+   * 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() {
+    this.observer && (this.observer.disconnect(), this.observer = null);
+  }
+}
+class m {
+  constructor(t = {}) {
+    this.cache = /* @__PURE__ */ new Map(), this.rootCache = /* @__PURE__ */ 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 = 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();
+  }
+  // Debugging and logging helpers
+  /**
+   * Add debug logs (by level)
+   */
+  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;
+    }
+  }
+  /**
+   * Dynamically add one or more class names and generate/insert CSS
+   */
+  addClass(t) {
+    if (this.isDestroyed) return;
+    const e = this.normalizeClasses(t);
+    this.processClasses(e);
+  }
+  /**
+   * Process classes
+   */
+  processClasses(t) {
+    this.processClassesIncremental(t);
+  }
+  /**
+   * Process classes using incremental parsing
+   */
+  processClassesIncremental(t) {
+    const e = typeof window < "u", s = this.incrementalParser.processClasses(t);
+    console.log("[BrowserRuntime] results", s, ...t), this.applyParseResults(s, { isBrowser: e });
+  }
+  /**
+   * Public method to apply parser results, update internal caches, and inject CSS
+   */
+  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
+    });
+  }
+  /**
+   * MutationObserver instance method to automatically call addClass when class attributes change in DOM
+   */
+  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());
+  }
+  /**
+   * Get comprehensive cache statistics
+   */
+  getCacheStats() {
+    return {
+      runtime: {
+        cachedClasses: this.cache.size,
+        rootCacheSize: this.rootCache.size
+      },
+      ast: f.getStats(),
+      incremental: this.incrementalParser.getStats()
+    };
+  }
+  /**
+   * Clear all caches (useful for debugging or memory management)
+   */
+  clearCaches() {
+    this.cache.clear(), this.rootCache.clear(), f.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 = y(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 u = null;
+function R(a) {
+  return u || (u = new m(a)), u;
+}
+function b({ loadingClassName: a = "baro-boot", ...t } = {}) {
+  const e = `${a}-doing`, s = `${a}-done`;
+  try {
+    document.body.classList.add(e), R(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 w = b;
+export {
+  m as BrowserRuntime,
+  P as ChangeDetector,
+  p as StylePartitionManager,
+  b as baroBoot,
+  w as baroStart,
+  R as getRuntime,
+  C as normalizeClassName,
+  c as normalizeClassNameList
+};

package/dist/index.umd.js

@@ -0,0 +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+`
+`,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(`
+`)}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"})}));

package/dist/style-partition-manager.d.ts

@@ -0,0 +1,51 @@
+import { GenerateCssRulesResult } from '@barocss/kit';
+export 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;
+    /**
+     * 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;
+}

package/dist/utils.d.ts

@@ -0,0 +1,2 @@
+export declare function normalizeClassName(className: any): string;
+export declare function normalizeClassNameList(className: any): string[];

package/package.json

@@ -0,0 +1,41 @@
+{
+  "name": "@barocss/browser",
+  "version": "0.0.1",
+  "type": "module",
+  "main": "./dist/index.umd.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.es.js",
+      "require": "./dist/index.umd.js"
+    }
+  },
+  "files": [
+    "dist/**/*",
+    "README.md",
+    "LICENSE"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "@barocss/kit": "0.0.2"
+  },
+  "devDependencies": {
+    "jsdom": "^26.1.0",
+    "vite": "^7.1.3",
+    "vite-plugin-dts": "^4.5.4",
+    "vitest": "^3.2.4"
+  },
+  "scripts": {
+    "build": "vite build",
+    "build:cdn": "vite build --config vite.cdn.config.ts",
+    "build:library": "pnpm run build && pnpm run build:cdn",
+    "test:watch": "vitest",
+    "//test": "vitest run",
+    "type-check": "tsc --noEmit",
+    "lint": "eslint src/**/*.ts"
+  },
+  "module": "./dist/index.es.js"
+}