@buoy-gg/zustand 5.0.0 → 6.0.0

package/lib/commonjs/zustand/components/ZustandModal.js

@@ -380,10 +380,10 @@ function ZustandModal({
         contentContainerStyle: styles.listContent,
         showsVerticalScrollIndicator: true,
         removeClippedSubviews: true,
-        initialNumToRender: 15,
-        maxToRenderPerBatch: 10,
-        windowSize: 10,
-        scrollEnabled: false
+        initialNumToRender: 12,
+        maxToRenderPerBatch: 8,
+        windowSize: 5,
+        updateCellsBatchingPeriod: 50
       }) : /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
         style: styles.emptyState,
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.Box, {
@@ -444,10 +444,10 @@ function ZustandModal({
         contentContainerStyle: styles.listContent,
         showsVerticalScrollIndicator: true,
         removeClippedSubviews: true,
-        initialNumToRender: 15,
-        maxToRenderPerBatch: 10,
-        windowSize: 10,
-        scrollEnabled: false
+        initialNumToRender: 12,
+        maxToRenderPerBatch: 8,
+        windowSize: 5,
+        updateCellsBatchingPeriod: 50
       }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(EventsEmptyState, {
         isEnabled: isEnabled
       })]
@@ -462,6 +462,12 @@ function ZustandModal({
     onIndexChange: handleIndexChange
   }) : null;
   const footerHeight = selectedChange && activeChanges.length > 1 ? 68 : 0;
+
+  // The change lists own their scrolling so FlatList virtualization works
+  // (inside JsModal's ScrollView wrapper every row mounts — the Network
+  // tool measured 17 JS FPS / 133% CPU at max load from this exact
+  // pattern; see tool-bench batches 2026-07-06).
+  const listOwnsScroll = !showFilters && !(selectedChange && selectedChangeIndex !== null) && (selectedHistoryStore != null || activeTab === "events");
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_sharedUi.TickProvider, {
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.JsModal, {
       visible: visible,
@@ -476,6 +482,7 @@ function ZustandModal({
       enablePersistence: true,
       initialMode: "bottomSheet",
       enableGlitchEffects: true,
+      disableScrollWrapper: listOwnsScroll,
       styles: {},
       footer: footerNode,
       footerHeight: footerHeight,

package/lib/commonjs/zustand/components/ZustandStateChangeItem.js

@@ -3,7 +3,8 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.ZustandStateChangeItem = ZustandStateChangeItem;
+exports.ZustandStateChangeItem = void 0;
+var _react = require("react");
 var _reactNative = require("react-native");
 var _sharedUi = require("@buoy-gg/shared-ui");
 var _zustandStateStore = require("../utils/zustandStateStore");
@@ -88,7 +89,11 @@ function getPrimaryText(change) {
   }
   return change.partialPreview || "setState()";
 }
-function ZustandStateChangeItem({
+
+// Memo justified by profiling (tool-bench 2026-07-06): unmemoized, every
+// visible row re-rendered on each store emission. Leaf w/ stable props
+// ({change, onPress} — onPress is a stable useCallback in the modal).
+const ZustandStateChangeItem = exports.ZustandStateChangeItem = /*#__PURE__*/(0, _react.memo)(function ZustandStateChangeItem({
   change,
   onPress
 }) {
@@ -97,7 +102,6 @@ function ZustandStateChangeItem({
   const sublabel = getSublabel(change);
   const primaryText = getPrimaryText(change);
   const badgeText = getBadgeText(change);
-  const relativeTime = (0, _sharedUi.useRelativeTime)(change.timestamp);
   let customBadge = undefined;
   if (change.isSlowUpdate) {
     customBadge = /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
@@ -137,14 +141,16 @@ function ZustandStateChangeItem({
     statusLabel: statusLabel,
     statusSublabel: sublabel,
     primaryText: primaryText,
-    bottomRightText: relativeTime,
+    bottomRightText: /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.RelativeTime, {
+      timestamp: change.timestamp
+    }),
     customBadge: customBadge,
     badgeText: customBadge ? undefined : badgeText,
     badgeColor: statusColor,
     showChevron: true,
     onPress: () => onPress(change)
   });
-}
+});
 const styles = _reactNative.StyleSheet.create({
   badgeContainer: {
     flexDirection: "row",

package/lib/module/zustand/components/ZustandModal.js

@@ -376,10 +376,10 @@ export function ZustandModal({
         contentContainerStyle: styles.listContent,
         showsVerticalScrollIndicator: true,
         removeClippedSubviews: true,
-        initialNumToRender: 15,
-        maxToRenderPerBatch: 10,
-        windowSize: 10,
-        scrollEnabled: false
+        initialNumToRender: 12,
+        maxToRenderPerBatch: 8,
+        windowSize: 5,
+        updateCellsBatchingPeriod: 50
       }) : /*#__PURE__*/_jsxs(View, {
         style: styles.emptyState,
         children: [/*#__PURE__*/_jsx(Box, {
@@ -440,10 +440,10 @@ export function ZustandModal({
         contentContainerStyle: styles.listContent,
         showsVerticalScrollIndicator: true,
         removeClippedSubviews: true,
-        initialNumToRender: 15,
-        maxToRenderPerBatch: 10,
-        windowSize: 10,
-        scrollEnabled: false
+        initialNumToRender: 12,
+        maxToRenderPerBatch: 8,
+        windowSize: 5,
+        updateCellsBatchingPeriod: 50
       }) : /*#__PURE__*/_jsx(EventsEmptyState, {
         isEnabled: isEnabled
       })]
@@ -458,6 +458,12 @@ export function ZustandModal({
     onIndexChange: handleIndexChange
   }) : null;
   const footerHeight = selectedChange && activeChanges.length > 1 ? 68 : 0;
+
+  // The change lists own their scrolling so FlatList virtualization works
+  // (inside JsModal's ScrollView wrapper every row mounts — the Network
+  // tool measured 17 JS FPS / 133% CPU at max load from this exact
+  // pattern; see tool-bench batches 2026-07-06).
+  const listOwnsScroll = !showFilters && !(selectedChange && selectedChangeIndex !== null) && (selectedHistoryStore != null || activeTab === "events");
   return /*#__PURE__*/_jsxs(TickProvider, {
     children: [/*#__PURE__*/_jsx(JsModal, {
       visible: visible,
@@ -472,6 +478,7 @@ export function ZustandModal({
       enablePersistence: true,
       initialMode: "bottomSheet",
       enableGlitchEffects: true,
+      disableScrollWrapper: listOwnsScroll,
       styles: {},
       footer: footerNode,
       footerHeight: footerHeight,

package/lib/module/zustand/components/ZustandStateChangeItem.js

@@ -6,8 +6,9 @@
  * Mirrors ReduxActionItem.tsx - uses shared CompactRow for consistent styling
  */
 
+import { memo } from "react";
 import { View, Text, StyleSheet } from "react-native";
-import { CompactRow, buoyColors, Zap, Clock, useRelativeTime } from "@buoy-gg/shared-ui";
+import { CompactRow, buoyColors, Zap, Clock, RelativeTime } from "@buoy-gg/shared-ui";
 import { zustandStateStore } from "../utils/zustandStateStore";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /**
@@ -84,7 +85,11 @@ function getPrimaryText(change) {
   }
   return change.partialPreview || "setState()";
 }
-export function ZustandStateChangeItem({
+
+// Memo justified by profiling (tool-bench 2026-07-06): unmemoized, every
+// visible row re-rendered on each store emission. Leaf w/ stable props
+// ({change, onPress} — onPress is a stable useCallback in the modal).
+export const ZustandStateChangeItem = /*#__PURE__*/memo(function ZustandStateChangeItem({
   change,
   onPress
 }) {
@@ -93,7 +98,6 @@ export function ZustandStateChangeItem({
   const sublabel = getSublabel(change);
   const primaryText = getPrimaryText(change);
   const badgeText = getBadgeText(change);
-  const relativeTime = useRelativeTime(change.timestamp);
   let customBadge = undefined;
   if (change.isSlowUpdate) {
     customBadge = /*#__PURE__*/_jsxs(View, {
@@ -133,14 +137,16 @@ export function ZustandStateChangeItem({
     statusLabel: statusLabel,
     statusSublabel: sublabel,
     primaryText: primaryText,
-    bottomRightText: relativeTime,
+    bottomRightText: /*#__PURE__*/_jsx(RelativeTime, {
+      timestamp: change.timestamp
+    }),
     customBadge: customBadge,
     badgeText: customBadge ? undefined : badgeText,
     badgeColor: statusColor,
     showChevron: true,
     onPress: () => onPress(change)
   });
-}
+});
 const styles = StyleSheet.create({
   badgeContainer: {
     flexDirection: "row",

package/lib/typescript/zustand/components/ZustandModal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ZustandModal.d.ts","sourceRoot":"","sources":["../../../../src/zustand/components/ZustandModal.tsx"],"names":[],"mappings":"AAAA;;;;;;GAMG;AA2CH,OAAO,KAAK,EAAE,iBAAiB,EAAsB,MAAM,UAAU,CAAC;AAqBtE,wBAAgB,YAAY,CAAC,EAC3B,OAAO,EACP,OAAO,EACP,MAAM,EACN,UAAU,EACV,2BAAmC,GACpC,EAAE,iBAAiB,sCAuhBnB"}
+{"version":3,"file":"ZustandModal.d.ts","sourceRoot":"","sources":["../../../../src/zustand/components/ZustandModal.tsx"],"names":[],"mappings":"AAAA;;;;;;GAMG;AA2CH,OAAO,KAAK,EAAE,iBAAiB,EAAsB,MAAM,UAAU,CAAC;AAqBtE,wBAAgB,YAAY,CAAC,EAC3B,OAAO,EACP,OAAO,EACP,MAAM,EACN,UAAU,EACV,2BAAmC,GACpC,EAAE,iBAAiB,sCAiiBnB"}

package/lib/typescript/zustand/components/ZustandStateChangeItem.d.ts

@@ -8,6 +8,6 @@ interface ZustandStateChangeItemProps {
     change: ZustandStateChange;
     onPress: (change: ZustandStateChange) => void;
 }
-export declare function ZustandStateChangeItem({ change, onPress, }: ZustandStateChangeItemProps): import("react").JSX.Element;
+export declare const ZustandStateChangeItem: import("react").NamedExoticComponent<ZustandStateChangeItemProps>;
 export {};
 //# sourceMappingURL=ZustandStateChangeItem.d.ts.map

package/lib/typescript/zustand/components/ZustandStateChangeItem.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ZustandStateChangeItem.d.ts","sourceRoot":"","sources":["../../../../src/zustand/components/ZustandStateChangeItem.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AAIH,OAAO,KAAK,EAAE,kBAAkB,EAAuB,MAAM,UAAU,CAAC;AAGxE,UAAU,2BAA2B;IACnC,MAAM,EAAE,kBAAkB,CAAC;IAC3B,OAAO,EAAE,CAAC,MAAM,EAAE,kBAAkB,KAAK,IAAI,CAAC;CAC/C;AAwFD,wBAAgB,sBAAsB,CAAC,EACrC,MAAM,EACN,OAAO,GACR,EAAE,2BAA2B,+BAgD7B"}
+{"version":3,"file":"ZustandStateChangeItem.d.ts","sourceRoot":"","sources":["../../../../src/zustand/components/ZustandStateChangeItem.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AAKH,OAAO,KAAK,EAAE,kBAAkB,EAAuB,MAAM,UAAU,CAAC;AAGxE,UAAU,2BAA2B;IACnC,MAAM,EAAE,kBAAkB,CAAC;IAC3B,OAAO,EAAE,CAAC,MAAM,EAAE,kBAAkB,KAAK,IAAI,CAAC;CAC/C;AA2FD,eAAO,MAAM,sBAAsB,mEAkDjC,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@buoy-gg/zustand",
-  "version": "5.0.0",
+  "version": "6.0.0",
   "description": "Zustand store DevTools for React Native",
   "main": "lib/commonjs/index.js",
   "module": "lib/module/index.js",
@@ -26,8 +26,8 @@
   ],
   "sideEffects": false,
   "dependencies": {
-    "@buoy-gg/shared-ui": "5.0.0",
-    "@buoy-gg/license": "5.0.0"
+    "@buoy-gg/shared-ui": "6.0.0",
+    "@buoy-gg/license": "6.0.0"
   },
   "peerDependencies": {
     "react": "*",