@remotion/studio 4.0.517 → 4.0.518

package/dist/components/AssetSelector.js

@@ -48,6 +48,7 @@ const use_asset_drag_events_1 = __importStar(require("../helpers/use-asset-drag-
 const folders_1 = require("../state/folders");
 const z_index_1 = require("../state/z-index");
 const AssetSelectorItem_1 = require("./AssetSelectorItem");
+const import_assets_1 = require("./import-assets");
 const styles_1 = require("./Menu/styles");
 const NotificationCenter_1 = require("./Notifications/NotificationCenter");
 const ExplorerQuickSwitcherTrigger_1 = require("./QuickSwitcher/ExplorerQuickSwitcherTrigger");
@@ -97,6 +98,28 @@ const AssetSelector = ({ readOnlyStudio }) => {
     const assetTree = (0, react_1.useMemo)(() => {
         return (0, create_folder_tree_1.buildAssetFolderStructure)(staticFiles, null, assetFoldersExpanded);
     }, [assetFoldersExpanded, staticFiles]);
+    const writeFilesToPublicFolder = (0, react_1.useCallback)(async ({ files, assetPath, }) => {
+        const makePath = (file) => {
+            return [assetPath, file.name].filter(Boolean).join('/');
+        };
+        const differentExistingFile = files.find((file) => {
+            const filePath = makePath(file);
+            return staticFiles.some((staticFile) => staticFile.name === filePath &&
+                staticFile.sizeInBytes !== file.size);
+        });
+        if (differentExistingFile) {
+            (0, NotificationCenter_1.showNotification)(`File with name ${makePath(differentExistingFile)} already exists and is different`, 4000);
+            return false;
+        }
+        for (const file of files) {
+            const body = await file.arrayBuffer();
+            await (0, write_static_file_1.writeStaticFile)({
+                contents: body,
+                filePath: makePath(file),
+            });
+        }
+        return true;
+    }, [staticFiles]);
     const toggleFolder = (0, react_1.useCallback)((folderName, parentName) => {
         setAssetFoldersExpanded((p) => {
             const key = [parentName, folderName].filter(Boolean).join('/');
@@ -145,25 +168,7 @@ const AssetSelector = ({ readOnlyStudio }) => {
                 setDropLocation(null);
                 return;
             }
-            const makePath = (file) => {
-                return [assetPath, file.name].filter(Boolean).join('/');
-            };
-            const differentExistingFile = Array.from(files).find((file) => {
-                const filePath = makePath(file);
-                return staticFiles.some((staticFile) => staticFile.name === filePath &&
-                    staticFile.sizeInBytes !== file.size);
-            });
-            if (differentExistingFile) {
-                (0, NotificationCenter_1.showNotification)(`File with name ${makePath(differentExistingFile)} already exists and is different`, 4000);
-                return;
-            }
-            for (const file of files) {
-                const body = await file.arrayBuffer();
-                await (0, write_static_file_1.writeStaticFile)({
-                    contents: body,
-                    filePath: makePath(file),
-                });
-            }
+            await writeFilesToPublicFolder({ files, assetPath });
         }
         catch (error) {
             (0, NotificationCenter_1.showNotification)(`Error during upload: ${error}`, 3000);
@@ -171,9 +176,45 @@ const AssetSelector = ({ readOnlyStudio }) => {
         finally {
             setDropLocation(null);
         }
-    }, [dropLocation, staticFiles]);
+    }, [dropLocation, writeFilesToPublicFolder]);
+    const uploadAssets = (0, react_1.useCallback)(async () => {
+        try {
+            const files = await (0, import_assets_1.pickFilesToImport)();
+            if (files.length === 0) {
+                return;
+            }
+            const wereWritten = await writeFilesToPublicFolder({
+                files,
+                assetPath: null,
+            });
+            if (wereWritten) {
+                (0, NotificationCenter_1.showNotification)(files.length === 1
+                    ? `Uploaded ${files[0].name} to public folder`
+                    : `Uploaded ${files.length} assets to public folder`, 3000);
+            }
+        }
+        catch (error) {
+            (0, NotificationCenter_1.showNotification)(`Error during upload: ${error}`, 3000);
+        }
+    }, [writeFilesToPublicFolder]);
+    const getAssetActions = (0, react_1.useCallback)(() => {
+        return [
+            {
+                id: 'upload-assets',
+                keyHint: null,
+                label: 'Upload...',
+                leftItem: null,
+                onClick: uploadAssets,
+                quickSwitcherLabel: 'Upload assets...',
+                subMenu: null,
+                type: 'item',
+                value: 'upload-assets',
+                disabled: !shouldAllowUpload,
+            },
+        ];
+    }, [shouldAllowUpload, uploadAssets]);
     return (jsx_runtime_1.jsxs("div", { "data-asset-selector": true, style: container, onDragOver: shouldAllowUpload ? onDragOver : undefined, onDrop: shouldAllowUpload ? onDrop : undefined, children: [
-            jsx_runtime_1.jsx(ExplorerQuickSwitcherTrigger_1.ExplorerQuickSwitcherTrigger, { mode: "assets", showShortcut: true, tabIndex: tabIndex }), staticFiles.length === 0 ? (publicFolderExists ? (jsx_runtime_1.jsx("div", { style: emptyState, children: jsx_runtime_1.jsxs("div", { style: label, children: ["To add assets, place a file in the", ' ', jsx_runtime_1.jsx("code", { style: styles_1.inlineCodeSnippet, children: "public" }),
+            jsx_runtime_1.jsx(ExplorerQuickSwitcherTrigger_1.ExplorerQuickSwitcherTrigger, { mode: "assets", showShortcut: true, tabIndex: tabIndex, getActions: getAssetActions }), staticFiles.length === 0 ? (publicFolderExists ? (jsx_runtime_1.jsx("div", { style: emptyState, children: jsx_runtime_1.jsxs("div", { style: label, children: ["To add assets, place a file in the", ' ', jsx_runtime_1.jsx("code", { style: styles_1.inlineCodeSnippet, children: "public" }),
                         " folder of your project or drag and drop a file here."] }) })) : (jsx_runtime_1.jsx("div", { style: emptyState, children: jsx_runtime_1.jsxs("div", { style: label, children: ["To add assets, create a folder called", ' ', jsx_runtime_1.jsx("code", { style: styles_1.inlineCodeSnippet, children: "public" }),
                         " in the root of your project and place a file in it."] }) }))) : (jsx_runtime_1.jsx("div", { className: "__remotion-vertical-scrollbar", style: {
                     ...list,

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, openAssetInConvert, openAssetInExplorer, renameAsset, deleteAsset, fileExplorerAvailable, fileExplorerDisabled, mutationsDisabled, }: {
+export declare const getAssetContextMenuItems: ({ relativePath, fileManagerName, copyFileName, copyStaticFilePath, copyAbsolutePath, openAssetInConvert, openAssetInExplorer, renameAsset, deleteAsset, fileExplorerAvailable, fileExplorerDisabled, mutationsDisabled, }: {
     relativePath: string;
     fileManagerName: string;
     copyFileName: () => void;
     copyStaticFilePath: () => void;
+    copyAbsolutePath: (() => void) | null;
     openAssetInConvert: () => void;
     openAssetInExplorer: () => void;
     renameAsset: () => void;

package/dist/components/AssetSelectorItem.js

@@ -45,19 +45,21 @@ 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 hoverable_1 = require("../helpers/hoverable");
 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"));
 const use_image_metadata_1 = require("../helpers/use-image-metadata");
 const use_media_metadata_1 = require("../helpers/use-media-metadata");
-const clipboard_1 = require("../icons/clipboard");
+const ellipsis_1 = require("../icons/ellipsis");
 const folder_1 = require("../icons/folder");
 const modals_1 = require("../state/modals");
 const AssetFileIcon_1 = require("./AssetFileIcon");
 const ContextMenu_1 = require("./ContextMenu");
 const import_assets_1 = require("./import-assets");
 const InlineAction_1 = require("./InlineAction");
+const InlineDropdown_1 = require("./InlineDropdown");
 const layout_1 = require("./layout");
 const NotificationCenter_1 = require("./Notifications/NotificationCenter");
 const open_in_new_window_1 = require("./open-in-new-window");
@@ -102,6 +104,11 @@ const revealIconStyle = {
     height: 12,
     color: colors_1.CURRENT_COLOR,
 };
+const ellipsisIconStyle = {
+    style: {
+        height: 12,
+    },
+};
 const getAssetActionAvailability = ({ browserStudioCanMutateAssets, readOnlyStudio, connectionStatus, publicFolderExists, }) => {
     return {
         mutationsDisabled: browserStudioCanMutateAssets !== true &&
@@ -116,7 +123,7 @@ const getCanDragAsset = ({ readOnlyStudio, relativePath, }) => {
     return !readOnlyStudio && (0, import_assets_1.getAssetElementFromPath)(relativePath) !== null;
 };
 exports.getCanDragAsset = getCanDragAsset;
-const getAssetContextMenuItems = ({ relativePath, fileManagerName, copyFileName, copyStaticFilePath, openAssetInConvert, openAssetInExplorer, renameAsset, deleteAsset, fileExplorerAvailable, fileExplorerDisabled, mutationsDisabled, }) => {
+const getAssetContextMenuItems = ({ relativePath, fileManagerName, copyFileName, copyStaticFilePath, copyAbsolutePath, 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 = [
@@ -160,6 +167,19 @@ const getAssetContextMenuItems = ({ relativePath, fileManagerName, copyFileName,
             type: 'item',
             value: 'copy-asset-static-file-path',
         },
+        copyAbsolutePath
+            ? {
+                id: 'copy-asset-absolute-path',
+                keyHint: null,
+                label: 'Copy absolute path',
+                leftItem: null,
+                onClick: copyAbsolutePath,
+                quickSwitcherLabel: 'Copy asset absolute path',
+                subMenu: null,
+                type: 'item',
+                value: 'copy-asset-absolute-path',
+            }
+            : null,
         {
             type: 'divider',
             id: 'asset-file-actions-divider',
@@ -370,8 +390,8 @@ const AssetSelectorItem = ({ item, tabIndex, level, parentFolder, readOnlyStudio
     const renderFileExplorerAction = (0, react_1.useCallback)((color) => {
         return jsx_runtime_1.jsx(folder_1.ExpandedFolderIcon, { style: revealIconStyle, color: color });
     }, []);
-    const renderCopyAction = (0, react_1.useCallback)((color) => {
-        return jsx_runtime_1.jsx(clipboard_1.ClipboardIcon, { style: revealIconStyle, color: color });
+    const renderContextMenuAction = (0, react_1.useCallback)((color) => {
+        return jsx_runtime_1.jsx(ellipsis_1.EllipsisIcon, { svgProps: ellipsisIconStyle, fill: color });
     }, []);
     const copyFileName = (0, react_1.useCallback)(() => {
         (0, copy_text_1.copyText)(item.name)
@@ -392,6 +412,19 @@ const AssetSelectorItem = ({ item, tabIndex, level, parentFolder, readOnlyStudio
             (0, NotificationCenter_1.showNotification)(`Could not copy: ${err.message}`, 2000);
         });
     }, [relativePath]);
+    const copyAbsolutePath = (0, react_1.useCallback)(() => {
+        if (window.remotion_publicFolderExists === null) {
+            return;
+        }
+        const content = `${window.remotion_publicFolderExists}/${relativePath}`;
+        (0, copy_text_1.copyText)(content)
+            .then(() => {
+            (0, NotificationCenter_1.showNotification)(`Copied '${content}' to clipboard`, 1000);
+        })
+            .catch((err) => {
+            (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]);
@@ -425,6 +458,7 @@ const AssetSelectorItem = ({ item, tabIndex, level, parentFolder, readOnlyStudio
             fileManagerName,
             copyFileName,
             copyStaticFilePath,
+            copyAbsolutePath: window.remotion_publicFolderExists === null ? null : copyAbsolutePath,
             openAssetInConvert,
             openAssetInExplorer,
             renameAsset,
@@ -436,6 +470,7 @@ const AssetSelectorItem = ({ item, tabIndex, level, parentFolder, readOnlyStudio
     }, [
         copyFileName,
         copyStaticFilePath,
+        copyAbsolutePath,
         deleteAsset,
         fileExplorerDisabled,
         fileManagerName,
@@ -449,13 +484,9 @@ const AssetSelectorItem = ({ item, tabIndex, level, parentFolder, readOnlyStudio
         e.stopPropagation();
         openAssetInExplorer();
     }, [openAssetInExplorer]);
-    const copyToClipboard = (0, react_1.useCallback)((e) => {
-        e.stopPropagation();
-        copyStaticFilePath();
-    }, [copyStaticFilePath]);
     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 })
+                            jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.5 }), jsx_runtime_1.jsx(InlineDropdown_1.InlineDropdown, { variant: null, title: "More actions", renderAction: renderContextMenuAction, getItems: getContextMenuItems, style: hoverable_1.NO_HOVER_BACKGROUND_STYLE, className: hoverable_1.FOCUS_VISIBLE_ONLY_CLASS_NAME }), 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, style: hoverable_1.NO_HOVER_BACKGROUND_STYLE, className: hoverable_1.FOCUS_VISIBLE_ONLY_CLASS_NAME })
                                 ] }))] })) : null] }) }) }));
 };

package/dist/components/CaptionTextEditor.js

@@ -4,6 +4,9 @@ exports.CaptionTextEditor = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const colors_1 = require("../helpers/colors");
+const hoverable_1 = require("../helpers/hoverable");
+const enter_1 = require("../icons/enter");
+const InlineAction_1 = require("./InlineAction");
 const RemInput_1 = require("./NewComposition/RemInput");
 const container = {
     alignSelf: 'stretch',
@@ -21,8 +24,8 @@ const row = {
     alignItems: 'center',
     borderBottom: `1px solid ${colors_1.LINE_COLOR}`,
     display: 'grid',
-    gap: 12,
-    gridTemplateColumns: '100px minmax(0, 1fr)',
+    gap: 8,
+    gridTemplateColumns: '100px minmax(0, 1fr) 24px',
     padding: '5px 12px',
 };
 const timing = {
@@ -77,18 +80,33 @@ const CaptionTextEditor = ({ captions, onChange, onSave, onCancel, readOnly }) =
     (0, react_1.useEffect)(() => {
         return commitPending;
     }, [commitPending]);
-    const updateText = (0, react_1.useCallback)((index, text) => {
-        var _a;
-        if (((_a = latestRef.current.captions[index]) === null || _a === void 0 ? void 0 : _a.text) === text) {
+    const updateCaption = (0, react_1.useCallback)((index, changes) => {
+        const currentCaption = latestRef.current.captions[index];
+        if (!currentCaption) {
             return;
         }
         const nextCaptions = latestRef.current.captions.map((caption, captionIndex) => {
-            return captionIndex === index ? { ...caption, text } : caption;
+            return captionIndex === index ? { ...caption, ...changes } : caption;
         });
         latestRef.current.captions = nextCaptions;
         dirtyRef.current = true;
         onChange(nextCaptions);
     }, [onChange]);
+    const updateText = (0, react_1.useCallback)((index, text) => {
+        var _a;
+        if (((_a = latestRef.current.captions[index]) === null || _a === void 0 ? void 0 : _a.text) === text) {
+            return;
+        }
+        updateCaption(index, { text });
+    }, [updateCaption]);
+    const updatePageBreakAfter = (0, react_1.useCallback)((index, pageBreakAfter) => {
+        var _a;
+        if (Boolean((_a = latestRef.current.captions[index]) === null || _a === void 0 ? void 0 : _a.pageBreakAfter) ===
+            pageBreakAfter) {
+            return;
+        }
+        updateCaption(index, { pageBreakAfter });
+    }, [updateCaption]);
     const focusSibling = (0, react_1.useCallback)((index) => {
         var _a;
         const input = (_a = listRef.current) === null || _a === void 0 ? void 0 : _a.querySelector(`[data-caption-index="${index}"]`);
@@ -96,6 +114,10 @@ const CaptionTextEditor = ({ captions, onChange, onSave, onCancel, readOnly }) =
         input === null || input === void 0 ? void 0 : input.scrollIntoView({ block: 'nearest' });
     }, []);
     return (jsx_runtime_1.jsx("div", { style: container, children: jsx_runtime_1.jsxs("div", { ref: listRef, style: list, children: [captions.length === 0 ? jsx_runtime_1.jsx("div", { style: empty, children: "No captions" }) : null, captionRows.map(({ caption, key }, index) => {
+                    const hasPageBreakAfter = Boolean(caption.pageBreakAfter);
+                    const pageBreakTitle = hasPageBreakAfter
+                        ? `Remove page break after caption ${index + 1}`
+                        : `Add page break after caption ${index + 1}`;
                     return (jsx_runtime_1.jsxs("div", { style: row, children: [
                             jsx_runtime_1.jsxs("div", { style: timing, children: [formatMilliseconds(caption.startMs), " \u2192", ' ', formatMilliseconds(caption.endMs), " ms"] }), jsx_runtime_1.jsx(RemInput_1.RemotionInput, { "data-caption-index": index, disabled: readOnly, onBlur: (event) => {
                                     if (cancelledBlurIndexes.current.delete(index)) {
@@ -125,8 +147,10 @@ const CaptionTextEditor = ({ captions, onChange, onSave, onCancel, readOnly }) =
                                     fontFamily: 'sans-serif',
                                     fontSize: 12,
                                     lineHeight: '16px',
-                                }, value: caption.text })
-                        ] }, key));
+                                }, value: caption.text }), jsx_runtime_1.jsx(InlineAction_1.InlineAction, { "aria-pressed": hasPageBreakAfter, className: hoverable_1.FOCUS_VISIBLE_ONLY_CLASS_NAME, disabled: readOnly, onClick: () => {
+                                    updatePageBreakAfter(index, !hasPageBreakAfter);
+                                    commitPending();
+                                }, renderAction: (color) => (jsx_runtime_1.jsx(enter_1.EnterIcon, { "aria-hidden": "true", color: hasPageBreakAfter ? colors_1.BLUE : color, focusable: "false", style: { height: 16, width: 16 } })), title: pageBreakTitle, variant: null })] }, key));
                 })] }) }));
 };
 exports.CaptionTextEditor = CaptionTextEditor;

package/dist/components/CompositionContextButton.js

@@ -4,6 +4,7 @@ exports.CompositionContextButton = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const client_id_1 = require("../helpers/client-id");
+const hoverable_1 = require("../helpers/hoverable");
 const ellipsis_1 = require("../icons/ellipsis");
 const InlineDropdown_1 = require("./InlineDropdown");
 const CompositionContextButton = ({ visible, getItems }) => {
@@ -22,6 +23,6 @@ const CompositionContextButton = ({ visible, getItems }) => {
     if (!visible || connectionStatus !== 'connected') {
         return null;
     }
-    return (jsx_runtime_1.jsx(InlineDropdown_1.InlineDropdown, { renderAction: renderAction, getItems: getItems, variant: null }));
+    return (jsx_runtime_1.jsx(InlineDropdown_1.InlineDropdown, { renderAction: renderAction, getItems: getItems, variant: null, style: hoverable_1.NO_HOVER_BACKGROUND_STYLE, className: hoverable_1.FOCUS_VISIBLE_ONLY_CLASS_NAME }));
 };
 exports.CompositionContextButton = CompositionContextButton;

package/dist/components/CompositionSelector.js

@@ -239,7 +239,7 @@ const CompositionSelector = () => {
         }
     }, [compositions, stopCompositionListAutoScroll]);
     return (jsx_runtime_1.jsxs("div", { style: container, children: [
-            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) => {
+            jsx_runtime_1.jsx(ContextMenu_1.ContextMenuForTarget, { triggerRef: listRef, getItems: getRootContextMenuItems }), jsx_runtime_1.jsx(ExplorerQuickSwitcherTrigger_1.ExplorerQuickSwitcherTrigger, { mode: "compositions", showShortcut: true, tabIndex: tabIndex, getActions: getRootContextMenuItems }), 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/EditorContent.js

@@ -16,6 +16,7 @@ const Timeline_1 = require("./Timeline/Timeline");
 const TimelineEmptyState_1 = require("./Timeline/TimelineEmptyState");
 const TimelineKeyframeDragState_1 = require("./Timeline/TimelineKeyframeDragState");
 const TimelineSelection_1 = require("./Timeline/TimelineSelection");
+const WebMcp_1 = require("./WebMcp");
 const noop = () => undefined;
 const container = {
     display: 'flex',
@@ -42,8 +43,10 @@ const EditorContent = ({ readOnlyStudio, children }) => {
     const content = (jsx_runtime_1.jsxs(SplitterContainer_1.SplitterContainer, { orientation: "horizontal", id: "top-to-bottom", maxFlex: 0.9, minFlex: 0.2, defaultFlex: 0.75, maxFlexerSize: null, minFlexerSize: null, maxAntiFlexerSize: null, minAntiFlexerSize: null, children: [
             jsx_runtime_1.jsx(SplitterElement_1.SplitterElement, { sticky: null, type: "flexer", children: children }), jsx_runtime_1.jsx(SplitterHandle_1.SplitterHandle, { allowToCollapse: "none", onCollapse: noop }), jsx_runtime_1.jsx(SplitterElement_1.SplitterElement, { sticky: null, type: "anti-flexer", children: showTimeline ? jsx_runtime_1.jsx(Timeline_1.Timeline, {}) : jsx_runtime_1.jsx(TimelineEmptyState_1.TimelineEmptyState, {}) })
         ] }));
-    return (jsx_runtime_1.jsx(TimelineSelection_1.TimelineSelectionProvider, { children: jsx_runtime_1.jsx(transform_3d_mode_1.Transform3DModeStateProvider, { children: jsx_runtime_1.jsxs(StudioClearSelectionArea, { children: [
-                    jsx_runtime_1.jsx(InitialCompositionLoader_1.InitialCompositionLoader, {}), jsx_runtime_1.jsx(MenuToolbar_1.MenuToolbar, { readOnlyStudio: readOnlyStudio }), jsx_runtime_1.jsx(GlobalKeybindings_1.GlobalKeybindings, {}), jsx_runtime_1.jsx(TimelineKeyframeDragState_1.TimelineKeyframeDragStateProvider, { children: content })
-                ] }) }) }));
+    return (jsx_runtime_1.jsxs(TimelineSelection_1.TimelineSelectionProvider, { children: [
+            jsx_runtime_1.jsx(WebMcp_1.WebMcp, {}), jsx_runtime_1.jsx(transform_3d_mode_1.Transform3DModeStateProvider, { children: jsx_runtime_1.jsxs(StudioClearSelectionArea, { children: [
+                        jsx_runtime_1.jsx(InitialCompositionLoader_1.InitialCompositionLoader, {}), jsx_runtime_1.jsx(MenuToolbar_1.MenuToolbar, { readOnlyStudio: readOnlyStudio }), jsx_runtime_1.jsx(GlobalKeybindings_1.GlobalKeybindings, {}), jsx_runtime_1.jsx(TimelineKeyframeDragState_1.TimelineKeyframeDragStateProvider, { children: content })
+                    ] }) })
+        ] }));
 };
 exports.EditorContent = EditorContent;

package/dist/components/ElementInstallConfirmation.d.ts

@@ -1,4 +1,9 @@
 import React from 'react';
+export declare const ElementLibraryAddConfirmation: React.FC<{
+    readonly displayName: string | null;
+    readonly origin: string;
+    readonly url: string;
+}>;
 export declare const ElementInstallConfirmation: React.FC<{
     readonly displayName: string;
     readonly sourceLabel: string;

package/dist/components/ElementInstallConfirmation.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ElementInstallConfirmation = void 0;
+exports.ElementInstallConfirmation = exports.ElementLibraryAddConfirmation = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const colors_1 = require("../helpers/colors");
 const ValidationMessage_1 = require("./NewComposition/ValidationMessage");
@@ -130,6 +130,13 @@ const warningDescriptionStyle = {
     fontWeight: 400,
     lineHeight: 1.5,
 };
+const browseElementsStyle = {
+    color: 'inherit',
+    fontFamily: 'inherit',
+    fontSize: 'inherit',
+    fontWeight: 600,
+    lineHeight: 'inherit',
+};
 const sourceDetailsStyle = {
     paddingTop: 2,
     fontFamily: 'sans-serif',
@@ -171,6 +178,23 @@ const makeSourceControlsVisible = (sourceCode) => {
         return `\\u${(_a = character.codePointAt(0)) === null || _a === void 0 ? void 0 : _a.toString(16).padStart(4, '0')}`;
     });
 };
+const ElementLibraryAddConfirmation = ({ displayName, origin, url }) => {
+    return (jsx_runtime_1.jsxs("div", { style: container, children: [
+            jsx_runtime_1.jsxs("dl", { style: metadataStyle, "aria-label": "Catalog details", children: [displayName === null ? null : (jsx_runtime_1.jsxs("div", { style: metadataRowStyle, children: [
+                            jsx_runtime_1.jsx("dt", { style: metadataTermStyle, children: "Display name" }), jsx_runtime_1.jsx("dd", { style: metadataDescriptionStyle, children: displayName })
+                        ] })), jsx_runtime_1.jsxs("div", { style: metadataRowStyle, children: [
+                            jsx_runtime_1.jsx("dt", { style: metadataTermStyle, children: "Request source" }), jsx_runtime_1.jsx("dd", { style: metadataDescriptionStyle, children: origin })
+                        ] }), jsx_runtime_1.jsxs("div", { style: metadataRowStyle, children: [
+                            jsx_runtime_1.jsx("dt", { style: metadataTermStyle, children: "Catalog URL" }), jsx_runtime_1.jsx("dd", { style: metadataDescriptionStyle, children: jsx_runtime_1.jsx("code", { style: codeStyle, children: url }) })
+                        ] })
+                ] }), jsx_runtime_1.jsxs("div", { style: warningStyle, children: [
+                    jsx_runtime_1.jsx(ValidationMessage_1.WarningTriangle, { style: warningIconStyle }), jsx_runtime_1.jsxs("p", { style: warningDescriptionStyle, children: ["This adds the catalog to", ' ', jsx_runtime_1.jsx("strong", { style: browseElementsStyle, children: "Browse Elements" }),
+                            " when nothing is selected on the canvas. It is saved in", ' ', jsx_runtime_1.jsx("code", { style: codeStyle, children: "remotion.config.ts" }),
+                            "."] })
+                ] })
+        ] }));
+};
+exports.ElementLibraryAddConfirmation = ElementLibraryAddConfirmation;
 const ElementInstallConfirmation = ({ displayName, sourceLabel, sourceIsUnverified, compositionId, filePath, overwritesExistingFile, dependenciesToReview, missingPackages, sourceCode, usesBrowserDependencyResolution, }) => {
     return (jsx_runtime_1.jsxs("div", { style: container, children: [
             jsx_runtime_1.jsxs("dl", { style: metadataStyle, "aria-label": "Installation details", children: [

package/dist/components/ElementLibraryModal.js

@@ -29,7 +29,9 @@ const ElementLibraryModal = ({ name, url }) => {
         // Studio is cross-origin isolated. A credentialless iframe may embed a
         // library that does not set Cross-Origin-Resource-Policy headers.
         iframe.setAttribute('credentialless', '');
-        iframe.src = url;
+        const iframeUrl = new URL(url);
+        iframeUrl.searchParams.set('remotion-studio', 'true');
+        iframe.src = iframeUrl.toString();
     }, [url]);
     return (jsx_runtime_1.jsxs(DismissableModal_1.DismissableModal, { panelStyle: panelStyle, children: [
             jsx_runtime_1.jsx(ModalHeader_1.ModalHeader, { title: name }), jsx_runtime_1.jsx("iframe", { ref: iframeRef, allow: "local-network-access; loopback-network", style: iframeStyle, title: `${name} library` })

package/dist/components/InlineCaptionInspector.js

@@ -11,6 +11,7 @@ const serializeCaptions = (captions) => {
     return JSON.stringify(captions);
 };
 const getCaptionPatches = ({ previous, next, }) => {
+    var _a;
     if (previous.length !== next.length) {
         return null;
     }
@@ -20,11 +21,21 @@ const getCaptionPatches = ({ previous, next, }) => {
         if (!after) {
             return null;
         }
+        const changes = {};
         if (before.text !== after.text) {
+            changes.text = after.text;
+        }
+        if (Boolean(before.pageBreakAfter) !== Boolean(after.pageBreakAfter)) {
+            changes.pageBreakAfter = Boolean(after.pageBreakAfter);
+        }
+        if (Object.keys(changes).length > 0) {
             patches.push({
                 index,
-                before,
-                changes: { text: after.text },
+                before: {
+                    ...before,
+                    pageBreakAfter: (_a = before.pageBreakAfter) !== null && _a !== void 0 ? _a : null,
+                },
+                changes,
             });
         }
     }

package/dist/components/Modals.js

@@ -11,8 +11,10 @@ const client_id_1 = require("../helpers/client-id");
 const studio_runtime_config_1 = require("../helpers/studio-runtime-config");
 const modals_1 = require("../state/modals");
 const AskAiModal_1 = require("./AskAiModal");
+const call_api_1 = require("./call-api");
 const ConfirmationDialog_1 = require("./ConfirmationDialog");
 const EffectPickerModal_1 = require("./EffectPickerModal");
+const ElementInstallConfirmation_1 = require("./ElementInstallConfirmation");
 const ElementLibraryModal_1 = require("./ElementLibraryModal");
 const FixComputedValueModal_1 = require("./FixComputedValueModal");
 const DeleteComposition_1 = require("./NewComposition/DeleteComposition");
@@ -23,6 +25,7 @@ const NewFolder_1 = require("./NewComposition/NewFolder");
 const RenameComposition_1 = require("./NewComposition/RenameComposition");
 const RenameFolder_1 = require("./NewComposition/RenameFolder");
 const RenameStaticFile_1 = require("./NewComposition/RenameStaticFile");
+const NotificationCenter_1 = require("./Notifications/NotificationCenter");
 const OverrideInputProps_1 = require("./OverrideInputProps");
 const QuickSwitcher_1 = __importDefault(require("./QuickSwitcher/QuickSwitcher"));
 const RenderStatusModal_1 = require("./RenderModal/RenderStatusModal");
@@ -38,6 +41,7 @@ const Modals = ({ readOnlyStudio }) => {
     const { previewServerState, subscribeToEvent } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
     const canRender = previewServerState.type === 'connected';
     const isBrowserStudio = (0, browser_studio_operations_1.getBrowserStudioOperations)() !== null;
+    const confirm = (0, ConfirmationDialog_1.useConfirmationDialog)();
     (0, react_1.useEffect)(() => {
         if (isBrowserStudio) {
             return;
@@ -53,6 +57,51 @@ const Modals = ({ readOnlyStudio }) => {
             });
         });
     }, [isBrowserStudio, setSelectedModal, subscribeToEvent]);
+    (0, react_1.useEffect)(() => {
+        if (isBrowserStudio) {
+            return;
+        }
+        return subscribeToEvent('element-library-add-request', (event) => {
+            if (event.type !== 'element-library-add-request') {
+                return;
+            }
+            (async () => {
+                const confirmed = await confirm({
+                    title: 'Add Element catalog',
+                    message: (jsx_runtime_1.jsx(ElementInstallConfirmation_1.ElementLibraryAddConfirmation, { displayName: event.displayName, origin: event.origin, url: event.url })),
+                    confirmLabel: 'Add catalog',
+                    cancelLabel: 'Cancel',
+                });
+                if (!confirmed) {
+                    return;
+                }
+                if (previewServerState.type !== 'connected') {
+                    (0, NotificationCenter_1.showNotification)('Could not add catalog: Studio disconnected', 4000);
+                    return;
+                }
+                try {
+                    const result = await (0, call_api_1.callApi)('/api/update-config', {
+                        clientId: previewServerState.clientId,
+                        updates: [
+                            {
+                                setter: 'addElementLibrary',
+                                type: 'set',
+                                value: event.displayName === null
+                                    ? { url: event.url }
+                                    : { url: event.url, displayName: event.displayName },
+                            },
+                        ],
+                    });
+                    if (!result.success) {
+                        (0, NotificationCenter_1.showNotification)(`Could not add catalog: ${result.reason}`, 4000);
+                    }
+                }
+                catch (error) {
+                    (0, NotificationCenter_1.showNotification)(`Could not add catalog: ${error.message}`, 4000);
+                }
+            })();
+        });
+    }, [confirm, isBrowserStudio, previewServerState, subscribeToEvent]);
     return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [modalContextType && modalContextType.type === 'new-comp' && (jsx_runtime_1.jsx(NewComposition_1.NewComposition, { folderName: modalContextType.folderName, parentName: modalContextType.parentName, stack: modalContextType.stack, canvasCapture: modalContextType.canvasCapture })), modalContextType && modalContextType.type === 'new-folder' && (jsx_runtime_1.jsx(NewFolder_1.NewFolder, { parentName: modalContextType.parentName, stack: modalContextType.stack })), modalContextType && modalContextType.type === 'duplicate-comp' && (jsx_runtime_1.jsx(DuplicateComposition_1.DuplicateComposition, { compositionType: modalContextType.compositionType, compositionId: modalContextType.compositionId })), modalContextType && modalContextType.type === 'delete-comp' && (jsx_runtime_1.jsx(DeleteComposition_1.DeleteComposition, { compositionId: modalContextType.compositionId })), modalContextType && modalContextType.type === 'rename-comp' && (jsx_runtime_1.jsx(RenameComposition_1.RenameComposition, { compositionId: modalContextType.compositionId })), modalContextType && modalContextType.type === 'delete-folder' && (jsx_runtime_1.jsx(DeleteFolder_1.DeleteFolder, { folderName: modalContextType.folderName, parentName: modalContextType.parentName, stack: modalContextType.stack })), modalContextType && modalContextType.type === 'rename-folder' && (jsx_runtime_1.jsx(RenameFolder_1.RenameFolder, { folderName: modalContextType.folderName, parentName: modalContextType.parentName, stack: modalContextType.stack })), modalContextType && modalContextType.type === 'rename-static-file' && (jsx_runtime_1.jsx(RenameStaticFile_1.RenameStaticFileModal, { relativePath: modalContextType.relativePath })), modalContextType && modalContextType.type === 'input-props-override' && (jsx_runtime_1.jsx(OverrideInputProps_1.OverrideInputPropsModal, {})), modalContextType &&
                 modalContextType.type === 'settings' &&
                 (!isBrowserStudio ||

package/dist/components/PlaybackRateSelector.js

@@ -10,9 +10,6 @@ const Checkmark_1 = require("../icons/Checkmark");
 const playback_rate_1 = require("../icons/playback-rate");
 const playbackrate_1 = require("../state/playbackrate");
 const TimelineCombobox_1 = require("./TimelineCombobox");
-const commonPlaybackRates = [
-    -4, -2, -1, -0.5, -0.25, 0.25, 0.5, 1, 1.5, 2, 4,
-];
 const getPlaybackRateLabel = (playbackRate) => {
     return `${playbackRate}x`;
 };
@@ -23,7 +20,7 @@ const usePlaybackRateMenuItems = ({ playbackRate, setPlaybackRate, }) => {
             type: 'divider',
             id: 'divider',
         };
-        const values = commonPlaybackRates.map((newPlaybackRate) => {
+        const values = playbackrate_1.commonPlaybackRates.map((newPlaybackRate) => {
             return {
                 id: String(newPlaybackRate),
                 label: getPlaybackRateLabel(newPlaybackRate),
@@ -41,7 +38,7 @@ const usePlaybackRateMenuItems = ({ playbackRate, setPlaybackRate, }) => {
                 quickSwitcherLabel: null,
             };
         });
-        const middle = Math.floor(commonPlaybackRates.length / 2);
+        const middle = Math.floor(playbackrate_1.commonPlaybackRates.length / 2);
         return [...values.slice(0, middle), divider, ...values.slice(middle)];
     }, [playbackRate, setPlaybackRate]);
     return {

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

@@ -1,7 +1,9 @@
 import React from 'react';
+import type { ComboboxValue } from '../NewComposition/ComboBox';
 import type { QuickSwitcherMode } from './NoResults';
 export declare const ExplorerQuickSwitcherTrigger: React.FC<{
     readonly mode: QuickSwitcherMode;
     readonly showShortcut: boolean;
     readonly tabIndex: number;
+    readonly getActions: () => ComboboxValue[];
 }>;