@hyperframes/studio 0.7.78 → 0.7.79

package/src/player/components/timelineLaneProps.ts

@@ -0,0 +1,86 @@
+import { type ReactNode } from "react";
+import type { GsapAnimation } from "@hyperframes/core/gsap-parser";
+import type { MusicBeatAnalysis } from "@hyperframes/core/beats";
+import type { TimelineElement, KeyframeCacheEntry } from "../store/playerStore";
+import type { TimelineKeyframeTarget } from "./timelineKeyframeIdentity";
+import type { TimelineTheme } from "./timelineTheme";
+import type { TrackVisualStyle } from "./timelineIcons";
+import type { DraggedClipState, ResizingClipState, BlockedClipState } from "./useTimelineClipDrag";
+
+/**
+ * Props shared by the scroll container ({@link import("./TimelineCanvas")}) and
+ * the lane renderer ({@link import("./TimelineLanes")}). TimelineCanvas passes
+ * these straight through via spread, so they are declared once here and both
+ * prop types compose from this base — no duplicated prop list. Kept in its own
+ * module so neither side has to import the other just to name the contract.
+ */
+export interface TimelineLaneBaseProps {
+  pps: number;
+  contentOrigin: number;
+  contentGutter: number;
+  trackContentWidth: number;
+  theme: TimelineTheme;
+  displayTrackOrder: number[];
+  rowHeights: readonly number[];
+  trackOrder: number[];
+  tracks: [number, TimelineElement[]][];
+  trackStyles: Map<number, TrackVisualStyle>;
+  laneCounts: ReadonlyMap<string, number>;
+  selectedElementId: string | null;
+  selectedElementIds: Set<string>;
+  hoveredClip: string | null;
+  draggedClip: DraggedClipState | null;
+  blockedClipRef: React.RefObject<BlockedClipState | null>;
+  suppressClickRef: React.RefObject<boolean>;
+  scrollRef: React.RefObject<HTMLDivElement | null>;
+  renderClipContent?: (
+    element: TimelineElement,
+    style: { clip: string; label: string },
+  ) => ReactNode;
+  renderClipOverlay?: (element: TimelineElement) => ReactNode;
+  onDrillDown?: (element: TimelineElement) => void;
+  onSelectElement?: (element: TimelineElement | null) => void;
+  setHoveredClip: (key: string | null) => void;
+  setShowPopover: (v: boolean) => void;
+  setRangeSelection: (v: null) => void;
+  setResizingClip: (v: ResizingClipState | null) => void;
+  setDraggedClip: (v: DraggedClipState | null) => void;
+  setSelectedElementId: (id: string | null) => void;
+  syncClipDragAutoScroll: (x: number, y: number) => void;
+  shiftClickClipRef: React.RefObject<{
+    element: TimelineElement;
+    anchorX: number;
+    anchorY: number;
+  } | null>;
+  getPreviewElement: (element: TimelineElement) => TimelineElement;
+  getTrackStyle: (tag: string) => TrackVisualStyle;
+  keyframeCache?: Map<string, KeyframeCacheEntry>;
+  gsapAnimations: Map<string, GsapAnimation[]>;
+  selectedKeyframes: Set<string>;
+  currentTime: number;
+  onSeek?: (time: number) => void;
+  onSelectSegment?: (elementId: string, target: TimelineKeyframeTarget) => void;
+  onClickKeyframe?: (element: TimelineElement, target: TimelineKeyframeTarget) => void;
+  onShiftClickKeyframe?: (elementId: string, target: TimelineKeyframeTarget) => void;
+  onContextMenuKeyframe?: (
+    e: React.MouseEvent,
+    elementId: string,
+    target: TimelineKeyframeTarget,
+  ) => void;
+  onMoveKeyframe?: (
+    elementId: string,
+    keyframe: TimelineKeyframeTarget,
+    toClipPercentage: number,
+    propertyGroup?: string,
+    tweenPercentage?: number,
+    animationId?: string,
+  ) => Promise<boolean>;
+  onContextMenuClip?: (e: React.MouseEvent, element: TimelineElement) => void;
+  /**
+   * Right-click on EMPTY lane space (not on a clip — those preventDefault
+   * before this fires — not the gutter/ruler, not below the lanes). `time` is
+   * the timeline time (seconds) under the pointer on that lane.
+   */
+  onContextMenuLane?: (e: React.MouseEvent, track: number, time: number) => void;
+  beatAnalysis?: MusicBeatAnalysis | null;
+}

