@remotion/studio 4.0.500 → 4.0.502

package/dist/components/Modals.js

@@ -36,6 +36,6 @@ const Modals = ({ readOnlyStudio }) => {
         'connected';
     return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [modalContextType && modalContextType.type === 'new-comp' && (jsx_runtime_1.jsx(NewComposition_1.NewComposition, { folderName: modalContextType.folderName, parentName: modalContextType.parentName, stack: modalContextType.stack })), modalContextType && modalContextType.type === 'new-folder' && (jsx_runtime_1.jsx(NewFolder_1.NewFolder, { parentName: modalContextType.parentName, stack: modalContextType.stack })), modalContextType && modalContextType.type === 'duplicate-comp' && (jsx_runtime_1.jsx(DuplicateComposition_1.DuplicateComposition, { compositionType: modalContextType.compositionType, compositionId: modalContextType.compositionId })), modalContextType && modalContextType.type === 'delete-comp' && (jsx_runtime_1.jsx(DeleteComposition_1.DeleteComposition, { compositionId: modalContextType.compositionId })), modalContextType && modalContextType.type === 'rename-comp' && (jsx_runtime_1.jsx(RenameComposition_1.RenameComposition, { compositionId: modalContextType.compositionId })), modalContextType && modalContextType.type === 'delete-folder' && (jsx_runtime_1.jsx(DeleteFolder_1.DeleteFolder, { folderName: modalContextType.folderName, parentName: modalContextType.parentName, stack: modalContextType.stack })), modalContextType && modalContextType.type === 'rename-folder' && (jsx_runtime_1.jsx(RenameFolder_1.RenameFolder, { folderName: modalContextType.folderName, parentName: modalContextType.parentName, stack: modalContextType.stack })), modalContextType && modalContextType.type === 'rename-static-file' && (jsx_runtime_1.jsx(RenameStaticFile_1.RenameStaticFileModal, { relativePath: modalContextType.relativePath })), modalContextType && modalContextType.type === 'input-props-override' && (jsx_runtime_1.jsx(OverrideInputProps_1.OverrideInputPropsModal, {})), modalContextType && modalContextType.type === 'configure-license' && (jsx_runtime_1.jsx(ConfigureLicenseModal_1.ConfigureLicenseModal, { initialPublicLicenseKey: modalContextType.initialPublicLicenseKey })), modalContextType && modalContextType.type === 'web-render' && (jsx_runtime_1.jsx(WebRenderModal_1.WebRenderModalWithLoader, { ...modalContextType })), modalContextType &&
                 modalContextType.type === 'server-render' &&
-                (canRender || modalContextType.readOnlyStudio) ? (jsx_runtime_1.jsx(ServerRenderModal_1.RenderModalWithLoader, { readOnlyStudio: (_a = modalContextType.readOnlyStudio) !== null && _a !== void 0 ? _a : false, initialFrame: modalContextType.initialFrame, initialDarkMode: modalContextType.initialDarkMode, compositionId: modalContextType.compositionId, initialVideoImageFormat: modalContextType.initialVideoImageFormat, initialJpegQuality: modalContextType.initialJpegQuality, initialScale: modalContextType.initialScale, initialLogLevel: modalContextType.initialLogLevel, initialOffthreadVideoCacheSizeInBytes: modalContextType.initialOffthreadVideoCacheSizeInBytes, initialOffthreadVideoThreads: modalContextType.initialOffthreadVideoThreads, initialMediaCacheSizeInBytes: modalContextType.initialMediaCacheSizeInBytes, initialConcurrency: modalContextType.initialConcurrency, maxConcurrency: modalContextType.maxConcurrency, minConcurrency: modalContextType.minConcurrency, initialStillImageFormat: modalContextType.initialStillImageFormat, initialMuted: modalContextType.initialMuted, initialEnforceAudioTrack: modalContextType.initialEnforceAudioTrack, initialProResProfile: modalContextType.initialProResProfile, initialx264Preset: modalContextType.initialx264Preset, initialGopSize: modalContextType.initialGopSize, initialPixelFormat: modalContextType.initialPixelFormat, initialAudioBitrate: modalContextType.initialAudioBitrate, initialVideoBitrate: modalContextType.initialVideoBitrate, initialEveryNthFrame: modalContextType.initialEveryNthFrame, initialNumberOfGifLoops: modalContextType.initialNumberOfGifLoops, initialDelayRenderTimeout: modalContextType.initialDelayRenderTimeout, initialEnvVariables: modalContextType.initialEnvVariables, initialDisableWebSecurity: modalContextType.initialDisableWebSecurity, initialGl: modalContextType.initialOpenGlRenderer, initialHeadless: modalContextType.initialHeadless, initialIgnoreCertificateErrors: modalContextType.initialIgnoreCertificateErrors, initialEncodingBufferSize: modalContextType.initialEncodingBufferSize, initialEncodingMaxRate: modalContextType.initialEncodingMaxRate, initialUserAgent: modalContextType.initialUserAgent, initialColorSpace: modalContextType.initialColorSpace, initialMultiProcessOnLinux: modalContextType.initialMultiProcessOnLinux, initialRepro: modalContextType.initialRepro, initialBeep: modalContextType.initialBeep, initialForSeamlessAacConcatenation: modalContextType.initialForSeamlessAacConcatenation, defaultProps: modalContextType.defaultProps, inFrameMark: modalContextType.inFrameMark, outFrameMark: modalContextType.outFrameMark, defaultConfigurationAudioCodec: modalContextType.defaultConfigurationAudioCodec, defaultConfigurationVideoCodec: modalContextType.defaultConfigurationVideoCodec, renderTypeOfLastRender: modalContextType.renderTypeOfLastRender, defaultMetadata: modalContextType.defaulMetadata, initialHardwareAcceleration: modalContextType.initialHardwareAcceleration, initialSampleRate: modalContextType.initialSampleRate, initialChromeMode: modalContextType.initialChromeMode, renderDefaults: modalContextType.renderDefaults })) : null, modalContextType && modalContextType.type === 'render-progress' && (jsx_runtime_1.jsx(RenderStatusModal_1.RenderStatusModal, { jobId: modalContextType.jobId })), modalContextType && modalContextType.type === 'update' && (jsx_runtime_1.jsx(UpdateModal_1.UpdateModal, { info: modalContextType.info, knownBugs: modalContextType.knownBugs })), modalContextType && modalContextType.type === 'install-packages' && (jsx_runtime_1.jsx(InstallPackage_1.InstallPackageModal, { packageManager: modalContextType.packageManager })), modalContextType && modalContextType.type === 'quick-switcher' && (jsx_runtime_1.jsx(QuickSwitcher_1.default, { readOnlyStudio: readOnlyStudio, invocationTimestamp: modalContextType.invocationTimestamp, initialMode: modalContextType.mode, assetSelection: modalContextType.assetSelection })), modalContextType && modalContextType.type === 'add-effect' && (jsx_runtime_1.jsx(EffectPickerModal_1.EffectPickerModal, { state: modalContextType })), modalContextType && modalContextType.type === 'confirmation-dialog' && (jsx_runtime_1.jsx(ConfirmationDialog_1.ConfirmationDialog, { state: modalContextType })), modalContextType && modalContextType.type === 'svg-import-dialog' && (jsx_runtime_1.jsx(SvgImportDialog_1.SvgImportDialog, { state: modalContextType })), (0, studio_runtime_config_1.getStudioAskAIEnabled)() && jsx_runtime_1.jsx(AskAiModal_1.AskAiModal, {})] }));
+                (canRender || modalContextType.readOnlyStudio) ? (jsx_runtime_1.jsx(ServerRenderModal_1.RenderModalWithLoader, { readOnlyStudio: (_a = modalContextType.readOnlyStudio) !== null && _a !== void 0 ? _a : false, initialFrame: modalContextType.initialFrame, initialDarkMode: modalContextType.initialDarkMode, compositionId: modalContextType.compositionId, initialVideoImageFormat: modalContextType.initialVideoImageFormat, initialJpegQuality: modalContextType.initialJpegQuality, initialScale: modalContextType.initialScale, initialLogLevel: modalContextType.initialLogLevel, initialOffthreadVideoCacheSizeInBytes: modalContextType.initialOffthreadVideoCacheSizeInBytes, initialOffthreadVideoThreads: modalContextType.initialOffthreadVideoThreads, initialMediaCacheSizeInBytes: modalContextType.initialMediaCacheSizeInBytes, initialConcurrency: modalContextType.initialConcurrency, maxConcurrency: modalContextType.maxConcurrency, minConcurrency: modalContextType.minConcurrency, initialStillImageFormat: modalContextType.initialStillImageFormat, initialMuted: modalContextType.initialMuted, initialEnforceAudioTrack: modalContextType.initialEnforceAudioTrack, initialProResProfile: modalContextType.initialProResProfile, initialx264Preset: modalContextType.initialx264Preset, initialGopSize: modalContextType.initialGopSize, initialPixelFormat: modalContextType.initialPixelFormat, initialAudioBitrate: modalContextType.initialAudioBitrate, initialVideoBitrate: modalContextType.initialVideoBitrate, initialEveryNthFrame: modalContextType.initialEveryNthFrame, initialNumberOfGifLoops: modalContextType.initialNumberOfGifLoops, initialDelayRenderTimeout: modalContextType.initialDelayRenderTimeout, initialEnvVariables: modalContextType.initialEnvVariables, initialDisableWebSecurity: modalContextType.initialDisableWebSecurity, initialGl: modalContextType.initialOpenGlRenderer, initialHeadless: modalContextType.initialHeadless, initialIgnoreCertificateErrors: modalContextType.initialIgnoreCertificateErrors, initialEncodingBufferSize: modalContextType.initialEncodingBufferSize, initialEncodingMaxRate: modalContextType.initialEncodingMaxRate, initialUserAgent: modalContextType.initialUserAgent, initialColorSpace: modalContextType.initialColorSpace, initialMultiProcessOnLinux: modalContextType.initialMultiProcessOnLinux, initialRepro: modalContextType.initialRepro, initialBeep: modalContextType.initialBeep, initialForSeamlessAacConcatenation: modalContextType.initialForSeamlessAacConcatenation, defaultProps: modalContextType.defaultProps, inFrameMark: modalContextType.inFrameMark, outFrameMark: modalContextType.outFrameMark, defaultConfigurationAudioCodec: modalContextType.defaultConfigurationAudioCodec, defaultConfigurationVideoCodec: modalContextType.defaultConfigurationVideoCodec, renderTypeOfLastRender: modalContextType.renderTypeOfLastRender, defaultMetadata: modalContextType.defaulMetadata, initialHardwareAcceleration: modalContextType.initialHardwareAcceleration, initialSampleRate: modalContextType.initialSampleRate, initialChromeMode: modalContextType.initialChromeMode, renderDefaults: modalContextType.renderDefaults })) : null, modalContextType && modalContextType.type === 'render-progress' && (jsx_runtime_1.jsx(RenderStatusModal_1.RenderStatusModal, { jobId: modalContextType.jobId })), modalContextType && modalContextType.type === 'update' && (jsx_runtime_1.jsx(UpdateModal_1.UpdateModal, { info: modalContextType.info, knownBugs: modalContextType.knownBugs })), modalContextType && modalContextType.type === 'install-packages' && (jsx_runtime_1.jsx(InstallPackage_1.InstallPackageModal, { packageManager: modalContextType.packageManager })), modalContextType && modalContextType.type === 'quick-switcher' && (jsx_runtime_1.jsx(QuickSwitcher_1.default, { readOnlyStudio: readOnlyStudio, invocationTimestamp: modalContextType.invocationTimestamp, initialMode: modalContextType.mode, assetSelection: modalContextType.assetSelection, compositionSelection: modalContextType.compositionSelection })), modalContextType && modalContextType.type === 'add-effect' && (jsx_runtime_1.jsx(EffectPickerModal_1.EffectPickerModal, { state: modalContextType })), modalContextType && modalContextType.type === 'confirmation-dialog' && (jsx_runtime_1.jsx(ConfirmationDialog_1.ConfirmationDialog, { state: modalContextType })), modalContextType && modalContextType.type === 'svg-import-dialog' && (jsx_runtime_1.jsx(SvgImportDialog_1.SvgImportDialog, { state: modalContextType })), (0, studio_runtime_config_1.getStudioAskAIEnabled)() && jsx_runtime_1.jsx(AskAiModal_1.AskAiModal, {})] }));
 };
 exports.Modals = Modals;

