react-native-element-inspector 0.1.0

package/src/floatingPanel/EditableValue.tsx

@@ -0,0 +1,109 @@
+import { useRef, useState } from 'react';
+import { Pressable, StyleSheet, Text, TextInput } from 'react-native';
+import { EDITABLE_VALUE, EDITABLE_VALUE_COLORS, MONOSPACE_FONT } from '../constants';
+import { parseInput, toEditableString } from '../utils';
+
+interface EditableValueProps {
+  value: unknown;
+  displayValue: string;
+  onSubmit: (parsed: unknown) => void;
+  variant: 'key' | 'value';
+  disabled?: boolean;
+  initialEditing?: boolean;
+}
+
+/** Tappable style value that becomes an inline TextInput on press. */
+export const EditableValue = ({
+  value,
+  displayValue,
+  onSubmit,
+  variant,
+  disabled,
+  initialEditing = false,
+}: EditableValueProps) => {
+  const colors = EDITABLE_VALUE_COLORS[variant];
+  const [editing, setEditing] = useState(initialEditing);
+  const [draft, setDraft] = useState('');
+  const [invalid, setInvalid] = useState(false);
+  const committedRef = useRef(false);
+
+  const startEditing = () => {
+    if (disabled) return;
+    committedRef.current = false;
+    setDraft(toEditableString(value));
+    setEditing(true);
+  };
+
+  const commitEdit = () => {
+    // Guard against double-fire from onSubmitEditing + onBlur
+    if (committedRef.current) return;
+    committedRef.current = true;
+
+    const trimmed = draft.trim();
+    const changed = trimmed !== '' && trimmed !== toEditableString(value);
+
+    if (changed) {
+      const isInvalidKey = variant === 'key' && !EDITABLE_VALUE.VALID_STYLE_KEY.test(trimmed);
+      const isTooLong = trimmed.length > EDITABLE_VALUE.MAX_VALUE_LENGTH;
+
+      if (isInvalidKey || isTooLong) {
+        setInvalid(true);
+        setTimeout(() => setEditing(false), 300);
+        return;
+      }
+
+      const parsed = parseInput(trimmed, value);
+      onSubmit(parsed);
+    }
+
+    setEditing(false);
+  };
+
+  if (editing) {
+    return (
+      <TextInput
+        style={[
+          styles.base,
+          styles.editing,
+          { color: colors.text, borderColor: invalid ? '#f44' : colors.underline },
+        ]}
+        value={draft}
+        onChangeText={setDraft}
+        onSubmitEditing={commitEdit}
+        onBlur={commitEdit}
+        autoCapitalize='none'
+        autoCorrect={false}
+        autoFocus
+        selectTextOnFocus
+        returnKeyType='done'
+      />
+    );
+  }
+
+  return (
+    <Pressable onPress={startEditing} hitSlop={4}>
+      <Text style={[styles.base, { color: colors.text }, disabled && styles.strikethrough]}>
+        {displayValue}
+      </Text>
+    </Pressable>
+  );
+};
+
+const styles = StyleSheet.create({
+  base: {
+    fontSize: 13,
+    fontFamily: MONOSPACE_FONT,
+    padding: 0,
+    margin: 0,
+    minWidth: 20,
+  },
+  editing: {
+    borderWidth: 1,
+    borderRadius: 3,
+    paddingHorizontal: 4,
+    paddingVertical: 2,
+  },
+  strikethrough: {
+    textDecorationLine: 'line-through',
+  },
+});

package/src/floatingPanel/FloatingPanel.tsx

