@buoy-gg/jotai 3.0.1 → 4.0.1

package/lib/module/jotai/components/JotaiModal.js

@@ -1 +1,563 @@
-"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,Box,devToolsStorageKeys,ProUpgradeModal,PowerToggleButton,ToolbarCopyButton,ToolbarClearButton,truncatePayload,TickProvider}from"@buoy-gg/shared-ui";import{useIsPro}from"@buoy-gg/license";import{useJotaiAtomChanges}from"../hooks/useJotaiAtomChanges";import{JotaiAtomChangeItem}from"./JotaiAtomChangeItem";import{JotaiAtomDetailContent,JotaiAtomDetailFooter}from"./JotaiAtomDetailContent";import{JotaiAtomBrowser}from"./JotaiAtomBrowser";import{JotaiEventFilterView}from"./JotaiEventFilterView";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 atom changes"}),_jsx(Text,{style:styles.emptyText,children:e?"Atom changes will appear here as values update.":"Enable capture to start recording atom changes"})]})}export function JotaiModal({visible:e,onClose:t,onBack:o,onMinimize:a,enableSharedModalDimensions:l=!1}){const r=useIsPro(),[s,n]=useState(!1),[i,d]=useState("atoms"),[c,u]=useState(null),[m,h]=useState(!1),[g,y]=useState(new Set),{filteredChanges:x,filter:b,setFilter:C,atoms:p,clearChanges:S,isEnabled:_,toggleCapture:j}=useJotaiAtomChanges(),T=useMemo(()=>0===g.size?x:x.filter(e=>!Array.from(g).some(t=>e.atomLabel.toLowerCase().includes(t.toLowerCase()))),[x,g]),f=useMemo(()=>0===g.size?p:p.filter(e=>!Array.from(g).some(t=>e.label.toLowerCase().includes(t.toLowerCase()))),[p,g]),k=useMemo(()=>r?T:T.slice(0,25),[T,r]),w=useMemo(()=>r?0:Math.max(0,T.length-25),[T.length,r]),B=w>0,v=useMemo(()=>c?k.filter(e=>e.atomLabel===c):k,[k,c]),[A,M]=useState(null),V=useMemo(()=>{if(null===A)return null;const e=v.findIndex(e=>e.id===A);return e>=0?e:null},[A,v]),P=null!==V?v[V]:null,[O,I]=useState(""),[z,E]=useState(!1),H=useRef(null),J=useRef(null),F=useCallback(e=>{},[]),L=e=>{I(e),"events"===i&&C(t=>({...t,searchText:e}))},R=useCallback(e=>{M(e.id)},[]),D=useCallback(()=>{n(!0)},[]),N=useCallback(()=>{M(null)},[]),K=useCallback(e=>{const t=v[e];t&&M(t.id)},[v]),W=useCallback(e=>{u(e),M(null)},[]),$=useCallback(()=>{u(null),M(null)},[]),G=useCallback(()=>f.reduce((e,t)=>{try{const o=t.getValue();e[t.label]=truncatePayload(o)}catch{e[t.label]=null}return e},{}),[f]),U=useCallback(()=>T.map(e=>({id:e.id,atomLabel:e.atomLabel,timestamp:e.timestamp,prevValue:truncatePayload(e.prevValue),nextValue:truncatePayload(e.nextValue),hasValueChange:e.hasValueChange,changedKeys:e.changedKeys})),[T]),Q=useCallback(()=>v.map(e=>({id:e.id,atomLabel:e.atomLabel,timestamp:e.timestamp,prevValue:truncatePayload(e.prevValue),nextValue:truncatePayload(e.nextValue),hasValueChange:e.hasValueChange,changedKeys:e.changedKeys})),[v]),q=useCallback(e=>{y(t=>{const o=new Set(t);return o.has(e)?o.delete(e):o.add(e),o})},[]),Y=useCallback(e=>{y(t=>new Set([...t,e]))},[]),Z=useCallback(e=>{d(e),u(null),M(null),h(!1),O&&(I(""),C(e=>({...e,searchText:""}))),E(!1)},[O,C]),ee=useCallback(e=>e.id,[]),te=useCallback(({item:e})=>_jsx(JotaiAtomChangeItem,{change:e,onPress:R}),[R]),oe=g.size>0,ae=l?devToolsStorageKeys.modal.root():"buoy-jotai-modal";if(!e)return null;const le=P&&null!==V?_jsx(JotaiAtomDetailFooter,{change:P,changes:v,selectedIndex:V,onIndexChange:K}):null,re=P&&v.length>1?68:0;return _jsxs(TickProvider,{children:[_jsx(JsModal,{visible:e,onClose:t,onMinimize:a,persistenceKey:ae,header:{showToggleButton:!0,customContent:_jsxs(ModalHeader,m?{children:[_jsx(ModalHeader.Navigation,{onBack:()=>h(!1)}),_jsx(ModalHeader.Content,{title:"Filters",centered:!0})]}:P?{children:[_jsx(ModalHeader.Navigation,{onBack:N}),_jsx(ModalHeader.Content,{title:`${P.atomLabel}/${P.category}`,centered:!0})]}:c?{children:[_jsx(ModalHeader.Navigation,{onBack:$}),_jsx(ModalHeader.Content,{title:`${c} History`,centered:!0}),_jsx(ModalHeader.Actions,{children:_jsx(ToolbarCopyButton,{value:Q,disabled:0===v.length,buttonStyle:styles.headerActionButton})})]}:{children:[o&&_jsx(ModalHeader.Navigation,{onBack:o}),_jsx(ModalHeader.Content,{title:"",children:z?_jsxs(View,{style:styles.headerSearchContainer,children:[_jsx(Search,{size:14,color:macOSColors.text.secondary}),_jsx(TextInput,{ref:H,style:styles.headerSearchInput,placeholder:"atoms"===i?"Search atoms...":"Search events...",placeholderTextColor:macOSColors.text.muted,value:O,onChangeText:L,onSubmitEditing:()=>E(!1),onBlur:()=>E(!1),autoCapitalize:"none",autoCorrect:!1,returnKeyType:"search"}),O.length>0&&_jsx(TouchableOpacity,{onPress:()=>{L(""),E(!1)},style:styles.headerSearchClear,children:_jsx(X,{size:14,color:macOSColors.text.secondary})})]}):_jsx(TabSelector,{tabs:[{key:"atoms",label:"Atoms"+(f.length>0?` (${f.length})`:"")},{key:"events",label:"Events"+(T.length>0?` (${T.length})`:"")}],activeTab:i,onTabChange:Z})}),_jsxs(ModalHeader.Actions,{children:[_jsx(TouchableOpacity,{onPress:()=>E(!0),style:styles.headerActionButton,children:_jsx(Search,{size:14,color:macOSColors.text.secondary})}),_jsx(TouchableOpacity,{onPress:()=>h(!0),style:[styles.headerActionButton,oe&&styles.headerActionButtonActive],children:_jsx(Filter,{size:14,color:oe?macOSColors.semantic.debug:macOSColors.text.secondary})}),"atoms"===i&&_jsx(ToolbarCopyButton,{value:G,disabled:0===f.length,buttonStyle:styles.headerActionButton}),"events"===i&&_jsxs(_Fragment,{children:[_jsx(ToolbarCopyButton,{value:U,disabled:0===T.length,buttonStyle:styles.headerActionButton}),_jsx(PowerToggleButton,{isEnabled:_,onToggle:j,accessibilityLabel:"Toggle Jotai atom capture"}),_jsx(ToolbarClearButton,{onPress:S,disabled:0===T.length,buttonStyle:styles.headerActionButton})]})]})]})},onModeChange:F,enablePersistence:!0,initialMode:"bottomSheet",enableGlitchEffects:!0,styles:{},footer:le,footerHeight:re,children:_jsx(View,{style:styles.container,children:m?_jsx(JotaiEventFilterView,{ignoredPatterns:g,onTogglePattern:q,onAddPattern:Y,atoms:p}):P&&null!==V?_jsx(JotaiAtomDetailContent,{change:P,changes:v,selectedIndex:V,onIndexChange:K,disableInternalFooter:!0}):c?v.length>0?_jsx(FlatList,{data:v,renderItem:te,keyExtractor:ee,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:["Changes for ",c," will appear here."]})]}):"atoms"===i?_jsx(JotaiAtomBrowser,{atoms:f,searchQuery:O,onViewHistory:W}):_jsxs(_Fragment,{children:[!_&&_jsxs(View,{style:styles.disabledBanner,children:[_jsx(Power,{size:14,color:macOSColors.semantic.warning}),_jsx(Text,{style:styles.disabledText,children:"Atom capture is disabled"})]}),B&&_jsxs(TouchableOpacity,{style:styles.lockedBanner,onPress:D,activeOpacity:.8,children:[_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"})})]}),k.length>0?_jsx(FlatList,{ref:J,data:k,renderItem:te,keyExtractor:ee,contentContainerStyle:styles.listContent,showsVerticalScrollIndicator:!0,removeClippedSubviews:!0,initialNumToRender:15,maxToRenderPerBatch:10,windowSize:10,scrollEnabled:!1}):_jsx(EventsEmptyState,{isEnabled:_})]})})}),_jsx(ProUpgradeModal,{visible:s,onClose:()=>n(!1),featureName:"Full Atom 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"},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}});
+"use strict";
+
+/**
+ * Main Jotai DevTools modal
+ *
+ * Two tabs mirroring the Zustand DevTools pattern:
+ * - Atoms tab: Browse all registered atoms and their current value
+ * - Events tab: Live atom 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, Box, devToolsStorageKeys, ProUpgradeModal, PowerToggleButton, ToolbarCopyButton, ToolbarClearButton, truncatePayload, TickProvider } from "@buoy-gg/shared-ui";
+import { useIsPro } from "@buoy-gg/license";
+import { useJotaiAtomChanges } from "../hooks/useJotaiAtomChanges";
+import { JotaiAtomChangeItem } from "./JotaiAtomChangeItem";
+import { JotaiAtomDetailContent, JotaiAtomDetailFooter } from "./JotaiAtomDetailContent";
+import { JotaiAtomBrowser } from "./JotaiAtomBrowser";
+import { JotaiEventFilterView } from "./JotaiEventFilterView";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+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 atom changes"
+    }), /*#__PURE__*/_jsx(Text, {
+      style: styles.emptyText,
+      children: isEnabled ? "Atom changes will appear here as values update." : "Enable capture to start recording atom changes"
+    })]
+  });
+}
+export function JotaiModal({
+  visible,
+  onClose,
+  onBack,
+  onMinimize,
+  enableSharedModalDimensions = false
+}) {
+  const isPro = useIsPro();
+  const [showProModal, setShowProModal] = useState(false);
+  const [activeTab, setActiveTab] = useState("atoms");
+  const [selectedHistoryAtom, setSelectedHistoryAtom] = useState(null);
+  const [showFilters, setShowFilters] = useState(false);
+  const [ignoredPatterns, setIgnoredPatterns] = useState(new Set());
+  const {
+    filteredChanges,
+    filter,
+    setFilter,
+    atoms,
+    clearChanges,
+    isEnabled,
+    toggleCapture
+  } = useJotaiAtomChanges();
+
+  // Apply ignored patterns on top of filteredChanges
+  const displayedChanges = useMemo(() => {
+    if (ignoredPatterns.size === 0) return filteredChanges;
+    return filteredChanges.filter(c => !Array.from(ignoredPatterns).some(p => c.atomLabel.toLowerCase().includes(p.toLowerCase())));
+  }, [filteredChanges, ignoredPatterns]);
+
+  // Apply ignored patterns to atoms list
+  const displayedAtoms = useMemo(() => {
+    if (ignoredPatterns.size === 0) return atoms;
+    return atoms.filter(a => !Array.from(ignoredPatterns).some(p => a.label.toLowerCase().includes(p.toLowerCase())));
+  }, [atoms, ignoredPatterns]);
+
+  // Free-tier gate
+  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 atom's history, scope the list
+  const activeChanges = useMemo(() => {
+    if (selectedHistoryAtom) {
+      return visibleChanges.filter(c => c.atomLabel === selectedHistoryAtom);
+    }
+    return visibleChanges;
+  }, [visibleChanges, selectedHistoryAtom]);
+  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
+  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(atomLabel => {
+    setSelectedHistoryAtom(atomLabel);
+    setSelectedChangeId(null);
+  }, []);
+  const handleBackFromHistory = useCallback(() => {
+    setSelectedHistoryAtom(null);
+    setSelectedChangeId(null);
+  }, []);
+  const getAtomsSnapshot = useCallback(() => {
+    return displayedAtoms.reduce((acc, atom) => {
+      try {
+        const value = atom.getValue();
+        acc[atom.label] = truncatePayload(value);
+      } catch {
+        acc[atom.label] = null;
+      }
+      return acc;
+    }, {});
+  }, [displayedAtoms]);
+  const getEventsSnapshot = useCallback(() => {
+    return displayedChanges.map(change => ({
+      id: change.id,
+      atomLabel: change.atomLabel,
+      timestamp: change.timestamp,
+      prevValue: truncatePayload(change.prevValue),
+      nextValue: truncatePayload(change.nextValue),
+      hasValueChange: change.hasValueChange,
+      changedKeys: change.changedKeys
+    }));
+  }, [displayedChanges]);
+  const getHistorySnapshot = useCallback(() => {
+    return activeChanges.map(change => ({
+      id: change.id,
+      atomLabel: change.atomLabel,
+      timestamp: change.timestamp,
+      prevValue: truncatePayload(change.prevValue),
+      nextValue: truncatePayload(change.nextValue),
+      hasValueChange: change.hasValueChange,
+      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);
+    setSelectedHistoryAtom(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
+  }) => /*#__PURE__*/_jsx(JotaiAtomChangeItem, {
+    change: item,
+    onPress: handleChangePress
+  }), [handleChangePress]);
+
+  // ---- Header ----
+
+  const hasActiveFilters = ignoredPatterns.size > 0;
+  const renderHeaderContent = () => {
+    if (showFilters) {
+      return /*#__PURE__*/_jsxs(ModalHeader, {
+        children: [/*#__PURE__*/_jsx(ModalHeader.Navigation, {
+          onBack: () => setShowFilters(false)
+        }), /*#__PURE__*/_jsx(ModalHeader.Content, {
+          title: "Filters",
+          centered: true
+        })]
+      });
+    }
+    if (selectedChange) {
+      return /*#__PURE__*/_jsxs(ModalHeader, {
+        children: [/*#__PURE__*/_jsx(ModalHeader.Navigation, {
+          onBack: handleBack
+        }), /*#__PURE__*/_jsx(ModalHeader.Content, {
+          title: `${selectedChange.atomLabel}/${selectedChange.category}`,
+          centered: true
+        })]
+      });
+    }
+    if (selectedHistoryAtom) {
+      return /*#__PURE__*/_jsxs(ModalHeader, {
+        children: [/*#__PURE__*/_jsx(ModalHeader.Navigation, {
+          onBack: handleBackFromHistory
+        }), /*#__PURE__*/_jsx(ModalHeader.Content, {
+          title: `${selectedHistoryAtom} History`,
+          centered: true
+        }), /*#__PURE__*/_jsx(ModalHeader.Actions, {
+          children: /*#__PURE__*/_jsx(ToolbarCopyButton, {
+            value: getHistorySnapshot,
+            disabled: activeChanges.length === 0,
+            buttonStyle: styles.headerActionButton
+          })
+        })]
+      });
+    }
+    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 === "atoms" ? "Search atoms..." : "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: "atoms",
+            label: `Atoms${displayedAtoms.length > 0 ? ` (${displayedAtoms.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 === "atoms" && /*#__PURE__*/_jsx(ToolbarCopyButton, {
+          value: getAtomsSnapshot,
+          disabled: displayedAtoms.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 Jotai atom capture"
+          }), /*#__PURE__*/_jsx(ToolbarClearButton, {
+            onPress: clearChanges,
+            disabled: displayedChanges.length === 0,
+            buttonStyle: styles.headerActionButton
+          })]
+        })]
+      })]
+    });
+  };
+
+  // ---- Content ----
+
+  const renderContent = () => {
+    if (showFilters) {
+      return /*#__PURE__*/_jsx(JotaiEventFilterView, {
+        ignoredPatterns: ignoredPatterns,
+        onTogglePattern: handleTogglePattern,
+        onAddPattern: handleAddPattern,
+        atoms: atoms
+      });
+    }
+    if (selectedChange && selectedChangeIndex !== null) {
+      return /*#__PURE__*/_jsx(JotaiAtomDetailContent, {
+        change: selectedChange,
+        changes: activeChanges,
+        selectedIndex: selectedChangeIndex,
+        onIndexChange: handleIndexChange,
+        disableInternalFooter: true
+      });
+    }
+    if (selectedHistoryAtom) {
+      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: ["Changes for ", selectedHistoryAtom, " will appear here."]
+        })]
+      });
+    }
+    if (activeTab === "atoms") {
+      return /*#__PURE__*/_jsx(JotaiAtomBrowser, {
+        atoms: displayedAtoms,
+        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: "Atom capture is disabled"
+        })]
+      }), hasLockedChanges && /*#__PURE__*/_jsxs(TouchableOpacity, {
+        style: styles.lockedBanner,
+        onPress: handleUpgradePress,
+        activeOpacity: 0.8,
+        children: [/*#__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-jotai-modal";
+  if (!visible) return null;
+  const footerNode = selectedChange && selectedChangeIndex !== null ? /*#__PURE__*/_jsx(JotaiAtomDetailFooter, {
+    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 Atom 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"
+  },
+  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
+  }
+});

package/lib/module/jotai/components/index.js

@@ -1 +1,8 @@
-"use strict";export{JotaiModal}from"./JotaiModal";export{JotaiIcon,JOTAI_ICON_COLOR}from"./JotaiIcon";export{JotaiAtomChangeItem}from"./JotaiAtomChangeItem";export{JotaiAtomDetailContent,JotaiAtomDetailFooter}from"./JotaiAtomDetailContent";export{JotaiAtomBrowser}from"./JotaiAtomBrowser";export{JotaiEventFilterView}from"./JotaiEventFilterView";
+"use strict";
+
+export { JotaiModal } from "./JotaiModal";
+export { JotaiIcon, JOTAI_ICON_COLOR } from "./JotaiIcon";
+export { JotaiAtomChangeItem } from "./JotaiAtomChangeItem";
+export { JotaiAtomDetailContent, JotaiAtomDetailFooter } from "./JotaiAtomDetailContent";
+export { JotaiAtomBrowser } from "./JotaiAtomBrowser";
+export { JotaiEventFilterView } from "./JotaiEventFilterView";

package/lib/module/jotai/hooks/useJotaiAtomChanges.js

@@ -1 +1,79 @@
-"use strict";import{useState,useEffect,useMemo,useCallback}from"react";import{jotaiStateStore}from"../utils/jotaiStateStore";export function useJotaiAtomChanges(){const[e,t]=useState(()=>jotaiStateStore.getAtomChanges()),[a,o]=useState(()=>jotaiStateStore.getAtoms()),[s,l]=useState({}),[r,n]=useState(()=>jotaiStateStore.getEnabled());useEffect(()=>{const e=jotaiStateStore.subscribe(e=>{t(e)}),a=jotaiStateStore.subscribeToAtoms(e=>{o(e)});return()=>{e(),a()}},[]);const u=useMemo(()=>{let t=e;if(s.searchText){const e=s.searchText.toLowerCase();t=t.filter(t=>t.atomLabel.toLowerCase().includes(e)||t.valuePreview.toLowerCase().includes(e)||t.changedKeys.some(t=>t.toLowerCase().includes(e)))}return s.atomLabels&&s.atomLabels.length>0&&(t=t.filter(e=>s.atomLabels.includes(e.atomLabel))),s.onlyWithChanges&&(t=t.filter(e=>e.hasValueChange)),t},[e,s]),i=useMemo(()=>{const t=e.length,o=e.filter(e=>e.hasValueChange).length;return{totalChanges:t,changesWithValueChange:o,changesWithoutValueChange:t-o,atomCount:a.length}},[e,a]),g=useMemo(()=>jotaiStateStore.getUniqueAtomLabels(),[a]),c=useCallback(()=>{jotaiStateStore.clearAtomChanges()},[]),h=useCallback(()=>{const e=!r;jotaiStateStore.setEnabled(e),n(e)},[r]),S=useCallback(e=>jotaiStateStore.getAtomChangeById(e),[]);return{atomChanges:e,filteredChanges:u,filter:s,setFilter:l,stats:i,atoms:a,clearChanges:c,isEnabled:r,toggleCapture:h,atomLabels:g,getChangeById:S}}
+"use strict";
+
+/**
+ * Hook for consuming Jotai atom changes from the store
+ *
+ * Mirrors useZustandStateChanges.ts from @buoy-gg/zustand
+ */
+
+import { useState, useEffect, useMemo, useCallback } from "react";
+import { jotaiStateStore } from "../utils/jotaiStateStore";
+export function useJotaiAtomChanges() {
+  const [atomChanges, setAtomChanges] = useState(() => jotaiStateStore.getAtomChanges());
+  const [atoms, setAtoms] = useState(() => jotaiStateStore.getAtoms());
+  const [filter, setFilter] = useState({});
+  const [isEnabled, setIsEnabled] = useState(() => jotaiStateStore.getEnabled());
+  useEffect(() => {
+    const unsubChanges = jotaiStateStore.subscribe(newChanges => {
+      setAtomChanges(newChanges);
+    });
+    const unsubAtoms = jotaiStateStore.subscribeToAtoms(newAtoms => {
+      setAtoms(newAtoms);
+    });
+    return () => {
+      unsubChanges();
+      unsubAtoms();
+    };
+  }, []);
+  const filteredChanges = useMemo(() => {
+    let filtered = atomChanges;
+    if (filter.searchText) {
+      const search = filter.searchText.toLowerCase();
+      filtered = filtered.filter(c => c.atomLabel.toLowerCase().includes(search) || c.valuePreview.toLowerCase().includes(search) || c.changedKeys.some(k => k.toLowerCase().includes(search)));
+    }
+    if (filter.atomLabels && filter.atomLabels.length > 0) {
+      filtered = filtered.filter(c => filter.atomLabels.includes(c.atomLabel));
+    }
+    if (filter.onlyWithChanges) {
+      filtered = filtered.filter(c => c.hasValueChange);
+    }
+    return filtered;
+  }, [atomChanges, filter]);
+  const stats = useMemo(() => {
+    const total = atomChanges.length;
+    const withChanges = atomChanges.filter(c => c.hasValueChange).length;
+    return {
+      totalChanges: total,
+      changesWithValueChange: withChanges,
+      changesWithoutValueChange: total - withChanges,
+      atomCount: atoms.length
+    };
+  }, [atomChanges, atoms]);
+  const atomLabels = useMemo(() => {
+    return jotaiStateStore.getUniqueAtomLabels();
+  }, [atoms]);
+  const clearChanges = useCallback(() => {
+    jotaiStateStore.clearAtomChanges();
+  }, []);
+  const toggleCapture = useCallback(() => {
+    const newEnabled = !isEnabled;
+    jotaiStateStore.setEnabled(newEnabled);
+    setIsEnabled(newEnabled);
+  }, [isEnabled]);
+  const getChangeById = useCallback(id => {
+    return jotaiStateStore.getAtomChangeById(id);
+  }, []);
+  return {
+    atomChanges,
+    filteredChanges,
+    filter,
+    setFilter,
+    stats,
+    atoms,
+    clearChanges,
+    isEnabled,
+    toggleCapture,
+    atomLabels,
+    getChangeById
+  };
+}

package/lib/module/jotai/index.js

@@ -1 +1,10 @@
-"use strict";export{JotaiModal}from"./components/JotaiModal";export{JotaiIcon,JOTAI_ICON_COLOR}from"./components/JotaiIcon";export{JotaiAtomChangeItem}from"./components/JotaiAtomChangeItem";export{JotaiAtomDetailContent,JotaiAtomDetailFooter}from"./components/JotaiAtomDetailContent";export{JotaiAtomBrowser}from"./components/JotaiAtomBrowser";export{jotaiStateStore}from"./utils/jotaiStateStore";export{watchAtoms,watchDefaultStoreAtoms,isAtomWatched}from"./utils/watchAtoms";export{useJotaiAtomChanges}from"./hooks/useJotaiAtomChanges";
+"use strict";
+
+export { JotaiModal } from "./components/JotaiModal";
+export { JotaiIcon, JOTAI_ICON_COLOR } from "./components/JotaiIcon";
+export { JotaiAtomChangeItem } from "./components/JotaiAtomChangeItem";
+export { JotaiAtomDetailContent, JotaiAtomDetailFooter } from "./components/JotaiAtomDetailContent";
+export { JotaiAtomBrowser } from "./components/JotaiAtomBrowser";
+export { jotaiStateStore } from "./utils/jotaiStateStore";
+export { watchAtoms, watchDefaultStoreAtoms, isAtomWatched } from "./utils/watchAtoms";
+export { useJotaiAtomChanges } from "./hooks/useJotaiAtomChanges";