@remotion/studio 4.0.499 → 4.0.500

package/dist/components/Menu/MenuItem.js

@@ -16,7 +16,7 @@ const portals_1 = require("./portals");
 const styles_1 = require("./styles");
 const container = {
     fontSize: 13,
-    color: colors_1.WHITE,
+    color: colors_1.WHITE_ALPHA_80,
     paddingLeft: 10,
     paddingRight: 10,
     cursor: 'default',
@@ -37,6 +37,7 @@ const MenuItem = ({ label: itemName, selected, id, onItemSelected, onItemHovered
     const containerStyle = (0, react_1.useMemo)(() => {
         return {
             ...container,
+            color: hovered || selected ? colors_1.WHITE : colors_1.WHITE_ALPHA_80,
             backgroundColor: (0, colors_1.getBackgroundFromHoverState)({
                 hovered,
                 selected,

package/dist/components/MenuCompositionName.js

@@ -6,8 +6,10 @@ const react_1 = require("react");
 const remotion_1 = require("remotion");
 const client_id_1 = require("../helpers/client-id");
 const colors_1 = require("../helpers/colors");
+const get_file_manager_name_1 = require("../helpers/get-file-manager-name");
 const open_in_editor_1 = require("../helpers/open-in-editor");
 const NotificationCenter_1 = require("./Notifications/NotificationCenter");
+const actions_1 = require("./RenderQueue/actions");
 const use_resolved_stack_1 = require("./Timeline/use-resolved-stack");
 const baseStyle = {
     color: 'inherit',
@@ -35,7 +37,7 @@ const slashStyle = {
     top: 1,
 };
 const MenuCompositionName = () => {
-    var _a;
+    var _a, _b;
     const { canvasContent, compositions } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
     const connectionStatus = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx)
         .previewServerState.type;
@@ -48,17 +50,30 @@ const MenuCompositionName = () => {
         }
         return ((_a = compositions.find((c) => c.id === canvasContent.compositionId)) !== null && _a !== void 0 ? _a : null);
     }, [canvasContent, compositions]);
+    const asset = (canvasContent === null || canvasContent === void 0 ? void 0 : canvasContent.type) === 'asset' ? canvasContent.asset : null;
     const resolvedLocation = (0, use_resolved_stack_1.useResolvedStack)((_a = composition === null || composition === void 0 ? void 0 : composition.stack) !== null && _a !== void 0 ? _a : null);
-    const canOpen = resolvedLocation &&
+    const fileManagerName = (0, get_file_manager_name_1.getFileManagerName)(window.remotion_fileSystemPlatform);
+    const canOpenComposition = resolvedLocation &&
         window.remotion_editorName &&
         connectionStatus === 'connected';
+    const canOpenAsset = asset !== null &&
+        window.remotion_publicFolderExists !== null &&
+        connectionStatus === 'connected';
+    const canOpen = canOpenComposition || canOpenAsset;
     const handleClick = (0, react_1.useCallback)(async () => {
-        if (!canOpen || !resolvedLocation) {
+        if (!canOpen || opening) {
             return;
         }
         setOpening(true);
         try {
-            await (0, open_in_editor_1.openOriginalPositionInEditor)(resolvedLocation);
+            if (asset !== null && window.remotion_publicFolderExists !== null) {
+                await (0, actions_1.openInFileExplorer)({
+                    directory: `${window.remotion_publicFolderExists}/${asset}`,
+                });
+            }
+            else if (resolvedLocation) {
+                await (0, open_in_editor_1.openOriginalPositionInEditor)(resolvedLocation);
+            }
         }
         catch (err) {
             (0, NotificationCenter_1.showNotification)(err.message, 2000);
@@ -66,16 +81,24 @@ const MenuCompositionName = () => {
         finally {
             setOpening(false);
         }
-    }, [canOpen, resolvedLocation]);
-    if (!composition) {
+    }, [asset, canOpen, opening, resolvedLocation]);
+    if (!composition && asset === null) {
         return null;
     }
+    const name = (_b = composition === null || composition === void 0 ? void 0 : composition.id) !== null && _b !== void 0 ? _b : asset;
+    const title = composition
+        ? canOpenComposition
+            ? `Open in ${window.remotion_editorName}`
+            : composition.id
+        : canOpenAsset
+            ? `Show in ${fileManagerName}`
+            : (asset !== null && asset !== void 0 ? asset : undefined);
     return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
             jsx_runtime_1.jsx("span", { style: slashStyle, children: "/" }), jsx_runtime_1.jsx("a", { style: canOpen && !opening
                     ? hovered
                         ? clickableHoveredStyle
                         : clickableStyle
-                    : compositionNameStyle, title: canOpen ? `Open in ${window.remotion_editorName}` : composition.id, onClick: handleClick, onPointerEnter: () => setHovered(true), onPointerLeave: () => setHovered(false), children: composition.id })
+                    : compositionNameStyle, title: title, onClick: handleClick, onPointerEnter: () => setHovered(true), onPointerLeave: () => setHovered(false), children: name })
         ] }));
 };
 exports.MenuCompositionName = MenuCompositionName;

package/dist/components/MenuToolbar.d.ts

@@ -1,5 +1,4 @@
 import React from 'react';
-export declare const MENU_TOOLBAR_HEIGHT = 30;
 export declare const MenuToolbar: React.FC<{
     readonly readOnlyStudio: boolean;
 }>;

package/dist/components/MenuToolbar.js

@@ -1,18 +1,18 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.MenuToolbar = exports.MENU_TOOLBAR_HEIGHT = void 0;
+exports.MenuToolbar = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const colors_1 = require("../helpers/colors");
 const mobile_layout_1 = require("../helpers/mobile-layout");
 const use_menu_structure_1 = require("../helpers/use-menu-structure");
 const layout_1 = require("./layout");
+const menu_toolbar_height_1 = require("./menu-toolbar-height");
 const MenuItem_1 = require("./Menu/MenuItem");
 const MenuBuildIndicator_1 = require("./MenuBuildIndicator");
 const SidebarCollapserControls_1 = require("./SidebarCollapserControls");
 const UndoRedoButtons_1 = require("./UndoRedoButtons");
 const UpdateCheck_1 = require("./UpdateCheck");
-exports.MENU_TOOLBAR_HEIGHT = 30;
 const row = {
     alignItems: 'center',
     flexDirection: 'row',
@@ -21,9 +21,9 @@ const row = {
     borderBottom: colors_1.BORDER_BLACK,
     boxSizing: 'border-box',
     fontSize: 13,
-    height: exports.MENU_TOOLBAR_HEIGHT,
+    height: menu_toolbar_height_1.MENU_TOOLBAR_HEIGHT,
     paddingLeft: 6,
-    paddingRight: 10,
+    paddingRight: 6,
     backgroundColor: colors_1.BACKGROUND,
 };
 const flex = {
@@ -98,10 +98,11 @@ const MenuToolbar = ({ readOnlyStudio }) => {
         e.stopPropagation();
     }, []);
     return (jsx_runtime_1.jsxs(layout_1.Row, { align: "center", className: "css-reset", style: row, onPointerDown: onPointerDown, children: [
-            jsx_runtime_1.jsxs("div", { style: fixedWidthLeft, children: [structure.map((s) => {
+            jsx_runtime_1.jsxs("div", { style: fixedWidthLeft, children: [
+                    jsx_runtime_1.jsx(SidebarCollapserControls_1.SidebarCollapserControl, { side: "left" }), structure.map((s) => {
                         return (jsx_runtime_1.jsx(MenuItem_1.MenuItem, { selected: selected === s.id, onItemSelected: itemClicked, onItemHovered: itemHovered, id: s.id, label: s.label, onItemQuit: onItemQuit, menu: s, onPreviousMenu: onPreviousMenu, onNextMenu: onNextMenu, leaveLeftPadding: s.leaveLeftPadding }, s.id));
-                    }), readOnlyStudio ? null : jsx_runtime_1.jsx(UpdateCheck_1.UpdateCheck, {})] }), jsx_runtime_1.jsx("div", { style: flex }), jsx_runtime_1.jsx(MenuBuildIndicator_1.MenuBuildIndicator, {}), jsx_runtime_1.jsx("div", { style: flex }), jsx_runtime_1.jsxs("div", { style: fixedWidthRight, children: [readOnlyStudio ? null : jsx_runtime_1.jsx(UndoRedoButtons_1.UndoRedoButtons, {}), jsx_runtime_1.jsx(SidebarCollapserControls_1.SidebarCollapserControls, {})
-                ] }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 1 })
+                    }), readOnlyStudio ? null : jsx_runtime_1.jsx(UpdateCheck_1.UpdateCheck, {})] }), jsx_runtime_1.jsx("div", { style: flex }), jsx_runtime_1.jsx(MenuBuildIndicator_1.MenuBuildIndicator, {}), jsx_runtime_1.jsx("div", { style: flex }), jsx_runtime_1.jsxs("div", { style: fixedWidthRight, children: [readOnlyStudio ? null : jsx_runtime_1.jsx(UndoRedoButtons_1.UndoRedoButtons, {}), jsx_runtime_1.jsx(SidebarCollapserControls_1.SidebarCollapserControl, { side: "right" })
+                ] })
         ] }));
 };
 exports.MenuToolbar = MenuToolbar;

package/dist/components/MobilePanel.d.ts

@@ -1,5 +1,6 @@
 import React from 'react';
-export default function MobilePanel({ children, onClose }: {
+export default function MobilePanel({ children, onClose, side }: {
     children: React.ReactNode;
     onClose: () => void;
+    side: 'left' | 'right';
 }): React.ReactPortal;

package/dist/components/MobilePanel.js

@@ -5,39 +5,43 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.default = MobilePanel;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = __importDefault(require("react"));
 const react_dom_1 = __importDefault(require("react-dom"));
 const colors_1 = require("../helpers/colors");
 const z_index_1 = require("../state/z-index");
-const InlineAction_1 = require("./InlineAction");
+const menu_toolbar_height_1 = require("./menu-toolbar-height");
 const portals_1 = require("./Menu/portals");
-const CancelButton_1 = require("./NewComposition/CancelButton");
-const container = {
+const overlay = {
     position: 'fixed',
-    top: 0,
+    top: menu_toolbar_height_1.MENU_TOOLBAR_HEIGHT,
     left: 0,
     width: '100%',
-    height: '100%',
-    padding: '0 0px 50px 0px',
-    background: colors_1.BACKGROUND,
-};
-const buttonContainer = {
-    height: '40px',
-    width: '100%',
-    alignItems: 'center',
-    display: 'flex',
-    justifyContent: 'flex-end',
-    paddingRight: 8,
+    height: `calc(100% - ${menu_toolbar_height_1.MENU_TOOLBAR_HEIGHT}px)`,
 };
-const button = {
-    height: 16,
-    width: 16,
-    flexShrink: 0,
-};
-const renderCloseIcon = (color) => {
-    return jsx_runtime_1.jsx(CancelButton_1.CancelIcon, { style: { ...button, color } });
+const panel = {
+    position: 'fixed',
+    top: menu_toolbar_height_1.MENU_TOOLBAR_HEIGHT,
+    width: 'min(350px, calc(100% - 50px))',
+    height: `calc(100% - ${menu_toolbar_height_1.MENU_TOOLBAR_HEIGHT}px)`,
+    overflow: 'hidden',
+    background: colors_1.BACKGROUND,
+    boxShadow: colors_1.SHADOW_BLACK,
 };
-function MobilePanel({ children, onClose, }) {
+function MobilePanel({ children, onClose, side, }) {
     const { currentZIndex } = (0, z_index_1.useZIndex)();
-    return react_dom_1.default.createPortal(jsx_runtime_1.jsxs("div", { style: container, children: [
-            jsx_runtime_1.jsx("div", { style: buttonContainer, children: jsx_runtime_1.jsx(InlineAction_1.InlineAction, { onClick: onClose, renderAction: renderCloseIcon, title: "Close sidebar" }) }), children] }), (0, portals_1.getPortal)(currentZIndex));
+    const onOutsideClick = react_1.default.useCallback((target) => {
+        var _a;
+        const element = target instanceof Element ? target : null;
+        const toggleSelector = `[data-sidebar-toggle="${side}"]`;
+        if ((element === null || element === void 0 ? void 0 : element.closest(toggleSelector)) ||
+            ((_a = element === null || element === void 0 ? void 0 : element.closest('button')) === null || _a === void 0 ? void 0 : _a.querySelector(toggleSelector))) {
+            return;
+        }
+        onClose();
+    }, [onClose, side]);
+    return react_dom_1.default.createPortal(jsx_runtime_1.jsx("div", { style: overlay, children: jsx_runtime_1.jsx(z_index_1.HigherZIndex, { onEscape: onClose, onOutsideClick: onOutsideClick, children: jsx_runtime_1.jsx("div", { style: {
+                    ...panel,
+                    left: side === 'left' ? 0 : undefined,
+                    right: side === 'right' ? 0 : undefined,
+                }, children: children }) }) }), (0, portals_1.getPortal)(currentZIndex));
 }

package/dist/components/ModalContainer.d.ts

@@ -6,4 +6,5 @@ export declare const ModalContainer: React.FC<{
     readonly onOutsideClick: () => void;
     readonly children: React.ReactNode;
     readonly noZIndex?: boolean;
+    readonly panelStyle?: React.CSSProperties;
 }>;

package/dist/components/ModalContainer.js

@@ -29,11 +29,11 @@ const panel = {
     color: colors_1.WHITE,
     margin: 'auto',
 };
-const ModalContainer = ({ children, onEscape, onOutsideClick, noZIndex }) => {
+const ModalContainer = ({ children, onEscape, onOutsideClick, noZIndex, panelStyle }) => {
     const onPointerDown = (0, react_1.useCallback)((e) => {
         // Prevent deselection of currently selected items
         e.stopPropagation();
     }, []);
-    return (jsx_runtime_1.jsx("div", { className: "css-reset", style: backgroundOverlay, role: "dialog", "aria-modal": "true", onPointerDown: onPointerDown, children: jsx_runtime_1.jsx(z_index_1.HigherZIndex, { disabled: noZIndex, onOutsideClick: onOutsideClick, onEscape: onEscape, children: jsx_runtime_1.jsx("div", { style: panel, children: children }) }) }));
+    return (jsx_runtime_1.jsx("div", { className: "css-reset", style: backgroundOverlay, role: "dialog", "aria-modal": "true", onPointerDown: onPointerDown, children: jsx_runtime_1.jsx(z_index_1.HigherZIndex, { disabled: noZIndex, onOutsideClick: onOutsideClick, onEscape: onEscape, children: jsx_runtime_1.jsx("div", { style: { ...panel, ...panelStyle }, children: children }) }) }));
 };
 exports.ModalContainer = ModalContainer;

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 })), 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 })), 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/NewComposition/DismissableModal.d.ts

@@ -1,4 +1,5 @@
 import React from 'react';
 export declare const DismissableModal: React.FC<{
     readonly children: React.ReactNode;
+    readonly panelStyle?: React.CSSProperties;
 }>;

package/dist/components/NewComposition/DismissableModal.js

@@ -5,11 +5,11 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const modals_1 = require("../../state/modals");
 const ModalContainer_1 = require("../ModalContainer");
-const DismissableModal = ({ children }) => {
+const DismissableModal = ({ children, panelStyle }) => {
     const { setSelectedModal } = (0, react_1.useContext)(modals_1.ModalsContext);
     const onQuit = (0, react_1.useCallback)(() => {
         setSelectedModal(null);
     }, [setSelectedModal]);
-    return (jsx_runtime_1.jsx(ModalContainer_1.ModalContainer, { onOutsideClick: onQuit, onEscape: onQuit, children: children }));
+    return (jsx_runtime_1.jsx(ModalContainer_1.ModalContainer, { onOutsideClick: onQuit, onEscape: onQuit, panelStyle: panelStyle, children: children }));
 };
 exports.DismissableModal = DismissableModal;

package/dist/components/NewComposition/InputDragger.d.ts

@@ -9,6 +9,13 @@ type InputDraggerValidationResult = {
     readonly message: string;
 };
 export declare const inputDraggerContainerStyle: React.CSSProperties;
+export type InputDraggerExpressionResult = {
+    readonly status: 'valid';
+    readonly value: number;
+} | {
+    readonly status: 'incomplete' | 'invalid';
+};
+export declare const parseInputDraggerExpression: (input: string) => InputDraggerExpressionResult;
 export declare const parseInputDraggerNumber: (value: string) => number | null;
 export declare const isInputDraggerValueAlignedToStep: ({ min, step, value, }: {
     readonly min: string | number | undefined;

package/dist/components/NewComposition/InputDragger.js

@@ -33,7 +33,7 @@ var __importStar = (this && this.__importStar) || (function () {
     };
 })();
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.InputDragger = exports.deriveInputDraggerValueDiff = exports.isInputDraggerValueInRange = exports.deriveInputDraggerDragStartValue = exports.deriveInputDraggerStep = exports.deriveInputDraggerArrowValue = exports.validateInputDraggerValue = exports.isInputDraggerValueAlignedToStep = exports.parseInputDraggerNumber = exports.inputDraggerContainerStyle = void 0;
+exports.InputDragger = exports.deriveInputDraggerValueDiff = exports.isInputDraggerValueInRange = exports.deriveInputDraggerDragStartValue = exports.deriveInputDraggerStep = exports.deriveInputDraggerArrowValue = exports.validateInputDraggerValue = exports.isInputDraggerValueAlignedToStep = exports.parseInputDraggerNumber = exports.parseInputDraggerExpression = exports.inputDraggerContainerStyle = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = __importStar(require("react"));
 const remotion_1 = require("remotion");
@@ -60,14 +60,125 @@ const roundToDecimalPlaces = (val, decimalPlaces) => {
     const rounded = Math.round(val * factor) / factor;
     return Object.is(rounded, -0) ? 0 : rounded;
 };
-const validNumberPattern = /^[+-]?(?:(?:\d+(?:\.\d*)?)|(?:\.\d+))(?:e[+-]?\d+)?$/i;
-const parseInputDraggerNumber = (value) => {
-    const trimmedValue = value.trim();
-    if (!validNumberPattern.test(trimmedValue)) {
-        return null;
+const numberAtStartPattern = /^(?:(?:\d+(?:\.\d*)?)|(?:\.\d+))(?:e[+-]?\d+)?/i;
+const parseInputDraggerExpression = (input) => {
+    let index = 0;
+    const invalid = () => ({ status: 'invalid' });
+    const incomplete = () => ({
+        status: 'incomplete',
+    });
+    const skipWhitespace = () => {
+        while (index < input.length && /\s/.test(input[index])) {
+            index++;
+        }
+    };
+    const parsePrimary = () => {
+        skipWhitespace();
+        if (index === input.length) {
+            return incomplete();
+        }
+        if (input[index] === '(') {
+            index++;
+            const expression = parseExpression();
+            if (expression.status !== 'valid') {
+                return expression;
+            }
+            skipWhitespace();
+            if (index === input.length) {
+                return incomplete();
+            }
+            if (input[index] !== ')') {
+                return invalid();
+            }
+            index++;
+            return expression;
+        }
+        const match = input.slice(index).match(numberAtStartPattern);
+        if (!match) {
+            return invalid();
+        }
+        index += match[0].length;
+        const rest = input.slice(index);
+        if (/^e[+-]?\s*$/i.test(rest)) {
+            return incomplete();
+        }
+        const value = Number(match[0]);
+        return Number.isFinite(value) ? { status: 'valid', value } : invalid();
+    };
+    const parseUnary = () => {
+        skipWhitespace();
+        if (input[index] !== '+' && input[index] !== '-') {
+            return parsePrimary();
+        }
+        const operator = input[index];
+        index++;
+        const operand = parseUnary();
+        if (operand.status !== 'valid') {
+            return operand;
+        }
+        const value = operator === '-' ? -operand.value : operand.value;
+        return Number.isFinite(value) ? { status: 'valid', value } : invalid();
+    };
+    const parseTerm = () => {
+        let left = parseUnary();
+        if (left.status !== 'valid') {
+            return left;
+        }
+        while (true) {
+            skipWhitespace();
+            const operator = input[index];
+            if (operator !== '*' && operator !== '/') {
+                return left;
+            }
+            index++;
+            const right = parseUnary();
+            if (right.status !== 'valid') {
+                return right;
+            }
+            if (operator === '/' && right.value === 0) {
+                return invalid();
+            }
+            const value = operator === '*' ? left.value * right.value : left.value / right.value;
+            if (!Number.isFinite(value)) {
+                return invalid();
+            }
+            left = { status: 'valid', value };
+        }
+    };
+    const parseExpression = () => {
+        let left = parseTerm();
+        if (left.status !== 'valid') {
+            return left;
+        }
+        while (true) {
+            skipWhitespace();
+            const operator = input[index];
+            if (operator !== '+' && operator !== '-') {
+                return left;
+            }
+            index++;
+            const right = parseTerm();
+            if (right.status !== 'valid') {
+                return right;
+            }
+            const value = operator === '+' ? left.value + right.value : left.value - right.value;
+            if (!Number.isFinite(value)) {
+                return invalid();
+            }
+            left = { status: 'valid', value };
+        }
+    };
+    const result = parseExpression();
+    if (result.status !== 'valid') {
+        return result;
     }
-    const parsed = Number(trimmedValue);
-    return Number.isFinite(parsed) ? parsed : null;
+    skipWhitespace();
+    return index === input.length ? result : invalid();
+};
+exports.parseInputDraggerExpression = parseInputDraggerExpression;
+const parseInputDraggerNumber = (value) => {
+    const result = (0, exports.parseInputDraggerExpression)(value);
+    return result.status === 'valid' ? result.value : null;
 };
 exports.parseInputDraggerNumber = parseInputDraggerNumber;
 const getFiniteAttribute = (value) => {

package/dist/components/OutlineToggle.d.ts

@@ -1,4 +1,2 @@
 import React from 'react';
-export declare const OutlineToggle: React.FC<{
-    readonly disabled: boolean;
-}>;
+export declare const OutlineToggle: React.FC;

package/dist/components/OutlineToggle.js

@@ -6,7 +6,7 @@ const react_1 = require("react");
 const colors_1 = require("../helpers/colors");
 const editor_outlines_1 = require("../state/editor-outlines");
 const ControlButton_1 = require("./ControlButton");
-const OutlineToggle = ({ disabled }) => {
+const OutlineToggle = () => {
     const { editorShowOutlines, setEditorShowOutlines } = (0, react_1.useContext)(editor_outlines_1.EditorShowOutlinesContext);
     const onClick = (0, react_1.useCallback)(() => {
         setEditorShowOutlines((current) => !current);
@@ -15,6 +15,6 @@ const OutlineToggle = ({ disabled }) => {
     const accessibilityLabel = editorShowOutlines
         ? 'Hide outlines'
         : 'Show outlines';
-    return (jsx_runtime_1.jsx(ControlButton_1.ControlButton, { title: accessibilityLabel, "aria-label": accessibilityLabel, disabled: disabled, onClick: onClick, children: jsx_runtime_1.jsx("svg", { style: { width: 18, height: 18 }, viewBox: "0 0 512 512", fill: color, "aria-hidden": "true", focusable: "false", children: jsx_runtime_1.jsx("path", { d: "M32 119.4C12.9 108.4 0 87.7 0 64 0 28.7 28.7 0 64 0 87.7 0 108.4 12.9 119.4 32l273.1 0c11.1-19.1 31.7-32 55.4-32 35.3 0 64 28.7 64 64 0 23.7-12.9 44.4-32 55.4l0 273.1c19.1 11.1 32 31.7 32 55.4 0 35.3-28.7 64-64 64-23.7 0-44.4-12.9-55.4-32l-273.1 0c-11.1 19.1-31.7 32-55.4 32-35.3 0-64-28.7-64-64 0-23.7 12.9-44.4 32-55.4l0-273.1zm64 0l0 273.1c9.7 5.6 17.8 13.7 23.4 23.4l273.1 0c5.6-9.7 13.7-17.8 23.4-23.4l0-273.1c-9.7-5.6-17.8-13.7-23.4-23.4L119.4 96c-5.6 9.7-13.7 17.8-23.4 23.4z" }) }) }));
+    return (jsx_runtime_1.jsx(ControlButton_1.ControlButton, { title: accessibilityLabel, "aria-label": accessibilityLabel, onClick: onClick, children: jsx_runtime_1.jsx("svg", { style: { width: 18, height: 18 }, viewBox: "0 0 512 512", fill: color, "aria-hidden": "true", focusable: "false", children: jsx_runtime_1.jsx("path", { d: "M32 119.4C12.9 108.4 0 87.7 0 64 0 28.7 28.7 0 64 0 87.7 0 108.4 12.9 119.4 32l273.1 0c11.1-19.1 31.7-32 55.4-32 35.3 0 64 28.7 64 64 0 23.7-12.9 44.4-32 55.4l0 273.1c19.1 11.1 32 31.7 32 55.4 0 35.3-28.7 64-64 64-23.7 0-44.4-12.9-55.4-32l-273.1 0c-11.1 19.1-31.7 32-55.4 32-35.3 0-64-28.7-64-64 0-23.7 12.9-44.4 32-55.4l0-273.1zm64 0l0 273.1c9.7 5.6 17.8 13.7 23.4 23.4l273.1 0c5.6-9.7 13.7-17.8 23.4-23.4l0-273.1c-9.7-5.6-17.8-13.7-23.4-23.4L119.4 96c-5.6 9.7-13.7 17.8-23.4 23.4z" }) }) }));
 };
 exports.OutlineToggle = OutlineToggle;

package/dist/components/PreviewToolbar.js

@@ -39,7 +39,7 @@ const container = {
 const mobileContainer = {
     ...container,
     position: 'relative',
-    overflowY: 'auto',
+    overflowX: 'auto',
     justifyContent: 'flex-start',
 };
 const scrollIndicatorLeft = {
@@ -69,6 +69,13 @@ const sideContainer = {
     flexDirection: 'row',
     alignItems: 'center',
 };
+const mobileSideContainer = {
+    height: 30,
+    display: 'flex',
+    flexDirection: 'row',
+    alignItems: 'center',
+    flexShrink: 0,
+};
 const padding = {
     width: timeline_layout_1.TIMELINE_PADDING,
 };
@@ -166,9 +173,8 @@ const PreviewToolbar = ({ readOnlyStudio, bufferStateDelayInMilliseconds }) => {
                         ] }), 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, { disabled: readOnlyStudio }) }), jsx_runtime_1.jsx(PreviewToolbarControl, { children: jsx_runtime_1.jsx(SnappingToggle_1.SnappingToggle, { disabled: readOnlyStudio }) })
-                ] })) : 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(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] })), jsx_runtime_1.jsxs("div", { style: sideContainer, 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 })
         ] }));

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