@@ -0,0 +1,114 @@
+import { Animated, StyleSheet, useWindowDimensions, View } from 'react-native';
+import { FLOATING_PANEL, Z_INDEX } from '../constants';
+import { useFloatingPanel } from '../hooks';
+import { HandleContent } from './HandleContent';
+import { InspectorBubble } from './InspectorBubble';
+import { PanelBody } from './PanelBody';
+import { PanelHeader } from './PanelHeader';
+import type { FloatingPanelProps } from './types';
+
+/**
+ * Unified floating panel that renders as a bubble, handle, or expanded panel.
+ * Draggable via PanResponder. Bubble/handle snap to edge; expanded floats freely.
+ */
+export const FloatingPanel = ({
+  panelState,
+  selected,
+  matches,
+  selectedIndex,
+  onToggleInspect,
+  onCycleNext,
+  onCyclePrevious,
+  onClose,
+}: FloatingPanelProps) => {
+  const { width: screenWidth, height: screenHeight } = useWindowDimensions();
+
+  const { position, expandProgress, panHandlers, panelSize } = useFloatingPanel({
+    panelState,
+    screenWidth,
+    screenHeight,
+    onTap: onToggleInspect,
+  });
+
+  const bodyHeight = expandProgress.interpolate({
+    inputRange: [0, 1],
+    outputRange: [0, FLOATING_PANEL.PANEL_BODY_HEIGHT],
+  });
+
+  const bodyOpacity = expandProgress.interpolate({
+    inputRange: [0, 0.6, 1],
+    outputRange: [0, 0, 1],
+  });
+
+  return (
+    <Animated.View
+      style={[
+        styles.container,
+        {
+          left: position.x,
+          top: position.y,
+          width: panelSize.width,
+          zIndex: Z_INDEX.FLOATING_PANEL,
+        },
+        panelState === 'bubble' && styles.bubbleContainer,
+        panelState === 'handle' && styles.handleContainer,
+      ]}
+    >
+      {/* Drag surface — the touchable/draggable area */}
+      <View {...panHandlers}>
+        {panelState === 'bubble' && <InspectorBubble />}
+        {panelState === 'handle' && <HandleContent onClose={onClose} />}
+        {panelState === 'expanded' && selected && (
+          <PanelHeader
+            selected={selected}
+            matches={matches}
+            selectedIndex={selectedIndex}
+            onCycleNext={onCycleNext}
+            onCyclePrevious={onCyclePrevious}
+            onClose={onClose}
+          />
+        )}
+      </View>
+
+      {/* Expandable body — always mounted when selected so added-property state survives collapse */}
+      {selected && (
+        <Animated.View
+          style={[styles.body, { height: bodyHeight, opacity: bodyOpacity }]}
+          pointerEvents={panelState === 'expanded' ? 'auto' : 'none'}
+        >
+          <PanelBody element={selected} />
+        </Animated.View>
+      )}
+    </Animated.View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    position: 'absolute',
+    backgroundColor: 'rgba(30, 30, 30, 0.97)',
+    borderRadius: 12,
+    borderWidth: 1,
+    borderColor: 'rgba(255, 255, 255, 0.08)',
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 4 },
+    shadowOpacity: 0.4,
+    shadowRadius: 8,
+    elevation: 8,
+    overflow: 'hidden',
+  },
+  bubbleContainer: {
+    borderRadius: FLOATING_PANEL.BUBBLE_SIZE / 2,
+    backgroundColor: 'transparent',
+    borderWidth: 0,
+    overflow: 'visible',
+    shadowOpacity: 0,
+    elevation: 0,
+  },
+  handleContainer: {
+    borderColor: 'rgba(255, 59, 48, 0.2)',
+  },
+  body: {
+    overflow: 'hidden',
+  },
+});

package/src/floatingPanel/HandleContent.tsx

@@ -0,0 +1,45 @@
+import { StyleSheet, Text, View } from 'react-native';
+import { CloseButton } from './CloseButton';
+
+interface HandleContentProps {
+  onClose: () => void;
+}
+
+/** Floating handle shown in inspect mode before an element is selected. */
+export const HandleContent = ({ onClose }: HandleContentProps) => (
+  <View style={styles.handle}>
+    <View style={styles.dot} />
+    <Text style={styles.handleText}>Tap an element</Text>
+    <CloseButton onPress={onClose} />
+  </View>
+);
+
+const styles = StyleSheet.create({
+  handle: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingHorizontal: 14,
+    paddingVertical: 10,
+    backgroundColor: '#0F3460',
+    borderRadius: 22,
+    borderWidth: 1,
+    borderColor: 'rgba(79, 195, 247, 0.3)',
+    gap: 8,
+  },
+  dot: {
+    width: 8,
+    height: 8,
+    borderRadius: 4,
+    backgroundColor: '#E94560',
+    shadowColor: '#E94560',
+    shadowOffset: { width: 0, height: 0 },
+    shadowOpacity: 0.6,
+    shadowRadius: 3,
+  },
+  handleText: {
+    color: '#FFFFFF',
+    fontSize: 13,
+    fontWeight: '500',
+    flex: 1,
+  },
+});

package/src/floatingPanel/InspectorBubble.tsx

