@remotion/studio 4.0.515 → 4.0.517

package/dist/api/restart-studio.js

@@ -7,10 +7,14 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.restartStudio = void 0;
 const remotion_1 = require("remotion");
 const call_api_1 = require("../components/call-api");
+const browser_studio_operations_1 = require("../helpers/browser-studio-operations");
 const restartStudio = () => {
     if (!(0, remotion_1.getRemotionEnvironment)().isStudio) {
         throw new Error('restartStudio() is only available in the Studio');
     }
+    if ((0, browser_studio_operations_1.getBrowserStudioOperations)() !== null) {
+        throw new Error('restartStudio() is not supported in Browser Studio');
+    }
     if (window.remotion_isReadOnlyStudio) {
         throw new Error('restartStudio() is not available in read-only Studio');
     }

package/dist/components/AssetSelector.js

@@ -135,12 +135,12 @@ const AssetSelector = ({ readOnlyStudio }) => {
                     outputPath: renderOutput.outputPath,
                     assetPath: destination,
                 });
-                (0, NotificationCenter_1.showNotification)(result.created
-                    ? `Created ${destination}`
-                    : `${destination} already exists`, 3000);
+                if (!result.created) {
+                    (0, NotificationCenter_1.showNotification)(`${destination} already exists`, 3000);
+                }
                 return;
             }
-            const { files } = e.dataTransfer;
+            const files = Array.from(e.dataTransfer.files);
             if (files.length === 0) {
                 setDropLocation(null);
                 return;
@@ -164,12 +164,6 @@ const AssetSelector = ({ readOnlyStudio }) => {
                     filePath: makePath(file),
                 });
             }
