@remotion/studio 4.0.504 → 4.0.506

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

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

package/dist/api/install-package.js

@@ -11,9 +11,7 @@ const installPackages = (dependencies) => {
         throw new Error('installPackages() is not available in Read-Only Studio');
     }
     return (0, call_api_1.callApi)('/api/install-package', {
-        dependencies: dependencies.map((dependency) => typeof dependency === 'string'
-            ? { name: dependency, version: null }
-            : dependency),
+        dependencies: [...dependencies],
     });
 };
 exports.installPackages = installPackages;

package/dist/api/visual-control.d.ts

@@ -1,2 +1,5 @@
 import { type VisualControlRef } from '../visual-controls/VisualControls';
+/**
+ * @deprecated Remotion Studio now has integrated interactivity for most components, and we will further develop this interactivity rather than visual controls.
+ */
 export declare const visualControl: VisualControlRef['globalVisualControl'];

package/dist/api/visual-control.js

@@ -5,6 +5,9 @@ const react_1 = require("react");
 const remotion_1 = require("remotion");
 const visual_control_store_1 = require("../visual-controls/visual-control-store");
 const VisualControls_1 = require("../visual-controls/VisualControls");
+/**
+ * @deprecated Remotion Studio now has integrated interactivity for most components, and we will further develop this interactivity rather than visual controls.
+ */
 const visualControl = (key, value, schema) => {
     // Subscribe to store changes so the calling component
     // re-renders when a visual control value is edited in the sidebar.

package/dist/components/AssetSelectorItem.js

@@ -260,7 +260,7 @@ const AssetSelectorItem = ({ item, tabIndex, level, parentFolder, readOnlyStudio
     const fileManagerName = (0, get_file_manager_name_1.getFileManagerName)(window.remotion_fileSystemPlatform);
     const [hovered, setHovered] = (0, react_1.useState)(false);
     const [isDragging, setIsDragging] = (0, react_1.useState)(false);
-    const { setSelectedModal } = (0, react_1.useContext)(modals_1.ModalsContext);
+    const { setSelectedModal } = (0, react_1.useContext)(modals_1.SetSelectedModalContext);
     const confirm = (0, ConfirmationDialog_1.useConfirmationDialog)();
     const connectionStatus = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx)
         .previewServerState.type;
@@ -424,7 +424,7 @@ const AssetSelectorItem = ({ item, tabIndex, level, parentFolder, readOnlyStudio
             relativePath,
         });
     }, [relativePath, setSelectedModal]);
