@hyperframes/studio 0.8.186 → 0.8.188

package/dist/index.html

@@ -14,7 +14,7 @@
         document.documentElement.dataset.theme = "paper";
       }
     </script>
-    <script type="module" crossorigin src="/assets/index-Dn5FAk2e.js"></script>
+    <script type="module" crossorigin src="/assets/index-M8lEpS0Q.js"></script>
     <link rel="stylesheet" crossorigin href="/assets/index-CESvLzz0.css">
   </head>
   <body>

package/dist/index.js

@@ -66847,7 +66847,7 @@ function useVolumeAutomation(element, currentTime, onSetAttributeQuiet, linkedSp
     if (!linkedSpeed) return writeOwn(edit);
     void linkedSpeed.commitAttribute(
       HF_AUDIO_AUTOMATION_ATTR2,
-      (raw2) => automationAttrValue(edit(readPanelAutomation(raw2, void 0))) || null,
+      (raw) => automationAttrValue(edit(readPanelAutomation(raw, void 0))) || null,
       "Edit speed"
     );
   };
@@ -66862,10 +66862,7 @@ function useVolumeAutomation(element, currentTime, onSetAttributeQuiet, linkedSp
       onCommitAt: (v) => writeLane((a) => withPointAt(a, target, clipTimeSec, v))
     };
   };
