@buoy-gg/shared-ui 7.0.26 → 7.0.28

package/lib/commonjs/JsModal.js

@@ -10,6 +10,8 @@ var _absoluteFill = require("./utils/absoluteFill.js");
 var _useSafeAreaInsets = require("./hooks/useSafeAreaInsets.js");
 var _index = require("./ui/gameUI/index.js");
 var _index2 = require("./ui/components/index.js");
+var _ToolBackground = require("./ui/backgrounds/ToolBackground.js");
+var _nightTheme = require("./ui/night/nightTheme.js");
 var _persistentStorage = require("./utils/persistentStorage.js");
 var _devToolsStorageKeys = require("./storage/devToolsStorageKeys.js");
 var _index3 = require("./context/index.js");
@@ -29,6 +31,21 @@ var _jsxRuntime = require("react/jsx-runtime");
 // ============================================================================
 // CONSTANTS - Modal dimensions and configuration
 // ============================================================================
+
+/**
+ * Tool modals open and close without an entrance animation.
+ *
+ * The animated entrance was `parallel([spring(tension:180, friction:22),
+ * timing(200ms)])`. Two measured problems: the modal mounts at opacity 0 and
+ * the fade only starts once its content has committed, so a tap left the screen
+ * unchanged for ~240ms; and the spring's completion did not land until ~1s,
+ * creeping long after it looked settled. Snapping to the final state made the
+ * whole devtools UI feel markedly faster.
+ *
+ * Setting this to `false` restores the animation for every tool modal — this is
+ * shared chrome, not settings-specific.
+ */
+const INSTANT_MODAL_ENTRANCE = true;
 const SCREEN = _reactNative.Dimensions.get("window");
 const MIN_HEIGHT = 100;
 const DEFAULT_HEIGHT = 400;
