@remotion/studio 4.0.494 → 4.0.496

package/dist/components/InspectorPanel/{CompositionDimensions.js → CompositionMetadata.js}

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.CompositionDimensions = void 0;
+exports.CompositionMetadata = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const remotion_1 = require("remotion");
@@ -14,19 +14,28 @@ const use_resolved_stack_1 = require("../Timeline/use-resolved-stack");
 const common_1 = require("./common");
 const optimistic_composition_metadata_1 = require("./optimistic-composition-metadata");
 const styles_1 = require("./styles");
+const compositionMetadataContainer = {
+    ...styles_1.detailsContainer,
+    paddingBottom: 4,
+    paddingTop: 4,
+};
 const fieldLabels = {
     durationInFrames: 'Duration',
     fps: 'Frame rate',
     height: 'Height',
     width: 'Width',
 };
-const computedStyle = {
+const computedContainerStyle = {
+    ...InputDragger_1.inputDraggerContainerStyle,
+    textAlign: 'right',
+    userSelect: 'none',
+};
+const computedValueStyle = {
     color: colors_1.WHITE_ALPHA_40,
     fontFamily: 'sans-serif',
     fontSize: 12,
     fontStyle: 'italic',
-    lineHeight: '16px',
-    userSelect: 'none',
+    lineHeight: 1.5,
 };
 const dimensionsControls = {
     alignItems: 'center',
@@ -108,9 +117,9 @@ const CompositionMetadataValue = ({ compositionId, computed, disabled, field, on
         }
         return String(roundedValue);
     }, [field]);
-    return computed ? (jsx_runtime_1.jsx("span", { style: computedStyle, children: formatValue(value) })) : disabled ? (formatValue(value)) : (jsx_runtime_1.jsx(InputDragger_1.InputDragger, { "aria-label": fieldLabels[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, small: true }));
+    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], 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, small: true }));
 };
