Fix Studio timeline render crash from circular import

[JonnyBurger]

Summary

• Moves TIMELINE_INDENT into a dedicated timeline-indent.ts module.

• Updates Padder and TimelineExpandedRow to import from that module instead of TimelineListItem.

• Breaks a circular import (Padder ↔ TimelineListItem) that could leave Padder as undefined at runtime, causing React to throw:

  Element type is invalid … Check the render method of TimelineListItem.

This is independent of the Studio /events SSE consolidation work in #7432.

Test plan

• Open Remotion Studio with a composition that has timeline tracks
• Confirm the timeline renders without a React crash
• Expand/collapse timeline rows and verify indentation still looks correct

Made with Cursor

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
bugs	Ready	Preview, Comment	May 19, 2026 9:45am
remotion	Ready	Preview, Comment	May 19, 2026 9:45am

[pullfrog]

Note

Minimal, targeted fix. The cycle TimelineListItem → Padder → TimelineListItem is real, and because both Padder and INDENT are export const (non-hoisted), an import path that lands in Padder.tsx first yields a Padder binding of undefined in TimelineListItem.tsx — matching the reported React error. Extracting TIMELINE_INDENT to a leaf module is the right break, and all callers are updated (no dangling INDENT references remain in packages/studio/src).

TL;DR — Breaks the Padder ↔ TimelineListItem import cycle by moving the indent constant into its own leaf module, eliminating the undefined Padder runtime error in Studio's timeline.

Key changes

• Extract TIMELINE_INDENT to timeline-indent.ts — New leaf module holds the constant previously exported as INDENT from TimelineListItem.tsx.
• Repoint Padder and TimelineExpandedRow — Both now import from ./timeline-indent instead of ./TimelineListItem, severing the cycle that ran through Padder.

_{Summary ｜ 4 files ｜ 2 commits ｜ base: main ← fix/timeline-padder-circular-import}

Why the cycle crashed the timeline

Before: TimelineListItem imported Padder, and Padder imported INDENT from TimelineListItem — when module evaluation entered through Padder.tsx first, the Padder binding observed by TimelineListItem.tsx was undefined, producing Element type is invalid ….
After: Both consumers depend on a leaf module that imports nothing, so evaluation order no longer determines whether Padder is defined when TimelineListItem reads it.

The fix follows the kebab-case convention already used for non-component modules in this folder (save-sequence-prop.ts, timeline-field-utils.ts, imperative-state.ts).

Padder.tsx · TimelineExpandedRow.tsx · TimelineListItem.tsx · timeline-indent.ts

  ^{｜ View workflow run ｜ Using Claude Opus ｜ 𝕏}