@remotion/studio 4.0.518 → 4.0.520

package/dist/helpers/use-sync-external-store.d.ts

@@ -0,0 +1,3 @@
+type UseSyncExternalStore = <TSnapshot>(subscribe: (onStoreChange: () => void) => () => void, getSnapshot: () => TSnapshot, getServerSnapshot?: () => TSnapshot) => TSnapshot;
+export declare const useSyncExternalStore: UseSyncExternalStore;
+export {};

package/dist/helpers/use-sync-external-store.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useSyncExternalStore = void 0;
+const remotion_1 = require("remotion");
+({ useSyncExternalStore: exports.useSyncExternalStore } = remotion_1.Internals);

package/dist/previewEntry.js

@@ -10,8 +10,10 @@ const no_react_1 = require("remotion/no-react");
 const NoRegisterRoot_1 = require("./components/NoRegisterRoot");
 const entry_basic_1 = require("./error-overlay/entry-basic");
 const colors_1 = require("./helpers/colors");
+const install_fiber_sequence_order_observer_1 = require("./helpers/install-fiber-sequence-order-observer");
 const client_2 = require("./hot-middleware-client/client");
 const Studio_1 = require("./Studio");
+(0, install_fiber_sequence_order_observer_1.installFiberCommitOrderObserver)(window);
 remotion_1.Internals.CSSUtils.injectCSS(remotion_1.Internals.CSSUtils.makeDefaultPreviewCSS(null, colors_1.BACKGROUND_HEX));
 if (!window.__remotionOverlayStarted) {
     window.__remotionOverlayStarted = true;

package/dist/renderEntry.js

@@ -202,9 +202,11 @@ const renderContent = (Root) => {
         }
         renderToDOM(jsx_runtime_1.jsx("div", { children: jsx_runtime_1.jsx(DelayedSpinner, {}) }));
         Promise.resolve().then(() => __importStar(require('./internals'))).then(({ StudioInternals }) => {
+            var _a;
             window.remotion_isStudio = true;
             window.remotion_isReadOnlyStudio = true;
             window.remotion_inputProps = '{}';
+            (_a = window.remotion_enableSequenceStackTraces) === null || _a === void 0 ? void 0 : _a.call(window);
             renderToDOM(jsx_runtime_1.jsx(StudioInternals.Studio, { readOnly: true, rootComponent: Root }));
         })
             .catch((err) => {

package/dist/state/folders.d.ts

@@ -1,10 +1,13 @@
 import React from 'react';
 import type { ExpandedFoldersState } from '../helpers/persist-open-folders';
+export type CompositionSortOrder = 'registration' | 'alphabetical';
 type TFolderContext = {
     compositionFoldersExpanded: ExpandedFoldersState;
     setCompositionFoldersExpanded: React.Dispatch<React.SetStateAction<ExpandedFoldersState>>;
     assetFoldersExpanded: ExpandedFoldersState;
     setAssetFoldersExpanded: React.Dispatch<React.SetStateAction<ExpandedFoldersState>>;
+    compositionSortOrder: CompositionSortOrder;
+    setCompositionSortOrder: (sortOrder: CompositionSortOrder) => void;
 };
 export declare const FolderContext: React.Context<TFolderContext>;
 export declare const FolderContextProvider: React.FC<{

package/dist/state/folders.js

@@ -4,6 +4,29 @@ exports.FolderContextProvider = exports.FolderContext = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const persist_open_folders_1 = require("../helpers/persist-open-folders");
+const compositionSortOrderKey = 'remotion.compositionSortOrder';
+const loadCompositionSortOrder = () => {
+    if (typeof window === 'undefined') {
+        return 'registration';
+    }
+    try {
+        return window.localStorage.getItem(compositionSortOrderKey) ===
+            'alphabetical'
+            ? 'alphabetical'
+            : 'registration';
+    }
+    catch (_a) {
+        return 'registration';
+    }
+};
+const persistCompositionSortOrder = (sortOrder) => {
+    try {
+        window.localStorage.setItem(compositionSortOrderKey, sortOrder);
+    }
+    catch (_a) {
+        // Ignore quota errors or disabled storage.
+    }
+};
 exports.FolderContext = (0, react_1.createContext)({
     compositionFoldersExpanded: {},
     setCompositionFoldersExpanded: () => {
@@ -13,18 +36,34 @@ exports.FolderContext = (0, react_1.createContext)({
     setAssetFoldersExpanded: () => {
         throw new Error('default state');
     },
+    compositionSortOrder: 'registration',
+    setCompositionSortOrder: () => {
+        throw new Error('default state');
+    },
 });
 const FolderContextProvider = ({ children }) => {
     const [compositionFoldersExpanded, setCompositionFoldersExpanded] = (0, react_1.useState)(() => (0, persist_open_folders_1.loadExpandedFolders)('compositions'));
     const [assetFoldersExpanded, setAssetFoldersExpanded] = (0, react_1.useState)(() => (0, persist_open_folders_1.loadExpandedFolders)('assets'));
+    const [compositionSortOrder, setCompositionSortOrderState] = (0, react_1.useState)(loadCompositionSortOrder);
+    const setCompositionSortOrder = (0, react_1.useCallback)((sortOrder) => {
+        persistCompositionSortOrder(sortOrder);
+        setCompositionSortOrderState(sortOrder);
+    }, []);
     const value = (0, react_1.useMemo)(() => {
         return {
             compositionFoldersExpanded,
             setCompositionFoldersExpanded,
             assetFoldersExpanded,
             setAssetFoldersExpanded,
+            compositionSortOrder,
+            setCompositionSortOrder,
         };
-    }, [assetFoldersExpanded, compositionFoldersExpanded]);
+    }, [
+        assetFoldersExpanded,
+        compositionFoldersExpanded,
+        compositionSortOrder,
+        setCompositionSortOrder,
+    ]);
     return (jsx_runtime_1.jsx(exports.FolderContext.Provider, { value: value, children: children }));
 };
 exports.FolderContextProvider = FolderContextProvider;

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, RenderDefaults } from '@remotion/studio-shared';
+import type { CanvasCaptureData, ElementInstallExpectedFileState, ElementInstallRequest, 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';
@@ -8,7 +8,6 @@ import type { StaticFile } from '../api/get-static-files';
 import type { CompType } from '../components/NewComposition/DuplicateComposition';
 import type { QuickSwitcherMode } from '../components/QuickSwitcher/NoResults';
 import type { RenderType } from '../components/RenderModal/RenderModalAdvanced';
-import type { Bug, UpdateInfo } from '../components/UpdateCheck';
 export type WebRenderModalState = {
     type: 'web-render';
     initialFrame: number;
@@ -117,6 +116,22 @@ export type CanvasCaptureImport = {
     readonly height: number;
     readonly width: number;
 };
+export type ElementInstallPlan = {
+    readonly compositionFile: string;
+    readonly filePath: string;
+    readonly expectedFileState: ElementInstallExpectedFileState;
+};
+export type ElementInstallModalState = {
+    readonly type: 'element-install';
+    readonly currentPlan: ElementInstallPlan | null;
+    readonly dependenciesToReview: string[];
+    readonly missingPackages: string[];
+    readonly newPlan: ElementInstallPlan;
+    readonly onClose: () => void;
+    readonly request: ElementInstallRequest;
+    readonly sourceIsUnverified: boolean;
+    readonly sourceLabel: string;
+};
 export type ModalState = {
     type: 'new-comp';
     folderName: string | null;
@@ -154,15 +169,11 @@ export type ModalState = {
     type: 'input-props-override';
 } | {
     type: 'settings';
-    initialTab: 'apps' | 'rendering' | 'studio' | 'packages' | 'shortcuts' | 'license';
+    initialTab: 'apps' | 'rendering' | 'studio' | 'packages' | 'shortcuts' | 'skills' | 'updates' | 'license';
     initialPublicLicenseKey: string | null;
 } | RenderModalState | WebRenderModalState | {
     type: 'render-progress';
     jobId: string;
-} | {
-    type: 'update';
-    info: UpdateInfo;
-    knownBugs: Bug[];
 } | {
     type: 'fix-computed-value';
     prop: string;
@@ -185,7 +196,7 @@ export type ModalState = {
     type: 'element-library';
     name: string;
     url: string;
-} | AddEffectModalState | ConfirmationDialogState | SvgImportDialogState;
+} | ElementInstallModalState | AddEffectModalState | ConfirmationDialogState | SvgImportDialogState;
 export type SetSelectedModalContextType = {
     setSelectedModal: React.Dispatch<React.SetStateAction<ModalState | null>>;
 };

package/dist/state/timeline-sequence-hover.js

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.useTimelineSequenceHover = exports.useIsTimelineSequenceHovered = exports.useSetTimelineSequenceHover = exports.useTimelineSequenceHoverState = exports.TimelineSequenceHoverContext = exports.createTimelineSequenceHoverStore = void 0;
 const react_1 = require("react");
 const timeline_node_path_key_1 = require("../helpers/timeline-node-path-key");
+const use_sync_external_store_1 = require("../helpers/use-sync-external-store");
 const createTimelineSequenceHoverStore = () => {
     let hoveredSequence = null;
     const listeners = new Set();
@@ -28,7 +29,7 @@ exports.createTimelineSequenceHoverStore = createTimelineSequenceHoverStore;
 exports.TimelineSequenceHoverContext = (0, react_1.createContext)((0, exports.createTimelineSequenceHoverStore)());
 const useTimelineSequenceHoverState = () => {
     const store = (0, react_1.useContext)(exports.TimelineSequenceHoverContext);
-    return (0, react_1.useSyncExternalStore)(store.subscribe, store.getSnapshot, store.getSnapshot);
+    return (0, use_sync_external_store_1.useSyncExternalStore)(store.subscribe, store.getSnapshot, store.getSnapshot);
 };
 exports.useTimelineSequenceHoverState = useTimelineSequenceHoverState;
 const useSetTimelineSequenceHover = () => {
@@ -41,7 +42,7 @@ const useIsTimelineSequenceHovered = (nodePathKey) => {
         var _a;
         return nodePathKey !== null && ((_a = store.getSnapshot()) === null || _a === void 0 ? void 0 : _a.nodePathKey) === nodePathKey;
     }, [nodePathKey, store]);
-    return (0, react_1.useSyncExternalStore)(store.subscribe, getSnapshot, getSnapshot);
+    return (0, use_sync_external_store_1.useSyncExternalStore)(store.subscribe, getSnapshot, getSnapshot);
 };
 exports.useIsTimelineSequenceHovered = useIsTimelineSequenceHovered;
 const useTimelineSequenceHover = (nodePathInfo) => {

package/dist/state/timeline-zoom.d.ts

@@ -1,5 +1,4 @@
 import React from 'react';
-export { getTimelineMaxZoom, TIMELINE_MIN_ZOOM, } from '../helpers/get-timeline-max-zoom';
 export type TimelineSetZoomOptions = {
     anchorFrame: number | null;
     anchorContentX: number | null;

package/dist/state/timeline-zoom.js

@@ -1,16 +1,14 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.TimelineZoomContext = exports.TimelineZoomCtx = exports.TIMELINE_MIN_ZOOM = exports.getTimelineMaxZoom = void 0;
+exports.TimelineZoomContext = exports.TimelineZoomCtx = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const react_dom_1 = require("react-dom");
 const imperative_state_1 = require("../components/Timeline/imperative-state");
+const timeline_refs_1 = require("../components/Timeline/timeline-refs");
 const timeline_scroll_logic_1 = require("../components/Timeline/timeline-scroll-logic");
 const ZoomPersistor_1 = require("../components/ZoomPersistor");
 const get_timeline_max_zoom_1 = require("../helpers/get-timeline-max-zoom");
-const get_timeline_max_zoom_2 = require("../helpers/get-timeline-max-zoom");
-Object.defineProperty(exports, "getTimelineMaxZoom", { enumerable: true, get: function () { return get_timeline_max_zoom_2.getTimelineMaxZoom; } });
-Object.defineProperty(exports, "TIMELINE_MIN_ZOOM", { enumerable: true, get: function () { return get_timeline_max_zoom_2.TIMELINE_MIN_ZOOM; } });
 exports.TimelineZoomCtx = (0, react_1.createContext)({
     zoom: {},
     setZoom: () => {
@@ -31,9 +29,18 @@ const TimelineZoomContext = ({ children }) => {
         (0, react_dom_1.flushSync)(() => {
             setZoomState((prevZoomMap) => {
                 var _a;
+                var _b, _c;
+                const durationInFrames = (0, imperative_state_1.getCurrentDuration)();
+                const timelineViewportWidth = (_b = (_a = timeline_refs_1.scrollableRef.current) === null || _a === void 0 ? void 0 : _a.clientWidth) !== null && _b !== void 0 ? _b : 0;
+                const previousZoom = (0, get_timeline_max_zoom_1.getTimelineZoom)({
+                    durationInFrames,
+                    timelineViewportWidth,
+                    zoom: (_c = prevZoomMap[compositionId]) !== null && _c !== void 0 ? _c : null,
+                });
                 const newZoom = (0, get_timeline_max_zoom_1.clampTimelineZoom)({
-                    zoom: callback((_a = prevZoomMap[compositionId]) !== null && _a !== void 0 ? _a : get_timeline_max_zoom_1.TIMELINE_MIN_ZOOM),
-                    durationInFrames: (0, imperative_state_1.getCurrentDuration)(),
+                    zoom: callback(previousZoom),
+                    durationInFrames,
+                    timelineViewportWidth,
                 });
                 return { ...prevZoomMap, [compositionId]: newZoom };
             });

package/package.json

@@ -3,7 +3,7 @@
 		"url": "https://github.com/remotion-dev/remotion/tree/main/packages/studio"
 	},
 	"name": "@remotion/studio",
-	"version": "4.0.518",
+	"version": "4.0.520",
 	"description": "APIs for interacting with the Remotion Studio",
 	"main": "dist",
 	"scripts": {
@@ -25,30 +25,33 @@
 	},
 	"dependencies": {
 		"@tanstack/react-virtual": "3.14.9",
-		"@remotion/canvas": "4.0.518",
-		"@remotion/studio-protocol": "4.0.518",
+		"@remotion/canvas": "4.0.520",
+		"@remotion/studio-protocol": "4.0.520",
+		"@remotion/studio-codemods": "4.0.520",
 		"semver": "7.5.3",
-		"remotion": "4.0.518",
-		"@remotion/captions": "4.0.518",
-		"@remotion/media": "4.0.518",
-		"@remotion/player": "4.0.518",
-		"@remotion/media-utils": "4.0.518",
-		"@remotion/renderer": "4.0.518",
-		"@remotion/web-renderer": "4.0.518",
-		"@remotion/studio-shared": "4.0.518",
-		"@remotion/timeline-utils": "4.0.518",
-		"@remotion/zod-types": "4.0.518",
+		"remotion": "4.0.520",
+		"@remotion/captions": "4.0.520",
+		"@remotion/media": "4.0.520",
+		"@remotion/player": "4.0.520",
+		"@remotion/media-utils": "4.0.520",
+		"@remotion/renderer": "4.0.520",
+		"@remotion/web-renderer": "4.0.520",
+		"@remotion/studio-shared": "4.0.520",
+		"@remotion/timeline-utils": "4.0.520",
+		"@remotion/zod-types": "4.0.520",
 		"@jridgewell/trace-mapping": "0.3.31",
-		"mediabunny": "1.55.1",
+		"mediabunny": "1.55.5",
 		"memfs": "3.4.3",
 		"open": "8.4.2",
 		"zod": "4.4.3"
 	},
 	"devDependencies": {
+		"@happy-dom/global-registrator": "14.5.1",
 		"react": "19.2.3",
 		"react-dom": "19.2.3",
+		"@testing-library/react": "16.1.0",
 		"@types/semver": "7.5.3",
-		"@remotion/eslint-config-internal": "4.0.518",
+		"@remotion/eslint-config-internal": "4.0.520",
 		"eslint": "9.19.0",
 		"@typescript/native-preview": "7.0.0-dev.20260217.1"
 	},

package/dist/components/UpdateModal/UpdateModal.d.ts

@@ -1,6 +0,0 @@
-import React from 'react';
-import type { Bug, UpdateInfo } from '../UpdateCheck';
-export declare const UpdateModal: React.FC<{
-    readonly info: UpdateInfo;
-    readonly knownBugs: Bug[];
-}>;

package/dist/components/UpdateModal/UpdateModal.js

@@ -1,104 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.UpdateModal = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const colors_1 = require("../../helpers/colors");
-const copy_text_1 = require("../../helpers/copy-text");
-const clipboard_1 = require("../../icons/clipboard");
-const InlineAction_1 = require("../InlineAction");
-const KnownBugs_1 = require("../KnownBugs");
-const ModalHeader_1 = require("../ModalHeader");
-const DismissableModal_1 = require("../NewComposition/DismissableModal");
-const NotificationCenter_1 = require("../Notifications/NotificationCenter");
-const container = {
-    padding: '0 16px 8px',
-};
-const panelStyle = {
-    borderRadius: 6,
-    overflow: 'hidden',
-};
-const text = {
-    color: colors_1.LIGHT_TEXT,
-    fontFamily: 'sans-serif',
-    fontSize: 14,
-    lineHeight: 1.5,
-};
-const title = {
-    paddingTop: 12,
-    paddingBottom: 8,
-    ...text,
-};
-const commandField = {
-    alignItems: 'center',
-    background: colors_1.SELECTED_BACKGROUND,
-    borderRadius: 6,
-    boxSizing: 'border-box',
-    display: 'flex',
-    marginBottom: 10,
-    marginTop: 10,
-    padding: '8px 8px 8px 10px',
-    width: '100%',
-};
-const code = {
-    color: colors_1.WHITE,
-    flex: 1,
-    fontFamily: 'monospace',
-    fontSize: 14,
-    lineHeight: 1.5,
-    margin: 0,
-    minWidth: 0,
-    overflowX: 'auto',
-    whiteSpace: 'pre',
-};
-const copyIcon = {
-    flexShrink: 0,
-    height: 12,
-    width: 12,
-};
-const link = {
-    ...text,
-    fontWeight: 'bold',
-    color: colors_1.BLUE,
-    textDecoration: 'none',
-};
-const commands = {
-    npm: 'npx remotion upgrade',
-    yarn: 'yarn remotion upgrade',
-    pnpm: 'pnpm exec remotion upgrade',
-    bun: 'bun remotion upgrade',
-    unknown: 'npx remotion upgrade',
-};
-const skillsUpdateCommand = 'npx remotion skills update';
-const remotionUpgradeSkill = '/remotion-upgrade';
-const UpdateModal = ({ info, knownBugs }) => {
-    const hasKnownBugs = (0, react_1.useMemo)(() => {
-        return knownBugs && (knownBugs === null || knownBugs === void 0 ? void 0 : knownBugs.length) > 0;
-    }, [knownBugs]);
-    const updateAction = info.remotionUpgradeSkillAvailable
-        ? remotionUpgradeSkill
-        : info.updateAvailable
-            ? commands[info.packageManager]
-            : skillsUpdateCommand;
-    const updateActionType = info.remotionUpgradeSkillAvailable
-        ? 'skill'
-        : 'command';
-    const onClick = (0, react_1.useCallback)(() => {
-        (0, copy_text_1.copyText)(updateAction).catch((err) => {
-            (0, NotificationCenter_1.showNotification)(`Could not copy: ${err.message}`, 2000);
-        });
-    }, [updateAction]);
-    const renderCopyAction = (0, react_1.useCallback)((color) => {
-        return jsx_runtime_1.jsx(clipboard_1.ClipboardIcon, { color: color, style: copyIcon });
-    }, []);
-    return (jsx_runtime_1.jsxs(DismissableModal_1.DismissableModal, { panelStyle: panelStyle, children: [
-            jsx_runtime_1.jsx(ModalHeader_1.ModalHeader, { title: "Update available" }), jsx_runtime_1.jsxs("div", { style: container, children: [hasKnownBugs && info.updateAvailable ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
-                            jsx_runtime_1.jsxs("div", { style: title, children: ["The currently installed version ", info.currentVersion, " has the following known bugs:"] }), jsx_runtime_1.jsx(KnownBugs_1.KnownBugs, { bugs: knownBugs }), jsx_runtime_1.jsx("div", { style: { height: '20px' } }), jsx_runtime_1.jsxs("div", { style: text, children: ["To upgrade, run the following ", updateActionType, ":"] })
-                        ] })) : info.updateAvailable ? (jsx_runtime_1.jsxs("div", { style: title, children: ["A new update for Remotion is available! Run the following", ' ', updateActionType, ":"] })) : (jsx_runtime_1.jsxs("div", { style: title, children: ["Your Remotion Agent Skills are out of date. Run the following", ' ', updateActionType, ":"] })), jsx_runtime_1.jsxs("div", { style: commandField, children: [
-                            jsx_runtime_1.jsx("pre", { style: code, children: updateAction }), jsx_runtime_1.jsx(InlineAction_1.InlineAction, { variant: null, onClick: onClick, renderAction: renderCopyAction, title: "Copy command" })
-                        ] }), info.updateAvailable ? (jsx_runtime_1.jsxs("div", { style: text, children: ["This will upgrade Remotion from ", info.currentVersion, " to", ' ', info.latestVersion, info.skillsUpdateAvailable
-                                ? ' and update your project Remotion Agent Skills.'
-                                : '.'] })) : null, info.updateAvailable ? (jsx_runtime_1.jsxs("div", { style: text, children: ["Read the", ' ', jsx_runtime_1.jsx("a", { style: link, target: "_blank", href: "https://github.com/remotion-dev/remotion/releases", children: "Release notes" }), ' ', "to know what", "'s", " new in Remotion."] })) : null] })
-        ] }));
-};
-exports.UpdateModal = UpdateModal;

package/dist/helpers/sort-by-nonce-history.d.ts

@@ -1 +0,0 @@
-export { compareNonceHistories, sortItemsByNonceHistory } from '@remotion/canvas';

package/dist/helpers/sort-by-nonce-history.js

@@ -1,6 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.sortItemsByNonceHistory = exports.compareNonceHistories = void 0;
-const canvas_1 = require("@remotion/canvas");
-Object.defineProperty(exports, "compareNonceHistories", { enumerable: true, get: function () { return canvas_1.compareNonceHistories; } });
-Object.defineProperty(exports, "sortItemsByNonceHistory", { enumerable: true, get: function () { return canvas_1.sortItemsByNonceHistory; } });