react-native-element-inspector 0.1.0

package/lib/hooks/useFloatingPanel.js

@@ -0,0 +1,132 @@
+import { useCallback, useEffect, useMemo, useRef } from 'react';
+import { Animated, PanResponder } from 'react-native';
+import { FLOATING_PANEL } from '../constants';
+import { getPanelSize } from '../floatingPanel/panelUtils';
+import { clamp } from '../utils';
+/**
+ * Core animation/gesture hook for the floating inspector panel.
+ * Owns Animated.ValueXY for position, PanResponder for drag,
+ * and Animated.Value for expand/collapse transitions.
+ */
+export const useFloatingPanel = ({ panelState, screenWidth, screenHeight, onTap, }) => {
+    // Mutable refs so PanResponder callbacks never capture stale values
+    const panelStateRef = useRef(panelState);
+    panelStateRef.current = panelState;
+    const onTapRef = useRef(onTap);
+    onTapRef.current = onTap;
+    const screenRef = useRef({ width: screenWidth, height: screenHeight });
+    screenRef.current = { width: screenWidth, height: screenHeight };
+    // Initial position: middle-left edge
+    const initialX = FLOATING_PANEL.EDGE_MARGIN;
+    const initialY = (screenHeight - FLOATING_PANEL.BUBBLE_SIZE) / 2;
+    const position = useRef(new Animated.ValueXY({ x: initialX, y: initialY })).current;
+    const expandProgress = useRef(new Animated.Value(0)).current;
+    // Track raw position for synchronous reads (Animated.Value doesn't expose current value)
+    const currentPosition = useRef({ x: initialX, y: initialY });
+    const isDragging = useRef(false);
+    const dragStart = useRef({ x: 0, y: 0 });
+    const panelSize = useMemo(() => getPanelSize(panelState), [panelState]);
+    const panelSizeRef = useRef(panelSize);
+    panelSizeRef.current = panelSize;
+    // Snap to nearest left/right edge with spring animation
+    const snapToEdge = useCallback(() => {
+        const { width } = screenRef.current;
+        const size = panelSizeRef.current;
+        const midpoint = width / 2;
+        const centerX = currentPosition.current.x + size.width / 2;
+        const targetX = centerX < midpoint
+            ? FLOATING_PANEL.EDGE_MARGIN
+            : width - size.width - FLOATING_PANEL.EDGE_MARGIN;
+        currentPosition.current.x = targetX;
+        Animated.spring(position.x, {
+            toValue: targetX,
+            friction: FLOATING_PANEL.SNAP_FRICTION,
+            tension: FLOATING_PANEL.SNAP_TENSION,
+            useNativeDriver: false,
+        }).start();
+    }, [position.x]);
+    // PanResponder — recreated when screen dimensions change
+    const panResponder = useMemo(() => PanResponder.create({
+        onStartShouldSetPanResponder: () => true,
+        onMoveShouldSetPanResponder: (_, gesture) => Math.abs(gesture.dx) > FLOATING_PANEL.TAP_THRESHOLD ||
+            Math.abs(gesture.dy) > FLOATING_PANEL.TAP_THRESHOLD,
+        onPanResponderGrant: () => {
+            isDragging.current = false;
+            dragStart.current = { ...currentPosition.current };
+        },
+        onPanResponderMove: (_, gesture) => {
+            const movedEnough = Math.abs(gesture.dx) > FLOATING_PANEL.TAP_THRESHOLD ||
+                Math.abs(gesture.dy) > FLOATING_PANEL.TAP_THRESHOLD;
+            if (movedEnough) {
+                isDragging.current = true;
+            }
+            if (!isDragging.current)
+                return;
+            const { width: screenW, height: screenH } = screenRef.current;
+            const size = panelSizeRef.current;
+            const newX = clamp(dragStart.current.x + gesture.dx, FLOATING_PANEL.EDGE_MARGIN, screenW - size.width - FLOATING_PANEL.EDGE_MARGIN);
+            const newY = clamp(dragStart.current.y + gesture.dy, FLOATING_PANEL.TOP_SAFE_AREA, screenH - size.height - FLOATING_PANEL.BOTTOM_SAFE_AREA);
+            position.setValue({ x: newX, y: newY });
+            currentPosition.current = { x: newX, y: newY };
+        },
+        onPanResponderRelease: () => {
+            if (!isDragging.current) {
+                onTapRef.current();
+                return;
+            }
+            // Bubble and handle snap to edge; expanded stays where dropped
+            if (panelStateRef.current !== 'expanded') {
+                snapToEdge();
+            }
+        },
+    }), [position, snapToEdge]);
+    // Animate expand/collapse when panelState changes
+    useEffect(() => {
+        Animated.timing(expandProgress, {
+            toValue: panelState === 'expanded' ? 1 : 0,
+            duration: FLOATING_PANEL.EXPAND_DURATION,
+            useNativeDriver: false,
+        }).start();
+    }, [panelState, expandProgress]);
+    // Reposition panel on state change so the new size stays on-screen.
+    // Bubble/handle: instantly snap to nearest edge.
+    // Expanded: spring-animate into screen bounds.
+    useEffect(() => {
+        const { x, y } = currentPosition.current;
+        const size = getPanelSize(panelState);
+        if (panelState === 'expanded') {
+            const targetX = clamp(x, FLOATING_PANEL.EDGE_MARGIN, screenWidth - size.width - FLOATING_PANEL.EDGE_MARGIN);
+            const targetY = clamp(y, FLOATING_PANEL.TOP_SAFE_AREA, screenHeight - size.height - FLOATING_PANEL.BOTTOM_SAFE_AREA);
+            if (targetX !== x || targetY !== y) {
+                currentPosition.current = { x: targetX, y: targetY };
+                Animated.spring(position, {
+                    toValue: { x: targetX, y: targetY },
+                    friction: FLOATING_PANEL.SNAP_FRICTION,
+                    tension: FLOATING_PANEL.SNAP_TENSION,
+                    useNativeDriver: false,
+                }).start();
+            }
+        }
+        else {
+            // Bubble / handle — snap instantly to nearest edge (no animation needed,
+            // the panel content swap already provides the visual transition)
+            const midpoint = screenWidth / 2;
+            const centerX = x + size.width / 2;
+            const targetX = centerX < midpoint
+                ? FLOATING_PANEL.EDGE_MARGIN
+                : screenWidth - size.width - FLOATING_PANEL.EDGE_MARGIN;
+            const targetY = clamp(y, FLOATING_PANEL.TOP_SAFE_AREA, screenHeight - size.height - FLOATING_PANEL.BOTTOM_SAFE_AREA);
+            if (targetX !== x || targetY !== y) {
+                currentPosition.current = { x: targetX, y: targetY };
+                position.setValue({ x: targetX, y: targetY });
+            }
+        }
+    }, [panelState, screenWidth, screenHeight, position]);
+    return {
+        position,
+        expandProgress,
+        panHandlers: panResponder.panHandlers,
+        panelSize,
+    };
+};
+//# sourceMappingURL=useFloatingPanel.js.map