-const CompositionDimensions = ({ compositionId, disabled, stack }) => {
+const CompositionMetadata = ({ compositionId, disabled, stack }) => {
     var _a, _b, _c, _d;
     const video = remotion_1.Internals.useVideo();
     const resolvedVideoConfig = remotion_1.Internals.useResolvedVideoConfig(compositionId);
@@ -163,11 +172,11 @@ const CompositionDimensions = ({ compositionId, disabled, stack }) => {
     const fpsIsComputed = (metadataSource === null || metadataSource === void 0 ? void 0 : metadataSource.fps) === 'calculate-metadata';
     const durationIsComputed = (metadataSource === null || metadataSource === void 0 ? void 0 : metadataSource.durationInFrames) === 'calculate-metadata';
     const isStill = (0, is_composition_still_1.isCompositionStill)(video);
-    return (jsx_runtime_1.jsxs("div", { style: styles_1.detailsContainer, children: [
+    return (jsx_runtime_1.jsxs("div", { style: compositionMetadataContainer, children: [
             jsx_runtime_1.jsx(common_1.InspectorDetailRow, { label: "Dimensions", children: jsx_runtime_1.jsxs("div", { style: dimensionsControls, children: [
                         jsx_runtime_1.jsx(CompositionMetadataValue, { compositionId: compositionId, computed: widthIsComputed, disabled: disabled, field: "width", onPendingValue: onPendingValue, onPendingValueAccepted: onPendingValueAccepted, onPendingValueFailed: onPendingValueFailed, pendingValue: (_a = pendingValues.width) !== null && _a !== void 0 ? _a : null, resolvedConfig: resolvedConfig, symbolicatedStack: symbolicatedStack, value: video.width }), jsx_runtime_1.jsx(CompositionMetadataValue, { compositionId: compositionId, computed: heightIsComputed, disabled: disabled, field: "height", onPendingValue: onPendingValue, onPendingValueAccepted: onPendingValueAccepted, onPendingValueFailed: onPendingValueFailed, pendingValue: (_b = pendingValues.height) !== null && _b !== void 0 ? _b : null, resolvedConfig: resolvedConfig, symbolicatedStack: symbolicatedStack, value: video.height })
                     ] }) }), isStill ? null : (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
                     jsx_runtime_1.jsx(common_1.InspectorDetailRow, { label: "Frame rate", children: jsx_runtime_1.jsx(CompositionMetadataValue, { compositionId: compositionId, computed: fpsIsComputed, disabled: disabled, field: "fps", onPendingValue: onPendingValue, onPendingValueAccepted: onPendingValueAccepted, onPendingValueFailed: onPendingValueFailed, pendingValue: (_c = pendingValues.fps) !== null && _c !== void 0 ? _c : null, resolvedConfig: resolvedConfig, symbolicatedStack: symbolicatedStack, value: video.fps }) }), jsx_runtime_1.jsx(common_1.InspectorDetailRow, { label: "Duration", children: jsx_runtime_1.jsx(CompositionMetadataValue, { compositionId: compositionId, computed: durationIsComputed, disabled: disabled, field: "durationInFrames", onPendingValue: onPendingValue, onPendingValueAccepted: onPendingValueAccepted, onPendingValueFailed: onPendingValueFailed, pendingValue: (_d = pendingValues.durationInFrames) !== null && _d !== void 0 ? _d : null, resolvedConfig: resolvedConfig, symbolicatedStack: symbolicatedStack, value: video.durationInFrames }) })
                 ] }))] }));
 };
-exports.CompositionDimensions = CompositionDimensions;
+exports.CompositionMetadata = CompositionMetadata;

package/dist/components/InspectorPanel/ConnectedCompositionsSection.js

@@ -9,8 +9,8 @@ const CompositionOrStillIcon_1 = require("../CompositionOrStillIcon");
 const InitialCompositionLoader_1 = require("../InitialCompositionLoader");
 const common_1 = require("./common");
 const compositionIconStyle = {
-    height: 13,
-    width: 13,
+    height: 18,
+    width: 18,
 };
 const compositionListStyle = {
     display: 'flex',

package/dist/components/InspectorPanel/EasingInspector.js

@@ -22,8 +22,8 @@ const styles_1 = require("./styles");
 const use_track_for_selection_1 = require("./use-track-for-selection");
 const addKeyframeIcon = {
     display: 'block',
-    height: 13,
-    width: 12,
+    height: 18,
+    width: 18,
 };
 const EasingInspector = ({ selection }) => {
     var _a, _b;
@@ -195,7 +195,7 @@ const EasingInspector = ({ selection }) => {
         track,
     ]);
     const renderHeader = (0, react_1.useCallback)(() => (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
-            jsx_runtime_1.jsx(common_1.InspectorBackHeader, { disabled: parentSelection === null, onClick: onSelectParent, title: "Back to property", children: jsx_runtime_1.jsx("div", { style: styles_1.sectionHeaderTitle, 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 }), 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) => ({
                     ...keyframe,
                     frame: keyframe.frame + track.keyframeDisplayOffset,
                 })), nodePathInfo: selection.nodePathInfo }))] })), [
@@ -214,8 +214,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.jsxs(jsx_runtime_1.Fragment, { children: [
-                    jsx_runtime_1.jsx(common_1.InspectorSectionDivider, {}), jsx_runtime_1.jsx("div", { style: styles_1.detailsWithInlineAction, children: jsx_runtime_1.jsx(common_1.InspectorInlineAction, { 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(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.InspectorActionSection, { children: jsx_runtime_1.jsx(common_1.InspectorInlineAction, { 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/KeyframeInspector.js

@@ -45,11 +45,11 @@ const makeMovedKeyframedDragOverride = ({ details, toFrame, }) => {
 const removeKeyframeIcon = {
     display: 'block',
     flexShrink: 0,
-    height: 13,
-    width: 12,
+    height: 16,
+    width: 16,
 };
 const TrashIcon = ({ color }) => {
-    return (jsx_runtime_1.jsx("svg", { viewBox: "0 0 448 512", style: removeKeyframeIcon, children: jsx_runtime_1.jsx("path", { fill: color, d: "M136.7 5.9C141.1-7.2 153.3-16 167.1-16l113.9 0c13.8 0 26 8.8 30.4 21.9L320 32 416 32c17.7 0 32 14.3 32 32s-14.3 32-32 32L32 96C14.3 96 0 81.7 0 64S14.3 32 32 32l96 0 8.7-26.1zM32 144l384 0 0 304c0 35.3-28.7 64-64 64L96 512c-35.3 0-64-28.7-64-64l0-304zm88 64c-13.3 0-24 10.7-24 24l0 192c0 13.3 10.7 24 24 24s24-10.7 24-24l0-192c0-13.3-10.7-24-24-24zm104 0c-13.3 0-24 10.7-24 24l0 192c0 13.3 10.7 24 24 24s24-10.7 24-24l0-192c0-13.3-10.7-24-24-24zm104 0c-13.3 0-24 10.7-24 24l0 192c0 13.3 10.7 24 24 24s24-10.7 24-24l0-192c0-13.3-10.7-24-24-24z" }) }));
+    return (jsx_runtime_1.jsx("svg", { viewBox: "0 0 448 512", style: removeKeyframeIcon, children: jsx_runtime_1.jsx("path", { fill: color, d: "M160.5 27.4c2-6.8 8.3-11.4 15.3-11.4l96.4 0c7.1 0 13.3 4.6 15.3 11.4l11 36.6-149 0 11-36.6zM116.1 64L16 64C7.2 64 0 71.2 0 80S7.2 96 16 96l416 0c8.8 0 16-7.2 16-16s-7.2-16-16-16l-100.1 0-13.7-45.8C312.1-2.1 293.4-16 272.2-16l-96.4 0c-21.2 0-39.9 13.9-46 34.2L116.1 64zM28.7 144L51.6 452.7c2.5 33.4 30.3 59.3 63.8 59.3l217.1 0c33.5 0 61.3-25.9 63.8-59.3l22.9-308.7-32.1 0-22.7 306.4c-1.2 16.7-15.2 29.6-31.9 29.6l-217.1 0c-16.8 0-30.7-12.9-31.9-29.6L60.8 144 28.7 144z" }) }));
 };
 const KeyframeInspector = ({ selection }) => {
     const track = (0, use_track_for_selection_1.useTrackForSelection)(selection);
@@ -321,15 +321,14 @@ 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.InspectorBackHeader, { disabled: parentSelection === null, onClick: onSelectParent, title: "Back to property", children: jsx_runtime_1.jsx("div", { style: styles_1.sectionHeaderTitle, 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.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) => ({
                     ...keyframe,
                     frame: keyframe.frame + details.keyframeDisplayOffset,
                 })), nodePathInfo: selection.nodePathInfo }), jsx_runtime_1.jsxs("div", { style: styles_1.detailsWithInlineAction, children: [
                     jsx_runtime_1.jsxs("div", { style: styles_1.detailsBeforeInlineAction, children: [
-                            jsx_runtime_1.jsx(common_1.InspectorDetailRow, { label: "Frame", children: jsx_runtime_1.jsx(InputDragger_1.InputDragger, { type: "number", value: draftFrame, status: "ok", onValueChange: onFrameChange, onValueChangeEnd: onFrameChangeEnd, onTextChange: () => undefined, min: 0, max: Math.max(0, videoConfig.durationInFrames - 1), step: 1, formatter: (value) => String(Math.round(Number(value))), rightAlign: true, small: true }) }), jsx_runtime_1.jsxs("div", { style: styles_1.keyframeEditorRow, children: [
-                                    jsx_runtime_1.jsx("div", { style: styles_1.keyframeEditorLabel, children: details.fieldLabel }), jsx_runtime_1.jsx("div", { style: styles_1.keyframeEditorValue, children: details.type === 'sequence' ? (jsx_runtime_1.jsx(TimelineSequencePropItem_1.TimelineSequenceKeyframedValue, { field: details.field, fileName: details.fileName, nodePath: details.nodePath, schema: details.schema, propStatus: details.propStatus, sourceFrame: details.sourceFrame })) : (jsx_runtime_1.jsx(TimelineEffectPropItem_1.TimelineEffectPropValue, { field: details.field, nodePath: details.nodePath, validatedLocation: details.validatedLocation, sourceFrame: details.sourceFrame })) })
-                                ] })
-                        ] }), jsx_runtime_1.jsx(common_1.InspectorInlineAction, { disabled: removeDisabled, onClick: onRemoveKeyframe, renderIcon: (color) => jsx_runtime_1.jsx(TrashIcon, { color: color }), children: "Remove keyframe" })] })
+                            jsx_runtime_1.jsx(common_1.InspectorDetailRow, { label: "Frame", children: jsx_runtime_1.jsx(InputDragger_1.InputDragger, { type: "number", value: draftFrame, status: "ok", onValueChange: onFrameChange, onValueChangeEnd: onFrameChangeEnd, onTextChange: () => undefined, min: 0, max: Math.max(0, videoConfig.durationInFrames - 1), step: 1, formatter: (value) => String(Math.round(Number(value))), rightAlign: true, small: true }) }), jsx_runtime_1.jsx("div", { style: styles_1.keyframeEditorRow, children: jsx_runtime_1.jsx(common_1.InspectorDetailRow, { label: details.fieldLabel, children: jsx_runtime_1.jsx("div", { style: styles_1.keyframeEditorValue, children: details.type === 'sequence' ? (jsx_runtime_1.jsx(TimelineSequencePropItem_1.TimelineSequenceKeyframedValue, { field: details.field, fileName: details.fileName, nodePath: details.nodePath, schema: details.schema, propStatus: details.propStatus, sourceFrame: details.sourceFrame })) : (jsx_runtime_1.jsx(TimelineEffectPropItem_1.TimelineEffectPropValue, { field: details.field, nodePath: details.nodePath, validatedLocation: details.validatedLocation, sourceFrame: details.sourceFrame })) }) }) })
+                        ] }), jsx_runtime_1.jsx(common_1.InspectorActionSection, { children: jsx_runtime_1.jsx(common_1.InspectorInlineAction, { disabled: removeDisabled, onClick: onRemoveKeyframe, renderIcon: (color) => jsx_runtime_1.jsx(TrashIcon, { color: color }), children: "Remove keyframe" }) })
+                ] })
         ] }));
 };
 exports.KeyframeInspector = KeyframeInspector;

package/dist/components/InspectorPanel/KeyframeSettings.js

@@ -134,7 +134,7 @@ const KeyframeSettings = ({ update }) => {
     }, []);
     return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
             jsx_runtime_1.jsx(common_1.InspectorSectionHeader, { children: "Keyframe settings" }), jsx_runtime_1.jsxs("div", { style: keyframeSettingsContainer, children: [canEditInterpolationSettings ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
-                            jsx_runtime_1.jsx(common_1.InspectorDetailRow, { label: "Extrapolate left", children: jsx_runtime_1.jsx(ComboBox_1.Combobox, { values: leftValues, selectedId: propStatus.clamping.left, title: "Extrapolate left", style: comboStyle, small: true }) }), jsx_runtime_1.jsx(common_1.InspectorDetailRow, { label: "Extrapolate right", children: jsx_runtime_1.jsx(ComboBox_1.Combobox, { values: rightValues, selectedId: propStatus.clamping.right, title: "Extrapolate right", style: comboStyle, small: true }) }), jsx_runtime_1.jsx(common_1.InspectorDetailRow, { label: "Output", children: jsx_runtime_1.jsx(ComboBox_1.Combobox, { values: outputValues, selectedId: (_b = propStatus.output) !== null && _b !== void 0 ? _b : 'linear', title: "Output", style: comboStyle, small: true }) })
+                            jsx_runtime_1.jsx(common_1.InspectorDetailRow, { label: "Extrapolate left", children: jsx_runtime_1.jsx(ComboBox_1.Combobox, { values: leftValues, selectedId: propStatus.clamping.left, title: "Extrapolate left", style: comboStyle, size: "small" }) }), jsx_runtime_1.jsx(common_1.InspectorDetailRow, { label: "Extrapolate right", children: jsx_runtime_1.jsx(ComboBox_1.Combobox, { values: rightValues, selectedId: propStatus.clamping.right, title: "Extrapolate right", style: comboStyle, size: "small" }) }), jsx_runtime_1.jsx(common_1.InspectorDetailRow, { label: "Output", children: jsx_runtime_1.jsx(ComboBox_1.Combobox, { values: outputValues, selectedId: (_b = propStatus.output) !== null && _b !== void 0 ? _b : 'linear', title: "Output", style: comboStyle, size: "small" }) })
                         ] })) : null, jsx_runtime_1.jsx(common_1.InspectorDetailRow, { label: "Posterize", children: jsx_runtime_1.jsx(InputDragger_1.InputDragger, { type: "number", value: posterize, status: "ok", onValueChange: onPosterizeChange, onValueChangeEnd: onPosterizeChangeEnd, onTextChange: () => undefined, min: 0, step: 1, formatter: posterizeFormatter, rightAlign: true, small: true, disabled: disabled }) })
                 ] })
         ] }));

