@hyperframes/studio 0.7.64 → 0.7.66

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hyperframes/studio",
-  "version": "0.7.64",
+  "version": "0.7.66",
   "description": "",
   "repository": {
     "type": "git",
@@ -46,11 +46,11 @@
     "gsap": "^3.13.0",
     "marked": "^14.1.4",
     "mediabunny": "^1.45.3",
-    "@hyperframes/core": "0.7.64",
-    "@hyperframes/player": "0.7.64",
-    "@hyperframes/parsers": "0.7.64",
-    "@hyperframes/studio-server": "0.7.64",
-    "@hyperframes/sdk": "0.7.64"
+    "@hyperframes/core": "0.7.66",
+    "@hyperframes/sdk": "0.7.66",
+    "@hyperframes/studio-server": "0.7.66",
+    "@hyperframes/parsers": "0.7.66",
+    "@hyperframes/player": "0.7.66"
   },
   "devDependencies": {
     "@types/react": "19",
@@ -65,7 +65,7 @@
     "vite": "^6.4.2",
     "vitest": "^3.2.4",
     "zustand": "^5.0.0",
-    "@hyperframes/producer": "0.7.64"
+    "@hyperframes/producer": "0.7.66"
   },
   "peerDependencies": {
     "react": "19",

package/src/components/StudioRightPanel.tsx

@@ -5,7 +5,7 @@ import { CaptionPropertyPanel } from "../captions/components/CaptionPropertyPane
 import { BlockParamsPanel } from "./editor/BlockParamsPanel";
 import { RenderQueue } from "./renders/RenderQueue";
 import { SlideshowPanel } from "./panels/SlideshowPanel";
-import { VariablesPanel } from "./panels/VariablesPanel";
+import { VariablesPanel, type StudioEditPersistenceProps } from "./panels/VariablesPanel";
 import { PanelTabButton } from "./PanelTabButton";
 import { usePreviewVariablesStore } from "../hooks/previewVariablesStore";
 import type { RenderJob } from "./renders/useRenderQueue";
@@ -35,7 +35,7 @@ import type { BackgroundRemovalProgress } from "./editor/propertyPanelTypes";
 import { timelineKeysForSelections, type ToggleHiddenHandler } from "../utils/studioHelpers";
 import { useInspectorSplitResize } from "../hooks/useInspectorSplitResize";
 
-export interface StudioRightPanelProps {
+export interface StudioRightPanelProps extends StudioEditPersistenceProps {
   designPanelActive: boolean;
   activeBlockParams?: {
     blockName: string;

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

@@ -9,6 +9,7 @@ const KEYFRAMES: RetimeKeyframe[] = [
   { percentage: 100, properties: { x: 100 }, ease: "power2.in" },
 ];
 const WINDOW = { tweenStart: 2, tweenDuration: 4 };
+const LEFT_BOUNDARY_DROP = { ...WINDOW, dropAbsTime: 0.5 };
 
 describe("resolveKeyframeRetime — move (within the tween window)", () => {
   it("re-keys an interior keyframe to the tween-% of the drop", () => {
@@ -32,15 +33,53 @@ describe("resolveKeyframeRetime — move (within the tween window)", () => {
     expect(r.kind).toBe("noop");
   });
 
-  it("moves a flat (keyframe-less) tween without needing the keyframes array", () => {
+  it("shortens a flat tween when its synthesized end diamond moves left", () => {
     const r = resolveKeyframeRetime({
       ...WINDOW,
       keyframes: [],
       draggedTweenPct: 100,
-      dropAbsTime: 5, // (5-2)/4 = 75%
+      dropAbsTime: 5,
     });
-    expect(r.kind).toBe("move");
-    expect(r.toTweenPct).toBeCloseTo(75, 5);
+    expect(r.kind).toBe("resize");
+    expect(r.position).toBe(2);
+    expect(r.duration).toBe(3);
+    expect(r.pctRemap).toEqual([]);
+  });
+
+  it("moves a flat tween's start while preserving its absolute end", () => {
+    const r = resolveKeyframeRetime({
+      ...WINDOW,
+      keyframes: [],
+      draggedTweenPct: 0,
+      dropAbsTime: 3,
+    });
+    expect(r.kind).toBe("resize");
+    expect(r.position).toBe(3);
+    expect(r.duration).toBe(3);
+    expect(r.pctRemap).toEqual([]);
+  });
+
+  it("no-ops an unexpected interior percentage on a flat tween", () => {
+    expect(
+      resolveKeyframeRetime({
+        ...WINDOW,
+        keyframes: [],
+        draggedTweenPct: 50,
+        dropAbsTime: 5,
+      }).kind,
+    ).toBe("noop");
+  });
+
+  it("no-ops instead of rounding a sub-10ms flat tween to zero", () => {
+    expect(
+      resolveKeyframeRetime({
+        tweenStart: 2,
+        tweenDuration: 4,
+        keyframes: [],
+        draggedTweenPct: 100,
+        dropAbsTime: 2.0004,
+      }).kind,
+    ).toBe("noop");
   });
 });
 
@@ -67,10 +106,9 @@ describe("resolveKeyframeRetime — resize (past the tween boundary)", () => {
 
   it("extends the FIRST keyframe before the start, shifting position earlier", () => {
     const r = resolveKeyframeRetime({
-      ...WINDOW,
+      ...LEFT_BOUNDARY_DROP,
       keyframes: KEYFRAMES,
       draggedTweenPct: 0,
-      dropAbsTime: 0.5, // before start (2) → move position back + grow duration
     });
     expect(r.kind).toBe("resize");
     expect(r.position).toBeCloseTo(0.5, 5);
@@ -102,10 +140,9 @@ describe("resolveKeyframeRetime — single keyframe (both first and last)", () =
 
   it("resizes left before the start", () => {
     const r = resolveKeyframeRetime({
-      ...WINDOW,
+      ...LEFT_BOUNDARY_DROP,
       keyframes: lone,
       draggedTweenPct: 100,
-      dropAbsTime: 0.5,
     });
     expect(r.kind).toBe("resize");
     expect(r.position).toBeCloseTo(0.5, 5);
@@ -127,14 +164,16 @@ describe("resolveKeyframeRetime — guards", () => {
     ).toBe("noop");
   });
 
-  it("no-ops a boundary drop on a flat tween (nothing to remap)", () => {
-    expect(
-      resolveKeyframeRetime({
-        ...WINDOW,
-        keyframes: [],
-        draggedTweenPct: 100,
-        dropAbsTime: 8,
-      }).kind,
-    ).toBe("noop");
+  it("extends a flat tween when its synthesized end diamond moves right", () => {
+    const r = resolveKeyframeRetime({
+      ...WINDOW,
+      keyframes: [],
+      draggedTweenPct: 100,
+      dropAbsTime: 8,
+    });
+    expect(r.kind).toBe("resize");
+    expect(r.position).toBe(2);
+    expect(r.duration).toBe(6);
+    expect(r.pctRemap).toEqual([]);
   });
 });

package/src/components/editor/keyframeRetime.ts

@@ -51,11 +51,40 @@ export interface KeyframeRetimeResult {
 const NOOP_EPSILON_PCT = 0.1;
 /** Slack (seconds) for the within-tween boundary test. */
 const EPSILON_TIME = 1e-4;
+/** Smallest authored tween window; avoids sub-millisecond/round-to-zero durations. */
+const MIN_TWEEN_DURATION = 0.01;
 
 const round3 = (n: number) => Math.round(n * 1000) / 1000;
 const round1 = (n: number) => Math.round(n * 10) / 10; // 0.1% precision
 const clamp = (n: number, lo: number, hi: number) => Math.max(lo, Math.min(hi, n));
 
+/** Resolve timing for a flat tween's synthesized start/end diamond. */
+function resolveFlatTweenBoundaryRetime(opts: {
+  keyframeCount: number;
+  draggedTweenPct: number;
+  tweenStart: number;
+  tweenEnd: number;
+  dropAbsTime: number;
+}): KeyframeRetimeResult | null {
+  const { keyframeCount, draggedTweenPct, tweenStart, tweenEnd, dropAbsTime } = opts;
+  if (keyframeCount > 0) return null;
+  // Flat tweens have only synthesized boundary diamonds. Never delegate an
+  // unexpected interior percentage to the authored-keyframe move path.
+  if (draggedTweenPct !== 0 && draggedTweenPct !== 100) return { kind: "noop" };
+  const draggedTime = draggedTweenPct === 0 ? tweenStart : tweenEnd;
+  if (Math.abs(dropAbsTime - draggedTime) <= EPSILON_TIME) return { kind: "noop" };
+  const newStart = draggedTweenPct === 0 ? dropAbsTime : tweenStart;
+  const newEnd = draggedTweenPct === 100 ? dropAbsTime : tweenEnd;
+  const newDuration = newEnd - newStart;
+  if (newDuration < MIN_TWEEN_DURATION) return { kind: "noop" };
+  return {
+    kind: "resize",
+    position: round3(newStart),
+    duration: round3(newDuration),
+    pctRemap: [],
+  };
+}
+
 /**
  * Decide move vs resize for a dragged keyframe and, for resize, return the new
  * tween window + remapped keyframes.
@@ -76,20 +105,35 @@ export function resolveKeyframeRetime(opts: {
   if (tweenDuration <= 0) return { kind: "noop" };
   const tweenEnd = tweenStart + tweenDuration;
 
-  // Within the tween window → plain move (re-key the tween-%). This branch never
-  // touches the keyframes array, so it still works for synthesized flat tweens.
+  // A flat tween's synthesized diamonds are its real start/end boundaries —
+  // there is no authored keyframe node to re-key. Moving either boundary must
+  // therefore resize the tween window while keeping the opposite endpoint at
+  // its absolute time. Returning `resize` with an empty remap lets the caller
+  // update the flat tween's position/duration instead of sending a keyframe
+  // mutation that would silently no-op.
+  const flatBoundary = resolveFlatTweenBoundaryRetime({
+    keyframeCount: keyframes.length,
+    draggedTweenPct,
+    tweenStart,
+    tweenEnd,
+    dropAbsTime,
+  });
+  if (flatBoundary) return flatBoundary;
+
+  // Within the tween window → plain move (re-key the tween-%).
   if (dropAbsTime >= tweenStart - EPSILON_TIME && dropAbsTime <= tweenEnd + EPSILON_TIME) {
     const toTweenPct = clamp(((dropAbsTime - tweenStart) / tweenDuration) * 100, 0, 100);
     if (Math.abs(toTweenPct - draggedTweenPct) < NOOP_EPSILON_PCT) return { kind: "noop" };
     return { kind: "move", toTweenPct };
   }
 
-  // Boundary resize needs the real keyframes to remap; a flat tween has none here.
+  // Boundary resize needs the real keyframes to remap. Flat start/end boundaries
+  // were handled above.
   if (keyframes.length === 0) return { kind: "noop" };
 
   const newStart = Math.min(dropAbsTime, tweenStart);
   const newEnd = Math.max(dropAbsTime, tweenEnd);
-  const newDuration = Math.max(0.01, newEnd - newStart);
+  const newDuration = Math.max(MIN_TWEEN_DURATION, newEnd - newStart);
 
   // The dragged keyframe is the one whose tween-% is closest to draggedTweenPct.
   let draggedIdx = 0;

package/src/components/nle/useTimelineEditCallbacks.test.ts

@@ -0,0 +1,85 @@
+import { describe, expect, it } from "vitest";
+import { resolveTimelineKeyframeTarget } from "./useTimelineEditCallbacks";
+
+const FLAT_ANIMATION = {
+  id: "#title-fromTo-2900",
+  propertyGroup: null,
+};
+
+describe("resolveTimelineKeyframeTarget", () => {
+  it("resolves a synthesized diamond when one mixed flat tween is selected", () => {
+    expect(
+      resolveTimelineKeyframeTarget(
+        8.75,
+        [{ percentage: 8.75, tweenPercentage: 100 }],
+        [FLAT_ANIMATION],
+      ),
+    ).toEqual({ animId: "#title-fromTo-2900", tweenPct: 100 });
+  });
+
+  it("keeps multiple ungrouped flat tweens unresolved instead of guessing", () => {
+    expect(
+      resolveTimelineKeyframeTarget(
+        8.75,
+        [{ percentage: 8.75, tweenPercentage: 100 }],
+        [FLAT_ANIMATION, { id: "#title-to-2900", propertyGroup: null }],
+      ),
+    ).toBeNull();
+  });
+
+  it("keeps multiple flat tweens in the same property group unresolved", () => {
+    expect(
+      resolveTimelineKeyframeTarget(
+        50,
+        [{ percentage: 50, tweenPercentage: 100, propertyGroup: "position" }],
+        [
+          { id: "position-a", propertyGroup: "position" },
+          { id: "position-b", propertyGroup: "position" },
+        ],
+      ),
+    ).toBeNull();
+  });
+
+  it("keeps a keyframed and flat tween in the same property group unresolved", () => {
+    expect(
+      resolveTimelineKeyframeTarget(
+        50,
+        [{ percentage: 50, tweenPercentage: 25, propertyGroup: "position" }],
+        [
+          { id: "position-keyframed", propertyGroup: "position", keyframes: {} },
+          { id: "position-flat", propertyGroup: "position" },
+        ],
+      ),
+    ).toBeNull();
+  });
+
+  it("keeps multiple ungrouped keyframed tweens unresolved", () => {
+    expect(
+      resolveTimelineKeyframeTarget(
+        50,
+        [{ percentage: 50, tweenPercentage: 25 }],
+        [
+          { id: "ungrouped-a", keyframes: {} },
+          { id: "ungrouped-b", keyframes: {} },
+        ],
+      ),
+    ).toBeNull();
+  });
+
+  it("does not infer an animation when the rendered diamond misses the cache", () => {
+    expect(resolveTimelineKeyframeTarget(60, [], [FLAT_ANIMATION])).toBeNull();
+  });
+
+  it("resolves the sole candidate in an explicit property group", () => {
+    expect(
+      resolveTimelineKeyframeTarget(
+        50,
+        [{ percentage: 50, tweenPercentage: 25, propertyGroup: "position" }],
+        [
+          { id: "opacity", propertyGroup: "opacity" },
+          { id: "position", propertyGroup: "position" },
+        ],
+      ),
+    ).toEqual({ animId: "position", tweenPct: 25 });
+  });
+});

package/src/components/nle/useTimelineEditCallbacks.ts

@@ -36,6 +36,41 @@ export interface TimelineEditCallbackDeps {
   handleRazorSplitAll: (splitTime: number) => Promise<void> | void;
 }
 
+interface TimelineKeyframeTargetAnimation {
+  id: string;
+  propertyGroup?: string | null;
+  keyframes?: unknown;
+}
+
+interface TimelineCachedKeyframe {
+  percentage: number;
+  tweenPercentage?: number;
+  propertyGroup?: string;
+}
+
+/**
+ * Resolve a rendered timeline diamond back to the animation that authored it.
+ * Flat tweens use synthesized diamonds, so a mixed flat tween may have neither
+ * a property group nor real keyframes. The cache currently carries a property
+ * group, not an animation id, so resolution is safe only when that group has a
+ * single candidate. Ambiguous candidates remain unresolved rather than
+ * retiming an arbitrary tween.
+ */
+export function resolveTimelineKeyframeTarget(
+  pct: number,
+  keyframes: ReadonlyArray<TimelineCachedKeyframe>,
+  animations: ReadonlyArray<TimelineKeyframeTargetAnimation>,
+): { animId: string; tweenPct: number } | null {
+  const kf = keyframes.find((item) => Math.abs(item.percentage - pct) < 0.2);
+  if (!kf) return null;
+  const group = kf?.propertyGroup;
+  const candidates = group
+    ? animations.filter((animation) => animation.propertyGroup === group)
+    : animations.filter((animation) => !animation.propertyGroup);
+  const animation = candidates.length === 1 ? candidates[0] : undefined;
+  return animation ? { animId: animation.id, tweenPct: kf.tweenPercentage ?? pct } : null;
+}
+
 /**
  * Builds the timeline edit callback bag (move/resize/split/razor plus the
  * keyframe-diamond callbacks) provided to `<Timeline>` via TimelineEditProvider.
@@ -76,12 +111,7 @@ export function useTimelineEditCallbacks({
     // fallow-ignore-next-line complexity
     (pct: number): { animId: string; tweenPct: number } | null => {
       const cached = usePlayerStore.getState().keyframeCache.get(domEditSelection?.id ?? "");
-      const kf = cached?.keyframes.find((k) => Math.abs(k.percentage - pct) < 0.2);
-      const group = kf?.propertyGroup;
-      const anim =
-        (group ? selectedGsapAnimations.find((a) => a.propertyGroup === group) : undefined) ??
-        selectedGsapAnimations.find((a) => a.keyframes);
-      return anim ? { animId: anim.id, tweenPct: kf?.tweenPercentage ?? pct } : null;
+      return resolveTimelineKeyframeTarget(pct, cached?.keyframes ?? [], selectedGsapAnimations);
     },
     [domEditSelection?.id, selectedGsapAnimations],
   );
@@ -154,12 +184,22 @@ export function useTimelineEditCallbacks({
           decision.position != null &&
           decision.duration != null
         ) {
-          handleGsapResizeKeyframedTween(
-            target.animId,
-            decision.position,
-            decision.duration,
-            decision.pctRemap,
-          );
+          if (anim.keyframes) {
+            handleGsapResizeKeyframedTween(
+              target.animId,
+              decision.position,
+              decision.duration,
+              decision.pctRemap,
+            );
+          } else {
+            // resize-keyframed-tween requires an authored `keyframes` AST node
+            // and intentionally no-ops for a flat tween. Update its real tween
+            // window through the metadata writer (and SDK cutover path) instead.
+            handleGsapUpdateMeta(target.animId, {
+              position: decision.position,
+              duration: decision.duration,
+            });
+          }
         }
       },
       onChangeKeyframeEase: (_elId: string, _pct: number, ease: string) => {

package/src/components/panels/VariablesPanel.tsx

@@ -31,7 +31,7 @@ function shellSingleQuote(value: string): string {
   return `'${value.replace(/'/g, `'\\''`)}'`;
 }
 
-interface VariablesPanelProps {
+export interface StudioEditPersistenceProps {
   sdkSession: Composition | null;
   publishSdkSession: PublishSdkSession;
   reloadPreview: () => void;
@@ -43,6 +43,8 @@ interface VariablesPanelProps {
   }) => Promise<void>;
 }
 
+type VariablesPanelProps = StudioEditPersistenceProps;
+
 function formatIssue(issue: VariableValidationIssue): string {
   switch (issue.kind) {
     case "undeclared":

package/src/contexts/FileManagerContext.tsx

@@ -17,6 +17,7 @@ export function useFileManagerContextOptional(): FileManagerValue | null {
 
 export function FileManagerProvider({
   value: {
+    // fallow-ignore-next-line code-duplication
     editingFile,
     setEditingFile,
     projectDir,

package/src/hooks/useGsapKeyframeOps.test.tsx

@@ -25,6 +25,7 @@ function renderKeyframeOps(over: {
 }) {
   const captured: { api: HookApi | null } = { api: null };
   function Probe() {
+    // fallow-ignore-next-line code-duplication
     captured.api = useGsapKeyframeOps({
       activeCompPath: "index.html",
       // eslint-disable-next-line @typescript-eslint/no-explicit-any -- test doubles

package/src/hooks/useGsapKeyframeOps.ts

@@ -1,3 +1,5 @@
+// fallow-ignore-file code-duplication
+// Add/remove operation-family transaction shapes stay parallel until SDK graduation.
 import { useCallback } from "react";
 import type { GsapAnimation } from "@hyperframes/core/gsap-parser";
 import type { Composition } from "@hyperframes/sdk";

package/src/hooks/useGsapPropertyDebounce.ts

@@ -84,6 +84,7 @@ export function useGsapPropertyDebounce(
     const mutation = { type: "update-property", animationId, property, value };
     const label = `Edit GSAP ${property}`;
     try {
+      // fallow-ignore-next-line code-duplication
       const { sdkSession, sdkDeps, activeCompPath } = sdkRef.current ?? {};
       if (sdkSession && sdkDeps) {
         const targetPath = selection.sourceFile || activeCompPath || "index.html";

package/src/hooks/useRazorSplit.ts

@@ -9,6 +9,7 @@ import type { RecordEditInput } from "./timelineEditingHelpers";
 
 interface UseRazorSplitOptions {
   projectId: string | null;
+  // fallow-ignore-next-line code-duplication
   activeCompPath: string | null;
   showToast: (message: string, tone?: "error" | "info") => void;
   writeProjectFile: (path: string, content: string, expectedContent?: string) => Promise<void>;

package/src/hooks/useTimelineEditing.test.tsx

@@ -1,3 +1,4 @@
+// fallow-ignore-file code-duplication
 // @vitest-environment happy-dom
 
 import React, { act, useRef } from "react";

package/src/hooks/useTimelineGroupEditing.ts

@@ -1,3 +1,5 @@
+// fallow-ignore-file code-duplication
+// Move/resize operation families remain parallel until SDK graduation.
 import { useCallback, type MutableRefObject, type RefObject } from "react";
 import type { Composition } from "@hyperframes/sdk";
 import type { TimelineElement } from "../player";

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

@@ -1,6 +1,5 @@
 import { describe, expect, it } from "vitest";
 import { resolveSeekPercent } from "./PlayerControls";
-import { shouldMutePreviewAudio } from "../lib/timelineIframeHelpers";
 
 describe("resolveSeekPercent", () => {
   it("returns 0 when the track width is invalid", () => {
@@ -19,19 +18,3 @@ describe("resolveSeekPercent", () => {
     expect(resolveSeekPercent(150, 100, 200)).toBe(0.25);
   });
 });
-
-describe("shouldMutePreviewAudio", () => {
-  it("mutes when the user toggled audio off", () => {
-    expect(shouldMutePreviewAudio(true, 1)).toBe(true);
-  });
-
-  it("auto-mutes above 1x playback", () => {
-    expect(shouldMutePreviewAudio(false, 1.5)).toBe(true);
-    expect(shouldMutePreviewAudio(false, 2)).toBe(true);
-  });
-
-  it("keeps audio on at 1x or slower when the user has not muted it", () => {
-    expect(shouldMutePreviewAudio(false, 1)).toBe(false);
-    expect(shouldMutePreviewAudio(false, 0.5)).toBe(false);
-  });
-});

package/src/player/components/PlayerControls.tsx

@@ -2,7 +2,6 @@ import { useRef, useCallback, useEffect, memo } from "react";
 import gsap from "gsap";
 import { MorphSVGPlugin } from "gsap/MorphSVGPlugin";
 import { formatFrameTime, formatTime, stepFrameTime } from "../lib/time";
-import { shouldMutePreviewAudio } from "../lib/timelineIframeHelpers";
 import { usePlayerStore } from "../store/playerStore";
 import { trackStudioEvent } from "../../utils/studioTelemetry";
 import { Tooltip } from "../../components/ui";
@@ -60,40 +59,30 @@ function PlayPauseMorphIcon({ playing }: { playing: boolean }) {
 
 const MuteButton = memo(function MuteButton({
   audioMuted,
-  audioAutoMuted,
-  effectiveAudioMuted,
   controlsDisabled,
   setAudioMuted,
 }: {
   audioMuted: boolean;
-  audioAutoMuted: boolean;
-  effectiveAudioMuted: boolean;
   controlsDisabled: boolean;
   setAudioMuted: (v: boolean) => void;
 }) {
-  const label = audioAutoMuted
-    ? "Audio muted above 1x speed"
-    : audioMuted
-      ? "Unmute audio"
-      : "Mute audio";
+  const label = audioMuted ? "Unmute audio" : "Mute audio";
   return (
     <Tooltip label={label}>
       <button
         type="button"
         onClick={() => {
-          if (!audioAutoMuted) {
-            trackStudioEvent("playback", { action: "mute_toggle", muted: !audioMuted });
-            setAudioMuted(!audioMuted);
-          }
+          trackStudioEvent("playback", { action: "mute_toggle", muted: !audioMuted });
+          setAudioMuted(!audioMuted);
         }}
-        disabled={controlsDisabled || audioAutoMuted}
+        disabled={controlsDisabled}
         aria-label={label}
-        aria-pressed={effectiveAudioMuted}
+        aria-pressed={audioMuted}
         className={`h-7 w-7 flex-shrink-0 flex items-center justify-center rounded-md border transition-colors disabled:pointer-events-none ${
-          effectiveAudioMuted
+          audioMuted
             ? "text-studio-accent bg-studio-accent/10 border-studio-accent/30"
             : "border-neutral-700 text-neutral-400 hover:border-neutral-500 hover:bg-neutral-800"
-        } ${audioAutoMuted ? "opacity-70" : ""}`}
+        }`}
       >
         <svg
           width="13"
@@ -107,7 +96,7 @@ const MuteButton = memo(function MuteButton({
           aria-hidden="true"
         >
           <path d="M11 5 6 9H3v6h3l5 4V5Z" />
-          {effectiveAudioMuted ? (
+          {audioMuted ? (
             <>
               <path d="m19 9-6 6" />
               <path d="m13 9 6 6" />
@@ -383,8 +372,6 @@ export const PlayerControls = memo(function PlayerControls({
   const durationRef = useRef(duration);
   durationRef.current = duration;
   const controlsDisabled = disabled || !timelineReady;
-  const audioAutoMuted = playbackRate > 1;
-  const effectiveAudioMuted = shouldMutePreviewAudio(audioMuted, playbackRate);
 
   useEffect(() => {
     if (!timeDisplayRef.current) return;
@@ -486,8 +473,6 @@ export const PlayerControls = memo(function PlayerControls({
 
       <MuteButton
         audioMuted={audioMuted}
-        audioAutoMuted={audioAutoMuted}
-        effectiveAudioMuted={effectiveAudioMuted}
         controlsDisabled={controlsDisabled}
         setAudioMuted={setAudioMuted}
       />

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

@@ -189,7 +189,7 @@ describe("usePlaybackKeyboard — mute & loop shortcuts (#905)", () => {
     expect(usePlayerStore.getState().audioMuted).toBe(false);
   });
 
-  it("M does NOT toggle audioMuted above 1x playback (matches button gating)", () => {
+  it("M toggles audioMuted above 1x playback too", () => {
     const { dispatch } = setupHook();
     usePlayerStore.setState({ playbackRate: 2, audioMuted: false });
 
@@ -197,7 +197,7 @@ describe("usePlaybackKeyboard — mute & loop shortcuts (#905)", () => {
       dispatch(keydown({ code: "KeyM", key: "m" }));
     });
 
-    expect(usePlayerStore.getState().audioMuted).toBe(false);
+    expect(usePlayerStore.getState().audioMuted).toBe(true);
   });
 
   it("Shift+L toggles loopEnabled without starting forward shuttle", () => {

package/src/player/hooks/usePlaybackKeyboard.ts

@@ -116,10 +116,7 @@ export function usePlaybackKeyboard({
       if (key === "m") {
         e.preventDefault();
         const state = usePlayerStore.getState();
-        // Audio is force-muted above 1x playback — match the mute button's gating.
-        if (state.playbackRate <= 1) {
-          state.setAudioMuted(!state.audioMuted);
-        }
+        state.setAudioMuted(!state.audioMuted);
         return;
       }
       if (key === "l" && e.shiftKey) {

package/src/player/hooks/useTimelinePlayer.seek.test.ts

@@ -211,7 +211,7 @@ describe("useTimelinePlayer seek hydration", () => {
 });
 
 describe("useTimelinePlayer audio controls (#835)", () => {
-  it("applies playback-rate changes immediately and auto-mutes audio above 1x", () => {
+  it("applies playback-rate changes immediately and keeps audio unmuted above 1x", () => {
     const { api, root } = renderTimelinePlayerHarness();
     const postMessage = vi.fn();
     const timeScale = vi.fn();
@@ -244,7 +244,7 @@ describe("useTimelinePlayer audio controls (#835)", () => {
         source: "hf-parent",
         type: "control",
         action: "set-muted",
-        muted: true,
+        muted: false,
       }),
       "*",
     );