@@ -0,0 +1,7 @@
+import React from 'react';
+import type { QuickSwitcherMode } from './NoResults';
+export declare const ExplorerQuickSwitcherTrigger: React.FC<{
+    readonly mode: QuickSwitcherMode;
+    readonly showShortcut: boolean;
+    readonly tabIndex: number;
+}>;

package/dist/components/QuickSwitcher/ExplorerQuickSwitcherTrigger.js

@@ -0,0 +1,44 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ExplorerQuickSwitcherTrigger = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const ShortcutHint_1 = require("../../error-overlay/remotion-overlay/ShortcutHint");
+const colors_1 = require("../../helpers/colors");
+const use_keybinding_1 = require("../../helpers/use-keybinding");
+const modals_1 = require("../../state/modals");
+const quickSwitcherArea = {
+    padding: '4px 12px',
+    borderBottom: `1px solid ${colors_1.BLACK_HEX}`,
+};
+const quickSwitcherTrigger = {
+    backgroundColor: colors_1.WHITE_ALPHA_06,
+    borderRadius: 5,
+    padding: '4px 10px',
+    color: colors_1.LIGHT_TEXT,
+    fontSize: 12,
+    cursor: 'pointer',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    border: 'none',
+    width: '100%',
+    appearance: 'none',
+};
+const shortcutLabel = {
+    fontSize: 11,
+    opacity: 0.6,
+};
+const ExplorerQuickSwitcherTrigger = ({ mode, showShortcut, tabIndex }) => {
+    const { setSelectedModal } = (0, react_1.useContext)(modals_1.ModalsContext);
+    const openQuickSwitcher = (0, react_1.useCallback)(() => {
+        setSelectedModal({
+            type: 'quick-switcher',
+            mode,
+            invocationTimestamp: Date.now(),
+            assetSelection: 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] }) }));
+};
+exports.ExplorerQuickSwitcherTrigger = ExplorerQuickSwitcherTrigger;

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

@@ -1,5 +1,5 @@
 import React from 'react';
-export type QuickSwitcherMode = 'commands' | 'compositions' | 'docs';
+export type QuickSwitcherMode = 'assets' | 'commands' | 'compositions' | 'docs';
 export declare const QuickSwitcherNoResults: React.FC<{
     readonly query: string;
     readonly mode: QuickSwitcherMode;

package/dist/components/QuickSwitcher/NoResults.js

@@ -10,6 +10,7 @@ const container = {
     fontSize: 14,
 };
 const MODE_TO_STRING = {
+    assets: 'assets',
     commands: 'commands',
     compositions: 'compositions',
     docs: 'documentation',

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

@@ -1,8 +1,13 @@
 import React from 'react';
+import type { StaticFile } from '../../api/get-static-files';
 import type { QuickSwitcherMode } from './NoResults';
 declare const QuickSwitcher: React.FC<{
     readonly initialMode: QuickSwitcherMode;
     readonly invocationTimestamp: number;
     readonly readOnlyStudio: boolean;
+    readonly assetSelection: {
+        readonly initialQuery: string;
+        readonly onSelected: (asset: StaticFile) => void;
+    } | null;
 }>;
 export default QuickSwitcher;