@@ -0,0 +1,121 @@
+import { useEffect, useRef } from 'react';
+import { Animated, Easing, StyleSheet, View } from 'react-native';
+import { INSPECTOR_BUBBLE } from '../constants';
+
+const { SIZE: BUBBLE_SIZE, SWEEP_WIDTH, CENTER_DOT_SIZE, TRAIL_ARMS } = INSPECTOR_BUBBLE;
+
+/**
+ * Inspector bubble with a radar-sweep animation.
+ * A bright orange line rotates around a dark orange circle with a fading trail.
+ */
+export const InspectorBubble = () => {
+  const sweepAnim = useRef(new Animated.Value(0)).current;
+
+  useEffect(() => {
+    const loop = Animated.loop(
+      Animated.timing(sweepAnim, {
+        toValue: 1,
+        duration: 3000,
+        easing: Easing.linear,
+        useNativeDriver: true,
+      }),
+    );
+    loop.start();
+    return () => loop.stop();
+  }, [sweepAnim]);
+
+  return (
+    <View style={styles.container}>
+      {/* Clipping circle — contains all radar elements */}
+      <View style={styles.clipCircle}>
+        {/* Dark orange base fill */}
+        <View style={styles.baseFill} />
+
+        {/* Subtle grid ring at ~60% radius for radar feel */}
+        <View style={styles.gridRing} />
+
+        {/* Sweep line + fading trail arms */}
+        {TRAIL_ARMS.map((arm) => {
+          const rotation = sweepAnim.interpolate({
+            inputRange: [0, 1],
+            outputRange: [`${arm.offsetDeg}deg`, `${360 + arm.offsetDeg}deg`],
+          });
+
+          return (
+            <Animated.View
+              key={arm.key}
+              style={[
+                styles.armWrapper,
+                {
+                  opacity: arm.opacity,
+                  transform: [{ rotate: rotation }],
+                },
+              ]}
+            >
+              <View style={styles.sweepLine} />
+            </Animated.View>
+          );
+        })}
+
+        {/* Center dot */}
+        <View style={styles.centerDot} />
+      </View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    width: BUBBLE_SIZE,
+    height: BUBBLE_SIZE,
+    justifyContent: 'center',
+    alignItems: 'center',
+    shadowColor: '#f97316',
+    shadowOffset: { width: 0, height: 0 },
+    shadowOpacity: 0.5,
+    shadowRadius: 10,
+    elevation: 8,
+  },
+  clipCircle: {
+    width: BUBBLE_SIZE,
+    height: BUBBLE_SIZE,
+    borderRadius: BUBBLE_SIZE / 2,
+    borderWidth: 2,
+    borderColor: '#ea580c',
+    overflow: 'hidden',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  baseFill: {
+    ...StyleSheet.absoluteFillObject,
+    backgroundColor: '#7c2d12',
+  },
+  gridRing: {
+    position: 'absolute',
+    width: BUBBLE_SIZE * 0.55,
+    height: BUBBLE_SIZE * 0.55,
+    borderRadius: (BUBBLE_SIZE * 0.55) / 2,
+    borderWidth: 1,
+    borderColor: 'rgba(234, 88, 12, 0.25)',
+  },
+  armWrapper: {
+    position: 'absolute',
+    width: BUBBLE_SIZE,
+    height: BUBBLE_SIZE,
+    alignItems: 'center',
+  },
+  sweepLine: {
+    width: SWEEP_WIDTH,
+    height: BUBBLE_SIZE / 2 - CENTER_DOT_SIZE / 2 - 2,
+    backgroundColor: '#fb923c',
+    borderRadius: SWEEP_WIDTH / 2,
+    marginTop: 3,
+  },
+  centerDot: {
+    position: 'absolute',
+    width: CENTER_DOT_SIZE,
+    height: CENTER_DOT_SIZE,
+    borderRadius: CENTER_DOT_SIZE / 2,
+    backgroundColor: '#f97316',
+  },
+});

package/src/floatingPanel/PanelBody.tsx

