rn-studio 0.1.0

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;GAcG;AACH,OAAO,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAC7D,OAAO,EAAE,eAAe,EAAE,MAAM,0BAA0B,CAAC;AAC3D,OAAO,EAAE,cAAc,EAAE,MAAM,6BAA6B,CAAC;AAC7D,OAAO,EAAE,gBAAgB,EAAE,MAAM,+BAA+B,CAAC;AACjE,OAAO,EAAE,cAAc,EAAE,MAAM,6BAA6B,CAAC;AAC7D,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AACvD,OAAO,EAAE,aAAa,EAAE,MAAM,4BAA4B,CAAC;AAE3D,YAAY,EACV,cAAc,EACd,aAAa,EACb,aAAa,EACb,YAAY,EACZ,cAAc,EACd,kBAAkB,EAClB,aAAa,EACb,WAAW,GACZ,MAAM,SAAS,CAAC"}

package/dist/index.js

@@ -0,0 +1,34 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ComponentTree = exports.StyleEditor = exports.InspectorPanel = exports.SelectionOverlay = exports.FloatingBubble = exports.WebSocketBridge = exports.useStudio = exports.StudioProvider = void 0;
+/**
+ * rn-studio — public barrel exports
+ *
+ * Consumer usage:
+ *
+ *   import { StudioProvider, useStudio } from 'rn-studio';
+ *
+ *   export default function App() {
+ *     return (
+ *       <StudioProvider enabled={__DEV__} bubblePosition="bottom-right">
+ *         <YourApp />
+ *       </StudioProvider>
+ *     );
+ *   }
+ */
+var StudioProvider_1 = require("./StudioProvider");
+Object.defineProperty(exports, "StudioProvider", { enumerable: true, get: function () { return StudioProvider_1.StudioProvider; } });
+Object.defineProperty(exports, "useStudio", { enumerable: true, get: function () { return StudioProvider_1.useStudio; } });
+var WebSocketBridge_1 = require("./bridge/WebSocketBridge");
+Object.defineProperty(exports, "WebSocketBridge", { enumerable: true, get: function () { return WebSocketBridge_1.WebSocketBridge; } });
+var FloatingBubble_1 = require("./components/FloatingBubble");
+Object.defineProperty(exports, "FloatingBubble", { enumerable: true, get: function () { return FloatingBubble_1.FloatingBubble; } });
+var SelectionOverlay_1 = require("./components/SelectionOverlay");
+Object.defineProperty(exports, "SelectionOverlay", { enumerable: true, get: function () { return SelectionOverlay_1.SelectionOverlay; } });
+var InspectorPanel_1 = require("./components/InspectorPanel");
+Object.defineProperty(exports, "InspectorPanel", { enumerable: true, get: function () { return InspectorPanel_1.InspectorPanel; } });
+var StyleEditor_1 = require("./components/StyleEditor");
+Object.defineProperty(exports, "StyleEditor", { enumerable: true, get: function () { return StyleEditor_1.StyleEditor; } });
+var ComponentTree_1 = require("./components/ComponentTree");
+Object.defineProperty(exports, "ComponentTree", { enumerable: true, get: function () { return ComponentTree_1.ComponentTree; } });
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":";;;AAAA;;;;;;;;;;;;;;GAcG;AACH,mDAA6D;AAApD,gHAAA,cAAc,OAAA;AAAE,2GAAA,SAAS,OAAA;AAClC,4DAA2D;AAAlD,kHAAA,eAAe,OAAA;AACxB,8DAA6D;AAApD,gHAAA,cAAc,OAAA;AACvB,kEAAiE;AAAxD,oHAAA,gBAAgB,OAAA;AACzB,8DAA6D;AAApD,gHAAA,cAAc,OAAA;AACvB,wDAAuD;AAA9C,0GAAA,WAAW,OAAA;AACpB,4DAA2D;AAAlD,8GAAA,aAAa,OAAA"}

package/dist/types.d.ts

