@remotion/cli 4.0.0-oops.3 → 4.0.0-prefetch.7

package/dist/editor/components/CopyButton.js

@@ -3,36 +3,23 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.CopyButton = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
-const colors_1 = require("../helpers/colors");
+const Button_1 = require("../../preview-server/error-overlay/remotion-overlay/Button");
 const copy_text_1 = require("../helpers/copy-text");
 const layout_1 = require("./layout");
 const iconStyle = {
     width: 16,
     height: 16,
     color: 'white',
+    verticalAlign: 'sub',
 };
-const copyIcon = ((0, jsx_runtime_1.jsx)("svg", { "aria-hidden": "true", focusable: "false", "data-prefix": "far", "data-icon": "clipboard", className: "svg-inline--fa fa-clipboard fa-w-12", role: "img", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 384 512", style: iconStyle, children: (0, jsx_runtime_1.jsx)("path", { fill: "currentColor", d: "M336 64h-80c0-35.3-28.7-64-64-64s-64 28.7-64 64H48C21.5 64 0 85.5 0 112v352c0 26.5 21.5 48 48 48h288c26.5 0 48-21.5 48-48V112c0-26.5-21.5-48-48-48zM192 40c13.3 0 24 10.7 24 24s-10.7 24-24 24-24-10.7-24-24 10.7-24 24-24zm144 418c0 3.3-2.7 6-6 6H54c-3.3 0-6-2.7-6-6V118c0-3.3 2.7-6 6-6h42v36c0 6.6 5.4 12 12 12h168c6.6 0 12-5.4 12-12v-36h42c3.3 0 6 2.7 6 6z" }, void 0) }, void 0));
-const container = {
-    padding: 10,
-    cursor: 'pointer',
-    fontSize: 14,
-};
-const button = {
-    border: `1px solid ${colors_1.INPUT_BORDER_COLOR_UNHOVERED}`,
-    borderRadius: 4,
-    backgroundColor: colors_1.INPUT_BACKGROUND,
-    appearance: 'none',
-    fontFamily: 'inherit',
-    fontSize: 14,
-    color: 'white',
-};
+const copyIcon = ((0, jsx_runtime_1.jsx)("svg", { "aria-hidden": "true", focusable: "false", "data-prefix": "far", "data-icon": "clipboard", className: "svg-inline--fa fa-clipboard fa-w-12", role: "img", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 384 512", style: iconStyle, children: (0, jsx_runtime_1.jsx)("path", { fill: "currentColor", d: "M336 64h-80c0-35.3-28.7-64-64-64s-64 28.7-64 64H48C21.5 64 0 85.5 0 112v352c0 26.5 21.5 48 48 48h288c26.5 0 48-21.5 48-48V112c0-26.5-21.5-48-48-48zM192 40c13.3 0 24 10.7 24 24s-10.7 24-24 24-24-10.7-24-24 10.7-24 24-24zm144 418c0 3.3-2.7 6-6 6H54c-3.3 0-6-2.7-6-6V118c0-3.3 2.7-6 6-6h42v36c0 6.6 5.4 12 12 12h168c6.6 0 12-5.4 12-12v-36h42c3.3 0 6 2.7 6 6z" }) }));
 const labelStyle = {
     fontSize: 14,
 };
 const CopyButton = ({ textToCopy, label, labelWhenCopied }) => {
     const [copied, setCopied] = (0, react_1.useState)(false);
     const onClick = (0, react_1.useCallback)(() => {
-        (0, copy_text_1.copyCmd)(textToCopy);
+        (0, copy_text_1.copyText)(textToCopy);
         setCopied(Date.now());
     }, [textToCopy]);
     (0, react_1.useEffect)(() => {
@@ -42,6 +29,6 @@ const CopyButton = ({ textToCopy, label, labelWhenCopied }) => {
         const to = setTimeout(() => setCopied(false), 2000);
         return () => clearTimeout(to);
     }, [copied]);
-    return ((0, jsx_runtime_1.jsx)("button", { onClick: onClick, style: button, type: "button", children: (0, jsx_runtime_1.jsxs)(layout_1.Row, { style: container, children: [copyIcon, (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 1.5 }, void 0), ' ', (0, jsx_runtime_1.jsx)("span", { style: labelStyle, children: copied ? labelWhenCopied : label }, void 0)] }, void 0) }, void 0));
+    return ((0, jsx_runtime_1.jsxs)(Button_1.Button, { onClick: onClick, children: [copyIcon, (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 1.5 }), ' ', (0, jsx_runtime_1.jsx)("span", { style: labelStyle, children: copied ? labelWhenCopied : label })] }));
 };
 exports.CopyButton = CopyButton;

package/dist/editor/components/CurrentComposition.js

@@ -4,6 +4,7 @@ exports.CurrentComposition = 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 is_composition_still_1 = require("../helpers/is-composition-still");
 const render_frame_1 = require("../state/render-frame");
 const rich_timeline_1 = require("../state/rich-timeline");
@@ -15,23 +16,27 @@ const container = {
     borderBottom: '1px solid black',
     padding: 16,
     color: 'white',
+    backgroundColor: colors_1.BACKGROUND,
 };
 const title = {
     fontWeight: 'bold',
     fontSize: 12,
     whiteSpace: 'nowrap',
     lineHeight: '18px',
+    backgroundColor: colors_1.BACKGROUND,
 };
 const subtitle = {
     fontSize: 12,
     opacity: 0.8,
     whiteSpace: 'nowrap',
     lineHeight: '18px',
+    backgroundColor: colors_1.BACKGROUND,
 };
 const row = {
     display: 'flex',
     flexDirection: 'row',
     lineHeight: '18px',
+    backgroundColor: colors_1.BACKGROUND,
 };
 const targetHeight = 60;
 const targetWidth = (targetHeight * 16) / 9;
@@ -46,9 +51,9 @@ const CurrentComposition = () => {
         document.title = `${video.id} / ${window.remotion_projectName} - Remotion Preview`;
     }, [video]);
     if (!video) {
-        return (0, jsx_runtime_1.jsx)("div", { style: container }, void 0);
+        return (0, jsx_runtime_1.jsx)("div", { style: container });
     }
     const frameToDisplay = Math.floor(video.durationInFrames / 2);
-    return ((0, jsx_runtime_1.jsx)("div", { style: container, children: (0, jsx_runtime_1.jsxs)("div", { style: row, children: [richTimelineContext.richTimeline ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Thumbnail_1.Thumbnail, { composition: video, targetHeight: targetHeight, targetWidth: targetWidth, frameToDisplay: frameToDisplay }, void 0), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 1 }, void 0)] }, void 0)) : null, (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("div", { style: title, children: video.id }, void 0), (0, jsx_runtime_1.jsxs)("div", { style: subtitle, children: [video.width, "x", video.height, (0, is_composition_still_1.isCompositionStill)(video) ? null : `, ${video.fps} FPS`] }, void 0), (0, is_composition_still_1.isCompositionStill)(video) ? ((0, jsx_runtime_1.jsx)("div", { style: subtitle, children: "Still" }, void 0)) : ((0, jsx_runtime_1.jsxs)("div", { style: subtitle, children: ["Duration ", (0, render_frame_1.renderFrame)(video.durationInFrames, video.fps)] }, void 0))] }, void 0)] }, void 0) }, void 0));
+    return ((0, jsx_runtime_1.jsx)("div", { style: container, children: (0, jsx_runtime_1.jsxs)("div", { style: row, children: [richTimelineContext.richTimeline ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Thumbnail_1.Thumbnail, { composition: video, targetHeight: targetHeight, targetWidth: targetWidth, frameToDisplay: frameToDisplay }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 1 })] })) : null, (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("div", { style: title, children: video.id }), (0, jsx_runtime_1.jsxs)("div", { style: subtitle, children: [video.width, "x", video.height, (0, is_composition_still_1.isCompositionStill)(video) ? null : `, ${video.fps} FPS`] }), (0, is_composition_still_1.isCompositionStill)(video) ? ((0, jsx_runtime_1.jsx)("div", { style: subtitle, children: "Still" })) : ((0, jsx_runtime_1.jsxs)("div", { style: subtitle, children: ["Duration ", (0, render_frame_1.renderFrame)(video.durationInFrames, video.fps)] }))] })] }) }));
 };
 exports.CurrentComposition = CurrentComposition;

