@remotion/studio 4.0.523 → 4.0.525

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

@@ -4,6 +4,8 @@ exports.useCreateComposition = exports.getUniqueCompositionName = void 0;
 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;
@@ -33,10 +35,13 @@ const getUniqueCompositionName = (compositions) => {
 exports.getUniqueCompositionName = getUniqueCompositionName;
 const useCreateComposition = ({ compositions, durationInFrames, folderName, newId, parentName, selectedFrameRate, size, canvasCapture, }) => {
     const selectComposition = (0, InitialCompositionLoader_1.useSelectComposition)();
-    const componentName = (0, react_1.useMemo)(() => toPascalCase(newId), [newId]);
+    const compositionId = (0, slugify_name_1.slugifyName)(newId);
+    const componentName = (0, react_1.useMemo)(() => toPascalCase(compositionId), [compositionId]);
     const nameValidationMessage = (0, react_1.useMemo)(() => {
-        return (0, validate_new_comp_data_1.validateCompositionName)(newId, compositions);
-    }, [compositions, newId]);
+        return compositionId
+            ? (0, validate_new_comp_data_1.validateCompositionName)(compositionId, compositions)
+            : 'Enter an ID containing letters or numbers.';
+    }, [compositionId, compositions]);
     const widthValidationMessage = (0, react_1.useMemo)(() => {
         return (0, validate_new_comp_data_1.validateCompositionDimension)('Width', size.width);
     }, [size.width]);
@@ -50,7 +55,7 @@ const useCreateComposition = ({ compositions, durationInFrames, folderName, newI
             newFps: Number(selectedFrameRate),
             newHeight: Number(size.height),
             newWidth: Number(size.width),
-            newId,
+            newId: compositionId,
             componentName,
             componentImportPath: `./${componentName}`,
             folderName,
@@ -68,9 +73,9 @@ const useCreateComposition = ({ compositions, durationInFrames, folderName, newI
     }, [
         canvasCapture,
         componentName,
+        compositionId,
         durationInFrames,
         folderName,
-        newId,
         parentName,
         selectedFrameRate,
         size.height,
@@ -85,18 +90,23 @@ const useCreateComposition = ({ compositions, durationInFrames, folderName, newI
             dryRun: false,
             signal,
             symbolicatedStack,
+            undoRedoNavigation: {
+                undoRoute: (0, url_state_1.getRoute)(),
+                redoRoute: `/${compositionId}`,
+            },
         });
         if (result.success) {
             selectComposition({
-                id: newId,
+                id: compositionId,
                 folderName,
                 parentFolderName: parentName,
             }, true);
         }
         return result;
-    }, [codemod, folderName, newId, parentName, selectComposition]);
+    }, [codemod, compositionId, folderName, parentName, selectComposition]);
     return {
         codemod,
+        compositionId,
         createComposition,
         heightValidationMessage,
         nameValidationMessage,

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" | "toggleRightSidebar" | "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" | "toggleRightSidebar" | "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" | "toggleRightSidebar" | "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

@@ -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);
@@ -329,7 +330,7 @@ const useMenuStructure = (closeMenu, readOnlyStudio) => {
                             closeMenu();
                             setSelectedModal({
                                 type: 'settings',
-                                initialTab: browserStudioOperations === null ? 'rendering' : 'shortcuts',
+                                initialTab: browserStudioOperations === null ? 'studio' : 'shortcuts',
                                 initialPublicLicenseKey: (_b = (_a = window.remotion_renderDefaults) === null || _a === void 0 ? void 0 : _a.publicLicenseKey) !== null && _b !== void 0 ? _b : null,
                             });
                         },
