cogsbox-state 0.5.296 → 0.5.298

package/src/CogsState.tsx

@@ -1814,16 +1814,30 @@ function createProxyHandler<T>(
                 endIndex: 10,
               });
 
-              const getItemHeight = useCallback(
-                (index: number): number => {
-                  const metadata = getGlobalStore
-                    .getState()
-                    .getShadowMetadata(stateKey, [...path, index.toString()]);
-                  return metadata?.virtualizer?.itemHeight || itemHeight;
-                },
-                [itemHeight, stateKey, path]
+              const [heightsVersion, setHeightsVersion] = useState(0);
+              const forceRecalculate = useCallback(
+                () => setHeightsVersion((v) => v + 1),
+                []
               );
 
+              // --- This useEffect now cleanly subscribes to height changes ---
+              useEffect(() => {
+                // Subscribe to shadow state changes for this specific key.
+                const unsubscribe = getGlobalStore
+                  .getState()
+                  .subscribeToShadowState(stateKey, forceRecalculate);
+
+                // On initial mount, we still need to trigger one recalculation
+                // to capture heights from the very first render.
+                const timer = setTimeout(forceRecalculate, 50);
+
+                // Cleanup function to unsubscribe when the component unmounts.
+                return () => {
+                  unsubscribe();
+                  clearTimeout(timer);
+                };
+              }, [stateKey, forceRecalculate]); // Runs only once on mount.
+
               const isAtBottomRef = useRef(stickToBottom);
               const previousTotalCountRef = useRef(0);
               const isInitialMountRef = useRef(true);
@@ -1835,17 +1849,20 @@ function createProxyHandler<T>(
               const totalCount = sourceArray.length;
 
               const { totalHeight, positions } = useMemo(() => {
+                const shadowArray =
+                  getGlobalStore.getState().getShadowMetadata(stateKey, path) ||
+                  [];
                 let height = 0;
                 const pos: number[] = [];
                 for (let i = 0; i < totalCount; i++) {
                   pos[i] = height;
-                  height += getItemHeight(i);
-                  console.log("height", getItemHeight(i), height);
+                  const measuredHeight =
+                    shadowArray[i]?.virtualizer?.itemHeight;
+                  height += measuredHeight || itemHeight;
                 }
                 return { totalHeight: height, positions: pos };
-              }, [totalCount, getItemHeight]);
+              }, [totalCount, stateKey, path, itemHeight, heightsVersion]);
 
-              // This logic is IDENTICAL to your original code.
               const virtualState = useMemo(() => {
                 const start = Math.max(0, range.startIndex);
                 const end = Math.min(totalCount, range.endIndex);
@@ -1858,9 +1875,8 @@ function createProxyHandler<T>(
                   ...meta,
                   validIndices,
                 });
-              }, [range.startIndex, range.endIndex, sourceArray, totalCount]);
+              }, [range.startIndex, range.endIndex, sourceArray]);
 
