react-native-element-inspector 0.1.0

package/lib/utils/hitTest.js

@@ -0,0 +1,20 @@
+/**
+ * Given a tap point and a layout snapshot, return all elements
+ * whose bounds contain the point, sorted by area (smallest first).
+ */
+export const hitTest = (snapshot, tapX, tapY) => {
+    const matches = [];
+    for (const element of snapshot) {
+        const { x, y, width, height } = element;
+        // Skip zero-size elements
+        if (width === 0 || height === 0)
+            continue;
+        if (tapX >= x && tapX <= x + width && tapY >= y && tapY <= y + height) {
+            matches.push(element);
+        }
+    }
+    // Sort by area ascending — smallest (most specific) element first
+    matches.sort((a, b) => a.width * a.height - b.width * b.height);
+    return matches;
+};
+//# sourceMappingURL=hitTest.js.map

package/lib/utils/hitTest.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"hitTest.js","sourceRoot":"","sources":["../../src/utils/hitTest.ts"],"names":[],"mappings":"AAEA;;;GAGG;AACH,MAAM,CAAC,MAAM,OAAO,GAAG,CACrB,QAA2B,EAC3B,IAAY,EACZ,IAAY,EACO,EAAE;IACrB,MAAM,OAAO,GAAsB,EAAE,CAAC;IAEtC,KAAK,MAAM,OAAO,IAAI,QAAQ,EAAE,CAAC;QAC/B,MAAM,EAAE,CAAC,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,GAAG,OAAO,CAAC;QAExC,0BAA0B;QAC1B,IAAI,KAAK,KAAK,CAAC,IAAI,MAAM,KAAK,CAAC;YAAE,SAAS;QAE1C,IAAI,IAAI,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,GAAG,KAAK,IAAI,IAAI,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,GAAG,MAAM,EAAE,CAAC;YACtE,OAAO,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;QACxB,CAAC;IACH,CAAC;IAED,kEAAkE;IAClE,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,KAAK,GAAG,CAAC,CAAC,MAAM,GAAG,CAAC,CAAC,KAAK,GAAG,CAAC,CAAC,MAAM,CAAC,CAAC;IAEhE,OAAO,OAAO,CAAC;AACjB,CAAC,CAAC"}

package/lib/utils/index.d.ts

@@ -0,0 +1,12 @@
+export { clamp } from './clamp';
+export type { StyleObject } from './flattenStyles';
+export { flattenStyles } from './flattenStyles';
+export { hitTest } from './hitTest';
+export { buildLayoutSnapshot } from './layoutSnapshot';
+export type { SourceLocation } from './sourceMapping';
+export { formatSourceLocation, getOwnerName, getSourceLocation } from './sourceMapping';
+export { formatValue, isColorProp } from './styleFormatting';
+export { parseInput, toEditableString } from './styleInputParsing';
+export type { BoxModel } from './yogaLayout';
+export { extractBoxModel } from './yogaLayout';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/utils/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAChC,YAAY,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AACnD,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,OAAO,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAC;AACvD,YAAY,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AACtD,OAAO,EAAE,oBAAoB,EAAE,YAAY,EAAE,iBAAiB,EAAE,MAAM,iBAAiB,CAAC;AACxF,OAAO,EAAE,WAAW,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAC7D,OAAO,EAAE,UAAU,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AACnE,YAAY,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AAC7C,OAAO,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC"}

package/lib/utils/index.js

@@ -0,0 +1,9 @@
+export { clamp } from './clamp';
+export { flattenStyles } from './flattenStyles';
+export { hitTest } from './hitTest';
+export { buildLayoutSnapshot } from './layoutSnapshot';
+export { formatSourceLocation, getOwnerName, getSourceLocation } from './sourceMapping';
+export { formatValue, isColorProp } from './styleFormatting';
+export { parseInput, toEditableString } from './styleInputParsing';
+export { extractBoxModel } from './yogaLayout';
+//# sourceMappingURL=index.js.map

package/lib/utils/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/utils/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAEhC,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,OAAO,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAC;AAEvD,OAAO,EAAE,oBAAoB,EAAE,YAAY,EAAE,iBAAiB,EAAE,MAAM,iBAAiB,CAAC;AACxF,OAAO,EAAE,WAAW,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAC7D,OAAO,EAAE,UAAU,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AAEnE,OAAO,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC"}

package/lib/utils/layoutSnapshot.d.ts

