@buoy-gg/zustand 7.0.35 → 7.0.38

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

@@ -1,204 +1 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.ZustandStoreBrowser = ZustandStoreBrowser;
-var _react = require("react");
-var _reactNative = require("react-native");
-var _sharedUi = require("@buoy-gg/shared-ui");
-var _zustandStateStore = require("../utils/zustandStateStore");
-var _testIDs = require("../utils/testIDs");
-var _jsxRuntime = require("react/jsx-runtime");
-/**
- * ZustandStoreBrowser
- *
- * Browse tab — lists all registered Zustand stores. Tapping a card opens the
- * store's detail screen (ZustandStoreDetailContent): live state editor on
- * top, store details and the read-only tree below — the React Query
- * interaction, replacing the old expand-in-place card.
- */
-
-/**
- * Get a preview of the store's top-level keys
- */
-function getKeysPreview(store) {
-  try {
-    const state = store.api.getState();
-    if (state && typeof state === "object" && state.__buoyStateOnDevice === true) {
-      return "on device";
-    }
-    if (state && typeof state === "object") {
-      const keys = Object.keys(state);
-      const dataKeys = keys.filter(k => {
-        const val = state[k];
-        return typeof val !== "function";
-      });
-      if (dataKeys.length === 0) return "no data keys";
-      if (dataKeys.length <= 3) return dataKeys.join(", ");
-      return `${dataKeys.slice(0, 2).join(", ")} +${dataKeys.length - 2}`;
-    }
-    return "";
-  } catch {
-    return "";
-  }
-}
-function LoadingBrowserState() {
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.ToolEmptyState, {
-    testID: `${_testIDs.ZUSTAND_TEST_ID}-stores-loading`
-    // Replaces the spinner rather than joining it: two animated things
-    // stacked is clutter, and `loading` IS the indeterminate spinner in
-    // mascot form.
-    ,
-    otto: "loading",
-    title: "Loading stores\u2026",
-    message: "Waiting for the device to send its registered stores."
-  });
-}
-function EmptyBrowserState() {
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.ToolEmptyState, {
-    testID: `${_testIDs.ZUSTAND_TEST_ID}-stores-empty`
-    // scanning = "scanning for targets… and finding none". The registry is
-    // discovered, not configured, so an empty one is a scan result.
-    ,
-    otto: "scanning",
-    title: "No stores registered",
-    message: "Use watchStores() to register your Zustand stores.\nThey will appear here with their current state."
-  });
-}
-function ZustandStoreBrowser({
-  stores,
-  searchQuery,
-  isLoading = false,
-  onOpenStore
-}) {
-  // Filter stores by search query
-  const filteredStores = (0, _react.useMemo)(() => {
-    if (!searchQuery) return stores;
-    const search = searchQuery.toLowerCase();
-    return stores.filter(s => s.name.toLowerCase().includes(search) || s.persistName && s.persistName.toLowerCase().includes(search));
-  }, [stores, searchQuery]);
-  if (filteredStores.length === 0 && !searchQuery) {
-    return isLoading ? /*#__PURE__*/(0, _jsxRuntime.jsx)(LoadingBrowserState, {}) : /*#__PURE__*/(0, _jsxRuntime.jsx)(EmptyBrowserState, {});
-  }
-  if (filteredStores.length === 0 && searchQuery) {
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.ToolEmptyState, {
-      testID: `${_testIDs.ZUSTAND_TEST_ID}-stores-no-match`,
-      ...(0, _sharedUi.resolveListEmptyState)({
-        subject: "stores",
-        verb: "registered",
-        search: searchQuery,
-        total: stores.length,
-        waiting: {
-          otto: "scanning",
-          title: "No stores registered",
-          message: "Use watchStores() to register your Zustand stores."
-        }
-      })
-    });
-  }
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.ScrollView, {
-    style: styles.container,
-    contentContainerStyle: styles.scrollContent,
-    showsVerticalScrollIndicator: true,
-    testID: `${_testIDs.ZUSTAND_TEST_ID}-stores-scroll`,
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-      style: styles.sectionHeader,
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-        style: styles.sectionTitle,
-        children: "STORES"
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-        style: styles.sectionCountBadge,
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-          style: styles.sectionCountText,
-          testID: `${_testIDs.ZUSTAND_TEST_ID}-stores-count`,
-          children: filteredStores.length
-        })
-      })]
-    }), filteredStores.map(store => {
-      const keysPreview = getKeysPreview(store);
-      const storeColor = _zustandStateStore.zustandStateStore.getStoreColor(store.name);
-      const rowID = (0, _testIDs.storeRowTestID)(store.name);
-      return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-        style: styles.storeRowWrapper,
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.CompactRow, {
-          statusDotColor: storeColor,
-          statusLabel: store.isPersisted ? "persisted" : "in-memory",
-          primaryText: store.name,
-          secondaryText: keysPreview || undefined,
-          showChevron: true,
-          onPress: () => onOpenStore(store.name),
-          testID: rowID,
-          statusTestID: `${rowID}-backing`,
-          primaryTestID: `${rowID}-name`,
-          secondaryTestID: `${rowID}-keys`
-        }), store.stateChangeCount > 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-          style: [styles.absCountBadge, {
-            backgroundColor: storeColor + "22",
-            borderColor: storeColor + "55"
-          }],
-          pointerEvents: "none",
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-            style: [styles.absCountText, {
-              color: storeColor
-            }],
-            testID: `${rowID}-count`,
-            children: String(store.stateChangeCount)
-          })
-        })]
-      }, store.name);
-    })]
-  });
-}
-const styles = _reactNative.StyleSheet.create({
-  container: {
-    flex: 1
-  },
-  storeRowWrapper: {
-    position: "relative"
-  },
-  absCountBadge: {
-    position: "absolute",
-    top: 4,
-    right: 10,
-    paddingHorizontal: 5,
-    paddingVertical: 1,
-    borderRadius: 4,
-    borderWidth: 1,
-    zIndex: 1
-  },
-  absCountText: {
-    fontSize: 9,
-    fontWeight: "700",
-    fontFamily: _sharedUi.monoFont
-  },
-  scrollContent: {
-    paddingTop: 8,
-    paddingBottom: 20
-  },
-  sectionHeader: {
-    flexDirection: "row",
-    alignItems: "center",
-    paddingHorizontal: 16,
-    paddingVertical: 8,
-    gap: 8
-  },
-  sectionTitle: {
-    fontSize: 11,
-    fontWeight: "700",
-    letterSpacing: 0.5,
-    color: _sharedUi.night.color.textTertiary
-  },
-  sectionCountBadge: {
-    backgroundColor: _sharedUi.night.color.accentFill,
-    paddingHorizontal: 8,
-    paddingVertical: 2,
-    borderRadius: 4
-  },
-  sectionCountText: {
-    fontSize: 10,
-    fontWeight: "700",
-    color: _sharedUi.night.color.accent,
-    fontFamily: _sharedUi.monoFont
-  }
-});
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.ZustandStoreBrowser=ZustandStoreBrowser;var _react=require("react"),_reactNative=require("react-native"),_sharedUi=require("@buoy-gg/shared-ui"),_zustandStateStore=require("../utils/zustandStateStore"),_testIDs=require("../utils/testIDs"),_jsxRuntime=require("react/jsx-runtime");function getKeysPreview(e){try{const t=e.api.getState();if(t&&"object"==typeof t&&!0===t.__buoyStateOnDevice)return"on device";if(t&&"object"==typeof t){const e=Object.keys(t).filter(e=>"function"!=typeof t[e]);return 0===e.length?"no data keys":e.length<=3?e.join(", "):`${e.slice(0,2).join(", ")} +${e.length-2}`}return""}catch{return""}}function LoadingBrowserState(){return(0,_jsxRuntime.jsx)(_sharedUi.ToolEmptyState,{testID:`${_testIDs.ZUSTAND_TEST_ID}-stores-loading`,otto:"loading",title:"Loading stores…",message:"Waiting for the device to send its registered stores."})}function EmptyBrowserState(){return(0,_jsxRuntime.jsx)(_sharedUi.ToolEmptyState,{testID:`${_testIDs.ZUSTAND_TEST_ID}-stores-empty`,otto:"scanning",title:"No stores registered",message:"Use watchStores() to register your Zustand stores.\nThey will appear here with their current state."})}function ZustandStoreBrowser({stores:e,searchQuery:t,isLoading:s=!1,onOpenStore:r}){const o=(0,_react.useMemo)(()=>{if(!t)return e;const s=t.toLowerCase();return e.filter(e=>e.name.toLowerCase().includes(s)||e.persistName&&e.persistName.toLowerCase().includes(s))},[e,t]);return 0!==o.length||t?0===o.length&&t?(0,_jsxRuntime.jsx)(_sharedUi.ToolEmptyState,{testID:`${_testIDs.ZUSTAND_TEST_ID}-stores-no-match`,...(0,_sharedUi.resolveListEmptyState)({subject:"stores",verb:"registered",search:t,total:e.length,waiting:{otto:"scanning",title:"No stores registered",message:"Use watchStores() to register your Zustand stores."}})}):(0,_jsxRuntime.jsxs)(_reactNative.ScrollView,{style:styles.container,contentContainerStyle:styles.scrollContent,showsVerticalScrollIndicator:!0,testID:`${_testIDs.ZUSTAND_TEST_ID}-stores-scroll`,children:[(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.sectionHeader,children:[(0,_jsxRuntime.jsx)(_reactNative.Text,{style:styles.sectionTitle,children:"STORES"}),(0,_jsxRuntime.jsx)(_reactNative.View,{style:styles.sectionCountBadge,children:(0,_jsxRuntime.jsx)(_reactNative.Text,{style:styles.sectionCountText,testID:`${_testIDs.ZUSTAND_TEST_ID}-stores-count`,children:o.length})})]}),o.map(e=>{const t=getKeysPreview(e),s=_zustandStateStore.zustandStateStore.getStoreColor(e.name),o=(0,_testIDs.storeRowTestID)(e.name);return(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.storeRowWrapper,children:[(0,_jsxRuntime.jsx)(_sharedUi.CompactRow,{statusDotColor:s,statusLabel:e.isPersisted?"persisted":"in-memory",primaryText:e.name,secondaryText:t||void 0,showChevron:!0,onPress:()=>r(e.name),testID:o,statusTestID:`${o}-backing`,primaryTestID:`${o}-name`,secondaryTestID:`${o}-keys`}),e.stateChangeCount>0&&(0,_jsxRuntime.jsx)(_reactNative.View,{style:[styles.absCountBadge,{backgroundColor:s+"22",borderColor:s+"55"}],pointerEvents:"none",children:(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[styles.absCountText,{color:s}],testID:`${o}-count`,children:String(e.stateChangeCount)})})]},e.name)})]}):s?(0,_jsxRuntime.jsx)(LoadingBrowserState,{}):(0,_jsxRuntime.jsx)(EmptyBrowserState,{})}const styles=_reactNative.StyleSheet.create({container:{flex:1},storeRowWrapper:{position:"relative"},absCountBadge:{position:"absolute",top:4,right:10,paddingHorizontal:5,paddingVertical:1,borderRadius:4,borderWidth:1,zIndex:1},absCountText:{fontSize:9,fontWeight:"700",fontFamily:_sharedUi.monoFont},scrollContent:{paddingTop:8,paddingBottom:20},sectionHeader:{flexDirection:"row",alignItems:"center",paddingHorizontal:16,paddingVertical:8,gap:8},sectionTitle:{fontSize:11,fontWeight:"700",letterSpacing:.5,color:_sharedUi.night.color.textTertiary},sectionCountBadge:{backgroundColor:_sharedUi.night.color.accentFill,paddingHorizontal:8,paddingVertical:2,borderRadius:4},sectionCountText:{fontSize:10,fontWeight:"700",color:_sharedUi.night.color.accent,fontFamily:_sharedUi.monoFont}});