cogsbox-state 0.5.471 → 0.5.472

package/dist/CogsState.jsx

@@ -1,112 +1,117 @@
 "use client";
-import { jsx as ne, Fragment as Ve } from "react/jsx-runtime";
-import { useState as te, useRef as x, useEffect as B, useCallback as we, useLayoutEffect as ie, useMemo as pe, createElement as be, startTransition as Pe } from "react";
-import { transformStateFunc as Ce, isFunction as z, isDeepEqual as oe, isArray as De, getDifferences as Ue } from "./utility.js";
-import { ValidationWrapper as je, IsolatedComponentWrapper as Fe, FormElementWrapper as Ne, MemoizedCogsItemWrapper as Oe } from "./Components.jsx";
-import Re from "superjson";
+import { jsx as ne, Fragment as Pe } from "react/jsx-runtime";
+import { useState as te, useRef as R, useEffect as q, useCallback as we, useLayoutEffect as ce, useMemo as pe, createElement as Ae, startTransition as Ce } from "react";
+import { transformStateFunc as De, isFunction as z, isDeepEqual as oe } from "./utility.js";
+import { ValidationWrapper as Oe, IsolatedComponentWrapper as Ue, FormElementWrapper as Fe, MemoizedCogsItemWrapper as je } from "./Components.jsx";
+import Ne from "superjson";
 import { v4 as ee } from "uuid";
-import { getGlobalStore as b, formRefStore as Ae } from "./store.js";
-import { useCogsConfig as Ie } from "./CogsStateClient.jsx";
+import { getGlobalStore as T, formRefStore as Me } from "./store.js";
+import { useCogsConfig as _e } from "./CogsStateClient.jsx";
 const {
   getInitialOptions: W,
-  updateInitialStateGlobal: _e,
-  getShadowMetadata: k,
+  updateInitialStateGlobal: ke,
+  getShadowMetadata: V,
   setShadowMetadata: J,
-  getShadowValue: R,
+  getShadowValue: N,
   initializeShadowState: se,
-  updateShadowAtPath: xe,
-  insertShadowArrayElement: Le,
-  insertManyShadowArrayElements: qe,
+  updateShadowAtPath: Re,
+  insertShadowArrayElement: xe,
+  insertManyShadowArrayElements: Le,
   removeShadowArrayElement: Be,
-  setInitialStateOptions: ce,
-  setServerStateUpdate: We,
-  markAsDirty: le,
-  addPathComponent: Ge,
-  clearSelectedIndexesForState: He,
-  addStateLog: ze,
-  setSyncInfo: Je,
-  clearSelectedIndex: Ye,
-  getSyncInfo: Ze,
-  notifyPathSubscribers: Qe
+  setInitialStateOptions: le,
+  setServerStateUpdate: Ee,
+  markAsDirty: Ie,
+  addPathComponent: qe,
+  clearSelectedIndexesForState: We,
+  addStateLog: Ge,
+  setSyncInfo: He,
+  clearSelectedIndex: ze,
+  getSyncInfo: Je,
+  notifyPathSubscribers: Ye
   // Note: The old functions are no longer imported under their original names
-} = b.getState();
-function q(e, r, l) {
-  const o = k(e, r);
-  if (!!!o?.arrayKeys)
-    return { isArray: !1, value: b.getState().getShadowValue(e, r), keys: [] };
-  const n = r.length > 0 ? r.join(".") : "root", d = l?.arrayViews?.[n] ?? o.arrayKeys;
-  return Array.isArray(d) && d.length === 0 ? { isArray: !0, value: [], keys: [] } : { isArray: !0, value: b.getState().getShadowValue(e, r, d), keys: d ?? [] };
+} = T.getState();
+function B(e, r, d) {
+  const s = V(e, r);
+  if (!!!s?.arrayKeys)
+    return { isArray: !1, value: T.getState().getShadowValue(e, r), keys: [] };
+  const i = r.length > 0 ? r.join(".") : "root", S = d?.arrayViews?.[i] ?? s.arrayKeys;
+  return Array.isArray(S) && S.length === 0 ? { isArray: !0, value: [], keys: [] } : { isArray: !0, value: T.getState().getShadowValue(e, r, S), keys: S ?? [] };
 }