@@ -0,0 +1,7 @@
+import { type FiberNode, type MeasuredElement } from '../fiber';
+/**
+ * Build a layout snapshot: walk the fiber tree, measure every host fiber,
+ * return a flat array sorted by zIndex (desc) → depth (desc).
+ */
+export declare const buildLayoutSnapshot: (root: FiberNode) => Promise<MeasuredElement[]>;
+//# sourceMappingURL=layoutSnapshot.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"layoutSnapshot.d.ts","sourceRoot":"","sources":["../../src/utils/layoutSnapshot.ts"],"names":[],"mappings":"AAAA,OAAO,EAAgB,KAAK,SAAS,EAAE,KAAK,eAAe,EAAE,MAAM,UAAU,CAAC;AAE9E;;;GAGG;AACH,eAAO,MAAM,mBAAmB,SAAgB,SAAS,KAAG,OAAO,CAAC,eAAe,EAAE,CAyCpF,CAAC"}

package/lib/utils/layoutSnapshot.js

@@ -0,0 +1,42 @@
+import { FiberAdapter } from '../fiber';
+/**
+ * Build a layout snapshot: walk the fiber tree, measure every host fiber,
+ * return a flat array sorted by zIndex (desc) → depth (desc).
+ */
+export const buildLayoutSnapshot = async (root) => {
+    const hostFibers = FiberAdapter.walkHostFibers(root);
+    const elements = [];
+    // Measure all host fibers in parallel
+    const measurements = await Promise.allSettled(hostFibers.map(async ({ fiber, depth }) => {
+        const rect = await FiberAdapter.measure(fiber);
+        const style = FiberAdapter.getStyle(fiber);
+        return {
+            fiber,
+            x: rect.x,
+            y: rect.y,
+            width: rect.width,
+            height: rect.height,
+            depth,
+            zIndex: typeof style?.zIndex === 'number' ? style.zIndex : 0,
+            componentName: FiberAdapter.getComponentName(fiber),
+        };
+    }));
+    for (const result of measurements) {
+        if (result.status === 'fulfilled') {
+            const element = result.value;
+            // Skip zero-size elements — invisible and untappable
+            if (element.width > 0 && element.height > 0) {
+                elements.push(element);
+            }
+        }
+        // Skip fibers that fail to measure (unmounted, off-screen, etc.)
+    }
+    // Sort: zIndex descending, then depth descending
+    elements.sort((a, b) => {
+        if (a.zIndex !== b.zIndex)
+            return b.zIndex - a.zIndex;
+        return b.depth - a.depth;
+    });
+    return elements;
+};
+//# sourceMappingURL=layoutSnapshot.js.map

package/lib/utils/layoutSnapshot.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"layoutSnapshot.js","sourceRoot":"","sources":["../../src/utils/layoutSnapshot.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAwC,MAAM,UAAU,CAAC;AAE9E;;;GAGG;AACH,MAAM,CAAC,MAAM,mBAAmB,GAAG,KAAK,EAAE,IAAe,EAA8B,EAAE;IACvF,MAAM,UAAU,GAAG,YAAY,CAAC,cAAc,CAAC,IAAI,CAAC,CAAC;IACrD,MAAM,QAAQ,GAAsB,EAAE,CAAC;IAEvC,sCAAsC;IACtC,MAAM,YAAY,GAAG,MAAM,OAAO,CAAC,UAAU,CAC3C,UAAU,CAAC,GAAG,CAAC,KAAK,EAAE,EAAE,KAAK,EAAE,KAAK,EAAE,EAAE,EAAE;QACxC,MAAM,IAAI,GAAG,MAAM,YAAY,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC;QAC/C,MAAM,KAAK,GAAG,YAAY,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;QAE3C,OAAO;YACL,KAAK;YACL,CAAC,EAAE,IAAI,CAAC,CAAC;YACT,CAAC,EAAE,IAAI,CAAC,CAAC;YACT,KAAK,EAAE,IAAI,CAAC,KAAK;YACjB,MAAM,EAAE,IAAI,CAAC,MAAM;YACnB,KAAK;YACL,MAAM,EAAE,OAAO,KAAK,EAAE,MAAM,KAAK,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC;YAC5D,aAAa,EAAE,YAAY,CAAC,gBAAgB,CAAC,KAAK,CAAC;SAC1B,CAAC;IAC9B,CAAC,CAAC,CACH,CAAC;IAEF,KAAK,MAAM,MAAM,IAAI,YAAY,EAAE,CAAC;QAClC,IAAI,MAAM,CAAC,MAAM,KAAK,WAAW,EAAE,CAAC;YAClC,MAAM,OAAO,GAAG,MAAM,CAAC,KAAK,CAAC;YAC7B,qDAAqD;YACrD,IAAI,OAAO,CAAC,KAAK,GAAG,CAAC,IAAI,OAAO,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC;gBAC5C,QAAQ,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;YACzB,CAAC;QACH,CAAC;QACD,iEAAiE;IACnE,CAAC;IAED,iDAAiD;IACjD,QAAQ,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE;QACrB,IAAI,CAAC,CAAC,MAAM,KAAK,CAAC,CAAC,MAAM;YAAE,OAAO,CAAC,CAAC,MAAM,GAAG,CAAC,CAAC,MAAM,CAAC;QACtD,OAAO,CAAC,CAAC,KAAK,GAAG,CAAC,CAAC,KAAK,CAAC;IAC3B,CAAC,CAAC,CAAC;IAEH,OAAO,QAAQ,CAAC;AAClB,CAAC,CAAC"}