-  const raw = element.dataAttributes?.["volume"];
-  const parsed = raw ? Number(raw) : 1;
-  const current = Number.isFinite(parsed) ? parsed : 1;
-  const volume = laneBinding(VOLUME_TARGET3, current, writeOwn);
+  const volume = laneBinding(VOLUME_TARGET3, 1, writeOwn);
   const rateAttr = Number.parseFloat(element.dataAttributes?.["playback-rate"] ?? "");
   const rate = laneBinding(
     RATE_TARGET2,
@@ -67048,8 +67045,8 @@ function FlatMediaSection({
   const isImage = element.tagName === "img";
   const isVisualMedia = isVideo || isImage;
   const el = element.element;
-  const volume = volumeAutomated && automatedVolumeValue !== void 0 ? automatedVolumeValue : parseNumericValue(element.dataAttributes.volume ?? "") ?? 1;
-  const volumeFaderPosition = audioGainToFaderPosition3(volume);
+  const gain = parseNumericValue(element.dataAttributes.volume ?? "") ?? 1;
+  const volume = volumeAutomated && automatedVolumeValue !== void 0 ? automatedVolumeValue : 1;
   const { mediaStart, mediaStartAttr } = readClipInPoint(element.dataAttributes);
   const constantRate = Number.parseFloat(element.dataAttributes["playback-rate"] ?? "1") || 1;
   const playbackRate = rate?.automated && rate.automatedValue !== void 0 ? rate.automatedValue : constantRate;
@@ -67183,6 +67180,25 @@ function FlatMediaSection({
       ] })
     ] }),
     (isVideo || isAudio) && /* @__PURE__ */ jsxs134(Fragment48, { children: [
+      /* @__PURE__ */ jsx176(
+        FlatSlider,
+        {
+          label: "Gain",
+          value: audioGainToFaderPosition3(gain),
+          min: AUDIO_GAIN_FADER_MIN3,
+          max: AUDIO_GAIN_FADER_MAX3,
+          tier: gain === 1 ? "default" : "explicitCustom",
+          displayValue: audioGainToText3(gain),
+          centerTick: true,
+          onCommit: (next) => void onSetAttribute("volume", formatAudioGain4(audioFaderPositionToGain3(next))),
+          onCommitText: (text) => {
+            const next = parseGainInput(text);
+            if (next === null) return false;
+            void onSetAttribute("volume", formatAudioGain4(next));
+            return true;
+          }
+        }
+      ),
       /* @__PURE__ */ jsxs134(
         "div",
         {
@@ -67193,25 +67209,17 @@ function FlatMediaSection({
               FlatSlider,
               {
                 label: "Volume",
-                value: volumeFaderPosition,
+                value: audioGainToFaderPosition3(volume),
                 min: AUDIO_GAIN_FADER_MIN3,
                 max: AUDIO_GAIN_FADER_MAX3,
                 tier: volume === 1 ? "default" : "explicitCustom",
                 displayValue: audioGainToText3(volume),
                 centerTick: true,
-                onCommit: (next) => {
-                  const gain = audioFaderPositionToGain3(next);
-                  if (volumeAutomated) {
-                    onCommitVolumeAt?.(gain);
-                  } else {
-                    void onSetAttribute("volume", formatAudioGain4(gain));
-                  }
-                },
+                onCommit: (next) => onCommitVolumeAt?.(audioFaderPositionToGain3(next)),
                 onCommitText: (text) => {
-                  const gain = parseGainInput(text);
-                  if (gain === null) return false;
-                  if (volumeAutomated) onCommitVolumeAt?.(gain);
-                  else void onSetAttribute("volume", formatAudioGain4(gain));
+                  const next = parseGainInput(text);
+                  if (next === null) return false;
+                  onCommitVolumeAt?.(next);
                   return true;
                 }
               }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hyperframes/studio",
-  "version": "0.8.186",
+  "version": "0.8.188",
   "description": "",
   "repository": {
     "type": "git",
@@ -59,12 +59,12 @@
     "dockview-react": "8.3.1",
     "gsap": "^3.13.0",
     "mediabunny": "^1.45.3",
-    "@hyperframes/core": "0.8.186",
-    "@hyperframes/player": "0.8.186",
-    "@hyperframes/shader-transitions": "0.8.186",
-    "@hyperframes/studio-server": "0.8.186",
-    "@hyperframes/sdk": "0.8.186",
-    "@hyperframes/parsers": "0.8.186"
+    "@hyperframes/player": "0.8.188",
+    "@hyperframes/core": "0.8.188",
+    "@hyperframes/shader-transitions": "0.8.188",
+    "@hyperframes/studio-server": "0.8.188",
+    "@hyperframes/parsers": "0.8.188",
+    "@hyperframes/sdk": "0.8.188"
   },
   "devDependencies": {
     "@tailwindcss/vite": "^4.3.3",
@@ -81,7 +81,7 @@
     "vite": "^6.4.2",
     "vitest": "^4.1.11",
     "zustand": "^5.0.0",
-    "@hyperframes/producer": "0.8.186"
+    "@hyperframes/producer": "0.8.188"
   },
   "peerDependencies": {
     "react": "19",

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

@@ -9,6 +9,7 @@ import type { DomEditSelection } from "./domEditing";
 import type { PatchOperation } from "../../utils/sourcePatcher";
 import { formatTimingValue } from "./propertyPanelHelpers";
 import { readMediaOffsetSeconds } from "@hyperframes/parsers/media-duration";
+import { audioGainToFaderPosition } from "@hyperframes/core/audio-gain";
 
 (globalThis as unknown as { IS_REACT_ACT_ENVIRONMENT: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
 
@@ -163,7 +164,7 @@ describe("FlatMediaSection — volume/rate/media-start", () => {
     act(() => root.unmount());
   });
 
-  it("commits +12 dB of boost from the upper half of the volume fader", () => {
+  it("commits +12 dB of boost from the upper half of the gain fader", () => {
     const onSetAttribute = vi.fn();
     const element = makeVideoElement({ dataAttributes: { volume: "1" } });
     const host = document.createElement("div");
@@ -182,7 +183,7 @@ describe("FlatMediaSection — volume/rate/media-start", () => {
         />,
       );
     });
-    const volumeTrack = host.querySelectorAll('[data-flat-slider-track="true"]')[0];
+    const volumeTrack = host.querySelector('[data-flat-slider-track="true"][aria-label="Gain"]')!;
     Object.defineProperty(volumeTrack, "getBoundingClientRect", {
       value: () => ({ left: 0, width: 100, top: 0, height: 2, right: 100, bottom: 2 }),
     });
@@ -197,10 +198,8 @@ describe("FlatMediaSection — volume/rate/media-start", () => {
     act(() => root.unmount());
   });
 
-  it("writes through the envelope instead of the attribute once volume is automated", () => {
-    const onSetAttribute = vi.fn();
-    const onCommitVolumeAt = vi.fn();
-    const element = makeVideoElement({ dataAttributes: { volume: "1" } });
+  it("shows the clip's gain and its lane's level as two sliders", () => {
+    const element = makeVideoElement({ dataAttributes: { volume: "0.5" } });
     const host = document.createElement("div");
     document.body.append(host);
     const root = createRoot(host);
@@ -211,28 +210,62 @@ describe("FlatMediaSection — volume/rate/media-start", () => {
           element={element}
           styles={{}}
           onSetStyle={vi.fn()}
-          onSetAttribute={onSetAttribute}
+          onSetAttribute={vi.fn()}
           onSetHtmlAttribute={vi.fn()}
           onSetAttributeBatch={vi.fn()}
           volumeAutomated
-          onCommitVolumeAt={onCommitVolumeAt}
+          automatedVolumeValue={0.25}
         />,
       );
     });
-    const volumeTrack = host.querySelectorAll('[data-flat-slider-track="true"]')[0];
-    Object.defineProperty(volumeTrack, "getBoundingClientRect", {
-      value: () => ({ left: 0, width: 100, top: 0, height: 2, right: 100, bottom: 2 }),
-    });
-    act(() => {
-      volumeTrack.dispatchEvent(new MouseEvent("pointerdown", { bubbles: true, clientX: 100 }));
-      volumeTrack.dispatchEvent(new MouseEvent("pointerup", { bubbles: true, clientX: 100 }));
-    });
-    expect(onCommitVolumeAt).toHaveBeenCalledTimes(1);
-    expect(onCommitVolumeAt.mock.calls[0][0]).toBeCloseTo(3.981072, 6);
-    expect(onSetAttribute).not.toHaveBeenCalledWith("volume", expect.anything());
+    const [gain, volume] = host.querySelectorAll('[data-flat-slider-track="true"]');
+    expect(labelsOf(host).slice(0, 2)).toEqual(["Gain", "Volume"]);
+    expect(gain?.getAttribute("aria-valuenow")).toBe(String(audioGainToFaderPosition(0.5)));
+    expect(volume?.getAttribute("aria-valuenow")).toBe(String(audioGainToFaderPosition(0.25)));
     act(() => root.unmount());
   });
 
+  it.each([true, false])(
+    "writes Volume through the lane, never data-volume (automated: %s)",
+    (automated) => {
+      const onSetAttribute = vi.fn();
+      const onCommitVolumeAt = vi.fn();
+      const element = makeVideoElement({ dataAttributes: { volume: "1" } });
+      const host = document.createElement("div");
+      document.body.append(host);
+      const root = createRoot(host);
+      act(() => {
+        root.render(
+          <FlatMediaSection
+            projectDir={null}
+            element={element}
+            styles={{}}
+            onSetStyle={vi.fn()}
+            onSetAttribute={onSetAttribute}
+            onSetHtmlAttribute={vi.fn()}
+            onSetAttributeBatch={vi.fn()}
+            volumeAutomated={automated}
+            onCommitVolumeAt={onCommitVolumeAt}
+          />,
+        );
+      });
+      const volumeTrack = host.querySelector(
+        '[data-flat-slider-track="true"][aria-label="Volume"]',
+      )!;
+      Object.defineProperty(volumeTrack, "getBoundingClientRect", {
+        value: () => ({ left: 0, width: 100, top: 0, height: 2, right: 100, bottom: 2 }),
+      });
+      act(() => {
+        volumeTrack.dispatchEvent(new MouseEvent("pointerdown", { bubbles: true, clientX: 100 }));
+        volumeTrack.dispatchEvent(new MouseEvent("pointerup", { bubbles: true, clientX: 100 }));
+      });
+      expect(onCommitVolumeAt).toHaveBeenCalledTimes(1);
+      expect(onCommitVolumeAt.mock.calls[0][0]).toBeCloseTo(3.981072, 6);
+      expect(onSetAttribute).not.toHaveBeenCalledWith("volume", expect.anything());
+      act(() => root.unmount());
+    },
+  );
+
   it("commits a new rate value on slider track pointerdown", () => {
     const onSetAttribute = vi.fn();
     const element = makeVideoElement();
@@ -252,7 +285,7 @@ describe("FlatMediaSection — volume/rate/media-start", () => {
         />,
       );
     });
-    const rateTrack = host.querySelectorAll('[data-flat-slider-track="true"]')[1];
+    const rateTrack = host.querySelector('[data-flat-slider-track="true"][aria-label="Speed"]')!;
     Object.defineProperty(rateTrack, "getBoundingClientRect", {
       value: () => ({ left: 0, width: 100, top: 0, height: 2, right: 100, bottom: 2 }),
     });
@@ -284,7 +317,9 @@ describe("FlatMediaSection — volume/rate/media-start", () => {
         />,
       );
     });
-    const mediaStartTrack = host.querySelectorAll('[data-flat-slider-track="true"]')[2];
+    const mediaStartTrack = host.querySelector(
+      '[data-flat-slider-track="true"][aria-label="Media start"]',
+    )!;
     Object.defineProperty(mediaStartTrack, "getBoundingClientRect", {
       value: () => ({ left: 0, width: 100, top: 0, height: 2, right: 100, bottom: 2 }),
     });
@@ -465,7 +500,7 @@ describe("FlatMediaSection — audio clips", () => {
   it("shows Fade in / Fade out rows for audio, and for video only when it carries audio", () => {
     const audio = renderWithRate(makeAudioElement());
     expect(labelsOf(audio.host)).toEqual(
-      expect.arrayContaining(["Volume", "Speed", "Media start", "Fade in", "Fade out"]),
+      expect.arrayContaining(["Gain", "Volume", "Speed", "Media start", "Fade in", "Fade out"]),
     );
     act(() => audio.root.unmount());
 

package/src/components/editor/propertyPanelFlatMediaSection.tsx

@@ -64,7 +64,7 @@ export function FlatMediaSection({
   onSetAttribute: (attr: string, value: string) => void | Promise<void>;
   onSetHtmlAttribute: (attr: string, value: string | null) => void | Promise<void>;
   onSetAttributeBatch: CommitDomAttributeBatch;
-  /** A volume lane in the timeline drives the level; the slider writes a keyframe instead. */
+  /** A volume lane in the timeline drives the level; the Volume slider writes a keyframe. */
   volumeAutomated?: boolean;
   onAutomateVolume?: () => void;
   onRemoveVolumeAutomation?: () => void;
@@ -88,14 +88,10 @@ export function FlatMediaSection({
   const isVisualMedia = isVideo || isImage;
   const el = element.element;
 
-  // While a lane owns the level, the envelope's live value at the playhead is
-  // what the slider must show — the static attribute is only what the engine
-  // falls back to outside automation.
-  const volume =
-    volumeAutomated && automatedVolumeValue !== undefined
-      ? automatedVolumeValue
-      : (parseNumericValue(element.dataAttributes.volume ?? "") ?? 1);
-  const volumeFaderPosition = audioGainToFaderPosition(volume);
+  // Gain is `data-volume`, ahead of the effects; Volume is the lane's level at the
+  // playhead, unity without one. What plays is gain times level, as in an editor.
+  const gain = parseNumericValue(element.dataAttributes.volume ?? "") ?? 1;
+  const volume = volumeAutomated && automatedVolumeValue !== undefined ? automatedVolumeValue : 1;
   const { mediaStart, mediaStartAttr } = readClipInPoint(element.dataAttributes);
   const constantRate = Number.parseFloat(element.dataAttributes["playback-rate"] ?? "1") || 1;
   const playbackRate =
@@ -246,9 +242,25 @@ export function FlatMediaSection({
       )}
       {(isVideo || isAudio) && (
         <>
-          {/* While a lane owns the level, a commit writes a keyframe at the
-              playhead instead of the plain attribute — same slider, same
-              gesture, the write just goes through the envelope. */}
+          <FlatSlider
+            label="Gain"
+            value={audioGainToFaderPosition(gain)}
+            min={AUDIO_GAIN_FADER_MIN}
+            max={AUDIO_GAIN_FADER_MAX}
+            tier={gain === 1 ? "default" : "explicitCustom"}
+            displayValue={audioGainToText(gain)}
+            centerTick
+            onCommit={(next) =>
+              void onSetAttribute("volume", formatAudioGain(audioFaderPositionToGain(next)))
+            }
+            onCommitText={(text) => {
+              const next = parseGainInput(text);
+              if (next === null) return false;
+              void onSetAttribute("volume", formatAudioGain(next));
+              return true;
+            }}
+          />
+          {/* A commit writes a keyframe at the playhead, starting a lane when there is none. */}
           <div
             className="hf-volume-row flex items-center gap-1"
             data-volume-automated={volumeAutomated ? "" : undefined}
@@ -256,25 +268,17 @@ export function FlatMediaSection({
             <div className="min-w-0 flex-1">
               <FlatSlider
                 label="Volume"
-                value={volumeFaderPosition}
+                value={audioGainToFaderPosition(volume)}
                 min={AUDIO_GAIN_FADER_MIN}
                 max={AUDIO_GAIN_FADER_MAX}
                 tier={volume === 1 ? "default" : "explicitCustom"}
                 displayValue={audioGainToText(volume)}
                 centerTick
-                onCommit={(next) => {
-                  const gain = audioFaderPositionToGain(next);
-                  if (volumeAutomated) {
-                    onCommitVolumeAt?.(gain);
-                  } else {
-                    void onSetAttribute("volume", formatAudioGain(gain));
-                  }
-                }}
+                onCommit={(next) => onCommitVolumeAt?.(audioFaderPositionToGain(next))}
                 onCommitText={(text) => {
-                  const gain = parseGainInput(text);
-                  if (gain === null) return false;
-                  if (volumeAutomated) onCommitVolumeAt?.(gain);
-                  else void onSetAttribute("volume", formatAudioGain(gain));
+                  const next = parseGainInput(text);
+                  if (next === null) return false;
+                  onCommitVolumeAt?.(next);
                   return true;
                 }}
               />

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

@@ -59,22 +59,16 @@ describe("useVolumeAutomation", () => {
     expect(bind({ volume: "0.55", automation }).binding.volumeAutomated).toBe(false);
   });
 
-  it("seeds a new lane at the level the slider already shows", () => {
+  it("seeds a new lane at unity, which data-volume then multiplies", () => {
     // Automating a track must not change how loud it is.
     const { binding, onSetAttributeQuiet } = bind({ volume: "0.55" });
     act(() => binding.onAutomateVolume());
     expect(onSetAttributeQuiet).toHaveBeenCalledWith(
       "data-automation",
-      JSON.stringify({ version: 1, lanes: [{ target: "volume", points: [{ t: 0, v: 0.55 }] }] }),
+      JSON.stringify({ version: 1, lanes: [{ target: "volume", points: [{ t: 0, v: 1 }] }] }),
     );
   });
 
-  it("treats a missing data-volume as unity", () => {
-    const { binding, onSetAttributeQuiet } = bind({});
-    act(() => binding.onAutomateVolume());
-    expect(writtenAutomation(onSetAttributeQuiet).lanes[0].points[0].v).toBe(1);
-  });
-
   it("keeps FX lanes when adding the volume one", () => {
     const automation = JSON.stringify({
       version: 1,

package/src/components/editor/useVolumeAutomation.ts

@@ -108,13 +108,8 @@ export function useVolumeAutomation(
       onCommitAt: (v: number) => writeLane((a) => withPointAt(a, target, clipTimeSec, v)),
     };
   };
-  // `??` alone would let an empty `data-volume` through as Number("") === 0, so
-  // automating the track would seed its lane at silence. The engine reads the same
-  // empty value as unity.
-  const raw = element.dataAttributes?.["volume"];
-  const parsed = raw ? Number(raw) : 1;
-  const current = Number.isFinite(parsed) ? parsed : 1;
-  const volume = laneBinding(VOLUME_TARGET, current, writeOwn);
+  // Unity: `data-volume` multiplies the lane, so seeding it there would play it twice.
+  const volume = laneBinding(VOLUME_TARGET, 1, writeOwn);
   const rateAttr = Number.parseFloat(element.dataAttributes?.["playback-rate"] ?? "");
   const rate = laneBinding(
     RATE_TARGET,