@remotion/studio 4.0.501 → 4.0.503

package/dist/esm/renderEntry.mjs

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

package/dist/helpers/inject-css.js

@@ -5,10 +5,8 @@ const remotion_1 = require("remotion");
 const scroll_to_default_props_path_1 = require("../components/RenderModal/SchemaEditor/scroll-to-default-props-path");
 const colors_1 = require("./colors");
 const makeDefaultGlobalCSS = () => {
-    const unhoveredDragAreaFactor = 2;
-    const fromMiddle = 50 / unhoveredDragAreaFactor;
-    const hoveredDragAreaFactor = 6;
-    const fromMiddleHovered = 50 / hoveredDragAreaFactor;
+    const dragAreaFactor = 2;
+    const fromMiddle = 50 / dragAreaFactor;
     return `
 	  html {
 	    --remotion-cli-internals-blue: ${colors_1.BLUE};
@@ -28,51 +26,27 @@ const makeDefaultGlobalCSS = () => {
   }
 
   .remotion-splitter-horizontal {
-	    transform: scaleY(${unhoveredDragAreaFactor});
-	    background: linear-gradient(
-	      to bottom,
-	      ${colors_1.TRANSPARENT} ${50 - fromMiddle}%,
-	      ${colors_1.BLACK} ${50 - fromMiddle}%,
-	      ${colors_1.BLACK} ${50 + fromMiddle}%,
-	      ${colors_1.TRANSPARENT} ${50 + fromMiddle}%
-	    );
-	  }
-
-  .remotion-splitter-horizontal.remotion-splitter-active, .remotion-splitter-horizontal.remotion-splitter-hover {
-	    background: linear-gradient(
-	      to bottom,
-	      ${colors_1.TRANSPARENT} ${50 - fromMiddleHovered}%,
-	      var(--remotion-cli-internals-blue) ${50 - fromMiddleHovered}%,
-	      var(--remotion-cli-internals-blue) ${50 + fromMiddleHovered}%,
-	      ${colors_1.TRANSPARENT} ${50 + fromMiddleHovered}%
-	    );
     cursor: row-resize;
-    transform: scaleY(${hoveredDragAreaFactor});
-    z-index: 1000;
+    transform: scaleY(${dragAreaFactor});
+    background: linear-gradient(
+      to bottom,
+      ${colors_1.TRANSPARENT} ${50 - fromMiddle}%,
+      ${colors_1.BLACK} ${50 - fromMiddle}%,
+      ${colors_1.BLACK} ${50 + fromMiddle}%,
+      ${colors_1.TRANSPARENT} ${50 + fromMiddle}%
+    );
   }
 
   .remotion-splitter-vertical {
-	    transform: scaleX(${unhoveredDragAreaFactor});
-	    background: linear-gradient(
-	      to right,
-	      ${colors_1.TRANSPARENT} ${50 - fromMiddle}%,
-	      ${colors_1.BLACK} ${50 - fromMiddle}%,
-	      ${colors_1.BLACK} ${50 + fromMiddle}%,
-	      ${colors_1.TRANSPARENT} ${50 + fromMiddle}%
-	    );
-	  }
-
-  .remotion-splitter-vertical.remotion-splitter-active, .remotion-splitter-vertical.remotion-splitter-hover {
-	    background: linear-gradient(
-	      to right,
-	      ${colors_1.TRANSPARENT} ${50 - fromMiddleHovered}%,
-	      var(--remotion-cli-internals-blue) ${50 - fromMiddleHovered}%,
-	      var(--remotion-cli-internals-blue) ${50 + fromMiddleHovered}%,
-	      ${colors_1.TRANSPARENT} ${50 + fromMiddleHovered}%
-	    );
-    transform: scaleX(${hoveredDragAreaFactor});
     cursor: col-resize;
-    z-index: 1000;
+    transform: scaleX(${dragAreaFactor});
+    background: linear-gradient(
+      to right,
+      ${colors_1.TRANSPARENT} ${50 - fromMiddle}%,
+      ${colors_1.BLACK} ${50 - fromMiddle}%,
+      ${colors_1.BLACK} ${50 + fromMiddle}%,
+      ${colors_1.TRANSPARENT} ${50 + fromMiddle}%
+    );
   }
 
   input::-webkit-outer-spin-button,

package/dist/helpers/open-in-editor.d.ts

@@ -1,7 +1,7 @@
-import type { CompositionComponentInfoResponse, SymbolicatedStackFrame } from '@remotion/studio-shared';
+import type { CompositionComponentInfoResponse, EditorPickerId, SymbolicatedStackFrame } from '@remotion/studio-shared';
 import type { CodePosition, OriginalPosition } from '../error-overlay/react-overlay/utils/get-source-map';
-export declare const openInEditor: (stack: SymbolicatedStackFrame) => Promise<import("@remotion/studio-shared").OpenInEditorResponse>;
-export declare const openOriginalPositionInEditor: (originalPosition: OriginalPosition) => Promise<void>;
+export declare const openInEditor: (stack: SymbolicatedStackFrame, editorId: EditorPickerId | null) => Promise<import("@remotion/studio-shared").OpenInEditorResponse>;
+export declare const openOriginalPositionInEditor: (originalPosition: OriginalPosition, editorId: EditorPickerId | null) => Promise<void>;
 export declare const openOriginalPositionInEditorAtProperty: ({ originalPosition, property, }: {
     originalPosition: CodePosition;
     property: string;

package/dist/helpers/open-in-editor.js

@@ -4,9 +4,10 @@ exports.openCompositionComponentInEditor = exports.preloadCompositionComponentIn
 const react_1 = require("react");
 const call_api_1 = require("../components/call-api");
 const browser_studio_operations_1 = require("./browser-studio-operations");
-const openInEditor = (stack) => {
+const openInEditor = (stack, editorId) => {
     const { originalFileName, originalLineNumber, originalColumnNumber, originalFunctionName, originalScriptCode, } = stack;
     return (0, call_api_1.callApi)('/api/open-in-editor', {
+        editorId,
         stack: {
             originalFileName,
             originalLineNumber,
@@ -17,14 +18,17 @@ const openInEditor = (stack) => {
     });
 };
 exports.openInEditor = openInEditor;
-const openOriginalPositionInEditor = async (originalPosition) => {
-    await (0, exports.openInEditor)({
+const openOriginalPositionInEditor = async (originalPosition, editorId) => {
+    const response = await (0, exports.openInEditor)({
         originalColumnNumber: originalPosition.column,
         originalFileName: originalPosition.source,
         originalFunctionName: null,
         originalLineNumber: originalPosition.line,
         originalScriptCode: null,
-    });
+    }, editorId);
+    if (!response.success) {
+        throw new Error('Could not open the file in the editor.');
+    }
 };
 exports.openOriginalPositionInEditor = openOriginalPositionInEditor;
 const openOriginalPositionInEditorAtProperty = async ({ originalPosition, property, }) => {
@@ -42,7 +46,7 @@ const openOriginalPositionInEditorAtProperty = async ({ originalPosition, proper
         source: originalPosition.source,
         line: position.lineNumber,
         column: position.columnNumber,
-    });
+    }, null);
 };
 exports.openOriginalPositionInEditorAtProperty = openOriginalPositionInEditorAtProperty;
 const componentResolutionCache = new Map();
@@ -142,6 +146,6 @@ const openCompositionComponentInEditor = async ({ compositionFile, compositionId
         compositionFile,
         compositionId,
     });
-    await (0, exports.openOriginalPositionInEditor)(info.location);
+    await (0, exports.openOriginalPositionInEditor)(info.location, null);
 };
 exports.openCompositionComponentInEditor = openCompositionComponentInEditor;

package/dist/helpers/pointer-session.d.ts

@@ -0,0 +1,9 @@
+export type PointerSessionEndReason = 'pointerup' | 'pointercancel' | 'lostpointercapture' | 'blur' | 'visibilitychange' | 'buttons-released' | 'manual';
+type PointerSessionEvent = Pick<PointerEvent, 'button' | 'pointerId'>;
+export declare const startPointerSession: ({ event, target, onMove, onEnd, }: {
+    event: PointerSessionEvent;
+    target: Element;
+    onMove?: ((event: PointerEvent) => void) | undefined;
+    onEnd: (reason: PointerSessionEndReason, event: PointerEvent | null) => void;
+}) => () => void;
+export {};

package/dist/helpers/pointer-session.js

@@ -0,0 +1,94 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.startPointerSession = void 0;
+const getButtonMask = (button) => {
+    if (button === 0) {
+        return 1;
+    }
+    if (button === 1) {
+        return 4;
+    }
+    if (button === 2) {
+        return 2;
+    }
+    return 1 << button;
+};
+const startPointerSession = ({ event, target, onMove, onEnd, }) => {
+    var _a;
+    const { pointerId } = event;
+    const buttonMask = getButtonMask(event.button);
+    let ended = false;
+    const cleanup = () => {
+        var _a;
+        window.removeEventListener('pointermove', handleMove);
+        window.removeEventListener('pointerup', handleUp);
+        window.removeEventListener('pointercancel', handleCancel);
+        window.removeEventListener('blur', handleBlur);
+        document.removeEventListener('visibilitychange', handleVisibilityChange);
+        target.removeEventListener('lostpointercapture', handleLostPointerCapture);
+        if ((_a = target.hasPointerCapture) === null || _a === void 0 ? void 0 : _a.call(target, pointerId)) {
+            try {
+                target.releasePointerCapture(pointerId);
+            }
+            catch (_b) {
+                // The browser may already have released capture.
+            }
+        }
+    };
+    const end = (reason, pointerEvent) => {
+        if (ended) {
+            return;
+        }
+        ended = true;
+        cleanup();
+        onEnd(reason, pointerEvent);
+    };
+    function handleMove(moveEvent) {
+        if (moveEvent.pointerId !== pointerId) {
+            return;
+        }
+        if ((moveEvent.buttons & buttonMask) === 0) {
+            end('buttons-released', moveEvent);
+            return;
+        }
+        onMove === null || onMove === void 0 ? void 0 : onMove(moveEvent);
+    }
+    function handleUp(upEvent) {
+        if (upEvent.pointerId === pointerId) {
+            end('pointerup', upEvent);
+        }
+    }
+    function handleCancel(cancelEvent) {
+        if (cancelEvent.pointerId === pointerId) {
+            end('pointercancel', cancelEvent);
+        }
+    }
+    function handleLostPointerCapture(lostEvent) {
+        const pointerEvent = lostEvent;
+        if (pointerEvent.pointerId === pointerId) {
+            end('lostpointercapture', pointerEvent);
+        }
+    }
+    function handleBlur() {
+        end('blur', null);
+    }
+    function handleVisibilityChange() {
+        if (document.visibilityState === 'hidden') {
+            end('visibilitychange', null);
+        }
+    }
+    try {
+        (_a = target.setPointerCapture) === null || _a === void 0 ? void 0 : _a.call(target, pointerId);
+    }
+    catch (_b) {
+        // Capture is best-effort for detached or browser-owned targets.
+    }
+    window.addEventListener('pointermove', handleMove);
+    window.addEventListener('pointerup', handleUp);
+    window.addEventListener('pointercancel', handleCancel);
+    window.addEventListener('blur', handleBlur);
+    document.addEventListener('visibilitychange', handleVisibilityChange);
+    target.addEventListener('lostpointercapture', handleLostPointerCapture);
+    return () => end('manual', null);
+};
+exports.startPointerSession = startPointerSession;

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

@@ -177,7 +177,7 @@ const getFileMenu = ({ readOnlyStudio, closeMenu, previewServerState, setSelecte
                         originalColumnNumber: 1,
                         originalFunctionName: null,
                         originalScriptCode: null,
-                    })
+                    }, null)
                         .then(({ success }) => {
                         if (!success) {
                             (0, NotificationCenter_1.showNotification)(`Could not open ${window.remotion_editorName}`, 2000);
@@ -240,6 +240,9 @@ const useMenuStructure = (closeMenu, readOnlyStudio) => {
     const { size, setSize } = (0, react_1.useContext)(remotion_1.Internals.PreviewSizeContext);
     const { canvasContent, compositions } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
     const { type } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx).previewServerState;
+    const canConfigureDefaultEditor = !readOnlyStudio &&
+        type === 'connected' &&
+        (0, browser_studio_operations_1.getBrowserStudioOperations)() === null;
     const { setSidebarCollapsedState, sidebarCollapsedStateLeft, sidebarCollapsedStateRight, } = (0, react_1.useContext)(sidebar_1.SidebarContext);
     const sizes = (0, react_1.useMemo)(() => (0, SizeSelector_1.getUniqueSizes)(size), [size]);
     const isFullscreenSupported = (0, check_fullscreen_support_1.checkFullscreenSupport)();
@@ -300,6 +303,24 @@ const useMenuStructure = (closeMenu, readOnlyStudio) => {
                         subMenu: null,
                         quickSwitcherLabel: 'Help: Changelog',
                     },
+                    canConfigureDefaultEditor
+                        ? {
+                            id: 'default-editor',
+                            value: 'default-editor',
+                            label: 'Configure default editor...',
+                            onClick: () => {
+                                closeMenu();
+                                setSelectedModal({
+                                    type: 'configure-default-editor',
+                                });
+                            },
+                            type: 'item',
+                            keyHint: null,
+                            leftItem: null,
+                            subMenu: null,
+                            quickSwitcherLabel: 'Configure default editor...',
+                        }
+                        : null,
                     {
                         id: 'license',
                         value: 'license',
@@ -352,7 +373,7 @@ const useMenuStructure = (closeMenu, readOnlyStudio) => {
                         subMenu: null,
                         quickSwitcherLabel: 'Restart Studio Server',
                     },
-                ],
+                ].filter(no_react_1.NoReactInternals.truthy),
                 quickSwitcherLabel: null,
             },
             getFileMenu({
@@ -957,6 +978,7 @@ const useMenuStructure = (closeMenu, readOnlyStudio) => {
         }
         return struct;
     }, [
+        canConfigureDefaultEditor,
         readOnlyStudio,
         closeMenu,
         type,

package/dist/icons/custom-editor.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+export declare const CustomEditorIcon: React.FC<{
+    readonly size: number | null;
+}>;

package/dist/icons/custom-editor.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CustomEditorIcon = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const colors_1 = require("../helpers/colors");
+const CustomEditorIcon = ({ size: sizeProp, }) => (jsx_runtime_1.jsx("svg", { focusable: "false", role: "img", viewBox: "0 0 24 24", style: {
+        width: sizeProp !== null && sizeProp !== void 0 ? sizeProp : 14,
+        height: sizeProp !== null && sizeProp !== void 0 ? sizeProp : 14,
+        flexShrink: 0,
+    }, children: jsx_runtime_1.jsx("path", { fill: "none", stroke: colors_1.CURRENT_COLOR, strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "1.8", d: "m8 8-4 4 4 4m8-8 4 4-4 4m-2-10-4 12" }) }));
+exports.CustomEditorIcon = CustomEditorIcon;

package/dist/icons/editor.d.ts

@@ -0,0 +1,6 @@
+import type { EditorPickerId } from '@remotion/studio-shared';
+import React from 'react';
+export declare const EditorIcon: React.FC<{
+    readonly editorId: EditorPickerId | null;
+    readonly size: number | null;
+}>;

package/dist/icons/editor.js

@@ -0,0 +1,52 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.EditorIcon = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const colors_1 = require("../helpers/colors");
+const custom_editor_1 = require("./custom-editor");
+// Brand shapes adapted from:
+// - OpenCode app icons (MIT): https://github.com/anomalyco/opencode/tree/dev/packages/ui/src/assets/icons/app
+// - Simple Icons (CC0 1.0): https://github.com/simple-icons/simple-icons/tree/develop/icons
+const iconStyle = (size) => ({
+    flexShrink: 0,
+    height: size,
+    width: size,
+});
+const VsCodeIcon = ({ size }) => (jsx_runtime_1.jsx("svg", { viewBox: "0 0 40 40", style: iconStyle(size), "aria-hidden": true, children: jsx_runtime_1.jsx("path", { fill: "#23A9F2", fillRule: "evenodd", clipRule: "evenodd", d: "M26.02 34.13c.23.09.48.13.72.12.25-.01.49-.07.71-.18l5.93-2.85c.31-.15.56-.38.74-.66.18-.29.28-.62.28-.96V10.25c0-.34-.1-.67-.28-.96-.18-.28-.43-.51-.74-.66l-5.93-2.85c-.34-.16-.71-.22-1.08-.15-.36.06-.7.23-.96.5L14.05 16.48 9.11 12.73a1.2 1.2 0 0 0-1.53.07L5.99 14.24a1.2 1.2 0 0 0 0 1.77l4.29 3.92-4.29 3.91a1.2 1.2 0 0 0 0 1.77l1.59 1.44a1.2 1.2 0 0 0 1.53.07l4.94-3.75 11.36 10.36c.17.17.38.31.61.4Zm1.18-20.74-8.61 6.54 8.61 6.53V13.39Z" }) }));
+const CursorIcon = ({ size }) => (jsx_runtime_1.jsxs("svg", { viewBox: "0 0 40 40", style: iconStyle(size), "aria-hidden": true, children: [
+        jsx_runtime_1.jsx("rect", { x: "4", y: "4", width: "32", height: "32", rx: "7.625", fill: "#050505" }), jsx_runtime_1.jsx("path", { fill: "#fff", d: "m29.62 14.21-8.67-5.09a.89.89 0 0 0-.9 0l-8.67 5.09a.77.77 0 0 0-.38.66v10.26c0 .27.14.52.38.66l8.67 5.09c.28.16.62.16.9 0l8.67-5.09c.24-.14.38-.39.38-.66V14.87a.77.77 0 0 0-.38-.66Zm-.54 1.07L20.7 30.01a.11.11 0 0 1-.2-.06v-9.64c0-.19-.1-.37-.27-.47l-8.22-4.82a.11.11 0 0 1 .06-.21h16.74c.24 0 .39.27.27.47Z" })
+    ] }));
+const WindsurfIcon = ({ size }) => (jsx_runtime_1.jsx("svg", { viewBox: "0 0 24 24", style: iconStyle(size), "aria-hidden": true, children: jsx_runtime_1.jsx("path", { fill: colors_1.CURRENT_COLOR, d: "M23.55 5.07a2.18 2.18 0 0 0-2.18 2.17v4.87c0 .97-.8 1.76-1.76 1.76-.57 0-1.14-.29-1.47-.77l-4.97-7.1a2.21 2.21 0 0 0-3.96 1.22v4.89c0 .97-.8 1.76-1.77 1.76-.57 0-1.13-.29-1.47-.77L.41 5.16A.22.22 0 0 0 0 5.29v4.24c0 .22.07.43.19.6l5.47 7.82c.33.46.8.81 1.35.93a2.15 2.15 0 0 0 2.65-2.1v-4.89c0-.97.79-1.76 1.76-1.76.57 0 1.14.29 1.47.77l4.98 7.1c.41.59 1.05.94 1.81.94a2.15 2.15 0 0 0 2.15-2.16v-4.89c0-.97.79-1.76 1.76-1.76h.19a.22.22 0 0 0 .22-.22V5.29a.22.22 0 0 0-.22-.22h-.23Z" }) }));
+const ZedIcon = ({ size }) => (jsx_runtime_1.jsx("svg", { viewBox: "0 0 40 40", style: iconStyle(size), "aria-hidden": true, children: jsx_runtime_1.jsx("path", { fill: colors_1.CURRENT_COLOR, fillRule: "evenodd", clipRule: "evenodd", d: "M8.3 7.4a.9.9 0 0 0-.9.9v19.8H5.6V8.3a2.7 2.7 0 0 1 2.7-2.7h24.11c1.2 0 1.81 1.45.96 2.3L18.52 22.76h4.18V20.9h1.8v2.31c0 .75-.6 1.35-1.35 1.35h-6.43l-3.1 3.09h14.03V16.4h1.8v11.25c0 1-.8 1.8-1.8 1.8H11.82L8.67 32.6H31.7a.9.9 0 0 0 .9-.9V11.9h1.8v19.8a2.7 2.7 0 0 1-2.7 2.7H7.59c-1.2 0-1.81-1.45-.96-2.31L21.43 17.3H17.3v1.8h-1.8v-2.25c0-.75.6-1.35 1.35-1.35h6.38l3.15-3.15H12.35V23.6h-1.8V12.35c0-1 .8-1.8 1.8-1.8h15.83l3.15-3.15H8.3Z" }) }));
+const VscodiumIcon = ({ size }) => (jsx_runtime_1.jsx("svg", { viewBox: "0 0 24 24", style: iconStyle(size), "aria-hidden": true, children: jsx_runtime_1.jsx("path", { fill: "#2F80ED", d: "M11.58.54a1.47 1.47 0 0 0-.44 2.03c2.43 3.76 3 6.6 2.75 9.08-1 4.75-3.18 5.72-5.09 5.72-1.86 0-1.36-3.07.03-3.96a5.3 5.3 0 0 1 2.73-.87 1.47 1.47 0 1 0 0-2.94c-.96 0-1.9.21-2.78.55.18-.85.25-1.76.02-2.74-.36-1.47-1.37-2.88-3.13-4.25a1.47 1.47 0 0 0-1.81 2.32c1.43 1.11 1.9 1.94 2.07 2.62.16.68.03 1.4-.3 2.4-.41 1.35-.9 2.56-1.1 3.71-.11.57-.12 1.19-.15 1.68-1.03-1-1.43-2.34-1.43-4.28a1.47 1.47 0 1 0-2.95 0c0 2.66.78 5.18 2.86 6.87 1.88 1.79 6.67 1.13 6.67 4.01 0 .81 1.19 1.21 2 1.21.84 0 1.89-.56 1.89-1.21 0-3.27 3.44-5.25 9.11-5.24A1.47 1.47 0 1 0 22.53 14.3c-.39 0-.77.01-1.14.03.64-1.49.92-3.13.86-4.9a1.47 1.47 0 1 0-2.95.1c.08 2.32-.01 4.39-1.74 5.48-.49.31-1.06.58-1.6.58.42-1.14.74-2.35.87-3.65.08-.83.09-1.82 0-2.59-.15-1.18-.33-2.53.12-3.55.4-.87 1.31-1.24 2.65-1.24a1.47 1.47 0 1 0 0-2.94c-1.98 0-3.48 1.04-4.34 2.3-.44-.95-.98-1.93-1.64-2.94a1.47 1.47 0 0 0-2.04-.44Z" }) }));
+const WebStormIcon = ({ size }) => (jsx_runtime_1.jsxs("svg", { viewBox: "0 0 24 24", style: iconStyle(size), "aria-hidden": true, children: [
+        jsx_runtime_1.jsx("rect", { width: "24", height: "24", rx: "3", fill: "#07C3F2" }), jsx_runtime_1.jsx("path", { fill: "#050505", d: "M3 3h18v18H3z" }), jsx_runtime_1.jsx("path", { fill: "#fff", d: "M4.8 5.4h2.1l1.3 4.9 1.4-4.9h1.6l1.4 4.9 1.3-4.9h2.1l-2.5 8.7h-1.8l-1.3-4.8-1.4 4.8H7.3L4.8 5.4Zm10.8 7.3 1.1-1.4c.8.6 1.6 1 2.5 1 .7 0 1.2-.3 1.2-.8 0-.5-.3-.7-1.7-1.1-1.7-.4-2.8-.9-2.8-2.6 0-1.6 1.3-2.6 3-2.6 1.2 0 2.3.4 3.2 1.1l-1 1.5c-.8-.5-1.5-.8-2.2-.8-.7 0-1.1.3-1.1.7 0 .6.4.7 1.8 1.1 1.7.5 2.7 1.1 2.7 2.6 0 1.7-1.3 2.7-3.2 2.7-1.3 0-2.6-.5-3.5-1.4ZM4.7 18h8v1.3h-8V18Z" })
+    ] }));
+const SublimeTextIcon = ({ size }) => (jsx_runtime_1.jsxs("svg", { viewBox: "0 0 40 40", style: iconStyle(size), "aria-hidden": true, children: [
+        jsx_runtime_1.jsx("path", { fill: "#FF9800", d: "M35.91 4.51c0-.37-.36-.59-.8-.48L4.8 11.44c-.44.11-.8.5-.8.87v7.58c0 .37.36.59.8.48l30.31-7.41c.44-.11.8-.5.8-.87V4.51Zm0 15.57c0-.38-.36-.59-.8-.49L4.8 27.01c-.44.1-.8.5-.8.87v7.57c0 .38.36.6.8.49l30.31-7.41c.44-.11.8-.5.8-.88v-7.57Z" }), jsx_runtime_1.jsx("path", { fill: "#F28C00", d: "M4 19.84c0 .37.36.76.8.87l30.32 7.41c.44.11.8-.11.8-.48v-7.58c0-.37-.36-.76-.8-.87L4.8 11.78c-.44-.11-.8.11-.8.48v7.58Z" })
+    ] }));
+const EditorIcon = ({ editorId, size: sizeProp }) => {
+    const size = sizeProp !== null && sizeProp !== void 0 ? sizeProp : 14;
+    switch (editorId) {
+        case 'vscode':
+            return jsx_runtime_1.jsx(VsCodeIcon, { size: size });
+        case 'cursor':
+            return jsx_runtime_1.jsx(CursorIcon, { size: size });
+        case 'windsurf':
+            return jsx_runtime_1.jsx(WindsurfIcon, { size: size });
+        case 'zed':
+            return jsx_runtime_1.jsx(ZedIcon, { size: size });
+        case 'vscodium':
+            return jsx_runtime_1.jsx(VscodiumIcon, { size: size });
+        case 'webstorm':
+            return jsx_runtime_1.jsx(WebStormIcon, { size: size });
+        case 'sublime-text':
+            return jsx_runtime_1.jsx(SublimeTextIcon, { size: size });
+        case 'custom':
+        case null:
+            return jsx_runtime_1.jsx(custom_editor_1.CustomEditorIcon, { size: size });
+        default:
+            return null;
+    }
+};
+exports.EditorIcon = EditorIcon;

package/dist/icons/upload.d.ts

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

package/dist/icons/upload.js

@@ -0,0 +1,8 @@
+"use strict";
+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" }) }));
+};
+exports.UploadIcon = UploadIcon;

package/dist/state/editor-guides.d.ts

@@ -11,6 +11,7 @@ export type GuideState = {
     guidesList: Guide[];
     setGuidesList: (cb: (prevState: Guide[]) => Guide[]) => void;
     draggingGuideId: string | null;
+    moveGuidePointerRef: React.RefObject<((event: PointerEvent) => void) | null>;
     setDraggingGuideId: (cb: (prevState: string | null) => string | null) => void;
     setHoveredGuideId: (cb: (prevState: string | null) => string | null) => void;
     hoveredGuideId: string | null;

package/dist/state/editor-guides.js

@@ -26,6 +26,7 @@ exports.EditorShowGuidesContext = (0, react_1.createContext)({
     guidesList: [],
     setGuidesList: () => undefined,
     draggingGuideId: null,
+    moveGuidePointerRef: { current: null },
     setDraggingGuideId: () => undefined,
     shouldCreateGuideRef: { current: false },
     shouldDeleteGuideRef: { current: false },

package/dist/state/modals.d.ts

@@ -146,6 +146,8 @@ export type ModalState = {
 } | {
     type: 'configure-license';
     initialPublicLicenseKey: string | null;
+} | {
+    type: 'configure-default-editor';
 } | RenderModalState | WebRenderModalState | {
     type: 'render-progress';
     jobId: string;
@@ -162,6 +164,7 @@ export type ModalState = {
     invocationTimestamp: number;
     assetSelection: {
         initialQuery: string;
+        onSelectFile: () => void;
         onSelected: (asset: StaticFile) => void;
     } | null;
     compositionSelection: {

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

@@ -5,6 +5,7 @@ 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

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.useZIndex = exports.HigherZIndex = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
+const pointer_session_1 = require("../helpers/pointer-session");
 const use_keybinding_1 = require("../helpers/use-keybinding");
 const highest_z_index_1 = require("./highest-z-index");
 const input_dragger_click_lock_1 = require("./input-dragger-click-lock");
@@ -31,13 +32,22 @@ const EscapeHook = ({ onEscape }) => {
     }, [keybindings, onEscape]);
     return null;
 };
-const HigherZIndex = ({ children, onEscape, onOutsideClick, disabled, outsideClickButton = 'any', }) => {
+const HigherZIndex = ({ children, onEscape, onOutsideClick, disabled, outsideClickButton = 'any', stackOnHighest = false, }) => {
+    var _a;
     const context = (0, react_1.useContext)(ZIndexContext);
     const highestContext = (0, react_1.useContext)(highest_z_index_1.HighestZIndexContext);
     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 currentIndex = disabled
         ? context.currentIndex
-        : context.currentIndex + 1;
+        : ((_a = stackedIndex.current) !== null && _a !== void 0 ? _a : context.currentIndex + 1);
     (0, react_1.useEffect)(() => {
         if (disabled) {
             return;
@@ -49,7 +59,7 @@ const HigherZIndex = ({ children, onEscape, onOutsideClick, disabled, outsideCli
         if (disabled) {
             return;
         }
-        let onUp = null;
+        let endPointerSession = null;
         const listener = (downEvent) => {
             var _a;
             if (outsideClickButton === 'primary' && downEvent.button !== 0) {
@@ -59,16 +69,25 @@ const HigherZIndex = ({ children, onEscape, onOutsideClick, disabled, outsideCli
             if (!outsideClick) {
                 return;
             }
-            onUp = (upEvent) => {
-                if (highestContext.highestIndex === currentIndex &&
-                    !(0, input_dragger_click_lock_1.getClickLock)() &&
-                    // Don't trigger if that click removed that node
-                    document.contains(upEvent.target)) {
-                    upEvent.stopPropagation();
-                    onOutsideClick(upEvent.target);
-                }
-            };
-            window.addEventListener('pointerup', onUp, { once: true });
+            endPointerSession === null || endPointerSession === void 0 ? void 0 : endPointerSession();
+            endPointerSession = (0, pointer_session_1.startPointerSession)({
+                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);
+                        }
+                    }
+                },
+            });
         };
         // 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
@@ -79,11 +98,8 @@ const HigherZIndex = ({ children, onEscape, onOutsideClick, disabled, outsideCli
             window.addEventListener('pointerdown', listener, true);
         });
         return () => {
-            if (onUp) {
-                // @ts-expect-error
-                window.removeEventListener('pointerup', onUp, { once: true });
-            }
-            onUp = null;
+            endPointerSession === null || endPointerSession === void 0 ? void 0 : endPointerSession();
+            endPointerSession = null;
             return window.removeEventListener('pointerdown', listener, true);
         };
     }, [

package/package.json

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

package/dist/components/StudioCanvasCapture.d.ts

@@ -1,5 +0,0 @@
-import React from 'react';
-export declare const StudioCanvasCapture: React.FC<{
-    readonly children: React.ReactNode;
-    readonly density: number;
-}>;