@remotion/studio 4.0.524 → 4.0.526

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

@@ -4,7 +4,6 @@ exports.getOpenInMenuItems = exports.getConfigureDefaultAppsMenuItems = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const no_react_1 = require("remotion/no-react");
 const get_file_manager_name_1 = require("../helpers/get-file-manager-name");
-const get_git_menu_item_1 = require("../helpers/get-git-menu-item");
 const editor_1 = require("../icons/editor");
 const finder_1 = require("../icons/finder");
 const git_client_1 = require("../icons/git-client");
@@ -39,11 +38,11 @@ const getConfigureDefaultAppsMenuItems = ({ hasPreviousItems, onConfigureApps, }
     ];
 };
 exports.getConfigureDefaultAppsMenuItems = getConfigureDefaultAppsMenuItems;
-const getOpenInMenuItems = ({ codingAgentInfo, editorDisabled, editorInfo, excludeCodingAgentId, excludeEditorId, fileManagerDisabled, folder, location, onConfigureApps, onOpenInCodingAgent, onOpenInEditor, onOpenInFileExplorer, onOpenInGitClient, onOpenInTerminal, }) => {
+const getOpenInMenuItems = ({ canOpenDesktopApps, codingAgentInfo, editorDisabled, editorInfo, excludeCodingAgentId, excludeEditorId, excludeGitSource, fileManagerDisabled, folder, gitSourceDisabled, onConfigureApps, onOpenInCodingAgent, onOpenInEditor, onOpenInFileExplorer, onOpenInGitClient, onOpenInGitSource, onOpenInTerminal, }) => {
     var _a, _b, _c, _d;
-    const showFinder = window.remotion_fileSystemPlatform === 'darwin';
+    const showFinder = canOpenDesktopApps && window.remotion_fileSystemPlatform === 'darwin';
     const fileManagerName = (0, get_file_manager_name_1.getFileManagerName)(window.remotion_fileSystemPlatform);
-    const editors = ((_a = editorInfo === null || editorInfo === void 0 ? void 0 : editorInfo.installedEditors) !== null && _a !== void 0 ? _a : [])
+    const editors = (canOpenDesktopApps ? ((_a = editorInfo === null || editorInfo === void 0 ? void 0 : editorInfo.installedEditors) !== null && _a !== void 0 ? _a : []) : [])
         .filter((editor) => editor.id !== excludeEditorId)
         .map((editor) => ({
         disabled: editorDisabled,
@@ -61,7 +60,7 @@ const getOpenInMenuItems = ({ codingAgentInfo, editorDisabled, editorInfo, exclu
         type: 'item',
         value: editor.id,
     }));
-    const codingAgents = ((_b = codingAgentInfo === null || codingAgentInfo === void 0 ? void 0 : codingAgentInfo.installedCodingAgents) !== null && _b !== void 0 ? _b : [])
+    const codingAgents = (canOpenDesktopApps ? ((_b = codingAgentInfo === null || codingAgentInfo === void 0 ? void 0 : codingAgentInfo.installedCodingAgents) !== null && _b !== void 0 ? _b : []) : [])
         .filter((codingAgent) => codingAgent.id !== excludeCodingAgentId)
         .map((codingAgent) => ({
         id: `open-in-coding-agent-${codingAgent.id}`,
@@ -74,16 +73,23 @@ const getOpenInMenuItems = ({ codingAgentInfo, editorDisabled, editorInfo, exclu
         type: 'item',
         value: `coding-agent-${codingAgent.id}`,
     }));
-    const terminals = folder ? ((_c = codingAgentInfo === null || codingAgentInfo === void 0 ? void 0 : codingAgentInfo.installedTerminals) !== null && _c !== void 0 ? _c : []) : [];
-    const gitClients = folder ? ((_d = codingAgentInfo === null || codingAgentInfo === void 0 ? void 0 : codingAgentInfo.installedGitClients) !== null && _d !== void 0 ? _d : []) : [];
-    const gitHubItem = window.remotion_gitSource
+    const terminals = canOpenDesktopApps && folder
+        ? ((_c = codingAgentInfo === null || codingAgentInfo === void 0 ? void 0 : codingAgentInfo.installedTerminals) !== null && _c !== void 0 ? _c : [])
+        : [];
+    const gitClients = canOpenDesktopApps && folder
+        ? ((_d = codingAgentInfo === null || codingAgentInfo === void 0 ? void 0 : codingAgentInfo.installedGitClients) !== null && _d !== void 0 ? _d : [])
+        : [];
+    const gitHubItem = window.remotion_gitSource && !excludeGitSource
         ? {
+            disabled: gitSourceDisabled,
             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 });
+                if (!gitSourceDisabled) {
+                    onOpenInGitSource();
+                }
             },
             quickSwitcherLabel: null,
             subMenu: null,

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" | "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 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" | "toggleLoop" | "toggleMute" | "toggleOutlines" | "toggleRightSidebar" | "toggleRulersAndGuides" | "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" | "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 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

@@ -50,6 +50,7 @@ exports.defaultKeyboardShortcuts = {
     cutEffects: [{ key: 'x', commandOrControl: true }],
     deleteSelection: [{ key: 'Backspace' }, { key: 'Delete' }],
     askAI: [{ key: 'i', commandOrControl: true }],
+    pickColor: [{ key: 'c', shift: true }],
 };
 exports.keyboardShortcutGroups = [
     {
@@ -116,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')],

package/dist/components/selected-outline-order.js

@@ -44,9 +44,7 @@ const getOutlineBounds = (outline) => {
         minY: Math.min(...ys),
     };
 };
-const outlineBoundsOverlap = (a, b) => {
-    const aBounds = getOutlineBounds(a);
-    const bBounds = getOutlineBounds(b);
+const outlineBoundsOverlap = (aBounds, bBounds) => {
     return (aBounds.minX <= bBounds.maxX + outlineBoundsOverlapTolerance &&
         aBounds.maxX + outlineBoundsOverlapTolerance >= bBounds.minX &&
         aBounds.minY <= bBounds.maxY + outlineBoundsOverlapTolerance &&
@@ -177,13 +175,26 @@ const orderOutlineGroup = ({ outlines, parentBySequenceId, targetsByKey, }) => {
     // For unrelated overlapping outlines, put broader hit targets below
     // smaller ones so a large selected sequence cannot swallow clicks on
     // a more specific element in the same canvas area.
+    const bounds = outlines.map(getOutlineBounds);
+    const areas = outlines.map(getOutlineHitArea);
     for (let i = 0; i < outlines.length; i++) {
+        const a = outlines[i];
+        const aTarget = targetsByKey.get(a.key);
+        if (aTarget === undefined) {
+            continue;
+        }
         for (let j = i + 1; j < outlines.length; j++) {
-            const a = outlines[i];
+            if (!outlineBoundsOverlap(bounds[i], bounds[j])) {
+                continue;
+            }
+            const aArea = areas[i];
+            const bArea = areas[j];
+            if (Math.abs(aArea - bArea) <= outlineAreaEqualityTolerance) {
+                continue;
+            }
             const b = outlines[j];
-            const aTarget = targetsByKey.get(a.key);
             const bTarget = targetsByKey.get(b.key);
-            if (aTarget === undefined || bTarget === undefined) {
+            if (bTarget === undefined) {
                 continue;
             }
             const aAncestorOfB = isAncestorTarget({
@@ -196,12 +207,7 @@ const orderOutlineGroup = ({ outlines, parentBySequenceId, targetsByKey, }) => {
                 descendant: aTarget,
                 parentBySequenceId,
             });
-            if (aAncestorOfB || bAncestorOfA || !outlineBoundsOverlap(a, b)) {
-                continue;
-            }
-            const aArea = getOutlineHitArea(a);
-            const bArea = getOutlineHitArea(b);
-            if (Math.abs(aArea - bArea) <= outlineAreaEqualityTolerance) {
+            if (aAncestorOfB || bAncestorOfA) {
                 continue;
             }
             if (aArea > bArea) {

package/dist/components/use-open-in-menu-apps.d.ts

@@ -0,0 +1,14 @@
+import type { EditorPickerId, GetDefaultCodingAgentInfoResponse, GetDefaultEditorInfoResponse } from '@remotion/studio-shared';
+export type OpenInMenuApps = {
+    readonly canOpenDesktopApps: boolean;
+    readonly canOpenInEditor: boolean;
+    readonly codingAgentInfo: GetDefaultCodingAgentInfoResponse | null;
+    readonly defaultEditorId: EditorPickerId | null;
+    readonly defaultEditorName: string | null;
+    readonly editorInfo: GetDefaultEditorInfoResponse | null;
+    readonly onConfigureApps: (() => void) | null;
+};
+export declare const useOpenInMenuApps: () => {
+    connectionStatus: "connected" | "disconnected" | "init";
+    openInApps: OpenInMenuApps;
+};

package/dist/components/use-open-in-menu-apps.js

@@ -0,0 +1,33 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useOpenInMenuApps = void 0;
+const react_1 = require("react");
+const client_id_1 = require("../helpers/client-id");
+const use_configure_default_apps_1 = require("./use-configure-default-apps");
+const use_default_editor_info_1 = require("./use-default-editor-info");
+const useOpenInMenuApps = () => {
+    const connectionStatus = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx)
+        .previewServerState.type;
+    const { canConfigureApps, canOpenInEditor, defaultEditorId, defaultEditorName, editorInfo, } = (0, use_default_editor_info_1.useEditorOpening)(connectionStatus === 'connected');
+    const codingAgentInfo = (0, use_default_editor_info_1.useDefaultCodingAgentInfo)(canConfigureApps);
+    const onConfigureApps = (0, use_configure_default_apps_1.useConfigureDefaultApps)();
+    const openInApps = (0, react_1.useMemo)(() => ({
+        canOpenDesktopApps: canConfigureApps,
+        canOpenInEditor,
+        codingAgentInfo,
+        defaultEditorId,
+        defaultEditorName,
+        editorInfo,
+        onConfigureApps,
+    }), [
+        canOpenInEditor,
+        canConfigureApps,
+        codingAgentInfo,
+        defaultEditorId,
+        defaultEditorName,
+        editorInfo,
+        onConfigureApps,
+    ]);
+    return { connectionStatus, openInApps };
+};
+exports.useOpenInMenuApps = useOpenInMenuApps;

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

@@ -123,7 +123,7 @@ const ErrorDisplay = ({ display, keyboardShortcuts, onRetry, canHaveDismissButto
                         canOpenInEditor &&
                         defaultEditorId &&
                         defaultEditorName ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
-                            jsx_runtime_1.jsx(OpenInEditor_1.OpenInEditor, { canHaveKeyboardShortcuts: keyboardShortcuts, editorId: defaultEditorId, editorName: defaultEditorName, stack: stackFrames[0] }), jsx_runtime_1.jsx("div", { style: spacer })
+                            jsx_runtime_1.jsx(OpenInEditor_1.OpenInEditor, { canHaveKeyboardShortcuts: keyboardShortcuts, editorId: defaultEditorId, editorName: defaultEditorName, size: "default", stack: stackFrames[0] }), jsx_runtime_1.jsx("div", { style: spacer })
                         ] })) : null, jsx_runtime_1.jsx(CodingAgentButton_1.CodingAgentButton, { label: "Fix with", prompt: fixWithAgentPrompt, size: "default", style: codingAgentButton }), jsx_runtime_1.jsx(CopyStackTrace_1.CopyStackTrace, { errorText: errorTextForCopy }), jsx_runtime_1.jsx("div", { style: spacer }), jsx_runtime_1.jsx(SearchGitHubIssues_1.SearchGithubIssues, { canHaveKeyboardShortcuts: keyboardShortcuts, message: display.error.message }), jsx_runtime_1.jsx("div", { style: spacer }), jsx_runtime_1.jsx(AskOnDiscord_1.AskOnDiscord, { canHaveKeyboardShortcuts: keyboardShortcuts }), onRetry ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
                             jsx_runtime_1.jsx("div", { style: spacer }), jsx_runtime_1.jsx(Retry_1.RetryButton, { onClick: onRetry, label: calculateMetadata ? 'Retry calculateMetadata()' : 'Retry' })
                         ] })) : null] }), calculateMetadata ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
@@ -133,7 +133,7 @@ const ErrorDisplay = ({ display, keyboardShortcuts, onRetry, canHaveDismissButto
                 ] })) : null, stackFrames.length > 0 ? (jsx_runtime_1.jsx("div", { style: stack, className: is_menu_item_1.HORIZONTAL_SCROLLBAR_CLASSNAME, children: stackFrames.map((s, i) => {
                     return (jsx_runtime_1.jsx(StackFrame_1.StackElement
                     // eslint-disable-next-line react/no-array-index-key
-                    , { isFirst: i === 0, s: s, lineNumberWidth: lineNumberWidth, defaultFunctionName: '(anonymous function)', editorId: canOpenInEditor ? defaultEditorId : null }, i));
+                    , { collapsible: true, isFirst: i === 0, s: s, fontSize: 14, headerAction: null, horizontalSpacing: 14, lineNumberWidth: lineNumberWidth, defaultFunctionName: '(anonymous function)', editorId: canOpenInEditor ? defaultEditorId : null }, i));
                 }) })) : (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
                     jsx_runtime_1.jsx("pre", { "aria-label": "Unsymbolicated stack trace", className: is_menu_item_1.HORIZONTAL_SCROLLBAR_CLASSNAME, style: rawStack, children: (_a = display.error.stack) !== null && _a !== void 0 ? _a : 'Check the Terminal and browser console for error messages.' }), symbolicationFailure ? (jsx_runtime_1.jsx("div", { style: symbolicationFailureStyle, children: symbolicationFailure })) : null] }))] }));
 };

