react-native-element-inspector 0.1.0

package/lib/constants/ui.js

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

package/lib/constants/ui.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ui.js","sourceRoot":"","sources":["../../src/constants/ui.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AAExC,2CAA2C;AAC3C,MAAM,CAAC,MAAM,cAAc,GAAG,QAAQ,CAAC,MAAM,CAAC,EAAE,GAAG,EAAE,OAAO,EAAE,OAAO,EAAE,WAAW,EAAE,CAAC,CAAC;AAEtF,iDAAiD;AACjD,MAAM,CAAC,MAAM,OAAO,GAAG;IACrB,SAAS,EAAE,IAAI;IACf,WAAW,EAAE,IAAI;IACjB,cAAc,EAAE,KAAK;CACb,CAAC;AAEX,6CAA6C;AAC7C,MAAM,CAAC,MAAM,kBAAkB,GAAG,IAAI,CAAC;AAEvC,qDAAqD;AACrD,MAAM,CAAC,MAAM,cAAc,GAAG;IAC5B,WAAW,EAAE,EAAE;IACf,YAAY,EAAE,GAAG;IACjB,aAAa,EAAE,EAAE;IACjB,WAAW,EAAE,GAAG;IAChB,YAAY,EAAE,GAAG;IACjB,iBAAiB,EAAE,GAAG;IACtB,aAAa,EAAE,CAAC;IAChB,WAAW,EAAE,EAAE;IACf,aAAa,EAAE,EAAE;IACjB,gBAAgB,EAAE,EAAE;IACpB,aAAa,EAAE,CAAC;IAChB,YAAY,EAAE,EAAE;IAChB,eAAe,EAAE,GAAG;IACpB,kBAAkB,EAAE,IAAI;CAChB,CAAC;AAEX,uDAAuD;AACvD,MAAM,CAAC,MAAM,cAAc,GAAG;IAC5B,eAAe,EAAE,wBAAwB;IACzC,gBAAgB,EAAE,GAAG;CACb,CAAC;AAEX,wDAAwD;AACxD,MAAM,CAAC,MAAM,gBAAgB,GAAG;IAC9B,IAAI,EAAE,EAAE;IACR,WAAW,EAAE,GAAG;IAChB,eAAe,EAAE,CAAC;IAClB,UAAU,EAAE;QACV,EAAE,GAAG,EAAE,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,OAAO,EAAE,GAAG,EAAE;QAC5C,EAAE,GAAG,EAAE,SAAS,EAAE,SAAS,EAAE,CAAC,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE;QACjD,EAAE,GAAG,EAAE,SAAS,EAAE,SAAS,EAAE,CAAC,EAAE,EAAE,OAAO,EAAE,GAAG,EAAE;QAChD,EAAE,GAAG,EAAE,SAAS,EAAE,SAAS,EAAE,CAAC,EAAE,EAAE,OAAO,EAAE,GAAG,EAAE;KACjD;CACO,CAAC"}

package/lib/fiber/FiberAdapter.d.ts

@@ -0,0 +1,52 @@
+import { type FiberNode } from './types';
+/**
+ * Unified API for all fiber tree access.
+ * Abstracts away React version differences.
+ */
+export declare const FiberAdapter: {
+    /**
+     * Get the fiber root from the React DevTools global hook.
+     * Returns null if the hook is not available (production build).
+     */
+    getFiberRoot: () => FiberNode | null;
+    /**
+     * Walk the fiber tree and collect all host component fibers with their depth.
+     * Depth is needed later for z-ordering in the layout snapshot.
+     */
+    walkHostFibers: (root: FiberNode) => Array<{
+        fiber: FiberNode;
+        depth: number;
+    }>;
+    /**
+     * Get the flattened style object from a fiber's props.
+     */
+    getStyle: (fiber: FiberNode) => Record<string, unknown> | null;
+    /**
+     * Get the source file location from a fiber's debug info.
+     */
+    getSource: (fiber: FiberNode) => {
+        fileName: string;
+        lineNumber: number;
+    } | null;
+    /**
+     * Get the display name of the component.
+     */
+    getComponentName: (fiber: FiberNode) => string;
+    /**
+     * Measure a fiber's native view on screen.
+     * Returns a promise with { x, y, width, height }.
+     */
+    measure: (fiber: FiberNode) => Promise<{
+        x: number;
+        y: number;
+        width: number;
+        height: number;
+    }>;
+    /**
+     * Replace the style on a fiber using the devtools hook.
+     * Caller is responsible for building the final style object.
+     * Works on both old arch and Fabric.
+     */
+    setStyle: (fiber: FiberNode, style: unknown) => boolean;
+};
+//# sourceMappingURL=FiberAdapter.d.ts.map