@@ -0,0 +1,162 @@
+import { useState } from 'react';
+import { ScrollView, StyleSheet, View } from 'react-native';
+import { Checkbox } from '../components';
+import type { MeasuredElement } from '../fiber';
+import { useStyleOverrides } from '../hooks';
+import { formatValue, isColorProp } from '../utils';
+import { AddPropertyButton, AddPropertyRow } from './AddPropertyRow';
+import { EditableValue } from './EditableValue';
+import { PanelFooter } from './PanelFooter';
+
+interface PanelBodyProps {
+  element: MeasuredElement;
+}
+
+/** Scrollable style property list with footer — the main content of the expanded panel. */
+export const PanelBody = ({ element }: PanelBodyProps) => {
+  const {
+    entries,
+    addedEntries,
+    resolveEntry,
+    handleToggle,
+    handleValueChange,
+    handleKeyChange,
+    handleAddProperty,
+    handleAddedValueChange,
+    handleAddedKeyChange,
+    handleRemoveProperty,
+  } = useStyleOverrides(element);
+
+  const [pendingAdd, setPendingAdd] = useState(false);
+
+  const totalCount = entries.length + addedEntries.length;
+  if (entries.length === 0 && addedEntries.length === 0 && !pendingAdd) return null;
+
+  return (
+    <View style={styles.container}>
+      <ScrollView
+        style={styles.list}
+        contentContainerStyle={styles.listContent}
+        nestedScrollEnabled
+        keyboardShouldPersistTaps='handled'
+      >
+        {entries.map(([originalKey, originalValue], index) => {
+          const { activeKey, displayValue, disabled } = resolveEntry(originalKey, originalValue);
+          return (
+            <View key={originalKey} style={[styles.row, index % 2 === 0 && styles.rowAlt]}>
+              <Checkbox checked={!disabled} onToggle={() => handleToggle(originalKey)} />
+              <View style={[styles.rowContent, disabled && styles.rowDisabled]}>
+                <EditableValue
+                  value={activeKey}
+                  displayValue={activeKey}
+                  onSubmit={(newKey) => handleKeyChange(originalKey, String(newKey))}
+                  variant='key'
+                  disabled={disabled}
+                />
+                <View style={styles.valueContainer}>
+                  {isColorProp(activeKey) && (
+                    <View style={[styles.colorSwatch, { backgroundColor: String(displayValue) }]} />
+                  )}
+                  <EditableValue
+                    value={displayValue}
+                    displayValue={formatValue(displayValue)}
+                    onSubmit={(newValue) => handleValueChange(originalKey, newValue)}
+                    variant='value'
+                    disabled={disabled}
+                  />
+                </View>
+              </View>
+            </View>
+          );
+        })}
+
+        {addedEntries.map(([key, value], index) => {
+          const rowIndex = entries.length + index;
+          return (
+            <View key={`added-${key}`} style={[styles.row, rowIndex % 2 === 0 && styles.rowAlt]}>
+              <Checkbox checked onToggle={() => handleRemoveProperty(key)} />
+              <View style={styles.rowContent}>
+                <EditableValue
+                  value={key}
+                  displayValue={key}
+                  onSubmit={(newKey) => handleAddedKeyChange(key, String(newKey))}
+                  variant='key'
+                />
+                <View style={styles.valueContainer}>
+                  {isColorProp(key) && (
+                    <View style={[styles.colorSwatch, { backgroundColor: String(value) }]} />
+                  )}
+                  <EditableValue
+                    value={value}
+                    displayValue={formatValue(value)}
+                    onSubmit={(newValue) => handleAddedValueChange(key, newValue)}
+                    variant='value'
+                  />
+                </View>
+              </View>
+            </View>
+          );
+        })}
+
+        {pendingAdd ? (
+          <AddPropertyRow
+            onAdd={(key, value) => {
+              handleAddProperty(key, value);
+              setPendingAdd(false);
+            }}
+            onCancel={() => setPendingAdd(false)}
+          />
+        ) : (
+          <AddPropertyButton onPress={() => setPendingAdd(true)} />
+        )}
+      </ScrollView>
+
+      <PanelFooter propertyCount={totalCount} width={element.width} height={element.height} />
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  list: {
+    flex: 1,
+  },
+  listContent: {
+    paddingHorizontal: 12,
+    paddingVertical: 4,
+  },
+  row: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingVertical: 5,
+    paddingHorizontal: 8,
+    borderRadius: 4,
+  },
+  rowContent: {
+    flex: 1,
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+  },
+  rowAlt: {
+    backgroundColor: 'rgba(255, 255, 255, 0.03)',
+  },
+  rowDisabled: {
+    opacity: 0.35,
+  },
+  valueContainer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    flexShrink: 1,
+  },
+  colorSwatch: {
+    width: 14,
+    height: 14,
+    borderRadius: 3,
+    borderWidth: StyleSheet.hairlineWidth,
+    borderColor: '#666',
+    marginRight: 6,
+  },
+});

