v0.3.3 — README overhaul

📖 Documentation-only release. Comprehensive README refresh showcasing every feature shipped since 0.2.0:

• 🎯 Tap-to-inspect on Fabric + legacy
• 💅 Live style editing with StyleSheet resolution
• 🔍 Preview mode with ✓ commit and ↺ cancel
• ↶↷ Undo / Redo (50-deep)
• ➕ Add property picker (~80 RN styles)
• 📜 Auto-scroll on select
• 💾 Selection persistence across reloads
• 🚀 npx rn-studio init zero-config setup

See the rendered README at https://github.com/dgutierrezd/rn-studio or https://www.npmjs.com/package/rn-studio.

v0.3.2 — Fix styles disappearing after undo

Bug fix

Pressing ↶ undo (or ↷ redo, or ↺ cancel) could wipe the style list in the inspector panel, leaving an empty view until you re-tapped the component.

Root cause

The inspector held the currently selected component's styles in local React state, populated optimistically on every edit. When a server-side file revert happened (undo/redo/cancel), the local array was never refreshed from the live fiber. Additionally, the persistence re-selection path created a placeholder node with styles: [], which could replace a live selection on Fast Refresh.

Fix

• New src/utils/extractStyles.ts with a reusable extractStylesFromFiber() helper
• StudioProvider gains a refreshSelection callback scheduled on a 350 ms delay after undo/redo/cancel to let Metro Fast Refresh commit first
• Persistence restore now populates styles from the fiber instead of the empty placeholder

Install

npm install rn-studio@0.3.2

v0.3.1 — Preview mode with commit ✓ and cancel ↺

Every style edit made on a selected component is now held in a server-side preview buffer until you explicitly commit or cancel. Experiment freely — no more polluted undo history or accidental git diffs.

New preview flow

Button	Action
✓ Commit	Consolidates all preview edits into a single undo entry labeled "preview (N edits)", then re-arms the buffer for the next round
↺ Cancel	Writes the original file content back to disk verbatim — as if nothing ever happened. No undo stack pollution.

A lime "Preview" pill badge appears next to the component name while the buffer has unsaved edits. The buttons replace the regular ↶ ↷ undo/redo pair only while a preview is pending.

Safety rails

• Switching components auto-commits the current preview so edits survive.
• Closing the panel or toggling the bubble off auto-commits.
• Disconnecting (app reload, server restart) auto-cancels any in-flight preview so a stale buffer can never leak across sessions.

Why this matters

Preview writes still hit the disk so Metro Fast Refresh can visually show the change. But because the edit is held OUT of the undo stack until commit:

• If you cancel, your file is pristine. No entry to clean up.
• If you commit, you get ONE consolidated undo entry covering all the tweaks you made in that session — not 20 separate ones.
• Your git diff stays clean across experimentation.

Install

```bash
npm install rn-studio@0.3.1
```

Tested end-to-end with four scenarios:

• Cancel after 3 edits → file reverts exactly, undo stack untouched ✓
• Commit after 3 edits → single "preview (3 edits)" entry ✓
• Undo committed preview → all 3 edits reverted in one go ✓
• Empty commit → no-op, no entry created ✓

v0.3.0 — Add property picker, init CLI, undo/redo, persistence, auto-scroll

Five features delivered in one release:

✨ + Add property picker

A searchable modal listing ~80 React Native style properties across 11 groups (Layout, Flex, Spacing, Sizing, Position, Background, Border, Shadow, Typography, Transform, Visibility). Tap a property to insert it with a sensible default — the AST engine handles the upsert.

🚀 npx rn-studio init

Zero-config bootstrap. Patches babel.config.js to register the plugin (dev-only gated), adds the studio script to package.json, and prints the App.tsx snippet. Idempotent.

↶ ↷ Undo / Redo

50-deep server-side edit stack. Every AST rewrite captures before/after snapshots. New WebSocket messages UNDO, REDO, STACK_STATE keep client buttons in sync. ↶ ↷ buttons in the inspector panel header.

💾 State persistence

Selection survives Cmd+R and Fast Refresh via AsyncStorage. On mount, walks the React DevTools fiber roots to re-select the previously inspected component automatically.

📜 Auto-scroll on select

When you tap a component hidden behind the 60% inspector panel, rn-studio walks the fiber tree to find the nearest ScrollView / FlatList / SectionList ancestor and scrolls it so the component lands in the top 12% of the screen — fully visible above the panel. No-op if already visible.

Install

```bash
npm install rn-studio@0.3.0
npx rn-studio init
```

v0.2.1 — Demo video + thumbnail in README

Documentation-only release. Adds a demo video and poster-frame thumbnail to the README so it renders nicely on both github.com and npmjs.com.

v0.2.0 — Selection flow fix + AST StyleSheet resolution

Highlights

🎯 Selection now actually works on Fabric (RN 0.76+)

The old legacy UIManager.findSubviewIn approach silently failed on Fabric. Replaced with React Native's built-in getInspectorDataForViewAtPoint API, which works on both architectures.

🔀 Walks the fiber .return chain for the nearest user-code source

Previous hierarchy-based approach always returned the deepest host's props, pointing edits at node_modules/react-native/Libraries/Text/Text.js. Now walks each fiber individually and skips anything in node_modules or react-native/Libraries.

✨ AST engine resolves style={styles.foo} references

Tapping <Text style={styles.title}> now locates the matching entry in const styles = StyleSheet.create({...}) and upserts the new value directly. Falls back to style={[styles.title, { newKey: newValue }]} array overrides if resolution fails. No more silent no-op successes — matched-but-not-mutated now throws a real error.

🪶 No reanimated dependency

InspectorPanel now uses the stock Animated API. Consumers no longer need react-native-reanimated or the worklets babel plugin. Hard peer dependencies on react-native-reanimated and react-native-gesture-handler removed.

📜 Scrollable panel

All three tabs (Styles / Tree / Props) are now properly scrollable inside a flex: 1, minHeight: 0 tab body wrapper.

🎨 Minimal indigo accent

#C6F135 (harsh lime) → #7C9BFF (soft indigo). Consistent across bubble, highlight box, inspector chrome, active tab, StyleEditor caret, and component tree names.

Breaking changes

None for correctly set-up consumers. The peer dependency loosening (reanimated/gesture-handler no longer required) is strictly additive.

Install

```bash
npm install rn-studio@0.2.0
```

v0.1.0 — Initial release

First public release of rn-studio. Live UI editor for React Native — inspect and edit components directly in your emulator with automatic source rewriting via AST.