fix(studio): surface gesture recording controls (#1390)

packages/studio/src/components/editor/DomEditOverlay.test.ts

@@ -282,6 +282,7 @@ describe("DomEditOverlay", () => {
     };
 
     let currentSelection: DomEditSelection | null = selection;
+    const onToggleRecording = vi.fn();
     const iframeRef = { current: document.createElement("iframe") as HTMLIFrameElement | null };
     const originalPointerCapture = HTMLDivElement.prototype.setPointerCapture;
     HTMLDivElement.prototype.setPointerCapture = () => {};
@@ -290,15 +291,16 @@ describe("DomEditOverlay", () => {
       const [selected, setSelected] = React.useState<DomEditSelection | null>(selection);
       currentSelection = selected;
 
-      return React.createElement(
-        DomEditOverlay,
-        createOverlayProps({
+      return React.createElement(DomEditOverlay, {
+        ...createOverlayProps({
           iframeRef,
           selection: selected,
           hoverSelection: null,
           onSelectionChange: (next: DomEditSelection) => setSelected(next),
         }),
-      );
+        recordingState: "idle",
+        onToggleRecording,
+      });
     }
 
     act(() => {
@@ -338,6 +340,16 @@ describe("DomEditOverlay", () => {
       "drag",
       expect.objectContaining({ button: 0 }),
     );
+    const recordButton = host.querySelector(
+      '[aria-label="Record gesture (R)"]',
+    ) as HTMLButtonElement;
+    expect(recordButton).toBeTruthy();
+
+    act(() => {
+      recordButton.click();
+    });
+
+    expect(onToggleRecording).toHaveBeenCalledTimes(1);
 
     act(() => {
       root.unmount();