rn-backstage 1.2.1 → 1.3.0

package/src/components/FloatingPill.tsx

@@ -1,6 +1,15 @@
-import React, { useRef } from 'react'
-import { Animated, Dimensions, PanResponder, StyleSheet, Text } from 'react-native'
-import { Metrics, MonospaceFont } from '../constants'
+import React, { useCallback, useRef, useState } from 'react'
+import {
+  Animated,
+  Dimensions,
+  LayoutChangeEvent,
+  PanResponder,
+  SafeAreaView,
+  StyleSheet,
+  Text,
+  View,
+} from 'react-native'
+import { Metrics, MonospaceFont, TestIDs } from '../constants'
 import { useBackstageTheme } from '../ThemeContext'
 import type { BackstageStyleOverrides } from '../types'
 
@@ -12,6 +21,8 @@ interface FloatingPillProps {
   onPress: () => void
   initialX?: number
   initialY?: number
+  pillWidth?: number
+  pillHeight?: number
   styles?: BackstageStyleOverrides
 }
 
@@ -20,12 +31,32 @@ interface FloatingPillProps {
 const PILL_WIDTH = Metrics.pillWidth
 const PILL_HEIGHT = Metrics.pillHeight
 const DRAG_THRESHOLD = 5
+const INSET_PADDING = 8 // extra padding from safe area edges
 
-function clampPosition(x: number, y: number): { x: number; y: number } {
+interface SafeAreaInsets {
+  top: number
+  bottom: number
+  left: number
+  right: number
+}
+
+function clampPosition(
+  x: number,
+  y: number,
+  insets: SafeAreaInsets,
+  pillW: number,
+  pillH: number,
+): { x: number; y: number } {
   const { width, height } = Dimensions.get('window')
   return {
-    x: Math.max(0, Math.min(x, width - PILL_WIDTH)),
-    y: Math.max(0, Math.min(y, height - PILL_HEIGHT)),
+    x: Math.max(
+      insets.left + INSET_PADDING,
+      Math.min(x, width - pillW - insets.right - INSET_PADDING),
+    ),
+    y: Math.max(
+      insets.top + INSET_PADDING,
+      Math.min(y, height - pillH - insets.bottom - INSET_PADDING),
+    ),
   }
 }
 
@@ -37,17 +68,55 @@ export const FloatingPill: React.FC<FloatingPillProps> = ({
   onPress,
   initialX,
   initialY,
+  pillWidth: propWidth,
+  pillHeight: propHeight,
   styles: propStyles,
 }) => {
+  const pillW = propWidth ?? PILL_WIDTH
+  const pillH = propHeight ?? PILL_HEIGHT
+
   const { width: screenW, height: screenH } = Dimensions.get('window')
-  const defaultX = initialX ?? screenW - PILL_WIDTH - 16
-  const defaultY = initialY ?? screenH - PILL_HEIGHT - 120
+  const defaultX = initialX ?? screenW - pillW - 16
+  const defaultY = initialY ?? screenH - pillH - 120
 
   const pan = useRef(new Animated.ValueXY({ x: defaultX, y: defaultY })).current
   const lastPosition = useRef({ x: defaultX, y: defaultY })
   const isDragging = useRef(false)
   const dragDistance = useRef(0)
 
+  // Safe area insets measured from invisible SafeAreaView
+  const [insets, setInsets] = useState<SafeAreaInsets>({
+    top: 0,
+    bottom: 0,
+    left: 0,
+    right: 0,
+  })
+
+  const handleSafeAreaLayout = useCallback(
+    (event: LayoutChangeEvent) => {
+      const { x, y, width, height } = event.nativeEvent.layout
+      const screen = Dimensions.get('window')
+      const newInsets: SafeAreaInsets = {
+        top: y,
+        left: x,
+        bottom: screen.height - y - height,
+        right: screen.width - x - width,
+      }
+      setInsets(newInsets)
+
+      // Re-clamp current position to new safe area
+      const clamped = clampPosition(lastPosition.current.x, lastPosition.current.y, newInsets, pillW, pillH)
+      if (clamped.x !== lastPosition.current.x || clamped.y !== lastPosition.current.y) {
+        lastPosition.current = clamped
+        pan.setValue(clamped)
+      }
+    },
+    [pan],
+  )
+
+  const insetsRef = useRef(insets)
+  insetsRef.current = insets
+
   const panResponder = useRef(
     PanResponder.create({
       onStartShouldSetPanResponder: () => true,
@@ -72,6 +141,8 @@ export const FloatingPill: React.FC<FloatingPillProps> = ({
         if (dragDistance.current > DRAG_THRESHOLD) {
           isDragging.current = true
         }
+
+        // Allow free dragging — bounce back happens on release
         Animated.event([null, { dx: pan.x, dy: pan.y }], {
           useNativeDriver: false,
         })(_, gestureState)
@@ -82,6 +153,9 @@ export const FloatingPill: React.FC<FloatingPillProps> = ({
         const newPos = clampPosition(
           lastPosition.current.x + gestureState.dx,
           lastPosition.current.y + gestureState.dy,
+          insetsRef.current,
+          pillW,
+          pillH,
         )
 
         lastPosition.current = newPos
@@ -107,33 +181,45 @@ export const FloatingPill: React.FC<FloatingPillProps> = ({
   const shadowColor = hasError ? theme.error : theme.accent
 
   return (
-    <Animated.View
-      {...panResponder.panHandlers}
-      style={[
-        styles.pill,
-        {
-          backgroundColor,
-          transform: pan.getTranslateTransform(),
-          shadowColor,
-        },
-        propStyles?.pillStyle,
-      ]}
-    >
-      <Text style={[styles.pillText, propStyles?.pillTextStyle]} numberOfLines={1}>
-        {text}
-      </Text>
-    </Animated.View>
+    <>
+      {/* Invisible SafeAreaView to measure insets */}
+      <SafeAreaView style={componentStyles.measurer} pointerEvents="none">
+        <View style={componentStyles.measurerInner} onLayout={handleSafeAreaLayout} />
+      </SafeAreaView>
+
+      <Animated.View
+        testID={TestIDs.floatingPill}
+        {...panResponder.panHandlers}
+        style={[
+          componentStyles.pill,
+          {
+            minWidth: pillW,
+            height: pillH,
+            borderRadius: pillH / 2,
+            backgroundColor,
+            transform: pan.getTranslateTransform(),
+            shadowColor,
+          },
+          propStyles?.pillStyle,
+        ]}
+      >
+        <Text
+          testID={TestIDs.floatingPillText}
+          style={[componentStyles.pillText, propStyles?.pillTextStyle]}
+          numberOfLines={1}
+        >
+          {text}
+        </Text>
+      </Animated.View>
+    </>
   )
 }
 
 // ─── Styles ──────────────────────────────────────────────────────────────────
 
-const styles = StyleSheet.create({
+const componentStyles = StyleSheet.create({
   pill: {
     position: 'absolute',
-    minWidth: PILL_WIDTH,
-    height: PILL_HEIGHT,
-    borderRadius: PILL_HEIGHT / 2,
     paddingHorizontal: 14,
     alignItems: 'center',
     justifyContent: 'center',
@@ -150,4 +236,12 @@ const styles = StyleSheet.create({
     color: '#FFFFFF',
     letterSpacing: 0.5,
   },
+  measurer: {
+    ...StyleSheet.absoluteFillObject,
+    zIndex: -1,
+    opacity: 0,
+  },
+  measurerInner: {
+    flex: 1,
+  },
 })

package/src/components/InfoTab.tsx

@@ -1,6 +1,6 @@
 import React, { useMemo } from 'react'
 import { Platform, ScrollView, StyleSheet, Text, TouchableOpacity, View } from 'react-native'
-import { MonospaceFont } from '../constants'
+import { MonospaceFont, TestIDs } from '../constants'
 import { useBackstageTheme } from '../ThemeContext'
 import { JsonTreeView } from './JsonTreeView'
 import type { AppInfoItem, BackstageStyleOverrides, BackstageTheme, QuickAction } from '../types'
@@ -57,12 +57,13 @@ export const InfoTab: React.FC<InfoTabProps> = ({
 
   return (
     <ScrollView
+      testID={TestIDs.infoTab.container}
       style={s.container}
       contentContainerStyle={s.scrollContent}
       showsVerticalScrollIndicator={false}
     >
       {/* ── Device Info Section ─────────────────────────────────── */}
-      <View style={s.section}>
+      <View testID={TestIDs.infoTab.deviceInfo} style={s.section}>
         <Text style={[s.sectionTitle, propStyles?.sectionTitleStyle]}>DEVICE INFO</Text>
         <View style={s.card}>
           {allInfo.map((item, index) => (
@@ -83,7 +84,7 @@ export const InfoTab: React.FC<InfoTabProps> = ({
 
       {/* ── State Tree Section ──────────────────────────────────── */}
       {state && Object.keys(state).length > 0 && (
-        <View style={s.section}>
+        <View testID={TestIDs.infoTab.stateTree} style={s.section}>
           <Text style={[s.sectionTitle, propStyles?.sectionTitleStyle]}>STATE TREE</Text>
           <View style={s.card}>
             <JsonTreeView data={state} hideRoot maxDepth={jsonMaxDepth} />
@@ -93,7 +94,7 @@ export const InfoTab: React.FC<InfoTabProps> = ({
 
       {/* ── Quick Actions Section ─────────────────────────────────── */}
       {quickActions.length > 0 && (
-        <View style={s.section}>
+        <View testID={TestIDs.infoTab.quickActions} style={s.section}>
           <Text style={[s.sectionTitle, propStyles?.sectionTitleStyle]}>QUICK ACTIONS</Text>
           <View style={s.actionsGrid}>
             {quickActions.map((action, index) => {
@@ -106,7 +107,7 @@ export const InfoTab: React.FC<InfoTabProps> = ({
               return (
                 <TouchableOpacity
                   key={`action_${index}`}
-                  testID={action.testID}
+                  testID={action.testID || TestIDs.infoTab.actionButton(index)}
                   style={[
                     s.actionButton,
                     action.destructive && s.actionButtonDestructive,

package/src/components/LogItem.tsx

@@ -1,6 +1,6 @@
 import React, { useCallback, useMemo, useState } from 'react'
 import { StyleSheet, Text, TouchableOpacity, View } from 'react-native'
-import { MonospaceFont } from '../constants'
+import { MonospaceFont, TestIDs } from '../constants'
 import { useBackstageTheme } from '../ThemeContext'
 import { LogLevel } from '../types'
 import type { LogEntry, BackstageStyleOverrides, BackstageTheme } from '../types'
@@ -74,20 +74,28 @@ export const LogItem: React.FC<LogItemProps> = React.memo(
 
     return (
       <TouchableOpacity
+        testID={TestIDs.logItem.container(item.id)}
         style={[s.container, { backgroundColor: badge.rowBg }]}
         onPress={hasData ? toggleExpand : undefined}
         onLongPress={handleCopy}
         activeOpacity={hasData ? 0.7 : 1}
       >
         <View style={s.headerRow}>
-          <View style={[s.badge, { backgroundColor: badge.bgColor }]}>
+          <View
+            testID={TestIDs.logItem.badge(item.id)}
+            style={[s.badge, { backgroundColor: badge.bgColor }]}
+          >
             <Text style={[s.badgeText, { color: badge.color }]}>{badge.label}</Text>
           </View>
-          <Text style={[s.timestamp, propStyles?.logTimestampStyle]}>
+          <Text
+            testID={TestIDs.logItem.timestamp(item.id)}
+            style={[s.timestamp, propStyles?.logTimestampStyle]}
+          >
             {formatTimestamp(item.timestamp)}
           </Text>
           {onCopy && (
             <TouchableOpacity
+              testID={TestIDs.logItem.copyButton(item.id)}
               style={s.copyButton}
               onPress={handleCopy}
               hitSlop={{ top: 8, bottom: 8, left: 8, right: 8 }}
@@ -98,6 +106,7 @@ export const LogItem: React.FC<LogItemProps> = React.memo(
         </View>
 
         <Text
+          testID={TestIDs.logItem.message(item.id)}
           style={[s.message, propStyles?.logMessageStyle]}
           numberOfLines={expanded ? undefined : 3}
         >
@@ -105,7 +114,7 @@ export const LogItem: React.FC<LogItemProps> = React.memo(
         </Text>
 
         {expanded && hasData && (
-          <View style={s.dataContainer}>
+          <View testID={TestIDs.logItem.dataContainer(item.id)} style={s.dataContainer}>
             <JsonTreeView data={item.data} hideRoot maxDepth={jsonMaxDepth} />
           </View>
         )}

package/src/components/LogsTab.tsx

@@ -69,7 +69,7 @@ export const LogsTab: React.FC<LogsTabProps> = ({
   const keyExtractor = useCallback((item: LogEntry) => item.id, [])
 
   return (
-    <View style={s.container}>
+    <View testID={TestIDs.logsTab.container} style={s.container}>
       <View style={s.searchContainer}>
         <View style={s.searchInputWrapper}>
           <Text style={s.searchIcon}>⌕</Text>
@@ -98,7 +98,7 @@ export const LogsTab: React.FC<LogsTabProps> = ({
         )}
       </View>
 
-      <View style={s.countBar}>
+      <View testID={TestIDs.logsTab.statsBar} style={s.countBar}>
         <Text style={s.countText}>
           {filteredLogs.length === logs.length
             ? `${logs.length} log${logs.length !== 1 ? 's' : ''}`

package/src/components/NetworkTab.tsx

@@ -68,7 +68,7 @@ export const NetworkTab: React.FC<NetworkTabProps> = ({
   const keyExtractor = useCallback((item: NetworkEntry) => item.id, [])
 
   return (
-    <View style={s.container}>
+    <View testID={TestIDs.networkTab.container} style={s.container}>
       <View style={s.searchContainer}>
         <View style={s.searchInputWrapper}>
           <Text style={s.searchIcon}>⌕</Text>
@@ -95,7 +95,7 @@ export const NetworkTab: React.FC<NetworkTabProps> = ({
         </TouchableOpacity>
       </View>
 
-      <View style={s.statsBar}>
+      <View testID={TestIDs.networkTab.statsBar} style={s.statsBar}>
         <View style={s.statsRow}>
           <Text style={s.statText}>
             {filteredEntries.length === entries.length