@@ -823,7 +824,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',
@@ -1057,6 +1060,7 @@ const useMenuStructure = (closeMenu, readOnlyStudio) => {
         keyboardShortcutsDisabled,
         studioAskAIEnabled,
         askAIShortcut,
+        colorPickerShortcut,
         checkerboardShortcut,
         clearInOutPointsShortcut,
         goToFrameShortcut,

package/dist/helpers/use-rename-composition.d.ts

@@ -5,6 +5,7 @@ export declare const useRenameComposition: ({ compositions, currentId, newId, }:
     newId: string;
 }) => {
     codemod: RecastCodemod;
+    compositionId: string;
     getValidationMessage: (value: string) => string | null;
     renameComposition: ({ newCompositionId, signal, symbolicatedStack, }: {
         newCompositionId: string;

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

@@ -3,43 +3,54 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.useRenameComposition = void 0;
 const react_1 = require("react");
 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 useRenameComposition = ({ compositions, currentId, newId, }) => {
     const getValidationMessage = (0, react_1.useCallback)((value) => {
-        if (value === currentId) {
+        const slug = (0, slugify_name_1.slugifyName)(value);
+        if (slug === currentId) {
             return null;
         }
-        return (0, validate_new_comp_data_1.validateCompositionName)(value, compositions);
+        return slug
+            ? (0, validate_new_comp_data_1.validateCompositionName)(slug, compositions)
+            : 'Enter an ID containing letters or numbers.';
     }, [compositions, currentId]);
     const getCodemod = (0, react_1.useCallback)((value) => {
         return {
             type: 'rename-composition',
             idToRename: currentId,
-            newId: value,
+            newId: (0, slugify_name_1.slugifyName)(value),
         };
     }, [currentId]);
+    const compositionId = (0, slugify_name_1.slugifyName)(newId);
     const validationMessage = (0, react_1.useMemo)(() => {
         return getValidationMessage(newId);
     }, [getValidationMessage, newId]);
     const codemod = (0, react_1.useMemo)(() => {
         return getCodemod(newId);
     }, [getCodemod, newId]);
-    const valid = validationMessage === null && currentId !== 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)(`/${newCompositionId}`);
+            (0, url_state_1.pushUrl)(`/${nextCompositionId}`);
         }
         return result;
     }, [getCodemod]);
     return {
         codemod,
+        compositionId,
         getValidationMessage,
         renameComposition,
         valid,

package/dist/icons/skills.js

@@ -4,7 +4,7 @@ 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" })
+            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: "0.85" }), 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: "0.85" })
         ] }));
 };
 exports.SkillsIcon = SkillsIcon;

package/dist/renderEntry.js