package/lib/fiber/FiberAdapter.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FiberAdapter.d.ts","sourceRoot":"","sources":["../../src/fiber/FiberAdapter.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,SAAS,EAAsB,MAAM,SAAS,CAAC;AAE7D;;;GAGG;AACH,eAAO,MAAM,YAAY;IACvB;;;OAGG;wBACe,SAAS,GAAG,IAAI;IAsBlC;;;OAGG;2BACoB,SAAS,KAAG,KAAK,CAAC;QAAE,KAAK,EAAE,SAAS,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,CAAC;IAmB7E;;OAEG;sBACe,SAAS,KAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,IAAI;IAI5D;;OAEG;uBACgB,SAAS,KAAG;QAAE,QAAQ,EAAE,MAAM,CAAC;QAAC,UAAU,EAAE,MAAM,CAAA;KAAE,GAAG,IAAI;IAI9E;;OAEG;8BACuB,SAAS,KAAG,MAAM;IAO5C;;;OAGG;qBACc,SAAS,KAAG,OAAO,CAAC;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAE,CAAC;IAwC7F;;;;OAIG;sBACe,SAAS,SAAS,OAAO,KAAG,OAAO;CAqBtD,CAAC"}

package/lib/fiber/FiberAdapter.js

@@ -0,0 +1,112 @@
+import { MEASURE_TIMEOUT_MS } from '../constants';
+import { flattenStyles } from '../utils/flattenStyles';
+import { HOST_COMPONENT_TAG } from './types';
+/**
+ * Unified API for all fiber tree access.
+ * Abstracts away React version differences.
+ */
+export const FiberAdapter = {
+    /**
+     * Get the fiber root from the React DevTools global hook.
+     * Returns null if the hook is not available (production build).
+     */
+    getFiberRoot: () => {
+        const hook = globalThis.__REACT_DEVTOOLS_GLOBAL_HOOK__;
+        if (!(hook?.renderers && hook.getFiberRoots))
+            return null;
+        // Try each renderer ID — the RN renderer isn't always ID 1
+        for (const rendererId of hook.renderers.keys()) {
+            const roots = hook.getFiberRoots(rendererId);
+            if (!roots || roots.size === 0)
+                continue;
+            const root = roots.values().next().value;
+            if (root?.current)
+                return root.current;
+        }
+        return null;
+    },
+    /**
+     * Walk the fiber tree and collect all host component fibers with their depth.
+     * Depth is needed later for z-ordering in the layout snapshot.
+     */
+    walkHostFibers: (root) => {
+        const hostFibers = [];
+        const walk = (fiber, depth) => {
+            let current = fiber;
+            while (current) {
+                if (current.tag === HOST_COMPONENT_TAG) {
+                    hostFibers.push({ fiber: current, depth });
+                }
+                walk(current.child, depth + 1);
+                current = current.sibling;
+            }
+        };
+        walk(root.child, 0);
+        return hostFibers;
+    },
+    /**
+     * Get the flattened style object from a fiber's props.
+     */
+    getStyle: (fiber) => {
+        return flattenStyles(fiber.memoizedProps?.style);
+    },
+    /**
+     * Get the source file location from a fiber's debug info.
+     */
+    getSource: (fiber) => {
+        return fiber._debugSource ?? null;
+    },
+    /**
+     * Get the display name of the component.
+     */
+    getComponentName: (fiber) => {
+        if (typeof fiber.type === 'string')
+            return fiber.type;
+        if (typeof fiber.type === 'function')
+            return fiber.type.displayName ?? fiber.type.name ?? 'Unknown';
+        return 'Unknown';
+    },
+    /**
+     * Measure a fiber's native view on screen.
+     * Returns a promise with { x, y, width, height }.
+     */
+    measure: (fiber) => {
+        return new Promise((resolve, reject) => {
+            const stateNode = fiber.stateNode;
+            // Old arch: stateNode.measure()
+            // Fabric: stateNode.canonical.publicInstance.measure()
+            const target = stateNode?.measure
+                ? stateNode
+                : (stateNode?.canonical?.publicInstance ?? stateNode?.canonical);
+            if (!target?.measure) {
+                reject(new Error('Fiber stateNode does not support measure()'));
+                return;
+            }
+            const timeoutId = setTimeout(() => {
+                reject(new Error('measure() timed out'));
+            }, MEASURE_TIMEOUT_MS);
+            target.measure((_x, _y, width, height, pageX, pageY) => {
+                clearTimeout(timeoutId);
+                resolve({ x: pageX, y: pageY, width, height });
+            });
+        });
+    },
+    /**
+     * Replace the style on a fiber using the devtools hook.
+     * Caller is responsible for building the final style object.
+     * Works on both old arch and Fabric.
+     */
+    setStyle: (fiber, style) => {
+        const hook = globalThis.__REACT_DEVTOOLS_GLOBAL_HOOK__;
+        if (!hook?.renderers)
+            return false;
+        for (const renderer of hook.renderers.values()) {
+            if (renderer?.overrideProps) {
+                renderer.overrideProps(fiber, ['style'], style);
+                return true;
+            }
+        }
+        return false;
+    },
+};
+//# sourceMappingURL=FiberAdapter.js.map