@@ -0,0 +1,95 @@
+/**
+ * rn-studio — shared type definitions
+ *
+ * These types are consumed by both the runtime (React Native) and
+ * the Node.js side (CLI server, AST engine). Keep this file free of
+ * runtime imports so it can be used from either environment.
+ */
+/** Source location injected by the babel plugin. */
+export interface SourceLocation {
+    file: string;
+    line: number;
+    column: number;
+    componentName: string;
+}
+/** A node in the component tree reconstructed from React fiber. */
+export interface ComponentNode {
+    id: string;
+    componentName: string;
+    source: SourceLocation;
+    props: Record<string, unknown>;
+    styles: StyleProperty[];
+    children: ComponentNode[];
+}
+/** A single editable style property. */
+export interface StyleProperty {
+    key: string;
+    value: string | number;
+    type: 'color' | 'number' | 'string' | 'boolean';
+    unit?: 'px' | '%' | 'dp';
+}
+/** Configuration passed to `<StudioProvider>`. */
+export interface StudioConfig {
+    enabled: boolean;
+    serverPort?: number;
+    bubblePosition?: BubblePosition;
+    theme?: 'dark' | 'light';
+}
+export type BubblePosition = 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left';
+/** Context value exposed via `useStudio()`. */
+export interface StudioContextValue {
+    isActive: boolean;
+    isSelecting: boolean;
+    selectedComponent: ComponentNode | null;
+    toggleActive: () => void;
+    selectComponent: (node: ComponentNode) => void;
+    clearSelection: () => void;
+    updateStyle: (key: string, value: string | number) => void;
+}
+/** WebSocket message protocol — discriminated union. */
+export type StudioMessage = {
+    type: 'COMPONENT_SELECTED';
+    payload: ComponentNode;
+} | {
+    type: 'STYLE_CHANGE';
+    payload: {
+        source: SourceLocation;
+        key: string;
+        value: string | number;
+    };
+} | {
+    type: 'PROP_CHANGE';
+    payload: {
+        source: SourceLocation;
+        propName: string;
+        value: unknown;
+    };
+} | {
+    type: 'PING';
+} | {
+    type: 'ACK';
+    payload: {
+        success: boolean;
+        message?: string;
+    };
+} | {
+    type: 'ERROR';
+    payload: {
+        message: string;
+    };
+};
+/** Studio state machine states. */
+export type StudioState = 'IDLE' | 'ACTIVE' | 'SELECTING' | 'SELECTED' | 'EDITING';
+/**
+ * Ambient augmentation so TSX files can safely pass `__rnStudioSource`
+ * to host components without type errors. The babel plugin injects this
+ * prop on every JSX element.
+ */
+declare global {
+    namespace React {
+        interface DOMAttributes<T> {
+            __rnStudioSource?: SourceLocation;
+        }
+    }
+}
+//# sourceMappingURL=types.d.ts.map

