@hyperframes/studio 0.8.15 → 0.8.17

package/src/hooks/useDomEditTextCommits.test.tsx

@@ -66,6 +66,42 @@ function selectionFor(element: HTMLElement): DomEditSelection {
   };
 }
 
+/** A preview element inside a real iframe, which is where Studio's chrome expects to find it. */
+function previewElement(
+  html: string,
+  id: string,
+): { iframe: HTMLIFrameElement; element: HTMLElement } {
+  const iframe = document.createElement("iframe");
+  document.body.append(iframe);
+  const doc = iframe.contentDocument;
+  if (!doc) throw new Error("expected iframe document");
+  doc.body.innerHTML = html;
+  const element = doc.getElementById(id);
+  const HTMLElementCtor = doc.defaultView?.HTMLElement;
+  if (!HTMLElementCtor || !(element instanceof HTMLElementCtor)) {
+    throw new Error("expected preview element");
+  }
+  return { iframe, element };
+}
+
+/** Hook params with nothing selected and a writer that succeeds; override what the test is about. */
+function commitParams(
+  overrides: Partial<UseDomEditTextCommitsParams> = {},
+): UseDomEditTextCommitsParams {
+  return {
+    activeCompPath: "index.html",
+    previewIframeRef: { current: null },
+    showToast: vi.fn(),
+    domEditSelection: null,
+    applyDomSelection: vi.fn(),
+    refreshDomEditSelectionFromPreview: vi.fn(),
+    buildDomSelectionFromTarget: vi.fn(async () => null),
+    persistDomEditOperations: vi.fn().mockResolvedValue(undefined),
+    resolveImportedFontAsset: () => null,
+    ...overrides,
+  };
+}
+
 let cleanup: (() => void) | null = null;
 
 function renderTextCommitHook(params: UseDomEditTextCommitsParams) {
@@ -89,16 +125,7 @@ afterEach(() => {
 
 describe("useDomEditTextCommits", () => {
   it("does not let a stale failed fields commit revert newer text", async () => {
-    const iframe = document.createElement("iframe");
-    document.body.append(iframe);
-    const doc = iframe.contentDocument;
-    if (!doc) throw new Error("expected iframe document");
-    doc.body.innerHTML = '<div id="card">Original</div>';
-    const element = doc.getElementById("card");
-    const HTMLElementCtor = doc.defaultView?.HTMLElement;
-    if (!HTMLElementCtor || !(element instanceof HTMLElementCtor)) {
-      throw new Error("expected preview element");
-    }
+    const { iframe, element } = previewElement("<div id='card'>Original</div>", "card");
     vi.spyOn(console, "warn").mockImplementation(() => {});
     const selection = selectionFor(element);
     const stalePersist = createDeferred<void>();
@@ -106,17 +133,13 @@ describe("useDomEditTextCommits", () => {
       .fn()
       .mockImplementationOnce(() => stalePersist.promise)
       .mockResolvedValueOnce(undefined);
-    const hook = renderTextCommitHook({
-      activeCompPath: "index.html",
-      previewIframeRef: { current: iframe },
-      showToast: vi.fn(),
-      domEditSelection: selection,
-      applyDomSelection: vi.fn(),
-      refreshDomEditSelectionFromPreview: vi.fn(),
-      buildDomSelectionFromTarget: vi.fn(async () => null),
-      persistDomEditOperations,
-      resolveImportedFontAsset: () => null,
-    });
+    const hook = renderTextCommitHook(
+      commitParams({
+        previewIframeRef: { current: iframe },
+        domEditSelection: selection,
+        persistDomEditOperations,
+      }),
+    );
 
     let staleCommit: Promise<void> | undefined;
     act(() => {
@@ -132,4 +155,135 @@ describe("useDomEditTextCommits", () => {
 
     expect(element.innerHTML).toBe("Newest");
   });
+
+  it("reports persist failure from a style commit instead of resolving silently", async () => {
+    const { iframe, element } = previewElement("<div id='card'>Original</div>", "card");
+    const selection = selectionFor(element);
+    const showToast = vi.fn();
+    const hook = renderTextCommitHook(
+      commitParams({
+        previewIframeRef: { current: iframe },
+        showToast,
+        domEditSelection: selection,
+        persistDomEditOperations: vi.fn().mockRejectedValue(new Error("server said no")),
+      }),
+    );
+
+    let outcome: unknown;
+    await act(async () => {
+      outcome = await hook.handleDomStyleCommit("color", "red");
+    });
+
+    expect(outcome).toEqual({ ok: false, reason: "persist-failed" });
+    // The human-facing behaviour must be unchanged: still toasts, still reverts.
+    expect(showToast).toHaveBeenCalled();
+    expect(element.style.getPropertyValue("color")).toBe("");
+  });
+
+  it("reports a successful style commit", async () => {
+    const { iframe, element } = previewElement("<div id='card'>Original</div>", "card");
+    const selection = selectionFor(element);
+    const hook = renderTextCommitHook(
+      commitParams({ previewIframeRef: { current: iframe }, domEditSelection: selection }),
+    );
+
+    let outcome: unknown;
+    await act(async () => {
+      outcome = await hook.handleDomStyleCommit("color", "red");
+    });
+
+    expect(outcome).toEqual({ ok: true });
+  });
+
+  it("declines a style commit with no selection, without reaching the writer", async () => {
+    const persistDomEditOperations = vi.fn().mockResolvedValue(undefined);
+    const hook = renderTextCommitHook(
+      commitParams({
+        domEditSelection: null,
+        persistDomEditOperations,
+      }),
+    );
+
+    let outcome: unknown;
+    await act(async () => {
+      outcome = await hook.handleDomStyleCommit("color", "red");
+    });
+
+    expect(outcome).toEqual({ ok: false, reason: "no-selection" });
+    expect(persistDomEditOperations).not.toHaveBeenCalled();
+  });
+
+  it("declines a style commit for a manual-geometry property", async () => {
+    const persistDomEditOperations = vi.fn().mockResolvedValue(undefined);
+    const { element } = previewElement("<div id='card'>Original</div>", "card");
+    const hook = renderTextCommitHook(
+      commitParams({
+        domEditSelection: selectionFor(element),
+        persistDomEditOperations,
+      }),
+    );
+
+    let outcome: unknown;
+    await act(async () => {
+      // `left` is a manual-geometry property the style path deliberately refuses.
+      outcome = await hook.handleDomStyleCommit("left", "10px");
+    });
+
+    expect(outcome).toEqual({ ok: false, reason: "geometry-property" });
+    expect(persistDomEditOperations).not.toHaveBeenCalled();
+  });
+
+  it("declines a style commit when the selection cannot edit styles", async () => {
+    const persistDomEditOperations = vi.fn().mockResolvedValue(undefined);
+    const { element } = previewElement("<div id='card'>Original</div>", "card");
+    const locked = selectionFor(element);
+    locked.capabilities = { ...locked.capabilities, canEditStyles: false };
+    const hook = renderTextCommitHook(
+      commitParams({
+        domEditSelection: locked,
+        persistDomEditOperations,
+      }),
+    );
+
+    let outcome: unknown;
+    await act(async () => {
+      outcome = await hook.handleDomStyleCommit("color", "red");
+    });
+
+    expect(outcome).toEqual({ ok: false, reason: "styles-not-editable" });
+    expect(persistDomEditOperations).not.toHaveBeenCalled();
+  });
+
+  it("reports persist failure from a text commit instead of resolving silently", async () => {
+    const { iframe, element } = previewElement("<div id='card'>Original</div>", "card");
+    const selection = selectionFor(element);
+    const hook = renderTextCommitHook(
+      commitParams({
+        previewIframeRef: { current: iframe },
+        domEditSelection: selection,
+        persistDomEditOperations: vi.fn().mockRejectedValue(new Error("server said no")),
+      }),
+    );
+
+    let outcome: unknown;
+    await act(async () => {
+      outcome = await hook.handleDomTextCommit("Updated");
+    });
+
+    expect(outcome).toEqual({ ok: false, reason: "persist-failed" });
+    expect(element.innerHTML).toBe("Original");
+  });
+
+  it("reports a text commit declined for an unselected target", async () => {
+    const persistDomEditOperations = vi.fn().mockResolvedValue(undefined);
+    const hook = renderTextCommitHook(commitParams({ persistDomEditOperations }));
+
+    let outcome: unknown;
+    await act(async () => {
+      outcome = await hook.handleDomTextCommit("Updated");
+    });
+
+    expect(outcome).toEqual({ ok: false, reason: "no-selection" });
+    expect(persistDomEditOperations).not.toHaveBeenCalled();
+  });
 });

package/src/hooks/useDomEditTextCommits.ts

@@ -30,7 +30,10 @@ import { reportDomEditPersistFailure } from "./domEditPersistFailure";
 import {
   bumpDomEditCommitMapVersion,
   bumpDomEditCommitVersion,
+  domEditCommitDeclined,
   runDomEditCommit,
+  runReportedDomEditCommit,
+  type DomEditCommitOutcome,
 } from "./domEditCommitRunner";
 import { useDomEditAttributeCommits } from "./useDomEditAttributeCommits";
 import type { InlineTextEditCommit } from "./useInlineTextEdit";
@@ -186,10 +189,13 @@ export function useDomEditTextCommits({
   });
 
   const handleDomStyleCommit = useCallback(
-    async (property: string, value: string) => {
-      if (!domEditSelection) return;
-      if (isManualGeometryStyleProperty(property)) return;
-      if (!domEditSelection.capabilities.canEditStyles) return;
+    async (property: string, value: string): Promise<DomEditCommitOutcome> => {
+      if (!domEditSelection) return domEditCommitDeclined("no-selection");
+      if (isManualGeometryStyleProperty(property))
+        return domEditCommitDeclined("geometry-property");
+      if (!domEditSelection.capabilities.canEditStyles) {
+        return domEditCommitDeclined("styles-not-editable");
+      }
       const styleCommitKey = `${getDomEditTargetKey(domEditSelection)}:${property}`;
       const isLatestStyleCommit = bumpDomEditCommitMapVersion(
         domStyleCommitVersionRef.current,
@@ -210,7 +216,7 @@ export function useDomEditTextCommits({
       // element in-browser immediately, so a reload would only cost a black blink.
       const skipRefresh = true;
 
-      await runDomEditCommit({
+      return runReportedDomEditCommit({
         capture: () => {
           if (!doc) return;
           const el = findElementForSelection(doc, domEditSelection, activeCompPath);
@@ -267,9 +273,11 @@ export function useDomEditTextCommits({
   );
 
   const handleDomTextCommit = useCallback(
-    async (value: string, fieldKey?: string) => {
-      if (!domEditSelection) return;
-      if (!isTextEditableSelection(domEditSelection)) return;
+    async (value: string, fieldKey?: string): Promise<DomEditCommitOutcome> => {
+      if (!domEditSelection) return domEditCommitDeclined("no-selection");
+      if (!isTextEditableSelection(domEditSelection)) {
+        return domEditCommitDeclined("not-text-editable");
+      }
       const isLatestTextCommit = bumpDomEditCommitVersion(domTextCommitVersionRef);
       const nextTextFields = buildNextDomTextFields(domEditSelection.textFields, value, fieldKey);
       const textCommit = planDomTextCommit(domEditSelection.textFields, nextTextFields, value);
@@ -278,7 +286,7 @@ export function useDomEditTextCommits({
       let editedElement: HTMLElement | null = null;
       let previousInnerHtml: string | null = null;
 
-      await runDomEditCommit({
+      return runReportedDomEditCommit({
         capture: () => {
           if (!doc) return;
           const el = findElementForSelection(doc, domEditSelection, activeCompPath);

package/src/hooks/useDomEditWiring.ts

@@ -107,7 +107,7 @@ export interface UseDomEditWiringParams {
     resolvedFromValues?: Record<string, number | string>,
   ) => Promise<void>;
   removeAllKeyframes: (sel: DomEditSelection, animId: string) => Promise<void>;
-  handleDomManualEditsReset: (sel: DomEditSelection) => void;
+  handleDomManualEditsReset: (sel: DomEditSelection) => Promise<void>;
 }
 
 // fallow-ignore-next-line complexity

package/src/hooks/useDomGeometryCommits.test.tsx

@@ -52,6 +52,7 @@ describe("useDomGeometryCommits rollback", () => {
       commits!.handleDomBoxSizeCommit(selection, { width: 200, height: 160 }, { x: 30, y: 40 }),
     ).rejects.toBe(failure);
     await expect(commits!.handleDomRotationCommit(selection, { angle: 45 })).rejects.toBe(failure);
+    await expect(commits!.handleDomManualEditsReset(selection)).rejects.toBe(failure);
 
     expect(readStudioPathOffset(element)).toEqual({ x: 10, y: 20 });
     expect(readStudioBoxSize(element)).toEqual({ width: 100, height: 80 });

package/src/hooks/useDomGeometryCommits.ts

@@ -130,6 +130,9 @@ export function useDomGeometryCommits({
   const handleDomManualEditsReset = useCallback(
     (selection: DomEditSelection) => {
       const element = selection.element;
+      const beforeOffset = captureStudioPathOffset(element);
+      const beforeSize = captureStudioBoxSize(element);
+      const beforeRotation = captureStudioRotation(element);
       const clearPatches = [
         ...buildClearPathOffsetPatches(element),
         ...buildClearBoxSizePatches(element),
@@ -139,11 +142,16 @@ export function useDomGeometryCommits({
       clearStudioBoxSize(element);
       clearStudioRotation(element);
       // skipRefresh:false triggers reloadPreview() which re-syncs selection on load
-      void commitPositionPatchToHtml(selection, clearPatches, {
+      return commitPositionPatchToHtml(selection, clearPatches, {
         label: "Reset layer edits",
         coalesceKey: `manual-reset:${getDomEditTargetKey(selection)}`,
         skipRefresh: false,
-      }).catch(() => undefined);
+      }).catch((error) => {
+        restoreStudioPathOffset(element, beforeOffset);
+        restoreStudioBoxSize(element, beforeSize);
+        restoreStudioRotation(element, beforeRotation);
+        throw error;
+      });
     },
     [commitPositionPatchToHtml],
   );

package/src/hooks/useDomSelection.test.ts

@@ -208,6 +208,54 @@ describe("useDomSelection additive", () => {
 });
 
 describe("useDomSelection", () => {
+  it("ignores a repeated non-additive selection of the same target", () => {
+    const element = document.createElement("div");
+    element.id = "headline";
+    const first = makeSelection("Headline", element);
+    const repeated = makeSelection("Headline", element);
+    const harness = renderHarness({
+      activeCompPath: "intro.html",
+      projectId: "project-1",
+      refreshKey: 0,
+    });
+
+    act(() => harness.current().applyDomSelection(first));
+    harness.timeline.setSelectedTimelineElementId.mockClear();
+    harness.timeline.setTimelineSelectionSet.mockClear();
+
+    act(() => harness.current().applyDomSelection(repeated));
+
+    expect(harness.current().domEditSelection).toBe(first);
+    expect(harness.current().domEditGroupSelections).toEqual([first]);
+    expect(harness.timeline.setSelectedTimelineElementId).not.toHaveBeenCalled();
+    expect(harness.timeline.setTimelineSelectionSet).not.toHaveBeenCalled();
+    harness.cleanup();
+  });
+
+  it("still refreshes selection data for the same target when preserving the group", () => {
+    const element = document.createElement("div");
+    element.id = "headline";
+    const first = makeSelection("Headline", element);
+    const refreshed = makeSelection("Updated headline", element);
+    const harness = renderHarness({
+      activeCompPath: "intro.html",
+      projectId: "project-1",
+      refreshKey: 0,
+    });
+
+    act(() => harness.current().applyDomSelection(first));
+    act(() =>
+      harness.current().applyDomSelection(refreshed, {
+        preserveGroup: true,
+        revealPanel: false,
+      }),
+    );
+
+    expect(harness.current().domEditSelection).toBe(refreshed);
+    expect(harness.current().domEditGroupSelections).toEqual([refreshed]);
+    harness.cleanup();
+  });
+
   it("clears a committed selection when the active composition path changes", () => {
     const { selection, harness } = setupSelectedHarness();
     expect(harness.current().domEditSelection).toBe(selection);

package/src/hooks/useDomSelection.ts

@@ -1,10 +1,9 @@
 import { useState, useCallback, useRef, useEffect } from "react";
-import type { SelectElementOptions, TimelineElement } from "../player";
+import type { TimelineElement } from "../player";
 import {
   getAllPreviewTargetsFromPointer,
   getPreviewTargetFromPointer,
 } from "../utils/studioPreviewHelpers";
-import { type RightPanelTab } from "../utils/studioHelpers";
 import {
   domEditSelectionsTargetSame,
   domEditSelectionInGroup,
@@ -22,86 +21,18 @@ import { reapplyPositionEditsAfterSeek } from "../components/editor/manualEdits"
 import { useStudioTestHooks } from "./useStudioTestHooks";
 import { logSelect } from "../utils/selectDebug";
 import { announceTimelineSelection as announceSelectionToTimeline } from "./domSelectionTimelineMirror";
-
-// ── Types ──
-
-export interface ApplyDomSelectionOptions {
-  revealPanel?: boolean;
-  additive?: boolean;
-  preserveGroup?: boolean;
-  // A clear that came FROM the timeline must not be echoed back, or picking a
-  // clip with no canvas node would deselect the clip you just picked.
-  announce?: boolean;
-}
-
-export interface ResolveDomSelectionOptions {
-  preferClipAncestor?: boolean;
-  skipSourceProbe?: boolean;
-  activeGroupElement?: HTMLElement | null;
-}
-
-export interface UseDomSelectionParams {
-  projectId: string | null;
-  activeCompPath: string | null;
-  isMasterView: boolean;
-  compIdToSrc: Map<string, string>;
-  captionEditMode: boolean;
-  previewIframeRef: React.MutableRefObject<HTMLIFrameElement | null>;
-  timelineElements: TimelineElement[];
-  getTimelineSelectionSet: () => ReadonlySet<string>;
-  setSelectedTimelineElementId: (id: string | null, options?: SelectElementOptions) => void;
-  /** Publishes a whole multi-selection to the timeline; the anchor is set separately. */
-  setTimelineSelectionSet: (ids: Set<string>) => void;
-  setRightCollapsed: (collapsed: boolean) => void;
-  setRightPanelTab: (tab: RightPanelTab) => void;
-  previewIframe: HTMLIFrameElement | null;
-  refreshKey: number;
-  rightPanelTab: RightPanelTab;
-}
-
-export interface UseDomSelectionReturn {
-  // State
-  domEditSelection: DomEditSelection | null;
-  domEditGroupSelections: DomEditSelection[];
-  domEditHoverSelection: DomEditSelection | null;
-  activeGroupElement: HTMLElement | null;
-  // Refs
-  domEditSelectionRef: React.MutableRefObject<DomEditSelection | null>;
-  domEditGroupSelectionsRef: React.MutableRefObject<DomEditSelection[]>;
-  domEditHoverSelectionRef: React.MutableRefObject<DomEditSelection | null>;
-  activeGroupElementRef: React.MutableRefObject<HTMLElement | null>;
-  // State setters (needed by useDomEditSession for agent-prompt reset flows)
-  setDomEditSelection: React.Dispatch<React.SetStateAction<DomEditSelection | null>>;
-  setDomEditGroupSelections: React.Dispatch<React.SetStateAction<DomEditSelection[]>>;
-  setActiveGroupElement: (el: HTMLElement | null) => void;
-  // Callbacks
-  applyDomSelection: (
-    selection: DomEditSelection | null,
-    options?: ApplyDomSelectionOptions,
-  ) => void;
-  clearDomSelection: () => void;
-  buildDomSelectionFromTarget: (
-    target: HTMLElement,
-    options?: ResolveDomSelectionOptions,
-  ) => Promise<DomEditSelection | null>;
-  resolveDomSelectionFromPreviewPoint: (
-    clientX: number,
-    clientY: number,
-    options?: ResolveDomSelectionOptions,
-  ) => Promise<DomEditSelection | null>;
-  resolveAllDomSelectionsFromPreviewPoint: (
-    clientX: number,
-    clientY: number,
-  ) => Promise<DomEditSelection[]>;
-  updateDomEditHoverSelection: (selection: DomEditSelection | null) => void;
-  buildDomSelectionForTimelineElement: (
-    element: TimelineElement,
-  ) => Promise<DomEditSelection | null>;
-  handleTimelineElementSelect: (element: TimelineElement | null) => Promise<void>;
-  refreshDomEditSelectionFromPreview: (selection: DomEditSelection) => Promise<void>;
-  refreshDomEditGroupSelectionsFromPreview: (selections: DomEditSelection[]) => Promise<void>;
-  applyMarqueeSelection: (selections: DomEditSelection[], additive: boolean) => void;
-}
+import type {
+  ApplyDomSelectionOptions,
+  UseDomSelectionParams,
+  UseDomSelectionReturn,
+} from "./useDomSelectionTypes";
+
+export type {
+  ApplyDomSelectionOptions,
+  ResolveDomSelectionOptions,
+  UseDomSelectionParams,
+  UseDomSelectionReturn,
+} from "./useDomSelectionTypes";
 
 // ── Hook ──
 
@@ -187,6 +118,19 @@ export function useDomSelection({
       const isAdditiveSelection = Boolean(options?.additive);
       const currentSelection = domEditSelectionRef.current;
       const previousGroup = domEditGroupSelectionsRef.current;
+      const isRepeatedSingleSelection =
+        !isAdditiveSelection &&
+        !options?.preserveGroup &&
+        previousGroup.length === 1 &&
+        domEditSelectionsTargetSame(currentSelection, selection) &&
+        domEditSelectionsTargetSame(previousGroup[0], selection);
+      if (isRepeatedSingleSelection) {
+        if (options?.revealPanel !== false) {
+          setRightCollapsed(false);
+          if (rightPanelTabRef.current !== "variables") setRightPanelTab("design");
+        }
+        return;
+      }
       const currentGroup = isAdditiveSelection
         ? seedDomEditGroupWithSelection(previousGroup, currentSelection)
         : previousGroup;

package/src/hooks/useDomSelectionTypes.ts

@@ -0,0 +1,82 @@
+import type { Dispatch, MutableRefObject, SetStateAction } from "react";
+import type { DomEditSelection } from "../components/editor/domEditing";
+import type { SelectElementOptions, TimelineElement } from "../player";
+import type { RightPanelTab } from "../utils/studioHelpers";
+
+export interface ApplyDomSelectionOptions {
+  revealPanel?: boolean;
+  additive?: boolean;
+  preserveGroup?: boolean;
+  // A clear that came FROM the timeline must not be echoed back, or picking a
+  // clip with no canvas node would deselect the clip you just picked.
+  announce?: boolean;
+}
+
+export interface ResolveDomSelectionOptions {
+  preferClipAncestor?: boolean;
+  skipSourceProbe?: boolean;
+  activeGroupElement?: HTMLElement | null;
+}
+
+export interface UseDomSelectionParams {
+  projectId: string | null;
+  activeCompPath: string | null;
+  isMasterView: boolean;
+  compIdToSrc: Map<string, string>;
+  captionEditMode: boolean;
+  previewIframeRef: MutableRefObject<HTMLIFrameElement | null>;
+  timelineElements: TimelineElement[];
+  getTimelineSelectionSet: () => ReadonlySet<string>;
+  setSelectedTimelineElementId: (id: string | null, options?: SelectElementOptions) => void;
+  /** Publishes a whole multi-selection to the timeline; the anchor is set separately. */
+  setTimelineSelectionSet: (ids: Set<string>) => void;
+  setRightCollapsed: (collapsed: boolean) => void;
+  setRightPanelTab: (tab: RightPanelTab) => void;
+  previewIframe: HTMLIFrameElement | null;
+  refreshKey: number;
+  rightPanelTab: RightPanelTab;
+}
+
+export interface UseDomSelectionReturn {
+  // State
+  domEditSelection: DomEditSelection | null;
+  domEditGroupSelections: DomEditSelection[];
+  domEditHoverSelection: DomEditSelection | null;
+  activeGroupElement: HTMLElement | null;
+  // Refs
+  domEditSelectionRef: MutableRefObject<DomEditSelection | null>;
+  domEditGroupSelectionsRef: MutableRefObject<DomEditSelection[]>;
+  domEditHoverSelectionRef: MutableRefObject<DomEditSelection | null>;
+  activeGroupElementRef: MutableRefObject<HTMLElement | null>;
+  // State setters (needed by useDomEditSession for agent-prompt reset flows)
+  setDomEditSelection: Dispatch<SetStateAction<DomEditSelection | null>>;
+  setDomEditGroupSelections: Dispatch<SetStateAction<DomEditSelection[]>>;
+  setActiveGroupElement: (el: HTMLElement | null) => void;
+  // Callbacks
+  applyDomSelection: (
+    selection: DomEditSelection | null,
+    options?: ApplyDomSelectionOptions,
+  ) => void;
+  clearDomSelection: () => void;
+  buildDomSelectionFromTarget: (
+    target: HTMLElement,
+    options?: ResolveDomSelectionOptions,
+  ) => Promise<DomEditSelection | null>;
+  resolveDomSelectionFromPreviewPoint: (
+    clientX: number,
+    clientY: number,
+    options?: ResolveDomSelectionOptions,
+  ) => Promise<DomEditSelection | null>;
+  resolveAllDomSelectionsFromPreviewPoint: (
+    clientX: number,
+    clientY: number,
+  ) => Promise<DomEditSelection[]>;
+  updateDomEditHoverSelection: (selection: DomEditSelection | null) => void;
+  buildDomSelectionForTimelineElement: (
+    element: TimelineElement,
+  ) => Promise<DomEditSelection | null>;
+  handleTimelineElementSelect: (element: TimelineElement | null) => Promise<void>;
+  refreshDomEditSelectionFromPreview: (selection: DomEditSelection) => Promise<void>;
+  refreshDomEditGroupSelectionsFromPreview: (selections: DomEditSelection[]) => Promise<void>;
+  applyMarqueeSelection: (selections: DomEditSelection[], additive: boolean) => void;
+}