@breadstone/mosaik-themes 0.0.182 → 0.0.184

package/CHANGELOG.md

@@ -1,3 +1,9 @@
+## 0.0.182 (2025-11-30)
+
+### 🚀 Features
+
+- **themes:** refactor theme generator strategies and update build process ([55859a854f](https://github.com/RueDeRennes/mosaik/commit/55859a854f))
+
 ## 0.0.181 (2025-11-30)
 
 ### 🚀 Features

package/index.cjs

@@ -2367,6 +2367,80 @@ exports.IThemePalette = void 0;
   ITheme2.getPaletteColor = getPaletteColor;
 })(exports.ITheme || (exports.ITheme = {}));
 exports.ITheme = void 0;
+
+// src/Theming/Adapters/BrowserPlatformAdapter.ts
+var BrowserPlatformAdapter = class {
+  static {
+    __name(this, "BrowserPlatformAdapter");
+  }
+  // #region Methods
+  matchMedia(query) {
+    return window.matchMedia(query).matches;
+  }
+  setDocumentAttribute(name, value) {
+    document.documentElement.setAttribute(name, value);
+  }
+  getDocumentAttribute(name) {
+    return document.documentElement.getAttribute(name);
+  }
+  observeDocumentAttributes(attributes, callback) {
+    const observer = new MutationObserver((mutations) => {
+      mutations.forEach((mutation) => {
+        if (mutation.type === "attributes" && mutation.attributeName) {
+          const newValue = document.documentElement.getAttribute(mutation.attributeName);
+          callback(mutation.attributeName, newValue);
+        }
+      });
+    });
+    observer.observe(document.documentElement, {
+      attributes: true,
+      attributeFilter: attributes
+    });
+    return () => observer.disconnect();
+  }
+};
+
+// src/Theming/Adapters/NodePlatformAdapter.ts
+var NodePlatformAdapter = class {
+  static {
+    __name(this, "NodePlatformAdapter");
+  }
+  // #region Methods
+  matchMedia(_query) {
+    return false;
+  }
+  setDocumentAttribute(_name, _value) {
+  }
+  getDocumentAttribute(_name) {
+    return null;
+  }
+  observeDocumentAttributes(_attributes, _callback) {
+    return () => {
+    };
+  }
+};
+
+// src/Theming/Adapters/PlatformAdapterFactory.ts
+var PlatformAdapterFactory = class {
+  static {
+    __name(this, "PlatformAdapterFactory");
+  }
+  // #region Methods
+  /**
+   * Creates the appropriate platform adapter based on the current environment.
+   * Automatically detects if running in browser or Node.js.
+   *
+   * @public
+   */
+  static create() {
+    if (typeof window !== "undefined" && typeof document !== "undefined") {
+      return new BrowserPlatformAdapter();
+    }
+    return new NodePlatformAdapter();
+  }
+};
+
+// src/Theming/ThemeObserver.ts
 function isThemeMode(value) {
   return value === "system" || value === "dark" || value === "light";
 }
