@hyperframes/studio 0.7.78 → 0.7.80

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
@@ -176,6 +221,35 @@ describe("buildExpandedElements", () => {
     expect(child.key).toBe(expectedStoreKey);
   });
 
+  // Regression: a child row is built from a manifest clip, which carries none of
+  // the host element's attributes. Reading hidden off the manifest left every
+  // expanded row reporting itself visible, so the eye wrote data-hidden a second
+  // time instead of removing it and the element could never be shown again.
+  it("inherits hidden and locked state from the flat store element", () => {
+    const elements = [
+      el({ id: "s1", domId: "s1", start: 0, duration: 14 }),
+      el({
+        id: "eyebrow",
+        key: "index.html#eyebrow",
+        domId: "eyebrow",
+        start: 0,
+        duration: 14,
+        hidden: true,
+        timelineLocked: true,
+      }),
+    ];
+    const manifest = [
+      clip({ id: "s1", start: 0, duration: 14 }),
+      clip({ id: "eyebrow", start: 0, duration: 14 }),
+    ];
+    const parentMap = new Map([["eyebrow", "s1"]]);
+
+    const out = buildExpandedElements(elements, manifest, parentMap, "s1", "s1");
+    const child = out.find((e) => e.domId === "eyebrow")!;
+    expect(child.hidden).toBe(true);
+    expect(child.timelineLocked).toBe(true);
+  });
+
   // 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", () => {
@@ -240,8 +314,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

@@ -134,6 +134,27 @@ interface DisplayBounds {
   track: number;
 }
 
+/**
+ * State that lives on the live host element, not in the clip manifest:
+ * `data-hidden`, `data-timeline-locked`, `data-timeline-role`. A child row is
+ * built from a manifest clip with no hostEl to read, so
+ * createTimelineElementFromManifestClip cannot see any of it. The flat store
+ * element for the same child WAS built with one, so it is inherited from there.
+ *
+ * Without this the eye on an expanded child always reported the row visible, so
+ * clicking it wrote data-hidden again instead of removing it, and a hidden child
+ * could never be shown again (not even after a reload, since the attribute is in
+ * the source).
+ */
+function hostElementState(flat: TimelineElement | undefined): Partial<TimelineElement> {
+  if (!flat) return {};
+  return {
+    hidden: flat.hidden,
+    timelineLocked: flat.timelineLocked,
+    timelineRole: flat.timelineRole,
+  };
+}
+
 // `display` bounds come from the top-level scene clip (where the expanded row is
 // drawn). `editBasis` comes from the child's immediate sub-comp host: its absolute
 // start anchors local-time edits and its compositionSrc is the file edits write to.
@@ -143,6 +164,7 @@ function buildChildElements(
   display: DisplayBounds,
   editBasis: { start: number; sourceFile: string | undefined },
   expandedHostKey: string,
+  elements: readonly TimelineElement[],
 ): TimelineElement[] {
   const result: TimelineElement[] = [];
   for (const child of siblings) {
@@ -170,6 +192,7 @@ function buildChildElements(
     });
     result.push({
       ...base,
+      ...hostElementState(elements.find((element) => element.key === key)),
       key,
       start: clamped.start,
       duration: clamped.duration,
@@ -209,7 +232,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 +272,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,
@@ -272,12 +304,43 @@ export function buildExpandedElements(
     },
     editBasis,
     parentKey,
+    elements,
   );
   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/player/store/keyframeSlice.ts

@@ -1,5 +1,6 @@
 import type { GsapAnimation } from "@hyperframes/core/gsap-parser";
 import type { StoreApi } from "zustand";
+import type { AnimationKeyframeTarget } from "../../hooks/gsapTweenSynth";
 
 /** Minimal keyframe cache types — mirrors GsapKeyframesData without pulling in Node-only gsap-parser. */
 export interface KeyframeCacheEntry {
@@ -14,9 +15,8 @@ export interface KeyframeCacheEntry {
     animationId?: string;
     properties: Record<string, number | string>;
     ease?: string;
-    /** Set when 2+ source animations collide at this percentage (a single inline
-     *  ease button can't target one): the collapsed row hides the button here. */
-    easeAmbiguous?: boolean;
+    /** Source animation/keyframe targets that collide at this clip percentage. */
+    collidingAnimationTargets?: AnimationKeyframeTarget[];
   }>;
   ease?: string;
   easeEach?: string;
@@ -37,9 +37,19 @@ export interface KeyframeSlice {
 
   /** elementId scopes the request to one element so a shared (class-selector)
    * animation id can't open the ease editor on the wrong element. */
-  focusedEaseSegment: { animationId: string; tweenPercentage: number; elementId: string } | null;
+  focusedEaseSegment: {
+    animationId: string;
+    collidingAnimationTargets?: AnimationKeyframeTarget[];
+    tweenPercentage: number;
+    elementId: string;
+  } | null;
   setFocusedEaseSegment: (
-    target: { animationId: string; tweenPercentage: number; elementId: string } | null,
+    target: {
+      animationId: string;
+      collidingAnimationTargets?: AnimationKeyframeTarget[];
+      tweenPercentage: number;
+      elementId: string;
+    } | null,
   ) => void;
 
   /** Keyframe data per element id, populated from parsed GSAP animations. */

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