@hyperframes/studio 0.7.15 → 0.7.16

package/src/hooks/useGsapTweenCache.ts

@@ -1,6 +1,5 @@
 import { useEffect, useMemo, useRef, useState, useCallback } from "react";
 import type { GsapAnimation, GsapKeyframesData, ParsedGsap } from "@hyperframes/core/gsap-parser";
-import type { GsapPercentageKeyframe } from "@hyperframes/core/gsap-parser";
 import { isStudioHoldSet } from "@hyperframes/core/gsap-parser";
 import { usePlayerStore } from "../player/store/playerStore";
 import { readRuntimeKeyframes, scanAllRuntimeKeyframes } from "./gsapRuntimeBridge";
@@ -8,63 +7,8 @@ import {
   clearKeyframeCacheForElement,
   clearKeyframeCacheForFile,
 } from "./gsapKeyframeCacheHelpers";
-import { PROPERTY_DEFAULTS, toAbsoluteTime } from "./gsapShared";
-
-function deduplicateKeyframes(keyframes: GsapPercentageKeyframe[]): GsapPercentageKeyframe[] {
-  const byPct = new Map<number, GsapPercentageKeyframe>();
-  for (const kf of keyframes) {
-    const existing = byPct.get(kf.percentage);
-    if (existing) {
-      existing.properties = { ...existing.properties, ...kf.properties };
-      if (kf.ease) existing.ease = kf.ease;
-    } else {
-      byPct.set(kf.percentage, { ...kf, properties: { ...kf.properties } });
-    }
-  }
-  return Array.from(byPct.values()).sort((a, b) => a.percentage - b.percentage);
-}
-
-// fallow-ignore-next-line complexity
-function synthesizeFlatTweenKeyframes(anim: GsapAnimation): GsapKeyframesData | null {
-  if (anim.method === "set") {
-    // A `set` is a STATIC HOLD — a value applied at one point, not an animated
-    // keyframe. It must NOT synthesize a keyframe, or the timeline + panel show a
-    // phantom diamond for a value that doesn't animate. This holds for a base
-    // `gsap.set` (off-timeline) AND an on-timeline `tl.set`, and aligns the AST
-    // path with the runtime scan, which already skips every zero-duration set.
-    return null;
-  }
-  const toProps = anim.properties;
-  const fromProps = anim.fromProperties;
-  if (!toProps || Object.keys(toProps).length === 0) return null;
-
-  const startProps: Record<string, number | string> = {};
-  const endProps: Record<string, number | string> = {};
-
-  if (anim.method === "from") {
-    for (const [k, v] of Object.entries(toProps)) {
-      startProps[k] = v;
-      endProps[k] = PROPERTY_DEFAULTS[k] ?? 0;
-    }
-  } else if (anim.method === "fromTo" && fromProps) {
-    Object.assign(startProps, fromProps);
-    Object.assign(endProps, toProps);
-  } else {
-    for (const [k, v] of Object.entries(toProps)) {
-      startProps[k] = PROPERTY_DEFAULTS[k] ?? 0;
-      endProps[k] = v;
-    }
-  }
-
-  return {
-    format: "percentage",
-    keyframes: [
-      { percentage: 0, properties: startProps },
-      { percentage: 100, properties: endProps },
-    ],
-    ...(anim.ease ? { ease: anim.ease } : {}),
-  };
-}
+import { toAbsoluteTime } from "./gsapShared";
+import { deduplicateKeyframes, synthesizeFlatTweenKeyframes } from "./gsapTweenSynth";
 
 function extractIdFromSelector(selector: string): string | null {
   const match = selector.match(/^#([\w-]+)/);
@@ -176,6 +120,37 @@ export async function fetchParsedAnimations(
   }
 }
 
+/**
+ * Clip-relative timing basis for an element. Sub-composition internals (e.g. pills
+ * inside a scene) aren't timeline clips themselves — they're derived at expand time
+ * — so they're absent from `elements`. Without a basis, elDuration defaulted to 1
+ * and clip-relative keyframe percentages blew past 100% (rendering off the clip).
+ * Fall back to the sub-comp HOST's bounds, resolved via domClipChildren (the host's
+ * data-composition-src is stripped in the rendered DOM, so we can't query it).
+ */
+function resolveClipTimingBasis(
+  elementId: string,
+  sourceFile: string,
+  elements: ReadonlyArray<{
+    domId?: string;
+    key?: string;
+    id: string;
+    start: number;
+    duration: number;
+  }>,
+  domClipChildren: ReadonlyArray<{ id: string; hostId: string }>,
+): { elStart: number; elDuration: number } {
+  const direct = elements.find(
+    (el) => el.domId === elementId || (el.key ?? el.id) === `${sourceFile}#${elementId}`,
+  );
+  if (direct) return { elStart: direct.start, elDuration: direct.duration };
+  const hostId = domClipChildren.find((c) => c.id === elementId)?.hostId;
+  const host = hostId
+    ? elements.find((el) => el.domId === hostId || (el.key ?? el.id) === `index.html#${hostId}`)
+    : undefined;
+  return { elStart: host?.start ?? 0, elDuration: host?.duration ?? 1 };
+}
+
 export function useGsapAnimationsForElement(
   projectId: string | null,
   sourceFile: string,
@@ -192,6 +167,11 @@ export function useGsapAnimationsForElement(
   const [unsupportedTimelinePattern, setUnsupportedTimelinePattern] = useState(false);
   const lastFetchKeyRef = useRef("");
   const retryTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  // Re-run the per-element cache populate when sub-comp DOM children appear, so a
+  // sub-comp element gets its host-relative keyframe percentages (not elDuration=1).
+  const domClipChildrenKey = usePlayerStore((s) =>
+    s.domClipChildren.map((c) => `${c.id}<${c.hostId}`).join("|"),
+  );
 
   useEffect(() => {
     const targetKey = target?.id ?? target?.selector ?? "";
@@ -351,12 +331,13 @@ export function useGsapAnimationsForElement(
 
     // Resolve the element's time range from the player store so we can
     // convert tween-relative keyframe percentages to clip-relative ones.
-    const { elements } = usePlayerStore.getState();
-    const timelineEl = elements.find(
-      (el) => el.domId === elementId || (el.key ?? el.id) === `${sourceFile}#${elementId}`,
+    const { elements, domClipChildren } = usePlayerStore.getState();
+    const { elStart, elDuration } = resolveClipTimingBasis(
+      elementId,
+      sourceFile,
+      elements,
+      domClipChildren,
     );
-    const elStart = timelineEl?.start ?? 0;
-    const elDuration = timelineEl?.duration ?? 1;
 
     const allKeyframes: Array<
       GsapKeyframesData["keyframes"][0] & { tweenPercentage?: number; propertyGroup?: string }
@@ -419,7 +400,8 @@ export function useGsapAnimationsForElement(
     // PropertyPanel reads the cache by bare elementId (without sourceFile prefix),
     // so write a duplicate entry under the bare key for cross-component lookups.
     setKeyframeCache(elementId, merged);
-  }, [elementId, sourceFile, animations]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [elementId, sourceFile, animations, domClipChildrenKey]);
 
   return { animations, multipleTimelines, unsupportedTimelinePattern };
 }
@@ -442,13 +424,19 @@ export function usePopulateKeyframeCacheForFile(
   iframeRef?: React.RefObject<HTMLIFrameElement | null>,
 ): void {
   const elementCount = usePlayerStore((s) => s.elements.length);
+  // Re-run when sub-comp DOM children appear (they supply the host bounds the
+  // clip-relative keyframe percentages are computed against; without this the
+  // cache is computed once before they exist and the percentages stay wrong).
+  const domClipChildrenKey = usePlayerStore((s) =>
+    s.domClipChildren.map((c) => `${c.id}<${c.hostId}`).join("|"),
+  );
   const lastFetchKeyRef = useRef("");
 
   const runtimeScanDoneRef = useRef("");
   const astFetchDoneRef = useRef("");
 
   useEffect(() => {
-    const fetchKey = `kf-cache:${projectId}:${sourceFile}:${version}:${elementCount}`;
+    const fetchKey = `kf-cache:${projectId}:${sourceFile}:${version}:${elementCount}:${domClipChildrenKey}`;
     if (fetchKey === lastFetchKeyRef.current) return;
     lastFetchKeyRef.current = fetchKey;
     runtimeScanDoneRef.current = "";
@@ -461,7 +449,7 @@ export function usePopulateKeyframeCacheForFile(
       if (!parsed) return;
       const { setKeyframeCache } = usePlayerStore.getState();
       clearKeyframeCacheForFile(sf);
-      const { elements } = usePlayerStore.getState();
+      const { elements, domClipChildren } = usePlayerStore.getState();
       const doc = iframeRef?.current?.contentDocument;
       const mergedByElement = new Map<string, GsapKeyframesData>();
       for (const anim of parsed.animations) {
@@ -482,11 +470,7 @@ export function usePopulateKeyframeCacheForFile(
         // Attribute the tween to every element it animates (handles class /
         // group / descendant selectors, not just `#id`).
         for (const id of resolveSelectorElementIds(anim.targetSelector, doc)) {
-          const timelineEl = elements.find(
-            (el) => el.domId === id || (el.key ?? el.id) === `${sf}#${id}`,
-          );
-          const elStart = timelineEl?.start ?? 0;
-          const elDuration = timelineEl?.duration ?? 1;
+          const { elStart, elDuration } = resolveClipTimingBasis(id, sf, elements, domClipChildren);
           const clipKeyframes = kfData.keyframes.map((kf) => {
             const absTime = toAbsoluteTime(tweenPos, tweenDur, kf.percentage);
             // 0.001% precision (matching useGsapAnimationsForElement above) so a
@@ -524,7 +508,7 @@ export function usePopulateKeyframeCacheForFile(
     // iframeRef is read for DOM selector resolution but intentionally not a dep
     // (it's a stable ref; the separate runtime-scan effect owns iframe timing).
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [projectId, sourceFile, version, elementCount]);
+  }, [projectId, sourceFile, version, elementCount, domClipChildrenKey]);
 
   // Separate effect for runtime keyframe discovery — polls until the iframe
   // has loaded GSAP timelines, independent of the AST fetch lifecycle.

package/src/hooks/usePreviewInteraction.ts

@@ -3,6 +3,7 @@ import { liveTime, usePlayerStore } from "../player";
 import { pauseStudioPreviewPlayback } from "../utils/studioPreviewHelpers";
 import { STUDIO_PREVIEW_SELECTION_ENABLED } from "../components/editor/manualEditingAvailability";
 import { type DomEditSelection } from "../components/editor/domEditing";
+import { trackStudioEvent } from "../utils/studioTelemetry";
 
 // ── Types ──
 
@@ -20,13 +21,19 @@ export interface UsePreviewInteractionParams {
   resolveDomSelectionFromPreviewPoint: (
     clientX: number,
     clientY: number,
-    options?: { preferClipAncestor?: boolean; skipSourceProbe?: boolean },
+    options?: {
+      preferClipAncestor?: boolean;
+      skipSourceProbe?: boolean;
+      activeGroupElement?: HTMLElement | null;
+    },
   ) => Promise<DomEditSelection | null>;
   resolveAllDomSelectionsFromPreviewPoint: (
     clientX: number,
     clientY: number,
   ) => Promise<DomEditSelection[]>;
   updateDomEditHoverSelection: (selection: DomEditSelection | null) => void;
+  /** Drill into a group (double-click on the canvas) so its children become selectable. */
+  setActiveGroupElement: (el: HTMLElement | null) => void;
 
   onClickToSource?: (selection: DomEditSelection) => void;
 }
@@ -41,6 +48,12 @@ interface ClickCycleState {
 
 const CYCLE_RADIUS_PX = 6;
 const CYCLE_WINDOW_MS = 600;
+// Manual double-click window. `e.detail` can't be trusted here: the first click
+// selects the group and re-renders the overlay, so the second click lands on a
+// fresh element and the browser's native click-counter resets to 1 — drill-in
+// (which keyed off `e.detail >= 2`) never fired. We track time+position instead.
+const DOUBLE_CLICK_MS = 400;
+const DOUBLE_CLICK_RADIUS_PX = 6;
 
 // ── Hook ──
 
@@ -53,15 +66,47 @@ export function usePreviewInteraction({
   resolveDomSelectionFromPreviewPoint,
   resolveAllDomSelectionsFromPreviewPoint,
   updateDomEditHoverSelection,
+  setActiveGroupElement,
   onClickToSource,
 }: UsePreviewInteractionParams) {
   const cycleRef = useRef<ClickCycleState | null>(null);
+  const lastDownRef = useRef<{ t: number; x: number; y: number } | null>(null);
 
   const handlePreviewCanvasMouseDown = useCallback(
     // fallow-ignore-next-line complexity
     async (e: React.MouseEvent<HTMLDivElement>, options?: { preferClipAncestor?: boolean }) => {
       if (!STUDIO_PREVIEW_SELECTION_ENABLED || captionEditMode || compositionLoading) return;
 
+      // Manual double-click detection (see DOUBLE_CLICK_MS): the first click
+      // re-renders the overlay so `e.detail` never reaches 2 on the canvas.
+      const downTs = Date.now();
+      const lastDown = lastDownRef.current;
+      const isDoubleClick =
+        e.detail >= 2 ||
+        (lastDown != null &&
+          downTs - lastDown.t < DOUBLE_CLICK_MS &&
+          Math.hypot(e.clientX - lastDown.x, e.clientY - lastDown.y) < DOUBLE_CLICK_RADIUS_PX);
+      lastDownRef.current = { t: downTs, x: e.clientX, y: e.clientY };
+
+      // Double-click a group → drill into it and select the child under the
+      // pointer (resolve with the group as the explicit drill-in scope, since the
+      // activeGroupElement state hasn't re-rendered yet within this handler).
+      if (isDoubleClick && !e.shiftKey) {
+        const hit = await resolveDomSelectionFromPreviewPoint(e.clientX, e.clientY);
+        if (hit?.element.hasAttribute("data-hf-group")) {
+          e.preventDefault();
+          e.stopPropagation();
+          cycleRef.current = null;
+          trackStudioEvent("group", { action: "drill_in" });
+          setActiveGroupElement(hit.element);
+          const child = await resolveDomSelectionFromPreviewPoint(e.clientX, e.clientY, {
+            activeGroupElement: hit.element,
+          });
+          applyDomSelection(child ?? hit);
+          return;
+        }
+      }
+
       const now = Date.now();
       const prev = cycleRef.current;
       const dx = prev ? e.clientX - prev.x : Infinity;
@@ -96,9 +141,21 @@ export function usePreviewInteraction({
       }
 
       // Fresh click — resolve topmost element
-      const nextSelection = await resolveDomSelectionFromPreviewPoint(e.clientX, e.clientY, {
+      let nextSelection = await resolveDomSelectionFromPreviewPoint(e.clientX, e.clientY, {
         preferClipAncestor: options?.preferClipAncestor ?? false,
       });
+      // A null result while drilled into a group means the click landed OUTSIDE that
+      // group (resolveGroupCapture → out-of-scope). Drill-in isn't sticky: exit it and
+      // re-resolve at the top level so this click selects whatever's there (or the
+      // group as a unit). Without this, a stale drill-in keeps selecting children and
+      // the "first click selects the group" expectation breaks.
+      if (!nextSelection) {
+        setActiveGroupElement(null);
+        nextSelection = await resolveDomSelectionFromPreviewPoint(e.clientX, e.clientY, {
+          preferClipAncestor: options?.preferClipAncestor ?? false,
+          activeGroupElement: null,
+        });
+      }
       if (!nextSelection) {
         cycleRef.current = null;
         applyDomSelection(null, { revealPanel: false });
@@ -125,6 +182,7 @@ export function usePreviewInteraction({
       onClickToSource,
       resolveAllDomSelectionsFromPreviewPoint,
       resolveDomSelectionFromPreviewPoint,
+      setActiveGroupElement,
     ],
   );
 

package/src/player/components/ShortcutsPanel.tsx

@@ -36,6 +36,8 @@ const SHORTCUT_SECTIONS = [
       { key: "⌘V", label: "Paste element" },
       { key: "⌘X", label: "Cut element" },
       { key: "S", label: "Split clip at playhead" },
+      { key: "⌘G", label: "Group elements" },
+      { key: "⌘⇧G", label: "Ungroup" },
       { key: "Del", label: "Delete selected element" },
     ],
   },

package/src/player/components/Timeline.tsx

@@ -20,7 +20,6 @@ import {
   type KeyframeDiamondContextMenuState,
 } from "./KeyframeDiamondContextMenu";
 import { useTimelineClipDrag } from "./useTimelineClipDrag";
-import { snapKeyframePctToBeat } from "./timelineEditing";
 import { ClipContextMenu } from "./ClipContextMenu";
 import {
   GUTTER,
@@ -87,7 +86,6 @@ export const Timeline = memo(function Timeline({
     onDeleteKeyframe,
     onDeleteAllKeyframes,
     onChangeKeyframeEase,
-    onMoveKeyframe,
   } = useResolvedTimelineEditCallbacks({
     onMoveElement: onMoveElementOverride,
     onResizeElement: onResizeElementOverride,
@@ -481,19 +479,6 @@ export const Timeline = memo(function Timeline({
           onShiftClickKeyframe={(elId, pct) => {
             toggleSelectedKeyframe(`${elId}:${pct}`);
           }}
-          onDragKeyframe={(el, oldPct, newPct) => {
-            onMoveKeyframe?.(el, oldPct, newPct);
-          }}
-          onSnapKeyframePct={(el, pct) =>
-            snapKeyframePctToBeat(el, pct, adjustedBeatAnalysis?.beatTimes, pps)
-          }
-          onPickKeyframeElement={(el) => {
-            const elKey = el.key ?? el.id;
-            if (selectedElementId !== elKey) {
-              setSelectedElementId(elKey);
-              onSelectElement?.(el);
-            }
-          }}
           onContextMenuKeyframe={(e, elId, pct) => {
             const el = expandedElements.find((x) => (x.key ?? x.id) === elId);
             if (el) {

package/src/player/components/TimelineCanvas.tsx

@@ -91,11 +91,6 @@ interface TimelineCanvasProps {
   currentTime: number;
   onClickKeyframe?: (element: TimelineElement, percentage: number) => void;
   onShiftClickKeyframe?: (elementId: string, percentage: number) => void;
-  onDragKeyframe?: (element: TimelineElement, oldPct: number, newPct: number) => void;
-  /** Snap a keyframe's clip-relative % to the nearest beat (returns unchanged when none in range). */
-  onSnapKeyframePct?: (element: TimelineElement, pct: number) => number;
-  /** Select the element when a keyframe drag starts (loads its GSAP session). */
-  onPickKeyframeElement?: (element: TimelineElement) => void;
   onContextMenuKeyframe?: (e: React.MouseEvent, elementId: string, percentage: number) => void;
   onContextMenuClip?: (e: React.MouseEvent, element: TimelineElement) => void;
   beatAnalysis?: MusicBeatAnalysis | null;
@@ -143,9 +138,6 @@ export const TimelineCanvas = memo(function TimelineCanvas({
   currentTime,
   onClickKeyframe,
   onShiftClickKeyframe,
-  onDragKeyframe,
-  onSnapKeyframePct,
-  onPickKeyframeElement,
   onContextMenuKeyframe,
   onContextMenuClip,
   beatAnalysis,
@@ -446,11 +438,6 @@ export const TimelineCanvas = memo(function TimelineCanvas({
                         selectedKeyframes={selectedKeyframes}
                         onClickKeyframe={(pct) => onClickKeyframe?.(previewElement, pct)}
                         onShiftClickKeyframe={onShiftClickKeyframe}
-                        onDragKeyframe={(oldPct, newPct) =>
-                          onDragKeyframe?.(previewElement, oldPct, newPct)
-                        }
-                        snapPct={(pct) => onSnapKeyframePct?.(previewElement, pct) ?? pct}
-                        onPickForDrag={() => onPickKeyframeElement?.(previewElement)}
                         onContextMenuKeyframe={onContextMenuKeyframe}
                       />
                     )}

package/src/player/components/TimelineClipDiamonds.tsx

@@ -1,4 +1,4 @@
-import { memo, useEffect, useRef, useState } from "react";
+import { memo } from "react";
 import { BEAT_BAND_H } from "./BeatStrip";
 
 interface KeyframeEntry {
@@ -28,15 +28,7 @@ interface TimelineClipDiamondsProps {
   selectedKeyframes: Set<string>;
   onClickKeyframe?: (percentage: number) => void;
   onShiftClickKeyframe?: (elementId: string, percentage: number) => void;
-  onDragKeyframe?: (percentage: number, newPercentage: number) => void;
   onContextMenuKeyframe?: (e: React.MouseEvent, elementId: string, percentage: number) => void;
-  /** Snap a clip-relative percentage to the nearest beat (returns it unchanged
-   *  when no beat is within range). Drives live beat-snapping while dragging. */
-  snapPct?: (percentage: number) => number;
-  /** Select this element when a keyframe drag begins, so its GSAP session is
-   *  loaded by the time the move commits (diamonds render on unselected clips
-   *  too, and a drag suppresses the selecting click). */
-  onPickForDrag?: () => void;
 }
 
 const DIAMOND_RATIO = 0.8;
@@ -59,54 +51,8 @@ export const TimelineClipDiamonds = memo(function TimelineClipDiamonds({
   selectedKeyframes,
   onClickKeyframe,
   onShiftClickKeyframe,
-  onDragKeyframe,
   onContextMenuKeyframe,
-  snapPct,
-  onPickForDrag,
 }: TimelineClipDiamondsProps) {
-  // Live drag: which keyframe (by original %) is being dragged and its current
-  // (beat-snapped) %, so the diamond + its connecting lines follow the cursor.
-  const dragRef = useRef<{ origPct: number; pct: number; moved: boolean } | null>(null);
-  const [drag, setDrag] = useState<{ origPct: number; pct: number } | null>(null);
-  // Commit through the latest callback, not the one captured at pointer-down:
-  // selecting the element on drag-start loads its GSAP session asynchronously,
-  // and the commit must use the closure that sees the loaded session.
-  const onDragKeyframeRef = useRef(onDragKeyframe);
-  onDragKeyframeRef.current = onDragKeyframe;
-  // Optimistic hold: after a commit, keep the diamond at the dropped position
-  // until the cache reflects the change (the file round-trip rewrites
-  // keyframesData), so it doesn't flash back to the old spot in between.
-  const pendingRef = useRef(false);
-  const pendingHeldPctRef = useRef<number | null>(null);
-  const pendingTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
-  // Cleanup for an in-flight drag's document listeners, so an unmount mid-drag
-  // (clip deleted, comp switch, zoom-out → early return) doesn't leak them.
-  const dragCleanupRef = useRef<(() => void) | null>(null);
-
-  useEffect(() => {
-    if (!pendingRef.current) return;
-    // Only release the optimistic hold once the cache actually reflects the
-    // committed position (a keyframe near the held %). An unrelated cache
-    // rebuild (e.g. elementCount change) rebuilds keyframesData with the SAME
-    // percentages — releasing then would flash the diamond back to the old spot.
-    const held = pendingHeldPctRef.current;
-    if (held != null && !keyframesData.keyframes.some((k) => Math.abs(k.percentage - held) < 0.3)) {
-      return;
-    }
-    pendingRef.current = false;
-    pendingHeldPctRef.current = null;
-    if (pendingTimerRef.current) clearTimeout(pendingTimerRef.current);
-    setDrag(null);
-  }, [keyframesData]);
-
-  useEffect(
-    () => () => {
-      clearTimeout(pendingTimerRef.current ?? undefined);
-      dragCleanupRef.current?.();
-    },
-    [],
-  );
-
   if (clipWidthPx < 20) return null;
 
   // When the beat strip occupies the top band, shrink the diamonds and center
@@ -129,79 +75,13 @@ export const TimelineClipDiamonds = memo(function TimelineClipDiamonds({
     }
   };
 
-  const handlePointerDown = (e: React.PointerEvent, pct: number) => {
-    if (e.button !== 0) return;
-    e.stopPropagation();
-    // Ignore a new drag while a prior drop is still settling: `pct` comes from
-    // props (the pre-drop position) but the diamond is held at its dropped spot
-    // via effPct(), so a re-grab would track from a stale origin and commit
-    // against the wrong tween. The hold clears on the cache round-trip (≤2s).
-    if (pendingRef.current) return;
-    // Select the element up front so its GSAP session loads during the drag and
-    // the commit (which resolves the animation from the selection) isn't a no-op.
-    onPickForDrag?.();
-    const startX = e.clientX;
-    dragRef.current = { origPct: pct, pct, moved: false };
-
-    const handleMove = (me: PointerEvent) => {
-      const d = dragRef.current;
-      if (!d) return;
-      const dx = me.clientX - startX;
-      // 4px dead zone so a click doesn't register as a drag.
-      if (!d.moved && Math.abs(dx) <= 4) return;
-      d.moved = true;
-      const rawPct = Math.max(0, Math.min(100, pct + (dx / clipWidthPx) * 100));
-      const snapped = snapPct ? snapPct(rawPct) : rawPct;
-      d.pct = snapped;
-      setDrag({ origPct: pct, pct: snapped });
-    };
-
-    const handleUp = () => {
-      document.removeEventListener("pointermove", handleMove);
-      document.removeEventListener("pointerup", handleUp);
-      dragCleanupRef.current = null;
-      const d = dragRef.current;
-      dragRef.current = null;
-      const willCommit = !!(d && d.moved && Math.abs(d.pct - d.origPct) > 0.5);
-      if (willCommit && d) {
-        // Hold the dropped position optimistically; the effect clears it once the
-        // cache round-trip lands (fallback timeout in case it never does).
-        pendingRef.current = true;
-        pendingHeldPctRef.current = d.pct;
-        setDrag({ origPct: d.origPct, pct: d.pct });
-        if (pendingTimerRef.current) clearTimeout(pendingTimerRef.current);
-        pendingTimerRef.current = setTimeout(() => {
-          pendingRef.current = false;
-          pendingHeldPctRef.current = null;
-          setDrag(null);
-        }, 2000);
-        onDragKeyframeRef.current?.(d.origPct, d.pct);
-      } else {
-        setDrag(null);
-      }
-    };
-
-    dragCleanupRef.current = () => {
-      document.removeEventListener("pointermove", handleMove);
-      document.removeEventListener("pointerup", handleUp);
-    };
-
-    document.addEventListener("pointermove", handleMove);
-    document.addEventListener("pointerup", handleUp);
-  };
-
-  const effPct = (p: number): number => (drag && drag.origPct === p ? drag.pct : p);
-
   return (
     <div className="absolute inset-0" style={{ zIndex: 3, pointerEvents: "none" }}>
       {sorted.map((kf, i) => {
         if (i === 0) return null;
         const prev = sorted[i - 1]!;
-        const x1 = Math.max(
-          0,
-          Math.min(clipWidthPx, (effPct(prev.percentage) / 100) * clipWidthPx),
-        );
-        const x2 = Math.max(0, Math.min(clipWidthPx, (effPct(kf.percentage) / 100) * clipWidthPx));
+        const x1 = Math.max(0, Math.min(clipWidthPx, (prev.percentage / 100) * clipWidthPx));
+        const x2 = Math.max(0, Math.min(clipWidthPx, (kf.percentage / 100) * clipWidthPx));
         if (x2 - x1 < 1) return null;
         return (
           <div
@@ -227,7 +107,7 @@ export const TimelineClipDiamonds = memo(function TimelineClipDiamonds({
         // is the clip's left edge (the diamond's left half overflows, which the
         // overflow-visible clip shows) — NOT shifted fully inside. No clamp, or
         // boundary keyframes (0% / 100%) would render off-center.
-        const leftPx = (effPct(kf.percentage) / 100) * clipWidthPx - half;
+        const leftPx = (kf.percentage / 100) * clipWidthPx - half;
         const kfKey = `${elementId}:${kf.percentage}`;
         const isKfSelected = selectedKeyframes.has(kfKey);
         const atPlayhead = isSelected && Math.abs(kf.percentage - currentPercentage) < 0.5;
@@ -252,7 +132,6 @@ export const TimelineClipDiamonds = memo(function TimelineClipDiamonds({
               padding: 0,
             }}
             onClick={(e) => handleClick(e, kf.percentage)}
-            onPointerDown={(e) => handlePointerDown(e, kf.percentage)}
             onContextMenu={(e) => {
               e.preventDefault();
               e.stopPropagation();

package/src/player/components/timelineCallbacks.ts

@@ -39,6 +39,5 @@ export interface TimelineEditCallbacks {
   onDeleteKeyframe?: (elementId: string, percentage: number) => void;
   onDeleteAllKeyframes?: (elementId: string) => void;
   onChangeKeyframeEase?: (elementId: string, percentage: number, ease: string) => void;
-  onMoveKeyframe?: (element: TimelineElement, oldPct: number, newPct: number) => void;
   onToggleKeyframeAtPlayhead?: (element: TimelineElement) => void;
 }

package/src/player/hooks/useExpandedTimelineElements.test.ts

@@ -122,4 +122,47 @@ describe("buildExpandedElements", () => {
     expect(child.key).toBe("index.html#eyebrow");
     expect(child.key).toBe(expectedStoreKey);
   });
+
+  // Sub-comp internals (group + pills) have no data-start, so they're not in the
+  // manifest. They arrive as DOM children and must still expand under their host.
+  it("expands DOM-only sub-comp children (no manifest clip) under the host", () => {
+    const elements = [
+      el({ id: "scene-host", start: 5, duration: 6, compositionSrc: "scene.html" }),
+    ];
+    const manifest = [
+      clip({ id: "scene-host", start: 5, duration: 6, compositionSrc: "scene.html" }),
+    ];
+    // pill-3 selected → parent group-1 → host scene-host. None of group-1/pills
+    // are in the manifest; they're DOM children with parent links.
+    const parentMap = new Map([
+      ["group-1", "scene-host"],
+      ["pill-1", "group-1"],
+      ["pill-2", "group-1"],
+      ["pill-3", "group-1"],
+    ]);
+    const domClipChildren = [
+      { id: "group-1", parentId: "scene-host", hostId: "scene-host", label: "Group 1" },
+      { id: "pill-1", parentId: "group-1", hostId: "scene-host", label: "pill-1" },
+      { id: "pill-2", parentId: "group-1", hostId: "scene-host", label: "pill-2" },
+      { id: "pill-3", parentId: "group-1", hostId: "scene-host", label: "pill-3" },
+    ];
+
+    // Expanding pill-3's siblings: topLevel scene-host, immediate parent group-1.
+    const out = buildExpandedElements(
+      elements,
+      manifest,
+      parentMap,
+      "scene-host",
+      "group-1",
+      domClipChildren,
+    );
+    const pills = out.filter((e) => e.domId?.startsWith("pill-"));
+    expect(pills).toHaveLength(3);
+    // Children span the host's bounds and rebase onto the host's file.
+    expect(pills[0]!.start).toBe(5);
+    expect(pills[0]!.duration).toBe(6);
+    expect(pills[0]!.sourceFile).toBe("scene.html");
+    // The host row is replaced by its children.
+    expect(out.some((e) => e.domId === "scene-host")).toBe(false);
+  });
 });