cogsbox-state 0.5.472 → 0.5.474

package/dist/CogsState.jsx

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