@ngstato/angular 0.4.0 → 0.4.2

package/dist/fesm2022/ngstato-angular.mjs

@@ -1,7 +1,7 @@
 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';
+import { JsonPipe, KeyValuePipe } from '@angular/common';
 
 // ─────────────────────────────────────────────────────
 // @ngstato/angular — injectStore()
@@ -39,8 +39,10 @@ function provideStato(config = {}) {
 // FONCTION PRINCIPALE — createAngularStore()
 // ─────────────────────────────────────────────────────
 function createAngularStore(config) {
-    // 1. Créer le store core
-    const coreStore = createStore(config);
+    // 1. Créer le store core — SANS l'initialiser
+    // L'init sera fait après que l'angularStore soit prêt,
+    // pour que les effects reçoivent la bonne référence dès le 1er run.
+    const coreStore = createStore(config, { skipInit: true });
     // 2. Créer un Signal pour chaque propriété du state
     const signals = {};
     const initialState = coreStore.getState();
@@ -68,10 +70,22 @@ function createAngularStore(config) {
         });
     }
     // 6. Exposer chaque computed comme Signal computed
-    const { computed: computedConfig } = config;
+    // On force la lecture des signals Angular pour que le computed()
+    // soit réactif via le système de change detection d'Angular.
+    const { computed: computedConfig, selectors: selectorsConfig } = config;
     if (computedConfig) {
         for (const key of Object.keys(computedConfig)) {
-            const computedSignal = computed(() => coreStore[key]);
+            const fn = computedConfig[key];
+            if (typeof fn !== 'function')
+                continue;
+            const computedSignal = computed(() => {
+                // Lire les signals Angular pour déclencher le tracking
+                const snapshot = {};
+                for (const stateKey of Object.keys(signals)) {
+                    snapshot[stateKey] = signals[stateKey]();
+                }
+                return fn(snapshot);
+            });
             Object.defineProperty(angularStore, key, {
                 get: () => computedSignal,
                 enumerable: true,
@@ -79,6 +93,26 @@ function createAngularStore(config) {
             });
         }
     }
+    // 6b. Exposer chaque selector memoïzé comme Signal computed
+    if (selectorsConfig) {
+        for (const key of Object.keys(selectorsConfig)) {
+            const fn = selectorsConfig[key];
+            if (typeof fn !== 'function')
+                continue;
+            const selectorSignal = computed(() => {
+                const snapshot = {};
+                for (const stateKey of Object.keys(signals)) {
+                    snapshot[stateKey] = signals[stateKey]();
+                }
+                return fn(snapshot);
+            });
+            Object.defineProperty(angularStore, key, {
+                get: () => selectorSignal,
+                enumerable: true,
+                configurable: true
+            });
+        }
+    }
     // 7. Exposer chaque action directement
     const { actions } = config;
     if (actions) {
@@ -86,13 +120,15 @@ function createAngularStore(config) {
             angularStore[name] = (...args) => coreStore.__store__.dispatch(name, ...args);
         }
     }
-    // 8. Unifier le lifecycle avec @ngstato/core
-    // (init est idempotent: onInit ne sera appelé qu'une fois)
-    coreStore.__store__.init(angularStore);
-    // 9. Exposer destroy pour le cleanup
+    // 8. Exposer destroy pour le cleanup
     angularStore.__destroy__ = () => {
         coreStore.__store__.destroy(angularStore);
     };
+    // 9. Initialiser le store UNE SEULE FOIS avec l'angularStore
+    // C'est ici que onInit() est appelé et que les effects démarrent,
+    // directement avec la bonne référence (angularStore avec Signals).
+    // Aucun double _runEffects — un seul init, un seul run.
+    coreStore.__store__.init(angularStore);
     return angularStore;
 }
 // ─────────────────────────────────────────────────────
