rn-studio 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 dgutierrezd
+
+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,116 @@
+# rn-studio
+
+> Live UI editor for React Native. Inspect and edit any component directly inside the iOS Simulator or Android Emulator — changes are written to your source code automatically.
+
+[![npm version](https://img.shields.io/npm/v/rn-studio.svg)](https://www.npmjs.com/package/rn-studio)
+[![license](https://img.shields.io/npm/l/rn-studio.svg)](https://github.com/dgutierrezd/rn-studio/blob/main/LICENSE)
+[![platform](https://img.shields.io/badge/platform-iOS%20%7C%20Android-blue.svg)](https://github.com/dgutierrezd/rn-studio)
+
+## What it does
+
+rn-studio adds a floating bubble to your app in DEV mode. Tap it, tap any component, and a panel appears showing all its styles and the internal component tree. Edit a value — the change is written directly to your source file and Metro Fast Refresh updates the UI instantly. Zero impact on production.
+
+## Install
+
+```bash
+npm install rn-studio
+```
+
+Peer dependencies:
+
+```bash
+npm install react-native-gesture-handler react-native-reanimated react-native-haptic-feedback react-native-safe-area-context
+```
+
+## Setup
+
+### 1. Add the babel plugin
+
+```js
+// babel.config.js
+module.exports = {
+  presets: ['module:metro-react-native-babel-preset'],
+  plugins: [
+    ...(process.env.NODE_ENV !== 'production' ? ['rn-studio/babel-plugin'] : []),
+  ],
+};
+```
+
+### 2. Start the server (alongside Metro)
+
+```bash
+# Terminal 1
+npx react-native start
+
+# Terminal 2
+npm run studio
+```
+
+Add to your app's `package.json`:
+
+```json
+{
+  "scripts": {
+    "studio": "rn-studio-server"
+  }
+}
+```
+
+### 3. Wrap your App.tsx
+
+```tsx
+import { StudioProvider } from 'rn-studio';
+
+export default function App() {
+  return (
+    <StudioProvider enabled={__DEV__} bubblePosition="bottom-right">
+      <YourApp />
+    </StudioProvider>
+  );
+}
+```
+
+## How it works
+
+| Layer | What it does |
+|---|---|
+| Babel plugin | Annotates every JSX element with file + line metadata at compile time |
+| Floating bubble | Toggles selection mode on tap |
+| Selection overlay | Tap any component to inspect it |
+| Inspector panel | Shows styles, component tree, and editable props |
+| WebSocket bridge | Sends changes from the app to the local CLI server |
+| AST engine | Locates and rewrites the exact prop in your source file |
+| Metro Fast Refresh | Picks up the file change and updates the UI |
+
+## API
+
+### `<StudioProvider>` props
+
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| `enabled` | `boolean` | `false` | Show the studio UI |
+| `serverPort` | `number` | `7878` | CLI server port |
+| `bubblePosition` | `'bottom-right' \| 'bottom-left' \| 'top-right' \| 'top-left'` | `'bottom-right'` | Bubble starting corner |
+| `theme` | `'dark' \| 'light'` | `'dark'` | Panel theme |
+
+### `useStudio()`
+
+```ts
+const {
+  isActive,
+  isSelecting,
+  selectedComponent,
+  toggleActive,
+  selectComponent,
+  clearSelection,
+  updateStyle,
+} = useStudio();
+```
+
+## Contributing
+
+Pull requests are welcome. For major changes, please open an issue first.
+
+## License
+
+MIT © [dgutierrezd](https://github.com/dgutierrezd)

package/babel-plugin/index.js

@@ -0,0 +1,68 @@
+/**
+ * babel-plugin-rn-studio
+ *
+ * Instruments every JSX element at compile time by injecting a
+ * `__rnStudioSource` prop that carries source location metadata.
+ *
+ * The metadata is later used at runtime by the rn-studio overlay to
+ * resolve any on-screen component back to its exact location in the
+ * source file, so the AST engine can rewrite it.
+ *
+ * Usage (consumer app babel.config.js):
+ *
+ *   plugins: [
+ *     ...(process.env.NODE_ENV !== 'production' ? ['rn-studio/babel-plugin'] : [])
+ *   ]
+ */
+module.exports = function rnStudioBabelPlugin({ types: t }) {
+  return {
+    name: 'babel-plugin-rn-studio',
+    visitor: {
+      JSXOpeningElement(path, state) {
+        // Never instrument in production builds.
+        if (process.env.NODE_ENV === 'production') return;
+
+        const filename = state.filename || 'unknown';
+        const { line, column } = (path.node.loc && path.node.loc.start) || {
+          line: 0,
+          column: 0,
+        };
+
+        const nameNode = path.node.name;
+        let componentName = 'Unknown';
+        if (t.isJSXIdentifier(nameNode)) {
+          componentName = nameNode.name;
+        } else if (t.isJSXMemberExpression(nameNode)) {
+          const obj = nameNode.object && nameNode.object.name;
+          const prop = nameNode.property && nameNode.property.name;
+          componentName = `${obj || '?'}.${prop || '?'}`;
+        }
+
+        // Skip if already annotated (idempotent across re-runs).
+        const already = path.node.attributes.some(
+          (a) =>
+            t.isJSXAttribute(a) &&
+            t.isJSXIdentifier(a.name, { name: '__rnStudioSource' })
+        );
+        if (already) return;
+
+        const sourceProp = t.jsxAttribute(
+          t.jsxIdentifier('__rnStudioSource'),
+          t.jsxExpressionContainer(
+            t.objectExpression([
+              t.objectProperty(t.identifier('file'), t.stringLiteral(filename)),
+              t.objectProperty(t.identifier('line'), t.numericLiteral(line)),
+              t.objectProperty(t.identifier('column'), t.numericLiteral(column)),
+              t.objectProperty(
+                t.identifier('componentName'),
+                t.stringLiteral(componentName)
+              ),
+            ])
+          )
+        );
+
+        path.node.attributes.push(sourceProp);
+      },
+    },
+  };
+};

package/bin/rn-studio-server.js

@@ -0,0 +1,98 @@
+#!/usr/bin/env node
+/* eslint-disable no-console */
+/**
+ * rn-studio CLI server
+ *
+ * Run alongside Metro:   npm run studio
+ *
+ * Responsibilities:
+ *   1. Listen on ws://localhost:7878 for messages from the rn-studio runtime.
+ *   2. On STYLE_CHANGE, dispatch to the AST engine which rewrites the
+ *      source file. Metro's Fast Refresh instantly propagates the edit.
+ */
+const { WebSocketServer } = require('ws');
+
+let rewriteStyle;
+try {
+  ({ rewriteStyle } = require('../dist/ast/AstEngine'));
+} catch (err) {
+  console.error(
+    '[rn-studio] Unable to load dist/ast/AstEngine. Did you run `npm run build`?'
+  );
+  console.error(err.message);
+  process.exit(1);
+}
+
+const PORT = Number(process.env.RN_STUDIO_PORT) || 7878;
+const wss = new WebSocketServer({ port: PORT });
+
+console.log(`[rn-studio] Server running on ws://localhost:${PORT}`);
+console.log('[rn-studio] Waiting for React Native runtime to connect...');
+
+wss.on('connection', (ws) => {
+  console.log('[rn-studio] Client connected');
+
+  ws.on('message', async (raw) => {
+    let msg;
+    try {
+      msg = JSON.parse(raw.toString());
+    } catch {
+      ws.send(
+        JSON.stringify({
+          type: 'ERROR',
+          payload: { message: 'Invalid JSON payload' },
+        })
+      );
+      return;
+    }
+
+    try {
+      if (msg.type === 'PING') {
+        ws.send(JSON.stringify({ type: 'ACK', payload: { success: true } }));
+        return;
+      }
+
+      if (msg.type === 'STYLE_CHANGE') {
+        const { source, key, value } = msg.payload;
+        await rewriteStyle({
+          file: source.file,
+          line: source.line,
+          column: source.column,
+          key,
+          value,
+        });
+        ws.send(JSON.stringify({ type: 'ACK', payload: { success: true } }));
+        console.log(
+          `[rn-studio] ✓ ${source.componentName} → ${key}: ${value}`
+        );
+        return;
+      }
+
+      if (msg.type === 'PROP_CHANGE') {
+        // Reserved for future prop editing. Ack for now.
+        ws.send(
+          JSON.stringify({
+            type: 'ACK',
+            payload: { success: true, message: 'PROP_CHANGE not yet implemented' },
+          })
+        );
+        return;
+      }
+    } catch (err) {
+      console.error('[rn-studio] Error:', err);
+      ws.send(
+        JSON.stringify({
+          type: 'ERROR',
+          payload: { message: err && err.message ? err.message : String(err) },
+        })
+      );
+    }
+  });
+
+  ws.on('close', () => console.log('[rn-studio] Client disconnected'));
+});
+
+process.on('SIGINT', () => {
+  console.log('\n[rn-studio] Shutting down...');
+  wss.close(() => process.exit(0));
+});

package/dist/StudioProvider.d.ts

@@ -0,0 +1,25 @@
+import React from 'react';
+import type { BubblePosition, StudioConfig, StudioContextValue } from './types';
+interface Props extends Partial<StudioConfig> {
+    enabled?: boolean;
+    serverPort?: number;
+    bubblePosition?: BubblePosition;
+    theme?: 'dark' | 'light';
+    children: React.ReactNode;
+}
+/**
+ * <StudioProvider>
+ *
+ * Wrap your App.tsx with this provider. When `enabled` is false (the
+ * default, intended for production), it renders children verbatim and
+ * introduces zero overhead — no context, no bridge, no overlay.
+ *
+ * When enabled, it manages the studio state machine, opens a WebSocket
+ * connection to the CLI server, and renders the floating bubble,
+ * selection overlay, and inspector panel above your app.
+ */
+export declare function StudioProvider({ children, enabled, serverPort, bubblePosition, }: Props): React.JSX.Element;
+/** Hook for any descendant of `<StudioProvider>` to read studio state. */
+export declare function useStudio(): StudioContextValue;
+export {};
+//# sourceMappingURL=StudioProvider.d.ts.map

package/dist/StudioProvider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"StudioProvider.d.ts","sourceRoot":"","sources":["../src/StudioProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkD,MAAM,OAAO,CAAC;AAMvE,OAAO,KAAK,EACV,cAAc,EAEd,YAAY,EACZ,kBAAkB,EAEnB,MAAM,SAAS,CAAC;AAEjB,UAAU,KAAM,SAAQ,OAAO,CAAC,YAAY,CAAC;IAC3C,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,cAAc,CAAC,EAAE,cAAc,CAAC;IAChC,KAAK,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IACzB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,cAAc,CAAC,EAC7B,QAAQ,EACR,OAAe,EACf,UAAiB,EACjB,cAA+B,GAChC,EAAE,KAAK,qBAUP;AA+ED,0EAA0E;AAC1E,wBAAgB,SAAS,IAAI,kBAAkB,CAM9C"}

package/dist/StudioProvider.js

@@ -0,0 +1,131 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StudioProvider = StudioProvider;
+exports.useStudio = useStudio;
+const react_1 = __importStar(require("react"));
+const StudioContext_1 = require("./context/StudioContext");
+const WebSocketBridge_1 = require("./bridge/WebSocketBridge");
+const FloatingBubble_1 = require("./components/FloatingBubble");
+const SelectionOverlay_1 = require("./components/SelectionOverlay");
+const InspectorPanel_1 = require("./components/InspectorPanel");
+/**
+ * <StudioProvider>
+ *
+ * Wrap your App.tsx with this provider. When `enabled` is false (the
+ * default, intended for production), it renders children verbatim and
+ * introduces zero overhead — no context, no bridge, no overlay.
+ *
+ * When enabled, it manages the studio state machine, opens a WebSocket
+ * connection to the CLI server, and renders the floating bubble,
+ * selection overlay, and inspector panel above your app.
+ */
+function StudioProvider({ children, enabled = false, serverPort = 7878, bubblePosition = 'bottom-right', }) {
+    if (!enabled) {
+        return react_1.default.createElement(react_1.default.Fragment, null, children);
+    }
+    return (react_1.default.createElement(StudioProviderInner, { serverPort: serverPort, bubblePosition: bubblePosition }, children));
+}
+const StudioProviderInner = ({ serverPort, bubblePosition, children }) => {
+    const [state, setState] = (0, react_1.useState)('IDLE');
+    const [selectedComponent, setSelectedComponent] = (0, react_1.useState)(null);
+    const bridgeRef = (0, react_1.useRef)(null);
+    if (!bridgeRef.current) {
+        bridgeRef.current = new WebSocketBridge_1.WebSocketBridge(serverPort);
+    }
+    (0, react_1.useEffect)(() => {
+        const bridge = bridgeRef.current;
+        bridge.connect();
+        const off = bridge.on('ACK', () => {
+            // Success acks are surfaced to child editors via the per-row
+            // debounce timer; nothing else to do here for now.
+        });
+        return () => {
+            off();
+            bridge.disconnect();
+        };
+    }, []);
+    const toggleActive = () => {
+        setState((s) => {
+            if (s === 'IDLE')
+                return 'ACTIVE';
+            setSelectedComponent(null);
+            return 'IDLE';
+        });
+    };
+    const selectComponent = (node) => {
+        setSelectedComponent(node);
+        setState('SELECTED');
+    };
+    const clearSelection = () => {
+        setSelectedComponent(null);
+        setState('ACTIVE');
+    };
+    const updateStyle = (key, value) => {
+        if (!selectedComponent)
+            return;
+        bridgeRef.current?.send({
+            type: 'STYLE_CHANGE',
+            payload: {
+                source: selectedComponent.source,
+                key,
+                value,
+            },
+        });
+    };
+    const ctx = {
+        isActive: state !== 'IDLE',
+        isSelecting: state === 'SELECTING' || state === 'ACTIVE',
+        selectedComponent,
+        toggleActive,
+        selectComponent,
+        clearSelection,
+        updateStyle,
+    };
+    return (react_1.default.createElement(StudioContext_1.StudioContext.Provider, { value: ctx },
+        children,
+        react_1.default.createElement(SelectionOverlay_1.SelectionOverlay, null),
+        react_1.default.createElement(InspectorPanel_1.InspectorPanel, null),
+        react_1.default.createElement(FloatingBubble_1.FloatingBubble, { position: bubblePosition })));
+};
+/** Hook for any descendant of `<StudioProvider>` to read studio state. */
+function useStudio() {
+    const ctx = (0, react_1.useContext)(StudioContext_1.StudioContext);
+    if (!ctx) {
+        throw new Error('useStudio must be used inside <StudioProvider>');
+    }
+    return ctx;
+}
+//# sourceMappingURL=StudioProvider.js.map

package/dist/StudioProvider.js.map

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

package/dist/ast/AstEngine.d.ts

@@ -0,0 +1,16 @@
+export interface RewriteOptions {
+    file: string;
+    line: number;
+    column: number;
+    key: string;
+    value: string | number;
+}
+/**
+ * Rewrites (or inserts) a single style key on the JSX element that
+ * begins at the supplied (line, column). Supports:
+ *
+ *   - Inline object literal:  style={{ backgroundColor: 'red' }}
+ *   - Array with inline obj:  style={[base, { backgroundColor: 'red' }]}
+ */
+export declare function rewriteStyle(opts: RewriteOptions): Promise<void>;
+//# sourceMappingURL=AstEngine.d.ts.map

package/dist/ast/AstEngine.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AstEngine.d.ts","sourceRoot":"","sources":["../../src/ast/AstEngine.ts"],"names":[],"mappings":"AAeA,MAAM,WAAW,cAAc;IAC7B,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,MAAM,CAAC;IACf,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;CACxB;AASD;;;;;;GAMG;AACH,wBAAsB,YAAY,CAAC,IAAI,EAAE,cAAc,GAAG,OAAO,CAAC,IAAI,CAAC,CA+FtE"}

package/dist/ast/AstEngine.js

@@ -0,0 +1,153 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.rewriteStyle = rewriteStyle;
+/**
+ * AstEngine
+ *
+ * Server-side (Node.js) module that rewrites a JSX element's `style` prop
+ * in-place on disk, preserving formatting, comments, and surrounding code
+ * thanks to recast.
+ *
+ * Location resolution is based on the (line, column) coordinates of the
+ * JSXOpeningElement — the same coordinates the babel plugin embeds into
+ * `__rnStudioSource` at compile time.
+ */
+const parser = __importStar(require("@babel/parser"));
+const recast = __importStar(require("recast"));
+const fs = __importStar(require("fs"));
+const b = recast.types.builders;
+function buildLiteral(value) {
+    if (typeof value === 'number')
+        return b.numericLiteral(value);
+    return b.stringLiteral(String(value));
+}
+/**
+ * Rewrites (or inserts) a single style key on the JSX element that
+ * begins at the supplied (line, column). Supports:
+ *
+ *   - Inline object literal:  style={{ backgroundColor: 'red' }}
+ *   - Array with inline obj:  style={[base, { backgroundColor: 'red' }]}
+ */
+async function rewriteStyle(opts) {
+    const { file, line, column, key, value } = opts;
+    if (!fs.existsSync(file)) {
+        throw new Error(`Source file not found: ${file}`);
+    }
+    const source = fs.readFileSync(file, 'utf-8');
+    const ast = recast.parse(source, {
+        parser: {
+            parse: (src) => parser.parse(src, {
+                sourceType: 'module',
+                plugins: ['typescript', 'jsx'],
+                tokens: true,
+            }),
+        },
+    });
+    let matched = false;
+    recast.visit(ast, {
+        visitJSXOpeningElement(path) {
+            const loc = path.node.loc && path.node.loc.start;
+            if (!loc || loc.line !== line || loc.column !== column) {
+                return this.traverse(path);
+            }
+            matched = true;
+            // Locate the `style` prop.
+            const attributes = (path.node.attributes || []);
+            let styleAttr = attributes.find((a) => a.type === 'JSXAttribute' && a.name && a.name.name === 'style');
+            // If no style prop exists, create one:  style={{ [key]: value }}
+            if (!styleAttr) {
+                const obj = b.objectExpression([
+                    b.property('init', b.identifier(key), buildLiteral(value)),
+                ]);
+                styleAttr = b.jsxAttribute(b.jsxIdentifier('style'), b.jsxExpressionContainer(obj));
+                path.node.attributes.push(styleAttr);
+                return false;
+            }
+            const expr = styleAttr.value &&
+                styleAttr.value.type === 'JSXExpressionContainer' &&
+                styleAttr.value.expression;
+            if (!expr)
+                return false;
+            // Case 1: inline object.
+            if (expr.type === 'ObjectExpression') {
+                upsertObjectProperty(expr, key, value);
+                return false;
+            }
+            // Case 2: array — look for the first ObjectExpression and upsert.
+            if (expr.type === 'ArrayExpression') {
+                const firstObj = (expr.elements || []).find((el) => el && el.type === 'ObjectExpression');
+                if (firstObj) {
+                    upsertObjectProperty(firstObj, key, value);
+                }
+                else {
+                    expr.elements.push(b.objectExpression([
+                        b.property('init', b.identifier(key), buildLiteral(value)),
+                    ]));
+                }
+                return false;
+            }
+            // Case 3: identifier (e.g. style={styles.foo}) — unsupported for now.
+            // A future version could resolve StyleSheet.create definitions.
+            return false;
+        },
+    });
+    if (!matched) {
+        throw new Error(`Could not locate JSX element at ${file}:${line}:${column}`);
+    }
+    const output = recast.print(ast).code;
+    fs.writeFileSync(file, output, 'utf-8');
+}
+function upsertObjectProperty(objExpr, key, value) {
+    const props = objExpr.properties;
+    const existing = props.find((p) => {
+        if (!p || (p.type !== 'ObjectProperty' && p.type !== 'Property'))
+            return false;
+        const k = p.key;
+        if (!k)
+            return false;
+        return ((k.type === 'Identifier' && k.name === key) ||
+            (k.type === 'StringLiteral' && k.value === key) ||
+            (k.type === 'Literal' && k.value === key));
+    });
+    const literal = buildLiteral(value);
+    if (existing) {
+        existing.value = literal;
+    }
+    else {
+        props.push(b.property('init', b.identifier(key), literal));
+    }
+}
+//# sourceMappingURL=AstEngine.js.map

package/dist/ast/AstEngine.js.map

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

package/dist/bridge/WebSocketBridge.d.ts

@@ -0,0 +1,24 @@
+import type { StudioMessage } from '../types';
+/**
+ * WebSocketBridge
+ *
+ * Runs inside the React Native app (Metro bundle). Maintains a
+ * persistent connection to the rn-studio CLI server (default ws://localhost:7878).
+ * Automatically reconnects with exponential backoff if the server is
+ * not yet running — typical during a fresh `npm run studio`.
+ */
+export declare class WebSocketBridge {
+    private ws;
+    private port;
+    private reconnectAttempts;
+    private maxAttempts;
+    private listeners;
+    private manuallyClosed;
+    constructor(port?: number);
+    connect(): void;
+    private scheduleReconnect;
+    send(msg: StudioMessage): void;
+    on(type: StudioMessage['type'], cb: (msg: StudioMessage) => void): () => void;
+    disconnect(): void;
+}
+//# sourceMappingURL=WebSocketBridge.d.ts.map