@remotion/studio 4.0.516 → 4.0.518

package/dist/components/InlineCaptionInspector.js

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

package/dist/components/InlineEditableTitle.js

@@ -59,7 +59,7 @@ const inspectorTitleWrapper = {
     ...titleWrapper,
     fontFamily: 'sans-serif',
     fontSize: 13,
-    height: layout_1.COMPACT_INLINE_ROW_HEIGHT,
+    height: layout_1.COMPACT_CONTROL_ROW_HEIGHT,
     margin: '0 4px',
     width: 'calc(100% - 8px)',
 };
@@ -68,7 +68,7 @@ const inspectorTitleInner = {
     alignItems: 'center',
     fontFamily: 'sans-serif',
     fontSize: 13,
-    height: layout_1.COMPACT_INLINE_ROW_HEIGHT,
+    height: layout_1.COMPACT_CONTROL_ROW_HEIGHT,
     paddingBottom: 0,
     paddingLeft: InspectorPanelLayout_1.INSPECTOR_PANEL_HORIZONTAL_PADDING - 4,
     paddingRight: InspectorPanelLayout_1.INSPECTOR_PANEL_HORIZONTAL_PADDING - 4,

package/dist/components/InspectorPanel/CompositionInspector.js

@@ -5,10 +5,8 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const browser_studio_operations_1 = require("../../helpers/browser-studio-operations");
 const client_id_1 = require("../../helpers/client-id");
-const colors_1 = require("../../helpers/colors");
 const download_blob_1 = require("../../helpers/download-blob");
 const interactivity_enabled_1 = require("../../helpers/interactivity-enabled");
-const browse_elements_1 = require("../../icons/browse-elements");
 const cloud_download_1 = require("../../icons/cloud-download");
 const frame_1 = require("../../icons/frame");
 const solid_1 = require("../../icons/solid");
@@ -28,29 +26,13 @@ const VisualControlsContent_1 = require("../VisualControls/VisualControlsContent
 const common_1 = require("./common");
 const CompositionInspectorHeader_1 = require("./CompositionInspectorHeader");
 const CompositionMetadata_1 = require("./CompositionMetadata");
+const ElementLibraryButton_1 = require("./ElementLibraryButton");
 const styles_1 = require("./styles");
 const use_composition_actions_1 = require("./use-composition-actions");
 const actionIconStyle = {
     height: 18,
     width: 18,
 };
-const browseElementsIconStyle = {
-    height: 22,
-    width: 22,
-};
-const browseElementsIconContainerStyle = {
-    height: 22,
-    marginLeft: -2,
-    marginRight: -2,
-    width: 22,
-};
-const browseElementsArrowStyle = {
-    display: 'inline-block',
-    height: 12,
-    marginLeft: 4,
-    verticalAlign: -2,
-    width: 12,
-};
 const CompositionActions = () => {
     var _a;
     var _b;
@@ -69,18 +51,13 @@ const CompositionActions = () => {
             (0, NotificationCenter_1.showNotification)(`Could not download project: ${error instanceof Error ? error.message : String(error)}`, 2000);
         }
     }, [downloadProject]);
-    const openElementsLibrary = (0, react_1.useCallback)(() => {
-        window.open('https://www.remotion.dev/elements', '_blank', 'noopener,noreferrer');
-    }, []);
     if (!canShowInsertAsset &&
         !canShowInsertComposition &&
         !canShowInsertSolid &&
         downloadProject === null) {
         return null;
     }
-    return (jsx_runtime_1.jsxs(common_1.InspectorQuickActionsSection, { children: [canShowInsertSolid ? (jsx_runtime_1.jsx(common_1.InspectorQuickAction, { 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.InspectorQuickAction, { disabled: !canInsertAsset, onClick: insertAsset, renderIcon: (color) => (jsx_runtime_1.jsx(frame_1.PicIcon, { color: color, style: actionIconStyle })), children: "Add asset..." })) : null, canShowInsertComposition ? (jsx_runtime_1.jsx(common_1.InspectorQuickAction, { disabled: !canInsertComposition, onClick: insertComposition, renderIcon: (color) => (jsx_runtime_1.jsx(video_1.FilmIcon, { color: color, style: actionIconStyle })), children: "Add composition..." })) : null, canShowInsertAsset ? (jsx_runtime_1.jsxs(common_1.InspectorQuickAction, { disabled: false, iconContainerStyle: browseElementsIconContainerStyle, onClick: openElementsLibrary, renderIcon: (color) => (jsx_runtime_1.jsx(browse_elements_1.BrowseElementsIcon, { color: color, style: browseElementsIconStyle })), title: "Open the Remotion Elements library in a new tab. Install an Element there to send it to this composition.", children: ["Browse Elements",
-                    jsx_runtime_1.jsx("svg", { "aria-hidden": "true", viewBox: "0 0 16 16", style: browseElementsArrowStyle, children: jsx_runtime_1.jsx("path", { d: "M4 12 12 4M6 4h6v6", fill: "none", stroke: colors_1.CURRENT_COLOR, strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "1.5" }) })
-                ] })) : null, downloadProject ? (jsx_runtime_1.jsx(common_1.InspectorQuickAction, { disabled: false, onClick: onDownloadProject, renderIcon: (color) => (jsx_runtime_1.jsx(cloud_download_1.CloudDownloadIcon, { color: color, style: actionIconStyle })), children: "Download project" })) : null] }));
+    return (jsx_runtime_1.jsxs(common_1.InspectorQuickActionsSection, { children: [canShowInsertSolid ? (jsx_runtime_1.jsx(common_1.InspectorQuickAction, { 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.InspectorQuickAction, { disabled: !canInsertAsset, onClick: insertAsset, renderIcon: (color) => (jsx_runtime_1.jsx(frame_1.PicIcon, { color: color, style: actionIconStyle })), children: "Add asset..." })) : null, canShowInsertComposition ? (jsx_runtime_1.jsx(common_1.InspectorQuickAction, { disabled: !canInsertComposition, onClick: insertComposition, renderIcon: (color) => (jsx_runtime_1.jsx(video_1.FilmIcon, { color: color, style: actionIconStyle })), children: "Add composition..." })) : null, canShowInsertAsset ? jsx_runtime_1.jsx(ElementLibraryButton_1.ElementLibraryButton, {}) : null, downloadProject ? (jsx_runtime_1.jsx(common_1.InspectorQuickAction, { disabled: false, onClick: onDownloadProject, renderIcon: (color) => (jsx_runtime_1.jsx(cloud_download_1.CloudDownloadIcon, { color: color, style: actionIconStyle })), children: "Download project" })) : null] }));
 };
 const CompositionDefaultPropsSection = ({ composition, currentDefaultProps, readOnlyStudio, setDefaultProps }) => {
     var _a;
@@ -138,14 +115,12 @@ const CompositionDefaultPropsSection = ({ composition, currentDefaultProps, read
     if (readOnlyStudio || !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)
-                ] })
+    return (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 = ({ readOnlyStudio }) => {
@@ -156,17 +131,15 @@ const CompositionVisualControlsSection = ({ readOnlyStudio }) => {
     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, {})
-                ] })
+    return (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 }) => {
     const { previewServerState } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
     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 || previewServerState.type !== 'connected', stack: composition.stack })
