@buoy-gg/shared-ui 7.0.25 → 7.0.27

package/lib/module/JsModal.js

@@ -18,6 +18,8 @@ import { absoluteFill } from "./utils/absoluteFill.js";
 import { useSafeAreaInsets } from "./hooks/useSafeAreaInsets.js";
 import { gameUIColors, buoyColors } from "./ui/gameUI/index.js";
 import { DraggableHeader, ModalHintBanner, WindowControls } from "./ui/components/index.js";
+import { ToolBackground } from "./ui/backgrounds/ToolBackground.js";
+import { night } from "./ui/night/nightTheme.js";
 import { persistentStorage } from "./utils/persistentStorage.js";
 import { devToolsStorageKeys } from "./storage/devToolsStorageKeys.js";
 import { useHintsDisabled } from "./context/index.js";
@@ -25,6 +27,21 @@ import { jsx as _jsx, jsxs as _jsxs } from "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 = Dimensions.get("window");
 const MIN_HEIGHT = 100;
 const DEFAULT_HEIGHT = 400;
@@ -92,6 +109,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
  */
@@ -106,12 +132,15 @@ class ModalStorage {
 const DragIndicator = /*#__PURE__*/memo(function DragIndicator({
   isResizing,
   mode,
-  hasCustomContent = false
+  hasCustomContent = false,
+  variant = "default"
 }) {
   return /*#__PURE__*/_jsxs(View, {
     style: [styles.dragIndicatorContainer, hasCustomContent && styles.dragIndicatorContainerCustom],
     children: [/*#__PURE__*/_jsx(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__*/_jsxs(View, {
       style: styles.resizeGripContainer,
       children: [/*#__PURE__*/_jsx(View, {
@@ -151,7 +180,8 @@ const ModalHeader = /*#__PURE__*/memo(function ModalHeader({
   onMinimize,
   isResizing,
   mode,
-  panHandlers
+  panHandlers,
+  variant = "default"
 }) {
   const lastTapRef = useRef(0);
   const tapCountRef = useRef(0);
@@ -230,11 +260,12 @@ const ModalHeader = /*#__PURE__*/memo(function ModalHeader({
       children: [/*#__PURE__*/_jsx(DragIndicator, {
         isResizing: isResizing,
         mode: mode,
-        hasCustomContent: true
+        hasCustomContent: true,
+        variant: variant
       }), customContentWithMinimize]
     });
     return /*#__PURE__*/_jsx(View, {
-      style: styles.header,
+      style: [styles.header, variant === "night" && styles.nightHeader],
       ...headerProps,
       children: shouldHandleTap ? /*#__PURE__*/_jsx(TouchableWithoutFeedback, {
         onPress: handleHeaderTap,
@@ -246,7 +277,8 @@ const ModalHeader = /*#__PURE__*/memo(function ModalHeader({
     style: styles.headerInner,
     children: [/*#__PURE__*/_jsx(DragIndicator, {
       isResizing: isResizing,
-      mode: mode
+      mode: mode,
+      variant: variant
     }), /*#__PURE__*/_jsxs(View, {
       style: styles.headerContent,
       children: [header?.title && /*#__PURE__*/_jsx(Text, {
@@ -265,7 +297,7 @@ const ModalHeader = /*#__PURE__*/memo(function ModalHeader({
     })]
   });
   return /*#__PURE__*/_jsx(View, {
-    style: [styles.header, mode === "floating" && styles.floatingModeHeader],
+    style: [styles.header, mode === "floating" && styles.floatingModeHeader, variant === "night" && styles.nightHeader],
     ...headerProps,
     children: shouldHandleTap ? /*#__PURE__*/_jsx(TouchableWithoutFeedback, {
       onPress: handleHeaderTap,
@@ -338,7 +370,9 @@ const JsModalComponent = ({
   minimizeTargetPosition,
   initialModalState,
   zIndex,
-  disableScrollWrapper = false
+  disableScrollWrapper = false,
+  background = true,
+  variant = "night"
 }) => {
   const insets = useSafeAreaInsets();
   const [isStateLoaded, setIsStateLoaded] = useState(!enablePersistence);
@@ -667,6 +701,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);
@@ -1144,8 +1199,12 @@ const JsModalComponent = ({
         ...(zIndex !== undefined && {
           zIndex
         })
-      }, (isDragging || isResizing) && styles.floatingModalDragging, customStyles.container, !visible && styles.parkedOffscreen],
-      children: [/*#__PURE__*/_jsx(DraggableHeader, {
+      }, variant === "night" && styles.nightFloatingModal, (isDragging || isResizing) && styles.floatingModalDragging, customStyles.container, !visible && styles.parkedOffscreen],
+      children: [background && variant === "night" ? /*#__PURE__*/_jsx(View, {
+        style: styles.nightBackdropFloating,
+        pointerEvents: "none",
+        children: /*#__PURE__*/_jsx(ToolBackground, {})
+      }) : null, /*#__PURE__*/_jsx(DraggableHeader, {
         position: floatingPosition,
         onDragStart: handleFloatingDragStart,
         onDragEnd: handleFloatingDragEnd,
@@ -1164,7 +1223,8 @@ const JsModalComponent = ({
           onToggleMode: toggleMode,
           onMinimize: onMinimize ? handleMinimize : undefined,
           isResizing: isDragging || isResizing,
-          mode: mode
+          mode: mode,
+          variant: variant
         })
       }), /*#__PURE__*/_jsx(View, {
         style: styles.windowControlsContainer,
@@ -1172,11 +1232,12 @@ const JsModalComponent = ({
           onClose: onClose,
           onMinimize: onMinimize ? handleMinimize : undefined,
           onToggleMode: toggleMode,
-          mode: mode
+          mode: mode,
+          variant: variant
         })
       }), /*#__PURE__*/_jsxs(View, {
-        style: [styles.content, customStyles.content],
-        children: [disableScrollWrapper ?
+        style: [styles.content, variant === "night" && styles.nightContent, customStyles.content],
+        children: [background && variant !== "night" ? /*#__PURE__*/_jsx(ToolBackground, {}) : null, disableScrollWrapper ?
         /*#__PURE__*/
         // Render children directly when they manage their own scrolling (FlatList, etc.)
         _jsx(View, {
@@ -1260,30 +1321,36 @@ const JsModalComponent = ({
         }]
       }],
       children: /*#__PURE__*/_jsxs(Animated.View, {
-        style: [styles.bottomSheet, customStyles.container, {
+        style: [styles.bottomSheet, variant === "night" && styles.nightBottomSheet, customStyles.container, {
           height: externalAnimatedHeight || animatedBottomPosition
         }],
-        children: [/*#__PURE__*/_jsx(ModalHeader, {
+        children: [background && variant === "night" ? /*#__PURE__*/_jsx(View, {
+          style: styles.nightBackdropSheet,
+          pointerEvents: "none",
+          children: /*#__PURE__*/_jsx(ToolBackground, {})
+        }) : null, /*#__PURE__*/_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__*/_jsx(View, {
           style: styles.windowControlsContainer,
           children: /*#__PURE__*/_jsx(WindowControls, {
             onClose: onClose,
             onMinimize: onMinimize ? handleMinimize : undefined,
             onToggleMode: toggleMode,
-            mode: mode
+            mode: mode,
+            variant: variant
           })
         }), hintLoaded && showHint && mode === "bottomSheet" && !hintsDisabled && /*#__PURE__*/_jsx(ModalHintBanner, {
           onAcknowledge: handleHintAcknowledge
         }), /*#__PURE__*/_jsxs(View, {
-          style: [styles.content, customStyles.content],
-          children: [disableScrollWrapper ?
+          style: [styles.content, variant === "night" && styles.nightContent, customStyles.content],
+          children: [background && variant !== "night" ? /*#__PURE__*/_jsx(ToolBackground, {}) : null, disableScrollWrapper ?
           /*#__PURE__*/
           // Render children directly when they manage their own scrolling (FlatList, etc.)
           _jsx(View, {
@@ -1403,6 +1470,75 @@ const styles = StyleSheet.create({
     borderBottomWidth: 1,
     borderBottomColor: 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: night.color.bg,
+    borderTopLeftRadius: night.radius.sheet,
+    borderTopRightRadius: night.radius.sheet,
+    borderWidth: StyleSheet.hairlineWidth,
+    borderColor: night.color.accent + "55",
+    shadowColor: night.color.accent,
+    shadowOffset: {
+      width: 0,
+      height: -4
+    },
+    shadowOpacity: 0.22,
+    shadowRadius: 10
+  },
+  nightFloatingModal: {
+    backgroundColor: night.color.bg,
+    borderRadius: night.radius.sheet,
+    borderWidth: StyleSheet.hairlineWidth,
+    borderColor: night.color.accent + "55",
+    shadowColor: 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: night.radius.sheet,
+    borderTopRightRadius: 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,
+    borderTopLeftRadius: night.radius.sheet,
+    borderTopRightRadius: night.radius.sheet,
+    overflow: "hidden"
+  },
+  nightBackdropFloating: {
+    ...absoluteFill,
+    borderRadius: night.radius.sheet,
+    overflow: "hidden"
+  },
+  /** Neutral Everlights handle instead of the glowing teal bar. */
+  nightDragIndicator: {
+    width: 36,
+    height: 5,
+    borderRadius: 2.5,
+    backgroundColor: night.color.placeholder,
+    shadowOpacity: 0,
+    elevation: 0
+  },
   floatingHeader: {
     borderTopLeftRadius: 6,
     borderTopRightRadius: 6

package/lib/module/JsModal.web.js

@@ -73,6 +73,12 @@
 import { useState, useRef, useEffect, useLayoutEffect, useCallback, memo, isValidElement, cloneElement } from "react";
 import { devToolsStorageKeys } from "./storage/devToolsStorageKeys.js";
 import { useHintsDisabled } from "./context/index.js";
+// 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).
+import { ToolBackground } from "./ui/backgrounds/ToolBackground.js";
+// Pure token module (no react-native import) — safe on web.
+import { night } from "./ui/night/nightTheme.js";
 
 // ============================================================================
 // PALETTE — inlined from shared-ui with provenance (RN-only modules on web)
@@ -468,9 +474,11 @@ function WindowControls({
 const DragIndicator = /*#__PURE__*/memo(function DragIndicator({
   isResizing,
   mode,
-  hasCustomContent = false
+  hasCustomContent = false,
+  variant = "default"
 }) {
   const floating = mode === "floating";
+  const isNight = variant === "night";
   return /*#__PURE__*/_jsxs("div", {
     style: {
       display: "flex",
@@ -487,12 +495,13 @@ const DragIndicator = /*#__PURE__*/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 ? 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__*/_jsx("div", {
       style: {
@@ -626,7 +635,8 @@ function ModalHeaderContent({
   header,
   isResizing,
   mode,
-  onMinimize
+  onMinimize,
+  variant = "default"
 }) {
   if (header?.customContent) {
     // native (non-CyberpunkModalHeader path): inject onMinimize into the
@@ -649,7 +659,8 @@ function ModalHeaderContent({
       children: [/*#__PURE__*/_jsx(DragIndicator, {
         isResizing: isResizing,
         mode: mode,
-        hasCustomContent: true
+        hasCustomContent: true,
+        variant: variant
       }), customContent]
     });
   }
@@ -664,7 +675,8 @@ function ModalHeaderContent({
     },
     children: [/*#__PURE__*/_jsx(DragIndicator, {
       isResizing: isResizing,
-      mode: mode
+      mode: mode,
+      variant: variant
     }), /*#__PURE__*/_jsxs("div", {
       style: {
         // native headerContent: paddingHorizontal 16, alignItems center
@@ -741,7 +753,9 @@ const JsModalComponent = ({
   minimizeTargetPosition,
   initialModalState,
   zIndex,
-  disableScrollWrapper = false
+  disableScrollWrapper = false,
+  background = true,
+  variant = "night"
 }) => {
   const [insets] = useState(readSafeAreaInsets);
   const [isStateLoaded, setIsStateLoaded] = useState(!enablePersistence);
@@ -1344,9 +1358,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__*/_jsx("div", {
+    style: {
+      position: "absolute",
+      inset: 0,
+      pointerEvents: "none"
+    },
+    "aria-hidden": true,
+    children: /*#__PURE__*/_jsx(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__*/_jsxs("div", {
     style: {
       flex: 1,
@@ -1354,13 +1382,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__*/_jsx(ToolBackground, {}) : null, disableScrollWrapper ?
     /*#__PURE__*/
     // children manage their own scrolling (native: plain flex View)
     _jsx("div", {
@@ -1435,27 +1463,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 ? night.color.bg : buoy.card,
+        borderRadius: isNight ? night.radius.sheet : 6,
+        border: isNight ? `1px solid ${night.color.accent}55` : active ? `2px solid ${buoy.primary}` : `1px solid ${buoy.border}`,
+        boxShadow: isNight ? `0 0 14px ${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__*/_jsx("div", {
+      children: [nightBackdrop, /*#__PURE__*/_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 ? night.radius.sheet : 6,
+          borderTopRightRadius: isNight ? 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",
@@ -1463,13 +1496,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__*/_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__*/_jsx("div", {
         onPointerDown: handleResizePointerDown(corner),
@@ -1531,31 +1567,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 ? night.color.bg : buoy.card,
+            borderTopLeftRadius: isNight ? night.radius.sheet : 6,
+            borderTopRightRadius: isNight ? night.radius.sheet : 6,
+            border: isNight ? `1px solid ${night.color.accent}55` : `1px solid ${buoy.border}`,
+            boxShadow: isNight ? `0 -4px 10px ${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__*/_jsx("div", {
+          children: [nightBackdrop, /*#__PURE__*/_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 ? night.radius.sheet : 6,
+              borderTopRightRadius: isNight ? 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",
@@ -1563,13 +1604,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__*/_jsx(ModalHeaderContent, {
               header: header,
               isResizing: isResizing,
               mode: mode,
-              onMinimize: onMinimize ? handleMinimize : undefined
+              onMinimize: onMinimize ? handleMinimize : undefined,
+              variant: variant
             })
           }), windowControlsBlock, hintLoaded && showHint && !hintsDisabled && /*#__PURE__*/_jsx(ModalHintBanner, {
             onAcknowledge: handleHintAcknowledge

package/lib/module/dataViewer/VirtualizedDataExplorer.js

@@ -4,6 +4,7 @@ import { useState, useMemo, useCallback, useRef, useEffect, memo } from "react";
 import { Text, TouchableOpacity, View, StyleSheet, FlatList } from "react-native";
 import { displayValue } from "../utils/displayValue.js";
 import { gameUIColors } from "../ui/gameUI/index.js";
+import { night } from "../ui/night/nightTheme.js";
 import { CopyButton } from "../ui/components/CopyButton.js";
 import { ChevronRight } from "../icons/index.js";
 import { IndentGuidesOverlay } from "./IndentGuidesOverlay.js";
@@ -53,11 +54,13 @@ const TYPE_COLOR_CACHE = new Map([["string", gameUIColors.dataTypes.string], ["n
 // Pre-computed stable styles with React Query-inspired design
 const STABLE_STYLES = StyleSheet.create({
   container: {
-    backgroundColor: 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: night.color.bg,
     borderRadius: 8,
     borderWidth: 1,
-    borderColor: gameUIColors.primary + "14" // border-white/[0.08]
+    borderColor: night.color.border
   },
   header: {
     flexDirection: "column",
@@ -889,7 +892,14 @@ const VirtualizedItemComponent = ({
     style: [STABLE_STYLES.itemContainer, indentStyle],
     children: [/*#__PURE__*/_jsxs(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
       }],

package/lib/module/dataViewer/diffThemes.js

@@ -48,17 +48,19 @@ export const gitClassicTheme = {
 
 /**
  * Dev Tools Default Theme
- * Clean dark theme matching Buoy website brand colors
+ * The night theme (ui/night) — near-black surfaces, hairline borders. Diff
+ * DATA colors (added green / removed red / modified purple) are semantic and
+ * deliberately unchanged.
  */
 export const devToolsDefaultTheme = {
   name: "Dev Tools Default",
-  description: "Clean dark theme with Buoy brand colors",
-  // Surface colors (matching website dark theme)
-  background: "#121212",
-  panelBackground: "#1A1A1A",
-  headerBackground: "#1A1A1A",
+  description: "The Buoy night theme",
+  // Night surfaces
+  background: "#050505",
+  panelBackground: "#0C0C0C",
+  headerBackground: "#0C0C0C",
   // Diff colors using website's semantic colors
-  // Added: Primary teal (#20C997)
+  // Added: Primary green (#20C997)
   // Removed: Error red (#EF4444)
   // Modified: Secondary purple (#9B70E0)
   addedBackground: "rgba(32, 201, 151, 0.12)",
@@ -70,32 +72,32 @@ export const devToolsDefaultTheme = {
   addedText: "#20C997",
   removedText: "#EF4444",
   modifiedText: "#9B70E0",
-  unchangedText: "#E0E0E0",
+  unchangedText: "#ECEDEE",
   // Word-level highlights
   addedWordHighlight: "rgba(32, 201, 151, 0.3)",
   removedWordHighlight: "rgba(239, 68, 68, 0.3)",
   // UI elements
-  lineNumberBackground: "#121212",
-  lineNumberText: "#A0A0A0",
-  lineNumberBorder: "#333333",
+  lineNumberBackground: "#050505",
+  lineNumberText: "#9BA1A6",
+  lineNumberBorder: "#1A1A1C",
   // Markers
   markerAddedBackground: "rgba(32, 201, 151, 0.2)",
   markerRemovedBackground: "rgba(239, 68, 68, 0.2)",
   markerModifiedBackground: "rgba(155, 112, 224, 0.2)",
-  markerText: "#A0A0A0",
+  markerText: "#9BA1A6",
   // Borders and dividers
-  borderColor: "#333333",
-  dividerColor: "#333333",
+  borderColor: "#1A1A1C",
+  dividerColor: "#1A1A1C",
   // Summary bar
-  summaryBackground: "#1A1A1A",
+  summaryBackground: "#0C0C0C",
   summaryAddedText: "#20C997",
   summaryRemovedText: "#EF4444",
   summaryModifiedText: "#9B70E0",
   // Empty state
-  emptyStateText: "#888888",
+  emptyStateText: "#636366",
   // Separator
-  separatorBackground: "#1A1A1A",
-  separatorText: "#A0A0A0"
+  separatorBackground: "#0C0C0C",
+  separatorText: "#9BA1A6"
 };
 
 /**