package/dist/components/ObserveDefaultPropsContext.js

@@ -38,8 +38,9 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = __importStar(require("react"));
 const remotion_1 = require("remotion");
 const no_react_1 = require("remotion/no-react");
+const browser_studio_operations_1 = require("../helpers/browser-studio-operations");
 const client_id_1 = require("../helpers/client-id");
-const call_api_1 = require("./call-api");
+const default_props_api_1 = require("./default-props-api");
 exports.ObserveDefaultPropsContext = react_1.default.createContext(null);
 const ObserveDefaultProps = ({ compositionId, readOnlyStudio, children }) => {
     const { previewServerState, subscribeToEvent } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
@@ -82,10 +83,12 @@ const ObserveDefaultProps = ({ compositionId, readOnlyStudio, children }) => {
         }
     }, [updateProps]);
     (0, react_1.useEffect)(() => {
-        if (readOnlyStudio || !clientId || compositionId === null) {
+        if ((readOnlyStudio && !(0, browser_studio_operations_1.getBrowserStudioOperations)()) ||
+            !clientId ||
+            compositionId === null) {
             return;
         }
-        (0, call_api_1.callApi)('/api/subscribe-to-default-props', { compositionId, clientId })
+        (0, default_props_api_1.subscribeToDefaultProps)({ compositionId, clientId })
             .then((can) => {
             applyResult(compositionId, can);
         })
@@ -96,7 +99,7 @@ const ObserveDefaultProps = ({ compositionId, readOnlyStudio, children }) => {
             });
         });
         return () => {
-            (0, call_api_1.callApi)('/api/unsubscribe-from-default-props', {
+            (0, default_props_api_1.unsubscribeFromDefaultProps)({
                 compositionId,
                 clientId,
             }).catch(() => {

package/dist/components/PlayPause.d.ts

@@ -4,4 +4,5 @@ export declare const PlayPause: React.FC<{
     readonly loop: boolean;
     readonly bufferStateDelayInMilliseconds: number;
     readonly muted: boolean;
+    readonly hideNavigationControls: boolean;
 }>;

package/dist/components/PlayPause.js

@@ -30,7 +30,7 @@ const iconButton = {
     width: 14,
     color: colors_1.WHITE,
 };
-const PlayPause = ({ playbackRate, loop, bufferStateDelayInMilliseconds, muted }) => {
+const PlayPause = ({ playbackRate, loop, bufferStateDelayInMilliseconds, muted, hideNavigationControls, }) => {
     const { inFrame, outFrame } = (0, in_out_1.useTimelineInOutFramePosition)();
     const videoConfig = remotion_1.Internals.useUnsafeVideoConfig();
     const [showBufferIndicator, setShowBufferState] = (0, react_1.useState)(false);
@@ -198,8 +198,6 @@ const PlayPause = ({ playbackRate, loop, bufferStateDelayInMilliseconds, muted }
             stopped = true;
         };
     }, [bufferStateDelayInMilliseconds, emitter]);
-    return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
-            jsx_runtime_1.jsx(ControlButton_1.ControlButton, { "aria-label": "Jump to beginning", title: "Jump to beginning", disabled: !videoConfig || isFirstFrame, onClick: jumpToStart, children: jsx_runtime_1.jsx(jump_to_start_1.JumpToStart, { style: backStyle }) }), jsx_runtime_1.jsx(ControlButton_1.ControlButton, { "aria-label": "Step back one frame", title: "Step back one frame", disabled: !videoConfig || isFirstFrame, onClick: oneFrameBack, children: jsx_runtime_1.jsx(step_back_1.StepBack, { style: forwardBackStyle }) }), jsx_runtime_1.jsx(ControlButton_1.ControlButton, { "aria-label": playing ? 'Pause' : 'Play', title: playing ? 'Pause' : 'Play', onClick: playing ? pause : play, disabled: !videoConfig, children: playing ? (showBufferIndicator ? (jsx_runtime_1.jsx(player_1.PlayerInternals.BufferingIndicator, { type: "studio" })) : (jsx_runtime_1.jsx(pause_1.Pause, { style: iconButton }))) : (jsx_runtime_1.jsx(play_1.Play, { style: iconButton })) }), jsx_runtime_1.jsx(ControlButton_1.ControlButton, { "aria-label": "Step forward one frame", title: "Step forward one frame", disabled: !videoConfig || isLastFrame, onClick: oneFrameForward, children: jsx_runtime_1.jsx(step_forward_1.StepForward, { style: forwardBackStyle }) })
-        ] }));
+    return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [hideNavigationControls ? null : (jsx_runtime_1.jsx(ControlButton_1.ControlButton, { "aria-label": "Jump to beginning", title: "Jump to beginning", disabled: !videoConfig || isFirstFrame, onClick: jumpToStart, children: jsx_runtime_1.jsx(jump_to_start_1.JumpToStart, { style: backStyle }) })), hideNavigationControls ? null : (jsx_runtime_1.jsx(ControlButton_1.ControlButton, { "aria-label": "Step back one frame", title: "Step back one frame", disabled: !videoConfig || isFirstFrame, onClick: oneFrameBack, children: jsx_runtime_1.jsx(step_back_1.StepBack, { style: forwardBackStyle }) })), jsx_runtime_1.jsx(ControlButton_1.ControlButton, { "aria-label": playing ? 'Pause' : 'Play', title: playing ? 'Pause' : 'Play', onClick: playing ? pause : play, disabled: !videoConfig, children: playing ? (showBufferIndicator ? (jsx_runtime_1.jsx(player_1.PlayerInternals.BufferingIndicator, { type: "studio" })) : (jsx_runtime_1.jsx(pause_1.Pause, { style: iconButton }))) : (jsx_runtime_1.jsx(play_1.Play, { style: iconButton })) }), hideNavigationControls ? null : (jsx_runtime_1.jsx(ControlButton_1.ControlButton, { "aria-label": "Step forward one frame", title: "Step forward one frame", disabled: !videoConfig || isLastFrame, onClick: oneFrameForward, children: jsx_runtime_1.jsx(step_forward_1.StepForward, { style: forwardBackStyle }) }))] }));
 };
 exports.PlayPause = PlayPause;