package/src/floatingPanel/PanelFooter.tsx

@@ -0,0 +1,36 @@
+import { StyleSheet, Text, View } from 'react-native';
+import { MONOSPACE_FONT } from '../constants';
+
+interface PanelFooterProps {
+  propertyCount: number;
+  width: number;
+  height: number;
+}
+
+/** Expanded panel footer — property count, element dimensions, with top divider. */
+export const PanelFooter = ({ propertyCount, width, height }: PanelFooterProps) => (
+  <View style={styles.footer}>
+    <Text style={styles.footerText}>
+      {propertyCount} {propertyCount === 1 ? 'property' : 'properties'}
+    </Text>
+    <Text style={styles.footerText}>
+      {Math.round(width)} × {Math.round(height)}
+    </Text>
+  </View>
+);
+
+const styles = StyleSheet.create({
+  footer: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    paddingHorizontal: 12,
+    paddingVertical: 6,
+    borderTopWidth: StyleSheet.hairlineWidth,
+    borderTopColor: '#444',
+  },
+  footerText: {
+    color: '#666',
+    fontSize: 11,
+    fontFamily: MONOSPACE_FONT,
+  },
+});

package/src/floatingPanel/PanelHeader.tsx

@@ -0,0 +1,111 @@
+import { StyleSheet, Text, View } from 'react-native';
+import { MONOSPACE_FONT } from '../constants';
+import { ElementCycler } from '../ElementCycler';
+import type { MeasuredElement } from '../fiber';
+import { formatSourceLocation, getOwnerName, getSourceLocation } from '../utils';
+import { CloseButton } from './CloseButton';
+
+interface PanelHeaderProps {
+  selected: MeasuredElement;
+  matches: MeasuredElement[];
+  selectedIndex: number;
+  onCycleNext: () => void;
+  onCyclePrevious: () => void;
+  onClose: () => void;
+}
+
+/** Expanded panel header — grab bar, component info, cycling controls, close button. */
+export const PanelHeader = ({
+  selected,
+  matches,
+  selectedIndex,
+  onCycleNext,
+  onCyclePrevious,
+  onClose,
+}: PanelHeaderProps) => {
+  const source = getSourceLocation(selected.fiber);
+  const ownerName = getOwnerName(selected.fiber);
+
+  return (
+    <View style={styles.header}>
+      {/* Grab bar — visual drag indicator */}
+      <View style={styles.grabBarContainer}>
+        <View style={styles.grabBar} />
+      </View>
+
+      {/* Component info row */}
+      <View style={styles.infoRow}>
+        <Text style={styles.componentName} numberOfLines={1}>
+          &lt;{selected.componentName}&gt;
+        </Text>
+
+        <View style={styles.controls}>
+          <ElementCycler
+            total={matches.length}
+            currentIndex={selectedIndex}
+            componentName={selected.componentName}
+            onPrevious={onCyclePrevious}
+            onNext={onCycleNext}
+          />
+
+          <CloseButton onPress={onClose} />
+        </View>
+      </View>
+
+      {/* Source location — on its own line so it's not truncated */}
+      {source ? (
+        <Text style={styles.sourceText} numberOfLines={1}>
+          {formatSourceLocation(source)}
+        </Text>
+      ) : ownerName ? (
+        <Text style={styles.sourceText} numberOfLines={1}>
+          {ownerName}
+        </Text>
+      ) : null}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  header: {
+    paddingTop: 6,
+    paddingHorizontal: 12,
+    paddingBottom: 8,
+    borderBottomWidth: StyleSheet.hairlineWidth,
+    borderBottomColor: '#444',
+  },
+  grabBarContainer: {
+    alignItems: 'center',
+    paddingBottom: 6,
+  },
+  grabBar: {
+    width: 40,
+    height: 4,
+    borderRadius: 2,
+    backgroundColor: '#666',
+  },
+  infoRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+  },
+  componentName: {
+    color: '#E06C75',
+    fontSize: 14,
+    fontWeight: '600',
+    fontFamily: MONOSPACE_FONT,
+    flexShrink: 1,
+  },
+  controls: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 6,
+    flexShrink: 0,
+  },
+  sourceText: {
+    color: '#888',
+    fontSize: 11,
+    marginTop: 4,
+    fontFamily: MONOSPACE_FONT,
+  },
+});