npm - cogsbox-state - Versions diffs - 0.5.3 → 0.5.4 - Mend

cogsbox-state 0.5.3 → 0.5.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (12) hide show

package/dist/CogsState.d.ts +25 -21
package/dist/CogsState.jsx +491 -442
package/dist/CogsState.jsx.map +1 -1
package/dist/Functions.jsx +175 -0
package/dist/Functions.jsx.map +1 -0
package/dist/store.d.ts +4 -0
package/dist/store.js.map +1 -1
package/package.json +7 -4
package/dist/examples/index.d.ts +0 -1
package/dist/updaterFunctions.jsx +0 -177
package/dist/updaterFunctions.jsx.map +0 -1
/package/dist/{updaterFunctions.d.ts → Functions.d.ts} +0 -0

package/dist/CogsState.jsx CHANGED Viewed

@@ -1,72 +1,72 @@
 "use client";
-import { j as X } from "./node_modules/react/jsx-runtime.jsx";
-import { r as _ } from "./node_modules/react/index.js";
-import { transformStateFunc as ct, isFunction as nt, getNestedValue as W, isDeepEqual as M } from "./utility.js";
-import { updateFn as Y, ValidationWrapper as lt, FormControlComponent as dt, pushFunc as Z, cutFunc as ut } from "./updaterFunctions.jsx";
+import { j as Y } from "./node_modules/react/jsx-runtime.jsx";
+import { r as w } from "./node_modules/react/index.js";
+import { transformStateFunc as ut, isFunction as at, getNestedValue as R, isDeepEqual as L } from "./utility.js";
+import { pushFunc as Z, cutFunc as K, updateFn as tt, ValidationWrapper as St, FormControlComponent as gt } from "./Functions.jsx";
 import "zod";
