react-state-custom 1.0.22 → 1.0.24

package/dist/index.es.js

@@ -1,25 +1,25 @@
-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 M, { useRef as V, useMemo as b, useEffect as f, useState as m, useCallback as A, Fragment as H, useContext as F } from "react";
+import { jsx as h, Fragment as N, jsxs as S } from "react/jsx-runtime";
+function C(t, e) {
+  let n = null, r = function(...o) {
     n && clearTimeout(n), n = setTimeout(() => {
-      t(...r);
+      t(...o);
     }, 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 G(t) {
+  const e = /* @__PURE__ */ new Map(), n = function(...r) {
+    const o = JSON.stringify(r);
+    if (e.has(o))
+      return e.get(o);
+    const s = t(...r);
+    return e.set(o, s), s;
   };
   return n.cache = e, n;
 }
-const D = () => Math.random().toString().slice(2), L = (t) => {
-  const { current: { computedHash: e } } = O({
+const k = () => Math.random().toString().slice(2), $ = (t) => {
+  const { current: { computedHash: e } } = V({
     /**
      * 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 = k();
+      return (o) => {
         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 || !o != !n, s = s || o?.length != n?.length, s = s || o.some((a, i) => a != n[i]), n = o, s && (r = k()), r;
       };
     }
   });
   return e(t);
-};
-class W extends Event {
+}, T = "@--change-event";
+class J extends Event {
   constructor(e, n) {
-    super(e), this.event = e, this.value = n;
+    super(String(e)), this.event = e, this.value = n;
+  }
+}
+class O extends Event {
+  constructor(e) {
+    super(T, e), this.value = e;
   }
 }
-class _ extends EventTarget {
+class K 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 J(e, n);
+      this.dispatchEvent(r), this.dispatchEvent(new O(r));
+    }
   }
   /**
    * Subscribe to changes for a specific key in the context.
@@ -74,192 +82,201 @@ class _ extends EventTarget {
    * @returns Unsubscribe function.
    */
   subscribe(e, n) {
-    const a = ({ event: r, value: s }) => {
+    const r = ({ event: o, 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 O) {
+        const { value: o } = r;
+        e(o.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 D = G((t) => new K(t)), v = (t = "noname") => b(() => D(t), [t]), j = (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) => {
+}, rt = (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]), j(t, e);
+}, W = (t, e, n = 0) => {
+  const [{ value: r }, o] = m(() => ({ 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] }), () => {
-        c();
+      let s = n == 0 ? (i) => o({ value: i }) : C((i) => o({ value: i }), n), a = t.subscribe(e, s);
+      return r != t.data[e] && o({ value: t.data[e] }), () => {
+        a();
       };
     }
   }, [e, t]), t?.data[e];
-}, re = (t, e, n) => {
-  const [, a] = v(0), r = g(
+}, st = (t, e, n) => {
+  const [, r] = m(0), o = b(
     () => n(t?.data[e]),
     [n, t?.data[e]]
   );
   return f(() => {
     if (t) {
-      let s = r, c = () => {
-        let i = n(t.data[e]);
-        i != s && (s = i, a((u) => u + 1));
-      }, l = t.subscribe(e, c);
-      return c(), () => l();
+      let s = o, a = () => {
+        let c = n(t.data[e]);
+        c != s && (s = c, r((l) => l + 1));
+      }, i = t.subscribe(e, a);
+      return a(), () => i();
     }
-  }, [e, t]), r;
-}, k = (t, ...e) => {
+  }, [e, t]), o;
+}, y = (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())]), j(t, ...e.map((n) => n[0]));
+}, at = (t, ...e) => {
+  const [, n] = m(0), r = e.map((o) => t?.data?.[o]);
   return f(() => {
     if (t) {
-      let r = a;
-      const s = w(() => {
-        let i = e.map((u) => t?.data?.[u]);
-        e.some((u, d) => r[d] != i[d]) && (r = i, n((u) => u + 1));
+      let o = r;
+      const s = C(() => {
+        let c = e.map((l) => t?.data?.[l]);
+        e.some((l, u) => o[u] != c[u]) && (o = c, n((l) => l + 1));
       }, 1);
-      let c = e.map((i) => t.subscribe(i, s)), l = setTimeout(s, 1);
+      let a = e.map((c) => t.subscribe(c, s)), i = setTimeout(s, 1);
       return () => {
-        clearTimeout(l), s.cancel(), c.forEach((i) => i());
+        clearTimeout(i), s.cancel(), a.forEach((c) => c());
       };
     }
-  }, [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((o, s) => [o, r[s]]));
+}, ot = (t, e = 50, ...n) => {
+  const [, r] = m(0), o = n.map((s) => t?.data?.[s]);
   return f(() => {
     if (t) {
-      let s = r;
-      const c = w(() => {
-        let u = n.map((d) => t?.data?.[d]);
-        n.some((d, p) => s[p] != u[p]) && (s = u, a((d) => d + 1));
+      let s = o;
+      const a = C(() => {
+        let l = n.map((u) => t?.data?.[u]);
+        n.some((u, g) => s[g] != l[g]) && (s = l, r((u) => u + 1));
       }, e);
-      let l = n.map((u) => t.subscribe(u, c)), i = setTimeout(c, 1);
+      let i = n.map((l) => t.subscribe(l, a)), c = setTimeout(a, 1);
       return () => {
-        clearTimeout(i), c.cancel(), l.forEach((u) => u());
+        clearTimeout(c), a.cancel(), i.forEach((l) => l());
       };
     }
-  }, [t, ...n]), r;
-}, le = (t, e) => {
+  }, [t, ...n]), o;
+}, ct = (t, e) => {
   const n = (s) => [
     t,
-    ...Object.entries(s ?? {}).sort((c, l) => c[0].localeCompare(l[0])).flat()
+    ...Object.entries(s ?? {}).sort((a, i) => a[0].localeCompare(i[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(
-      i,
-      ...Object.entries(c)
+  let r = /* @__PURE__ */ new Set();
+  const o = (s) => {
+    const a = e(s), i = n(s), c = v(i), l = b(() => new Error().stack, []);
+    return y(
+      c,
+      ...Object.entries(a)
     ), f(() => {
-      if (a.has(l)) {
-        const d = new Error("RootContext " + l + " are mounted more than once");
-        throw d.stack = u, d;
+      if (r.has(i)) {
+        const u = new Error("RootContext " + i + " are mounted more than once");
+        throw u.stack = l, u;
       }
-      return a.add(l), () => {
-        a.delete(l);
+      return r.add(i), () => {
+        r.delete(i);
       };
-    }), /* @__PURE__ */ o(y, {});
+    }), /* @__PURE__ */ h(N, {});
   };
-  return r.displayName = `State[${e?.name ?? "??"}]`, {
+  return o.displayName = `State[${e?.name ?? "??"}]`, {
     resolveCtxName: n,
-    Root: r,
+    Root: o,
     /**
      * 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 a = n(s), i = b(() => new Error().stack, []);
       return f(() => {
-        if (!a.has(c)) {
-          const i = new Error("RootContext [" + c + "] is not mounted");
-          throw i.stack = l, i;
+        if (!r.has(a)) {
+          const c = new Error("RootContext [" + a + "] is not mounted");
+          throw c.stack = i, c;
         }
-      }, [c]), E(c);
+      }, [a]), v(a);
     },
     /**
      * 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 c = n(s), l = g(() => new Error().stack, []);
+      const a = n(s), i = b(() => new Error().stack, []);
       return f(() => {
-        if (!a.has(c)) {
-          const i = new Error("RootContext [" + c + "] is not mounted");
-          i.stack = l;
-          let u = setTimeout(() => console.error(i), 1e3);
-          return () => clearTimeout(u);
+        if (!r.has(a)) {
+          const c = new Error("RootContext [" + a + "] is not mounted");
+          c.stack = i;
+          let l = setTimeout(() => console.error(c), 1e3);
+          return () => clearTimeout(l);
         }
-      }, [a.has(c)]), E(c);
+      }, [r.has(a)]), v(a);
     }
   };
-}, K = /* @__PURE__ */ function() {
+}, z = /* @__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) => [
+}(), B = (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(
-    (s, c) => {
-      const l = K(s), i = q(c);
-      return a(({
-        [l]: {
-          Component: u = s,
+].join("-"), it = ({ Wrapper: t = H }) => {
+  const e = v("auto-ctx"), [n, r] = m({}), o = A(
+    (s, a) => {
+      const i = z(s), c = B(a);
+      return r(({
+        [i]: {
+          Component: l = s,
           subState: {
-            [i]: d = { params: c, counter: 0 },
-            ...p
+            [c]: u = { params: a, counter: 0 },
+            ...g
           } = {}
         } = {},
-        ...b
+        ...p
       }) => ({
-        ...b,
-        [l]: {
-          Component: u,
+        ...p,
+        [i]: {
+          Component: l,
           subState: {
-            ...p,
-            [i]: {
-              ...d,
-              counter: d.counter + 1
+            ...g,
+            [c]: {
+              ...u,
+              counter: u.counter + 1
             }
           }
         }
-      })), () => a(({
-        [l]: {
-          Component: u = s,
+      })), () => r(({
+        [i]: {
+          Component: l = s,
           subState: {
-            [i]: d = { params: c, counter: 0 },
-            ...p
+            [c]: u = { params: a, counter: 0 },
+            ...g
           } = {}
         } = {},
-        ...b
+        ...p
       }) => ({
-        ...b,
-        [l]: {
-          Component: u,
+        ...p,
+        [i]: {
+          Component: l,
           subState: {
-            ...p,
-            ...d.counter > 1 ? {
-              [i]: {
-                ...d,
-                counter: d.counter - 1
+            ...g,
+            ...u.counter > 1 ? {
+              [c]: {
+                ...u,
+                counter: u.counter - 1
               }
             } : {}
           }
@@ -268,315 +285,198 @@ const T = H((t) => new _(t)), E = (t = "noname") => g(() => T(t), [t]), $ = (t,
     },
     []
   );
-  return k(
+  return y(
     e,
-    ["subscribe", r],
+    ["subscribe", o],
     ["state", n]
-  ), /* @__PURE__ */ o(y, { 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))
+  ), /* @__PURE__ */ h(N, { children: Object.entries(n).flatMap(
+    ([s, { Component: a, subState: i }]) => Object.entries(i).map(([c, { counter: l, params: u }]) => ({ key: s + c, Component: a, params: u, counter: l })).filter((c) => c.counter > 0).map(({ key: c, params: l, Component: u }) => /* @__PURE__ */ h(t, { children: /* @__PURE__ */ h(u, { ...l }) }, c))
   ) });
-}, oe = ({ Root: t, useCtxState: e, useCtxStateStrict: n, resolveCtxName: a }, r = 0) => ({
+}, lt = ({ Root: t, useCtxState: e, useCtxStateStrict: n, resolveCtxName: r }, o = 0) => ({
   useCtxState: (s) => {
-    const c = a(s), l = I(E("auto-ctx"), "subscribe");
+    const a = r(s), i = W(v("auto-ctx"), "subscribe");
     return f(() => {
-      if (r == 0)
-        return l?.(t, s);
+      if (o == 0)
+        return i?.(t, s);
       {
-        let i = l?.(t, s);
-        return () => setTimeout(i, r);
+        let c = i?.(t, s);
+        return () => setTimeout(c, o);
       }
-    }, [l, c]), E(c);
+    }, [i, a]), v(a);
   }
-}), ue = (t) => {
-  const [, e] = v(0), { proxy: n, finalGetter: a, openGetter: r, clean: s } = g(
+}), ut = (t) => {
+  const [, e] = m(0), { proxy: n, finalGetter: r, openGetter: o, clean: s } = b(
     () => {
-      const c = /* @__PURE__ */ new Set(), l = {}, i = /* @__PURE__ */ new Map(), u = new Proxy(
+      const a = /* @__PURE__ */ new Set(), i = {}, c = /* @__PURE__ */ new Map(), l = new Proxy(
         t?.data,
         {
-          get(h, S) {
-            if (d)
-              return c.add(S), l[S] = h[S];
+          get(d, w) {
+            if (u)
+              return a.add(w), i[w] = d[w];
             throw new Error("now allow here");
           }
         }
       );
-      let d = !0, p = w(() => {
-        [...c.values()].some((h) => l[h] != t?.data?.[h]) && e((h) => h + 1);
-      }, 0), b = () => {
-        d = !0, c.clear();
-      }, j = () => {
-        d = !1, [...c.values()].filter((h) => !i.has(h)).forEach((h) => {
-          i.set(h, t?.subscribe(h, p));
-        }), [...i.keys()].filter((h) => !c.has(h)).forEach((h) => {
-          i.get(h)?.(), i.delete(h);
+      let u = !0, g = C(() => {
+        [...a.values()].some((d) => i[d] != t?.data?.[d]) && e((d) => d + 1);
+      }, 0), p = () => {
+        u = !0, a.clear();
+      }, R = () => {
+        u = !1, [...a.values()].filter((d) => !c.has(d)).forEach((d) => {
+          c.set(d, t?.subscribe(d, g));
+        }), [...c.keys()].filter((d) => !a.has(d)).forEach((d) => {
+          c.get(d)?.(), c.delete(d);
         });
       };
-      return { proxy: u, finalGetter: j, openGetter: b, clean: () => {
-        b(), j(), e((h) => h + 1);
+      return { proxy: l, finalGetter: R, openGetter: p, clean: () => {
+        p(), R(), e((d) => d + 1);
       } };
     },
     [t]
   );
-  return r(), setTimeout(a, 0), f(
+  return o(), setTimeout(r, 0), f(
     () => () => s(),
     [s]
   ), n;
-}, z = T.cache, B = ({}) => {
-  const [t, e] = v("");
-  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) })
-  ] });
-}, P = ({ dataKey: t }) => {
-  const e = T(t), [n, a] = v({ ...e?.data });
-  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);
-  }, [e]), /* @__PURE__ */ o(
-    ee,
-    {
-      value: n,
-      name: t,
-      expandLevel: 1,
-      style: {}
-    }
-  );
-}, V = (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)
-    ).filter((n) => n.length).map((n) => [`${n.at(0)}..${n.at(-1)}`, Object.fromEntries(
-      n.map((a) => [a, t[a]])
-    )])
-  );
-}, Q = (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]]))
-      ]
-    )
-  );
-}, 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]
+};
+function I(t) {
+  return { highlight: b(
+    () => q(t.toLowerCase().split(" "), "gi"),
+    [t]
+  ) };
+}
+function P(t) {
+  return t.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+}
+function q(t, e = "gi") {
+  const n = t.map(P).join("|");
+  return new RegExp(`(${n})`, e);
+}
+function Q(t, e) {
+  const n = [];
+  let r = 0;
+  for (const o of t.matchAll(e)) {
+    const [s] = o, a = o.index;
+    a > r && n.push(t.slice(r, a)), n.push(/* @__PURE__ */ h("mark", { children: s }, a)), r = a + s.length;
+  }
+  return r < t.length && n.push(t.slice(r)), n;
+}
+const x = M.createContext({
+  highlight: void 0
+}), U = ({ children: t, highlight: e }) => /* @__PURE__ */ h(x.Provider, { value: I(e), children: t }), X = ({ text: t }) => {
+  const { highlight: e } = F(x), n = b(
+    () => e ? Q(t, e) : t,
+    [t, e]
   );
-  return { isExpand: c, setExpand: l };
-}, C = ({ value: t, deepCompare: e = !1, ...n }) => {
-  const a = O(void 0), r = O(t);
+  return /* @__PURE__ */ h(N, { children: n });
+}, L = ({ name: t, value: e }) => {
+  const n = b(() => {
+    try {
+      return JSON.stringify({ [t]: e }, null, 2);
+    } catch (r) {
+      return String(r);
+    }
+  }, [t, e]);
+  return /* @__PURE__ */ h("pre", { children: n });
+}, Y = ({ selectedKey: t, setKey: e, currentKey: n, highlight: r, ...o }) => {
+  const s = D(n), a = V(void 0);
   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"));
-      return () => cancelAnimationFrame(c);
+    if (a.current) {
+      let i = C(() => {
+        a.current && (a.current?.classList.add("state-key-updated"), requestAnimationFrame(() => a.current?.classList.remove("state-key-updated")));
+      }, 5);
+      return s.subscribeAll(i);
     }
-  }, [t, e, a]), /* @__PURE__ */ o("div", { ...n, ref: a });
-}, U = (t) => {
-  const {
-    currentField: e,
-    value: n,
-    path: a = [],
-    name: r,
-    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]
-  );
-  return d && N ? /* @__PURE__ */ m(C, { 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: ":" }),
-      /* @__PURE__ */ o("span", { children: "[-]" }),
-      /* @__PURE__ */ m("span", { className: "jv-type", children: [
-        Object.keys(n).length,
-        " items "
-      ] }),
-      /* @__PURE__ */ m("span", { children: [
-        " ",
-        u ? "[" : "{",
-        " "
-      ] })
-    ] }) }),
-    /* @__PURE__ */ o("div", { className: "jv-value", children: Object.entries(h).map(([S, F], R) => /* @__PURE__ */ J(
-      M,
-      {
-        name: r,
-        expandRoot: s,
-        setExpandRoot: c,
-        expandLevel: b,
-        value: F,
-        isGrouped: j,
-        key: [...a, j ? R : S].join("%"),
-        path: [...a, S]
-      }
-    )) }),
-    e && /* @__PURE__ */ o("div", { children: /* @__PURE__ */ m("span", { children: [
-      " ",
-      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("span", { className: "jv-name", children: e }),
-    e && /* @__PURE__ */ o("span", { children: ":" }),
-    e && N && /* @__PURE__ */ o("span", { children: "[+]" }),
-    /* @__PURE__ */ m("span", { className: "jv-type", children: [
-      Object.keys(n).length,
-      " items "
-    ] }),
-    /* @__PURE__ */ m("span", { children: [
-      " ",
-      u ? "[" : "{",
-      " "
-    ] }),
-    N && /* @__PURE__ */ o("span", { children: " ... " }),
-    /* @__PURE__ */ m("span", { children: [
-      " ",
-      u ? "]" : "}",
-      " "
-    ] })
-  ] }) }) });
-}, 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);
-  return /* @__PURE__ */ m(
-    C,
+  }, [s, a]), /* @__PURE__ */ S(
+    "div",
     {
-      value: t.value,
-      className: `jv-field jv-field-${e} ${c ? "jv-cursor" : ""}`,
-      onClick: () => s(!r),
+      ref: a,
+      className: "state-key",
+      title: n,
+      "data-active": n == t,
+      onClick: () => e(n),
+      ...o,
       children: [
-        /* @__PURE__ */ o("span", { className: "jv-name", children: n }),
-        /* @__PURE__ */ o("span", { children: ":" }),
-        /* @__PURE__ */ m("span", { className: "jv-type", children: [
-          e,
-          ", lng=",
-          a?.length
-        ] }),
-        /* @__PURE__ */ m("span", { className: "jv-value", children: [
-          '"',
-          l,
-          '"'
-        ] }),
-        /* @__PURE__ */ o("span", { children: "," })
+        /* @__PURE__ */ h("div", { className: "state-key-name", children: /* @__PURE__ */ h(X, { text: String(n) }) }),
+        /* @__PURE__ */ S("div", { className: "state-key-meta", children: [
+          Object.keys(s.data).length,
+          " items"
+        ] })
       ]
     }
   );
