@remotion/studio 4.0.517 → 4.0.519

package/dist/components/CompositionSelectorItem.js

@@ -7,6 +7,7 @@ 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 hoverable_1 = require("../helpers/hoverable");
 const noop_1 = require("../helpers/noop");
 const sidebar_scroll_into_view_1 = require("../helpers/sidebar-scroll-into-view");
 const folder_1 = require("../icons/folder");
@@ -39,7 +40,6 @@ const itemStyle = {
     borderRadius: 4,
     width: 'calc(100% - 12px)',
     textAlign: 'left',
-    backgroundColor: colors_1.BACKGROUND,
     height: layout_1.COMPACT_CONTROL_ROW_HEIGHT,
     userSelect: 'none',
 };
@@ -64,13 +64,6 @@ const CompositionSelectorItem = ({ item, level, currentComposition, tabIndex, se
         }
         return false;
     }, [item, currentComposition]);
-    const [hovered, setHovered] = (0, react_1.useState)(false);
-    const onPointerEnter = (0, react_1.useCallback)(() => {
-        setHovered(true);
-    }, []);
-    const onPointerLeave = (0, react_1.useCallback)(() => {
-        setHovered(false);
-    }, []);
     const [isDragging, setIsDragging] = (0, react_1.useState)(false);
     const [dragHovered, setDragHovered] = (0, react_1.useState)(false);
     const compositionRowRef = (0, react_1.useRef)(null);
@@ -86,22 +79,22 @@ const CompositionSelectorItem = ({ item, level, currentComposition, tabIndex, se
         });
     }, [compositionId, selected]);
     const style = (0, react_1.useMemo)(() => {
+        const idleBackground = dragHovered
+            ? colors_1.WHITE_ALPHA_12
+            : selected
+                ? colors_1.WHITE_ALPHA_06
+                : colors_1.TRANSPARENT;
         return {
             ...itemStyle,
-            backgroundColor: dragHovered
-                ? colors_1.WHITE_ALPHA_12
-                : hovered || selected
-                    ? colors_1.WHITE_ALPHA_06
-                    : colors_1.TRANSPARENT,
+            ...(0, hoverable_1.hoverableStyle)({
+                idleBackground,
+                hoverBackground: dragHovered ? colors_1.WHITE_ALPHA_12 : colors_1.WHITE_ALPHA_06,
+                idleColor: selected ? colors_1.WHITE : colors_1.LIGHT_TEXT,
+                hoverColor: colors_1.WHITE,
+            }),
             paddingLeft: 12 + level * 8,
         };
-    }, [dragHovered, hovered, level, selected]);
-    const label = (0, react_1.useMemo)(() => {
-        return {
-            ...labelStyle,
-            color: selected || hovered ? colors_1.WHITE : colors_1.LIGHT_TEXT,
-        };
-    }, [hovered, selected]);
+    }, [dragHovered, level, selected]);
     const onClick = (0, react_1.useCallback)((evt) => {
         evt.preventDefault();
         if (item.type === 'composition') {
@@ -253,13 +246,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, { 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 })
+                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 ${hoverable_1.HOVERABLE_CLASS_NAME} ${hoverable_1.HOVER_GROUP_CLASS_NAME}`, 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: colors_1.CURRENT_COLOR })) : (jsx_runtime_1.jsx(folder_1.CollapsedFolderIcon, { color: colors_1.CURRENT_COLOR, style: iconStyle })), jsx_runtime_1.jsx(layout_1.Spacing, { x: 1 }), jsx_runtime_1.jsx("div", { style: labelStyle, children: item.folderName }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.5 }), jsx_runtime_1.jsx(CompositionContextButton_1.CompositionContextButton, { getItems: getContextMenuItems, visible: true, readOnlyStudio: window.remotion_isReadOnlyStudio })
                             ] }) }) }), 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, { 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 })
+    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, 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 ${hoverable_1.HOVERABLE_CLASS_NAME} ${hoverable_1.HOVER_GROUP_CLASS_NAME}`, "data-compname": item.composition.id, children: [
+                    jsx_runtime_1.jsx(CompositionOrStillIcon_1.CompositionOrStillIcon, { composition: item.composition, color: colors_1.CURRENT_COLOR, style: iconStyle }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 1 }), jsx_runtime_1.jsx("div", { style: labelStyle, children: item.composition.id }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.5 }), jsx_runtime_1.jsx(CompositionContextButton_1.CompositionContextButton, { getItems: getContextMenuItems, visible: !isDragging, readOnlyStudio: window.remotion_isReadOnlyStudio }), jsx_runtime_1.jsx(SidebarRenderButton_1.SidebarRenderButton, { visible: !isDragging, composition: item.composition, readOnlyStudio: window.remotion_isReadOnlyStudio })
                 ] }) }) }));
 };
 exports.CompositionSelectorItem = CompositionSelectorItem;

