@breadstone/mosaik-themes 0.0.182 → 0.0.184

package/index.d.mts

@@ -313,6 +313,31 @@ declare namespace CssTime {
     function isCssTime(value: unknown): value is CssTime;
 }
 
+/**
+ * Platform adapter interface for abstracting browser APIs.
+ * Allows ThemeObserver and ThemeGenerator to work in both browser and Node.js environments.
+ *
+ * @public
+ */
+interface IPlatformAdapter {
+    /**
+     * Checks if media query matches (e.g., prefers-color-scheme).
+     */
+    matchMedia(query: string): boolean;
+    /**
+     * Sets an attribute on the document element.
+     */
+    setDocumentAttribute(name: string, value: string): void;
+    /**
+     * Gets an attribute from the document element.
+     */
+    getDocumentAttribute(name: string): string | null;
+    /**
+     * Observes changes to document element attributes.
+     */
+    observeDocumentAttributes(attributes: string[], callback: (attributeName: string, newValue: string | null) => void): () => void;
+}
+
 /**
  * Theme mode.
  *
@@ -327,14 +352,17 @@ type ThemeMode = 'system' | 'dark' | 'light';
 declare class ThemeObserver {
     private readonly _themeChanged;
     private readonly _themeModeChanged;
+    private readonly _platformAdapter;
     private _currentTheme;
     private _currentThemeMode;
+    private _unsubscribe?;
     /**
      * Constructs a new instance of the `ThemeObserver` class.
      *
+     * @param platformAdapter - Optional platform adapter. Auto-detects if not provided.
      * @public
      */
-    constructor();
+    constructor(platformAdapter?: IPlatformAdapter);
     /**
      * Fires when the theme changes.
      *
@@ -350,6 +378,7 @@ declare class ThemeObserver {
      */
     get themeModeChanged(): IEventEmitter<ThemeMode>;
     applyTheme(theme: string, themeMode: ThemeMode): void;