package/src/player/components/timelineTrackDisplay.test.ts

@@ -0,0 +1,35 @@
+import { describe, expect, it } from "vitest";
+import { timelineTrackOrder, trackDisplayNumber, trackDisplaySuffix } from "./timelineTrackDisplay";
+
+describe("timelineTrackOrder", () => {
+  it("is the ascending distinct key order, fractional sub-comp keys included", () => {
+    const elements = [{ track: 1 }, { track: 0 }, { track: 1 / 6 }, { track: 1 }];
+
+    expect(timelineTrackOrder(elements)).toEqual([0, 1 / 6, 1]);
+  });
+});
+
+describe("trackDisplayNumber", () => {
+  it("is the key's 1-based row, not the fractional key itself", () => {
+    const order = timelineTrackOrder([{ track: 0 }, { track: 1 / 6 }, { track: 1 }]);
+
+    expect(trackDisplayNumber(order, 1 / 6)).toBe(2);
+    expect(trackDisplayNumber(order, 1)).toBe(3);
+  });
+
+  it("is null for a key with no row rather than a plausible-looking one", () => {
+    // The old end-row fallback announced "track 4" for a track the user cannot
+    // see at row 4, and nothing upstream could tell that apart from a real row.
+    expect(trackDisplayNumber([0, 1, 2], 7)).toBeNull();
+  });
+});
+
+describe("trackDisplaySuffix", () => {
+  it("names the row when there is one", () => {
+    expect(`Hide track${trackDisplaySuffix(3)}`).toBe("Hide track 3");
+  });
+
+  it("drops the number entirely when there is no row", () => {
+    expect(`Hide track${trackDisplaySuffix(null)}`).toBe("Hide track");
+  });
+});

package/src/player/components/timelineTrackDisplay.ts

@@ -0,0 +1,38 @@
+/**
+ * The one owner of "what track number does the user see".
+ *
+ * `TimelineElement.track` is a z-order SORT key, not a row number: an expanded
+ * sub-composition child gets a synthesized fractional key (`host.track + n /
+ * (siblings + 2)`, see `useExpandedTimelineElements`), so putting it in a string
+ * announces "Hide track 0.16666666666666666". Every user-visible track number,
+ * whether it is rendered by a component or baked into an undo-history label,
+ * routes through here; the raw key stays in callbacks and lookups only.
+ */
+
+/** Ascending distinct track keys, the row order the timeline renders in. */
+export function timelineTrackOrder(elements: readonly { track: number }[]): number[] {
+  return [...new Set(elements.map((element) => element.track))].sort((a, b) => a - b);
+}
+
+/**
+ * A track key's 1-based display row, or null when the key is not in
+ * `trackOrder` at all.
+ *
+ * Both callers build `trackOrder` from the same elements the key came from, so
+ * null is unreachable by construction today. It is null rather than a number
+ * because the only numbers available to return (the end row, the last row) are
+ * indistinguishable from a real answer: a label would announce a row the user
+ * can see is wrong, and nothing upstream would ever learn it had guessed.
+ */
+export function trackDisplayNumber(trackOrder: readonly number[], track: number): number | null {
+  const row = trackOrder.indexOf(track);
+  return row < 0 ? null : row + 1;
+}
+
+/**
+ * The `" 3"` in `Hide track 3`, empty when there is no display row to name.
+ * Announcing "Hide track" is thin; announcing an invented row is wrong.
+ */
+export function trackDisplaySuffix(displayNumber: number | null): string {
+  return displayNumber === null ? "" : ` ${displayNumber}`;
+}

package/src/player/components/useTimelineRangeSelection.ts

