react-state-custom 1.0.25 → 1.0.27

package/dist/index.es.js

@@ -1,59 +1,98 @@
-import A, { useRef as j, useMemo as g, useEffect as m, useState as p, useCallback as F, Fragment as H, useContext as G } from "react";
-import { jsx as h, Fragment as D, jsxs as v } from "react/jsx-runtime";
-function C(e, t) {
-  let n = null, r = function(...o) {
-    n && clearTimeout(n), n = setTimeout(() => {
-      e(...o);
-    }, t);
+import M, { useRef as P, useMemo as D, useEffect as g, useState as R, useCallback as Z, Fragment as x, useContext as ee } from "react";
+import { jsx as v, Fragment as $, jsxs as T } from "react/jsx-runtime";
+var L = { exports: {} }, U = {};
+/**
+ * @license React
+ * react-compiler-runtime.production.js
+ *
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+var H;
+function te() {
+  if (H) return U;
+  H = 1;
+  var s = M.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE;
+  return U.c = function(e) {
+    return s.H.useMemoCache(e);
+  }, U;
+}
+var V = {};
+/**
+ * @license React
+ * react-compiler-runtime.development.js
+ *
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+var F;
+function ne() {
+  return F || (F = 1, process.env.NODE_ENV !== "production" && function() {
+    var s = M.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE;
+    V.c = function(e) {
+      var t = s.H;
+      return t === null && console.error(
+        `Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
+1. You might have mismatching versions of React and the renderer (such as React DOM)
+2. You might be breaking the Rules of Hooks
+3. You might have more than one copy of React in the same app
+See https://react.dev/link/invalid-hook-call for tips about how to debug and fix this problem.`
+      ), t.useMemoCache(e);
+    };
+  }()), V;
+}
+var G;
+function se() {
+  return G || (G = 1, process.env.NODE_ENV === "production" ? L.exports = te() : L.exports = ne()), L.exports;
+}
+var C = se();
+function k(s, e) {
+  let t = null, n = function(...a) {
+    t && clearTimeout(t), t = setTimeout(() => {
+      s(...a);
+    }, e);
   };
-  return r.cancel = () => clearTimeout(n), r;
+  return n.cancel = () => clearTimeout(t), n;
 }
-function U(e) {
-  const t = /* @__PURE__ */ new Map(), n = function(...r) {
-    const o = JSON.stringify(r);
-    if (t.has(o))
-      return t.get(o);
-    const a = e(...r);
-    return t.set(o, a), a;
+function re(s) {
+  const e = /* @__PURE__ */ new Map(), t = function(...n) {
+    const a = JSON.stringify(n);
+    if (e.has(a))
+      return e.get(a);
+    const r = s(...n);
+    return e.set(a, r), r;
   };
-  return n.cache = t, n;
+  return t.cache = e, t;
 }
-const y = () => Math.random().toString().slice(2), K = (e) => {
-  const { current: { computedHash: t } } = j({
-    /**
-     * Getter for the computed hash function.
-     *
-     * - Initializes with an empty array and a random hash.
-     * - Returns a function that compares the current array to the previous one.
-     * - Updates the hash if any difference is detected.
-     */
-    get computedHash() {
-      let n = [], r = y();
-      return (o) => {
-        let a = !1;
-        return a = a || !o != !n, a = a || o?.length != n?.length, a = a || o.some((s, i) => s != n[i]), n = o, a && (r = y()), r;
-      };
-    }
+const q = () => Math.random().toString().slice(2), oe = (s) => {
+  const e = P({
+    values: [],
+    id: q()
   });
-  return t(e);
-}, T = "@--change-event";
-class $ extends Event {
-  constructor(t, n) {
-    super(String(t)), this.event = t, this.value = n;
+  let t = !1;
+  return t = t || !s != !e.current.values, t = t || s?.length != e.current.values?.length, t = t || s?.some((n, a) => n != e.current.values[a]), t && (e.current.values = s, e.current.id = q()), e.current.id;
+}, I = "@--change-event";
+class ae extends Event {
+  constructor(e, t) {
+    super(String(e)), this.event = e, this.value = t;
   }
 }
-class R extends Event {
-  constructor(t) {
-    super(T, t), this.value = t;
+class J extends Event {
+  constructor(e) {
+    super(I, e), this.value = e;
   }
 }
-class J extends EventTarget {
+class ie extends EventTarget {
   /**
    * Create a new Context instance.
    * @param name - The name of the context (for debugging).
    */
-  constructor(t) {
-    console.log("[CONTEXT] %s", t), super(), this.name = t;
+  constructor(e) {
+    super(), this.name = e;
   }
   /**
    * The current data held by the context.
@@ -69,11 +108,11 @@ class J extends EventTarget {
    * @param key - The key to update.
    * @param value - The new value.
    */
-  publish(t, n) {
-    if (n != this.data[t]) {
-      this.data[t] = n;
-      let r = new $(t, n);
-      this.dispatchEvent(r), this.dispatchEvent(new R(r));
+  publish(e, t) {
+    if (t != this.data[e]) {
+      this.data[e] = t;
+      let n = new ae(e, t);
+      this.dispatchEvent(n), this.dispatchEvent(new J(n));
     }
   }
   /**
@@ -82,389 +121,582 @@ class J extends EventTarget {
    * @param _listener - Callback invoked with the new value.
    * @returns Unsubscribe function.
    */
-  subscribe(t, n) {
-    const r = ({ event: o, value: a }) => {
-      n(a);
+  subscribe(e, t) {
+    const n = ({
+      event: a,
+      value: r
+    }) => {
+      t(r);
     };
-    return this.addEventListener(String(t), r), t in this.data && n(this.data[t]), () => this.removeEventListener(String(t), r);
+    return this.addEventListener(String(e), n), e in this.data && t(this.data[e]), () => this.removeEventListener(String(e), n);
   }
-  subscribeAll(t) {
-    const n = (r) => {
-      if (r instanceof R) {
-        const { value: o } = r;
-        t(o.event, this.data);
+  subscribeAll(e) {
+    const t = (n) => {
+      if (n instanceof J) {
+        const {
+          value: a
+        } = n;
+        e(a.event, this.data);
       }
     };
-    return this.addEventListener(String(T), n), () => this.removeEventListener(String(T), n);
+    return this.addEventListener(String(I), t), () => this.removeEventListener(String(I), t);
   }
 }
-const S = U((e) => new J(e)), b = (e = "noname") => {
-  const t = g(() => S(e), [e]);
-  return m(() => (t.useCounter += 1, () => {
-    t.useCounter -= 1, t.useCounter <= 0 && setTimeout(() => {
-      t.useCounter <= 0 && S.cache.delete(JSON.stringify([e]));
+const A = re((s) => new ie(s)), w = (s = "noname") => {
+  const e = D(() => A(s), [s]);
+  return g(() => (e.useCounter += 1, () => {
+    e.useCounter -= 1, e.useCounter <= 0 && setTimeout(() => {
+      e.useCounter <= 0 && A.cache.delete(JSON.stringify([s]));
     }, 100);
-  }), [t]), t;
-}, V = (e, ...t) => {
-  const n = new Error("[ctx] useRegistryChecker failed " + JSON.stringify({ names: t, ctx: e?.name ?? "undefined" }));
-  m(
-    () => {
-      if (e)
-        return t.some((r) => e.registry.has(r)) && console.error(n), t.forEach((r) => e.registry.add(r)), () => {
-          t.forEach((r) => e.registry.delete(r));
-        };
-    },
-    [e, t.length]
-  );
-}, re = (e, t, n) => {
-  m(() => {
-    e && e.data[t] != n && e.publish(t, n);
-  }, [t, n, e]), V(e, t);
-}, W = (e, t, n = 0) => {
-  const [{ value: r }, o] = p(() => ({ value: e?.data?.[t] }));
-  return m(() => {
-    if (e) {
-      let a = n == 0 ? (i) => o({ value: i }) : C((i) => o({ value: i }), n), s = e.subscribe(t, a);
-      return r != e.data[t] && o({ value: e.data[t] }), () => {
-        s();
+  }), [e]), e;
+}, W = (s, ...e) => {
+  const t = C.c(6), n = e;
+  new Error("[ctx] useRegistryChecker failed " + JSON.stringify({
+    names: n,
+    ctx: s?.name ?? "undefined"
+  }));
+  let a;
+  t[0] !== s || t[1] !== n ? (a = () => {
+    if (s)
+      return n.some((l) => s.registry.has(l)), n.forEach((l) => s.registry.add(l)), () => {
+        n.forEach((l) => s.registry.delete(l));
+      };
+  }, t[0] = s, t[1] = n, t[2] = a) : a = t[2];
+  let r;
+  t[3] !== s || t[4] !== n.length ? (r = [s, n.length], t[3] = s, t[4] = n.length, t[5] = r) : r = t[5], g(a, r);
+}, ke = (s, e, t) => {
+  const n = C.c(5);
+  let a, r;
+  n[0] !== s || n[1] !== e || n[2] !== t ? (a = () => {
+    s && s.data[e] != t && s.publish(e, t);
+  }, r = [e, t, s], n[0] = s, n[1] = e, n[2] = t, n[3] = a, n[4] = r) : (a = n[3], r = n[4]), g(a, r), W(s, e);
+}, le = (s, e, t) => {
+  const n = C.c(11), a = t === void 0 ? 0 : t;
+  let r;
+  n[0] !== s?.data || n[1] !== e ? (r = () => ({
+    value: s?.data?.[e]
+  }), n[0] = s?.data, n[1] = e, n[2] = r) : r = n[2];
+  const [l, i] = R(r), {
+    value: o
+  } = l;
+  let u;
+  n[3] !== s || n[4] !== a || n[5] !== e || n[6] !== o ? (u = () => {
+    if (s) {
+      const d = a == 0 ? (m) => i({
+        value: m
+      }) : k((m) => i({
+        value: m
+      }), a), f = s.subscribe(e, d);
+      return o != s.data[e] && i({
+        value: s.data[e]
+      }), () => {
+        f();
       };
     }
-  }, [t, e]), e?.data[t];
-}, se = (e, t, n) => {
-  const [, r] = p(0), o = g(
-    () => n(e?.data[t]),
-    [n, e?.data[t]]
-  );
-  return m(() => {
-    if (e) {
-      let a = o, s = () => {
-        let c = n(e.data[t]);
-        c != a && (a = c, r((l) => l + 1));
-      }, i = e.subscribe(t, s);
-      return s(), () => i();
+  }, n[3] = s, n[4] = a, n[5] = e, n[6] = o, n[7] = u) : u = n[7];
+  let c;
+  return n[8] !== s || n[9] !== e ? (c = [e, s], n[8] = s, n[9] = e, n[10] = c) : c = n[10], g(u, c), s?.data[e];
+}, Oe = (s, e, t) => {
+  const [, n] = R(0), a = D(() => t(s?.data[e]), [t, s?.data[e]]);
+  return g(() => {
+    if (s) {
+      let r = a, l = () => {
+        let o = t(s.data[e]);
+        o != r && (r = o, n((u) => u + 1));
+      }, i = s.subscribe(e, l);
+      return l(), () => i();
     }
-  }, [t, e]), o;
-}, L = (e, ...t) => {
-  m(() => {
-    if (e)
-      for (let [n, r] of t)
-        e.data[n] != r && e.publish(n, r);
-  }, [e, K(t.flat())]), V(e, ...t.map((n) => n[0]));
-}, ae = (e, ...t) => {
-  const [, n] = p(0), r = t.map((o) => e?.data?.[o]);
-  return m(() => {
-    if (e) {
-      let o = r;
-      const a = C(() => {
-        let c = t.map((l) => e?.data?.[l]);
-        t.some((l, u) => o[u] != c[u]) && (o = c, n((l) => l + 1));
-      }, 1);
-      let s = t.map((c) => e.subscribe(c, a)), i = setTimeout(a, 1);
+  }, [e, s]), a;
+}, Y = (s, ...e) => {
+  g(() => {
+    if (s)
+      for (let [t, n] of e)
+        s.data[t] != n && s.publish(t, n);
+  }, [s, oe(e.flat())]), W(s, ...e.map((t) => t[0]));
+}, Ae = (s, ...e) => {
+  const t = C.c(18), n = e, [, a] = R(0);
+  let r;
+  if (t[0] !== s?.data || t[1] !== n) {
+    let c;
+    t[3] !== s?.data ? (c = (d) => s?.data?.[d], t[3] = s?.data, t[4] = c) : c = t[4], r = n.map(c), t[0] = s?.data, t[1] = n, t[2] = r;
+  } else
+    r = t[2];
+  const l = r;
+  let i;
+  t[5] !== s || t[6] !== n || t[7] !== l || t[8] !== a ? (i = () => {
+    if (s) {
+      let c = l;
+      const d = k(() => {
+        const p = n.map((h) => s?.data?.[h]);
+        n.some((h, b) => c[b] != p[b]) && (c = p, a(ce));
+      }, 1), f = n.map((p) => s.subscribe(p, d)), m = setTimeout(d, 1);
       return () => {
-        clearTimeout(i), a.cancel(), s.forEach((c) => c());
+        clearTimeout(m), d.cancel(), f.forEach(ue);
       };
     }
-  }, [e, ...t]), Object.fromEntries(t.map((o, a) => [o, r[a]]));
-}, oe = (e, t = 50, ...n) => {
-  const [, r] = p(0), o = n.map((a) => e?.data?.[a]);
-  return m(() => {
-    if (e) {
-      let a = o;
-      const s = C(() => {
-        let l = n.map((u) => e?.data?.[u]);
-        n.some((u, d) => a[d] != l[d]) && (a = l, r((u) => u + 1));
-      }, t);
-      let i = n.map((l) => e.subscribe(l, s)), c = setTimeout(s, 1);
+  }, t[5] = s, t[6] = n, t[7] = l, t[8] = a, t[9] = i) : i = t[9];
+  let o;
+  t[10] !== s || t[11] !== n ? (o = [s, ...n], t[10] = s, t[11] = n, t[12] = o) : o = t[12], g(i, o);
+  let u;
+  if (t[13] !== n || t[14] !== l) {
+    let c;
+    t[16] !== l ? (c = (d, f) => [d, l[f]], t[16] = l, t[17] = c) : c = t[17], u = Object.fromEntries(n.map(c)), t[13] = n, t[14] = l, t[15] = u;
+  } else
+    u = t[15];
+  return u;
+}, Ke = (s, e, ...t) => {
+  const n = C.c(14), a = e === void 0 ? 50 : e, r = t, [, l] = R(0);
+  let i;
+  if (n[0] !== s?.data || n[1] !== r) {
+    let d;
+    n[3] !== s?.data ? (d = (f) => s?.data?.[f], n[3] = s?.data, n[4] = d) : d = n[4], i = r.map(d), n[0] = s?.data, n[1] = r, n[2] = i;
+  } else
+    i = n[2];
+  const o = i;
+  let u;
+  n[5] !== s || n[6] !== a || n[7] !== r || n[8] !== o || n[9] !== l ? (u = () => {
+    if (s) {
+      let d = o;
+      const f = k(() => {
+        const h = r.map((b) => s?.data?.[b]);
+        r.some((b, S) => d[S] != h[S]) && (d = h, l(fe));
+      }, a), m = r.map((h) => s.subscribe(h, f)), p = setTimeout(f, 1);
       return () => {
-        clearTimeout(c), s.cancel(), i.forEach((l) => l());
+        clearTimeout(p), f.cancel(), m.forEach(de);
       };
     }
-  }, [e, ...n]), o;
-}, ce = (e, t) => {
-  const n = (s) => [
-    e,
-    ...Object.entries(s ?? {}).sort((i, c) => i[0].localeCompare(c[0])).flat()
-  ].join("-"), r = /* @__PURE__ */ new Set(), o = ({}) => /* @__PURE__ */ h(D, {}), a = (s) => {
-    const i = t(s), c = n(s), l = b(c), u = g(() => new Error().stack, []);
-    return L(
-      l,
-      ...Object.entries(i)
-    ), m(() => {
-      if (r.has(c)) {
-        const d = new Error("RootContext " + c + " are mounted more than once");
-        throw d.stack = u, d;
+  }, n[5] = s, n[6] = a, n[7] = r, n[8] = o, n[9] = l, n[10] = u) : u = n[10];
+  let c;
+  return n[11] !== s || n[12] !== r ? (c = [s, ...r], n[11] = s, n[12] = r, n[13] = c) : c = n[13], g(u, c), o;
+};
+function ce(s) {
+  return s + 1;
+}
+function ue(s) {
+  return s();
+}
+function fe(s) {
+  return s + 1;
+}
+function de(s) {
+  return s();
+}
+const B = (s = void 0) => Object.keys(s ?? {}).sort().map((e) => {
+  const t = s?.[e];
+  if (t !== null && (typeof t == "object" || typeof t == "function"))
+    throw new Error(`Parameter "${e}" must be a primitive value (string, number, bigint, null, or undefined), but received ${typeof t}`);
+  return e + "=" + t;
+}).join("&"), Le = (s, e) => {
+  const t = (i) => [s, B(i)].filter(Boolean).join("?"), n = /* @__PURE__ */ new Set(), a = (i) => {
+    const o = C.c(5), u = e(i), c = t(i), d = w(c);
+    let f;
+    o[0] === Symbol.for("react.memo_cache_sentinel") ? (f = new Error(), o[0] = f) : f = o[0];
+    const m = f.stack;
+    let p;
+    o[1] !== u ? (p = Object.entries(u), o[1] = u, o[2] = p) : p = o[2], Y(d, ...p);
+    let h;
+    return o[3] !== c ? (h = () => {
+      if (n.has(c)) {
+        const b = new Error("RootContext " + c + " are mounted more than once");
+        throw b.stack = m, b;
       }
-      return r.add(c), () => {
-        r.delete(c);
+      return n.add(c), () => {
+        n.delete(c);
       };
-    }), /* @__PURE__ */ h(o, { ...s, ...i });
+    }, o[3] = c, o[4] = h) : h = o[4], g(h), u;
+  }, r = (i) => {
+    const o = C.c(1);
+    let u;
+    return o[0] === Symbol.for("react.memo_cache_sentinel") ? (u = /* @__PURE__ */ v($, {}), o[0] = u) : u = o[0], u;
+  }, l = (i) => {
+    const o = C.c(3), u = a(i);
+    let c;
+    return o[0] !== i || o[1] !== u ? (c = /* @__PURE__ */ v(r, { ...i, ...u }), o[0] = i, o[1] = u, o[2] = c) : c = o[2], c;
   };
-  return a.displayName = `StateContainer[${e}]`, o.displayName = `Debug[${e}]`, {
-    name: e,
-    resolveCtxName: n,
-    Root: a,
+  return a.displayName = `useState[${s}]`, l.displayName = `StateContainer[${s}]`, r.displayName = `Debug[${s}]`, {
+    name: s,
+    getCtxName: t,
+    useRootState: a,
+    Root: l,
     /**
      * Strict consumer: throws if the corresponding Root for these props isn't mounted.
      * Use in development/tests to fail fast when wiring is incorrect.
      */
-    useCtxStateStrict: (s) => {
-      const i = n(s), c = g(() => new Error().stack, []);
-      return m(() => {
-        if (!r.has(i)) {
-          const l = new Error("RootContext [" + i + "] is not mounted");
-          throw l.stack = c, l;
+    useCtxStateStrict: (i) => {
+      const o = t(i), u = D(() => new Error().stack, []);
+      return g(() => {
+        if (!n.has(o)) {
+          const c = new Error("RootContext [" + o + "] is not mounted");
+          throw c.stack = u, c;
         }
-      }, [i]), b(i);
+      }, [o]), w(o);
     },
     /**
      * Lenient consumer: schedules a console.error if the Root isn't mounted instead of throwing.
      * Useful in production to avoid hard crashes while still surfacing misconfiguration.
      */
-    useCtxState: (s) => {
-      const i = n(s), c = g(() => new Error().stack, []);
-      return m(() => {
-        if (!r.has(i)) {
-          const l = new Error("RootContext [" + i + "] is not mounted");
-          l.stack = c;
-          let u = setTimeout(() => console.error(l), 1e3);
-          return () => clearTimeout(u);
+    useCtxState: (i) => {
+      const o = t(i), u = D(() => new Error().stack, []);
+      return g(() => {
+        if (!n.has(o)) {
+          const c = new Error("RootContext [" + o + "] is not mounted");
+          c.stack = u;
+          let d = setTimeout(() => console.error(c), 1e3);
+          return () => clearTimeout(d);
         }
-      }, [r.has(i)]), b(i);
+      }, [n.has(o)]), w(o);
     }
   };
-}, I = /* @__PURE__ */ function() {
-  const e = /* @__PURE__ */ new WeakMap();
-  return (t) => {
-    let n = e.get(t);
-    return n || e.set(t, n = (t?.name ?? "") + ":" + Math.random().toString()), n;
-  };
-}(), O = (e) => [
-  ...Object.entries(e ?? {}).sort((t, n) => t[0].localeCompare(n[0])).flat()
-].join("-"), ie = ({ Wrapper: e = H }) => {
-  const t = b("auto-ctx"), [n, r] = p({}), o = F(
-    (s, i, c, l = 0) => {
-      const u = [s, I(i), O(c)].join(":");
-      return r((d) => ({
-        ...d,
-        [u]: {
-          ...d[u] ?? { Component: i, params: c, paramKey: O(c) },
-          counter: (d[u]?.counter ?? 0) + 1,
-          keepUntil: void 0
+}, he = (s) => {
+  const e = C.c(1);
+  let t;
+  return e[0] === Symbol.for("react.memo_cache_sentinel") ? (t = /* @__PURE__ */ v($, {}), e[0] = t) : t = e[0], t;
+}, me = ({
+  useStateFn: s,
+  params: e,
+  debugging: t
+}) => {
+  const n = s(e);
+  return t ? /* @__PURE__ */ v(he, { ...n }) : /* @__PURE__ */ v($, {});
+}, je = ({
+  Wrapper: s = x,
+  debugging: e = !1
+}) => {
+  const t = w("auto-ctx"), [n, a] = R({}), r = Z((i, o, u, c = 0) => {
+    const d = [i, B(u)].filter(Boolean).join("?");
+    return a((f) => ({
+      ...f,
+      [d]: {
+        ...f[d] ?? {
+          useStateFn: o,
+          params: u
+        },
+        counter: (f[d]?.counter ?? 0) + 1,
+        keepUntil: void 0,
+        useStateFn: o
+      }
+    })), () => a(({
+      [d]: f,
+      ...m
+    }) => ({
+      ...m,
+      ...f?.counter > 1 || c > 0 ? {
+        [d]: {
+          ...f,
+          counter: f.counter - 1,
+          keepUntil: f.counter > 1 ? void 0 : Date.now() + c
         }
-      })), () => r(({ [u]: d, ...w }) => ({
-        ...w,
-        ...d?.counter > 1 || l > 0 ? {
-          [u]: {
-            ...d,
-            counter: d.counter - 1,
-            keepUntil: d.counter > 1 ? void 0 : Date.now() + l
-          }
-        } : {}
-      }));
-    },
-    []
-  ), a = g(
-    () => Object.entries(n).filter(([, { counter: s, keepUntil: i }]) => s <= 0 && i).toSorted(([, { keepUntil: s = 0 }], [, { keepUntil: i = 0 }]) => s - i)?.at(0),
-    [n]
-  );
-  return console.log({ state: n, nextDelete: a }), m(() => {
-    if (a) {
-      const [s, { keepUntil: i }] = a;
-      if (typeof i > "u")
-        throw new Error("Invalid state mfr");
-      let c = setTimeout(() => {
-        r(({ [s]: l, ...u }) => u);
-      }, Math.max(0, i - Date.now()));
+      } : {}
+    }));
+  }, []), l = D(() => Object.entries(n).filter(([, {
+    counter: i,
+    keepUntil: o
+  }]) => i <= 0 && o).toSorted(([, {
+    keepUntil: i = 0
+  }], [, {
+    keepUntil: o = 0
+  }]) => i - o)?.at(0), [n]);
+  return g(() => {
+    if (l) {
+      const [i, {
+        keepUntil: o
+      }] = l;
+      if (typeof o > "u") throw new Error("Invalid state mgr");
+      let u = setTimeout(() => {
+        a(({
+          [i]: c,
+          ...d
+        }) => d);
+      }, Math.max(0, o - Date.now()));
       return () => {
-        clearTimeout(c);
+        clearTimeout(u);
       };
     }
-  }, [a]), L(
-    t,
-    ["subscribe", o],
-    ["state", n]
-  ), /* @__PURE__ */ h(D, { children: Object.entries(n).filter(([, { counter: s, keepUntil: i = 0 }]) => s > 0 || i >= Date.now()).map(([s, { Component: i, params: c, counter: l, paramKey: u, keepUntil: d }]) => /* @__PURE__ */ h(e, { children: /* @__PURE__ */ h(i, { ...c }, u) }, s)) });
-}, le = ({ Root: e, resolveCtxName: t, name: n }, r = 0) => ({
-  useCtxState: (o) => {
-    const a = t(o), s = W(b("auto-ctx"), "subscribe");
-    return m(
-      () => s?.(n, e, o, r),
-      [e, s, n, a, r]
-    ), b(a);
+  }, [l]), Y(t, ["subscribe", r], ["state", n]), /* @__PURE__ */ v($, { children: Object.entries(n).filter(([, {
+    counter: i,
+    keepUntil: o = 0
+  }]) => i > 0 || o >= Date.now()).map(([i, {
+    useStateFn: o,
+    params: u
+  }]) => /* @__PURE__ */ v(s, { children: /* @__PURE__ */ v(me, { params: u, useStateFn: o, debugging: e }, i) }, i)) });
+}, Ue = ({
+  useRootState: s,
+  getCtxName: e,
+  name: t
+}, n = 0) => ({
+  useCtxState: (a) => {
+    const r = e(a), l = le(w("auto-ctx"), "subscribe");
+    return g(() => l?.(t, s, a, n), [s, l, t, r, n]), w(r);
   }
-}), ue = (e) => {
-  const [, t] = p(0), { proxy: n, finalGetter: r, openGetter: o, clean: a } = g(
-    () => {
-      const s = /* @__PURE__ */ new Set(), i = {}, c = /* @__PURE__ */ new Map(), l = new Proxy(
-        e?.data,
-        {
-          get(f, E) {
-            if (u)
-              return s.add(E), i[E] = f[E];
-            throw new Error("now allow here");
-          }
-        }
-      );
-      let u = !0, d = C(() => {
-        [...s.values()].some((f) => i[f] != e?.data?.[f]) && t((f) => f + 1);
-      }, 0), w = () => {
-        u = !0, s.clear();
-      }, k = () => {
-        u = !1, [...s.values()].filter((f) => !c.has(f)).forEach((f) => {
-          c.set(f, e?.subscribe(f, d));
-        }), [...c.keys()].filter((f) => !s.has(f)).forEach((f) => {
-          c.get(f)?.(), c.delete(f);
-        });
-      };
-      return { proxy: l, finalGetter: k, openGetter: w, clean: () => {
-        w(), k(), t((f) => f + 1);
-      } };
-    },
-    [e]
-  );
-  return o(), setTimeout(r, 0), m(
-    () => () => a(),
-    [a]
-  ), n;
+}), Ve = (s) => {
+  const [, e] = R(0), {
+    proxy: t,
+    finalGetter: n,
+    openGetter: a,
+    clean: r
+  } = D(() => {
+    const l = /* @__PURE__ */ new Set(), i = {}, o = /* @__PURE__ */ new Map(), u = new Proxy(s?.data, {
+      get(h, b) {
+        if (c)
+          return l.add(b), i[b] = h[b];
+        throw new Error("useQuickSubscribe: Cannot access context data outside render phase. Destructure needed properties immediately during render.");
+      },
+      ownKeys(h) {
+        return console.warn("useQuickSubscribe: Rest object operations aren't recommended as they bypass selective subscription and may cause performance issues"), Reflect.ownKeys(h);
+      }
+    });
+    let c = !0, d = k(() => {
+      [...l.values()].some((h) => i[h] != s?.data?.[h]) && e((h) => h + 1);
+    }, 0), f = () => {
+      c = !0, l.clear();
+    }, m = () => {
+      c = !1, [...l.values()].filter((h) => !o.has(h)).forEach((h) => {
+        o.set(h, s?.subscribe(h, d));
+      }), [...o.keys()].filter((h) => !l.has(h)).forEach((h) => {
+        o.get(h)?.(), o.delete(h);
+      });
+    };
+    return {
+      proxy: u,
+      finalGetter: m,
+      openGetter: f,
+      clean: () => {
+        f(), m(), e((h) => h + 1);
+      }
+    };
+  }, [s]);
+  return a(), setTimeout(n, 0), g(() => () => r(), [r]), t;
 };
-function z(e) {
-  return { highlight: g(
-    () => P(e.toLowerCase().split(" "), "gi"),
-    [e]
-  ) };
+function pe(s) {
+  const e = C.c(4);
+  let t;
+  e[0] !== s ? (t = s ? ve(s.trim().toLowerCase().split(" "), "gi") : void 0, e[0] = s, e[1] = t) : t = e[1];
+  const n = t;
+  let a;
+  return e[2] !== n ? (a = {
+    highlight: n
+  }, e[2] = n, e[3] = a) : a = e[3], a;
 }
-function B(e) {
-  return e.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+function be(s) {
+  return s.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
 }
-function P(e, t = "gi") {
-  const n = e.map(B).join("|");
-  return new RegExp(`(${n})`, t);
+function ve(s, e = "gi") {
+  const t = s.map(be).join("|");
+  return new RegExp(`(${t})`, e);
 }
-function q(e, t) {
-  const n = [];
-  let r = 0;
-  for (const o of e.matchAll(t)) {
-    const [a] = o, s = o.index;
-    s > r && n.push(e.slice(r, s)), n.push(/* @__PURE__ */ h("mark", { children: a }, s)), r = s + a.length;
+function ge(s, e) {
+  const t = [];
+  let n = 0;
+  for (const a of s.matchAll(e)) {
+    const [r] = a, l = a.index;
+    l > n && t.push(s.slice(n, l)), t.push(/* @__PURE__ */ v("mark", { children: r }, l)), n = l + r.length;
   }
-  return r < e.length && n.push(e.slice(r)), n;
+  return n < s.length && t.push(s.slice(n)), t;
 }
-const M = A.createContext({
+const Q = M.createContext({
   highlight: void 0
-}), Q = ({ children: e, highlight: t }) => /* @__PURE__ */ h(M.Provider, { value: z(t), children: e }), X = ({ text: e }) => {
-  const { highlight: t } = G(M), n = g(
-    () => t ? q(e, t) : e,
-    [e, t]
-  );
-  return /* @__PURE__ */ h(D, { children: n });
-}, x = ({ name: e, value: t }) => {
-  const n = g(() => {
-    try {
-      return JSON.stringify({ [e]: t }, null, 2);
-    } catch (r) {
-      return String(r);
-    }
-  }, [e, t]);
-  return /* @__PURE__ */ h("pre", { children: n });
-}, _ = ({ selectedKey: e, setKey: t, currentKey: n, highlight: r, ...o }) => {
-  const a = S(n), s = j(void 0);
-  return m(() => {
-    if (s.current) {
-      let i = C(() => {
-        s.current && (s.current?.classList.add("state-key-updated"), requestAnimationFrame(() => s.current?.classList.remove("state-key-updated")));
+}), Ce = (s) => {
+  const e = C.c(3), {
+    children: t,
+    highlight: n
+  } = s, a = pe(n);
+  let r;
+  return e[0] !== t || e[1] !== a ? (r = /* @__PURE__ */ v(Q.Provider, { value: a, children: t }), e[0] = t, e[1] = a, e[2] = r) : r = e[2], r;
+}, Se = (s) => {
+  const e = C.c(5), {
+    text: t
+  } = s, {
+    highlight: n
+  } = ee(Q);
+  let a;
+  e[0] !== n || e[1] !== t ? (a = n ? ge(t, n) : t, e[0] = n, e[1] = t, e[2] = a) : a = e[2];
+  const r = a;
+  let l;
+  return e[3] !== r ? (l = /* @__PURE__ */ v($, { children: r }), e[3] = r, e[4] = l) : l = e[4], l;
+}, z = (s) => {
+  const e = C.c(5), {
+    name: t,
+    value: n
+  } = s;
+  let a;
+  try {
+    let i;
+    e[0] !== t || e[1] !== n ? (i = JSON.stringify({
+      [t]: n
+    }, null, 2), e[0] = t, e[1] = n, e[2] = i) : i = e[2], a = i;
+  } catch (i) {
+    a = String(i);
+  }
+  const r = a;
+  let l;
+  return e[3] !== r ? (l = /* @__PURE__ */ v("pre", { children: r }), e[3] = r, e[4] = l) : l = e[4], l;
+}, _e = (s) => {
+  const e = C.c(26);
+  let t, n, a, r;
+  if (e[0] !== s) {
+    const {
+      selectedKey: E,
+      setKey: y,
+      currentKey: N,
+      highlight: O,
+      ..._
+    } = s;
+    a = E, r = y, t = N, n = _, e[0] = s, e[1] = t, e[2] = n, e[3] = a, e[4] = r;
+  } else
+    t = e[1], n = e[2], a = e[3], r = e[4];
+  let l;
+  e[5] !== t ? (l = A(t), e[5] = t, e[6] = l) : l = e[6];
+  const i = l, o = P(void 0);
+  let u, c;
+  e[7] !== i ? (u = () => {
+    if (o.current) {
+      const E = k(() => {
+        o.current && (o.current?.classList.add("state-key-updated"), requestAnimationFrame(() => o.current?.classList.remove("state-key-updated")));
       }, 5);
-      return a.subscribeAll(i);
-    }
-  }, [a, s]), /* @__PURE__ */ v(
-    "div",
-    {
-      ref: s,
-      className: "state-key",
-      title: n,
-      "data-active": n == e,
-      onClick: () => t(n),
-      ...o,
-      children: [
-        /* @__PURE__ */ h("div", { className: "state-key-name", children: /* @__PURE__ */ h(X, { text: String(n) }) }),
-        /* @__PURE__ */ v("div", { className: "state-key-meta", children: [
-          Object.keys(a.data).length,
-          " items"
-        ] })
-      ]
+      return i.subscribeAll(E);
     }
-  );
-}, N = S.cache, Y = ({ Component: e }) => {
-  const [t, n] = p(() => [...N.keys()]), [r, o] = p(""), [a, s] = p("");
-  m(() => {
-    let c = setInterval(() => {
-      n(
-        (l) => l.length != N.size ? [...N.keys()] : l
-      );
+  }, c = [i, o], e[7] = i, e[8] = u, e[9] = c) : (u = e[8], c = e[9]), g(u, c);
+  const d = t == a;
+  let f;
+  e[10] !== t || e[11] !== r ? (f = () => r(t), e[10] = t, e[11] = r, e[12] = f) : f = e[12];
+  const m = String(t);
+  let p;
+  e[13] !== m ? (p = /* @__PURE__ */ v("div", { className: "state-key-name", children: /* @__PURE__ */ v(Se, { text: m }) }), e[13] = m, e[14] = p) : p = e[14];
+  let h;
+  e[15] !== i.data ? (h = Object.keys(i.data), e[15] = i.data, e[16] = h) : h = e[16];
+  let b;
+  e[17] !== h.length ? (b = /* @__PURE__ */ T("div", { className: "state-key-meta", children: [
+    h.length,
+    " items"
+  ] }), e[17] = h.length, e[18] = b) : b = e[18];
+  let S;
+  return e[19] !== t || e[20] !== n || e[21] !== d || e[22] !== f || e[23] !== p || e[24] !== b ? (S = /* @__PURE__ */ T("div", { ref: o, className: "state-key", title: t, "data-active": d, onClick: f, ...n, children: [
+    p,
+    b
+  ] }), e[19] = t, e[20] = n, e[21] = d, e[22] = f, e[23] = p, e[24] = b, e[25] = S) : S = e[25], S;
+}, j = A.cache, Re = (s) => {
+  const e = C.c(27), {
+    Component: t
+  } = s, [n, a] = R(ye), [r, l] = R(""), [i, o] = R("");
+  let u, c;
+  e[0] === Symbol.for("react.memo_cache_sentinel") ? (u = () => {
+    const _ = setInterval(() => {
+      a(Ne);
     }, 50);
-    return () => clearInterval(c);
-  }, [N]);
-  const i = g(
-    () => {
-      const c = r.toLowerCase().split(" ");
-      return (l) => {
-        const u = l.toLowerCase();
-        return c.every((d) => u.includes(d));
-      };
-    },
-    [r]
-  );
-  return /* @__PURE__ */ v("div", { className: "main-panel", children: [
-    /* @__PURE__ */ v("div", { className: "state-list", children: [
-      /* @__PURE__ */ h(
-        "input",
-        {
-          placeholder: "Type to Filter ...",
-          className: "state-filter",
-          value: r,
-          onChange: (c) => o(c.target.value)
-        }
-      ),
-      /* @__PURE__ */ h(Q, { highlight: r, children: t.map((c) => JSON.parse(c)?.[0]).filter((c) => c != "auto-ctx" && c).filter(i).map((c) => /* @__PURE__ */ h(_, { selectedKey: a, setKey: s, currentKey: c })) })
-    ] }),
-    /* @__PURE__ */ h("div", { className: "state-view", children: /* @__PURE__ */ h(Z, { dataKey: a, Component: e }, a) })
-  ] });
-}, Z = ({ dataKey: e, Component: t = x }) => {
-  const n = S(e), [r, o] = p({ ...n?.data });
-  return m(() => {
-    let a = C(o, 5);
-    return n.subscribeAll((s, i) => a({ ...i }));
-  }, [n]), /* @__PURE__ */ h(
-    t,
-    {
-      value: r,
-      name: e
-    }
-  );
-}, he = ({ toggleButton: e = "[x]", Component: t = x, ...n }) => {
-  const [r, o] = p(!1);
-  return /* @__PURE__ */ v(D, { children: [
-    /* @__PURE__ */ h("button", { className: "react-state-dev-btn", "data-active": r, onClick: () => o(!0), ...n, children: n?.children ?? "Toggle Dev Tool" }),
-    /* @__PURE__ */ v("div", { className: "react-state-dev-container", "data-active": r, children: [
-      /* @__PURE__ */ h("button", { className: "close-btn", onClick: () => o(!1), children: "[x]" }),
-      r && /* @__PURE__ */ h(Y, { Component: t })
-    ] })
-  ] });
+    return () => clearInterval(_);
+  }, c = [j], e[0] = u, e[1] = c) : (u = e[0], c = e[1]), g(u, c);
+  let d;
+  e[2] !== r ? (d = r.toLowerCase().split(" "), e[2] = r, e[3] = d) : d = e[3];
+  const f = d;
+  let m;
+  e[4] !== f ? (m = (_) => {
+    const K = _.toLowerCase();
+    return f.every((X) => K.includes(X));
+  }, e[4] = f, e[5] = m) : m = e[5];
+  const p = m;
+  let h;
+  e[6] === Symbol.for("react.memo_cache_sentinel") ? (h = (_) => l(_.target.value), e[6] = h) : h = e[6];
+  let b;
+  e[7] !== r ? (b = /* @__PURE__ */ v("input", { placeholder: "Type to Filter ...", className: "state-filter", value: r, onChange: h }), e[7] = r, e[8] = b) : b = e[8];
+  let S;
+  if (e[9] !== n || e[10] !== p || e[11] !== i) {
+    let _;
+    e[13] !== i ? (_ = (K) => /* @__PURE__ */ v(_e, { selectedKey: i, setKey: o, currentKey: K }, K), e[13] = i, e[14] = _) : _ = e[14], S = n.map(we).filter(De).filter(p).map(_), e[9] = n, e[10] = p, e[11] = i, e[12] = S;
+  } else
+    S = e[12];
+  let E;
+  e[15] !== r || e[16] !== S ? (E = /* @__PURE__ */ v(Ce, { highlight: r, children: S }), e[15] = r, e[16] = S, e[17] = E) : E = e[17];
+  let y;
+  e[18] !== b || e[19] !== E ? (y = /* @__PURE__ */ T("div", { className: "state-list", children: [
+    b,
+    E
+  ] }), e[18] = b, e[19] = E, e[20] = y) : y = e[20];
+  let N;
+  e[21] !== t || e[22] !== i ? (N = /* @__PURE__ */ v("div", { className: "state-view", children: /* @__PURE__ */ v(Ee, { dataKey: i, Component: t }, i) }), e[21] = t, e[22] = i, e[23] = N) : N = e[23];
+  let O;
+  return e[24] !== N || e[25] !== y ? (O = /* @__PURE__ */ T("div", { className: "main-panel", children: [
+    y,
+    N
+  ] }), e[24] = N, e[25] = y, e[26] = O) : O = e[26], O;
+}, Ee = (s) => {
+  const e = C.c(11), {
+    dataKey: t,
+    Component: n
+  } = s, a = n === void 0 ? z : n;
+  let r;
+  e[0] !== t ? (r = A(t), e[0] = t, e[1] = r) : r = e[1];
+  const l = r, i = l?.data;
+  let o;
+  e[2] !== i ? (o = {
+    ...i
+  }, e[2] = i, e[3] = o) : o = e[3];
+  const [u, c] = R(o);
+  let d, f;
+  e[4] !== l ? (d = () => {
+    const p = k(c, 5);
+    return l.subscribeAll((h, b) => p({
+      ...b
+    }));
+  }, f = [l], e[4] = l, e[5] = d, e[6] = f) : (d = e[5], f = e[6]), g(d, f);
+  let m;
+  return e[7] !== a || e[8] !== u || e[9] !== t ? (m = /* @__PURE__ */ v(a, { value: u, name: t }), e[7] = a, e[8] = u, e[9] = t, e[10] = m) : m = e[10], m;
+};
+function ye() {
+  return [...j.keys()];
+}
+function Ne(s) {
+  return s.length != j.size ? [...j.keys()] : s;
+}
+function we(s) {
+  return JSON.parse(s)?.[0];
+}
+function De(s) {
+  return s != "auto-ctx" && s;
+}
+const Ie = (s) => {
+  const e = C.c(19);
+  let t, n, a;
+  e[0] !== s ? ({
+    toggleButton: n,
+    Component: a,
+    ...t
+  } = s, e[0] = s, e[1] = t, e[2] = n, e[3] = a) : (t = e[1], n = e[2], a = e[3]);
+  const r = a === void 0 ? z : a, [l, i] = R(!1);
+  let o;
+  e[4] === Symbol.for("react.memo_cache_sentinel") ? (o = () => i(!0), e[4] = o) : o = e[4];
+  const u = t?.children ?? "Toggle Dev Tool";
+  let c;
+  e[5] !== l || e[6] !== t || e[7] !== u ? (c = /* @__PURE__ */ v("button", { className: "react-state-dev-btn", "data-active": l, onClick: o, ...t, children: u }), e[5] = l, e[6] = t, e[7] = u, e[8] = c) : c = e[8];
+  let d;
+  e[9] === Symbol.for("react.memo_cache_sentinel") ? (d = /* @__PURE__ */ v("button", { className: "close-btn", onClick: () => i(!1), children: "[x]" }), e[9] = d) : d = e[9];
+  let f;
+  e[10] !== r || e[11] !== l ? (f = l && /* @__PURE__ */ v(Re, { Component: r }), e[10] = r, e[11] = l, e[12] = f) : f = e[12];
+  let m;
+  e[13] !== l || e[14] !== f ? (m = /* @__PURE__ */ T("div", { className: "react-state-dev-container", "data-active": l, children: [
+    d,
+    f
+  ] }), e[13] = l, e[14] = f, e[15] = m) : m = e[15];
+  let p;
+  return e[16] !== c || e[17] !== m ? (p = /* @__PURE__ */ T($, { children: [
+    c,
+    m
+  ] }), e[16] = c, e[17] = m, e[18] = p) : p = e[18], p;
 };
 export {
-  ie as AutoRootCtx,
-  J as Context,
-  he as DevToolContainer,
-  le as createAutoCtx,
-  ce as createRootCtx,
-  S as getContext,
-  K as useArrayHash,
-  b as useDataContext,
-  re as useDataSource,
-  L as useDataSourceMultiple,
-  W as useDataSubscribe,
-  ae as useDataSubscribeMultiple,
-  oe as useDataSubscribeMultipleWithDebounce,
-  se as useDataSubscribeWithTransform,
-  ue as useQuickSubscribe
+  je as AutoRootCtx,
+  ie as Context,
+  Ie as DevToolContainer,
+  Ue as createAutoCtx,
+  Le as createRootCtx,
+  A as getContext,
+  oe as useArrayChangeId,
+  w as useDataContext,
+  ke as useDataSource,
+  Y as useDataSourceMultiple,
+  le as useDataSubscribe,
+  Ae as useDataSubscribeMultiple,
+  Ke as useDataSubscribeMultipleWithDebounce,
+  Oe as useDataSubscribeWithTransform,
+  Ve as useQuickSubscribe
 };
 //# sourceMappingURL=index.es.js.map