@@ -187,13 +187,13 @@ const renderContent = (Root) => {
                 defaultPixelFormat: bundleMode.compositionDefaultPixelFormat,
                 defaultProResProfile: bundleMode.compositionDefaultProResProfile,
                 defaultSampleRate: bundleMode.compositionDefaultSampleRate,
-            }, initialCompositions: [], children: jsx_runtime_1.jsx(remotion_1.Internals.RemotionRootContexts, { frameState: null, audioEnabled: window.remotion_audioEnabled, videoEnabled: window.remotion_videoEnabled, logLevel: (_a = window.remotion_logLevel) !== null && _a !== void 0 ? _a : 'info', numberOfAudioTags: 0, audioLatencyHint: (_b = window.remotion_audioLatencyHint) !== null && _b !== void 0 ? _b : 'playback', previewSampleRate: window.remotion_previewSampleRate, _experimentalKeepAudioContextAlive: false, children: jsx_runtime_1.jsxs(remotion_1.Internals.RenderAssetManagerProvider, { collectAssets: null, children: [
+            }, initialCompositions: [], children: jsx_runtime_1.jsx(remotion_1.Internals.RemotionRootContexts, { frameState: null, audioEnabled: window.remotion_audioEnabled, videoEnabled: window.remotion_videoEnabled, logLevel: (_a = window.remotion_logLevel) !== null && _a !== void 0 ? _a : 'info', numberOfAudioTags: 0, audioLatencyHint: (_b = window.remotion_audioLatencyHint) !== null && _b !== void 0 ? _b : 'playback', previewSampleRate: window.remotion_sampleRate, _experimentalKeepAudioContextAlive: false, children: jsx_runtime_1.jsxs(remotion_1.Internals.RenderAssetManagerProvider, { collectAssets: null, children: [
                         jsx_runtime_1.jsx(Root, {}), jsx_runtime_1.jsx(GetVideoComposition, { state: bundleMode })
                     ] }) }) }));
         renderToDOM(markup);
     }
     if (bundleMode.type === 'evaluation') {
-        const markup = (jsx_runtime_1.jsx(remotion_1.Internals.CompositionManagerProvider, { initialCanvasContent: null, onlyRenderComposition: null, currentCompositionMetadata: null, initialCompositions: [], children: jsx_runtime_1.jsx(remotion_1.Internals.RemotionRootContexts, { frameState: null, audioEnabled: window.remotion_audioEnabled, videoEnabled: window.remotion_videoEnabled, logLevel: (_c = window.remotion_logLevel) !== null && _c !== void 0 ? _c : 'info', numberOfAudioTags: 0, audioLatencyHint: (_d = window.remotion_audioLatencyHint) !== null && _d !== void 0 ? _d : 'playback', previewSampleRate: window.remotion_previewSampleRate, _experimentalKeepAudioContextAlive: false, children: jsx_runtime_1.jsx(remotion_1.Internals.RenderAssetManagerProvider, { collectAssets: null, children: jsx_runtime_1.jsx(Root, {}) }) }) }));
+        const markup = (jsx_runtime_1.jsx(remotion_1.Internals.CompositionManagerProvider, { initialCanvasContent: null, onlyRenderComposition: null, currentCompositionMetadata: null, initialCompositions: [], children: jsx_runtime_1.jsx(remotion_1.Internals.RemotionRootContexts, { frameState: null, audioEnabled: window.remotion_audioEnabled, videoEnabled: window.remotion_videoEnabled, logLevel: (_c = window.remotion_logLevel) !== null && _c !== void 0 ? _c : 'info', numberOfAudioTags: 0, audioLatencyHint: (_d = window.remotion_audioLatencyHint) !== null && _d !== void 0 ? _d : 'playback', previewSampleRate: window.remotion_sampleRate, _experimentalKeepAudioContextAlive: false, children: jsx_runtime_1.jsx(remotion_1.Internals.RenderAssetManagerProvider, { collectAssets: null, children: jsx_runtime_1.jsx(Root, {}) }) }) }));
         renderToDOM(markup);
     }
     if (bundleMode.type === 'index') {

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;
@@ -206,7 +218,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.523",
+	"version": "4.0.525",
 	"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.523",
-		"@remotion/whisper-webgpu": "4.0.523",
+		"@remotion/video-matting": "4.0.525",
+		"@remotion/whisper-webgpu": "4.0.525",
 		"react": ">=16.8.0",
 		"react-dom": ">=16.8.0"
 	},
