@remotion/cli 4.0.0-fastlambda.8 → 4.0.0-forcepublish.7

package/dist/editor/components/InitialCompositionLoader.js

@@ -0,0 +1,86 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.InitialCompositionLoader = exports.useSelectComposition = void 0;
+const react_1 = require("react");
+const remotion_1 = require("remotion");
+const folders_1 = require("../state/folders");
+const marks_1 = require("../state/marks");
+const timeline_zoom_1 = require("../state/timeline-zoom");
+const CompositionSelector_1 = require("./CompositionSelector");
+const FramePersistor_1 = require("./FramePersistor");
+const timeline_scroll_logic_1 = require("./Timeline/timeline-scroll-logic");
+const TimelineInOutToggle_1 = require("./TimelineInOutToggle");
+const ZoomPersistor_1 = require("./ZoomPersistor");
+const useSelectComposition = () => {
+    const setCurrentFrame = remotion_1.Internals.Timeline.useTimelineSetFrame();
+    const { setCurrentComposition } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
+    const { setFoldersExpanded } = (0, react_1.useContext)(folders_1.FolderContext);
+    const { setZoom } = (0, react_1.useContext)(timeline_zoom_1.TimelineZoomCtx);
+    return (c, push) => {
+        var _a;
+        (_a = TimelineInOutToggle_1.inOutHandles.current) === null || _a === void 0 ? void 0 : _a.setMarks((0, marks_1.loadMarks)(c.id, c.durationInFrames));
+        if (push) {
+            window.history.pushState({}, 'Preview', `/${c.id}`);
+        }
+        const frame = (0, FramePersistor_1.getFrameForComposition)(c.id);
+        const zoom = (0, ZoomPersistor_1.getZoomForComposition)(c.id);
+        const frameInBounds = Math.min(c.durationInFrames - 1, frame);
+        setCurrentFrame(frameInBounds);
+        setCurrentComposition(c.id);
+        setZoom(() => zoom);
+        setTimeout(() => {
+            (0, timeline_scroll_logic_1.ensureFrameIsInViewport)({
+                direction: 'center',
+                frame,
+                durationInFrames: c.durationInFrames,
+            });
+        });
+        const { folderName, parentFolderName } = c;
+        if (folderName !== null) {
+            setFoldersExpanded((ex) => {
+                const keysToExpand = (0, CompositionSelector_1.getKeysToExpand)(folderName, parentFolderName);
+                const newState = {
+                    ...ex,
+                };
+                for (const key of keysToExpand) {
+                    newState[key] = true;
+                }
+                return newState;
+            });
+        }
+    };
+};
+exports.useSelectComposition = useSelectComposition;
+const InitialCompositionLoader = () => {
+    const { compositions, currentComposition } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
+    const selectComposition = (0, exports.useSelectComposition)();
+    (0, react_1.useEffect)(() => {
+        if (currentComposition) {
+            return;
+        }
+        const compositionFromUrl = (0, FramePersistor_1.getCurrentCompositionFromUrl)();
+        if (compositionFromUrl) {
+            const exists = compositions.find((c) => c.id === compositionFromUrl);
+            if (exists) {
+                selectComposition(exists, true);
+                return;
+            }
+        }
+        if (compositions.length > 0) {
+            selectComposition(compositions[0], true);
+        }
+    }, [compositions, currentComposition, selectComposition]);
+    (0, react_1.useEffect)(() => {
+        const onchange = () => {
+            const newComp = window.location.pathname.substring(1);
+            const exists = compositions.find((c) => c.id === newComp);
+            if (exists) {
+                selectComposition(exists, false);
+            }
+        };
+        window.addEventListener('popstate', onchange);
+        return () => window.removeEventListener('popstate', onchange);
+    }, [compositions, selectComposition]);
+    return null;
+};
+exports.InitialCompositionLoader = InitialCompositionLoader;

package/dist/editor/components/KeyboardShortcutsModal.js

