react-native-element-inspector 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Mohamed Abdinasir
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,134 @@
+# react-native-element-inspector
+
+On-device element inspector for React Native. The "Inspect Element" experience for mobile.
+
+Tap any element in your app to see its styles, edit them live, toggle properties on and off, and add new ones - all from a draggable floating panel. Zero external dependencies, pure React Native.
+
+<p align="center">
+  <img src="assets/screenshot.png" alt="Inspecting nested styles" width="270" />
+  &nbsp;&nbsp;
+  <img src="assets/screenshot-add-property.png" alt="Adding a new property" width="270" />
+  &nbsp;&nbsp;
+  <img src="assets/screenshot-edit.png" alt="Editing a value inline" width="270" />
+</p>
+
+## Features
+
+- **Tap to select** - tap any element to inspect it. Overlapping elements are sorted smallest-first so you always get the one you meant
+- **Floating bubble** - a draggable radar-sweep bubble that snaps to screen edges, built with PanResponder + Animated
+- **Inspector panel** - expands into a scrollable list of every style property on the selected element
+- **Live editing** - tap any value (or key) to edit it inline. Changes apply instantly via React's reconciler
+- **Property toggling** - checkbox next to each property to disable/enable it without deleting
+- **Add properties** - "+ add property" button at the bottom for adding new style properties on the fly
+- **Color swatches** - visual color preview next to color properties
+- **Element cycling** - cycle through overlapping elements at the same tap point
+- **Box model highlight** - Chrome DevTools-style overlay showing margin, padding, and content areas
+- **Source mapping** - displays component name and source file location
+- **React 18 & 19** - version-aware fiber adapters for both React versions
+- **Old Architecture & Fabric** - works on both via `overrideProps()`
+
+## Installation
+
+```bash
+npm install react-native-element-inspector
+# or
+yarn add react-native-element-inspector
+# or
+bun add react-native-element-inspector
+```
+
+### Peer dependencies
+
+- `react >= 18.0.0`
+- `react-native >= 0.72.0`
+
+No native modules, no linking, no pod install. It's pure TypeScript.
+
+## Quick start
+
+Wrap your root component with `<ElementInspector>`:
+
+```tsx
+import { ElementInspector } from 'react-native-element-inspector';
+
+const App = () => (
+  <ElementInspector enabled={__DEV__}>
+    <NavigationContainer>
+      {/* your app */}
+    </NavigationContainer>
+  </ElementInspector>
+);
+
+export default App;
+```
+
+That's it. A floating bubble appears in dev mode. Tap it to enter inspect mode, then tap any element.
+
+## Usage with Expo
+
+Works out of the box with Expo - no config plugins or native code needed:
+
+```tsx
+import { ElementInspector } from 'react-native-element-inspector';
+
+const App = () => (
+  <ElementInspector enabled={__DEV__}>
+    <View style={styles.container}>
+      <Text style={styles.title}>Hello World</Text>
+    </View>
+  </ElementInspector>
+);
+
+export default App;
+```
+
+## Usage with React Navigation
+
+Wrap your entire navigation tree so every screen is inspectable:
+
+```tsx
+import { NavigationContainer } from '@react-navigation/native';
+import { ElementInspector } from 'react-native-element-inspector';
+
+const App = () => (
+  <ElementInspector enabled={__DEV__}>
+    <NavigationContainer>
+      <Tab.Navigator>
+        <Tab.Screen name="Home" component={HomeScreen} />
+        <Tab.Screen name="Settings" component={SettingsScreen} />
+      </Tab.Navigator>
+    </NavigationContainer>
+  </ElementInspector>
+);
+```
+
+## API
+
+### `<ElementInspector>`
+
+The only component you need. Wrap your app with it.
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `enabled` | `boolean` | `false` | Enable the inspector. Pass `__DEV__` to only enable in development |
+| `children` | `ReactNode` | -| Your app content |
+
+When `enabled` is `false`, the component renders only its children with zero overhead.
+
+## How it works
+
+1. **Fiber access** - uses `__REACT_DEVTOOLS_GLOBAL_HOOK__` to walk the React fiber tree and discover every host element
+2. **Layout snapshots** - measures all elements and caches their positions for fast hit-testing (debounced rebuild on layout changes)
+3. **Hit testing** - on tap, finds all elements at that point and sorts by area (smallest first)
+4. **Style reading** - reads `fiber.memoizedProps.style` and resolves `StyleSheet` IDs to plain objects via `StyleSheet.flatten()`
+5. **Live mutations** - applies style changes through `overrideProps()` on the fiber, which triggers React's reconciler to update the element
+
+## Requirements
+
+- React Native 0.72+
+- React 18 or 19
+- Development mode (`__DEV__`) recommended - the inspector reads from React internals that are available in dev builds
+
+## License
+
+MIT