package/dist/editor/components/Editor.js

@@ -5,25 +5,22 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Editor = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const player_1 = require("@remotion/player");
 const react_1 = require("react");
 const remotion_1 = require("remotion");
 const colors_1 = require("../helpers/colors");
 const noop_1 = require("../helpers/noop");
-const checkerboard_1 = require("../state/checkerboard");
-const highest_z_index_1 = require("../state/highest-z-index");
-const keybindings_1 = require("../state/keybindings");
 const modals_1 = require("../state/modals");
-const mute_1 = require("../state/mute");
-const preview_size_1 = require("../state/preview-size");
-const rich_timeline_1 = require("../state/rich-timeline");
+const timeline_zoom_1 = require("../state/timeline-zoom");
 const z_index_1 = require("../state/z-index");
 const EditorContent_1 = require("./EditorContent");
 const FramePersistor_1 = require("./FramePersistor");
 const GlobalKeybindings_1 = require("./GlobalKeybindings");
 const KeyboardShortcutsModal_1 = require("./KeyboardShortcutsModal");
 const NewComposition_1 = __importDefault(require("./NewComposition/NewComposition"));
+const NoRegisterRoot_1 = require("./NoRegisterRoot");
+const NotificationCenter_1 = require("./Notifications/NotificationCenter");
 const UpdateModal_1 = require("./UpdateModal/UpdateModal");
