@buoy-gg/network 7.0.25 → 7.0.27

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

@@ -181,13 +181,30 @@ const FlaskConical = p => /*#__PURE__*/(0, _jsxRuntime.jsxs)(Svg, {
     d: "M7 16h10"
   })]
 });
-const Pin = p => /*#__PURE__*/(0, _jsxRuntime.jsxs)(Svg, {
+const Pin = ({
+  active,
+  ...p
+}) => /*#__PURE__*/(0, _jsxRuntime.jsx)(Svg, {
   ...p,
-  children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
-    d: "M12 17v5"
-  }), /*#__PURE__*/(0, _jsxRuntime.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__*/(0, _jsxRuntime.jsxs)("g", {
+    transform: active ? "rotate(-45 12 12) translate(12 12) scale(0.92) translate(-12 -12)" : undefined,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
+      d: "M2.97 21.03 8.18 15.82"
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
+      d: "M4.4 10.81 13.19 19.6"
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
+      d: "M5.17 10.54 11.43 8.83"
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
+      d: "M13.46 18.83 15.17 12.57"
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("rect", {
+      x: "12.15",
+      y: "5.4",
+      width: "9.38",
+      height: "3.52",
+      rx: "1.07",
+      transform: "rotate(-45 16.84 7.16)"
+    })]
+  })
 });
 
 // =============================
