@hyperframes/studio 0.8.85 → 0.8.87

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

@@ -213,7 +213,9 @@ describe("Timeline provider boundary", () => {
         100,
       ).start,
     ).toBe(10);
-    expect(getTimelineFitPps(640, 11, GUTTER)).toBe(10.1);
+    expect(getTimelineFitPps(640, 11, GUTTER)).toBeCloseTo(
+      (640 - GUTTER - 2) / (11 * FIT_ZOOM_HEADROOM),
+    );
 
     act(() => root.unmount());
   });
@@ -313,7 +315,7 @@ describe("Timeline provider boundary", () => {
     expect(rulerX).toBe(LABEL_COL_W + GUTTER + 1000);
     expect(collapsedHeader.textContent).toContain("Outro");
     expect(getTimelineFitPps(640, 20, LABEL_COL_W + GUTTER)).toBeCloseTo(
-      (640 - (LABEL_COL_W + GUTTER) - 2) / MIN_TIMELINE_EXTENT_S,
+      (640 - (LABEL_COL_W + GUTTER) - 2) / (20 * FIT_ZOOM_HEADROOM),
     );
     expect(
       resolveTimelineAssetDrop(
@@ -948,15 +950,13 @@ describe("shouldAutoScrollTimeline", () => {
   });
 });
 
-describe("getTimelineFitPps (min 60s extent + fit headroom)", () => {
+describe("getTimelineFitPps (fit headroom, 60s floor only without a duration)", () => {
   const viewport = 632; // usable width = 632 - GUTTER - TRACKS_LEFT_PAD - 2
 
-  it("computes fit pps against the 60s floor for short compositions", () => {
-    // A 10s comp maps 60s onto the viewport → the comp takes ~1/6 of the width.
-    // (10 * 1.2 = 12s of headroom-padded content is still under the 60s floor.)
-    const pps = getTimelineFitPps(viewport, 10, GUTTER + TRACKS_LEFT_PAD);
-    expect(pps).toBeCloseTo((viewport - (GUTTER + TRACKS_LEFT_PAD) - 2) / MIN_TIMELINE_EXTENT_S);
-    expect(10 * pps).toBeCloseTo((viewport - (GUTTER + TRACKS_LEFT_PAD) - 2) / 6);
+  it("fits a short film to the width, not to a 60s ruler", () => {
+    const usable = viewport - (GUTTER + TRACKS_LEFT_PAD) - 2;
+    const pps = getTimelineFitPps(viewport, 17, GUTTER + TRACKS_LEFT_PAD);
+    expect(17 * pps).toBeCloseTo(usable / FIT_ZOOM_HEADROOM);
   });
 
   it("fits duration * FIT_ZOOM_HEADROOM (not the bare duration) for long compositions", () => {
@@ -1000,11 +1000,10 @@ describe("getTimelineFitPps (min 60s extent + fit headroom)", () => {
 });
 
 describe("getTimelineDisplayContentWidth", () => {
-  it("always spans at least MIN_TIMELINE_EXTENT_S seconds of content", () => {
-    // 10s of content at 20 pps = 200px; the floor keeps 60s (1200px) rendered.
+  it("spans MIN_TIMELINE_EXTENT_S seconds while the duration is unknown", () => {
     expect(
       getTimelineDisplayContentWidth({
-        trackContentWidth: 200,
+        effectiveDuration: 0,
         viewportWidth: 400,
         contentOrigin: GUTTER,
         pps: 20,
@@ -1012,10 +1011,24 @@ describe("getTimelineDisplayContentWidth", () => {
     ).toBe(MIN_TIMELINE_EXTENT_S * 20);
   });
 
-  it("still fills the viewport when that is larger than the 60s floor", () => {
+  it("renders a short film at fit exactly as wide as the viewport, so fit never scrolls", () => {
+    const viewport = 632;
+    const origin = GUTTER + TRACKS_LEFT_PAD;
+    const pps = getTimelineFitPps(viewport, 17, origin);
+    expect(
+      getTimelineDisplayContentWidth({
+        effectiveDuration: 17,
+        viewportWidth: viewport,
+        contentOrigin: origin,
+        pps,
+      }),
+    ).toBeCloseTo(viewport - origin - 2);
+  });
+
+  it("still fills the viewport when that is larger than the fit span", () => {
     expect(
       getTimelineDisplayContentWidth({
-        trackContentWidth: 200,
+        effectiveDuration: 40,
         viewportWidth: 2000,
         contentOrigin: GUTTER + TRACKS_LEFT_PAD,
         pps: 5,
@@ -1026,7 +1039,7 @@ describe("getTimelineDisplayContentWidth", () => {
   it("tracks a drag ghost past every other bound (drag-to-extend)", () => {
     expect(
       getTimelineDisplayContentWidth({
-        trackContentWidth: 500,
+        effectiveDuration: 100,
         viewportWidth: 400,
         contentOrigin: GUTTER,
         pps: 5,
@@ -1038,7 +1051,7 @@ describe("getTimelineDisplayContentWidth", () => {
   it("tracks a resize (trim) ghost past every other bound (trim-to-extend)", () => {
     expect(
       getTimelineDisplayContentWidth({
-        trackContentWidth: 500,
+        effectiveDuration: 100,
         viewportWidth: 400,
         contentOrigin: GUTTER,
         pps: 5,
@@ -1047,15 +1060,15 @@ describe("getTimelineDisplayContentWidth", () => {
     ).toBe(4200);
   });
 
-  it("keeps long content authoritative", () => {
+  it("keeps the fit headroom past the end when zoomed in", () => {
     expect(
       getTimelineDisplayContentWidth({
-        trackContentWidth: 9000,
+        effectiveDuration: 180,
         viewportWidth: 400,
         contentOrigin: GUTTER,
         pps: 50,
       }),
-    ).toBe(9000);
+    ).toBeCloseTo(180 * FIT_ZOOM_HEADROOM * 50);
   });
 });
 

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,5 @@ export interface TimelineProps
   onDuplicateClip?: () => Promise<boolean>;
   canPasteClip?: () => boolean;
   theme?: Partial<TimelineTheme>;
+  showAudioEffects?: boolean;
 }

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/timelineLayout.ts

@@ -281,57 +281,51 @@ export function getTimelineInsertBoundaryBand(rowHeight: number): number {
  * rendered width (see Timeline.tsx displayContentWidth).
  */
 export const DRAG_EXTEND_MARGIN_PX = 160;
-/**
- * The rendered timeline always spans at least this many seconds of ruler +
- * track lanes, even when the composition is shorter — the empty space on the
- * right is a real, drag/drop-enabled surface (clips can be moved into it; the
- * composition grows on commit, content-driven). In fit mode the fit pps is
- * derived against this floor, so a 10s comp renders as ~1/6 of the viewport
- * with 60s of ruler after it.
- */
+/** The span the timeline maps while the composition's duration is unknown or 0. */
 export const MIN_TIMELINE_EXTENT_S = 60;
 /**
  * Fit-mode headroom (CapCut-style): "fit" maps `duration * 1.2` — not the bare
  * duration — onto the viewport, so the composition ends at ~83% of the width
  * and the trailing ~17% stays empty ruler + droppable lane surface (room to
  * drag clips past the current end without first zooming out). Applied ONLY
- * inside {@link getTimelineFitPps}, the single fit-pps source, so the ruler,
- * lanes, playhead, marquee, and drag math all inherit it consistently. Manual
+ * inside {@link getTimelineFitSpan}, which fit pps and the drawn width share, so
+ * the ruler, lanes, playhead, marquee, and drag math inherit it. Manual
  * zoom percentages stay defined relative to this fit basis (100% == fit).
  */
 export const FIT_ZOOM_HEADROOM = 1.2;
 
 /* ── Tick generation ──────────────────────────────────────────────── */
 /* ── Width / duration derivation ──────────────────────────────────── */
+/** Seconds the timeline maps: the composition plus FIT_ZOOM_HEADROOM, or the floor while its duration is unknown. */
+function getTimelineFitSpan(effectiveDuration: number): number {
+  return Number.isFinite(effectiveDuration) && effectiveDuration > 0
+    ? effectiveDuration * FIT_ZOOM_HEADROOM
+    : MIN_TIMELINE_EXTENT_S;
+}
+
 /**
  * Fit-mode pixels-per-second: fill the viewport with the composition plus
  * FIT_ZOOM_HEADROOM trailing headroom (CapCut-style — the comp never slams
- * into the right edge), and never map fewer than MIN_TIMELINE_EXTENT_S
- * seconds onto it — a short comp takes a fraction of the width and the
- * remaining ruler runs to 1:00.
- * Manual zoom multiplies this base, so the floor only anchors the default.
+ * into the right edge). Manual zoom multiplies this base.
  */
 export function getTimelineFitPps(
   viewportWidth: number,
   effectiveDuration: number,
   contentOrigin: number,
 ): number {
-  const safeDuration =
-    Number.isFinite(effectiveDuration) && effectiveDuration > 0 ? effectiveDuration : 0;
-  const span = Math.max(safeDuration * FIT_ZOOM_HEADROOM, MIN_TIMELINE_EXTENT_S);
   if (!Number.isFinite(viewportWidth) || viewportWidth <= contentOrigin) return 100;
-  return (viewportWidth - contentOrigin - 2) / span;
+  return (viewportWidth - contentOrigin - 2) / getTimelineFitSpan(effectiveDuration);
 }
 
 /**
  * The rendered timeline extent in px. Always covers, whichever is largest:
- * the actual clip content, the visible viewport (no dead black after short
+ * the visible viewport (no dead black after short
  * content — CapCut-style), a live drag or resize ghost plus the auto-scroll
- * margin (drag/trim-to-extend), and the MIN_TIMELINE_EXTENT_S floor. Only the
+ * margin (drag/trim-to-extend), and the fit span at this zoom. Only the
  * RENDERED extent grows; clip positions/durations are untouched.
  */
 export function getTimelineDisplayContentWidth(input: {
-  trackContentWidth: number;
+  effectiveDuration: number;
   viewportWidth: number;
   contentOrigin: number;
   pps: number;
@@ -340,11 +334,10 @@ export function getTimelineDisplayContentWidth(input: {
 }): number {
   const safePps = Number.isFinite(input.pps) ? Math.max(input.pps, 0) : 0;
   return Math.max(
-    input.trackContentWidth,
     input.viewportWidth - input.contentOrigin - 2,
     input.dragGhostEndPx ?? 0,
     input.resizeGhostEndPx ?? 0,
-    MIN_TIMELINE_EXTENT_S * safePps,
+    getTimelineFitSpan(input.effectiveDuration) * safePps,
   );
 }
 

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 = "";
+  });
+}