@hyperframes/studio 0.8.86 → 0.8.88

package/src/player/components/Timeline.showKeyframes.test.tsx

@@ -0,0 +1,91 @@
+// @vitest-environment happy-dom
+
+import React, { act } from "react";
+import { createRoot } from "react-dom/client";
+import { afterEach, describe, expect, it } from "vitest";
+import { Timeline } from "./Timeline";
+import { installTimelineMountEnv } from "./timelineMountTestEnv";
+import { usePlayerStore } from "../store/playerStore";
+
+(globalThis as { IS_REACT_ACT_ENVIRONMENT?: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
+
+installTimelineMountEnv();
+
+afterEach(() => {
+  document.body.innerHTML = "";
+});
+
+async function mountKeyframed(showKeyframes?: boolean, withLanes = true) {
+  usePlayerStore.setState({
+    duration: 10,
+    currentTime: 0,
+    timelineReady: true,
+    selectedElementId: "card",
+    elements: [{ id: "card", label: "Hero card", tag: "div", start: 0, duration: 4, track: 0 }],
+    gsapAnimations: withLanes
+      ? new Map([
+          [
+            "card",
+            [
+              {
+                id: "card-position",
+                targetSelector: "#card",
+                method: "to",
+                position: 0,
+                duration: 2,
+                properties: {},
+                propertyGroup: "position",
+                keyframes: {
+                  format: "percentage",
+                  keyframes: [
+                    { percentage: 0, properties: { x: 0 } },
+                    { percentage: 50, properties: { x: 100 } },
+                  ],
+                },
+              },
+            ],
+          ],
+        ])
+      : new Map(),
+    keyframeCache: new Map([
+      [
+        "card",
+        {
+          format: "percentage",
+          keyframes: [{ percentage: 50, properties: { x: 100 }, tweenPercentage: 50 }],
+        },
+      ],
+    ]),
+  });
+  const host = document.createElement("div");
+  document.body.append(host);
+  const root = createRoot(host);
+  await act(async () => root.render(<Timeline showKeyframes={showKeyframes} />));
+  const diamonds = host.querySelectorAll('button[title="50%"]').length;
+  const named = Array.from(host.querySelectorAll("[role=rowheader]")).some((h) =>
+    h.textContent?.includes("Hero card"),
+  );
+  const lanes = host.textContent?.includes("Position") ?? false;
+  act(() => root.unmount());
+  return { diamonds, named, lanes };
+}
+
+describe("Timeline showKeyframes", () => {
+  it("draws a keyframed clip's diamonds by default", async () => {
+    expect((await mountKeyframed(undefined, false)).diamonds).toBeGreaterThan(0);
+  });
+
+  it("draws no keyframe diamonds when the host turns keyframes off", async () => {
+    expect((await mountKeyframed(false, false)).diamonds).toBe(0);
+  });
+
+  it("draws the keyframe lanes by default and none when keyframes are off", async () => {
+    expect((await mountKeyframed()).lanes).toBe(true);
+    expect((await mountKeyframed(false)).lanes).toBe(false);
+  });
+
+  it("keeps each track's name in the header when keyframes are off", async () => {
+    expect((await mountKeyframed()).named).toBe(true);
+    expect((await mountKeyframed(false)).named).toBe(true);
+  });
+});

package/src/player/components/TimelineGroupHeader.tsx

@@ -24,6 +24,7 @@ interface TimelineGroupHeaderProps {
   onOpenFxRack: () => void;
   columnWidth: number;
   theme: TimelineTheme;
+  showAudioEffects?: boolean;
 }
 
 /**
@@ -41,17 +42,19 @@ function GroupNameButton({
   label,
   memberCount,
   onOpenFxRack,
+  showAudioEffects,
 }: {
   label: string;
   memberCount: number;
   onOpenFxRack: () => void;
+  showAudioEffects: boolean;
 }) {
   return (
     <button
       type="button"
       tabIndex={-1}
-      aria-label={`Open ${label} effects`}
-      title="Open effects"
+      aria-label={showAudioEffects ? `Open ${label} effects` : `Select ${label}`}
+      title={showAudioEffects ? "Open effects" : "Select group"}
       // No `flex-1`: the row's control group owns the slack now (`ml-auto`), so
       // claiming it here would push the controls off the right edge — and the
       // count with them, since it rides inside this button.
@@ -97,6 +100,7 @@ export function TimelineGroupHeader({
   onOpenFxRack,
   columnWidth,
   theme,
+  showAudioEffects = true,
 }: TimelineGroupHeaderProps) {
   return (
     <div
@@ -137,17 +141,24 @@ export function TimelineGroupHeader({
               ▸ sits off-centre in its box because the glyph is not square. */}
         <span aria-hidden="true">{isExpanded ? "▾" : "▸"}</span>
       </button>
-      <GroupNameButton label={label} memberCount={memberCount} onOpenFxRack={onOpenFxRack} />
+      <GroupNameButton
+        label={label}
+        memberCount={memberCount}
+        onOpenFxRack={onOpenFxRack}
+        showAudioEffects={showAudioEffects}
+      />
       {/* `ml-auto` absorbs the slack the truncating name leaves, so the controls
           sit on the edge whatever the name's length. */}
       <div className="ml-auto flex shrink-0 items-center gap-1.5">
-        <TimelineFxButton
-          fxChainRaw={fxChain}
-          onChainChange={onFxChainChange}
-          onChainPreview={onFxChainPreview}
-          auditionSpans={auditionSpans}
-          onOpenRack={onOpenFxRack}
-        />
+        {showAudioEffects && (
+          <TimelineFxButton
+            fxChainRaw={fxChain}
+            onChainChange={onFxChainChange}
+            onChainPreview={onFxChainPreview}
+            auditionSpans={auditionSpans}
+            onOpenRack={onOpenFxRack}
+          />
+        )}
         {/* No lanes, no control: an author who opens it meets an empty row and
             learns nothing. A track header already gates its own `∿` this way
             (`disclosable`); the group's was the one that still offered a

package/src/player/components/TimelineGroupLaneLabels.tsx

@@ -63,8 +63,13 @@ export function TimelineGroupLaneLabels({
             tabIndex={-1}
             key={lane.target}
             data-group-lane-label={lane.target}
-            aria-label={`Show ${groupLabel} ${parts.name}${parts.param ? ` ${parts.param}` : ""} in the effect rack`}
-            className="absolute left-0 flex items-center gap-1.5 overflow-hidden border-0 px-1.5 text-left text-[10px] text-[var(--timeline-text-secondary)] hover:text-[var(--timeline-text-solid)] focus-visible:outline-solid focus-visible:outline-1 focus-visible:outline-[var(--timeline-accent)]"
+            aria-label={
+              onReveal
+                ? `Show ${groupLabel} ${parts.name}${parts.param ? ` ${parts.param}` : ""} in the effect rack`
+                : undefined
+            }
+            disabled={!onReveal}
+            className="absolute left-0 flex items-center gap-1.5 overflow-hidden border-0 px-1.5 text-left text-[10px] text-[var(--timeline-text-secondary)] enabled:hover:text-[var(--timeline-text-solid)] focus-visible:outline-solid focus-visible:outline-1 focus-visible:outline-[var(--timeline-accent)]"
             style={{
               top: top + index * AUTOMATION_LANE_H,
               width: columnWidth,

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

@@ -45,9 +45,21 @@ const GROUP: TimelineTrackGroupInfo = {
   hidden: false,
 };
 
+const GAIN_AUTOMATED: Partial<TimelineTrackGroupInfo> = {
+  fxChain: JSON.stringify({
+    version: 1,
+    nodes: [{ type: "peaking", id: "p1", params: { frequency: 1000, gain: -3, q: 1 } }],
+  }),
+  automation: JSON.stringify({
+    version: 1,
+    lanes: [{ target: "fx.p1.gain", points: [{ t: 0, v: 0 }] }],
+  }),
+};
+
 function renderRow(
   overrides: Partial<TimelineTrackGroupInfo> = {},
   expandedLaneOwnerIds = new Set<string>(),
+  showAudioEffects?: boolean,
 ) {
   const onSetAudioGroupAttributeQuiet = vi.fn();
   const onSetElementAttributeQuiet = vi.fn();
@@ -66,6 +78,7 @@ function renderRow(
           virtualized={false}
           contentOrigin={232}
           theme={defaultTimelineTheme}
+          showAudioEffects={showAudioEffects}
           collapsedGroupIds={new Set()}
           expandedLaneOwnerIds={expandedLaneOwnerIds}
           toggleGroupExpanded={vi.fn()}
@@ -118,19 +131,7 @@ describe("TimelineGroupRow", () => {
   });
 
   it("opens a group automation lane on its exact rack parameter", async () => {
-    const { host } = renderRow(
-      {
-        fxChain: JSON.stringify({
-          version: 1,
-          nodes: [{ type: "peaking", id: "p1", params: { frequency: 1000, gain: -3, q: 1 } }],
-        }),
-        automation: JSON.stringify({
-          version: 1,
-          lanes: [{ target: "fx.p1.gain", points: [{ t: 0, v: 0 }] }],
-        }),
-      },
-      new Set(["voiceover"]),
-    );
+    const { host } = renderRow(GAIN_AUTOMATED, new Set(["voiceover"]));
     const laneTitle = host.querySelector<HTMLButtonElement>('[data-group-lane-label="fx.p1.gain"]');
 
     await act(async () => {
@@ -147,6 +148,14 @@ describe("TimelineGroupRow", () => {
     });
   });
 
+  it("keeps a group lane's name off the rack while audio effects are hidden", () => {
+    const { host } = renderRow(GAIN_AUTOMATED, new Set(["voiceover"]), false);
+    const laneTitle = host.querySelector<HTMLButtonElement>('[data-group-lane-label="fx.p1.gain"]');
+
+    expect(laneTitle?.disabled).toBe(true);
+    expect(laneTitle?.getAttribute("aria-label")).toBeNull();
+  });
+
   // C1 names this as the step's own definition of done: "opening the popover on
   // a GROUP and applying a preset results in exactly ONE `data-fx-chain` write,
   // on the group element, and zero writes on members". A group IS a bus — a
@@ -180,16 +189,7 @@ describe("TimelineGroupRow", () => {
 
     expect(laneToggle(renderRow().host)).toBeUndefined();
 
-    const automated = renderRow({
-      fxChain: JSON.stringify({
-        version: 1,
-        nodes: [{ type: "peaking", id: "p1", params: { frequency: 1000, gain: -3, q: 1 } }],
-      }),
-      automation: JSON.stringify({
-        version: 1,
-        lanes: [{ target: "fx.p1.gain", points: [{ t: 0, v: 0 }] }],
-      }),
-    });
+    const automated = renderRow(GAIN_AUTOMATED);
     expect(laneToggle(automated.host)).toBeDefined();
   });
 
@@ -197,16 +197,7 @@ describe("TimelineGroupRow", () => {
   // one right-anchored group. It was two lines — name, then controls — which is
   // what let a stray child overflow the 48px box on the track side.
   it("keeps the caret, the name and every control on one line", () => {
-    const { host } = renderRow({
-      fxChain: JSON.stringify({
-        version: 1,
-        nodes: [{ type: "peaking", id: "p1", params: { frequency: 1000, gain: -3, q: 1 } }],
-      }),
-      automation: JSON.stringify({
-        version: 1,
-        lanes: [{ target: "fx.p1.gain", points: [{ t: 0, v: 0 }] }],
-      }),
-    });
+    const { host } = renderRow(GAIN_AUTOMATED);
     const header = host.querySelector<HTMLElement>('[role="rowheader"]');
     // Caret, name, control group — no second line.
     expect(header?.children).toHaveLength(3);

package/src/player/components/TimelineGroupRow.tsx

@@ -33,6 +33,7 @@ interface TimelineGroupRowProps {
   virtualized: boolean;
   contentOrigin: number;
   theme: TimelineTheme;
+  showAudioEffects?: boolean;
   rovingTargetId?: string | null;
   collapsedGroupIds: ReadonlySet<string>;
   expandedLaneOwnerIds: ReadonlySet<string>;
@@ -59,6 +60,7 @@ export function TimelineGroupRow({
   virtualized,
   contentOrigin,
   theme,
+  showAudioEffects = true,
   rovingTargetId = null,
   collapsedGroupIds,
   expandedLaneOwnerIds,
@@ -173,6 +175,7 @@ export function TimelineGroupRow({
           // stays pinned there through horizontal scroll.
           columnWidth={contentOrigin >= LABEL_COL_W ? LABEL_COL_W : contentOrigin}
           theme={theme}
+          showAudioEffects={showAudioEffects}
         />
         {/* The group's OWN curves, under the strip. Selected-gated exactly like a
           clip's: a lane is editable once the group is selected, which clicking
@@ -187,7 +190,7 @@ export function TimelineGroupRow({
             columnWidth={contentOrigin >= LABEL_COL_W ? LABEL_COL_W : contentOrigin}
             gutterBackground={theme.gutterBackground}
             accentColor={GROUP_LANE_ACCENT}
-            onReveal={openGroupFxRack}
+            onReveal={showAudioEffects ? openGroupFxRack : undefined}
           />
         )}
       </div>

package/src/player/components/TimelineLanes.tsx

@@ -41,6 +41,7 @@ export function TimelineLanes({
   contentGutter,
   trackContentWidth,
   theme,
+  showAudioEffects,
   displayTrackOrder,
   rowGeometry,
   virtualRows,
@@ -115,11 +116,8 @@ export function TimelineLanes({
   // synthetic lane element spans the whole composition rather than a clip.
   const compositionDuration = usePlayerStore((s) => s.duration);
   useAutomationSelectionKeyboard({ lanes: automationLanes });
-  const { logicalRowsByTrack, groupByAnchor } = useTimelineLaneRowIndexes(logicalRows, groups);
-  const groupMemberTracks = useMemo(
-    () => new Set(groups.flatMap((group) => group.memberTracks)),
-    [groups],
-  );
+  const rowIndexes = useTimelineLaneRowIndexes(logicalRows, groups);
+  const { logicalRowsByTrack, groupByAnchor, groupMemberTracks } = rowIndexes;
   const {
     toggleRowExpanded: toggleRowExpandedTracked,
     toggleClipExpanded: toggleClipExpandedTracked,
@@ -168,6 +166,7 @@ export function TimelineLanes({
                 virtualized={rowsVirtualized}
                 contentOrigin={contentOrigin}
                 theme={theme}
+                showAudioEffects={showAudioEffects}
                 rovingTargetId={keyboard.rovingTargetId}
                 collapsedGroupIds={collapsedGroupIds}
                 expandedLaneOwnerIds={expandedLaneOwnerIds}
@@ -292,6 +291,7 @@ export function TimelineLanes({
                 isAudioTrack={isAudioTrack}
                 isGroupMember={groupMemberTracks.has(trackNum)}
                 theme={theme}
+                showAudioEffects={showAudioEffects}
                 onToggleClipExpanded={() => {
                   const keys = els.map(getTimelineElementIdentity);
                   if (keys.length > 0) toggleRowExpandedTracked(keys);

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

@@ -75,6 +75,7 @@ interface RenderHeaderOptions {
   isAudioTrack?: boolean;
   isGroupMember?: boolean;
   isTrackHidden?: boolean;
+  showAudioEffects?: boolean;
 }
 
 function renderHeader(options: RenderHeaderOptions = {}): {
@@ -119,6 +120,7 @@ function renderHeader(options: RenderHeaderOptions = {}): {
           isAudioTrack={next.isAudioTrack}
           isGroupMember={next.isGroupMember}
           theme={defaultTimelineTheme}
+          showAudioEffects={next.showAudioEffects}
           onToggleClipExpanded={vi.fn()}
           onToggleTrackHidden={next.onToggleTrackHidden}
           onTogglePropertyGroupKeyframe={next.onTogglePropertyGroupKeyframe}
@@ -583,6 +585,31 @@ describe("TimelineTrackHeader", () => {
       }),
     } as TimelineElement;
 
+    it("offers the effect rack from an effect lane only while audio effects are shown", () => {
+      const clip = { ...BED, domId: "bed" } as TimelineElement;
+      const gainLabel = (showAudioEffects?: boolean) => {
+        const { host, root } = renderHeader({
+          keyframeClip: clip,
+          animations: [],
+          showAudioEffects,
+        });
+        const button = host
+          .querySelector('[data-automation-lane-label="Peaking EQ 1.6 kHz · Gain"]')
+          ?.querySelector("button");
+        const state = {
+          label: button?.getAttribute("aria-label") ?? null,
+          disabled: button?.disabled,
+        };
+        act(() => root.unmount());
+        return state;
+      };
+      expect(gainLabel()).toEqual({
+        label: "Show Peaking EQ 1.6 kHz · Gain in the effect rack",
+        disabled: false,
+      });
+      expect(gainLabel(false)).toEqual({ label: null, disabled: true });
+    });
+
     it("names every envelope in the label column", () => {
       const { host, root } = renderHeader({ keyframeClip: BED, animations: [] });
       const rows = Array.from(host.querySelectorAll<HTMLElement>("[data-automation-lane-label]"));

package/src/player/components/TimelineTrackHeader.tsx

@@ -72,6 +72,7 @@ interface TimelineTrackHeaderProps {
   isGroupMember?: boolean;
   rovingTargetId?: string | null;
   theme: TimelineTheme;
+  showAudioEffects?: boolean;
   onToggleClipExpanded: () => void;
   onToggleTrackHidden: TimelineEditCallbacks["onToggleTrackHidden"];
   onTogglePropertyGroupKeyframe?: TimelineEditCallbacks["onTogglePropertyGroupKeyframe"];
@@ -98,6 +99,7 @@ export function TimelineTrackHeader({
   isAudioTrack,
   isGroupMember = false,
   theme,
+  showAudioEffects = true,
   onToggleClipExpanded,
   onToggleTrackHidden,
   onTogglePropertyGroupKeyframe,
@@ -316,7 +318,7 @@ export function TimelineTrackHeader({
               // On the control line rather than a third row of its own.
               trailing={
                 <>
-                  {singleAudioClip && (
+                  {showAudioEffects && singleAudioClip && (
                     <TimelineFxButton
                       variant="chain"
                       fxChainRaw={singleAudioClip.fxChain}
@@ -340,7 +342,8 @@ export function TimelineTrackHeader({
                       onOpenRack={() => openClipFxRack(singleAudioClip)}
                     />
                   )}
-                  {clipCount > 1 &&
+                  {showAudioEffects &&
+                    clipCount > 1 &&
                     !isTrackGrouped &&
                     (isAudioTrack ? canGroupWholeTrack : isVideoWithAudioTrack) && (
                       <TimelineFxButton
@@ -455,7 +458,7 @@ export function TimelineTrackHeader({
               // element, so a shared row's other envelopes belong to clips it is
               // not showing and there would be nothing to reveal.
               onReveal={
-                revealTarget && revealElementId && keyframeClip
+                showAudioEffects && revealTarget && revealElementId && keyframeClip
                   ? () => {
                       // Select FIRST: the rack is the property panel's view of
                       // the selected element, so a reveal aimed at an unselected

package/src/player/components/TimelineTypes.ts

@@ -33,4 +33,6 @@ export interface TimelineProps
   onDuplicateClip?: () => Promise<boolean>;
   canPasteClip?: () => boolean;
   theme?: Partial<TimelineTheme>;
+  showAudioEffects?: boolean;
+  showKeyframes?: boolean;
 }

package/src/player/components/studioShortcuts.ts

@@ -52,6 +52,8 @@ export const DEFAULT_SHORTCUT_SECTIONS: readonly ShortcutSection[] = [
       { key: "⌘X", label: "Cut element" },
       { key: hintKey(STUDIO_PLAIN_KEYS.split), label: "Split clip at playhead" },
       { key: "⇧Click", label: "Razor tool: split all tracks" },
+      { key: "[", label: "Select clips starting before the playhead" },
+      { key: "]", label: "Select clips starting at or after the playhead" },
       { key: "⌘G", label: "Group elements" },
       { key: "⌘⇧G", label: "Ungroup" },
       { key: "Del", label: "Delete selected element (no keyframe selected)" },

package/src/player/components/timelineLaneProps.ts

@@ -29,6 +29,7 @@ export interface TimelineLaneBaseProps {
   contentGutter: number;
   trackContentWidth: number;
   theme: TimelineTheme;
+  showAudioEffects?: boolean;
   displayTrackOrder: number[];
   rowHeights: readonly number[];
   rowGeometry: TimelineRowGeometry;

package/src/player/components/timelineMountTestEnv.ts

@@ -0,0 +1,29 @@
+import { afterAll, beforeAll } from "vitest";
+
+// Mounting a whole <Timeline> in happy-dom needs a width to lay out against and a size report.
+class MockResizeObserver {
+  constructor(private readonly callback: ResizeObserverCallback) {}
+  observe(target: Element) {
+    this.callback([{ target } as ResizeObserverEntry], this as unknown as ResizeObserver);
+  }
+  unobserve() {}
+  disconnect() {}
+}
+
+export function installTimelineMountEnv(): void {
+  const originalResizeObserver = globalThis.ResizeObserver;
+  const originalClientWidth = Object.getOwnPropertyDescriptor(HTMLElement.prototype, "clientWidth");
+  beforeAll(() => {
+    globalThis.ResizeObserver = MockResizeObserver as unknown as typeof ResizeObserver;
+    Object.defineProperty(HTMLElement.prototype, "clientWidth", {
+      configurable: true,
+      get: () => 900,
+    });
+  });
+  afterAll(() => {
+    globalThis.ResizeObserver = originalResizeObserver;
+    if (originalClientWidth)
+      Object.defineProperty(HTMLElement.prototype, "clientWidth", originalClientWidth);
+    document.body.innerHTML = "";
+  });
+}

package/src/player/components/useTimelineKeyframeData.ts

@@ -0,0 +1,14 @@
+import { usePlayerStore, type KeyframeCacheEntry } from "../store/playerStore";
+import type { GsapAnimation } from "@hyperframes/core/gsap-parser";
+
+const HIDDEN = {
+  gsapAnimations: new Map<string, GsapAnimation[]>(),
+  keyframeCache: new Map<string, KeyframeCacheEntry>(),
+};
+
+/** The keyframe data the timeline draws, or none when the host hides keyframes. */
+export function useTimelineKeyframeData(showKeyframes: boolean) {
+  const gsapAnimations = usePlayerStore((s) => s.gsapAnimations);
+  const keyframeCache = usePlayerStore((s) => s.keyframeCache);
+  return showKeyframes ? { gsapAnimations, keyframeCache } : HIDDEN;
+}

package/src/player/components/useTimelineLabelColumn.ts

@@ -0,0 +1,18 @@
+import { useMemo } from "react";
+import type { GsapAnimation } from "@hyperframes/core/gsap-parser";
+import type { TimelineElement } from "../store/playerStore";
+import { GUTTER, LABEL_COL_W, TRACKS_LEFT_PAD } from "./timelineLayout";
+import { timelineNeedsLabelColumn } from "./timelineViewModel";
+
+export function useTimelineLabelColumn(
+  animationsByElement: ReadonlyMap<string, readonly GsapAnimation[]>,
+  elements: readonly TimelineElement[],
+) {
+  const labelMode = useMemo(
+    () => timelineNeedsLabelColumn(animationsByElement, elements),
+    [animationsByElement, elements],
+  );
+  // The label column provides pre-t=0 space; otherwise keep TRACKS_LEFT_PAD after the gutter.
+  const contentOrigin = labelMode ? LABEL_COL_W + GUTTER : GUTTER + TRACKS_LEFT_PAD;
+  return { labelMode, contentOrigin };
+}

package/src/player/components/useTimelineLaneRowIndexes.ts

@@ -34,5 +34,10 @@ export function useTimelineLaneRowIndexes(
     [groups],
   );
 
-  return { logicalRowsByTrack, groupByAnchor };
+  const groupMemberTracks = useMemo(
+    () => new Set(groups.flatMap((group) => group.memberTracks)),
+    [groups],
+  );
+
+  return { logicalRowsByTrack, groupByAnchor, groupMemberTracks };
 }

package/src/player/components/useTimelineProviderState.tsx

@@ -19,7 +19,9 @@ import { useTimelineEditPinning } from "./useTimelineEditPinning";
 import { useTimelineStackingSync } from "./useTimelineStackingSync";
 import { useTimelineGeometry } from "./useTimelineGeometry";
 import { useAutoExpandKeyframedClips } from "./useAutoExpandKeyframedClips";
-import { GUTTER, LABEL_COL_W, TRACKS_LEFT_PAD } from "./timelineLayout";
+import { GUTTER, LABEL_COL_W } from "./timelineLayout";
+import { useTimelineLabelColumn } from "./useTimelineLabelColumn";
+import { useTimelineKeyframeData } from "./useTimelineKeyframeData";
 import { useTimelineScrollViewport } from "./useTimelineScrollViewport";
 import { ClipContentOnceShown } from "./timelineClipChildren";
 import { useResolvedTimelineEditCallbacks } from "./useResolvedTimelineEditCallbacks";
@@ -33,11 +35,7 @@ import { useTimelineKeyframeHandlers } from "./useTimelineKeyframeHandlers";
 import { useTimelineGapHighlights } from "./useTimelineGapHighlights";
 import { TimelineRazorGuideOverlay, useTimelineRazorInteraction } from "./TimelineRazorInteraction";
 import { useTimelinePerformanceTelemetry } from "./useTimelinePerformanceTelemetry";
-import {
-  getEffectiveTimelineDuration,
-  getTimelinePreviewElement,
-  timelineNeedsLabelColumn,
-} from "./timelineViewModel";
+import { getEffectiveTimelineDuration, getTimelinePreviewElement } from "./timelineViewModel";
 import { useTimelineShiftModifier } from "./useTimelineShiftModifier";
 import { useTimelineTicks } from "./useTimelineTicks";
 import { getTimelineElementIdentity } from "../lib/timelineElementHelpers";
@@ -70,6 +68,8 @@ export function useTimelineProviderState({
   onDuplicateClip,
   canPasteClip,
   theme: themeOverrides,
+  showAudioEffects = true,
+  showKeyframes = true,
   sessionEpoch = 0,
   previewIframeRef,
   onZIndexReorder,
@@ -106,13 +106,9 @@ export function useTimelineProviderState({
   const selectedElementId = usePlayerStore((s) => s.selectedElementId);
   const selectedElementIds = usePlayerStore((s) => s.selectedElementIds);
   const focusedEaseSegment = usePlayerStore((s) => s.focusedEaseSegment);
-  const gsapAnimations = usePlayerStore((s) => s.gsapAnimations);
-  const labelMode = useMemo(
-    () => timelineNeedsLabelColumn(gsapAnimations, timelineElements),
-    [gsapAnimations, timelineElements],
-  );
-  // The label column provides pre-t=0 space; otherwise keep TRACKS_LEFT_PAD after the gutter.
-  const contentOrigin = labelMode ? LABEL_COL_W + GUTTER : GUTTER + TRACKS_LEFT_PAD;
+  const { gsapAnimations, keyframeCache } = useTimelineKeyframeData(showKeyframes);
+  const namedAnimations = usePlayerStore((s) => s.gsapAnimations);
+  const { labelMode, contentOrigin } = useTimelineLabelColumn(namedAnimations, timelineElements);
   const setSelectedElementId = usePlayerStore((s) => s.setSelectedElementId);
   const currentTime = usePlayerStore((s) => s.currentTime);
   const beatDragging = usePlayerStore((s) => s.beatDragging);
@@ -137,7 +133,6 @@ export function useTimelineProviderState({
     () => getEffectiveTimelineDuration(duration, timelineElements),
     [duration, timelineElements],
   );
-  const keyframeCache = usePlayerStore((s) => s.keyframeCache);
   useAutoExpandKeyframedClips(gsapAnimations);
   const {
     tracks,
@@ -448,6 +443,7 @@ export function useTimelineProviderState({
     laneGapStrips,
     dropPreview: assetDrop.dropPreview,
     theme,
+    showAudioEffects,
     displayTrackOrder: displayLayout.displayTrackOrder,
     rowHeights: displayLayout.displayRowHeights,
     rowGeometry: displayLayout.rowGeometry,

package/src/player/components/useTimelineRangeSelection.ts

@@ -546,29 +546,30 @@ export function useTimelineRangeSelection({
     [cancelActiveGesture, isGestureSessionCurrent],
   );
 
-  // Escape: cancel an in-flight marquee (restores the pre-drag selection);
-  // otherwise clear any lingering multi-selection.
+  // Escape cancels an in-flight band, captured so a host's own Escape never also fires;
+  // otherwise it clears any lingering multi-selection.
   useEffect(() => {
+    const onBandEscape = (e: KeyboardEvent) => {
+      if (e.key !== "Escape" || !(marqueeRef.current || isRangeSelecting.current)) return;
+      e.preventDefault();
+      e.stopPropagation();
+      cancelActiveGesture(true, true);
+    };
     const onKeyDown = (e: KeyboardEvent) => {
       if (e.key !== "Escape") return;
       const store = usePlayerStore.getState();
-      const marquee = marqueeRef.current;
-      if (marquee) {
-        cancelActiveGesture(true, true);
-        return;
-      }
-      if (isRangeSelecting.current || isDragging.current) {
+      if (isDragging.current) {
         cancelActiveGesture(true, true);
         return;
       }
-      // Escape with no marquee clears the whole selection — primary AND set.
-      // setSelectedElementId(null) also collapses the multi-select set.
       if (store.selectedElementId || store.selectedElementIds.size > 0) {
         store.setSelectedElementId(null);
       }
     };
-    window.addEventListener("keydown", onKeyDown);
-    return () => window.removeEventListener("keydown", onKeyDown);
+    const listeners = new AbortController();
+    window.addEventListener("keydown", onBandEscape, { capture: true, signal: listeners.signal });
+    window.addEventListener("keydown", onKeyDown, { signal: listeners.signal });
+    return () => listeners.abort();
   }, [cancelActiveGesture, isDragging]);
 
   const previousSessionEpochRef = useRef(sessionEpoch);