@remotion/studio 4.0.494 → 4.0.496

package/dist/components/Preview.js

@@ -9,6 +9,7 @@ const ErrorLoader_1 = require("../error-overlay/remotion-overlay/ErrorLoader");
 const checkerboard_background_1 = require("../helpers/checkerboard-background");
 const colors_1 = require("../helpers/colors");
 const get_preview_file_type_1 = require("../helpers/get-preview-file-type");
+const studio_fit_padding_1 = require("../helpers/studio-fit-padding");
 const checkerboard_1 = require("../state/checkerboard");
 const is_menu_item_1 = require("./Menu/is-menu-item");
 const RenderPreview_1 = require("./RenderPreview");
@@ -78,13 +79,20 @@ const CompWhenItHasDimensions = ({ contentDimensions, canvasSize, canvasContent,
                 scale: 1,
             };
         }
-        return player_1.PlayerInternals.calculateCanvasTransformation({
-            canvasSize,
-            compositionHeight: contentDimensions.height,
-            compositionWidth: contentDimensions.width,
-            previewSize: previewSize.size,
-        });
-    }, [canvasSize, contentDimensions, previewSize.size]);
+        return canvasContent.type === 'composition'
+            ? (0, studio_fit_padding_1.calculateStudioCanvasTransformation)({
+                canvasSize,
+                compositionHeight: contentDimensions.height,
+                compositionWidth: contentDimensions.width,
+                previewSize: previewSize.size,
+            })
+            : player_1.PlayerInternals.calculateCanvasTransformation({
+                canvasSize,
+                compositionHeight: contentDimensions.height,
+                compositionWidth: contentDimensions.width,
+                previewSize: previewSize.size,
+            });
+    }, [canvasContent.type, canvasSize, contentDimensions, previewSize.size]);
     const outer = (0, react_1.useMemo)(() => {
         return {
             width: contentDimensions === 'none' ? '100%' : contentDimensions.width * scale,

package/dist/components/PreviewToolbar.js

@@ -26,7 +26,7 @@ const SizeSelector_1 = require("./SizeSelector");
 const SnappingToggle_1 = require("./SnappingToggle");
 const TimelineZoomControls_1 = require("./Timeline/TimelineZoomControls");
 const TimelineInOutToggle_1 = require("./TimelineInOutToggle");
-const TOOLBAR_HEIGHT = 50;
+const TOOLBAR_HEIGHT = 40;
 const container = {
     display: 'flex',
     justifyContent: 'center',
@@ -64,7 +64,7 @@ const scrollIndicatorRight = {
 };
 const sideContainer = {
     width: 300,
-    height: 36,
+    height: 30,
     display: 'flex',
     flexDirection: 'row',
     alignItems: 'center',
@@ -169,7 +169,7 @@ const PreviewToolbar = ({ readOnlyStudio, bufferStateDelayInMilliseconds }) => {
                     jsx_runtime_1.jsx(PreviewToolbarControl, { children: jsx_runtime_1.jsx(CheckboardToggle_1.CheckboardToggle, {}) }), jsx_runtime_1.jsx(PreviewToolbarControl, { children: jsx_runtime_1.jsx(OutlineToggle_1.OutlineToggle, { disabled: readOnlyStudio }) }), jsx_runtime_1.jsx(PreviewToolbarControl, { children: jsx_runtime_1.jsx(SnappingToggle_1.SnappingToggle, { disabled: readOnlyStudio }) })
                 ] })) : null, jsx_runtime_1.jsx(layout_1.Spacing, { x: 1 }), canvasContent && isFullscreenSupported ? (jsx_runtime_1.jsx(PreviewToolbarControl, { children: jsx_runtime_1.jsx(FullscreenToggle_1.FullScreenToggle, {}) })) : null, jsx_runtime_1.jsx(layout_1.Flex, {}), isMobileLayout && (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
                     jsx_runtime_1.jsx(layout_1.Flex, {}), jsx_runtime_1.jsx(PreviewToolbarControl, { children: jsx_runtime_1.jsx(SizeSelector_1.SizeSelector, {}) }), isStill || isVideoComposition ? (jsx_runtime_1.jsx(PreviewToolbarControl, { children: jsx_runtime_1.jsx(PlaybackRateSelector_1.PlaybackRateSelector, { setPlaybackRate: setPlaybackRate, playbackRate: playbackRate }) })) : null] })), jsx_runtime_1.jsxs("div", { style: sideContainer, children: [
-                    jsx_runtime_1.jsx(layout_1.Flex, {}), !isMobileLayout && jsx_runtime_1.jsx(FpsCounter_1.FpsCounter, { playbackSpeed: playbackRate }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 2 }), jsx_runtime_1.jsx(PreviewToolbarControl, { children: jsx_runtime_1.jsx(RenderButton_1.RenderButton, { readOnlyStudio: readOnlyStudio }) }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 1.5 })
+                    jsx_runtime_1.jsx(layout_1.Flex, {}), !isMobileLayout && jsx_runtime_1.jsx(FpsCounter_1.FpsCounter, { playbackSpeed: playbackRate }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 2 }), jsx_runtime_1.jsx(PreviewToolbarControl, { children: jsx_runtime_1.jsx(RenderButton_1.RenderButton, { readOnlyStudio: readOnlyStudio, size: "compact" }) }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 1.5 })
                 ] }), jsx_runtime_1.jsx(PlaybackKeyboardShortcutsManager_1.PlaybackKeyboardShortcutsManager, { setPlaybackRate: setPlaybackRate }), jsx_runtime_1.jsx(PlaybackRatePersistor_1.PlaybackRatePersistor, {}), jsx_runtime_1.jsx("div", { ref: rightScrollIndicatorRef, style: scrollIndicatorRight })
         ] }));
 };

