@remotion/studio 4.0.502 → 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-fjv75ty4.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/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;

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.502",
+	"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/studio-protocol": "4.0.502",
+		"@remotion/studio-protocol": "4.0.503",
 		"semver": "7.5.3",
-		"remotion": "4.0.502",
-		"@remotion/canvas-capture": "4.0.502",
-		"@remotion/captions": "4.0.502",
-		"@remotion/player": "4.0.502",
-		"@remotion/media-utils": "4.0.502",
-		"@remotion/renderer": "4.0.502",
-		"@remotion/web-renderer": "4.0.502",
-		"@remotion/studio-shared": "4.0.502",
-		"@remotion/timeline-utils": "4.0.502",
-		"@remotion/zod-types": "4.0.502",
+		"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.502",
+		"@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;
-}>;

package/dist/components/StudioCanvasCapture.js

@@ -1,40 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.StudioCanvasCapture = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const canvas_capture_1 = require("@remotion/canvas-capture");
-const react_1 = require("react");
-const use_keybinding_1 = require("../helpers/use-keybinding");
-const logCaptureError = (message, err) => {
-    // eslint-disable-next-line no-console
-    console.error(message, err instanceof Error ? err.message : String(err));
-};
-const StudioCanvasCapture = ({ children, density }) => {
-    const captureRef = (0, react_1.useRef)(null);
-    const isSupported = (0, react_1.useMemo)(() => (0, canvas_capture_1.isHtmlInCanvasAvailable)(), []);
-    const keybindings = (0, use_keybinding_1.useKeybinding)();
-    (0, react_1.useEffect)(() => {
-        if (!isSupported) {
-            return;
-        }
-        const binding = keybindings.registerKeybinding({
-            event: 'keydown',
-            key: 'p',
-            commandCtrlKey: true,
-            callback: () => {
-                var _a;
-                (_a = captureRef.current) === null || _a === void 0 ? void 0 : _a.toggleRecording().catch((err) => {
-                    logCaptureError('Could not toggle Studio canvas recording:', err);
-                });
-            },
-            preventDefault: true,
-            triggerIfInputFieldFocused: true,
-            keepRegisteredWhenNotHighestContext: true,
-        });
-        return () => {
-            binding.unregister();
-        };
-    }, [isSupported, keybindings]);
-    return (jsx_runtime_1.jsx(canvas_capture_1.HtmlInCanvasCapture, { ref: captureRef, density: density, filename: "remotion-studio-canvas-recording.webm", children: children }));
-};
-exports.StudioCanvasCapture = StudioCanvasCapture;

package/dist/components/canvas-capture-enabled.d.ts

@@ -1 +0,0 @@
-export declare const CANVAS_CAPTURE_ENABLED = false;

package/dist/components/canvas-capture-enabled.js

@@ -1,4 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.CANVAS_CAPTURE_ENABLED = void 0;
-exports.CANVAS_CAPTURE_ENABLED = false;

package/dist/components/use-element-overwrite-confirmation.d.ts

@@ -1,2 +0,0 @@
-import type { InsertElementFileConflict } from '@remotion/studio-shared';
-export declare const useElementOverwriteConfirmation: () => (conflict: InsertElementFileConflict) => Promise<boolean>;