package/lib/hooks/useFloatingPanel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useFloatingPanel.js","sourceRoot":"","sources":["../../src/hooks/useFloatingPanel.ts"],"names":[],"mappings":"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"}

package/lib/hooks/useLayoutSnapshot.d.ts

@@ -0,0 +1,14 @@
+import { type MeasuredElement } from '../fiber';
+/**
+ * Builds and caches the layout snapshot when inspect mode is activated.
+ * Call `buildSnapshot` on inspect-mode entry. Call `invalidate` after
+ * style mutations — it debounces and rebuilds automatically.
+ */
+export declare const useLayoutSnapshot: () => {
+    snapshot: MeasuredElement[];
+    isBuilding: boolean;
+    buildSnapshot: () => Promise<number>;
+    invalidate: () => void;
+    ensureFresh: () => Promise<void>;
+};
+//# sourceMappingURL=useLayoutSnapshot.d.ts.map

package/lib/hooks/useLayoutSnapshot.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useLayoutSnapshot.d.ts","sourceRoot":"","sources":["../../src/hooks/useLayoutSnapshot.ts"],"names":[],"mappings":"AACA,OAAO,EAAgB,KAAK,eAAe,EAAE,MAAM,UAAU,CAAC;AAI9D;;;;GAIG;AACH,eAAO,MAAM,iBAAiB;;;yBAKgB,OAAO,CAAC,MAAM,CAAC;;;CA0B5D,CAAC"}

package/lib/hooks/useLayoutSnapshot.js

@@ -0,0 +1,39 @@
+import { useCallback, useRef, useState } from 'react';
+import { FiberAdapter } from '../fiber';
+import { buildLayoutSnapshot } from '../utils';
+import { useDebouncedCallback } from './useDebouncedCallback';
+/**
+ * Builds and caches the layout snapshot when inspect mode is activated.
+ * Call `buildSnapshot` on inspect-mode entry. Call `invalidate` after
+ * style mutations — it debounces and rebuilds automatically.
+ */
+export const useLayoutSnapshot = () => {
+    const [snapshot, setSnapshot] = useState([]);
+    const [isBuilding, setIsBuilding] = useState(false);
+    const snapshotRef = useRef([]);
+    const buildSnapshot = useCallback(async () => {
+        const root = FiberAdapter.getFiberRoot();
+        if (!root)
+            return 0;
+        setIsBuilding(true);
+        try {
+            const elements = await buildLayoutSnapshot(root);
+            snapshotRef.current = elements;
+            setSnapshot(elements);
+            return elements.length;
+        }
+        finally {
+            setIsBuilding(false);
+        }
+    }, []);
+    /** Mark stale — debounced 300ms so rapid style edits don't rebuild every time. */
+    const invalidate = useDebouncedCallback(buildSnapshot, 300);
+    /** Rebuild only if the snapshot is empty (first time). */
+    const ensureFresh = useCallback(async () => {
+        if (snapshotRef.current.length === 0) {
+            await buildSnapshot();
+        }
+    }, [buildSnapshot]);
+    return { snapshot, isBuilding, buildSnapshot, invalidate, ensureFresh };
+};
+//# sourceMappingURL=useLayoutSnapshot.js.map

