sia-reactor 0.0.19 → 0.0.21

package/dist/adapters/react.d.cts

@@ -1,8 +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 { useLayoutEffect } from 'react';
-import { E as EffectOptions, R as Reactor, l as Reactive, W as WildPaths, o as PathValue } from '../index-C2hyIh0K.cjs';
-
-/** Isomorphic layout effect alias (`useLayoutEffect` in browser, `useEffect` otherwise). */
-declare const useISOLayoutEffect: typeof useLayoutEffect;
+import { T as TimeTravelPlugin } from '../timeTravel-WpgWmKu-.cjs';
+import { T as TimeTravelConfig } from '../TimeTravelOverlay-CJv-S_Km.cjs';
 
 /**
  * Subscribes a component to desired Reactor state and returns it.
@@ -10,9 +9,10 @@ declare const useISOLayoutEffect: typeof useLayoutEffect;
  * @typeParam T Root state object type.
  * @param target Reactive object, Reactor instance, or plain object.
  * @param options Watcher options if `options.sync: false` else Listener options.
+ * @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" } });
+ * const a = useReactor({ user: { name: "Ada" } }); // per-component scoped
  * @example
  * const state = reactive({ user: { name: "Ada" } });
  * const b = useReactor(state);
@@ -20,7 +20,7 @@ declare const useISOLayoutEffect: typeof useLayoutEffect;
  * const rtr = new Reactor({ user: { name: "Ada" } });
  * const c = useReactor(rtr);
  */
-declare function useReactor<T extends object>(target: T | Reactor<T> | Reactive<T>, options?: EffectOptions): T;
+declare function useReactor<T extends object>(target: T | Reactor<T> | Reactive<T>, options?: EffectOptions, build?: ReactorBuild<T>): T;
 /**
  * Subscribes a component to any Reactor state.
  * The hook uses access tracking so re-renders occur only when accessed fields change.
@@ -29,6 +29,25 @@ declare function useReactor<T extends object>(target: T | Reactor<T> | Reactive<
  * useAnyReactor();
  */
 declare function useAnyReactor(options?: EffectOptions): void;
+/**
+ * Subscribes a component to Reactor state and returns a tracked snapshot.
+ * Rule of thumb: read from snapshots, mutate the source.
+ * The hook uses access tracking so re-renders occur only when accessed fields change.
+ * @typeParam T Root state object type.
+ * @param target Reactive object, Reactor instance, or plain object.
+ * @param options Watcher options if `options.sync: false` else Listener options.
+ * @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
+ * @example
+ * const state = reactive({ user: { name: "Ada" } });
+ * const b = useReactorSnapshot(state);
+ * @example
+ * const rtr = new Reactor({ user: { name: "Ada" } });
+ * const c = useReactorSnapshot(rtr);
+ */
+declare function useReactorSnapshot<T extends object>(target: T | Reactor<T> | Reactive<T>, options?: EffectOptions, build?: ReactorBuild<T>): T;
 
 /**
  * Subscribes to a derived slice of Reactor state.
@@ -40,9 +59,10 @@ declare function useAnyReactor(options?: EffectOptions): void;
  * @param sel Slice selector.
  * @param eq Equality function used to compare consecutive selector results.
  * @param options Watcher options if `options.sync: false` else Listener options.
+ * @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);
+ * const a = useSelector({ user: { name: "Ada" } }, (s) => s.user.name); // per-component scoped
  * @example
  * const state = reactive({ user: { name: "Ada" } });
  * const b = useSelector(state, (s) => s.user.name);
@@ -50,7 +70,7 @@ declare function useAnyReactor(options?: EffectOptions): void;
  * const rtr = new Reactor({ user: { name: "Ada" } });
  * 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?: (value1: any, value2: any) => boolean, options?: EffectOptions): R;
+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;
 /**
  * Subscribes to a derived slice of any Reactor state.
  * The selector runs against the live state and uses the provided equality function
@@ -62,6 +82,28 @@ declare function useSelector<T extends object, R>(target: T | Reactor<T> | React
  * @returns The selected slice.
  */
 declare function useAnySelector<R>(sel: () => R, eq?: (value1: any, value2: any) => boolean, options?: EffectOptions): R;
