@hyperframes/studio 0.8.81 → 0.8.82

package/src/components/editor/propertyPanelAudioFxGroup.test.tsx

@@ -80,6 +80,8 @@ function byTextButton(host: HTMLElement, text: string): HTMLButtonElement | unde
   return Array.from(host.querySelectorAll("button")).find((b) => b.textContent?.includes(text));
 }
 
+const SAMPLE_RATE = 48000;
+
 function mount(dataAttributes: Record<string, string>, alone = false, voices = 2) {
   // Every write is quiet: persisted without the preview reload that would
   // restart every playing track, but with a selection resync so the panel sees
@@ -459,29 +461,8 @@ describe("AudioFxGroup dynamic carve", () => {
 
   afterEach(() => vi.unstubAllGlobals());
 
-  /**
-   * Hover-auditioning the leveller has to measure before there is anything to
-   * hear, and measuring a long voiceover takes seconds — by which time the
-   * pointer has usually moved on. Applying then would put levelling on a track
-   * nobody asked to level, through a channel that does not persist: audible,
-   * absent from the document, and gone on the next reload.
-   */
-  it("levels the part of the file the clip plays, not the file from its start", async () => {
-    // A lane's `t` is seconds from the start of the CLIP, but the decode is the
-    // whole file — so a trimmed clip got an envelope offset by exactly
-    // `media-start`, and every correction landed early.
-    //
-    // The file is loud 0-2s, quiet 2-5s, loud again 5-8s, and the clip trims the
-    // first 2s. Measured from the clip's own zero, t=0.5 sits in the quiet
-    // passage and wants a real lift; measured from the file's zero it sits in
-    // the loud head and wants none. That gap is the bug.
-    const sampleRate = 48000;
-    const data = new Float32Array(sampleRate * 8);
-    for (let i = 0; i < data.length; i++) {
-      const t = i / sampleRate;
-      const amp = t < 2 ? 0.5 : t < 5 ? 0.05 : 0.5;
-      data[i] = amp * Math.sin(2 * Math.PI * 300 * t);
-    }
+  /** Runs Even Out Levels on a decode of `data` and returns the fx lane's nearest point to a clip time. */
+  async function levelledLane(data: Float32Array, dataAttributes: Record<string, string>) {
     vi.stubGlobal(
       "fetch",
       vi.fn(async () => ({ arrayBuffer: async () => new ArrayBuffer(8) })),
@@ -489,15 +470,10 @@ describe("AudioFxGroup dynamic carve", () => {
     vi.stubGlobal(
       "OfflineAudioContext",
       class {
-        decodeAudioData = async () => ({ sampleRate, getChannelData: () => data });
+        decodeAudioData = async () => ({ sampleRate: SAMPLE_RATE, getChannelData: () => data });
       },
     );
-
-    const { host, onSetAttributeQuiet } = mount({
-      "fx-chain": CHAIN,
-      "media-start": "2",
-      duration: "6",
-    });
+    const { host, onSetAttributeQuiet } = mount({ "fx-chain": CHAIN, ...dataAttributes });
     document.getElementById("bed")?.setAttribute("src", "bed.wav");
     act(() => byTextButton(host, "Audio FX")?.click());
     act(() => byTextButton(host, "+ effect")?.click());
@@ -513,12 +489,75 @@ describe("AudioFxGroup dynamic carve", () => {
       JSON.parse(String(write[1])).lanes as { target: string; points: { t: number; v: number }[] }[]
     ).find((l) => l.target.startsWith("fx."));
     if (!lane) throw new Error("no fx lane");
-    const near = (t: number) =>
+    return (t: number) =>
       lane.points.reduce((best, p) => (Math.abs(p.t - t) < Math.abs(best.t - t) ? p : best));
-    // The quiet passage, from the clip's zero, gets its lift.
+  }
+
+  /** A 300 Hz tone, 16 s long: quiet between `quietFrom` and `quietTo`, loud elsewhere. */
+  function toneWithQuietPassage(quietFrom: number, quietTo: number): Float32Array {
+    const data = new Float32Array(SAMPLE_RATE * 16);
+    for (let i = 0; i < data.length; i++) {
+      const t = i / SAMPLE_RATE;
+      data[i] = (t >= quietFrom && t < quietTo ? 0.05 : 0.5) * Math.sin(2 * Math.PI * 300 * t);
+    }
+    return data;
+  }
+
+  it("levels the part of the file the clip plays, not the file from its start", async () => {
+    // A lane's `t` is seconds from the start of the CLIP, but the decode is the
+    // whole file. The file is quiet 2-5 s and the clip trims the first 2 s, so
+    // from the clip's zero t=0.5 wants a real lift; from the file's zero it wants none.
+    const near = await levelledLane(toneWithQuietPassage(2, 5), {
+      "playback-start": "2",
+      "media-start": "0",
+      duration: "6",
+    });
     expect(near(0.5).v).toBeGreaterThan(4);
   });
 
+  it.each<{
+    label: string;
+    attrs: Record<string, string>;
+    quiet: [number, number];
+    quietAt: number;
+    loudAt: number;
+  }>([
+    // 2x: 6 s of clip play source 0-12 s; source 2-6 s is quiet, so clip 1-3 s wants lift.
+    {
+      label: "2x",
+      attrs: { "playback-rate": "2", duration: "6" },
+      quiet: [2, 6],
+      quietAt: 2,
+      loudAt: 5,
+    },
+    // 0.5x: 8 s of clip play source 0-4 s; source 1-2 s is quiet, so clip 2-4 s wants lift and clip 1 s none.
+    {
+      label: "0.5x",
+      attrs: { "playback-rate": "0.5", duration: "8" },
+      quiet: [1, 2],
+      quietAt: 3.5,
+      loudAt: 1,
+    },
+    // A rate lane holding 2x: playback reads the lane, not the missing data-playback-rate.
+    {
+      label: "a 2x rate lane",
+      attrs: {
+        automation:
+          '{"version":1,"lanes":[{"target":"rate","points":[{"t":0,"v":2},{"t":6,"v":2}]}]}',
+        duration: "6",
+      },
+      quiet: [2, 6],
+      quietAt: 2,
+      loudAt: 5,
+    },
+  ])("levels on the clip's clock at $label", async (c) => {
+    const near = await levelledLane(toneWithQuietPassage(...c.quiet), c.attrs);
+    expect({ quiet: near(c.quietAt).v > 4, loud: near(c.loudAt).v < 2 }).toEqual({
+      quiet: true,
+      loud: true,
+    });
+  });
+
   it("removes every lane a preset owned, not just the last node's", () => {
     // Each write is computed from the same render-time snapshot and replaces the
     // whole attribute, so removing lanes one node at a time kept only the final

package/src/components/editor/propertyPanelFlatMediaSection.test.tsx

@@ -4,7 +4,10 @@ import React, { act } from "react";
 import { createRoot } from "react-dom/client";
 import { afterEach, describe, expect, it, vi } from "vitest";
 import { FlatMediaSection } from "./propertyPanelFlatMediaSection";
+import { MediaSection } from "./propertyPanelMediaSection";
 import type { DomEditSelection } from "./domEditing";
+import { formatTimingValue } from "./propertyPanelHelpers";
+import { readMediaOffsetSeconds } from "@hyperframes/parsers/media-duration";
 
 (globalThis as unknown as { IS_REACT_ACT_ENVIRONMENT: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
 
@@ -608,6 +611,65 @@ describe("FlatMediaSection — audio clips", () => {
     act(() => root.unmount());
   });
 
+  it.each<Record<string, string>>([
+    { "playback-start": "1", "media-start": "5" },
+    { "playback-start": "-1", "media-start": "1" },
+    { "media-start": "1" },
+    {},
+  ])("shows and edits the in-point playback reads (%o)", (inPoint) => {
+    const attrs: Record<string, string> = { "source-duration": "45", ...inPoint };
+    const playbackReads = () => readMediaOffsetSeconds((name) => attrs[name.slice(5)]);
+    const onSetAttribute = vi.fn((name: string, value: string) => {
+      attrs[name] = value;
+    });
+    const { host, root } = renderWithRate(makeAudioElement(attrs), onSetAttribute);
+    const readout = host
+      .querySelector('[data-flat-slider-track="true"][aria-label="Media start"]')
+      ?.parentElement?.querySelector<HTMLElement>('[data-flat-slider-value="true"]');
+    if (!readout) throw new Error("expected Media start readout");
+    expect(readout.textContent).toBe(formatTimingValue(playbackReads()));
+    act(() => readout.dispatchEvent(new MouseEvent("click", { bubbles: true })));
+    const input = host.querySelector<HTMLInputElement>('[data-flat-slider-input="true"]');
+    if (!input) throw new Error("expected Media start input");
+    act(() => {
+      typeInto(input, "3");
+      input.dispatchEvent(new KeyboardEvent("keydown", { key: "Enter", bubbles: true }));
+    });
+    expect(playbackReads()).toBe(3);
+    act(() => root.unmount());
+  });
+
+  it.each<Record<string, string>>([
+    { "playback-start": "1", "media-start": "5" },
+    { "media-start": "1" },
+  ])("the Design panel's Media start slider writes where playback reads (%o)", (inPoint) => {
+    const attrs: Record<string, string> = { "source-duration": "45", ...inPoint };
+    const onSetAttribute = vi.fn((name: string, value: string) => {
+      attrs[name] = value;
+    });
+    const host = document.createElement("div");
+    document.body.append(host);
+    const root = createRoot(host);
+    act(() => {
+      root.render(
+        <MediaSection
+          projectDir={null}
+          element={makeAudioElement(attrs)}
+          styles={{}}
+          onSetStyle={vi.fn()}
+          onSetAttribute={onSetAttribute}
+          onSetHtmlAttribute={vi.fn()}
+        />,
+      );
+    });
+    const slider = host.querySelector<HTMLInputElement>('input[aria-label="Media start"]');
+    if (!slider) throw new Error("expected Media start slider");
+    act(() => typeInto(slider, "300"));
+    act(() => slider.dispatchEvent(new MouseEvent("mouseup", { bubbles: true })));
+    expect(readMediaOffsetSeconds((name) => attrs[name.slice(5)])).toBe(3);
+    act(() => root.unmount());
+  });
+
   it("commits a typed volume in dB and a typed fade in seconds", () => {
     const { host, root, onSetAttribute } = renderWithRate(makeAudioElement());
     const readouts = host.querySelectorAll<HTMLElement>('[data-flat-slider-value="true"]');

package/src/components/editor/propertyPanelFlatMediaSection.tsx

@@ -8,6 +8,7 @@ import {
   formatNumericValue,
   formatTimingValue,
   parseNumericValue,
+  readClipInPoint,
   stripQueryAndHash,
 } from "./propertyPanelHelpers";
 import { FlatSelectRow, FlatSlider } from "./propertyPanelFlatPrimitives";
@@ -88,10 +89,7 @@ export function FlatMediaSection({
       ? automatedVolumeValue
       : (parseNumericValue(element.dataAttributes.volume ?? "") ?? 1);
   const volumeFaderPosition = audioGainToFaderPosition(volume);
-  const mediaStart =
-    Number.parseFloat(
-      element.dataAttributes["media-start"] ?? element.dataAttributes["playback-start"] ?? "0",
-    ) || 0;
+  const { mediaStart, mediaStartAttr } = readClipInPoint(element.dataAttributes);
   const constantRate = Number.parseFloat(element.dataAttributes["playback-rate"] ?? "1") || 1;
   const playbackRate =
     rate?.automated && rate.automatedValue !== undefined ? rate.automatedValue : constantRate;
@@ -340,11 +338,11 @@ export function FlatMediaSection({
             max={mediaStartMax * 100}
             tier={mediaStart === 0 ? "default" : "explicitCustom"}
             displayValue={formatTimingValue(mediaStart)}
-            onCommit={(next) => void onSetAttribute("media-start", (next / 100).toFixed(2))}
+            onCommit={(next) => void onSetAttribute(mediaStartAttr, (next / 100).toFixed(2))}
             onCommitText={(text) => {
               const seconds = parseSecondsInput(text);
               if (seconds === null) return false;
-              void onSetAttribute("media-start", Math.min(seconds, mediaStartMax).toFixed(2));
+              void onSetAttribute(mediaStartAttr, Math.min(seconds, mediaStartMax).toFixed(2));
               return true;
             }}
           />

package/src/components/editor/propertyPanelHelpers.ts

@@ -5,6 +5,10 @@ import type { GsapAnimation } from "@hyperframes/parsers/gsap-parser";
 import type { TimelineElement } from "../../player";
 import { roundToCenti } from "../../utils/rounding";
 import { findPreviewNode } from "./domEditingElement";
+import {
+  playbackStartAttributeForElement,
+  readPlaybackStartAttributes,
+} from "../../player/lib/timelineElementHelpers";
 
 export type {
   BackgroundRemovalProgress,
@@ -225,6 +229,17 @@ export function parseNumericValue(value: string | undefined): number | null {
   return Number.isFinite(parsed) ? parsed : null;
 }
 
+export function readClipInPoint(dataAttributes: Record<string, string> | undefined): {
+  mediaStart: number;
+  mediaStartAttr: string;
+} {
+  const inPoint = readPlaybackStartAttributes((name) => dataAttributes?.[name.slice(5)]);
+  return {
+    mediaStart: inPoint.playbackStart ?? 0,
+    mediaStartAttr: playbackStartAttributeForElement(inPoint).slice(5),
+  };
+}
+
 export function formatTimingValue(seconds: number): string {
   if (!Number.isFinite(seconds) || seconds < 0) return "0.00s";
   return `${seconds.toFixed(2)}s`;

package/src/components/editor/propertyPanelMediaSection.tsx

@@ -8,6 +8,7 @@ import {
   formatTimingValue,
   LABEL,
   parseNumericValue,
+  readClipInPoint,
   RESPONSIVE_GRID,
   stripQueryAndHash,
 } from "./propertyPanelHelpers";
@@ -57,10 +58,7 @@ export function MediaSection({
   const volume = parseNumericValue(element.dataAttributes.volume ?? "") ?? 1;
   const volumeFaderPosition = audioGainToFaderPosition(volume);
 
-  const mediaStart =
-    Number.parseFloat(
-      element.dataAttributes["media-start"] ?? element.dataAttributes["playback-start"] ?? "0",
-    ) || 0;
+  const { mediaStart, mediaStartAttr } = readClipInPoint(element.dataAttributes);
 
   const hasLoop = el.hasAttribute("loop");
   const hasMuted = el.hasAttribute("muted");
@@ -297,7 +295,7 @@ export function MediaSection({
                 displayValue={formatTimingValue(mediaStart)}
                 formatDisplayValue={(next) => formatTimingValue(next / 100)}
                 onCommit={(next) => {
-                  void onSetAttribute("media-start", (next / 100).toFixed(2));
+                  void onSetAttribute(mediaStartAttr, (next / 100).toFixed(2));
                 }}
               />
             </div>

package/src/components/editor/reapplyBoxSizeAfterSeek.test.ts

@@ -1,6 +1,6 @@
 // @vitest-environment jsdom
 import { afterEach, describe, expect, it } from "vitest";
-import { reapplyPositionEditsAfterSeek } from "./manualEditsDom";
+import { reapplyPositionEditsAfterSeek } from "./manualEditsSeekReapply";
 import { STUDIO_BOX_SIZE_ATTR, STUDIO_HEIGHT_PROP, STUDIO_WIDTH_PROP } from "./manualEditsTypes";
 
 /**

package/src/components/editor/reapplyPositionEditsAfterSeek.test.ts

@@ -0,0 +1,117 @@
+// @vitest-environment jsdom
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { reapplyPositionEditsAfterSeek } from "./manualEditsSeekReapply";
+import {
+  STUDIO_PATH_OFFSET_ATTR,
+  STUDIO_ROTATION_ATTR,
+  STUDIO_ROTATION_PROP,
+} from "./manualEditsTypes";
+import { STUDIO_MOTION_TIMELINE_ID } from "./studioMotionTypes";
+
+describe("reapplyPositionEditsAfterSeek", () => {
+  afterEach(() => {
+    document.body.innerHTML = "";
+    vi.restoreAllMocks();
+  });
+
+  it("does no per-edit work on a film Studio never edited", () => {
+    document.body.innerHTML = '<div id="a"></div><div id="b"></div>';
+    const queryAll = vi.spyOn(document, "querySelectorAll");
+
+    reapplyPositionEditsAfterSeek(document);
+
+    expect(queryAll).not.toHaveBeenCalled();
+  });
+
+  it("looks nothing up on later seeks of a film Studio never edited", () => {
+    document.body.innerHTML = '<div id="a"></div><div id="b"></div>';
+    const query = vi.spyOn(document, "querySelector");
+    reapplyPositionEditsAfterSeek(document);
+    // A comma selector list walks the whole DOM in Chrome; lone attribute selectors do not.
+    for (const [selector] of query.mock.calls) expect(selector).not.toContain(",");
+    query.mockClear();
+    const queryAll = vi.spyOn(document, "querySelectorAll");
+
+    reapplyPositionEditsAfterSeek(document);
+
+    expect(query).not.toHaveBeenCalled();
+    expect(queryAll).not.toHaveBeenCalled();
+  });
+
+  it("looks up no more on a film with an edit than the reapply itself does", () => {
+    document.body.innerHTML = `<div id="a" ${STUDIO_ROTATION_ATTR}="true" style="${STUDIO_ROTATION_PROP}: 8deg"></div>`;
+    reapplyPositionEditsAfterSeek(document);
+    const query = vi.spyOn(document, "querySelector");
+    const queryAll = vi.spyOn(document, "querySelectorAll");
+
+    reapplyPositionEditsAfterSeek(document);
+
+    // Three edit kinds, each with a legacy mark, plus motion: seven, as before the skip.
+    expect(query.mock.calls.length + queryAll.mock.calls.length).toBeLessThanOrEqual(7);
+  });
+
+  it("reapplies an edit made after the last seek, in the same task", () => {
+    document.body.innerHTML = '<div id="a"></div>';
+    reapplyPositionEditsAfterSeek(document);
+    const el = document.getElementById("a") as HTMLElement;
+    el.setAttribute(STUDIO_ROTATION_ATTR, "true");
+    el.style.setProperty(STUDIO_ROTATION_PROP, "8deg");
+
+    reapplyPositionEditsAfterSeek(document);
+
+    expect(el.style.getPropertyValue("rotate")).toContain(STUDIO_ROTATION_PROP);
+  });
+
+  it("reapplies an edited element inserted after the last seek", async () => {
+    document.body.innerHTML = '<div id="a"></div>';
+    reapplyPositionEditsAfterSeek(document);
+    const queryAll = vi.spyOn(document, "querySelectorAll");
+    reapplyPositionEditsAfterSeek(document);
+    expect(queryAll).not.toHaveBeenCalled(); // the film reads as unedited
+    queryAll.mockRestore();
+    // A paste, scene swap or undo puts back a node that already carries its mark.
+    const el = document.createElement("div");
+    el.setAttribute(STUDIO_ROTATION_ATTR, "true");
+    el.style.setProperty(STUDIO_ROTATION_PROP, "8deg");
+    document.body.append(el);
+    await Promise.resolve();
+
+    reapplyPositionEditsAfterSeek(document);
+
+    expect(el.style.getPropertyValue("rotate")).toContain(STUDIO_ROTATION_PROP);
+  });
+
+  it("does not rescan after a style write, the one GSAP makes every frame", async () => {
+    document.body.innerHTML = '<div id="a"></div>';
+    reapplyPositionEditsAfterSeek(document);
+    (document.getElementById("a") as HTMLElement).style.setProperty("opacity", "0.5");
+    await Promise.resolve();
+    const query = vi.spyOn(document, "querySelector");
+
+    reapplyPositionEditsAfterSeek(document);
+
+    expect(query).not.toHaveBeenCalled();
+  });
+
+  it("still clears a motion timeline whose marks an undo removed", () => {
+    document.body.innerHTML = '<div id="a"></div>';
+    const kill = vi.fn();
+    const win = window as unknown as { __timelines?: Record<string, unknown> };
+    win.__timelines = { [STUDIO_MOTION_TIMELINE_ID]: { kill } };
+
+    reapplyPositionEditsAfterSeek(document);
+
+    expect(kill).toHaveBeenCalledTimes(1);
+    delete win.__timelines;
+  });
+
+  it("still migrates a legacy double-prefixed edit mark", () => {
+    document.body.innerHTML = `<div id="a" data-${STUDIO_PATH_OFFSET_ATTR}="true"></div>`;
+
+    reapplyPositionEditsAfterSeek(document);
+
+    const el = document.getElementById("a");
+    expect(el?.getAttribute(STUDIO_PATH_OFFSET_ATTR)).toBe("true");
+    expect(el?.hasAttribute(`data-${STUDIO_PATH_OFFSET_ATTR}`)).toBe(false);
+  });
+});

package/src/components/editor/useFxLevelling.ts

@@ -14,7 +14,14 @@ import {
   type HfAudioFxChain,
 } from "@hyperframes/core/audio-fx";
 import { levellingResult, removeLevelling } from "@hyperframes/core/audio-leveller";
-import type { HfAutomation } from "@hyperframes/core/audio-automation";
+import type { HfAutomation, HfAutomationPoint } from "@hyperframes/core/audio-automation";
+import {
+  resolveRateSpec,
+  sourceTimeAt,
+  timeAtSourceTime,
+  type RateSpec,
+} from "@hyperframes/core/speed-ramp";
+import { readPlaybackRate } from "@hyperframes/parsers/media-duration";
 import {
   automationAttrValue,
   HF_AUDIO_AUTOMATION_ATTR,
@@ -23,6 +30,7 @@ import {
 } from "./propertyPanelAutomation";
 import { trackLeveller } from "./audioFxTelemetry.js";
 import type { DomEditSelection } from "./domEditingTypes";
+import { readClipInPoint } from "./propertyPanelHelpers";
 import { useAuditionTransport } from "./useAuditionTransport.js";
 
 /**
@@ -80,37 +88,54 @@ export function useFxLevelling(
    *
    * A lane's `t` is seconds from the start of the CLIP, but the decode is the
    * whole file from its first sample — so measuring a trimmed clip produced an
-   * envelope offset by the trim, and every correction landed early by exactly
-   * `media-start`. Slicing here is what puts the two clocks back on the same
+   * envelope offset by the trim, and every correction landed early by exactly the
+   * in-point. Slicing here is what puts the two clocks back on the same
    * zero.
    */
-  const clipWindow = (audio: { samples: Float32Array; sampleRate: number }) => {
-    const mediaStart = positiveFinite(Number(element.dataAttributes?.["media-start"] ?? 0));
+  const clipWindow = (audio: { samples: Float32Array; sampleRate: number }, rate: RateSpec) => {
+    const { mediaStart } = readClipInPoint(element.dataAttributes);
     const duration = positiveFinite(Number(element.dataAttributes?.["duration"] ?? Number.NaN));
     const from = mediaStart
       ? Math.min(audio.samples.length, Math.floor(mediaStart * audio.sampleRate))
       : 0;
     const to = duration
-      ? Math.min(audio.samples.length, from + Math.ceil(duration * audio.sampleRate))
+      ? Math.min(
+          audio.samples.length,
+          from + Math.ceil(sourceTimeAt(rate, duration) * audio.sampleRate),
+        )
       : audio.samples.length;
     return from === 0 && to === audio.samples.length
       ? audio.samples
       : audio.samples.subarray(from, to);
   };
 
+  /** The levelled chain and its lane, with the lane moved from the source's clock onto the clip's. */
+  const measureLevelling = (audio: { samples: Float32Array; sampleRate: number }) => {
+    const attr = (name: string) => element.dataAttributes?.[name.slice(5)];
+    const rate = resolveRateSpec(attr("data-automation"), readPlaybackRate(attr));
+    const result = levellingResult(chain, clipWindow(audio, rate), audio.sampleRate);
+    if (!result) return null;
+    const lane = result.automation.lanes[0];
+    const toClipTime = (point: HfAutomationPoint) => ({
+      ...point,
+      t: Number(timeAtSourceTime(rate, point.t).toFixed(3)),
+    });
+    return { chain: result.chain, lane: lane && { ...lane, points: lane.points.map(toClipTime) } };
+  };
+
   const runLeveller = async (): Promise<void> => {
     setAnalysing(true);
     try {
       const audio = await decodeTrack();
       if (!audio) return;
-      const result = levellingResult(chain, clipWindow(audio), audio.sampleRate);
+      const result = measureLevelling(audio);
       if (!result) return;
       trackLeveller("run");
       await onSetAttributeQuiet(HF_AUDIO_FX_ATTR, serializeAudioFxChain(result.chain));
       // Merged by target, never written wholesale: the script describes its own
       // lane only, and replacing the attribute would take the carve's lanes and
       // the volume lane with it.
-      const lane = result.automation.lanes[0];
+      const lane = result.lane;
       if (lane) {
         void onSetAttributeQuiet(
           HF_AUDIO_AUTOMATION_ATTR,
@@ -160,10 +185,10 @@ export function useFxLevelling(
       const audio = await decodeTrack();
       // Gone, or superseded by a later hover. Either way this result is stale.
       if (!audio || run !== auditionRun.current) return;
-      const result = levellingResult(chain, clipWindow(audio), audio.sampleRate);
+      const result = measureLevelling(audio);
       if (!result || run !== auditionRun.current) return;
       void onSetAttributeLive(HF_AUDIO_FX_ATTR, serializeAudioFxChain(result.chain));
-      const lane = result.automation.lanes[0];
+      const lane = result.lane;
       if (lane) {
         void onSetAttributeLive(
           HF_AUDIO_AUTOMATION_ATTR,

package/src/components/nle/AudioMeterStrip.test.tsx

@@ -11,6 +11,7 @@ import { useAudioMetersVisible } from "../../utils/audioMeterVisibility";
 import { SILENT_CHANNEL } from "../../utils/audioMeterMath";
 import {
   AudioMeterStrip,
+  type AudioMeterStripProps,
   evictGoneMeterState,
   followMeterHook,
   stepAndPaintStrips,
@@ -20,8 +21,9 @@ import {
 
 const iframe = { contentWindow: null as unknown };
 const previewIframeRef = { current: iframe };
+let shell: { previewIframeRef: typeof previewIframeRef } | null = { previewIframeRef };
 vi.mock("../../contexts/StudioContext", () => ({
-  useStudioShellContext: () => ({ previewIframeRef }),
+  useStudioShellContextOptional: () => shell,
 }));
 
 const onSetAudioGroupAttributeLive = vi.fn();
@@ -88,6 +90,7 @@ const tick = () => {
 };
 
 beforeEach(() => {
+  shell = { previewIframeRef };
   frames = [];
   vi.stubGlobal("requestAnimationFrame", (cb: FrameRequestCallback) => frames.push(cb));
   vi.stubGlobal("cancelAnimationFrame", () => {});
@@ -103,11 +106,11 @@ afterEach(() => {
   vi.unstubAllGlobals();
 });
 
-function mount() {
+function mount(props: AudioMeterStripProps = {}) {
   const host = document.createElement("div");
   document.body.append(host);
   const root = createRoot(host);
-  act(() => root.render(<AudioMeterStrip />));
+  act(() => root.render(<AudioMeterStrip {...props} />));
   roots.push(root);
   return { host, root };
 }
@@ -177,6 +180,26 @@ describe("AudioMeterStrip", () => {
     expect(second.read).toHaveBeenCalled();
   });
 
+  it("reads a host's preview iframe over the shell's", () => {
+    usePlayerStore.setState({ elements: [clip({ audioGroup: "vo" })] });
+    const shellHook = makeHook();
+    setHook(shellHook);
+    const hostHook = makeHook();
+    const hostIframe = { contentWindow: { __hf: { audioMeter: hostHook } } };
+    mount({ previewIframeRef: { current: hostIframe as unknown as HTMLIFrameElement } });
+    tick();
+    expect(hostHook.start).toHaveBeenCalledTimes(1);
+    expect(shellHook.start).not.toHaveBeenCalled();
+  });
+
+  it("mounts with no shell and no preview iframe", () => {
+    shell = null;
+    usePlayerStore.setState({ elements: [clip({ audioGroup: "vo" })] });
+    const { host } = mount();
+    tick();
+    expect(host.querySelector("[data-testid=audio-meter-strip]")).not.toBeNull();
+  });
+
   it("keeps authored gain 2 above unity and writes exactly 1 at the midpoint", () => {
     usePlayerStore.setState({ elements: [clip({ audioGroup: "vo", audioGroupVolume: 2 })] });
     const { host } = mount();