Visual editor (Pro only) (#1828)

<!-- This is an auto-generated description by cubic. -->
---
## Summary by cubic
Prototype visual editing mode for the preview app. Toggle the mode, pick
elements (single or multiple), and edit margin, padding, border,
background, static text, and text styles with live updates, then save
changes back to code.

- **New Features**
- Pen tool button to enable/disable visual editing in the preview and
toggle single/multi select; pro-only.
- Inline toolbar anchored to the selected element for Margin (X/Y),
Padding (X/Y), Border (width/radius/color), Background color, Edit Text
(when static), and Text Style (font size/weight/color/font family).
- Reads computed styles from the iframe and applies changes in real
time; auto-appends px; overlay updates on scroll/resize.
- Save/Discard dialog batches edits and writes Tailwind classes to
source files via IPC; uses AST/recast to update className and text,
replacing conflicting classes by prefix; supports multiple components.
- New visual editor worker to get/apply styles and enable inline text
editing via postMessage; selector client updated for coordinates
streaming and highlight/deselect.
- Proxy injects the visual editor client; new atoms track selected
component, coordinates, and pending changes; component analysis flags
dynamic styling and static text.
  - Uses runtimeId to correctly target and edit duplicate components.

- **Dependencies**
  - Added @babel/parser for AST-based text updates.
  - Added recast for safer code transformations.

<sup>Written for commit cdd50d33387a29103864f4743ae7570d64d61e93.
Summary will update automatically on new commits.</sup>

<!-- End of auto-generated description by cubic. -->

src/__tests__/style-utils.test.ts

@@ -0,0 +1,118 @@
+import { describe, it, expect } from "vitest";
+import { stylesToTailwind } from "../utils/style-utils";
+
+describe("convertSpacingToTailwind", () => {
+  describe("margin conversion", () => {
+    it("should convert equal margins on all sides", () => {
+      const result = stylesToTailwind({
+        margin: { left: "16px", right: "16px", top: "16px", bottom: "16px" },
+      });
+      expect(result).toEqual(["m-[16px]"]);
+    });
+
+    it("should convert equal horizontal margins", () => {
+      const result = stylesToTailwind({
+        margin: { left: "16px", right: "16px" },
+      });
+      expect(result).toEqual(["mx-[16px]"]);
+    });
+
+    it("should convert equal vertical margins", () => {
+      const result = stylesToTailwind({
+        margin: { top: "16px", bottom: "16px" },
+      });
+      expect(result).toEqual(["my-[16px]"]);
+    });
+  });
+
+  describe("padding conversion", () => {
+    it("should convert equal padding on all sides", () => {
+      const result = stylesToTailwind({
+        padding: { left: "20px", right: "20px", top: "20px", bottom: "20px" },
+      });
+      expect(result).toEqual(["p-[20px]"]);
+    });
+
+    it("should convert equal horizontal padding", () => {
+      const result = stylesToTailwind({
+        padding: { left: "12px", right: "12px" },
+      });
+      expect(result).toEqual(["px-[12px]"]);
+    });
+
+    it("should convert equal vertical padding", () => {
+      const result = stylesToTailwind({
+        padding: { top: "8px", bottom: "8px" },
+      });
+      expect(result).toEqual(["py-[8px]"]);
+    });
+  });
+
+  describe("combined margin and padding", () => {
+    it("should handle both margin and padding", () => {
+      const result = stylesToTailwind({
+        margin: { left: "16px", right: "16px" },
+        padding: { top: "8px", bottom: "8px" },
+      });
+      expect(result).toContain("mx-[16px]");
+      expect(result).toContain("py-[8px]");
+      expect(result).toHaveLength(2);
+    });
+  });
+
+  describe("edge cases: equal horizontal and vertical spacing", () => {
+    it("should consolidate px = py to p when values match", () => {
+      const result = stylesToTailwind({
+        padding: { left: "16px", right: "16px", top: "16px", bottom: "16px" },
+      });
+      // When all four sides are equal, should use p-[]
+      expect(result).toEqual(["p-[16px]"]);
+    });
+
+    it("should consolidate mx = my to m when values match (but not all four sides)", () => {
+      const result = stylesToTailwind({
+        margin: { left: "20px", right: "20px", top: "20px", bottom: "20px" },
+      });
+      // When all four sides are equal, should use m-[]
+      expect(result).toEqual(["m-[20px]"]);
+    });
+
+    it("should not consolidate when px != py", () => {
+      const result = stylesToTailwind({
+        padding: { left: "16px", right: "16px", top: "8px", bottom: "8px" },
+      });
+      expect(result).toContain("px-[16px]");
+      expect(result).toContain("py-[8px]");
+      expect(result).toHaveLength(2);
+    });
+
+    it("should not consolidate when mx != my", () => {
+      const result = stylesToTailwind({
+        margin: { left: "20px", right: "20px", top: "10px", bottom: "10px" },
+      });
+      expect(result).toContain("mx-[20px]");
+      expect(result).toContain("my-[10px]");
+      expect(result).toHaveLength(2);
+    });
+
+    it("should handle case where left != right", () => {
+      const result = stylesToTailwind({
+        padding: { left: "16px", right: "12px", top: "8px", bottom: "8px" },
+      });
+      expect(result).toContain("pl-[16px]");
+      expect(result).toContain("pr-[12px]");
+      expect(result).toContain("py-[8px]");
+      expect(result).toHaveLength(3);
+    });
+
+    it("should handle case where top != bottom", () => {
+      const result = stylesToTailwind({
+        margin: { left: "20px", right: "20px", top: "10px", bottom: "15px" },
+      });
+      expect(result).toContain("mx-[20px]");
+      expect(result).toContain("mt-[10px]");
+      expect(result).toContain("mb-[15px]");
+      expect(result).toHaveLength(3);
+    });
+  });
+});