@remotion/studio 4.0.494 → 4.0.496

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");
@@ -19,26 +18,29 @@ const ContextMenu_1 = require("./ContextMenu");
 const folder_menu_items_1 = require("./folder-menu-items");
 const layout_1 = require("./layout");
 const NotificationCenter_1 = require("./Notifications/NotificationCenter");
+const open_in_new_window_1 = require("./open-in-new-window");
 const actions_1 = require("./RenderQueue/actions");
 const SidebarRenderButton_1 = require("./SidebarRenderButton");
 const use_resolved_stack_1 = require("./Timeline/use-resolved-stack");
-const COMPOSITION_ITEM_HEIGHT = 32;
 const itemStyle = {
     paddingRight: 10,
-    paddingTop: 6,
-    paddingBottom: 6,
+    paddingTop: 5,
+    paddingBottom: 5,
     fontSize: 13,
     display: 'flex',
     textDecoration: 'none',
     cursor: 'default',
     alignItems: 'center',
     marginBottom: 1,
+    marginLeft: 4,
+    marginRight: 4,
     appearance: 'none',
     border: 'none',
-    width: '100%',
+    borderRadius: 4,
+    width: 'calc(100% - 8px)',
     textAlign: 'left',
     backgroundColor: colors_1.BACKGROUND,
-    height: COMPOSITION_ITEM_HEIGHT,
+    height: layout_1.COMPACT_CONTROL_ROW_HEIGHT,
     userSelect: 'none',
 };
 const labelStyle = {
@@ -69,6 +71,7 @@ const CompositionSelectorItem = ({ item, level, currentComposition, tabIndex, se
     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);
     const compositionId = item.type === 'composition' ? item.composition.id : null;
@@ -87,7 +90,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]);
@@ -127,27 +132,7 @@ const CompositionSelectorItem = ({ item, level, currentComposition, tabIndex, se
                 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',
-                },
+                (0, open_in_new_window_1.getOpenInNewWindowMenuItem)(`/${item.composition.id}`),
                 {
                     type: 'divider',
                     id: 'open-in-new-window-divider',
@@ -170,12 +155,16 @@ const CompositionSelectorItem = ({ item, level, currentComposition, tabIndex, se
             event.preventDefault();
             return;
         }
+        setIsDragging(true);
         event.dataTransfer.effectAllowed = 'copyMove';
         event.dataTransfer.setData(studio_shared_1.COMPOSITION_DRAG_MIME_TYPE, JSON.stringify((0, studio_shared_1.makeCompositionDragData)({
             compositionFile: (_a = resolvedLocation === null || resolvedLocation === void 0 ? void 0 : resolvedLocation.source) !== null && _a !== void 0 ? _a : null,
             compositionId: item.composition.id,
         })));
     }, [item, resolvedLocation === null || resolvedLocation === void 0 ? void 0 : resolvedLocation.source]);
+    const onCompositionDragEnd = (0, react_1.useCallback)(() => {
+        setIsDragging(false);
+    }, []);
     const onFolderDragOver = (0, react_1.useCallback)((event) => {
         if (item.type !== 'folder' ||
             window.remotion_isReadOnlyStudio ||
@@ -253,13 +242,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, { values: contextMenu, onOpen: null, children: jsx_runtime_1.jsx(layout_1.Row, { align: "center", children: jsx_runtime_1.jsxs("div", { style: style, 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, { values: contextMenu, visible: hovered })
+                jsx_runtime_1.jsx(ContextMenu_1.ContextMenu, { values: contextMenu, onOpen: null, 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, { values: contextMenu, visible: hovered })
                             ] }) }) }), 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, { values: contextMenu, onOpen: null, 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, type: "button", title: item.composition.id, className: "__remotion-composition", "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, { values: contextMenu, visible: hovered }), jsx_runtime_1.jsx(SidebarRenderButton_1.SidebarRenderButton, { visible: hovered, composition: item.composition })
+    return (jsx_runtime_1.jsx(ContextMenu_1.ContextMenu, { values: contextMenu, onOpen: null, 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, { values: contextMenu, visible: hovered && !isDragging }), jsx_runtime_1.jsx(SidebarRenderButton_1.SidebarRenderButton, { visible: hovered && !isDragging, composition: item.composition })
                 ] }) }) }));
 };
 exports.CompositionSelectorItem = CompositionSelectorItem;

