wacom 21.1.12 → 21.1.14

package/README.md

@@ -36,10 +36,10 @@ export const appConfig = {
 		provideWacom({
 			http: { url: "https://api.example.com" },
 			store: { prefix: "waStore" },
-			meta: {
-				useTitleSuffix: false,
-				defaults: { links: {} },
-			},
+			meta: {
+				useTitleSuffix: false,
+				defaults: { links: {} },
+			},
 			network: {},
 			// enable and configure sockets if needed
 			socket: false,
@@ -64,6 +64,7 @@ export const appConfig = {
 | [**`Network`**](https://www.npmjs.com/package/wacom#network-service) |              Monitors network connectivity and latency              |
 | [**`RTC`**](https://www.npmjs.com/package/wacom#rtc-service)         |        Wraps WebRTC peer connections and local media streams        |
 | [**`Util`**](https://www.npmjs.com/package/wacom#util-service)       |      Utility methods for forms, validation, and CSS variables       |
+| [**`Theme`**](#theme-service)                                        |       Manages UI theme mode, density, and radius preferences        |
 | [**`Emitter`**](#emitter-service)                                    |            Lightweight app-wide event and task signaling            |
 
 ## [Emitter Service](#emitter-service)
@@ -502,7 +503,7 @@ In this example:
 
 This ensures controlled access to the resource, preventing race conditions and ensuring data integrity.
 
-## [Http Service](#http-service)
+## [Http Service](#http-service)
 
 The `HttpService` provides an HTTP layer for `HttpClient` in Angular, supporting both callbacks and observables for various HTTP operations.
 
@@ -972,7 +973,7 @@ Sets the title and optional title suffix, updating the `title`, `og:title`, and
 metaService.setTitle('My Page Title', ' | My Website');
 ```
 
-#### `setLink(links: { [key: string]: string }): void`
+#### `setLink(links: { [key: string]: string }): void`
 
 Sets link tags.
 
@@ -1431,13 +1432,13 @@ interface CrudDocument {
 
 ```typescript
 import { Injectable } from "@angular/core";
-import {
-	CoreService,
-	HttpService,
-	StoreService,
-	CrudService,
-	CrudDocument,
-} from "wacom";
+import {
+	CoreService,
+	HttpService,
+	StoreService,
+	CrudService,
+	CrudDocument,
+} from "wacom";
 
 export interface Work extends CrudDocument {
 	name: string;
@@ -1450,19 +1451,15 @@ export interface Work extends CrudDocument {
 export class WorkService extends CrudService<Work> {
 	works: Work[] = this.getDocs();
 
-	constructor(
-		_http: HttpService,
-		_store: StoreService,
-		_core: CoreService,
-	) {
-		super(
-			{
-				name: "work",
-			},
-			_http,
-			_store,
-			_core,
-		);
+	constructor(_http: HttpService, _store: StoreService, _core: CoreService) {
+		super(
+			{
+				name: "work",
+			},
+			_http,
+			_store,
+			_core,
+		);
 
 		this.get();
 	}
@@ -2163,3 +2160,36 @@ async connect(id: string) {
   // send offer to remote peer...
 }
 ```
+
+## [Theme Service](#theme-service)
+
+The `ThemeService` manages UI theme preferences by setting data attributes on the
+document root, persisting them in `localStorage`, and exposing Angular signals.
+
+### Properties
+
+- `mode: Signal<ThemeMode | string | undefined>` - current theme mode.
+- `density: Signal<ThemeDensity | undefined>` - current density.
+- `radius: Signal<ThemeRadius | undefined>` - current radius.
+
+### Methods
+
+- `setMode(mode: ThemeMode): void` - sets `data-mode`, persists `theme.mode`, updates `mode`.
+- `setDensity(density: ThemeDensity): void` - sets `data-density`, persists `theme.density`, updates `density`.
+- `setRadius(radius: ThemeRadius): void` - sets `data-radius`, persists `theme.radius`, updates `radius`.
+- `init(): void` - loads preferences from `localStorage` (or defaults to `light`, `comfortable`, `rounded`) and updates signals.
+
+### Usage Example
+
+```Typescript
+import { ThemeService } from "wacom";
+
+constructor(private theme: ThemeService) {}
+
+ngOnInit() {
+	this.theme.init();
+	this.theme.setMode("dark");
+	this.theme.setDensity("compact");
+	this.theme.setRadius("square");
+}
+```