@remotion/studio 4.0.501 → 4.0.503

package/dist/components/PreviewToolbarOverflowButton.js

@@ -0,0 +1,217 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PreviewToolbarOverflowButton = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const remotion_1 = require("remotion");
+const colors_1 = require("../helpers/colors");
+const use_keybinding_1 = require("../helpers/use-keybinding");
+const Checkmark_1 = require("../icons/Checkmark");
+const ellipsis_1 = require("../icons/ellipsis");
+const checkerboard_1 = require("../state/checkerboard");
+const editor_outlines_1 = require("../state/editor-outlines");
+const InlineDropdown_1 = require("./InlineDropdown");
+const LoopToggle_1 = require("./LoopToggle");
+const PlaybackRateSelector_1 = require("./PlaybackRateSelector");
+const SizeSelector_1 = require("./SizeSelector");
+const clickButton = (id) => {
+    var _a;
+    (_a = document.getElementById(id)) === null || _a === void 0 ? void 0 : _a.click();
+};
+const PreviewToolbarOverflowButton = ({ readOnlyStudio, showFullscreen, showPlaybackRate, showLoop, showCompositionControls, playbackRate, setPlaybackRate, loop, setLoop, }) => {
+    const video = remotion_1.Internals.useVideo();
+    const { checkerboard, setCheckerboard } = (0, react_1.useContext)(checkerboard_1.CheckerboardContext);
+    const { editorShowOutlines, setEditorShowOutlines } = (0, react_1.useContext)(editor_outlines_1.EditorShowOutlinesContext);
+    const { items: previewSizeItems, selectedId: selectedPreviewSize, zoomable, } = (0, SizeSelector_1.usePreviewSizeMenuItems)();
+    const { items: playbackRateItems, selectedId: selectedPlaybackRate } = (0, PlaybackRateSelector_1.usePlaybackRateMenuItems)({ playbackRate, setPlaybackRate });
+    const iconStyle = (0, react_1.useMemo)(() => {
+        return {
+            style: {
+                width: 14,
+                height: 14,
+                flexShrink: 0,
+            },
+        };
+    }, []);
+    const renderAction = (0, react_1.useCallback)((color) => jsx_runtime_1.jsx(ellipsis_1.EllipsisIcon, { fill: color, svgProps: iconStyle }), [iconStyle]);
+    const renderItems = (0, react_1.useMemo)(() => {
+        if (readOnlyStudio) {
+            return [
+                {
+                    type: 'item',
+                    id: 'client-render',
+                    label: 'Render on web',
+                    value: 'client-render',
+                    onClick: () => clickButton('render-modal-button-client'),
+                    keyHint: null,
+                    leftItem: null,
+                    subMenu: null,
+                    quickSwitcherLabel: null,
+                },
+                {
+                    type: 'item',
+                    id: 'render-command',
+                    label: 'Render via CLI',
+                    value: 'render-command',
+                    onClick: () => clickButton('render-modal-button-command'),
+                    keyHint: null,
+                    leftItem: null,
+                    subMenu: null,
+                    quickSwitcherLabel: null,
+                },
+            ];
+        }
+        return [
+            {
+                type: 'item',
+                id: 'server-render',
+                label: 'Server-side render',
+                value: 'server-render',
+                onClick: () => clickButton('render-modal-button-server'),
+                keyHint: null,
+                leftItem: null,
+                subMenu: null,
+                quickSwitcherLabel: null,
+            },
+            {
+                type: 'item',
+                id: 'client-render',
+                label: 'Client-side render',
+                value: 'client-render',
+                onClick: () => clickButton('render-modal-button-client'),
+                keyHint: null,
+                leftItem: null,
+                subMenu: null,
+                quickSwitcherLabel: null,
+            },
+        ];
+    }, [readOnlyStudio]);
+    const values = (0, react_1.useMemo)(() => {
+        const items = [];
+        if (zoomable) {
+            items.push({
+                type: 'item',
+                id: 'preview-size',
+                label: 'Preview Size',
+                value: 'preview-size',
+                onClick: () => undefined,
+                keyHint: null,
+                leftItem: null,
+                subMenu: {
+                    items: previewSizeItems,
+                    leaveLeftSpace: true,
+                    preselectIndex: previewSizeItems.findIndex((item) => item.id === selectedPreviewSize),
+                },
+                quickSwitcherLabel: null,
+            });
+        }
+        if (showPlaybackRate) {
+            items.push({
+                type: 'item',
+                id: 'playback-rate',
+                label: 'Playback Rate',
+                value: 'playback-rate',
+                onClick: () => undefined,
+                keyHint: null,
+                leftItem: null,
+                subMenu: {
+                    items: playbackRateItems,
+                    leaveLeftSpace: true,
+                    preselectIndex: playbackRateItems.findIndex((item) => item.id === selectedPlaybackRate),
+                },
+                quickSwitcherLabel: null,
+            });
+        }
+        if (showLoop) {
+            items.push({
+                type: 'item',
+                id: 'loop',
+                label: 'Loop',
+                value: 'loop',
+                onClick: () => (0, LoopToggle_1.toggleLoop)(setLoop),
+                keyHint: null,
+                leftItem: loop ? jsx_runtime_1.jsx(Checkmark_1.Checkmark, {}) : null,
+                subMenu: null,
+                quickSwitcherLabel: null,
+            });
+        }
+        if (showCompositionControls) {
+            items.push({
+                type: 'item',
+                id: 'checkerboard',
+                label: 'Transparency as checkerboard',
+                value: 'checkerboard',
+                onClick: () => setCheckerboard((current) => !current),
+                keyHint: (0, use_keybinding_1.areKeyboardShortcutsDisabled)() ? null : 'T',
+                leftItem: checkerboard ? jsx_runtime_1.jsx(Checkmark_1.Checkmark, {}) : null,
+                subMenu: null,
+                quickSwitcherLabel: null,
+            });
+            items.push({
+                type: 'item',
+                id: 'outlines',
+                label: 'Outlines',
+                value: 'outlines',
+                onClick: () => setEditorShowOutlines((current) => !current),
+                keyHint: null,
+                leftItem: editorShowOutlines ? jsx_runtime_1.jsx(Checkmark_1.Checkmark, {}) : null,
+                subMenu: null,
+                quickSwitcherLabel: null,
+            });
+        }
+        if (showFullscreen) {
+            items.push({
+                type: 'item',
+                id: 'fullscreen',
+                label: 'Fullscreen',
+                value: 'fullscreen',
+                onClick: () => clickButton('fullscreen-toggle'),
+                keyHint: (0, use_keybinding_1.areKeyboardShortcutsDisabled)() ? null : 'F',
+                leftItem: null,
+                subMenu: null,
+                quickSwitcherLabel: null,
+            });
+        }
+        if (video) {
+            items.push({
+                type: 'item',
+                id: 'render',
+                label: 'Render',
+                value: 'render',
+                onClick: () => undefined,
+                keyHint: null,
+                leftItem: null,
+                subMenu: {
+                    items: renderItems,
+                    leaveLeftSpace: false,
+                    preselectIndex: 0,
+                },
+                quickSwitcherLabel: null,
+            });
+        }
+        return items;
+    }, [
+        previewSizeItems,
+        playbackRateItems,
+        renderItems,
+        selectedPlaybackRate,
+        selectedPreviewSize,
+        showFullscreen,
+        showLoop,
+        showPlaybackRate,
+        showCompositionControls,
+        loop,
+        checkerboard,
+        editorShowOutlines,
+        setCheckerboard,
+        setEditorShowOutlines,
+        setLoop,
+        video,
+        zoomable,
+    ]);
+    if (values.length === 0) {
+        return null;
+    }
+    return (jsx_runtime_1.jsx(InlineDropdown_1.InlineDropdown, { variant: null, renderAction: renderAction, values: values, title: "More actions", unhoveredColor: colors_1.WHITE }));
+};
+exports.PreviewToolbarOverflowButton = PreviewToolbarOverflowButton;