package/lib/ElementCycler.d.ts

@@ -0,0 +1,14 @@
+interface ElementCyclerProps {
+    /** Total number of overlapping elements at the tap point */
+    total: number;
+    /** Currently selected index (0-based) */
+    currentIndex: number;
+    /** Name of the currently selected component */
+    componentName: string;
+    onPrevious: () => void;
+    onNext: () => void;
+}
+/** UI for cycling through overlapping elements at a tap point. */
+export declare const ElementCycler: ({ total, currentIndex, componentName, onPrevious, onNext, }: ElementCyclerProps) => import("react/jsx-runtime").JSX.Element | null;
+export {};
+//# sourceMappingURL=ElementCycler.d.ts.map

package/lib/ElementCycler.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ElementCycler.d.ts","sourceRoot":"","sources":["../src/ElementCycler.tsx"],"names":[],"mappings":"AAEA,UAAU,kBAAkB;IAC1B,4DAA4D;IAC5D,KAAK,EAAE,MAAM,CAAC;IACd,yCAAyC;IACzC,YAAY,EAAE,MAAM,CAAC;IACrB,+CAA+C;IAC/C,aAAa,EAAE,MAAM,CAAC;IACtB,UAAU,EAAE,MAAM,IAAI,CAAC;IACvB,MAAM,EAAE,MAAM,IAAI,CAAC;CACpB;AAED,kEAAkE;AAClE,eAAO,MAAM,aAAa,gEAMvB,kBAAkB,mDAkBpB,CAAC"}

package/lib/ElementCycler.js

@@ -0,0 +1,33 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';
+/** UI for cycling through overlapping elements at a tap point. */
+export const ElementCycler = ({ total, currentIndex, componentName, onPrevious, onNext, }) => {
+    if (total <= 1)
+        return null;
+    return (_jsxs(View, { style: styles.container, children: [_jsx(TouchableOpacity, { onPress: onPrevious, style: styles.button, activeOpacity: 0.6, children: _jsx(Text, { style: styles.arrow, children: "\u25B2" }) }), _jsxs(Text, { style: styles.label, numberOfLines: 1, children: [componentName, " (", currentIndex + 1, "/", total, ")"] }), _jsx(TouchableOpacity, { onPress: onNext, style: styles.button, activeOpacity: 0.6, children: _jsx(Text, { style: styles.arrow, children: "\u25BC" }) })] }));
+};
+const styles = StyleSheet.create({
+    container: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        borderRadius: 6,
+        paddingHorizontal: 4,
+        paddingVertical: 2,
+    },
+    button: {
+        paddingHorizontal: 8,
+        paddingVertical: 4,
+    },
+    arrow: {
+        color: '#AAAAAA',
+        fontSize: 13,
+    },
+    label: {
+        color: '#DDDDDD',
+        fontSize: 13,
+        fontWeight: '500',
+        marginHorizontal: 4,
+        flexShrink: 1,
+    },
+});
+//# sourceMappingURL=ElementCycler.js.map