package/lib/hooks/useLayoutSnapshot.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useLayoutSnapshot.js","sourceRoot":"","sources":["../../src/hooks/useLayoutSnapshot.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACtD,OAAO,EAAE,YAAY,EAAwB,MAAM,UAAU,CAAC;AAC9D,OAAO,EAAE,mBAAmB,EAAE,MAAM,UAAU,CAAC;AAC/C,OAAO,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;AAE9D;;;;GAIG;AACH,MAAM,CAAC,MAAM,iBAAiB,GAAG,GAAG,EAAE;IACpC,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,QAAQ,CAAoB,EAAE,CAAC,CAAC;IAChE,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IACpD,MAAM,WAAW,GAAG,MAAM,CAAoB,EAAE,CAAC,CAAC;IAElD,MAAM,aAAa,GAAG,WAAW,CAAC,KAAK,IAAqB,EAAE;QAC5D,MAAM,IAAI,GAAG,YAAY,CAAC,YAAY,EAAE,CAAC;QACzC,IAAI,CAAC,IAAI;YAAE,OAAO,CAAC,CAAC;QAEpB,aAAa,CAAC,IAAI,CAAC,CAAC;QACpB,IAAI,CAAC;YACH,MAAM,QAAQ,GAAG,MAAM,mBAAmB,CAAC,IAAI,CAAC,CAAC;YACjD,WAAW,CAAC,OAAO,GAAG,QAAQ,CAAC;YAC/B,WAAW,CAAC,QAAQ,CAAC,CAAC;YACtB,OAAO,QAAQ,CAAC,MAAM,CAAC;QACzB,CAAC;gBAAS,CAAC;YACT,aAAa,CAAC,KAAK,CAAC,CAAC;QACvB,CAAC;IACH,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,kFAAkF;IAClF,MAAM,UAAU,GAAG,oBAAoB,CAAC,aAAa,EAAE,GAAG,CAAC,CAAC;IAE5D,0DAA0D;IAC1D,MAAM,WAAW,GAAG,WAAW,CAAC,KAAK,IAAI,EAAE;QACzC,IAAI,WAAW,CAAC,OAAO,CAAC,MAAM,KAAK,CAAC,EAAE,CAAC;YACrC,MAAM,aAAa,EAAE,CAAC;QACxB,CAAC;IACH,CAAC,EAAE,CAAC,aAAa,CAAC,CAAC,CAAC;IAEpB,OAAO,EAAE,QAAQ,EAAE,UAAU,EAAE,aAAa,EAAE,UAAU,EAAE,WAAW,EAAE,CAAC;AAC1E,CAAC,CAAC"}

package/lib/hooks/useStyleMutation.d.ts

@@ -0,0 +1,14 @@
+import { type MeasuredElement } from '../fiber';
+/**
+ * Captures the original flattened style for an element and provides
+ * a function to replace the element's entire style via overrideProps.
+ *
+ * All override/disabled tracking belongs in the consuming component —
+ * this hook only handles fiber interaction.
+ */
+export declare const useStyleMutation: (element: MeasuredElement) => {
+    originalStyle: import("../utils").StyleObject;
+    applyStyle: (style: Record<string, unknown>) => boolean;
+    resetStyle: () => boolean;
+};
+//# sourceMappingURL=useStyleMutation.d.ts.map

package/lib/hooks/useStyleMutation.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useStyleMutation.d.ts","sourceRoot":"","sources":["../../src/hooks/useStyleMutation.ts"],"names":[],"mappings":"AACA,OAAO,EAAgB,KAAK,eAAe,EAAE,MAAM,UAAU,CAAC;AAG9D;;;;;;GAMG;AACH,eAAO,MAAM,gBAAgB,YAAa,eAAe;;wBAQ7C,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC;;CAWlC,CAAC"}

package/lib/hooks/useStyleMutation.js