package/lib/utils/sourceMapping.d.ts

@@ -0,0 +1,26 @@
+import type { FiberNode } from '../fiber';
+export interface SourceLocation {
+    fileName: string;
+    lineNumber: number;
+    columnNumber?: number;
+}
+/**
+ * Extract the source file location from a fiber node.
+ * Host components (RCTView, RCTText, etc.) don't have _debugSource,
+ * so we check _debugOwner (the component that rendered this element)
+ * and walk up the fiber tree as a fallback.
+ */
+export declare const getSourceLocation: (fiber: FiberNode) => SourceLocation | null;
+/**
+ * Format a source location for display.
+ * Strips the project root for readability.
+ * Adds extension to the file name and line number, e.g. "MyComponent.js:42"
+ */
+export declare const formatSourceLocation: (source: SourceLocation) => string;
+/**
+ * Get the name of the nearest user component that owns this fiber.
+ * React 19 dropped _debugSource, so we use _debugOwner to find the
+ * parent component name as a fallback.
+ */
+export declare const getOwnerName: (fiber: FiberNode) => string | null;
+//# sourceMappingURL=sourceMapping.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"sourceMapping.d.ts","sourceRoot":"","sources":["../../src/utils/sourceMapping.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,UAAU,CAAC;AAE1C,MAAM,WAAW,cAAc;IAC7B,QAAQ,EAAE,MAAM,CAAC;IACjB,UAAU,EAAE,MAAM,CAAC;IACnB,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAED;;;;;GAKG;AACH,eAAO,MAAM,iBAAiB,UAAW,SAAS,KAAG,cAAc,GAAG,IAerE,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,oBAAoB,WAAY,cAAc,KAAG,MAI7D,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,YAAY,UAAW,SAAS,KAAG,MAAM,GAAG,IAmBxD,CAAC"}

package/lib/utils/sourceMapping.js

@@ -0,0 +1,53 @@
+/**
+ * Extract the source file location from a fiber node.
+ * Host components (RCTView, RCTText, etc.) don't have _debugSource,
+ * so we check _debugOwner (the component that rendered this element)
+ * and walk up the fiber tree as a fallback.
+ */
+export const getSourceLocation = (fiber) => {
+    // Check the fiber itself first
+    if (fiber._debugSource)
+        return fiber._debugSource;
+    // Check _debugOwner — points to the component that created this JSX
+    if (fiber._debugOwner?._debugSource)
+        return fiber._debugOwner._debugSource;
+    // Walk up the return (parent) chain
+    let current = fiber.return;
+    while (current) {
+        if (current._debugSource)
+            return current._debugSource;
+        current = current.return;
+    }
+    return null;
+};
+/**
+ * Format a source location for display.
+ * Strips the project root for readability.
+ * Adds extension to the file name and line number, e.g. "MyComponent.js:42"
+ */
+export const formatSourceLocation = (source) => {
+    const lastSlash = source.fileName.lastIndexOf('/');
+    const fileName = lastSlash === -1 ? source.fileName : source.fileName.substring(lastSlash + 1);
+    return `${fileName}:${source.lineNumber}`;
+};
+/**
+ * Get the name of the nearest user component that owns this fiber.
+ * React 19 dropped _debugSource, so we use _debugOwner to find the
+ * parent component name as a fallback.
+ */
+export const getOwnerName = (fiber) => {
+    let owner = fiber._debugOwner;
+    while (owner) {
+        const ownerType = owner.type;
+        if (typeof ownerType === 'function') {
+            const name = ownerType.displayName ?? ownerType.name;
+            // Skip generic RN host wrappers
+            if (name && name !== 'View' && name !== 'Text' && name !== 'ScrollView') {
+                return `in ${name}`;
+            }
+        }
+        owner = owner._debugOwner;
+    }
+    return null;
+};
+//# sourceMappingURL=sourceMapping.js.map

