@hyperframes/studio 0.7.5 → 0.7.6

package/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>
+          );
+        })}
+    </>
+  );
+}

package/src/components/editor/PropertyPanel.tsx

@@ -84,6 +84,7 @@ export const PropertyPanel = memo(function PropertyPanel({
   onSetArcPath,
   onUpdateArcSegment,
   onUnroll,
+  onUpdateKeyframeEase,
   onAddKeyframe,
   onRemoveKeyframe,
   onConvertToKeyframes,
@@ -233,6 +234,55 @@ export const PropertyPanel = memo(function PropertyPanel({
   const displayH = gsapRuntimeValues?.height ?? resolvedHeight;
   const displayR = gsapRuntimeValues?.rotation ?? manualRotation.angle;
 
+  // fallow-ignore-next-line complexity
+  const handleCopyElementInfo = () => {
+    const file = element.sourceFile ?? "index.html";
+    let lineNum: number | null = null;
+    try {
+      const src = previewIframeRef?.current?.contentDocument?.documentElement?.outerHTML ?? "";
+      if (src && element.id) {
+        const idx = src.indexOf(`id="${element.id}"`);
+        if (idx > -1) lineNum = src.slice(0, idx).split("\n").length;
+      }
+      if (!lineNum && element.selector) {
+        const tag = element.tagName.toLowerCase();
+        const cls = element.selector.startsWith(".")
+          ? element.selector.slice(1).split(".")[0]
+          : null;
+        const search = cls ? `class="${cls}` : `<${tag}`;
+        const idx = src.indexOf(search);
+        if (idx > -1) lineNum = src.slice(0, idx).split("\n").length;
+      }
+    } catch {}
+    const fileLoc = lineNum ? `${file}:${lineNum}` : file;
+    const lines = [
+      `Element: ${element.label} (${sourceLabel})`,
+      `File: ${fileLoc}`,
+      `Position: x=${Math.round(element.boundingBox.x)}, y=${Math.round(element.boundingBox.y)}`,
+      `Size: ${Math.round(element.boundingBox.width)}×${Math.round(element.boundingBox.height)}`,
+      `Tag: <${element.tagName}>`,
+    ];
+    if (element.computedStyles["z-index"] && element.computedStyles["z-index"] !== "auto") {
+      lines.push(`Z-index: ${element.computedStyles["z-index"]}`);
+    }
+    if (gsapAnimations.length > 0) {
+      const anim = gsapAnimations[0];
+      lines.push(
+        `Animation: ${anim.method}() ${anim.duration}s at ${anim.position}s, ease: ${anim.ease ?? "default"}`,
+      );
+      const props = Object.entries(anim.properties)
+        .map(([k, v]) => `${k}: ${v}`)
+        .join(", ");
+      if (props) lines.push(`Properties: ${props}`);
+    }
+    const text = lines.join("\n");
+    void navigator.clipboard.writeText(text);
+    showToast(`Copied element info for ${element.label} — paste into any AI agent`, "info");
+    setClipboardCopied(true);
+    clearTimeout(clipboardTimerRef.current);
+    clipboardTimerRef.current = setTimeout(() => setClipboardCopied(false), 1500);
+  };
+
   return (
     <div className="flex h-full min-h-0 flex-col overflow-hidden bg-panel-bg text-panel-text-1">
       <div className="px-4 py-3">
@@ -246,60 +296,7 @@ export const PropertyPanel = memo(function PropertyPanel({
           <div className="flex items-center gap-1">
             <button
               type="button"
-              onClick={() => {
-                const file = element.sourceFile ?? "index.html";
-                let lineNum: number | null = null;
-                try {
-                  const src =
-                    previewIframeRef?.current?.contentDocument?.documentElement?.outerHTML ?? "";
-                  if (src && element.id) {
-                    const idx = src.indexOf(`id="${element.id}"`);
-                    if (idx > -1) lineNum = src.slice(0, idx).split("\n").length;
-                  }
-                  if (!lineNum && element.selector) {
-                    const tag = element.tagName.toLowerCase();
-                    const cls = element.selector.startsWith(".")
-                      ? element.selector.slice(1).split(".")[0]
-                      : null;
-                    const search = cls ? `class="${cls}` : `<${tag}`;
-                    const idx = src.indexOf(search);
-                    if (idx > -1) lineNum = src.slice(0, idx).split("\n").length;
-                  }
-                } catch {}
-                const fileLoc = lineNum ? `${file}:${lineNum}` : file;
-                const lines = [
-                  `Element: ${element.label} (${sourceLabel})`,
-                  `File: ${fileLoc}`,
-                  `Position: x=${Math.round(element.boundingBox.x)}, y=${Math.round(element.boundingBox.y)}`,
-                  `Size: ${Math.round(element.boundingBox.width)}×${Math.round(element.boundingBox.height)}`,
-                  `Tag: <${element.tagName}>`,
-                ];
-                if (
-                  element.computedStyles["z-index"] &&
-                  element.computedStyles["z-index"] !== "auto"
-                ) {
-                  lines.push(`Z-index: ${element.computedStyles["z-index"]}`);
-                }
-                if (gsapAnimations.length > 0) {
-                  const anim = gsapAnimations[0];
-                  lines.push(
-                    `Animation: ${anim.method}() ${anim.duration}s at ${anim.position}s, ease: ${anim.ease ?? "default"}`,
-                  );
-                  const props = Object.entries(anim.properties)
-                    .map(([k, v]) => `${k}: ${v}`)
-                    .join(", ");
-                  if (props) lines.push(`Properties: ${props}`);
-                }
-                const text = lines.join("\n");
-                void navigator.clipboard.writeText(text);
-                showToast(
-                  `Copied element info for ${element.label} — paste into any AI agent`,
-                  "info",
-                );
-                setClipboardCopied(true);
-                clearTimeout(clipboardTimerRef.current);
-                clipboardTimerRef.current = setTimeout(() => setClipboardCopied(false), 1500);
-              }}
+              onClick={handleCopyElementInfo}
               className={`flex h-6 w-6 items-center justify-center rounded transition-colors ${
                 clipboardCopied
                   ? "text-studio-accent"
@@ -558,6 +555,7 @@ export const PropertyPanel = memo(function PropertyPanel({
               onSetArcPath={onSetArcPath}
               onUpdateArcSegment={onUpdateArcSegment}
               onUnroll={onUnroll}
+              onUpdateKeyframeEase={onUpdateKeyframeEase}
             />
           )}
 

package/src/components/editor/gsapAnimationCallbacks.ts

@@ -28,6 +28,7 @@ export interface GsapAnimationEditCallbacks {
     segmentIndex: number,
     update: Partial<ArcPathSegment>,
   ) => void;
+  onUpdateKeyframeEase?: (animationId: string, percentage: number, 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

@@ -119,6 +119,9 @@ export const EASE_LABELS: Record<string, string> = {
   "spring-stiff": "Stiff spring",
   "spring-wobbly": "Wobbly spring",
   "spring-heavy": "Heavy spring",
+  "ae-ease": "Easy Ease (AE)",
+  "ae-ease-in": "Easy Ease In (AE)",
+  "ae-ease-out": "Easy Ease Out (AE)",
 };
 
 export const EASE_CURVES: Record<string, [number, number, number, number]> = {
@@ -141,6 +144,11 @@ export const EASE_CURVES: Record<string, [number, number, number, number]> = {
   "expo.out": [0.16, 1, 0.3, 1],
   "expo.in": [0.7, 0, 0.84, 0],
   "expo.inOut": [0.87, 0, 0.13, 1],
+  // After Effects polarity: "in" eases into the keyframe (slow END, CP2 y=1),
+  // "out" eases out of it (slow START, CP1 y=0). Matches the "(AE)" labels.
+  "ae-ease": [0.333, 0, 0.667, 1],
+  "ae-ease-in": [0.333, 0.333, 0.667, 1],
+  "ae-ease-out": [0.333, 0, 0.667, 0.667],
 };
 
 export function parseCustomEaseFromString(ease: string): {

package/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);
   }
 }

package/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 };
+}

package/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,

package/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 };

package/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: [] };
   }
 }

package/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,
     ],
   );
 

package/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);

package/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

package/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.

package/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;

package/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;
       }

package/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,