@buoy-gg/zustand 2.1.11 → 2.1.13

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

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