@@ -48,6 +48,6 @@ const KeyboardShortcuts = () => {
     const onQuit = (0, react_1.useCallback)(() => {
         setSelectedModal(null);
     }, [setSelectedModal]);
-    return ((0, jsx_runtime_1.jsxs)(ModalContainer_1.ModalContainer, { onEscape: onQuit, onOutsideClick: onQuit, children: [(0, jsx_runtime_1.jsx)(ModalHeader_1.NewCompHeader, { title: "Keyboard shortcuts" }, void 0), (0, jsx_runtime_1.jsxs)(layout_1.Row, { style: container, children: [(0, jsx_runtime_1.jsxs)(layout_1.Column, { children: [(0, jsx_runtime_1.jsx)("div", { style: title, children: "Playback" }, void 0), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsxs)("div", { style: left, children: [(0, jsx_runtime_1.jsx)("kbd", { style: key, children: (0, jsx_runtime_1.jsx)(keys_1.ShiftIcon, {}, void 0) }, void 0), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 0.3 }, void 0), (0, jsx_runtime_1.jsx)("kbd", { style: key, children: (0, jsx_runtime_1.jsx)(keys_1.ArrowLeft, {}, void 0) }, void 0)] }, void 0), (0, jsx_runtime_1.jsx)("div", { style: right, children: "1 second back" }, void 0)] }, void 0), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: left, children: (0, jsx_runtime_1.jsx)("kbd", { style: key, children: (0, jsx_runtime_1.jsx)(keys_1.ArrowLeft, {}, void 0) }, void 0) }, void 0), (0, jsx_runtime_1.jsx)("div", { style: right, children: "Previous frame" }, void 0)] }, void 0), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: left, children: (0, jsx_runtime_1.jsx)("kbd", { style: key, children: "Space" }, void 0) }, void 0), (0, jsx_runtime_1.jsx)("div", { style: right, children: "Play / Pause" }, void 0)] }, void 0), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: left, children: (0, jsx_runtime_1.jsx)("kbd", { style: key, children: (0, jsx_runtime_1.jsx)(keys_1.ArrowRight, {}, void 0) }, void 0) }, void 0), (0, jsx_runtime_1.jsx)("div", { style: right, children: "Next frame" }, void 0)] }, void 0), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsxs)("div", { style: left, children: [(0, jsx_runtime_1.jsx)("kbd", { style: key, children: (0, jsx_runtime_1.jsx)(keys_1.ShiftIcon, {}, void 0) }, void 0), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 0.3 }, void 0), (0, jsx_runtime_1.jsx)("kbd", { style: key, children: (0, jsx_runtime_1.jsx)(keys_1.ArrowRight, {}, void 0) }, void 0)] }, void 0), (0, jsx_runtime_1.jsx)("div", { style: right, children: "1 second forward" }, void 0)] }, void 0), (0, jsx_runtime_1.jsx)("br", {}, void 0), (0, jsx_runtime_1.jsx)("br", {}, void 0), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: left, children: (0, jsx_runtime_1.jsx)("kbd", { style: key, children: "J" }, void 0) }, void 0), (0, jsx_runtime_1.jsx)("div", { style: right, children: "Reverse playback" }, void 0)] }, void 0), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: left, children: (0, jsx_runtime_1.jsx)("kbd", { style: key, children: "K" }, void 0) }, void 0), (0, jsx_runtime_1.jsx)("div", { style: right, children: "Pause" }, void 0)] }, void 0), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: left, children: (0, jsx_runtime_1.jsx)("kbd", { style: key, children: "L" }, void 0) }, void 0), (0, jsx_runtime_1.jsx)("div", { style: right, children: "Play / Speed up" }, void 0)] }, void 0)] }, void 0), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 8 }, void 0), (0, jsx_runtime_1.jsxs)(layout_1.Column, { children: [(0, jsx_runtime_1.jsx)("div", { style: title, children: "Navigation" }, void 0), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: shortLeft, children: (0, jsx_runtime_1.jsx)("kbd", { style: key, children: "N" }, void 0) }, void 0), (0, jsx_runtime_1.jsx)("div", { style: right, children: "New composition" }, void 0)] }, void 0), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: shortLeft, children: (0, jsx_runtime_1.jsx)("kbd", { style: key, children: "T" }, void 0) }, void 0), (0, jsx_runtime_1.jsx)("div", { style: right, children: "Toggle checkerboard transparency" }, void 0)] }, void 0), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: shortLeft, children: (0, jsx_runtime_1.jsx)("kbd", { style: key, children: "?" }, void 0) }, void 0), (0, jsx_runtime_1.jsx)("div", { style: right, children: "Show keyboard shortcuts" }, void 0)] }, void 0), (0, jsx_runtime_1.jsx)("br", {}, void 0), (0, jsx_runtime_1.jsx)("div", { style: title, children: "Playback range" }, void 0), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: shortLeft, children: (0, jsx_runtime_1.jsx)("kbd", { style: key, children: "I" }, void 0) }, void 0), (0, jsx_runtime_1.jsx)("div", { style: right, children: "Set In Point" }, void 0)] }, void 0), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: shortLeft, children: (0, jsx_runtime_1.jsx)("kbd", { style: key, children: "O" }, void 0) }, void 0), (0, jsx_runtime_1.jsx)("div", { style: right, children: "Set Out Point" }, void 0)] }, void 0), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: shortLeft, children: (0, jsx_runtime_1.jsx)("kbd", { style: key, children: "X" }, void 0) }, void 0), (0, jsx_runtime_1.jsx)("div", { style: right, children: "Clear In/Out Points" }, void 0)] }, void 0)] }, void 0)] }, void 0)] }, void 0));
+    return ((0, jsx_runtime_1.jsxs)(ModalContainer_1.ModalContainer, { onEscape: onQuit, onOutsideClick: onQuit, children: [(0, jsx_runtime_1.jsx)(ModalHeader_1.NewCompHeader, { title: "Keyboard shortcuts" }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { style: container, children: [(0, jsx_runtime_1.jsxs)(layout_1.Column, { children: [(0, jsx_runtime_1.jsx)("div", { style: title, children: "Playback" }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsxs)("div", { style: left, children: [(0, jsx_runtime_1.jsx)("kbd", { style: key, children: (0, jsx_runtime_1.jsx)(keys_1.ShiftIcon, {}) }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 0.3 }), (0, jsx_runtime_1.jsx)("kbd", { style: key, children: (0, jsx_runtime_1.jsx)(keys_1.ArrowLeft, {}) })] }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "1 second back" })] }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: left, children: (0, jsx_runtime_1.jsx)("kbd", { style: key, children: (0, jsx_runtime_1.jsx)(keys_1.ArrowLeft, {}) }) }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "Previous frame" })] }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: left, children: (0, jsx_runtime_1.jsx)("kbd", { style: key, children: "Space" }) }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "Play / Pause" })] }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: left, children: (0, jsx_runtime_1.jsx)("kbd", { style: key, children: (0, jsx_runtime_1.jsx)(keys_1.ArrowRight, {}) }) }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "Next frame" })] }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsxs)("div", { style: left, children: [(0, jsx_runtime_1.jsx)("kbd", { style: key, children: (0, jsx_runtime_1.jsx)(keys_1.ShiftIcon, {}) }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 0.3 }), (0, jsx_runtime_1.jsx)("kbd", { style: key, children: (0, jsx_runtime_1.jsx)(keys_1.ArrowRight, {}) })] }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "1 second forward" })] }), (0, jsx_runtime_1.jsx)("br", {}), (0, jsx_runtime_1.jsx)("br", {}), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: left, children: (0, jsx_runtime_1.jsx)("kbd", { style: key, children: "A" }) }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "Jump to beginning" })] }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: left, children: (0, jsx_runtime_1.jsx)("kbd", { style: key, children: "E" }) }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "Jump to end" })] }), (0, jsx_runtime_1.jsx)("br", {}), (0, jsx_runtime_1.jsx)("br", {}), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: left, children: (0, jsx_runtime_1.jsx)("kbd", { style: key, children: "J" }) }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "Reverse playback" })] }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: left, children: (0, jsx_runtime_1.jsx)("kbd", { style: key, children: "K" }) }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "Pause" })] }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: left, children: (0, jsx_runtime_1.jsx)("kbd", { style: key, children: "L" }) }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "Play / Speed up" })] }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: left, children: (0, jsx_runtime_1.jsx)("kbd", { style: key, children: "Enter" }) }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "Pause & return to playback start" })] })] }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 8 }), (0, jsx_runtime_1.jsxs)(layout_1.Column, { children: [(0, jsx_runtime_1.jsx)("div", { style: title, children: "Navigation" }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: shortLeft, children: (0, jsx_runtime_1.jsx)("kbd", { style: key, children: "N" }) }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "New composition" })] }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: shortLeft, children: (0, jsx_runtime_1.jsx)("kbd", { style: key, children: "T" }) }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "Toggle checkerboard transparency" })] }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: shortLeft, children: (0, jsx_runtime_1.jsx)("kbd", { style: key, children: "?" }) }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "Show keyboard shortcuts" })] }), (0, jsx_runtime_1.jsx)("br", {}), (0, jsx_runtime_1.jsx)("div", { style: title, children: "Playback range" }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: shortLeft, children: (0, jsx_runtime_1.jsx)("kbd", { style: key, children: "I" }) }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "Set In Point" })] }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: shortLeft, children: (0, jsx_runtime_1.jsx)("kbd", { style: key, children: "O" }) }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "Set Out Point" })] }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: shortLeft, children: (0, jsx_runtime_1.jsx)("kbd", { style: key, children: "X" }) }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "Clear In/Out Points" })] })] })] })] }));
 };
 exports.KeyboardShortcuts = KeyboardShortcuts;