@@ -268,6 +268,11 @@ export function useTimelineRangeSelection({
       if (!point || !scrollRect || isTimelineRulerPress(e.clientY, scrollRect.top)) {
         isDragging.current = true;
         setIsScrubbing(true);
+        // Seed the pending coordinate so a press with no pointermove still
+        // replays THIS x on pointerup. `updateScrubDrag` is the only other
+        // writer, so without this a plain click settles on the ref's initial
+        // 0 and clamps the playhead back to t=0.
+        pendingClientXRef.current = e.clientX;
         seekFromX(e.clientX);
         return;
       }

package/src/player/components/useTimelineRangeSelectionScrub.test.tsx

@@ -0,0 +1,127 @@
+// @vitest-environment happy-dom
+
+// Regression guard for the ruler-click seek. `handlePointerUp` replays
+// `pendingClientXRef`, which only `updateScrubDrag` (pointermove) used to write,
+// so a press with no move settled on the ref's initial 0 and clamped the
+// playhead to t=0 — silently discarding the correct pointerdown seek.
+import React, { act } from "react";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { mountReactHarness } from "../../hooks/domSelectionTestHarness";
+import { useTimelineRangeSelection } from "./useTimelineRangeSelection";
+
+(globalThis as unknown as { IS_REACT_ACT_ENVIRONMENT: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
+
+/** Scroll container top; a press within RULER_H of this counts as a ruler press. */
+const SCROLL_TOP = 100;
+/** Comfortably inside the ruler band (RULER_H is 28 at time of writing). */
+const RULER_Y = SCROLL_TOP + 4;
+
+type Handlers = ReturnType<typeof useTimelineRangeSelection>;
+
+function makeScrollEl(): HTMLDivElement {
+  const el = document.createElement("div");
+  el.getBoundingClientRect = () =>
+    ({ top: SCROLL_TOP, left: 0, width: 1000, height: 400 }) as DOMRect;
+  return el;
+}
+
+function makePointerEvent(clientX: number, clientY: number): React.PointerEvent {
+  const currentTarget = document.createElement("div");
+  currentTarget.setPointerCapture = vi.fn();
+  return {
+    button: 0,
+    shiftKey: false,
+    metaKey: false,
+    ctrlKey: false,
+    pointerId: 1,
+    clientX,
+    clientY,
+    target: document.createElement("div"),
+    currentTarget,
+  } as unknown as React.PointerEvent;
+}
+
+const roots: Array<{ unmount: () => void }> = [];
+
+afterEach(() => {
+  for (const root of roots.splice(0)) act(() => root.unmount());
+});
+
+function setup(): { handlers: () => Handlers; seekFromX: ReturnType<typeof vi.fn> } {
+  const seekFromX = vi.fn();
+  const scrollEl = makeScrollEl();
+  let latest: Handlers | null = null;
+
+  // Hoisted so they survive re-renders. The hook mutates `isDragging.current`
+  // across the press, and a fresh object per render would reset it to false.
+  const scrollRef = { current: scrollEl };
+  const ppsRef = { current: 25 };
+  const dragScrollRaf = { current: 0 };
+  const isDragging = { current: false };
+  const elementsRef = { current: [] };
+  const trackOrderRef = { current: [] };
+  const rowHeightsRef = { current: [] };
+
+  function Probe(): null {
+    latest = useTimelineRangeSelection({
+      scrollRef,
+      ppsRef,
+      effectiveDuration: 30,
+      pps: 25,
+      seekFromX,
+      autoScrollDuringDrag: vi.fn(),
+      dragScrollRaf,
+      isDragging,
+      setShowPopover: vi.fn(),
+      elementsRef,
+      trackOrderRef,
+      rowHeightsRef,
+      contentOrigin: 0,
+    });
+    return null;
+  }
+
+  roots.push(mountReactHarness(<Probe />));
+  return {
+    handlers: () => {
+      if (!latest) throw new Error("hook did not render");
+      return latest;
+    },
+    seekFromX,
+  };
+}
+
+describe("useTimelineRangeSelection — ruler press seek", () => {
+  it("replays the pressed x on pointerup when the pointer never moved", () => {
+    const { handlers, seekFromX } = setup();
+
+    act(() => handlers().handlePointerDown(makePointerEvent(1000, RULER_Y)));
+    act(() => handlers().handlePointerUp());
+
+    // Both the press and the settle must land on the SAME x. The bug settled on
+    // 0, so the LAST call is the one that decides where the playhead ends up.
+    expect(seekFromX).toHaveBeenCalledWith(1000);
+    expect(seekFromX).not.toHaveBeenCalledWith(0);
+    expect(seekFromX.mock.calls.at(-1)).toEqual([1000]);
+  });
+
+  it("does not fall back to x=0 for a press nearer the left edge either", () => {
+    const { handlers, seekFromX } = setup();
+
+    act(() => handlers().handlePointerDown(makePointerEvent(400, RULER_Y)));
+    act(() => handlers().handlePointerUp());
+
+    expect(seekFromX.mock.calls.at(-1)).toEqual([400]);
+  });
+
+  it("settles on the final pointermove x when the pointer did move", () => {
+    const { handlers, seekFromX } = setup();
+
+    act(() => handlers().handlePointerDown(makePointerEvent(700, RULER_Y)));
+    act(() => handlers().handlePointerMove(makePointerEvent(760, RULER_Y)));
+    act(() => handlers().handlePointerUp());
+
+    // The move must win over the seeded press coordinate.
+    expect(seekFromX.mock.calls.at(-1)).toEqual([760]);
+  });
+});

package/src/player/components/useTimelineTrackLayout.test.ts

@@ -6,6 +6,7 @@ import type { GsapAnimation } from "@hyperframes/core/gsap-parser";
 import { afterEach, describe, expect, it } from "vitest";
 import { usePlayerStore, type TimelineElement } from "../store/playerStore";
 import { LANE_H, TRACK_H } from "./timelineLayout";
+import { getTimelinePropertyLanes } from "./TimelinePropertyLanes";
 import { useTimelineTrackLayout } from "./useTimelineTrackLayout";
 
 globalThis.IS_REACT_ACT_ENVIRONMENT = true;
@@ -50,4 +51,38 @@ describe("useTimelineTrackLayout", () => {
     expect(layout?.rowHeights).toEqual([TRACK_H + LANE_H]);
     act(() => root.unmount());
   });
+
+  // The row height reserved here and the lanes actually rendered are two
+  // readings of the same question. They used to be two inline copies of the
+  // group-set rule, and a mixed-group tween made them disagree: zero reserved
+  // rows under two rendered lanes.
+  it("reserves exactly as many rows as the lanes a mixed-group tween renders", () => {
+    const elements: TimelineElement[] = [
+      { id: "clip-1", tag: "div", start: 0, duration: 1, track: 0 },
+    ];
+    const mixed: GsapAnimation = {
+      id: "entrance",
+      targetSelector: "#clip-1",
+      method: "to",
+      position: 0,
+      duration: 1,
+      properties: { x: 420, opacity: 1 },
+    };
+    const animations = new Map<string, GsapAnimation[]>([["clip-1", [mixed]]]);
+    usePlayerStore.setState({ expandedClipIds: new Set(["clip-1"]) });
+
+    let layout: ReturnType<typeof useTimelineTrackLayout> | undefined;
+    function Probe() {
+      layout = useTimelineTrackLayout(elements, animations, null, new Set());
+      return null;
+    }
+
+    const root = createRoot(document.createElement("div"));
+    act(() => root.render(React.createElement(Probe)));
+
+    expect(getTimelinePropertyLanes([mixed], 0, 1)).toHaveLength(2);
+    expect(layout?.laneCounts.get("clip-1")).toBe(2);
+    expect(layout?.rowHeights).toEqual([TRACK_H + 2 * LANE_H]);
+    act(() => root.unmount());
+  });
 });

package/src/player/components/useTimelineTrackLayout.ts

@@ -1,6 +1,6 @@
 import { useMemo, useRef } from "react";
 import type { GsapAnimation } from "@hyperframes/core/gsap-parser";
-import { animationContributesLane } from "./TimelinePropertyLanes";
+import { animationLaneGroups } from "./TimelinePropertyLanes";
 import { usePlayerStore, type TimelineElement } from "../store/playerStore";
 import { STUDIO_KEYFRAMES_ENABLED } from "../../components/editor/manualEditingAvailability";
 import type { DraggedClipState } from "./timelineClipDragTypes";
@@ -56,9 +56,9 @@ function computeLaneCounts(
       const clipId = element.key ?? element.id;
       const propertyGroups = new Set<string>();
       for (const animation of gsapAnimations.get(clipId) ?? []) {
-        if (animation.propertyGroup && animationContributesLane(animation)) {
-          propertyGroups.add(animation.propertyGroup);
-        }
+        // Same helper the rendered lanes count through, so a reserved row and a
+        // drawn lane can never disagree.
+        for (const group of animationLaneGroups(animation)) propertyGroups.add(group);
       }
       laneCounts.set(clipId, propertyGroups.size);
     }

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

@@ -143,6 +143,51 @@ describe("buildExpandedElements", () => {
     expect(child.sourceFile).toBe("c.html"); // C's file, not b.html or a.html
   });
 
+  it("keeps the middle host's row when drilling two levels deep", () => {
+    // A embeds B; C lives in B. Drilling into B must leave BOTH host rows
+    // standing: sparing only the top-level one drops B's row, and its keyframe
+    // lane goes with it because diamonds render per row.
+    const elements = [
+      el({ id: "A", domId: "A", start: 10, duration: 8, compositionSrc: "a.html" }),
+      el({ id: "B", domId: "B", start: 12, duration: 4, track: 1, compositionSrc: "b.html" }),
+    ];
+    const manifest = [
+      clip({ id: "A", start: 10, duration: 8, compositionSrc: "a.html" }),
+      clip({ id: "B", start: 12, duration: 4, compositionSrc: "b.html" }),
+      clip({ id: "C", start: 13, duration: 2 }),
+    ];
+    const parentMap = new Map([
+      ["B", "A"],
+      ["C", "B"],
+    ]);
+
+    const out = buildExpandedElements(elements, manifest, parentMap, "A", "B");
+    const rows = out.map((e) => e.domId ?? e.id);
+    expect(rows).toContain("B");
+    // The child sits under its own host, not under the top-level row.
+    expect(rows.indexOf("C")).toBeGreaterThan(rows.indexOf("B"));
+  });
+
+  it("still drills a host that exists only in the manifest, without a row for it", () => {
+    // Same shape, but B has no store element, so there is no row to spare. The
+    // children stay anchored to the top-level row rather than vanishing.
+    const elements = [
+      el({ id: "A", domId: "A", start: 10, duration: 8, compositionSrc: "a.html" }),
+    ];
+    const manifest = [
+      clip({ id: "A", start: 10, duration: 8, compositionSrc: "a.html" }),
+      clip({ id: "B", start: 12, duration: 4, compositionSrc: "b.html" }),
+      clip({ id: "C", start: 13, duration: 2 }),
+    ];
+    const parentMap = new Map([
+      ["B", "A"],
+      ["C", "B"],
+    ]);
+
+    const out = buildExpandedElements(elements, manifest, parentMap, "A", "B");
+    expect(out.map((e) => e.domId ?? e.id)).toEqual(["A", "C"]);
+  });
+
   // Regression: an expanded child must share one identity (`key`) with the flat
   // store element for the same DOM id. Before the fix the child key fell back to
   // the colon form (`index.html:eyebrow:N`) while the store/selection used the
@@ -240,8 +285,112 @@ describe("buildExpandedElements", () => {
     expect(pills[0]!.duration).toBe(6);
     expect(pills[0]!.sourceFile).toBe("scene.html");
     expect(pills.map((pill) => pill.stackingContextId)).toEqual(["css:0.0", "css:0.1", "css:0.1"]);
-    // The host row is replaced by its children.
-    expect(out.some((e) => e.domId === "scene-host")).toBe(false);
+    // The host row survives the expansion; its children are added under it.
+    expect(out.some((e) => e.id === "scene-host")).toBe(true);
+  });
+
+  // fallow-ignore-next-line code-duplication
+  it("keeps the host row and appends its children directly below it", () => {
+    const elements = [
+      el({
+        id: "s3",
+        domId: "s3",
+        key: "index.html#s3",
+        start: 16,
+        duration: 7,
+        compositionSrc: "stats.html",
+      }),
+      el({ id: "outro", start: 23, duration: 3, track: 1 }),
+    ];
+    const manifest = [
+      clip({ id: "s3", start: 16, duration: 7, compositionSrc: "stats.html" }),
+      clip({ id: "stat-1", start: 16.5, duration: 5 }),
+      clip({ id: "stat-2", start: 16.9, duration: 5 }),
+    ];
+    const parentMap = new Map([
+      ["stat-1", "s3"],
+      ["stat-2", "s3"],
+    ]);
+
+    const out = buildExpandedElements(elements, manifest, parentMap, "s3", "s3");
+
+    const hostIndex = out.findIndex((e) => e.id === "s3");
+    expect(hostIndex).toBeGreaterThanOrEqual(0);
+    // Host row untouched (same key → same keyframe lane), children nested under it.
+    expect(out[hostIndex]!.key).toBe("index.html#s3");
+    expect(out[hostIndex]!.track).toBe(0);
+    expect(out[hostIndex + 1]!.domId).toBe("stat-1");
+    expect(out[hostIndex + 2]!.domId).toBe("stat-2");
+    // Exactly one more row than the old substitution behaviour (host + 2 children + outro).
+    expect(out).toHaveLength(4);
+  });
+
+  it("keeps the host row present at every playhead position (keyframe lane repro)", () => {
+    // Live repro with no drag at all: seek 0 gave 3 diamonds, seek 7.68 gave 0,
+    // seek 0.2 gave 3. Diamonds render per row from keyframeCache.get(elementKey),
+    // so the whole lane went with the host row whenever the paused drill-in
+    // substituted it for its children.
+    const elements = [
+      el({ id: "scene", domId: "scene", key: "index.html#scene", start: 0, duration: 12 }),
+    ];
+    const manifest = [
+      clip({ id: "scene", start: 0, duration: 12, compositionSrc: "scene.html" }),
+      clip({ id: "headline", start: 0, duration: 12 }),
+    ];
+    const parentMap = new Map([["headline", "scene"]]);
+
+    for (const currentTime of [0, 7.68, 0.2]) {
+      const rawId = resolveTimelineExpansionRawId({
+        selectedElementId: null,
+        isPlaying: false,
+        currentTime,
+        manifest,
+        parentMap,
+      });
+      const rows = rawId
+        ? buildExpandedElements(elements, manifest, parentMap, rawId, rawId)
+        : elements;
+      expect(rows.map((row) => row.key)).toContain("index.html#scene");
+    }
+  });
+
+  // Regression: DOM-only children were synthesized against the TOP-LEVEL element
+  // instead of the sub-comp host they actually live in, so every child row read
+  // the whole top-level window rather than its host's.
+  it("spans DOM-only children over their nested host's window, not the top-level one", () => {
+    const elements = [
+      el({ id: "scene-host", start: 0, duration: 20, compositionSrc: "scene.html" }),
+    ];
+    const manifest = [
+      clip({ id: "scene-host", start: 0, duration: 20, compositionSrc: "scene.html" }),
+      clip({ id: "sub-host", start: 5, duration: 6, compositionSrc: "sub.html" }),
+    ];
+    const parentMap = new Map([
+      ["sub-host", "scene-host"],
+      ["pill-1", "sub-host"],
+    ]);
+    const domClipChildren = [
+      {
+        id: "pill-1",
+        parentId: "sub-host",
+        hostId: "sub-host",
+        label: "pill-1",
+        stackingContextId: "css:0.0",
+      },
+    ];
+
+    const out = buildExpandedElements(
+      elements,
+      manifest,
+      parentMap,
+      "scene-host",
+      "sub-host",
+      domClipChildren,
+    );
+    const pill = out.find((e) => e.domId === "pill-1")!;
+    expect(pill.start).toBe(5);
+    expect(pill.duration).toBe(6);
+    expect(pill.sourceFile).toBe("sub.html");
   });
 });
 