package/dist/components/InspectorPanel/SequenceInspectorHeader.js

@@ -4,14 +4,39 @@ exports.SequenceInspectorSections = exports.SequenceInspectorHeader = exports.us
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const client_id_1 = require("../../helpers/client-id");
+const react_2 = require("../../icons/react");
 const InlineEditableTitle_1 = require("../InlineEditableTitle");
+const InspectorInfoHeader_1 = require("../InspectorInfoHeader");
 const InspectorLocationCopy_1 = require("../InspectorLocationCopy");
 const InspectorSourceLocation_1 = require("../InspectorSourceLocation");
+const layout_1 = require("../layout");
 const use_open_sequence_in_editor_1 = require("../Timeline/use-open-sequence-in-editor");
 const use_rename_sequence_1 = require("../Timeline/use-rename-sequence");
 const common_1 = require("./common");
 const ConnectedCompositionsSection_1 = require("./ConnectedCompositionsSection");
 const styles_1 = require("./styles");
+const sourceLocationIconStyle = {
+    flexShrink: 0,
+    height: 18,
+    width: 18,
+};
+const renderReactIcon = (color) => {
+    return jsx_runtime_1.jsx(react_2.ReactIcon, { color: color, style: sourceLocationIconStyle });
+};
+const sequenceInspectorSubtitle = {
+    ...styles_1.sequenceHeaderSubtitle,
+    alignItems: 'center',
+    boxSizing: 'border-box',
+    fontSize: 13,
+    height: layout_1.COMPACT_INLINE_ROW_HEIGHT,
+    lineHeight: '18px',
+    margin: '0 4px',
+    padding: '0 8px',
+    width: 'calc(100% - 8px)',
+};
+const defaultCursor = {
+    cursor: 'default',
+};
 const useSequenceInspectorSourceLocation = (sequence) => {
     const { canOpenInEditor, openInEditor, originalLocation } = (0, use_open_sequence_in_editor_1.useOpenSequenceInEditor)(sequence);
     const validatedLocation = (0, react_1.useMemo)(() => {
@@ -61,7 +86,7 @@ const SequenceInspectorHeader = ({ sourceLocation, track }) => {
     }, [documentationLink]);
     const subtitleStyle = (0, react_1.useMemo)(() => {
         return {
-            ...styles_1.sequenceHeaderSubtitle,
+            ...sequenceInspectorSubtitle,
             cursor: documentationLink ? 'pointer' : 'default',
         };
     }, [documentationLink]);
@@ -69,8 +94,8 @@ const SequenceInspectorHeader = ({ sourceLocation, track }) => {
     const onRename = (0, react_1.useCallback)((newName) => {
         saveName(newName).catch(() => undefined);
     }, [saveName]);
-    return (jsx_runtime_1.jsx("div", { style: styles_1.sequenceHeader, children: jsx_runtime_1.jsxs(InspectorLocationCopy_1.InspectorLocationCopy, { location: sourceLocation.validatedLocation, name: componentName !== null && componentName !== void 0 ? componentName : null, children: [
-                jsx_runtime_1.jsx("div", { style: styles_1.sequenceHeaderTitle, children: jsx_runtime_1.jsx(InlineEditableTitle_1.InlineEditableTitle, { value: sequenceDisplayName, canRename: canRename, onCommit: onRename }) }), documentationLink ? (jsx_runtime_1.jsx("button", { type: "button", style: subtitleStyle, 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 })
+    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, children: [
+                jsx_runtime_1.jsx(InlineEditableTitle_1.InlineEditableTitle, { value: sequenceDisplayName, canRename: canRename, onCommit: onRename, size: "inspector" }), documentationLink ? (jsx_runtime_1.jsx(common_1.InspectorInlineAction, { 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: "inline-action" })
             ] }) }));
 };
 exports.SequenceInspectorHeader = SequenceInspectorHeader;

package/dist/components/InspectorPanel/SequenceSelectionInspector.js

@@ -3,9 +3,12 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.SequenceSelectionInspector = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
+const remotion_1 = require("remotion");
 const client_id_1 = require("../../helpers/client-id");
+const scissors_1 = require("../../icons/scissors");
 const InspectorSequenceSection_1 = require("../InspectorSequenceSection");
 const is_menu_item_1 = require("../Menu/is-menu-item");
+const split_selected_timeline_item_1 = require("../Timeline/split-selected-timeline-item");
 const TimelineSelection_1 = require("../Timeline/TimelineSelection");
 const AlignmentControls_1 = require("./AlignmentControls");
 const common_1 = require("./common");
@@ -13,6 +16,34 @@ const ConnectedCompositionsSection_1 = require("./ConnectedCompositionsSection")
 const SequenceInspectorHeader_1 = require("./SequenceInspectorHeader");
 const styles_1 = require("./styles");
 const use_track_for_selection_1 = require("./use-track-for-selection");
+const splitIconStyle = {
+    height: 16,
+    width: 16,
+};
+const SplitSequenceAction = ({ selection, track }) => {
+    const timelinePosition = remotion_1.Internals.Timeline.useTimelinePosition();
+    const { propStatuses } = (0, react_1.useContext)(remotion_1.Internals.VisualModePropStatusesContext);
+    const sequencePropStatuses = (0, react_1.useMemo)(() => remotion_1.Internals.getPropStatusesCtx(propStatuses, selection.nodePathInfo.sequenceSubscriptionKey), [propStatuses, selection]);
+    const eligibility = (0, react_1.useMemo)(() => (0, split_selected_timeline_item_1.getTimelineSequenceSplitEligibility)({
+        selection,
+        sequence: track.sequence,
+        splitFrame: timelinePosition,
+        propStatuses: sequencePropStatuses,
+    }), [selection, sequencePropStatuses, timelinePosition, track.sequence]);
+    const onSplit = (0, react_1.useCallback)(() => {
+        if (!eligibility.canSplit) {
+            return;
+        }
+        (0, split_selected_timeline_item_1.splitTimelineSequenceFromSource)({
+            nodePathInfo: eligibility.nodePathInfo,
+            splitFrame: timelinePosition,
+        }).catch(() => undefined);
+    }, [eligibility, timelinePosition]);
+    if (!eligibility.canSplit) {
+        return null;
+    }
+    return (jsx_runtime_1.jsx(common_1.InspectorActionSection, { children: jsx_runtime_1.jsx(common_1.InspectorInlineAction, { disabled: false, onClick: onSplit, renderIcon: (color) => (jsx_runtime_1.jsx(scissors_1.ScissorsIcon, { style: splitIconStyle, color: color })), children: "Split clip" }) }));
+};
 const SequenceExpandedInspector = ({ track }) => {
     const { previewServerState } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
     const { selectedItems, selectItems } = (0, TimelineSelection_1.useTimelineSelection)();
@@ -49,6 +80,7 @@ const SequenceExpandedInspector = ({ track }) => {
         return jsx_runtime_1.jsx(common_1.InspectorMessage, { children: "Studio server disconnected" });
     }
     if (!track.nodePathInfo ||
+        sequenceSelection === null ||
         !(0, InspectorSequenceSection_1.hasSequenceControls)(track.sequence) ||
         !validatedLocation) {
         return jsx_runtime_1.jsx(common_1.InspectorMessage, { children: "Sequence inspector unavailable" });
@@ -56,7 +88,8 @@ const SequenceExpandedInspector = ({ track }) => {
     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 }), 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(common_1.InspectorSectionDivider, {}), jsx_runtime_1.jsx(InspectorSequenceSection_1.InspectorSequenceSection, { sequence: track.sequence, validatedLocation: validatedLocation, nodePathInfo: track.nodePathInfo, keyframeDisplayOffset: track.keyframeDisplayOffset, renderSectionHeader: (children) => (jsx_runtime_1.jsx(common_1.InspectorSectionHeader, { children: children })), renderTransformControls: () => jsx_runtime_1.jsx(AlignmentControls_1.AlignmentControls, { track: track }) })] }));
+                ] })) : null, jsx_runtime_1.jsx(InspectorSequenceSection_1.InspectorSequenceSection, { sequence: track.sequence, validatedLocation: validatedLocation, nodePathInfo: track.nodePathInfo, keyframeDisplayOffset: track.keyframeDisplayOffset, renderTransformControls: () => jsx_runtime_1.jsx(AlignmentControls_1.AlignmentControls, { track: track }) }), jsx_runtime_1.jsx(SplitSequenceAction, { selection: sequenceSelection, track: track })
+        ] }));
 };
 const SequenceSelectionInspector = ({ selection }) => {
     const track = (0, use_track_for_selection_1.useTrackForSelection)(selection);

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

@@ -4,7 +4,14 @@ export declare const InspectorSectionHeader: React.FC<{
     readonly children: React.ReactNode;
 }>;
 export declare const InspectorSectionDivider: React.FC;
-export declare const InspectorBackHeader: React.FC<{
+export declare const InspectorActionSection: React.FC<{
+    readonly children: React.ReactNode;
+}>;
+export declare const InspectorSection: React.FC<{
+    readonly children: React.ReactNode;
+    readonly header: React.ReactNode;
+}>;
+export declare const InspectorBackAction: React.FC<{
     readonly children: React.ReactNode;
     readonly disabled: boolean;
     readonly onClick: React.MouseEventHandler<HTMLButtonElement>;
@@ -21,7 +28,10 @@ export declare const InspectorInlineAction: React.FC<{
     readonly children: React.ReactNode;
     readonly disabled: boolean;
     readonly onClick: React.MouseEventHandler<HTMLButtonElement>;
-    readonly renderIcon: (color: string) => React.ReactNode;
+    readonly renderIcon?: (color: string) => React.ReactNode;
+    readonly size?: 'default' | 'compact';
+    readonly style?: React.CSSProperties;
+    readonly title?: string;
 }>;
 export declare const InspectorDefaultPropsWarnings: React.FC<{
     readonly warnings: RenderModalWarning[];

package/dist/components/InspectorPanel/common.js

@@ -3,43 +3,52 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.InspectorDefaultPropsWarnings = exports.InspectorInlineAction = exports.InspectorDetailRow = exports.InspectorMessage = exports.InspectorBackHeader = exports.InspectorSectionDivider = exports.InspectorSectionHeader = void 0;
+exports.InspectorDefaultPropsWarnings = exports.InspectorInlineAction = exports.InspectorDetailRow = exports.InspectorMessage = exports.InspectorBackAction = exports.InspectorSection = exports.InspectorActionSection = exports.InspectorSectionDivider = exports.InspectorSectionHeader = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = __importDefault(require("react"));
 const colors_1 = require("../../helpers/colors");
-const InlineAction_1 = require("../InlineAction");
 const InspectorPanelLayout_1 = require("../InspectorPanelLayout");
+const layout_1 = require("../layout");
 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 backIcon = {
-    alignItems: 'center',
-    display: 'flex',
-    height: 12,
-    justifyContent: 'center',
-    width: 12,
+const InspectorActionSection = ({ children }) => (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
+        jsx_runtime_1.jsx(exports.InspectorSectionDivider, {}), jsx_runtime_1.jsx("div", { style: styles_1.inspectorActionSection, children: children })
+    ] }));
+exports.InspectorActionSection = InspectorActionSection;
+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 }))] }));
+};
+exports.InspectorSection = InspectorSection;
+const backArrowIcon = {
+    display: 'block',
+    height: 15,
+    width: 15,
 };
