@buoy-gg/network 7.0.26 → 7.0.27

package/lib/module/network/components/NetworkEventItemCompact.web.js

@@ -179,13 +179,30 @@ const FlaskConical = p => /*#__PURE__*/_jsxs(Svg, {
     d: "M7 16h10"
   })]
 });
-const Pin = p => /*#__PURE__*/_jsxs(Svg, {
+const Pin = ({
+  active,
+  ...p
+}) => /*#__PURE__*/_jsx(Svg, {
   ...p,
-  children: [/*#__PURE__*/_jsx("path", {
-    d: "M12 17v5"
-  }), /*#__PURE__*/_jsx("path", {
-    d: "M9 10.76a2 2 0 0 1-1.11 1.79l-1.78.9A2 2 0 0 0 5 15.24V16a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-.76a2 2 0 0 0-1.11-1.79l-1.78-.9A2 2 0 0 1 15 10.76V6h1a2 2 0 0 0 0-4H8a2 2 0 0 0 0 4h1z"
-  })]
+  children: /*#__PURE__*/_jsxs("g", {
+    transform: active ? "rotate(-45 12 12) translate(12 12) scale(0.92) translate(-12 -12)" : undefined,
+    children: [/*#__PURE__*/_jsx("path", {
+      d: "M2.97 21.03 8.18 15.82"
+    }), /*#__PURE__*/_jsx("path", {
+      d: "M4.4 10.81 13.19 19.6"
+    }), /*#__PURE__*/_jsx("path", {
+      d: "M5.17 10.54 11.43 8.83"
+    }), /*#__PURE__*/_jsx("path", {
+      d: "M13.46 18.83 15.17 12.57"
+    }), /*#__PURE__*/_jsx("rect", {
+      x: "12.15",
+      y: "5.4",
+      width: "9.38",
+      height: "3.52",
+      rx: "1.07",
+      transform: "rotate(-45 16.84 7.16)"
+    })]
+  })
 });
 
 // =============================
@@ -621,6 +638,7 @@ export const NetworkEventItemCompact = /*#__PURE__*/memo(function NetworkEventIt
       style: styles.topRightContainer,
       children: [pinned ? /*#__PURE__*/_jsx(Pin, {
         size: 10,
+        active: true,
         color: macOSColors.semantic.info
       }) : null, saved ? /*#__PURE__*/_jsx(Bookmark, {
         size: 10,

package/lib/module/network/components/NetworkFilterViewV3.js

@@ -1,6 +1,6 @@
 "use strict";
 
-import { CheckCircle, Clock, DynamicFilterView, Film, FileJson, FileText, Filter, Globe, Image, macOSColors, Music, XCircle } from "@buoy-gg/shared-ui";
+import { CheckCircle, Clock, DynamicFilterView, Film, FileJson, FileText, Filter, Globe, Image, macOSColors, night, Music, XCircle } from "@buoy-gg/shared-ui";
 import { useCallback, useMemo, useState } from "react";
 import { StyleSheet, Text, TouchableOpacity, View } from "react-native";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
@@ -41,7 +41,7 @@ function getContentType(event) {
   };
   return {
     type: "OTHER",
-    color: macOSColors.text.muted
+    color: night.color.textTertiary
   };
 }
 function getContentTypeIcon(type) {
@@ -75,7 +75,7 @@ function getMethodColor(method) {
     case "PATCH":
       return macOSColors.semantic.success;
     default:
-      return macOSColors.text.muted;
+      return night.color.textTertiary;
   }
 }
 
@@ -111,7 +111,7 @@ export function NetworkFilterViewV3({
   const renderPatternMeta = useCallback(pattern => {
     const mode = patternModes.get(pattern) ?? "contains";
     const isExact = mode === "exact";
-    const color = isExact ? macOSColors.semantic.warning : macOSColors.semantic.info;
+    const color = isExact ? night.color.warning : night.color.info;
     return /*#__PURE__*/_jsx(TouchableOpacity, {
       accessibilityRole: "button",
       accessibilityLabel: `Match mode: ${mode}. Tap to toggle.`,
@@ -327,7 +327,7 @@ export function NetworkFilterViewV3({
           const {
             color
           } = representativeEvent ? getContentType(representativeEvent) : {
-            color: macOSColors.text.muted
+            color: night.color.textTertiary
           };
           return {
             id: `contentType::${type}`,
@@ -397,7 +397,7 @@ const styles = StyleSheet.create({
   modeToggleLabel: {
     fontSize: 11,
     fontWeight: "600",
-    color: macOSColors.text.secondary,
+    color: night.color.textSecondary,
     fontFamily: "monospace",
     letterSpacing: 0.3
   },
@@ -412,27 +412,27 @@ const styles = StyleSheet.create({
     paddingHorizontal: 10,
     borderRadius: 8,
     borderWidth: 1,
-    borderColor: macOSColors.border.default,
-    backgroundColor: macOSColors.background.hover,
+    borderColor: night.color.border,
+    backgroundColor: night.color.buttonSurface,
     alignItems: "center"
   },
   modeToggleButtonActive: {
-    borderColor: macOSColors.semantic.info,
-    backgroundColor: `${macOSColors.semantic.info}22`
+    borderColor: night.color.accentBorderStrong,
+    backgroundColor: night.color.accentSoft
   },
   modeToggleButtonText: {
     fontSize: 11,
     fontWeight: "700",
-    color: macOSColors.text.secondary,
+    color: night.color.textSecondary,
     fontFamily: "monospace",
     letterSpacing: 0.3
   },
   modeToggleButtonTextActive: {
-    color: macOSColors.semantic.info
+    color: night.color.accent
   },
   modeToggleButtonHint: {
     fontSize: 9,
-    color: macOSColors.text.muted,
+    color: night.color.textTertiary,
     marginTop: 1
   }
 });

package/lib/module/network/components/NetworkHeaderLive.js

@@ -19,7 +19,7 @@
  */
 
 import { StyleSheet, Text, TouchableOpacity, View } from "react-native";
-import { Bookmark, CheckCircle, XCircle, Clock, Copy, Pin, Trash2, CopyButton, macOSColors, useLimit } from "@buoy-gg/shared-ui";
+import { Bookmark, CheckCircle, XCircle, Clock, Copy, Pin, Trash2, CopyButton, macOSColors, night, useLimit } from "@buoy-gg/shared-ui";
 import { networkEventStore } from "../utils/networkEventStore";
 import { flagsForEventId, networkSavedStore, MAX_PINNED, MAX_SAVED } from "../utils/networkSavedStore";
 import { useNetworkSaved } from "../hooks/useNetworkSaved";
@@ -97,7 +97,7 @@ export function NetworkClearButton({
     disabled: !hasEvents,
     children: /*#__PURE__*/_jsx(Trash2, {
       size: 14,
-      color: hasEvents ? macOSColors.text.muted : macOSColors.text.disabled
+      color: hasEvents ? night.color.textSecondary : night.color.textTertiary
     })
   });
 }
@@ -119,7 +119,7 @@ export function NetworkSavedButton({
     style: styles.headerActionButton,
     children: [/*#__PURE__*/_jsx(Bookmark, {
       size: 14,
-      color: count > 0 ? macOSColors.semantic.debug : macOSColors.text.muted
+      color: count > 0 ? night.color.accent : night.color.textSecondary
     }), count > 0 ? /*#__PURE__*/_jsx(View, {
       style: styles.savedBadge,
       children: /*#__PURE__*/_jsx(Text, {
@@ -187,7 +187,8 @@ export function NetworkDetailPinActions({
       style: [styles.headerActionButton, pinned && styles.headerActionButtonActive, atPinCap && styles.headerActionButtonDisabled],
       children: /*#__PURE__*/_jsx(Pin, {
         size: 14,
-        color: pinned ? macOSColors.semantic.info : atPinCap ? macOSColors.text.disabled : macOSColors.text.secondary
+        active: pinned,
+        color: pinned ? night.color.accent : atPinCap ? night.color.textTertiary : night.color.textSecondary
       })
     }), /*#__PURE__*/_jsx(TouchableOpacity, {
       "sentry-label": "ignore save request",
@@ -198,7 +199,7 @@ export function NetworkDetailPinActions({
       style: [styles.headerActionButton, saved && styles.headerActionButtonSaved, atSavedCap && isPro && styles.headerActionButtonDisabled],
       children: /*#__PURE__*/_jsx(Bookmark, {
         size: 14,
-        color: saved ? macOSColors.semantic.debug : atSavedCap && isPro ? macOSColors.text.disabled : macOSColors.text.secondary
+        color: saved ? night.color.accent : atSavedCap && isPro ? night.color.textTertiary : night.color.textSecondary
       })
     })]
   });
@@ -230,7 +231,7 @@ export function NetworkHeaderCopyButton({
       disabled: !hasEvents,
       children: [/*#__PURE__*/_jsx(Copy, {
         size: 14,
-        color: hasEvents ? macOSColors.text.secondary : macOSColors.text.disabled
+        color: hasEvents ? night.color.textSecondary : night.color.textTertiary
       }), label ? /*#__PURE__*/_jsx(Text, {
         style: styles.copyMenuLabel,
         children: label
@@ -247,7 +248,7 @@ export function NetworkHeaderCopyButton({
     buttonStyle: label ? styles.copyMenuRow : styles.headerActionButton,
     labelStyle: styles.copyMenuLabel,
     colors: {
-      idle: hasEvents ? macOSColors.text.secondary : macOSColors.text.disabled,
+      idle: hasEvents ? night.color.textSecondary : night.color.textTertiary,
       success: macOSColors.semantic.success,
       error: macOSColors.semantic.error
     },
@@ -267,7 +268,7 @@ const styles = StyleSheet.create({
   copyMenuLabel: {
     fontSize: 13,
     fontWeight: "600",
-    color: macOSColors.text.primary
+    color: night.color.text
   },
   headerChipRow: {
     flexDirection: "row",
@@ -275,31 +276,26 @@ const styles = StyleSheet.create({
     gap: 8
   },
   /**
-   * Counter chips and toolbar buttons carry a permanent outline; the fill marks
-   * the active filter.
+   * Counter chips and toolbar buttons on the night dark-glass fill — the
+   * hairline outline barely registers on the star field, and the fill marks
+   * the active filter in the brand accent (the night selection language).
+   * Status glyph/count colors stay on the classic semantic palette on
+   * purpose — see getStatusColor in NetworkEventItemCompact.
    */
   headerChip: {
     flexDirection: "row",
     alignItems: "center",
     gap: 4,
-    backgroundColor: macOSColors.background.hover,
+    backgroundColor: night.color.buttonSurface,
     paddingHorizontal: 10,
     paddingVertical: 5,
     borderRadius: 12,
     borderWidth: 1,
-    borderColor: macOSColors.border.default
+    borderColor: night.color.border
   },
   headerChipActive: {
-    backgroundColor: macOSColors.semantic.infoBackground,
-    borderColor: macOSColors.semantic.info + "50",
-    shadowColor: macOSColors.semantic.info,
-    shadowOffset: {
-      width: 0,
-      height: 1
-    },
-    shadowOpacity: 0.08,
-    shadowRadius: 2,
-    elevation: 1
+    backgroundColor: night.color.accentSoft,
+    borderColor: night.color.accentBorderStrong
   },
   headerChipValue: {
     fontSize: 12,
@@ -310,9 +306,9 @@ const styles = StyleSheet.create({
     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"
   },
@@ -320,12 +316,12 @@ const styles = StyleSheet.create({
     opacity: 0.55
   },
   headerActionButtonActive: {
-    backgroundColor: macOSColors.semantic.infoBackground,
-    borderColor: macOSColors.semantic.info + "50"
+    backgroundColor: night.color.accentSoft,
+    borderColor: night.color.accentBorderStrong
   },
   headerActionButtonSaved: {
-    backgroundColor: macOSColors.semantic.debug + "1A",
-    borderColor: macOSColors.semantic.debug + "50"
+    backgroundColor: night.color.accentSoft,
+    borderColor: night.color.accentBorderStrong
   },
   savedBadge: {
     position: "absolute",
@@ -335,12 +331,12 @@ const styles = StyleSheet.create({
     height: 14,
     paddingHorizontal: 3,
     borderRadius: 7,
-    backgroundColor: macOSColors.semantic.debug,
+    backgroundColor: night.color.accent,
     alignItems: "center",
     justifyContent: "center"
   },
   savedBadgeText: {
-    color: "#FFFFFF",
+    color: night.color.onAccent,
     fontSize: 9,
     fontWeight: "700",
     fontFamily: "monospace"

package/lib/module/network/components/NetworkHeaderLive.web.js

@@ -164,13 +164,30 @@ const Bookmark = p => /*#__PURE__*/_jsx(Svg, {
     d: "m19 21-7-4-7 4V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v16z"
   })
 });
-const Pin = p => /*#__PURE__*/_jsxs(Svg, {
+const Pin = ({
+  active,
+  ...p
+}) => /*#__PURE__*/_jsx(Svg, {
   ...p,
-  children: [/*#__PURE__*/_jsx("path", {
-    d: "M12 17v5"
-  }), /*#__PURE__*/_jsx("path", {
-    d: "M9 10.76a2 2 0 0 1-1.11 1.79l-1.78.9A2 2 0 0 0 5 15.24V16a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-.76a2 2 0 0 0-1.11-1.79l-1.78-.9A2 2 0 0 1 15 10.76V6h1a2 2 0 0 0 0-4H8a2 2 0 0 0 0 4h1z"
-  })]
+  children: /*#__PURE__*/_jsxs("g", {
+    transform: active ? "rotate(-45 12 12) translate(12 12) scale(0.92) translate(-12 -12)" : undefined,
+    children: [/*#__PURE__*/_jsx("path", {
+      d: "M2.97 21.03 8.18 15.82"
+    }), /*#__PURE__*/_jsx("path", {
+      d: "M4.4 10.81 13.19 19.6"
+    }), /*#__PURE__*/_jsx("path", {
+      d: "M5.17 10.54 11.43 8.83"
+    }), /*#__PURE__*/_jsx("path", {
+      d: "M13.46 18.83 15.17 12.57"
+    }), /*#__PURE__*/_jsx("rect", {
+      x: "12.15",
+      y: "5.4",
+      width: "9.38",
+      height: "3.52",
+      rx: "1.07",
+      transform: "rotate(-45 16.84 7.16)"
+    })]
+  })
 });
 const Copy = p => /*#__PURE__*/_jsxs(Svg, {
   ...p,
@@ -379,6 +396,7 @@ export function NetworkDetailPinActions({
       },
       children: /*#__PURE__*/_jsx(Pin, {
         size: 14,
+        active: pinned,
         color: pinned ? macOSColors.semantic.info : atPinCap ? macOSColors.text.disabled : macOSColors.text.secondary
       })
     }), /*#__PURE__*/_jsx("button", {

package/lib/module/network/components/NetworkHeaderMenu.js

@@ -1,7 +1,7 @@
 "use strict";
 
 import { StyleSheet, Text, TouchableOpacity, View } from "react-native";
-import { absoluteFill, macOSColors } from "@buoy-gg/shared-ui";
+import { absoluteFill, night } from "@buoy-gg/shared-ui";
 
 /**
  * The header's overflow menu.
@@ -107,7 +107,7 @@ const styles = StyleSheet.create({
   // Only lit while the menu is down — the button is the one thing not covered
   // by the backdrop, so it has to look like the thing that is currently open.
   buttonOpen: {
-    backgroundColor: macOSColors.background.hover
+    backgroundColor: night.color.surfaceElevated
   },
   dots: {
     flexDirection: "column",
@@ -118,10 +118,10 @@ const styles = StyleSheet.create({
     width: 3,
     height: 3,
     borderRadius: 2,
-    backgroundColor: macOSColors.text.secondary
+    backgroundColor: night.color.textSecondary
   },
   dotOpen: {
-    backgroundColor: macOSColors.text.primary
+    backgroundColor: night.color.text
   },
   indicator: {
     position: "absolute",
@@ -132,7 +132,7 @@ const styles = StyleSheet.create({
     width: 6,
     height: 6,
     borderRadius: 3,
-    backgroundColor: macOSColors.semantic.info
+    backgroundColor: night.color.accent
   },
   overlay: {
     ...absoluteFill,
@@ -142,16 +142,17 @@ const styles = StyleSheet.create({
     ...absoluteFill,
     backgroundColor: "rgba(0,0,0,0.5)"
   },
+  // The night card: near-black surface, hairline border, row radius.
   panel: {
     position: "absolute",
     top: 6,
     right: 8,
     minWidth: 196,
     paddingVertical: 4,
-    borderRadius: 8,
+    borderRadius: 10,
     borderWidth: 1,
-    borderColor: macOSColors.border.hover,
-    backgroundColor: macOSColors.background.card
+    borderColor: night.color.border,
+    backgroundColor: night.color.surface
   },
   item: {
     flexDirection: "row",
@@ -168,10 +169,10 @@ const styles = StyleSheet.create({
     flex: 1,
     fontSize: 13,
     fontWeight: "600",
-    color: macOSColors.text.primary
+    color: night.color.text
   },
   itemDetail: {
     fontSize: 11,
-    color: macOSColors.text.muted
+    color: night.color.textTertiary
   }
 });

package/lib/module/network/components/NetworkListScreen.js

@@ -14,7 +14,7 @@
 
 import { useCallback } from "react";
 import { FlatList, StyleSheet, Text, TouchableOpacity, View } from "react-native";
-import { FlaskConical, Globe, Pin, Power, macOSColors, BackgroundSwitcher } from "@buoy-gg/shared-ui";
+import { FlaskConical, Globe, Pin, Power, macOSColors } from "@buoy-gg/shared-ui";
 import { NetworkEventItemCompact } from "./NetworkEventItemCompact";
 import { NetworkUpgradeBanner } from "./NetworkUpgradeBanner";
 import { useNetworkEventList } from "../hooks/useNetworkEventList";
@@ -67,6 +67,7 @@ function PinnedSection({
       style: styles.pinnedHeader,
       children: [/*#__PURE__*/_jsx(Pin, {
         size: 11,
+        active: true,
         color: macOSColors.semantic.info
       }), /*#__PURE__*/_jsxs(Text, {
         style: styles.pinnedTitle,
@@ -233,7 +234,7 @@ export function NetworkListScreen({
   };
   return /*#__PURE__*/_jsxs(View, {
     style: styles.root,
-    children: [/*#__PURE__*/_jsx(BackgroundSwitcher, {}), !isEnabled ? /*#__PURE__*/_jsxs(View, {
+    children: [!isEnabled ? /*#__PURE__*/_jsxs(View, {
       style: styles.disabledBanner,
       children: [/*#__PURE__*/_jsx(Power, {
         size: 14,

package/lib/module/network/components/NetworkListScreen.web.js

@@ -125,13 +125,30 @@ const Globe = p => /*#__PURE__*/_jsxs(Svg, {
     d: "M2 12h20"
   })]
 });
-const Pin = p => /*#__PURE__*/_jsxs(Svg, {
+const Pin = ({
+  active,
+  ...p
+}) => /*#__PURE__*/_jsx(Svg, {
   ...p,
-  children: [/*#__PURE__*/_jsx("path", {
-    d: "M12 17v5"
-  }), /*#__PURE__*/_jsx("path", {
-    d: "M9 10.76a2 2 0 0 1-1.11 1.79l-1.78.9A2 2 0 0 0 5 15.24V16a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-.76a2 2 0 0 0-1.11-1.79l-1.78-.9A2 2 0 0 1 15 10.76V6h1a2 2 0 0 0 0-4H8a2 2 0 0 0 0 4h1z"
-  })]
+  children: /*#__PURE__*/_jsxs("g", {
+    transform: active ? "rotate(-45 12 12) translate(12 12) scale(0.92) translate(-12 -12)" : undefined,
+    children: [/*#__PURE__*/_jsx("path", {
+      d: "M2.97 21.03 8.18 15.82"
+    }), /*#__PURE__*/_jsx("path", {
+      d: "M4.4 10.81 13.19 19.6"
+    }), /*#__PURE__*/_jsx("path", {
+      d: "M5.17 10.54 11.43 8.83"
+    }), /*#__PURE__*/_jsx("path", {
+      d: "M13.46 18.83 15.17 12.57"
+    }), /*#__PURE__*/_jsx("rect", {
+      x: "12.15",
+      y: "5.4",
+      width: "9.38",
+      height: "3.52",
+      rx: "1.07",
+      transform: "rotate(-45 16.84 7.16)"
+    })]
+  })
 });
 const Power = p => /*#__PURE__*/_jsxs(Svg, {
   ...p,
@@ -237,6 +254,7 @@ function PinnedSection({
       style: styles.pinnedHeader,
       children: [/*#__PURE__*/_jsx(Pin, {
         size: 11,
+        active: true,
         color: macOSColors.semantic.info
       }), /*#__PURE__*/_jsxs("span", {
         style: styles.pinnedTitle,