@hyperframes/studio 0.7.14 → 0.7.16

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

package/src/player/hooks/useExpandedTimelineElements.ts

@@ -1,5 +1,5 @@
 import { useMemo } from "react";
-import { usePlayerStore, type TimelineElement } from "../store/playerStore";
+import { usePlayerStore, type TimelineElement, type DomClipChild } from "../store/playerStore";
 import type { ClipManifestClip } from "../lib/playbackTypes";
 import { createTimelineElementFromManifestClip } from "../lib/timelineDOM";
 import { buildTimelineElementKey } from "../lib/timelineElementHelpers";
@@ -111,6 +111,32 @@ function buildChildElements(
   return result;
 }
 
+// Sub-comp DOM children (groups/pills) aren't manifest clips and have no timing
+// of their own — they're "always on" within their sub-comp host, so synthesize
+// clips spanning the host's full bounds. The host element supplies start/duration
+// and the composition file edits write to.
+function domSiblingClips(
+  domClipChildren: DomClipChild[],
+  siblingParentId: string,
+  host: TimelineElement,
+): ClipManifestClip[] {
+  return domClipChildren
+    .filter((c) => c.parentId === siblingParentId)
+    .map((c) => ({
+      id: c.id,
+      label: c.label,
+      start: host.start,
+      duration: host.duration,
+      track: host.track,
+      kind: "element" as const,
+      tagName: null,
+      compositionId: null,
+      parentCompositionId: host.id ?? null,
+      compositionSrc: host.compositionSrc ?? null,
+      assetUrl: null,
+    }));
+}
+
 // Exported for tests.
 export function buildExpandedElements(
   elements: TimelineElement[],
@@ -118,11 +144,20 @@ export function buildExpandedElements(
   parentMap: Map<string, string>,
   topLevelId: string,
   siblingParentId: string,
+  domClipChildren: DomClipChild[] = [],
 ): TimelineElement[] {
   const topLevelElement = elements.find((el) => el.id === topLevelId || el.domId === topLevelId);
   if (!topLevelElement) return filterToTopLevel(elements, parentMap);
 
-  const siblings = manifest.filter((c) => c.id != null && parentMap.get(c.id) === siblingParentId);
+  // Prefer real manifest children; fall back to DOM-only sub-comp children
+  // (groups/pills) that have no data-start and thus never enter the manifest.
+  const siblings = (() => {
+    const fromManifest = manifest.filter(
+      (c) => c.id != null && parentMap.get(c.id) === siblingParentId,
+    );
+    if (fromManifest.length > 0) return fromManifest;
+    return domSiblingClips(domClipChildren, siblingParentId, topLevelElement);
+  })();
   if (siblings.length === 0) return filterToTopLevel(elements, parentMap);
 
   // The sub-comp host the children actually live in: top-level host for 1-level
@@ -154,6 +189,7 @@ export function useExpandedTimelineElements(): TimelineElement[] {
   const elements = usePlayerStore((s) => s.elements);
   const clipManifest = usePlayerStore((s) => s.clipManifest);
   const clipParentMap = usePlayerStore((s) => s.clipParentMap);
+  const domClipChildren = usePlayerStore((s) => s.domClipChildren);
   const selectedElementId = usePlayerStore((s) => s.selectedElementId);
 
   return useMemo(() => {
@@ -166,6 +202,13 @@ export function useExpandedTimelineElements(): TimelineElement[] {
 
     const immediateParent = clipParentMap.get(rawId)!;
     const topLevel = findTopLevelAncestor(rawId, clipParentMap) ?? immediateParent;
-    return buildExpandedElements(elements, clipManifest, clipParentMap, topLevel, immediateParent);
-  }, [elements, clipManifest, clipParentMap, selectedElementId]);
+    return buildExpandedElements(
+      elements,
+      clipManifest,
+      clipParentMap,
+      topLevel,
+      immediateParent,
+      domClipChildren,
+    );
+  }, [elements, clipManifest, clipParentMap, domClipChildren, selectedElementId]);
 }

package/src/player/hooks/useTimelineSyncCallbacks.ts

@@ -10,7 +10,7 @@
 
 import { useCallback } from "react";
 import { liveTime, usePlayerStore } from "../store/playerStore";
-import type { TimelineElement } from "../store/playerStore";
+import type { TimelineElement, DomClipChild } from "../store/playerStore";
 import type { PlaybackAdapter, ClipManifestClip, IframeWindow } from "../lib/playbackTypes";
 import {
   parseTimelineFromDOM,
@@ -85,8 +85,8 @@ export function useTimelineSyncCallbacks({
           | (Window & { __clipTree?: import("@hyperframes/core/runtime/clipTree").ClipTree })
           | null;
         const clipTree = iframeWin?.__clipTree;
+        const parentMap = new Map<string, string>();
         if (clipTree) {
-          const parentMap = new Map<string, string>();
           const walk = (nodes: typeof clipTree.roots) => {
             for (const node of nodes) {
               if (node.id && node.parentId) parentMap.set(node.id, node.parentId);
@@ -94,11 +94,50 @@ export function useTimelineSyncCallbacks({
             }
           };
           walk(clipTree.roots);
-          usePlayerStore.getState().setClipParentMap(parentMap);
         }
+
+        // Descend into each sub-composition host: its internal elements (group
+        // wrappers + their children) carry no `data-start`, so the clip
+        // tree/manifest never enumerate them. Surface them studio-side as DOM
+        // children + parent links so the timeline can expand a sub-comp/group
+        // row to show them. Manifest stays lean (timed clips only).
+        const domClipChildren: DomClipChild[] = [];
+        if (iframeDoc) {
+          for (const clip of data.clips) {
+            if (clip.kind !== "composition" || !clip.id) continue;
+            const hostEl = iframeDoc.getElementById(clip.id);
+            if (!hostEl) continue;
+            const hostId = clip.id;
+            const innerRoot = hostEl.querySelector("[data-hf-inner-root]") ?? hostEl;
+            // Collect the sub-comp's id'd descendants (grouped OR ungrouped) so they
+            // expand into timeline rows. Descends through id-less structural wrappers
+            // (the inlined sub-comp body), and one level into groups for drill-in.
+            const collect = (parentEl: Element, parentId: string) => {
+              for (const child of Array.from(parentEl.children)) {
+                if (!child.id) {
+                  collect(child, parentId); // unwrap id-less structural containers
+                  continue;
+                }
+                const isGroup = child.hasAttribute("data-hf-group");
+                domClipChildren.push({
+                  id: child.id,
+                  parentId,
+                  hostId,
+                  label: isGroup ? child.getAttribute("data-hf-group") || child.id : child.id,
+                });
+                parentMap.set(child.id, parentId);
+                if (isGroup) collect(child, child.id);
+              }
+            };
+            collect(innerRoot, hostId);
+          }
+        }
+        usePlayerStore.getState().setClipParentMap(parentMap);
+        usePlayerStore.getState().setDomClipChildren(domClipChildren);
       } catch {
-        // cross-origin or __clipTree not available — parentMap stays empty
+        // cross-origin or __clipTree not available — maps stay empty
       }
+
       const usedHostEls = new Set<Element>();
       const els: TimelineElement[] = filtered.map((clip, index) => {
         const hostEl = iframeDoc

package/src/player/store/playerStore.ts

@@ -165,6 +165,23 @@ interface PlayerState {
   setClipManifest: (clips: ClipManifestClip[] | null) => void;
   clipParentMap: Map<string, string>;
   setClipParentMap: (map: Map<string, string>) => void;
+  /**
+   * Sub-composition DOM descendants (groups + their children) that have no
+   * `data-start`, so they're absent from the clip manifest/tree. Collected
+   * studio-side from the live preview so the timeline can expand a sub-comp row
+   * to show its DOM-only children. Keeps the manifest lean (timed clips only).
+   */
+  domClipChildren: DomClipChild[];
+  setDomClipChildren: (children: DomClipChild[]) => void;
+}
+
+/** A sub-comp DOM-only timeline child (no data-start) and its nesting context. */
+export interface DomClipChild {
+  id: string;
+  parentId: string;
+  /** The manifest sub-comp host clip id this descendant ultimately lives under. */
+  hostId: string;
+  label: string;
 }
 
 interface BeatHistoryEntry {
@@ -296,6 +313,8 @@ export const usePlayerStore = create<PlayerState>((set, get) => ({
   setClipManifest: (clips) => set({ clipManifest: clips }),
   clipParentMap: new Map(),
   setClipParentMap: (map) => set({ clipParentMap: map }),
+  domClipChildren: [],
+  setDomClipChildren: (children) => set({ domClipChildren: children }),
 
   setIsPlaying: (playing) => {
     if (get().isPlaying === playing) return;
@@ -380,6 +399,7 @@ export const usePlayerStore = create<PlayerState>((set, get) => ({
       beatPersist: null,
       clipManifest: null,
       clipParentMap: new Map(),
+      domClipChildren: [],
     }),
 }));
 

package/src/utils/sdkCutoverParity.test.ts

@@ -1,6 +1,6 @@
 import { describe, expect, it } from "vitest";
 import { openComposition } from "@hyperframes/sdk";
-import { patchElementInHtml } from "../../../core/src/studio-api/helpers/sourceMutation.js";
+import { patchElementInHtml } from "../../../studio-server/src/helpers/sourceMutation.js";
 import type { PatchOperation } from "./sourcePatcher";
 import { patchOpsToSdkEditOps } from "./sdkOpMapping";
 

package/src/utils/studioPreviewHelpers.ts

@@ -81,6 +81,37 @@ function removePointerEventsOverride(style: HTMLStyleElement | null): void {
   }
 }
 
+// Animated group members can move outside their wrapper's static layout box, so
+// the empty space inside a group's *visual* bounds (the member-union the overlay
+// draws) doesn't hit-test to the group via elementsFromPoint. Recover it: if the
+// point falls within a group's live member-union rect, return that wrapper.
+// Innermost (smallest-area) group wins for nested groups.
+function findGroupAtPoint(doc: Document, x: number, y: number): HTMLElement | null {
+  let best: HTMLElement | null = null;
+  let bestArea = Infinity;
+  for (const group of Array.from(doc.querySelectorAll<HTMLElement>("[data-hf-group]"))) {
+    let left = Infinity;
+    let top = Infinity;
+    let right = -Infinity;
+    let bottom = -Infinity;
+    for (const member of Array.from(group.children)) {
+      const r = member.getBoundingClientRect();
+      if (r.width === 0 && r.height === 0) continue;
+      left = Math.min(left, r.left);
+      top = Math.min(top, r.top);
+      right = Math.max(right, r.right);
+      bottom = Math.max(bottom, r.bottom);
+    }
+    if (right < left || x < left || x > right || y < top || y > bottom) continue;
+    const area = (right - left) * (bottom - top);
+    if (area < bestArea) {
+      bestArea = area;
+      best = group;
+    }
+  }
+  return best;
+}
+
 // fallow-ignore-next-line complexity
 export function getPreviewTargetFromPointer(
   iframe: HTMLIFrameElement,
@@ -113,6 +144,12 @@ export function getPreviewTargetFromPointer(
       if (visualTarget) return visualTarget;
     }
 
+    // No element hit (e.g. empty space inside an animated group's overlay) — fall
+    // back to the group whose member-union contains the point, so the whole group
+    // area is hoverable/selectable, not just where a member currently sits.
+    const groupHit = findGroupAtPoint(doc, localPointer.x, localPointer.y);
+    if (groupHit && getDomLayerPatchTarget(groupHit, activeCompositionPath)) return groupHit;
+
     const fallback = getEventTargetElement(doc.elementFromPoint(localPointer.x, localPointer.y));
     if (!fallback || !getDomLayerPatchTarget(fallback, activeCompositionPath)) return null;
     if (!isElementComputedVisible(fallback)) return null;