package/lib/fiber/FiberAdapter.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FiberAdapter.js","sourceRoot":"","sources":["../../src/fiber/FiberAdapter.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,cAAc,CAAC;AAClD,OAAO,EAAE,aAAa,EAAE,MAAM,wBAAwB,CAAC;AACvD,OAAO,EAAkB,kBAAkB,EAAE,MAAM,SAAS,CAAC;AAE7D;;;GAGG;AACH,MAAM,CAAC,MAAM,YAAY,GAAG;IAC1B;;;OAGG;IACH,YAAY,EAAE,GAAqB,EAAE;QACnC,MAAM,IAAI,GAAI,UAAsC,CAAC,8BAKxC,CAAC;QAEd,IAAI,CAAC,CAAC,IAAI,EAAE,SAAS,IAAI,IAAI,CAAC,aAAa,CAAC;YAAE,OAAO,IAAI,CAAC;QAE1D,2DAA2D;QAC3D,KAAK,MAAM,UAAU,IAAI,IAAI,CAAC,SAAS,CAAC,IAAI,EAAE,EAAE,CAAC;YAC/C,MAAM,KAAK,GAAG,IAAI,CAAC,aAAa,CAAC,UAAU,CAAC,CAAC;YAC7C,IAAI,CAAC,KAAK,IAAI,KAAK,CAAC,IAAI,KAAK,CAAC;gBAAE,SAAS;YAEzC,MAAM,IAAI,GAAG,KAAK,CAAC,MAAM,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,CAAC;YACzC,IAAI,IAAI,EAAE,OAAO;gBAAE,OAAO,IAAI,CAAC,OAAO,CAAC;QACzC,CAAC;QAED,OAAO,IAAI,CAAC;IACd,CAAC;IAED;;;OAGG;IACH,cAAc,EAAE,CAAC,IAAe,EAA8C,EAAE;QAC9E,MAAM,UAAU,GAA+C,EAAE,CAAC;QAElE,MAAM,IAAI,GAAG,CAAC,KAAuB,EAAE,KAAa,EAAE,EAAE;YACtD,IAAI,OAAO,GAAG,KAAK,CAAC;YACpB,OAAO,OAAO,EAAE,CAAC;gBACf,IAAI,OAAO,CAAC,GAAG,KAAK,kBAAkB,EAAE,CAAC;oBACvC,UAAU,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,CAAC,CAAC;gBAC7C,CAAC;gBAED,IAAI,CAAC,OAAO,CAAC,KAAK,EAAE,KAAK,GAAG,CAAC,CAAC,CAAC;gBAC/B,OAAO,GAAG,OAAO,CAAC,OAAO,CAAC;YAC5B,CAAC;QACH,CAAC,CAAC;QAEF,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC;QACpB,OAAO,UAAU,CAAC;IACpB,CAAC;IAED;;OAEG;IACH,QAAQ,EAAE,CAAC,KAAgB,EAAkC,EAAE;QAC7D,OAAO,aAAa,CAAC,KAAK,CAAC,aAAa,EAAE,KAAK,CAAC,CAAC;IACnD,CAAC;IAED;;OAEG;IACH,SAAS,EAAE,CAAC,KAAgB,EAAmD,EAAE;QAC/E,OAAO,KAAK,CAAC,YAAY,IAAI,IAAI,CAAC;IACpC,CAAC;IAED;;OAEG;IACH,gBAAgB,EAAE,CAAC,KAAgB,EAAU,EAAE;QAC7C,IAAI,OAAO,KAAK,CAAC,IAAI,KAAK,QAAQ;YAAE,OAAO,KAAK,CAAC,IAAI,CAAC;QACtD,IAAI,OAAO,KAAK,CAAC,IAAI,KAAK,UAAU;YAClC,OAAO,KAAK,CAAC,IAAI,CAAC,WAAW,IAAI,KAAK,CAAC,IAAI,CAAC,IAAI,IAAI,SAAS,CAAC;QAChE,OAAO,SAAS,CAAC;IACnB,CAAC;IAED;;;OAGG;IACH,OAAO,EAAE,CAAC,KAAgB,EAAoE,EAAE;QAW9F,OAAO,IAAI,OAAO,CAAC,CAAC,OAAO,EAAE,MAAM,EAAE,EAAE;YACrC,MAAM,SAAS,GAAG,KAAK,CAAC,SAIhB,CAAC;YAET,gCAAgC;YAChC,uDAAuD;YACvD,MAAM,MAAM,GAAG,SAAS,EAAE,OAAO;gBAC/B,CAAC,CAAC,SAAS;gBACX,CAAC,CAAC,CAAC,SAAS,EAAE,SAAS,EAAE,cAAc,IAAI,SAAS,EAAE,SAAS,CAAC,CAAC;YAEnE,IAAI,CAAC,MAAM,EAAE,OAAO,EAAE,CAAC;gBACrB,MAAM,CAAC,IAAI,KAAK,CAAC,4CAA4C,CAAC,CAAC,CAAC;gBAChE,OAAO;YACT,CAAC;YAED,MAAM,SAAS,GAAG,UAAU,CAAC,GAAG,EAAE;gBAChC,MAAM,CAAC,IAAI,KAAK,CAAC,qBAAqB,CAAC,CAAC,CAAC;YAC3C,CAAC,EAAE,kBAAkB,CAAC,CAAC;YAEvB,MAAM,CAAC,OAAO,CAAC,CAAC,EAAE,EAAE,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,KAAK,EAAE,EAAE;gBACrD,YAAY,CAAC,SAAS,CAAC,CAAC;gBACxB,OAAO,CAAC,EAAE,CAAC,EAAE,KAAK,EAAE,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,EAAE,CAAC,CAAC;YACjD,CAAC,CAAC,CAAC;QACL,CAAC,CAAC,CAAC;IACL,CAAC;IAED;;;;OAIG;IACH,QAAQ,EAAE,CAAC,KAAgB,EAAE,KAAc,EAAW,EAAE;QACtD,MAAM,IAAI,GAAI,UAAsC,CAAC,8BAOxC,CAAC;QAEd,IAAI,CAAC,IAAI,EAAE,SAAS;YAAE,OAAO,KAAK,CAAC;QAEnC,KAAK,MAAM,QAAQ,IAAI,IAAI,CAAC,SAAS,CAAC,MAAM,EAAE,EAAE,CAAC;YAC/C,IAAI,QAAQ,EAAE,aAAa,EAAE,CAAC;gBAC5B,QAAQ,CAAC,aAAa,CAAC,KAAK,EAAE,CAAC,OAAO,CAAC,EAAE,KAAK,CAAC,CAAC;gBAChD,OAAO,IAAI,CAAC;YACd,CAAC;QACH,CAAC;QAED,OAAO,KAAK,CAAC;IACf,CAAC;CACF,CAAC"}