package/src/player/hooks/useExpandedTimelineElements.ts

@@ -209,7 +209,13 @@ function buildChildElements(
 function domSiblingClips(
   domClipChildren: DomClipChild[],
   siblingParentId: string,
-  host: TimelineElement,
+  host: {
+    id: string | null;
+    start: number;
+    duration: number;
+    track: number;
+    compositionSrc?: string | null;
+  },
 ): ClipManifestClip[] {
   return domClipChildren
     .filter((c) => c.parentId === siblingParentId)
@@ -243,20 +249,23 @@ export function buildExpandedElements(
   const topLevelElement = elements.find((el) => el.id === topLevelId || el.domId === topLevelId);
   if (!topLevelElement) return filterToTopLevel(elements, parentMap);
 
+  // The sub-comp host the children actually live in: top-level host for 1-level
+  // nesting, a nested host for deeper nesting. Its start/file anchor edits.
+  const parentHost = manifest.find((c) => 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.
+  // Those are synthesized against the host they actually live in, not the
+  // top-level element, or every child row reads the whole top-level window.
   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);
+    return domSiblingClips(domClipChildren, siblingParentId, parentHost ?? topLevelElement);
   })();
   if (siblings.length === 0) return filterToTopLevel(elements, parentMap);
 
-  // The sub-comp host the children actually live in: top-level host for 1-level
-  // nesting, a nested host for deeper nesting. Its start/file anchor edits.
-  const parentHost = manifest.find((c) => c.id === siblingParentId);
   const editBasis = {
     start: parentHost?.start ?? topLevelElement.start,
     sourceFile: parentHost?.compositionSrc ?? topLevelElement.compositionSrc ?? undefined,
@@ -275,9 +284,39 @@ export function buildExpandedElements(
   );
   if (expanded.length === 0) return filterToTopLevel(elements, parentMap);
 
+  // Every host between the drilled one and the top level owns a row, so the
+  // drill has to spare all of them, not just the top. A middle host is still a
+  // host: dropping its row drops its keyframe lane with it.
+  const drillPath = new Set<string>();
+  for (let cursor: string | undefined = siblingParentId; cursor; ) {
+    if (drillPath.has(cursor)) break;
+    drillPath.add(cursor);
+    if (cursor === topLevelId) break;
+    cursor = parentMap.get(cursor);
+  }
+  // Children hang under the DEEPEST host on that path, so anchor them there
+  // when it has a row of its own and fall back to the top-level row when it
+  // does not (a host that lives only in the manifest never had one).
+  const anchorsChildren = (el: TimelineElement): boolean =>
+    drillPath.has(siblingParentId) && elements.some((e) => (e.domId ?? e.id) === siblingParentId)
+      ? (el.domId ?? el.id) === siblingParentId
+      : (el.key ?? el.id) === parentKey;
+
+  // ADDITIVE drill-in: the host row stays and its children are appended under
+  // it. Expansion is also triggered by the playhead alone (paused auto-expand),
+  // so substituting the host row made it vanish on an ordinary seek, and with
+  // it the host's keyframe lane, since diamonds render per row from
+  // `keyframeCache.get(elementKey)`. The synthetic fractional lanes above sit
+  // strictly between the host's lane and the next integer, so the children have
+  // their own rows without the host having to give up its own.
   return elements
-    .filter((el) => (el.key ?? el.id) === parentKey || !parentMap.has(el.domId ?? el.id))
-    .flatMap((el) => ((el.key ?? el.id) === parentKey ? expanded : [el]));
+    .filter(
+      (el) =>
+        (el.key ?? el.id) === parentKey ||
+        drillPath.has(el.domId ?? el.id) ||
+        !parentMap.has(el.domId ?? el.id),
+    )
+    .flatMap((el) => (anchorsChildren(el) ? [el, ...expanded] : [el]));
 }
 
 export function useExpandedTimelineElements(): TimelineElement[] {

package/src/telemetry/client.test.ts

@@ -56,10 +56,19 @@ describe("studio client shouldTrack", () => {
     expect(shouldTrack()).toBe(false);
   });
 
-  it("returns false when VITE_HYPERFRAMES_NO_TELEMETRY='true'", async () => {
-    setNoTelemetry("true");
+  it.each(["true", "TRUE", " yes ", "on"])(
+    "returns false when VITE_HYPERFRAMES_NO_TELEMETRY=%j",
+    async (value) => {
+      setNoTelemetry(value);
+      const shouldTrack = await loadShouldTrack();
+      expect(shouldTrack()).toBe(false);
+    },
+  );
+
+  it("does not opt out for an explicit false value", async () => {
+    setNoTelemetry("false");
     const shouldTrack = await loadShouldTrack();
-    expect(shouldTrack()).toBe(false);
+    expect(shouldTrack()).toBe(true);
   });
 
   it("returns false in vite dev mode", async () => {

package/src/telemetry/client.ts

@@ -34,12 +34,13 @@ function isApiKeyConfigured(): boolean {
 
 // VITE_HYPERFRAMES_NO_TELEMETRY mirrors the CLI's HYPERFRAMES_NO_TELEMETRY=1
 // opt-out so HeyGen's own dev/CI builds can suppress telemetry from the studio
-// bundle the same way. Vite injects it at build time. Accepts "1" or "true".
+// bundle the same way. Vite injects it at build time. Match the CLI's
+// affirmative privacy-control spellings.
 // `import.meta.env` may be undefined in non-Vite bundlers (Next.js Turbopack).
 function isBuildTimeOptOut(): boolean {
   try {
     const v = import.meta.env.VITE_HYPERFRAMES_NO_TELEMETRY as string | undefined;
-    return v === "1" || v === "true";
+    return v !== undefined && ["1", "true", "yes", "on"].includes(v.trim().toLowerCase());
   } catch {
     return false;
   }