package/dist/components/ConfigureLicenseModal.js

@@ -5,6 +5,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const colors_1 = require("../helpers/colors");
 const layout_1 = require("./layout");
+const LicenseExplanation_1 = require("./LicenseExplanation");
 const LicenseKeyValidation_1 = require("./LicenseKeyValidation");
 const RemInput_1 = require("./NewComposition/RemInput");
 const ValidationMessage_1 = require("./NewComposition/ValidationMessage");
@@ -28,16 +29,12 @@ const description = {
     lineHeight: 1.5,
     margin: 0,
 };
-const descriptionLink = {
-    color: colors_1.WHITE,
+const externalDescriptionLink = {
+    color: colors_1.BLUE,
     fontFamily: 'sans-serif',
     fontSize: 14,
     lineHeight: '21px',
 };
-const externalDescriptionLink = {
-    ...descriptionLink,
-    color: colors_1.BLUE,
-};
 const externalLinkIndicator = {
     display: 'inline-block',
     height: 12,
@@ -45,32 +42,6 @@ const externalLinkIndicator = {
     verticalAlign: -2,
     width: 12,
 };
-const licenseExplanation = {
-    display: 'flex',
-    flexDirection: 'column',
-    gap: 12,
-};
-const licenseExplanationRow = {
-    display: 'flex',
-    alignItems: 'center',
-    gap: 12,
-};
-const people = {
-    display: 'grid',
-    gridTemplateColumns: 'repeat(4, 9px)',
-    gap: 3,
-    flexShrink: 0,
-};
-const person = {
-    display: 'block',
-    height: 24,
-    overflow: 'visible',
-    width: 9,
-};
-const PersonIcon = ({ handsUp, opacity }) => {
-    return (jsx_runtime_1.jsxs("svg", { "aria-hidden": "true", opacity: opacity, style: person, viewBox: "0 0 192 512", xmlns: "http://www.w3.org/2000/svg", children: [
-            jsx_runtime_1.jsx("path", { fill: colors_1.LIGHT_TEXT, d: "M128 64a32 32 0 1 0 -64 0 32 32 0 1 0 64 0zM32 64A64 64 0 1 1 160 64 64 64 0 1 1 32 64zm0 128l0 128 128 0 0-128-128 0zM0 160l192 0 0 192-32 0 0 160-32 0 0-160-64 0 0 160-32 0 0-160-32 0 0-192z" }), handsUp ? (jsx_runtime_1.jsx("path", { d: "M10.667 192 0 -32 M181.333 192 192 -32", fill: "none", stroke: colors_1.LIGHT_TEXT, strokeWidth: "32" })) : null] }));
-};
 const freeLicenseMessage = {
     ...description,
     marginBottom: 5,
@@ -199,22 +170,7 @@ const LicenseSettings = () => {
     });
     const displayedError = error !== null && error !== void 0 ? error : settingsError;
     return (jsx_runtime_1.jsx("div", { style: container, children: jsx_runtime_1.jsxs("div", { style: content, children: [
-                jsx_runtime_1.jsxs("div", { style: licenseExplanation, children: [
-                        jsx_runtime_1.jsxs("div", { style: licenseExplanationRow, children: [
-                                jsx_runtime_1.jsxs("div", { style: people, children: [
-                                        jsx_runtime_1.jsx(PersonIcon, { handsUp: true, opacity: 1 }), jsx_runtime_1.jsx(PersonIcon, { handsUp: true, opacity: 1 }), jsx_runtime_1.jsx(PersonIcon, { handsUp: true, opacity: 1 })
-                                    ] }), jsx_runtime_1.jsx("p", { style: description, children: "Remotion is free to use if you are an individual or company of 3 or less." })
-                            ] }), jsx_runtime_1.jsxs("div", { style: licenseExplanationRow, children: [
-                                jsx_runtime_1.jsxs("div", { style: people, children: [
-                                        jsx_runtime_1.jsx(PersonIcon, { handsUp: false, opacity: 1 }), jsx_runtime_1.jsx(PersonIcon, { handsUp: false, opacity: 1 }), jsx_runtime_1.jsx(PersonIcon, { handsUp: false, opacity: 1 }), jsx_runtime_1.jsx(PersonIcon, { handsUp: false, opacity: 1 })
-                                    ] }), jsx_runtime_1.jsxs("p", { style: description, children: ["If used in an organization with 4+ people, you need a", ' ', jsx_runtime_1.jsx("a", { style: descriptionLink, href: "https://remotion.pro/license", children: "Company License" }),
-                                        "."] })
-                            ] }), jsx_runtime_1.jsxs("div", { style: licenseExplanationRow, children: [
-                                jsx_runtime_1.jsxs("div", { style: people, children: [
-                                        jsx_runtime_1.jsx(PersonIcon, { handsUp: false, opacity: 1 }), jsx_runtime_1.jsx(PersonIcon, { handsUp: false, opacity: 0.3 }), jsx_runtime_1.jsx(PersonIcon, { handsUp: false, opacity: 0.3 }), jsx_runtime_1.jsx(PersonIcon, { handsUp: false, opacity: 0.3 })
-                                    ] }), jsx_runtime_1.jsx("p", { style: description, children: "The total headcount matters, not the amount of people using Remotion." })
-                            ] })
-                    ] }), jsx_runtime_1.jsx(layout_1.Spacing, { y: 2 }), jsx_runtime_1.jsxs("div", { "aria-label": "License type", role: "radiogroup", children: [
+                jsx_runtime_1.jsx(LicenseExplanation_1.LicenseExplanation, {}), jsx_runtime_1.jsx(layout_1.Spacing, { y: 2 }), jsx_runtime_1.jsxs("div", { "aria-label": "License type", role: "radiogroup", children: [
                         jsx_runtime_1.jsx(RadioButton_1.RadioButton, { checked: licenseType === 'free', onClick: toggleFreeLicense, children: "I am eligible for the Free License" }), licenseType === 'free' ? (jsx_runtime_1.jsx("p", { style: freeLicenseMessage, children: "That's it! Enjoy Remotion." })) : null, jsx_runtime_1.jsx(RadioButton_1.RadioButton, { checked: licenseType === 'company', onClick: toggleCompanyLicense, children: "I need a Company License" }), licenseType === 'company' ? (jsx_runtime_1.jsxs("div", { style: companyLicenseContent, children: [
                                 jsx_runtime_1.jsxs("p", { style: description, children: ["Visit", ' ', jsx_runtime_1.jsxs("a", { style: externalDescriptionLink, href: "https://remotion.pro/license", target: "_blank", rel: "noopener noreferrer", children: ["remotion.pro/license",
                                                 jsx_runtime_1.jsx("svg", { "aria-hidden": "true", viewBox: "0 0 16 16", style: externalLinkIndicator, children: jsx_runtime_1.jsx("path", { d: "M4 12 12 4M6 4h6v6", fill: "none", stroke: colors_1.BLUE, strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "1.5" }) })

package/dist/components/CurrentAsset.js

@@ -215,7 +215,7 @@ const AssetInfo = ({ assetName, contentSized = false, onAssetClick, readOnlyStud
     return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
             jsx_runtime_1.jsx(InspectorInfoHeader_1.InspectorInfoHeader, { contentSized: contentSized, minHeight: exports.CURRENT_ASSET_HEIGHT, padding: contentSized
                     ? `0 ${InspectorPanelLayout_1.INSPECTOR_PANEL_HORIZONTAL_PADDING}px 6px`
-                    : '4px 0', children: jsx_runtime_1.jsx(InlineEditableTitle_1.InlineEditableTitle, { value: fileName, canRename: canRename, getInitialSelection: use_rename_static_file_1.getStaticFileRenameSelection, onClick: onAssetClick, onCommit: onRename, size: contentSized ? 'default' : 'inspector', title: assetName }) }), fileDetails.length > 0 ? (jsx_runtime_1.jsx(common_1.InspectorSection, { header: "File", children: jsx_runtime_1.jsx("div", { style: assetMetadataStyle, children: fileDetails.map((detail) => (jsx_runtime_1.jsx(common_1.InspectorDetailRow, { label: detail.label, children: jsx_runtime_1.jsx("span", { style: assetMetadataValueStyle, children: detail.value }) }, detail.label))) }) })) : null, mediaSections && mediaSections.video ? (jsx_runtime_1.jsx(common_1.InspectorSection, { header: "Video", children: jsx_runtime_1.jsx("div", { style: assetMetadataStyle, children: mediaSections.video.map((detail) => (jsx_runtime_1.jsx(common_1.InspectorDetailRow, { label: detail.label, children: jsx_runtime_1.jsx("span", { style: assetMetadataValueStyle, children: detail.value }) }, detail.label))) }) })) : null, mediaSections && mediaSections.audio !== null ? (jsx_runtime_1.jsx(common_1.InspectorSection, { header: "Audio", children: mediaSections.audio.length === 0 ? (jsx_runtime_1.jsx("div", { style: assetEmptyStateStyle, children: "None" })) : (jsx_runtime_1.jsx("div", { style: assetMetadataStyle, children: mediaSections.audio.map((detail) => (jsx_runtime_1.jsx(common_1.InspectorDetailRow, { label: detail.label, children: jsx_runtime_1.jsx("span", { style: assetMetadataValueStyle, children: detail.value }) }, detail.label))) })) })) : null, jsx_runtime_1.jsxs(common_1.InspectorQuickActionsSection, { children: [src ? (jsx_runtime_1.jsxs(common_1.InspectorQuickAction, { disabled: false, onClick: onOpenConvert, renderIcon: (color) => (jsx_runtime_1.jsx(remotion_convert_1.RemotionConvertIcon, { color: color, style: quickActionIconStyle })), children: ["Convert",
+                    : '4px 0', children: jsx_runtime_1.jsx(InlineEditableTitle_1.InlineEditableTitle, { value: fileName, canRename: canRename, getInitialSelection: use_rename_static_file_1.getStaticFileRenameSelection, onClick: onAssetClick, onCommit: onRename, size: contentSized ? 'default' : 'inspector', title: assetName }) }), fileDetails.length > 0 ? (jsx_runtime_1.jsx(common_1.InspectorSection, { header: "File", children: jsx_runtime_1.jsx("div", { style: assetMetadataStyle, children: fileDetails.map((detail) => (jsx_runtime_1.jsx(common_1.InspectorDetailRow, { label: detail.label, children: jsx_runtime_1.jsx("span", { style: assetMetadataValueStyle, children: detail.value }) }, detail.label))) }) })) : null, mediaSections && mediaSections.video ? (jsx_runtime_1.jsx(common_1.InspectorSection, { header: "Video", children: jsx_runtime_1.jsx("div", { style: assetMetadataStyle, children: mediaSections.video.map((detail) => (jsx_runtime_1.jsx(common_1.InspectorDetailRow, { label: detail.label, children: jsx_runtime_1.jsx("span", { style: assetMetadataValueStyle, children: detail.value }) }, detail.label))) }) })) : null, mediaSections && mediaSections.audio !== null ? (jsx_runtime_1.jsx(common_1.InspectorSection, { header: "Audio", children: mediaSections.audio.length === 0 ? (jsx_runtime_1.jsx("div", { style: assetEmptyStateStyle, children: "None" })) : (jsx_runtime_1.jsx("div", { style: assetMetadataStyle, children: mediaSections.audio.map((detail) => (jsx_runtime_1.jsx(common_1.InspectorDetailRow, { label: detail.label, children: jsx_runtime_1.jsx("span", { style: assetMetadataValueStyle, children: detail.value }) }, detail.label))) })) })) : null, jsx_runtime_1.jsx(common_1.InspectorSectionHeader, { children: "Actions" }), jsx_runtime_1.jsxs(common_1.InspectorQuickActionsSection, { children: [src ? (jsx_runtime_1.jsxs(common_1.InspectorQuickAction, { disabled: false, onClick: onOpenConvert, renderIcon: (color) => (jsx_runtime_1.jsx(remotion_convert_1.RemotionConvertIcon, { color: color, style: quickActionIconStyle })), children: ["Convert",
                             jsx_runtime_1.jsx("svg", { "aria-hidden": "true", viewBox: "0 0 16 16", style: convertArrowStyle, children: jsx_runtime_1.jsx("path", { d: "M4 12 12 4M6 4h6v6", fill: "none", stroke: colors_1.CURRENT_COLOR, strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "1.5" }) })
                         ] })) : null, fileManagerAvailable ? (jsx_runtime_1.jsxs(common_1.InspectorQuickAction, { disabled: fileManagerDisabled, onClick: onShowInFileManager, renderIcon: (color) => (jsx_runtime_1.jsx(folder_1.ExpandedFolderIcon, { color: color, style: quickActionIconStyle })), children: ["Show in ", fileManagerName] })) : null, jsx_runtime_1.jsx(common_1.InspectorQuickAction, { disabled: mutationsDisabled, onClick: onDelete, renderIcon: (color) => (jsx_runtime_1.jsx(trash_1.TrashIcon, { color: color, style: quickActionIconStyle })), children: "Delete" })] })
         ] }));

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,13 +1,31 @@
+import type { ElementInstallExpectedFileState, ElementInstallRequest } from '@remotion/studio-shared';
 import React from 'react';
-export declare const ElementInstallConfirmation: React.FC<{
-    readonly displayName: string;
-    readonly sourceLabel: string;
-    readonly sourceIsUnverified: boolean;
-    readonly compositionId: string;
+export declare const ElementLibraryAddConfirmation: React.FC<{
+    readonly displayName: string | null;
+    readonly origin: string;
+    readonly url: string;
+}>;
+type ElementInstallPlan = {
+    readonly compositionFile: string;
     readonly filePath: string;
-    readonly overwritesExistingFile: boolean;
+    readonly expectedFileState: ElementInstallExpectedFileState;
+};
+type CurrentCompositionMetadata = {
+    readonly durationInFrames: number;
+    readonly fps: number;
+    readonly height: number;
+    readonly width: number;
+};
+export declare const ElementInstallConfirmation: React.FC<{
+    readonly currentCompositionMetadata: CurrentCompositionMetadata | null;
+    readonly currentPlan: ElementInstallPlan | null;
     readonly dependenciesToReview: string[];
     readonly missingPackages: string[];
-    readonly sourceCode: string;
+    readonly newPlan: ElementInstallPlan;
+    readonly onClose: () => void;
+    readonly request: ElementInstallRequest;
+    readonly sourceIsUnverified: boolean;
+    readonly sourceLabel: string;
     readonly usesBrowserDependencyResolution: boolean;
 }>;
+export {};