package/lib/fiber/detectVersion.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Detect the React version at runtime from the renderer.
+ * Used to load the correct fiber adapter if needed.
+ */
+export declare const detectReactVersion: () => {
+    major: number;
+    minor: number;
+} | null;
+//# sourceMappingURL=detectVersion.d.ts.map

package/lib/fiber/detectVersion.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"detectVersion.d.ts","sourceRoot":"","sources":["../../src/fiber/detectVersion.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,eAAO,MAAM,kBAAkB,QAAO;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAE,GAAG,IAcxE,CAAC"}

package/lib/fiber/detectVersion.js

@@ -0,0 +1,17 @@
+/**
+ * Detect the React version at runtime from the renderer.
+ * Used to load the correct fiber adapter if needed.
+ */
+export const detectReactVersion = () => {
+    const hook = globalThis.__REACT_DEVTOOLS_GLOBAL_HOOK__;
+    if (!hook?.renderers)
+        return null;
+    for (const renderer of hook.renderers.values()) {
+        if (!renderer?.version)
+            continue;
+        const [major, minor] = renderer.version.split('.').map(Number);
+        return { major: major ?? 0, minor: minor ?? 0 };
+    }
+    return null;
+};
+//# sourceMappingURL=detectVersion.js.map

package/lib/fiber/detectVersion.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"detectVersion.js","sourceRoot":"","sources":["../../src/fiber/detectVersion.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,MAAM,CAAC,MAAM,kBAAkB,GAAG,GAA4C,EAAE;IAC9E,MAAM,IAAI,GAAI,UAAsC,CAAC,8BAExC,CAAC;IAEd,IAAI,CAAC,IAAI,EAAE,SAAS;QAAE,OAAO,IAAI,CAAC;IAElC,KAAK,MAAM,QAAQ,IAAI,IAAI,CAAC,SAAS,CAAC,MAAM,EAAE,EAAE,CAAC;QAC/C,IAAI,CAAC,QAAQ,EAAE,OAAO;YAAE,SAAS;QACjC,MAAM,CAAC,KAAK,EAAE,KAAK,CAAC,GAAG,QAAQ,CAAC,OAAO,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC;QAC/D,OAAO,EAAE,KAAK,EAAE,KAAK,IAAI,CAAC,EAAE,KAAK,EAAE,KAAK,IAAI,CAAC,EAAE,CAAC;IAClD,CAAC;IAED,OAAO,IAAI,CAAC;AACd,CAAC,CAAC"}

