juxscript 1.1.28 → 1.1.31

package/index.d.ts

@@ -27,6 +27,7 @@ import { menu } from './lib/components/menu.js';
 import { modal } from './lib/components/modal.js';
 import { nav } from './lib/components/nav.js';
 import { paragraph } from './lib/components/paragraph.js';
+import { pen } from './lib/components/pen.js';
 import { progress } from './lib/components/progress.js';
 import { radio } from './lib/components/radio.js';
 import { script } from './lib/components/script.js';
@@ -43,7 +44,8 @@ import { write } from './lib/components/write.js';
 import { renderIcon, renderEmoji } from './lib/components/icons.js';
 import { state } from './lib/reactivity/state.js';
 import { registry } from './lib/components/registry.js';
-export { state, registry };
+import { stateHistory } from './lib/components/history/StateHistory.js';
+export { state, registry, stateHistory };
 export declare const jux: {
     alert: typeof alert;
     app: typeof app;
@@ -73,6 +75,7 @@ export declare const jux: {
     modal: typeof modal;
     nav: typeof nav;
     paragraph: typeof paragraph;
+    pen: typeof pen;
     progress: typeof progress;
     radio: typeof radio;
     req: import("./lib/components/req.js").Req;

package/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["index.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["index.ts"],"names":[],"mappings":"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"}

package/index.js

@@ -27,6 +27,7 @@ import { menu } from './lib/components/menu.js';
 import { modal } from './lib/components/modal.js';
 import { nav } from './lib/components/nav.js';
 import { paragraph } from './lib/components/paragraph.js';
+import { pen } from './lib/components/pen.js'; // ✅ Import pen
 import { progress } from './lib/components/progress.js';
 import { radio } from './lib/components/radio.js';
 import { req } from './lib/components/req.js';
@@ -45,7 +46,8 @@ import { fetchAPI } from './lib/utils/fetch.js';
 import { renderIcon, renderEmoji } from './lib/components/icons.js';
 import { state } from './lib/reactivity/state.js';
 import { registry } from './lib/components/registry.js'; // ✅ Import registry
-export { state, registry }; // ✅ Export registry
+import { stateHistory } from './lib/components/history/StateHistory.js'; // ✅ Import history
+export { state, registry, stateHistory }; // ✅ Export history
 // Utilities
 export const jux = {
     alert,
@@ -76,6 +78,7 @@ export const jux = {
     modal,
     nav,
     paragraph,
+    pen,
     progress,
     radio,
     req,

package/lib/components/base/BaseComponent.d.ts

@@ -131,17 +131,30 @@ export declare abstract class BaseComponent<TState extends BaseState = BaseState
      */
     remove(): this;
     bind(event: string, handler: Function): this;
-    /**
-     * Sync a component property with a State object
-     * @param property - The property to sync
-     * @param stateObj - The State object to sync with
-     * @param toStateOrTransform - Either toState function OR a simple transform function
-     * @param toComponent - Optional toComponent function (if toState was provided)
-     */
     sync(property: string, stateObj: State<any>, toStateOrTransform?: Function, toComponent?: Function): this;
     protected _isTriggerEvent(event: string): boolean;
     protected _isCallbackEvent(event: string): boolean;
     protected _triggerCallback(eventName: string, ...args: any[]): void;
+    /**
+     * Roll back to previous state
+     */
+    rollback(): this;
+    /**
+     * Roll forward to next state
+     */
+    rollforward(): this;
+    /**
+     * Get complete timeline of this component's changes
+     */
+    timeline(): Array<any>;
+    /**
+     * Get only state changes for this component
+     */
+    stateHistory(): import("../history/StateHistory.js").StateSnapshot<any>[];
+    /**
+     * Get only events for this component
+     */
+    eventHistory(): import("../history/StateHistory.js").EventSnapshot[];
     protected _setupContainer(targetId?: string): HTMLElement;
     protected _wireStandardEvents(element: HTMLElement): void;
     /**

package/lib/components/base/BaseComponent.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"BaseComponent.d.ts","sourceRoot":"","sources":["BaseComponent.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"BaseComponent.d.ts","sourceRoot":"","sources":["BaseComponent.ts"],"names":[],"mappings":"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"}

package/lib/components/base/BaseComponent.js

@@ -1,5 +1,6 @@
 import { getOrCreateContainer } from '../helpers.js';
-import { registry } from '../registry.js'; // ✅ Import registry
+import { registry } from '../registry.js';
+import { stateHistory } from '../history/StateHistory.js'; // ✅ Import history
 /**
  * Abstract base class for all JUX components
  * Provides common storage, event routing, and lifecycle methods
@@ -32,11 +33,14 @@ export class BaseComponent {
         this.state = new Proxy(stateWithDefaults, {
             set: (target, prop, value) => {
                 const key = prop;
-                if (target[key] !== value) {
+                const oldValue = target[key];
+                if (oldValue !== value) {
+                    // ✅ Record state change in history
+                    stateHistory.recordStateChange(this._id, prop, oldValue, value);
                     target[key] = value;
                     // 1️⃣ Update DOM via update()
                     this.update(prop, value);
-                    // 2️⃣ ✨ Notify synced State<T> objects (with guard)
+                    // 2️⃣ Notify synced State<T> objects (with guard)
                     if (!this._isUpdatingSync) {
                         this._notifySyncedState(prop, value);
                     }
@@ -287,6 +291,8 @@ export class BaseComponent {
      * EVENT BINDING (Shared logic)
      * ═════════════════════════════════════════════════════════════════ */
     bind(event, handler) {
+        // ✅ Record bind event
+        stateHistory.recordEvent(this._id, 'bind', event, { handlerName: handler.name });
         if (this._isTriggerEvent(event)) {
             this._triggerHandlers.set(event, handler);
         }
@@ -298,20 +304,17 @@ export class BaseComponent {
         }
         return this;
     }
-    /**
-     * Sync a component property with a State object
-     * @param property - The property to sync
-     * @param stateObj - The State object to sync with
-     * @param toStateOrTransform - Either toState function OR a simple transform function
-     * @param toComponent - Optional toComponent function (if toState was provided)
-     */
     sync(property, stateObj, toStateOrTransform, toComponent) {
         if (!stateObj || typeof stateObj.subscribe !== 'function') {
             throw new Error(`${this.constructor.name}.sync: Expected a State object for property "${property}"`);
         }
-        // If only 3 args provided, treat the function as toComponent (the common case)
         const actualToState = (toComponent !== undefined) ? toStateOrTransform : undefined;
         const actualToComponent = (toComponent !== undefined) ? toComponent : toStateOrTransform;
+        // ✅ Record sync event
+        stateHistory.recordEvent(this._id, 'sync', property, {
+            hasToState: !!actualToState,
+            hasToComponent: !!actualToComponent
+        });
         this._syncBindings.push({
             property,
             stateObj,
@@ -327,13 +330,59 @@ export class BaseComponent {
         return this.getCallbackEvents().includes(event);
     }
     _triggerCallback(eventName, ...args) {
+        // ✅ Record callback event
+        stateHistory.recordEvent(this._id, 'callback', eventName, { argsCount: args.length });
         if (this._callbackHandlers.has(eventName)) {
             const handler = this._callbackHandlers.get(eventName);
             handler(...args);
         }
-        else {
-            // console.warn(`🔍 No handler found for "${eventName}"`);
+    }
+    /* ═════════════════════════════════════════════════════════════════
+     * TIME-TRAVEL DEBUGGING (PUBLIC API)
+     * ═════════════════════════════════════════════════════════════════ */
+    /**
+     * Roll back to previous state
+     */
+    rollback() {
+        const snapshot = stateHistory.moveBack();
+        if (snapshot && snapshot.componentId === this._id) {
+            stateHistory.startReplay();
+            this.state[snapshot.property] = snapshot.oldValue;
+            stateHistory.endReplay();
+        }
+        return this;
+    }
+    /**
+     * Roll forward to next state
+     */
+    rollforward() {
+        const snapshot = stateHistory.moveForward();
+        if (snapshot && snapshot.componentId === this._id) {
+            stateHistory.startReplay();
+            this.state[snapshot.property] = snapshot.newValue;
+            stateHistory.endReplay();
         }
+        return this;
+    }
+    /**
+     * Get complete timeline of this component's changes
+     */
+    timeline() {
+        const stateChanges = stateHistory.getComponentHistory(this._id);
+        const events = stateHistory.getComponentEvents(this._id);
+        return [...stateChanges, ...events].sort((a, b) => a.timestamp - b.timestamp);
+    }
+    /**
+     * Get only state changes for this component
+     */
+    stateHistory() {
+        return stateHistory.getComponentHistory(this._id);
+    }
+    /**
+     * Get only events for this component
+     */
+    eventHistory() {
+        return stateHistory.getComponentEvents(this._id);
     }
     /* ═════════════════════════════════════════════════════════════════
      * COMMON RENDER HELPERS
@@ -374,13 +423,13 @@ export class BaseComponent {
             if (typeof method === 'function') {
                 // Set initial value
                 const initialValue = transform(stateObj.value);
-                this._isUpdatingSync = true; // ✅ Guard during initial set
+                this._isUpdatingSync = true;
                 method.call(this, initialValue);
                 this._isUpdatingSync = false;
                 // Subscribe to changes with guard
                 stateObj.subscribe((val) => {
                     if (this._isUpdatingSync)
-                        return; // ✅ Skip if updating
+                        return;
                     const transformed = transform(val);
                     this._isUpdatingSync = true;
                     method.call(this, transformed);

package/lib/components/base/BaseComponent.ts

@@ -1,6 +1,7 @@
 import { State } from '../../reactivity/state.js';
 import { getOrCreateContainer } from '../helpers.js';
-import { registry } from '../registry.js'; // ✅ Import registry
+import { registry } from '../registry.js';
+import { stateHistory } from '../history/StateHistory.js'; // ✅ Import history
 
 /**
  * Base state interface that ALL component states must extend
@@ -60,13 +61,18 @@ export abstract class BaseComponent<TState extends BaseState = BaseState> {
         this.state = new Proxy(stateWithDefaults, {
             set: (target, prop, value) => {
                 const key = prop as keyof TState;
-                if (target[key] !== value) {
+                const oldValue = target[key];
+
+                if (oldValue !== value) {
+                    // ✅ Record state change in history
+                    stateHistory.recordStateChange(this._id, prop as string, oldValue, value);
+
                     target[key] = value;
 
                     // 1️⃣ Update DOM via update()
                     this.update(prop as string, value);
 
-                    // 2️⃣ ✨ Notify synced State<T> objects (with guard)
+                    // 2️⃣ Notify synced State<T> objects (with guard)
                     if (!this._isUpdatingSync) {
                         this._notifySyncedState(prop as string, value);
                     }
@@ -359,6 +365,9 @@ export abstract class BaseComponent<TState extends BaseState = BaseState> {
      * ═════════════════════════════════════════════════════════════════ */
 
     bind(event: string, handler: Function): this {
+        // ✅ Record bind event
+        stateHistory.recordEvent(this._id, 'bind', event, { handlerName: handler.name });
+
         if (this._isTriggerEvent(event)) {
             this._triggerHandlers.set(event, handler);
         } else if (this._isCallbackEvent(event)) {
@@ -369,22 +378,20 @@ export abstract class BaseComponent<TState extends BaseState = BaseState> {
         return this;
     }
 
-    /**
-     * Sync a component property with a State object
-     * @param property - The property to sync
-     * @param stateObj - The State object to sync with
-     * @param toStateOrTransform - Either toState function OR a simple transform function
-     * @param toComponent - Optional toComponent function (if toState was provided)
-     */
     sync(property: string, stateObj: State<any>, toStateOrTransform?: Function, toComponent?: Function): this {
         if (!stateObj || typeof stateObj.subscribe !== 'function') {
             throw new Error(`${this.constructor.name}.sync: Expected a State object for property "${property}"`);
         }
 
-        // If only 3 args provided, treat the function as toComponent (the common case)
         const actualToState = (toComponent !== undefined) ? toStateOrTransform : undefined;
         const actualToComponent = (toComponent !== undefined) ? toComponent : toStateOrTransform;
 
+        // ✅ Record sync event
+        stateHistory.recordEvent(this._id, 'sync', property, {
+            hasToState: !!actualToState,
+            hasToComponent: !!actualToComponent
+        });
+
         this._syncBindings.push({
             property,
             stateObj,
@@ -403,15 +410,68 @@ export abstract class BaseComponent<TState extends BaseState = BaseState> {
     }
 
     protected _triggerCallback(eventName: string, ...args: any[]): void {
+        // ✅ Record callback event
+        stateHistory.recordEvent(this._id, 'callback', eventName, { argsCount: args.length });
 
         if (this._callbackHandlers.has(eventName)) {
             const handler = this._callbackHandlers.get(eventName)!;
             handler(...args);
-        } else {
-            // console.warn(`🔍 No handler found for "${eventName}"`);
         }
     }
 
+    /* ═════════════════════════════════════════════════════════════════
+     * TIME-TRAVEL DEBUGGING (PUBLIC API)
+     * ═════════════════════════════════════════════════════════════════ */
+
+    /**
+     * Roll back to previous state
+     */
+    rollback(): this {
+        const snapshot = stateHistory.moveBack();
+        if (snapshot && snapshot.componentId === this._id) {
+            stateHistory.startReplay();
+            (this.state as any)[snapshot.property] = snapshot.oldValue;
+            stateHistory.endReplay();
+        }
+        return this;
+    }
+
+    /**
+     * Roll forward to next state
+     */
+    rollforward(): this {
+        const snapshot = stateHistory.moveForward();
+        if (snapshot && snapshot.componentId === this._id) {
+            stateHistory.startReplay();
+            (this.state as any)[snapshot.property] = snapshot.newValue;
+            stateHistory.endReplay();
+        }
+        return this;
+    }
+
+    /**
+     * Get complete timeline of this component's changes
+     */
+    timeline(): Array<any> {
+        const stateChanges = stateHistory.getComponentHistory(this._id);
+        const events = stateHistory.getComponentEvents(this._id);
+        return [...stateChanges, ...events].sort((a, b) => a.timestamp - b.timestamp);
+    }
+
+    /**
+     * Get only state changes for this component
+     */
+    stateHistory() {
+        return stateHistory.getComponentHistory(this._id);
+    }
+
+    /**
+     * Get only events for this component
+     */
+    eventHistory() {
+        return stateHistory.getComponentEvents(this._id);
+    }
+
     /* ═════════════════════════════════════════════════════════════════
      * COMMON RENDER HELPERS
      * ═════════════════════════════════════════════════════════════════ */
@@ -457,13 +517,13 @@ export abstract class BaseComponent<TState extends BaseState = BaseState> {
             if (typeof method === 'function') {
                 // Set initial value
                 const initialValue = transform(stateObj.value);
-                this._isUpdatingSync = true; // ✅ Guard during initial set
+                this._isUpdatingSync = true;
                 method.call(this, initialValue);
                 this._isUpdatingSync = false;
 
                 // Subscribe to changes with guard
                 stateObj.subscribe((val: any) => {
-                    if (this._isUpdatingSync) return; // ✅ Skip if updating
+                    if (this._isUpdatingSync) return;
 
                     const transformed = transform(val);
                     this._isUpdatingSync = true;

package/lib/components/history/StateHistory.d.ts

@@ -0,0 +1,91 @@
+/**
+ * State History Tracker
+ * Tracks all state mutations for time-travel debugging and undo/redo
+ */
+export interface StateSnapshot<T = any> {
+    timestamp: number;
+    componentId: string;
+    property: string;
+    oldValue: T;
+    newValue: T;
+    stackTrace?: string;
+}
+export interface EventSnapshot {
+    timestamp: number;
+    componentId: string;
+    eventType: 'bind' | 'sync' | 'callback' | 'trigger';
+    eventName: string;
+    details: Record<string, any>;
+}
+export declare class StateHistory {
+    private stateSnapshots;
+    private eventSnapshots;
+    private maxHistory;
+    private currentIndex;
+    private isReplaying;
+    /**
+     * Record a state change
+     */
+    recordStateChange<T>(componentId: string, property: string, oldValue: T, newValue: T): void;
+    /**
+     * Record an event (bind, sync, callback, trigger)
+     */
+    recordEvent(componentId: string, eventType: 'bind' | 'sync' | 'callback' | 'trigger', eventName: string, details?: Record<string, any>): void;
+    /**
+     * Get timeline of all changes and events
+     */
+    getTimeline(): Array<StateSnapshot | EventSnapshot>;
+    /**
+     * Get state snapshots for a specific component
+     */
+    getComponentHistory(componentId: string): StateSnapshot[];
+    /**
+     * Get event snapshots for a specific component
+     */
+    getComponentEvents(componentId: string): EventSnapshot[];
+    /**
+     * Check if we can roll back
+     */
+    canRollback(): boolean;
+    /**
+     * Check if we can roll forward
+     */
+    canRollforward(): boolean;
+    /**
+     * Get the current snapshot (for rollback)
+     */
+    getCurrentSnapshot(): StateSnapshot | null;
+    /**
+     * Move index for rollback
+     */
+    moveBack(): StateSnapshot | null;
+    /**
+     * Move index for rollforward
+     */
+    moveForward(): StateSnapshot | null;
+    /**
+     * Mark as replaying to prevent recursive recording
+     */
+    startReplay(): void;
+    /**
+     * End replay mode
+     */
+    endReplay(): void;
+    /**
+     * Clear all history
+     */
+    clear(): void;
+    /**
+     * Get summary statistics
+     */
+    getStats(): {
+        totalStateChanges: number;
+        totalEvents: number;
+        currentIndex: number;
+        canRollback: boolean;
+        canRollforward: boolean;
+        components: number;
+    };
+}
+export declare const stateHistory: StateHistory;
+//# sourceMappingURL=StateHistory.d.ts.map

package/lib/components/history/StateHistory.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"StateHistory.d.ts","sourceRoot":"","sources":["StateHistory.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,MAAM,WAAW,aAAa,CAAC,CAAC,GAAG,GAAG;IAClC,SAAS,EAAE,MAAM,CAAC;IAClB,WAAW,EAAE,MAAM,CAAC;IACpB,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,CAAC,CAAC;IACZ,QAAQ,EAAE,CAAC,CAAC;IACZ,UAAU,CAAC,EAAE,MAAM,CAAC;CACvB;AAED,MAAM,WAAW,aAAa;IAC1B,SAAS,EAAE,MAAM,CAAC;IAClB,WAAW,EAAE,MAAM,CAAC;IACpB,SAAS,EAAE,MAAM,GAAG,MAAM,GAAG,UAAU,GAAG,SAAS,CAAC;IACpD,SAAS,EAAE,MAAM,CAAC;IAClB,OAAO,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;CAChC;AAED,qBAAa,YAAY;IACrB,OAAO,CAAC,cAAc,CAAuB;IAC7C,OAAO,CAAC,cAAc,CAAuB;IAC7C,OAAO,CAAC,UAAU,CAAe;IACjC,OAAO,CAAC,YAAY,CAAc;IAClC,OAAO,CAAC,WAAW,CAAkB;IAErC;;OAEG;IACH,iBAAiB,CAAC,CAAC,EACf,WAAW,EAAE,MAAM,EACnB,QAAQ,EAAE,MAAM,EAChB,QAAQ,EAAE,CAAC,EACX,QAAQ,EAAE,CAAC,GACZ,IAAI;IA2BP;;OAEG;IACH,WAAW,CACP,WAAW,EAAE,MAAM,EACnB,SAAS,EAAE,MAAM,GAAG,MAAM,GAAG,UAAU,GAAG,SAAS,EACnD,SAAS,EAAE,MAAM,EACjB,OAAO,GAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAM,GAClC,IAAI;IAiBP;;OAEG;IACH,WAAW,IAAI,KAAK,CAAC,aAAa,GAAG,aAAa,CAAC;IAKnD;;OAEG;IACH,mBAAmB,CAAC,WAAW,EAAE,MAAM,GAAG,aAAa,EAAE;IAIzD;;OAEG;IACH,kBAAkB,CAAC,WAAW,EAAE,MAAM,GAAG,aAAa,EAAE;IAIxD;;OAEG;IACH,WAAW,IAAI,OAAO;IAItB;;OAEG;IACH,cAAc,IAAI,OAAO;IAIzB;;OAEG;IACH,kBAAkB,IAAI,aAAa,GAAG,IAAI;IAO1C;;OAEG;IACH,QAAQ,IAAI,aAAa,GAAG,IAAI;IAQhC;;OAEG;IACH,WAAW,IAAI,aAAa,GAAG,IAAI;IAQnC;;OAEG;IACH,WAAW,IAAI,IAAI;IAInB;;OAEG;IACH,SAAS,IAAI,IAAI;IAIjB;;OAEG;IACH,KAAK,IAAI,IAAI;IAMb;;OAEG;IACH,QAAQ;;;;;;;;CAaX;AAGD,eAAO,MAAM,YAAY,cAAqB,CAAC"}

package/lib/components/history/StateHistory.js

@@ -0,0 +1,154 @@
+/**
+ * State History Tracker
+ * Tracks all state mutations for time-travel debugging and undo/redo
+ */
+export class StateHistory {
+    constructor() {
+        this.stateSnapshots = [];
+        this.eventSnapshots = [];
+        this.maxHistory = 100;
+        this.currentIndex = -1;
+        this.isReplaying = false;
+    }
+    /**
+     * Record a state change
+     */
+    recordStateChange(componentId, property, oldValue, newValue) {
+        if (this.isReplaying)
+            return; // Don't record during replay
+        const snapshot = {
+            timestamp: Date.now(),
+            componentId,
+            property,
+            oldValue,
+            newValue,
+            stackTrace: new Error().stack
+        };
+        // Trim future history if we're not at the end
+        if (this.currentIndex < this.stateSnapshots.length - 1) {
+            this.stateSnapshots = this.stateSnapshots.slice(0, this.currentIndex + 1);
+        }
+        this.stateSnapshots.push(snapshot);
+        this.currentIndex = this.stateSnapshots.length - 1;
+        // Trim if exceeds max
+        if (this.stateSnapshots.length > this.maxHistory) {
+            this.stateSnapshots.shift();
+            this.currentIndex--;
+        }
+    }
+    /**
+     * Record an event (bind, sync, callback, trigger)
+     */
+    recordEvent(componentId, eventType, eventName, details = {}) {
+        const snapshot = {
+            timestamp: Date.now(),
+            componentId,
+            eventType,
+            eventName,
+            details
+        };
+        this.eventSnapshots.push(snapshot);
+        // Trim if exceeds max
+        if (this.eventSnapshots.length > this.maxHistory) {
+            this.eventSnapshots.shift();
+        }
+    }
+    /**
+     * Get timeline of all changes and events
+     */
+    getTimeline() {
+        return [...this.stateSnapshots, ...this.eventSnapshots]
+            .sort((a, b) => a.timestamp - b.timestamp);
+    }
+    /**
+     * Get state snapshots for a specific component
+     */
+    getComponentHistory(componentId) {
+        return this.stateSnapshots.filter(s => s.componentId === componentId);
+    }
+    /**
+     * Get event snapshots for a specific component
+     */
+    getComponentEvents(componentId) {
+        return this.eventSnapshots.filter(s => s.componentId === componentId);
+    }
+    /**
+     * Check if we can roll back
+     */
+    canRollback() {
+        return this.currentIndex > 0;
+    }
+    /**
+     * Check if we can roll forward
+     */
+    canRollforward() {
+        return this.currentIndex < this.stateSnapshots.length - 1;
+    }
+    /**
+     * Get the current snapshot (for rollback)
+     */
+    getCurrentSnapshot() {
+        if (this.currentIndex >= 0 && this.currentIndex < this.stateSnapshots.length) {
+            return this.stateSnapshots[this.currentIndex];
+        }
+        return null;
+    }
+    /**
+     * Move index for rollback
+     */
+    moveBack() {
+        if (this.canRollback()) {
+            this.currentIndex--;
+            return this.stateSnapshots[this.currentIndex];
+        }
+        return null;
+    }
+    /**
+     * Move index for rollforward
+     */
+    moveForward() {
+        if (this.canRollforward()) {
+            this.currentIndex++;
+            return this.stateSnapshots[this.currentIndex];
+        }
+        return null;
+    }
+    /**
+     * Mark as replaying to prevent recursive recording
+     */
+    startReplay() {
+        this.isReplaying = true;
+    }
+    /**
+     * End replay mode
+     */
+    endReplay() {
+        this.isReplaying = false;
+    }
+    /**
+     * Clear all history
+     */
+    clear() {
+        this.stateSnapshots = [];
+        this.eventSnapshots = [];
+        this.currentIndex = -1;
+    }
+    /**
+     * Get summary statistics
+     */
+    getStats() {
+        return {
+            totalStateChanges: this.stateSnapshots.length,
+            totalEvents: this.eventSnapshots.length,
+            currentIndex: this.currentIndex,
+            canRollback: this.canRollback(),
+            canRollforward: this.canRollforward(),
+            components: new Set([
+                ...this.stateSnapshots.map(s => s.componentId),
+                ...this.eventSnapshots.map(s => s.componentId)
+            ]).size
+        };
+    }
+}
+// Global singleton
+export const stateHistory = new StateHistory();