@remotion/studio 4.0.499 → 4.0.501

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, 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/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,45 @@
+"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,
+            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] }) }));
+};
+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,18 @@
 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<{
     readonly initialMode: QuickSwitcherMode;
     readonly invocationTimestamp: number;
     readonly readOnlyStudio: boolean;
+    readonly assetSelection: {
+        readonly initialQuery: string;
+        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

@@ -3,7 +3,11 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const jsx_runtime_1 = require("react/jsx-runtime");
 const DismissableModal_1 = require("../NewComposition/DismissableModal");
 const QuickSwitcherContent_1 = require("./QuickSwitcherContent");
-const QuickSwitcher = ({ initialMode, invocationTimestamp, readOnlyStudio }) => {
-    return (jsx_runtime_1.jsx(DismissableModal_1.DismissableModal, { children: jsx_runtime_1.jsx(QuickSwitcherContent_1.QuickSwitcherContent, { readOnlyStudio: readOnlyStudio, invocationTimestamp: invocationTimestamp, initialMode: initialMode }) }));
+const panelStyle = {
+    borderRadius: 6,
+    overflow: 'hidden',
+};
+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,7 +1,17 @@
 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<{
     readonly initialMode: QuickSwitcherMode;
     readonly invocationTimestamp: number;
     readonly readOnlyStudio: boolean;
+    readonly assetSelection: {
+        readonly initialQuery: string;
+        readonly onSelected: (asset: StaticFile) => void;
+    } | null;
+    readonly compositionSelection: {
+        readonly excludeCompositionId: string;
+        readonly onSelected: (composition: _InternalTypes['AnyComposition']) => void;
+    } | null;
 }>;