package/lib/utils/sourceMapping.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sourceMapping.js","sourceRoot":"","sources":["../../src/utils/sourceMapping.ts"],"names":[],"mappings":"AAQA;;;;;GAKG;AACH,MAAM,CAAC,MAAM,iBAAiB,GAAG,CAAC,KAAgB,EAAyB,EAAE;IAC3E,+BAA+B;IAC/B,IAAI,KAAK,CAAC,YAAY;QAAE,OAAO,KAAK,CAAC,YAAY,CAAC;IAElD,oEAAoE;IACpE,IAAI,KAAK,CAAC,WAAW,EAAE,YAAY;QAAE,OAAO,KAAK,CAAC,WAAW,CAAC,YAAY,CAAC;IAE3E,oCAAoC;IACpC,IAAI,OAAO,GAAqB,KAAK,CAAC,MAAM,CAAC;IAC7C,OAAO,OAAO,EAAE,CAAC;QACf,IAAI,OAAO,CAAC,YAAY;YAAE,OAAO,OAAO,CAAC,YAAY,CAAC;QACtD,OAAO,GAAG,OAAO,CAAC,MAAM,CAAC;IAC3B,CAAC;IAED,OAAO,IAAI,CAAC;AACd,CAAC,CAAC;AAEF;;;;GAIG;AACH,MAAM,CAAC,MAAM,oBAAoB,GAAG,CAAC,MAAsB,EAAU,EAAE;IACrE,MAAM,SAAS,GAAG,MAAM,CAAC,QAAQ,CAAC,WAAW,CAAC,GAAG,CAAC,CAAC;IACnD,MAAM,QAAQ,GAAG,SAAS,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,QAAQ,CAAC,SAAS,CAAC,SAAS,GAAG,CAAC,CAAC,CAAC;IAC/F,OAAO,GAAG,QAAQ,IAAI,MAAM,CAAC,UAAU,EAAE,CAAC;AAC5C,CAAC,CAAC;AAEF;;;;GAIG;AACH,MAAM,CAAC,MAAM,YAAY,GAAG,CAAC,KAAgB,EAAiB,EAAE;IAM9D,IAAI,KAAK,GAAG,KAAK,CAAC,WAAoC,CAAC;IACvD,OAAO,KAAK,EAAE,CAAC;QACb,MAAM,SAAS,GAAG,KAAK,CAAC,IAAI,CAAC;QAC7B,IAAI,OAAO,SAAS,KAAK,UAAU,EAAE,CAAC;YACpC,MAAM,IAAI,GAAG,SAAS,CAAC,WAAW,IAAI,SAAS,CAAC,IAAI,CAAC;YACrD,gCAAgC;YAChC,IAAI,IAAI,IAAI,IAAI,KAAK,MAAM,IAAI,IAAI,KAAK,MAAM,IAAI,IAAI,KAAK,YAAY,EAAE,CAAC;gBACxE,OAAO,MAAM,IAAI,EAAE,CAAC;YACtB,CAAC;QACH,CAAC;QACD,KAAK,GAAG,KAAK,CAAC,WAAW,CAAC;IAC5B,CAAC;IACD,OAAO,IAAI,CAAC;AACd,CAAC,CAAC"}

package/lib/utils/styleFormatting.d.ts

@@ -0,0 +1,5 @@
+/** Returns true if the style property name holds a color value */
+export declare const isColorProp: (propertyName: string) => boolean;
+/** Format a style value for display in the inspector panel */
+export declare const formatValue: (value: unknown) => string;
+//# sourceMappingURL=styleFormatting.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"styleFormatting.d.ts","sourceRoot":"","sources":["../../src/utils/styleFormatting.ts"],"names":[],"mappings":"AAsBA,kEAAkE;AAClE,eAAO,MAAM,WAAW,iBAAkB,MAAM,KAAG,OAAwC,CAAC;AAE5F,8DAA8D;AAC9D,eAAO,MAAM,WAAW,UAAW,OAAO,KAAG,MAO5C,CAAC"}

package/lib/utils/styleFormatting.js

@@ -0,0 +1,38 @@
+/** Complete set of React Native style properties typed as ColorValue */
+const COLOR_PROPS = new Set([
+    'color',
+    'backgroundColor',
+    'borderColor',
+    'borderTopColor',
+    'borderRightColor',
+    'borderBottomColor',
+    'borderLeftColor',
+    'borderStartColor',
+    'borderEndColor',
+    'borderBlockColor',
+    'borderBlockStartColor',
+    'borderBlockEndColor',
+    'outlineColor',
+    'shadowColor',
+    'textDecorationColor',
+    'textShadowColor',
+    'tintColor',
+    'overlayColor',
+]);
+/** Returns true if the style property name holds a color value */
+export const isColorProp = (propertyName) => COLOR_PROPS.has(propertyName);
+/** Format a style value for display in the inspector panel */
+export const formatValue = (value) => {
+    if (value === undefined)
+        return 'undefined';
+    if (value === null)
+        return 'null';
+    if (typeof value === 'number')
+        return String(value);
+    if (typeof value === 'string')
+        return `"${value}"`;
+    if (typeof value === 'boolean')
+        return String(value);
+    return JSON.stringify(value);
+};
+//# sourceMappingURL=styleFormatting.js.map

