@buoy-gg/storage 7.0.26 → 7.0.27

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

@@ -3,7 +3,7 @@
 import { useState, useEffect } from "react";
 import { View, Text, StyleSheet, TouchableOpacity, Alert } from "react-native";
 import { Trash2, CopyButton, SquareDashed, X, 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 AsyncStorage from "@react-native-async-storage/async-storage";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
@@ -134,21 +134,21 @@ export function StorageActionButtons({
         style: styles.selectModeActiveContainer,
         children: [/*#__PURE__*/_jsx(X, {
           size: 14,
-          color: macOSColors.semantic.info
+          color: night.color.accent
         }), selectedCount > 0 && /*#__PURE__*/_jsx(Text, {
           style: styles.selectedCountText,
           children: selectedCount
         })]
       }) : /*#__PURE__*/_jsx(SquareDashed, {
         size: 16,
-        color: macOSColors.text.secondary
+        color: night.color.textSecondary
       })
     }), !isSelectMode && /*#__PURE__*/_jsx(CopyButton, {
       value: copyValue,
       size: 16,
       buttonStyle: styles.actionButton,
       colors: {
-        idle: macOSColors.text.secondary,
+        idle: night.color.textSecondary,
         success: macOSColors.semantic.success,
         error: macOSColors.semantic.error
       }
@@ -157,28 +157,28 @@ export function StorageActionButtons({
       style: styles.actionButton,
       children: /*#__PURE__*/_jsx(Trash2, {
         size: 16,
-        color: macOSColors.semantic.error
+        color: night.color.danger
       })
     }), !isSelectMode && showClearAsync && /*#__PURE__*/_jsx(TouchableOpacity, {
       onPress: handleClearAsyncStorage,
       style: styles.actionButton,
       children: /*#__PURE__*/_jsx(Trash2, {
         size: 16,
-        color: macOSColors.semantic.error
+        color: night.color.danger
       })
     }), !isSelectMode && showClearAllMMKV && /*#__PURE__*/_jsx(TouchableOpacity, {
       onPress: handleClearAllMMKV,
       style: styles.actionButton,
       children: /*#__PURE__*/_jsx(Trash2, {
         size: 16,
-        color: macOSColors.semantic.error
+        color: night.color.danger
       })
     }), !isSelectMode && showClearMMKVIndividual && mmkvInstances.length === 1 && /*#__PURE__*/_jsx(TouchableOpacity, {
       onPress: () => handleClearMMKV(mmkvInstances[0].id, mmkvInstances[0].id),
       style: styles.actionButton,
       children: /*#__PURE__*/_jsx(Trash2, {
         size: 16,
-        color: macOSColors.semantic.error
+        color: night.color.danger
       })
     }), /*#__PURE__*/_jsx(ProUpgradeModal, {
       visible: showUpgradeModal,
@@ -199,13 +199,13 @@ const styles = StyleSheet.create({
     alignItems: "center",
     justifyContent: "center",
     borderRadius: 6,
-    backgroundColor: macOSColors.background.input,
+    backgroundColor: night.color.buttonSurface,
     borderWidth: 1,
-    borderColor: macOSColors.border.default
+    borderColor: night.color.border
   },
   actionButtonActive: {
-    backgroundColor: macOSColors.semantic.info + "20",
-    borderColor: macOSColors.semantic.info + "40"
+    backgroundColor: night.color.accentSoft,
+    borderColor: night.color.accentBorderStrong
   },
   selectModeActiveContainer: {
     flexDirection: "row",
@@ -215,7 +215,7 @@ const styles = StyleSheet.create({
   selectedCountText: {
     fontSize: 10,
     fontWeight: "700",
-    color: macOSColors.semantic.info,
+    color: night.color.accent,
     fontFamily: "monospace"
   }
 });

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

@@ -8,28 +8,28 @@
  */
 
 import { TouchableOpacity, Text, View, StyleSheet } from "react-native";
-import { buoyColors, Lock } from "@buoy-gg/shared-ui";
+import { night, Lock } from "@buoy-gg/shared-ui";
 
 // Button color configurations matching Redux/React Query pattern
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const buttonConfigs = {
   copy: {
-    color: buoyColors.primary,
-    backgroundColor: buoyColors.primary + "15",
-    borderColor: buoyColors.primary + "40",
-    textColor: buoyColors.primary
+    color: night.color.accent,
+    backgroundColor: night.color.accentSoft,
+    borderColor: night.color.accentBorderStrong,
+    textColor: night.color.accent
   },
   jump: {
-    color: buoyColors.warning,
-    backgroundColor: buoyColors.warning + "15",
-    borderColor: buoyColors.warning + "40",
-    textColor: buoyColors.warning
+    color: night.color.warning,
+    backgroundColor: night.color.warningSoft,
+    borderColor: night.color.warning + "40",
+    textColor: night.color.warning
   },
   undo: {
-    color: buoyColors.info,
-    backgroundColor: buoyColors.info + "15",
-    borderColor: buoyColors.info + "40",
-    textColor: buoyColors.info
+    color: night.color.info,
+    backgroundColor: night.color.infoSoft,
+    borderColor: night.color.info + "40",
+    textColor: night.color.info
   }
 };
 export function StorageEventActionButton({
@@ -45,8 +45,8 @@ export function StorageEventActionButton({
     disabled: isDisabledOrLocked,
     onPress: onPress,
     style: [styles.button, {
-      backgroundColor: isDisabledOrLocked ? buoyColors.textMuted + "1A" : config.backgroundColor,
-      borderColor: isDisabledOrLocked ? buoyColors.textMuted + "33" : config.borderColor,
+      backgroundColor: isDisabledOrLocked ? night.color.fill : config.backgroundColor,
+      borderColor: isDisabledOrLocked ? night.color.fillTertiary : config.borderColor,
       opacity: disabled ? 0.5 : 1
     }],
     activeOpacity: 0.7,
@@ -57,15 +57,15 @@ export function StorageEventActionButton({
     },
     children: [locked ? /*#__PURE__*/_jsx(Lock, {
       size: 10,
-      color: buoyColors.textMuted,
+      color: night.color.textTertiary,
       style: styles.lockIcon
     }) : /*#__PURE__*/_jsx(View, {
       style: [styles.dot, {
-        backgroundColor: isDisabledOrLocked ? buoyColors.textMuted : config.color
+        backgroundColor: isDisabledOrLocked ? night.color.textTertiary : config.color
       }]
     }), /*#__PURE__*/_jsx(Text, {
       style: [styles.text, {
-        color: isDisabledOrLocked ? buoyColors.textMuted : config.textColor
+        color: isDisabledOrLocked ? night.color.textTertiary : config.textColor
       }],
       children: text
     })]
@@ -95,7 +95,7 @@ const styles = StyleSheet.create({
     height: 5,
     borderRadius: 3,
     marginRight: 6,
-    shadowColor: buoyColors.text,
+    shadowColor: night.color.text,
     shadowOffset: {
       width: 0,
       height: 0

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

@@ -9,7 +9,7 @@
 import { View, Text, StyleSheet } from "react-native";
 import { useState, useCallback, useMemo, useEffect, useRef } from "react";
 import AsyncStorage from "@react-native-async-storage/async-storage";
-import { formatRelativeTime, macOSColors, buoyColors, parseValue, devToolsStorageKeys, GitBranch, EventStepperFooter, EventHistoryViewer, copyToClipboard, ProUpgradeModal } from "@buoy-gg/shared-ui";
+import { formatRelativeTime, macOSColors, night, parseValue, devToolsStorageKeys, GitBranch, EventStepperFooter, EventHistoryViewer, copyToClipboard, ProUpgradeModal } from "@buoy-gg/shared-ui";
 import { useIsPro } from "@buoy-gg/license";
 import { ABSENT_VALUE } from "../utils/lineDiff";
 import { ThemedSplitView } from "./DiffViewer/modes/ThemedSplitView";
@@ -206,11 +206,11 @@ export function StorageEventDetailContent({
     relativeTime: ORIGIN_LABELS[originKind].relativeTime,
     badge: /*#__PURE__*/_jsx(View, {
       style: [styles.actionBadgeSmall, {
-        backgroundColor: `${macOSColors.text.muted}20`
+        backgroundColor: `${night.color.textTertiary}20`
       }],
       children: /*#__PURE__*/_jsx(Text, {
         style: [styles.actionTextSmall, {
-          color: macOSColors.text.muted
+          color: night.color.textTertiary
         }],
         children: ORIGIN_LABELS[originKind].badge
       })
@@ -458,21 +458,21 @@ const styles = StyleSheet.create({
     gap: 8,
     paddingHorizontal: 12,
     paddingVertical: 10,
-    backgroundColor: buoyColors.card,
+    backgroundColor: night.color.surface,
     borderBottomWidth: 1,
-    borderBottomColor: buoyColors.border
+    borderBottomColor: night.color.border
   },
   // Content Card
   valueBox: {
-    backgroundColor: macOSColors.background.base,
+    backgroundColor: night.color.bg,
     borderRadius: 6,
     borderWidth: 1,
-    borderColor: macOSColors.border.input,
+    borderColor: night.color.border,
     padding: 8
   },
   valueText: {
     fontSize: 12,
-    color: macOSColors.text.primary,
+    color: night.color.text,
     fontFamily: "monospace",
     lineHeight: 18
   },

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

@@ -1,7 +1,7 @@
 "use strict";
 
 import { View, Text, StyleSheet, TouchableOpacity } from "react-native";
-import { Filter, DynamicFilterView, Database, HardDrive, Shield, macOSColors } from "@buoy-gg/shared-ui";
+import { Filter, DynamicFilterView, Database, HardDrive, Shield, macOSColors, night } from "@buoy-gg/shared-ui";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export function StorageEventFilterView({
   ignoredPatterns,
@@ -51,7 +51,7 @@ export function StorageEventFilterView({
           onPress: () => onToggleStorageType('async'),
           children: [/*#__PURE__*/_jsx(Database, {
             size: 16,
-            color: enabledStorageTypes.has('async') ? macOSColors.semantic.warning : macOSColors.text.muted
+            color: enabledStorageTypes.has('async') ? macOSColors.semantic.warning : night.color.textTertiary
           }), /*#__PURE__*/_jsx(Text, {
             style: [styles.storageTypeButtonText, enabledStorageTypes.has('async') && {
               color: macOSColors.semantic.warning
@@ -65,7 +65,7 @@ export function StorageEventFilterView({
           onPress: () => onToggleStorageType('mmkv'),
           children: [/*#__PURE__*/_jsx(HardDrive, {
             size: 16,
-            color: enabledStorageTypes.has('mmkv') ? macOSColors.semantic.info : macOSColors.text.muted
+            color: enabledStorageTypes.has('mmkv') ? macOSColors.semantic.info : night.color.textTertiary
           }), /*#__PURE__*/_jsx(Text, {
             style: [styles.storageTypeButtonText, enabledStorageTypes.has('mmkv') && {
               color: macOSColors.semantic.info
@@ -79,7 +79,7 @@ export function StorageEventFilterView({
           onPress: () => onToggleStorageType('secure'),
           children: [/*#__PURE__*/_jsx(Shield, {
             size: 16,
-            color: enabledStorageTypes.has('secure') ? macOSColors.semantic.success : macOSColors.text.muted
+            color: enabledStorageTypes.has('secure') ? macOSColors.semantic.success : night.color.textTertiary
           }), /*#__PURE__*/_jsx(Text, {
             style: [styles.storageTypeButtonText, enabledStorageTypes.has('secure') && {
               color: macOSColors.semantic.success
@@ -100,12 +100,12 @@ const styles = StyleSheet.create({
   storageTypeSection: {
     padding: 16,
     borderBottomWidth: 1,
-    borderBottomColor: macOSColors.border.default
+    borderBottomColor: night.color.border
   },
   sectionTitle: {
     fontSize: 11,
     fontWeight: '700',
-    color: macOSColors.text.secondary,
+    color: night.color.textSecondary,
     letterSpacing: 0.8,
     marginBottom: 12
   },
@@ -121,17 +121,17 @@ const styles = StyleSheet.create({
     gap: 6,
     paddingVertical: 10,
     paddingHorizontal: 12,
-    backgroundColor: macOSColors.background.input,
+    backgroundColor: night.color.surfaceElevated,
     borderRadius: 8,
     borderWidth: 1,
-    borderColor: macOSColors.border.default
+    borderColor: night.color.border
   },
   storageTypeButtonActive: {
-    backgroundColor: macOSColors.background.card
+    backgroundColor: night.color.surface
   },
   storageTypeButtonText: {
     fontSize: 11,
     fontWeight: '600',
-    color: macOSColors.text.muted
+    color: night.color.textTertiary
   }
 });

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

@@ -2,7 +2,7 @@
 
 import { View, Text, StyleSheet, TouchableOpacity } from "react-native";
 import { StorageTypeFilterBar } from "./StorageTypeFilterBar";
-import { macOSColors } from "@buoy-gg/shared-ui";
+import { macOSColors, night } from "@buoy-gg/shared-ui";
 import { isMMKVAvailable } from "../utils/mmkvAvailability";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // Feature flags - set to true when implemented
@@ -38,15 +38,15 @@ export function StorageFilterCards({
       style: styles.filtersRow,
       children: [/*#__PURE__*/_jsxs(TouchableOpacity, {
         style: [styles.filterChip, activeFilter === "all" && [styles.filterChipActive, {
-          backgroundColor: macOSColors.background.hover,
-          borderColor: macOSColors.border.hover,
-          shadowColor: macOSColors.text.primary
+          backgroundColor: night.color.accentSoft,
+          borderColor: night.color.accentBorderStrong,
+          shadowColor: night.color.accent
         }]],
         onPress: () => onFilterChange?.("all"),
         activeOpacity: 0.8,
         children: [/*#__PURE__*/_jsx(Text, {
           style: [styles.filterValue, {
-            color: macOSColors.text.primary
+            color: night.color.text
           }],
           children: displayStats.validCount
         }), /*#__PURE__*/_jsx(Text, {
@@ -63,7 +63,7 @@ export function StorageFilterCards({
         activeOpacity: 0.8,
         children: [/*#__PURE__*/_jsx(Text, {
           style: [styles.filterValue, {
-            color: displayStats.missingCount > 0 ? macOSColors.semantic.error : macOSColors.text.muted
+            color: displayStats.missingCount > 0 ? macOSColors.semantic.error : night.color.textTertiary
           }],
           children: displayStats.missingCount
         }), /*#__PURE__*/_jsx(Text, {
@@ -80,7 +80,7 @@ export function StorageFilterCards({
         activeOpacity: 0.8,
         children: [/*#__PURE__*/_jsx(Text, {
           style: [styles.filterValue, {
-            color: displayStats.issuesCount > 0 ? macOSColors.semantic.warning : macOSColors.text.muted
+            color: displayStats.issuesCount > 0 ? macOSColors.semantic.warning : night.color.textTertiary
           }],
           children: displayStats.issuesCount
         }), /*#__PURE__*/_jsx(Text, {
@@ -102,11 +102,11 @@ export function StorageFilterCards({
 }
 const styles = StyleSheet.create({
   container: {
-    backgroundColor: macOSColors.background.card,
+    backgroundColor: night.color.surface,
     borderRadius: 12,
     padding: 16,
     borderWidth: 1,
-    borderColor: macOSColors.border.default + "50",
+    borderColor: night.color.border,
     gap: 14,
     shadowColor: "#000000",
     shadowOpacity: 0.03,
@@ -135,18 +135,18 @@ const styles = StyleSheet.create({
   titleText: {
     fontSize: 12,
     fontWeight: "600",
-    color: macOSColors.text.primary,
+    color: night.color.text,
     letterSpacing: 0.5,
     textTransform: "uppercase"
   },
   titleDivider: {
     width: 4,
     height: 1,
-    backgroundColor: macOSColors.border.default + "60",
+    backgroundColor: night.color.border,
     marginHorizontal: 4
   },
   subtitleText: {
-    color: macOSColors.text.muted,
+    color: night.color.textTertiary,
     fontSize: 11
   },
   healthBadge: {
@@ -164,7 +164,7 @@ const styles = StyleSheet.create({
   healthProgressBar: {
     height: 3,
     borderRadius: 1.5,
-    backgroundColor: macOSColors.background.input,
+    backgroundColor: night.color.bg,
     overflow: "hidden"
   },
   healthProgressFill: {
@@ -178,10 +178,10 @@ const styles = StyleSheet.create({
   },
   filterChip: {
     flex: 1,
-    backgroundColor: macOSColors.background.input + "80",
+    backgroundColor: night.color.buttonSurface,
     borderRadius: 8,
     borderWidth: 1,
-    borderColor: macOSColors.border.default + "30",
+    borderColor: night.color.border,
     paddingVertical: 10,
     paddingHorizontal: 12,
     alignItems: "center",
@@ -203,7 +203,7 @@ const styles = StyleSheet.create({
   },
   filterLabel: {
     fontSize: 9,
-    color: macOSColors.text.muted,
+    color: night.color.textTertiary,
     textTransform: "uppercase",
     letterSpacing: 0.5,
     fontWeight: "500",

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

@@ -1,7 +1,7 @@
 "use strict";
 
 import { View, Text, StyleSheet, TouchableOpacity } from "react-native";
-import { AlertCircle, CheckCircle2, Eye, XCircle, HardDrive, Database, Shield, gameUIColors, macOSColors } from "@buoy-gg/shared-ui";
+import { AlertCircle, CheckCircle2, Eye, XCircle, HardDrive, Database, Shield, gameUIColors, macOSColors, night } from "@buoy-gg/shared-ui";
 import { getStorageTypeLabel, getStorageTypeHexColor } from "../utils/storageQueryUtils";
 import { getValueTypeLabel } from "../utils/valueType";
 import { DataViewer } from "@buoy-gg/shared-ui/dataViewer";
@@ -210,7 +210,7 @@ export function StorageKeyCard({
           hitSlop: HIT_SLOP,
           children: /*#__PURE__*/_jsx(Eye, {
             size: 12,
-            color: macOSColors.text.secondary
+            color: night.color.textSecondary
           })
         })
       })]
@@ -316,7 +316,7 @@ export function StorageKeyCard({
 }
 const styles = StyleSheet.create({
   storageKeyCard: {
-    backgroundColor: macOSColors.background.card,
+    backgroundColor: night.color.surface,
     borderRadius: 8,
     borderWidth: 1,
     overflow: "hidden"
@@ -344,14 +344,14 @@ const styles = StyleSheet.create({
     gap: 4
   },
   storageKeyText: {
-    color: macOSColors.text.primary,
+    color: night.color.text,
     fontWeight: "500",
     fontSize: 12,
     flexWrap: "wrap",
     flex: 1
   },
   descriptionText: {
-    color: macOSColors.text.secondary,
+    color: night.color.textSecondary,
     fontSize: 10,
     marginTop: 2,
     flexWrap: "wrap"
@@ -402,12 +402,12 @@ const styles = StyleSheet.create({
   valueBadge: {
     paddingHorizontal: 4,
     paddingVertical: 2,
-    backgroundColor: macOSColors.background.input,
+    backgroundColor: night.color.surfaceElevated,
     borderRadius: 3
   },
   valueText: {
     fontSize: 8,
-    color: macOSColors.text.secondary,
+    color: night.color.textSecondary,
     fontWeight: "500"
   },
   cardHeaderRight: {
@@ -416,11 +416,11 @@ const styles = StyleSheet.create({
   actionButton: {
     padding: 4,
     borderRadius: 4,
-    backgroundColor: macOSColors.background.input
+    backgroundColor: night.color.surfaceElevated
   },
   cardBody: {
     borderTopWidth: 1,
-    borderTopColor: macOSColors.border.default,
+    borderTopColor: night.color.separator,
     padding: 12,
     gap: 12
   },
@@ -431,18 +431,18 @@ const styles = StyleSheet.create({
     gap: 8
   },
   simpleValueLabel: {
-    color: macOSColors.text.secondary,
+    color: night.color.textSecondary,
     fontSize: 10,
     fontWeight: "500",
     textTransform: "uppercase",
     letterSpacing: 0.5
   },
   simpleValueBox: {
-    backgroundColor: gameUIColors.background + "4D",
+    backgroundColor: night.color.bg,
     borderRadius: 4,
     padding: 10,
     borderWidth: 1,
-    borderColor: gameUIColors.primary + "0D"
+    borderColor: night.color.border
   },
   simpleValueContent: {
     color: gameUIColors.success,
@@ -451,7 +451,7 @@ const styles = StyleSheet.create({
     lineHeight: 16
   },
   valueTypeText: {
-    color: gameUIColors.muted,
+    color: night.color.textTertiary,
     fontSize: 9,
     fontStyle: "italic"
   },
@@ -459,34 +459,34 @@ const styles = StyleSheet.create({
     gap: 6
   },
   valueLabel: {
-    color: macOSColors.text.secondary,
+    color: night.color.textSecondary,
     fontSize: 10,
     fontWeight: "500",
     textTransform: "uppercase",
     letterSpacing: 0.5
   },
   valueBox: {
-    backgroundColor: gameUIColors.background + "4D",
+    backgroundColor: night.color.bg,
     borderRadius: 4,
     padding: 8,
     borderWidth: 1,
-    borderColor: gameUIColors.primary + "0D"
+    borderColor: night.color.border
   },
   valueContent: {
-    color: gameUIColors.primaryLight,
+    color: night.color.text,
     fontSize: 10,
     fontFamily: "monospace",
     lineHeight: 14
   },
   expectedValueBox: {
-    backgroundColor: gameUIColors.background + "4D",
+    backgroundColor: night.color.bg,
     borderRadius: 4,
     padding: 8,
     borderWidth: 1,
-    borderColor: gameUIColors.primary + "0D"
+    borderColor: night.color.border
   },
   expectedValueContent: {
-    color: gameUIColors.primaryLight,
+    color: night.color.text,
     fontSize: 10,
     fontFamily: "monospace",
     lineHeight: 14
@@ -507,7 +507,7 @@ const styles = StyleSheet.create({
     fontStyle: "italic"
   },
   typeHelperText: {
-    color: macOSColors.text.secondary,
+    color: night.color.textSecondary,
     fontSize: 9,
     marginTop: 4,
     textAlign: "center"
@@ -516,7 +516,7 @@ const styles = StyleSheet.create({
     marginTop: 8
   },
   metaLabel: {
-    color: gameUIColors.muted,
+    color: night.color.textTertiary,
     fontSize: 9,
     fontStyle: "italic"
   }