feat(studio): export the canvas edit overlay so a host can mount its handles (#4708)

Author: miguel-heygen

packages/studio/src/components/editor/DomEditOverlay.tsx

@@ -47,7 +47,7 @@ export {
 } from "./domEditOverlayGestures";
 export type { DomEditGroupPathOffsetCommit } from "./domEditOverlayGestures";
 
-interface DomEditOverlayProps {
+export interface DomEditOverlayProps {
   iframeRef: RefObject<HTMLIFrameElement | null>;
   activeCompositionPath: string | null;
   selection: DomEditSelection | null;

packages/studio/src/components/editor/DomEditOverlayHover.test.tsx

@@ -6,6 +6,7 @@ import { expect, it, vi } from "vitest";
 import type { DomEditSelection } from "./domEditing";
 import "./domEditOverlayTestMocks";
 import { DomEditOverlay } from "./DomEditOverlay";
+import { DomEditOverlay as PackageDomEditOverlay } from "../../index";
 
 (globalThis as unknown as { IS_REACT_ACT_ENVIRONMENT: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
 
@@ -74,3 +75,7 @@ it("rotates the hover box with the element", () => {
 it("leaves the hover box untransformed at angle zero", () => {
   expect(renderHover(0)).toBe("");
 });
+
+it("is exported from the package entry, so a host can mount it with its own commits", () => {
+  expect(PackageDomEditOverlay).toBe(DomEditOverlay);
+});

packages/studio/src/index.ts

@@ -181,6 +181,11 @@ export { useDomStyleCommit } from "./hooks/useDomStyleCommit";
 export type { UseDomStyleCommitOptions } from "./hooks/useDomStyleCommit";
 export type { DomEditCommitDeclineReason, DomEditCommitOutcome } from "./hooks/domEditCommitRunner";
 export { resolveDomEditSelection } from "./components/editor/domEditingLayers";
+export { DomEditOverlay } from "./components/editor/DomEditOverlay";
+export type {
+  DomEditGroupPathOffsetCommit,
+  DomEditOverlayProps,
+} from "./components/editor/DomEditOverlay";
 
 export {
   playSeamTransitionLoop,