@design.estate/dees-domtools 5.1.0 → 5.2.0

package/dist_ts/00_commitinfo_data.js

@@ -3,7 +3,7 @@
  */
 export const commitinfo = {
     name: '@design.estate/dees-domtools',
-    version: '5.1.0',
+    version: '5.2.0',
     description: 'A package providing tools to simplify complex CSS structures and web development tasks, featuring TypeScript support and integration with various web technologies.'
 };
 //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiMDBfY29tbWl0aW5mb19kYXRhLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vdHMvMDBfY29tbWl0aW5mb19kYXRhLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBOztHQUVHO0FBQ0gsTUFBTSxDQUFDLE1BQU0sVUFBVSxHQUFHO0lBQ3hCLElBQUksRUFBRSw4QkFBOEI7SUFDcEMsT0FBTyxFQUFFLE9BQU87SUFDaEIsV0FBVyxFQUFFLHFLQUFxSztDQUNuTCxDQUFBIn0=

package/dist_ts/domtools.classes.thememanager.d.ts

@@ -5,6 +5,14 @@ import * as plugins from './domtools.plugins.js';
  * `'dark'` hold that theme whatever the system does.
  */
 export type TThemePreference = 'system' | 'bright' | 'dark';
+/** What a theme toggle shows: the reader's preference, the system's colour scheme and the theme they resolve to. */
+export interface IThemeState {
+    preference: TThemePreference;
+    /** The system's colour scheme is light. */
+    systemBright: boolean;
+    /** The page shows the bright theme. */
+    goBright: boolean;
+}
 export declare class ThemeManager {
     /**
      * The `localStorage` key a picked preference is kept under, per browser and origin. `'system'` is
@@ -16,7 +24,14 @@ export declare class ThemeManager {
     /** The reader's preference; the theme follows the system only while it is `'system'`. */
     preference: TThemePreference;
     preferredColorSchemeMediaMatch: MediaQueryList;
+    /** The system's colour scheme is light, as `prefers-color-scheme` last reported it. */
+    systemBright: boolean;
     themeObservable: plugins.smartrx.rxjs.ReplaySubject<boolean>;
+    /**
+     * The preference, the system's colour scheme and the theme, on every change of any of them, also
+     * when the theme stays; replays the current state to a new subscriber.
+     */
+    stateObservable: plugins.smartrx.rxjs.ReplaySubject<IThemeState>;
     private automaticGlobalThemeChangeSubscription;
     private readonly preferredColorSchemeChangeHandler;
     /** Another tab of this origin picked a preference; this page follows it. */
@@ -29,6 +44,7 @@ export declare class ThemeManager {
     private static storedPreference;
     enableAutomaticGlobalThemeChange(): Promise<void>;
     private updateAllConnectedElements;
+    private publishState;
     private resolveBright;
     private applyPreference;
     /**

package/dist_ts/domtools.classes.thememanager.js

@@ -13,11 +13,21 @@ export class ThemeManager {
     /** The reader's preference; the theme follows the system only while it is `'system'`. */
     preference = 'system';
     preferredColorSchemeMediaMatch = window.matchMedia('(prefers-color-scheme: light)');
+    /** The system's colour scheme is light, as `prefers-color-scheme` last reported it. */
+    systemBright = this.preferredColorSchemeMediaMatch.matches;
     themeObservable = new plugins.smartrx.rxjs.ReplaySubject(1);
+    /**
+     * The preference, the system's colour scheme and the theme, on every change of any of them, also
+     * when the theme stays; replays the current state to a new subscriber.
+     */
+    stateObservable = new plugins.smartrx.rxjs.ReplaySubject(1);
     automaticGlobalThemeChangeSubscription = null;
     preferredColorSchemeChangeHandler = (eventArg) => {
-        if (this.preference !== 'system')
+        this.systemBright = eventArg.matches;
+        if (this.preference !== 'system') {
+            this.publishState();
             return;
+        }
         this.goBrightBoolean = eventArg.matches;
         this.updateAllConnectedElements();
     };
@@ -69,19 +79,28 @@ export class ThemeManager {
             return;
         }
         this.themeObservable.next(this.goBrightBoolean);
+        this.publishState();
+    }
+    publishState() {
+        if (this.domtoolsRef.disposed) {
+            return;
+        }
+        this.stateObservable.next({ preference: this.preference, systemBright: this.systemBright, goBright: this.goBrightBoolean });
     }
     resolveBright() {
-        return this.preference === 'system'
-            ? this.preferredColorSchemeMediaMatch.matches
-            : this.preference === 'bright';
+        return this.preference === 'system' ? this.systemBright : this.preference === 'bright';
     }
     applyPreference(preferenceArg) {
+        const preferenceChanged = preferenceArg !== this.preference;
         this.preference = preferenceArg;
         const goBright = this.resolveBright();
-        if (goBright === this.goBrightBoolean)
-            return;
-        this.goBrightBoolean = goBright;
-        this.updateAllConnectedElements();
+        if (goBright !== this.goBrightBoolean) {
+            this.goBrightBoolean = goBright;
+            this.updateAllConnectedElements();
+        }
+        else if (preferenceChanged) {
+            this.publishState();
+        }
     }
     /**
      * Picks the theme and keeps the pick in this browser (`'system'` forgets it), so the next page
@@ -133,6 +152,7 @@ export class ThemeManager {
         this.automaticGlobalThemeChangeSubscription?.unsubscribe();
         this.automaticGlobalThemeChangeSubscription = null;
         this.themeObservable.complete();
+        this.stateObservable.complete();
     }
 }
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZG9tdG9vbHMuY2xhc3Nlcy50aGVtZW1hbmFnZXIuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi90cy9kb210b29scy5jbGFzc2VzLnRoZW1lbWFuYWdlci50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsUUFBUSxFQUFFLE1BQU0sZ0NBQWdDLENBQUM7QUFDMUQsT0FBTyxLQUFLLE9BQU8sTUFBTSx1QkFBdUIsQ0FBQztBQVFqRCxNQUFNLGdCQUFnQixHQUFnQyxDQUFDLFFBQVEsRUFBRSxRQUFRLEVBQUUsTUFBTSxDQUFDLENBQUM7QUFFbkYsTUFBTSxpQkFBaUIsR0FBRyxDQUFDLFFBQWlCLEVBQWdDLEVBQUUsQ0FBQyxDQUM3RSxnQkFBZ0IsQ0FBQyxRQUFRLENBQUMsUUFBNEIsQ0FBQyxDQUN4RCxDQUFDO0FBRUYsTUFBTSxPQUFPLFlBQVk7SUFDdkI7OztPQUdHO0lBQ0ksTUFBTSxDQUFVLG9CQUFvQixHQUFHLGdDQUFnQyxDQUFDO0lBRXhFLFdBQVcsQ0FBVztJQUV0QixlQUFlLEdBQUcsS0FBSyxDQUFDO0lBQy9CLHlGQUF5RjtJQUNsRixVQUFVLEdBQXFCLFFBQVEsQ0FBQztJQUN4Qyw4QkFBOEIsR0FBRyxNQUFNLENBQUMsVUFBVSxDQUFDLCtCQUErQixDQUFDLENBQUM7SUFFcEYsZUFBZSxHQUFHLElBQUksT0FBTyxDQUFDLE9BQU8sQ0FBQyxJQUFJLENBQUMsYUFBYSxDQUFVLENBQUMsQ0FBQyxDQUFDO0lBQ3BFLHNDQUFzQyxHQUE2QyxJQUFJLENBQUM7SUFDL0UsaUNBQWlDLEdBQUcsQ0FBQyxRQUE2QixFQUFFLEVBQUU7UUFDckYsSUFBSSxJQUFJLENBQUMsVUFBVSxLQUFLLFFBQVE7WUFBRSxPQUFPO1FBQ3pDLElBQUksQ0FBQyxlQUFlLEdBQUcsUUFBUSxDQUFDLE9BQU8sQ0FBQztRQUN4QyxJQUFJLENBQUMsMEJBQTBCLEVBQUUsQ0FBQztJQUNwQyxDQUFDLENBQUM7SUFDRiw0RUFBNEU7SUFD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
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZG9tdG9vbHMuY2xhc3Nlcy50aGVtZW1hbmFnZXIuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi90cy9kb210b29scy5jbGFzc2VzLnRoZW1lbWFuYWdlci50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsUUFBUSxFQUFFLE1BQU0sZ0NBQWdDLENBQUM7QUFDMUQsT0FBTyxLQUFLLE9BQU8sTUFBTSx1QkFBdUIsQ0FBQztBQVFqRCxNQUFNLGdCQUFnQixHQUFnQyxDQUFDLFFBQVEsRUFBRSxRQUFRLEVBQUUsTUFBTSxDQUFDLENBQUM7QUFFbkYsTUFBTSxpQkFBaUIsR0FBRyxDQUFDLFFBQWlCLEVBQWdDLEVBQUUsQ0FBQyxDQUM3RSxnQkFBZ0IsQ0FBQyxRQUFRLENBQUMsUUFBNEIsQ0FBQyxDQUN4RCxDQUFDO0FBV0YsTUFBTSxPQUFPLFlBQVk7SUFDdkI7OztPQUdHO0lBQ0ksTUFBTSxDQUFVLG9CQUFvQixHQUFHLGdDQUFnQyxDQUFDO0lBRXhFLFdBQVcsQ0FBVztJQUV0QixlQUFlLEdBQUcsS0FBSyxDQUFDO0lBQy9CLHlGQUF5RjtJQUNsRixVQUFVLEdBQXFCLFFBQVEsQ0FBQztJQUN4Qyw4QkFBOEIsR0FBRyxNQUFNLENBQUMsVUFBVSxDQUFDLCtCQUErQixDQUFDLENBQUM7SUFDM0YsdUZBQXVGO0lBQ2hGLFlBQVksR0FBRyxJQUFJLENBQUMsOEJBQThCLENBQUMsT0FBTyxDQUFDO0lBRTNELGVBQWUsR0FBRyxJQUFJLE9BQU8sQ0FBQyxPQUFPLENBQUMsSUFBSSxDQUFDLGFBQWEsQ0FBVSxDQUFDLENBQUMsQ0FBQztJQUM1RTs7O09BR0c7SUFDSSxlQUFlLEdBQUcsSUFBSSxPQUFPLENBQUMsT0FBTyxDQUFDLElBQUksQ0FBQyxhQUFhLENBQWMsQ0FBQyxDQUFDLENBQUM7SUFDeEUsc0NBQXNDLEdBQTZDLElBQUksQ0FBQztJQUMvRSxpQ0FBaUMsR0FBRyxDQUFDLFFBQTZCLEVBQUUsRUFBRTtRQUNyRixJ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

package/dist_ts/index.d.ts

@@ -4,7 +4,7 @@ import * as breakpoints from './domtools.css.breakpoints.js';
 import * as css from './domtools.css.js';
 export { css, breakpoints, elementBasic };
 export { DomTools, type IDomToolsConstructorOptions } from './domtools.classes.domtools.js';
-export { ThemeManager, type TThemePreference } from './domtools.classes.thememanager.js';
+export { ThemeManager, type IThemeState, type TThemePreference } from './domtools.classes.thememanager.js';
 export { TypedRequest } from '@api.global/typedrequest';
 export { type IWebSetupConstructorOptions } from '@push.rocks/websetup';
 import * as plugins from './domtools.pluginexports.js';

package/dist_ts/index.js

@@ -9,4 +9,4 @@ export { TypedRequest } from '@api.global/typedrequest';
 export {} from '@push.rocks/websetup';
 import * as plugins from './domtools.pluginexports.js';
 export { plugins };
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5kZXguanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi90cy9pbmRleC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxjQUFjLHNCQUFzQixDQUFDO0FBRXJDLE9BQU8sS0FBSyxZQUFZLE1BQU0sNEJBQTRCLENBQUM7QUFDM0QsT0FBTyxLQUFLLFdBQVcsTUFBTSwrQkFBK0IsQ0FBQztBQUM3RCxPQUFPLEtBQUssR0FBRyxNQUFNLG1CQUFtQixDQUFDO0FBRXpDLE9BQU8sRUFBRSxHQUFHLEVBQUUsV0FBVyxFQUFFLFlBQVksRUFBRSxDQUFDO0FBQzFDLE9BQU8sRUFBRSxRQUFRLEVBQW9DLE1BQU0sZ0NBQWdDLENBQUM7QUFDNUYsT0FBTyxFQUFFLFlBQVksRUFBeUIsTUFBTSxvQ0FBb0MsQ0FBQztBQUN6RixPQUFPLEVBQUUsWUFBWSxFQUFFLE1BQU0sMEJBQTBCLENBQUM7QUFDeEQsT0FBTyxFQUFvQyxNQUFNLHNCQUFzQixDQUFDO0FBRXhFLE9BQU8sS0FBSyxPQUFPLE1BQU0sNkJBQTZCLENBQUM7QUFDdkQsT0FBTyxFQUFFLE9BQU8sRUFBRSxDQUFDIn0=
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5kZXguanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi90cy9pbmRleC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxjQUFjLHNCQUFzQixDQUFDO0FBRXJDLE9BQU8sS0FBSyxZQUFZLE1BQU0sNEJBQTRCLENBQUM7QUFDM0QsT0FBTyxLQUFLLFdBQVcsTUFBTSwrQkFBK0IsQ0FBQztBQUM3RCxPQUFPLEtBQUssR0FBRyxNQUFNLG1CQUFtQixDQUFDO0FBRXpDLE9BQU8sRUFBRSxHQUFHLEVBQUUsV0FBVyxFQUFFLFlBQVksRUFBRSxDQUFDO0FBQzFDLE9BQU8sRUFBRSxRQUFRLEVBQW9DLE1BQU0sZ0NBQWdDLENBQUM7QUFDNUYsT0FBTyxFQUFFLFlBQVksRUFBMkMsTUFBTSxvQ0FBb0MsQ0FBQztBQUMzRyxPQUFPLEVBQUUsWUFBWSxFQUFFLE1BQU0sMEJBQTBCLENBQUM7QUFDeEQsT0FBTyxFQUFvQyxNQUFNLHNCQUFzQixDQUFDO0FBRXhFLE9BQU8sS0FBSyxPQUFPLE1BQU0sNkJBQTZCLENBQUM7QUFDdkQsT0FBTyxFQUFFLE9BQU8sRUFBRSxDQUFDIn0=

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@design.estate/dees-domtools",
-  "version": "5.1.0",
+  "version": "5.2.0",
   "private": false,
   "description": "A package providing tools to simplify complex CSS structures and web development tasks, featuring TypeScript support and integration with various web technologies.",
   "main": "dist_ts/index.js",

package/readme.md

@@ -157,6 +157,15 @@ themeManager.setPreference('system'); // follow prefers-color-scheme again
 
 `'system'` follows `prefers-color-scheme`; `'bright'` and `'dark'` hold that theme while the system's scheme changes. A picked preference is kept in `localStorage` under `ThemeManager.preferenceStorageKey` (`dees-domtools:theme-preference`, per browser and origin; `'system'` removes the key) and is read before the theme manager's first emission, so a reload starts in it without showing the system theme first. Another tab's pick reaches every open page of the origin through the `storage` event. `setPreference()` returns `false` when the browser refuses the page its storage: the pick then holds for this page only, and it throws on a value that is no `TThemePreference`. An unknown stored value counts as no pick. `goBright()`, `goDark()` and `toggleDarkBright()` set the theme for now and leave the preference alone.
 
+A toggle that shows the preference, not only the theme, subscribes to `stateObservable`, a `ReplaySubject<IThemeState>` that replays the current state and emits on every change of the preference, the system's colour scheme or the theme, also when the theme stays (a pick of the theme the system already shows, the system changing while a pick holds, another tab's pick):
+
+```ts
+themeManager.stateObservable.subscribe(({ preference, systemBright, goBright }) => {
+  // e.g. offer "follow the system" while a pick holds the theme the system shows
+});
+themeManager.systemBright; // the system's colour scheme is light, as prefers-color-scheme last reported it
+```
+
 The page's `DomTools` is one instance on `globalThis` shared by every copy of this package, so it is the copy that creates it whose `ThemeManager` serves the page: every copy in a bundle must be a version with `setPreference()` for a toggle to rely on it.
 
 `enableAutomaticGlobalThemeChange()` waits for `domReady`, so it is safe to call before `document.body` exists.
@@ -320,10 +329,10 @@ Repeated callers receive the first result, and repeated failures re-throw the st
 ## Extra Exports
 
 ```ts
-import { TypedRequest, ThemeManager, type TThemePreference, plugins } from '@design.estate/dees-domtools';
+import { TypedRequest, ThemeManager, type IThemeState, type TThemePreference, plugins } from '@design.estate/dees-domtools';
 ```
 
-- `ThemeManager` is the class of `domtools.themeManager`, exported for `ThemeManager.preferenceStorageKey` and for typing; use the page's instance rather than constructing one, and `TThemePreference` (`'system' | 'bright' | 'dark'`) for a preference (see Theme preference)
+- `ThemeManager` is the class of `domtools.themeManager`, exported for `ThemeManager.preferenceStorageKey` and for typing; use the page's instance rather than constructing one, `TThemePreference` (`'system' | 'bright' | 'dark'`) for a preference, and `IThemeState` for what `stateObservable` emits (see Theme preference)
 - `TypedRequest` is re-exported from `@api.global/typedrequest` 9 for typed request flows
 - `plugins` exposes the underlying modules used by the package, including `smartrouter`, `smartstate`, `smartrx`, `smartpromise`, and `typedrequest`
 

package/ts/00_commitinfo_data.ts

@@ -3,6 +3,6 @@
  */
 export const commitinfo = {
   name: '@design.estate/dees-domtools',
-  version: '5.1.0',
+  version: '5.2.0',
   description: 'A package providing tools to simplify complex CSS structures and web development tasks, featuring TypeScript support and integration with various web technologies.'
 }

package/ts/domtools.classes.thememanager.ts

@@ -13,6 +13,15 @@ const isThemePreference = (valueArg: unknown): valueArg is TThemePreference => (
   themePreferences.includes(valueArg as TThemePreference)
 );
 
+/** What a theme toggle shows: the reader's preference, the system's colour scheme and the theme they resolve to. */
+export interface IThemeState {
+  preference: TThemePreference;
+  /** The system's colour scheme is light. */
+  systemBright: boolean;
+  /** The page shows the bright theme. */
+  goBright: boolean;
+}
+
 export class ThemeManager {
   /**
    * The `localStorage` key a picked preference is kept under, per browser and origin. `'system'` is
@@ -26,11 +35,22 @@ export class ThemeManager {
   /** The reader's preference; the theme follows the system only while it is `'system'`. */
   public preference: TThemePreference = 'system';
   public preferredColorSchemeMediaMatch = window.matchMedia('(prefers-color-scheme: light)');
+  /** The system's colour scheme is light, as `prefers-color-scheme` last reported it. */
+  public systemBright = this.preferredColorSchemeMediaMatch.matches;
 
   public themeObservable = new plugins.smartrx.rxjs.ReplaySubject<boolean>(1);
+  /**
+   * The preference, the system's colour scheme and the theme, on every change of any of them, also
+   * when the theme stays; replays the current state to a new subscriber.
+   */
+  public stateObservable = new plugins.smartrx.rxjs.ReplaySubject<IThemeState>(1);
   private automaticGlobalThemeChangeSubscription: plugins.smartrx.rxjs.Subscription | null = null;
   private readonly preferredColorSchemeChangeHandler = (eventArg: MediaQueryListEvent) => {
-    if (this.preference !== 'system') return;
+    this.systemBright = eventArg.matches;
+    if (this.preference !== 'system') {
+      this.publishState();
+      return;
+    }
     this.goBrightBoolean = eventArg.matches;
     this.updateAllConnectedElements();
   };
@@ -84,20 +104,30 @@ export class ThemeManager {
       return;
     }
     this.themeObservable.next(this.goBrightBoolean);
+    this.publishState();
+  }
+
+  private publishState(): void {
+    if (this.domtoolsRef.disposed) {
+      return;
+    }
+    this.stateObservable.next({ preference: this.preference, systemBright: this.systemBright, goBright: this.goBrightBoolean });
   }
 
   private resolveBright(): boolean {
-    return this.preference === 'system'
-      ? this.preferredColorSchemeMediaMatch.matches
-      : this.preference === 'bright';
+    return this.preference === 'system' ? this.systemBright : this.preference === 'bright';
   }
 
   private applyPreference(preferenceArg: TThemePreference): void {
+    const preferenceChanged = preferenceArg !== this.preference;
     this.preference = preferenceArg;
     const goBright = this.resolveBright();
-    if (goBright === this.goBrightBoolean) return;
-    this.goBrightBoolean = goBright;
-    this.updateAllConnectedElements();
+    if (goBright !== this.goBrightBoolean) {
+      this.goBrightBoolean = goBright;
+      this.updateAllConnectedElements();
+    } else if (preferenceChanged) {
+      this.publishState();
+    }
   }
 
   /**
@@ -151,5 +181,6 @@ export class ThemeManager {
     this.automaticGlobalThemeChangeSubscription?.unsubscribe();
     this.automaticGlobalThemeChangeSubscription = null;
     this.themeObservable.complete();
+    this.stateObservable.complete();
   }
 }

package/ts/index.ts

@@ -6,7 +6,7 @@ import * as css from './domtools.css.js';
 
 export { css, breakpoints, elementBasic };
 export { DomTools, type IDomToolsConstructorOptions } from './domtools.classes.domtools.js';
-export { ThemeManager, type TThemePreference } from './domtools.classes.thememanager.js';
+export { ThemeManager, type IThemeState, type TThemePreference } from './domtools.classes.thememanager.js';
 export { TypedRequest } from '@api.global/typedrequest';
 export { type IWebSetupConstructorOptions } from '@push.rocks/websetup';