package/dist/editor/components/LoopToggle.js

@@ -18,6 +18,6 @@ const LoopToggle = ({ loop, setLoop }) => {
     if (isStill) {
         return null;
     }
-    return ((0, jsx_runtime_1.jsx)(ControlButton_1.ControlButton, { title: accessibilityLabel, "aria-label": accessibilityLabel, onClick: onClick, children: (0, jsx_runtime_1.jsx)("svg", { viewBox: "0 0 512 512", style: { width: 18, height: 18 }, children: (0, jsx_runtime_1.jsx)("path", { fill: loop ? 'var(--blue)' : 'white', d: "M493.544 181.463c11.956 22.605 18.655 48.4 18.452 75.75C511.339 345.365 438.56 416 350.404 416H192v47.495c0 22.475-26.177 32.268-40.971 17.475l-80-80c-9.372-9.373-9.372-24.569 0-33.941l80-80C166.138 271.92 192 282.686 192 304v48h158.875c52.812 0 96.575-42.182 97.12-94.992.155-15.045-3.17-29.312-9.218-42.046-4.362-9.185-2.421-20.124 4.8-27.284 4.745-4.706 8.641-8.555 11.876-11.786 11.368-11.352 30.579-8.631 38.091 5.571zM64.005 254.992c.545-52.81 44.308-94.992 97.12-94.992H320v47.505c0 22.374 26.121 32.312 40.971 17.465l80-80c9.372-9.373 9.372-24.569 0-33.941l-80-80C346.014 16.077 320 26.256 320 48.545V96H161.596C73.44 96 .661 166.635.005 254.788c-.204 27.35 6.495 53.145 18.452 75.75 7.512 14.202 26.723 16.923 38.091 5.57 3.235-3.231 7.13-7.08 11.876-11.786 7.22-7.16 9.162-18.098 4.8-27.284-6.049-12.735-9.374-27.001-9.219-42.046z" }, void 0) }, void 0) }, void 0));
+    return ((0, jsx_runtime_1.jsx)(ControlButton_1.ControlButton, { title: accessibilityLabel, "aria-label": accessibilityLabel, onClick: onClick, children: (0, jsx_runtime_1.jsx)("svg", { viewBox: "0 0 512 512", style: { width: 18, height: 18 }, children: (0, jsx_runtime_1.jsx)("path", { fill: loop ? 'var(--blue)' : 'white', d: "M493.544 181.463c11.956 22.605 18.655 48.4 18.452 75.75C511.339 345.365 438.56 416 350.404 416H192v47.495c0 22.475-26.177 32.268-40.971 17.475l-80-80c-9.372-9.373-9.372-24.569 0-33.941l80-80C166.138 271.92 192 282.686 192 304v48h158.875c52.812 0 96.575-42.182 97.12-94.992.155-15.045-3.17-29.312-9.218-42.046-4.362-9.185-2.421-20.124 4.8-27.284 4.745-4.706 8.641-8.555 11.876-11.786 11.368-11.352 30.579-8.631 38.091 5.571zM64.005 254.992c.545-52.81 44.308-94.992 97.12-94.992H320v47.505c0 22.374 26.121 32.312 40.971 17.465l80-80c9.372-9.373 9.372-24.569 0-33.941l-80-80C346.014 16.077 320 26.256 320 48.545V96H161.596C73.44 96 .661 166.635.005 254.788c-.204 27.35 6.495 53.145 18.452 75.75 7.512 14.202 26.723 16.923 38.091 5.57 3.235-3.231 7.13-7.08 11.876-11.786 7.22-7.16 9.162-18.098 4.8-27.284-6.049-12.735-9.374-27.001-9.219-42.046z" }) }) }));
 };
 exports.LoopToggle = LoopToggle;

package/dist/editor/components/Menu/MenuDivider.js

@@ -10,6 +10,6 @@ const menuDivider = {
     backgroundColor: colors_1.INPUT_BORDER_COLOR_HOVERED,
 };
 const MenuDivider = () => {
-    return (0, jsx_runtime_1.jsx)("div", { style: menuDivider }, void 0);
+    return (0, jsx_runtime_1.jsx)("div", { style: menuDivider });
 };
 exports.MenuDivider = MenuDivider;

