react-state-custom 1.0.23 → 1.0.24

package/dist/index.es.js

@@ -1,25 +1,25 @@
-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";
+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(...a) {
+  let n = null, r = function(...o) {
     n && clearTimeout(n), n = setTimeout(() => {
-      t(...a);
+      t(...o);
     }, e);
   };
   return r.cancel = () => clearTimeout(n), r;
 }
-function W(t) {
+function G(t) {
   const e = /* @__PURE__ */ new Map(), n = function(...r) {
-    const a = JSON.stringify(r);
-    if (e.has(a))
-      return e.get(a);
+    const o = JSON.stringify(r);
+    if (e.has(o))
+      return e.get(o);
     const s = t(...r);
-    return e.set(a, s), s;
+    return e.set(o, s), s;
   };
   return n.cache = e, n;
 }
-const A = () => Math.random().toString().slice(2), _ = (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,26 +28,26 @@ const A = () => Math.random().toString().slice(2), _ = (t) => {
      * - Updates the hash if any difference is detected.
      */
     get computedHash() {
-      let n = [], r = A();
-      return (a) => {
+      let n = [], r = k();
+      return (o) => {
         let s = !1;
-        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 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);
 }, T = "@--change-event";
-class K extends Event {
+class J extends Event {
   constructor(e, n) {
     super(String(e)), this.event = e, this.value = n;
   }
 }
-class V extends Event {
+class O extends Event {
   constructor(e) {
     super(T, e), this.value = e;
   }
 }
-class q extends EventTarget {
+class K extends EventTarget {
   /**
    * Create a new Context instance.
    * @param name - The name of the context (for debugging).
@@ -71,8 +71,8 @@ class q extends EventTarget {
   publish(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));
+      let r = new J(e, n);
+      this.dispatchEvent(r), this.dispatchEvent(new O(r));
     }
   }
   /**
@@ -82,22 +82,22 @@ class q extends EventTarget {
    * @returns Unsubscribe function.
    */
   subscribe(e, n) {
-    const r = ({ event: a, value: s }) => {
+    const r = ({ event: o, value: s }) => {
       n(s);
     };
     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);
+      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 y = W((t) => new q(t)), E = (t = "noname") => b(() => y(t), [t]), k = (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(
     () => {
@@ -108,175 +108,175 @@ const y = W((t) => new q(t)), E = (t = "noname") => b(() => y(t), [t]), k = (t,
     },
     [t, e.length]
   );
-}, ce = (t, e, n) => {
+}, rt = (t, e, n) => {
   f(() => {
     t && t.data[e] != n && t.publish(e, n);
-  }, [e, n, t]), k(t, e);
-}, z = (t, e, n = 0) => {
-  const [{ value: r }, a] = 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) => 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();
+      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];
-}, le = (t, e, n) => {
-  const [, r] = v(0), a = b(
+}, st = (t, e, n) => {
+  const [, r] = m(0), o = b(
     () => n(t?.data[e]),
     [n, t?.data[e]]
   );
   return f(() => {
     if (t) {
-      let s = a, c = () => {
-        let i = n(t.data[e]);
-        i != s && (s = i, r((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]), a;
-}, R = (t, ...e) => {
+  }, [e, t]), o;
+}, y = (t, ...e) => {
   f(() => {
     if (t)
       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]);
+  }, [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 a = r;
+      let o = r;
       const s = C(() => {
-        let i = e.map((u) => t?.data?.[u]);
-        e.some((u, d) => a[d] != i[d]) && (a = i, n((u) => u + 1));
+        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((a, s) => [a, r[s]]));
-}, oe = (t, e = 50, ...n) => {
-  const [, r] = v(0), a = 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 = a;
-      const c = C(() => {
-        let u = n.map((d) => t?.data?.[d]);
-        n.some((d, p) => s[p] != u[p]) && (s = u, r((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]), a;
-}, ue = (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 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)
+  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 (r.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 r.add(l), () => {
-        r.delete(l);
+      return r.add(i), () => {
+        r.delete(i);
       };
-    }), /* @__PURE__ */ o(x, {});
+    }), /* @__PURE__ */ h(N, {});
   };
-  return a.displayName = `State[${e?.name ?? "??"}]`, {
+  return o.displayName = `State[${e?.name ?? "??"}]`, {
     resolveCtxName: n,
-    Root: a,
+    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 = b(() => new Error().stack, []);
+      const a = n(s), i = b(() => new Error().stack, []);
       return f(() => {
-        if (!r.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 = b(() => new Error().stack, []);
+      const a = n(s), i = b(() => new Error().stack, []);
       return f(() => {
-        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);
+        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);
         }
-      }, [r.has(c)]), E(c);
+      }, [r.has(a)]), v(a);
     }
   };
-}, B = /* @__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;
   };
-}(), P = (t) => [
+}(), B = (t) => [
   ...Object.entries(t ?? {}).sort((e, n) => e[0].localeCompare(n[0])).flat()
-].join("-"), de = ({ Wrapper: t = H }) => {
-  const e = E("auto-ctx"), [n, r] = v({}), a = $(
-    (s, c) => {
-      const l = B(s), i = P(c);
+].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(({
-        [l]: {
-          Component: u = s,
+        [i]: {
+          Component: l = s,
           subState: {
-            [i]: d = { params: c, counter: 0 },
-            ...p
+            [c]: u = { params: a, counter: 0 },
+            ...g
           } = {}
         } = {},
-        ...g
+        ...p
       }) => ({
-        ...g,
-        [l]: {
-          Component: u,
+        ...p,
+        [i]: {
+          Component: l,
           subState: {
-            ...p,
-            [i]: {
-              ...d,
-              counter: d.counter + 1
+            ...g,
+            [c]: {
+              ...u,
+              counter: u.counter + 1
             }
           }
         }
       })), () => r(({
-        [l]: {
-          Component: u = s,
+        [i]: {
+          Component: l = s,
           subState: {
-            [i]: d = { params: c, counter: 0 },
-            ...p
+            [c]: u = { params: a, counter: 0 },
+            ...g
           } = {}
         } = {},
-        ...g
+        ...p
       }) => ({
-        ...g,
-        [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
               }
             } : {}
           }
@@ -285,342 +285,198 @@ const y = W((t) => new q(t)), E = (t = "noname") => b(() => y(t), [t]), k = (t,
     },
     []
   );
-  return R(
+  return y(
     e,
-    ["subscribe", a],
+    ["subscribe", o],
     ["state", n]
-  ), /* @__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))
+  ), /* @__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))
   ) });
-}, he = ({ Root: t, useCtxState: e, useCtxStateStrict: n, resolveCtxName: r }, a = 0) => ({
+}, lt = ({ Root: t, useCtxState: e, useCtxStateStrict: n, resolveCtxName: r }, o = 0) => ({
   useCtxState: (s) => {
-    const c = r(s), l = z(E("auto-ctx"), "subscribe");
+    const a = r(s), i = W(v("auto-ctx"), "subscribe");
     return f(() => {
-      if (a == 0)
-        return l?.(t, s);
+      if (o == 0)
+        return i?.(t, s);
       {
-        let i = l?.(t, s);
-        return () => setTimeout(i, a);
+        let c = i?.(t, s);
+        return () => setTimeout(c, o);
       }
-    }, [l, c]), E(c);
+    }, [i, a]), v(a);
   }
-}), me = (t) => {
-  const [, e] = v(0), { proxy: n, finalGetter: r, openGetter: a, clean: s } = b(
+}), 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 = C(() => {
-        [...c.values()].some((h) => l[h] != t?.data?.[h]) && e((h) => h + 1);
-      }, 0), g = () => {
-        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: g, clean: () => {
-        g(), j(), e((h) => h + 1);
+      return { proxy: l, finalGetter: R, openGetter: p, clean: () => {
+        p(), R(), e((d) => d + 1);
       } };
     },
     [t]
   );
-  return a(), setTimeout(r, 0), f(
+  return o(), setTimeout(r, 0), f(
     () => () => s(),
     [s]
   ), n;
-}, 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));
-      };
-    },
+};
+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 /* @__PURE__ */ m("div", { className: "main-panel", children: [
-    /* @__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) })
-  ] });
-}, X = ({ selectedKey: t, setKey: e, currentKey: n, ...r }) => {
-  const a = y(n), s = O(void 0);
+  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 (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);
+    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);
     }
-  }, [a, s]), /* @__PURE__ */ o(
+  }, [s, a]), /* @__PURE__ */ S(
     "div",
     {
-      ref: s,
+      ref: a,
       className: "state-key",
+      title: n,
       "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(
-    re,
-    {
-      value: n,
-      name: t,
-      expandLevel: 1,
-      style: {}
-    }
-  );
-}, F = (t) => {
-  let e = t.length < 120 ? 10 : 100;
-  return Object.fromEntries(
-    new Array(Math.ceil((t.length + 1) / e)).fill(0).map(
-      (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((r) => [r, t[r]])
-    )])
-  );
-}, Y = (t, e = 25) => {
-  const n = Object.keys(t);
-  return Object.fromEntries(
-    Array(Math.ceil((n.length + 1) / e)).fill(0).map(
-      (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]]))
-      ]
-    )
-  );
-}, 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 };
-}, w = ({ value: t, deepCompare: e = !1, ...n }) => {
-  const r = O(void 0), a = O(t);
-  return f(() => {
-    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, r]), /* @__PURE__ */ o("div", { ...n, ref: r });
-}, Z = (t) => {
-  const {
-    currentField: e,
-    value: n,
-    path: r = [],
-    name: a,
-    expandRoot: s,
-    setExpandRoot: c,
-    expandLevel: l,
-    isGrouped: i
-  } = 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(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: ":" }),
-      /* @__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, L], G) => /* @__PURE__ */ J(
-      M,
-      {
-        name: a,
-        expandRoot: s,
-        setExpandRoot: c,
-        expandLevel: g,
-        value: L,
-        isGrouped: j,
-        key: [...r, j ? G : S].join("%"),
-        path: [...r, S]
-      }
-    )) }),
-    e && /* @__PURE__ */ o("div", { children: /* @__PURE__ */ m("span", { children: [
-      " ",
-      u ? "]" : "}",
-      " "
-    ] }) })
-  ] }) : /* @__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: "[+]" }),
-    /* @__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 ? "]" : "}",
-      " "
-    ] })
-  ] }) }) });
-}, 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(
-    w,
-    {
-      value: t.value,
-      className: `jv-field jv-field-${e} ${c ? "jv-cursor" : ""}`,
-      onClick: () => s(!a),
+      ...o,
       children: [
-        /* @__PURE__ */ o("span", { className: "jv-name", children: n }),
-        /* @__PURE__ */ o("span", { children: ":" }),
-        /* @__PURE__ */ m("span", { className: "jv-type", children: [
-          e,
-          ", lng=",
-          r?.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"
+        ] })
       ]
     }
   );