+    dispose(): void;
     private observe;
 }
 /**
@@ -367,7 +396,12 @@ declare class ThemeObserverServiceLocator {
  */
 declare class ThemeGenerator {
     private readonly _strategies;
-    constructor();
+    private readonly _platformAdapter;
+    /**
+     * @param platformAdapter - Optional platform adapter. Auto-detects if not provided.
+     * @public
+     */
+    constructor(platformAdapter?: IPlatformAdapter);
     generatePalette(theme: ITheme, baseColor: CssColor, mode: 'dark' | 'light' | 'system'): IThemePalette;
     generateScheme(theme: ITheme, baseColor: CssColor, mode: 'dark' | 'light' | 'system'): IThemeScheme;
     private resolveMode;
@@ -537,4 +571,45 @@ declare class TailwindThemeGeneratorStrategy implements IThemeGeneratorStrategy
  */
 declare function createTailwindTheme(): ThemeGeneratorFactoryFn;
 
-export { BootstrapTheme, CosmopolitanTheme, CosmopolitanThemeGeneratorStrategy, CssAspectRatio, CssColor, type CssHEXColor, CssLength, type CssLengthUnit, type CssNameColor, type CssRGBAColor, type CssRGBColor, CssShadow, type CssShadowSingle, CssTime, type CssTimeUnit, ITheme, type IThemeElevation, type IThemeGeneratorStrategy, type IThemeLayout, type IThemeMetadata, IThemePalette, type IThemeScheme, type IThemeTypography, type IThemeTypographyFontType, JoyTheme, JoyThemeGeneratorStrategy, MaterialThemeGeneratorStrategy, MemphisTheme, MemphisThemeGeneratorStrategy, TailwindThemeGeneratorStrategy, ThemeGenerator, ThemeGeneratorServiceLocator, type ThemeMode, ThemeObserver, ThemeObserverServiceLocator, createCosmopolitanTheme, createJoyTheme, createMaterialTheme, createMemphisTheme, createTailwindTheme };
+/**
+ * Browser implementation of the platform adapter.
+ * Uses native DOM APIs (window, document, MutationObserver).
+ *
+ * @public
+ */
+declare class BrowserPlatformAdapter implements IPlatformAdapter {
+    matchMedia(query: string): boolean;
+    setDocumentAttribute(name: string, value: string): void;
+    getDocumentAttribute(name: string): string | null;
+    observeDocumentAttributes(attributes: string[], callback: (attributeName: string, newValue: string | null) => void): () => void;
+}
+
+/**
+ * Node.js implementation of the platform adapter.
+ * No-op implementation that doesn't crash but does nothing.
+ *
+ * @public
+ */
+declare class NodePlatformAdapter implements IPlatformAdapter {
+    matchMedia(_query: string): boolean;
+    setDocumentAttribute(_name: string, _value: string): void;
+    getDocumentAttribute(_name: string): string | null;
+    observeDocumentAttributes(_attributes: string[], _callback: (attributeName: string, newValue: string | null) => void): () => void;
+}
+
+/**
+ * Factory that automatically detects the environment and returns the appropriate adapter.
+ *
+ * @public
+ */
+declare class PlatformAdapterFactory {
+    /**
+     * Creates the appropriate platform adapter based on the current environment.
+     * Automatically detects if running in browser or Node.js.
+     *
+     * @public
+     */
+    static create(): IPlatformAdapter;
+}
+
+export { BootstrapTheme, BrowserPlatformAdapter, CosmopolitanTheme, CosmopolitanThemeGeneratorStrategy, CssAspectRatio, CssColor, type CssHEXColor, CssLength, type CssLengthUnit, type CssNameColor, type CssRGBAColor, type CssRGBColor, CssShadow, type CssShadowSingle, CssTime, type CssTimeUnit, type IPlatformAdapter, ITheme, type IThemeElevation, type IThemeGeneratorStrategy, type IThemeLayout, type IThemeMetadata, IThemePalette, type IThemeScheme, type IThemeTypography, type IThemeTypographyFontType, JoyTheme, JoyThemeGeneratorStrategy, MaterialThemeGeneratorStrategy, MemphisTheme, MemphisThemeGeneratorStrategy, NodePlatformAdapter, PlatformAdapterFactory, TailwindThemeGeneratorStrategy, ThemeGenerator, ThemeGeneratorServiceLocator, type ThemeMode, ThemeObserver, ThemeObserverServiceLocator, createCosmopolitanTheme, createJoyTheme, createMaterialTheme, createMemphisTheme, createTailwindTheme };

package/index.d.ts

@@ -313,6 +313,31 @@ declare namespace CssTime {
     function isCssTime(value: unknown): value is CssTime;
 }
 
+/**
+ * Platform adapter interface for abstracting browser APIs.
+ * Allows ThemeObserver and ThemeGenerator to work in both browser and Node.js environments.
+ *
+ * @public
+ */
+interface IPlatformAdapter {
+    /**
+     * Checks if media query matches (e.g., prefers-color-scheme).
+     */
+    matchMedia(query: string): boolean;
+    /**
+     * Sets an attribute on the document element.
+     */
+    setDocumentAttribute(name: string, value: string): void;
+    /**
+     * Gets an attribute from the document element.
+     */
+    getDocumentAttribute(name: string): string | null;
+    /**
+     * Observes changes to document element attributes.
+     */
+    observeDocumentAttributes(attributes: string[], callback: (attributeName: string, newValue: string | null) => void): () => void;
+}
+
 /**
  * Theme mode.
  *
@@ -327,14 +352,17 @@ type ThemeMode = 'system' | 'dark' | 'light';
 declare class ThemeObserver {
     private readonly _themeChanged;
     private readonly _themeModeChanged;
+    private readonly _platformAdapter;
     private _currentTheme;
     private _currentThemeMode;
+    private _unsubscribe?;
     /**
      * Constructs a new instance of the `ThemeObserver` class.
      *
+     * @param platformAdapter - Optional platform adapter. Auto-detects if not provided.
      * @public
      */
-    constructor();
+    constructor(platformAdapter?: IPlatformAdapter);
     /**
      * Fires when the theme changes.
      *
@@ -350,6 +378,7 @@ declare class ThemeObserver {
      */
     get themeModeChanged(): IEventEmitter<ThemeMode>;
     applyTheme(theme: string, themeMode: ThemeMode): void;
+    dispose(): void;
     private observe;
 }
 /**
@@ -367,7 +396,12 @@ declare class ThemeObserverServiceLocator {
  */
 declare class ThemeGenerator {
     private readonly _strategies;
-    constructor();
+    private readonly _platformAdapter;
+    /**
+     * @param platformAdapter - Optional platform adapter. Auto-detects if not provided.
+     * @public
+     */
+    constructor(platformAdapter?: IPlatformAdapter);
     generatePalette(theme: ITheme, baseColor: CssColor, mode: 'dark' | 'light' | 'system'): IThemePalette;
     generateScheme(theme: ITheme, baseColor: CssColor, mode: 'dark' | 'light' | 'system'): IThemeScheme;
     private resolveMode;
@@ -537,4 +571,45 @@ declare class TailwindThemeGeneratorStrategy implements IThemeGeneratorStrategy
  */
 declare function createTailwindTheme(): ThemeGeneratorFactoryFn;
 
-export { BootstrapTheme, CosmopolitanTheme, CosmopolitanThemeGeneratorStrategy, CssAspectRatio, CssColor, type CssHEXColor, CssLength, type CssLengthUnit, type CssNameColor, type CssRGBAColor, type CssRGBColor, CssShadow, type CssShadowSingle, CssTime, type CssTimeUnit, ITheme, type IThemeElevation, type IThemeGeneratorStrategy, type IThemeLayout, type IThemeMetadata, IThemePalette, type IThemeScheme, type IThemeTypography, type IThemeTypographyFontType, JoyTheme, JoyThemeGeneratorStrategy, MaterialThemeGeneratorStrategy, MemphisTheme, MemphisThemeGeneratorStrategy, TailwindThemeGeneratorStrategy, ThemeGenerator, ThemeGeneratorServiceLocator, type ThemeMode, ThemeObserver, ThemeObserverServiceLocator, createCosmopolitanTheme, createJoyTheme, createMaterialTheme, createMemphisTheme, createTailwindTheme };
+/**
+ * Browser implementation of the platform adapter.
+ * Uses native DOM APIs (window, document, MutationObserver).
+ *
+ * @public
+ */
+declare class BrowserPlatformAdapter implements IPlatformAdapter {
+    matchMedia(query: string): boolean;
+    setDocumentAttribute(name: string, value: string): void;
+    getDocumentAttribute(name: string): string | null;
+    observeDocumentAttributes(attributes: string[], callback: (attributeName: string, newValue: string | null) => void): () => void;
+}
+
+/**
+ * Node.js implementation of the platform adapter.
+ * No-op implementation that doesn't crash but does nothing.
+ *
+ * @public
+ */
+declare class NodePlatformAdapter implements IPlatformAdapter {
+    matchMedia(_query: string): boolean;
+    setDocumentAttribute(_name: string, _value: string): void;
+    getDocumentAttribute(_name: string): string | null;
+    observeDocumentAttributes(_attributes: string[], _callback: (attributeName: string, newValue: string | null) => void): () => void;
+}
+
+/**
+ * Factory that automatically detects the environment and returns the appropriate adapter.
+ *
+ * @public
+ */
+declare class PlatformAdapterFactory {
+    /**
+     * Creates the appropriate platform adapter based on the current environment.
+     * Automatically detects if running in browser or Node.js.
+     *
+     * @public
+     */
+    static create(): IPlatformAdapter;
+}
+
+export { BootstrapTheme, BrowserPlatformAdapter, CosmopolitanTheme, CosmopolitanThemeGeneratorStrategy, CssAspectRatio, CssColor, type CssHEXColor, CssLength, type CssLengthUnit, type CssNameColor, type CssRGBAColor, type CssRGBColor, CssShadow, type CssShadowSingle, CssTime, type CssTimeUnit, type IPlatformAdapter, ITheme, type IThemeElevation, type IThemeGeneratorStrategy, type IThemeLayout, type IThemeMetadata, IThemePalette, type IThemeScheme, type IThemeTypography, type IThemeTypographyFontType, JoyTheme, JoyThemeGeneratorStrategy, MaterialThemeGeneratorStrategy, MemphisTheme, MemphisThemeGeneratorStrategy, NodePlatformAdapter, PlatformAdapterFactory, TailwindThemeGeneratorStrategy, ThemeGenerator, ThemeGeneratorServiceLocator, type ThemeMode, ThemeObserver, ThemeObserverServiceLocator, createCosmopolitanTheme, createJoyTheme, createMaterialTheme, createMemphisTheme, createTailwindTheme };

package/index.js

@@ -2361,6 +2361,80 @@ var IThemePalette;
   ITheme2.getPaletteColor = getPaletteColor;
 })(ITheme || (ITheme = {}));
 var ITheme;