package/lib/utils/styleFormatting.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styleFormatting.js","sourceRoot":"","sources":["../../src/utils/styleFormatting.ts"],"names":[],"mappings":"AAAA,wEAAwE;AACxE,MAAM,WAAW,GAAG,IAAI,GAAG,CAAC;IAC1B,OAAO;IACP,iBAAiB;IACjB,aAAa;IACb,gBAAgB;IAChB,kBAAkB;IAClB,mBAAmB;IACnB,iBAAiB;IACjB,kBAAkB;IAClB,gBAAgB;IAChB,kBAAkB;IAClB,uBAAuB;IACvB,qBAAqB;IACrB,cAAc;IACd,aAAa;IACb,qBAAqB;IACrB,iBAAiB;IACjB,WAAW;IACX,cAAc;CACf,CAAC,CAAC;AAEH,kEAAkE;AAClE,MAAM,CAAC,MAAM,WAAW,GAAG,CAAC,YAAoB,EAAW,EAAE,CAAC,WAAW,CAAC,GAAG,CAAC,YAAY,CAAC,CAAC;AAE5F,8DAA8D;AAC9D,MAAM,CAAC,MAAM,WAAW,GAAG,CAAC,KAAc,EAAU,EAAE;IACpD,IAAI,KAAK,KAAK,SAAS;QAAE,OAAO,WAAW,CAAC;IAC5C,IAAI,KAAK,KAAK,IAAI;QAAE,OAAO,MAAM,CAAC;IAClC,IAAI,OAAO,KAAK,KAAK,QAAQ;QAAE,OAAO,MAAM,CAAC,KAAK,CAAC,CAAC;IACpD,IAAI,OAAO,KAAK,KAAK,QAAQ;QAAE,OAAO,IAAI,KAAK,GAAG,CAAC;IACnD,IAAI,OAAO,KAAK,KAAK,SAAS;QAAE,OAAO,MAAM,CAAC,KAAK,CAAC,CAAC;IACrD,OAAO,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC;AAC/B,CAAC,CAAC"}

package/lib/utils/styleInputParsing.d.ts

@@ -0,0 +1,5 @@
+/** Parses user input back to the appropriate type. */
+export declare const parseInput: (text: string, originalValue: unknown) => unknown;
+/** Raw value → editable string (no quotes around strings). */
+export declare const toEditableString: (value: unknown) => string;
+//# sourceMappingURL=styleInputParsing.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"styleInputParsing.d.ts","sourceRoot":"","sources":["../../src/utils/styleInputParsing.ts"],"names":[],"mappings":"AAAA,sDAAsD;AACtD,eAAO,MAAM,UAAU,SAAU,MAAM,iBAAiB,OAAO,KAAG,OAwBjE,CAAC;AAEF,8DAA8D;AAC9D,eAAO,MAAM,gBAAgB,UAAW,OAAO,KAAG,MAIjD,CAAC"}

package/lib/utils/styleInputParsing.js

@@ -0,0 +1,33 @@
+/** Parses user input back to the appropriate type. */
+export const parseInput = (text, originalValue) => {
+    const trimmed = text.trim();
+    if (trimmed === '')
+        return originalValue;
+    // Strip surrounding quotes if the user typed them
+    if ((trimmed.startsWith('"') && trimmed.endsWith('"')) ||
+        (trimmed.startsWith("'") && trimmed.endsWith("'"))) {
+        return trimmed.slice(1, -1);
+    }
+    // Only coerce to number when the original was numeric
+    if (typeof originalValue === 'number') {
+        const asNumber = Number(trimmed);
+        if (!Number.isNaN(asNumber))
+            return asNumber;
+    }
+    // Boolean
+    if (trimmed === 'true')
+        return true;
+    if (trimmed === 'false')
+        return false;
+    // Everything else is a string (e.g. color names, hex codes)
+    return trimmed;
+};
+/** Raw value → editable string (no quotes around strings). */
+export const toEditableString = (value) => {
+    if (value === undefined)
+        return '';
+    if (value === null)
+        return '';
+    return String(value);
+};
+//# sourceMappingURL=styleInputParsing.js.map