package/dist/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,oDAAoD;AACpD,MAAM,WAAW,cAAc;IAC7B,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,MAAM,CAAC;IACf,aAAa,EAAE,MAAM,CAAC;CACvB;AAED,mEAAmE;AACnE,MAAM,WAAW,aAAa;IAC5B,EAAE,EAAE,MAAM,CAAC;IACX,aAAa,EAAE,MAAM,CAAC;IACtB,MAAM,EAAE,cAAc,CAAC;IACvB,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IAC/B,MAAM,EAAE,aAAa,EAAE,CAAC;IACxB,QAAQ,EAAE,aAAa,EAAE,CAAC;CAC3B;AAED,wCAAwC;AACxC,MAAM,WAAW,aAAa;IAC5B,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB,IAAI,EAAE,OAAO,GAAG,QAAQ,GAAG,QAAQ,GAAG,SAAS,CAAC;IAChD,IAAI,CAAC,EAAE,IAAI,GAAG,GAAG,GAAG,IAAI,CAAC;CAC1B;AAED,kDAAkD;AAClD,MAAM,WAAW,YAAY;IAC3B,OAAO,EAAE,OAAO,CAAC;IACjB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,cAAc,CAAC,EAAE,cAAc,CAAC;IAChC,KAAK,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;CAC1B;AAED,MAAM,MAAM,cAAc,GACtB,cAAc,GACd,aAAa,GACb,WAAW,GACX,UAAU,CAAC;AAEf,+CAA+C;AAC/C,MAAM,WAAW,kBAAkB;IACjC,QAAQ,EAAE,OAAO,CAAC;IAClB,WAAW,EAAE,OAAO,CAAC;IACrB,iBAAiB,EAAE,aAAa,GAAG,IAAI,CAAC;IACxC,YAAY,EAAE,MAAM,IAAI,CAAC;IACzB,eAAe,EAAE,CAAC,IAAI,EAAE,aAAa,KAAK,IAAI,CAAC;IAC/C,cAAc,EAAE,MAAM,IAAI,CAAC;IAC3B,WAAW,EAAE,CAAC,GAAG,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,GAAG,MAAM,KAAK,IAAI,CAAC;CAC5D;AAED,wDAAwD;AACxD,MAAM,MAAM,aAAa,GACrB;IAAE,IAAI,EAAE,oBAAoB,CAAC;IAAC,OAAO,EAAE,aAAa,CAAA;CAAE,GACtD;IACE,IAAI,EAAE,cAAc,CAAC;IACrB,OAAO,EAAE;QACP,MAAM,EAAE,cAAc,CAAC;QACvB,GAAG,EAAE,MAAM,CAAC;QACZ,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;KACxB,CAAC;CACH,GACD;IACE,IAAI,EAAE,aAAa,CAAC;IACpB,OAAO,EAAE;QACP,MAAM,EAAE,cAAc,CAAC;QACvB,QAAQ,EAAE,MAAM,CAAC;QACjB,KAAK,EAAE,OAAO,CAAC;KAChB,CAAC;CACH,GACD;IAAE,IAAI,EAAE,MAAM,CAAA;CAAE,GAChB;IAAE,IAAI,EAAE,KAAK,CAAC;IAAC,OAAO,EAAE;QAAE,OAAO,EAAE,OAAO,CAAC;QAAC,OAAO,CAAC,EAAE,MAAM,CAAA;KAAE,CAAA;CAAE,GAChE;IAAE,IAAI,EAAE,OAAO,CAAC;IAAC,OAAO,EAAE;QAAE,OAAO,EAAE,MAAM,CAAA;KAAE,CAAA;CAAE,CAAC;AAEpD,mCAAmC;AACnC,MAAM,MAAM,WAAW,GAAG,MAAM,GAAG,QAAQ,GAAG,WAAW,GAAG,UAAU,GAAG,SAAS,CAAC;AAEnF;;;;GAIG;AACH,OAAO,CAAC,MAAM,CAAC;IAEb,UAAU,KAAK,CAAC;QACd,UAAU,aAAa,CAAC,CAAC;YACvB,gBAAgB,CAAC,EAAE,cAAc,CAAC;SACnC;KACF;CACF"}

package/dist/types.js