+                    jsx_runtime_1.jsx(CompositionInspectorHeader_1.CompositionInspectorHeader, {}), jsx_runtime_1.jsx(CompositionMetadata_1.CompositionMetadata, { compositionId: composition.id, disabled: readOnlyStudio || previewServerState.type !== 'connected', stack: composition.stack })
                 ] }), jsx_runtime_1.jsx(CompositionDefaultPropsSection, { composition: composition, currentDefaultProps: currentDefaultProps, readOnlyStudio: readOnlyStudio, setDefaultProps: setDefaultProps }), jsx_runtime_1.jsx(CompositionVisualControlsSection, { readOnlyStudio: readOnlyStudio }), jsx_runtime_1.jsx(CompositionActions, {})
         ] }));
 };

package/dist/components/InspectorPanel/CompositionInspectorHeader.js

@@ -18,7 +18,7 @@ const layout_1 = require("../layout");
 const NotificationCenter_1 = require("../Notifications/NotificationCenter");
 const use_resolved_stack_1 = require("../Timeline/use-resolved-stack");
 const use_default_editor_info_1 = require("../use-default-editor-info");
-const COMPOSITION_INSPECTOR_HEADER_HEIGHT = 66;
+const COMPOSITION_INSPECTOR_HEADER_HEIGHT = layout_1.COMPACT_CONTROL_ROW_HEIGHT * 3;
 const sourceLocationIconStyle = {
     flexShrink: 0,
     height: 18,
@@ -26,7 +26,7 @@ const sourceLocationIconStyle = {
 };
 const componentLocationPlaceholder = {
     flexShrink: 0,
-    height: layout_1.COMPACT_INLINE_ROW_HEIGHT,
+    height: layout_1.COMPACT_CONTROL_ROW_HEIGHT,
 };
 const renderReactIcon = (color) => {
     return jsx_runtime_1.jsx(react_2.ReactIcon, { color: color, style: sourceLocationIconStyle });

package/dist/components/InspectorPanel/CompositionMetadata.js

@@ -39,23 +39,30 @@ const computedValueStyle = {
     fontStyle: 'italic',
     lineHeight: '20px',
 };
+const metadataFormatterStyle = {
+    fontSize: 13,
+};
 const metadataDraggerStyles = {
     durationInFrames: {
+        fontSize: 13,
         padding: '2px 0 2px 6px',
         textAlign: 'right',
-        width: 92,
+        width: 104,
     },
     fps: {
+        fontSize: 13,
         padding: '2px 0 2px 6px',
         textAlign: 'right',
         width: 72,
     },
     height: {
+        fontSize: 13,
         padding: '2px 0 2px 6px',
         textAlign: 'right',
         width: 52,
     },
     width: {
+        fontSize: 13,
         padding: '2px 0 2px 6px',
         textAlign: 'right',
         width: 52,
@@ -115,7 +122,7 @@ const dimensionPresets = [
 const frameRatePresets = [23.976, 24, 25, 29.97, 30, 50, 60];
 const PresetDropdown = ({ disabled, title, values, visible }) => {
     const renderAction = (0, react_1.useCallback)((color) => {
-        return (jsx_runtime_1.jsx("span", { style: presetButtonIcon, children: jsx_runtime_1.jsx(caret_1.CaretDown, { color: color, small: true }) }));
+        return (jsx_runtime_1.jsx("span", { style: presetButtonIcon, children: jsx_runtime_1.jsx(caret_1.CaretDown, { color: color }) }));
     }, []);
     return (jsx_runtime_1.jsx("div", { style: {
             ...presetDropdownContainer,
@@ -146,7 +153,7 @@ const CompositionMetadataValue = ({ computed, disabled, field, onSave, pendingVa
         }
         return String(roundedValue);
     }, [field]);
-    return computed ? (jsx_runtime_1.jsx("span", { style: computedContainerStyle, children: jsx_runtime_1.jsx("span", { style: computedValueStyle, children: formatValue(value) }) })) : disabled ? (formatValue(value)) : (jsx_runtime_1.jsx(InputDragger_1.InputDragger, { "aria-label": fieldLabels[field], buttonStyle: metadataDraggerStyles[field], type: "number", value: (_a = dragValue !== null && dragValue !== void 0 ? dragValue : pendingValue === null || pendingValue === void 0 ? void 0 : pendingValue.value) !== null && _a !== void 0 ? _a : value, disabled: pendingValue !== null, status: "ok", onValueChange: setDragValue, onValueChangeEnd: save, onTextChange: () => undefined, min: isFps ? 0.01 : 1, step: isFps ? 0.01 : 1, dragDecimalPlaces: isFps ? 2 : 0, formatter: formatValue, rightAlign: true, style: metadataDraggerStyles[field] }));
+    return computed || disabled ? (jsx_runtime_1.jsx("span", { style: computedContainerStyle, children: jsx_runtime_1.jsx("span", { style: computedValueStyle, children: formatValue(value) }) })) : (jsx_runtime_1.jsx(InputDragger_1.InputDragger, { "aria-label": fieldLabels[field], buttonStyle: metadataDraggerStyles[field], type: "number", value: (_a = dragValue !== null && dragValue !== void 0 ? dragValue : pendingValue === null || pendingValue === void 0 ? void 0 : pendingValue.value) !== null && _a !== void 0 ? _a : value, disabled: pendingValue !== null, status: "ok", onValueChange: setDragValue, onValueChangeEnd: save, onTextChange: () => undefined, min: isFps ? 0.01 : 1, step: isFps ? 0.01 : 1, dragDecimalPlaces: isFps ? 2 : 0, formatter: formatValue, formatterStyle: metadataFormatterStyle, rightAlign: true, style: metadataDraggerStyles[field] }));
 };
 const CompositionMetadata = ({ compositionId, disabled, stack }) => {
     var _a, _b, _c, _d;
@@ -310,7 +317,7 @@ const CompositionMetadata = ({ compositionId, disabled, stack }) => {
     return (jsx_runtime_1.jsxs("div", { style: compositionMetadataContainer, children: [jsx_runtime_1.jsx(common_1.InspectorDetailRow, { label: (hovered) => (jsx_runtime_1.jsxs("div", { style: metadataLabelControls, children: [
                         jsx_runtime_1.jsx("span", { style: metadataLabelText, children: "Dimensions" }), disabled || widthIsComputed || heightIsComputed ? null : (jsx_runtime_1.jsx(PresetDropdown, { disabled: pendingValues.width !== undefined ||
                                 pendingValues.height !== undefined, title: "Choose dimension preset", values: dimensionPresetValues, visible: hovered }))] })), children: jsx_runtime_1.jsxs("div", { style: dimensionsControls, children: [
-                        jsx_runtime_1.jsx(CompositionMetadataValue, { computed: widthIsComputed, disabled: disabled, field: "width", onSave: saveMetadata, pendingValue: (_a = pendingValues.width) !== null && _a !== void 0 ? _a : null, value: video.width }), disabled ? '\u00A0' : null, jsx_runtime_1.jsx(CompositionMetadataValue, { computed: heightIsComputed, disabled: disabled, field: "height", onSave: saveMetadata, pendingValue: (_b = pendingValues.height) !== null && _b !== void 0 ? _b : null, value: video.height })
+                        jsx_runtime_1.jsx(CompositionMetadataValue, { computed: widthIsComputed, disabled: disabled, field: "width", onSave: saveMetadata, pendingValue: (_a = pendingValues.width) !== null && _a !== void 0 ? _a : null, value: video.width }), jsx_runtime_1.jsx(CompositionMetadataValue, { computed: heightIsComputed, disabled: disabled, field: "height", onSave: saveMetadata, pendingValue: (_b = pendingValues.height) !== null && _b !== void 0 ? _b : null, value: video.height })
                     ] }) }), isStill ? null : (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [jsx_runtime_1.jsx(common_1.InspectorDetailRow, { label: (hovered) => (jsx_runtime_1.jsxs("div", { style: metadataLabelControls, children: [
                                 jsx_runtime_1.jsx("span", { style: metadataLabelText, children: "Frame rate" }), disabled || fpsIsComputed ? null : (jsx_runtime_1.jsx(PresetDropdown, { disabled: pendingValues.fps !== undefined, title: "Choose frame rate preset", values: frameRatePresetValues, visible: hovered }))] })), children: jsx_runtime_1.jsx("div", { style: dimensionsControls, children: jsx_runtime_1.jsx(CompositionMetadataValue, { computed: fpsIsComputed, disabled: disabled, field: "fps", onSave: saveMetadata, pendingValue: (_c = pendingValues.fps) !== null && _c !== void 0 ? _c : null, value: video.fps }) }) }), jsx_runtime_1.jsx(common_1.InspectorDetailRow, { label: "Duration", children: jsx_runtime_1.jsx(CompositionMetadataValue, { computed: durationIsComputed, disabled: disabled, field: "durationInFrames", onSave: saveMetadata, pendingValue: (_d = pendingValues.durationInFrames) !== null && _d !== void 0 ? _d : null, value: video.durationInFrames }) })
                 ] }))] }));

package/dist/components/InspectorPanel/EasingInspector.js

@@ -206,7 +206,7 @@ const EasingInspector = ({ selection }) => {
         easingKeyframeDisplayOffset,
     ]);
     const renderHeader = (0, react_1.useCallback)(() => (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
-            jsx_runtime_1.jsx(common_1.InspectorBackAction, { disabled: parentSelection === null, onClick: onSelectParent, title: "Back to property", children: fieldLabel }), jsx_runtime_1.jsx(common_1.InspectorSectionDivider, {}), easingUpdate === null || track === null ? null : (jsx_runtime_1.jsx(KeyframeEasingNavigator_1.KeyframeEasingNavigator, { currentSelection: currentEasingSelection !== null && currentEasingSelection !== void 0 ? currentEasingSelection : selection, includeEasings: true, keyframes: easingUpdate.propStatus.keyframes.map((keyframe) => ({
+            jsx_runtime_1.jsx(common_1.InspectorBackAction, { disabled: parentSelection === null, onClick: onSelectParent, title: "Back to property", children: fieldLabel }), easingUpdate === null || track === null ? null : (jsx_runtime_1.jsx(KeyframeEasingNavigator_1.KeyframeEasingNavigator, { currentSelection: currentEasingSelection !== null && currentEasingSelection !== void 0 ? currentEasingSelection : selection, includeEasings: true, keyframes: easingUpdate.propStatus.keyframes.map((keyframe) => ({
                     ...keyframe,
                     frame: keyframe.frame + easingKeyframeDisplayOffset,
                 })), nodePathInfo: selection.nodePathInfo }))] })), [
@@ -226,6 +226,6 @@ const EasingInspector = ({ selection }) => {
         return jsx_runtime_1.jsx(common_1.InspectorMessage, { children: "Easing unavailable" });
     }
     return (jsx_runtime_1.jsxs("div", { style: styles_1.selectedContainer, className: is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME, children: [
-            jsx_runtime_1.jsx(SequenceInspectorHeader_1.SequenceInspectorSections, { track: track }), jsx_runtime_1.jsx(common_1.InspectorSectionDivider, {}), jsx_runtime_1.jsx(EasingEditorModal_1.EasingEditor, { state: state, renderHeader: renderHeader }, (0, TimelineSelection_1.getTimelineSelectionKey)(currentEasingSelection)), jsx_runtime_1.jsx(common_1.InspectorSectionDivider, {}), jsx_runtime_1.jsx(KeyframeSettings_1.KeyframeSettings, { update: easingUpdate }), canAddKeyframeAtPlayhead ? (jsx_runtime_1.jsx(common_1.InspectorQuickActionsSection, { children: jsx_runtime_1.jsx(common_1.InspectorQuickAction, { disabled: addKeyframeDisabled, onClick: onAddKeyframeAtPlayhead, renderIcon: (color) => (jsx_runtime_1.jsx(plus_1.Plus, { color: color, style: addKeyframeIcon })), children: `Add keyframe at ${addKeyframeTime}` }) })) : null] }));
+            jsx_runtime_1.jsx(SequenceInspectorHeader_1.SequenceInspectorSections, { track: track }), jsx_runtime_1.jsx(EasingEditorModal_1.EasingEditor, { state: state, renderHeader: renderHeader }, (0, TimelineSelection_1.getTimelineSelectionKey)(currentEasingSelection)), jsx_runtime_1.jsx(KeyframeSettings_1.KeyframeSettings, { update: easingUpdate }), canAddKeyframeAtPlayhead ? (jsx_runtime_1.jsx(common_1.InspectorQuickActionsSection, { children: jsx_runtime_1.jsx(common_1.InspectorQuickAction, { disabled: addKeyframeDisabled, onClick: onAddKeyframeAtPlayhead, renderIcon: (color) => (jsx_runtime_1.jsx(plus_1.Plus, { color: color, style: addKeyframeIcon })), children: `Add keyframe at ${addKeyframeTime}` }) })) : null] }));
 };
 exports.EasingInspector = EasingInspector;

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

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const ElementLibraryButton: React.FC;

package/dist/components/InspectorPanel/ElementLibraryButton.js

@@ -0,0 +1,139 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ElementLibraryButton = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const browser_studio_operations_1 = require("../../helpers/browser-studio-operations");
+const colors_1 = require("../../helpers/colors");
+const browse_elements_1 = require("../../icons/browse-elements");
+const caret_1 = require("../../icons/caret");
+const modals_1 = require("../../state/modals");
+const InspectorPanelLayout_1 = require("../InspectorPanelLayout");
+const SegmentedButton_1 = require("../SegmentedButton");
+const SettingsContext_1 = require("../SettingsContext");
+const common_1 = require("./common");
+const noElementLibraries = [];
+const browseElementsIconStyle = {
+    height: 22,
+    width: 22,
+};
+const browseElementsIconContainerStyle = {
+    height: 22,
+    marginLeft: -2,
+    marginRight: -2,
+    width: 22,
+};
+const browseElementsArrowStyle = {
+    display: 'inline-block',
+    height: 12,
+    marginLeft: 4,
+    verticalAlign: -2,
+    width: 12,
+};
+const elementLibraryDropdownStyle = {
+    borderRadius: 4,
+    height: 28,
+    margin: '0 4px',
+    width: 'calc(100% - 8px)',
+};
+const elementLibraryDropdownSegmentStyle = {
+    fontSize: 13,
+    gap: 8,
+    justifyContent: 'flex-start',
+    padding: `0 ${InspectorPanelLayout_1.INSPECTOR_PANEL_HORIZONTAL_PADDING - 4}px`,
+    width: '100%',
+};
+const elementLibraryDropdownLabelStyle = {
+    flex: 1,
+    fontFamily: 'sans-serif',
+    fontSize: 13,
+    lineHeight: '18px',
+    minWidth: 0,
+    overflow: 'hidden',
+    textAlign: 'left',
+    textOverflow: 'ellipsis',
+    whiteSpace: 'nowrap',
+};
+const elementLibraryDropdownCaretStyle = {
+    display: 'flex',
+    height: 12,
+    width: 12,
+};
+const ElementLibraryButton = () => {
+    var _a;
+    const { setSelectedModal } = (0, react_1.useContext)(modals_1.SetSelectedModalContext);
+    const { studioRuntimeConfig } = (0, SettingsContext_1.useSettings)();
+    const isBrowserStudio = (0, browser_studio_operations_1.getBrowserStudioOperations)() !== null;
+    const elementLibraries = (_a = studioRuntimeConfig === null || studioRuntimeConfig === void 0 ? void 0 : studioRuntimeConfig.elementLibraries) !== null && _a !== void 0 ? _a : noElementLibraries;
+    const openElementLibrary = (0, react_1.useCallback)((name, url) => {
+        if (isBrowserStudio) {
+            window.open(url, '_blank', 'noopener,noreferrer');
+            return;
+        }
+        setSelectedModal({
+            type: 'element-library',
+            name,
+            url,
+        });
+    }, [isBrowserStudio, setSelectedModal]);
+    const openElementsLibrary = (0, react_1.useCallback)(() => {
+        openElementLibrary('Remotion Elements', 'https://www.remotion.dev/elements');
+    }, [openElementLibrary]);
+    const elementLibraryDropdownSegments = (0, react_1.useMemo)(() => [
+        {
+            ariaLabel: 'Browse Elements',
+            buttonId: null,
+            disabled: false,
+            idleColor: colors_1.LIGHT_TEXT,
+            leaveLeftSpace: false,
+            onOpenChange: null,
+            renderContent: (color) => (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
+                    jsx_runtime_1.jsx("span", { style: browseElementsIconContainerStyle, children: jsx_runtime_1.jsx(browse_elements_1.BrowseElementsIcon, { color: color, style: browseElementsIconStyle }) }), jsx_runtime_1.jsx("span", { style: elementLibraryDropdownLabelStyle, children: "Browse Elements" }), jsx_runtime_1.jsx("span", { style: elementLibraryDropdownCaretStyle, children: jsx_runtime_1.jsx(caret_1.CaretDown, { color: color }) })
+                ] })),
+            segmentId: 'element-library',
+            selectedId: null,
+            style: elementLibraryDropdownSegmentStyle,
+            title: 'Choose an Element library to browse inside Studio.',
+            type: 'menu',
+            values: [
+                {
+                    disabled: false,
+                    id: 'remotion-elements',
+                    keyHint: null,
+                    label: 'Remotion Elements',
+                    leftItem: null,
+                    onClick: openElementsLibrary,
+                    quickSwitcherLabel: null,
+                    subMenu: null,
+                    type: 'item',
+                    value: 'https://www.remotion.dev/elements',
+                },
+                ...elementLibraries.map((library, index) => {
+                    var _a;
+                    const parsedUrl = new URL(library.url);
+                    const pathname = parsedUrl.pathname.replace(/\/$/, '');
+                    const label = (_a = library.displayName) !== null && _a !== void 0 ? _a : `${parsedUrl.host}${pathname}`;
+                    return {
+                        disabled: false,
+                        id: `external-element-library-${index}`,
+                        keyHint: null,
+                        label,
+                        leftItem: null,
+                        onClick: () => openElementLibrary(label, library.url),
+                        quickSwitcherLabel: null,
+                        subMenu: null,
+                        type: 'item',
+                        value: library.url,
+                    };
+                }),
+            ],
+        },
+    ], [elementLibraries, openElementLibrary, openElementsLibrary]);
+    if (elementLibraries.length > 0 && !isBrowserStudio) {
+        return (jsx_runtime_1.jsx(SegmentedButton_1.SegmentedButton, { segments: elementLibraryDropdownSegments, style: elementLibraryDropdownStyle, title: null }));
+    }
+    return (jsx_runtime_1.jsxs(common_1.InspectorQuickAction, { disabled: false, iconContainerStyle: browseElementsIconContainerStyle, onClick: openElementsLibrary, renderIcon: (color) => (jsx_runtime_1.jsx(browse_elements_1.BrowseElementsIcon, { color: color, style: browseElementsIconStyle })), title: isBrowserStudio
+            ? 'Open the Remotion Elements library in a new tab. Install an Element there to send it to this composition.'
+            : 'Browse the Remotion Elements library inside Studio.', children: ["Browse Elements", isBrowserStudio ? (jsx_runtime_1.jsx("svg", { "aria-hidden": "true", viewBox: "0 0 16 16", style: browseElementsArrowStyle, children: jsx_runtime_1.jsx("path", { d: "M4 12 12 4M6 4h6v6", fill: "none", stroke: colors_1.CURRENT_COLOR, strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "1.5" }) })) : null] }));
+};
+exports.ElementLibraryButton = ElementLibraryButton;

package/dist/components/InspectorPanel/KeyframeInspector.js

@@ -338,7 +338,7 @@ const KeyframeInspector = ({ selection }) => {
         return jsx_runtime_1.jsx(common_1.InspectorMessage, { children: "Keyframe unavailable" });
     }
     return (jsx_runtime_1.jsxs("div", { style: styles_1.selectedContainer, className: is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME, children: [
-            jsx_runtime_1.jsx(SequenceInspectorHeader_1.SequenceInspectorSections, { track: track }), jsx_runtime_1.jsx(common_1.InspectorSectionDivider, {}), jsx_runtime_1.jsx(common_1.InspectorBackAction, { disabled: parentSelection === null, onClick: onSelectParent, title: "Back to property", children: details.fieldLabel }), jsx_runtime_1.jsx(common_1.InspectorSectionDivider, {}), jsx_runtime_1.jsx(KeyframeEasingNavigator_1.KeyframeEasingNavigator, { currentSelection: selection, includeEasings: (0, update_selected_easing_1.canEditEasingForInterpolationFunction)(details.propStatus.interpolationFunction), keyframes: details.propStatus.keyframes.map((keyframe) => ({
+            jsx_runtime_1.jsx(SequenceInspectorHeader_1.SequenceInspectorSections, { track: track }), jsx_runtime_1.jsx(common_1.InspectorBackAction, { disabled: parentSelection === null, onClick: onSelectParent, title: "Back to property", children: details.fieldLabel }), jsx_runtime_1.jsx(KeyframeEasingNavigator_1.KeyframeEasingNavigator, { currentSelection: selection, includeEasings: (0, update_selected_easing_1.canEditEasingForInterpolationFunction)(details.propStatus.interpolationFunction), keyframes: details.propStatus.keyframes.map((keyframe) => ({
                     ...keyframe,
                     frame: keyframe.frame + details.keyframeDisplayOffset,
                 })), nodePathInfo: selection.nodePathInfo }), jsx_runtime_1.jsxs("div", { style: styles_1.detailsWithInlineAction, children: [

package/dist/components/InspectorPanel/SequenceInspectorHeader.js

@@ -4,6 +4,7 @@ exports.SequenceInspectorSections = exports.SequenceInspectorDuplicationSection
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const client_id_1 = require("../../helpers/client-id");
+const colors_1 = require("../../helpers/colors");
 const react_2 = require("../../icons/react");
 const InlineEditableTitle_1 = require("../InlineEditableTitle");
 const InspectorInfoHeader_1 = require("../InspectorInfoHeader");
@@ -29,7 +30,7 @@ const sequenceInspectorSubtitle = {
     alignItems: 'center',
     boxSizing: 'border-box',
     fontSize: 13,
-    height: layout_1.COMPACT_INLINE_ROW_HEIGHT,
+    height: layout_1.COMPACT_CONTROL_ROW_HEIGHT,
     lineHeight: '18px',
     margin: '0 4px',
     padding: `0 ${InspectorPanelLayout_1.INSPECTOR_PANEL_HORIZONTAL_PADDING - 4}px`,
@@ -38,6 +39,13 @@ const sequenceInspectorSubtitle = {
 const defaultCursor = {
     cursor: 'default',
 };
+const externalTabIndicatorStyle = {
+    display: 'inline-block',
+    height: 12,
+    marginLeft: 4,
+    verticalAlign: -2,
+    width: 12,
+};
 const useSequenceInspectorSourceLocation = (sequence) => {
     const { canOpenInEditor, openInEditor, originalLocation } = (0, use_open_sequence_in_apps_1.useOpenSequenceInApps)(sequence);
     const validatedLocation = (0, react_1.useMemo)(() => {
@@ -96,7 +104,8 @@ const SequenceInspectorHeader = ({ sourceLocation, track }) => {
         saveName(newName).catch(() => undefined);
     }, [saveName]);
     return (jsx_runtime_1.jsx(InspectorInfoHeader_1.InspectorInfoHeader, { contentSized: true, padding: "4px 0", children: jsx_runtime_1.jsxs(InspectorLocationCopy_1.InspectorLocationCopy, { location: sourceLocation.validatedLocation, name: componentName !== null && componentName !== void 0 ? componentName : null, openInEditorLocation: sourceLocation.validatedLocation, children: [
-                jsx_runtime_1.jsx(InlineEditableTitle_1.InlineEditableTitle, { value: sequenceDisplayName, canRename: canRename, onCommit: onRename, size: "inspector" }), documentationLink ? (jsx_runtime_1.jsx(common_1.InspectorQuickAction, { disabled: false, style: defaultCursor, size: "compact", title: "Open component docs", onClick: openDocumentationLink, children: componentName })) : (jsx_runtime_1.jsx("div", { style: subtitleStyle, children: componentName })), jsx_runtime_1.jsx(InspectorSourceLocation_1.InspectorSourceLocation, { location: sourceLocation.validatedLocation, canOpen: sourceLocation.canOpenInEditor, onOpen: sourceLocation.openFileLocation, renderIcon: renderReactIcon, size: "quick-action" })
+                jsx_runtime_1.jsx(InlineEditableTitle_1.InlineEditableTitle, { value: sequenceDisplayName, canRename: canRename, onCommit: onRename, size: "inspector" }), documentationLink ? (jsx_runtime_1.jsxs(common_1.InspectorQuickAction, { disabled: false, style: defaultCursor, title: "Open component docs", onClick: openDocumentationLink, children: [componentName, jsx_runtime_1.jsx("svg", { "aria-hidden": "true", viewBox: "0 0 16 16", style: externalTabIndicatorStyle, children: jsx_runtime_1.jsx("path", { d: "M4 12 12 4M6 4h6v6", fill: "none", stroke: colors_1.CURRENT_COLOR, strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "1.5" }) })
+                    ] })) : (jsx_runtime_1.jsx("div", { style: subtitleStyle, children: componentName })), jsx_runtime_1.jsx(InspectorSourceLocation_1.InspectorSourceLocation, { location: sourceLocation.validatedLocation, canOpen: sourceLocation.canOpenInEditor, onOpen: sourceLocation.openFileLocation, renderIcon: renderReactIcon, size: "quick-action" })
             ] }) }));
 };
 exports.SequenceInspectorHeader = SequenceInspectorHeader;
@@ -122,8 +131,6 @@ const SequenceInspectorSections = ({ track }) => {
     const sourceLocation = (0, exports.useSequenceInspectorSourceLocation)(track.sequence);
     const connectedCompositions = (0, ConnectedCompositionsSection_1.useConnectedCompositions)({ track });
     return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
-            jsx_runtime_1.jsx(exports.SequenceInspectorHeader, { sourceLocation: sourceLocation, track: track }), jsx_runtime_1.jsx(exports.SequenceInspectorDuplicationSection, { track: track }), connectedCompositions.length > 0 ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
-                    jsx_runtime_1.jsx(common_1.InspectorSectionDivider, {}), jsx_runtime_1.jsx(ConnectedCompositionsSection_1.ConnectedCompositionsSection, { connectedCompositions: connectedCompositions })
-                ] })) : null] }));
+            jsx_runtime_1.jsx(exports.SequenceInspectorHeader, { sourceLocation: sourceLocation, track: track }), jsx_runtime_1.jsx(exports.SequenceInspectorDuplicationSection, { track: track }), connectedCompositions.length > 0 ? (jsx_runtime_1.jsx(ConnectedCompositionsSection_1.ConnectedCompositionsSection, { connectedCompositions: connectedCompositions })) : null] }));
 };
 exports.SequenceInspectorSections = SequenceInspectorSections;

package/dist/components/InspectorPanel/SequenceSelectionInspector.js

@@ -168,9 +168,7 @@ const SequenceExpandedInspector = ({ track, readOnlyStudio }) => {
         return jsx_runtime_1.jsx(common_1.InspectorMessage, { children: "Sequence inspector unavailable" });
     }
     return (jsx_runtime_1.jsxs("div", { style: styles_1.selectedContainer, className: is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME, onPointerDown: selectSequenceOnInspectorPointerDown, children: [
-            jsx_runtime_1.jsx(SequenceInspectorHeader_1.SequenceInspectorHeader, { sourceLocation: sourceLocation, track: track }, stackKey !== null && stackKey !== void 0 ? stackKey : track.sequence.id), jsx_runtime_1.jsx(SequenceInspectorHeader_1.SequenceInspectorDuplicationSection, { track: track }), connectedCompositions.length > 0 ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
-                    jsx_runtime_1.jsx(common_1.InspectorSectionDivider, {}), jsx_runtime_1.jsx(ConnectedCompositionsSection_1.ConnectedCompositionsSection, { connectedCompositions: connectedCompositions })
-                ] })) : null, validatedLocation ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [jsx_runtime_1.jsx(InspectorSequenceSection_1.InspectorSequenceSection, { sequence: track.sequence, readOnlyStudio: readOnlyStudio, validatedLocation: validatedLocation, nodePathInfo: track.nodePathInfo, keyframeDisplayOffset: track.keyframeDisplayOffset, renderTransformControls: () => jsx_runtime_1.jsx(AlignmentControls_1.AlignmentControls, { track: track }) }), jsx_runtime_1.jsxs(common_1.InspectorQuickActionsSection, { children: [
+            jsx_runtime_1.jsx(SequenceInspectorHeader_1.SequenceInspectorHeader, { sourceLocation: sourceLocation, track: track }, stackKey !== null && stackKey !== void 0 ? stackKey : track.sequence.id), jsx_runtime_1.jsx(SequenceInspectorHeader_1.SequenceInspectorDuplicationSection, { track: track }), connectedCompositions.length > 0 ? (jsx_runtime_1.jsx(ConnectedCompositionsSection_1.ConnectedCompositionsSection, { connectedCompositions: connectedCompositions })) : null, validatedLocation ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [jsx_runtime_1.jsx(InspectorSequenceSection_1.InspectorSequenceSection, { sequence: track.sequence, readOnlyStudio: readOnlyStudio, validatedLocation: validatedLocation, nodePathInfo: track.nodePathInfo, keyframeDisplayOffset: track.keyframeDisplayOffset, renderTransformControls: () => jsx_runtime_1.jsx(AlignmentControls_1.AlignmentControls, { track: track }) }), jsx_runtime_1.jsxs(common_1.InspectorQuickActionsSection, { children: [
                             jsx_runtime_1.jsx(SplitSequenceQuickAction, { selection: sequenceSelection, track: track }), jsx_runtime_1.jsx(SequenceSourceQuickActions, { selection: sequenceSelection, track: track, validatedSource: validatedLocation.source })
                         ] })
                 ] })) : (jsx_runtime_1.jsx(common_1.InspectorMessage, { children: "Source controls unavailable" }))] }));

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

@@ -3,7 +3,6 @@ import type { RenderModalWarning } from '../RenderModal/DataEditor';
 export declare const InspectorSectionHeader: React.FC<{
     readonly children: React.ReactNode;
 }>;
-export declare const InspectorSectionDivider: React.FC;
 export declare const InspectorQuickActionsSection: React.FC<{
     readonly children: React.ReactNode;
 }>;

package/dist/components/InspectorPanel/common.js

@@ -3,7 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.InspectorDefaultPropsWarnings = exports.InspectorQuickAction = exports.InspectorDetailRow = exports.InspectorMessage = exports.InspectorBackAction = exports.InspectorSection = exports.InspectorQuickActionsSection = exports.InspectorSectionDivider = exports.InspectorSectionHeader = void 0;
+exports.InspectorDefaultPropsWarnings = exports.InspectorQuickAction = exports.InspectorDetailRow = exports.InspectorMessage = exports.InspectorBackAction = exports.InspectorSection = exports.InspectorQuickActionsSection = exports.InspectorSectionHeader = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = __importDefault(require("react"));
 const colors_1 = require("../../helpers/colors");
@@ -14,15 +14,11 @@ const ValidationMessage_1 = require("../NewComposition/ValidationMessage");
 const styles_1 = require("./styles");
 const InspectorSectionHeader = ({ children }) => jsx_runtime_1.jsx("div", { style: styles_1.sectionHeader, children: children });
 exports.InspectorSectionHeader = InspectorSectionHeader;
-const InspectorSectionDivider = () => (jsx_runtime_1.jsx("div", { style: styles_1.inspectorSectionDivider }));
-exports.InspectorSectionDivider = InspectorSectionDivider;
-const InspectorQuickActionsSection = ({ children }) => (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
-        jsx_runtime_1.jsx(exports.InspectorSectionDivider, {}), jsx_runtime_1.jsx("div", { style: styles_1.inspectorQuickActionsSection, children: children })
-    ] }));
+const InspectorQuickActionsSection = ({ children }) => jsx_runtime_1.jsx("div", { style: styles_1.inspectorQuickActionsSection, children: children });
 exports.InspectorQuickActionsSection = InspectorQuickActionsSection;
 const InspectorSection = ({ children, header }) => {
     return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
-            jsx_runtime_1.jsx(exports.InspectorSectionDivider, {}), jsx_runtime_1.jsx(exports.InspectorSectionHeader, { children: header }), children === null ? null : (jsx_runtime_1.jsx("div", { style: styles_1.inspectorSectionBody, children: children }))] }));
+            jsx_runtime_1.jsx(exports.InspectorSectionHeader, { children: header }), children === null ? null : (jsx_runtime_1.jsx("div", { style: styles_1.inspectorSectionBody, children: children }))] }));
 };
 exports.InspectorSection = InspectorSection;
 const backArrowIcon = {

package/dist/components/InspectorPanel/inspector-selection.d.ts

@@ -2,9 +2,9 @@ import { type TimelineSelection } from '../Timeline/TimelineSelection';
 export type SequenceSectionSelection = Extract<TimelineSelection, {
     type: 'sequence' | 'sequence-prop' | 'sequence-all-effects' | 'sequence-effect' | 'sequence-effect-prop';
 }>;
-export declare const isSequenceSectionSelection: (selection: TimelineSelection) => selection is SequenceSectionSelection;
+export declare const isSequenceSectionSelection: (selection: import("@remotion/canvas").CanvasSelectionItem) => selection is SequenceSectionSelection;
 type SameSequenceInspectorSelection = Extract<TimelineSelection, {
     type: 'sequence-prop' | 'sequence-effect' | 'sequence-effect-prop';
 }>;
-export declare const getSameSequenceInspectorSelection: (selections: readonly TimelineSelection[]) => SameSequenceInspectorSelection | null;
+export declare const getSameSequenceInspectorSelection: (selections: readonly import("@remotion/canvas").CanvasSelectionItem[]) => SameSequenceInspectorSelection | null;
 export {};

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

@@ -4,7 +4,6 @@ export declare const scrollableContainer: React.CSSProperties;
 export declare const compositionDefaultPropsSection: React.CSSProperties;
 export declare const compositionVisualControlsSection: React.CSSProperties;
 export declare const inspectorOverviewSection: React.CSSProperties;
-export declare const inspectorSectionDivider: React.CSSProperties;
 export declare const sequenceHeaderDivider: React.CSSProperties;
 export declare const sectionHeader: React.CSSProperties;
 export declare const inspectorSectionBody: React.CSSProperties;

package/dist/components/InspectorPanel/styles.js

@@ -1,8 +1,9 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.keyframeEditorValue = exports.keyframeEditorRow = exports.detailValue = exports.detailLabel = exports.detailRow = exports.guideDetailsContainer = exports.detailsBeforeInlineAction = exports.inspectorQuickActionsSection = exports.detailsWithInlineAction = exports.detailsContainer = exports.centeredMessage = exports.selectedContainer = exports.resolveLinkStyle = exports.defaultPropsWarningMessages = exports.defaultPropsWarningContainer = exports.sectionHeaderEnd = exports.sectionHeaderStart = exports.sectionHeaderTitle = exports.sectionHeaderRow = exports.sequenceHeaderSubtitle = exports.inspectorSectionBody = exports.sectionHeader = exports.sequenceHeaderDivider = exports.inspectorSectionDivider = exports.inspectorOverviewSection = exports.compositionVisualControlsSection = exports.compositionDefaultPropsSection = exports.scrollableContainer = exports.container = void 0;
+exports.keyframeEditorValue = exports.keyframeEditorRow = exports.detailValue = exports.detailLabel = exports.detailRow = exports.guideDetailsContainer = exports.detailsBeforeInlineAction = exports.inspectorQuickActionsSection = exports.detailsWithInlineAction = exports.detailsContainer = exports.centeredMessage = exports.selectedContainer = exports.resolveLinkStyle = exports.defaultPropsWarningMessages = exports.defaultPropsWarningContainer = exports.sectionHeaderEnd = exports.sectionHeaderStart = exports.sectionHeaderTitle = exports.sectionHeaderRow = exports.sequenceHeaderSubtitle = exports.inspectorSectionBody = exports.sectionHeader = exports.sequenceHeaderDivider = exports.inspectorOverviewSection = exports.compositionVisualControlsSection = exports.compositionDefaultPropsSection = exports.scrollableContainer = exports.container = void 0;
 const colors_1 = require("../../helpers/colors");
 const InspectorPanelLayout_1 = require("../InspectorPanelLayout");
+const layout_1 = require("../layout");
 exports.container = {
     backgroundColor: colors_1.BACKGROUND,
     color: colors_1.WHITE,
@@ -29,9 +30,6 @@ exports.inspectorOverviewSection = {
     display: 'flex',
     flexDirection: 'column',
 };
-exports.inspectorSectionDivider = {
-    borderBottom: `1px solid ${colors_1.LINE_COLOR}`,
-};
 exports.sequenceHeaderDivider = {
     backgroundColor: colors_1.LINE_COLOR,
     flexShrink: 0,
@@ -161,6 +159,7 @@ exports.detailRow = {
     display: 'flex',
     gap: 12,
     justifyContent: 'space-between',
+    minHeight: layout_1.COMPACT_CONTROL_ROW_HEIGHT,
 };
 exports.detailLabel = {
     color: colors_1.LIGHT_TEXT,

package/dist/components/InspectorPanel/use-track-for-selection.d.ts

@@ -1,2 +1 @@
-import type { TimelineSelection } from '../Timeline/TimelineSelection';
-export declare const useTrackForSelection: (selection: TimelineSelection) => import("../../helpers/get-timeline-sequence-sort-key").TimelineTrackData | null;
+export declare const useTrackForSelection: (selection: import("@remotion/canvas").CanvasSelectionItem) => import("@remotion/canvas").TimelineTrackData | null;

package/dist/components/InspectorSequenceSection.d.ts

@@ -3,11 +3,10 @@ import { type TSequence } from 'remotion';
 import type { CodePosition } from '../error-overlay/react-overlay/utils/get-source-map';
 import type { SequenceNodePathInfo } from '../helpers/get-timeline-sequence-sort-key';
 import { type FlatTreeRow } from '../helpers/timeline-layout';
-import { type TimelineSelection } from './Timeline/TimelineSelection';
 type SequenceWithControls = TSequence & {
     readonly controls: NonNullable<TSequence['controls']>;
 };
-export declare const getInspectorSelectableItems: (rows: readonly FlatTreeRow[]) => TimelineSelection[];
+export declare const getInspectorSelectableItems: (rows: readonly FlatTreeRow[]) => import("@remotion/canvas").CanvasSelectionItem[];
 export declare const hasSequenceControls: (sequence: TSequence) => sequence is SequenceWithControls;
 export declare const InspectorSequenceSection: React.FC<{
     readonly sequence: SequenceWithControls;

package/dist/components/InspectorSourceLocation.js

@@ -82,7 +82,7 @@ const InspectorSourceLocation = ({ location, canOpen, onOpen, renderIcon, size =
         return null;
     }
     if (size === 'quick-action') {
-        return (jsx_runtime_1.jsx(common_1.InspectorQuickAction, { disabled: !canOpen, onClick: onClick, renderIcon: (iconColor) => renderIcon === null || renderIcon === void 0 ? void 0 : renderIcon(iconColor), size: "compact", title: fileLocation !== null && fileLocation !== void 0 ? fileLocation : undefined, children: label }));
+        return (jsx_runtime_1.jsx(common_1.InspectorQuickAction, { disabled: !canOpen, onClick: onClick, renderIcon: (iconColor) => renderIcon === null || renderIcon === void 0 ? void 0 : renderIcon(iconColor), title: fileLocation !== null && fileLocation !== void 0 ? fileLocation : undefined, children: label }));
     }
     return (jsx_runtime_1.jsxs("button", { type: "button", style: style, title: fileLocation !== null && fileLocation !== void 0 ? fileLocation : undefined, onClick: onClick, onPointerEnter: () => setHovered(true), onPointerLeave: () => setHovered(false), children: [renderIcon ? renderIcon(color) : null, jsx_runtime_1.jsx("span", { style: sourceLocationLabelStyle, children: label })
         ] }));