@buoy-gg/storage 7.0.30 → 7.0.32

package/lib/module/storage/components/StorageKeySection.js

@@ -5,6 +5,13 @@ import { View, Text, StyleSheet } from "react-native";
 import { StorageKeyRow } from "./StorageKeyRow";
 import { SectionHeader, night } from "@buoy-gg/shared-ui";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Identifies a ROW, not a key name — the same name routinely exists in more
+ * than one backend. Shared with the browser so both sides agree on the id.
+ */
+export function storageRowId(storageKey) {
+  return storageKey.instanceId ? `${storageKey.storageType}-${storageKey.instanceId}-${storageKey.key}` : `${storageKey.storageType}-${storageKey.key}`;
+}
 /**
  * Storage key section component following composition principles [[rule3]]
  *
@@ -30,7 +37,9 @@ export function StorageKeySection({
   onEditKey,
   onToggleKey,
   onDeleteKey,
-  editBlockedFor
+  editBlockedFor,
+  onRowRef,
+  onOpenKey
 }) {
   /**
    * Identifies a ROW, not a key name.
@@ -39,9 +48,7 @@ export function StorageKeySection({
    * `auth.refreshToken` in both MMKV and the keychain has two rows called
    * that, and they are different values in different stores.
    */
-  const getKeyIdentifier = useCallback(storageKey => {
-    return storageKey.instanceId ? `${storageKey.storageType}-${storageKey.instanceId}-${storageKey.key}` : `${storageKey.storageType}-${storageKey.key}`;
-  }, []);
+  const getKeyIdentifier = useCallback(storageKey => storageRowId(storageKey), []);
 
   /**
    * Which ROW is expanded — by identifier, not by key name.
@@ -52,9 +59,20 @@ export function StorageKeySection({
    */
   const [expandedKey, setExpandedKey] = useState(null);
   const handleKeyPress = useCallback(storageKey => {
+    // Fiber-driven automation can invoke the ROW's onPress prop directly,
+    // handing this a GestureResponderEvent instead of the key the row's own
+    // touchable wrapper binds. Rendering an event as a key produced a
+    // convincing all-"undefined" detail screen; refuse anything that isn't
+    // a key.
+    if (!storageKey || typeof storageKey.key !== "string") return;
+    if (onOpenKey) {
+      // Navigate-to-detail hosts: the card is a door, not a drawer.
+      onOpenKey(storageKey);
+      return;
+    }
     const id = getKeyIdentifier(storageKey);
     setExpandedKey(prev => prev === id ? null : id);
-  }, [getKeyIdentifier]);
+  }, [getKeyIdentifier, onOpenKey]);
   if (keys.length === 0 && title === "Required Keys") {
     return /*#__PURE__*/_jsxs(View, {
       style: styles.sectionContainer,
@@ -89,22 +107,26 @@ export function StorageKeySection({
       children: keys.map(storageKey => {
         // Create unique key by combining storage type, instance ID (if present), and key name
         const uniqueKey = getKeyIdentifier(storageKey);
-        return /*#__PURE__*/_jsx(StorageKeyRow, {
-          storageKey: storageKey,
-          isExpanded: !isSelectMode && expandedKey === uniqueKey,
-          onPress: handleKeyPress,
-          isSelectMode: isSelectMode,
-          isSelected: selectedKeys.has(uniqueKey),
-          onSelectionChange: onSelectionChange,
-          eventCount: eventCountByKey?.[storageKey.key],
-          onViewHistory: onViewHistory ? () => onViewHistory(storageKey.key) : undefined,
-          onHideKey: onHideKey,
-          onEditKey: onEditKey,
-          onToggleKey: onToggleKey,
-          onDeleteKey: onDeleteKey,
-          editBlockedReason: editBlockedFor?.(storageKey),
-          isPinned: pinnedKeys?.has(storageKey.key),
-          onTogglePin: onTogglePin
+        return /*#__PURE__*/_jsx(View, {
+          ref: onRowRef ? node => onRowRef(uniqueKey, node) : undefined,
+          collapsable: false,
+          children: /*#__PURE__*/_jsx(StorageKeyRow, {
+            storageKey: storageKey,
+            isExpanded: !isSelectMode && expandedKey === uniqueKey,
+            onPress: handleKeyPress,
+            isSelectMode: isSelectMode,
+            isSelected: selectedKeys.has(uniqueKey),
+            onSelectionChange: onSelectionChange,
+            eventCount: eventCountByKey?.[storageKey.key],
+            onViewHistory: onViewHistory ? () => onViewHistory(storageKey.key) : undefined,
+            onHideKey: onHideKey,
+            onEditKey: onEditKey,
+            onToggleKey: onToggleKey,
+            onDeleteKey: onDeleteKey,
+            editBlockedReason: editBlockedFor?.(storageKey),
+            isPinned: pinnedKeys?.has(storageKey.key),
+            onTogglePin: onTogglePin
+          })
         }, uniqueKey);
       })
     })]

package/lib/module/storage/components/StorageModalWithTabs.js

@@ -3,7 +3,7 @@
 import { useState, useCallback, useEffect, useRef, useMemo } from "react";
 import { Text, View, TouchableOpacity, StyleSheet, FlatList, Alert } from "react-native";
 import AsyncStorage from "@react-native-async-storage/async-storage";
-import { JsModal, ModalHeader, TabSelector, parseValue, devToolsStorageKeys, macOSColors, night, Database, Filter, RefreshCw, Search, SearchBar, PowerToggleButton, ToolbarCopyButton, ToolbarClearButton, truncatePayload, TickProvider, useLimit, TIER_LIMITS } from "@buoy-gg/shared-ui";
+import { JsModal, ModalHeader, TabSelector, parseValue, devToolsStorageKeys, macOSColors, night, Database, Filter, RefreshCw, Search, SearchBar, PowerToggleButton, ToolbarCopyButton, ToolbarClearButton, truncatePayload, TickProvider, useLimit, TIER_LIMITS, windowDragProps } from "@buoy-gg/shared-ui";
 import { StorageBrowserMode } from "./StorageBrowserMode";
 import { StorageTypeFilterBar, countByStorageType } from "./StorageTypeFilterBar";
 import { clearAllAppStorage, clearAllStorageIncludingDevTools } from "../utils/clearAllStorage";
@@ -45,6 +45,12 @@ export function StorageModalWithTabs({
 
   // Storage Browser state
   const [searchQuery, setSearchQuery] = useState("");
+  /**
+   * The key whose detail screen (live editor + info) is open. Lives at the
+   * MODAL level because the modal's header becomes back + the key's name
+   * while it's open — the React Query interaction, same as the Zustand tool.
+   */
+  const [detailKey, setDetailKey] = useState(null);
   const [isSearchActive, setIsSearchActive] = useState(false);
 
   // Local state to control subscription (true = subscribed, false = unsubscribed)
@@ -630,7 +636,10 @@ export function StorageModalWithTabs({
         ,
         applySafeAreaInset: modalMode === "bottomSheet",
         storageTypeFilter: storageTypeFilter,
-        onStorageTypeFilterChange: setStorageTypeFilter
+        onStorageTypeFilterChange: setStorageTypeFilter,
+        detailKey: detailKey,
+        onOpenKey: setDetailKey,
+        onCloseDetail: () => setDetailKey(null)
       });
     }
 
@@ -745,6 +754,19 @@ export function StorageModalWithTabs({
     }), /*#__PURE__*/_jsx(ModalHeader.Content, {
       title: selectedConversation.key
     })]
+  }) : detailKey ?
+  /*#__PURE__*/
+  // The key detail screen — back + the key's name, the React Query
+  // interaction. AFTER history in this chain: history is reached FROM
+  // the detail and stacks over it, so its back returns here.
+  _jsxs(ModalHeader, {
+    children: [/*#__PURE__*/_jsx(ModalHeader.Navigation, {
+      onBack: () => setDetailKey(null)
+    }), /*#__PURE__*/_jsx(ModalHeader.Content, {
+      title: detailKey.key,
+      centered: true,
+      testID: "buoy-storage-detail-title"
+    })]
   }) : /*#__PURE__*/_jsxs(ModalHeader, {
     children: [onBack && /*#__PURE__*/_jsx(ModalHeader.Navigation, {
       onBack: onBack
@@ -762,7 +784,6 @@ export function StorageModalWithTabs({
         autoFocus: true,
         onSubmitEditing: () => setIsSearchActive(false),
         returnKeyType: "search",
-        suggestions: allStorageKeys,
         containerStyle: styles.headerSearchContainer
       }) : /*#__PURE__*/_jsx(TabSelector, {
         tabs: [{
@@ -780,6 +801,7 @@ export function StorageModalWithTabs({
           setSelectedHistoryEventIndex(null);
           setSelectedConversationKey(null);
           setSelectedEventIndex(0);
+          setDetailKey(null);
         }
       })
     }), /*#__PURE__*/_jsxs(ModalHeader.Actions, {
@@ -848,6 +870,7 @@ export function StorageModalWithTabs({
         style: styles.inlineRoot,
         children: [/*#__PURE__*/_jsx(View, {
           style: styles.inlineHeader,
+          ...windowDragProps,
           children: headerContent
         }), renderContent(), footerNode]
       })

package/lib/module/storage/components/StorageSaveNotice.js

@@ -0,0 +1,168 @@
+"use strict";
+
+/**
+ * What a storage edit actually did, as a toast.
+ *
+ * ONE SENTENCE, EVERY TIME, NO DETECTION. Saving used to report success and
+ * stop, which is misleading for any key an app has already read into memory:
+ * the write lands on disk, the screen does not move, and the next time the
+ * owner saves it writes its own copy back over the edit.
+ *
+ * The obvious fix — work out which live store owns the key and offer to make it
+ * re-read — was built and then removed on purpose. It required knowing what is
+ * linked to what, and every route to that knowledge is a guess: key names
+ * collide across backends, only zustand stores register with Buoy at all, and a
+ * store can register after the lookup ran. A tool that is right most of the
+ * time is the problem here, not the fix. There is also no general mechanism to
+ * reach for — the app owns its cache, and only the app can invalidate it.
+ *
+ * So it promises the one thing true for every key, every backend and every
+ * persistence library, in dev and in release — "applies on next launch" — and
+ * says it in five words, because a toast is read at a glance or not at all.
+ * Making a change live NOW is a different operation and lives in the state
+ * tools, where the store you mean is the one you are already looking at.
+ *
+ * WHY IT FLOATS. It first shipped inline, above the filter cards and INSIDE the
+ * scroller — so it scrolled away with the content and you had to go looking for
+ * the thing that was meant to catch your eye. It is pinned over the top of the
+ * tool now, and takes itself away, because a message about a save you just made
+ * has a short useful life and should not need dismissing.
+ */
+import { useEffect, useRef } from "react";
+import { Animated, Easing, StyleSheet, Text, TouchableOpacity, View } from "react-native";
+import { Check, macOSColors } from "@buoy-gg/shared-ui";
+
+/** Five words is one glance, so it does not need to linger like a sentence. */
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const VISIBLE_MS = 2600;
+const FADE_MS = 180;
+export function StorageSaveNotice({
+  onDone
+}) {
+  const progress = useRef(new Animated.Value(0)).current;
+
+  // Latest-ref: the host passes an inline arrow, and depending on it directly
+  // would restart the animation on every parent render — the toast would never
+  // reach its own fade-out.
+  const onDoneRef = useRef(onDone);
+  onDoneRef.current = onDone;
+  useEffect(() => {
+    const animation = Animated.sequence([Animated.timing(progress, {
+      toValue: 1,
+      duration: FADE_MS,
+      easing: Easing.out(Easing.quad),
+      useNativeDriver: true
+    }), Animated.delay(VISIBLE_MS), Animated.timing(progress, {
+      toValue: 0,
+      duration: FADE_MS,
+      easing: Easing.in(Easing.quad),
+      useNativeDriver: true
+    })]);
+    animation.start(({
+      finished
+    }) => {
+      // Only when it ran to the end: a stop() from unmount must not call back
+      // into a host that is already tearing this down.
+      if (finished) onDoneRef.current();
+    });
+    return () => animation.stop();
+  }, [progress]);
+  return /*#__PURE__*/_jsx(Animated.View, {
+    pointerEvents: "box-none",
+    style: [styles.wrap, {
+      opacity: progress,
+      transform: [{
+        translateY: progress.interpolate({
+          inputRange: [0, 1],
+          outputRange: [-10, 0]
+        })
+      }]
+    }],
+    testID: "buoy-storage-save-notice",
+    children: /*#__PURE__*/_jsxs(TouchableOpacity, {
+      activeOpacity: 0.85,
+      onPress: () => onDoneRef.current(),
+      style: styles.toast,
+      accessibilityRole: "button"
+      // The visible text is a fragment; the label is the whole thought, for
+      // anyone who gets this read aloud rather than glanced at.
+      ,
+      accessibilityLabel: "Saved. Applies on the app's next launch. Tap to dismiss.",
+      testID: "buoy-storage-save-notice-dismiss",
+      children: [/*#__PURE__*/_jsx(View, {
+        style: styles.tick,
+        children: /*#__PURE__*/_jsx(Check, {
+          size: 10,
+          color: macOSColors.semantic.success
+        })
+      }), /*#__PURE__*/_jsx(Text, {
+        style: styles.saved,
+        children: "Saved"
+      }), /*#__PURE__*/_jsx(View, {
+        style: styles.divider
+      }), /*#__PURE__*/_jsx(Text, {
+        style: styles.detail,
+        children: "applies on next launch"
+      })]
+    })
+  });
+}
+const styles = StyleSheet.create({
+  wrap: {
+    // Pinned over the tool rather than laid out in it, so the scroller cannot
+    // carry it away. `box-none` keeps the untouched margins clickable.
+    position: "absolute",
+    top: 10,
+    left: 12,
+    right: 12,
+    // Above the list, the filter cards and the sticky headers.
+    zIndex: 100,
+    elevation: 100,
+    alignItems: "center"
+  },
+  toast: {
+    // Sized to its content: a five-word toast that spans the tool reads as a
+    // banner, which is the thing this stopped being.
+    flexDirection: "row",
+    alignItems: "center",
+    paddingVertical: 7,
+    paddingLeft: 8,
+    paddingRight: 12,
+    borderRadius: 999,
+    backgroundColor: macOSColors.background.card,
+    borderWidth: StyleSheet.hairlineWidth,
+    borderColor: macOSColors.border.default,
+    shadowColor: "#000",
+    shadowOpacity: 0.4,
+    shadowRadius: 14,
+    shadowOffset: {
+      width: 0,
+      height: 5
+    }
+  },
+  tick: {
+    width: 16,
+    height: 16,
+    borderRadius: 8,
+    marginRight: 7,
+    alignItems: "center",
+    justifyContent: "center",
+    backgroundColor: macOSColors.semantic.successBackground
+  },
+  saved: {
+    color: macOSColors.text.primary,
+    fontSize: 12,
+    fontWeight: "600"
+  },
+  divider: {
+    width: StyleSheet.hairlineWidth,
+    alignSelf: "stretch",
+    marginHorizontal: 8,
+    backgroundColor: macOSColors.border.default
+  },
+  // The consequence is the part people already half-know, so it recedes.
+  detail: {
+    color: macOSColors.text.muted,
+    fontSize: 12
+  }
+});