@buoy-gg/storage 7.0.40 → 7.0.42

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

@@ -1,168 +1 @@
-"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
-  }
-});
+"use strict";import{useEffect as m,useRef as l}from"react";import{Animated as t,Easing as a,StyleSheet as n,Text as u,TouchableOpacity as f,View as h}from"react-native";import{Check as b,macOSColors as e}from"@buoy-gg/shared-ui";import{jsx as i,jsxs as y}from"react/jsx-runtime";const v=2600;const g=180;export function StorageSaveNotice({onDone:c}){const o=l(new t.Value(0)).current;const s=l(c);s.current=c;m(()=>{const d=t.sequence([t.timing(o,{toValue:1,duration:g,easing:a.out(a.quad),useNativeDriver:true}),t.delay(v),t.timing(o,{toValue:0,duration:g,easing:a.in(a.quad),useNativeDriver:true})]);d.start(({finished:p})=>{if(p)s.current()});return()=>d.stop()},[o]);return i(t.View,{pointerEvents:"box-none",style:[r.wrap,{opacity:o,transform:[{translateY:o.interpolate({inputRange:[0,1],outputRange:[-10,0]})}]}],testID:"buoy-storage-save-notice",children:y(f,{activeOpacity:.85,onPress:()=>s.current(),style:r.toast,accessibilityRole:"button",accessibilityLabel:"Saved. Applies on the app's next launch. Tap to dismiss.",testID:"buoy-storage-save-notice-dismiss",children:[i(h,{style:r.tick,children:i(b,{size:10,color:e.semantic.success})}),i(u,{style:r.saved,children:"Saved"}),i(h,{style:r.divider}),i(u,{style:r.detail,children:"applies on next launch"})]})})}const r=n.create({wrap:{position:"absolute",top:10,left:12,right:12,zIndex:100,elevation:100,alignItems:"center"},toast:{flexDirection:"row",alignItems:"center",paddingVertical:7,paddingLeft:8,paddingRight:12,borderRadius:999,backgroundColor:e.background.card,borderWidth:n.hairlineWidth,borderColor:e.border.default,shadowColor:"#000",shadowOpacity:.4,shadowRadius:14,shadowOffset:{width:0,height:5}},tick:{width:16,height:16,borderRadius:8,marginRight:7,alignItems:"center",justifyContent:"center",backgroundColor:e.semantic.successBackground},saved:{color:e.text.primary,fontSize:12,fontWeight:"600"},divider:{width:n.hairlineWidth,alignSelf:"stretch",marginHorizontal:8,backgroundColor:e.border.default},detail:{color:e.text.muted,fontSize:12}});

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

@@ -1,40 +1 @@
-"use strict";
-
-import { HardDrive, CyberpunkSectionButton } from "@buoy-gg/shared-ui";
-import { useAsyncStorageKeys } from "../hooks/useAsyncStorageKeys";
-import { isDevToolsStorageKey } from "@buoy-gg/shared-ui";
-import { jsx as _jsx } from "react/jsx-runtime";
-/**
- * Storage section component for the dev tools console.
- * Shows storage statistics and provides access to storage browser.
- */
-export function StorageSection({
-  onPress
-}) {
-  const {
-    storageKeys
-  } = useAsyncStorageKeys();
-
-  // Filter out dev tool keys for the count
-  const appKeys = storageKeys.filter(k => !isDevToolsStorageKey(k.key));
-  const asyncCount = appKeys.length;
-  const total = asyncCount;
-  const getStorageSubtitle = () => {
-    if (total === 0) {
-      return "Empty";
-    }
-
-    // For now, only AsyncStorage is supported
-    return `${asyncCount} Async`;
-  };
-  return /*#__PURE__*/_jsx(CyberpunkSectionButton, {
-    id: "storage",
-    title: "STORAGE",
-    subtitle: getStorageSubtitle(),
-    icon: HardDrive,
-    iconColor: "#00FF88",
-    iconBackgroundColor: "rgba(0, 255, 136, 0.1)",
-    onPress: onPress,
-    index: 2
-  });
-}
+"use strict";import{HardDrive as c,CyberpunkSectionButton as a}from"@buoy-gg/shared-ui";import{useAsyncStorageKeys as u}from"../hooks/useAsyncStorageKeys";import{isDevToolsStorageKey as g}from"@buoy-gg/shared-ui";import{jsx as y}from"react/jsx-runtime";export function StorageSection({onPress:o}){const{storageKeys:r}=u();const e=r.filter(i=>!g(i.key));const t=e.length;const n=t;const s=()=>{if(n===0){return"Empty"}return`${t} Async`};return y(a,{id:"storage",title:"STORAGE",subtitle:s(),icon:c,iconColor:"#00FF88",iconBackgroundColor:"rgba(0, 255, 136, 0.1)",onPress:o,index:2})}

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