package/lib/ElementCycler.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ElementCycler.js","sourceRoot":"","sources":["../src/ElementCycler.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,gBAAgB,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AAaxE,kEAAkE;AAClE,MAAM,CAAC,MAAM,aAAa,GAAG,CAAC,EAC5B,KAAK,EACL,YAAY,EACZ,aAAa,EACb,UAAU,EACV,MAAM,GACa,EAAE,EAAE;IACvB,IAAI,KAAK,IAAI,CAAC;QAAE,OAAO,IAAI,CAAC;IAE5B,OAAO,CACL,MAAC,IAAI,IAAC,KAAK,EAAE,MAAM,CAAC,SAAS,aAC3B,KAAC,gBAAgB,IAAC,OAAO,EAAE,UAAU,EAAE,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,aAAa,EAAE,GAAG,YAC7E,KAAC,IAAI,IAAC,KAAK,EAAE,MAAM,CAAC,KAAK,uBAAU,GAClB,EAEnB,MAAC,IAAI,IAAC,KAAK,EAAE,MAAM,CAAC,KAAK,EAAE,aAAa,EAAE,CAAC,aACxC,aAAa,QAAI,YAAY,GAAG,CAAC,OAAG,KAAK,SACrC,EAEP,KAAC,gBAAgB,IAAC,OAAO,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,aAAa,EAAE,GAAG,YACzE,KAAC,IAAI,IAAC,KAAK,EAAE,MAAM,CAAC,KAAK,uBAAU,GAClB,IACd,CACR,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,MAAM,GAAG,UAAU,CAAC,MAAM,CAAC;IAC/B,SAAS,EAAE;QACT,aAAa,EAAE,KAAK;QACpB,UAAU,EAAE,QAAQ;QACpB,YAAY,EAAE,CAAC;QACf,iBAAiB,EAAE,CAAC;QACpB,eAAe,EAAE,CAAC;KACnB;IACD,MAAM,EAAE;QACN,iBAAiB,EAAE,CAAC;QACpB,eAAe,EAAE,CAAC;KACnB;IACD,KAAK,EAAE;QACL,KAAK,EAAE,SAAS;QAChB,QAAQ,EAAE,EAAE;KACb;IACD,KAAK,EAAE;QACL,KAAK,EAAE,SAAS;QAChB,QAAQ,EAAE,EAAE;QACZ,UAAU,EAAE,KAAK;QACjB,gBAAgB,EAAE,CAAC;QACnB,UAAU,EAAE,CAAC;KACd;CACF,CAAC,CAAC"}

package/lib/ElementHighlighter.d.ts

@@ -0,0 +1,21 @@
+import { type MeasuredElement } from './fiber';
+interface ElementHighlighterProps {
+    element: MeasuredElement | null;
+    outlineOnly?: boolean;
+}
+/**
+ * Draws a Chrome DevTools-style highlight on the selected element.
+ *
+ * Full mode: margin (orange), padding (green), content (blue) fills + outline.
+ * Outline-only mode: just the crisp border — keeps selection visible without obscuring content.
+ *
+ * The measured rect is the border box (includes border + padding, NOT margin).
+ * Margin extends outward, padding/content sit inside.
+ *
+ * Layering trick: each nested View's background covers the parent's color,
+ * so only the "strips" around the edges remain visible:
+ *   orange margin strips → green padding strips → blue content fill
+ */
+export declare const ElementHighlighter: ({ element, outlineOnly }: ElementHighlighterProps) => import("react/jsx-runtime").JSX.Element | null;
+export {};
+//# sourceMappingURL=ElementHighlighter.d.ts.map

package/lib/ElementHighlighter.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ElementHighlighter.d.ts","sourceRoot":"","sources":["../src/ElementHighlighter.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAgB,KAAK,eAAe,EAAE,MAAM,SAAS,CAAC;AAG7D,UAAU,uBAAuB;IAC/B,OAAO,EAAE,eAAe,GAAG,IAAI,CAAC;IAChC,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAED;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,kBAAkB,6BAAsC,uBAAuB,mDA4E3F,CAAC"}

package/lib/ElementHighlighter.js

