cogsbox-state 0.5.471 → 0.5.473

package/dist/CogsState.jsx

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