+const ZoomPersistor_1 = require("./ZoomPersistor");
 const background = {
     backgroundColor: colors_1.BACKGROUND,
     display: 'flex',
@@ -32,90 +29,25 @@ const background = {
     flexDirection: 'column',
     position: 'absolute',
 };
-const Root = remotion_1.Internals.getRoot();
 const Editor = () => {
-    const [emitter] = (0, react_1.useState)(() => new player_1.PlayerInternals.PlayerEmitter());
-    const [size, setSizeState] = (0, react_1.useState)(() => (0, preview_size_1.loadPreviewSizeOption)());
-    const [checkerboard, setCheckerboardState] = (0, react_1.useState)(() => (0, checkerboard_1.loadCheckerboardOption)());
-    const setCheckerboard = (0, react_1.useCallback)((newValue) => {
-        setCheckerboardState((prevState) => {
-            const newVal = newValue(prevState);
-            (0, checkerboard_1.persistCheckerboardOption)(newVal);
-            return newVal;
-        });
-    }, []);
-    const [richTimeline, setRichTimelineState] = (0, react_1.useState)(() => (0, rich_timeline_1.loadRichTimelineOption)());
-    const setRichTimeline = (0, react_1.useCallback)((newValue) => {
-        setRichTimelineState((prevState) => {
-            const newVal = newValue(prevState);
-            (0, rich_timeline_1.persistRichTimelineOption)(newVal);
-            return newVal;
-        });
-    }, []);
-    const setSize = (0, react_1.useCallback)((newValue) => {
-        setSizeState((prevState) => {
-            const newVal = newValue(prevState);
-            (0, preview_size_1.persistPreviewSizeOption)(newVal);
-            return newVal;
-        });
-    }, []);
-    const [inAndOutFrames, setInAndOutFrames] = (0, react_1.useState)({
-        inFrame: null,
-        outFrame: null,
+    const [Root, setRoot] = (0, react_1.useState)(() => remotion_1.Internals.getRoot());
+    const { selectedModal: modalContextType } = (0, react_1.useContext)(modals_1.ModalsContext);
+    const [waitForRoot] = (0, react_1.useState)(() => {
+        if (Root) {
+            return 0;
+        }
+        return (0, remotion_1.delayRender)('Waiting for registerRoot()');
     });
-    const [mediaMuted, setMediaMuted] = (0, react_1.useState)(() => (0, mute_1.loadMuteOption)());
-    const [mediaVolume, setMediaVolume] = (0, react_1.useState)(1);
-    const [modalContextType, setModalContextType] = (0, react_1.useState)(null);
-    const previewSizeCtx = (0, react_1.useMemo)(() => {
-        return {
-            size,
-            setSize,
-        };
-    }, [setSize, size]);
-    const checkerboardCtx = (0, react_1.useMemo)(() => {
-        return {
-            checkerboard,
-            setCheckerboard,
-        };
-    }, [checkerboard, setCheckerboard]);
-    const richTimelineCtx = (0, react_1.useMemo)(() => {
-        return {
-            richTimeline,
-            setRichTimeline,
-        };
-    }, [richTimeline, setRichTimeline]);
-    const timelineInOutContextValue = (0, react_1.useMemo)(() => {
-        return inAndOutFrames;
-    }, [inAndOutFrames]);
-    const setTimelineInOutContextValue = (0, react_1.useMemo)(() => {
-        return {
-            setInAndOutFrames,
-        };
-    }, []);
-    const mediaVolumeContextValue = (0, react_1.useMemo)(() => {
-        return {
-            mediaMuted,
-            mediaVolume,
-        };
-    }, [mediaMuted, mediaVolume]);
-    const setMediaVolumeContextValue = (0, react_1.useMemo)(() => {
-        return {
-            setMediaMuted,
-            setMediaVolume,
-        };
-    }, []);
-    const modalsContext = (0, react_1.useMemo)(() => {
-        return {
-            selectedModal: modalContextType,
-            setSelectedModal: setModalContextType,
-        };
-    }, [modalContextType]);
-    if (!Root) {
-        throw new Error('Root has not been registered. ');
-    }
-    return ((0, jsx_runtime_1.jsx)(keybindings_1.KeybindingContextProvider, { children: (0, jsx_runtime_1.jsx)(rich_timeline_1.RichTimelineContext.Provider, { value: richTimelineCtx, children: (0, jsx_runtime_1.jsx)(checkerboard_1.CheckerboardContext.Provider, { value: checkerboardCtx, children: (0, jsx_runtime_1.jsx)(preview_size_1.PreviewSizeContext.Provider, { value: previewSizeCtx, children: (0, jsx_runtime_1.jsx)(modals_1.ModalsContext.Provider, { value: modalsContext, children: (0, jsx_runtime_1.jsx)(remotion_1.Internals.Timeline.TimelineInOutContext.Provider, { value: timelineInOutContextValue, children: (0, jsx_runtime_1.jsx)(remotion_1.Internals.Timeline.SetTimelineInOutContext.Provider, { value: setTimelineInOutContextValue, children: (0, jsx_runtime_1.jsx)(remotion_1.Internals.MediaVolumeContext.Provider, { value: mediaVolumeContextValue, children: (0, jsx_runtime_1.jsx)(remotion_1.Internals.SetMediaVolumeContext.Provider, { value: setMediaVolumeContextValue, children: (0, jsx_runtime_1.jsx)(player_1.PlayerInternals.PlayerEventEmitterContext.Provider, { value: emitter, children: (0, jsx_runtime_1.jsx)(highest_z_index_1.HighestZIndexProvider, { children: (0, jsx_runtime_1.jsxs)(z_index_1.HigherZIndex, { onEscape: noop_1.noop, onOutsideClick: noop_1.noop, children: [(0, jsx_runtime_1.jsxs)("div", { style: background, children: [(0, jsx_runtime_1.jsx)(Root, {}, void 0), (0, jsx_runtime_1.jsx)(FramePersistor_1.FramePersistor, {}, void 0), (0, jsx_runtime_1.jsx)(EditorContent_1.EditorContent, {}, void 0), (0, jsx_runtime_1.jsx)(GlobalKeybindings_1.GlobalKeybindings, {}, void 0)] }, void 0), modalContextType &&
-                                                            modalContextType.type === 'new-comp' && ((0, jsx_runtime_1.jsx)(NewComposition_1.default, { initialCompType: modalContextType.compType }, void 0)), modalContextType &&
-                                                            modalContextType.type === 'update' && ((0, jsx_runtime_1.jsx)(UpdateModal_1.UpdateModal, { info: modalContextType.info }, void 0)), modalContextType &&
-                                                            modalContextType.type === 'shortcuts' && ((0, jsx_runtime_1.jsx)(KeyboardShortcutsModal_1.KeyboardShortcuts, {}, void 0))] }, void 0) }, void 0) }, void 0) }, void 0) }, void 0) }, void 0) }, void 0) }, void 0) }, void 0) }, void 0) }, void 0) }, void 0));
+    (0, react_1.useEffect)(() => {
+        if (Root) {
+            return;
+        }
+        const cleanup = remotion_1.Internals.waitForRoot((NewRoot) => {
+            setRoot(() => NewRoot);
+            (0, remotion_1.continueRender)(waitForRoot);
+        });
+        return () => cleanup();
+    }, [Root, waitForRoot]);
+    return ((0, jsx_runtime_1.jsxs)(z_index_1.HigherZIndex, { onEscape: noop_1.noop, onOutsideClick: noop_1.noop, children: [(0, jsx_runtime_1.jsx)(timeline_zoom_1.TimelineZoomContext, { children: (0, jsx_runtime_1.jsxs)("div", { style: background, children: [Root === null ? null : (0, jsx_runtime_1.jsx)(Root, {}), (0, jsx_runtime_1.jsxs)(remotion_1.Internals.CanUseRemotionHooksProvider, { children: [(0, jsx_runtime_1.jsx)(FramePersistor_1.FramePersistor, {}), (0, jsx_runtime_1.jsx)(ZoomPersistor_1.ZoomPersistor, {}), Root === null ? (0, jsx_runtime_1.jsx)(NoRegisterRoot_1.NoRegisterRoot, {}) : (0, jsx_runtime_1.jsx)(EditorContent_1.EditorContent, {}), (0, jsx_runtime_1.jsx)(GlobalKeybindings_1.GlobalKeybindings, {})] })] }) }), (0, jsx_runtime_1.jsx)(NotificationCenter_1.NotificationCenter, {}), modalContextType && modalContextType.type === 'new-comp' && ((0, jsx_runtime_1.jsx)(NewComposition_1.default, { initialCompType: modalContextType.compType })), modalContextType && modalContextType.type === 'update' && ((0, jsx_runtime_1.jsx)(UpdateModal_1.UpdateModal, { info: modalContextType.info })), modalContextType && modalContextType.type === 'shortcuts' && ((0, jsx_runtime_1.jsx)(KeyboardShortcutsModal_1.KeyboardShortcuts, {}))] }));
 };
 exports.Editor = Editor;

package/dist/editor/components/EditorContent.js

@@ -8,11 +8,12 @@ const SplitterElement_1 = require("./Splitter/SplitterElement");
 const SplitterHandle_1 = require("./Splitter/SplitterHandle");
 const Timeline_1 = require("./Timeline/Timeline");
 const TopPanel_1 = require("./TopPanel");
+const noop = () => undefined;
 const EditorContent = () => {
     const isStill = (0, is_current_selected_still_1.useIsStill)();
     if (isStill) {
-        return (0, jsx_runtime_1.jsx)(TopPanel_1.TopPanel, {}, void 0);
+        return (0, jsx_runtime_1.jsx)(TopPanel_1.TopPanel, {});
     }
-    return ((0, jsx_runtime_1.jsxs)(SplitterContainer_1.SplitterContainer, { orientation: "horizontal", id: "top-to-bottom", maxFlex: 0.9, minFlex: 0.2, defaultFlex: 0.75, children: [(0, jsx_runtime_1.jsx)(SplitterElement_1.SplitterElement, { type: "flexer", children: (0, jsx_runtime_1.jsx)(TopPanel_1.TopPanel, {}, void 0) }, void 0), (0, jsx_runtime_1.jsx)(SplitterHandle_1.SplitterHandle, {}, void 0), (0, jsx_runtime_1.jsx)(SplitterElement_1.SplitterElement, { type: "anti-flexer", children: (0, jsx_runtime_1.jsx)(Timeline_1.Timeline, {}, void 0) }, void 0)] }, void 0));
+    return ((0, jsx_runtime_1.jsxs)(SplitterContainer_1.SplitterContainer, { orientation: "horizontal", id: "top-to-bottom", maxFlex: 0.9, minFlex: 0.2, defaultFlex: 0.75, children: [(0, jsx_runtime_1.jsx)(SplitterElement_1.SplitterElement, { type: "flexer", children: (0, jsx_runtime_1.jsx)(TopPanel_1.TopPanel, {}) }), (0, jsx_runtime_1.jsx)(SplitterHandle_1.SplitterHandle, { allowToCollapse: false, onCollapse: noop }), (0, jsx_runtime_1.jsx)(SplitterElement_1.SplitterElement, { type: "anti-flexer", children: (0, jsx_runtime_1.jsx)(Timeline_1.Timeline, {}) })] }));
 };
 exports.EditorContent = EditorContent;

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

@@ -0,0 +1,4 @@
+import React from 'react';
+export declare const EditorContexts: React.FC<{
+    children: React.ReactNode;
+}>;

package/dist/editor/components/EditorContexts.js

@@ -0,0 +1,83 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.EditorContexts = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const player_1 = require("@remotion/player");
+const react_1 = require("react");
+const remotion_1 = require("remotion");
+const checkerboard_1 = require("../state/checkerboard");
+const folders_1 = require("../state/folders");
+const highest_z_index_1 = require("../state/highest-z-index");
+const in_out_1 = require("../state/in-out");
+const keybindings_1 = require("../state/keybindings");
+const modals_1 = require("../state/modals");
+const mute_1 = require("../state/mute");
+const preview_size_1 = require("../state/preview-size");
+const rich_timeline_1 = require("../state/rich-timeline");
+const sidebar_1 = require("../state/sidebar");
+const EditorContexts = ({ children }) => {
+    const [inAndOutFrames, setInAndOutFrames] = (0, react_1.useState)({
+        inFrame: null,
+        outFrame: null,
+    });
+    const timelineInOutContextValue = (0, react_1.useMemo)(() => {
+        return inAndOutFrames;
+    }, [inAndOutFrames]);
+    const [emitter] = (0, react_1.useState)(() => new player_1.PlayerInternals.PlayerEmitter());
+    const setTimelineInOutContextValue = (0, react_1.useMemo)(() => {
+        return {
+            setInAndOutFrames,
+        };
+    }, []);
+    const [checkerboard, setCheckerboardState] = (0, react_1.useState)(() => (0, checkerboard_1.loadCheckerboardOption)());
+    const setCheckerboard = (0, react_1.useCallback)((newValue) => {
+        setCheckerboardState((prevState) => {
+            const newVal = newValue(prevState);
+            (0, checkerboard_1.persistCheckerboardOption)(newVal);
+            return newVal;
+        });
+    }, []);
+    const [richTimeline, setRichTimelineState] = (0, react_1.useState)(() => (0, rich_timeline_1.loadRichTimelineOption)());
+    const setRichTimeline = (0, react_1.useCallback)((newValue) => {
+        setRichTimelineState((prevState) => {
+            const newVal = newValue(prevState);
+            (0, rich_timeline_1.persistRichTimelineOption)(newVal);
+            return newVal;
+        });
+    }, []);
+    const [mediaMuted, setMediaMuted] = (0, react_1.useState)(() => (0, mute_1.loadMuteOption)());
+    const [mediaVolume, setMediaVolume] = (0, react_1.useState)(1);
+    const [modalContextType, setModalContextType] = (0, react_1.useState)(null);
+    const checkerboardCtx = (0, react_1.useMemo)(() => {
+        return {
+            checkerboard,
+            setCheckerboard,
+        };
+    }, [checkerboard, setCheckerboard]);
+    const richTimelineCtx = (0, react_1.useMemo)(() => {
+        return {
+            richTimeline,
+            setRichTimeline,
+        };
+    }, [richTimeline, setRichTimeline]);
+    const mediaVolumeContextValue = (0, react_1.useMemo)(() => {
+        return {
+            mediaMuted,
+            mediaVolume,
+        };
+    }, [mediaMuted, mediaVolume]);
+    const setMediaVolumeContextValue = (0, react_1.useMemo)(() => {
+        return {
+            setMediaMuted,
+            setMediaVolume,
+        };
+    }, []);
+    const modalsContext = (0, react_1.useMemo)(() => {
+        return {
+            selectedModal: modalContextType,
+            setSelectedModal: setModalContextType,
+        };
+    }, [modalContextType]);
+    return ((0, jsx_runtime_1.jsx)(keybindings_1.KeybindingContextProvider, { children: (0, jsx_runtime_1.jsx)(rich_timeline_1.RichTimelineContext.Provider, { value: richTimelineCtx, children: (0, jsx_runtime_1.jsx)(checkerboard_1.CheckerboardContext.Provider, { value: checkerboardCtx, children: (0, jsx_runtime_1.jsx)(preview_size_1.PreviewSizeProvider, { children: (0, jsx_runtime_1.jsx)(modals_1.ModalsContext.Provider, { value: modalsContext, children: (0, jsx_runtime_1.jsx)(remotion_1.Internals.MediaVolumeContext.Provider, { value: mediaVolumeContextValue, children: (0, jsx_runtime_1.jsx)(remotion_1.Internals.SetMediaVolumeContext.Provider, { value: setMediaVolumeContextValue, children: (0, jsx_runtime_1.jsx)(player_1.PlayerInternals.PlayerEventEmitterContext.Provider, { value: emitter, children: (0, jsx_runtime_1.jsx)(sidebar_1.SidebarContextProvider, { children: (0, jsx_runtime_1.jsx)(folders_1.FolderContextProvider, { children: (0, jsx_runtime_1.jsx)(highest_z_index_1.HighestZIndexProvider, { children: (0, jsx_runtime_1.jsx)(in_out_1.TimelineInOutContext.Provider, { value: timelineInOutContextValue, children: (0, jsx_runtime_1.jsx)(in_out_1.SetTimelineInOutContext.Provider, { value: setTimelineInOutContextValue, children: children }) }) }) }) }) }) }) }) }) }) }) }) }));
+};
+exports.EditorContexts = EditorContexts;

package/dist/editor/components/FpsCounter.js

@@ -69,6 +69,6 @@ const FpsCounter = ({ playbackSpeed }) => {
     if (videoConfig === null) {
         return null;
     }
-    return (0, jsx_runtime_1.jsxs)("div", { style: style, children: [fps.toFixed(1), " FPS"] }, void 0);
+    return (0, jsx_runtime_1.jsxs)("div", { style: style, children: [fps.toFixed(1), " FPS"] });
 };
 exports.FpsCounter = FpsCounter;

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import type React from 'react';
 export declare const getCurrentCompositionFromUrl: () => string;
 export declare const persistCurrentFrame: (frame: number) => void;
 export declare const getFrameForComposition: (composition: string) => number;

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

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

package/dist/editor/components/GlobalKeybindings.js

@@ -10,19 +10,34 @@ const GlobalKeybindings = () => {
     const { setSelectedModal } = (0, react_1.useContext)(modals_1.ModalsContext);
     const { setCheckerboard } = (0, react_1.useContext)(checkerboard_1.CheckerboardContext);
     (0, react_1.useEffect)(() => {
-        const nKey = keybindings.registerKeybinding('keypress', 'n', () => {
-            setSelectedModal({
-                type: 'new-comp',
-                compType: 'composition',
-            });
+        const nKey = keybindings.registerKeybinding({
+            event: 'keypress',
+            key: 'n',
+            callback: () => {
+                setSelectedModal({
+                    type: 'new-comp',
+                    compType: 'composition',
+                });
+            },
+            commandCtrlKey: false,
         });
-        const cKey = keybindings.registerKeybinding('keypress', 't', () => {
-            setCheckerboard((c) => !c);
+        const cKey = keybindings.registerKeybinding({
+            event: 'keypress',
+            key: 't',
+            callback: () => {
+                setCheckerboard((c) => !c);
+            },
+            commandCtrlKey: true,
         });
-        const questionMark = keybindings.registerKeybinding('keypress', '?', () => {
-            setSelectedModal({
-                type: 'shortcuts',
-            });
+        const questionMark = keybindings.registerKeybinding({
+            event: 'keypress',
+            key: '?',
+            callback: () => {
+                setSelectedModal({
+                    type: 'shortcuts',
+                });
+            },
+            commandCtrlKey: false,
         });
         return () => {
             nKey.unregister();

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

@@ -0,0 +1,4 @@
+import type React from 'react';
+import type { TComposition } from 'remotion';
+export declare const useSelectComposition: () => (c: TComposition, push: boolean) => void;
+export declare const InitialCompositionLoader: React.FC;

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

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.KeyboardShortcuts = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
+const use_keybinding_1 = require("../helpers/use-keybinding");
 const keys_1 = require("../icons/keys");
 const modals_1 = require("../state/modals");
 const layout_1 = require("./layout");
@@ -43,11 +44,24 @@ const title = {
     fontSize: 14,
     marginBottom: 10,
 };
+const keyboardShortcutsDisabled = {
+    padding: 12,
+    width: '100%',
+    fontSize: 14,
+    backgroundColor: 'rgba(255, 255, 255, 0.1)',
+};
+const ul = {
+    marginTop: 0,
+    marginBottom: 0,
+};
+const li = {
+    fontSize: 14,
+};
 const KeyboardShortcuts = () => {
     const { setSelectedModal } = (0, react_1.useContext)(modals_1.ModalsContext);
     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, use_keybinding_1.areKeyboardShortcutsDisabled)() ? ((0, jsx_runtime_1.jsxs)("div", { style: keyboardShortcutsDisabled, children: ["Keyboard shortcuts disabled either due to:", (0, jsx_runtime_1.jsxs)("ul", { style: ul, children: [(0, jsx_runtime_1.jsx)("li", { style: li, children: "a) --disable-keyboard-shortcuts being passed" }), (0, jsx_runtime_1.jsx)("li", { style: li, children: "b) Config.Preview.setKeyboardShortcutsEnabled(false) being set or" }), (0, jsx_runtime_1.jsx)("li", { style: li, children: " c) a Remotion version mismatch." })] })] })) : null, (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" })] }), (0, jsx_runtime_1.jsx)("br", {}), (0, jsx_runtime_1.jsx)("div", { style: title, children: "Zoom" }), (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: "Zoom in" })] }), (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: "Zoom out" })] }), (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" }) }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "Reset zoom" })] })] })] })] }));
 };
 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;