@buoy-gg/zustand 3.0.1 → 3.0.2

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

@@ -1 +1,112 @@
-"use strict";import{TouchableOpacity,Text,View,StyleSheet}from"react-native";import{buoyColors}from"@buoy-gg/shared-ui";import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";const buttonConfigs={copy:{color:buoyColors.primary,backgroundColor:buoyColors.primary+"15",borderColor:buoyColors.primary+"40",textColor:buoyColors.primary},reset:{color:buoyColors.warning,backgroundColor:buoyColors.warning+"15",borderColor:buoyColors.warning+"40",textColor:buoyColors.warning},clear:{color:buoyColors.error,backgroundColor:buoyColors.error+"15",borderColor:buoyColors.error+"40",textColor:buoyColors.error},jump:{color:buoyColors.warning,backgroundColor:buoyColors.warning+"15",borderColor:buoyColors.warning+"40",textColor:buoyColors.warning}};export function ZustandActionButton({onPress:o,text:r,type:t,disabled:e=!1}){const s=buttonConfigs[t];return _jsxs(TouchableOpacity,{disabled:e,onPress:o,style:[styles.button,{backgroundColor:e?buoyColors.textMuted+"1A":s.backgroundColor,borderColor:e?buoyColors.textMuted+"33":s.borderColor,opacity:e?.5:1}],activeOpacity:.7,accessibilityRole:"button",accessibilityLabel:r,accessibilityState:{disabled:e},children:[_jsx(View,{style:[styles.dot,{backgroundColor:e?buoyColors.textMuted:s.color}]}),_jsx(Text,{style:[styles.text,{color:e?buoyColors.textMuted:s.textColor}],children:r})]})}const styles=StyleSheet.create({button:{flexDirection:"row",alignItems:"center",justifyContent:"center",borderRadius:6,borderWidth:1,paddingHorizontal:12,paddingVertical:6,height:25,minWidth:80,shadowOffset:{width:0,height:1},shadowOpacity:.2,shadowRadius:2,elevation:2},dot:{width:5,height:5,borderRadius:3,marginRight:6,shadowColor:buoyColors.text,shadowOffset:{width:0,height:0},shadowOpacity:.6,shadowRadius:2},text:{fontSize:10,fontWeight:"600",letterSpacing:.5,textTransform:"uppercase",fontFamily:"monospace",height:12}});
+"use strict";
+
+/**
+ * ZustandActionButton
+ *
+ * Generic action button for Zustand DevTools footer.
+ * Mirrors ReduxActionButton.tsx
+ */
+
+import { TouchableOpacity, Text, View, StyleSheet } from "react-native";
+import { buoyColors } from "@buoy-gg/shared-ui";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const buttonConfigs = {
+  copy: {
+    color: buoyColors.primary,
+    backgroundColor: buoyColors.primary + "15",
+    borderColor: buoyColors.primary + "40",
+    textColor: buoyColors.primary
+  },
+  reset: {
+    color: buoyColors.warning,
+    backgroundColor: buoyColors.warning + "15",
+    borderColor: buoyColors.warning + "40",
+    textColor: buoyColors.warning
+  },
+  clear: {
+    color: buoyColors.error,
+    backgroundColor: buoyColors.error + "15",
+    borderColor: buoyColors.error + "40",
+    textColor: buoyColors.error
+  },
+  jump: {
+    color: buoyColors.warning,
+    backgroundColor: buoyColors.warning + "15",
+    borderColor: buoyColors.warning + "40",
+    textColor: buoyColors.warning
+  }
+};
+export function ZustandActionButton({
+  onPress,
+  text,
+  type,
+  disabled = false
+}) {
+  const config = buttonConfigs[type];
+  return /*#__PURE__*/_jsxs(TouchableOpacity, {
+    disabled: disabled,
+    onPress: onPress,
+    style: [styles.button, {
+      backgroundColor: disabled ? buoyColors.textMuted + "1A" : config.backgroundColor,
+      borderColor: disabled ? buoyColors.textMuted + "33" : config.borderColor,
+      opacity: disabled ? 0.5 : 1
+    }],
+    activeOpacity: 0.7,
+    accessibilityRole: "button",
+    accessibilityLabel: text,
+    accessibilityState: {
+      disabled
+    },
+    children: [/*#__PURE__*/_jsx(View, {
+      style: [styles.dot, {
+        backgroundColor: disabled ? buoyColors.textMuted : config.color
+      }]
+    }), /*#__PURE__*/_jsx(Text, {
+      style: [styles.text, {
+        color: disabled ? buoyColors.textMuted : config.textColor
+      }],
+      children: text
+    })]
+  });
+}
+const styles = StyleSheet.create({
+  button: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "center",
+    borderRadius: 6,
+    borderWidth: 1,
+    paddingHorizontal: 12,
+    paddingVertical: 6,
+    height: 25,
+    minWidth: 80,
+    shadowOffset: {
+      width: 0,
+      height: 1
+    },
+    shadowOpacity: 0.2,
+    shadowRadius: 2,
+    elevation: 2
+  },
+  dot: {
+    width: 5,
+    height: 5,
+    borderRadius: 3,
+    marginRight: 6,
+    shadowColor: buoyColors.text,
+    shadowOffset: {
+      width: 0,
+      height: 0
+    },
+    shadowOpacity: 0.6,
+    shadowRadius: 2
+  },
+  text: {
+    fontSize: 10,
+    fontWeight: "600",
+    letterSpacing: 0.5,
+    textTransform: "uppercase",
+    fontFamily: "monospace",
+    height: 12
+  }
+});

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

