@remotion/studio: Add composition metadata presets

[JonnyBurger]

Summary

• add dimension presets for HD, Full HD, portrait, landscape, and square compositions
• add presets for seven common frame rates
• apply paired dimension changes through a single codemod with optimistic inspector updates
• make disabled inline actions respect native button semantics

Verification

• bun run build
• bun run stylecheck
• bun test packages/studio/src/test
• verified both preset menus in Remotion Studio

Closes #9611

[vercel]

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

Project	Deployment	Actions	Updated (UTC)
bugs	Ready	Preview, Comment	Jul 24, 2026 6:57pm
remotion	Ready	Preview, Comment	Jul 24, 2026 6:57pm

[pullfrog]

✅ No new issues found.

Reviewed changes — adds dimension and frame rate preset dropdowns to the composition metadata inspector, refactors the per-field codemod logic to support multi-field updates from a single codemod, and fixes disabled button semantics on InlineAction.

• Add PresetDropdown with 5 dimension presets and 7 frame rate presets — dimension presets cover HD landscape (1280×720), Full HD landscape (1920×1080), HD portrait (720×1280), Full HD portrait (1080×1920), and Square (1080×1080). Frame rate presets cover 23.976, 24, 25, 29.97, 30, 50, and 60 fps.
• Refactor CompositionMetadataValue to a single onSave callback — removes the three separate onPending* callbacks and the compositionId/resolvedConfig/symbolicatedStack props, delegating codemod application to the parent via the consolidated saveMetadata function.
• Move multi-field codemod logic into saveMetadata — constructs a single RecastCodemod with all changed fields, applies it optimistically, and handles success/failure for each changed field independently.
• Change InspectorDetailRow.label from string to React.ReactNode — backward-compatible; all existing callers pass strings.
• Add unhoveredColor prop to InlineDropdown and force WHITE when the dropdown is open so the active state is visually distinct.
• Add native disabled attribute to InlineAction.Button so disabled inline actions respect proper button semantics in addition to CSS-level disabling.

  ^{｜ View workflow run ｜ Using DeepSeek Pro (free via Pullfrog for OSS) (Claude Opus not used — the program covers this model; add its provider key to run your pick) ｜ 𝕏}

[pullfrog]

✅ No new issues found in the incremental commit.

Reviewed changes — cosmetic refinement to dimension preset labels and ordering in e6a63a6. Switched from descriptive labels to resolution-first format (1280x720 (HD)), reordered presets (Full HD first), and added visual dividers between preset groups using flatMap.

  ^{｜ View workflow run ｜ Using DeepSeek Pro (free via Pullfrog for OSS) (Claude Opus not used — the program covers this model; add its provider key to run your pick) ｜ 𝕏}

[pullfrog]

✅ No new issues found in the incremental commit.

Reviewed changes — a6ac4e4 adds hover-based visibility for the preset dropdown arrows. The InspectorDetailRow component now tracks hover state and supports a function form for its label prop ((hovered: boolean) => React.ReactNode), which CompositionMetadata uses to show the preset dropdown only when the row is hovered. Uses visibility (not display) so there is no layout shift. All existing string-label callers remain compatible.

  ^{｜ View workflow run ｜ Using DeepSeek Pro (free via Pullfrog for OSS) (Claude Opus not used — the program covers this model; add its provider key to run your pick) ｜ 𝕏}