@@ -35,32 +35,32 @@
 	},
 	"dependencies": {
 		"@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",
+		"@remotion/canvas": "4.0.525",
+		"@remotion/captions": "4.0.525",
+		"@remotion/media": "4.0.525",
+		"@remotion/media-utils": "4.0.525",
+		"@remotion/player": "4.0.525",
+		"@remotion/renderer": "4.0.525",
+		"@remotion/studio-codemods": "4.0.525",
+		"@remotion/studio-protocol": "4.0.525",
+		"@remotion/studio-shared": "4.0.525",
+		"@remotion/timeline-utils": "4.0.525",
+		"@remotion/web-renderer": "4.0.525",
+		"@remotion/zod-types": "4.0.525",
 		"@tanstack/react-virtual": "3.14.9",
-		"mediabunny": "1.55.5",
+		"mediabunny": "1.56.1",
 		"memfs": "3.4.3",
 		"open": "8.4.2",
 		"prismjs": "1.30.0",
-		"remotion": "4.0.523",
+		"remotion": "4.0.525",
 		"semver": "7.5.3",
 		"zod": "4.5.4"
 	},
 	"devDependencies": {
 		"@happy-dom/global-registrator": "14.5.1",
-		"@remotion/eslint-config-internal": "4.0.523",
-		"@remotion/video-matting": "4.0.523",
-		"@remotion/whisper-webgpu": "4.0.523",
+		"@remotion/eslint-config-internal": "4.0.525",
+		"@remotion/video-matting": "4.0.525",
+		"@remotion/whisper-webgpu": "4.0.525",
 		"@testing-library/react": "16.1.0",
 		"@types/prismjs": "1.26.4",
 		"@types/semver": "7.5.3",

package/dist/components/HighlightedElementSource.d.ts

@@ -1,5 +0,0 @@
-import React from 'react';
-declare const HighlightedElementSource: React.FC<{
-    readonly source: string;
-}>;
-export default HighlightedElementSource;

package/dist/esm/LazyModels-2trdm224.mjs

@@ -1,11 +0,0 @@
-import {
-  Models
-} from "./index-5qddp5h7.mjs";
-import"./index-1x7bsdh6.mjs";
-import"./index-xhe2m2qr.mjs";
-import"./index-5zrb1ft4.mjs";
-import"./index-jg13hf2g.mjs";
-import"./index-rcv7qkt5.mjs";
-export {
-  Models as default
-};

package/dist/esm/LazyModels-fjb5ckaq.mjs

@@ -1,11 +0,0 @@
-import {
-  Models
-} from "./index-czwvnn9g.mjs";
-import"./index-1x7bsdh6.mjs";
-import"./index-xhe2m2qr.mjs";
-import"./index-5zrb1ft4.mjs";
-import"./index-jg13hf2g.mjs";
-import"./index-rcv7qkt5.mjs";
-export {
-  Models as default
-};

package/dist/helpers/prism-tomorrow.d.ts

@@ -1 +0,0 @@
-export declare const prismTomorrow = "/**\n * prism.js tomorrow night eighties for JavaScript, CoffeeScript, CSS and HTML\n * Based on https://github.com/chriskempson/tomorrow-theme\n * @author Rose Pritchard\n */\n\ncode[class*=\"language-\"],\npre[class*=\"language-\"] {\n\tcolor: #ccc;\n\tbackground: none;\n\tfont-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;\n\tfont-size: 1em;\n\ttext-align: left;\n\twhite-space: pre;\n\tword-spacing: normal;\n\tword-break: normal;\n\tword-wrap: normal;\n\tline-height: 1.5;\n\n\t-moz-tab-size: 4;\n\t-o-tab-size: 4;\n\ttab-size: 4;\n\n\t-webkit-hyphens: none;\n\t-moz-hyphens: none;\n\t-ms-hyphens: none;\n\thyphens: none;\n\n}\n\n/* Code blocks */\npre[class*=\"language-\"] {\n\tpadding: 1em;\n\tmargin: .5em 0;\n\toverflow: auto;\n}\n\n:not(pre) > code[class*=\"language-\"],\npre[class*=\"language-\"] {\n\tbackground: #2d2d2d;\n}\n\n/* Inline code */\n:not(pre) > code[class*=\"language-\"] {\n\tpadding: .1em;\n\tborder-radius: .3em;\n\twhite-space: normal;\n}\n\n.token.comment,\n.token.block-comment,\n.token.prolog,\n.token.doctype,\n.token.cdata {\n\tcolor: #999;\n}\n\n.token.punctuation {\n\tcolor: #ccc;\n}\n\n.token.tag,\n.token.attr-name,\n.token.namespace,\n.token.deleted {\n\tcolor: #e2777a;\n}\n\n.token.function-name {\n\tcolor: #6196cc;\n}\n\n.token.boolean,\n.token.number,\n.token.function {\n\tcolor: #f08d49;\n}\n\n.token.property,\n.token.class-name,\n.token.constant,\n.token.symbol {\n\tcolor: #f8c555;\n}\n\n.token.selector,\n.token.important,\n.token.atrule,\n.token.keyword,\n.token.builtin {\n\tcolor: #cc99cd;\n}\n\n.token.string,\n.token.char,\n.token.attr-value,\n.token.regex,\n.token.variable {\n\tcolor: #7ec699;\n}\n\n.token.operator,\n.token.entity,\n.token.url {\n\tcolor: #67cdcc;\n}\n\n.token.important,\n.token.bold {\n\tfont-weight: bold;\n}\n.token.italic {\n\tfont-style: italic;\n}\n\n.token.entity {\n\tcursor: help;\n}\n\n.token.inserted {\n\tcolor: green;\n}\n";

package/dist/helpers/prism-tomorrow.js

@@ -1,151 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.prismTomorrow = void 0;
-// Unmodified prismjs@1.30.0/themes/prism-tomorrow.css, stored as a string for
-// Studio’s CSS injection (including Browser Studio, which has no CSS loader).
-/*
-MIT LICENSE
-
-Copyright (c) 2012 Lea Verou
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in
-all copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
-THE SOFTWARE.
-*/
-exports.prismTomorrow = `/**
- * prism.js tomorrow night eighties for JavaScript, CoffeeScript, CSS and HTML
- * Based on https://github.com/chriskempson/tomorrow-theme
- * @author Rose Pritchard
- */
-
-code[class*="language-"],
-pre[class*="language-"] {
-	color: #ccc;
-	background: none;
-	font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
-	font-size: 1em;
-	text-align: left;
-	white-space: pre;
-	word-spacing: normal;
-	word-break: normal;
-	word-wrap: normal;
-	line-height: 1.5;
-
-	-moz-tab-size: 4;
-	-o-tab-size: 4;
-	tab-size: 4;
-
-	-webkit-hyphens: none;
-	-moz-hyphens: none;
-	-ms-hyphens: none;
-	hyphens: none;
-
-}
-
-/* Code blocks */
-pre[class*="language-"] {
-	padding: 1em;
-	margin: .5em 0;
-	overflow: auto;
-}
-
-:not(pre) > code[class*="language-"],
-pre[class*="language-"] {
-	background: #2d2d2d;
-}
-
-/* Inline code */
-:not(pre) > code[class*="language-"] {
-	padding: .1em;
-	border-radius: .3em;
-	white-space: normal;
-}
-
-.token.comment,
-.token.block-comment,
-.token.prolog,
-.token.doctype,
-.token.cdata {
-	color: #999;
-}
-
-.token.punctuation {
-	color: #ccc;
-}
-
-.token.tag,
-.token.attr-name,
-.token.namespace,
-.token.deleted {
-	color: #e2777a;
-}
-
-.token.function-name {
-	color: #6196cc;
-}
-
-.token.boolean,
-.token.number,
-.token.function {
-	color: #f08d49;
-}
-
-.token.property,
-.token.class-name,
-.token.constant,
-.token.symbol {
-	color: #f8c555;
-}
-
-.token.selector,
-.token.important,
-.token.atrule,
-.token.keyword,
-.token.builtin {
-	color: #cc99cd;
-}
-
-.token.string,
-.token.char,
-.token.attr-value,
-.token.regex,
-.token.variable {
-	color: #7ec699;
-}
-
-.token.operator,
-.token.entity,
-.token.url {
-	color: #67cdcc;
-}
-
-.token.important,
-.token.bold {
-	font-weight: bold;
-}
-.token.italic {
-	font-style: italic;
-}
-
-.token.entity {
-	cursor: help;
-}
-
-.token.inserted {
-	color: green;
-}
-`;