package/dist/error-overlay/remotion-overlay/OpenInEditor.d.ts

@@ -5,4 +5,5 @@ export declare const OpenInEditor: React.FC<{
     readonly canHaveKeyboardShortcuts: boolean;
     readonly editorId: EditorPickerId;
     readonly editorName: string;
+    readonly size: 'compact' | 'default';
 }>;

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

@@ -17,7 +17,7 @@ const menuLabel = {
     fontSize: 13,
     lineHeight: '16px',
 };
-const OpenInEditor = ({ stack, canHaveKeyboardShortcuts, editorId, editorName }) => {
+const OpenInEditor = ({ stack, canHaveKeyboardShortcuts, editorId, editorName, size }) => {
     const { editorInfo } = (0, SettingsContext_1.useSettings)();
     const configureDefaultApps = (0, use_configure_default_apps_1.useConfigureDefaultApps)();
     const { registerKeybinding } = (0, use_keybinding_1.useKeybinding)();
@@ -68,8 +68,8 @@ const OpenInEditor = ({ stack, canHaveKeyboardShortcuts, editorId, editorName })
         }));
         return editorItems;
     }, [editorId, editorInfo === null || editorInfo === void 0 ? void 0 : editorInfo.installedEditors, openWithEditor]);
-    return (jsx_runtime_1.jsxs(AppLaunchButton_1.AppLaunchButton, { actionButtonId: "error-overlay-open-in-editor", ariaLabel: `Open in ${editorName}`, disabled: false, menuAriaLabel: "Open in another app", menuButtonId: "error-overlay-open-in-another-app", menuItems: menuItems, onConfigureApps: configureDefaultApps, onClick: openPreferredEditor, size: "default", style: null, title: `Open in ${editorName}`, children: [
-            jsx_runtime_1.jsx(editor_1.EditorIcon, { editorId: editorId, size: 14 }),
+    return (jsx_runtime_1.jsxs(AppLaunchButton_1.AppLaunchButton, { actionButtonId: "error-overlay-open-in-editor", ariaLabel: `Open in ${editorName}`, disabled: false, menuAriaLabel: "Open in another app", menuButtonId: "error-overlay-open-in-another-app", menuItems: menuItems, onConfigureApps: configureDefaultApps, onClick: openPreferredEditor, size: size, style: null, title: `Open in ${editorName}`, children: [
+            jsx_runtime_1.jsx(editor_1.EditorIcon, { editorId: editorId, size: size === 'default' ? 14 : 18 }),
             "Open in ", editorName, canHaveKeyboardShortcuts ? (jsx_runtime_1.jsx(ShortcutHint_1.ShortcutHint, { keyToPress: "o", cmdOrCtrl: true })) : null] }));
 };
 exports.OpenInEditor = OpenInEditor;

package/dist/error-overlay/remotion-overlay/StackFrame.d.ts

@@ -4,6 +4,10 @@ export declare const StackElement: React.FC<{
     readonly s: SymbolicatedStackFrame;
     readonly lineNumberWidth: number;
     readonly isFirst: boolean;
-    readonly defaultFunctionName: string;
+    readonly defaultFunctionName: string | null;
     readonly editorId: EditorPickerId | null;
+    readonly collapsible: boolean;
+    readonly fontSize: number;
+    readonly horizontalSpacing: number;
+    readonly headerAction: React.ReactNode;
 }>;

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

@@ -4,22 +4,20 @@ exports.StackElement = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const Button_1 = require("../../components/Button");
+const CodeFrame_1 = require("../../components/CodeFrame");
 const colors_1 = require("../../helpers/colors");
+const hoverable_1 = require("../../helpers/hoverable");
 const open_in_editor_1 = require("../../helpers/open-in-editor");
 const caret_1 = require("../../icons/caret");
-const CodeFrame_1 = require("./CodeFrame");
 const format_location_1 = require("./format-location");
 const location = {
     color: colors_1.LIGHT_TEXT,
     fontFamily: 'monospace',
-    fontSize: 14,
     overflowWrap: 'anywhere',
 };
 const header = {
-    paddingLeft: 14,
     paddingTop: 10,
     paddingBottom: 10,
-    paddingRight: 14,
     display: 'flex',
     flexDirection: 'row',
     alignItems: 'center',
@@ -30,11 +28,10 @@ const left = {
     minWidth: 0,
 };
 const fnName = {
-    fontSize: 14,
     lineHeight: 1.5,
     marginBottom: 3,
 };
-const StackElement = ({ s, lineNumberWidth, isFirst, defaultFunctionName, editorId }) => {
+const StackElement = ({ s, lineNumberWidth, isFirst, defaultFunctionName, editorId, collapsible, fontSize, horizontalSpacing, headerAction, }) => {
     var _a;
     const [showCodeFrame, setShowCodeFrame] = (0, react_1.useState)(() => {
         var _a, _b;
@@ -42,7 +39,6 @@ const StackElement = ({ s, lineNumberWidth, isFirst, defaultFunctionName, editor
             !((_b = s.originalFileName) === null || _b === void 0 ? void 0 : _b.startsWith('webpack/'))) ||
             isFirst;
     });
-    const [locationHovered, setLocationHovered] = (0, react_1.useState)(false);
     const canOpenFileLocation = Boolean(editorId && s.originalFileName);
     const onOpenFileLocation = (0, react_1.useCallback)(() => {
         if (!canOpenFileLocation) {
@@ -59,26 +55,37 @@ const StackElement = ({ s, lineNumberWidth, isFirst, defaultFunctionName, editor
     const toggleCodeFrame = (0, react_1.useCallback)(() => {
         setShowCodeFrame((f) => !f);
     }, []);
+    const functionName = (_a = s.originalFunctionName) !== null && _a !== void 0 ? _a : defaultFunctionName;
+    const shouldShowCodeFrame = collapsible ? showCodeFrame : true;
     return (jsx_runtime_1.jsxs("div", { className: "css-reset", children: [
             jsx_runtime_1.jsxs("div", { style: {
                     ...header,
-                    borderBottom: showCodeFrame ? 'none' : colors_1.BORDER_WHITE_ALPHA_12,
+                    borderBottom: shouldShowCodeFrame ? 'none' : colors_1.BORDER_WHITE_ALPHA_12,
+                    paddingLeft: horizontalSpacing,
+                    paddingRight: horizontalSpacing,
                 }, children: [
-                    jsx_runtime_1.jsxs("div", { style: left, children: [
-                            jsx_runtime_1.jsx("div", { style: fnName, children: (_a = s.originalFunctionName) !== null && _a !== void 0 ? _a : defaultFunctionName }), s.originalFileName ? (jsx_runtime_1.jsx("div", { style: location, children: canOpenFileLocation ? (jsx_runtime_1.jsxs("span", { onClick: onOpenFileLocation, onPointerEnter: () => {
-                                        setLocationHovered(true);
-                                    }, onPointerLeave: () => {
-                                        setLocationHovered(false);
-                                    }, style: {
+                    jsx_runtime_1.jsxs("div", { style: left, children: [functionName === null ? null : (jsx_runtime_1.jsx("div", { style: { ...fnName, fontSize }, children: functionName })), s.originalFileName ? (jsx_runtime_1.jsx("div", { style: { ...location, fontSize }, children: canOpenFileLocation ? (jsx_runtime_1.jsxs("button", { type: "button", className: `${hoverable_1.HOVERABLE_CLASS_NAME} ${hoverable_1.FOCUS_VISIBLE_ONLY_CLASS_NAME}`, onClick: onOpenFileLocation, style: {
                                         ...location,
-                                        color: locationHovered ? colors_1.WHITE : colors_1.LIGHT_TEXT,
-                                        cursor: 'pointer',
-                                    }, children: [(0, format_location_1.formatLocation)(s.originalFileName), ":", s.originalLineNumber] })) : (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [(0, format_location_1.formatLocation)(s.originalFileName), ":", s.originalLineNumber] })) })) : null] }), s.originalScriptCode && s.originalScriptCode.length > 0 ? (jsx_runtime_1.jsx(Button_1.Button, { onClick: toggleCodeFrame, children: jsx_runtime_1.jsx("div", { style: {
+                                        ...(0, hoverable_1.hoverableStyle)({
+                                            idleBackground: colors_1.TRANSPARENT,
+                                            hoverBackground: colors_1.TRANSPARENT,
+                                            idleColor: colors_1.LIGHT_TEXT,
+                                            hoverColor: colors_1.WHITE,
+                                        }),
+                                        appearance: 'none',
+                                        border: 'none',
+                                        color: undefined,
+                                        cursor: 'default',
+                                        fontSize,
+                                        padding: 0,
+                                    }, children: [(0, format_location_1.formatLocation)(s.originalFileName), ":", s.originalLineNumber] })) : (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [(0, format_location_1.formatLocation)(s.originalFileName), ":", s.originalLineNumber] })) })) : null] }), headerAction, collapsible &&
+                        s.originalScriptCode &&
+                        s.originalScriptCode.length > 0 ? (jsx_runtime_1.jsx(Button_1.Button, { onClick: toggleCodeFrame, children: jsx_runtime_1.jsx("div", { style: {
                                 display: 'flex',
-                                transform: showCodeFrame ? undefined : 'rotate(-90deg)',
+                                transform: shouldShowCodeFrame ? undefined : 'rotate(-90deg)',
                             }, children: jsx_runtime_1.jsx(caret_1.CaretDown, {}) }) })) : null] }), jsx_runtime_1.jsx("div", { children: s.originalScriptCode &&
                     s.originalScriptCode.length > 0 &&
-                    showCodeFrame ? (jsx_runtime_1.jsx(CodeFrame_1.CodeFrame, { lineNumberWidth: lineNumberWidth, source: s.originalScriptCode })) : null })
+                    shouldShowCodeFrame ? (jsx_runtime_1.jsx(CodeFrame_1.CodeFrame, { fontSize: fontSize, horizontalMargin: horizontalSpacing, lineNumberWidth: lineNumberWidth, source: s.originalScriptCode })) : null })
         ] }));
 };
 exports.StackElement = StackElement;

package/dist/esm/{LazyModels-hc33szyn.mjs → LazyModels-mtggyjye.mjs}

@@ -1,8 +1,8 @@
 import {
   Models
-} from "./index-e3zwf3e7.mjs";
-import"./index-2j3d1g81.mjs";
-import"./index-yfrysr5f.mjs";
+} from "./index-5gd8k9yv.mjs";
+import"./index-g7k2dvar.mjs";
+import"./index-cdy8v54v.mjs";
 import"./index-5zrb1ft4.mjs";
 import"./index-k426ye99.mjs";
 import"./index-rcv7qkt5.mjs";

package/dist/esm/{LazyModels-sg40rjw6.mjs → LazyModels-nk7py0zt.mjs}

@@ -1,8 +1,8 @@
 import {
   Models
-} from "./index-wbmp5srk.mjs";
-import"./index-2j3d1g81.mjs";
-import"./index-yfrysr5f.mjs";
+} from "./index-5bfxbpca.mjs";
+import"./index-g7k2dvar.mjs";
+import"./index-cdy8v54v.mjs";
 import"./index-5zrb1ft4.mjs";
 import"./index-k426ye99.mjs";
 import"./index-rcv7qkt5.mjs";

package/dist/esm/{TranscriptionModal-3ctnxpt6.mjs → TranscriptionModal-ymnx1c7m.mjs}

@@ -6,7 +6,7 @@ import {
   NumberSetting,
   getDefaultCaptionOutputName,
   validateCaptionOutputName
-} from "./index-q2epbw93.mjs";
+} from "./index-f97r9e2g.mjs";
 import {
   Button,
   Checkbox,
@@ -32,20 +32,20 @@ import {
   rightRow,
   showNotification,
   useStaticFiles
-} from "./index-c37kme2v.mjs";
+} from "./index-bs39wngg.mjs";
 import {
   RenderQueueContext
 } from "./index-9x6e1dq0.mjs";
 import {
   openInFileExplorer
-} from "./index-9qtvmwtx.mjs";
+} from "./index-eb5txqp6.mjs";
 import {
   getBrowserStudioOperations
 } from "./index-cw0pnpg5.mjs";
 import {
   Models
-} from "./index-e3zwf3e7.mjs";
-import"./index-2j3d1g81.mjs";
+} from "./index-5gd8k9yv.mjs";
+import"./index-g7k2dvar.mjs";
 import {
   InlineAction,
   Spacing,
@@ -61,7 +61,7 @@ import {
   leftSidebar,
   optionsPanel,
   outerModalStyle
-} from "./index-yfrysr5f.mjs";
+} from "./index-cdy8v54v.mjs";
 import"./index-5zrb1ft4.mjs";
 import {
   BLUE_DISABLED,

package/dist/esm/{VideoMattingModal-b0r7e60n.mjs → VideoMattingModal-05vpczks.mjs}

@@ -3,7 +3,7 @@ import {
 } from "./index-7tt71e8n.mjs";
 import {
   RenderModalOutputName
-} from "./index-1b9skrrd.mjs";
+} from "./index-x40wwfmt.mjs";
 import {
   Button,
   Checkmark,
@@ -25,16 +25,16 @@ import {
   rightRow,
   useStaticFiles,
   validatePublicOutputName
-} from "./index-c37kme2v.mjs";
+} from "./index-bs39wngg.mjs";
 import {
   RenderQueueContext
 } from "./index-9x6e1dq0.mjs";
-import"./index-9qtvmwtx.mjs";
+import"./index-eb5txqp6.mjs";
 import"./index-cw0pnpg5.mjs";
 import {
   Models
-} from "./index-wbmp5srk.mjs";
-import"./index-2j3d1g81.mjs";
+} from "./index-5bfxbpca.mjs";
+import"./index-g7k2dvar.mjs";
 import {
   VERTICAL_SCROLLBAR_CLASSNAME,
   ValidationMessage,
@@ -48,7 +48,7 @@ import {
   leftSidebar,
   optionsPanel,
   outerModalStyle
-} from "./index-yfrysr5f.mjs";
+} from "./index-cdy8v54v.mjs";
 import"./index-5zrb1ft4.mjs";
 import {
   BLUE_DISABLED