@@ -0,0 +1,10 @@
+"use strict";
+/**
+ * rn-studio — shared type definitions
+ *
+ * These types are consumed by both the runtime (React Native) and
+ * the Node.js side (CLI server, AST engine). Keep this file free of
+ * runtime imports so it can be used from either environment.
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+//# sourceMappingURL=types.js.map

package/dist/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":";AAAA;;;;;;GAMG"}

package/dist/utils/fiberWalker.d.ts

@@ -0,0 +1,36 @@
+import type { ComponentNode, SourceLocation, StyleProperty } from '../types';
+/**
+ * Fiber walker utilities
+ *
+ * Given a React Native host element (or its measured layout rectangle),
+ * walk the React fiber tree to find the nearest owning component that
+ * carries a `__rnStudioSource` prop (injected by babel-plugin-rn-studio).
+ *
+ * Note: React Native does not expose a document-like hit-testing API,
+ * so the overlay captures raw touch coordinates and relies on the
+ * caller passing a candidate ref — then this walker climbs from there
+ * looking for source metadata.
+ */
+type AnyFiber = any;
+/**
+ * Walk up a fiber chain, returning the first ancestor that carries
+ * `__rnStudioSource` metadata.
+ */
+export declare function findSourceOwner(startFiber: AnyFiber): {
+    fiber: AnyFiber;
+    source: SourceLocation;
+} | null;
+export declare function fiberFromRef(ref: any): AnyFiber | null;
+/**
+ * Derive a list of editable StyleProperty entries from a raw style prop,
+ * which may be an object, an array, or a StyleSheet id (number).
+ */
+export declare function extractStyles(rawStyle: unknown): StyleProperty[];
+/**
+ * Build a lightweight ComponentNode from a fiber with source metadata.
+ * Children are resolved lazily (one level deep) so the tree view can
+ * render without traversing the entire app.
+ */
+export declare function buildComponentNode(fiber: AnyFiber, source: SourceLocation): ComponentNode;
+export {};
+//# sourceMappingURL=fiberWalker.d.ts.map

package/dist/utils/fiberWalker.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"fiberWalker.d.ts","sourceRoot":"","sources":["../../src/utils/fiberWalker.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,cAAc,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AAE7E;;;;;;;;;;;GAWG;AAMH,KAAK,QAAQ,GAAG,GAAG,CAAC;AAuBpB;;;GAGG;AACH,wBAAgB,eAAe,CAC7B,UAAU,EAAE,QAAQ,GACnB;IAAE,KAAK,EAAE,QAAQ,CAAC;IAAC,MAAM,EAAE,cAAc,CAAA;CAAE,GAAG,IAAI,CAQpD;AAED,wBAAgB,YAAY,CAAC,GAAG,EAAE,GAAG,GAAG,QAAQ,GAAG,IAAI,CAEtD;AAED;;;GAGG;AACH,wBAAgB,aAAa,CAAC,QAAQ,EAAE,OAAO,GAAG,aAAa,EAAE,CAoBhE;AAqBD;;;;GAIG;AACH,wBAAgB,kBAAkB,CAChC,KAAK,EAAE,QAAQ,EACf,MAAM,EAAE,cAAc,GACrB,aAAa,CAkCf"}

package/dist/utils/fiberWalker.js