package/lib/fiber/index.d.ts

@@ -0,0 +1,5 @@
+export { detectReactVersion } from './detectVersion';
+export { FiberAdapter } from './FiberAdapter';
+export type { FiberNode, MeasuredElement } from './types';
+export { HOST_COMPONENT_TAG } from './types';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/fiber/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AACrD,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC9C,YAAY,EAAE,SAAS,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAC1D,OAAO,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC"}

package/lib/fiber/index.js

@@ -0,0 +1,4 @@
+export { detectReactVersion } from './detectVersion';
+export { FiberAdapter } from './FiberAdapter';
+export { HOST_COMPONENT_TAG } from './types';
+//# sourceMappingURL=index.js.map

package/lib/fiber/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/fiber/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AACrD,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAE9C,OAAO,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC"}

package/lib/fiber/types.d.ts

@@ -0,0 +1,35 @@
+/** React component function with optional display name. */
+type ComponentFunction = ((...args: never[]) => unknown) & {
+    displayName?: string;
+    name?: string;
+};
+/** Minimal fiber node type — only the fields we access. */
+export interface FiberNode {
+    tag: number;
+    type: string | ComponentFunction;
+    memoizedProps: Record<string, unknown>;
+    stateNode: unknown;
+    child: FiberNode | null;
+    sibling: FiberNode | null;
+    return: FiberNode | null;
+    _debugSource?: {
+        fileName: string;
+        lineNumber: number;
+        columnNumber?: number;
+    };
+    _debugOwner?: FiberNode;
+}
+/** Host component fiber tag — View, Text, Image, etc. */
+export declare const HOST_COMPONENT_TAG = 5;
+export interface MeasuredElement {
+    fiber: FiberNode;
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+    depth: number;
+    zIndex: number;
+    componentName: string;
+}
+export {};
+//# sourceMappingURL=types.d.ts.map

