npm - cogsbox-state - Versions diffs - 0.5.463 → 0.5.465 - Mend

cogsbox-state 0.5.463 → 0.5.465

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

Files changed (21) hide show

package/dist/CogsState.jsx CHANGED Viewed

@@ -1,889 +1,923 @@
 "use client";
-import { jsx as ne, Fragment as De } from "react/jsx-runtime";
-import { memo as Oe, useState as Q, useRef as z, useCallback as oe, useEffect as Z, useLayoutEffect as le, useMemo as ue, createElement as se, startTransition as Re } from "react";
-import { createRoot as be } from "react-dom/client";
-import { transformStateFunc as $e, isFunction as ee, isArray as Ie, getDifferences as Ae, isDeepEqual as re } from "./utility.js";
-import { ValidationWrapper as Ve } from "./Functions.jsx";
-import Ue from "superjson";
-import { v4 as te } from "uuid";
-import { getGlobalStore as t, formRefStore as he } from "./store.js";
-import { useCogsConfig as _e } from "./CogsStateClient.jsx";
-import { useInView as Ne } from "react-intersection-observer";
-function ge(e, a) {
-  const y = t.getState().getInitialOptions, m = t.getState().setInitialStateOptions, v = y(e) || {};
-  m(e, {
-    ...v,
-    ...a
+import { jsx as ne, Fragment as Ne } from "react/jsx-runtime";
+import { memo as $e, useState as J, useRef as B, useCallback as ae, useEffect as q, useLayoutEffect as ie, useMemo as we, createElement as Me, startTransition as je } from "react";
+import { transformStateFunc as Fe, isFunction as X, isDeepEqual as oe, isArray as Le, getDifferences as xe } from "./utility.js";
+import { ValidationWrapper as _e } from "./Functions.jsx";
+import Re from "superjson";
+import { v4 as ee } from "uuid";
+import { getGlobalStore as I, formRefStore as Ie } from "./store.js";
+import { useCogsConfig as ke } from "./CogsStateClient.jsx";
+import { useInView as He } from "react-intersection-observer";
+const {
+  getInitialOptions: G,
+  updateInitialStateGlobal: Pe,
+  // ALIAS THE NEW FUNCTIONS TO THE OLD NAMES
+  getShadowMetadata: D,
+  setShadowMetadata: x,
+  getShadowValue: F,
+  initializeShadowState: ce,
+  updateShadowAtPath: Be,
+  insertShadowArrayElement: Ce,
+  removeShadowArrayElement: We,
+  getSelectedIndex: kt,
+  setInitialStateOptions: de,
+  setServerStateUpdate: qe,
+  markAsDirty: fe,
+  registerComponent: ze,
+  unregisterComponent: Ge,
+  addPathComponent: Je,
+  clearSelectedIndexesForState: Ze,
+  addStateLog: Ye,
+  setSyncInfo: Qe,
+  clearSelectedIndex: Xe,
+  getSyncInfo: Ke,
+  notifyPathSubscribers: De,
+  subscribeToPath: et
+  // Note: The old functions are no longer imported under their original names
+} = I.getState();
+function Z(e, t, c) {
+  const n = D(e, t);
+  if (!!!n?.arrayKeys)
+    return { isArray: !1, value: I.getState().getShadowValue(e, t), keys: [] };
+  const s = t.join("."), u = c?.arrayViews?.[s] ?? n.arrayKeys;
+  return Array.isArray(u) && u.length === 0 ? { isArray: !0, value: [], keys: [] } : { isArray: !0, value: I.getState().getShadowValue(e, t, u), keys: u ?? [] };
+}
+function ve(e, t, c) {
+  for (let n = 0; n < e.length; n++)
+    if (c(e[n], n)) {
+      const d = t[n];
+      if (d)
+        return { key: d, index: n, value: e[n] };
+    }
+  return null;
+}
+function pe(e, t) {
+  const c = G(e) || {};
+  de(e, {
+    ...c,
+    ...t
   });
 }
-function Me({
+function Ee({
   stateKey: e,
-  options: a,
-  initialOptionsPart: y
+  options: t,
+  initialOptionsPart: c
 }) {
-  const m = ae(e) || {}, v = y[e] || {}, I = t.getState().setInitialStateOptions, h = { ...v, ...m };
-  let S = !1;
-  if (a)
-    for (const u in a)
-      h.hasOwnProperty(u) ? (u == "localStorage" && a[u] && h[u].key !== a[u]?.key && (S = !0, h[u] = a[u]), u == "defaultState" && a[u] && h[u] !== a[u] && !re(h[u], a[u]) && (S = !0, h[u] = a[u])) : (S = !0, h[u] = a[u]);
-  h.syncOptions && (!a || !a.hasOwnProperty("syncOptions")) && (S = !0), S && I(e, h);
+  const n = G(e) || {}, s = { ...c[e] || {}, ...n };
+  let u = !1;
+  if (t)
+    for (const i in t)
+      s.hasOwnProperty(i) ? (i == "localStorage" && t[i] && s[i].key !== t[i]?.key && (u = !0, s[i] = t[i]), i == "defaultState" && t[i] && s[i] !== t[i] && !oe(s[i], t[i]) && (u = !0, s[i] = t[i])) : (u = !0, s[i] = t[i]);
+  s.syncOptions && (!t || !t.hasOwnProperty("syncOptions")) && (u = !0), u && de(e, s);
 }
-function ot(e, { formElements: a, validation: y }) {
-  return { initialState: e, formElements: a, validation: y };
+function Pt(e, { formElements: t, validation: c }) {
+  return { initialState: e, formElements: t, validation: c };
 }
-const Fe = (e, a) => {
-  let y = e;
-  const [m, v] = $e(y);
-  a?.__fromSyncSchema && a?.__syncNotifications && t.getState().setInitialStateOptions("__notifications", a.__syncNotifications), a?.__fromSyncSchema && a?.__apiParamsMap && t.getState().setInitialStateOptions("__apiParamsMap", a.__apiParamsMap), Object.keys(m).forEach((S) => {
-    let u = v[S] || {};
-    const n = {
-      ...u
+const tt = (e, t) => {
+  let c = e;
+  const [n, d] = Fe(c);
+  t?.__fromSyncSchema && t?.__syncNotifications && I.getState().setInitialStateOptions("__notifications", t.__syncNotifications), t?.__fromSyncSchema && t?.__apiParamsMap && I.getState().setInitialStateOptions("__apiParamsMap", t.__apiParamsMap), Object.keys(n).forEach((i) => {
+    let S = d[i] || {};
+    const r = {
+      ...S
     };
-    if (a?.formElements && (n.formElements = {
-      ...a.formElements,
-      ...u.formElements || {}
-    }), a?.validation && (n.validation = {
-      ...a.validation,
-      ...u.validation || {}
-    }, a.validation.key && !u.validation?.key && (n.validation.key = `${a.validation.key}.${S}`)), a?.__syncSchemas?.[S]?.schemas?.validation && (n.validation = {
-      zodSchemaV4: a.__syncSchemas[S].schemas.validation,
-      ...u.validation
-    }), Object.keys(n).length > 0) {
-      const l = ae(S);
-      l ? t.getState().setInitialStateOptions(S, {
+    if (t?.formElements && (r.formElements = {
+      ...t.formElements,
+      ...S.formElements || {}
+    }), t?.validation && (r.validation = {
+      ...t.validation,
+      ...S.validation || {}
+    }, t.validation.key && !S.validation?.key && (r.validation.key = `${t.validation.key}.${i}`)), t?.__syncSchemas?.[i]?.schemas?.validation && (r.validation = {
+      zodSchemaV4: t.__syncSchemas[i].schemas.validation,
+      ...S.validation
+    }), Object.keys(r).length > 0) {
+      const l = G(i);
+      l ? de(i, {
         ...l,
-        ...n
-      }) : t.getState().setInitialStateOptions(S, n);
+        ...r
+      }) : de(i, r);
     }
-  }), Object.keys(m).forEach((S) => {
-    t.getState().initializeShadowState(S, m[S]);
-  });
-  const I = (S, u) => {
-    console.time("useCogsState");
-    const [n] = Q(u?.componentId ?? te());
-    Me({
-      stateKey: S,
-      options: u,
-      initialOptionsPart: v
+  }), Object.keys(n).forEach((i) => {
+    ce(i, n[i]);
+  }), console.log("new stateObject ", I.getState().shadowStateStore);
+  const s = (i, S) => {
+    const [r] = J(S?.componentId ?? ee());
+    Ee({
+      stateKey: i,
+      options: S,
+      initialOptionsPart: d
     });
-    const l = t.getState().getShadowValue(S) || m[S], V = u?.modifyState ? u.modifyState(l) : l;
-    return console.timeEnd("useCogsState"), We(V, {
-      stateKey: S,
-      syncUpdate: u?.syncUpdate,
-      componentId: n,
-      localStorage: u?.localStorage,
-      middleware: u?.middleware,
-      reactiveType: u?.reactiveType,
-      reactiveDeps: u?.reactiveDeps,
-      defaultState: u?.defaultState,
-      dependencies: u?.dependencies,
-      serverState: u?.serverState,
-      syncOptions: u?.syncOptions,
-      __useSync: a?.__useSync
+    const l = F(i, []) || n[i], M = S?.modifyState ? S.modifyState(l) : l;
+    return ft(M, {
+      stateKey: i,
+      syncUpdate: S?.syncUpdate,
+      componentId: r,
+      localStorage: S?.localStorage,
+      middleware: S?.middleware,
+      reactiveType: S?.reactiveType,
+      reactiveDeps: S?.reactiveDeps,
+      defaultState: S?.defaultState,
+      dependencies: S?.dependencies,
+      serverState: S?.serverState,
+      syncOptions: S?.syncOptions,
+      __useSync: t?.__useSync
     });
   };
-  function h(S, u) {
-    Me({ stateKey: S, options: u, initialOptionsPart: v }), u.localStorage && He(S, u), ve(S);
+  function u(i, S) {
+    Ee({ stateKey: i, options: S, initialOptionsPart: d }), S.localStorage && nt(i, S), be(i);
   }
-  return { useCogsState: I, setCogsOptions: h };
+  return { useCogsState: s, setCogsOptions: u };
 };
-function st(e, a) {
-  const y = e.schemas, m = {}, v = {};
-  for (const I in y) {
-    const h = y[I];
-    m[I] = h?.schemas?.defaultValues || {}, h?.api?.queryData?._paramType && (v[I] = h.api.queryData._paramType);
+function Ct(e, t) {
+  const c = e.schemas, n = {}, d = {};
+  for (const s in c) {
+    const u = c[s];
+    n[s] = u?.schemas?.defaultValues || {}, u?.api?.queryData?._paramType && (d[s] = u.api.queryData._paramType);
   }
-  return Fe(m, {
+  return tt(n, {
     __fromSyncSchema: !0,
     __syncNotifications: e.notifications,
-    __apiParamsMap: v,
-    __useSync: a,
-    __syncSchemas: y
+    __apiParamsMap: d,
+    __useSync: t,
+    __syncSchemas: c
   });
 }
-const {
-  getInitialOptions: ae,
-  addStateLog: je,
-  updateInitialStateGlobal: Ce
-} = t.getState(), Le = (e, a, y, m, v) => {
-  y?.log && console.log(
+const rt = (e, t, c, n, d) => {
+  c?.log && console.log(
     "saving to localstorage",
-    a,
-    y.localStorage?.key,
-    m
+    t,
+    c.localStorage?.key,
+    n
   );
-  const I = ee(y?.localStorage?.key) ? y.localStorage?.key(e) : y?.localStorage?.key;
-  if (I && m) {
-    const h = `${m}-${a}-${I}`;
-    let S;
+  const s = X(c?.localStorage?.key) ? c.localStorage?.key(e) : c?.localStorage?.key;
+  if (s && n) {
+    const u = `${n}-${t}-${s}`;
+    let i;
     try {
-      S = fe(h)?.lastSyncedWithServer;
+      i = me(u)?.lastSyncedWithServer;
     } catch {
     }
-    const u = t.getState().getShadowMetadata(a, []), n = {
+    const S = D(t, []), r = {
       state: e,
       lastUpdated: Date.now(),
-      lastSyncedWithServer: S,
-      stateSource: u?.stateSource,
-      baseServerState: u?.baseServerState
-    }, l = Ue.serialize(n);
+      lastSyncedWithServer: i,
+      stateSource: S?.stateSource,
+      baseServerState: S?.baseServerState
+    }, l = Re.serialize(r);
     window.localStorage.setItem(
-      h,
+      u,
       JSON.stringify(l.json)
     );
   }
-}, fe = (e) => {
+}, me = (e) => {
   if (!e) return null;
   try {
-    const a = window.localStorage.getItem(e);
-    return a ? JSON.parse(a) : null;
-  } catch (a) {
-    return console.error("Error loading from localStorage:", a), null;
+    const t = window.localStorage.getItem(e);
+    return t ? JSON.parse(t) : null;
+  } catch (t) {
+    return console.error("Error loading from localStorage:", t), null;
   }
-}, He = (e, a) => {
-  const y = t.getState().getShadowValue(e), { sessionId: m } = _e(), v = ee(a?.localStorage?.key) ? a.localStorage.key(y) : a?.localStorage?.key;
-  if (v && m) {
-    const I = fe(
-      `${m}-${e}-${v}`
+}, nt = (e, t) => {
+  const c = F(e, []), { sessionId: n } = ke(), d = X(t?.localStorage?.key) ? t.localStorage.key(c) : t?.localStorage?.key;
+  if (d && n) {
+    const s = me(
+      `${n}-${e}-${d}`
     );
-    if (I && I.lastUpdated > (I.lastSyncedWithServer || 0))
-      return ve(e), !0;
+    if (s && s.lastUpdated > (s.lastSyncedWithServer || 0))
+      return be(e), !0;
   }
   return !1;
-}, ve = (e) => {
-  const a = t.getState().getShadowMetadata(e, []);
-  if (!a) return;
-  const y = /* @__PURE__ */ new Set();
-  a?.components?.forEach((m) => {
-    (m ? Array.isArray(m.reactiveType) ? m.reactiveType : [m.reactiveType || "component"] : null)?.includes("none") || y.add(() => m.forceUpdate());
+}, be = (e) => {
+  const t = D(e, []);
+  if (!t) return;
+  const c = /* @__PURE__ */ new Set();
+  t?.components?.forEach((n) => {
+    (n ? Array.isArray(n.reactiveType) ? n.reactiveType : [n.reactiveType || "component"] : null)?.includes("none") || c.add(() => n.forceUpdate());
   }), queueMicrotask(() => {
-    y.forEach((m) => m());
+    c.forEach((n) => n());
   });
-}, it = (e, a) => {
-  const y = t.getState().getShadowMetadata(e, []);
-  if (y) {
-    const m = `${e}////${a}`, v = y?.components?.get(m);
-    if ((v ? Array.isArray(v.reactiveType) ? v.reactiveType : [v.reactiveType || "component"] : null)?.includes("none"))
-      return;
-    v && v.forceUpdate();
-  }
 };
-function ye(e, a, y, m) {
-  const v = t.getState(), I = v.getShadowMetadata(e, a);
-  if (v.setShadowMetadata(e, a, {
-    ...I,
+function ge(e, t, c, n) {
+  const d = D(e, t);
+  if (x(e, t, {
+    ...d,
     isDirty: !1,
     stateSource: "server",
-    lastServerSync: m || Date.now()
-  }), Array.isArray(y)) {
-    const h = v.getShadowMetadata(e, a);
-    h?.arrayKeys && h.arrayKeys.forEach((S, u) => {
-      const n = S.split(".").slice(1), l = y[u];
-      l !== void 0 && ye(
+    lastServerSync: n || Date.now()
+  }), Array.isArray(c)) {
+    const s = D(e, t);
+    s?.arrayKeys && s.arrayKeys.forEach((u, i) => {
+      const S = [...t, u], r = c[i];
+      r !== void 0 && ge(
         e,
-        n,
-        l,
-        m
+        S,
+        r,
+        n
       );
     });
-  } else y && typeof y == "object" && y.constructor === Object && Object.keys(y).forEach((h) => {
-    const S = [...a, h], u = y[h];
-    ye(e, S, u, m);
+  } else c && typeof c == "object" && c.constructor === Object && Object.keys(c).forEach((s) => {
+    const u = [...t, s], i = c[s];
+    ge(e, u, i, n);
+  });
+}
+let Se = [], Te = !1;
+function ot() {
+  Te || (Te = !0, queueMicrotask(ut));
+}
+function at(e, t, c) {
+  const n = I.getState().getShadowValue(e, t), d = X(c) ? c(n) : c;
+  Be(e, t, d), fe(e, t, { bubble: !0 });
+  const s = D(e, t);
+  return {
+    type: "update",
+    oldValue: n,
+    newValue: d,
+    shadowMeta: s
+  };
+}
+function st(e, t) {
+  e?.signals?.length && e.signals.forEach(({ parentId: c, position: n, effect: d }) => {
+    const s = document.querySelector(`[data-parent-id="${c}"]`);
+    if (!s) return;
+    const u = Array.from(s.childNodes);
+    if (!u[n]) return;
+    let i = t;
+    if (d && t !== null)
+      try {
+        i = new Function("state", `return (${d})(state)`)(
+          t
+        );
+      } catch (S) {
+        console.error("Error evaluating effect function:", S);
+      }
+    i !== null && typeof i == "object" && (i = JSON.stringify(i)), u[n].textContent = String(i ?? "");
   });
 }
-let ce = /* @__PURE__ */ new Map(), me = !1;
-function We(e, {
-  stateKey: a,
-  localStorage: y,
-  formElements: m,
-  reactiveDeps: v,
-  reactiveType: I,
-  componentId: h,
-  defaultState: S,
-  syncUpdate: u,
-  dependencies: n,
+function it(e, t, c) {
+  const n = D(e, []);
+  if (!n?.components)
+    return /* @__PURE__ */ new Set();
+  const d = /* @__PURE__ */ new Set();
+  if (c.type === "update") {
+    let s = [...t];
+    for (; ; ) {
+      const u = D(e, s);
+      if (u?.pathComponents && u.pathComponents.forEach((i) => {
+        const S = n.components?.get(i);
+        S && ((Array.isArray(S.reactiveType) ? S.reactiveType : [S.reactiveType || "component"]).includes("none") || d.add(S));
+      }), s.length === 0) break;
+      s.pop();
+    }
+    c.newValue && typeof c.newValue == "object" && !Le(c.newValue) && xe(c.newValue, c.oldValue).forEach((i) => {
+      const S = i.split("."), r = [...t, ...S], l = D(e, r);
+      l?.pathComponents && l.pathComponents.forEach((M) => {
+        const _ = n.components?.get(M);
+        _ && ((Array.isArray(_.reactiveType) ? _.reactiveType : [_.reactiveType || "component"]).includes("none") || d.add(_));
+      });
+    });
+  } else if (c.type === "insert" || c.type === "cut") {
+    const s = c.type === "insert" ? t : t.slice(0, -1), u = D(e, s);
+    u?.pathComponents && u.pathComponents.forEach((i) => {
+      const S = n.components?.get(i);
+      S && d.add(S);
+    });
+  }
+  return n.components.forEach((s, u) => {
+    if (d.has(s))
+      return;
+    const i = Array.isArray(s.reactiveType) ? s.reactiveType : [s.reactiveType || "component"];
+    if (i.includes("all"))
+      d.add(s);
+    else if (i.includes("deps") && s.depsFunction) {
+      const S = F(e, []), r = s.depsFunction(S);
+      (r === !0 || Array.isArray(r) && !oe(s.prevDeps, r)) && (s.prevDeps = r, d.add(s));
+    }
+  }), d;
+}
+function ct(e, t, c) {
+  let n;
+  if (X(c)) {
+    const { value: s } = K(e, t);
+    n = c({ state: s, uuid: ee() });
+  } else
+    n = c;
+  Ce(e, t, n), fe(e, t, { bubble: !0 });
+  const d = D(e, t);
+  if (d?.arrayKeys) {
+    const s = d.arrayKeys[d.arrayKeys.length - 1];
+    if (s) {
+      const u = s.split(".").slice(1);
+      fe(e, u, { bubble: !1 });
+    }
+  }
+  return { type: "insert", newValue: n, shadowMeta: d };
+}
+function lt(e, t) {
+  const c = t.slice(0, -1), n = F(e, t);
+  return We(e, t), fe(e, c, { bubble: !0 }), { type: "cut", oldValue: n, parentPath: c };
+}
+function ut() {
+  const e = /* @__PURE__ */ new Set(), t = [], c = [];
+  for (const n of Se) {
+    if (n.status && n.updateType) {
+      c.push(n);
+      continue;
+    }
+    const d = n, s = d.type === "cut" ? null : d.newValue;
+    d.shadowMeta?.signals?.length > 0 && t.push({ shadowMeta: d.shadowMeta, displayValue: s }), it(
+      d.stateKey,
+      d.path,
+      d
+    ).forEach((i) => {
+      e.add(i);
+    });
+  }
+  c.length > 0 && Ye(c), t.forEach(({ shadowMeta: n, displayValue: d }) => {
+    st(n, d);
+  }), e.forEach((n) => {
+    n.forceUpdate();
+  }), Se = [], Te = !1;
+}
+function dt(e, t, c, n) {
+  return (s, u, i, S) => {
+    d(e, u, s, i);
+  };
+  function d(s, u, i, S) {
+    let r;
+    switch (S.updateType) {
+      case "update":
+        r = at(s, u, i);
+        break;
+      case "insert":
+        r = ct(s, u, i);
+        break;
+      case "cut":
+        r = lt(s, u);
+        break;
+    }
+    r.stateKey = s, r.path = u, Se.push(r), ot();
+    const l = {
+      timeStamp: Date.now(),
+      stateKey: s,
+      path: u,
+      updateType: S.updateType,
+      status: "new",
+      oldValue: r.oldValue,
+      newValue: r.newValue ?? null
+    };
+    Se.push(l), r.newValue !== void 0 && rt(
+      r.newValue,
+      s,
+      n.current,
+      c
+    ), n.current?.middleware && n.current.middleware({ update: l }), S.sync !== !1 && t.current?.connected && t.current.updateState({ operation: l });
+  }
+}
+function ft(e, {
+  stateKey: t,
+  localStorage: c,
+  formElements: n,
+  reactiveDeps: d,
+  reactiveType: s,
+  componentId: u,
+  defaultState: i,
+  syncUpdate: S,
+  dependencies: r,
   serverState: l,
-  __useSync: V
+  __useSync: M
 } = {}) {
-  console.time("useCogsStateFn top");
-  const [j, U] = Q({}), { sessionId: O } = _e();
-  let B = !a;
-  const [f] = Q(a ?? te()), K = z(h ?? te()), L = z(
+  const [_, C] = J({}), { sessionId: U } = ke();
+  let j = !t;
+  const [w] = J(t ?? ee()), Y = B(u ?? ee()), f = B(
     null
   );
-  L.current = ae(f) ?? null, Z(() => {
-    if (u && u.stateKey === f && u.path?.[0]) {
-      const c = `${u.stateKey}:${u.path.join(".")}`;
-      t.getState().setSyncInfo(c, {
-        timeStamp: u.timeStamp,
-        userId: u.userId
+  f.current = G(w) ?? null, q(() => {
+    if (S && S.stateKey === w && S.path?.[0]) {
+      const m = `${S.stateKey}:${S.path.join(".")}`;
+      Qe(m, {
+        timeStamp: S.timeStamp,
+        userId: S.userId
       });
     }
-  }, [u]);
-  const g = oe(
-    (c) => {
-      const s = c ? { ...ae(f), ...c } : ae(f), p = s?.defaultState || S || e;
-      if (s?.serverState?.status === "success" && s?.serverState?.data !== void 0)
+  }, [S]);
+  const R = ae(
+    (m) => {
+      const p = m ? { ...G(w), ...m } : G(w), T = p?.defaultState || i || e;
+      if (p?.serverState?.status === "success" && p?.serverState?.data !== void 0)
         return {
-          value: s.serverState.data,
+          value: p.serverState.data,
           source: "server",
-          timestamp: s.serverState.timestamp || Date.now()
+          timestamp: p.serverState.timestamp || Date.now()
         };
-      if (s?.localStorage?.key && O) {
-        const b = ee(s.localStorage.key) ? s.localStorage.key(p) : s.localStorage.key, A = fe(
-          `${O}-${f}-${b}`
+      if (p?.localStorage?.key && U) {
+        const E = X(p.localStorage.key) ? p.localStorage.key(T) : p.localStorage.key, b = me(
+          `${U}-${w}-${E}`
         );
-        if (A && A.lastUpdated > (s?.serverState?.timestamp || 0))
+        if (b && b.lastUpdated > (p?.serverState?.timestamp || 0))
           return {
-            value: A.state,
+            value: b.state,
             source: "localStorage",
-            timestamp: A.lastUpdated
+            timestamp: b.lastUpdated
           };
       }
       return {
-        value: p || e,
+        value: T || e,
         source: "default",
         timestamp: Date.now()
       };
     },
-    [f, S, e, O]
+    [w, i, e, U]
   );
-  Z(() => {
-    t.getState().setServerStateUpdate(f, l);
-  }, [l, f]), Z(() => t.getState().subscribeToPath(f, (i) => {
-    if (i?.type === "SERVER_STATE_UPDATE") {
-      const s = i.serverState;
-      if (console.log("SERVER_STATE_UPDATE", i), s?.status === "success" && s.data !== void 0) {
-        ge(f, { serverState: s });
-        const w = typeof s.merge == "object" ? s.merge : s.merge === !0 ? {} : null, b = t.getState().getShadowValue(f), A = s.data;
-        if (w && Array.isArray(b) && Array.isArray(A)) {
-          const P = w.key, N = new Set(
-            b.map((H) => H[P])
-          ), F = A.filter((H) => !N.has(H[P]));
-          F.length > 0 && F.forEach((H) => {
-            t.getState().insertShadowArrayElement(f, [], H);
-            const W = t.getState().getShadowMetadata(f, []);
-            if (W?.arrayKeys) {
-              const C = W.arrayKeys[W.arrayKeys.length - 1];
-              if (C) {
-                const k = C.split(".").slice(1);
-                t.getState().setShadowMetadata(f, k, {
-                  isDirty: !1,
-                  stateSource: "server",
-                  lastServerSync: s.timestamp || Date.now()
-                });
-                const R = t.getState().getShadowValue(C);
-                R && typeof R == "object" && !Array.isArray(R) && Object.keys(R).forEach((T) => {
-                  const M = [...k, T];
-                  t.getState().setShadowMetadata(f, M, {
-                    isDirty: !1,
-                    stateSource: "server",
-                    lastServerSync: s.timestamp || Date.now()
-                  });
-                });
-              }
-            }
-          });
-        } else
-          t.getState().initializeShadowState(f, A), ye(
-            f,
-            [],
-            A,
-            s.timestamp
+  q(() => {
+    qe(w, l);
+  }, [l, w]), q(() => I.getState().subscribeToPath(w, (h) => {
+    if (h?.type === "SERVER_STATE_UPDATE") {
+      const p = h.serverState;
+      if (p?.status !== "success" || p.data === void 0)
+        return;
+      console.log(
+        "✅ SERVER_STATE_UPDATE received with data:",
+        p
+      ), pe(w, { serverState: p });
+      const T = typeof p.merge == "object" ? p.merge : p.merge === !0 ? { strategy: "append" } : null, A = F(w, []), E = p.data;
+      if (T && T.strategy === "append" && "key" in T && // Type guard for key
+      Array.isArray(A) && Array.isArray(E)) {
+        const b = T.key;
+        if (!b) {
+          console.error(
+            "CogsState: Merge strategy 'append' requires a 'key' field."
           );
-        const E = t.getState().getShadowMetadata(f, []);
-        t.getState().setShadowMetadata(f, [], {
-          ...E,
-          stateSource: "server",
-          lastServerSync: s.timestamp || Date.now(),
-          isDirty: !1
+          return;
+        }
+        console.log("SERVER_STATE_UPDATE 2");
+        const N = new Set(
+          A.map((W) => W[b])
+        ), V = E.filter(
+          (W) => !N.has(W[b])
+        );
+        V.length > 0 && V.forEach((W) => {
+          Ce(w, [], W);
         });
-      }
+        const O = F(w, []);
+        ge(
+          w,
+          [],
+          O,
+          p.timestamp
+        );
+      } else
+        ce(w, E), ge(
+          w,
+          [],
+          E,
+          p.timestamp
+        );
     }
-  }), [f, g]), Z(() => {
-    const c = t.getState().getShadowMetadata(f, []);
-    if (c && c.stateSource)
+  }), [w, R]), q(() => {
+    const m = I.getState().getShadowMetadata(w, []);
+    if (m && m.stateSource)
       return;
-    const i = ae(f);
-    if (i?.defaultState !== void 0 || S !== void 0) {
-      const s = i?.defaultState || S;
-      i?.defaultState || ge(f, {
-        defaultState: s
+    const h = G(w), p = {
+      syncEnabled: !!v && !!y,
+      validationEnabled: !!(h?.validation?.zodSchemaV4 || h?.validation?.zodSchemaV3),
+      localStorageEnabled: !!h?.localStorage?.key
+    };
+    if (x(w, [], {
+      ...m,
+      features: p
+    }), h?.defaultState !== void 0 || i !== void 0) {
+      const T = h?.defaultState || i;
+      h?.defaultState || pe(w, {
+        defaultState: T
       });
-      const { value: p, source: w, timestamp: b } = g();
-      t.getState().initializeShadowState(f, p), t.getState().setShadowMetadata(f, [], {
-        stateSource: w,
-        lastServerSync: w === "server" ? b : void 0,
+      const { value: A, source: E, timestamp: b } = R();
+      ce(w, A), x(w, [], {
+        stateSource: E,
+        lastServerSync: E === "server" ? b : void 0,
         isDirty: !1,
-        baseServerState: w === "server" ? p : void 0
-      }), ve(f);
+        baseServerState: E === "server" ? A : void 0
+      }), be(w);
     }
-  }, [f, ...n || []]), le(() => {
-    B && ge(f, {
-      formElements: m,
-      defaultState: S,
-      localStorage: y,
-      middleware: L.current?.middleware
+  }, [w, ...r || []]), ie(() => {
+    j && pe(w, {
+      formElements: n,
+      defaultState: i,
+      localStorage: c,
+      middleware: f.current?.middleware
     });
-    const c = `${f}////${K.current}`, i = t.getState().getShadowMetadata(f, []), s = i?.components || /* @__PURE__ */ new Map();
-    return s.set(c, {
-      forceUpdate: () => U({}),
-      reactiveType: I ?? ["component", "deps"],
+    const m = `${w}////${Y.current}`, h = D(w, []), p = h?.components || /* @__PURE__ */ new Map();
+    return p.set(m, {
+      forceUpdate: () => C({}),
+      reactiveType: s ?? ["component"],
       paths: /* @__PURE__ */ new Set(),
-      depsFunction: v || void 0,
-      deps: v ? v(t.getState().getShadowValue(f)) : [],
-      prevDeps: v ? v(t.getState().getShadowValue(f)) : []
-    }), t.getState().setShadowMetadata(f, [], {
-      ...i,
-      components: s
-    }), U({}), () => {
-      const p = t.getState().getShadowMetadata(f, []), w = p?.components?.get(c);
-      w?.paths && w.paths.forEach((b) => {
-        const E = b.split(".").slice(1), P = t.getState().getShadowMetadata(f, E);
-        P?.pathComponents && P.pathComponents.size === 0 && (delete P.pathComponents, t.getState().setShadowMetadata(f, E, P));
-      }), p?.components && t.getState().setShadowMetadata(f, [], p);
+      depsFunction: d || void 0,
+      deps: d ? d(F(w, [])) : [],
+      prevDeps: d ? d(F(w, [])) : []
+    }), x(w, [], {
+      ...h,
+      components: p
+    }), C({}), () => {
+      const T = D(w, []), A = T?.components?.get(m);
+      A?.paths && A.paths.forEach((E) => {
+        const N = E.split(".").slice(1), V = I.getState().getShadowMetadata(w, N);
+        V?.pathComponents && V.pathComponents.size === 0 && (delete V.pathComponents, I.getState().setShadowMetadata(w, N, V));
+      }), T?.components && x(w, [], T);
     };
   }, []);
-  const J = z(null);
-  console.timeEnd("useCogsStateFn top");
-  const X = (c, i, s) => {
-    console.time("top of effectiveSetState");
-    const p = [f, ...i].join("."), w = t.getState(), b = w.getShadowMetadata(f, i), A = w.getShadowValue(p);
-    console.timeEnd("top of effectiveSetState"), console.time("top of payload");
-    const E = s.updateType === "insert" && ee(c) ? c({ state: A, uuid: te() }) : ee(c) ? c(A) : c, N = {
-      timeStamp: Date.now(),
-      stateKey: f,
-      path: i,
-      updateType: s.updateType,
-      status: "new",
-      oldValue: A,
-      newValue: E
-    };
-    switch (console.timeEnd("top of payload"), console.time("switch in effectiveSetState"), s.updateType) {
-      case "insert": {
-        w.insertShadowArrayElement(f, i, N.newValue), w.markAsDirty(f, i, { bubble: !0 });
-        const C = b;
-        if (C?.arrayKeys) {
-          const k = C.arrayKeys[C.arrayKeys.length - 1];
-          if (k) {
-            const R = k.split(".").slice(1);
-            w.markAsDirty(f, R, { bubble: !1 });
-          }
-        }
-        break;
-      }
-      case "cut": {
-        const C = i.slice(0, -1);
-        w.removeShadowArrayElement(f, i), w.markAsDirty(f, C, { bubble: !0 });
-        break;
-      }
-      case "update": {
-        w.updateShadowAtPath(f, i, N.newValue), w.markAsDirty(f, i, { bubble: !0 });
-        break;
-      }
-    }
-    console.timeEnd("switch in effectiveSetState");
-    const F = s.sync !== !1;
-    if (console.time("signals"), F && J.current && J.current.connected && J.current.updateState({ operation: N }), b?.signals && b.signals.length > 0) {
-      const C = s.updateType === "cut" ? null : E;
-      b.signals.forEach(({ parentId: k, position: R, effect: T }) => {
-        const M = document.querySelector(`[data-parent-id="${k}"]`);
-        if (M) {
-          const $ = Array.from(M.childNodes);
-          if ($[R]) {
-            let D = C;
-            if (T && C !== null)
-              try {
-                D = new Function(
-                  "state",
-                  `return (${T})(state)`
-                )(C);
-              } catch (_) {
-                console.error("Error evaluating effect function:", _);
-              }
-            D != null && typeof D == "object" && (D = JSON.stringify(D)), $[R].textContent = String(D ?? "");
-          }
-        }
-      });
-    }
-    if (s.updateType === "insert" && b?.mapWrappers && b.mapWrappers.length > 0) {
-      const C = w.getShadowMetadata(f, i)?.arrayKeys || [], k = C[C.length - 1], R = w.getShadowValue(k), T = w.getShadowValue(
-        [f, ...i].join(".")
-      );
-      if (!k || R === void 0) return;
-      b.mapWrappers.forEach((M) => {
-        let $ = !0, D = -1;
-        if (M.meta?.transforms && M.meta.transforms.length > 0) {
-          for (const _ of M.meta.transforms)
-            if (_.type === "filter" && !_.fn(R, -1)) {
-              $ = !1;
-              break;
-            }
-          if ($) {
-            const _ = pe(
-              f,
-              i,
-              M.meta.transforms
-            ), q = M.meta.transforms.find(
-              (x) => x.type === "sort"
-            );
-            if (q) {
-              const x = _.map((G) => ({
-                key: G,
-                value: w.getShadowValue(G)
-              }));
-              x.push({ key: k, value: R }), x.sort((G, Y) => q.fn(G.value, Y.value)), D = x.findIndex(
-                (G) => G.key === k
-              );
-            } else
-              D = _.length;
-          }
-        } else
-          $ = !0, D = C.length - 1;
-        if ($ && M.containerRef && M.containerRef.isConnected) {
-          const _ = document.createElement("div");
-          _.setAttribute("data-item-path", k);
-          const q = Array.from(M.containerRef.children);
-          D >= 0 && D < q.length ? M.containerRef.insertBefore(
-            _,
-            q[D]
-          ) : M.containerRef.appendChild(_);
-          const x = be(_), G = te(), Y = k.split(".").slice(1), ie = M.rebuildStateShape({
-            path: M.path,
-            currentState: T,
-            componentId: M.componentId,
-            meta: M.meta
-          });
-          x.render(
-            se(we, {
-              stateKey: f,
-              itemComponentId: G,
-              itemPath: Y,
-              localIndex: D,
-              arraySetter: ie,
-              rebuildStateShape: M.rebuildStateShape,
-              renderFn: M.mapFn
-            })
-          );
-        }
-      });
-    }
-    if (s.updateType === "cut") {
-      const C = i.slice(0, -1), k = w.getShadowMetadata(f, C);
-      k?.mapWrappers && k.mapWrappers.length > 0 && k.mapWrappers.forEach((R) => {
-        if (R.containerRef && R.containerRef.isConnected) {
-          const T = R.containerRef.querySelector(
-            `[data-item-path="${p}"]`
-          );
-          T && T.remove();
-        }
-      });
-    }
-    console.timeEnd("signals"), console.time("notify");
-    const H = w.getShadowMetadata(f, []), W = /* @__PURE__ */ new Set();
-    if (H?.components) {
-      if (s.updateType === "update") {
-        let C = [...i];
-        for (; ; ) {
-          const k = w.getShadowMetadata(f, C);
-          if (k?.pathComponents && k.pathComponents.forEach((R) => {
-            if (W.has(R))
-              return;
-            const T = H.components?.get(R);
-            T && ((Array.isArray(T.reactiveType) ? T.reactiveType : [T.reactiveType || "component"]).includes("none") || (T.forceUpdate(), W.add(R)));
-          }), C.length === 0)
-            break;
-          C.pop();
-        }
-        E && typeof E == "object" && !Ie(E) && A && typeof A == "object" && !Ie(A) && Ae(E, A).forEach((R) => {
-          const T = R.split("."), M = [...i, ...T], $ = w.getShadowMetadata(f, M);
-          $?.pathComponents && $.pathComponents.forEach((D) => {
-            if (W.has(D))
-              return;
-            const _ = H.components?.get(D);
-            _ && ((Array.isArray(_.reactiveType) ? _.reactiveType : [_.reactiveType || "component"]).includes("none") || (_.forceUpdate(), W.add(D)));
-          });
-        });
-      } else if (s.updateType === "insert" || s.updateType === "cut") {
-        const C = s.updateType === "insert" ? i : i.slice(0, -1), k = w.getShadowMetadata(f, C);
-        if (k?.signals && k.signals.length > 0) {
-          const R = [f, ...C].join("."), T = w.getShadowValue(R);
-          k.signals.forEach(({ parentId: M, position: $, effect: D }) => {
-            const _ = document.querySelector(
-              `[data-parent-id="${M}"]`
-            );
-            if (_) {
-              const q = Array.from(_.childNodes);
-              if (q[$]) {
-                let x = T;
-                if (D)
-                  try {
-                    x = new Function(
-                      "state",
-                      `return (${D})(state)`
-                    )(T);
-                  } catch (G) {
-                    console.error("Error evaluating effect function:", G), x = T;
-                  }
-                x != null && typeof x == "object" && (x = JSON.stringify(x)), q[$].textContent = String(x ?? "");
-              }
-            }
-          });
-        }
-        k?.pathComponents && k.pathComponents.forEach((R) => {
-          if (!W.has(R)) {
-            const T = H.components?.get(R);
-            T && (T.forceUpdate(), W.add(R));
-          }
-        });
-      }
-      H.components.forEach((C, k) => {
-        if (W.has(k))
-          return;
-        const R = Array.isArray(C.reactiveType) ? C.reactiveType : [C.reactiveType || "component"];
-        if (R.includes("all")) {
-          C.forceUpdate(), W.add(k);
-          return;
-        }
-        if (R.includes("deps") && C.depsFunction) {
-          const T = w.getShadowValue(f), M = C.depsFunction(T);
-          let $ = !1;
-          M === !0 ? $ = !0 : Array.isArray(M) && (re(C.prevDeps, M) || (C.prevDeps = M, $ = !0)), $ && (C.forceUpdate(), W.add(k));
-        }
-      }), W.clear(), console.timeEnd("notify"), console.time("end stuff"), je(f, N), Le(
-        E,
-        f,
-        L.current,
-        O
-      ), L.current?.middleware && L.current.middleware({
-        update: N
-      }), console.timeEnd("end stuff");
-    }
-  };
-  t.getState().initialStateGlobal[f] || Ce(f, e);
-  const r = ue(() => {
-    console.time("createProxyHandler");
-    const c = Pe(
-      f,
-      X,
-      K.current,
-      O
-    );
-    return console.timeEnd("createProxyHandler"), c;
-  }, [f, O]), o = V, d = L.current?.syncOptions;
-  return o && (J.current = o(
-    r,
-    d ?? {}
-  )), r;
-}
-function xe(e) {
-  return !e || e.length === 0 ? "" : e.map(
-    (a) => `${a.type}${JSON.stringify(a.dependencies || [])}`
-  ).join("");
+  const a = B(null), o = dt(
+    w,
+    a,
+    U,
+    f
+  );
+  I.getState().initialStateGlobal[w] || Pe(w, e);
+  const g = we(() => Oe(
+    w,
+    o,
+    Y.current,
+    U
+  ), [w, U]), v = M, y = f.current?.syncOptions;
+  return v && (a.current = v(
+    g,
+    y ?? {}
+  )), g;
 }
-const pe = (e, a, y) => {
-  let m = t.getState().getShadowMetadata(e, a)?.arrayKeys || [];
-  if (!y || y.length === 0)
-    return m;
-  let v = m.map((I) => ({
-    key: I,
-    value: t.getState().getShadowValue(I)
-  }));
-  for (const I of y)
-    I.type === "filter" ? v = v.filter(
-      ({ value: h }, S) => I.fn(h, S)
-    ) : I.type === "sort" && v.sort((h, S) => I.fn(h.value, S.value));
-  return v.map(({ key: I }) => I);
-}, Te = (e, a, y) => {
-  const m = `${e}////${a}`, { addPathComponent: v, getShadowMetadata: I } = t.getState(), S = I(e, [])?.components?.get(m);
-  !S || S.reactiveType === "none" || !(Array.isArray(S.reactiveType) ? S.reactiveType : [S.reactiveType]).includes("component") || v(e, y, m);
-}, de = (e, a, y) => {
-  const m = t.getState(), v = m.getShadowMetadata(e, []), I = /* @__PURE__ */ new Set();
-  v?.components && v.components.forEach((S, u) => {
-    (Array.isArray(S.reactiveType) ? S.reactiveType : [S.reactiveType || "component"]).includes("all") && (S.forceUpdate(), I.add(u));
-  }), m.getShadowMetadata(e, [...a, "getSelected"])?.pathComponents?.forEach((S) => {
-    v?.components?.get(S)?.forceUpdate();
+const gt = (e, t, c) => {
+  let n = D(e, t)?.arrayKeys || [];
+  if (console.log("ids", n), !c || c.length === 0)
+    return n;
+  for (const d of c)
+    if (d.type === "filter") {
+      const s = [];
+      n.forEach((u, i) => {
+        const S = F(e, [...t, u]);
+        d.fn(S, i) && s.push(u);
+      }), n = s;
+    } else d.type === "sort" && n.sort((s, u) => {
+      const i = F(e, [...t, s]), S = F(e, [...t, u]);
+      return d.fn(i, S);
+    });
+  return n;
+}, Ve = (e, t, c) => {
+  const n = `${e}////${t}`, s = D(e, [])?.components?.get(n);
+  !s || s.reactiveType === "none" || !(Array.isArray(s.reactiveType) ? s.reactiveType : [s.reactiveType]).includes("component") || Je(e, c, n);
+}, ue = (e, t, c) => {
+  const n = I.getState(), d = n.getShadowMetadata(e, []), s = /* @__PURE__ */ new Set();
+  d?.components && d.components.forEach((i, S) => {
+    (Array.isArray(i.reactiveType) ? i.reactiveType : [i.reactiveType || "component"]).includes("all") && (i.forceUpdate(), s.add(S));
+  }), n.getShadowMetadata(e, [...t, "getSelected"])?.pathComponents?.forEach((i) => {
+    d?.components?.get(i)?.forceUpdate();
   });
-  const h = m.getShadowMetadata(e, a);
-  for (let S of h?.arrayKeys || []) {
-    const u = S + ".selected", n = m.getShadowMetadata(
+  const u = n.getShadowMetadata(e, t);
+  for (let i of u?.arrayKeys || []) {
+    const S = i + ".selected", r = n.getShadowMetadata(
       e,
-      u.split(".").slice(1)
+      S.split(".").slice(1)
     );
-    S == y && n?.pathComponents?.forEach((l) => {
-      v?.components?.get(l)?.forceUpdate();
+    i == c && r?.pathComponents?.forEach((l) => {
+      d?.components?.get(l)?.forceUpdate();
     });
   }
 };
-function Pe(e, a, y, m) {
-  const v = /* @__PURE__ */ new Map();
-  console.time("rebuildStateShape Outer");
-  let I = null;
-  function h({
-    path: n = [],
+function K(e, t, c) {
+  const n = D(e, t), d = t.join("."), s = c?.arrayViews?.[d];
+  if (Array.isArray(s) && s.length === 0)
+    return {
+      shadowMeta: n,
+      value: [],
+      arrayKeys: n?.arrayKeys
+    };
+  const u = F(e, t, s);
+  return {
+    shadowMeta: n,
+    value: u,
+    arrayKeys: n?.arrayKeys
+  };
+}
+function Oe(e, t, c, n) {
+  const d = /* @__PURE__ */ new Map(), s = /* @__PURE__ */ new Set([
+    "sync",
+    "getStatus",
+    "removeStorage",
+    "showValidationErrors",
+    "getSelected",
+    "getSelectedIndex",
+    "clearSelected",
+    "useVirtualView",
+    "stateMap",
+    "$stateMap",
+    "stateFind",
+    "stateFilter",
+    "stateSort",
+    "stream",
+    "stateList",
+    "stateFlattenOn",
+    "index",
+    "last",
+    "insert",
+    "uniqueInsert",
+    "cut",
+    "cutSelected",
+    "cutByValue",
+    "toggleByValue",
+    "findWith",
+    "cutThis",
+    "get",
+    "getState",
+    "$derive",
+    "$get",
+    "lastSynced",
+    "getLocalStorage",
+    "isSelected",
+    "setSelected",
+    "toggleSelected",
+    "_componentId",
+    "addZodValidation",
+    "clearZodValidation",
+    "applyJsonPatch",
+    "getComponents",
+    "getAllFormRefs",
+    "getFormRef",
+    "validationWrapper",
+    "_stateKey",
+    "_path",
+    "update",
+    "toggle",
+    "formElement"
+    // Add ANY other method names here
+  ]);
+  function u({
+    path: r = [],
     meta: l,
-    componentId: V
+    componentId: M
   }) {
-    console.time("rebuildStateShape Inner");
-    const j = l ? JSON.stringify(l.validIds || l.transforms) : "", U = n.join(".") + ":" + j;
-    if (console.log("PROXY CACHE KEY ", U), v.has(U))
-      return console.log("PROXY CACHE HIT"), v.get(U);
-    const O = [e, ...n].join("."), B = function() {
-      return t().getShadowValue(e, n);
-    }, f = {
-      apply(L, g, J) {
-      },
-      get(L, g) {
-        if (n.length === 0 && (I = `Recursion-${Math.random()}`, console.time(I)), g === "_rebuildStateShape")
-          return h;
-        if (Object.getOwnPropertyNames(S).includes(g) && n.length === 0)
-          return S[g];
-        if (g === "getDifferences")
-          return () => {
-            const r = t.getState().getShadowMetadata(e, []), o = t.getState().getShadowValue(e);
-            let d;
-            return r?.stateSource === "server" && r.baseServerState ? d = r.baseServerState : d = t.getState().initialStateGlobal[e], Ae(o, d);
-          };
-        if (g === "sync" && n.length === 0)
+    const _ = l ? JSON.stringify(l.arrayViews || l.transforms) : "", C = r.join(".") + ":" + _;
+    if (d.has(C))
+      return d.get(C);
+    const U = [e, ...r].join("."), j = {
+      get(Y, f) {
+        if (r.length === 0 && f in i)
+          return i[f];
+        if (!s.has(f)) {
+          const a = [...r, f];
+          return u({
+            path: a,
+            componentId: M,
+            meta: l
+          });
+        }
+        if (f === "_rebuildStateShape")
+          return u;
+        if (f === "sync" && r.length === 0)
           return async function() {
-            const r = t.getState().getInitialOptions(e), o = r?.sync;
+            const a = I.getState().getInitialOptions(e), o = a?.sync;
             if (!o)
               return console.error(`No mutation defined for state key "${e}"`), { success: !1, error: "No mutation defined" };
-            const d = t.getState().getShadowValue(e, []), c = r?.validation?.key;
+            const g = I.getState().getShadowValue(e, []), v = a?.validation?.key;
             try {
-              const i = await o.action(d);
-              if (i && !i.success && i.errors, i?.success) {
-                const s = t.getState().getShadowMetadata(e, []);
-                t.getState().setShadowMetadata(e, [], {
-                  ...s,
+              const y = await o.action(g);
+              if (y && !y.success && y.errors, y?.success) {
+                const m = I.getState().getShadowMetadata(e, []);
+                x(e, [], {
+                  ...m,
                   isDirty: !1,
                   lastServerSync: Date.now(),
                   stateSource: "server",
-                  baseServerState: d
+                  baseServerState: g
                   // Update base server state
-                }), o.onSuccess && o.onSuccess(i.data);
-              } else !i?.success && o.onError && o.onError(i.error);
-              return i;
-            } catch (i) {
-              return o.onError && o.onError(i), { success: !1, error: i };
+                }), o.onSuccess && o.onSuccess(y.data);
+              } else !y?.success && o.onError && o.onError(y.error);
+              return y;
+            } catch (y) {
+              return o.onError && o.onError(y), { success: !1, error: y };
             }
           };
-        if (g === "_status" || g === "getStatus") {
-          const r = () => {
-            const o = t.getState().getShadowMetadata(e, n), d = t.getState().getShadowValue(O);
-            return o?.isDirty === !0 ? "dirty" : o?.isDirty === !1 || o?.stateSource === "server" ? "synced" : o?.stateSource === "localStorage" ? "restored" : o?.stateSource === "default" ? "fresh" : t.getState().getShadowMetadata(e, [])?.stateSource === "server" && !o?.isDirty ? "synced" : d !== void 0 && !o ? "fresh" : "unknown";
+        if (f === "_status" || f === "getStatus") {
+          const a = () => {
+            const { shadowMeta: o, value: g } = K(e, r, l);
+            return o?.isDirty === !0 ? "dirty" : o?.stateSource === "server" || o?.isDirty === !1 ? "synced" : o?.stateSource === "localStorage" ? "restored" : o?.stateSource === "default" || g !== void 0 && !o ? "fresh" : "unknown";
           };
-          return g === "_status" ? r() : r;
+          return f === "_status" ? a() : a;
         }
-        if (g === "removeStorage")
+        if (f === "removeStorage")
           return () => {
-            const r = t.getState().initialStateGlobal[e], o = ae(e), d = ee(o?.localStorage?.key) ? o.localStorage.key(r) : o?.localStorage?.key, c = `${m}-${e}-${d}`;
-            c && localStorage.removeItem(c);
+            const a = I.getState().initialStateGlobal[e], o = G(e), g = X(o?.localStorage?.key) ? o.localStorage.key(a) : o?.localStorage?.key, v = `${n}-${e}-${g}`;
+            v && localStorage.removeItem(v);
           };
-        if (g === "showValidationErrors")
+        if (f === "showValidationErrors")
           return () => {
-            const r = t.getState().getShadowMetadata(e, n);
-            return r?.validation?.status === "VALIDATION_FAILED" && r.validation.message ? [r.validation.message] : [];
+            const { shadowMeta: a } = K(e, r, l);
+            return a?.validation?.status === "INVALID" && a.validation.errors.length > 0 ? a.validation.errors.filter((o) => o.severity === "error").map((o) => o.message) : [];
           };
-        if (g === "getSelected")
+        if (f === "getSelected")
           return () => {
-            const r = e + "." + n.join(".");
-            Te(e, V, [
-              ...n,
+            const a = [e, ...r].join(".");
+            Ve(e, M, [
+              ...r,
               "getSelected"
             ]);
-            const o = t.getState().selectedIndicesMap;
-            if (!o || !o.has(r))
+            const o = I.getState().selectedIndicesMap.get(a);
+            if (!o)
               return;
-            const d = o.get(r);
-            if (!(l?.validIds && !l.validIds.includes(d) || !t.getState().getShadowValue(d)))
-              return h({
-                path: d.split(".").slice(1),
-                componentId: V
+            const g = r.join("."), v = l?.arrayViews?.[g], y = o.split(".").pop();
+            if (!(v && !v.includes(y) || F(
+              e,
+              o.split(".").slice(1)
+            ) === void 0))
+              return u({
+                path: o.split(".").slice(1),
+                componentId: M,
+                meta: l
               });
           };
-        if (g === "getSelectedIndex")
-          return () => t.getState().getSelectedIndex(
-            e + "." + n.join("."),
-            l?.validIds
-          );
-        if (g === "clearSelected")
-          return de(e, n), () => {
-            t.getState().clearSelectedIndex({
-              arrayKey: e + "." + n.join(".")
+        if (f === "getSelectedIndex")
+          return () => {
+            const a = e + "." + r.join(".");
+            r.join(".");
+            const o = I.getState().selectedIndicesMap.get(a);
+            if (!o)
+              return -1;
+            const { keys: g } = Z(e, r, l);
+            if (!g)
+              return -1;
+            const v = o.split(".").pop();
+            return g.indexOf(v);
+          };
+        if (f === "clearSelected")
+          return ue(e, r), () => {
+            Xe({
+              arrayKey: e + "." + r.join(".")
             });
           };
-        if (g === "useVirtualView")
-          return (r) => {
+        if (f === "useVirtualView")
+          return (a) => {
             const {
               itemHeight: o = 50,
-              overscan: d = 6,
-              stickToBottom: c = !1,
-              scrollStickTolerance: i = 75
-            } = r, s = z(null), [p, w] = Q({
+              overscan: g = 6,
+              stickToBottom: v = !1,
+              scrollStickTolerance: y = 75
+            } = a, m = B(null), [h, p] = J({
               startIndex: 0,
               endIndex: 10
-            }), [b, A] = Q({}), E = z(!0), P = z({
+            }), [T, A] = J({}), E = B(!0), b = B({
               isUserScrolling: !1,
               lastScrollTop: 0,
               scrollUpCount: 0,
               isNearBottom: !0
-            }), N = z(
+            }), N = B(
               /* @__PURE__ */ new Map()
             );
-            le(() => {
-              if (!c || !s.current || P.current.isUserScrolling)
+            ie(() => {
+              if (!v || !m.current || b.current.isUserScrolling)
                 return;
-              const T = s.current;
-              T.scrollTo({
-                top: T.scrollHeight,
+              const k = m.current;
+              k.scrollTo({
+                top: k.scrollHeight,
                 behavior: E.current ? "instant" : "smooth"
               });
-            }, [b, c]);
-            const F = t.getState().getShadowMetadata(e, n)?.arrayKeys || [], { totalHeight: H, itemOffsets: W } = ue(() => {
-              let T = 0;
-              const M = /* @__PURE__ */ new Map();
-              return (t.getState().getShadowMetadata(e, n)?.arrayKeys || []).forEach((D) => {
-                const _ = D.split(".").slice(1), q = t.getState().getShadowMetadata(e, _)?.virtualizer?.itemHeight || o;
-                M.set(D, {
-                  height: q,
-                  offset: T
-                }), T += q;
-              }), N.current = M, { totalHeight: T, itemOffsets: M };
-            }, [F.length, o]);
-            le(() => {
-              if (c && F.length > 0 && s.current && !P.current.isUserScrolling && E.current) {
-                const T = s.current, M = () => {
-                  if (T.clientHeight > 0) {
-                    const $ = Math.ceil(
-                      T.clientHeight / o
-                    ), D = F.length - 1, _ = Math.max(
+            }, [T, v]);
+            const { arrayKeys: V = [] } = K(e, r, l), { totalHeight: O, itemOffsets: W } = we(() => {
+              let k = 0;
+              const P = /* @__PURE__ */ new Map();
+              return (I.getState().getShadowMetadata(e, r)?.arrayKeys || []).forEach((L) => {
+                const $ = L.split(".").slice(1), z = I.getState().getShadowMetadata(e, $)?.virtualizer?.itemHeight || o;
+                P.set(L, {
+                  height: z,
+                  offset: k
+                }), k += z;
+              }), N.current = P, { totalHeight: k, itemOffsets: P };
+            }, [V.length, o]);
+            ie(() => {
+              if (v && V.length > 0 && m.current && !b.current.isUserScrolling && E.current) {
+                const k = m.current, P = () => {
+                  if (k.clientHeight > 0) {
+                    const H = Math.ceil(
+                      k.clientHeight / o
+                    ), L = V.length - 1, $ = Math.max(
                       0,
-                      D - $ - d
+                      L - H - g
                     );
-                    w({ startIndex: _, endIndex: D }), requestAnimationFrame(() => {
-                      k("instant"), E.current = !1;
+                    p({ startIndex: $, endIndex: L }), requestAnimationFrame(() => {
+                      te("instant"), E.current = !1;
                     });
                   } else
-                    requestAnimationFrame(M);
+                    requestAnimationFrame(P);
                 };
-                M();
+                P();
               }
-            }, [F.length, c, o, d]);
-            const C = oe(() => {
-              const T = s.current;
-              if (!T) return;
-              const M = T.scrollTop, { scrollHeight: $, clientHeight: D } = T, _ = P.current, q = $ - (M + D), x = _.isNearBottom;
-              _.isNearBottom = q <= i, M < _.lastScrollTop ? (_.scrollUpCount++, _.scrollUpCount > 3 && x && (_.isUserScrolling = !0, console.log("User scrolled away from bottom"))) : _.isNearBottom && (_.isUserScrolling = !1, _.scrollUpCount = 0), _.lastScrollTop = M;
-              let G = 0;
-              for (let Y = 0; Y < F.length; Y++) {
-                const ie = F[Y], Se = N.current.get(ie);
-                if (Se && Se.offset + Se.height > M) {
-                  G = Y;
+            }, [V.length, v, o, g]);
+            const le = ae(() => {
+              const k = m.current;
+              if (!k) return;
+              const P = k.scrollTop, { scrollHeight: H, clientHeight: L } = k, $ = b.current, z = H - (P + L), se = $.isNearBottom;
+              $.isNearBottom = z <= y, P < $.lastScrollTop ? ($.scrollUpCount++, $.scrollUpCount > 3 && se && ($.isUserScrolling = !0, console.log("User scrolled away from bottom"))) : $.isNearBottom && ($.isUserScrolling = !1, $.scrollUpCount = 0), $.lastScrollTop = P;
+              let re = 0;
+              for (let Q = 0; Q < V.length; Q++) {
+                const ye = V[Q], he = N.current.get(ye);
+                if (he && he.offset + he.height > P) {
+                  re = Q;
                   break;
                 }
               }
-              if (G !== p.startIndex) {
-                const Y = Math.ceil(D / o);
-                w({
-                  startIndex: Math.max(0, G - d),
+              if (re !== h.startIndex) {
+                const Q = Math.ceil(L / o);
+                p({
+                  startIndex: Math.max(0, re - g),
                   endIndex: Math.min(
-                    F.length - 1,
-                    G + Y + d
+                    V.length - 1,
+                    re + Q + g
                   )
                 });
               }
             }, [
-              F.length,
-              p.startIndex,
+              V.length,
+              h.startIndex,
               o,
-              d,
-              i
+              g,
+              y
             ]);
-            Z(() => {
-              const T = s.current;
-              if (!(!T || !c))
-                return T.addEventListener("scroll", C, {
+            q(() => {
+              const k = m.current;
+              if (!(!k || !v))
+                return k.addEventListener("scroll", le, {
                   passive: !0
                 }), () => {
-                  T.removeEventListener("scroll", C);
+                  k.removeEventListener("scroll", le);
                 };
-            }, [C, c]);
-            const k = oe(
-              (T = "smooth") => {
-                const M = s.current;
-                if (!M) return;
-                P.current.isUserScrolling = !1, P.current.isNearBottom = !0, P.current.scrollUpCount = 0;
-                const $ = () => {
-                  const D = (_ = 0) => {
-                    if (_ > 5) return;
-                    const q = M.scrollHeight, x = M.scrollTop, G = M.clientHeight;
-                    x + G >= q - 1 || (M.scrollTo({
-                      top: q,
-                      behavior: T
+            }, [le, v]);
+            const te = ae(
+              (k = "smooth") => {
+                const P = m.current;
+                if (!P) return;
+                b.current.isUserScrolling = !1, b.current.isNearBottom = !0, b.current.scrollUpCount = 0;
+                const H = () => {
+                  const L = ($ = 0) => {
+                    if ($ > 5) return;
+                    const z = P.scrollHeight, se = P.scrollTop, re = P.clientHeight;
+                    se + re >= z - 1 || (P.scrollTo({
+                      top: z,
+                      behavior: k
                     }), setTimeout(() => {
-                      const Y = M.scrollHeight, ie = M.scrollTop;
-                      (Y !== q || ie + G < Y - 1) && D(_ + 1);
+                      const Q = P.scrollHeight, ye = P.scrollTop;
+                      (Q !== z || ye + re < Q - 1) && L($ + 1);
                     }, 50));
                   };
-                  D();
+                  L();
                 };
-                "requestIdleCallback" in window ? requestIdleCallback($, { timeout: 100 }) : requestAnimationFrame(() => {
-                  requestAnimationFrame($);
+                "requestIdleCallback" in window ? requestIdleCallback(H, { timeout: 100 }) : requestAnimationFrame(() => {
+                  requestAnimationFrame(H);
                 });
               },
               []
             );
-            return Z(() => {
-              if (!c || !s.current) return;
-              const T = s.current, M = P.current;
-              let $;
-              const D = () => {
-                clearTimeout($), $ = setTimeout(() => {
-                  !M.isUserScrolling && M.isNearBottom && k(
+            return q(() => {
+              if (!v || !m.current) return;
+              const k = m.current, P = b.current;
+              let H;
+              const L = () => {
+                clearTimeout(H), H = setTimeout(() => {
+                  !P.isUserScrolling && P.isNearBottom && te(
                     E.current ? "instant" : "smooth"
                   );
                 }, 100);
-              }, _ = new MutationObserver(() => {
-                M.isUserScrolling || D();
+              }, $ = new MutationObserver(() => {
+                P.isUserScrolling || L();
               });
-              _.observe(T, {
+              $.observe(k, {
                 childList: !0,
                 subtree: !0,
                 attributes: !0,
                 attributeFilter: ["style", "class"]
                 // More specific than just 'height'
               });
-              const q = (x) => {
-                x.target instanceof HTMLImageElement && !M.isUserScrolling && D();
+              const z = (se) => {
+                se.target instanceof HTMLImageElement && !P.isUserScrolling && L();
               };
-              return T.addEventListener("load", q, !0), E.current ? setTimeout(() => {
-                k("instant");
-              }, 0) : D(), () => {
-                clearTimeout($), _.disconnect(), T.removeEventListener("load", q, !0);
+              return k.addEventListener("load", z, !0), E.current ? setTimeout(() => {
+                te("instant");
+              }, 0) : L(), () => {
+                clearTimeout(H), $.disconnect(), k.removeEventListener("load", z, !0);
               };
-            }, [c, F.length, k]), {
-              virtualState: ue(() => {
-                const T = t.getState(), M = T.getShadowValue(
-                  [e, ...n].join(".")
-                ), $ = T.getShadowMetadata(e, n)?.arrayKeys || [];
-                M.slice(
-                  p.startIndex,
-                  p.endIndex + 1
-                );
-                const D = $.slice(
-                  p.startIndex,
-                  p.endIndex + 1
+            }, [v, V.length, te]), {
+              virtualState: we(() => {
+                const k = I.getState(), P = k.getShadowValue(e, r), H = k.getShadowMetadata(e, r)?.arrayKeys || [];
+                P.slice(
+                  h.startIndex,
+                  h.endIndex + 1
                 );
-                return h({
-                  path: n,
-                  componentId: V,
-                  meta: { ...l, validIds: D }
+                const L = H.slice(
+                  h.startIndex,
+                  h.endIndex + 1
+                ), $ = r.length > 0 ? r.join(".") : "root";
+                return u({
+                  path: r,
+                  componentId: M,
+                  meta: { ...l, arrayViews: { [$]: L } }
                 });
-              }, [p.startIndex, p.endIndex, F.length]),
+              }, [h.startIndex, h.endIndex, V.length]),
               virtualizerProps: {
                 outer: {
-                  ref: s,
+                  ref: m,
                   style: {
                     overflowY: "auto",
                     height: "100%",
@@ -892,1019 +926,941 @@ function Pe(e, a, y, m) {
                 },
                 inner: {
                   style: {
-                    height: `${H}px`,
+                    height: `${O}px`,
                     position: "relative"
                   }
                 },
                 list: {
                   style: {
-                    transform: `translateY(${N.current.get(F[p.startIndex])?.offset || 0}px)`
+                    transform: `translateY(${N.current.get(V[h.startIndex])?.offset || 0}px)`
                   }
                 }
               },
-              scrollToBottom: k,
-              scrollToIndex: (T, M = "smooth") => {
-                if (s.current && F[T]) {
-                  const $ = N.current.get(F[T])?.offset || 0;
-                  s.current.scrollTo({ top: $, behavior: M });
+              scrollToBottom: te,
+              scrollToIndex: (k, P = "smooth") => {
+                if (m.current && V[k]) {
+                  const H = N.current.get(V[k])?.offset || 0;
+                  m.current.scrollTo({ top: H, behavior: P });
                 }
               }
             };
           };
-        if (g === "stateMap")
-          return (r) => {
-            const [o, d] = Q(
-              l?.validIds ?? t.getState().getShadowMetadata(e, n)?.arrayKeys
-            ), c = t.getState().getShadowValue(O, l?.validIds);
-            if (!o)
-              throw new Error("No array keys found for mapping");
-            const i = h({
-              path: n,
-              componentId: V,
+        if (f === "stateMap")
+          return (a) => {
+            const { value: o, keys: g } = Z(
+              e,
+              r,
+              l
+            );
+            if (!g || !Array.isArray(o))
+              return [];
+            const v = u({
+              path: r,
+              componentId: M,
               meta: l
             });
-            return c.map((s, p) => {
-              const w = o[p]?.split(".").slice(1), b = h({
-                path: w,
-                componentId: V,
+            return o.map((y, m) => {
+              const h = g[m];
+              if (!h) return;
+              const p = [...r, h], T = u({
+                path: p,
+                // This now correctly points to the item in the shadow store.
+                componentId: M,
                 meta: l
               });
-              return r(
-                b,
-                p,
-                i
-              );
+              return a(T, m, v);
             });
           };
-        if (g === "$stateMap")
-          return (r) => se(Be, {
-            proxy: {
-              _stateKey: e,
-              _path: n,
-              _mapFn: r,
-              _meta: l
-            },
-            rebuildStateShape: h
-          });
-        if (g === "stateFind")
-          return (r) => {
-            const o = l?.validIds ?? t.getState().getShadowMetadata(e, n)?.arrayKeys;
-            if (o)
-              for (let d = 0; d < o.length; d++) {
-                const c = o[d];
-                if (!c) continue;
-                const i = t.getState().getShadowValue(c);
-                if (r(i, d)) {
-                  const s = c.split(".").slice(1);
-                  return h({
-                    path: s,
-                    componentId: V,
-                    meta: l
-                    // Pass along meta for potential further chaining
-                  });
-                }
+        if (f === "stateFilter")
+          return (a) => {
+            const o = r.length > 0 ? r.join(".") : "root", { keys: g, value: v } = Z(
+              e,
+              r,
+              l
+            );
+            if (!Array.isArray(v))
+              throw new Error("stateFilter can only be used on arrays");
+            const y = [];
+            return v.forEach((m, h) => {
+              if (a(m, h)) {
+                const p = g[h];
+                p && y.push(p);
               }
-          };
-        if (g === "stateFilter")
-          return (r) => {
-            const o = t.getState().getShadowValue([e, ...n].join("."), l?.validIds);
-            if (!Array.isArray(o)) return [];
-            const d = l?.validIds ?? t.getState().getShadowMetadata(e, n)?.arrayKeys;
-            if (!d)
-              throw new Error("No array keys found for filtering.");
-            const c = [];
-            return o.filter(
-              (i, s) => r(i, s) ? (c.push(d[s]), !0) : !1
-            ), h({
-              path: n,
-              componentId: V,
+            }), u({
+              path: r,
+              componentId: M,
               meta: {
-                validIds: c,
+                ...l,
+                arrayViews: {
+                  ...l?.arrayViews || {},
+                  [o]: y
+                },
                 transforms: [
                   ...l?.transforms || [],
-                  {
-                    type: "filter",
-                    fn: r
-                  }
+                  { type: "filter", fn: a, path: r }
                 ]
               }
             });
           };
-        if (g === "stateSort")
-          return (r) => {
-            const o = t.getState().getShadowValue([e, ...n].join("."), l?.validIds);
-            if (!Array.isArray(o)) return [];
-            const d = l?.validIds ?? t.getState().getShadowMetadata(e, n)?.arrayKeys;
-            if (!d)
+        if (f === "stateSort")
+          return (a) => {
+            const o = r.join("."), { value: g, keys: v } = Z(
+              e,
+              r,
+              l
+            );
+            if (!Array.isArray(g) || !v)
               throw new Error("No array keys found for sorting");
-            const c = o.map((i, s) => ({
-              item: i,
-              key: d[s]
+            const y = g.map((h, p) => ({
+              item: h,
+              key: v[p]
             }));
-            return c.sort((i, s) => r(i.item, s.item)).filter(Boolean), h({
-              path: n,
-              componentId: V,
+            y.sort((h, p) => a(h.item, p.item));
+            const m = y.map((h) => h.key);
+            return u({
+              path: r,
+              componentId: M,
               meta: {
-                validIds: c.map((i) => i.key),
+                ...l,
+                arrayViews: {
+                  ...l?.arrayViews || {},
+                  [o]: m
+                },
                 transforms: [
                   ...l?.transforms || [],
-                  { type: "sort", fn: r }
+                  { type: "sort", fn: a, path: r }
                 ]
               }
             });
           };
-        if (g === "stream")
-          return function(r = {}) {
+        if (f === "stream")
+          return function(a = {}) {
             const {
               bufferSize: o = 100,
-              flushInterval: d = 100,
-              bufferStrategy: c = "accumulate",
-              store: i,
-              onFlush: s
-            } = r;
-            let p = [], w = !1, b = null;
-            const A = (H) => {
-              if (!w) {
-                if (c === "sliding" && p.length >= o)
-                  p.shift();
-                else if (c === "dropping" && p.length >= o)
+              flushInterval: g = 100,
+              bufferStrategy: v = "accumulate",
+              store: y,
+              onFlush: m
+            } = a;
+            let h = [], p = !1, T = null;
+            const A = (O) => {
+              if (!p) {
+                if (v === "sliding" && h.length >= o)
+                  h.shift();
+                else if (v === "dropping" && h.length >= o)
                   return;
-                p.push(H), p.length >= o && E();
+                h.push(O), h.length >= o && E();
               }
             }, E = () => {
-              if (p.length === 0) return;
-              const H = [...p];
-              if (p = [], i) {
-                const W = i(H);
-                W !== void 0 && (Array.isArray(W) ? W : [W]).forEach((k) => {
-                  a(k, n, {
+              if (h.length === 0) return;
+              const O = [...h];
+              if (h = [], y) {
+                const W = y(O);
+                W !== void 0 && (Array.isArray(W) ? W : [W]).forEach((te) => {
+                  t(te, r, {
                     updateType: "insert"
                   });
                 });
               } else
-                H.forEach((W) => {
-                  a(W, n, {
+                O.forEach((W) => {
+                  t(W, r, {
                     updateType: "insert"
                   });
                 });
-              s?.(H);
+              m?.(O);
             };
-            d > 0 && (b = setInterval(E, d));
-            const P = te(), N = t.getState().getShadowMetadata(e, n) || {}, F = N.streams || /* @__PURE__ */ new Map();
-            return F.set(P, { buffer: p, flushTimer: b }), t.getState().setShadowMetadata(e, n, {
+            g > 0 && (T = setInterval(E, g));
+            const b = ee(), N = D(e, r) || {}, V = N.streams || /* @__PURE__ */ new Map();
+            return V.set(b, { buffer: h, flushTimer: T }), x(e, r, {
               ...N,
-              streams: F
+              streams: V
             }), {
-              write: (H) => A(H),
-              writeMany: (H) => H.forEach(A),
+              write: (O) => A(O),
+              writeMany: (O) => O.forEach(A),
               flush: () => E(),
               pause: () => {
-                w = !0;
+                p = !0;
               },
               resume: () => {
-                w = !1, p.length > 0 && E();
+                p = !1, h.length > 0 && E();
               },
               close: () => {
-                E(), b && clearInterval(b);
-                const H = t.getState().getShadowMetadata(e, n);
-                H?.streams && H.streams.delete(P);
+                E(), T && clearInterval(T);
+                const O = I.getState().getShadowMetadata(e, r);
+                O?.streams && O.streams.delete(b);
               }
             };
           };
-        if (g === "stateList")
-          return (r) => /* @__PURE__ */ ne(() => {
-            const d = z(/* @__PURE__ */ new Map()), c = l?.transforms && l.transforms.length > 0 ? `${V}-${xe(l.transforms)}` : `${V}-base`, [i, s] = Q({}), { validIds: p, arrayValues: w } = ue(() => {
-              const A = t.getState().getShadowMetadata(e, n)?.transformCaches?.get(c);
-              let E;
-              A && A.validIds ? E = A.validIds : (E = pe(
-                e,
-                n,
-                l?.transforms
-              ), t.getState().setTransformCache(e, n, c, {
-                validIds: E,
-                computedAt: Date.now(),
-                transforms: l?.transforms || []
-              }));
-              const P = t.getState().getShadowValue(O, E);
-              return {
-                validIds: E,
-                arrayValues: P || []
-              };
-            }, [c, i]);
-            if (Z(() => {
-              const A = t.getState().subscribeToPath(O, (E) => {
-                if (E.type === "GET_SELECTED")
+        if (f === "stateList")
+          return (a) => (console.log("meta outside", JSON.stringify(l)), /* @__PURE__ */ ne(() => {
+            const g = B(/* @__PURE__ */ new Map()), [v, y] = J({});
+            console.log("updateTrigger updateTrigger  updateTrigger");
+            const m = gt(
+              e,
+              r,
+              l?.transforms
+            ), h = r.length > 0 ? r.join(".") : "root", p = {
+              ...l,
+              arrayViews: {
+                ...l?.arrayViews || {},
+                [h]: m
+                // Update the arrayViews with the new valid IDs
+              }
+            }, { value: T } = Z(
+              e,
+              r,
+              p
+            );
+            if (console.log("validIds", m), console.log("arrayValues", T), q(() => {
+              const E = I.getState().subscribeToPath(U, (b) => {
+                if (console.log("changed array statelist  ", b), b.type === "GET_SELECTED")
                   return;
-                const N = t.getState().getShadowMetadata(e, n)?.transformCaches;
-                if (N)
-                  for (const F of N.keys())
-                    F.startsWith(V) && N.delete(F);
-                (E.type === "INSERT" || E.type === "REMOVE" || E.type === "CLEAR_SELECTION") && s({});
+                const V = I.getState().getShadowMetadata(e, r)?.transformCaches;
+                if (V)
+                  for (const O of V.keys())
+                    O.startsWith(M) && V.delete(O);
+                (b.type === "INSERT" || b.type === "REMOVE" || b.type === "CLEAR_SELECTION") && y({});
               });
               return () => {
-                A();
+                E();
               };
-            }, [V, O]), !Array.isArray(w))
+            }, [M, U]), !Array.isArray(T))
               return null;
-            const b = h({
-              path: n,
-              componentId: V,
-              meta: {
-                ...l,
-                validIds: p
-              }
+            const A = u({
+              path: r,
+              componentId: M,
+              meta: p
+              // Use updated meta here
             });
-            return /* @__PURE__ */ ne(De, { children: w.map((A, E) => {
-              const P = p[E];
-              if (!P)
+            return console.log("arrayValues", T), /* @__PURE__ */ ne(Ne, { children: T.map((E, b) => {
+              const N = m[b];
+              if (!N)
                 return null;
-              let N = d.current.get(P);
-              N || (N = te(), d.current.set(P, N));
-              const F = P.split(".").slice(1);
-              return se(we, {
-                key: P,
+              let V = g.current.get(N);
+              V || (V = ee(), g.current.set(N, V));
+              const O = [...r, N];
+              return Me(mt, {
+                key: N,
                 stateKey: e,
-                itemComponentId: N,
-                itemPath: F,
-                localIndex: E,
-                arraySetter: b,
-                rebuildStateShape: h,
-                renderFn: r
+                itemComponentId: V,
+                itemPath: O,
+                localIndex: b,
+                arraySetter: A,
+                rebuildStateShape: u,
+                renderFn: a
               });
             }) });
-          }, {});
-        if (g === "stateFlattenOn")
-          return (r) => {
-            const o = t.getState().getShadowValue([e, ...n].join("."), l?.validIds);
-            return Array.isArray(o) ? (o.flatMap(
-              (c) => c[r] ?? []
-            ), h({
-              path: [...n, "[*]", r],
-              componentId: V,
+          }, {}));
+        if (f === "stateFlattenOn")
+          return (a) => {
+            const o = r.join("."), g = l?.arrayViews?.[o], v = I.getState().getShadowValue(e, r, g);
+            return Array.isArray(v) ? u({
+              path: [...r, "[*]", a],
+              componentId: M,
               meta: l
-            })) : [];
+            }) : [];
           };
-        if (g === "index")
-          return (r) => {
-            const d = t.getState().getShadowMetadata(e, n)?.arrayKeys?.filter(
-              (i) => !l?.validIds || l?.validIds && l?.validIds?.includes(i)
-            )?.[r];
-            return d ? (t.getState().getShadowValue(d, l?.validIds), h({
-              path: d.split(".").slice(1),
-              componentId: V,
-              meta: l
-            })) : void 0;
+        if (f === "index")
+          return (a) => {
+            const o = r.join("."), g = l?.arrayViews?.[o];
+            if (g) {
+              const m = g[a];
+              return m ? u({
+                path: [...r, m],
+                componentId: M,
+                meta: l
+              }) : void 0;
+            }
+            const v = D(e, r);
+            if (!v?.arrayKeys) return;
+            const y = v.arrayKeys[a];
+            if (y)
+              return u({
+                path: [...r, y],
+                componentId: M,
+                meta: l
+              });
           };
-        if (g === "last")
+        if (f === "last")
           return () => {
-            const r = t.getState().getShadowValue(e, n);
-            if (r.length === 0) return;
-            const o = r.length - 1;
-            r[o];
-            const d = [...n, o.toString()];
-            return h({
-              path: d,
-              componentId: V,
+            const { keys: a } = Z(e, r, l);
+            if (!a || a.length === 0)
+              return;
+            const o = a[a.length - 1];
+            if (!o)
+              return;
+            const g = [...r, o];
+            return u({
+              path: g,
+              componentId: M,
               meta: l
             });
           };
-        if (g === "insert")
-          return (r, o) => (a(r, n, { updateType: "insert" }), h({
-            path: n,
-            componentId: V,
-            meta: l
-          }));
-        if (g === "uniqueInsert")
-          return (r, o, d) => {
-            const c = t.getState().getShadowValue(e, n), i = ee(r) ? r(c) : r;
-            let s = null;
-            if (!c.some((w) => {
-              const b = o ? o.every(
-                (A) => re(w[A], i[A])
-              ) : re(w, i);
-              return b && (s = w), b;
+        if (f === "insert")
+          return (a, o) => {
+            t(a, r, { updateType: "insert" });
+          };
+        if (f === "uniqueInsert")
+          return (a, o, g) => {
+            const { value: v } = K(
+              e,
+              r,
+              l
+            ), y = X(a) ? a(v) : a;
+            let m = null;
+            if (!v.some((p) => {
+              const T = o ? o.every(
+                (A) => oe(p[A], y[A])
+              ) : oe(p, y);
+              return T && (m = p), T;
             }))
-              a(i, n, { updateType: "insert" });
-            else if (d && s) {
-              const w = d(s), b = c.map(
-                (A) => re(A, s) ? w : A
+              t(y, r, { updateType: "insert" });
+            else if (g && m) {
+              const p = g(m), T = v.map(
+                (A) => oe(A, m) ? p : A
               );
-              a(b, n, {
+              t(T, r, {
                 updateType: "update"
               });
             }
           };
-        if (g === "cut")
-          return (r, o) => {
-            const d = t.getState().getShadowValue([e, ...n].join("."), l?.validIds), c = l?.validIds ?? t.getState().getShadowMetadata(e, n)?.arrayKeys;
-            if (!c || c.length === 0) return;
-            const i = r == -1 ? c.length - 1 : r !== void 0 ? r : c.length - 1, s = c[i];
-            if (!s) return;
-            const p = s.split(".").slice(1);
-            a(d, p, {
+        if (f === "cut")
+          return (a, o) => {
+            const g = D(e, r);
+            if (!g?.arrayKeys || g.arrayKeys.length === 0)
+              return;
+            const v = a === -1 ? g.arrayKeys.length - 1 : a !== void 0 ? a : g.arrayKeys.length - 1, y = g.arrayKeys[v];
+            y && t(null, [...r, y], {
               updateType: "cut"
             });
           };
-        if (g === "cutSelected")
+        if (f === "cutSelected")
           return () => {
-            const r = pe(e, n, l?.transforms), o = t.getState().getShadowValue([e, ...n].join("."), l?.validIds);
-            if (!r || r.length === 0) return;
-            const d = t.getState().selectedIndicesMap.get(O);
-            let c = r.findIndex(
-              (p) => p === d
-            );
-            const i = r[c == -1 ? r.length - 1 : c]?.split(".").slice(1);
-            t.getState().clearSelectedIndex({ arrayKey: O });
-            const s = i?.slice(0, -1);
-            de(e, s), a(o, i, {
+            const a = [e, ...r].join("."), { keys: o } = Z(e, r, l);
+            if (!o || o.length === 0)
+              return;
+            const g = I.getState().selectedIndicesMap.get(a);
+            if (!g)
+              return;
+            const v = g.split(".").pop();
+            if (!o.includes(v))
+              return;
+            const y = g.split(".").slice(1);
+            I.getState().clearSelectedIndex({ arrayKey: a });
+            const m = y.slice(0, -1);
+            ue(e, m), t(null, y, {
               updateType: "cut"
             });
           };
-        if (g === "cutByValue")
-          return (r) => {
-            const o = t.getState().getShadowMetadata(e, n), d = l?.validIds ?? o?.arrayKeys;
-            if (!d) return;
-            let c = null;
-            for (const i of d)
-              if (t.getState().getShadowValue(i) === r) {
-                c = i;
-                break;
-              }
-            if (c) {
-              const i = c.split(".").slice(1);
-              a(null, i, { updateType: "cut" });
-            }
+        if (f === "cutByValue")
+          return (a) => {
+            const {
+              isArray: o,
+              value: g,
+              keys: v
+            } = Z(e, r, l);
+            if (!o) return;
+            const y = ve(g, v, (m) => m === a);
+            y && t(null, [...r, y.key], {
+              updateType: "cut"
+            });
           };
-        if (g === "toggleByValue")
-          return (r) => {
-            const o = t.getState().getShadowMetadata(e, n), d = l?.validIds ?? o?.arrayKeys;
-            if (!d) return;
-            let c = null;
-            for (const i of d) {
-              const s = t.getState().getShadowValue(i);
-              if (console.log("itemValue sdasdasdasd", s), s === r) {
-                c = i;
-                break;
-              }
-            }
-            if (console.log("itemValue keyToCut", c), c) {
-              const i = c.split(".").slice(1);
-              console.log("itemValue keyToCut", c), a(r, i, {
+        if (f === "toggleByValue")
+          return (a) => {
+            const {
+              isArray: o,
+              value: g,
+              keys: v
+            } = Z(e, r, l);
+            if (!o) return;
+            const y = ve(g, v, (m) => m === a);
+            if (y) {
+              const m = [...r, y.key];
+              t(null, m, {
                 updateType: "cut"
               });
             } else
-              a(r, n, { updateType: "insert" });
+              t(a, r, { updateType: "insert" });
           };
-        if (g === "findWith")
-          return (r, o) => {
-            const d = t.getState().getShadowMetadata(e, n)?.arrayKeys;
-            if (!d)
-              throw new Error("No array keys found for sorting");
-            let c = [];
-            for (const i of d) {
-              let s = t.getState().getShadowValue(i, l?.validIds);
-              if (s && s[r] === o) {
-                c = i.split(".").slice(1);
-                break;
-              }
-            }
-            return h({
-              path: c,
-              componentId: V,
+        if (f === "findWith")
+          return (a, o) => {
+            const { isArray: g, value: v, keys: y } = Z(e, r, l);
+            if (!g)
+              throw new Error("findWith can only be used on arrays");
+            const m = ve(
+              v,
+              y,
+              (h) => h?.[a] === o
+            );
+            return u(m ? {
+              path: [...r, m.key],
+              // e.g., ['itemInstances', 'inst-1', 'properties', 'prop-b']
+              componentId: M,
+              meta: l
+            } : {
+              path: [...r, `not_found_${ee()}`],
+              componentId: M,
               meta: l
             });
           };
-        if (g === "cutThis") {
-          let r = t.getState().getShadowValue(n.join("."));
+        if (f === "cutThis") {
+          const { value: a } = K(e, r, l);
           return () => {
-            a(r, n, { updateType: "cut" });
+            t(a, r, { updateType: "cut" });
           };
         }
-        if (g === "get")
-          return () => (Te(e, V, n), t.getState().getShadowValue(O, l?.validIds));
-        if (g === "getState")
-          return () => t.getState().getShadowValue(O, l?.validIds);
-        if (g === "$derive")
-          return (r) => Ee({
+        if (f === "get")
+          return () => {
+            Ve(e, M, r);
+            const { value: a } = K(e, r, l);
+            return a;
+          };
+        if (f === "$derive")
+          return (a) => Ae({
             _stateKey: e,
-            _path: n,
-            _effect: r.toString(),
+            _path: r,
+            _effect: a.toString(),
             _meta: l
           });
-        if (g === "$get")
-          return () => Ee({ _stateKey: e, _path: n, _meta: l });
-        if (g === "lastSynced") {
-          const r = `${e}:${n.join(".")}`;
-          return t.getState().getSyncInfo(r);
+        if (f === "$get")
+          return () => Ae({ _stateKey: e, _path: r, _meta: l });
+        if (f === "lastSynced") {
+          const a = `${e}:${r.join(".")}`;
+          return Ke(a);
         }
-        if (g == "getLocalStorage")
-          return (r) => fe(m + "-" + e + "-" + r);
-        if (g === "isSelected") {
-          const r = [e, ...n].slice(0, -1);
-          if (de(e, n, void 0), Array.isArray(
-            t.getState().getShadowValue(r.join("."), l?.validIds)
-          )) {
-            n[n.length - 1];
-            const o = r.join("."), d = t.getState().selectedIndicesMap.get(o), c = e + "." + n.join(".");
-            return d === c;
+        if (f == "getLocalStorage")
+          return (a) => me(n + "-" + e + "-" + a);
+        if (f === "isSelected") {
+          const a = r.slice(0, -1);
+          if (D(e, a)?.arrayKeys) {
+            const g = e + "." + a.join("."), v = I.getState().selectedIndicesMap.get(g), y = e + "." + r.join(".");
+            return ue(e, a, void 0), v === y;
           }
           return;
         }
-        if (g === "setSelected")
-          return (r) => {
-            const o = n.slice(0, -1), d = e + "." + o.join("."), c = e + "." + n.join(".");
-            de(e, o, void 0), t.getState().selectedIndicesMap.get(d), r && t.getState().setSelectedIndex(d, c);
+        if (f === "setSelected")
+          return (a) => {
+            const o = r.slice(0, -1), g = e + "." + o.join("."), v = e + "." + r.join(".");
+            ue(e, o, void 0), I.getState().selectedIndicesMap.get(g), a && I.getState().setSelectedIndex(g, v);
           };
-        if (g === "toggleSelected")
+        if (f === "toggleSelected")
           return () => {
-            const r = n.slice(0, -1), o = e + "." + r.join("."), d = e + "." + n.join(".");
-            t.getState().selectedIndicesMap.get(o) === d ? t.getState().clearSelectedIndex({ arrayKey: o }) : t.getState().setSelectedIndex(o, d);
+            const a = r.slice(0, -1), o = e + "." + a.join("."), g = e + "." + r.join(".");
+            I.getState().selectedIndicesMap.get(o) === g ? I.getState().clearSelectedIndex({ arrayKey: o }) : I.getState().setSelectedIndex(o, g);
           };
-        if (g === "_componentId")
-          return V;
-        if (n.length == 0) {
-          if (g === "addZodValidation")
-            return (r) => {
-              t.getState().getInitialOptions(e)?.validation, r.forEach((o) => {
-                const d = t.getState().getShadowMetadata(e, o.path) || {};
-                t.getState().setShadowMetadata(e, o.path, {
-                  ...d,
+        if (f === "_componentId")
+          return M;
+        if (r.length == 0) {
+          if (f === "addZodValidation")
+            return (a) => {
+              a.forEach((o) => {
+                const g = I.getState().getShadowMetadata(e, o.path) || {};
+                I.getState().setShadowMetadata(e, o.path, {
+                  ...g,
                   validation: {
-                    status: "VALIDATION_FAILED",
-                    message: o.message,
+                    status: "INVALID",
+                    errors: [
+                      {
+                        source: "client",
+                        message: o.message,
+                        severity: "error",
+                        code: o.code
+                      }
+                    ],
+                    lastValidated: Date.now(),
                     validatedValue: void 0
                   }
-                }), t.getState().notifyPathSubscribers(o.path, {
-                  type: "VALIDATION_FAILED",
-                  message: o.message,
-                  validatedValue: void 0
                 });
               });
             };
-          if (g === "clearZodValidation")
-            return (r) => {
-              if (!r)
+          if (f === "clearZodValidation")
+            return (a) => {
+              if (!a)
                 throw new Error("clearZodValidation requires a path");
-              const o = t.getState().getShadowMetadata(e, r) || {};
-              o.validation && (t.getState().setShadowMetadata(e, r, {
+              const o = D(e, a) || {};
+              x(e, a, {
                 ...o,
-                validation: void 0
-              }), t.getState().notifyPathSubscribers([e, ...r].join("."), {
-                type: "VALIDATION_CLEARED"
-              }));
+                validation: {
+                  status: "NOT_VALIDATED",
+                  errors: [],
+                  lastValidated: Date.now()
+                }
+              });
             };
-          if (g === "applyJsonPatch")
-            return (r) => {
-              const o = t.getState(), d = o.getShadowMetadata(e, []);
-              if (!d?.components) return;
-              const c = (s) => !s || s === "/" ? [] : s.split("/").slice(1).map((p) => p.replace(/~1/g, "/").replace(/~0/g, "~")), i = /* @__PURE__ */ new Set();
-              for (const s of r) {
-                const p = c(s.path);
-                switch (s.op) {
+          if (f === "applyJsonPatch")
+            return (a) => {
+              const o = I.getState(), g = o.getShadowMetadata(e, []);
+              if (!g?.components) return;
+              const v = (m) => !m || m === "/" ? [] : m.split("/").slice(1).map((h) => h.replace(/~1/g, "/").replace(/~0/g, "~")), y = /* @__PURE__ */ new Set();
+              for (const m of a) {
+                const h = v(m.path);
+                switch (m.op) {
                   case "add":
                   case "replace": {
-                    const { value: w } = s;
-                    o.updateShadowAtPath(e, p, w), o.markAsDirty(e, p, { bubble: !0 });
-                    let b = [...p];
+                    const { value: p } = m;
+                    o.updateShadowAtPath(e, h, p), o.markAsDirty(e, h, { bubble: !0 });
+                    let T = [...h];
                     for (; ; ) {
                       const A = o.getShadowMetadata(
                         e,
-                        b
+                        T
                       );
                       if (A?.pathComponents && A.pathComponents.forEach((E) => {
-                        if (!i.has(E)) {
-                          const P = d.components?.get(E);
-                          P && (P.forceUpdate(), i.add(E));
+                        if (!y.has(E)) {
+                          const b = g.components?.get(E);
+                          b && (b.forceUpdate(), y.add(E));
                         }
-                      }), b.length === 0) break;
-                      b.pop();
+                      }), T.length === 0) break;
+                      T.pop();
                     }
                     break;
                   }
                   case "remove": {
-                    const w = p.slice(0, -1);
-                    o.removeShadowArrayElement(e, p), o.markAsDirty(e, w, { bubble: !0 });
-                    let b = [...w];
+                    const p = h.slice(0, -1);
+                    o.removeShadowArrayElement(e, h), o.markAsDirty(e, p, { bubble: !0 });
+                    let T = [...p];
                     for (; ; ) {
                       const A = o.getShadowMetadata(
                         e,
-                        b
+                        T
                       );
                       if (A?.pathComponents && A.pathComponents.forEach((E) => {
-                        if (!i.has(E)) {
-                          const P = d.components?.get(E);
-                          P && (P.forceUpdate(), i.add(E));
+                        if (!y.has(E)) {
+                          const b = g.components?.get(E);
+                          b && (b.forceUpdate(), y.add(E));
                         }
-                      }), b.length === 0) break;
-                      b.pop();
+                      }), T.length === 0) break;
+                      T.pop();
                     }
                     break;
                   }
                 }
               }
             };
-          if (g === "getComponents")
-            return () => t.getState().getShadowMetadata(e, [])?.components;
-          if (g === "getAllFormRefs")
-            return () => he.getState().getFormRefsByStateKey(e);
+          if (f === "getComponents")
+            return () => D(e, [])?.components;
+          if (f === "getAllFormRefs")
+            return () => Ie.getState().getFormRefsByStateKey(e);
         }
-        if (g === "getFormRef")
-          return () => he.getState().getFormRef(e + "." + n.join("."));
-        if (g === "validationWrapper")
+        if (f === "getFormRef")
+          return () => Ie.getState().getFormRef(e + "." + r.join("."));
+        if (f === "validationWrapper")
           return ({
-            children: r,
+            children: a,
             hideMessage: o
           }) => /* @__PURE__ */ ne(
-            Ve,
+            _e,
             {
               formOpts: o ? { validation: { message: "" } } : void 0,
-              path: n,
+              path: r,
               stateKey: e,
-              children: r
+              children: a
             }
           );
-        if (g === "_stateKey") return e;
-        if (g === "_path") return n;
-        if (g === "update")
-          return I && (console.timeEnd(I), I = null), (r) => {
-            const d = new Error().stack || "";
-            if (d.includes("onClick") || d.includes("dispatchEvent") || d.includes("batchedUpdates")) {
-              const i = `${e}.${n.join(".")}`;
-              me || (ce.clear(), me = !0, queueMicrotask(() => {
-                for (const [p, w] of ce) {
-                  const b = p.split(".");
-                  b[0];
-                  const A = b.slice(1), E = w.reduce(
-                    (P, N) => typeof N == "function" && typeof P == "function" ? (F) => N(P(F)) : N
-                  );
-                  a(E, A, {
-                    updateType: "update"
-                  });
-                }
-                ce.clear(), me = !1;
-              }));
-              const s = ce.get(i) || [];
-              s.push(r), ce.set(i, s);
-            } else
-              console.time("update inner"), a(r, n, { updateType: "update" }), console.timeEnd("update inner");
-            return {
-              synced: () => {
-                const i = t.getState().getShadowMetadata(e, n);
-                t.getState().setShadowMetadata(e, n, {
-                  ...i,
-                  isDirty: !1,
-                  stateSource: "server",
-                  lastServerSync: Date.now()
-                });
-                const s = [e, ...n].join(".");
-                t.getState().notifyPathSubscribers(s, {
-                  type: "SYNC_STATUS_CHANGE",
-                  isDirty: !1
-                });
-              }
-            };
-          };
-        if (g === "toggle") {
-          const r = t.getState().getShadowValue([e, ...n].join("."), l?.validIds);
-          if (typeof r != "boolean")
+        if (f === "_stateKey") return e;
+        if (f === "_path") return r;
+        if (f === "update")
+          return (a) => (t(a, r, { updateType: "update" }), {
+            synced: () => {
+              const o = I.getState().getShadowMetadata(e, r);
+              x(e, r, {
+                ...o,
+                isDirty: !1,
+                stateSource: "server",
+                lastServerSync: Date.now()
+              });
+              const g = [e, ...r].join(".");
+              De(g, {
+                type: "SYNC_STATUS_CHANGE",
+                isDirty: !1
+              });
+            }
+          });
+        if (f === "toggle") {
+          const { value: a } = K(
+            e,
+            r,
+            l
+          );
+          if (typeof a != "boolean")
             throw new Error("toggle() can only be used on boolean values");
           return () => {
-            a(!r, n, {
+            t(!a, r, {
               updateType: "update"
             });
           };
         }
-        if (g === "formElement")
-          return (r, o) => /* @__PURE__ */ ne(
-            Je,
+        if (f === "formElement")
+          return (a, o) => /* @__PURE__ */ ne(
+            vt,
             {
               stateKey: e,
-              path: n,
-              rebuildStateShape: h,
-              setState: a,
+              path: r,
+              rebuildStateShape: u,
+              setState: t,
               formOpts: o,
-              renderFn: r
+              renderFn: a
             }
           );
-        const X = [...n, g];
-        return t.getState().getShadowValue(e, X), h({
-          path: X,
-          componentId: V,
+        const R = [...r, f];
+        return I.getState().getShadowValue(e, R), u({
+          path: R,
+          componentId: M,
           meta: l
         });
       }
-    }, K = new Proxy(B, f);
-    return v.set(U, K), console.timeEnd("rebuildStateShape Inner"), K;
+    }, w = new Proxy({}, j);
+    return d.set(C, w), w;
   }
-  console.timeEnd("rebuildStateShape Outer");
-  const S = {
-    revertToInitialState: (n) => {
-      t.getState().getInitialOptions(e)?.validation;
-      const l = t.getState().getShadowMetadata(e, []);
-      l?.stateSource === "server" && l.baseServerState ? l.baseServerState : t.getState().initialStateGlobal[e];
-      const V = t.getState().initialStateGlobal[e];
-      t.getState().clearSelectedIndexesForState(e), t.getState().initializeShadowState(e, V), h({
+  const i = {
+    revertToInitialState: (r) => {
+      const l = I.getState().getShadowMetadata(e, []);
+      l?.stateSource === "server" && l.baseServerState ? l.baseServerState : I.getState().initialStateGlobal[e];
+      const M = I.getState().initialStateGlobal[e];
+      Ze(e), ce(e, M), u({
         path: [],
-        componentId: y
+        componentId: c
       });
-      const j = ae(e), U = ee(j?.localStorage?.key) ? j?.localStorage?.key(V) : j?.localStorage?.key, O = `${m}-${e}-${U}`;
-      O && localStorage.removeItem(O);
-      const B = t.getState().getShadowMetadata(e, []);
-      return B && B?.components?.forEach((f) => {
-        f.forceUpdate();
-      }), V;
+      const _ = G(e), C = X(_?.localStorage?.key) ? _?.localStorage?.key(M) : _?.localStorage?.key, U = `${n}-${e}-${C}`;
+      U && localStorage.removeItem(U);
+      const j = I.getState().getShadowMetadata(e, []);
+      return j && j?.components?.forEach((w) => {
+        w.forceUpdate();
+      }), M;
     },
-    updateInitialState: (n) => {
-      const l = Pe(
+    updateInitialState: (r) => {
+      const l = Oe(
         e,
-        a,
-        y,
-        m
-      ), V = t.getState().initialStateGlobal[e], j = ae(e), U = ee(j?.localStorage?.key) ? j?.localStorage?.key(V) : j?.localStorage?.key, O = `${m}-${e}-${U}`;
-      return localStorage.getItem(O) && localStorage.removeItem(O), Re(() => {
-        Ce(e, n), t.getState().initializeShadowState(e, n);
-        const B = t.getState().getShadowMetadata(e, []);
-        B && B?.components?.forEach((f) => {
-          f.forceUpdate();
+        t,
+        c,
+        n
+      ), M = I.getState().initialStateGlobal[e], _ = G(e), C = X(_?.localStorage?.key) ? _?.localStorage?.key(M) : _?.localStorage?.key, U = `${n}-${e}-${C}`;
+      return localStorage.getItem(U) && localStorage.removeItem(U), je(() => {
+        Pe(e, r), ce(e, r);
+        const j = I.getState().getShadowMetadata(e, []);
+        j && j?.components?.forEach((w) => {
+          w.forceUpdate();
         });
       }), {
-        fetchId: (B) => l.get()[B]
+        fetchId: (j) => l.get()[j]
       };
     }
   };
-  return h({
-    componentId: y,
+  return u({
+    componentId: c,
     path: []
   });
 }
-function Ee(e) {
-  return se(qe, { proxy: e });
+function Ae(e) {
+  return Me(St, { proxy: e });
 }
-function Be({
-  proxy: e,
-  rebuildStateShape: a
-}) {
-  const y = z(null), m = z(`map-${crypto.randomUUID()}`), v = z(!1), I = z(/* @__PURE__ */ new Map());
-  Z(() => {
-    const S = y.current;
-    if (!S || v.current) return;
-    const u = setTimeout(() => {
-      const n = t.getState().getShadowMetadata(e._stateKey, e._path) || {}, l = n.mapWrappers || [];
-      l.push({
-        instanceId: m.current,
-        mapFn: e._mapFn,
-        containerRef: S,
-        rebuildStateShape: a,
-        path: e._path,
-        componentId: m.current,
-        meta: e._meta
-      }), t.getState().setShadowMetadata(e._stateKey, e._path, {
-        ...n,
-        mapWrappers: l
-      }), v.current = !0, h();
-    }, 0);
-    return () => {
-      if (clearTimeout(u), m.current) {
-        const n = t.getState().getShadowMetadata(e._stateKey, e._path) || {};
-        n.mapWrappers && (n.mapWrappers = n.mapWrappers.filter(
-          (l) => l.instanceId !== m.current
-        ), t.getState().setShadowMetadata(e._stateKey, e._path, n));
-      }
-      I.current.forEach((n) => n.unmount());
-    };
-  }, []);
-  const h = () => {
-    const S = y.current;
-    if (!S) return;
-    const u = t.getState().getShadowValue(
-      [e._stateKey, ...e._path].join("."),
-      e._meta?.validIds
-    );
-    if (!Array.isArray(u)) return;
-    const n = e._meta?.validIds ?? t.getState().getShadowMetadata(e._stateKey, e._path)?.arrayKeys ?? [], l = a({
-      currentState: u,
-      path: e._path,
-      componentId: m.current,
-      meta: e._meta
-    });
-    u.forEach((V, j) => {
-      const U = n[j];
-      if (!U) return;
-      const O = te(), B = document.createElement("div");
-      B.setAttribute("data-item-path", U), S.appendChild(B);
-      const f = be(B);
-      I.current.set(U, f);
-      const K = U.split(".").slice(1);
-      f.render(
-        se(we, {
-          stateKey: e._stateKey,
-          itemComponentId: O,
-          itemPath: K,
-          localIndex: j,
-          arraySetter: l,
-          rebuildStateShape: a,
-          renderFn: e._mapFn
-        })
-      );
-    });
-  };
-  return /* @__PURE__ */ ne("div", { ref: y, "data-map-container": m.current });
-}
-function qe({
+function St({
   proxy: e
 }) {
-  const a = z(null), y = z(null), m = z(!1), v = `${e._stateKey}-${e._path.join(".")}`, I = t.getState().getShadowValue(
-    [e._stateKey, ...e._path].join("."),
-    e._meta?.validIds
-  );
-  return Z(() => {
-    const h = a.current;
-    if (!h || m.current) return;
-    const S = setTimeout(() => {
-      if (!h.parentElement) {
-        console.warn("Parent element not found for signal", v);
+  const t = B(null), c = B(null), n = B(!1), d = `${e._stateKey}-${e._path.join(".")}`, s = e._path.join("."), u = e._meta?.arrayViews?.[s], i = F(e._stateKey, e._path, u);
+  return q(() => {
+    const S = t.current;
+    if (!S || n.current) return;
+    const r = setTimeout(() => {
+      if (!S.parentElement) {
+        console.warn("Parent element not found for signal", d);
         return;
       }
-      const u = h.parentElement, l = Array.from(u.childNodes).indexOf(h);
-      let V = u.getAttribute("data-parent-id");
-      V || (V = `parent-${crypto.randomUUID()}`, u.setAttribute("data-parent-id", V)), y.current = `instance-${crypto.randomUUID()}`;
-      const j = t.getState().getShadowMetadata(e._stateKey, e._path) || {}, U = j.signals || [];
-      U.push({
-        instanceId: y.current,
-        parentId: V,
-        position: l,
+      const l = S.parentElement, _ = Array.from(l.childNodes).indexOf(S);
+      let C = l.getAttribute("data-parent-id");
+      C || (C = `parent-${crypto.randomUUID()}`, l.setAttribute("data-parent-id", C)), c.current = `instance-${crypto.randomUUID()}`;
+      const U = I.getState().getShadowMetadata(e._stateKey, e._path) || {}, j = U.signals || [];
+      j.push({
+        instanceId: c.current,
+        parentId: C,
+        position: _,
         effect: e._effect
-      }), t.getState().setShadowMetadata(e._stateKey, e._path, {
-        ...j,
-        signals: U
+      }), I.getState().setShadowMetadata(e._stateKey, e._path, {
+        ...U,
+        signals: j
       });
-      let O = I;
+      let w = i;
       if (e._effect)
         try {
-          O = new Function(
+          w = new Function(
             "state",
             `return (${e._effect})(state)`
-          )(I);
+          )(i);
         } catch (f) {
           console.error("Error evaluating effect function:", f);
         }
-      O !== null && typeof O == "object" && (O = JSON.stringify(O));
-      const B = document.createTextNode(String(O ?? ""));
-      h.replaceWith(B), m.current = !0;
+      w !== null && typeof w == "object" && (w = JSON.stringify(w));
+      const Y = document.createTextNode(String(w ?? ""));
+      S.replaceWith(Y), n.current = !0;
     }, 0);
     return () => {
-      if (clearTimeout(S), y.current) {
-        const u = t.getState().getShadowMetadata(e._stateKey, e._path) || {};
-        u.signals && (u.signals = u.signals.filter(
-          (n) => n.instanceId !== y.current
-        ), t.getState().setShadowMetadata(e._stateKey, e._path, u));
+      if (clearTimeout(r), c.current) {
+        const l = I.getState().getShadowMetadata(e._stateKey, e._path) || {};
+        l.signals && (l.signals = l.signals.filter(
+          (M) => M.instanceId !== c.current
+        ), I.getState().setShadowMetadata(e._stateKey, e._path, l));
       }
     };
-  }, []), se("span", {
-    ref: a,
+  }, []), Me("span", {
+    ref: t,
     style: { display: "contents" },
-    "data-signal-id": v
+    "data-signal-id": d
   });
 }
-const we = Oe(
-  Ge,
-  (e, a) => e.itemPath.join(".") === a.itemPath.join(".") && e.stateKey === a.stateKey && e.itemComponentId === a.itemComponentId && e.localIndex === a.localIndex
-), ze = (e) => {
-  const [a, y] = Q(!1);
-  return le(() => {
+const mt = $e(
+  ht,
+  (e, t) => e.itemPath.join(".") === t.itemPath.join(".") && e.stateKey === t.stateKey && e.itemComponentId === t.itemComponentId && e.localIndex === t.localIndex
+), yt = (e) => {
+  const [t, c] = J(!1);
+  return ie(() => {
     if (!e.current) {
-      y(!0);
+      c(!0);
       return;
     }
-    const m = Array.from(e.current.querySelectorAll("img"));
-    if (m.length === 0) {
-      y(!0);
+    const n = Array.from(e.current.querySelectorAll("img"));
+    if (n.length === 0) {
+      c(!0);
       return;
     }
-    let v = 0;
-    const I = () => {
-      v++, v === m.length && y(!0);
+    let d = 0;
+    const s = () => {
+      d++, d === n.length && c(!0);
     };
-    return m.forEach((h) => {
-      h.complete ? I() : (h.addEventListener("load", I), h.addEventListener("error", I));
+    return n.forEach((u) => {
+      u.complete ? s() : (u.addEventListener("load", s), u.addEventListener("error", s));
     }), () => {
-      m.forEach((h) => {
-        h.removeEventListener("load", I), h.removeEventListener("error", I);
+      n.forEach((u) => {
+        u.removeEventListener("load", s), u.removeEventListener("error", s);
       });
     };
-  }, [e.current]), a;
+  }, [e.current]), t;
 };
-function Ge({
+function ht({
   stateKey: e,
-  itemComponentId: a,
-  itemPath: y,
-  localIndex: m,
-  arraySetter: v,
-  rebuildStateShape: I,
-  renderFn: h
+  itemComponentId: t,
+  itemPath: c,
+  localIndex: n,
+  arraySetter: d,
+  rebuildStateShape: s,
+  renderFn: u
 }) {
-  const [, S] = Q({}), { ref: u, inView: n } = Ne(), l = z(null), V = ze(l), j = z(!1), U = [e, ...y].join(".");
-  ke(e, a, S);
-  const O = oe(
-    (g) => {
-      l.current = g, u(g);
+  const [, i] = J({}), { ref: S, inView: r } = He(), l = B(null), M = yt(l), _ = B(!1), C = [e, ...c].join(".");
+  Ue(e, t, i);
+  const U = ae(
+    (f) => {
+      l.current = f, S(f);
     },
-    [u]
+    [S]
   );
-  Z(() => {
-    t.getState().subscribeToPath(U, (g) => {
-      S({});
+  q(() => {
+    et(C, (f) => {
+      i({});
     });
-  }, []), Z(() => {
-    if (!n || !V || j.current)
+  }, []), q(() => {
+    if (!r || !M || _.current)
       return;
-    const g = l.current;
-    if (g && g.offsetHeight > 0) {
-      j.current = !0;
-      const J = g.offsetHeight;
-      t.getState().setShadowMetadata(e, y, {
+    const f = l.current;
+    if (f && f.offsetHeight > 0) {
+      _.current = !0;
+      const R = f.offsetHeight;
+      x(e, c, {
         virtualizer: {
-          itemHeight: J,
-          domRef: g
+          itemHeight: R,
+          domRef: f
         }
       });
-      const X = y.slice(0, -1), r = [e, ...X].join(".");
-      t.getState().notifyPathSubscribers(r, {
+      const a = c.slice(0, -1), o = [e, ...a].join(".");
+      De(o, {
         type: "ITEMHEIGHT",
-        itemKey: y.join("."),
+        itemKey: c.join("."),
         ref: l.current
       });
     }
-  }, [n, V, e, y]);
-  const B = [e, ...y].join("."), f = t.getState().getShadowValue(B);
-  if (f === void 0)
+  }, [r, M, e, c]);
+  const j = F(e, c);
+  if (j === void 0)
     return null;
-  const K = I({
-    currentState: f,
-    path: y,
-    componentId: a
-  }), L = h(K, m, v);
-  return /* @__PURE__ */ ne("div", { ref: O, children: L });
+  const w = s({
+    currentState: j,
+    path: c,
+    componentId: t
+  }), Y = u(w, n, d);
+  return /* @__PURE__ */ ne("div", { ref: U, children: Y });
 }
-function Je({
+function vt({
   stateKey: e,
-  path: a,
-  rebuildStateShape: y,
-  renderFn: m,
-  formOpts: v,
-  setState: I
+  path: t,
+  rebuildStateShape: c,
+  renderFn: n,
+  formOpts: d,
+  setState: s
 }) {
-  const [h] = Q(() => te()), [, S] = Q({}), u = [e, ...a].join(".");
-  ke(e, h, S);
-  const n = t.getState().getShadowValue(u), [l, V] = Q(n), j = z(!1), U = z(null);
-  Z(() => {
-    !j.current && !re(n, l) && V(n);
-  }, [n]), Z(() => {
-    const L = t.getState().subscribeToPath(u, (g) => {
-      !j.current && l !== g && S({});
+  const [u] = J(() => ee()), [, i] = J({}), S = [e, ...t].join(".");
+  Ue(e, u, i);
+  const r = F(e, t), [l, M] = J(r), _ = B(!1), C = B(null);
+  q(() => {
+    !_.current && !oe(r, l) && M(r);
+  }, [r]), q(() => {
+    const f = I.getState().subscribeToPath(S, (R) => {
+      !_.current && l !== R && i({});
     });
     return () => {
-      L(), U.current && (clearTimeout(U.current), j.current = !1);
+      f(), C.current && (clearTimeout(C.current), _.current = !1);
     };
   }, []);
-  const O = oe(
-    (L) => {
-      typeof n === "number" && typeof L == "string" && (L = L === "" ? 0 : Number(L)), V(L), j.current = !0, U.current && clearTimeout(U.current);
-      const J = v?.debounceTime ?? 200;
-      U.current = setTimeout(() => {
-        j.current = !1, I(L, a, { updateType: "update" });
-        const { getInitialOptions: X, setShadowMetadata: r, getShadowMetadata: o } = t.getState(), d = X(e)?.validation, c = d?.zodSchemaV4 || d?.zodSchemaV3;
-        if (c) {
-          const i = t.getState().getShadowValue(e), s = c.safeParse(i), p = o(e, a) || {};
-          if (s.success)
-            r(e, a, {
-              ...p,
+  const U = ae(
+    (f) => {
+      typeof r === "number" && typeof f == "string" && (f = f === "" ? 0 : Number(f)), M(f), _.current = !0, C.current && clearTimeout(C.current);
+      const a = d?.debounceTime ?? 200;
+      C.current = setTimeout(() => {
+        if (_.current = !1, s(f, t, { updateType: "update" }), !I.getState().getShadowMetadata(e, [])?.features?.validationEnabled) return;
+        const g = G(e)?.validation, v = g?.zodSchemaV4 || g?.zodSchemaV3;
+        if (v) {
+          const y = F(e, []), m = v.safeParse(y), h = D(e, t) || {};
+          if (m.success)
+            x(e, t, {
+              ...h,
               validation: {
-                status: "VALID_LIVE",
-                validatedValue: L,
-                message: void 0
+                status: "VALID",
+                errors: [],
+                lastValidated: Date.now(),
+                validatedValue: f
               }
             });
           else {
-            const b = ("issues" in s.error ? s.error.issues : s.error.errors).filter(
-              (A) => JSON.stringify(A.path) === JSON.stringify(a)
+            const T = ("issues" in m.error ? m.error.issues : m.error.errors).filter(
+              (A) => JSON.stringify(A.path) === JSON.stringify(t)
             );
-            b.length > 0 ? r(e, a, {
-              ...p,
+            T.length > 0 ? x(e, t, {
+              ...h,
               validation: {
-                status: "INVALID_LIVE",
-                message: b[0]?.message,
-                validatedValue: L
+                status: "INVALID",
+                errors: [
+                  {
+                    source: "client",
+                    message: T[0]?.message,
+                    severity: "warning"
+                    // Gentle error during typing
+                  }
+                ],
+                lastValidated: Date.now(),
+                validatedValue: f
               }
-            }) : r(e, a, {
-              ...p,
+            }) : x(e, t, {
+              ...h,
               validation: {
-                status: "VALID_LIVE",
-                validatedValue: L,
-                message: void 0
+                status: "VALID",
+                errors: [],
+                lastValidated: Date.now(),
+                validatedValue: f
               }
             });
           }
         }
-      }, J), S({});
+      }, a), i({});
     },
-    [I, a, v?.debounceTime, e]
-  ), B = oe(async () => {
-    console.log("handleBlur triggered"), U.current && (clearTimeout(U.current), U.current = null, j.current = !1, I(l, a, { updateType: "update" }));
-    const { getInitialOptions: L } = t.getState(), g = L(e)?.validation, J = g?.zodSchemaV4 || g?.zodSchemaV3;
-    if (!J) return;
-    const X = t.getState().getShadowMetadata(e, a);
-    t.getState().setShadowMetadata(e, a, {
-      ...X,
+    [s, t, d?.debounceTime, e]
+  ), j = ae(async () => {
+    if (console.log("handleBlur triggered"), C.current && (clearTimeout(C.current), C.current = null, _.current = !1, s(l, t, { updateType: "update" })), !D(e, [])?.features?.validationEnabled) return;
+    const { getInitialOptions: R } = I.getState(), a = R(e)?.validation, o = a?.zodSchemaV4 || a?.zodSchemaV3;
+    if (!o) return;
+    const g = D(e, t);
+    x(e, t, {
+      ...g,
       validation: {
-        status: "DIRTY",
+        status: "VALIDATING",
+        errors: [],
+        lastValidated: Date.now(),
         validatedValue: l
       }
     });
-    const r = t.getState().getShadowValue(e), o = J.safeParse(r);
-    if (console.log("result ", o), o.success)
-      t.getState().setShadowMetadata(e, a, {
-        ...X,
+    const v = F(e, []), y = o.safeParse(v);
+    if (console.log("result ", y), y.success)
+      x(e, t, {
+        ...g,
         validation: {
-          status: "VALID_PENDING_SYNC",
+          status: "VALID",
+          errors: [],
+          lastValidated: Date.now(),
           validatedValue: l
         }
       });
     else {
-      const d = "issues" in o.error ? o.error.issues : o.error.errors;
-      console.log("All validation errors:", d), console.log("Current blur path:", a);
-      const c = d.filter((i) => {
-        if (console.log("Processing error:", i), a.some((p) => p.startsWith("id:"))) {
+      const m = "issues" in y.error ? y.error.issues : y.error.errors;
+      console.log("All validation errors:", m), console.log("Current blur path:", t);
+      const h = m.filter((p) => {
+        if (console.log("Processing error:", p), t.some((A) => A.startsWith("id:"))) {
           console.log("Detected array path with ULID");
-          const p = a[0].startsWith("id:") ? [] : a.slice(0, -1);
-          console.log("Parent path:", p);
-          const w = t.getState().getShadowMetadata(e, p);
-          if (console.log("Array metadata:", w), w?.arrayKeys) {
-            const b = [e, ...a.slice(0, -1)].join("."), A = w.arrayKeys.indexOf(b);
-            console.log("Item key:", b, "Index:", A);
-            const E = [...p, A, ...a.slice(-1)], P = JSON.stringify(i.path) === JSON.stringify(E);
+          const A = t[0].startsWith("id:") ? [] : t.slice(0, -1);
+          console.log("Parent path:", A);
+          const E = I.getState().getShadowMetadata(e, A);
+          if (console.log("Array metadata:", E), E?.arrayKeys) {
+            const b = [e, ...t.slice(0, -1)].join("."), N = E.arrayKeys.indexOf(b);
+            console.log("Item key:", b, "Index:", N);
+            const V = [...A, N, ...t.slice(-1)], O = JSON.stringify(p.path) === JSON.stringify(V);
             return console.log("Zod path comparison:", {
-              zodPath: E,
-              errorPath: i.path,
-              match: P
-            }), P;
+              zodPath: V,
+              errorPath: p.path,
+              match: O
+            }), O;
           }
         }
-        const s = JSON.stringify(i.path) === JSON.stringify(a);
+        const T = JSON.stringify(p.path) === JSON.stringify(t);
         return console.log("Direct path comparison:", {
-          errorPath: i.path,
-          currentPath: a,
-          match: s
-        }), s;
+          errorPath: p.path,
+          currentPath: t,
+          match: T
+        }), T;
       });
-      console.log("Filtered path errors:", c), t.getState().setShadowMetadata(e, a, {
-        ...X,
+      console.log("Filtered path errors:", h), x(e, t, {
+        ...g,
         validation: {
-          status: "VALIDATION_FAILED",
-          message: c[0]?.message,
+          status: "INVALID",
+          errors: h.map((p) => ({
+            source: "client",
+            message: p.message,
+            severity: "error"
+            // Hard error on blur
+          })),
+          lastValidated: Date.now(),
           validatedValue: l
         }
       });
     }
-    S({});
-  }, [e, a, l, I]), f = y({
-    currentState: n,
-    path: a,
-    componentId: h
-  }), K = new Proxy(f, {
-    get(L, g) {
-      return g === "inputProps" ? {
+    i({});
+  }, [e, t, l, s]), w = c({
+    path: t,
+    componentId: u
+  }), Y = new Proxy(w, {
+    get(f, R) {
+      return R === "inputProps" ? {
         value: l ?? "",
-        onChange: (J) => {
-          O(J.target.value);
+        onChange: (a) => {
+          U(a.target.value);
         },
         // 5. Wire the new onBlur handler to the input props.
-        onBlur: B,
-        ref: he.getState().getFormRef(e + "." + a.join("."))
-      } : L[g];
+        onBlur: j,
+        ref: Ie.getState().getFormRef(e + "." + t.join("."))
+      } : f[R];
     }
   });
-  return /* @__PURE__ */ ne(Ve, { formOpts: v, path: a, stateKey: e, children: m(K) });
+  return /* @__PURE__ */ ne(_e, { formOpts: d, path: t, stateKey: e, children: n(Y) });
 }
-function ke(e, a, y) {
-  const m = `${e}////${a}`;
-  le(() => {
-    const { registerComponent: v, unregisterComponent: I } = t.getState();
-    return v(e, m, {
-      forceUpdate: () => y({}),
-      paths: /* @__PURE__ */ new Set(),
-      reactiveType: ["component"]
-    }), () => {
-      I(e, m);
-    };
-  }, [e, m]);
+function Ue(e, t, c) {
+  const n = `${e}////${t}`;
+  ie(() => (ze(e, n, {
+    forceUpdate: () => c({}),
+    paths: /* @__PURE__ */ new Set(),
+    reactiveType: ["component"]
+  }), () => {
+    Ge(e, n);
+  }), [e, n]);
 }
 export {
-  Ee as $cogsSignal,
-  ot as addStateOptions,
-  Fe as createCogsState,
-  st as createCogsStateFromSync,
-  it as notifyComponent,
-  We as useCogsStateFn
+  Ae as $cogsSignal,
+  Pt as addStateOptions,
+  tt as createCogsState,
+  Ct as createCogsStateFromSync,
+  ft as useCogsStateFn
 };
 //# sourceMappingURL=CogsState.jsx.map