sia-reactor 0.0.25 → 0.0.27

package/README.md

@@ -5,8 +5,9 @@
 [![License](https://img.shields.io/badge/license-MIT-blue.svg)](LICENSE)
 [![NPM Version](https://img.shields.io/npm/v/sia-reactor.svg)](https://www.npmjs.com/package/sia-reactor)
 [![Bundle Size](https://img.shields.io/bundlephobia/minzip/sia-reactor)](https://bundlephobia.com/package/sia-reactor)
+[![Github](https://img.shields.io/badge/github-100000?style=for-the-badge&logo=github)](https://github.com/Tobi007-del/sia-reactor)
 
-[Live Demo & Benchmarks](https://tobi007-del.github.io/t007-tools/packages/sia-reactor/src/index.html) | [Report Bug](https://github.com/Tobi007-del/t007-tools/issues)
+[Live Demo & Benchmarks](https://tobi007-del.github.io/sia-reactor/index.html) | [Report Bug](https://github.com/Tobi007-del/sia-reactor/issues)
 
 [Chronicles](https://github.com/Tobi007-del/tmg-media-player/blob/main/CHRONICLES.md) | [Interaction Folklore](https://github.com/Tobi007-del/tmg-media-player/blob/main/FOLKLORE.md)
 
@@ -135,14 +136,14 @@ The primary way to use the reactor is to wrap an object using `reactive(target,
 *NOTE: `.` and `*` are engine reserved so don't use them as object keys*
 
 ```javascript
-const state = reactive({ player: { volume: 50 } }, { smartCloning: true, referenceTracking: true });
+const store = reactive({ player: { volume: 50 } }, { smartCloning: true, referenceTracking: true }); // name it something other than `state` if intents will exist.
 
 // Public API Methods are attached directly to the object with `reactive()`!
-state.set("player.volume", (val) => Math.min(val, 100));
-state.on("player.volume", (e) => console.log(e.value));
+store.set("player.volume", (val) => Math.min(val, 100));
+store.on("player.volume", (e) => console.log(e.value));
 
-state.player.volume = 150; // Triggers mediation, clamps to 100, fires listener.
-getReactor(state); state.__Reactor__; // Reference to the underlying reactor
+store.player.volume = 150; // Triggers mediation, clamps to 100, fires listener.
+getReactor(store); store.__Reactor__; // Reference to the underlying reactor
 ```
 
 Alternatively, you can instantiate the `Reactor` class directly to keep the API from interfering with your data or [try this](#reactive-preferences-method-naming):
@@ -195,42 +196,42 @@ const data = reactive({
 
 ### React Hooks & Effects
 
-The engine provides native React bindings utilizing `useSyncExternalStore` and an internal `Autotracker` for concurrent-safe, surgically precise component re-renders. All hooks natively accept a `Reactor` instance, a `reactive()` proxy, or a plain object (which will be auto-wrapped on the fly). Just import, your editor will reveal more details.
+The engine provides native React bindings utilizing `useSyncExternalStore` and an internal `Autotracker` for concurrent-safe, surgically precise component re-renders. All hooks natively accept a `Reactor` instance, a `reactive()` proxy, or a plain object (which will be auto-wrapped on the fly). Just import, your editor will reveal more details all round.
 
 ```javascript
 import { reactive } from "sia-reactor";
 import { useReactor, useAnyReactor, useSelector, useAnySelector, usePath, effect } from "sia-reactor/adapters/react"; 
 
-const state = reactive({ user: { name: "Kosi", age: 25 }, theme: "dark" });
+const store = reactive({ user: { name: "Kosi", age: 25 }, theme: "dark" });
 
 // 1. The Tracked State (Valtio-style)
 function Profile() {
-  const sameState = useReactor(state); // `useReactorSnapshot()` if mutable issues arise
+  const sameStore = useReactor(store); // `useReactorSnapshot()` if mutable issues arise
   useAnyReactor(); // when you just want state from any reactor
-  // Only re-renders if state.user.name mutates. Completely ignores age and theme!
-  return <div>{sameState.user.name + otherState.user.name}</div>;
+  // Only re-renders if store.user.name mutates. Completely ignores age and theme!
+  return <div>{sameStore.user.name + otherStore.user.name}</div>;
 } // no snapshots like Valtio, you can read or write to anything
 
 // 2. The Slice Selector (Zustand-style)
 function Theme() {
-  const theme = useSelector(state, (s) => s.theme); // `useSelectorSnapshot()` if mutable issues arise
-  const newName = useAnySelector(() => state.user.name + spouseState.user.name); // when you just want to derive any state from any reactor
+  const theme = useSelector(store, (s) => s.theme); // `useSelectorSnapshot()` if mutable issues arise
+  const newName = useAnySelector(() => store.user.name + spouseStore.user.name); // when you just want to derive any state from any reactor
   return <div>Theme: {theme}</div>;
 }
 
 // 3. The Direct Path Observer
 function AgeObserver() {
-  const age = usePath(state, "user.age"); // pass in a normal object for an auto-scoped instance
+  const age = usePath(store, "user.age"); // pass in a normal object for an auto-scoped instance
   return <div>Age: {age}</div>;
 }
 
 // 4. Vanilla Side Effects (Runs anywhere, framework agnostic)
-const stopTracking = effect(() => console.log("User name changed to:", state.user.name)); // read or write as you wish
+const stopTracking = effect(() => console.log("User name changed to:", store.user.name)); // read or write as you wish
 ```
 
 ### Modules: The Extension Port
 
-The `Reactor` is designed to be a lightweight core. Extended capabilities are attached via Modules. It ships with a suite of powerful modules for common architectural needs.
+The `Reactor` is designed to be a lightweight core. Extended capabilities are attached via Modules. Use `.attach(target: Reactor | Reactive<T>, id)` to chain reactors then `.setup(target, id)` which the `Reactor.use()` also calls to init, the `id` param will be direct keys on the final object, pass dotted paths to manipulate the shape.
 
 #### The Persistence Module
 Automatically syncs your State to LocalStorage, SessionStorage, Memory or IndexedDB. Always use this module first to avoid re-initialization issues.
@@ -239,31 +240,37 @@ Automatically syncs your State to LocalStorage, SessionStorage, Memory or Indexe
 import { reactive, Reactor, getReactor } from "sia-reactor";
 import { PersistModule, LocalStorageAdapter, IndexedDBAdapter, SessionStorageAdapter, CookieAdapter, MemoryAdapter } from "sia-reactor/modules";
 
-const state = reactive({ theme: "dark", settings: { volume: 50, brightness: 30 } });
-const persist = new PersistModule({ // Plug it in. State is now automatically hydrated and throttled-saved.
-  key: "APP_PREFS",
-  paths: ["theme", "settings.brightness"],
-  throttle: 5000, 
-  fanout: true, // async hydration should use leaf writes to sync already initialized listeners.
+const store = reactive({ theme: "dark", settings: { volume: 50, brightness: 30 } });
+const persist = new PersistModule({
+  key: "APP_GLOBAL_STORE",
+  whitelist: ["theme", "settings.brightness"], // all paths if omitted, use object if multiple reactors
+  blacklist: ["settings.debug"], // optional excluded paths
+  throttle: 2500, // ms between saves
+  fanout: true, // async hydration use leaf writes to sync initialized listeners.
   adapter: new IndexedDBAdapter({ dbName: "Session", version: 1, onversionchange: () => location.reload(), useSnapshot: true }) // or `LocalStorageAdapter` (instance or signature)
-};
-state.use(persist, getReactor(state)));  // Put `Reactor` as second constructor arg if you want type inference, e.g. for the paths in the array.
+}, getReactor(store)); // `Reactor` in second arg for path inference
+store.use(persist); // calls `.setup()`, use after all attachments, `id` is the second param too.
+
+// Seperate attach sample if multiple reactors desired
+persist.attach(uiStore, "ui").setup(appStore, "app"); // or paths: "app.ui"
+persist.config.whitelist = { ui: ["settings.theme"], app: ["settings.volume"] }; // Multi-reactor filtering by id key. If you didn't pass ids, use implicit index keys: { "0": [...], "1": [...] }
+
 ```
 
 #### The Time Travel Module
-Record state frames, step through history, and optionally attach a ready-to-use vanilla debug overlay.
+Record state frames, step through history, and optionally attach a ready-to-use vanilla debug overlay. Beware of paradoxes, seperate intent from state even in time.
 
 ```javascript
 import { TimeTravelModule } from "sia-reactor/modules";
 import { effect, TimeTravelOverlay } from "sia-reactor/adapters/vanilla";
 import "sia-reactor/css/time-travel-overlay.css";
 
-const time = new TimeTravelModule({ maxHistory: 300, loop: false, rate: 150 });
-state.use(time);
+const time = new TimeTravelModule({ maxHistory: 300, loop: false, rate: 150, whitelist: ["store.playing", "store.currentTime"] });
+store.use(time);
 
 // If persist uses an async adapter (e.g. IndexedDB), wait till after hydration:
-persist.state.once("hydrated", () => state.use(time)); // starts `false`, one-time stall until it flips
-effect(() => persist.state.hydrated && state.use(time), { once: true }) // same logic, different look :)
+persist.state.once("hydrated", () => store.use(time)); // starts `false`, one-time stall until it flips
+effect(() => persist.state.hydrated && store.use(time), { once: true }) // same logic, different look :)
 
 const overlay = new TimeTravelOverlay(time, { color: "#e26e02", startOpen: false, devOnly: true, container: document.body }); // optional debug interface for visulazation
 ```
@@ -308,7 +315,7 @@ const state = reactive(
     suffix: 'Now',
     whitelist: ['set', 'get', 'on', 'off'] // keys you're sure won't interfere with your own key names
   }
-);
+); // name `state` as no intents will exist
 // Whitelisted methods keep original names
 state.set('count', (v) => v + 1);
 state.get('count', (v) => v);
@@ -368,7 +375,7 @@ Because there is no "bubbling" or "event wave" yet, these methods do not receive
 rtr.set("user.age", (value, terminated, payload) => {
   console.log(payload.type);       // "set" | "get" | "delete"
   console.log(payload.target);     // The exact anatomy of the mutation (see below)
-  console.log(payload.root);       // Reference to the entire `state` tree
+  console.log(payload.root);       // Reference to the entire state tree
   console.log(payload.terminated); // Boolean: Did a previous mediator kill this action?
   console.log(payload.rejectable); // Boolean: Is this target wrapped in `intent()`?
 }); // you could use external callbacks but typed with `Payload<T, "user.age">`
@@ -406,7 +413,7 @@ rtr.set("user.age", (value) => {
 ### 2. The Asynchronous Dimension: The S.I.A. Event Loop
 When you use `.on()` or `.once()` (Listeners), you are sitting in the **Microtask Queue**. The memory has already been safely written, the Proxy traps have closed, and the engine is now broadcasting a DOM-Style "Mutation Wave" across the state tree.
 
-If you mutate `state.user.profile.name = "Kosi"`, the event wave travels like this:
+If you mutate `store.user.profile.name = "Kosi"`, the event wave travels like this:
 1. **Capture Phase:** `*` (Root) ➔ `user` ➔ `user.profile`
 2. **Target Phase:** `user.profile.name`
 3. **Bubble Phase:** `user.profile` ➔ `user` ➔ `*` (Root)
@@ -457,8 +464,8 @@ rtr.on("intent.playing", (e) => {
 When you listen to a parent object (like `"user.profile"`), you will naturally catch all mutations to its children. 
 
 To help you instantly differentiate between the object *itself* being replaced, versus a *child* property mutating deep inside of it, the Reactor intelligently morphs the `e.type`:
-* If `state.user.profile = {}` happens, the listener receives `e.type === "set"`.
-* If `state.user.profile.name = "Kosi"` happens, the parent listener receives `e.type === "update"`.
+* If `store.user.profile = {}` happens, the listener receives `e.type === "set"`.
+* If `store.user.profile.name = "Kosi"` happens, the parent listener receives `e.type === "update"`.
 
 This allows for highly fine-grained syncing bridges across your application without writing heavy for-loop diffing algorithms! Use `{ depth: n }` to control how deep the path bubbles you see are, i.e. 
 
@@ -531,7 +538,7 @@ S.I.A. Reactor synthesizes core concepts from the heavyweights of web and media
 
 No fancy screenshots here. True engineers look at performance metrics.
 
-To see the Reactor handle deep DAG mutations, DOM-style event routing, and microtask batching in real-time, visit the **[Live Demo](https://tobi007-del.github.io/t007-tools/packages/sia-reactor/src/index.html)**, open your DevTools console, and run the built-in Grand Master Stress Suite directly on your own CPU.
+To see the Reactor handle deep DAG mutations, DOM-style event routing, and microtask batching in real-time, visit the **[Live Demo](https://tobi007-del.github.io/sia-reactor/index.html)**, open your DevTools console, and run the built-in Grand Master Stress Suite directly on your own CPU.
 
 *NOTE: The reactor is progressively enhanced so it's performance depends on how you use it and the options you toggle, it's base form is incredibly light.*
 
@@ -540,7 +547,7 @@ To see the Reactor handle deep DAG mutations, DOM-style event routing, and micro
 ## Author
 
 - Architect & Developer - [Oketade Oluwatobiloba (Tobi007-del)](https://github.com/Tobi007-del)
-- Project - [t007-tools](https://github.com/Tobi007-del/t007-tools)
+- Project - [t007-tools](https://github.com/Tobi007-del/sia-reactor)
 
 ## Acknowledgments
 
@@ -550,6 +557,6 @@ Designed to bring absolute architectural dominance and rendering efficiency to c
 
 If you find this project useful, please consider giving it a star! ⭐
 
-[![Star History Chart](https://api.star-history.com/svg?repos=Tobi007-del/t007-tools&type=Date)](https://github.com/Tobi007-del/t007-tools)
+[![Star History Chart](https://api.star-history.com/svg?repos=Tobi007-del/sia-reactor&type=Date)](https://github.com/Tobi007-del/sia-reactor)
 
 **[⬆ Back to Top](#sia-reactor)**

package/dist/{TimeTravelOverlay-Bz2v9hov.d.cts → TimeTravelOverlay-DJJY5B9x.d.cts}

@@ -1,5 +1,5 @@
-import { d as Reactive } from './index-CB-IiZIB.cjs';
-import { m as TimeTravelModule } from './timeTravel-CEc3grUE.cjs';
+import { e as Reactive } from './index-BLpfq517.cjs';
+import { m as TimeTravelModule } from './timeTravel-CeKr5nq0.cjs';
 
 /** Reactive options for the TimeTravel overlay instance. */
 interface TimeTravelOverlayConfig {

package/dist/{TimeTravelOverlay-CvTDJWpP.d.ts → TimeTravelOverlay-D_D3EW6s.d.ts}

@@ -1,5 +1,5 @@
-import { d as Reactive } from './index-CB-IiZIB.js';
-import { m as TimeTravelModule } from './timeTravel-D7NiYqdD.js';
+import { e as Reactive } from './index-BLpfq517.js';
+import { m as TimeTravelModule } from './timeTravel-CFSDXKcs.js';
 
 /** Reactive options for the TimeTravel overlay instance. */
 interface TimeTravelOverlayConfig {

package/dist/adapters/react.cjs

@@ -498,28 +498,37 @@ var Reactor = class {
   }
   mediate(path, payload, type, cords) {
     let terminated = false, value = payload.target.value;
-    const isGet = type === "get", isSet = type === "set", mediators = isGet ? this.getters : isSet ? this.setters : this.deleters;
-    for (let i = !isGet ? 0 : cords.length - 1, len = !isGet ? cords.length : -1; i !== len; i += !isGet ? 1 : -1) {
-      const cord = cords[i], response = isGet ? cord.cb(value, payload) : isSet ? cord.cb(value, terminated, payload) : cord.cb(terminated, payload);
+    const isGet = type === "get", isSet = type === "set", mediators = isGet ? this.getters : isSet ? this.setters : this.deleters, scords = cords.slice();
+    for (let slen = scords.length, i = !isGet ? 0 : slen - 1, len = !isGet ? slen : -1; i !== len; i += !isGet ? 1 : -1) {
+      const cord = scords[i], response = isGet ? cord.cb(value, payload) : isSet ? cord.cb(value, terminated, payload) : cord.cb(terminated, payload);
       if (isGet || !(terminated ||= payload.terminated = response === TERMINATOR)) value = response;
-      if (cord.once) cords.splice((len--, i--), 1), !cords.length && mediators.delete(path);
+      if (cord.once) {
+        const idx = cords.indexOf(cord);
+        if (idx !== -1) cords.splice(idx, 1), !cords.length && mediators.delete(path);
+      }
     }
     return value;
   }
   notify(path, payload) {
     if (this.watchers) {
-      const wildcords = this.watchers.get("*"), cords = this.watchers.get(path);
+      const wildcords = this.watchers.get("*"), wildscords = wildcords?.slice(), cords = this.watchers.get(path), scords = cords?.slice();
       if (cords)
-        for (let i = 0, len = cords.length; i < len; i++) {
-          const cord = cords[i];
+        for (let i = 0, len = scords.length; i < len; i++) {
+          const cord = scords[i];
           cord.cb(payload.target.value, payload);
-          if (cord.once) cords.splice((len--, i--), 1), !cords.length && this.watchers.delete(path);
+          if (cord.once) {
+            const idx = cords.indexOf(cord);
+            if (idx !== -1) cords.splice(idx, 1), !cords.length && this.watchers.delete(path);
+          }
         }
       if (wildcords)
-        for (let i = 0, len = wildcords.length; i < len; i++) {
-          const wildcord = wildcords[i];
+        for (let i = 0, len = wildscords.length; i < len; i++) {
+          const wildcord = wildscords[i];
           wildcord.cb(payload.target.value, payload);
-          if (wildcord.once) wildcords.splice((len--, i--), 1), !wildcords.length && this.watchers.delete("*");
+          if (wildcord.once) {
+            const idx = wildcords.indexOf(wildcord);
+            if (idx !== -1) wildcords.splice(idx, 1), !wildcords.length && this.watchers.delete("*");
+          }
         }
     }
     this.listeners && this.schedule(path, payload);
@@ -557,8 +566,9 @@ var Reactor = class {
     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) || "", hadKey: e.type !== "update" ? e.target.hadKey : true, object };
-    for (let i = 0, len = cords.length, tDepth; i < len; i++) {
-      const cord = cords[i];
+    const scords = cords.slice();
+    for (let i = 0, len = scords.length, tDepth; i < len; i++) {
+      const cord = scords[i];
       if (e.immediatePropagationStopped) break;
       if (cord.capture !== isCapture) continue;
       if (cord.depth !== void 0) {
@@ -566,7 +576,10 @@ var Reactor = class {
         if (tDepth > cord.lDepth + cord.depth) continue;
       }
       cord.cb(e);
-      if (cord.once) cords.splice((len--, i--), 1), !cords.length && this.listeners.delete(path);
+      if (cord.once) {
+        const idx = cords.indexOf(cord);
+        if (idx !== -1) cords.splice(idx, 1), !cords.length && this.listeners.delete(path);
+      }
     }
   }
   /**
@@ -663,7 +676,7 @@ var Reactor = class {
     if (!cords) return void 0;
     for (let i = 0, len = cords.length; i < len; i++) {
       const cord = cords[i];
-      if (Object.is(cord.cb, cb)) return cord.sclup(), cords.splice((len--, i--), 1), !cords.length && store.delete(path), true;
+      if (Object.is(cord.cb, cb)) return cord.sclup(), cords.splice(i, 1), !cords.length && store.delete(path), true;
     }
     return false;
   }
@@ -817,10 +830,10 @@ var Reactor = class {
   off(path, callback, options) {
     const cords = this.listeners?.get(path);
     if (!cords) return void 0;
-    const { capture } = parseEvtOpts(options, EVT_OPTS.LISTENER);
+    const { capture = false } = parseEvtOpts(options, EVT_OPTS.LISTENER);
     for (let i = 0, len = cords.length; i < len; i++) {
       const cord = cords[i];
-      if (Object.is(cord.cb, callback) && cord.capture === capture) return cord.sclup(), cords.splice((len--, i--), 1), !cords.length && this.listeners.delete(path), true;
+      if (Object.is(cord.cb, callback) && cord.capture === capture) return cord.sclup(), cords.splice(i, 1), !cords.length && this.listeners.delete(path), true;
     }
     return false;
   }
@@ -1100,6 +1113,26 @@ function usePath(target, path, options = NIL, build) {
 // src/ts/adapters/react/TimeTravelOverlay.tsx
 var import_react5 = require("react");
 
+// src/ts/modules/base.ts
+var wpArr = ["*"];
+
+// 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/utils/keys.ts
 function stringifyKeyEvent(e) {
   const parts = [];
@@ -1154,31 +1187,17 @@ function parseForARIAKS(s, formatted = true) {
   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/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/adapters/vanilla/effect.ts
-function effect(callback, options) {
+function effect(callback, options = NIL) {
   const atrkr = new Autotracker();
   let destroyed = false;
+  const cleanup = () => (destroyed = true, atrkr.destroy());
   (function execute() {
-    if (!destroyed) withTracker(atrkr, () => callback()), atrkr.callback(execute, options);
+    if (destroyed) return;
+    withTracker(atrkr, callback);
+    options.once ? cleanup() : atrkr.callback(execute, options);
   })();
-  return () => (destroyed = true, atrkr.destroy());
+  return cleanup;
 }
 
 // src/ts/adapters/vanilla/TimeTravelOverlay.ts
@@ -1203,9 +1222,11 @@ var TimeTravelOverlay = class _TimeTravelOverlay {
     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)}`, 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" });
+    let wlLive = false, blLive = false;
+    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 History Entry" }), io = createEl("textarea", { className: "tt-io", placeholder: "timeline payload json", title: "Time History", 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" }), filters = createEl("div", { className: "tt-status-row" }), filterBox = createEl("div", { className: "tt-status-box" }), whitelistLabel = createEl("span", { className: "muted", textContent: "Whitelist:" }), blacklistLabel = createEl("span", { className: "muted", textContent: "Blacklist:" }), whitelist = createEl("input", { className: "tt-filter-input tt-io", placeholder: 'a.b, c.d or {"0":["a.b"]}', title: "Whitelist paths", onfocus: () => wlLive = true, onblur: () => (wlLive = false, whitelist.value = formatPaths(this.time.config.whitelist, "*")), oninput: (_, parsed = parsePaths(whitelist.value)) => parsed !== null && (this.time.config.whitelist = parsed) }), blacklist = createEl("input", { className: "tt-filter-input tt-io", placeholder: 'a.b, c.d or {"0":["a.b"]}', title: "Blacklist paths", onfocus: () => blLive = true, onblur: () => (blLive = false, blacklist.value = formatPaths(this.time.config.blacklist, "")), oninput: (_, parsed = parsePaths(blacklist.value, true)) => parsed !== null && (this.time.config.blacklist = parsed) }), filterRow1 = createEl("div", { className: "tt-filter-row" }), filterRow2 = createEl("div", { className: "tt-filter-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));
+    filters.append((filterBox.append((filterRow1.append(whitelistLabel, whitelist), filterRow1), (filterRow2.append(blacklistLabel, blacklist), filterRow2)), filterBox));
+    panel.append(title, status, (row1.append(undo, redo, genesis), row1), (row2.append(playPause, rewind), row2), payload, range, filters, (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) => {
@@ -1235,7 +1256,8 @@ var TimeTravelOverlay = class _TimeTravelOverlay {
       effect(() => {
         clr.disabled = imp.disabled = !this.state.import.trim().length;
         io.value !== this.state.import && (io.value = this.state.import);
-      })
+      }),
+      effect(() => (!wlLive && (whitelist.value = formatPaths(this.time.config.whitelist, "*")), !blLive && (blacklist.value = formatPaths(this.time.config.blacklist, ""))))
     ];
     this.clups.push(...sync);
   }
@@ -1257,6 +1279,22 @@ function getDock(container) {
   const dock = getDirChild(layer, "tt-overlay-dock") || createEl("div", { className: "tt-overlay-dock" });
   return dock.parentElement !== layer && layer.appendChild(dock), dock;
 }
+function formatPaths(paths, emptyText) {
+  return !paths ? emptyText : Array.isArray(paths) ? paths.length ? paths.join(", ") : emptyText : "object" === typeof paths ? JSON.stringify(paths) : String(paths);
+}
+function parsePaths(raw, allowEmpty = false) {
+  const text = raw.trim();
+  if (!text) return allowEmpty ? void 0 : wpArr;
+  if (text[0] === "{")
+    try {
+      const parsed = JSON.parse(text);
+      if (parsed && "object" === typeof parsed) return parsed;
+    } catch {
+      return null;
+    }
+  const list = text.split(",").map((p) => p.trim()).filter(Boolean);
+  return list.length ? list : allowEmpty ? void 0 : wpArr;
+}
 
 // src/ts/adapters/react/TimeTravelOverlay.tsx
 function TimeTravelOverlay2(props) {

package/dist/adapters/react.d.cts

@@ -1,7 +1,7 @@
-import { E as EffectOptions, R as Reactor, d as Reactive, v as ReactorBuild, D as DeepReadonly, W as WildPaths, e as PathValue } from '../index-CB-IiZIB.cjs';
+import { E as EffectOptions, a as Reactor, e as Reactive, x as ReactorBuild, D as DeepReadonly, W as WildPaths, f as PathValue } from '../index-BLpfq517.cjs';
 import { useLayoutEffect } from 'react';
-import { m as TimeTravelModule } from '../timeTravel-CEc3grUE.cjs';
-import { a as TimeTravelOverlayConfig } from '../TimeTravelOverlay-Bz2v9hov.cjs';
+import { m as TimeTravelModule } from '../timeTravel-CeKr5nq0.cjs';
+import { a as TimeTravelOverlayConfig } from '../TimeTravelOverlay-DJJY5B9x.cjs';
 
 /**
  * Subscribes a component to desired Reactor state and returns it.

package/dist/adapters/react.d.ts

@@ -1,7 +1,7 @@
-import { E as EffectOptions, R as Reactor, d as Reactive, v as ReactorBuild, D as DeepReadonly, W as WildPaths, e as PathValue } from '../index-CB-IiZIB.js';
+import { E as EffectOptions, a as Reactor, e as Reactive, x as ReactorBuild, D as DeepReadonly, W as WildPaths, f as PathValue } from '../index-BLpfq517.js';
 import { useLayoutEffect } from 'react';
-import { m as TimeTravelModule } from '../timeTravel-D7NiYqdD.js';
-import { a as TimeTravelOverlayConfig } from '../TimeTravelOverlay-CvTDJWpP.js';
+import { m as TimeTravelModule } from '../timeTravel-CFSDXKcs.js';
+import { a as TimeTravelOverlayConfig } from '../TimeTravelOverlay-D_D3EW6s.js';
 
 /**
  * Subscribes a component to desired Reactor state and returns it.

package/dist/adapters/react.js

@@ -2,12 +2,14 @@ import {
   Autotracker,
   TimeTravelOverlay,
   withTracker
-} from "../chunk-MWC3R7QL.js";
+} from "../chunk-3LIKXZ7X.js";
+import "../chunk-PLYS4CVP.js";
+import "../chunk-NG3WWQV4.js";
 import {
   getReactor
-} from "../chunk-3UHI7CNE.js";
-import "../chunk-5A44QFT6.js";
-import "../chunk-P37ADJMM.js";
+} from "../chunk-2EIKOZAD.js";
+import "../chunk-RVYL3OLW.js";
+import "../chunk-3OT72G7R.js";
 import {
   CTX,
   NIL,