feat(studio): marquee multi-selection + AE Easy Ease presets

Marquee selection: click+drag on empty canvas space draws a dashed
selection rectangle. On release, all elements whose oriented bounding
box intersects the marquee are group-selected via SAT intersection,
handling rotated/scaled/skewed elements accurately. Shift+marquee
adds to existing selection. Click on empty space deselects.

AE presets: adds After Effects' correct Easy Ease bezier values
(0.333, 0, 0.667, 1) as first-class presets in the Animation panel,
replacing power2.inOut in the top row of the preset grid.

Author: miguel-heygen

packages/studio/src/components/StudioPreviewArea.tsx

@@ -17,7 +17,7 @@ import {
   STUDIO_PREVIEW_SELECTION_ENABLED,
 } from "./editor/manualEditingAvailability";
 import { useStudioPlaybackContext, useStudioShellContext } from "../contexts/StudioContext";
-import { useDomEditContext } from "../contexts/DomEditContext";
+import { useDomEditActionsContext, useDomEditSelectionContext } from "../contexts/DomEditContext";
 import { TimelineEditProvider } from "../contexts/TimelineEditContext";
 import type { BlockPreviewInfo } from "./sidebar/BlocksTab";
 import { readStudioUiPreferences } from "../utils/studioUiPreferences";
