@buoy-gg/zustand 2.1.10 → 2.1.12

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

@@ -1 +1,603 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.ZustandModal=ZustandModal;var _react=require("react"),_reactNative=require("react-native"),_sharedUi=require("@buoy-gg/shared-ui"),_license=require("@buoy-gg/license"),_useZustandStateChanges=require("../hooks/useZustandStateChanges"),_ZustandStateChangeItem=require("./ZustandStateChangeItem"),_ZustandStateDetailContent=require("./ZustandStateDetailContent"),_ZustandStoreBrowser=require("./ZustandStoreBrowser"),_ZustandEventFilterView=require("./ZustandEventFilterView"),_jsxRuntime=require("react/jsx-runtime");const FREE_TIER_CHANGE_LIMIT=25;function EventsEmptyState({isEnabled:e}){return(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.emptyState,children:[(0,_jsxRuntime.jsx)(_sharedUi.Box,{size:32,color:_sharedUi.macOSColors.text.muted}),(0,_jsxRuntime.jsx)(_reactNative.Text,{style:styles.emptyTitle,children:"No state changes"}),(0,_jsxRuntime.jsx)(_reactNative.Text,{style:styles.emptyText,children:e?"State changes will appear here as stores update.":"Enable capture to start recording state changes"})]})}function ZustandModal({visible:e,onClose:t,onBack:a,onMinimize:s,enableSharedModalDimensions:r=!1}){const n=(0,_license.useIsPro)(),[i,o]=(0,_react.useState)(!1),[l,d]=(0,_react.useState)("stores"),[c,u]=(0,_react.useState)(null),[h,_]=(0,_react.useState)(!1),[m,x]=(0,_react.useState)(new Set),{filteredChanges:g,filter:j,setFilter:y,stats:C,stores:S,clearChanges:b,isEnabled:p,toggleCapture:R}=(0,_useZustandStateChanges.useZustandStateChanges)(),U=(0,_react.useMemo)(()=>0===m.size?g:g.filter(e=>!Array.from(m).some(t=>e.storeName.toLowerCase().includes(t.toLowerCase()))),[g,m]),v=(0,_react.useMemo)(()=>0===m.size?S:S.filter(e=>!Array.from(m).some(t=>e.name.toLowerCase().includes(t.toLowerCase()))),[S,m]),T=(0,_react.useMemo)(()=>n?U:U.slice(0,FREE_TIER_CHANGE_LIMIT),[U,n]),f=(0,_react.useMemo)(()=>n?0:Math.max(0,U.length-FREE_TIER_CHANGE_LIMIT),[U.length,n]),k=f>0,w=(0,_react.useMemo)(()=>c?T.filter(e=>e.storeName===c):T,[T,c]),[B,N]=(0,_react.useState)(null),M=(0,_react.useMemo)(()=>{if(null===B)return null;const e=w.findIndex(e=>e.id===B);return e>=0?e:null},[B,w]),E=null!==M?w[M]:null,[I,O]=(0,_react.useState)(""),[z,H]=(0,_react.useState)(!1),Z=(0,_react.useRef)(null),P=(0,_react.useRef)(null),A=(0,_react.useCallback)(e=>{},[]),F=e=>{O(e),"events"===l&&y(t=>({...t,searchText:e}))},V=(0,_react.useCallback)(e=>{N(e.id)},[]),L=(0,_react.useCallback)(()=>{o(!0)},[]),D=(0,_react.useCallback)(()=>{N(null)},[]),q=(0,_react.useCallback)(e=>{const t=w[e];t&&N(t.id)},[w]),K=(0,_react.useCallback)(e=>{u(e),N(null)},[]),W=(0,_react.useCallback)(()=>{u(null),N(null)},[]),G=(0,_react.useCallback)(()=>v.reduce((e,t)=>{try{const a=t.api.getState();if(a&&"object"==typeof a){const s={};for(const[e,t]of Object.entries(a))"function"!=typeof t&&(s[e]=(0,_sharedUi.truncatePayload)(t));e[t.name]=s}else e[t.name]=(0,_sharedUi.truncatePayload)(a)}catch{e[t.name]=null}return e},{}),[v]),$=(0,_react.useCallback)(()=>U.map(e=>({id:e.id,storeName:e.storeName,timestamp:e.timestamp,prevState:(0,_sharedUi.truncatePayload)(e.prevState),nextState:(0,_sharedUi.truncatePayload)(e.nextState),hasStateChange:e.hasStateChange,changedKeys:e.changedKeys})),[U]),J=(0,_react.useCallback)(()=>w.map(e=>({id:e.id,storeName:e.storeName,timestamp:e.timestamp,prevState:(0,_sharedUi.truncatePayload)(e.prevState),nextState:(0,_sharedUi.truncatePayload)(e.nextState),hasStateChange:e.hasStateChange,changedKeys:e.changedKeys})),[w]),Q=(0,_react.useCallback)(e=>{x(t=>{const a=new Set(t);return a.has(e)?a.delete(e):a.add(e),a})},[]),X=(0,_react.useCallback)(e=>{x(t=>new Set([...t,e]))},[]),Y=(0,_react.useCallback)(e=>{d(e),u(null),N(null),_(!1),I&&(O(""),y(e=>({...e,searchText:""}))),H(!1)},[I,y]),ee=(0,_react.useCallback)(e=>e.id,[]),te=(0,_react.useCallback)(({item:e})=>(0,_jsxRuntime.jsx)(_ZustandStateChangeItem.ZustandStateChangeItem,{change:e,onPress:V}),[V]),ae=m.size>0,se=r?_sharedUi.devToolsStorageKeys.modal.root():"buoy-zustand-modal";if(!e)return null;const re=E&&null!==M?(0,_jsxRuntime.jsx)(_ZustandStateDetailContent.ZustandStateDetailFooter,{change:E,changes:w,selectedIndex:M,onIndexChange:q}):null,ne=E&&w.length>1?68:0;return(0,_jsxRuntime.jsxs)(_jsxRuntime.Fragment,{children:[(0,_jsxRuntime.jsx)(_sharedUi.JsModal,{visible:e,onClose:t,onMinimize:s,persistenceKey:se,header:{showToggleButton:!0,customContent:h?(0,_jsxRuntime.jsxs)(_sharedUi.ModalHeader,{children:[(0,_jsxRuntime.jsx)(_sharedUi.ModalHeader.Navigation,{onBack:()=>_(!1)}),(0,_jsxRuntime.jsx)(_sharedUi.ModalHeader.Content,{title:"Filters",centered:!0})]}):E?(0,_jsxRuntime.jsxs)(_sharedUi.ModalHeader,{children:[(0,_jsxRuntime.jsx)(_sharedUi.ModalHeader.Navigation,{onBack:D}),(0,_jsxRuntime.jsx)(_sharedUi.ModalHeader.Content,{title:`${E.storeName}/setState`,centered:!0})]}):c?(0,_jsxRuntime.jsxs)(_sharedUi.ModalHeader,{children:[(0,_jsxRuntime.jsx)(_sharedUi.ModalHeader.Navigation,{onBack:W}),(0,_jsxRuntime.jsx)(_sharedUi.ModalHeader.Content,{title:`${c} History`,centered:!0}),(0,_jsxRuntime.jsx)(_sharedUi.ModalHeader.Actions,{children:(0,_jsxRuntime.jsx)(_sharedUi.ToolbarCopyButton,{value:J,disabled:0===w.length,buttonStyle:styles.headerActionButton})})]}):(0,_jsxRuntime.jsxs)(_sharedUi.ModalHeader,{children:[a&&(0,_jsxRuntime.jsx)(_sharedUi.ModalHeader.Navigation,{onBack:a}),(0,_jsxRuntime.jsx)(_sharedUi.ModalHeader.Content,{title:"",children:z?(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.headerSearchContainer,children:[(0,_jsxRuntime.jsx)(_sharedUi.Search,{size:14,color:_sharedUi.macOSColors.text.secondary}),(0,_jsxRuntime.jsx)(_reactNative.TextInput,{ref:Z,style:styles.headerSearchInput,placeholder:"stores"===l?"Search stores...":"Search events...",placeholderTextColor:_sharedUi.macOSColors.text.muted,value:I,onChangeText:F,onSubmitEditing:()=>H(!1),onBlur:()=>H(!1),autoCapitalize:"none",autoCorrect:!1,returnKeyType:"search"}),I.length>0&&(0,_jsxRuntime.jsx)(_reactNative.TouchableOpacity,{onPress:()=>{F(""),H(!1)},style:styles.headerSearchClear,children:(0,_jsxRuntime.jsx)(_sharedUi.X,{size:14,color:_sharedUi.macOSColors.text.secondary})})]}):(0,_jsxRuntime.jsx)(_sharedUi.TabSelector,{tabs:[{key:"stores",label:"Stores"+(v.length>0?` (${v.length})`:"")},{key:"events",label:"Events"+(U.length>0?` (${U.length})`:"")}],activeTab:l,onTabChange:Y})}),(0,_jsxRuntime.jsxs)(_sharedUi.ModalHeader.Actions,{children:[(0,_jsxRuntime.jsx)(_reactNative.TouchableOpacity,{onPress:()=>H(!0),style:styles.headerActionButton,children:(0,_jsxRuntime.jsx)(_sharedUi.Search,{size:14,color:_sharedUi.macOSColors.text.secondary})}),(0,_jsxRuntime.jsx)(_reactNative.TouchableOpacity,{onPress:()=>_(!0),style:[styles.headerActionButton,ae&&styles.headerActionButtonActive],children:(0,_jsxRuntime.jsx)(_sharedUi.Filter,{size:14,color:ae?_sharedUi.macOSColors.semantic.debug:_sharedUi.macOSColors.text.secondary})}),"stores"===l&&(0,_jsxRuntime.jsx)(_sharedUi.ToolbarCopyButton,{value:G,disabled:0===v.length,buttonStyle:styles.headerActionButton}),"events"===l&&(0,_jsxRuntime.jsxs)(_jsxRuntime.Fragment,{children:[(0,_jsxRuntime.jsx)(_sharedUi.ToolbarCopyButton,{value:$,disabled:0===U.length,buttonStyle:styles.headerActionButton}),(0,_jsxRuntime.jsx)(_sharedUi.PowerToggleButton,{isEnabled:p,onToggle:R,accessibilityLabel:"Toggle Zustand state capture"}),(0,_jsxRuntime.jsx)(_sharedUi.ToolbarClearButton,{onPress:b,disabled:0===U.length,buttonStyle:styles.headerActionButton})]})]})]})},onModeChange:A,enablePersistence:!0,initialMode:"bottomSheet",enableGlitchEffects:!0,styles:{},footer:re,footerHeight:ne,children:(0,_jsxRuntime.jsx)(_reactNative.View,{style:styles.container,children:h?(0,_jsxRuntime.jsx)(_ZustandEventFilterView.ZustandEventFilterView,{ignoredPatterns:m,onTogglePattern:Q,onAddPattern:X,stores:S}):E&&null!==M?(0,_jsxRuntime.jsx)(_ZustandStateDetailContent.ZustandStateDetailContent,{change:E,changes:w,selectedIndex:M,onIndexChange:q,disableInternalFooter:!0}):c?w.length>0?(0,_jsxRuntime.jsx)(_reactNative.FlatList,{data:w,renderItem:te,keyExtractor:ee,contentContainerStyle:styles.listContent,showsVerticalScrollIndicator:!0,removeClippedSubviews:!0,initialNumToRender:15,maxToRenderPerBatch:10,windowSize:10,scrollEnabled:!1}):(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.emptyState,children:[(0,_jsxRuntime.jsx)(_sharedUi.Box,{size:32,color:_sharedUi.macOSColors.text.muted}),(0,_jsxRuntime.jsx)(_reactNative.Text,{style:styles.emptyTitle,children:"No history yet"}),(0,_jsxRuntime.jsxs)(_reactNative.Text,{style:styles.emptyText,children:["State changes for ",c," will appear here."]})]}):"stores"===l?(0,_jsxRuntime.jsx)(_ZustandStoreBrowser.ZustandStoreBrowser,{stores:v,searchQuery:I,onViewHistory:K}):(0,_jsxRuntime.jsxs)(_jsxRuntime.Fragment,{children:[!p&&(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.disabledBanner,children:[(0,_jsxRuntime.jsx)(_sharedUi.Power,{size:14,color:_sharedUi.macOSColors.semantic.warning}),(0,_jsxRuntime.jsx)(_reactNative.Text,{style:styles.disabledText,children:"State capture is disabled"})]}),k&&(0,_jsxRuntime.jsxs)(_reactNative.TouchableOpacity,{style:styles.lockedBanner,onPress:L,activeOpacity:.8,children:[(0,_jsxRuntime.jsx)(_sharedUi.Lock,{size:14,color:_sharedUi.buoyColors.primary}),(0,_jsxRuntime.jsxs)(_reactNative.Text,{style:styles.lockedText,children:[f," older"," ",1===f?"change":"changes"," locked"]}),(0,_jsxRuntime.jsx)(_reactNative.View,{style:styles.upgradeBadge,children:(0,_jsxRuntime.jsx)(_reactNative.Text,{style:styles.upgradeBadgeText,children:"UPGRADE"})})]}),T.length>0?(0,_jsxRuntime.jsx)(_reactNative.FlatList,{ref:P,data:T,renderItem:te,keyExtractor:ee,contentContainerStyle:styles.listContent,showsVerticalScrollIndicator:!0,removeClippedSubviews:!0,initialNumToRender:15,maxToRenderPerBatch:10,windowSize:10,scrollEnabled:!1}):(0,_jsxRuntime.jsx)(EventsEmptyState,{isEnabled:p})]})})}),(0,_jsxRuntime.jsx)(_sharedUi.ProUpgradeModal,{visible:i,onClose:()=>o(!1),featureName:"Full State History"})]})}const styles=_reactNative.StyleSheet.create({container:{flex:1,backgroundColor:_sharedUi.macOSColors.background.base},headerSearchContainer:{flexDirection:"row",alignItems:"center",backgroundColor:_sharedUi.macOSColors.background.input,borderRadius:10,borderWidth:1,borderColor:_sharedUi.macOSColors.border.default,paddingHorizontal:12,paddingVertical:5},headerSearchInput:{flex:1,color:_sharedUi.macOSColors.text.primary,fontSize:13,marginLeft:6,paddingVertical:2},headerSearchClear:{marginLeft:6,padding:4},headerActionButton:{width:32,height:32,borderRadius:8,backgroundColor:_sharedUi.macOSColors.background.hover,borderWidth:1,borderColor:_sharedUi.macOSColors.border.default,alignItems:"center",justifyContent:"center"},headerActionButtonDisabled:{opacity:.55},headerActionButtonActive:{backgroundColor:_sharedUi.macOSColors.semantic.infoBackground},disabledBanner:{flexDirection:"row",alignItems:"center",gap:8,padding:10,marginHorizontal:12,marginTop:8,backgroundColor:_sharedUi.macOSColors.semantic.warningBackground,borderRadius:8,borderWidth:1,borderColor:_sharedUi.macOSColors.semantic.warning+"20"},disabledText:{color:_sharedUi.macOSColors.semantic.warning,fontSize:11,flex:1},listContent:{paddingTop:8,paddingBottom:20},emptyState:{alignItems:"center",paddingVertical:40},emptyTitle:{color:_sharedUi.macOSColors.text.primary,fontSize:14,fontWeight:"600",marginTop:12,marginBottom:6},emptyText:{color:_sharedUi.macOSColors.text.muted,fontSize:12,textAlign:"center",lineHeight:18},lockedBanner:{flexDirection:"row",alignItems:"center",gap:8,padding:10,marginHorizontal:12,marginTop:8,backgroundColor:_sharedUi.buoyColors.primary+"15",borderRadius:8,borderWidth:1,borderColor:_sharedUi.buoyColors.primary+"33"},lockedText:{color:_sharedUi.buoyColors.primary,fontSize:11,fontWeight:"500",flex:1},upgradeBadge:{backgroundColor:_sharedUi.buoyColors.primary,paddingHorizontal:8,paddingVertical:3,borderRadius:4},upgradeBadgeText:{color:"#fff",fontSize:9,fontWeight:"700",letterSpacing:.5}});
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ZustandModal = ZustandModal;
+var _react = require("react");
+var _reactNative = require("react-native");
+var _sharedUi = require("@buoy-gg/shared-ui");
+var _license = require("@buoy-gg/license");
+var _useZustandStateChanges = require("../hooks/useZustandStateChanges");
+var _ZustandStateChangeItem = require("./ZustandStateChangeItem");
+var _ZustandStateDetailContent = require("./ZustandStateDetailContent");
+var _ZustandStoreBrowser = require("./ZustandStoreBrowser");
+var _ZustandEventFilterView = require("./ZustandEventFilterView");
+var _jsxRuntime = require("react/jsx-runtime");
+/**
+ * Main Zustand DevTools modal
+ *
+ * Two tabs mirroring the Storage DevTools pattern:
+ * - Stores tab: Browse all registered stores and their current state
+ * - Events tab: Live state change monitoring with diffs
+ */
+
+/** Free tier limit for change history */
+const FREE_TIER_CHANGE_LIMIT = 25;
+function EventsEmptyState({
+  isEnabled
+}) {
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+    style: styles.emptyState,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.Box, {
+      size: 32,
+      color: _sharedUi.macOSColors.text.muted
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+      style: styles.emptyTitle,
+      children: "No state changes"
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+      style: styles.emptyText,
+      children: isEnabled ? "State changes will appear here as stores update." : "Enable capture to start recording state changes"
+    })]
+  });
+}
+function ZustandModal({
+  visible,
+  onClose,
+  onBack,
+  onMinimize,
+  enableSharedModalDimensions = false
+}) {
+  const isPro = (0, _license.useIsPro)();
+  const [showProModal, setShowProModal] = (0, _react.useState)(false);
+  const [activeTab, setActiveTab] = (0, _react.useState)("stores");
+  const [selectedHistoryStore, setSelectedHistoryStore] = (0, _react.useState)(null);
+  const [showFilters, setShowFilters] = (0, _react.useState)(false);
+  const [ignoredPatterns, setIgnoredPatterns] = (0, _react.useState)(new Set());
+  const {
+    filteredChanges,
+    filter,
+    setFilter,
+    stats,
+    stores,
+    clearChanges,
+    isEnabled,
+    toggleCapture
+  } = (0, _useZustandStateChanges.useZustandStateChanges)();
+
+  // Apply ignored patterns on top of hook's filteredChanges
+  const displayedChanges = (0, _react.useMemo)(() => {
+    if (ignoredPatterns.size === 0) return filteredChanges;
+    return filteredChanges.filter(c => !Array.from(ignoredPatterns).some(p => c.storeName.toLowerCase().includes(p.toLowerCase())));
+  }, [filteredChanges, ignoredPatterns]);
+
+  // Apply ignored patterns to stores list too
+  const displayedStores = (0, _react.useMemo)(() => {
+    if (ignoredPatterns.size === 0) return stores;
+    return stores.filter(s => !Array.from(ignoredPatterns).some(p => s.name.toLowerCase().includes(p.toLowerCase())));
+  }, [stores, ignoredPatterns]);
+
+  // For free users, limit visible changes
+  const visibleChanges = (0, _react.useMemo)(() => {
+    if (isPro) return displayedChanges;
+    return displayedChanges.slice(0, FREE_TIER_CHANGE_LIMIT);
+  }, [displayedChanges, isPro]);
+  const lockedChangeCount = (0, _react.useMemo)(() => {
+    if (isPro) return 0;
+    return Math.max(0, displayedChanges.length - FREE_TIER_CHANGE_LIMIT);
+  }, [displayedChanges.length, isPro]);
+  const hasLockedChanges = lockedChangeCount > 0;
+
+  // When viewing a single store's history, scope the change list to that store
+  const activeChanges = (0, _react.useMemo)(() => {
+    if (selectedHistoryStore) {
+      return visibleChanges.filter(c => c.storeName === selectedHistoryStore);
+    }
+    return visibleChanges;
+  }, [visibleChanges, selectedHistoryStore]);
+
+  // Selection state — track by ID so new events don't shift position
+  const [selectedChangeId, setSelectedChangeId] = (0, _react.useState)(null);
+  const selectedChangeIndex = (0, _react.useMemo)(() => {
+    if (selectedChangeId === null) return null;
+    const idx = activeChanges.findIndex(c => c.id === selectedChangeId);
+    return idx >= 0 ? idx : null;
+  }, [selectedChangeId, activeChanges]);
+  const selectedChange = selectedChangeIndex !== null ? activeChanges[selectedChangeIndex] : null;
+
+  // Search state — shared across tabs
+  const [searchText, setSearchText] = (0, _react.useState)("");
+  const [isSearchActive, setIsSearchActive] = (0, _react.useState)(false);
+  const searchInputRef = (0, _react.useRef)(null);
+  const flatListRef = (0, _react.useRef)(null);
+  const handleModeChange = (0, _react.useCallback)(_mode => {}, []);
+  const handleSearch = text => {
+    setSearchText(text);
+    if (activeTab === "events") {
+      setFilter(prev => ({
+        ...prev,
+        searchText: text
+      }));
+    }
+  };
+  const handleChangePress = (0, _react.useCallback)(change => {
+    setSelectedChangeId(change.id);
+  }, []);
+  const handleUpgradePress = (0, _react.useCallback)(() => {
+    setShowProModal(true);
+  }, []);
+  const handleBack = (0, _react.useCallback)(() => {
+    setSelectedChangeId(null);
+  }, []);
+  const handleIndexChange = (0, _react.useCallback)(newIndex => {
+    const change = activeChanges[newIndex];
+    if (change) {
+      setSelectedChangeId(change.id);
+    }
+  }, [activeChanges]);
+  const handleViewHistory = (0, _react.useCallback)(storeName => {
+    setSelectedHistoryStore(storeName);
+    setSelectedChangeId(null);
+  }, []);
+  const handleBackFromHistory = (0, _react.useCallback)(() => {
+    setSelectedHistoryStore(null);
+    setSelectedChangeId(null);
+  }, []);
+  const getStoresSnapshot = (0, _react.useCallback)(() => {
+    return displayedStores.reduce((acc, store) => {
+      try {
+        const state = store.api.getState();
+        if (state && typeof state === "object") {
+          const filtered = {};
+          for (const [key, value] of Object.entries(state)) {
+            if (typeof value !== "function") filtered[key] = (0, _sharedUi.truncatePayload)(value);
+          }
+          acc[store.name] = filtered;
+        } else {
+          acc[store.name] = (0, _sharedUi.truncatePayload)(state);
+        }
+      } catch {
+        acc[store.name] = null;
+      }
+      return acc;
+    }, {});
+  }, [displayedStores]);
+  const getEventsSnapshot = (0, _react.useCallback)(() => {
+    return displayedChanges.map(change => ({
+      id: change.id,
+      storeName: change.storeName,
+      timestamp: change.timestamp,
+      prevState: (0, _sharedUi.truncatePayload)(change.prevState),
+      nextState: (0, _sharedUi.truncatePayload)(change.nextState),
+      hasStateChange: change.hasStateChange,
+      changedKeys: change.changedKeys
+    }));
+  }, [displayedChanges]);
+  const getHistorySnapshot = (0, _react.useCallback)(() => {
+    return activeChanges.map(change => ({
+      id: change.id,
+      storeName: change.storeName,
+      timestamp: change.timestamp,
+      prevState: (0, _sharedUi.truncatePayload)(change.prevState),
+      nextState: (0, _sharedUi.truncatePayload)(change.nextState),
+      hasStateChange: change.hasStateChange,
+      changedKeys: change.changedKeys
+    }));
+  }, [activeChanges]);
+  const handleTogglePattern = (0, _react.useCallback)(pattern => {
+    setIgnoredPatterns(prev => {
+      const next = new Set(prev);
+      if (next.has(pattern)) next.delete(pattern);else next.add(pattern);
+      return next;
+    });
+  }, []);
+  const handleAddPattern = (0, _react.useCallback)(pattern => {
+    setIgnoredPatterns(prev => new Set([...prev, pattern]));
+  }, []);
+  const handleTabChange = (0, _react.useCallback)(tab => {
+    setActiveTab(tab);
+    setSelectedHistoryStore(null);
+    setSelectedChangeId(null);
+    setShowFilters(false);
+    if (searchText) {
+      setSearchText("");
+      setFilter(prev => ({
+        ...prev,
+        searchText: ""
+      }));
+    }
+    setIsSearchActive(false);
+  }, [searchText, setFilter]);
+  const keyExtractor = (0, _react.useCallback)(item => item.id, []);
+  const renderItem = (0, _react.useCallback)(({
+    item
+  }) => {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ZustandStateChangeItem.ZustandStateChangeItem, {
+      change: item,
+      onPress: handleChangePress
+    });
+  }, [handleChangePress]);
+
+  // ---- Header rendering ----
+
+  const hasActiveFilters = ignoredPatterns.size > 0;
+  const renderHeaderContent = () => {
+    // Filter view header
+    if (showFilters) {
+      return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_sharedUi.ModalHeader, {
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.ModalHeader.Navigation, {
+          onBack: () => setShowFilters(false)
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.ModalHeader.Content, {
+          title: "Filters",
+          centered: true
+        })]
+      });
+    }
+
+    // Change detail header
+    if (selectedChange) {
+      return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_sharedUi.ModalHeader, {
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.ModalHeader.Navigation, {
+          onBack: handleBack
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.ModalHeader.Content, {
+          title: `${selectedChange.storeName}/setState`,
+          centered: true
+        })]
+      });
+    }
+
+    // Store history header
+    if (selectedHistoryStore) {
+      return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_sharedUi.ModalHeader, {
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.ModalHeader.Navigation, {
+          onBack: handleBackFromHistory
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.ModalHeader.Content, {
+          title: `${selectedHistoryStore} History`,
+          centered: true
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.ModalHeader.Actions, {
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.ToolbarCopyButton, {
+            value: getHistorySnapshot,
+            disabled: activeChanges.length === 0,
+            buttonStyle: styles.headerActionButton
+          })
+        })]
+      });
+    }
+
+    // Main view with tabs
+    return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_sharedUi.ModalHeader, {
+      children: [onBack && /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.ModalHeader.Navigation, {
+        onBack: onBack
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.ModalHeader.Content, {
+        title: "",
+        children: isSearchActive ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+          style: styles.headerSearchContainer,
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.Search, {
+            size: 14,
+            color: _sharedUi.macOSColors.text.secondary
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TextInput, {
+            ref: searchInputRef,
+            style: styles.headerSearchInput,
+            placeholder: activeTab === "stores" ? "Search stores..." : "Search events...",
+            placeholderTextColor: _sharedUi.macOSColors.text.muted,
+            value: searchText,
+            onChangeText: handleSearch,
+            onSubmitEditing: () => setIsSearchActive(false),
+            onBlur: () => setIsSearchActive(false),
+            autoCapitalize: "none",
+            autoCorrect: false,
+            returnKeyType: "search"
+          }), searchText.length > 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
+            onPress: () => {
+              handleSearch("");
+              setIsSearchActive(false);
+            },
+            style: styles.headerSearchClear,
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.X, {
+              size: 14,
+              color: _sharedUi.macOSColors.text.secondary
+            })
+          })]
+        }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.TabSelector, {
+          tabs: [{
+            key: "stores",
+            label: `Stores${displayedStores.length > 0 ? ` (${displayedStores.length})` : ""}`
+          }, {
+            key: "events",
+            label: `Events${displayedChanges.length > 0 ? ` (${displayedChanges.length})` : ""}`
+          }],
+          activeTab: activeTab,
+          onTabChange: handleTabChange
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_sharedUi.ModalHeader.Actions, {
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
+          onPress: () => setIsSearchActive(true),
+          style: styles.headerActionButton,
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.Search, {
+            size: 14,
+            color: _sharedUi.macOSColors.text.secondary
+          })
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
+          onPress: () => setShowFilters(true),
+          style: [styles.headerActionButton, hasActiveFilters && styles.headerActionButtonActive],
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.Filter, {
+            size: 14,
+            color: hasActiveFilters ? _sharedUi.macOSColors.semantic.debug : _sharedUi.macOSColors.text.secondary
+          })
+        }), activeTab === "stores" && /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.ToolbarCopyButton, {
+          value: getStoresSnapshot,
+          disabled: displayedStores.length === 0,
+          buttonStyle: styles.headerActionButton
+        }), activeTab === "events" && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.ToolbarCopyButton, {
+            value: getEventsSnapshot,
+            disabled: displayedChanges.length === 0,
+            buttonStyle: styles.headerActionButton
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.PowerToggleButton, {
+            isEnabled: isEnabled,
+            onToggle: toggleCapture,
+            accessibilityLabel: "Toggle Zustand state capture"
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.ToolbarClearButton, {
+            onPress: clearChanges,
+            disabled: displayedChanges.length === 0,
+            buttonStyle: styles.headerActionButton
+          })]
+        })]
+      })]
+    });
+  };
+
+  // ---- Content rendering ----
+
+  const renderContent = () => {
+    // Filter view (applies to both tabs)
+    if (showFilters) {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ZustandEventFilterView.ZustandEventFilterView, {
+        ignoredPatterns: ignoredPatterns,
+        onTogglePattern: handleTogglePattern,
+        onAddPattern: handleAddPattern,
+        stores: stores
+      });
+    }
+
+    // Change detail view (works for both events tab and store history)
+    if (selectedChange && selectedChangeIndex !== null) {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ZustandStateDetailContent.ZustandStateDetailContent, {
+        change: selectedChange,
+        changes: activeChanges,
+        selectedIndex: selectedChangeIndex,
+        onIndexChange: handleIndexChange,
+        disableInternalFooter: true
+      });
+    }
+
+    // Store history view — filtered to one store
+    if (selectedHistoryStore) {
+      return activeChanges.length > 0 ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.FlatList, {
+        data: activeChanges,
+        renderItem: renderItem,
+        keyExtractor: keyExtractor,
+        contentContainerStyle: styles.listContent,
+        showsVerticalScrollIndicator: true,
+        removeClippedSubviews: true,
+        initialNumToRender: 15,
+        maxToRenderPerBatch: 10,
+        windowSize: 10,
+        scrollEnabled: false
+      }) : /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+        style: styles.emptyState,
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.Box, {
+          size: 32,
+          color: _sharedUi.macOSColors.text.muted
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+          style: styles.emptyTitle,
+          children: "No history yet"
+        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Text, {
+          style: styles.emptyText,
+          children: ["State changes for ", selectedHistoryStore, " will appear here."]
+        })]
+      });
+    }
+
+    // Stores browse tab
+    if (activeTab === "stores") {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ZustandStoreBrowser.ZustandStoreBrowser, {
+        stores: displayedStores,
+        searchQuery: searchText,
+        onViewHistory: handleViewHistory
+      });
+    }
+
+    // Events tab
+    return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+      children: [!isEnabled && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+        style: styles.disabledBanner,
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.Power, {
+          size: 14,
+          color: _sharedUi.macOSColors.semantic.warning
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+          style: styles.disabledText,
+          children: "State capture is disabled"
+        })]
+      }), hasLockedChanges && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.TouchableOpacity, {
+        style: styles.lockedBanner,
+        onPress: handleUpgradePress,
+        activeOpacity: 0.8,
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.Lock, {
+          size: 14,
+          color: _sharedUi.buoyColors.primary
+        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Text, {
+          style: styles.lockedText,
+          children: [lockedChangeCount, " older", " ", lockedChangeCount === 1 ? "change" : "changes", " locked"]
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+          style: styles.upgradeBadge,
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+            style: styles.upgradeBadgeText,
+            children: "UPGRADE"
+          })
+        })]
+      }), visibleChanges.length > 0 ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.FlatList, {
+        ref: flatListRef,
+        data: visibleChanges,
+        renderItem: renderItem,
+        keyExtractor: keyExtractor,
+        contentContainerStyle: styles.listContent,
+        showsVerticalScrollIndicator: true,
+        removeClippedSubviews: true,
+        initialNumToRender: 15,
+        maxToRenderPerBatch: 10,
+        windowSize: 10,
+        scrollEnabled: false
+      }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(EventsEmptyState, {
+        isEnabled: isEnabled
+      })]
+    });
+  };
+  const persistenceKey = enableSharedModalDimensions ? _sharedUi.devToolsStorageKeys.modal.root() : "buoy-zustand-modal";
+  if (!visible) return null;
+  const footerNode = selectedChange && selectedChangeIndex !== null ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_ZustandStateDetailContent.ZustandStateDetailFooter, {
+    change: selectedChange,
+    changes: activeChanges,
+    selectedIndex: selectedChangeIndex,
+    onIndexChange: handleIndexChange
+  }) : null;
+  const footerHeight = selectedChange && activeChanges.length > 1 ? 68 : 0;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_sharedUi.TickProvider, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.JsModal, {
+      visible: visible,
+      onClose: onClose,
+      onMinimize: onMinimize,
+      persistenceKey: persistenceKey,
+      header: {
+        showToggleButton: true,
+        customContent: renderHeaderContent()
+      },
+      onModeChange: handleModeChange,
+      enablePersistence: true,
+      initialMode: "bottomSheet",
+      enableGlitchEffects: true,
+      styles: {},
+      footer: footerNode,
+      footerHeight: footerHeight,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+        style: styles.container,
+        children: renderContent()
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.ProUpgradeModal, {
+      visible: showProModal,
+      onClose: () => setShowProModal(false),
+      featureName: "Full State History"
+    })]
+  });
+}
+const styles = _reactNative.StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: _sharedUi.macOSColors.background.base
+  },
+  headerSearchContainer: {
+    flexDirection: "row",
+    alignItems: "center",
+    backgroundColor: _sharedUi.macOSColors.background.input,
+    borderRadius: 10,
+    borderWidth: 1,
+    borderColor: _sharedUi.macOSColors.border.default,
+    paddingHorizontal: 12,
+    paddingVertical: 5
+  },
+  headerSearchInput: {
+    flex: 1,
+    color: _sharedUi.macOSColors.text.primary,
+    fontSize: 13,
+    marginLeft: 6,
+    paddingVertical: 2
+  },
+  headerSearchClear: {
+    marginLeft: 6,
+    padding: 4
+  },
+  headerActionButton: {
+    width: 32,
+    height: 32,
+    borderRadius: 8,
+    backgroundColor: _sharedUi.macOSColors.background.hover,
+    borderWidth: 1,
+    borderColor: _sharedUi.macOSColors.border.default,
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  headerActionButtonDisabled: {
+    opacity: 0.55
+  },
+  headerActionButtonActive: {
+    backgroundColor: _sharedUi.macOSColors.semantic.infoBackground
+  },
+  disabledBanner: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 8,
+    padding: 10,
+    marginHorizontal: 12,
+    marginTop: 8,
+    backgroundColor: _sharedUi.macOSColors.semantic.warningBackground,
+    borderRadius: 8,
+    borderWidth: 1,
+    borderColor: _sharedUi.macOSColors.semantic.warning + "20"
+  },
+  disabledText: {
+    color: _sharedUi.macOSColors.semantic.warning,
+    fontSize: 11,
+    flex: 1
+  },
+  listContent: {
+    paddingTop: 8,
+    paddingBottom: 20
+  },
+  emptyState: {
+    alignItems: "center",
+    paddingVertical: 40
+  },
+  emptyTitle: {
+    color: _sharedUi.macOSColors.text.primary,
+    fontSize: 14,
+    fontWeight: "600",
+    marginTop: 12,
+    marginBottom: 6
+  },
+  emptyText: {
+    color: _sharedUi.macOSColors.text.muted,
+    fontSize: 12,
+    textAlign: "center",
+    lineHeight: 18
+  },
+  lockedBanner: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 8,
+    padding: 10,
+    marginHorizontal: 12,
+    marginTop: 8,
+    backgroundColor: _sharedUi.buoyColors.primary + "15",
+    borderRadius: 8,
+    borderWidth: 1,
+    borderColor: _sharedUi.buoyColors.primary + "33"
+  },
+  lockedText: {
+    color: _sharedUi.buoyColors.primary,
+    fontSize: 11,
+    fontWeight: "500",
+    flex: 1
+  },
+  upgradeBadge: {
+    backgroundColor: _sharedUi.buoyColors.primary,
+    paddingHorizontal: 8,
+    paddingVertical: 3,
+    borderRadius: 4
+  },
+  upgradeBadgeText: {
+    color: "#fff",
+    fontSize: 9,
+    fontWeight: "700",
+    letterSpacing: 0.5
+  }
+});