@remotion/studio 4.0.495 → 4.0.497

package/dist/components/AssetSelectorItem.js

@@ -61,6 +61,7 @@ const InlineAction_1 = require("./InlineAction");
 const layout_1 = require("./layout");
 const styles_1 = require("./Menu/styles");
 const NotificationCenter_1 = require("./Notifications/NotificationCenter");
+const open_in_new_window_1 = require("./open-in-new-window");
 const actions_1 = require("./RenderQueue/actions");
 const iconStyle = {
     width: 18,
@@ -238,13 +239,7 @@ const AssetSelectorItem = ({ item, tabIndex, level, parentFolder, readOnlyStudio
         return {
             ...itemStyle,
             color: hovered || selected ? colors_1.WHITE : colors_1.LIGHT_TEXT,
-            backgroundColor: hovered
-                ? selected
-                    ? colors_1.SELECTED_BACKGROUND
-                    : colors_1.WHITE_ALPHA_06
-                : selected
-                    ? colors_1.SELECTED_BACKGROUND
-                    : colors_1.TRANSPARENT,
+            backgroundColor: hovered || selected ? colors_1.WHITE_ALPHA_06 : colors_1.TRANSPARENT,
             paddingLeft: 12 + level * 8,
         };
     }, [hovered, level, selected]);
@@ -317,6 +312,11 @@ const AssetSelectorItem = ({ item, tabIndex, level, parentFolder, readOnlyStudio
     }, [confirm, relativePath]);
     const contextMenu = (0, react_1.useMemo)(() => {
         return [
+            (0, open_in_new_window_1.getOpenInNewWindowMenuItem)(`/assets/${relativePath}`),
+            {
+                type: 'divider',
+                id: 'open-in-new-window-divider',
+            },
             {
                 id: 'copy-asset-file-name',
                 keyHint: null,

package/dist/components/AudioWaveform.js

@@ -31,16 +31,6 @@ const getContainerStyle = (height) => {
         height,
     };
 };
-const errorMessage = {
-    fontSize: 13,
-    paddingTop: 6,
-    paddingBottom: 6,
-    paddingLeft: 12,
-    paddingRight: 12,
-    alignSelf: 'flex-start',
-    maxWidth: 450,
-    opacity: 0.75,
-};
 const getWaveformErrorMessage = () => {
     return new Error('No waveform available. The audio could not be decoded or may not support CORS.');
 };
@@ -302,7 +292,7 @@ const AudioWaveform = ({ src, height, startFrom, durationInFrames, visualization
         context.stroke();
     }, [height, parsedVolume, shouldRenderVolumeOverlay, visualizationWidth]);
     if (error) {
-        return (jsx_runtime_1.jsx("div", { style: getContainerStyle(height), children: jsx_runtime_1.jsx("div", { style: errorMessage, children: "No waveform available. The audio could not be decoded or may not support CORS." }) }));
+        return null;
     }
     if (!canUseWorkerPath && !peaks) {
         return null;

package/dist/components/Canvas.js

@@ -5,7 +5,6 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Canvas = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const studio_shared_1 = require("@remotion/studio-shared");
 const react_1 = require("react");
 const remotion_1 = require("remotion");
 const get_static_files_1 = require("../api/get-static-files");
@@ -18,7 +17,6 @@ const get_asset_metadata_1 = require("../helpers/get-asset-metadata");
 const get_effective_translation_1 = require("../helpers/get-effective-translation");
 const install_required_package_1 = require("../helpers/install-required-package");
 const open_in_editor_1 = require("../helpers/open-in-editor");
-const remote_asset_drag_1 = require("../helpers/remote-asset-drag");
 const smooth_zoom_1 = require("../helpers/smooth-zoom");
 const studio_fit_padding_1 = require("../helpers/studio-fit-padding");
 const use_keybinding_1 = require("../helpers/use-keybinding");
@@ -27,11 +25,12 @@ const editor_guides_1 = require("../state/editor-guides");
 const editor_zoom_gestures_1 = require("../state/editor-zoom-gestures");
 const call_api_1 = require("./call-api");
 const ConfirmationDialog_1 = require("./ConfirmationDialog");
+const drop_handler_data_1 = require("./drop-handler-data");
 const EditorGuides_1 = __importDefault(require("./EditorGuides"));
 const EditorRuler_1 = require("./EditorRuler");
 const use_is_ruler_visible_1 = require("./EditorRuler/use-is-ruler-visible");
 const effect_drag_and_drop_1 = require("./effect-drag-and-drop");
-const element_drag_and_drop_1 = require("./element-drag-and-drop");
+const handle_drop_1 = require("./handle-drop");
 const import_assets_1 = require("./import-assets");
 const layout_1 = require("./layout");
 const NotificationCenter_1 = require("./Notifications/NotificationCenter");
@@ -101,97 +100,6 @@ const calculateCanvasScale = ({ addFitPadding, canvasSize, compositionHeight, co
         ? (0, studio_fit_padding_1.calculateStudioScale)(options)
         : remotion_1.Internals.calculateScale(options);
 };
-const isFileDragEvent = (event) => {
-    var _a;
-    var _b;
-    return Array.from((_b = (_a = event.dataTransfer) === null || _a === void 0 ? void 0 : _a.types) !== null && _b !== void 0 ? _b : []).includes('Files');
-};
-const isAssetDragEvent = (event) => {
-    var _a;
-    var _b;
-    return Array.from((_b = (_a = event.dataTransfer) === null || _a === void 0 ? void 0 : _a.types) !== null && _b !== void 0 ? _b : []).includes(studio_shared_1.ASSET_DRAG_MIME_TYPE);
-};
-const isComponentDragEvent = (event) => {
-    var _a;
-    var _b;
-    return Array.from((_b = (_a = event.dataTransfer) === null || _a === void 0 ? void 0 : _a.types) !== null && _b !== void 0 ? _b : []).includes(studio_shared_1.COMPONENT_DRAG_MIME_TYPE);
-};
-const isCompositionDragEvent = (event) => {
-    var _a;
-    var _b;
-    return Array.from((_b = (_a = event.dataTransfer) === null || _a === void 0 ? void 0 : _a.types) !== null && _b !== void 0 ? _b : []).includes(studio_shared_1.COMPOSITION_DRAG_MIME_TYPE);
-};
-const isElementDragEvent = (event) => {
-    var _a;
-    var _b;
-    return Array.from((_b = (_a = event.dataTransfer) === null || _a === void 0 ? void 0 : _a.types) !== null && _b !== void 0 ? _b : []).includes(studio_shared_1.ELEMENT_DRAG_MIME_TYPE);
-};
-const isSfxDragEvent = (event) => {
-    var _a;
-    var _b;
-    return Array.from((_b = (_a = event.dataTransfer) === null || _a === void 0 ? void 0 : _a.types) !== null && _b !== void 0 ? _b : []).includes(studio_shared_1.SFX_DRAG_MIME_TYPE);
-};
-const isRemoteAssetDragEvent = (event) => {
-    return (!isFileDragEvent(event) &&
-        !isAssetDragEvent(event) &&
-        !isCompositionDragEvent(event) &&
-        !isComponentDragEvent(event) &&
-        !isElementDragEvent(event) &&
-        !isSfxDragEvent(event) &&
-        (0, remote_asset_drag_1.hasRemoteAssetDragData)(event.dataTransfer));
-};
-const getAssetDragPath = (event) => {
-    var _a, _b;
-    var _c;
-    const value = (_a = event.dataTransfer) === null || _a === void 0 ? void 0 : _a.getData(studio_shared_1.ASSET_DRAG_MIME_TYPE);
-    if (!value) {
-        return null;
-    }
-    return (_c = (_b = (0, studio_shared_1.parseAssetDragData)(value)) === null || _b === void 0 ? void 0 : _b.assetPath) !== null && _c !== void 0 ? _c : null;
-};
-const getCompositionDragData = (event) => {
-    var _a;
-    const value = (_a = event.dataTransfer) === null || _a === void 0 ? void 0 : _a.getData(studio_shared_1.COMPOSITION_DRAG_MIME_TYPE);
-    if (!value) {
-        return null;
-    }
-    return (0, studio_shared_1.parseCompositionDragData)(value);
-};
-const getComponentDragData = (event) => {
-    var _a;
-    for (const type of [
-        studio_shared_1.COMPONENT_DRAG_MIME_TYPE,
-        'application/json',
-        'text/plain',
-    ]) {
-        const value = (_a = event.dataTransfer) === null || _a === void 0 ? void 0 : _a.getData(type);
-        if (!value) {
-            continue;
-        }
-        const parsed = (0, studio_shared_1.parseComponentDragData)(value);
-        if (parsed) {
-            return parsed;
-        }
-    }
-    return null;
-};
-const getSfxDragUrl = (event) => {
-    const { dataTransfer } = event;
-    if (!dataTransfer) {
-        return null;
-    }
-    for (const type of [studio_shared_1.SFX_DRAG_MIME_TYPE, 'application/json', 'text/plain']) {
-        const value = dataTransfer.getData(type);
-        if (!value) {
-            continue;
-        }
-        const parsed = (0, studio_shared_1.parseSfxDragData)(value);
-        if (parsed) {
-            return parsed.sfx.url;
-        }
-    }
-    return null;
-};
 const getDropPosition = ({ addFitPadding, clientX, clientY, contentDimensions, previewSize, size, }) => {
     if (contentDimensions === null || contentDimensions === 'none') {
         return null;
@@ -766,6 +674,7 @@ const Canvas = ({ canvasContent, size }) => {
                     compositionFile: activeElementInstallRequest.compositionFile,
                     compositionId: activeElementInstallRequest.compositionId,
                     dropPosition: null,
+                    from: null,
                 });
             }
         };
@@ -787,14 +696,7 @@ const Canvas = ({ canvasContent, size }) => {
         };
     }, [activeElementInstallRequest, confirm]);
     const onDragOver = (0, react_1.useCallback)((event) => {
-        if ((!isFileDragEvent(event) &&
-            !isAssetDragEvent(event) &&
-            !isCompositionDragEvent(event) &&
-            !isComponentDragEvent(event) &&
-            !isElementDragEvent(event) &&
-            !isSfxDragEvent(event) &&
-            !isRemoteAssetDragEvent(event)) ||
-            !isDragEventInsideCanvas(event)) {
+        if (!(0, drop_handler_data_1.isSupportedDropEvent)(event) || !isDragEventInsideCanvas(event)) {
             return;
         }
         if (!canDropAssets && !cannotAddSequence) {
@@ -806,16 +708,7 @@ const Canvas = ({ canvasContent, size }) => {
         }
     }, [canDropAssets, cannotAddSequence]);
     const onDrop = (0, react_1.useCallback)(async (event) => {
-        var _a;
-        var _b;
-        if ((!isFileDragEvent(event) &&
-            !isAssetDragEvent(event) &&
-            !isCompositionDragEvent(event) &&
-            !isComponentDragEvent(event) &&
-            !isElementDragEvent(event) &&
-            !isSfxDragEvent(event) &&
-            !isRemoteAssetDragEvent(event)) ||
-            !isDragEventInsideCanvas(event)) {
+        if (!(0, drop_handler_data_1.isSupportedDropEvent)(event) || !isDragEventInsideCanvas(event)) {
             return;
         }
         if (cannotAddSequence) {
@@ -826,7 +719,8 @@ const Canvas = ({ canvasContent, size }) => {
         }
         if (!canDropAssets ||
             compositionFile === null ||
-            currentCompositionId === null) {
+            currentCompositionId === null ||
+            config === null) {
             return;
         }
         if (event.dataTransfer &&
@@ -846,96 +740,16 @@ const Canvas = ({ canvasContent, size }) => {
                 previewSize,
                 size,
             });
-            if (isFileDragEvent(event)) {
-                const files = Array.from((_b = (_a = event.dataTransfer) === null || _a === void 0 ? void 0 : _a.files) !== null && _b !== void 0 ? _b : []);
-                if (files.length === 0) {
-                    return;
-                }
-                const svgImportMode = (0, import_assets_1.hasSvgFile)(files)
-                    ? await chooseSvgImportMode()
-                    : 'image';
-                if (svgImportMode === null) {
-                    return;
-                }
-                await (0, import_assets_1.importAssets)({
-                    files,
-                    compositionFile,
-                    compositionId: currentCompositionId,
-                    destinationDimensions: contentDimensions === 'none' ? null : contentDimensions,
-                    dropPosition,
-                    svgImportMode,
-                });
-            }
-            else if (isAssetDragEvent(event)) {
-                const assetPath = getAssetDragPath(event);
-                if (assetPath === null) {
-                    return;
-                }
-                await (0, import_assets_1.insertExistingAssets)({
-                    assetPaths: [assetPath],
-                    compositionFile,
-                    compositionId: currentCompositionId,
-                    destinationDimensions: contentDimensions === 'none' ? null : contentDimensions,
-                    dropPosition,
-                });
-            }
-            else if (isSfxDragEvent(event)) {
-                const url = getSfxDragUrl(event);
-                if (url === null) {
-                    return;
-                }
-                await (0, import_assets_1.insertRemoteAudio)({
-                    url,
-                    compositionFile,
-                    compositionId: currentCompositionId,
-                });
-            }
-            else if (isCompositionDragEvent(event)) {
-                const compositionDragData = getCompositionDragData(event);
-                if (compositionDragData === null) {
-                    return;
-                }
-                await (0, import_assets_1.insertComposition)({
-                    composition: compositionDragData,
-                    compositionFile,
-                    compositionId: currentCompositionId,
-                    destinationDimensions: contentDimensions === 'none' ? null : contentDimensions,
-                    dropPosition,
-                });
-            }
-            else {
-                const elementDragData = (0, element_drag_and_drop_1.getElementDragData)(event.dataTransfer);
-                if (elementDragData !== null) {
-                    await (0, import_assets_1.insertElement)({
-                        element: elementDragData.element,
-                        compositionFile,
-                        compositionId: currentCompositionId,
-                        dropPosition,
-                    });
-                    return;
-                }
-                const componentDragData = getComponentDragData(event);
-                if (componentDragData !== null) {
-                    await (0, import_assets_1.insertComponent)({
-                        component: componentDragData.component,
-                        compositionFile,
-                        compositionId: currentCompositionId,
-                        dropPosition,
-                    });
-                    return;
-                }
-                const url = (0, remote_asset_drag_1.getRemoteAssetUrlFromDataTransfer)(event.dataTransfer);
-                if (url === null) {
-                    return;
-                }
-                await (0, import_assets_1.importRemoteAsset)({
-                    url,
-                    compositionFile,
-                    compositionId: currentCompositionId,
-                    destinationDimensions: contentDimensions === 'none' ? null : contentDimensions,
-                    dropPosition,
-                });
-            }
+            await (0, handle_drop_1.handleDrop)({
+                chooseSvgImportMode,
+                compositionFile,
+                compositionId: currentCompositionId,
+                destinationDimensions: contentDimensions === 'none' ? null : contentDimensions,
+                dropPosition,
+                event,
+                fps: config.fps,
+                from: null,
+            });
         }
         finally {
             setIsAddingAsset(false);
@@ -946,6 +760,7 @@ const Canvas = ({ canvasContent, size }) => {
         cannotAddSequence,
         chooseSvgImportMode,
         compositionFile,
+        config,
         contentDimensions,
         currentCompositionId,
         previewSize,
@@ -956,6 +771,7 @@ const Canvas = ({ canvasContent, size }) => {
         if (!canDropAssets ||
             compositionFile === null ||
             currentCompositionId === null ||
+            config === null ||
             event.clipboardData === null ||
             activeElement instanceof HTMLInputElement ||
             activeElement instanceof HTMLTextAreaElement ||
@@ -1023,10 +839,12 @@ const Canvas = ({ canvasContent, size }) => {
         try {
             await (0, import_assets_1.importAssets)({
                 files,
+                fps: config.fps,
                 compositionFile,
                 compositionId: currentCompositionId,
                 destinationDimensions: contentDimensions === 'none' ? null : contentDimensions,
                 dropPosition,
+                from: null,
                 svgImportMode,
             });
         }
@@ -1037,6 +855,7 @@ const Canvas = ({ canvasContent, size }) => {
         canDropAssets,
         chooseSvgImportMode,
         compositionFile,
+        config,
         contentDimensions,
         currentCompositionId,
     ]);

package/dist/components/CompositionSelectorItem.js

@@ -9,7 +9,6 @@ const colors_1 = require("../helpers/colors");
 const get_folder_id_1 = require("../helpers/get-folder-id");
 const noop_1 = require("../helpers/noop");
 const sidebar_scroll_into_view_1 = require("../helpers/sidebar-scroll-into-view");
-const url_state_1 = require("../helpers/url-state");
 const folder_1 = require("../icons/folder");
 const modals_1 = require("../state/modals");
 const composition_menu_items_1 = require("./composition-menu-items");
@@ -90,7 +89,9 @@ const CompositionSelectorItem = ({ item, level, currentComposition, tabIndex, se
             ...itemStyle,
             backgroundColor: dragHovered
                 ? colors_1.WHITE_ALPHA_12
-                : (0, colors_1.getBackgroundFromHoverState)({ hovered, selected }),
+                : hovered || selected
+                    ? colors_1.WHITE_ALPHA_06
+                    : colors_1.TRANSPARENT,
             paddingLeft: 12 + level * 8,
         };
     }, [dragHovered, hovered, level, selected]);
@@ -121,42 +122,15 @@ const CompositionSelectorItem = ({ item, level, currentComposition, tabIndex, se
     const resolvedLocation = (0, use_resolved_stack_1.useResolvedStack)(item.type === 'composition' ? item.composition.stack : item.folder.stack);
     const contextMenu = (0, react_1.useMemo)(() => {
         if (item.type === 'composition') {
-            const compositionMenuItems = (0, composition_menu_items_1.getCompositionMenuItems)({
+            return (0, composition_menu_items_1.getCompositionContextMenuItems)({
                 closeMenu: noop_1.noop,
                 composition: item.composition,
                 connectionStatus,
+                includeCompositionManagementItems: true,
                 resolvedLocation,
                 setSelectedModal,
                 readOnlyStudio: window.remotion_isReadOnlyStudio,
             });
-            return [
-                {
-                    id: 'open-in-new-window',
-                    keyHint: null,
-                    label: 'Open in new window',
-                    leftItem: null,
-                    onClick: () => {
-                        var _a, _b;
-                        const screen = window.screen;
-                        const width = Math.min(1200, Math.floor(screen.availWidth * 0.8));
-                        const height = Math.min(800, Math.floor(screen.availHeight * 0.8));
-                        const displayLeft = (_a = screen.availLeft) !== null && _a !== void 0 ? _a : 0;
-                        const displayTop = (_b = screen.availTop) !== null && _b !== void 0 ? _b : 0;
-                        const left = Math.round(Math.min(Math.max(window.screenX + (window.outerWidth - width) / 2, displayLeft), displayLeft + screen.availWidth - width));
-                        const top = Math.round(Math.min(Math.max(window.screenY + (window.outerHeight - height) / 2, displayTop), displayTop + screen.availHeight - height));
-                        window.open((0, url_state_1.getUrlForRoute)(`/${item.composition.id}`), '_blank', `popup,width=${width},height=${height},left=${left},top=${top}`);
-                    },
-                    quickSwitcherLabel: null,
-                    subMenu: null,
-                    type: 'item',
-                    value: 'open-in-new-window',
-                },
-                {
-                    type: 'divider',
-                    id: 'open-in-new-window-divider',
-                },
-                ...compositionMenuItems,
-            ];
         }
         return (0, folder_menu_items_1.getFolderMenuItems)({
             closeMenu: noop_1.noop,

package/dist/components/CurrentAsset.js

@@ -13,6 +13,7 @@ const use_image_metadata_1 = require("../helpers/use-image-metadata");
 const use_media_metadata_1 = require("../helpers/use-media-metadata");
 const InlineEditableTitle_1 = require("./InlineEditableTitle");
 const InspectorInfoHeader_1 = require("./InspectorInfoHeader");
+const InspectorPanelLayout_1 = require("./InspectorPanelLayout");
 const use_rename_static_file_1 = require("./NewComposition/use-rename-static-file");
 const use_static_files_1 = require("./use-static-files");
 exports.CURRENT_ASSET_HEIGHT = InspectorInfoHeader_1.INSPECTOR_INFO_HEADER_MIN_HEIGHT;
@@ -115,9 +116,9 @@ const AssetInfo = ({ assetName, contentSized = false, onAssetClick, readOnlyStud
     const mediaDetailLines = mediaMetadata
         ? (0, exports.getCurrentAssetMediaDetailLines)(mediaMetadata)
         : [];
-    return (jsx_runtime_1.jsxs(InspectorInfoHeader_1.InspectorInfoHeader, { contentSized: contentSized, children: [
-            jsx_runtime_1.jsx(InlineEditableTitle_1.InlineEditableTitle, { value: fileName, canRename: canRename, getInitialSelection: use_rename_static_file_1.getStaticFileRenameSelection, onClick: onAssetClick, onCommit: onRename, title: assetName }), subtitleParts.length > 0 ? (jsx_runtime_1.jsx(InspectorInfoHeader_1.InspectorInfoSubtitle, { children: subtitleParts.join(' · ') })) : null, mediaMetadata ? (jsx_runtime_1.jsx(InspectorInfoHeader_1.InspectorInfoSubtitle, { children: (0, format_media_duration_1.formatMediaDuration)(mediaMetadata.duration) })) : null, mediaDetailLines.map((line) => {
-                return jsx_runtime_1.jsx(InspectorInfoHeader_1.InspectorInfoSubtitle, { children: line }, line);
+    return (jsx_runtime_1.jsxs(InspectorInfoHeader_1.InspectorInfoHeader, { contentSized: contentSized, 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 }), subtitleParts.length > 0 ? (jsx_runtime_1.jsx(InspectorInfoHeader_1.InspectorInfoSubtitle, { size: contentSized ? 'default' : 'inspector', children: subtitleParts.join(' · ') })) : null, mediaMetadata ? (jsx_runtime_1.jsx(InspectorInfoHeader_1.InspectorInfoSubtitle, { size: contentSized ? 'default' : 'inspector', children: (0, format_media_duration_1.formatMediaDuration)(mediaMetadata.duration) })) : null, mediaDetailLines.map((line) => {
+                return (jsx_runtime_1.jsx(InspectorInfoHeader_1.InspectorInfoSubtitle, { size: contentSized ? 'default' : 'inspector', children: line }, line));
             })] }));
 };
 exports.AssetInfo = AssetInfo;

package/dist/components/InlineCompositionName.js

@@ -53,6 +53,6 @@ const InlineCompositionName = ({ compositionId, stack, compositions }) => {
         stack,
         symbolicatedStack,
     ]);
-    return (jsx_runtime_1.jsx(InlineEditableTitle_1.InlineEditableTitle, { value: compositionId, canRename: canRename, onCommit: commit }));
+    return (jsx_runtime_1.jsx(InlineEditableTitle_1.InlineEditableTitle, { value: compositionId, canRename: canRename, onCommit: commit, size: "inspector" }));
 };
 exports.InlineCompositionName = InlineCompositionName;

package/dist/components/InlineEditableTitle.d.ts

@@ -5,5 +5,6 @@ export declare const InlineEditableTitle: React.FC<{
     readonly getInitialSelection?: (value: string) => [number, number];
     readonly onClick?: () => void;
     readonly onCommit: (newValue: string) => void;
+    readonly size?: 'default' | 'inspector';
     readonly title?: string;
 }>;

package/dist/components/InlineEditableTitle.js

@@ -4,6 +4,7 @@ exports.InlineEditableTitle = void 0;
 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 titleWrapper = {
     boxSizing: 'border-box',
     color: colors_1.WHITE,
@@ -53,7 +54,39 @@ const titleInput = {
     WebkitAppearance: 'none',
     width: '100%',
 };
-const InlineEditableTitle = ({ value, canRename, getInitialSelection, onClick, onCommit, title }) => {
+const inspectorTitleWrapper = {
+    ...titleWrapper,
+    fontFamily: 'sans-serif',
+    fontSize: 13,
+    height: layout_1.COMPACT_INLINE_ROW_HEIGHT,
+    margin: '0 4px',
+    width: 'calc(100% - 8px)',
+};
+const inspectorTitleInner = {
+    ...titleInner,
+    alignItems: 'center',
+    fontFamily: 'sans-serif',
+    fontSize: 13,
+    height: layout_1.COMPACT_INLINE_ROW_HEIGHT,
+    paddingBottom: 0,
+    paddingLeft: 8,
+    paddingRight: 8,
+    paddingTop: 0,
+    width: '100%',
+};
+const inspectorTitleGridItem = {
+    ...titleGridItem,
+    color: 'inherit',
+    fontFamily: 'sans-serif',
+    fontSize: 13,
+    lineHeight: '18px',
+};
+const inspectorTitleInput = {
+    ...titleInput,
+    fontFamily: 'sans-serif',
+    fontSize: 13,
+};
+const InlineEditableTitle = ({ value, canRename, getInitialSelection, onClick, onCommit, size = 'default', title, }) => {
     const [isEditing, setIsEditing] = (0, react_1.useState)(false);
     const [isHovered, setIsHovered] = (0, react_1.useState)(false);
     const [draftValue, setDraftValue] = (0, react_1.useState)(value);
@@ -118,22 +151,34 @@ const InlineEditableTitle = ({ value, canRename, getInitialSelection, onClick, o
     const isInteractive = canRename || onClick !== undefined;
     const backgroundColor = isEditing
         ? colors_1.INPUT_BACKGROUND
-        : isHovered && isInteractive
-            ? colors_1.WHITE_ALPHA_06
-            : colors_1.TRANSPARENT;
+        : (0, colors_1.getBackgroundFromHoverState)({
+            hovered: isHovered && isInteractive,
+            selected: false,
+        });
+    const isInspectorSize = size === 'inspector';
     const innerStyle = (0, react_1.useMemo)(() => {
         return {
-            ...titleInner,
+            ...(isInspectorSize ? inspectorTitleInner : titleInner),
             backgroundColor,
-            cursor: isEditing ? 'text' : isInteractive ? 'pointer' : 'default',
+            cursor: isEditing
+                ? 'text'
+                : isInspectorSize
+                    ? 'text'
+                    : isInteractive
+                        ? 'pointer'
+                        : 'default',
             userSelect: isEditing ? 'text' : 'none',
-            width: isEditing ? '100%' : undefined,
+            width: isEditing || isInspectorSize ? '100%' : undefined,
         };
-    }, [backgroundColor, isEditing, isInteractive]);
-    return (jsx_runtime_1.jsx("div", { style: titleWrapper, title: title !== null && title !== void 0 ? title : value, children: jsx_runtime_1.jsxs("span", { style: innerStyle, onMouseEnter: () => setIsHovered(true), onMouseLeave: () => setIsHovered(false), onClick: isEditing || !isInteractive ? undefined : handleClick, children: [
+    }, [backgroundColor, isEditing, isInspectorSize, isInteractive]);
+    const gridItemStyle = isInspectorSize
+        ? inspectorTitleGridItem
+        : titleGridItem;
+    const inputStyle = isInspectorSize ? inspectorTitleInput : titleInput;
+    return (jsx_runtime_1.jsx("div", { style: isInspectorSize ? inspectorTitleWrapper : titleWrapper, title: title !== null && title !== void 0 ? title : value, children: jsx_runtime_1.jsxs("span", { style: innerStyle, onMouseEnter: () => setIsHovered(true), onMouseLeave: () => setIsHovered(false), onClick: isEditing || !isInteractive ? undefined : handleClick, children: [
                 jsx_runtime_1.jsx("span", { "aria-hidden": isEditing, style: {
-                        ...titleGridItem,
+                        ...gridItemStyle,
                         visibility: isEditing ? 'hidden' : 'visible',
-                    }, children: value }), isEditing ? (jsx_runtime_1.jsx("input", { ref: focusInput, style: { ...titleGridItem, ...titleInput }, value: draftValue, onChange: onChange, onBlur: onBlur, onKeyDown: onKeyDown })) : null] }) }));
+                    }, children: value }), isEditing ? (jsx_runtime_1.jsx("input", { ref: focusInput, style: { ...gridItemStyle, ...inputStyle }, value: draftValue, onChange: onChange, onBlur: onBlur, onKeyDown: onKeyDown })) : null] }) }));
 };
 exports.InlineEditableTitle = InlineEditableTitle;

package/dist/components/InspectorInfoHeader.d.ts

@@ -4,10 +4,12 @@ export declare const InspectorInfoHeader: React.FC<{
     readonly children?: React.ReactNode;
     readonly contentSized?: boolean;
     readonly minHeight?: number;
+    readonly padding?: React.CSSProperties['padding'];
 }>;
 export declare const InspectorInfoTitle: React.FC<{
     readonly children: React.ReactNode;
 }>;
 export declare const InspectorInfoSubtitle: React.FC<{
     readonly children: React.ReactNode;
+    readonly size?: 'default' | 'inspector';
 }>;

package/dist/components/InspectorInfoHeader.js

@@ -44,12 +44,24 @@ const subtitle = {
     textOverflow: 'ellipsis',
     whiteSpace: 'nowrap',
 };
-const InspectorInfoHeader = ({ children, contentSized = false, minHeight }) => {
-    const style = contentSized
+const inspectorSubtitle = {
+    ...subtitle,
+    boxSizing: 'border-box',
+    fontFamily: 'sans-serif',
+    fontSize: 13,
+    height: 28,
+    lineHeight: '18px',
+    margin: '0 4px',
+    padding: '5px 8px',
+    width: 'calc(100% - 8px)',
+};
+const InspectorInfoHeader = ({ children, contentSized = false, minHeight, padding }) => {
+    const sizeStyle = contentSized
         ? containerBase
         : minHeight === undefined
             ? container
             : { ...containerBase, minHeight };
+    const style = padding === undefined ? sizeStyle : { ...sizeStyle, padding };
     return (jsx_runtime_1.jsx("div", { style: style, children: children === undefined || children === null ? null : (jsx_runtime_1.jsx("div", { style: row, children: jsx_runtime_1.jsx("div", { style: content, children: children }) })) }));
 };
 exports.InspectorInfoHeader = InspectorInfoHeader;
@@ -57,7 +69,7 @@ const InspectorInfoTitle = ({ children }) => {
     return jsx_runtime_1.jsx("div", { style: title, children: children });
 };
 exports.InspectorInfoTitle = InspectorInfoTitle;
-const InspectorInfoSubtitle = ({ children }) => {
-    return jsx_runtime_1.jsx("div", { style: subtitle, children: children });
+const InspectorInfoSubtitle = ({ children, size = 'default' }) => {
+    return (jsx_runtime_1.jsx("div", { style: size === 'inspector' ? inspectorSubtitle : subtitle, children: children }));
 };
 exports.InspectorInfoSubtitle = InspectorInfoSubtitle;

package/dist/components/InspectorLocationCopy.js

@@ -24,8 +24,8 @@ const content = {
 const action = {
     flexShrink: 0,
     height: 24,
-    marginLeft: 4,
-    marginRight: -4,
+    marginLeft: 0,
+    marginRight: 4,
 };
 const icon = {
     flexShrink: 0,

package/dist/components/InspectorPanel/AlignmentControls.js

@@ -136,6 +136,8 @@ const AlignmentControls = ({ track }) => {
         const label = undoLabels[direction];
         if (!propStatus || propStatus.status === 'static') {
             (0, save_sequence_prop_1.saveSequenceProps)({
+                addedKeyframes: null,
+                movedKeyframes: null,
                 changes: [
                     {
                         fileName: nodePath.absolutePath,