@remotion/studio 4.0.502 → 4.0.504

package/dist/api/install-package.d.ts

@@ -1,2 +1,3 @@
+import type { ElementDependency } from '@remotion/studio-protocol';
 import type { InstallPackageResponse } from '@remotion/studio-shared';
-export declare const installPackages: (packageNames: string[]) => Promise<InstallPackageResponse>;
+export declare const installPackages: (dependencies: (string | ElementDependency)[]) => Promise<InstallPackageResponse>;

package/dist/api/install-package.js

@@ -3,13 +3,17 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.installPackages = void 0;
 const remotion_1 = require("remotion");
 const call_api_1 = require("../components/call-api");
-const installPackages = (packageNames) => {
+const installPackages = (dependencies) => {
     if (!(0, remotion_1.getRemotionEnvironment)().isStudio) {
         throw new Error('installPackages() is only available in the Studio');
     }
     if (window.remotion_isReadOnlyStudio) {
         throw new Error('installPackages() is not available in Read-Only Studio');
     }
-    return (0, call_api_1.callApi)('/api/install-package', { packageNames });
+    return (0, call_api_1.callApi)('/api/install-package', {
+        dependencies: dependencies.map((dependency) => typeof dependency === 'string'
+            ? { name: dependency, version: null }
+            : dependency),
+    });
 };
 exports.installPackages = installPackages;

package/dist/components/AssetSelectorItem.js

@@ -46,7 +46,6 @@ const colors_1 = require("../helpers/colors");
 const copy_text_1 = require("../helpers/copy-text");
 const get_file_manager_name_1 = require("../helpers/get-file-manager-name");
 const get_preview_file_type_1 = require("../helpers/get-preview-file-type");
-const mobile_layout_1 = require("../helpers/mobile-layout");
 const sidebar_scroll_into_view_1 = require("../helpers/sidebar-scroll-into-view");
 const url_state_1 = require("../helpers/url-state");
 const use_asset_drag_events_1 = __importStar(require("../helpers/use-asset-drag-events"));
@@ -55,7 +54,6 @@ const use_media_metadata_1 = require("../helpers/use-media-metadata");
 const clipboard_1 = require("../icons/clipboard");
 const folder_1 = require("../icons/folder");
 const modals_1 = require("../state/modals");
-const sidebar_1 = require("../state/sidebar");
 const AssetFileIcon_1 = require("./AssetFileIcon");
 const ConfirmationDialog_1 = require("./ConfirmationDialog");
 const ContextMenu_1 = require("./ContextMenu");
@@ -260,10 +258,8 @@ const AssetFolderTree = ({ item, level, name, parentFolder, toggleFolder, tabInd
 exports.AssetFolderTree = AssetFolderTree;
 const AssetSelectorItem = ({ item, tabIndex, level, parentFolder, readOnlyStudio }) => {
     const fileManagerName = (0, get_file_manager_name_1.getFileManagerName)(window.remotion_fileSystemPlatform);
-    const isMobileLayout = (0, mobile_layout_1.useMobileLayout)();
     const [hovered, setHovered] = (0, react_1.useState)(false);
     const [isDragging, setIsDragging] = (0, react_1.useState)(false);
-    const { setSidebarCollapsedState } = (0, react_1.useContext)(sidebar_1.SidebarContext);
     const { setSelectedModal } = (0, react_1.useContext)(modals_1.ModalsContext);
     const confirm = (0, ConfirmationDialog_1.useConfirmationDialog)();
     const connectionStatus = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx)
@@ -303,15 +299,7 @@ const AssetSelectorItem = ({ item, tabIndex, level, parentFolder, readOnlyStudio
         (0, sidebar_scroll_into_view_1.markAssetSidebarScrollFromRowClick)(relativePath);
         setCanvasContent({ type: 'asset', asset: relativePath });
         (0, url_state_1.pushUrl)(`/assets/${relativePath}`);
-        if (isMobileLayout) {
-            setSidebarCollapsedState({ left: 'collapsed', right: 'collapsed' });
-        }
-    }, [
-        isMobileLayout,
-        relativePath,
-        setCanvasContent,
-        setSidebarCollapsedState,
-    ]);
+    }, [relativePath, setCanvasContent]);
     const onDragStart = (0, react_1.useCallback)((e) => {
         var _a, _b, _c, _d;
         if (!canDragAsset) {
@@ -468,8 +456,8 @@ const AssetSelectorItem = ({ item, tabIndex, level, parentFolder, readOnlyStudio
         copyStaticFilePath();
     }, [copyStaticFilePath]);
     return (jsx_runtime_1.jsx(ContextMenu_1.ContextMenu, { values: contextMenu, onOpen: null, children: jsx_runtime_1.jsx(layout_1.Row, { align: "center", children: jsx_runtime_1.jsxs("div", { ref: rowRef, style: style, onPointerEnter: onPointerEnter, onPointerLeave: onPointerLeave, onClick: onClick, draggable: canDragAsset, onDragStart: onDragStart, onDragEnd: onDragEnd, tabIndex: tabIndex, title: item.name, children: [
-                    jsx_runtime_1.jsx(AssetFileIcon_1.AssetFileIcon, { fileType: previewFileType, style: iconStyle, color: colors_1.LIGHT_TEXT }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 1 }), jsx_runtime_1.jsx("div", { style: label, children: item.name }), hovered && !isDragging ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
-                            jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.5 }), jsx_runtime_1.jsx(InlineAction_1.InlineAction, { title: "Copy staticFile() path", renderAction: renderCopyAction, onClick: copyToClipboard }), fileExplorerDisabled ? null : (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
-                                    jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.5 }), jsx_runtime_1.jsx(InlineAction_1.InlineAction, { title: `Show in ${fileManagerName}`, renderAction: renderFileExplorerAction, onClick: revealInExplorer })
+                    jsx_runtime_1.jsx(AssetFileIcon_1.AssetFileIcon, { fileType: previewFileType, style: iconStyle, color: hovered || selected ? colors_1.WHITE : colors_1.LIGHT_TEXT }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 1 }), jsx_runtime_1.jsx("div", { style: label, children: item.name }), hovered && !isDragging ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
+                            jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.5 }), jsx_runtime_1.jsx(InlineAction_1.InlineAction, { variant: null, title: "Copy staticFile() path", renderAction: renderCopyAction, onClick: copyToClipboard }), fileExplorerDisabled ? null : (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
+                                    jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.5 }), jsx_runtime_1.jsx(InlineAction_1.InlineAction, { variant: null, title: `Show in ${fileManagerName}`, renderAction: renderFileExplorerAction, onClick: revealInExplorer })
                                 ] }))] })) : null] }) }) }));
 };