-}, 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);
-  return /* @__PURE__ */ m(
-    C,
-    {
-      value: t.value,
-      className: `jv-field jv-field-${e} ${c ? "jv-cursor" : ""}`,
-      onClick: () => s(!r),
-      children: [
-        /* @__PURE__ */ o("span", { className: "jv-name", children: n }),
-        /* @__PURE__ */ o("span", { children: ":" }),
-        /* @__PURE__ */ o("span", { className: "jv-type", children: e }),
-        /* @__PURE__ */ m("span", { className: "jv-value", children: [
-          '"',
-          l,
-          '"'
-        ] }),
-        /* @__PURE__ */ o("span", { children: "," })
-      ]
-    }
+}, E = D.cache, Z = ({ Component: t }) => {
+  const [e, n] = m(() => [...E.keys()]), [r, o] = m(""), [s, a] = m("");
+  f(() => {
+    let c = setInterval(() => {
+      n(
+        (l) => l.length != E.size ? [...E.keys()] : l
+      );
+    }, 50);
+    return () => clearInterval(c);
+  }, [E]);
+  const i = b(
+    () => {
+      const c = r.toLowerCase().split(" ");
+      return (l) => {
+        const u = l.toLowerCase();
+        return c.every((g) => u.includes(g));
+      };
+    },
+    [r]
   );
-}, Z = (t) => {
-  const { currentType: e, currentField: n, value: a } = t;
-  return /* @__PURE__ */ m(
-    C,
+  return /* @__PURE__ */ S("div", { className: "main-panel", children: [
+    /* @__PURE__ */ S("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(U, { highlight: r, children: e.map((c) => JSON.parse(c)?.[0]).filter((c) => c != "auto-ctx" && c).filter(i).map((c) => /* @__PURE__ */ h(Y, { selectedKey: s, setKey: a, currentKey: c })) })
+    ] }),
+    /* @__PURE__ */ h("div", { className: "state-view", children: /* @__PURE__ */ h(_, { dataKey: s, Component: t }, s) })
+  ] });
+}, _ = ({ dataKey: t, Component: e = L }) => {
+  const n = D(t), [r, o] = m({ ...n?.data });
+  return f(() => {
+    let s = C(o, 5);
+    return n.subscribeAll((a, i) => s({ ...i }));
+  }, [n]), /* @__PURE__ */ h(
+    e,
     {
-      value: t.value,
-      className: `jv-field jv-field-${e}`,
-      children: [
-        /* @__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", { children: "," })
-      ]
+      value: r,
+      name: t
     }
   );
-}, M = (t) => {
-  const { value: e, path: n = [], name: a } = t, r = n.at(-1) ?? a ?? void 0, s = typeof e;
-  switch (s) {
-    case "object":
-      return /* @__PURE__ */ o(U, { ...t, currentField: r, currentType: s });
-    case "string":
-      return /* @__PURE__ */ o(X, { ...t, currentField: r, currentType: s });
-    case "function":
-      return /* @__PURE__ */ o(Y, { ...t, currentField: r, currentType: s });
-    case "number":
-    case "boolean":
-    case "bigint":
-    case "symbol":
-    case "undefined":
-    default:
-      return /* @__PURE__ */ o(Z, { ...t, currentField: r, currentType: s });
-  }
-}, ee = ({ value: t, name: e, style: n, expandLevel: a = !1 }) => {
-  const [r, s] = v({});
-  return /* @__PURE__ */ o("div", { className: "jv-root", style: n, children: /* @__PURE__ */ o(
-    M,
-    {
-      path: [],
-      name: e,
-      value: t,
-      expandRoot: r,
-      setExpandRoot: s,
-      expandLevel: a
-    }
-  ) });
-}, 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" }),
-    /* @__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, {})
+}, ht = ({ toggleButton: t = "[x]", Component: e = L, ...n }) => {
+  const [r, o] = m(!1);
+  return /* @__PURE__ */ S(N, { children: [
+    /* @__PURE__ */ h("button", { className: "react-state-dev-btn", "data-active": r, onClick: () => o(!0), ...n, children: n?.children ?? "Toggle Dev Tool" }),
+    /* @__PURE__ */ S("div", { className: "react-state-dev-container", "data-active": r, children: [
+      /* @__PURE__ */ h("button", { className: "close-btn", onClick: () => o(!1), children: "[x]" }),
+      r && /* @__PURE__ */ h(Z, { Component: e })
     ] })
   ] });
 };
 export {
-  ie as AutoRootCtx,
-  _ as Context,
-  de as DevToolContainer,
-  oe as createAutoCtx,
-  le as createRootCtx,
-  T as getContext,
-  L 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
+  it as AutoRootCtx,
+  K as Context,
+  ht as DevToolContainer,
+  lt as createAutoCtx,
+  ct as createRootCtx,
+  D as getContext,
+  $ as useArrayHash,
+  v as useDataContext,
+  rt as useDataSource,
+  y as useDataSourceMultiple,
+  W as useDataSubscribe,
+  at as useDataSubscribeMultiple,
+  ot as useDataSubscribeMultipleWithDebounce,
+  st as useDataSubscribeWithTransform,
+  ut as useQuickSubscribe
 };
 //# sourceMappingURL=index.es.js.map