@@ -623,6 +640,7 @@ const NetworkEventItemCompact = exports.NetworkEventItemCompact = /*#__PURE__*/(
       style: styles.topRightContainer,
       children: [pinned ? /*#__PURE__*/(0, _jsxRuntime.jsx)(Pin, {
         size: 10,
+        active: true,
         color: macOSColors.semantic.info
       }) : null, saved ? /*#__PURE__*/(0, _jsxRuntime.jsx)(Bookmark, {
         size: 10,

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

@@ -45,7 +45,7 @@ function getContentType(event) {
   };
   return {
     type: "OTHER",
-    color: _sharedUi.macOSColors.text.muted
+    color: _sharedUi.night.color.textTertiary
   };
 }
 function getContentTypeIcon(type) {
@@ -79,7 +79,7 @@ function getMethodColor(method) {
     case "PATCH":
       return _sharedUi.macOSColors.semantic.success;
     default:
-      return _sharedUi.macOSColors.text.muted;
+      return _sharedUi.night.color.textTertiary;
   }
 }
 
@@ -115,7 +115,7 @@ function NetworkFilterViewV3({
   const renderPatternMeta = (0, _react.useCallback)(pattern => {
     const mode = patternModes.get(pattern) ?? "contains";
     const isExact = mode === "exact";
-    const color = isExact ? _sharedUi.macOSColors.semantic.warning : _sharedUi.macOSColors.semantic.info;
+    const color = isExact ? _sharedUi.night.color.warning : _sharedUi.night.color.info;
     return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
       accessibilityRole: "button",
       accessibilityLabel: `Match mode: ${mode}. Tap to toggle.`,
@@ -331,7 +331,7 @@ function NetworkFilterViewV3({
           const {
             color
           } = representativeEvent ? getContentType(representativeEvent) : {
-            color: _sharedUi.macOSColors.text.muted
+            color: _sharedUi.night.color.textTertiary
           };
           return {
             id: `contentType::${type}`,
@@ -401,7 +401,7 @@ const styles = _reactNative.StyleSheet.create({
   modeToggleLabel: {
     fontSize: 11,
     fontWeight: "600",
-    color: _sharedUi.macOSColors.text.secondary,
+    color: _sharedUi.night.color.textSecondary,
     fontFamily: "monospace",
     letterSpacing: 0.3
   },
@@ -416,27 +416,27 @@ const styles = _reactNative.StyleSheet.create({
     paddingHorizontal: 10,
     borderRadius: 8,
     borderWidth: 1,
-    borderColor: _sharedUi.macOSColors.border.default,
-    backgroundColor: _sharedUi.macOSColors.background.hover,
+    borderColor: _sharedUi.night.color.border,
+    backgroundColor: _sharedUi.night.color.buttonSurface,
     alignItems: "center"
   },
   modeToggleButtonActive: {
-    borderColor: _sharedUi.macOSColors.semantic.info,
-    backgroundColor: `${_sharedUi.macOSColors.semantic.info}22`
+    borderColor: _sharedUi.night.color.accentBorderStrong,
+    backgroundColor: _sharedUi.night.color.accentSoft
   },
   modeToggleButtonText: {
     fontSize: 11,
     fontWeight: "700",
-    color: _sharedUi.macOSColors.text.secondary,
+    color: _sharedUi.night.color.textSecondary,
     fontFamily: "monospace",
     letterSpacing: 0.3
   },
   modeToggleButtonTextActive: {
-    color: _sharedUi.macOSColors.semantic.info
+    color: _sharedUi.night.color.accent
   },
   modeToggleButtonHint: {
     fontSize: 9,
-    color: _sharedUi.macOSColors.text.muted,
+    color: _sharedUi.night.color.textTertiary,
     marginTop: 1
   }
 });

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

@@ -105,7 +105,7 @@ function NetworkClearButton({
     disabled: !hasEvents,
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.Trash2, {
       size: 14,
-      color: hasEvents ? _sharedUi.macOSColors.text.muted : _sharedUi.macOSColors.text.disabled
+      color: hasEvents ? _sharedUi.night.color.textSecondary : _sharedUi.night.color.textTertiary
     })
   });
 }
@@ -127,7 +127,7 @@ function NetworkSavedButton({
     style: styles.headerActionButton,
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.Bookmark, {
       size: 14,
-      color: count > 0 ? _sharedUi.macOSColors.semantic.debug : _sharedUi.macOSColors.text.muted
+      color: count > 0 ? _sharedUi.night.color.accent : _sharedUi.night.color.textSecondary
     }), count > 0 ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
       style: styles.savedBadge,
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
@@ -195,7 +195,8 @@ function NetworkDetailPinActions({
       style: [styles.headerActionButton, pinned && styles.headerActionButtonActive, atPinCap && styles.headerActionButtonDisabled],
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.Pin, {
         size: 14,
-        color: pinned ? _sharedUi.macOSColors.semantic.info : atPinCap ? _sharedUi.macOSColors.text.disabled : _sharedUi.macOSColors.text.secondary
+        active: pinned,
+        color: pinned ? _sharedUi.night.color.accent : atPinCap ? _sharedUi.night.color.textTertiary : _sharedUi.night.color.textSecondary
       })
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
       "sentry-label": "ignore save request",
@@ -206,7 +207,7 @@ function NetworkDetailPinActions({
       style: [styles.headerActionButton, saved && styles.headerActionButtonSaved, atSavedCap && isPro && styles.headerActionButtonDisabled],
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.Bookmark, {
         size: 14,
-        color: saved ? _sharedUi.macOSColors.semantic.debug : atSavedCap && isPro ? _sharedUi.macOSColors.text.disabled : _sharedUi.macOSColors.text.secondary
+        color: saved ? _sharedUi.night.color.accent : atSavedCap && isPro ? _sharedUi.night.color.textTertiary : _sharedUi.night.color.textSecondary
       })
     })]
   });
@@ -238,7 +239,7 @@ function NetworkHeaderCopyButton({
       disabled: !hasEvents,
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.Copy, {
         size: 14,
-        color: hasEvents ? _sharedUi.macOSColors.text.secondary : _sharedUi.macOSColors.text.disabled
+        color: hasEvents ? _sharedUi.night.color.textSecondary : _sharedUi.night.color.textTertiary
       }), label ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
         style: styles.copyMenuLabel,
         children: label
@@ -255,7 +256,7 @@ function NetworkHeaderCopyButton({
     buttonStyle: label ? styles.copyMenuRow : styles.headerActionButton,
     labelStyle: styles.copyMenuLabel,
     colors: {
-      idle: hasEvents ? _sharedUi.macOSColors.text.secondary : _sharedUi.macOSColors.text.disabled,
+      idle: hasEvents ? _sharedUi.night.color.textSecondary : _sharedUi.night.color.textTertiary,
       success: _sharedUi.macOSColors.semantic.success,
       error: _sharedUi.macOSColors.semantic.error
     },
@@ -275,7 +276,7 @@ const styles = _reactNative.StyleSheet.create({
   copyMenuLabel: {
     fontSize: 13,
     fontWeight: "600",
-    color: _sharedUi.macOSColors.text.primary
+    color: _sharedUi.night.color.text
   },
   headerChipRow: {
     flexDirection: "row",
@@ -283,31 +284,26 @@ const styles = _reactNative.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: _sharedUi.macOSColors.background.hover,
+    backgroundColor: _sharedUi.night.color.buttonSurface,
     paddingHorizontal: 10,
     paddingVertical: 5,
     borderRadius: 12,
     borderWidth: 1,
-    borderColor: _sharedUi.macOSColors.border.default
+    borderColor: _sharedUi.night.color.border
   },
   headerChipActive: {
-    backgroundColor: _sharedUi.macOSColors.semantic.infoBackground,
-    borderColor: _sharedUi.macOSColors.semantic.info + "50",
-    shadowColor: _sharedUi.macOSColors.semantic.info,
-    shadowOffset: {
-      width: 0,
-      height: 1
-    },
-    shadowOpacity: 0.08,
-    shadowRadius: 2,
-    elevation: 1
+    backgroundColor: _sharedUi.night.color.accentSoft,
+    borderColor: _sharedUi.night.color.accentBorderStrong
   },
   headerChipValue: {
     fontSize: 12,
@@ -318,9 +314,9 @@ const styles = _reactNative.StyleSheet.create({
     width: 32,
     height: 32,
     borderRadius: 8,
-    backgroundColor: _sharedUi.macOSColors.background.hover,
+    backgroundColor: _sharedUi.night.color.buttonSurface,
     borderWidth: 1,
-    borderColor: _sharedUi.macOSColors.border.default,
+    borderColor: _sharedUi.night.color.border,
     alignItems: "center",
     justifyContent: "center"
   },
@@ -328,12 +324,12 @@ const styles = _reactNative.StyleSheet.create({
     opacity: 0.55
   },
   headerActionButtonActive: {
-    backgroundColor: _sharedUi.macOSColors.semantic.infoBackground,
-    borderColor: _sharedUi.macOSColors.semantic.info + "50"
+    backgroundColor: _sharedUi.night.color.accentSoft,
+    borderColor: _sharedUi.night.color.accentBorderStrong
   },
   headerActionButtonSaved: {
-    backgroundColor: _sharedUi.macOSColors.semantic.debug + "1A",
-    borderColor: _sharedUi.macOSColors.semantic.debug + "50"
+    backgroundColor: _sharedUi.night.color.accentSoft,
+    borderColor: _sharedUi.night.color.accentBorderStrong
   },
   savedBadge: {
     position: "absolute",
@@ -343,12 +339,12 @@ const styles = _reactNative.StyleSheet.create({
     height: 14,
     paddingHorizontal: 3,
     borderRadius: 7,
-    backgroundColor: _sharedUi.macOSColors.semantic.debug,
+    backgroundColor: _sharedUi.night.color.accent,
     alignItems: "center",
     justifyContent: "center"
   },
   savedBadgeText: {
-    color: "#FFFFFF",
+    color: _sharedUi.night.color.onAccent,
     fontSize: 9,
     fontWeight: "700",
     fontFamily: "monospace"

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

@@ -170,13 +170,30 @@ const Bookmark = p => /*#__PURE__*/(0, _jsxRuntime.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__*/(0, _jsxRuntime.jsxs)(Svg, {
+const Pin = ({
+  active,
+  ...p
+}) => /*#__PURE__*/(0, _jsxRuntime.jsx)(Svg, {
   ...p,
-  children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
-    d: "M12 17v5"
-  }), /*#__PURE__*/(0, _jsxRuntime.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__*/(0, _jsxRuntime.jsxs)("g", {
+    transform: active ? "rotate(-45 12 12) translate(12 12) scale(0.92) translate(-12 -12)" : undefined,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
+      d: "M2.97 21.03 8.18 15.82"
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
+      d: "M4.4 10.81 13.19 19.6"
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
+      d: "M5.17 10.54 11.43 8.83"
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
+      d: "M13.46 18.83 15.17 12.57"
+    }), /*#__PURE__*/(0, _jsxRuntime.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__*/(0, _jsxRuntime.jsxs)(Svg, {
   ...p,
@@ -385,6 +402,7 @@ function NetworkDetailPinActions({
       },
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Pin, {
         size: 14,
+        active: pinned,
         color: pinned ? macOSColors.semantic.info : atPinCap ? macOSColors.text.disabled : macOSColors.text.secondary
       })
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {

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

@@ -113,7 +113,7 @@ const styles = _reactNative.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: _sharedUi.macOSColors.background.hover
+    backgroundColor: _sharedUi.night.color.surfaceElevated
   },
   dots: {
     flexDirection: "column",
@@ -124,10 +124,10 @@ const styles = _reactNative.StyleSheet.create({
     width: 3,
     height: 3,
     borderRadius: 2,
-    backgroundColor: _sharedUi.macOSColors.text.secondary
+    backgroundColor: _sharedUi.night.color.textSecondary
   },
   dotOpen: {
-    backgroundColor: _sharedUi.macOSColors.text.primary
+    backgroundColor: _sharedUi.night.color.text
   },
   indicator: {
     position: "absolute",
@@ -138,7 +138,7 @@ const styles = _reactNative.StyleSheet.create({
     width: 6,
     height: 6,
     borderRadius: 3,
-    backgroundColor: _sharedUi.macOSColors.semantic.info
+    backgroundColor: _sharedUi.night.color.accent
   },
   overlay: {
     ..._sharedUi.absoluteFill,
@@ -148,16 +148,17 @@ const styles = _reactNative.StyleSheet.create({
     ..._sharedUi.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: _sharedUi.macOSColors.border.hover,
-    backgroundColor: _sharedUi.macOSColors.background.card
+    borderColor: _sharedUi.night.color.border,
+    backgroundColor: _sharedUi.night.color.surface
   },
   item: {
     flexDirection: "row",
@@ -174,10 +175,10 @@ const styles = _reactNative.StyleSheet.create({
     flex: 1,
     fontSize: 13,
     fontWeight: "600",
-    color: _sharedUi.macOSColors.text.primary
+    color: _sharedUi.night.color.text
   },
   itemDetail: {
     fontSize: 11,
-    color: _sharedUi.macOSColors.text.muted
+    color: _sharedUi.night.color.textTertiary
   }
 });

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

@@ -71,6 +71,7 @@ function PinnedSection({
       style: styles.pinnedHeader,
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.Pin, {
         size: 11,
+        active: true,
         color: _sharedUi.macOSColors.semantic.info
       }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Text, {
         style: styles.pinnedTitle,
@@ -237,7 +238,7 @@ function NetworkListScreen({
   };
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
     style: styles.root,
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.BackgroundSwitcher, {}), !isEnabled ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+    children: [!isEnabled ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
       style: styles.disabledBanner,
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.Power, {
         size: 14,

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

@@ -127,13 +127,30 @@ const Globe = p => /*#__PURE__*/(0, _jsxRuntime.jsxs)(Svg, {
     d: "M2 12h20"
   })]
 });
-const Pin = p => /*#__PURE__*/(0, _jsxRuntime.jsxs)(Svg, {
+const Pin = ({
+  active,
+  ...p
+}) => /*#__PURE__*/(0, _jsxRuntime.jsx)(Svg, {
   ...p,
-  children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
-    d: "M12 17v5"
-  }), /*#__PURE__*/(0, _jsxRuntime.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__*/(0, _jsxRuntime.jsxs)("g", {
+    transform: active ? "rotate(-45 12 12) translate(12 12) scale(0.92) translate(-12 -12)" : undefined,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
+      d: "M2.97 21.03 8.18 15.82"
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
+      d: "M4.4 10.81 13.19 19.6"
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
+      d: "M5.17 10.54 11.43 8.83"
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
+      d: "M13.46 18.83 15.17 12.57"
+    }), /*#__PURE__*/(0, _jsxRuntime.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__*/(0, _jsxRuntime.jsxs)(Svg, {
   ...p,
@@ -239,6 +256,7 @@ function PinnedSection({
       style: styles.pinnedHeader,
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(Pin, {
         size: 11,
+        active: true,
         color: macOSColors.semantic.info
       }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
         style: styles.pinnedTitle,

package/lib/commonjs/network/components/NetworkModal.js

@@ -365,25 +365,26 @@ function NetworkModalInner({
 
   // Compact header with actions (like Sentry/Storage modals)
   const renderHeaderContent = () => {
-    // Filter view header with tabs
+    // Filter view header with tabs — the night segmented control (the same
+    // one the dial settings header uses).
     if (showFilterView) {
-      const tabs = [{
-        key: "filters",
-        label: "Filters"
-      }, {
-        key: "copy",
-        label: "Copy"
-      }];
       return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_sharedUi.ModalHeader, {
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.ModalHeader.Navigation, {
           onBack: () => setShowFilterView(false)
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.ModalHeader.Content, {
           title: "",
           noMargin: true,
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.TabSelector, {
-            tabs: tabs,
-            activeTab: activeTab,
-            onTabChange: tab => setActiveTab(tab)
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.NightSegmented, {
+            size: "sm",
+            tabs: [{
+              key: "filters",
+              label: "Filters"
+            }, {
+              key: "copy",
+              label: "Copy"
+            }],
+            activeKey: activeTab,
+            onChange: tab => setActiveTab(tab)
           })
         })]
       });
@@ -449,12 +450,12 @@ function NetworkModalInner({
           style: styles.headerSearchContainer,
           children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.Search, {
             size: 14,
-            color: _sharedUi.macOSColors.text.secondary
+            color: _sharedUi.night.color.textSecondary
           }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TextInput, {
             ref: searchInputRef,
             style: styles.headerSearchInput,
             placeholder: "Search URL, method, operation, error...",
-            placeholderTextColor: _sharedUi.macOSColors.text.muted,
+            placeholderTextColor: _sharedUi.night.color.placeholder,
             value: searchText,
             onChangeText: handleSearch,
             onSubmitEditing: () => setIsSearchActive(false),
@@ -473,7 +474,7 @@ function NetworkModalInner({
             style: styles.headerSearchClear,
             children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.X, {
               size: 14,
-              color: _sharedUi.macOSColors.text.secondary
+              color: _sharedUi.night.color.textSecondary
             })
           }) : null]
         }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_NetworkHeaderLive.NetworkHeaderBadges, {
@@ -489,7 +490,7 @@ function NetworkModalInner({
           style: styles.headerActionButton,
           children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.Search, {
             size: 14,
-            color: _sharedUi.macOSColors.text.secondary
+            color: _sharedUi.night.color.textSecondary
           })
         }), overridesAvailable ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_NetworkOverridesButton.NetworkOverridesButton, {
           onPress: () => setShowOverridesView(true)
@@ -525,7 +526,7 @@ function NetworkModalInner({
   const body = /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
     children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
       style: styles.container,
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.ToolBackground, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(NetworkDetailScreen, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(NetworkDetailScreen, {
         visible: hasSelection,
         paused: paused,
         ignoredPatternValues: ignoredPatternValues,
@@ -595,7 +596,7 @@ function NetworkModalInner({
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_NetworkHeaderMenu.NetworkHeaderMenuItem, {
         icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.Filter, {
           size: 14,
-          color: hasActiveFilter ? _sharedUi.macOSColors.semantic.info : _sharedUi.macOSColors.text.secondary
+          color: hasActiveFilter ? _sharedUi.night.color.accent : _sharedUi.night.color.textSecondary
         }),
         label: "Filters",
         detail: hasActiveFilter ? "Active" : undefined,
@@ -607,7 +608,7 @@ function NetworkModalInner({
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_NetworkHeaderMenu.NetworkHeaderMenuItem, {
         icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.Bookmark, {
           size: 14,
-          color: _sharedUi.macOSColors.text.secondary
+          color: _sharedUi.night.color.textSecondary
         }),
         label: "Saved requests",
         onPress: () => {
@@ -659,6 +660,7 @@ function NetworkModalInner({
     onClose: onClose,
     onMinimize: onMinimize,
     persistenceKey: persistenceKey,
+    variant: "night",
     header: {
       showToggleButton: true,
       customContent: renderHeaderContent()
@@ -667,7 +669,12 @@ function NetworkModalInner({
     enablePersistence: true,
     initialMode: "bottomSheet",
     enableGlitchEffects: true,
-    disableScrollWrapper: bodyOwnsScroll,
+    disableScrollWrapper: bodyOwnsScroll
+    // Night hoists the ToolBackground to the sheet root (field runs through
+    // the header). The desktop INLINE panel never goes through JsModal — its
+    // host (the workbench) hoists one shared field instead, so the body
+    // mounts none of its own in either shell.
+    ,
     styles: {},
     children: body
   });
@@ -675,7 +682,10 @@ function NetworkModalInner({
 const styles = _reactNative.StyleSheet.create({
   container: {
     flex: 1,
-    backgroundColor: _sharedUi.macOSColors.background.base
+    // Transparent so the HOST's hoisted star field shows through — the night
+    // JsModal's sheet-root field in the modal, the desktop workbench's shared
+    // row field in the inline panel.
+    backgroundColor: "transparent"
   },
   /** Detail = scrolling body + pinned stepper footer. `minHeight: 0` so the
    * body's ScrollView scrolls instead of stretching the column. */
@@ -688,11 +698,13 @@ const styles = _reactNative.StyleSheet.create({
     flex: 1
   },
   /** Inline shell — fills the host panel; `minHeight: 0` so the list's own
-   * FlatList can scroll instead of stretching the column. */
+   * FlatList can scroll instead of stretching the column. Transparent so the
+   * desktop workbench's hoisted sky (one field spanning sidebar + panel)
+   * shows through — the shell paints its own base beneath that field. */
   inlineRoot: {
     flex: 1,
     minHeight: 0,
-    backgroundColor: _sharedUi.macOSColors.background.base
+    backgroundColor: "transparent"
   },
   inlineHeader: {
     paddingHorizontal: 12,
@@ -701,19 +713,21 @@ const styles = _reactNative.StyleSheet.create({
     borderBottomColor: _sharedUi.macOSColors.border.default,
     backgroundColor: _sharedUi.macOSColors.background.card
   },
+  // Night chrome — the header is glass over the star field, so the search
+  // field and action chips sit on the Everlights dark-glass fill.
   headerSearchContainer: {
     flexDirection: "row",
     alignItems: "center",
-    backgroundColor: _sharedUi.macOSColors.background.input,
-    borderRadius: 10,
+    backgroundColor: _sharedUi.night.color.surfaceElevated,
+    borderRadius: _sharedUi.night.radius.row,
     borderWidth: 1,
-    borderColor: _sharedUi.macOSColors.border.default,
+    borderColor: _sharedUi.night.color.border,
     paddingHorizontal: 12,
     paddingVertical: 5
   },
   headerSearchInput: {
     flex: 1,
-    color: _sharedUi.macOSColors.text.primary,
+    color: _sharedUi.night.color.text,
     fontSize: 13,
     marginLeft: 6,
     paddingVertical: 2
@@ -729,15 +743,15 @@ const styles = _reactNative.StyleSheet.create({
     width: 32,
     height: 32,
     borderRadius: 8,
-    backgroundColor: _sharedUi.macOSColors.background.hover,
+    backgroundColor: _sharedUi.night.color.buttonSurface,
     borderWidth: 1,
-    borderColor: _sharedUi.macOSColors.border.default,
+    borderColor: _sharedUi.night.color.border,
     alignItems: "center",
     justifyContent: "center"
   },
   activeFilterButton: {
-    backgroundColor: _sharedUi.macOSColors.semantic.infoBackground,
-    borderColor: _sharedUi.macOSColors.semantic.info + "40"
+    backgroundColor: _sharedUi.night.color.accentSoft,
+    borderColor: _sharedUi.night.color.accentBorderStrong
   }
 });