+/**
+ * Subscribes to a derived slice of Reactor state.
+ * The selector runs against a tracked snapshot and uses the provided equality function
+ * to suppress unchanged results.
+ * @typeParam T Root state object type.
+ * @typeParam R Selector return type.
+ * @param target Reactive object, Reactor instance, or plain object.
+ * @param sel Slice selector.
+ * @param eq Equality function used to compare consecutive selector results.
+ * @param options Watcher options if `options.sync: false` else Listener options.
+ * @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
+ * @example
+ * const state = reactive({ user: { name: "Ada" } });
+ * const b = useSelectorSnapshot(state, (s) => s.user.name);
+ * @example
+ * const rtr = new Reactor({ user: { name: "Ada" } });
+ * 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;
 
 /**
  * Subscribes to a single path in Reactor state.
@@ -71,6 +113,7 @@ declare function useAnySelector<R>(sel: () => R, eq?: (value1: any, value2: any)
  * @param target Reactive object, Reactor instance, or plain object.
  * @param path Path to observe. Supports dotted paths and wildcard `"*"`.
  * @param options Watcher options if `options.sync: false` else Listener options.
+ * @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");
@@ -83,6 +126,21 @@ declare function useAnySelector<R>(sel: () => R, eq?: (value1: any, value2: any)
  * @example
  * const wholeState = usePath(state, "*");
  */
-declare function usePath<T extends object, P extends WildPaths<T>>(target: T | Reactor<T> | Reactive<T>, path: P, options?: EffectOptions): PathValue<T, P>;
+declare function usePath<T extends object, P extends WildPaths<T>>(target: T | Reactor<T> | Reactive<T>, path: P, options?: EffectOptions, build?: ReactorBuild<T>): PathValue<T, P>;
+
+/** Isomorphic layout effect alias (`useLayoutEffect` in browser, `useEffect` otherwise). */
+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;
+}
+/** 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`.
+ * Use this when your app is React but you want the overlay behavior with react-safe instance lifecycle management.
+ * @param props Overlay bridge props.
+ */
+declare function TimeTravelOverlay(props: TimeTravelOverlayProps): null;
 
-export { useAnyReactor, useAnySelector, useISOLayoutEffect, usePath, useReactor, useSelector };
+export { TimeTravelOverlay, type TimeTravelOverlayProps, useAnyReactor, useAnySelector, useISOLayoutEffect, usePath, useReactor, useReactorSnapshot, useSelector, useSelectorSnapshot };

package/dist/adapters/react.d.ts

@@ -1,8 +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 { useLayoutEffect } from 'react';
-import { E as EffectOptions, R as Reactor, l as Reactive, W as WildPaths, o as PathValue } from '../index-C2hyIh0K.js';
-
-/** Isomorphic layout effect alias (`useLayoutEffect` in browser, `useEffect` otherwise). */
-declare const useISOLayoutEffect: typeof useLayoutEffect;
+import { T as TimeTravelPlugin } from '../timeTravel-B1vedDQc.js';
+import { T as TimeTravelConfig } from '../TimeTravelOverlay-DxqJL0Zk.js';
 
 /**
  * Subscribes a component to desired Reactor state and returns it.
@@ -10,9 +9,10 @@ declare const useISOLayoutEffect: typeof useLayoutEffect;
  * @typeParam T Root state object type.
  * @param target Reactive object, Reactor instance, or plain object.
  * @param options Watcher options if `options.sync: false` else Listener options.
+ * @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" } });
+ * const a = useReactor({ user: { name: "Ada" } }); // per-component scoped
  * @example
  * const state = reactive({ user: { name: "Ada" } });
  * const b = useReactor(state);
@@ -20,7 +20,7 @@ declare const useISOLayoutEffect: typeof useLayoutEffect;
  * const rtr = new Reactor({ user: { name: "Ada" } });
  * const c = useReactor(rtr);
  */
-declare function useReactor<T extends object>(target: T | Reactor<T> | Reactive<T>, options?: EffectOptions): T;
+declare function useReactor<T extends object>(target: T | Reactor<T> | Reactive<T>, options?: EffectOptions, build?: ReactorBuild<T>): T;
 /**
  * Subscribes a component to any Reactor state.
  * The hook uses access tracking so re-renders occur only when accessed fields change.
@@ -29,6 +29,25 @@ declare function useReactor<T extends object>(target: T | Reactor<T> | Reactive<
  * useAnyReactor();
  */
 declare function useAnyReactor(options?: EffectOptions): void;
