@remotion/studio 4.0.522 → 4.0.523

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

@@ -15,7 +15,6 @@ 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 ShortcutHint_1 = require("../error-overlay/remotion-overlay/ShortcutHint");
 const Checkmark_1 = require("../icons/Checkmark");
 const canvas_ref_1 = require("../state/canvas-ref");
 const checkerboard_1 = require("../state/checkerboard");
@@ -37,6 +36,7 @@ const open_in_editor_1 = require("./open-in-editor");
 const pick_color_1 = require("./pick-color");
 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");
 const openExternal = (link) => {
     window.open(link, '_blank');
 };
@@ -186,7 +186,7 @@ const getFileMenu = ({ readOnlyStudio, closeMenu, editorName, editorId, previewS
         quickSwitcherLabel: null,
     };
 };
-const getRenderMenuItems = ({ closeMenu, previewServerState, readOnlyStudio, }) => {
+const getRenderMenuItems = ({ closeMenu, previewServerState, readOnlyStudio, renderShortcut, }) => {
     return [
         readOnlyStudio
             ? null
@@ -204,7 +204,9 @@ const getRenderMenuItems = ({ closeMenu, previewServerState, readOnlyStudio, })
                     renderButton.click();
                 },
                 type: 'item',
-                keyHint: 'R',
+                keyHint: (0, use_keybinding_1.areKeyboardShortcutsDisabled)()
+                    ? null
+                    : renderShortcut || null,
                 leftItem: null,
                 subMenu: null,
                 quickSwitcherLabel: 'Render...',
@@ -244,6 +246,17 @@ const useMenuStructure = (closeMenu, readOnlyStudio) => {
     const { type } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx).previewServerState;
     const { defaultEditorId, defaultEditorName } = (0, use_default_editor_info_1.useEditorOpening)(type === 'connected');
     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');
+    const checkerboardShortcut = (0, use_keyboard_shortcut_label_1.useKeyboardShortcutLabel)('toggleCheckerboard');
+    const quickSwitcherShortcut = (0, use_keyboard_shortcut_label_1.useKeyboardShortcutLabel)('quickSwitcher');
+    const setInPointShortcut = (0, use_keyboard_shortcut_label_1.useKeyboardShortcutLabel)('setInPoint');
+    const setOutPointShortcut = (0, use_keyboard_shortcut_label_1.useKeyboardShortcutLabel)('setOutPoint');
+    const clearInOutPointsShortcut = (0, use_keyboard_shortcut_label_1.useKeyboardShortcutLabel)('clearInOutPoints');
+    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 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);
     const sizes = (0, react_1.useMemo)(() => (0, SizeSelector_1.getUniqueSizes)(size), [size]);
@@ -393,7 +406,9 @@ const useMenuStructure = (closeMenu, readOnlyStudio) => {
                             preselectIndex: sizePreselectIndex,
                             items: sizes.map((newSize) => ({
                                 id: String(newSize.size),
-                                keyHint: newSize.size === 1 ? '0' : null,
+                                keyHint: newSize.size === 1 && !keyboardShortcutsDisabled
+                                    ? resetZoomShortcut || null
+                                    : null,
                                 label: (0, SizeSelector_1.getPreviewSizeLabel)(newSize),
                                 leftItem: String(newSize.size) === String(size.size) ? (jsx_runtime_1.jsx(Checkmark_1.Checkmark, {})) : null,
                                 onClick: () => {
@@ -475,7 +490,9 @@ const useMenuStructure = (closeMenu, readOnlyStudio) => {
                     },
                     {
                         id: 'enable-snapping',
-                        keyHint: keyboardShortcutsDisabled ? null : 'Shift+M',
+                        keyHint: keyboardShortcutsDisabled
+                            ? null
+                            : toggleSnappingShortcut || null,
                         label: 'Enable Snapping',
                         onClick: () => {
                             closeMenu();
@@ -610,7 +627,9 @@ const useMenuStructure = (closeMenu, readOnlyStudio) => {
                     },
                     {
                         id: 'checkerboard',
-                        keyHint: 'T',
+                        keyHint: keyboardShortcutsDisabled
+                            ? null
+                            : checkerboardShortcut || null,
                         label: 'Transparency as checkerboard',
                         onClick: () => {
                             closeMenu();
@@ -630,7 +649,9 @@ const useMenuStructure = (closeMenu, readOnlyStudio) => {
                     },
                     {
                         id: 'quick-switcher',
-                        keyHint: `${ShortcutHint_1.cmdOrCtrlCharacter}+K`,
+                        keyHint: keyboardShortcutsDisabled
+                            ? null
+                            : quickSwitcherShortcut || null,
                         label: 'Quick Switcher',
                         onClick: () => {
                             closeMenu();
@@ -654,7 +675,9 @@ const useMenuStructure = (closeMenu, readOnlyStudio) => {
                     },
                     {
                         id: 'in-mark',
-                        keyHint: 'I',
+                        keyHint: keyboardShortcutsDisabled
+                            ? null
+                            : setInPointShortcut || null,
                         label: 'In Mark',
                         leftItem: null,
                         onClick: () => {
@@ -669,7 +692,9 @@ const useMenuStructure = (closeMenu, readOnlyStudio) => {
                     },
                     {
                         id: 'out-mark',
-                        keyHint: 'O',
+                        keyHint: keyboardShortcutsDisabled
+                            ? null
+                            : setOutPointShortcut || null,
                         label: 'Out Mark',
                         leftItem: null,
                         onClick: () => {
@@ -684,7 +709,9 @@ const useMenuStructure = (closeMenu, readOnlyStudio) => {
                     },
                     {
                         id: 'x-mark',
-                        keyHint: 'X',
+                        keyHint: keyboardShortcutsDisabled
+                            ? null
+                            : clearInOutPointsShortcut || null,
                         label: 'Clear In/Out Marks',
                         leftItem: null,
                         onClick: () => {
@@ -699,7 +726,9 @@ const useMenuStructure = (closeMenu, readOnlyStudio) => {
                     },
                     {
                         id: 'goto-time',
-                        keyHint: 'G',
+                        keyHint: keyboardShortcutsDisabled
+                            ? null
+                            : goToFrameShortcut || null,
                         label: 'Go to frame',
                         leftItem: null,
                         onClick: () => {
@@ -744,6 +773,7 @@ const useMenuStructure = (closeMenu, readOnlyStudio) => {
                         closeMenu,
                         previewServerState: type,
                         readOnlyStudio,
+                        renderShortcut,
                     }),
                     ...(0, composition_menu_items_1.getCompositionMenuItems)({
                         closeMenu,
@@ -775,7 +805,9 @@ const useMenuStructure = (closeMenu, readOnlyStudio) => {
                                 (_a = AskAiModal_1.askAiModalRef.current) === null || _a === void 0 ? void 0 : _a.toggle();
                             },
                             leftItem: null,
-                            keyHint: `${ShortcutHint_1.cmdOrCtrlCharacter}+I`,
+                            keyHint: keyboardShortcutsDisabled
+                                ? null
+                                : askAIShortcut || null,
                             subMenu: null,
                             type: 'item',
                             quickSwitcherLabel: 'Ask AI',
@@ -845,7 +877,9 @@ const useMenuStructure = (closeMenu, readOnlyStudio) => {
                                 initialPublicLicenseKey: (_b = (_a = window.remotion_renderDefaults) === null || _a === void 0 ? void 0 : _a.publicLicenseKey) !== null && _b !== void 0 ? _b : null,
                             });
                         },
-                        keyHint: '?',
+                        keyHint: keyboardShortcutsDisabled
+                            ? null
+                            : showKeyboardShortcutsShortcut || null,
                         leftItem: null,
                         subMenu: null,
                         type: 'item',
@@ -1022,6 +1056,17 @@ const useMenuStructure = (closeMenu, readOnlyStudio) => {
         defaultEditorName,
         keyboardShortcutsDisabled,
         studioAskAIEnabled,
+        askAIShortcut,
+        checkerboardShortcut,
+        clearInOutPointsShortcut,
+        goToFrameShortcut,
+        quickSwitcherShortcut,
+        renderShortcut,
+        resetZoomShortcut,
+        setInPointShortcut,
+        setOutPointShortcut,
+        showKeyboardShortcutsShortcut,
+        toggleSnappingShortcut,
         browserStudioOperations,
         size.size,
         setSize,

package/dist/icons/input-props.d.ts

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

package/dist/icons/input-props.js

@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.InputPropsIcon = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const colors_1 = require("../helpers/colors");
-const InputPropsIcon = (props) => {
-    return (jsx_runtime_1.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 576 512", ...props, children: jsx_runtime_1.jsx("path", { fill: colors_1.CURRENT_COLOR_LOWERCASE, d: "M144 32c-44.2 0-80 35.8-80 80v53.5c0 12.7-5.1 24.9-14.1 33.9L4.7 244.7C1.7 247.7 0 251.8 0 256s1.7 8.3 4.7 11.3L50 312.6c9 9 14.1 21.2 14.1 33.9V400c0 44.2 35.8 80 80 80h64c8.8 0 16-7.2 16-16s-7.2-16-16-16h-64c-26.5 0-48-21.5-48-48v-53.5c0-21.2-8.4-41.6-23.4-56.6L38.6 256l34-33.9c15-15 23.4-35.4 23.4-56.6V112c0-26.5 21.5-48 48-48h64c8.8 0 16-7.2 16-16s-7.2-16-16-16h-64zm288 0h-64c-8.8 0-16 7.2-16 16s7.2 16 16 16h64c26.5 0 48 21.5 48 48v53.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.6V400c0 26.5-21.5 48-48 48h-64c-8.8 0-16 7.2-16 16s7.2 16 16 16h64c44.2 0 80-35.8 80-80v-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.9V112c0-44.2-35.8-80-80-80z" }) }));
+const InputPropsIcon = ({ color, ...props }) => {
+    return (jsx_runtime_1.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 576 512", ...props, children: jsx_runtime_1.jsx("path", { fill: color !== null && color !== void 0 ? color : colors_1.CURRENT_COLOR_LOWERCASE, d: "M144 32c-44.2 0-80 35.8-80 80v53.5c0 12.7-5.1 24.9-14.1 33.9L4.7 244.7C1.7 247.7 0 251.8 0 256s1.7 8.3 4.7 11.3L50 312.6c9 9 14.1 21.2 14.1 33.9V400c0 44.2 35.8 80 80 80h64c8.8 0 16-7.2 16-16s-7.2-16-16-16h-64c-26.5 0-48-21.5-48-48v-53.5c0-21.2-8.4-41.6-23.4-56.6L38.6 256l34-33.9c15-15 23.4-35.4 23.4-56.6V112c0-26.5 21.5-48 48-48h64c8.8 0 16-7.2 16-16s-7.2-16-16-16h-64zm288 0h-64c-8.8 0-16 7.2-16 16s7.2 16 16 16h64c26.5 0 48 21.5 48 48v53.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.6V400c0 26.5-21.5 48-48 48h-64c-8.8 0-16 7.2-16 16s7.2 16 16 16h64c44.2 0 80-35.8 80-80v-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.9V112c0-44.2-35.8-80-80-80z" }) }));
 };
 exports.InputPropsIcon = InputPropsIcon;

package/dist/icons/models.d.ts

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

package/dist/icons/models.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ModelsIcon = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const colors_1 = require("../helpers/colors");
+const ModelsIcon = ({ color, ...props }) => (jsx_runtime_1.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 512 512", ...props, children: jsx_runtime_1.jsx("path", { d: "M176 16c0-8.8-7.2-16-16-16s-16 7.2-16 16v48h-16c-35.3 0-64 28.7-64 64v16H16c-8.8 0-16 7.2-16 16s7.2 16 16 16h48v64H16c-8.8 0-16 7.2-16 16s7.2 16 16 16h48v64H16c-8.8 0-16 7.2-16 16s7.2 16 16 16h48v16c0 35.3 28.7 64 64 64h16v48c0 8.8 7.2 16 16 16s16-7.2 16-16v-48h64v48c0 8.8 7.2 16 16 16s16-7.2 16-16v-48h64v48c0 8.8 7.2 16 16 16s16-7.2 16-16v-48h16c35.3 0 64-28.7 64-64v-16h48c8.8 0 16-7.2 16-16s-7.2-16-16-16h-48v-64h48c8.8 0 16-7.2 16-16s-7.2-16-16-16h-48v-64h48c8.8 0 16-7.2 16-16s-7.2-16-16-16h-48v-16c0-35.3-28.7-64-64-64h-16V16c0-8.8-7.2-16-16-16s-16 7.2-16 16v48h-64V16c0-8.8-7.2-16-16-16s-16 7.2-16 16v48h-64V16ZM416 128v256c0 17.7-14.3 32-32 32H128c-17.7 0-32-14.3-32-32V128c0-17.7 14.3-32 32-32h256c17.7 0 32 14.3 32 32ZM192 160c-17.7 0-32 14.3-32 32v128c0 17.7 14.3 32 32 32h128c17.7 0 32-14.3 32-32V192c0-17.7-14.3-32-32-32H192Zm128 32v128H192V192h128Z", fill: color !== null && color !== void 0 ? color : colors_1.CURRENT_COLOR_LOWERCASE }) }));
+exports.ModelsIcon = ModelsIcon;

package/dist/icons/separation.d.ts

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

package/dist/icons/separation.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SeparationIcon = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const colors_1 = require("../helpers/colors");
+const SeparationIcon = ({ color, ...props }) => (jsx_runtime_1.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 640 512", ...props, children: jsx_runtime_1.jsx("path", { d: "M0 64c0 29.8 20.4 54.9 48 62v100c-27.6 7.1-48 32.2-48 62 0 35.3 28.7 64 64 64 29.8 0 54.9-20.4 62-48h196c7.1 27.6 32.2 48 62 48 35.3 0 64-28.7 64-64 0-29.8-20.4-54.9-48-62V126c27.6-7.1 48-32.2 48-62 0-35.3-28.7-64-64-64-29.8 0-54.9 20.4-62 48H126C118.9 20.4 93.8 0 64 0 28.7 0 0 28.7 0 64Zm322 16c5.8 22.5 23.5 40.2 46 46v100c-22.5 5.8-40.2 23.5-46 46H126c-5.8-22.5-23.5-40.2-46-46V126c22.5-5.8 40.2-23.5 46-46h196Zm174 128h-16v32h34c5.8 22.5 23.5 40.2 46 46v100c-22.5 5.8-40.2 23.5-46 46H318c-5.8-22.5-23.5-40.2-46-46v-34h-32v34c-27.6 7.1-48 32.2-48 62 0 35.3 28.7 64 64 64 29.8 0 54.9-20.4 62-48h196c7.1 27.6 32.2 48 62 48 35.3 0 64-28.7 64-64 0-29.8-20.4-54.9-48-62V286c27.6-7.1 48-32.2 48-62 0-35.3-28.7-64-64-64-29.8 0-54.9 20.4-62 48h-18Zm80 48a32 32 0 1 1 0-64 32 32 0 1 1 0 64ZM544 448a32 32 0 1 1 64 0 32 32 0 1 1-64 0ZM256 480a32 32 0 1 1 0-64 32 32 0 1 1 0 64Zm96-192a32 32 0 1 1 64 0 32 32 0 1 1-64 0ZM64 320a32 32 0 1 1 0-64 32 32 0 1 1 0 64ZM352 64a32 32 0 1 1 64 0 32 32 0 1 1-64 0ZM64 96a32 32 0 1 1 0-64 32 32 0 1 1 0 64Z", fill: color !== null && color !== void 0 ? color : colors_1.CURRENT_COLOR_LOWERCASE }) }));
+exports.SeparationIcon = SeparationIcon;

package/dist/icons/transcription.d.ts

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

package/dist/icons/transcription.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TranscriptionIcon = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const colors_1 = require("../helpers/colors");
+const TranscriptionIcon = ({ color, ...props }) => (jsx_runtime_1.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 512 512", ...props, children: jsx_runtime_1.jsx("path", { d: "M448 96c17.7 0 32 14.3 32 32v256c0 17.7-14.3 32-32 32H64c-17.7 0-32-14.3-32-32V128c0-17.7 14.3-32 32-32h384ZM64 64C28.7 64 0 92.7 0 128v256c0 35.3 28.7 64 64 64h384c35.3 0 64-28.7 64-64V128c0-35.3-28.7-64-64-64H64Zm88 128h32c13.3 0 24 10.7 24 24 0 8.8 7.2 16 16 16s16-7.2 16-16c0-30.9-25.1-56-56-56h-32c-30.9 0-56 25.1-56 56v80c0 30.9 25.1 56 56 56h32c30.9 0 56-25.1 56-56 0-8.8-7.2-16-16-16s-16 7.2-16 16c0 13.3-10.7 24-24 24h-32c-13.3 0-24-10.7-24-24v-80c0-13.3 10.7-24 24-24Zm152 24c0-13.3 10.7-24 24-24h32c13.3 0 24 10.7 24 24 0 8.8 7.2 16 16 16s16-7.2 16-16c0-30.9-25.1-56-56-56h-32c-30.9 0-56 25.1-56 56v80c0 30.9 25.1 56 56 56h32c30.9 0 56-25.1 56-56 0-8.8-7.2-16-16-16s-16 7.2-16 16c0 13.3-10.7 24-24 24h-32c-13.3 0-24-10.7-24-24v-80Z", fill: color !== null && color !== void 0 ? color : colors_1.CURRENT_COLOR_LOWERCASE }) }));
+exports.TranscriptionIcon = TranscriptionIcon;

package/dist/icons/upload.js

@@ -3,6 +3,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.UploadIcon = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const UploadIcon = ({ 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: "M192 96L320 96L320 192C320 227.3 348.7 256 384 256L480 256L480 512C480 529.7 465.7 544 448 544L192 544C174.3 544 160 529.7 160 512L160 128C160 110.3 174.3 96 192 96zM352 109.3L466.7 224L384 224C366.3 224 352 209.7 352 192L352 109.3zM192 64C156.7 64 128 92.7 128 128L128 512C128 547.3 156.7 576 192 576L448 576C483.3 576 512 547.3 512 512L512 250.5C512 233.5 505.3 217.2 493.3 205.2L370.7 82.7C358.7 70.7 342.5 64 325.5 64L192 64zM304 488C304 496.8 311.2 504 320 504C328.8 504 336 496.8 336 488L336 432L392 432C400.8 432 408 424.8 408 416C408 407.2 400.8 400 392 400L336 400L336 344C336 335.2 328.8 328 320 328C311.2 328 304 335.2 304 344L304 400L248 400C239.2 400 232 407.2 232 416C232 424.8 239.2 432 248 432L304 432L304 488z" }) }));
+    return (jsx_runtime_1.jsx("svg", { ...props, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 448 512", children: jsx_runtime_1.jsx("path", { fill: color, d: "M240 54.6L240 336c0 8.8-7.2 16-16 16s-16-7.2-16-16l0-281.4-84.7 84.7c-6.2 6.2-16.4 6.2-22.6 0s-6.2-16.4 0-22.6l112-112c6.2-6.2 16.4-6.2 22.6 0l112 112c6.2 6.2 6.2 16.4 0 22.6s-16.4 6.2-22.6 0L240 54.6zM160 320l-96 0c-17.7 0-32 14.3-32 32l0 64c0 17.7 14.3 32 32 32l320 0c17.7 0 32-14.3 32-32l0-64c0-17.7-14.3-32-32-32l-96 0 0-32 96 0c35.3 0 64 28.7 64 64l0 64c0 35.3-28.7 64-64 64L64 480c-35.3 0-64-28.7-64-64l0-64c0-35.3 28.7-64 64-64l96 0 0 32zm160 64a24 24 0 1 1 48 0 24 24 0 1 1-48 0z" }) }));
 };
 exports.UploadIcon = UploadIcon;

package/dist/state/modals.d.ts

@@ -109,6 +109,18 @@ export type AddEffectModalState = {
     nodePath: SequencePropsSubscriptionKey;
     clientId: string;
 };
+export type TranscriptionModalState = {
+    type: 'transcribe';
+    src: string;
+    displayName: string;
+    audioStreamIndex: number | null;
+    requestInit: Omit<RequestInit, 'signal'> | null;
+};
+export type VideoMattingModalState = {
+    type: 'video-matting';
+    src: string;
+    displayName: string;
+};
 export type CanvasCaptureImport = {
     readonly data: CanvasCaptureData;
     readonly durationInSeconds: number;
@@ -167,7 +179,7 @@ export type ModalState = {
     type: 'input-props-override';
 } | {
     type: 'settings';
-    initialTab: 'apps' | 'rendering' | 'studio' | 'packages' | 'shortcuts' | 'skills' | 'updates' | 'license';
+    initialTab: 'apps' | 'rendering' | 'studio' | 'packages' | 'models' | 'shortcuts' | 'skills' | 'updates' | 'license';
     initialPublicLicenseKey: string | null;
 } | RenderModalState | WebRenderModalState | {
     type: 'render-progress';
@@ -194,7 +206,7 @@ export type ModalState = {
     type: 'element-library';
     name: string;
     url: string;
-} | ElementInstallModalState | AddEffectModalState | ConfirmationDialogState | SvgImportDialogState;
+} | ElementInstallModalState | AddEffectModalState | TranscriptionModalState | VideoMattingModalState | ConfirmationDialogState | SvgImportDialogState;
 export type SetSelectedModalContextType = {
     setSelectedModal: React.Dispatch<React.SetStateAction<ModalState | null>>;
 };

package/package.json

@@ -3,7 +3,7 @@
 		"url": "https://github.com/remotion-dev/remotion/tree/main/packages/studio"
 	},
 	"name": "@remotion/studio",
-	"version": "4.0.522",
+	"version": "4.0.523",
 	"description": "APIs for interacting with the Remotion Studio",
 	"main": "dist",
 	"scripts": {
@@ -20,40 +20,54 @@
 		"url": "https://github.com/remotion-dev/remotion/issues"
 	},
 	"peerDependencies": {
+		"@remotion/video-matting": "4.0.523",
+		"@remotion/whisper-webgpu": "4.0.523",
 		"react": ">=16.8.0",
 		"react-dom": ">=16.8.0"
 	},
+	"peerDependenciesMeta": {
+		"@remotion/video-matting": {
+			"optional": true
+		},
+		"@remotion/whisper-webgpu": {
+			"optional": true
+		}
+	},
 	"dependencies": {
-		"@tanstack/react-virtual": "3.14.9",
-		"@remotion/canvas": "4.0.522",
-		"@remotion/studio-protocol": "4.0.522",
-		"@remotion/studio-codemods": "4.0.522",
-		"semver": "7.5.3",
-		"remotion": "4.0.522",
-		"@remotion/captions": "4.0.522",
-		"@remotion/media": "4.0.522",
-		"@remotion/player": "4.0.522",
-		"@remotion/media-utils": "4.0.522",
-		"@remotion/renderer": "4.0.522",
-		"@remotion/web-renderer": "4.0.522",
-		"@remotion/studio-shared": "4.0.522",
-		"@remotion/timeline-utils": "4.0.522",
-		"@remotion/zod-types": "4.0.522",
 		"@jridgewell/trace-mapping": "0.3.31",
+		"@remotion/canvas": "4.0.523",
+		"@remotion/captions": "4.0.523",
+		"@remotion/media": "4.0.523",
+		"@remotion/media-utils": "4.0.523",
+		"@remotion/player": "4.0.523",
+		"@remotion/renderer": "4.0.523",
+		"@remotion/studio-codemods": "4.0.523",
+		"@remotion/studio-protocol": "4.0.523",
+		"@remotion/studio-shared": "4.0.523",
+		"@remotion/timeline-utils": "4.0.523",
+		"@remotion/web-renderer": "4.0.523",
+		"@remotion/zod-types": "4.0.523",
+		"@tanstack/react-virtual": "3.14.9",
 		"mediabunny": "1.55.5",
 		"memfs": "3.4.3",
 		"open": "8.4.2",
+		"prismjs": "1.30.0",
+		"remotion": "4.0.523",
+		"semver": "7.5.3",
 		"zod": "4.5.4"
 	},
 	"devDependencies": {
 		"@happy-dom/global-registrator": "14.5.1",
-		"react": "19.2.3",
-		"react-dom": "19.2.3",
+		"@remotion/eslint-config-internal": "4.0.523",
+		"@remotion/video-matting": "4.0.523",
+		"@remotion/whisper-webgpu": "4.0.523",
 		"@testing-library/react": "16.1.0",
+		"@types/prismjs": "1.26.4",
 		"@types/semver": "7.5.3",
-		"@remotion/eslint-config-internal": "4.0.522",
+		"@typescript/native-preview": "7.0.0-dev.20260217.1",
 		"eslint": "9.19.0",
-		"@typescript/native-preview": "7.0.0-dev.20260217.1"
+		"react": "19.2.3",
+		"react-dom": "19.2.3"
 	},
 	"publishConfig": {
 		"access": "public"

package/dist/components/UpdateCheck.d.ts

@@ -1 +0,0 @@
-export declare const UpdateCheck: () => import("react/jsx-runtime").JSX.Element | null;

package/dist/components/UpdateCheck.js

@@ -1,79 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.UpdateCheck = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const colors_1 = require("../helpers/colors");
-const modals_1 = require("../state/modals");
-const z_index_1 = require("../state/z-index");
-const InlineAction_1 = require("./InlineAction");
-const UpdateStatusContext_1 = require("./UpdateStatusContext");
-const buttonStyle = {
-    appearance: 'none',
-    border: 'none',
-    fontWeight: 'bold',
-    backgroundColor: colors_1.TRANSPARENT,
-    cursor: 'pointer',
-    fontSize: 14,
-    display: 'inline-flex',
-    justifyContent: 'center',
-    marginLeft: 8,
-};
-const updateIconContainer = {
-    alignItems: 'center',
-    display: 'flex',
-    flexShrink: 0,
-};
-const UpdateCheck = () => {
-    const { setSelectedModal } = (0, react_1.useContext)(modals_1.SetSelectedModalContext);
-    const { tabIndex } = (0, z_index_1.useZIndex)();
-    const { info, knownBugs } = (0, UpdateStatusContext_1.useUpdateStatus)();
-    const [hovered, setHovered] = (0, react_1.useState)(false);
-    const hasBugfixesAvailable = (0, react_1.useMemo)(() => {
-        return Boolean((info === null || info === void 0 ? void 0 : info.updateAvailable) && knownBugs && knownBugs.length > 0);
-    }, [info === null || info === void 0 ? void 0 : info.updateAvailable, knownBugs]);
-    const openModal = (0, react_1.useCallback)(() => {
-        var _a;
-        var _b;
-        setSelectedModal({
-            type: 'settings',
-            initialTab: 'updates',
-            initialPublicLicenseKey: (_b = (_a = window.remotion_renderDefaults) === null || _a === void 0 ? void 0 : _a.publicLicenseKey) !== null && _b !== void 0 ? _b : null,
-        });
-    }, [setSelectedModal]);
-    const dynButtonStyle = (0, react_1.useMemo)(() => {
-        return {
-            ...buttonStyle,
-            color: hovered
-                ? colors_1.WHITE
-                : hasBugfixesAvailable
-                    ? colors_1.WARNING_COLOR
-                    : colors_1.WHITE_ALPHA_80,
-        };
-    }, [hasBugfixesAvailable, hovered]);
-    const onPointerEnter = (0, react_1.useCallback)(() => {
-        setHovered(true);
-    }, []);
-    const onPointerLeave = (0, react_1.useCallback)(() => {
-        setHovered(false);
-    }, []);
-    const renderUpdateIcon = (0, react_1.useCallback)((color) => {
-        return (jsx_runtime_1.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", style: {
-                height: 16,
-                width: 16,
-                color,
-                flexShrink: 0,
-            }, viewBox: "0 0 512 512", children: jsx_runtime_1.jsx("path", { fill: color, d: "M256 48a208 208 0 1 1 0 416 208 208 0 1 1 0-416zm0 464A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM135.1 217.4c-4.5 4.2-7.1 10.1-7.1 16.3c0 12.3 10 22.3 22.3 22.3H208v96c0 17.7 14.3 32 32 32h32c17.7 0 32-14.3 32-32V256h57.7c12.3 0 22.3-10 22.3-22.3c0-6.2-2.6-12.1-7.1-16.3L269.8 117.5c-3.8-3.5-8.7-5.5-13.8-5.5s-10.1 2-13.8 5.5L135.1 217.4z" }) }));
-    }, []);
-    if (!info) {
-        return null;
-    }
-    if (!info.updateAvailable && !info.skillsUpdateAvailable) {
-        return null;
-    }
-    if (!hasBugfixesAvailable) {
-        return (jsx_runtime_1.jsx("div", { style: updateIconContainer, children: jsx_runtime_1.jsx(InlineAction_1.InlineAction, { variant: null, onClick: openModal, renderAction: renderUpdateIcon, unhoveredColor: colors_1.WHITE_ALPHA_80, title: "Update available" }) }));
-    }
-    return (jsx_runtime_1.jsx("button", { tabIndex: tabIndex, style: dynButtonStyle, onClick: openModal, onPointerEnter: onPointerEnter, onPointerLeave: onPointerLeave, type: "button", title: "Bugfixes available", children: "Bugfixes available" }));
-};
-exports.UpdateCheck = UpdateCheck;