package/dist/components/RenderButton.d.ts

@@ -2,4 +2,5 @@ import React from 'react';
 export type RenderType = 'server-render' | 'client-render' | 'render-command';
 export declare const RenderButton: React.FC<{
     readonly readOnlyStudio: boolean;
+    readonly size?: 'default' | 'compact';
 }>;

package/dist/components/RenderButton.js

@@ -65,9 +65,47 @@ const dropdownTriggerStyle = {
 const mainButtonContent = {
     paddingLeft: 4,
     paddingRight: 6,
+    minWidth: 0,
 };
 const label = {
+    color: 'inherit',
+    fontFamily: 'inherit',
     fontSize: 14,
+    lineHeight: '21px',
+    minWidth: 0,
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+    whiteSpace: 'nowrap',
+};
+const compactSplitButtonSegmentHeight = layout_1.COMPACT_CONTROL_ROW_HEIGHT;
+const compactMainButtonStyle = {
+    ...mainButtonStyle,
+    boxSizing: 'border-box',
+    height: compactSplitButtonSegmentHeight,
+    paddingLeft: 6,
+    paddingRight: 6,
+    paddingTop: 6,
+    paddingBottom: 6,
+    fontSize: 12,
+};
+const compactDropdownTriggerStyle = {
+    ...dropdownTriggerStyle,
+    boxSizing: 'border-box',
+    height: compactSplitButtonSegmentHeight,
+    paddingLeft: 5,
+    paddingRight: 5,
+    paddingTop: 6,
+    paddingBottom: 6,
+};
+const compactMainButtonContent = {
+    ...mainButtonContent,
+    paddingLeft: 2,
+    paddingRight: 4,
+};
+const compactLabel = {
+    ...label,
+    fontSize: 12,
+    lineHeight: '16px',
 };
 const RENDER_TYPE_STORAGE_KEY = 'remotion.renderType';
 const getInitialRenderType = (readOnlyStudio) => {
@@ -85,7 +123,7 @@ const getInitialRenderType = (readOnlyStudio) => {
     }
     return 'server-render';
 };
-const RenderButton = ({ readOnlyStudio, }) => {
+const RenderButton = ({ readOnlyStudio, size: controlSize = 'default' }) => {
     const { inFrame, outFrame } = (0, in_out_1.useTimelineInOutFramePosition)();
     const { setSelectedModal } = (0, react_1.useContext)(modals_1.ModalsContext);
     const [preferredRenderType, setPreferredRenderType] = (0, react_1.useState)(() => getInitialRenderType(readOnlyStudio));
@@ -153,11 +191,12 @@ const RenderButton = ({ readOnlyStudio, }) => {
     const iconStyle = (0, react_1.useMemo)(() => {
         return {
             style: {
-                height: 16,
+                height: controlSize === 'compact' ? 14 : 16,
                 color: colors_1.CURRENT_COLOR,
+                flexShrink: 0,
             },
         };
-    }, []);
+    }, [controlSize]);
     const video = remotion_1.Internals.useVideo();
     const { getCurrentFrame } = player_1.PlayerInternals.usePlayer();
     const { props } = (0, react_1.useContext)(remotion_1.Internals.EditorPropsContext);
@@ -385,10 +424,11 @@ const RenderButton = ({ readOnlyStudio, }) => {
         return {
             ...splitButtonContainer,
             borderColor: colors_1.BLACK_ALPHA_60,
+            borderRadius: controlSize === 'compact' ? 0 : 4,
             opacity: 1,
             cursor: 'pointer',
         };
-    }, []);
+    }, [controlSize]);
     const renderLabel = renderType === 'server-render'
         ? 'Render'
         : renderType === 'render-command'