-import { getGlobalStore as n } from "./store.js";
-import { useCogsConfig as St } from "./CogsStateClient.jsx";
-import q from "./node_modules/uuid/dist/esm-browser/v4.js";
-function Ot(t, { formElements: i, zodSchema: S }) {
-  return { initialState: t, formElements: i, zodSchema: S };
+import { getGlobalStore as a } from "./store.js";
+import { useCogsConfig as ft } from "./CogsStateClient.jsx";
+import k from "./node_modules/uuid/dist/esm-browser/v4.js";
+function Mt(t, { formElements: i, zodSchema: d }) {
+  return { initialState: t, formElements: i, zodSchema: d };
 }
-function K(t, i) {
-  const S = n.getState().getInitialOptions, u = n.getState().setInitialStateOptions, g = S(t) || {};
+function et(t, i) {
+  const d = a.getState().getInitialOptions, u = a.getState().setInitialStateOptions, S = d(t) || {};
   u(t, {
-    ...g,
+    ...S,
     ...i
   });
 }
-function tt({
+function nt({
   stateKey: t,
   options: i,
-  initialOptionsPart: S
+  initialOptionsPart: d
 }) {
-  const u = k(t) || {}, g = S[t] || {}, E = n.getState().setInitialStateOptions, f = { ...g, ...u };
-  let m = !1;
+  const u = z(t) || {}, S = d[t] || {}, I = a.getState().setInitialStateOptions, _ = { ...S, ...u };
+  let E = !1;
   if (i)
-    for (const w in i)
-      f.hasOwnProperty(w) || (m = !0, f[w] = i[w]);
-  m && E(t, f);
+    for (const y in i)
+      _.hasOwnProperty(y) || (E = !0, _[y] = i[y]);
+  E && I(t, _);
 }
-const ht = (t) => {
-  let i = t;
-  const [S, u] = ct(i);
-  n.getState().setInitialStates(S);
-  const g = (f, m) => {
-    const [w] = _.useState(q());
-    tt({ stateKey: f, options: m, initialOptionsPart: u });
-    const I = n.getState().cogsStateStore[f] || S[f], s = m?.modifyState ? m.modifyState(I) : I, [e, v] = Et(
-      s,
+const Ot = (t, i) => {
+  let d = t;
+  const [u, S] = ut(d);
+  a.getState().setInitialStates(u);
+  const I = (E, y) => {
+    const [p] = w.useState(k());
+    nt({ stateKey: E, options: y, initialOptionsPart: S });
+    const o = a.getState().cogsStateStore[E] || u[E], r = y?.modifyState ? y.modifyState(o) : o, [v, N] = wt(
+      r,
       {
-        stateKey: f,
-        syncUpdate: m?.syncUpdate,
-        componentId: w,
-        localStorage: m?.localStorage,
-        middleware: m?.middleware,
-        enabledSync: m?.enabledSync,
-        reactiveDeps: m?.reactiveDeps,
-        initState: m?.initState
+        stateKey: E,
+        syncUpdate: y?.syncUpdate,
+        componentId: p,
+        localStorage: y?.localStorage,
+        middleware: y?.middleware,
+        enabledSync: y?.enabledSync,
+        reactiveDeps: y?.reactiveDeps,
+        initState: y?.initState
       }
     );
-    return [e, v];
+    return N;
   };
-  function E(f, m) {
-    tt({ stateKey: f, options: m, initialOptionsPart: u });
+  function _(E, y) {
+    nt({ stateKey: E, options: y, initialOptionsPart: S });
   }
-  return { useCogsState: g, setCogsOptions: E };
+  return { useCogsState: I, setCogsOptions: _ };
 }, {
-  setUpdaterState: R,
-  setState: A,
-  getInitialOptions: k,
-  getKeyState: rt,
-  getValidationErrors: gt,
-  setStateLog: ft,
+  setUpdaterState: G,
+  setState: M,
+  getInitialOptions: z,
+  getKeyState: it,
+  getValidationErrors: mt,
+  setStateLog: yt,
   updateInitialStateGlobal: J,
-  addValidationError: mt,
-  removeValidationError: D,
-  setServerSyncActions: pt
-} = n.getState(), ot = (t) => {
+  addValidationError: pt,
+  removeValidationError: U,
+  setServerSyncActions: vt
+} = a.getState(), ot = (t) => {
   if (!t) return null;
   try {
     const i = window.localStorage.getItem(t);
@@ -74,535 +74,584 @@ const ht = (t) => {
   } catch (i) {
     return console.error("Error loading from localStorage:", i), null;
   }
-}, It = (t, i, S, u) => {
-  if (S?.initState) {
-    const g = {
+}, It = (t, i, d, u) => {
+  if (d?.initState) {
+    const S = {
       state: t,
       lastUpdated: Date.now(),
-      lastSyncedWithServer: n.getState().serverSyncLog[i]?.[0]?.timeStamp,
-      baseServerState: n.getState().serverState[i]
-    }, E = S.initState ? `${u}-${i}-${S.initState.localStorageKey}` : i;
-    window.localStorage.setItem(E, JSON.stringify(g));
+      lastSyncedWithServer: a.getState().serverSyncLog[i]?.[0]?.timeStamp,
+      baseServerState: a.getState().serverState[i]
+    }, I = d.initState ? `${u}-${i}-${d.initState.localStorageKey}` : i;
+    window.localStorage.setItem(I, JSON.stringify(S));
   }
-}, vt = (t, i, S, u, g, E) => {
-  const f = {
+}, _t = (t, i, d, u, S, I) => {
+  const _ = {
     initialState: i,
-    updaterState: G(
+    updaterState: W(
       t,
       u,
-      g,
-      E
+      S,
+      I
     ),
-    state: S
+    state: d
   };
-  _.startTransition(() => {
-    J(t, f.initialState), R(t, f.updaterState), A(t, f.state);
+  w.startTransition(() => {
+    J(t, _.initialState), G(t, _.updaterState), M(t, _.state);
   });
-}, yt = (t) => {
-  const i = n.getState().stateComponents.get(t);
+}, Et = (t) => {
+  const i = a.getState().stateComponents.get(t);
   if (!i) return;
-  const S = /* @__PURE__ */ new Set();
+  const d = /* @__PURE__ */ new Set();
   i.components.forEach((u) => {
-    S.add(() => u.forceUpdate());
+    d.add(() => u.forceUpdate());
   }), queueMicrotask(() => {
-    _.startTransition(() => {
-      S.forEach((u) => u());
+    w.startTransition(() => {
+      d.forEach((u) => u());
     });
   });
 };
-function Et(t, {
+function wt(t, {
   stateKey: i,
-  serverSync: S,
+  serverSync: d,
   zodSchema: u,
-  localStorage: g,
-  formElements: E,
-  middleware: f,
-  reactiveDeps: m,
-  componentId: w,
-  initState: I,
-  syncUpdate: s
+  localStorage: S,
+  formElements: I,
+  middleware: _,
+  reactiveDeps: E,
+  componentId: y,
+  initState: p,
+  syncUpdate: o
 } = {}) {
-  const [e, v] = _.useState({}), { sessionId: x } = St();
-  let j = !i;
-  const [c] = _.useState(i ?? q()), L = n.getState().stateLog[c], z = _.useRef(/* @__PURE__ */ new Set()), l = _.useRef(w ?? q()), V = _.useRef(null);
-  V.current = k(c), _.useEffect(() => {
-    if (s && s.stateKey === c && s.path?.[0]) {
-      A(c, (r) => ({
-        ...r,
-        [s.path[0]]: s.newValue
+  const [r, v] = w.useState({}), { sessionId: N } = ft();
+  let F = !i;
+  const [c] = w.useState(i ?? k()), b = a.getState().stateLog[c], B = w.useRef(/* @__PURE__ */ new Set()), s = w.useRef(y ?? k()), A = w.useRef(null);
+  A.current = z(c), w.useEffect(() => {
+    if (o && o.stateKey === c && o.path?.[0]) {
+      M(c, (n) => ({
+        ...n,
+        [o.path[0]]: o.newValue
       }));
-      const a = `${s.stateKey}:${s.path.join(".")}`;
-      n.getState().setSyncInfo(a, {
-        timeStamp: s.timeStamp,
-        userId: s.userId
+      const e = `${o.stateKey}:${o.path.join(".")}`;
+      a.getState().setSyncInfo(e, {
+        timeStamp: o.timeStamp,
+        userId: o.userId
       });
     }
-  }, [s]), _.useEffect(() => {
-    if (I) {
-      const { initialState: a, dependencies: r } = I;
-      K(c, {
-        initState: I
-      });
-      const d = ot(
-        x + "-" + c + "-" + I?.localStorageKey
-      );
-      let p = a;
-      d && d.lastUpdated > (d.lastSyncedWithServer || 0) && (p = d.state), vt(
-        c,
-        a,
-        p,
-        P,
-        l.current,
-        x
-      ), yt(c);
-    }
-  }, [I?.localStorageKey, ...I?.dependencies || []]), _.useEffect(() => {
-    j && K(c, {
-      serverSync: S,
-      formElements: E,
+  }, [o]), w.useEffect(() => {
+    et(c, {
+      initState: p
+    });
+    const e = ot(
+      N + "-" + c + "-" + p?.localStorageKey
+    );
+    let n = null;
+    p?.initialState && (n = p?.initialState, e && e.lastUpdated > (e.lastSyncedWithServer || 0) && (n = e.state), _t(
+      c,
+      p?.initialState,
+      n,
+      h,
+      s.current,
+      N
+    )), Et(c);
+  }, [p?.localStorageKey, ...p?.dependencies || []]), w.useEffect(() => {
+    F && et(c, {
+      serverSync: d,
+      formElements: I,
       zodSchema: u,
-      initState: I,
-      localStorage: g,
-      middleware: f
+      initState: p,
+      localStorage: S,
+      middleware: _
     });
-    const a = `${c}////${l.current}`, r = n.getState().stateComponents.get(c) || {
+    const e = `${c}////${s.current}`, n = a.getState().stateComponents.get(c) || {
       components: /* @__PURE__ */ new Map()
     };
-    return r.components.set(a, {
+    return n.components.set(e, {
       forceUpdate: () => v({}),
       paths: /* @__PURE__ */ new Set(),
       deps: [],
-      depsFunction: m || void 0
-    }), n.getState().stateComponents.set(c, r), () => {
-      const d = `${c}////${l.current}`;
-      r && (r.components.delete(d), r.components.size === 0 && n.getState().stateComponents.delete(c));
+      depsFunction: E || void 0
+    }), a.getState().stateComponents.set(c, n), () => {
+      const l = `${c}////${s.current}`;
+      n && (n.components.delete(l), n.components.size === 0 && a.getState().stateComponents.delete(c));
     };
   }, []);
-  const P = (a, r, d, p) => {
-    if (Array.isArray(r)) {
-      const $ = `${c}-${r.join(".")}`;
-      z.current.add($);
+  const h = (e, n, l, g) => {
+    if (Array.isArray(n)) {
+      const m = `${c}-${n.join(".")}`;
+      B.current.add(m);
     }
-    A(c, ($) => {
-      const N = nt(a) ? a($) : a, B = `${c}-${r.join(".")}`;
-      if (B) {
-        const F = n.getState().signalDomElements.get(B);
-        if (F) {
-          const y = W(N, r);
-          F.forEach(({ parentId: T, position: O }) => {
+    M(c, (m) => {
+      const $ = at(e) ? e(m) : e, P = `${c}-${n.join(".")}`;
+      if (P) {
+        let j = !1, f = a.getState().signalDomElements.get(P);
+        if ((!f || f.size === 0) && (l.updateType === "insert" || l.updateType === "cut")) {
+          const V = n.slice(0, -1), x = R($, V);
+          if (Array.isArray(x)) {
+            j = !0;
+            const T = `${c}-${V.join(".")}`;
+            f = a.getState().signalDomElements.get(T);
+          }
+        }
+        if (f) {
+          const V = j ? R($, n.slice(0, -1)) : R($, n);
+          f.forEach(({ parentId: x, position: T, effect: D }) => {
             const C = document.querySelector(
-              `[data-parent-id="${T}"]`
+              `[data-parent-id="${x}"]`
             );
             if (C) {
-              const b = Array.from(C.childNodes);
-              b[O] && (b[O].textContent = String(y));
+              const X = Array.from(C.childNodes);
+              if (X[T]) {
+                const dt = D ? new Function(
+                  "state",
+                  `return (${D})(state)`
+                )(V) : V;
+                X[T].textContent = String(dt);
+              }
             }
           });
         }
       }
-      d.updateType === "update" && (p || V.current?.validationKey) && r && D(
-        (p || V.current?.validationKey) + "." + r.join(".")
+      l.updateType === "update" && (g || A.current?.validationKey) && n && U(
+        (g || A.current?.validationKey) + "." + n.join(".")
       );
-      const U = r.slice(0, r.length - 1);
-      d.updateType === "cut" && V.current?.validationKey && D(
-        V.current?.validationKey + "." + U.join(".")
-      ), d.updateType === "insert" && V.current?.validationKey && gt(
-        V.current?.validationKey + "." + U.join(".")
-      ).filter(([y, T]) => {
-        let O = y?.split(".").length;
-        if (y == U.join(".") && O == U.length - 1) {
-          let C = y + "." + U;
-          D(y), mt(C, T);
+      const O = n.slice(0, n.length - 1);
+      l.updateType === "cut" && A.current?.validationKey && U(
+        A.current?.validationKey + "." + O.join(".")
+      ), l.updateType === "insert" && A.current?.validationKey && mt(
+        A.current?.validationKey + "." + O.join(".")
+      ).filter(([f, V]) => {
+        let x = f?.split(".").length;
+        if (f == O.join(".") && x == O.length - 1) {
+          let T = f + "." + O;
+          U(f), pt(T, V);
         }
       });
-      const at = W($, r), it = W(N, r), st = d.updateType === "update" ? r.join(".") : [...r].slice(0, -1).join("."), H = n.getState().stateComponents.get(c);
+      const st = R(m, n), ct = R($, n), lt = l.updateType === "update" ? n.join(".") : [...n].slice(0, -1).join("."), H = a.getState().stateComponents.get(c);
       if (H) {
         for (const [
-          F,
-          y
+          j,
+          f
         ] of H.components.entries())
-          if (y.depsFunction || y.paths && y.paths.has(st))
-            if (y.depsFunction) {
-              const T = y.depsFunction(N);
-              typeof T == "boolean" ? T && y.forceUpdate() : M(y.deps, T) || (y.deps = T, y.forceUpdate());
+          if (f.depsFunction || f.paths && f.paths.has(lt))
+            if (f.depsFunction) {
+              const V = f.depsFunction($);
+              typeof V == "boolean" ? V && f.forceUpdate() : L(f.deps, V) || (f.deps = V, f.forceUpdate());
             } else
-              y.forceUpdate();
+              f.forceUpdate();
       }
       const Q = {
         timeStamp: Date.now(),
         stateKey: c,
-        path: r,
-        updateType: d.updateType,
+        path: n,
+        updateType: l.updateType,
         status: "new",
-        oldValue: at,
-        newValue: it
+        oldValue: st,
+        newValue: ct
       };
-      if (ft(c, (F) => {
-        const T = [...F ?? [], Q].reduce((O, C) => {
-          const b = `${C.stateKey}:${JSON.stringify(C.path)}`, h = O.get(b);
-          return h ? (h.timeStamp = Math.max(
-            h.timeStamp,
-            C.timeStamp
-          ), h.newValue = C.newValue, h.oldValue = h.oldValue ?? C.oldValue, h.updateType = C.updateType) : O.set(b, { ...C }), O;
+      if (yt(c, (j) => {
+        const V = [...j ?? [], Q].reduce((x, T) => {
+          const D = `${T.stateKey}:${JSON.stringify(T.path)}`, C = x.get(D);
+          return C ? (C.timeStamp = Math.max(
+            C.timeStamp,
+            T.timeStamp
+          ), C.newValue = T.newValue, C.oldValue = C.oldValue ?? T.oldValue, C.updateType = T.updateType) : x.set(D, { ...T }), x;
         }, /* @__PURE__ */ new Map());
-        return Array.from(T.values());
+        return Array.from(V.values());
       }), It(
-        N,
+        $,
         c,
-        V.current,
-        x
-      ), f && f({ updateLog: L, update: Q }), V.current?.serverSync) {
-        const F = n.getState().serverState[c], y = V.current?.serverSync;
-        pt(c, {
-          syncKey: typeof y.syncKey == "string" ? y.syncKey : y.syncKey({ state: N }),
-          rollBackState: F,
-          actionTimeStamp: Date.now() + (y.debounce ?? 3e3),
+        A.current,
+        N
+      ), _ && _({ updateLog: b, update: Q }), A.current?.serverSync) {
+        const j = a.getState().serverState[c], f = A.current?.serverSync;
+        vt(c, {
+          syncKey: typeof f.syncKey == "string" ? f.syncKey : f.syncKey({ state: $ }),
+          rollBackState: j,
+          actionTimeStamp: Date.now() + (f.debounce ?? 3e3),
           status: "waiting"
         });
       }
-      return N;
+      return $;
     });
   };
-  n.getState().updaterState[c] || (console.log("Initializing state for", c, t), R(
+  a.getState().updaterState[c] || (console.log("Initializing state for", c, t), G(
     c,
-    G(
+    W(
       c,
-      P,
-      l.current,
-      x
+      h,
+      s.current,
+      N
     )
-  ), n.getState().cogsStateStore[c] || A(c, t), n.getState().initialStateGlobal[c] || J(c, t));
-  const o = _.useMemo(() => G(
+  ), a.getState().cogsStateStore[c] || M(c, t), a.getState().initialStateGlobal[c] || J(c, t));
+  const q = w.useMemo(() => W(
     c,
-    P,
-    l.current,
-    x
+    h,
+    s.current,
+    N
   ), [c]);
-  return [rt(c), o];
-}
-function _t({
-  proxy: t
-}) {
-  const i = _.useRef(null), S = `${t._stateKey}-${t._path.join(".")}`;
-  return _.useEffect(() => {
-    const u = i.current;
-    if (!u || !u.parentElement) {
-      console.log("No element or parent");
-      return;
-    }
-    const g = u.parentElement, f = Array.from(g.childNodes).indexOf(u);
-    let m = g.getAttribute("data-parent-id");
-    m || (m = `parent-${crypto.randomUUID()}`, g.setAttribute("data-parent-id", m));
-    const I = { instanceId: `instance-${crypto.randomUUID()}`, parentId: m, position: f };
-    n.getState().addSignalElement(S, I);
-    const s = document.createTextNode(
-      String(
-        n.getState().getNestedState(t._stateKey, t._path)
-      )
-    );
-    u.replaceWith(s);
-  }, [t._stateKey, t._path.join(".")]), _.createElement("span", {
-    ref: i,
-    style: { display: "none" }
-  });
+  return [it(c), q];
 }
-function G(t, i, S, u) {
-  const g = /* @__PURE__ */ new Map();
-  let E = 0;
-  const f = (s) => {
-    const e = s.join(".");
-    for (const [v] of g)
-      (v === e || v.startsWith(e + ".")) && g.delete(v);
-    E++;
-  }, m = /* @__PURE__ */ new Map(), w = {
-    removeValidation: (s) => {
-      s?.validationKey && D(s.validationKey);
+function W(t, i, d, u) {
+  const S = /* @__PURE__ */ new Map();
+  let I = 0;
+  const _ = (o) => {
+    const r = o.join(".");
+    for (const [v] of S)
+      (v === r || v.startsWith(r + ".")) && S.delete(v);
+    I++;
+  }, E = /* @__PURE__ */ new Map(), y = {
+    removeValidation: (o) => {
+      o?.validationKey && U(o.validationKey);
     },
-    revertToInitialState: (s) => {
-      s?.validationKey && D(s.validationKey);
-      const e = n.getState().initialStateGlobal[t];
-      g.clear(), E++;
-      const v = I(e, []);
-      _.startTransition(() => {
-        R(t, v), A(t, e);
-        const x = n.getState().stateComponents.get(t);
-        x && x.components.forEach((c) => {
+    revertToInitialState: (o) => {
+      o?.validationKey && U(o.validationKey);
+      const r = a.getState().initialStateGlobal[t];
+      S.clear(), I++;
+      const v = p(r, []);
+      w.startTransition(() => {
+        G(t, v), M(t, r);
+        const N = a.getState().stateComponents.get(t);
+        N && N.components.forEach((c) => {
           c.forceUpdate();
         });
-        const j = k(t);
-        j?.initState && localStorage.removeItem(
-          j?.initState ? u + "-" + t + "-" + j?.initState.localStorageKey : t
+        const F = z(t);
+        F?.initState && localStorage.removeItem(
+          F?.initState ? u + "-" + t + "-" + F?.initState.localStorageKey : t
         ), localStorage.removeItem(t);
       });
     },
-    updateInitialState: (s) => {
-      g.clear(), E++;
-      const e = G(
+    updateInitialState: (o) => {
+      S.clear(), I++;
+      const r = W(
         t,
         i,
-        S,
+        d,
         u
       );
-      return _.startTransition(() => {
-        J(t, s), R(t, e), A(t, s);
-        const v = n.getState().stateComponents.get(t);
-        v && v.components.forEach((x) => {
-          x.forceUpdate();
+      return w.startTransition(() => {
+        J(t, o), G(t, r), M(t, o);
+        const v = a.getState().stateComponents.get(t);
+        v && v.components.forEach((N) => {
+          N.forceUpdate();
         }), localStorage.removeItem(t);
       }), {
-        fetchId: (v) => e.get()[v]
+        fetchId: (v) => r.get()[v]
       };
     },
-    _initialState: n.getState().initialStateGlobal[t],
-    _serverState: n.getState().serverState[t],
-    _isLoading: n.getState().isLoadingGlobal[t],
+    _initialState: a.getState().initialStateGlobal[t],
+    _serverState: a.getState().serverState[t],
+    _isLoading: a.getState().isLoadingGlobal[t],
     _isServerSynced: () => {
-      const s = n.getState().serverState[t];
-      return !!(s && M(s, rt(t)));
+      const o = a.getState().serverState[t];
+      return !!(o && L(o, it(t)));
     }
   };
-  function I(s, e = [], v) {
-    const x = e.map(String).join("."), j = g.get(x);
-    if (j?.stateVersion === E)
-      return j.proxy;
+  function p(o, r = [], v) {
+    const N = r.map(String).join("."), F = S.get(N);
+    if (F?.stateVersion === I)
+      return F.proxy;
     const c = {
-      get(z, l) {
-        if (l !== "then" && l !== "$get") {
-          const o = e.join("."), a = `${t}////${S}`, r = n.getState().stateComponents.get(t);
-          if (r && o) {
-            const d = r.components.get(a);
-            d && d.paths.add(o);
+      get(B, s) {
+        if (s !== "then" && !s.startsWith("$")) {
+          const e = r.join("."), n = `${t}////${d}`, l = a.getState().stateComponents.get(t);
+          if (l && e) {
+            const g = l.components.get(n);
+            g && g.paths.add(e);
           }
         }
-        if (l === "lastSynced") {
-          const o = `${t}:${e.join(".")}`;
-          return n.getState().getSyncInfo(o);
-        }
-        if (l === "_selected") {
-          const o = e.slice(0, -1), a = o.join("."), r = n.getState().getNestedState(t, o);
-          return Array.isArray(r) ? Number(e[e.length - 1]) === m.get(a) : void 0;
-        }
-        if (l == "getLocalStorage")
-          return (o) => ot(
-            u + "-" + t + "-" + o
-          );
-        if (l === "setSelected")
-          return (o) => {
-            const a = e.slice(0, -1), r = Number(e[e.length - 1]), d = a.join(".");
-            o ? m.set(d, r) : m.delete(d);
-            const p = n.getState().getNestedState(t, [...a]);
-            Y(i, p, a), f(a);
-          };
-        if (e.length == 0) {
-          if (l == "_componentId") return S;
-          if (l === "_initialState")
-            return n.getState().initialStateGlobal[t];
-          if (l === "_serverState")
-            return n.getState().serverState[t];
-          if (l === "_isLoading")
-            return n.getState().isLoadingGlobal[t];
-          if (l === "revertToInitialState")
-            return w.revertToInitialState;
-          if (l === "updateInitialState")
-            return w.updateInitialState;
-          if (l === "removeValidation")
-            return w.removeValidation;
-        }
-        if (l === "validationWrapper")
-          return ({
-            children: o,
-            hideMessage: a
-          }) => /* @__PURE__ */ X.jsx(
-            lt,
-            {
-              formOpts: a ? { validation: { message: "" } } : void 0,
-              path: e,
-              validationKey: n.getState().getInitialOptions(t)?.validationKey || "",
-              stateKey: t,
-              validIndices: v?.validIndices,
-              children: o
-            }
-          );
-        if (l === "_stateKey") return t;
-        if (l === "_path") return e;
-        if (l === "_isServerSynced") return w._isServerSynced;
-        if (l === "update")
-          return (o, a) => {
-            f(e), Y(i, o, e, "");
-          };
-        if (l === "get")
-          return () => n.getState().getNestedState(t, e);
-        if (l === "$get")
-          return () => et({ _stateKey: t, _path: e });
-        if (l === "formElement")
-          return (o, a, r) => /* @__PURE__ */ X.jsx(
-            dt,
-            {
-              setState: i,
-              validationKey: o,
-              stateKey: t,
-              path: e,
-              child: a,
-              formOpts: r
-            }
-          );
-        if (Array.isArray(s)) {
-          if (l === "getSelected")
+        if (Array.isArray(o)) {
+          if (s === "getSelected")
             return () => {
-              const o = m.get(
-                e.join(".")
+              const e = E.get(
+                r.join(".")
               );
-              if (o !== void 0)
-                return I(
-                  s[o],
-                  [...e, o.toString()],
+              if (e !== void 0)
+                return p(
+                  o[e],
+                  [...r, e.toString()],
                   v
                 );
             };
-          if (l === "$get")
-            return () => et({ _stateKey: t, _path: e });
-          if (l === "stateEach")
-            return (o) => {
-              const a = v?.filtered?.some(
-                (d) => d.join(".") === e.join(".")
-              ), r = a ? s : n.getState().getNestedState(t, e);
-              return g.clear(), E++, r.map((d, p) => {
-                const $ = a && d.__origIndex ? d.__origIndex : p, N = I(
-                  d,
-                  [...e, $.toString()],
+          if (s === "stateMap")
+            return (e) => {
+              const n = v?.filtered?.some(
+                (g) => g.join(".") === r.join(".")
+              ), l = n ? o : a.getState().getNestedState(t, r);
+              return S.clear(), I++, l.map((g, m) => {
+                const $ = n && g.__origIndex ? g.__origIndex : m, P = p(
+                  g,
+                  [...r, $.toString()],
                   v
                 );
-                return o(
-                  d,
-                  N,
-                  p,
-                  s,
-                  I(
-                    s,
-                    e,
+                return e(
+                  g,
+                  P,
+                  m,
+                  o,
+                  p(
+                    o,
+                    r,
                     v
                   )
                 );
               });
             };
-          if (l === "stateFlattenOn")
-            return (o) => {
-              const r = v?.filtered?.some(
-                (p) => p.join(".") === e.join(".")
-              ) ? s : n.getState().getNestedState(t, e);
-              g.clear(), E++;
-              const d = r.flatMap(
-                (p, $) => p[o] ?? []
+          if (s === "$stateMap")
+            return (e) => w.createElement($t, {
+              proxy: {
+                _stateKey: t,
+                _path: r,
+                _mapFn: e
+                // Pass the actual function, not string
+              }
+            });
+          if (s === "stateFlattenOn")
+            return (e) => {
+              const l = v?.filtered?.some(
+                (m) => m.join(".") === r.join(".")
+              ) ? o : a.getState().getNestedState(t, r);
+              S.clear(), I++;
+              const g = l.flatMap(
+                (m, $) => m[e] ?? []
               );
-              return I(
-                d,
-                [...e, "[*]", o],
+              return p(
+                g,
+                [...r, "[*]", e],
                 v
               );
             };
-          if (l === "findWith")
-            return (o, a) => {
-              const r = s.findIndex(
-                ($) => $[o] === a
+          if (s === "findWith")
+            return (e, n) => {
+              const l = o.findIndex(
+                ($) => $[e] === n
               );
-              if (r === -1) return;
-              const d = s[r], p = [...e, r.toString()];
-              return g.clear(), E++, I(d, p);
+              if (l === -1) return;
+              const g = o[l], m = [...r, l.toString()];
+              return S.clear(), I++, S.clear(), I++, p(g, m);
             };
-          if (l === "index")
-            return (o) => {
-              const a = s[o];
-              return I(a, [
-                ...e,
-                o.toString()
+          if (s === "index")
+            return (e) => {
+              const n = o[e];
+              return p(n, [
+                ...r,
+                e.toString()
               ]);
             };
-          if (l === "insert")
-            return (o) => (f(e), Z(
+          if (s === "insert")
+            return (e) => (_(r), Z(
               i,
-              o,
               e,
+              r,
               t
-            ), I(
-              n.getState().cogsStateStore[t],
+            ), p(
+              a.getState().cogsStateStore[t],
               []
             ));
-          if (l === "uniqueInsert")
-            return (o, a) => {
-              const r = n.getState().getNestedState(t, e), d = nt(o) ? o(r) : o;
-              !r.some(($) => a ? a.every(
-                (N) => M(
-                  $[N],
-                  d[N]
+          if (s === "uniqueInsert")
+            return (e, n) => {
+              const l = a.getState().getNestedState(t, r), g = at(e) ? e(l) : e;
+              !l.some(($) => n ? n.every(
+                (P) => L(
+                  $[P],
+                  g[P]
                 )
-              ) : M($, d)) && (f(e), Z(
+              ) : L($, g)) && (_(r), Z(
                 i,
-                d,
-                e,
+                g,
+                r,
                 t
               ));
             };
-          if (l === "cut")
-            return (o, a) => {
-              a?.waitForSync || (f(e), ut(i, e, t, o));
+          if (s === "cut")
+            return (e, n) => {
+              n?.waitForSync || (_(r), K(i, r, t, e));
             };
-          if (l === "stateFilter")
-            return (o) => {
-              const a = s.map(
-                (p, $) => ({
-                  ...p,
+          if (s === "stateFilter")
+            return (e) => {
+              const n = o.map(
+                (m, $) => ({
+                  ...m,
                   __origIndex: $.toString()
                 })
-              ), r = [], d = [];
-              for (let p = 0; p < a.length; p++)
-                o(a[p], p) && (r.push(p), d.push(a[p]));
-              return g.clear(), E++, I(
-                d,
-                e,
+              ), l = [], g = [];
+              for (let m = 0; m < n.length; m++)
+                e(n[m], m) && (l.push(m), g.push(n[m]));
+              return S.clear(), I++, p(
+                g,
+                r,
                 {
-                  filtered: [...v?.filtered || [], e],
-                  validIndices: r
+                  filtered: [...v?.filtered || [], r],
+                  validIndices: l
                   // Pass through the meta
                 }
               );
             };
         }
-        const V = [...e, l], P = n.getState().getNestedState(t, V);
-        return I(P, V, v);
+        const A = r[r.length - 1];
+        if (!isNaN(Number(A))) {
+          const e = r.slice(0, -1), n = a.getState().getNestedState(t, e);
+          if (Array.isArray(n) && s === "cut")
+            return () => K(
+              i,
+              e,
+              t,
+              Number(A)
+            );
+        }
+        if (s === "get")
+          return () => a.getState().getNestedState(t, r);
+        if (s === "$effect")
+          return (e) => rt({
+            _stateKey: t,
+            _path: r,
+            _effect: e.toString()
+          });
+        if (s === "$get")
+          return () => rt({
+            _stateKey: t,
+            _path: r
+          });
+        if (s === "lastSynced") {
+          const e = `${t}:${r.join(".")}`;
+          return a.getState().getSyncInfo(e);
+        }
+        if (s === "_selected") {
+          const e = r.slice(0, -1), n = e.join("."), l = a.getState().getNestedState(t, e);
+          return Array.isArray(l) ? Number(r[r.length - 1]) === E.get(n) : void 0;
+        }
+        if (s == "getLocalStorage")
+          return (e) => ot(
+            u + "-" + t + "-" + e
+          );
+        if (s === "setSelected")
+          return (e) => {
+            const n = r.slice(0, -1), l = Number(r[r.length - 1]), g = n.join(".");
+            e ? E.set(g, l) : E.delete(g);
+            const m = a.getState().getNestedState(t, [...n]);
+            tt(i, m, n), _(n);
+          };
+        if (r.length == 0) {
+          if (s == "_componentId") return d;
+          if (s === "_initialState")
+            return a.getState().initialStateGlobal[t];
+          if (s === "_serverState")
+            return a.getState().serverState[t];
+          if (s === "_isLoading")
+            return a.getState().isLoadingGlobal[t];
+          if (s === "revertToInitialState")
+            return y.revertToInitialState;
+          if (s === "updateInitialState")
+            return y.updateInitialState;
+          if (s === "removeValidation")
+            return y.removeValidation;
+        }
+        if (s === "validationWrapper")
+          return ({
+            children: e,
+            hideMessage: n
+          }) => /* @__PURE__ */ Y.jsx(
+            St,
+            {
+              formOpts: n ? { validation: { message: "" } } : void 0,
+              path: r,
+              validationKey: a.getState().getInitialOptions(t)?.validationKey || "",
+              stateKey: t,
+              validIndices: v?.validIndices,
+              children: e
+            }
+          );
+        if (s === "_stateKey") return t;
+        if (s === "_path") return r;
+        if (s === "_isServerSynced") return y._isServerSynced;
+        if (s === "update")
+          return (e, n) => {
+            _(r), tt(i, e, r, "");
+          };
+        if (s === "formElement")
+          return (e, n, l) => /* @__PURE__ */ Y.jsx(
+            gt,
+            {
+              setState: i,
+              validationKey: e,
+              stateKey: t,
+              path: r,
+              child: n,
+              formOpts: l
+            }
+          );
+        const h = [...r, s], q = a.getState().getNestedState(t, h);
+        return p(q, h, v);
       }
-    }, L = new Proxy(w, c);
-    return g.set(x, {
-      proxy: L,
-      stateVersion: E
-    }), L;
+    }, b = new Proxy(y, c);
+    return S.set(N, {
+      proxy: b,
+      stateVersion: I
+    }), b;
   }
-  return I(
-    n.getState().getNestedState(t, [])
+  return p(
+    a.getState().getNestedState(t, [])
   );
 }
-function et(t) {
-  return _.createElement(_t, { proxy: t });
+function rt(t) {
+  return w.createElement(Nt, { proxy: t });
+}
+function $t({
+  proxy: t
+}) {
+  const i = a().getNestedState(t._stateKey, t._path);
+  return console.log("value", i), Array.isArray(i) ? i.map((d, u) => t._mapFn(
+    d,
+    a.getState().updaterState[t._stateKey],
+    u,
+    i,
+    a.getState().updaterState[t._stateKey]
+  )) : null;
+}
+function Nt({
+  proxy: t
+}) {
+  const i = w.useRef(null), d = `${t._stateKey}-${t._path.join(".")}`;
+  return console.log("SignalRenderer", d), w.useEffect(() => {
+    const u = i.current;
+    if (!u || !u.parentElement) return;
+    const S = u.parentElement, _ = Array.from(S.childNodes).indexOf(u);
+    let E = S.getAttribute("data-parent-id");
+    E || (E = `parent-${crypto.randomUUID()}`, S.setAttribute("data-parent-id", E));
+    const p = {
+      instanceId: `instance-${crypto.randomUUID()}`,
+      parentId: E,
+      position: _,
+      effect: t._effect
+    };
+    a.getState().addSignalElement(d, p);
+    const o = a.getState().getNestedState(t._stateKey, t._path), r = document.createTextNode(String(o));
+    u.replaceWith(r);
+  }, [t._stateKey, t._path.join("."), t._effect]), w.createElement("span", {
+    ref: i,
+    style: { display: "none" },
+    "data-signal-id": d
+  });
 }
-function At(t) {
-  const i = _.useSyncExternalStore(
-    (S) => {
-      const u = n.getState().stateComponents.get(t._stateKey) || {
+function Dt(t) {
+  const i = w.useSyncExternalStore(
+    (d) => {
+      const u = a.getState().stateComponents.get(t._stateKey) || {
         components: /* @__PURE__ */ new Map()
       };
       return u.components.set(t._stateKey, {
-        forceUpdate: S,
+        forceUpdate: d,
         paths: /* @__PURE__ */ new Set([t._path.join(".")])
       }), () => u.components.delete(t._stateKey);
     },
-    () => n.getState().getNestedState(t._stateKey, t._path)
+    () => a.getState().getNestedState(t._stateKey, t._path)
   );
-  return _.createElement("text", {}, String(i));
+  return w.createElement("text", {}, String(i));
 }
 export {
-  et as $cogsSignal,
-  At as $cogsSignalStore,
-  Ot as addStateOptions,
-  ht as createCogsState,
-  Et as useCogsStateFn
+  rt as $cogsSignal,
+  Dt as $cogsSignalStore,
+  Mt as addStateOptions,
+  Ot as createCogsState,
+  wt as useCogsStateFn
 };
 //# sourceMappingURL=CogsState.jsx.map