package/dist/editor/components/Menu/MenuItem.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
-import { ComboboxValue } from '../NewComposition/ComboBox';
-export declare type MenuId = 'remotion' | 'file' | 'view' | 'help';
+import type { ComboboxValue } from '../NewComposition/ComboBox';
+export declare type MenuId = 'remotion' | 'file' | 'view' | 'tools' | 'help';
 export declare type Menu = {
     id: MenuId;
     label: React.ReactNode;

package/dist/editor/components/Menu/MenuItem.js

@@ -46,7 +46,7 @@ const MenuItem = ({ label: itemName, selected, id, onItemSelected, onItemHovered
             return null;
         }
         return {
-            ...styles_1.menuContainer,
+            ...styles_1.menuContainerTowardsBottom,
             left: size.left,
             top: size.top + size.height,
         };
@@ -69,8 +69,8 @@ const MenuItem = ({ label: itemName, selected, id, onItemSelected, onItemHovered
             top: ((_a = size === null || size === void 0 ? void 0 : size.top) !== null && _a !== void 0 ? _a : 0) + ((_b = size === null || size === void 0 ? void 0 : size.height) !== null && _b !== void 0 ? _b : 0),
         };
     }, [size]);
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("button", { ref: ref, role: "button", tabIndex: tabIndex, onPointerEnter: onPointerEnter, onPointerLeave: onPointerLeave, onClick: onClick, style: containerStyle, type: "button", children: itemName }, void 0), portalStyle
-                ? react_dom_1.default.createPortal((0, jsx_runtime_1.jsx)("div", { className: "css-reset", style: outerStyle, children: (0, jsx_runtime_1.jsx)(z_index_1.HigherZIndex, { onEscape: onItemQuit, onOutsideClick: onItemQuit, children: (0, jsx_runtime_1.jsx)("div", { style: portalStyle, children: (0, jsx_runtime_1.jsx)(MenuContent_1.MenuContent, { onNextMenu: onPreviousMenu, onPreviousMenu: onNextMenu, values: menu.items, onHide: onItemQuit, leaveLeftSpace: menu.leaveLeftPadding, preselectIndex: false, topItemCanBeUnselected: true }, void 0) }, void 0) }, void 0) }, void 0), (0, portals_1.getPortal)(currentZIndex))
-                : null] }, void 0));
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("button", { ref: ref, role: "button", tabIndex: tabIndex, onPointerEnter: onPointerEnter, onPointerLeave: onPointerLeave, onClick: onClick, style: containerStyle, type: "button", children: itemName }), portalStyle
+                ? react_dom_1.default.createPortal((0, jsx_runtime_1.jsx)("div", { className: "css-reset", style: outerStyle, children: (0, jsx_runtime_1.jsx)(z_index_1.HigherZIndex, { onEscape: onItemQuit, onOutsideClick: onItemQuit, children: (0, jsx_runtime_1.jsx)("div", { style: portalStyle, children: (0, jsx_runtime_1.jsx)(MenuContent_1.MenuContent, { onNextMenu: onPreviousMenu, onPreviousMenu: onNextMenu, values: menu.items, onHide: onItemQuit, leaveLeftSpace: menu.leaveLeftPadding, preselectIndex: false, topItemCanBeUnselected: true }) }) }) }), (0, portals_1.getPortal)(currentZIndex))
+                : null] }));
 };
 exports.MenuItem = MenuItem;

package/dist/editor/components/Menu/MenuSubItem.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { SubMenu } from '../NewComposition/ComboBox';
+import type { SubMenu } from '../NewComposition/ComboBox';
 export declare const MENU_SUBMENU_BUTTON_CLASS_NAME = "remotion-submenu-button";
 export declare type SubMenuActivated = false | 'with-mouse' | 'without-mouse';
 export declare const MenuSubItem: React.FC<{

package/dist/editor/components/Menu/MenuSubItem.js

@@ -70,7 +70,7 @@ const MenuSubItem = ({ label, leaveLeftSpace, leftItem, onActionChosen, id, sele
             return null;
         }
         return {
-            ...styles_1.menuContainer,
+            ...styles_1.menuContainerTowardsBottom,
             left: size.left + size.width + styles_1.SUBMENU_LEFT_INSET,
             top: size.top - styles_1.MENU_VERTICAL_PADDING,
         };
@@ -84,8 +84,8 @@ const MenuSubItem = ({ label, leaveLeftSpace, leftItem, onActionChosen, id, sele
         }, 100);
         return () => clearTimeout(hi);
     }, [hovered, selected, setSubMenuActivated, subMenu]);
-    return ((0, jsx_runtime_1.jsx)("div", { ref: ref, onPointerEnter: onPointerEnter, onPointerLeave: onPointerLeave, style: style, onClick: onClick, children: (0, jsx_runtime_1.jsxs)(layout_1.Row, { children: [leaveLeftSpace ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { style: leftSpace, children: leftItem }, void 0), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 1 }, void 0)] }, void 0)) : null, (0, jsx_runtime_1.jsx)("div", { style: labelStyle, children: label }, void 0), " ", (0, jsx_runtime_1.jsx)(layout_1.Flex, {}, void 0), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 2 }, void 0), subMenu ? (0, jsx_runtime_1.jsx)(caret_1.Caret, {}, void 0) : null, keyHint ? (0, jsx_runtime_1.jsx)("span", { style: keyHintCss, children: keyHint }, void 0) : null, portalStyle && subMenu
-                    ? react_dom_1.default.createPortal((0, jsx_runtime_1.jsx)(SubMenu_1.SubMenuComponent, { onQuitFullMenu: onQuitMenu, subMenu: subMenu, onQuitSubMenu: onQuitSubmenu, portalStyle: portalStyle, subMenuActivated: subMenuActivated }, void 0), (0, portals_1.getPortal)(currentZIndex))
-                    : null] }, void 0) }, void 0));
+    return ((0, jsx_runtime_1.jsx)("div", { ref: ref, onPointerEnter: onPointerEnter, onPointerLeave: onPointerLeave, style: style, onClick: onClick, children: (0, jsx_runtime_1.jsxs)(layout_1.Row, { children: [leaveLeftSpace ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { style: leftSpace, children: leftItem }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 1 })] })) : null, (0, jsx_runtime_1.jsx)("div", { style: labelStyle, children: label }), " ", (0, jsx_runtime_1.jsx)(layout_1.Flex, {}), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 2 }), subMenu ? (0, jsx_runtime_1.jsx)(caret_1.CaretRight, {}) : null, keyHint ? (0, jsx_runtime_1.jsx)("span", { style: keyHintCss, children: keyHint }) : null, portalStyle && subMenu
+                    ? react_dom_1.default.createPortal((0, jsx_runtime_1.jsx)(SubMenu_1.SubMenuComponent, { onQuitFullMenu: onQuitMenu, subMenu: subMenu, onQuitSubMenu: onQuitSubmenu, portalStyle: portalStyle, subMenuActivated: subMenuActivated }), (0, portals_1.getPortal)(currentZIndex))
+                    : null] }) }));
 };
 exports.MenuSubItem = MenuSubItem;