-const BackChevron = ({ color }) => {
-    return (jsx_runtime_1.jsx("svg", { viewBox: "0 0 8 12", style: backIcon, children: jsx_runtime_1.jsx("path", { d: "M6 1L2 6L6 11", fill: "none", stroke: color, strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "1.5" }) }));
+const BackArrow = ({ color }) => {
+    return (jsx_runtime_1.jsx("svg", { viewBox: "0 0 512 512", style: backArrowIcon, children: jsx_runtime_1.jsx("path", { d: "M7 239c-9.4 9.4-9.4 24.6 0 33.9L175 441c9.4 9.4 24.6 9.4 33.9 0s9.4-24.6 0-33.9L81.9 280 488 280c13.3 0 24-10.7 24-24s-10.7-24-24-24L81.9 232 209 105c9.4-9.4 9.4-24.6 0-33.9s-24.6-9.4-33.9 0L7 239z", fill: color }) }));
 };
-const InspectorBackHeader = ({ children, disabled, onClick, title }) => {
-    return (jsx_runtime_1.jsx(exports.InspectorSectionHeader, { children: jsx_runtime_1.jsx("div", { style: styles_1.sectionHeaderRow, children: jsx_runtime_1.jsxs("div", { style: styles_1.sectionHeaderStart, children: [jsx_runtime_1.jsx(InlineAction_1.InlineAction, { disabled: disabled, onClick: onClick, title: title, renderAction: (color) => jsx_runtime_1.jsx(BackChevron, { color: color }) }), children] }) }) }));
+const InspectorBackAction = ({ children, disabled, onClick, title }) => {
+    return (jsx_runtime_1.jsx("div", { style: styles_1.inspectorActionSection, children: jsx_runtime_1.jsx(exports.InspectorInlineAction, { disabled: disabled, onClick: onClick, renderIcon: (color) => jsx_runtime_1.jsx(BackArrow, { color: color }), title: title, children: children }) }));
 };
-exports.InspectorBackHeader = InspectorBackHeader;
+exports.InspectorBackAction = InspectorBackAction;
 const InspectorMessage = ({ children }) => jsx_runtime_1.jsx("div", { style: styles_1.centeredMessage, children: children });
 exports.InspectorMessage = InspectorMessage;
 const InspectorDetailRow = ({ label, children }) => (jsx_runtime_1.jsxs("div", { style: styles_1.detailRow, children: [
         jsx_runtime_1.jsx("div", { style: styles_1.detailLabel, children: label }), jsx_runtime_1.jsx("div", { style: styles_1.detailValue, children: children })
     ] }));
 exports.InspectorDetailRow = InspectorDetailRow;
+const INLINE_LABEL_BUTTON_MARGIN = 4;
 const inlineLabelButton = {
     alignItems: 'center',
     appearance: 'none',
     backgroundColor: colors_1.TRANSPARENT,
     border: 'none',
+    borderRadius: 4,
     boxSizing: 'border-box',
     color: colors_1.LIGHT_TEXT,
     cursor: 'default',
@@ -47,37 +56,52 @@ const inlineLabelButton = {
     fontFamily: 'sans-serif',
     fontSize: 13,
     gap: 8,
+    height: layout_1.COMPACT_CONTROL_ROW_HEIGHT,
     lineHeight: '18px',
-    margin: 0,
-    padding: `5px ${InspectorPanelLayout_1.INSPECTOR_PANEL_HORIZONTAL_PADDING}px`,
+    margin: `0 ${INLINE_LABEL_BUTTON_MARGIN}px`,
+    padding: `0 ${InspectorPanelLayout_1.INSPECTOR_PANEL_HORIZONTAL_PADDING - INLINE_LABEL_BUTTON_MARGIN}px`,
     textAlign: 'left',
-    width: '100%',
+    width: `calc(100% - ${INLINE_LABEL_BUTTON_MARGIN * 2}px)`,
 };
 const inlineLabelButtonDisabled = {
     ...inlineLabelButton,
     opacity: 0.35,
 };
+const compactInlineLabelButton = {
+    height: layout_1.COMPACT_INLINE_ROW_HEIGHT,
+};
 const inlineLabelText = {
     color: colors_1.LIGHT_TEXT,
+    flex: 1,
     fontFamily: 'sans-serif',
     fontSize: 13,
     lineHeight: '18px',
+    minWidth: 0,
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+    whiteSpace: 'nowrap',
 };
 const inlineLabelIcon = {
     alignItems: 'center',
     display: 'flex',
     flexShrink: 0,
-    height: 13,
+    height: 18,
     justifyContent: 'center',
-    width: 13,
+    width: 18,
 };
-const InspectorInlineAction = ({ children, disabled, onClick, renderIcon }) => {
+const InspectorInlineAction = ({ children, disabled, onClick, renderIcon, size = 'default', style, title, }) => {
     const [hovered, setHovered] = react_1.default.useState(false);
     const color = hovered && !disabled ? colors_1.WHITE : colors_1.LIGHT_TEXT;
     const buttonStyle = react_1.default.useMemo(() => ({
         ...(disabled ? inlineLabelButtonDisabled : inlineLabelButton),
+        backgroundColor: (0, colors_1.getBackgroundFromHoverState)({
+            hovered: hovered && !disabled,
+            selected: false,
+        }),
         color,
-    }), [color, disabled]);
+        ...(size === 'compact' ? compactInlineLabelButton : null),
+        ...style,
+    }), [color, disabled, hovered, size, style]);
     const textStyle = react_1.default.useMemo(() => ({
         ...inlineLabelText,
         color,
@@ -88,8 +112,7 @@ const InspectorInlineAction = ({ children, disabled, onClick, renderIcon }) => {
     const onPointerLeave = react_1.default.useCallback(() => {
         setHovered(false);
     }, []);
-    return (jsx_runtime_1.jsxs("button", { type: "button", disabled: disabled, style: buttonStyle, onClick: onClick, onPointerEnter: disabled ? undefined : onPointerEnter, onPointerLeave: onPointerLeave, children: [
-            jsx_runtime_1.jsx("span", { style: inlineLabelIcon, children: renderIcon(color) }), jsx_runtime_1.jsx("span", { style: textStyle, children: children })
+    return (jsx_runtime_1.jsxs("button", { className: "__remotion-inspector-inline-action", type: "button", disabled: disabled, style: buttonStyle, title: title, onClick: onClick, onPointerEnter: disabled ? undefined : onPointerEnter, onPointerLeave: onPointerLeave, children: [renderIcon ? (jsx_runtime_1.jsx("span", { style: inlineLabelIcon, children: renderIcon(color) })) : null, jsx_runtime_1.jsx("span", { style: textStyle, children: children })
         ] }));
 };
 exports.InspectorInlineAction = InspectorInlineAction;

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

@@ -1,14 +1,13 @@
 import type React from 'react';
 export declare const container: React.CSSProperties;
 export declare const scrollableContainer: React.CSSProperties;
-export declare const defaultPropsSection: React.CSSProperties;
-export declare const visualControlsSection: React.CSSProperties;
-export declare const compositionSection: 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 sequenceHeader: React.CSSProperties;
-export declare const sequenceHeaderTitle: React.CSSProperties;
+export declare const inspectorSectionBody: React.CSSProperties;
 export declare const sequenceHeaderSubtitle: React.CSSProperties;
 export declare const sectionHeaderRow: React.CSSProperties;
 export declare const sectionHeaderTitle: React.CSSProperties;
@@ -21,11 +20,11 @@ export declare const selectedContainer: React.CSSProperties;
 export declare const centeredMessage: React.CSSProperties;
 export declare const detailsContainer: React.CSSProperties;
 export declare const detailsWithInlineAction: React.CSSProperties;
+export declare const inspectorActionSection: React.CSSProperties;
 export declare const detailsBeforeInlineAction: React.CSSProperties;
 export declare const guideDetailsContainer: React.CSSProperties;
 export declare const detailRow: React.CSSProperties;
 export declare const detailLabel: React.CSSProperties;
 export declare const detailValue: React.CSSProperties;
 export declare const keyframeEditorRow: React.CSSProperties;
-export declare const keyframeEditorLabel: React.CSSProperties;
 export declare const keyframeEditorValue: React.CSSProperties;

package/dist/components/InspectorPanel/styles.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.keyframeEditorValue = exports.keyframeEditorLabel = exports.keyframeEditorRow = exports.detailValue = exports.detailLabel = exports.detailRow = exports.guideDetailsContainer = exports.detailsBeforeInlineAction = 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.sequenceHeaderTitle = exports.sequenceHeader = exports.sectionHeader = exports.sequenceHeaderDivider = exports.inspectorSectionDivider = exports.compositionSection = exports.visualControlsSection = exports.defaultPropsSection = exports.scrollableContainer = exports.container = void 0;
+exports.keyframeEditorValue = exports.keyframeEditorRow = exports.detailValue = exports.detailLabel = exports.detailRow = exports.guideDetailsContainer = exports.detailsBeforeInlineAction = exports.inspectorActionSection = 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;
 const colors_1 = require("../../helpers/colors");
 const InspectorPanelLayout_1 = require("../InspectorPanelLayout");
 exports.container = {
@@ -16,15 +16,15 @@ exports.scrollableContainer = {
     ...exports.container,
     overflowY: 'auto',
 };
-exports.defaultPropsSection = {
+exports.compositionDefaultPropsSection = {
     display: 'flex',
     flexDirection: 'column',
 };
-exports.visualControlsSection = {
+exports.compositionVisualControlsSection = {
     display: 'flex',
     flexDirection: 'column',
 };
-exports.compositionSection = {
+exports.inspectorOverviewSection = {
     display: 'flex',
     flexDirection: 'column',
 };
@@ -44,30 +44,11 @@ exports.sectionHeader = {
     padding: `8px ${InspectorPanelLayout_1.INSPECTOR_PANEL_HORIZONTAL_PADDING}px`,
     userSelect: 'none',
 };
-exports.sequenceHeader = {
-    backgroundColor: colors_1.BACKGROUND,
+exports.inspectorSectionBody = {
     display: 'flex',
     flexDirection: 'column',
     minWidth: 0,
-    padding: `6px ${InspectorPanelLayout_1.INSPECTOR_PANEL_HORIZONTAL_PADDING}px 4px`,
-};
-exports.sequenceHeaderTitle = {
-    alignSelf: 'stretch',
-    backgroundColor: colors_1.BACKGROUND,
-    border: 'none',
-    color: colors_1.WHITE,
-    display: 'flex',
-    fontFamily: 'sans-serif',
-    fontSize: 12,
-    lineHeight: '18px',
-    margin: 0,
-    maxWidth: '100%',
-    minWidth: 0,
-    overflow: 'hidden',
-    padding: 0,
-    textAlign: 'left',
-    textOverflow: 'ellipsis',
-    whiteSpace: 'nowrap',
+    paddingBottom: 8,
 };
 exports.sequenceHeaderSubtitle = {
     alignSelf: 'flex-start',
@@ -158,6 +139,9 @@ exports.detailsContainer = {
 exports.detailsWithInlineAction = {
     paddingBottom: InspectorPanelLayout_1.INSPECTOR_PANEL_HORIZONTAL_PADDING,
 };
+exports.inspectorActionSection = {
+    padding: '4px 0',
+};
 exports.detailsBeforeInlineAction = {
     padding: `0 ${InspectorPanelLayout_1.INSPECTOR_PANEL_HORIZONTAL_PADDING}px`,
 };
@@ -173,6 +157,10 @@ exports.detailRow = {
 exports.detailLabel = {
     color: colors_1.LIGHT_TEXT,
     fontSize: 13,
+    minWidth: 0,
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+    whiteSpace: 'nowrap',
 };
 exports.detailValue = {
     color: colors_1.WHITE,
@@ -183,22 +171,8 @@ exports.detailValue = {
     wordBreak: 'break-word',
 };
 exports.keyframeEditorRow = {
-    alignItems: 'flex-start',
-    display: 'flex',
-    gap: 12,
-    justifyContent: 'space-between',
-    minWidth: 0,
     padding: '10px 0',
 };
-exports.keyframeEditorLabel = {
-    color: colors_1.LIGHT_TEXT,
-    fontSize: 13,
-    lineHeight: '22px',
-    minWidth: 0,
-    overflow: 'hidden',
-    textOverflow: 'ellipsis',
-    whiteSpace: 'nowrap',
-};
 exports.keyframeEditorValue = {
     alignItems: 'center',
     display: 'flex',

package/dist/components/InspectorPanel/use-composition-actions.d.ts

@@ -0,0 +1,8 @@
+export declare const useCompositionActions: () => {
+    canInsertAsset: boolean;
+    canInsertSolid: boolean;
+    canShowInsertAsset: boolean;
+    canShowInsertSolid: boolean;
+    insertAsset: () => Promise<void>;
+    insertSolid: () => Promise<void>;
+};