@@ -0,0 +1,22 @@
+import { useCallback, useMemo } from 'react';
+import { FiberAdapter } from '../fiber';
+import { flattenStyles } from '../utils';
+/**
+ * Captures the original flattened style for an element and provides
+ * a function to replace the element's entire style via overrideProps.
+ *
+ * All override/disabled tracking belongs in the consuming component —
+ * this hook only handles fiber interaction.
+ */
+export const useStyleMutation = (element) => {
+    const originalStyle = useMemo(() => {
+        const flat = flattenStyles(element.fiber.memoizedProps?.style);
+        return flat ? structuredClone(flat) : {};
+    }, [element]);
+    /** Replace the element's entire style with a flat object. */
+    const applyStyle = useCallback((style) => FiberAdapter.setStyle(element.fiber, style), [element]);
+    /** Restore the element's original style. */
+    const resetStyle = useCallback(() => FiberAdapter.setStyle(element.fiber, originalStyle), [element, originalStyle]);
+    return { originalStyle, applyStyle, resetStyle };
+};
+//# sourceMappingURL=useStyleMutation.js.map

package/lib/hooks/useStyleMutation.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useStyleMutation.js","sourceRoot":"","sources":["../../src/hooks/useStyleMutation.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAC7C,OAAO,EAAE,YAAY,EAAwB,MAAM,UAAU,CAAC;AAC9D,OAAO,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AAEzC;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,gBAAgB,GAAG,CAAC,OAAwB,EAAE,EAAE;IAC3D,MAAM,aAAa,GAAG,OAAO,CAAC,GAAG,EAAE;QACjC,MAAM,IAAI,GAAG,aAAa,CAAC,OAAO,CAAC,KAAK,CAAC,aAAa,EAAE,KAAK,CAAC,CAAC;QAC/D,OAAO,IAAI,CAAC,CAAC,CAAC,eAAe,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC;IAC3C,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC,CAAC;IAEd,6DAA6D;IAC7D,MAAM,UAAU,GAAG,WAAW,CAC5B,CAAC,KAA8B,EAAE,EAAE,CAAC,YAAY,CAAC,QAAQ,CAAC,OAAO,CAAC,KAAK,EAAE,KAAK,CAAC,EAC/E,CAAC,OAAO,CAAC,CACV,CAAC;IAEF,4CAA4C;IAC5C,MAAM,UAAU,GAAG,WAAW,CAC5B,GAAG,EAAE,CAAC,YAAY,CAAC,QAAQ,CAAC,OAAO,CAAC,KAAK,EAAE,aAAa,CAAC,EACzD,CAAC,OAAO,EAAE,aAAa,CAAC,CACzB,CAAC;IAEF,OAAO,EAAE,aAAa,EAAE,UAAU,EAAE,UAAU,EAAE,CAAC;AACnD,CAAC,CAAC"}

package/lib/hooks/useStyleOverrides.d.ts

@@ -0,0 +1,24 @@
+import type { MeasuredElement } from '../fiber';
+/**
+ * Manages style overrides, key renames, property toggling, and added properties
+ * for a selected element. Builds the final style object and applies it to the fiber
+ * on every change.
+ */
+export declare const useStyleOverrides: (element: MeasuredElement) => {
+    originalStyle: import("../utils").StyleObject;
+    entries: [string, unknown][];
+    addedEntries: [string, unknown][];
+    resolveEntry: (originalKey: string, originalValue: unknown) => {
+        activeKey: string;
+        displayValue: unknown;
+        disabled: boolean;
+    };
+    handleToggle: (key: string) => void;
+    handleValueChange: (originalKey: string, newValue: unknown) => void;
+    handleKeyChange: (originalKey: string, newKey: string) => void;
+    handleAddProperty: (key: string, value: unknown) => void;
+    handleAddedValueChange: (key: string, newValue: unknown) => void;
+    handleAddedKeyChange: (oldKey: string, newKey: string) => void;
+    handleRemoveProperty: (key: string) => void;
+};
+//# sourceMappingURL=useStyleOverrides.d.ts.map

package/lib/hooks/useStyleOverrides.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useStyleOverrides.d.ts","sourceRoot":"","sources":["../../src/hooks/useStyleOverrides.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,UAAU,CAAC;AAGhD;;;;GAIG;AACH,eAAO,MAAM,iBAAiB,YAAa,eAAe;;;;gCAiJrB,MAAM,iBAAiB,OAAO;;;;;wBAtFtC,MAAM;qCAYO,MAAM,YAAY,OAAO;mCAQ3B,MAAM,UAAU,MAAM;6BAyB5B,MAAM,SAAS,OAAO;kCAWjB,MAAM,YAAY,OAAO;mCAOxB,MAAM,UAAU,MAAM;gCAczB,MAAM;CA6B1C,CAAC"}

package/lib/hooks/useStyleOverrides.js