package/dist/components/Canvas.js

@@ -33,6 +33,8 @@ 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_install_request_1 = require("./element-install-request");
+const ElementInstallConfirmation_1 = require("./ElementInstallConfirmation");
 const handle_drop_1 = require("./handle-drop");
 const import_assets_1 = require("./import-assets");
 const layout_1 = require("./layout");
@@ -42,44 +44,7 @@ const ResetZoomButton_1 = require("./ResetZoomButton");
 const SvgImportDialog_1 = require("./SvgImportDialog");
 const imperative_state_1 = require("./Timeline/imperative-state");
 const use_resolved_stack_1 = require("./Timeline/use-resolved-stack");
-const use_element_overwrite_confirmation_1 = require("./use-element-overwrite-confirmation");
-const elementInstallCompositionIdStyle = {
-    fontFamily: 'monospace',
-    fontSize: 13,
-};
-const elementInstallDependencyListStyle = {
-    marginTop: 8,
-    marginBottom: 0,
-    paddingLeft: 24,
-    listStyleType: 'disc',
-};
-const elementInstallDependencyStyle = {
-    color: 'inherit',
-    fontFamily: 'monospace',
-    fontSize: 13,
-    lineHeight: 1.5,
-};
-const elementInstallCodeDetailsStyle = {
-    marginTop: 12,
-    fontSize: 13,
-};
-const elementInstallCodeSummaryStyle = {
-    cursor: 'pointer',
-    fontSize: 13,
-    fontWeight: 500,
-};
-const elementInstallCodeBlockStyle = {
-    marginTop: 8,
-    marginBottom: 0,
-    maxHeight: 240,
-    overflow: 'auto',
-    padding: 12,
-    borderRadius: 6,
-    backgroundColor: 'rgba(255, 255, 255, 0.06)',
-    fontSize: 12,
-    lineHeight: 1.5,
-    whiteSpace: 'pre',
-};
+const elementInstallDependencyIgnoreList = ['react', 'react-dom', 'remotion'];
 const getContainerStyle = (editorZoomGestures) => ({
     flex: 1,
     display: 'flex',
@@ -159,7 +124,6 @@ const Canvas = ({ canvasContent, size }) => {
     const touchPinchRef = (0, react_1.useRef)(null);
     const keybindings = (0, use_keybinding_1.useKeybinding)();
     const confirm = (0, ConfirmationDialog_1.useConfirmationDialog)();
-    const confirmElementOverwrite = (0, use_element_overwrite_confirmation_1.useElementOverwriteConfirmation)();
     const chooseSvgImportMode = (0, SvgImportDialog_1.useSvgImportDialog)();
     const config = remotion_1.Internals.useUnsafeVideoConfig();
     const areRulersVisible = (0, use_is_ruler_visible_1.useIsRulerVisible)();
@@ -646,6 +610,11 @@ const Canvas = ({ canvasContent, size }) => {
             ]);
         });
     }, [previewServerClientId, subscribeToEvent]);