@@ -1 +1,129 @@
-"use strict";import React,{memo}from"react";import{View,Text,TouchableOpacity,StyleSheet}from"react-native";import{macOSColors,FileText,Database,GitBranch}from"@buoy-gg/shared-ui";import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";const VIEW_CONFIGS=[{key:"change",label:"CHANGE",description:"View change details",icon:FileText,activeColor:macOSColors.semantic.warning},{key:"state",label:"STATE",description:"View current state",icon:Database,activeColor:macOSColors.semantic.info},{key:"diff",label:"DIFF",description:"Compare changes",icon:GitBranch,activeColor:macOSColors.semantic.success}];export const ZustandDetailViewToggle=memo(function({activeView:e,onViewChange:o,diffDisabled:t=!1}){return _jsx(View,{style:styles.container,children:VIEW_CONFIGS.map(a=>{const r=e===a.key,c="diff"===a.key&&t,s=a.icon;return _jsxs(TouchableOpacity,{style:[styles.card,r&&[styles.cardActive,{borderColor:a.activeColor}],c&&styles.cardDisabled],onPress:()=>!c&&o(a.key),activeOpacity:c?1:.8,disabled:c,children:[_jsxs(View,{style:styles.cardContent,children:[_jsx(s,{size:14,color:r?a.activeColor:c?macOSColors.text.muted:macOSColors.text.secondary}),_jsx(Text,{style:[styles.cardLabel,r&&[styles.cardLabelActive,{color:a.activeColor}],c&&styles.cardLabelDisabled],children:a.label})]}),_jsx(Text,{style:[styles.cardDescription,r&&styles.cardDescriptionActive,c&&styles.cardDescriptionDisabled],children:a.description})]},a.key)})})});const styles=StyleSheet.create({container:{flexDirection:"row",gap:8,padding:14,backgroundColor:macOSColors.background.base},card:{flex:1,backgroundColor:macOSColors.background.card,borderRadius:12,borderWidth:1,borderColor:macOSColors.border.default,padding:10,gap:4},cardActive:{borderWidth:1.5,backgroundColor:"rgba(0, 184, 230, 0.05)",shadowColor:macOSColors.semantic.info,shadowOffset:{width:0,height:2},shadowOpacity:.1,shadowRadius:8,elevation:3},cardDisabled:{opacity:.5},cardContent:{flexDirection:"row",alignItems:"center",gap:6},cardLabel:{fontSize:10,fontWeight:"700",letterSpacing:.5,color:macOSColors.text.secondary},cardLabelActive:{color:macOSColors.text.primary},cardLabelDisabled:{color:macOSColors.text.muted},cardDescription:{fontSize:9,color:macOSColors.text.muted,lineHeight:12},cardDescriptionActive:{color:macOSColors.text.secondary},cardDescriptionDisabled:{color:macOSColors.text.muted}});
+"use strict";
+
+/**
+ * ZustandDetailViewToggle
+ *
+ * Three-card toggle for switching between Change, State, and Diff views.
+ * Mirrors ReduxDetailViewToggle.tsx
+ */
+
+import React, { memo } from "react";
+import { View, Text, TouchableOpacity, StyleSheet } from "react-native";
+import { macOSColors, FileText, Database, GitBranch } from "@buoy-gg/shared-ui";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const VIEW_CONFIGS = [{
+  key: "change",
+  label: "CHANGE",
+  description: "View change details",
+  icon: FileText,
+  activeColor: macOSColors.semantic.warning
+}, {
+  key: "state",
+  label: "STATE",
+  description: "View current state",
+  icon: Database,
+  activeColor: macOSColors.semantic.info
+}, {
+  key: "diff",
+  label: "DIFF",
+  description: "Compare changes",
+  icon: GitBranch,
+  activeColor: macOSColors.semantic.success
+}];
+export const ZustandDetailViewToggle = /*#__PURE__*/memo(function ZustandDetailViewToggle({
+  activeView,
+  onViewChange,
+  diffDisabled = false
+}) {
+  return /*#__PURE__*/_jsx(View, {
+    style: styles.container,
+    children: VIEW_CONFIGS.map(config => {
+      const isActive = activeView === config.key;
+      const isDisabled = config.key === "diff" && diffDisabled;
+      const IconComponent = config.icon;
+      return /*#__PURE__*/_jsxs(TouchableOpacity, {
+        style: [styles.card, isActive && [styles.cardActive, {
+          borderColor: config.activeColor
+        }], isDisabled && styles.cardDisabled],
+        onPress: () => !isDisabled && onViewChange(config.key),
+        activeOpacity: isDisabled ? 1 : 0.8,
+        disabled: isDisabled,
+        children: [/*#__PURE__*/_jsxs(View, {
+          style: styles.cardContent,
+          children: [/*#__PURE__*/_jsx(IconComponent, {
+            size: 14,
+            color: isActive ? config.activeColor : isDisabled ? macOSColors.text.muted : macOSColors.text.secondary
+          }), /*#__PURE__*/_jsx(Text, {
+            style: [styles.cardLabel, isActive && [styles.cardLabelActive, {
+              color: config.activeColor
+            }], isDisabled && styles.cardLabelDisabled],
+            children: config.label
+          })]
+        }), /*#__PURE__*/_jsx(Text, {
+          style: [styles.cardDescription, isActive && styles.cardDescriptionActive, isDisabled && styles.cardDescriptionDisabled],
+          children: config.description
+        })]
+      }, config.key);
+    })
+  });
+});
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: "row",
+    gap: 8,
+    padding: 14,
+    backgroundColor: macOSColors.background.base
+  },
+  card: {
+    flex: 1,
+    backgroundColor: macOSColors.background.card,
+    borderRadius: 12,
+    borderWidth: 1,
+    borderColor: macOSColors.border.default,
+    padding: 10,
+    gap: 4
+  },
+  cardActive: {
+    borderWidth: 1.5,
+    backgroundColor: "rgba(0, 184, 230, 0.05)",
+    shadowColor: macOSColors.semantic.info,
+    shadowOffset: {
+      width: 0,
+      height: 2
+    },
+    shadowOpacity: 0.1,
+    shadowRadius: 8,
+    elevation: 3
+  },
+  cardDisabled: {
+    opacity: 0.5
+  },
+  cardContent: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 6
+  },
+  cardLabel: {
+    fontSize: 10,
+    fontWeight: "700",
+    letterSpacing: 0.5,
+    color: macOSColors.text.secondary
+  },
+  cardLabelActive: {
+    color: macOSColors.text.primary
+  },
+  cardLabelDisabled: {
+    color: macOSColors.text.muted
+  },
+  cardDescription: {
+    fontSize: 9,
+    color: macOSColors.text.muted,
+    lineHeight: 12
+  },
+  cardDescriptionActive: {
+    color: macOSColors.text.secondary
+  },
+  cardDescriptionDisabled: {
+    color: macOSColors.text.muted
+  }
+});

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

