@hyperframes/studio 0.7.86 → 0.7.87

package/src/player/components/timelineViewportGeometry.ts

@@ -0,0 +1,51 @@
+import { RULER_H, type TimelineRowGeometry } from "./timelineLayout";
+import { TIMELINE_VIEWPORT_BUDGETS } from "../lib/timelineViewportBudgets";
+import type { TimelineTimeRange } from "../lib/timelineClipIndex";
+import type { TimelineScrollViewportSnapshot } from "./useTimelineScrollViewport";
+
+export function getTimelineRenderTimeRange(
+  viewport: Pick<TimelineScrollViewportSnapshot, "scrollLeft" | "clientWidth">,
+  pixelsPerSecond: number,
+  contentOrigin: number,
+  duration: number,
+): TimelineTimeRange {
+  if (!(pixelsPerSecond > 0) || !(duration > 0) || !(viewport.clientWidth > 0)) {
+    return { start: 0, end: 0 };
+  }
+  const overscanPx = viewport.clientWidth * TIMELINE_VIEWPORT_BUDGETS.timeOverscanViewportRatio;
+  const startPx = viewport.scrollLeft - contentOrigin - overscanPx;
+  const endPx = viewport.scrollLeft + viewport.clientWidth - contentOrigin + overscanPx;
+  return {
+    start: Math.min(duration, Math.max(0, startPx / pixelsPerSecond)),
+    end: Math.min(duration, Math.max(0, endPx / pixelsPerSecond)),
+  };
+}
+
+export function getTimelineVisibleTimeRange(
+  viewport: Pick<TimelineScrollViewportSnapshot, "scrollLeft" | "clientWidth">,
+  pixelsPerSecond: number,
+  contentOrigin: number,
+  duration: number,
+): { start: number; end: number } {
+  if (!(pixelsPerSecond > 0) || !(duration > 0)) return { start: 0, end: 0 };
+  const start = Math.max(0, (viewport.scrollLeft - contentOrigin) / pixelsPerSecond);
+  const end = Math.min(
+    duration,
+    Math.max(start, (viewport.scrollLeft + viewport.clientWidth - contentOrigin) / pixelsPerSecond),
+  );
+  return { start: Math.min(start, duration), end };
+}
+
+export function getTimelineScrollTopForGeometryChange(
+  previous: TimelineRowGeometry,
+  next: TimelineRowGeometry,
+  scrollTop: number,
+): number {
+  const anchor = previous.getRowPositionFromY(scrollTop + RULER_H);
+  if (anchor.row < 0 || anchor.row >= previous.rowKeys.length) return scrollTop;
+  const anchorKey = previous.rowKeys[anchor.row];
+  if (anchorKey === undefined) return scrollTop;
+  const nextRow = next.getRowIndex(anchorKey);
+  if (nextRow < 0) return scrollTop;
+  return Math.max(0, scrollTop + next.getRowTop(nextRow) - previous.getRowTop(anchor.row));
+}

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

@@ -2,34 +2,45 @@ import { describe, expect, it } from "vitest";
 import {
   clampTimelineZoomPercent,
   computePinnedZoomPercent,
+  getMaxTimelineZoomPercent,
   getNextTimelineZoomPercent,
   getPinchTimelineZoomPercent,
   getTimelinePixelsPerSecond,
   getTimelineZoomPercent,
-  MAX_TIMELINE_ZOOM_PERCENT,
   MIN_TIMELINE_ZOOM_PERCENT,
   timelineZoomPercentToSlider,
   timelineSliderToZoomPercent,
 } from "./timelineZoom";
 
