@remotion/studio 4.0.520 → 4.0.522

package/dist/esm/renderEntry.mjs

@@ -215,7 +215,7 @@ var renderContent = (Root) => {
     renderToDOM(/* @__PURE__ */ jsx("div", {
       children: /* @__PURE__ */ jsx(DelayedSpinner, {})
     }));
-    import("./chunk-np6q13k5.js").then(({ StudioInternals }) => {
+    import("./chunk-3netyjd9.js").then(({ StudioInternals }) => {
       window.remotion_isStudio = true;
       window.remotion_isReadOnlyStudio = true;
       window.remotion_inputProps = "{}";

package/dist/helpers/copy-text.js

@@ -8,8 +8,7 @@ const copyText = (cmd) => {
             .query({ name: permissionName })
             .then((result) => {
             if (result.state === 'granted' || result.state === 'prompt') {
-                navigator.clipboard.writeText(cmd);
-                resolve();
+                navigator.clipboard.writeText(cmd).then(resolve).catch(reject);
             }
             else {
                 reject(new Error('Permission to copy not granted'));

package/dist/helpers/get-preview-file-type.js

@@ -6,9 +6,28 @@ const getPreviewFileType = (fileName) => {
     if (!fileName) {
         return 'other';
     }
-    const audioExtensions = ['mp3', 'wav', 'ogg', 'aac'];
-    const videoExtensions = ['mp4', 'avi', 'mkv', 'mov', 'webm'];
-    const imageExtensions = ['jpg', 'jpeg', 'png', 'apng', 'gif', 'bmp', 'webp'];
+    const audioExtensions = ['mp3', 'wav', 'ogg', 'aac', 'm4a', 'flac'];
+    const videoExtensions = [
+        'mp4',
+        'avi',
+        'mkv',
+        'mov',
+        'webm',
+        'm4v',
+        'ts',
+        'm2ts',
+        'm3u8',
+    ];
+    const imageExtensions = [
+        'jpg',
+        'jpeg',
+        'png',
+        'apng',
+        'gif',
+        'bmp',
+        'webp',
+        'svg',
+    ];
     const fontExtensions = ['woff', 'woff2', 'ttf', 'otf', 'eot'];
     const fileExtension = (_a = fileName.split('.').pop()) === null || _a === void 0 ? void 0 : _a.toLowerCase();
     if (fileExtension === undefined) {

package/dist/helpers/inserted-element-selection.d.ts

@@ -1,10 +1,11 @@
 import type { SequenceNodePath } from 'remotion';
 export type PendingInsertedElementSelection = {
     compositionId: string;
+    notification: string | null;
     nodePath: {
         absolutePath: string;
         nodePath: SequenceNodePath;
-    };
+    } | null;
 };
 export declare const requestInsertedElementSelection: (selection: PendingInsertedElementSelection) => void;
 export declare const clearInsertedElementSelection: (selection: PendingInsertedElementSelection) => void;

package/dist/helpers/use-copy-feedback.d.ts

@@ -0,0 +1,4 @@
+export declare const useCopyFeedback: () => {
+    copied: boolean;
+    markCopied: () => void;
+};

package/dist/helpers/use-copy-feedback.js

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useCopyFeedback = void 0;
+const react_1 = require("react");
+const useCopyFeedback = () => {
+    const [copyCount, setCopyCount] = (0, react_1.useState)(0);
+    (0, react_1.useEffect)(() => {
+        if (copyCount === 0) {
+            return;
+        }
+        const timeout = setTimeout(() => setCopyCount(0), 2000);
+        return () => clearTimeout(timeout);
+    }, [copyCount]);
+    const markCopied = (0, react_1.useCallback)(() => {
+        setCopyCount((currentCopyCount) => currentCopyCount + 1);
+    }, []);
+    return { copied: copyCount > 0, markCopied };
+};
+exports.useCopyFeedback = useCopyFeedback;

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

@@ -212,7 +212,7 @@ const getRenderMenuItems = ({ closeMenu, previewServerState, readOnlyStudio, })
         {
             id: 'render-on-web',
             value: 'render-on-web',
-            label: 'Render on web...',
+            label: 'Render in browser...',
             onClick: () => {
                 closeMenu();
                 const renderButton = document.getElementById('render-modal-button-client');
@@ -222,7 +222,7 @@ const getRenderMenuItems = ({ closeMenu, previewServerState, readOnlyStudio, })
             keyHint: null,
             leftItem: null,
             subMenu: null,
-            quickSwitcherLabel: 'Render on web...',
+            quickSwitcherLabel: 'Render in browser...',
         },
         {
             type: 'divider',

package/dist/icons/copy.d.ts

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

package/dist/icons/copy.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CopyIcon = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const clipboard_1 = require("./clipboard");
+const CopyIcon = ({ copied, color, style, ...props }) => {
+    if (copied) {
+        return (jsx_runtime_1.jsx("svg", { viewBox: "0 0 512 512", style: style, ...props, children: jsx_runtime_1.jsx("path", { fill: color, d: "M435.848 83.466L172.804 346.51l-96.652-96.652c-4.686-4.686-12.284-4.686-16.971 0l-28.284 28.284c-4.686 4.686-4.686 12.284 0 16.971l133.421 133.421c4.686 4.686 12.284 4.686 16.971 0l299.813-299.813c4.686-4.686 4.686-12.284 0-16.971l-28.284-28.284c-4.686-4.686-12.284-4.686-16.97 0z" }) }));
+    }
+    return jsx_runtime_1.jsx(clipboard_1.ClipboardIcon, { color: color, style: style, ...props });
+};
+exports.CopyIcon = CopyIcon;

package/dist/index.d.ts

@@ -7,6 +7,7 @@ export { pause } from './api/pause';
 export { play } from './api/play';
 export { reevaluateComposition } from './api/reevaluate-composition';
 export { restartStudio } from './api/restart-studio';
+export { shutDownStudio } from './api/shut-down-studio';
 export { saveDefaultProps } from './api/save-default-props';
 export { seek } from './api/seek';
 export { toggle } from './api/toggle';

package/dist/index.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.StudioInternals = exports.writeStaticFile = exports.watchStaticFile = exports.watchPublicFolder = exports.visualControl = exports.updateDefaultProps = exports.toggle = exports.seek = exports.saveDefaultProps = exports.restartStudio = exports.reevaluateComposition = exports.play = exports.pause = exports.goToComposition = exports.getStaticFiles = exports.focusDefaultPropsPath = exports.deleteStaticFile = void 0;
+exports.StudioInternals = exports.writeStaticFile = exports.watchStaticFile = exports.watchPublicFolder = exports.visualControl = exports.updateDefaultProps = exports.toggle = exports.seek = exports.saveDefaultProps = exports.shutDownStudio = exports.restartStudio = exports.reevaluateComposition = exports.play = exports.pause = exports.goToComposition = exports.getStaticFiles = exports.focusDefaultPropsPath = exports.deleteStaticFile = void 0;
 const create_composition_1 = require("./api/create-composition");
 const CodingAgentIcon_1 = require("./components/CodingAgentIcon");
 const editor_1 = require("./icons/editor");
@@ -22,6 +22,8 @@ const reevaluate_composition_1 = require("./api/reevaluate-composition");
 Object.defineProperty(exports, "reevaluateComposition", { enumerable: true, get: function () { return reevaluate_composition_1.reevaluateComposition; } });
 const restart_studio_1 = require("./api/restart-studio");
 Object.defineProperty(exports, "restartStudio", { enumerable: true, get: function () { return restart_studio_1.restartStudio; } });
+const shut_down_studio_1 = require("./api/shut-down-studio");
+Object.defineProperty(exports, "shutDownStudio", { enumerable: true, get: function () { return shut_down_studio_1.shutDownStudio; } });
 const save_default_props_1 = require("./api/save-default-props");
 Object.defineProperty(exports, "saveDefaultProps", { enumerable: true, get: function () { return save_default_props_1.saveDefaultProps; } });
 const seek_1 = require("./api/seek");

package/dist/state/canvas-ref.d.ts

@@ -1,2 +1,3 @@
 export declare const canvasRef: import("react").RefObject<HTMLDivElement | null>;
 export declare const drawRef: import("react").RefObject<HTMLDivElement | null>;
+export declare const RefreshCanvasSizeContext: import("react").Context<(() => void) | null>;

package/dist/state/canvas-ref.js

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.drawRef = exports.canvasRef = void 0;
+exports.RefreshCanvasSizeContext = exports.drawRef = exports.canvasRef = void 0;
 const react_1 = require("react");
 exports.canvasRef = (0, react_1.createRef)();
 exports.drawRef = (0, react_1.createRef)();
+exports.RefreshCanvasSizeContext = (0, react_1.createContext)(null);

package/dist/state/modals.d.ts

@@ -118,13 +118,11 @@ export type CanvasCaptureImport = {
 };
 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;

package/dist/state/sidebar.d.ts

@@ -2,6 +2,8 @@ import React from 'react';
 export type SidebarCollapsedState = 'collapsed' | 'expanded' | 'responsive';
 type RightSidebarCollapsedState = Exclude<SidebarCollapsedState, 'responsive'>;
 type Context = {
+    sidebarCollapsedDuringDrag: Sidebars | null;
+    setSidebarCollapsedDuringDrag: (side: Sidebars | null) => void;
     sidebarCollapsedStateLeft: SidebarCollapsedState;
     setSidebarCollapsedState: (options: {
         left: null | React.SetStateAction<SidebarCollapsedState>;
@@ -9,6 +11,7 @@ type Context = {
     }) => void;
     sidebarCollapsedStateRight: RightSidebarCollapsedState;
 };
+type Sidebars = 'left' | 'right';
 export declare const SidebarContext: React.Context<Context>;
 export declare const SidebarContextProvider: React.FC<{
     readonly children: React.ReactNode;

package/dist/state/sidebar.js

@@ -37,6 +37,8 @@ const saveCollapsedState = (type, sidebar) => {
     window.localStorage.setItem(storageKey(sidebar), type);
 };
 exports.SidebarContext = (0, react_1.createContext)({
+    sidebarCollapsedDuringDrag: null,
+    setSidebarCollapsedDuringDrag: () => undefined,
     sidebarCollapsedStateLeft: 'collapsed',
     setSidebarCollapsedState: () => {
         throw new Error('sidebar collapsed state');
@@ -49,8 +51,11 @@ const SidebarContextProvider = ({ children }) => {
         left: getSavedCollapsedStateLeft(isMobileLayout),
         right: getSavedCollapsedStateRight(isMobileLayout),
     }));
+    const [sidebarCollapsedDuringDrag, setSidebarCollapsedDuringDrag] = (0, react_1.useState)(null);
     const value = (0, react_1.useMemo)(() => {
         return {
+            sidebarCollapsedDuringDrag,
+            setSidebarCollapsedDuringDrag,
             sidebarCollapsedStateLeft: sidebarCollapsedState.left,
             sidebarCollapsedStateRight: sidebarCollapsedState.right,
             setSidebarCollapsedState: (options) => {
@@ -71,7 +76,7 @@ const SidebarContextProvider = ({ children }) => {
                 });
             },
         };
-    }, [sidebarCollapsedState]);
+    }, [sidebarCollapsedState, sidebarCollapsedDuringDrag]);
     return (jsx_runtime_1.jsx(exports.SidebarContext.Provider, { value: value, children: children }));
 };
 exports.SidebarContextProvider = SidebarContextProvider;

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

@@ -5,7 +5,7 @@ export type TimelineSetZoomOptions = {
 };
 export declare const TimelineZoomCtx: React.Context<{
     zoom: Record<string, number>;
-    setZoom: (compositionId: string, prev: (prevZoom: number) => number, options?: TimelineSetZoomOptions | undefined) => void;
+    setZoom: (videoId: string, prev: (prevZoom: number) => number, options?: TimelineSetZoomOptions | undefined) => void;
 }>;
 export declare const TimelineZoomContext: React.FC<{
     readonly children: React.ReactNode;

package/dist/state/timeline-zoom.js

@@ -17,7 +17,7 @@ exports.TimelineZoomCtx = (0, react_1.createContext)({
 });
 const TimelineZoomContext = ({ children }) => {
     const [zoom, setZoomState] = (0, react_1.useState)(() => (0, ZoomPersistor_1.getZoomFromLocalStorage)());
-    const setZoom = (0, react_1.useCallback)((compositionId, callback, options) => {
+    const setZoom = (0, react_1.useCallback)((videoId, callback, options) => {
         var _a, _b;
         // Capture the old geometry before committing the new timeline width.
         const preserveTimelineCursor = (0, timeline_scroll_logic_1.prepareToPreserveTimelineCursor)({
@@ -35,14 +35,14 @@ const TimelineZoomContext = ({ children }) => {
                 const previousZoom = (0, get_timeline_max_zoom_1.getTimelineZoom)({
                     durationInFrames,
                     timelineViewportWidth,
-                    zoom: (_c = prevZoomMap[compositionId]) !== null && _c !== void 0 ? _c : null,
+                    zoom: (_c = prevZoomMap[videoId]) !== null && _c !== void 0 ? _c : null,
                 });
                 const newZoom = (0, get_timeline_max_zoom_1.clampTimelineZoom)({
                     zoom: callback(previousZoom),
                     durationInFrames,
                     timelineViewportWidth,
                 });
-                return { ...prevZoomMap, [compositionId]: newZoom };
+                return { ...prevZoomMap, [videoId]: newZoom };
             });
         });
         // The new scroll range exists now, so the browser will not clamp the offset

package/dist/visual-controls/VisualControls.js

@@ -107,6 +107,10 @@ const VisualControlsProvider = ({ children }) => {
             globalVisualControl: visualControl,
         };
     }, [visualControl]);
+    (0, react_1.useEffect)(() => {
+        // Controls may have rendered before the imperative API or Zod was ready.
+        visual_control_store_1.visualControlStore.emitChange();
+    }, [visualControl]);
     (0, react_1.useEffect)(() => {
         const callback = () => {
             if (imperativeHandles.current) {

package/package.json

@@ -3,7 +3,7 @@
 		"url": "https://github.com/remotion-dev/remotion/tree/main/packages/studio"
 	},
 	"name": "@remotion/studio",
-	"version": "4.0.520",
+	"version": "4.0.522",
 	"description": "APIs for interacting with the Remotion Studio",
 	"main": "dist",
 	"scripts": {
@@ -25,25 +25,25 @@
 	},
 	"dependencies": {
 		"@tanstack/react-virtual": "3.14.9",
-		"@remotion/canvas": "4.0.520",
-		"@remotion/studio-protocol": "4.0.520",
-		"@remotion/studio-codemods": "4.0.520",
+		"@remotion/canvas": "4.0.522",
+		"@remotion/studio-protocol": "4.0.522",
+		"@remotion/studio-codemods": "4.0.522",
 		"semver": "7.5.3",
-		"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",
+		"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",
 		"mediabunny": "1.55.5",
 		"memfs": "3.4.3",
 		"open": "8.4.2",
-		"zod": "4.4.3"
+		"zod": "4.5.4"
 	},
 	"devDependencies": {
 		"@happy-dom/global-registrator": "14.5.1",
@@ -51,7 +51,7 @@
 		"react-dom": "19.2.3",
 		"@testing-library/react": "16.1.0",
 		"@types/semver": "7.5.3",
-		"@remotion/eslint-config-internal": "4.0.520",
+		"@remotion/eslint-config-internal": "4.0.522",
 		"eslint": "9.19.0",
 		"@typescript/native-preview": "7.0.0-dev.20260217.1"
 	},

package/dist/helpers/use-max-media-duration.d.ts

@@ -1,2 +0,0 @@
-import { type TSequence } from 'remotion';
-export declare const useMaxMediaDuration: (s: TSequence, fps: number) => number | null;

package/dist/helpers/use-max-media-duration.js

@@ -1,61 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useMaxMediaDuration = void 0;
-const react_1 = require("react");
-const remotion_1 = require("remotion");
-const is_video_with_last_frame_hold_1 = require("./is-video-with-last-frame-hold");
-const use_media_metadata_1 = require("./use-media-metadata");
-const cache = new Map();
-const getCacheKey = (src, fps) => JSON.stringify([src, fps]);
-const getSrc = (s) => {
-    if (s.type === 'video') {
-        return s.src;
-    }
-    if (s.type === 'audio') {
-        return s.src;
-    }
-    return null;
-};
-const useMaxMediaDuration = (s, fps) => {
-    var _a;
-    const holdsLastFrame = (0, is_video_with_last_frame_hold_1.isVideoWithLastFrameHold)(s);
-    const src = holdsLastFrame ? null : getSrc(s);
-    const resolvedSrc = remotion_1.Internals.usePreload(src !== null && src !== void 0 ? src : '');
-    const cacheKey = src ? getCacheKey(resolvedSrc, fps) : null;
-    const [maxMediaDuration, setMaxMediaDuration] = (0, react_1.useState)(cacheKey ? ((_a = cache.get(cacheKey)) !== null && _a !== void 0 ? _a : null) : Infinity);
-    (0, react_1.useEffect)(() => {
-        var _a;
-        if (!src || !cacheKey) {
-            return;
-        }
-        const cached = (_a = cache.get(cacheKey)) !== null && _a !== void 0 ? _a : null;
-        setMaxMediaDuration(cached);
-        if (cached !== null) {
-            return;
-        }
-        let cancelled = false;
-        (0, use_media_metadata_1.getMediaMetadata)(resolvedSrc)
-            .then((metadata) => {
-            if (cancelled || !metadata) {
-                return;
-            }
-            const duration = Math.floor(metadata.duration * fps);
-            cache.set(cacheKey, duration);
-            setMaxMediaDuration(duration);
-        })
-            .catch(() => {
-            if (cancelled) {
-                return;
-            }
-            setMaxMediaDuration(null);
-        });
-        return () => {
-            cancelled = true;
-        };
-    }, [cacheKey, fps, resolvedSrc, src]);
-    if (holdsLastFrame) {
-        return Infinity;
-    }
-    return maxMediaDuration;
-};
-exports.useMaxMediaDuration = useMaxMediaDuration;