rn-studio 0.2.1 → 0.3.0

package/bin/rn-studio-init.js

@@ -0,0 +1,173 @@
+#!/usr/bin/env node
+/* eslint-disable no-console */
+/**
+ * rn-studio init
+ *
+ * Zero-config bootstrap for consumer apps. Run:
+ *
+ *   npx rn-studio init
+ *
+ * This command:
+ *   1. Adds `rn-studio/babel-plugin` to the project's babel.config.js
+ *      (gated on `process.env.NODE_ENV !== 'production'`)
+ *   2. Adds a `"studio": "rn-studio-server"` script to package.json
+ *   3. Prints the exact snippet to paste into App.tsx
+ */
+const fs = require('fs');
+const path = require('path');
+
+const cwd = process.cwd();
+const INDIGO = '\x1b[38;5;111m';
+const GREEN = '\x1b[32m';
+const GREY = '\x1b[90m';
+const BOLD = '\x1b[1m';
+const RESET = '\x1b[0m';
+
+function log(msg) { console.log(msg); }
+function ok(msg) { console.log(`${GREEN}✓${RESET} ${msg}`); }
+function info(msg) { console.log(`${INDIGO}→${RESET} ${msg}`); }
+function warn(msg) { console.log(`${GREY}! ${msg}${RESET}`); }
+
+function banner() {
+  console.log('');
+  console.log(`  ${INDIGO}${BOLD}rn-studio init${RESET}`);
+  console.log(`  ${GREY}Live UI editor for React Native${RESET}`);
+  console.log('');
+}
+
+/* ───────────────── package.json ───────────────── */
+function patchPackageJson() {
+  const pkgPath = path.join(cwd, 'package.json');
+  if (!fs.existsSync(pkgPath)) {
+    warn('No package.json found — skipping script injection.');
+    return;
+  }
+  const raw = fs.readFileSync(pkgPath, 'utf-8');
+  const pkg = JSON.parse(raw);
+  pkg.scripts = pkg.scripts || {};
+
+  if (pkg.scripts.studio === 'rn-studio-server') {
+    ok('package.json already has a "studio" script.');
+    return;
+  }
+  if (pkg.scripts.studio && pkg.scripts.studio !== 'rn-studio-server') {
+    warn(`package.json has a different "studio" script (${pkg.scripts.studio}). Leaving untouched.`);
+    return;
+  }
+  pkg.scripts.studio = 'rn-studio-server';
+  // Preserve two-space indentation convention.
+  fs.writeFileSync(pkgPath, JSON.stringify(pkg, null, 2) + '\n', 'utf-8');
+  ok('Added `"studio": "rn-studio-server"` to package.json scripts.');
+}
+
+/* ───────────────── babel.config.js ───────────────── */
+function patchBabelConfig() {
+  const candidates = [
+    'babel.config.js',
+    'babel.config.cjs',
+    'babel.config.mjs',
+    '.babelrc.js',
+    '.babelrc',
+  ];
+  const found = candidates
+    .map((c) => path.join(cwd, c))
+    .find((p) => fs.existsSync(p));
+
+  if (!found) {
+    warn('No babel.config.js found — creating one.');
+    const fresh = `module.exports = {
+  presets: ['module:@react-native/babel-preset'],
+  plugins: [
+    ...(process.env.NODE_ENV !== 'production' ? ['rn-studio/babel-plugin'] : []),
+  ],
+};
+`;
+    fs.writeFileSync(path.join(cwd, 'babel.config.js'), fresh, 'utf-8');
+    ok('Created babel.config.js with rn-studio plugin registered.');
+    return;
+  }
+
+  const content = fs.readFileSync(found, 'utf-8');
+  if (content.indexOf('rn-studio/babel-plugin') !== -1) {
+    ok(`${path.basename(found)} already references rn-studio/babel-plugin.`);
+    return;
+  }
+
+  // Attempt a light, string-based injection. If the file has a
+  // `plugins: [ ... ]` array, append the spread expression; otherwise
+  // add a new plugins property after the presets line.
+  let patched;
+  if (/plugins\s*:\s*\[/.test(content)) {
+    patched = content.replace(
+      /plugins\s*:\s*\[/,
+      `plugins: [\n    ...(process.env.NODE_ENV !== 'production' ? ['rn-studio/babel-plugin'] : []),`,
+    );
+  } else {
+    patched = content.replace(
+      /presets\s*:\s*\[[^\]]*\]\s*,?/,
+      (m) => `${m.replace(/,?\s*$/, ',')}\n  plugins: [\n    ...(process.env.NODE_ENV !== 'production' ? ['rn-studio/babel-plugin'] : []),\n  ],`,
+    );
+  }
+
+  if (patched === content) {
+    warn(`Could not auto-patch ${path.basename(found)} — add this manually:`);
+    console.log(
+      `    plugins: [\n      ...(process.env.NODE_ENV !== 'production' ? ['rn-studio/babel-plugin'] : []),\n    ],`,
+    );
+    return;
+  }
+
+  fs.writeFileSync(found, patched, 'utf-8');
+  ok(`Patched ${path.basename(found)} to include rn-studio/babel-plugin.`);
+}
+
+/* ───────────────── App.tsx snippet ───────────────── */
+function printAppSnippet() {
+  console.log('');
+  info('Add this to your App.tsx (or wherever you mount the root):');
+  console.log('');
+  console.log(`${GREY}────────────────────────────────────────────────${RESET}`);
+  console.log(`${INDIGO}import${RESET} { StudioProvider } ${INDIGO}from${RESET} 'rn-studio';`);
+  console.log('');
+  console.log(`${INDIGO}export default function${RESET} App() {`);
+  console.log('  return (');
+  console.log(`    <StudioProvider enabled={__DEV__} bubblePosition="bottom-right">`);
+  console.log('      <YourApp />');
+  console.log('    </StudioProvider>');
+  console.log('  );');
+  console.log('}');
+  console.log(`${GREY}────────────────────────────────────────────────${RESET}`);
+  console.log('');
+}
+
+/* ───────────────── run instructions ───────────────── */
+function printRunInstructions() {
+  console.log(`${BOLD}Next steps:${RESET}`);
+  console.log('');
+  console.log(`  ${GREY}#${RESET} Terminal 1 — Metro`);
+  console.log(`  ${INDIGO}npx${RESET} react-native start`);
+  console.log('');
+  console.log(`  ${GREY}#${RESET} Terminal 2 — rn-studio server`);
+  console.log(`  ${INDIGO}npm run${RESET} studio`);
+  console.log('');
+  console.log(
+    `${GREEN}✓ Setup complete.${RESET} Launch your app, tap the floating bubble,\n  then tap any component to edit its styles live.`,
+  );
+  console.log('');
+}
+
+/* ───────────────── main ───────────────── */
+function main() {
+  banner();
+  try {
+    patchPackageJson();
+    patchBabelConfig();
+    printAppSnippet();
+    printRunInstructions();
+  } catch (err) {
+    console.error(`\n${GREY}!${RESET} rn-studio init failed:`, err && err.message);
+    process.exit(1);
+  }
+}
+
+main();

package/bin/rn-studio-server.js

@@ -5,19 +5,21 @@
  *
  * 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.
+ * Handles:
+ *   - STYLE_CHANGE → AST engine rewrites the source file
+ *   - UNDO / REDO  → pops/pushes the in-memory edit stack
+ *   - STACK_STATE broadcast so clients can enable/disable buttons
  */
 const { WebSocketServer } = require('ws');
 
-let rewriteStyle;
+let AstEngine;
+let UndoStack;
 try {
-  ({ rewriteStyle } = require('../dist/ast/AstEngine'));
+  AstEngine = require('../dist/ast/AstEngine');
+  UndoStack = require('../dist/ast/UndoStack');
 } catch (err) {
   console.error(
-    '[rn-studio] Unable to load dist/ast/AstEngine. Did you run `npm run build`?'
+    '[rn-studio] Unable to load dist modules. Did you run `npm run build`?',
   );
   console.error(err.message);
   process.exit(1);
@@ -29,8 +31,22 @@ 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...');
 
+function broadcastStackState(ws) {
+  const state = UndoStack.getStackState();
+  const payload = JSON.stringify({ type: 'STACK_STATE', payload: state });
+  if (ws) {
+    ws.send(payload);
+  } else {
+    wss.clients.forEach((c) => {
+      if (c.readyState === 1) c.send(payload);
+    });
+  }
+}
+
 wss.on('connection', (ws) => {
   console.log('[rn-studio] Client connected');
+  // Sync new clients with the current stack depths.
+  broadcastStackState(ws);
 
   ws.on('message', async (raw) => {
     let msg;
@@ -41,7 +57,7 @@ wss.on('connection', (ws) => {
         JSON.stringify({
           type: 'ERROR',
           payload: { message: 'Invalid JSON payload' },
-        })
+        }),
       );
       return;
     }
@@ -54,7 +70,7 @@ wss.on('connection', (ws) => {
 
       if (msg.type === 'STYLE_CHANGE') {
         const { source, key, value } = msg.payload;
-        await rewriteStyle({
+        await AstEngine.rewriteStyle({
           file: source.file,
           line: source.line,
           column: source.column,
@@ -63,18 +79,65 @@ wss.on('connection', (ws) => {
         });
         ws.send(JSON.stringify({ type: 'ACK', payload: { success: true } }));
         console.log(
-          `[rn-studio] ✓ ${source.componentName} → ${key}: ${value}`
+          `[rn-studio] ✓ ${source.componentName} → ${key}: ${value}`,
         );
+        broadcastStackState();
+        return;
+      }
+
+      if (msg.type === 'UNDO') {
+        const entry = UndoStack.undo();
+        if (entry) {
+          console.log(`[rn-studio] ↶ undo: ${entry.label} (${entry.file})`);
+          ws.send(
+            JSON.stringify({
+              type: 'ACK',
+              payload: { success: true, message: 'undo' },
+            }),
+          );
+        } else {
+          ws.send(
+            JSON.stringify({
+              type: 'ACK',
+              payload: { success: false, message: 'Nothing to undo' },
+            }),
+          );
+        }
+        broadcastStackState();
+        return;
+      }
+
+      if (msg.type === 'REDO') {
+        const entry = UndoStack.redo();
+        if (entry) {
+          console.log(`[rn-studio] ↷ redo: ${entry.label} (${entry.file})`);
+          ws.send(
+            JSON.stringify({
+              type: 'ACK',
+              payload: { success: true, message: 'redo' },
+            }),
+          );
+        } else {
+          ws.send(
+            JSON.stringify({
+              type: 'ACK',
+              payload: { success: false, message: 'Nothing to redo' },
+            }),
+          );
+        }
+        broadcastStackState();
         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' },
-          })
+            payload: {
+              success: true,
+              message: 'PROP_CHANGE not yet implemented',
+            },
+          }),
         );
         return;
       }
@@ -84,7 +147,7 @@ wss.on('connection', (ws) => {
         JSON.stringify({
           type: 'ERROR',
           payload: { message: err && err.message ? err.message : String(err) },
-        })
+        }),
       );
     }
   });

package/dist/StudioProvider.d.ts

@@ -1,5 +1,5 @@
 import React, { MutableRefObject } from 'react';
-import type { BubblePosition, StudioConfig, StudioContextValue } from './types';
+import type { BubblePosition, SourceLocation, StudioConfig, StudioContextValue } from './types';
 interface Props extends Partial<StudioConfig> {
     enabled?: boolean;
     serverPort?: number;
@@ -8,26 +8,13 @@ interface Props extends Partial<StudioConfig> {
     children: React.ReactNode;
 }
 /**
- * Shared mutable ref to the app root view. Populated by `<StudioProvider>`
- * and consumed by `<SelectionOverlay>` for hit-testing via the React
- * DevTools `getInspectorDataForViewAtPoint` API. Exposing it at module
- * scope avoids having to thread it through context (and keeps the
- * context value shape unchanged for consumers).
+ * Shared mutable ref to the app root view. Populated by
+ * `<StudioProvider>` and consumed by `<SelectionOverlay>` for
+ * hit-testing via `getInspectorDataForViewAtPoint`.
  */
 export declare const appRootRef: MutableRefObject<any>;
-/**
- * <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;
+export type { SourceLocation };
 /** 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

@@ -1 +1 @@
-{"version":3,"file":"StudioProvider.d.ts","sourceRoot":"","sources":["../src/StudioProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EACZ,gBAAgB,EAKjB,MAAM,OAAO,CAAC;AAOf,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;;;;;;GAMG;AACH,eAAO,MAAM,UAAU,EAAE,gBAAgB,CAAC,GAAG,CAAqB,CAAC;AAEnE;;;;;;;;;;GAUG;AACH,wBAAgB,cAAc,CAAC,EAC7B,QAAQ,EACR,OAAe,EACf,UAAiB,EACjB,cAA+B,GAChC,EAAE,KAAK,qBAUP;AAyFD,0EAA0E;AAC1E,wBAAgB,SAAS,IAAI,kBAAkB,CAM9C"}
+{"version":3,"file":"StudioProvider.d.ts","sourceRoot":"","sources":["../src/StudioProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EACZ,gBAAgB,EAMjB,MAAM,OAAO,CAAC;AAYf,OAAO,KAAK,EACV,cAAc,EAEd,cAAc,EACd,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;;;;GAIG;AAEH,eAAO,MAAM,UAAU,EAAE,gBAAgB,CAAC,GAAG,CAAqB,CAAC;AAEnE,wBAAgB,cAAc,CAAC,EAC7B,QAAQ,EACR,OAAe,EACf,UAAiB,EACjB,cAA+B,GAChC,EAAE,KAAK,qBAYP;AA4LD,YAAY,EAAE,cAAc,EAAE,CAAC;AAE/B,0EAA0E;AAC1E,wBAAgB,SAAS,IAAI,kBAAkB,CAM9C"}

package/dist/StudioProvider.js

@@ -43,25 +43,15 @@ const WebSocketBridge_1 = require("./bridge/WebSocketBridge");
 const FloatingBubble_1 = require("./components/FloatingBubble");
 const SelectionOverlay_1 = require("./components/SelectionOverlay");
 const InspectorPanel_1 = require("./components/InspectorPanel");
+const persistence_1 = require("./utils/persistence");
+const findFiberBySource_1 = require("./utils/findFiberBySource");
 /**
- * Shared mutable ref to the app root view. Populated by `<StudioProvider>`
- * and consumed by `<SelectionOverlay>` for hit-testing via the React
- * DevTools `getInspectorDataForViewAtPoint` API. Exposing it at module
- * scope avoids having to thread it through context (and keeps the
- * context value shape unchanged for consumers).
+ * Shared mutable ref to the app root view. Populated by
+ * `<StudioProvider>` and consumed by `<SelectionOverlay>` for
+ * hit-testing via `getInspectorDataForViewAtPoint`.
  */
+/* eslint-disable @typescript-eslint/no-explicit-any */
 exports.appRootRef = { current: null };
-/**
- * <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);
@@ -71,50 +61,124 @@ function StudioProvider({ children, enabled = false, serverPort = 7878, bubblePo
 const StudioProviderInner = ({ serverPort, bubblePosition, children }) => {
     const [state, setState] = (0, react_1.useState)('IDLE');
     const [selectedComponent, setSelectedComponent] = (0, react_1.useState)(null);
+    const [canUndo, setCanUndo] = (0, react_1.useState)(false);
+    const [canRedo, setCanRedo] = (0, react_1.useState)(false);
     const bridgeRef = (0, react_1.useRef)(null);
     if (!bridgeRef.current) {
         bridgeRef.current = new WebSocketBridge_1.WebSocketBridge(serverPort);
     }
+    // Connect + subscribe to server messages.
     (0, react_1.useEffect)(() => {
         const bridge = bridgeRef.current;
         bridge.connect();
-        const off = bridge.on('ACK', () => {
-            // Per-editor success feedback is handled via the debounce timers
-            // in StyleEditor rows.
+        const offStack = bridge.on('STACK_STATE', (msg) => {
+            if (msg.payload) {
+                setCanUndo(msg.payload.undo > 0);
+                setCanRedo(msg.payload.redo > 0);
+            }
         });
         return () => {
-            off();
+            offStack();
             bridge.disconnect();
         };
     }, []);
-    const toggleActive = () => {
+    // Persist the last-selected source whenever it changes.
+    (0, react_1.useEffect)(() => {
+        if (selectedComponent) {
+            (0, persistence_1.saveLastSelection)(selectedComponent.source).catch(() => { });
+        }
+    }, [selectedComponent]);
+    // On initial mount, attempt to re-select the previously selected
+    // component (survives Cmd+R and Fast Refresh). Best-effort only.
+    (0, react_1.useEffect)(() => {
+        let cancelled = false;
+        (async () => {
+            const saved = await (0, persistence_1.loadLastSelection)();
+            if (!saved || cancelled)
+                return;
+            // Wait a frame for the fiber tree to commit.
+            setTimeout(() => {
+                if (cancelled)
+                    return;
+                const fiber = (0, findFiberBySource_1.findFiberBySource)(saved);
+                if (!fiber)
+                    return;
+                const props = (fiber.memoizedProps || {});
+                const node = {
+                    id: `${saved.file}:${saved.line}:${saved.column}`,
+                    componentName: saved.componentName,
+                    source: saved,
+                    props,
+                    styles: [],
+                    children: [],
+                };
+                // Silently restore in ACTIVE state so the user can tap the
+                // bubble to resume editing, without jarring re-opening the
+                // inspector automatically.
+                setSelectedComponent(node);
+                setState('ACTIVE');
+            }, 500);
+        })();
+        return () => {
+            cancelled = true;
+        };
+    }, []);
+    const toggleActive = (0, react_1.useCallback)(() => {
         setState((s) => {
             if (s === 'IDLE')
                 return 'ACTIVE';
             setSelectedComponent(null);
             return 'IDLE';
         });
-    };
-    const selectComponent = (node) => {
+    }, []);
+    const selectComponent = (0, react_1.useCallback)((node) => {
         setSelectedComponent(node);
         setState('SELECTED');
-    };
-    const clearSelection = () => {
+    }, []);
+    const clearSelection = (0, react_1.useCallback)(() => {
         setSelectedComponent(null);
         setState('ACTIVE');
-    };
-    const updateStyle = (key, value) => {
-        if (!selectedComponent)
+    }, []);
+    const updateStyle = (0, react_1.useCallback)((key, value) => {
+        const current = selectedComponent;
+        if (!current)
             return;
         bridgeRef.current?.send({
             type: 'STYLE_CHANGE',
-            payload: {
-                source: selectedComponent.source,
-                key,
-                value,
-            },
+            payload: { source: current.source, key, value },
         });
-    };
+        // Optimistically update the local styles list so the editor
+        // reflects the new value without a round-trip.
+        setSelectedComponent({
+            ...current,
+            styles: upsertLocalStyle(current.styles, key, value),
+        });
+    }, [selectedComponent]);
+    const addStyleProperty = (0, react_1.useCallback)((key, value) => {
+        const current = selectedComponent;
+        if (!current)
+            return;
+        // Booleans aren't writable via AST here yet; skip.
+        if (typeof value === 'boolean')
+            return;
+        bridgeRef.current?.send({
+            type: 'STYLE_CHANGE',
+            payload: { source: current.source, key, value },
+        });
+        setSelectedComponent({
+            ...current,
+            styles: upsertLocalStyle(current.styles, key, value),
+        });
+    }, [selectedComponent]);
+    const undo = (0, react_1.useCallback)(() => {
+        bridgeRef.current?.send({ type: 'UNDO' });
+    }, []);
+    const redo = (0, react_1.useCallback)(() => {
+        bridgeRef.current?.send({ type: 'REDO' });
+    }, []);
+    const setAppRootRef = (0, react_1.useCallback)((r) => {
+        exports.appRootRef.current = r;
+    }, []);
     const ctx = {
         isActive: state !== 'IDLE',
         isSelecting: state === 'SELECTING' || state === 'ACTIVE',
@@ -123,13 +187,11 @@ const StudioProviderInner = ({ serverPort, bubblePosition, children }) => {
         selectComponent,
         clearSelection,
         updateStyle,
-    };
-    // Wrap children in a ref'd host View so the SelectionOverlay can
-    // hit-test against the user's UI via Fabric's inspector data API.
-    // `collapsable={false}` guarantees the View remains a real native
-    // node that can be targeted by `getInspectorDataForViewAtPoint`.
-    const setAppRootRef = (r) => {
-        exports.appRootRef.current = r;
+        addStyleProperty,
+        undo,
+        redo,
+        canUndo,
+        canRedo,
     };
     return (react_1.default.createElement(StudioContext_1.StudioContext.Provider, { value: ctx },
         react_1.default.createElement(react_native_1.View, { ref: setAppRootRef, collapsable: false, style: { flex: 1 } }, children),
@@ -137,6 +199,21 @@ const StudioProviderInner = ({ serverPort, bubblePosition, children }) => {
         react_1.default.createElement(InspectorPanel_1.InspectorPanel, null),
         react_1.default.createElement(FloatingBubble_1.FloatingBubble, { position: bubblePosition })));
 };
+function upsertLocalStyle(list, key, value) {
+    const existing = list.findIndex((s) => s.key === key);
+    const type = typeof value === 'number'
+        ? 'number'
+        : /color/i.test(key) || /^#[0-9a-f]{3,8}$/i.test(String(value))
+            ? 'color'
+            : 'string';
+    const entry = { key, value, type };
+    if (existing >= 0) {
+        const next = list.slice();
+        next[existing] = entry;
+        return next;
+    }
+    return [...list, entry];
+}
 /** Hook for any descendant of `<StudioProvider>` to read studio state. */
 function useStudio() {
     const ctx = (0, react_1.useContext)(StudioContext_1.StudioContext);

package/dist/StudioProvider.js.map

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

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

@@ -1 +1 @@
-{"version":3,"file":"AstEngine.d.ts","sourceRoot":"","sources":["../../src/ast/AstEngine.ts"],"names":[],"mappings":"AAgCA,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;AAgHD;;;GAGG;AACH,wBAAsB,YAAY,CAAC,IAAI,EAAE,cAAc,GAAG,OAAO,CAAC,IAAI,CAAC,CAmJtE"}
+{"version":3,"file":"AstEngine.d.ts","sourceRoot":"","sources":["../../src/ast/AstEngine.ts"],"names":[],"mappings":"AAiCA,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;AAgHD;;;GAGG;AACH,wBAAsB,YAAY,CAAC,IAAI,EAAE,cAAc,GAAG,OAAO,CAAC,IAAI,CAAC,CA6JtE"}

package/dist/ast/AstEngine.js

@@ -65,6 +65,7 @@ exports.rewriteStyle = rewriteStyle;
 const parser = __importStar(require("@babel/parser"));
 const recast = __importStar(require("recast"));
 const fs = __importStar(require("fs"));
+const UndoStack_1 = require("./UndoStack");
 /* eslint-disable @typescript-eslint/no-explicit-any */
 const b = recast.types.builders;
 function buildLiteral(value) {
@@ -276,6 +277,15 @@ async function rewriteStyle(opts) {
         throw new Error(`Matched JSX at ${file}:${line}:${column} but could not write style "${key}" — unsupported style expression form.`);
     }
     const output = recast.print(ast).code;
+    // No-op guard: don't touch the file if nothing actually changed.
+    if (output === source)
+        return;
     fs.writeFileSync(file, output, 'utf-8');
+    (0, UndoStack_1.pushEdit)({
+        file,
+        before: source,
+        after: output,
+        label: `${key} = ${value}`,
+    });
 }
 //# sourceMappingURL=AstEngine.js.map