-              // This useLayoutEffect is from your original code.
               useLayoutEffect(() => {
                 const container = containerRef.current;
                 if (!container) return;
@@ -1874,15 +1890,12 @@ function createProxyHandler<T>(
                   isAtBottomRef.current =
                     scrollHeight - scrollTop - clientHeight < 10;
 
-                  // --- THE ROBUST FIX: Binary search to find the start index ---
-                  // This is extremely fast and correctly handles all scroll positions.
                   let search = (list: number[], value: number) => {
                     let low = 0;
                     let high = list.length - 1;
                     while (low <= high) {
                       const mid = Math.floor((low + high) / 2);
-                      const midValue = list[mid]!;
-                      if (midValue < value) {
+                      if (list[mid]! < value) {
                         low = mid + 1;
                       } else {
                         high = mid - 1;
@@ -1892,7 +1905,6 @@ function createProxyHandler<T>(
                   };
 
                   let startIndex = search(positions, scrollTop);
-
                   let endIndex = startIndex;
                   while (
                     endIndex < totalCount &&
@@ -1903,7 +1915,7 @@ function createProxyHandler<T>(
 
                   startIndex = Math.max(0, startIndex - overscan);
                   endIndex = Math.min(totalCount, endIndex + overscan);
-                  console.log("startIndex", startIndex, "endIndex", endIndex);
+
                   setRange((prevRange) => {
                     if (
                       prevRange.startIndex !== startIndex ||
@@ -1919,7 +1931,6 @@ function createProxyHandler<T>(
                   passive: true,
                 });
 
-                // This stickToBottom logic is IDENTICAL to your original.
                 if (stickToBottom) {
                   if (isInitialMountRef.current) {
                     container.scrollTo({
@@ -1927,15 +1938,13 @@ function createProxyHandler<T>(
                       behavior: "auto",
                     });
                   } else if (wasAtBottom && listGrew) {
-                    requestAnimationFrame(() => {
-                      container.scrollTo({
-                        top: container.scrollHeight,
-                        behavior: "smooth",
-                      });
+                    // Use 'auto' for an instant jump to the bottom to prevent visual glitches.
+                    container.scrollTo({
+                      top: container.scrollHeight,
+                      behavior: "auto",
                     });
                   }
                 }
-
                 isInitialMountRef.current = false;
                 handleScroll();
 
@@ -2933,7 +2942,6 @@ export function $cogsSignalStore(proxy: {
   );
   return createElement("text", {}, String(value));
 }
-
 function CogsItemWrapper({
   stateKey,
   itemComponentId,
@@ -2945,19 +2953,31 @@ function CogsItemWrapper({
   itemPath: string[];
   children: React.ReactNode;
 }) {
+  // This hook handles the re-rendering when the item's own data changes.
   const [, forceUpdate] = useState({});
+  // This hook measures the element.
   const [ref, bounds] = useMeasure();
+  // This ref prevents sending the same height update repeatedly.
+  const lastReportedHeight = useRef<number | null>(null);
 
+  // This is the primary effect for this component.
   useEffect(() => {
-    if (bounds.height > 0) {
+    // We only report a height if it's a valid number AND it's different
+    // from the last height we reported. This prevents infinite loops.
+    if (bounds.height > 0 && bounds.height !== lastReportedHeight.current) {
+      // Store the new height so we don't report it again.
+      lastReportedHeight.current = bounds.height;
+
+      // Call the store function to save the height and notify listeners.
       getGlobalStore.getState().setShadowMetadata(stateKey, itemPath, {
         virtualizer: {
           itemHeight: bounds.height,
         },
       });
     }
-  }, [bounds.height]);
+  }, [bounds.height, stateKey, itemPath]); // Reruns whenever the measured height changes.
 
+  // This effect handles subscribing the item to its own data path for updates.
   useLayoutEffect(() => {
     const fullComponentId = `${stateKey}////${itemComponentId}`;
     const stateEntry = getGlobalStore
@@ -2983,5 +3003,6 @@ function CogsItemWrapper({
     };
   }, [stateKey, itemComponentId, itemPath.join(".")]);
 
+  // The rendered output is a simple div that gets measured.
   return <div ref={ref}>{children}</div>;
 }

package/src/store.ts

@@ -98,8 +98,12 @@ type ShadowState<T> =
     : T extends object
       ? { [K in keyof T]: ShadowState<T[K]> } & ShadowMetadata
       : ShadowMetadata;
+
 export type CogsGlobalState = {
+  // --- Shadow State and Subscription System ---
   shadowStateStore: { [key: string]: any };
+  shadowStateSubscribers: Map<string, Set<() => void>>; // Stores subscribers for shadow state updates
+  subscribeToShadowState: (key: string, callback: () => void) => () => void; // Subscribes a listener, returns an unsubscribe function
   initializeShadowState: (key: string, initialState: any) => void;
   updateShadowAtPath: (key: string, path: string[], newValue: any) => void;
   insertShadowArrayElement: (
@@ -115,9 +119,8 @@ export type CogsGlobalState = {
   getShadowMetadata: (key: string, path: string[]) => any;
   setShadowMetadata: (key: string, path: string[], metadata: any) => void;
 
+  // --- Selected Item State ---
   selectedIndicesMap: Map<string, Map<string, number>>; // stateKey -> (parentPath -> selectedIndex)
-
-  // Add these new methods
   getSelectedIndex: (
     stateKey: string,
     parentPath: string
@@ -135,36 +138,16 @@ export type CogsGlobalState = {
     path: string[];
   }) => void;
   clearSelectedIndexesForState: (stateKey: string) => void;
+
+  // --- Core State and Updaters ---
   updaterState: { [key: string]: any };
   initialStateOptions: { [key: string]: OptionsType };
   cogsStateStore: { [key: string]: StateValue };
   isLoadingGlobal: { [key: string]: boolean };
-
   initialStateGlobal: { [key: string]: StateValue };
   iniitialCreatedState: { [key: string]: StateValue };
-  validationErrors: Map<string, string[]>;
-
   serverState: { [key: string]: StateValue };
-  serverSyncActions: { [key: string]: SyncActionsType<any> };
-
-  serverSyncLog: { [key: string]: SyncLogType[] };
-  serverSideOrNot: { [key: string]: boolean };
-  setServerSyncLog: (key: string, newValue: SyncLogType) => void;
-
-  setServerSideOrNot: (key: string, value: boolean) => void;
-  getServerSideOrNot: (key: string) => boolean | undefined;
-  setServerState: <StateKey extends StateKeys>(
-    key: StateKey,
-    value: StateValue
-  ) => void;
 
-  getThisLocalUpdate: (key: string) => UpdateTypeDetail[] | undefined;
-  setServerSyncActions: (key: string, value: SyncActionsType<any>) => void;
-  addValidationError: (path: string, message: string) => void;
-  getValidationErrors: (path: string) => string[];
-  updateInitialStateGlobal: (key: string, newState: StateValue) => void;
-  updateInitialCreatedState: (key: string, newState: StateValue) => void;
-  getInitialOptions: (key: string) => OptionsType | undefined;
   getUpdaterState: (key: string) => StateUpdater<StateValue>;
   setUpdaterState: (key: string, newUpdater: any) => void;
   getKeyState: <StateKey extends StateKeys>(key: StateKey) => StateValue;
@@ -178,15 +161,41 @@ export type CogsGlobalState = {
   ) => void;
   setInitialStates: (initialState: StateValue) => void;
   setCreatedState: (initialState: StateValue) => void;
+  updateInitialStateGlobal: (key: string, newState: StateValue) => void;
+  updateInitialCreatedState: (key: string, newState: StateValue) => void;
+  setIsLoadingGlobal: (key: string, value: boolean) => void;
+  setServerState: <StateKey extends StateKeys>(
+    key: StateKey,
+    value: StateValue
+  ) => void;
+  getInitialOptions: (key: string) => OptionsType | undefined;
+  setInitialStateOptions: (key: string, value: OptionsType) => void;
+
+  // --- Validation ---
+  validationErrors: Map<string, string[]>;
+  addValidationError: (path: string, message: string) => void;
+  getValidationErrors: (path: string) => string[];
+  removeValidationError: (path: string) => void;
+
+  // --- Server Sync and Logging ---
+  serverSyncActions: { [key: string]: SyncActionsType<any> };
+  serverSyncLog: { [key: string]: SyncLogType[] };
   stateLog: { [key: string]: UpdateTypeDetail[] };
+  syncInfoStore: Map<string, SyncInfo>;
+  serverSideOrNot: { [key: string]: boolean };
+  setServerSyncLog: (key: string, newValue: SyncLogType) => void;
+  setServerSideOrNot: (key: string, value: boolean) => void;
+  getServerSideOrNot: (key: string) => boolean | undefined;
+  getThisLocalUpdate: (key: string) => UpdateTypeDetail[] | undefined;
+  setServerSyncActions: (key: string, value: SyncActionsType<any>) => void;
   setStateLog: (
     key: string,
     updater: (prevUpdates: UpdateTypeDetail[]) => UpdateTypeDetail[]
   ) => void;
-  setIsLoadingGlobal: (key: string, value: boolean) => void;
+  setSyncInfo: (key: string, syncInfo: SyncInfo) => void;
+  getSyncInfo: (key: string) => SyncInfo | null;
 
-  setInitialStateOptions: (key: string, value: OptionsType) => void;
-  removeValidationError: (path: string) => void;
+  // --- Component and DOM Integration ---
   signalDomElements: Map<
     string,
     Set<{
@@ -208,8 +217,10 @@ export type CogsGlobalState = {
     }
   ) => void;
   removeSignalElement: (signalId: string, instanceId: string) => void;
-  reRenderTriggerPrevValue: Record<string, any>;
+  stateComponents: Map<string, ComponentsType>;
 
+  // --- Deprecated/Legacy (Review for removal) ---
+  reRenderTriggerPrevValue: Record<string, any>;
   reactiveDeps: Record<
     string,
     {
@@ -228,11 +239,6 @@ export type CogsGlobalState = {
   ) => void;
   deleteReactiveDeps: (key: string) => void;
   subscribe: (listener: () => void) => () => void;
-
-  stateComponents: Map<string, ComponentsType>;
-  syncInfoStore: Map<string, SyncInfo>;
-  setSyncInfo: (key: string, syncInfo: SyncInfo) => void;
-  getSyncInfo: (key: string) => SyncInfo | null;
 };
 
 export const getGlobalStore = create<CogsGlobalState>((set, get) => ({
@@ -250,30 +256,6 @@ export const getGlobalStore = create<CogsGlobalState>((set, get) => ({
     return current;
   },
 
-  setShadowMetadata: (key: string, path: string[], metadata: any) => {
-    set((state) => {
-      const newShadow = { ...state.shadowStateStore };
-      if (!newShadow[key]) return state;
-
-      newShadow[key] = JSON.parse(JSON.stringify(newShadow[key]));
-
-      let current: any = newShadow[key];
-      for (const segment of path) {
-        if (!current[segment]) current[segment] = {};
-        current = current[segment];
-      }
-
-      // Merge the metadata into the existing structure
-      Object.keys(metadata).forEach((category) => {
-        if (!current[category]) {
-          current[category] = {};
-        }
-        Object.assign(current[category], metadata[category]);
-      });
-
-      return { shadowStateStore: newShadow };
-    });
-  },
   initializeShadowState: (key: string, initialState: any) => {
     const createShadowStructure = (obj: any): any => {
       if (Array.isArray(obj)) {
@@ -389,6 +371,63 @@ export const getGlobalStore = create<CogsGlobalState>((set, get) => ({
       return { shadowStateStore: newShadow };
     });
   },
+  shadowStateSubscribers: new Map<string, Set<() => void>>(), // key -> Set of callbacks
+
+  subscribeToShadowState: (key: string, callback: () => void) => {
+    set((state) => {
+      const newSubs = new Map(state.shadowStateSubscribers);
+      const subsForKey = newSubs.get(key) || new Set();
+      subsForKey.add(callback);
+      newSubs.set(key, subsForKey);
+      return { shadowStateSubscribers: newSubs };
+    });
+    // Return an unsubscribe function
+    return () => {
+      set((state) => {
+        const newSubs = new Map(state.shadowStateSubscribers);
+        const subsForKey = newSubs.get(key);
+        if (subsForKey) {
+          subsForKey.delete(callback);
+        }
+        return { shadowStateSubscribers: newSubs };
+      });
+    };
+  },
+
+  setShadowMetadata: (key: string, path: string[], metadata: any) => {
+    let hasChanged = false;
+    set((state) => {
+      const newShadow = { ...state.shadowStateStore };
+      if (!newShadow[key]) return state;
+
+      newShadow[key] = JSON.parse(JSON.stringify(newShadow[key]));
+
+      let current: any = newShadow[key];
+      for (const segment of path) {
+        if (!current[segment]) current[segment] = {};
+        current = current[segment];
+      }
+
+      const oldHeight = current.virtualizer?.itemHeight;
+      const newHeight = metadata.virtualizer?.itemHeight;
+
+      if (newHeight && oldHeight !== newHeight) {
+        hasChanged = true;
+        if (!current.virtualizer) current.virtualizer = {};
+        current.virtualizer.itemHeight = newHeight;
+      }
+
+      return { shadowStateStore: newShadow };
+    });
+
+    // If a height value was actually changed, notify the specific subscribers.
+    if (hasChanged) {
+      const subscribers = get().shadowStateSubscribers.get(key);
+      if (subscribers) {
+        subscribers.forEach((callback) => callback());
+      }
+    }
+  },
   selectedIndicesMap: new Map<string, Map<string, number>>(),
 
   // Add the new methods