@remotion/cli 3.2.39 → 3.2.41

package/LICENSE.md

@@ -36,6 +36,6 @@ Support is provided on a best-we-can-do basis via GitHub Issues and Discord.
 
 ## Company license
 
-You are required to obtain a company license to use Remotion if you are not within the group of entities eligible for a free license. This license will enable you to use Remotion for the allowed use cases specified in the free license, and give you access to prioritized support.
+You are required to obtain a company license to use Remotion if you are not within the group of entities eligible for a free license. This license will enable you to use Remotion for the allowed use cases specified in the free license, and give you access to prioritized support (read the [Support Policy](/docs/support)).
 
 Visit [companies.remotion.dev](https://companies.remotion.dev) for pricing and to buy a license.

package/dist/benchmark.js

@@ -8,6 +8,7 @@ const renderer_1 = require("@remotion/renderer");
 const path_1 = __importDefault(require("path"));
 const chalk_1 = require("./chalk");
 const config_1 = require("./config");
+const entry_point_1 = require("./entry-point");
 const get_cli_options_1 = require("./get-cli-options");
 const get_render_media_options_1 = require("./get-render-media-options");
 const log_1 = require("./log");
@@ -88,20 +89,20 @@ const makeBenchmarkProgressBar = ({ totalRuns, run, progress, doneIn, }) => {
 const benchmarkCommand = async (remotionRoot, args) => {
     var _a;
     const runs = (_a = parse_command_line_1.parsedCli.runs) !== null && _a !== void 0 ? _a : DEFAULT_RUNS;
-    const filePath = args[0];
-    if (!filePath) {
+    const { file, reason, remainingArgs } = (0, entry_point_1.findEntryPoint)(args, remotionRoot);
+    if (!file) {
         log_1.Log.error('No entry file passed.');
         log_1.Log.info('Pass an additional argument specifying the entry file');
         log_1.Log.info();
         log_1.Log.info(`$ remotion benchmark <entry file>`);
         process.exit(1);
     }
-    const fullPath = path_1.default.join(process.cwd(), filePath);
+    const fullPath = path_1.default.join(process.cwd(), file);
     const { inputProps, envVariables, browserExecutable, ffmpegExecutable, ffprobeExecutable, chromiumOptions, port, puppeteerTimeout, browser, scale, publicDir, } = await (0, get_cli_options_1.getCliOptions)({
         isLambda: false,
         type: 'series',
-        codec: 'h264',
     });
+    log_1.Log.verbose('Entry point:', file, 'reason:', reason);
     const browserInstance = (0, renderer_1.openBrowser)(browser, {
         browserExecutable,
         shouldDumpIo: renderer_1.RenderInternals.isEqualOrBelowLogLevel(config_1.ConfigInternals.Logging.getLogLevel(), 'verbose'),
@@ -125,8 +126,8 @@ const benchmarkCommand = async (remotionRoot, args) => {
         port,
         puppeteerInstance,
     });
-    const ids = (args[1]
-        ? args[1]
+    const ids = (remainingArgs[0]
+        ? remainingArgs[0]
             .split(',')
             .map((c) => c.trim())
             .filter(truthy_1.truthy)

package/dist/compositions.d.ts

@@ -1 +1 @@
-export declare const listCompositionsCommand: (remotionRoot: string) => Promise<void>;
+export declare const listCompositionsCommand: (remotionRoot: string, args: string[]) => Promise<void>;

package/dist/compositions.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.listCompositionsCommand = void 0;
 const renderer_1 = require("@remotion/renderer");
 const path_1 = __importDefault(require("path"));
+const entry_point_1 = require("./entry-point");
 const get_cli_options_1 = require("./get-cli-options");
 const get_config_file_name_1 = require("./get-config-file-name");
 const log_1 = require("./log");
@@ -24,21 +25,21 @@ const max = (arr) => {
     }
     return biggest;
 };
-const listCompositionsCommand = async (remotionRoot) => {
-    const file = parse_command_line_1.parsedCli._[1];
+const listCompositionsCommand = async (remotionRoot, args) => {
+    const { file, reason } = (0, entry_point_1.findEntryPoint)(args, remotionRoot);
     if (!file) {
         log_1.Log.error('The `compositions` command requires you to specify a entry point. For example');
         log_1.Log.error('  npx remotion compositions src/index.tsx');
         log_1.Log.error('See https://www.remotion.dev/docs/register-root for more information.');
         process.exit(1);
     }
+    log_1.Log.verbose('Entry point:', file, 'reason:', reason);
     const downloadMap = renderer_1.RenderInternals.makeDownloadMap();
     const fullPath = path_1.default.join(process.cwd(), file);
     await (0, get_config_file_name_1.loadConfig)(remotionRoot);
     const { browserExecutable, ffmpegExecutable, ffprobeExecutable, chromiumOptions, envVariables, inputProps, puppeteerTimeout, port, publicDir, } = await (0, get_cli_options_1.getCliOptions)({
         isLambda: false,
         type: 'get-compositions',
-        codec: 'h264',
     });
     const { urlOrBundle: bundled, cleanup: cleanupBundle } = await (0, setup_cache_1.bundleOnCliOrTakeServeUrl)({
         remotionRoot,

package/dist/config/entry-point.d.ts

@@ -0,0 +1,2 @@
+export declare const setEntryPoint: (ep: string) => void;
+export declare const getEntryPoint: () => string | null;

package/dist/config/entry-point.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getEntryPoint = exports.setEntryPoint = void 0;
+let entryPoint = null;
+const setEntryPoint = (ep) => {
+    entryPoint = ep;
+};
+exports.setEntryPoint = setEntryPoint;
+const getEntryPoint = () => {
+    return entryPoint;
+};
+exports.getEntryPoint = getEntryPoint;

package/dist/config/every-nth-frame.d.ts

@@ -1,3 +1,2 @@
-import type { Codec } from '@remotion/renderer';
 export declare const setEveryNthFrame: (frame: number) => void;
-export declare const getAndValidateEveryNthFrame: (codec: Codec) => number;
+export declare const getEveryNthFrame: () => number;

package/dist/config/every-nth-frame.js

@@ -1,20 +1,12 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getAndValidateEveryNthFrame = exports.setEveryNthFrame = void 0;
-const renderer_1 = require("@remotion/renderer");
+exports.getEveryNthFrame = exports.setEveryNthFrame = void 0;
 let everyNthFrame = 1;
 const setEveryNthFrame = (frame) => {
-    renderer_1.RenderInternals.validateEveryNthFrame(frame);
     everyNthFrame = frame;
 };
 exports.setEveryNthFrame = setEveryNthFrame;
-const getAndValidateEveryNthFrame = (codec) => {
-    if (everyNthFrame === 1) {
-        return everyNthFrame;
-    }
-    if (codec !== 'gif') {
-        throw new Error(`"everyNthFrame" can only be set if "codec" is set to "gif". The codec is "${codec}"`);
-    }
+const getEveryNthFrame = () => {
     return everyNthFrame;
 };
-exports.getAndValidateEveryNthFrame = getAndValidateEveryNthFrame;
+exports.getEveryNthFrame = getEveryNthFrame;

package/dist/config/height.d.ts

@@ -1,2 +1,2 @@
-export declare const setHeight: (newHeight: number) => void;
+export declare const overrideHeight: (newHeight: number) => void;
 export declare const getHeight: () => number | null;

package/dist/config/height.js

@@ -1,14 +1,14 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getHeight = exports.setHeight = void 0;
+exports.getHeight = exports.overrideHeight = void 0;
 // eslint-disable-next-line no-restricted-imports
 const remotion_1 = require("remotion");
 let specifiedHeight;
-const setHeight = (newHeight) => {
-    remotion_1.Internals.validateDimension(newHeight, 'height', 'passed to `setHeight()`');
+const overrideHeight = (newHeight) => {
+    remotion_1.Internals.validateDimension(newHeight, 'height', 'passed to `overrideHeight()`');
     specifiedHeight = newHeight;
 };
-exports.setHeight = setHeight;
+exports.overrideHeight = overrideHeight;
 const getHeight = () => {
     return specifiedHeight;
 };

package/dist/config/index.d.ts

@@ -23,8 +23,7 @@ export declare const ConfigInternals: {
     getIgnoreCertificateErrors: () => boolean;
     getChromiumHeadlessMode: () => boolean;
     getChromiumOpenGlRenderer: () => "swangle" | "angle" | "egl" | "swiftshader" | null;
-    getAndValidateEveryNthFrame: (codec: "h264" | "h265" | "vp8" | "vp9" | "mp3" | "aac" | "wav" | "prores" | "h264-mkv" | "gif") => number;
-    getAndValidateNumberOfGifLoops: (codec: "h264" | "h265" | "vp8" | "vp9" | "mp3" | "aac" | "wav" | "prores" | "h264-mkv" | "gif") => number | null;
+    getEveryNthFrame: () => number;
     getConcurrency: () => number | null;
     getCurrentPuppeteerTimeout: () => number;
     getQuality: () => number | undefined;
@@ -49,6 +48,10 @@ export declare const ConfigInternals: {
     getFfmpegOverrideFunction: () => import("@remotion/renderer").FfmpegOverrideFn;
     getAudioBitrate: () => string | null;
     getVideoBitrate: () => string | null;
+    getHeight: () => number | null;
+    getWidth: () => number | null;
     getCrfOrUndefined: () => import("@remotion/renderer").Crf;
+    getEntryPoint: () => string | null;
+    getNumberOfGifLoops: () => import("./number-of-gif-loops").Loop;
 };
 export declare const overrideRemotion: () => void;

package/dist/config/index.js

@@ -32,14 +32,12 @@ const chromium_flags_1 = require("./chromium-flags");
 const codec_1 = require("./codec");
 const concurrency_1 = require("./concurrency");
 const env_file_1 = require("./env-file");
-const every_nth_frame_1 = require("./every-nth-frame");
 const ffmpeg_executable_1 = require("./ffmpeg-executable");
 const frame_range_1 = require("./frame-range");
 const image_format_1 = require("./image-format");
 const image_sequence_1 = require("./image-sequence");
 const Logging = __importStar(require("./log"));
 const max_timeline_tracks_1 = require("./max-timeline-tracks");
-const number_of_gif_loops_1 = require("./number-of-gif-loops");
 const output_location_1 = require("./output-location");
 const override_webpack_1 = require("./override-webpack");
 const overwrite_1 = require("./overwrite");
@@ -58,18 +56,20 @@ const codec_2 = require("./codec");
 const concurrency_2 = require("./concurrency");
 const crf_1 = require("./crf");
 const enforce_audio_track_1 = require("./enforce-audio-track");
+const entry_point_1 = require("./entry-point");
 const env_file_2 = require("./env-file");
-const every_nth_frame_2 = require("./every-nth-frame");
+const every_nth_frame_1 = require("./every-nth-frame");
 const ffmpeg_executable_2 = require("./ffmpeg-executable");
 const ffmpeg_override_1 = require("./ffmpeg-override");
 const frame_range_2 = require("./frame-range");
+const height_1 = require("./height");
 const image_format_2 = require("./image-format");
 const image_sequence_2 = require("./image-sequence");
 const keyboard_shortcuts_1 = require("./keyboard-shortcuts");
 const log_1 = require("./log");
 const max_timeline_tracks_2 = require("./max-timeline-tracks");
 const muted_1 = require("./muted");
-const number_of_gif_loops_2 = require("./number-of-gif-loops");
+const number_of_gif_loops_1 = require("./number-of-gif-loops");
 const output_location_2 = require("./output-location");
 const override_webpack_2 = require("./override-webpack");
 const overwrite_2 = require("./overwrite");
@@ -81,6 +81,7 @@ const quality_2 = require("./quality");
 const scale_2 = require("./scale");
 const timeout_2 = require("./timeout");
 const webpack_caching_2 = require("./webpack-caching");
+const width_1 = require("./width");
 exports.Config = {
     Preview: {
         setMaxTimelineTracks: max_timeline_tracks_2.setMaxTimelineTracks,
@@ -91,6 +92,7 @@ exports.Config = {
         setCachingEnabled: webpack_caching_2.setWebpackCaching,
         setPort: preview_server_2.setPort,
         setPublicDir: public_dir_1.setPublicDir,
+        setEntryPoint: entry_point_1.setEntryPoint,
     },
     Log: {
         setLevel: log_1.setLogLevel,
@@ -112,8 +114,8 @@ exports.Config = {
         setFfmpegExecutable: ffmpeg_executable_2.setFfmpegExecutable,
         setFfprobeExecutable: ffmpeg_executable_2.setFfprobeExecutable,
         setScale: scale_2.setScale,
-        setEveryNthFrame: every_nth_frame_2.setEveryNthFrame,
-        setNumberOfGifLoops: number_of_gif_loops_2.setNumberOfGifLoops,
+        setEveryNthFrame: every_nth_frame_1.setEveryNthFrame,
+        setNumberOfGifLoops: number_of_gif_loops_1.setNumberOfGifLoops,
         setMuted: muted_1.setMuted,
         setEnforceAudioTrack: enforce_audio_track_1.setEnforceAudioTrack,
     },
@@ -128,6 +130,8 @@ exports.Config = {
         setProResProfile: prores_profile_2.setProResProfile,
         setAudioBitrate: bitrate_1.setAudioBitrate,
         setVideoBitrate: bitrate_1.setVideoBitrate,
+        overrideHeight: height_1.overrideHeight,
+        overrideWidth: width_1.overrideWidth,
         overrideFfmpegCommand: ffmpeg_override_1.setFfmpegOverrideFunction,
     },
 };
@@ -148,8 +152,7 @@ exports.ConfigInternals = {
     getIgnoreCertificateErrors: chromium_flags_1.getIgnoreCertificateErrors,
     getChromiumHeadlessMode: chromium_flags_1.getChromiumHeadlessMode,
     getChromiumOpenGlRenderer: chromium_flags_1.getChromiumOpenGlRenderer,
-    getAndValidateEveryNthFrame: every_nth_frame_1.getAndValidateEveryNthFrame,
-    getAndValidateNumberOfGifLoops: number_of_gif_loops_1.getAndValidateNumberOfGifLoops,
+    getEveryNthFrame: every_nth_frame_1.getEveryNthFrame,
     getConcurrency: concurrency_1.getConcurrency,
     getCurrentPuppeteerTimeout: timeout_1.getCurrentPuppeteerTimeout,
     getQuality: quality_1.getQuality,
@@ -174,7 +177,11 @@ exports.ConfigInternals = {
     getFfmpegOverrideFunction: ffmpeg_override_1.getFfmpegOverrideFunction,
     getAudioBitrate: bitrate_1.getAudioBitrate,
     getVideoBitrate: bitrate_1.getVideoBitrate,
+    getHeight: height_1.getHeight,
+    getWidth: width_1.getWidth,
     getCrfOrUndefined: crf_1.getCrfOrUndefined,
+    getEntryPoint: entry_point_1.getEntryPoint,
+    getNumberOfGifLoops: number_of_gif_loops_1.getNumberOfGifLoops,
 };
 const overrideRemotion = () => {
     Object.assign(remotion_1.Config, exports.Config);

package/dist/config/log.d.ts

@@ -1,3 +1,3 @@
 import type { LogLevel } from '@remotion/renderer';
-export declare const getLogLevel: () => "verbose" | "info" | "warn" | "error";
+export declare const getLogLevel: () => "error" | "verbose" | "info" | "warn";
 export declare const setLogLevel: (newLogLevel: LogLevel) => void;

package/dist/config/number-of-gif-loops.d.ts

@@ -1,4 +1,3 @@
-import type { Codec } from '@remotion/renderer';
 export declare type Loop = number | null;
 export declare const setNumberOfGifLoops: (newLoop: Loop | null) => void;
-export declare const getAndValidateNumberOfGifLoops: (codec: Codec) => number | null;
+export declare const getNumberOfGifLoops: () => Loop;

package/dist/config/number-of-gif-loops.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getAndValidateNumberOfGifLoops = exports.setNumberOfGifLoops = void 0;
+exports.getNumberOfGifLoops = exports.setNumberOfGifLoops = void 0;
 let currentLoop = null;
 const setNumberOfGifLoops = (newLoop) => {
     if (newLoop !== null && typeof newLoop !== 'number') {
@@ -9,13 +9,7 @@ const setNumberOfGifLoops = (newLoop) => {
     currentLoop = newLoop;
 };
 exports.setNumberOfGifLoops = setNumberOfGifLoops;
-const getAndValidateNumberOfGifLoops = (codec) => {
-    if (currentLoop === null) {
-        return currentLoop;
-    }
-    if (codec !== 'gif') {
-        throw new Error(`The "numberOfGifLoops" setting can only be used for GIFs. The codec is set to ${codec}`);
-    }
+const getNumberOfGifLoops = () => {
     return currentLoop;
 };
-exports.getAndValidateNumberOfGifLoops = getAndValidateNumberOfGifLoops;
+exports.getNumberOfGifLoops = getNumberOfGifLoops;

package/dist/config/width.d.ts

@@ -1,2 +1,2 @@
-export declare const setWidth: (newWidth: number) => void;
+export declare const overrideWidth: (newWidth: number) => void;
 export declare const getWidth: () => number | null;

package/dist/config/width.js

@@ -1,16 +1,16 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getWidth = exports.setWidth = void 0;
+exports.getWidth = exports.overrideWidth = void 0;
 // eslint-disable-next-line no-restricted-imports
 const remotion_1 = require("remotion");
 let passedWidth = null;
-const setWidth = (newWidth) => {
+const overrideWidth = (newWidth) => {
     if (typeof newWidth !== 'number') {
         remotion_1.Internals.validateDimension(newWidth, 'width', 'passed to `setWidth()`');
     }
     passedWidth = newWidth;
 };
-exports.setWidth = setWidth;
+exports.overrideWidth = overrideWidth;
 const getWidth = () => {
     return passedWidth;
 };

package/dist/editor/components/Canvas.js

@@ -192,18 +192,21 @@ const Canvas = () => {
             key: '0',
             commandCtrlKey: false,
             callback: onReset,
+            preventDefault: true,
         });
         const zoomIn = keybindings.registerKeybinding({
             event: 'keydown',
             key: '+',
             commandCtrlKey: false,
             callback: onZoomIn,
+            preventDefault: true,
         });
         const zoomOut = keybindings.registerKeybinding({
             event: 'keydown',
             key: '-',
             commandCtrlKey: false,
             callback: onZoomOut,
+            preventDefault: true,
         });
         return () => {
             resetBinding.unregister();

package/dist/editor/components/GlobalKeybindings.js

@@ -20,6 +20,7 @@ const GlobalKeybindings = () => {
                 });
             },
             commandCtrlKey: false,
+            preventDefault: true,
         });
         const cmdKKey = keybindings.registerKeybinding({
             event: 'keydown',
@@ -32,6 +33,7 @@ const GlobalKeybindings = () => {
                 });
             },
             commandCtrlKey: true,
+            preventDefault: true,
         });
         const cKey = keybindings.registerKeybinding({
             event: 'keypress',
@@ -40,6 +42,7 @@ const GlobalKeybindings = () => {
                 setCheckerboard((c) => !c);
             },
             commandCtrlKey: true,
+            preventDefault: true,
         });
         const questionMark = keybindings.registerKeybinding({
             event: 'keypress',
@@ -52,6 +55,7 @@ const GlobalKeybindings = () => {
                 });
             },
             commandCtrlKey: false,
+            preventDefault: true,
         });
         return () => {
             nKey.unregister();

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

@@ -104,42 +104,49 @@ const MenuContent = ({ onHide, values, preselectIndex, onNextMenu, onPreviousMen
             key: 'Escape',
             callback: onEscape,
             commandCtrlKey: false,
+            preventDefault: true,
         });
         const rightBinding = keybindings.registerKeybinding({
             event: 'keydown',
             key: 'ArrowRight',
             commandCtrlKey: false,
             callback: onArrowRight,
+            preventDefault: true,
         });
         const leftBinding = keybindings.registerKeybinding({
             event: 'keydown',
             commandCtrlKey: false,
             key: 'ArrowLeft',
             callback: onPreviousMenu,
+            preventDefault: true,
         });
         const downBinding = keybindings.registerKeybinding({
             event: 'keydown',
             key: 'ArrowDown',
             commandCtrlKey: false,
             callback: onArrowDown,
+            preventDefault: true,
         });
         const upBinding = keybindings.registerKeybinding({
             event: 'keydown',
             key: 'ArrowUp',
             callback: onArrowUp,
             commandCtrlKey: false,
+            preventDefault: true,
         });
         const enterBinding = keybindings.registerKeybinding({
             event: 'keydown',
             key: 'Enter',
             callback: onEnter,
             commandCtrlKey: false,
+            preventDefault: true,
         });
         const spaceBinding = keybindings.registerKeybinding({
             event: 'keyup',
             key: ' ',
             callback: onEnter,
             commandCtrlKey: false,
+            preventDefault: true,
         });
         return () => {
             escapeBinding.unregister();

package/dist/editor/components/PlayPause.js

@@ -124,36 +124,42 @@ const PlayPause = ({ playbackRate, loop }) => {
             key: 'ArrowLeft',
             callback: onArrowLeft,
             commandCtrlKey: false,
+            preventDefault: true,
         });
         const arrowRight = keybindings.registerKeybinding({
             event: 'keydown',
             key: 'ArrowRight',
             callback: onArrowRight,
             commandCtrlKey: false,
+            preventDefault: true,
         });
         const space = keybindings.registerKeybinding({
             event: 'keydown',
             key: ' ',
             callback: onSpace,
             commandCtrlKey: false,
+            preventDefault: true,
         });
         const enter = keybindings.registerKeybinding({
             event: 'keydown',
             key: 'enter',
             callback: onEnter,
             commandCtrlKey: false,
+            preventDefault: false,
         });
         const a = keybindings.registerKeybinding({
             event: 'keydown',
             key: 'a',
             callback: jumpToStart,
             commandCtrlKey: false,
+            preventDefault: true,
         });
         const e = keybindings.registerKeybinding({
             event: 'keydown',
             key: 'e',
             callback: jumpToEnd,
             commandCtrlKey: false,
+            preventDefault: true,
         });
         return () => {
             arrowLeft.unregister();

package/dist/editor/components/PlaybackKeyboardShortcutsManager.js

@@ -47,18 +47,21 @@ const PlaybackKeyboardShortcutsManager = ({ setPlaybackRate }) => {
             key: 'j',
             callback: onJKey,
             commandCtrlKey: false,
+            preventDefault: true,
         });
         const kKey = keybindings.registerKeybinding({
             event: 'keydown',
             key: 'k',
             callback: onKKey,
             commandCtrlKey: false,
+            preventDefault: true,
         });
         const lKey = keybindings.registerKeybinding({
             event: 'keydown',
             key: 'l',
             callback: onLKey,
             commandCtrlKey: false,
+            preventDefault: true,
         });
         return () => {
             jKey.unregister();

package/dist/editor/components/QuickSwitcher/QuickSwitcherContent.js

@@ -169,6 +169,7 @@ const QuickSwitcherContent = ({ initialMode, invocationTimestamp }) => {
             callback: onArrowUp,
             commandCtrlKey: false,
             event: 'keydown',
+            preventDefault: true,
         });
         return () => {
             binding.unregister();
@@ -208,6 +209,7 @@ const QuickSwitcherContent = ({ initialMode, invocationTimestamp }) => {
             callback: onArrowDown,
             commandCtrlKey: false,
             event: 'keydown',
+            preventDefault: true,
         });
         return () => {
             binding.unregister();

package/dist/editor/components/QuickSwitcher/QuickSwitcherResult.js

@@ -61,6 +61,7 @@ const QuickSwitcherResult = ({ result, selected }) => {
             callback: result.onSelected,
             commandCtrlKey: false,
             event: 'keydown',
+            preventDefault: true,
         });
         return () => {
             binding.unregister();

package/dist/editor/components/TimelineInOutToggle.js

@@ -144,6 +144,7 @@ const TimelineInOutPointToggle = () => {
                 onInMark(e);
             },
             commandCtrlKey: false,
+            preventDefault: true,
         });
         const oKey = keybindings.registerKeybinding({
             event: 'keypress',
@@ -152,6 +153,7 @@ const TimelineInOutPointToggle = () => {
                 onOutMark(e);
             },
             commandCtrlKey: false,
+            preventDefault: true,
         });
         const xKey = keybindings.registerKeybinding({
             event: 'keypress',
@@ -160,6 +162,7 @@ const TimelineInOutPointToggle = () => {
                 onInOutClear();
             },
             commandCtrlKey: false,
+            preventDefault: true,
         });
         return () => {
             oKey.unregister();

package/dist/editor/helpers/use-keybinding.d.ts

@@ -6,6 +6,7 @@ export declare const useKeybinding: () => {
         key: string;
         commandCtrlKey: boolean;
         callback: (e: KeyboardEvent) => void;
+        preventDefault: boolean;
     }) => {
         unregister: () => void;
     };

package/dist/editor/helpers/use-keybinding.js

@@ -33,7 +33,9 @@ const useKeybinding = () => {
             if (e.key.toLowerCase() === options.key.toLowerCase() &&
                 options.commandCtrlKey === commandKey) {
                 options.callback(e);
-                e.preventDefault();
+                if (options.preventDefault) {
+                    e.preventDefault();
+                }
             }
         };
         const toRegister = {

package/dist/editor/helpers/use-menu-structure.js

@@ -161,7 +161,7 @@ const useMenuStructure = (closeMenu) => {
                         quickSwitcherLabel: null,
                     },
                     {
-                        id: 'timeline-divider',
+                        id: 'timeline-divider-1',
                         type: 'divider',
                     },
                     {
@@ -220,7 +220,7 @@ const useMenuStructure = (closeMenu) => {
                         onClick: () => undefined,
                     },
                     {
-                        id: 'timeline-divider',
+                        id: 'timeline-divider-2',
                         type: 'divider',
                     },
                     {
@@ -240,7 +240,7 @@ const useMenuStructure = (closeMenu) => {
                             : 'Enable Checkerboard Transparency',
                     },
                     {
-                        id: 'timeline-divider',
+                        id: 'timeline-divider-3',
                         type: 'divider',
                     },
                     {
@@ -290,7 +290,7 @@ const useMenuStructure = (closeMenu) => {
                         quickSwitcherLabel: 'Timeline: Collapse all layers',
                     },
                     {
-                        id: 'in-out-divider',
+                        id: 'in-out-divider-4',
                         type: 'divider',
                     },
                     {
@@ -312,7 +312,7 @@ const useMenuStructure = (closeMenu) => {
                         quickSwitcherLabel: 'Switch composition',
                     },
                     {
-                        id: 'in-out-divider',
+                        id: 'in-out-divider-5',
                         type: 'divider',
                     },
                     {
@@ -372,7 +372,10 @@ const useMenuStructure = (closeMenu) => {
                             id: 'color-picker',
                             value: 'color-picker',
                             label: 'Color Picker',
-                            onClick: () => (0, pick_color_1.pickColor)(),
+                            onClick: () => {
+                                closeMenu();
+                                (0, pick_color_1.pickColor)();
+                            },
                             leftItem: null,
                             keyHint: null,
                             subMenu: null,
@@ -453,7 +456,7 @@ const useMenuStructure = (closeMenu) => {
                         quickSwitcherLabel: null,
                     },
                     {
-                        id: 'help-divider',
+                        id: 'help-divider-6',
                         type: 'divider',
                     },
                     {