@buoy-gg/shared-ui 7.0.27 → 7.0.29

package/lib/commonjs/ui/gameUI/constants/gameUIColors.js

@@ -206,13 +206,17 @@ const buoyColors = exports.buoyColors = {
   // Red
   info: "#00B8E6" // Cyan for info/devices
 };
-// Fixed dial colors for cyberpunk theme
+/**
+ * LEGACY copy of the dial palette — the source of truth is `dialColors` in
+ * @buoy-gg/floating-tools-core (`src/dial.ts`); keep the two in sync.
+ * Values mirror the night theme (see `ui/night/nightTheme.ts`).
+ */
 const dialColors = exports.dialColors = {
-  dialBackground: gameUIColors.pureBlack,
-  dialGradient1: `${gameUIColors.info}10`,
-  dialGradient2: `${gameUIColors.info}08`,
-  dialGradient3: `${gameUIColors.info}15`,
-  dialBorder: `${gameUIColors.info}40`,
-  dialShadow: gameUIColors.info,
-  dialGridLine: `${gameUIColors.info}26`
+  dialBackground: "#050505",
+  dialGradient1: "rgba(255, 255, 255, 0.05)",
+  dialGradient2: "rgba(255, 255, 255, 0.03)",
+  dialGradient3: "rgba(255, 255, 255, 0.06)",
+  dialBorder: "rgba(255, 255, 255, 0.12)",
+  dialShadow: "#000000",
+  dialGridLine: "rgba(255, 255, 255, 0.08)"
 };

package/lib/module/JsModal.js

@@ -494,6 +494,16 @@ const JsModalComponent = ({
     }
   }, []);
 