@@ -0,0 +1,165 @@
+import { useRef, useState } from 'react';
+import { EDITABLE_VALUE } from '../constants';
+import { useStyleMutation } from './useStyleMutation';
+/**
+ * Manages style overrides, key renames, property toggling, and added properties
+ * for a selected element. Builds the final style object and applies it to the fiber
+ * on every change.
+ */
+export const useStyleOverrides = (element) => {
+    const { originalStyle, applyStyle } = useStyleMutation(element);
+    const [overrides, setOverrides] = useState({});
+    const [disabledKeys, setDisabledKeys] = useState(new Set());
+    const [keyRenames, setKeyRenames] = useState({});
+    const [addedProperties, setAddedProperties] = useState({});
+    // Refs mirror state so handlers always read the latest values (no stale closures)
+    const overridesRef = useRef(overrides);
+    const disabledRef = useRef(disabledKeys);
+    const keyRenamesRef = useRef(keyRenames);
+    const addedRef = useRef(addedProperties);
+    const prevElementRef = useRef(element);
+    // Reset when element changes (render-phase setState — React's recommended
+    // pattern for adjusting state based on props, avoids stale flash from useEffect)
+    if (prevElementRef.current !== element) {
+        prevElementRef.current = element;
+        overridesRef.current = {};
+        disabledRef.current = new Set();
+        keyRenamesRef.current = {};
+        addedRef.current = {};
+        setOverrides({});
+        setDisabledKeys(new Set());
+        setKeyRenames({});
+        setAddedProperties({});
+    }
+    /** Check if a key collides with any active key (original, renamed, or added). */
+    const isKeyTaken = (key, excludeOriginalKey) => {
+        for (const originalKey of Object.keys(originalStyle)) {
+            if (originalKey === excludeOriginalKey)
+                continue;
+            const activeKey = keyRenamesRef.current[originalKey] ?? originalKey;
+            if (activeKey === key)
+                return true;
+        }
+        if (key in addedRef.current)
+            return true;
+        return false;
+    };
+    // Build a flat style from original + overrides − disabled + renames + added, then apply
+    const buildAndApply = (nextOverrides, nextDisabled, nextRenames, nextAdded) => {
+        const style = {};
+        for (const [originalKey, originalValue] of Object.entries(originalStyle)) {
+            if (nextDisabled.has(originalKey))
+                continue;
+            const activeKey = nextRenames[originalKey] ?? originalKey;
+            const value = activeKey in nextOverrides ? nextOverrides[activeKey] : originalValue;
+            style[activeKey] = value;
+        }
+        for (const [key, value] of Object.entries(nextAdded)) {
+            style[key] = value;
+        }
+        applyStyle(style);
+    };
+    const handleToggle = (key) => {
+        const nextDisabled = new Set(disabledRef.current);
+        if (nextDisabled.has(key)) {
+            nextDisabled.delete(key);
+        }
+        else {
+            nextDisabled.add(key);
+        }
+        disabledRef.current = nextDisabled;
+        buildAndApply(overridesRef.current, nextDisabled, keyRenamesRef.current, addedRef.current);
+        setDisabledKeys(nextDisabled);
+    };
+    const handleValueChange = (originalKey, newValue) => {
+        const activeKey = keyRenamesRef.current[originalKey] ?? originalKey;
+        const nextOverrides = { ...overridesRef.current, [activeKey]: newValue };
+        overridesRef.current = nextOverrides;
+        buildAndApply(nextOverrides, disabledRef.current, keyRenamesRef.current, addedRef.current);
+        setOverrides(nextOverrides);
+    };
+    const handleKeyChange = (originalKey, newKey) => {
+        const currentRenamedKey = keyRenamesRef.current[originalKey] ?? originalKey;
+        if (newKey === currentRenamedKey)
+            return;
+        if (isKeyTaken(newKey, originalKey))
+            return;
+        const nextRenames = { ...keyRenamesRef.current };
+        const nextOverrides = { ...overridesRef.current };
+        if (currentRenamedKey in nextOverrides) {
+            nextOverrides[newKey] = nextOverrides[currentRenamedKey];
+            delete nextOverrides[currentRenamedKey];
+        }
+        if (newKey === originalKey) {
+            delete nextRenames[originalKey];
+        }
+        else {
+            nextRenames[originalKey] = newKey;
+        }
+        overridesRef.current = nextOverrides;
+        keyRenamesRef.current = nextRenames;
+        buildAndApply(nextOverrides, disabledRef.current, nextRenames, addedRef.current);
+        setOverrides(nextOverrides);
+        setKeyRenames(nextRenames);
+    };
+    const handleAddProperty = (key, value) => {
+        const trimmed = key.trim();
+        if (!EDITABLE_VALUE.VALID_STYLE_KEY.test(trimmed))
+            return;
+        if (isKeyTaken(trimmed))
+            return;
+        const nextAdded = { ...addedRef.current, [trimmed]: value };
+        addedRef.current = nextAdded;
+        buildAndApply(overridesRef.current, disabledRef.current, keyRenamesRef.current, nextAdded);
+        setAddedProperties(nextAdded);
+    };
+    const handleAddedValueChange = (key, newValue) => {
+        const nextAdded = { ...addedRef.current, [key]: newValue };
+        addedRef.current = nextAdded;
+        buildAndApply(overridesRef.current, disabledRef.current, keyRenamesRef.current, nextAdded);
+        setAddedProperties(nextAdded);
+    };
+    const handleAddedKeyChange = (oldKey, newKey) => {
+        const trimmed = newKey.trim();
+        if (!trimmed || trimmed === oldKey)
+            return;
+        if (!EDITABLE_VALUE.VALID_STYLE_KEY.test(trimmed))
+            return;
+        if (isKeyTaken(trimmed))
+            return;
+        const nextAdded = { ...addedRef.current };
+        nextAdded[trimmed] = nextAdded[oldKey];
+        delete nextAdded[oldKey];
+        addedRef.current = nextAdded;
+        buildAndApply(overridesRef.current, disabledRef.current, keyRenamesRef.current, nextAdded);
+        setAddedProperties(nextAdded);
+    };
+    const handleRemoveProperty = (key) => {
+        const nextAdded = { ...addedRef.current };
+        delete nextAdded[key];
+        addedRef.current = nextAdded;
+        buildAndApply(overridesRef.current, disabledRef.current, keyRenamesRef.current, nextAdded);
+        setAddedProperties(nextAdded);
+    };
+    /** Resolve the active key and display value for an original style entry. */
+    const resolveEntry = (originalKey, originalValue) => {
+        const activeKey = keyRenames[originalKey] ?? originalKey;
+        const displayValue = activeKey in overrides ? overrides[activeKey] : originalValue;
+        const disabled = disabledKeys.has(originalKey);
+        return { activeKey, displayValue, disabled };
+    };
+    return {
+        originalStyle,
+        entries: Object.entries(originalStyle),
+        addedEntries: Object.entries(addedProperties),
+        resolveEntry,
+        handleToggle,
+        handleValueChange,
+        handleKeyChange,
+        handleAddProperty,
+        handleAddedValueChange,
+        handleAddedKeyChange,
+        handleRemoveProperty,
+    };
+};
+//# sourceMappingURL=useStyleOverrides.js.map