@@ -1,138 +1 @@
-"use strict";
-
-/**
- * "Which backend?" — the pill row shared by the Keys and Events tabs.
- *
- * Both tabs answer questions about the same three backends, so asking the
- * question two different ways (or, as it was, only on one tab) is a gap rather
- * than a simplification: you filter the key list to Keychain, switch to Events
- * to see what wrote to it, and you're looking at everything again.
- *
- * The selection is owned by the modal and passed to both, so switching tabs
- * keeps the filter you set.
- *
- * Each pill carries the count it WOULD show, computed before the type filter is
- * applied — a count that collapsed to zero the moment you picked another type
- * would tell you nothing about where to look next.
- */
-
-import { StyleSheet, Text, TouchableOpacity, View } from "react-native";
-import { macOSColors, night, monoFont } from "@buoy-gg/shared-ui";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-/**
- * One entry per pill. This was four near-identical blocks of JSX differing only
- * in three colours and a label, which is how "All Types" ended up with a
- * hover-grey active state while the others used their own hue.
- */
-const SEGMENTS = [{
-  id: "all",
-  label: "All Types",
-  color: null
-}, {
-  id: "async",
-  label: "Async",
-  color: macOSColors.semantic.warning
-}, {
-  id: "mmkv",
-  label: "MMKV",
-  color: macOSColors.semantic.info
-}, {
-  id: "secure",
-  label: "Secure",
-  color: macOSColors.semantic.success
-}];
-export function StorageTypeFilterBar({
-  active,
-  onChange,
-  counts
-}) {
-  return /*#__PURE__*/_jsx(View, {
-    style: styles.row,
-    children: SEGMENTS.map(segment => {
-      const isActive = active === segment.id;
-      const accent = segment.color ?? night.color.accent;
-      return /*#__PURE__*/_jsxs(TouchableOpacity, {
-        testID: `buoy-storage-type-${segment.id}`,
-        accessibilityRole: "button",
-        accessibilityLabel: `Filter by ${segment.label}`,
-        accessibilityState: {
-          selected: isActive
-        },
-        activeOpacity: 0.8,
-        onPress: () => onChange(segment.id),
-        style: [styles.pill, {
-          borderColor: night.color.border
-        }, isActive && [styles.pillActive, segment.color ? {
-          backgroundColor: segment.color + "15",
-          borderColor: segment.color + "40"
-        } : {
-          backgroundColor: night.color.accentSoft,
-          borderColor: night.color.accentBorderStrong
-        }]],
-        children: [/*#__PURE__*/_jsx(Text, {
-          style: [styles.label, isActive && {
-            color: accent,
-            fontWeight: "600"
-          }],
-          children: segment.label
-        }), /*#__PURE__*/_jsx(Text, {
-          style: [styles.value, {
-            color: isActive ? accent : night.color.textTertiary
-          }],
-          children: counts[segment.id]
-        })]
-      }, segment.id);
-    })
-  });
-}
-
-/** Tally a list of things that each know which backend they came from. */
-export function countByStorageType(items) {
-  const counts = {
-    all: items.length,
-    async: 0,
-    mmkv: 0,
-    secure: 0
-  };
-  for (const item of items) counts[item.storageType] += 1;
-  return counts;
-}
-const styles = StyleSheet.create({
-  row: {
-    flexDirection: "row",
-    gap: 8,
-    marginTop: 2
-  },
-  pill: {
-    flex: 1,
-    backgroundColor: night.color.buttonSurface,
-    borderRadius: 8,
-    borderWidth: 1,
-    borderColor: night.color.border,
-    paddingVertical: 6,
-    paddingHorizontal: 8,
-    alignItems: "center",
-    justifyContent: "center",
-    minHeight: 32
-  },
-  pillActive: {
-    borderWidth: 1,
-    transform: [{
-      scale: 1.005
-    }]
-  },
-  label: {
-    fontSize: 9,
-    color: night.color.textSecondary,
-    textTransform: "uppercase",
-    letterSpacing: 0.4,
-    fontWeight: "500",
-    marginBottom: 1
-  },
-  value: {
-    fontSize: 12,
-    fontWeight: "600",
-    fontFamily: monoFont,
-    lineHeight: 14
-  }
-});
+"use strict";import{storageLabels as a}from"../utils/storageLabels";import{StyleSheet as u,Text as b,TouchableOpacity as y,View as p}from"react-native";import{macOSColors as n,night as r,monoFont as f}from"@buoy-gg/shared-ui";import{jsx as s,jsxs as m}from"react/jsx-runtime";const S=[{id:"all",label:"All Types",color:null},{id:"async",label:a.async,color:n.semantic.warning},{id:"mmkv",label:a.mmkv,color:n.semantic.info},{id:"secure",label:"Secure",color:n.semantic.success}];export function StorageTypeFilterBar({active:t,onChange:l,counts:i}){return s(p,{style:e.row,children:S.filter(o=>a.hasSecure||o.id!=="secure").map(o=>{const c=t===o.id;const d=o.color??r.color.accent;return m(y,{testID:`buoy-storage-type-${o.id}`,accessibilityRole:"button",accessibilityLabel:`Filter by ${o.label}`,accessibilityState:{selected:c},activeOpacity:.8,onPress:()=>l(o.id),style:[e.pill,{borderColor:r.color.border},c&&[e.pillActive,o.color?{backgroundColor:o.color+"15",borderColor:o.color+"40"}:{backgroundColor:r.color.accentSoft,borderColor:r.color.accentBorderStrong}]],children:[s(b,{style:[e.label,c&&{color:d,fontWeight:"600"}],children:o.label}),s(b,{style:[e.value,{color:c?d:r.color.textTertiary}],children:i[o.id]})]},o.id)})})}export function countByStorageType(t){const l={all:t.length,async:0,mmkv:0,secure:0};for(const i of t)l[i.storageType]+=1;return l}const e=u.create({row:{flexDirection:"row",gap:8,marginTop:2},pill:{flex:1,backgroundColor:r.color.buttonSurface,borderRadius:8,borderWidth:1,borderColor:r.color.border,paddingVertical:6,paddingHorizontal:8,alignItems:"center",justifyContent:"center",minHeight:32},pillActive:{borderWidth:1,transform:[{scale:1.005}]},label:{fontSize:9,color:r.color.textSecondary,textTransform:"uppercase",letterSpacing:.4,fontWeight:"500",marginBottom:1},value:{fontSize:12,fontWeight:"600",fontFamily:f,lineHeight:14}});

