feat(studio): timeline inline expansion + __clipTree runtime primitive

When a child element inside a sub-composition is selected, the timeline
replaces the parent scene clip with the deepest-level siblings. Deselect
or selecting outside collapses back. Expanded clips are fully editable —
move, resize, delete, and split — addressed by their real DOM id with
timeline time rebased onto the sub-comp they live in.

Runtime:
- New window.__clipTree API: a read-only hierarchical ClipNode tree
  (id/parentId/children + backing element) so Studio can derive
  parent/child relationships for inline expansion.

Studio:
- useExpandedTimelineElements derives the expanded view from
  selectedElementId + clipParentMap (pure useMemo, no useEffect).
  Each child rebases onto its immediate sub-comp host (start +
  sourceFile), so multi-level nesting targets the right file.
- NLELayout routes expanded-clip edits through the same handlers
  top-level clips use, in local coordinates — edits save to the
  sub-comp source and reflect via reloadPreview (no separate DOM-patch
  path). This is the canonical update; there is no reactive observer.
- findMatchingTimelineElementId resolves sub-comp children with no
  top-level element to `sourceFile#id`.
- Razor tool enabled by default; studio_razor_split analytics event
  fired on single and split-all.
- O(n²) isElementGsapTargeted extracted to gsapTargetCache.ts with a
  cached Set+WeakSet O(1) lookup.
This commit is contained in:
Miguel Ángel
2026-06-15 22:16:29 -04:00
committed by GitHub
parent 07030294e0
commit 8cbf4384e1
25 changed files with 843 additions and 126 deletions
@@ -66,6 +66,8 @@ export function useTimelineSyncCallbacks({
return;
}
usePlayerStore.getState().setClipManifest(data.clips);
// Show root-level clips: no parentCompositionId, OR parent is a "phantom wrapper"
const clipCompositionIds = new Set(data.clips.map((c) => c.compositionId).filter(Boolean));
const filtered = data.clips.filter(
@@ -77,6 +79,26 @@ export function useTimelineSyncCallbacks({
} catch {
iframeDoc = null;
}
try {
const iframeWin = iframeRef.current?.contentWindow as
| (Window & { __clipTree?: import("@hyperframes/core/runtime/clipTree").ClipTree })
| null;
const clipTree = iframeWin?.__clipTree;
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);
if (node.children.length > 0) walk(node.children);
}
};
walk(clipTree.roots);
usePlayerStore.getState().setClipParentMap(parentMap);
}
} catch {
// cross-origin or __clipTree not available — parentMap stays empty
}
const usedHostEls = new Set<Element>();
const els: TimelineElement[] = filtered.map((clip, index) => {
const hostEl = iframeDoc