@@ -399,9 +439,13 @@ const RenderButton = ({ readOnlyStudio, }) => {
     }
     return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
             jsx_runtime_1.jsx("button", { style: { display: 'none' }, id: "render-modal-button-server", disabled: !canServerRender, onClick: () => openServerRenderModal(false), type: "button" }), ' ', jsx_runtime_1.jsx("button", { style: { display: 'none' }, id: "render-modal-button-client", onClick: openClientRenderModal, type: "button" }), jsx_runtime_1.jsxs("div", { ref: containerRef, style: containerStyle, title: tooltip, children: [
-                    jsx_runtime_1.jsx("button", { type: "button", style: mainButtonStyle, onClick: onClick, id: "render-modal-button", children: jsx_runtime_1.jsxs(layout_1.Row, { align: "center", style: mainButtonContent, children: [
-                                jsx_runtime_1.jsx(render_1.ThinRenderIcon, { fill: colors_1.CURRENT_COLOR_LOWERCASE, svgProps: iconStyle }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 1 }), jsx_runtime_1.jsx("span", { style: label, children: renderLabel })
-                            ] }) }), jsx_runtime_1.jsx("div", { style: dividerStyle }), jsx_runtime_1.jsx("button", { ref: dropdownRef, type: "button", style: dropdownTriggerStyle, className: is_menu_item_1.MENU_INITIATOR_CLASSNAME, onPointerDown: onPointerDown, onClick: onClickDropdown, children: jsx_runtime_1.jsx(caret_1.CaretDown, {}) })
+                    jsx_runtime_1.jsx("button", { type: "button", style: controlSize === 'compact' ? compactMainButtonStyle : mainButtonStyle, onClick: onClick, id: "render-modal-button", children: jsx_runtime_1.jsxs(layout_1.Row, { align: "center", style: controlSize === 'compact'
+                                ? compactMainButtonContent
+                                : mainButtonContent, children: [
+                                jsx_runtime_1.jsx(render_1.ThinRenderIcon, { fill: colors_1.CURRENT_COLOR_LOWERCASE, svgProps: iconStyle }), jsx_runtime_1.jsx(layout_1.Spacing, { x: controlSize === 'compact' ? 0.75 : 1 }), jsx_runtime_1.jsx("span", { style: controlSize === 'compact' ? compactLabel : label, children: renderLabel })
+                            ] }) }), jsx_runtime_1.jsx("div", { style: dividerStyle }), jsx_runtime_1.jsx("button", { ref: dropdownRef, type: "button", style: controlSize === 'compact'
+                            ? compactDropdownTriggerStyle
+                            : dropdownTriggerStyle, className: is_menu_item_1.MENU_INITIATOR_CLASSNAME, onPointerDown: onPointerDown, onClick: onClickDropdown, children: jsx_runtime_1.jsx(caret_1.CaretDown, {}) })
                 ] }), portalStyle
                 ? react_dom_1.default.createPortal(jsx_runtime_1.jsx("div", { style: styles_1.fullScreenOverlay, children: jsx_runtime_1.jsx("div", { style: styles_1.outerPortal, className: "css-reset", children: jsx_runtime_1.jsx(z_index_1.HigherZIndex, { onOutsideClick: onHideDropdown, onEscape: onHideDropdown, children: jsx_runtime_1.jsx("div", { style: portalStyle, onPointerDown: onMenuPointerDown, children: jsx_runtime_1.jsx(MenuContent_1.MenuContent, { onNextMenu: () => { }, onPreviousMenu: () => { }, values: dropdownValues, onHide: onHideDropdown, leaveLeftSpace: false, preselectIndex: dropdownValues.findIndex((v) => v.id === renderType), topItemCanBeUnselected: false, fixedHeight: derivedMaxHeight }) }) }) }) }), (0, portals_1.getPortal)(currentZIndex))
                 : null] }));

package/dist/components/RenderModal/RenderModalOutputName.js

@@ -2,17 +2,50 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.RenderModalOutputName = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const colors_1 = require("../../helpers/colors");
+const get_file_manager_name_1 = require("../../helpers/get-file-manager-name");
+const folder_1 = require("../../icons/folder");
+const InlineAction_1 = require("../InlineAction");
 const layout_1 = require("../layout");
 const RemInput_1 = require("../NewComposition/RemInput");
 const ValidationMessage_1 = require("../NewComposition/ValidationMessage");
+const NotificationCenter_1 = require("../Notifications/NotificationCenter");
+const actions_1 = require("../RenderQueue/actions");
 const layout_2 = require("./layout");
+const existsMessageStyle = {
+    display: 'inline-flex',
+    alignItems: 'center',
+    minWidth: 0,
+    fontFamily: 'sans-serif',
+    fontSize: 13,
+    lineHeight: '18px',
+    color: colors_1.WHITE,
+    whiteSpace: 'nowrap',
+};
+const openIconStyle = {
+    width: 12,
+    height: 12,
+    flexShrink: 0,
+};
 const RenderModalOutputName = ({ existence, inputStyle, outName, onValueChange, validationMessage, label: labelText, }) => {
+    const openExistingOutput = (0, react_1.useCallback)(() => {
+        (0, actions_1.openInFileExplorer)({ directory: outName }).catch((err) => {
+            (0, NotificationCenter_1.showNotification)(`Could not open file: ${err.message}`, 2000);
+        });
+    }, [outName]);
+    const renderOpenIcon = (0, react_1.useCallback)((color) => {
+        return jsx_runtime_1.jsx(folder_1.ExpandedFolderIconSolid, { style: openIconStyle, color: color });
+    }, []);
+    const fileManagerName = (0, get_file_manager_name_1.getFileManagerName)(window.remotion_fileSystemPlatform);
     return (jsx_runtime_1.jsxs("div", { style: layout_2.optionRow, children: [
             jsx_runtime_1.jsx(layout_1.Column, { children: jsx_runtime_1.jsx("div", { style: layout_2.label, children: labelText }) }), jsx_runtime_1.jsx("div", { style: layout_2.rightRow, children: jsx_runtime_1.jsxs("div", { children: [
                         jsx_runtime_1.jsx(RemInput_1.RemotionInput, { status: validationMessage ? 'error' : existence ? 'warning' : 'ok', style: inputStyle, type: "text", value: outName, onChange: onValueChange, rightAlign: true }), validationMessage ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
                                 jsx_runtime_1.jsx(layout_1.Spacing, { y: 1, block: true }), jsx_runtime_1.jsx(ValidationMessage_1.ValidationMessage, { align: "flex-end", message: validationMessage, type: 'error' })
                             ] })) : existence ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
-                                jsx_runtime_1.jsx(layout_1.Spacing, { y: 1, block: true }), jsx_runtime_1.jsx(ValidationMessage_1.ValidationMessage, { align: "flex-end", message: "Will be overwritten", type: 'warning' })
+                                jsx_runtime_1.jsx(layout_1.Spacing, { y: 1, block: true }), jsx_runtime_1.jsx(ValidationMessage_1.ValidationMessage, { align: "flex-end", message: jsx_runtime_1.jsxs("span", { style: existsMessageStyle, children: [
+                                            jsx_runtime_1.jsx(InlineAction_1.InlineAction, { onClick: openExistingOutput, renderAction: renderOpenIcon, title: `Open in ${fileManagerName}` }),
+                                            "Exists, will be overwritten"] }), type: 'warning' })
                             ] })) : null] }) })
         ] }));
 };