package/dist/components/CurrentAsset.d.ts

@@ -2,6 +2,7 @@ import React from 'react';
 import type { MediaMetadata } from '../helpers/use-media-metadata';
 export declare const CURRENT_ASSET_HEIGHT = 84;
 export declare const getCurrentAssetMetadataSource: (assetName: string | null) => string | null;
+export declare const getCurrentAssetImageMetadataSource: (assetName: string | null) => string | null;
 export declare const getCurrentAssetMediaDetailLines: (mediaMetadata: MediaMetadata) => string[];
 export declare const AssetInfo: React.FC<{
     readonly assetName: string | null;

package/dist/components/CurrentAsset.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.CurrentAsset = exports.AssetInfo = exports.getCurrentAssetMediaDetailLines = exports.getCurrentAssetMetadataSource = exports.CURRENT_ASSET_HEIGHT = void 0;
+exports.CurrentAsset = exports.AssetInfo = exports.getCurrentAssetMediaDetailLines = exports.getCurrentAssetImageMetadataSource = exports.getCurrentAssetMetadataSource = exports.CURRENT_ASSET_HEIGHT = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const studio_shared_1 = require("@remotion/studio-shared");
 const react_1 = require("react");
@@ -9,9 +9,11 @@ const client_id_1 = require("../helpers/client-id");
 const format_media_duration_1 = require("../helpers/format-media-duration");
 const get_preview_file_type_1 = require("../helpers/get-preview-file-type");
 const render_codec_label_1 = require("../helpers/render-codec-label");
+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;
@@ -25,6 +27,15 @@ const getCurrentAssetMetadataSource = (assetName) => {
         : null;
 };
 exports.getCurrentAssetMetadataSource = getCurrentAssetMetadataSource;
+const getCurrentAssetImageMetadataSource = (assetName) => {
+    if (!assetName) {
+        return null;
+    }
+    return (0, get_preview_file_type_1.getPreviewFileType)(assetName) === 'image'
+        ? (0, remotion_1.staticFile)(assetName)
+        : null;
+};
+exports.getCurrentAssetImageMetadataSource = getCurrentAssetImageMetadataSource;
 const formatFps = (fps) => `${fps.toFixed(2)} FPS`;
 const getCurrentAssetMediaDetailLines = (mediaMetadata) => {
     const detailLines = [];
@@ -74,6 +85,8 @@ const AssetInfo = ({ assetName, contentSized = false, onAssetClick, readOnlyStud
     }, [assetName, staticFiles]);
     const src = (0, exports.getCurrentAssetMetadataSource)(assetName);
     const mediaMetadata = (0, use_media_metadata_1.useMediaMetadata)(src);
+    const imageSrc = (0, exports.getCurrentAssetImageMetadataSource)(assetName);
+    const imageMetadata = (0, use_image_metadata_1.useImageMetadata)(imageSrc);
     const canRename = onAssetClick === undefined &&
         connectionStatus === 'connected' &&
         !readOnlyStudio;
@@ -96,12 +109,16 @@ const AssetInfo = ({ assetName, contentSized = false, onAssetClick, readOnlyStud
             subtitleParts.push(`${mediaMetadata.width}x${mediaMetadata.height}`);
         }
     }
+    else if (imageMetadata) {
+        subtitleParts.push(imageMetadata.format);
+        subtitleParts.push(`${imageMetadata.width}x${imageMetadata.height}`);
+    }
     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/Editor.js

@@ -40,6 +40,7 @@ const react_1 = __importStar(require("react"));
 const remotion_1 = require("remotion");
 const colors_1 = require("../helpers/colors");
 const noop_1 = require("../helpers/noop");
+const studio_fit_padding_1 = require("../helpers/studio-fit-padding");
 const studio_runtime_config_1 = require("../helpers/studio-runtime-config");
 const canvas_ref_1 = require("../state/canvas-ref");
 const scale_lock_1 = require("../state/scale-lock");
@@ -83,10 +84,7 @@ const Editor = ({ Root, readOnlyStudio }) => {
         if (!size) {
             return null;
         }
-        return {
-            type: 'canvas-size',
-            canvasSize: size,
-        };
+        return (0, studio_fit_padding_1.getStudioCurrentScaleContext)(size);
     }, [size]);
     const MemoRoot = (0, react_1.useMemo)(() => {
         return react_1.default.memo(Root);

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/AssetInspector.d.ts

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

package/dist/components/InspectorPanel/AssetInspector.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AssetInspector = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const CurrentAsset_1 = require("../CurrentAsset");
+const is_menu_item_1 = require("../Menu/is-menu-item");
+const styles_1 = require("./styles");
+const AssetInspector = ({ readOnlyStudio }) => {
+    return (jsx_runtime_1.jsx("div", { style: styles_1.scrollableContainer, className: is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME, children: jsx_runtime_1.jsx("div", { style: styles_1.inspectorOverviewSection, children: jsx_runtime_1.jsx(CurrentAsset_1.CurrentAsset, { readOnlyStudio: readOnlyStudio }) }) }));
+};
+exports.AssetInspector = AssetInspector;

package/dist/components/InspectorPanel/{DefaultInspector.d.ts → CompositionInspector.d.ts}

@@ -1,8 +1,8 @@
 import React from 'react';
 import type { _InternalTypes } from 'remotion';
 import type { UpdaterFunction } from '../RenderModal/SchemaEditor/ZodSwitch';
-export declare const DefaultInspector: React.FC<{
-    readonly composition: _InternalTypes['AnyComposition'] | null;
+export declare const CompositionInspector: React.FC<{
+    readonly composition: _InternalTypes['AnyComposition'];
     readonly currentDefaultProps: Record<string, unknown>;
     readonly readOnlyStudio: boolean;
     readonly setDefaultProps: UpdaterFunction<Record<string, unknown>>;

package/dist/components/InspectorPanel/CompositionInspector.js

@@ -0,0 +1,114 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CompositionInspector = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const interactivity_enabled_1 = require("../../helpers/interactivity-enabled");
+const frame_1 = require("../../icons/frame");
+const solid_1 = require("../../icons/solid");
+const VisualControls_1 = require("../../visual-controls/VisualControls");
+const DefaultPropsEditor_1 = require("../DefaultPropsEditor");
+const get_zod_if_possible_1 = require("../get-zod-if-possible");
+const is_menu_item_1 = require("../Menu/is-menu-item");
+const ObserveDefaultPropsContext_1 = require("../ObserveDefaultPropsContext");
+const DataEditor_1 = require("../RenderModal/DataEditor");
+const zod_schema_type_1 = require("../RenderModal/SchemaEditor/zod-schema-type");
+const WarningIndicatorButton_1 = require("../RenderModal/WarningIndicatorButton");
+const SegmentedControl_1 = require("../SegmentedControl");
+const VisualControlsContent_1 = require("../VisualControls/VisualControlsContent");
+const common_1 = require("./common");
+const CompositionInspectorHeader_1 = require("./CompositionInspectorHeader");
+const CompositionMetadata_1 = require("./CompositionMetadata");
+const styles_1 = require("./styles");
+const use_composition_actions_1 = require("./use-composition-actions");
+const actionIconStyle = {
+    height: 18,
+    width: 18,
+};
+const CompositionActions = () => {
+    const { canInsertAsset, canInsertSolid, canShowInsertAsset, canShowInsertSolid, insertAsset, insertSolid, } = (0, use_composition_actions_1.useCompositionActions)();
+    if (!canShowInsertAsset && !canShowInsertSolid) {
+        return null;
+    }
+    return (jsx_runtime_1.jsxs(common_1.InspectorActionSection, { children: [canShowInsertSolid ? (jsx_runtime_1.jsx(common_1.InspectorInlineAction, { disabled: !canInsertSolid, onClick: insertSolid, renderIcon: (color) => (jsx_runtime_1.jsx(solid_1.SolidIcon, { color: color, style: actionIconStyle })), children: "Add Solid" })) : null, canShowInsertAsset ? (jsx_runtime_1.jsx(common_1.InspectorInlineAction, { disabled: !canInsertAsset, onClick: insertAsset, renderIcon: (color) => (jsx_runtime_1.jsx(frame_1.PicIcon, { color: color, style: actionIconStyle })), children: "Add asset..." })) : null] }));
+};
+const CompositionDefaultPropsSection = ({ composition, currentDefaultProps, setDefaultProps }) => {
+    var _a;
+    const z = (0, get_zod_if_possible_1.useZodIfPossible)();
+    const canSaveDefaultProps = (0, react_1.useContext)(ObserveDefaultPropsContext_1.ObserveDefaultPropsContext);
+    const [defaultPropsMode, setDefaultPropsMode] = (0, react_1.useState)('schema');
+    const compositionId = composition.id;
+    (0, react_1.useEffect)(() => {
+        setDefaultPropsMode('schema');
+    }, [compositionId]);
+    const defaultPropsModeItems = (0, react_1.useMemo)(() => {
+        return [
+            {
+                key: 'schema',
+                label: 'Schema',
+                onClick: () => {
+                    setDefaultPropsMode('schema');
+                },
+                selected: defaultPropsMode === 'schema',
+            },
+            {
+                key: 'json',
+                label: 'JSON',
+                onClick: () => {
+                    setDefaultPropsMode('json');
+                },
+                selected: defaultPropsMode === 'json',
+            },
+        ];
+    }, [defaultPropsMode]);
+    const canShowDefaultPropsSection = (0, react_1.useMemo)(() => {
+        if (!z || !composition.schema || !composition.defaultProps) {
+            return false;
+        }
+        if (!(typeof composition.schema.safeParse ===
+            'function')) {
+            return false;
+        }
+        return (0, zod_schema_type_1.getZodSchemaType)(composition.schema) !== 'any';
+    }, [composition.defaultProps, composition.schema, z]);
+    const { setShowWarning, showWarning } = (0, DataEditor_1.useDataEditorWarningVisibility)();
+    const { warnings: defaultPropsWarnings } = (0, DataEditor_1.useDataEditorWarnings)({
+        canSaveDefaultProps: (_a = canSaveDefaultProps === null || canSaveDefaultProps === void 0 ? void 0 : canSaveDefaultProps.canSaveDefaultProps) !== null && _a !== void 0 ? _a : null,
+        defaultProps: currentDefaultProps,
+        mode: defaultPropsMode,
+        propsEditType: 'default-props',
+        showCannotSaveDefaultPropsWarning: canShowDefaultPropsSection,
+    });
+    if (!canShowDefaultPropsSection) {
+        return null;
+    }
+    return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
+            jsx_runtime_1.jsx(common_1.InspectorSectionDivider, {}), jsx_runtime_1.jsxs("div", { style: styles_1.compositionDefaultPropsSection, children: [
+                    jsx_runtime_1.jsx(common_1.InspectorSectionHeader, { children: jsx_runtime_1.jsxs("div", { style: styles_1.sectionHeaderRow, children: [
+                                jsx_runtime_1.jsxs("div", { style: styles_1.sectionHeaderStart, children: [
+                                        jsx_runtime_1.jsx("span", { style: styles_1.sectionHeaderTitle, children: "Default Props" }), jsx_runtime_1.jsx(SegmentedControl_1.SegmentedControl, { items: defaultPropsModeItems, needsWrapping: false, size: "compact" })
+                                    ] }), jsx_runtime_1.jsx("div", { style: styles_1.sectionHeaderEnd, children: defaultPropsWarnings.length > 0 ? (jsx_runtime_1.jsx(WarningIndicatorButton_1.WarningIndicatorButton, { setShowWarning: setShowWarning, showWarning: showWarning, warningCount: defaultPropsWarnings.length, size: "compact" })) : null })
+                            ] }) }), defaultPropsWarnings.length > 0 && showWarning ? (jsx_runtime_1.jsx("div", { style: styles_1.defaultPropsWarningContainer, children: jsx_runtime_1.jsx(common_1.InspectorDefaultPropsWarnings, { warnings: defaultPropsWarnings }) })) : null, jsx_runtime_1.jsx(DefaultPropsEditor_1.DefaultPropsEditor, { unresolvedComposition: composition, defaultProps: currentDefaultProps, setDefaultProps: setDefaultProps, propsEditType: "default-props", schemaErrorMode: "compact", layout: "inspector", mode: defaultPropsMode, onModeChange: setDefaultPropsMode, hideModeControls: canShowDefaultPropsSection, warnings: defaultPropsWarnings, showWarning: false, setShowWarning: setShowWarning, hideWarningButton: true }, composition.id)
+                ] })
+        ] }));
+};
+const CompositionVisualControlsSection = () => {
+    const { handles: visualControlHandles } = (0, react_1.useContext)(VisualControls_1.VisualControlsContext);
+    const hasVisualControls = interactivity_enabled_1.studioInteractivityEnabled && Object.keys(visualControlHandles).length > 0;
+    if (!hasVisualControls) {
+        return null;
+    }
+    return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
+            jsx_runtime_1.jsx(common_1.InspectorSectionDivider, {}), jsx_runtime_1.jsxs("div", { style: styles_1.compositionVisualControlsSection, children: [
+                    jsx_runtime_1.jsx(common_1.InspectorSectionHeader, { children: "Visual Controls" }), jsx_runtime_1.jsx(VisualControlsContent_1.VisualControlsContent, {})
+                ] })
+        ] }));
+};
+const CompositionInspector = ({ composition, currentDefaultProps, readOnlyStudio, setDefaultProps }) => {
+    return (jsx_runtime_1.jsxs("div", { style: styles_1.scrollableContainer, className: is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME, children: [
+            jsx_runtime_1.jsxs("div", { style: styles_1.inspectorOverviewSection, children: [
+                    jsx_runtime_1.jsx(CompositionInspectorHeader_1.CompositionInspectorHeader, {}), jsx_runtime_1.jsx(common_1.InspectorSectionDivider, {}), jsx_runtime_1.jsx(CompositionMetadata_1.CompositionMetadata, { compositionId: composition.id, disabled: readOnlyStudio, stack: composition.stack })
+                ] }), jsx_runtime_1.jsx(CompositionDefaultPropsSection, { composition: composition, currentDefaultProps: currentDefaultProps, setDefaultProps: setDefaultProps }), jsx_runtime_1.jsx(CompositionVisualControlsSection, {}), jsx_runtime_1.jsx(CompositionActions, {})
+        ] }));
+};
+exports.CompositionInspector = CompositionInspector;

