@dever-labs/ngx-mfe-broker 0.1.1

package/README.md

@@ -0,0 +1,64 @@
+# NgxMfeBroker
+
+This project was generated using [Angular CLI](https://github.com/angular/angular-cli) version 22.0.0.
+
+## Code scaffolding
+
+Angular CLI includes powerful code scaffolding tools. To generate a new component, run:
+
+```bash
+ng generate component component-name
+```
+
+For a complete list of available schematics (such as `components`, `directives`, or `pipes`), run:
+
+```bash
+ng generate --help
+```
+
+## Building
+
+To build the library, run:
+
+```bash
+ng build ngx-mfe-broker
+```
+
+This command will compile your project, and the build artifacts will be placed in the `dist/` directory.
+
+### Publishing the Library
+
+Once the project is built, you can publish your library by following these steps:
+
+1. Navigate to the `dist` directory:
+
+   ```bash
+   cd dist/ngx-mfe-broker
+   ```
+
+2. Run the `npm publish` command to publish your library to the npm registry:
+   ```bash
+   npm publish
+   ```
+
+## Running unit tests
+
+To execute unit tests with the [Karma](https://karma-runner.github.io) test runner, use the following command:
+
+```bash
+ng test
+```
+
+## Running end-to-end tests
+
+For end-to-end (e2e) testing, run:
+
+```bash
+ng e2e
+```
+
+Angular CLI does not come with an end-to-end testing framework by default. You can choose one that suits your needs.
+
+## Additional Resources
+
+For more information on using the Angular CLI, including detailed command references, visit the [Angular CLI Overview and Command Reference](https://angular.dev/tools/cli) page.

package/fesm2022/dever-labs-ngx-mfe-broker.mjs

@@ -0,0 +1,229 @@
+import * as i0 from '@angular/core';
+import { InjectionToken, inject, signal, effect, Injectable, makeEnvironmentProviders } from '@angular/core';
+
+const CHANNEL_NAME$1 = '@dever-labs/ngx-mfe-broker:state';
+/**
+ * Injection token used to supply the initial state shape and default values.
+ *
+ * Provide this via `provideNgxMfeBroker({ initialState: { ... } })`.
+ *
+ * @example
+ * provideNgxMfeBroker({ initialState: { theme: 'light', token: null } })
+ */
+const NGX_MFE_INITIAL_STATE = new InjectionToken('@dever-labs/ngx-mfe-broker:initial-state', { factory: () => ({}) });
+function serialize(value) {
+    return typeof value === 'string' ? value : JSON.stringify(value);
+}
+function deserialize(raw, fallback) {
+    if (typeof fallback === 'string')
+        return raw;
+    try {
+        return JSON.parse(raw);
+    }
+    catch {
+        return fallback;
+    }
+}
+function stateEqual(a, b) {
+    if (a === b)
+        return true;
+    return JSON.stringify(a) === JSON.stringify(b);
+}
+/**
+ * Generic typed state service for micro-frontends.
+ *
+ * State is backed by localStorage, reactive via Angular Signals, and
+ * synchronised across browser tabs via BroadcastChannel.
+ *
+ * Consumers define their own state shape by providing `NGX_MFE_INITIAL_STATE`.
+ * Use `get<T>(key)` / `set(key, value)` for type-safe access.
+ */
+class MfeStateService {
+    signals = new Map();
+    defaults = new Map();
+    /**
+     * Value-based guard: stores the last value received from another tab for
+     * each key. The effect checks this map instead of a time-sensitive Set so
+     * the check happens at effect execution time — guaranteed after the signal
+     * update — rather than racing against queueMicrotask cleanup.
+     */
+    inboundValues = new Map();
+    storage = typeof localStorage !== 'undefined' ? localStorage : null;
+    channel = typeof BroadcastChannel !== 'undefined'
+        ? new BroadcastChannel(CHANNEL_NAME$1)
+        : null;
+    constructor() {
+        const initialState = inject(NGX_MFE_INITIAL_STATE);
+        for (const [key, defaultValue] of Object.entries(initialState)) {
+            this.defaults.set(key, defaultValue);
+            const raw = this.storage?.getItem(key) ?? null;
+            const value = raw !== null ? deserialize(raw, defaultValue) : defaultValue;
+            const s = signal(value, /* @ts-ignore */
+            ...(ngDevMode ? [{ debugName: "s" }] : /* istanbul ignore next */ []));
+            this.signals.set(key, s);
+            effect(() => {
+                const current = s();
+                this.storage?.setItem(key, serialize(current));
+                // Skip broadcast if this value arrived from another tab to prevent echo loops.
+                if (stateEqual(current, this.inboundValues.get(key))) {
+                    this.inboundValues.delete(key);
+                    return;
+                }
+                this.channel?.postMessage({ key, value: current });
+            });
+        }
+        this.channel?.addEventListener('message', ({ data }) => {
+            const s = this.signals.get(data.key);
+            if (!s)
+                return;
+            if (stateEqual(s(), data.value))
+                return;
+            // Record the inbound value before updating the signal. The effect will
+            // read inboundValues synchronously during its execution and clear the entry.
+            this.inboundValues.set(data.key, data.value);
+            s.set(data.value);
+        });
+    }
+    /** Get a typed Signal for the given key. Key must be registered in `NGX_MFE_INITIAL_STATE`. */
+    get(key) {
+        if (!this.signals.has(key)) {
+            throw new Error(`[ngx-mfe-broker] Unknown state key "${key}". ` +
+                `Register it in NGX_MFE_INITIAL_STATE via provideNgxMfeBroker({ initialState: { ${key}: <default> } }).`);
+        }
+        return this.signals.get(key);
+    }
+    /** Set a value — persists to localStorage and broadcasts cross-tab. */
+    set(key, value) {
+        this.get(key).set(value);
+    }
+    ngOnDestroy() {
+        this.channel?.close();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: MfeStateService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: MfeStateService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: MfeStateService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }], ctorParameters: () => [] });
+
+const CHANNEL_NAME = '@dever-labs/ngx-mfe-broker:config';
+/**
+ * Generic cross-tab string key-value store backed by localStorage.
+ * Changes are broadcast to all other tabs/windows via BroadcastChannel.
+ */
+class ConfigRepositoryService {
+    signals = new Map();
+    /** Tracks every key ever written so clear() only removes its own keys. */
+    ownedKeys = new Set();
+    storage = typeof localStorage !== 'undefined' ? localStorage : null;
+    channel = typeof BroadcastChannel !== 'undefined'
+        ? new BroadcastChannel(CHANNEL_NAME)
+        : null;
+    /**
+     * Value-based inbound guard: stores the last value received from another tab.
+     * `null` means the last inbound operation was a remove for that key.
+     * Checked synchronously in set()/remove() to prevent re-broadcasting received updates.
+     */
+    inboundValues = new Map();
+    constructor() {
+        this.channel?.addEventListener('message', ({ data }) => {
+            if (data.type === 'clear') {
+                // Iterate only the keys the sender owned — not all signals on this tab.
+                data.keys.forEach(k => {
+                    this.inboundValues.set(k, null);
+                    this.storage?.removeItem(k);
+                    this.signals.get(k)?.set(null);
+                });
+            }
+            else if (data.type === 'remove') {
+                this.inboundValues.set(data.key, null);
+                this.storage?.removeItem(data.key);
+                this.signals.get(data.key)?.set(null);
+            }
+            else {
+                this.inboundValues.set(data.key, data.value);
+                this.storage?.setItem(data.key, data.value);
+                this.getWritable(data.key).set(data.value);
+            }
+        });
+    }
+    getSignal(key) {
+        return this.getWritable(key).asReadonly();
+    }
+    get(key) {
+        return this.getSignal(key)();
+    }
+    set(key, value) {
+        this.ownedKeys.add(key);
+        this.storage?.setItem(key, value);
+        this.getWritable(key).set(value);
+        if (this.inboundValues.get(key) === value) {
+            this.inboundValues.delete(key);
+            return;
+        }
+        this.channel?.postMessage({ type: 'set', key, value });
+    }
+    remove(key) {
+        this.ownedKeys.delete(key);
+        this.storage?.removeItem(key);
+        this.signals.get(key)?.set(null);
+        if (this.inboundValues.get(key) === null && this.inboundValues.has(key)) {
+            this.inboundValues.delete(key);
+            return;
+        }
+        this.channel?.postMessage({ type: 'remove', key });
+    }
+    /** Removes only keys written by this service — does not touch unrelated localStorage entries. */
+    clear() {
+        const keys = [...this.ownedKeys];
+        keys.forEach(k => {
+            this.storage?.removeItem(k);
+            this.signals.get(k)?.set(null);
+        });
+        this.ownedKeys.clear();
+        this.channel?.postMessage({ type: 'clear', keys });
+    }
+    ngOnDestroy() {
+        this.channel?.close();
+    }
+    getWritable(key) {
+        if (!this.signals.has(key)) {
+            this.signals.set(key, signal(this.storage?.getItem(key) ?? null));
+        }
+        return this.signals.get(key);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: ConfigRepositoryService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: ConfigRepositoryService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: ConfigRepositoryService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }], ctorParameters: () => [] });
+
+/**
+ * Call in your `app.config.ts` to configure `@dever-labs/ngx-mfe-broker`.
+ *
+ * @example
+ * export const appConfig: ApplicationConfig = {
+ *   providers: [
+ *     provideNgxMfeBroker({ initialState: { theme: 'light', token: null } }),
+ *   ]
+ * };
+ */
+function provideNgxMfeBroker(config) {
+    return makeEnvironmentProviders([
+        { provide: NGX_MFE_INITIAL_STATE, useValue: config.initialState },
+    ]);
+}
+
+/*
+ * Public API Surface of @dever-labs/ngx-mfe-broker
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { ConfigRepositoryService, MfeStateService, NGX_MFE_INITIAL_STATE, provideNgxMfeBroker };
+//# sourceMappingURL=dever-labs-ngx-mfe-broker.mjs.map

package/fesm2022/dever-labs-ngx-mfe-broker.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"dever-labs-ngx-mfe-broker.mjs","sources":["../../../projects/ngx-mfe-broker/src/lib/mfe-state.service.ts","../../../projects/ngx-mfe-broker/src/lib/config-repository.service.ts","../../../projects/ngx-mfe-broker/src/lib/provide-ngx-mfe-broker.ts","../../../projects/ngx-mfe-broker/src/public-api.ts","../../../projects/ngx-mfe-broker/src/dever-labs-ngx-mfe-broker.ts"],"sourcesContent":["import { effect, inject, Injectable, InjectionToken, OnDestroy, signal, WritableSignal } from '@angular/core';\n\nconst CHANNEL_NAME = '@dever-labs/ngx-mfe-broker:state';\n\n/**\n * Injection token used to supply the initial state shape and default values.\n *\n * Provide this via `provideNgxMfeBroker({ initialState: { ... } })`.\n *\n * @example\n * provideNgxMfeBroker({ initialState: { theme: 'light', token: null } })\n */\nexport const NGX_MFE_INITIAL_STATE = new InjectionToken<Record<string, unknown>>(\n  '@dever-labs/ngx-mfe-broker:initial-state',\n  { factory: () => ({}) },\n);\n\nfunction serialize(value: unknown): string {\n  return typeof value === 'string' ? value : JSON.stringify(value);\n}\n\nfunction deserialize(raw: string, fallback: unknown): unknown {\n  if (typeof fallback === 'string') return raw;\n  try { return JSON.parse(raw); } catch { return fallback; }\n}\n\nfunction stateEqual(a: unknown, b: unknown): boolean {\n  if (a === b) return true;\n  return JSON.stringify(a) === JSON.stringify(b);\n}\n\ntype StateMessage = { key: string; value: unknown };\n\n/**\n * Generic typed state service for micro-frontends.\n *\n * State is backed by localStorage, reactive via Angular Signals, and\n * synchronised across browser tabs via BroadcastChannel.\n *\n * Consumers define their own state shape by providing `NGX_MFE_INITIAL_STATE`.\n * Use `get<T>(key)` / `set(key, value)` for type-safe access.\n */\n@Injectable({ providedIn: 'root' })\nexport class MfeStateService implements OnDestroy {\n  private readonly signals = new Map<string, WritableSignal<unknown>>();\n  private readonly defaults = new Map<string, unknown>();\n  /**\n   * Value-based guard: stores the last value received from another tab for\n   * each key. The effect checks this map instead of a time-sensitive Set so\n   * the check happens at effect execution time — guaranteed after the signal\n   * update — rather than racing against queueMicrotask cleanup.\n   */\n  private readonly inboundValues = new Map<string, unknown>();\n\n  private readonly storage: Storage | null = typeof localStorage !== 'undefined' ? localStorage : null;\n\n  private readonly channel = typeof BroadcastChannel !== 'undefined'\n    ? new BroadcastChannel(CHANNEL_NAME)\n    : null;\n\n  constructor() {\n    const initialState = inject(NGX_MFE_INITIAL_STATE);\n\n    for (const [key, defaultValue] of Object.entries(initialState)) {\n      this.defaults.set(key, defaultValue);\n      const raw = this.storage?.getItem(key) ?? null;\n      const value = raw !== null ? deserialize(raw, defaultValue) : defaultValue;\n      const s = signal(value);\n      this.signals.set(key, s);\n\n      effect(() => {\n        const current = s();\n        this.storage?.setItem(key, serialize(current));\n        // Skip broadcast if this value arrived from another tab to prevent echo loops.\n        if (stateEqual(current, this.inboundValues.get(key))) {\n          this.inboundValues.delete(key);\n          return;\n        }\n        this.channel?.postMessage({ key, value: current } satisfies StateMessage);\n      });\n    }\n\n    this.channel?.addEventListener('message', ({ data }: MessageEvent<StateMessage>) => {\n      const s = this.signals.get(data.key);\n      if (!s) return;\n      if (stateEqual(s(), data.value)) return;\n      // Record the inbound value before updating the signal. The effect will\n      // read inboundValues synchronously during its execution and clear the entry.\n      this.inboundValues.set(data.key, data.value);\n      s.set(data.value);\n    });\n  }\n\n  /** Get a typed Signal for the given key. Key must be registered in `NGX_MFE_INITIAL_STATE`. */\n  get<T>(key: string): WritableSignal<T> {\n    if (!this.signals.has(key)) {\n      throw new Error(\n        `[ngx-mfe-broker] Unknown state key \"${key}\". ` +\n        `Register it in NGX_MFE_INITIAL_STATE via provideNgxMfeBroker({ initialState: { ${key}: <default> } }).`,\n      );\n    }\n    return this.signals.get(key) as WritableSignal<T>;\n  }\n\n  /** Set a value — persists to localStorage and broadcasts cross-tab. */\n  set<T>(key: string, value: T): void {\n    this.get<T>(key).set(value);\n  }\n\n  ngOnDestroy(): void {\n    this.channel?.close();\n  }\n}\n","import { Injectable, signal, Signal, WritableSignal, OnDestroy } from '@angular/core';\n\nconst CHANNEL_NAME = '@dever-labs/ngx-mfe-broker:config';\n\ntype ConfigMessage =\n  | { type: 'set'; key: string; value: string }\n  | { type: 'remove'; key: string }\n  | { type: 'clear'; keys: string[] };\n\n/**\n * Generic cross-tab string key-value store backed by localStorage.\n * Changes are broadcast to all other tabs/windows via BroadcastChannel.\n */\n@Injectable({ providedIn: 'root' })\nexport class ConfigRepositoryService implements OnDestroy {\n  private readonly signals = new Map<string, WritableSignal<string | null>>();\n  /** Tracks every key ever written so clear() only removes its own keys. */\n  private readonly ownedKeys = new Set<string>();\n\n  private readonly storage: Storage | null = typeof localStorage !== 'undefined' ? localStorage : null;\n\n  private readonly channel = typeof BroadcastChannel !== 'undefined'\n    ? new BroadcastChannel(CHANNEL_NAME)\n    : null;\n\n  /**\n   * Value-based inbound guard: stores the last value received from another tab.\n   * `null` means the last inbound operation was a remove for that key.\n   * Checked synchronously in set()/remove() to prevent re-broadcasting received updates.\n   */\n  private readonly inboundValues = new Map<string, string | null>();\n\n  constructor() {\n    this.channel?.addEventListener('message', ({ data }: MessageEvent<ConfigMessage>) => {\n      if (data.type === 'clear') {\n        // Iterate only the keys the sender owned — not all signals on this tab.\n        data.keys.forEach(k => {\n          this.inboundValues.set(k, null);\n          this.storage?.removeItem(k);\n          this.signals.get(k)?.set(null);\n        });\n      } else if (data.type === 'remove') {\n        this.inboundValues.set(data.key, null);\n        this.storage?.removeItem(data.key);\n        this.signals.get(data.key)?.set(null);\n      } else {\n        this.inboundValues.set(data.key, data.value);\n        this.storage?.setItem(data.key, data.value);\n        this.getWritable(data.key).set(data.value);\n      }\n    });\n  }\n\n  getSignal(key: string): Signal<string | null> {\n    return this.getWritable(key).asReadonly();\n  }\n\n  get(key: string): string | null {\n    return this.getSignal(key)();\n  }\n\n  set(key: string, value: string): void {\n    this.ownedKeys.add(key);\n    this.storage?.setItem(key, value);\n    this.getWritable(key).set(value);\n    if (this.inboundValues.get(key) === value) {\n      this.inboundValues.delete(key);\n      return;\n    }\n    this.channel?.postMessage({ type: 'set', key, value } satisfies ConfigMessage);\n  }\n\n  remove(key: string): void {\n    this.ownedKeys.delete(key);\n    this.storage?.removeItem(key);\n    this.signals.get(key)?.set(null);\n    if (this.inboundValues.get(key) === null && this.inboundValues.has(key)) {\n      this.inboundValues.delete(key);\n      return;\n    }\n    this.channel?.postMessage({ type: 'remove', key } satisfies ConfigMessage);\n  }\n\n  /** Removes only keys written by this service — does not touch unrelated localStorage entries. */\n  clear(): void {\n    const keys = [...this.ownedKeys];\n    keys.forEach(k => {\n      this.storage?.removeItem(k);\n      this.signals.get(k)?.set(null);\n    });\n    this.ownedKeys.clear();\n    this.channel?.postMessage({ type: 'clear', keys } satisfies ConfigMessage);\n  }\n\n  ngOnDestroy(): void {\n    this.channel?.close();\n  }\n\n  private getWritable(key: string): WritableSignal<string | null> {\n    if (!this.signals.has(key)) {\n      this.signals.set(key, signal(this.storage?.getItem(key) ?? null));\n    }\n    return this.signals.get(key)!;\n  }\n}\n","import { EnvironmentProviders, makeEnvironmentProviders } from '@angular/core';\nimport { NGX_MFE_INITIAL_STATE } from './mfe-state.service';\n\nexport interface NgxMfeBrokerConfig {\n  /**\n   * Initial state values with their default values.\n   * Each key becomes a Signal backed by localStorage with cross-tab sync.\n   *\n   * @example\n   * provideNgxMfeBroker({\n   *   initialState: { theme: 'light', token: null, users: [] }\n   * })\n   */\n  initialState: Record<string, unknown>;\n}\n\n/**\n * Call in your `app.config.ts` to configure `@dever-labs/ngx-mfe-broker`.\n *\n * @example\n * export const appConfig: ApplicationConfig = {\n *   providers: [\n *     provideNgxMfeBroker({ initialState: { theme: 'light', token: null } }),\n *   ]\n * };\n */\nexport function provideNgxMfeBroker(config: NgxMfeBrokerConfig): EnvironmentProviders {\n  return makeEnvironmentProviders([\n    { provide: NGX_MFE_INITIAL_STATE, useValue: config.initialState },\n  ]);\n}\n","/*\n * Public API Surface of @dever-labs/ngx-mfe-broker\n */\n\nexport * from './lib/mfe-state.service';\nexport * from './lib/config-repository.service';\nexport * from './lib/provide-ngx-mfe-broker';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":["CHANNEL_NAME"],"mappings":"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"}

package/package.json

@@ -0,0 +1,57 @@
+{
+  "name": "@dever-labs/ngx-mfe-broker",
+  "version": "0.1.1",
+  "description": "Angular Signals + BroadcastChannel state broker for micro-frontends. Synchronises state across MFEs and browser tabs via localStorage persistence and BroadcastChannel cross-tab sync.",
+  "keywords": [
+    "angular",
+    "micro-frontends",
+    "mfe",
+    "signals",
+    "broadcast-channel",
+    "state-management",
+    "native-federation",
+    "cross-tab",
+    "localStorage"
+  ],
+  "author": {
+    "name": "Dever Labs",
+    "url": "https://github.com/dever-labs"
+  },
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/dever-labs/ngx-mfe-broker.git"
+  },
+  "bugs": {
+    "url": "https://github.com/dever-labs/ngx-mfe-broker/issues"
+  },
+  "homepage": "https://github.com/dever-labs/ngx-mfe-broker#readme",
+  "engines": {
+    "node": ">=20.0.0",
+    "npm": ">=9.0.0"
+  },
+  "peerDependencies": {
+    "@angular/core": ">=22.0.0"
+  },
+  "peerDependenciesMeta": {
+    "@angular/core": {
+      "optional": false
+    }
+  },
+  "dependencies": {
+    "tslib": "^2.3.0"
+  },
+  "sideEffects": false,
+  "module": "fesm2022/dever-labs-ngx-mfe-broker.mjs",
+  "typings": "types/dever-labs-ngx-mfe-broker.d.ts",
+  "exports": {
+    "./package.json": {
+      "default": "./package.json"
+    },
+    ".": {
+      "types": "./types/dever-labs-ngx-mfe-broker.d.ts",
+      "default": "./fesm2022/dever-labs-ngx-mfe-broker.mjs"
+    }
+  },
+  "type": "module"
+}

package/types/dever-labs-ngx-mfe-broker.d.ts

@@ -0,0 +1,98 @@
+import * as i0 from '@angular/core';
+import { OnDestroy, WritableSignal, InjectionToken, Signal, EnvironmentProviders } from '@angular/core';
+
+/**
+ * Injection token used to supply the initial state shape and default values.
+ *
+ * Provide this via `provideNgxMfeBroker({ initialState: { ... } })`.
+ *
+ * @example
+ * provideNgxMfeBroker({ initialState: { theme: 'light', token: null } })
+ */
+declare const NGX_MFE_INITIAL_STATE: InjectionToken<Record<string, unknown>>;
+/**
+ * Generic typed state service for micro-frontends.
+ *
+ * State is backed by localStorage, reactive via Angular Signals, and
+ * synchronised across browser tabs via BroadcastChannel.
+ *
+ * Consumers define their own state shape by providing `NGX_MFE_INITIAL_STATE`.
+ * Use `get<T>(key)` / `set(key, value)` for type-safe access.
+ */
+declare class MfeStateService implements OnDestroy {
+    private readonly signals;
+    private readonly defaults;
+    /**
+     * Value-based guard: stores the last value received from another tab for
+     * each key. The effect checks this map instead of a time-sensitive Set so
+     * the check happens at effect execution time — guaranteed after the signal
+     * update — rather than racing against queueMicrotask cleanup.
+     */
+    private readonly inboundValues;
+    private readonly storage;
+    private readonly channel;
+    constructor();
+    /** Get a typed Signal for the given key. Key must be registered in `NGX_MFE_INITIAL_STATE`. */
+    get<T>(key: string): WritableSignal<T>;
+    /** Set a value — persists to localStorage and broadcasts cross-tab. */
+    set<T>(key: string, value: T): void;
+    ngOnDestroy(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<MfeStateService, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<MfeStateService>;
+}
+
+/**
+ * Generic cross-tab string key-value store backed by localStorage.
+ * Changes are broadcast to all other tabs/windows via BroadcastChannel.
+ */
+declare class ConfigRepositoryService implements OnDestroy {
+    private readonly signals;
+    /** Tracks every key ever written so clear() only removes its own keys. */
+    private readonly ownedKeys;
+    private readonly storage;
+    private readonly channel;
+    /**
+     * Value-based inbound guard: stores the last value received from another tab.
+     * `null` means the last inbound operation was a remove for that key.
+     * Checked synchronously in set()/remove() to prevent re-broadcasting received updates.
+     */
+    private readonly inboundValues;
+    constructor();
+    getSignal(key: string): Signal<string | null>;
+    get(key: string): string | null;
+    set(key: string, value: string): void;
+    remove(key: string): void;
+    /** Removes only keys written by this service — does not touch unrelated localStorage entries. */
+    clear(): void;
+    ngOnDestroy(): void;
+    private getWritable;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ConfigRepositoryService, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<ConfigRepositoryService>;
+}
+
+interface NgxMfeBrokerConfig {
+    /**
+     * Initial state values with their default values.
+     * Each key becomes a Signal backed by localStorage with cross-tab sync.
+     *
+     * @example
+     * provideNgxMfeBroker({
+     *   initialState: { theme: 'light', token: null, users: [] }
+     * })
+     */
+    initialState: Record<string, unknown>;
+}
+/**
+ * Call in your `app.config.ts` to configure `@dever-labs/ngx-mfe-broker`.
+ *
+ * @example
+ * export const appConfig: ApplicationConfig = {
+ *   providers: [
+ *     provideNgxMfeBroker({ initialState: { theme: 'light', token: null } }),
+ *   ]
+ * };
+ */
+declare function provideNgxMfeBroker(config: NgxMfeBrokerConfig): EnvironmentProviders;
+
+export { ConfigRepositoryService, MfeStateService, NGX_MFE_INITIAL_STATE, provideNgxMfeBroker };
+export type { NgxMfeBrokerConfig };