package/dist/components/RenderModal/SchemaEditor/ZodDiscriminatedUnionEditor.js

@@ -47,7 +47,7 @@ const ZodDiscriminatedUnionEditor = ({ schema, setValue, value, mayPad, jsonPath
         return {
             discriminator,
             markup: (jsx_runtime_1.jsxs(Fieldset_1.Fieldset, { shouldPad: mayPad, children: [
-                    jsx_runtime_1.jsx(SchemaLabel_1.SchemaLabel, { handleClick: null, jsonPath: [...jsonPath, discriminator], onRemove: onRemove, suffix: null, valid: zodValidation.success }), jsx_runtime_1.jsx(ComboBox_1.Combobox, { title: "Select type", values: comboBoxValues, selectedId: value[discriminator], small: true })
+                    jsx_runtime_1.jsx(SchemaLabel_1.SchemaLabel, { handleClick: null, jsonPath: [...jsonPath, discriminator], onRemove: onRemove, suffix: null, valid: zodValidation.success }), jsx_runtime_1.jsx(ComboBox_1.Combobox, { title: "Select type", values: comboBoxValues, selectedId: value[discriminator], size: "small" })
                 ] }, 'replacement')),
         };
     }, [

package/dist/components/RenderModal/SchemaEditor/ZodEnumEditor.js

@@ -39,7 +39,7 @@ const ZodEnumEditor = ({ schema, jsonPath, setValue, value, onRemove }) => {
     }, [enumValues, onChange, value]);
     const zodValidation = (0, react_1.useMemo)(() => (0, zod_schema_type_1.zodSafeParse)(schema, value), [schema, value]);
     return (jsx_runtime_1.jsxs(Fieldset_1.Fieldset, { shouldPad: true, children: [
-            jsx_runtime_1.jsx(SchemaLabel_1.SchemaLabel, { handleClick: null, jsonPath: jsonPath, onRemove: onRemove, valid: zodValidation.success, suffix: null }), jsx_runtime_1.jsx("div", { style: isRoot ? undefined : container, children: jsx_runtime_1.jsx(ComboBox_1.Combobox, { values: comboBoxValues, selectedId: value, title: value, small: true }) }), jsx_runtime_1.jsx(ZodFieldValidation_1.ZodFieldValidation, { path: jsonPath, zodValidation: zodValidation })
+            jsx_runtime_1.jsx(SchemaLabel_1.SchemaLabel, { handleClick: null, jsonPath: jsonPath, onRemove: onRemove, valid: zodValidation.success, suffix: null }), jsx_runtime_1.jsx("div", { style: isRoot ? undefined : container, children: jsx_runtime_1.jsx(ComboBox_1.Combobox, { values: comboBoxValues, selectedId: value, title: value, size: "small" }) }), jsx_runtime_1.jsx(ZodFieldValidation_1.ZodFieldValidation, { path: jsonPath, zodValidation: zodValidation })
         ] }));
 };
 exports.ZodEnumEditor = ZodEnumEditor;

package/dist/components/RenderModal/SchemaEditor/ZodStaticFileEditor.js

@@ -38,7 +38,7 @@ const ZodStaticFileEditor = ({ schema, jsonPath, setValue, value, onRemove, mayP
         });
     }, [onChange, staticFiles, value]);
     return (jsx_runtime_1.jsxs(Fieldset_1.Fieldset, { shouldPad: mayPad, children: [
-            jsx_runtime_1.jsx(SchemaLabel_1.SchemaLabel, { handleClick: null, jsonPath: jsonPath, onRemove: onRemove, valid: zodValidation.success, suffix: null }), jsx_runtime_1.jsx("div", { style: isRoot ? undefined : container, children: jsx_runtime_1.jsx(ComboBox_1.Combobox, { values: comboBoxValues, selectedId: value, title: value, small: true }) }), jsx_runtime_1.jsx(ZodFieldValidation_1.ZodFieldValidation, { path: jsonPath, zodValidation: zodValidation })
+            jsx_runtime_1.jsx(SchemaLabel_1.SchemaLabel, { handleClick: null, jsonPath: jsonPath, onRemove: onRemove, valid: zodValidation.success, suffix: null }), jsx_runtime_1.jsx("div", { style: isRoot ? undefined : container, children: jsx_runtime_1.jsx(ComboBox_1.Combobox, { values: comboBoxValues, selectedId: value, title: value, size: "small" }) }), jsx_runtime_1.jsx(ZodFieldValidation_1.ZodFieldValidation, { path: jsonPath, zodValidation: zodValidation })
         ] }));
 };
 exports.ZodStaticFileEditor = ZodStaticFileEditor;

package/dist/components/SelectedOutlineOverlay.js

