@hyperframes/studio 0.8.104 → 0.8.106

package/src/player/components/AudioWaveform.test.tsx

@@ -20,24 +20,30 @@ afterEach(() => {
   document.body.innerHTML = "";
 });
 
+/** A 6 x 20 canvas whose 2D context records every fill as [style, x, y, width, height]. */
+function recordingCanvas() {
+  const fills: Array<[string, number, number, number, number]> = [];
+  const context = {
+    scale: vi.fn(),
+    clearRect: vi.fn(),
+    fillStyle: "",
+    fillRect: (x: number, y: number, width: number, height: number) =>
+      fills.push([String(context.fillStyle), x, y, width, height]),
+  } as unknown as CanvasRenderingContext2D;
+  const canvas = document.createElement("canvas");
+  Object.defineProperties(canvas, {
+    clientWidth: { value: 6 },
+    clientHeight: { value: 20 },
+  });
+  vi.spyOn(canvas, "getContext").mockReturnValue(context);
+  return { canvas, fills };
+}
+
 describe("AudioWaveform", () => {
   it("paints a baseline and peak bar for every mapped waveform bin", () => {
-    const fillRect = vi.fn();
-    const context = {
-      scale: vi.fn(),
-      clearRect: vi.fn(),
-      fillRect,
-      fillStyle: "",
-    } as unknown as CanvasRenderingContext2D;
-    const canvas = document.createElement("canvas");
-    Object.defineProperties(canvas, {
-      clientWidth: { value: 6 },
-      clientHeight: { value: 20 },
-    });
-    vi.spyOn(canvas, "getContext").mockReturnValue(context);
+    const { canvas, fills } = recordingCanvas();
     drawWaveformCanvas(canvas, [0.25, 1], false, 0, 1);
-    expect(fillRect).toHaveBeenCalledTimes(4);
-    expect(fillRect.mock.calls.map(([x, y, width, height]) => [x, y, width, height])).toEqual([
+    expect(fills.map(([, x, y, width, height]) => [x, y, width, height])).toEqual([
       [0, 18, 3, 2],
       [0, 15, 3, 5],
       [3, 18, 3, 2],
@@ -45,6 +51,21 @@ describe("AudioWaveform", () => {
     ]);
   });
 
+  it("shrinks each bar to the fade's gain and keeps the cut-away part as a ghost", () => {
+    const { canvas, fills } = recordingCanvas();
+    // A 1 s fade-in on a 2 s clip: the first bar's centre (0.5 s) plays at half gain.
+    drawWaveformCanvas(canvas, [1, 1], false, 0, 1, { fadeIn: 1, fadeOut: 0, duration: 2 });
+    const bars = fills.filter(([, , y, , height]) => !(y === 18 && height === 2));
+    // The heard half, then the ghost only above it, so the two never stack.
+    expect(bars.map(([, x, y, width, height]) => [x, y, width, height])).toEqual([
+      [0, 10, 3, 10],
+      [0, 0, 3, 10],
+      [3, 0, 3, 20],
+    ]);
+    const alpha = (style: string) => Number(style.split(",").at(-1)?.replace(")", ""));
+    expect(alpha(bars[1][0])).toBeCloseTo(alpha(bars[0][0]) * 0.27, 2);
+  });
+
   it("leases waveform decoding with the clip's project, session, and viewport priority", () => {
     const host = document.createElement("div");
     document.body.append(host);

package/src/player/components/AudioWaveform.tsx

@@ -1,8 +1,10 @@
-import { memo, useCallback, useEffect, useMemo, useRef } from "react";
+import { memo, useCallback, useContext, useEffect, useMemo, useRef } from "react";
+import { fadeGain } from "@hyperframes/core/audio-fade";
 import { useMountEffect } from "../../hooks/useMountEffect";
 import { useThumbnailLease } from "../../hooks/useThumbnailLease";
 import { createThumbnailKey, type ThumbnailPriority } from "../lib/thumbnailScheduler";
 import { decimatePeaks, loudnessToOpacity } from "./audioWaveformPeaks";
+import { ClipFadesContext, type ClipFadeShape } from "./TimelineClipFades";
 
 export interface AudioWaveformProps {
   audioUrl: string;
@@ -22,7 +24,10 @@ export interface AudioWaveformProps {
 
 const BAR_STEP = 3;
 
-type BarGeometry = { x: number; width: number; height: number };
+export const rendersWaveform = (el: { tag: string }) => el.tag === "audio";
+const FADE_GHOST_OPACITY = 0.27;
+
+type BarGeometry = { x: number; width: number; height: number; gain: number };
 
 function paintWaveformBars(
   context: CanvasRenderingContext2D,
@@ -33,11 +38,18 @@ function paintWaveformBars(
   amplitudes: readonly number[],
 ) {
   bars.forEach((bar, index) => {
-    const amplitude = amplitudes[index] ?? 0;
+    const opacity = loudnessToOpacity(amplitudes[index] ?? 0);
     context.fillStyle = `rgb(${waveformBaselineRgb})`;
     context.fillRect(bar.x, height - 2, bar.width, 2);
-    context.fillStyle = `rgba(${waveformBarRgb},${loudnessToOpacity(amplitude).toFixed(2)})`;
-    context.fillRect(bar.x, height - bar.height, bar.width, bar.height);
+    const paint = (alpha: number, top: number, barHeight: number) => {
+      context.fillStyle = `rgba(${waveformBarRgb},${alpha.toFixed(2)})`;
+      context.fillRect(bar.x, top, bar.width, barHeight);
+    };
+    const faded = bar.height * bar.gain;
+    if (faded > 0) paint(opacity, height - faded, faded);
+    if (faded < bar.height) {
+      paint(opacity * FADE_GHOST_OPACITY, height - bar.height, bar.height - faded);
+    }
   });
 }
 
@@ -47,6 +59,7 @@ export function drawWaveformCanvas(
   muted: boolean,
   trimStartFraction: number,
   trimEndFraction: number,
+  fades: ClipFadeShape | null = null,
 ) {
   const width = Math.max(1, canvas.clientWidth);
   const height = Math.max(1, canvas.clientHeight);
@@ -67,6 +80,9 @@ export function drawWaveformCanvas(
     x: (index * width) / amplitudes.length,
     width: Math.max(1, width / amplitudes.length),
     height: Math.max(3, amplitude * height),
+    gain: fades
+      ? fadeGain(((index + 0.5) / amplitudes.length) * fades.duration, fades.duration, fades)
+      : 1,
   }));
   const channelToken = muted ? "--timeline-waveform-muted-rgb" : "--timeline-waveform-bar-rgb";
   const waveformBarRgb = getComputedStyle(canvas).getPropertyValue(channelToken);
@@ -179,11 +195,12 @@ export const AudioWaveform = memo(function AudioWaveform({
   const peaks =
     snapshot.status === "ready" && snapshot.value.kind === "waveform" ? snapshot.value.peaks : null;
 
+  const fades = useContext(ClipFadesContext);
   const draw = useCallback(() => {
     const canvas = canvasRef.current;
     if (!canvas || !peaks) return;
-    drawWaveformCanvas(canvas, peaks, muted, trimStartFraction ?? 0, trimEndFraction ?? 1);
-  }, [muted, peaks, trimEndFraction, trimStartFraction]);
+    drawWaveformCanvas(canvas, peaks, muted, trimStartFraction ?? 0, trimEndFraction ?? 1, fades);
+  }, [fades, muted, peaks, trimEndFraction, trimStartFraction]);
 
   const setCanvasRef = useCallback(
     (canvas: HTMLCanvasElement | null) => {

package/src/player/components/ClipContextMenu.tsx

@@ -201,7 +201,7 @@ export const ClipContextMenu = memo(function ClipContextMenu({
       <button
         type="button"
         role="menuitem"
-        className="w-full flex items-center justify-between px-3 py-1.5 text-xs text-red-400 hover:bg-neutral-800 focus-visible:bg-neutral-800 outline-hidden cursor-pointer text-left"
+        className="w-full flex items-center justify-between px-3 py-1.5 text-xs text-danger-ink hover:bg-neutral-800 focus-visible:bg-neutral-800 outline-hidden cursor-pointer text-left"
         onClick={() => {
           onDelete(element);
           onClose();

package/src/player/components/CompositionThumbnail.tsx

@@ -1,7 +1,11 @@
 import { memo, useMemo, type CSSProperties } from "react";
 import { useThumbnailLease } from "../../hooks/useThumbnailLease";
 import { useThumbnailStripSize } from "../../hooks/useThumbnailStripSize";
-import { createThumbnailKey, type ThumbnailPriority } from "../lib/thumbnailScheduler";
+import {
+  createThumbnailKey,
+  type ThumbnailPriority,
+  type ThumbnailRequest,
+} from "../lib/thumbnailScheduler";
 import { TIMELINE_VIEWPORT_BUDGETS } from "../lib/timelineViewportBudgets";
 import { computeThumbnailStrip, probeImageAspect } from "./thumbnailUtils";
 
@@ -85,6 +89,22 @@ export function compositionPathOfPreviewUrl(previewUrl: string): string {
   return match?.[1] ? decodeURIComponent(match[1]) : "index.html";
 }
 
+export function compositionThumbnailRequest(
+  url: string,
+  projectId: string,
+  { sessionEpoch = 0, priority = "visible", rich = false }: Partial<ThumbnailRequest> = {},
+): ThumbnailRequest {
+  return {
+    key: createThumbnailKey({ kind: "composition", url }),
+    projectId,
+    sessionEpoch,
+    kind: "composition",
+    priority,
+    rich,
+    load: (signal: AbortSignal) => loadCompositionImage(url, signal),
+  };
+}
+
 async function loadCompositionImage(url: string, signal: AbortSignal) {
   const response = await fetch(url, { signal });
   if (!response.ok) throw new Error(`Composition thumbnail failed (${response.status})`);
@@ -132,15 +152,7 @@ export const CompositionThumbnail = memo(function CompositionThumbnail({
     contentRevision,
   });
   const request = useMemo(
-    () => ({
-      key: createThumbnailKey({ kind: "composition", url }),
-      projectId,
-      sessionEpoch,
-      kind: "composition" as const,
-      priority,
-      rich: true,
-      load: (signal: AbortSignal) => loadCompositionImage(url, signal),
-    }),
+    () => compositionThumbnailRequest(url, projectId, { sessionEpoch, priority, rich: true }),
     [priority, projectId, sessionEpoch, url],
   );
   const snapshot = useThumbnailLease(request);
@@ -182,7 +194,7 @@ export const CompositionThumbnail = memo(function CompositionThumbnail({
         </div>
       )}
       {snapshot.status === "loading" && (
-        <div className="absolute inset-0 animate-pulse bg-white/[0.035]" />
+        <div className="absolute inset-0 animate-pulse bg-text-0/[0.035]" />
       )}
       {label && (
         <div className="absolute inset-y-0 left-3 z-10 flex items-center">

package/src/player/components/EditModal.tsx

@@ -147,7 +147,7 @@ export function EditPopover({ rangeStart, rangeEnd, anchorX, anchorY, onClose }:
           <div className="px-4 py-2 border-b border-neutral-800/40 max-h-24 overflow-y-auto">
             {elementsInRange.map((el) => (
               <div key={el.id} className="flex items-center justify-between py-0.5">
-                <span className="text-[10px] font-mono text-studio-accent/80">#{el.id}</span>
+                <span className="text-[10px] font-mono text-accent-ink/80">#{el.id}</span>
                 <span className="text-[10px] text-neutral-600">{el.tag}</span>
               </div>
             ))}
@@ -174,7 +174,7 @@ export function EditPopover({ rangeStart, rangeEnd, anchorX, anchorY, onClose }:
 
         {/* Action */}
         {copyError && (
-          <p className="px-3 pb-2 text-[10px] text-red-400" role="alert">
+          <p className="px-3 pb-2 text-[10px] text-danger-ink" role="alert">
             Copy failed — check clipboard permissions and try again.
           </p>
         )}
@@ -184,7 +184,7 @@ export function EditPopover({ rangeStart, rangeEnd, anchorX, anchorY, onClose }:
             disabled={!buildPromptCopyText(prompt)}
             className={`py-1.5 text-[11px] font-medium rounded-lg transition-all border ${
               copiedPromptOnly
-                ? "bg-green-500/20 text-green-400 border-green-500/30"
+                ? "bg-accent/15 text-accent-ink border-accent/30"
                 : "bg-neutral-800/70 text-neutral-200 border-neutral-700/50 hover:bg-neutral-800"
             } disabled:opacity-50 disabled:cursor-not-allowed`}
           >
@@ -194,13 +194,13 @@ export function EditPopover({ rangeStart, rangeEnd, anchorX, anchorY, onClose }:
             onClick={handleCopy}
             className={`py-1.5 text-[11px] font-medium rounded-lg transition-all ${
               copiedAgentPrompt
-                ? "bg-green-500/20 text-green-400 border border-green-500/30"
-                : "bg-studio-accent/15 text-studio-accent border border-studio-accent/25 hover:bg-studio-accent/25"
+                ? "bg-accent/15 text-accent-ink border border-accent/30"
+                : "bg-studio-accent/15 text-accent-ink border border-studio-accent/25 hover:bg-studio-accent/25"
             }`}
           >
             {copiedAgentPrompt ? "Copied!" : "Copy to Agent"}
             {!copiedAgentPrompt && (
-              <span className="text-[9px] text-studio-accent/50 ml-1.5">Cmd+Enter</span>
+              <span className="text-[9px] text-text-muted ml-1.5">Cmd+Enter</span>
             )}
           </button>
         </div>

package/src/player/components/KeyframeDiamondContextMenu.tsx

@@ -42,7 +42,7 @@ interface KeyframeDiamondContextMenuProps {
 const ITEM_CLS =
   "w-full flex items-center gap-2 px-3 py-1.5 text-xs text-neutral-200 hover:bg-neutral-800 focus-visible:bg-neutral-800 outline-hidden cursor-pointer text-left";
 const DESTRUCTIVE_ITEM_CLS =
-  "w-full flex items-center gap-2 px-3 py-1.5 text-xs text-red-400 hover:bg-neutral-800 focus-visible:bg-neutral-800 outline-hidden cursor-pointer text-left";
+  "w-full flex items-center gap-2 px-3 py-1.5 text-xs text-danger-ink hover:bg-neutral-800 focus-visible:bg-neutral-800 outline-hidden cursor-pointer text-left";
 
 export function KeyframeDiamondContextMenu({
   state,
@@ -172,7 +172,7 @@ export function KeyframeDiamondContextMenu({
       <button
         type="button"
         role="menuitem"
-        className="w-full flex items-center gap-2 px-3 py-1.5 text-xs text-red-400 hover:bg-red-950/40 focus-visible:bg-red-950/40 outline-hidden cursor-pointer text-left"
+        className="w-full flex items-center gap-2 px-3 py-1.5 text-xs text-danger-ink hover:bg-danger/25 focus-visible:bg-danger/25 outline-hidden cursor-pointer text-left"
         onClick={() => {
           onDeleteAll(state.element, state.animationId);
           onClose();

package/src/player/components/PlayerControls.tsx

@@ -76,7 +76,7 @@ const LoopButton = memo(function LoopButton({
         }}
         disabled={disabled}
         className={`flex h-7 w-7 items-center justify-center rounded-md transition-colors disabled:opacity-30 ${
-          loopEnabled ? "text-studio-accent" : "text-neutral-500 hover:text-neutral-200"
+          loopEnabled ? "text-accent-ink" : "text-neutral-500 hover:text-neutral-200"
         }`}
         aria-label={loopEnabled ? "Disable loop playback" : "Enable loop playback"}
         aria-pressed={loopEnabled}
@@ -118,7 +118,7 @@ const FullscreenButton = memo(function FullscreenButton({
           onToggleFullscreen();
         }}
         className={`flex h-7 w-7 shrink-0 items-center justify-center rounded-md transition-colors ${
-          isFullscreen ? "text-studio-accent" : "text-neutral-500 hover:text-neutral-200"
+          isFullscreen ? "text-accent-ink" : "text-neutral-500 hover:text-neutral-200"
         }`}
         aria-label={isFullscreen ? "Exit fullscreen" : "Enter fullscreen"}
       >
@@ -241,7 +241,7 @@ export const PlayerControls = memo(function PlayerControls({
             <span ref={timeDisplayRef}>{formatTime(0)}</span>
             {timeDisplayMode === "time" ? (
               <>
-                <span className="mx-0.5 text-neutral-700">/</span>
+                <span className="mx-0.5 text-text-off">/</span>
                 <span className="text-neutral-600">{formatTime(duration)}</span>
               </>
             ) : null}

package/src/player/components/ShortcutsPanel.tsx

@@ -1,6 +1,7 @@
 import { useState, useCallback, useEffect, useId, useRef, memo } from "react";
 import { formatTime, frameToSeconds } from "../lib/time";
 import { Tooltip } from "../../components/ui";
+import { flatActive, flatIdle } from "../../components/timelineToolbarStyles";
 import { useContextMenuDismiss } from "../../hooks/useContextMenuDismiss";
 import { usePlayerStore } from "../store/playerStore";
 import { DEFAULT_SHORTCUT_SECTIONS, type ShortcutSection } from "./studioShortcuts";
@@ -77,9 +78,7 @@ export const ShortcutsPanel = memo(function ShortcutsPanel({
           ref={triggerRef}
           type="button"
           onClick={() => setShowShortcuts((v) => !v)}
-          className={`flex h-7 w-7 items-center justify-center rounded-md transition-colors ${
-            showShortcuts ? "text-neutral-200" : "text-neutral-600 hover:text-neutral-300"
-          }`}
+          className={showShortcuts ? flatActive : flatIdle}
           aria-label="Shortcuts and tools"
           aria-expanded={showShortcuts}
           aria-controls={shortcutsPanelId}
@@ -110,10 +109,8 @@ export const ShortcutsPanel = memo(function ShortcutsPanel({
           // Deliberately NOT aria-modal. This is a non-modal disclosure: focus is
           // not trapped and the rest of the editor stays operable, so claiming
           // modality would make assistive tech treat the whole app as inert.
-          className="absolute bottom-full right-0 mb-2 z-50 rounded-lg shadow-xl min-w-[220px] overflow-y-auto outline-hidden"
+          className="absolute bottom-full right-0 mb-2 z-50 rounded-lg border border-border bg-raised shadow-popover min-w-[220px] overflow-y-auto outline-hidden"
           style={{
-            background: "#161618",
-            border: "1px solid rgba(255,255,255,0.08)",
             maxHeight: "min(280px, calc(100vh - 80px))",
           }}
         >
@@ -145,7 +142,7 @@ export const ShortcutsPanel = memo(function ShortcutsPanel({
               </Tooltip>
             </form>
           </div>
-          <div style={{ borderTop: "1px solid rgba(255,255,255,0.06)" }} />
+          <div className="border-t border-border" />
           <div className="px-3 pt-2.5 pb-2">
             <p className="text-[9px] font-medium text-neutral-500 uppercase tracking-wider mb-1.5">
               Work area
@@ -153,10 +150,7 @@ export const ShortcutsPanel = memo(function ShortcutsPanel({
             <div className="flex flex-col gap-1">
               <div className="flex items-center justify-between gap-2">
                 <div className="flex items-center gap-2">
-                  <span
-                    className="font-mono text-[10px] rounded-sm border border-neutral-700 px-1.5 py-0.5 text-neutral-300 min-w-[20px] text-center"
-                    style={{ background: "rgba(255,255,255,0.05)" }}
-                  >
+                  <span className="font-mono text-[10px] rounded-sm border border-neutral-700 px-1.5 py-0.5 text-neutral-300 min-w-[20px] text-center bg-hover">
                     I
                   </span>
                   <span className="text-[10px] text-neutral-400">In-point</span>
@@ -194,10 +188,7 @@ export const ShortcutsPanel = memo(function ShortcutsPanel({
               </div>
               <div className="flex items-center justify-between gap-2">
                 <div className="flex items-center gap-2">
-                  <span
-                    className="font-mono text-[10px] rounded-sm border border-neutral-700 px-1.5 py-0.5 text-neutral-300 min-w-[20px] text-center"
-                    style={{ background: "rgba(255,255,255,0.05)" }}
-                  >
+                  <span className="font-mono text-[10px] rounded-sm border border-neutral-700 px-1.5 py-0.5 text-neutral-300 min-w-[20px] text-center bg-hover">
                     O
                   </span>
                   <span className="text-[10px] text-neutral-400">Out-point</span>
@@ -235,7 +226,7 @@ export const ShortcutsPanel = memo(function ShortcutsPanel({
               </div>
             </div>
           </div>
-          <div style={{ borderTop: "1px solid rgba(255,255,255,0.06)" }} />
+          <div className="border-t border-border" />
           <div className="px-3 pt-2.5 pb-3 flex flex-col gap-3">
             {sections.map((section, sectionIndex) => (
               <div key={sectionIndex}>
@@ -245,10 +236,7 @@ export const ShortcutsPanel = memo(function ShortcutsPanel({
                 <div className="flex flex-col gap-1">
                   {section.hints.map((hint, hintIndex) => (
                     <div key={hintIndex} className="flex items-center gap-3">
-                      <span
-                        className="font-mono text-[10px] rounded-sm border border-neutral-700 px-1.5 py-0.5 text-neutral-300 min-w-[36px] text-center"
-                        style={{ background: "rgba(255,255,255,0.05)" }}
-                      >
+                      <span className="font-mono text-[10px] rounded-sm border border-neutral-700 px-1.5 py-0.5 text-neutral-300 min-w-[36px] text-center bg-hover">
                         {hint.key}
                       </span>
                       <span className="text-[10px] text-neutral-400">{hint.label}</span>

package/src/player/components/TimelineCanvas.tsx

@@ -83,7 +83,7 @@ export const TimelineCanvas = memo(function TimelineCanvas() {
           data-active={ghostLaneActive || undefined}
           className={`pointer-events-none absolute flex items-center justify-center rounded-lg border border-dashed text-[11px] transition-colors duration-150 ${
             ghostLaneActive
-              ? "border-studio-accent/60 bg-studio-accent/6 text-studio-accent"
+              ? "border-studio-accent/60 bg-studio-accent/6 text-accent-ink"
               : "border-neutral-700/50 text-neutral-500"
           }`}
           style={{

package/src/player/components/TimelineClip.test.tsx

@@ -5,6 +5,7 @@ import { createRoot } from "react-dom/client";
 import { afterEach, describe, expect, it, vi } from "vitest";
 import type { TimelineElement } from "../store/playerStore";
 import { TimelineClip } from "./TimelineClip";
+import { ClipFadesContext } from "./TimelineClipFades";
 import type { TimelineEditCapabilities } from "./timelineEditing";
 import { defaultTimelineTheme, type TimelineTheme } from "./timelineTheme";
 
@@ -67,6 +68,43 @@ function renderClip({
 }
 
 describe("TimelineClip", () => {
+  it("hands its content the clip's fades, and none to a clip the mixer does not hear", () => {
+    const seen: unknown[] = [];
+    function Probe() {
+      seen.push(React.useContext(ClipFadesContext));
+      return null;
+    }
+    const render = (element: TimelineElement) => {
+      const host = document.createElement("div");
+      document.body.append(host);
+      const root = createRoot(host);
+      act(() => {
+        root.render(
+          <TimelineClip
+            el={element}
+            pps={100}
+            clipY={0}
+            isSelected={false}
+            isHovered={false}
+            hasCustomContent
+            capabilities={capabilities}
+            isComposition={false}
+            onHoverStart={vi.fn()}
+            onHoverEnd={vi.fn()}
+            onClick={vi.fn()}
+            onDoubleClick={vi.fn()}
+          >
+            <Probe />
+          </TimelineClip>,
+        );
+      });
+      act(() => root.unmount());
+    };
+    render({ id: "music", tag: "audio", start: 0, duration: 4, track: 0, fadeIn: 1, fadeOut: 0.5 });
+    render({ id: "title", tag: "div", start: 0, duration: 4, track: 0, fadeIn: 1 });
+    expect(seen).toEqual([{ fadeIn: 1, fadeOut: 0.5, duration: 4 }, null]);
+  });
+
   it("renders the clip label above custom content without showing default timecode", () => {
     const { host, root } = renderClip({
       element: { id: "hero", label: "Hero", tag: "div", start: 1, duration: 1, track: 0 },

package/src/player/components/TimelineClip.tsx

@@ -9,7 +9,8 @@ import {
 import type { TimelineEditCapabilities } from "./timelineEditing";
 import { isAudioTimelineElement } from "../../utils/timelineInspector";
 import { timelineClipFocusId } from "./timelineNavigationIdentity";
-import { TimelineClipFades } from "./TimelineClipFades";
+import { ClipFadesContext, TimelineClipFades, useClipFadeDraft } from "./TimelineClipFades";
+import { rendersWaveform } from "./AudioWaveform";
 
 interface TimelineClipProps {
   el: TimelineElement;
@@ -82,6 +83,8 @@ export const TimelineClip = memo(function TimelineClip({
     "--clip-handle": theme.handleColor,
   } as CSSProperties;
   const isAudioClip = isAudioTimelineElement(el);
+  const hasFades = (isAudioClip || Boolean(el.hasAudio)) && !isGestureActor;
+  const fade = useClipFadeDraft(el);
   const clipClassName = [
     "timeline-clip",
     "absolute",
@@ -165,7 +168,7 @@ export const TimelineClip = memo(function TimelineClip({
               width: 2,
               borderRadius: 1,
               background: "var(--clip-handle)",
-              opacity: handleOpacity * 0.6,
+              opacity: handleOpacity,
             }}
           />
         </div>
@@ -195,7 +198,7 @@ export const TimelineClip = memo(function TimelineClip({
               width: 2,
               borderRadius: 1,
               background: "var(--clip-handle)",
-              opacity: handleOpacity * 0.6,
+              opacity: handleOpacity,
             }}
           />
         </div>
@@ -206,16 +209,21 @@ export const TimelineClip = memo(function TimelineClip({
           {startLabel}-{endLabel}s
         </span>
       )}
-      {children}
-      {/* Fade handles + ramps for anything the mixer hears — audio clips and
-          videos marked data-has-audio. They write data-fade-in/out on the clip
-          and are the timeline half of the inspector's Fade rows. */}
-      {(isAudioClip || el.hasAudio) && !isGestureActor && (
+      <ClipFadesContext.Provider value={hasFades ? fade.shape : null}>
+        {children}
+      </ClipFadesContext.Provider>
+      {/* Fade handles for anything the mixer hears: audio clips and videos marked
+          data-has-audio. They write data-fade-in/out, the timeline half of the
+          inspector's Fade rows. */}
+      {hasFades && (
         <TimelineClipFades
           el={el}
           pps={pps}
           widthPx={widthPx}
           showHandles={(isHovered || isSelected) && !isDragging}
+          focusable={isSelected}
+          hasWaveform={rendersWaveform(el)}
+          fade={fade}
         />
       )}
     </button>