+/**
+ * Subscribes a component to Reactor state and returns a tracked snapshot.
+ * Rule of thumb: read from snapshots, mutate the source.
+ * The hook uses access tracking so re-renders occur only when accessed fields change.
+ * @typeParam T Root state object type.
+ * @param target Reactive object, Reactor instance, or plain object.
+ * @param options Watcher options if `options.sync: false` else Listener options.
+ * @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
+ * @example
+ * const state = reactive({ user: { name: "Ada" } });
+ * const b = useReactorSnapshot(state);
+ * @example
+ * const rtr = new Reactor({ user: { name: "Ada" } });
+ * const c = useReactorSnapshot(rtr);
+ */
+declare function useReactorSnapshot<T extends object>(target: T | Reactor<T> | Reactive<T>, options?: EffectOptions, build?: ReactorBuild<T>): T;
 
 /**
  * Subscribes to a derived slice of Reactor state.
@@ -40,9 +59,10 @@ declare function useAnyReactor(options?: EffectOptions): void;
  * @param sel Slice selector.
  * @param eq Equality function used to compare consecutive selector results.
  * @param options Watcher options if `options.sync: false` else Listener options.
+ * @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);
+ * const a = useSelector({ user: { name: "Ada" } }, (s) => s.user.name); // per-component scoped
  * @example
  * const state = reactive({ user: { name: "Ada" } });
  * const b = useSelector(state, (s) => s.user.name);
@@ -50,7 +70,7 @@ declare function useAnyReactor(options?: EffectOptions): void;
  * const rtr = new Reactor({ user: { name: "Ada" } });
  * 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?: (value1: any, value2: any) => boolean, options?: EffectOptions): R;
+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;
 /**
  * Subscribes to a derived slice of any Reactor state.
  * The selector runs against the live state and uses the provided equality function
@@ -62,6 +82,28 @@ declare function useSelector<T extends object, R>(target: T | Reactor<T> | React
  * @returns The selected slice.
  */
 declare function useAnySelector<R>(sel: () => R, eq?: (value1: any, value2: any) => boolean, options?: EffectOptions): R;
+/**
+ * Subscribes to a derived slice of Reactor state.
+ * The selector runs against a tracked snapshot and uses the provided equality function
+ * to suppress unchanged results.
+ * @typeParam T Root state object type.
+ * @typeParam R Selector return type.
+ * @param target Reactive object, Reactor instance, or plain object.
+ * @param sel Slice selector.
+ * @param eq Equality function used to compare consecutive selector results.
+ * @param options Watcher options if `options.sync: false` else Listener options.
+ * @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
+ * @example
+ * const state = reactive({ user: { name: "Ada" } });
+ * const b = useSelectorSnapshot(state, (s) => s.user.name);
+ * @example
+ * const rtr = new Reactor({ user: { name: "Ada" } });
+ * 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;
 
 /**
  * Subscribes to a single path in Reactor state.
@@ -71,6 +113,7 @@ declare function useAnySelector<R>(sel: () => R, eq?: (value1: any, value2: any)
  * @param target Reactive object, Reactor instance, or plain object.
  * @param path Path to observe. Supports dotted paths and wildcard `"*"`.
  * @param options Watcher options if `options.sync: false` else Listener options.
+ * @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");
@@ -83,6 +126,21 @@ declare function useAnySelector<R>(sel: () => R, eq?: (value1: any, value2: any)
  * @example
  * const wholeState = usePath(state, "*");
  */
-declare function usePath<T extends object, P extends WildPaths<T>>(target: T | Reactor<T> | Reactive<T>, path: P, options?: EffectOptions): PathValue<T, P>;
+declare function usePath<T extends object, P extends WildPaths<T>>(target: T | Reactor<T> | Reactive<T>, path: P, options?: EffectOptions, build?: ReactorBuild<T>): PathValue<T, P>;
+
+/** Isomorphic layout effect alias (`useLayoutEffect` in browser, `useEffect` otherwise). */
+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;
+}
+/** 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`.
+ * Use this when your app is React but you want the overlay behavior with react-safe instance lifecycle management.
+ * @param props Overlay bridge props.
+ */
+declare function TimeTravelOverlay(props: TimeTravelOverlayProps): null;
 
-export { useAnyReactor, useAnySelector, useISOLayoutEffect, usePath, useReactor, useSelector };
+export { TimeTravelOverlay, type TimeTravelOverlayProps, useAnyReactor, useAnySelector, useISOLayoutEffect, usePath, useReactor, useReactorSnapshot, useSelector, useSelectorSnapshot };

package/dist/adapters/react.js