package/lib/utils/styleInputParsing.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styleInputParsing.js","sourceRoot":"","sources":["../../src/utils/styleInputParsing.ts"],"names":[],"mappings":"AAAA,sDAAsD;AACtD,MAAM,CAAC,MAAM,UAAU,GAAG,CAAC,IAAY,EAAE,aAAsB,EAAW,EAAE;IAC1E,MAAM,OAAO,GAAG,IAAI,CAAC,IAAI,EAAE,CAAC;IAC5B,IAAI,OAAO,KAAK,EAAE;QAAE,OAAO,aAAa,CAAC;IAEzC,kDAAkD;IAClD,IACE,CAAC,OAAO,CAAC,UAAU,CAAC,GAAG,CAAC,IAAI,OAAO,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC;QAClD,CAAC,OAAO,CAAC,UAAU,CAAC,GAAG,CAAC,IAAI,OAAO,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,EAClD,CAAC;QACD,OAAO,OAAO,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC;IAC9B,CAAC;IAED,sDAAsD;IACtD,IAAI,OAAO,aAAa,KAAK,QAAQ,EAAE,CAAC;QACtC,MAAM,QAAQ,GAAG,MAAM,CAAC,OAAO,CAAC,CAAC;QACjC,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,QAAQ,CAAC;YAAE,OAAO,QAAQ,CAAC;IAC/C,CAAC;IAED,UAAU;IACV,IAAI,OAAO,KAAK,MAAM;QAAE,OAAO,IAAI,CAAC;IACpC,IAAI,OAAO,KAAK,OAAO;QAAE,OAAO,KAAK,CAAC;IAEtC,4DAA4D;IAC5D,OAAO,OAAO,CAAC;AACjB,CAAC,CAAC;AAEF,8DAA8D;AAC9D,MAAM,CAAC,MAAM,gBAAgB,GAAG,CAAC,KAAc,EAAU,EAAE;IACzD,IAAI,KAAK,KAAK,SAAS;QAAE,OAAO,EAAE,CAAC;IACnC,IAAI,KAAK,KAAK,IAAI;QAAE,OAAO,EAAE,CAAC;IAC9B,OAAO,MAAM,CAAC,KAAK,CAAC,CAAC;AACvB,CAAC,CAAC"}

package/lib/utils/yogaLayout.d.ts

@@ -0,0 +1,33 @@
+import type { StyleObject } from './flattenStyles';
+export interface BoxModel {
+    margin: {
+        top: number;
+        right: number;
+        bottom: number;
+        left: number;
+    };
+    border: {
+        top: number;
+        right: number;
+        bottom: number;
+        left: number;
+    };
+    padding: {
+        top: number;
+        right: number;
+        bottom: number;
+        left: number;
+    };
+    content: {
+        width: number;
+        height: number;
+    };
+}
+/**
+ * Extract box model values from a flattened style object.
+ */
+export declare const extractBoxModel: (style: StyleObject | null, measured: {
+    width: number;
+    height: number;
+}) => BoxModel;
+//# sourceMappingURL=yogaLayout.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"yogaLayout.d.ts","sourceRoot":"","sources":["../../src/utils/yogaLayout.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAEnD,MAAM,WAAW,QAAQ;IACvB,MAAM,EAAE;QAAE,GAAG,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAA;KAAE,CAAC;IACrE,MAAM,EAAE;QAAE,GAAG,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAA;KAAE,CAAC;IACrE,OAAO,EAAE;QAAE,GAAG,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAA;KAAE,CAAC;IACtE,OAAO,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAE,CAAC;CAC5C;AAED;;GAEG;AACH,eAAO,MAAM,eAAe,UACnB,WAAW,GAAG,IAAI,YACf;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,MAAM,CAAA;CAAE,KAC1C,QAiCF,CAAC"}

package/lib/utils/yogaLayout.js

@@ -0,0 +1,33 @@
+/**
+ * Extract box model values from a flattened style object.
+ */
+export const extractBoxModel = (style, measured) => {
+    const num = (key) => {
+        const val = style?.[key];
+        return typeof val === 'number' ? val : undefined;
+    };
+    const margin = {
+        top: num('marginTop') ?? num('marginVertical') ?? num('margin') ?? 0,
+        right: num('marginRight') ?? num('marginHorizontal') ?? num('margin') ?? 0,
+        bottom: num('marginBottom') ?? num('marginVertical') ?? num('margin') ?? 0,
+        left: num('marginLeft') ?? num('marginHorizontal') ?? num('margin') ?? 0,
+    };
+    const border = {
+        top: num('borderTopWidth') ?? num('borderWidth') ?? 0,
+        right: num('borderRightWidth') ?? num('borderWidth') ?? 0,
+        bottom: num('borderBottomWidth') ?? num('borderWidth') ?? 0,
+        left: num('borderLeftWidth') ?? num('borderWidth') ?? 0,
+    };
+    const padding = {
+        top: num('paddingTop') ?? num('paddingVertical') ?? num('padding') ?? 0,
+        right: num('paddingRight') ?? num('paddingHorizontal') ?? num('padding') ?? 0,
+        bottom: num('paddingBottom') ?? num('paddingVertical') ?? num('padding') ?? 0,
+        left: num('paddingLeft') ?? num('paddingHorizontal') ?? num('padding') ?? 0,
+    };
+    const content = {
+        width: measured.width - padding.left - padding.right - border.left - border.right,
+        height: measured.height - padding.top - padding.bottom - border.top - border.bottom,
+    };
+    return { margin, border, padding, content };
+};
+//# sourceMappingURL=yogaLayout.js.map

