@remotion/studio 4.0.514 → 4.0.516

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

@@ -29,7 +29,6 @@ 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 download_blob_1 = require("./download-blob");
 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");
@@ -47,8 +46,7 @@ const ICON_SIZE = 14;
 const getFileMenu = ({ readOnlyStudio, closeMenu, editorName, editorId, previewServerState, setSelectedModal, }) => {
     const fileManagerName = (0, get_file_manager_name_1.getFileManagerName)(window.remotion_fileSystemPlatform);
     const browserStudioOperations = (0, browser_studio_operations_1.getBrowserStudioOperations)();
-    const downloadProject = browserStudioOperations === null || browserStudioOperations === void 0 ? void 0 : browserStudioOperations.downloadProject;
-    const items = [
+    const newProjectItems = [
         readOnlyStudio
             ? null
             : {
@@ -93,12 +91,8 @@ const getFileMenu = ({ readOnlyStudio, closeMenu, editorName, editorId, previewS
                 quickSwitcherLabel: 'New folder...',
                 disabled: previewServerState !== 'connected',
             },
-        readOnlyStudio
-            ? null
-            : {
-                type: 'divider',
-                id: 'new-project-item-divider',
-            },
+    ].filter(no_react_1.NoReactInternals.truthy);
+    const projectItems = [
         window.remotion_isReadOnlyStudio
             ? {
                 id: 'input-props-override',
@@ -117,35 +111,6 @@ const getFileMenu = ({ readOnlyStudio, closeMenu, editorName, editorId, previewS
                 quickSwitcherLabel: 'Override input props',
             }
             : null,
-        downloadProject
-            ? {
-                id: 'download-project',
-                value: 'download-project',
-                label: 'Download project',
-                onClick: async () => {
-                    closeMenu();
-                    try {
-                        const { data, fileName } = await downloadProject();
-                        const arrayBuffer = data.buffer.slice(data.byteOffset, data.byteOffset + data.byteLength);
-                        (0, download_blob_1.downloadBlob)(new Blob([arrayBuffer], { type: 'application/zip' }), fileName);
-                    }
-                    catch (error) {
-                        (0, NotificationCenter_1.showNotification)(`Could not download project: ${error instanceof Error ? error.message : String(error)}`, 2000);
-                    }
-                },
-                type: 'item',
-                keyHint: null,
-                leftItem: null,
-                subMenu: null,
-                quickSwitcherLabel: 'Download project',
-            }
-            : null,
-        !readOnlyStudio && downloadProject
-            ? {
-                type: 'divider',
-                id: 'open-project-divider',
-            }
-            : null,
         editorName && editorId && !readOnlyStudio
             ? {
                 id: 'open-in-editor',
@@ -178,7 +143,7 @@ const getFileMenu = ({ readOnlyStudio, closeMenu, editorName, editorId, previewS
                 disabled: previewServerState !== 'connected',
             }
             : null,
-        !readOnlyStudio
+        !readOnlyStudio && browserStudioOperations === null
             ? {
                 id: 'open-project-in-explorer',
                 value: 'open-project-in-explorer',
@@ -199,6 +164,16 @@ const getFileMenu = ({ readOnlyStudio, closeMenu, editorName, editorId, previewS
             : null,
         (0, get_git_menu_item_1.getGitMenuItem)(),
     ].filter(no_react_1.NoReactInternals.truthy);
+    const items = [
+        ...newProjectItems,
+        newProjectItems.length > 0 && projectItems.length > 0
+            ? {
+                type: 'divider',
+                id: 'new-project-item-divider',
+            }
+            : null,
+        ...projectItems,
+    ].filter(no_react_1.NoReactInternals.truthy);
     if (items.length === 0) {
         return null;
     }
@@ -272,6 +247,7 @@ const useMenuStructure = (closeMenu, readOnlyStudio) => {
     const sizes = (0, react_1.useMemo)(() => (0, SizeSelector_1.getUniqueSizes)(size), [size]);
     const isFullscreenSupported = (0, check_fullscreen_support_1.checkFullscreenSupport)();
     const { remotion_packageManager } = window;
+    const browserStudioOperations = (0, browser_studio_operations_1.getBrowserStudioOperations)();
     const sizePreselectIndex = sizes.findIndex((s) => String(size.size) === String(s.size));
     const mobileLayout = (0, mobile_layout_1.useMobileLayout)();
     const currentComposition = (0, react_1.useMemo)(() => {
@@ -338,7 +314,7 @@ const useMenuStructure = (closeMenu, readOnlyStudio) => {
                             closeMenu();
                             setSelectedModal({
                                 type: 'settings',
-                                initialTab: 'rendering',
+                                initialTab: browserStudioOperations === null ? 'rendering' : 'shortcuts',
                                 initialPublicLicenseKey: (_b = (_a = window.remotion_renderDefaults) === null || _a === void 0 ? void 0 : _a.publicLicenseKey) !== null && _b !== void 0 ? _b : null,
                             });
                         },
@@ -347,7 +323,8 @@ const useMenuStructure = (closeMenu, readOnlyStudio) => {
                         leftItem: null,
                         subMenu: null,
                         quickSwitcherLabel: 'Settings...',
-                        disabled: readOnlyStudio || type !== 'connected',
+                        disabled: (browserStudioOperations === null && readOnlyStudio) ||
+                            type !== 'connected',
                     },
                     {
                         id: 'acknowledgements',
@@ -363,24 +340,28 @@ const useMenuStructure = (closeMenu, readOnlyStudio) => {
                         subMenu: null,
                         quickSwitcherLabel: 'Help: Acknowledgements',
                     },
-                    {
-                        type: 'divider',
-                        id: 'timeline-divider-1',
-                    },
-                    {
-                        id: 'restart-studio',
-                        value: 'restart-studio',
-                        label: 'Restart Studio Server',
-                        onClick: () => {
-                            closeMenu();
-                            (0, restart_studio_1.restartStudio)();
-                        },
-                        type: 'item',
-                        keyHint: null,
-                        leftItem: null,
-                        subMenu: null,
-                        quickSwitcherLabel: 'Restart Studio Server',
-                    },
+                    browserStudioOperations === null
+                        ? {
+                            type: 'divider',
+                            id: 'timeline-divider-1',
+                        }
+                        : null,
+                    browserStudioOperations === null
+                        ? {
+                            id: 'restart-studio',
+                            value: 'restart-studio',
+                            label: 'Restart Studio Server',
+                            onClick: () => {
+                                closeMenu();
+                                (0, restart_studio_1.restartStudio)();
+                            },
+                            type: 'item',
+                            keyHint: null,
+                            leftItem: null,
+                            subMenu: null,
+                            quickSwitcherLabel: 'Restart Studio Server',
+                        }
+                        : null,
                 ].filter(no_react_1.NoReactInternals.truthy),
                 quickSwitcherLabel: null,
             },
@@ -798,17 +779,22 @@ const useMenuStructure = (closeMenu, readOnlyStudio) => {
                             quickSwitcherLabel: 'Show Color Picker',
                         }
                         : null,
-                    readOnlyStudio || remotion_packageManager === 'unknown'
+                    !(0, browser_studio_operations_1.canInstallPackages)() ||
+                        (browserStudioOperations === null &&
+                            remotion_packageManager === 'unknown')
                         ? null
                         : {
                             id: 'install-packages',
                             value: 'install-packages',
                             label: 'Install package...',
                             onClick: () => {
+                                var _a;
+                                var _b;
                                 closeMenu();
                                 setSelectedModal({
-                                    type: 'install-packages',
-                                    packageManager: remotion_packageManager,
+                                    type: 'settings',
+                                    initialTab: 'packages',
+                                    initialPublicLicenseKey: (_b = (_a = window.remotion_renderDefaults) === null || _a === void 0 ? void 0 : _a.publicLicenseKey) !== null && _b !== void 0 ? _b : null,
                                 });
                             },
                             type: 'item',
@@ -832,13 +818,13 @@ const useMenuStructure = (closeMenu, readOnlyStudio) => {
                             ? 'Shortcuts (disabled)'
                             : 'Shortcuts',
                         onClick: () => {
+                            var _a;
+                            var _b;
                             closeMenu();
                             setSelectedModal({
-                                type: 'quick-switcher',
-                                mode: 'docs',
-                                invocationTimestamp: Date.now(),
-                                assetSelection: null,
-                                compositionSelection: null,
+                                type: 'settings',
+                                initialTab: 'shortcuts',
+                                initialPublicLicenseKey: (_b = (_a = window.remotion_renderDefaults) === null || _a === void 0 ? void 0 : _a.publicLicenseKey) !== null && _b !== void 0 ? _b : null,
                             });
                         },
                         keyHint: '?',
@@ -1017,6 +1003,7 @@ const useMenuStructure = (closeMenu, readOnlyStudio) => {
         defaultEditorName,
         keyboardShortcutsDisabled,
         studioAskAIEnabled,
+        browserStudioOperations,
         size.size,
         setSize,
         setEditorZoomGestures,

package/dist/icons/align-center-horizontal.js

@@ -6,7 +6,7 @@ const AlignCenterHorizontalIcon = (props) => {
     var _a;
     const color = (_a = props.color) !== null && _a !== void 0 ? _a : 'currentColor';
     return (jsx_runtime_1.jsxs("svg", { ...props, viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
-            jsx_runtime_1.jsx("path", { d: "M8 2V14", stroke: color, strokeOpacity: "0.5", strokeLinecap: "square" }), jsx_runtime_1.jsx("line", { x1: "3", y1: "6", x2: "12", y2: "6", stroke: color, strokeWidth: "2" }), jsx_runtime_1.jsx("line", { x1: "4", y1: "10", x2: "11", y2: "10", stroke: color, strokeWidth: "2" })
+            jsx_runtime_1.jsx("path", { d: "M8 2V14", stroke: color, strokeLinecap: "square" }), jsx_runtime_1.jsx("line", { x1: "3", y1: "6", x2: "12", y2: "6", stroke: color, strokeWidth: "2" }), jsx_runtime_1.jsx("line", { x1: "4", y1: "10", x2: "11", y2: "10", stroke: color, strokeWidth: "2" })
         ] }));
 };
 exports.AlignCenterHorizontalIcon = AlignCenterHorizontalIcon;

package/dist/icons/align-left.js

@@ -6,7 +6,7 @@ const AlignLeftIcon = (props) => {
     var _a;
     const color = (_a = props.color) !== null && _a !== void 0 ? _a : 'currentColor';
     return (jsx_runtime_1.jsxs("svg", { ...props, viewBox: "0 0 16 16", fill: "none", children: [
-            jsx_runtime_1.jsx("path", { d: "M2 2L2 14", stroke: color, strokeOpacity: "0.5", strokeLinecap: "square" }), jsx_runtime_1.jsx("line", { x1: "4", y1: "6", x2: "13", y2: "6", stroke: color, strokeWidth: "2" }), jsx_runtime_1.jsx("line", { x1: "4", y1: "10", x2: "11", y2: "10", stroke: color, strokeWidth: "2" })
+            jsx_runtime_1.jsx("path", { d: "M2 2L2 14", stroke: color, strokeLinecap: "square" }), jsx_runtime_1.jsx("line", { x1: "4", y1: "6", x2: "13", y2: "6", stroke: color, strokeWidth: "2" }), jsx_runtime_1.jsx("line", { x1: "4", y1: "10", x2: "11", y2: "10", stroke: color, strokeWidth: "2" })
         ] }));
 };
 exports.AlignLeftIcon = AlignLeftIcon;

package/dist/icons/align-right.js

@@ -6,7 +6,7 @@ const AlignRightIcon = (props) => {
     var _a;
     const color = (_a = props.color) !== null && _a !== void 0 ? _a : 'currentColor';
     return (jsx_runtime_1.jsxs("svg", { ...props, viewBox: "0 0 16 16", fill: "none", children: [
-            jsx_runtime_1.jsx("path", { d: "M14 2V14", stroke: color, strokeOpacity: "0.5", strokeLinecap: "square" }), jsx_runtime_1.jsx("line", { x1: "3", y1: "6", x2: "12", y2: "6", stroke: color, strokeWidth: "2" }), jsx_runtime_1.jsx("line", { x1: "5", y1: "10", x2: "12", y2: "10", stroke: color, strokeWidth: "2" })
+            jsx_runtime_1.jsx("path", { d: "M14 2V14", stroke: color, strokeLinecap: "square" }), jsx_runtime_1.jsx("line", { x1: "3", y1: "6", x2: "12", y2: "6", stroke: color, strokeWidth: "2" }), jsx_runtime_1.jsx("line", { x1: "5", y1: "10", x2: "12", y2: "10", stroke: color, strokeWidth: "2" })
         ] }));
 };
 exports.AlignRightIcon = AlignRightIcon;

package/dist/icons/cloud-download.d.ts

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

package/dist/icons/cloud-download.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CloudDownloadIcon = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const CloudDownloadIcon = ({ color, ...props }) => {
+    return (jsx_runtime_1.jsx("svg", { ...props, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 576 512", children: jsx_runtime_1.jsx("path", { fill: color, d: "M128 176c0-61.9 50.1-112 112-112 39.3 0 73.8 20.2 93.8 50.8 4.4 6.7 13.1 9.1 20.3 5.7 11.4-5.5 24.3-8.5 37.9-8.5 48.6 0 88 39.4 88 88 0 14.1-3.3 27.4-9.2 39.2-2 4.1-2.2 8.9-.5 13.1s5.2 7.6 9.5 9.1c37.4 13.1 64.2 48.8 64.2 90.6 0 53-43 96-96 96l-304 0c-61.9 0-112-50.1-112-112 0-53.7 37.8-98.6 88.2-109.5 4.3-.9 8.1-3.6 10.3-7.4s2.9-8.3 1.7-12.6c-2.7-9.7-4.2-19.9-4.2-30.5zM240 32c-79.5 0-144 64.5-144 144 0 8 .7 15.9 1.9 23.5-56.9 19.2-97.9 73-97.9 136.5 0 79.5 64.5 144 144 144l304 0c70.7 0 128-57.3 128-128 0-49.9-28.5-93-70.1-114.2 3.9-11.9 6.1-24.6 6.1-37.8 0-66.3-53.7-120-120-120-13.7 0-26.9 2.3-39.2 6.5-26.4-33.2-67.1-54.5-112.8-54.5zM371.3 307.3c6.2-6.2 6.2-16.4 0-22.6s-16.4-6.2-22.6 0L304 329.4 304 208c0-8.8-7.2-16-16-16s-16 7.2-16 16l0 121.4-44.7-44.7c-6.2-6.2-16.4-6.2-22.6 0s-6.2 16.4 0 22.6l72 72c6.2 6.2 16.4 6.2 22.6 0l72-72z" }) }));
+};
+exports.CloudDownloadIcon = CloudDownloadIcon;

package/dist/icons/keyboard.d.ts

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

package/dist/icons/keyboard.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.KeyboardIcon = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+// Font Awesome Pro v7.3.1, Copyright 2026 Fonticons, Inc.
+// https://fontawesome.com/license (Commercial License)
+const KeyboardIcon = ({ color, ...props }) => {
+    return (jsx_runtime_1.jsx("svg", { ...props, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 512 512", children: jsx_runtime_1.jsx("path", { fill: color, d: "M96 192l64 0 0 128-64 0c-53 0-96 43-96 96s43 96 96 96 96-43 96-96l0-64 128 0 0 64c0 53 43 96 96 96s96-43 96-96-43-96-96-96l-64 0 0-128 64 0c53 0 96-43 96-96s-43-96-96-96-96 43-96 96l0 64-128 0 0-64c0-53-43-96-96-96S0 43 0 96 43 192 96 192zM256 320l-64 0 0-128 128 0 0 128-64 0zM96 160c-35.3 0-64-28.7-64-64s28.7-64 64-64 64 28.7 64 64l0 64-64 0zm64 256c0 35.3-28.7 64-64 64s-64-28.7-64-64 28.7-64 64-64l64 0 0 64zM352 160l0-64c0-35.3 28.7-64 64-64s64 28.7 64 64-28.7 64-64 64l-64 0zm64 192c35.3 0 64 28.7 64 64s-28.7 64-64 64-64-28.7-64-64l0-64 64 0z" }) }));
+};
+exports.KeyboardIcon = KeyboardIcon;

package/dist/icons/license.d.ts

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

package/dist/icons/license.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.LicenseIcon = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const LicenseIcon = ({ color, ...props }) => {
+    return (jsx_runtime_1.jsx("svg", { ...props, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 -40 512 593", children: jsx_runtime_1.jsx("path", { fill: color, d: "M309.4-7.4L256-40 202.6-7.4 140-8.9 110 46 55.1 76 56.6 138.6 24 192 56.6 245.4 55.1 308 110 338 128 371 128 552.3c1-.4 43.6-18.7 128-54.9 84.4 36.2 127 54.4 128 54.9l0-181.3 18-33 54.9-30-1.5-62.6 32.6-53.4-32.6-53.4 1.5-62.6-54.9-30-30-54.9-62.6 1.5zM160 503.7l0-111.3 42.6-1 53.4 32.6 53.4-32.6 42.6 1 0 111.3-89.7-38.4-6.3-2.7-6.3 2.7-89.7 38.4zM353.3 23.5l20.7 37.8 4.5 8.2c.6 .3 15.9 8.7 46 25.2-.8 34.3-1.2 51.8-1.2 52.5 .3 .5 9.4 15.5 27.3 44.8-17.9 29.3-27 44.3-27.3 44.8 0 .6 .4 18.1 1.2 52.5l-37.8 20.7-8.2 4.5-4.5 8.2-20.7 37.8c-34.3-.8-51.8-1.2-52.5-1.2-.5 .3-15.5 9.4-44.8 27.3-29.3-17.9-44.3-27-44.8-27.3-.6 0-18.1 .4-52.5 1.2-16.5-30.1-24.9-45.5-25.2-46l-8.2-4.5-37.8-20.7c.8-34.3 1.2-51.8 1.2-52.5-.3-.5-9.4-15.5-27.3-44.8 17.9-29.3 27-44.3 27.3-44.8 0-.6-.4-18.1-1.2-52.5 30.1-16.5 45.5-24.9 46-25.2 .3-.6 8.7-15.9 25.2-46 34.3 .8 51.8 1.2 52.5 1.2 .5-.3 15.5-9.4 44.8-27.3 29.3 17.9 44.3 27 44.8 27.3 .6 0 18.1-.4 52.5-1.2zM336 192a80 80 0 1 1 -160 0 80 80 0 1 1 160 0zM256 80a112 112 0 1 0 0 224 112 112 0 1 0 0-224z" }) }));
+};
+exports.LicenseIcon = LicenseIcon;

package/dist/icons/package.d.ts

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

package/dist/icons/package.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PackageIcon = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const PackageIcon = ({ color, ...props }) => {
+    return (jsx_runtime_1.jsx("svg", { ...props, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 -16 512 544", children: jsx_runtime_1.jsx("path", { fill: color, d: "M240.3 25.2L64.5 126.8 256.3 237.5 448.2 126.8 272.3 25.2c-9.9-5.7-22.1-5.7-32 0zM48.5 154.5l0 203c0 11.4 6.1 22 16 27.7l175.8 101.5 0-221.5-191.8-110.8zM272.3 486.8L448.2 385.2c9.9-5.7 16-16.3 16-27.7l0-203-191.8 110.8 0 221.5zM224.3-2.5c19.8-11.4 44.2-11.4 64 0L464.2 99c19.8 11.4 32 32.6 32 55.4l0 203c0 22.9-12.2 44-32 55.4L288.3 514.5c-19.8 11.4-44.2 11.4-64 0L48.5 413c-19.8-11.4-32-32.6-32-55.4l0-203c0-22.9 12.2-44 32-55.4L224.3-2.5z" }) }));
+};
+exports.PackageIcon = PackageIcon;

package/dist/icons/react.js

@@ -3,6 +3,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.ReactIcon = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const ReactIcon = ({ color, ...props }) => {
-    return (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: "M392.8 65.2C375.8 60.3 358.1 70.2 353.2 87.2L225.2 535.2C220.3 552.2 230.2 569.9 247.2 574.8C264.2 579.7 281.9 569.8 286.8 552.8L414.8 104.8C419.7 87.8 409.8 70.1 392.8 65.2zM457.4 201.3C444.9 213.8 444.9 234.1 457.4 246.6L530.8 320L457.4 393.4C444.9 405.9 444.9 426.2 457.4 438.7C469.9 451.2 490.2 451.2 502.7 438.7L598.7 342.7C611.2 330.2 611.2 309.9 598.7 297.4L502.7 201.4C490.2 188.9 469.9 188.9 457.4 201.4zM182.7 201.3C170.2 188.8 149.9 188.8 137.4 201.3L41.4 297.3C28.9 309.8 28.9 330.1 41.4 342.6L137.4 438.6C149.9 451.1 170.2 451.1 182.7 438.6C195.2 426.1 195.2 405.8 182.7 393.3L109.3 320L182.6 246.6C195.1 234.1 195.1 213.8 182.6 201.3z" }) }));
+    return (jsx_runtime_1.jsx("svg", { ...props, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 576 512", children: jsx_runtime_1.jsx("path", { fill: color, d: "M144 32c-44.2 0-80 35.8-80 80l0 53.5c0 12.7-5.1 24.9-14.1 33.9L4.7 244.7c-3 3-4.7 7.1-4.7 11.3s1.7 8.3 4.7 11.3l45.3 45.3c9 9 14.1 21.2 14.1 33.9L64 400c0 44.2 35.8 80 80 80l64 0c8.8 0 16-7.2 16-16s-7.2-16-16-16l-64 0c-26.5 0-48-21.5-48-48l0-53.5c0-21.2-8.4-41.6-23.4-56.6L38.6 256 72.6 222.1c15-15 23.4-35.4 23.4-56.6L96 112c0-26.5 21.5-48 48-48l64 0c8.8 0 16-7.2 16-16s-7.2-16-16-16l-64 0zm288 0l-64 0c-8.8 0-16 7.2-16 16s7.2 16 16 16l64 0c26.5 0 48 21.5 48 48l0 53.5c0 21.2 8.4 41.6 23.4 56.6l33.9 33.9-33.9 33.9c-15 15-23.4 35.4-23.4 56.6l0 53.5c0 26.5-21.5 48-48 48l-64 0c-8.8 0-16 7.2-16 16s7.2 16 16 16l64 0c44.2 0 80-35.8 80-80l0-53.5c0-12.7 5.1-24.9 14.1-33.9l45.3-45.3c3-3 4.7-7.1 4.7-11.3s-1.7-8.3-4.7-11.3l-45.3-45.3c-9-9-14.1-21.2-14.1-33.9l0-53.5c0-44.2-35.8-80-80-80z" }) }));
 };
 exports.ReactIcon = ReactIcon;

package/dist/icons/remotion-convert.d.ts

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

package/dist/icons/remotion-convert.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RemotionConvertIcon = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+// Font Awesome Pro v7.3.1, Copyright 2026 Fonticons, Inc.
+// https://fontawesome.com/license (Commercial License)
+const RemotionConvertIcon = ({ color, ...props }) => {
+    return (jsx_runtime_1.jsx("svg", { ...props, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 512 512", children: jsx_runtime_1.jsx("path", { fill: color, d: "M427.3 36.7c-6.2-6.2-16.4-6.2-22.6 0s-6.2 16.4 0 22.6l52.7 52.7-97.4 0c-30.2 0-58.7 14.2-76.8 38.4l-29.2 38.9 20 26.7 34.8-46.4C320.9 153.5 339.9 144 360 144l97.4 0-52.7 52.7c-6.2 6.2-6.2 16.4 0 22.6s16.4 6.2 22.6 0l80-80c6.2-6.2 6.2-16.4 0-22.6l-80-80zM139.2 342.4C127.1 358.5 108.1 368 88 368l-72 0c-8.8 0-16 7.2-16 16s7.2 16 16 16l72 0c30.2 0 58.7-14.2 76.8-38.4l29.2-38.9-20-26.7-34.8 46.4zM404.7 475.3c6.2 6.2 16.4 6.2 22.6 0l80-80c6.2-6.2 6.2-16.4 0-22.6l-80-80c-6.2-6.2-16.4-6.2-22.6 0s-6.2 16.4 0 22.6l52.7 52.7-93.4 0c-22.7 0-44-10.7-57.6-28.8L167.2 153.6C147.6 127.4 116.7 112 84 112l-68 0c-8.8 0-16 7.2-16 16s7.2 16 16 16l68 0c22.7 0 44 10.7 57.6 28.8L280.8 358.4C300.4 384.6 331.3 400 364 400l93.4 0-52.7 52.7c-6.2 6.2-6.2 16.4 0 22.6z" }) }));
+};
+exports.RemotionConvertIcon = RemotionConvertIcon;

package/dist/icons/skills.d.ts

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

package/dist/icons/skills.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SkillsIcon = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const SkillsIcon = ({ color, ...props }) => {
+    return (jsx_runtime_1.jsxs("svg", { ...props, fill: "none", viewBox: "0 0 16 16", children: [
+            jsx_runtime_1.jsx("path", { d: "M8 0.9 14.05 4.35v7.3L8 15.1 1.95 11.65v-7.3L8 0.9Z", stroke: color, strokeLinejoin: "round", strokeWidth: "1.1" }), jsx_runtime_1.jsx("path", { d: "m1.95 4.35 6.05 3.55 6.05-3.55M8 7.9v7.2M1.95 8 8 11.55 14.05 8", stroke: color, strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "1.1" })
+        ] }));
+};
+exports.SkillsIcon = SkillsIcon;

package/dist/state/modals.d.ts

@@ -1,6 +1,6 @@
 import type { AudioCodec, ChromeMode, Codec, ColorSpace, LogLevel, OpenGlRenderer, PixelFormat, StillImageFormat, VideoImageFormat, X264Preset } from '@remotion/renderer';
 import type { HardwareAccelerationOption } from '@remotion/renderer/client';
-import type { CanvasCaptureData, PackageManager, RenderDefaults } from '@remotion/studio-shared';
+import type { CanvasCaptureData, RenderDefaults } from '@remotion/studio-shared';
 import type { RenderStillOnWebImageFormat, WebRendererAudioCodec, WebRendererContainer, WebRendererHardwareAcceleration, WebRendererPageResponsiveness, WebRendererQuality, WebRendererVideoCodec } from '@remotion/web-renderer';
 import type React from 'react';
 import type { SequencePropsSubscriptionKey, _InternalTypes } from 'remotion';
@@ -154,7 +154,7 @@ export type ModalState = {
     type: 'input-props-override';
 } | {
     type: 'settings';
-    initialTab: 'apps' | 'rendering' | 'studio' | 'license';
+    initialTab: 'apps' | 'rendering' | 'studio' | 'packages' | 'shortcuts' | 'license';
     initialPublicLicenseKey: string | null;
 } | RenderModalState | WebRenderModalState | {
     type: 'render-progress';
@@ -168,9 +168,6 @@ export type ModalState = {
     prop: string;
     context: string;
     remotionInteractivitySkillAvailable: boolean;
-} | {
-    type: 'install-packages';
-    packageManager: PackageManager;
 } | {
     type: 'quick-switcher';
     mode: QuickSwitcherMode;

package/package.json

@@ -3,7 +3,7 @@
 		"url": "https://github.com/remotion-dev/remotion/tree/main/packages/studio"
 	},
 	"name": "@remotion/studio",
-	"version": "4.0.514",
+	"version": "4.0.516",
 	"description": "APIs for interacting with the Remotion Studio",
 	"main": "dist",
 	"scripts": {
@@ -25,17 +25,17 @@
 	},
 	"dependencies": {
 		"@tanstack/react-virtual": "3.14.9",
-		"@remotion/studio-protocol": "4.0.514",
+		"@remotion/studio-protocol": "4.0.516",
 		"semver": "7.5.3",
-		"remotion": "4.0.514",
-		"@remotion/captions": "4.0.514",
-		"@remotion/player": "4.0.514",
-		"@remotion/media-utils": "4.0.514",
-		"@remotion/renderer": "4.0.514",
-		"@remotion/web-renderer": "4.0.514",
-		"@remotion/studio-shared": "4.0.514",
-		"@remotion/timeline-utils": "4.0.514",
-		"@remotion/zod-types": "4.0.514",
+		"remotion": "4.0.516",
+		"@remotion/captions": "4.0.516",
+		"@remotion/player": "4.0.516",
+		"@remotion/media-utils": "4.0.516",
+		"@remotion/renderer": "4.0.516",
+		"@remotion/web-renderer": "4.0.516",
+		"@remotion/studio-shared": "4.0.516",
+		"@remotion/timeline-utils": "4.0.516",
+		"@remotion/zod-types": "4.0.516",
 		"@jridgewell/trace-mapping": "0.3.31",
 		"mediabunny": "1.55.1",
 		"memfs": "3.4.3",
@@ -46,7 +46,7 @@
 		"react": "19.2.3",
 		"react-dom": "19.2.3",
 		"@types/semver": "7.5.3",
-		"@remotion/eslint-config-internal": "4.0.514",
+		"@remotion/eslint-config-internal": "4.0.516",
 		"eslint": "9.19.0",
 		"@typescript/native-preview": "7.0.0-dev.20260217.1"
 	},

package/dist/components/KeyboardShortcutsExplainer.d.ts

@@ -1,2 +0,0 @@
-import React from 'react';
-export declare const KeyboardShortcutsExplainer: React.FC;