@buoy-gg/storage 7.0.26 → 7.0.27

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

@@ -22,7 +22,7 @@ import { onStorageBrowserRefresh } from "../utils/storageBrowserRefresh";
 import { setStorageValue, storageEditBlockedReason } from "../utils/setStorageValue";
 
 // Import shared Game UI components
-import { gameUIColors, macOSColors, buoyColors, HardDrive } from "@buoy-gg/shared-ui";
+import { gameUIColors, macOSColors, night, HardDrive } from "@buoy-gg/shared-ui";
 import { useIsPro } from "@buoy-gg/license";
 
 // MMKV Instance color palette - consistent colors per instance
@@ -576,7 +576,7 @@ export function GameUIStorageBrowser({
       style: styles.emptyState,
       children: [/*#__PURE__*/_jsx(Database, {
         size: 48,
-        color: macOSColors.text.muted
+        color: night.color.textTertiary
       }), /*#__PURE__*/_jsx(Text, {
         style: styles.emptyTitle,
         children: "Loading storage keys..."
@@ -645,7 +645,7 @@ export function GameUIStorageBrowser({
           style: [styles.instanceNavbarButton, selectedMMKVInstance === null && styles.instanceNavbarButtonActive],
           children: [/*#__PURE__*/_jsx(HardDrive, {
             size: 12,
-            color: selectedMMKVInstance === null ? macOSColors.text.primary : macOSColors.text.secondary
+            color: selectedMMKVInstance === null ? night.color.text : night.color.textSecondary
           }), /*#__PURE__*/_jsx(Text, {
             style: [styles.instanceNavbarButtonText, selectedMMKVInstance === null && styles.instanceNavbarButtonTextActive],
             children: "All"
@@ -667,13 +667,13 @@ export function GameUIStorageBrowser({
               }
             },
             style: [styles.instanceNavbarButton, inst.id === selectedMMKVInstance && styles.instanceNavbarButtonActive, {
-              borderColor: isLocked ? macOSColors.border.default : getInstanceColor(inst.id) + '40',
-              backgroundColor: inst.id === selectedMMKVInstance ? getInstanceColor(inst.id) + '20' : macOSColors.background.card,
+              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) : macOSColors.text.secondary
+              color: inst.id === selectedMMKVInstance ? getInstanceColor(inst.id) : night.color.textSecondary
             }), /*#__PURE__*/_jsx(Text, {
               style: [styles.instanceNavbarButtonText, inst.id === selectedMMKVInstance && {
                 color: getInstanceColor(inst.id),
@@ -732,7 +732,7 @@ export function GameUIStorageBrowser({
         style: styles.limitBannerLeft,
         children: [/*#__PURE__*/_jsx(Zap, {
           size: 16,
-          color: buoyColors.primary
+          color: night.color.accent
         }), /*#__PURE__*/_jsx(Text, {
           style: styles.limitBannerText,
           children: searchQuery ? `${lockedKeyCount} matching ${lockedKeyCount === 1 ? 'key' : 'keys'} in locked storage` : `${lockedKeyCount} keys locked`
@@ -747,7 +747,7 @@ export function GameUIStorageBrowser({
     style: styles.emptyState,
     children: [/*#__PURE__*/_jsx(Database, {
       size: 32,
-      color: macOSColors.text.muted
+      color: night.color.textTertiary
     }), /*#__PURE__*/_jsx(Text, {
       style: styles.emptyTitle,
       children: searchQuery ? "No results found" : activeFilter === "all" ? "No valid keys found" : activeFilter === "missing" ? "No missing keys" : "No issues found"
@@ -849,11 +849,14 @@ const styles = StyleSheet.create({
   },
   scrollContainer: {
     flex: 1,
-    backgroundColor: gameUIColors.background
+    // Transparent so JsModal's ToolBackground shows through (the modal paints opaque base beneath it).
+    backgroundColor: "transparent"
   },
   container: {
     padding: 12,
-    paddingBottom: 32
+    // 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,
@@ -862,7 +865,7 @@ const styles = StyleSheet.create({
   },
   techFooter: {
     fontSize: 8,
-    color: gameUIColors.muted,
+    color: night.color.textTertiary,
     fontFamily: "monospace",
     textAlign: "center",
     marginTop: 20,
@@ -872,11 +875,11 @@ const styles = StyleSheet.create({
   // Keys section
   keysSection: {
     marginTop: 8,
-    backgroundColor: macOSColors.background.base,
+    backgroundColor: night.color.bg,
     borderRadius: 12,
     padding: 12,
     borderWidth: 1,
-    borderColor: macOSColors.border.default
+    borderColor: night.color.border
   },
   sectionHeader: {
     flexDirection: "row",
@@ -885,7 +888,7 @@ const styles = StyleSheet.create({
     marginBottom: 10,
     paddingBottom: 6,
     borderBottomWidth: 1,
-    borderBottomColor: macOSColors.border.default
+    borderBottomColor: night.color.separator
   },
   sectionHeaderLeft: {
     flexDirection: "row",
@@ -895,22 +898,22 @@ const styles = StyleSheet.create({
   sectionTitle: {
     fontSize: 12,
     fontWeight: "600",
-    color: macOSColors.text.secondary,
+    color: night.color.textSecondary,
     letterSpacing: 0.4,
     textTransform: "uppercase"
   },
   countBadge: {
-    backgroundColor: macOSColors.background.card,
+    backgroundColor: night.color.surfaceElevated,
     paddingHorizontal: 8,
     paddingVertical: 3,
     borderRadius: 6,
     borderWidth: 1,
-    borderColor: macOSColors.border.default
+    borderColor: night.color.border
   },
   countText: {
     fontSize: 11,
     fontWeight: "600",
-    color: macOSColors.text.primary,
+    color: night.color.text,
     fontFamily: "monospace"
   },
   // Empty state
@@ -922,56 +925,56 @@ const styles = StyleSheet.create({
   emptyTitle: {
     fontSize: 16,
     fontWeight: "600",
-    color: macOSColors.text.primary,
+    color: night.color.text,
     marginTop: 12,
     marginBottom: 8
   },
   emptySubtitle: {
     fontSize: 13,
-    color: macOSColors.text.secondary,
+    color: night.color.textSecondary,
     textAlign: "center"
   },
   // Empty MMKV state
   emptyMMKVState: {
-    backgroundColor: macOSColors.background.card,
+    backgroundColor: night.color.surface,
     borderRadius: 12,
     padding: 20,
     borderWidth: 1,
-    borderColor: macOSColors.border.default,
+    borderColor: night.color.border,
     marginTop: 8,
     alignItems: "center"
   },
   emptyMMKVTitle: {
     fontSize: 14,
     fontWeight: "600",
-    color: macOSColors.text.primary,
+    color: night.color.text,
     marginBottom: 6
   },
   emptyMMKVSubtitle: {
     fontSize: 12,
-    color: macOSColors.text.secondary,
+    color: night.color.textSecondary,
     textAlign: "center",
     marginBottom: 12
   },
   emptyMMKVCode: {
     fontSize: 10,
     fontFamily: "monospace",
-    color: macOSColors.semantic.info,
-    backgroundColor: macOSColors.background.input,
+    color: night.color.accent,
+    backgroundColor: night.color.bg,
     padding: 12,
     borderRadius: 8,
     borderWidth: 1,
-    borderColor: macOSColors.border.default,
+    borderColor: night.color.border,
     alignSelf: "stretch"
   },
   // Instance Navbar styles
   instanceNavbar: {
     marginTop: 12,
     marginBottom: 8,
-    backgroundColor: macOSColors.background.card,
+    backgroundColor: night.color.surface,
     borderRadius: 10,
     borderWidth: 1,
-    borderColor: macOSColors.border.default,
+    borderColor: night.color.border,
     padding: 10,
     shadowColor: '#000',
     shadowOpacity: 0.08,
@@ -991,7 +994,7 @@ const styles = StyleSheet.create({
   instanceNavbarLabel: {
     fontSize: 9,
     fontWeight: '700',
-    color: macOSColors.text.muted,
+    color: night.color.textTertiary,
     textTransform: "uppercase",
     letterSpacing: 1
   },
@@ -1005,10 +1008,10 @@ const styles = StyleSheet.create({
     gap: 6,
     paddingHorizontal: 12,
     paddingVertical: 8,
-    backgroundColor: macOSColors.background.card,
+    backgroundColor: night.color.surfaceElevated,
     borderRadius: 8,
     borderWidth: 1,
-    borderColor: macOSColors.border.default,
+    borderColor: night.color.border,
     minWidth: 90
   },
   instanceNavbarButtonActive: {
@@ -1024,16 +1027,16 @@ const styles = StyleSheet.create({
   instanceNavbarButtonText: {
     fontSize: 11,
     fontWeight: '600',
-    color: macOSColors.text.secondary,
+    color: night.color.textSecondary,
     fontFamily: 'monospace',
     flex: 1
   },
   instanceNavbarButtonTextActive: {
     fontWeight: '700',
-    color: macOSColors.text.primary
+    color: night.color.text
   },
   instanceNavbarBadge: {
-    backgroundColor: macOSColors.background.input,
+    backgroundColor: night.color.bg,
     paddingHorizontal: 6,
     paddingVertical: 2,
     borderRadius: 6,
@@ -1043,29 +1046,29 @@ const styles = StyleSheet.create({
   instanceNavbarBadgeText: {
     fontSize: 10,
     fontWeight: '700',
-    color: macOSColors.text.secondary,
+    color: night.color.textSecondary,
     fontFamily: 'monospace'
   },
   clearSearchButton: {
     marginTop: 16,
     paddingHorizontal: 16,
     paddingVertical: 8,
-    backgroundColor: macOSColors.background.hover,
+    backgroundColor: night.color.surfaceElevated,
     borderRadius: 6,
     borderWidth: 1,
-    borderColor: macOSColors.border.default
+    borderColor: night.color.border
   },
   clearSearchText: {
     fontSize: 13,
-    color: macOSColors.text.primary,
+    color: night.color.text,
     fontWeight: "500"
   },
   // Free tier limit banner
   limitBanner: {
-    backgroundColor: buoyColors.card,
+    backgroundColor: night.color.surface,
     borderRadius: 10,
     borderWidth: 1,
-    borderColor: buoyColors.primary + "40",
+    borderColor: night.color.accentBorderStrong,
     padding: 12,
     marginTop: 12
   },
@@ -1081,12 +1084,12 @@ const styles = StyleSheet.create({
     gap: 8
   },
   limitBannerText: {
-    color: buoyColors.text,
+    color: night.color.text,
     fontSize: 13,
     fontWeight: "600"
   },
   limitBannerSubtext: {
-    color: buoyColors.textMuted,
+    color: night.color.textTertiary,
     fontSize: 11
   }
 });

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

@@ -14,7 +14,7 @@
  */
 
 import { View, Text, StyleSheet } from 'react-native';
-import { macOSColors } from '@buoy-gg/shared-ui';
+import { macOSColors, night } from '@buoy-gg/shared-ui';
 import { useMMKVInstance } from '../hooks/useMMKVInstances';
 import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
 /**
@@ -80,11 +80,11 @@ export function MMKVInstanceInfoPanel({
         }), /*#__PURE__*/_jsx(InfoItem, {
           label: "Encryption",
           value: instance.encrypted ? '🔒 Encrypted' : '🔓 Not encrypted',
-          valueColor: instance.encrypted ? macOSColors.semantic.success : macOSColors.text.muted
+          valueColor: instance.encrypted ? macOSColors.semantic.success : night.color.textTertiary
         }), /*#__PURE__*/_jsx(InfoItem, {
           label: "Access",
           value: instance.readOnly ? '👁️ Read-only' : '✏️ Read-write',
-          valueColor: instance.readOnly ? macOSColors.semantic.warning : macOSColors.text.muted
+          valueColor: instance.readOnly ? macOSColors.semantic.warning : night.color.textTertiary
         }), instance.size !== undefined && /*#__PURE__*/_jsx(InfoItem, {
           label: "Size",
           value: formatBytes(instance.size),
@@ -166,10 +166,10 @@ const styles = StyleSheet.create({
   },
   // Panel
   panel: {
-    backgroundColor: macOSColors.background.card,
+    backgroundColor: night.color.surface,
     borderRadius: 12,
     borderWidth: 1,
-    borderColor: macOSColors.border.default + '50',
+    borderColor: night.color.border,
     overflow: 'hidden',
     shadowColor: '#000000',
     shadowOpacity: 0.03,
@@ -183,12 +183,12 @@ const styles = StyleSheet.create({
   header: {
     padding: 12,
     borderBottomWidth: 1,
-    borderBottomColor: macOSColors.border.default + '30'
+    borderBottomColor: night.color.separator
   },
   headerTitle: {
     fontSize: 11,
     fontWeight: '600',
-    color: macOSColors.text.primary,
+    color: night.color.text,
     textTransform: "uppercase",
     letterSpacing: 0.5
   },
@@ -205,18 +205,18 @@ const styles = StyleSheet.create({
   },
   infoLabel: {
     fontSize: 12,
-    color: macOSColors.text.muted,
+    color: night.color.textTertiary,
     fontWeight: '500'
   },
   infoValue: {
     fontSize: 12,
-    color: macOSColors.text.primary,
+    color: night.color.text,
     fontWeight: '500'
   },
   infoValueHighlight: {
     fontSize: 14,
     fontWeight: '600',
-    color: macOSColors.semantic.info
+    color: night.color.accent
   },
   monoValue: {
     fontFamily: 'monospace'

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

@@ -11,7 +11,7 @@
 
 import { useState } from 'react';
 import { View, Text, StyleSheet, TouchableOpacity, ScrollView, Modal } from 'react-native';
-import { macOSColors } from '@buoy-gg/shared-ui';
+import { macOSColors, night } from '@buoy-gg/shared-ui';
 import { useMMKVInstances } from '../hooks/useMMKVInstances';
 import { isMMKVAvailable, getMMKVUnavailableMessage } from '../utils/mmkvAvailability';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
@@ -224,28 +224,28 @@ const styles = StyleSheet.create({
   },
   unavailableDescription: {
     fontSize: 12,
-    color: macOSColors.text.secondary,
+    color: night.color.textSecondary,
     textAlign: 'center',
     lineHeight: 18
   },
   // Empty state
   emptyState: {
-    backgroundColor: macOSColors.background.card,
+    backgroundColor: night.color.surface,
     borderRadius: 12,
     padding: 20,
     borderWidth: 1,
-    borderColor: macOSColors.border.default + '50',
+    borderColor: night.color.border,
     alignItems: 'center',
     gap: 12
   },
   emptyStateTitle: {
     fontSize: 14,
     fontWeight: '600',
-    color: macOSColors.text.primary
+    color: night.color.text
   },
   emptyStateDescription: {
     fontSize: 12,
-    color: macOSColors.text.muted,
+    color: night.color.textTertiary,
     textAlign: 'center',
     lineHeight: 18
   },
@@ -253,22 +253,22 @@ const styles = StyleSheet.create({
     marginTop: 8,
     paddingHorizontal: 16,
     paddingVertical: 8,
-    backgroundColor: macOSColors.semantic.info + '20',
+    backgroundColor: night.color.accentSoft,
     borderRadius: 8,
     borderWidth: 1,
-    borderColor: macOSColors.semantic.info + '40'
+    borderColor: night.color.accentBorderStrong
   },
   refreshButtonText: {
     fontSize: 12,
     fontWeight: '600',
-    color: macOSColors.semantic.info
+    color: night.color.accent
   },
   // Selector button
   selectorButton: {
-    backgroundColor: macOSColors.background.card,
+    backgroundColor: night.color.surface,
     borderRadius: 12,
     borderWidth: 1,
-    borderColor: macOSColors.border.default + '50',
+    borderColor: night.color.border,
     padding: 12,
     flexDirection: 'row',
     alignItems: 'center',
@@ -286,12 +286,12 @@ const styles = StyleSheet.create({
   },
   placeholderText: {
     fontSize: 13,
-    color: macOSColors.text.muted,
+    color: night.color.placeholder,
     fontStyle: 'italic'
   },
   dropdownArrow: {
     fontSize: 10,
-    color: macOSColors.text.muted,
+    color: night.color.textTertiary,
     marginLeft: 8
   },
   // Modal overlay
@@ -304,10 +304,10 @@ const styles = StyleSheet.create({
   },
   // Dropdown container
   dropdownContainer: {
-    backgroundColor: macOSColors.background.card,
+    backgroundColor: night.color.surface,
     borderRadius: 16,
     borderWidth: 1,
-    borderColor: macOSColors.border.default,
+    borderColor: night.color.border,
     width: '100%',
     maxWidth: 500,
     maxHeight: '70%',
@@ -326,19 +326,19 @@ const styles = StyleSheet.create({
     justifyContent: 'space-between',
     padding: 16,
     borderBottomWidth: 1,
-    borderBottomColor: macOSColors.border.default + '50'
+    borderBottomColor: night.color.separator
   },
   dropdownTitle: {
     fontSize: 14,
     fontWeight: '600',
-    color: macOSColors.text.primary
+    color: night.color.text
   },
   headerRefreshButton: {
     padding: 4
   },
   headerRefreshText: {
     fontSize: 18,
-    color: macOSColors.semantic.info
+    color: night.color.accent
   },
   dropdownList: {
     maxHeight: 400
@@ -346,10 +346,10 @@ const styles = StyleSheet.create({
   dropdownItem: {
     padding: 12,
     borderBottomWidth: 1,
-    borderBottomColor: macOSColors.border.default + '30'
+    borderBottomColor: night.color.separator
   },
   dropdownItemSelected: {
-    backgroundColor: macOSColors.semantic.info + '10'
+    backgroundColor: night.color.accentSoft
   },
   // Instance row
   instanceRow: {
@@ -365,12 +365,12 @@ const styles = StyleSheet.create({
   instanceId: {
     fontSize: 13,
     fontWeight: '500',
-    color: macOSColors.text.primary,
+    color: night.color.text,
     fontFamily: 'monospace'
   },
   instanceIdSelected: {
     fontWeight: '600',
-    color: macOSColors.semantic.info
+    color: night.color.accent
   },
   instanceBadges: {
     flexDirection: 'row',
@@ -394,7 +394,7 @@ const styles = StyleSheet.create({
   badgeText: {
     fontSize: 9,
     fontWeight: '500',
-    color: macOSColors.text.secondary
+    color: night.color.textSecondary
   },
   instanceRight: {
     alignItems: 'flex-end'
@@ -402,12 +402,12 @@ const styles = StyleSheet.create({
   keyCount: {
     fontSize: 16,
     fontWeight: '600',
-    color: macOSColors.text.primary,
+    color: night.color.text,
     fontFamily: 'monospace'
   },
   keyCountLabel: {
     fontSize: 9,
-    color: macOSColors.text.muted,
+    color: night.color.textTertiary,
     textTransform: "uppercase",
     letterSpacing: 0.5
   }

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

@@ -3,7 +3,7 @@
 import { useState, useEffect } from "react";
 import { View, Text, StyleSheet, TouchableOpacity, Alert } from "react-native";
 import { Trash2, CopyButton, CheckSquare, EyeOff, ProUpgradeModal } from "@buoy-gg/shared-ui";
-import { macOSColors } from "@buoy-gg/shared-ui";
+import { macOSColors, night } from "@buoy-gg/shared-ui";
 import { useIsPro } from "@buoy-gg/license";
 import { deleteStorageKeys } from "../utils/deleteStorageKeys";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
@@ -85,7 +85,7 @@ export function SelectionActionBar({
         onPress: allSelected ? onClearSelection : onSelectAll,
         children: [/*#__PURE__*/_jsx(CheckSquare, {
           size: 14,
-          color: allSelected ? macOSColors.semantic.info : macOSColors.text.secondary
+          color: allSelected ? night.color.accent : night.color.textSecondary
         }), /*#__PURE__*/_jsx(Text, {
           style: styles.selectAllText,
           children: allSelected ? "Deselect All" : "Select All"
@@ -104,7 +104,7 @@ export function SelectionActionBar({
         size: 14,
         buttonStyle: styles.actionButton,
         colors: {
-          idle: macOSColors.semantic.info,
+          idle: night.color.accent,
           success: macOSColors.semantic.success,
           error: macOSColors.semantic.error
         }
@@ -113,14 +113,14 @@ export function SelectionActionBar({
         onPress: handleHideSelected,
         children: /*#__PURE__*/_jsx(EyeOff, {
           size: 14,
-          color: macOSColors.semantic.warning
+          color: night.color.warning
         })
       }), /*#__PURE__*/_jsx(TouchableOpacity, {
         style: styles.actionButton,
         onPress: handleDeleteSelected,
         children: /*#__PURE__*/_jsx(Trash2, {
           size: 14,
-          color: macOSColors.semantic.error
+          color: night.color.danger
         })
       })]
     }), /*#__PURE__*/_jsx(ProUpgradeModal, {
@@ -135,10 +135,10 @@ const styles = StyleSheet.create({
     flexDirection: "row",
     alignItems: "center",
     justifyContent: "space-between",
-    backgroundColor: macOSColors.semantic.info + "15",
+    backgroundColor: night.color.accentSoft,
     borderRadius: 8,
     borderWidth: 1,
-    borderColor: macOSColors.semantic.info + "30",
+    borderColor: night.color.accentBorderStrong,
     paddingHorizontal: 12,
     paddingVertical: 8,
     marginBottom: 10
@@ -154,18 +154,18 @@ const styles = StyleSheet.create({
     gap: 6,
     paddingVertical: 4,
     paddingHorizontal: 8,
-    backgroundColor: macOSColors.background.card,
+    backgroundColor: night.color.surface,
     borderRadius: 6,
     borderWidth: 1,
-    borderColor: macOSColors.border.default
+    borderColor: night.color.border
   },
   selectAllText: {
     fontSize: 11,
     fontWeight: "600",
-    color: macOSColors.text.secondary
+    color: night.color.textSecondary
   },
   countBadge: {
-    backgroundColor: macOSColors.semantic.info + "20",
+    backgroundColor: night.color.accentFill,
     paddingHorizontal: 8,
     paddingVertical: 4,
     borderRadius: 6
@@ -173,7 +173,7 @@ const styles = StyleSheet.create({
   countText: {
     fontSize: 11,
     fontWeight: "700",
-    color: macOSColors.semantic.info,
+    color: night.color.accent,
     fontFamily: "monospace"
   },
   actionsSection: {
@@ -187,8 +187,8 @@ const styles = StyleSheet.create({
     alignItems: "center",
     justifyContent: "center",
     borderRadius: 6,
-    backgroundColor: macOSColors.background.card,
+    backgroundColor: night.color.surface,
     borderWidth: 1,
-    borderColor: macOSColors.border.default
+    borderColor: night.color.border
   }
 });