@@ -0,0 +1,89 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { StyleSheet, View } from 'react-native';
+import { BOX_MODEL_COLORS, Z_INDEX } from './constants';
+import { FiberAdapter } from './fiber';
+import { extractBoxModel } from './utils';
+/**
+ * Draws a Chrome DevTools-style highlight on the selected element.
+ *
+ * Full mode: margin (orange), padding (green), content (blue) fills + outline.
+ * Outline-only mode: just the crisp border — keeps selection visible without obscuring content.
+ *
+ * The measured rect is the border box (includes border + padding, NOT margin).
+ * Margin extends outward, padding/content sit inside.
+ *
+ * Layering trick: each nested View's background covers the parent's color,
+ * so only the "strips" around the edges remain visible:
+ *   orange margin strips → green padding strips → blue content fill
+ */
+export const ElementHighlighter = ({ element, outlineOnly = false }) => {
+    if (!element)
+        return null;
+    const style = FiberAdapter.getStyle(element.fiber);
+    const { margin, border, padding } = extractBoxModel(style, {
+        width: element.width,
+        height: element.height,
+    });
+    // Margin box extends outward from the measured rect
+    const marginBoxLeft = element.x - margin.left;
+    const marginBoxTop = element.y - margin.top;
+    const marginBoxWidth = element.width + margin.left + margin.right;
+    const marginBoxHeight = element.height + margin.top + margin.bottom;
+    return (_jsxs(View, { pointerEvents: 'none', style: styles.root, children: [!outlineOnly && (_jsx(_Fragment, { children: _jsx(View, { style: [
+                        styles.marginLayer,
+                        {
+                            left: marginBoxLeft,
+                            top: marginBoxTop,
+                            width: marginBoxWidth,
+                            height: marginBoxHeight,
+                        },
+                    ], children: _jsx(View, { style: [
+                            styles.paddingLayer,
+                            {
+                                position: 'absolute',
+                                left: margin.left,
+                                top: margin.top,
+                                width: element.width,
+                                height: element.height,
+                            },
+                        ], children: _jsx(View, { style: [
+                                styles.contentLayer,
+                                {
+                                    position: 'absolute',
+                                    left: border.left + padding.left,
+                                    top: border.top + padding.top,
+                                    right: border.right + padding.right,
+                                    bottom: border.bottom + padding.bottom,
+                                },
+                            ] }) }) }) })), _jsx(View, { style: [
+                    styles.outline,
+                    {
+                        left: element.x,
+                        top: element.y,
+                        width: element.width,
+                        height: element.height,
+                    },
+                ] })] }));
+};
+const styles = StyleSheet.create({
+    root: {
+        ...StyleSheet.absoluteFillObject,
+        zIndex: Z_INDEX.HIGHLIGHT,
+    },
+    marginLayer: {
+        position: 'absolute',
+        backgroundColor: BOX_MODEL_COLORS.margin,
+    },
+    paddingLayer: {
+        backgroundColor: BOX_MODEL_COLORS.padding,
+    },
+    contentLayer: {
+        backgroundColor: BOX_MODEL_COLORS.content,
+    },
+    outline: {
+        position: 'absolute',
+        borderWidth: 1.5,
+        borderColor: BOX_MODEL_COLORS.outline,
+    },
+});
+//# sourceMappingURL=ElementHighlighter.js.map

package/lib/ElementHighlighter.js.map

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

package/lib/ElementInspector.d.ts