package/dist/components/InspectorPanel/CompositionInspectorHeader.d.ts

@@ -0,0 +1 @@
+export declare const CompositionInspectorHeader: () => import("react/jsx-runtime").JSX.Element;

package/dist/components/{CurrentComposition.js → InspectorPanel/CompositionInspectorHeader.js}

@@ -1,30 +1,35 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.CurrentComposition = exports.CURRENT_COMPOSITION_HEIGHT = void 0;
+exports.CompositionInspectorHeader = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const remotion_1 = require("remotion");
-const is_composition_still_1 = require("../helpers/is-composition-still");
-const open_in_editor_1 = require("../helpers/open-in-editor");
-const react_2 = require("../icons/react");
-const still_1 = require("../icons/still");
-const video_1 = require("../icons/video");
-const InlineCompositionName_1 = require("./InlineCompositionName");
-const InspectorInfoHeader_1 = require("./InspectorInfoHeader");
-const InspectorLocationCopy_1 = require("./InspectorLocationCopy");
-const InspectorSourceLocation_1 = require("./InspectorSourceLocation");
-const NotificationCenter_1 = require("./Notifications/NotificationCenter");
-const use_resolved_stack_1 = require("./Timeline/use-resolved-stack");
-exports.CURRENT_COMPOSITION_HEIGHT = 66;
+const is_composition_still_1 = require("../../helpers/is-composition-still");
+const open_in_editor_1 = require("../../helpers/open-in-editor");
+const react_2 = require("../../icons/react");
+const still_1 = require("../../icons/still");
+const video_1 = require("../../icons/video");
+const InlineCompositionName_1 = require("../InlineCompositionName");
+const InspectorInfoHeader_1 = require("../InspectorInfoHeader");
+const InspectorLocationCopy_1 = require("../InspectorLocationCopy");
+const InspectorSourceLocation_1 = require("../InspectorSourceLocation");
+const layout_1 = require("../layout");
+const NotificationCenter_1 = require("../Notifications/NotificationCenter");
+const use_resolved_stack_1 = require("../Timeline/use-resolved-stack");
+const COMPOSITION_INSPECTOR_HEADER_HEIGHT = 66;
 const sourceLocationIconStyle = {
     flexShrink: 0,
-    height: 13,
-    width: 13,
+    height: 18,
+    width: 18,
+};
+const componentLocationPlaceholder = {
+    flexShrink: 0,
+    height: layout_1.COMPACT_INLINE_ROW_HEIGHT,
 };
 const renderReactIcon = (color) => {
     return jsx_runtime_1.jsx(react_2.ReactIcon, { color: color, style: sourceLocationIconStyle });
 };
