@remotion/studio 4.0.498 → 4.0.500

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.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,6 +60,204 @@ const roundToDecimalPlaces = (val, decimalPlaces) => {
     const rounded = Math.round(val * factor) / factor;
     return Object.is(rounded, -0) ? 0 : rounded;
 };
+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;
+    }
+    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) => {
+    const parsed = Number(value);
+    return Number.isFinite(parsed) ? parsed : null;
+};
+const getPositiveStep = (step) => {
+    if (step === 'any') {
+        return null;
+    }
+    const parsed = Number(step);
+    return Number.isFinite(parsed) && parsed > 0 ? parsed : 1;
+};
+const isInputDraggerValueAlignedToStep = ({ min, step, value, }) => {
+    var _a;
+    const numericStep = getPositiveStep(step);
+    if (numericStep === null) {
+        return true;
+    }
+    const stepBase = (_a = getFiniteAttribute(min)) !== null && _a !== void 0 ? _a : 0;
+    const stepsFromBase = (value - stepBase) / numericStep;
+    const tolerance = Number.EPSILON *
+        10 *
+        Math.max(1, Math.abs(value / numericStep), Math.abs(stepBase / numericStep));
+    return Math.abs(stepsFromBase - Math.round(stepsFromBase)) <= tolerance;
+};
+exports.isInputDraggerValueAlignedToStep = isInputDraggerValueAlignedToStep;
+const validateInputDraggerValue = ({ max, min, step, value, }) => {
+    const parsed = (0, exports.parseInputDraggerNumber)(value);
+    if (parsed === null) {
+        return {
+            valid: false,
+            message: 'Enter a valid number.',
+        };
+    }
+    const numericMin = getFiniteAttribute(min);
+    if (numericMin !== null && parsed < numericMin) {
+        return {
+            valid: false,
+            message: `Value must be greater than or equal to ${numericMin}.`,
+        };
+    }
+    const numericMax = getFiniteAttribute(max);
+    if (numericMax !== null && parsed > numericMax) {
+        return {
+            valid: false,
+            message: `Value must be less than or equal to ${numericMax}.`,
+        };
+    }
+    if (!(0, exports.isInputDraggerValueAlignedToStep)({ min, step, value: parsed })) {
+        return {
+            valid: false,
+            message: `Value must align to a step of ${step}.`,
+        };
+    }
+    return { valid: true, value: parsed };
+};
+exports.validateInputDraggerValue = validateInputDraggerValue;
+const getDecimalPlaces = (value) => {
+    var _a;
+    var _b;
+    const [mantissa, exponentString] = String(value).toLowerCase().split('e');
+    const exponent = Number(exponentString !== null && exponentString !== void 0 ? exponentString : 0);
+    const fractionLength = (_b = (_a = mantissa.split('.')[1]) === null || _a === void 0 ? void 0 : _a.length) !== null && _b !== void 0 ? _b : 0;
+    return Math.max(0, fractionLength - exponent);
+};
+const deriveInputDraggerArrowValue = ({ direction, max, min, step, value, }) => {
+    var _a, _b, _c;
+    const numericStep = (_a = getPositiveStep(step)) !== null && _a !== void 0 ? _a : 1;
+    const decimalPlaces = Math.max(getDecimalPlaces(value), getDecimalPlaces(numericStep));
+    const unroundedValue = value + direction * numericStep;
+    const steppedValue = decimalPlaces <= 15
+        ? roundToDecimalPlaces(unroundedValue, decimalPlaces)
+        : Number(unroundedValue.toPrecision(15));
+    const numericMin = (_b = getFiniteAttribute(min)) !== null && _b !== void 0 ? _b : -Infinity;
+    const numericMax = (_c = getFiniteAttribute(max)) !== null && _c !== void 0 ? _c : Infinity;
+    return Math.min(numericMax, Math.max(numericMin, steppedValue));
+};
+exports.deriveInputDraggerArrowValue = deriveInputDraggerArrowValue;
 const deriveInputDraggerStep = ({ min, snapToStep, step, }) => {
     if (!snapToStep) {
         return 'any';
@@ -96,11 +294,18 @@ const deriveInputDraggerValueDiff = ({ dragSensitivity, step, xDistance, }) => {
     return (0, remotion_1.interpolate)(xDistance, [-5, -4, 0, 4, 5], [-step * dragSensitivity, 0, 0, 0, step * dragSensitivity]);
 };
 exports.deriveInputDraggerValueDiff = deriveInputDraggerValueDiff;
-const InputDraggerForwardRefFn = ({ onValueChange, onValueChangeEnd, min: _min, max: _max, step: _step, value, onTextChange, formatter = (q) => String(q), status, rightAlign, small, snapToStep = true, dragDecimalPlaces, dragSensitivity = 1, ...props }, ref) => {
+const InputDraggerForwardRefFn = ({ onValueChange, onValueChangeEnd, min: _min, max: _max, step: _step, value, onTextChange, formatter = (q) => String(q), status, rightAlign, small, snapToStep = true, dragDecimalPlaces, dragSensitivity = 1, type: _type, ...props }, ref) => {
     const [inputFallback, setInputFallback] = (0, react_1.useState)(false);
     const [dragging, setDragging] = (0, react_1.useState)(false);
     const fallbackRef = (0, react_1.useRef)(null);
     const pointerDownRef = (0, react_1.useRef)(false);
+    const deriveStep = (0, react_1.useMemo)(() => {
+        return (0, exports.deriveInputDraggerStep)({
+            min: _min,
+            snapToStep,
+            step: _step,
+        });
+    }, [_min, _step, snapToStep]);
     const span = (0, react_1.useMemo)(() => ({
         color: dragging ? 'var(--remotion-cli-internals-blue-hovered)' : colors_1.BLUE,
         cursor: 'ew-resize',
@@ -136,9 +341,9 @@ const InputDraggerForwardRefFn = ({ onValueChange, onValueChangeEnd, min: _min,
         setInputFallback(false);
     }, []);
     const onInputChange = (0, react_1.useCallback)((e) => {
-        const parsed = Number(e.target.value);
-        if (e.target.value !== '' &&
-            !Number.isNaN(parsed) &&
+        e.target.setCustomValidity('');
+        const parsed = (0, exports.parseInputDraggerNumber)(e.target.value);
+        if (parsed !== null &&
             (0, exports.isInputDraggerValueInRange)({
                 max: _max,
                 min: _min,
@@ -156,20 +361,48 @@ const InputDraggerForwardRefFn = ({ onValueChange, onValueChangeEnd, min: _min,
             onEscape();
             return;
         }
-        if (fallbackRef.current.checkValidity()) {
-            onValueChangeEnd === null || onValueChangeEnd === void 0 ? void 0 : onValueChangeEnd(Number(newValue));
+        const validation = (0, exports.validateInputDraggerValue)({
+            max: _max,
+            min: _min,
+            step: deriveStep,
+            value: newValue,
+        });
+        if (validation.valid) {
+            fallbackRef.current.setCustomValidity('');
+            onValueChangeEnd === null || onValueChangeEnd === void 0 ? void 0 : onValueChangeEnd(validation.value);
             setInputFallback(false);
         }
         else {
+            fallbackRef.current.setCustomValidity(validation.message);
             fallbackRef.current.reportValidity();
         }
-    }, [onEscape, onValueChangeEnd]);
-    const onKeyPress = (0, react_1.useCallback)((e) => {
+    }, [_max, _min, deriveStep, onEscape, onValueChangeEnd]);
+    const onInputKeyDown = (0, react_1.useCallback)((e) => {
         var _a;
         if (e.key === 'Enter') {
             (_a = fallbackRef.current) === null || _a === void 0 ? void 0 : _a.blur();
+            return;
         }
-    }, []);
+        if (e.key !== 'ArrowUp' && e.key !== 'ArrowDown') {
+            return;
+        }
+        e.preventDefault();
+        const parsedInputValue = (0, exports.parseInputDraggerNumber)(e.currentTarget.value);
+        const currentValue = parsedInputValue !== null && parsedInputValue !== void 0 ? parsedInputValue : (0, exports.deriveInputDraggerDragStartValue)({
+            min: _min,
+            value,
+        });
+        const nextValue = (0, exports.deriveInputDraggerArrowValue)({
+            direction: e.key === 'ArrowUp' ? 1 : -1,
+            max: _max,
+            min: _min,
+            step: deriveStep,
+            value: currentValue,
+        });
+        e.currentTarget.value = String(nextValue);
+        e.currentTarget.setCustomValidity('');
+        onValueChange(nextValue);
+    }, [_max, _min, deriveStep, onValueChange, value]);
     const roundToStep = (val, stepSize) => {
         const factor = 1 / stepSize;
         return Math.ceil(val * factor) / factor;
@@ -214,20 +447,33 @@ const InputDraggerForwardRefFn = ({ onValueChange, onValueChangeEnd, min: _min,
             onValueChange(nextValue);
         };
         window.addEventListener('mousemove', moveListener);
-        window.addEventListener('pointerup', () => {
+        const endDrag = (commit) => {
             window.removeEventListener('mousemove', moveListener);
+            window.removeEventListener('pointerup', onPointerUp);
+            window.removeEventListener('pointercancel', onPointerCancel);
+            window.removeEventListener('blur', onWindowBlur);
             pointerDownRef.current = false;
             setDragging(false);
             (0, ForceSpecificCursor_1.stopForcingSpecificCursor)();
-            if (lastDragValue !== null && onValueChangeEnd) {
+            if (commit && lastDragValue !== null && onValueChangeEnd) {
                 onValueChangeEnd(lastDragValue);
             }
             setTimeout(() => {
                 (0, input_dragger_click_lock_1.setClickLock)(false);
             }, 2);
-        }, {
-            once: true,
-        });
+        };
+        const onPointerUp = () => {
+            endDrag(true);
+        };
+        const onPointerCancel = () => {
+            endDrag(false);
+        };
+        const onWindowBlur = () => {
+            endDrag(false);
+        };
+        window.addEventListener('pointerup', onPointerUp);
+        window.addEventListener('pointercancel', onPointerCancel);
+        window.addEventListener('blur', onWindowBlur);
     }, [
         _step,
         _min,
@@ -245,15 +491,8 @@ const InputDraggerForwardRefFn = ({ onValueChange, onValueChangeEnd, min: _min,
             (_a = fallbackRef.current) === null || _a === void 0 ? void 0 : _a.select();
         }
     }, [inputFallback]);
-    const deriveStep = (0, react_1.useMemo)(() => {
-        return (0, exports.deriveInputDraggerStep)({
-            min: _min,
-            snapToStep,
-            step: _step,
-        });
-    }, [_min, _step, snapToStep]);
     if (inputFallback) {
-        return (jsx_runtime_1.jsx(z_index_1.HigherZIndex, { onEscape: onEscape, onOutsideClick: noop_1.noop, children: jsx_runtime_1.jsx(RemInput_1.RemotionInput, { ref: fallbackRef, autoFocus: true, onKeyPress: onKeyPress, onBlur: onBlur, onChange: onInputChange, min: _min, max: _max, step: deriveStep, defaultValue: value, status: status, pattern: '[0-9]*[.]?[0-9]*', rightAlign: rightAlign, small: small, ...props }) }));
+        return (jsx_runtime_1.jsx(z_index_1.HigherZIndex, { onEscape: onEscape, onOutsideClick: noop_1.noop, children: jsx_runtime_1.jsx(RemInput_1.RemotionInput, { ref: fallbackRef, autoFocus: true, onKeyDown: onInputKeyDown, onBlur: onBlur, onChange: onInputChange, min: _min, max: _max, step: deriveStep, defaultValue: value, status: status, rightAlign: rightAlign, small: small, ...props, type: "text" }) }));
     }
     return (jsx_runtime_1.jsx("button", { ref: ref, type: "button", className: '__remotion_input_dragger', style: exports.inputDraggerContainerStyle, onClick: onClick, onFocus: onFocus, onKeyDown: onKeyDown, onPointerDown: onPointerDown, children: jsx_runtime_1.jsx("span", { style: span, children: formatter(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;

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 }) => {
+    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 }) }));
 };
 exports.default = QuickSwitcher;

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

@@ -1,7 +1,12 @@
 import React from 'react';
+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;
 }>;