+  // Parents routinely pass an inline `onModeChange` (a new identity every
+  // render). The persisted-state load below is mount/key-scoped — if the
+  // callback identity re-triggered it, every parent re-render would reload
+  // the OLD persisted mode and stomp a live toggleMode() before the 500ms
+  // save debounce could write the new one (mode flipped to floating, then
+  // snapped back ~50ms later). So the callback rides in a ref instead of
+  // the dependency list.
+  const onModeChangeRef = useRef(onModeChange);
+  onModeChangeRef.current = onModeChange;
+
   // Load persisted state on mount
   useEffect(() => {
     if (!enablePersistence || !persistenceKey) {
@@ -508,7 +518,7 @@ const JsModalComponent = ({
         if (savedState.mode) {
           setMode(savedState.mode);
           // Notify parent of loaded mode
-          onModeChange?.(savedState.mode);
+          onModeChangeRef.current?.(savedState.mode);
         }
 
         // Restore bottom sheet height
@@ -535,7 +545,7 @@ const JsModalComponent = ({
     return () => {
       mounted = false;
     };
-  }, [persistenceKey, enablePersistence, onModeChange, animatedBottomPosition, animatedFloatingHeight, animatedWidth, floatingPosition]);
+  }, [persistenceKey, enablePersistence, animatedBottomPosition, animatedFloatingHeight, animatedWidth, floatingPosition]);
 
   // Cleanup on unmount
   useEffect(() => {

package/lib/module/dataViewer/DataTreeActionDock.js

@@ -82,6 +82,7 @@ function Tile({
   const color = danger && enabled ? T.dangerText : T.tileIcon;
   return /*#__PURE__*/_jsxs(TouchableOpacity, {
     "sentry-label": "ignore devtools tree action",
+    testID: `buoy-tree-action-${id}`,
     accessibilityLabel: label,
     accessibilityState: {
       disabled: !enabled

package/lib/module/dataViewer/DataViewer.js

@@ -27,7 +27,8 @@ export const DataViewer = ({
   onRequestInlineEdit,
   inlineEditPath,
   renderInlineEditor,
-  selectPath
+  selectPath,
+  testIDPrefix
 }) => {
   const [activeFilter, setActiveFilter] = useState(null);
 
@@ -109,7 +110,8 @@ export const DataViewer = ({
         maxDepth: maxDepth,
         rawMode: rawMode,
         initialExpanded: initialExpanded,
-        disableCopy: disableCopy
+        disableCopy: disableCopy,
+        testIDPrefix: testIDPrefix
       });
     }
 
@@ -125,7 +127,8 @@ export const DataViewer = ({
       onRequestInlineEdit: onRequestInlineEdit,
       inlineEditPath: inlineEditPath,
       renderInlineEditor: renderInlineEditor,
-      selectPath: selectPath
+      selectPath: selectPath,
+      testIDPrefix: testIDPrefix
     });
   };
   return /*#__PURE__*/_jsxs(View, {

package/lib/module/dataViewer/VirtualizedDataExplorer.js

@@ -822,7 +822,8 @@ const VirtualizedItemComponent = ({
   selectable,
   onRequestInlineEdit,
   isInlineEditing,
-  inlineEditor
+  inlineEditor,
+  testIDPrefix
 }) => {
   const [isPressed, setIsPressed] = useState(false);
   const [showFullKey, setShowFullKey] = useState(false);
@@ -891,7 +892,13 @@ const VirtualizedItemComponent = ({
   return /*#__PURE__*/_jsxs(View, {
     style: [STABLE_STYLES.itemContainer, indentStyle],
     children: [/*#__PURE__*/_jsxs(TouchableOpacity, {
-      "sentry-label": "ignore devtools data explorer item",
+      "sentry-label": "ignore devtools data explorer item"
+      // `item.id` is the dotted path from the root ("root.settings.theme"),
+      // so this handle addresses a NODE rather than a list position — stable
+      // across expand/collapse and across re-renders.
+      ,
+      testID: `${testIDPrefix}-${item.id}`,
+      accessibilityLabel: `${item.key}: ${item.valueType}`,
       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
@@ -966,7 +973,8 @@ export const VirtualizedDataExplorer = ({
   onRequestInlineEdit,
   inlineEditPath,
   renderInlineEditor,
-  selectPath
+  selectPath,
+  testIDPrefix = "buoy-tree-row"
 }) => {
   const [isExpanded, setIsExpanded] = useState(rawMode); // Auto-expand in raw mode
   const {
@@ -1082,7 +1090,8 @@ export const VirtualizedDataExplorer = ({
     selectable: onSelectionChange != null,
     onRequestInlineEdit: handleRequestInlineEdit,
     isInlineEditing: inlineEditPath != null && inlineEditPath.join(".") === item.path.slice(1).join("."),
-    inlineEditor: renderInlineEditor ? renderInlineEditor(selectionOf(item)) : null
+    inlineEditor: renderInlineEditor ? renderInlineEditor(selectionOf(item)) : null,
+    testIDPrefix: testIDPrefix
   });
 
   // Uniform row height for crisp guide geometry

package/lib/module/hooks/safe-area-impl.js

@@ -3,7 +3,7 @@
 /**
  * Auto-generated safe area implementation
  * Detected: none
- * Generated at: 2026-08-21T01:33:44.897Z
+ * Generated at: 2026-08-24T19:34:02.929Z
  *
  * DO NOT EDIT - This file is generated by scripts/detect-safe-area.js
  *

package/lib/module/license/FeatureGate.js

@@ -379,11 +379,20 @@ export const UpgradeModal = ({
           style: styles.modalContent,
           activeOpacity: 1,
           onPress: () => {} // Prevent overlay dismiss when tapping content
+          // The handle a test needs to say a Pro gate did NOT fire. Without
+          // it "the action worked" and "the upsell appeared over it" are
+          // told apart only by what happened next, which is exactly the
+          // assertion that was supposed to be the proof.
           ,
+          testID: "buoy-upgrade-modal",
+          accessibilityLabel: `Unlock ${featureName}`,
           children: [/*#__PURE__*/_jsx(TouchableOpacity, {
             style: styles.modalCloseButton,
             onPress: onClose,
             activeOpacity: 0.7,
+            testID: "buoy-upgrade-modal-close",
+            accessibilityRole: "button",
+            accessibilityLabel: "Close upgrade prompt",
             children: /*#__PURE__*/_jsx(X, {
               size: 18,
               color: buoyColors.textMuted

package/lib/module/ui/backgrounds/registry.js

@@ -25,9 +25,10 @@ export const BACKGROUND_PRESETS = [{
   id: "deepfield",
   label: "Deep Field",
   blurb: "The Everlights field — 160 stars, with meteors slamming the walls",
-  // The old standalone Meteors preset folded in: +2 meteor loops, ~50 views.
+  // The old standalone Meteors preset folded in: +2 meteor loops, ~55 views
+  // (streak + flash + the pop's 6 rays and ~3 embers per impact).
   nodes: 24,
-  views: 510,
+  views: 515,
   Component: DeepField
 }, {
   id: "hyperspace",

package/lib/module/ui/backgrounds/variants/meteors.js

@@ -4,12 +4,28 @@
  * MeteorShower — shooting stars that slam into the walls.
  *
  * Each meteor streaks in from off-screen, hits an EDGE of the surface, and
- * bursts: a flash, an expanding shockwave ring (half-clipped by the wall,
- * which is what sells the impact), and a handful of sparks ricocheting back
- * into the room. The whole life cycle — parked invisible, streak, impact,
- * decay — is keyframed into interpolate stops on ONE plain native loop per
- * meteor; `Animated.sequence([timing, loop])` silently fails to drive
- * natively, so nothing here sequences.
+ * blows out like a firework: a flash, then a fan of streak RAYS that shoot
+ * back into the room — each ray grows out of the impact point while its tail
+ * chases the head, so it reads as a burning trail rather than a ring — with
+ * ember dots at the tips that decelerate, droop under gravity and gutter out.
+ * The whole life cycle — parked invisible, streak, impact, decay — is
+ * keyframed into interpolate stops on ONE plain native loop per meteor;
+ * `Animated.sequence([timing, loop])` silently fails to drive natively, so
+ * nothing here sequences.
+ *
+ * Each meteor also rolls WHAT IT'S MADE OF once per mount — a weighted draw
+ * over the real emission-line palette (sodium orange-yellow, iron yellow,
+ * magnesium blue-green, calcium violet, shocked atmospheric N₂/O₂ red,
+ * ionized-air blue-white) — and that mineral tints streak, trail, flash,
+ * rays and embers as one. See `MINERALS`.
+ *
+ * The ray trick, since there is no `transformOrigin`: a bar of full length
+ * `dist` is CENTERED on the impact point, rotated to its heading, then driven
+ * with `[{rotate}, {translateX}, {scaleX}]`. Rotate is outermost, so the
+ * translate runs along the ray's own axis; scaleX squashes about the bar's
+ * center, and translating by the midpoint of (head, tail) while scaling by
+ * (head − tail) puts the visible segment exactly between the two — a line
+ * growing out of the burst with both endpoints scripted.
  *
  * This used to be a standalone "Meteors" preset with its own 40-star sky;
  * that scene was folded into Deep Field (which supplies the far better sky),
@@ -20,16 +36,16 @@
  * `transformOrigin`.
  */
 
-import { memo } from "react";
+import { memo, useState } from "react";
 import { Animated, View } from "react-native";
 import { absoluteFill } from "../../../utils/absoluteFill.js";
 import { RadialGlow, useLoop } from "../primitives.js";
-import { withAlpha } from "../rng.js";
+import { mulberry32, withAlpha } from "../rng.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /**
  * `to` is ON a wall — that's the impact point. `sparkArc` is the hemisphere
- * (in degrees) sparks scatter into, pointed back away from the wall the
- * meteor just hit. Different periods keep the two impacts from syncing up.
+ * (in degrees) the firework rays fan into, pointed back away from the wall
+ * the meteor just hit. Different periods keep the two impacts from syncing up.
  */
 const METEORS = [{
   from: [0.08, -0.06],
@@ -44,8 +60,112 @@ const METEORS = [{
   window: [0.56, 0.66],
   sparkArc: [-70, 70] // left wall → sparks fly right
 }];
-const SPARKS_PER_IMPACT = 6;
-const SHOCKWAVE_DIA = 92;
+const RAYS_PER_IMPACT = 6;
+
+/**
+ * Real meteor color comes from what's burning. The dominant visible emission
+ * lines are sodium (orange-yellow), iron (yellow) and magnesium (blue-green);
+ * calcium-rich rock flares violet, and the shocked ATMOSPHERE itself — the
+ * excited nitrogen/oxygen sheath around the meteoroid — glows red. Faint fast
+ * meteors mostly show the blue-white of ionized air. The weights lean the
+ * same way the sky does: yellows and oranges common, teal frequent, red
+ * occasional, violet the rare treat.
+ */
+
+const MINERALS = [{
+  name: "sodium",
+  weight: 26,
+  head: "#FFF3DC",
+  glow: "#FFDCA8",
+  trail: "#FFCB85",
+  rays: ["#FFE8C2", "#FFCB85", "#F0B45E"]
+}, {
+  name: "iron",
+  weight: 24,
+  head: "#FFF9E3",
+  glow: "#FFEDAE",
+  trail: "#F2DC8A",
+  rays: ["#FBF0C0", "#F2DC8A", "#E3C868"]
+}, {
+  name: "magnesium",
+  weight: 20,
+  head: "#EAFFF9",
+  glow: "#ACF0DE",
+  trail: "#82E3CA",
+  rays: ["#D3FAEF", "#82E3CA", "#5FD6BC"]
+}, {
+  // Not a mineral at all — ionized air, the old blue-white default.
+  name: "ionized-air",
+  weight: 14,
+  head: "#F5F9FF",
+  glow: "#E5EEFC",
+  trail: "#C9D9F0",
+  rays: ["#F5F9FF", "#DCE9FF", "#BBE5FA"]
+}, {
+  // Also atmospheric: nitrogen/oxygen shocked red-hot in the sheath.
+  name: "nitrogen-oxygen",
+  weight: 10,
+  head: "#FFEAE5",
+  glow: "#FFB4A6",
+  trail: "#FF917E",
+  rays: ["#FFCFC6", "#FF917E", "#F27461"]
+}, {
+  name: "calcium",
+  weight: 6,
+  head: "#F6EEFF",
+  glow: "#DCC2FF",
+  trail: "#C29BF7",
+  rays: ["#EADCFF", "#C29BF7", "#AB7EEC"]
+}];
+const MINERAL_WEIGHT = MINERALS.reduce((sum, m) => sum + m.weight, 0);
+
+/**
+ * Weighted draw — `Math.random` ON PURPOSE, unlike the seeded burst geometry:
+ * each meteor rolls its make-up once per mount, so every session's sky burns
+ * a different mix while the animation itself stays deterministic.
+ */
+function pickMineral() {
+  let r = Math.random() * MINERAL_WEIGHT;
+  for (const m of MINERALS) {
+    r -= m.weight;
+    if (r <= 0) return m;
+  }
+  return MINERALS[0];
+}
+/**
+ * The firework: a deterministic fan of rays per impact, seeded so both
+ * platforms (and every reload) burst identically. Angles are stratified
+ * across the arc with jitter, so the fan covers it without reading as a
+ * perfect star; reach, thickness and stagger vary per ray so it reads as
+ * debris blowing out, not a rigid spoke wheel.
+ */
+function buildBurst(index) {
+  const m = METEORS[index];
+  const rnd = mulberry32((0xb1a57 ^ index) >>> 0);
+  const [a0, a1] = m.sparkArc;
+  const rays = [];
+  for (let i = 0; i < RAYS_PER_IMPACT; i++) {
+    const frac = (i + 0.5) / RAYS_PER_IMPACT;
+    const jitter = (rnd() - 0.5) * 0.7 / RAYS_PER_IMPACT;
+    const deg = a0 + (a1 - a0) * (frac + jitter);
+    // Small on purpose — a game-sprite pop, not a fireworks display: rays
+    // reach 10–22px, a hair over 1px thick, and the whole thing is over in a
+    // few frames.
+    rays.push({
+      rad: deg * Math.PI / 180,
+      dist: 10 + rnd() * 12,
+      thick: 1 + rnd() * 0.5,
+      delay: rnd() * 0.008,
+      grow: 0.03 + rnd() * 0.015,
+      ember: rnd() > 0.5,
+      emberDrop: 2 + rnd() * 3,
+      emberDrift: 1 + rnd() * 3,
+      emberDia: 1.2 + rnd() * 0.6
+    });
+  }
+  return rays;
+}
+const BURSTS = METEORS.map((_, i) => buildBurst(i));
 const Meteor = /*#__PURE__*/memo(function Meteor({
   index,
   width,
@@ -53,6 +173,8 @@ const Meteor = /*#__PURE__*/memo(function Meteor({
   animated
 }) {
   const m = METEORS[index];
+  // What this meteor is made of — rolled once per mount, held for its life.
+  const [mineral] = useState(pickMineral);
   const t = useLoop(m.periodMs, animated);
   const [a, b] = m.window;
   const x0 = m.from[0] * width;
@@ -92,12 +214,12 @@ const Meteor = /*#__PURE__*/memo(function Meteor({
         width: d,
         height: d,
         borderRadius: d / 2,
-        backgroundColor: withAlpha("#C9D9F0", 0.68 - i * 0.08)
+        backgroundColor: withAlpha(mineral.trail, 0.68 - i * 0.08)
       }
     }, i));
   }
 
-  // --- The impact ---------------------------------------------------------
+  // --- The impact: firework blow-out --------------------------------------
   // Everything below reads the SAME loop value; the burst simply lives in the
   // slice of the timeline right after the streak arrives at the wall.
   const flashOpacity = t.interpolate({
@@ -105,56 +227,94 @@ const Meteor = /*#__PURE__*/memo(function Meteor({
     outputRange: [0, 0, 1, 0, 0]
   });
   const flashScale = t.interpolate({
-    inputRange: [0, b, Math.min(b + 0.07, 0.999), 1],
-    outputRange: [0.4, 0.4, 1.4, 1.4]
-  });
-  const waveOpacity = t.interpolate({
-    inputRange: [0, b, Math.min(b + 0.02, 0.999), Math.min(b + 0.11, 0.9995), 1],
-    outputRange: [0, 0, 0.85, 0, 0]
-  });
-  const waveScale = t.interpolate({
-    inputRange: [0, b, Math.min(b + 0.11, 0.999), 1],
-    outputRange: [0.12, 0.12, 1, 1]
+    inputRange: [0, b, Math.min(b + 0.05, 0.999), 1],
+    outputRange: [0.5, 0.5, 1.05, 1.05]
   });
-  const sparks = [];
-  for (let i = 0; i < SPARKS_PER_IMPACT; i++) {
-    // Deterministic fan across the arc, alternating reach so the burst reads
-    // as debris rather than a perfect star.
-    const frac = i / (SPARKS_PER_IMPACT - 1);
-    const deg = m.sparkArc[0] + (m.sparkArc[1] - m.sparkArc[0]) * frac;
-    const rad = deg * Math.PI / 180;
-    const dist = 30 + i % 3 * 14;
-    const sx = t.interpolate({
-      inputRange: [0, b, Math.min(b + 0.09, 0.999), 1],
-      outputRange: [0, 0, Math.cos(rad) * dist, Math.cos(rad) * dist]
+  const rays = [];
+  const embers = [];
+  const burst = BURSTS[index];
+  for (let i = 0; i < burst.length; i++) {
+    const r = burst[i];
+    // The ray's timeline: head races out over `grow`, the tail leaves the
+    // impact point once the head is under way and catches it shortly after —
+    // the segment between them is the burning trail.
+    const t0 = b + r.delay;
+    const k1 = t0 + r.grow * 0.5; // head at 75%, tail just leaving
+    const k2 = t0 + r.grow; // head at full reach, tail halfway
+    const k3 = k2 + 0.035; // tail catches the head — ray gone
+    // Segment endpoints head/tail (fractions of dist):
+    //   t0 → 0/0,  k1 → 0.75/0.1,  k2 → 1/0.5,  k3 → 1/1
+    // scaleX = head − tail, translateX = dist · (head + tail)/2.
+    const len = t.interpolate({
+      inputRange: [0, t0, k1, k2, k3, 1],
+      outputRange: [0, 0, 0.65, 0.5, 0, 0]
     });
-    const sy = t.interpolate({
-      inputRange: [0, b, Math.min(b + 0.09, 0.999), 1],
-      outputRange: [0, 0, Math.sin(rad) * dist, Math.sin(rad) * dist]
+    const mid = t.interpolate({
+      inputRange: [0, t0, k1, k2, k3, 1],
+      outputRange: [0, 0, r.dist * 0.425, r.dist * 0.75, r.dist, r.dist]
     });
-    const so = t.interpolate({
-      inputRange: [0, b, Math.min(b + 0.02, 0.999), Math.min(b + 0.09, 0.9995), 1],
-      outputRange: [0, 0, 0.9, 0, 0]
+    const rayOpacity = t.interpolate({
+      inputRange: [0, t0, t0 + 0.006, k2, k3, 1],
+      outputRange: [0, 0, 0.85, 0.7, 0, 0]
     });
-    const d = 2.2 - i % 3 * 0.4;
-    sparks.push(/*#__PURE__*/_jsx(Animated.View, {
+    rays.push(/*#__PURE__*/_jsx(Animated.View, {
       style: {
         position: "absolute",
-        left: x1 - d / 2,
-        top: y1 - d / 2,
-        width: d,
-        height: d,
-        borderRadius: d / 2,
-        backgroundColor: withAlpha("#E5EEFC", 1),
-        opacity: so,
+        left: x1 - r.dist / 2,
+        top: y1 - r.thick / 2,
+        width: r.dist,
+        height: r.thick,
+        borderRadius: r.thick / 2,
+        backgroundColor: withAlpha(mineral.rays[i % mineral.rays.length], 0.8),
+        opacity: rayOpacity,
+        // Rotate is OUTERMOST, so the translate runs along the ray's own
+        // axis — see the header note on faking a transform origin.
         transform: [{
-          translateX: sx
+          rotate: `${r.rad * 180 / Math.PI}deg`
         }, {
-          translateY: sy
+          translateX: mid
+        }, {
+          scaleX: len
         }]
       },
       pointerEvents: "none"
-    }, i));
+    }, `ray-${i}`));
+    if (!r.ember) continue;
+    // The ember rides the ray's head, then keeps coasting a touch further
+    // while gravity drags it DOWN in world space, guttering out last.
+    const e3 = k3 + 0.04;
+    const cos = Math.cos(r.rad);
+    const sin = Math.sin(r.rad);
+    const ex = t.interpolate({
+      inputRange: [0, t0, k1, k2, e3, 1],
+      outputRange: [0, 0, cos * r.dist * 0.75, cos * r.dist, cos * (r.dist + r.emberDrift), cos * (r.dist + r.emberDrift)]
+    });
+    const ey = t.interpolate({
+      inputRange: [0, t0, k1, k2, e3, 1],
+      outputRange: [0, 0, sin * r.dist * 0.75, sin * r.dist, sin * (r.dist + r.emberDrift) + r.emberDrop, sin * (r.dist + r.emberDrift) + r.emberDrop]
+    });
+    const eo = t.interpolate({
+      inputRange: [0, t0, k1, k2, e3, 1],
+      outputRange: [0, 0, 0.8, 0.65, 0, 0]
+    });
+    embers.push(/*#__PURE__*/_jsx(Animated.View, {
+      style: {
+        position: "absolute",
+        left: x1 - r.emberDia / 2,
+        top: y1 - r.emberDia / 2,
+        width: r.emberDia,
+        height: r.emberDia,
+        borderRadius: r.emberDia / 2,
+        backgroundColor: withAlpha(mineral.head, 1),
+        opacity: eo,
+        transform: [{
+          translateX: ex
+        }, {
+          translateY: ey
+        }]
+      },
+      pointerEvents: "none"
+    }, `ember-${i}`));
   }
   return /*#__PURE__*/_jsxs(View, {
     style: absoluteFill,
@@ -184,7 +344,7 @@ const Meteor = /*#__PURE__*/memo(function Meteor({
           width: 20,
           height: 20,
           borderRadius: 10,
-          backgroundColor: withAlpha("#E5EEFC", 0.16)
+          backgroundColor: withAlpha(mineral.glow, 0.16)
         }
       }), /*#__PURE__*/_jsx(View, {
         style: {
@@ -194,16 +354,16 @@ const Meteor = /*#__PURE__*/memo(function Meteor({
           width: 3,
           height: 3,
           borderRadius: 1.5,
-          backgroundColor: withAlpha("#F5F9FF", 1)
+          backgroundColor: withAlpha(mineral.head, 1)
         }
       }), trail]
     }), /*#__PURE__*/_jsx(Animated.View, {
       style: {
         position: "absolute",
-        left: x1 - 32,
-        top: y1 - 32,
-        width: 64,
-        height: 64,
+        left: x1 - 18,
+        top: y1 - 18,
+        width: 36,
+        height: 36,
         opacity: flashOpacity,
         transform: [{
           scale: flashScale
@@ -211,29 +371,13 @@ const Meteor = /*#__PURE__*/memo(function Meteor({
       },
       pointerEvents: "none",
       children: /*#__PURE__*/_jsx(RadialGlow, {
-        size: 64,
-        color: "#EDF3FC",
-        alpha: 0.6,
-        rings: 6,
+        size: 36,
+        color: mineral.glow,
+        alpha: 0.45,
+        rings: 5,
         falloff: 1.6
       })
-    }), /*#__PURE__*/_jsx(Animated.View, {
-      style: {
-        position: "absolute",
-        left: x1 - SHOCKWAVE_DIA / 2,
-        top: y1 - SHOCKWAVE_DIA / 2,
-        width: SHOCKWAVE_DIA,
-        height: SHOCKWAVE_DIA,
-        borderRadius: SHOCKWAVE_DIA / 2,
-        borderWidth: 1.5,
-        borderColor: withAlpha("#BBE5FA", 0.9),
-        opacity: waveOpacity,
-        transform: [{
-          scale: waveScale
-        }]
-      },
-      pointerEvents: "none"
-    }), sparks]
+    }), rays, embers]
   });
 });
 

package/lib/module/ui/components/Badge.js

@@ -98,7 +98,8 @@ export function TypeBadge({
   type,
   color,
   size = "small",
-  style
+  style,
+  testID
 }) {
   const typeColor = color || getTypeColor(type);
   const badgeStyles = getBadgeStyles("type", typeColor, size);
@@ -108,6 +109,7 @@ export function TypeBadge({
       style: [badgeStyles.text, {
         color: typeColor
       }],
+      testID: testID,
       children: type
     })
   });

package/lib/module/ui/components/CompactRow.js

@@ -21,7 +21,11 @@ export function CompactRow({
   isSelected,
   onPress,
   disabled,
-  expandedGlowColor
+  expandedGlowColor,
+  testID,
+  statusTestID,
+  statusSublabelTestID,
+  accessibilityLabel
 }) {
   return /*#__PURE__*/_jsx(View, {
     style: [styles.rowWrapper, isExpanded && styles.rowWrapperExpanded],
@@ -38,6 +42,13 @@ export function CompactRow({
         onPress: onPress,
         activeOpacity: 0.8,
         disabled: disabled || !onPress,
+        testID: testID,
+        accessibilityLabel: accessibilityLabel
+        // Label alone is not enough on Fabric: a row that announces text but
+        // no role reads to VoiceOver as static content, so the fact that it
+        // opens something is only discoverable by tapping it.
+        ,
+        accessibilityRole: onPress ? "button" : undefined,
         children: /*#__PURE__*/_jsxs(View, {
           style: styles.rowContent,
           children: [/*#__PURE__*/_jsxs(View, {
@@ -53,10 +64,12 @@ export function CompactRow({
                   color: statusDotColor
                 }],
                 numberOfLines: 1,
+                testID: statusTestID,
                 children: statusLabel
               }), statusSublabel ? /*#__PURE__*/_jsx(Text, {
                 style: styles.observerText,
                 numberOfLines: 1,
+                testID: statusSublabelTestID,
                 children: statusSublabel
               }) : null]
             })]