+const FIT_PPS = 12;
+const MAX_ZOOM_PERCENT = 12_000;
+
 describe("clampTimelineZoomPercent", () => {
   it("defaults invalid values to 100", () => {
-    expect(clampTimelineZoomPercent(Number.NaN)).toBe(100);
+    expect(clampTimelineZoomPercent(Number.NaN, FIT_PPS)).toBe(100);
   });
 
   it("clamps to the supported percent bounds", () => {
-    expect(clampTimelineZoomPercent(1)).toBe(MIN_TIMELINE_ZOOM_PERCENT);
-    expect(clampTimelineZoomPercent(5000)).toBe(MAX_TIMELINE_ZOOM_PERCENT);
+    expect(clampTimelineZoomPercent(1, FIT_PPS)).toBe(MIN_TIMELINE_ZOOM_PERCENT);
+    expect(clampTimelineZoomPercent(100_000, FIT_PPS)).toBe(MAX_ZOOM_PERCENT);
+  });
+
+  it("zooms to a readable width for each 30fps frame instead of stopping at 2000%", () => {
+    const fitPixelsPerSecond = 12;
+    const percent = clampTimelineZoomPercent(100_000, fitPixelsPerSecond);
+
+    expect(percent).toBe(12_000);
+    expect(getTimelinePixelsPerSecond(fitPixelsPerSecond, "manual", percent)).toBe(1_440);
   });
 });
 
 describe("getTimelineZoomPercent", () => {
   it("treats fit mode as 100 percent", () => {
-    expect(getTimelineZoomPercent("fit", 375)).toBe(100);
+    expect(getTimelineZoomPercent("fit", 375, FIT_PPS)).toBe(100);
   });
 
   it("returns the clamped manual zoom percent", () => {
-    expect(getTimelineZoomPercent("manual", 125.2)).toBe(125);
+    expect(getTimelineZoomPercent("manual", 125.2, FIT_PPS)).toBe(125);
   });
 });
 