package/lib/utils/yogaLayout.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"yogaLayout.js","sourceRoot":"","sources":["../../src/utils/yogaLayout.ts"],"names":[],"mappings":"AASA;;GAEG;AACH,MAAM,CAAC,MAAM,eAAe,GAAG,CAC7B,KAAyB,EACzB,QAA2C,EACjC,EAAE;IACZ,MAAM,GAAG,GAAG,CAAC,GAAW,EAAsB,EAAE;QAC9C,MAAM,GAAG,GAAG,KAAK,EAAE,CAAC,GAAG,CAAC,CAAC;QACzB,OAAO,OAAO,GAAG,KAAK,QAAQ,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,SAAS,CAAC;IACnD,CAAC,CAAC;IAEF,MAAM,MAAM,GAAG;QACb,GAAG,EAAE,GAAG,CAAC,WAAW,CAAC,IAAI,GAAG,CAAC,gBAAgB,CAAC,IAAI,GAAG,CAAC,QAAQ,CAAC,IAAI,CAAC;QACpE,KAAK,EAAE,GAAG,CAAC,aAAa,CAAC,IAAI,GAAG,CAAC,kBAAkB,CAAC,IAAI,GAAG,CAAC,QAAQ,CAAC,IAAI,CAAC;QAC1E,MAAM,EAAE,GAAG,CAAC,cAAc,CAAC,IAAI,GAAG,CAAC,gBAAgB,CAAC,IAAI,GAAG,CAAC,QAAQ,CAAC,IAAI,CAAC;QAC1E,IAAI,EAAE,GAAG,CAAC,YAAY,CAAC,IAAI,GAAG,CAAC,kBAAkB,CAAC,IAAI,GAAG,CAAC,QAAQ,CAAC,IAAI,CAAC;KACzE,CAAC;IAEF,MAAM,MAAM,GAAG;QACb,GAAG,EAAE,GAAG,CAAC,gBAAgB,CAAC,IAAI,GAAG,CAAC,aAAa,CAAC,IAAI,CAAC;QACrD,KAAK,EAAE,GAAG,CAAC,kBAAkB,CAAC,IAAI,GAAG,CAAC,aAAa,CAAC,IAAI,CAAC;QACzD,MAAM,EAAE,GAAG,CAAC,mBAAmB,CAAC,IAAI,GAAG,CAAC,aAAa,CAAC,IAAI,CAAC;QAC3D,IAAI,EAAE,GAAG,CAAC,iBAAiB,CAAC,IAAI,GAAG,CAAC,aAAa,CAAC,IAAI,CAAC;KACxD,CAAC;IAEF,MAAM,OAAO,GAAG;QACd,GAAG,EAAE,GAAG,CAAC,YAAY,CAAC,IAAI,GAAG,CAAC,iBAAiB,CAAC,IAAI,GAAG,CAAC,SAAS,CAAC,IAAI,CAAC;QACvE,KAAK,EAAE,GAAG,CAAC,cAAc,CAAC,IAAI,GAAG,CAAC,mBAAmB,CAAC,IAAI,GAAG,CAAC,SAAS,CAAC,IAAI,CAAC;QAC7E,MAAM,EAAE,GAAG,CAAC,eAAe,CAAC,IAAI,GAAG,CAAC,iBAAiB,CAAC,IAAI,GAAG,CAAC,SAAS,CAAC,IAAI,CAAC;QAC7E,IAAI,EAAE,GAAG,CAAC,aAAa,CAAC,IAAI,GAAG,CAAC,mBAAmB,CAAC,IAAI,GAAG,CAAC,SAAS,CAAC,IAAI,CAAC;KAC5E,CAAC;IAEF,MAAM,OAAO,GAAG;QACd,KAAK,EAAE,QAAQ,CAAC,KAAK,GAAG,OAAO,CAAC,IAAI,GAAG,OAAO,CAAC,KAAK,GAAG,MAAM,CAAC,IAAI,GAAG,MAAM,CAAC,KAAK;QACjF,MAAM,EAAE,QAAQ,CAAC,MAAM,GAAG,OAAO,CAAC,GAAG,GAAG,OAAO,CAAC,MAAM,GAAG,MAAM,CAAC,GAAG,GAAG,MAAM,CAAC,MAAM;KACpF,CAAC;IAEF,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,OAAO,EAAE,OAAO,EAAE,CAAC;AAC9C,CAAC,CAAC"}

package/package.json