package/lib/hooks/useStyleOverrides.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useStyleOverrides.js","sourceRoot":"","sources":["../../src/hooks/useStyleOverrides.ts"],"names":[],"mappings":"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"}

package/lib/hooks/useTapToSelect.d.ts

@@ -0,0 +1,20 @@
+import type { GestureResponderEvent } from 'react-native';
+import type { MeasuredElement } from '../fiber';
+/**
+ * Handles tap-to-select interaction.
+ * On tap, hit-tests the snapshot and selects the most specific element.
+ * Supports cycling through overlapping elements.
+ */
+export declare const useTapToSelect: (snapshot: MeasuredElement[]) => {
+    handleTap: (event: GestureResponderEvent) => void;
+    cycleNext: () => void;
+    cyclePrevious: () => void;
+    clearSelection: () => void;
+    /** All overlapping elements at the tap point, sorted by area (smallest first) */
+    matches: MeasuredElement[];
+    /** Currently selected index in the matches array */
+    selectedIndex: number;
+    /** The currently selected element */
+    selected: MeasuredElement | null;
+};
+//# sourceMappingURL=useTapToSelect.d.ts.map

package/lib/hooks/useTapToSelect.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useTapToSelect.d.ts","sourceRoot":"","sources":["../../src/hooks/useTapToSelect.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,cAAc,CAAC;AAC1D,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,UAAU,CAAC;AAYhD;;;;GAIG;AACH,eAAO,MAAM,cAAc,aAAc,eAAe,EAAE;uBAQ9C,qBAAqB;;;;IArB/B,iFAAiF;aACxE,eAAe,EAAE;IAC1B,oDAAoD;mBACrC,MAAM;IACrB,qCAAqC;cAC3B,eAAe,GAAG,IAAI;CAgEjC,CAAC"}

package/lib/hooks/useTapToSelect.js