@@ -1 +1,287 @@
-"use strict";import{useState}from"react";import{View,Text,StyleSheet,TouchableOpacity,ScrollView}from"react-native";import{Filter,X,SectionHeader,AddFilterButton,AddFilterInput,macOSColors,buoyColors}from"@buoy-gg/shared-ui";import{zustandStateStore}from"../utils/zustandStateStore";import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";function getStoreColorForPattern(e,o){const t=o.find(o=>o.name.toLowerCase()===e.toLowerCase());return t?zustandStateStore.getStoreColor(t.name):null}function isStoreFiltered(e,o){return Array.from(o).some(o=>e.name.toLowerCase().includes(o.toLowerCase()))}export function ZustandEventFilterView({ignoredPatterns:e,onTogglePattern:o,onAddPattern:t,stores:r}){const[s,n]=useState(!1),[l,i]=useState("");return _jsxs(ScrollView,{style:styles.container,contentContainerStyle:styles.scrollContent,showsVerticalScrollIndicator:!1,children:[r.length>0&&_jsxs(View,{style:styles.section,children:[_jsxs(SectionHeader,{children:[_jsx(SectionHeader.Title,{children:"REGISTERED STORES"}),_jsx(SectionHeader.Badge,{count:r.length,color:buoyColors.primary})]}),_jsx(ScrollView,{style:styles.storeList,contentContainerStyle:styles.storeListContent,showsVerticalScrollIndicator:!0,nestedScrollEnabled:!0,children:r.map(o=>{const r=zustandStateStore.getStoreColor(o.name),s=isStoreFiltered(o,e);return _jsxs(TouchableOpacity,{style:[styles.storeRow,s&&styles.storeRowFiltered],onPress:()=>t(o.name),disabled:s,children:[_jsx(View,{style:[styles.storeDot,{backgroundColor:s?macOSColors.text.disabled:r}]}),_jsx(Text,{style:[styles.storeRowText,s&&styles.storeRowTextFiltered,!s&&{color:r}],numberOfLines:1,children:o.name}),_jsx(Text,s?{style:styles.filteredLabel,children:"hidden"}:{style:[styles.addLabel,{color:r+"99"}],children:"+ hide"})]},o.name)})})]}),_jsxs(View,{style:styles.section,children:[_jsxs(SectionHeader,{children:[_jsx(SectionHeader.Icon,{icon:Filter,color:buoyColors.primary,size:12}),_jsx(SectionHeader.Title,{children:"STORE NAME FILTERS"}),e.size>0&&_jsx(SectionHeader.Badge,{count:e.size,color:buoyColors.primary})]}),_jsx(View,{style:styles.addInputWrapper,children:s?_jsx(AddFilterInput,{value:l,onChange:i,onSubmit:()=>{const e=l.trim();e&&(t(e),i(""),n(!1))},onCancel:()=>{n(!1),i("")},placeholder:"Enter store name pattern to hide...",color:buoyColors.primary}):_jsx(AddFilterButton,{onPress:()=>n(!0),color:buoyColors.primary,label:"Add store name pattern"})}),e.size>0&&_jsx(View,{style:styles.patternList,children:Array.from(e).map(e=>{const t=getStoreColorForPattern(e,r);return _jsxs(TouchableOpacity,{style:styles.patternRow,onPress:()=>o(e),activeOpacity:.8,children:[t?_jsx(View,{style:[styles.storeDot,{backgroundColor:t}]}):null,_jsx(Text,{style:[styles.patternText,t?{color:t}:null],numberOfLines:1,children:e}),_jsx(X,{size:12,color:buoyColors.primary+"80"})]},e)})})]}),_jsxs(View,{style:styles.section,children:[_jsxs(SectionHeader,{children:[_jsx(SectionHeader.Icon,{icon:Filter,color:buoyColors.textSecondary,size:12}),_jsx(SectionHeader.Title,{children:"HOW EVENT FILTERS WORK"})]}),_jsx(Text,{style:styles.howItWorksText,children:"Patterns hide matching stores from both the Stores tab and the Events tab. Tap a store above to quickly add it as a filter."}),_jsxs(View,{style:styles.examplesContainer,children:[_jsx(Text,{style:styles.examplesTitle,children:"EXAMPLES:"}),["• auth → hides authStore from stores & events","• temp → hides tempStore, tempUserStore","• cart → hides cartStore from both tabs"].map(e=>_jsx(Text,{style:styles.exampleItem,children:e},e))]})]})]})}const styles=StyleSheet.create({container:{flex:1,backgroundColor:buoyColors.base},scrollContent:{paddingTop:16,paddingHorizontal:16,paddingBottom:24,gap:16},section:{backgroundColor:buoyColors.card,borderRadius:16,borderWidth:1,borderColor:buoyColors.border,overflow:"hidden"},storeList:{maxHeight:180},storeListContent:{paddingHorizontal:16,paddingTop:8,paddingBottom:16,gap:10},storeRow:{flexDirection:"row",alignItems:"center",gap:10,paddingVertical:10,paddingHorizontal:12,backgroundColor:buoyColors.hover,borderRadius:8,borderWidth:1,borderColor:buoyColors.border},storeRowFiltered:{opacity:.45},storeDot:{width:7,height:7,borderRadius:3.5},storeRowText:{flex:1,fontSize:12,fontWeight:"600",fontFamily:"monospace"},storeRowTextFiltered:{color:macOSColors.text.muted,textDecorationLine:"line-through"},filteredLabel:{fontSize:10,fontWeight:"500",color:macOSColors.text.disabled,fontFamily:"monospace"},addLabel:{fontSize:10,fontWeight:"600",fontFamily:"monospace"},addInputWrapper:{paddingHorizontal:16,paddingTop:8,paddingBottom:8},patternList:{paddingHorizontal:16,paddingBottom:16,gap:8},patternRow:{flexDirection:"row",alignItems:"center",justifyContent:"space-between",paddingVertical:10,paddingHorizontal:12,backgroundColor:buoyColors.hover,borderRadius:8,borderWidth:1,borderColor:buoyColors.border,gap:8},patternText:{flex:1,fontSize:12,fontFamily:"monospace",color:buoyColors.text},howItWorksText:{fontSize:11,color:buoyColors.textSecondary,lineHeight:16,marginTop:8,paddingHorizontal:16,fontFamily:"monospace"},examplesContainer:{paddingTop:8,paddingHorizontal:16,paddingBottom:16,borderTopWidth:1,borderTopColor:buoyColors.border,marginTop:12},examplesTitle:{fontSize:10,fontWeight:"600",color:buoyColors.textMuted,fontFamily:"monospace",letterSpacing:.5,marginBottom:6},exampleItem:{fontSize:10,color:buoyColors.textMuted,fontFamily:"monospace",lineHeight:16}});
+"use strict";
+
+import { useState } from "react";
+import { View, Text, StyleSheet, TouchableOpacity, ScrollView } from "react-native";
+import { Filter, X, SectionHeader, AddFilterButton, AddFilterInput, macOSColors, buoyColors } from "@buoy-gg/shared-ui";
+import { zustandStateStore } from "../utils/zustandStateStore";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/** Returns the store color for a given pattern if it exactly matches a registered store name */
+function getStoreColorForPattern(pattern, stores) {
+  const match = stores.find(s => s.name.toLowerCase() === pattern.toLowerCase());
+  return match ? zustandStateStore.getStoreColor(match.name) : null;
+}
+
+/** True if any active pattern filters out this store */
+function isStoreFiltered(store, ignoredPatterns) {
+  return Array.from(ignoredPatterns).some(p => store.name.toLowerCase().includes(p.toLowerCase()));
+}
+export function ZustandEventFilterView({
+  ignoredPatterns,
+  onTogglePattern,
+  onAddPattern,
+  stores
+}) {
+  const [showAddInput, setShowAddInput] = useState(false);
+  const [inputValue, setInputValue] = useState("");
+  const handleAddPattern = () => {
+    const trimmed = inputValue.trim();
+    if (trimmed) {
+      onAddPattern(trimmed);
+      setInputValue("");
+      setShowAddInput(false);
+    }
+  };
+  return /*#__PURE__*/_jsxs(ScrollView, {
+    style: styles.container,
+    contentContainerStyle: styles.scrollContent,
+    showsVerticalScrollIndicator: false,
+    children: [stores.length > 0 && /*#__PURE__*/_jsxs(View, {
+      style: styles.section,
+      children: [/*#__PURE__*/_jsxs(SectionHeader, {
+        children: [/*#__PURE__*/_jsx(SectionHeader.Title, {
+          children: "REGISTERED STORES"
+        }), /*#__PURE__*/_jsx(SectionHeader.Badge, {
+          count: stores.length,
+          color: buoyColors.primary
+        })]
+      }), /*#__PURE__*/_jsx(ScrollView, {
+        style: styles.storeList,
+        contentContainerStyle: styles.storeListContent,
+        showsVerticalScrollIndicator: true,
+        nestedScrollEnabled: true,
+        children: stores.map(store => {
+          const storeColor = zustandStateStore.getStoreColor(store.name);
+          const filtered = isStoreFiltered(store, ignoredPatterns);
+          return /*#__PURE__*/_jsxs(TouchableOpacity, {
+            style: [styles.storeRow, filtered && styles.storeRowFiltered],
+            onPress: () => onAddPattern(store.name),
+            disabled: filtered,
+            children: [/*#__PURE__*/_jsx(View, {
+              style: [styles.storeDot, {
+                backgroundColor: filtered ? macOSColors.text.disabled : storeColor
+              }]
+            }), /*#__PURE__*/_jsx(Text, {
+              style: [styles.storeRowText, filtered && styles.storeRowTextFiltered, !filtered && {
+                color: storeColor
+              }],
+              numberOfLines: 1,
+              children: store.name
+            }), filtered ? /*#__PURE__*/_jsx(Text, {
+              style: styles.filteredLabel,
+              children: "hidden"
+            }) : /*#__PURE__*/_jsx(Text, {
+              style: [styles.addLabel, {
+                color: storeColor + "99"
+              }],
+              children: "+ hide"
+            })]
+          }, store.name);
+        })
+      })]
+    }), /*#__PURE__*/_jsxs(View, {
+      style: styles.section,
+      children: [/*#__PURE__*/_jsxs(SectionHeader, {
+        children: [/*#__PURE__*/_jsx(SectionHeader.Icon, {
+          icon: Filter,
+          color: buoyColors.primary,
+          size: 12
+        }), /*#__PURE__*/_jsx(SectionHeader.Title, {
+          children: "STORE NAME FILTERS"
+        }), ignoredPatterns.size > 0 && /*#__PURE__*/_jsx(SectionHeader.Badge, {
+          count: ignoredPatterns.size,
+          color: buoyColors.primary
+        })]
+      }), /*#__PURE__*/_jsx(View, {
+        style: styles.addInputWrapper,
+        children: !showAddInput ? /*#__PURE__*/_jsx(AddFilterButton, {
+          onPress: () => setShowAddInput(true),
+          color: buoyColors.primary,
+          label: "Add store name pattern"
+        }) : /*#__PURE__*/_jsx(AddFilterInput, {
+          value: inputValue,
+          onChange: setInputValue,
+          onSubmit: handleAddPattern,
+          onCancel: () => {
+            setShowAddInput(false);
+            setInputValue("");
+          },
+          placeholder: "Enter store name pattern to hide...",
+          color: buoyColors.primary
+        })
+      }), ignoredPatterns.size > 0 && /*#__PURE__*/_jsx(View, {
+        style: styles.patternList,
+        children: Array.from(ignoredPatterns).map(pattern => {
+          const storeColor = getStoreColorForPattern(pattern, stores);
+          return /*#__PURE__*/_jsxs(TouchableOpacity, {
+            style: styles.patternRow,
+            onPress: () => onTogglePattern(pattern),
+            activeOpacity: 0.8,
+            children: [storeColor ? /*#__PURE__*/_jsx(View, {
+              style: [styles.storeDot, {
+                backgroundColor: storeColor
+              }]
+            }) : null, /*#__PURE__*/_jsx(Text, {
+              style: [styles.patternText, storeColor ? {
+                color: storeColor
+              } : null],
+              numberOfLines: 1,
+              children: pattern
+            }), /*#__PURE__*/_jsx(X, {
+              size: 12,
+              color: buoyColors.primary + "80"
+            })]
+          }, pattern);
+        })
+      })]
+    }), /*#__PURE__*/_jsxs(View, {
+      style: styles.section,
+      children: [/*#__PURE__*/_jsxs(SectionHeader, {
+        children: [/*#__PURE__*/_jsx(SectionHeader.Icon, {
+          icon: Filter,
+          color: buoyColors.textSecondary,
+          size: 12
+        }), /*#__PURE__*/_jsx(SectionHeader.Title, {
+          children: "HOW EVENT FILTERS WORK"
+        })]
+      }), /*#__PURE__*/_jsx(Text, {
+        style: styles.howItWorksText,
+        children: "Patterns hide matching stores from both the Stores tab and the Events tab. Tap a store above to quickly add it as a filter."
+      }), /*#__PURE__*/_jsxs(View, {
+        style: styles.examplesContainer,
+        children: [/*#__PURE__*/_jsx(Text, {
+          style: styles.examplesTitle,
+          children: "EXAMPLES:"
+        }), ["• auth → hides authStore from stores & events", "• temp → hides tempStore, tempUserStore", "• cart → hides cartStore from both tabs"].map(ex => /*#__PURE__*/_jsx(Text, {
+          style: styles.exampleItem,
+          children: ex
+        }, ex))]
+      })]
+    })]
+  });
+}
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: buoyColors.base
+  },
+  scrollContent: {
+    paddingTop: 16,
+    paddingHorizontal: 16,
+    paddingBottom: 24,
+    gap: 16
+  },
+  section: {
+    backgroundColor: buoyColors.card,
+    borderRadius: 16,
+    borderWidth: 1,
+    borderColor: buoyColors.border,
+    overflow: "hidden"
+  },
+  storeList: {
+    maxHeight: 180
+  },
+  storeListContent: {
+    paddingHorizontal: 16,
+    paddingTop: 8,
+    paddingBottom: 16,
+    gap: 10
+  },
+  storeRow: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 10,
+    paddingVertical: 10,
+    paddingHorizontal: 12,
+    backgroundColor: buoyColors.hover,
+    borderRadius: 8,
+    borderWidth: 1,
+    borderColor: buoyColors.border
+  },
+  storeRowFiltered: {
+    opacity: 0.45
+  },
+  storeDot: {
+    width: 7,
+    height: 7,
+    borderRadius: 3.5
+  },
+  storeRowText: {
+    flex: 1,
+    fontSize: 12,
+    fontWeight: "600",
+    fontFamily: "monospace"
+  },
+  storeRowTextFiltered: {
+    color: macOSColors.text.muted,
+    textDecorationLine: "line-through"
+  },
+  filteredLabel: {
+    fontSize: 10,
+    fontWeight: "500",
+    color: macOSColors.text.disabled,
+    fontFamily: "monospace"
+  },
+  addLabel: {
+    fontSize: 10,
+    fontWeight: "600",
+    fontFamily: "monospace"
+  },
+  addInputWrapper: {
+    paddingHorizontal: 16,
+    paddingTop: 8,
+    paddingBottom: 8
+  },
+  patternList: {
+    paddingHorizontal: 16,
+    paddingBottom: 16,
+    gap: 8
+  },
+  patternRow: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between",
+    paddingVertical: 10,
+    paddingHorizontal: 12,
+    backgroundColor: buoyColors.hover,
+    borderRadius: 8,
+    borderWidth: 1,
+    borderColor: buoyColors.border,
+    gap: 8
+  },
+  patternText: {
+    flex: 1,
+    fontSize: 12,
+    fontFamily: "monospace",
+    color: buoyColors.text
+  },
+  howItWorksText: {
+    fontSize: 11,
+    color: buoyColors.textSecondary,
+    lineHeight: 16,
+    marginTop: 8,
+    paddingHorizontal: 16,
+    fontFamily: "monospace"
+  },
+  examplesContainer: {
+    paddingTop: 8,
+    paddingHorizontal: 16,
+    paddingBottom: 16,
+    borderTopWidth: 1,
+    borderTopColor: buoyColors.border,
+    marginTop: 12
+  },
+  examplesTitle: {
+    fontSize: 10,
+    fontWeight: "600",
+    color: buoyColors.textMuted,
+    fontFamily: "monospace",
+    letterSpacing: 0.5,
+    marginBottom: 6
+  },
+  exampleItem: {
+    fontSize: 10,
+    color: buoyColors.textMuted,
+    fontFamily: "monospace",
+    lineHeight: 16
+  }
+});

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