package/dist/editor/components/Menu/SubMenu.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
-import { SubMenu } from '../NewComposition/ComboBox';
-import { SubMenuActivated } from './MenuSubItem';
+import type { SubMenu } from '../NewComposition/ComboBox';
+import type { SubMenuActivated } from './MenuSubItem';
 export declare const SubMenuComponent: React.FC<{
     portalStyle: React.CSSProperties;
     subMenu: SubMenu;

package/dist/editor/components/Menu/SubMenu.js

@@ -9,6 +9,6 @@ const SubMenuComponent = ({ portalStyle, subMenuActivated, subMenu, onQuitFullMe
     return ((0, jsx_runtime_1.jsx)(z_index_1.HigherZIndex, { onEscape: onQuitFullMenu, onOutsideClick: noop_1.noop, children: (0, jsx_runtime_1.jsx)("div", { style: portalStyle, className: "css-reset", children: (0, jsx_runtime_1.jsx)(MenuContent_1.MenuContent, { onNextMenu: noop_1.noop, onPreviousMenu: onQuitSubMenu, values: subMenu.items, onHide: noop_1.noop, leaveLeftSpace: subMenu.leaveLeftSpace, preselectIndex: subMenuActivated === 'without-mouse' &&
                     typeof subMenu.preselectIndex === 'number'
                     ? subMenu.preselectIndex
-                    : false, topItemCanBeUnselected: false }, void 0) }, void 0) }, void 0));
+                    : false, topItemCanBeUnselected: false }) }) }));
 };
 exports.SubMenuComponent = SubMenuComponent;

package/dist/editor/components/Menu/styles.d.ts

@@ -1,5 +1,6 @@
-/// <reference types="react" />
+import type React from 'react';
 export declare const MENU_VERTICAL_PADDING = 4;
 export declare const SUBMENU_LEFT_INSET = -8;
-export declare const menuContainer: React.CSSProperties;
+export declare const menuContainerTowardsBottom: React.CSSProperties;
+export declare const menuContainerTowardsTop: React.CSSProperties;
 export declare const outerPortal: React.CSSProperties;

package/dist/editor/components/Menu/styles.js

@@ -1,17 +1,24 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.outerPortal = exports.menuContainer = exports.SUBMENU_LEFT_INSET = exports.MENU_VERTICAL_PADDING = void 0;
+exports.outerPortal = exports.menuContainerTowardsTop = exports.menuContainerTowardsBottom = exports.SUBMENU_LEFT_INSET = exports.MENU_VERTICAL_PADDING = void 0;
 const colors_1 = require("../../helpers/colors");
 exports.MENU_VERTICAL_PADDING = 4;
 exports.SUBMENU_LEFT_INSET = -8;
