@remotion/studio 4.0.524 → 4.0.526

package/dist/components/AssetSelectorModal.js

@@ -0,0 +1,174 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AssetSelectorModal = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const colors_1 = require("../helpers/colors");
+const modals_1 = require("../state/modals");
+const Button_1 = require("./Button");
+const layout_1 = require("./layout");
+const ModalButton_1 = require("./ModalButton");
+const ModalContainer_1 = require("./ModalContainer");
+const ModalFooter_1 = require("./ModalFooter");
+const ModalHeader_1 = require("./ModalHeader");
+const RemInput_1 = require("./NewComposition/RemInput");
+const QuickSwitcherContent_1 = require("./QuickSwitcher/QuickSwitcherContent");
+const SegmentedControl_1 = require("./SegmentedControl");
+const panel = {
+    maxWidth: 'calc(100vw - 40px)',
+    overflow: 'hidden',
+    width: 400,
+};
+const sourceSelector = {
+    display: 'flex',
+    padding: '12px 16px 0',
+};
+const urlContent = {
+    boxSizing: 'border-box',
+    minHeight: 300,
+    padding: 16,
+};
+const compactUrlContent = {
+    boxSizing: 'border-box',
+    padding: 16,
+};
+const label = {
+    color: colors_1.LIGHT_TEXT,
+    display: 'block',
+    fontFamily: 'sans-serif',
+    fontSize: 12,
+    marginBottom: 8,
+};
+const previewRow = {
+    alignItems: 'center',
+    display: 'flex',
+    gap: 16,
+    minHeight: 112,
+    paddingTop: 16,
+};
+const previewImage = {
+    display: 'block',
+    height: 96,
+    objectFit: 'contain',
+    width: 96,
+};
+const previewStatus = {
+    color: colors_1.LIGHT_TEXT,
+    fontFamily: 'sans-serif',
+    fontSize: 12,
+    lineHeight: 1.5,
+};
+const footer = {
+    display: 'flex',
+    minWidth: 0,
+    width: '100%',
+};
+const isHttpUrl = (value) => {
+    try {
+        const { protocol } = new URL(value.startsWith('//') ? `https:${value}` : value);
+        return protocol === 'http:' || protocol === 'https:';
+    }
+    catch (_a) {
+        return false;
+    }
+};
+const AssetSelectorModal = ({ state, readOnlyStudio }) => {
+    var _a;
+    const { setSelectedModal } = (0, react_1.useContext)(modals_1.SetSelectedModalContext);
+    const [mode, setMode] = (0, react_1.useState)(() => state.initialUrl === null ? 'project' : 'url');
+    const [draft, setDraft] = (0, react_1.useState)((_a = state.initialUrl) !== null && _a !== void 0 ? _a : '');
+    const [previewState, setPreviewState] = (0, react_1.useState)(() => state.assetType === 'image' && state.initialUrl !== null
+        ? { type: 'loading' }
+        : { type: 'empty' });
+    const close = (0, react_1.useCallback)(() => {
+        setSelectedModal(null);
+    }, [setSelectedModal]);
+    (0, react_1.useEffect)(() => {
+        if (state.assetType !== 'image') {
+            setPreviewState({ type: 'empty' });
+            return;
+        }
+        const value = draft.trim();
+        if (value === '') {
+            setPreviewState({ type: 'empty' });
+            return;
+        }
+        if (!isHttpUrl(value)) {
+            setPreviewState({ type: 'invalid' });
+            return;
+        }
+        let cancelled = false;
+        const image = new Image();
+        setPreviewState({ type: 'loading' });
+        image.onload = () => {
+            if (!cancelled) {
+                setPreviewState({
+                    type: 'loaded',
+                    width: image.naturalWidth,
+                    height: image.naturalHeight,
+                });
+            }
+        };
+        image.onerror = () => {
+            if (!cancelled) {
+                setPreviewState({ type: 'error' });
+            }
+        };
+        image.src = value.startsWith('//') ? `https:${value}` : value;
+        return () => {
+            cancelled = true;
+            image.onload = null;
+            image.onerror = null;
+        };
+    }, [draft, state.assetType]);
+    const items = (0, react_1.useMemo)(() => [
+        {
+            key: 'project',
+            label: 'Project assets',
+            onClick: () => setMode('project'),
+            selected: mode === 'project',
+        },
+        {
+            key: 'url',
+            label: 'URL',
+            onClick: () => setMode('url'),
+            selected: mode === 'url',
+        },
+    ], [mode]);
+    const trimmedDraft = draft.trim();
+    const canApply = isHttpUrl(trimmedDraft);
+    const invalidDraft = trimmedDraft !== '' && !canApply;
+    const apply = (0, react_1.useCallback)(() => {
+        if (!canApply) {
+            return;
+        }
+        state.onSelectedUrl(trimmedDraft);
+        close();
+    }, [canApply, close, state, trimmedDraft]);
+    const onSubmit = (0, react_1.useCallback)((event) => {
+        event.preventDefault();
+        apply();
+    }, [apply]);
+    const assetTypeLabel = state.assetType.charAt(0).toUpperCase() + state.assetType.slice(1);
+    return (jsx_runtime_1.jsxs(ModalContainer_1.ModalContainer, { onEscape: close, onOutsideClick: close, panelStyle: panel, children: [
+            jsx_runtime_1.jsx(ModalHeader_1.ModalHeader, { title: `Replace ${state.assetType}`, onClose: close }), jsx_runtime_1.jsx("div", { style: sourceSelector, children: jsx_runtime_1.jsx(SegmentedControl_1.SegmentedControl, { items: items, needsWrapping: false, size: "compact" }) }), mode === 'project' ? (jsx_runtime_1.jsx(QuickSwitcherContent_1.QuickSwitcherContent, { assetSelection: state.assetSelection, compositionSelection: null, initialMode: "assets", invocationTimestamp: state.invocationTimestamp, readOnlyStudio: readOnlyStudio })) : (jsx_runtime_1.jsxs("form", { onSubmit: onSubmit, children: [
+                    jsx_runtime_1.jsxs("div", { style: state.assetType === 'image' ? urlContent : compactUrlContent, children: [
+                            jsx_runtime_1.jsxs("label", { htmlFor: "remotion-asset-url", style: label, children: [assetTypeLabel, " URL"] }), jsx_runtime_1.jsx(RemInput_1.RemotionInput, { id: "remotion-asset-url", autoFocus: true, onChange: (event) => setDraft(event.target.value), placeholder: `https://example.com/${state.assetType}`, rightAlign: false, status: invalidDraft ? 'error' : 'ok', type: "url", value: draft }), state.assetType === 'image' ? (jsx_runtime_1.jsxs("div", { style: previewRow, role: "status", children: [previewState.type === 'loaded' ? (jsx_runtime_1.jsx("img", { alt: "Image URL preview", src: trimmedDraft.startsWith('//')
+                                            ? `https:${trimmedDraft}`
+                                            : trimmedDraft, style: previewImage })) : null, jsx_runtime_1.jsx("div", { style: previewState.type === 'error'
+                                            ? { ...previewStatus, color: colors_1.FAIL_COLOR }
+                                            : previewStatus, children: previewState.type === 'empty'
+                                            ? 'Enter an image URL.'
+                                            : previewState.type === 'invalid'
+                                                ? 'Enter an HTTP(S) URL.'
+                                                : previewState.type === 'loading'
+                                                    ? 'Loading preview…'
+                                                    : previewState.type === 'error'
+                                                        ? 'Preview unavailable. You can still replace the source.'
+                                                        : `${previewState.width} × ${previewState.height}` })
+                                ] })) : null] }), jsx_runtime_1.jsx(ModalFooter_1.ModalFooterContainer, { style: footer, children: jsx_runtime_1.jsxs(layout_1.Row, { align: "center", flex: 1, justify: "flex-end", children: [
+                                jsx_runtime_1.jsx(Button_1.Button, { onClick: close, children: "Cancel" }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 1 }), jsx_runtime_1.jsxs(ModalButton_1.ModalButton, { disabled: !canApply, onClick: apply, children: ["Replace ", state.assetType] })
+                            ] }) })
+                ] }))] }));
+};
+exports.AssetSelectorModal = AssetSelectorModal;