package/lib/fiber/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/fiber/types.ts"],"names":[],"mappings":"AAAA,2DAA2D;AAC3D,KAAK,iBAAiB,GAAG,CAAC,CAAC,GAAG,IAAI,EAAE,KAAK,EAAE,KAAK,OAAO,CAAC,GAAG;IACzD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,IAAI,CAAC,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,2DAA2D;AAC3D,MAAM,WAAW,SAAS;IACxB,GAAG,EAAE,MAAM,CAAC;IACZ,IAAI,EAAE,MAAM,GAAG,iBAAiB,CAAC;IACjC,aAAa,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IACvC,SAAS,EAAE,OAAO,CAAC;IACnB,KAAK,EAAE,SAAS,GAAG,IAAI,CAAC;IACxB,OAAO,EAAE,SAAS,GAAG,IAAI,CAAC;IAC1B,MAAM,EAAE,SAAS,GAAG,IAAI,CAAC;IACzB,YAAY,CAAC,EAAE;QACb,QAAQ,EAAE,MAAM,CAAC;QACjB,UAAU,EAAE,MAAM,CAAC;QACnB,YAAY,CAAC,EAAE,MAAM,CAAC;KACvB,CAAC;IACF,WAAW,CAAC,EAAE,SAAS,CAAC;CACzB;AAED,yDAAyD;AACzD,eAAO,MAAM,kBAAkB,IAAI,CAAC;AAEpC,MAAM,WAAW,eAAe;IAC9B,KAAK,EAAE,SAAS,CAAC;IACjB,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,aAAa,EAAE,MAAM,CAAC;CACvB"}

package/lib/fiber/types.js

@@ -0,0 +1,3 @@
+/** Host component fiber tag — View, Text, Image, etc. */
+export const HOST_COMPONENT_TAG = 5;
+//# sourceMappingURL=types.js.map

package/lib/fiber/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../src/fiber/types.ts"],"names":[],"mappings":"AAuBA,yDAAyD;AACzD,MAAM,CAAC,MAAM,kBAAkB,GAAG,CAAC,CAAC"}

package/lib/floatingPanel/AddPropertyRow.d.ts

@@ -0,0 +1,13 @@
+interface AddPropertyRowProps {
+    onAdd: (key: string, value: unknown) => void;
+    onCancel: () => void;
+}
+/** Inline two-step row for adding a new style property: type key → type value → applied. */
+export declare const AddPropertyRow: ({ onAdd, onCancel }: AddPropertyRowProps) => import("react/jsx-runtime").JSX.Element;
+interface AddPropertyButtonProps {
+    onPress: () => void;
+}
+/** Dim "+ add property" button shown at the bottom of the style list. */
+export declare const AddPropertyButton: ({ onPress }: AddPropertyButtonProps) => import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=AddPropertyRow.d.ts.map

package/lib/floatingPanel/AddPropertyRow.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AddPropertyRow.d.ts","sourceRoot":"","sources":["../../src/floatingPanel/AddPropertyRow.tsx"],"names":[],"mappings":"AAKA,UAAU,mBAAmB;IAC3B,KAAK,EAAE,CAAC,GAAG,EAAE,MAAM,EAAE,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;IAC7C,QAAQ,EAAE,MAAM,IAAI,CAAC;CACtB;AAED,4FAA4F;AAC5F,eAAO,MAAM,cAAc,wBAAyB,mBAAmB,4CAiDtE,CAAC;AAEF,UAAU,sBAAsB;IAC9B,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAED,yEAAyE;AACzE,eAAO,MAAM,iBAAiB,gBAAiB,sBAAsB,4CAIpE,CAAC"}

package/lib/floatingPanel/AddPropertyRow.js

