@hyperframes/studio 0.6.88 → 0.6.90

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

@@ -61,6 +61,7 @@ vi.mock("./useDomEditOverlayRects", async () => {
         groupOverlayItems,
         groupOverlayItemsRef,
         setGroupOverlayItems,
+        childRects: [],
       };
     },
   };
@@ -96,7 +97,29 @@ describe("focusDomEditOverlayElement", () => {
 });
 
 describe("DomEditOverlay", () => {
-  it("renders selected bounds right after clicking a movable selection", () => {
+  it("renders selected bounds right after clicking a movable selection", async () => {
+    // The overlay's compRect updates via a RAF loop reading iframe + overlay
+    // getBoundingClientRect. happy-dom returns all zeros for newly-created
+    // elements with no layout, so without stubs the RAF early-returns
+    // (iRect.width <= 0) and compRect.width stays 0 — gating the selection
+    // box (and other bounded UI) behind `compRect.width > 0` (added in the
+    // keyframes PR a468550f). Stub element-level getBoundingClientRect for
+    // the test so the RAF compRect update produces a real width.
+    const originalGetBoundingClientRect = Element.prototype.getBoundingClientRect;
+    Element.prototype.getBoundingClientRect = function (): DOMRect {
+      return {
+        left: 0,
+        top: 0,
+        right: 800,
+        bottom: 450,
+        width: 800,
+        height: 450,
+        x: 0,
+        y: 0,
+        toJSON: () => ({}),
+      };
+    };
+
     const host = document.createElement("div");
     document.body.append(host);
     const root = createRoot(host);
@@ -162,6 +185,15 @@ describe("DomEditOverlay", () => {
       root.render(React.createElement(Harness));
     });
 
+    // Flush the mount's RAF tick so the compRect update lands before the
+    // pointer-down. Two animation-frame ticks: the first scheduled by
+    // useMountEffect's update(), the second by update()'s tail recursion.
+    await act(async () => {
+      await new Promise<void>((resolve) => {
+        requestAnimationFrame(() => requestAnimationFrame(() => resolve()));
+      });
+    });
+
     const overlay = host.querySelector('[aria-label="Composition canvas"]') as HTMLDivElement;
     expect(overlay).toBeTruthy();
 
@@ -183,6 +215,7 @@ describe("DomEditOverlay", () => {
       root.unmount();
     });
     HTMLDivElement.prototype.setPointerCapture = originalPointerCapture;
+    Element.prototype.getBoundingClientRect = originalGetBoundingClientRect;
     host.remove();
   });
 });

package/src/components/editor/FileTree.tsx

@@ -15,7 +15,7 @@ import {
 
 // ── Types ──
 
-export interface FileTreeProps {
+interface FileTreeProps {
   files: string[];
   activeFile: string | null;
   onSelectFile: (path: string) => void;
@@ -26,6 +26,7 @@ export interface FileTreeProps {
   onDuplicateFile?: (path: string) => void;
   onMoveFile?: (oldPath: string, newPath: string) => void;
   onImportFiles?: (files: FileList, dir?: string) => void;
+  lintFindingsByFile?: Map<string, { count: number; messages: string[] }>;
 }
 
 // ── Main FileTree Component ──
@@ -41,6 +42,7 @@ export const FileTree = memo(function FileTree({
   onDuplicateFile,
   onMoveFile,
   onImportFiles,
+  lintFindingsByFile,
 }: FileTreeProps) {
   const tree = useMemo(() => buildTree(files), [files]);
   const children = useMemo(() => sortChildren(tree.children), [tree]);
@@ -283,6 +285,7 @@ export const FileTree = memo(function FileTree({
               onContextMenu={handleContextMenu}
               inlineInput={inlineInput}
               onDragStart={handleDragStart}
+              lintInfo={lintFindingsByFile?.get(child.fullPath)}
             />
           ) : (
             <TreeFolder
@@ -299,6 +302,7 @@ export const FileTree = memo(function FileTree({
               onDrop={handleDrop}
               onDragLeave={handleDragLeave}
               dragOverFolder={dragOverFolder}
+              lintFindingsByFile={lintFindingsByFile}
             />
           ),
         )}

package/src/components/editor/FileTreeNodes.tsx

@@ -18,8 +18,7 @@ import {
   type InlineInputState,
 } from "./FileTreeIcons";
 
-// Re-export for FileTree.tsx consumers
-export type { TreeNode, ContextMenuState, InlineInputState };
+export type { ContextMenuState, InlineInputState };
 export { buildTree, sortChildren, isActiveInSubtree } from "./FileTreeIcons";
 
 const SZ_ICON = 14;
@@ -300,6 +299,7 @@ export const TreeFile = memo(function TreeFile({
   onContextMenu,
   inlineInput,
   onDragStart,
+  lintInfo,
 }: {
   node: TreeNode;
   depth: number;
@@ -308,6 +308,7 @@ export const TreeFile = memo(function TreeFile({
   onContextMenu: (e: React.MouseEvent, path: string, isFolder: boolean) => void;
   inlineInput: InlineInputState | null;
   onDragStart: (e: React.DragEvent, path: string) => void;
+  lintInfo?: { count: number; messages: string[] };
 }) {
   const isActive = node.fullPath === activeFile;
   const isRenaming = inlineInput?.mode === "rename" && inlineInput.originalPath === node.fullPath;
@@ -345,7 +346,15 @@ export const TreeFile = memo(function TreeFile({
       style={{ paddingLeft: `${8 + depth * 12 + 14}px` }}
     >
       <FileIcon path={node.name} />
-      <span className="truncate">{node.name}</span>
+      <span className="truncate flex-1">{node.name}</span>
+      {lintInfo && lintInfo.count > 0 && (
+        <span
+          className="flex-shrink-0 min-w-[16px] rounded-full bg-amber-500/20 px-1 text-[8px] font-bold text-amber-400 text-center mr-1"
+          title={lintInfo.messages.join("\n")}
+        >
+          {lintInfo.count}
+        </span>
+      )}
     </button>
   );
 });
@@ -365,6 +374,7 @@ export const TreeFolder = memo(function TreeFolder({
   onDrop,
   onDragLeave,
   dragOverFolder,
+  lintFindingsByFile,
 }: {
   node: TreeNode;
   depth: number;
@@ -378,6 +388,7 @@ export const TreeFolder = memo(function TreeFolder({
   onDrop: (e: React.DragEvent, folderPath: string) => void;
   onDragLeave: () => void;
   dragOverFolder: string | null;
+  lintFindingsByFile?: Map<string, { count: number; messages: string[] }>;
 }) {
   const [isOpen, setIsOpen] = useState(defaultOpen);
   const toggle = useCallback(() => setIsOpen((v) => !v), []);
@@ -459,6 +470,7 @@ export const TreeFolder = memo(function TreeFolder({
                 onContextMenu={onContextMenu}
                 inlineInput={inlineInput}
                 onDragStart={onDragStart}
+                lintInfo={lintFindingsByFile?.get(child.fullPath)}
               />
             ) : child.children.size > 0 ? (
               <TreeFolder
@@ -475,6 +487,7 @@ export const TreeFolder = memo(function TreeFolder({
                 onDrop={onDrop}
                 onDragLeave={onDragLeave}
                 dragOverFolder={dragOverFolder}
+                lintFindingsByFile={lintFindingsByFile}
               />
             ) : (
               <TreeFile
@@ -486,6 +499,7 @@ export const TreeFolder = memo(function TreeFolder({
                 onContextMenu={onContextMenu}
                 inlineInput={inlineInput}
                 onDragStart={onDragStart}
+                lintInfo={lintFindingsByFile?.get(child.fullPath)}
               />
             ),
           )}

package/src/components/editor/LayersPanel.tsx

@@ -122,13 +122,28 @@ export const LayersPanel = memo(function LayersPanel() {
   }, [compositionLoading, collectLayers]);
 
   const resolveSelection = useCallback(
-    (layer: DomEditLayerItem) =>
-      resolveDomEditSelection(layer.element, {
+    (layer: DomEditLayerItem) => {
+      // Re-find the element from the live DOM — layer.element may be stale
+      // after soft reload (which replaces scripts without reloading the iframe).
+      let el = layer.element;
+      if (!el.isConnected) {
+        const iframe = previewIframeRef.current;
+        const doc = iframe?.contentDocument;
+        if (doc) {
+          const found =
+            (layer.id ? doc.getElementById(layer.id) : null) ??
+            (layer.hfId ? doc.querySelector(`[data-hf-id="${layer.hfId}"]`) : null) ??
+            doc.getElementById(layer.key);
+          if (found instanceof HTMLElement) el = found;
+        }
+      }
+      return resolveDomEditSelection(el, {
         activeCompositionPath: activeCompPath,
         isMasterView,
         preferClipAncestor: false,
-      }),
-    [activeCompPath, isMasterView],
+      });
+    },
+    [activeCompPath, isMasterView, previewIframeRef],
   );
 
   const seekToLayer = useCallback(

package/src/components/editor/PropertyPanel.tsx

@@ -1,4 +1,4 @@
-import { memo, useRef, useState } from "react";
+import { memo, useEffect, useRef, useState } from "react";
 import { Eye, Layers, Move, X } from "../../icons/SystemIcons";
 import { useStudioContext } from "../../contexts/StudioContext";
 import { readStudioBoxSize, readStudioPathOffset, readStudioRotation } from "./manualEdits";
@@ -7,14 +7,17 @@ import {
   formatPxMetricValue,
   parsePxMetricValue,
   RESPONSIVE_GRID,
+  readGsapRuntimeValuesForPanel,
+  readGsapBorderRadiusForPanel,
 } from "./propertyPanelHelpers";
 import { MetricField, Section } from "./propertyPanelPrimitives";
 import { isMediaElement, MediaSection } from "./propertyPanelMediaSection";
 import { TextSection, StyleSections } from "./propertyPanelSections";
 import { GsapAnimationSection } from "./GsapAnimationSection";
+import { PropertyPanel3dTransform } from "./propertyPanel3dTransform";
 import { KeyframeNavigation } from "./KeyframeNavigation";
 import { STUDIO_GSAP_PANEL_ENABLED, STUDIO_KEYFRAMES_ENABLED } from "./manualEditingAvailability";
-import { usePlayerStore } from "../../player";
+import { usePlayerStore, liveTime } from "../../player";
 import { TimingSection } from "./propertyPanelTimingSection";
 import { type PropertyPanelProps } from "./propertyPanelHelpers";
 
@@ -85,7 +88,29 @@ export const PropertyPanel = memo(function PropertyPanel({
   const { showToast } = useStudioContext();
   const [clipboardCopied, setClipboardCopied] = useState(false);
   const clipboardTimerRef = useRef<ReturnType<typeof setTimeout>>(undefined);
-  const currentTime = usePlayerStore((s) => s.currentTime);
+  const storeTime = usePlayerStore((s) => s.currentTime);
+  const isPlaying = usePlayerStore((s) => s.isPlaying);
+  const liveTimeRef = useRef(storeTime);
+  const [, forceRender] = useState(0);
+  useEffect(() => {
+    if (!isPlaying) return;
+    let timerId: ReturnType<typeof setTimeout> | 0 = 0;
+    const unsub = liveTime.subscribe((t) => {
+      liveTimeRef.current = t;
+      if (!timerId)
+        timerId = setTimeout(() => {
+          timerId = 0;
+          forceRender((v) => v + 1);
+        }, 33);
+    });
+    return () => {
+      unsub();
+      if (timerId) clearTimeout(timerId);
+    };
+  }, [isPlaying]);
+  const currentTime = isPlaying ? liveTimeRef.current : storeTime;
+  const cacheElementKey = element?.id ?? element?.selector ?? "";
+  const cacheEntry = usePlayerStore((s) => s.keyframeCache.get(cacheElementKey));
 
   if (!element) {
     return (
@@ -137,7 +162,7 @@ export const PropertyPanel = memo(function PropertyPanel({
   const commitManualOffset = (axis: "x" | "y", nextValue: string) => {
     const parsed = parsePxMetricValue(nextValue);
     if (parsed == null) return;
-    if (onCommitAnimatedProperty && (gsapAnimId || gsapAnimations.length > 0)) {
+    if (onCommitAnimatedProperty && hasGsapAnimation) {
       void onCommitAnimatedProperty(element, axis, parsed);
       return;
     }
@@ -146,6 +171,10 @@ export const PropertyPanel = memo(function PropertyPanel({
       onAddKeyframe(gsapAnimId, pct, axis, parsed);
       return;
     }
+    if (hasGsapAnimation) {
+      showToast?.("Cannot edit position — animation callbacks not available");
+      return;
+    }
     const current = readStudioPathOffset(element.element);
     onSetManualOffset(element, {
       x: axis === "x" ? parsed : current.x,
@@ -157,6 +186,14 @@ export const PropertyPanel = memo(function PropertyPanel({
   const commitManualSize = (axis: "width" | "height", nextValue: string) => {
     const parsed = parsePxMetricValue(nextValue);
     if (parsed == null || parsed <= 0) return;
+    if (onCommitAnimatedProperty && hasGsapAnimation) {
+      void onCommitAnimatedProperty(element, axis, parsed);
+      return;
+    }
+    if (hasGsapAnimation) {
+      showToast?.("Cannot edit size — animation callbacks not available");
+      return;
+    }
     const current = readStudioBoxSize(element.element);
     const width =
       current.width > 0
@@ -183,74 +220,27 @@ export const PropertyPanel = memo(function PropertyPanel({
   const elDuration = Number.parseFloat(element?.dataAttributes?.duration ?? "1") || 0;
   const currentPct = elDuration > 0 ? ((currentTime - elStart) / elDuration) * 100 : 0;
 
-  const gsapKeyframes = gsapAnimations?.find((a) => a.keyframes)?.keyframes?.keyframes ?? null;
-  const gsapAnimId =
-    gsapAnimations?.find((a) => a.keyframes)?.id ?? gsapAnimations?.[0]?.id ?? null;
+  const gsapKfAnim = gsapAnimations?.find((a) => a.keyframes) ?? null;
+  const gsapKeyframes = gsapKfAnim?.keyframes?.keyframes ?? null;
+  const gsapAnimId = gsapKfAnim?.id ?? gsapAnimations?.[0]?.id ?? null;
+  const hasGsapAnimation = !!(gsapAnimId || gsapAnimations.length > 0);
+  const navKeyframes = cacheEntry?.keyframes ?? gsapKeyframes;
+  const seekFromKfPct = (pct: number) => onSeekToTime?.(elStart + (pct / 100) * elDuration);
 
   // Read ALL GSAP-interpolated values at the current seek time.
-  // Discovers animated properties from the animation's keyframes/tween vars.
-  const gsapRuntimeValues: Record<string, number> | null = (() => {
-    if (!gsapAnimId || gsapAnimations.length === 0) return null;
-    const iframe = previewIframeRef?.current;
-    if (!iframe?.contentWindow) return null;
-    const selector = element.id ? `#${element.id}` : element.selector;
-    if (!selector) return null;
-    try {
-      const gsap = (
-        iframe.contentWindow as unknown as {
-          gsap?: { getProperty: (el: Element, prop: string) => number | string };
-        }
-      ).gsap;
-      if (!gsap?.getProperty) return null;
-      const el = iframe.contentDocument?.querySelector(selector);
-      if (!el) return null;
-      const propKeys = new Set<string>();
-      for (const anim of gsapAnimations) {
-        if (anim.keyframes) {
-          for (const kf of anim.keyframes.keyframes) {
-            for (const p of Object.keys(kf.properties)) propKeys.add(p);
-          }
-        }
-        for (const p of Object.keys(anim.properties)) propKeys.add(p);
-      }
-      const result: Record<string, number> = {};
-      for (const prop of propKeys) {
-        const v = Number(gsap.getProperty(el, prop));
-        if (Number.isFinite(v)) result[prop] = Math.round(v * 100) / 100;
-      }
-      return Object.keys(result).length > 0 ? result : null;
-    } catch {
-      return null;
-    }
-  })();
+  const gsapRuntimeValues = readGsapRuntimeValuesForPanel(
+    gsapAnimId,
+    gsapAnimations,
+    element,
+    previewIframeRef ?? { current: null },
+  );
 
-  const gsapBorderRadius: { tl: number; tr: number; br: number; bl: number } | null = (() => {
-    if (!gsapRuntimeValues || !("borderRadius" in gsapRuntimeValues)) {
-      const hasBRProp = gsapAnimations.some(
-        (a) =>
-          "borderRadius" in a.properties ||
-          a.keyframes?.keyframes.some((kf) => "borderRadius" in kf.properties),
-      );
-      if (!hasBRProp) return null;
-    }
-    const iframe = previewIframeRef?.current;
-    const selector = element.id ? `#${element.id}` : element.selector;
-    if (!iframe?.contentDocument || !selector) return null;
-    try {
-      const el = iframe.contentDocument.querySelector(selector);
-      if (!el) return null;
-      const cs = iframe.contentWindow!.getComputedStyle(el);
-      const parse = (v: string) => Number.parseFloat(v) || 0;
-      return {
-        tl: parse(cs.borderTopLeftRadius),
-        tr: parse(cs.borderTopRightRadius),
-        br: parse(cs.borderBottomRightRadius),
-        bl: parse(cs.borderBottomLeftRadius),
-      };
-    } catch {
-      return null;
-    }
-  })();
+  const gsapBorderRadius = readGsapBorderRadiusForPanel(
+    gsapRuntimeValues,
+    gsapAnimations,
+    element,
+    previewIframeRef ?? { current: null },
+  );
 
   const displayX = gsapRuntimeValues?.x ?? manualOffset.x;
   const displayY = gsapRuntimeValues?.y ?? manualOffset.y;
@@ -398,9 +388,9 @@ export const PropertyPanel = memo(function PropertyPanel({
               {STUDIO_KEYFRAMES_ENABLED && gsapAnimId && (
                 <KeyframeNavigation
                   property="x"
-                  keyframes={gsapKeyframes}
+                  keyframes={navKeyframes}
                   currentPercentage={currentPct}
-                  onSeek={(pct) => onSeekToTime?.(elStart + (pct / 100) * elDuration)}
+                  onSeek={seekFromKfPct}
                   onAddKeyframe={() =>
                     onCommitAnimatedProperty &&
                     void onCommitAnimatedProperty(element, "x", displayX)
@@ -423,9 +413,9 @@ export const PropertyPanel = memo(function PropertyPanel({
               {STUDIO_KEYFRAMES_ENABLED && gsapAnimId && (
                 <KeyframeNavigation
                   property="y"
-                  keyframes={gsapKeyframes}
+                  keyframes={navKeyframes}
                   currentPercentage={currentPct}
-                  onSeek={(pct) => onSeekToTime?.(elStart + (pct / 100) * elDuration)}
+                  onSeek={seekFromKfPct}
                   onAddKeyframe={() =>
                     onCommitAnimatedProperty &&
                     void onCommitAnimatedProperty(element, "y", displayY)
@@ -448,9 +438,9 @@ export const PropertyPanel = memo(function PropertyPanel({
               {STUDIO_KEYFRAMES_ENABLED && gsapAnimId && (
                 <KeyframeNavigation
                   property="width"
-                  keyframes={gsapKeyframes}
+                  keyframes={navKeyframes}
                   currentPercentage={currentPct}
-                  onSeek={(pct) => onSeekToTime?.(elStart + (pct / 100) * elDuration)}
+                  onSeek={seekFromKfPct}
                   onAddKeyframe={() =>
                     onCommitAnimatedProperty &&
                     void onCommitAnimatedProperty(element, "width", displayW)
@@ -473,9 +463,9 @@ export const PropertyPanel = memo(function PropertyPanel({
               {STUDIO_KEYFRAMES_ENABLED && gsapAnimId && (
                 <KeyframeNavigation
                   property="height"
-                  keyframes={gsapKeyframes}
+                  keyframes={navKeyframes}
                   currentPercentage={currentPct}
-                  onSeek={(pct) => onSeekToTime?.(elStart + (pct / 100) * elDuration)}
+                  onSeek={seekFromKfPct}
                   onAddKeyframe={() =>
                     onCommitAnimatedProperty &&
                     void onCommitAnimatedProperty(element, "height", displayH)
@@ -496,9 +486,9 @@ export const PropertyPanel = memo(function PropertyPanel({
               {STUDIO_KEYFRAMES_ENABLED && gsapAnimId && (
                 <KeyframeNavigation
                   property="rotation"
-                  keyframes={gsapKeyframes}
+                  keyframes={navKeyframes}
                   currentPercentage={currentPct}
-                  onSeek={(pct) => onSeekToTime?.(elStart + (pct / 100) * elDuration)}
+                  onSeek={seekFromKfPct}
                   onAddKeyframe={() =>
                     onCommitAnimatedProperty &&
                     void onCommitAnimatedProperty(element, "rotation", displayR)
@@ -510,97 +500,19 @@ export const PropertyPanel = memo(function PropertyPanel({
             </div>
           </div>
           {gsapRuntimeValues && (
-            <div className="mt-3 border-t border-neutral-800/40 pt-3">
-              <div className="mb-2 text-[10px] font-medium uppercase tracking-wider text-neutral-600">
-                3D Transform
-              </div>
-              <div className={RESPONSIVE_GRID}>
-                <div className="flex items-center gap-1">
-                  <div className="flex-1">
-                    <MetricField
-                      label="Z"
-                      value={formatPxMetricValue(gsapRuntimeValues.z ?? 0)}
-                      scrub
-                      onCommit={(next) => {
-                        const v = parsePxMetricValue(next);
-                        if (v != null && onCommitAnimatedProperty) {
-                          void onCommitAnimatedProperty(element, "z", v);
-                        }
-                      }}
-                    />
-                  </div>
-                  {STUDIO_KEYFRAMES_ENABLED && (gsapAnimId || onCommitAnimatedProperty) && (
-                    <KeyframeNavigation
-                      property="z"
-                      keyframes={gsapKeyframes}
-                      currentPercentage={currentPct}
-                      onSeek={(pct) => onSeekToTime?.(elStart + (pct / 100) * elDuration)}
-                      onAddKeyframe={() => {
-                        if (onCommitAnimatedProperty) {
-                          void onCommitAnimatedProperty(element, "z", gsapRuntimeValues?.z ?? 0);
-                        }
-                      }}
-                      onRemoveKeyframe={(pct) => gsapAnimId && onRemoveKeyframe?.(gsapAnimId, pct)}
-                      onConvertToKeyframes={() => gsapAnimId && onConvertToKeyframes?.(gsapAnimId)}
-                    />
-                  )}
-                </div>
-                <div className="flex items-center gap-1">
-                  <div className="flex-1">
-                    <MetricField
-                      label="Scale"
-                      value={String(gsapRuntimeValues.scale ?? 1)}
-                      scrub
-                      onCommit={(next) => {
-                        const v = Number.parseFloat(next);
-                        if (Number.isFinite(v) && onCommitAnimatedProperty) {
-                          void onCommitAnimatedProperty(element, "scale", v);
-                        }
-                      }}
-                    />
-                  </div>
-                  {STUDIO_KEYFRAMES_ENABLED && (gsapAnimId || onCommitAnimatedProperty) && (
-                    <KeyframeNavigation
-                      property="scale"
-                      keyframes={gsapKeyframes}
-                      currentPercentage={currentPct}
-                      onSeek={(pct) => onSeekToTime?.(elStart + (pct / 100) * elDuration)}
-                      onAddKeyframe={() => {
-                        if (onCommitAnimatedProperty) {
-                          void onCommitAnimatedProperty(
-                            element,
-                            "scale",
-                            gsapRuntimeValues?.scale ?? 1,
-                          );
-                        }
-                      }}
-                      onRemoveKeyframe={(pct) => gsapAnimId && onRemoveKeyframe?.(gsapAnimId, pct)}
-                      onConvertToKeyframes={() => gsapAnimId && onConvertToKeyframes?.(gsapAnimId)}
-                    />
-                  )}
-                </div>
-                <MetricField
-                  label="RotX"
-                  value={`${gsapRuntimeValues.rotationX ?? 0}°`}
-                  onCommit={(next) => {
-                    const v = Number.parseFloat(next.replace("°", ""));
-                    if (Number.isFinite(v) && onCommitAnimatedProperty) {
-                      void onCommitAnimatedProperty(element, "rotationX", v);
-                    }
-                  }}
-                />
-                <MetricField
-                  label="RotY"
-                  value={`${gsapRuntimeValues.rotationY ?? 0}°`}
-                  onCommit={(next) => {
-                    const v = Number.parseFloat(next.replace("°", ""));
-                    if (Number.isFinite(v) && onCommitAnimatedProperty) {
-                      void onCommitAnimatedProperty(element, "rotationY", v);
-                    }
-                  }}
-                />
-              </div>
-            </div>
+            <PropertyPanel3dTransform
+              gsapRuntimeValues={gsapRuntimeValues}
+              gsapAnimId={gsapAnimId}
+              gsapKeyframes={navKeyframes}
+              currentPct={currentPct}
+              elStart={elStart}
+              elDuration={elDuration}
+              element={element}
+              onCommitAnimatedProperty={onCommitAnimatedProperty}
+              onSeekToTime={onSeekToTime}
+              onRemoveKeyframe={onRemoveKeyframe}
+              onConvertToKeyframes={onConvertToKeyframes}
+            />
           )}
           <div className="mt-3">
             <div className="mb-2 text-[10px] font-medium uppercase tracking-wider text-neutral-600">

package/src/components/editor/domEditOverlayStartGesture.ts

@@ -121,6 +121,7 @@ export function startGesture(
 
   if (kind === "drag") {
     opts.onManualDragStartRef.current?.();
+    opts.rafPausedRef.current = true;
     const result = createManualOffsetDragMember({
       key: selectionCacheKey(sel),
       selection: sel,

package/src/components/editor/gsapAnimatesProperty.ts

@@ -0,0 +1,52 @@
+/**
+ * Checks whether GSAP actively animates one or more CSS/GSAP properties on
+ * the given element by inspecting all registered `__timelines`.
+ */
+export function gsapAnimatesProperty(el: HTMLElement, ...props: string[]): boolean {
+  const win = el.ownerDocument.defaultView as
+    | (Window & {
+        __timelines?: Record<
+          string,
+          {
+            getChildren?: (
+              deep: boolean,
+            ) => Array<{ targets?: () => Element[]; vars?: Record<string, unknown> }>;
+          }
+        >;
+      })
+    | null;
+  if (!win?.__timelines) return false;
+  const propSet = new Set(props);
+  for (const tl of Object.values(win.__timelines)) {
+    if (!tl?.getChildren) continue;
+    try {
+      for (const child of tl.getChildren(true)) {
+        if (!child.targets || !child.vars) continue;
+        let targetsEl = false;
+        for (const t of child.targets()) {
+          if (t === el || (el.id && t.id === el.id)) {
+            targetsEl = true;
+            break;
+          }
+        }
+        if (!targetsEl) continue;
+        const vars = child.vars;
+        for (const p of propSet) {
+          if (p in vars) return true;
+        }
+        if (vars.keyframes && typeof vars.keyframes === "object") {
+          for (const kfVal of Object.values(vars.keyframes as Record<string, unknown>)) {
+            if (kfVal && typeof kfVal === "object") {
+              for (const p of propSet) {
+                if (p in (kfVal as Record<string, unknown>)) return true;
+              }
+            }
+          }
+        }
+      }
+    } catch {
+      /* */
+    }
+  }
+  return false;
+}