@@ -0,0 +1,12 @@
+import type { ReactNode } from 'react';
+export interface ElementInspectorProps {
+    /** Only enable in dev mode. Pass `__DEV__` here. */
+    enabled?: boolean;
+    children: ReactNode;
+}
+/**
+ * Root wrapper component. Wrap your app root with this.
+ * In production (enabled=false), renders children with zero overhead.
+ */
+export declare const ElementInspector: ({ enabled, children }: ElementInspectorProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=ElementInspector.d.ts.map

package/lib/ElementInspector.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ElementInspector.d.ts","sourceRoot":"","sources":["../src/ElementInspector.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAQvC,MAAM,WAAW,qBAAqB;IACpC,oDAAoD;IACpD,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED;;;GAGG;AACH,eAAO,MAAM,gBAAgB,0BAAmC,qBAAqB,4CAyFpF,CAAC"}

package/lib/ElementInspector.js

@@ -0,0 +1,74 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useState } from 'react';
+import { StyleSheet, View } from 'react-native';
+import { FLOATING_PANEL, Z_INDEX } from './constants';
+import { ElementHighlighter } from './ElementHighlighter';
+import { FloatingPanel } from './floatingPanel';
+import { useDebouncedCallback, useLayoutSnapshot, useTapToSelect } from './hooks';
+/**
+ * Root wrapper component. Wrap your app root with this.
+ * In production (enabled=false), renders children with zero overhead.
+ */
+export const ElementInspector = ({ enabled = false, children }) => {
+    const [isInspecting, setIsInspecting] = useState(false);
+    const [highlightVisible, setHighlightVisible] = useState(false);
+    const { snapshot, buildSnapshot } = useLayoutSnapshot();
+    const { selected, matches, selectedIndex, handleTap, cycleNext, cyclePrevious, clearSelection } = useTapToSelect(snapshot);
+    const hideHighlight = useDebouncedCallback(() => setHighlightVisible(false), FLOATING_PANEL.HIGHLIGHT_FLASH_MS);
+    const flashHighlight = useCallback(() => {
+        setHighlightVisible(true);
+        hideHighlight();
+    }, [hideHighlight]);
+    if (!enabled) {
+        return _jsx(_Fragment, { children: children });
+    }
+    // Derive panel state from inspector state
+    const panelState = isInspecting ? (selected ? 'expanded' : 'handle') : 'bubble';
+    const toggleInspect = async () => {
+        if (isInspecting) {
+            setIsInspecting(false);
+            clearSelection();
+        }
+        else {
+            try {
+                await buildSnapshot();
+                setIsInspecting(true);
+            }
+            catch (error) {
+                // biome-ignore lint/suspicious/noConsole: dev tool — errors should be visible
+                console.warn('[ElementInspector] Snapshot failed:', error);
+            }
+        }
+    };
+    const handleClose = () => {
+        if (selected) {
+            // Expanded → handle (deselect element, stay in inspect mode)
+            clearSelection();
+        }
+        else {
+            // Handle → bubble (exit inspect mode)
+            setIsInspecting(false);
+        }
+    };
+    return (_jsxs(View, { style: styles.container, children: [children, isInspecting && (_jsx(View, { style: styles.tapOverlay, onStartShouldSetResponder: () => true, onResponderRelease: (event) => {
+                    handleTap(event);
+                    flashHighlight();
+                } })), isInspecting && selected && _jsx(ElementHighlighter, { element: selected, outlineOnly: true }), highlightVisible && _jsx(ElementHighlighter, { element: selected }), _jsx(FloatingPanel, { panelState: panelState, selected: selected, matches: matches, selectedIndex: selectedIndex, onToggleInspect: toggleInspect, onCycleNext: () => {
+                    cycleNext();
+                    flashHighlight();
+                }, onCyclePrevious: () => {
+                    cyclePrevious();
+                    flashHighlight();
+                }, onClose: handleClose })] }));
+};
+const styles = StyleSheet.create({
+    container: {
+        flex: 1,
+    },
+    tapOverlay: {
+        ...StyleSheet.absoluteFillObject,
+        backgroundColor: 'transparent',
+        zIndex: Z_INDEX.TAP_OVERLAY,
+    },
+});
+//# sourceMappingURL=ElementInspector.js.map

package/lib/ElementInspector.js.map

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

package/lib/components/Checkbox.d.ts

@@ -0,0 +1,7 @@
+interface CheckboxProps {
+    checked: boolean;
+    onToggle: () => void;
+}
+export declare const Checkbox: ({ checked, onToggle }: CheckboxProps) => import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=Checkbox.d.ts.map

package/lib/components/Checkbox.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Checkbox.d.ts","sourceRoot":"","sources":["../../src/components/Checkbox.tsx"],"names":[],"mappings":"AAEA,UAAU,aAAa;IACrB,OAAO,EAAE,OAAO,CAAC;IACjB,QAAQ,EAAE,MAAM,IAAI,CAAC;CACtB;AAED,eAAO,MAAM,QAAQ,0BAA2B,aAAa,4CAM5D,CAAC"}