@@ -96,6 +113,15 @@ class ModalStorage {
 // TYPE DEFINITIONS - Interface contracts for the modal
 // ============================================================================
 
+/**
+ * Chrome variant. "night" (the default since the suite-wide theme move) is
+ * the Everlights-style sheet (see ui/night): near-black `#050505` surfaces at
+ * radius 16, a hairline accent border, a neutral drag handle instead of the
+ * teal bar, a transparent header, and the ToolBackground hoisted to the sheet
+ * root so the star field runs through the header instead of stopping under
+ * it. "default" is the legacy card-grey chrome, kept as an escape hatch.
+ */
+
 /**
  * Modal state that can be saved and restored when minimizing/restoring
  */
@@ -110,12 +136,15 @@ class ModalStorage {
 const DragIndicator = /*#__PURE__*/(0, _react.memo)(function DragIndicator({
   isResizing,
   mode,
-  hasCustomContent = false
+  hasCustomContent = false,
+  variant = "default"
 }) {
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
     style: [styles.dragIndicatorContainer, hasCustomContent && styles.dragIndicatorContainerCustom],
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-      style: [styles.dragIndicator, mode === "floating" && styles.floatingDragIndicator, isResizing && styles.dragIndicatorActive]
+      style: [styles.dragIndicator, mode === "floating" && styles.floatingDragIndicator, isResizing && styles.dragIndicatorActive,
+      // Night: the neutral Everlights sheet handle, no glow, both modes.
+      variant === "night" && styles.nightDragIndicator]
     }), isResizing && mode === "bottomSheet" && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
       style: styles.resizeGripContainer,
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
@@ -155,7 +184,8 @@ const ModalHeader = /*#__PURE__*/(0, _react.memo)(function ModalHeader({
   onMinimize,
   isResizing,
   mode,
-  panHandlers
+  panHandlers,
+  variant = "default"
 }) {
   const lastTapRef = (0, _react.useRef)(0);
   const tapCountRef = (0, _react.useRef)(0);
@@ -234,11 +264,12 @@ const ModalHeader = /*#__PURE__*/(0, _react.memo)(function ModalHeader({
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(DragIndicator, {
         isResizing: isResizing,
         mode: mode,
-        hasCustomContent: true
+        hasCustomContent: true,
+        variant: variant
       }), customContentWithMinimize]
     });
     return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-      style: styles.header,
+      style: [styles.header, variant === "night" && styles.nightHeader],
       ...headerProps,
       children: shouldHandleTap ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableWithoutFeedback, {
         onPress: handleHeaderTap,
@@ -250,7 +281,8 @@ const ModalHeader = /*#__PURE__*/(0, _react.memo)(function ModalHeader({
     style: styles.headerInner,
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(DragIndicator, {
       isResizing: isResizing,
-      mode: mode
+      mode: mode,
+      variant: variant
     }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
       style: styles.headerContent,
       children: [header?.title && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
@@ -269,7 +301,7 @@ const ModalHeader = /*#__PURE__*/(0, _react.memo)(function ModalHeader({
     })]
   });
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-    style: [styles.header, mode === "floating" && styles.floatingModeHeader],
+    style: [styles.header, mode === "floating" && styles.floatingModeHeader, variant === "night" && styles.nightHeader],
     ...headerProps,
     children: shouldHandleTap ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableWithoutFeedback, {
       onPress: handleHeaderTap,
@@ -342,7 +374,9 @@ const JsModalComponent = ({
   minimizeTargetPosition,
   initialModalState,
   zIndex,
-  disableScrollWrapper = false
+  disableScrollWrapper = false,
+  background = true,
+  variant = "night"
 }) => {
   const insets = (0, _useSafeAreaInsets.useSafeAreaInsets)();
   const [isStateLoaded, setIsStateLoaded] = (0, _react.useState)(!enablePersistence);
@@ -671,6 +705,27 @@ const JsModalComponent = ({
     // Visibility effect
     let openAnimation = null;
     let closeAnimation = null;
+    if (INSTANT_MODAL_ENTRANCE) {
+      // Snap to the final state — no animation in either direction.
+      if (visible) {
+        if (mode === "bottomSheet") {
+          bottomSheetTranslateY.setValue(0);
+        } else {
+          floatingScale.setValue(1);
+          floatingPosition.setValue({
+            x: currentDimensionsRef.current.left,
+            y: currentDimensionsRef.current.top
+          });
+        }
+        visibilityProgress.setValue(1);
+      } else {
+        if (mode === "bottomSheet") {
+          bottomSheetTranslateY.setValue(SCREEN.height);
+        }
+        visibilityProgress.setValue(0);
+      }
+      return;
+    }
     if (visible) {
       // Reset position if needed and then open
       bottomSheetTranslateY.setValue(SCREEN.height);
@@ -1148,8 +1203,12 @@ const JsModalComponent = ({
         ...(zIndex !== undefined && {
           zIndex
         })
-      }, (isDragging || isResizing) && styles.floatingModalDragging, customStyles.container, !visible && styles.parkedOffscreen],
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_index2.DraggableHeader, {
+      }, variant === "night" && styles.nightFloatingModal, (isDragging || isResizing) && styles.floatingModalDragging, customStyles.container, !visible && styles.parkedOffscreen],
+      children: [background && variant === "night" ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+        style: styles.nightBackdropFloating,
+        pointerEvents: "none",
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ToolBackground.ToolBackground, {})
+      }) : null, /*#__PURE__*/(0, _jsxRuntime.jsx)(_index2.DraggableHeader, {
         position: floatingPosition,
         onDragStart: handleFloatingDragStart,
         onDragEnd: handleFloatingDragEnd,
@@ -1168,7 +1227,8 @@ const JsModalComponent = ({
           onToggleMode: toggleMode,
           onMinimize: onMinimize ? handleMinimize : undefined,
           isResizing: isDragging || isResizing,
-          mode: mode
+          mode: mode,
+          variant: variant
         })
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
         style: styles.windowControlsContainer,
@@ -1176,11 +1236,12 @@ const JsModalComponent = ({
           onClose: onClose,
           onMinimize: onMinimize ? handleMinimize : undefined,
           onToggleMode: toggleMode,
-          mode: mode
+          mode: mode,
+          variant: variant
         })
       }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-        style: [styles.content, customStyles.content],
-        children: [disableScrollWrapper ?
+        style: [styles.content, variant === "night" && styles.nightContent, customStyles.content],
+        children: [background && variant !== "night" ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_ToolBackground.ToolBackground, {}) : null, disableScrollWrapper ?
         /*#__PURE__*/
         // Render children directly when they manage their own scrolling (FlatList, etc.)
         (0, _jsxRuntime.jsx)(_reactNative.View, {
@@ -1264,30 +1325,36 @@ const JsModalComponent = ({
         }]
       }],
       children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Animated.View, {
-        style: [styles.bottomSheet, customStyles.container, {
+        style: [styles.bottomSheet, variant === "night" && styles.nightBottomSheet, customStyles.container, {
           height: externalAnimatedHeight || animatedBottomPosition
         }],
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(ModalHeader, {
+        children: [background && variant === "night" ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+          style: styles.nightBackdropSheet,
+          pointerEvents: "none",
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ToolBackground.ToolBackground, {})
+        }) : null, /*#__PURE__*/(0, _jsxRuntime.jsx)(ModalHeader, {
           header: header,
           onClose: onClose,
           onToggleMode: toggleMode,
           onMinimize: onMinimize ? handleMinimize : undefined,
           isResizing: isResizing,
           mode: mode,
-          panHandlers: bottomSheetPanResponder.panHandlers
+          panHandlers: bottomSheetPanResponder.panHandlers,
+          variant: variant
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
           style: styles.windowControlsContainer,
           children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_index2.WindowControls, {
             onClose: onClose,
             onMinimize: onMinimize ? handleMinimize : undefined,
             onToggleMode: toggleMode,
-            mode: mode
+            mode: mode,
+            variant: variant
           })
         }), hintLoaded && showHint && mode === "bottomSheet" && !hintsDisabled && /*#__PURE__*/(0, _jsxRuntime.jsx)(_index2.ModalHintBanner, {
           onAcknowledge: handleHintAcknowledge
         }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-          style: [styles.content, customStyles.content],
-          children: [disableScrollWrapper ?
+          style: [styles.content, variant === "night" && styles.nightContent, customStyles.content],
+          children: [background && variant !== "night" ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_ToolBackground.ToolBackground, {}) : null, disableScrollWrapper ?
           /*#__PURE__*/
           // Render children directly when they manage their own scrolling (FlatList, etc.)
           (0, _jsxRuntime.jsx)(_reactNative.View, {
@@ -1407,6 +1474,75 @@ const styles = _reactNative.StyleSheet.create({
     borderBottomWidth: 1,
     borderBottomColor: _index.buoyColors.border
   },
+  // ── Night variant (Everlights sheet — see ui/night/nightTheme.ts) ────────
+  // NO `overflow: "hidden"` on the sheets: Fabric clips children to the
+  // square rect, so the star-field layer's corner painted OVER the rounded
+  // corner (it read as chopped off) — and iOS suppresses a layer's own shadow
+  // when it clips. The backdrop clips itself instead (nightBackdrop* below).
+  nightBottomSheet: {
+    backgroundColor: _nightTheme.night.color.bg,
+    borderTopLeftRadius: _nightTheme.night.radius.sheet,
+    borderTopRightRadius: _nightTheme.night.radius.sheet,
+    borderWidth: _reactNative.StyleSheet.hairlineWidth,
+    borderColor: _nightTheme.night.color.accent + "55",
+    shadowColor: _nightTheme.night.color.accent,
+    shadowOffset: {
+      width: 0,
+      height: -4
+    },
+    shadowOpacity: 0.22,
+    shadowRadius: 10
+  },
+  nightFloatingModal: {
+    backgroundColor: _nightTheme.night.color.bg,
+    borderRadius: _nightTheme.night.radius.sheet,
+    borderWidth: _reactNative.StyleSheet.hairlineWidth,
+    borderColor: _nightTheme.night.color.accent + "55",
+    shadowColor: _nightTheme.night.color.accent,
+    shadowOffset: {
+      width: 0,
+      height: 0
+    },
+    shadowOpacity: 0.22,
+    shadowRadius: 14
+  },
+  /** The header is glass — the sheet-level star field runs through it. */
+  nightHeader: {
+    backgroundColor: "transparent",
+    borderWidth: 0,
+    borderBottomWidth: 0,
+    borderTopLeftRadius: _nightTheme.night.radius.sheet,
+    borderTopRightRadius: _nightTheme.night.radius.sheet
+  },
+  nightContent: {
+    backgroundColor: "transparent"
+  },
+  /**
+   * The hoisted star field clips ITSELF to the sheet's corners (matching
+   * radii + overflow hidden) — see the note on the sheet styles above. It
+   * also keeps scenes that animate outside their own bounds (Hyperspace's
+   * scaled shells) from bleeding past the window.
+   */
+  nightBackdropSheet: {
+    ..._absoluteFill.absoluteFill,
+    borderTopLeftRadius: _nightTheme.night.radius.sheet,
+    borderTopRightRadius: _nightTheme.night.radius.sheet,
+    overflow: "hidden"
+  },
+  nightBackdropFloating: {
+    ..._absoluteFill.absoluteFill,
+    borderRadius: _nightTheme.night.radius.sheet,
+    overflow: "hidden"
+  },
+  /** Neutral Everlights handle instead of the glowing teal bar. */
+  nightDragIndicator: {
+    width: 36,
+    height: 5,
+    borderRadius: 2.5,
+    backgroundColor: _nightTheme.night.color.placeholder,
+    shadowOpacity: 0,
+    elevation: 0
+  },
   floatingHeader: {
     borderTopLeftRadius: 6,
     borderTopRightRadius: 6

package/lib/commonjs/JsModal.web.js

@@ -7,6 +7,8 @@ exports.JsModal = void 0;
 var _react = require("react");
 var _devToolsStorageKeys = require("./storage/devToolsStorageKeys.js");
 var _index = require("./context/index.js");
+var _ToolBackground = require("./ui/backgrounds/ToolBackground.js");
+var _nightTheme = require("./ui/night/nightTheme.js");
 var _jsxRuntime = require("react/jsx-runtime");
 /**
  * JsModal.web — DOM port of JsModal.tsx (React Native).
@@ -78,6 +80,12 @@ var _jsxRuntime = require("react/jsx-runtime");
  * @platform React DOM Web (Vite, Tauri, Capacitor/Ionic, Electron)
  */
 
+// RN component, but safe here: every consumer of the web modal (desktop
+// renderer, website demos) aliases `react-native` to react-native-web, and
+// the backgrounds primitives handle RNW explicitly (see backgrounds/README).
+
+// Pure token module (no react-native import) — safe on web.
+
 // ============================================================================
 // PALETTE — inlined from shared-ui with provenance (RN-only modules on web)
 // ============================================================================
@@ -470,9 +478,11 @@ function WindowControls({
 const DragIndicator = /*#__PURE__*/(0, _react.memo)(function DragIndicator({
   isResizing,
   mode,
-  hasCustomContent = false
+  hasCustomContent = false,
+  variant = "default"
 }) {
   const floating = mode === "floating";
+  const isNight = variant === "night";
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
     style: {
       display: "flex",
@@ -489,12 +499,13 @@ const DragIndicator = /*#__PURE__*/(0, _react.memo)(function DragIndicator({
       style: {
         // native dragIndicator: 40x3 teal bar, radius 2, teal glow
         // (shadowOpacity 0.6, radius 4); floating variant: 50x5 textMuted;
-        // active (isResizing/isDragging): teal, width 40
-        width: isResizing ? 40 : floating ? 50 : 40,
-        height: floating ? 5 : 3,
-        backgroundColor: isResizing ? buoy.primary : floating ? buoy.textMuted : buoy.primary,
-        borderRadius: 2,
-        boxShadow: `0 0 4px ${buoy.primary}99`
+        // active (isResizing/isDragging): teal, width 40.
+        // Night: the neutral 36x5 Everlights handle, no glow, both modes.
+        width: isNight ? 36 : isResizing ? 40 : floating ? 50 : 40,
+        height: isNight ? 5 : floating ? 5 : 3,
+        backgroundColor: isNight ? _nightTheme.night.color.placeholder : isResizing ? buoy.primary : floating ? buoy.textMuted : buoy.primary,
+        borderRadius: isNight ? 2.5 : 2,
+        boxShadow: isNight ? "none" : `0 0 4px ${buoy.primary}99`
       }
     }), isResizing && mode === "bottomSheet" && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
       style: {
@@ -628,7 +639,8 @@ function ModalHeaderContent({
   header,
   isResizing,
   mode,
-  onMinimize
+  onMinimize,
+  variant = "default"
 }) {
   if (header?.customContent) {
     // native (non-CyberpunkModalHeader path): inject onMinimize into the
@@ -651,7 +663,8 @@ function ModalHeaderContent({
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(DragIndicator, {
         isResizing: isResizing,
         mode: mode,
-        hasCustomContent: true
+        hasCustomContent: true,
+        variant: variant
       }), customContent]
     });
   }
@@ -666,7 +679,8 @@ function ModalHeaderContent({
     },
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(DragIndicator, {
       isResizing: isResizing,
-      mode: mode
+      mode: mode,
+      variant: variant
     }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
       style: {
         // native headerContent: paddingHorizontal 16, alignItems center
@@ -743,7 +757,9 @@ const JsModalComponent = ({
   minimizeTargetPosition,
   initialModalState,
   zIndex,
-  disableScrollWrapper = false
+  disableScrollWrapper = false,
+  background = true,
+  variant = "night"
 }) => {
   const [insets] = (0, _react.useState)(readSafeAreaInsets);
   const [isStateLoaded, setIsStateLoaded] = (0, _react.useState)(!enablePersistence);
@@ -1346,9 +1362,23 @@ const JsModalComponent = ({
     }, "hidden");
   }
   const dialogLabel = header?.title || "Dev tool panel";
+  const isNight = variant === "night";
+
+  // Night: the star field fills the whole sheet — header included — instead
+  // of starting under the header band (native parity: hoisted to sheet root).
+  const nightBackdrop = background && isNight ? /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    style: {
+      position: "absolute",
+      inset: 0,
+      pointerEvents: "none"
+    },
+    "aria-hidden": true,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ToolBackground.ToolBackground, {})
+  }) : null;
 
   // Content block shared by both modes — native styles.content:
   // flex 1, bg base #121212, borderBottomRadius 16, overflow hidden.
+  // Night: transparent, so the sheet-level star field shows through.
   const contentBlock = /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
     style: {
       flex: 1,
@@ -1356,13 +1386,13 @@ const JsModalComponent = ({
       position: "relative",
       display: "flex",
       flexDirection: "column",
-      backgroundColor: buoy.base,
+      backgroundColor: isNight ? "transparent" : buoy.base,
       borderBottomLeftRadius: 16,
       borderBottomRightRadius: 16,
       overflow: "hidden",
       ...customStyles.content
     },
-    children: [disableScrollWrapper ?
+    children: [background && !isNight ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_ToolBackground.ToolBackground, {}) : null, disableScrollWrapper ?
     /*#__PURE__*/
     // children manage their own scrolling (native: plain flex View)
     (0, _jsxRuntime.jsx)("div", {
@@ -1437,27 +1467,32 @@ const JsModalComponent = ({
         transform: `translate(${posRef.current.x}px, ${posRef.current.y}px)`,
         display: "flex",
         flexDirection: "column",
-        backgroundColor: buoy.card,
-        borderRadius: 6,
-        border: active ? `2px solid ${buoy.primary}` : `1px solid ${buoy.border}`,
-        boxShadow: active ? `0 0 12px ${buoy.primary}7A` : `0 0 20px ${buoy.primary}4D`,
+        backgroundColor: isNight ? _nightTheme.night.color.bg : buoy.card,
+        borderRadius: isNight ? _nightTheme.night.radius.sheet : 6,
+        border: isNight ? `1px solid ${_nightTheme.night.color.accent}55` : active ? `2px solid ${buoy.primary}` : `1px solid ${buoy.border}`,
+        boxShadow: isNight ? `0 0 14px ${_nightTheme.night.color.accent}38` : active ? `0 0 12px ${buoy.primary}7A` : `0 0 20px ${buoy.primary}4D`,
+        // Night clips the hoisted star field to the rounded window.
+        ...(isNight ? {
+          overflow: "hidden"
+        } : null),
         boxSizing: "border-box",
         // RN borders draw inside the rect
         zIndex: zIndex ?? 1000,
         ...customStyles.container
       },
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      children: [nightBackdrop, /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
         onPointerDown: handleFloatPointerDown,
         onPointerMove: handleFloatPointerMove,
         onPointerUp: handleFloatPointerUp,
         onPointerCancel: handleFloatPointerCancel,
         style: {
-          // native styles.header (+ floatingHeader top radius 6)
-          borderTopLeftRadius: 6,
-          borderTopRightRadius: 6,
-          backgroundColor: buoy.card,
+          // native styles.header (+ floatingHeader top radius 6);
+          // night: transparent glass, no border — the field runs through
+          borderTopLeftRadius: isNight ? _nightTheme.night.radius.sheet : 6,
+          borderTopRightRadius: isNight ? _nightTheme.night.radius.sheet : 6,
+          backgroundColor: isNight ? "transparent" : buoy.card,
           minHeight: 56,
-          border: `1px solid ${buoy.border}`,
+          border: isNight ? "none" : `1px solid ${buoy.border}`,
           boxSizing: "border-box",
           display: "flex",
           flexDirection: "column",
@@ -1465,13 +1500,16 @@ const JsModalComponent = ({
           flexShrink: 0,
           touchAction: "none",
           userSelect: "none",
-          cursor: isDragging ? "grabbing" : "grab" // web-only affordance
+          cursor: isDragging ? "grabbing" : "grab",
+          // web-only affordance
+          position: "relative"
         },
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(ModalHeaderContent, {
           header: header,
           isResizing: isDragging || isResizing,
           mode: mode,
-          onMinimize: onMinimize ? handleMinimize : undefined
+          onMinimize: onMinimize ? handleMinimize : undefined,
+          variant: variant
         })
       }), windowControlsBlock, contentBlock, ["bottomLeft", "bottomRight"].map(corner => /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
         onPointerDown: handleResizePointerDown(corner),
@@ -1533,31 +1571,36 @@ const JsModalComponent = ({
           "aria-label": dialogLabel,
           style: {
             // native bottomSheet: card bg, top radius 6, 1px #333 border,
-            // teal shadow (offset 0/-4, opacity 0.2, radius 12)
+            // teal shadow (offset 0/-4, opacity 0.2, radius 12).
+            // Night: #050505 sheet, top radius 16, hairline accent border.
             height: currentHeightRef.current,
             display: "flex",
             flexDirection: "column",
-            backgroundColor: buoy.card,
-            borderTopLeftRadius: 6,
-            borderTopRightRadius: 6,
-            border: `1px solid ${buoy.border}`,
-            boxShadow: `0 -4px 12px ${buoy.primary}33`,
+            backgroundColor: isNight ? _nightTheme.night.color.bg : buoy.card,
+            borderTopLeftRadius: isNight ? _nightTheme.night.radius.sheet : 6,
+            borderTopRightRadius: isNight ? _nightTheme.night.radius.sheet : 6,
+            border: isNight ? `1px solid ${_nightTheme.night.color.accent}55` : `1px solid ${buoy.border}`,
+            boxShadow: isNight ? `0 -4px 10px ${_nightTheme.night.color.accent}38` : `0 -4px 12px ${buoy.primary}33`,
+            // Night clips the hoisted star field to the rounded sheet.
+            ...(isNight ? {
+              overflow: "hidden"
+            } : null),
             boxSizing: "border-box",
             position: "relative",
             ...customStyles.container
           },
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          children: [nightBackdrop, /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
             onPointerDown: handleSheetPointerDown,
             onPointerMove: handleSheetPointerMove,
             onPointerUp: handleSheetPointerUp,
             onPointerCancel: handleSheetPointerCancel,
             style: {
-              // native styles.header
-              borderTopLeftRadius: 6,
-              borderTopRightRadius: 6,
-              backgroundColor: buoy.card,
+              // native styles.header; night: transparent glass, no border
+              borderTopLeftRadius: isNight ? _nightTheme.night.radius.sheet : 6,
+              borderTopRightRadius: isNight ? _nightTheme.night.radius.sheet : 6,
+              backgroundColor: isNight ? "transparent" : buoy.card,
               minHeight: 56,
-              border: `1px solid ${buoy.border}`,
+              border: isNight ? "none" : `1px solid ${buoy.border}`,
               boxSizing: "border-box",
               display: "flex",
               flexDirection: "column",
@@ -1565,13 +1608,16 @@ const JsModalComponent = ({
               flexShrink: 0,
               touchAction: "none",
               userSelect: "none",
-              cursor: "ns-resize" // web-only affordance
+              cursor: "ns-resize",
+              // web-only affordance
+              position: "relative"
             },
             children: /*#__PURE__*/(0, _jsxRuntime.jsx)(ModalHeaderContent, {
               header: header,
               isResizing: isResizing,
               mode: mode,
-              onMinimize: onMinimize ? handleMinimize : undefined
+              onMinimize: onMinimize ? handleMinimize : undefined,
+              variant: variant
             })
           }), windowControlsBlock, hintLoaded && showHint && !hintsDisabled && /*#__PURE__*/(0, _jsxRuntime.jsx)(ModalHintBanner, {
             onAcknowledge: handleHintAcknowledge

package/lib/commonjs/dataViewer/VirtualizedDataExplorer.js

@@ -8,6 +8,7 @@ var _react = require("react");
 var _reactNative = require("react-native");
 var _displayValue = require("../utils/displayValue.js");
 var _index = require("../ui/gameUI/index.js");
+var _nightTheme = require("../ui/night/nightTheme.js");
 var _CopyButton = require("../ui/components/CopyButton.js");
 var _index2 = require("../icons/index.js");
 var _IndentGuidesOverlay = require("./IndentGuidesOverlay.js");
@@ -57,11 +58,13 @@ const TYPE_COLOR_CACHE = new Map([["string", _index.gameUIColors.dataTypes.strin
 // Pre-computed stable styles with React Query-inspired design
 const STABLE_STYLES = _reactNative.StyleSheet.create({
   container: {
-    backgroundColor: _index.gameUIColors.primary + "08",
-    // bg-white/[0.03]
+    // Night inset panel: darker than the card it sits in, hairline border —
+    // the old white-wash fill (primary+"08") read as a grey slab on the
+    // night surfaces. Global on purpose: every tool is moving to night.
+    backgroundColor: _nightTheme.night.color.bg,
     borderRadius: 8,
     borderWidth: 1,
-    borderColor: _index.gameUIColors.primary + "14" // border-white/[0.08]
+    borderColor: _nightTheme.night.color.border
   },
   header: {
     flexDirection: "column",
@@ -893,7 +896,14 @@ const VirtualizedItemComponent = ({
     style: [STABLE_STYLES.itemContainer, indentStyle],
     children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.TouchableOpacity, {
       "sentry-label": "ignore devtools data explorer item",
-      style: [STABLE_STYLES.itemTouchable, isPressed && STABLE_STYLES.itemTouchablePressed, isSelected && STABLE_STYLES.itemSelected, isLongKey && {
+      style: [STABLE_STYLES.itemTouchable, isPressed && STABLE_STYLES.itemTouchablePressed,
+      // The selected wash exists for the action-bar/edit flow. In a plain
+      // read-only viewer every expand/collapse tap ALSO selects, which
+      // left a permanent grey strip on the last-tapped row (the collapsed
+      // root, usually) — so the wash only paints when selection means
+      // something. selectedId still tracks either way: the indent-guide
+      // depth highlight uses it.
+      canEdit && isSelected && STABLE_STYLES.itemSelected, isLongKey && {
         minHeight: LONG_ITEM_HEIGHT,
         paddingVertical: 2
       }],