@remotion/studio 4.0.524 → 4.0.526

package/dist/helpers/open-in-editor.js

@@ -33,7 +33,7 @@ var __importStar = (this && this.__importStar) || (function () {
     };
 })();
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.openCompositionComponentInEditor = exports.preloadCompositionComponentInfo = exports.loadCompositionComponentInfo = exports.useCachedCompositionComponentInfo = exports.getCachedCompositionComponentInfo = exports.subscribeToCompositionComponentInfo = exports.openOriginalPositionInEditorAtProperty = exports.openOriginalPositionInEditor = exports.openInGitClient = exports.openInTerminal = exports.openInCodingAgent = exports.openInEditor = void 0;
+exports.openCompositionComponentInEditor = exports.preloadCompositionComponentInfo = exports.loadCompositionComponentInfo = exports.useCachedCompositionComponentInfo = exports.getCachedCompositionComponentInfo = exports.subscribeToCompositionComponentInfo = exports.openOriginalPositionInEditorAtProperty = exports.findOriginalPositionInFileAtProperty = exports.openOriginalPositionInEditor = exports.openInGitClient = exports.openInTerminal = exports.openInCodingAgent = exports.openInEditor = void 0;
 const react_1 = require("react");
 const call_api_1 = require("../components/call-api");
 const get_stack_1 = require("../components/Timeline/TimelineStack/get-stack");
@@ -78,7 +78,7 @@ const openOriginalPositionInEditor = async (originalPosition, editorId) => {
     }
 };
 exports.openOriginalPositionInEditor = openOriginalPositionInEditor;