-exports.menuContainer = {
+const menuContainer = {
     backgroundColor: colors_1.BACKGROUND,
     position: 'fixed',
-    boxShadow: '0 2px 8px rgba(0, 0, 0, 0.5)',
     color: 'white',
     userSelect: 'none',
     minWidth: 200,
 };
+exports.menuContainerTowardsBottom = {
+    ...menuContainer,
+    boxShadow: '0 2px 8px rgba(0, 0, 0, 0.5)',
+};
+exports.menuContainerTowardsTop = {
+    ...menuContainer,
+    boxShadow: '0 -2px 8px rgba(0, 0, 0, 0.5)',
+};
 exports.outerPortal = {
     position: 'fixed',
     height: '100%',

package/dist/editor/components/MenuBuildIndicator.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const MenuBuildIndicator: React.FC;

package/dist/editor/components/MenuBuildIndicator.js

@@ -0,0 +1,26 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MenuBuildIndicator = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const cwd = {
+    fontSize: 13,
+    opacity: 0.8,
+};
+const MenuBuildIndicator = () => {
+    const [isBuilding, setIsBuilding] = (0, react_1.useState)(false);
+    (0, react_1.useEffect)(() => {
+        window.remotion_isBuilding = () => {
+            setIsBuilding(true);
+        };
+        window.remotion_finishedBuilding = () => {
+            setIsBuilding(false);
+        };
+        return () => {
+            window.remotion_isBuilding = undefined;
+            window.remotion_finishedBuilding = undefined;
+        };
+    }, []);
+    return ((0, jsx_runtime_1.jsx)("div", { style: cwd, title: window.remotion_cwd, children: isBuilding ? 'Building...' : window.remotion_projectName }));
+};
+exports.MenuBuildIndicator = MenuBuildIndicator;

package/dist/editor/components/MenuToolbar.js

@@ -3,14 +3,19 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.MenuToolbar = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
+const remotion_1 = require("remotion");
+const colors_1 = require("../helpers/colors");
+const pick_color_1 = require("../helpers/pick-color");
 const Checkmark_1 = require("../icons/Checkmark");
 const checkerboard_1 = require("../state/checkerboard");
 const modals_1 = require("../state/modals");
 const preview_size_1 = require("../state/preview-size");
 const rich_timeline_1 = require("../state/rich-timeline");
+const sidebar_1 = require("../state/sidebar");
 const timeline_ref_1 = require("../state/timeline-ref");
 const layout_1 = require("./layout");
 const MenuItem_1 = require("./Menu/MenuItem");
+const MenuBuildIndicator_1 = require("./MenuBuildIndicator");
 const SizeSelector_1 = require("./SizeSelector");
 const TimelineInOutToggle_1 = require("./TimelineInOutToggle");
 const UpdateCheck_1 = require("./UpdateCheck");
@@ -23,14 +28,11 @@ const row = {
     fontSize: 13,
     paddingLeft: 6,
     paddingRight: 10,
+    backgroundColor: colors_1.BACKGROUND,
 };
 const flex = {
     flex: 1,
 };
-const cwd = {
-    fontSize: 13,
-    opacity: 0.8,
-};
 const openExternal = (link) => {
     window.open(link, '_blank');
 };
@@ -44,6 +46,7 @@ const MenuToolbar = () => {
     const { checkerboard, setCheckerboard } = (0, react_1.useContext)(checkerboard_1.CheckerboardContext);
     const { richTimeline, setRichTimeline } = (0, react_1.useContext)(rich_timeline_1.RichTimelineContext);
     const { size, setSize } = (0, react_1.useContext)(preview_size_1.PreviewSizeContext);
+    const { setSidebarCollapsedState, sidebarCollapsedState } = (0, react_1.useContext)(sidebar_1.SidebarContext);
     const itemClicked = (0, react_1.useCallback)((itemId) => {
         setSelected(itemId);
     }, [setSelected]);
@@ -56,10 +59,10 @@ const MenuToolbar = () => {
         setSelected(null);
     }, []);
     const structure = (0, react_1.useMemo)(() => {
-        return [
+        const struct = [
             {
                 id: 'remotion',
-                label: ((0, jsx_runtime_1.jsx)(layout_1.Row, { align: "center", justify: "center", children: (0, jsx_runtime_1.jsx)("svg", { width: ICON_SIZE, height: ICON_SIZE, viewBox: "-100 -100 400 400", style: rotate, children: (0, jsx_runtime_1.jsx)("path", { fill: "#fff", stroke: "#fff", strokeWidth: "100", strokeLinejoin: "round", d: "M 2 172 a 196 100 0 0 0 195 5 A 196 240 0 0 0 100 2.259 A 196 240 0 0 0 2 172 z" }, void 0) }, void 0) }, void 0)),
+                label: ((0, jsx_runtime_1.jsx)(layout_1.Row, { align: "center", justify: "center", children: (0, jsx_runtime_1.jsx)("svg", { width: ICON_SIZE, height: ICON_SIZE, viewBox: "-100 -100 400 400", style: rotate, children: (0, jsx_runtime_1.jsx)("path", { fill: "#fff", stroke: "#fff", strokeWidth: "100", strokeLinejoin: "round", d: "M 2 172 a 196 100 0 0 0 195 5 A 196 240 0 0 0 100 2.259 A 196 240 0 0 0 2 172 z" }) }) })),
                 leaveLeftPadding: false,
                 items: [
                     {
@@ -162,7 +165,7 @@ const MenuToolbar = () => {
                                 id: String(newSize),
                                 keyHint: null,
                                 label: (0, SizeSelector_1.getPreviewSizeLabel)(newSize),
-                                leftItem: String(newSize) === String(size) ? (0, jsx_runtime_1.jsx)(Checkmark_1.Checkmark, {}, void 0) : null,
+                                leftItem: String(newSize) === String(size) ? (0, jsx_runtime_1.jsx)(Checkmark_1.Checkmark, {}) : null,
                                 onClick: () => {
                                     close();
                                     setSize(() => newSize);
@@ -173,6 +176,65 @@ const MenuToolbar = () => {
                             })),
                         },
                     },
+                    {
+                        id: 'timeline-divider',
+                        type: 'divider',
+                    },
+                    {
+                        id: 'left-sidebar',
+                        label: 'Sidebar',
+                        keyHint: null,
+                        type: 'item',
+                        value: 'preview-size',
+                        leftItem: null,
+                        subMenu: {
+                            leaveLeftSpace: true,
+                            preselectIndex: 0,
+                            items: [
+                                {
+                                    id: 'sidebar-responsive',
+                                    keyHint: null,
+                                    label: 'Responsive',
+                                    leftItem: sidebarCollapsedState === 'responsive' ? ((0, jsx_runtime_1.jsx)(Checkmark_1.Checkmark, {})) : null,
+                                    onClick: () => {
+                                        setSidebarCollapsedState('responsive');
+                                    },
+                                    subMenu: null,
+                                    type: 'item',
+                                    value: 'responsive',
+                                },
+                                {
+                                    id: 'sidebar-expanded',
+                                    keyHint: null,
+                                    label: 'Expanded',
+                                    leftItem: sidebarCollapsedState === 'expanded' ? (0, jsx_runtime_1.jsx)(Checkmark_1.Checkmark, {}) : null,
+                                    onClick: () => {
+                                        setSidebarCollapsedState('expanded');
+                                    },
+                                    subMenu: null,
+                                    type: 'item',
+                                    value: 'expanded',
+                                },
+                                {
+                                    id: 'sidebar-collapsed',
+                                    keyHint: null,
+                                    label: 'Collapsed',
+                                    leftItem: sidebarCollapsedState === 'collapsed' ? ((0, jsx_runtime_1.jsx)(Checkmark_1.Checkmark, {})) : null,
+                                    onClick: () => {
+                                        setSidebarCollapsedState('collapsed');
+                                    },
+                                    subMenu: null,
+                                    type: 'item',
+                                    value: 'collapsed',
+                                },
+                            ],
+                        },
+                        onClick: () => undefined,
+                    },
+                    {
+                        id: 'timeline-divider',
+                        type: 'divider',
+                    },
                     {
                         id: 'checkerboard',
                         keyHint: 'T',
@@ -183,7 +245,7 @@ const MenuToolbar = () => {
                         },
                         type: 'item',
                         value: 'checkerboard',
-                        leftItem: checkerboard ? (0, jsx_runtime_1.jsx)(Checkmark_1.Checkmark, {}, void 0) : null,
+                        leftItem: checkerboard ? (0, jsx_runtime_1.jsx)(Checkmark_1.Checkmark, {}) : null,
                         subMenu: null,
                     },
                     {
@@ -200,7 +262,7 @@ const MenuToolbar = () => {
                         },
                         type: 'item',
                         value: 'rich-timeline',
-                        leftItem: richTimeline ? (0, jsx_runtime_1.jsx)(Checkmark_1.Checkmark, {}, void 0) : null,
+                        leftItem: richTimeline ? (0, jsx_runtime_1.jsx)(Checkmark_1.Checkmark, {}) : null,
                         subMenu: null,
                     },
                     {
@@ -279,6 +341,25 @@ const MenuToolbar = () => {
                     },
                 ],
             },
+            'EyeDropper' in window
+                ? {
+                    id: 'tools',
+                    label: 'Tools',
+                    leaveLeftPadding: false,
+                    items: [
+                        {
+                            id: 'color-picker',
+                            value: 'color-picker',
+                            label: 'Color Picker',
+                            onClick: () => (0, pick_color_1.pickColor)(),
+                            leftItem: null,
+                            keyHint: null,
+                            subMenu: null,
+                            type: 'item',
+                        },
+                    ],
+                }
+                : null,
             {
                 id: 'help',
                 label: 'Help',
@@ -383,7 +464,8 @@ const MenuToolbar = () => {
                     },
                 ],
             },
-        ];
+        ].filter(remotion_1.Internals.truthy);
+        return struct;
     }, [
         checkerboard,
         close,
@@ -391,7 +473,9 @@ const MenuToolbar = () => {
         setCheckerboard,
         setRichTimeline,
         setSelectedModal,
+        setSidebarCollapsedState,
         setSize,
+        sidebarCollapsedState,
         size,
     ]);
     const menus = (0, react_1.useMemo)(() => {
@@ -421,6 +505,6 @@ const MenuToolbar = () => {
     }, [setSelected]);
     return ((0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", className: "css-reset", style: row, children: [structure.map((s) => {
                 return ((0, 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));
-            }), (0, jsx_runtime_1.jsx)(UpdateCheck_1.UpdateCheck, {}, void 0), (0, jsx_runtime_1.jsx)("div", { style: flex }, void 0), (0, jsx_runtime_1.jsx)("div", { style: cwd, title: window.remotion_cwd, children: window.remotion_projectName }, void 0)] }, void 0));
+            }), (0, jsx_runtime_1.jsx)(UpdateCheck_1.UpdateCheck, {}), (0, jsx_runtime_1.jsx)("div", { style: flex }), (0, jsx_runtime_1.jsx)(MenuBuildIndicator_1.MenuBuildIndicator, {})] }));
 };
 exports.MenuToolbar = MenuToolbar;