@@ -245,11 +281,36 @@ class StatoDevToolsComponent {
     activeTab = signal('actions');
     logs = signal([]);
     selectedLog = signal(null);
-    // Position et taille
+    activeLogId = signal(null);
+    isTimeTraveling = signal(false);
+    // Snapshot global — latest known state per store
+    globalState = computed(() => {
+        const seen = new Map();
+        for (const log of this.logs()) {
+            if (!seen.has(log.storeName)) {
+                seen.set(log.storeName, log.nextState);
+            }
+        }
+        return seen;
+    });
+    // Time-travel computed
+    canUndo = computed(() => this.logs().length > 0);
+    canRedo = computed(() => {
+        if (!this.isTimeTraveling())
+            return false;
+        const id = this.activeLogId();
+        if (id === null)
+            return false;
+        if (id === -1)
+            return this.logs().length > 0;
+        const idx = this.logs().findIndex(l => l.id === id);
+        return idx > 0; // can go forward (lower index = newer)
+    });
+    // Position & size
     posX = signal(24);
-    posY = signal(window.innerHeight - 500);
-    panelWidth = signal(420);
-    panelHeight = signal(460);
+    posY = signal(window.innerHeight - 520);
+    panelWidth = signal(440);
+    panelHeight = signal(480);
     // Drag state
     isDragging = false;
     isResizing = false;
@@ -266,6 +327,8 @@ class StatoDevToolsComponent {
         this.unsub = devTools.subscribe((state) => {
             this.logs.set(state.logs);
             this.isOpen.set(state.isOpen);
+            this.activeLogId.set(state.activeLogId);
+            this.isTimeTraveling.set(state.isTimeTraveling);
         });
         document.addEventListener('mousemove', this.boundMouseMove);
         document.addEventListener('mouseup', this.boundMouseUp);
@@ -285,6 +348,65 @@ class StatoDevToolsComponent {
     formatTime(iso) {
         return new Date(iso).toTimeString().slice(0, 8);
     }
+    // ── Time-travel actions ────────────────────────────
+    onTravelTo(log) {
+        // Toggle detail view
+        this.selectLog(log);
+        // Jump to this action's state
+        devTools.travelTo(log.id);
+    }
+    onUndo() { devTools.undo(); }
+    onRedo() { devTools.redo(); }
+    onResume() { devTools.resume(); }
+    onReplay(log, event) {
+        event.stopPropagation();
+        devTools.replay(log.id);
+    }
+    isFutureLog(log) {
+        if (!this.isTimeTraveling())
+            return false;
+        const activeId = this.activeLogId();
+        if (activeId === null)
+            return false;
+        if (activeId === -1)
+            return true; // all logs are "future"
+        const activeIdx = this.logs().findIndex(l => l.id === activeId);
+        const logIdx = this.logs().findIndex(l => l.id === log.id);
+        return logIdx < activeIdx; // newer logs (lower index) are "future"
+    }
+    // ── Export/Import ──────────────────────────────────
+    onExport() {
+        const snapshot = devTools.exportSnapshot();
+        const json = JSON.stringify(snapshot, null, 2);
+        const blob = new Blob([json], { type: 'application/json' });
+        const url = URL.createObjectURL(blob);
+        const a = document.createElement('a');
+        a.href = url;
+        a.download = `ngstato-snapshot-${new Date().toISOString().slice(0, 19).replace(/:/g, '-')}.json`;
+        a.click();
+        URL.revokeObjectURL(url);
+    }
+    onImport() {
+        const input = document.querySelector('input[type="file"]');
+        input?.click();
+    }
+    onFileSelected(event) {
+        const file = event.target.files?.[0];
+        if (!file)
+            return;
+        const reader = new FileReader();
+        reader.onload = () => {
+            try {
+                const snapshot = JSON.parse(reader.result);
+                devTools.importSnapshot(snapshot);
+            }
+            catch (e) {
+                console.error('[ngStato DevTools] Invalid snapshot file:', e);
+            }
+        };
+        reader.readAsText(file);
+        event.target.value = '';
+    }
     // ── Drag ───────────────────────────────────────────
     onDragStart(e) {
         if (e.target.classList.contains('btn-icon'))
@@ -323,8 +445,8 @@ class StatoDevToolsComponent {
         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 -->
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: StatoDevToolsComponent, isStandalone: true, selector: "ngstato-devtools, stato-devtools", ngImport: i0, template: `
+    <!-- Floating button -->
     @if (!isOpen()) {
       <button class="devtools-fab" (click)="toggle()">
         🛠 Stato
@@ -338,7 +460,7 @@ class StatoDevToolsComponent {
         [class.devtools-panel--minimized]="isMinimized()"
         [style.left.px]="posX()"
         [style.top.px]="posY()"
-        [style.width.px]="isMinimized() ? 200 : panelWidth()"
+        [style.width.px]="isMinimized() ? 220 : panelWidth()"
         [style.height]="isMinimized() ? 'auto' : panelHeight() + 'px'"
       >
 
@@ -347,19 +469,24 @@ class StatoDevToolsComponent {
           class="devtools-header"
           (mousedown)="onDragStart($event)"
         >
-          <span class="devtools-title">🛠 Stato</span>
+          <span class="devtools-title">
+            🛠 Stato
+            @if (isTimeTraveling()) {
+              <span class="tt-badge">TIME-TRAVEL</span>
+            }
+          </span>
           <div class="devtools-header-actions">
             @if (!isMinimized()) {
-              <button class="btn-icon" (click)="clear()" title="Vider">🗑</button>
+              <button class="btn-icon" (click)="clear()" title="Clear">🗑</button>
             }
-            <button class="btn-icon" (click)="toggleMinimize()" title="Minimiser/Agrandir">
+            <button class="btn-icon" (click)="toggleMinimize()" title="Minimize">
               {{ isMinimized() ? '▲' : '▼' }}
             </button>
-            <button class="btn-icon" (click)="toggle()" title="Fermer">✕</button>
+            <button class="btn-icon" (click)="toggle()" title="Close">✕</button>
           </div>
         </div>
 
-        <!-- Resize handle — coin bas droite -->
+        <!-- Resize handle -->
         @if (!isMinimized()) {
           <div
             class="devtools-resize"
@@ -387,17 +514,55 @@ class StatoDevToolsComponent {
             </button>
           </div>
 
-          <!-- Tab Actions -->
+          <!-- Time-travel toolbar -->
+          @if (activeTab() === 'actions' && logs().length) {
+            <div class="tt-toolbar">
+              <button
+                class="tt-btn"
+                (click)="onUndo()"
+                [disabled]="!canUndo()"
+                title="Undo (step back)"
+              >⏪</button>
+              <button
+                class="tt-btn"
+                (click)="onRedo()"
+                [disabled]="!canRedo()"
+                title="Redo (step forward)"
+              >⏩</button>
+              @if (isTimeTraveling()) {
+                <button
+                  class="tt-btn tt-btn--resume"
+                  (click)="onResume()"
+                  title="Resume live state"
+                >▶ Live</button>
+              }
+              <div class="tt-spacer"></div>
+              <button
+                class="tt-btn tt-btn--export"
+                (click)="onExport()"
+                title="Export state snapshot (JSON)"
+              >📤</button>
+              <button
+                class="tt-btn tt-btn--import"
+                (click)="onImport()"
+                title="Import state snapshot"
+              >📥</button>
+            </div>
+          }
+
+          <!-- Tab: Actions -->
           @if (activeTab() === 'actions') {
             <div class="devtools-content">
               @if (!logs().length) {
-                <div class="devtools-empty">Aucune action pour l'instant</div>
+                <div class="devtools-empty">No actions yet</div>
               }
               @for (log of logs(); track log.id) {
                 <div
                   class="log-item"
                   [class.log-item--error]="log.status === 'error'"
-                  (click)="selectLog(log)"
+                  [class.log-item--active]="activeLogId() === log.id"
+                  [class.log-item--future]="isFutureLog(log)"
+                  (click)="onTravelTo(log)"
                 >
                   <div class="log-item__left">
                     <span class="log-status">{{ log.status === 'success' ? '✓' : '✗' }}</span>
@@ -405,11 +570,16 @@ class StatoDevToolsComponent {
                   </div>
                   <div class="log-item__right">
                     @if (log.status === 'error') {
-                      <span class="log-error-badge">erreur</span>
+                      <span class="log-error-badge">error</span>
                     } @else {
                       <span class="log-duration">{{ log.duration }}ms</span>
                     }
                     <span class="log-time">{{ formatTime(log.at) }}</span>
+                    <button
+                      class="btn-icon btn-replay"
+                      (click)="onReplay(log, $event)"
+                      title="Replay this action"
+                    >🔄</button>
                   </div>
                 </div>
 
@@ -419,11 +589,11 @@ class StatoDevToolsComponent {
                       <div class="log-detail__error">{{ log.error }}</div>
                     }
                     <div class="log-detail__section">
-                      <span class="log-detail__label">Avant</span>
+                      <span class="log-detail__label">Before</span>
                       <pre>{{ log.prevState | json }}</pre>
                     </div>
                     <div class="log-detail__section">
-                      <span class="log-detail__label">Après</span>
+                      <span class="log-detail__label">After</span>
                       <pre>{{ log.nextState | json }}</pre>
                     </div>
                   </div>
@@ -432,13 +602,18 @@ class StatoDevToolsComponent {
             </div>
           }
 
-          <!-- Tab State -->
+          <!-- Tab: State -->
           @if (activeTab() === 'state') {
             <div class="devtools-content">
-              @if (logs().length) {
-                <pre class="state-view">{{ logs()[0].nextState | json }}</pre>
+              @if (globalState().size) {
+                @for (entry of globalState() | keyvalue; track entry.key) {
+                  <div class="state-store-block">
+                    <div class="state-store-name">{{ entry.key }}</div>
+                    <pre class="state-view">{{ entry.value | json }}</pre>
+                  </div>
+                }
               } @else {
-                <div class="devtools-empty">Aucun state disponible</div>
+                <div class="devtools-empty">No state available</div>
               }
             </div>
           }
@@ -446,12 +621,21 @@ class StatoDevToolsComponent {
 
       </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" }] });
+
+    <!-- Hidden file input for import -->
+    <input
+      #fileInput
+      type="file"
+      accept=".json"
+      style="display: none"
+      (change)="onFileSelected($event)"
+    />
+  `, isInline: true, styles: [":host{font-family:system-ui,-apple-system,sans-serif}.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 #00000080;z-index:9999;display:flex;flex-direction:column;overflow:hidden;font-family:Courier New,monospace;min-width:200px;min-height:40px;border:1px solid #1e293b}.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;display:flex;align-items:center;gap:.4rem}.tt-badge{background:#7c3aed;color:#fff;font-size:.6rem;padding:.12rem .4rem;border-radius:4px;font-weight:700;letter-spacing:.05em;animation:tt-pulse 1.5s ease-in-out infinite}@keyframes tt-pulse{0%,to{opacity:1}50%{opacity:.6}}.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;transition:color .15s}.tab:hover{color:#e2e8f0}.tab--active{color:#3b82f6;border-bottom:2px solid #3b82f6}.tt-toolbar{display:flex;align-items:center;gap:.2rem;padding:.3rem .5rem;background:#0f172a;border-bottom:1px solid #1e293b}.tt-btn{background:#1e293b;border:1px solid #334155;color:#94a3b8;padding:.2rem .5rem;border-radius:4px;font-size:.72rem;cursor:pointer;transition:all .15s;font-family:system-ui}.tt-btn:hover:not(:disabled){background:#334155;color:#e2e8f0;border-color:#475569}.tt-btn:disabled{opacity:.3;cursor:not-allowed}.tt-btn--resume{background:#7c3aed;border-color:#7c3aed;color:#fff;font-weight:600}.tt-btn--resume:hover:not(:disabled){background:#6d28d9}.tt-btn--export,.tt-btn--import{font-size:.68rem}.tt-spacer{flex:1}.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;transition:background .1s}.log-item:hover{background:#1e293b}.log-item--error{background:#1a0a0a}.log-item--active{background:#1e1b4b!important;border-left:3px solid #7c3aed}.log-item--future{opacity:.35}.log-item__left{display:flex;align-items:center;gap:.4rem;overflow:hidden;flex:1}.log-item__right{display:flex;align-items:center;gap:.35rem;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}.btn-replay{font-size:.65rem;opacity:.5}.btn-replay:hover{opacity:1}.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-store-block{border-bottom:1px solid #1e293b}.state-store-block:last-child{border-bottom:none}.state-store-name{padding:.4rem .75rem .2rem;color:#3b82f6;font-size:.72rem;font-family:system-ui;font-weight:600;letter-spacing:.03em;text-transform:uppercase}.state-view{color:#86efac;font-size:.7rem;padding:.25rem .75rem .75rem;margin:0;white-space:pre-wrap;word-break:break-all}\n"], dependencies: [{ kind: "pipe", type: JsonPipe, name: "json" }, { kind: "pipe", type: KeyValuePipe, name: "keyvalue" }] });
 }
 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 -->
+            args: [{ selector: 'ngstato-devtools, stato-devtools', standalone: true, imports: [JsonPipe, KeyValuePipe], template: `
+    <!-- Floating button -->
     @if (!isOpen()) {
       <button class="devtools-fab" (click)="toggle()">
         🛠 Stato
@@ -465,7 +649,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
         [class.devtools-panel--minimized]="isMinimized()"
         [style.left.px]="posX()"
         [style.top.px]="posY()"
-        [style.width.px]="isMinimized() ? 200 : panelWidth()"
+        [style.width.px]="isMinimized() ? 220 : panelWidth()"
         [style.height]="isMinimized() ? 'auto' : panelHeight() + 'px'"
       >
 
@@ -474,19 +658,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
           class="devtools-header"
           (mousedown)="onDragStart($event)"
         >
-          <span class="devtools-title">🛠 Stato</span>
+          <span class="devtools-title">
+            🛠 Stato
+            @if (isTimeTraveling()) {
+              <span class="tt-badge">TIME-TRAVEL</span>
+            }
+          </span>
           <div class="devtools-header-actions">
             @if (!isMinimized()) {
-              <button class="btn-icon" (click)="clear()" title="Vider">🗑</button>
+              <button class="btn-icon" (click)="clear()" title="Clear">🗑</button>
             }
-            <button class="btn-icon" (click)="toggleMinimize()" title="Minimiser/Agrandir">
+            <button class="btn-icon" (click)="toggleMinimize()" title="Minimize">
               {{ isMinimized() ? '▲' : '▼' }}
             </button>
-            <button class="btn-icon" (click)="toggle()" title="Fermer">✕</button>
+            <button class="btn-icon" (click)="toggle()" title="Close">✕</button>
           </div>
         </div>
 
-        <!-- Resize handle — coin bas droite -->
+        <!-- Resize handle -->
         @if (!isMinimized()) {
           <div
             class="devtools-resize"
@@ -514,17 +703,55 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
             </button>
           </div>
 
-          <!-- Tab Actions -->
+          <!-- Time-travel toolbar -->
+          @if (activeTab() === 'actions' && logs().length) {
+            <div class="tt-toolbar">
+              <button
+                class="tt-btn"
+                (click)="onUndo()"
+                [disabled]="!canUndo()"
+                title="Undo (step back)"
+              >⏪</button>
+              <button
+                class="tt-btn"
+                (click)="onRedo()"
+                [disabled]="!canRedo()"
+                title="Redo (step forward)"
+              >⏩</button>
+              @if (isTimeTraveling()) {
+                <button
+                  class="tt-btn tt-btn--resume"
+                  (click)="onResume()"
+                  title="Resume live state"
+                >▶ Live</button>
+              }
+              <div class="tt-spacer"></div>
+              <button
+                class="tt-btn tt-btn--export"
+                (click)="onExport()"
+                title="Export state snapshot (JSON)"
+              >📤</button>
+              <button
+                class="tt-btn tt-btn--import"
+                (click)="onImport()"
+                title="Import state snapshot"
+              >📥</button>
+            </div>
+          }
+
+          <!-- Tab: Actions -->
           @if (activeTab() === 'actions') {
             <div class="devtools-content">
               @if (!logs().length) {
-                <div class="devtools-empty">Aucune action pour l'instant</div>
+                <div class="devtools-empty">No actions yet</div>
               }
               @for (log of logs(); track log.id) {
                 <div
                   class="log-item"
                   [class.log-item--error]="log.status === 'error'"
-                  (click)="selectLog(log)"
+                  [class.log-item--active]="activeLogId() === log.id"
+                  [class.log-item--future]="isFutureLog(log)"
+                  (click)="onTravelTo(log)"
                 >
                   <div class="log-item__left">
                     <span class="log-status">{{ log.status === 'success' ? '✓' : '✗' }}</span>
@@ -532,11 +759,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                   </div>
                   <div class="log-item__right">
                     @if (log.status === 'error') {
-                      <span class="log-error-badge">erreur</span>
+                      <span class="log-error-badge">error</span>
                     } @else {
                       <span class="log-duration">{{ log.duration }}ms</span>
                     }
                     <span class="log-time">{{ formatTime(log.at) }}</span>
+                    <button
+                      class="btn-icon btn-replay"
+                      (click)="onReplay(log, $event)"
+                      title="Replay this action"
+                    >🔄</button>
                   </div>
                 </div>
 
@@ -546,11 +778,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                       <div class="log-detail__error">{{ log.error }}</div>
                     }
                     <div class="log-detail__section">
-                      <span class="log-detail__label">Avant</span>
+                      <span class="log-detail__label">Before</span>
                       <pre>{{ log.prevState | json }}</pre>
                     </div>
                     <div class="log-detail__section">
-                      <span class="log-detail__label">Après</span>
+                      <span class="log-detail__label">After</span>
                       <pre>{{ log.nextState | json }}</pre>
                     </div>
                   </div>
@@ -559,13 +791,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
             </div>
           }
 
-          <!-- Tab State -->
+          <!-- Tab: State -->
           @if (activeTab() === 'state') {
             <div class="devtools-content">
-              @if (logs().length) {
-                <pre class="state-view">{{ logs()[0].nextState | json }}</pre>
+              @if (globalState().size) {
+                @for (entry of globalState() | keyvalue; track entry.key) {
+                  <div class="state-store-block">
+                    <div class="state-store-name">{{ entry.key }}</div>
+                    <pre class="state-view">{{ entry.value | json }}</pre>
+                  </div>
+                }
               } @else {
-                <div class="devtools-empty">Aucun state disponible</div>
+                <div class="devtools-empty">No state available</div>
               }
             </div>
           }
@@ -573,7 +810,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
 
       </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"] }]
+
+    <!-- Hidden file input for import -->
+    <input
+      #fileInput
+      type="file"
+      accept=".json"
+      style="display: none"
+      (change)="onFileSelected($event)"
+    />
+  `, styles: [":host{font-family:system-ui,-apple-system,sans-serif}.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 #00000080;z-index:9999;display:flex;flex-direction:column;overflow:hidden;font-family:Courier New,monospace;min-width:200px;min-height:40px;border:1px solid #1e293b}.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;display:flex;align-items:center;gap:.4rem}.tt-badge{background:#7c3aed;color:#fff;font-size:.6rem;padding:.12rem .4rem;border-radius:4px;font-weight:700;letter-spacing:.05em;animation:tt-pulse 1.5s ease-in-out infinite}@keyframes tt-pulse{0%,to{opacity:1}50%{opacity:.6}}.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;transition:color .15s}.tab:hover{color:#e2e8f0}.tab--active{color:#3b82f6;border-bottom:2px solid #3b82f6}.tt-toolbar{display:flex;align-items:center;gap:.2rem;padding:.3rem .5rem;background:#0f172a;border-bottom:1px solid #1e293b}.tt-btn{background:#1e293b;border:1px solid #334155;color:#94a3b8;padding:.2rem .5rem;border-radius:4px;font-size:.72rem;cursor:pointer;transition:all .15s;font-family:system-ui}.tt-btn:hover:not(:disabled){background:#334155;color:#e2e8f0;border-color:#475569}.tt-btn:disabled{opacity:.3;cursor:not-allowed}.tt-btn--resume{background:#7c3aed;border-color:#7c3aed;color:#fff;font-weight:600}.tt-btn--resume:hover:not(:disabled){background:#6d28d9}.tt-btn--export,.tt-btn--import{font-size:.68rem}.tt-spacer{flex:1}.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;transition:background .1s}.log-item:hover{background:#1e293b}.log-item--error{background:#1a0a0a}.log-item--active{background:#1e1b4b!important;border-left:3px solid #7c3aed}.log-item--future{opacity:.35}.log-item__left{display:flex;align-items:center;gap:.4rem;overflow:hidden;flex:1}.log-item__right{display:flex;align-items:center;gap:.35rem;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}.btn-replay{font-size:.65rem;opacity:.5}.btn-replay:hover{opacity:1}.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-store-block{border-bottom:1px solid #1e293b}.state-store-block:last-child{border-bottom:none}.state-store-name{padding:.4rem .75rem .2rem;color:#3b82f6;font-size:.72rem;font-family:system-ui;font-weight:600;letter-spacing:.03em;text-transform:uppercase}.state-view{color:#86efac;font-size:.7rem;padding:.25rem .75rem .75rem;margin:0;white-space:pre-wrap;word-break:break-all}\n"] }]
         }] });
 
 // ─────────────────────────────────────────────────────