-function he(e, r, l) {
-  for (let o = 0; o < e.length; o++)
-    if (l(e[o], o)) {
-      const f = r[o];
+function me(e, r, d) {
+  for (let s = 0; s < e.length; s++)
+    if (d(e[s], s)) {
+      const f = r[s];
       if (f)
-        return { key: f, index: o, value: e[o] };
+        return { key: f, index: s, value: e[s] };
     }
   return null;
 }
-function ve(e, r) {
-  const l = W(e) || {};
-  ce(e, {
-    ...l,
+function he(e, r) {
+  const d = W(e) || {};
+  le(e, {
+    ...d,
     ...r
   });
 }
-function Ee({
+function $e({
   stateKey: e,
   options: r,
-  initialOptionsPart: l
+  initialOptionsPart: d
 }) {
-  const o = W(e) || {}, n = { ...l[e] || {}, ...o };
-  let d = !1;
-  if (r)
-    for (const c in r)
-      n.hasOwnProperty(c) ? (c == "localStorage" && r[c] && n[c].key !== r[c]?.key && (d = !0, n[c] = r[c]), c == "defaultState" && r[c] && n[c] !== r[c] && !oe(n[c], r[c]) && (d = !0, n[c] = r[c])) : (d = !0, n[c] = r[c]);
-  n.syncOptions && (!r || !r.hasOwnProperty("syncOptions")) && (d = !0), d && ce(e, n);
+  const s = W(e) || {};
+  let i = { ...d[e] || {}, ...s }, S = !1;
+  if (r) {
+    const l = (t, n) => {
+      for (const u in n)
+        n.hasOwnProperty(u) && (n[u] instanceof Object && !Array.isArray(n[u]) && t[u] instanceof Object ? oe(t[u], n[u]) || (l(t[u], n[u]), S = !0) : t[u] !== n[u] && (t[u] = n[u], S = !0));
+      return t;
+    };
+    i = l(i, r);
+  }
+  i.syncOptions && (!r || !r.hasOwnProperty("syncOptions")) && (S = !0), (i.validation && i?.validation?.zodSchemaV4 || i?.validation?.zodSchemaV3) && (r?.validation?.hasOwnProperty("onBlur") || s?.validation?.hasOwnProperty("onBlur") || (i.validation.onBlur = "error")), S && le(e, i);
 }
-function Tt(e, { formElements: r, validation: l }) {
-  return { initialState: e, formElements: r, validation: l };
+function wt(e, { formElements: r, validation: d }) {
+  return { initialState: e, formElements: r, validation: d };
 }
-const Xe = (e, r) => {
-  let l = e;
-  const [o, f] = Ce(l);
-  r?.__fromSyncSchema && r?.__syncNotifications && b.getState().setInitialStateOptions("__notifications", r.__syncNotifications), r?.__fromSyncSchema && r?.__apiParamsMap && b.getState().setInitialStateOptions("__apiParamsMap", r.__apiParamsMap), Object.keys(o).forEach((c) => {
-    let t = f[c] || {};
-    const i = {
+const Ze = (e, r) => {
+  let d = e;
+  const [s, f] = De(d);
+  r?.__fromSyncSchema && r?.__syncNotifications && T.getState().setInitialStateOptions("__notifications", r.__syncNotifications), r?.__fromSyncSchema && r?.__apiParamsMap && T.getState().setInitialStateOptions("__apiParamsMap", r.__apiParamsMap), Object.keys(s).forEach((l) => {
+    let t = f[l] || {};
+    const n = {
       ...t
     };
-    if (r?.formElements && (i.formElements = {
+    if (r?.formElements && (n.formElements = {
       ...r.formElements,
       ...t.formElements || {}
-    }), r?.validation && (i.validation = {
+    }), r?.validation && (n.validation = {
       ...r.validation,
       ...t.validation || {}
-    }, r.validation.key && !t.validation?.key && (i.validation.key = `${r.validation.key}.${c}`)), r?.__syncSchemas?.[c]?.schemas?.validation && (i.validation = {
-      zodSchemaV4: r.__syncSchemas[c].schemas.validation,
+    }, r.validation.key && !t.validation?.key && (n.validation.key = `${r.validation.key}.${l}`)), r?.__syncSchemas?.[l]?.schemas?.validation && (n.validation = {
+      zodSchemaV4: r.__syncSchemas[l].schemas.validation,
       ...t.validation
-    }), Object.keys(i).length > 0) {
-      const m = W(c);
-      m ? ce(c, {
-        ...m,
-        ...i
-      }) : ce(c, i);
+    }), Object.keys(n).length > 0) {
+      const u = W(l);
+      u ? le(l, {
+        ...u,
+        ...n
+      }) : le(l, n);
     }
-  }), Object.keys(o).forEach((c) => {
-    se(c, o[c]);
+  }), Object.keys(s).forEach((l) => {
+    se(l, s[l]);
   });
-  const n = (c, t) => {
-    const [i] = te(t?.componentId ?? ee());
-    Ee({
-      stateKey: c,
+  const i = (l, t) => {
+    const [n] = te(t?.componentId ?? ee());
+    $e({
+      stateKey: l,
       options: t,
       initialOptionsPart: f
     });
-    const m = R(c, []) || o[c], C = t?.modifyState ? t.modifyState(m) : m;
-    return lt(C, {
-      stateKey: c,
+    const u = N(l, []) || s[l], C = t?.modifyState ? t.modifyState(u) : u;
+    return it(C, {
+      stateKey: l,
       syncUpdate: t?.syncUpdate,
-      componentId: i,
+      componentId: n,
       localStorage: t?.localStorage,
       middleware: t?.middleware,
       reactiveType: t?.reactiveType,
@@ -118,53 +123,53 @@ const Xe = (e, r) => {
       __useSync: r?.__useSync
     });
   };
-  function d(c, t) {
-    Ee({ stateKey: c, options: t, initialOptionsPart: f }), t.localStorage && et(c, t), Se(c);
+  function S(l, t) {
+    $e({ stateKey: l, options: t, initialOptionsPart: f }), t.localStorage && Xe(l, t), ie(l);
   }
-  return { useCogsState: n, setCogsOptions: d };
+  return { useCogsState: i, setCogsOptions: S };
 };
-function bt(e, r) {
-  const l = e.schemas, o = {}, f = {};
-  for (const n in l) {
-    const d = l[n];
-    o[n] = d?.schemas?.defaultValues || {}, d?.api?.queryData?._paramType && (f[n] = d.api.queryData._paramType);
+function pt(e, r) {
+  const d = e.schemas, s = {}, f = {};
+  for (const i in d) {
+    const S = d[i];
+    S?.relations && S?.schemas?.defaults ? s[i] = S.schemas.defaults : s[i] = S?.schemas?.defaults || {}, console.log("initialState", s), S?.api?.queryData?._paramType && (f[i] = S.api.queryData._paramType);
   }
-  return Xe(o, {
+  return Ze(s, {
     __fromSyncSchema: !0,
     __syncNotifications: e.notifications,
     __apiParamsMap: f,
     __useSync: r,
-    __syncSchemas: l
+    __syncSchemas: d
   });
 }
-const Ke = (e, r, l, o, f) => {
-  l?.log && console.log(
+const Qe = (e, r, d, s, f) => {
+  d?.log && console.log(
     "saving to localstorage",
     r,
-    l.localStorage?.key,
-    o
+    d.localStorage?.key,
+    s
   );
-  const n = z(l?.localStorage?.key) ? l.localStorage?.key(e) : l?.localStorage?.key;
-  if (n && o) {
-    const d = `${o}-${r}-${n}`;
-    let c;
+  const i = z(d?.localStorage?.key) ? d.localStorage?.key(e) : d?.localStorage?.key;
+  if (i && s) {
+    const S = `${s}-${r}-${i}`;
+    let l;
     try {
-      c = de(d)?.lastSyncedWithServer;
+      l = fe(S)?.lastSyncedWithServer;
     } catch {
     }
-    const t = k(r, []), i = {
+    const t = V(r, []), n = {
       state: e,
       lastUpdated: Date.now(),
-      lastSyncedWithServer: c,
+      lastSyncedWithServer: l,
       stateSource: t?.stateSource,
       baseServerState: t?.baseServerState
-    }, m = Re.serialize(i);
+    }, u = Ne.serialize(n);
     window.localStorage.setItem(
-      d,
-      JSON.stringify(m.json)
+      S,
+      JSON.stringify(u.json)
     );
   }
-}, de = (e) => {
+}, fe = (e) => {
   if (!e) return null;
   try {
     const r = window.localStorage.getItem(e);
@@ -172,243 +177,235 @@ const Ke = (e, r, l, o, f) => {
   } catch (r) {
     return console.error("Error loading from localStorage:", r), null;
   }
-}, et = (e, r) => {
-  const l = R(e, []), { sessionId: o } = Ie(), f = z(r?.localStorage?.key) ? r.localStorage.key(l) : r?.localStorage?.key;
-  if (f && o) {
-    const n = de(
-      `${o}-${e}-${f}`
+}, Xe = (e, r) => {
+  const d = N(e, []), { sessionId: s } = _e(), f = z(r?.localStorage?.key) ? r.localStorage.key(d) : r?.localStorage?.key;
+  if (f && s) {
+    const i = fe(
+      `${s}-${e}-${f}`
     );
-    if (n && n.lastUpdated > (n.lastSyncedWithServer || 0))
-      return Se(e), !0;
+    if (i && i.lastUpdated > (i.lastSyncedWithServer || 0))
+      return ie(e), !0;
   }
   return !1;
-}, Se = (e) => {
-  const r = k(e, []);
+}, ie = (e) => {
+  const r = V(e, []);
   if (!r) return;
-  const l = /* @__PURE__ */ new Set();
-  r?.components?.forEach((o) => {
-    (o ? Array.isArray(o.reactiveType) ? o.reactiveType : [o.reactiveType || "component"] : null)?.includes("none") || l.add(() => o.forceUpdate());
+  const d = /* @__PURE__ */ new Set();
+  r?.components?.forEach((s) => {
+    (s ? Array.isArray(s.reactiveType) ? s.reactiveType : [s.reactiveType || "component"] : null)?.includes("none") || d.add(() => s.forceUpdate());
   }), queueMicrotask(() => {
-    l.forEach((o) => o());
+    d.forEach((s) => s());
   });
 };
-function ue(e, r, l, o) {
-  const f = k(e, r);
+function ue(e, r, d, s) {
+  const f = V(e, r);
   if (J(e, r, {
     ...f,
     isDirty: !1,
     stateSource: "server",
-    lastServerSync: o || Date.now()
-  }), Array.isArray(l)) {
-    const n = k(e, r);
-    n?.arrayKeys && n.arrayKeys.forEach((d, c) => {
-      const t = [...r, d], i = l[c];
-      i !== void 0 && ue(
+    lastServerSync: s || Date.now()
+  }), Array.isArray(d)) {
+    const i = V(e, r);
+    i?.arrayKeys && i.arrayKeys.forEach((S, l) => {
+      const t = [...r, S], n = d[l];
+      n !== void 0 && ue(
         e,
         t,
-        i,
-        o
+        n,
+        s
       );
     });
-  } else l && typeof l == "object" && l.constructor === Object && Object.keys(l).forEach((n) => {
-    const d = [...r, n], c = l[n];
-    ue(e, d, c, o);
+  } else d && typeof d == "object" && d.constructor === Object && Object.keys(d).forEach((i) => {
+    const S = [...r, i], l = d[i];
+    ue(e, S, l, s);
   });
 }
-let fe = [], Te = !1;
-function tt() {
-  Te || (Te = !0, queueMicrotask(it));
+let de = [], Te = !1;
+function Ke() {
+  Te || (Te = !0, queueMicrotask(ot));
 }
-function rt(e, r, l) {
-  const o = b.getState().getShadowValue(e, r), f = z(l) ? l(o) : l;
-  xe(e, r, f), le(e, r, { bubble: !0 });
-  const n = k(e, r);
+function et(e, r, d) {
+  const s = T.getState().getShadowValue(e, r), f = z(d) ? d(s) : d;
+  Re(e, r, f), Ie(e, r, { bubble: !0 });
+  const i = V(e, r);
   return {
     type: "update",
-    oldValue: o,
+    oldValue: s,
     newValue: f,
-    shadowMeta: n
+    shadowMeta: i
   };
 }
-function nt(e, r) {
-  e?.signals?.length && e.signals.forEach(({ parentId: l, position: o, effect: f }) => {
-    const n = document.querySelector(`[data-parent-id="${l}"]`);
-    if (!n) return;
-    const d = Array.from(n.childNodes);
-    if (!d[o]) return;
-    let c = r;
+function tt(e, r) {
+  e?.signals?.length && e.signals.forEach(({ parentId: d, position: s, effect: f }) => {
+    const i = document.querySelector(`[data-parent-id="${d}"]`);
+    if (!i) return;
+    const S = Array.from(i.childNodes);
+    if (!S[s]) return;
+    let l = r;
     if (f && r !== null)
       try {
-        c = new Function("state", `return (${f})(state)`)(
+        l = new Function("state", `return (${f})(state)`)(
           r
         );
       } catch (t) {
         console.error("Error evaluating effect function:", t);
       }
-    c !== null && typeof c == "object" && (c = JSON.stringify(c)), d[o].textContent = String(c ?? "");
+    l !== null && typeof l == "object" && (l = JSON.stringify(l)), S[s].textContent = String(l ?? "");
   });
 }
-function at(e, r, l) {
-  const o = k(e, []);
-  if (!o?.components)
+function rt(e, r, d) {
+  const s = V(e, []);
+  if (!s?.components)
     return /* @__PURE__ */ new Set();
   const f = /* @__PURE__ */ new Set();
-  if (l.type === "update") {
-    let n = [...r];
-    for (; ; ) {
-      const d = k(e, n);
-      if (d?.pathComponents && d.pathComponents.forEach((c) => {
-        const t = o.components?.get(c);
-        t && ((Array.isArray(t.reactiveType) ? t.reactiveType : [t.reactiveType || "component"]).includes("none") || f.add(t));
-      }), n.length === 0) break;
-      n.pop();
-    }
-    l.newValue && typeof l.newValue == "object" && !De(l.newValue) && Ue(l.newValue, l.oldValue).forEach((c) => {
-      const t = c.split("."), i = [...r, ...t], m = k(e, i);
-      m?.pathComponents && m.pathComponents.forEach((C) => {
-        const U = o.components?.get(C);
-        U && ((Array.isArray(U.reactiveType) ? U.reactiveType : [U.reactiveType || "component"]).includes("none") || f.add(U));
-      });
-    });
-  } else if (l.type === "insert" || l.type === "cut") {
-    const n = l.type === "insert" ? r : r.slice(0, -1), d = k(e, n);
-    d?.pathComponents && d.pathComponents.forEach((c) => {
-      const t = o.components?.get(c);
-      t && f.add(t);
-    });
+  let i = r;
+  d.type === "insert" && d.itemId && (i = r);
+  let S = [...i];
+  for (; ; ) {
+    const l = V(e, S);
+    if (l?.pathComponents && l.pathComponents.forEach((t) => {
+      const n = s.components?.get(t);
+      n && ((Array.isArray(n.reactiveType) ? n.reactiveType : [n.reactiveType || "component"]).includes("none") || f.add(n));
+    }), S.length === 0) break;
+    S.pop();
   }
-  return o.components.forEach((n, d) => {
-    if (f.has(n))
+  return s.components.forEach((l, t) => {
+    if (f.has(l))
       return;
-    const c = Array.isArray(n.reactiveType) ? n.reactiveType : [n.reactiveType || "component"];
-    if (c.includes("all"))
-      f.add(n);
-    else if (c.includes("deps") && n.depsFunction) {
-      const t = R(e, []), i = n.depsFunction(t);
-      (i === !0 || Array.isArray(i) && !oe(n.prevDeps, i)) && (n.prevDeps = i, f.add(n));
+    const n = Array.isArray(l.reactiveType) ? l.reactiveType : [l.reactiveType || "component"];
+    if (n.includes("all"))
+      f.add(l);
+    else if (n.includes("deps") && l.depsFunction) {
+      const u = N(e, []), C = l.depsFunction(u);
+      (C === !0 || Array.isArray(C) && !oe(l.prevDeps, C)) && (l.prevDeps = C, f.add(l));
     }
   }), f;
 }
-function ot(e, r, l) {
-  let o;
-  if (z(l)) {
-    const { value: n } = K(e, r);
-    o = l({ state: n, uuid: ee() });
+function nt(e, r, d, s) {
+  let f;
+  if (z(d)) {
+    const { value: t } = K(e, r);
+    f = d({ state: t, uuid: ee() });
   } else
-    o = l;
-  Le(e, r, o), le(e, r, { bubble: !0 });
-  const f = k(e, r);
-  if (f?.arrayKeys) {
-    const n = f.arrayKeys[f.arrayKeys.length - 1];
-    if (n) {
-      const d = n.split(".").slice(1);
-      le(e, d, { bubble: !1 });
-    }
-  }
-  return { type: "insert", newValue: o, shadowMeta: f };
+    f = d;
+  const i = xe(e, r, f, s);
+  Ie(e, r, { bubble: !0 });
+  const S = V(e, r);
+  let l;
+  return S?.arrayKeys, {
+    type: "insert",
+    newValue: f,
+    shadowMeta: S,
+    path: r,
+    // Just the array path now
+    itemId: i,
+    insertAfterId: l
+  };
 }
-function st(e, r) {
-  const l = r.slice(0, -1), o = R(e, r);
-  return Be(e, r), le(e, l, { bubble: !0 }), { type: "cut", oldValue: o, parentPath: l };
+function at(e, r) {
+  const d = r.slice(0, -1), s = N(e, r);
+  return Be(e, r), Ie(e, d, { bubble: !0 }), { type: "cut", oldValue: s, parentPath: d };
 }
-function it() {
-  const e = /* @__PURE__ */ new Set(), r = [], l = [];
-  for (const o of fe) {
-    if (o.status && o.updateType) {
-      l.push(o);
+function ot() {
+  const e = /* @__PURE__ */ new Set(), r = [], d = [];
+  for (const s of de) {
+    if (s.status && s.updateType) {
+      d.push(s);
       continue;
     }
-    const f = o, n = f.type === "cut" ? null : f.newValue;
-    f.shadowMeta?.signals?.length > 0 && r.push({ shadowMeta: f.shadowMeta, displayValue: n }), at(
+    const f = s, i = f.type === "cut" ? null : f.newValue;
+    f.shadowMeta?.signals?.length > 0 && r.push({ shadowMeta: f.shadowMeta, displayValue: i }), rt(
       f.stateKey,
       f.path,
       f
-    ).forEach((c) => {
-      e.add(c);
+    ).forEach((l) => {
+      e.add(l);
     });
   }
-  l.length > 0 && ze(l), r.forEach(({ shadowMeta: o, displayValue: f }) => {
-    nt(o, f);
-  }), e.forEach((o) => {
-    o.forceUpdate();
-  }), fe = [], Te = !1;
+  d.length > 0 && Ge(d), r.forEach(({ shadowMeta: s, displayValue: f }) => {
+    tt(s, f);
+  }), e.forEach((s) => {
+    s.forceUpdate();
+  }), de = [], Te = !1;
 }
-function ct(e, r, l, o) {
-  return (n, d, c, t) => {
-    f(e, d, n, c);
+function st(e, r, d, s) {
+  return (i, S, l, t) => {
+    f(e, S, i, l);
   };
-  function f(n, d, c, t) {
-    let i;
+  function f(i, S, l, t) {
+    let n;
     switch (t.updateType) {
       case "update":
-        i = rt(n, d, c);
+        n = et(i, S, l);
         break;
       case "insert":
-        i = ot(n, d, c);
+        n = nt(i, S, l);
         break;
       case "cut":
-        i = st(n, d);
+        n = at(i, S);
         break;
     }
-    i.stateKey = n, i.path = d, fe.push(i), tt();
-    const m = {
+    n.stateKey = i, n.path = S, de.push(n), Ke();
+    const u = {
       timeStamp: Date.now(),
-      stateKey: n,
-      path: d,
+      stateKey: i,
+      path: S,
       updateType: t.updateType,
       status: "new",
-      oldValue: i.oldValue,
-      newValue: i.newValue ?? null
+      oldValue: n.oldValue,
+      newValue: n.newValue ?? null,
+      itemId: n.itemId,
+      insertAfterId: n.insertAfterId
     };
-    fe.push(m), i.newValue !== void 0 && Ke(
-      i.newValue,
-      n,
-      o.current,
-      l
-    ), o.current?.middleware && o.current.middleware({ update: m }), t.sync !== !1 && r.current?.connected && r.current.updateState({ operation: m });
+    de.push(u), n.newValue !== void 0 && Qe(
+      n.newValue,
+      i,
+      s.current,
+      d
+    ), s.current?.middleware && s.current.middleware({ update: u }), t.sync !== !1 && r.current?.connected && r.current.updateState({ operation: u });
   }
 }
-function lt(e, {
+function it(e, {
   stateKey: r,
-  localStorage: l,
-  formElements: o,
+  localStorage: d,
+  formElements: s,
   reactiveDeps: f,
-  reactiveType: n,
-  componentId: d,
-  defaultState: c,
+  reactiveType: i,
+  componentId: S,
+  defaultState: l,
   syncUpdate: t,
-  dependencies: i,
-  serverState: m,
+  dependencies: n,
+  serverState: u,
   __useSync: C
 } = {}) {
-  const [U, j] = te({}), { sessionId: F } = Ie();
+  const [x, O] = te({}), { sessionId: U } = _e();
   let G = !r;
-  const [p] = te(r ?? ee()), y = x(d ?? ee()), Y = x(
+  const [w] = te(r ?? ee()), m = R(S ?? ee()), Y = R(
     null
   );
-  Y.current = W(p) ?? null, B(() => {
-    if (t && t.stateKey === p && t.path?.[0]) {
-      const S = `${t.stateKey}:${t.path.join(".")}`;
-      Je(S, {
+  Y.current = W(w) ?? null, q(() => {
+    if (t && t.stateKey === w && t.path?.[0]) {
+      const g = `${t.stateKey}:${t.path.join(".")}`;
+      He(g, {
         timeStamp: t.timeStamp,
         userId: t.userId
       });
     }
   }, [t]);
-  const s = we(
-    (S) => {
-      const w = S ? { ...W(p), ...S } : W(p), A = w?.defaultState || c || e;
-      if (w?.serverState?.status === "success" && w?.serverState?.data !== void 0)
+  const a = we(
+    (g) => {
+      const p = g ? { ...W(w), ...g } : W(w), I = p?.defaultState || l || e;
+      if (p?.serverState?.status === "success" && p?.serverState?.data !== void 0)
         return {
-          value: w.serverState.data,
+          value: p.serverState.data,
           source: "server",
-          timestamp: w.serverState.timestamp || Date.now()
+          timestamp: p.serverState.timestamp || Date.now()
         };
-      if (w?.localStorage?.key && F) {
-        const M = z(w.localStorage.key) ? w.localStorage.key(A) : w.localStorage.key, _ = de(
-          `${F}-${p}-${M}`
+      if (p?.localStorage?.key && U) {
+        const b = z(p.localStorage.key) ? p.localStorage.key(I) : p.localStorage.key, _ = fe(
+          `${U}-${w}-${b}`
         );
-        if (_ && _.lastUpdated > (w?.serverState?.timestamp || 0))
+        if (_ && _.lastUpdated > (p?.serverState?.timestamp || 0))
           return {
             value: _.state,
             source: "localStorage",
@@ -416,25 +413,24 @@ function lt(e, {
           };
       }
       return {
-        value: A || e,
+        value: I || e,
         source: "default",
         timestamp: Date.now()
       };
     },
-    [p, c, e, F]
+    [w, l, e, U]
   );
-  B(() => {
-    We(p, m);
-  }, [m, p]), B(() => b.getState().subscribeToPath(p, (T) => {
-    if (T?.type === "SERVER_STATE_UPDATE") {
-      const w = T.serverState;
-      if (w?.status !== "success" || w.data === void 0)
+  q(() => {
+    u && u.status === "success" && u.data !== void 0 && Ee(w, u);
+  }, [u, w]), q(() => T.getState().subscribeToPath(w, (A) => {
+    if (A?.type === "SERVER_STATE_UPDATE") {
+      const p = A.serverState;
+      if (p?.status !== "success" || p.data === void 0)
         return;
-      ve(p, { serverState: w });
-      const A = typeof w.merge == "object" ? w.merge : w.merge === !0 ? { strategy: "append" } : null, I = R(p, []), M = w.data;
-      if (A && A.strategy === "append" && "key" in A && // Type guard for key
-      Array.isArray(I) && Array.isArray(M)) {
-        const _ = A.key;
+      he(w, { serverState: p });
+      const I = typeof p.merge == "object" ? p.merge : p.merge === !0 ? { strategy: "append", key: "id" } : null, M = N(w, []), b = p.data;
+      if (I && I.strategy === "append" && "key" in I && Array.isArray(M) && Array.isArray(b)) {
+        const _ = I.key;
         if (!_) {
           console.error(
             "CogsState: Merge strategy 'append' requires a 'key' field."
@@ -442,321 +438,322 @@ function lt(e, {
           return;
         }
         const E = new Set(
-          I.map((Z) => Z[_])
-        ), $ = M.filter(
+          M.map((Z) => Z[_])
+        ), $ = b.filter(
           (Z) => !E.has(Z[_])
         );
-        $.length > 0 && qe(p, [], $);
-        const N = R(p, []);
+        $.length > 0 && Le(w, [], $);
+        const F = N(w, []);
         ue(
-          p,
+          w,
           [],
-          N,
-          w.timestamp
+          F,
+          p.timestamp || Date.now()
         );
       } else
-        se(p, M), ue(
-          p,
+        se(w, b), ue(
+          w,
           [],
-          M,
-          w.timestamp
+          b,
+          p.timestamp || Date.now()
         );
+      ie(w);
     }
-  }), [p, s]), B(() => {
-    const S = b.getState().getShadowMetadata(p, []);
-    if (S && S.stateSource)
+  }), [w]), q(() => {
+    const g = T.getState().getShadowMetadata(w, []);
+    if (g && g.stateSource)
       return;
-    const T = W(p), w = {
-      syncEnabled: !!g && !!v,
-      validationEnabled: !!(T?.validation?.zodSchemaV4 || T?.validation?.zodSchemaV3),
-      localStorageEnabled: !!T?.localStorage?.key
+    const A = W(w), p = {
+      syncEnabled: !!y && !!v,
+      validationEnabled: !!(A?.validation?.zodSchemaV4 || A?.validation?.zodSchemaV3),
+      localStorageEnabled: !!A?.localStorage?.key
     };
-    if (J(p, [], {
-      ...S,
-      features: w
-    }), T?.defaultState !== void 0 || c !== void 0) {
-      const A = T?.defaultState || c;
-      T?.defaultState || ve(p, {
-        defaultState: A
+    if (J(w, [], {
+      ...g,
+      features: p
+    }), A?.defaultState !== void 0 || l !== void 0) {
+      const _ = A?.defaultState || l;
+      A?.defaultState || he(w, {
+        defaultState: _
       });
-      const { value: I, source: M, timestamp: _ } = s();
-      se(p, I), J(p, [], {
-        stateSource: M,
-        lastServerSync: M === "server" ? _ : void 0,
-        isDirty: !1,
-        baseServerState: M === "server" ? I : void 0
-      }), Se(p);
     }
-  }, [p, ...i || []]), ie(() => {
-    G && ve(p, {
-      formElements: o,
-      defaultState: c,
-      localStorage: l,
+    const { value: I, source: M, timestamp: b } = a();
+    se(w, I), J(w, [], {
+      stateSource: M,
+      lastServerSync: M === "server" ? b : void 0,
+      isDirty: M === "server" ? !1 : void 0,
+      baseServerState: M === "server" ? I : void 0
+    }), M === "server" && u && Ee(w, u), ie(w);
+  }, [w, ...n || []]), ce(() => {
+    G && he(w, {
+      formElements: s,
+      defaultState: l,
+      localStorage: d,
       middleware: Y.current?.middleware
     });
-    const S = `${p}////${y.current}`, T = k(p, []), w = T?.components || /* @__PURE__ */ new Map();
-    return w.set(S, {
-      forceUpdate: () => j({}),
-      reactiveType: n ?? ["component"],
+    const g = `${w}////${m.current}`, A = V(w, []), p = A?.components || /* @__PURE__ */ new Map();
+    return p.set(g, {
+      forceUpdate: () => O({}),
+      reactiveType: i ?? ["component"],
       paths: /* @__PURE__ */ new Set(),
       depsFunction: f || void 0,
-      deps: f ? f(R(p, [])) : [],
-      prevDeps: f ? f(R(p, [])) : []
-    }), J(p, [], {
-      ...T,
-      components: w
-    }), j({}), () => {
-      const A = k(p, []), I = A?.components?.get(S);
-      I?.paths && I.paths.forEach((M) => {
-        const E = M.split(".").slice(1), $ = b.getState().getShadowMetadata(p, E);
-        $?.pathComponents && $.pathComponents.size === 0 && (delete $.pathComponents, b.getState().setShadowMetadata(p, E, $));
-      }), A?.components && J(p, [], A);
+      deps: f ? f(N(w, [])) : [],
+      prevDeps: f ? f(N(w, [])) : []
+    }), J(w, [], {
+      ...A,
+      components: p
+    }), O({}), () => {
+      const I = V(w, []), M = I?.components?.get(g);
+      M?.paths && M.paths.forEach((b) => {
+        const E = b.split(".").slice(1), $ = T.getState().getShadowMetadata(w, E);
+        $?.pathComponents && $.pathComponents.size === 0 && (delete $.pathComponents, T.getState().setShadowMetadata(w, E, $));
+      }), I?.components && J(w, [], I);
     };
   }, []);
-  const a = x(null), u = ct(
-    p,
-    a,
-    F,
+  const o = R(null), c = st(
+    w,
+    o,
+    U,
     Y
   );
-  b.getState().initialStateGlobal[p] || _e(p, e);
-  const h = pe(() => ke(
-    p,
-    u,
-    y.current,
-    F
-  ), [p, F]), g = C, v = Y.current?.syncOptions;
-  return g && (a.current = g(
+  T.getState().initialStateGlobal[w] || ke(w, e);
+  const h = pe(() => Ve(
+    w,
+    c,
+    m.current,
+    U
+  ), [w, U]), y = C, v = Y.current?.syncOptions;
+  return console.log("syncOpt", v), y && (o.current = y(
     h,
     v ?? {}
   )), h;
 }
-const ut = (e, r, l) => {
-  let o = k(e, r)?.arrayKeys || [];
-  const f = l?.transforms;
+const ct = (e, r, d) => {
+  let s = V(e, r)?.arrayKeys || [];
+  const f = d?.transforms;
   if (!f || f.length === 0)
-    return o;
-  for (const n of f)
-    if (n.type === "filter") {
-      const d = [];
-      o.forEach((c, t) => {
-        const i = R(e, [...r, c]);
-        n.fn(i, t) && d.push(c);
-      }), o = d;
-    } else n.type === "sort" && o.sort((d, c) => {
-      const t = R(e, [...r, d]), i = R(e, [...r, c]);
-      return n.fn(t, i);
+    return s;
+  for (const i of f)
+    if (i.type === "filter") {
+      const S = [];
+      s.forEach((l, t) => {
+        const n = N(e, [...r, l]);
+        i.fn(n, t) && S.push(l);
+      }), s = S;
+    } else i.type === "sort" && s.sort((S, l) => {
+      const t = N(e, [...r, S]), n = N(e, [...r, l]);
+      return i.fn(t, n);
     });
-  return o;
-}, Me = (e, r, l) => {
-  const o = `${e}////${r}`, n = k(e, [])?.components?.get(o);
-  !n || n.reactiveType === "none" || !(Array.isArray(n.reactiveType) ? n.reactiveType : [n.reactiveType]).includes("component") || Ge(e, l, o);
-}, ae = (e, r, l) => {
-  const o = k(e, []), f = /* @__PURE__ */ new Set();
-  o?.components && o.components.forEach((d, c) => {
-    (Array.isArray(d.reactiveType) ? d.reactiveType : [d.reactiveType || "component"]).includes("all") && (d.forceUpdate(), f.add(c));
-  }), k(e, [
+  return s;
+}, ve = (e, r, d) => {
+  const s = `${e}////${r}`, i = V(e, [])?.components?.get(s);
+  !i || i.reactiveType === "none" || !(Array.isArray(i.reactiveType) ? i.reactiveType : [i.reactiveType]).includes("component") || qe(e, d, s);
+}, ae = (e, r, d) => {
+  const s = V(e, []), f = /* @__PURE__ */ new Set();
+  s?.components && s.components.forEach((S, l) => {
+    (Array.isArray(S.reactiveType) ? S.reactiveType : [S.reactiveType || "component"]).includes("all") && (S.forceUpdate(), f.add(l));
+  }), V(e, [
     ...r,
     "getSelected"
-  ])?.pathComponents?.forEach((d) => {
-    o?.components?.get(d)?.forceUpdate();
+  ])?.pathComponents?.forEach((S) => {
+    s?.components?.get(S)?.forceUpdate();
   });
-  const n = k(e, r);
-  for (let d of n?.arrayKeys || []) {
-    const c = d + ".selected", t = k(e, c.split(".").slice(1));
-    d == l && t?.pathComponents?.forEach((i) => {
-      o?.components?.get(i)?.forceUpdate();
+  const i = V(e, r);
+  for (let S of i?.arrayKeys || []) {
+    const l = S + ".selected", t = V(e, l.split(".").slice(1));
+    S == d && t?.pathComponents?.forEach((n) => {
+      s?.components?.get(n)?.forceUpdate();
     });
   }
 };
-function K(e, r, l) {
-  const o = k(e, r), f = r.length > 0 ? r.join(".") : "root", n = l?.arrayViews?.[f];
-  if (Array.isArray(n) && n.length === 0)
+function K(e, r, d) {
+  const s = V(e, r), f = r.length > 0 ? r.join(".") : "root", i = d?.arrayViews?.[f];
+  if (Array.isArray(i) && i.length === 0)
     return {
-      shadowMeta: o,
+      shadowMeta: s,
       value: [],
-      arrayKeys: o?.arrayKeys
+      arrayKeys: s?.arrayKeys
     };
-  const d = R(e, r, n);
+  const S = N(e, r, i);
   return {
-    shadowMeta: o,
-    value: d,
-    arrayKeys: o?.arrayKeys
+    shadowMeta: s,
+    value: S,
+    arrayKeys: s?.arrayKeys
   };
 }
-function ke(e, r, l, o) {
+function Ve(e, r, d, s) {
   const f = /* @__PURE__ */ new Map();
-  function n({
+  function i({
     path: t = [],
-    meta: i,
-    componentId: m
+    meta: n,
+    componentId: u
   }) {
-    const C = i ? JSON.stringify(i.arrayViews || i.transforms) : "", U = t.join(".") + ":" + m + ":" + C;
-    if (f.has(U))
-      return f.get(U);
-    const j = [e, ...t].join("."), F = {
-      get(p, y) {
-        if (t.length === 0 && y in d)
-          return d[y];
-        if (!y.startsWith("$")) {
-          const s = [...t, y];
-          return n({
-            path: s,
-            componentId: m,
-            meta: i
+    const C = n ? JSON.stringify(n.arrayViews || n.transforms) : "", x = t.join(".") + ":" + u + ":" + C;
+    if (f.has(x))
+      return f.get(x);
+    const O = [e, ...t].join("."), U = {
+      get(w, m) {
+        if (t.length === 0 && m in S)
+          return S[m];
+        if (!m.startsWith("$")) {
+          const a = [...t, m];
+          return i({
+            path: a,
+            componentId: u,
+            meta: n
           });
         }
-        if (y === "$_rebuildStateShape")
-          return n;
-        if (y === "$sync" && t.length === 0)
+        if (m === "$_rebuildStateShape")
+          return i;
+        if (m === "$sync" && t.length === 0)
           return async function() {
-            const s = b.getState().getInitialOptions(e), a = s?.sync;
-            if (!a)
+            const a = T.getState().getInitialOptions(e), o = a?.sync;
+            if (!o)
               return console.error(`No mutation defined for state key "${e}"`), { success: !1, error: "No mutation defined" };
-            const u = b.getState().getShadowValue(e, []), h = s?.validation?.key;
+            const c = T.getState().getShadowValue(e, []), h = a?.validation?.key;
             try {
-              const g = await a.action(u);
-              if (g && !g.success && g.errors, g?.success) {
-                const v = b.getState().getShadowMetadata(e, []);
+              const y = await o.action(c);
+              if (y && !y.success && y.errors, y?.success) {
+                const v = T.getState().getShadowMetadata(e, []);
                 J(e, [], {
                   ...v,
                   isDirty: !1,
                   lastServerSync: Date.now(),
                   stateSource: "server",
-                  baseServerState: u
+                  baseServerState: c
                   // Update base server state
-                }), a.onSuccess && a.onSuccess(g.data);
-              } else !g?.success && a.onError && a.onError(g.error);
-              return g;
-            } catch (g) {
-              return a.onError && a.onError(g), { success: !1, error: g };
+                }), o.onSuccess && o.onSuccess(y.data);
+              } else !y?.success && o.onError && o.onError(y.error);
+              return y;
+            } catch (y) {
+              return o.onError && o.onError(y), { success: !1, error: y };
             }
           };
-        if (y === "$_status" || y === "$getStatus") {
-          const s = () => {
-            const { shadowMeta: a, value: u } = K(e, t, i);
-            return a?.isDirty === !0 ? "dirty" : a?.stateSource === "server" || a?.isDirty === !1 ? "synced" : a?.stateSource === "localStorage" ? "restored" : a?.stateSource === "default" || u !== void 0 && !a ? "fresh" : "unknown";
+        if (m === "$_status" || m === "$getStatus") {
+          const a = () => {
+            const { shadowMeta: o, value: c } = K(e, t, n);
+            return console.log("getStatusFunc", t, o, c), o?.isDirty === !0 ? "dirty" : o?.stateSource === "server" || o?.isDirty === !1 ? "synced" : o?.stateSource === "localStorage" ? "restored" : o?.stateSource === "default" || c !== void 0 ? "fresh" : "unknown";
           };
-          return y === "$_status" ? s() : s;
+          return m === "$_status" ? a() : a;
         }
-        if (y === "$removeStorage")
+        if (m === "$removeStorage")
           return () => {
-            const s = b.getState().initialStateGlobal[e], a = W(e), u = z(a?.localStorage?.key) ? a.localStorage.key(s) : a?.localStorage?.key, h = `${o}-${e}-${u}`;
+            const a = T.getState().initialStateGlobal[e], o = W(e), c = z(o?.localStorage?.key) ? o.localStorage.key(a) : o?.localStorage?.key, h = `${s}-${e}-${c}`;
             h && localStorage.removeItem(h);
           };
-        if (y === "$showValidationErrors")
+        if (m === "$showValidationErrors")
           return () => {
-            const { shadowMeta: s } = K(e, t, i);
-            return s?.validation?.status === "INVALID" && s.validation.errors.length > 0 ? s.validation.errors.filter((a) => a.severity === "error").map((a) => a.message) : [];
+            const { shadowMeta: a } = K(e, t, n);
+            return a?.validation?.status === "INVALID" && a.validation.errors.length > 0 ? a.validation.errors.filter((o) => o.severity === "error").map((o) => o.message) : [];
           };
-        if (y === "$getSelected")
+        if (m === "$getSelected")
           return () => {
-            const s = [e, ...t].join(".");
-            Me(e, m, [
+            const a = [e, ...t].join(".");
+            ve(e, u, [
               ...t,
               "getSelected"
             ]);
-            const a = b.getState().selectedIndicesMap.get(s);
-            if (!a)
+            const o = T.getState().selectedIndicesMap.get(a);
+            if (!o)
               return;
-            const u = t.join("."), h = i?.arrayViews?.[u], g = a.split(".").pop();
-            if (!(h && !h.includes(g) || R(
+            const c = t.join("."), h = n?.arrayViews?.[c], y = o.split(".").pop();
+            if (!(h && !h.includes(y) || N(
               e,
-              a.split(".").slice(1)
+              o.split(".").slice(1)
             ) === void 0))
-              return n({
-                path: a.split(".").slice(1),
-                componentId: m,
-                meta: i
+              return i({
+                path: o.split(".").slice(1),
+                componentId: u,
+                meta: n
               });
           };
-        if (y === "$getSelectedIndex")
+        if (m === "$getSelectedIndex")
           return () => {
-            const s = e + "." + t.join(".");
+            const a = e + "." + t.join(".");
             t.join(".");
-            const a = b.getState().selectedIndicesMap.get(s);
-            if (!a)
+            const o = T.getState().selectedIndicesMap.get(a);
+            if (!o)
               return -1;
-            const { keys: u } = q(e, t, i);
-            if (!u)
+            const { keys: c } = B(e, t, n);
+            if (!c)
               return -1;
-            const h = a.split(".").pop();
-            return u.indexOf(h);
+            const h = o.split(".").pop();
+            return c.indexOf(h);
           };
-        if (y === "$clearSelected")
+        if (m === "$clearSelected")
           return ae(e, t), () => {
-            Ye({
+            ze({
               arrayKey: e + "." + t.join(".")
             });
           };
-        if (y === "$useVirtualView")
-          return (s) => {
+        if (m === "$useVirtualView")
+          return (a) => {
             const {
-              itemHeight: a = 50,
-              overscan: u = 6,
+              itemHeight: o = 50,
+              overscan: c = 6,
               stickToBottom: h = !1,
-              scrollStickTolerance: g = 75
-            } = s, v = x(null), [S, T] = te({
+              scrollStickTolerance: y = 75
+            } = a, v = R(null), [g, A] = te({
               startIndex: 0,
               endIndex: 10
-            }), [w, A] = te({}), I = x(!0);
-            B(() => {
+            }), [p, I] = te({}), M = R(!0);
+            q(() => {
               const P = setInterval(() => {
-                A({});
+                I({});
               }, 1e3);
               return () => clearInterval(P);
             }, []);
-            const M = x({
+            const b = R({
               isUserScrolling: !1,
               lastScrollTop: 0,
               scrollUpCount: 0,
               isNearBottom: !0
-            }), _ = x(
+            }), _ = R(
               /* @__PURE__ */ new Map()
-            ), { keys: E } = q(e, t, i);
-            B(() => {
-              const P = [e, ...t].join("."), V = b.getState().subscribeToPath(P, (O) => {
-                O.type !== "GET_SELECTED" && O.type;
+            ), { keys: E } = B(e, t, n);
+            q(() => {
+              const P = [e, ...t].join("."), k = T.getState().subscribeToPath(P, (j) => {
+                j.type !== "GET_SELECTED" && j.type;
               });
               return () => {
-                V();
+                k();
               };
-            }, [m, e, t.join(".")]), ie(() => {
-              if (h && E.length > 0 && v.current && !M.current.isUserScrolling && I.current) {
-                const P = v.current, V = () => {
+            }, [u, e, t.join(".")]), ce(() => {
+              if (h && E.length > 0 && v.current && !b.current.isUserScrolling && M.current) {
+                const P = v.current, k = () => {
                   if (P.clientHeight > 0) {
-                    const O = Math.ceil(
-                      P.clientHeight / a
+                    const j = Math.ceil(
+                      P.clientHeight / o
                     ), L = E.length - 1, D = Math.max(
                       0,
-                      L - O - u
+                      L - j - c
                     );
-                    T({ startIndex: D, endIndex: L }), requestAnimationFrame(() => {
-                      X("instant"), I.current = !1;
+                    A({ startIndex: D, endIndex: L }), requestAnimationFrame(() => {
+                      X("instant"), M.current = !1;
                     });
                   } else
-                    requestAnimationFrame(V);
+                    requestAnimationFrame(k);
                 };
-                V();
+                k();
               }
-            }, [E.length, h, a, u]);
-            const $ = x(S);
-            ie(() => {
-              $.current = S;
-            }, [S]);
-            const N = x(E);
-            ie(() => {
-              N.current = E;
+            }, [E.length, h, o, c]);
+            const $ = R(g);
+            ce(() => {
+              $.current = g;
+            }, [g]);
+            const F = R(E);
+            ce(() => {
+              F.current = E;
             }, [E]);
             const Z = we(() => {
               const P = v.current;
               if (!P) return;
-              const V = P.scrollTop, { scrollHeight: O, clientHeight: L } = P, D = M.current, re = O - (V + L), ge = D.isNearBottom;
-              D.isNearBottom = re <= g, V < D.lastScrollTop ? (D.scrollUpCount++, D.scrollUpCount > 3 && ge && (D.isUserScrolling = !0, console.log("User scrolled away from bottom"))) : D.isNearBottom && (D.isUserScrolling = !1, D.scrollUpCount = 0), D.lastScrollTop = V;
+              const k = P.scrollTop, { scrollHeight: j, clientHeight: L } = P, D = b.current, re = j - (k + L), Se = D.isNearBottom;
+              D.isNearBottom = re <= y, k < D.lastScrollTop ? (D.scrollUpCount++, D.scrollUpCount > 3 && Se && (D.isUserScrolling = !0, console.log("User scrolled away from bottom"))) : D.isNearBottom && (D.isUserScrolling = !1, D.scrollUpCount = 0), D.lastScrollTop = k;
               let Q = 0;
               for (let H = 0; H < E.length; H++) {
-                const ye = E[H], me = _.current.get(ye);
-                if (me && me.offset + me.height > V) {
+                const ge = E[H], ye = _.current.get(ge);
+                if (ye && ye.offset + ye.height > k) {
                   Q = H;
                   break;
                 }
@@ -765,25 +762,25 @@ function ke(e, r, l, o) {
                 "hadnlescroll ",
                 _.current,
                 Q,
-                S
-              ), Q !== S.startIndex && S.startIndex != 0) {
-                const H = Math.ceil(L / a);
-                T({
-                  startIndex: Math.max(0, Q - u),
+                g
+              ), Q !== g.startIndex && g.startIndex != 0) {
+                const H = Math.ceil(L / o);
+                A({
+                  startIndex: Math.max(0, Q - c),
                   endIndex: Math.min(
                     E.length - 1,
-                    Q + H + u
+                    Q + H + c
                   )
                 });
               }
             }, [
               E.length,
-              S.startIndex,
-              a,
-              u,
-              g
+              g.startIndex,
+              o,
+              c,
+              y
             ]);
-            B(() => {
+            q(() => {
               const P = v.current;
               if (P)
                 return P.addEventListener("scroll", Z, {
@@ -794,65 +791,65 @@ function ke(e, r, l, o) {
             }, [Z, h]);
             const X = we(
               (P = "smooth") => {
-                const V = v.current;
-                if (!V) return;
-                M.current.isUserScrolling = !1, M.current.isNearBottom = !0, M.current.scrollUpCount = 0;
-                const O = () => {
+                const k = v.current;
+                if (!k) return;
+                b.current.isUserScrolling = !1, b.current.isNearBottom = !0, b.current.scrollUpCount = 0;
+                const j = () => {
                   const L = (D = 0) => {
                     if (D > 5) return;
-                    const re = V.scrollHeight, ge = V.scrollTop, Q = V.clientHeight;
-                    ge + Q >= re - 1 || (V.scrollTo({
+                    const re = k.scrollHeight, Se = k.scrollTop, Q = k.clientHeight;
+                    Se + Q >= re - 1 || (k.scrollTo({
                       top: re,
                       behavior: P
                     }), setTimeout(() => {
-                      const H = V.scrollHeight, ye = V.scrollTop;
-                      (H !== re || ye + Q < H - 1) && L(D + 1);
+                      const H = k.scrollHeight, ge = k.scrollTop;
+                      (H !== re || ge + Q < H - 1) && L(D + 1);
                     }, 50));
                   };
                   L();
                 };
-                "requestIdleCallback" in window ? requestIdleCallback(O, { timeout: 100 }) : requestAnimationFrame(() => {
-                  requestAnimationFrame(O);
+                "requestIdleCallback" in window ? requestIdleCallback(j, { timeout: 100 }) : requestAnimationFrame(() => {
+                  requestAnimationFrame(j);
                 });
               },
               []
             );
-            return B(() => {
+            return q(() => {
               if (!h || !v.current) return;
-              const P = v.current, V = M.current;
-              let O;
+              const P = v.current, k = b.current;
+              let j;
               const L = () => {
-                clearTimeout(O), O = setTimeout(() => {
-                  !V.isUserScrolling && V.isNearBottom && X(
-                    I.current ? "instant" : "smooth"
+                clearTimeout(j), j = setTimeout(() => {
+                  !k.isUserScrolling && k.isNearBottom && X(
+                    M.current ? "instant" : "smooth"
                   );
                 }, 100);
               }, D = new MutationObserver(() => {
-                V.isUserScrolling || L();
+                k.isUserScrolling || L();
               });
               return D.observe(P, {
                 childList: !0,
                 subtree: !0,
                 attributes: !0,
                 attributeFilter: ["style", "class"]
-              }), I.current ? setTimeout(() => {
+              }), M.current ? setTimeout(() => {
                 X("instant");
               }, 0) : L(), () => {
-                clearTimeout(O), D.disconnect();
+                clearTimeout(j), D.disconnect();
               };
             }, [h, E.length, X]), {
               virtualState: pe(() => {
-                const P = Array.isArray(E) ? E.slice(S.startIndex, S.endIndex + 1) : [], V = t.length > 0 ? t.join(".") : "root";
-                return n({
+                const P = Array.isArray(E) ? E.slice(g.startIndex, g.endIndex + 1) : [], k = t.length > 0 ? t.join(".") : "root";
+                return i({
                   path: t,
-                  componentId: m,
+                  componentId: u,
                   meta: {
-                    ...i,
-                    arrayViews: { [V]: P },
+                    ...n,
+                    arrayViews: { [k]: P },
                     serverStateIsUpStream: !0
                   }
                 });
-              }, [S.startIndex, S.endIndex, E, i]),
+              }, [g.startIndex, g.endIndex, E, n]),
               virtualizerProps: {
                 outer: {
                   ref: v,
@@ -869,431 +866,431 @@ function ke(e, r, l, o) {
                 },
                 list: {
                   style: {
-                    transform: `translateY(${_.current.get(E[S.startIndex])?.offset || 0}px)`
+                    transform: `translateY(${_.current.get(E[g.startIndex])?.offset || 0}px)`
                   }
                 }
               },
               scrollToBottom: X,
-              scrollToIndex: (P, V = "smooth") => {
+              scrollToIndex: (P, k = "smooth") => {
                 if (v.current && E[P]) {
-                  const O = _.current.get(E[P])?.offset || 0;
-                  v.current.scrollTo({ top: O, behavior: V });
+                  const j = _.current.get(E[P])?.offset || 0;
+                  v.current.scrollTo({ top: j, behavior: k });
                 }
               }
             };
           };
-        if (y === "$stateMap")
-          return (s) => {
-            const { value: a, keys: u } = q(
+        if (m === "$stateMap")
+          return (a) => {
+            const { value: o, keys: c } = B(
               e,
               t,
-              i
+              n
             );
-            if (!u || !Array.isArray(a))
+            if (ve(e, u, t), !c || !Array.isArray(o))
               return [];
-            const h = n({
+            const h = i({
               path: t,
-              componentId: m,
-              meta: i
+              componentId: u,
+              meta: n
             });
-            return a.map((g, v) => {
-              const S = u[v];
-              if (!S) return;
-              const T = [...t, S], w = n({
-                path: T,
+            return o.map((y, v) => {
+              const g = c[v];
+              if (!g) return;
+              const A = [...t, g], p = i({
+                path: A,
                 // This now correctly points to the item in the shadow store.
-                componentId: m,
-                meta: i
+                componentId: u,
+                meta: n
               });
-              return s(w, v, h);
+              return a(p, v, h);
             });
           };
-        if (y === "$stateFilter")
-          return (s) => {
-            const a = t.length > 0 ? t.join(".") : "root", { keys: u, value: h } = q(
+        if (m === "$stateFilter")
+          return (a) => {
+            const o = t.length > 0 ? t.join(".") : "root", { keys: c, value: h } = B(
               e,
               t,
-              i
+              n
             );
             if (!Array.isArray(h))
               throw new Error("stateFilter can only be used on arrays");
-            const g = [];
-            return h.forEach((v, S) => {
-              if (s(v, S)) {
-                const T = u[S];
-                T && g.push(T);
+            const y = [];
+            return h.forEach((v, g) => {
+              if (a(v, g)) {
+                const A = c[g];
+                A && y.push(A);
               }
-            }), n({
+            }), i({
               path: t,
-              componentId: m,
+              componentId: u,
               meta: {
-                ...i,
+                ...n,
                 arrayViews: {
-                  ...i?.arrayViews || {},
-                  [a]: g
+                  ...n?.arrayViews || {},
+                  [o]: y
                 },
                 transforms: [
-                  ...i?.transforms || [],
-                  { type: "filter", fn: s, path: t }
+                  ...n?.transforms || [],
+                  { type: "filter", fn: a, path: t }
                 ]
               }
             });
           };
-        if (y === "$stateSort")
-          return (s) => {
-            const a = t.length > 0 ? t.join(".") : "root", { value: u, keys: h } = q(
+        if (m === "$stateSort")
+          return (a) => {
+            const o = t.length > 0 ? t.join(".") : "root", { value: c, keys: h } = B(
               e,
               t,
-              i
+              n
             );
-            if (!Array.isArray(u) || !h)
+            if (!Array.isArray(c) || !h)
               throw new Error("No array keys found for sorting");
-            const g = u.map((S, T) => ({
-              item: S,
-              key: h[T]
+            const y = c.map((g, A) => ({
+              item: g,
+              key: h[A]
             }));
-            g.sort((S, T) => s(S.item, T.item));
-            const v = g.map((S) => S.key);
-            return n({
+            y.sort((g, A) => a(g.item, A.item));
+            const v = y.map((g) => g.key);
+            return i({
               path: t,
-              componentId: m,
+              componentId: u,
               meta: {
-                ...i,
+                ...n,
                 arrayViews: {
-                  ...i?.arrayViews || {},
-                  [a]: v
+                  ...n?.arrayViews || {},
+                  [o]: v
                 },
                 transforms: [
-                  ...i?.transforms || [],
-                  { type: "sort", fn: s, path: t }
+                  ...n?.transforms || [],
+                  { type: "sort", fn: a, path: t }
                 ]
               }
             });
           };
-        if (y === "$stream")
-          return function(s = {}) {
+        if (m === "$stream")
+          return function(a = {}) {
             const {
-              bufferSize: a = 100,
-              flushInterval: u = 100,
+              bufferSize: o = 100,
+              flushInterval: c = 100,
               bufferStrategy: h = "accumulate",
-              store: g,
+              store: y,
               onFlush: v
-            } = s;
-            let S = [], T = !1, w = null;
-            const A = ($) => {
-              if (!T) {
-                if (h === "sliding" && S.length >= a)
-                  S.shift();
-                else if (h === "dropping" && S.length >= a)
+            } = a;
+            let g = [], A = !1, p = null;
+            const I = ($) => {
+              if (!A) {
+                if (h === "sliding" && g.length >= o)
+                  g.shift();
+                else if (h === "dropping" && g.length >= o)
                   return;
-                S.push($), S.length >= a && I();
+                g.push($), g.length >= o && M();
               }
-            }, I = () => {
-              if (S.length === 0) return;
-              const $ = [...S];
-              if (S = [], g) {
-                const N = g($);
-                N !== void 0 && (Array.isArray(N) ? N : [N]).forEach((X) => {
+            }, M = () => {
+              if (g.length === 0) return;
+              const $ = [...g];
+              if (g = [], y) {
+                const F = y($);
+                F !== void 0 && (Array.isArray(F) ? F : [F]).forEach((X) => {
                   r(X, t, {
                     updateType: "insert"
                   });
                 });
               } else
-                $.forEach((N) => {
-                  r(N, t, {
+                $.forEach((F) => {
+                  r(F, t, {
                     updateType: "insert"
                   });
                 });
               v?.($);
             };
-            u > 0 && (w = setInterval(I, u));
-            const M = ee(), _ = k(e, t) || {}, E = _.streams || /* @__PURE__ */ new Map();
-            return E.set(M, { buffer: S, flushTimer: w }), J(e, t, {
+            c > 0 && (p = setInterval(M, c));
+            const b = ee(), _ = V(e, t) || {}, E = _.streams || /* @__PURE__ */ new Map();
+            return E.set(b, { buffer: g, flushTimer: p }), J(e, t, {
               ..._,
               streams: E
             }), {
-              write: ($) => A($),
-              writeMany: ($) => $.forEach(A),
-              flush: () => I(),
+              write: ($) => I($),
+              writeMany: ($) => $.forEach(I),
+              flush: () => M(),
               pause: () => {
-                T = !0;
+                A = !0;
               },
               resume: () => {
-                T = !1, S.length > 0 && I();
+                A = !1, g.length > 0 && M();
               },
               close: () => {
-                I(), w && clearInterval(w);
-                const $ = b.getState().getShadowMetadata(e, t);
-                $?.streams && $.streams.delete(M);
+                M(), p && clearInterval(p);
+                const $ = T.getState().getShadowMetadata(e, t);
+                $?.streams && $.streams.delete(b);
               }
             };
           };
-        if (y === "$stateList")
-          return (s) => /* @__PURE__ */ ne(() => {
-            const u = x(/* @__PURE__ */ new Map()), [h, g] = te({}), v = t.length > 0 ? t.join(".") : "root", S = ut(e, t, i), T = pe(() => ({
-              ...i,
+        if (m === "$stateList")
+          return (a) => /* @__PURE__ */ ne(() => {
+            const c = R(/* @__PURE__ */ new Map()), [h, y] = te({}), v = t.length > 0 ? t.join(".") : "root", g = ct(e, t, n), A = pe(() => ({
+              ...n,
               arrayViews: {
-                ...i?.arrayViews || {},
-                [v]: S
+                ...n?.arrayViews || {},
+                [v]: g
               }
-            }), [i, v, S]), { value: w } = q(
+            }), [n, v, g]), { value: p } = B(
               e,
               t,
-              T
+              A
             );
-            if (B(() => {
-              const M = b.getState().subscribeToPath(j, (_) => {
+            if (q(() => {
+              const b = T.getState().subscribeToPath(O, (_) => {
                 if (_.type === "GET_SELECTED")
                   return;
-                const $ = b.getState().getShadowMetadata(e, t)?.transformCaches;
+                const $ = T.getState().getShadowMetadata(e, t)?.transformCaches;
                 if ($)
-                  for (const N of $.keys())
-                    N.startsWith(m) && $.delete(N);
-                (_.type === "INSERT" || _.type === "INSERT_MANY" || _.type === "REMOVE" || _.type === "CLEAR_SELECTION" || _.type === "SERVER_STATE_UPDATE" && !i?.serverStateIsUpStream) && g({});
+                  for (const F of $.keys())
+                    F.startsWith(u) && $.delete(F);
+                (_.type === "INSERT" || _.type === "INSERT_MANY" || _.type === "REMOVE" || _.type === "CLEAR_SELECTION" || _.type === "SERVER_STATE_UPDATE" && !n?.serverStateIsUpStream) && y({});
               });
               return () => {
-                M();
+                b();
               };
-            }, [m, j]), !Array.isArray(w))
+            }, [u, O]), !Array.isArray(p))
               return null;
-            const A = n({
+            const I = i({
               path: t,
-              componentId: m,
-              meta: T
+              componentId: u,
+              meta: A
               // Use updated meta here
-            }), I = w.map((M, _) => {
-              const E = S[_];
+            }), M = p.map((b, _) => {
+              const E = g[_];
               if (!E)
                 return null;
-              let $ = u.current.get(E);
-              $ || ($ = ee(), u.current.set(E, $));
-              const N = [...t, E];
-              return be(Oe, {
+              let $ = c.current.get(E);
+              $ || ($ = ee(), c.current.set(E, $));
+              const F = [...t, E];
+              return Ae(je, {
                 key: E,
                 stateKey: e,
                 itemComponentId: $,
-                itemPath: N,
+                itemPath: F,
                 localIndex: _,
-                arraySetter: A,
-                rebuildStateShape: n,
-                renderFn: s
+                arraySetter: I,
+                rebuildStateShape: i,
+                renderFn: a
               });
             });
-            return /* @__PURE__ */ ne(Ve, { children: I });
+            return /* @__PURE__ */ ne(Pe, { children: M });
           }, {});
-        if (y === "$stateFlattenOn")
-          return (s) => {
-            const a = t.length > 0 ? t.join(".") : "root", u = i?.arrayViews?.[a], h = b.getState().getShadowValue(e, t, u);
-            return Array.isArray(h) ? n({
-              path: [...t, "[*]", s],
-              componentId: m,
-              meta: i
+        if (m === "$stateFlattenOn")
+          return (a) => {
+            const o = t.length > 0 ? t.join(".") : "root", c = n?.arrayViews?.[o], h = T.getState().getShadowValue(e, t, c);
+            return Array.isArray(h) ? i({
+              path: [...t, "[*]", a],
+              componentId: u,
+              meta: n
             }) : [];
           };
-        if (y === "$index")
-          return (s) => {
-            const a = t.length > 0 ? t.join(".") : "root", u = i?.arrayViews?.[a];
-            if (u) {
-              const v = u[s];
-              return v ? n({
+        if (m === "$index")
+          return (a) => {
+            const o = t.length > 0 ? t.join(".") : "root", c = n?.arrayViews?.[o];
+            if (c) {
+              const v = c[a];
+              return v ? i({
                 path: [...t, v],
-                componentId: m,
-                meta: i
+                componentId: u,
+                meta: n
               }) : void 0;
             }
-            const h = k(e, t);
+            const h = V(e, t);
             if (!h?.arrayKeys) return;
-            const g = h.arrayKeys[s];
-            if (g)
-              return n({
-                path: [...t, g],
-                componentId: m,
-                meta: i
+            const y = h.arrayKeys[a];
+            if (y)
+              return i({
+                path: [...t, y],
+                componentId: u,
+                meta: n
               });
           };
-        if (y === "$last")
+        if (m === "$last")
           return () => {
-            const { keys: s } = q(e, t, i);
-            if (!s || s.length === 0)
+            const { keys: a } = B(e, t, n);
+            if (!a || a.length === 0)
               return;
-            const a = s[s.length - 1];
-            if (!a)
+            const o = a[a.length - 1];
+            if (!o)
               return;
-            const u = [...t, a];
-            return n({
-              path: u,
-              componentId: m,
-              meta: i
+            const c = [...t, o];
+            return i({
+              path: c,
+              componentId: u,
+              meta: n
             });
           };
-        if (y === "$insert")
-          return (s, a) => {
-            r(s, t, { updateType: "insert" });
+        if (m === "$insert")
+          return (a, o) => {
+            r(a, t, { updateType: "insert" });
           };
-        if (y === "$uniqueInsert")
-          return (s, a, u) => {
+        if (m === "$uniqueInsert")
+          return (a, o, c) => {
             const { value: h } = K(
               e,
               t,
-              i
-            ), g = z(s) ? s(h) : s;
+              n
+            ), y = z(a) ? a(h) : a;
             let v = null;
-            if (!h.some((T) => {
-              const w = a ? a.every(
-                (A) => oe(T[A], g[A])
-              ) : oe(T, g);
-              return w && (v = T), w;
+            if (!h.some((A) => {
+              const p = o ? o.every(
+                (I) => oe(A[I], y[I])
+              ) : oe(A, y);
+              return p && (v = A), p;
             }))
-              r(g, t, { updateType: "insert" });
-            else if (u && v) {
-              const T = u(v), w = h.map(
-                (A) => oe(A, v) ? T : A
+              r(y, t, { updateType: "insert" });
+            else if (c && v) {
+              const A = c(v), p = h.map(
+                (I) => oe(I, v) ? A : I
               );
-              r(w, t, {
+              r(p, t, {
                 updateType: "update"
               });
             }
           };
-        if (y === "$cut")
-          return (s, a) => {
-            const u = k(e, t);
-            if (!u?.arrayKeys || u.arrayKeys.length === 0)
+        if (m === "$cut")
+          return (a, o) => {
+            const c = V(e, t);
+            if (!c?.arrayKeys || c.arrayKeys.length === 0)
               return;
-            const h = s === -1 ? u.arrayKeys.length - 1 : s !== void 0 ? s : u.arrayKeys.length - 1, g = u.arrayKeys[h];
-            g && r(null, [...t, g], {
+            const h = a === -1 ? c.arrayKeys.length - 1 : a !== void 0 ? a : c.arrayKeys.length - 1, y = c.arrayKeys[h];
+            y && r(null, [...t, y], {
               updateType: "cut"
             });
           };
-        if (y === "$cutSelected")
+        if (m === "$cutSelected")
           return () => {
-            const s = [e, ...t].join("."), { keys: a } = q(e, t, i);
-            if (!a || a.length === 0)
+            const a = [e, ...t].join("."), { keys: o } = B(e, t, n);
+            if (!o || o.length === 0)
               return;
-            const u = b.getState().selectedIndicesMap.get(s);
-            if (!u)
+            const c = T.getState().selectedIndicesMap.get(a);
+            if (!c)
               return;
-            const h = u.split(".").pop();
-            if (!a.includes(h))
+            const h = c.split(".").pop();
+            if (!o.includes(h))
               return;
-            const g = u.split(".").slice(1);
-            b.getState().clearSelectedIndex({ arrayKey: s });
-            const v = g.slice(0, -1);
-            ae(e, v), r(null, g, {
+            const y = c.split(".").slice(1);
+            T.getState().clearSelectedIndex({ arrayKey: a });
+            const v = y.slice(0, -1);
+            ae(e, v), r(null, y, {
               updateType: "cut"
             });
           };
-        if (y === "$cutByValue")
-          return (s) => {
+        if (m === "$cutByValue")
+          return (a) => {
             const {
-              isArray: a,
-              value: u,
+              isArray: o,
+              value: c,
               keys: h
-            } = q(e, t, i);
-            if (!a) return;
-            const g = he(u, h, (v) => v === s);
-            g && r(null, [...t, g.key], {
+            } = B(e, t, n);
+            if (!o) return;
+            const y = me(c, h, (v) => v === a);
+            y && r(null, [...t, y.key], {
               updateType: "cut"
             });
           };
-        if (y === "$toggleByValue")
-          return (s) => {
+        if (m === "$toggleByValue")
+          return (a) => {
             const {
-              isArray: a,
-              value: u,
+              isArray: o,
+              value: c,
               keys: h
-            } = q(e, t, i);
-            if (!a) return;
-            const g = he(u, h, (v) => v === s);
-            if (g) {
-              const v = [...t, g.key];
+            } = B(e, t, n);
+            if (!o) return;
+            const y = me(c, h, (v) => v === a);
+            if (y) {
+              const v = [...t, y.key];
               r(null, v, {
                 updateType: "cut"
               });
             } else
-              r(s, t, { updateType: "insert" });
+              r(a, t, { updateType: "insert" });
           };
-        if (y === "$findWith")
-          return (s, a) => {
-            const { isArray: u, value: h, keys: g } = q(e, t, i);
-            if (!u)
+        if (m === "$findWith")
+          return (a, o) => {
+            const { isArray: c, value: h, keys: y } = B(e, t, n);
+            if (!c)
               throw new Error("findWith can only be used on arrays");
-            const v = he(
+            const v = me(
               h,
-              g,
-              (S) => S?.[s] === a
+              y,
+              (g) => g?.[a] === o
             );
-            return n(v ? {
+            return i(v ? {
               path: [...t, v.key],
-              componentId: m,
-              meta: i
+              componentId: u,
+              meta: n
             } : {
               path: [...t, `not_found_${ee()}`],
-              componentId: m,
-              meta: i
+              componentId: u,
+              meta: n
             });
           };
-        if (y === "$cutThis") {
-          const { value: s } = K(e, t, i), a = t.slice(0, -1);
-          return ae(e, a), () => {
-            r(s, t, { updateType: "cut" });
+        if (m === "$cutThis") {
+          const { value: a } = K(e, t, n), o = t.slice(0, -1);
+          return ae(e, o), () => {
+            r(a, t, { updateType: "cut" });
           };
         }
-        if (y === "$get")
+        if (m === "$get")
           return () => {
-            Me(e, m, t);
-            const { value: s } = K(e, t, i);
-            return s;
+            ve(e, u, t);
+            const { value: a } = K(e, t, n);
+            return a;
           };
-        if (y === "$$derive")
-          return (s) => $e({
+        if (m === "$$derive")
+          return (a) => be({
             _stateKey: e,
             _path: t,
-            _effect: s.toString(),
-            _meta: i
+            _effect: a.toString(),
+            _meta: n
           });
-        if (y === "$$get")
-          return () => $e({ _stateKey: e, _path: t, _meta: i });
-        if (y === "$lastSynced") {
-          const s = `${e}:${t.join(".")}`;
-          return Ze(s);
+        if (m === "$$get")
+          return () => be({ _stateKey: e, _path: t, _meta: n });
+        if (m === "$lastSynced") {
+          const a = `${e}:${t.join(".")}`;
+          return Je(a);
         }
-        if (y == "getLocalStorage")
-          return (s) => de(o + "-" + e + "-" + s);
-        if (y === "$isSelected") {
-          const s = t.slice(0, -1);
-          if (k(e, s)?.arrayKeys) {
-            const u = e + "." + s.join("."), h = b.getState().selectedIndicesMap.get(u), g = e + "." + t.join(".");
-            return h === g;
+        if (m == "getLocalStorage")
+          return (a) => fe(s + "-" + e + "-" + a);
+        if (m === "$isSelected") {
+          const a = t.slice(0, -1);
+          if (V(e, a)?.arrayKeys) {
+            const c = e + "." + a.join("."), h = T.getState().selectedIndicesMap.get(c), y = e + "." + t.join(".");
+            return h === y;
           }
           return;
         }
-        if (y === "$setSelected")
-          return (s) => {
-            const a = t.slice(0, -1), u = e + "." + a.join("."), h = e + "." + t.join(".");
-            ae(e, a, void 0), b.getState().selectedIndicesMap.get(u), s && b.getState().setSelectedIndex(u, h);
+        if (m === "$setSelected")
+          return (a) => {
+            const o = t.slice(0, -1), c = e + "." + o.join("."), h = e + "." + t.join(".");
+            ae(e, o, void 0), T.getState().selectedIndicesMap.get(c), a && T.getState().setSelectedIndex(c, h);
           };
-        if (y === "$toggleSelected")
+        if (m === "$toggleSelected")
           return () => {
-            const s = t.slice(0, -1), a = e + "." + s.join("."), u = e + "." + t.join(".");
-            b.getState().selectedIndicesMap.get(a) === u ? b.getState().clearSelectedIndex({ arrayKey: a }) : b.getState().setSelectedIndex(a, u), ae(e, s);
+            const a = t.slice(0, -1), o = e + "." + a.join("."), c = e + "." + t.join(".");
+            T.getState().selectedIndicesMap.get(o) === c ? T.getState().clearSelectedIndex({ arrayKey: o }) : T.getState().setSelectedIndex(o, c), ae(e, a);
           };
-        if (y === "$_componentId")
-          return m;
+        if (m === "$_componentId")
+          return u;
         if (t.length == 0) {
-          if (y === "$addZodValidation")
-            return (s) => {
-              s.forEach((a) => {
-                const u = b.getState().getShadowMetadata(e, a.path) || {};
-                b.getState().setShadowMetadata(e, a.path, {
-                  ...u,
+          if (m === "$addZodValidation")
+            return (a, o) => {
+              a.forEach((c) => {
+                const h = T.getState().getShadowMetadata(e, c.path) || {};
+                T.getState().setShadowMetadata(e, c.path, {
+                  ...h,
                   validation: {
                     status: "INVALID",
                     errors: [
                       {
-                        source: "client",
-                        message: a.message,
+                        source: o || "client",
+                        message: c.message,
                         severity: "error",
-                        code: a.code
+                        code: c.code
                       }
                     ],
                     lastValidated: Date.now(),
@@ -1302,13 +1299,13 @@ function ke(e, r, l, o) {
                 });
               });
             };
-          if (y === "$clearZodValidation")
-            return (s) => {
-              if (!s)
+          if (m === "$clearZodValidation")
+            return (a) => {
+              if (!a)
                 throw new Error("clearZodValidation requires a path");
-              const a = k(e, s) || {};
-              J(e, s, {
-                ...a,
+              const o = V(e, a) || {};
+              J(e, a, {
+                ...o,
                 validation: {
                   status: "NOT_VALIDATED",
                   errors: [],
@@ -1316,236 +1313,264 @@ function ke(e, r, l, o) {
                 }
               });
             };
-          if (y === "$applyJsonPatch")
-            return (s) => {
-              const a = b.getState(), u = a.getShadowMetadata(e, []);
-              if (!u?.components) return;
-              const h = (v) => !v || v === "/" ? [] : v.split("/").slice(1).map((S) => S.replace(/~1/g, "/").replace(/~0/g, "~")), g = /* @__PURE__ */ new Set();
-              for (const v of s) {
-                const S = h(v.path);
+          if (m === "$applyOperation")
+            return (a) => {
+              const o = a.validation || [];
+              if (!a || !a.path) {
+                console.error(
+                  "Invalid operation received by $applyOperation:",
+                  a
+                );
+                return;
+              }
+              const c = a.path, h = T.getState().getShadowMetadata(e, c) || {}, y = o.map((v) => ({
+                source: "sync_engine",
+                message: v.message,
+                severity: "warning",
+                code: v.code
+              }));
+              console.log("updatePath", c), T.getState().setShadowMetadata(e, c, {
+                ...h,
+                validation: {
+                  status: y.length > 0 ? "INVALID" : "VALID",
+                  errors: y,
+                  lastValidated: Date.now()
+                }
+              }), r(a.newValue, c, {
+                updateType: a.updateType,
+                sync: !1
+              });
+            };
+          if (m === "$applyJsonPatch")
+            return (a) => {
+              const o = T.getState(), c = o.getShadowMetadata(e, []);
+              if (!c?.components) return;
+              const h = (v) => !v || v === "/" ? [] : v.split("/").slice(1).map((g) => g.replace(/~1/g, "/").replace(/~0/g, "~")), y = /* @__PURE__ */ new Set();
+              for (const v of a) {
+                const g = h(v.path);
                 switch (v.op) {
                   case "add":
                   case "replace": {
-                    const { value: T } = v;
-                    a.updateShadowAtPath(e, S, T), a.markAsDirty(e, S, { bubble: !0 });
-                    let w = [...S];
+                    const { value: A } = v;
+                    o.updateShadowAtPath(e, g, A), o.markAsDirty(e, g, { bubble: !0 });
+                    let p = [...g];
                     for (; ; ) {
-                      const A = a.getShadowMetadata(
+                      const I = o.getShadowMetadata(
                         e,
-                        w
+                        p
                       );
-                      if (A?.pathComponents && A.pathComponents.forEach((I) => {
-                        if (!g.has(I)) {
-                          const M = u.components?.get(I);
-                          M && (M.forceUpdate(), g.add(I));
+                      if (I?.pathComponents && I.pathComponents.forEach((M) => {
+                        if (!y.has(M)) {
+                          const b = c.components?.get(M);
+                          b && (b.forceUpdate(), y.add(M));
                         }
-                      }), w.length === 0) break;
-                      w.pop();
+                      }), p.length === 0) break;
+                      p.pop();
                     }
                     break;
                   }
                   case "remove": {
-                    const T = S.slice(0, -1);
-                    a.removeShadowArrayElement(e, S), a.markAsDirty(e, T, { bubble: !0 });
-                    let w = [...T];
+                    const A = g.slice(0, -1);
+                    o.removeShadowArrayElement(e, g), o.markAsDirty(e, A, { bubble: !0 });
+                    let p = [...A];
                     for (; ; ) {
-                      const A = a.getShadowMetadata(
+                      const I = o.getShadowMetadata(
                         e,
-                        w
+                        p
                       );
-                      if (A?.pathComponents && A.pathComponents.forEach((I) => {
-                        if (!g.has(I)) {
-                          const M = u.components?.get(I);
-                          M && (M.forceUpdate(), g.add(I));
+                      if (I?.pathComponents && I.pathComponents.forEach((M) => {
+                        if (!y.has(M)) {
+                          const b = c.components?.get(M);
+                          b && (b.forceUpdate(), y.add(M));
                         }
-                      }), w.length === 0) break;
-                      w.pop();
+                      }), p.length === 0) break;
+                      p.pop();
                     }
                     break;
                   }
                 }
               }
             };
-          if (y === "$getComponents")
-            return () => k(e, [])?.components;
-          if (y === "$getAllFormRefs")
-            return () => Ae.getState().getFormRefsByStateKey(e);
+          if (m === "$getComponents")
+            return () => V(e, [])?.components;
+          if (m === "$getAllFormRefs")
+            return () => Me.getState().getFormRefsByStateKey(e);
         }
-        if (y === "$getFormRef")
-          return () => Ae.getState().getFormRef(e + "." + t.join("."));
-        if (y === "$validationWrapper")
+        if (m === "$getFormRef")
+          return () => Me.getState().getFormRef(e + "." + t.join("."));
+        if (m === "$validationWrapper")
           return ({
-            children: s,
-            hideMessage: a
+            children: a,
+            hideMessage: o
           }) => /* @__PURE__ */ ne(
-            je,
+            Oe,
             {
-              formOpts: a ? { validation: { message: "" } } : void 0,
+              formOpts: o ? { validation: { message: "" } } : void 0,
               path: t,
               stateKey: e,
-              children: s
+              children: a
             }
           );
-        if (y === "$_stateKey") return e;
-        if (y === "$_path") return t;
-        if (y === "$update")
-          return (s) => (r(s, t, { updateType: "update" }), {
+        if (m === "$_stateKey") return e;
+        if (m === "$_path") return t;
+        if (m === "$update")
+          return (a) => (r(a, t, { updateType: "update" }), {
             synced: () => {
-              const a = b.getState().getShadowMetadata(e, t);
+              const o = T.getState().getShadowMetadata(e, t);
               J(e, t, {
-                ...a,
+                ...o,
                 isDirty: !1,
                 stateSource: "server",
                 lastServerSync: Date.now()
               });
-              const u = [e, ...t].join(".");
-              Qe(u, {
+              const c = [e, ...t].join(".");
+              Ye(c, {
                 type: "SYNC_STATUS_CHANGE",
                 isDirty: !1
               });
             }
           });
-        if (y === "$toggle") {
-          const { value: s } = K(
+        if (m === "$toggle") {
+          const { value: a } = K(
             e,
             t,
-            i
+            n
           );
-          if (typeof s != "boolean")
+          if (typeof a != "boolean")
             throw new Error("toggle() can only be used on boolean values");
           return () => {
-            r(!s, t, {
+            r(!a, t, {
               updateType: "update"
             });
           };
         }
-        if (y === "$isolate")
-          return (s) => /* @__PURE__ */ ne(
-            Fe,
+        if (m === "$isolate")
+          return (a) => /* @__PURE__ */ ne(
+            Ue,
             {
               stateKey: e,
               path: t,
-              rebuildStateShape: n,
-              renderFn: s
+              rebuildStateShape: i,
+              renderFn: a
             }
           );
-        if (y === "$formElement")
-          return (s, a) => /* @__PURE__ */ ne(
-            Ne,
+        if (m === "$formElement")
+          return (a, o) => /* @__PURE__ */ ne(
+            Fe,
             {
               stateKey: e,
               path: t,
-              rebuildStateShape: n,
+              rebuildStateShape: i,
               setState: r,
-              formOpts: a,
-              renderFn: s
+              formOpts: o,
+              renderFn: a
             }
           );
-        const Y = [...t, y];
-        return n({
+        const Y = [...t, m];
+        return i({
           path: Y,
-          componentId: m,
-          meta: i
+          componentId: u,
+          meta: n
         });
       }
-    }, G = new Proxy({}, F);
-    return f.set(U, G), G;
+    }, G = new Proxy({}, U);
+    return f.set(x, G), G;
   }
-  const d = {
+  const S = {
     $revertToInitialState: (t) => {
-      const i = b.getState().getShadowMetadata(e, []);
-      let m;
-      i?.stateSource === "server" && i.baseServerState ? m = i.baseServerState : m = b.getState().initialStateGlobal[e], He(e), se(e, m), n({
+      const n = T.getState().getShadowMetadata(e, []);
+      let u;
+      n?.stateSource === "server" && n.baseServerState ? u = n.baseServerState : u = T.getState().initialStateGlobal[e], We(e), se(e, u), i({
         path: [],
-        componentId: l
+        componentId: d
       });
-      const C = W(e), U = z(C?.localStorage?.key) ? C?.localStorage?.key(m) : C?.localStorage?.key, j = `${o}-${e}-${U}`;
-      return j && localStorage.removeItem(j), Se(e), m;
+      const C = W(e), x = z(C?.localStorage?.key) ? C?.localStorage?.key(u) : C?.localStorage?.key, O = `${s}-${e}-${x}`;
+      return O && localStorage.removeItem(O), ie(e), u;
     },
     $updateInitialState: (t) => {
-      const i = ke(
+      const n = Ve(
         e,
         r,
-        l,
-        o
-      ), m = b.getState().initialStateGlobal[e], C = W(e), U = z(C?.localStorage?.key) ? C?.localStorage?.key(m) : C?.localStorage?.key, j = `${o}-${e}-${U}`;
-      return localStorage.getItem(j) && localStorage.removeItem(j), Pe(() => {
-        _e(e, t), se(e, t);
-        const F = b.getState().getShadowMetadata(e, []);
-        F && F?.components?.forEach((G) => {
+        d,
+        s
+      ), u = T.getState().initialStateGlobal[e], C = W(e), x = z(C?.localStorage?.key) ? C?.localStorage?.key(u) : C?.localStorage?.key, O = `${s}-${e}-${x}`;
+      return localStorage.getItem(O) && localStorage.removeItem(O), Ce(() => {
+        ke(e, t), se(e, t);
+        const U = T.getState().getShadowMetadata(e, []);
+        U && U?.components?.forEach((G) => {
           G.forceUpdate();
         });
       }), {
-        fetchId: (F) => i.$get()[F]
+        fetchId: (U) => n.$get()[U]
       };
     }
   };
-  return n({
-    componentId: l,
+  return i({
+    componentId: d,
     path: []
   });
 }
-function $e(e) {
-  return be(ft, { proxy: e });
+function be(e) {
+  return Ae(lt, { proxy: e });
 }
-function ft({
+function lt({
   proxy: e
 }) {
-  const r = x(null), l = x(null), o = x(!1), f = `${e._stateKey}-${e._path.join(".")}`, n = e._path.length > 0 ? e._path.join(".") : "root", d = e._meta?.arrayViews?.[n], c = R(e._stateKey, e._path, d);
-  return B(() => {
+  const r = R(null), d = R(null), s = R(!1), f = `${e._stateKey}-${e._path.join(".")}`, i = e._path.length > 0 ? e._path.join(".") : "root", S = e._meta?.arrayViews?.[i], l = N(e._stateKey, e._path, S);
+  return q(() => {
     const t = r.current;
-    if (!t || o.current) return;
-    const i = setTimeout(() => {
+    if (!t || s.current) return;
+    const n = setTimeout(() => {
       if (!t.parentElement) {
         console.warn("Parent element not found for signal", f);
         return;
       }
-      const m = t.parentElement, U = Array.from(m.childNodes).indexOf(t);
-      let j = m.getAttribute("data-parent-id");
-      j || (j = `parent-${crypto.randomUUID()}`, m.setAttribute("data-parent-id", j)), l.current = `instance-${crypto.randomUUID()}`;
-      const F = b.getState().getShadowMetadata(e._stateKey, e._path) || {}, G = F.signals || [];
+      const u = t.parentElement, x = Array.from(u.childNodes).indexOf(t);
+      let O = u.getAttribute("data-parent-id");
+      O || (O = `parent-${crypto.randomUUID()}`, u.setAttribute("data-parent-id", O)), d.current = `instance-${crypto.randomUUID()}`;
+      const U = T.getState().getShadowMetadata(e._stateKey, e._path) || {}, G = U.signals || [];
       G.push({
-        instanceId: l.current,
-        parentId: j,
-        position: U,
+        instanceId: d.current,
+        parentId: O,
+        position: x,
         effect: e._effect
-      }), b.getState().setShadowMetadata(e._stateKey, e._path, {
-        ...F,
+      }), T.getState().setShadowMetadata(e._stateKey, e._path, {
+        ...U,
         signals: G
       });
-      let p = c;
+      let w = l;
       if (e._effect)
         try {
-          p = new Function(
+          w = new Function(
             "state",
             `return (${e._effect})(state)`
-          )(c);
+          )(l);
         } catch (Y) {
           console.error("Error evaluating effect function:", Y);
         }
-      p !== null && typeof p == "object" && (p = JSON.stringify(p));
-      const y = document.createTextNode(String(p ?? ""));
-      t.replaceWith(y), o.current = !0;
+      w !== null && typeof w == "object" && (w = JSON.stringify(w));
+      const m = document.createTextNode(String(w ?? ""));
+      t.replaceWith(m), s.current = !0;
     }, 0);
     return () => {
-      if (clearTimeout(i), l.current) {
-        const m = b.getState().getShadowMetadata(e._stateKey, e._path) || {};
-        m.signals && (m.signals = m.signals.filter(
-          (C) => C.instanceId !== l.current
-        ), b.getState().setShadowMetadata(e._stateKey, e._path, m));
+      if (clearTimeout(n), d.current) {
+        const u = T.getState().getShadowMetadata(e._stateKey, e._path) || {};
+        u.signals && (u.signals = u.signals.filter(
+          (C) => C.instanceId !== d.current
+        ), T.getState().setShadowMetadata(e._stateKey, e._path, u));
       }
     };
-  }, []), be("span", {
+  }, []), Ae("span", {
     ref: r,
     style: { display: "contents" },
     "data-signal-id": f
   });
 }
 export {
-  $e as $cogsSignal,
-  Tt as addStateOptions,
-  Xe as createCogsState,
-  bt as createCogsStateFromSync,
-  lt as useCogsStateFn
+  be as $cogsSignal,
+  wt as addStateOptions,
+  Ze as createCogsState,
+  pt as createCogsStateFromSync,
+  it as useCogsStateFn
 };
 //# sourceMappingURL=CogsState.jsx.map