@buoy-gg/storage 7.0.40 → 7.0.42

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

@@ -1,1257 +1,4 @@
-"use strict";
+"use strict";import{storageLabels as wt}from"../utils/storageLabels";import{useMemo as S,useCallback as b,useState as N,useEffect as A,useRef as ie}from"react";import{StyleSheet as It,Text as m,View as f,TouchableOpacity as ae,ScrollView as Re,Alert as le}from"react-native";import{absoluteFill as Ae,useLimit as Ee,TIER_LIMITS as _t,monoFont as W}from"@buoy-gg/shared-ui";import{Database as Le,Zap as Mt,ProBadge as ze,ProUpgradeModal as Kt,ToolEmptyState as xt,resolveListEmptyState as Bt}from"@buoy-gg/shared-ui";import{isDevToolsStorageKey as p}from"@buoy-gg/shared-ui";import{StorageKeySection as Nt,storageRowId as De}from"./StorageKeySection";import{StorageKeyDetailScreen as qt}from"./StorageKeyDetailScreen";import{StorageFilterCards as Vt}from"./StorageFilterCards";import{useAsyncStorageKeys as Rt}from"../hooks/useAsyncStorageKeys";import{addListener as At}from"../utils/AsyncStorageListener";import{useMultiMMKVKeys as Et}from"../hooks/useMMKVKeys";import{useSecureStoreKeys as Lt}from"../hooks/useSecureStoreKeys";import{useMMKVInstances as zt}from"../hooks/useMMKVInstances";import{StorageSaveNotice as Dt}from"./StorageSaveNotice";import{StorageActionButtons as Ft}from"./StorageActionButtons";import{SelectionActionBar as Wt}from"./SelectionActionBar";import{addMMKVListener as Ot}from"../utils/MMKVListener";import{onStorageBrowserRefresh as Ht}from"../utils/storageBrowserRefresh";import{deleteStorageKeys as Pt}from"../utils/deleteStorageKeys";import{setStorageValue as $t,storageEditBlockedReason as Ut}from"../utils/setStorageValue";import{gameUIColors as E,macOSColors as J,night as s,HardDrive as Fe}from"@buoy-gg/shared-ui";import{useIsPro as jt}from"@buoy-gg/license";import{jsx as a,jsxs as d,Fragment as Gt}from"react/jsx-runtime";const We=[J.semantic.info,J.semantic.success,J.semantic.warning,J.semantic.debug,"#FF6B9D","#00D9FF"];function L(z){const ce=z.split("").reduce((O,de)=>O+de.charCodeAt(0),0);return We[ce%We.length]}export const FREE_TIER_KEY_LIMIT=_t["storage.keys"].free;export function GameUIStorageBrowser({requiredStorageKeys:z=[],showFilters:ce=false,ignoredPatterns:O=new Set(["@react_buoy"]),onTogglePattern:de,onAddPattern:ue,searchQuery:w="",storageDataRef:X,eventCountByKey:ge,lastWriteByKey:Yt,onViewHistory:Z,enabledStorageTypes:H,statusFilter:ye,onStatusFilterChange:me,onStatusCountsChange:fe,pinnedKeys:_,onTogglePin:he,storageTypeFilter:pe,onStorageTypeFilterChange:Se,applySafeAreaInset:Oe,detailKey:P=null,onOpenKey:He,onCloseDetail:be}){const M=jt();const $=Ee("storage.keys");const Ce=Ee("storage.mmkvInstances");const[Q,q]=N(false);A(()=>{if(Q&&M){q(false)}},[Q,M]);const[Pe,$e]=N("all");const ee=ye!=null&&me!=null;const T=ee?ye:Pe;const Ue=ee?me:$e;const[je,Ge]=N("all");const ve=pe!=null&&Se!=null;const C=ve?pe:je;const Ye=ve?Se:Ge;const[g,Te]=N(null);const Je=ie(null);const Xe=ie(0);const ke=ie(new Map);const Ze=b((e,t)=>{if(t)ke.current.set(e,t);else ke.current.delete(e)},[]);const[we,Ie]=N(0);const[te,re]=N(false);const[U,V]=N(new Set);const{instances:y}=zt(false);const{storageKeys:_e,isLoading:Qe,error:et,refresh:j}=Rt(z);const tt=S(()=>y.map(e=>({instance:e.instance,id:e.id})),[y]);const{storageKeys:oe,isLoading:rt,error:ot,refresh:G}=Et(tt,z);const Me=S(()=>{if(!g){return oe}return oe.filter(e=>e.instanceId===g)},[oe,g]);const{storageKeys:Ke,isLoading:nt,error:st,refresh:xe}=Lt(z);const c=S(()=>{return[..._e,...Me,...Ke]},[_e,Me,Ke]);const K=S(()=>{if(!P)return null;const e=De(P);return c.find(t=>De(t)===e)??P},[P,c]);const it=Qe||rt||nt;const Be=et||ot||st;const k=b(()=>{j();G();xe()},[j,G,xe]);const R=b(e=>{return e.instanceId?`${e.storageType}-${e.instanceId}-${e.key}`:`${e.storageType}-${e.key}`},[]);const at=b(()=>{re(e=>{if(e){V(new Set)}return!e})},[]);const lt=b((e,t)=>{const r=R(e);V(h=>{const i=new Set(h);if(t){i.add(r)}else{i.delete(r)}return i})},[R]);const ct=b(()=>{V(new Set);re(false);k()},[k]);const ne=b(e=>{e.forEach(t=>ue?.(t.key));V(new Set);re(false)},[ue]);const se=b(async(e,t)=>{if(!M){q(true);throw new Error("Editing storage values is a Pro feature.")}await $t(e,t,y);k();Ie(r=>r+1)},[M,y,k]);const dt=b(e=>{void se(e,JSON.stringify(!e.value)).catch(t=>{le.alert("Couldn't save",t instanceof Error?t.message:String(t))})},[se]);const Ne=b((e,t)=>{if(!M){q(true);return}le.alert("Delete key",`Delete "${e.key}"? This cannot be undone.`,[{text:"Cancel",style:"cancel"},{text:"Delete",style:"destructive",onPress:async()=>{try{await Pt([e],y.map(r=>({id:r.id,instance:r.instance})));k();t?.()}catch(r){le.alert("Error",`Failed to delete key: ${r}`)}}}])},[M,y,k]);const qe=b(e=>Ut(e,y),[y]);const ut=S(()=>{const e=c;const t={valid:e.filter(l=>l.status==="required_present"||l.status==="optional_present").length,missing:e.filter(l=>l.status==="required_missing").length,issues:e.filter(l=>l.status==="required_wrong_value"||l.status==="required_wrong_type").length,total:e.length};const r=e.filter(l=>l.storageType==="async");const h=e.filter(l=>l.storageType==="mmkv");const i=e.filter(l=>l.storageType==="secure");return{summary:{valid:t.valid,missing:t.missing,issues:t.issues,total:t.total,timestamp:new Date().toISOString()},asyncStorage:r.reduce((l,u)=>{l[u.key]=u.value;return l},{}),mmkv:h.reduce((l,u)=>{const I=u.instanceId||"default";if(!l[I])l[I]={};l[I][u.key]=u.value;return l},{}),secure:i.reduce((l,u)=>{l[u.key]=u.value;return l},{})}},[c]);A(()=>{if(X){X.current=c}},[c,X]);A(()=>{let e;const t=At(r=>{clearTimeout(e);e=setTimeout(()=>{j()},100)});return()=>{clearTimeout(e);t()}},[j]);A(()=>{let e;const t=Ht(()=>{clearTimeout(e);e=setTimeout(k,100)});return()=>{clearTimeout(e);t()}},[k]);A(()=>{let e;const t=Ot(r=>{const h=g===null||r.instanceId===g;if(h){clearTimeout(e);e=setTimeout(()=>{G()},100)}});return()=>{clearTimeout(e);t()}},[G,g]);const D=S(()=>{const e=c;const t=e.filter(i=>!p(i.key));const r=e.filter(i=>p(i.key));const h={totalCount:e.length,requiredCount:t.filter(i=>i.category==="required").length,missingCount:t.filter(i=>i.status==="required_missing").length,wrongValueCount:t.filter(i=>i.status==="required_wrong_value").length,wrongTypeCount:t.filter(i=>i.status==="required_wrong_type").length,presentRequiredCount:t.filter(i=>i.status==="required_present").length,optionalCount:t.filter(i=>i.category==="optional").length,mmkvCount:e.filter(i=>i.storageType==="mmkv").length,asyncCount:e.filter(i=>i.storageType==="async").length,secureCount:e.filter(i=>i.storageType==="secure").length,devToolsCount:r.length};return h},[c]);const x=S(()=>{let e=c.filter(o=>!p(o.key));if(C!=="all"){e=e.filter(o=>o.storageType===C)}const t=e.filter(o=>o.status==="required_present"||o.status==="optional_present").length;const r=e.filter(o=>o.status==="required_missing").length;const h=e.filter(o=>o.status==="required_wrong_type"||o.status==="required_wrong_value").length;let i=0;let l=0;let u=0;let I=0;if(T==="all"){i=c.filter(o=>!p(o.key)&&o.storageType==="async"&&(o.status==="required_present"||o.status==="optional_present")).length;l=c.filter(o=>!p(o.key)&&o.storageType==="mmkv"&&(o.status==="required_present"||o.status==="optional_present")).length;u=c.filter(o=>!p(o.key)&&o.storageType==="secure"&&(o.status==="required_present"||o.status==="optional_present")).length;I=i+l+u}else if(T==="missing"){i=c.filter(o=>!p(o.key)&&o.storageType==="async"&&o.status==="required_missing").length;l=c.filter(o=>!p(o.key)&&o.storageType==="mmkv"&&o.status==="required_missing").length;u=c.filter(o=>!p(o.key)&&o.storageType==="secure"&&o.status==="required_missing").length;I=i+l+u}else if(T==="issues"){i=c.filter(o=>!p(o.key)&&o.storageType==="async"&&(o.status==="required_wrong_type"||o.status==="required_wrong_value")).length;l=c.filter(o=>!p(o.key)&&o.storageType==="mmkv"&&(o.status==="required_wrong_type"||o.status==="required_wrong_value")).length;u=c.filter(o=>!p(o.key)&&o.storageType==="secure"&&(o.status==="required_wrong_type"||o.status==="required_wrong_value")).length;I=i+l+u}return{validCount:t,missingCount:r,issuesCount:h,asyncCount:i,mmkvCount:l,secureCount:u,totalCount:I}},[c,T,C]);A(()=>{fe?.({validCount:x.validCount,missingCount:x.missingCount,issuesCount:x.issuesCount})},[fe,x.validCount,x.missingCount,x.issuesCount]);const Ve=S(()=>{return[...c].sort((e,t)=>{const r={required_missing:1,required_wrong_type:2,required_wrong_value:3,required_present:4,optional_present:5};return(r[e.status]||999)-(r[t.status]||999)})},[c]);const Jt=S(()=>{return Array.from(new Set(c.map(e=>e.key))).sort()},[c]);const v=S(()=>{let e=Ve;if(H&&H.size>0){e=e.filter(t=>H.has(t.storageType))}e=e.filter(t=>{const r=Array.from(O).some(h=>t.key.includes(h));return!r});if(w){const t=w.toLowerCase();e=e.filter(r=>r.key.toLowerCase().includes(t))}switch(T){case"all":e=e.filter(t=>t.status==="required_present"||t.status==="optional_present");break;case"missing":e=e.filter(t=>t.status==="required_missing");break;case"issues":e=e.filter(t=>t.status==="required_wrong_type"||t.status==="required_wrong_value");break}if(C!=="all"){e=e.filter(t=>t.storageType===C)}if(_&&_.size>0){const t=e.filter(h=>_.has(h.key));const r=e.filter(h=>!_.has(h.key));e=[...t,...r]}return e},[Ve,T,C,O,w,g,H,_]);const B=S(()=>v.slice(0,$),[v,$]);const Y=S(()=>{return Math.max(0,v.length-$)},[v.length,$]);const gt=Y>0;const Xt=S(()=>{const e=v.filter(r=>!p(r.key));const t={totalCount:v.length,requiredCount:e.filter(r=>r.category==="required").length,missingCount:e.filter(r=>r.status==="required_missing").length,wrongValueCount:e.filter(r=>r.status==="required_wrong_value").length,wrongTypeCount:e.filter(r=>r.status==="required_wrong_type").length,presentRequiredCount:e.filter(r=>r.status==="required_present").length,optionalCount:e.filter(r=>r.category==="optional").length,mmkvCount:v.filter(r=>r.storageType==="mmkv").length,asyncCount:v.filter(r=>r.storageType==="async").length,secureCount:v.filter(r=>r.storageType==="secure").length,devToolsCount:v.filter(r=>p(r.key)).length};return t},[v]);const yt=S(()=>{return B.filter(e=>U.has(R(e)))},[B,U,R]);const mt=b(()=>{const e=new Set(B.map(R));V(e)},[B,R]);const ft=b(()=>{V(new Set)},[]);const F=D.requiredCount>0?Math.round(D.presentRequiredCount/D.requiredCount*100):D.totalCount>0?100:0;const ht=F>=90?"OPTIMAL":F>=70?"WARNING":"CRITICAL";const pt=F>=90?E.success:F>=70?E.warning:E.error;if(K){return a(f,{style:n.root,children:a(qt,{storageKey:K,editBlockedReason:qe(K),eventCount:ge?.[K.key],onSave:e=>se(K,e),onViewHistory:Z?()=>Z(K.key):void 0,onDeleteKey:e=>Ne(e,()=>be?.()),onHideKey:e=>{ne([e]);be?.()},isPinned:_?.has(K.key)??false,onTogglePin:he,applySafeAreaInset:Oe})})}if(it&&c.length===0){return d(f,{style:n.emptyState,children:[a(Le,{size:48,color:s.color.textTertiary}),a(m,{style:n.emptyTitle,children:"Loading storage keys..."})]})}if(Be){return d(f,{style:n.emptyState,children:[a(Le,{size:48,color:E.error}),a(m,{style:[n.emptyTitle,{color:E.error}],children:"Error loading storage"}),a(m,{style:n.emptySubtitle,children:Be.message})]})}const St=d(Gt,{children:[C==="mmkv"&&y.length===0&&d(f,{style:n.emptyMMKVState,children:[a(m,{style:n.emptyMMKVTitle,children:"No MMKV Instances Detected"}),a(m,{style:n.emptyMMKVSubtitle,children:"MMKV instances must be registered with registerMMKVInstance()"}),a(m,{style:n.emptyMMKVCode,children:`import { registerMMKVInstance } from '@buoy-gg/storage';
 
-import { useMemo, useCallback, useState, useEffect, useRef } from "react";
-import { StyleSheet, Text, View, TouchableOpacity, ScrollView, Alert } from "react-native";
-import { absoluteFill, useLimit, TIER_LIMITS, monoFont } from "@buoy-gg/shared-ui";
-import { Database, Zap, ProBadge, ProUpgradeModal, ToolEmptyState, resolveListEmptyState } from "@buoy-gg/shared-ui";
-import { isDevToolsStorageKey } from "@buoy-gg/shared-ui";
-import { StorageKeySection, storageRowId } from "./StorageKeySection";
-import { StorageKeyDetailScreen } from "./StorageKeyDetailScreen";
-import { StorageFilterCards } from "./StorageFilterCards";
-import { useAsyncStorageKeys } from "../hooks/useAsyncStorageKeys";
-import { addListener } from "../utils/AsyncStorageListener";
-import { useMultiMMKVKeys } from "../hooks/useMMKVKeys";
-import { useSecureStoreKeys } from "../hooks/useSecureStoreKeys";
-import { useMMKVInstances } from "../hooks/useMMKVInstances";
-import { StorageSaveNotice } from "./StorageSaveNotice";
-import { StorageActionButtons } from "./StorageActionButtons";
-import { SelectionActionBar } from "./SelectionActionBar";
-// Pure JS (no react-native-mmkv dependency) — works with any registered
-// instance, including remote-backed wrappers on the desktop dashboard.
-import { addMMKVListener } from "../utils/MMKVListener";
-import { onStorageBrowserRefresh } from "../utils/storageBrowserRefresh";
-import { deleteStorageKeys } from "../utils/deleteStorageKeys";
-import { setStorageValue, storageEditBlockedReason } from "../utils/setStorageValue";
-
-// Import shared Game UI components
-import { gameUIColors, macOSColors, night, HardDrive } from "@buoy-gg/shared-ui";
-import { useIsPro } from "@buoy-gg/license";
-
-// MMKV Instance color palette - consistent colors per instance
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-const INSTANCE_COLORS = [macOSColors.semantic.info,
-// Blue
-macOSColors.semantic.success,
-// Green
-macOSColors.semantic.warning,
-// Orange
-macOSColors.semantic.debug,
-// Purple
-'#FF6B9D',
-// Pink
-'#00D9FF' // Cyan
-];
-
-/**
- * Get consistent color for an MMKV instance based on its ID
- * Uses simple hash to ensure same instance always gets same color
- */
-function getInstanceColor(instanceId) {
-  const hash = instanceId.split('').reduce((acc, char) => acc + char.charCodeAt(0), 0);
-  return INSTANCE_COLORS[hash % INSTANCE_COLORS.length];
-}
-
-/**
- * @deprecated Read the live limit with `useLimit("storage.keys")` — this only
- * reports the FREE tier's value and is blind to the anonymous tier. Kept
- * because it is part of the package's public exports.
- */
-export const FREE_TIER_KEY_LIMIT = TIER_LIMITS["storage.keys"].free;
-export function GameUIStorageBrowser({
-  requiredStorageKeys = [],
-  showFilters = false,
-  ignoredPatterns = new Set(["@react_buoy"]),
-  onTogglePattern,
-  onAddPattern,
-  searchQuery = "",
-  storageDataRef,
-  eventCountByKey,
-  lastWriteByKey,
-  onViewHistory,
-  enabledStorageTypes,
-  statusFilter,
-  onStatusFilterChange,
-  onStatusCountsChange,
-  pinnedKeys,
-  onTogglePin,
-  storageTypeFilter,
-  onStorageTypeFilterChange,
-  applySafeAreaInset,
-  detailKey = null,
-  onOpenKey,
-  onCloseDetail
-}) {
-  const isPro = useIsPro();
-  const keyLimit = useLimit("storage.keys");
-  const mmkvInstanceLimit = useLimit("storage.mmkvInstances");
-  const [showUpgradeModal, setShowUpgradeModal] = useState(false);
-
-  // Auto-close upgrade modal when user becomes Pro
-  useEffect(() => {
-    if (showUpgradeModal && isPro) {
-      setShowUpgradeModal(false);
-    }
-  }, [showUpgradeModal, isPro]);
-  const [internalFilter, setInternalFilter] = useState("all");
-  // Controlled when the host supplies both halves; uncontrolled otherwise.
-  const isFilterControlled = statusFilter != null && onStatusFilterChange != null;
-  const activeFilter = isFilterControlled ? statusFilter : internalFilter;
-  const setActiveFilter = isFilterControlled ? onStatusFilterChange : setInternalFilter;
-  const [internalStorageType, setInternalStorageType] = useState("all");
-  // Controlled when the host supplies both halves — the modal does, so the
-  // Events tab shows the same backend you picked here.
-  const isStorageTypeControlled = storageTypeFilter != null && onStorageTypeFilterChange != null;
-  const activeStorageType = isStorageTypeControlled ? storageTypeFilter : internalStorageType;
-  const setActiveStorageType = isStorageTypeControlled ? onStorageTypeFilterChange : setInternalStorageType;
-  const [selectedMMKVInstance, setSelectedMMKVInstance] = useState(null);
-  const scrollRef = useRef(null);
-  const scrollOffsetRef = useRef(0);
-  const rowNodesRef = useRef(new Map());
-  const handleRowRef = useCallback((id, node) => {
-    if (node) rowNodesRef.current.set(id, node);else rowNodesRef.current.delete(id);
-  }, []);
-
-  /**
-   * Shown after every successful write, with the same sentence every time.
-   *
-   * An earlier version looked up which live store owned the key and offered to
-   * make that store re-read it. That 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 at all, and a store can register
-   * after the lookup ran. A message that is right most of the time is the
-   * problem this tool has, not the fix for it.
-   *
-   * There is also no general mechanism to find: the app owns its cache, and
-   * only the app can invalidate it. So the tool promises the one thing that is
-   * true for every key, every backend and every persistence library — this is
-   * what loads next launch — and "make it live now" lives in the state tools,
-   * where the store you mean is the one you are looking at.
-   */
-  /**
-   * Bumped on every save rather than flipped to `true`.
-   *
-   * The toast unmounts itself when it fades, and a boolean already `true` would
-   * not change on the next save — so a second edit would show nothing. The
-   * counter is the toast's `key`, so each save mounts a fresh one and the
-   * animation restarts from the beginning.
-   */
-  const [saveToastId, setSaveToastId] = useState(0);
-
-  // Selection mode state
-  const [isSelectMode, setIsSelectMode] = useState(false);
-  const [selectedKeyIds, setSelectedKeyIds] = useState(new Set());
-
-  // Get all MMKV instances
-  const {
-    instances: mmkvInstances
-  } = useMMKVInstances(false);
-
-  // REMOVED: Auto-selection is now handled by the instance navbar
-  // Users can manually select an instance from the navbar if they want to filter by instance
-  // By default, selectedMMKVInstance is null, which shows ALL MMKV keys
-
-  // Use AsyncStorage hook
-  const {
-    storageKeys: asyncStorageKeys,
-    isLoading: isLoadingAsync,
-    error: asyncError,
-    refresh: refreshAsync
-  } = useAsyncStorageKeys(requiredStorageKeys);
-
-  // Memoize the instances array to prevent infinite re-renders
-  const mmkvInstancesForHook = useMemo(() => mmkvInstances.map(inst => ({
-    instance: inst.instance,
-    id: inst.id
-  })), [mmkvInstances]);
-
-  // Use MMKV hook - always fetch from ALL instances, then filter by selected instance
-  const {
-    storageKeys: allMMKVKeys,
-    isLoading: isLoadingMMKV,
-    error: mmkvError,
-    refresh: refreshMMKV
-  } = useMultiMMKVKeys(mmkvInstancesForHook, requiredStorageKeys);
-
-  // Filter MMKV keys by selected instance (if one is selected)
-  const mmkvStorageKeys = useMemo(() => {
-    if (!selectedMMKVInstance) {
-      return allMMKVKeys; // Show all MMKV keys
-    }
-    return allMMKVKeys.filter(k => k.instanceId === selectedMMKVInstance);
-  }, [allMMKVKeys, selectedMMKVInstance]);
-
-  // Use SecureStore hook — only surfaces keys declared via registerSecureStoreKeys()
-  const {
-    storageKeys: secureStorageKeys,
-    isLoading: isLoadingSecure,
-    error: secureError,
-    refresh: refreshSecure
-  } = useSecureStoreKeys();
-
-  // Merge storage keys from AsyncStorage, MMKV, and SecureStore
-  const allStorageKeys = useMemo(() => {
-    return [...asyncStorageKeys, ...mmkvStorageKeys, ...secureStorageKeys];
-  }, [asyncStorageKeys, mmkvStorageKeys, secureStorageKeys]);
-
-  /**
-   * The CURRENT snapshot of the key the detail screen is open on. `detailKey`
-   * is only an identity — resolving it fresh each pass is what makes the
-   * detail screen live: the app writes, the snapshot refreshes, the screen
-   * follows. Falls back to the captured info because the backend hooks
-   * transiently EMPTY their lists mid-refresh — treating "missing from this
-   * render's list" as "deleted" closed the screen the moment it opened, so
-   * absence here is never acted on (deletion closes explicitly, from the
-   * delete flow itself).
-   */
-  const detailInfo = useMemo(() => {
-    if (!detailKey) return null;
-    const id = storageRowId(detailKey);
-    return allStorageKeys.find(k => storageRowId(k) === id) ?? detailKey;
-  }, [detailKey, allStorageKeys]);
-
-  // Determine loading and error states
-  const isLoading = isLoadingAsync || isLoadingMMKV || isLoadingSecure;
-  const error = asyncError || mmkvError || secureError;
-
-  // Combined refresh function
-  const refresh = useCallback(() => {
-    refreshAsync();
-    refreshMMKV();
-    refreshSecure();
-  }, [refreshAsync, refreshMMKV, refreshSecure]);
-
-  // Generate unique identifier for a storage key
-  const getKeyIdentifier = useCallback(storageKey => {
-    return storageKey.instanceId ? `${storageKey.storageType}-${storageKey.instanceId}-${storageKey.key}` : `${storageKey.storageType}-${storageKey.key}`;
-  }, []);
-
-  // Toggle select mode
-  const handleToggleSelectMode = useCallback(() => {
-    setIsSelectMode(prev => {
-      if (prev) {
-        // When exiting select mode, clear selection
-        setSelectedKeyIds(new Set());
-      }
-      return !prev;
-    });
-  }, []);
-
-  // Handle selection change for a single key
-  const handleSelectionChange = useCallback((storageKey, selected) => {
-    const keyId = getKeyIdentifier(storageKey);
-    setSelectedKeyIds(prev => {
-      const newSet = new Set(prev);
-      if (selected) {
-        newSet.add(keyId);
-      } else {
-        newSet.delete(keyId);
-      }
-      return newSet;
-    });
-  }, [getKeyIdentifier]);
-
-  // Clear selection and exit select mode after deletion
-  const handleDeleteComplete = useCallback(() => {
-    setSelectedKeyIds(new Set());
-    setIsSelectMode(false);
-    refresh();
-  }, [refresh]);
-
-  // Hide the selected keys by adding each to the ignored-pattern filter store,
-  // then exit selection mode. Non-destructive — keys can be unhidden from the
-  // filters UI.
-  const handleHideKeys = useCallback(keys => {
-    keys.forEach(k => onAddPattern?.(k.key));
-    setSelectedKeyIds(new Set());
-    setIsSelectMode(false);
-  }, [onAddPattern]);
-
-  /**
-   * Write an edited value back to the device.
-   *
-   * Pro is checked here rather than on the Edit button because the technical
-   * blocks (`storageEditBlockedReason`) and the licence are different kinds of
-   * "no": the former means this key can never be edited and the row says so
-   * permanently, the latter is an upsell. Throwing lets the editor keep the
-   * draft on screen instead of discarding what was typed.
-   */
-  const handleSaveValue = useCallback(async (storageKey, raw) => {
-    if (!isPro) {
-      setShowUpgradeModal(true);
-      throw new Error("Editing storage values is a Pro feature.");
-    }
-    await setStorageValue(storageKey, raw, mmkvInstances);
-    refresh();
-    setSaveToastId(id => id + 1);
-  }, [isPro, mmkvInstances, refresh]);
-
-  /**
-   * Flip a boolean key straight from its card.
-   *
-   * Goes through `handleSaveValue` like every other write, so the Pro gate and
-   * the type preservation are the same ones the editor uses — this is only a
-   * shortcut past the UI, not past the rules.
-   */
-  const handleToggleKey = useCallback(storageKey => {
-    void handleSaveValue(storageKey, JSON.stringify(!storageKey.value)).catch(e => {
-      Alert.alert("Couldn't save", e instanceof Error ? e.message : String(e));
-    });
-  }, [handleSaveValue]);
-
-  /**
-   * Delete ONE key, from its own card.
-   *
-   * Routed through `deleteStorageKeys` exactly like the selection bar, so the
-   * per-backend fan-out keeps having a single implementation — the last time
-   * that fan-out was wrong (an MMKV method renamed upstream) it was wrong in
-   * silence, and a second copy is how one backend quietly stops being deleted.
-   *
-   * Pro is checked here rather than on the button because it's an upsell, not
-   * a capability: the row shows the action and explains the wall on press.
-   */
-  const handleDeleteKey = useCallback((storageKey, onDeleted) => {
-    if (!isPro) {
-      setShowUpgradeModal(true);
-      return;
-    }
-    Alert.alert("Delete key", `Delete "${storageKey.key}"? This cannot be undone.`, [{
-      text: "Cancel",
-      style: "cancel"
-    }, {
-      text: "Delete",
-      style: "destructive",
-      onPress: async () => {
-        try {
-          await deleteStorageKeys([storageKey], mmkvInstances.map(inst => ({
-            id: inst.id,
-            instance: inst.instance
-          })));
-          refresh();
-          // Only after the delete actually landed — a cancelled alert
-          // or a failed delete leaves the caller's screen alone.
-          onDeleted?.();
-        } catch (error) {
-          Alert.alert("Error", `Failed to delete key: ${error}`);
-        }
-      }
-    }]);
-  }, [isPro, mmkvInstances, refresh]);
-
-  /** Permanent, per-key reasons a value can't be edited (never the licence). */
-  const editBlockedFor = useCallback(storageKey => storageEditBlockedReason(storageKey, mmkvInstances), [mmkvInstances]);
-
-  // Memoized export data for copy functionality
-  const copyExportData = useMemo(() => {
-    const allKeys = allStorageKeys;
-
-    // Calculate stats
-    const stats = {
-      valid: allKeys.filter(k => k.status === 'required_present' || k.status === 'optional_present').length,
-      missing: allKeys.filter(k => k.status === 'required_missing').length,
-      issues: allKeys.filter(k => k.status === 'required_wrong_value' || k.status === 'required_wrong_type').length,
-      total: allKeys.length
-    };
-
-    // Group by storage type
-    const asyncKeys = allKeys.filter(k => k.storageType === 'async');
-    const mmkvKeys = allKeys.filter(k => k.storageType === 'mmkv');
-    const secureKeys = allKeys.filter(k => k.storageType === 'secure');
-
-    // Build structured export
-    return {
-      summary: {
-        valid: stats.valid,
-        missing: stats.missing,
-        issues: stats.issues,
-        total: stats.total,
-        timestamp: new Date().toISOString()
-      },
-      asyncStorage: asyncKeys.reduce((acc, k) => {
-        acc[k.key] = k.value;
-        return acc;
-      }, {}),
-      mmkv: mmkvKeys.reduce((acc, k) => {
-        const instanceId = k.instanceId || 'default';
-        if (!acc[instanceId]) acc[instanceId] = {};
-        acc[instanceId][k.key] = k.value;
-        return acc;
-      }, {}),
-      secure: secureKeys.reduce((acc, k) => {
-        acc[k.key] = k.value;
-        return acc;
-      }, {})
-    };
-  }, [allStorageKeys]);
-
-  // Update storage data ref for copy functionality
-  useEffect(() => {
-    if (storageDataRef) {
-      storageDataRef.current = allStorageKeys;
-    }
-  }, [allStorageKeys, storageDataRef]);
-
-  // Auto-refresh on storage events (AsyncStorage)
-  useEffect(() => {
-    let timeoutId;
-    const unsubscribe = addListener(event => {
-      clearTimeout(timeoutId);
-      timeoutId = setTimeout(() => {
-        refreshAsync(); // Auto-refresh AsyncStorage when it changes
-      }, 100); // 100ms debounce
-    });
-    return () => {
-      clearTimeout(timeoutId);
-      unsubscribe();
-    };
-  }, [refreshAsync]);
-
-  // Auto-refresh when something outside this component knows the underlying
-  // storage changed. On device the listeners above cover it; in remote-mirror
-  // mode (desktop dashboard) local capture is suppressed and they never fire,
-  // so the dashboard signals each incoming device snapshot this way — without
-  // it the browse tab is frozen at whatever it read on mount.
-  useEffect(() => {
-    let timeoutId;
-    const unsubscribe = onStorageBrowserRefresh(() => {
-      clearTimeout(timeoutId);
-      timeoutId = setTimeout(refresh, 100);
-    });
-    return () => {
-      clearTimeout(timeoutId);
-      unsubscribe();
-    };
-  }, [refresh]);
-
-  // Auto-refresh on MMKV storage events
-  useEffect(() => {
-    let timeoutId;
-    const unsubscribe = addMMKVListener(event => {
-      // Refresh when the changed instance is one we're actually showing.
-      // `selectedMMKVInstance` is null by default ("All instances"), so
-      // comparing it to event.instanceId directly was never true for the view
-      // every user starts on — MMKV values sat stale in the browse list until
-      // it remounted, even though the write was recorded in Events.
-      const affectsView = selectedMMKVInstance === null || event.instanceId === selectedMMKVInstance;
-      if (affectsView) {
-        clearTimeout(timeoutId);
-        timeoutId = setTimeout(() => {
-          refreshMMKV(); // Auto-refresh MMKV when it changes
-        }, 100); // 100ms debounce
-      }
-    });
-    return () => {
-      clearTimeout(timeoutId);
-      unsubscribe();
-    };
-  }, [refreshMMKV, selectedMMKVInstance]);
-
-  // Calculate stats from ALL keys (not filtered) - base stats for display
-  const stats = useMemo(() => {
-    const allKeys = allStorageKeys;
-    const appKeys = allKeys.filter(k => !isDevToolsStorageKey(k.key));
-    const devKeys = allKeys.filter(k => isDevToolsStorageKey(k.key));
-    const storageStats = {
-      totalCount: allKeys.length,
-      requiredCount: appKeys.filter(k => k.category === "required").length,
-      missingCount: appKeys.filter(k => k.status === "required_missing").length,
-      wrongValueCount: appKeys.filter(k => k.status === "required_wrong_value").length,
-      wrongTypeCount: appKeys.filter(k => k.status === "required_wrong_type").length,
-      presentRequiredCount: appKeys.filter(k => k.status === "required_present").length,
-      optionalCount: appKeys.filter(k => k.category === "optional").length,
-      // Count keys by their actual storageType property
-      mmkvCount: allKeys.filter(k => k.storageType === "mmkv").length,
-      asyncCount: allKeys.filter(k => k.storageType === "async").length,
-      secureCount: allKeys.filter(k => k.storageType === "secure").length,
-      devToolsCount: devKeys.length
-    };
-    return storageStats;
-  }, [allStorageKeys]);
-
-  // Calculate stats for tab badges based on current filters
-  const tabStats = useMemo(() => {
-    // Start with all keys, excluding devtools keys
-    let keysForStats = allStorageKeys.filter(k => !isDevToolsStorageKey(k.key));
-
-    // If a specific storage type is selected, filter by that type first
-    if (activeStorageType !== "all") {
-      keysForStats = keysForStats.filter(k => k.storageType === activeStorageType);
-    }
-
-    // Calculate status counts from filtered keys
-    const validCount = keysForStats.filter(k => k.status === "required_present" || k.status === "optional_present").length;
-    const missingCount = keysForStats.filter(k => k.status === "required_missing").length;
-    const issuesCount = keysForStats.filter(k => k.status === "required_wrong_type" || k.status === "required_wrong_value").length;
-
-    // Calculate storage type counts based on active status filter
-    let asyncCount = 0;
-    let mmkvCount = 0;
-    let secureCount = 0;
-    let totalCount = 0;
-    if (activeFilter === "all") {
-      // Valid: only keys with valid status
-      asyncCount = allStorageKeys.filter(k => !isDevToolsStorageKey(k.key) && k.storageType === "async" && (k.status === "required_present" || k.status === "optional_present")).length;
-      mmkvCount = allStorageKeys.filter(k => !isDevToolsStorageKey(k.key) && k.storageType === "mmkv" && (k.status === "required_present" || k.status === "optional_present")).length;
-      secureCount = allStorageKeys.filter(k => !isDevToolsStorageKey(k.key) && k.storageType === "secure" && (k.status === "required_present" || k.status === "optional_present")).length;
-      totalCount = asyncCount + mmkvCount + secureCount;
-    } else if (activeFilter === "missing") {
-      // Missing: only keys with missing status
-      asyncCount = allStorageKeys.filter(k => !isDevToolsStorageKey(k.key) && k.storageType === "async" && k.status === "required_missing").length;
-      mmkvCount = allStorageKeys.filter(k => !isDevToolsStorageKey(k.key) && k.storageType === "mmkv" && k.status === "required_missing").length;
-      secureCount = allStorageKeys.filter(k => !isDevToolsStorageKey(k.key) && k.storageType === "secure" && k.status === "required_missing").length;
-      totalCount = asyncCount + mmkvCount + secureCount;
-    } else if (activeFilter === "issues") {
-      // Issues: only keys with issue status
-      asyncCount = allStorageKeys.filter(k => !isDevToolsStorageKey(k.key) && k.storageType === "async" && (k.status === "required_wrong_type" || k.status === "required_wrong_value")).length;
-      mmkvCount = allStorageKeys.filter(k => !isDevToolsStorageKey(k.key) && k.storageType === "mmkv" && (k.status === "required_wrong_type" || k.status === "required_wrong_value")).length;
-      secureCount = allStorageKeys.filter(k => !isDevToolsStorageKey(k.key) && k.storageType === "secure" && (k.status === "required_wrong_type" || k.status === "required_wrong_value")).length;
-      totalCount = asyncCount + mmkvCount + secureCount;
-    }
-    return {
-      validCount,
-      missingCount,
-      issuesCount,
-      asyncCount,
-      mmkvCount,
-      secureCount,
-      totalCount
-    };
-  }, [allStorageKeys, activeFilter, activeStorageType]);
-
-  // Push the status counts to a host toolbar that renders them (desktop).
-  useEffect(() => {
-    onStatusCountsChange?.({
-      validCount: tabStats.validCount,
-      missingCount: tabStats.missingCount,
-      issuesCount: tabStats.issuesCount
-    });
-  }, [onStatusCountsChange, tabStats.validCount, tabStats.missingCount, tabStats.issuesCount]);
-
-  // Sort all keys by priority (issues first)
-  const sortedKeys = useMemo(() => {
-    // Sort by status priority: errors first, then warnings, then valid
-    return [...allStorageKeys].sort((a, b) => {
-      const priorityMap = {
-        required_missing: 1,
-        required_wrong_type: 2,
-        required_wrong_value: 3,
-        required_present: 4,
-        optional_present: 5
-      };
-      return (priorityMap[a.status] || 999) - (priorityMap[b.status] || 999);
-    });
-  }, [allStorageKeys]);
-
-  // Get all unique keys for filter suggestions
-  const allUniqueKeys = useMemo(() => {
-    return Array.from(new Set(allStorageKeys.map(k => k.key))).sort();
-  }, [allStorageKeys]);
-
-  // Filter keys based on active filter, storage type, ignored patterns, and search
-  const filteredKeys = useMemo(() => {
-    let keys = sortedKeys;
-
-    // Apply enabled storage types filter (from parent unified filter)
-    if (enabledStorageTypes && enabledStorageTypes.size > 0) {
-      keys = keys.filter(k => enabledStorageTypes.has(k.storageType));
-    }
-
-    // Apply ignored pattern filter
-    keys = keys.filter(k => {
-      // Check if key matches any ignored pattern
-      const shouldIgnore = Array.from(ignoredPatterns).some(pattern => k.key.includes(pattern));
-      return !shouldIgnore;
-    });
-
-    // Apply search filter
-    if (searchQuery) {
-      const query = searchQuery.toLowerCase();
-      keys = keys.filter(k => k.key.toLowerCase().includes(query));
-    }
-
-    // Apply status filter
-    switch (activeFilter) {
-      case "all":
-        // "All" (Valid) shows only keys without issues
-        keys = keys.filter(k => k.status === "required_present" || k.status === "optional_present");
-        break;
-      case "missing":
-        keys = keys.filter(k => k.status === "required_missing");
-        break;
-      case "issues":
-        keys = keys.filter(k => k.status === "required_wrong_type" || k.status === "required_wrong_value");
-        break;
-    }
-
-    // Apply storage type filter
-    if (activeStorageType !== "all") {
-      keys = keys.filter(k => k.storageType === activeStorageType);
-    }
-
-    // NOTE: MMKV instance filtering is now handled in mmkvStorageKeys memo (line 128)
-    // No need to filter again here
-
-    // Float pinned keys to the top (stable — preserves existing order otherwise)
-    if (pinnedKeys && pinnedKeys.size > 0) {
-      const pinned = keys.filter(k => pinnedKeys.has(k.key));
-      const rest = keys.filter(k => !pinnedKeys.has(k.key));
-      keys = [...pinned, ...rest];
-    }
-    return keys;
-  }, [sortedKeys, activeFilter, activeStorageType, ignoredPatterns, searchQuery, selectedMMKVInstance, enabledStorageTypes, pinnedKeys]);
-
-  // Pro is Infinity here, so slice() returns everything.
-  const visibleKeys = useMemo(() => filteredKeys.slice(0, keyLimit), [filteredKeys, keyLimit]);
-
-  // Calculate how many keys are locked (only those matching current filter)
-  const lockedKeyCount = useMemo(() => {
-    return Math.max(0, filteredKeys.length - keyLimit);
-  }, [filteredKeys.length, keyLimit]);
-  const hasLockedKeys = lockedKeyCount > 0;
-
-  // Calculate stats from FILTERED keys to show actual visible counts
-  const filteredStats = useMemo(() => {
-    const appKeys = filteredKeys.filter(k => !isDevToolsStorageKey(k.key));
-    const storageStats = {
-      totalCount: filteredKeys.length,
-      requiredCount: appKeys.filter(k => k.category === "required").length,
-      missingCount: appKeys.filter(k => k.status === "required_missing").length,
-      wrongValueCount: appKeys.filter(k => k.status === "required_wrong_value").length,
-      wrongTypeCount: appKeys.filter(k => k.status === "required_wrong_type").length,
-      presentRequiredCount: appKeys.filter(k => k.status === "required_present").length,
-      optionalCount: appKeys.filter(k => k.category === "optional").length,
-      mmkvCount: filteredKeys.filter(k => k.storageType === "mmkv").length,
-      asyncCount: filteredKeys.filter(k => k.storageType === "async").length,
-      secureCount: filteredKeys.filter(k => k.storageType === "secure").length,
-      devToolsCount: filteredKeys.filter(k => isDevToolsStorageKey(k.key)).length
-    };
-    return storageStats;
-  }, [filteredKeys]);
-
-  // Get selected keys as StorageKeyInfo objects (from visible keys only)
-  const selectedKeysInfo = useMemo(() => {
-    return visibleKeys.filter(key => selectedKeyIds.has(getKeyIdentifier(key)));
-  }, [visibleKeys, selectedKeyIds, getKeyIdentifier]);
-
-  // Select all visible keys (only unlocked keys can be selected)
-  const handleSelectAll = useCallback(() => {
-    const allIds = new Set(visibleKeys.map(getKeyIdentifier));
-    setSelectedKeyIds(allIds);
-  }, [visibleKeys, getKeyIdentifier]);
-
-  // Clear all selections
-  const handleClearSelection = useCallback(() => {
-    setSelectedKeyIds(new Set());
-  }, []);
-
-  /**
-   * Serialized size of everything in storage, for the table's footer summary.
-   * Keyed on `allStorageKeys` rather than the filtered set: it answers "how much
-   * is in here", which a filter should not change.
-   */
-  // Calculate health percentage
-  const healthPercentage = stats.requiredCount > 0 ? Math.round(stats.presentRequiredCount / stats.requiredCount * 100) : stats.totalCount > 0 ? 100 : 0;
-  const healthStatus = healthPercentage >= 90 ? "OPTIMAL" : healthPercentage >= 70 ? "WARNING" : "CRITICAL";
-  const healthColor = healthPercentage >= 90 ? gameUIColors.success : healthPercentage >= 70 ? gameUIColors.warning : gameUIColors.error;
-
-  // The detail screen REPLACES the list as the modal's whole body — the host
-  // modal's header carries back + the key's name, the React Query
-  // interaction (and the Zustand tool's). All hooks above have run; this
-  // return only swaps what's painted.
-  if (detailInfo) {
-    return /*#__PURE__*/_jsx(View, {
-      style: styles.root,
-      children: /*#__PURE__*/_jsx(StorageKeyDetailScreen, {
-        storageKey: detailInfo,
-        editBlockedReason: editBlockedFor(detailInfo),
-        eventCount: eventCountByKey?.[detailInfo.key],
-        onSave: raw => handleSaveValue(detailInfo, raw),
-        onViewHistory: onViewHistory ? () => onViewHistory(detailInfo.key) : undefined,
-        onDeleteKey: k => handleDeleteKey(k, () => onCloseDetail?.()),
-        onHideKey: k => {
-          handleHideKeys([k]);
-          onCloseDetail?.();
-        },
-        isPinned: pinnedKeys?.has(detailInfo.key) ?? false,
-        onTogglePin: onTogglePin,
-        applySafeAreaInset: applySafeAreaInset
-      })
-    });
-  }
-
-  // Loading state
-  if (isLoading && allStorageKeys.length === 0) {
-    return /*#__PURE__*/_jsxs(View, {
-      style: styles.emptyState,
-      children: [/*#__PURE__*/_jsx(Database, {
-        size: 48,
-        color: night.color.textTertiary
-      }), /*#__PURE__*/_jsx(Text, {
-        style: styles.emptyTitle,
-        children: "Loading storage keys..."
-      })]
-    });
-  }
-
-  // Error state
-  if (error) {
-    return /*#__PURE__*/_jsxs(View, {
-      style: styles.emptyState,
-      children: [/*#__PURE__*/_jsx(Database, {
-        size: 48,
-        color: gameUIColors.error
-      }), /*#__PURE__*/_jsx(Text, {
-        style: [styles.emptyTitle, {
-          color: gameUIColors.error
-        }],
-        children: "Error loading storage"
-      }), /*#__PURE__*/_jsx(Text, {
-        style: styles.emptySubtitle,
-        children: error.message
-      })]
-    });
-  }
-
-  /* ---------------------------------------------------------------- *
-   * Subtrees the card list composes. Extracted rather than inlined so Pro
-   * gating and MMKV
-   * instance selection or the empty-state copy.
-   * ---------------------------------------------------------------- */
-
-  const mmkvSection = /*#__PURE__*/_jsxs(_Fragment, {
-    children: [activeStorageType === "mmkv" && mmkvInstances.length === 0 && /*#__PURE__*/_jsxs(View, {
-      style: styles.emptyMMKVState,
-      children: [/*#__PURE__*/_jsx(Text, {
-        style: styles.emptyMMKVTitle,
-        children: "No MMKV Instances Detected"
-      }), /*#__PURE__*/_jsx(Text, {
-        style: styles.emptyMMKVSubtitle,
-        children: "MMKV instances must be registered with registerMMKVInstance()"
-      }), /*#__PURE__*/_jsx(Text, {
-        style: styles.emptyMMKVCode,
-        children: `import { registerMMKVInstance } from '@buoy-gg/storage';\n\nconst storage = createMMKV();\nregisterMMKVInstance('mmkv.default', storage);`
-      })]
-    }), activeStorageType === "mmkv" && mmkvInstances.length > 0 && /*#__PURE__*/_jsxs(View, {
-      style: styles.instanceNavbar,
-      children: [/*#__PURE__*/_jsxs(View, {
-        style: styles.instanceNavbarHeader,
-        children: [/*#__PURE__*/_jsx(Text, {
-          style: styles.instanceNavbarLabel,
-          children: "INSTANCES"
-        }), mmkvInstances.length > mmkvInstanceLimit && /*#__PURE__*/_jsx(ProBadge, {
-          style: {
-            transform: [{
-              scale: 0.85
-            }]
-          }
-        })]
-      }), /*#__PURE__*/_jsxs(ScrollView, {
-        horizontal: true,
-        showsHorizontalScrollIndicator: false,
-        contentContainerStyle: styles.instanceNavbarScroll,
-        children: [(isPro || mmkvInstances.length === 1) && /*#__PURE__*/_jsxs(TouchableOpacity, {
-          onPress: () => setSelectedMMKVInstance(null),
-          testID: "buoy-storage-instance-all",
-          accessibilityRole: "button",
-          accessibilityLabel: "All MMKV instances",
-          style: [styles.instanceNavbarButton, selectedMMKVInstance === null && styles.instanceNavbarButtonActive],
-          children: [/*#__PURE__*/_jsx(HardDrive, {
-            size: 12,
-            color: selectedMMKVInstance === null ? night.color.text : night.color.textSecondary
-          }), /*#__PURE__*/_jsx(Text, {
-            style: [styles.instanceNavbarButtonText, selectedMMKVInstance === null && styles.instanceNavbarButtonTextActive],
-            children: "All"
-          }), /*#__PURE__*/_jsx(View, {
-            style: styles.instanceNavbarBadge,
-            children: /*#__PURE__*/_jsx(Text, {
-              style: styles.instanceNavbarBadgeText,
-              children: mmkvInstances.reduce((sum, inst) => sum + inst.keyCount, 0)
-            })
-          })]
-        }), mmkvInstances.map((inst, index) => {
-          const isLocked = index >= mmkvInstanceLimit;
-          return /*#__PURE__*/_jsxs(TouchableOpacity, {
-            testID: `buoy-storage-instance-${inst.id}`,
-            accessibilityRole: "button",
-            accessibilityLabel: `MMKV instance ${inst.id}`,
-            onPress: () => {
-              if (isLocked) {
-                setShowUpgradeModal(true);
-              } else {
-                setSelectedMMKVInstance(inst.id);
-              }
-            },
-            style: [styles.instanceNavbarButton, inst.id === selectedMMKVInstance && styles.instanceNavbarButtonActive, {
-              borderColor: isLocked ? night.color.border : getInstanceColor(inst.id) + '40',
-              backgroundColor: inst.id === selectedMMKVInstance ? getInstanceColor(inst.id) + '20' : night.color.surfaceElevated,
-              opacity: isLocked ? 0.5 : 1
-            }],
-            children: [/*#__PURE__*/_jsx(HardDrive, {
-              size: 12,
-              color: inst.id === selectedMMKVInstance ? getInstanceColor(inst.id) : night.color.textSecondary
-            }), /*#__PURE__*/_jsx(Text, {
-              style: [styles.instanceNavbarButtonText, inst.id === selectedMMKVInstance && {
-                color: getInstanceColor(inst.id),
-                fontWeight: '700'
-              }],
-              children: inst.id
-            }), /*#__PURE__*/_jsx(View, {
-              style: [styles.instanceNavbarBadge, inst.id === selectedMMKVInstance && {
-                backgroundColor: getInstanceColor(inst.id) + '30'
-              }],
-              children: /*#__PURE__*/_jsx(Text, {
-                style: [styles.instanceNavbarBadgeText, inst.id === selectedMMKVInstance && {
-                  color: getInstanceColor(inst.id)
-                }],
-                children: inst.keyCount
-              })
-            })]
-          }, inst.id);
-        })]
-      })]
-    })]
-  });
-  const actionButtonsNode = /*#__PURE__*/_jsx(StorageActionButtons, {
-    copyValue: copyExportData,
-    mmkvInstances: mmkvInstances.map(inst => ({
-      id: inst.id,
-      instance: inst.instance
-    })),
-    activeStorageType: activeStorageType,
-    onClearComplete: refresh,
-    isSelectMode: isSelectMode,
-    onToggleSelectMode: handleToggleSelectMode,
-    selectedCount: selectedKeyIds.size
-  });
-
-  /* Selection Action Bar - Only show in select mode with selections */
-  const selectionBarNode = isSelectMode ? /*#__PURE__*/_jsx(SelectionActionBar, {
-    selectedKeys: selectedKeysInfo,
-    mmkvInstances: mmkvInstances.map(inst => ({
-      id: inst.id,
-      instance: inst.instance
-    })),
-    onDeleteComplete: handleDeleteComplete,
-    onHideKeys: handleHideKeys,
-    onSelectAll: handleSelectAll,
-    onClearSelection: handleClearSelection,
-    totalVisibleKeys: visibleKeys.length
-  }) : null;
-  const lockedBannerNode = hasLockedKeys ? /*#__PURE__*/_jsxs(TouchableOpacity, {
-    style: styles.limitBanner,
-    onPress: () => setShowUpgradeModal(true),
-    activeOpacity: 0.8,
-    testID: "buoy-storage-locked-banner",
-    accessibilityRole: "button",
-    children: [/*#__PURE__*/_jsxs(View, {
-      style: styles.limitBannerContent,
-      children: [/*#__PURE__*/_jsxs(View, {
-        style: styles.limitBannerLeft,
-        children: [/*#__PURE__*/_jsx(Zap, {
-          size: 16,
-          color: night.color.accent
-        }), /*#__PURE__*/_jsx(Text, {
-          style: styles.limitBannerText,
-          children: searchQuery ? `${lockedKeyCount} matching ${lockedKeyCount === 1 ? 'key' : 'keys'} in locked storage` : `${lockedKeyCount} keys locked`
-        })]
-      }), /*#__PURE__*/_jsx(ProBadge, {})]
-    }), /*#__PURE__*/_jsx(Text, {
-      style: styles.limitBannerSubtext,
-      children: searchQuery ? "Upgrade to Pro to search your full storage" : "Upgrade to Pro to unlock full storage access"
-    })]
-  }) : null;
-  const emptyStateNode = (() => {
-    // Short-circuits on the first real key, so this costs nothing.
-    const hasAnyKeys = allStorageKeys.some(k => !isDevToolsStorageKey(k.key));
-
-    // Three causes here are unlike any other tool's: an empty MISSING or
-    // ISSUES list is a PASS, not a failure, and an empty VALID list means
-    // everything is broken. Those skip the shared resolver and say so.
-    let content;
-    if (searchQuery || !hasAnyKeys) {
-      content = resolveListEmptyState({
-        subject: "keys",
-        verb: "registered",
-        search: searchQuery,
-        total: hasAnyKeys ? 1 : 0,
-        waiting: {
-          // Previously this fell into the "all" branch and claimed every key
-          // had an issue — of the zero keys that exist.
-          otto: "empty",
-          title: "No storage keys",
-          message: "Nothing is registered for this tool to read."
-        }
-      });
-      if (searchQuery && hasAnyKeys) {
-        // No count: the pre-search total would mean re-running the whole key
-        // pipeline a second time for a number the sentence does not need.
-        content = {
-          ...content,
-          message: "No keys match. Clear the search to see them."
-        };
-      }
-    } else if (activeFilter === "missing") {
-      content = {
-        otto: "thumbsup",
-        title: "No missing keys",
-        message: "All required keys are present"
-      };
-    } else if (activeFilter === "issues") {
-      content = {
-        otto: "cool",
-        title: "No issues found",
-        message: "All storage keys are correctly configured"
-      };
-    } else {
-      content = {
-        otto: "broken",
-        title: "No valid keys found",
-        message: "All keys have issues or are missing"
-      };
-    }
-    return /*#__PURE__*/_jsx(ToolEmptyState, {
-      ...content,
-      testID: "buoy-storage-keys-empty"
-    });
-  })();
-  const upgradeModalNode = /*#__PURE__*/_jsx(ProUpgradeModal, {
-    visible: showUpgradeModal,
-    onClose: () => setShowUpgradeModal(false),
-    featureName: "Storage Keys"
-  });
-  return /*#__PURE__*/_jsxs(View, {
-    style: styles.root,
-    children: [saveToastId > 0 ? /*#__PURE__*/_jsx(StorageSaveNotice, {
-      onDone: () => setSaveToastId(0)
-    }, saveToastId) : null, /*#__PURE__*/_jsxs(ScrollView
-    // Named because `by.type("RCTScrollView")` doesn't match on Fabric
-    // (renamed class) — automation scrolls below-the-fold rows by this id.
-    , {
-      testID: "buoy-storage-scroll",
-      ref: scrollRef,
-      onScroll: e => {
-        scrollOffsetRef.current = e.nativeEvent.contentOffset.y;
-      },
-      scrollEventThrottle: 32,
-      style: styles.scrollContainer,
-      contentContainerStyle: styles.container,
-      showsVerticalScrollIndicator: false,
-      children: [/*#__PURE__*/_jsx(View, {
-        style: styles.backgroundGrid
-      }), /*#__PURE__*/_jsx(StorageFilterCards, {
-        stats: stats,
-        tabStats: tabStats,
-        healthPercentage: healthPercentage,
-        healthStatus: healthStatus,
-        healthColor: healthColor,
-        activeFilter: activeFilter,
-        onFilterChange: setActiveFilter,
-        activeStorageType: activeStorageType,
-        onStorageTypeChange: setActiveStorageType
-        // Same rule the wide bar follows: when a host toolbar owns the status
-        // filter it also renders the counters, so ours would be a second copy.
-        ,
-        showStatus: !isFilterControlled
-      }), mmkvSection, filteredKeys.length > 0 ? /*#__PURE__*/_jsxs(View, {
-        style: styles.keysSection,
-        children: [/*#__PURE__*/_jsxs(View, {
-          style: styles.sectionHeader,
-          children: [/*#__PURE__*/_jsxs(View, {
-            style: styles.sectionHeaderLeft,
-            children: [/*#__PURE__*/_jsxs(Text, {
-              style: styles.sectionTitle,
-              children: [activeFilter === "all" ? "KEYS" : activeFilter === "missing" ? "MISSING KEYS" : "ISSUES TO FIX", activeStorageType !== "all" && ` (${activeStorageType.toUpperCase()})`]
-            }), /*#__PURE__*/_jsx(View, {
-              style: styles.countBadge,
-              children: /*#__PURE__*/_jsx(Text, {
-                style: styles.countText,
-                children: visibleKeys.length
-              })
-            })]
-          }), actionButtonsNode]
-        }), selectionBarNode, /*#__PURE__*/_jsx(StorageKeySection, {
-          title: "",
-          count: -1,
-          keys: visibleKeys,
-          emptyMessage: "",
-          isSelectMode: isSelectMode,
-          selectedKeys: selectedKeyIds,
-          onSelectionChange: handleSelectionChange,
-          eventCountByKey: eventCountByKey,
-          onViewHistory: onViewHistory,
-          onHideKey: key => handleHideKeys([key]),
-          onToggleKey: handleToggleKey,
-          onDeleteKey: handleDeleteKey,
-          editBlockedFor: editBlockedFor,
-          pinnedKeys: pinnedKeys,
-          onTogglePin: onTogglePin,
-          onRowRef: handleRowRef,
-          onOpenKey: onOpenKey
-        }), lockedBannerNode]
-      }) : emptyStateNode, /*#__PURE__*/_jsx(Text, {
-        style: styles.techFooter,
-        children: "ASYNC STORAGE | MMKV | SECURE STORAGE BACKENDS"
-      }), upgradeModalNode]
-    })]
-  });
-}
-const styles = StyleSheet.create({
-  /** Measures the space the columns actually get; `flex: 1` so it fills the
-   * parent exactly as the bare ScrollView it wraps used to. */
-  root: {
-    flex: 1,
-    minHeight: 0
-  },
-  /**
-   * No background of its own: the tree editor paints an opaque screen, while a
-   * scalar key shows only a modal and wants the list visible behind its scrim.
-   */
-  editorOverlay: {
-    ...absoluteFill,
-    zIndex: 10
-  },
-  scrollContainer: {
-    flex: 1,
-    // Transparent so JsModal's ToolBackground shows through (the modal paints opaque base beneath it).
-    backgroundColor: "transparent"
-  },
-  container: {
-    padding: 12,
-    // Generous so a key card expanded at the bottom of the list can scroll
-    // its full detail block above the modal edge.
-    paddingBottom: 120
-  },
-  backgroundGrid: {
-    ...absoluteFill,
-    opacity: 0.006,
-    backgroundColor: gameUIColors.info
-  },
-  techFooter: {
-    fontSize: 8,
-    color: night.color.textTertiary,
-    fontFamily: monoFont,
-    textAlign: "center",
-    marginTop: 20,
-    letterSpacing: 1,
-    opacity: 0.5
-  },
-  // Keys section
-  keysSection: {
-    marginTop: 8,
-    backgroundColor: night.color.bg,
-    borderRadius: 12,
-    padding: 12,
-    borderWidth: 1,
-    borderColor: night.color.border
-  },
-  sectionHeader: {
-    flexDirection: "row",
-    justifyContent: "space-between",
-    alignItems: "center",
-    marginBottom: 10,
-    paddingBottom: 6,
-    borderBottomWidth: 1,
-    borderBottomColor: night.color.separator
-  },
-  sectionHeaderLeft: {
-    flexDirection: "row",
-    alignItems: "center",
-    gap: 8
-  },
-  sectionTitle: {
-    fontSize: 12,
-    fontWeight: "600",
-    color: night.color.textSecondary,
-    letterSpacing: 0.4,
-    textTransform: "uppercase"
-  },
-  countBadge: {
-    backgroundColor: night.color.surfaceElevated,
-    paddingHorizontal: 8,
-    paddingVertical: 3,
-    borderRadius: 6,
-    borderWidth: 1,
-    borderColor: night.color.border
-  },
-  countText: {
-    fontSize: 11,
-    fontWeight: "600",
-    color: night.color.text,
-    fontFamily: monoFont
-  },
-  // Empty state
-  emptyState: {
-    alignItems: "center",
-    justifyContent: "center",
-    paddingVertical: 48
-  },
-  emptyTitle: {
-    fontSize: 16,
-    fontWeight: "600",
-    color: night.color.text,
-    marginTop: 12,
-    marginBottom: 8
-  },
-  emptySubtitle: {
-    fontSize: 13,
-    color: night.color.textSecondary,
-    textAlign: "center"
-  },
-  // Empty MMKV state
-  emptyMMKVState: {
-    backgroundColor: night.color.surface,
-    borderRadius: 12,
-    padding: 20,
-    borderWidth: 1,
-    borderColor: night.color.border,
-    marginTop: 8,
-    alignItems: "center"
-  },
-  emptyMMKVTitle: {
-    fontSize: 14,
-    fontWeight: "600",
-    color: night.color.text,
-    marginBottom: 6
-  },
-  emptyMMKVSubtitle: {
-    fontSize: 12,
-    color: night.color.textSecondary,
-    textAlign: "center",
-    marginBottom: 12
-  },
-  emptyMMKVCode: {
-    fontSize: 10,
-    fontFamily: monoFont,
-    color: night.color.accent,
-    backgroundColor: night.color.bg,
-    padding: 12,
-    borderRadius: 8,
-    borderWidth: 1,
-    borderColor: night.color.border,
-    alignSelf: "stretch"
-  },
-  // Instance Navbar styles
-  instanceNavbar: {
-    marginTop: 12,
-    marginBottom: 8,
-    backgroundColor: night.color.surface,
-    borderRadius: 10,
-    borderWidth: 1,
-    borderColor: night.color.border,
-    padding: 10,
-    shadowColor: '#000',
-    shadowOpacity: 0.08,
-    shadowRadius: 6,
-    shadowOffset: {
-      width: 0,
-      height: 2
-    }
-  },
-  instanceNavbarHeader: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'space-between',
-    marginBottom: 8,
-    paddingLeft: 2
-  },
-  instanceNavbarLabel: {
-    fontSize: 9,
-    fontWeight: '700',
-    color: night.color.textTertiary,
-    textTransform: "uppercase",
-    letterSpacing: 1
-  },
-  instanceNavbarScroll: {
-    gap: 8,
-    paddingRight: 8
-  },
-  instanceNavbarButton: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    gap: 6,
-    paddingHorizontal: 12,
-    paddingVertical: 8,
-    backgroundColor: night.color.surfaceElevated,
-    borderRadius: 8,
-    borderWidth: 1,
-    borderColor: night.color.border,
-    minWidth: 90
-  },
-  instanceNavbarButtonActive: {
-    borderWidth: 1.5,
-    shadowColor: '#000',
-    shadowOpacity: 0.1,
-    shadowRadius: 4,
-    shadowOffset: {
-      width: 0,
-      height: 1
-    }
-  },
-  instanceNavbarButtonText: {
-    fontSize: 11,
-    fontWeight: '600',
-    color: night.color.textSecondary,
-    fontFamily: monoFont,
-    flex: 1
-  },
-  instanceNavbarButtonTextActive: {
-    fontWeight: '700',
-    color: night.color.text
-  },
-  instanceNavbarBadge: {
-    backgroundColor: night.color.bg,
-    paddingHorizontal: 6,
-    paddingVertical: 2,
-    borderRadius: 6,
-    minWidth: 24,
-    alignItems: 'center'
-  },
-  instanceNavbarBadgeText: {
-    fontSize: 10,
-    fontWeight: '700',
-    color: night.color.textSecondary,
-    fontFamily: monoFont
-  },
-  clearSearchButton: {
-    marginTop: 16,
-    paddingHorizontal: 16,
-    paddingVertical: 8,
-    backgroundColor: night.color.surfaceElevated,
-    borderRadius: 6,
-    borderWidth: 1,
-    borderColor: night.color.border
-  },
-  clearSearchText: {
-    fontSize: 13,
-    color: night.color.text,
-    fontWeight: "500"
-  },
-  // Free tier limit banner
-  limitBanner: {
-    backgroundColor: night.color.surface,
-    borderRadius: 10,
-    borderWidth: 1,
-    borderColor: night.color.accentBorderStrong,
-    padding: 12,
-    marginTop: 12
-  },
-  limitBannerContent: {
-    flexDirection: "row",
-    alignItems: "center",
-    justifyContent: "space-between",
-    marginBottom: 4
-  },
-  limitBannerLeft: {
-    flexDirection: "row",
-    alignItems: "center",
-    gap: 8
-  },
-  limitBannerText: {
-    color: night.color.text,
-    fontSize: 13,
-    fontWeight: "600"
-  },
-  limitBannerSubtext: {
-    color: night.color.textTertiary,
-    fontSize: 11
-  }
-});
+const storage = createMMKV();
+registerMMKVInstance('mmkv.default', storage);`})]}),C==="mmkv"&&y.length>0&&d(f,{style:n.instanceNavbar,children:[d(f,{style:n.instanceNavbarHeader,children:[a(m,{style:n.instanceNavbarLabel,children:"INSTANCES"}),y.length>Ce&&a(ze,{style:{transform:[{scale:.85}]}})]}),d(Re,{horizontal:true,showsHorizontalScrollIndicator:false,contentContainerStyle:n.instanceNavbarScroll,children:[(M||y.length===1)&&d(ae,{onPress:()=>Te(null),testID:"buoy-storage-instance-all",accessibilityRole:"button",accessibilityLabel:`All ${wt.mmkv} instances`,style:[n.instanceNavbarButton,g===null&&n.instanceNavbarButtonActive],children:[a(Fe,{size:12,color:g===null?s.color.text:s.color.textSecondary}),a(m,{style:[n.instanceNavbarButtonText,g===null&&n.instanceNavbarButtonTextActive],children:"All"}),a(f,{style:n.instanceNavbarBadge,children:a(m,{style:n.instanceNavbarBadgeText,children:y.reduce((e,t)=>e+t.keyCount,0)})})]}),y.map((e,t)=>{const r=t>=Ce;return d(ae,{testID:`buoy-storage-instance-${e.id}`,accessibilityRole:"button",accessibilityLabel:`MMKV instance ${e.id}`,onPress:()=>{if(r){q(true)}else{Te(e.id)}},style:[n.instanceNavbarButton,e.id===g&&n.instanceNavbarButtonActive,{borderColor:r?s.color.border:L(e.id)+"40",backgroundColor:e.id===g?L(e.id)+"20":s.color.surfaceElevated,opacity:r?.5:1}],children:[a(Fe,{size:12,color:e.id===g?L(e.id):s.color.textSecondary}),a(m,{style:[n.instanceNavbarButtonText,e.id===g&&{color:L(e.id),fontWeight:"700"}],children:e.id}),a(f,{style:[n.instanceNavbarBadge,e.id===g&&{backgroundColor:L(e.id)+"30"}],children:a(m,{style:[n.instanceNavbarBadgeText,e.id===g&&{color:L(e.id)}],children:e.keyCount})})]},e.id)})]})]})]});const bt=a(Ft,{copyValue:ut,mmkvInstances:y.map(e=>({id:e.id,instance:e.instance})),activeStorageType:C,onClearComplete:k,isSelectMode:te,onToggleSelectMode:at,selectedCount:U.size});const Ct=te?a(Wt,{selectedKeys:yt,mmkvInstances:y.map(e=>({id:e.id,instance:e.instance})),onDeleteComplete:ct,onHideKeys:ne,onSelectAll:mt,onClearSelection:ft,totalVisibleKeys:B.length}):null;const vt=gt?d(ae,{style:n.limitBanner,onPress:()=>q(true),activeOpacity:.8,testID:"buoy-storage-locked-banner",accessibilityRole:"button",children:[d(f,{style:n.limitBannerContent,children:[d(f,{style:n.limitBannerLeft,children:[a(Mt,{size:16,color:s.color.accent}),a(m,{style:n.limitBannerText,children:w?`${Y} matching ${Y===1?"key":"keys"} in locked storage`:`${Y} keys locked`})]}),a(ze,{})]}),a(m,{style:n.limitBannerSubtext,children:w?"Upgrade to Pro to search your full storage":"Upgrade to Pro to unlock full storage access"})]}):null;const Tt=(()=>{const e=c.some(r=>!p(r.key));let t;if(w||!e){t=Bt({subject:"keys",verb:"registered",search:w,total:e?1:0,waiting:{otto:"empty",title:"No storage keys",message:"Nothing is registered for this tool to read."}});if(w&&e){t={...t,message:"No keys match. Clear the search to see them."}}}else if(T==="missing"){t={otto:"thumbsup",title:"No missing keys",message:"All required keys are present"}}else if(T==="issues"){t={otto:"cool",title:"No issues found",message:"All storage keys are correctly configured"}}else{t={otto:"broken",title:"No valid keys found",message:"All keys have issues or are missing"}}return a(xt,{...t,testID:"buoy-storage-keys-empty"})})();const kt=a(Kt,{visible:Q,onClose:()=>q(false),featureName:"Storage Keys"});return d(f,{style:n.root,children:[we>0?a(Dt,{onDone:()=>Ie(0)},we):null,d(Re,{testID:"buoy-storage-scroll",ref:Je,onScroll:e=>{Xe.current=e.nativeEvent.contentOffset.y},scrollEventThrottle:32,style:n.scrollContainer,contentContainerStyle:n.container,showsVerticalScrollIndicator:false,children:[a(f,{style:n.backgroundGrid}),a(Vt,{stats:D,tabStats:x,healthPercentage:F,healthStatus:ht,healthColor:pt,activeFilter:T,onFilterChange:Ue,activeStorageType:C,onStorageTypeChange:Ye,showStatus:!ee}),St,v.length>0?d(f,{style:n.keysSection,children:[d(f,{style:n.sectionHeader,children:[d(f,{style:n.sectionHeaderLeft,children:[d(m,{style:n.sectionTitle,children:[T==="all"?"KEYS":T==="missing"?"MISSING KEYS":"ISSUES TO FIX",C!=="all"&&` (${C.toUpperCase()})`]}),a(f,{style:n.countBadge,children:a(m,{style:n.countText,children:B.length})})]}),bt]}),Ct,a(Nt,{title:"",count:-1,keys:B,emptyMessage:"",isSelectMode:te,selectedKeys:U,onSelectionChange:lt,eventCountByKey:ge,onViewHistory:Z,onHideKey:e=>ne([e]),onToggleKey:dt,onDeleteKey:Ne,editBlockedFor:qe,pinnedKeys:_,onTogglePin:he,onRowRef:Ze,onOpenKey:He}),vt]}):Tt,a(m,{style:n.techFooter,children:"ASYNC STORAGE | MMKV | SECURE STORAGE BACKENDS"}),kt]})]})}const n=It.create({root:{flex:1,minHeight:0},editorOverlay:{...Ae,zIndex:10},scrollContainer:{flex:1,backgroundColor:"transparent"},container:{padding:12,paddingBottom:120},backgroundGrid:{...Ae,opacity:.006,backgroundColor:E.info},techFooter:{fontSize:8,color:s.color.textTertiary,fontFamily:W,textAlign:"center",marginTop:20,letterSpacing:1,opacity:.5},keysSection:{marginTop:8,backgroundColor:s.color.bg,borderRadius:12,padding:12,borderWidth:1,borderColor:s.color.border},sectionHeader:{flexDirection:"row",justifyContent:"space-between",alignItems:"center",marginBottom:10,paddingBottom:6,borderBottomWidth:1,borderBottomColor:s.color.separator},sectionHeaderLeft:{flexDirection:"row",alignItems:"center",gap:8},sectionTitle:{fontSize:12,fontWeight:"600",color:s.color.textSecondary,letterSpacing:.4,textTransform:"uppercase"},countBadge:{backgroundColor:s.color.surfaceElevated,paddingHorizontal:8,paddingVertical:3,borderRadius:6,borderWidth:1,borderColor:s.color.border},countText:{fontSize:11,fontWeight:"600",color:s.color.text,fontFamily:W},emptyState:{alignItems:"center",justifyContent:"center",paddingVertical:48},emptyTitle:{fontSize:16,fontWeight:"600",color:s.color.text,marginTop:12,marginBottom:8},emptySubtitle:{fontSize:13,color:s.color.textSecondary,textAlign:"center"},emptyMMKVState:{backgroundColor:s.color.surface,borderRadius:12,padding:20,borderWidth:1,borderColor:s.color.border,marginTop:8,alignItems:"center"},emptyMMKVTitle:{fontSize:14,fontWeight:"600",color:s.color.text,marginBottom:6},emptyMMKVSubtitle:{fontSize:12,color:s.color.textSecondary,textAlign:"center",marginBottom:12},emptyMMKVCode:{fontSize:10,fontFamily:W,color:s.color.accent,backgroundColor:s.color.bg,padding:12,borderRadius:8,borderWidth:1,borderColor:s.color.border,alignSelf:"stretch"},instanceNavbar:{marginTop:12,marginBottom:8,backgroundColor:s.color.surface,borderRadius:10,borderWidth:1,borderColor:s.color.border,padding:10,shadowColor:"#000",shadowOpacity:.08,shadowRadius:6,shadowOffset:{width:0,height:2}},instanceNavbarHeader:{flexDirection:"row",alignItems:"center",justifyContent:"space-between",marginBottom:8,paddingLeft:2},instanceNavbarLabel:{fontSize:9,fontWeight:"700",color:s.color.textTertiary,textTransform:"uppercase",letterSpacing:1},instanceNavbarScroll:{gap:8,paddingRight:8},instanceNavbarButton:{flexDirection:"row",alignItems:"center",gap:6,paddingHorizontal:12,paddingVertical:8,backgroundColor:s.color.surfaceElevated,borderRadius:8,borderWidth:1,borderColor:s.color.border,minWidth:90},instanceNavbarButtonActive:{borderWidth:1.5,shadowColor:"#000",shadowOpacity:.1,shadowRadius:4,shadowOffset:{width:0,height:1}},instanceNavbarButtonText:{fontSize:11,fontWeight:"600",color:s.color.textSecondary,fontFamily:W,flex:1},instanceNavbarButtonTextActive:{fontWeight:"700",color:s.color.text},instanceNavbarBadge:{backgroundColor:s.color.bg,paddingHorizontal:6,paddingVertical:2,borderRadius:6,minWidth:24,alignItems:"center"},instanceNavbarBadgeText:{fontSize:10,fontWeight:"700",color:s.color.textSecondary,fontFamily:W},clearSearchButton:{marginTop:16,paddingHorizontal:16,paddingVertical:8,backgroundColor:s.color.surfaceElevated,borderRadius:6,borderWidth:1,borderColor:s.color.border},clearSearchText:{fontSize:13,color:s.color.text,fontWeight:"500"},limitBanner:{backgroundColor:s.color.surface,borderRadius:10,borderWidth:1,borderColor:s.color.accentBorderStrong,padding:12,marginTop:12},limitBannerContent:{flexDirection:"row",alignItems:"center",justifyContent:"space-between",marginBottom:4},limitBannerLeft:{flexDirection:"row",alignItems:"center",gap:8},limitBannerText:{color:s.color.text,fontSize:13,fontWeight:"600"},limitBannerSubtext:{color:s.color.textTertiary,fontSize:11}});