@@ -0,0 +1,74 @@
+{
+  "name": "react-native-element-inspector",
+  "version": "0.1.0",
+  "description": "On-device element inspector for React Native — the Inspect Element experience for mobile.",
+  "main": "lib/index.js",
+  "module": "lib/index.js",
+  "types": "lib/index.d.ts",
+  "source": "src/index.ts",
+  "files": [
+    "src",
+    "lib",
+    "!**/__tests__",
+    "!**/__mocks__",
+    "!**/*.test.*"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/mabdinasira/react-native-element-inspector.git"
+  },
+  "homepage": "https://github.com/mabdinasira/react-native-element-inspector#readme",
+  "bugs": {
+    "url": "https://github.com/mabdinasira/react-native-element-inspector/issues"
+  },
+  "author": "Mohamed Abdinasir",
+  "scripts": {
+    "lint": "biome lint --write .",
+    "fmt": "biome format --write .",
+    "check": "biome check --write . --unsafe",
+    "typecheck": "tsc --noEmit",
+    "build": "tsc --project tsconfig.build.json",
+    "prepublishOnly": "rm -rf lib && bun run build",
+    "fixall": "biome check --write . --unsafe && tsc --noEmit",
+    "clean": "rm -rf node_modules lib && bun install",
+    "test": "jest",
+    "example:start": "bun run --cwd example start",
+    "example:ios": "bun run --cwd example ios",
+    "example:android": "bun run --cwd example android",
+    "example:prebuild": "bun run --cwd example prebuild",
+    "example:fixall": "bun run --cwd example check && bun run --cwd example typecheck",
+    "example:clean": "bun run --cwd example clean",
+    "example:install": "cd example && bun install"
+  },
+  "keywords": [
+    "react-native",
+    "inspector",
+    "devtools",
+    "style-editor",
+    "debug"
+  ],
+  "license": "MIT",
+  "peerDependencies": {
+    "react": ">=18.0.0",
+    "react-native": ">=0.72.0"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.29.0",
+    "@babel/plugin-transform-flow-strip-types": "^7.27.1",
+    "@babel/preset-env": "^7.29.0",
+    "@babel/preset-flow": "^7.27.1",
+    "@babel/preset-react": "^7.28.5",
+    "@babel/preset-typescript": "^7.28.5",
+    "@biomejs/biome": "~2.4.4",
+    "@testing-library/react-native": "^13.3.3",
+    "@types/jest": "^30.0.0",
+    "@types/react": "~19.0.0",
+    "@types/react-test-renderer": "^19.1.0",
+    "babel-jest": "^30.2.0",
+    "jest": "^30.2.0",
+    "react": "~19.1.0",
+    "react-native": "~0.81.0",
+    "react-test-renderer": "^19.2.4",
+    "typescript": "~5.7.0"
+  }
+}

package/src/ElementCycler.tsx

@@ -0,0 +1,64 @@
+import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';
+
+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 const ElementCycler = ({
+  total,
+  currentIndex,
+  componentName,
+  onPrevious,
+  onNext,
+}: ElementCyclerProps) => {
+  if (total <= 1) return null;
+
+  return (
+    <View style={styles.container}>
+      <TouchableOpacity onPress={onPrevious} style={styles.button} activeOpacity={0.6}>
+        <Text style={styles.arrow}>▲</Text>
+      </TouchableOpacity>
+
+      <Text style={styles.label} numberOfLines={1}>
+        {componentName} ({currentIndex + 1}/{total})
+      </Text>
+
+      <TouchableOpacity onPress={onNext} style={styles.button} activeOpacity={0.6}>
+        <Text style={styles.arrow}>▼</Text>
+      </TouchableOpacity>
+    </View>
+  );
+};
+
+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,
+  },
+});

package/src/ElementHighlighter.tsx

@@ -0,0 +1,122 @@
+import { StyleSheet, View } from 'react-native';
+import { BOX_MODEL_COLORS, Z_INDEX } from './constants';
+import { FiberAdapter, type MeasuredElement } from './fiber';
+import { extractBoxModel } from './utils';
+
+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 const ElementHighlighter = ({ element, outlineOnly = false }: ElementHighlighterProps) => {
+  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 (
+    <View pointerEvents='none' style={styles.root}>
+      {!outlineOnly && (
+        <>
+          {/* Margin layer — orange, covers full area including margins */}
+          <View
+            style={[
+              styles.marginLayer,
+              {
+                left: marginBoxLeft,
+                top: marginBoxTop,
+                width: marginBoxWidth,
+                height: marginBoxHeight,
+              },
+            ]}
+          >
+            {/* Padding layer — green, covers the element's border box */}
+            <View
+              style={[
+                styles.paddingLayer,
+                {
+                  position: 'absolute',
+                  left: margin.left,
+                  top: margin.top,
+                  width: element.width,
+                  height: element.height,
+                },
+              ]}
+            >
+              {/* Content layer — blue, inset by border + padding */}
+              <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,
+                  },
+                ]}
+              />
+            </View>
+          </View>
+        </>
+      )}
+
+      {/* Crisp outline at the border box edge */}
+      <View
+        style={[
+          styles.outline,
+          {
+            left: element.x,
+            top: element.y,
+            width: element.width,
+            height: element.height,
+          },
+        ]}
+      />
+    </View>
+  );
+};
+
+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,
+  },
+});