@@ -0,0 +1,122 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.findSourceOwner = findSourceOwner;
+exports.fiberFromRef = fiberFromRef;
+exports.extractStyles = extractStyles;
+exports.buildComponentNode = buildComponentNode;
+function getFiberFromRef(ref) {
+    if (!ref)
+        return null;
+    const keys = Object.keys(ref);
+    const fiberKey = keys.find((k) => k.startsWith('__reactFiber$') || k.startsWith('__reactInternalInstance$'));
+    if (fiberKey)
+        return ref[fiberKey];
+    if (ref._reactInternalFiber)
+        return ref._reactInternalFiber;
+    if (ref.stateNode)
+        return ref;
+    return null;
+}
+function getSourceFromFiber(fiber) {
+    if (!fiber)
+        return null;
+    const props = fiber.memoizedProps || fiber.pendingProps;
+    if (props && props.__rnStudioSource) {
+        return props.__rnStudioSource;
+    }
+    return null;
+}
+/**
+ * Walk up a fiber chain, returning the first ancestor that carries
+ * `__rnStudioSource` metadata.
+ */
+function findSourceOwner(startFiber) {
+    let current = startFiber;
+    while (current) {
+        const src = getSourceFromFiber(current);
+        if (src)
+            return { fiber: current, source: src };
+        current = current.return;
+    }
+    return null;
+}
+function fiberFromRef(ref) {
+    return getFiberFromRef(ref);
+}
+/**
+ * Derive a list of editable StyleProperty entries from a raw style prop,
+ * which may be an object, an array, or a StyleSheet id (number).
+ */
+function extractStyles(rawStyle) {
+    const flat = {};
+    const visit = (s) => {
+        if (!s)
+            return;
+        if (Array.isArray(s)) {
+            s.forEach(visit);
+            return;
+        }
+        if (typeof s === 'object') {
+            Object.assign(flat, s);
+        }
+    };
+    visit(rawStyle);
+    return Object.entries(flat).map(([key, value]) => {
+        const type = inferStyleType(key, value);
+        return { key, value, type };
+    });
+}
+function inferStyleType(key, value) {
+    if (typeof value === 'number')
+        return 'number';
+    if (typeof value === 'boolean')
+        return 'boolean';
+    if (typeof value === 'string') {
+        // Heuristic: anything that looks like a color becomes 'color'.
+        const colorish = /color/i.test(key) ||
+            /^#[0-9a-f]{3,8}$/i.test(value) ||
+            /^rgba?\(/i.test(value) ||
+            /^hsla?\(/i.test(value);
+        if (colorish)
+            return 'color';
+        return 'string';
+    }
+    return 'string';
+}
+/**
+ * Build a lightweight ComponentNode from a fiber with source metadata.
+ * Children are resolved lazily (one level deep) so the tree view can
+ * render without traversing the entire app.
+ */
+function buildComponentNode(fiber, source) {
+    const props = (fiber.memoizedProps || {});
+    const styles = extractStyles(props.style);
+    const id = `${source.file}:${source.line}:${source.column}`;
+    const children = [];
+    let child = fiber.child;
+    let safety = 0;
+    while (child && safety < 50) {
+        const sub = getSourceFromFiber(child);
+        if (sub) {
+            children.push({
+                id: `${sub.file}:${sub.line}:${sub.column}`,
+                componentName: sub.componentName,
+                source: sub,
+                props: (child.memoizedProps || {}),
+                styles: extractStyles((child.memoizedProps || {}).style),
+                children: [],
+            });
+        }
+        child = child.sibling;
+        safety++;
+    }
+    return {
+        id,
+        componentName: source.componentName,
+        source,
+        props,
+        styles,
+        children,
+    };
+}
+//# sourceMappingURL=fiberWalker.js.map

package/dist/utils/fiberWalker.js.map

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

package/dist/utils/measureComponent.d.ts

@@ -0,0 +1,15 @@
+/**
+ * measureComponent
+ *
+ * Thin promise wrapper around React Native's `measureInWindow` for use
+ * by the SelectionOverlay when drawing the highlight box around a
+ * selected component.
+ */
+export interface Rect {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+}
+export declare function measureInWindow(ref: any): Promise<Rect | null>;
+//# sourceMappingURL=measureComponent.d.ts.map

package/dist/utils/measureComponent.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"measureComponent.d.ts","sourceRoot":"","sources":["../../src/utils/measureComponent.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AACH,MAAM,WAAW,IAAI;IACnB,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;CAChB;AAGD,wBAAgB,eAAe,CAAC,GAAG,EAAE,GAAG,GAAG,OAAO,CAAC,IAAI,GAAG,IAAI,CAAC,CAuB9D"}

package/dist/utils/measureComponent.js

@@ -0,0 +1,28 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.measureInWindow = measureInWindow;
+/* eslint-disable @typescript-eslint/no-explicit-any */
+function measureInWindow(ref) {
+    return new Promise((resolve) => {
+        if (!ref || typeof ref.measureInWindow !== 'function') {
+            resolve(null);
+            return;
+        }
+        try {
+            ref.measureInWindow((x, y, width, height) => {
+                if (typeof x !== 'number' ||
+                    typeof y !== 'number' ||
+                    typeof width !== 'number' ||
+                    typeof height !== 'number') {
+                    resolve(null);
+                    return;
+                }
+                resolve({ x, y, width, height });
+            });
+        }
+        catch {
+            resolve(null);
+        }
+    });
+}
+//# sourceMappingURL=measureComponent.js.map

package/dist/utils/measureComponent.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"measureComponent.js","sourceRoot":"","sources":["../../src/utils/measureComponent.ts"],"names":[],"mappings":";;AAeA,0CAuBC;AAxBD,uDAAuD;AACvD,SAAgB,eAAe,CAAC,GAAQ;IACtC,OAAO,IAAI,OAAO,CAAC,CAAC,OAAO,EAAE,EAAE;QAC7B,IAAI,CAAC,GAAG,IAAI,OAAO,GAAG,CAAC,eAAe,KAAK,UAAU,EAAE,CAAC;YACtD,OAAO,CAAC,IAAI,CAAC,CAAC;YACd,OAAO;QACT,CAAC;QACD,IAAI,CAAC;YACH,GAAG,CAAC,eAAe,CAAC,CAAC,CAAS,EAAE,CAAS,EAAE,KAAa,EAAE,MAAc,EAAE,EAAE;gBAC1E,IACE,OAAO,CAAC,KAAK,QAAQ;oBACrB,OAAO,CAAC,KAAK,QAAQ;oBACrB,OAAO,KAAK,KAAK,QAAQ;oBACzB,OAAO,MAAM,KAAK,QAAQ,EAC1B,CAAC;oBACD,OAAO,CAAC,IAAI,CAAC,CAAC;oBACd,OAAO;gBACT,CAAC;gBACD,OAAO,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,CAAC,CAAC;YACnC,CAAC,CAAC,CAAC;QACL,CAAC;QAAC,MAAM,CAAC;YACP,OAAO,CAAC,IAAI,CAAC,CAAC;QAChB,CAAC;IACH,CAAC,CAAC,CAAC;AACL,CAAC"}

package/package.json

@@ -0,0 +1,72 @@
+{
+  "name": "rn-studio",
+  "version": "0.1.0",
+  "description": "Live UI editor for React Native — inspect and edit components directly in your emulator",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist",
+    "babel-plugin",
+    "bin",
+    "README.md"
+  ],
+  "bin": {
+    "rn-studio-server": "./bin/rn-studio-server.js"
+  },
+  "scripts": {
+    "build": "tsc",
+    "prepare": "npm run build"
+  },
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    },
+    "./babel-plugin": "./babel-plugin/index.js"
+  },
+  "peerDependencies": {
+    "react": ">=18",
+    "react-native": ">=0.70",
+    "react-native-gesture-handler": ">=2.0",
+    "react-native-reanimated": ">=3.0",
+    "react-native-haptic-feedback": ">=2.0",
+    "react-native-safe-area-context": ">=4.0"
+  },
+  "peerDependenciesMeta": {
+    "react-native-gesture-handler": { "optional": true },
+    "react-native-reanimated": { "optional": true },
+    "react-native-haptic-feedback": { "optional": true },
+    "react-native-safe-area-context": { "optional": true }
+  },
+  "dependencies": {
+    "@babel/parser": "^7.23.0",
+    "recast": "^0.23.0",
+    "ws": "^8.0.0"
+  },
+  "devDependencies": {
+    "typescript": "^5.3.0",
+    "@types/ws": "^8.5.0",
+    "@types/react": "^18.2.0",
+    "react": "18.2.0",
+    "react-native": "0.73.6"
+  },
+  "keywords": [
+    "react-native",
+    "devtools",
+    "ui-editor",
+    "live-edit",
+    "inspector",
+    "ast",
+    "babel"
+  ],
+  "license": "MIT",
+  "author": "dgutierrezd",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/dgutierrezd/rn-studio.git"
+  },
+  "homepage": "https://github.com/dgutierrezd/rn-studio#readme",
+  "bugs": {
+    "url": "https://github.com/dgutierrezd/rn-studio/issues"
+  }
+}