@buoy-gg/storage 7.0.26 → 7.0.27

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

@@ -19,7 +19,7 @@
 
 import { useMemo } from "react";
 import { Alert, ScrollView, StyleSheet, Text, TouchableOpacity, View } from "react-native";
-import { macOSColors, FileJson, PillBadge, useSafeAreaInsets, X } from "@buoy-gg/shared-ui";
+import { macOSColors, night, FileJson, PillBadge, useSafeAreaInsets, X } from "@buoy-gg/shared-ui";
 import { DataViewer, DataTreeActionDock, getAtPath } from "@buoy-gg/shared-ui/dataViewer";
 import { useKeyEditor } from "../hooks/useKeyEditor";
 import { StorageValueEditModal } from "./StorageValueEditModal";
@@ -206,7 +206,7 @@ function EditorHeader({
       },
       children: /*#__PURE__*/_jsx(X, {
         size: 16,
-        color: macOSColors.text.secondary
+        color: night.color.textSecondary
       })
     }), /*#__PURE__*/_jsxs(View, {
       style: styles.headerTitle,
@@ -230,7 +230,7 @@ function EditorHeader({
       },
       children: [/*#__PURE__*/_jsx(FileJson, {
         size: 16,
-        color: macOSColors.semantic.info
+        color: night.color.accent
       }), /*#__PURE__*/_jsx(Text, {
         style: styles.headerRawText,
         children: "Raw"
@@ -265,7 +265,8 @@ function storageTypeColor(storageType) {
 const styles = StyleSheet.create({
   screen: {
     flex: 1,
-    backgroundColor: macOSColors.background.base
+    // Transparent so the night sheet's star field shows through.
+    backgroundColor: "transparent"
   },
   header: {
     flexDirection: "row",
@@ -274,7 +275,7 @@ const styles = StyleSheet.create({
     paddingHorizontal: 10,
     paddingVertical: 8,
     borderBottomWidth: 1,
-    borderBottomColor: macOSColors.border.default
+    borderBottomColor: night.color.border
   },
   headerButton: {
     flexDirection: "row",
@@ -284,7 +285,7 @@ const styles = StyleSheet.create({
     paddingHorizontal: 4
   },
   headerRawText: {
-    color: macOSColors.semantic.info,
+    color: night.color.accent,
     fontSize: 12,
     fontWeight: "700"
   },
@@ -294,17 +295,17 @@ const styles = StyleSheet.create({
     gap: 2
   },
   headerKey: {
-    color: macOSColors.text.primary,
+    color: night.color.text,
     fontSize: 13,
     fontWeight: "600",
     fontFamily: "monospace"
   },
   headerState: {
-    color: macOSColors.text.muted,
+    color: night.color.textTertiary,
     fontSize: 10
   },
   headerDirty: {
-    color: macOSColors.semantic.warning
+    color: night.color.warning
   },
   metaRow: {
     flexDirection: "row",
@@ -314,7 +315,7 @@ const styles = StyleSheet.create({
     paddingVertical: 8
   },
   metaText: {
-    color: macOSColors.text.muted,
+    color: night.color.textTertiary,
     fontSize: 11,
     fontFamily: "monospace"
   },
@@ -326,27 +327,27 @@ const styles = StyleSheet.create({
     paddingBottom: 16
   },
   treeCard: {
-    backgroundColor: macOSColors.background.card,
+    backgroundColor: night.color.surface,
     borderRadius: 10,
     borderWidth: 1,
-    borderColor: macOSColors.border.default,
+    borderColor: night.color.border,
     padding: 6
   },
   treeHint: {
-    color: macOSColors.text.muted,
+    color: night.color.textTertiary,
     fontSize: 10,
     paddingTop: 8,
     paddingHorizontal: 4
   },
   error: {
-    color: macOSColors.semantic.error,
+    color: night.color.danger,
     fontSize: 11,
     fontFamily: "monospace",
     paddingHorizontal: 12,
     paddingBottom: 6
   },
   footer: {
-    backgroundColor: macOSColors.background.card
+    backgroundColor: night.color.surface
   },
   commitRow: {
     flexDirection: "row",
@@ -362,10 +363,10 @@ const styles = StyleSheet.create({
     justifyContent: "center",
     borderRadius: 12,
     borderWidth: 1,
-    borderColor: macOSColors.border.default
+    borderColor: night.color.border
   },
   discardText: {
-    color: macOSColors.text.secondary,
+    color: night.color.textSecondary,
     fontSize: 14,
     fontWeight: "600"
   },
@@ -375,13 +376,13 @@ const styles = StyleSheet.create({
     alignItems: "center",
     justifyContent: "center",
     borderRadius: 12,
-    backgroundColor: macOSColors.semantic.success
+    backgroundColor: night.color.accent
   },
   saveDisabled: {
     opacity: 0.5
   },
   saveText: {
-    color: macOSColors.background.base,
+    color: night.color.onAccent,
     fontSize: 15,
     fontWeight: "700"
   }

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

@@ -2,7 +2,7 @@
 
 import { memo } from "react";
 import { View, Text, StyleSheet, TouchableOpacity } from "react-native";
-import { macOSColors, CompactRow, TypeBadge, HardDrive, Square, CheckSquare, Edit3, EyeOff, Pin, ExpandedInfoRow, PillBadge } from "@buoy-gg/shared-ui";
+import { macOSColors, night, CompactRow, TypeBadge, HardDrive, Square, CheckSquare, Edit3, EyeOff, Pin, ExpandedInfoRow, PillBadge } from "@buoy-gg/shared-ui";
 import { getStorageTypeLabel } from "../utils/storageQueryUtils";
 import { getValueTypeLabel, getValueTypeWithPreview, parseStorageValue } from "../utils/valueType";
 import { DataViewer } from "@buoy-gg/shared-ui/dataViewer";
@@ -227,7 +227,7 @@ export const StorageKeyRow = /*#__PURE__*/memo(function StorageKeyRow({
         },
         children: [/*#__PURE__*/_jsx(Edit3, {
           size: 13,
-          color: macOSColors.background.base
+          color: night.color.onAccent
         }), /*#__PURE__*/_jsx(Text, {
           style: styles.editButtonText,
           children: isBoolean && onToggleKey ? "Toggle" : "Edit"
@@ -243,10 +243,11 @@ export const StorageKeyRow = /*#__PURE__*/memo(function StorageKeyRow({
         },
         children: [/*#__PURE__*/_jsx(Pin, {
           size: 12,
-          color: macOSColors.semantic.info
+          active: isPinned,
+          color: night.color.accent
         }), /*#__PURE__*/_jsx(Text, {
           style: [styles.actionChipText, {
-            color: macOSColors.semantic.info
+            color: night.color.accent
           }],
           children: isPinned ? "Unpin" : "Pin to top"
         })]
@@ -261,10 +262,10 @@ export const StorageKeyRow = /*#__PURE__*/memo(function StorageKeyRow({
         },
         children: [/*#__PURE__*/_jsx(EyeOff, {
           size: 12,
-          color: macOSColors.semantic.warning
+          color: night.color.warning
         }), /*#__PURE__*/_jsx(Text, {
           style: [styles.actionChipText, {
-            color: macOSColors.semantic.warning
+            color: night.color.warning
           }],
           children: "Hide from list"
         })]
@@ -289,10 +290,10 @@ export const StorageKeyRow = /*#__PURE__*/memo(function StorageKeyRow({
     },
     children: isSelected ? /*#__PURE__*/_jsx(CheckSquare, {
       size: 18,
-      color: macOSColors.semantic.info
+      color: night.color.accent
     }) : /*#__PURE__*/_jsx(Square, {
       size: 18,
-      color: macOSColors.text.muted
+      color: night.color.textTertiary
     })
   }) : null;
   return /*#__PURE__*/_jsxs(View, {
@@ -317,7 +318,8 @@ export const StorageKeyRow = /*#__PURE__*/memo(function StorageKeyRow({
           style: styles.badgeRow,
           children: [isPinned && /*#__PURE__*/_jsx(Pin, {
             size: 12,
-            color: macOSColors.semantic.info
+            active: true,
+            color: night.color.accent
           }), /*#__PURE__*/_jsx(PillBadge, {
             color: getStorageTypeColor(storageKey.storageType),
             children: storageTypeLabel
@@ -369,14 +371,14 @@ const styles = StyleSheet.create({
   },
   expandedLabel: {
     fontSize: 10,
-    color: macOSColors.text.muted,
+    color: night.color.textTertiary,
     fontWeight: "600",
     minWidth: 70,
     fontFamily: "monospace"
   },
   expandedValue: {
     fontSize: 11,
-    color: macOSColors.text.secondary,
+    color: night.color.textSecondary,
     fontFamily: "monospace",
     flex: 1
   },
@@ -388,16 +390,16 @@ const styles = StyleSheet.create({
   },
   expandedDescription: {
     fontSize: 11,
-    color: macOSColors.text.secondary,
+    color: night.color.textSecondary,
     flex: 1
   },
   dataViewerContainer: {
     marginTop: 6,
     marginBottom: 6,
-    backgroundColor: macOSColors.background.base,
+    backgroundColor: night.color.bg,
     borderRadius: 6,
     borderWidth: 1,
-    borderColor: macOSColors.border.default,
+    borderColor: night.color.border,
     padding: 6
   },
   rowContainer: {
@@ -405,7 +407,7 @@ const styles = StyleSheet.create({
     alignItems: "flex-start"
   },
   rowContainerSelected: {
-    backgroundColor: macOSColors.semantic.info + "08",
+    backgroundColor: night.color.accentSoft,
     borderRadius: 8
   },
   checkboxContainer: {
@@ -446,13 +448,13 @@ const styles = StyleSheet.create({
     paddingVertical: 6,
     paddingHorizontal: 10,
     borderRadius: 6,
-    backgroundColor: macOSColors.background.card,
+    backgroundColor: night.color.surface,
     borderWidth: 1,
-    borderColor: macOSColors.border.default
+    borderColor: night.color.border
   },
   actionChipActive: {
-    backgroundColor: macOSColors.semantic.info + "15",
-    borderColor: macOSColors.semantic.info + "44"
+    backgroundColor: night.color.accentSoft,
+    borderColor: night.color.accentBorderStrong
   },
   /** Filled, and first — the one action in this row that changes anything. */
   editButton: {
@@ -462,10 +464,10 @@ const styles = StyleSheet.create({
     paddingVertical: 8,
     paddingHorizontal: 14,
     borderRadius: 8,
-    backgroundColor: macOSColors.semantic.success
+    backgroundColor: night.color.accent
   },
   editButtonText: {
-    color: macOSColors.background.base,
+    color: night.color.onAccent,
     fontSize: 12,
     fontWeight: "700"
   },
@@ -481,6 +483,6 @@ const styles = StyleSheet.create({
     fontSize: 10,
     fontWeight: "600",
     fontFamily: "monospace",
-    color: macOSColors.semantic.info
+    color: night.color.accent
   }
 });

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

@@ -3,7 +3,7 @@
 import { useCallback, useState } from "react";
 import { View, Text, StyleSheet } from "react-native";
 import { StorageKeyRow } from "./StorageKeyRow";
-import { SectionHeader, macOSColors } from "@buoy-gg/shared-ui";
+import { SectionHeader, night } from "@buoy-gg/shared-ui";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /**
  * Storage key section component following composition principles [[rule3]]
@@ -102,15 +102,15 @@ const styles = StyleSheet.create({
     // No gap needed, StorageKeyRow has its own margins
   },
   emptySection: {
-    backgroundColor: "rgba(128, 128, 128, 0.04)",
+    backgroundColor: night.color.surface,
     borderRadius: 6,
     padding: 16,
     borderWidth: 1,
-    borderColor: "rgba(128, 128, 128, 0.1)",
+    borderColor: night.color.border,
     alignItems: "center"
   },
   emptySectionText: {
-    color: macOSColors.text.icon,
+    color: night.color.textTertiary,
     fontSize: 11,
     textAlign: "center"
   }

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

@@ -2,7 +2,7 @@
 
 import { View, Text, StyleSheet } from "react-native";
 import { AlertCircle, CheckCircle2, XCircle, Eye, Database, Shield } from "@buoy-gg/shared-ui";
-import { macOSColors, buoyColors } from "@buoy-gg/shared-ui";
+import { night } from "@buoy-gg/shared-ui";
 import { getStorageTypeHexColor } from "../utils/storageQueryUtils";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // Variable type configurations matching env vars design
@@ -256,15 +256,15 @@ export function StorageKeyStatsSection({
 const styles = StyleSheet.create({
   statsContainer: {
     marginBottom: 24,
-    backgroundColor: "rgba(128, 128, 128, 0.06)",
+    backgroundColor: night.color.surface,
     borderRadius: 8,
     padding: 16,
     borderWidth: 1,
-    borderColor: "rgba(128, 128, 128, 0.16)"
+    borderColor: night.color.border
   },
   // Section titles
   sectionTitle: {
-    color: buoyColors.textSecondary,
+    color: night.color.textSecondary,
     fontSize: 12,
     fontWeight: "500",
     marginBottom: 16,
@@ -280,11 +280,11 @@ const styles = StyleSheet.create({
     gap: 12
   },
   breakdownItem: {
-    backgroundColor: "rgba(128, 128, 128, 0.04)",
+    backgroundColor: night.color.surfaceElevated,
     padding: 12,
     borderRadius: 8,
     borderWidth: 1,
-    borderColor: "rgba(128, 128, 128, 0.1)"
+    borderColor: night.color.border
   },
   breakdownItemRow: {
     flexDirection: "row",
@@ -307,12 +307,12 @@ const styles = StyleSheet.create({
     minWidth: 0
   },
   breakdownItemLabel: {
-    color: macOSColors.text.primary,
+    color: night.color.text,
     fontSize: 14,
     fontWeight: "500"
   },
   breakdownItemDesc: {
-    color: buoyColors.textSecondary,
+    color: night.color.textSecondary,
     fontSize: 12
   },
   breakdownItemRight: {
@@ -323,18 +323,18 @@ const styles = StyleSheet.create({
     fontWeight: "600"
   },
   breakdownPercentage: {
-    color: macOSColors.text.icon,
+    color: night.color.textTertiary,
     fontSize: 10
   },
   // Empty state
   emptyState: {
     padding: 16,
-    backgroundColor: "rgba(128, 128, 128, 0.04)",
+    backgroundColor: night.color.surfaceElevated,
     borderRadius: 6,
     alignItems: "center"
   },
   emptyStateText: {
-    color: macOSColors.text.icon,
+    color: night.color.textTertiary,
     fontSize: 11,
     textAlign: "center"
   }

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

@@ -3,7 +3,7 @@
 import { useState, useCallback, useEffect, useRef, useMemo } from "react";
 import { Text, View, TouchableOpacity, StyleSheet, FlatList, Alert } from "react-native";
 import AsyncStorage from "@react-native-async-storage/async-storage";
-import { JsModal, ModalHeader, TabSelector, parseValue, devToolsStorageKeys, macOSColors, Database, Filter, RefreshCw, Search, SearchBar, PowerToggleButton, ToolbarCopyButton, ToolbarClearButton, truncatePayload, TickProvider, useLimit, TIER_LIMITS } from "@buoy-gg/shared-ui";
+import { JsModal, ModalHeader, TabSelector, parseValue, devToolsStorageKeys, macOSColors, night, Database, Filter, RefreshCw, Search, SearchBar, PowerToggleButton, ToolbarCopyButton, ToolbarClearButton, truncatePayload, TickProvider, useLimit, TIER_LIMITS } from "@buoy-gg/shared-ui";
 import { StorageBrowserMode } from "./StorageBrowserMode";
 import { StorageTypeFilterBar, countByStorageType } from "./StorageTypeFilterBar";
 import { clearAllAppStorage, clearAllStorageIncludingDevTools } from "../utils/clearAllStorage";
@@ -663,7 +663,7 @@ export function StorageModalWithTabs({
           style: styles.emptyState,
           children: [/*#__PURE__*/_jsx(Database, {
             size: 48,
-            color: macOSColors.text.muted
+            color: night.color.textTertiary
           }), /*#__PURE__*/_jsx(Text, {
             style: styles.emptyTitle,
             children: !isListening ? "Event listener is paused" : filtered ? `No ${storageTypeFilter} events` : "No storage events yet"
@@ -783,14 +783,14 @@ export function StorageModalWithTabs({
         accessibilityLabel: "Refresh storage",
         children: /*#__PURE__*/_jsx(RefreshCw, {
           size: 14,
-          color: macOSColors.text.secondary
+          color: night.color.textSecondary
         })
       }) : null, /*#__PURE__*/_jsx(TouchableOpacity, {
         onPress: handleToggleFilters,
         style: [styles.iconButton, (ignoredPatterns.size > 0 || enabledStorageTypes.size < 3) && styles.activeFilterButton],
         children: /*#__PURE__*/_jsx(Filter, {
           size: 14,
-          color: ignoredPatterns.size > 0 || enabledStorageTypes.size < 3 ? macOSColors.semantic.debug : macOSColors.text.secondary
+          color: ignoredPatterns.size > 0 || enabledStorageTypes.size < 3 ? night.color.accent : night.color.textSecondary
         })
       }), activeTab === "browser" && !isSearchActive && /*#__PURE__*/_jsxs(_Fragment, {
         children: [/*#__PURE__*/_jsx(TouchableOpacity, {
@@ -798,7 +798,7 @@ export function StorageModalWithTabs({
           style: styles.iconButton,
           children: /*#__PURE__*/_jsx(Search, {
             size: 14,
-            color: macOSColors.text.secondary
+            color: night.color.textSecondary
           })
         }), /*#__PURE__*/_jsx(ToolbarCopyButton, {
           value: getStorageSnapshot,
@@ -877,7 +877,9 @@ const styles = StyleSheet.create({
   inlineRoot: {
     flex: 1,
     minHeight: 0,
-    backgroundColor: macOSColors.background.base
+    // Transparent so the desktop workbench's hoisted sky (one field spanning
+    // sidebar + panel) shows through — the shell paints its base beneath it.
+    backgroundColor: "transparent"
   },
   inlineHeader: {
     paddingHorizontal: 12,
@@ -892,18 +894,21 @@ const styles = StyleSheet.create({
   flexFill: {
     flex: 1
   },
+  // Night chrome — the header is glass over the star field, so the action
+  // chips sit on the Everlights dark-glass fill.
   iconButton: {
     width: 32,
     height: 32,
     borderRadius: 8,
-    backgroundColor: macOSColors.background.hover,
+    backgroundColor: night.color.buttonSurface,
     borderWidth: 1,
-    borderColor: macOSColors.border.default,
+    borderColor: night.color.border,
     alignItems: "center",
     justifyContent: "center"
   },
   activeFilterButton: {
-    backgroundColor: macOSColors.semantic.infoBackground
+    backgroundColor: night.color.accentSoft,
+    borderColor: night.color.accentBorderStrong
   },
   separator: {
     height: 8
@@ -928,7 +933,7 @@ const styles = StyleSheet.create({
     padding: 32
   },
   emptyTitle: {
-    color: macOSColors.text.primary,
+    color: night.color.text,
     fontSize: 16,
     fontWeight: "600",
     marginTop: 16,
@@ -938,7 +943,7 @@ const styles = StyleSheet.create({
     textTransform: "uppercase"
   },
   emptySubtitle: {
-    color: macOSColors.text.secondary,
+    color: night.color.textSecondary,
     fontSize: 14,
     textAlign: "center",
     fontFamily: "monospace"
@@ -957,7 +962,7 @@ const styles = StyleSheet.create({
     opacity: 0.3
   },
   eventCounter: {
-    color: macOSColors.text.primary,
+    color: night.color.text,
     fontSize: 12,
     fontWeight: "600",
     fontFamily: "monospace",
@@ -974,19 +979,19 @@ const styles = StyleSheet.create({
     flexDirection: "row",
     alignItems: "center",
     gap: 6,
-    backgroundColor: macOSColors.background.input,
+    backgroundColor: night.color.surfaceElevated,
     paddingHorizontal: 10,
     paddingVertical: 4,
     borderRadius: 6,
     borderWidth: 1,
-    borderColor: macOSColors.border.input,
+    borderColor: night.color.border,
     height: 28
   },
   keyNameText: {
     flex: 1,
     fontSize: 13,
     fontWeight: "600",
-    color: macOSColors.semantic.debug,
+    color: night.color.accent,
     fontFamily: "monospace",
     letterSpacing: 0.5
   },

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

@@ -17,7 +17,7 @@
  */
 
 import { StyleSheet, Text, TouchableOpacity, View } from "react-native";
-import { macOSColors } from "@buoy-gg/shared-ui";
+import { macOSColors, night } from "@buoy-gg/shared-ui";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /**
  * One entry per pill. This was four near-identical blocks of JSX differing only
@@ -50,7 +50,7 @@ export function StorageTypeFilterBar({
     style: styles.row,
     children: SEGMENTS.map(segment => {
       const isActive = active === segment.id;
-      const accent = segment.color ?? macOSColors.text.primary;
+      const accent = segment.color ?? night.color.accent;
       return /*#__PURE__*/_jsxs(TouchableOpacity, {
         accessibilityLabel: `Filter by ${segment.label}`,
         accessibilityState: {
@@ -59,13 +59,13 @@ export function StorageTypeFilterBar({
         activeOpacity: 0.8,
         onPress: () => onChange(segment.id),
         style: [styles.pill, {
-          borderColor: macOSColors.border.default
+          borderColor: night.color.border
         }, isActive && [styles.pillActive, segment.color ? {
           backgroundColor: segment.color + "15",
           borderColor: segment.color + "40"
         } : {
-          backgroundColor: macOSColors.background.hover,
-          borderColor: macOSColors.border.hover
+          backgroundColor: night.color.accentSoft,
+          borderColor: night.color.accentBorderStrong
         }]],
         children: [/*#__PURE__*/_jsx(Text, {
           style: [styles.label, isActive && {
@@ -75,7 +75,7 @@ export function StorageTypeFilterBar({
           children: segment.label
         }), /*#__PURE__*/_jsx(Text, {
           style: [styles.value, {
-            color: isActive ? accent : macOSColors.text.muted
+            color: isActive ? accent : night.color.textTertiary
           }],
           children: counts[segment.id]
         })]
@@ -103,10 +103,10 @@ const styles = StyleSheet.create({
   },
   pill: {
     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: 6,
     paddingHorizontal: 8,
     alignItems: "center",
@@ -121,7 +121,7 @@ const styles = StyleSheet.create({
   },
   label: {
     fontSize: 9,
-    color: macOSColors.text.secondary,
+    color: night.color.textSecondary,
     textTransform: "uppercase",
     letterSpacing: 0.4,
     fontWeight: "500",