-const openOriginalPositionInEditorAtProperty = async ({ editorId, originalPosition, property, }) => {
+const findOriginalPositionInFileAtProperty = async ({ originalPosition, property, }) => {
     const request = {
         fileName: originalPosition.source,
         lineNumber: originalPosition.line,
@@ -89,11 +89,19 @@ const openOriginalPositionInEditorAtProperty = async ({ editorId, originalPositi
     const position = browserStudioOperations
         ? await browserStudioOperations.findInFile(request)
         : await (0, call_api_1.callApi)('/api/find-in-file', request);
-    await (0, exports.openOriginalPositionInEditor)({
+    return {
         source: originalPosition.source,
         line: position.lineNumber,
         column: position.columnNumber,
-    }, editorId);
+    };
+};
+exports.findOriginalPositionInFileAtProperty = findOriginalPositionInFileAtProperty;
+const openOriginalPositionInEditorAtProperty = async ({ editorId, originalPosition, property, }) => {
+    const position = await (0, exports.findOriginalPositionInFileAtProperty)({
+        originalPosition,
+        property,
+    });
+    await (0, exports.openOriginalPositionInEditor)(position, editorId);
 };
 exports.openOriginalPositionInEditorAtProperty = openOriginalPositionInEditorAtProperty;
 const componentResolutionCache = new Map();

package/dist/helpers/pointer-session.d.ts

@@ -1,4 +1,5 @@
 export type PointerSessionEndReason = 'pointerup' | 'pointercancel' | 'lostpointercapture' | 'blur' | 'visibilitychange' | 'buttons-released' | 'manual';
+export declare const isPointerSessionRelease: (reason: PointerSessionEndReason, event: PointerEvent | null) => event is PointerEvent;
 type PointerSessionEvent = Pick<PointerEvent, 'button' | 'pointerId'>;
 export declare const startCapturedPointerSession: ({ event, captureTarget, onMove, onEnd, }: {
     event: PointerSessionEvent;

package/dist/helpers/pointer-session.js

@@ -1,6 +1,15 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.observePointerRelease = exports.startDeferredCapturedPointerSession = exports.startCapturedPointerSession = void 0;
+exports.observePointerRelease = exports.startDeferredCapturedPointerSession = exports.startCapturedPointerSession = exports.isPointerSessionRelease = void 0;
+const isPointerSessionRelease = (reason, event) => {
+    if (event === null) {
+        return false;
+    }
+    return (reason === 'pointerup' ||
+        reason === 'buttons-released' ||
+        (reason === 'lostpointercapture' && event.buttons === 0));
+};
+exports.isPointerSessionRelease = isPointerSessionRelease;
 const getButtonMask = (button) => {
     if (button === 0) {
         return 1;

package/dist/helpers/settings-tab-availability.d.ts

@@ -0,0 +1,14 @@
+export type SettingsTab = 'apps' | 'rendering' | 'studio' | 'packages' | 'models' | 'shortcuts' | 'skills' | 'license' | 'updates';
+type StudioMode = {
+    readonly isBrowserStudio: boolean;
+    readonly previewServerConnected: boolean;
+    readonly readOnlyStudio: boolean;
+};
+export declare const canEditStudioConfig: ({ isBrowserStudio, previewServerConnected, readOnlyStudio, }: StudioMode) => boolean;
+export declare const canInstallPackagesInStudio: (studioMode: StudioMode) => boolean;
+export declare const getAvailableSettingsTabs: ({ isBrowserStudio, packageManagerAvailable, previewServerConnected, readOnlyStudio, showUpdates, }: StudioMode & {
+    readonly packageManagerAvailable: boolean;
+    readonly showUpdates: boolean;
+}) => SettingsTab[];
+export declare const getSafeSettingsTab: (requestedTab: SettingsTab, availableTabs: readonly SettingsTab[]) => SettingsTab;
+export {};

package/dist/helpers/settings-tab-availability.js

@@ -0,0 +1,35 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getSafeSettingsTab = exports.getAvailableSettingsTabs = exports.canInstallPackagesInStudio = exports.canEditStudioConfig = void 0;
+const canEditStudioConfig = ({ isBrowserStudio, previewServerConnected, readOnlyStudio, }) => {
+    return previewServerConnected && !readOnlyStudio && !isBrowserStudio;
+};
+exports.canEditStudioConfig = canEditStudioConfig;
+const canInstallPackagesInStudio = (studioMode) => {
+    return studioMode.isBrowserStudio || (0, exports.canEditStudioConfig)(studioMode);
+};
+exports.canInstallPackagesInStudio = canInstallPackagesInStudio;
+const getAvailableSettingsTabs = ({ isBrowserStudio, packageManagerAvailable, previewServerConnected, readOnlyStudio, showUpdates, }) => {
+    const studioMode = {
+        isBrowserStudio,
+        previewServerConnected,
+        readOnlyStudio,
+    };
+    const canEditConfig = (0, exports.canEditStudioConfig)(studioMode);
+    const canInstallPackages = (0, exports.canInstallPackagesInStudio)(studioMode) &&
+        (isBrowserStudio || packageManagerAvailable);
+    return [
+        ...(canEditConfig ? ['studio', 'rendering'] : []),
+        'shortcuts',
+        ...(canInstallPackages ? ['packages'] : []),
+        ...(canEditConfig ? ['skills'] : []),
+        ...(isBrowserStudio || !readOnlyStudio ? ['models'] : []),
+        ...(canEditConfig ? ['apps', 'license'] : []),
+        ...(showUpdates ? ['updates'] : []),
+    ];
+};
+exports.getAvailableSettingsTabs = getAvailableSettingsTabs;
+const getSafeSettingsTab = (requestedTab, availableTabs) => {
+    return availableTabs.includes(requestedTab) ? requestedTab : 'shortcuts';
+};
+exports.getSafeSettingsTab = getSafeSettingsTab;

package/dist/helpers/studio-runtime-config.d.ts

@@ -2,6 +2,6 @@ export declare const DEFAULT_BUFFER_STATE_DELAY_IN_MILLISECONDS = 300;
 export declare const getStudioAskAIEnabled: () => boolean;
 export declare const getStudioInteractivityEnabled: () => boolean;
 export declare const getStudioKeyboardShortcutsEnabled: () => boolean;
-export declare const getStudioKeyboardShortcuts: () => 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", import("@remotion/studio-shared").StudioKeyboardShortcutValue>> | null;
+export declare const getStudioKeyboardShortcuts: () => 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", import("@remotion/studio-shared").StudioKeyboardShortcutValue>> | null;
 export declare const getStudioMaxTimelineTracks: () => number | null;
 export declare const getStudioBufferStateDelayInMilliseconds: () => number;

package/dist/helpers/use-create-composition.js

@@ -5,6 +5,7 @@ const react_1 = require("react");
 const InitialCompositionLoader_1 = require("../components/InitialCompositionLoader");
 const actions_1 = require("../components/RenderQueue/actions");
 const slugify_name_1 = require("./slugify-name");
+const url_state_1 = require("./url-state");
 const validate_new_comp_data_1 = require("./validate-new-comp-data");
 const toPascalCase = (value) => {
     var _a;
@@ -89,6 +90,10 @@ const useCreateComposition = ({ compositions, durationInFrames, folderName, newI
             dryRun: false,
             signal,
             symbolicatedStack,
+            undoRedoNavigation: {
+                undoRoute: (0, url_state_1.getRoute)(),
+                redoRoute: `/${compositionId}`,
+            },
         });
         if (result.success) {
             selectComposition({

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

@@ -8,7 +8,7 @@ export declare const useKeybinding: () => {
         triggerIfInputFieldFocused: boolean;
         keepRegisteredWhenNotHighestContext: boolean;
     } & ({
-        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";
+        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";
         key?: undefined;
         commandCtrlKey?: undefined;
     } | {

package/dist/helpers/use-keyboard-shortcut-label.d.ts

@@ -1,2 +1,2 @@
-export declare const useKeyboardShortcutLabel: (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 useKeyboardShortcutAriaKeyShortcuts: (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 useKeyboardShortcutLabel: (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 useKeyboardShortcutAriaKeyShortcuts: (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;

package/dist/helpers/use-media-metadata.js

@@ -42,7 +42,11 @@ const getMediabunnyMetadata = async (src) => {
                 create: () => {
                     const createdInput = new mediabunny_1.Input({
                         formats: mediabunny_1.ALL_FORMATS,
-                        source: new mediabunny_1.UrlSource(src),
+                        source: new mediabunny_1.UrlSource(src, {
+                            handleUnhandledError: (error) => {
+                                remotion_1.Internals.Log.warn({ logLevel: 'info', tag: '@remotion/studio' }, `A speculative fetch for "${src}" failed:`, error);
+                            },
+                        }),
                     });
                     return {
                         resource: createdInput,

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

@@ -14,7 +14,7 @@ const actions_1 = require("../components/RenderQueue/actions");
 const SizeSelector_1 = require("../components/SizeSelector");
 const use_resolved_stack_1 = require("../components/Timeline/use-resolved-stack");
 const TimelineInOutToggle_1 = require("../components/TimelineInOutToggle");
-const use_default_editor_info_1 = require("../components/use-default-editor-info");
+const use_open_in_menu_apps_1 = require("../components/use-open-in-menu-apps");
 const Checkmark_1 = require("../icons/Checkmark");
 const canvas_ref_1 = require("../state/canvas-ref");
 const checkerboard_1 = require("../state/checkerboard");
@@ -27,13 +27,13 @@ const modals_1 = require("../state/modals");
 const sidebar_1 = require("../state/sidebar");
 const browser_studio_operations_1 = require("./browser-studio-operations");
 const check_fullscreen_support_1 = require("./check-fullscreen-support");
-const client_id_1 = require("./client-id");
 const colors_1 = require("./colors");
 const get_file_manager_name_1 = require("./get-file-manager-name");
 const get_git_menu_item_1 = require("./get-git-menu-item");
 const mobile_layout_1 = require("./mobile-layout");
 const open_in_editor_1 = require("./open-in-editor");
 const pick_color_1 = require("./pick-color");
+const settings_tab_availability_1 = require("./settings-tab-availability");
 const studio_runtime_config_1 = require("./studio-runtime-config");
 const use_keybinding_1 = require("./use-keybinding");
 const use_keyboard_shortcut_label_1 = require("./use-keyboard-shortcut-label");
@@ -243,8 +243,8 @@ const useMenuStructure = (closeMenu, readOnlyStudio) => {
     const { editorSnapping, setEditorSnapping } = (0, react_1.useContext)(editor_snapping_1.EditorSnappingContext);
     const { size, setSize } = (0, react_1.useContext)(remotion_1.Internals.PreviewSizeContext);
     const { canvasContent, compositions } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
-    const { type } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx).previewServerState;
-    const { defaultEditorId, defaultEditorName } = (0, use_default_editor_info_1.useEditorOpening)(type === 'connected');
+    const { connectionStatus: type, openInApps } = (0, use_open_in_menu_apps_1.useOpenInMenuApps)();
+    const { defaultEditorId, defaultEditorName } = openInApps;
     const keyboardShortcutsDisabled = (0, use_keybinding_1.areKeyboardShortcutsDisabled)();
     const resetZoomShortcut = (0, use_keyboard_shortcut_label_1.useKeyboardShortcutLabel)('resetZoom');
     const toggleSnappingShortcut = (0, use_keyboard_shortcut_label_1.useKeyboardShortcutLabel)('toggleSnapping');
@@ -256,6 +256,7 @@ const useMenuStructure = (closeMenu, readOnlyStudio) => {
     const goToFrameShortcut = (0, use_keyboard_shortcut_label_1.useKeyboardShortcutLabel)('goToFrame');
     const renderShortcut = (0, use_keyboard_shortcut_label_1.useKeyboardShortcutLabel)('render');
     const askAIShortcut = (0, use_keyboard_shortcut_label_1.useKeyboardShortcutLabel)('askAI');
+    const colorPickerShortcut = (0, use_keyboard_shortcut_label_1.useKeyboardShortcutLabel)('pickColor');
     const showKeyboardShortcutsShortcut = (0, use_keyboard_shortcut_label_1.useKeyboardShortcutLabel)('showKeyboardShortcuts');
     const studioAskAIEnabled = (0, studio_runtime_config_1.getStudioAskAIEnabled)();
     const { setSidebarCollapsedState, sidebarCollapsedStateLeft, sidebarCollapsedStateRight, } = (0, react_1.useContext)(sidebar_1.SidebarContext);
@@ -263,6 +264,11 @@ const useMenuStructure = (closeMenu, readOnlyStudio) => {
     const isFullscreenSupported = (0, check_fullscreen_support_1.checkFullscreenSupport)();
     const { remotion_packageManager } = window;
     const browserStudioOperations = (0, browser_studio_operations_1.getBrowserStudioOperations)();
+    const studioConfigEditable = (0, settings_tab_availability_1.canEditStudioConfig)({
+        isBrowserStudio: browserStudioOperations !== null,
+        previewServerConnected: type === 'connected',
+        readOnlyStudio,
+    });
     const sizePreselectIndex = sizes.findIndex((s) => String(size.size) === String(s.size));
     const mobileLayout = (0, mobile_layout_1.useMobileLayout)();
     const currentComposition = (0, react_1.useMemo)(() => {
@@ -329,7 +335,7 @@ const useMenuStructure = (closeMenu, readOnlyStudio) => {
                             closeMenu();
                             setSelectedModal({
                                 type: 'settings',
-                                initialTab: browserStudioOperations === null ? 'studio' : 'shortcuts',
+                                initialTab: studioConfigEditable ? 'studio' : 'shortcuts',
                                 initialPublicLicenseKey: (_b = (_a = window.remotion_renderDefaults) === null || _a === void 0 ? void 0 : _a.publicLicenseKey) !== null && _b !== void 0 ? _b : null,
                             });
                         },
@@ -338,8 +344,6 @@ const useMenuStructure = (closeMenu, readOnlyStudio) => {
                         leftItem: null,
                         subMenu: null,
                         quickSwitcherLabel: 'Settings...',
-                        disabled: (browserStudioOperations === null && readOnlyStudio) ||
-                            type !== 'connected',
                     },
                     {
                         id: 'acknowledgements',
@@ -355,13 +359,13 @@ const useMenuStructure = (closeMenu, readOnlyStudio) => {
                         subMenu: null,
                         quickSwitcherLabel: 'Help: Acknowledgements',
                     },
-                    browserStudioOperations === null
+                    studioConfigEditable
                         ? {
                             type: 'divider',
                             id: 'timeline-divider-1',
                         }
                         : null,
-                    browserStudioOperations === null
+                    studioConfigEditable
                         ? {
                             id: 'restart-studio',
                             value: 'restart-studio',
@@ -779,9 +783,8 @@ const useMenuStructure = (closeMenu, readOnlyStudio) => {
                         closeMenu,
                         composition: currentComposition,
                         connectionStatus: type,
-                        editorId: defaultEditorId,
-                        editorName: defaultEditorName,
                         includeCompositionManagementItems: true,
+                        openInApps,
                         resolvedLocation: resolvedCompositionLocation,
                         setSelectedModal,
                         readOnlyStudio,
@@ -823,7 +826,9 @@ const useMenuStructure = (closeMenu, readOnlyStudio) => {
                                 (0, pick_color_1.pickColor)();
                             },
                             leftItem: null,
-                            keyHint: null,
+                            keyHint: keyboardShortcutsDisabled
+                                ? null
+                                : colorPickerShortcut || null,
                             subMenu: null,
                             type: 'item',
                             quickSwitcherLabel: 'Show Color Picker',
@@ -831,7 +836,7 @@ const useMenuStructure = (closeMenu, readOnlyStudio) => {
                         : null,
                     !(0, browser_studio_operations_1.canInstallPackages)() ||
                         (browserStudioOperations === null &&
-                            remotion_packageManager === 'unknown')
+                            (remotion_packageManager === 'unknown' || type !== 'connected'))
                         ? null
                         : {
                             id: 'install-packages',
@@ -1054,9 +1059,11 @@ const useMenuStructure = (closeMenu, readOnlyStudio) => {
         mobileLayout,
         defaultEditorId,
         defaultEditorName,
+        openInApps,
         keyboardShortcutsDisabled,
         studioAskAIEnabled,
         askAIShortcut,
+        colorPickerShortcut,
         checkerboardShortcut,
         clearInOutPointsShortcut,
         goToFrameShortcut,
@@ -1068,6 +1075,7 @@ const useMenuStructure = (closeMenu, readOnlyStudio) => {
         showKeyboardShortcutsShortcut,
         toggleSnappingShortcut,
         browserStudioOperations,
+        studioConfigEditable,
         size.size,
         setSize,
         setEditorZoomGestures,

package/dist/helpers/use-rename-composition.js

@@ -32,14 +32,19 @@ const useRenameComposition = ({ compositions, currentId, newId, }) => {
     }, [getCodemod, newId]);
     const valid = validationMessage === null && currentId !== compositionId;
     const renameComposition = (0, react_1.useCallback)(async ({ newCompositionId, signal, symbolicatedStack, }) => {
+        const nextCompositionId = (0, slugify_name_1.slugifyName)(newCompositionId);
         const result = await (0, actions_1.applyCodemod)({
             codemod: getCodemod(newCompositionId),
             dryRun: false,
             signal,
             symbolicatedStack,
+            undoRedoNavigation: {
+                undoRoute: (0, url_state_1.getRoute)(),
+                redoRoute: `/${nextCompositionId}`,
+            },
         });
         if (result.success) {
-            (0, url_state_1.pushUrl)(`/${(0, slugify_name_1.slugifyName)(newCompositionId)}`);
+            (0, url_state_1.pushUrl)(`/${nextCompositionId}`);
         }
         return result;
     }, [getCodemod]);

package/dist/icons/lut.d.ts

@@ -0,0 +1,4 @@
+import type { SVGProps } from 'react';
+export declare const LutFileIcon: ({ color, ...props }: SVGProps<SVGSVGElement> & {
+    readonly color: string;
+}) => import("react/jsx-runtime").JSX.Element;

package/dist/icons/lut.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.LutFileIcon = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const LutFileIcon = ({ color, ...props }) => (jsx_runtime_1.jsx("svg", { ...props, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 640 640", children: jsx_runtime_1.jsx("path", { fill: color, d: "M537.7 64C522.8 64 508.4 68.7 496.3 77.5L286.1 230.3C257.1 251.4 240 285 240 320.9L240 321C234.8 320.3 229.4 320 224 320C153.3 320 96 377.3 96 448C96 463.5 98.8 478.4 103.8 492.2C111.4 513 98 544 75.8 544L48 544C39.2 544 32 551.2 32 560C32 568.8 39.2 576 48 576L224 576C294.7 576 352 518.7 352 448C352 442.6 351.7 437.2 351 432L351.1 432C386.9 432 420.6 414.9 441.7 385.9L594.5 175.7C603.3 163.7 608 149.2 608 134.3C608 95.5 576.5 64 537.7 64zM342.7 400C329.7 367.9 304.1 342.3 272 329.3L272 320.9C272 295.3 284.2 271.3 304.9 256.2L515.1 103.3C521.7 98.5 529.5 96 537.6 96C558.8 96 575.9 113.2 575.9 134.3C575.9 142.4 573.3 150.3 568.6 156.8L415.8 367.1C400.7 387.8 376.7 400 351.1 400L342.7 400zM320 448C320 501 277 544 224 544L127.6 544C128.3 542.7 129 541.4 129.7 540.2C138 523.5 141.4 501.3 133.9 481.2C130.1 470.9 128 459.8 128 448.1C128 395.1 171 352.1 224 352.1C277 352.1 320 395.1 320 448.1z" }) }));
+exports.LutFileIcon = LutFileIcon;

package/dist/icons/sparkles.d.ts

@@ -0,0 +1,4 @@
+import type { SVGProps } from 'react';
+export declare const SparklesIcon: React.FC<SVGProps<SVGSVGElement> & {
+    readonly color: string;
+}>;

package/dist/icons/sparkles.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SparklesIcon = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const SparklesIcon = ({ color, ...props }) => (jsx_runtime_1.jsx("svg", { ...props, fill: color, viewBox: "0 0 640 640", children: jsx_runtime_1.jsx("path", { d: "M390.6 268.1 529.2 320 390.6 371.9C381.9 375.1 375.1 382 371.8 390.7L320 529.2 268.1 390.6C264.9 381.9 258 375.1 249.3 371.8L110.8 320 249.4 268.1C258.1 264.9 264.9 258 268.2 249.3L320 110.8 371.9 249.4C375.1 258.1 382 264.9 390.7 268.2ZM401.8 238.1 342.5 79.6C339 70.2 330 64 320 64S301 70.2 297.5 79.6L238.2 238.2 79.6 297.5C70.2 301 64 310 64 320S70.2 339 79.6 342.5L238.2 401.9 297.6 560.5C301 569.8 310 576 320 576S339 569.8 342.5 560.4L401.9 401.8 560.5 342.4C569.8 339 576 330 576 320S569.8 301 560.4 297.5L401.8 238.2Z" }) }));
+exports.SparklesIcon = SparklesIcon;

package/dist/state/modals.d.ts

@@ -109,6 +109,18 @@ export type AddEffectModalState = {
     nodePath: SequencePropsSubscriptionKey;
     clientId: string;
 };
+export type AssetSelectionModalState = {
+    readonly type: 'asset-selection';
+    readonly assetType: 'audio' | 'video' | 'image';
+    readonly initialUrl: string | null;
+    readonly invocationTimestamp: number;
+    readonly assetSelection: {
+        readonly initialQuery: string;
+        readonly onSelectFile: () => void;
+        readonly onSelected: (asset: StaticFile) => void;
+    };
+    readonly onSelectedUrl: (url: string) => void;
+};
 export type TranscriptionModalState = {
     type: 'transcribe';
     src: string;
@@ -131,6 +143,7 @@ export type CanvasCaptureImport = {
 export type ElementInstallPlan = {
     readonly compositionFile: string;
     readonly expectedFileState: ElementInstallExpectedFileState;
+    readonly filePath: string;
 };
 export type ElementInstallModalState = {
     readonly type: 'element-install';
@@ -187,8 +200,17 @@ export type ModalState = {
 } | {
     type: 'fix-computed-value';
     prop: string;
-    context: string;
-    remotionInteractivitySkillAvailable: boolean;
+    location: {
+        source: string;
+        line: number;
+        column: number;
+    };
+} | {
+    type: 'generate-with-agent';
+    location: {
+        source: string;
+        line: number;
+    } | null;
 } | {
     type: 'quick-switcher';
     mode: QuickSwitcherMode;
@@ -206,7 +228,7 @@ export type ModalState = {
     type: 'element-library';
     name: string;
     url: string;
-} | ElementInstallModalState | AddEffectModalState | TranscriptionModalState | VideoMattingModalState | ConfirmationDialogState | SvgImportDialogState;
+} | ElementInstallModalState | AddEffectModalState | AssetSelectionModalState | TranscriptionModalState | VideoMattingModalState | ConfirmationDialogState | SvgImportDialogState;
 export type SetSelectedModalContextType = {
     setSelectedModal: React.Dispatch<React.SetStateAction<ModalState | null>>;
 };

package/dist/state/z-index.js

@@ -81,9 +81,7 @@ const HigherZIndex = ({ children, onEscape, onOutsideClick, disabled, outsideCli
                 onEnd: (reason, upEvent) => {
                     var _a;
                     endPointerSession = null;
-                    if ((reason === 'pointerup' || reason === 'buttons-released') &&
-                        upEvent &&
-                        !(0, input_dragger_click_lock_1.getClickLock)()) {
+                    if ((0, pointer_session_1.isPointerSessionRelease)(reason, upEvent) && !(0, input_dragger_click_lock_1.getClickLock)()) {
                         const target = (_a = document.elementFromPoint(upEvent.clientX, upEvent.clientY)) !== null && _a !== void 0 ? _a : upEvent.target;
                         if (document.contains(target)) {
                             upEvent.stopPropagation();

package/package.json

@@ -3,7 +3,7 @@
 		"url": "https://github.com/remotion-dev/remotion/tree/main/packages/studio"
 	},
 	"name": "@remotion/studio",
-	"version": "4.0.524",
+	"version": "4.0.526",
 	"description": "APIs for interacting with the Remotion Studio",
 	"main": "dist",
 	"scripts": {
@@ -20,8 +20,8 @@
 		"url": "https://github.com/remotion-dev/remotion/issues"
 	},
 	"peerDependencies": {
-		"@remotion/video-matting": "4.0.524",
-		"@remotion/whisper-webgpu": "4.0.524",
+		"@remotion/video-matting": "4.0.526",
+		"@remotion/whisper-webgpu": "4.0.526",
 		"react": ">=16.8.0",
 		"react-dom": ">=16.8.0"
 	},
@@ -35,32 +35,32 @@
 	},
 	"dependencies": {
 		"@jridgewell/trace-mapping": "0.3.31",
-		"@remotion/canvas": "4.0.524",
-		"@remotion/captions": "4.0.524",
-		"@remotion/media": "4.0.524",
-		"@remotion/media-utils": "4.0.524",
-		"@remotion/player": "4.0.524",
-		"@remotion/renderer": "4.0.524",
-		"@remotion/studio-codemods": "4.0.524",
-		"@remotion/studio-protocol": "4.0.524",
-		"@remotion/studio-shared": "4.0.524",
-		"@remotion/timeline-utils": "4.0.524",
-		"@remotion/web-renderer": "4.0.524",
-		"@remotion/zod-types": "4.0.524",
+		"@remotion/canvas": "4.0.526",
+		"@remotion/captions": "4.0.526",
+		"@remotion/media": "4.0.526",
+		"@remotion/media-utils": "4.0.526",
+		"@remotion/player": "4.0.526",
+		"@remotion/renderer": "4.0.526",
+		"@remotion/studio-codemods": "4.0.526",
+		"@remotion/studio-protocol": "4.0.526",
+		"@remotion/studio-shared": "4.0.526",
+		"@remotion/timeline-utils": "4.0.526",
+		"@remotion/web-renderer": "4.0.526",
+		"@remotion/zod-types": "4.0.526",
 		"@tanstack/react-virtual": "3.14.9",
 		"mediabunny": "1.56.1",
 		"memfs": "3.4.3",
 		"open": "8.4.2",
 		"prismjs": "1.30.0",
-		"remotion": "4.0.524",
+		"remotion": "4.0.526",
 		"semver": "7.5.3",
 		"zod": "4.5.4"
 	},
 	"devDependencies": {
 		"@happy-dom/global-registrator": "14.5.1",
-		"@remotion/eslint-config-internal": "4.0.524",
-		"@remotion/video-matting": "4.0.524",
-		"@remotion/whisper-webgpu": "4.0.524",
+		"@remotion/eslint-config-internal": "4.0.526",
+		"@remotion/video-matting": "4.0.526",
+		"@remotion/whisper-webgpu": "4.0.526",
 		"@testing-library/react": "16.1.0",
 		"@types/prismjs": "1.26.4",
 		"@types/semver": "7.5.3",

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

@@ -1,62 +0,0 @@
-"use strict";
-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 = {
-    display: 'flex',
-    flexDirection: 'row',
-    width: '100%',
-};
-const frame = {
-    backgroundColor: colors_1.ERROR_CODE_FRAME_BACKGROUND,
-    borderRadius: 6,
-    marginBottom: 20,
-    marginLeft: 14,
-    marginRight: 14,
-    overflowY: 'auto',
-};
-const lineNumber = {
-    whiteSpace: 'pre',
-    paddingRight: 12,
-    color: 'inherit',
-    fontSize: 14,
-    lineHeight: 1.7,
-    width: 60,
-    flexShrink: 0,
-    display: 'inline-flex',
-    alignItems: 'center',
-    justifyContent: 'flex-end',
-    fontFamily: 'monospace',
-};
-const CodeFrame = ({ source, lineNumberWidth }) => {
-    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;