+    (0, react_1.useEffect)(() => {
+        return (0, element_install_request_1.subscribeToElementInstallRequests)((request) => {
+            setPendingElementInstallRequests((requests) => [...requests, request]);
+        });
+    }, []);
     (0, react_1.useEffect)(() => {
         if (activeElementInstallRequest !== null ||
             pendingElementInstallRequests.length === 0) {
@@ -665,17 +634,36 @@ const Canvas = ({ canvasContent, size }) => {
         let canceled = false;
         const handleInstallRequest = async () => {
             setInstallingElementName(activeElementInstallRequest.element.displayName);
-            const missingPackages = (0, install_required_package_1.getMissingPackages)(activeElementInstallRequest.element.dependencies);
+            const preflight = await (0, call_api_1.callApi)('/api/prepare-element-install', {
+                compositionFile: activeElementInstallRequest.compositionFile,
+                compositionId: activeElementInstallRequest.compositionId,
+                element: activeElementInstallRequest.element,
+            });
+            if (!preflight.success) {
+                (0, NotificationCenter_1.showNotification)(`Could not review Element installation: ${preflight.reason}`, 4000);
+                return;
+            }
+            if (canceled) {
+                return;
+            }
+            const declaredDependencies = Array.from(new Map(activeElementInstallRequest.element.dependencies.map((dependency) => [
+                dependency.name,
+                dependency,
+            ])).values());
+            const missingPackages = (0, install_required_package_1.getMissingPackages)(declaredDependencies).map((dependency) => dependency.name);
+            const ignoredDependencies = declaredDependencies.filter((dependency) => elementInstallDependencyIgnoreList.includes(dependency.name) &&
+                !missingPackages.includes(dependency.name));
+            const dependenciesToReview = declaredDependencies
+                .filter((dependency) => !ignoredDependencies.includes(dependency))
+                .map((dependency) => dependency.version === null
+                ? dependency.name
+                : `${dependency.name}@${dependency.version}`);
+            const sourceLabel = activeElementInstallRequest.source.type === 'studio-protocol'
+                ? activeElementInstallRequest.source.origin
+                : 'Unverified drag-and-drop payload';
             const accepted = await confirm({
                 title: 'Install Element',
-                message: (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: ["Install \u201C", activeElementInstallRequest.element.displayName, "\u201D into", ' ', jsx_runtime_1.jsx("code", { style: elementInstallCompositionIdStyle, children: activeElementInstallRequest.compositionId }), ' ', "composition? This will create an Element source file and update the composition source.", missingPackages.length > 0 ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
-                                jsx_runtime_1.jsx("br", {}), jsx_runtime_1.jsx("br", {}),
-                                "The following dependencies will also be installed:",
-                                jsx_runtime_1.jsx("ul", { style: elementInstallDependencyListStyle, children: missingPackages.map((packageName) => (jsx_runtime_1.jsx("li", { style: elementInstallDependencyStyle, children: packageName }, packageName))) })
-                            ] })) : null, jsx_runtime_1.jsxs("details", { style: elementInstallCodeDetailsStyle, children: [
-                                jsx_runtime_1.jsx("summary", { style: elementInstallCodeSummaryStyle, children: "Preview Element source" }), jsx_runtime_1.jsx("pre", { style: elementInstallCodeBlockStyle, children: jsx_runtime_1.jsx("code", { children: activeElementInstallRequest.element.sourceCode }) })
-                            ] })
-                    ] })),
+                message: (jsx_runtime_1.jsx(ElementInstallConfirmation_1.ElementInstallConfirmation, { displayName: activeElementInstallRequest.element.displayName, sourceLabel: sourceLabel, sourceIsUnverified: activeElementInstallRequest.source.type === 'drag-and-drop', compositionId: activeElementInstallRequest.compositionId, filePath: preflight.plan.filePath, overwritesExistingFile: preflight.plan.expectedFileState.exists, dependenciesToReview: dependenciesToReview, missingPackages: missingPackages, sourceCode: activeElementInstallRequest.element.sourceCode })),
                 confirmLabel: 'Install',
                 cancelLabel: 'Cancel',
             });