-}, 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(
-    w,
-    {
-      value: t.value,
-      className: `jv-field jv-field-${e} ${c ? "jv-cursor" : ""}`,
-      onClick: () => s(!a),
-      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]
   );
-}, ne = (t) => {
-  const { currentType: e, currentField: n, value: r } = t;
-  return /* @__PURE__ */ m(
-    w,
+  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(r) }),
-        /* @__PURE__ */ o("span", { children: "," })
-      ]
+      value: r,
+      name: t
     }
   );
-}, M = (t) => {
-  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(Z, { ...t, currentField: a, currentType: s });
-    case "string":
-      return /* @__PURE__ */ o(ee, { ...t, currentField: a, currentType: s });
-    case "function":
-      return /* @__PURE__ */ o(te, { ...t, currentField: a, currentType: s });
-    case "number":
-    case "boolean":
-    case "bigint":
-    case "symbol":
-    case "undefined":
-    default:
-      return /* @__PURE__ */ o(ne, { ...t, currentField: a, currentType: s });
-  }
-}, 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: a,
-      setExpandRoot: s,
-      expandLevel: r
-    }
-  ) });
-}, 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: () => r(!1), children: "[x]" }),
-      n && /* @__PURE__ */ o(U, {})
+}, 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 {
-  de as AutoRootCtx,
-  q as Context,
-  fe as DevToolContainer,
-  he as createAutoCtx,
-  ue as createRootCtx,
-  y as getContext,
-  _ as useArrayHash,
-  E as useDataContext,
-  ce as useDataSource,
-  R as useDataSourceMultiple,
-  z as useDataSubscribe,
-  ie as useDataSubscribeMultiple,
-  oe as useDataSubscribeMultipleWithDebounce,
-  le as useDataSubscribeWithTransform,
-  me 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