react-state-custom 1.0.19 → 1.0.21

package/dist/index.es.js

@@ -1,25 +1,25 @@
-import { useRef as D, useMemo as d, useEffect as b, useState as S, useCallback as O, Fragment as R } from "react";
-import { jsx as g, Fragment as T } from "react/jsx-runtime";
-function w(t, e) {
-  let r = null, s = function(...u) {
-    r && clearTimeout(r), r = setTimeout(() => {
-      t(...u);
+import { useRef as w, useMemo as g, useEffect as f, useState as v, useCallback as $, Fragment as F, createElement as G } from "react";
+import { jsx as o, Fragment as O, jsxs as m } from "react/jsx-runtime";
+function C(t, e) {
+  let n = null, a = function(...r) {
+    n && clearTimeout(n), n = setTimeout(() => {
+      t(...r);
     }, e);
   };
-  return s.cancel = () => clearTimeout(r), s;
+  return a.cancel = () => clearTimeout(n), a;
 }
-function V(t) {
-  const e = /* @__PURE__ */ new Map();
-  return function(...r) {
-    const s = JSON.stringify(r);
-    if (e.has(s))
-      return e.get(s);
-    const u = t(...r);
-    return e.set(s, u), u;
+function J(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;
   };
+  return n.cache = e, n;
 }
-const v = () => Math.random().toString().slice(2), j = (t) => {
-  const { current: { computedHash: e } } = D({
+const V = () => Math.random().toString().slice(2), H = (t) => {
+  const { current: { computedHash: e } } = w({
     /**
      * Getter for the computed hash function.
      *
@@ -28,21 +28,21 @@ const v = () => Math.random().toString().slice(2), j = (t) => {
      * - Updates the hash if any difference is detected.
      */
     get computedHash() {
-      let r = [], s = v();
-      return (u) => {
-        let n = !1;
-        return n = n || !u != !r, n = n || u?.length != r?.length, n = n || u.some((a, c) => a != r[c]), r = u, n && (s = v()), s;
+      let n = [], a = V();
+      return (r) => {
+        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 = V()), a;
       };
     }
   });
   return e(t);
 };
-class G extends Event {
-  constructor(e, r) {
-    super(e), this.event = e, this.value = r;
+class L extends Event {
+  constructor(e, n) {
+    super(e), this.event = e, this.value = n;
   }
 }
-class H extends EventTarget {
+class W extends EventTarget {
   /**
    * Create a new Context instance.
    * @param name - The name of the context (for debugging).
@@ -64,8 +64,8 @@ class H extends EventTarget {
    * @param key - The key to update.
    * @param value - The new value.
    */
-  publish(e, r) {
-    r != this.data[e] && (this.data[e] = r, this.dispatchEvent(new G(String(e), r)));
+  publish(e, n) {
+    n != this.data[e] && (this.data[e] = n, this.dispatchEvent(new L(String(e), n)));
   }
   /**
    * Subscribe to changes for a specific key in the context.
@@ -73,193 +73,193 @@ class H extends EventTarget {
    * @param _listener - Callback invoked with the new value.
    * @returns Unsubscribe function.
    */
-  subscribe(e, r) {
-    const s = ({ event: u, value: n }) => {
-      r(n);
+  subscribe(e, n) {
+    const a = ({ event: r, value: s }) => {
+      n(s);
     };
-    return this.addEventListener(String(e), s), e in this.data && r(this.data[e]), () => (this.removeEventListener(String(e), s), void 0);
+    return this.addEventListener(String(e), a), e in this.data && n(this.data[e]), () => (this.removeEventListener(String(e), a), void 0);
   }
 }
-const A = V((t) => new H(t)), p = (t = "noname") => d(() => A(t), [t]), N = (t, ...e) => {
-  const r = new Error("[ctx] useRegistryChecker failed " + JSON.stringify({ names: e, ctx: t?.name ?? "undefined" }));
-  b(
+const y = J((t) => new W(t)), E = (t = "noname") => g(() => y(t), [t]), A = (t, ...e) => {
+  const n = new Error("[ctx] useRegistryChecker failed " + JSON.stringify({ names: e, ctx: t?.name ?? "undefined" }));
+  f(
     () => {
       if (t)
-        return e.some((s) => t.registry.has(s)) && console.error(r), e.forEach((s) => t.registry.add(s)), () => {
-          e.forEach((s) => t.registry.delete(s));
+        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));
         };
     },
     [t, e.length]
   );
-}, x = (t, e, r) => {
-  b(() => {
-    t && t.data[e] != r && t.publish(e, r);
-  }, [e, r, t]), N(t, e);
-}, W = (t, e, r = 0) => {
-  const [{ value: s }, u] = S(() => ({ value: t?.data?.[e] }));
-  return b(() => {
+}, ne = (t, e, n) => {
+  f(() => {
+    t && t.data[e] != n && t.publish(e, n);
+  }, [e, n, t]), A(t, e);
+}, K = (t, e, n = 0) => {
+  const [{ value: a }, r] = v(() => ({ value: t?.data?.[e] }));
+  return f(() => {
     if (t) {
-      let n = r == 0 ? (c) => u({ value: c }) : w((c) => u({ value: c }), r), a = t.subscribe(e, n);
-      return s != t.data[e] && u({ value: t.data[e] }), () => {
-        a();
+      let s = n == 0 ? (l) => r({ value: l }) : C((l) => r({ value: l }), n), c = t.subscribe(e, s);
+      return a != t.data[e] && r({ value: t.data[e] }), () => {
+        c();
       };
     }
   }, [e, t]), t?.data[e];
-}, z = (t, e, r) => {
-  const [, s] = S(0), u = d(
-    () => r(t?.data[e]),
-    [r, t?.data[e]]
+}, ae = (t, e, n) => {
+  const [, a] = v(0), r = g(
+    () => n(t?.data[e]),
+    [n, t?.data[e]]
   );
-  return b(() => {
+  return f(() => {
     if (t) {
-      let n = u, a = () => {
-        let o = r(t.data[e]);
-        o != n && (n = o, s((l) => l + 1));
-      }, c = t.subscribe(e, a);
-      return a(), () => c();
+      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();
     }
-  }, [e, t]), u;
-}, M = (t, ...e) => {
-  b(() => {
+  }, [e, t]), r;
+}, k = (t, ...e) => {
+  f(() => {
     if (t)
-      for (let [r, s] of e)
-        t.data[r] != s && t.publish(r, s);
-  }, [t, j(e.flat())]), N(t, ...e.map((r) => r[0]));
-}, K = (t, ...e) => {
-  const [, r] = S(0), s = e.map((u) => t?.data?.[u]);
-  return b(() => {
+      for (let [n, a] of e)
+        t.data[n] != a && t.publish(n, a);
+  }, [t, H(e.flat())]), A(t, ...e.map((n) => n[0]));
+}, re = (t, ...e) => {
+  const [, n] = v(0), a = e.map((r) => t?.data?.[r]);
+  return f(() => {
     if (t) {
-      let u = s;
-      const n = w(() => {
-        let o = e.map((l) => t?.data?.[l]);
-        e.some((l, i) => u[i] != o[i]) && (u = o, r((l) => l + 1));
+      let r = a;
+      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));
       }, 1);
-      let a = e.map((o) => t.subscribe(o, n)), c = setTimeout(n, 1);
+      let c = e.map((i) => t.subscribe(i, s)), l = setTimeout(s, 1);
       return () => {
-        clearTimeout(c), n.cancel(), a.forEach((o) => o());
+        clearTimeout(l), s.cancel(), c.forEach((i) => i());
       };
     }
-  }, [t, ...e]), Object.fromEntries(e.map((u, n) => [u, s[n]]));
-}, P = (t, e = 50, ...r) => {
-  const [, s] = S(0), u = r.map((n) => t?.data?.[n]);
-  return b(() => {
+  }, [t, ...e]), Object.fromEntries(e.map((r, s) => [r, a[s]]));
+}, se = (t, e = 50, ...n) => {
+  const [, a] = v(0), r = n.map((s) => t?.data?.[s]);
+  return f(() => {
     if (t) {
-      let n = u;
-      const a = w(() => {
-        let l = r.map((i) => t?.data?.[i]);
-        r.some((i, m) => n[m] != l[m]) && (n = l, s((i) => i + 1));
+      let s = r;
+      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));
       }, e);
-      let c = r.map((l) => t.subscribe(l, a)), o = setTimeout(a, 1);
+      let l = n.map((u) => t.subscribe(u, c)), i = setTimeout(c, 1);
       return () => {
-        clearTimeout(o), a.cancel(), c.forEach((l) => l());
+        clearTimeout(i), c.cancel(), l.forEach((u) => u());
       };
     }
-  }, [t, ...r]), u;
-}, Q = (t, e) => {
-  const r = (n) => [
+  }, [t, ...n]), r;
+}, ce = (t, e) => {
+  const n = (s) => [
     t,
-    ...Object.entries(n ?? {}).sort((a, c) => a[0].localeCompare(c[0])).flat()
+    ...Object.entries(s ?? {}).sort((c, l) => c[0].localeCompare(l[0])).flat()
   ].join("-");
-  let s = /* @__PURE__ */ new Set();
-  const u = (n) => {
-    const a = e(n), c = r(n), o = p(c), l = d(() => new Error().stack, []);
-    return M(
-      o,
-      ...Object.entries(a)
-    ), b(() => {
-      if (s.has(c)) {
-        const i = new Error("RootContext " + c + " are mounted more than once");
-        throw i.stack = l, i;
+  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)
+    ), f(() => {
+      if (a.has(l)) {
+        const d = new Error("RootContext " + l + " are mounted more than once");
+        throw d.stack = u, d;
       }
-      return s.add(c), () => {
-        s.delete(c);
+      return a.add(l), () => {
+        a.delete(l);
       };
-    }), /* @__PURE__ */ g(T, {});
+    }), /* @__PURE__ */ o(O, {});
   };
-  return u.displayName = `State[${e?.name ?? "??"}]`, {
-    resolveCtxName: r,
-    Root: u,
+  return r.displayName = `State[${e?.name ?? "??"}]`, {
+    resolveCtxName: n,
+    Root: r,
     /**
      * 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: (n) => {
-      const a = r(n), c = d(() => new Error().stack, []);
-      return b(() => {
-        if (!s.has(a)) {
-          const o = new Error("RootContext [" + a + "] is not mounted");
-          throw o.stack = c, o;
+    useCtxStateStrict: (s) => {
+      const c = n(s), l = g(() => new Error().stack, []);
+      return f(() => {
+        if (!a.has(c)) {
+          const i = new Error("RootContext [" + c + "] is not mounted");
+          throw i.stack = l, i;
         }
-      }, [a]), p(a);
+      }, [c]), E(c);
     },
     /**
      * 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: (n) => {
-      const a = r(n), c = d(() => new Error().stack, []);
-      return b(() => {
-        if (!s.has(a)) {
-          const o = new Error("RootContext [" + a + "] is not mounted");
-          o.stack = c;
-          let l = setTimeout(() => console.error(o), 1e3);
-          return () => clearTimeout(l);
+    useCtxState: (s) => {
+      const c = n(s), l = g(() => 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);
         }
-      }, [s.has(a)]), p(a);
+      }, [a.has(c)]), E(c);
     }
   };
-}, F = /* @__PURE__ */ function() {
+}, _ = /* @__PURE__ */ function() {
   const t = /* @__PURE__ */ new WeakMap();
   return (e) => {
-    let r = t.get(e);
-    return r || t.set(e, r = (e?.name ?? "") + Math.random().toString()), r;
+    let n = t.get(e);
+    return n || t.set(e, n = (e?.name ?? "") + Math.random().toString()), n;
   };
-}(), J = (t) => [
-  ...Object.entries(t ?? {}).sort((e, r) => e[0].localeCompare(r[0])).flat()
-].join("-"), U = ({ Wrapper: t = R }) => {
-  const e = p("auto-ctx"), [r, s] = S({}), u = O(
-    (n, a) => {
-      const c = F(n), o = J(a);
-      return s(({
-        [c]: {
-          Component: l = n,
+}(), I = (t) => [
+  ...Object.entries(t ?? {}).sort((e, n) => e[0].localeCompare(n[0])).flat()
+].join("-"), le = ({ Wrapper: t = F }) => {
+  const e = E("auto-ctx"), [n, a] = v({}), r = $(
+    (s, c) => {
+      const l = _(s), i = I(c);
+      return a(({
+        [l]: {
+          Component: u = s,
           subState: {
-            [o]: i = { params: a, counter: 0 },
-            ...m
+            [i]: d = { params: c, counter: 0 },
+            ...p
           } = {}
         } = {},
-        ...h
+        ...b
       }) => ({
-        ...h,
-        [c]: {
-          Component: l,
+        ...b,
+        [l]: {
+          Component: u,
           subState: {
-            ...m,
-            [o]: {
-              ...i,
-              counter: i.counter + 1
+            ...p,
+            [i]: {
+              ...d,
+              counter: d.counter + 1
             }
           }
         }
-      })), () => s(({
-        [c]: {
-          Component: l = n,
+      })), () => a(({
+        [l]: {
+          Component: u = s,
           subState: {
-            [o]: i = { params: a, counter: 0 },
-            ...m
+            [i]: d = { params: c, counter: 0 },
+            ...p
           } = {}
         } = {},
-        ...h
+        ...b
       }) => ({
-        ...h,
-        [c]: {
-          Component: l,
+        ...b,
+        [l]: {
+          Component: u,
           subState: {
-            ...m,
-            ...i.counter > 1 ? {
-              [o]: {
-                ...i,
-                counter: i.counter - 1
+            ...p,
+            ...d.counter > 1 ? {
+              [i]: {
+                ...d,
+                counter: d.counter - 1
               }
             } : {}
           }
@@ -268,74 +268,312 @@ const A = V((t) => new H(t)), p = (t = "noname") => d(() => A(t), [t]), N = (t,
     },
     []
   );
-  return M(
+  return k(
     e,
-    ["subscribe", u],
-    ["state", r]
-  ), /* @__PURE__ */ g(T, { children: Object.entries(r).flatMap(
-    ([n, { Component: a, subState: c }]) => Object.entries(c).map(([o, { counter: l, params: i }]) => ({ key: n + o, Component: a, params: i, counter: l })).filter((o) => o.counter > 0).map(({ key: o, params: l, Component: i }) => /* @__PURE__ */ g(t, { children: /* @__PURE__ */ g(i, { ...l }) }, o))
+    ["subscribe", r],
+    ["state", n]
+  ), /* @__PURE__ */ o(O, { 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))
   ) });
-}, X = ({ Root: t, useCtxState: e, useCtxStateStrict: r, resolveCtxName: s }, u = 0) => ({
-  useCtxState: (n) => {
-    const a = s(n), c = W(p("auto-ctx"), "subscribe");
-    return b(() => {
-      if (u == 0)
-        return c?.(t, n);
+}, ie = ({ Root: t, useCtxState: e, useCtxStateStrict: n, resolveCtxName: a }, r = 0) => ({
+  useCtxState: (s) => {
+    const c = a(s), l = K(E("auto-ctx"), "subscribe");
+    return f(() => {
+      if (r == 0)
+        return l?.(t, s);
       {
-        let o = c?.(t, n);
-        return () => setTimeout(o, u);
+        let i = l?.(t, s);
+        return () => setTimeout(i, r);
       }
-    }, [c, a]), p(a);
+    }, [l, c]), E(c);
   }
-}), q = (t) => {
-  const [, e] = S(0), { proxy: r, finalGetter: s, openGetter: u, clean: n } = d(
+}), oe = (t) => {
+  const [, e] = v(0), { proxy: n, finalGetter: a, openGetter: r, clean: s } = g(
     () => {
-      const a = /* @__PURE__ */ new Set(), c = {}, o = /* @__PURE__ */ new Map(), l = new Proxy(
+      const c = /* @__PURE__ */ new Set(), l = {}, i = /* @__PURE__ */ new Map(), u = new Proxy(
         t?.data,
         {
-          get(f, C) {
-            if (i)
-              return a.add(C), c[C] = f[C];
+          get(h, S) {
+            if (d)
+              return c.add(S), l[S] = h[S];
             throw new Error("now allow here");
           }
         }
       );
-      let i = !0, m = w(() => {
-        [...a.values()].some((f) => c[f] != t?.data?.[f]) && e((f) => f + 1);
-      }, 0), h = () => {
-        i = !0, a.clear();
-      }, E = () => {
-        i = !1, [...a.values()].filter((f) => !o.has(f)).forEach((f) => {
-          o.set(f, t?.subscribe(f, m));
-        }), [...o.keys()].filter((f) => !a.has(f)).forEach((f) => {
-          o.get(f)?.(), o.delete(f);
+      let d = !0, p = C(() => {
+        [...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);
         });
       };
-      return { proxy: l, finalGetter: E, openGetter: h, clean: () => {
-        h(), E(), e((f) => f + 1);
+      return { proxy: u, finalGetter: j, openGetter: b, clean: () => {
+        b(), j(), e((h) => h + 1);
       } };
     },
     [t]
   );
-  return u(), setTimeout(s, 0), b(
-    () => () => n(),
-    [n]
-  ), r;
+  return r(), setTimeout(a, 0), f(
+    () => () => s(),
+    [s]
+  ), n;
+}, q = y.cache, z = ({}) => {
+  const [t, e] = v("");
+  return /* @__PURE__ */ m("div", { className: "main-panel", children: [
+    /* @__PURE__ */ o("div", { className: "state-list", children: [...q.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(B, { dataKey: t }, t) })
+  ] });
+}, B = ({ dataKey: t }) => {
+  const e = y(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(
+    Z,
+    {
+      value: n,
+      name: "ROOT",
+      expandLevel: 1,
+      style: {}
+    }
+  );
+}, x = (t, e = 10) => 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]])
+  )])
+), P = (t, e = 10) => {
+  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]]))
+      ]
+    )
+  );
+}, T = ({ 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 = $(
+    (i) => a((u) => ({ ...u, [r]: i })),
+    [n, r]
+  );
+  return { isExpand: c, setExpand: l };
+}, N = ({ value: t, deepCompare: e = !1, ...n }) => {
+  const a = w(void 0), r = w(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"));
+      return () => cancelAnimationFrame(c);
+    }
+  }, [t, e, a]), /* @__PURE__ */ o("div", { ...n, ref: a });
+}, Q = (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 } = T(t), b = typeof l == "number" ? l - 1 : l, j = Object.entries(n).length > 10, D = g(
+    () => j ? n instanceof Array ? x(n, 10) : P(n, 10) : n,
+    [n, j, x]
+  );
+  return d ? /* @__PURE__ */ m(N, { 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(D).map(([h, S], R) => /* @__PURE__ */ G(
+      M,
+      {
+        name: r,
+        expandRoot: s,
+        setExpandRoot: c,
+        expandLevel: b,
+        value: S,
+        isGrouped: j,
+        key: [...a, j ? R : h].join("%"),
+        path: [...a, h]
+      }
+    )) }),
+    e && /* @__PURE__ */ o("div", { children: /* @__PURE__ */ m("span", { children: [
+      " ",
+      u ? "]" : "}",
+      " "
+    ] }) })
+  ] }) : /* @__PURE__ */ o(N, { className: "jv-field jv-field-obj", value: n, deepCompare: i, children: /* @__PURE__ */ o("div", { children: /* @__PURE__ */ m("div", { onClick: () => p(!0), children: [
+    /* @__PURE__ */ o("span", { className: "jv-name", children: e }),
+    e && /* @__PURE__ */ o("span", { children: ":" }),
+    e && /* @__PURE__ */ o("span", { children: "[+]" }),
+    /* @__PURE__ */ m("span", { className: "jv-type", children: [
+      Object.keys(n).length,
+      " items "
+    ] }),
+    /* @__PURE__ */ m("span", { children: [
+      " ",
+      u ? "[" : "{",
+      " "
+    ] }),
+    /* @__PURE__ */ o("span", { children: " ... " }),
+    /* @__PURE__ */ m("span", { children: [
+      " ",
+      u ? "]" : "}",
+      " "
+    ] })
+  ] }) }) });
+}, U = (t) => {
+  const { currentType: e, currentField: n, value: a } = t, { isExpand: r, setExpand: s } = T(t), c = String(a).length > 50, l = c && !r ? `${String(a).slice(0, 15)}...${String(a).slice(-15, -1)}` : String(a);
+  return /* @__PURE__ */ m(
+    N,
+    {
+      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__ */ m("span", { className: "jv-type", children: [
+          e,
+          ", lng=",
+          a?.length
+        ] }),
+        /* @__PURE__ */ m("span", { className: "jv-value", children: [
+          '"',
+          l,
+          '"'
+        ] }),
+        /* @__PURE__ */ o("span", { children: "," })
+      ]
+    }
+  );
+}, X = (t) => {
+  const { currentType: e, currentField: n, value: a } = t, { isExpand: r, setExpand: s } = T(t), c = String(a).length > 50, l = c && !r ? `${String(a).slice(0, 15)}...${String(a).slice(-15, -1)}` : String(a);
+  return /* @__PURE__ */ m(
+    N,
+    {
+      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: "," })
+      ]
+    }
+  );
+}, Y = (t) => {
+  const { currentType: e, currentField: n, value: a } = t;
+  return /* @__PURE__ */ m(
+    N,
+    {
+      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: "," })
+      ]
+    }
+  );
+}, 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(Q, { ...t, currentField: r, currentType: s });
+    case "string":
+      return /* @__PURE__ */ o(U, { ...t, currentField: r, currentType: s });
+    case "function":
+      return /* @__PURE__ */ o(X, { ...t, currentField: r, currentType: s });
+    case "number":
+    case "boolean":
+    case "bigint":
+    case "symbol":
+    case "undefined":
+    default:
+      return /* @__PURE__ */ o(Y, { ...t, currentField: r, currentType: s });
+  }
+}, Z = ({ 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
+    }
+  ) });
+}, ue = ({ toggleButton: t = "[x]", ...e }) => {
+  const [n, a] = v(!1);
+  return /* @__PURE__ */ m(O, { 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(z, {})
+    ] })
+  ] });
 };
 export {
-  U as AutoRootCtx,
-  H as Context,
-  X as createAutoCtx,
-  Q as createRootCtx,
-  A as getContext,
-  j as useArrayHash,
-  p as useDataContext,
-  x as useDataSource,
-  M as useDataSourceMultiple,
-  W as useDataSubscribe,
-  K as useDataSubscribeMultiple,
-  P as useDataSubscribeMultipleWithDebounce,
-  z as useDataSubscribeWithTransform,
-  q as useQuickSubscribe
+  le as AutoRootCtx,
+  W as Context,
+  ue as DevToolContainer,
+  ie as createAutoCtx,
+  ce as createRootCtx,
+  y as getContext,
+  H as useArrayHash,
+  E as useDataContext,
+  ne as useDataSource,
+  k as useDataSourceMultiple,
+  K as useDataSubscribe,
+  re as useDataSubscribeMultiple,
+  se as useDataSubscribeMultipleWithDebounce,
+  ae as useDataSubscribeWithTransform,
+  oe as useQuickSubscribe
 };
 //# sourceMappingURL=index.es.js.map