@@ -2378,17 +2452,21 @@ var ThemeObserver = class {
   // #region Fields
   _themeChanged;
   _themeModeChanged;
+  _platformAdapter;
   _currentTheme;
   _currentThemeMode;
+  _unsubscribe;
   // #region Ctor
   /**
    * Constructs a new instance of the `ThemeObserver` class.
    *
+   * @param platformAdapter - Optional platform adapter. Auto-detects if not provided.
    * @public
    */
-  constructor() {
+  constructor(platformAdapter) {
     this._themeChanged = new mosaikElements.PureEventEmitter();
     this._themeModeChanged = new mosaikElements.PureEventEmitter();
+    this._platformAdapter = platformAdapter ?? PlatformAdapterFactory.create();
     this._currentTheme = null;
     this._currentThemeMode = null;
     this.observe({
@@ -2419,54 +2497,49 @@ var ThemeObserver = class {
   // #endregion
   // #region Methods
   applyTheme(theme, themeMode) {
-    document.documentElement.setAttribute("theme", theme);
+    this._platformAdapter.setDocumentAttribute("theme", theme);
     switch (themeMode) {
       case "dark":
       case "light":
-        document.documentElement.setAttribute("theme-mode", themeMode);
+        this._platformAdapter.setDocumentAttribute("theme-mode", themeMode);
         break;
       case "system":
       default:
-        if (window.matchMedia("(prefers-color-scheme: dark)").matches) {
-          document.documentElement.setAttribute("theme-mode", "dark");
-        } else {
-          document.documentElement.setAttribute("theme-mode", "light");
-        }
+        const isDark = this._platformAdapter.matchMedia("(prefers-color-scheme: dark)");
+        this._platformAdapter.setDocumentAttribute("theme-mode", isDark ? "dark" : "light");
         break;
     }
   }
+  dispose() {
+    if (this._unsubscribe) {
+      this._unsubscribe();
+      this._unsubscribe = void 0;
+    }
+  }
   observe(cb) {
-    this._currentTheme = document.documentElement.getAttribute("theme");
-    this._currentThemeMode = document.documentElement.getAttribute("theme-mode");
-    const observer = new MutationObserver((mutations) => {
-      mutations.forEach((mutation) => {
-        if (mutation.type === "attributes") {
-          if (mutation.attributeName === "theme") {
-            const theme = document.documentElement.getAttribute("theme");
-            if (this._currentTheme !== theme) {
-              this._currentTheme = theme;
-              cb.themeChange(theme);
-            }
-          }
-          if (mutation.attributeName === "theme-mode") {
-            const themeMode = document.documentElement.getAttribute("theme-mode");
-            if (!isThemeMode(themeMode)) {
-              throw new Error(`Invalid theme mode: ${String(themeMode)}`);
-            }
-            if (this._currentThemeMode !== themeMode) {
-              this._currentThemeMode = themeMode;
-              cb.themeModeChange(themeMode);
-            }
-          }
+    this._currentTheme = this._platformAdapter.getDocumentAttribute("theme");
+    this._currentThemeMode = this._platformAdapter.getDocumentAttribute("theme-mode");
+    this._unsubscribe = this._platformAdapter.observeDocumentAttributes([
+      "theme",
+      "theme-mode"
+    ], (attributeName, newValue) => {
+      if (attributeName === "theme") {
+        const theme = newValue;
+        if (this._currentTheme !== theme) {
+          this._currentTheme = theme;
+          cb.themeChange(theme);
         }
-      });
-    });
-    observer.observe(document.documentElement, {
-      attributes: true,
-      attributeFilter: [
-        "theme",
-        "theme-mode"
-      ]
+      }
+      if (attributeName === "theme-mode") {
+        const themeMode = newValue;
+        if (!isThemeMode(themeMode)) {
+          throw new Error(`Invalid theme mode: ${String(themeMode)}`);
+        }
+        if (this._currentThemeMode !== themeMode) {
+          this._currentThemeMode = themeMode;
+          cb.themeModeChange(themeMode);
+        }
+      }
     });
   }
 };
@@ -2756,9 +2829,14 @@ var ThemeGenerator = class {
   }
   // #region Fields
   _strategies;
+  _platformAdapter;
   // #endregion
   // #region Ctor
-  constructor() {
+  /**
+   * @param platformAdapter - Optional platform adapter. Auto-detects if not provided.
+   * @public
+   */
+  constructor(platformAdapter) {
     this._strategies = /* @__PURE__ */ new Map([
       [
         "material",
@@ -2777,6 +2855,7 @@ var ThemeGenerator = class {
         new CosmopolitanThemeGeneratorStrategy()
       ]
     ]);
+    this._platformAdapter = platformAdapter ?? PlatformAdapterFactory.create();
   }
   // #endregion
   // #region Methods
@@ -2792,7 +2871,8 @@ var ThemeGenerator = class {
   }
   resolveMode(mode) {
     if (mode === "system") {
-      return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+      const isDark = this._platformAdapter.matchMedia("(prefers-color-scheme: dark)");
+      return isDark ? "dark" : "light";
     }
     return mode;
   }
@@ -2904,10 +2984,13 @@ function createTailwindTheme() {
 }
 __name(createTailwindTheme, "createTailwindTheme");
 
+exports.BrowserPlatformAdapter = BrowserPlatformAdapter;
 exports.CosmopolitanThemeGeneratorStrategy = CosmopolitanThemeGeneratorStrategy;
 exports.JoyThemeGeneratorStrategy = JoyThemeGeneratorStrategy;
 exports.MaterialThemeGeneratorStrategy = MaterialThemeGeneratorStrategy;
 exports.MemphisThemeGeneratorStrategy = MemphisThemeGeneratorStrategy;
+exports.NodePlatformAdapter = NodePlatformAdapter;
+exports.PlatformAdapterFactory = PlatformAdapterFactory;
 exports.TailwindThemeGeneratorStrategy = TailwindThemeGeneratorStrategy;
 exports.ThemeGenerator = ThemeGenerator;
 exports.ThemeGeneratorServiceLocator = ThemeGeneratorServiceLocator;