package/lib/components/Checkbox.js

@@ -0,0 +1,30 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Pressable, StyleSheet, Text, View } from 'react-native';
+export const Checkbox = ({ checked, onToggle }) => (_jsx(Pressable, { onPress: onToggle, hitSlop: 6, style: styles.pressable, children: _jsx(View, { style: [styles.box, checked && styles.checked], children: checked && _jsx(Text, { style: styles.tick, children: "\u2713" }) }) }));
+const styles = StyleSheet.create({
+    pressable: {
+        justifyContent: 'center',
+        alignItems: 'center',
+        marginRight: 6,
+    },
+    box: {
+        width: 12,
+        height: 12,
+        borderRadius: 2,
+        borderWidth: 1.5,
+        borderColor: '#555',
+        justifyContent: 'center',
+        alignItems: 'center',
+    },
+    checked: {
+        backgroundColor: '#4FC3F7',
+        borderColor: '#4FC3F7',
+    },
+    tick: {
+        fontSize: 9,
+        lineHeight: 11,
+        color: '#fff',
+        fontWeight: '700',
+    },
+});
+//# sourceMappingURL=Checkbox.js.map

package/lib/components/Checkbox.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Checkbox.js","sourceRoot":"","sources":["../../src/components/Checkbox.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AAOjE,MAAM,CAAC,MAAM,QAAQ,GAAG,CAAC,EAAE,OAAO,EAAE,QAAQ,EAAiB,EAAE,EAAE,CAAC,CAChE,KAAC,SAAS,IAAC,OAAO,EAAE,QAAQ,EAAE,OAAO,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,CAAC,SAAS,YAC/D,KAAC,IAAI,IAAC,KAAK,EAAE,CAAC,MAAM,CAAC,GAAG,EAAE,OAAO,IAAI,MAAM,CAAC,OAAO,CAAC,YACjD,OAAO,IAAI,KAAC,IAAI,IAAC,KAAK,EAAE,MAAM,CAAC,IAAI,uBAAU,GACzC,GACG,CACb,CAAC;AAEF,MAAM,MAAM,GAAG,UAAU,CAAC,MAAM,CAAC;IAC/B,SAAS,EAAE;QACT,cAAc,EAAE,QAAQ;QACxB,UAAU,EAAE,QAAQ;QACpB,WAAW,EAAE,CAAC;KACf;IACD,GAAG,EAAE;QACH,KAAK,EAAE,EAAE;QACT,MAAM,EAAE,EAAE;QACV,YAAY,EAAE,CAAC;QACf,WAAW,EAAE,GAAG;QAChB,WAAW,EAAE,MAAM;QACnB,cAAc,EAAE,QAAQ;QACxB,UAAU,EAAE,QAAQ;KACrB;IACD,OAAO,EAAE;QACP,eAAe,EAAE,SAAS;QAC1B,WAAW,EAAE,SAAS;KACvB;IACD,IAAI,EAAE;QACJ,QAAQ,EAAE,CAAC;QACX,UAAU,EAAE,EAAE;QACd,KAAK,EAAE,MAAM;QACb,UAAU,EAAE,KAAK;KAClB;CACF,CAAC,CAAC"}

package/lib/components/index.d.ts

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

package/lib/components/index.d.ts.map

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

package/lib/components/index.js

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

package/lib/components/index.js.map

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

package/lib/constants/colors.d.ts

