sia-reactor 0.0.20 → 0.0.21

package/dist/plugins.js

@@ -1,6 +1,6 @@
 import {
   reactive
-} from "./chunk-VPR5SP3E.js";
+} from "./chunk-2WBPGSRL.js";
 import {
   clamp,
   guardAllMethods,
@@ -246,9 +246,10 @@ var PERSIST_PLUGIN_BUILD = { disabled: false, key: "REACTOR_STORE", throttle: 25
 // src/ts/plugins/timeTravel.ts
 var TimeTravelPlugin = class extends BaseReactorPlugin {
   static plugName = "timeTravel";
+  lastTimestamp = 0;
   playbackTimeoutId = -1;
   constructor(config, rtr) {
-    super({ ...TIME_TRAVEL_PLUGIN_BUILD, ...config }, rtr, { history: [], initialState: null, currentFrame: 0, paused: true });
+    super({ ...TIME_TRAVEL_PLUGIN_BUILD, ...config }, rtr, { initialState: null, history: [], currentFrame: 0, paused: true });
   }
   // ===========================================================================
   // THE FOUNDATION & WIRETAP (Passive Recording)
@@ -256,6 +257,7 @@ var TimeTravelPlugin = class extends BaseReactorPlugin {
   wire() {
     this.rtr.config.referenceTracking = this.rtr.config.smartCloning = this.rtr.config.eventTimeStamps = true;
     if (!this.state.history.length || this.state.initialState == null) this.state.initialState = this.rtr.snapshot();
+    this.lastTimestamp = performance.now();
     this.state.set("currentFrame", (v = 0) => clamp(0, v, this.state.history.length), { signal: this.signal, immediate: true });
     this.config.on("paths", this.handlePathsState, { signal: this.signal, immediate: true });
     !this.state.paused && this.play();
@@ -269,8 +271,9 @@ var TimeTravelPlugin = class extends BaseReactorPlugin {
     if (!this.state.paused) return;
     if (this.state.currentFrame < this.state.history.length) this.state.history = this.state.history.slice(0, this.state.currentFrame);
     if (this.state.history.length >= this.config.maxHistoryLength) this.state.history = this.state.history.slice(1);
-    this.state.history.push({ timestamp: e.timestamp ?? performance.now(), path: e.target.path, type: e.staticType, value: this.rtr.snapshot(false, e.target.value), oldValue: this.rtr.snapshot(false, e.target.oldValue), hadKey: e.target.hadKey, rejected: e.rejected });
+    this.state.history.push({ path: e.target.path, value: this.rtr.snapshot(false, e.target.value), oldValue: this.rtr.snapshot(false, e.target.oldValue), type: e.staticType, rejected: e.rejected, timedelta: e.timestamp - this.lastTimestamp, hadKey: e.target.hadKey });
     this.state.currentFrame = this.state.history.length;
+    this.lastTimestamp = e.timestamp;
   }
   /** Clears timeline history and resets playhead/genesis to the current reactor state. */
   clear() {
@@ -278,6 +281,7 @@ var TimeTravelPlugin = class extends BaseReactorPlugin {
     this.playbackTimeoutId = -1;
     this.state.history.length = this.state.currentFrame = 0;
     this.state.initialState = this.rtr.snapshot();
+    this.lastTimestamp = performance.now();
   }
   // ===========================================================================
   // THE TIME MACHINE (Manual Controls)
@@ -313,9 +317,9 @@ var TimeTravelPlugin = class extends BaseReactorPlugin {
   async automove(forward = true) {
     this.state.paused = false;
     while ((forward ? this.state.currentFrame < this.state.history.length : this.state.currentFrame > 0) && !this.state.paused) {
-      const currIndex = forward ? this.state.currentFrame : this.state.currentFrame - 1, e = this.state.history[currIndex], nextE = this.state.history[forward ? currIndex + 1 : currIndex - 1], delay = nextE && e ? Math.abs(nextE.timestamp - e.timestamp) : 0;
+      const currIndex = forward ? this.state.currentFrame : this.state.currentFrame - 1, e = this.state.history[forward ? currIndex + 1 : currIndex - 1];
       this.jumpTo(this.state.currentFrame + (forward ? 1 : -1), true);
-      if (delay > 0) await new Promise((res) => this.playbackTimeoutId = setTimeout(() => res(0), clamp(0, delay, this.config.maxPlaybackDelay), this.signal));
+      if (e?.timedelta > 0) await new Promise((res) => this.playbackTimeoutId = setTimeout(() => res(0), Math.min(e.timedelta, this.config.maxPlaybackDelay), this.signal));
     }
     this.state.paused = true;
   }
@@ -329,21 +333,24 @@ var TimeTravelPlugin = class extends BaseReactorPlugin {
   // TELEMETRY & I/O (Session Import/Export)
   // ===========================================================================
   /** Exports the current session as a JSON string. */
-  export() {
-    return JSON.stringify(this.state);
+  export(replacer, space) {
+    try {
+      return JSON.stringify(this.state, replacer, space);
+    } catch (e) {
+      return this.rtr.log(`[Reactor ${this.name} Plug] Failed to export session`), "";
+    }
   }
   /** Imports a session from a JSON string, allowing you to replay or analyze past states. */
   import(json) {
     try {
       setAny(this.state, "*", JSON.parse(json));
+      this.lastTimestamp = performance.now();
       const resume = !this.state.paused, target = this.state.currentFrame;
       this.state.paused = false;
-      setAny(this.rtr.core, "*", deepClone(this.state.initialState, this.rtr.config));
-      this.rtr.tick();
-      this.state.currentFrame = 0;
-      this.jumpTo(target), resume && this.play();
+      setAny(this.rtr.core, "*", deepClone(this.state.initialState, this.rtr.config)), this.rtr.tick();
+      this.state.currentFrame = 0, this.jumpTo(target), resume && this.play();
     } catch (e) {
-      this.rtr.log(`[Reactor ${this.name} Plug] Failed to load session`, "error");
+      this.rtr.log(`[Reactor ${this.name} Plug] Failed to load session`);
     }
   }
 };

package/dist/styles/time-travel-overlay.css

@@ -154,7 +154,7 @@
 
 .tt-io {
   min-height: 84px;
-  max-height: calc(100vh - 350px);
+  max-height: calc((100vh - 318px) / 2);
   resize: vertical;
   border: 1px solid var(--sia-tt-line);
   background: var(--sia-tt-input-bg);

package/dist/super.d.ts

@@ -769,13 +769,13 @@ declare class Reactor<T extends object> {
     protected listeners?: Map<WildPaths<T>, Array<ListenerRecord<T>>>;
     /**
      * Creates a new Reactor instance.
-     * @param object Initial state object.
+     * @param target Initial state target.
      * @param build Reactor bootstrap/build configuration.
      * @example
      * const rtr = new Reactor({ count: 0 });
      */
-    constructor(object?: T, build?: ReactorBuild<T>);
-    proxied<O extends object>(obj: O, rejectable?: boolean, indiffable?: boolean, parent?: object, key?: string, path?: string): O;
+    constructor(target?: T, build?: ReactorBuild<T>);
+    proxied<O extends object>(target: O, rejectable?: boolean, indiffable?: boolean, parent?: object, key?: string, path?: string): O;
     trace(target: object, path: string, paths?: string[], seen?: WeakSet<object>): Paths<T>[];
     protected link(target: any, parent: object, key: string, typecheck?: boolean, es?: (object | string)[]): boolean;
     protected unlink(target: any, parent: object, key: string): void;
@@ -815,7 +815,7 @@ declare class Reactor<T extends object> {
     getDepth(path: string, depth?: number): number;
     protected getContext<P extends WildPaths<T>>(path: P): Target<T, P>;
     protected bindSignal<Cb>(cord: GetterRecord<T> | SetterRecord<T> | DeleterRecord<T> | WatcherRecord<T> | ListenerRecord<T>, sig?: AbortSignal): Cb;
-    protected cloned(obj: any, raw: boolean, seen?: WeakMap<WeakKey, any>): any;
+    protected cloned<O>(target: O, raw: boolean, seen?: WeakMap<WeakKey, any>): O;
     protected syncAdd<P extends WildPaths<T>>(key: "get" | "set" | "delete" | "watch", path: P, cb: any, opts: SyncOptions | undefined, onImmediate?: (immediate: boolean | "auto") => void): () => boolean | undefined;
     protected syncDrop<P extends WildPaths<T>>(store: Map<WildPaths<T>, any[]> | undefined, path: P, cb: any): boolean | undefined;
     /**
@@ -931,7 +931,8 @@ declare class Reactor<T extends object> {
      * @example
      * const snap = rtr.snapshot(false, rtr.core.history.past);
      */
-    snapshot(raw?: boolean, branch?: T): T;
+    snapshot(raw?: boolean): T;
+    snapshot<B>(raw?: boolean, branch?: B): B;
     /**
      * Cascades object updates into direct child paths.
      * @param payload Event or payload source.
@@ -1390,20 +1391,20 @@ declare const PERSIST_PLUGIN_BUILD: Partial<PersistConfig<any>>;
 
 /** The DNA of a specific moment in time, Records the 'Desire' (Intent) or the 'Fact' (State). */
 interface HistoryEntry {
-    /**  Was it a 'set' or a 'delete' surgery? */
-    type: REvent<any, any>["staticType"];
     /** The surgical address in the Reactor */
     path: string;
     /** The data payload at that moment */
     value: any;
     /** The "Undo" antidote (Previous value), if applicable */
     oldValue: any;
-    /** Did the key for the value exist on its parent object? */
-    hadKey: boolean;
+    /**  Was it a 'set' or a 'delete' surgery? */
+    type: REvent<any, any>["staticType"];
     /** Did the Power Line disapprove?; why? */
     rejected: string;
     /** For chronological re-enactment */
-    timestamp: number;
+    timedelta: number;
+    /** Did the key for the value exist on its parent object? */
+    hadKey: boolean;
 }
 interface TimeTravelConfig$1<T extends object = any> {
     /** Specific paths only, no "*"; instead don't pass anything */
@@ -1414,10 +1415,10 @@ interface TimeTravelConfig$1<T extends object = any> {
     maxPlaybackDelay: number;
 }
 interface TimeTravelState {
-    /** The "Timeline" of mutations (Chronological Log) */
-    history: HistoryEntry[];
     /** The "Genesis" snapshot (Raw Data) */
     initialState: any;
+    /** The "Timeline" of mutations (Chronological Log) */
+    history: HistoryEntry[];
     /** The manual playhead (Index in the Timeline) */
     currentFrame: number;
     /** Whether playback is currently paused (Automatic Replay) */
@@ -1429,6 +1430,7 @@ interface TimeTravelState {
  */
 declare class TimeTravelPlugin<T extends object = any> extends BaseReactorPlugin<T, TimeTravelConfig$1<T>, TimeTravelState> {
     static readonly plugName = "timeTravel";
+    protected lastTimestamp: number;
     protected playbackTimeoutId: number;
     constructor(config?: Partial<TimeTravelConfig$1<T>>, rtr?: Reactor<T>);
     wire(): void;
@@ -1454,7 +1456,7 @@ declare class TimeTravelPlugin<T extends object = any> extends BaseReactorPlugin
     /** Pauses the live VCR playback. */
     pause: () => void;
     /** Exports the current session as a JSON string. */
-    export(): string;
+    export(replacer?: ((this: any, key: string, value: any) => any) | (number | string)[] | null, space?: string | number): string;
     /** Imports a session from a JSON string, allowing you to replay or analyze past states. */
     import(json: string): void;
 }

package/dist/super.global.js

@@ -363,27 +363,27 @@ var sia = (() => {
     listeners;
     /**
      * Creates a new Reactor instance.
-     * @param object Initial state object.
+     * @param target Initial state target.
      * @param build Reactor bootstrap/build configuration.
      * @example
      * const rtr = new Reactor({ count: 0 });
      */
-    constructor(object = {}, build) {
+    constructor(target = {}, build) {
       this[INERTIA] = true;
       this.config = { crossRealms: false, smartCloning: false, eventBubbling: true, lineageTracing: false, preserveContext: false, equalityFunction: Object.is, batchingFunction: RTR_BATCH, ...build };
-      this.core = this.proxied(object);
+      this.core = this.proxied(target);
       if (build) this.canLog = !!build.debug;
     }
-    proxied(obj, rejectable = false, indiffable = false, parent, key, path) {
-      if (!obj || "object" !== typeof obj) return obj;
-      obj = obj[RAW] || obj;
-      if (this.config.referenceTracking && parent && key && !this.link(obj, parent, key, false)) return obj;
-      const cached = this.proxyCache.get(obj);
+    proxied(target, rejectable = false, indiffable = false, parent, key, path) {
+      if (!target || "object" !== typeof target) return target;
+      target = target[RAW] || target;
+      if (this.config.referenceTracking && parent && key && !this.link(target, parent, key, false)) return target;
+      const cached = this.proxyCache.get(target);
       if (cached) return cached;
-      if (obj[INERTIA] || !canHandle(obj, this.config, false)) return obj;
-      rejectable ||= obj[REJECTABLE];
-      indiffable ||= obj[INDIFFABLE];
-      const proxy = new Proxy(obj, {
+      if (target[INERTIA] || !canHandle(target, this.config, false)) return target;
+      rejectable ||= target[REJECTABLE];
+      indiffable ||= target[INDIFFABLE];
+      const proxy = new Proxy(target, {
         // Robust Proxy handler
         get: (object, key2, receiver) => {
           if (key2 === RAW) return this.log(`\u{1F440} [Reactor \`get\` Trap] Peeked at ${object}`), object;
@@ -396,10 +396,10 @@ var sia = (() => {
             for (let i = 0, len = this.config.lineageTracing ? paths.length : 1; i < len; i++) {
               const currPath = this.config.lineageTracing ? paths[i] : fullPath, cords = this.getters.get(currPath);
               if (!cords && !wildcords) continue;
-              const target = { path: currPath, value, key: keyStr, hadKey: true, object: receiver }, payload = { type: "get", target, currentTarget: target, root: this.core, rejectable };
+              const target2 = { path: currPath, value, key: keyStr, hadKey: true, object: receiver }, payload = { type: "get", target: target2, currentTarget: target2, root: this.core, rejectable };
               if (cords) value = this.mediate(currPath, payload, "get", cords);
               if (!wildcords) continue;
-              target.value = value;
+              target2.value = value;
               value = this.mediate("*", payload, "get", wildcords);
             }
           }
@@ -421,13 +421,13 @@ var sia = (() => {
             for (let i = 0; i < loopLen; i++) {
               const currPath = this.config.lineageTracing ? paths[i] : fullPath, cords = this.setters.get(currPath);
               if (!cords && !wildcords) continue;
-              const target = { path: currPath, value, oldValue, key: keyStr, hadKey, object: receiver }, payload = { type: "set", target, currentTarget: target, root: this.core, terminated, rejectable };
+              const target2 = { path: currPath, value, oldValue, key: keyStr, hadKey, object: receiver }, payload = { type: "set", target: target2, currentTarget: target2, root: this.core, terminated, rejectable };
               if (cords) {
                 const result2 = this.mediate(currPath, payload, "set", cords);
                 if (!(terminated ||= payload.terminated)) value = result2;
               }
               if (!wildcords) continue;
-              target.value = value;
+              target2.value = value;
               const result = this.mediate("*", payload, "set", wildcords);
               if (!(terminated ||= payload.terminated)) value = result;
             }
@@ -438,8 +438,8 @@ var sia = (() => {
           if (this.config.referenceTracking && !unchanged) this.config.smartCloning && this.stamp(object), this.unlink(safeOldValue, object, keyStr), this.link(safeValue, object, keyStr);
           if (this.watchers || this.listeners)
             for (let i = 0; i < loopLen; i++) {
-              const currPath = this.config.lineageTracing ? paths[i] : fullPath, target = { path: currPath, value, oldValue, key: keyStr, hadKey, object: receiver };
-              this.notify(currPath, { type: "set", target, currentTarget: target, root: this.core, terminated, rejectable });
+              const currPath = this.config.lineageTracing ? paths[i] : fullPath, target2 = { path: currPath, value, oldValue, key: keyStr, hadKey, object: receiver };
+              this.notify(currPath, { type: "set", target: target2, currentTarget: target2, root: this.core, terminated, rejectable });
             }
           return true;
         },
@@ -453,7 +453,7 @@ var sia = (() => {
             for (let i = 0; i < loopLen; i++) {
               const currPath = this.config.lineageTracing ? paths[i] : fullPath, cords = this.deleters.get(currPath);
               if (!cords && !wildcords) continue;
-              const target = { path: currPath, value, oldValue, key: keyStr, hadKey, object: receiver }, payload = { type: "delete", target, currentTarget: target, root: this.core, rejectable };
+              const target2 = { path: currPath, value, oldValue, key: keyStr, hadKey, object: receiver }, payload = { type: "delete", target: target2, currentTarget: target2, root: this.core, rejectable };
               if (cords) {
                 const result2 = this.mediate(currPath, payload, "delete", cords);
                 if (!(terminated ||= payload.terminated)) value = result2;
@@ -469,8 +469,8 @@ var sia = (() => {
           if (this.config.referenceTracking) this.config.smartCloning && this.stamp(object), this.unlink(oldValue?.[RAW] || oldValue, object, keyStr);
           if (this.watchers || this.listeners)
             for (let i = 0; i < loopLen; i++) {
-              const currPath = this.config.lineageTracing ? paths[i] : fullPath, target = { path: currPath, value, oldValue, key: keyStr, hadKey, object: receiver };
-              this.notify(currPath, { type: "delete", target, currentTarget: target, root: this.core, rejectable });
+              const currPath = this.config.lineageTracing ? paths[i] : fullPath, target2 = { path: currPath, value, oldValue, key: keyStr, hadKey, object: receiver };
+              this.notify(currPath, { type: "delete", target: target2, currentTarget: target2, root: this.core, rejectable });
             }
           return true;
         },
@@ -496,7 +496,7 @@ var sia = (() => {
           return ownKeys;
         }
       });
-      return this.proxyCache.set(obj, proxy), proxy;
+      return this.proxyCache.set(target, proxy), proxy;
     }
     trace(target, path, paths = [], seen = /* @__PURE__ */ new WeakSet()) {
       if (Object.is(target, this.core[RAW] || this.core)) return paths.push(path), paths;
@@ -649,15 +649,14 @@ var sia = (() => {
       if (sig) sig.aborted ? cord.clup() : sig.addEventListener("abort", cord.clup, { once: true });
       return cord.sclup = !sig || sig.aborted ? NOOP : () => sig.removeEventListener("abort", cord.clup), cord.clup;
     }
-    cloned(obj, raw, seen = /* @__PURE__ */ new WeakMap()) {
-      if (!obj || "object" !== typeof obj) return obj;
-      obj = obj[RAW] || obj;
-      const cloned = seen.get(obj);
+    cloned(target, raw, seen = /* @__PURE__ */ new WeakMap()) {
+      if (!target || "object" !== typeof target) return target;
+      const obj = target[RAW] || target, cloned = seen.get(obj);
       if (cloned) return cloned;
       if (!canHandle(obj, this.config, false)) return obj;
       const version = obj[VERSION] || 0, cached = !raw && this.config.smartCloning && (this.snapCache ??= /* @__PURE__ */ new WeakMap()).get(obj);
       if (cached && obj[SSVERSION] === version) return cached;
-      const clone = !raw ? this.config.preserveContext ? Object.create(Object.getPrototypeOf(obj)) : Array.isArray(obj) ? [] : {} : obj[RAW] || obj;
+      const clone = !raw ? this.config.preserveContext ? Object.create(Object.getPrototypeOf(obj)) : Array.isArray(obj) ? [] : {} : obj;
       seen.set(obj, clone);
       const keys2 = this.config.preserveContext ? Reflect.ownKeys(obj) : Object.keys(obj);
       for (let i = 0, len = keys2.length; i < len; i++) clone[keys2[i]] = this.cloned(obj[keys2[i]], raw, seen);
@@ -841,19 +840,8 @@ var sia = (() => {
       for (let i = 0, len = cords.length; i < len; i++) if (Object.is(cords[i].cb, callback) && cords[i].capture === capture) return cords[i].sclup(), cords.splice((len--, i--), 1), !cords.length && this.listeners.delete(path), true;
       return false;
     }
-    /**
-     * Creates a snapshot; possibly clone of state (or a state branch).
-     * You could alternatively use or serialize your proxied state "as is" except the environment demands no proxies or new references.
-     * @param raw Use raw (deep unproxied & uncloned) version of branch.
-     * @param branch Branch to clone.
-     * @returns Snapshot deep or smart (structurally shared) clone.
-     * @example
-     * const snap = rtr.snapshot();
-     * @example
-     * const snap = rtr.snapshot(false, rtr.core.history.past);
-     */
-    snapshot(raw = !this.config.smartCloning, branch = this.core) {
-      return this.cloned(branch, raw);
+    snapshot(raw = !this.config.smartCloning, branch) {
+      return this.cloned(arguments.length < 2 ? this.core : branch, raw);
     }
     /**
      * Cascades object updates into direct child paths.
@@ -1379,9 +1367,10 @@ var sia = (() => {
   // src/ts/plugins/timeTravel.ts
   var TimeTravelPlugin = class extends BaseReactorPlugin {
     static plugName = "timeTravel";
+    lastTimestamp = 0;
     playbackTimeoutId = -1;
     constructor(config, rtr) {
-      super({ ...TIME_TRAVEL_PLUGIN_BUILD, ...config }, rtr, { history: [], initialState: null, currentFrame: 0, paused: true });
+      super({ ...TIME_TRAVEL_PLUGIN_BUILD, ...config }, rtr, { initialState: null, history: [], currentFrame: 0, paused: true });
     }
     // ===========================================================================
     // THE FOUNDATION & WIRETAP (Passive Recording)
@@ -1389,6 +1378,7 @@ var sia = (() => {
     wire() {
       this.rtr.config.referenceTracking = this.rtr.config.smartCloning = this.rtr.config.eventTimeStamps = true;
       if (!this.state.history.length || this.state.initialState == null) this.state.initialState = this.rtr.snapshot();
+      this.lastTimestamp = performance.now();
       this.state.set("currentFrame", (v = 0) => clamp(0, v, this.state.history.length), { signal: this.signal, immediate: true });
       this.config.on("paths", this.handlePathsState, { signal: this.signal, immediate: true });
       !this.state.paused && this.play();
@@ -1402,8 +1392,9 @@ var sia = (() => {
       if (!this.state.paused) return;
       if (this.state.currentFrame < this.state.history.length) this.state.history = this.state.history.slice(0, this.state.currentFrame);
       if (this.state.history.length >= this.config.maxHistoryLength) this.state.history = this.state.history.slice(1);
-      this.state.history.push({ timestamp: e.timestamp ?? performance.now(), path: e.target.path, type: e.staticType, value: this.rtr.snapshot(false, e.target.value), oldValue: this.rtr.snapshot(false, e.target.oldValue), hadKey: e.target.hadKey, rejected: e.rejected });
+      this.state.history.push({ path: e.target.path, value: this.rtr.snapshot(false, e.target.value), oldValue: this.rtr.snapshot(false, e.target.oldValue), type: e.staticType, rejected: e.rejected, timedelta: e.timestamp - this.lastTimestamp, hadKey: e.target.hadKey });
       this.state.currentFrame = this.state.history.length;
+      this.lastTimestamp = e.timestamp;
     }
     /** Clears timeline history and resets playhead/genesis to the current reactor state. */
     clear() {
@@ -1411,6 +1402,7 @@ var sia = (() => {
       this.playbackTimeoutId = -1;
       this.state.history.length = this.state.currentFrame = 0;
       this.state.initialState = this.rtr.snapshot();
+      this.lastTimestamp = performance.now();
     }
     // ===========================================================================
     // THE TIME MACHINE (Manual Controls)
@@ -1446,9 +1438,9 @@ var sia = (() => {
     async automove(forward = true) {
       this.state.paused = false;
       while ((forward ? this.state.currentFrame < this.state.history.length : this.state.currentFrame > 0) && !this.state.paused) {
-        const currIndex = forward ? this.state.currentFrame : this.state.currentFrame - 1, e = this.state.history[currIndex], nextE = this.state.history[forward ? currIndex + 1 : currIndex - 1], delay = nextE && e ? Math.abs(nextE.timestamp - e.timestamp) : 0;
+        const currIndex = forward ? this.state.currentFrame : this.state.currentFrame - 1, e = this.state.history[forward ? currIndex + 1 : currIndex - 1];
         this.jumpTo(this.state.currentFrame + (forward ? 1 : -1), true);
-        if (delay > 0) await new Promise((res) => this.playbackTimeoutId = setTimeout2(() => res(0), clamp(0, delay, this.config.maxPlaybackDelay), this.signal));
+        if (e?.timedelta > 0) await new Promise((res) => this.playbackTimeoutId = setTimeout2(() => res(0), Math.min(e.timedelta, this.config.maxPlaybackDelay), this.signal));
       }
       this.state.paused = true;
     }
@@ -1462,21 +1454,24 @@ var sia = (() => {
     // TELEMETRY & I/O (Session Import/Export)
     // ===========================================================================
     /** Exports the current session as a JSON string. */
-    export() {
-      return JSON.stringify(this.state);
+    export(replacer, space) {
+      try {
+        return JSON.stringify(this.state, replacer, space);
+      } catch (e) {
+        return this.rtr.log(`[Reactor ${this.name} Plug] Failed to export session`), "";
+      }
     }
     /** Imports a session from a JSON string, allowing you to replay or analyze past states. */
     import(json) {
       try {
         setAny(this.state, "*", JSON.parse(json));
+        this.lastTimestamp = performance.now();
         const resume = !this.state.paused, target = this.state.currentFrame;
         this.state.paused = false;
-        setAny(this.rtr.core, "*", deepClone(this.state.initialState, this.rtr.config));
-        this.rtr.tick();
-        this.state.currentFrame = 0;
-        this.jumpTo(target), resume && this.play();
+        setAny(this.rtr.core, "*", deepClone(this.state.initialState, this.rtr.config)), this.rtr.tick();
+        this.state.currentFrame = 0, this.jumpTo(target), resume && this.play();
       } catch (e) {
-        this.rtr.log(`[Reactor ${this.name} Plug] Failed to load session`, "error");
+        this.rtr.log(`[Reactor ${this.name} Plug] Failed to load session`);
       }
     }
   };
@@ -1663,41 +1658,16 @@ var sia = (() => {
      */
     constructor(time, build = {}) {
       this.time = time;
-      this.config = reactive({ container: document.body, color: "", startOpen: false, devOnly: true, title: `Time Travel Overlay ${this.index = ++_TimeTravelOverlay.count}`, ...build });
+      this.config = reactive({ title: `Time Travel Overlay ${this.index = ++_TimeTravelOverlay.count}`, ...build });
       this.state.open = !!this.config.startOpen;
-      const host = createEl("div", { className: "tt-overlay-host" });
-      const toggle = createEl("button", { className: "tt-overlay-toggle", type: "button", onclick: () => this.state.open = !this.state.open });
-      const panel = createEl("aside", { className: "tt-overlay", ariaLabel: "time travel overlay" });
-      const title = createEl("div", { className: "title" });
-      const frame = createEl("span", { className: "muted" });
-      const history = createEl("span", { className: "muted" });
-      const paused = createEl("span", { className: "muted" });
-      const clrHistory = createEl("button", { textContent: `Clear History${formatKeyForDisplay(keys.shortcuts.clrHistory)}`, ariaKeyShortcuts: parseForARIAKS(keys.shortcuts.clrHistory, false), onclick: () => (this.time.clear(), this.state.import = "") });
-      const undo = createEl("button", { textContent: `Undo${formatKeyForDisplay(keys.shortcuts.undo[0])}`, ariaKeyShortcuts: parseForARIAKS(keys.shortcuts.undo, false), onclick: this.time.undo });
-      const redo = createEl("button", { textContent: `Redo${formatKeyForDisplay(keys.shortcuts.redo[0])}`, ariaKeyShortcuts: parseForARIAKS(keys.shortcuts.redo, false), onclick: this.time.redo });
-      const genesis = createEl("button", { textContent: `Genesis${formatKeyForDisplay(keys.shortcuts.genesis[0])}`, ariaKeyShortcuts: parseForARIAKS(keys.shortcuts.genesis, false), onclick: () => this.time.jumpTo(0) });
-      const playPause = createEl("button", { onclick: () => this.time[this.time.state.paused ? "play" : "pause"](), ariaKeyShortcuts: parseForARIAKS(keys.shortcuts.playPause, false) });
-      const rewind = createEl("button", { textContent: `Rewind${formatKeyForDisplay(keys.shortcuts.rewind)}`, ariaKeyShortcuts: parseForARIAKS(keys.shortcuts.rewind, false), onclick: this.time.rewind });
-      const range = createEl("input", { type: "range", min: "0", max: "0", value: "0", title: "time travel frame", ariaLabel: "time travel frame", oninput: () => this.time.jumpTo(Number(range.value)) });
-      const exp = createEl("button", { textContent: `Export${formatKeyForDisplay(keys.shortcuts.export)}`, ariaKeyShortcuts: parseForARIAKS(keys.shortcuts.export, false), onclick: () => this.state.import = this.time.export() });
-      const imp = createEl("button", { textContent: `Import${formatKeyForDisplay(keys.shortcuts.import)}`, ariaKeyShortcuts: parseForARIAKS(keys.shortcuts.import, false), onclick: () => this.state.import.trim().length && this.time.import(this.state.import) });
-      const clr = createEl("button", { textContent: `Clear${formatKeyForDisplay(keys.shortcuts.clear)}`, ariaKeyShortcuts: parseForARIAKS(keys.shortcuts.clear, false), onclick: () => this.state.import = "" });
-      const io = createEl("textarea", { className: "tt-io", placeholder: "timeline payload json", oninput: () => this.state.import = io.value });
-      const foot = createEl("p", { className: "tt-footnote", textContent: "Want this in your app? " });
-      const link = createEl("a", { target: "_blank", rel: "noreferrer noopener", textContent: "sia-reactor", href: "https://www.npmjs.com/package/sia-reactor" });
-      const box = createEl("div", { className: "tt-status-box" });
-      const status = createEl("div", { className: "tt-status-row" });
-      const row1 = createEl("div", { className: "tt-row" });
-      const row2 = createEl("div", { className: "tt-row" });
-      const row3 = createEl("div", { className: "tt-row" });
-      status.append((box.append(frame, history, paused), box), clrHistory);
-      panel.append(title, status, (row1.append(undo, redo, genesis), row1), (row2.append(playPause, rewind), row2), range, (row3.append(exp, imp, clr), row3), io, (foot.appendChild(link), foot));
+      const s = this.time.state, host = createEl("div", { className: "tt-overlay-host" }), toggle = createEl("button", { className: "tt-overlay-toggle", type: "button", onclick: () => this.state.open = !this.state.open }), panel = createEl("aside", { className: "tt-overlay", ariaLabel: "time travel overlay" }), title = createEl("div", { className: "title" }), frame = createEl("span", { className: "muted" }), clrHistory = createEl("button", { textContent: `Clear History${formatKeyForDisplay(keys.shortcuts.clrHistory)}`, ariaKeyShortcuts: parseForARIAKS(keys.shortcuts.clrHistory, false), onclick: () => (this.time.clear(), this.state.import = "") }), undo = createEl("button", { textContent: `Undo${formatKeyForDisplay(keys.shortcuts.undo[0])}`, ariaKeyShortcuts: parseForARIAKS(keys.shortcuts.undo, false), onclick: this.time.undo }), redo = createEl("button", { textContent: `Redo${formatKeyForDisplay(keys.shortcuts.redo[0])}`, ariaKeyShortcuts: parseForARIAKS(keys.shortcuts.redo, false), onclick: this.time.redo }), genesis = createEl("button", { textContent: `Genesis${formatKeyForDisplay(keys.shortcuts.genesis[0])}`, ariaKeyShortcuts: parseForARIAKS(keys.shortcuts.genesis, false), onclick: () => this.time.jumpTo(0) }), playPause = createEl("button", { onclick: () => this.time[s.paused ? "play" : "pause"](), ariaKeyShortcuts: parseForARIAKS(keys.shortcuts.playPause, false) }), rewind = createEl("button", { textContent: `Rewind${formatKeyForDisplay(keys.shortcuts.rewind)}`, ariaKeyShortcuts: parseForARIAKS(keys.shortcuts.rewind, false), onclick: this.time.rewind }), range = createEl("input", { type: "range", min: "0", max: "0", value: "0", title: "time travel frame", ariaLabel: "time travel frame", oninput: () => this.time.jumpTo(Number(range.value)) }), exp = createEl("button", { textContent: `Export${formatKeyForDisplay(keys.shortcuts.export)}`, ariaKeyShortcuts: parseForARIAKS(keys.shortcuts.export, false), onclick: () => this.state.import = this.time.export(null, 2) }), imp = createEl("button", { textContent: `Import${formatKeyForDisplay(keys.shortcuts.import)}`, ariaKeyShortcuts: parseForARIAKS(keys.shortcuts.import, false), onclick: () => this.state.import.trim().length && this.time.import(this.state.import) }), clr = createEl("button", { textContent: `Clear${formatKeyForDisplay(keys.shortcuts.clear)}`, ariaKeyShortcuts: parseForARIAKS(keys.shortcuts.clear, false), onclick: () => this.state.import = "" }), payload = createEl("textarea", { className: "tt-io", readOnly: true, placeholder: "current payload json", title: "current payload" }), io = createEl("textarea", { className: "tt-io", placeholder: "timeline payload json", oninput: () => this.state.import = io.value }), foot = createEl("p", { className: "tt-footnote", textContent: "Want this in your app? " }), link = createEl("a", { target: "_blank", rel: "noreferrer noopener", textContent: "sia-reactor", href: "https://www.npmjs.com/package/sia-reactor" }), box = createEl("div", { className: "tt-status-box" }), status = createEl("div", { className: "tt-status-row" }), row1 = createEl("div", { className: "tt-row" }), row2 = createEl("div", { className: "tt-row" }), row3 = createEl("div", { className: "tt-row" });
+      status.append((box.append(frame), box), clrHistory);
+      panel.append(title, status, (row1.append(undo, redo, genesis), row1), (row2.append(playPause, rewind), row2), payload, range, (row3.append(exp, imp, clr), row3), io, (foot.appendChild(link), foot));
       host.append(toggle, panel);
-      this.els = { host, toggle, panel, title, frame, history, paused, clrHistory, undo, redo, genesis, playPause, rewind, range, exp, imp, clr, io };
+      this.els = { host, toggle, panel, title, frame, clrHistory, undo, redo, genesis, playPause, rewind, range, exp, imp, clr, payload, io };
       this.keyup = (e) => {
-        if (!this.state.open) return;
-        const a = keyEventAllowed(e, keys);
-        a === "undo" ? this.time.undo() : a === "redo" ? this.time.redo() : a === "genesis" ? this.time.jumpTo(0) : a === "prevFrame" ? this.time.step(1, false) : a === "nextFrame" ? this.time.step(1, true) : a === "skipBwd" ? this.time.step(5, false) : a === "skipFwd" ? this.time.step(5, true) : a === "rewind" ? this.time.rewind() : a === "playPause" ? this.time[this.time.state.paused ? "play" : "pause"]() : a === "clrHistory" ? this.time.clear() : a === "closeOverlay" ? this.state.open = false : a === "export" ? this.state.import = this.time.export() : a === "import" ? this.state.import.trim().length && this.time.import(this.state.import) : a === "clear" && (this.state.import = "");
+        const a = this.state.open && keyEventAllowed(e, keys);
+        a === "undo" ? this.time.undo() : a === "redo" ? this.time.redo() : a === "genesis" ? this.time.jumpTo(0) : a === "prevFrame" ? this.time.step(1, false) : a === "nextFrame" ? this.time.step(1, true) : a === "skipBwd" ? this.time.step(5, false) : a === "skipFwd" ? this.time.step(5, true) : a === "rewind" ? this.time.rewind() : a === "playPause" ? this.time[s.paused ? "play" : "pause"]() : a === "clrHistory" ? this.time.clear() : a === "closeOverlay" ? this.state.open = false : a === "export" ? this.state.import = this.time.export() : a === "import" ? this.state.import.trim().length && this.time.import(this.state.import) : a === "clear" && (this.state.import = "");
       };
       window.addEventListener("keydown", this.keyup);
       const sync = [
@@ -1707,26 +1677,19 @@ var sia = (() => {
           const dock = getDock(this.config.container);
           if (host.parentNode !== dock) dock.appendChild(host);
         }),
-        effect(() => (toggle.textContent = `${this.state.open ? "Hide" : "Show"} ${this.config.title ?? ""}`, panel.hidden = !this.state.open)),
+        effect(() => toggle.textContent = `${(panel.hidden = !this.state.open) ? "Show" : "Hide"} ${title.textContent = this.config.title ?? ""}`),
+        effect(() => playPause.textContent = `${s.paused ? "Play" : "Pause"}${formatKeyForDisplay(keys.shortcuts.playPause)}`),
         effect(() => {
-          title.textContent = this.config.title ?? "";
-          frame.textContent = `Frame: ${this.time.state.currentFrame} / ${this.time.state.history.length}`;
-          history.textContent = `History: ${this.time.state.history.length}`;
-          paused.textContent = `Paused: ${this.time.state.paused ? "Yes" : "No"}`;
-          playPause.textContent = `${this.time.state.paused ? "Play" : "Pause"}${formatKeyForDisplay(keys.shortcuts.playPause)}`;
+          frame.textContent = `Frame: ${s.currentFrame} / ${s.history.length}`;
+          range.disabled = clrHistory.disabled = !s.history.length;
+          genesis.disabled = rewind.disabled = undo.disabled = !s.currentFrame;
+          playPause.disabled = redo.disabled = s.currentFrame >= s.history.length;
+          range.max = String(s.history.length);
+          range.value = String(Math.min(s.currentFrame, s.history.length));
+          payload.value = JSON.stringify(s.currentFrame ? s.history[s.currentFrame - 1] : { type: "genesis", value: s.initialState }, null, 2);
         }),
         effect(() => {
-          clrHistory.disabled = !this.time.state.history.length;
-          undo.disabled = this.time.state.currentFrame <= 0;
-          redo.disabled = this.time.state.currentFrame >= this.time.state.history.length;
-          genesis.disabled = this.time.state.currentFrame <= 0;
-          playPause.disabled = this.time.state.currentFrame === this.time.state.history.length;
-          rewind.disabled = !this.time.state.currentFrame;
-          range.max = String(this.time.state.history.length);
-          range.value = String(Math.min(this.time.state.currentFrame, this.time.state.history.length));
-          range.disabled = !this.time.state.history.length;
-          imp.disabled = !this.state.import.trim().length;
-          clr.disabled = !this.state.import.trim().length;
+          clr.disabled = imp.disabled = !this.state.import.trim().length;
           io.value !== this.state.import && (io.value = this.state.import);
         })
       ];

package/dist/{timeTravel-Bv_u5M1D.d.ts → timeTravel-B1vedDQc.d.ts}

@@ -1,21 +1,21 @@
-import { a as REvent, P as Paths, B as BaseReactorPlugin, b as Reactor } from './index-DCG3sacH.js';
+import { a as REvent, P as Paths, B as BaseReactorPlugin, b as Reactor } from './index-Oie9hhE8.js';
 
 /** The DNA of a specific moment in time, Records the 'Desire' (Intent) or the 'Fact' (State). */
 interface HistoryEntry {
-    /**  Was it a 'set' or a 'delete' surgery? */
-    type: REvent<any, any>["staticType"];
     /** The surgical address in the Reactor */
     path: string;
     /** The data payload at that moment */
     value: any;
     /** The "Undo" antidote (Previous value), if applicable */
     oldValue: any;
-    /** Did the key for the value exist on its parent object? */
-    hadKey: boolean;
+    /**  Was it a 'set' or a 'delete' surgery? */
+    type: REvent<any, any>["staticType"];
     /** Did the Power Line disapprove?; why? */
     rejected: string;
     /** For chronological re-enactment */
-    timestamp: number;
+    timedelta: number;
+    /** Did the key for the value exist on its parent object? */
+    hadKey: boolean;
 }
 interface TimeTravelConfig<T extends object = any> {
     /** Specific paths only, no "*"; instead don't pass anything */
@@ -26,10 +26,10 @@ interface TimeTravelConfig<T extends object = any> {
     maxPlaybackDelay: number;
 }
 interface TimeTravelState {
-    /** The "Timeline" of mutations (Chronological Log) */
-    history: HistoryEntry[];
     /** The "Genesis" snapshot (Raw Data) */
     initialState: any;
+    /** The "Timeline" of mutations (Chronological Log) */
+    history: HistoryEntry[];
     /** The manual playhead (Index in the Timeline) */
     currentFrame: number;
     /** Whether playback is currently paused (Automatic Replay) */
@@ -41,6 +41,7 @@ interface TimeTravelState {
  */
 declare class TimeTravelPlugin<T extends object = any> extends BaseReactorPlugin<T, TimeTravelConfig<T>, TimeTravelState> {
     static readonly plugName = "timeTravel";
+    protected lastTimestamp: number;
     protected playbackTimeoutId: number;
     constructor(config?: Partial<TimeTravelConfig<T>>, rtr?: Reactor<T>);
     wire(): void;
@@ -66,7 +67,7 @@ declare class TimeTravelPlugin<T extends object = any> extends BaseReactorPlugin
     /** Pauses the live VCR playback. */
     pause: () => void;
     /** Exports the current session as a JSON string. */
-    export(): string;
+    export(replacer?: ((this: any, key: string, value: any) => any) | (number | string)[] | null, space?: string | number): string;
     /** Imports a session from a JSON string, allowing you to replay or analyze past states. */
     import(json: string): void;
 }