@@ -411,6 +411,7 @@ const SelectedOutlineOverlay = ({ compositionHeight, compositionWidth, scale, tr
             sequences,
             overrideIdsToNodePaths: overrideIdToNodePathMappings,
             compositions,
+            timelinePosition,
         }).map(({ key, keyframeDisplayOffset, nodePathInfo, sequence }) => {
             var _a, _b, _c, _d, _e, _f;
             if (sequence.refForOutline === null) {

package/dist/components/SizeSelector.js

@@ -46,7 +46,7 @@ const getPreviewSizeLabel = (previewSize) => {
 };
 exports.getPreviewSizeLabel = getPreviewSizeLabel;
 const accessibilityLabel = 'Preview Size';
-const comboStyle = { width: 80 };
+const comboStyle = { width: 64 };
 const getUniqueSizes = (size) => {
     const customPreviewSizes = [size, ...commonPreviewSizes];
     const uniqueSizes = [];
@@ -72,7 +72,7 @@ const SizeSelector = () => {
     const { canvasContent } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
     const style = (0, react_1.useMemo)(() => {
         return {
-            padding: ControlButton_1.CONTROL_BUTTON_PADDING,
+            padding: ControlButton_1.CONTROL_BUTTON_PADDING - 2,
         };
     }, []);
     const zoomable = (0, react_1.useMemo)(() => {
@@ -114,6 +114,6 @@ const SizeSelector = () => {
     if (!zoomable) {
         return null;
     }
-    return (jsx_runtime_1.jsx("div", { style: style, "aria-label": accessibilityLabel, children: jsx_runtime_1.jsx(ComboBox_1.Combobox, { title: accessibilityLabel, style: comboStyle, selectedId: String(size.size), values: items }) }));
+    return (jsx_runtime_1.jsx("div", { style: style, "aria-label": accessibilityLabel, children: jsx_runtime_1.jsx(ComboBox_1.Combobox, { size: "compact", title: accessibilityLabel, style: comboStyle, selectedId: String(size.size), values: items }) }));
 };
 exports.SizeSelector = SizeSelector;

package/dist/components/SvgImportDialog.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import type { SvgImportDialogState } from '../state/modals';
+export type SvgImportMode = 'image' | 'inline';
+export declare const useSvgImportDialog: () => () => Promise<SvgImportMode | null>;
+export declare const SvgImportDialog: React.FC<{
+    readonly state: SvgImportDialogState;
+}>;

package/dist/components/SvgImportDialog.js

@@ -0,0 +1,103 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SvgImportDialog = exports.useSvgImportDialog = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const modals_1 = require("../state/modals");
+const Button_1 = require("./Button");
+const layout_1 = require("./layout");
+const ModalButton_1 = require("./ModalButton");
+const ModalContainer_1 = require("./ModalContainer");
+const ModalFooter_1 = require("./ModalFooter");
+const ModalHeader_1 = require("./ModalHeader");
+const content = {
+    padding: 16,
+    fontFamily: 'inherit',
+    fontSize: 14,
+    lineHeight: 1.4,
+    color: 'inherit',
+    minWidth: 560,
+};
+const inlineCode = {
+    fontFamily: 'monospace',
+    fontSize: 'inherit',
+    lineHeight: 'inherit',
+    color: 'inherit',
+};
+const useSvgImportDialog = () => {
+    const { setSelectedModal } = (0, react_1.useContext)(modals_1.ModalsContext);
+    return (0, react_1.useCallback)(() => {
+        return new Promise((resolve) => {
+            let settled = false;
+            const settle = (result) => {
+                if (settled) {
+                    return;
+                }
+                settled = true;
+                resolve(result);
+            };
+            setSelectedModal({
+                type: 'svg-import-dialog',
+                id: String(Math.random()),
+                onImage: () => settle('image'),
+                onInline: () => settle('inline'),
+                onDismiss: () => settle(null),
+            });
+        });
+    }, [setSelectedModal]);
+};
+exports.useSvgImportDialog = useSvgImportDialog;
+const SvgImportDialog = ({ state }) => {
+    const { setSelectedModal } = (0, react_1.useContext)(modals_1.ModalsContext);
+    const settledRef = (0, react_1.useRef)(false);
+    const closeCurrentModal = (0, react_1.useCallback)(() => {
+        setSelectedModal((modal) => (modal === null || modal === void 0 ? void 0 : modal.type) === 'svg-import-dialog' && modal.id === state.id
+            ? null
+            : modal);
+    }, [setSelectedModal, state.id]);
+    const settle = (0, react_1.useCallback)((result) => {
+        if (settledRef.current) {
+            return;
+        }
+        settledRef.current = true;
+        closeCurrentModal();
+        if (result === 'image') {
+            state.onImage();
+        }
+        else if (result === 'inline') {
+            state.onInline();
+        }
+        else {
+            state.onDismiss();
+        }
+    }, [closeCurrentModal, state]);
+    (0, react_1.useEffect)(() => {
+        return () => {
+            if (settledRef.current) {
+                return;
+            }
+            settledRef.current = true;
+            state.onDismiss();
+        };
+    }, [state]);
+    const onImage = (0, react_1.useCallback)(() => {
+        settle('image');
+    }, [settle]);
+    const onInline = (0, react_1.useCallback)(() => {
+        settle('inline');
+    }, [settle]);
+    const onDismiss = (0, react_1.useCallback)(() => {
+        settle(null);
+    }, [settle]);
+    return (jsx_runtime_1.jsxs(ModalContainer_1.ModalContainer, { onOutsideClick: onDismiss, onEscape: onDismiss, children: [
+            jsx_runtime_1.jsx(ModalHeader_1.ModalHeader, { title: "Add .svg", onClose: onDismiss }), jsx_runtime_1.jsx("div", { style: content, children: "Do you want to import this as an image or as inline SVG?" }), jsx_runtime_1.jsx(ModalFooter_1.ModalFooterContainer, { children: jsx_runtime_1.jsxs(layout_1.Row, { align: "center", children: [
+                        jsx_runtime_1.jsx(layout_1.Flex, {}), jsx_runtime_1.jsxs(Button_1.Button, { onClick: onImage, children: ["Add to ",
+                                jsx_runtime_1.jsx("code", { style: inlineCode, children: "public" }),
+                                " and import as", ' ', jsx_runtime_1.jsx("code", { style: inlineCode, children: '<CanvasImage>' })
+                            ] }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 1 }), jsx_runtime_1.jsxs(ModalButton_1.ModalButton, { onClick: onInline, autoFocus: true, children: ["Import as inline ",
+                                jsx_runtime_1.jsx("code", { style: inlineCode, children: '<svg>' })
+                            ] })
+                    ] }) })
+        ] }));
+};
+exports.SvgImportDialog = SvgImportDialog;

package/dist/components/Timeline/Timeline.js

@@ -166,6 +166,7 @@ const TimelineContextMenuArea = ({ children }) => {
                 compositionId: currentCompositionId,
                 destinationDimensions: null,
                 dropPosition: null,
+                svgImportMode: 'image',
             });
         }
         finally {

package/dist/components/Timeline/TimelineAssetField.js

@@ -109,7 +109,7 @@ const TimelineStaticFileAssetField = ({ propStatus, effectiveValue, onSave, onDr
             },
         ];
     }, [current, onSelect, staticFiles, upload]);
-    return (jsx_runtime_1.jsx(ComboBox_1.Combobox, { small: true, title: current, selectedId: current, values: items, style: comboboxStyle }));
+    return (jsx_runtime_1.jsx(ComboBox_1.Combobox, { size: "small", title: current, selectedId: current, values: items, style: comboboxStyle }));
 };
 const TimelineAssetField = (props) => {
     var _a;

package/dist/components/Timeline/TimelineClipboardKeybindings.js

@@ -5,6 +5,9 @@ const studio_shared_1 = require("@remotion/studio-shared");
 const react_1 = require("react");
 const remotion_1 = require("remotion");
 const client_id_1 = require("../../helpers/client-id");
+const clipboard_figma_1 = require("../../helpers/clipboard-figma");
+const clipboard_images_1 = require("../../helpers/clipboard-images");
+const clipboard_svg_1 = require("../../helpers/clipboard-svg");
 const use_keybinding_1 = require("../../helpers/use-keybinding");
 const call_api_1 = require("../call-api");
 const ConfirmationDialog_1 = require("../ConfirmationDialog");
@@ -567,7 +570,11 @@ const TimelineClipboardKeybindings = () => {
                 return;
             }
             const { selectedItems } = currentSelection.current;
-            if (selectedItems.length === 0 || e.clipboardData === null) {
+            if (selectedItems.length === 0 ||
+                e.clipboardData === null ||
+                (0, clipboard_figma_1.hasClipboardFigmaPayload)(e.clipboardData) ||
+                (0, clipboard_images_1.hasClipboardImage)(e.clipboardData) ||
+                (0, clipboard_svg_1.hasClipboardSvgMarkup)(e.clipboardData)) {
                 return;
             }
             e.preventDefault();

package/dist/components/Timeline/TimelineEnumField.js

@@ -37,6 +37,6 @@ const TimelineEnumField = ({ field, propStatus, effectiveValue, onSave, onDragVa
             disabled: false,
         }));
     }, [variantKeys, onSelect]);
-    return (jsx_runtime_1.jsx(ComboBox_1.Combobox, { small: true, title: field.key, selectedId: current, values: items, style: comboboxStyle }));
+    return (jsx_runtime_1.jsx(ComboBox_1.Combobox, { size: "small", title: field.key, selectedId: current, values: items, style: comboboxStyle }));
 };
 exports.TimelineEnumField = TimelineEnumField;