@@ -0,0 +1,24 @@
+/** Chrome DevTools-style box model colors */
+export declare const BOX_MODEL_COLORS: {
+    readonly margin: "rgba(246, 178, 107, 0.4)";
+    readonly marginLabel: "#F6B26B";
+    readonly border: "rgba(255, 217, 102, 0.3)";
+    readonly borderLabel: "#FFD966";
+    readonly padding: "rgba(147, 196, 125, 0.4)";
+    readonly paddingLabel: "#6AA84F";
+    readonly content: "rgba(79, 195, 247, 0.3)";
+    readonly contentLabel: "#4A90D9";
+    readonly outline: "#4FC3F7";
+};
+/** VS Code-style syntax colors for the editable style property list */
+export declare const EDITABLE_VALUE_COLORS: {
+    readonly key: {
+        readonly text: "#9CDCFE";
+        readonly underline: "rgba(156, 220, 254, 0.4)";
+    };
+    readonly value: {
+        readonly text: "#CE9178";
+        readonly underline: "rgba(206, 145, 120, 0.4)";
+    };
+};
+//# sourceMappingURL=colors.d.ts.map

package/lib/constants/colors.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"colors.d.ts","sourceRoot":"","sources":["../../src/constants/colors.ts"],"names":[],"mappings":"AAAA,6CAA6C;AAC7C,eAAO,MAAM,gBAAgB;;;;;;;;;;CAUnB,CAAC;AAEX,uEAAuE;AACvE,eAAO,MAAM,qBAAqB;;;;;;;;;CAGxB,CAAC"}

package/lib/constants/colors.js

@@ -0,0 +1,18 @@
+/** Chrome DevTools-style box model colors */
+export const BOX_MODEL_COLORS = {
+    margin: 'rgba(246, 178, 107, 0.4)',
+    marginLabel: '#F6B26B',
+    border: 'rgba(255, 217, 102, 0.3)',
+    borderLabel: '#FFD966',
+    padding: 'rgba(147, 196, 125, 0.4)',
+    paddingLabel: '#6AA84F',
+    content: 'rgba(79, 195, 247, 0.3)',
+    contentLabel: '#4A90D9',
+    outline: '#4FC3F7',
+};
+/** VS Code-style syntax colors for the editable style property list */
+export const EDITABLE_VALUE_COLORS = {
+    key: { text: '#9CDCFE', underline: 'rgba(156, 220, 254, 0.4)' },
+    value: { text: '#CE9178', underline: 'rgba(206, 145, 120, 0.4)' },
+};
+//# sourceMappingURL=colors.js.map

package/lib/constants/colors.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"colors.js","sourceRoot":"","sources":["../../src/constants/colors.ts"],"names":[],"mappings":"AAAA,6CAA6C;AAC7C,MAAM,CAAC,MAAM,gBAAgB,GAAG;IAC9B,MAAM,EAAE,0BAA0B;IAClC,WAAW,EAAE,SAAS;IACtB,MAAM,EAAE,0BAA0B;IAClC,WAAW,EAAE,SAAS;IACtB,OAAO,EAAE,0BAA0B;IACnC,YAAY,EAAE,SAAS;IACvB,OAAO,EAAE,yBAAyB;IAClC,YAAY,EAAE,SAAS;IACvB,OAAO,EAAE,SAAS;CACV,CAAC;AAEX,uEAAuE;AACvE,MAAM,CAAC,MAAM,qBAAqB,GAAG;IACnC,GAAG,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,SAAS,EAAE,0BAA0B,EAAE;IAC/D,KAAK,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,SAAS,EAAE,0BAA0B,EAAE;CACzD,CAAC"}

package/lib/constants/index.d.ts

@@ -0,0 +1,3 @@
+export { BOX_MODEL_COLORS, EDITABLE_VALUE_COLORS } from './colors';
+export { EDITABLE_VALUE, FLOATING_PANEL, INSPECTOR_BUBBLE, MEASURE_TIMEOUT_MS, MONOSPACE_FONT, Z_INDEX, } from './ui';
+//# sourceMappingURL=index.d.ts.map

package/lib/constants/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/constants/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,qBAAqB,EAAE,MAAM,UAAU,CAAC;AACnE,OAAO,EACL,cAAc,EACd,cAAc,EACd,gBAAgB,EAChB,kBAAkB,EAClB,cAAc,EACd,OAAO,GACR,MAAM,MAAM,CAAC"}

package/lib/constants/index.js