@@ -0,0 +1,58 @@
+import { useCallback, useState } from 'react';
+import { hitTest } from '../utils';
+/**
+ * Handles tap-to-select interaction.
+ * On tap, hit-tests the snapshot and selects the most specific element.
+ * Supports cycling through overlapping elements.
+ */
+export const useTapToSelect = (snapshot) => {
+    const [state, setState] = useState({
+        matches: [],
+        selectedIndex: 0,
+        selected: null,
+    });
+    const handleTap = useCallback((event) => {
+        const { pageX, pageY } = event.nativeEvent;
+        const matches = hitTest(snapshot, pageX, pageY);
+        setState({
+            matches,
+            selectedIndex: 0,
+            selected: matches[0] ?? null,
+        });
+    }, [snapshot]);
+    const cycleNext = useCallback(() => {
+        setState((prev) => {
+            if (prev.matches.length === 0)
+                return prev;
+            const nextIndex = (prev.selectedIndex + 1) % prev.matches.length;
+            return {
+                ...prev,
+                selectedIndex: nextIndex,
+                selected: prev.matches[nextIndex] ?? null,
+            };
+        });
+    }, []);
+    const cyclePrevious = useCallback(() => {
+        setState((prev) => {
+            if (prev.matches.length === 0)
+                return prev;
+            const prevIndex = (prev.selectedIndex - 1 + prev.matches.length) % prev.matches.length;
+            return {
+                ...prev,
+                selectedIndex: prevIndex,
+                selected: prev.matches[prevIndex] ?? null,
+            };
+        });
+    }, []);
+    const clearSelection = useCallback(() => {
+        setState({ matches: [], selectedIndex: 0, selected: null });
+    }, []);
+    return {
+        ...state,
+        handleTap,
+        cycleNext,
+        cyclePrevious,
+        clearSelection,
+    };
+};
+//# sourceMappingURL=useTapToSelect.js.map

package/lib/hooks/useTapToSelect.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useTapToSelect.js","sourceRoot":"","sources":["../../src/hooks/useTapToSelect.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAG9C,OAAO,EAAE,OAAO,EAAE,MAAM,UAAU,CAAC;AAWnC;;;;GAIG;AACH,MAAM,CAAC,MAAM,cAAc,GAAG,CAAC,QAA2B,EAAE,EAAE;IAC5D,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAmB;QACnD,OAAO,EAAE,EAAE;QACX,aAAa,EAAE,CAAC;QAChB,QAAQ,EAAE,IAAI;KACf,CAAC,CAAC;IAEH,MAAM,SAAS,GAAG,WAAW,CAC3B,CAAC,KAA4B,EAAE,EAAE;QAC/B,MAAM,EAAE,KAAK,EAAE,KAAK,EAAE,GAAG,KAAK,CAAC,WAAW,CAAC;QAC3C,MAAM,OAAO,GAAG,OAAO,CAAC,QAAQ,EAAE,KAAK,EAAE,KAAK,CAAC,CAAC;QAEhD,QAAQ,CAAC;YACP,OAAO;YACP,aAAa,EAAE,CAAC;YAChB,QAAQ,EAAE,OAAO,CAAC,CAAC,CAAC,IAAI,IAAI;SAC7B,CAAC,CAAC;IACL,CAAC,EACD,CAAC,QAAQ,CAAC,CACX,CAAC;IAEF,MAAM,SAAS,GAAG,WAAW,CAAC,GAAG,EAAE;QACjC,QAAQ,CAAC,CAAC,IAAI,EAAE,EAAE;YAChB,IAAI,IAAI,CAAC,OAAO,CAAC,MAAM,KAAK,CAAC;gBAAE,OAAO,IAAI,CAAC;YAC3C,MAAM,SAAS,GAAG,CAAC,IAAI,CAAC,aAAa,GAAG,CAAC,CAAC,GAAG,IAAI,CAAC,OAAO,CAAC,MAAM,CAAC;YACjE,OAAO;gBACL,GAAG,IAAI;gBACP,aAAa,EAAE,SAAS;gBACxB,QAAQ,EAAE,IAAI,CAAC,OAAO,CAAC,SAAS,CAAC,IAAI,IAAI;aAC1C,CAAC;QACJ,CAAC,CAAC,CAAC;IACL,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,aAAa,GAAG,WAAW,CAAC,GAAG,EAAE;QACrC,QAAQ,CAAC,CAAC,IAAI,EAAE,EAAE;YAChB,IAAI,IAAI,CAAC,OAAO,CAAC,MAAM,KAAK,CAAC;gBAAE,OAAO,IAAI,CAAC;YAC3C,MAAM,SAAS,GAAG,CAAC,IAAI,CAAC,aAAa,GAAG,CAAC,GAAG,IAAI,CAAC,OAAO,CAAC,MAAM,CAAC,GAAG,IAAI,CAAC,OAAO,CAAC,MAAM,CAAC;YACvF,OAAO;gBACL,GAAG,IAAI;gBACP,aAAa,EAAE,SAAS;gBACxB,QAAQ,EAAE,IAAI,CAAC,OAAO,CAAC,SAAS,CAAC,IAAI,IAAI;aAC1C,CAAC;QACJ,CAAC,CAAC,CAAC;IACL,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,cAAc,GAAG,WAAW,CAAC,GAAG,EAAE;QACtC,QAAQ,CAAC,EAAE,OAAO,EAAE,EAAE,EAAE,aAAa,EAAE,CAAC,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC,CAAC;IAC9D,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,OAAO;QACL,GAAG,KAAK;QACR,SAAS;QACT,SAAS;QACT,aAAa;QACb,cAAc;KACf,CAAC;AACJ,CAAC,CAAC"}