+
+// 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";
 }
@@ -2372,17 +2446,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 PureEventEmitter();
     this._themeModeChanged = new PureEventEmitter();
+    this._platformAdapter = platformAdapter ?? PlatformAdapterFactory.create();
     this._currentTheme = null;
     this._currentThemeMode = null;
     this.observe({
@@ -2413,54 +2491,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);
+        }
+      }
     });
   }
 };
@@ -2750,9 +2823,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",
@@ -2771,6 +2849,7 @@ var ThemeGenerator = class {
         new CosmopolitanThemeGeneratorStrategy()
       ]
     ]);
+    this._platformAdapter = platformAdapter ?? PlatformAdapterFactory.create();
   }
   // #endregion
   // #region Methods
@@ -2786,7 +2865,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;
   }
@@ -2898,6 +2978,6 @@ function createTailwindTheme() {
 }
 __name(createTailwindTheme, "createTailwindTheme");
 
-export { BootstrapTheme, CosmopolitanTheme, CosmopolitanThemeGeneratorStrategy, CssAspectRatio, CssColor, CssLength, CssShadow, CssTime, ITheme, IThemePalette, JoyTheme, JoyThemeGeneratorStrategy, MaterialThemeGeneratorStrategy, MemphisTheme, MemphisThemeGeneratorStrategy, TailwindThemeGeneratorStrategy, ThemeGenerator, ThemeGeneratorServiceLocator, ThemeObserver, ThemeObserverServiceLocator, createCosmopolitanTheme, createJoyTheme, createMaterialTheme, createMemphisTheme, createTailwindTheme };
+export { BootstrapTheme, BrowserPlatformAdapter, CosmopolitanTheme, CosmopolitanThemeGeneratorStrategy, CssAspectRatio, CssColor, CssLength, CssShadow, CssTime, ITheme, IThemePalette, JoyTheme, JoyThemeGeneratorStrategy, MaterialThemeGeneratorStrategy, MemphisTheme, MemphisThemeGeneratorStrategy, NodePlatformAdapter, PlatformAdapterFactory, TailwindThemeGeneratorStrategy, ThemeGenerator, ThemeGeneratorServiceLocator, ThemeObserver, ThemeObserverServiceLocator, createCosmopolitanTheme, createJoyTheme, createMaterialTheme, createMemphisTheme, createTailwindTheme };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map