@@ -0,0 +1,61 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { Pressable, StyleSheet, Text, View } from 'react-native';
+import { MONOSPACE_FONT } from '../constants';
+import { EditableValue } from './EditableValue';
+/** Inline two-step row for adding a new style property: type key → type value → applied. */
+export const AddPropertyRow = ({ onAdd, onCancel }) => {
+    const [key, setKey] = useState('');
+    const [waitingForValue, setWaitingForValue] = useState(false);
+    if (!waitingForValue) {
+        return (_jsx(View, { style: styles.row, children: _jsx(View, { style: styles.content, children: _jsx(EditableValue, { value: '', displayValue: '', onSubmit: (newKey) => {
+                        const trimmed = String(newKey).trim();
+                        if (!trimmed) {
+                            onCancel();
+                            return;
+                        }
+                        setKey(trimmed);
+                        setWaitingForValue(true);
+                    }, variant: 'key', initialEditing: true }) }) }));
+    }
+    return (_jsx(View, { style: styles.row, children: _jsxs(View, { style: styles.content, children: [_jsxs(Text, { style: styles.pendingKey, children: [key, ":"] }), _jsx(EditableValue, { value: '', displayValue: '', onSubmit: (newValue) => {
+                        const trimmed = String(newValue).trim();
+                        if (!trimmed) {
+                            onCancel();
+                            return;
+                        }
+                        onAdd(key, newValue);
+                    }, variant: 'value', initialEditing: true })] }) }));
+};
+/** Dim "+ add property" button shown at the bottom of the style list. */
+export const AddPropertyButton = ({ onPress }) => (_jsx(Pressable, { style: styles.button, onPress: onPress, hitSlop: 6, children: _jsx(Text, { style: styles.buttonText, children: "+ add property" }) }));
+const styles = StyleSheet.create({
+    row: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        paddingVertical: 5,
+        paddingHorizontal: 8,
+        borderRadius: 4,
+    },
+    content: {
+        flex: 1,
+        flexDirection: 'row',
+        justifyContent: 'space-between',
+        alignItems: 'center',
+    },
+    pendingKey: {
+        color: '#9CDCFE',
+        fontSize: 13,
+        fontFamily: MONOSPACE_FONT,
+    },
+    button: {
+        paddingVertical: 6,
+        paddingHorizontal: 8,
+    },
+    buttonText: {
+        color: '#666',
+        fontSize: 12,
+        fontFamily: MONOSPACE_FONT,
+    },
+});
+//# sourceMappingURL=AddPropertyRow.js.map

package/lib/floatingPanel/AddPropertyRow.js.map

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

package/lib/floatingPanel/CloseButton.d.ts

@@ -0,0 +1,7 @@
+interface CloseButtonProps {
+    onPress: () => void;
+}
+/** Reusable red-tinted circular close button used across panel states. */
+export declare const CloseButton: ({ onPress }: CloseButtonProps) => import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=CloseButton.d.ts.map

package/lib/floatingPanel/CloseButton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CloseButton.d.ts","sourceRoot":"","sources":["../../src/floatingPanel/CloseButton.tsx"],"names":[],"mappings":"AAEA,UAAU,gBAAgB;IACxB,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAED,0EAA0E;AAC1E,eAAO,MAAM,WAAW,gBAAiB,gBAAgB,4CASxD,CAAC"}