package/dist/components/Canvas.js

@@ -36,6 +36,7 @@ const EditorGuides_1 = __importDefault(require("./EditorGuides"));
 const EditorRuler_1 = require("./EditorRuler");
 const use_is_ruler_visible_1 = require("./EditorRuler/use-is-ruler-visible");
 const effect_drag_and_drop_1 = require("./effect-drag-and-drop");
+const element_drag_and_drop_1 = require("./element-drag-and-drop");
 const element_install_api_1 = require("./element-install-api");
 const element_install_request_1 = require("./element-install-request");
 const handle_drop_1 = require("./handle-drop");
@@ -847,6 +848,10 @@ const Canvas = ({ canvasContent, size }) => {
             return;
         }
         const mayBeCanvasCapture = (0, drop_handler_data_1.isFileDragEvent)(event) && !window.remotion_isReadOnlyStudio;
+        const canDropElementIntoNewComposition = cannotAddSequence &&
+            canReceiveElementInstallRequest &&
+            !isAddingAsset &&
+            (0, element_drag_and_drop_1.hasElementDragType)(event.dataTransfer);
         if (!canDropAssets && !cannotAddSequence && !mayBeCanvasCapture) {
             setCompositionDropPreview(null);
             return;
@@ -854,7 +859,11 @@ const Canvas = ({ canvasContent, size }) => {
         event.preventDefault();
         if (event.dataTransfer) {
             event.dataTransfer.dropEffect =
-                canDropAssets || mayBeCanvasCapture ? 'copy' : 'none';
+                canDropAssets ||
+                    canDropElementIntoNewComposition ||
+                    mayBeCanvasCapture
+                    ? 'copy'
+                    : 'none';
         }
         if (!canDropAssets ||
             contentDimensions === null ||
@@ -921,8 +930,10 @@ const Canvas = ({ canvasContent, size }) => {
         addFitPadding,
         canDropAssets,
         cannotAddSequence,
+        canReceiveElementInstallRequest,
         contentDimensions,
         editorSnapping,
+        isAddingAsset,
         previewSize,
         size,
     ]);
@@ -972,13 +983,17 @@ const Canvas = ({ canvasContent, size }) => {
                 }
             }
         }