@@ -0,0 +1,3 @@
+export { BOX_MODEL_COLORS, EDITABLE_VALUE_COLORS } from './colors';
+export { EDITABLE_VALUE, FLOATING_PANEL, INSPECTOR_BUBBLE, MEASURE_TIMEOUT_MS, MONOSPACE_FONT, Z_INDEX, } from './ui';
+//# sourceMappingURL=index.js.map

package/lib/constants/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/constants/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,qBAAqB,EAAE,MAAM,UAAU,CAAC;AACnE,OAAO,EACL,cAAc,EACd,cAAc,EACd,gBAAgB,EAChB,kBAAkB,EAClB,cAAc,EACd,OAAO,GACR,MAAM,MAAM,CAAC"}

package/lib/constants/ui.d.ts

@@ -0,0 +1,56 @@
+/** Cross-platform monospace font family */
+export declare const MONOSPACE_FONT: string;
+/** Z-index layering for inspector UI elements */
+export declare const Z_INDEX: {
+    readonly HIGHLIGHT: 9997;
+    readonly TAP_OVERLAY: 9998;
+    readonly FLOATING_PANEL: 10000;
+};
+/** Timeout for fiber measure() calls (ms) */
+export declare const MEASURE_TIMEOUT_MS = 3000;
+/** Floating panel dimensions and animation config */
+export declare const FLOATING_PANEL: {
+    readonly BUBBLE_SIZE: 48;
+    readonly HANDLE_WIDTH: 180;
+    readonly HANDLE_HEIGHT: 44;
+    readonly PANEL_WIDTH: 280;
+    readonly PANEL_HEIGHT: 320;
+    readonly PANEL_BODY_HEIGHT: 220;
+    readonly TAP_THRESHOLD: 5;
+    readonly EDGE_MARGIN: 12;
+    readonly TOP_SAFE_AREA: 50;
+    readonly BOTTOM_SAFE_AREA: 40;
+    readonly SNAP_FRICTION: 7;
+    readonly SNAP_TENSION: 40;
+    readonly EXPAND_DURATION: 250;
+    readonly HIGHLIGHT_FLASH_MS: 1500;
+};
+/** Validation constraints for editable style values */
+export declare const EDITABLE_VALUE: {
+    readonly VALID_STYLE_KEY: RegExp;
+    readonly MAX_VALUE_LENGTH: 200;
+};
+/** InspectorBubble sizing and animation trail config */
+export declare const INSPECTOR_BUBBLE: {
+    readonly SIZE: 48;
+    readonly SWEEP_WIDTH: 2.5;
+    readonly CENTER_DOT_SIZE: 8;
+    readonly TRAIL_ARMS: readonly [{
+        readonly key: "sweep";
+        readonly offsetDeg: 0;
+        readonly opacity: 0.9;
+    }, {
+        readonly key: "trail-1";
+        readonly offsetDeg: -18;
+        readonly opacity: 0.45;
+    }, {
+        readonly key: "trail-2";
+        readonly offsetDeg: -36;
+        readonly opacity: 0.3;
+    }, {
+        readonly key: "trail-3";
+        readonly offsetDeg: -54;
+        readonly opacity: 0.2;
+    }];
+};
+//# sourceMappingURL=ui.d.ts.map

package/lib/constants/ui.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ui.d.ts","sourceRoot":"","sources":["../../src/constants/ui.ts"],"names":[],"mappings":"AAEA,2CAA2C;AAC3C,eAAO,MAAM,cAAc,QAA0D,CAAC;AAEtF,iDAAiD;AACjD,eAAO,MAAM,OAAO;;;;CAIV,CAAC;AAEX,6CAA6C;AAC7C,eAAO,MAAM,kBAAkB,OAAO,CAAC;AAEvC,qDAAqD;AACrD,eAAO,MAAM,cAAc;;;;;;;;;;;;;;;CAejB,CAAC;AAEX,uDAAuD;AACvD,eAAO,MAAM,cAAc;;;CAGjB,CAAC;AAEX,wDAAwD;AACxD,eAAO,MAAM,gBAAgB;;;;;;;;;;;;;;;;;;;;;CAUnB,CAAC"}