diff --git a/lefthook.yml b/lefthook.yml
index 388adf68df..bf5a08090e 100644
--- a/lefthook.yml
+++ b/lefthook.yml
@@ -6,9 +6,10 @@ pre-commit:
       run: bunx oxlint --no-error-on-unmatched-pattern {staged_files}
     format:
       glob: "*.{js,jsx,ts,tsx,json,md,yaml,yml}"
-      # --no-error-on-unmatched-pattern: don't fail when staged files all
-      # fall under .prettierignore (e.g. docs-only changes to docs/docs.json).
-      run: bunx oxfmt --check --no-error-on-unmatched-pattern {staged_files}
+      # Auto-format and re-stage so the committed snapshot is always formatted.
+      # Replaces --check which only reports — that left unformatted files in
+      # commits when the hook ran after the amend snapshot was taken.
+      run: bunx oxfmt --no-error-on-unmatched-pattern {staged_files} && git add {staged_files}
     typecheck:
       glob: "*.{ts,tsx}"
       run: cd packages/core && bunx tsc --noEmit && cd ../studio && bunx tsc --noEmit
diff --git a/packages/core/src/parsers/gsapParser.test.ts b/packages/core/src/parsers/gsapParser.test.ts
index 3d785c6426..5ddc5889a6 100644
--- a/packages/core/src/parsers/gsapParser.test.ts
+++ b/packages/core/src/parsers/gsapParser.test.ts
@@ -1792,6 +1792,19 @@ describe("keyframe mutations", () => {
     expect(kf100.properties.y).toBe(50);
   });
 
+  it("updateKeyframeInScript — ease-only update preserves existing properties", () => {
+    // Per-keyframe ease editing passes empty properties + an ease. The existing
+    // property bag must survive (don't wipe x/opacity when only the ease changes).
+    const id = getAnimId(KF_SCRIPT);
+    const updated = updateKeyframeInScript(KF_SCRIPT, id, 100, {}, "power2.inOut");
+    const kf100 = parseGsapScript(updated).animations[0].keyframes!.keyframes.find(
+      (k) => k.percentage === 100,
+    )!;
+    expect(kf100.ease).toBe("power2.inOut");
+    expect(kf100.properties.x).toBe(200);
+    expect(kf100.properties.opacity).toBe(1);
+  });
+
   // Array-form keyframes (`keyframes: [{x,y}, …]`) carry no percentages — GSAP
   // distributes them evenly. The motion-path overlay drags/adds by percentage,
   // which used to no-op on array-authored tweens (#puck-b / #shuttle).
diff --git a/packages/core/src/parsers/gsapParser.ts b/packages/core/src/parsers/gsapParser.ts
index a2f1047128..07f93798bb 100644
--- a/packages/core/src/parsers/gsapParser.ts
+++ b/packages/core/src/parsers/gsapParser.ts
@@ -1243,13 +1243,17 @@ function applyEaseUpdate(varsArg: AstNode, ease: string): void {
   }
 }
 