package/lib/module/storage/hooks/useAsyncStorageKeys.js

@@ -1,136 +1 @@
-"use strict";
-
-import { useState, useEffect, useCallback, useRef } from 'react';
-import AsyncStorage from '@react-native-async-storage/async-storage';
-import { readMany } from '../utils/asyncStorageCompat';
-import { requiredKeyAppliesTo } from '../utils/requiredStorageKeyScope';
-export function useAsyncStorageKeys(requiredStorageKeys = []) {
-  // State management
-  const [storageKeys, setStorageKeys] = useState([]);
-  const [isLoading, setIsLoading] = useState(true);
-  const [error, setError] = useState(null);
-
-  // Callers routinely pass a fresh array literal (or rely on the `= []`
-  // default, which is a new array every render). Depending on its identity
-  // would recreate `fetchStorageData` each render, re-fire the effect, and
-  // loop AsyncStorage.getAllKeys/multiGet forever. Depend on a stable content
-  // signature instead, and read the latest array via a ref inside the fetch.
-  const requiredSignature = JSON.stringify(requiredStorageKeys);
-  const requiredRef = useRef(requiredStorageKeys);
-  requiredRef.current = requiredStorageKeys;
-
-  // Fetch all keys and values from AsyncStorage
-  const fetchStorageData = useCallback(async () => {
-    const requiredStorageKeys = requiredRef.current;
-    setIsLoading(true);
-    setError(null);
-    try {
-      // 1. Get all keys from AsyncStorage
-      const allKeys = await AsyncStorage.getAllKeys();
-      if (!allKeys || allKeys.length === 0) {
-        setStorageKeys([]);
-        setIsLoading(false);
-        return;
-      }
-
-      // 2. Get all values (compat helper normalizes v2 multiGet / v3 getMany)
-      const allKeyValuePairs = await readMany(allKeys);
-
-      // 3. Process keys into StorageKeyInfo format
-      const allStorageKeys = [];
-      allKeyValuePairs.forEach(([key, value]) => {
-        // Parse value
-        let parsedValue = value;
-        if (value) {
-          try {
-            parsedValue = JSON.parse(value);
-          } catch {
-            parsedValue = value; // Keep as string if not JSON
-          }
-        }
-
-        // Check if this is a required key scoped to AsyncStorage
-        const requiredConfig = requiredStorageKeys.find(req => {
-          if (!requiredKeyAppliesTo(req, 'async')) return false;
-          if (typeof req === 'string') return req === key;
-          return req.key === key;
-        });
-
-        // Determine status
-        let status = 'optional_present';
-        if (requiredConfig) {
-          if (parsedValue === undefined || parsedValue === null) {
-            status = 'required_missing';
-          } else if (typeof requiredConfig === 'object' && requiredConfig.expectedValue !== undefined) {
-            status = parsedValue === requiredConfig.expectedValue ? 'required_present' : 'required_wrong_value';
-          } else if (typeof requiredConfig === 'object' && requiredConfig.expectedType !== undefined) {
-            const actualType = parsedValue === null ? 'null' : typeof parsedValue;
-            status = actualType.toLowerCase() === requiredConfig.expectedType.toLowerCase() ? 'required_present' : 'required_wrong_type';
-          } else {
-            status = 'required_present';
-          }
-        }
-        const keyInfo = {
-          key,
-          value: parsedValue,
-          storageType: 'async',
-          status,
-          category: requiredConfig ? 'required' : 'optional',
-          ...(typeof requiredConfig === 'object' && requiredConfig.expectedValue !== undefined && {
-            expectedValue: requiredConfig.expectedValue
-          }),
-          ...(typeof requiredConfig === 'object' && requiredConfig.expectedType !== undefined && {
-            expectedType: requiredConfig.expectedType
-          }),
-          ...(typeof requiredConfig === 'object' && requiredConfig.description !== undefined && {
-            description: requiredConfig.description
-          })
-        };
-        allStorageKeys.push(keyInfo);
-      });
-
-      // 4. Add missing required keys (Async-scoped only)
-      requiredStorageKeys.forEach(req => {
-        if (!requiredKeyAppliesTo(req, 'async')) return;
-        const key = typeof req === 'string' ? req : req.key;
-        const exists = allStorageKeys.some(k => k.key === key);
-        if (!exists) {
-          allStorageKeys.push({
-            key,
-            value: undefined,
-            storageType: 'async',
-            status: 'required_missing',
-            category: 'required',
-            ...(typeof req === 'object' && req.expectedValue !== undefined && {
-              expectedValue: req.expectedValue
-            }),
-            ...(typeof req === 'object' && req.expectedType !== undefined && {
-              expectedType: req.expectedType
-            }),
-            ...(typeof req === 'object' && req.description !== undefined && {
-              description: req.description
-            })
-          });
-        }
-      });
-      setStorageKeys(allStorageKeys);
-    } catch (err) {
-      setError(err instanceof Error ? err : new Error('Failed to fetch storage data'));
-      setStorageKeys([]);
-    } finally {
-      setIsLoading(false);
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [requiredSignature]);
-
-  // Initial fetch
-  useEffect(() => {
-    fetchStorageData();
-  }, [fetchStorageData]);
-  return {
-    storageKeys,
-    isLoading,
-    error,
-    refresh: fetchStorageData
-  };
-}
+"use strict";import{useState as f,useEffect as j,useCallback as S,useRef as w}from"react";import K from"@react-native-async-storage/async-storage";import{readMany as E}from"../utils/asyncStorageCompat";import{requiredKeyAppliesTo as x}from"../utils/requiredStorageKeyScope";export function useAsyncStorageKeys(a=[]){const[T,p]=f([]);const[m,d]=f(true);const[h,y]=f(null);const V=JSON.stringify(a);const l=w(a);l.current=a;const u=S(async()=>{const g=l.current;d(true);y(null);try{const o=await K.getAllKeys();if(!o||o.length===0){p([]);d(false);return}const _=await E(o);const c=[];_.forEach(([t,n])=>{let r=n;if(n){try{r=JSON.parse(n)}catch{r=n}}const e=g.find(s=>{if(!x(s,"async"))return false;if(typeof s==="string")return s===t;return s.key===t});let i="optional_present";if(e){if(r===void 0||r===null){i="required_missing"}else if(typeof e==="object"&&e.expectedValue!==void 0){i=r===e.expectedValue?"required_present":"required_wrong_value"}else if(typeof e==="object"&&e.expectedType!==void 0){const s=r===null?"null":typeof r;i=s.toLowerCase()===e.expectedType.toLowerCase()?"required_present":"required_wrong_type"}else{i="required_present"}}const b={key:t,value:r,storageType:"async",status:i,category:e?"required":"optional",...typeof e==="object"&&e.expectedValue!==void 0&&{expectedValue:e.expectedValue},...typeof e==="object"&&e.expectedType!==void 0&&{expectedType:e.expectedType},...typeof e==="object"&&e.description!==void 0&&{description:e.description}};c.push(b)});g.forEach(t=>{if(!x(t,"async"))return;const n=typeof t==="string"?t:t.key;const r=c.some(e=>e.key===n);if(!r){c.push({key:n,value:void 0,storageType:"async",status:"required_missing",category:"required",...typeof t==="object"&&t.expectedValue!==void 0&&{expectedValue:t.expectedValue},...typeof t==="object"&&t.expectedType!==void 0&&{expectedType:t.expectedType},...typeof t==="object"&&t.description!==void 0&&{description:t.description}})}});p(c)}catch(o){y(o instanceof Error?o:new Error("Failed to fetch storage data"));p([])}finally{d(false)}},[V]);j(()=>{u()},[u]);return{storageKeys:T,isLoading:m,error:h,refresh:u}}