package/dist/editor/components/ModalContainer.js

@@ -20,6 +20,6 @@ const panel = {
     color: 'white',
 };
 const ModalContainer = ({ children, onEscape, onOutsideClick }) => {
-    return ((0, jsx_runtime_1.jsx)("div", { className: "css-reset", style: backgroundOverlay, role: "dialog", "aria-modal": "true", children: (0, jsx_runtime_1.jsx)(z_index_1.HigherZIndex, { onOutsideClick: onOutsideClick, onEscape: onEscape, children: (0, jsx_runtime_1.jsx)("div", { style: panel, children: children }, void 0) }, void 0) }, void 0));
+    return ((0, jsx_runtime_1.jsx)("div", { className: "css-reset", style: backgroundOverlay, role: "dialog", "aria-modal": "true", children: (0, jsx_runtime_1.jsx)(z_index_1.HigherZIndex, { onOutsideClick: onOutsideClick, onEscape: onEscape, children: (0, jsx_runtime_1.jsx)("div", { style: panel, children: children }) }) }));
 };
 exports.ModalContainer = ModalContainer;

package/dist/editor/components/ModalHeader.js

@@ -23,6 +23,6 @@ const NewCompHeader = ({ title }) => {
     const onPress = (0, react_1.useCallback)(() => {
         setSelectedModal(null);
     }, [setSelectedModal]);
-    return ((0, jsx_runtime_1.jsxs)("div", { style: container, children: [(0, jsx_runtime_1.jsx)("div", { children: title }, void 0), (0, jsx_runtime_1.jsx)(layout_1.Flex, {}, void 0), (0, jsx_runtime_1.jsx)(CancelButton_1.CancelButton, { style: icon, onPress: onPress }, void 0)] }, void 0));
+    return ((0, jsx_runtime_1.jsxs)("div", { style: container, children: [(0, jsx_runtime_1.jsx)("div", { children: title }), (0, jsx_runtime_1.jsx)(layout_1.Flex, {}), (0, jsx_runtime_1.jsx)(CancelButton_1.CancelButton, { style: icon, onPress: onPress })] }));
 };
 exports.NewCompHeader = NewCompHeader;

package/dist/editor/components/MuteToggle.js

@@ -19,6 +19,6 @@ const MuteToggle = ({ muted, setMuted }) => {
     if (isStill) {
         return null;
     }
-    return ((0, jsx_runtime_1.jsx)(ControlButton_1.ControlButton, { title: accessibilityLabel, "aria-label": accessibilityLabel, onClick: onClick, children: muted ? (0, jsx_runtime_1.jsx)(media_volume_1.VolumeOffIcon, {}, void 0) : (0, jsx_runtime_1.jsx)(media_volume_1.VolumeOnIcon, {}, void 0) }, void 0));
+    return ((0, jsx_runtime_1.jsx)(ControlButton_1.ControlButton, { title: accessibilityLabel, "aria-label": accessibilityLabel, onClick: onClick, children: muted ? (0, jsx_runtime_1.jsx)(media_volume_1.VolumeOffIcon, {}) : (0, jsx_runtime_1.jsx)(media_volume_1.VolumeOnIcon, {}) }));
 };
 exports.MuteToggle = MuteToggle;

package/dist/editor/components/NewComposition/CancelButton.d.ts

@@ -1,4 +1,5 @@
-import React, { SVGProps } from 'react';
+import type { SVGProps } from 'react';
+import React from 'react';
 export declare const CancelButton: React.FC<SVGProps<SVGSVGElement> & {
     onPress: () => void;
 }>;

package/dist/editor/components/NewComposition/CancelButton.js

@@ -12,6 +12,6 @@ const style = {
 };
 const CancelButton = ({ onPress, ...props }) => {
     const { tabIndex } = (0, z_index_1.useZIndex)();
-    return ((0, jsx_runtime_1.jsx)("button", { tabIndex: tabIndex, style: style, type: "button", onClick: onPress, children: (0, jsx_runtime_1.jsx)("svg", { viewBox: "0 0 320 512", ...props, children: (0, jsx_runtime_1.jsx)("path", { fill: "currentColor", d: "M207.6 256l107.72-107.72c6.23-6.23 6.23-16.34 0-22.58l-25.03-25.03c-6.23-6.23-16.34-6.23-22.58 0L160 208.4 52.28 100.68c-6.23-6.23-16.34-6.23-22.58 0L4.68 125.7c-6.23 6.23-6.23 16.34 0 22.58L112.4 256 4.68 363.72c-6.23 6.23-6.23 16.34 0 22.58l25.03 25.03c6.23 6.23 16.34 6.23 22.58 0L160 303.6l107.72 107.72c6.23 6.23 16.34 6.23 22.58 0l25.03-25.03c6.23-6.23 6.23-16.34 0-22.58L207.6 256z" }, void 0) }, void 0) }, void 0));
+    return ((0, jsx_runtime_1.jsx)("button", { tabIndex: tabIndex, style: style, type: "button", onClick: onPress, children: (0, jsx_runtime_1.jsx)("svg", { viewBox: "0 0 320 512", ...props, children: (0, jsx_runtime_1.jsx)("path", { fill: "currentColor", d: "M207.6 256l107.72-107.72c6.23-6.23 6.23-16.34 0-22.58l-25.03-25.03c-6.23-6.23-16.34-6.23-22.58 0L160 208.4 52.28 100.68c-6.23-6.23-16.34-6.23-22.58 0L4.68 125.7c-6.23 6.23-6.23 16.34 0 22.58L112.4 256 4.68 363.72c-6.23 6.23-6.23 16.34 0 22.58l25.03 25.03c6.23 6.23 16.34 6.23 22.58 0L160 303.6l107.72 107.72c6.23 6.23 16.34 6.23 22.58 0l25.03-25.03c6.23-6.23 6.23-16.34 0-22.58L207.6 256z" }) }) }));
 };
 exports.CancelButton = CancelButton;

