sia-reactor 0.0.21 → 0.0.22

package/dist/adapters/react.cjs

@@ -43,7 +43,9 @@ var useISOLayoutEffect = "undefined" !== typeof window ? import_react.useLayoutE
 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. */
+  /** Flag indicating whether a cascade is currently ongoing so reactors can allow all writes. */
+  isCascading: false,
+  /** Active `Autotracker` instance, override for automatic dependency collection on `Reactor` traps. */
   autotracker: null
 };
 var RAW = /* @__PURE__ */ Symbol.for("S.I.A_RAW");
@@ -55,7 +57,6 @@ var VERSION = /* @__PURE__ */ Symbol.for("S.I.A_VERSION");
 var SSVERSION = /* @__PURE__ */ Symbol.for("S.I.A_SNAPSHOT_VERSION");
 var RTR_BATCH = "undefined" !== typeof window ? ("undefined" !== typeof queueMicrotask ? queueMicrotask : setTimeout).bind(window) : "undefined" !== typeof process && process.nextTick ? process.nextTick : setTimeout;
 var RTR_LOG = console.log.bind(console, "[S.I.A Reactor]");
-var EVT_WARN = console.warn.bind(console, "[S.I.A Event]");
 var EVT_OPTS = { LISTENER: ["capture", "depth", "once", "signal", "immediate"], MEDIATOR: ["lazy", "signal", "immediate"] };
 var NIL = Object.freeze({});
 var NOOP = () => {
@@ -154,10 +155,6 @@ function inAny(source, key, separator = ".", keyFunc) {
 function parseEvtOpts(options, opts, boolOpt = opts[0], result = {}) {
   return Object.assign(result, "boolean" === typeof options ? { [boolOpt]: options } : options), result;
 }
-function mergeObjs(o1 = {}, o2 = {}) {
-  const merged = { ...o1 || {}, ...o2 || {} };
-  return Object.keys(merged).forEach((k) => isObj(o1?.[k]) && isObj(o2?.[k]) && (merged[k] = mergeObjs(o1[k], o2[k]))), merged;
-}
 function getTrailRecords(obj, path, reverse = false) {
   const parts = path.split("."), chain = [["*", obj, obj]];
   for (let acc = "", currObj = obj, i = 0, len = parts.length; i < len; i++) chain.push([acc += (i ? "." : "") + parts[i], currObj, currObj = currObj?.[parts[i]]]);
@@ -200,35 +197,34 @@ var ReactorEvent = class _ReactorEvent {
   staticType;
   /** Original event target context. */
   target;
-  /** Root reactive object for this event wave. */
+  /** Root reactive object for this event instance wave. */
   root;
-  /** Original target path for this event wave. */
+  /** Original target path for this event instance wave. */
   path;
   /** Current value at the event target path. */
   value;
   /** Previous value at the event target path. */
   oldValue;
-  /** Whether resolve/reject intent semantics are allowed for this event. */
+  /** Whether resolve/reject intent semantics are allowed for this event instance. */
   rejectable;
-  /** Whether this event wave can bubble back up to ancestors or just capture down. */
+  /** Whether this event instance wave can bubble back up to ancestors or just capture down. */
   bubbles;
   /**
-   * `DOMHighResTimeStamp` for this event payload for native event parity and accuracy.
+   * `DOMHighResTimeStamp` for this event instance payload for native event parity and accuracy.
    * Enable `eventTimeStamps` option, then use this over custom timestamps in listeners for accuracy.
    * */
   timestamp;
-  _warn = NOOP;
+  /** The `Reactor` instance that dispatched this event instance. */
+  reactor;
   _resolved = "";
   _rejected = "";
   _propagationStopped = false;
   _immediatePropagationStopped = false;
   /**
    * @param payload Source payload for this event instance.
-   * @param bubbles Whether bubbling is enabled for this wave.
-   * @param canWarn Whether warning output is enabled.
-   * @param canStamp Whether timestamping is enabled.
+   * @param reactor The `Reactor` instance creating this event instance.
    */
-  constructor(payload, bubbles = false, canStamp = false, canWarn = true) {
+  constructor(payload, reactor) {
     this.staticType = this.type = payload.type;
     this.target = payload.target;
     this.currentTarget = payload.currentTarget;
@@ -237,9 +233,9 @@ var ReactorEvent = class _ReactorEvent {
     this.value = payload.target.value;
     this.oldValue = payload.target.oldValue;
     this.rejectable = payload.rejectable;
-    this.bubbles = bubbles;
-    if (canStamp) this.timestamp = performance.now();
-    if (canWarn) this._warn = EVT_WARN;
+    this.bubbles = !!reactor.config.eventBubbling;
+    if (reactor.config.eventTimeStamps) this.timestamp = performance.now();
+    this.reactor = reactor;
   }
   /** Whether propagation has been stopped. */
   get propagationStopped() {
@@ -269,9 +265,9 @@ var ReactorEvent = class _ReactorEvent {
    * @example e.resolve("API Load successful"); // message
    */
   resolve(message) {
-    if (!this.rejectable) return this._warn(`[ReactorEvent] Ignored resolve() call on a non-rejectable ${this.staticType} at "${this.path}"`);
-    if (this.eventPhase !== _ReactorEvent.CAPTURING_PHASE) this._warn(`[ReactorEvent] Resolving an intent on ${this.staticType} at "${this.path}" outside of the capture phase is unadvised.`);
-    if (this.rejectable) this._resolved = message || `Could ${this.staticType} intended value at "${this.path}"`;
+    if (!this.rejectable) return this.reactor.log(`[ReactorEvent] Ignored \`resolve()\` call on a non-rejectable ${this.staticType} at "${this.path}"`);
+    if (this.eventPhase !== _ReactorEvent.CAPTURING_PHASE) this.reactor.log(`[ReactorEvent] Resolving an intent on ${this.staticType} at "${this.path}" outside of the capture phase is unadvised.`);
+    if (this.rejectable) this.reactor.log(`[ReactorEvent] ${this._resolved = message || `Could ${this.staticType} intended value at "${this.path}"`}`);
   }
   /** Rejection reason for rejectable events. */
   get rejected() {
@@ -284,9 +280,9 @@ var ReactorEvent = class _ReactorEvent {
    * @example e.resolve("User is not logged in"); // reason
    */
   reject(reason) {
-    if (!this.rejectable) return this._warn(`[ReactorEvent] Ignored reject() call on a non-rejectable ${this.staticType} at "${this.path}"`);
-    if (this.eventPhase !== _ReactorEvent.CAPTURING_PHASE) this._warn(`[ReactorEvent] Rejecting an intent on ${this.staticType} at "${this.path}" outside of the capture phase is unadvised.`);
-    if (this.rejectable) this._rejected = reason || `Couldn't ${this.staticType} intended value at "${this.path}"`;
+    if (!this.rejectable) return this.reactor.log(`[ReactorEvent] Ignored \`reject()\` call on a non-rejectable ${this.staticType} at "${this.path}"`);
+    if (this.eventPhase !== _ReactorEvent.CAPTURING_PHASE) this.reactor.log(`[ReactorEvent] Rejecting an intent on ${this.staticType} at "${this.path}" outside of the capture phase is unadvised.`);
+    if (this.rejectable) this.reactor.log(`[ReactorEvent] ${this._rejected = reason || `Couldn't ${this.staticType} intended value at "${this.path}"`}`);
   }
   /**
    * Returns event path values from target to root.
@@ -295,24 +291,22 @@ var ReactorEvent = class _ReactorEvent {
   composedPath() {
     return getTrailRecords(this.root, this.path, true).map((r) => r[2]);
   }
-  get canWarn() {
-    return this._warn !== NOOP;
-  }
 };
 
 // src/ts/core/reactor.ts
 var Reactor = class {
+  /** Logger function for this reactor instance, override if desired, `this.canLog = false` resets. */
   log = NOOP;
+  /** The core state object for this reactor instance. */
   core;
   // `?:`s | pay the ~800 byte price upfront for what u might never use
-  plugins;
+  /** The modules being used by this reactor. */
+  modules;
+  /** Configuration options for this reactor instance. */
   config;
+  /** Whether this reactor instance is currently batching updates, a window view into the engine timing */
   isBatching = false;
   // Async Batching
-  isCascading = false;
-  // Setter Cascading
-  isLogging = false;
-  // keeping track so API getter doesn't slow down internal iterations in any way
   queue;
   // Tasks to run after flush
   batch;
@@ -379,7 +373,7 @@ var Reactor = class {
           safeValue = value?.[RAW] || value;
           unchanged = this.config.equalityFunction(safeValue, safeOldValue);
         }
-        if (!indiffable && unchanged && !this.isCascading) return this.log(`\u{1F504} [Reactor \`set\` Trap] Unchanged for "${keyStr}" on "${paths}"`), true;
+        if (!indiffable && unchanged && !CTX.isCascading) return this.log(`\u{1F504} [Reactor \`set\` Trap] Unchanged for "${keyStr}" on "${paths}"`), true;
         if (this.config.set) terminated = (value = this.config.set(object, key2, value, oldValue, receiver, paths)) === TERMINATOR;
         if (this.setters) {
           const wildcords = this.setters.get("*");
@@ -533,7 +527,7 @@ var Reactor = class {
     if (this.queue?.size) for (const task of this.queue) task(), this.queue.delete(task);
   }
   wave(path, payload) {
-    const e = new ReactorEvent(payload, this.config.eventBubbling, this.config.eventTimeStamps, this.isLogging), chain = getTrailRecords(this.core, path);
+    const e = new ReactorEvent(payload, this), chain = getTrailRecords(this.core, path);
     e.eventPhase = ReactorEvent.CAPTURING_PHASE;
     for (let i = 0; i <= chain.length - 2; i++) {
       if (e.propagationStopped) break;
@@ -607,8 +601,8 @@ var Reactor = class {
     return depth;
   }
   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) || "", hadKey: true, object };
+    const last = path.lastIndexOf("."), value = getAny(this.core, path), object = last === -1 ? this.core : getAny(this.core, path.slice(0, last));
+    return { path, value, key: path.slice(last + 1) || "", hadKey: true, object };
   }
   bindSignal(cord, sig) {
     if (sig) sig.aborted ? cord.clup() : sig.addEventListener("abort", cord.clup, { once: true });
@@ -624,7 +618,11 @@ var Reactor = class {
     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);
+    for (let i = 0, len = keys2.length; i < len; i++)
+      try {
+        clone[keys2[i]] = this.cloned(obj[keys2[i]], raw, seen);
+      } catch {
+      }
     if (!raw && this.config.smartCloning) this.snapCache.set(obj, clone), obj[SSVERSION] = version;
     return clone;
   }
@@ -712,7 +710,7 @@ var Reactor = class {
    * rtr.delete("cache.temp", () => TERMINATOR);
    */
   delete(path, callback, options) {
-    return this.syncAdd("delete", path, callback, options, (imm) => (imm !== "auto" || inAny(this.core, path)) && deleteAny(this.core, path, void 0));
+    return this.syncAdd("delete", path, callback, options, (imm) => (imm !== "auto" || inAny(this.core, path)) && deleteAny(this.core, path));
   }
   /** Registers a delete mediator for a path that only triggers once. */
   donce(path, callback, options) {
@@ -729,7 +727,7 @@ var Reactor = class {
   }
   /**
    * Registers a watcher for a path.
-   * Watch callbacks run synchronously with the operation.
+   * Watch callbacks run synchronously with the operation, use leaf paths for reliability as it sees exact sets; no bubbling here.
    * @param path Path or wildcard path.
    * @param callback Watch callback.
    * @param options Sync options.
@@ -778,7 +776,7 @@ var Reactor = class {
     cord = { cb: callback, capture, depth, once, clup: () => this.off(path, callback, options), lDepth: depth !== void 0 ? this.getDepth(path) : depth };
     if (immediate && (immediate !== "auto" || inAny(this.core, path))) {
       const target = this.getContext(path);
-      callback(new ReactorEvent({ type: "init", target, currentTarget: target, root: this.core, rejectable: false }, this.config.eventBubbling, this.isLogging));
+      callback(new ReactorEvent({ type: "init", target, currentTarget: target, root: this.core, rejectable: false }, this));
     }
     (cords ?? (this.listeners.set(path, cords = []), cords)).push(cord);
     return this.bindSignal(cord, signal);
@@ -809,56 +807,39 @@ var Reactor = class {
     return this.cloned(arguments.length < 2 ? this.core : branch, raw);
   }
   /**
-   * Cascades object updates into direct child paths.
-   * @param payload Event or payload source.
-   * @param objectSafe Merge old/new object values before cascading, don't set for arrays; merger doesn't play nice
-   * @example
-   * rtr.on("user", (event) => rtr.cascade(event));
-   * @example
-   * rtr.watch("user", (_value, payload) => rtr.cascade(payload));
-   */
-  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, keys2 = Object.keys(obj);
-    this.isCascading = true;
-    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;
-  }
-  /**
-   * Installs a plugin instance.
-   * @param plugin Plugin instance.
-   * @returns Current reactor for fluent chaining.
+   * Installs a module instance.
+   * @param target Module instance.
+   * @param id Optional identification tag for this instance in the module.
+   * @returns Current `Reactor` instance for fluent chaining.
    */
-  plugIn(plugin) {
-    const name = plugin.constructor.plugName;
-    this.plugins?.get(name)?.destroy();
-    return (this.plugins ??= /* @__PURE__ */ new Map()).set(name, (plugin.setup(this), plugin)), this;
+  use(target, id) {
+    return (this.modules ??= /* @__PURE__ */ new Set()).add(target.setup(this, id)), this;
   }
-  /** Resets the reactor to its initial state. */
+  /** Resets this reactor instance to its initial state. */
   reset() {
     this.getters?.clear(), this.setters?.clear(), this.deleters?.clear(), this.watchers?.clear(), this.listeners?.clear();
     this.batch?.clear(), this.queue?.clear(), this.isBatching = false;
   }
   destroy() {
-    if (this.plugins) for (const plug of this.plugins.values()) plug.destroy();
+    if (this.modules) for (const mdle of this.modules) mdle.destroy();
     this.reset(), nuke(this);
   }
   get canLog() {
-    return this.isLogging = this.log !== NOOP;
+    return this.log !== NOOP;
   }
   set canLog(value) {
-    this.log = (this.isLogging = value) ? RTR_LOG : NOOP;
+    this.log = value ? RTR_LOG : NOOP;
   }
-  get canTraceLineage() {
-    return this.config.referenceTracking && !!this.config.lineageTracing;
+  get canLineageTrace() {
+    return this.config.lineageTracing && this.config.referenceTracking;
   }
   get canSmartClone() {
-    return this.config.referenceTracking && !!this.config.smartCloning;
+    return this.config.smartCloning && this.config.referenceTracking;
   }
 };
 
 // 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"];
+var methods = ["tick", "stall", "nostall", "get", "gonce", "noget", "set", "sonce", "noset", "delete", "donce", "nodelete", "watch", "wonce", "nowatch", "on", "once", "off", "snapshot", "use", "reset", "destroy"];
 function reactive(target, build, preferences = NIL) {
   if ("__Reactor__" in target) return target;
   const descriptors = {}, rtr = getReactor(target, true, build), locks = { enumerable: false, configurable: true, writable: false }, hasAffix = !!(preferences.prefix || preferences.suffix);
@@ -866,7 +847,7 @@ function reactive(target, build, preferences = NIL) {
     let key = methods[i];
     if (hasAffix) (preferences.whitelist?.includes(key) ?? true) && (key = `${preferences.prefix || ""}${key}${preferences.suffix || ""}`);
     else if (preferences.whitelist?.includes(key)) continue;
-    descriptors[key] = { value: rtr[key].bind(rtr), ...locks };
+    descriptors[key] = { value: rtr[methods[i]].bind(rtr), ...locks };
   }
   descriptors["__Reactor__"] = { value: rtr, ...locks };
   return Object.defineProperties(rtr.core, descriptors), rtr.core;
@@ -979,9 +960,9 @@ var Autotracker = class {
    * const stop = atrkr.callback(() => console.log("changed")); // re-run after when ".user.name" changes
    * @example Packaged Customization
    * const atrkr = new Autotracker(); // no reactor passed
-   * withTracker(atrkr, () => state.user.name); // import `withTracker` first
+   * withTracker(atrkr, () => state.user.name); // import `withTracker` too
    * const stop = atrkr.callback(() => console.log("sync"), { sync: true }); // re-run immediately when ".user.name" changes, works on any path used from any reactor state
-   * @example Extensive customization
+   * @example Extensive Customization
    * atrkr.unblock();
    * const prev = CTX.autotracker;
    * CTX.autotracker = atrkr; // import CTX first
@@ -1181,8 +1162,8 @@ function effect(callback, options) {
 
 // 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" }
+  overrides: ["Ctrl+z", "Cmd+z", "Ctrl+y", "Cmd+y", "Ctrl+Shift+z", "Cmd+Shift+z", "Home", "End", ",", ".", "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: "Home", ending: "End", 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;
@@ -1193,22 +1174,22 @@ var TimeTravelOverlay = class _TimeTravelOverlay {
   els;
   clups = [];
   keyup;
-  /** Creates a docked TimeTravel overlay bound to a plugin instance.
-   * @param time TimeTravel plugin instance that owns timeline operations.
+  /** Creates a docked TimeTravel overlay bound to a module instance.
+   * @param time TimeTravel module 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" });
+    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)}`, 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 = "");
+      const a = this.state.open && (this.config.devOnly ? CTX.isDevEnv : true) && keyEventAllowed(e, keys);
+      a === "undo" ? this.time.undo() : a === "redo" ? this.time.redo() : a === "genesis" ? this.time.jumpTo(0) : a === "ending" ? this.time.jumpTo(s.history.length) : 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 = [
@@ -1223,7 +1204,8 @@ var TimeTravelOverlay = class _TimeTravelOverlay {
       effect(() => {
         frame.textContent = `Frame: ${s.currentFrame} / ${s.history.length}`;
         range.disabled = clrHistory.disabled = !s.history.length;
-        genesis.disabled = rewind.disabled = undo.disabled = !s.currentFrame;
+        genesis.disabled = undo.disabled = !s.currentFrame;
+        rewind.disabled = !s.paused || !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));
@@ -1237,7 +1219,7 @@ var TimeTravelOverlay = class _TimeTravelOverlay {
     this.clups.push(...sync);
   }
   destroy() {
-    this.clups.forEach((fn) => fn());
+    for (const clup of this.clups) clup();
     this.keyup && window.removeEventListener("keydown", this.keyup);
     this.els.host.remove();
     nuke(this), --_TimeTravelOverlay.count;

package/dist/adapters/react.d.cts

@@ -1,7 +1,7 @@
-import { E as EffectOptions, b as Reactor, R as Reactive, o as ReactorBuild, W as WildPaths, q as PathValue } from '../index-Oie9hhE8.cjs';
+import { E as EffectOptions, R as Reactor, d as Reactive, r as ReactorBuild, W as WildPaths, t as PathValue } from '../index-BgbbNXTW.cjs';
 import { useLayoutEffect } from 'react';
-import { T as TimeTravelPlugin } from '../timeTravel-WpgWmKu-.cjs';
-import { T as TimeTravelConfig } from '../TimeTravelOverlay-CJv-S_Km.cjs';
+import { m as TimeTravelModule } from '../timeTravel-CraHdbXZ.cjs';
+import { T as TimeTravelConfig } from '../TimeTravelOverlay-DiXUgbUU.cjs';
 
 /**
  * Subscribes a component to desired Reactor state and returns it.
@@ -12,12 +12,12 @@ import { T as TimeTravelConfig } from '../TimeTravelOverlay-CJv-S_Km.cjs';
  * @param build Optional Reactor build options used when creating a scoped Reactor for plain objects.
  * @returns State for render usage if state is scoped locally or just desired.
  * @example
- * const a = useReactor({ user: { name: "Ada" } }); // per-component scoped
+ * const a = useReactor({ user: { name: "Kosi" } }); // per-component scoped
  * @example
- * const state = reactive({ user: { name: "Ada" } });
+ * const state = reactive({ user: { name: "Kosi" } });
  * const b = useReactor(state);
  * @example
- * const rtr = new Reactor({ user: { name: "Ada" } });
+ * const rtr = new Reactor({ user: { name: "Kosi" } });
  * const c = useReactor(rtr);
  */
 declare function useReactor<T extends object>(target: T | Reactor<T> | Reactive<T>, options?: EffectOptions, build?: ReactorBuild<T>): T;
@@ -39,12 +39,12 @@ declare function useAnyReactor(options?: EffectOptions): void;
  * @param build Optional Reactor build options used when creating a scoped Reactor for plain objects.
  * @returns Tracked snapshot snap for render usage.
  * @example
- * const a = useReactorSnapshot({ user: { name: "Ada" } }); // per-component scoped
+ * const a = useReactorSnapshot({ user: { name: "Kosi" } }); // per-component scoped
  * @example
- * const state = reactive({ user: { name: "Ada" } });
+ * const state = reactive({ user: { name: "Kosi" } });
  * const b = useReactorSnapshot(state);
  * @example
- * const rtr = new Reactor({ user: { name: "Ada" } });
+ * const rtr = new Reactor({ user: { name: "Kosi" } });
  * const c = useReactorSnapshot(rtr);
  */
 declare function useReactorSnapshot<T extends object>(target: T | Reactor<T> | Reactive<T>, options?: EffectOptions, build?: ReactorBuild<T>): T;
@@ -62,12 +62,12 @@ declare function useReactorSnapshot<T extends object>(target: T | Reactor<T> | R
  * @param build Optional Reactor build options used when creating a scoped Reactor for plain objects.
  * @returns The selected slice.
  * @example
- * const a = useSelector({ user: { name: "Ada" } }, (s) => s.user.name); // per-component scoped
+ * const a = useSelector({ user: { name: "Kosi" } }, (s) => s.user.name); // per-component scoped
  * @example
- * const state = reactive({ user: { name: "Ada" } });
+ * const state = reactive({ user: { name: "Kosi" } });
  * const b = useSelector(state, (s) => s.user.name);
  * @example
- * const rtr = new Reactor({ user: { name: "Ada" } });
+ * const rtr = new Reactor({ user: { name: "Kosi" } });
  * const c = useSelector(rtr, (s) => s.user.name);
  */
 declare function useSelector<T extends object, R>(target: T | Reactor<T> | Reactive<T>, sel: (state: T) => R, eq?: (prev: R | undefined, next: R) => boolean, options?: EffectOptions, build?: ReactorBuild<T>): R;
@@ -95,12 +95,12 @@ declare function useAnySelector<R>(sel: () => R, eq?: (value1: any, value2: any)
  * @param build Optional Reactor build options used when creating a scoped Reactor for plain objects.
  * @returns The selected slice.
  * @example
- * const a = useSelectorSnapshot({ user: { name: "Ada" } }, (s) => s.user.name); // per-component scoped
+ * const a = useSelectorSnapshot({ user: { name: "Kosi" } }, (s) => s.user.name); // per-component scoped
  * @example
- * const state = reactive({ user: { name: "Ada" } });
+ * const state = reactive({ user: { name: "Kosi" } });
  * const b = useSelectorSnapshot(state, (s) => s.user.name);
  * @example
- * const rtr = new Reactor({ user: { name: "Ada" } });
+ * const rtr = new Reactor({ user: { name: "Kosi" } });
  * const c = useSelectorSnapshot(rtr, (s) => s.user.name);
  */
 declare function useSelectorSnapshot<T extends object, R>(target: T | Reactor<T> | Reactive<T>, sel: (state: T) => R, eq?: (value1: any, value2: any) => boolean, options?: EffectOptions, build?: ReactorBuild<T>): R;
@@ -116,12 +116,12 @@ declare function useSelectorSnapshot<T extends object, R>(target: T | Reactor<T>
  * @param build Optional Reactor build options used when creating a scoped Reactor for plain objects.
  * @returns Current value at the requested path.
  * @example
- * const a = usePath({ user: { profile: { name: "Ada" } } }, "user.profile.name");
+ * const a = usePath({ user: { profile: { name: "Kosi" } } }, "user.profile.name");
  * @example
- * const state = reactive({ user: { profile: { name: "Ada" } } });
+ * const state = reactive({ user: { profile: { name: "Kosi" } } });
  * const b = usePath(state, "user.profile.name");
  * @example
- * const rtr = new Reactor({ user: { profile: { name: "Ada" } } });
+ * const rtr = new Reactor({ user: { profile: { name: "Kosi" } } });
  * const c = usePath(rtr, "user.profile.name");
  * @example
  * const wholeState = usePath(state, "*");
@@ -133,11 +133,12 @@ declare const useISOLayoutEffect: typeof useLayoutEffect;
 
 /** React props for controlling the vanilla TimeTravel overlay. */
 interface TimeTravelOverlayProps extends Partial<TimeTravelConfig> {
-    /** Plugin instance controlled by this overlay bridge. */
-    time: TimeTravelPlugin;
+    /** Module instance controlled by this overlay bridge. */
+    time: TimeTravelModule;
 }
-/** React bridge for mounting and controlling a vanilla TimeTravelOverlay instance.
- * Instantiates a `TimeTravelOverlay` for the provided plugin, tears it down on unmount, and syncs prop changes into reactive `config`.
+/**
+ - React bridge for mounting and controlling a vanilla TimeTravelOverlay instance.
+ - Instantiates a `TimeTravelOverlay` for the provided module, tears it down on unmount, and syncs prop changes into reactive `config`.
  * Use this when your app is React but you want the overlay behavior with react-safe instance lifecycle management.
  * @param props Overlay bridge props.
  */

package/dist/adapters/react.d.ts

@@ -1,7 +1,7 @@
-import { E as EffectOptions, b as Reactor, R as Reactive, o as ReactorBuild, W as WildPaths, q as PathValue } from '../index-Oie9hhE8.js';
+import { E as EffectOptions, R as Reactor, d as Reactive, r as ReactorBuild, W as WildPaths, t as PathValue } from '../index-BgbbNXTW.js';
 import { useLayoutEffect } from 'react';
-import { T as TimeTravelPlugin } from '../timeTravel-B1vedDQc.js';
-import { T as TimeTravelConfig } from '../TimeTravelOverlay-DxqJL0Zk.js';
+import { m as TimeTravelModule } from '../timeTravel-YUxRHRgh.js';
+import { T as TimeTravelConfig } from '../TimeTravelOverlay-eWjAy0yr.js';
 
 /**
  * Subscribes a component to desired Reactor state and returns it.
@@ -12,12 +12,12 @@ import { T as TimeTravelConfig } from '../TimeTravelOverlay-DxqJL0Zk.js';
  * @param build Optional Reactor build options used when creating a scoped Reactor for plain objects.
  * @returns State for render usage if state is scoped locally or just desired.
  * @example
- * const a = useReactor({ user: { name: "Ada" } }); // per-component scoped
+ * const a = useReactor({ user: { name: "Kosi" } }); // per-component scoped
  * @example
- * const state = reactive({ user: { name: "Ada" } });
+ * const state = reactive({ user: { name: "Kosi" } });
  * const b = useReactor(state);
  * @example
- * const rtr = new Reactor({ user: { name: "Ada" } });
+ * const rtr = new Reactor({ user: { name: "Kosi" } });
  * const c = useReactor(rtr);
  */
 declare function useReactor<T extends object>(target: T | Reactor<T> | Reactive<T>, options?: EffectOptions, build?: ReactorBuild<T>): T;
@@ -39,12 +39,12 @@ declare function useAnyReactor(options?: EffectOptions): void;
  * @param build Optional Reactor build options used when creating a scoped Reactor for plain objects.
  * @returns Tracked snapshot snap for render usage.
  * @example
- * const a = useReactorSnapshot({ user: { name: "Ada" } }); // per-component scoped
+ * const a = useReactorSnapshot({ user: { name: "Kosi" } }); // per-component scoped
  * @example
- * const state = reactive({ user: { name: "Ada" } });
+ * const state = reactive({ user: { name: "Kosi" } });
  * const b = useReactorSnapshot(state);
  * @example
- * const rtr = new Reactor({ user: { name: "Ada" } });
+ * const rtr = new Reactor({ user: { name: "Kosi" } });
  * const c = useReactorSnapshot(rtr);
  */
 declare function useReactorSnapshot<T extends object>(target: T | Reactor<T> | Reactive<T>, options?: EffectOptions, build?: ReactorBuild<T>): T;
@@ -62,12 +62,12 @@ declare function useReactorSnapshot<T extends object>(target: T | Reactor<T> | R
  * @param build Optional Reactor build options used when creating a scoped Reactor for plain objects.
  * @returns The selected slice.
  * @example
- * const a = useSelector({ user: { name: "Ada" } }, (s) => s.user.name); // per-component scoped
+ * const a = useSelector({ user: { name: "Kosi" } }, (s) => s.user.name); // per-component scoped
  * @example
- * const state = reactive({ user: { name: "Ada" } });
+ * const state = reactive({ user: { name: "Kosi" } });
  * const b = useSelector(state, (s) => s.user.name);
  * @example
- * const rtr = new Reactor({ user: { name: "Ada" } });
+ * const rtr = new Reactor({ user: { name: "Kosi" } });
  * const c = useSelector(rtr, (s) => s.user.name);
  */
 declare function useSelector<T extends object, R>(target: T | Reactor<T> | Reactive<T>, sel: (state: T) => R, eq?: (prev: R | undefined, next: R) => boolean, options?: EffectOptions, build?: ReactorBuild<T>): R;
@@ -95,12 +95,12 @@ declare function useAnySelector<R>(sel: () => R, eq?: (value1: any, value2: any)
  * @param build Optional Reactor build options used when creating a scoped Reactor for plain objects.
  * @returns The selected slice.
  * @example
- * const a = useSelectorSnapshot({ user: { name: "Ada" } }, (s) => s.user.name); // per-component scoped
+ * const a = useSelectorSnapshot({ user: { name: "Kosi" } }, (s) => s.user.name); // per-component scoped
  * @example
- * const state = reactive({ user: { name: "Ada" } });
+ * const state = reactive({ user: { name: "Kosi" } });
  * const b = useSelectorSnapshot(state, (s) => s.user.name);
  * @example
- * const rtr = new Reactor({ user: { name: "Ada" } });
+ * const rtr = new Reactor({ user: { name: "Kosi" } });
  * const c = useSelectorSnapshot(rtr, (s) => s.user.name);
  */
 declare function useSelectorSnapshot<T extends object, R>(target: T | Reactor<T> | Reactive<T>, sel: (state: T) => R, eq?: (value1: any, value2: any) => boolean, options?: EffectOptions, build?: ReactorBuild<T>): R;
@@ -116,12 +116,12 @@ declare function useSelectorSnapshot<T extends object, R>(target: T | Reactor<T>
  * @param build Optional Reactor build options used when creating a scoped Reactor for plain objects.
  * @returns Current value at the requested path.
  * @example
- * const a = usePath({ user: { profile: { name: "Ada" } } }, "user.profile.name");
+ * const a = usePath({ user: { profile: { name: "Kosi" } } }, "user.profile.name");
  * @example
- * const state = reactive({ user: { profile: { name: "Ada" } } });
+ * const state = reactive({ user: { profile: { name: "Kosi" } } });
  * const b = usePath(state, "user.profile.name");
  * @example
- * const rtr = new Reactor({ user: { profile: { name: "Ada" } } });
+ * const rtr = new Reactor({ user: { profile: { name: "Kosi" } } });
  * const c = usePath(rtr, "user.profile.name");
  * @example
  * const wholeState = usePath(state, "*");
@@ -133,11 +133,12 @@ declare const useISOLayoutEffect: typeof useLayoutEffect;
 
 /** React props for controlling the vanilla TimeTravel overlay. */
 interface TimeTravelOverlayProps extends Partial<TimeTravelConfig> {
-    /** Plugin instance controlled by this overlay bridge. */
-    time: TimeTravelPlugin;
+    /** Module instance controlled by this overlay bridge. */
+    time: TimeTravelModule;
 }
-/** React bridge for mounting and controlling a vanilla TimeTravelOverlay instance.
- * Instantiates a `TimeTravelOverlay` for the provided plugin, tears it down on unmount, and syncs prop changes into reactive `config`.
+/**
+ - React bridge for mounting and controlling a vanilla TimeTravelOverlay instance.
+ - Instantiates a `TimeTravelOverlay` for the provided module, tears it down on unmount, and syncs prop changes into reactive `config`.
  * Use this when your app is React but you want the overlay behavior with react-safe instance lifecycle management.
  * @param props Overlay bridge props.
  */

package/dist/adapters/react.js

@@ -2,10 +2,10 @@ import {
   Autotracker,
   TimeTravelOverlay,
   withTracker
-} from "../chunk-TFLYCXK4.js";
+} from "../chunk-CS3FOV6J.js";
 import {
   getReactor
-} from "../chunk-2WBPGSRL.js";
+} from "../chunk-3SKLWTEA.js";
 import "../chunk-5A44QFT6.js";
 import "../chunk-P37ADJMM.js";
 import {
@@ -13,7 +13,7 @@ import {
   NIL,
   NOOP,
   getAny
-} from "../chunk-DP74DVRT.js";
+} from "../chunk-BTA6MIQ6.js";
 
 // src/ts/adapters/react/hooks/useReactor.ts
 import { useRef, useCallback, useSyncExternalStore, useMemo } from "react";