@hyperframes/studio 0.7.6 → 0.7.8

package/src/components/editor/OffCanvasIndicators.tsx

@@ -24,7 +24,8 @@ interface OffCanvasIndicatorsProps {
 /**
  * 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.
+ * protruding sliver is dashed — the on-canvas part gets no outline, since a
+ * solid selection-style border on an unselected element reads as "selected".
  * Extracted from DomEditOverlay to keep that file under the 600-LOC cap.
  */
 export function OffCanvasIndicators({
@@ -57,7 +58,6 @@ export function OffCanvasIndicators({
           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;
@@ -98,11 +98,6 @@ export function OffCanvasIndicators({
                   }
                 }}
               />
-              {/* 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>
           );
         })}

package/src/components/editor/PropertyPanel.tsx

@@ -85,10 +85,12 @@ export const PropertyPanel = memo(function PropertyPanel({
   onUpdateArcSegment,
   onUnroll,
   onUpdateKeyframeEase,
+  onSetAllKeyframeEases,
   onAddKeyframe,
   onRemoveKeyframe,
   onConvertToKeyframes,
   onCommitAnimatedProperty,
+  onCommitAnimatedProperties,
   onSeekToTime,
   recordingState,
   recordingDuration,
@@ -347,8 +349,15 @@ export const PropertyPanel = memo(function PropertyPanel({
           onRemoveTextField={onRemoveTextField}
         />
 
-        {element.dataAttributes.start != null && (
-          <TimingSection element={element} onSetAttribute={onSetAttribute} />
+        {(element.dataAttributes.start != null || gsapAnimations.length > 0) && (
+          // Render whenever there's an authored clip range OR animations to infer
+          // one from — a pure-GSAP element with no data-start still gets a Timing
+          // range (TimingSection derives it from its tweens).
+          <TimingSection
+            element={element}
+            animations={gsapAnimations}
+            onSetAttribute={onSetAttribute}
+          />
         )}
         {isMediaElement(element) && (
           <MediaSection
@@ -515,9 +524,20 @@ export const PropertyPanel = memo(function PropertyPanel({
               elDuration={elDuration}
               element={element}
               onCommitAnimatedProperty={onCommitAnimatedProperty}
+              onCommitAnimatedProperties={onCommitAnimatedProperties}
               onSeekToTime={onSeekToTime}
               onRemoveKeyframe={onRemoveKeyframe}
               onConvertToKeyframes={onConvertToKeyframes}
+              onLivePreviewProps={(el, props) => {
+                const iframe = iframeRef.current;
+                const win = iframe?.contentWindow as
+                  | { gsap?: { set: (t: Element, v: Record<string, number>) => void } }
+                  | null
+                  | undefined;
+                const sel = el.id ? `#${el.id}` : el.selector;
+                const node = sel ? iframe?.contentDocument?.querySelector(sel) : null;
+                if (win?.gsap && node) win.gsap.set(node, props);
+              }}
             />
           )}
           <div className="mt-3">
@@ -556,6 +576,7 @@ export const PropertyPanel = memo(function PropertyPanel({
               onUpdateArcSegment={onUpdateArcSegment}
               onUnroll={onUnroll}
               onUpdateKeyframeEase={onUpdateKeyframeEase}
+              onSetAllKeyframeEases={onSetAllKeyframeEases}
             />
           )}
 

package/src/components/editor/Transform3DCube.tsx

@@ -0,0 +1,313 @@
+import { useRef, useState } from "react";
+import { projectAxes, projectCubeFaces, wrapDeg } from "./transform3dProjection";
+
+export interface CubePose {
+  rotationX: number;
+  rotationY: number;
+  rotationZ: number;
+}
+
+const VIEW_W = 132;
+const VIEW_H = 112;
+const CX = VIEW_W / 2;
+const CY = 54;
+const RADIUS = 26;
+// The cube mirrors the element's orientation 1:1 — no decorative viewing camera,
+// so at rotation 0/0/0 it faces front (flat) exactly like the un-rotated element.
+// The X/Y/Z axis gizmo keeps the flat-at-rest state readable.
+const SENSITIVITY = 0.6; // degrees per pixel of drag
+
+/**
+ * Draggable 3D-orientation cube. Drag to tilt (X/Y); Shift-drag to roll (Z).
+ * Presentational only: emits a live draft pose while dragging and a final pose
+ * on release — the parent owns live-previewing and committing to GSAP props.
+ */
+// transformPerspective (px) is inversely related to effect strength, with 0 = off.
+// Map a 0..1 slider strength to px and to the cube's weak-perspective projection.
+const STRONG_PX = 200;
+const WEAK_PX = 1600;
+const PX_RANGE = WEAK_PX - STRONG_PX;
+const strengthToPx = (s: number) => (s <= 0.01 ? 0 : Math.round(WEAK_PX - s * PX_RANGE));
+const pxToStrength = (px: number) =>
+  px <= 0
+    ? 0
+    : Math.max(0, Math.min(1, (WEAK_PX - Math.max(STRONG_PX, Math.min(WEAK_PX, px))) / PX_RANGE));
+const pxToProjPersp = (px: number) => (px > 0 ? Math.max(2.2, Math.min(14, px / 130)) : 14);
+
+/** Horizontal "perspective strength" slider — left = none, right = dramatic. */
+function PerspectiveSlider({
+  value,
+  onDraft,
+  onCommit,
+}: {
+  value: number;
+  onDraft?: (px: number) => void;
+  onCommit: (px: number) => void;
+}) {
+  const trackRef = useRef<HTMLDivElement | null>(null);
+  const draggingRef = useRef(false);
+  const strength = pxToStrength(value);
+  const fromEvent = (clientX: number) => {
+    const r = trackRef.current?.getBoundingClientRect();
+    if (!r || r.width === 0) return 0;
+    return strengthToPx(Math.max(0, Math.min(1, (clientX - r.left) / r.width)));
+  };
+  return (
+    <div className="flex items-center gap-1.5 px-2 pb-1.5 pt-1">
+      <span className="text-[8px] font-medium uppercase tracking-wide text-neutral-600">Persp</span>
+      <div
+        ref={trackRef}
+        onPointerDown={(e) => {
+          e.currentTarget.setPointerCapture(e.pointerId);
+          draggingRef.current = true;
+          onDraft?.(fromEvent(e.clientX));
+        }}
+        onPointerMove={(e) => {
+          if (draggingRef.current) onDraft?.(fromEvent(e.clientX));
+        }}
+        onPointerUp={(e) => {
+          if (!draggingRef.current) return;
+          draggingRef.current = false;
+          onCommit(fromEvent(e.clientX));
+        }}
+        onPointerCancel={() => {
+          draggingRef.current = false;
+        }}
+        className="relative h-3 flex-1 cursor-ew-resize touch-none"
+      >
+        <div className="absolute top-1/2 h-0.5 w-full -translate-y-1/2 rounded-full bg-neutral-700" />
+        <div
+          className="absolute top-1/2 h-0.5 -translate-y-1/2 rounded-full bg-[#5ff0bf]"
+          style={{ width: `${strength * 100}%` }}
+        />
+        <div
+          className="absolute top-1/2 size-2.5 -translate-x-1/2 -translate-y-1/2 rounded-full border border-neutral-900 bg-[#5ff0bf]"
+          style={{ left: `${strength * 100}%` }}
+        />
+      </div>
+    </div>
+  );
+}
+
+export function Transform3DCube({
+  pose,
+  perspective = 0,
+  onPoseDraft,
+  onPoseCommit,
+  onPerspectiveDraft,
+  onPerspectiveCommit,
+  onRecenter,
+  onKeyframe,
+  keyframed,
+}: {
+  pose: CubePose;
+  /** Element's transformPerspective (px); drives the cube's foreshortening. */
+  perspective?: number;
+  /** Fires on every drag move with the in-progress pose (parent live-previews). */
+  onPoseDraft?: (pose: CubePose) => void;
+  /** Fires once on pointer release with the final pose (commit). */
+  onPoseCommit: (pose: CubePose) => void;
+  /** Live + committed perspective (px) from the in-cube slider. */
+  onPerspectiveDraft?: (px: number) => void;
+  onPerspectiveCommit?: (px: number) => void;
+  /** Reset to identity orientation. */
+  onRecenter?: () => void;
+  /** Toggle keyframing the 3D transform (convert the static set → keyframes). */
+  onKeyframe?: () => void;
+  /** Whether the 3D transform is already keyframed (drives the toggle's state). */
+  keyframed?: boolean;
+}) {
+  const [draft, setDraft] = useState<CubePose | null>(null);
+  const dragRef = useRef<{ x: number; y: number; pose: CubePose } | null>(null);
+  const shown = draft ?? pose;
+  const projOpts = {
+    cx: CX,
+    cy: CY,
+    r: RADIUS,
+    persp: pxToProjPersp(perspective),
+  };
+  const faces = projectCubeFaces(shown.rotationX, shown.rotationY, shown.rotationZ, projOpts);
+  const axes = projectAxes(shown.rotationX, shown.rotationY, shown.rotationZ, projOpts);
+
+  const onPointerDown = (e: React.PointerEvent<SVGSVGElement>) => {
+    e.currentTarget.setPointerCapture(e.pointerId);
+    dragRef.current = { x: e.clientX, y: e.clientY, pose: shown };
+    setDraft(shown);
+  };
+
+  const onPointerMove = (e: React.PointerEvent<SVGSVGElement>) => {
+    const d = dragRef.current;
+    if (!d) return;
+    const dx = e.clientX - d.x;
+    const dy = e.clientY - d.y;
+    const next: CubePose = e.shiftKey
+      ? { ...d.pose, rotationZ: wrapDeg(d.pose.rotationZ + dx * SENSITIVITY) }
+      : {
+          rotationX: wrapDeg(d.pose.rotationX - dy * SENSITIVITY),
+          rotationY: wrapDeg(d.pose.rotationY + dx * SENSITIVITY),
+          rotationZ: d.pose.rotationZ,
+        };
+    setDraft(next);
+    onPoseDraft?.(next);
+  };
+
+  const onPointerUp = () => {
+    if (!dragRef.current) return;
+    dragRef.current = null;
+    if (draft) onPoseCommit(draft);
+    setDraft(null);
+  };
+
+  return (
+    <div className="relative overflow-hidden rounded-lg border border-neutral-800 bg-gradient-to-b from-neutral-900 to-neutral-950">
+      <svg
+        viewBox={`0 0 ${VIEW_W} ${VIEW_H}`}
+        className="block w-full cursor-grab touch-none select-none active:cursor-grabbing"
+        style={{ aspectRatio: `${VIEW_W} / ${VIEW_H}` }}
+        onPointerDown={onPointerDown}
+        onPointerMove={onPointerMove}
+        onPointerUp={onPointerUp}
+        onPointerCancel={onPointerUp}
+        role="slider"
+        aria-label="Drag to rotate in 3D; hold Shift to roll"
+        aria-valuetext={`X ${Math.round(shown.rotationX)}°, Y ${Math.round(
+          shown.rotationY,
+        )}°, Z ${Math.round(shown.rotationZ)}°`}
+      >
+        <defs>
+          <radialGradient id="cube3d-bg" cx="50%" cy="40%" r="65%">
+            <stop offset="0%" stopColor="#172220" />
+            <stop offset="100%" stopColor="#070a09" />
+          </radialGradient>
+          {/* Soft halo so the cube floats; SourceGraphic stays crisp on top. */}
+          <filter id="cube3d-glow" x="-40%" y="-40%" width="180%" height="180%">
+            <feGaussianBlur stdDeviation="1.4" result="blur" />
+            <feMerge>
+              <feMergeNode in="blur" />
+              <feMergeNode in="SourceGraphic" />
+            </feMerge>
+          </filter>
+        </defs>
+        <rect x="0" y="0" width={VIEW_W} height={VIEW_H} fill="url(#cube3d-bg)" />
+        {/* Grounding shadow under the cube. */}
+        <ellipse
+          cx={CX}
+          cy={CY + RADIUS + 22}
+          rx={RADIUS * 1.2}
+          ry={6.5}
+          fill="#000"
+          opacity={0.4}
+        />
+        {/* Away-facing axes are drawn behind the cube, dimmed. */}
+        {axes
+          .filter((a) => !a.front)
+          .map((a) => (
+            <line
+              key={a.id}
+              x1={CX}
+              y1={CY}
+              x2={a.x2}
+              y2={a.y2}
+              stroke={a.color}
+              strokeWidth={1.4}
+              strokeLinecap="round"
+              opacity={0.3}
+            />
+          ))}
+        <g filter="url(#cube3d-glow)">
+          {faces.map((f) => (
+            <polygon
+              key={f.id}
+              points={f.points}
+              // Muted teal face, lit by direction; edges are a soft mint that
+              // brightens with how front-facing the face is, so corners read as
+              // crisp bevels instead of flat neon outlines.
+              fill={`hsl(166 44% ${Math.round(17 + f.shade * 37)}%)`}
+              stroke={`hsl(164 72% ${Math.round(56 + f.shade * 22)}%)`}
+              strokeWidth={1.1}
+              strokeOpacity={0.82}
+              strokeLinejoin="round"
+              strokeLinecap="round"
+              paintOrder="stroke"
+            />
+          ))}
+        </g>
+        {/* Toward-facing axes on top, with a tip dot + X/Y/Z label. */}
+        {axes
+          .filter((a) => a.front)
+          .map((a) => (
+            <g key={a.id}>
+              <line
+                x1={CX}
+                y1={CY}
+                x2={a.x2}
+                y2={a.y2}
+                stroke={a.color}
+                strokeWidth={1.6}
+                strokeLinecap="round"
+                opacity={0.95}
+              />
+              <circle cx={a.x2} cy={a.y2} r={2.4} fill={a.color} />
+              <text
+                x={a.x2 + (a.x2 - CX) * 0.12}
+                y={a.y2 + (a.y2 - CY) * 0.12 + 2}
+                fill={a.color}
+                fontSize={7}
+                fontWeight={700}
+                textAnchor="middle"
+              >
+                {a.id.toUpperCase()}
+              </text>
+            </g>
+          ))}
+      </svg>
+      {onRecenter && (
+        <button
+          type="button"
+          onClick={onRecenter}
+          title="Reset 3D orientation"
+          aria-label="Reset 3D orientation"
+          className="absolute right-1.5 top-1.5 rounded p-0.5 text-neutral-500 hover:bg-neutral-800 hover:text-neutral-200"
+        >
+          <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor">
+            <circle cx="12" cy="12" r="9" strokeWidth="2" />
+            <path d="M12 3v18M3 12h18" strokeWidth="1.5" />
+          </svg>
+        </button>
+      )}
+      {onKeyframe && (
+        <button
+          type="button"
+          onClick={onKeyframe}
+          title={
+            keyframed
+              ? "3D transform is keyframed — click a field diamond to add keyframes"
+              : "Keyframe the 3D transform (animate it over time)"
+          }
+          aria-label="Keyframe 3D transform"
+          aria-pressed={keyframed}
+          className={`absolute left-1.5 top-1.5 rounded p-0.5 hover:bg-neutral-800 ${
+            keyframed ? "text-[#5ff0bf]" : "text-neutral-500 hover:text-neutral-200"
+          }`}
+        >
+          <svg
+            width="12"
+            height="12"
+            viewBox="0 0 12 12"
+            fill={keyframed ? "currentColor" : "none"}
+            stroke="currentColor"
+          >
+            <path d="M6 1.5L10.5 6 6 10.5 1.5 6z" strokeWidth="1.4" strokeLinejoin="round" />
+          </svg>
+        </button>
+      )}
+      {onPerspectiveCommit && (
+        <PerspectiveSlider
+          value={perspective}
+          onDraft={onPerspectiveDraft}
+          onCommit={onPerspectiveCommit}
+        />
+      )}
+    </div>
+  );
+}

package/src/components/editor/gsapAnimationCallbacks.ts

@@ -29,6 +29,8 @@ export interface GsapAnimationEditCallbacks {
     update: Partial<ArcPathSegment>,
   ) => void;
   onUpdateKeyframeEase?: (animationId: string, percentage: number, ease: string) => void;
+  /** Apply one ease to every keyframe segment at once (clears per-segment overrides). */
+  onSetAllKeyframeEases?: (animationId: string, ease: string) => void;
   /** Unroll a computed (helper/loop) tween into literal tweens so it edits directly. */
   onUnroll?: (animationId: string) => void;
 }

package/src/components/editor/gsapAnimationConstants.ts

@@ -25,6 +25,7 @@ export const PROP_LABELS: Record<string, string> = {
   rotationY: "Rotate Y",
   rotationZ: "Rotate Z",
   perspective: "Perspective",
+  transformPerspective: "Perspective",
   transformOrigin: "Transform Origin",
   opacity: "Opacity",
   scale: "Scale",
@@ -57,6 +58,7 @@ export const PROP_UNITS: Record<string, string> = {
   rotationY: "°",
   rotationZ: "°",
   perspective: "px",
+  transformPerspective: "px",
   transformOrigin: "",
   opacity: "%",
   scale: "×",
@@ -80,6 +82,8 @@ export const PROP_TOOLTIPS: Record<string, string> = {
   rotationZ: "Rotate around the screen-facing Z axis",
   perspective:
     "3D depth context for child elements; set it on a parent when rotating children in 3D",
+  transformPerspective:
+    "3D depth for THIS element's own X/Y rotation — lower = stronger perspective (try 600–1000)",
   transformOrigin: "Pivot point for transforms, for example center center or 50% 50%",
   width: "Element width",
   height: "Element height",
@@ -88,41 +92,12 @@ export const PROP_TOOLTIPS: Record<string, string> = {
   innerText: "End value for a number roll-up (the number it counts up/down to)",
 };
 
-export const EASE_LABELS: Record<string, string> = {
-  none: "Constant speed",
-  "power1.out": "Gentle slowdown",
-  "power2.out": "Smooth slowdown",
-  "power3.out": "Snappy slowdown",
-  "power4.out": "Sharp slowdown",
-  "power1.in": "Gentle speedup",
-  "power2.in": "Smooth speedup",
-  "power3.in": "Strong speedup",
-  "power4.in": "Sharp speedup",
-  "power1.inOut": "Gentle ease",
-  "power2.inOut": "Smooth ease",
-  "power3.inOut": "Strong ease",
-  "power4.inOut": "Sharp ease",
-  "back.out": "Overshoot & settle",
-  "back.in": "Pull back & go",
-  "back.inOut": "Pull & overshoot",
-  "elastic.out": "Springy bounce",
-  "elastic.in": "Wind up spring",
-  "elastic.inOut": "Full spring",
-  "bounce.out": "Drop & bounce",
-  "bounce.in": "Reverse bounce",
-  "bounce.inOut": "Double bounce",
-  "expo.out": "Very snappy stop",
-  "expo.in": "Very slow start",
-  "expo.inOut": "Dramatic ease",
-  "spring-gentle": "Gentle spring",
-  "spring-bouncy": "Bouncy spring",
-  "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)",
-};
+// Ease labels surface the raw GSAP token (e.g. "power2.out", "back.out") rather
+// than friendly names — motion authors recognize the GSAP vocabulary, and the
+// invented labels ("Smooth speedup") confused users. Every consumer reads
+// `EASE_LABELS[token] ?? token`, so an empty map cleanly falls through to the
+// token; re-add an entry here only to override a specific token's display.
+export const EASE_LABELS: Record<string, string> = {};
 
 export const EASE_CURVES: Record<string, [number, number, number, number]> = {
   none: [0, 0, 1, 1],
@@ -179,6 +154,7 @@ export const PROP_CONSTRAINTS: Record<string, { min?: number; max?: number; step
   rotationY: { step: 1 },
   rotationZ: { step: 1 },
   perspective: { min: 0, step: 1 },
+  transformPerspective: { min: 0, step: 1 },
   skewX: { min: -90, max: 90, step: 1 },
   skewY: { min: -90, max: 90, step: 1 },
   width: { min: 0, step: 1 },

package/src/components/editor/gsapAnimationHelpers.test.ts

@@ -73,7 +73,7 @@ describe("buildTweenSummary", () => {
     expect(s).toContain("[opacity 0%");
     expect(s).toContain("move x -50px");
     expect(s).toContain("opacity to 100%");
-    expect(s).toContain("very snappy stop");
+    expect(s).toContain("expo.out");
   });
 
   it("handles fromTo with empty fromProperties", () => {

package/src/components/editor/marqueeCommit.ts

@@ -3,7 +3,8 @@ 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";
+import { rectsOverlap, type Rect } from "../../utils/marqueeGeometry";
+import { toOverlayRect } from "./domEditOverlayGeometry";
 
 interface MarqueeState {
   startX: number;
@@ -16,13 +17,26 @@ interface MarqueeState {
 
 const MARQUEE_THRESHOLD_PX = 4;
 
+interface MarqueeHit {
+  element: HTMLElement;
+  rect: Rect;
+}
+
+/**
+ * Synchronous core of the marquee: the elements whose overlay-space rect
+ * intersects the marquee rect. Uses the SAME `toOverlayRect` basis as the
+ * single-selection / group-selection boxes, so what the marquee highlights
+ * and selects is exactly the box the user sees when they click an element.
+ * Shared by the live candidate highlight (per pointer-move) and the mouse-up
+ * commit. No async source probe — that only happens once, on commit.
+ */
 // fallow-ignore-next-line complexity
-async function runMarqueeIntersection(
-  rect: { left: number; top: number; width: number; height: number },
+function collectMarqueeHits(
+  rect: Rect,
   iframe: HTMLIFrameElement,
   overlayEl: HTMLDivElement,
   activeCompositionPath: string,
-): Promise<DomEditSelection[]> {
+): MarqueeHit[] {
   const doc = iframe.contentDocument;
   if (!doc) return [];
 
@@ -38,22 +52,42 @@ async function runMarqueeIntersection(
     height: declH > 0 ? declH : rootEl.getBoundingClientRect().height || 1,
   };
 
-  const hits: DomEditSelection[] = [];
+  const hits: MarqueeHit[] = [];
   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, {
+    const overlayRect = toOverlayRect(overlayEl, iframe, el);
+    if (!overlayRect) continue;
+    const r: Rect = {
+      left: overlayRect.left,
+      top: overlayRect.top,
+      width: overlayRect.width,
+      height: overlayRect.height,
+    };
+    if (!rectsOverlap(rect, r)) continue;
+    hits.push({ element: el, rect: r });
+  }
+
+  return hits;
+}
+
+async function runMarqueeIntersection(
+  rect: Rect,
+  iframe: HTMLIFrameElement,
+  overlayEl: HTMLDivElement,
+  activeCompositionPath: string,
+): Promise<DomEditSelection[]> {
+  const isMasterView = !activeCompositionPath || activeCompositionPath === "index.html";
+  const hits: DomEditSelection[] = [];
+  for (const { element } of collectMarqueeHits(rect, iframe, overlayEl, activeCompositionPath)) {
+    const sel = await resolveDomEditSelection(element, {
       activeCompositionPath,
       isMasterView,
       skipSourceProbe: true,
     });
     if (sel) hits.push(sel);
   }
-
   return hits;
 }
 
@@ -75,12 +109,12 @@ interface MarqueeGesturesDeps {
 // 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 [marqueeRect, setMarqueeRect] = useState<Rect | null>(null);
+  // Live "candidate" highlight: the elements the marquee currently touches,
+  // shown before mouse-up so you can see what you're about to select. The
+  // iframe DOM doesn't mutate during a drag, so a sync intersection per move
+  // is cheap (clean layout → no thrash).
+  const [candidateRects, setCandidateRects] = useState<Rect[]>([]);
 
   const commitMarquee = useCallback(
     async (
@@ -111,17 +145,24 @@ export function useMarqueeGestures(deps: MarqueeGesturesDeps) {
           if (Math.hypot(dx, dy) < MARQUEE_THRESHOLD_PX) return;
           m.pastThreshold = true;
         }
-        setMarqueeRect({
+        const rect: Rect = {
           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),
-        });
+        };
+        setMarqueeRect(rect);
+        const iframe = deps.iframeRef.current;
+        const overlay = deps.overlayRef.current;
+        if (iframe && overlay) {
+          const acp = deps.activeCompositionPathRef.current ?? "index.html";
+          setCandidateRects(collectMarqueeHits(rect, iframe, overlay, acp).map((h) => h.rect));
+        }
         return;
       }
       deps.gestures.onPointerMove(event);
     },
-    [deps.gestures, deps.overlayRef],
+    [deps.gestures, deps.overlayRef, deps.iframeRef, deps.activeCompositionPathRef],
   );
 
   const onPointerUp = useCallback(
@@ -148,6 +189,7 @@ export function useMarqueeGestures(deps: MarqueeGesturesDeps) {
           deps.onMarqueeSelectRef.current?.([], false);
         }
         setMarqueeRect(null);
+        setCandidateRects([]);
         return;
       }
       deps.gestures.onPointerUp(event);
@@ -159,10 +201,11 @@ export function useMarqueeGestures(deps: MarqueeGesturesDeps) {
     if (marqueeRef.current) {
       marqueeRef.current = null;
       setMarqueeRect(null);
+      setCandidateRects([]);
       return;
     }
     deps.gestures.clearPointerState(deps.selectionRef);
   }, [deps.gestures, deps.selectionRef]);
 
-  return { marqueeRef, marqueeRect, onPointerMove, onPointerUp, onPointerCancel };
+  return { marqueeRef, marqueeRect, candidateRects, onPointerMove, onPointerUp, onPointerCancel };
 }