package/dist/components/PlaybackRateSelector.d.ts

@@ -1,5 +1,12 @@
 import React from 'react';
-export declare const PlaybackRateSelector: React.FC<{
+import type { ComboboxValue } from './NewComposition/ComboBox';
+type PlaybackRateMenuItemsProps = {
     readonly playbackRate: number;
     readonly setPlaybackRate: React.Dispatch<React.SetStateAction<number>>;
-}>;
+};
+export declare const usePlaybackRateMenuItems: ({ playbackRate, setPlaybackRate, }: PlaybackRateMenuItemsProps) => {
+    items: ComboboxValue[];
+    selectedId: string;
+};
+export declare const PlaybackRateSelector: React.FC<PlaybackRateMenuItemsProps>;
+export {};

package/dist/components/PlaybackRateSelector.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.PlaybackRateSelector = void 0;
+exports.PlaybackRateSelector = exports.usePlaybackRateMenuItems = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const remotion_1 = require("remotion");
@@ -17,14 +17,7 @@ const getPlaybackRateLabel = (playbackRate) => {
 };
 const accessibilityLabel = 'Change the playback rate';
 const comboStyle = { width: 64 };
-const PlaybackRateSelector = ({ playbackRate, setPlaybackRate }) => {
-    const { canvasContent } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
-    const isStill = (0, is_current_selected_still_1.useIsStill)();
-    const style = (0, react_1.useMemo)(() => {
-        return {
-            padding: ControlButton_1.CONTROL_BUTTON_PADDING - 2,
-        };
-    }, []);
+const usePlaybackRateMenuItems = ({ playbackRate, setPlaybackRate, }) => {
     const items = (0, react_1.useMemo)(() => {
         const divider = {
             type: 'divider',
@@ -51,9 +44,27 @@ const PlaybackRateSelector = ({ playbackRate, setPlaybackRate }) => {
         const middle = Math.floor(commonPlaybackRates.length / 2);
         return [...values.slice(0, middle), divider, ...values.slice(middle)];
     }, [playbackRate, setPlaybackRate]);
+    return {
+        items,
+        selectedId: String(playbackRate),
+    };
+};
+exports.usePlaybackRateMenuItems = usePlaybackRateMenuItems;
+const PlaybackRateSelector = ({ playbackRate, setPlaybackRate, }) => {
+    const { canvasContent } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
+    const isStill = (0, is_current_selected_still_1.useIsStill)();
+    const { items, selectedId } = (0, exports.usePlaybackRateMenuItems)({
+        playbackRate,
+        setPlaybackRate,
+    });
+    const style = (0, react_1.useMemo)(() => {
+        return {
+            padding: ControlButton_1.CONTROL_BUTTON_PADDING - 2,
+        };
+    }, []);
     if (isStill || canvasContent === null || canvasContent.type === 'asset') {
         return null;
     }
-    return (jsx_runtime_1.jsx("div", { style: style, "aria-label": accessibilityLabel, children: jsx_runtime_1.jsx(ComboBox_1.Combobox, { size: "compact", title: accessibilityLabel, style: comboStyle, selectedId: String(playbackRate), values: items }) }));
+    return (jsx_runtime_1.jsx("div", { style: style, "aria-label": accessibilityLabel, children: jsx_runtime_1.jsx(ComboBox_1.Combobox, { size: "compact", title: accessibilityLabel, style: comboStyle, selectedId: selectedId, values: items }) }));
 };
 exports.PlaybackRateSelector = PlaybackRateSelector;

package/dist/components/PreviewToolbar.js

@@ -21,6 +21,7 @@ const PlaybackKeyboardShortcutsManager_1 = require("./PlaybackKeyboardShortcutsM
 const PlaybackRatePersistor_1 = require("./PlaybackRatePersistor");
 const PlaybackRateSelector_1 = require("./PlaybackRateSelector");
 const PlayPause_1 = require("./PlayPause");
+const PreviewToolbarOverflowButton_1 = require("./PreviewToolbarOverflowButton");
 const RenderButton_1 = require("./RenderButton");
 const SizeSelector_1 = require("./SizeSelector");
 const SnappingToggle_1 = require("./SnappingToggle");
@@ -29,6 +30,7 @@ const TimelineInOutToggle_1 = require("./TimelineInOutToggle");
 const TOOLBAR_HEIGHT = 40;
 const container = {
     display: 'flex',
+    position: 'relative',
     justifyContent: 'center',
     borderTop: colors_1.BORDER_BLACK_ALPHA_50,
     alignItems: 'center',
@@ -36,45 +38,21 @@ const container = {
     background: colors_1.BACKGROUND,
     height: TOOLBAR_HEIGHT,
 };
-const mobileContainer = {
-    ...container,
-    position: 'relative',
-    overflowX: 'auto',
-    justifyContent: 'flex-start',
-};
-const scrollIndicatorLeft = {
-    position: 'fixed',
-    display: 'none',
+const centeredPlayButton = {
+    position: 'absolute',
+    left: '50%',
     top: 0,
-    left: 0,
-    width: 40,
-    height: '100%',
-    pointerEvents: 'none',
-    background: `linear-gradient(to right, ${colors_1.BACKGROUND}, ${colors_1.BACKGROUND__TRANSPARENT})`,
-};
-const scrollIndicatorRight = {
-    position: 'fixed',
-    display: 'none',
-    top: 0,
-    right: 0,
-    width: 40,
-    height: '100%',
-    pointerEvents: 'none',
-    background: `linear-gradient(to left, ${colors_1.BACKGROUND}, ${colors_1.BACKGROUND__TRANSPARENT})`,
-};
-const sideContainer = {
-    width: 300,
-    height: 30,
+    height: TOOLBAR_HEIGHT,
     display: 'flex',
-    flexDirection: 'row',
     alignItems: 'center',
+    transform: 'translateX(-50%)',
 };
-const mobileSideContainer = {
+const sideContainer = {
+    width: 300,
     height: 30,
     display: 'flex',
     flexDirection: 'row',
     alignItems: 'center',
-    flexShrink: 0,
 };
 const padding = {
     width: timeline_layout_1.TIMELINE_PADDING,
@@ -95,88 +73,20 @@ const PreviewToolbar = ({ readOnlyStudio, bufferStateDelayInMilliseconds }) => {
     const { setPlayerMuted } = (0, react_1.useContext)(remotion_1.Internals.SetMediaVolumeContext);
     const { canvasContent } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
     const isVideoComposition = (0, is_current_selected_still_1.useIsVideoComposition)();
-    const previewToolbarRef = (0, react_1.useRef)(null);
-    const leftScrollIndicatorRef = (0, react_1.useRef)(null);
-    const rightScrollIndicatorRef = (0, react_1.useRef)(null);
     const isStill = (0, is_current_selected_still_1.useIsStill)();
     const [loop, setLoop] = (0, react_1.useState)((0, loop_1.loadLoopOption)());
     const isFullscreenSupported = (0, check_fullscreen_support_1.checkFullscreenSupport)();
     const isMobileLayout = (0, mobile_layout_1.useMobileLayout)();
-    (0, react_1.useEffect)(() => {
-        if (!isMobileLayout) {
-            // The indicators are `position: fixed` and are shown/placed
-            // imperatively by the scroll handler below. Without this reset,
-            // leaving the mobile layout (window resized past the breakpoint)
-            // leaves them visible at stale viewport coordinates — an orphaned
-            // grey gradient rectangle floating over the canvas.
-            if (leftScrollIndicatorRef.current) {
-                leftScrollIndicatorRef.current.style.display = 'none';
-            }
-            if (rightScrollIndicatorRef.current) {
-                rightScrollIndicatorRef.current.style.display = 'none';
-            }
-            return;
-        }
-        if (previewToolbarRef.current) {
-            const updateScrollableIndicatorProps = (target) => {
-                var _a;
-                const boundingBox = target.getBoundingClientRect();
-                const { scrollLeft, scrollWidth, clientWidth } = target;
-                const scrollRight = scrollWidth - clientWidth - scrollLeft;
-                if (!leftScrollIndicatorRef.current ||
-                    !rightScrollIndicatorRef.current) {
-                    return;
-                }
-                if (scrollLeft !== 0) {
-                    Object.assign(leftScrollIndicatorRef.current.style, {
-                        display: 'block',
-                        height: `${boundingBox.height}px`,
-                        top: `${boundingBox.top}px`,
-                        left: `${boundingBox.left}px`,
-                    });
-                }
-                else {
-                    Object.assign(leftScrollIndicatorRef.current.style, {
-                        display: 'none',
-                    });
-                }
-                if (scrollRight !== 0) {
-                    const itemWidth = ((_a = rightScrollIndicatorRef.current) === null || _a === void 0 ? void 0 : _a.clientWidth) || 0;
-                    Object.assign(rightScrollIndicatorRef.current.style, {
-                        display: 'block',
-                        height: `${boundingBox.height}px`,
-                        top: `${boundingBox.top}px`,
-                        left: `${boundingBox.left + boundingBox.width - itemWidth}px`,
-                    });
-                }
-                else {
-                    Object.assign(rightScrollIndicatorRef.current.style, {
-                        display: 'none',
-                    });
-                }
-            };
-            const previewToolbar = previewToolbarRef.current;
-            const scrollHandler = () => {
-                updateScrollableIndicatorProps(previewToolbar);
-            };
-            previewToolbar.addEventListener('scroll', scrollHandler);
-            scrollHandler();
-            return () => {
-                previewToolbar.removeEventListener('scroll', scrollHandler);
-            };
-        }
-    });
-    return (jsx_runtime_1.jsxs("div", { ref: previewToolbarRef, style: isMobileLayout ? mobileContainer : container, className: "css-reset", children: [
-            jsx_runtime_1.jsx("div", { ref: leftScrollIndicatorRef, style: scrollIndicatorLeft }), isMobileLayout ? null : (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
-                    jsx_runtime_1.jsxs("div", { style: sideContainer, children: [
-                            jsx_runtime_1.jsx("div", { style: padding }), jsx_runtime_1.jsx(PreviewToolbarControl, { children: jsx_runtime_1.jsx(TimelineZoomControls_1.TimelineZoomControls, {}) })
-                        ] }), jsx_runtime_1.jsx(layout_1.Flex, {}), jsx_runtime_1.jsx(PreviewToolbarControl, { children: jsx_runtime_1.jsx(SizeSelector_1.SizeSelector, {}) }), isStill || isVideoComposition ? (jsx_runtime_1.jsx(PreviewToolbarControl, { children: jsx_runtime_1.jsx(PlaybackRateSelector_1.PlaybackRateSelector, { setPlaybackRate: setPlaybackRate, playbackRate: playbackRate }) })) : null] })), isVideoComposition ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
-                    jsx_runtime_1.jsx(layout_1.Spacing, { x: 2 }), jsx_runtime_1.jsx(PreviewToolbarControl, { children: jsx_runtime_1.jsx(PlayPause_1.PlayPause, { bufferStateDelayInMilliseconds: bufferStateDelayInMilliseconds, loop: loop, playbackRate: playbackRate, muted: playerMuted }) }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 2 }), jsx_runtime_1.jsx(PreviewToolbarControl, { children: jsx_runtime_1.jsx(LoopToggle_1.LoopToggle, { loop: loop, setLoop: setLoop }) }), jsx_runtime_1.jsx(PreviewToolbarControl, { children: jsx_runtime_1.jsx(MuteToggle_1.MuteToggle, { muted: playerMuted, setMuted: setPlayerMuted }) }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 2 }), jsx_runtime_1.jsx(PreviewToolbarControl, { children: jsx_runtime_1.jsx(TimelineInOutToggle_1.TimelineInOutPointToggle, {}) }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 2 })
-                ] })) : null, (canvasContent === null || canvasContent === void 0 ? void 0 : canvasContent.type) === 'composition' ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
-                    jsx_runtime_1.jsx(PreviewToolbarControl, { children: jsx_runtime_1.jsx(CheckboardToggle_1.CheckboardToggle, {}) }), jsx_runtime_1.jsx(PreviewToolbarControl, { children: jsx_runtime_1.jsx(OutlineToggle_1.OutlineToggle, {}) }), readOnlyStudio ? null : (jsx_runtime_1.jsx(PreviewToolbarControl, { children: jsx_runtime_1.jsx(SnappingToggle_1.SnappingToggle, {}) }))] })) : null, jsx_runtime_1.jsx(layout_1.Spacing, { x: 1 }), canvasContent && isFullscreenSupported ? (jsx_runtime_1.jsx(PreviewToolbarControl, { children: jsx_runtime_1.jsx(FullscreenToggle_1.FullScreenToggle, {}) })) : null, jsx_runtime_1.jsx(layout_1.Flex, {}), isMobileLayout && (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
-                    jsx_runtime_1.jsx(PreviewToolbarControl, { children: jsx_runtime_1.jsx(SizeSelector_1.SizeSelector, {}) }), isStill || isVideoComposition ? (jsx_runtime_1.jsx(PreviewToolbarControl, { children: jsx_runtime_1.jsx(PlaybackRateSelector_1.PlaybackRateSelector, { setPlaybackRate: setPlaybackRate, playbackRate: playbackRate }) })) : null] })), jsx_runtime_1.jsxs("div", { style: isMobileLayout ? mobileSideContainer : sideContainer, children: [
-                    jsx_runtime_1.jsx(layout_1.Flex, {}), !isMobileLayout && jsx_runtime_1.jsx(FpsCounter_1.FpsCounter, { playbackSpeed: playbackRate }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 2 }), jsx_runtime_1.jsx(PreviewToolbarControl, { children: jsx_runtime_1.jsx(RenderButton_1.RenderButton, { readOnlyStudio: readOnlyStudio, size: "compact" }) }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 1.5 })
-                ] }), jsx_runtime_1.jsx(PlaybackKeyboardShortcutsManager_1.PlaybackKeyboardShortcutsManager, { setPlaybackRate: setPlaybackRate }), jsx_runtime_1.jsx(PlaybackRatePersistor_1.PlaybackRatePersistor, {}), jsx_runtime_1.jsx("div", { ref: rightScrollIndicatorRef, style: scrollIndicatorRight })
+    const playPause = (jsx_runtime_1.jsx(PreviewToolbarControl, { children: jsx_runtime_1.jsx(PlayPause_1.PlayPause, { bufferStateDelayInMilliseconds: bufferStateDelayInMilliseconds, loop: loop, playbackRate: playbackRate, muted: playerMuted, hideNavigationControls: isMobileLayout }) }));
+    return (jsx_runtime_1.jsxs("div", { style: container, className: "css-reset", children: [
+            jsx_runtime_1.jsxs("div", { style: sideContainer, children: [
+                    jsx_runtime_1.jsx("div", { style: padding }), jsx_runtime_1.jsx(PreviewToolbarControl, { children: jsx_runtime_1.jsx(TimelineZoomControls_1.TimelineZoomControls, {}) })
+                ] }), jsx_runtime_1.jsx(layout_1.Flex, {}), isMobileLayout ? null : (jsx_runtime_1.jsx(PreviewToolbarControl, { children: jsx_runtime_1.jsx(SizeSelector_1.SizeSelector, {}) })), !isMobileLayout && (isStill || isVideoComposition) ? (jsx_runtime_1.jsx(PreviewToolbarControl, { children: jsx_runtime_1.jsx(PlaybackRateSelector_1.PlaybackRateSelector, { setPlaybackRate: setPlaybackRate, playbackRate: playbackRate }) })) : null, isVideoComposition && isMobileLayout ? (jsx_runtime_1.jsx("div", { style: centeredPlayButton, children: playPause })) : null, isVideoComposition && !isMobileLayout ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
+                    jsx_runtime_1.jsx(layout_1.Spacing, { x: 2 }), playPause, jsx_runtime_1.jsx(layout_1.Spacing, { x: 2 }), jsx_runtime_1.jsx(PreviewToolbarControl, { children: jsx_runtime_1.jsx(LoopToggle_1.LoopToggle, { loop: loop, setLoop: setLoop }) }), jsx_runtime_1.jsx(PreviewToolbarControl, { children: jsx_runtime_1.jsx(MuteToggle_1.MuteToggle, { muted: playerMuted, setMuted: setPlayerMuted }) }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 2 }), jsx_runtime_1.jsx(PreviewToolbarControl, { children: jsx_runtime_1.jsx(TimelineInOutToggle_1.TimelineInOutPointToggle, {}) }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 2 })
+                ] })) : null, (canvasContent === null || canvasContent === void 0 ? void 0 : canvasContent.type) === 'composition' ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [isMobileLayout ? null : (jsx_runtime_1.jsx(PreviewToolbarControl, { children: jsx_runtime_1.jsx(CheckboardToggle_1.CheckboardToggle, {}) })), isMobileLayout ? null : (jsx_runtime_1.jsx(PreviewToolbarControl, { children: jsx_runtime_1.jsx(OutlineToggle_1.OutlineToggle, {}) })), readOnlyStudio || isMobileLayout ? null : (jsx_runtime_1.jsx(PreviewToolbarControl, { children: jsx_runtime_1.jsx(SnappingToggle_1.SnappingToggle, {}) }))] })) : null, jsx_runtime_1.jsx(layout_1.Spacing, { x: 1 }), canvasContent && isFullscreenSupported ? (jsx_runtime_1.jsx(PreviewToolbarControl, { children: jsx_runtime_1.jsx(FullscreenToggle_1.FullScreenToggle, { hidden: isMobileLayout }) })) : null, jsx_runtime_1.jsx(layout_1.Flex, {}), jsx_runtime_1.jsxs("div", { style: sideContainer, children: [
+                    jsx_runtime_1.jsx(layout_1.Flex, {}), jsx_runtime_1.jsx(FpsCounter_1.FpsCounter, { playbackSpeed: playbackRate }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 2 }), jsx_runtime_1.jsx(PreviewToolbarControl, { children: jsx_runtime_1.jsx(RenderButton_1.RenderButton, { readOnlyStudio: readOnlyStudio, size: "compact", hidden: isMobileLayout }) }), isMobileLayout ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [isVideoComposition ? (jsx_runtime_1.jsx(PreviewToolbarControl, { children: jsx_runtime_1.jsx(MuteToggle_1.MuteToggle, { muted: playerMuted, setMuted: setPlayerMuted }) })) : null, jsx_runtime_1.jsx(PreviewToolbarControl, { children: jsx_runtime_1.jsx(PreviewToolbarOverflowButton_1.PreviewToolbarOverflowButton, { readOnlyStudio: readOnlyStudio, showFullscreen: Boolean(canvasContent && isFullscreenSupported), showPlaybackRate: isVideoComposition, showLoop: isVideoComposition, showCompositionControls: (canvasContent === null || canvasContent === void 0 ? void 0 : canvasContent.type) === 'composition', playbackRate: playbackRate, setPlaybackRate: setPlaybackRate, loop: loop, setLoop: setLoop }) })
+                        ] })) : null, jsx_runtime_1.jsx(layout_1.Spacing, { x: 1.5 })
+                ] }), jsx_runtime_1.jsx(PlaybackKeyboardShortcutsManager_1.PlaybackKeyboardShortcutsManager, { setPlaybackRate: setPlaybackRate }), jsx_runtime_1.jsx(PlaybackRatePersistor_1.PlaybackRatePersistor, {})
         ] }));
 };
 exports.PreviewToolbar = PreviewToolbar;