package/lib/floatingPanel/CloseButton.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { StyleSheet, Text, TouchableOpacity } from 'react-native';
+/** Reusable red-tinted circular close button used across panel states. */
+export const CloseButton = ({ onPress }) => (_jsx(TouchableOpacity, { onPress: onPress, hitSlop: { top: 8, bottom: 8, left: 8, right: 8 }, style: styles.button, activeOpacity: 0.6, children: _jsx(Text, { style: styles.text, children: "\u2715" }) }));
+const styles = StyleSheet.create({
+    button: {
+        width: 22,
+        height: 22,
+        borderRadius: 11,
+        backgroundColor: 'rgba(255, 59, 48, 0.15)',
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+    text: {
+        color: '#FF3B30',
+        fontSize: 13,
+        fontWeight: '600',
+        lineHeight: 14,
+    },
+});
+//# sourceMappingURL=CloseButton.js.map

package/lib/floatingPanel/CloseButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CloseButton.js","sourceRoot":"","sources":["../../src/floatingPanel/CloseButton.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,gBAAgB,EAAE,MAAM,cAAc,CAAC;AAMlE,0EAA0E;AAC1E,MAAM,CAAC,MAAM,WAAW,GAAG,CAAC,EAAE,OAAO,EAAoB,EAAE,EAAE,CAAC,CAC5D,KAAC,gBAAgB,IACf,OAAO,EAAE,OAAO,EAChB,OAAO,EAAE,EAAE,GAAG,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,CAAC,EAAE,EACjD,KAAK,EAAE,MAAM,CAAC,MAAM,EACpB,aAAa,EAAE,GAAG,YAElB,KAAC,IAAI,IAAC,KAAK,EAAE,MAAM,CAAC,IAAI,uBAAU,GACjB,CACpB,CAAC;AAEF,MAAM,MAAM,GAAG,UAAU,CAAC,MAAM,CAAC;IAC/B,MAAM,EAAE;QACN,KAAK,EAAE,EAAE;QACT,MAAM,EAAE,EAAE;QACV,YAAY,EAAE,EAAE;QAChB,eAAe,EAAE,yBAAyB;QAC1C,UAAU,EAAE,QAAQ;QACpB,cAAc,EAAE,QAAQ;KACzB;IACD,IAAI,EAAE;QACJ,KAAK,EAAE,SAAS;QAChB,QAAQ,EAAE,EAAE;QACZ,UAAU,EAAE,KAAK;QACjB,UAAU,EAAE,EAAE;KACf;CACF,CAAC,CAAC"}

package/lib/floatingPanel/EditableValue.d.ts

@@ -0,0 +1,12 @@
+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 declare const EditableValue: ({ value, displayValue, onSubmit, variant, disabled, initialEditing, }: EditableValueProps) => import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=EditableValue.d.ts.map

package/lib/floatingPanel/EditableValue.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"EditableValue.d.ts","sourceRoot":"","sources":["../../src/floatingPanel/EditableValue.tsx"],"names":[],"mappings":"AAKA,UAAU,kBAAkB;IAC1B,KAAK,EAAE,OAAO,CAAC;IACf,YAAY,EAAE,MAAM,CAAC;IACrB,QAAQ,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IACpC,OAAO,EAAE,KAAK,GAAG,OAAO,CAAC;IACzB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,cAAc,CAAC,EAAE,OAAO,CAAC;CAC1B;AAED,sEAAsE;AACtE,eAAO,MAAM,aAAa,0EAOvB,kBAAkB,4CAmEpB,CAAC"}

package/lib/floatingPanel/EditableValue.js

@@ -0,0 +1,67 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+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';
+/** Tappable style value that becomes an inline TextInput on press. */
+export const EditableValue = ({ value, displayValue, onSubmit, variant, disabled, initialEditing = false, }) => {
+    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 (_jsx(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: true, selectTextOnFocus: true, returnKeyType: 'done' }));
+    }
+    return (_jsx(Pressable, { onPress: startEditing, hitSlop: 4, children: _jsx(Text, { style: [styles.base, { color: colors.text }, disabled && styles.strikethrough], children: displayValue }) }));
+};
+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',
+    },
+});
+//# sourceMappingURL=EditableValue.js.map

package/lib/floatingPanel/EditableValue.js.map

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

package/lib/floatingPanel/FloatingPanel.d.ts

@@ -0,0 +1,7 @@
+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 declare const FloatingPanel: ({ panelState, selected, matches, selectedIndex, onToggleInspect, onCycleNext, onCyclePrevious, onClose, }: FloatingPanelProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=FloatingPanel.d.ts.map

package/lib/floatingPanel/FloatingPanel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FloatingPanel.d.ts","sourceRoot":"","sources":["../../src/floatingPanel/FloatingPanel.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC;AAElD;;;GAGG;AACH,eAAO,MAAM,aAAa,8GASvB,kBAAkB,4CA6DpB,CAAC"}

package/lib/floatingPanel/FloatingPanel.js

@@ -0,0 +1,70 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+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';
+/**
+ * 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, }) => {
+    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 (_jsxs(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,
+        ], children: [_jsxs(View, { ...panHandlers, children: [panelState === 'bubble' && _jsx(InspectorBubble, {}), panelState === 'handle' && _jsx(HandleContent, { onClose: onClose }), panelState === 'expanded' && selected && (_jsx(PanelHeader, { selected: selected, matches: matches, selectedIndex: selectedIndex, onCycleNext: onCycleNext, onCyclePrevious: onCyclePrevious, onClose: onClose }))] }), selected && (_jsx(Animated.View, { style: [styles.body, { height: bodyHeight, opacity: bodyOpacity }], pointerEvents: panelState === 'expanded' ? 'auto' : 'none', children: _jsx(PanelBody, { element: selected }) }))] }));
+};
+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',
+    },
+});
+//# sourceMappingURL=FloatingPanel.js.map