@@ -45,68 +56,71 @@ describe("getTimelinePixelsPerSecond", () => {
 
 describe("getNextTimelineZoomPercent", () => {
   it("zooms out from fit relative to 100 percent", () => {
-    expect(getNextTimelineZoomPercent("out", "fit", 375)).toBe(50);
+    expect(getNextTimelineZoomPercent("out", "fit", 375, FIT_PPS)).toBe(50);
   });
 
   it("zooms in from fit relative to 100 percent", () => {
-    expect(getNextTimelineZoomPercent("in", "fit", 375)).toBe(200);
+    expect(getNextTimelineZoomPercent("in", "fit", 375, FIT_PPS)).toBe(200);
   });
 
   it("clamps the lower bound", () => {
-    expect(getNextTimelineZoomPercent("out", "manual", MIN_TIMELINE_ZOOM_PERCENT)).toBe(
+    expect(getNextTimelineZoomPercent("out", "manual", MIN_TIMELINE_ZOOM_PERCENT, FIT_PPS)).toBe(
       MIN_TIMELINE_ZOOM_PERCENT,
     );
   });
 
   it("clamps the upper bound", () => {
-    expect(getNextTimelineZoomPercent("in", "manual", MAX_TIMELINE_ZOOM_PERCENT)).toBe(
-      MAX_TIMELINE_ZOOM_PERCENT,
+    expect(getNextTimelineZoomPercent("in", "manual", MAX_ZOOM_PERCENT, FIT_PPS)).toBe(
+      MAX_ZOOM_PERCENT,
     );
   });
 });
 
 describe("getPinchTimelineZoomPercent", () => {
   it("zooms in for upward pinch wheel deltas", () => {
-    expect(getPinchTimelineZoomPercent(-80, "fit", 100)).toBeGreaterThan(100);
+    expect(getPinchTimelineZoomPercent(-80, "fit", 100, FIT_PPS)).toBeGreaterThan(100);
   });
 
   it("zooms out for downward pinch wheel deltas", () => {
-    expect(getPinchTimelineZoomPercent(80, "manual", 200)).toBeLessThan(200);
+    expect(getPinchTimelineZoomPercent(80, "manual", 200, FIT_PPS)).toBeLessThan(200);
   });
 
   it("keeps the current zoom for zero or invalid deltas", () => {
-    expect(getPinchTimelineZoomPercent(0, "manual", 180)).toBe(180);
-    expect(getPinchTimelineZoomPercent(Number.NaN, "manual", 180)).toBe(180);
+    expect(getPinchTimelineZoomPercent(0, "manual", 180, FIT_PPS)).toBe(180);
+    expect(getPinchTimelineZoomPercent(Number.NaN, "manual", 180, FIT_PPS)).toBe(180);
   });
 
   it("clamps pinch zoom to the supported range", () => {
-    expect(getPinchTimelineZoomPercent(10000, "manual", 100)).toBe(MIN_TIMELINE_ZOOM_PERCENT);
-    expect(getPinchTimelineZoomPercent(-10000, "manual", 100)).toBe(MAX_TIMELINE_ZOOM_PERCENT);
+    expect(getPinchTimelineZoomPercent(10000, "manual", 100, FIT_PPS)).toBe(
+      MIN_TIMELINE_ZOOM_PERCENT,
+    );
+    expect(getPinchTimelineZoomPercent(-10000, "manual", 100, FIT_PPS)).toBe(MAX_ZOOM_PERCENT);
   });
 });
 
 describe("timelineZoomPercentToSlider", () => {
   it("maps min zoom to slider position 0", () => {
-    expect(timelineZoomPercentToSlider(MIN_TIMELINE_ZOOM_PERCENT)).toBeCloseTo(0, 5);
+    expect(timelineZoomPercentToSlider(MIN_TIMELINE_ZOOM_PERCENT, FIT_PPS)).toBeCloseTo(0, 5);
   });
 
   it("maps max zoom to slider position 100", () => {
-    expect(timelineZoomPercentToSlider(MAX_TIMELINE_ZOOM_PERCENT)).toBeCloseTo(100, 5);
+    expect(timelineZoomPercentToSlider(MAX_ZOOM_PERCENT, FIT_PPS)).toBeCloseTo(100, 5);
   });
 
-  it("maps 100% to the log midpoint between 10 and 2000", () => {
-    const expected = ((Math.log(100) - Math.log(10)) / (Math.log(2000) - Math.log(10))) * 100;
-    expect(timelineZoomPercentToSlider(100)).toBeCloseTo(expected, 3);
+  it("maps 100% onto the dynamic log range", () => {
+    const expected =
+      ((Math.log(100) - Math.log(10)) / (Math.log(MAX_ZOOM_PERCENT) - Math.log(10))) * 100;
+    expect(timelineZoomPercentToSlider(100, FIT_PPS)).toBeCloseTo(expected, 3);
   });
 });
 
 describe("timelineSliderToZoomPercent", () => {
   it("maps slider 0 to min zoom", () => {
-    expect(timelineSliderToZoomPercent(0)).toBe(MIN_TIMELINE_ZOOM_PERCENT);
+    expect(timelineSliderToZoomPercent(0, FIT_PPS)).toBe(MIN_TIMELINE_ZOOM_PERCENT);
   });
 
   it("maps slider 100 to max zoom", () => {
-    expect(timelineSliderToZoomPercent(100)).toBe(MAX_TIMELINE_ZOOM_PERCENT);
+    expect(timelineSliderToZoomPercent(100, FIT_PPS)).toBe(MAX_ZOOM_PERCENT);
   });
 });
 
@@ -126,7 +140,7 @@ describe("computePinnedZoomPercent", () => {
 
   it("clamps a pin that would exceed the manual-zoom bounds", () => {
     // currentPps 10000 / fitPps 1 = 1_000_000% → clamped to MAX.
-    expect(computePinnedZoomPercent(10000, 1)).toBe(MAX_TIMELINE_ZOOM_PERCENT);
+    expect(computePinnedZoomPercent(10000, 1)).toBe(getMaxTimelineZoomPercent(1));
     // Tiny ratio → clamped up to MIN.
     expect(computePinnedZoomPercent(0.001, 1000)).toBe(MIN_TIMELINE_ZOOM_PERCENT);
   });
@@ -140,10 +154,10 @@ describe("computePinnedZoomPercent", () => {
 });
 
 describe("timelineZoomPercentToSlider / timelineSliderToZoomPercent round-trip", () => {
-  for (const percent of [10, 100, 500, 2000]) {
+  for (const percent of [10, 100, 500, 2000, MAX_ZOOM_PERCENT]) {
     it(`round-trips ${percent}% within ±1%`, () => {
-      const slider = timelineZoomPercentToSlider(percent);
-      const back = timelineSliderToZoomPercent(slider);
+      const slider = timelineZoomPercentToSlider(percent, FIT_PPS);
+      const back = timelineSliderToZoomPercent(slider, FIT_PPS);
       expect(Math.abs(back - percent) / percent).toBeLessThan(0.01);
     });
   }

package/src/player/components/timelineZoom.ts

@@ -1,7 +1,8 @@
 import type { ZoomMode } from "../store/playerStore";
+import { STUDIO_PREVIEW_FPS } from "../lib/time";
 
 export const MIN_TIMELINE_ZOOM_PERCENT = 10;
-export const MAX_TIMELINE_ZOOM_PERCENT = 2000;
+const MAX_TIMELINE_FRAME_WIDTH_PX = 48;
 // CapCut-strength steps: one button press / pinch gesture moves the zoom
 // meaningfully (user feedback, twice-doubled: 1.25×/0.8× + 0.0035 felt like
 // "zooming several times to get anywhere", then 1.5× + 0.007 still too soft).
@@ -10,16 +11,24 @@ const ZOOM_OUT_FACTOR = 0.5;
 const ZOOM_IN_FACTOR = 2;
 const PINCH_ZOOM_SENSITIVITY = 0.014;
 
-export function clampTimelineZoomPercent(percent: number): number {
+export function getMaxTimelineZoomPercent(fitPixelsPerSecond: number): number {
+  if (!Number.isFinite(fitPixelsPerSecond) || fitPixelsPerSecond <= 0) return 100;
+  const frameLevelPixelsPerSecond = STUDIO_PREVIEW_FPS * MAX_TIMELINE_FRAME_WIDTH_PX;
+  return Math.max(100, Math.round((frameLevelPixelsPerSecond / fitPixelsPerSecond) * 100));
+}
+
+export function clampTimelineZoomPercent(percent: number, fitPixelsPerSecond: number): number {
   if (!Number.isFinite(percent)) return 100;
-  return Math.max(
-    MIN_TIMELINE_ZOOM_PERCENT,
-    Math.min(MAX_TIMELINE_ZOOM_PERCENT, Math.round(percent)),
-  );
+  const maxZoomPercent = getMaxTimelineZoomPercent(fitPixelsPerSecond);
+  return Math.max(MIN_TIMELINE_ZOOM_PERCENT, Math.min(maxZoomPercent, Math.round(percent)));
 }
 
-export function getTimelineZoomPercent(zoomMode: ZoomMode, manualZoomPercent: number): number {
-  return zoomMode === "fit" ? 100 : clampTimelineZoomPercent(manualZoomPercent);
+export function getTimelineZoomPercent(
+  zoomMode: ZoomMode,
+  manualZoomPercent: number,
+  fitPixelsPerSecond: number,
+): number {
+  return zoomMode === "fit" ? 100 : clampTimelineZoomPercent(manualZoomPercent, fitPixelsPerSecond);
 }
 
 /**
@@ -47,7 +56,10 @@ export function computePinnedZoomPercent(
   ) {
     return 100;
   }
-  return clampTimelineZoomPercent((currentPixelsPerSecond / fitPixelsPerSecond) * 100);
+  return clampTimelineZoomPercent(
+    (currentPixelsPerSecond / fitPixelsPerSecond) * 100,
+    fitPixelsPerSecond,
+  );
 }
 
 export function getTimelinePixelsPerSecond(
@@ -56,7 +68,7 @@ export function getTimelinePixelsPerSecond(
   manualZoomPercent: number,
 ): number {
   if (!Number.isFinite(fitPixelsPerSecond) || fitPixelsPerSecond <= 0) return 100;
-  const zoomPercent = getTimelineZoomPercent(zoomMode, manualZoomPercent);
+  const zoomPercent = getTimelineZoomPercent(zoomMode, manualZoomPercent, fitPixelsPerSecond);
   return zoomMode === "fit" ? fitPixelsPerSecond : fitPixelsPerSecond * (zoomPercent / 100);
 }
 
@@ -64,41 +76,46 @@ export function getNextTimelineZoomPercent(
   direction: "in" | "out",
   zoomMode: ZoomMode,
   manualZoomPercent: number,
+  fitPixelsPerSecond: number,
 ): number {
-  const current = getTimelineZoomPercent(zoomMode, manualZoomPercent);
+  const current = getTimelineZoomPercent(zoomMode, manualZoomPercent, fitPixelsPerSecond);
   const next = direction === "in" ? current * ZOOM_IN_FACTOR : current * ZOOM_OUT_FACTOR;
-  return clampTimelineZoomPercent(next);
+  return clampTimelineZoomPercent(next, fitPixelsPerSecond);
 }
 
 export function getPinchTimelineZoomPercent(
   deltaY: number,
   zoomMode: ZoomMode,
   manualZoomPercent: number,
+  fitPixelsPerSecond: number,
 ): number {
-  const current = getTimelineZoomPercent(zoomMode, manualZoomPercent);
+  const current = getTimelineZoomPercent(zoomMode, manualZoomPercent, fitPixelsPerSecond);
   if (!Number.isFinite(deltaY) || deltaY === 0) return current;
-  return clampTimelineZoomPercent(current * Math.exp(-deltaY * PINCH_ZOOM_SENSITIVITY));
+  return clampTimelineZoomPercent(
+    current * Math.exp(-deltaY * PINCH_ZOOM_SENSITIVITY),
+    fitPixelsPerSecond,
+  );
 }
 
 const LOG_MIN = Math.log(MIN_TIMELINE_ZOOM_PERCENT);
-const LOG_MAX = Math.log(MAX_TIMELINE_ZOOM_PERCENT);
 
 /**
- * Maps a zoom percent (10–2000) to a slider position (0–100) using a log scale.
- * Log scale is used because the range spans 200×; linear would compress the
- * low end (10–100%) into a tiny sliver of the slider.
+ * Maps the frame-level zoom range to a slider position (0–100) using a log scale.
+ * Linear would compress the useful low end into a tiny sliver of the slider.
  */
-export function timelineZoomPercentToSlider(percent: number): number {
-  const clamped = clampTimelineZoomPercent(percent);
-  return ((Math.log(clamped) - LOG_MIN) / (LOG_MAX - LOG_MIN)) * 100;
+export function timelineZoomPercentToSlider(percent: number, fitPixelsPerSecond: number): number {
+  const clamped = clampTimelineZoomPercent(percent, fitPixelsPerSecond);
+  const logMax = Math.log(getMaxTimelineZoomPercent(fitPixelsPerSecond));
+  return ((Math.log(clamped) - LOG_MIN) / (logMax - LOG_MIN)) * 100;
 }
 
 /**
- * Maps a slider position (0–100) to a zoom percent (10–2000) using a log scale.
+ * Maps a slider position (0–100) to the frame-level zoom range using a log scale.
  * Inverse of `timelineZoomPercentToSlider`.
  */
-export function timelineSliderToZoomPercent(slider: number): number {
+export function timelineSliderToZoomPercent(slider: number, fitPixelsPerSecond: number): number {
   const clampedSlider = Math.max(0, Math.min(100, slider));
-  const logValue = LOG_MIN + (clampedSlider / 100) * (LOG_MAX - LOG_MIN);
-  return clampTimelineZoomPercent(Math.exp(logValue));
+  const logMax = Math.log(getMaxTimelineZoomPercent(fitPixelsPerSecond));
+  const logValue = LOG_MIN + (clampedSlider / 100) * (logMax - LOG_MIN);
+  return clampTimelineZoomPercent(Math.exp(logValue), fitPixelsPerSecond);
 }

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

@@ -1,113 +1,116 @@
 // @vitest-environment happy-dom
 
+import React, { act, useRef } from "react";
+import { createRoot } from "react-dom/client";
 import { describe, expect, it } from "vitest";
-import { updateTimelineActiveClipClasses } from "./useTimelineActiveClips";
+import { liveTime, type TimelineElement } from "../store/playerStore";
+import {
+  isTimelineClipActive,
+  updateTimelineActiveClipClasses,
+  useTimelineActiveClips,
+} from "./useTimelineActiveClips";
 
-function appendClip(container: HTMLElement, id: string, start: string, end: string): HTMLElement {
-  const clip = document.createElement("div");
-  clip.dataset.clip = "true";
-  clip.dataset.elId = id;
-  clip.dataset.clipStart = start;
-  clip.dataset.clipEnd = end;
-  container.append(clip);
-  return clip;
-}
+Object.assign(globalThis, { IS_REACT_ACT_ENVIRONMENT: true });
 
-describe("updateTimelineActiveClipClasses", () => {
-  it("toggles data-active only for clips containing the current time", () => {
-    const container = document.createElement("div");
-    const intro = appendClip(container, "intro", "0", "2");
-    const hero = appendClip(container, "hero", "2", "5");
-    const outro = appendClip(container, "outro", "5", "8");
-    const previous = new Set<string>();
+function clip(id: string, start: number, duration: number, hidden = false): TimelineElement {
+  return { id, tag: "div", start, duration, track: 1, hidden };
+}
 
-    updateTimelineActiveClipClasses(container, previous, 2.25);
+function appendClip(container: HTMLElement, id: string, start: string, end: string): HTMLElement {
+  const element = document.createElement("div");
+  element.dataset.clip = "true";
+  element.dataset.elId = id;
+  element.dataset.clipStart = start;
+  element.dataset.clipEnd = end;
+  container.append(element);
+  return element;
+}
 
-    expect(intro.hasAttribute("data-active")).toBe(false);
-    expect(hero.hasAttribute("data-active")).toBe(true);
-    expect(outro.hasAttribute("data-active")).toBe(false);
-    expect(previous).toEqual(new Set(["hero"]));
+function Harness({ version, heroStart = 2 }: { version: number; heroStart?: number }) {
+  const scrollRef = useRef<HTMLDivElement>(null);
+  useTimelineActiveClips({
+    scrollRef,
+    currentTime: 0,
+    clipStateVersion: 0,
+    elementStateVersion: version,
   });
+  return React.createElement(
+    "div",
+    { ref: scrollRef },
+    React.createElement("div", {
+      "data-clip": "true",
+      "data-el-id": "intro",
+      "data-clip-start": "0",
+      "data-clip-end": "1",
+    }),
+    React.createElement("div", {
+      "data-clip": "true",
+      "data-el-id": "hero",
+      "data-clip-start": String(heroStart),
+      "data-clip-end": String(heroStart + 1),
+    }),
+  );
+}
 
-  it("never marks hidden clips active inside their time window", () => {
-    const container = document.createElement("div");
-    const hidden = appendClip(container, "hidden", "0", "5");
-    const visible = appendClip(container, "visible", "0", "5");
-    hidden.dataset.clipHidden = "true";
-    const previous = new Set<string>();
-
-    updateTimelineActiveClipClasses(container, previous, 2);
-
-    expect(hidden.hasAttribute("data-active")).toBe(false);
-    expect(visible.hasAttribute("data-active")).toBe(true);
-    expect(previous).toEqual(new Set(["visible"]));
+describe("timeline active clips", () => {
+  it("uses model timing and keeps the end boundary inclusive", () => {
+    const element = clip("hero", 2, 3);
+    expect(isTimelineClipActive(element, 2)).toBe(true);
+    expect(isTimelineClipActive(element, 5)).toBe(true);
+    expect(isTimelineClipActive(element, 5.001)).toBe(false);
   });
 
-  it("diffs against the previous active set", () => {
-    const container = document.createElement("div");
-    const intro = appendClip(container, "intro", "0", "2");
-    const hero = appendClip(container, "hero", "2", "5");
-    const previous = new Set(["intro"]);
-    intro.toggleAttribute("data-active", true);
-
-    updateTimelineActiveClipClasses(container, previous, 2);
-
-    expect(intro.hasAttribute("data-active")).toBe(true);
-    expect(hero.hasAttribute("data-active")).toBe(true);
-    expect(previous).toEqual(new Set(["intro", "hero"]));
+  it("never activates hidden or invalid clips", () => {
+    expect(isTimelineClipActive(clip("hidden", 0, 5, true), 2)).toBe(false);
+    expect(isTimelineClipActive(clip("invalid", Number.NaN, 5), 2)).toBe(false);
   });
 
-  it("keeps a clip active through its inclusive end boundary", () => {
+  it("synchronizes mounted clip attributes", () => {
     const container = document.createElement("div");
     const intro = appendClip(container, "intro", "0", "2");
+    const hero = appendClip(container, "hero", "2", "5");
     const previous = new Set<string>();
 
-    updateTimelineActiveClipClasses(container, previous, 0);
-
-    expect(intro.hasAttribute("data-active")).toBe(true);
-    expect(previous).toEqual(new Set(["intro"]));
-
-    updateTimelineActiveClipClasses(container, previous, 2);
-
-    expect(intro.hasAttribute("data-active")).toBe(true);
-    expect(previous).toEqual(new Set(["intro"]));
-
-    updateTimelineActiveClipClasses(container, previous, 2.001);
+    updateTimelineActiveClipClasses(container, previous, 2.25);
 
     expect(intro.hasAttribute("data-active")).toBe(false);
-    expect(previous).toEqual(new Set());
+    expect(hero.hasAttribute("data-active")).toBe(true);
+    expect(previous).toEqual(new Set(["hero"]));
   });
 
-  it("re-applies data-active to a fresh DOM node that stayed active across a re-render", () => {
-    // A clip that moves lanes on a reorder remounts as a new element. It stays
-    // in the previous active set, so the plain diff would skip it and leave the
-    // new node without data-active. syncAll must force the attribute on.
+  it("re-applies active state when a clip remounts inside the current window", () => {
     const container = document.createElement("div");
     appendClip(container, "hero", "0", "5");
     const previous = new Set<string>();
     updateTimelineActiveClipClasses(container, previous, 2);
-    expect(previous).toEqual(new Set(["hero"]));
 
-    // Simulate a remount: replace the hero clip's DOM node (no data-active).
     container.replaceChildren();
-    const heroReborn = appendClip(container, "hero", "0", "5");
-    expect(heroReborn.hasAttribute("data-active")).toBe(false);
-
-    // Diff-only would skip it (still active → unchanged); syncAll re-applies.
+    const remounted = appendClip(container, "hero", "0", "5");
     updateTimelineActiveClipClasses(container, previous, 2, true);
-    expect(heroReborn.hasAttribute("data-active")).toBe(true);
+
+    expect(remounted.hasAttribute("data-active")).toBe(true);
   });
 
-  it("ignores clips with invalid timing data", () => {
-    const container = document.createElement("div");
-    const missingId = appendClip(container, "", "0", "2");
-    const missingTiming = appendClip(container, "bad", "", "2");
-    const previous = new Set<string>();
+  it("moves active state with live playback without changing store time", async () => {
+    const host = document.createElement("div");
+    document.body.append(host);
+    const root = createRoot(host);
+    await act(async () => root.render(React.createElement(Harness, { version: 0 })));
+
+    const intro = host.querySelector<HTMLElement>('[data-el-id="intro"]');
+    const hero = host.querySelector<HTMLElement>('[data-el-id="hero"]');
+    expect(intro?.hasAttribute("data-active")).toBe(true);
+    expect(hero?.hasAttribute("data-active")).toBe(false);
+
+    act(() => liveTime.notify(2.5));
+    expect(intro?.hasAttribute("data-active")).toBe(false);
+    expect(hero?.hasAttribute("data-active")).toBe(true);
 
-    updateTimelineActiveClipClasses(container, previous, 1);
+    await act(async () => root.render(React.createElement(Harness, { version: 1, heroStart: 4 })));
+    act(() => liveTime.notify(2.5));
+    expect(host.querySelector('[data-el-id="hero"]')?.hasAttribute("data-active")).toBe(false);
 
-    expect(missingId.hasAttribute("data-active")).toBe(false);
-    expect(missingTiming.hasAttribute("data-active")).toBe(false);
-    expect(previous).toEqual(new Set());
+    await act(async () => root.unmount());
+    host.remove();
   });
 });