-            if (files.length === 1) {
-                (0, NotificationCenter_1.showNotification)(`Created ${makePath(files[0])}`, 3000);
-            }
-            else {
-                (0, NotificationCenter_1.showNotification)(`Added ${files.length} files to ${assetPath}`, 3000);
-            }
         }
         catch (error) {
             (0, NotificationCenter_1.showNotification)(`Error during upload: ${error}`, 3000);

package/dist/components/AssetSelectorItem.d.ts

@@ -14,11 +14,12 @@ export declare const getCanDragAsset: ({ readOnlyStudio, relativePath, }: {
     readOnlyStudio: boolean;
     relativePath: string;
 }) => boolean;
-export declare const getAssetContextMenuItems: ({ relativePath, fileManagerName, copyFileName, copyStaticFilePath, openAssetInExplorer, renameAsset, deleteAsset, fileExplorerAvailable, fileExplorerDisabled, mutationsDisabled, }: {
+export declare const getAssetContextMenuItems: ({ relativePath, fileManagerName, copyFileName, copyStaticFilePath, openAssetInConvert, openAssetInExplorer, renameAsset, deleteAsset, fileExplorerAvailable, fileExplorerDisabled, mutationsDisabled, }: {
     relativePath: string;
     fileManagerName: string;
     copyFileName: () => void;
     copyStaticFilePath: () => void;
+    openAssetInConvert: () => void;
     openAssetInExplorer: () => void;
     renameAsset: () => void;
     deleteAsset: () => void;

package/dist/components/AssetSelectorItem.js

@@ -39,13 +39,13 @@ const studio_protocol_1 = require("@remotion/studio-protocol");
 const react_1 = require("react");
 const remotion_1 = require("remotion");
 const no_react_1 = require("remotion/no-react");
-const delete_static_file_1 = require("../api/delete-static-file");
 const browser_studio_operations_1 = require("../helpers/browser-studio-operations");
 const client_id_1 = require("../helpers/client-id");
 const colors_1 = require("../helpers/colors");
 const 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 open_in_remotion_convert_1 = require("../helpers/open-in-remotion-convert");
 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,15 +55,14 @@ const clipboard_1 = require("../icons/clipboard");
 const folder_1 = require("../icons/folder");
 const modals_1 = require("../state/modals");
 const AssetFileIcon_1 = require("./AssetFileIcon");
-const ConfirmationDialog_1 = require("./ConfirmationDialog");
 const ContextMenu_1 = require("./ContextMenu");
 const import_assets_1 = require("./import-assets");
 const InlineAction_1 = require("./InlineAction");
 const layout_1 = require("./layout");
-const styles_1 = require("./Menu/styles");
 const NotificationCenter_1 = require("./Notifications/NotificationCenter");
 const open_in_new_window_1 = require("./open-in-new-window");
 const actions_1 = require("./RenderQueue/actions");
+const use_delete_asset_1 = require("./use-delete-asset");
 const iconStyle = {
     width: 18,
     height: 18,
@@ -117,9 +116,24 @@ const getCanDragAsset = ({ readOnlyStudio, relativePath, }) => {
     return !readOnlyStudio && (0, import_assets_1.getAssetElementFromPath)(relativePath) !== null;
 };
 exports.getCanDragAsset = getCanDragAsset;
-const getAssetContextMenuItems = ({ relativePath, fileManagerName, copyFileName, copyStaticFilePath, openAssetInExplorer, renameAsset, deleteAsset, fileExplorerAvailable, fileExplorerDisabled, mutationsDisabled, }) => {
+const getAssetContextMenuItems = ({ relativePath, fileManagerName, copyFileName, copyStaticFilePath, openAssetInConvert, openAssetInExplorer, renameAsset, deleteAsset, fileExplorerAvailable, fileExplorerDisabled, mutationsDisabled, }) => {
+    const previewFileType = (0, get_preview_file_type_1.getPreviewFileType)(relativePath);
+    const canOpenInConvert = previewFileType === 'audio' || previewFileType === 'video';
     const items = [
         (0, open_in_new_window_1.getOpenInNewWindowMenuItem)(`/assets/${relativePath}`),
+        canOpenInConvert
+            ? {
+                id: 'open-asset-in-convert',
+                keyHint: null,
+                label: 'Open in Remotion Convert',
+                leftItem: null,
+                onClick: openAssetInConvert,
+                quickSwitcherLabel: 'Open asset in Remotion Convert',
+                subMenu: null,
+                type: 'item',
+                value: 'open-asset-in-convert',
+            }
+            : null,
         {
             type: 'divider',
             id: 'open-in-new-window-divider',
@@ -263,7 +277,6 @@ const AssetSelectorItem = ({ item, tabIndex, level, parentFolder, readOnlyStudio
     const [hovered, setHovered] = (0, react_1.useState)(false);
     const [isDragging, setIsDragging] = (0, react_1.useState)(false);
     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;
     const onPointerEnter = (0, react_1.useCallback)(() => {
@@ -379,6 +392,9 @@ const AssetSelectorItem = ({ item, tabIndex, level, parentFolder, readOnlyStudio
             (0, NotificationCenter_1.showNotification)(`Could not copy: ${err.message}`, 2000);
         });
     }, [relativePath]);
+    const openAssetInConvert = (0, react_1.useCallback)(() => {
+        (0, open_in_remotion_convert_1.openInRemotionConvert)({ relativePath });
+    }, [relativePath]);
     const openAssetInExplorer = (0, react_1.useCallback)(() => {
         if (!window.remotion_publicFolderExists) {
             (0, NotificationCenter_1.showNotification)('Could not find the public folder', 2000);
@@ -396,30 +412,7 @@ const AssetSelectorItem = ({ item, tabIndex, level, parentFolder, readOnlyStudio
         connectionStatus,
         publicFolderExists: window.remotion_publicFolderExists,
     });
-    const deleteAsset = (0, react_1.useCallback)(() => {
-        confirm({
-            title: 'Delete asset',
-            message: (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: ["Do you want to delete the asset", ' ', jsx_runtime_1.jsx("code", { style: styles_1.inlineCodeSnippet, children: relativePath }),
-                    " from your public folder?"] })),
-            confirmLabel: 'Delete',
-        })
-            .then((confirmed) => {
-            if (!confirmed) {
-                return;
-            }
-            const notification = (0, NotificationCenter_1.showNotification)(`Deleting ${relativePath}...`, null);
-            (0, delete_static_file_1.deleteStaticFile)(relativePath)
-                .then(() => {
-                notification.replaceContent(`Deleted ${relativePath}`, 2000);
-            })
-                .catch((err) => {
-                notification.replaceContent(`Could not delete ${relativePath}: ${err.message}`, 3000);
-            });
-        })
-            .catch((err) => {
-            (0, NotificationCenter_1.showNotification)(`Could not delete ${relativePath}: ${err.message}`, 3000);
-        });
-    }, [confirm, relativePath]);
+    const deleteAsset = (0, use_delete_asset_1.useDeleteAsset)(relativePath);
     const renameAsset = (0, react_1.useCallback)(() => {
         setSelectedModal({
             type: 'rename-static-file',
@@ -432,6 +425,7 @@ const AssetSelectorItem = ({ item, tabIndex, level, parentFolder, readOnlyStudio
             fileManagerName,
             copyFileName,
             copyStaticFilePath,
+            openAssetInConvert,
             openAssetInExplorer,
             renameAsset,
             deleteAsset,
@@ -446,6 +440,7 @@ const AssetSelectorItem = ({ item, tabIndex, level, parentFolder, readOnlyStudio
         fileExplorerDisabled,
         fileManagerName,
         mutationsDisabled,
+        openAssetInConvert,
         openAssetInExplorer,
         renameAsset,
         relativePath,

package/dist/components/Canvas.js

@@ -16,7 +16,6 @@ const clipboard_images_1 = require("../helpers/clipboard-images");
 const clipboard_svg_1 = require("../helpers/clipboard-svg");
 const colors_1 = require("../helpers/colors");
 const get_asset_metadata_1 = require("../helpers/get-asset-metadata");
-const get_canvas_capture_import_1 = require("../helpers/get-canvas-capture-import");
 const get_effective_translation_1 = require("../helpers/get-effective-translation");
 const install_required_package_1 = require("../helpers/install-required-package");
 const open_in_editor_1 = require("../helpers/open-in-editor");
@@ -29,6 +28,7 @@ const editor_snapping_1 = require("../state/editor-snapping");
 const editor_zoom_gestures_1 = require("../state/editor-zoom-gestures");
 const modals_1 = require("../state/modals");
 const call_api_1 = require("./call-api");
+const canvas_capture_drop_1 = require("./canvas-capture-drop");
 const composition_drop_preview_1 = require("./composition-drop-preview");
 const ConfirmationDialog_1 = require("./ConfirmationDialog");
 const drop_handler_data_1 = require("./drop-handler-data");
@@ -135,6 +135,7 @@ const Canvas = ({ canvasContent, size }) => {
     const { editorShowGuides } = (0, react_1.useContext)(editor_guides_1.EditorShowGuidesContext);
     const { editorSnapping } = (0, react_1.useContext)(editor_snapping_1.EditorSnappingContext);
     const { compositions } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
+    const { setCurrentAssetMetadata } = (0, react_1.useContext)(remotion_1.Internals.CompositionSetters);
     const { previewServerState, subscribeToEvent } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
     const previewServerClientId = previewServerState.type === 'connected'
         ? previewServerState.clientId
@@ -146,6 +147,7 @@ const Canvas = ({ canvasContent, size }) => {
     const [activeElementInstallRequest, setActiveElementInstallRequest] = (0, react_1.useState)(null);
     const lastFocusedAtRef = (0, react_1.useRef)(typeof document === 'undefined' || document.hasFocus() ? Date.now() : null);
     const [assetResolution, setAssetResolution] = (0, react_1.useState)(null);
+    const metadataRequestRef = (0, react_1.useRef)(0);
     const currentCompositionId = canvasContent.type === 'composition' ? canvasContent.compositionId : null;
     const currentComposition = (0, react_1.useMemo)(() => {
         var _a;
@@ -530,13 +532,19 @@ const Canvas = ({ canvasContent, size }) => {
         };
     }, [keybindings, onReset, onZoomIn, onZoomOut]);
     const fetchMetadata = (0, react_1.useCallback)(async () => {
+        const request = ++metadataRequestRef.current;
         setAssetResolution(null);
         if (canvasContent.type === 'composition') {
+            setCurrentAssetMetadata(null);
             return;
         }
         const metadata = await (0, get_asset_metadata_1.getAssetMetadata)(canvasContent, canvasContent.type === 'asset');
+        if (request !== metadataRequestRef.current) {
+            return;
+        }
         setAssetResolution(metadata);
-    }, [canvasContent]);
+        setCurrentAssetMetadata((0, get_asset_metadata_1.getAssetPreviewMetadata)({ canvasContent, metadata }));
+    }, [canvasContent, setCurrentAssetMetadata]);
     (0, react_1.useEffect)(() => {
         if (canvasContent.type !== 'asset') {
             return;
@@ -846,22 +854,19 @@ const Canvas = ({ canvasContent, size }) => {
         if (!(0, drop_handler_data_1.isSupportedDropEvent)(event) || !isDragEventInsideCanvas(event)) {
             return;
         }
-        if ((0, drop_handler_data_1.isFileDragEvent)(event) && !window.remotion_isReadOnlyStudio) {
+        const localFiles = (0, drop_handler_data_1.isFileDragEvent)(event)
+            ? Array.from((_c = (_a = event.dataTransfer) === null || _a === void 0 ? void 0 : _a.files) !== null && _c !== void 0 ? _c : [])
+            : null;
+        if (localFiles !== null && !window.remotion_isReadOnlyStudio) {
             event.preventDefault();
             event.stopPropagation();
-            const files = Array.from((_c = (_a = event.dataTransfer) === null || _a === void 0 ? void 0 : _a.files) !== null && _c !== void 0 ? _c : []);
-            if (files.length === 1) {
+            if (localFiles.length === 1) {
                 setIsAddingAsset(true);
                 try {
-                    const canvasCapture = await (0, get_canvas_capture_import_1.getCanvasCaptureImport)(files[0]);
-                    if (canvasCapture !== null) {
-                        setSelectedModal({
-                            type: 'new-comp',
-                            canvasCapture,
-                            folderName: null,
-                            parentName: null,
-                            stack: null,
-                        });
+                    if (await (0, canvas_capture_drop_1.handleCanvasCaptureDrop)({
+                        files: localFiles,
+                        setSelectedModal,
+                    })) {
                         return;
                     }
                 }
@@ -936,6 +941,7 @@ const Canvas = ({ canvasContent, size }) => {
                 event,
                 fps: config.fps,
                 from: (0, imperative_state_1.getCurrentFrame)(),
+                localFiles,
                 preferCompositionStart: true,
             });
         }
@@ -1094,6 +1100,6 @@ const Canvas = ({ canvasContent, size }) => {
         };
     }, [compositionDropPreview, contentDimensions, previewSize, size]);
     return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
-            jsx_runtime_1.jsxs("div", { ref: canvas_ref_1.canvasRef, style: getContainerStyle(editorZoomGestures), children: [size ? (jsx_runtime_1.jsx(Preview_1.VideoPreview, { canvasContent: canvasContent, contentDimensions: contentDimensions, canvasSize: size, assetMetadata: assetResolution, onRetryAssetMetadata: fetchMetadata })) : null, compositionDropPreviewStyle === null ? null : (jsx_runtime_1.jsx("div", { className: "css-reset", "data-testid": "composition-drop-preview", style: compositionDropPreviewStyle })), isFit ? null : (jsx_runtime_1.jsx("div", { style: resetZoom, className: "css-reset", children: jsx_runtime_1.jsx(ResetZoomButton_1.ResetZoomButton, { onClick: onReset }) })), editorShowGuides && canvasContent.type === 'composition' && (jsx_runtime_1.jsx(EditorGuides_1.default, { canvasSize: size, contentDimensions: contentDimensions, assetMetadata: assetResolution }))] }), areRulersVisible && (jsx_runtime_1.jsx(EditorRuler_1.EditorRulers, { contentDimensions: contentDimensions, canvasSize: size, assetMetadata: assetResolution, containerRef: canvas_ref_1.canvasRef }))] }));
+            jsx_runtime_1.jsxs("div", { ref: canvas_ref_1.canvasRef, style: getContainerStyle(editorZoomGestures), children: [size ? (jsx_runtime_1.jsx(Preview_1.VideoPreview, { canvasContent: canvasContent, contentDimensions: contentDimensions, canvasSize: size, assetMetadata: assetResolution, onRetryAssetMetadata: fetchMetadata })) : null, compositionDropPreviewStyle === null ? null : (jsx_runtime_1.jsx("div", { className: "css-reset", "data-testid": "composition-drop-preview", style: compositionDropPreviewStyle })), isFit ? null : (jsx_runtime_1.jsx("div", { style: resetZoom, className: "css-reset", children: jsx_runtime_1.jsx(ResetZoomButton_1.ResetZoomButton, { onClick: onReset }) })), editorShowGuides && canvasContent.type === 'composition' && (jsx_runtime_1.jsx(EditorGuides_1.default, { canvasSize: size, contentDimensions: contentDimensions, assetMetadata: assetResolution }))] }), areRulersVisible && (jsx_runtime_1.jsx(EditorRuler_1.EditorRulers, { canCreateGuides: canvasContent.type === 'composition', contentDimensions: contentDimensions, canvasSize: size, assetMetadata: assetResolution, containerRef: canvas_ref_1.canvasRef }))] }));
 };
 exports.Canvas = Canvas;

package/dist/components/CanvasCaptureDropHandler.d.ts

@@ -0,0 +1,4 @@
+import { type FC } from 'react';
+export declare const CanvasCaptureDropHandler: FC<{
+    readonly readOnlyStudio: boolean;
+}>;

package/dist/components/CanvasCaptureDropHandler.js

@@ -0,0 +1,42 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CanvasCaptureDropHandler = void 0;
+const react_1 = require("react");
+const modals_1 = require("../state/modals");
+const canvas_capture_drop_1 = require("./canvas-capture-drop");
+const drop_handler_data_1 = require("./drop-handler-data");
+const CanvasCaptureDropHandler = ({ readOnlyStudio }) => {
+    const { setSelectedModal } = (0, react_1.useContext)(modals_1.SetSelectedModalContext);
+    const onDragOver = (0, react_1.useCallback)((event) => {
+        if (readOnlyStudio || !(0, drop_handler_data_1.isFileDragEvent)(event)) {
+            return;
+        }
+        event.preventDefault();
+        if (event.dataTransfer) {
+            event.dataTransfer.dropEffect = 'copy';
+        }
+    }, [readOnlyStudio]);
+    const onDrop = (0, react_1.useCallback)(async (event) => {
+        var _a;
+        var _b;
+        if (readOnlyStudio || !(0, drop_handler_data_1.isFileDragEvent)(event)) {
+            return;
+        }
+        const files = Array.from((_b = (_a = event.dataTransfer) === null || _a === void 0 ? void 0 : _a.files) !== null && _b !== void 0 ? _b : []);
+        if (files.length === 0) {
+            return;
+        }
+        event.preventDefault();
+        await (0, canvas_capture_drop_1.handleCanvasCaptureDrop)({ files, setSelectedModal });
+    }, [readOnlyStudio, setSelectedModal]);
+    (0, react_1.useEffect)(() => {
+        document.addEventListener('dragover', onDragOver);
+        document.addEventListener('drop', onDrop);
+        return () => {
+            document.removeEventListener('dragover', onDragOver);
+            document.removeEventListener('drop', onDrop);
+        };
+    }, [onDragOver, onDrop]);
+    return null;
+};
+exports.CanvasCaptureDropHandler = CanvasCaptureDropHandler;

package/dist/components/CanvasOrLoading.js

@@ -58,9 +58,10 @@ const CanvasOrLoading = ({ size }) => {
     }
     const content = (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
             jsx_runtime_1.jsx(ZoomPersistor_1.ZoomPersistor, {}), jsx_runtime_1.jsx(Canvas_1.Canvas, { size: size, canvasContent: canvasContent }), (resolved === null || resolved === void 0 ? void 0 : resolved.type) === 'success-and-refreshing' ? (jsx_runtime_1.jsx(RefreshCompositionOverlay_1.RefreshCompositionOverlay, {})) : null] }));
-    if (canvasContent.type === 'asset' ||
-        canvasContent.type === 'output' ||
-        canvasContent.type === 'output-blob') {
+    if (canvasContent.type === 'output' || canvasContent.type === 'output-blob') {
+        return content;
+    }
+    if (canvasContent.type === 'asset' && resolved === null) {
         return content;
     }
     if (!resolved) {

package/dist/components/CaptionInspector.d.ts

@@ -2,9 +2,11 @@ import type { Caption } from '@remotion/captions';
 import React from 'react';
 export declare const CaptionInspector: React.FC<{
     readonly captions: Caption[];
+    readonly expanded: boolean;
     readonly onTextChange: (captions: Caption[]) => void;
     readonly onTextSave: ((captions: Caption[]) => void) | null;
     readonly onTextCancel: (() => void) | null;
+    readonly onToggle: () => void;
     readonly readOnly: boolean;
     readonly readOnlyTitle: string | null;
 }>;

package/dist/components/CaptionInspector.js

@@ -4,6 +4,7 @@ exports.CaptionInspector = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const colors_1 = require("../helpers/colors");
 const CaptionTextEditor_1 = require("./CaptionTextEditor");
+const CollapsibleInspectorSectionHeader_1 = require("./InspectorPanel/CollapsibleInspectorSectionHeader");
 const common_1 = require("./InspectorPanel/common");
 const styles_1 = require("./InspectorPanel/styles");
 const readOnlyStatus = {
@@ -14,11 +15,8 @@ const readOnlyStatus = {
     lineHeight: '16px',
     marginLeft: 12,
 };
-const CaptionInspector = ({ captions, onTextChange, onTextSave, onTextCancel, readOnly, readOnlyTitle, }) => {
+const CaptionInspector = ({ captions, expanded, onTextChange, onTextSave, onTextCancel, onToggle, readOnly, readOnlyTitle, }) => {
     return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
-            jsx_runtime_1.jsx(common_1.InspectorSectionDivider, {}), jsx_runtime_1.jsx(common_1.InspectorSectionHeader, { children: jsx_runtime_1.jsxs("div", { style: styles_1.sectionHeaderRow, children: [
-                        jsx_runtime_1.jsx("div", { style: styles_1.sectionHeaderTitle, children: "Captions" }), jsx_runtime_1.jsx("div", { style: styles_1.sectionHeaderEnd, children: readOnly ? (jsx_runtime_1.jsx("div", { style: readOnlyStatus, title: readOnlyTitle !== null && readOnlyTitle !== void 0 ? readOnlyTitle : undefined, children: "Read only" })) : null })
-                    ] }) }), jsx_runtime_1.jsx(CaptionTextEditor_1.CaptionTextEditor, { captions: captions, onChange: onTextChange, onSave: onTextSave, onCancel: onTextCancel, readOnly: readOnly })
-        ] }));
+            jsx_runtime_1.jsx(common_1.InspectorSectionHeader, { children: jsx_runtime_1.jsx(CollapsibleInspectorSectionHeader_1.CollapsibleInspectorSectionHeader, { action: jsx_runtime_1.jsx("div", { style: styles_1.sectionHeaderEnd, children: readOnly ? (jsx_runtime_1.jsx("div", { style: readOnlyStatus, title: readOnlyTitle !== null && readOnlyTitle !== void 0 ? readOnlyTitle : undefined, children: "Read only" })) : null }), expanded: expanded, label: "Captions", onToggle: onToggle }) }), expanded ? (jsx_runtime_1.jsx(CaptionTextEditor_1.CaptionTextEditor, { captions: captions, onChange: onTextChange, onSave: onTextSave, onCancel: onTextCancel, readOnly: readOnly })) : null] }));
 };
 exports.CaptionInspector = CaptionInspector;

package/dist/components/CheckboardToggle.js

@@ -21,7 +21,7 @@ const CheckboardToggle = () => {
             return !c;
         });
     }, [setCheckerboard]);
-    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: [
+    return (jsx_runtime_1.jsx(ControlButton_1.ControlButton, { title: accessibilityLabel, "aria-label": accessibilityLabel, "aria-pressed": checkerboard, 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" })
             ] })) }));
 };

package/dist/components/Checkbox.d.ts

@@ -8,7 +8,6 @@ export declare const Checkbox: React.FC<{
     readonly checked: boolean;
     readonly onChange: React.ChangeEventHandler<HTMLInputElement>;
     readonly name: string;
-    readonly rounded?: boolean;
     readonly disabled?: boolean;
     readonly variant?: CheckboxVariant;
 }>;

package/dist/components/Checkbox.js

@@ -9,30 +9,18 @@ const SIZES = {
     default: 20,
     small: 18,
 };
-const BULLET_SIZES = {
-    default: 10,
-    small: 9,
-};
 const CHECKMARK_SIZES = {
     default: 14,
     small: 13,
 };
-const Checkbox = ({ checked, onChange, disabled, name, rounded, variant = 'default' }) => {
-    const ref = (0, react_1.useRef)(null);
+const Checkbox = ({ checked, onChange, disabled, name, variant = 'default' }) => {
     const size = SIZES[variant];
-    const bulletSize = BULLET_SIZES[variant];
     const checkmarkSize = CHECKMARK_SIZES[variant];
     const background = (0, react_1.useMemo)(() => ({
         height: size,
         width: size,
         position: 'relative',
     }), [size]);
-    const bullet = (0, react_1.useMemo)(() => ({
-        width: bulletSize,
-        height: bulletSize,
-        backgroundColor: colors_1.WHITE,
-        borderRadius: '50%',
-    }), [bulletSize]);
     const box = (0, react_1.useMemo)(() => ({
         display: 'flex',
         justifyContent: 'center',
@@ -58,13 +46,8 @@ const Checkbox = ({ checked, onChange, disabled, name, rounded, variant = 'defau
             margin: 0,
         };
     }, [disabled, size]);
-    (0, react_1.useEffect)(() => {
-        if (ref.current) {
-            ref.current.style.setProperty('border-radius', rounded ? '50%' : '0%', 'important');
-        }
-    }, [rounded]);
     return (jsx_runtime_1.jsxs("div", { style: background, children: [
-            jsx_runtime_1.jsx("input", { ref: ref, style: input, type: 'checkbox', checked: checked, onChange: onChange, disabled: disabled, name: name }), jsx_runtime_1.jsx("div", { style: box, children: checked ? (rounded ? (jsx_runtime_1.jsx("div", { style: bullet })) : (jsx_runtime_1.jsx(Checkmark_1.Checkmark, { size: checkmarkSize }))) : null })
+            jsx_runtime_1.jsx("input", { style: input, type: 'checkbox', checked: checked, onChange: onChange, disabled: disabled, name: name }), jsx_runtime_1.jsx("div", { style: box, children: checked ? jsx_runtime_1.jsx(Checkmark_1.Checkmark, { size: checkmarkSize }) : null })
         ] }));
 };
 exports.Checkbox = Checkbox;

package/dist/components/CompositionSelector.js

@@ -227,9 +227,12 @@ const CompositionSelector = () => {
                 signal: controller.signal,
                 symbolicatedStack: (0, studio_shared_1.compositionDragDataToSymbolicatedStack)(compositionDragData),
             });
-            notification.replaceContent(result.success
-                ? `Moved ${compositionDragData.compositionId} outside of folder`
-                : result.reason, result.success ? 2000 : 4000);
+            if (result.success) {
+                notification.dismiss();
+            }
+            else {
+                notification.replaceContent(result.reason, 4000);
+            }
         }
         catch (err) {
             notification.replaceContent(err instanceof Error ? err.message : String(err), 4000);

package/dist/components/CompositionSelectorItem.js

@@ -7,7 +7,6 @@ const studio_shared_1 = require("@remotion/studio-shared");
 const react_1 = require("react");
 const client_id_1 = require("../helpers/client-id");
 const colors_1 = require("../helpers/colors");
-const get_folder_id_1 = require("../helpers/get-folder-id");
 const noop_1 = require("../helpers/noop");
 const sidebar_scroll_into_view_1 = require("../helpers/sidebar-scroll-into-view");
 const folder_1 = require("../icons/folder");
@@ -33,11 +32,12 @@ const itemStyle = {
     cursor: 'default',
     alignItems: 'center',
     marginBottom: 1,
-    marginLeft: 4,
+    marginLeft: 8,
+    marginRight: 4,
     appearance: 'none',
     border: 'none',
     borderRadius: 4,
-    width: 'calc(100% - 4px)',
+    width: 'calc(100% - 12px)',
     textAlign: 'left',
     backgroundColor: colors_1.BACKGROUND,
     height: layout_1.COMPACT_CONTROL_ROW_HEIGHT,
@@ -223,10 +223,6 @@ const CompositionSelectorItem = ({ item, level, currentComposition, tabIndex, se
         if (isAlreadyDirectChild) {
             return;
         }
-        const folderId = (0, get_folder_id_1.getFolderId)({
-            folderName: item.folderName,
-            parentName: item.parentName,
-        });
         const notification = (0, NotificationCenter_1.showNotification)(`Moving ${compositionDragData.compositionId}...`, null);
         const controller = new AbortController();
         try {
@@ -241,9 +237,12 @@ const CompositionSelectorItem = ({ item, level, currentComposition, tabIndex, se
                 signal: controller.signal,
                 symbolicatedStack: (0, studio_shared_1.compositionDragDataToSymbolicatedStack)(compositionDragData),
             });
-            notification.replaceContent(result.success
-                ? `Moved ${compositionDragData.compositionId} to ${folderId}`
-                : result.reason, result.success ? 2000 : 4000);
+            if (result.success) {
+                notification.dismiss();
+            }
+            else {
+                notification.replaceContent(result.reason, 4000);
+            }
             if (result.success && !item.expanded) {
                 toggleFolder(item.folderName, item.parentName);
             }

package/dist/components/ConfigSelect.d.ts

@@ -0,0 +1,17 @@
+export declare const booleanOptions: readonly [{
+    readonly label: "Enabled";
+    readonly value: true;
+}, {
+    readonly label: "Disabled";
+    readonly value: false;
+}];
+export declare const ConfigSelect: <T extends string | boolean>({ defaultLabel, name, onChange, options, value, }: {
+    readonly defaultLabel: string;
+    readonly name: string;
+    readonly onChange: (value: T | null) => void;
+    readonly options: readonly {
+        label: string;
+        value: T;
+    }[];
+    readonly value: T | null;
+}) => import("react/jsx-runtime").JSX.Element;

package/dist/components/ConfigSelect.js

@@ -0,0 +1,50 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ConfigSelect = exports.booleanOptions = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const Checkmark_1 = require("../icons/Checkmark");
+const ComboBox_1 = require("./NewComposition/ComboBox");
+const layout_1 = require("./RenderModal/layout");
+const DEFAULT_VALUE = 'studio-default';
+const controlWidth = {
+    boxSizing: 'border-box',
+    width: 180,
+};
+exports.booleanOptions = [
+    { label: 'Enabled', value: true },
+    { label: 'Disabled', value: false },
+];
+const ConfigSelect = ({ defaultLabel, name, onChange, options, value, }) => {
+    const values = [
+        {
+            id: DEFAULT_VALUE,
+            keyHint: null,
+            label: `Default (${defaultLabel})`,
+            leftItem: value === null ? jsx_runtime_1.jsx(Checkmark_1.Checkmark, {}) : null,
+            onClick: () => onChange(null),
+            quickSwitcherLabel: null,
+            subMenu: null,
+            type: 'item',
+            value: DEFAULT_VALUE,
+        },
+        { id: `${DEFAULT_VALUE}-divider`, type: 'divider' },
+        ...options.map((option) => {
+            const id = `${name}-${String(option.value)}`;
+            return {
+                id,
+                keyHint: null,
+                label: option.label,
+                leftItem: value === option.value ? jsx_runtime_1.jsx(Checkmark_1.Checkmark, {}) : null,
+                onClick: () => onChange(option.value),
+                quickSwitcherLabel: null,
+                subMenu: null,
+                type: 'item',
+                value: id,
+            };
+        }),
+    ];
+    return (jsx_runtime_1.jsxs("div", { style: layout_1.optionRow, children: [
+            jsx_runtime_1.jsx("div", { style: layout_1.label, children: name }), jsx_runtime_1.jsx("div", { style: layout_1.rightRow, children: jsx_runtime_1.jsx(ComboBox_1.Combobox, { values: values, selectedId: value === null ? DEFAULT_VALUE : `${name}-${String(value)}`, style: controlWidth, title: name }) })
+        ] }));
+};
+exports.ConfigSelect = ConfigSelect;