@ngstato/angular 0.1.2 → 0.1.4

package/dist/fesm2022/ngstato-angular.mjs

@@ -0,0 +1,512 @@
+import * as i0 from '@angular/core';
+import { inject, InjectionToken, isDevMode, makeEnvironmentProviders, signal, computed, Injectable, Component } from '@angular/core';
+import { configureHttp, devTools, createStore } from '@ngstato/core';
+import { JsonPipe } from '@angular/common';
+
+// ─────────────────────────────────────────────────────
+// @ngstato/angular — injectStore()
+// Helper pour injecter un store dans un composant
+// ─────────────────────────────────────────────────────
+function injectStore(store) {
+    return inject(store);
+}
+
+const STATO_CONFIG = new InjectionToken('STATO_CONFIG');
+function provideStato(config = {}) {
+    if (config.http) {
+        configureHttp(config.http);
+    }
+    // DevTools — ignorés automatiquement en production
+    // isDevMode() est géré par Angular au build
+    // → false en prod même si devtools: true
+    if (config.devtools && isDevMode()) {
+        console.info('%c[Stato] 🛠 DevTools activés', 'background:#1e40af;color:white;padding:4px 8px;border-radius:4px;font-weight:bold');
+        devTools.open();
+    }
+    return makeEnvironmentProviders([
+        {
+            provide: STATO_CONFIG,
+            useValue: config
+        }
+    ]);
+}
+
+// ─────────────────────────────────────────────────────
+// @ngstato/angular — createAngularStore()
+// Transforme un ngstato store en store Angular avec Signals
+// ─────────────────────────────────────────────────────
+// ─────────────────────────────────────────────────────
+// FONCTION PRINCIPALE — createAngularStore()
+// ─────────────────────────────────────────────────────
+function createAngularStore(config) {
+    // 1. Créer le store core
+    const coreStore = createStore(config);
+    // 2. Créer un Signal pour chaque propriété du state
+    const signals = {};
+    const initialState = coreStore.getState();
+    for (const key of Object.keys(initialState)) {
+        signals[key] = signal(initialState[key]);
+    }
+    // 3. Synchroniser les Signals avec le state core
+    coreStore.subscribe((newState) => {
+        for (const key of Object.keys(newState)) {
+            if (signals[key]) {
+                signals[key].set(newState[key]);
+            }
+        }
+    });
+    // 4. Construire l objet public Angular
+    const angularStore = {
+        __store__: coreStore.__store__
+    };
+    // 5. Exposer chaque propriété comme Signal
+    for (const key of Object.keys(initialState)) {
+        Object.defineProperty(angularStore, key, {
+            get: () => signals[key],
+            enumerable: true,
+            configurable: true
+        });
+    }
+    // 6. Exposer chaque computed comme Signal computed
+    const { computed: computedConfig } = config;
+    if (computedConfig) {
+        for (const key of Object.keys(computedConfig)) {
+            const computedSignal = computed(() => coreStore[key]);
+            Object.defineProperty(angularStore, key, {
+                get: () => computedSignal,
+                enumerable: true,
+                configurable: true
+            });
+        }
+    }
+    // 7. Exposer chaque action directement
+    const { actions } = config;
+    if (actions) {
+        for (const name of Object.keys(actions)) {
+            angularStore[name] = (...args) => coreStore.__store__.dispatch(name, ...args);
+        }
+    }
+    // 8. Appeler onInit si défini
+    const { hooks } = config;
+    if (hooks?.onInit) {
+        hooks.onInit(angularStore);
+    }
+    // 9. Exposer destroy pour le cleanup
+    angularStore.__destroy__ = () => {
+        coreStore.__store__.destroy(angularStore);
+    };
+    return angularStore;
+}
+// ─────────────────────────────────────────────────────
+// CLASSE DE BASE — étendue par StatoStore()
+// Publique — pas de membres privés
+// ─────────────────────────────────────────────────────
+class StatoStoreBase {
+    storeInstance;
+    initStore(config) {
+        this.storeInstance = createAngularStore(config);
+        // Copier toutes les propriétés sur this
+        for (const key of Object.keys(this.storeInstance)) {
+            if (key !== '__store__' && key !== '__destroy__') {
+                Object.defineProperty(this, key, {
+                    get: () => this.storeInstance[key],
+                    enumerable: true,
+                    configurable: true
+                });
+            }
+        }
+        // Copier les actions
+        const { actions } = config;
+        if (actions) {
+            for (const name of Object.keys(actions)) {
+                Object.defineProperty(this, name, {
+                    get: () => this.storeInstance[name],
+                    enumerable: true,
+                    configurable: true
+                });
+            }
+        }
+    }
+    ngOnDestroy() {
+        this.storeInstance?.__destroy__();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: StatoStoreBase, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: StatoStoreBase });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: StatoStoreBase, decorators: [{
+            type: Injectable
+        }] });
+// ─────────────────────────────────────────────────────
+// FACTORY — StatoStore()
+// Crée un service Angular injectable
+// Usage :
+//   export class UserStore extends StatoStore({
+//     user: null,
+//     actions: { ... }
+//   }) {}
+// ─────────────────────────────────────────────────────
+function StatoStore(config) {
+    class ConcreteStore extends StatoStoreBase {
+        constructor() {
+            super();
+            this.initStore(config);
+        }
+        static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ConcreteStore, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+        static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ConcreteStore, providedIn: 'root' });
+    }
+    i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ConcreteStore, decorators: [{
+                type: Injectable,
+                args: [{ providedIn: 'root' }]
+            }], ctorParameters: () => [] });
+    return ConcreteStore;
+}
+
+class StatoDevToolsComponent {
+    unsub;
+    // State UI
+    isOpen = signal(false);
+    isMinimized = signal(false);
+    activeTab = signal('actions');
+    logs = signal([]);
+    selectedLog = signal(null);
+    // Position et taille
+    posX = signal(24);
+    posY = signal(window.innerHeight - 500);
+    panelWidth = signal(420);
+    panelHeight = signal(460);
+    // Drag state
+    isDragging = false;
+    isResizing = false;
+    dragOffsetX = 0;
+    dragOffsetY = 0;
+    startW = 0;
+    startH = 0;
+    startX = 0;
+    startY = 0;
+    // Bound listeners
+    boundMouseMove = this.onMouseMove.bind(this);
+    boundMouseUp = this.onMouseUp.bind(this);
+    ngOnInit() {
+        this.unsub = devTools.subscribe((state) => {
+            this.logs.set(state.logs);
+            this.isOpen.set(state.isOpen);
+        });
+        document.addEventListener('mousemove', this.boundMouseMove);
+        document.addEventListener('mouseup', this.boundMouseUp);
+    }
+    ngOnDestroy() {
+        this.unsub?.();
+        document.removeEventListener('mousemove', this.boundMouseMove);
+        document.removeEventListener('mouseup', this.boundMouseUp);
+    }
+    // ── Toggle ─────────────────────────────────────────
+    toggle() { devTools.toggle(); }
+    toggleMinimize() { this.isMinimized.update(v => !v); }
+    clear() { devTools.clear(); this.selectedLog.set(null); }
+    selectLog(log) {
+        this.selectedLog.set(this.selectedLog()?.id === log.id ? null : log);
+    }
+    formatTime(iso) {
+        return new Date(iso).toTimeString().slice(0, 8);
+    }
+    // ── Drag ───────────────────────────────────────────
+    onDragStart(e) {
+        if (e.target.classList.contains('btn-icon'))
+            return;
+        this.isDragging = true;
+        this.dragOffsetX = e.clientX - this.posX();
+        this.dragOffsetY = e.clientY - this.posY();
+        e.preventDefault();
+    }
+    // ── Resize ─────────────────────────────────────────
+    onResizeStart(e) {
+        this.isResizing = true;
+        this.startW = this.panelWidth();
+        this.startH = this.panelHeight();
+        this.startX = e.clientX;
+        this.startY = e.clientY;
+        e.preventDefault();
+        e.stopPropagation();
+    }
+    // ── Mouse Move ─────────────────────────────────────
+    onMouseMove(e) {
+        if (this.isDragging) {
+            this.posX.set(Math.max(0, e.clientX - this.dragOffsetX));
+            this.posY.set(Math.max(0, e.clientY - this.dragOffsetY));
+        }
+        if (this.isResizing) {
+            const newW = Math.max(300, this.startW + e.clientX - this.startX);
+            const newH = Math.max(200, this.startH + e.clientY - this.startY);
+            this.panelWidth.set(newW);
+            this.panelHeight.set(newH);
+        }
+    }
+    // ── Mouse Up ───────────────────────────────────────
+    onMouseUp() {
+        this.isDragging = false;
+        this.isResizing = false;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: StatoDevToolsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: StatoDevToolsComponent, isStandalone: true, selector: "ngstato-devtools", ngImport: i0, template: `
+    <!-- Bouton flottant -->
+    @if (!isOpen()) {
+      <button class="devtools-fab" (click)="toggle()">
+        🛠 Stato
+      </button>
+    }
+
+    <!-- Panel -->
+    @if (isOpen()) {
+      <div
+        class="devtools-panel"
+        [class.devtools-panel--minimized]="isMinimized()"
+        [style.left.px]="posX()"
+        [style.top.px]="posY()"
+        [style.width.px]="isMinimized() ? 200 : panelWidth()"
+        [style.height]="isMinimized() ? 'auto' : panelHeight() + 'px'"
+      >
+
+        <!-- Header — draggable -->
+        <div
+          class="devtools-header"
+          (mousedown)="onDragStart($event)"
+        >
+          <span class="devtools-title">🛠 Stato</span>
+          <div class="devtools-header-actions">
+            @if (!isMinimized()) {
+              <button class="btn-icon" (click)="clear()" title="Vider">🗑</button>
+            }
+            <button class="btn-icon" (click)="toggleMinimize()" title="Minimiser/Agrandir">
+              {{ isMinimized() ? '▲' : '▼' }}
+            </button>
+            <button class="btn-icon" (click)="toggle()" title="Fermer">✕</button>
+          </div>
+        </div>
+
+        <!-- Resize handle — coin bas droite -->
+        @if (!isMinimized()) {
+          <div
+            class="devtools-resize"
+            (mousedown)="onResizeStart($event)"
+          >⊿</div>
+        }
+
+        @if (!isMinimized()) {
+
+          <!-- Tabs -->
+          <div class="devtools-tabs">
+            <button
+              class="tab"
+              [class.tab--active]="activeTab() === 'actions'"
+              (click)="activeTab.set('actions')"
+            >
+              Actions ({{ logs().length }})
+            </button>
+            <button
+              class="tab"
+              [class.tab--active]="activeTab() === 'state'"
+              (click)="activeTab.set('state')"
+            >
+              State
+            </button>
+          </div>
+
+          <!-- Tab Actions -->
+          @if (activeTab() === 'actions') {
+            <div class="devtools-content">
+              @if (!logs().length) {
+                <div class="devtools-empty">Aucune action pour l'instant</div>
+              }
+              @for (log of logs(); track log.id) {
+                <div
+                  class="log-item"
+                  [class.log-item--error]="log.status === 'error'"
+                  (click)="selectLog(log)"
+                >
+                  <div class="log-item__left">
+                    <span class="log-status">{{ log.status === 'success' ? '✓' : '✗' }}</span>
+                    <span class="log-name">{{ log.name }}</span>
+                  </div>
+                  <div class="log-item__right">
+                    @if (log.status === 'error') {
+                      <span class="log-error-badge">erreur</span>
+                    } @else {
+                      <span class="log-duration">{{ log.duration }}ms</span>
+                    }
+                    <span class="log-time">{{ formatTime(log.at) }}</span>
+                  </div>
+                </div>
+
+                @if (selectedLog()?.id === log.id) {
+                  <div class="log-detail">
+                    @if (log.error) {
+                      <div class="log-detail__error">{{ log.error }}</div>
+                    }
+                    <div class="log-detail__section">
+                      <span class="log-detail__label">Avant</span>
+                      <pre>{{ log.prevState | json }}</pre>
+                    </div>
+                    <div class="log-detail__section">
+                      <span class="log-detail__label">Après</span>
+                      <pre>{{ log.nextState | json }}</pre>
+                    </div>
+                  </div>
+                }
+              }
+            </div>
+          }
+
+          <!-- Tab State -->
+          @if (activeTab() === 'state') {
+            <div class="devtools-content">
+              @if (logs().length) {
+                <pre class="state-view">{{ logs()[0].nextState | json }}</pre>
+              } @else {
+                <div class="devtools-empty">Aucun state disponible</div>
+              }
+            </div>
+          }
+        }
+
+      </div>
+    }
+  `, isInline: true, styles: [".devtools-fab{position:fixed;bottom:1.5rem;left:1.5rem;background:#1e293b;color:#fff;border:none;border-radius:999px;padding:.5rem 1rem;font-size:.85rem;font-weight:600;cursor:pointer;z-index:9999;box-shadow:0 4px 12px #0000004d;transition:background .15s}.devtools-fab:hover{background:#334155}.devtools-panel{position:fixed;background:#0f172a;border-radius:12px;box-shadow:0 8px 32px #0006;z-index:9999;display:flex;flex-direction:column;overflow:hidden;font-family:Courier New,monospace;min-width:200px;min-height:40px}.devtools-panel--minimized{border-radius:8px}.devtools-header{display:flex;justify-content:space-between;align-items:center;padding:.6rem .75rem;background:#1e293b;border-bottom:1px solid #334155;cursor:grab;-webkit-user-select:none;user-select:none}.devtools-header:active{cursor:grabbing}.devtools-title{color:#e2e8f0;font-size:.82rem;font-weight:600;font-family:system-ui}.devtools-header-actions{display:flex;gap:.25rem}.btn-icon{background:transparent;color:#64748b;border:none;cursor:pointer;font-size:.8rem;padding:.15rem .35rem;border-radius:4px;line-height:1}.btn-icon:hover{background:#334155;color:#fff}.devtools-resize{position:absolute;bottom:2px;right:4px;color:#334155;font-size:.9rem;cursor:nwse-resize;-webkit-user-select:none;user-select:none;line-height:1}.devtools-resize:hover{color:#64748b}.devtools-tabs{display:flex;background:#1e293b;border-bottom:1px solid #334155}.tab{padding:.4rem .75rem;background:transparent;color:#64748b;border:none;cursor:pointer;font-size:.78rem;font-family:system-ui}.tab:hover{color:#e2e8f0}.tab--active{color:#3b82f6;border-bottom:2px solid #3b82f6}.devtools-content{overflow-y:auto;flex:1;padding:.25rem 0}.devtools-empty{padding:2rem;text-align:center;color:#475569;font-size:.78rem;font-family:system-ui}.log-item{display:flex;justify-content:space-between;align-items:center;padding:.35rem .75rem;cursor:pointer;border-bottom:1px solid #1e293b}.log-item:hover{background:#1e293b}.log-item--error{background:#1a0a0a}.log-item__left{display:flex;align-items:center;gap:.4rem;overflow:hidden}.log-item__right{display:flex;align-items:center;gap:.4rem;flex-shrink:0}.log-status{font-size:.72rem;color:#22c55e;flex-shrink:0}.log-item--error .log-status{color:#ef4444}.log-name{color:#e2e8f0;font-size:.75rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.log-duration{color:#64748b;font-size:.7rem}.log-time{color:#475569;font-size:.68rem}.log-error-badge{background:#7f1d1d;color:#fca5a5;font-size:.68rem;padding:.1rem .35rem;border-radius:4px}.log-detail{background:#0a0f1a;padding:.6rem .75rem;border-left:3px solid #3b82f6;margin:0 .4rem .4rem;border-radius:0 4px 4px 0}.log-detail__error{color:#fca5a5;font-size:.72rem;margin-bottom:.4rem}.log-detail__section{margin-bottom:.4rem}.log-detail__label{color:#64748b;font-size:.68rem;display:block;margin-bottom:.2rem;font-family:system-ui}pre{color:#86efac;font-size:.7rem;margin:0;white-space:pre-wrap;word-break:break-all;max-height:140px;overflow-y:auto}.state-view{color:#86efac;font-size:.7rem;padding:.75rem;margin:0;white-space:pre-wrap;word-break:break-all}\n"], dependencies: [{ kind: "pipe", type: JsonPipe, name: "json" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: StatoDevToolsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ngstato-devtools', standalone: true, imports: [JsonPipe], template: `
+    <!-- Bouton flottant -->
+    @if (!isOpen()) {
+      <button class="devtools-fab" (click)="toggle()">
+        🛠 Stato
+      </button>
+    }
+
+    <!-- Panel -->
+    @if (isOpen()) {
+      <div
+        class="devtools-panel"
+        [class.devtools-panel--minimized]="isMinimized()"
+        [style.left.px]="posX()"
+        [style.top.px]="posY()"
+        [style.width.px]="isMinimized() ? 200 : panelWidth()"
+        [style.height]="isMinimized() ? 'auto' : panelHeight() + 'px'"
+      >
+
+        <!-- Header — draggable -->
+        <div
+          class="devtools-header"
+          (mousedown)="onDragStart($event)"
+        >
+          <span class="devtools-title">🛠 Stato</span>
+          <div class="devtools-header-actions">
+            @if (!isMinimized()) {
+              <button class="btn-icon" (click)="clear()" title="Vider">🗑</button>
+            }
+            <button class="btn-icon" (click)="toggleMinimize()" title="Minimiser/Agrandir">
+              {{ isMinimized() ? '▲' : '▼' }}
+            </button>
+            <button class="btn-icon" (click)="toggle()" title="Fermer">✕</button>
+          </div>
+        </div>
+
+        <!-- Resize handle — coin bas droite -->
+        @if (!isMinimized()) {
+          <div
+            class="devtools-resize"
+            (mousedown)="onResizeStart($event)"
+          >⊿</div>
+        }
+
+        @if (!isMinimized()) {
+
+          <!-- Tabs -->
+          <div class="devtools-tabs">
+            <button
+              class="tab"
+              [class.tab--active]="activeTab() === 'actions'"
+              (click)="activeTab.set('actions')"
+            >
+              Actions ({{ logs().length }})
+            </button>
+            <button
+              class="tab"
+              [class.tab--active]="activeTab() === 'state'"
+              (click)="activeTab.set('state')"
+            >
+              State
+            </button>
+          </div>
+
+          <!-- Tab Actions -->
+          @if (activeTab() === 'actions') {
+            <div class="devtools-content">
+              @if (!logs().length) {
+                <div class="devtools-empty">Aucune action pour l'instant</div>
+              }
+              @for (log of logs(); track log.id) {
+                <div
+                  class="log-item"
+                  [class.log-item--error]="log.status === 'error'"
+                  (click)="selectLog(log)"
+                >
+                  <div class="log-item__left">
+                    <span class="log-status">{{ log.status === 'success' ? '✓' : '✗' }}</span>
+                    <span class="log-name">{{ log.name }}</span>
+                  </div>
+                  <div class="log-item__right">
+                    @if (log.status === 'error') {
+                      <span class="log-error-badge">erreur</span>
+                    } @else {
+                      <span class="log-duration">{{ log.duration }}ms</span>
+                    }
+                    <span class="log-time">{{ formatTime(log.at) }}</span>
+                  </div>
+                </div>
+
+                @if (selectedLog()?.id === log.id) {
+                  <div class="log-detail">
+                    @if (log.error) {
+                      <div class="log-detail__error">{{ log.error }}</div>
+                    }
+                    <div class="log-detail__section">
+                      <span class="log-detail__label">Avant</span>
+                      <pre>{{ log.prevState | json }}</pre>
+                    </div>
+                    <div class="log-detail__section">
+                      <span class="log-detail__label">Après</span>
+                      <pre>{{ log.nextState | json }}</pre>
+                    </div>
+                  </div>
+                }
+              }
+            </div>
+          }
+
+          <!-- Tab State -->
+          @if (activeTab() === 'state') {
+            <div class="devtools-content">
+              @if (logs().length) {
+                <pre class="state-view">{{ logs()[0].nextState | json }}</pre>
+              } @else {
+                <div class="devtools-empty">Aucun state disponible</div>
+              }
+            </div>
+          }
+        }
+
+      </div>
+    }
+  `, styles: [".devtools-fab{position:fixed;bottom:1.5rem;left:1.5rem;background:#1e293b;color:#fff;border:none;border-radius:999px;padding:.5rem 1rem;font-size:.85rem;font-weight:600;cursor:pointer;z-index:9999;box-shadow:0 4px 12px #0000004d;transition:background .15s}.devtools-fab:hover{background:#334155}.devtools-panel{position:fixed;background:#0f172a;border-radius:12px;box-shadow:0 8px 32px #0006;z-index:9999;display:flex;flex-direction:column;overflow:hidden;font-family:Courier New,monospace;min-width:200px;min-height:40px}.devtools-panel--minimized{border-radius:8px}.devtools-header{display:flex;justify-content:space-between;align-items:center;padding:.6rem .75rem;background:#1e293b;border-bottom:1px solid #334155;cursor:grab;-webkit-user-select:none;user-select:none}.devtools-header:active{cursor:grabbing}.devtools-title{color:#e2e8f0;font-size:.82rem;font-weight:600;font-family:system-ui}.devtools-header-actions{display:flex;gap:.25rem}.btn-icon{background:transparent;color:#64748b;border:none;cursor:pointer;font-size:.8rem;padding:.15rem .35rem;border-radius:4px;line-height:1}.btn-icon:hover{background:#334155;color:#fff}.devtools-resize{position:absolute;bottom:2px;right:4px;color:#334155;font-size:.9rem;cursor:nwse-resize;-webkit-user-select:none;user-select:none;line-height:1}.devtools-resize:hover{color:#64748b}.devtools-tabs{display:flex;background:#1e293b;border-bottom:1px solid #334155}.tab{padding:.4rem .75rem;background:transparent;color:#64748b;border:none;cursor:pointer;font-size:.78rem;font-family:system-ui}.tab:hover{color:#e2e8f0}.tab--active{color:#3b82f6;border-bottom:2px solid #3b82f6}.devtools-content{overflow-y:auto;flex:1;padding:.25rem 0}.devtools-empty{padding:2rem;text-align:center;color:#475569;font-size:.78rem;font-family:system-ui}.log-item{display:flex;justify-content:space-between;align-items:center;padding:.35rem .75rem;cursor:pointer;border-bottom:1px solid #1e293b}.log-item:hover{background:#1e293b}.log-item--error{background:#1a0a0a}.log-item__left{display:flex;align-items:center;gap:.4rem;overflow:hidden}.log-item__right{display:flex;align-items:center;gap:.4rem;flex-shrink:0}.log-status{font-size:.72rem;color:#22c55e;flex-shrink:0}.log-item--error .log-status{color:#ef4444}.log-name{color:#e2e8f0;font-size:.75rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.log-duration{color:#64748b;font-size:.7rem}.log-time{color:#475569;font-size:.68rem}.log-error-badge{background:#7f1d1d;color:#fca5a5;font-size:.68rem;padding:.1rem .35rem;border-radius:4px}.log-detail{background:#0a0f1a;padding:.6rem .75rem;border-left:3px solid #3b82f6;margin:0 .4rem .4rem;border-radius:0 4px 4px 0}.log-detail__error{color:#fca5a5;font-size:.72rem;margin-bottom:.4rem}.log-detail__section{margin-bottom:.4rem}.log-detail__label{color:#64748b;font-size:.68rem;display:block;margin-bottom:.2rem;font-family:system-ui}pre{color:#86efac;font-size:.7rem;margin:0;white-space:pre-wrap;word-break:break-all;max-height:140px;overflow-y:auto}.state-view{color:#86efac;font-size:.7rem;padding:.75rem;margin:0;white-space:pre-wrap;word-break:break-all}\n"] }]
+        }] });
+
+// ─────────────────────────────────────────────────────
+// @ngstato/angular — API publique
+// ─────────────────────────────────────────────────────
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { StatoDevToolsComponent, createAngularStore, injectStore, provideStato };
+//# sourceMappingURL=ngstato-angular.mjs.map

package/dist/fesm2022/ngstato-angular.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ngstato-angular.mjs","sources":["../../src/inject-store.ts","../../src/provide-ngstato.ts","../../src/create-angular-store.ts","../../src/devtools.component.ts","../../src/index.ts","../../src/ngstato-angular.ts"],"sourcesContent":["// ─────────────────────────────────────────────────────\r\n// @ngstato/angular — injectStore()\r\n// Helper pour injecter un store dans un composant\r\n// ─────────────────────────────────────────────────────\r\n\r\nimport { inject, type Type } from '@angular/core'\r\n\r\nexport function injectStore<T>(store: Type<T>): T {\r\n  return inject(store)\r\n}","import {\r\n  makeEnvironmentProviders,\r\n  InjectionToken,\r\n  isDevMode\r\n}                          from '@angular/core'\r\nimport { configureHttp, devTools } from '@ngstato/core'\r\nimport type { StatoConfig }        from '@ngstato/core'\r\n\r\nexport interface StatoAngularConfig {\r\n  http?:     StatoConfig\r\n  devtools?: boolean\r\n}\r\n\r\nexport const STATO_CONFIG = new InjectionToken<StatoAngularConfig>('STATO_CONFIG')\r\n\r\nexport function provideStato(config: StatoAngularConfig = {}) {\r\n\r\n  if (config.http) {\r\n    configureHttp(config.http)\r\n  }\r\n\r\n  // DevTools — ignorés automatiquement en production\r\n  // isDevMode() est géré par Angular au build\r\n  // → false en prod même si devtools: true\r\n  if (config.devtools && isDevMode()) {\r\n    console.info(\r\n      '%c[Stato] 🛠 DevTools activés',\r\n      'background:#1e40af;color:white;padding:4px 8px;border-radius:4px;font-weight:bold'\r\n    )\r\n    devTools.open()\r\n  }\r\n\r\n  return makeEnvironmentProviders([\r\n    {\r\n      provide:  STATO_CONFIG,\r\n      useValue: config\r\n    }\r\n  ])\r\n}","// ─────────────────────────────────────────────────────\r\n// @ngstato/angular — createAngularStore()\r\n// Transforme un ngstato store en store Angular avec Signals\r\n// ─────────────────────────────────────────────────────\r\n\r\nimport {\r\n  signal,\r\n  computed,\r\n  Injectable,\r\n  OnDestroy,\r\n  Signal\r\n} from '@angular/core'\r\n\r\nimport { createStore } from '@ngstato/core'\r\nimport type { StatoStoreConfig } from '@ngstato/core'\r\n\r\n// ─────────────────────────────────────────────────────\r\n// FONCTION PRINCIPALE — createAngularStore()\r\n// ─────────────────────────────────────────────────────\r\n\r\nexport function createAngularStore<S extends object>(\r\n  config: S & StatoStoreConfig<S>\r\n) {\r\n  // 1. Créer le store core\r\n  const coreStore = createStore(config)\r\n\r\n  // 2. Créer un Signal pour chaque propriété du state\r\n  const signals: Record<string, ReturnType<typeof signal>> = {}\r\n  const initialState = coreStore.getState()\r\n\r\n  for (const key of Object.keys(initialState as object)) {\r\n    signals[key] = signal((initialState as any)[key])\r\n  }\r\n\r\n  // 3. Synchroniser les Signals avec le state core\r\n  coreStore.subscribe((newState: any) => {\r\n    for (const key of Object.keys(newState)) {\r\n      if (signals[key]) {\r\n        signals[key].set(newState[key])\r\n      }\r\n    }\r\n  })\r\n\r\n  // 4. Construire l objet public Angular\r\n  const angularStore: any = {\r\n    __store__: coreStore.__store__\r\n  }\r\n\r\n  // 5. Exposer chaque propriété comme Signal\r\n  for (const key of Object.keys(initialState as object)) {\r\n    Object.defineProperty(angularStore, key, {\r\n      get:          () => signals[key],\r\n      enumerable:   true,\r\n      configurable: true\r\n    })\r\n  }\r\n\r\n  // 6. Exposer chaque computed comme Signal computed\r\n  const { computed: computedConfig } = config as StatoStoreConfig<S>\r\n  if (computedConfig) {\r\n    for (const key of Object.keys(computedConfig)) {\r\n      const computedSignal = computed(() => coreStore[key])\r\n      Object.defineProperty(angularStore, key, {\r\n        get:          () => computedSignal,\r\n        enumerable:   true,\r\n        configurable: true\r\n      })\r\n    }\r\n  }\r\n\r\n  // 7. Exposer chaque action directement\r\n  const { actions } = config as StatoStoreConfig<S>\r\n  if (actions) {\r\n    for (const name of Object.keys(actions)) {\r\n      angularStore[name] = (...args: unknown[]) =>\r\n        coreStore.__store__.dispatch(name, ...args)\r\n    }\r\n  }\r\n\r\n  // 8. Appeler onInit si défini\r\n  const { hooks } = config as StatoStoreConfig<S>\r\n  if (hooks?.onInit) {\r\n    hooks.onInit(angularStore)\r\n  }\r\n\r\n  // 9. Exposer destroy pour le cleanup\r\n  angularStore.__destroy__ = () => {\r\n    coreStore.__store__.destroy(angularStore)\r\n  }\r\n\r\n  return angularStore\r\n}\r\n\r\n// ─────────────────────────────────────────────────────\r\n// CLASSE DE BASE — étendue par StatoStore()\r\n// Publique — pas de membres privés\r\n// ─────────────────────────────────────────────────────\r\n@Injectable()\r\nexport class StatoStoreBase implements OnDestroy {\r\n  storeInstance: any\r\n\r\n  initStore<S extends object>(config: S & StatoStoreConfig<S>) {\r\n    this.storeInstance = createAngularStore(config)\r\n\r\n    // Copier toutes les propriétés sur this\r\n    for (const key of Object.keys(this.storeInstance)) {\r\n      if (key !== '__store__' && key !== '__destroy__') {\r\n        Object.defineProperty(this, key, {\r\n          get:          () => this.storeInstance[key],\r\n          enumerable:   true,\r\n          configurable: true\r\n        })\r\n      }\r\n    }\r\n\r\n    // Copier les actions\r\n    const { actions } = config as StatoStoreConfig<S>\r\n    if (actions) {\r\n    for (const name of Object.keys(actions)) {\r\n        Object.defineProperty(this, name, {\r\n        get:          () => this.storeInstance[name],\r\n        enumerable:   true,\r\n        configurable: true\r\n        })\r\n    }\r\n    }\r\n  }\r\n\r\n  ngOnDestroy() {\r\n    this.storeInstance?.__destroy__()\r\n  }\r\n}\r\n\r\n// ─────────────────────────────────────────────────────\r\n// FACTORY — StatoStore()\r\n// Crée un service Angular injectable\r\n// Usage :\r\n//   export class UserStore extends StatoStore({\r\n//     user: null,\r\n//     actions: { ... }\r\n//   }) {}\r\n// ─────────────────────────────────────────────────────\r\n\r\nexport function StatoStore<S extends object>(\r\n  config: S & StatoStoreConfig<S>\r\n) {\r\n  @Injectable({ providedIn: 'root' })\r\n  class ConcreteStore extends StatoStoreBase {\r\n    constructor() {\r\n      super()\r\n      this.initStore(config)\r\n    }\r\n  }\r\n\r\n  return ConcreteStore\r\n}","import {\n  Component,\n  OnInit,\n  OnDestroy,\n  signal\n}                        from '@angular/core'\nimport { devTools }      from '@ngstato/core'\nimport type { ActionLog } from '@ngstato/core'\nimport { JsonPipe } from '@angular/common'\n\n@Component({\n  selector:   'ngstato-devtools',\n  standalone: true,\n  imports:    [JsonPipe],\n  template: `\n    <!-- Bouton flottant -->\n    @if (!isOpen()) {\n      <button class=\"devtools-fab\" (click)=\"toggle()\">\n        🛠 Stato\n      </button>\n    }\n\n    <!-- Panel -->\n    @if (isOpen()) {\n      <div\n        class=\"devtools-panel\"\n        [class.devtools-panel--minimized]=\"isMinimized()\"\n        [style.left.px]=\"posX()\"\n        [style.top.px]=\"posY()\"\n        [style.width.px]=\"isMinimized() ? 200 : panelWidth()\"\n        [style.height]=\"isMinimized() ? 'auto' : panelHeight() + 'px'\"\n      >\n\n        <!-- Header — draggable -->\n        <div\n          class=\"devtools-header\"\n          (mousedown)=\"onDragStart($event)\"\n        >\n          <span class=\"devtools-title\">🛠 Stato</span>\n          <div class=\"devtools-header-actions\">\n            @if (!isMinimized()) {\n              <button class=\"btn-icon\" (click)=\"clear()\" title=\"Vider\">🗑</button>\n            }\n            <button class=\"btn-icon\" (click)=\"toggleMinimize()\" title=\"Minimiser/Agrandir\">\n              {{ isMinimized() ? '▲' : '▼' }}\n            </button>\n            <button class=\"btn-icon\" (click)=\"toggle()\" title=\"Fermer\">✕</button>\n          </div>\n        </div>\n\n        <!-- Resize handle — coin bas droite -->\n        @if (!isMinimized()) {\n          <div\n            class=\"devtools-resize\"\n            (mousedown)=\"onResizeStart($event)\"\n          >⊿</div>\n        }\n\n        @if (!isMinimized()) {\n\n          <!-- Tabs -->\n          <div class=\"devtools-tabs\">\n            <button\n              class=\"tab\"\n              [class.tab--active]=\"activeTab() === 'actions'\"\n              (click)=\"activeTab.set('actions')\"\n            >\n              Actions ({{ logs().length }})\n            </button>\n            <button\n              class=\"tab\"\n              [class.tab--active]=\"activeTab() === 'state'\"\n              (click)=\"activeTab.set('state')\"\n            >\n              State\n            </button>\n          </div>\n\n          <!-- Tab Actions -->\n          @if (activeTab() === 'actions') {\n            <div class=\"devtools-content\">\n              @if (!logs().length) {\n                <div class=\"devtools-empty\">Aucune action pour l'instant</div>\n              }\n              @for (log of logs(); track log.id) {\n                <div\n                  class=\"log-item\"\n                  [class.log-item--error]=\"log.status === 'error'\"\n                  (click)=\"selectLog(log)\"\n                >\n                  <div class=\"log-item__left\">\n                    <span class=\"log-status\">{{ log.status === 'success' ? '✓' : '✗' }}</span>\n                    <span class=\"log-name\">{{ log.name }}</span>\n                  </div>\n                  <div class=\"log-item__right\">\n                    @if (log.status === 'error') {\n                      <span class=\"log-error-badge\">erreur</span>\n                    } @else {\n                      <span class=\"log-duration\">{{ log.duration }}ms</span>\n                    }\n                    <span class=\"log-time\">{{ formatTime(log.at) }}</span>\n                  </div>\n                </div>\n\n                @if (selectedLog()?.id === log.id) {\n                  <div class=\"log-detail\">\n                    @if (log.error) {\n                      <div class=\"log-detail__error\">{{ log.error }}</div>\n                    }\n                    <div class=\"log-detail__section\">\n                      <span class=\"log-detail__label\">Avant</span>\n                      <pre>{{ log.prevState | json }}</pre>\n                    </div>\n                    <div class=\"log-detail__section\">\n                      <span class=\"log-detail__label\">Après</span>\n                      <pre>{{ log.nextState | json }}</pre>\n                    </div>\n                  </div>\n                }\n              }\n            </div>\n          }\n\n          <!-- Tab State -->\n          @if (activeTab() === 'state') {\n            <div class=\"devtools-content\">\n              @if (logs().length) {\n                <pre class=\"state-view\">{{ logs()[0].nextState | json }}</pre>\n              } @else {\n                <div class=\"devtools-empty\">Aucun state disponible</div>\n              }\n            </div>\n          }\n        }\n\n      </div>\n    }\n  `,\n  styles: [`\n    .devtools-fab {\n      position:      fixed;\n      bottom:        1.5rem;\n      left:          1.5rem;\n      background:    #1e293b;\n      color:         white;\n      border:        none;\n      border-radius: 999px;\n      padding:       0.5rem 1rem;\n      font-size:     0.85rem;\n      font-weight:   600;\n      cursor:        pointer;\n      z-index:       9999;\n      box-shadow:    0 4px 12px rgba(0,0,0,0.3);\n      transition:    background 0.15s;\n    }\n    .devtools-fab:hover { background: #334155; }\n\n    .devtools-panel {\n      position:       fixed;\n      background:     #0f172a;\n      border-radius:  12px;\n      box-shadow:     0 8px 32px rgba(0,0,0,0.4);\n      z-index:        9999;\n      display:        flex;\n      flex-direction: column;\n      overflow:       hidden;\n      font-family:    'Courier New', monospace;\n      min-width:      200px;\n      min-height:     40px;\n    }\n\n    .devtools-panel--minimized {\n      border-radius: 8px;\n    }\n\n    .devtools-header {\n      display:         flex;\n      justify-content: space-between;\n      align-items:     center;\n      padding:         0.6rem 0.75rem;\n      background:      #1e293b;\n      border-bottom:   1px solid #334155;\n      cursor:          grab;\n      user-select:     none;\n    }\n    .devtools-header:active { cursor: grabbing; }\n\n    .devtools-title {\n      color:       #e2e8f0;\n      font-size:   0.82rem;\n      font-weight: 600;\n      font-family: system-ui;\n    }\n\n    .devtools-header-actions { display: flex; gap: 0.25rem; }\n\n    .btn-icon {\n      background:    transparent;\n      color:         #64748b;\n      border:        none;\n      cursor:        pointer;\n      font-size:     0.8rem;\n      padding:       0.15rem 0.35rem;\n      border-radius: 4px;\n      line-height:   1;\n    }\n    .btn-icon:hover { background: #334155; color: white; }\n\n    .devtools-resize {\n      position:  absolute;\n      bottom:    2px;\n      right:     4px;\n      color:     #334155;\n      font-size: 0.9rem;\n      cursor:    nwse-resize;\n      user-select: none;\n      line-height: 1;\n    }\n    .devtools-resize:hover { color: #64748b; }\n\n    .devtools-tabs {\n      display:       flex;\n      background:    #1e293b;\n      border-bottom: 1px solid #334155;\n    }\n    .tab {\n      padding:     0.4rem 0.75rem;\n      background:  transparent;\n      color:       #64748b;\n      border:      none;\n      cursor:      pointer;\n      font-size:   0.78rem;\n      font-family: system-ui;\n    }\n    .tab:hover    { color: #e2e8f0; }\n    .tab--active  { color: #3b82f6; border-bottom: 2px solid #3b82f6; }\n\n    .devtools-content {\n      overflow-y: auto;\n      flex:       1;\n      padding:    0.25rem 0;\n    }\n\n    .devtools-empty {\n      padding:     2rem;\n      text-align:  center;\n      color:       #475569;\n      font-size:   0.78rem;\n      font-family: system-ui;\n    }\n\n    .log-item {\n      display:         flex;\n      justify-content: space-between;\n      align-items:     center;\n      padding:         0.35rem 0.75rem;\n      cursor:          pointer;\n      border-bottom:   1px solid #1e293b;\n    }\n    .log-item:hover        { background: #1e293b; }\n    .log-item--error       { background: #1a0a0a; }\n\n    .log-item__left  { display: flex; align-items: center; gap: 0.4rem; overflow: hidden; }\n    .log-item__right { display: flex; align-items: center; gap: 0.4rem; flex-shrink: 0; }\n\n    .log-status  { font-size: 0.72rem; color: #22c55e; flex-shrink: 0; }\n    .log-item--error .log-status { color: #ef4444; }\n    .log-name    { color: #e2e8f0; font-size: 0.75rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n    .log-duration { color: #64748b; font-size: 0.7rem; }\n    .log-time    { color: #475569; font-size: 0.68rem; }\n\n    .log-error-badge {\n      background:    #7f1d1d;\n      color:         #fca5a5;\n      font-size:     0.68rem;\n      padding:       0.1rem 0.35rem;\n      border-radius: 4px;\n    }\n\n    .log-detail {\n      background:    #0a0f1a;\n      padding:       0.6rem 0.75rem;\n      border-left:   3px solid #3b82f6;\n      margin:        0 0.4rem 0.4rem;\n      border-radius: 0 4px 4px 0;\n    }\n    .log-detail__error   { color: #fca5a5; font-size: 0.72rem; margin-bottom: 0.4rem; }\n    .log-detail__section { margin-bottom: 0.4rem; }\n    .log-detail__label   {\n      color:         #64748b;\n      font-size:     0.68rem;\n      display:       block;\n      margin-bottom: 0.2rem;\n      font-family:   system-ui;\n    }\n    pre {\n      color:       #86efac;\n      font-size:   0.7rem;\n      margin:      0;\n      white-space: pre-wrap;\n      word-break:  break-all;\n      max-height:  140px;\n      overflow-y:  auto;\n    }\n    .state-view {\n      color:       #86efac;\n      font-size:   0.7rem;\n      padding:     0.75rem;\n      margin:      0;\n      white-space: pre-wrap;\n      word-break:  break-all;\n    }\n  `]\n})\nexport class StatoDevToolsComponent implements OnInit, OnDestroy {\n\n  private unsub?: () => void\n\n  // State UI\n  isOpen      = signal(false)\n  isMinimized = signal(false)\n  activeTab   = signal<'actions' | 'state'>('actions')\n  logs        = signal<ActionLog[]>([])\n  selectedLog = signal<ActionLog | null>(null)\n\n  // Position et taille\n  posX        = signal(24)\n  posY        = signal(window.innerHeight - 500)\n  panelWidth  = signal(420)\n  panelHeight = signal(460)\n\n  // Drag state\n  private isDragging  = false\n  private isResizing  = false\n  private dragOffsetX = 0\n  private dragOffsetY = 0\n  private startW      = 0\n  private startH      = 0\n  private startX      = 0\n  private startY      = 0\n\n  // Bound listeners\n  private boundMouseMove = this.onMouseMove.bind(this)\n  private boundMouseUp   = this.onMouseUp.bind(this)\n\n  ngOnInit() {\n    this.unsub = devTools.subscribe((state) => {\n      this.logs.set(state.logs)\n      this.isOpen.set(state.isOpen)\n    })\n\n    document.addEventListener('mousemove', this.boundMouseMove)\n    document.addEventListener('mouseup',   this.boundMouseUp)\n  }\n\n  ngOnDestroy() {\n    this.unsub?.()\n    document.removeEventListener('mousemove', this.boundMouseMove)\n    document.removeEventListener('mouseup',   this.boundMouseUp)\n  }\n\n  // ── Toggle ─────────────────────────────────────────\n  toggle()         { devTools.toggle() }\n  toggleMinimize() { this.isMinimized.update(v => !v) }\n  clear()          { devTools.clear(); this.selectedLog.set(null) }\n  selectLog(log: ActionLog) {\n    this.selectedLog.set(this.selectedLog()?.id === log.id ? null : log)\n  }\n  formatTime(iso: string): string {\n    return new Date(iso).toTimeString().slice(0, 8)\n  }\n\n  // ── Drag ───────────────────────────────────────────\n  onDragStart(e: MouseEvent) {\n    if ((e.target as HTMLElement).classList.contains('btn-icon')) return\n    this.isDragging  = true\n    this.dragOffsetX = e.clientX - this.posX()\n    this.dragOffsetY = e.clientY - this.posY()\n    e.preventDefault()\n  }\n\n  // ── Resize ─────────────────────────────────────────\n  onResizeStart(e: MouseEvent) {\n    this.isResizing = true\n    this.startW     = this.panelWidth()\n    this.startH     = this.panelHeight()\n    this.startX     = e.clientX\n    this.startY     = e.clientY\n    e.preventDefault()\n    e.stopPropagation()\n  }\n\n  // ── Mouse Move ─────────────────────────────────────\n  onMouseMove(e: MouseEvent) {\n    if (this.isDragging) {\n      this.posX.set(Math.max(0, e.clientX - this.dragOffsetX))\n      this.posY.set(Math.max(0, e.clientY - this.dragOffsetY))\n    }\n    if (this.isResizing) {\n      const newW = Math.max(300, this.startW + e.clientX - this.startX)\n      const newH = Math.max(200, this.startH + e.clientY - this.startY)\n      this.panelWidth.set(newW)\n      this.panelHeight.set(newH)\n    }\n  }\n\n  // ── Mouse Up ───────────────────────────────────────\n  onMouseUp() {\n    this.isDragging = false\n    this.isResizing = false\n  }\n}","// ─────────────────────────────────────────────────────\r\n// @ngstato/angular — API publique\r\n// ─────────────────────────────────────────────────────\r\n\r\nexport { injectStore }                    from './inject-store'\r\nexport { provideStato }                   from './provide-ngstato'\r\nexport { createAngularStore}             from './create-angular-store'\r\nexport type { StatoAngularConfig }        from './provide-ngstato'\r\nexport { StatoDevToolsComponent } from './devtools.component'","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

package/dist/index.d.ts

@@ -1,50 +1,5 @@
-import * as _angular_core from '@angular/core';
-import { Type, OnInit, OnDestroy } from '@angular/core';
-import { StatoConfig, StatoStoreConfig, ActionLog } from '@ngstato/core';
-
-declare function injectStore<T>(store: Type<T>): T;
-
-interface StatoAngularConfig {
-    http?: StatoConfig;
-    devtools?: boolean;
-}
-declare function provideStato(config?: StatoAngularConfig): _angular_core.EnvironmentProviders;
-
-declare function createAngularStore<S extends object>(config: S & StatoStoreConfig<S>): any;
-
-declare class StatoDevToolsComponent implements OnInit, OnDestroy {
-    private config;
-    private unsub?;
-    isOpen: _angular_core.WritableSignal<boolean>;
-    isMinimized: _angular_core.WritableSignal<boolean>;
-    activeTab: _angular_core.WritableSignal<"actions" | "state">;
-    logs: _angular_core.WritableSignal<ActionLog[]>;
-    selectedLog: _angular_core.WritableSignal<ActionLog | null>;
-    posX: _angular_core.WritableSignal<number>;
-    posY: _angular_core.WritableSignal<number>;
-    panelWidth: _angular_core.WritableSignal<number>;
-    panelHeight: _angular_core.WritableSignal<number>;
-    private isDragging;
-    private isResizing;
-    private dragOffsetX;
-    private dragOffsetY;
-    private startW;
-    private startH;
-    private startX;
-    private startY;
-    private boundMouseMove;
-    private boundMouseUp;
-    ngOnInit(): void;
-    ngOnDestroy(): void;
-    toggle(): void;
-    toggleMinimize(): void;
-    clear(): void;
-    selectLog(log: ActionLog): void;
-    formatTime(iso: string): string;
-    onDragStart(e: MouseEvent): void;
-    onResizeStart(e: MouseEvent): void;
-    onMouseMove(e: MouseEvent): void;
-    onMouseUp(): void;
-}
-
-export { type StatoAngularConfig, StatoDevToolsComponent, createAngularStore, injectStore, provideStato };
+export { injectStore } from './inject-store';
+export { provideStato } from './provide-ngstato';
+export { createAngularStore } from './create-angular-store';
+export type { StatoAngularConfig } from './provide-ngstato';
+export { StatoDevToolsComponent } from './devtools.component';

package/dist/inject-store.d.ts

@@ -0,0 +1,2 @@
+import { type Type } from '@angular/core';
+export declare function injectStore<T>(store: Type<T>): T;

package/dist/provide-ngstato.d.ts

@@ -0,0 +1,8 @@
+import { InjectionToken } from '@angular/core';
+import type { StatoConfig } from '@ngstato/core';
+export interface StatoAngularConfig {
+    http?: StatoConfig;
+    devtools?: boolean;
+}
+export declare const STATO_CONFIG: InjectionToken<StatoAngularConfig>;
+export declare function provideStato(config?: StatoAngularConfig): import("@angular/core").EnvironmentProviders;