@@ -684,9 +672,10 @@ const Canvas = ({ canvasContent, size }) => {
                     element: activeElementInstallRequest.element,
                     compositionFile: activeElementInstallRequest.compositionFile,
                     compositionId: activeElementInstallRequest.compositionId,
-                    confirmOverwrite: confirmElementOverwrite,
-                    dropPosition: null,
-                    from: null,
+                    expectedFileState: preflight.plan.expectedFileState,
+                    from: activeElementInstallRequest.from,
+                    position: activeElementInstallRequest.position,
+                    overwriteExisting: preflight.plan.expectedFileState.exists,
                 });
             }
         };
@@ -706,7 +695,7 @@ const Canvas = ({ canvasContent, size }) => {
         return () => {
             canceled = true;
         };
-    }, [activeElementInstallRequest, confirm, confirmElementOverwrite]);
+    }, [activeElementInstallRequest, confirm]);
     const onDragOver = (0, react_1.useCallback)((event) => {
         var _a;
         var _b;
@@ -874,7 +863,6 @@ const Canvas = ({ canvasContent, size }) => {
             await (0, handle_drop_1.handleDrop)({
                 chooseSvgImportMode,
                 compositionFile,
-                confirmElementOverwrite,
                 compositionId: currentCompositionId,
                 destinationDimensions: contentDimensions === 'none' ? null : contentDimensions,
                 dropPosition,
@@ -892,7 +880,6 @@ const Canvas = ({ canvasContent, size }) => {
         cannotAddSequence,
         chooseSvgImportMode,
         compositionFile,
-        confirmElementOverwrite,
         config,
         contentDimensions,
         currentCompositionId,

package/dist/components/CheckboardToggle.js

@@ -21,6 +21,8 @@ const CheckboardToggle = () => {
             return !c;
         });
     }, [setCheckerboard]);
-    return (jsx_runtime_1.jsx(ControlButton_1.ControlButton, { title: accessibilityLabel, "aria-label": accessibilityLabel, onClick: onClick, children: jsx_runtime_1.jsx("svg", { "aria-hidden": "true", focusable: "false", "data-prefix": "fas", "data-icon": "game-board-alt", className: "svg-inline--fa fa-game-board-alt fa-w-16", role: "img", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 512 512", style: { width: 16, height: 16 }, children: jsx_runtime_1.jsx("path", { fill: checkerboard ? colors_1.BLUE : colors_1.WHITE, d: "M480 0H32A32 32 0 0 0 0 32v448a32 32 0 0 0 32 32h448a32 32 0 0 0 32-32V32a32 32 0 0 0-32-32zm-32 256H256v192H64V256h192V64h192z" }) }) }));
+    return (jsx_runtime_1.jsx(ControlButton_1.ControlButton, { title: accessibilityLabel, "aria-label": accessibilityLabel, 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: [
+                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" })
+            ] })) }));
 };
 exports.CheckboardToggle = CheckboardToggle;

package/dist/components/ColorPicker/AlphaSlider.js

@@ -5,6 +5,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const color_conversion_1 = require("../../helpers/color-conversion");
 const colors_1 = require("../../helpers/colors");
+const pointer_session_1 = require("../../helpers/pointer-session");
 const checker_1 = require("./checker");
 const SLIDER_HEIGHT = 12;
 const HANDLE_WIDTH = 8;
@@ -57,16 +58,19 @@ const AlphaSlider = ({ hue, saturation, value, alpha, onChange, onChangeComplete
         }
         e.preventDefault();
         updateFromEvent(e.clientX, false);
-        const onMove = (ev) => {
-            updateFromEvent(ev.clientX, false);
-        };
-        const onUp = (ev) => {
-            window.removeEventListener('pointermove', onMove);
-            window.removeEventListener('pointerup', onUp);
-            updateFromEvent(ev.clientX, true);
-        };
-        window.addEventListener('pointermove', onMove);
-        window.addEventListener('pointerup', onUp);
+        let lastClientX = e.clientX;
+        (0, pointer_session_1.startPointerSession)({
+            event: e.nativeEvent,
+            target: e.currentTarget,
+            onMove: (ev) => {
+                lastClientX = ev.clientX;
+                updateFromEvent(ev.clientX, false);
+            },
+            onEnd: (reason, ev) => {
+                const shouldUseEndEvent = reason === 'pointerup' || reason === 'buttons-released';
+                updateFromEvent(shouldUseEndEvent && ev ? ev.clientX : lastClientX, true);
+            },
+        });
     }, [updateFromEvent]);
     const handleStyle = (0, react_1.useMemo)(() => {
         return {

package/dist/components/ColorPicker/HueSlider.js

@@ -5,6 +5,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const color_conversion_1 = require("../../helpers/color-conversion");
 const colors_1 = require("../../helpers/colors");
+const pointer_session_1 = require("../../helpers/pointer-session");
 const SLIDER_HEIGHT = 12;
 const HANDLE_WIDTH = 8;
 const containerStyle = {
@@ -39,16 +40,19 @@ const HueSlider = ({ hue, onChange, onChangeComplete }) => {
         }
         e.preventDefault();
         updateFromEvent(e.clientX, false);
-        const onMove = (ev) => {
-            updateFromEvent(ev.clientX, false);
-        };
-        const onUp = (ev) => {
-            window.removeEventListener('pointermove', onMove);
-            window.removeEventListener('pointerup', onUp);
-            updateFromEvent(ev.clientX, true);
-        };
-        window.addEventListener('pointermove', onMove);
-        window.addEventListener('pointerup', onUp);
+        let lastClientX = e.clientX;
+        (0, pointer_session_1.startPointerSession)({
+            event: e.nativeEvent,
+            target: e.currentTarget,
+            onMove: (ev) => {
+                lastClientX = ev.clientX;
+                updateFromEvent(ev.clientX, false);
+            },
+            onEnd: (reason, ev) => {
+                const shouldUseEndEvent = reason === 'pointerup' || reason === 'buttons-released';
+                updateFromEvent(shouldUseEndEvent && ev ? ev.clientX : lastClientX, true);
+            },
+        });
     }, [updateFromEvent]);
     const handleStyle = (0, react_1.useMemo)(() => {
         return {

package/dist/components/ColorPicker/SaturationValueArea.js

@@ -5,6 +5,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const color_conversion_1 = require("../../helpers/color-conversion");
 const colors_1 = require("../../helpers/colors");
+const pointer_session_1 = require("../../helpers/pointer-session");
 const AREA_HEIGHT = 140;
 const containerStyle = {
     position: 'relative',
@@ -48,23 +49,24 @@ const SaturationValueArea = ({ hue, saturation, value, onChange, onChangeComplet
         }
     }, [onChange, onChangeComplete]);
     const onPointerDown = (0, react_1.useCallback)((e) => {
-        var _a, _b;
         if (e.button !== 0) {
             return;
         }
         e.preventDefault();
-        (_b = (_a = e.target).setPointerCapture) === null || _b === void 0 ? void 0 : _b.call(_a, e.pointerId);
         updateFromEvent(e.clientX, e.clientY, false);
-        const onMove = (ev) => {
-            updateFromEvent(ev.clientX, ev.clientY, false);
-        };
-        const onUp = (ev) => {
-            window.removeEventListener('pointermove', onMove);
-            window.removeEventListener('pointerup', onUp);
-            updateFromEvent(ev.clientX, ev.clientY, true);
-        };
-        window.addEventListener('pointermove', onMove);
-        window.addEventListener('pointerup', onUp);
+        let lastPosition = { clientX: e.clientX, clientY: e.clientY };
+        (0, pointer_session_1.startPointerSession)({
+            event: e.nativeEvent,
+            target: e.currentTarget,
+            onMove: (ev) => {
+                lastPosition = { clientX: ev.clientX, clientY: ev.clientY };
+                updateFromEvent(ev.clientX, ev.clientY, false);
+            },
+            onEnd: (reason, ev) => {
+                const shouldUseEndEvent = reason === 'pointerup' || reason === 'buttons-released';
+                updateFromEvent(shouldUseEndEvent && ev ? ev.clientX : lastPosition.clientX, shouldUseEndEvent && ev ? ev.clientY : lastPosition.clientY, true);
+            },
+        });
     }, [updateFromEvent]);
     const containerWithBg = (0, react_1.useMemo)(() => {
         return {

package/dist/components/CompositionContextButton.js

@@ -22,6 +22,6 @@ const CompositionContextButton = ({ visible, values }) => {
     if (!visible || connectionStatus !== 'connected') {
         return null;
     }
-    return jsx_runtime_1.jsx(InlineDropdown_1.InlineDropdown, { renderAction: renderAction, values: values });
+    return (jsx_runtime_1.jsx(InlineDropdown_1.InlineDropdown, { renderAction: renderAction, values: values, variant: null }));
 };
 exports.CompositionContextButton = CompositionContextButton;

package/dist/components/CompositionSelectorItem.js

@@ -23,7 +23,7 @@ const actions_1 = require("./RenderQueue/actions");
 const SidebarRenderButton_1 = require("./SidebarRenderButton");
 const use_resolved_stack_1 = require("./Timeline/use-resolved-stack");
 const itemStyle = {
-    paddingRight: 10,
+    paddingRight: 2,
     paddingTop: 5,
     paddingBottom: 5,
     fontSize: 13,
@@ -33,11 +33,10 @@ const itemStyle = {
     alignItems: 'center',
     marginBottom: 1,
     marginLeft: 4,
-    marginRight: 4,
     appearance: 'none',
     border: 'none',
     borderRadius: 4,
-    width: 'calc(100% - 8px)',
+    width: 'calc(100% - 4px)',
     textAlign: 'left',
     backgroundColor: colors_1.BACKGROUND,
     height: layout_1.COMPACT_CONTROL_ROW_HEIGHT,

package/dist/components/ConfigureDefaultEditorModal.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const ConfigureDefaultEditorModal: React.FC;

package/dist/components/ConfigureDefaultEditorModal.js

@@ -0,0 +1,151 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ConfigureDefaultEditorModal = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const colors_1 = require("../helpers/colors");
+const Checkmark_1 = require("../icons/Checkmark");
+const custom_editor_1 = require("../icons/custom-editor");
+const modals_1 = require("../state/modals");
+const call_api_1 = require("./call-api");
+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 ComboBox_1 = require("./NewComposition/ComboBox");
+const ValidationMessage_1 = require("./NewComposition/ValidationMessage");
+const content = {
+    padding: 16,
+    width: 440,
+    maxWidth: 'calc(100vw - 40px)',
+};
+const description = {
+    color: colors_1.LIGHT_TEXT,
+    fontFamily: 'sans-serif',
+    fontSize: 14,
+    lineHeight: 1.5,
+    margin: 0,
+};
+const comboBoxStyle = {
+    boxSizing: 'border-box',
+    width: '100%',
+};
+const customEditorLabel = {
+    display: 'inline-flex',
+    alignItems: 'center',
+    gap: 8,
+    maxWidth: '100%',
+    minWidth: 0,
+    color: 'inherit',
+    fontFamily: 'inherit',
+    fontSize: 'inherit',
+    lineHeight: 'inherit',
+};
+const customEditorName = {
+    minWidth: 0,
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+    whiteSpace: 'nowrap',
+    color: 'inherit',
+    fontFamily: 'inherit',
+    fontSize: 'inherit',
+    lineHeight: 'inherit',
+};
+const NO_PREFERENCE_ID = 'no-preference';
+const ConfigureDefaultEditorModal = () => {
+    const { setSelectedModal } = (0, react_1.useContext)(modals_1.ModalsContext);
+    const [editorInfo, setEditorInfo] = (0, react_1.useState)(null);
+    const [selectedEditor, setSelectedEditor] = (0, react_1.useState)(null);
+    const [isSubmitting, setIsSubmitting] = (0, react_1.useState)(false);
+    const [error, setError] = (0, react_1.useState)(null);
+    const editorValues = (0, react_1.useMemo)(() => {
+        var _a;
+        const noPreference = {
+            id: NO_PREFERENCE_ID,
+            keyHint: null,
+            label: 'No preference',
+            leftItem: selectedEditor === null ? jsx_runtime_1.jsx(Checkmark_1.Checkmark, {}) : null,
+            onClick: () => {
+                setSelectedEditor(null);
+                setError(null);
+            },
+            quickSwitcherLabel: null,
+            subMenu: null,
+            type: 'item',
+            value: NO_PREFERENCE_ID,
+        };
+        const installedEditors = ((_a = editorInfo === null || editorInfo === void 0 ? void 0 : editorInfo.installedEditors) !== null && _a !== void 0 ? _a : []).map((editor) => {
+            return {
+                id: editor.id,
+                keyHint: null,
+                label: editor.id === 'custom' ? (jsx_runtime_1.jsxs("span", { style: customEditorLabel, children: [
+                        jsx_runtime_1.jsx(custom_editor_1.CustomEditorIcon, { size: null }), jsx_runtime_1.jsx("span", { style: customEditorName, children: editor.name })
+                    ] })) : (editor.name),
+                leftItem: selectedEditor === editor.id ? jsx_runtime_1.jsx(Checkmark_1.Checkmark, {}) : null,
+                onClick: () => {
+                    setSelectedEditor(editor.id);
+                    setError(null);
+                },
+                quickSwitcherLabel: null,
+                subMenu: null,
+                type: 'item',
+                value: editor.id,
+            };
+        });
+        return [noPreference, ...installedEditors];
+    }, [editorInfo === null || editorInfo === void 0 ? void 0 : editorInfo.installedEditors, selectedEditor]);
+    const dismiss = (0, react_1.useCallback)(() => {
+        setSelectedModal(null);
+    }, [setSelectedModal]);
+    (0, react_1.useEffect)(() => {
+        const controller = new AbortController();
+        (0, call_api_1.callApi)('/api/default-editor-info', {}, controller.signal)
+            .then((response) => {
+            setEditorInfo(response);
+            setSelectedEditor(response.defaultEditor !== null &&
+                response.installedEditors.some(({ id }) => id === response.defaultEditor)
+                ? response.defaultEditor
+                : null);
+        })
+            .catch((err) => {
+            if (controller.signal.aborted) {
+                return;
+            }
+            setError(err.message);
+        });
+        return () => controller.abort();
+    }, []);
+    const submit = (0, react_1.useCallback)(async () => {
+        if (editorInfo === null) {
+            return;
+        }
+        setIsSubmitting(true);
+        setError(null);
+        try {
+            const response = await (0, call_api_1.callApi)('/api/update-default-editor', {
+                defaultEditor: selectedEditor,
+            });
+            if (!response.success) {
+                setError(response.reason);
+                setIsSubmitting(false);
+                return;
+            }
+            dismiss();
+        }
+        catch (err) {
+            setError(err.message);
+            setIsSubmitting(false);
+        }
+    }, [dismiss, editorInfo, selectedEditor]);
+    if (editorInfo === null && error === null) {
+        return null;
+    }
+    return (jsx_runtime_1.jsxs(ModalContainer_1.ModalContainer, { onEscape: dismiss, onOutsideClick: dismiss, children: [
+            jsx_runtime_1.jsx(ModalHeader_1.ModalHeader, { title: "Configure default editor", onClose: dismiss }), jsx_runtime_1.jsxs("div", { style: content, children: [
+                    jsx_runtime_1.jsx("p", { style: description, children: "This setting gets saved to your config file." }), jsx_runtime_1.jsx(layout_1.Spacing, { y: 2, block: true }), (editorInfo === null || editorInfo === void 0 ? void 0 : editorInfo.installedEditors.length) === 0 ? (jsx_runtime_1.jsx("p", { style: description, children: "No supported editors were found on this computer." })) : null, editorInfo === null ? null : (jsx_runtime_1.jsx(ComboBox_1.Combobox, { values: editorValues, selectedId: selectedEditor !== null && selectedEditor !== void 0 ? selectedEditor : NO_PREFERENCE_ID, style: comboBoxStyle, title: "Default editor" })), error ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
+                            jsx_runtime_1.jsx(layout_1.Spacing, { y: 1.5 }), jsx_runtime_1.jsx(ValidationMessage_1.ValidationMessage, { message: error, align: "flex-start", type: "error" })
+                        ] })) : null] }), jsx_runtime_1.jsx(ModalFooter_1.ModalFooterContainer, { children: jsx_runtime_1.jsx(layout_1.Row, { justify: "flex-end", children: jsx_runtime_1.jsx(ModalButton_1.ModalButton, { onClick: submit, disabled: isSubmitting || editorInfo === null, children: isSubmitting ? 'Saving...' : 'Save and reload' }) }) })
+        ] }));
+};
+exports.ConfigureDefaultEditorModal = ConfigureDefaultEditorModal;

package/dist/components/ConfirmationDialog.js

@@ -15,10 +15,13 @@ const content = {
     padding: 16,
     fontSize: 14,
     flex: 1,
-    minWidth: 420,
-    maxWidth: 560,
+    width: 'min(600px, calc(100vw - 40px))',
+    minWidth: 0,
     lineHeight: 1.4,
 };
+const footerStyle = {
+    minWidth: 0,
+};
 const useConfirmationDialog = () => {
     const { setSelectedModal } = (0, react_1.useContext)(modals_1.ModalsContext);
     return (0, react_1.useCallback)((options) => {
@@ -93,7 +96,7 @@ const ConfirmationDialog = ({ state }) => {
     }, []);
     return (jsx_runtime_1.jsxs(ModalContainer_1.ModalContainer, { onOutsideClick: onCancel, onEscape: onCancel, children: [
             jsx_runtime_1.jsx(ModalHeader_1.ModalHeader, { title: state.title, onClose: onCancel }), jsx_runtime_1.jsxs("form", { onSubmit: onSubmit, children: [
-                    jsx_runtime_1.jsx("div", { style: content, children: state.message }), jsx_runtime_1.jsx(ModalFooter_1.ModalFooterContainer, { children: jsx_runtime_1.jsxs(layout_1.Row, { align: "center", children: [
+                    jsx_runtime_1.jsx("div", { style: content, children: state.message }), jsx_runtime_1.jsx(ModalFooter_1.ModalFooterContainer, { style: footerStyle, children: jsx_runtime_1.jsxs(layout_1.Row, { align: "center", children: [
                                 jsx_runtime_1.jsx(layout_1.Flex, {}), jsx_runtime_1.jsx(Button_1.Button, { onClick: onCancel, style: cancelStyle, children: state.cancelLabel }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 1 }), jsx_runtime_1.jsxs(ModalButton_1.ModalButton, { onClick: onConfirm, autoFocus: true, children: [state.confirmLabel, jsx_runtime_1.jsx(ShortcutHint_1.ShortcutHint, { keyToPress: "\u21B5", cmdOrCtrl: false })
                                     ] })
                             ] }) })

package/dist/components/ContextMenu.js

@@ -47,11 +47,9 @@ const z_index_1 = require("../state/z-index");
 const portals_1 = require("./Menu/portals");
 const styles_1 = require("./Menu/styles");
 const MenuContent_1 = require("./NewComposition/MenuContent");
-const CONTEXT_MENU_Z_INDEX = 1001;
 const contextMenuFullScreenOverlay = {
     ...styles_1.fullScreenOverlay,
     pointerEvents: 'none',
-    zIndex: CONTEXT_MENU_Z_INDEX,
 };
 const contextMenuOuterPortal = {
     ...styles_1.outerPortal,

package/dist/components/ControlButton.d.ts

@@ -1,6 +1,8 @@
 import React from 'react';
+import type { RenderInlineAction } from './InlineAction';
 export declare const CONTROL_BUTTON_PADDING = 6;
-export declare const CONTROL_BUTTON_SIZE = 30;
-export declare const ControlButton: (props: React.ClassAttributes<HTMLButtonElement> & React.ButtonHTMLAttributes<HTMLButtonElement> & {
+export declare const ControlButton: (props: Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "children" | "onClick" | "title"> & {
     readonly title: string;
+    readonly onClick: React.MouseEventHandler<HTMLButtonElement>;
+    readonly children: RenderInlineAction | React.ReactNode;
 }) => import("react/jsx-runtime").JSX.Element;