package/dist/editor/components/NewComposition/ComboBox.js

@@ -60,10 +60,20 @@ const Combobox = ({ values, selectedId, style: customStyle, title }) => {
         if (!opened || !size) {
             return null;
         }
+        const spaceToBottom = size.windowSize.height - (size.top + size.height);
+        const spaceToTop = size.top;
+        const layout = spaceToTop > spaceToBottom ? 'bottom' : 'top';
         return {
-            ...styles_1.menuContainer,
+            ...(layout === 'top'
+                ? {
+                    ...styles_1.menuContainerTowardsBottom,
+                    top: size.top + size.height,
+                }
+                : {
+                    ...styles_1.menuContainerTowardsTop,
+                    bottom: size.windowSize.height - size.top,
+                }),
             left: size.left,
-            top: size.top + size.height,
         };
     }, [opened, size]);
     const selected = values.find((v) => v.id === selectedId);
@@ -83,8 +93,8 @@ const Combobox = ({ values, selectedId, style: customStyle, title }) => {
                     : colors_1.INPUT_BORDER_COLOR_UNHOVERED,
         };
     }, [customStyle, hovered, opened]);
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("button", { ref: ref, title: title, tabIndex: tabIndex, type: "button", style: style, children: [selected.label, " ", (0, jsx_runtime_1.jsx)(layout_1.Flex, {}, void 0), " ", (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 1 }, void 0), " ", (0, jsx_runtime_1.jsx)(caret_1.CaretDown, {}, void 0)] }, void 0), portalStyle
-                ? react_dom_1.default.createPortal((0, jsx_runtime_1.jsx)("div", { style: styles_1.outerPortal, className: "css-reset", children: (0, jsx_runtime_1.jsx)(z_index_1.HigherZIndex, { onOutsideClick: onHide, onEscape: onHide, children: (0, jsx_runtime_1.jsx)("div", { style: portalStyle, children: (0, jsx_runtime_1.jsx)(MenuContent_1.MenuContent, { onNextMenu: noop_1.noop, onPreviousMenu: noop_1.noop, values: values, onHide: onHide, leaveLeftSpace: true, preselectIndex: values.findIndex((v) => v.id === selected.id), topItemCanBeUnselected: false }, void 0) }, void 0) }, void 0) }, void 0), (0, portals_1.getPortal)(currentZIndex))
-                : null] }, void 0));
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("button", { ref: ref, title: title, tabIndex: tabIndex, type: "button", style: style, children: [selected.label, " ", (0, jsx_runtime_1.jsx)(layout_1.Flex, {}), " ", (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 1 }), " ", (0, jsx_runtime_1.jsx)(caret_1.CaretDown, {})] }), portalStyle
+                ? react_dom_1.default.createPortal((0, jsx_runtime_1.jsx)("div", { style: styles_1.outerPortal, className: "css-reset", children: (0, jsx_runtime_1.jsx)(z_index_1.HigherZIndex, { onOutsideClick: onHide, onEscape: onHide, children: (0, jsx_runtime_1.jsx)("div", { style: portalStyle, children: (0, jsx_runtime_1.jsx)(MenuContent_1.MenuContent, { onNextMenu: noop_1.noop, onPreviousMenu: noop_1.noop, values: values, onHide: onHide, leaveLeftSpace: true, preselectIndex: values.findIndex((v) => v.id === selected.id), topItemCanBeUnselected: false }) }) }) }), (0, portals_1.getPortal)(currentZIndex))
+                : null] }));
 };
 exports.Combobox = Combobox;

package/dist/editor/components/NewComposition/CopyHint.js

@@ -24,6 +24,6 @@ const CopyHint = () => {
     if (!projectInfo || !projectInfo.videoFile) {
         return null;
     }
-    return ((0, jsx_runtime_1.jsxs)("div", { style: style, children: ["Copy this into ", (0, jsx_runtime_1.jsx)("br", {}, void 0), " your", ' ', (0, jsx_runtime_1.jsx)("span", { style: style, title: projectInfo.videoFile, children: projectInfo.relativeVideoFile }, void 0), ' ', "file."] }, void 0));
+    return ((0, jsx_runtime_1.jsxs)("div", { style: style, children: ["Copy this into ", (0, jsx_runtime_1.jsx)("br", {}), " your", ' ', (0, jsx_runtime_1.jsx)("span", { style: style, title: projectInfo.videoFile, children: projectInfo.relativeVideoFile }), ' ', "file."] }));
 };
 exports.CopyHint = CopyHint;

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

@@ -1,4 +1,5 @@
-import React, { InputHTMLAttributes } from 'react';
+import type { InputHTMLAttributes } from 'react';
+import React from 'react';
 declare type Props = InputHTMLAttributes<HTMLInputElement> & {
     onValueChange: (newVal: number) => void;
 };

package/dist/editor/components/NewComposition/InputDragger.js

@@ -75,8 +75,8 @@ const InputDragger = ({ onValueChange, min: _min, step: _step, value, ...props }
         }
     }, [inputFallback]);
     if (inputFallback) {
-        return ((0, jsx_runtime_1.jsx)(z_index_1.HigherZIndex, { onEscape: onBlur, onOutsideClick: noop_1.noop, children: (0, jsx_runtime_1.jsx)(RemInput_1.RemotionInput, { ref: fallbackRef, autoFocus: true, onKeyPress: onKeyPress, onBlur: onBlur, value: value, min: _min, step: _step, ...props }, void 0) }, void 0));
+        return ((0, jsx_runtime_1.jsx)(z_index_1.HigherZIndex, { onEscape: onBlur, onOutsideClick: noop_1.noop, children: (0, jsx_runtime_1.jsx)(RemInput_1.RemotionInput, { ref: fallbackRef, autoFocus: true, onKeyPress: onKeyPress, onBlur: onBlur, value: value, min: _min, step: _step, ...props }) }));
     }
-    return ((0, jsx_runtime_1.jsx)("button", { type: "button", style: style, onClick: onClick, onPointerDown: onPointerDown, children: (0, jsx_runtime_1.jsx)("span", { style: span, children: value }, void 0) }, void 0));
+    return ((0, jsx_runtime_1.jsx)("button", { type: "button", style: style, onClick: onClick, onPointerDown: onPointerDown, children: (0, jsx_runtime_1.jsx)("span", { style: span, children: value }) }));
 };
 exports.InputDragger = InputDragger;