-        if (cannotAddSequence) {
+        const canDropElementIntoNewComposition = cannotAddSequence &&
+            canReceiveElementInstallRequest &&
+            !isAddingAsset &&
+            (0, element_drag_and_drop_1.getElementDragData)(event.dataTransfer) !== null;
+        if (cannotAddSequence && !canDropElementIntoNewComposition) {
             event.preventDefault();
             event.stopPropagation();
-            (0, NotificationCenter_1.showNotification)('Cannot insert items into this composition component', 3000);
+            (0, NotificationCenter_1.showNotification)('Cannot insert this item: This composition component cannot accept a new <Sequence>.', 3000);
             return;
         }
-        if (!canDropAssets ||
+        if ((!canDropAssets && !canDropElementIntoNewComposition) ||
             compositionFile === null ||
             currentCompositionId === null ||
             config === null) {
@@ -1049,12 +1064,14 @@ const Canvas = ({ canvasContent, size }) => {
         addFitPadding,
         canDropAssets,
         cannotAddSequence,
+        canReceiveElementInstallRequest,
         chooseSvgImportMode,
         compositionFile,
         config,
         contentDimensions,
         currentCompositionId,
         editorSnapping,
+        isAddingAsset,
         previewSize,
         size,
         setSelectedModal,

package/dist/components/CaptionInspector.js

@@ -60,6 +60,8 @@ const readOnlyStatus = {
 };
 const CaptionInspector = ({ captions, expanded, onTextChange, onTextSave, onTextCancel, onReplaceCaptions, onToggle, readOnly, readOnlyTitle, }) => {
     const fileInput = (0, react_1.useRef)(null);
+    const expansionRef = (0, react_1.useRef)({ expanded, onToggle });
+    expansionRef.current = { expanded, onToggle };
     const [isImporting, setIsImporting] = (0, react_1.useState)(false);
     const { setSelectedModal } = react_1.default.useContext(modals_1.SetSelectedModalContext);
     const importCaptions = (0, react_1.useCallback)(async ({ fileName, contents, }) => {
@@ -68,10 +70,14 @@ const CaptionInspector = ({ captions, expanded, onTextChange, onTextSave, onText
         }
         setIsImporting(true);
         try {
-            onReplaceCaptions((0, parse_caption_file_1.parseCaptionFile)({
+            const imported = (0, parse_caption_file_1.parseCaptionFile)({
                 fileName,
                 contents: await contents,
-            }));
+            });
+            onReplaceCaptions(imported);
+            if (imported.length > 0 && !expansionRef.current.expanded) {
+                expansionRef.current.onToggle();
+            }
         }
         catch (error) {
             (0, NotificationCenter_1.showNotification)(`Could not import ${fileName}: ${error instanceof Error ? error.message : String(error)}`, 5000);
@@ -112,6 +118,6 @@ const CaptionInspector = ({ captions, expanded, onTextChange, onTextSave, onText
     }, [importCaptions, setSelectedModal]);
     return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
             jsx_runtime_1.jsx(common_1.InspectorSectionHeader, { children: jsx_runtime_1.jsx(CollapsibleInspectorSectionHeader_1.CollapsibleInspectorSectionHeader, { action: jsx_runtime_1.jsxs("div", { style: styles_1.sectionHeaderEnd, children: [onReplaceCaptions === null ? null : (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
-                                    jsx_runtime_1.jsx("input", { ref: fileInput, accept: ".json", "aria-label": "Import captions file", hidden: true, onChange: onFileSelected, type: "file" }), jsx_runtime_1.jsx(InlineAction_1.InlineAction, { "aria-label": "Import captions", className: hoverable_1.FOCUS_VISIBLE_ONLY_CLASS_NAME, disabled: isImporting, onClick: openCaptionSelection, renderAction: (color) => (jsx_runtime_1.jsx(upload_1.UploadIcon, { "aria-hidden": "true", color: color, focusable: "false", style: { height: 14, width: 14 } })), title: importTooltip, variant: null })] })), readOnly ? (jsx_runtime_1.jsx("div", { style: readOnlyStatus, title: readOnlyTitle !== null && readOnlyTitle !== void 0 ? readOnlyTitle : undefined, children: "Read only" })) : null] }), expanded: expanded, label: "Captions", onToggle: onToggle }) }), expanded ? (jsx_runtime_1.jsx(CaptionTextEditor_1.CaptionTextEditor, { captions: captions, onChange: onTextChange, onSave: onTextSave, onCancel: onTextCancel, readOnly: readOnly })) : null] }));
+                                    jsx_runtime_1.jsx("input", { ref: fileInput, accept: ".json", "aria-label": "Import captions file", hidden: true, onChange: onFileSelected, type: "file" }), jsx_runtime_1.jsx(InlineAction_1.InlineAction, { "aria-label": "Import captions", className: hoverable_1.FOCUS_VISIBLE_ONLY_CLASS_NAME, disabled: isImporting, onClick: openCaptionSelection, renderAction: (color) => (jsx_runtime_1.jsx(upload_1.UploadIcon, { "aria-hidden": "true", color: color, focusable: "false", style: { height: 14, width: 14 } })), title: importTooltip, variant: null })] })), readOnly ? (jsx_runtime_1.jsx("div", { style: readOnlyStatus, title: readOnlyTitle !== null && readOnlyTitle !== void 0 ? readOnlyTitle : undefined, children: "Read only" })) : null] }), expanded: expanded, label: "Captions", onToggle: captions.length > 0 ? onToggle : null }) }), expanded || captions.length === 0 ? (jsx_runtime_1.jsx(CaptionTextEditor_1.CaptionTextEditor, { captions: captions, onChange: onTextChange, onSave: onTextSave, onCancel: onTextCancel, readOnly: readOnly })) : null] }));
 };
 exports.CaptionInspector = CaptionInspector;

