fix(studio): make canvas selection hit intended elements (#1907)

* test(studio): add design-panel QA fixture and triage matrix

Fixture project covering all panel-editable element archetypes,
plus the QA findings matrix from the design-panel bug campaign.

* fix(studio): make canvas selection hit intended elements

- honor author pointer-events:none in hit-testing (was selecting invisible overlays)
- pause playback before mousedown sampling; fall back to hover selection on null resolve
- invalidate committed selection when the active composition changes
- double-click keeps selection and defers to multi-candidate click cycling

* fix(studio): close remaining selection-layer review findings

- hoverSelection fallback now wired at all 3 mousedown call sites (box-click,
  blocked-drag, plain overlay click) instead of just the overlay path
- pointer-events override detection reads computed style, not inline style,
  so a CSS-class opt-in (not just inline style=) on a descendant is honored
- defensively remove the pointer-events override before the group-fallback
  check too, closing a theoretical gap in the no-elementsFromPoint branch
- a click that resolves to nothing (dead-zone / deselect) no longer leaves
  playback paused if it was already playing

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

@@ -1,6 +1,7 @@
 import { memo, useEffect, useMemo, useRef, useState, type RefObject } from "react";
 import { useMountEffect } from "../../hooks/useMountEffect";
 import { type DomEditSelection } from "./domEditing";
+import type { PreviewMouseDownOptions } from "../../hooks/usePreviewInteraction";
 import { useMarqueeGestures } from "./marqueeCommit";
 import { MarqueeOverlay } from "./MarqueeOverlay";
 import { groupAwareOverlayRect, resolveDomEditGroupOverlayRect } from "./domEditOverlayGeometry";
@@ -44,7 +45,7 @@ interface DomEditOverlayProps {
   allowCanvasMovement?: boolean;
   onCanvasMouseDown: (
     event: React.MouseEvent<HTMLDivElement>,
-    options?: { preferClipAncestor?: boolean },
+    options?: PreviewMouseDownOptions,
   ) => void;
   onCanvasPointerMove: (
     event: React.PointerEvent<HTMLDivElement>,
@@ -277,6 +278,7 @@ export const DomEditOverlay = memo(function DomEditOverlay({
     iframeRef,
     boxRef,
     selectionRef,
+    hoverSelectionRef,
     overlayRectRef,
     groupOverlayItemsRef,
     gestureRef,
@@ -336,7 +338,7 @@ export const DomEditOverlay = memo(function DomEditOverlay({
     // 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 });
+    onCanvasMouseDown(event, { hoverSelection: hoverSelectionRef.current });
     if (event.shiftKey) {
       suppressNextBoxMouseDownRef.current = true;
       suppressNextBoxClickRef.current = true;
@@ -401,7 +403,7 @@ export const DomEditOverlay = memo(function DomEditOverlay({
       event.stopPropagation();
       return;
     }
-    onCanvasMouseDown(event, { preferClipAncestor: false });
+    onCanvasMouseDown(event, { hoverSelection: hoverSelectionRef.current });
   };
 
   const suppressBoxMouseDown = (e: React.MouseEvent) => {