package/dist/components/PreviewToolbarOverflowButton.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+export declare const PreviewToolbarOverflowButton: React.FC<{
+    readonly readOnlyStudio: boolean;
+    readonly showFullscreen: boolean;
+    readonly showPlaybackRate: boolean;
+    readonly showLoop: boolean;
+    readonly showCompositionControls: boolean;
+    readonly playbackRate: number;
+    readonly setPlaybackRate: React.Dispatch<React.SetStateAction<number>>;
+    readonly loop: boolean;
+    readonly setLoop: React.Dispatch<React.SetStateAction<boolean>>;
+}>;

package/dist/components/PreviewToolbarOverflowButton.js

@@ -0,0 +1,217 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PreviewToolbarOverflowButton = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const remotion_1 = require("remotion");
+const colors_1 = require("../helpers/colors");
+const use_keybinding_1 = require("../helpers/use-keybinding");
+const Checkmark_1 = require("../icons/Checkmark");
+const ellipsis_1 = require("../icons/ellipsis");
+const checkerboard_1 = require("../state/checkerboard");
+const editor_outlines_1 = require("../state/editor-outlines");
+const InlineDropdown_1 = require("./InlineDropdown");
+const LoopToggle_1 = require("./LoopToggle");
+const PlaybackRateSelector_1 = require("./PlaybackRateSelector");
+const SizeSelector_1 = require("./SizeSelector");
+const clickButton = (id) => {
+    var _a;
+    (_a = document.getElementById(id)) === null || _a === void 0 ? void 0 : _a.click();
+};
+const PreviewToolbarOverflowButton = ({ readOnlyStudio, showFullscreen, showPlaybackRate, showLoop, showCompositionControls, playbackRate, setPlaybackRate, loop, setLoop, }) => {
+    const video = remotion_1.Internals.useVideo();
+    const { checkerboard, setCheckerboard } = (0, react_1.useContext)(checkerboard_1.CheckerboardContext);
+    const { editorShowOutlines, setEditorShowOutlines } = (0, react_1.useContext)(editor_outlines_1.EditorShowOutlinesContext);
+    const { items: previewSizeItems, selectedId: selectedPreviewSize, zoomable, } = (0, SizeSelector_1.usePreviewSizeMenuItems)();
+    const { items: playbackRateItems, selectedId: selectedPlaybackRate } = (0, PlaybackRateSelector_1.usePlaybackRateMenuItems)({ playbackRate, setPlaybackRate });
+    const iconStyle = (0, react_1.useMemo)(() => {
+        return {
+            style: {
+                width: 14,
+                height: 14,
+                flexShrink: 0,
+            },
+        };
+    }, []);
+    const renderAction = (0, react_1.useCallback)((color) => jsx_runtime_1.jsx(ellipsis_1.EllipsisIcon, { fill: color, svgProps: iconStyle }), [iconStyle]);
+    const renderItems = (0, react_1.useMemo)(() => {
+        if (readOnlyStudio) {
+            return [
+                {
+                    type: 'item',
+                    id: 'client-render',
+                    label: 'Render on web',
+                    value: 'client-render',
+                    onClick: () => clickButton('render-modal-button-client'),
+                    keyHint: null,
+                    leftItem: null,
+                    subMenu: null,
+                    quickSwitcherLabel: null,
+                },
+                {
+                    type: 'item',
+                    id: 'render-command',
+                    label: 'Render via CLI',
+                    value: 'render-command',
+                    onClick: () => clickButton('render-modal-button-command'),
+                    keyHint: null,
+                    leftItem: null,
+                    subMenu: null,
+                    quickSwitcherLabel: null,
+                },
+            ];
+        }
+        return [
+            {
+                type: 'item',
+                id: 'server-render',
+                label: 'Server-side render',
+                value: 'server-render',
+                onClick: () => clickButton('render-modal-button-server'),
+                keyHint: null,
+                leftItem: null,
+                subMenu: null,
+                quickSwitcherLabel: null,
+            },
+            {
+                type: 'item',
+                id: 'client-render',
+                label: 'Client-side render',
+                value: 'client-render',
+                onClick: () => clickButton('render-modal-button-client'),
+                keyHint: null,
+                leftItem: null,
+                subMenu: null,
+                quickSwitcherLabel: null,
+            },
+        ];
+    }, [readOnlyStudio]);
+    const values = (0, react_1.useMemo)(() => {
+        const items = [];
+        if (zoomable) {
+            items.push({
+                type: 'item',
+                id: 'preview-size',
+                label: 'Preview Size',
+                value: 'preview-size',
+                onClick: () => undefined,
+                keyHint: null,
+                leftItem: null,
+                subMenu: {
+                    items: previewSizeItems,
+                    leaveLeftSpace: true,
+                    preselectIndex: previewSizeItems.findIndex((item) => item.id === selectedPreviewSize),
+                },
+                quickSwitcherLabel: null,
+            });
+        }
+        if (showPlaybackRate) {
+            items.push({
+                type: 'item',
+                id: 'playback-rate',
+                label: 'Playback Rate',
+                value: 'playback-rate',
+                onClick: () => undefined,
+                keyHint: null,
+                leftItem: null,
+                subMenu: {
+                    items: playbackRateItems,
+                    leaveLeftSpace: true,
+                    preselectIndex: playbackRateItems.findIndex((item) => item.id === selectedPlaybackRate),
+                },
+                quickSwitcherLabel: null,
+            });
+        }
+        if (showLoop) {
+            items.push({
+                type: 'item',
+                id: 'loop',
+                label: 'Loop',
+                value: 'loop',
+                onClick: () => (0, LoopToggle_1.toggleLoop)(setLoop),
+                keyHint: null,
+                leftItem: loop ? jsx_runtime_1.jsx(Checkmark_1.Checkmark, {}) : null,
+                subMenu: null,
+                quickSwitcherLabel: null,
+            });
+        }
+        if (showCompositionControls) {
+            items.push({
+                type: 'item',
+                id: 'checkerboard',
+                label: 'Transparency as checkerboard',
+                value: 'checkerboard',
+                onClick: () => setCheckerboard((current) => !current),
+                keyHint: (0, use_keybinding_1.areKeyboardShortcutsDisabled)() ? null : 'T',
+                leftItem: checkerboard ? jsx_runtime_1.jsx(Checkmark_1.Checkmark, {}) : null,
+                subMenu: null,
+                quickSwitcherLabel: null,
+            });
+            items.push({
+                type: 'item',
+                id: 'outlines',
+                label: 'Outlines',
+                value: 'outlines',
+                onClick: () => setEditorShowOutlines((current) => !current),
+                keyHint: null,
+                leftItem: editorShowOutlines ? jsx_runtime_1.jsx(Checkmark_1.Checkmark, {}) : null,
+                subMenu: null,
+                quickSwitcherLabel: null,
+            });
+        }
+        if (showFullscreen) {
+            items.push({
+                type: 'item',
+                id: 'fullscreen',
+                label: 'Fullscreen',
+                value: 'fullscreen',
+                onClick: () => clickButton('fullscreen-toggle'),
+                keyHint: (0, use_keybinding_1.areKeyboardShortcutsDisabled)() ? null : 'F',
+                leftItem: null,
+                subMenu: null,
+                quickSwitcherLabel: null,
+            });
+        }
+        if (video) {
+            items.push({
+                type: 'item',
+                id: 'render',
+                label: 'Render',
+                value: 'render',
+                onClick: () => undefined,
+                keyHint: null,
+                leftItem: null,
+                subMenu: {
+                    items: renderItems,
+                    leaveLeftSpace: false,
+                    preselectIndex: 0,
+                },
+                quickSwitcherLabel: null,
+            });
+        }
+        return items;
+    }, [
+        previewSizeItems,
+        playbackRateItems,
+        renderItems,
+        selectedPlaybackRate,
+        selectedPreviewSize,
+        showFullscreen,
+        showLoop,
+        showPlaybackRate,
+        showCompositionControls,
+        loop,
+        checkerboard,
+        editorShowOutlines,
+        setCheckerboard,
+        setEditorShowOutlines,
+        setLoop,
+        video,
+        zoomable,
+    ]);
+    if (values.length === 0) {
+        return null;
+    }
+    return (jsx_runtime_1.jsx(InlineDropdown_1.InlineDropdown, { renderAction: renderAction, values: values, title: "More actions", unhoveredColor: colors_1.WHITE }));
+};
+exports.PreviewToolbarOverflowButton = PreviewToolbarOverflowButton;

