@remotion/studio 4.0.507 → 4.0.509

package/dist/index.js

@@ -2,6 +2,10 @@
 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;
 const create_composition_1 = require("./api/create-composition");
+const CodingAgentIcon_1 = require("./components/CodingAgentIcon");
+const editor_1 = require("./icons/editor");
+const finder_1 = require("./icons/finder");
+const terminal_1 = require("./icons/terminal");
 const delete_static_file_1 = require("./api/delete-static-file");
 Object.defineProperty(exports, "deleteStaticFile", { enumerable: true, get: function () { return delete_static_file_1.deleteStaticFile; } });
 const focus_default_props_path_1 = require("./api/focus-default-props-path");
@@ -35,6 +39,10 @@ Object.defineProperty(exports, "watchStaticFile", { enumerable: true, get: funct
 const write_static_file_1 = require("./api/write-static-file");
 Object.defineProperty(exports, "writeStaticFile", { enumerable: true, get: function () { return write_static_file_1.writeStaticFile; } });
 exports.StudioInternals = {
+    CodingAgentIcon: CodingAgentIcon_1.CodingAgentIcon,
+    EditorIcon: editor_1.EditorIcon,
+    FinderIcon: finder_1.FinderIcon,
+    TerminalIcon: terminal_1.TerminalIcon,
     createComposition: create_composition_1.createComposition,
     createStill: create_composition_1.createStill,
 };

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, 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_previewSampleRate, _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, 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_previewSampleRate, _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

@@ -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 { PackageManager, RenderDefaults } from '@remotion/studio-shared';
+import type { CanvasCaptureData, PackageManager, 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';
@@ -109,11 +109,19 @@ export type AddEffectModalState = {
     nodePath: SequencePropsSubscriptionKey;
     clientId: string;
 };
+export type CanvasCaptureImport = {
+    readonly data: CanvasCaptureData;
+    readonly durationInSeconds: number;
+    readonly file: File;
+    readonly height: number;
+    readonly width: number;
+};
 export type ModalState = {
     type: 'new-comp';
     folderName: string | null;
     parentName: string | null;
     stack: string | null;
+    canvasCapture: CanvasCaptureImport | null;
 } | {
     type: 'new-folder';
     parentName: string | null;

package/dist/state/transform-3d-mode.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+type Transform3DModeState = {
+    readonly manuallyEnabledSequenceKeys: ReadonlySet<string>;
+    readonly setManuallyEnabled: (sequenceKey: string, enabled: boolean) => void;
+};
+export declare const Transform3DModeStateContext: React.Context<Transform3DModeState>;
+export declare const Transform3DModeStateProvider: React.FC<{
+    readonly children: React.ReactNode;
+}>;
+export {};

package/dist/state/transform-3d-mode.js

@@ -0,0 +1,27 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Transform3DModeStateProvider = exports.Transform3DModeStateContext = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+exports.Transform3DModeStateContext = (0, react_1.createContext)({
+    manuallyEnabledSequenceKeys: new Set(),
+    setManuallyEnabled: () => undefined,
+});
+const Transform3DModeStateProvider = ({ children }) => {
+    const [manuallyEnabledSequenceKeys, setManuallyEnabledSequenceKeys] = (0, react_1.useState)(() => new Set());
+    const setManuallyEnabled = (0, react_1.useCallback)((sequenceKey, enabled) => {
+        setManuallyEnabledSequenceKeys((previous) => {
+            const next = new Set(previous);
+            if (enabled) {
+                next.add(sequenceKey);
+            }
+            else {
+                next.delete(sequenceKey);
+            }
+            return next;
+        });
+    }, []);
+    const value = (0, react_1.useMemo)(() => ({ manuallyEnabledSequenceKeys, setManuallyEnabled }), [manuallyEnabledSequenceKeys, setManuallyEnabled]);
+    return (jsx_runtime_1.jsx(exports.Transform3DModeStateContext.Provider, { value: value, children: children }));
+};
+exports.Transform3DModeStateProvider = Transform3DModeStateProvider;

package/dist/state/z-index.d.ts

@@ -5,7 +5,6 @@ export declare const HigherZIndex: React.FC<{
     readonly children: React.ReactNode;
     readonly disabled?: boolean;
     readonly outsideClickButton?: 'any' | 'primary';
-    readonly stackOnHighest?: boolean;
 }>;
 export declare const useZIndex: () => {
     currentZIndex: number;

package/dist/state/z-index.js

@@ -15,7 +15,7 @@ const margin = {
 };
 const EscapeHook = ({ onEscape }) => {
     const keybindings = (0, use_keybinding_1.useKeybinding)();
-    (0, react_1.useEffect)(() => {
+    (0, react_1.useLayoutEffect)(() => {
         const escape = keybindings.registerKeybinding({
             event: 'keydown',
             key: 'Escape',
@@ -32,83 +32,74 @@ const EscapeHook = ({ onEscape }) => {
     }, [keybindings, onEscape]);
     return null;
 };
-const HigherZIndex = ({ children, onEscape, onOutsideClick, disabled, outsideClickButton = 'any', stackOnHighest = false, }) => {
-    var _a;
+const HigherZIndex = ({ children, onEscape, onOutsideClick, disabled, outsideClickButton = 'any', }) => {
     const context = (0, react_1.useContext)(ZIndexContext);
     const highestContext = (0, react_1.useContext)(highest_z_index_1.HighestZIndexContext);
+    const { registerZIndex, unregisterZIndex } = highestContext;
     const containerRef = (0, react_1.useRef)(null);
-    const stackedIndex = (0, react_1.useRef)(null);
-    if (disabled || !stackOnHighest) {
-        stackedIndex.current = null;
-    }
-    else if (stackedIndex.current === null) {
-        stackedIndex.current =
-            Math.max(context.currentIndex, highestContext.highestIndex) + 1;
-    }
+    const highestIndexRef = (0, react_1.useRef)(highestContext.highestIndex);
+    const onOutsideClickRef = (0, react_1.useRef)(onOutsideClick);
+    const outsideClickButtonRef = (0, react_1.useRef)(outsideClickButton);
     const currentIndex = disabled
         ? context.currentIndex
-        : ((_a = stackedIndex.current) !== null && _a !== void 0 ? _a : context.currentIndex + 1);
-    (0, react_1.useEffect)(() => {
+        : context.currentIndex + 1;
+    (0, react_1.useLayoutEffect)(() => {
+        highestIndexRef.current = highestContext.highestIndex;
+        onOutsideClickRef.current = onOutsideClick;
+        outsideClickButtonRef.current = outsideClickButton;
+    }, [highestContext.highestIndex, onOutsideClick, outsideClickButton]);
+    (0, react_1.useLayoutEffect)(() => {
         if (disabled) {
             return;
         }
-        highestContext.registerZIndex(currentIndex);
-        return () => highestContext.unregisterZIndex(currentIndex);
-    }, [currentIndex, highestContext, disabled]);
-    (0, react_1.useEffect)(() => {
+        registerZIndex(currentIndex);
+        return () => unregisterZIndex(currentIndex);
+    }, [currentIndex, disabled, registerZIndex, unregisterZIndex]);
+    (0, react_1.useLayoutEffect)(() => {
         if (disabled) {
             return;
         }
         let endPointerSession = null;
         const listener = (downEvent) => {
             var _a;
-            if (outsideClickButton === 'primary' && downEvent.button !== 0) {
+            if (outsideClickButtonRef.current === 'primary' &&
+                downEvent.button !== 0) {
                 return;
             }
             const outsideClick = !((_a = containerRef.current) === null || _a === void 0 ? void 0 : _a.contains(downEvent.target));
             if (!outsideClick) {
                 return;
             }
+            // The topmost layer owns the full pointer gesture. Layers may mount or
+            // unmount before pointerup, but that must not cancel or transfer dismissal.
+            if (highestIndexRef.current !== currentIndex) {
+                return;
+            }
             endPointerSession === null || endPointerSession === void 0 ? void 0 : endPointerSession();
-            endPointerSession = (0, pointer_session_1.startPointerSession)({
+            endPointerSession = (0, pointer_session_1.observePointerRelease)({
                 event: downEvent,
-                target: downEvent.target,
                 onEnd: (reason, upEvent) => {
                     var _a;
                     endPointerSession = null;
                     if ((reason === 'pointerup' || reason === 'buttons-released') &&
                         upEvent &&
-                        highestContext.highestIndex === currentIndex &&
                         !(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();
-                            onOutsideClick(target);
+                            onOutsideClickRef.current(target);
                         }
                     }
                 },
             });
         };
-        // If a menu is opened, then this component will also still receive the pointerdown event.
-        // However we may not interpret it as a outside click, so we need to wait for the next tick
-        requestAnimationFrame(() => {
-            // The third argument `true` registers a capture-phase listener. Some Studio
-            // elements stop pointerdown propagation while still being outside the menu,
-            // so bubbling listeners would miss those clicks and keep the menu open.
-            window.addEventListener('pointerdown', listener, true);
-        });
+        window.addEventListener('pointerdown', listener, true);
         return () => {
             endPointerSession === null || endPointerSession === void 0 ? void 0 : endPointerSession();
             endPointerSession = null;
             return window.removeEventListener('pointerdown', listener, true);
         };
-    }, [
-        currentIndex,
-        disabled,
-        highestContext.highestIndex,
-        onOutsideClick,
-        outsideClickButton,
-    ]);
+    }, [currentIndex, disabled]);
     const value = (0, react_1.useMemo)(() => {
         return {
             currentIndex,

package/package.json

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