package/dist/components/Timeline/TimelineFieldLabel.js

@@ -19,13 +19,13 @@ const fieldNameBase = {
     minWidth: 0,
 };
 const TimelineFieldLabel = ({ rowDepth, selected, label, stacked = false }) => {
-    const { basePadding } = (0, react_1.useContext)(TimelineRowLayoutContext_1.TimelineRowLayoutContext);
+    const { basePadding, highlightSelectedLabel } = (0, react_1.useContext)(TimelineRowLayoutContext_1.TimelineRowLayoutContext);
     const labelRowStyle = (0, react_1.useMemo)(() => ({
         ...(0, timeline_field_row_layout_1.getTimelineFieldLabelRowStyle)(rowDepth, basePadding),
-        ...(0, TimelineSelection_1.getTimelineSelectedLabelStyle)(selected, true),
+        ...(0, TimelineSelection_1.getTimelineSelectedLabelStyle)(selected && highlightSelectedLabel, true),
         ...(stacked ? { flex: `0 0 ${timeline_layout_1.SCHEMA_FIELD_ROW_HEIGHT}px` } : null),
         alignSelf: 'stretch',
-    }), [basePadding, rowDepth, selected, stacked]);
+    }), [basePadding, highlightSelectedLabel, rowDepth, selected, stacked]);
     const fieldNameStyle = (0, react_1.useMemo)(() => ({
         ...fieldNameBase,
         color: (0, TimelineSelection_1.getTimelineColor)(selected, true),

package/dist/components/Timeline/TimelineKeyframeControls.js

@@ -18,6 +18,9 @@ const TimelineKeyframeDiamondIcon_1 = require("./TimelineKeyframeDiamondIcon");
 const TimelineKeyframeTracksContext_1 = require("./TimelineKeyframeTracksContext");
 const TimelineSelection_1 = require("./TimelineSelection");
 const update_selected_easing_1 = require("./update-selected-easing");
+const NAV_BUTTON_SIZE = 14;
+const INSPECTOR_NAV_BUTTON_WIDTH = NAV_BUTTON_SIZE / 2;
+const INSPECTOR_PREVIOUS_BUTTON_EXTRA_GAP = 1;
 const controlsContainerStyle = {
     alignItems: 'center',
     display: 'flex',
@@ -25,6 +28,12 @@ const controlsContainerStyle = {
     gap: 1,
     marginRight: 4,
 };
+const inspectorControlsContainerStyle = {
+    ...controlsContainerStyle,
+    paddingLeft: NAV_BUTTON_SIZE -
+        INSPECTOR_NAV_BUTTON_WIDTH -
+        INSPECTOR_PREVIOUS_BUTTON_EXTRA_GAP,
+};
 const navButtonStyle = {
     alignItems: 'center',
     background: 'none',
@@ -33,13 +42,20 @@ const navButtonStyle = {
     cursor: 'pointer',
     display: 'flex',
     flexShrink: 0,
-    height: 14,
+    height: NAV_BUTTON_SIZE,
     justifyContent: 'center',
     lineHeight: 1,
     outline: 'none',
     padding: 0,
     userSelect: 'none',
-    width: 14,
+    width: NAV_BUTTON_SIZE,
+};
+const inspectorNavButtonStyle = {
+    width: INSPECTOR_NAV_BUTTON_WIDTH,
+};
+const inspectorPreviousNavButtonStyle = {
+    ...inspectorNavButtonStyle,
+    marginRight: INSPECTOR_PREVIOUS_BUTTON_EXTRA_GAP,
 };
 const isKeyframedStatus = (status) => {
     return status.status === 'keyframed';
@@ -48,7 +64,7 @@ const diamondButtonStyle = {
     ...navButtonStyle,
     background: 'none',
 };
-const svgStyle = { display: 'block' };
+const svgStyle = { display: 'block', flexShrink: 0 };
 const isKeyframeControlSelection = (selection) => {
     return (selection.type === 'sequence-prop' ||
         selection.type === 'sequence-effect-prop');
@@ -454,23 +470,27 @@ const TimelineKeyframeControls = ({ fieldKey, propStatus, nodePath, fileName, ke
     const nextDisabled = nextDisplayFrame === null;
     const previousStyle = (0, react_1.useMemo)(() => ({
         ...navButtonStyle,
+        ...(mode === 'inspector' ? inspectorPreviousNavButtonStyle : null),
         cursor: previousDisabled ? 'default' : 'pointer',
         opacity: previousDisabled ? 0.35 : 1,
         visibility: showNavigationButtons ? 'visible' : 'hidden',
-    }), [previousDisabled, showNavigationButtons]);
+    }), [mode, previousDisabled, showNavigationButtons]);
     const nextStyle = (0, react_1.useMemo)(() => ({
         ...navButtonStyle,
+        ...(mode === 'inspector' ? inspectorNavButtonStyle : null),
         cursor: nextDisabled ? 'default' : 'pointer',
         opacity: nextDisabled ? 0.35 : 1,
         visibility: showNavigationButtons ? 'visible' : 'hidden',
-    }), [nextDisabled, showNavigationButtons]);
+    }), [mode, nextDisabled, showNavigationButtons]);
     const diamondStyle = (0, react_1.useMemo)(() => ({
         ...diamondButtonStyle,
         cursor: canToggleKeyframe && clientId ? 'pointer' : 'default',
         opacity: canToggleKeyframe && clientId ? 1 : 0.35,
     }), [canToggleKeyframe, clientId]);
     const diamondColor = hasKeyframeAtCurrentFrame ? colors_1.BLUE : colors_1.LIGHT_TEXT;
-    return (jsx_runtime_1.jsxs("div", { style: controlsContainerStyle, children: [
+    return (jsx_runtime_1.jsxs("div", { style: mode === 'inspector'
+            ? inspectorControlsContainerStyle
+            : controlsContainerStyle, children: [
             jsx_runtime_1.jsx("button", { type: "button", style: previousStyle, disabled: previousDisabled, onPointerDown: previousDisabled ? undefined : onPrevious, "aria-label": "Go to previous keyframe", title: "Previous keyframe", children: jsx_runtime_1.jsx("svg", { width: "14", height: "14", viewBox: "0 0 10 10", style: svgStyle, children: jsx_runtime_1.jsx("path", { d: "M7 1.5L3 5L7 8.5Z", fill: colors_1.LIGHT_GRAY }) }) }), jsx_runtime_1.jsx("button", { type: "button", style: diamondStyle, disabled: !canToggleKeyframe || !clientId, onPointerDown: canToggleKeyframe && clientId ? onToggleKeyframe : undefined, "aria-label": hasKeyframeAtCurrentFrame ? 'Remove keyframe' : 'Add keyframe', title: hasKeyframeAtCurrentFrame ? 'Remove keyframe' : 'Add keyframe', children: jsx_runtime_1.jsx(TimelineKeyframeDiamondIcon_1.TimelineKeyframeDiamondIcon, { color: diamondColor, size: 12 }) }), jsx_runtime_1.jsx("button", { type: "button", style: nextStyle, disabled: nextDisabled, onPointerDown: nextDisabled ? undefined : onNext, "aria-label": "Go to next keyframe", title: "Next keyframe", children: jsx_runtime_1.jsx("svg", { width: "14", height: "14", viewBox: "0 0 10 10", style: svgStyle, children: jsx_runtime_1.jsx("path", { d: "M3 1.5L7 5L3 8.5Z", fill: colors_1.LIGHT_GRAY }) }) })
         ] }));
 };

package/dist/components/Timeline/TimelineList.js

@@ -2,18 +2,23 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TimelineList = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
 const colors_1 = require("../../helpers/colors");
+const nest_timeline_tracks_1 = require("./nest-timeline-tracks");
 const TimelineSequenceItem_1 = require("./TimelineSequenceItem");
 const TimelineTimeIndicators_1 = require("./TimelineTimeIndicators");
 const container = {
     flex: 1,
     background: colors_1.BACKGROUND,
 };
+const TimelineListTrack = ({ nestedTrack }) => {
+    var _a;
+    const { track, children, siblingIndex } = nestedTrack;
+    return (jsx_runtime_1.jsx("div", { children: jsx_runtime_1.jsx(TimelineSequenceItem_1.TimelineSequenceItem, { siblingIndex: siblingIndex, connectedCompositions: (_a = track.connectedCompositions) !== null && _a !== void 0 ? _a : [], nestedDepth: track.depth, sequence: track.sequence, nodePathInfo: track.nodePathInfo, keyframeDisplayOffset: track.keyframeDisplayOffset, sequenceFrameOffset: track.sequenceFrameOffset, children: children.map((child) => (jsx_runtime_1.jsx(TimelineListTrack, { nestedTrack: child }, child.track.sequence.id))) }) }));
+};
 const TimelineList = ({ timeline }) => {
+    const nestedTimeline = (0, react_1.useMemo)(() => (0, nest_timeline_tracks_1.nestTimelineTracks)(timeline), [timeline]);
     return (jsx_runtime_1.jsxs("div", { style: container, children: [
-            jsx_runtime_1.jsx(TimelineTimeIndicators_1.TimelineTimePadding, {}), timeline.map((track, trackIndex) => {
-                var _a;
-                return (jsx_runtime_1.jsx("div", { children: jsx_runtime_1.jsx(TimelineSequenceItem_1.TimelineSequenceItem, { trackIndex: trackIndex, connectedCompositions: (_a = track.connectedCompositions) !== null && _a !== void 0 ? _a : [], nestedDepth: track.depth, sequence: track.sequence, nodePathInfo: track.nodePathInfo, keyframeDisplayOffset: track.keyframeDisplayOffset, sequenceFrameOffset: track.sequenceFrameOffset }, track.sequence.id) }, track.sequence.id));
-            })] }));
+            jsx_runtime_1.jsx(TimelineTimeIndicators_1.TimelineTimePadding, {}), nestedTimeline.map((nestedTrack) => (jsx_runtime_1.jsx(TimelineListTrack, { nestedTrack: nestedTrack }, nestedTrack.track.sequence.id)))] }));
 };
 exports.TimelineList = TimelineList;

package/dist/components/Timeline/TimelineRowChrome.js

@@ -26,7 +26,7 @@ const keyframeControlsColumnBaseStyle = {
 };
 const TimelineRowChrome = ({ depth, eye, keyframeControls, arrow, children, style, selected, selectable, selectionItem, onSelect, showSelectedBackground, containsSelection, outerHeight, onDragLeave, onDragOver, onDrop, onDoubleClick, }) => {
     const ref = (0, react_1.useRef)(null);
-    const { basePadding, keyframeControlsPadding } = (0, react_1.useContext)(TimelineRowLayoutContext_1.TimelineRowLayoutContext);
+    const { basePadding, keyframeControlsPadding, rowBorderRadius, rowHorizontalMargin, } = (0, react_1.useContext)(TimelineRowLayoutContext_1.TimelineRowLayoutContext);
     const indentWidth = (0, timeline_row_layout_1.getTimelineRowIndentWidth)(depth);
     (0, TimelineSelection_1.useTimelineFocusableItem)(selectionItem, ref);
     const keyframeControlsColumnStyle = (0, react_1.useMemo)(() => ({
@@ -64,7 +64,15 @@ const TimelineRowChrome = ({ depth, eye, keyframeControls, arrow, children, styl
         ...rowBase,
         ...style,
         backgroundColor: outerHeight === null ? highlightBackground : undefined,
-    }), [style, outerHeight, highlightBackground]);
+        borderRadius: rowBorderRadius,
+        margin: `0 ${rowHorizontalMargin}px`,
+    }), [
+        style,
+        outerHeight,
+        highlightBackground,
+        rowBorderRadius,
+        rowHorizontalMargin,
+    ]);
     const outerStyle = (0, react_1.useMemo)(() => {
         if (outerHeight === null) {
             return undefined;

package/dist/components/Timeline/TimelineRowLayoutContext.d.ts

@@ -1,6 +1,9 @@
 type TimelineRowLayout = {
     readonly basePadding: number;
+    readonly highlightSelectedLabel: boolean;
     readonly keyframeControlsPadding: number;
+    readonly rowBorderRadius: number;
+    readonly rowHorizontalMargin: number;
 };
 export declare const INSPECTOR_TIMELINE_ROW_LAYOUT: TimelineRowLayout;
 export declare const TimelineRowLayoutContext: import("react").Context<TimelineRowLayout>;