package/dist/components/QuickSwitcher/ExplorerQuickSwitcherTrigger.js

@@ -37,6 +37,7 @@ const ExplorerQuickSwitcherTrigger = ({ mode, showShortcut, tabIndex }) => {
             mode,
             invocationTimestamp: Date.now(),
             assetSelection: null,
+            compositionSelection: null,
         });
     }, [mode, setSelectedModal]);
     return (jsx_runtime_1.jsx("div", { style: quickSwitcherArea, children: jsx_runtime_1.jsxs("button", { type: "button", style: quickSwitcherTrigger, onClick: openQuickSwitcher, tabIndex: tabIndex, children: ["Search...", showShortcut && !(0, use_keybinding_1.areKeyboardShortcutsDisabled)() ? (jsx_runtime_1.jsxs("span", { style: shortcutLabel, children: [ShortcutHint_1.cmdOrCtrlCharacter, "+K"] })) : null] }) }));

package/dist/components/QuickSwitcher/QuickSwitcher.d.ts

@@ -1,4 +1,5 @@
 import React from 'react';
+import type { _InternalTypes } from 'remotion';
 import type { StaticFile } from '../../api/get-static-files';
 import type { QuickSwitcherMode } from './NoResults';
 declare const QuickSwitcher: React.FC<{
@@ -7,7 +8,12 @@ declare const QuickSwitcher: React.FC<{
     readonly readOnlyStudio: boolean;
     readonly assetSelection: {
         readonly initialQuery: string;
+        readonly onSelectFile: () => void;
         readonly onSelected: (asset: StaticFile) => void;
     } | null;
+    readonly compositionSelection: {
+        readonly excludeCompositionId: string;
+        readonly onSelected: (composition: _InternalTypes['AnyComposition']) => void;
+    } | null;
 }>;
 export default QuickSwitcher;

package/dist/components/QuickSwitcher/QuickSwitcher.js

@@ -7,7 +7,7 @@ const panelStyle = {
     borderRadius: 6,
     overflow: 'hidden',
 };
-const QuickSwitcher = ({ initialMode, invocationTimestamp, readOnlyStudio, assetSelection }) => {
-    return (jsx_runtime_1.jsx(DismissableModal_1.DismissableModal, { panelStyle: panelStyle, children: jsx_runtime_1.jsx(QuickSwitcherContent_1.QuickSwitcherContent, { readOnlyStudio: readOnlyStudio, invocationTimestamp: invocationTimestamp, initialMode: initialMode, assetSelection: assetSelection }) }));
+const QuickSwitcher = ({ initialMode, invocationTimestamp, readOnlyStudio, assetSelection, compositionSelection, }) => {
+    return (jsx_runtime_1.jsx(DismissableModal_1.DismissableModal, { panelStyle: panelStyle, children: jsx_runtime_1.jsx(QuickSwitcherContent_1.QuickSwitcherContent, { readOnlyStudio: readOnlyStudio, invocationTimestamp: invocationTimestamp, initialMode: initialMode, assetSelection: assetSelection, compositionSelection: compositionSelection }) }));
 };
 exports.default = QuickSwitcher;

package/dist/components/QuickSwitcher/QuickSwitcherContent.d.ts

@@ -1,4 +1,5 @@
 import React from 'react';
+import type { _InternalTypes } from 'remotion';
 import type { StaticFile } from '../../api/get-static-files';
 import type { QuickSwitcherMode } from './NoResults';
 export declare const QuickSwitcherContent: React.FC<{
@@ -7,6 +8,11 @@ export declare const QuickSwitcherContent: React.FC<{
     readonly readOnlyStudio: boolean;
     readonly assetSelection: {
         readonly initialQuery: string;
+        readonly onSelectFile: () => void;
         readonly onSelected: (asset: StaticFile) => void;
     } | null;
+    readonly compositionSelection: {
+        readonly excludeCompositionId: string;
+        readonly onSelected: (composition: _InternalTypes['AnyComposition']) => void;
+    } | null;
 }>;