package/dist/components/CheckboardToggle.js

@@ -9,6 +9,7 @@ const use_keyboard_shortcut_label_1 = require("../helpers/use-keyboard-shortcut-
 const checkerboard_1 = require("../state/checkerboard");
 const ActionTooltip_1 = require("./ActionTooltip");
 const ControlButton_1 = require("./ControlButton");
+const buttonStyle = { width: 26 };
 const CheckboardToggle = () => {
     const { checkerboard, setCheckerboard } = (0, react_1.useContext)(checkerboard_1.CheckerboardContext);
     const onClick = (0, react_1.useCallback)(() => {
@@ -20,7 +21,7 @@ const CheckboardToggle = () => {
     const ariaKeyShortcuts = (0, use_keyboard_shortcut_label_1.useKeyboardShortcutAriaKeyShortcuts)('toggleCheckerboard');
     const accessibilityLabel = 'Show transparency as checkerboard';
     const shortcutsDisabled = (0, use_keybinding_1.areKeyboardShortcutsDisabled)();
-    return (jsx_runtime_1.jsx(ActionTooltip_1.ActionTooltip, { label: accessibilityLabel, shortcut: shortcutsDisabled ? null : shortcut, delay: 800, dismissOnClick: false, children: jsx_runtime_1.jsx(ControlButton_1.ControlButton, { title: "", "aria-label": accessibilityLabel, "aria-pressed": checkerboard, "aria-keyshortcuts": shortcutsDisabled ? undefined : ariaKeyShortcuts || undefined, onClick: onClick, children: (color) => (jsx_runtime_1.jsxs("svg", { "aria-hidden": "true", focusable: "false", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 512 512", style: { width: 18, height: 18 }, fill: "none", children: [
+    return (jsx_runtime_1.jsx(ActionTooltip_1.ActionTooltip, { label: "Checkerboard", shortcut: shortcutsDisabled ? null : shortcut, delay: 800, dismissOnClick: false, children: jsx_runtime_1.jsx(ControlButton_1.ControlButton, { title: "", "aria-label": accessibilityLabel, "aria-pressed": checkerboard, "aria-keyshortcuts": shortcutsDisabled ? undefined : ariaKeyShortcuts || undefined, onClick: onClick, style: buttonStyle, children: (color) => (jsx_runtime_1.jsxs("svg", { "aria-hidden": "true", focusable: "false", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 512 512", style: { width: 18, height: 18 }, fill: "none", children: [
                     jsx_runtime_1.jsx("path", { fill: checkerboard ? colors_1.BLUE : color, d: "M256 48h184c13.3 0 24 10.7 24 24v184H256V48zM48 256h208v208H72c-13.3 0-24-10.7-24-24V256z" }), jsx_runtime_1.jsx("rect", { x: "48", y: "48", width: "416", height: "416", rx: "24", stroke: checkerboard ? colors_1.BLUE : color, strokeWidth: "32" }), jsx_runtime_1.jsx("path", { d: "M256 48v416M48 256h416", stroke: checkerboard ? colors_1.BLUE : color, strokeWidth: "32" })
                 ] })) }) }));
 };

package/dist/{error-overlay/remotion-overlay → components}/CodeFrame.d.ts

@@ -3,4 +3,6 @@ import React from 'react';
 export declare const CodeFrame: React.FC<{
     readonly source: ScriptLine[];
     readonly lineNumberWidth: number;
+    readonly fontSize: number;
+    readonly horizontalMargin: number;
 }>;

package/dist/components/CodeFrame.js

@@ -0,0 +1,77 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CodeFrame = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const colors_1 = require("../helpers/colors");
+const LazySyntaxHighlightedSource_1 = require("./LazySyntaxHighlightedSource");
+const is_menu_item_1 = require("./Menu/is-menu-item");
+const frame = {
+    backgroundColor: colors_1.ERROR_CODE_FRAME_BACKGROUND,
+    borderRadius: 6,
+    display: 'flex',
+    marginBottom: 20,
+    overflow: 'hidden',
+};
+const sourceContainer = {
+    flex: 1,
+    minWidth: 0,
+    overflowX: 'auto',
+    overscrollBehaviorX: 'none',
+};
+const lineNumberColumn = {
+    flexShrink: 0,
+    width: 60,
+};
+const lineNumber = {
+    whiteSpace: 'pre',
+    paddingRight: 12,
+    color: 'inherit',
+    lineHeight: 1.7,
+    width: 60,
+    flexShrink: 0,
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'flex-end',
+    fontFamily: 'monospace',
+};
+const CodeFrame = ({ source, lineNumberWidth, fontSize, horizontalMargin }) => {
+    return (jsx_runtime_1.jsxs("div", { style: {
+            ...frame,
+            marginLeft: horizontalMargin,
+            marginRight: horizontalMargin,
+        }, children: [
+            jsx_runtime_1.jsx("div", { style: lineNumberColumn, children: source.map((s, j) => {
+                    return (jsx_runtime_1.jsx("div", { style: {
+                            ...lineNumber,
+                            fontSize,
+                            backgroundColor: s.highlight
+                                ? colors_1.ERROR_CODE_FRAME_BACKGROUND
+                                : colors_1.ERROR_CODE_FRAME_LINE_BACKGROUND,
+                            backgroundImage: s.highlight
+                                ? `linear-gradient(${colors_1.SELECTED_BACKGROUND}, ${colors_1.SELECTED_BACKGROUND})`
+                                : undefined,
+                            color: s.highlight ? colors_1.WHITE : colors_1.WHITE_ALPHA_40,
+                        }, children: String(s.lineNumber).padStart(lineNumberWidth, ' ') }, j));
+                }) }), jsx_runtime_1.jsx("div", { style: sourceContainer, className: is_menu_item_1.HORIZONTAL_SCROLLBAR_CLASSNAME, children: jsx_runtime_1.jsx("div", { style: { minWidth: '100%', width: 'max-content' }, children: source.map((s, j) => {
+                        return (jsx_runtime_1.jsx("div", { style: {
+                                backgroundColor: s.highlight
+                                    ? colors_1.SELECTED_BACKGROUND
+                                    : colors_1.TRANSPARENT,
+                            }, children: jsx_runtime_1.jsx("code", { className: "language-tsx", style: {
+                                    display: 'block',
+                                    fontFamily: 'monospace',
+                                    fontSize,
+                                    color: '#9cdcfe',
+                                    whiteSpace: 'pre',
+                                    tabSize: 2,
+                                    backgroundColor: colors_1.TRANSPARENT,
+                                    lineHeight: 1.7,
+                                    paddingRight: 12,
+                                    paddingLeft: 12,
+                                    paddingTop: 0,
+                                    paddingBottom: 0,
+                                }, children: jsx_runtime_1.jsx(LazySyntaxHighlightedSource_1.LazySyntaxHighlightedSource, { source: s.content }) }) }, j));
+                    }) }) })
+        ] }));
+};
+exports.CodeFrame = CodeFrame;

package/dist/components/ColorPicker/AlphaSlider.js

@@ -67,7 +67,7 @@ const AlphaSlider = ({ hue, saturation, value, alpha, onChange, onChangeComplete
                 updateFromEvent(ev.clientX, false);
             },
             onEnd: (reason, ev) => {
-                const shouldUseEndEvent = reason === 'pointerup' || reason === 'buttons-released';
+                const shouldUseEndEvent = (0, pointer_session_1.isPointerSessionRelease)(reason, ev);
                 updateFromEvent(shouldUseEndEvent && ev ? ev.clientX : lastClientX, true);
             },
         });

package/dist/components/ColorPicker/HueSlider.js

@@ -49,7 +49,7 @@ const HueSlider = ({ hue, onChange, onChangeComplete }) => {
                 updateFromEvent(ev.clientX, false);
             },
             onEnd: (reason, ev) => {
-                const shouldUseEndEvent = reason === 'pointerup' || reason === 'buttons-released';
+                const shouldUseEndEvent = (0, pointer_session_1.isPointerSessionRelease)(reason, ev);
                 updateFromEvent(shouldUseEndEvent && ev ? ev.clientX : lastClientX, true);
             },
         });

package/dist/components/ColorPicker/SaturationValueArea.js

@@ -63,7 +63,7 @@ const SaturationValueArea = ({ hue, saturation, value, onChange, onChangeComplet
                 updateFromEvent(ev.clientX, ev.clientY, false);
             },
             onEnd: (reason, ev) => {
-                const shouldUseEndEvent = reason === 'pointerup' || reason === 'buttons-released';
+                const shouldUseEndEvent = (0, pointer_session_1.isPointerSessionRelease)(reason, ev);
                 updateFromEvent(shouldUseEndEvent && ev ? ev.clientX : lastPosition.clientX, shouldUseEndEvent && ev ? ev.clientY : lastPosition.clientY, true);
             },
         });

package/dist/components/CompositionSelector.js

@@ -238,6 +238,7 @@ const CompositionSelector = () => {
                 dryRun: false,
                 signal: controller.signal,
                 symbolicatedStack: (0, composition_selector_drag_data_1.compositionSelectorDragDataToSymbolicatedStack)(dragData),
+                undoRedoNavigation: null,
             });
             if (result.success) {
                 notification.dismiss();

package/dist/components/CompositionSelectorItem.js

@@ -4,7 +4,6 @@ exports.CompositionSelectorItem = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const browser_studio_operations_1 = require("../helpers/browser-studio-operations");
-const client_id_1 = require("../helpers/client-id");
 const colors_1 = require("../helpers/colors");
 const hoverable_1 = require("../helpers/hoverable");
 const noop_1 = require("../helpers/noop");
@@ -23,7 +22,7 @@ const NotificationCenter_1 = require("./Notifications/NotificationCenter");
 const actions_1 = require("./RenderQueue/actions");
 const SidebarRenderButton_1 = require("./SidebarRenderButton");
 const use_resolved_stack_1 = require("./Timeline/use-resolved-stack");
-const use_default_editor_info_1 = require("./use-default-editor-info");
+const use_open_in_menu_apps_1 = require("./use-open-in-menu-apps");
 const itemStyle = {
     paddingRight: 2,
     paddingTop: 5,
@@ -193,9 +192,7 @@ const CompositionSelectorItem = ({ item, level, currentComposition, tabIndex, se
         }
     }, [onClick]);
     const { setSelectedModal } = (0, react_1.useContext)(modals_1.SetSelectedModalContext);
-    const connectionStatus = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx)
-        .previewServerState.type;
-    const { defaultEditorId, defaultEditorName } = (0, use_default_editor_info_1.useEditorOpening)(connectionStatus === 'connected');
+    const { connectionStatus, openInApps } = (0, use_open_in_menu_apps_1.useOpenInMenuApps)();
     const resolvedLocation = (0, use_resolved_stack_1.useResolvedStack)(item.type === 'composition' ? item.composition.stack : item.folder.stack);
     const getContextMenuItems = (0, react_1.useCallback)(() => {
         if (item.type === 'composition') {
@@ -203,9 +200,8 @@ const CompositionSelectorItem = ({ item, level, currentComposition, tabIndex, se
                 closeMenu: noop_1.noop,
                 composition: item.composition,
                 connectionStatus,
-                editorId: defaultEditorId,
-                editorName: defaultEditorName,
                 includeCompositionManagementItems: true,
+                openInApps,
                 resolvedLocation,
                 setSelectedModal,
                 readOnlyStudio: window.remotion_isReadOnlyStudio,
@@ -214,21 +210,14 @@ const CompositionSelectorItem = ({ item, level, currentComposition, tabIndex, se
         return (0, folder_menu_items_1.getFolderMenuItems)({
             closeMenu: noop_1.noop,
             connectionStatus,
-            editorId: defaultEditorId,
-            editorName: defaultEditorName,
+            editorId: openInApps.defaultEditorId,
+            editorName: openInApps.defaultEditorName,
             folder: item.folder,
             resolvedLocation,
             setSelectedModal,
             readOnlyStudio: window.remotion_isReadOnlyStudio,
         });
-    }, [
-        connectionStatus,
-        defaultEditorId,
-        defaultEditorName,
-        item,
-        resolvedLocation,
-        setSelectedModal,
-    ]);
+    }, [connectionStatus, item, openInApps, resolvedLocation, setSelectedModal]);
     const onItemDragStart = (0, react_1.useCallback)((event) => {
         var _a, _b, _c, _d, _e;
         if (window.remotion_isReadOnlyStudio) {
@@ -408,6 +397,7 @@ const CompositionSelectorItem = ({ item, level, currentComposition, tabIndex, se
                 dryRun: false,
                 signal: new AbortController().signal,
                 symbolicatedStack: (0, composition_selector_drag_data_1.compositionSelectorDragDataToSymbolicatedStack)(dragData),
+                undoRedoNavigation: null,
             });
             if (result.success) {
                 notification.dismiss();

package/dist/components/CurrentAsset.js

@@ -25,6 +25,7 @@ const modals_1 = require("../state/modals");
 const AssetAudioVolume_1 = require("./AssetAudioVolume");
 const InlineEditableTitle_1 = require("./InlineEditableTitle");
 const InspectorInfoHeader_1 = require("./InspectorInfoHeader");
+const CollapsibleInspectorSection_1 = require("./InspectorPanel/CollapsibleInspectorSection");
 const common_1 = require("./InspectorPanel/common");
 const InspectorPanelLayout_1 = require("./InspectorPanelLayout");
 const layout_1 = require("./layout");
@@ -246,12 +247,12 @@ const AssetInfo = ({ assetName, contentSized = false, onAssetClick, readOnlyStud
     return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
             jsx_runtime_1.jsx(InspectorInfoHeader_1.InspectorInfoHeader, { contentSized: contentSized, minHeight: exports.CURRENT_ASSET_HEIGHT, padding: contentSized
                     ? `0 ${InspectorPanelLayout_1.INSPECTOR_PANEL_HORIZONTAL_PADDING}px 6px`
-                    : '4px 0', children: jsx_runtime_1.jsx(InlineEditableTitle_1.InlineEditableTitle, { value: fileName, canRename: canRename, getInitialSelection: use_rename_static_file_1.getStaticFileRenameSelection, onClick: onAssetClick, onCommit: onRename, size: contentSized ? 'default' : 'inspector', title: assetName }) }), fileDetails.length > 0 ? (jsx_runtime_1.jsx(common_1.InspectorSection, { header: "File", children: jsx_runtime_1.jsx("div", { style: assetMetadataStyle, children: fileDetails.map((detail) => (jsx_runtime_1.jsx(common_1.InspectorDetailRow, { label: detail.label, children: jsx_runtime_1.jsx("span", { style: assetMetadataValueStyle, children: detail.value }) }, detail.label))) }) })) : null, mediaSections && mediaSections.video ? (jsx_runtime_1.jsx(common_1.InspectorSection, { header: "Video", children: jsx_runtime_1.jsx("div", { style: assetMetadataStyle, children: mediaSections.video.map((detail) => (jsx_runtime_1.jsx(common_1.InspectorDetailRow, { label: detail.label, children: jsx_runtime_1.jsx("span", { style: assetMetadataValueStyle, children: detail.value }) }, detail.label))) }) })) : null, mediaSections && mediaSections.audio !== null ? (jsx_runtime_1.jsx(common_1.InspectorSection, { header: "Audio", children: mediaSections.audio.length === 0 ? (jsx_runtime_1.jsx("div", { style: assetEmptyStateStyle, children: "None" })) : (jsx_runtime_1.jsxs("div", { style: assetMetadataStyle, children: [mediaSections.audio.map((detail) => (jsx_runtime_1.jsx(common_1.InspectorDetailRow, { label: detail.label, children: jsx_runtime_1.jsx("span", { style: assetMetadataValueStyle, children: detail.value }) }, detail.label))), src ? (jsx_runtime_1.jsx(common_1.InspectorDetailRow, { label: "Average volume", children: jsx_runtime_1.jsx("span", { style: assetMetadataValueStyle, children: jsx_runtime_1.jsx(AssetAudioVolume_1.AssetAudioVolume, { src: (_d = volumeMetadata === null || volumeMetadata === void 0 ? void 0 : volumeMetadata.src) !== null && _d !== void 0 ? _d : null, waveformSampleRate: volumeMetadata
+                    : '4px 0', children: jsx_runtime_1.jsx(InlineEditableTitle_1.InlineEditableTitle, { value: fileName, canRename: canRename, getInitialSelection: use_rename_static_file_1.getStaticFileRenameSelection, onClick: onAssetClick, onCommit: onRename, size: contentSized ? 'default' : 'inspector', title: assetName }) }), fileDetails.length > 0 ? (jsx_runtime_1.jsx(CollapsibleInspectorSection_1.CollapsibleInspectorSection, { collapsible: true, label: "File", sectionId: "asset-file", children: jsx_runtime_1.jsx("div", { style: assetMetadataStyle, children: fileDetails.map((detail) => (jsx_runtime_1.jsx(common_1.InspectorDetailRow, { label: detail.label, children: jsx_runtime_1.jsx("span", { style: assetMetadataValueStyle, children: detail.value }) }, detail.label))) }) })) : null, mediaSections && mediaSections.video ? (jsx_runtime_1.jsx(CollapsibleInspectorSection_1.CollapsibleInspectorSection, { collapsible: true, label: "Video", sectionId: "asset-video", children: jsx_runtime_1.jsx("div", { style: assetMetadataStyle, children: mediaSections.video.map((detail) => (jsx_runtime_1.jsx(common_1.InspectorDetailRow, { label: detail.label, children: jsx_runtime_1.jsx("span", { style: assetMetadataValueStyle, children: detail.value }) }, detail.label))) }) })) : null, mediaSections && mediaSections.audio !== null ? (jsx_runtime_1.jsx(CollapsibleInspectorSection_1.CollapsibleInspectorSection, { collapsible: mediaSections.audio.length > 0, label: "Audio", sectionId: "asset-audio", children: mediaSections.audio.length === 0 ? (jsx_runtime_1.jsx("div", { style: assetEmptyStateStyle, children: "None" })) : (jsx_runtime_1.jsxs("div", { style: assetMetadataStyle, children: [mediaSections.audio.map((detail) => (jsx_runtime_1.jsx(common_1.InspectorDetailRow, { label: detail.label, children: jsx_runtime_1.jsx("span", { style: assetMetadataValueStyle, children: detail.value }) }, detail.label))), src ? (jsx_runtime_1.jsx(common_1.InspectorDetailRow, { label: "Average volume", children: jsx_runtime_1.jsx("span", { style: assetMetadataValueStyle, children: jsx_runtime_1.jsx(AssetAudioVolume_1.AssetAudioVolume, { src: (_d = volumeMetadata === null || volumeMetadata === void 0 ? void 0 : volumeMetadata.src) !== null && _d !== void 0 ? _d : null, waveformSampleRate: volumeMetadata
                                         ? Math.ceil(volumeMetadata.fps *
                                             get_timeline_max_zoom_1.TIMELINE_FRAME_WIDTH_AT_MAX_ZOOM)
-                                        : null }, (_e = volumeMetadata === null || volumeMetadata === void 0 ? void 0 : volumeMetadata.src) !== null && _e !== void 0 ? _e : src) }) })) : null] })) })) : null, jsx_runtime_1.jsx(common_1.InspectorSectionHeader, { children: "Actions" }), jsx_runtime_1.jsxs(common_1.InspectorQuickActionsSection, { children: [fileManagerAvailable ? (jsx_runtime_1.jsxs(common_1.InspectorQuickAction, { disabled: fileManagerDisabled, onClick: onShowInFileManager, renderIcon: (color) => (jsx_runtime_1.jsx(folder_1.ExpandedFolderIcon, { color: color, style: quickActionIconStyle })), children: ["Show in ", fileManagerName] })) : null, src ? (jsx_runtime_1.jsx(common_1.InspectorQuickAction, { disabled: mutationsDisabled, onClick: onTranscribe, renderIcon: (color) => (jsx_runtime_1.jsx(transcription_1.TranscriptionIcon, { color: color, style: quickActionIconStyle })), children: "Transcribe" })) : null, fileType === 'video' ? (jsx_runtime_1.jsx(common_1.InspectorQuickAction, { disabled: mutationsDisabled, onClick: onTrackMatting, renderIcon: (color) => (jsx_runtime_1.jsx(separation_1.SeparationIcon, { color: color, style: quickActionIconStyle })), children: "Separate foreground" })) : null, src ? (jsx_runtime_1.jsxs(common_1.InspectorQuickAction, { disabled: false, onClick: onOpenConvert, renderIcon: (color) => (jsx_runtime_1.jsx(remotion_convert_1.RemotionConvertIcon, { color: color, style: quickActionIconStyle })), children: ["Convert",
-                            jsx_runtime_1.jsx("svg", { "aria-hidden": "true", viewBox: "0 0 16 16", style: convertArrowStyle, children: jsx_runtime_1.jsx("path", { d: "M4 12 12 4M6 4h6v6", fill: "none", stroke: colors_1.CURRENT_COLOR, strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "1.5" }) })
-                        ] })) : null, jsx_runtime_1.jsx(common_1.InspectorQuickAction, { disabled: mutationsDisabled, onClick: onDelete, renderIcon: (color) => (jsx_runtime_1.jsx(trash_1.TrashIcon, { color: color, style: quickActionIconStyle })), children: "Delete" })] })
+                                        : null }, (_e = volumeMetadata === null || volumeMetadata === void 0 ? void 0 : volumeMetadata.src) !== null && _e !== void 0 ? _e : src) }) })) : null] })) })) : null, jsx_runtime_1.jsx(CollapsibleInspectorSection_1.CollapsibleInspectorSection, { collapsible: true, label: "Actions", sectionId: "asset-actions", children: jsx_runtime_1.jsxs(common_1.InspectorQuickActionsSection, { children: [fileManagerAvailable ? (jsx_runtime_1.jsxs(common_1.InspectorQuickAction, { disabled: fileManagerDisabled, onClick: onShowInFileManager, renderIcon: (color) => (jsx_runtime_1.jsx(folder_1.ExpandedFolderIcon, { color: color, style: quickActionIconStyle })), children: ["Show in ", fileManagerName] })) : null, src ? (jsx_runtime_1.jsx(common_1.InspectorQuickAction, { disabled: mutationsDisabled, onClick: onTranscribe, renderIcon: (color) => (jsx_runtime_1.jsx(transcription_1.TranscriptionIcon, { color: color, style: quickActionIconStyle })), children: "Transcribe" })) : null, fileType === 'video' ? (jsx_runtime_1.jsx(common_1.InspectorQuickAction, { disabled: mutationsDisabled, onClick: onTrackMatting, renderIcon: (color) => (jsx_runtime_1.jsx(separation_1.SeparationIcon, { color: color, style: quickActionIconStyle })), children: "Separate foreground" })) : null, src ? (jsx_runtime_1.jsxs(common_1.InspectorQuickAction, { disabled: false, onClick: onOpenConvert, renderIcon: (color) => (jsx_runtime_1.jsx(remotion_convert_1.RemotionConvertIcon, { color: color, style: quickActionIconStyle })), children: ["Convert",
+                                jsx_runtime_1.jsx("svg", { "aria-hidden": "true", viewBox: "0 0 16 16", style: convertArrowStyle, children: jsx_runtime_1.jsx("path", { d: "M4 12 12 4M6 4h6v6", fill: "none", stroke: colors_1.CURRENT_COLOR, strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "1.5" }) })
+                            ] })) : null, jsx_runtime_1.jsx(common_1.InspectorQuickAction, { disabled: mutationsDisabled, onClick: onDelete, renderIcon: (color) => (jsx_runtime_1.jsx(trash_1.TrashIcon, { color: color, style: quickActionIconStyle })), children: "Delete" })] }) })
         ] }));
 };
 exports.AssetInfo = AssetInfo;

package/dist/components/EditorGuides/Guide.js

@@ -128,7 +128,7 @@ const GuideComp = ({ guide, canvasDimensions, scale }) => {
                 pointerDownPositionRef.current = null;
                 const shouldDeleteGuide = shouldDeleteGuideRef.current;
                 finishGuideInteraction();
-                if (shouldDeleteGuide || reason !== 'pointerup' || !endEvent) {
+                if (shouldDeleteGuide || !(0, pointer_session_1.isPointerSessionRelease)(reason, endEvent)) {
                     return;
                 }
                 if ((0, editor_guide_selection_1.isGuidePointerUpAClick)({