@@ -1 +1,32 @@
-"use strict";import{View}from"react-native";import{Text}from"react-native";import{jsx as _jsx}from"react/jsx-runtime";const ZUSTAND_ICON_COLOR="#463B3F";export function ZustandIcon({size:t,color:e}){return _jsx(View,{style:{width:t,height:t,justifyContent:"center",alignItems:"center"},children:_jsx(Text,{style:{fontSize:.75*t,color:e||"#463B3F",fontWeight:"700"},children:"Z"})})}export{ZUSTAND_ICON_COLOR};
+"use strict";
+
+/**
+ * Zustand DevTools icon
+ */
+
+import { View } from "react-native";
+import { Text } from "react-native";
+import { jsx as _jsx } from "react/jsx-runtime";
+const ZUSTAND_ICON_COLOR = "#463B3F";
+export function ZustandIcon({
+  size,
+  color
+}) {
+  return /*#__PURE__*/_jsx(View, {
+    style: {
+      width: size,
+      height: size,
+      justifyContent: "center",
+      alignItems: "center"
+    },
+    children: /*#__PURE__*/_jsx(Text, {
+      style: {
+        fontSize: size * 0.75,
+        color: color || ZUSTAND_ICON_COLOR,
+        fontWeight: "700"
+      },
+      children: "Z"
+    })
+  });
+}
+export { ZUSTAND_ICON_COLOR };