@hyperframes/studio 0.7.15 → 0.7.16

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