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.

packages/studio/src/player/components/Timeline.tsx

@@ -3,6 +3,7 @@ import { useMusicBeatAnalysis } from "../../hooks/useMusicBeatAnalysis";
 import { isMusicTrack } from "../../utils/timelineInspector";
 import { remapBeatAnalysisToComposition } from "../../utils/beatEditActions";
 import { usePlayerStore, type TimelineElement } from "../store/playerStore";
+import { useExpandedTimelineElements } from "../hooks/useExpandedTimelineElements";
 import { useMountEffect } from "../../hooks/useMountEffect";
 import { EditPopover } from "./EditModal";
 import { defaultTimelineTheme, type TimelineTheme } from "./timelineTheme";
@@ -28,7 +29,10 @@ import {
   shouldShowTimelineShortcutHint,
 } from "./timelineLayout";
 import type { TimelineDropCallbacks } from "./timelineCallbacks";
-import { useTimelineEditContext } from "../../contexts/TimelineEditContext";
+import {
+  useResolvedTimelineEditCallbacks,
+  type TimelineEditOverrides,
+} from "./useResolvedTimelineEditCallbacks";
 
 // Re-export pure utilities so existing imports from "./Timeline" still resolve.
 export {
@@ -45,7 +49,7 @@ export {
   getDefaultDroppedTrack,
 } from "./timelineLayout";
 
-interface TimelineProps extends TimelineDropCallbacks {
+interface TimelineProps extends TimelineDropCallbacks, TimelineEditOverrides {
   onSeek?: (time: number) => void;
   onDrillDown?: (element: TimelineElement) => void;
   renderClipContent?: (
@@ -67,6 +71,10 @@ export const Timeline = memo(function Timeline({
   onAssetDrop,
   onBlockDrop,
   onDeleteElement: _onDeleteElement,
+  onMoveElement: onMoveElementOverride,
+  onResizeElement: onResizeElementOverride,
+  onBlockedEditAttempt: onBlockedEditAttemptOverride,
+  onSplitElement: onSplitElementOverride,
   onSelectElement,
   theme: themeOverrides,
 }: TimelineProps = {}) {
@@ -80,14 +88,18 @@ export const Timeline = memo(function Timeline({
     onDeleteAllKeyframes,
     onChangeKeyframeEase,
     onMoveKeyframe,
-  } = useTimelineEditContext();
+  } = useResolvedTimelineEditCallbacks({
+    onMoveElement: onMoveElementOverride,
+    onResizeElement: onResizeElementOverride,
+    onBlockedEditAttempt: onBlockedEditAttemptOverride,
+    onSplitElement: onSplitElementOverride,
+  });
   const theme = useMemo(() => ({ ...defaultTimelineTheme, ...themeOverrides }), [themeOverrides]);
   useMusicBeatAnalysis();
-  const elements = usePlayerStore((s) => s.elements);
+  const rawElements = usePlayerStore((s) => s.elements);
+  const expandedElements = useExpandedTimelineElements();
   const beatAnalysis = usePlayerStore((s) => s.beatAnalysis);
   const musicElement = usePlayerStore((s) => s.elements.find(isMusicTrack) ?? null);
-
-  // Merge user edits + remap beats from audio-file → composition coordinates.
   const beatEdits = usePlayerStore((s) => s.beatEdits);
   const adjustedBeatAnalysis = useMemo(
     () => remapBeatAnalysisToComposition(beatAnalysis, musicElement, beatEdits),
@@ -176,21 +188,21 @@ export const Timeline = memo(function Timeline({
 
   const effectiveDuration = useMemo(() => {
     const safeDur = Number.isFinite(duration) ? duration : 0;
-    if (elements.length === 0) return safeDur;
-    const maxEnd = Math.max(...elements.map((el) => el.start + el.duration));
+    if (rawElements.length === 0) return safeDur;
+    const maxEnd = Math.max(...rawElements.map((el) => el.start + el.duration));
     const result = Math.max(safeDur, maxEnd);
     return Number.isFinite(result) ? result : safeDur;
-  }, [elements, duration]);
+  }, [rawElements, duration]);
 
   const tracks = useMemo(() => {
-    const map = new Map<number, typeof elements>();
-    for (const el of elements) {
+    const map = new Map<number, typeof expandedElements>();
+    for (const el of expandedElements) {
       const list = map.get(el.track) ?? [];
       list.push(el);
       map.set(el.track, list);
     }
     return Array.from(map.entries()).sort(([a], [b]) => a - b);
-  }, [elements]);
+  }, [expandedElements]);
 
   const trackStyles = useMemo(() => {
     const map = new Map<number, TrackVisualStyle>();
@@ -247,8 +259,9 @@ export const Timeline = memo(function Timeline({
   const toggleSelectedKeyframe = usePlayerStore((s) => s.toggleSelectedKeyframe);
 
   const selectedElement = useMemo(
-    () => elements.find((element) => (element.key ?? element.id) === selectedElementId) ?? null,
-    [elements, selectedElementId],
+    () =>
+      expandedElements.find((element) => (element.key ?? element.id) === selectedElementId) ?? null,
+    [expandedElements, selectedElementId],
   );
   const selectedElementRef = useRef<TimelineElement | null>(selectedElement);
   selectedElementRef.current = selectedElement;
@@ -283,7 +296,7 @@ export const Timeline = memo(function Timeline({
     effectiveDuration,
     pps,
     timelineReady,
-    elementsLength: elements.length,
+    elementsLength: expandedElements.length,
     setZoomMode,
     setManualZoomPercent,
     onSeek,
@@ -332,7 +345,7 @@ export const Timeline = memo(function Timeline({
 
   useEffect(() => {
     syncShortcutHintVisibility();
-  }, [syncShortcutHintVisibility, timelineReady, elements.length, totalH]);
+  }, [syncShortcutHintVisibility, timelineReady, expandedElements.length, totalH]);
 
   const getPreviewElement = useCallback(
     (element: TimelineElement): TimelineElement => {
@@ -362,7 +375,7 @@ export const Timeline = memo(function Timeline({
     onBlockDrop,
   });
 
-  if (!timelineReady || elements.length === 0) {
+  if (!timelineReady || expandedElements.length === 0) {
     return (
       <TimelineEmptyState
         isDragOver={isDragOver}
@@ -482,7 +495,7 @@ export const Timeline = memo(function Timeline({
             }
           }}
           onContextMenuKeyframe={(e, elId, pct) => {
-            const el = elements.find((x) => (x.key ?? x.id) === elId);
+            const el = expandedElements.find((x) => (x.key ?? x.id) === elId);
             if (el) {
               setSelectedElementId(elId);
               onSelectElement?.(el);

packages/studio/src/player/components/TimelineClip.tsx

@@ -102,7 +102,7 @@ export const TimelineClip = memo(function TimelineClip({
       onDoubleClick={onDoubleClick}
       onContextMenu={onContextMenu}
     >
-      {/* Left accent stripe */}
+      {/* Left accent stripe — wider + brighter for expanded sub-comp children */}
       <div
         aria-hidden="true"
         style={{
@@ -110,9 +110,9 @@ export const TimelineClip = memo(function TimelineClip({
           left: 0,
           top: 0,
           bottom: 0,
-          width: 3,
+          width: el.expandedParentStart !== undefined ? 4 : 3,
           background: trackStyle.accent,
-          opacity: isSelected ? 0.7 : 0.3,
+          opacity: el.expandedParentStart !== undefined ? 0.8 : isSelected ? 0.7 : 0.3,
           borderRadius: `${theme.clipRadius} 0 0 ${theme.clipRadius}`,
           zIndex: 2,
           pointerEvents: "none",

packages/studio/src/player/components/useResolvedTimelineEditCallbacks.ts

@@ -0,0 +1,30 @@
+import { useMemo } from "react";
+import { useTimelineEditContext } from "../../contexts/TimelineEditContext";
+import type { TimelineEditCallbacks } from "./timelineCallbacks";
+
+// Props a parent (e.g. NLELayout) may pass to <Timeline> to intercept edits —
+// the rest of the callback bag still comes from TimelineEditContext.
+export type TimelineEditOverrides = Pick<
+  TimelineEditCallbacks,
+  "onMoveElement" | "onResizeElement" | "onBlockedEditAttempt" | "onSplitElement"
+>;
+
+// Merge any prop overrides over the context callbacks. Used so NLELayout can
+// wrap move/resize/split (to rebase expanded sub-comp clips) while every other
+// callback falls through to the context unchanged.
+export function useResolvedTimelineEditCallbacks(
+  overrides: TimelineEditOverrides,
+): TimelineEditCallbacks {
+  const ctx = useTimelineEditContext();
+  const { onMoveElement, onResizeElement, onBlockedEditAttempt, onSplitElement } = overrides;
+  return useMemo(
+    () => ({
+      ...ctx,
+      onMoveElement: onMoveElement ?? ctx.onMoveElement,
+      onResizeElement: onResizeElement ?? ctx.onResizeElement,
+      onBlockedEditAttempt: onBlockedEditAttempt ?? ctx.onBlockedEditAttempt,
+      onSplitElement: onSplitElement ?? ctx.onSplitElement,
+    }),
+    [ctx, onMoveElement, onResizeElement, onBlockedEditAttempt, onSplitElement],
+  );
+}