package/lib/index.d.ts

@@ -0,0 +1,3 @@
+export type { ElementInspectorProps } from './ElementInspector';
+export { ElementInspector } from './ElementInspector';
+//# sourceMappingURL=index.d.ts.map

package/lib/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,YAAY,EAAE,qBAAqB,EAAE,MAAM,oBAAoB,CAAC;AAChE,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC"}

package/lib/index.js

@@ -0,0 +1,2 @@
+export { ElementInspector } from './ElementInspector';
+//# sourceMappingURL=index.js.map

package/lib/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC"}

package/lib/utils/clamp.d.ts

@@ -0,0 +1,2 @@
+export declare const clamp: (value: number, min: number, max: number) => number;
+//# sourceMappingURL=clamp.d.ts.map

package/lib/utils/clamp.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"clamp.d.ts","sourceRoot":"","sources":["../../src/utils/clamp.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,KAAK,UAAW,MAAM,OAAO,MAAM,OAAO,MAAM,KAAG,MAC3B,CAAC"}

package/lib/utils/clamp.js

@@ -0,0 +1,2 @@
+export const clamp = (value, min, max) => Math.max(min, Math.min(max, value));
+//# sourceMappingURL=clamp.js.map

package/lib/utils/clamp.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"clamp.js","sourceRoot":"","sources":["../../src/utils/clamp.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,KAAK,GAAG,CAAC,KAAa,EAAE,GAAW,EAAE,GAAW,EAAU,EAAE,CACvE,IAAI,CAAC,GAAG,CAAC,GAAG,EAAE,IAAI,CAAC,GAAG,CAAC,GAAG,EAAE,KAAK,CAAC,CAAC,CAAC"}

package/lib/utils/flattenStyles.d.ts

@@ -0,0 +1,6 @@
+export type StyleObject = Record<string, unknown>;
+/**
+ * Resolve any style value (StyleSheet ID, array, or plain object) into a flat object.
+ */
+export declare const flattenStyles: (style: unknown) => StyleObject | null;
+//# sourceMappingURL=flattenStyles.d.ts.map

package/lib/utils/flattenStyles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"flattenStyles.d.ts","sourceRoot":"","sources":["../../src/utils/flattenStyles.ts"],"names":[],"mappings":"AAEA,MAAM,MAAM,WAAW,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;AAElD;;GAEG;AACH,eAAO,MAAM,aAAa,UAAW,OAAO,KAAG,WAAW,GAAG,IAI5D,CAAC"}

package/lib/utils/flattenStyles.js

@@ -0,0 +1,11 @@
+import { StyleSheet } from 'react-native';
+/**
+ * Resolve any style value (StyleSheet ID, array, or plain object) into a flat object.
+ */
+export const flattenStyles = (style) => {
+    if (!style)
+        return null;
+    const flat = StyleSheet.flatten(style);
+    return (flat ?? null);
+};
+//# sourceMappingURL=flattenStyles.js.map

package/lib/utils/flattenStyles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"flattenStyles.js","sourceRoot":"","sources":["../../src/utils/flattenStyles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAkB,UAAU,EAAkB,MAAM,cAAc,CAAC;AAI1E;;GAEG;AACH,MAAM,CAAC,MAAM,aAAa,GAAG,CAAC,KAAc,EAAsB,EAAE;IAClE,IAAI,CAAC,KAAK;QAAE,OAAO,IAAI,CAAC;IACxB,MAAM,IAAI,GAAG,UAAU,CAAC,OAAO,CAAC,KAA6B,CAAC,CAAC;IAC/D,OAAO,CAAC,IAAI,IAAI,IAAI,CAAuB,CAAC;AAC9C,CAAC,CAAC"}

package/lib/utils/hitTest.d.ts

@@ -0,0 +1,7 @@
+import type { MeasuredElement } from '../fiber';
+/**
+ * Given a tap point and a layout snapshot, return all elements
+ * whose bounds contain the point, sorted by area (smallest first).
+ */
+export declare const hitTest: (snapshot: MeasuredElement[], tapX: number, tapY: number) => MeasuredElement[];
+//# sourceMappingURL=hitTest.d.ts.map

package/lib/utils/hitTest.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"hitTest.d.ts","sourceRoot":"","sources":["../../src/utils/hitTest.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,UAAU,CAAC;AAEhD;;;GAGG;AACH,eAAO,MAAM,OAAO,aACR,eAAe,EAAE,QACrB,MAAM,QACN,MAAM,KACX,eAAe,EAkBjB,CAAC"}