react-state-custom 1.0.22 → 1.0.23

package/dist/index.es.js

@@ -1,24 +1,24 @@
-import { useRef as O, useMemo as g, useEffect as f, useState as v, useCallback as A, Fragment as G, createElement as J } from "react";
-import { jsx as o, Fragment as y, jsxs as m } from "react/jsx-runtime";
-function w(t, e) {
-  let n = null, a = function(...r) {
+import { useRef as O, useMemo as b, useEffect as f, useState as v, useCallback as $, Fragment as H, createElement as J } from "react";
+import { jsx as o, Fragment as x, jsxs as m } from "react/jsx-runtime";
+function C(t, e) {
+  let n = null, r = function(...a) {
     n && clearTimeout(n), n = setTimeout(() => {
-      t(...r);
+      t(...a);
     }, e);
   };
-  return a.cancel = () => clearTimeout(n), a;
+  return r.cancel = () => clearTimeout(n), r;
 }
-function H(t) {
-  const e = /* @__PURE__ */ new Map(), n = function(...a) {
-    const r = JSON.stringify(a);
-    if (e.has(r))
-      return e.get(r);
-    const s = t(...a);
-    return e.set(r, s), s;
+function W(t) {
+  const e = /* @__PURE__ */ new Map(), n = function(...r) {
+    const a = JSON.stringify(r);
+    if (e.has(a))
+      return e.get(a);
+    const s = t(...r);
+    return e.set(a, s), s;
   };
   return n.cache = e, n;
 }
-const D = () => Math.random().toString().slice(2), L = (t) => {
+const A = () => Math.random().toString().slice(2), _ = (t) => {
   const { current: { computedHash: e } } = O({
     /**
      * Getter for the computed hash function.
@@ -28,21 +28,26 @@ const D = () => Math.random().toString().slice(2), L = (t) => {
      * - Updates the hash if any difference is detected.
      */
     get computedHash() {
-      let n = [], a = D();
-      return (r) => {
+      let n = [], r = A();
+      return (a) => {
         let s = !1;
-        return s = s || !r != !n, s = s || r?.length != n?.length, s = s || r.some((c, l) => c != n[l]), n = r, s && (a = D()), a;
+        return s = s || !a != !n, s = s || a?.length != n?.length, s = s || a.some((c, l) => c != n[l]), n = a, s && (r = A()), r;
       };
     }
   });
   return e(t);
-};
-class W extends Event {
+}, T = "@--change-event";
+class K extends Event {
   constructor(e, n) {
-    super(e), this.event = e, this.value = n;
+    super(String(e)), this.event = e, this.value = n;
+  }
+}
+class V extends Event {
+  constructor(e) {
+    super(T, e), this.value = e;
   }
 }
-class _ extends EventTarget {
+class q extends EventTarget {
   /**
    * Create a new Context instance.
    * @param name - The name of the context (for debugging).
@@ -50,7 +55,6 @@ class _ extends EventTarget {
   constructor(e) {
     console.log("[CONTEXT] %s", e), super(), this.name = e;
   }
-  // private event = new EventEmitter()
   /**
    * The current data held by the context.
    */
@@ -65,7 +69,11 @@ class _ extends EventTarget {
    * @param value - The new value.
    */
   publish(e, n) {
-    n != this.data[e] && (this.data[e] = n, this.dispatchEvent(new W(String(e), n)));
+    if (n != this.data[e]) {
+      this.data[e] = n;
+      let r = new K(e, n);
+      this.dispatchEvent(r), this.dispatchEvent(new V(r));
+    }
   }
   /**
    * Subscribe to changes for a specific key in the context.
@@ -74,119 +82,128 @@ class _ extends EventTarget {
    * @returns Unsubscribe function.
    */
   subscribe(e, n) {
-    const a = ({ event: r, value: s }) => {
+    const r = ({ event: a, value: s }) => {
       n(s);
     };
-    return this.addEventListener(String(e), a), e in this.data && n(this.data[e]), () => (this.removeEventListener(String(e), a), void 0);
+    return this.addEventListener(String(e), r), e in this.data && n(this.data[e]), () => this.removeEventListener(String(e), r);
+  }
+  subscribeAll(e) {
+    const n = (r) => {
+      if (r instanceof V) {
+        const { value: a } = r;
+        e(a.event, this.data);
+      }
+    };
+    return this.addEventListener(String(T), n), () => this.removeEventListener(String(T), n);
   }
 }
-const T = H((t) => new _(t)), E = (t = "noname") => g(() => T(t), [t]), $ = (t, ...e) => {
+const y = W((t) => new q(t)), E = (t = "noname") => b(() => y(t), [t]), k = (t, ...e) => {
   const n = new Error("[ctx] useRegistryChecker failed " + JSON.stringify({ names: e, ctx: t?.name ?? "undefined" }));
   f(
     () => {
       if (t)
-        return e.some((a) => t.registry.has(a)) && console.error(n), e.forEach((a) => t.registry.add(a)), () => {
-          e.forEach((a) => t.registry.delete(a));
+        return e.some((r) => t.registry.has(r)) && console.error(n), e.forEach((r) => t.registry.add(r)), () => {
+          e.forEach((r) => t.registry.delete(r));
         };
     },
     [t, e.length]
   );
-}, ae = (t, e, n) => {
+}, ce = (t, e, n) => {
   f(() => {
     t && t.data[e] != n && t.publish(e, n);
-  }, [e, n, t]), $(t, e);
-}, I = (t, e, n = 0) => {
-  const [{ value: a }, r] = v(() => ({ value: t?.data?.[e] }));
+  }, [e, n, t]), k(t, e);
+}, z = (t, e, n = 0) => {
+  const [{ value: r }, a] = v(() => ({ value: t?.data?.[e] }));
   return f(() => {
     if (t) {
-      let s = n == 0 ? (l) => r({ value: l }) : w((l) => r({ value: l }), n), c = t.subscribe(e, s);
-      return a != t.data[e] && r({ value: t.data[e] }), () => {
+      let s = n == 0 ? (l) => a({ value: l }) : C((l) => a({ value: l }), n), c = t.subscribe(e, s);
+      return r != t.data[e] && a({ value: t.data[e] }), () => {
         c();
       };
     }
   }, [e, t]), t?.data[e];
-}, re = (t, e, n) => {
-  const [, a] = v(0), r = g(
+}, le = (t, e, n) => {
+  const [, r] = v(0), a = b(
     () => n(t?.data[e]),
     [n, t?.data[e]]
   );
   return f(() => {
     if (t) {
-      let s = r, c = () => {
+      let s = a, c = () => {
         let i = n(t.data[e]);
-        i != s && (s = i, a((u) => u + 1));
+        i != s && (s = i, r((u) => u + 1));
       }, l = t.subscribe(e, c);
       return c(), () => l();
     }
-  }, [e, t]), r;
-}, k = (t, ...e) => {
+  }, [e, t]), a;
+}, R = (t, ...e) => {
   f(() => {
     if (t)
-      for (let [n, a] of e)
-        t.data[n] != a && t.publish(n, a);
-  }, [t, L(e.flat())]), $(t, ...e.map((n) => n[0]));
-}, se = (t, ...e) => {
-  const [, n] = v(0), a = e.map((r) => t?.data?.[r]);
+      for (let [n, r] of e)
+        t.data[n] != r && t.publish(n, r);
+  }, [t, _(e.flat())]), k(t, ...e.map((n) => n[0]));
+}, ie = (t, ...e) => {
+  const [, n] = v(0), r = e.map((a) => t?.data?.[a]);
   return f(() => {
     if (t) {
-      let r = a;
-      const s = w(() => {
+      let a = r;
+      const s = C(() => {
         let i = e.map((u) => t?.data?.[u]);
-        e.some((u, d) => r[d] != i[d]) && (r = i, n((u) => u + 1));
+        e.some((u, d) => a[d] != i[d]) && (a = i, n((u) => u + 1));
       }, 1);
       let c = e.map((i) => t.subscribe(i, s)), l = setTimeout(s, 1);
       return () => {
         clearTimeout(l), s.cancel(), c.forEach((i) => i());
       };
     }
-  }, [t, ...e]), Object.fromEntries(e.map((r, s) => [r, a[s]]));
-}, ce = (t, e = 50, ...n) => {
-  const [, a] = v(0), r = n.map((s) => t?.data?.[s]);
+  }, [t, ...e]), Object.fromEntries(e.map((a, s) => [a, r[s]]));
+}, oe = (t, e = 50, ...n) => {
+  const [, r] = v(0), a = n.map((s) => t?.data?.[s]);
   return f(() => {
     if (t) {
-      let s = r;
-      const c = w(() => {
+      let s = a;
+      const c = C(() => {
         let u = n.map((d) => t?.data?.[d]);
-        n.some((d, p) => s[p] != u[p]) && (s = u, a((d) => d + 1));
+        n.some((d, p) => s[p] != u[p]) && (s = u, r((d) => d + 1));
       }, e);
       let l = n.map((u) => t.subscribe(u, c)), i = setTimeout(c, 1);
       return () => {
         clearTimeout(i), c.cancel(), l.forEach((u) => u());
       };
     }
-  }, [t, ...n]), r;
-}, le = (t, e) => {
+  }, [t, ...n]), a;
+}, ue = (t, e) => {
   const n = (s) => [
     t,
     ...Object.entries(s ?? {}).sort((c, l) => c[0].localeCompare(l[0])).flat()
   ].join("-");
-  let a = /* @__PURE__ */ new Set();
-  const r = (s) => {
-    const c = e(s), l = n(s), i = E(l), u = g(() => new Error().stack, []);
-    return k(
+  let r = /* @__PURE__ */ new Set();
+  const a = (s) => {
+    const c = e(s), l = n(s), i = E(l), u = b(() => new Error().stack, []);
+    return R(
       i,
       ...Object.entries(c)
     ), f(() => {
-      if (a.has(l)) {
+      if (r.has(l)) {
         const d = new Error("RootContext " + l + " are mounted more than once");
         throw d.stack = u, d;
       }
-      return a.add(l), () => {
-        a.delete(l);
+      return r.add(l), () => {
+        r.delete(l);
       };
-    }), /* @__PURE__ */ o(y, {});
+    }), /* @__PURE__ */ o(x, {});
   };
-  return r.displayName = `State[${e?.name ?? "??"}]`, {
+  return a.displayName = `State[${e?.name ?? "??"}]`, {
     resolveCtxName: n,
-    Root: r,
+    Root: a,
     /**
      * 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 c = n(s), l = g(() => new Error().stack, []);
+      const c = n(s), l = b(() => new Error().stack, []);
       return f(() => {
-        if (!a.has(c)) {
+        if (!r.has(c)) {
           const i = new Error("RootContext [" + c + "] is not mounted");
           throw i.stack = l, i;
         }
@@ -197,30 +214,30 @@ const T = H((t) => new _(t)), E = (t = "noname") => g(() => T(t), [t]), $ = (t,
      * Useful in production to avoid hard crashes while still surfacing misconfiguration.
      */
     useCtxState: (s) => {
-      const c = n(s), l = g(() => new Error().stack, []);
+      const c = n(s), l = b(() => new Error().stack, []);
       return f(() => {
-        if (!a.has(c)) {
+        if (!r.has(c)) {
           const i = new Error("RootContext [" + c + "] is not mounted");
           i.stack = l;
           let u = setTimeout(() => console.error(i), 1e3);
           return () => clearTimeout(u);
         }
-      }, [a.has(c)]), E(c);
+      }, [r.has(c)]), E(c);
     }
   };
-}, K = /* @__PURE__ */ function() {
+}, B = /* @__PURE__ */ function() {
   const t = /* @__PURE__ */ new WeakMap();
   return (e) => {
     let n = t.get(e);
     return n || t.set(e, n = (e?.name ?? "") + Math.random().toString()), n;
   };
-}(), q = (t) => [
+}(), P = (t) => [
   ...Object.entries(t ?? {}).sort((e, n) => e[0].localeCompare(n[0])).flat()
-].join("-"), ie = ({ Wrapper: t = G }) => {
-  const e = E("auto-ctx"), [n, a] = v({}), r = A(
+].join("-"), de = ({ Wrapper: t = H }) => {
+  const e = E("auto-ctx"), [n, r] = v({}), a = $(
     (s, c) => {
-      const l = K(s), i = q(c);
-      return a(({
+      const l = B(s), i = P(c);
+      return r(({
         [l]: {
           Component: u = s,
           subState: {
@@ -228,9 +245,9 @@ const T = H((t) => new _(t)), E = (t = "noname") => g(() => T(t), [t]), $ = (t,
             ...p
           } = {}
         } = {},
-        ...b
+        ...g
       }) => ({
-        ...b,
+        ...g,
         [l]: {
           Component: u,
           subState: {
@@ -241,7 +258,7 @@ const T = H((t) => new _(t)), E = (t = "noname") => g(() => T(t), [t]), $ = (t,
             }
           }
         }
-      })), () => a(({
+      })), () => r(({
         [l]: {
           Component: u = s,
           subState: {
@@ -249,9 +266,9 @@ const T = H((t) => new _(t)), E = (t = "noname") => g(() => T(t), [t]), $ = (t,
             ...p
           } = {}
         } = {},
-        ...b
+        ...g
       }) => ({
-        ...b,
+        ...g,
         [l]: {
           Component: u,
           subState: {
@@ -268,27 +285,27 @@ const T = H((t) => new _(t)), E = (t = "noname") => g(() => T(t), [t]), $ = (t,
     },
     []
   );
-  return k(
+  return R(
     e,
-    ["subscribe", r],
+    ["subscribe", a],
     ["state", n]
-  ), /* @__PURE__ */ o(y, { children: Object.entries(n).flatMap(
+  ), /* @__PURE__ */ o(x, { children: Object.entries(n).flatMap(
     ([s, { Component: c, subState: l }]) => Object.entries(l).map(([i, { counter: u, params: d }]) => ({ key: s + i, Component: c, params: d, counter: u })).filter((i) => i.counter > 0).map(({ key: i, params: u, Component: d }) => /* @__PURE__ */ o(t, { children: /* @__PURE__ */ o(d, { ...u }) }, i))
   ) });
-}, oe = ({ Root: t, useCtxState: e, useCtxStateStrict: n, resolveCtxName: a }, r = 0) => ({
+}, he = ({ Root: t, useCtxState: e, useCtxStateStrict: n, resolveCtxName: r }, a = 0) => ({
   useCtxState: (s) => {
-    const c = a(s), l = I(E("auto-ctx"), "subscribe");
+    const c = r(s), l = z(E("auto-ctx"), "subscribe");
     return f(() => {
-      if (r == 0)
+      if (a == 0)
         return l?.(t, s);
       {
         let i = l?.(t, s);
-        return () => setTimeout(i, r);
+        return () => setTimeout(i, a);
       }
     }, [l, c]), E(c);
   }
-}), ue = (t) => {
-  const [, e] = v(0), { proxy: n, finalGetter: a, openGetter: r, clean: s } = g(
+}), me = (t) => {
+  const [, e] = v(0), { proxy: n, finalGetter: r, openGetter: a, clean: s } = b(
     () => {
       const c = /* @__PURE__ */ new Set(), l = {}, i = /* @__PURE__ */ new Map(), u = new Proxy(
         t?.data,
@@ -300,9 +317,9 @@ const T = H((t) => new _(t)), E = (t = "noname") => g(() => T(t), [t]), $ = (t,
           }
         }
       );
-      let d = !0, p = w(() => {
+      let d = !0, p = C(() => {
         [...c.values()].some((h) => l[h] != t?.data?.[h]) && e((h) => h + 1);
-      }, 0), b = () => {
+      }, 0), g = () => {
         d = !0, c.clear();
       }, j = () => {
         d = !1, [...c.values()].filter((h) => !i.has(h)).forEach((h) => {
@@ -311,42 +328,69 @@ const T = H((t) => new _(t)), E = (t = "noname") => g(() => T(t), [t]), $ = (t,
           i.get(h)?.(), i.delete(h);
         });
       };
-      return { proxy: u, finalGetter: j, openGetter: b, clean: () => {
-        b(), j(), e((h) => h + 1);
+      return { proxy: u, finalGetter: j, openGetter: g, clean: () => {
+        g(), j(), e((h) => h + 1);
       } };
     },
     [t]
   );
-  return r(), setTimeout(a, 0), f(
+  return a(), setTimeout(r, 0), f(
     () => () => s(),
     [s]
   ), n;
-}, z = T.cache, B = ({}) => {
-  const [t, e] = v("");
+}, Q = y.cache, U = ({}) => {
+  const [t, e] = v(""), [n, r] = v(""), a = b(
+    () => {
+      const s = t.toLowerCase().split(" ");
+      return (c) => {
+        const l = c.toLowerCase();
+        return s.every((i) => l.includes(i));
+      };
+    },
+    [t]
+  );
   return /* @__PURE__ */ m("div", { className: "main-panel", children: [
-    /* @__PURE__ */ o("div", { className: "state-list", children: [...z.keys()].map((n) => JSON.parse(n)?.[0]).filter((n) => n != "auto-ctx").map((n) => /* @__PURE__ */ o(
-      "div",
-      {
-        className: "state-key",
-        "data-active": n == t,
-        onClick: () => e(n),
-        children: n
-      }
-    )) }),
-    /* @__PURE__ */ o("div", { className: "state-view", children: /* @__PURE__ */ o(P, { dataKey: t }, t) })
+    /* @__PURE__ */ m("div", { className: "state-list", children: [
+      /* @__PURE__ */ o(
+        "input",
+        {
+          placeholder: "Type to Filter ...",
+          className: "state-filter",
+          value: t,
+          onChange: (s) => e(s.target.value)
+        }
+      ),
+      [...Q.keys()].map((s) => JSON.parse(s)?.[0]).filter((s) => s != "auto-ctx" && s).filter(a).map((s) => /* @__PURE__ */ o(X, { selectedKey: n, setKey: r, currentKey: s }))
+    ] }),
+    /* @__PURE__ */ o("div", { className: "state-view", children: /* @__PURE__ */ o(I, { dataKey: n }, n) })
   ] });
-}, P = ({ dataKey: t }) => {
-  const e = T(t), [n, a] = v({ ...e?.data });
+}, X = ({ selectedKey: t, setKey: e, currentKey: n, ...r }) => {
+  const a = y(n), s = O(void 0);
   return f(() => {
-    let r = { ...n }, s = setInterval(() => {
-      let c = !1;
-      for (let l in e?.data)
-        e?.data?.[l] != r[l] && (r[l] = e?.data?.[l], c = !0);
-      c && a({ ...r });
-    }, 200);
-    return () => clearInterval(s);
+    if (s.current) {
+      let c = C(() => {
+        s.current && (s.current?.classList.add("state-key-updated"), requestAnimationFrame(() => s.current?.classList.remove("state-key-updated")));
+      }, 16);
+      return a.subscribeAll(c);
+    }
+  }, [a, s]), /* @__PURE__ */ o(
+    "div",
+    {
+      ref: s,
+      className: "state-key",
+      "data-active": n == t,
+      onClick: () => e(n),
+      ...r,
+      children: n
+    }
+  );
+}, I = ({ dataKey: t }) => {
+  const e = y(t), [n, r] = v({ ...e?.data });
+  return f(() => {
+    let a = C(r, 16);
+    return e.subscribeAll((s, c) => a({ ...c }));
   }, [e]), /* @__PURE__ */ o(
-    ee,
+    re,
     {
       value: n,
       name: t,
@@ -354,60 +398,60 @@ const T = H((t) => new _(t)), E = (t = "noname") => g(() => T(t), [t]), $ = (t,
       style: {}
     }
   );
-}, V = (t) => {
+}, F = (t) => {
   let e = t.length < 120 ? 10 : 100;
   return Object.fromEntries(
     new Array(Math.ceil((t.length + 1) / e)).fill(0).map(
-      (n, a, r) => new Array(a == r.length - 1 ? t.length % e : e).fill(0).map((s, c) => a * e + c)
+      (n, r, a) => new Array(r == a.length - 1 ? t.length % e : e).fill(0).map((s, c) => r * e + c)
     ).filter((n) => n.length).map((n) => [`${n.at(0)}..${n.at(-1)}`, Object.fromEntries(
-      n.map((a) => [a, t[a]])
+      n.map((r) => [r, t[r]])
     )])
   );
-}, Q = (t, e = 25) => {
+}, Y = (t, e = 25) => {
   const n = Object.keys(t);
   return Object.fromEntries(
     Array(Math.ceil((n.length + 1) / e)).fill(0).map(
-      (a, r, s) => new Array(r == s.length - 1 ? n.length % e : e).fill(0).map((c, l) => r * e + l)
-    ).filter((a) => a.length).map((a) => a.map((r) => n.at(r))).map(
-      (a) => [
-        `${a.at(0)?.slice(0, 15)}...${a.at(-1)?.slice(0, 15)}`,
-        Object.fromEntries(a.map((r) => [r, t[r]]))
+      (r, a, s) => new Array(a == s.length - 1 ? n.length % e : e).fill(0).map((c, l) => a * e + l)
+    ).filter((r) => r.length).map((r) => r.map((a) => n.at(a))).map(
+      (r) => [
+        `${r.at(0)?.slice(0, 15)}...${r.at(-1)?.slice(0, 15)}`,
+        Object.fromEntries(r.map((a) => [a, t[a]]))
       ]
     )
   );
-}, x = ({ path: t, expandLevel: e, expandRoot: n, setExpandRoot: a }) => {
-  const r = t?.join("%") ?? "", s = typeof e == "boolean" ? e : typeof e == "number" && e > 0, c = g(
-    () => n?.[r] ?? s,
-    [n?.[r], r]
-  ), l = A(
-    (i) => a((u) => ({ ...u, [r]: i })),
-    [n, r]
+}, D = ({ path: t, expandLevel: e, expandRoot: n, setExpandRoot: r }) => {
+  const a = t?.join("%") ?? "", s = typeof e == "boolean" ? e : typeof e == "number" && e > 0, c = b(
+    () => n?.[a] ?? s,
+    [n?.[a], a]
+  ), l = $(
+    (i) => r((u) => ({ ...u, [a]: i })),
+    [n, a]
   );
   return { isExpand: c, setExpand: l };
-}, C = ({ value: t, deepCompare: e = !1, ...n }) => {
-  const a = O(void 0), r = O(t);
+}, w = ({ value: t, deepCompare: e = !1, ...n }) => {
+  const r = O(void 0), a = O(t);
   return f(() => {
-    if (a.current && (e && t && r.current ? Object.keys(t).length != Object.keys(r.current).length || Object.keys(t).some((c) => t[c] != r.current[c]) : t != r.current)) {
-      r.current = t, a.current.classList.add("jv-updated");
-      let c = requestAnimationFrame(() => a.current?.classList.remove("jv-updated"));
+    if (r.current && (e && t && a.current ? Object.keys(t).length != Object.keys(a.current).length || Object.keys(t).some((c) => t[c] != a.current[c]) : t != a.current)) {
+      a.current = t, r.current.classList.add("jv-updated");
+      let c = requestAnimationFrame(() => r.current?.classList.remove("jv-updated"));
       return () => cancelAnimationFrame(c);
     }
-  }, [t, e, a]), /* @__PURE__ */ o("div", { ...n, ref: a });
-}, U = (t) => {
+  }, [t, e, r]), /* @__PURE__ */ o("div", { ...n, ref: r });
+}, Z = (t) => {
   const {
     currentField: e,
     value: n,
-    path: a = [],
-    name: r,
+    path: r = [],
+    name: a,
     expandRoot: s,
     setExpandRoot: c,
     expandLevel: l,
     isGrouped: i
-  } = t, u = n instanceof Array, { isExpand: d, setExpand: p } = x(t), b = typeof l == "number" ? l - 1 : l, j = Object.entries(n).length > (n instanceof Array ? 10 : 25), N = Object.entries(n).length > 0, h = g(
-    () => j ? n instanceof Array ? V(n) : Q(n, 25) : n,
-    [n, j, V]
+  } = t, u = n instanceof Array, { isExpand: d, setExpand: p } = D(t), g = typeof l == "number" ? l - 1 : l, j = Object.entries(n).length > (n instanceof Array ? 10 : 25), N = Object.entries(n).length > 0, h = b(
+    () => j ? n instanceof Array ? F(n) : Y(n, 25) : n,
+    [n, j, F]
   );
-  return d && N ? /* @__PURE__ */ m(C, { className: "jv-field jv-field-obj", value: n, deepCompare: i, children: [
+  return d && N ? /* @__PURE__ */ m(w, { className: "jv-field jv-field-obj", value: n, deepCompare: i, children: [
     e && /* @__PURE__ */ o("div", { children: /* @__PURE__ */ m("div", { onClick: () => p(!1), children: [
       /* @__PURE__ */ o("span", { className: "jv-name", children: e }),
       /* @__PURE__ */ o("span", { children: ":" }),
@@ -422,17 +466,17 @@ const T = H((t) => new _(t)), E = (t = "noname") => g(() => T(t), [t]), $ = (t,
         " "
       ] })
     ] }) }),
-    /* @__PURE__ */ o("div", { className: "jv-value", children: Object.entries(h).map(([S, F], R) => /* @__PURE__ */ J(
+    /* @__PURE__ */ o("div", { className: "jv-value", children: Object.entries(h).map(([S, L], G) => /* @__PURE__ */ J(
       M,
       {
-        name: r,
+        name: a,
         expandRoot: s,
         setExpandRoot: c,
-        expandLevel: b,
-        value: F,
+        expandLevel: g,
+        value: L,
         isGrouped: j,
-        key: [...a, j ? R : S].join("%"),
-        path: [...a, S]
+        key: [...r, j ? G : S].join("%"),
+        path: [...r, S]
       }
     )) }),
     e && /* @__PURE__ */ o("div", { children: /* @__PURE__ */ m("span", { children: [
@@ -440,7 +484,7 @@ const T = H((t) => new _(t)), E = (t = "noname") => g(() => T(t), [t]), $ = (t,
       u ? "]" : "}",
       " "
     ] }) })
-  ] }) : /* @__PURE__ */ o(C, { className: "jv-field jv-field-obj", value: n, deepCompare: i, children: /* @__PURE__ */ o("div", { children: /* @__PURE__ */ m("div", { onClick: () => N && p(!0), children: [
+  ] }) : /* @__PURE__ */ o(w, { className: "jv-field jv-field-obj", value: n, deepCompare: i, children: /* @__PURE__ */ o("div", { children: /* @__PURE__ */ m("div", { onClick: () => N && p(!0), children: [
     /* @__PURE__ */ o("span", { className: "jv-name", children: e }),
     e && /* @__PURE__ */ o("span", { children: ":" }),
     e && N && /* @__PURE__ */ o("span", { children: "[+]" }),
@@ -460,21 +504,21 @@ const T = H((t) => new _(t)), E = (t = "noname") => g(() => T(t), [t]), $ = (t,
       " "
     ] })
   ] }) }) });
-}, X = (t) => {
-  const { currentType: e, currentField: n, value: a } = t, { isExpand: r, setExpand: s } = x(t), c = String(a).length > 50, l = c && !r ? `${String(a).slice(0, 15)}...${String(a).slice(-15, -1)}` : String(a);
+}, ee = (t) => {
+  const { currentType: e, currentField: n, value: r } = t, { isExpand: a, setExpand: s } = D(t), c = String(r).length > 50, l = c && !a ? `${String(r).slice(0, 15)}...${String(r).slice(-15, -1)}` : String(r);
   return /* @__PURE__ */ m(
-    C,
+    w,
     {
       value: t.value,
       className: `jv-field jv-field-${e} ${c ? "jv-cursor" : ""}`,
-      onClick: () => s(!r),
+      onClick: () => s(!a),
       children: [
         /* @__PURE__ */ o("span", { className: "jv-name", children: n }),
         /* @__PURE__ */ o("span", { children: ":" }),
         /* @__PURE__ */ m("span", { className: "jv-type", children: [
           e,
           ", lng=",
-          a?.length
+          r?.length
         ] }),
         /* @__PURE__ */ m("span", { className: "jv-value", children: [
           '"',
@@ -485,14 +529,14 @@ const T = H((t) => new _(t)), E = (t = "noname") => g(() => T(t), [t]), $ = (t,
       ]
     }
   );
-}, Y = (t) => {
-  const { currentType: e, currentField: n, value: a } = t, { isExpand: r, setExpand: s } = x(t), c = String(a).length > 50, l = c && !r ? `${String(a).slice(0, 15)}...${String(a).slice(-15, -1)}` : String(a);
+}, te = (t) => {
+  const { currentType: e, currentField: n, value: r } = t, { isExpand: a, setExpand: s } = D(t), c = String(r).length > 50, l = c && !a ? `${String(r).slice(0, 15)}...${String(r).slice(-15, -1)}` : String(r);
   return /* @__PURE__ */ m(
-    C,
+    w,
     {
       value: t.value,
       className: `jv-field jv-field-${e} ${c ? "jv-cursor" : ""}`,
-      onClick: () => s(!r),
+      onClick: () => s(!a),
       children: [
         /* @__PURE__ */ o("span", { className: "jv-name", children: n }),
         /* @__PURE__ */ o("span", { children: ":" }),
@@ -506,10 +550,10 @@ const T = H((t) => new _(t)), E = (t = "noname") => g(() => T(t), [t]), $ = (t,
       ]
     }
   );
-}, Z = (t) => {
-  const { currentType: e, currentField: n, value: a } = t;
+}, ne = (t) => {
+  const { currentType: e, currentField: n, value: r } = t;
   return /* @__PURE__ */ m(
-    C,
+    w,
     {
       value: t.value,
       className: `jv-field jv-field-${e}`,
@@ -517,66 +561,66 @@ const T = H((t) => new _(t)), E = (t = "noname") => g(() => T(t), [t]), $ = (t,
         /* @__PURE__ */ o("span", { className: "jv-name", children: n }),
         /* @__PURE__ */ o("span", { children: ":" }),
         /* @__PURE__ */ o("span", { className: "jv-type", children: e }),
-        /* @__PURE__ */ o("span", { className: "jv-value", children: String(a) }),
+        /* @__PURE__ */ o("span", { className: "jv-value", children: String(r) }),
         /* @__PURE__ */ o("span", { children: "," })
       ]
     }
   );
 }, M = (t) => {
-  const { value: e, path: n = [], name: a } = t, r = n.at(-1) ?? a ?? void 0, s = typeof e;
+  const { value: e, path: n = [], name: r } = t, a = n.at(-1) ?? r ?? void 0, s = typeof e;
   switch (s) {
     case "object":
-      return /* @__PURE__ */ o(U, { ...t, currentField: r, currentType: s });
+      return /* @__PURE__ */ o(Z, { ...t, currentField: a, currentType: s });
     case "string":
-      return /* @__PURE__ */ o(X, { ...t, currentField: r, currentType: s });
+      return /* @__PURE__ */ o(ee, { ...t, currentField: a, currentType: s });
     case "function":
-      return /* @__PURE__ */ o(Y, { ...t, currentField: r, currentType: s });
+      return /* @__PURE__ */ o(te, { ...t, currentField: a, currentType: s });
     case "number":
     case "boolean":
     case "bigint":
     case "symbol":
     case "undefined":
     default:
-      return /* @__PURE__ */ o(Z, { ...t, currentField: r, currentType: s });
+      return /* @__PURE__ */ o(ne, { ...t, currentField: a, currentType: s });
   }
-}, ee = ({ value: t, name: e, style: n, expandLevel: a = !1 }) => {
-  const [r, s] = v({});
+}, re = ({ value: t, name: e, style: n, expandLevel: r = !1 }) => {
+  const [a, s] = v({});
   return /* @__PURE__ */ o("div", { className: "jv-root", style: n, children: /* @__PURE__ */ o(
     M,
     {
       path: [],
       name: e,
       value: t,
-      expandRoot: r,
+      expandRoot: a,
       setExpandRoot: s,
-      expandLevel: a
+      expandLevel: r
     }
   ) });
-}, de = ({ toggleButton: t = "[x]", ...e }) => {
-  const [n, a] = v(!1);
-  return /* @__PURE__ */ m(y, { children: [
-    /* @__PURE__ */ o("button", { className: "react-state-dev-btn", "data-active": n, onClick: () => a(!0), ...e, children: e?.children ?? "Toggle Dev Tool" }),
+}, fe = ({ toggleButton: t = "[x]", ...e }) => {
+  const [n, r] = v(!1);
+  return /* @__PURE__ */ m(x, { children: [
+    /* @__PURE__ */ o("button", { className: "react-state-dev-btn", "data-active": n, onClick: () => r(!0), ...e, children: e?.children ?? "Toggle Dev Tool" }),
     /* @__PURE__ */ m("div", { className: "react-state-dev-container", "data-active": n, children: [
-      /* @__PURE__ */ o("button", { className: "close-btn", onClick: () => a(!1), children: "[x]" }),
-      /* @__PURE__ */ o(B, {})
+      /* @__PURE__ */ o("button", { className: "close-btn", onClick: () => r(!1), children: "[x]" }),
+      n && /* @__PURE__ */ o(U, {})
     ] })
   ] });
 };
 export {
-  ie as AutoRootCtx,
-  _ as Context,
-  de as DevToolContainer,
-  oe as createAutoCtx,
-  le as createRootCtx,
-  T as getContext,
-  L as useArrayHash,
+  de as AutoRootCtx,
+  q as Context,
+  fe as DevToolContainer,
+  he as createAutoCtx,
+  ue as createRootCtx,
+  y as getContext,
+  _ as useArrayHash,
   E as useDataContext,
-  ae as useDataSource,
-  k as useDataSourceMultiple,
-  I as useDataSubscribe,
-  se as useDataSubscribeMultiple,
-  ce as useDataSubscribeMultipleWithDebounce,
-  re as useDataSubscribeWithTransform,
-  ue as useQuickSubscribe
+  ce as useDataSource,
+  R as useDataSourceMultiple,
+  z as useDataSubscribe,
+  ie as useDataSubscribeMultiple,
+  oe as useDataSubscribeMultipleWithDebounce,
+  le as useDataSubscribeWithTransform,
+  me as useQuickSubscribe
 };
 //# sourceMappingURL=index.es.js.map