-const CurrentComposition = () => {
+const CompositionInspectorHeader = () => {
     var _a, _b, _c, _d, _e;
     const video = remotion_1.Internals.useVideo();
     const { compositions } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
@@ -85,9 +90,9 @@ const CurrentComposition = () => {
         }
         return (0, is_composition_still_1.isCompositionStill)(video) ? (jsx_runtime_1.jsx(still_1.StillIcon, { color: color, style: sourceLocationIconStyle })) : (jsx_runtime_1.jsx(video_1.FilmIcon, { color: color, style: sourceLocationIconStyle }));
     }, [video]);
-    return (jsx_runtime_1.jsx(InspectorInfoHeader_1.InspectorInfoHeader, { minHeight: exports.CURRENT_COMPOSITION_HEIGHT, children: video ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
-                jsx_runtime_1.jsxs(InspectorLocationCopy_1.InspectorLocationCopy, { location: validatedLocation, name: video.id, children: [
-                        jsx_runtime_1.jsx(InlineCompositionName_1.InlineCompositionName, { compositionId: video.id, stack: (_e = currentComposition === null || currentComposition === void 0 ? void 0 : currentComposition.stack) !== null && _e !== void 0 ? _e : null, compositions: compositions }, video.id), jsx_runtime_1.jsx(InspectorSourceLocation_1.InspectorSourceLocation, { location: validatedLocation, canOpen: validatedLocation !== null, onOpen: openFileLocation, renderIcon: renderCompositionIcon }), jsx_runtime_1.jsx(InspectorSourceLocation_1.InspectorSourceLocation, { location: componentLocation, canOpen: componentLocation !== null, onOpen: openComponentLocation, renderIcon: renderReactIcon })
-                    ] }), (0, is_composition_still_1.isCompositionStill)(video) ? (jsx_runtime_1.jsx(InspectorInfoHeader_1.InspectorInfoSubtitle, { children: "Still" })) : null] })) : null }));
+    return (jsx_runtime_1.jsx(InspectorInfoHeader_1.InspectorInfoHeader, { minHeight: COMPOSITION_INSPECTOR_HEADER_HEIGHT, padding: "4px 0", children: video ? (jsx_runtime_1.jsxs(InspectorLocationCopy_1.InspectorLocationCopy, { location: validatedLocation, name: video.id, children: [
+                jsx_runtime_1.jsx(InlineCompositionName_1.InlineCompositionName, { compositionId: video.id, stack: (_e = currentComposition === null || currentComposition === void 0 ? void 0 : currentComposition.stack) !== null && _e !== void 0 ? _e : null, compositions: compositions }, video.id), jsx_runtime_1.jsx(InspectorSourceLocation_1.InspectorSourceLocation, { location: validatedLocation, canOpen: validatedLocation !== null, onOpen: openFileLocation, renderIcon: renderCompositionIcon, size: "inline-action" }), compositionComponentInfo === null &&
+                    compositionFile !== null &&
+                    compositionId !== null ? (jsx_runtime_1.jsx("div", { "aria-hidden": true, style: componentLocationPlaceholder })) : (jsx_runtime_1.jsx(InspectorSourceLocation_1.InspectorSourceLocation, { location: componentLocation, canOpen: componentLocation !== null, onOpen: openComponentLocation, renderIcon: renderReactIcon, size: "inline-action" }))] })) : null }));
 };
-exports.CurrentComposition = CurrentComposition;
+exports.CompositionInspectorHeader = CompositionInspectorHeader;

package/dist/components/InspectorPanel/{CompositionDimensions.d.ts → CompositionMetadata.d.ts}

@@ -1,5 +1,5 @@
 import React from 'react';
-export declare const CompositionDimensions: React.FC<{
+export declare const CompositionMetadata: React.FC<{
     readonly compositionId: string;
     readonly disabled: boolean;
     readonly stack: string | null;