-function applyUpdatesToCall(call: TweenCallInfo, updates: Partial<GsapAnimation>): void {
+function applyUpdatesToCall(
+  call: TweenCallInfo,
+  updates: Partial<GsapAnimation> & { easeEach?: string },
+): void {
   if (updates.properties) reconcileEditableProperties(call.varsArg, updates.properties);
   if (updates.fromProperties && call.method === "fromTo" && call.fromArg) {
     reconcileEditableProperties(call.fromArg, updates.fromProperties);
   }
   if (updates.duration !== undefined) setVarsKey(call.varsArg, "duration", updates.duration);
-  if (updates.ease !== undefined) applyEaseUpdate(call.varsArg, updates.ease);
+  if (updates.easeEach !== undefined) applyEaseUpdate(call.varsArg, updates.easeEach);
+  else if (updates.ease !== undefined) applyEaseUpdate(call.varsArg, updates.ease);
   if (updates.position !== undefined) {
     const posIdx = call.method === "fromTo" ? 3 : 2;
     call.node.arguments[posIdx] = parseExpr(valueToCode(updates.position));
@@ -1282,10 +1286,13 @@ function insertAfterAnchor(parsed: ParsedGsapAst, newStatement: AstNode): void {
 function buildTweenStatementCode(timelineVar: string, anim: Omit<GsapAnimation, "id">): string {
   const selector = JSON.stringify(anim.targetSelector);
   const props: Record<string, number | string> = { ...anim.properties };
-  // `set` is instantaneous — GSAP ignores duration on it, so don't emit one.
   if (anim.method !== "set" && anim.duration !== undefined) props.duration = anim.duration;
   if (anim.ease) props.ease = anim.ease;
   const entries = Object.entries(props).map(([k, v]) => `${safeKey(k)}: ${valueToCode(v)}`);
+  // immediateRender forces GSAP to apply the set when added to the timeline,
+  // not on the first seek — without it, tl.set at position 0 on a paused
+  // timeline is invisible until the playhead moves past 0.
+  if (anim.method === "set") entries.push("immediateRender: true");
   if (anim.extras) {
     for (const [k, v] of Object.entries(anim.extras)) {
       entries.push(`${safeKey(k)}: ${valueToCode(v as number | string)}`);
@@ -1308,7 +1315,7 @@ function buildTweenStatementCode(timelineVar: string, anim: Omit<GsapAnimation,
 export function updateAnimationInScript(
   script: string,
   animationId: string,
-  updates: Partial<GsapAnimation>,
+  updates: Partial<GsapAnimation> & { easeEach?: string },
 ): string {
   let parsed: ParsedGsapAst;
   try {
@@ -1437,6 +1444,7 @@ export function addAnimationWithKeyframesToScript(
     auto?: boolean;
   }>,
   ease?: string,
+  easeEach?: string,
 ): { script: string; id: string } {
   let parsed: ParsedGsapAst;
   try {
@@ -1450,7 +1458,7 @@ export function addAnimationWithKeyframesToScript(
   }
 
   const selector = JSON.stringify(targetSelector);
-  const kfCode = buildKeyframeObjectCode(keyframes);
+  const kfCode = buildKeyframeObjectCode(keyframes, easeEach ? { easeEach } : undefined);
   const varEntries = [`keyframes: ${kfCode}`, `duration: ${valueToCode(duration)}`];
   if (ease) varEntries.push(`ease: ${JSON.stringify(ease)}`);
   const posCode = valueToCode(position);
@@ -2216,6 +2224,27 @@ export function updateKeyframeInScript(
   const match = findKeyframePropByPct(kfNode, percentage);
   if (!match) return script;
 
+  if (Object.keys(properties).length === 0 && ease) {
+    // Ease-only update: preserve existing properties, just add/replace ease
+    const existing = match.prop.value;
+    if (existing?.type === "ObjectExpression") {
+      const props = (existing.properties ?? []) as AstNode[];
+      const easeIdx = props.findIndex(
+        (p: AstNode) => isObjectProperty(p) && propKeyName(p) === "ease",
+      );
+      const easeNode = parseExpr(`({ ease: ${JSON.stringify(ease)} })`).properties[0];
+      if (easeIdx >= 0) {
+        props[easeIdx] = easeNode;
+      } else {
+        props.push(easeNode);
+      }
+      return recast.print(loc.parsed.ast).code;
+    }
+    // Non-object keyframe value (primitive shorthand, e.g. "50%": "0.5"): there
+    // is no property bag to merge the ease into. Rebuilding from empty
+    // `properties` would wipe the primitive — leave the keyframe untouched.
+    return script;
+  }
   match.prop.value = buildKeyframeValueNode(properties, ease);
   return recast.print(loc.parsed.ast).code;
 }
diff --git a/packages/core/src/parsers/gsapWriterAcorn.ts b/packages/core/src/parsers/gsapWriterAcorn.ts
index 568bc255ab..c4ef2998aa 100644
--- a/packages/core/src/parsers/gsapWriterAcorn.ts
+++ b/packages/core/src/parsers/gsapWriterAcorn.ts
@@ -299,7 +299,7 @@ function findInsertionPoint(parsed: ParsedGsapAcornForWrite): number | null {
 export function updateAnimationInScript(
   script: string,
   animationId: string,
-  updates: Partial<GsapAnimation>,
+  updates: Partial<GsapAnimation> & { easeEach?: string },
 ): string {
   if (!Object.keys(updates).length) return script;
   const parsed = parseGsapScriptAcornForWrite(script);
@@ -324,13 +324,11 @@ export function updateAnimationInScript(
     if (updates.duration !== undefined) {
       upsertProp(ms, call.varsArg, "duration", updates.duration);
     }
-    if (updates.ease !== undefined) {
-      // For a keyframe tween, easing lives at keyframes.easeEach (per-keyframe),
-      // not a top-level ease. Writing top-level ease would leave the per-keyframe
-      // easing unchanged — the user's edit would silently do nothing.
+    const easeValue = updates.easeEach ?? updates.ease;
+    if (easeValue !== undefined) {
       const kfNode = keyframesObjectNode(call.varsArg);
-      if (kfNode) upsertProp(ms, kfNode, "easeEach", updates.ease);
-      else upsertProp(ms, call.varsArg, "ease", updates.ease);
+      if (kfNode) upsertProp(ms, kfNode, "easeEach", easeValue);
+      else upsertProp(ms, call.varsArg, "ease", easeValue);
     }
     if (updates.extras) {
       for (const [key, value] of Object.entries(updates.extras)) {
@@ -1338,6 +1336,7 @@ export function addAnimationWithKeyframesToScript(
     auto?: boolean;
   }>,
   ease?: string,
+  easeEach?: string,
 ): { script: string; id: string } {
   const parsed = parseGsapScriptAcornForWrite(script);
   if (!parsed) return { script, id: "" };
@@ -1345,7 +1344,7 @@ export function addAnimationWithKeyframesToScript(
   if (insertionPoint === null) return { script, id: "" };
 
   const sorted = [...keyframes].sort((a, b) => a.percentage - b.percentage);
-  const kfObjCode = buildKeyframeObjectCode(sorted);
+  const kfObjCode = buildKeyframeObjectCode(sorted, easeEach);
   const varParts = [`keyframes: ${kfObjCode}`, `duration: ${valueToCode(duration)}`];
   if (ease) varParts.push(`ease: ${JSON.stringify(ease)}`);
   const stmtCode = `${parsed.timelineVar}.to(${JSON.stringify(targetSelector)}, { ${varParts.join(", ")} }, ${valueToCode(position)});`;
diff --git a/packages/core/src/runtime/init.ts b/packages/core/src/runtime/init.ts
index d7db8c7782..5ed3dea2d8 100644
--- a/packages/core/src/runtime/init.ts
+++ b/packages/core/src/runtime/init.ts
@@ -72,6 +72,46 @@ export function initSandboxRuntimeModular(): void {
   }
 
   window.__timelines = window.__timelines || {};
+
+  // Resolve the root composition element with the same priority the rest of
+  // the runtime uses (explicit `data-root` marker first, then the topmost
+  // non-nested composition, then first in DOM order). Defined here so the
+  // array-normalization + data-start defaults below pick the same root the
+  // closure-based `resolveRootCompositionElement` does on multi-comp pages.
+  const findRootCompositionEl = (): HTMLElement | null => {
+    const explicitRoot = document.querySelector('[data-composition-id][data-root="true"]');
+    if (explicitRoot instanceof HTMLElement) return explicitRoot;
+    const nodes = Array.from(document.querySelectorAll("[data-composition-id]")) as HTMLElement[];
+    return (
+      nodes.find((node) => !node.parentElement?.closest("[data-composition-id]")) ??
+      nodes[0] ??
+      null
+    );
+  };
+
+  // Agents often write `window.__timelines = [tl]` (array) instead of the
+  // keyed-by-composition-id object the runtime expects. Normalize at init so
+  // the rest of the pipeline can assume a Record<string, timeline>.
+  if (Array.isArray(window.__timelines)) {
+    const arr = window.__timelines as unknown[];
+    const rootId = findRootCompositionEl()?.getAttribute("data-composition-id") ?? "root";
+    const normalized: Record<string, unknown> = {};
+    if (arr.length === 1) {
+      normalized[rootId] = arr[0];
+    } else {
+      for (let i = 0; i < arr.length; i++) normalized[`tl-${i}`] = arr[i];
+    }
+    (window as Record<string, unknown>).__timelines = normalized;
+  }
+
+  // Agents sometimes omit data-start on the root composition element. The
+  // runtime skips timed-visibility for elements without it, making clips
+  // invisible and timelines non-seekable. Default to 0 for the root.
+  const rootComp = findRootCompositionEl();
+  if (rootComp && !rootComp.hasAttribute("data-start")) {
+    rootComp.setAttribute("data-start", "0");
+  }
+
   const registerRuntimeCleanup = (callback: () => void) => {
     runtimeCleanupCallbacks.push(callback);
   };
@@ -218,23 +258,7 @@ export function initSandboxRuntimeModular(): void {
     return `${parsed}px`;
   };
 
-  const resolveRootCompositionElement = (): HTMLElement | null => {
-    // 1. Explicit root marker takes priority
-    const explicitRoot = document.querySelector('[data-composition-id][data-root="true"]');
-    if (explicitRoot instanceof HTMLElement) {
-      return explicitRoot;
-    }
-    // 3. Topmost composition element (not nested inside another)
-    const compositionNodes = Array.from(
-      document.querySelectorAll("[data-composition-id]"),
-    ) as HTMLElement[];
-    if (compositionNodes.length === 0) return null;
-    return (
-      compositionNodes.find((node) => !node.parentElement?.closest("[data-composition-id]")) ??
-      compositionNodes[0] ??
-      null
-    );
-  };
+  const resolveRootCompositionElement = (): HTMLElement | null => findRootCompositionEl();
 
   const applyCompositionSizing = () => {
     const rootEl = resolveRootCompositionElement();
@@ -1003,16 +1027,38 @@ export function initSandboxRuntimeModular(): void {
       state.capturedTimeline.timeScale(state.playbackRate);
     }
     const boundDuration = getSafeTimelineDurationSeconds(state.capturedTimeline, 0);
+    if (boundDuration <= 0) {
+      // No resolvable duration (e.g. a set()-only timeline, or one whose
+      // duration isn't known yet). Kick GSAP off the creation position so the
+      // set() renders. For a finite-but-zero timeline progress(1) === progress(0);
+      // for an infinite-repeat timeline this lands on the first iteration's end
+      // frame, which is the best we can do without a known cycle length.
+      if (typeof state.capturedTimeline.progress === "function") {
+        state.capturedTimeline.progress(1, true);
+        state.capturedTimeline.progress(0, false);
+        state.capturedTimeline.pause();
+      }
+    }
     if (boundDuration > 0) {
       try {
         clock.setDuration(boundDuration);
       } catch {
         // clock not yet initialized — duration will be set during TransportClock setup
       }
-      state.capturedTimeline.pause();
-      const seekTime = Math.max(0, state.currentTime || 0);
+
       if (typeof state.capturedTimeline.totalTime === "function") {
+        // GSAP won't render tl.set() at position 0 when the paused timeline
+        // starts there — play/pause/seek/totalTime are all no-ops at the
+        // creation position. Force the set to render by cycling progress past
+        // 0 (when the timeline implements it), then seek to the prior playhead
+        // (state.currentTime) so a rebind after a user scrub or soft-reload
+        // restore doesn't snap back to 0.
+        if (typeof state.capturedTimeline.progress === "function") {
+          state.capturedTimeline.progress(0.0001, true);
+        }
+        const seekTime = Math.max(0, state.currentTime || 0);
         state.capturedTimeline.totalTime(seekTime, false);
+        state.capturedTimeline.pause();
       }
 
       // GSAP bakes the CSS `translate` into style.transform on seek.
diff --git a/packages/studio/src/captions/hooks/useCaptionSync.ts b/packages/studio/src/captions/hooks/useCaptionSync.ts
index ad5b052215..5fdbf80138 100644
--- a/packages/studio/src/captions/hooks/useCaptionSync.ts
+++ b/packages/studio/src/captions/hooks/useCaptionSync.ts
@@ -1,6 +1,7 @@
 import { useCallback, useRef } from "react";
 import { useCaptionStore } from "../store";
 import { useMountEffect } from "../../hooks/useMountEffect";
+import { trackEvent } from "../../telemetry/client";
 import type { CaptionStyle } from "../types";
 
 interface CaptionOverrideEntry {
@@ -78,7 +79,11 @@ export function useCaptionSync(projectId: string | null) {
       method: "PUT",
       headers: { "Content-Type": "text/plain" },
       body: JSON.stringify(overrides, null, 2),
-    }).catch((err) => console.warn("[captions] auto-save failed:", err));
+    }).catch((error: unknown) => {
+      // Caption auto-save is a data-loss path; surface failures via telemetry
+      // so a silently-dropped edit isn't invisible (no console in studio).
+      trackEvent("studio_caption_autosave_failed", { error: String(error) });
+    });
   }, []);
 
   // Auto-save on model changes with 800ms debounce
diff --git a/packages/studio/src/components/StudioPreviewArea.tsx b/packages/studio/src/components/StudioPreviewArea.tsx
index b42a06837d..45419a4b14 100644
--- a/packages/studio/src/components/StudioPreviewArea.tsx
+++ b/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 && (
diff --git a/packages/studio/src/components/StudioRightPanel.tsx b/packages/studio/src/components/StudioRightPanel.tsx
index 36bcc33ffe..a7842a6f16 100644
--- a/packages/studio/src/components/StudioRightPanel.tsx
+++ b/packages/studio/src/components/StudioRightPanel.tsx
@@ -121,6 +121,7 @@ export function StudioRightPanel({
     handleSetArcPath,
     handleUpdateArcSegment,
     handleUnroll,
+    handleUpdateKeyframeEase,
     handleGsapAddKeyframe,
     handleGsapRemoveKeyframe,
     handleGsapConvertToKeyframes,
@@ -274,6 +275,7 @@ export function StudioRightPanel({
       onSetArcPath={handleSetArcPath}
       onUpdateArcSegment={handleUpdateArcSegment}
       onUnroll={handleUnroll}
+      onUpdateKeyframeEase={handleUpdateKeyframeEase}
       recordingState={recordingState}
       recordingDuration={recordingDuration}
       onToggleRecording={onToggleRecording}
diff --git a/packages/studio/src/components/editor/BlockParamsPanel.tsx b/packages/studio/src/components/editor/BlockParamsPanel.tsx
index a3da2772bc..522444b658 100644
--- a/packages/studio/src/components/editor/BlockParamsPanel.tsx
+++ b/packages/studio/src/components/editor/BlockParamsPanel.tsx
@@ -12,7 +12,7 @@ interface BlockParamsPanelProps {
 export const BlockParamsPanel = memo(function BlockParamsPanel({
   blockTitle,
   params,
-  compositionPath,
+  compositionPath: _compositionPath,
   onClose,
 }: BlockParamsPanelProps) {
   const [values, setValues] = useState<Record<string, string>>(() => {
@@ -23,13 +23,9 @@ export const BlockParamsPanel = memo(function BlockParamsPanel({
     return initial;
   });
 
-  const handleChange = useCallback(
-    (key: string, value: string) => {
-      setValues((prev) => ({ ...prev, [key]: value }));
-      console.log(`[BlockParams] ${compositionPath} ${key}: ${value}`);
-    },
-    [compositionPath],
-  );
+  const handleChange = useCallback((key: string, value: string) => {
+    setValues((prev) => ({ ...prev, [key]: value }));
+  }, []);
 
   return (
     <div className="flex flex-col h-full">
diff --git a/packages/studio/src/components/editor/DomEditOverlay.tsx b/packages/studio/src/components/editor/DomEditOverlay.tsx
index 5e0f736dd4..188d474ddb 100644
--- a/packages/studio/src/components/editor/DomEditOverlay.tsx
+++ b/packages/studio/src/components/editor/DomEditOverlay.tsx
@@ -1,7 +1,10 @@
-import { memo, useMemo, useRef, useState, type RefObject } from "react";
+import { memo, useEffect, useMemo, useRef, useState, type RefObject } from "react";
 import { useMountEffect } from "../../hooks/useMountEffect";
 import { type DomEditSelection } from "./domEditing";
-import { resolveDomEditGroupOverlayRect } from "./domEditOverlayGeometry";
+import { useMarqueeGestures } from "./marqueeCommit";
+import { resolveDomEditGroupOverlayRect, toOverlayRect } from "./domEditOverlayGeometry";
+import { collectDomEditLayerItems } from "./domEditingLayers";
+import { isElementComputedVisible } from "./domEditingElement";
 import {
   type BlockedMoveState,
   type DomEditGroupPathOffsetCommit,
@@ -11,6 +14,7 @@ import {
   focusDomEditOverlayElement,
 } from "./domEditOverlayGestures";
 import { useDomEditOverlayRects } from "./useDomEditOverlayRects";
+import { OffCanvasIndicators, type OffCanvasRect } from "./OffCanvasIndicators";
 import { createDomEditOverlayGestureHandlers } from "./useDomEditOverlayGestures";
 import { SnapGuideOverlay, type SnapGuidesState } from "./SnapGuideOverlay";
 import { GridOverlay } from "./GridOverlay";
@@ -67,8 +71,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,13 +94,16 @@ 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 = {
-      borderRadius: 4 as string | number,
+      borderRadius: 8 as string | number,
       clipPath: undefined as string | undefined,
     };
     if (!selection?.element) return fallback;
@@ -213,6 +222,50 @@ export const DomEditOverlay = memo(function DomEditOverlay({
     return () => cancelAnimationFrame(frame);
   });
 
+  // Off-canvas element indicators — dashed outlines for elements positioned
+  // outside the composition bounds so users can find them.
+  const offCanvasElementsRef = useRef<Map<string, HTMLElement>>(new Map());
+  const [offCanvasRects, setOffCanvasRects] = useState<OffCanvasRect[]>([]);
+  useEffect(() => {
+    const iframe = iframeRef.current;
+    const overlay = overlayRef.current;
+    if (!iframe || !overlay || compRect.width <= 0) {
+      setOffCanvasRects([]);
+      return;
+    }
+    const doc = iframe.contentDocument;
+    if (!doc) return;
+    const root = doc.querySelector<HTMLElement>("[data-composition-id]") ?? doc.body;
+    const acp = activeCompositionPath ?? "index.html";
+    const items = collectDomEditLayerItems(root, {
+      activeCompositionPath: acp,
+      isMasterView: !acp || acp === "index.html",
+    });
+    const rects: typeof offCanvasRects = [];
+    const elMap = new Map<string, HTMLElement>();
+    for (const item of items) {
+      if (!isElementComputedVisible(item.element)) continue;
+      const r = toOverlayRect(overlay, iframe, item.element);
+      if (!r) continue;
+      // Any edge crossing the composition border → gray-zone indicator (the
+      // in-canvas portion is clipped away below, so only the sliver shows).
+      const extendsOutsideComp =
+        r.left < compRect.left ||
+        r.left + r.width > compRect.left + compRect.width ||
+        r.top < compRect.top ||
+        r.top + r.height > compRect.top + compRect.height;
+      if (extendsOutsideComp) {
+        rects.push({ key: item.key, left: r.left, top: r.top, width: r.width, height: r.height });
+        elMap.set(item.key, item.element);
+      }
+    }
+    offCanvasElementsRef.current = elMap;
+    setOffCanvasRects(rects);
+    // Positions depend on layout, not selection — the selected-element
+    // suppression is a render-time filter, so selection/groupSelections stay
+    // out of the deps to avoid re-walking geometry on each selection change.
+  }, [iframeRef, compRect, activeCompositionPath]);
+
   const gestures = createDomEditOverlayGestureHandlers({
     overlayRef,
     iframeRef,
@@ -238,6 +291,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}`;
@@ -265,22 +327,9 @@ export const DomEditOverlay = memo(function DomEditOverlay({
     }
     const target = event.target as HTMLElement | null;
     if (target?.closest('[data-dom-edit-selection-box="true"]')) return;
-    // Don't re-resolve selection when clicking outside the composition bounds —
-    // the iframe can't resolve elements there, so it would clear the selection.
-    if (selection && compRect.width > 0) {
-      const overlayEl = overlayRef.current;
-      if (overlayEl) {
-        const overlayRect = overlayEl.getBoundingClientRect();
-        const clickX = event.clientX - overlayRect.left;
-        const clickY = event.clientY - overlayRect.top;
-        const outsideComp =
-          clickX < compRect.left ||
-          clickX > compRect.left + compRect.width ||
-          clickY < compRect.top ||
-          clickY > compRect.top + compRect.height;
-        if (outsideComp) return;
-      }
-    }
+    // Allow clicks anywhere on the overlay — GSAP-translated elements can
+    // extend beyond the composition rect into the gray zone, and users need
+    // to select/deselect them by clicking there.
     onCanvasMouseDown(event, { preferClipAncestor: false });
     if (event.shiftKey) {
       suppressNextBoxMouseDownRef.current = true;
@@ -306,6 +355,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,44 +411,29 @@ export const DomEditOverlay = memo(function DomEditOverlay({
       className="absolute inset-0 z-10 pointer-events-auto outline-none"
       tabIndex={-1}
       aria-label="Composition canvas"
+      // Cursor follows marquee rect *state* (re-renders), not the mutable ref.
+      style={marquee.marqueeRect ? { 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
           aria-hidden="true"
           data-dom-edit-hover-box="true"
-          className="pointer-events-none absolute border border-studio-accent/80 bg-studio-accent/5 shadow-[0_0_0_1px_rgba(60,230,172,0.25)]"
-          style={(() => {
-            let br: string | number = 4;
-            let cp: string | undefined;
-            try {
-              const el = hoverSelection.element;
-              const tag = el.tagName.toLowerCase();
-              if (tag !== "svg" && tag !== "img" && tag !== "video" && tag !== "canvas") {
-                const cs = el.ownerDocument.defaultView?.getComputedStyle(el);
-                if (cs?.borderRadius && cs.borderRadius !== "0px") br = cs.borderRadius;
-                if (cs?.clipPath && cs.clipPath !== "none") cp = cs.clipPath;
-              }
-            } catch {
-              /* cross-origin guard */
-            }
-            return {
-              left: hoverRect.left,
-              top: hoverRect.top,
-              width: hoverRect.width,
-              height: hoverRect.height,
-              borderRadius: br,
-              clipPath: cp,
-            };
-          })()}
+          className="pointer-events-none absolute rounded-md border border-studio-accent/80 bg-studio-accent/5 shadow-[0_0_0_1px_rgba(60,230,172,0.25)]"
+          style={{
+            left: hoverRect.left,
+            top: hoverRect.top,
+            width: hoverRect.width,
+            height: hoverRect.height,
+          }}
         />
       )}
       {hasGroupSelection && groupOverlayItems.length > 1 && groupBounds && compRect.width > 0 && (
@@ -437,13 +501,12 @@ export const DomEditOverlay = memo(function DomEditOverlay({
             key={selectionKey}
             ref={boxRef}
             data-dom-edit-selection-box="true"
-            className={`pointer-events-auto absolute ${selectionShapeStyles.clipPath ? "shadow-[inset_0_0_0_2px_rgba(60,230,172,0.6)]" : "border border-studio-accent/80 shadow-[0_0_0_1px_rgba(60,230,172,0.25)]"} bg-studio-accent/5`}
+            className={`pointer-events-auto absolute rounded-md ${selectionShapeStyles.clipPath ? "shadow-[inset_0_0_0_2px_rgba(60,230,172,0.6)]" : "border border-studio-accent/80 shadow-[0_0_0_1px_rgba(60,230,172,0.25)]"} bg-studio-accent/5`}
             style={{
               left: overlayRect.left,
               top: overlayRect.top,
               width: overlayRect.width,
               height: overlayRect.height,
-              borderRadius: selectionShapeStyles.borderRadius,
               clipPath: selectionShapeStyles.clipPath,
               cursor:
                 allowCanvasMovement && selection.capabilities.canApplyManualOffset
@@ -496,6 +559,27 @@ export const DomEditOverlay = memo(function DomEditOverlay({
             }}
           />
         ))}
+      <OffCanvasIndicators
+        rects={offCanvasRects}
+        elements={offCanvasElementsRef}
+        compRect={compRect}
+        selection={selection}
+        groupSelections={groupSelections}
+        activeCompositionPathRef={activeCompositionPathRef}
+        onSelectionChangeRef={onSelectionChangeRef}
+      />
+      {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}
diff --git a/packages/studio/src/components/editor/OffCanvasIndicators.tsx b/packages/studio/src/components/editor/OffCanvasIndicators.tsx
new file mode 100644
index 0000000000..19c5c08773
--- /dev/null
+++ b/packages/studio/src/components/editor/OffCanvasIndicators.tsx
@@ -0,0 +1,111 @@
+import React from "react";
+import { type DomEditSelection } from "./domEditing";
+
+export interface OffCanvasRect {
+  key: string;
+  left: number;
+  top: number;
+  width: number;
+  height: number;
+}
+
+interface OffCanvasIndicatorsProps {
+  rects: OffCanvasRect[];
+  elements: React.MutableRefObject<Map<string, HTMLElement>>;
+  compRect: { left: number; top: number; width: number; height: number };
+  selection: DomEditSelection | null;
+  groupSelections: DomEditSelection[];
+  activeCompositionPathRef: React.MutableRefObject<string | null>;
+  onSelectionChangeRef: React.MutableRefObject<
+    (selection: DomEditSelection, options?: { revealPanel?: boolean; additive?: boolean }) => void
+  >;
+}
+
+/**
+ * Dashed teal indicators for elements whose bounds extend past the composition
+ * (the "gray zone"). The in-canvas portion is clipped away so only the
+ * protruding sliver is dashed; the inside portion gets a solid outline.
+ * Extracted from DomEditOverlay to keep that file under the 600-LOC cap.
+ */
+export function OffCanvasIndicators({
+  rects,
+  elements,
+  compRect,
+  selection,
+  groupSelections,
+  activeCompositionPathRef,
+  onSelectionChangeRef,
+}: OffCanvasIndicatorsProps): React.ReactElement {
+  return (
+    <>
+      {rects
+        .filter((r) => {
+          // Suppress the indicator for any currently-selected element (primary
+          // OR a marquee group member) — those already render a selection box.
+          const el = elements.current.get(r.key);
+          if (!el) return true;
+          if (selection?.element === el) return false;
+          return !groupSelections.some((g) => g.element === el);
+        })
+        .map((r) => {
+          const pos = { left: r.left, top: r.top, width: r.width, height: r.height };
+          const cL = Math.max(0, compRect.left - r.left);
+          const cT = Math.max(0, compRect.top - r.top);
+          const cR = Math.min(r.width, compRect.left + compRect.width - r.left);
+          const cB = Math.min(r.height, compRect.top + compRect.height - r.top);
+          const hasInside = cL < cR && cT < cB;
+          const clipOutside = hasInside
+            ? `polygon(evenodd, 0 0, ${r.width}px 0, ${r.width}px ${r.height}px, 0 ${r.height}px, 0 0, ${cL}px ${cT}px, ${cR}px ${cT}px, ${cR}px ${cB}px, ${cL}px ${cB}px, ${cL}px ${cT}px)`
+            : undefined;
+          const clipInside = `inset(${cT}px ${Math.max(0, r.width - cR)}px ${Math.max(0, r.height - cB)}px ${cL}px round 6px)`;
+          const selectOffCanvas = async () => {
+            const el = elements.current.get(r.key);
+            if (!el) return;
+            const { resolveDomEditSelection } = await import("./domEditingLayers");
+            const acp = activeCompositionPathRef.current ?? "index.html";
+            const sel = await resolveDomEditSelection(el, {
+              activeCompositionPath: acp,
+              isMasterView: !acp || acp === "index.html",
+              skipSourceProbe: true,
+            });
+            if (sel) onSelectionChangeRef.current(sel, { revealPanel: true });
+          };
+          const handleClick = (e: React.MouseEvent) => {
+            e.stopPropagation();
+            void selectOffCanvas();
+          };
+          return (
+            <div key={`offcanvas-${r.key}`} className="pointer-events-none absolute" style={pos}>
+              {/* Dashed layer — clipped to exclude canvas area.
+                  Note: clip-path is visual only — hit-testing still covers the
+                  full bounding rect, so clicking the in-canvas portion selects
+                  via this handler. That's acceptable: it resolves the same
+                  element the normal canvas path would, just with
+                  skipSourceProbe (the element is already known here). */}
+              <div
+                role="button"
+                tabIndex={0}
+                aria-label={`Select off-canvas element ${r.key}`}
+                className="pointer-events-auto absolute inset-0 border-2 border-dashed border-studio-accent/60 rounded-md cursor-pointer hover:border-studio-accent hover:bg-studio-accent/10 transition-colors"
+                style={clipOutside ? { clipPath: clipOutside } : undefined}
+                title={`Off-canvas: ${r.key} — click to select`}
+                onClick={handleClick}
+                onKeyDown={(e) => {
+                  if (e.key === "Enter" || e.key === " ") {
+                    e.preventDefault();
+                    e.stopPropagation();
+                    void selectOffCanvas();
+                  }
+                }}
+              />
+              {/* Solid layer — clipped to canvas bounds, covers inside portion */}
+              <div
+                className="pointer-events-none absolute inset-0 border border-studio-accent/80 rounded-md bg-studio-accent/5 shadow-[0_0_0_1px_rgba(60,230,172,0.25)]"
+                style={{ clipPath: clipInside }}
+              />
+            </div>
+          );
+        })}
+    </>
+  );
+}
diff --git a/packages/studio/src/components/editor/manualOffsetDrag.ts b/packages/studio/src/components/editor/manualOffsetDrag.ts
index 9cfe694f0b..c37058c933 100644
--- a/packages/studio/src/components/editor/manualOffsetDrag.ts
+++ b/packages/studio/src/components/editor/manualOffsetDrag.ts
@@ -443,6 +443,14 @@ export function endManualOffsetDragMembers(members: ManualOffsetDragMember[]): v
     member.element.removeAttribute("data-hf-drag-initial-offset-y");
     member.element.removeAttribute("data-hf-drag-gsap-base-x");
     member.element.removeAttribute("data-hf-drag-gsap-base-y");
+    // Clear the draft's `translate: none` so the soft reload starts clean —
+    // otherwise button-less pointermoves after the reload compute deltas
+    // from a stale base and fling the element off-screen (#1673).
+    // Do NOT clearProps:"transform" — that nukes the committed GSAP position
+    // and causes a visual snap-back before the soft reload re-applies it.
+    if (member.element.style.getPropertyValue("translate") === "none") {
+      member.element.style.removeProperty("translate");
+    }
     resumeGsapTimelines(member.element);
   }
 }
diff --git a/packages/studio/src/components/editor/marqueeCommit.ts b/packages/studio/src/components/editor/marqueeCommit.ts
new file mode 100644
index 0000000000..6502d48c21
--- /dev/null
+++ b/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 };
+}
diff --git a/packages/studio/src/components/editor/propertyPanelHelpers.ts b/packages/studio/src/components/editor/propertyPanelHelpers.ts
index 8a2bed2821..8bc4063f58 100644
--- a/packages/studio/src/components/editor/propertyPanelHelpers.ts
+++ b/packages/studio/src/components/editor/propertyPanelHelpers.ts
@@ -66,6 +66,7 @@ export interface PropertyPanelProps {
     value: number | string,
   ) => void;
   onRemoveKeyframe?: (animationId: string, percentage: number) => void;
+  onUpdateKeyframeEase?: (animationId: string, percentage: number, ease: string) => void;
   onConvertToKeyframes?: (animationId: string) => void;
   onCommitAnimatedProperty?: (
     selection: DomEditSelection,
diff --git a/packages/studio/src/components/editor/snapTargetCollection.ts b/packages/studio/src/components/editor/snapTargetCollection.ts
index 4ec540f0a1..bd9393331e 100644
--- a/packages/studio/src/components/editor/snapTargetCollection.ts
+++ b/packages/studio/src/components/editor/snapTargetCollection.ts
@@ -100,11 +100,6 @@ export function collectSnapContext(input: {
 
   const MAX_SNAP_TARGETS = 80;
   const elements = collectVisibleElements(root, input.excludeElements, MAX_SNAP_TARGETS);
-  if (elements.length >= MAX_SNAP_TARGETS) {
-    console.warn(
-      `[snap] Target cap reached (${MAX_SNAP_TARGETS}). Elements beyond this limit are excluded from snap alignment.`,
-    );
-  }
 
   const entries: Array<{
     rect: { left: number; top: number; width: number; height: number };
diff --git a/packages/studio/src/components/panels/SlideshowPanel.tsx b/packages/studio/src/components/panels/SlideshowPanel.tsx
index c4a30f0f37..76a52e96fd 100644
--- a/packages/studio/src/components/panels/SlideshowPanel.tsx
+++ b/packages/studio/src/components/panels/SlideshowPanel.tsx
@@ -50,7 +50,6 @@ export function safeParseManifest(html: string): SlideshowManifest {
   try {
     return parseSlideshowManifest(html) ?? { slides: [] };
   } catch {
-    console.warn("[SlideshowPanel] Failed to parse slideshow manifest; using empty manifest");
     return { slides: [] };
   }
 }
diff --git a/packages/studio/src/contexts/DomEditContext.tsx b/packages/studio/src/contexts/DomEditContext.tsx
index 21e60be486..ea504a8880 100644
--- a/packages/studio/src/contexts/DomEditContext.tsx
+++ b/packages/studio/src/contexts/DomEditContext.tsx
@@ -61,6 +61,8 @@ export interface DomEditActionsValue extends Pick<
   | "invalidateGsapCache"
   | "previewIframeRef"
   | "commitMutation"
+  | "applyMarqueeSelection"
+  | "handleUpdateKeyframeEase"
 > {}
 
 export interface DomEditSelectionValue extends Pick<
@@ -167,6 +169,8 @@ export function DomEditProvider({
     invalidateGsapCache,
     previewIframeRef,
     commitMutation,
+    applyMarqueeSelection,
+    handleUpdateKeyframeEase,
   },
   children,
 }: {
@@ -238,6 +242,8 @@ export function DomEditProvider({
       invalidateGsapCache,
       previewIframeRef,
       commitMutation: stableCommitMutation,
+      applyMarqueeSelection,
+      handleUpdateKeyframeEase,
     }),
     [
       handleTimelineElementSelect,
@@ -295,6 +301,8 @@ export function DomEditProvider({
       invalidateGsapCache,
       previewIframeRef,
       stableCommitMutation,
+      applyMarqueeSelection,
+      handleUpdateKeyframeEase,
     ],
   );
 
diff --git a/packages/studio/src/hooks/gsapDragPositionCommit.ts b/packages/studio/src/hooks/gsapDragPositionCommit.ts
index 5b6725f8f6..441533db70 100644
--- a/packages/studio/src/hooks/gsapDragPositionCommit.ts
+++ b/packages/studio/src/hooks/gsapDragPositionCommit.ts
@@ -165,8 +165,7 @@ async function commitFlatViaKeyframes(
         if (Number.isFinite(v)) resolvedFromValues[key] = roundTo3(v);
       }
       mainTl.seek(ct);
-    } catch (err) {
-      console.warn("[gsap-drag] start-value read failed; using identity from values", err);
+    } catch {
       for (const key of Object.keys(resolvedFromValues)) delete resolvedFromValues[key];
     } finally {
       if (Object.keys(draggedValues).length > 0) gsapLib.set(el, draggedValues);
diff --git a/packages/studio/src/hooks/gsapRuntimeBridge.ts b/packages/studio/src/hooks/gsapRuntimeBridge.ts
index e0f2c6131c..54b3ecbd1b 100644
--- a/packages/studio/src/hooks/gsapRuntimeBridge.ts
+++ b/packages/studio/src/hooks/gsapRuntimeBridge.ts
@@ -239,7 +239,9 @@ export async function tryGsapDragIntercept(
   // `tl.set("#el",{x,y})`, not a keyframe conversion: re-nudge an existing set in
   // place (idempotent), else add a new one. This also covers the stale-cache
   // phantom — committing a set is correct because the element genuinely has no live motion.
-  if (!hasNonHoldTweenForElement(iframe, selector)) {
+  const hasNonHold = hasNonHoldTweenForElement(iframe, selector);
+
+  if (!hasNonHold) {
     const existingSet =
       posAnim && posAnim.method === "set" && posAnim.targetSelector === selector
         ? posAnim
@@ -251,7 +253,9 @@ export async function tryGsapDragIntercept(
     return true;
   }
 
-  if (!posAnim) return false;
+  if (!posAnim) {
+    return false;
+  }
 
   // Verify the anim ID is still valid in the current file. The React-state
   // `animations` list can lag behind the file after a prior mutation changed
diff --git a/packages/studio/src/hooks/gsapRuntimeReaders.ts b/packages/studio/src/hooks/gsapRuntimeReaders.ts
index 2094ef3653..966a1b850d 100644
--- a/packages/studio/src/hooks/gsapRuntimeReaders.ts
+++ b/packages/studio/src/hooks/gsapRuntimeReaders.ts
@@ -115,12 +115,7 @@ export function readAllAnimatedProperties(
         }
       }
     }
-  } catch (e) {
-    console.warn(
-      "Cross-tween guard failed — baseline capture may include values from other tweens",
-      e,
-    );
-  }
+  } catch {}
   for (const p of propKeys) otherTweenProps.delete(p);
 
   // Tier 1: Transform + visual properties with universal CSS defaults.
diff --git a/packages/studio/src/hooks/useDomEditCommits.ts b/packages/studio/src/hooks/useDomEditCommits.ts
index 1ef3fe7ab7..8492b0ab97 100644
--- a/packages/studio/src/hooks/useDomEditCommits.ts
+++ b/packages/studio/src/hooks/useDomEditCommits.ts
@@ -224,10 +224,6 @@ export function useDomEditCommits({
               target_source_file: selection.sourceFile ?? undefined,
               composition: activeCompPath ?? undefined,
             });
-            console.warn(
-              `[studio] Element not found in source: ${targetKey}. ` +
-                "This element may be generated at runtime and cannot be persisted.",
-            );
           }
         }
         return;
diff --git a/packages/studio/src/hooks/useDomEditPreviewSync.ts b/packages/studio/src/hooks/useDomEditPreviewSync.ts
index 2648be2aaa..4d53108305 100644
--- a/packages/studio/src/hooks/useDomEditPreviewSync.ts
+++ b/packages/studio/src/hooks/useDomEditPreviewSync.ts
@@ -68,6 +68,11 @@ export function useDomEditPreviewSync({
 
       const nextElement = findElementForSelection(doc, currentSelection, activeCompPath);
       if (!nextElement) {
+        // The selected element no longer resolves in the (re-synced) document
+        // — comp/hot reload, activeCompPath swap, or post-save replacement.
+        // Clear so overlay geometry isn't computed on a stale, detached node.
+        // (Drag-release-in-gray-zone is handled separately by
+        // suppressNextBoxClickRef; the dragged element still resolves here.)
         applyDomSelection(null, { revealPanel: false });
         return;
       }
diff --git a/packages/studio/src/hooks/useDomEditSession.ts b/packages/studio/src/hooks/useDomEditSession.ts
index d4c582a0d4..dd7d053c04 100644
--- a/packages/studio/src/hooks/useDomEditSession.ts
+++ b/packages/studio/src/hooks/useDomEditSession.ts
@@ -1,3 +1,4 @@
+import { useCallback } from "react";
 import type { TimelineElement } from "../player";
 import type { ImportedFontAsset } from "../components/editor/fontAssets";
 import type { EditHistoryKind } from "../utils/editHistory";
@@ -123,6 +124,7 @@ export function useDomEditSession({
     buildDomSelectionForTimelineElement,
     handleTimelineElementSelect,
     refreshDomEditSelectionFromPreview,
+    applyMarqueeSelection,
   } = useDomSelection({
     projectId,
     activeCompPath,
@@ -389,6 +391,25 @@ export function useDomEditSession({
     updateArcSegment,
   });
 
+  const handleUpdateKeyframeEase = useCallback(
+    (animationId: string, percentage: number, ease: string) => {
+      const sel = domEditSelectionRef.current;
+      if (!sel) return;
+      gsapCommitMutation(
+        sel,
+        {
+          type: "update-keyframe",
+          animationId,
+          percentage,
+          properties: {},
+          ease,
+        },
+        { label: "Update keyframe ease", softReload: true },
+      );
+    },
+    [gsapCommitMutation, domEditSelectionRef],
+  );
+
   return {
     // State
     domEditSelection,
@@ -429,6 +450,7 @@ export function useDomEditSession({
     buildDomSelectionFromTarget,
     buildDomSelectionForTimelineElement,
     updateDomEditHoverSelection,
+    applyMarqueeSelection,
     resolveImportedFontAsset,
     setAgentModalOpen,
     setAgentPromptSelectionContext,
@@ -454,6 +476,7 @@ export function useDomEditSession({
     handleGsapConvertToKeyframes,
     handleGsapRemoveAllKeyframes,
     handleResetSelectedElementKeyframes,
+    handleUpdateKeyframeEase,
     commitAnimatedProperty,
     handleSetArcPath,
     handleUpdateArcSegment,
diff --git a/packages/studio/src/hooks/useDomEditTextCommits.ts b/packages/studio/src/hooks/useDomEditTextCommits.ts
index f6849a813a..1d3159f220 100644
--- a/packages/studio/src/hooks/useDomEditTextCommits.ts
+++ b/packages/studio/src/hooks/useDomEditTextCommits.ts
@@ -126,9 +126,7 @@ export function useDomEditTextCommits({
             ? (html, sourceFile) => ensureImportedFontFace(html, importedFont, sourceFile)
             : undefined,
         });
-      } catch (err) {
-        console.warn("[Studio] Style persist failed:", err instanceof Error ? err.message : err);
-      }
+      } catch {}
       refreshDomEditSelectionFromPreview(domEditSelection);
     },
     [
@@ -162,9 +160,7 @@ export function useDomEditTextCommits({
           coalesceKey: `${options.coalescePrefix}:${attr}:${getDomEditTargetKey(domEditSelection)}`,
           skipRefresh: options.skipRefresh,
         });
-      } catch (err) {
-        console.warn(options.warningMessage, err instanceof Error ? err.message : err);
-      }
+      } catch {}
       if (options.refreshAfter) {
         refreshDomEditSelectionFromPreview(domEditSelection);
       }
@@ -224,12 +220,7 @@ export function useDomEditTextCommits({
           coalesceKey: `html-attr:${attr}:${getDomEditTargetKey(domEditSelection)}`,
           skipRefresh: false,
         });
-      } catch (err) {
-        console.warn(
-          "[Studio] HTML attribute persist failed:",
-          err instanceof Error ? err.message : err,
-        );
-      }
+      } catch {}
       refreshDomEditSelectionFromPreview(domEditSelection);
     },
     [
diff --git a/packages/studio/src/hooks/useDomSelection.ts b/packages/studio/src/hooks/useDomSelection.ts
index 898cede6e2..6c9fc36ab6 100644
--- a/packages/studio/src/hooks/useDomSelection.ts
+++ b/packages/studio/src/hooks/useDomSelection.ts
@@ -85,6 +85,7 @@ export interface UseDomSelectionReturn {
   handleTimelineElementSelect: (element: TimelineElement | null) => Promise<void>;
   refreshDomEditSelectionFromPreview: (selection: DomEditSelection) => Promise<void>;
   refreshDomEditGroupSelectionsFromPreview: (selections: DomEditSelection[]) => Promise<void>;
+  applyMarqueeSelection: (selections: DomEditSelection[], additive: boolean) => void;
 }
 
 // ── Hook ──
@@ -419,6 +420,50 @@ export function useDomSelection({
     applyDomSelection(null, { revealPanel: false });
   }, [applyDomSelection, captionEditMode]);
 
+  const applyMarqueeSelection = useCallback(
+    // fallow-ignore-next-line complexity
+    (selections: DomEditSelection[], additive: boolean) => {
+      // Honor the inspector-panels kill switch like applyDomSelection does, so
+      // marquee can't land selections while the inspector UI is suppressed.
+      if (!STUDIO_INSPECTOR_PANELS_ENABLED) {
+        domEditSelectionRef.current = null;
+        domEditGroupSelectionsRef.current = [];
+        setDomEditSelection(null);
+        setDomEditGroupSelections([]);
+        return;
+      }
+      if (selections.length === 0) {
+        if (!additive) applyDomSelection(null, { revealPanel: false });
+        return;
+      }
+      const current = domEditSelectionRef.current;
+      const currentGroup = domEditGroupSelectionsRef.current;
+      let nextGroup: DomEditSelection[];
+      if (additive) {
+        nextGroup = seedDomEditGroupWithSelection(currentGroup, current);
+        for (const s of selections) {
+          if (!domEditSelectionInGroup(nextGroup, s)) nextGroup = [...nextGroup, s];
+        }
+      } else {
+        nextGroup = selections;
+      }
+      const nextSelection = additive && current ? current : selections[0];
+      domEditSelectionRef.current = nextSelection;
+      domEditGroupSelectionsRef.current = nextGroup;
+      setDomEditSelection(nextSelection);
+      setDomEditGroupSelections(nextGroup);
+      const nextTimelineId =
+        findMatchingTimelineElementId(nextSelection, timelineElements) ??
+        findTimelineIdByAncestor(
+          nextSelection.element,
+          timelineElements,
+          nextSelection.sourceFile || "index.html",
+        );
+      setSelectedTimelineElementId(nextTimelineId);
+    },
+    [applyDomSelection, timelineElements, setSelectedTimelineElementId],
+  );
+
   // Disabled inspector effect
   // eslint-disable-next-line no-restricted-syntax
   useEffect(() => {
@@ -451,5 +496,6 @@ export function useDomSelection({
     handleTimelineElementSelect,
     refreshDomEditSelectionFromPreview,
     refreshDomEditGroupSelectionsFromPreview,
+    applyMarqueeSelection,
   };
 }
diff --git a/packages/studio/src/hooks/useGestureRecording.ts b/packages/studio/src/hooks/useGestureRecording.ts
index 12be5a6799..80dfd7905a 100644
--- a/packages/studio/src/hooks/useGestureRecording.ts
+++ b/packages/studio/src/hooks/useGestureRecording.ts
@@ -1,16 +1,6 @@
 import { useCallback, useEffect, useRef, useState } from "react";
 import { usePlayerStore, liveTime } from "../player/store/playerStore";
 
-// `import.meta.env` may be undefined in non-Vite bundlers (Next.js Turbopack),
-// so guard the access like the telemetry client does.
-function isDevBuild(): boolean {
-  try {
-    return import.meta.env.DEV === true;
-  } catch {
-    return false;
-  }
-}
-
 export interface GestureSample {
   time: number;
   properties: Record<string, number>;
@@ -385,13 +375,9 @@ export function useGestureRecording() {
         if (r.runtime) {
           try {
             applyRuntimePreview(r.runtime, time, properties);
-          } catch (err) {
+          } catch {
             // Preview failed — disable it for the rest of the gesture (recording
-            // continues). Surface in dev so a dead preview isn't silent; `r.runtime`
-            // is nulled below so this warns at most once per gesture.
-            if (isDevBuild()) {
-              console.warn("[GR] live preview disabled — runtime threw:", err);
-            }
+            // continues). `r.runtime` is nulled so we don't retry on every frame.
             r.runtime = null;
           }
         }
diff --git a/packages/studio/src/player/components/Player.tsx b/packages/studio/src/player/components/Player.tsx
index 47d9673717..d23dbec269 100644
--- a/packages/studio/src/player/components/Player.tsx
+++ b/packages/studio/src/player/components/Player.tsx
@@ -252,11 +252,6 @@ export const Player = forwardRef<HTMLIFrameElement, PlayerProps>(
                 if (assetPollRef.current) clearInterval(assetPollRef.current);
                 assetPollRef.current = null;
                 setAssetsLoading(false);
-                if (lastUnloaded) {
-                  console.debug(
-                    "[Player] Asset-loading overlay timed out after 10s; hiding anyway. Check network or asset integrity.",
-                  );
-                }
               }
             }, 100);
           } else {
diff --git a/packages/studio/src/player/components/timelineIcons.tsx b/packages/studio/src/player/components/timelineIcons.tsx
index 8846cd0490..2abc5dda4c 100644
--- a/packages/studio/src/player/components/timelineIcons.tsx
+++ b/packages/studio/src/player/components/timelineIcons.tsx
@@ -39,7 +39,7 @@ const ICONS: Record<string, ReactNode> = {
 };
 
 export function getTrackStyle(tag: string): TrackVisualStyle {
-  if (!tag) console.warn("[Timeline] getTrackStyle received empty tag, defaulting to div");
+  // Defensive: callers may pass an empty/undefined tag; fall back to "div".
   const safeTag = tag || "div";
   const trackStyle = getTimelineTrackStyle(safeTag);
   const normalized = safeTag.toLowerCase();
diff --git a/packages/studio/src/player/hooks/useTimelinePlayer.ts b/packages/studio/src/player/hooks/useTimelinePlayer.ts
index babb7a8333..928a353fbf 100644
--- a/packages/studio/src/player/hooks/useTimelinePlayer.ts
+++ b/packages/studio/src/player/hooks/useTimelinePlayer.ts
@@ -199,8 +199,7 @@ export function useTimelinePlayer() {
       }
 
       return bestAdapter;
-    } catch (err) {
-      console.warn("[useTimelinePlayer] Could not get playback adapter (cross-origin)", err);
+    } catch {
       return null;
     }
   }, []);
@@ -264,9 +263,7 @@ export function useTimelinePlayer() {
           }
         }
       }
-    } catch (err) {
-      console.warn("[useTimelinePlayer] Could not set playback rate (cross-origin)", err);
-    }
+    } catch {}
   }, []);
   const applyPreviewAudioState = useCallback((playbackRateOverride?: number) => {
     const { audioMuted, playbackRate } = usePlayerStore.getState();
@@ -506,9 +503,7 @@ export function useTimelinePlayer() {
           if (msSinceTimeline > 500) {
             enrichMissingCompositionsRef.current();
           }
-        } catch (err) {
-          console.warn("[useTimelinePlayer] Could not read clip manifest from iframe", err);
-        }
+        } catch {}
       }
       if (data?.source === "hf-preview" && data?.type === "timeline" && Array.isArray(data.clips)) {
         lastTimelineMessageRef.current = Date.now();
@@ -524,12 +519,7 @@ export function useTimelinePlayer() {
                 syncTimelineElements(els);
               }
             }
-          } catch (err) {
-            console.warn(
-              "[useTimelinePlayer] Could not read timeline elements on navigate (cross-origin)",
-              err,
-            );
-          }
+          } catch {}
         }
       }
     };
diff --git a/packages/studio/src/player/hooks/useTimelineSyncCallbacks.ts b/packages/studio/src/player/hooks/useTimelineSyncCallbacks.ts
index 03c02e1f99..5abbc32445 100644
--- a/packages/studio/src/player/hooks/useTimelineSyncCallbacks.ts
+++ b/packages/studio/src/player/hooks/useTimelineSyncCallbacks.ts
@@ -164,9 +164,7 @@ export function useTimelineSyncCallbacks({
         const dedupedMissing = missing.filter((m) => !finalIds.has(m.id));
         syncTimelineElements([...updatedEls, ...dedupedMissing]);
       }
-    } catch (err) {
-      console.warn("[useTimelinePlayer] enrichMissingCompositions failed", err);
-    }
+    } catch {}
   }, [iframeRef, syncTimelineElements]);
 
   const initializeAdapter = useCallback(() => {
@@ -241,9 +239,7 @@ export function useTimelineSyncCallbacks({
           if (fallbackElement) syncTimelineElements([fallbackElement]);
         }
       }
-    } catch (err) {
-      console.warn("[useTimelinePlayer] Could not read timeline elements from iframe", err);
-    }
+    } catch {}
     return true;
   }, [
     getAdapter,
@@ -295,9 +291,6 @@ export function useTimelineSyncCallbacks({
     probeIntervalRef.current = setTimeout(() => {
       if (!settled) {
         trySettle();
-        if (!settled) {
-          console.warn("[useTimelinePlayer] Runtime did not signal readiness within 5s");
-        }
       }
       window.removeEventListener("message", onMessage);
     }, 5000) as unknown as ReturnType<typeof setInterval>;
diff --git a/packages/studio/src/player/lib/timelineIframeHelpers.ts b/packages/studio/src/player/lib/timelineIframeHelpers.ts
index 7d2e65b092..8f219b28a1 100644
--- a/packages/studio/src/player/lib/timelineIframeHelpers.ts
+++ b/packages/studio/src/player/lib/timelineIframeHelpers.ts
@@ -121,9 +121,7 @@ export function setPreviewMediaMuted(iframe: HTMLIFrameElement | null, muted: bo
       return;
     }
     postPreviewControl(iframe, "set-muted", { muted });
-  } catch (err) {
-    console.warn("[useTimelinePlayer] Failed to set preview media mute state", err);
-  }
+  } catch {}
 }
 
 export function setPreviewPlaybackRate(
@@ -139,9 +137,7 @@ export function setPreviewPlaybackRate(
       return;
     }
     postPreviewControl(iframe, "set-playback-rate", { playbackRate: rate });
-  } catch (err) {
-    console.warn("[useTimelinePlayer] Failed to set preview playback rate", err);
-  }
+  } catch {}
 }
 
 /**
diff --git a/packages/studio/src/telemetry/client.ts b/packages/studio/src/telemetry/client.ts
index f4228400d7..96b6d05f4a 100644
--- a/packages/studio/src/telemetry/client.ts
+++ b/packages/studio/src/telemetry/client.ts
@@ -129,6 +129,8 @@ function send(url: string, payload: string): void {
 function showNoticeOnce(): void {
   if (hasShownNotice()) return;
   markNoticeShown();
+  // Intentional one-time consent disclosure (not debug noise): tells users
+  // anonymous analytics are on and how to opt out. Kept behind a pragma.
   // eslint-disable-next-line no-console
   console.info(
     "%c[HyperFrames]%c Anonymous studio usage analytics enabled. " +
diff --git a/packages/studio/src/utils/editDebugLog.ts b/packages/studio/src/utils/editDebugLog.ts
index 88a0607ad4..8ad48bc83b 100644
--- a/packages/studio/src/utils/editDebugLog.ts
+++ b/packages/studio/src/utils/editDebugLog.ts
@@ -3,14 +3,7 @@
 // `window.__hfDebug = true` in the console. Single `[hf-edit:<scope>]` prefix so
 // the whole edit pipeline is greppable. Fires only at commit boundaries (user
 // actions), never in render/raf loops, so it doesn't spam.
-export function editLog(scope: string, ...args: unknown[]): void {
-  if (typeof window === "undefined") return;
-  const w = window as unknown as { __hfDebug?: boolean };
-  if (!import.meta.env.DEV && !w.__hfDebug) return;
-  // Stringify object args so the console prints their contents inline (`{x:1}`)
-  // instead of a collapsed `Object` — keeps the edit trail greppable/copyable.
-  const parts = args.map((a) =>
-    typeof a === "object" && a !== null ? JSON.stringify(a) : String(a),
-  );
-  console.debug(`[hf-edit:${scope}]`, ...parts);
+export function editLog(_scope: string, ..._args: unknown[]): void {
+  // ponytail: body removed — all console.* stripped from studio.
+  // Restore with: console.log(`[hf-edit:${_scope}]`, ..._args);
 }
diff --git a/packages/studio/src/utils/marqueeGeometry.test.ts b/packages/studio/src/utils/marqueeGeometry.test.ts
new file mode 100644
index 0000000000..23688da34f
--- /dev/null
+++ b/packages/studio/src/utils/marqueeGeometry.test.ts
@@ -0,0 +1,123 @@
+import { describe, expect, it } from "vitest";
+import { marqueeIntersectsObb, rectsOverlap, type Point, type Rect } from "./marqueeGeometry";
+
+type Corners = [Point, Point, Point, Point];
+
+function rotateCorners(cx: number, cy: number, w: number, h: number, deg: number): Corners {
+  const rad = (deg * Math.PI) / 180;
+  const cos = Math.cos(rad);
+  const sin = Math.sin(rad);
+  const hw = w / 2;
+  const hh = h / 2;
+  const local: [number, number][] = [
+    [-hw, -hh],
+    [hw, -hh],
+    [hw, hh],
+    [-hw, hh],
+  ];
+  return local.map(([lx, ly]) => ({
+    x: cx + cos * lx - sin * ly,
+    y: cy + sin * lx + cos * ly,
+  })) as Corners;
+}
+
+function aabbCorners(r: Rect): Corners {
+  return [
+    { x: r.left, y: r.top },
+    { x: r.left + r.width, y: r.top },
+    { x: r.left + r.width, y: r.top + r.height },
+    { x: r.left, y: r.top + r.height },
+  ];
+}
+
+describe("rectsOverlap", () => {
+  it("overlapping rects", () => {
+    expect(
+      rectsOverlap(
+        { left: 0, top: 0, width: 10, height: 10 },
+        { left: 5, top: 5, width: 10, height: 10 },
+      ),
+    ).toBe(true);
+  });
+
+  it("non-overlapping rects", () => {
+    expect(
+      rectsOverlap(
+        { left: 0, top: 0, width: 10, height: 10 },
+        { left: 20, top: 20, width: 10, height: 10 },
+      ),
+    ).toBe(false);
+  });
+});
+
+describe("marqueeIntersectsObb", () => {
+  it("axis-aligned overlap", () => {
+    const marquee: Rect = { left: 0, top: 0, width: 100, height: 100 };
+    const corners = aabbCorners({ left: 50, top: 50, width: 80, height: 80 });
+    expect(marqueeIntersectsObb(marquee, corners)).toBe(true);
+  });
+
+  it("axis-aligned no overlap", () => {
+    const marquee: Rect = { left: 0, top: 0, width: 50, height: 50 };
+    const corners = aabbCorners({ left: 100, top: 100, width: 50, height: 50 });
+    expect(marqueeIntersectsObb(marquee, corners)).toBe(false);
+  });
+
+  it("marquee fully contains element", () => {
+    const marquee: Rect = { left: 0, top: 0, width: 200, height: 200 };
+    const corners = aabbCorners({ left: 50, top: 50, width: 20, height: 20 });
+    expect(marqueeIntersectsObb(marquee, corners)).toBe(true);
+  });
+
+  it("element fully contains marquee", () => {
+    const marquee: Rect = { left: 50, top: 50, width: 10, height: 10 };
+    const corners = aabbCorners({ left: 0, top: 0, width: 200, height: 200 });
+    expect(marqueeIntersectsObb(marquee, corners)).toBe(true);
+  });
+
+  it("45-degree rotated square: AABB overlaps but OBB does not", () => {
+    // 100x100 square rotated 45° centered at (200,200)
+    // Its AABB extends to ~(129,129)-(271,271)
+    // A marquee at (0,0)-(135,135) overlaps the AABB but NOT the diamond
+    const corners = rotateCorners(200, 200, 100, 100, 45);
+    const marquee: Rect = { left: 0, top: 0, width: 135, height: 135 };
+    expect(marqueeIntersectsObb(marquee, corners)).toBe(false);
+  });
+
+  it("45-degree rotated square: OBB overlaps", () => {
+    // Same rotated square, marquee reaches the diamond's left point
+    const corners = rotateCorners(200, 200, 100, 100, 45);
+    const marquee: Rect = { left: 0, top: 150, width: 155, height: 100 };
+    expect(marqueeIntersectsObb(marquee, corners)).toBe(true);
+  });
+
+  it("zero-width marquee returns false", () => {
+    const corners = aabbCorners({ left: 0, top: 0, width: 100, height: 100 });
+    expect(marqueeIntersectsObb({ left: 50, top: 50, width: 0, height: 50 }, corners)).toBe(false);
+  });
+
+  it("zero-area element returns false for degenerate OBB", () => {
+    const corners: Corners = [
+      { x: 50, y: 50 },
+      { x: 50, y: 50 },
+      { x: 50, y: 50 },
+      { x: 50, y: 50 },
+    ];
+    const marquee: Rect = { left: 0, top: 0, width: 100, height: 100 };
+    // Degenerate point — SAT still works (projections are zero-length intervals)
+    // A point inside the marquee should still intersect
+    expect(marqueeIntersectsObb(marquee, corners)).toBe(true);
+  });
+
+  it("30-degree rotated rectangle clips marquee corner", () => {
+    const corners = rotateCorners(150, 150, 200, 50, 30);
+    const marquee: Rect = { left: 0, top: 0, width: 80, height: 130 };
+    expect(marqueeIntersectsObb(marquee, corners)).toBe(true);
+  });
+
+  it("30-degree rotated rectangle misses marquee", () => {
+    const corners = rotateCorners(300, 300, 50, 50, 30);
+    const marquee: Rect = { left: 0, top: 0, width: 100, height: 100 };
+    expect(marqueeIntersectsObb(marquee, corners)).toBe(false);
+  });
+});
diff --git a/packages/studio/src/utils/marqueeGeometry.ts b/packages/studio/src/utils/marqueeGeometry.ts
new file mode 100644
index 0000000000..4bf5d7e986
--- /dev/null
+++ b/packages/studio/src/utils/marqueeGeometry.ts
@@ -0,0 +1,172 @@
+export interface Point {
+  x: number;
+  y: number;
+}
+
+export interface Rect {
+  left: number;
+  top: number;
+  width: number;
+  height: number;
+}
+
+type Corners = [Point, Point, Point, Point];
+
+function isIdentityMatrix(m: DOMMatrix): boolean {
+  const e = 1e-6;
+  return Math.abs(m.a - 1) < e && Math.abs(m.b) < e && Math.abs(m.c) < e && Math.abs(m.d - 1) < e;
+}
+
+function rectsOverlap(a: Rect, b: Rect): boolean {
+  return (
+    a.left < b.left + b.width &&
+    a.left + a.width > b.left &&
+    a.top < b.top + b.height &&
+    a.top + a.height > b.top
+  );
+}
+
+function projectOntoAxis(corners: Corners, ax: number, ay: number): [number, number] {
+  let min = Infinity;
+  let max = -Infinity;
+  for (const c of corners) {
+    const dot = c.x * ax + c.y * ay;
+    if (dot < min) min = dot;
+    if (dot > max) max = dot;
+  }
+  return [min, max];
+}
+
+function projectionsOverlap(a: [number, number], b: [number, number]): boolean {
+  return a[0] <= b[1] && b[0] <= a[1];
+}
+
+/**
+ * SAT intersection test between an axis-aligned marquee rect and a
+ * convex quadrilateral (the element's OBB corners in overlay space).
+ *
+ * Separating axes: 2 from the AABB (horizontal, vertical) + 2 from
+ * the OBB's edge normals. If projections overlap on all 4 axes, the
+ * shapes intersect.
+ */
+export function marqueeIntersectsObb(marquee: Rect, corners: Corners): boolean {
+  if (marquee.width <= 0 || marquee.height <= 0) return false;
+
+  const mCorners: Corners = [
+    { x: marquee.left, y: marquee.top },
+    { x: marquee.left + marquee.width, y: marquee.top },
+    { x: marquee.left + marquee.width, y: marquee.top + marquee.height },
+    { x: marquee.left, y: marquee.top + marquee.height },
+  ];
+
+  // AABB axes: (1,0) and (0,1)
+  const mProjX: [number, number] = [marquee.left, marquee.left + marquee.width];
+  const mProjY: [number, number] = [marquee.top, marquee.top + marquee.height];
+
+  const oProjX = projectOntoAxis(corners, 1, 0);
+  const oProjY = projectOntoAxis(corners, 0, 1);
+
+  if (!projectionsOverlap(mProjX, oProjX)) return false;
+  if (!projectionsOverlap(mProjY, oProjY)) return false;
+
+  // OBB edge normals (only need 2 — edges 0→1 and 1→2)
+  for (let i = 0; i < 2; i++) {
+    const edge = {
+      x: corners[i + 1].x - corners[i].x,
+      y: corners[i + 1].y - corners[i].y,
+    };
+    const len = Math.hypot(edge.x, edge.y);
+    if (len < 1e-9) continue;
+    const ax = -edge.y / len;
+    const ay = edge.x / len;
+
+    const mProj = projectOntoAxis(mCorners, ax, ay);
+    const oProj = projectOntoAxis(corners, ax, ay);
+    if (!projectionsOverlap(mProj, oProj)) return false;
+  }
+
+  return true;
+}
+
+/**
+ * Compute the four corners of an element's OBB in overlay-pixel space.
+ *
+ * For elements with an identity transform, returns the axis-aligned
+ * corners from the element's BCR mapped to overlay space (fast path).
+ */
+// fallow-ignore-next-line complexity
+export function elementObbCorners(
+  element: HTMLElement,
+  overlayEl: HTMLDivElement,
+  iframe: HTMLIFrameElement,
+): Corners | null {
+  const doc = iframe.contentDocument;
+  if (!doc) return null;
+
+  const iframeRect = iframe.getBoundingClientRect();
+  const overlayRect = overlayEl.getBoundingClientRect();
+  const root = doc.querySelector<HTMLElement>("[data-composition-id]") ?? doc.documentElement;
+  const declaredW = Number.parseFloat(root?.getAttribute("data-width") ?? "");
+  const declaredH = Number.parseFloat(root?.getAttribute("data-height") ?? "");
+  const rootW = declaredW > 0 ? declaredW : root?.getBoundingClientRect().width || 1;
+  const rootH = declaredH > 0 ? declaredH : root?.getBoundingClientRect().height || 1;
+
+  const scaleX = iframeRect.width / rootW;
+  const scaleY = iframeRect.height / rootH;
+  const offsetX = iframeRect.left - overlayRect.left;
+  const offsetY = iframeRect.top - overlayRect.top;
+
+  const win = element.ownerDocument.defaultView;
+  if (!win) return null;
+
+  const transform = win.getComputedStyle(element).transform;
+  const m = transform && transform !== "none" ? new DOMMatrix(transform) : new DOMMatrix();
+
+  if (isIdentityMatrix(m)) {
+    const r = element.getBoundingClientRect();
+    const left = offsetX + r.left * scaleX;
+    const top = offsetY + r.top * scaleY;
+    const w = r.width * scaleX;
+    const h = r.height * scaleY;
+    return [
+      { x: left, y: top },
+      { x: left + w, y: top },
+      { x: left + w, y: top + h },
+      { x: left, y: top + h },
+    ];
+  }
+
+  // Walk offsetParent chain for pre-transform position
+  let ox = 0;
+  let oy = 0;
+  let el: HTMLElement | null = element;
+  while (el && el !== doc.body && el !== doc.documentElement) {
+    ox += el.offsetLeft;
+    oy += el.offsetTop;
+    el = el.offsetParent as HTMLElement | null;
+  }
+
+  const w = element.offsetWidth;
+  const h = element.offsetHeight;
+  // ponytail: center-based transform — CSS transforms originate at 50% 50%
+  const cx = ox + w / 2;
+  const cy = oy + h / 2;
+
+  const localCorners: [number, number][] = [
+    [-w / 2, -h / 2],
+    [w / 2, -h / 2],
+    [w / 2, h / 2],
+    [-w / 2, h / 2],
+  ];
+
+  return localCorners.map(([lx, ly]) => {
+    const tx = m.a * lx + m.c * ly + cx;
+    const ty = m.b * lx + m.d * ly + cy;
+    return {
+      x: offsetX + tx * scaleX,
+      y: offsetY + ty * scaleY,
+    };
+  }) as Corners;
+}
+
+export { rectsOverlap };
diff --git a/packages/studio/src/utils/optimisticUpdate.ts b/packages/studio/src/utils/optimisticUpdate.ts
index 90e1bfe944..1d81d86b90 100644
--- a/packages/studio/src/utils/optimisticUpdate.ts
+++ b/packages/studio/src/utils/optimisticUpdate.ts
@@ -11,8 +11,7 @@ export async function executeOptimistic<T>(options: OptimisticUpdateOptions<T>):
   const snapshot = options.apply();
   try {
     await options.persist();
-  } catch (error) {
+  } catch {
     options.rollback(snapshot);
-    console.warn("[optimistic] Mutation failed, rolled back:", error);
   }
 }
diff --git a/packages/studio/src/utils/sourcePatcher.ts b/packages/studio/src/utils/sourcePatcher.ts
index f8ee9d67f9..002f376af5 100644
--- a/packages/studio/src/utils/sourcePatcher.ts
+++ b/packages/studio/src/utils/sourcePatcher.ts
@@ -239,16 +239,6 @@ function execDataAttrPattern(html: string, attr: string, value: string): TagMatc
   const pattern = new RegExp(`(<[^>]*\\b${attr}=(["'])${escapeRegex(value)}\\2[^>]*)>`, "i");
   const match = pattern.exec(html);
   if (match?.index == null) return null;
-  // Defensive: a second exact match means a duplicate id/attr in the source
-  // (id drift). Don't silently patch the first while leaving the other stale —
-  // surface it. By the mint contract this should never fire.
-  const all = html.match(new RegExp(`<[^>]*\\b${attr}=(["'])${escapeRegex(value)}\\1[^>]*>`, "gi"));
-  if (all && all.length > 1) {
-    // eslint-disable-next-line no-console
-    console.warn(
-      `sourcePatcher: ${attr}="${value}" matched ${all.length} elements; patching the first. ids/attrs must be unique per document.`,
-    );
-  }
   return { tag: match[1], start: match.index, end: match.index + match[1].length };
 }