sia-reactor 0.0.19 → 0.0.21

package/dist/super.global.js

@@ -18,7 +18,7 @@ var sia = (() => {
   };
   var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
-  // src/super.ts
+  // src/ts/super.ts
   var super_exports = {};
   __export(super_exports, {
     CTX: () => CTX,
@@ -56,8 +56,10 @@ var sia = (() => {
     volatile: () => volatile
   });
 
-  // src/core/consts.ts
+  // src/ts/core/consts.ts
   var CTX = {
+    /** Flag indicating whether the application is running in development mode. */
+    isDevEnv: "undefined" !== typeof process ? process.env.NODE_ENV !== "production" : true,
     /** active `Autotracker` instance, override for automatic dependency collection on `Reactor` traps. */
     autotracker: null
   };
@@ -76,7 +78,7 @@ var sia = (() => {
   var NOOP = () => {
   };
 
-  // src/utils/obj.ts
+  // src/ts/utils/obj.ts
   var arrRx = /^([^\[\]]+)\[(\d+)\]$/;
   function isObj(obj, arraycheck = true) {
     return "object" === typeof obj && obj !== null && (arraycheck ? !Array.isArray(obj) : true);
@@ -93,10 +95,10 @@ var sia = (() => {
   function getAny(source, key, separator = ".", keyFunc) {
     if (key === "*") return source;
     if (!key.includes(separator)) return source[keyFunc ? keyFunc(key) : key];
-    const keys = key.split(separator);
+    const keys2 = key.split(separator);
     let currObj = source;
-    for (let i = 0, len = keys.length; i < len; i++) {
-      const key2 = keyFunc ? keyFunc(keys[i]) : keys[i], match = key2.includes("[") && key2.match(arrRx);
+    for (let i = 0, len = keys2.length; i < len; i++) {
+      const key2 = keyFunc ? keyFunc(keys2[i]) : keys2[i], match = key2.includes("[") && key2.match(arrRx);
       if (match) {
         const [, key3, iStr] = match;
         if (!Array.isArray(currObj[key3]) || !(key3 in currObj)) return void 0;
@@ -111,9 +113,9 @@ var sia = (() => {
   function setAny(target, key, value, separator = ".", keyFunc) {
     if (key === "*") return Object.assign(target, value);
     if (!key.includes(separator)) return void (target[keyFunc ? keyFunc(key) : key] = value);
-    const keys = key.split(separator);
-    for (let currObj = target, i = 0, len = keys.length; i < len; i++) {
-      const key2 = keyFunc ? keyFunc(keys[i]) : keys[i], match = key2.includes("[") && key2.match(arrRx);
+    const keys2 = key.split(separator);
+    for (let currObj = target, i = 0, len = keys2.length; i < len; i++) {
+      const key2 = keyFunc ? keyFunc(keys2[i]) : keys2[i], match = key2.includes("[") && key2.match(arrRx);
       if (match) {
         const [, key3, iStr] = match;
         if (!Array.isArray(currObj[key3])) currObj[key3] = [];
@@ -127,14 +129,14 @@ var sia = (() => {
   }
   function deleteAny(target, key, separator = ".", keyFunc) {
     if (key === "*") {
-      const keys2 = Object.keys(target);
-      for (let i = 0, len = keys2.length; i < len; i++) delete target[keys2[i]];
+      const keys3 = Object.keys(target);
+      for (let i = 0, len = keys3.length; i < len; i++) delete target[keys3[i]];
       return;
     }
     if (!key.includes(separator)) return void delete target[keyFunc ? keyFunc(key) : key];
-    const keys = key.split(separator);
-    for (let currObj = target, i = 0, len = keys.length; i < len; i++) {
-      const key2 = keyFunc ? keyFunc(keys[i]) : keys[i], match = key2.includes("[") && key2.match(arrRx);
+    const keys2 = key.split(separator);
+    for (let currObj = target, i = 0, len = keys2.length; i < len; i++) {
+      const key2 = keyFunc ? keyFunc(keys2[i]) : keys2[i], match = key2.includes("[") && key2.match(arrRx);
       if (match) {
         const [, key3, iStr] = match;
         if (!Array.isArray(currObj[key3]) || !(key3 in currObj)) return;
@@ -150,9 +152,9 @@ var sia = (() => {
   function inAny(source, key, separator = ".", keyFunc) {
     if (key === "*") return true;
     if (!key.includes(separator)) return key in source;
-    const keys = key.split(separator);
-    for (let currObj = source, i = 0, len = keys.length; i < len; i++) {
-      const key2 = keyFunc ? keyFunc(keys[i]) : keys[i], match = key2.includes("[") && key2.match(arrRx);
+    const keys2 = key.split(separator);
+    for (let currObj = source, i = 0, len = keys2.length; i < len; i++) {
+      const key2 = keyFunc ? keyFunc(keys2[i]) : keys2[i], match = key2.includes("[") && key2.match(arrRx);
       if (match) {
         const [, key3, iStr] = match;
         if (!Array.isArray(currObj[key3]) || !(key3 in currObj)) return false;
@@ -192,25 +194,25 @@ var sia = (() => {
     if (!canHandle(obj, config, false)) return obj;
     const clone = config.preserveContext ? Object.create(Object.getPrototypeOf(obj)) : Array.isArray(obj) ? [] : {};
     seen.set(obj, clone);
-    const keys = config.preserveContext ? Reflect.ownKeys(obj) : Object.keys(obj);
-    for (let i = 0, len = keys.length; i < len; i++) clone[keys[i]] = deepClone(obj[keys[i]], config, seen);
+    const keys2 = config.preserveContext ? Reflect.ownKeys(obj) : Object.keys(obj);
+    for (let i = 0, len = keys2.length; i < len; i++) clone[keys2[i]] = deepClone(obj[keys2[i]], config, seen);
     return clone;
   }
   function nuke(target) {
     let proto = target;
     while (proto && proto !== Object.prototype) {
-      const keys = Object.getOwnPropertyNames(proto);
-      for (let i = 0, len = keys.length; i < len; i++) {
-        if (keys[i] === "constructor") continue;
-        const desc = Object.getOwnPropertyDescriptor(proto, keys[i]);
+      const keys2 = Object.getOwnPropertyNames(proto);
+      for (let i = 0, len = keys2.length; i < len; i++) {
+        if (keys2[i] === "constructor") continue;
+        const desc = Object.getOwnPropertyDescriptor(proto, keys2[i]);
         if (desc && ("function" === typeof desc.value || desc.get || desc.set)) continue;
-        proto[keys[i]] = null;
+        proto[keys2[i]] = null;
       }
       proto = Object.getPrototypeOf(proto);
     }
   }
 
-  // src/core/event.ts
+  // src/ts/core/event.ts
   var ReactorEvent = class _ReactorEvent {
     /** No active propagation phase. */
     static NONE = 0;
@@ -333,7 +335,7 @@ var sia = (() => {
     }
   };
 
-  // src/core/reactor.ts
+  // src/ts/core/reactor.ts
   var Reactor = class {
     log = NOOP;
     core;
@@ -361,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;
@@ -394,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, keyExisted: 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);
             }
           }
@@ -405,7 +407,7 @@ var sia = (() => {
         },
         set: (object, key2, value, receiver) => {
           let unchanged, safeValue, safeOldValue, terminated = false;
-          const keyStr = String(key2), fullPath = path ? path + "." + keyStr : keyStr, paths = this.config.lineageTracing ? this.trace(object, keyStr) : fullPath, loopLen = this.config.lineageTracing ? paths.length : 1, oldValue = !this.config.preserveContext ? object[key2] : Reflect.get(object, key2, receiver), keyExisted = !this.config.preserveContext ? key2 in object : Reflect.has(object, key2);
+          const keyStr = String(key2), fullPath = path ? path + "." + keyStr : keyStr, paths = this.config.lineageTracing ? this.trace(object, keyStr) : fullPath, loopLen = this.config.lineageTracing ? paths.length : 1, oldValue = !this.config.preserveContext ? object[key2] : Reflect.get(object, key2, receiver), hadKey = !this.config.preserveContext ? key2 in object : Reflect.has(object, key2);
           this.log(`\u270F\uFE0F [Reactor \`set\` Trap] Initiated for "${keyStr}" on "${paths}"`), CTX.autotracker?.track(fullPath, this, true);
           if (this.config.referenceTracking || !indiffable) {
             safeOldValue = oldValue?.[RAW] || oldValue;
@@ -419,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, keyExisted, 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;
             }
@@ -436,14 +438,14 @@ 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, keyExisted, 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;
         },
         deleteProperty: (object, key2) => {
           let value, receiver = this.proxyCache.get(object), terminated = false;
-          const keyStr = String(key2), fullPath = path ? path + "." + keyStr : keyStr, paths = this.config.lineageTracing ? this.trace(object, keyStr) : fullPath, loopLen = this.config.lineageTracing ? paths.length : 1, oldValue = !this.config.preserveContext ? object[key2] : Reflect.get(object, key2, receiver), keyExisted = !this.config.preserveContext ? key2 in object : Reflect.has(object, key2);
+          const keyStr = String(key2), fullPath = path ? path + "." + keyStr : keyStr, paths = this.config.lineageTracing ? this.trace(object, keyStr) : fullPath, loopLen = this.config.lineageTracing ? paths.length : 1, oldValue = !this.config.preserveContext ? object[key2] : Reflect.get(object, key2, receiver), hadKey = !this.config.preserveContext ? key2 in object : Reflect.has(object, key2);
           this.log(`\u{1F5D1}\uFE0F [Reactor \`deleteProperty\` Trap] Initiated for "${keyStr}" on "${paths}"`), CTX.autotracker?.track(fullPath, this, true);
           if (this.config.deleteProperty) terminated = (value = this.config.deleteProperty(object, key2, oldValue, receiver, paths)) === TERMINATOR;
           if (this.deleters) {
@@ -451,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, keyExisted, 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;
@@ -467,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, keyExisted, 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;
         },
@@ -494,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;
@@ -586,7 +588,7 @@ var sia = (() => {
     fire([path, object, value], e, isCapture, cords = this.listeners.get(path)) {
       if (!cords) return;
       e.type = path !== e.target.path ? "update" : e.staticType;
-      e.currentTarget = { path, value, oldValue: e.type !== "update" ? e.target.oldValue : void 0, key: e.type !== "update" ? path : path.slice(path.lastIndexOf(".") + 1) || "", keyExisted: e.type !== "update" ? e.target.keyExisted : true, object };
+      e.currentTarget = { path, value, oldValue: e.type !== "update" ? e.target.oldValue : void 0, key: e.type !== "update" ? path : path.slice(path.lastIndexOf(".") + 1) || "", hadKey: e.type !== "update" ? e.target.hadKey : true, object };
       for (let i = 0, len = cords.length, tDepth; i < len; i++) {
         if (e.immediatePropagationStopped) break;
         if (cords[i].capture !== isCapture) continue;
@@ -641,24 +643,23 @@ var sia = (() => {
     }
     getContext(path) {
       const lastDot = path.lastIndexOf("."), value = getAny(this.core, path), object = lastDot === -1 ? this.core : getAny(this.core, path.slice(0, lastDot));
-      return { path, value, key: path.slice(lastDot + 1) || "", keyExisted: true, object };
+      return { path, value, key: path.slice(lastDot + 1) || "", hadKey: true, object };
     }
     bindSignal(cord, sig) {
       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 keys = this.config.preserveContext ? Reflect.ownKeys(obj) : Object.keys(obj);
-      for (let i = 0, len = keys.length; i < len; i++) clone[keys[i]] = this.cloned(obj[keys[i]], raw, seen);
+      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);
       if (!raw && this.config.smartCloning) this.snapCache.set(obj, clone), obj[SSVERSION] = version;
       return clone;
     }
@@ -839,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.
@@ -864,9 +854,9 @@ var sia = (() => {
      */
     cascade({ type, currentTarget: { path, value: news, oldValue: olds } }, objectSafe = true) {
       if (type !== "set" && type !== "delete" || !canHandle(news, this.config) || (objectSafe ? !canHandle(olds, this.config) : false)) return;
-      const obj = objectSafe ? mergeObjs(olds, news) : news, keys = Object.keys(obj);
+      const obj = objectSafe ? mergeObjs(olds, news) : news, keys2 = Object.keys(obj);
       this.isCascading = true;
-      for (let i = 0, len = keys.length; i < len; i++) setAny(this.core, path === "*" ? keys[i] : path + "." + keys[i], obj[keys[i]]);
+      for (let i = 0, len = keys2.length; i < len; i++) setAny(this.core, path === "*" ? keys2[i] : path + "." + keys2[i], obj[keys2[i]]);
       this.isCascading = false;
     }
     /**
@@ -902,11 +892,11 @@ var sia = (() => {
     }
   };
 
-  // src/core/mixins.ts
-  var methods = ["tick", "stall", "nostall", "get", "gonce", "noget", "set", "sonce", "noset", "delete", "donce", "nodelete", "watch", "wonce", "nowatch", "on", "once", "off", "cascade", "snapshot", "reset", "destroy"];
+  // src/ts/core/mixins.ts
+  var methods = ["tick", "stall", "nostall", "get", "gonce", "noget", "set", "sonce", "noset", "delete", "donce", "nodelete", "watch", "wonce", "nowatch", "on", "once", "off", "snapshot", "cascade", "plugIn", "reset", "destroy"];
   function reactive(target, build, preferences = NIL) {
     if ("__Reactor__" in target) return target;
-    const descriptors = {}, rtr = target instanceof Reactor ? target : new Reactor(target, build), locks = { enumerable: false, configurable: true, writable: false }, hasAffix = !!(preferences.prefix || preferences.suffix);
+    const descriptors = {}, rtr = getReactor(target, true, build), locks = { enumerable: false, configurable: true, writable: false }, hasAffix = !!(preferences.prefix || preferences.suffix);
     for (let i = 0, len = methods.length; i < len; i++) {
       let key = methods[i];
       if (hasAffix) (preferences.whitelist?.includes(key) ?? true) && (key = `${preferences.prefix || ""}${key}${preferences.suffix || ""}`);
@@ -943,6 +933,9 @@ var sia = (() => {
   function isVolatile(target) {
     return !!getRaw(target)[INDIFFABLE];
   }
+  function getReactor(target, create = false, build) {
+    return (target instanceof Reactor ? target : target.__Reactor__) || (create ? new Reactor(target, build) : void 0);
+  }
   function getRaw(target) {
     return target?.[RAW] || target;
   }
@@ -953,13 +946,15 @@ var sia = (() => {
     return getRaw(target)[SSVERSION] || 0;
   }
 
-  // src/utils.ts
+  // src/ts/utils.ts
   var utils_exports = {};
   __export(utils_exports, {
+    assignEl: () => assignEl,
     bindAllMethods: () => bindAllMethods,
     canHandle: () => canHandle,
     clamp: () => clamp,
     cleanKeyCombo: () => cleanKeyCombo,
+    createEl: () => createEl,
     deepClone: () => deepClone,
     deleteAny: () => deleteAny,
     formatKeyForDisplay: () => formatKeyForDisplay,
@@ -988,12 +983,12 @@ var sia = (() => {
     stringifyKeyEvent: () => stringifyKeyEvent
   });
 
-  // src/utils/num.ts
+  // src/ts/utils/num.ts
   function clamp(min = 0, val, max = Infinity) {
     return Math.min(Math.max(val, min), max);
   }
 
-  // src/utils/fn.ts
+  // src/ts/utils/fn.ts
   function setTimeout2(handler, timeout, ...args) {
     const sig = args[0] instanceof AbortSignal ? args.shift() : void 0;
     if (sig?.aborted) return -1;
@@ -1015,7 +1010,7 @@ var sia = (() => {
     return sig.addEventListener("abort", kill, { once: true }), id;
   }
 
-  // src/utils/methd.ts
+  // src/ts/utils/methd.ts
   function onAllMethods(owner, callback, skipOwn = true, nested = false) {
     let proto = owner;
     while (proto && proto !== Object.prototype) {
@@ -1048,7 +1043,7 @@ var sia = (() => {
     });
   }
 
-  // src/utils/keys.ts
+  // src/ts/utils/keys.ts
   function parseKeyCombo(combo) {
     const parts = cleanKeyCombo(combo).toLowerCase().split("+");
     return { ctrlKey: parts.includes("ctrl"), shiftKey: parts.includes("shift"), altKey: parts.includes("alt"), metaKey: parts.includes("meta") || parts.includes("cmd"), key: parts.find((p) => !["ctrl", "shift", "alt", "meta", "cmd"].includes(p)) || "" };
@@ -1111,7 +1106,24 @@ var sia = (() => {
     return (formatted && !Array.isArray(s) ? s : formatKeyForDisplay(s)).toLowerCase().replace(/[()]/g, "").replace(/\bor\b/g, " ").replace(/\w+/g, (k) => m[k] || k).replace(/\s+/g, " ").trim();
   }
 
-  // src/plugins.ts
+  // src/ts/utils/dom.ts
+  function createEl(tag, props, dataset, styles, el = tag ? document?.createElement(tag) : null) {
+    return assignEl(el, props, dataset, styles), el;
+  }
+  function assignEl(el, props, dataset, styles) {
+    if (!el) return;
+    if (props) {
+      for (const k of Object.keys(props)) if (props[k] !== void 0) el[k] = props[k];
+    }
+    if (dataset) {
+      for (const k of Object.keys(dataset)) if (dataset[k] !== void 0) el.dataset[k] = String(dataset[k]);
+    }
+    if (styles) {
+      for (const k of Object.keys(styles)) if (styles[k] !== void 0) el.style[k] = styles[k];
+    }
+  }
+
+  // src/ts/plugins.ts
   var plugins_exports = {};
   __export(plugins_exports, {
     BaseReactorPlugin: () => BaseReactorPlugin,
@@ -1127,7 +1139,7 @@ var sia = (() => {
     TimeTravelPlugin: () => TimeTravelPlugin
   });
 
-  // src/plugins/base.ts
+  // src/ts/plugins/base.ts
   var BaseReactorPlugin = class {
     static plugName;
     get name() {
@@ -1165,7 +1177,7 @@ var sia = (() => {
     // `()=>{}`: needs to be bounded even before initialization
   };
 
-  // src/utils/store.ts
+  // src/ts/utils/store.ts
   var BaseStorageAdapter = class {
     static name;
     config;
@@ -1299,7 +1311,7 @@ var sia = (() => {
   };
   var INDEXED_DB_ADAPTER_BUILD = { dbName: "REACTOR_IDB", stores: ["VAULT"], version: 1, onidb: NOOP, onupgradeneeded: NOOP, onversionchange: NOOP, onsuccess: NOOP, onerror: NOOP, onblocked: NOOP };
 
-  // src/plugins/persist.ts
+  // src/ts/plugins/persist.ts
   var PersistPlugin = class extends BaseReactorPlugin {
     static plugName = "persist";
     adapter;
@@ -1352,12 +1364,13 @@ var sia = (() => {
   };
   var PERSIST_PLUGIN_BUILD = { disabled: false, key: "REACTOR_STORE", throttle: 2500, useSnapshot: false };
 
-  // src/plugins/timeTravel.ts
+  // 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)
@@ -1365,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();
@@ -1378,16 +1392,17 @@ 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), keyExisted: e.target.keyExisted, 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() {
       this.pause();
       this.playbackTimeoutId = -1;
-      this.state.history = [];
-      this.state.currentFrame = 0;
+      this.state.history.length = this.state.currentFrame = 0;
       this.state.initialState = this.rtr.snapshot();
+      this.lastTimestamp = performance.now();
     }
     // ===========================================================================
     // THE TIME MACHINE (Manual Controls)
@@ -1400,7 +1415,7 @@ var sia = (() => {
         const e = this.state.history[forward ? this.state.currentFrame : this.state.currentFrame - 1];
         if (!e) break;
         if (forward) e.type === "delete" ? deleteAny(this.rtr.core, e.path) : setAny(this.rtr.core, e.path, deepClone(e.value, this.rtr.config));
-        else !e.keyExisted ? deleteAny(this.rtr.core, e.path) : setAny(this.rtr.core, e.path, deepClone(e.oldValue, this.rtr.config));
+        else !e.hadKey ? deleteAny(this.rtr.core, e.path) : setAny(this.rtr.core, e.path, deepClone(e.oldValue, this.rtr.config));
         forward ? this.state.currentFrame++ : this.state.currentFrame--;
         if (e.rejected) this.rtr.log(`[Reactor ${this.name} Plug] ${forward ? "Replaying" : "Reversing"} REJECTED intent at "${e.path}"`);
       }
@@ -1423,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;
     }
@@ -1439,35 +1454,39 @@ 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`);
       }
     }
   };
   var TIME_TRAVEL_PLUGIN_BUILD = { maxPlaybackDelay: 2e3 };
 
-  // src/adapters/vanilla.ts
+  // src/ts/adapters/vanilla.ts
   var vanilla_exports = {};
   __export(vanilla_exports, {
     Autotracker: () => Autotracker,
+    TimeTravelOverlay: () => TimeTravelOverlay,
     effect: () => effect,
     withTracker: () => withTracker
   });
 
-  // src/adapters/autotracker.ts
+  // src/ts/adapters/autotracker.ts
   var Autotracker = class {
     proxy;
     deps = /* @__PURE__ */ new Map();
@@ -1609,7 +1628,7 @@ var sia = (() => {
     }
   }
 
-  // src/adapters/vanilla/effect.ts
+  // src/ts/adapters/vanilla/effect.ts
   function effect(callback, options) {
     const atrkr = new Autotracker();
     let destroyed = false;
@@ -1619,7 +1638,83 @@ var sia = (() => {
     return () => (destroyed = true, atrkr.destroy());
   }
 
-  // src/super.ts
+  // src/ts/adapters/vanilla/TimeTravelOverlay.ts
+  var keys = {
+    overrides: ["Ctrl+z", "Cmd+z", "Ctrl+y", "Cmd+y", "Ctrl+Shift+z", "Cmd+Shift+z", "Ctrl+g", "Cmd+g", ",", ".", "ArrowLeft", "ArrowRight", "Space", "Alt+Space", "Escape", "Delete", "e", "i", "c"],
+    shortcuts: { undo: ["Ctrl+z", "Cmd+z"], redo: ["Ctrl+y", "Cmd+y", "Ctrl+Shift+z", "Cmd+Shift+z"], genesis: ["Ctrl+g", "Cmd+g"], prevFrame: ",", nextFrame: ".", skipBwd: "ArrowLeft", skipFwd: "ArrowRight", playPause: "Space", rewind: "Alt+Space", closeOverlay: "Escape", clrHistory: "Delete", export: "e", import: "i", clear: "c" }
+  };
+  var TimeTravelOverlay = class _TimeTravelOverlay {
+    static count = 0;
+    index = _TimeTravelOverlay.count;
+    config;
+    state = reactive({ open: false, import: "" });
+    time;
+    els;
+    clups = [];
+    keyup;
+    /** Creates a docked TimeTravel overlay bound to a plugin instance.
+     * @param time TimeTravel plugin instance that owns timeline operations.
+     * @param build Optional initial overlay config overrides.
+     */
+    constructor(time, build = {}) {
+      this.time = time;
+      this.config = reactive({ title: `Time Travel Overlay ${this.index = ++_TimeTravelOverlay.count}`, ...build });
+      this.state.open = !!this.config.startOpen;
+      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, clrHistory, undo, redo, genesis, playPause, rewind, range, exp, imp, clr, payload, io };
+      this.keyup = (e) => {
+        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 = [
+        effect(() => this.config.color ? host.style.setProperty("--sia-tt-color", this.config.color) : host.style.removeProperty("--sia-tt-color")),
+        effect(() => {
+          if (this.config.devOnly && !CTX.isDevEnv) return void host.remove();
+          const dock = getDock(this.config.container);
+          if (host.parentNode !== dock) dock.appendChild(host);
+        }),
+        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(() => {
+          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(() => {
+          clr.disabled = imp.disabled = !this.state.import.trim().length;
+          io.value !== this.state.import && (io.value = this.state.import);
+        })
+      ];
+      this.clups.push(...sync);
+    }
+    destroy() {
+      this.clups.forEach((fn) => fn());
+      this.keyup && window.removeEventListener("keydown", this.keyup);
+      this.els.host.remove();
+      nuke(this), --_TimeTravelOverlay.count;
+    }
+  };
+  function getDirChild(parent, className) {
+    for (const child of parent.children) if (child instanceof HTMLElement && child.classList.contains(className)) return child;
+  }
+  function getDock(container) {
+    const host = container && container !== document.documentElement ? container : document.body;
+    if (host !== document.body && getComputedStyle(host).position === "static") host.style.position = "relative";
+    const layer = getDirChild(host, "tt-overlay-layer") || createEl("div", { className: "tt-overlay-layer" }, void 0, { position: host === document.body ? "fixed" : "absolute" });
+    if (layer.parentElement !== host) host.appendChild(layer);
+    const dock = getDirChild(layer, "tt-overlay-dock") || createEl("div", { className: "tt-overlay-dock" });
+    return dock.parentElement !== layer && layer.appendChild(dock), dock;
+  }
+
+  // src/ts/super.ts
   var adapters = { vanilla: vanilla_exports };
   return __toCommonJS(super_exports);
 })();