-    const contextMenu = (0, react_1.useMemo)(() => {
+    const getContextMenuItems = (0, react_1.useCallback)(() => {
         return (0, exports.getAssetContextMenuItems)({
             relativePath,
             fileManagerName,
@@ -455,7 +455,7 @@ const AssetSelectorItem = ({ item, tabIndex, level, parentFolder, readOnlyStudio
         e.stopPropagation();
         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: [
+    return (jsx_runtime_1.jsx(ContextMenu_1.ContextMenu, { getItems: getContextMenuItems, 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: 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 })

package/dist/components/AudioWaveform.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import type { LoopDisplay } from 'remotion';
-export declare const AudioWaveform: React.FC<{
+export declare const AudioWaveform: React.NamedExoticComponent<{
     readonly src: string;
     readonly height: number;
     readonly visualizationWidth: number;

package/dist/components/AudioWaveform.js

@@ -1,9 +1,42 @@
 "use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.AudioWaveform = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const timeline_utils_1 = require("@remotion/timeline-utils");
-const react_1 = require("react");
+const react_1 = __importStar(require("react"));
 const remotion_1 = require("remotion");
 const colors_1 = require("../helpers/colors");
 const timeline_layout_1 = require("../helpers/timeline-layout");
@@ -76,7 +109,7 @@ const drawLoopedWaveform = ({ canvas, peaks, volume, visualizationWidth, loopWid
     ctx.fillStyle = pattern;
     ctx.fillRect(0, 0, w, h);
 };
-const AudioWaveform = ({ src, height, startFrom, durationInFrames, visualizationWidth, volume, doesVolumeChange, playbackRate, loopDisplay, }) => {
+const AudioWaveformInner = ({ src, height, startFrom, durationInFrames, visualizationWidth, volume, doesVolumeChange, playbackRate, loopDisplay, }) => {
     const [peaks, setPeaks] = (0, react_1.useState)(null);
     const [error, setError] = (0, react_1.useState)(null);
     const [waveformCanvasKey, setWaveformCanvasKey] = (0, react_1.useState)(0);
@@ -300,4 +333,4 @@ const AudioWaveform = ({ src, height, startFrom, durationInFrames, visualization
     return (jsx_runtime_1.jsxs("div", { style: getContainerStyle(height), children: [
             jsx_runtime_1.jsx("canvas", { ref: waveformCanvas, style: waveformCanvasStyle }, waveformCanvasKey), shouldRenderVolumeOverlay ? (jsx_runtime_1.jsx("canvas", { ref: volumeCanvas, style: volumeCanvasStyle })) : null] }));
 };
-exports.AudioWaveform = AudioWaveform;
+exports.AudioWaveform = react_1.default.memo(AudioWaveformInner);

package/dist/components/Canvas.js

@@ -869,6 +869,7 @@ const Canvas = ({ canvasContent, size }) => {
                 event,
                 fps: config.fps,
                 from: (0, imperative_state_1.getCurrentFrame)(),
+                preferCompositionStart: true,
             });
         }
         finally {
@@ -966,6 +967,7 @@ const Canvas = ({ canvasContent, size }) => {
                 destinationDimensions: contentDimensions === 'none' ? null : contentDimensions,
                 dropPosition,
                 from: null,
+                preferCompositionStart: null,
                 svgImportMode,
             });
         }

package/dist/components/CompositionContextButton.d.ts

@@ -2,5 +2,5 @@ import React from 'react';
 import type { ComboboxValue } from './NewComposition/ComboBox';
 export declare const CompositionContextButton: React.FC<{
     readonly visible: boolean;
-    readonly values: ComboboxValue[];
+    readonly getItems: () => ComboboxValue[];
 }>;

package/dist/components/CompositionContextButton.js

@@ -6,7 +6,7 @@ const react_1 = require("react");
 const client_id_1 = require("../helpers/client-id");
 const ellipsis_1 = require("../icons/ellipsis");
 const InlineDropdown_1 = require("./InlineDropdown");
-const CompositionContextButton = ({ visible, values }) => {
+const CompositionContextButton = ({ visible, getItems }) => {
     const iconStyle = (0, react_1.useMemo)(() => {
         return {
             style: {
@@ -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, variant: null }));
+    return (jsx_runtime_1.jsx(InlineDropdown_1.InlineDropdown, { renderAction: renderAction, getItems: getItems, variant: null }));
 };
 exports.CompositionContextButton = CompositionContextButton;

package/dist/components/CompositionSelector.js

@@ -87,10 +87,10 @@ const getAutoScrollSpeed = ({ clientY, element, }) => {
 const CompositionSelector = () => {
     const { compositions, canvasContent, folders } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
     const { foldersExpanded } = (0, react_1.useContext)(persist_open_folders_1.ExpandedFoldersContext);
-    const { setSelectedModal } = (0, react_1.useContext)(modals_1.ModalsContext);
+    const { setSelectedModal } = (0, react_1.useContext)(modals_1.SetSelectedModalContext);
     const connectionStatus = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx)
         .previewServerState.type;
-    const rootContextMenuItems = (0, react_1.useMemo)(() => {
+    const getRootContextMenuItems = (0, react_1.useCallback)(() => {
         return (0, root_composition_menu_items_1.getRootCompositionMenuItems)({
             connectionStatus,
             readOnlyStudio: window.remotion_isReadOnlyStudio,
@@ -234,7 +234,7 @@ const CompositionSelector = () => {
         }
     }, [compositions, stopCompositionListAutoScroll]);
     return (jsx_runtime_1.jsxs("div", { style: container, children: [
-            jsx_runtime_1.jsx(ContextMenu_1.ContextMenuForTarget, { triggerRef: listRef, values: rootContextMenuItems, onOpen: null }), jsx_runtime_1.jsx(ExplorerQuickSwitcherTrigger_1.ExplorerQuickSwitcherTrigger, { mode: "compositions", showShortcut: true, tabIndex: tabIndex }), jsx_runtime_1.jsx("div", { ref: listRef, className: "__remotion-vertical-scrollbar", style: list, onDragOverCapture: onCompositionListDragOverCapture, onDragEndCapture: stopCompositionListAutoScroll, onDragOver: onRootDragOver, onDragLeave: onRootDragLeave, onDropCapture: stopCompositionListAutoScroll, onDrop: onRootDrop, children: items.map((c) => {
+            jsx_runtime_1.jsx(ContextMenu_1.ContextMenuForTarget, { triggerRef: listRef, getItems: getRootContextMenuItems }), jsx_runtime_1.jsx(ExplorerQuickSwitcherTrigger_1.ExplorerQuickSwitcherTrigger, { mode: "compositions", showShortcut: true, tabIndex: tabIndex }), jsx_runtime_1.jsx("div", { ref: listRef, className: "__remotion-vertical-scrollbar", style: list, onDragOverCapture: onCompositionListDragOverCapture, onDragEndCapture: stopCompositionListAutoScroll, onDragOver: onRootDragOver, onDragLeave: onRootDragLeave, onDropCapture: stopCompositionListAutoScroll, onDrop: onRootDrop, children: items.map((c) => {
                     return (jsx_runtime_1.jsx(CompositionSelectorItem_1.CompositionSelectorItem, { level: 0, currentComposition: canvasContent && canvasContent.type === 'composition'
                             ? canvasContent.compositionId
                             : null, selectComposition: selectComposition, toggleFolder: toggleFolder, clearRootDragHover: clearRootDragHover, tabIndex: tabIndex, item: c }, c.key + c.type));

package/dist/components/CompositionSelectorItem.js

@@ -116,11 +116,11 @@ const CompositionSelectorItem = ({ item, level, currentComposition, tabIndex, se
             onClick(evt);
         }
     }, [onClick]);
-    const { setSelectedModal } = (0, react_1.useContext)(modals_1.ModalsContext);
+    const { setSelectedModal } = (0, react_1.useContext)(modals_1.SetSelectedModalContext);
     const connectionStatus = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx)
         .previewServerState.type;
     const resolvedLocation = (0, use_resolved_stack_1.useResolvedStack)(item.type === 'composition' ? item.composition.stack : item.folder.stack);
-    const contextMenu = (0, react_1.useMemo)(() => {
+    const getContextMenuItems = (0, react_1.useCallback)(() => {
         if (item.type === 'composition') {
             return (0, composition_menu_items_1.getCompositionContextMenuItems)({
                 closeMenu: noop_1.noop,
@@ -241,13 +241,13 @@ const CompositionSelectorItem = ({ item, level, currentComposition, tabIndex, se
     }, [clearRootDragHover, item, toggleFolder]);
     if (item.type === 'folder') {
         return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
-                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", { style: style, className: "__remotion-composition-selector-item", onPointerEnter: onPointerEnter, onPointerLeave: onPointerLeave, tabIndex: tabIndex, onClick: onClick, onKeyDown: onKeyDown, onDragOver: onFolderDragOver, onDragLeave: onFolderDragLeave, onDrop: onFolderDrop, title: item.folderName, role: "button", children: [item.expanded ? (jsx_runtime_1.jsx(folder_1.ExpandedFolderIcon, { style: iconStyle, color: hovered || selected ? colors_1.WHITE : colors_1.LIGHT_TEXT })) : (jsx_runtime_1.jsx(folder_1.CollapsedFolderIcon, { color: hovered || selected ? colors_1.WHITE : colors_1.LIGHT_TEXT, style: iconStyle })), jsx_runtime_1.jsx(layout_1.Spacing, { x: 1 }), jsx_runtime_1.jsx("div", { style: label, children: item.folderName }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.5 }), jsx_runtime_1.jsx(CompositionContextButton_1.CompositionContextButton, { values: contextMenu, visible: hovered })
+                jsx_runtime_1.jsx(ContextMenu_1.ContextMenu, { getItems: getContextMenuItems, children: jsx_runtime_1.jsx(layout_1.Row, { align: "center", children: jsx_runtime_1.jsxs("div", { style: style, className: "__remotion-composition-selector-item", onPointerEnter: onPointerEnter, onPointerLeave: onPointerLeave, tabIndex: tabIndex, onClick: onClick, onKeyDown: onKeyDown, onDragOver: onFolderDragOver, onDragLeave: onFolderDragLeave, onDrop: onFolderDrop, title: item.folderName, role: "button", children: [item.expanded ? (jsx_runtime_1.jsx(folder_1.ExpandedFolderIcon, { style: iconStyle, color: hovered || selected ? colors_1.WHITE : colors_1.LIGHT_TEXT })) : (jsx_runtime_1.jsx(folder_1.CollapsedFolderIcon, { color: hovered || selected ? colors_1.WHITE : colors_1.LIGHT_TEXT, style: iconStyle })), jsx_runtime_1.jsx(layout_1.Spacing, { x: 1 }), jsx_runtime_1.jsx("div", { style: label, children: item.folderName }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.5 }), jsx_runtime_1.jsx(CompositionContextButton_1.CompositionContextButton, { getItems: getContextMenuItems, visible: hovered })
                             ] }) }) }), item.expanded ? (jsx_runtime_1.jsx("div", { onDragOver: onFolderChildListDragOver, onDrop: onFolderDrop, children: item.items.map((childItem) => {
                         return (jsx_runtime_1.jsx(exports.CompositionSelectorItem, { currentComposition: currentComposition, selectComposition: selectComposition, item: childItem, tabIndex: tabIndex, level: level + 1, toggleFolder: toggleFolder, clearRootDragHover: clearRootDragHover }, childItem.key + childItem.type));
                     }) })) : null] }));
     }
-    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("a", { ref: compositionRowRef, style: style, onPointerEnter: onPointerEnter, onPointerLeave: onPointerLeave, tabIndex: tabIndex, onClick: onClick, onKeyDown: onKeyDown, draggable: !window.remotion_isReadOnlyStudio, onDragStart: onCompositionDragStart, onDragEnd: onCompositionDragEnd, type: "button", title: item.composition.id, className: "__remotion-composition __remotion-composition-selector-item", "data-compname": item.composition.id, children: [
-                    jsx_runtime_1.jsx(CompositionOrStillIcon_1.CompositionOrStillIcon, { composition: item.composition, color: hovered || selected ? colors_1.WHITE : colors_1.LIGHT_TEXT, style: iconStyle }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 1 }), jsx_runtime_1.jsx("div", { style: label, children: item.composition.id }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.5 }), jsx_runtime_1.jsx(CompositionContextButton_1.CompositionContextButton, { values: contextMenu, visible: hovered && !isDragging }), jsx_runtime_1.jsx(SidebarRenderButton_1.SidebarRenderButton, { visible: hovered && !isDragging, composition: item.composition })
+    return (jsx_runtime_1.jsx(ContextMenu_1.ContextMenu, { getItems: getContextMenuItems, children: jsx_runtime_1.jsx(layout_1.Row, { align: "center", children: jsx_runtime_1.jsxs("a", { ref: compositionRowRef, style: style, onPointerEnter: onPointerEnter, onPointerLeave: onPointerLeave, tabIndex: tabIndex, onClick: onClick, onKeyDown: onKeyDown, draggable: !window.remotion_isReadOnlyStudio, onDragStart: onCompositionDragStart, onDragEnd: onCompositionDragEnd, type: "button", title: item.composition.id, className: "__remotion-composition __remotion-composition-selector-item", "data-compname": item.composition.id, children: [
+                    jsx_runtime_1.jsx(CompositionOrStillIcon_1.CompositionOrStillIcon, { composition: item.composition, color: hovered || selected ? colors_1.WHITE : colors_1.LIGHT_TEXT, style: iconStyle }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 1 }), jsx_runtime_1.jsx("div", { style: label, children: item.composition.id }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.5 }), jsx_runtime_1.jsx(CompositionContextButton_1.CompositionContextButton, { getItems: getContextMenuItems, visible: hovered && !isDragging }), jsx_runtime_1.jsx(SidebarRenderButton_1.SidebarRenderButton, { visible: hovered && !isDragging, composition: item.composition })
                 ] }) }) }));
 };
 exports.CompositionSelectorItem = CompositionSelectorItem;

package/dist/components/ConfigureDefaultEditorModal.d.ts

@@ -1,2 +1,4 @@
 import React from 'react';
-export declare const ConfigureDefaultEditorModal: React.FC;
+export declare const DefaultEditorSettings: React.FC<{
+    readonly onSaved: () => void;
+}>;

package/dist/components/ConfigureDefaultEditorModal.js

@@ -1,24 +1,26 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ConfigureDefaultEditorModal = void 0;
+exports.DefaultEditorSettings = 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 SettingsModalFooter_1 = require("./SettingsModalFooter");
+const container = {
+    display: 'flex',
+    flex: 1,
+    flexDirection: 'column',
+    minWidth: 0,
+};
 const content = {
+    flex: 1,
     padding: 16,
-    width: 440,
-    maxWidth: 'calc(100vw - 40px)',
 };
 const description = {
     color: colors_1.LIGHT_TEXT,
@@ -27,6 +29,13 @@ const description = {
     lineHeight: 1.5,
     margin: 0,
 };
+const title = {
+    color: colors_1.WHITE,
+    fontFamily: 'sans-serif',
+    fontSize: 14,
+    lineHeight: 1.5,
+    margin: 0,
+};
 const comboBoxStyle = {
     boxSizing: 'border-box',
     width: '100%',
@@ -53,10 +62,11 @@ const customEditorName = {
     lineHeight: 'inherit',
 };
 const NO_PREFERENCE_ID = 'no-preference';
-const ConfigureDefaultEditorModal = () => {
-    const { setSelectedModal } = (0, react_1.useContext)(modals_1.ModalsContext);
+const DefaultEditorSettings = ({ onSaved }) => {
     const [editorInfo, setEditorInfo] = (0, react_1.useState)(null);
+    const [codingAgentInfo, setCodingAgentInfo] = (0, react_1.useState)(null);
     const [selectedEditor, setSelectedEditor] = (0, react_1.useState)(null);
+    const [selectedCodingAgent, setSelectedCodingAgent] = (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)(() => {
@@ -95,17 +105,56 @@ const ConfigureDefaultEditorModal = () => {
         });
         return [noPreference, ...installedEditors];
     }, [editorInfo === null || editorInfo === void 0 ? void 0 : editorInfo.installedEditors, selectedEditor]);
-    const dismiss = (0, react_1.useCallback)(() => {
-        setSelectedModal(null);
-    }, [setSelectedModal]);
+    const codingAgentValues = (0, react_1.useMemo)(() => {
+        var _a;
+        const noPreference = {
+            id: NO_PREFERENCE_ID,
+            keyHint: null,
+            label: 'No preference',
+            leftItem: selectedCodingAgent === null ? jsx_runtime_1.jsx(Checkmark_1.Checkmark, {}) : null,
+            onClick: () => {
+                setSelectedCodingAgent(null);
+                setError(null);
+            },
+            quickSwitcherLabel: null,
+            subMenu: null,
+            type: 'item',
+            value: NO_PREFERENCE_ID,
+        };
+        const installedCodingAgents = ((_a = codingAgentInfo === null || codingAgentInfo === void 0 ? void 0 : codingAgentInfo.installedCodingAgents) !== null && _a !== void 0 ? _a : []).map((codingAgent) => {
+            return {
+                id: codingAgent.id,
+                keyHint: null,
+                label: codingAgent.name,
+                leftItem: selectedCodingAgent === codingAgent.id ? jsx_runtime_1.jsx(Checkmark_1.Checkmark, {}) : null,
+                onClick: () => {
+                    setSelectedCodingAgent(codingAgent.id);
+                    setError(null);
+                },
+                quickSwitcherLabel: null,
+                subMenu: null,
+                type: 'item',
+                value: codingAgent.id,
+            };
+        });
+        return [noPreference, ...installedCodingAgents];
+    }, [codingAgentInfo === null || codingAgentInfo === void 0 ? void 0 : codingAgentInfo.installedCodingAgents, selectedCodingAgent]);
     (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
+        Promise.all([
+            (0, call_api_1.callApi)('/api/default-editor-info', {}, controller.signal),
+            (0, call_api_1.callApi)('/api/default-coding-agent-info', {}, controller.signal),
+        ])
+            .then(([editorResponse, codingAgentResponse]) => {
+            setEditorInfo(editorResponse);
+            setSelectedEditor(editorResponse.defaultEditor !== null &&
+                editorResponse.installedEditors.some(({ id }) => id === editorResponse.defaultEditor)
+                ? editorResponse.defaultEditor
+                : null);
+            setCodingAgentInfo(codingAgentResponse);
+            setSelectedCodingAgent(codingAgentResponse.defaultCodingAgent !== null &&
+                codingAgentResponse.installedCodingAgents.some(({ id }) => id === codingAgentResponse.defaultCodingAgent)
+                ? codingAgentResponse.defaultCodingAgent
                 : null);
         })
             .catch((err) => {
@@ -117,35 +166,44 @@ const ConfigureDefaultEditorModal = () => {
         return () => controller.abort();
     }, []);
     const submit = (0, react_1.useCallback)(async () => {
-        if (editorInfo === null) {
+        if (editorInfo === null || codingAgentInfo === null) {
             return;
         }
         setIsSubmitting(true);
         setError(null);
         try {
-            const response = await (0, call_api_1.callApi)('/api/update-default-editor', {
+            const editorResponse = await (0, call_api_1.callApi)('/api/update-default-editor', {
                 defaultEditor: selectedEditor,
             });
-            if (!response.success) {
-                setError(response.reason);
+            if (!editorResponse.success) {
+                setError(editorResponse.reason);
+                setIsSubmitting(false);
+                return;
+            }
+            const codingAgentResponse = await (0, call_api_1.callApi)('/api/update-default-coding-agent', { defaultCodingAgent: selectedCodingAgent });
+            if (!codingAgentResponse.success) {
+                setError(codingAgentResponse.reason);
                 setIsSubmitting(false);
                 return;
             }
-            dismiss();
+            onSaved();
         }
         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: [
+    }, [
+        codingAgentInfo,
+        editorInfo,
+        onSaved,
+        selectedCodingAgent,
+        selectedEditor,
+    ]);
+    return (jsx_runtime_1.jsxs("div", { style: container, children: [
+            jsx_runtime_1.jsxs("div", { style: content, children: [
+                    jsx_runtime_1.jsx("p", { style: title, children: "Default editor" }), jsx_runtime_1.jsx("p", { style: description, children: "Used when Remotion Studio opens source files." }), jsx_runtime_1.jsx(layout_1.Spacing, { y: 1, block: true }), editorInfo === null && error === null ? (jsx_runtime_1.jsx("p", { style: description, children: "Loading installed editors..." })) : null, (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" })), jsx_runtime_1.jsx(layout_1.Spacing, { y: 2, block: true }), jsx_runtime_1.jsx("p", { style: title, children: "Default coding agent" }), jsx_runtime_1.jsx("p", { style: description, children: "Used when Remotion Studio hands a project to a coding agent." }), jsx_runtime_1.jsx(layout_1.Spacing, { y: 1, block: true }), codingAgentInfo === null && error === null ? (jsx_runtime_1.jsx("p", { style: description, children: "Loading installed coding agents..." })) : null, (codingAgentInfo === null || codingAgentInfo === void 0 ? void 0 : codingAgentInfo.installedCodingAgents.length) === 0 ? (jsx_runtime_1.jsx("p", { style: description, children: "No supported coding agents were found on this computer." })) : null, codingAgentInfo === null ? null : (jsx_runtime_1.jsx(ComboBox_1.Combobox, { values: codingAgentValues, selectedId: selectedCodingAgent !== null && selectedCodingAgent !== void 0 ? selectedCodingAgent : NO_PREFERENCE_ID, style: comboBoxStyle, title: "Default coding agent" })), 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' }) }) })
+                        ] })) : null] }), jsx_runtime_1.jsx(SettingsModalFooter_1.SettingsModalFooter, { children: jsx_runtime_1.jsx(ModalButton_1.ModalButton, { onClick: submit, disabled: isSubmitting || editorInfo === null || codingAgentInfo === null, children: isSubmitting ? 'Saving...' : 'Save and reload' }) })
         ] }));
 };
-exports.ConfigureDefaultEditorModal = ConfigureDefaultEditorModal;
+exports.DefaultEditorSettings = DefaultEditorSettings;

package/dist/components/ConfigureLicenseModal.d.ts

@@ -1,4 +1,5 @@
 import React from 'react';
-export declare const ConfigureLicenseModal: React.FC<{
+export declare const LicenseSettings: React.FC<{
     readonly initialPublicLicenseKey: string | null;
+    readonly onSaved: () => void;
 }>;

package/dist/components/ConfigureLicenseModal.js

@@ -1,24 +1,26 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ConfigureLicenseModal = void 0;
+exports.LicenseSettings = 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 call_api_1 = require("./call-api");
 const Checkbox_1 = require("./Checkbox");
 const layout_1 = require("./layout");
 const LicenseKeyValidation_1 = require("./LicenseKeyValidation");
 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 ValidationMessage_1 = require("./NewComposition/ValidationMessage");
+const SettingsModalFooter_1 = require("./SettingsModalFooter");
+const container = {
+    display: 'flex',
+    flex: 1,
+    flexDirection: 'column',
+    minWidth: 0,
+};
 const content = {
+    flex: 1,
     padding: 16,
-    width: 540,
-    maxWidth: 'calc(100vw - 40px)',
 };
 const description = {
     color: colors_1.LIGHT_TEXT,
@@ -26,7 +28,6 @@ const description = {
     fontSize: 14,
     lineHeight: 1.5,
     margin: 0,
-    marginTop: 10,
 };
 const descriptionLink = {
     color: colors_1.WHITE,
@@ -59,8 +60,7 @@ const inputLabel = {
     marginBottom: 6,
     marginTop: 10,
 };
-const ConfigureLicenseModal = ({ initialPublicLicenseKey }) => {
-    const { setSelectedModal } = (0, react_1.useContext)(modals_1.ModalsContext);
+const LicenseSettings = ({ initialPublicLicenseKey, onSaved }) => {
     const initialLicenseType = initialPublicLicenseKey === 'free-license'
         ? 'free'
         : initialPublicLicenseKey === null
@@ -73,17 +73,16 @@ const ConfigureLicenseModal = ({ initialPublicLicenseKey }) => {
     const [isValidatingLicenseKey, setIsValidatingLicenseKey] = (0, react_1.useState)(false);
     const [remoteValidationMessage, setRemoteValidationMessage] = (0, react_1.useState)(null);
     const [licenseKeyDetails, setLicenseKeyDetails] = (0, react_1.useState)(null);
-    const dismiss = (0, react_1.useCallback)(() => {
-        setSelectedModal(null);
-    }, [setSelectedModal]);
-    const chooseFreeLicense = (0, react_1.useCallback)(() => {
-        setLicenseType('free');
-        setError(null);
-    }, []);
-    const chooseCompanyLicense = (0, react_1.useCallback)(() => {
-        setLicenseType('company');
+    const toggleLicenseType = (0, react_1.useCallback)((newLicenseType) => {
+        setLicenseType((currentLicenseType) => currentLicenseType === newLicenseType ? null : newLicenseType);
         setError(null);
     }, []);
+    const toggleFreeLicense = (0, react_1.useCallback)(() => {
+        toggleLicenseType('free');
+    }, [toggleLicenseType]);
+    const toggleCompanyLicense = (0, react_1.useCallback)(() => {
+        toggleLicenseType('company');
+    }, [toggleLicenseType]);
     const publicLicenseKey = (0, react_1.useMemo)(() => {
         if (licenseType === 'free') {
             return 'free-license';
@@ -153,20 +152,29 @@ const ConfigureLicenseModal = ({ initialPublicLicenseKey }) => {
                 setIsSubmitting(false);
                 return;
             }
-            dismiss();
+            onSaved();
         }
         catch (err) {
             setError(err.message);
             setIsSubmitting(false);
         }
-    }, [companyLicenseKeyIsValid, dismiss, licenseType, publicLicenseKey]);
-    return (jsx_runtime_1.jsxs(ModalContainer_1.ModalContainer, { onEscape: dismiss, onOutsideClick: dismiss, children: [
-            jsx_runtime_1.jsx(ModalHeader_1.ModalHeader, { title: "Configure License", onClose: dismiss }), jsx_runtime_1.jsxs("div", { style: content, children: [
-                    jsx_runtime_1.jsxs("p", { style: description, children: ["Remotion is free if you are an individual or company with a headcount of 3 or less. See", ' ', jsx_runtime_1.jsx("a", { style: descriptionLink, href: "https://remotion.dev/license", children: "LICENSE.md" }),
-                            "."] }), jsx_runtime_1.jsx(layout_1.Spacing, { y: 2 }), jsx_runtime_1.jsxs("div", { style: checkboxRow, onClick: chooseFreeLicense, children: [
-                            jsx_runtime_1.jsx(Checkbox_1.Checkbox, { checked: licenseType === 'free', onChange: chooseFreeLicense, name: "free-license", rounded: true }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 1 }), jsx_runtime_1.jsx("div", { style: checkboxLabel, children: "I am eligible for the Free License" })
-                        ] }), jsx_runtime_1.jsxs("div", { style: checkboxRow, onClick: chooseCompanyLicense, children: [
-                            jsx_runtime_1.jsx(Checkbox_1.Checkbox, { checked: licenseType === 'company', onChange: chooseCompanyLicense, name: "company-license", rounded: true }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 1 }), jsx_runtime_1.jsx("div", { style: checkboxLabel, children: "I need a Company License" })
+    }, [companyLicenseKeyIsValid, licenseType, onSaved, publicLicenseKey]);
+    return (jsx_runtime_1.jsxs("div", { style: container, children: [
+            jsx_runtime_1.jsxs("div", { style: content, children: [
+                    jsx_runtime_1.jsxs("p", { style: description, children: ["Remotion is free to use if you are an individual or company with a headcount of 3 or less.",
+                            jsx_runtime_1.jsx("br", {}),
+                            "If used in an organization with 4 people or more, a", ' ', jsx_runtime_1.jsx("a", { style: descriptionLink, href: "https://remotion.pro/license", children: "Company License" }), ' needs to be obtained.'] }), jsx_runtime_1.jsx(layout_1.Spacing, { y: 2 }), jsx_runtime_1.jsxs("div", { style: checkboxRow, onClick: (event) => {
+                            if (!(event.target instanceof HTMLInputElement)) {
+                                toggleFreeLicense();
+                            }
+                        }, children: [
+                            jsx_runtime_1.jsx(Checkbox_1.Checkbox, { checked: licenseType === 'free', onChange: toggleFreeLicense, name: "free-license", rounded: true }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 1 }), jsx_runtime_1.jsx("div", { style: checkboxLabel, children: "I am eligible for the Free License" })
+                        ] }), jsx_runtime_1.jsxs("div", { style: checkboxRow, onClick: (event) => {
+                            if (!(event.target instanceof HTMLInputElement)) {
+                                toggleCompanyLicense();
+                            }
+                        }, children: [
+                            jsx_runtime_1.jsx(Checkbox_1.Checkbox, { checked: licenseType === 'company', onChange: toggleCompanyLicense, name: "company-license", rounded: true }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 1 }), jsx_runtime_1.jsx("div", { style: checkboxLabel, children: "I need a Company License" })
                         ] }), licenseType === 'company' ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
                             jsx_runtime_1.jsxs("p", { style: description, children: ["Visit", ' ', jsx_runtime_1.jsx("a", { style: descriptionLink, href: "https://remotion.pro/license", children: "remotion.pro/license" }), ' ', "to obtain a license key. Enter the public license key from", ' "License Keys".'] }), jsx_runtime_1.jsxs("label", { style: inputLabel, children: ["Public license key",
                                     jsx_runtime_1.jsx(RemInput_1.RemotionInput, { status: localLicenseKeyValidation.message ||
@@ -186,9 +194,9 @@ const ConfigureLicenseModal = ({ initialPublicLicenseKey }) => {
                                     jsx_runtime_1.jsx(layout_1.Spacing, { y: 1 }), jsx_runtime_1.jsx("p", { style: description, children: "Loading license key details..." })
                                 ] })) : null, licenseKeyDetails ? (jsx_runtime_1.jsx(LicenseKeyValidation_1.LicenseKeyDetailsDisplay, { details: licenseKeyDetails })) : null] })) : null, 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 ||
-                            publicLicenseKey.length === 0 ||
-                            (licenseType === 'company' && !companyLicenseKeyIsValid), autoFocus: licenseType !== 'company', children: isSubmitting ? 'Submitting...' : 'Submit and reload' }) }) })
+                        ] })) : null] }), jsx_runtime_1.jsx(SettingsModalFooter_1.SettingsModalFooter, { children: jsx_runtime_1.jsx(ModalButton_1.ModalButton, { onClick: submit, disabled: isSubmitting ||
+                        publicLicenseKey.length === 0 ||
+                        (licenseType === 'company' && !companyLicenseKeyIsValid), autoFocus: licenseType !== 'company', children: isSubmitting ? 'Submitting...' : 'Submit and reload' }) })
         ] }));
 };
-exports.ConfigureLicenseModal = ConfigureLicenseModal;
+exports.LicenseSettings = LicenseSettings;

package/dist/components/ConfirmationDialog.js

@@ -23,7 +23,7 @@ const footerStyle = {
     minWidth: 0,
 };
 const useConfirmationDialog = () => {
-    const { setSelectedModal } = (0, react_1.useContext)(modals_1.ModalsContext);
+    const { setSelectedModal } = (0, react_1.useContext)(modals_1.SetSelectedModalContext);
     return (0, react_1.useCallback)((options) => {
         return new Promise((resolve) => {
             var _a, _b;
@@ -50,7 +50,7 @@ const useConfirmationDialog = () => {
 };
 exports.useConfirmationDialog = useConfirmationDialog;
 const ConfirmationDialog = ({ state }) => {
-    const { setSelectedModal } = (0, react_1.useContext)(modals_1.ModalsContext);
+    const { setSelectedModal } = (0, react_1.useContext)(modals_1.SetSelectedModalContext);
     const settledRef = (0, react_1.useRef)(false);
     const closeCurrentModal = (0, react_1.useCallback)(() => {
         setSelectedModal((modal) => (modal === null || modal === void 0 ? void 0 : modal.type) === 'confirmation-dialog' && modal.id === state.id

package/dist/components/ContextMenu.d.ts

@@ -1,12 +1,11 @@
 import React from 'react';
 import type { ComboboxValue } from './NewComposition/ComboBox';
-type ContextMenuOpenHandler = () => false | void;
-type ContextMenuTargetOpenResult = false | void | readonly ComboboxValue[];
-type ContextMenuTargetOpenHandler = (event: MouseEvent) => ContextMenuTargetOpenResult | Promise<ContextMenuTargetOpenResult>;
+type ContextMenuItemsResult = false | readonly ComboboxValue[];
+export type ContextMenuItemsFactory = (event: MouseEvent) => ContextMenuItemsResult | Promise<ContextMenuItemsResult>;
+export declare const resolveContextMenuItems: (getItems: ContextMenuItemsFactory, event: MouseEvent) => Promise<readonly ComboboxValue[] | null>;
 type ContextMenuProps = {
     readonly children: React.ReactNode;
-    readonly values: ComboboxValue[];
-    readonly onOpen: ContextMenuOpenHandler | null;
+    readonly getItems: ContextMenuItemsFactory;
     readonly style?: React.CSSProperties;
     readonly className?: string;
     readonly onPointerDown?: React.PointerEventHandler<HTMLDivElement>;
@@ -14,7 +13,6 @@ type ContextMenuProps = {
 export declare const ContextMenu: React.ForwardRefExoticComponent<ContextMenuProps & React.RefAttributes<HTMLDivElement>>;
 export declare const ContextMenuForTarget: React.FC<{
     readonly triggerRef: React.RefObject<HTMLElement | SVGElement | null>;
-    readonly values: ComboboxValue[];
-    readonly onOpen: ContextMenuTargetOpenHandler | null;
+    readonly getItems: ContextMenuItemsFactory;
 }>;
 export {};