@hyperframes/studio 0.7.6 → 0.7.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hyperframes/studio",
-  "version": "0.7.6",
+  "version": "0.7.8",
   "description": "",
   "repository": {
     "type": "git",
@@ -45,9 +45,9 @@
     "dompurify": "^3.2.4",
     "marked": "^14.1.4",
     "mediabunny": "^1.45.3",
-    "@hyperframes/core": "0.7.6",
-    "@hyperframes/sdk": "0.7.6",
-    "@hyperframes/player": "0.7.6"
+    "@hyperframes/player": "0.7.8",
+    "@hyperframes/core": "0.7.8",
+    "@hyperframes/sdk": "0.7.8"
   },
   "devDependencies": {
     "@types/react": "19",
@@ -62,7 +62,7 @@
     "vite": "^6.4.2",
     "vitest": "^3.2.4",
     "zustand": "^5.0.0",
-    "@hyperframes/producer": "0.7.6"
+    "@hyperframes/producer": "0.7.8"
   },
   "peerDependencies": {
     "react": "19",

package/src/components/StudioRightPanel.tsx

@@ -118,10 +118,12 @@ export function StudioRightPanel({
     handleGsapAddFromProperty,
     handleGsapRemoveFromProperty,
     commitAnimatedProperty,
+    commitAnimatedProperties,
     handleSetArcPath,
     handleUpdateArcSegment,
     handleUnroll,
     handleUpdateKeyframeEase,
+    handleSetAllKeyframeEases,
     handleGsapAddKeyframe,
     handleGsapRemoveKeyframe,
     handleGsapConvertToKeyframes,
@@ -268,14 +270,18 @@ export function StudioRightPanel({
       onRemoveGsapFromProperty={handleGsapRemoveFromProperty}
       onAddGsapAnimation={handleGsapAddAnimation}
       onCommitAnimatedProperty={commitAnimatedProperty}
+      onCommitAnimatedProperties={commitAnimatedProperties}
       onAddKeyframe={handleGsapAddKeyframe}
       onRemoveKeyframe={handleGsapRemoveKeyframe}
-      onConvertToKeyframes={handleGsapConvertToKeyframes}
+      onConvertToKeyframes={(animId, duration) =>
+        handleGsapConvertToKeyframes(animId, undefined, duration)
+      }
       onSeekToTime={(t) => usePlayerStore.getState().requestSeek(t)}
       onSetArcPath={handleSetArcPath}
       onUpdateArcSegment={handleUpdateArcSegment}
       onUnroll={handleUnroll}
       onUpdateKeyframeEase={handleUpdateKeyframeEase}
+      onSetAllKeyframeEases={handleSetAllKeyframeEases}
       recordingState={recordingState}
       recordingDuration={recordingDuration}
       onToggleRecording={onToggleRecording}

package/src/components/editor/AnimationCard.tsx

@@ -40,6 +40,7 @@ export const AnimationCard = memo(function AnimationCard({
   onSetArcPath,
   onUpdateArcSegment,
   onUpdateKeyframeEase,
+  onSetAllKeyframeEases,
   onUnroll,
 }: AnimationCardProps) {
   const [expanded, setExpanded] = useState(defaultExpanded);
@@ -249,6 +250,11 @@ export const AnimationCard = memo(function AnimationCard({
                     expandedPct={expandedKfPct}
                     onToggle={setExpandedKfPct}
                     onEaseCommit={(pct, ease) => onUpdateKeyframeEase(animation.id, pct, ease)}
+                    onApplyAll={
+                      onSetAllKeyframeEases
+                        ? (ease) => onSetAllKeyframeEases(animation.id, ease)
+                        : undefined
+                    }
                   />
                 ) : (
                   <>

package/src/components/editor/DomEditOverlay.tsx

@@ -2,6 +2,7 @@ import { memo, useEffect, useMemo, useRef, useState, type RefObject } from "reac
 import { useMountEffect } from "../../hooks/useMountEffect";
 import { type DomEditSelection } from "./domEditing";
 import { useMarqueeGestures } from "./marqueeCommit";
+import { MarqueeOverlay } from "./MarqueeOverlay";
 import { resolveDomEditGroupOverlayRect, toOverlayRect } from "./domEditOverlayGeometry";
 import { collectDomEditLayerItems } from "./domEditingLayers";
 import { isElementComputedVisible } from "./domEditingElement";
@@ -101,6 +102,7 @@ export const DomEditOverlay = memo(function DomEditOverlay({
   const onMarqueeSelectRef = useRef(onMarqueeSelect);
   onMarqueeSelectRef.current = onMarqueeSelect;
 
+  // fallow-ignore-next-line complexity
   const selectionShapeStyles = (() => {
     const fallback = {
       borderRadius: 8 as string | number,
@@ -226,6 +228,7 @@ export const DomEditOverlay = memo(function DomEditOverlay({
   // outside the composition bounds so users can find them.
   const offCanvasElementsRef = useRef<Map<string, HTMLElement>>(new Map());
   const [offCanvasRects, setOffCanvasRects] = useState<OffCanvasRect[]>([]);
+  // fallow-ignore-next-line complexity
   useEffect(() => {
     const iframe = iframeRef.current;
     const overlay = overlayRef.current;
@@ -568,18 +571,7 @@ export const DomEditOverlay = memo(function DomEditOverlay({
         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,
-          }}
-        />
-      )}
+      <MarqueeOverlay candidateRects={marquee.candidateRects} marqueeRect={marquee.marqueeRect} />
       <GridOverlay
         visible={gridVisible}
         spacing={gridSpacing}

package/src/components/editor/EaseCurveSection.tsx

@@ -2,14 +2,16 @@ import { useCallback, useRef, useState } from "react";
 import { EASE_CURVES, EASE_LABELS, parseCustomEaseFromString } from "./gsapAnimationConstants";
 import { roundToCenti } from "../../utils/rounding";
 
+// Figma-canonical ordering: linear, the three core eases, then the expressive
+// (back / snappy) family. Each maps to a GSAP ease so it round-trips cleanly.
 const PRESET_GRID_EASES = [
-  "ae-ease",
-  "ae-ease-in",
-  "ae-ease-out",
   "none",
-  "power2.out",
   "power2.in",
+  "power2.out",
+  "power2.inOut",
+  "back.in",
   "back.out",
+  "back.inOut",
   "expo.out",
 ] as const;
 
@@ -78,6 +80,37 @@ const EasePresetGrid = function EasePresetGrid({
 
 const round2 = roundToCenti;
 
+// ── Graph geometry (Figma-style easing box) ─────────────────────────────────
+// A geometrically-square unit plot ([0,1]×[0,1], equal X/Y scale so the curve
+// isn't distorted), with fixed overshoot headroom above 1 and below 0 for
+// back/elastic eases. The view is fixed (no per-curve zoom); handles are clamped
+// to the visible range so they never drift off-screen.
+const S = 184; // side of the unit (0..1) square, in viewBox units
+const HR = 52; // overshoot headroom (top & bottom)
+const PADH = 16; // horizontal breathing room
+const SVGW = S + PADH * 2;
+const SVGH = S + HR * 2;
+const VMAX = 1 + HR / S; // top of visible view (progress overshoot headroom)
+const VMIN = -HR / S; // bottom of visible view (undershoot headroom)
+// Committed control points may extend PAST the visible view — heavy back/elastic
+// presets reach ~1.55 / -0.55. Dragging clamps to this wider bound (cursor can
+// leave the box via pointer capture) so those curves keep their fidelity instead
+// of snapping to the view edge; the handle DOT is still clampView'd into view.
+const DRAG_VMAX = 2;
+const DRAG_VMIN = -1;
+const ACCENT = "#3CE6AC";
+
+type Pts = [number, number, number, number];
+
+const xToSvg = (px: number) => PADH + S * px;
+const yToSvg = (py: number) => HR + S * (1 - py);
+const clampView = (py: number) => Math.max(VMIN, Math.min(VMAX, py));
+
+function cubicAt(t: number, c0: number, c1: number, c2: number, c3: number): number {
+  const mt = 1 - t;
+  return mt * mt * mt * c0 + 3 * mt * mt * t * c1 + 3 * mt * t * t * c2 + t * t * t * c3;
+}
+
 export function EaseCurveSection({
   ease,
   duration,
@@ -90,25 +123,26 @@ export function EaseCurveSection({
   const isCustom = ease.startsWith("custom(");
   const curveFromPreset = EASE_CURVES[ease];
   const customPoints = isCustom ? parseCustomEaseFromString(ease) : null;
-  const curve: [number, number, number, number] | null =
+  const curve: Pts | null =
     isCustom && customPoints
       ? [customPoints.x1, customPoints.y1, customPoints.x2, customPoints.y2]
       : (curveFromPreset ?? null);
 
-  const [draft, setDraft] = useState<[number, number, number, number] | null>(null);
+  const [draft, setDraft] = useState<Pts | null>(null);
   const [progress, setProgress] = useState<number | null>(null);
+  const [hover, setHover] = useState<"p1" | "p2" | null>(null);
   const draggingRef = useRef<"p1" | "p2" | null>(null);
   const svgRef = useRef<SVGSVGElement | null>(null);
   const rafRef = useRef<number>(0);
 
   const play = useCallback(() => {
     const start = performance.now();
-    const dur = 1000;
+    const dur = 1100;
     const tick = (now: number) => {
       const t = Math.min((now - start) / dur, 1);
       setProgress(t);
       if (t < 1) rafRef.current = requestAnimationFrame(tick);
-      else setTimeout(() => setProgress(null), 400);
+      else setTimeout(() => setProgress(null), 450);
     };
     cancelAnimationFrame(rafRef.current);
     rafRef.current = requestAnimationFrame(tick);
@@ -118,27 +152,23 @@ export function EaseCurveSection({
   if (!active) return null;
   const [x1, y1, x2, y2] = active;
 
-  const w = 200;
-  const h = 100;
-  const pad = 14;
-  const gw = w - pad * 2;
-  const gh = h - pad * 2;
-
-  const toSvg = (px: number, py: number) => ({
-    x: pad + gw * px,
-    y: h - pad - gh * py,
-  });
+  // Anchors + control handles. Handle *display* is clamped to the view so an
+  // extreme loaded overshoot rides the edge instead of disappearing.
+  const a0 = { x: xToSvg(0), y: yToSvg(0) };
+  const a1 = { x: xToSvg(1), y: yToSvg(1) };
+  const p1 = { x: xToSvg(x1), y: yToSvg(clampView(y1)) };
+  const p2 = { x: xToSvg(x2), y: yToSvg(clampView(y2)) };
+  // Curve drawn from the true control points (so its shape is exact).
+  const cp1 = { x: xToSvg(x1), y: yToSvg(y1) };
+  const cp2 = { x: xToSvg(x2), y: yToSvg(y2) };
+  const curvePath = `M${a0.x},${a0.y} C${cp1.x},${cp1.y} ${cp2.x},${cp2.y} ${a1.x},${a1.y}`;
 
-  const curvePath = `M${pad},${h - pad} C${toSvg(x1, y1).x},${toSvg(x1, y1).y} ${toSvg(x2, y2).x},${toSvg(x2, y2).y} ${w - pad},${pad}`;
-
-  let dotX = pad;
-  let dotY = h - pad;
+  let dot: { x: number; y: number } | null = null;
   if (progress !== null) {
-    const t = progress;
-    const mt = 1 - t;
-    dotX = pad + gw * (mt * mt * mt * 0 + 3 * mt * mt * t * x1 + 3 * mt * t * t * x2 + t * t * t);
-    dotY =
-      h - pad - gh * (mt * mt * mt * 0 + 3 * mt * mt * t * y1 + 3 * mt * t * t * y2 + t * t * t);
+    dot = {
+      x: xToSvg(cubicAt(progress, 0, x1, x2, 1)),
+      y: yToSvg(cubicAt(progress, 0, y1, y2, 1)),
+    };
   }
 
   const handlePointerDown = (handle: "p1" | "p2", e: React.PointerEvent) => {
@@ -153,12 +183,16 @@ export function EaseCurveSection({
     if (!draggingRef.current || !svgRef.current) return;
     e.preventDefault();
     const rect = svgRef.current.getBoundingClientRect();
-    const sx = ((e.clientX - rect.left) / rect.width) * w;
-    const sy = ((e.clientY - rect.top) / rect.height) * h;
-    const px = Math.max(0, Math.min(1, (sx - pad) / gw));
-    const py = Math.max(-1, Math.min(2, (h - pad - sy) / gh));
+    const sx = ((e.clientX - rect.left) / rect.width) * SVGW;
+    const sy = ((e.clientY - rect.top) / rect.height) * SVGH;
+    // px is clamped to [0,1] on purpose: a cubic-bezier ease must be monotonic in
+    // time (handle1.x ≤ handle2.x), so handles can't pass each other or invert.
+    const px = Math.max(0, Math.min(1, (sx - PADH) / S));
+    // py uses the WIDER drag bound (not clampView), so dragging keeps overshoot
+    // fidelity instead of pinning the committed value to the visible view edge.
+    const py = Math.max(DRAG_VMIN, Math.min(DRAG_VMAX, 1 - (sy - HR) / S));
     const prev = draft ?? [x1, y1, x2, y2];
-    const next: [number, number, number, number] =
+    const next: Pts =
       draggingRef.current === "p1"
         ? [round2(px), round2(py), prev[2], prev[3]]
         : [prev[0], prev[1], round2(px), round2(py)];
@@ -173,11 +207,12 @@ export function EaseCurveSection({
     setDraft(null);
   };
 
-  const p1 = toSvg(x1, y1);
-  const p2 = toSvg(x2, y2);
-  const start = toSvg(0, 0);
-  const end = toSvg(1, 1);
+  const top = yToSvg(1);
+  const bottom = yToSvg(0);
+  const left = xToSvg(0);
+  const right = xToSvg(1);
   const label = isCustom ? "Custom curve" : (EASE_LABELS[ease] ?? ease);
+  const bezierText = `${x1} · ${y1} · ${x2} · ${y2}`;
 
   return (
     <div className="rounded-lg bg-neutral-900/50 p-2">
@@ -193,98 +228,139 @@ export function EaseCurveSection({
         </button>
       </div>
       <div
-        className="overflow-hidden rounded pt-[72px] -mt-[72px]"
-        style={{ aspectRatio: `${w}/${h}` }}
+        className="mx-auto overflow-hidden rounded-md border border-white/5 bg-black/20"
+        style={{ aspectRatio: `${SVGW} / ${SVGH}`, width: "100%", maxWidth: 230 }}
       >
         <svg
           ref={svgRef}
           width="100%"
           height="100%"
-          viewBox={`0 0 ${w} ${h}`}
+          viewBox={`0 0 ${SVGW} ${SVGH}`}
           preserveAspectRatio="none"
-          style={{ overflow: "visible" }}
           className="touch-none select-none"
           onPointerMove={handlePointerMove}
           onPointerUp={handlePointerUp}
           onPointerCancel={handlePointerUp}
         >
-          <line
-            x1={pad}
-            y1={h - pad}
-            x2={w - pad}
-            y2={h - pad}
+          {/* Grid — quarter lines inside the unit square */}
+          {[0.25, 0.5, 0.75].map((q) => (
+            <line
+              key={`v${q}`}
+              x1={xToSvg(q)}
+              y1={top}
+              x2={xToSvg(q)}
+              y2={bottom}
+              stroke="white"
+              strokeOpacity="0.05"
+              strokeWidth="1"
+            />
+          ))}
+          {[0.25, 0.5, 0.75].map((q) => (
+            <line
+              key={`h${q}`}
+              x1={left}
+              y1={yToSvg(q)}
+              x2={right}
+              y2={yToSvg(q)}
+              stroke="white"
+              strokeOpacity="0.05"
+              strokeWidth="1"
+            />
+          ))}
+          {/* Unit-square frame (progress 0 → 1) */}
+          <rect
+            x={left}
+            y={top}
+            width={S}
+            height={bottom - top}
+            fill="none"
             stroke="white"
-            strokeOpacity="0.06"
-            strokeWidth="0.5"
+            strokeOpacity="0.1"
+            strokeWidth="1"
           />
+          {/* Linear reference diagonal */}
           <line
-            x1={pad}
-            y1={pad}
-            x2={pad}
-            y2={h - pad}
+            x1={a0.x}
+            y1={a0.y}
+            x2={a1.x}
+            y2={a1.y}
             stroke="white"
-            strokeOpacity="0.06"
-            strokeWidth="0.5"
+            strokeOpacity="0.08"
+            strokeWidth="1"
+            strokeDasharray="3 4"
           />
+          {/* Tangent handle lines */}
           <line
-            x1={start.x}
-            y1={start.y}
+            x1={a0.x}
+            y1={a0.y}
             x2={p1.x}
             y2={p1.y}
-            stroke="rgba(52,211,153,0.25)"
-            strokeWidth="1"
+            stroke={ACCENT}
+            strokeOpacity="0.5"
+            strokeWidth="1.5"
           />
           <line
-            x1={end.x}
-            y1={end.y}
+            x1={a1.x}
+            y1={a1.y}
             x2={p2.x}
             y2={p2.y}
-            stroke="rgba(45,212,191,0.25)"
-            strokeWidth="1"
+            stroke={ACCENT}
+            strokeOpacity="0.5"
+            strokeWidth="1.5"
           />
-          <path d={curvePath} fill="none" stroke="#3CE6AC" strokeWidth="2" strokeLinecap="round" />
-          {progress !== null && <circle cx={dotX} cy={dotY} r="4" fill="#3CE6AC" />}
-          <circle
-            cx={p1.x}
-            cy={p1.y}
-            r="5"
-            fill="#0a0a1a"
-            stroke="#3CE6AC"
-            strokeWidth="2"
-            className="cursor-grab active:cursor-grabbing"
-            onPointerDown={(e) => handlePointerDown("p1", e)}
-          />
-          <circle
-            cx={p2.x}
-            cy={p2.y}
-            r="5"
-            fill="#0a0a1a"
-            stroke="#3CE6AC"
-            strokeWidth="2"
-            className="cursor-grab active:cursor-grabbing"
-            onPointerDown={(e) => handlePointerDown("p2", e)}
-          />
-          {duration != null && duration > 0 && (
+          {/* The curve */}
+          <path d={curvePath} fill="none" stroke={ACCENT} strokeWidth="2.5" strokeLinecap="round" />
+          {/* Anchors at (0,0) and (1,1) */}
+          <circle cx={a0.x} cy={a0.y} r="3" fill={ACCENT} />
+          <circle cx={a1.x} cy={a1.y} r="3" fill={ACCENT} />
+          {/* Animated preview dot */}
+          {dot && (
             <>
-              <text x={pad} y={h - 1} textAnchor="start" className="fill-neutral-600 text-[8px]">
-                0s
-              </text>
-              <text
-                x={pad + gw / 2}
-                y={h - 1}
-                textAnchor="middle"
-                className="fill-neutral-600 text-[8px]"
-              >
-                {(duration / 2).toFixed(1)}s
-              </text>
-              <text x={w - pad} y={h - 1} textAnchor="end" className="fill-neutral-600 text-[8px]">
-                {duration}s
-              </text>
+              <circle cx={dot.x} cy={dot.y} r="9" fill={ACCENT} fillOpacity="0.18" />
+              <circle cx={dot.x} cy={dot.y} r="4.5" fill={ACCENT} />
             </>
           )}
+          {/* Draggable control handles (large transparent hit area + visible dot) */}
+          {[["p1", p1] as const, ["p2", p2] as const].map(([key, pt]) => (
+            <g key={key}>
+              <circle
+                cx={pt.x}
+                cy={pt.y}
+                r="14"
+                fill="transparent"
+                className="cursor-grab active:cursor-grabbing"
+                onPointerDown={(e) => handlePointerDown(key, e)}
+                onPointerEnter={() => setHover(key)}
+                onPointerLeave={() => setHover((h) => (h === key ? null : h))}
+              />
+              <circle
+                cx={pt.x}
+                cy={pt.y}
+                r={hover === key || draggingRef.current === key ? 7 : 5.5}
+                fill="#0a0a1a"
+                stroke={ACCENT}
+                strokeWidth="2.5"
+                className="pointer-events-none transition-[r]"
+              />
+            </g>
+          ))}
         </svg>
       </div>
-      <p className="mt-1 text-center text-[10px] text-neutral-500">{label}</p>
+      {/* Axis + value readout */}
+      <div className="mt-1.5 flex items-center justify-between px-0.5 text-[9px] text-neutral-600">
+        <span>{duration != null && duration > 0 ? "0s" : "start"}</span>
+        <span className="tracking-wide text-neutral-500">time →</span>
+        <span>{duration != null && duration > 0 ? `${duration}s` : "end"}</span>
+      </div>
+      <div className="mt-1 flex items-center justify-between px-0.5">
+        <span className="text-[10px] text-neutral-400">{label}</span>
+        <span
+          className="font-mono text-[9px] tracking-tight text-neutral-600"
+          title="cubic-bezier control points"
+        >
+          {bezierText}
+        </span>
+      </div>
     </div>
   );
 }

package/src/components/editor/GsapAnimationSection.tsx

@@ -31,6 +31,7 @@ export const GsapAnimationSection = memo(function GsapAnimationSection({
   onSetArcPath,
   onUpdateArcSegment,
   onUpdateKeyframeEase,
+  onSetAllKeyframeEases,
   onUnroll,
 }: GsapAnimationSectionProps) {
   const [addMenuOpen, setAddMenuOpen] = useState(false);
@@ -70,6 +71,7 @@ export const GsapAnimationSection = memo(function GsapAnimationSection({
               onSetArcPath={onSetArcPath}
               onUpdateArcSegment={onUpdateArcSegment}
               onUpdateKeyframeEase={onUpdateKeyframeEase}
+              onSetAllKeyframeEases={onSetAllKeyframeEases}
               onUnroll={onUnroll}
             />
           ))}

package/src/components/editor/KeyframeEaseList.tsx

@@ -2,24 +2,88 @@ import type { GsapPercentageKeyframe } from "@hyperframes/core/gsap-parser";
 import { EASE_LABELS } from "./gsapAnimationConstants";
 import { EaseCurveSection } from "./EaseCurveSection";
 
+// The full GSAP easing vocabulary offered by the "Set all…" bulk control —
+// every standard family in in/out/inOut, so authors aren't limited to a curated
+// few. All are valid GSAP runtime eases; the non-cubic families (sine/circ/
+// elastic/bounce) approximate in the per-segment curve preview.
+const APPLY_ALL_EASES = [
+  "none",
+  "power1.in",
+  "power1.out",
+  "power1.inOut",
+  "power2.in",
+  "power2.out",
+  "power2.inOut",
+  "power3.in",
+  "power3.out",
+  "power3.inOut",
+  "power4.in",
+  "power4.out",
+  "power4.inOut",
+  "sine.in",
+  "sine.out",
+  "sine.inOut",
+  "expo.in",
+  "expo.out",
+  "expo.inOut",
+  "circ.in",
+  "circ.out",
+  "circ.inOut",
+  "back.in",
+  "back.out",
+  "back.inOut",
+  "elastic.in",
+  "elastic.out",
+  "elastic.inOut",
+  "bounce.in",
+  "bounce.out",
+  "bounce.inOut",
+] as const;
+
 export function KeyframeEaseList({
   keyframes,
   globalEase,
   expandedPct,
   onToggle,
   onEaseCommit,
+  onApplyAll,
 }: {
   keyframes: GsapPercentageKeyframe[];
   globalEase: string;
   expandedPct: number | null;
   onToggle: (pct: number | null) => void;
   onEaseCommit: (pct: number, ease: string) => void;
+  /** Apply one ease to every segment at once (clears per-segment overrides). */
+  onApplyAll?: (ease: string) => void;
 }) {
   return (
     <div className="space-y-1">
-      <p className="text-[9px] font-semibold uppercase tracking-wider text-neutral-500">
-        Per-keyframe easing
-      </p>
+      <div className="flex items-center gap-2">
+        <p className="text-[9px] font-semibold uppercase tracking-wider text-neutral-500">
+          Per-keyframe easing
+        </p>
+        {onApplyAll && (
+          <select
+            aria-label="Apply one ease to all segments"
+            title="Apply one ease to every segment (clears per-segment overrides)"
+            value=""
+            onChange={(e) => {
+              const next = e.target.value;
+              if (next) onApplyAll(next);
+            }}
+            className="ml-auto cursor-pointer rounded bg-neutral-800 px-1.5 py-0.5 text-[9px] text-neutral-300 outline-none hover:bg-neutral-700 focus:ring-1 focus:ring-panel-accent/40"
+          >
+            <option value="" disabled>
+              Set all…
+            </option>
+            {APPLY_ALL_EASES.map((name) => (
+              <option key={name} value={name}>
+                {EASE_LABELS[name] ?? name}
+              </option>
+            ))}
+          </select>
+        )}
+      </div>
       {keyframes.map((kf, i) => {
         if (i === 0) return null;
         const segEase = kf.ease ?? globalEase;

package/src/components/editor/MarqueeOverlay.tsx

@@ -0,0 +1,40 @@
+import type { Rect } from "../../utils/marqueeGeometry";
+
+interface MarqueeOverlayProps {
+  /** Elements the marquee currently intersects — outlined live before mouse-up. */
+  candidateRects: Rect[];
+  /** The marquee drag rectangle itself, or null when not marquee-selecting. */
+  marqueeRect: Rect | null;
+}
+
+/**
+ * The marquee selection visuals: a live "candidate" outline on each element the
+ * box currently touches, plus the dashed drag rectangle. Extracted from
+ * DomEditOverlay to keep that file under the 600-line cap.
+ */
+export function MarqueeOverlay({ candidateRects, marqueeRect }: MarqueeOverlayProps) {
+  return (
+    <>
+      {candidateRects.map((r, i) => (
+        <div
+          key={i}
+          aria-hidden="true"
+          className="pointer-events-none absolute rounded-sm border border-studio-accent bg-studio-accent/5"
+          style={{ left: r.left, top: r.top, width: r.width, height: r.height }}
+        />
+      ))}
+      {marqueeRect && (
+        <div
+          aria-hidden="true"
+          className="pointer-events-none absolute border border-dashed border-studio-accent bg-studio-accent/10"
+          style={{
+            left: marqueeRect.left,
+            top: marqueeRect.top,
+            width: marqueeRect.width,
+            height: marqueeRect.height,
+          }}
+        />
+      )}
+    </>
+  );
+}