@remotion/studio 4.0.523 → 4.0.525

package/dist/components/composition-menu-items.js

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.getCompositionContextMenuItems = exports.getCompositionMenuItems = void 0;
 const no_react_1 = require("remotion/no-react");
 const format_file_location_1 = require("../helpers/format-file-location");
+const get_git_menu_item_1 = require("../helpers/get-git-menu-item");
 const open_in_editor_1 = require("../helpers/open-in-editor");
 const NotificationCenter_1 = require("./Notifications/NotificationCenter");
 const open_in_new_window_1 = require("./open-in-new-window");
@@ -22,6 +23,13 @@ const getCompositionMenuItems = ({ composition, connectionStatus, resolvedLocati
         connectionStatus !== 'connected' ||
         !resolvedLocation;
     const openComponentInEditorDisabled = showInEditorDisabled || !(resolvedLocation === null || resolvedLocation === void 0 ? void 0 : resolvedLocation.source);
+    const gitSourceName = window.remotion_gitSource
+        ? (0, get_git_menu_item_1.getGitSourceName)(window.remotion_gitSource)
+        : null;
+    const openCompositionInGitSourceDisabled = !composition || !resolvedLocation;
+    const openComponentInGitSourceDisabled = openCompositionInGitSourceDisabled ||
+        !(resolvedLocation === null || resolvedLocation === void 0 ? void 0 : resolvedLocation.source) ||
+        (!readOnlyStudio && connectionStatus !== 'connected');
     const copyFileLocationDisabled = !composition || !fileLocation;
     return [
         editorName
@@ -78,7 +86,53 @@ const getCompositionMenuItems = ({ composition, connectionStatus, resolvedLocati
                 disabled: openComponentInEditorDisabled,
             }
             : null,
-        editorName && includeCompositionManagementItems
+        gitSourceName
+            ? {
+                id: 'open-composition-in-git-source',
+                keyHint: null,
+                label: `Open composition in ${gitSourceName}`,
+                leftItem: null,
+                onClick: () => {
+                    closeMenu();
+                    (0, get_git_menu_item_1.openGitSource)({ folder: false, location: resolvedLocation });
+                },
+                quickSwitcherLabel: `Open composition in ${gitSourceName}`,
+                subMenu: null,
+                type: 'item',
+                value: 'open-composition-in-git-source',
+                disabled: openCompositionInGitSourceDisabled,
+            }
+            : null,
+        gitSourceName
+            ? {
+                id: 'open-component-in-git-source',
+                keyHint: null,
+                label: `Open component in ${gitSourceName}`,
+                leftItem: null,
+                onClick: async () => {
+                    closeMenu();
+                    if (!composition || !(resolvedLocation === null || resolvedLocation === void 0 ? void 0 : resolvedLocation.source)) {
+                        return;
+                    }
+                    try {
+                        const info = await (0, open_in_editor_1.loadCompositionComponentInfo)({
+                            compositionFile: resolvedLocation.source,
+                            compositionId: composition.id,
+                        });
+                        (0, get_git_menu_item_1.openGitSource)({ folder: false, location: info.location });
+                    }
+                    catch (err) {
+                        (0, NotificationCenter_1.showNotification)(err.message, 2000);
+                    }
+                },
+                quickSwitcherLabel: `Open composition component in ${gitSourceName}`,
+                subMenu: null,
+                type: 'item',
+                value: 'open-component-in-git-source',
+                disabled: openComponentInGitSourceDisabled,
+            }
+            : null,
+        (editorName || gitSourceName) && includeCompositionManagementItems
             ? {
                 type: 'divider',
                 id: 'show-in-editor-divider',
@@ -154,7 +208,7 @@ const getCompositionMenuItems = ({ composition, connectionStatus, resolvedLocati
                 disabled: !composition || readOnlyStudio,
             }
             : null,
-        editorName || includeCompositionManagementItems
+        editorName || gitSourceName || includeCompositionManagementItems
             ? {
                 type: 'divider',
                 id: 'copy-actions-divider',

package/dist/components/folder-menu-items.js

@@ -15,6 +15,11 @@ const getFolderMenuItems = ({ closeMenu, connectionStatus, folder, readOnlyStudi
         location: resolvedLocation,
         root: window.remotion_cwd,
     });
+    const contextForAgents = (0, format_file_location_1.formatContextForAgents)({
+        location: resolvedLocation,
+        name: folderId,
+        root: window.remotion_cwd,
+    });
     const showInEditorDisabled = !editorId || connectionStatus !== 'connected' || !resolvedLocation;
     const copyFileLocationDisabled = !fileLocation;
     const codemodDisabled = readOnlyStudio || !folder.stack;
@@ -44,6 +49,26 @@ const getFolderMenuItems = ({ closeMenu, connectionStatus, folder, readOnlyStudi
                 disabled: showInEditorDisabled,
             }
             : null,
+        {
+            id: 'copy-context-for-agents',
+            keyHint: null,
+            label: `Copy context for agents`,
+            leftItem: null,
+            onClick: () => {
+                closeMenu();
+                if (!contextForAgents) {
+                    return;
+                }
+                navigator.clipboard.writeText(contextForAgents).catch((err) => {
+                    (0, NotificationCenter_1.showNotification)(`Could not copy to clipboard: ${err.message}`, 1000);
+                });
+            },
+            quickSwitcherLabel: null,
+            subMenu: null,
+            type: 'item',
+            value: 'copy-context-for-agents',
+            disabled: !contextForAgents,
+        },
         {
             id: 'copy-folder-file-location',
             keyHint: null,
@@ -96,6 +121,25 @@ const getFolderMenuItems = ({ closeMenu, connectionStatus, folder, readOnlyStudi
             value: 'new-composition-in-folder',
             disabled: codemodDisabled,
         },
+        {
+            id: 'new-folder-in-folder',
+            keyHint: null,
+            label: `New folder...`,
+            leftItem: null,
+            onClick: () => {
+                closeMenu();
+                setSelectedModal({
+                    type: 'new-folder',
+                    parentName: folderId,
+                    stack: folder.stack,
+                });
+            },
+            quickSwitcherLabel: 'New folder in folder...',
+            subMenu: null,
+            type: 'item',
+            value: 'new-folder-in-folder',
+            disabled: codemodDisabled,
+        },
         {
             id: 'rename-folder',
             keyHint: null,

package/dist/components/get-open-in-menu-items.js

@@ -81,7 +81,7 @@ const getOpenInMenuItems = ({ codingAgentInfo, editorDisabled, editorInfo, exclu
             id: 'open-in-github',
             keyHint: null,
             label: jsx_runtime_1.jsx("span", { style: menuLabel, children: "GitHub.com" }),
-            leftItem: jsx_runtime_1.jsx(github_1.GitHubIcon, { size: 18 }),
+            leftItem: jsx_runtime_1.jsx(github_1.GitHubIcon, { size: 16 }),
             onClick: () => {
                 (0, get_git_menu_item_1.openGitSource)({ folder, location });
             },

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,7 @@ export declare const insertComposition: ({ composition, compositionFile, composi
     from: number | null;
     preferCompositionStart: boolean | null;
 }) => Promise<void>;
-export declare const insertElement: ({ installationName, compositionFile, compositionId, element, expectedFileState, position, from, overwriteExisting, }: {
+export declare const insertElement: ({ installationName, compositionFile, compositionId, element, expectedFileState, position, from, overwriteExisting, undoRedoNavigation, newComposition, }: {
     installationName: string | null;
     compositionFile: string;
     compositionId: string;
@@ -165,4 +165,27 @@ export declare const insertElement: ({ installationName, compositionFile, compos
     position: InsertableCompositionElementPosition | null;
     from: number | null;
     overwriteExisting: boolean;
+    undoRedoNavigation: import("@remotion/studio-shared").UndoRedoNavigation | null;
+    newComposition: {
+        codemod: {
+            type: "new-composition";
+            newId: string;
+            componentName: string;
+            componentImportPath: string;
+            folderName: string | null;
+            parentName: string | null;
+            newHeight: number;
+            newWidth: number;
+            newFps: number;
+            newDurationInFrames: number;
+            canvasCapture: {
+                readonly videoFileName: string;
+                readonly videoHeight: number;
+                readonly videoWidth: number;
+                readonly keyframeFps: number;
+                readonly data: import("@remotion/studio-shared").CanvasCaptureData;
+            } | null;
+        };
+        symbolicatedStack: import("@remotion/studio-shared").SymbolicatedStackFrame | null;
+    } | null;
 }) => Promise<boolean>;

package/dist/components/import-assets.js

@@ -875,7 +875,7 @@ const insertComposition = async ({ composition, compositionFile, compositionId,
     }
 };
 exports.insertComposition = insertComposition;
-const insertElement = async ({ installationName, compositionFile, compositionId, element, expectedFileState, position, from, overwriteExisting, }) => {
+const insertElement = async ({ installationName, compositionFile, compositionId, element, expectedFileState, position, from, overwriteExisting, undoRedoNavigation, newComposition, }) => {
     try {
         if ((0, browser_studio_operations_1.getBrowserStudioOperations)() === null) {
             await (0, install_required_package_1.installRequiredPackages)(element.dependencies);
@@ -889,6 +889,8 @@ const insertElement = async ({ installationName, compositionFile, compositionId,
             from,
             overwriteExisting,
             position,
+            undoRedoNavigation,
+            newComposition,
         });
         if (!response.success) {
             const reason = response.type === 'error'

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

@@ -12,15 +12,15 @@ export type KeyboardShortcutGroup = {
 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" | "toggleRightSidebar" | "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" | "toggleRightSidebar" | "toggleSnapping" | "undo" | "zoomIn" | "zoomOut", StudioKeyboardShortcutValue>> | null) => readonly StudioKeyboardShortcut[];
+export declare const getKeyboardShortcutsForAction: (action: "askAI" | "clearInOutPoints" | "copyEffectsAndValues" | "cutEffects" | "deleteSelection" | "duplicateSequences" | "enterFullscreen" | "goToFrame" | "jumpToBeginning" | "jumpToEnd" | "nextComposition" | "pauseAndReturnToPlaybackStart" | "pausePlayback" | "pickColor" | "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" | "pickColor" | "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" | "toggleRightSidebar" | "toggleSnapping" | "undo" | "zoomIn" | "zoomOut") => boolean;
+export declare const keyboardEventMatchesAction: (event: KeyboardEvent, action: "askAI" | "clearInOutPoints" | "copyEffectsAndValues" | "cutEffects" | "deleteSelection" | "duplicateSequences" | "enterFullscreen" | "goToFrame" | "jumpToBeginning" | "jumpToEnd" | "nextComposition" | "pauseAndReturnToPlaybackStart" | "pausePlayback" | "pickColor" | "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" | "toggleRightSidebar" | "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" | "toggleRightSidebar" | "toggleSnapping" | "undo" | "zoomIn" | "zoomOut") => string;
+export declare const getKeyboardShortcutLabel: (action: "askAI" | "clearInOutPoints" | "copyEffectsAndValues" | "cutEffects" | "deleteSelection" | "duplicateSequences" | "enterFullscreen" | "goToFrame" | "jumpToBeginning" | "jumpToEnd" | "nextComposition" | "pauseAndReturnToPlaybackStart" | "pausePlayback" | "pickColor" | "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" | "pickColor" | "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

@@ -7,11 +7,13 @@ 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' }],
+    playForward: [{ key: 'l', shift: false }],
     goToFrame: [{ key: 'g' }],
     pauseAndReturnToPlaybackStart: [{ key: 'Enter' }],
     toggleLeftSidebar: [{ key: 'b', commandOrControl: true }],
@@ -19,14 +21,16 @@ exports.defaultKeyboardShortcuts = {
     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' }],
+    render: [{ key: 'r', shift: false }],
     toggleCheckerboard: [{ key: 't' }],
     setInPoint: [{ key: 'i' }],
-    setOutPoint: [{ key: 'o' }],
+    setOutPoint: [{ key: 'o', shift: false }],
     clearInOutPoints: [{ key: 'x' }],
     zoomIn: [{ key: '+', shift: true }, { key: '+' }],
     zoomOut: [{ key: '-' }],
@@ -39,13 +43,14 @@ exports.defaultKeyboardShortcuts = {
     selectAllSequenceRows: [{ key: 'a', commandOrControl: true }],
     selectTranslateProp: [{ key: 'p' }],
     selectOpacityProp: [{ key: 't' }],
-    selectRotateProp: [{ key: 'r' }],
+    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 }],
+    pickColor: [{ key: 'c', shift: true }],
 };
 exports.keyboardShortcutGroups = [
     {
@@ -54,6 +59,8 @@ exports.keyboardShortcutGroups = [
             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'),
@@ -79,6 +86,8 @@ exports.keyboardShortcutGroups = [
             shortcut('Enter fullscreen', 'enterFullscreen'),
             fixedShortcut('Exit fullscreen', [['Esc']], 'Handled by the browser'),
             shortcut('Enable snapping', 'toggleSnapping'),
+            shortcut('Outlines', 'toggleOutlines'),
+            shortcut('Rulers and guides', 'toggleRulersAndGuides'),
         ],
     },
     {
@@ -108,6 +117,10 @@ exports.keyboardShortcutGroups = [
             shortcut('Reset zoom', 'resetZoom'),
         ],
     },
+    {
+        name: 'Tools',
+        shortcuts: [shortcut('Color Picker', 'pickColor')],
+    },
     {
         name: 'Props Editor',
         shortcuts: [shortcut('Undo', 'undo'), shortcut('Redo', 'redo')],
@@ -157,14 +170,20 @@ const keyboardEventMatchesShortcut = ({ event, shortcut: value, }) => {
     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 || event.shiftKey) &&
-        (!value.alt || event.altKey));
+        (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);
+        ((_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 }));
@@ -216,8 +235,8 @@ const shortcutFromKeyboardEvent = (event) => {
         ...((is_mac_1.isMac ? event.metaKey : event.ctrlKey)
             ? { commandOrControl: true }
             : {}),
-        ...(event.shiftKey ? { shift: true } : {}),
-        ...(event.altKey ? { alt: true } : {}),
+        shift: event.shiftKey,
+        alt: event.altKey,
     };
 };
 exports.shortcutFromKeyboardEvent = shortcutFromKeyboardEvent;

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;

package/dist/esm/LazyModels-gfmpcy4h.mjs

@@ -0,0 +1,11 @@
+import {
+  Models
+} from "./index-vsxrxfpj.mjs";
+import"./index-jrw61pkj.mjs";
+import"./index-0x13f28h.mjs";
+import"./index-5zrb1ft4.mjs";
+import"./index-k426ye99.mjs";
+import"./index-rcv7qkt5.mjs";
+export {
+  Models as default
+};

package/dist/esm/LazyModels-m1rf06wh.mjs

@@ -0,0 +1,11 @@
+import {
+  Models
+} from "./index-hbezgbbq.mjs";
+import"./index-jrw61pkj.mjs";
+import"./index-0x13f28h.mjs";
+import"./index-5zrb1ft4.mjs";
+import"./index-k426ye99.mjs";
+import"./index-rcv7qkt5.mjs";
+export {
+  Models as default
+};

package/dist/esm/{HighlightedElementSource-jfc66k4p.mjs → SyntaxHighlightedSource-3xks91rz.mjs}

@@ -1184,7 +1184,7 @@ var init_prism_tsx = __esm(() => {
   })(Prism);
 });
 
-// src/components/HighlightedElementSource.tsx
+// src/components/SyntaxHighlightedSource.tsx
 var import_prismjs = __toESM(require_prism(), 1);
 import React, { useMemo } from "react";
 import { jsx } from "react/jsx-runtime";
@@ -1221,7 +1221,7 @@ var renderTokens = (tokens) => {
     children: renderTokens(tokens.content)
   });
 };
-var HighlightedElementSource = ({
+var SyntaxHighlightedSource = ({
   source
 }) => {
   const tokens = useMemo(() => import_prismjs.default.tokenize(source, import_prismjs.default.languages.tsx), [source]);
@@ -1230,7 +1230,7 @@ var HighlightedElementSource = ({
     children: renderTokens(tokens)
   });
 };
-var HighlightedElementSource_default = HighlightedElementSource;
+var SyntaxHighlightedSource_default = SyntaxHighlightedSource;
 export {
-  HighlightedElementSource_default as default
+  SyntaxHighlightedSource_default as default
 };

package/dist/esm/{TranscriptionModal-916jqhry.mjs → TranscriptionModal-8pvrehg4.mjs}

@@ -6,7 +6,7 @@ import {
   NumberSetting,
   getDefaultCaptionOutputName,
   validateCaptionOutputName
-} from "./index-sgtmgc4h.mjs";
+} from "./index-1089795y.mjs";
 import {
   Button,
   Checkbox,
@@ -32,20 +32,20 @@ import {
   rightRow,
   showNotification,
   useStaticFiles
-} from "./index-6cvm9a65.mjs";
+} from "./index-ggqpre9v.mjs";
 import {
   RenderQueueContext
 } from "./index-9x6e1dq0.mjs";
 import {
   openInFileExplorer
-} from "./index-hy4xcgty.mjs";
+} from "./index-41kqns5c.mjs";
 import {
   getBrowserStudioOperations
 } from "./index-cw0pnpg5.mjs";
 import {
   Models
-} from "./index-5qddp5h7.mjs";
-import"./index-1x7bsdh6.mjs";
+} from "./index-vsxrxfpj.mjs";
+import"./index-jrw61pkj.mjs";
 import {
   InlineAction,
   Spacing,
@@ -61,13 +61,13 @@ import {
   leftSidebar,
   optionsPanel,
   outerModalStyle
-} from "./index-xhe2m2qr.mjs";
+} from "./index-0x13f28h.mjs";
 import"./index-5zrb1ft4.mjs";
 import {
   BLUE_DISABLED,
   LIGHT_TEXT,
   WHITE
-} from "./index-jg13hf2g.mjs";
+} from "./index-k426ye99.mjs";
 import"./index-rcv7qkt5.mjs";
 
 // src/components/Transcription/TranscriptionModal.tsx

package/dist/esm/{VideoMattingModal-2tm79s9b.mjs → VideoMattingModal-fefbzgka.mjs}

@@ -3,7 +3,7 @@ import {
 } from "./index-7tt71e8n.mjs";
 import {
   RenderModalOutputName
-} from "./index-te66vvrp.mjs";
+} from "./index-mww32xc8.mjs";
 import {
   Button,
   Checkmark,
@@ -25,16 +25,16 @@ import {
   rightRow,
   useStaticFiles,
   validatePublicOutputName
-} from "./index-6cvm9a65.mjs";
+} from "./index-ggqpre9v.mjs";
 import {
   RenderQueueContext
 } from "./index-9x6e1dq0.mjs";
-import"./index-hy4xcgty.mjs";
+import"./index-41kqns5c.mjs";
 import"./index-cw0pnpg5.mjs";
 import {
   Models
-} from "./index-czwvnn9g.mjs";
-import"./index-1x7bsdh6.mjs";
+} from "./index-hbezgbbq.mjs";
+import"./index-jrw61pkj.mjs";
 import {
   VERTICAL_SCROLLBAR_CLASSNAME,
   ValidationMessage,
@@ -48,11 +48,11 @@ import {
   leftSidebar,
   optionsPanel,
   outerModalStyle
-} from "./index-xhe2m2qr.mjs";
+} from "./index-0x13f28h.mjs";
 import"./index-5zrb1ft4.mjs";
 import {
   BLUE_DISABLED
-} from "./index-jg13hf2g.mjs";
+} from "./index-k426ye99.mjs";
 import"./index-rcv7qkt5.mjs";
 
 // src/components/VideoMatting/VideoMattingModal.tsx