@@ -117,6 +117,9 @@ export function StudioPreviewArea({
     domEditHoverSelection,
     domEditSelection,
     domEditGroupSelections,
+    selectedGsapAnimations,
+  } = useDomEditSelectionContext();
+  const {
     handleTimelineElementSelect,
     handlePreviewCanvasMouseDown,
     handlePreviewCanvasPointerMove,
@@ -128,15 +131,16 @@ export function StudioPreviewArea({
     handleDomGroupPathOffsetCommit,
     handleDomBoxSizeCommit,
     handleDomRotationCommit,
-    selectedGsapAnimations,
     handleGsapRemoveKeyframe,
     handleGsapUpdateMeta,
     handleGsapAddKeyframe,
     handleGsapConvertToKeyframes,
     handleGsapDeleteAllForElement,
     buildDomSelectionForTimelineElement,
-  } = useDomEditContext();
+    applyMarqueeSelection,
+  } = useDomEditActionsContext();
 
+  // fallow-ignore-next-line complexity
   const [snapPrefs, setSnapPrefs] = useState(() => {
     const p = readStudioUiPreferences();
     return {
@@ -160,6 +164,7 @@ export function StudioPreviewArea({
         const rawId = elId.includes("#") ? (elId.split("#").pop() ?? elId) : elId;
         handleGsapDeleteAllForElement(`#${rawId}`);
       },
+      // fallow-ignore-next-line complexity
       onDeleteKeyframe: (_elId: string, pct: number) => {
         const cacheKey = domEditSelection?.id ?? "";
         const cached = usePlayerStore.getState().keyframeCache.get(cacheKey);
@@ -215,6 +220,7 @@ export function StudioPreviewArea({
           }
         }
       },
+      // fallow-ignore-next-line complexity
       onToggleKeyframeAtPlayhead: (el: TimelineElement) => {
         const currentTime = usePlayerStore.getState().currentTime;
         const pct =
@@ -339,6 +345,7 @@ export function StudioPreviewArea({
                     gridSpacing={snapPrefs.gridSpacing}
                     recordingState={recordingState}
                     onToggleRecording={onToggleRecording}
+                    onMarqueeSelect={applyMarqueeSelection}
                   />
                   <SnapToolbar onSnapChange={setSnapPrefs} />
                   {STUDIO_KEYFRAMES_ENABLED && (

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

@@ -1,6 +1,7 @@
 import { memo, useMemo, useRef, useState, type RefObject } from "react";
 import { useMountEffect } from "../../hooks/useMountEffect";
 import { type DomEditSelection } from "./domEditing";
+import { useMarqueeGestures } from "./marqueeCommit";
 import { resolveDomEditGroupOverlayRect } from "./domEditOverlayGeometry";
 import {
   type BlockedMoveState,
@@ -67,8 +68,10 @@ interface DomEditOverlayProps {
   gridSpacing?: number;
   recordingState?: GestureRecordingState;
   onToggleRecording?: () => void;
+  onMarqueeSelect?: (selections: DomEditSelection[], additive: boolean) => void;
 }
 
+// fallow-ignore-next-line complexity
 export const DomEditOverlay = memo(function DomEditOverlay({
   iframeRef,
   activeCompositionPath,
@@ -88,9 +91,12 @@ export const DomEditOverlay = memo(function DomEditOverlay({
   onGroupPathOffsetCommit,
   onBoxSizeCommit,
   onRotationCommit,
+  onMarqueeSelect,
 }: DomEditOverlayProps) {
   const overlayRef = useRef<HTMLDivElement | null>(null);
   const boxRef = useRef<HTMLDivElement | null>(null);
+  const onMarqueeSelectRef = useRef(onMarqueeSelect);
+  onMarqueeSelectRef.current = onMarqueeSelect;
 
   const selectionShapeStyles = (() => {
     const fallback = {
@@ -238,6 +244,15 @@ export const DomEditOverlay = memo(function DomEditOverlay({
     snapGuidesRef,
   });
 
+  const marquee = useMarqueeGestures({
+    iframeRef,
+    overlayRef,
+    activeCompositionPathRef,
+    onMarqueeSelectRef,
+    selectionRef,
+    gestures,
+  });
+
   const selectionKey = useMemo(() => {
     if (!selection) return "none";
     return `${selection.sourceFile}:${selection.id ?? selection.selector ?? selection.label}:${selection.selectorIndex ?? 0}`;
@@ -306,6 +321,36 @@ export const DomEditOverlay = memo(function DomEditOverlay({
 
     const target = event.target as HTMLElement | null;
     if (target?.closest('[data-dom-edit-selection-box="true"]')) return;
+
+    // Start marquee if clicking on empty canvas (no element under pointer)
+    if (!hoverSelectionRef.current && onMarqueeSelectRef.current && compRect.width > 0) {
+      const overlayEl = overlayRef.current;
+      if (overlayEl) {
+        const oRect = overlayEl.getBoundingClientRect();
+        const cx = event.clientX - oRect.left;
+        const cy = event.clientY - oRect.top;
+        const inComp =
+          cx >= compRect.left &&
+          cx <= compRect.left + compRect.width &&
+          cy >= compRect.top &&
+          cy <= compRect.top + compRect.height;
+        if (inComp) {
+          event.preventDefault();
+          event.stopPropagation();
+          suppressNextOverlayMouseDownRef.current = true;
+          (event.currentTarget as HTMLElement).setPointerCapture(event.pointerId);
+          marquee.marqueeRef.current = {
+            startX: cx,
+            startY: cy,
+            currentX: cx,
+            currentY: cy,
+            pointerId: event.pointerId,
+            pastThreshold: false,
+          };
+          return;
+        }
+      }
+    }
   };
 
   const handleBoxClick = (event: React.MouseEvent<HTMLDivElement>) => {
@@ -332,15 +377,16 @@ export const DomEditOverlay = memo(function DomEditOverlay({
       className="absolute inset-0 z-10 pointer-events-auto outline-none"
       tabIndex={-1}
       aria-label="Composition canvas"
+      style={marquee.marqueeRef.current?.pastThreshold ? { cursor: "crosshair" } : undefined}
       onPointerDownCapture={(event) =>
         focusDomEditOverlayElement(event.currentTarget as FocusableDomEditOverlay)
       }
       onPointerDown={handleOverlayPointerDown}
       onMouseDown={handleOverlayMouseDown}
-      onPointerMove={gestures.onPointerMove}
+      onPointerMove={marquee.onPointerMove}
       onPointerLeave={() => onCanvasPointerLeaveRef.current()}
-      onPointerUp={gestures.onPointerUp}
-      onPointerCancel={() => gestures.clearPointerState(selectionRef)}
+      onPointerUp={marquee.onPointerUp}
+      onPointerCancel={marquee.onPointerCancel}
     >
       {hoverSelection && hoverRect && compRect.width > 0 && (
         <div
@@ -496,6 +542,18 @@ export const DomEditOverlay = memo(function DomEditOverlay({
             }}
           />
         ))}
+      {marquee.marqueeRect && (
+        <div
+          aria-hidden="true"
+          className="pointer-events-none absolute border border-dashed border-studio-accent bg-studio-accent/10"
+          style={{
+            left: marquee.marqueeRect.left,
+            top: marquee.marqueeRect.top,
+            width: marquee.marqueeRect.width,
+            height: marquee.marqueeRect.height,
+          }}
+        />
+      )}
       <GridOverlay
         visible={gridVisible}
         spacing={gridSpacing}

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

@@ -3,14 +3,14 @@ import { EASE_CURVES, EASE_LABELS, parseCustomEaseFromString } from "./gsapAnima
 import { roundToCenti } from "../../utils/rounding";
 
 const PRESET_GRID_EASES = [
+  "ae-ease",
+  "ae-ease-in",
+  "ae-ease-out",
   "none",
   "power2.out",
   "power2.in",
-  "power2.inOut",
-  "power3.out",
   "back.out",
   "expo.out",
-  "elastic.out",
 ] as const;
 
 function MiniCurveSvg({

packages/studio/src/components/editor/gsapAnimationConstants.ts

@@ -119,6 +119,9 @@ export const EASE_LABELS: Record<string, string> = {
   "spring-stiff": "Stiff spring",
   "spring-wobbly": "Wobbly spring",
   "spring-heavy": "Heavy spring",
+  "ae-ease": "Easy Ease (AE)",
+  "ae-ease-in": "Easy Ease In (AE)",
+  "ae-ease-out": "Easy Ease Out (AE)",
 };
 
 export const EASE_CURVES: Record<string, [number, number, number, number]> = {
@@ -141,6 +144,9 @@ export const EASE_CURVES: Record<string, [number, number, number, number]> = {
   "expo.out": [0.16, 1, 0.3, 1],
   "expo.in": [0.7, 0, 0.84, 0],
   "expo.inOut": [0.87, 0, 0.13, 1],
+  "ae-ease": [0.333, 0, 0.667, 1],
+  "ae-ease-in": [0.333, 0, 0.667, 0.667],
+  "ae-ease-out": [0.333, 0.333, 0.667, 1],
 };
 
 export function parseCustomEaseFromString(ease: string): {

packages/studio/src/components/editor/marqueeCommit.ts

@@ -0,0 +1,168 @@
+import { useCallback, useRef, useState } from "react";
+import type { DomEditSelection } from "./domEditing";
+import { collectDomEditLayerItems, resolveDomEditSelection } from "./domEditingLayers";
+import { isElementComputedVisible } from "./domEditingElement";
+import { coversComposition } from "../../utils/studioPreviewHelpers";
+import { elementObbCorners, marqueeIntersectsObb } from "../../utils/marqueeGeometry";
+
+interface MarqueeState {
+  startX: number;
+  startY: number;
+  currentX: number;
+  currentY: number;
+  pointerId: number;
+  pastThreshold: boolean;
+}
+
+const MARQUEE_THRESHOLD_PX = 4;
+
+// fallow-ignore-next-line complexity
+async function runMarqueeIntersection(
+  rect: { left: number; top: number; width: number; height: number },
+  iframe: HTMLIFrameElement,
+  overlayEl: HTMLDivElement,
+  activeCompositionPath: string,
+): Promise<DomEditSelection[]> {
+  const doc = iframe.contentDocument;
+  if (!doc) return [];
+
+  const root = doc.querySelector<HTMLElement>("[data-composition-id]") ?? doc.body;
+  const isMasterView = !activeCompositionPath || activeCompositionPath === "index.html";
+  const items = collectDomEditLayerItems(root, { activeCompositionPath, isMasterView });
+
+  const rootEl = doc.querySelector<HTMLElement>("[data-composition-id]") ?? doc.documentElement;
+  const declW = Number.parseFloat(rootEl?.getAttribute("data-width") ?? "");
+  const declH = Number.parseFloat(rootEl?.getAttribute("data-height") ?? "");
+  const viewport = {
+    width: declW > 0 ? declW : rootEl.getBoundingClientRect().width || 1,
+    height: declH > 0 ? declH : rootEl.getBoundingClientRect().height || 1,
+  };
+
+  const hits: DomEditSelection[] = [];
+  for (const item of items) {
+    const el = item.element;
+    if (!isElementComputedVisible(el)) continue;
+    if (coversComposition(el.getBoundingClientRect(), viewport)) continue;
+    const corners = elementObbCorners(el, overlayEl, iframe);
+    if (!corners) continue;
+    if (!marqueeIntersectsObb(rect, corners)) continue;
+    const sel = await resolveDomEditSelection(el, {
+      activeCompositionPath,
+      isMasterView,
+      skipSourceProbe: true,
+    });
+    if (sel) hits.push(sel);
+  }
+
+  return hits;
+}
+
+interface MarqueeGesturesDeps {
+  iframeRef: React.RefObject<HTMLIFrameElement | null>;
+  overlayRef: React.RefObject<HTMLDivElement | null>;
+  activeCompositionPathRef: React.RefObject<string | null>;
+  onMarqueeSelectRef: React.RefObject<
+    ((selections: DomEditSelection[], additive: boolean) => void) | undefined
+  >;
+  selectionRef: React.RefObject<DomEditSelection | null>;
+  gestures: {
+    onPointerMove: (event: React.PointerEvent<HTMLDivElement>) => void;
+    onPointerUp: (event: React.PointerEvent<HTMLDivElement>) => void;
+    clearPointerState: (ref: React.RefObject<DomEditSelection | null>) => void;
+  };
+}
+
+// fallow-ignore-next-line complexity
+export function useMarqueeGestures(deps: MarqueeGesturesDeps) {
+  const marqueeRef = useRef<MarqueeState | null>(null);
+  const [marqueeRect, setMarqueeRect] = useState<{
+    left: number;
+    top: number;
+    width: number;
+    height: number;
+  } | null>(null);
+
+  const commitMarquee = useCallback(
+    async (
+      rect: { left: number; top: number; width: number; height: number },
+      additive: boolean,
+    ) => {
+      const iframe = deps.iframeRef.current;
+      const overlay = deps.overlayRef.current;
+      if (!iframe || !overlay || !deps.onMarqueeSelectRef.current) return;
+      const acp = deps.activeCompositionPathRef.current ?? "index.html";
+      const hits = await runMarqueeIntersection(rect, iframe, overlay, acp);
+      deps.onMarqueeSelectRef.current(hits, additive);
+    },
+    [deps.iframeRef, deps.overlayRef, deps.onMarqueeSelectRef, deps.activeCompositionPathRef],
+  );
+
+  const onPointerMove = useCallback(
+    (event: React.PointerEvent<HTMLDivElement>) => {
+      const m = marqueeRef.current;
+      if (m) {
+        const oRect = deps.overlayRef.current?.getBoundingClientRect();
+        if (!oRect) return;
+        m.currentX = event.clientX - oRect.left;
+        m.currentY = event.clientY - oRect.top;
+        if (!m.pastThreshold) {
+          const dx = m.currentX - m.startX;
+          const dy = m.currentY - m.startY;
+          if (Math.hypot(dx, dy) < MARQUEE_THRESHOLD_PX) return;
+          m.pastThreshold = true;
+        }
+        setMarqueeRect({
+          left: Math.min(m.startX, m.currentX),
+          top: Math.min(m.startY, m.currentY),
+          width: Math.abs(m.currentX - m.startX),
+          height: Math.abs(m.currentY - m.startY),
+        });
+        return;
+      }
+      deps.gestures.onPointerMove(event);
+    },
+    [deps.gestures, deps.overlayRef],
+  );
+
+  const onPointerUp = useCallback(
+    (event: React.PointerEvent<HTMLDivElement>) => {
+      const m = marqueeRef.current;
+      if (m) {
+        marqueeRef.current = null;
+        try {
+          (event.currentTarget as HTMLElement).releasePointerCapture(m.pointerId);
+        } catch {
+          /* already released */
+        }
+        if (m.pastThreshold) {
+          commitMarquee(
+            {
+              left: Math.min(m.startX, m.currentX),
+              top: Math.min(m.startY, m.currentY),
+              width: Math.abs(m.currentX - m.startX),
+              height: Math.abs(m.currentY - m.startY),
+            },
+            event.shiftKey,
+          );
+        } else {
+          deps.onMarqueeSelectRef.current?.([], false);
+        }
+        setMarqueeRect(null);
+        return;
+      }
+      deps.gestures.onPointerUp(event);
+    },
+    [deps.gestures, commitMarquee, deps.onMarqueeSelectRef],
+  );
+
+  const onPointerCancel = useCallback(() => {
+    if (marqueeRef.current) {
+      marqueeRef.current = null;
+      setMarqueeRect(null);
+      return;
+    }
+    deps.gestures.clearPointerState(deps.selectionRef);
+  }, [deps.gestures, deps.selectionRef]);
+
+  return { marqueeRef, marqueeRect, onPointerMove, onPointerUp, onPointerCancel };
+}