@remotion/studio 4.0.522 → 4.0.524

package/dist/components/handle-drop.js

@@ -8,7 +8,7 @@ const element_install_request_1 = require("./element-install-request");
 const import_assets_1 = require("./import-assets");
 const handleDrop = async ({ chooseSvgImportMode, compositionFile, compositionId, destinationDimensions, dropPosition, event, fps, from, localFiles, preferCompositionStart, }) => {
     var _a;
-    var _b, _c, _d;
+    var _b, _c, _d, _e;
     if (localFiles !== null || (0, drop_handler_data_1.isFileDragEvent)(event)) {
         const files = localFiles !== null && localFiles !== void 0 ? localFiles : Array.from((_b = (_a = event.dataTransfer) === null || _a === void 0 ? void 0 : _a.files) !== null && _b !== void 0 ? _b : []);
         if (files.length === 0) {
@@ -91,7 +91,8 @@ const handleDrop = async ({ chooseSvgImportMode, compositionFile, compositionId,
             element: {
                 ...element.element,
                 durationInFrames: (_c = element.element.durationInFrames) !== null && _c !== void 0 ? _c : null,
-                installationMode: (_d = element.element.installationMode) !== null && _d !== void 0 ? _d : null,
+                initialProps: (_d = element.element.initialProps) !== null && _d !== void 0 ? _d : null,
+                installationMode: (_e = element.element.installationMode) !== null && _e !== void 0 ? _e : null,
             },
             from: (0, import_assets_1.getFromForDrop)({
                 durationInFrames: element.element.durationInFrames,

package/dist/components/import-assets.d.ts

@@ -156,7 +156,8 @@ export declare const insertComposition: ({ composition, compositionFile, composi
     from: number | null;
     preferCompositionStart: boolean | null;
 }) => Promise<void>;
-export declare const insertElement: ({ compositionFile, compositionId, element, expectedFileState, position, from, overwriteExisting, }: {
+export declare const insertElement: ({ installationName, compositionFile, compositionId, element, expectedFileState, position, from, overwriteExisting, }: {
+    installationName: string | null;
     compositionFile: string;
     compositionId: string;
     element: InstallableElement;
@@ -164,4 +165,4 @@ export declare const insertElement: ({ compositionFile, compositionId, element,
     position: InsertableCompositionElementPosition | null;
     from: number | null;
     overwriteExisting: boolean;
-}) => Promise<void>;
+}) => Promise<boolean>;

package/dist/components/import-assets.js

@@ -479,13 +479,6 @@ const insertCompositionElement = async ({ compositionFile, compositionId, elemen
         (0, NotificationCenter_1.showNotification)(result.reason, 4000);
         return false;
     }
-    if (result.insertedNodePath !== null) {
-        (0, inserted_element_selection_1.requestInsertedElementSelection)({
-            compositionId,
-            nodePath: result.insertedNodePath,
-            notification: null,
-        });
-    }
     return true;
 };
 const downloadRemoteAsset = (url) => {
@@ -882,12 +875,13 @@ const insertComposition = async ({ composition, compositionFile, compositionId,
     }
 };
 exports.insertComposition = insertComposition;
-const insertElement = async ({ compositionFile, compositionId, element, expectedFileState, position, from, overwriteExisting, }) => {
+const insertElement = async ({ installationName, compositionFile, compositionId, element, expectedFileState, position, from, overwriteExisting, }) => {
     try {
         if ((0, browser_studio_operations_1.getBrowserStudioOperations)() === null) {
             await (0, install_required_package_1.installRequiredPackages)(element.dependencies);
         }
         const response = await (0, element_install_api_1.installElement)({
+            installationName,
             compositionFile,
             compositionId,
             element,
@@ -901,16 +895,18 @@ const insertElement = async ({ compositionFile, compositionId, element, expected
                 ? response.reason
                 : `Element file changed: ${response.conflict.filePath}`;
             (0, NotificationCenter_1.showNotification)(`Could not add Element: ${reason}`, 4000);
-            return;
+            return false;
         }
         (0, inserted_element_selection_1.requestInsertedElementSelection)({
             compositionId,
             nodePath: null,
             notification: `Installed ${element.displayName}`,
         });
+        return true;
     }
     catch (error) {
         (0, NotificationCenter_1.showNotification)(`Could not add Element: ${error instanceof Error ? error.message : String(error)}`, 4000);
+        return false;
     }
 };
 exports.insertElement = insertElement;

package/dist/components/keyboard-shortcuts.d.ts

@@ -1,10 +1,26 @@
+import type { StudioKeyboardShortcut, StudioKeyboardShortcutAction, StudioKeyboardShortcutValue } from '@remotion/studio-shared';
 export type KeyboardShortcut = {
     readonly action: string;
-    readonly chords: readonly (readonly string[])[];
+    readonly actionId: StudioKeyboardShortcutAction | null;
+    readonly fixedChords?: readonly (readonly string[])[];
+    readonly fixedReason?: string;
 };
 export type KeyboardShortcutGroup = {
     readonly name: string;
     readonly shortcuts: readonly KeyboardShortcut[];
 };
+export declare const defaultKeyboardShortcuts: Record<StudioKeyboardShortcutAction, readonly StudioKeyboardShortcut[]>;
 export declare const keyboardShortcutGroups: readonly KeyboardShortcutGroup[];
 export declare const askAIKeyboardShortcutGroup: KeyboardShortcutGroup;
+export declare const getKeyboardShortcutsForAction: (action: "askAI" | "clearInOutPoints" | "copyEffectsAndValues" | "cutEffects" | "deleteSelection" | "duplicateSequences" | "enterFullscreen" | "goToFrame" | "jumpToBeginning" | "jumpToEnd" | "nextComposition" | "pauseAndReturnToPlaybackStart" | "pausePlayback" | "playForward" | "playPause" | "previousComposition" | "quickSwitcher" | "redo" | "render" | "resetZoom" | "reversePlayback" | "selectAllSequenceRows" | "selectOpacityProp" | "selectRotateProp" | "selectScaleProp" | "selectTranslateProp" | "setInPoint" | "setOutPoint" | "showKeyboardShortcuts" | "toggleBothSidebars" | "toggleCheckerboard" | "toggleLeftSidebar" | "toggleLoop" | "toggleMute" | "toggleOutlines" | "toggleRightSidebar" | "toggleRulersAndGuides" | "toggleSnapping" | "undo" | "zoomIn" | "zoomOut", configured?: Partial<Record<"askAI" | "clearInOutPoints" | "copyEffectsAndValues" | "cutEffects" | "deleteSelection" | "duplicateSequences" | "enterFullscreen" | "goToFrame" | "jumpToBeginning" | "jumpToEnd" | "nextComposition" | "pauseAndReturnToPlaybackStart" | "pausePlayback" | "playForward" | "playPause" | "previousComposition" | "quickSwitcher" | "redo" | "render" | "resetZoom" | "reversePlayback" | "selectAllSequenceRows" | "selectOpacityProp" | "selectRotateProp" | "selectScaleProp" | "selectTranslateProp" | "setInPoint" | "setOutPoint" | "showKeyboardShortcuts" | "toggleBothSidebars" | "toggleCheckerboard" | "toggleLeftSidebar" | "toggleLoop" | "toggleMute" | "toggleOutlines" | "toggleRightSidebar" | "toggleRulersAndGuides" | "toggleSnapping" | "undo" | "zoomIn" | "zoomOut", StudioKeyboardShortcutValue>> | null) => readonly StudioKeyboardShortcut[];
+export declare const keyboardEventMatchesShortcut: ({ event, shortcut: value, }: {
+    readonly event: KeyboardEvent;
+    readonly shortcut: StudioKeyboardShortcut;
+}) => boolean;
+export declare const keyboardShortcutsOverlap: (first: StudioKeyboardShortcut, second: StudioKeyboardShortcut) => boolean;
+export declare const keyboardEventMatchesAction: (event: KeyboardEvent, action: "askAI" | "clearInOutPoints" | "copyEffectsAndValues" | "cutEffects" | "deleteSelection" | "duplicateSequences" | "enterFullscreen" | "goToFrame" | "jumpToBeginning" | "jumpToEnd" | "nextComposition" | "pauseAndReturnToPlaybackStart" | "pausePlayback" | "playForward" | "playPause" | "previousComposition" | "quickSwitcher" | "redo" | "render" | "resetZoom" | "reversePlayback" | "selectAllSequenceRows" | "selectOpacityProp" | "selectRotateProp" | "selectScaleProp" | "selectTranslateProp" | "setInPoint" | "setOutPoint" | "showKeyboardShortcuts" | "toggleBothSidebars" | "toggleCheckerboard" | "toggleLeftSidebar" | "toggleLoop" | "toggleMute" | "toggleOutlines" | "toggleRightSidebar" | "toggleRulersAndGuides" | "toggleSnapping" | "undo" | "zoomIn" | "zoomOut") => boolean;
+export declare const formatKeyboardShortcut: (value: StudioKeyboardShortcut) => readonly string[];
+export declare const formatKeyboardShortcutForAria: (value: StudioKeyboardShortcut) => string;
+export declare const getKeyboardShortcutLabel: (action: "askAI" | "clearInOutPoints" | "copyEffectsAndValues" | "cutEffects" | "deleteSelection" | "duplicateSequences" | "enterFullscreen" | "goToFrame" | "jumpToBeginning" | "jumpToEnd" | "nextComposition" | "pauseAndReturnToPlaybackStart" | "pausePlayback" | "playForward" | "playPause" | "previousComposition" | "quickSwitcher" | "redo" | "render" | "resetZoom" | "reversePlayback" | "selectAllSequenceRows" | "selectOpacityProp" | "selectRotateProp" | "selectScaleProp" | "selectTranslateProp" | "setInPoint" | "setOutPoint" | "showKeyboardShortcuts" | "toggleBothSidebars" | "toggleCheckerboard" | "toggleLeftSidebar" | "toggleLoop" | "toggleMute" | "toggleOutlines" | "toggleRightSidebar" | "toggleRulersAndGuides" | "toggleSnapping" | "undo" | "zoomIn" | "zoomOut") => string;
+export declare const getKeyboardShortcutAriaKeyShortcuts: (action: "askAI" | "clearInOutPoints" | "copyEffectsAndValues" | "cutEffects" | "deleteSelection" | "duplicateSequences" | "enterFullscreen" | "goToFrame" | "jumpToBeginning" | "jumpToEnd" | "nextComposition" | "pauseAndReturnToPlaybackStart" | "pausePlayback" | "playForward" | "playPause" | "previousComposition" | "quickSwitcher" | "redo" | "render" | "resetZoom" | "reversePlayback" | "selectAllSequenceRows" | "selectOpacityProp" | "selectRotateProp" | "selectScaleProp" | "selectTranslateProp" | "setInPoint" | "setOutPoint" | "showKeyboardShortcuts" | "toggleBothSidebars" | "toggleCheckerboard" | "toggleLeftSidebar" | "toggleLoop" | "toggleMute" | "toggleOutlines" | "toggleRightSidebar" | "toggleRulersAndGuides" | "toggleSnapping" | "undo" | "zoomIn" | "zoomOut") => string;
+export declare const shortcutFromKeyboardEvent: (event: KeyboardEvent) => StudioKeyboardShortcut | null;

package/dist/components/keyboard-shortcuts.js

@@ -1,135 +1,237 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.askAIKeyboardShortcutGroup = exports.keyboardShortcutGroups = void 0;
-const ShortcutHint_1 = require("../error-overlay/remotion-overlay/ShortcutHint");
+exports.shortcutFromKeyboardEvent = exports.getKeyboardShortcutAriaKeyShortcuts = exports.getKeyboardShortcutLabel = exports.formatKeyboardShortcutForAria = exports.formatKeyboardShortcut = exports.keyboardEventMatchesAction = exports.keyboardShortcutsOverlap = exports.keyboardEventMatchesShortcut = exports.getKeyboardShortcutsForAction = exports.askAIKeyboardShortcutGroup = exports.keyboardShortcutGroups = exports.defaultKeyboardShortcuts = void 0;
 const is_mac_1 = require("../helpers/is-mac");
+const studio_runtime_config_1 = require("../helpers/studio-runtime-config");
+const shortcut = (action, actionId) => ({ action, actionId });
+const fixedShortcut = (action, fixedChords, fixedReason) => ({ action, actionId: null, fixedChords, fixedReason });
+exports.defaultKeyboardShortcuts = {
+    playPause: [{ key: 'Space' }],
+    toggleMute: [{ key: 'm', shift: false }],
+    toggleLoop: [{ key: 'l', shift: true }],
+    jumpToBeginning: [{ key: 'a' }],
+    jumpToEnd: [{ key: 'e' }],
+    reversePlayback: [{ key: 'j' }],
+    pausePlayback: [{ key: 'k' }],
+    playForward: [{ key: 'l', shift: false }],
+    goToFrame: [{ key: 'g' }],
+    pauseAndReturnToPlaybackStart: [{ key: 'Enter' }],
+    toggleLeftSidebar: [{ key: 'b', commandOrControl: true }],
+    toggleRightSidebar: [{ key: 'j', commandOrControl: true }],
+    toggleBothSidebars: [{ key: 'g', commandOrControl: true }],
+    enterFullscreen: [{ key: 'f' }],
+    toggleSnapping: [{ key: 'm', shift: true }],
+    toggleOutlines: [{ key: 'o', shift: true }],
+    toggleRulersAndGuides: [{ key: 'r', shift: true }],
+    previousComposition: [{ key: 'PageUp' }],
+    nextComposition: [{ key: 'PageDown' }],
+    showKeyboardShortcuts: [{ key: '?', shift: true }],
+    quickSwitcher: [{ key: 'k', commandOrControl: true }],
+    render: [{ key: 'r', shift: false }],
+    toggleCheckerboard: [{ key: 't' }],
+    setInPoint: [{ key: 'i' }],
+    setOutPoint: [{ key: 'o', shift: false }],
+    clearInOutPoints: [{ key: 'x' }],
+    zoomIn: [{ key: '+', shift: true }, { key: '+' }],
+    zoomOut: [{ key: '-' }],
+    resetZoom: [{ key: '0' }],
+    undo: [{ key: 'z', commandOrControl: true }],
+    redo: [
+        ...(is_mac_1.isMac ? [] : [{ key: 'y', commandOrControl: true }]),
+        { key: 'z', commandOrControl: true, shift: true },
+    ],
+    selectAllSequenceRows: [{ key: 'a', commandOrControl: true }],
+    selectTranslateProp: [{ key: 'p' }],
+    selectOpacityProp: [{ key: 't' }],
+    selectRotateProp: [{ key: 'r', shift: false }],
+    selectScaleProp: [{ key: 's' }],
+    duplicateSequences: [{ key: 'd', commandOrControl: true }],
+    copyEffectsAndValues: [{ key: 'c', commandOrControl: true }],
+    cutEffects: [{ key: 'x', commandOrControl: true }],
+    deleteSelection: [{ key: 'Backspace' }, { key: 'Delete' }],
+    askAI: [{ key: 'i', commandOrControl: true }],
+};
 exports.keyboardShortcutGroups = [
     {
         name: 'Playback',
         shortcuts: [
-            { action: '1 second back', chords: [['Shift', '←']] },
-            { action: 'Previous frame', chords: [['←']] },
-            { action: 'Play / Pause', chords: [['Space']] },
-            { action: 'Next frame', chords: [['→']] },
-            { action: '1 second forward', chords: [['Shift', '→']] },
-            { action: 'Jump to beginning', chords: [['A']] },
-            { action: 'Jump to end', chords: [['E']] },
-            { action: 'Reverse playback', chords: [['J']] },
-            { action: 'Pause', chords: [['K']] },
-            { action: 'Play / Speed up', chords: [['L']] },
-            { action: 'Go to frame', chords: [['G']] },
-            {
-                action: 'Pause & return to playback start',
-                chords: [['Enter']],
-            },
+            fixedShortcut('1 second back', [['Shift', '←']], 'Context-sensitive timeline control'),
+            fixedShortcut('Previous frame', [['←']], 'Context-sensitive timeline control'),
+            shortcut('Play / Pause', 'playPause'),
+            shortcut('Mute / Unmute', 'toggleMute'),
+            shortcut('Loop', 'toggleLoop'),
+            fixedShortcut('Next frame', [['→']], 'Context-sensitive timeline control'),
+            fixedShortcut('1 second forward', [['Shift', '→']], 'Context-sensitive timeline control'),
+            shortcut('Jump to beginning', 'jumpToBeginning'),
+            shortcut('Jump to end', 'jumpToEnd'),
+            shortcut('Reverse playback', 'reversePlayback'),
+            shortcut('Pause', 'pausePlayback'),
+            shortcut('Play / Speed up', 'playForward'),
+            shortcut('Go to frame', 'goToFrame'),
+            shortcut('Pause & return to playback start', 'pauseAndReturnToPlaybackStart'),
         ],
     },
     {
         name: 'Sidebar',
         shortcuts: [
-            {
-                action: 'Toggle left sidebar',
-                chords: [[ShortcutHint_1.cmdOrCtrlCharacter, 'B']],
-            },
-            {
-                action: 'Toggle right sidebar',
-                chords: [[ShortcutHint_1.cmdOrCtrlCharacter, 'J']],
-            },
-            {
-                action: 'Toggle both sidebars',
-                chords: [[ShortcutHint_1.cmdOrCtrlCharacter, 'G']],
-            },
+            shortcut('Toggle left sidebar', 'toggleLeftSidebar'),
+            shortcut('Toggle right sidebar', 'toggleRightSidebar'),
+            shortcut('Toggle both sidebars', 'toggleBothSidebars'),
         ],
     },
     {
         name: 'View',
         shortcuts: [
-            { action: 'Enter fullscreen', chords: [['F']] },
-            { action: 'Exit fullscreen', chords: [['Esc']] },
-            { action: 'Enable snapping', chords: [['Shift', 'M']] },
+            shortcut('Enter fullscreen', 'enterFullscreen'),
+            fixedShortcut('Exit fullscreen', [['Esc']], 'Handled by the browser'),
+            shortcut('Enable snapping', 'toggleSnapping'),
+            shortcut('Outlines', 'toggleOutlines'),
+            shortcut('Rulers and guides', 'toggleRulersAndGuides'),
         ],
     },
     {
         name: 'Navigation',
         shortcuts: [
-            { action: 'Previous composition', chords: [['PageUp']] },
-            { action: 'Next composition', chords: [['PageDown']] },
-            {
-                action: 'Render, unless a sequence or prop is selected',
-                chords: [['R']],
-            },
-            {
-                action: 'Checkerboard, unless a sequence or prop is selected',
-                chords: [['T']],
-            },
-            { action: 'Show keyboard shortcuts', chords: [['?']] },
-            {
-                action: 'Quick Switcher',
-                chords: [[ShortcutHint_1.cmdOrCtrlCharacter, 'K']],
-            },
+            shortcut('Previous composition', 'previousComposition'),
+            shortcut('Next composition', 'nextComposition'),
+            shortcut('Render, unless a sequence or prop is selected', 'render'),
+            shortcut('Checkerboard, unless a sequence or prop is selected', 'toggleCheckerboard'),
+            shortcut('Show keyboard shortcuts', 'showKeyboardShortcuts'),
+            shortcut('Quick Switcher', 'quickSwitcher'),
         ],
     },
     {
         name: 'Playback range',
         shortcuts: [
-            { action: 'Set In Point', chords: [['I']] },
-            { action: 'Set Out Point', chords: [['O']] },
-            { action: 'Clear In/Out Points', chords: [['X']] },
+            shortcut('Set In Point', 'setInPoint'),
+            shortcut('Set Out Point', 'setOutPoint'),
+            shortcut('Clear In/Out Points', 'clearInOutPoints'),
         ],
     },
     {
         name: 'Zoom',
         shortcuts: [
-            { action: 'Zoom in', chords: [['+']] },
-            { action: 'Zoom out', chords: [['-']] },
-            { action: 'Reset zoom', chords: [['0']] },
+            shortcut('Zoom in', 'zoomIn'),
+            shortcut('Zoom out', 'zoomOut'),
+            shortcut('Reset zoom', 'resetZoom'),
         ],
     },
     {
         name: 'Props Editor',
-        shortcuts: [
-            { action: 'Undo', chords: [[ShortcutHint_1.cmdOrCtrlCharacter, 'Z']] },
-            {
-                action: 'Redo',
-                chords: [
-                    is_mac_1.isMac
-                        ? [ShortcutHint_1.cmdOrCtrlCharacter, 'Shift', 'Z']
-                        : [ShortcutHint_1.cmdOrCtrlCharacter, 'Y'],
-                ],
-            },
-        ],
+        shortcuts: [shortcut('Undo', 'undo'), shortcut('Redo', 'redo')],
     },
     {
         name: 'Interactivity',
         shortcuts: [
-            { action: 'Select range / axis lock drag', chords: [['Shift']] },
-            { action: 'Toggle selection', chords: [[ShortcutHint_1.cmdOrCtrlCharacter]] },
-            {
-                action: 'Select sequence rows',
-                chords: [[ShortcutHint_1.cmdOrCtrlCharacter, 'A']],
-            },
-            { action: 'Select translate prop', chords: [['P']] },
-            { action: 'Select opacity prop', chords: [['T']] },
-            { action: 'Select rotate prop', chords: [['R']] },
-            { action: 'Select scale prop', chords: [['S']] },
-            {
-                action: 'Duplicate sequences',
-                chords: [[ShortcutHint_1.cmdOrCtrlCharacter, 'D']],
-            },
-            {
-                action: 'Copy effects / values',
-                chords: [[ShortcutHint_1.cmdOrCtrlCharacter, 'C']],
-            },
-            { action: 'Cut effects', chords: [[ShortcutHint_1.cmdOrCtrlCharacter, 'X']] },
-            {
-                action: 'Paste effects / values',
-                chords: [[ShortcutHint_1.cmdOrCtrlCharacter, 'V']],
-            },
-            { action: 'Delete / reset selection', chords: [['Del'], ['⌫']] },
+            fixedShortcut('Select range / axis lock drag', [['Shift']], 'Gesture modifier'),
+            fixedShortcut('Toggle selection', [[is_mac_1.isMac ? '⌘' : 'Ctrl']], 'Gesture modifier'),
+            shortcut('Select sequence rows', 'selectAllSequenceRows'),
+            shortcut('Select translate prop', 'selectTranslateProp'),
+            shortcut('Select opacity prop', 'selectOpacityProp'),
+            shortcut('Select rotate prop', 'selectRotateProp'),
+            shortcut('Select scale prop', 'selectScaleProp'),
+            shortcut('Duplicate sequences', 'duplicateSequences'),
+            shortcut('Copy effects / values', 'copyEffectsAndValues'),
+            shortcut('Cut effects', 'cutEffects'),
+            fixedShortcut('Paste effects / values', [[is_mac_1.isMac ? '⌘' : 'Ctrl', 'V']], 'Handled by the browser clipboard event'),
+            shortcut('Delete / reset selection', 'deleteSelection'),
         ],
     },
 ];
 exports.askAIKeyboardShortcutGroup = {
     name: 'AI',
-    shortcuts: [{ action: 'Ask AI', chords: [[ShortcutHint_1.cmdOrCtrlCharacter, 'I']] }],
+    shortcuts: [shortcut('Ask AI', 'askAI')],
+};
+const getKeyboardShortcutsForAction = (action, configured = (0, studio_runtime_config_1.getStudioKeyboardShortcuts)()) => {
+    if (configured !== null &&
+        Object.prototype.hasOwnProperty.call(configured, action)) {
+        const value = configured[action];
+        if (value === null) {
+            return [];
+        }
+        return Array.isArray(value)
+            ? value
+            : [
+                value,
+            ];
+    }
+    return exports.defaultKeyboardShortcuts[action];
+};
+exports.getKeyboardShortcutsForAction = getKeyboardShortcutsForAction;
+const normalizeKey = (key) => (key === 'Space' ? ' ' : key);
+const keyboardEventMatchesShortcut = ({ event, shortcut: value, }) => {
+    var _a;
+    const commandOrControl = is_mac_1.isMac ? event.metaKey : event.ctrlKey;
+    return (event.key.toLowerCase() === normalizeKey(value.key).toLowerCase() &&
+        commandOrControl === ((_a = value.commandOrControl) !== null && _a !== void 0 ? _a : false) &&
+        (is_mac_1.isMac ? !event.ctrlKey : !event.metaKey) &&
+        (value.shift === undefined || event.shiftKey === value.shift) &&
+        (value.alt === undefined || event.altKey === value.alt));
+};
+exports.keyboardEventMatchesShortcut = keyboardEventMatchesShortcut;
+const keyboardShortcutsOverlap = (first, second) => {
+    var _a, _b;
+    return first.key.toLowerCase() === second.key.toLowerCase() &&
+        ((_a = first.commandOrControl) !== null && _a !== void 0 ? _a : false) === ((_b = second.commandOrControl) !== null && _b !== void 0 ? _b : false) &&
+        (first.shift === undefined ||
+            second.shift === undefined ||
+            first.shift === second.shift) &&
+        (first.alt === undefined ||
+            second.alt === undefined ||
+            first.alt === second.alt);
+};
+exports.keyboardShortcutsOverlap = keyboardShortcutsOverlap;
+const keyboardEventMatchesAction = (event, action) => (0, exports.getKeyboardShortcutsForAction)(action).some((value) => (0, exports.keyboardEventMatchesShortcut)({ event, shortcut: value }));
+exports.keyboardEventMatchesAction = keyboardEventMatchesAction;
+const displayKey = (keyboardKey) => {
+    if (keyboardKey === 'ArrowLeft')
+        return '←';
+    if (keyboardKey === 'ArrowRight')
+        return '→';
+    if (keyboardKey === 'Delete')
+        return 'Del';
+    if (keyboardKey === 'Backspace')
+        return '⌫';
+    if (keyboardKey === 'Escape')
+        return 'Esc';
+    return keyboardKey.length === 1 ? keyboardKey.toUpperCase() : keyboardKey;
+};
+const formatKeyboardShortcut = (value) => [
+    ...(value.commandOrControl ? [is_mac_1.isMac ? '⌘' : 'Ctrl'] : []),
+    ...(value.alt ? [is_mac_1.isMac ? 'Option' : 'Alt'] : []),
+    ...(value.shift && !['+', '?'].includes(value.key) ? ['Shift'] : []),
+    displayKey(value.key),
+];
+exports.formatKeyboardShortcut = formatKeyboardShortcut;
+const formatKeyboardShortcutForAria = (value) => [
+    ...(value.commandOrControl ? [is_mac_1.isMac ? 'Meta' : 'Control'] : []),
+    ...(value.alt ? ['Alt'] : []),
+    ...(value.shift ? ['Shift'] : []),
+    value.key,
+].join('+');
+exports.formatKeyboardShortcutForAria = formatKeyboardShortcutForAria;
+const getKeyboardShortcutLabel = (action) => (0, exports.getKeyboardShortcutsForAction)(action)
+    .map((value) => (0, exports.formatKeyboardShortcut)(value).join('+'))
+    .join(' / ');
+exports.getKeyboardShortcutLabel = getKeyboardShortcutLabel;
+const getKeyboardShortcutAriaKeyShortcuts = (action) => (0, exports.getKeyboardShortcutsForAction)(action)
+    .map(exports.formatKeyboardShortcutForAria)
+    .join(' ');
+exports.getKeyboardShortcutAriaKeyShortcuts = getKeyboardShortcutAriaKeyShortcuts;
+const shortcutFromKeyboardEvent = (event) => {
+    if (['Alt', 'Control', 'Meta', 'Shift'].includes(event.key)) {
+        return null;
+    }
+    if (is_mac_1.isMac ? event.ctrlKey : event.metaKey) {
+        return null;
+    }
+    return {
+        key: event.key === ' ' ? 'Space' : event.key,
+        ...((is_mac_1.isMac ? event.metaKey : event.ctrlKey)
+            ? { commandOrControl: true }
+            : {}),
+        shift: event.shiftKey,
+        alt: event.altKey,
+    };
 };
+exports.shortcutFromKeyboardEvent = shortcutFromKeyboardEvent;

package/dist/components/public-output-name.d.ts

@@ -0,0 +1,5 @@
+export declare const getDefaultOutputBaseName: (src: string, displayName: string, fallbackName: string) => string;
+export declare const validatePublicOutputName: ({ extension, outName, }: {
+    extension: string;
+    outName: string;
+}) => string | null;

package/dist/components/public-output-name.js

@@ -0,0 +1,60 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.validatePublicOutputName = exports.getDefaultOutputBaseName = void 0;
+const invalidCharacters = ['?', '*', '+', ':', '%'];
+const getDefaultOutputBaseName = (src, displayName, fallbackName) => {
+    var _a;
+    let pathname = displayName;
+    if (!/^(data|blob):/i.test(src.trimStart())) {
+        pathname = (_a = src.split(/[?#]/)[0]) !== null && _a !== void 0 ? _a : src;
+        try {
+            pathname = new URL(src, typeof window === 'undefined'
+                ? 'http://localhost'
+                : window.location.href).pathname;
+        }
+        catch (_b) {
+            // Fall back to the source as-is if it cannot be parsed as a URL.
+        }
+    }
+    const lastPathSegment = pathname.split('/').filter(Boolean).at(-1);
+    let decoded = lastPathSegment !== null && lastPathSegment !== void 0 ? lastPathSegment : displayName;
+    try {
+        decoded = decodeURIComponent(decoded);
+    }
+    catch (_c) {
+        // Keep the encoded name if it contains an invalid escape sequence.
+    }
+    return (decoded
+        .replace(/\.[^/.]+$/, '')
+        .replace(/[^a-zA-Z0-9-_ ]/g, '-')
+        .trim()
+        .replace(/\s+/g, '-')
+        .replace(/^-+|-+$/g, '') || fallbackName);
+};
+exports.getDefaultOutputBaseName = getDefaultOutputBaseName;
+const validatePublicOutputName = ({ extension, outName, }) => {
+    if (outName.trim() === '')
+        return 'Enter an output file';
+    if (outName !== outName.trim())
+        return 'The output file must not start or end with whitespace';
+    if (outName.startsWith('/') || /^[a-zA-Z]:/.test(outName))
+        return 'The output file must be relative to the public folder';
+    if (outName.includes('\\'))
+        return 'Use forward slashes in the output file';
+    if (outName.includes('\0'))
+        return 'The output file must not contain null characters';
+    const segments = outName.split('/');
+    if (segments.some((segment) => segment === ''))
+        return 'The output file must not contain empty path segments';
+    if (segments.some((segment) => segment === '.'))
+        return 'The output file must not contain "." path segments';
+    if (segments.some((segment) => segment.startsWith('..')))
+        return 'The output file must stay inside the public folder';
+    const invalidCharacter = invalidCharacters.find((character) => outName.includes(character));
+    if (invalidCharacter)
+        return `The output file must not contain "${invalidCharacter}"`;
+    if (!outName.toLowerCase().endsWith(extension))
+        return `The output file must end in ${extension}`;
+    return null;
+};
+exports.validatePublicOutputName = validatePublicOutputName;

package/dist/components/use-model-cache-status.d.ts

@@ -0,0 +1,7 @@
+export declare const useModelCacheStatus: <Model extends string>({ isModelCached, models, refreshKey, }: {
+    readonly isModelCached: (model: Model) => Promise<boolean>;
+    readonly models: readonly {
+        readonly name: Model;
+    }[];
+    readonly refreshKey: string;
+}) => ReadonlySet<Model>;

package/dist/components/use-model-cache-status.js

@@ -0,0 +1,35 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useModelCacheStatus = void 0;
+const react_1 = require("react");
+const useModelCacheStatus = ({ isModelCached, models, refreshKey, }) => {
+    const [cachedModels, setCachedModels] = (0, react_1.useState)(new Set());
+    (0, react_1.useEffect)(() => {
+        let cancelled = false;
+        Promise.all(models.map(async ({ name }) => ({
+            cached: await isModelCached(name),
+            name,
+        })))
+            .then((results) => {
+            if (!cancelled) {
+                const nextCachedModels = new Set();
+                for (const result of results) {
+                    if (result.cached) {
+                        nextCachedModels.add(result.name);
+                    }
+                }
+                setCachedModels(nextCachedModels);
+            }
+        })
+            .catch(() => {
+            if (!cancelled) {
+                setCachedModels(new Set());
+            }
+        });
+        return () => {
+            cancelled = true;
+        };
+    }, [isModelCached, models, refreshKey]);
+    return cachedModels;
+};
+exports.useModelCacheStatus = useModelCacheStatus;

package/dist/error-overlay/remotion-overlay/CodeFrame.js

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.CodeFrame = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const LazySyntaxHighlightedSource_1 = require("../../components/LazySyntaxHighlightedSource");
 const is_menu_item_1 = require("../../components/Menu/is-menu-item");
 const colors_1 = require("../../helpers/colors");
 const container = {
@@ -13,6 +14,8 @@ const frame = {
     backgroundColor: colors_1.ERROR_CODE_FRAME_BACKGROUND,
     borderRadius: 6,
     marginBottom: 20,
+    marginLeft: 14,
+    marginRight: 14,
     overflowY: 'auto',
 };
 const lineNumber = {
@@ -29,23 +32,31 @@ const lineNumber = {
     fontFamily: 'monospace',
 };
 const CodeFrame = ({ source, lineNumberWidth }) => {
-    return (jsx_runtime_1.jsx("div", { style: frame, className: is_menu_item_1.HORIZONTAL_SCROLLBAR_CLASSNAME, children: source.map((s, j) => {
-            return (jsx_runtime_1.jsxs("div", { style: container, children: [
-                    jsx_runtime_1.jsx("div", { style: {
-                            ...lineNumber,
-                            backgroundColor: colors_1.ERROR_CODE_FRAME_LINE_BACKGROUND,
-                            color: s.highlight ? colors_1.WHITE : colors_1.WHITE_ALPHA_40,
-                        }, children: String(s.lineNumber).padStart(lineNumberWidth, ' ') }), jsx_runtime_1.jsx("div", { style: {
-                            fontFamily: 'monospace',
-                            whiteSpace: 'pre',
-                            tabSize: 2,
-                            color: s.highlight ? colors_1.WHITE : colors_1.WHITE_ALPHA_40,
-                            backgroundColor: colors_1.TRANSPARENT,
-                            lineHeight: 1.7,
-                            paddingRight: 12,
-                            paddingLeft: 12,
-                        }, children: s.content })
-                ] }, j));
-        }) }));
+    return (jsx_runtime_1.jsx("div", { style: frame, className: is_menu_item_1.HORIZONTAL_SCROLLBAR_CLASSNAME, children: jsx_runtime_1.jsx("div", { style: { minWidth: '100%', width: 'max-content' }, children: source.map((s, j) => {
+                return (jsx_runtime_1.jsxs("div", { style: {
+                        ...container,
+                        backgroundColor: s.highlight
+                            ? colors_1.SELECTED_BACKGROUND
+                            : colors_1.TRANSPARENT,
+                    }, children: [
+                        jsx_runtime_1.jsx("div", { style: {
+                                ...lineNumber,
+                                backgroundColor: s.highlight
+                                    ? colors_1.TRANSPARENT
+                                    : colors_1.ERROR_CODE_FRAME_LINE_BACKGROUND,
+                                color: s.highlight ? colors_1.WHITE : colors_1.WHITE_ALPHA_40,
+                            }, children: String(s.lineNumber).padStart(lineNumberWidth, ' ') }), jsx_runtime_1.jsx("code", { className: "language-tsx", style: {
+                                fontFamily: 'monospace',
+                                fontSize: 14,
+                                color: '#9cdcfe',
+                                whiteSpace: 'pre',
+                                tabSize: 2,
+                                backgroundColor: colors_1.TRANSPARENT,
+                                lineHeight: 1.7,
+                                paddingRight: 12,
+                                paddingLeft: 12,
+                            }, children: jsx_runtime_1.jsx(LazySyntaxHighlightedSource_1.LazySyntaxHighlightedSource, { source: s.content }) })
+                    ] }, j));
+            }) }) }));
 };
 exports.CodeFrame = CodeFrame;