package/dist/components/QuickSwitcher/QuickSwitcher.d.ts

@@ -8,6 +8,7 @@ declare const QuickSwitcher: React.FC<{
     readonly readOnlyStudio: boolean;
     readonly assetSelection: {
         readonly initialQuery: string;
+        readonly onSelectFile: () => void;
         readonly onSelected: (asset: StaticFile) => void;
     } | null;
     readonly compositionSelection: {

package/dist/components/QuickSwitcher/QuickSwitcherContent.d.ts

@@ -8,6 +8,7 @@ export declare const QuickSwitcherContent: React.FC<{
     readonly readOnlyStudio: boolean;
     readonly assetSelection: {
         readonly initialQuery: string;
+        readonly onSelectFile: () => void;
         readonly onSelected: (asset: StaticFile) => void;
     } | null;
     readonly compositionSelection: {

package/dist/components/QuickSwitcher/QuickSwitcherContent.js

@@ -156,7 +156,7 @@ const QuickSwitcherContent = ({ initialMode, invocationTimestamp, readOnlyStudio
             return docResults.results;
         }
         if (mode === 'assets') {
-            return (0, fuzzy_search_1.fuzzySearch)(assetSearch.query, assetSearch.assets.map((asset) => {
+            const assetResults = (0, fuzzy_search_1.fuzzySearch)(assetSearch.query, assetSearch.assets.map((asset) => {
                 return {
                     id: 'asset-' + asset.name,
                     title: asset.name,
@@ -174,6 +174,21 @@ const QuickSwitcherContent = ({ initialMode, invocationTimestamp, readOnlyStudio
                     },
                 };
             }));
+            if (assetSelection === null) {
+                return assetResults;
+            }
+            return [
+                {
+                    id: 'select-file',
+                    title: 'Select file...',
+                    type: 'select-file',
+                    onSelected: () => {
+                        assetSelection.onSelectFile();
+                        setSelectedModal(null);
+                    },
+                },
+                ...assetResults,
+            ];
         }
         return (0, fuzzy_search_1.fuzzySearch)(actualQuery, compositions
             .filter((c) => c.id !== (compositionSelection === null || compositionSelection === void 0 ? void 0 : compositionSelection.excludeCompositionId))

package/dist/components/QuickSwitcher/QuickSwitcherResult.d.ts

@@ -8,6 +8,8 @@ type QuickSwitcherResultDetail = {
     compositionType: 'composition' | 'still';
 } | {
     type: 'menu-item';
+} | {
+    type: 'select-file';
 } | {
     type: 'search-result';
     titleLine: string;

package/dist/components/QuickSwitcher/QuickSwitcherResult.js

@@ -6,6 +6,7 @@ const react_1 = require("react");
 const colors_1 = require("../../helpers/colors");
 const use_keybinding_1 = require("../../helpers/use-keybinding");
 const still_1 = require("../../icons/still");
+const upload_1 = require("../../icons/upload");
 const video_1 = require("../../icons/video");
 const AssetFileIcon_1 = require("../AssetFileIcon");
 const layout_1 = require("../layout");
@@ -35,6 +36,11 @@ const iconStyle = {
     height: 18,
     flexShrink: 0,
 };
+const selectFileIconStyle = {
+    ...iconStyle,
+    width: 20,
+    height: 20,
+};
 const labelContainer = {
     overflow: 'hidden',
     flex: 1,
@@ -95,7 +101,7 @@ const QuickSwitcherResult = ({ result, selected }) => {
             fontSize: shared_1.QUICK_SWITCHER_RESULT_LABEL_FONT_SIZE,
         };
     }, [hovered, result.type, selected]);
-    return (jsx_runtime_1.jsxs("div", { ref: ref, style: style, onClick: result.onSelected, children: [result.type === 'composition' ? (result.compositionType === 'still' ? (jsx_runtime_1.jsx(still_1.StillIcon, { color: selected || hovered ? colors_1.WHITE : colors_1.LIGHT_TEXT, style: iconStyle })) : (jsx_runtime_1.jsx(video_1.FilmIcon, { color: selected || hovered ? colors_1.WHITE : colors_1.LIGHT_TEXT, style: iconStyle }))) : result.type === 'asset' ? (jsx_runtime_1.jsx(AssetFileIcon_1.AssetFileIcon, { fileType: result.fileType, color: selected || hovered ? colors_1.WHITE : colors_1.LIGHT_TEXT, style: iconStyle })) : null, jsx_runtime_1.jsx(layout_1.Spacing, { x: 1 }), jsx_runtime_1.jsx("div", { style: labelContainer, children: result.type === 'search-result' ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
+    return (jsx_runtime_1.jsxs("div", { ref: ref, style: style, onClick: result.onSelected, children: [result.type === 'composition' ? (result.compositionType === 'still' ? (jsx_runtime_1.jsx(still_1.StillIcon, { color: selected || hovered ? colors_1.WHITE : colors_1.LIGHT_TEXT, style: iconStyle })) : (jsx_runtime_1.jsx(video_1.FilmIcon, { color: selected || hovered ? colors_1.WHITE : colors_1.LIGHT_TEXT, style: iconStyle }))) : result.type === 'asset' ? (jsx_runtime_1.jsx(AssetFileIcon_1.AssetFileIcon, { fileType: result.fileType, color: selected || hovered ? colors_1.WHITE : colors_1.LIGHT_TEXT, style: iconStyle })) : result.type === 'select-file' ? (jsx_runtime_1.jsx(upload_1.UploadIcon, { color: selected || hovered ? colors_1.WHITE : colors_1.LIGHT_TEXT, style: selectFileIconStyle })) : null, jsx_runtime_1.jsx(layout_1.Spacing, { x: 1 }), jsx_runtime_1.jsx("div", { style: labelContainer, children: result.type === 'search-result' ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
                         jsx_runtime_1.jsx("div", { 
                             // eslint-disable-next-line react/no-danger
                             dangerouslySetInnerHTML: {

package/dist/components/RenderButton.d.ts

@@ -3,4 +3,5 @@ export type RenderType = 'server-render' | 'client-render' | 'render-command';
 export declare const RenderButton: React.FC<{
     readonly readOnlyStudio: boolean;
     readonly size?: 'default' | 'compact';
+    readonly hidden: boolean;
 }>;

package/dist/components/RenderButton.js

@@ -123,7 +123,7 @@ const getInitialRenderType = (readOnlyStudio) => {
     }
     return 'server-render';
 };
-const RenderButton = ({ readOnlyStudio, size: controlSize = 'default' }) => {
+const RenderButton = ({ readOnlyStudio, size: controlSize = 'default', hidden }) => {
     const { inFrame, outFrame } = (0, in_out_1.useTimelineInOutFramePosition)();
     const { setSelectedModal } = (0, react_1.useContext)(modals_1.ModalsContext);
     const [preferredRenderType, setPreferredRenderType] = (0, react_1.useState)(() => getInitialRenderType(readOnlyStudio));
@@ -437,15 +437,17 @@ const RenderButton = ({ readOnlyStudio, size: controlSize = 'default' }) => {
         return null;
     }
     return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
-            jsx_runtime_1.jsx("button", { style: { display: 'none' }, id: "render-modal-button-server", disabled: !canServerRender, onClick: () => openServerRenderModal(false), type: "button" }), ' ', jsx_runtime_1.jsx("button", { style: { display: 'none' }, id: "render-modal-button-client", onClick: openClientRenderModal, type: "button" }), jsx_runtime_1.jsxs("div", { ref: containerRef, style: containerStyle, title: tooltip, children: [
-                    jsx_runtime_1.jsx("button", { type: "button", style: controlSize === 'compact' ? compactMainButtonStyle : mainButtonStyle, onClick: onClick, id: "render-modal-button", children: jsx_runtime_1.jsxs(layout_1.Row, { align: "center", style: controlSize === 'compact'
+            jsx_runtime_1.jsx("button", { style: { display: 'none' }, id: "render-modal-button-server", disabled: !canServerRender, onClick: () => openServerRenderModal(false), type: "button" }), ' ', jsx_runtime_1.jsx("button", { style: { display: 'none' }, id: "render-modal-button-client", onClick: openClientRenderModal, type: "button" }), jsx_runtime_1.jsx("button", { style: { display: 'none' }, id: "render-modal-button-command", onClick: () => openServerRenderModal(true), type: "button" }), hidden ? (jsx_runtime_1.jsx("button", { style: { display: 'none' }, onClick: onClick, id: "render-modal-button", type: "button" })) : (jsx_runtime_1.jsxs("div", { ref: containerRef, style: containerStyle, title: tooltip, children: [
+                    jsx_runtime_1.jsx("button", { type: "button", style: controlSize === 'compact'
+                            ? compactMainButtonStyle
+                            : mainButtonStyle, onClick: onClick, id: "render-modal-button", children: jsx_runtime_1.jsxs(layout_1.Row, { align: "center", style: controlSize === 'compact'
                                 ? compactMainButtonContent
                                 : mainButtonContent, children: [
                                 jsx_runtime_1.jsx(render_1.ThinRenderIcon, { fill: colors_1.CURRENT_COLOR_LOWERCASE, svgProps: iconStyle }), jsx_runtime_1.jsx(layout_1.Spacing, { x: controlSize === 'compact' ? 0.75 : 1 }), jsx_runtime_1.jsx("span", { style: controlSize === 'compact' ? compactLabel : label, children: renderLabel })
                             ] }) }), jsx_runtime_1.jsx("div", { style: dividerStyle }), jsx_runtime_1.jsx("button", { ref: dropdownRef, type: "button", style: controlSize === 'compact'
                             ? compactDropdownTriggerStyle
                             : dropdownTriggerStyle, className: is_menu_item_1.MENU_INITIATOR_CLASSNAME, onPointerDown: onPointerDown, onClick: onClickDropdown, children: jsx_runtime_1.jsx(caret_1.CaretDown, {}) })
-                ] }), portalStyle
+                ] })), portalStyle
                 ? react_dom_1.default.createPortal(jsx_runtime_1.jsx("div", { style: styles_1.fullScreenOverlay, children: jsx_runtime_1.jsx("div", { style: styles_1.outerPortal, className: "css-reset", children: jsx_runtime_1.jsx(z_index_1.HigherZIndex, { onOutsideClick: onHideDropdown, onEscape: onHideDropdown, children: jsx_runtime_1.jsx("div", { style: portalStyle, onPointerDown: onMenuPointerDown, children: jsx_runtime_1.jsx(MenuContent_1.MenuContent, { onNextMenu: () => { }, onPreviousMenu: () => { }, values: dropdownValues, onHide: onHideDropdown, leaveLeftSpace: false, preselectIndex: dropdownValues.findIndex((v) => v.id === renderType), topItemCanBeUnselected: false, fixedHeight: derivedMaxHeight }) }) }) }) }), (0, portals_1.getPortal)(currentZIndex))
                 : null] }));
 };

package/dist/components/RenderModal/InlineEyeIcon.js

@@ -13,6 +13,6 @@ const InlineEyeButton = ({ onClick, enabled }) => {
     const renderAction = (0, react_1.useCallback)((color) => {
         return enabled ? (jsx_runtime_1.jsx("svg", { style: clearIcon, viewBox: "0 0 640 512", children: jsx_runtime_1.jsx("path", { fill: color, d: "M25.9 3.4C19-2 8.9-.8 3.4 6.1S-.8 23.1 6.1 28.6l608 480c6.9 5.5 17 4.3 22.5-2.6s4.3-17-2.6-22.5L25.9 3.4zM605.5 268.3c3.3-7.9 3.3-16.7 0-24.6c-14.9-35.7-46.2-87.7-93-131.1C465.5 68.8 400.8 32 320 32c-51.2 0-96 14.8-133.9 36.8l27.3 21.5C244.6 74.2 280.2 64 320 64c70.4 0 127.7 32 170.8 72c43.1 40 71.9 88 85.2 120c-9.2 22.1-25.9 52-49.5 81.5l25.1 19.8c25.6-32 43.7-64.4 53.9-89zM88.4 154.7c-25.6 32-43.7 64.4-53.9 89c-3.3 7.9-3.3 16.7 0 24.6c14.9 35.7 46.2 87.7 93 131.1C174.5 443.2 239.2 480 320 480c51.2 0 96-14.8 133.9-36.8l-27.3-21.5C395.4 437.8 359.8 448 320 448c-70.4 0-127.7-32-170.8-72C106.1 336 77.3 288 64 256c9.2-22.1 25.9-52 49.5-81.5L88.4 154.7zM320 384c16.7 0 32.7-3.2 47.4-9.1l-30.9-24.4c-5.4 .9-10.9 1.4-16.5 1.4c-51 0-92.8-39.8-95.8-90.1l-30.9-24.4c-.9 6-1.3 12.2-1.3 18.5c0 70.7 57.3 128 128 128zM448 256c0-70.7-57.3-128-128-128c-16.7 0-32.7 3.2-47.4 9.1l30.9 24.4c5.4-.9 10.9-1.4 16.5-1.4c51 0 92.8 39.8 95.8 90.1l30.9 24.4c.9-6 1.3-12.2 1.3-18.5z" }) })) : (jsx_runtime_1.jsx("svg", { style: clearIcon, viewBox: "0 0 576 512", children: jsx_runtime_1.jsx("path", { fill: color, d: "M117.2 136C160.3 96 217.6 64 288 64s127.7 32 170.8 72c43.1 40 71.9 88 85.2 120c-13.3 32-42.1 80-85.2 120c-43.1 40-100.4 72-170.8 72s-127.7-32-170.8-72C74.1 336 45.3 288 32 256c13.3-32 42.1-80 85.2-120zM288 32c-80.8 0-145.5 36.8-192.6 80.6C48.6 156 17.3 208 2.5 243.7c-3.3 7.9-3.3 16.7 0 24.6C17.3 304 48.6 356 95.4 399.4C142.5 443.2 207.2 480 288 480s145.5-36.8 192.6-80.6c46.8-43.5 78.1-95.4 93-131.1c3.3-7.9 3.3-16.7 0-24.6c-14.9-35.7-46.2-87.7-93-131.1C433.5 68.8 368.8 32 288 32zM192 256a96 96 0 1 1 192 0 96 96 0 1 1 -192 0zm224 0a128 128 0 1 0 -256 0 128 128 0 1 0 256 0z" }) }));
     }, [enabled]);
-    return jsx_runtime_1.jsx(InlineAction_1.InlineAction, { renderAction: renderAction, onClick: onClick });
+    return (jsx_runtime_1.jsx(InlineAction_1.InlineAction, { renderAction: renderAction, onClick: onClick, variant: null }));
 };
 exports.InlineEyeButton = InlineEyeButton;

package/dist/components/RenderModal/InlineRemoveButton.js

@@ -13,6 +13,6 @@ const InlineRemoveButton = ({ onClick }) => {
     const renderAction = (0, react_1.useCallback)((color) => {
         return (jsx_runtime_1.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 320 512", style: clearIcon, children: jsx_runtime_1.jsx("path", { d: "M310.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L160 210.7 54.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L114.7 256 9.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L160 301.3 265.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L205.3 256 310.6 150.6z", fill: color }) }));
     }, []);
-    return jsx_runtime_1.jsx(InlineAction_1.InlineAction, { renderAction: renderAction, onClick: onClick });
+    return (jsx_runtime_1.jsx(InlineAction_1.InlineAction, { renderAction: renderAction, onClick: onClick, variant: null }));
 };
 exports.InlineRemoveButton = InlineRemoveButton;

package/dist/components/RenderModal/RenderModalOutputName.js

@@ -44,7 +44,7 @@ const RenderModalOutputName = ({ existence, inputStyle, outName, onValueChange,
                                 jsx_runtime_1.jsx(layout_1.Spacing, { y: 1, block: true }), jsx_runtime_1.jsx(ValidationMessage_1.ValidationMessage, { align: "flex-end", message: validationMessage, type: 'error' })
                             ] })) : existence ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
                                 jsx_runtime_1.jsx(layout_1.Spacing, { y: 1, block: true }), jsx_runtime_1.jsx(ValidationMessage_1.ValidationMessage, { align: "flex-end", message: jsx_runtime_1.jsxs("span", { style: existsMessageStyle, children: [
-                                            jsx_runtime_1.jsx(InlineAction_1.InlineAction, { onClick: openExistingOutput, renderAction: renderOpenIcon, title: `Open in ${fileManagerName}` }),
+                                            jsx_runtime_1.jsx(InlineAction_1.InlineAction, { variant: null, onClick: openExistingOutput, renderAction: renderOpenIcon, title: `Open in ${fileManagerName}` }),
                                             "Exists, will be overwritten"] }), type: 'warning' })
                             ] })) : null] }) })
         ] }));

package/dist/components/RenderModal/SchemaEditor/SchemaResetButton.js

@@ -13,6 +13,6 @@ const SchemaResetButton = ({ onClick }) => {
     const renderAction = (0, react_1.useCallback)((color) => {
         return (jsx_runtime_1.jsx("svg", { style: icon, viewBox: "0 0 512 512", children: jsx_runtime_1.jsx("path", { fill: color, d: "M48.5 224H40c-13.3 0-24-10.7-24-24V72c0-9.7 5.8-18.5 14.8-22.2s19.3-1.7 26.2 5.2L98.6 96.6c87.6-86.5 228.7-86.2 315.8 1c87.5 87.5 87.5 229.3 0 316.8s-229.3 87.5-316.8 0c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0c62.5 62.5 163.8 62.5 226.3 0s62.5-163.8 0-226.3c-62.2-62.2-162.7-62.5-225.3-1L185 183c6.9 6.9 8.9 17.2 5.2 26.2s-12.5 14.8-22.2 14.8H48.5z" }) }));
     }, []);
-    return jsx_runtime_1.jsx(InlineAction_1.InlineAction, { renderAction: renderAction, onClick: onClick });
+    return (jsx_runtime_1.jsx(InlineAction_1.InlineAction, { renderAction: renderAction, onClick: onClick, variant: null }));
 };
 exports.SchemaResetButton = SchemaResetButton;

package/dist/components/RenderQueue/RenderQueueCopyToClipboard.js

@@ -53,6 +53,6 @@ const RenderQueueCopyToClipboard = ({ job }) => {
             (0, NotificationCenter_1.showNotification)(`Could not copy to clipboard: ${err.message}`, 2000);
         }
     }, [job.outName]);
-    return (jsx_runtime_1.jsx(InlineAction_1.InlineAction, { title: "Copy to clipboard", renderAction: renderCopyAction, onClick: onClick }));
+    return (jsx_runtime_1.jsx(InlineAction_1.InlineAction, { variant: null, title: "Copy to clipboard", renderAction: renderCopyAction, onClick: onClick }));
 };
 exports.RenderQueueCopyToClipboard = RenderQueueCopyToClipboard;

package/dist/components/RenderQueue/RenderQueueDownloadItem.js

@@ -31,6 +31,6 @@ const RenderQueueDownloadItem = ({ job }) => {
     const renderAction = (0, react_1.useCallback)((color) => {
         return (jsx_runtime_1.jsx("svg", { style: icon, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 512 512", children: jsx_runtime_1.jsx("path", { fill: color, d: "M288 32c0-17.7-14.3-32-32-32s-32 14.3-32 32l0 242.7-73.4-73.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l128 128c12.5 12.5 32.8 12.5 45.3 0l128-128c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L288 274.7 288 32zM64 352c-35.3 0-64 28.7-64 64l0 32c0 35.3 28.7 64 64 64l384 0c35.3 0 64-28.7 64-64l0-32c0-35.3-28.7-64-64-64l-101.5 0-45.3 45.3c-25 25-65.5 25-90.5 0L165.5 352 64 352zm368 56a24 24 0 1 1 0 48 24 24 0 1 1 0-48z" }) }));
     }, [icon]);
-    return (jsx_runtime_1.jsx(InlineAction_1.InlineAction, { renderAction: renderAction, onClick: onClick, title: "Download" }));
+    return (jsx_runtime_1.jsx(InlineAction_1.InlineAction, { variant: null, renderAction: renderAction, onClick: onClick, title: "Download" }));
 };
 exports.RenderQueueDownloadItem = RenderQueueDownloadItem;

package/dist/components/RenderQueue/RenderQueueItemCancelButton.js

@@ -30,6 +30,6 @@ const RenderQueueCancelButton = ({ job }) => {
     const renderAction = (0, react_1.useCallback)((color) => {
         return (jsx_runtime_1.jsx("svg", { style: icon, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 512 512", children: jsx_runtime_1.jsx("path", { fill: color, d: "M367.2 412.5L99.5 144.8C77.1 176.1 64 214.5 64 256c0 106 86 192 192 192c41.5 0 79.9-13.1 111.2-35.5zm45.3-45.3C434.9 335.9 448 297.5 448 256c0-106-86-192-192-192c-41.5 0-79.9 13.1-111.2 35.5L412.5 367.2zM512 256c0 141.4-114.6 256-256 256S0 397.4 0 256S114.6 0 256 0S512 114.6 512 256z" }) }));
     }, [icon]);
-    return jsx_runtime_1.jsx(InlineAction_1.InlineAction, { renderAction: renderAction, onClick: onClick });
+    return (jsx_runtime_1.jsx(InlineAction_1.InlineAction, { renderAction: renderAction, onClick: onClick, variant: null }));
 };
 exports.RenderQueueCancelButton = RenderQueueCancelButton;

package/dist/components/RenderQueue/RenderQueueOpenInFolder.js

@@ -24,6 +24,6 @@ const RenderQueueOpenInFinderItem = ({ job }) => {
     const renderAction = (0, react_1.useCallback)((color) => {
         return jsx_runtime_1.jsx(folder_1.ExpandedFolderIconSolid, { style: icon, color: color });
     }, [icon]);
-    return jsx_runtime_1.jsx(InlineAction_1.InlineAction, { renderAction: renderAction, onClick: onClick });
+    return (jsx_runtime_1.jsx(InlineAction_1.InlineAction, { renderAction: renderAction, onClick: onClick, variant: null }));
 };
 exports.RenderQueueOpenInFinderItem = RenderQueueOpenInFinderItem;

package/dist/components/RenderQueue/RenderQueueRemoveItem.js

@@ -46,6 +46,6 @@ const RenderQueueRemoveItem = ({ job }) => {
     const renderAction = (0, react_1.useCallback)((color) => {
         return (jsx_runtime_1.jsx("svg", { style: icon, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 320 512", children: jsx_runtime_1.jsx("path", { fill: color, d: "M310.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L160 210.7 54.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L114.7 256 9.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L160 301.3 265.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L205.3 256 310.6 150.6z" }) }));
     }, [icon]);
-    return jsx_runtime_1.jsx(InlineAction_1.InlineAction, { renderAction: renderAction, onClick: onClick });
+    return (jsx_runtime_1.jsx(InlineAction_1.InlineAction, { renderAction: renderAction, onClick: onClick, variant: null }));
 };
 exports.RenderQueueRemoveItem = RenderQueueRemoveItem;

package/dist/components/RenderQueue/RenderQueueRepeat.js

@@ -44,6 +44,6 @@ const RenderQueueRepeatItem = ({ job }) => {
     const renderAction = (0, react_1.useCallback)((color) => {
         return (jsx_runtime_1.jsx("svg", { style: icon, viewBox: "0 0 512 512", children: jsx_runtime_1.jsx("path", { fill: color, d: "M386.3 160H336c-17.7 0-32 14.3-32 32s14.3 32 32 32H464c17.7 0 32-14.3 32-32V64c0-17.7-14.3-32-32-32s-32 14.3-32 32v51.2L414.4 97.6c-87.5-87.5-229.3-87.5-316.8 0s-87.5 229.3 0 316.8s229.3 87.5 316.8 0c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0c-62.5 62.5-163.8 62.5-226.3 0s-62.5-163.8 0-226.3s163.8-62.5 226.3 0L386.3 160z" }) }));
     }, [icon]);
-    return jsx_runtime_1.jsx(InlineAction_1.InlineAction, { onClick: onClick, renderAction: renderAction });
+    return (jsx_runtime_1.jsx(InlineAction_1.InlineAction, { onClick: onClick, renderAction: renderAction, variant: null }));
 };
 exports.RenderQueueRepeatItem = RenderQueueRepeatItem;

package/dist/components/SelectedOutlineCropControls.js

@@ -38,6 +38,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = __importStar(require("react"));
 const remotion_1 = require("remotion");
 const colors_1 = require("../helpers/colors");
+const pointer_session_1 = require("../helpers/pointer-session");
 const ForceSpecificCursor_1 = require("./ForceSpecificCursor");
 const NotificationCenter_1 = require("./Notifications/NotificationCenter");
 const selected_outline_drag_1 = require("./selected-outline-drag");
@@ -232,9 +233,6 @@ const CropHandle = ({ handle, outline, onDraggingChange, target }) => {
             }
         };
         const onPointerUp = () => {
-            window.removeEventListener('pointermove', onPointerMove);
-            window.removeEventListener('pointerup', onPointerUp);
-            window.removeEventListener('pointercancel', onPointerUp);
             if (dragStarted) {
                 (0, ForceSpecificCursor_1.stopForcingSpecificCursor)();
                 onDraggingChange(false);
@@ -270,9 +268,12 @@ const CropHandle = ({ handle, outline, onDraggingChange, target }) => {
                 clearDragOverrides(cropDrag.nodePath);
             });
         };
-        window.addEventListener('pointermove', onPointerMove);
-        window.addEventListener('pointerup', onPointerUp);
-        window.addEventListener('pointercancel', onPointerUp);
+        (0, pointer_session_1.startPointerSession)({
+            event,
+            target: event.currentTarget,
+            onMove: onPointerMove,
+            onEnd: onPointerUp,
+        });
     }, [
         clearDragOverrides,
         cropDrag,

package/dist/components/SelectedOutlineElement.js

@@ -45,6 +45,7 @@ const get_connected_compositions_1 = require("../helpers/get-connected-compositi
 const get_sequence_double_click_action_1 = require("../helpers/get-sequence-double-click-action");
 const interactivity_enabled_1 = require("../helpers/interactivity-enabled");
 const open_in_editor_1 = require("../helpers/open-in-editor");
+const pointer_session_1 = require("../helpers/pointer-session");
 const editor_snapping_1 = require("../state/editor-snapping");
 const modals_1 = require("../state/modals");
 const call_api_1 = require("./call-api");
@@ -227,9 +228,6 @@ const SelectedOutlineTransformOriginHandle = ({ outline, onDraggingChange, targe
             updateFromPointerPosition();
         };
         const onPointerUp = () => {
-            window.removeEventListener('pointermove', onPointerMove);
-            window.removeEventListener('pointerup', onPointerUp);
-            window.removeEventListener('pointercancel', onPointerUp);
             window.removeEventListener('keydown', onKeyChange);
             window.removeEventListener('keyup', onKeyChange);
             (0, ForceSpecificCursor_1.stopForcingSpecificCursor)();
@@ -272,9 +270,12 @@ const SelectedOutlineTransformOriginHandle = ({ outline, onDraggingChange, targe
                 clearDragOverrides(transformOriginDrag.nodePath);
             });
         };
-        window.addEventListener('pointermove', onPointerMove);
-        window.addEventListener('pointerup', onPointerUp);
-        window.addEventListener('pointercancel', onPointerUp);
+        (0, pointer_session_1.startPointerSession)({
+            event,
+            target: event.currentTarget,
+            onMove: onPointerMove,
+            onEnd: onPointerUp,
+        });
         window.addEventListener('keydown', onKeyChange);
         window.addEventListener('keyup', onKeyChange);
     }, [
@@ -437,9 +438,6 @@ const SelectedOutlinePolygon = ({ allDragTargets, allDragOutlines, contextMenuVa
             updateDragOverrides();
         };
         const onPointerUp = () => {
-            window.removeEventListener('pointermove', onPointerMove);
-            window.removeEventListener('pointerup', onPointerUp);
-            window.removeEventListener('pointercancel', onPointerUp);
             window.removeEventListener('keydown', onKeyChange);
             window.removeEventListener('keyup', onKeyChange);
             if (dragStarted) {
@@ -486,9 +484,12 @@ const SelectedOutlinePolygon = ({ allDragTargets, allDragOutlines, contextMenuVa
                 (0, selected_outline_drag_1.clearSelectedOutlineDragOverrides)({ clearDragOverrides, dragStates });
             });
         };
-        window.addEventListener('pointermove', onPointerMove);
-        window.addEventListener('pointerup', onPointerUp);
-        window.addEventListener('pointercancel', onPointerUp);
+        (0, pointer_session_1.startPointerSession)({
+            event,
+            target: event.currentTarget,
+            onMove: onPointerMove,
+            onEnd: onPointerUp,
+        });
         window.addEventListener('keydown', onKeyChange);
         window.addEventListener('keyup', onKeyChange);
     }, [
@@ -648,9 +649,6 @@ const SelectedOutlineScaleEdgeLine = ({ allScaleDragTargets, contextMenuValues,
             }
         };
         const onPointerUp = () => {
-            window.removeEventListener('pointermove', onPointerMove);
-            window.removeEventListener('pointerup', onPointerUp);
-            window.removeEventListener('pointercancel', onPointerUp);
             if (dragStarted) {
                 (0, ForceSpecificCursor_1.stopForcingSpecificCursor)();
                 onDraggingChange(false);
@@ -701,9 +699,12 @@ const SelectedOutlineScaleEdgeLine = ({ allScaleDragTargets, contextMenuValues,
                 });
             });
         };
-        window.addEventListener('pointermove', onPointerMove);
-        window.addEventListener('pointerup', onPointerUp);
-        window.addEventListener('pointercancel', onPointerUp);
+        (0, pointer_session_1.startPointerSession)({
+            event,
+            target: event.currentTarget,
+            onMove: onPointerMove,
+            onEnd: onPointerUp,
+        });
     }, [
         allScaleDragTargets,
         clearDragOverrides,
@@ -864,9 +865,6 @@ const SelectedOutlineRotationCornerHandle = ({ allRotationDragTargets, contextMe
             }
         };
         const onPointerUp = () => {
-            window.removeEventListener('pointermove', onPointerMove);
-            window.removeEventListener('pointerup', onPointerUp);
-            window.removeEventListener('pointercancel', onPointerUp);
             window.removeEventListener('keydown', onKeyChange);
             window.removeEventListener('keyup', onKeyChange);
             if (dragStarted) {
@@ -919,9 +917,12 @@ const SelectedOutlineRotationCornerHandle = ({ allRotationDragTargets, contextMe
                 });
             });
         };
-        window.addEventListener('pointermove', onPointerMove);
-        window.addEventListener('pointerup', onPointerUp);
-        window.addEventListener('pointercancel', onPointerUp);
+        (0, pointer_session_1.startPointerSession)({
+            event,
+            target: event.currentTarget,
+            onMove: onPointerMove,
+            onEnd: onPointerUp,
+        });
         window.addEventListener('keydown', onKeyChange);
         window.addEventListener('keyup', onKeyChange);
     }, [
@@ -1003,7 +1004,7 @@ const SelectedOutlineElement = ({ allDragTargets, allDragOutlines, allRotationDr
             if (originalLocation === null) {
                 return;
             }
-            await (0, open_in_editor_1.openOriginalPositionInEditor)(originalLocation);
+            await (0, open_in_editor_1.openOriginalPositionInEditor)(originalLocation, null);
         };
         openTargetInEditor().catch((err) => {
             (0, NotificationCenter_1.showNotification)(err.message, 2000);
@@ -1050,6 +1051,7 @@ const SelectedOutlineElement = ({ allDragTargets, allDragOutlines, allRotationDr
             deleteDisabled: sourceEditDisabled,
             disableInteractivityDisabled,
             duplicateDisabled: sourceEditDisabled,
+            editorInfo: null,
             fileLocation,
             includeSourceEditItems: sourceEditingEnabled,
             onDeleteSequenceFromSource: async () => {
@@ -1107,7 +1109,7 @@ const SelectedOutlineElement = ({ allDragTargets, allDragOutlines, allRotationDr
                 if (!originalLocation) {
                     return;
                 }
-                (0, open_in_editor_1.openOriginalPositionInEditor)(originalLocation).catch((err) => {
+                (0, open_in_editor_1.openOriginalPositionInEditor)(originalLocation, null).catch((err) => {
                     (0, NotificationCenter_1.showNotification)(err.message, 2000);
                 });
             },