@@ -1,73 +1,124 @@
-import {
-  Reactor
-} from "../chunk-Q2AKMIHN.js";
 import {
   Autotracker,
+  TimeTravelOverlay,
   withTracker
-} from "../chunk-FGUCKMLH.js";
+} from "../chunk-TFLYCXK4.js";
+import {
+  getReactor
+} from "../chunk-2WBPGSRL.js";
+import "../chunk-5A44QFT6.js";
+import "../chunk-P37ADJMM.js";
 import {
   CTX,
   NIL,
   NOOP,
   getAny
-} from "../chunk-4MJUBEI7.js";
+} from "../chunk-DP74DVRT.js";
+
+// src/ts/adapters/react/hooks/useReactor.ts
+import { useRef, useCallback, useSyncExternalStore, useMemo } from "react";
 
-// src/adapters/react/utils.ts
+// src/ts/adapters/react/utils.ts
 import { useLayoutEffect, useEffect } from "react";
 var useISOLayoutEffect = "undefined" !== typeof window ? useLayoutEffect : useEffect;
 
-// src/adapters/react/hooks/useReactor.ts
-import { useRef, useReducer } from "react";
-function useReactor(target, options = NIL) {
-  const [, reRender] = useReducer((s) => s + 1, 0), tgtRef = useRef(), rtrRef = useRef(), rtr = tgtRef.current !== target || !rtrRef.current ? (tgtRef.current = target, rtrRef.current = target instanceof Reactor ? target : target.__Reactor__ || new Reactor(target)) : rtrRef.current, atrkrRef = useRef(), prevTrkr = CTX.autotracker, atrkr = CTX.autotracker = atrkrRef.current ||= new Autotracker(), optsRef = useRef(options);
+// src/ts/adapters/react/hooks/useReactor.ts
+function useReactor(target, options = NIL, build) {
+  const versionRef = useRef(0), tgtRef = useRef(), rtrRef = useRef(), rtr = tgtRef.current !== target || !rtrRef.current ? (tgtRef.current = target, rtrRef.current = getReactor(target, true, build)) : rtrRef.current, atrkrRef = useRef(), prevTrkr = CTX.autotracker, atrkr = CTX.autotracker = atrkrRef.current ||= new Autotracker(), optsRef = useRef(options), notifyRef = useRef(NOOP);
   optsRef.current = options;
   atrkr.unblock(rtr), queueMicrotask(() => CTX.autotracker === atrkr && (CTX.autotracker = prevTrkr));
-  return useISOLayoutEffect(() => (CTX.autotracker = prevTrkr, atrkr.callback(reRender, optsRef.current)), [atrkr]), rtr.core;
+  const subscribe = useCallback((notify) => atrkr.callback(notifyRef.current = () => (versionRef.current++, notify())), [atrkr]);
+  const getSnapshot = useCallback(() => versionRef.current, []);
+  useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
+  return useISOLayoutEffect(() => (CTX.autotracker = prevTrkr, atrkr.callback(notifyRef.current, optsRef.current)), [atrkr]), rtr.core;
 }
 function useAnyReactor(options = NIL) {
-  const [, reRender] = useReducer((s) => s + 1, 0), atrkrRef = useRef(), prevTrkr = CTX.autotracker, atrkr = CTX.autotracker = atrkrRef.current ||= new Autotracker(), optsRef = useRef(options);
+  const versionRef = useRef(0), atrkrRef = useRef(), prevTrkr = CTX.autotracker, atrkr = CTX.autotracker = atrkrRef.current ||= new Autotracker(), optsRef = useRef(options), notifyRef = useRef(NOOP);
   optsRef.current = options;
   atrkr.unblock(), queueMicrotask(() => CTX.autotracker === atrkr && (CTX.autotracker = prevTrkr));
-  useISOLayoutEffect(() => (CTX.autotracker = prevTrkr, atrkr.callback(reRender, optsRef.current)), [atrkr]);
+  const subscribe = useCallback((notify) => atrkr.callback(notifyRef.current = () => (versionRef.current++, notify())), [atrkr]);
+  const getSnapshot = useCallback(() => versionRef.current, []);
+  useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
+  useISOLayoutEffect(() => (CTX.autotracker = prevTrkr, atrkr.callback(notifyRef.current, optsRef.current)), [atrkr]);
+}
+function useReactorSnapshot(target, options, build = { referenceTracking: true, smartCloning: true }) {
+  const tgtRef = useRef(), rtrRef = useRef(), rtr = tgtRef.current !== target || !rtrRef.current ? (tgtRef.current = target, rtrRef.current = getReactor(target, true, build)) : rtrRef.current, atrkrRef = useRef(), atrkrRtrRef = useRef(), atrkr = atrkrRtrRef.current !== rtr || !atrkrRef.current ? (atrkrRtrRef.current = rtr, atrkrRef.current = new Autotracker(rtr)) : atrkrRef.current, notifyRef = useRef(NOOP), optsRef = useRef(options);
+  rtr.config.referenceTracking = rtr.config.smartCloning = true;
+  optsRef.current = options;
+  const subscribe = useCallback((notify) => (atrkr.callback(notifyRef.current = notify, optsRef.current), () => atrkr.cleanup()), [atrkr]);
+  const getSnapshot = () => rtr.snapshot();
+  const snapshot = useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
+  const proxy = useMemo(() => atrkr.tracked(snapshot), [atrkr, snapshot]);
+  return useISOLayoutEffect(() => atrkr.callback(notifyRef.current, optsRef.current), [atrkr, proxy]), proxy;
 }
 
-// src/adapters/react/hooks/useSelector.ts
-import { useSyncExternalStore, useRef as useRef2, useCallback } from "react";
-function useSelector(target, sel, eq = Object.is, options = NIL) {
-  const rtrRef = useRef2(), tgtRef = useRef2(), rtr = tgtRef.current !== target || !rtrRef.current ? (tgtRef.current = target, rtrRef.current = target instanceof Reactor ? target : target.__Reactor__ || new Reactor(target)) : rtrRef.current, atrkrRef = useRef2(), atrkr = atrkrRef.current ||= new Autotracker(), notifyRef = useRef2(NOOP), sliceRef = useRef2(), selRef = useRef2(sel), eqRef = useRef2(eq), optsRef = useRef2(options);
+// src/ts/adapters/react/hooks/useSelector.ts
+import { useSyncExternalStore as useSyncExternalStore2, useRef as useRef2, useCallback as useCallback2 } from "react";
+function useSelector(target, sel, eq = Object.is, options = NIL, build) {
+  const rtrRef = useRef2(), tgtRef = useRef2(), rtr = tgtRef.current !== target || !rtrRef.current ? (tgtRef.current = target, rtrRef.current = getReactor(target, true, build)) : rtrRef.current, atrkrRef = useRef2(), atrkr = atrkrRef.current ||= new Autotracker(), notifyRef = useRef2(NOOP), sliceRef = useRef2(), selRef = useRef2(sel), eqRef = useRef2(eq), optsRef = useRef2(options);
   selRef.current = sel, eqRef.current = eq, optsRef.current = options;
-  const subscribe = useCallback((notify) => atrkr.callback(notifyRef.current = notify, optsRef.current), [atrkr]);
-  const getSnapshot = useCallback(() => {
+  const subscribe = useCallback2((notify) => atrkr.callback(notifyRef.current = notify, optsRef.current), [atrkr]);
+  const getSnapshot = useCallback2(() => {
     const next = withTracker(atrkr, () => selRef.current(rtr.core), rtr);
     return eqRef.current(sliceRef.current, next) ? sliceRef.current : sliceRef.current = next;
   }, [atrkr, rtr]);
-  const slice = useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
+  const slice = useSyncExternalStore2(subscribe, getSnapshot, getSnapshot);
   return useISOLayoutEffect(() => atrkr.callback(notifyRef.current, optsRef.current), [atrkr, slice]), slice;
 }
 function useAnySelector(sel, eq = Object.is, options = NIL) {
   const atrkrRef = useRef2(), atrkr = atrkrRef.current ||= new Autotracker(), notifyRef = useRef2(NOOP), sliceRef = useRef2(), selRef = useRef2(sel), eqRef = useRef2(eq), optsRef = useRef2(options);
   selRef.current = sel, eqRef.current = eq, optsRef.current = options;
-  const subscribe = useCallback((notify) => atrkr.callback(notifyRef.current = notify, optsRef.current), [atrkr]);
-  const getSnapshot = useCallback(() => {
+  const subscribe = useCallback2((notify) => atrkr.callback(notifyRef.current = notify, optsRef.current), [atrkr]);
+  const getSnapshot = useCallback2(() => {
     const next = withTracker(atrkr, () => selRef.current());
     return eqRef.current(sliceRef.current, next) ? sliceRef.current : sliceRef.current = next;
   }, [atrkr]);
-  const slice = useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
+  const slice = useSyncExternalStore2(subscribe, getSnapshot, getSnapshot);
+  return useISOLayoutEffect(() => atrkr.callback(notifyRef.current, optsRef.current), [atrkr, slice]), slice;
+}
+function useSelectorSnapshot(target, sel, eq = Object.is, options, build = { referenceTracking: true, smartCloning: true }) {
+  const tgtRef = useRef2(), rtrRef = useRef2(), rtr = tgtRef.current !== target || !rtrRef.current ? (tgtRef.current = target, rtrRef.current = getReactor(target, true, build)) : rtrRef.current, atrkrRef = useRef2(), atrkrRtrRef = useRef2(), atrkr = atrkrRtrRef.current !== rtr || !atrkrRef.current ? (atrkrRtrRef.current = rtr, atrkrRef.current = new Autotracker(rtr)) : atrkrRef.current, notifyRef = useRef2(NOOP), sliceRef = useRef2(), selRef = useRef2(sel), eqRef = useRef2(eq), optsRef = useRef2(options);
+  rtr.config.referenceTracking = rtr.config.smartCloning = true;
+  optsRef.current = options, selRef.current = sel, eqRef.current = eq;
+  const subscribe = useCallback2((notify) => (atrkr.callback(notifyRef.current = notify, optsRef.current), () => atrkr.cleanup()), [atrkr]);
+  const getSnapshot = useCallback2(() => {
+    const next = selRef.current(atrkr.tracked(rtr.snapshot()));
+    return eqRef.current(sliceRef.current, next) ? sliceRef.current : sliceRef.current = next;
+  }, [atrkr]);
+  const slice = useSyncExternalStore2(subscribe, getSnapshot, getSnapshot);
   return useISOLayoutEffect(() => atrkr.callback(notifyRef.current, optsRef.current), [atrkr, slice]), slice;
 }
 
-// src/adapters/react/hooks/usePath.ts
-import { useRef as useRef3, useReducer as useReducer2 } from "react";
-function usePath(target, path, options = NIL) {
-  const [, reRender] = useReducer2((s) => s + 1, 0), tgtRef = useRef3(), rtrRef = useRef3(), rtr = tgtRef.current !== target || !rtrRef.current ? (tgtRef.current = target, rtrRef.current = target instanceof Reactor ? target : target.__Reactor__ || new Reactor(target)) : rtrRef.current, optsRef = useRef3(options);
+// src/ts/adapters/react/hooks/usePath.ts
+import { useRef as useRef3, useSyncExternalStore as useSyncExternalStore3, useCallback as useCallback3 } from "react";
+function usePath(target, path, options = NIL, build) {
+  const versionRef = useRef3(0), tgtRef = useRef3(), rtrRef = useRef3(), rtr = tgtRef.current !== target || !rtrRef.current ? (tgtRef.current = target, rtrRef.current = getReactor(target, true, build)) : rtrRef.current, optsRef = useRef3(options);
   optsRef.current = options;
-  return useISOLayoutEffect(() => void rtr[optsRef.current.sync ? "watch" : "on"](path, reRender, optsRef.current), [rtr, path]), getAny(rtr.core, path);
+  const subscribe = useCallback3((notify) => rtr[optsRef.current.sync ? "watch" : "on"](path, () => (versionRef.current++, notify()), optsRef.current), [rtr, path]);
+  const getSnapshot = useCallback3(() => versionRef.current, []);
+  useSyncExternalStore3(subscribe, getSnapshot, getSnapshot);
+  return getAny(rtr.core, path);
+}
+
+// src/ts/adapters/react/TimeTravelOverlay.tsx
+import { useRef as useRef4 } from "react";
+function TimeTravelOverlay2(props) {
+  const vRef = useRef4(null), { time, title, color, devOnly, startOpen, container } = props;
+  useISOLayoutEffect(() => {
+    vRef.current = new TimeTravelOverlay(time, props);
+    return () => void (vRef.current?.destroy(), vRef.current = null);
+  }, [time]);
+  useISOLayoutEffect(() => void (vRef.current && (title !== void 0 && (vRef.current.config.title = title), vRef.current.config.color = color, vRef.current.config.devOnly = devOnly, vRef.current.config.container = container, vRef.current.state.open = startOpen)), [title, color, devOnly, container, startOpen]);
+  return null;
 }
 export {
+  TimeTravelOverlay2 as TimeTravelOverlay,
   useAnyReactor,
   useAnySelector,
   useISOLayoutEffect,
   usePath,
   useReactor,
-  useSelector
+  useReactorSnapshot,
+  useSelector,
+  useSelectorSnapshot
 };