@remotion/studio 4.0.527 → 4.0.529

package/dist/components/InspectorPanel/AlignmentControls.js

@@ -44,8 +44,8 @@ const verticalSpacer = {
     height: 16,
     margin: '0 8px',
 };
-const AlignmentButton = ({ onClick, title, Icon, disabled }) => {
-    return (jsx_runtime_1.jsx(InlineAction_1.InlineAction, { variant: null, title: title, onClick: onClick, renderAction: (color) => jsx_runtime_1.jsx(Icon, { style: iconStyle, color: color }), disabled: disabled }));
+const AlignmentButton = ({ onClick, 'aria-label': ariaLabel, Icon, disabled }) => {
+    return (jsx_runtime_1.jsx(InlineAction_1.InlineAction, { variant: null, "aria-label": ariaLabel, onClick: onClick, renderAction: (color) => jsx_runtime_1.jsx(Icon, { style: iconStyle, color: color }), disabled: disabled }));
 };
 const AlignmentControls = ({ track }) => {
     var _a;
@@ -78,11 +78,16 @@ const AlignmentControls = ({ track }) => {
         const nodePath = track.nodePathInfo.sequenceSubscriptionKey;
         const nodePropStatuses = remotion_1.Internals.getPropStatusesCtx(propStatuses, nodePath);
         const firstKeyframedStatus = Object.values(nodePropStatuses !== null && nodePropStatuses !== void 0 ? nodePropStatuses : {}).find((status) => status.status === 'keyframed');
-        const sourceFrame = timelinePosition -
-            (0, get_timeline_keyframes_1.getKeyframeDisplayOffset)({
-                propStatus: firstKeyframedStatus,
+        const sourceFrame = (0, get_timeline_keyframes_1.getKeyframeSourceFrame)({
+            displayFrame: timelinePosition,
+            propStatus: firstKeyframedStatus !== null && firstKeyframedStatus !== void 0 ? firstKeyframedStatus : null,
+            keyframeDisplayOffset: (0, get_timeline_keyframes_1.getKeyframeDisplayOffset)({
+                propStatus: firstKeyframedStatus !== null && firstKeyframedStatus !== void 0 ? firstKeyframedStatus : null,
                 keyframeDisplayOffset: track.keyframeDisplayOffset,
-            });
+                keyframePlaybackRate: track.keyframePlaybackRate,
+            }),
+            keyframePlaybackRate: track.keyframePlaybackRate,
+        });
         const dragOverrides = (_b = getDragOverrides(nodePath)) !== null && _b !== void 0 ? _b : {};
         const activeSchema = (0, selected_outline_drag_1.getSelectedOutlineActiveSchema)({
             schema: track.sequence.controls.schema,
@@ -170,7 +175,16 @@ const AlignmentControls = ({ track }) => {
                 fileName: nodePath.absolutePath,
                 nodePath,
                 fieldKey: selected_outline_types_1.translateFieldKey,
-                sourceFrame,
+                sourceFrame: (0, get_timeline_keyframes_1.getKeyframeSourceFrame)({
+                    displayFrame: timelinePosition,
+                    keyframeDisplayOffset: (0, get_timeline_keyframes_1.getKeyframeDisplayOffset)({
+                        propStatus,
+                        keyframeDisplayOffset: track.keyframeDisplayOffset,
+                        keyframePlaybackRate: track.keyframePlaybackRate,
+                    }),
+                    keyframePlaybackRate: track.keyframePlaybackRate,
+                    propStatus,
+                }),
                 value: newValue,
                 schema: track.sequence.controls.schema,
                 setPropStatuses,
@@ -197,11 +211,16 @@ const AlignmentControls = ({ track }) => {
     const renderNodePath = track.nodePathInfo.sequenceSubscriptionKey;
     const renderNodePropStatuses = remotion_1.Internals.getPropStatusesCtx(propStatuses, renderNodePath);
     const firstRenderKeyframedStatus = Object.values(renderNodePropStatuses !== null && renderNodePropStatuses !== void 0 ? renderNodePropStatuses : {}).find((status) => status.status === 'keyframed');
-    const renderSourceFrame = timelinePosition -
-        (0, get_timeline_keyframes_1.getKeyframeDisplayOffset)({
-            propStatus: firstRenderKeyframedStatus,
+    const renderSourceFrame = (0, get_timeline_keyframes_1.getKeyframeSourceFrame)({
+        displayFrame: timelinePosition,
+        propStatus: firstRenderKeyframedStatus !== null && firstRenderKeyframedStatus !== void 0 ? firstRenderKeyframedStatus : null,
+        keyframeDisplayOffset: (0, get_timeline_keyframes_1.getKeyframeDisplayOffset)({
+            propStatus: firstRenderKeyframedStatus !== null && firstRenderKeyframedStatus !== void 0 ? firstRenderKeyframedStatus : null,
             keyframeDisplayOffset: track.keyframeDisplayOffset,
-        });
+            keyframePlaybackRate: track.keyframePlaybackRate,
+        }),
+        keyframePlaybackRate: track.keyframePlaybackRate,
+    });
     const renderDragOverrides = (_a = getDragOverrides(renderNodePath)) !== null && _a !== void 0 ? _a : {};
     const renderActiveSchema = (0, selected_outline_drag_1.getSelectedOutlineActiveSchema)({
         schema: track.sequence.controls.schema,
@@ -217,7 +236,7 @@ const AlignmentControls = ({ track }) => {
     }
     const alignmentDisabled = !isPropStatusDraggable(renderPropStatus);
     return (jsx_runtime_1.jsxs("div", { style: container, children: [
-            jsx_runtime_1.jsx(AlignmentButton, { title: "Align left", onClick: () => handleAlign('left'), Icon: align_left_1.AlignLeftIcon, disabled: alignmentDisabled }), jsx_runtime_1.jsx(AlignmentButton, { title: "Align center horizontally", onClick: () => handleAlign('center-h'), Icon: align_center_horizontal_1.AlignCenterHorizontalIcon, disabled: alignmentDisabled }), jsx_runtime_1.jsx(AlignmentButton, { title: "Align right", onClick: () => handleAlign('right'), Icon: align_right_1.AlignRightIcon, disabled: alignmentDisabled }), jsx_runtime_1.jsx("div", { style: verticalSpacer }), jsx_runtime_1.jsx(AlignmentButton, { title: "Align top", onClick: () => handleAlign('top'), Icon: align_top_1.AlignTopIcon, disabled: alignmentDisabled }), jsx_runtime_1.jsx(AlignmentButton, { title: "Align center vertically", onClick: () => handleAlign('center-v'), Icon: align_center_vertical_1.AlignCenterVerticalIcon, disabled: alignmentDisabled }), jsx_runtime_1.jsx(AlignmentButton, { title: "Align bottom", onClick: () => handleAlign('bottom'), Icon: align_bottom_1.AlignBottomIcon, disabled: alignmentDisabled })
+            jsx_runtime_1.jsx(AlignmentButton, { "aria-label": "Align left", onClick: () => handleAlign('left'), Icon: align_left_1.AlignLeftIcon, disabled: alignmentDisabled }), jsx_runtime_1.jsx(AlignmentButton, { "aria-label": "Align center horizontally", onClick: () => handleAlign('center-h'), Icon: align_center_horizontal_1.AlignCenterHorizontalIcon, disabled: alignmentDisabled }), jsx_runtime_1.jsx(AlignmentButton, { "aria-label": "Align right", onClick: () => handleAlign('right'), Icon: align_right_1.AlignRightIcon, disabled: alignmentDisabled }), jsx_runtime_1.jsx("div", { style: verticalSpacer }), jsx_runtime_1.jsx(AlignmentButton, { "aria-label": "Align top", onClick: () => handleAlign('top'), Icon: align_top_1.AlignTopIcon, disabled: alignmentDisabled }), jsx_runtime_1.jsx(AlignmentButton, { "aria-label": "Align center vertically", onClick: () => handleAlign('center-v'), Icon: align_center_vertical_1.AlignCenterVerticalIcon, disabled: alignmentDisabled }), jsx_runtime_1.jsx(AlignmentButton, { "aria-label": "Align bottom", onClick: () => handleAlign('bottom'), Icon: align_bottom_1.AlignBottomIcon, disabled: alignmentDisabled })
         ] }));
 };
 exports.AlignmentControls = AlignmentControls;

package/dist/components/InspectorPanel/CollapsibleInspectorSectionHeader.js

@@ -29,7 +29,7 @@ const staticSectionTitle = {
 const collapsibleSectionHeaderButton = {
     ...sectionTitle,
     appearance: 'none',
-    backgroundColor: 'transparent',
+    backgroundColor: colors_1.TRANSPARENT,
     border: 'none',
     borderRadius: 3,
     cursor: 'default',

package/dist/components/InspectorPanel/CompositionInspector.js

@@ -37,10 +37,6 @@ const ElementLibraryButton_1 = require("./ElementLibraryButton");
 const styles_1 = require("./styles");
 const use_composition_actions_1 = require("./use-composition-actions");
 const use_inspector_section_expanded_1 = require("./use-inspector-section-expanded");
-const actionIconStyle = {
-    height: 18,
-    width: 18,
-};
 const downloadLicenseAgreement = {
     color: colors_1.LIGHT_TEXT,
     fontFamily: 'sans-serif',
@@ -93,7 +89,7 @@ const CompositionActions = () => {
         downloadProject === null) {
         return null;
     }
-    return (jsx_runtime_1.jsx(CollapsibleInspectorSection_1.CollapsibleInspectorSection, { collapsible: true, label: "Actions", sectionId: "composition-actions", children: 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, canShowGenerateWithAgent ? (jsx_runtime_1.jsx(common_1.InspectorQuickAction, { disabled: false, onClick: generateWithAgent, renderIcon: (color) => (jsx_runtime_1.jsx(sparkles_1.SparklesIcon, { color: color, style: actionIconStyle })), children: "Generate with agent..." })) : 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] }) }));
+    return (jsx_runtime_1.jsx(CollapsibleInspectorSection_1.CollapsibleInspectorSection, { collapsible: true, label: "Actions", sectionId: "composition-actions", children: 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: common_1.inspectorActionIconStyle })), 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: common_1.inspectorActionIconStyle })), 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: common_1.inspectorActionIconStyle })), children: "Add composition..." })) : null, canShowGenerateWithAgent ? (jsx_runtime_1.jsx(common_1.InspectorQuickAction, { disabled: false, iconContainerStyle: common_1.largeInspectorActionIconContainerStyle, onClick: generateWithAgent, renderIcon: (color) => (jsx_runtime_1.jsx(sparkles_1.SparklesIcon, { color: color, style: common_1.largeInspectorActionIconStyle })), children: "Generate with agent..." })) : 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: common_1.inspectorActionIconStyle })), children: "Download project" })) : null] }) }));
 };
 const CompositionDefaultPropsSection = ({ composition, currentDefaultProps, readOnlyStudio, setDefaultProps }) => {
     var _a;

package/dist/components/InspectorPanel/CompositionMetadata.js

@@ -127,14 +127,14 @@ const dimensionPresets = [
     { height: 1080, label: 'Square', width: 1080 },
 ];
 const frameRatePresets = [23.976, 24, 25, 29.97, 30, 50, 60];
-const PresetDropdown = ({ disabled, title, values, visible }) => {
+const PresetDropdown = ({ disabled, 'aria-label': ariaLabel, 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 }) }));
     }, []);
     return (jsx_runtime_1.jsx("div", { style: {
             ...presetDropdownContainer,
             visibility: visible ? 'visible' : 'hidden',
-        }, children: jsx_runtime_1.jsx(InlineDropdown_1.InlineDropdown, { disabled: disabled, renderAction: renderAction, title: title, values: values, variant: "compact" }) }));
+        }, children: jsx_runtime_1.jsx(InlineDropdown_1.InlineDropdown, { disabled: disabled, renderAction: renderAction, "aria-label": ariaLabel, values: values, variant: "compact" }) }));
 };
 const CompositionMetadataValue = ({ computed, disabled, field, onSave, pendingValue, value }) => {
     var _a;
@@ -324,10 +324,10 @@ 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: [
+                                pendingValues.height !== undefined, "aria-label": "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 }), 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 }) })
+                                jsx_runtime_1.jsx("span", { style: metadataLabelText, children: "Frame rate" }), disabled || fpsIsComputed ? null : (jsx_runtime_1.jsx(PresetDropdown, { disabled: pendingValues.fps !== undefined, "aria-label": "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 }) })
                 ] }))] }));
 };
 exports.CompositionMetadata = CompositionMetadata;

package/dist/components/InspectorPanel/EasingInspector.js

@@ -113,6 +113,7 @@ const EasingInspector = ({ selection }) => {
         }
         return (0, easing_inspector_selection_1.getEasingSelectionFromCurrentKeyframes)({
             keyframeDisplayOffset: track.keyframeDisplayOffset,
+            keyframePlaybackRate: track.keyframePlaybackRate,
             nodePathInfo: selection.nodePathInfo,
             propStatus: easingUpdate.propStatus,
             segmentIndex: easingUpdate.segmentIndex,
@@ -123,6 +124,7 @@ const EasingInspector = ({ selection }) => {
         : (0, get_timeline_keyframes_1.getKeyframeDisplayOffset)({
             propStatus: easingUpdate.propStatus,
             keyframeDisplayOffset: track.keyframeDisplayOffset,
+            keyframePlaybackRate: track.keyframePlaybackRate,
         });
     const state = (0, react_1.useMemo)(() => {
         if (initialEasing === null || currentEasingSelection === null) {
@@ -154,7 +156,8 @@ const EasingInspector = ({ selection }) => {
             previewServerState.type !== 'connected') {
             return;
         }
-        const sourceFrame = timelinePosition - easingKeyframeDisplayOffset;
+        const sourceFrame = (timelinePosition - easingKeyframeDisplayOffset) *
+            track.keyframePlaybackRate;
         const value = remotion_1.Internals.getEffectiveVisualModeValue({
             propStatus: easingUpdate.propStatus,
             dragOverrideValue: easingDetails.dragOverrideValue,
@@ -206,9 +209,10 @@ 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 }), 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, "aria-label": "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,
+                    frame: keyframe.frame / track.keyframePlaybackRate +
+                        easingKeyframeDisplayOffset,
                 })), nodePathInfo: selection.nodePathInfo }))] })), [
         currentEasingSelection,
         easingUpdate,

package/dist/components/InspectorPanel/ElementLibraryButton.js

@@ -12,16 +12,6 @@ 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 elementLibraryDropdownStyle = {
     borderRadius: 4,
     height: 28,
@@ -77,12 +67,11 @@ const ElementLibraryButton = () => {
             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 }) })
+                    jsx_runtime_1.jsx("span", { style: common_1.largeInspectorActionIconContainerStyle, children: jsx_runtime_1.jsx(browse_elements_1.BrowseElementsIcon, { color: color, style: common_1.largeInspectorActionIconStyle }) }), 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.',
             tooltipLabel: null,
             type: 'menu',
             values: [
@@ -120,8 +109,8 @@ const ElementLibraryButton = () => {
         },
     ], [elementLibraries, openElementLibrary, openElementsLibrary]);
     if (elementLibraries.length > 0) {
-        return (jsx_runtime_1.jsx(SegmentedButton_1.SegmentedButton, { segments: elementLibraryDropdownSegments, style: elementLibraryDropdownStyle, title: null }));
+        return (jsx_runtime_1.jsx(SegmentedButton_1.SegmentedButton, { segments: elementLibraryDropdownSegments, style: elementLibraryDropdownStyle }));
     }
-    return (jsx_runtime_1.jsx(common_1.InspectorQuickAction, { disabled: false, iconContainerStyle: browseElementsIconContainerStyle, onClick: openElementsLibrary, renderIcon: (color) => (jsx_runtime_1.jsx(browse_elements_1.BrowseElementsIcon, { color: color, style: browseElementsIconStyle })), title: "Browse the Remotion Elements library inside Studio.", children: "Browse Elements" }));
+    return (jsx_runtime_1.jsx(common_1.InspectorQuickAction, { disabled: false, iconContainerStyle: common_1.largeInspectorActionIconContainerStyle, onClick: openElementsLibrary, renderIcon: (color) => (jsx_runtime_1.jsx(browse_elements_1.BrowseElementsIcon, { color: color, style: common_1.largeInspectorActionIconStyle })), "aria-label": "Browse the Remotion Elements library inside Studio.", children: "Browse Elements" }));
 };
 exports.ElementLibraryButton = ElementLibraryButton;

package/dist/components/InspectorPanel/KeyframeEasingNavigator.js

@@ -90,15 +90,13 @@ const TimelineNavigatorItem = ({ extendLineLeft, extendLineRight, item, onSelect
         extendLeft: extendLineLeft,
         extendRight: extendLineRight,
     });
-    return (jsx_runtime_1.jsx("button", { type: "button", style: buttonStyle, onClick: onClick, title: item.type === 'keyframe'
-            ? `Keyframe at frame ${item.selection.frame}`
-            : `Easing from frame ${item.selection.fromFrame} to ${item.selection.toFrame}`, "aria-label": item.type === 'keyframe'
+    return (jsx_runtime_1.jsx("button", { type: "button", style: buttonStyle, onClick: onClick, "aria-label": item.type === 'keyframe'
             ? `Select keyframe at frame ${item.selection.frame}`
             : `Select easing from frame ${item.selection.fromFrame} to ${item.selection.toFrame}`, children: item.type === 'keyframe' ? (jsx_runtime_1.jsx(TimelineKeyframeDiamondIcon_1.TimelineKeyframeDiamondIcon, { color: colors_1.LIGHT_TEXT, selected: selected, size: 12 })) : (jsx_runtime_1.jsx("div", { style: easingItem, children: jsx_runtime_1.jsx("div", { style: lineUnderlayStyle, children: jsx_runtime_1.jsx(TimelineKeyframeEasingLine_1.TimelineKeyframeEasingLineVisual, { selected: selected }) }) })) }));
 };
 const KeyframeEasingNavigator = ({ currentSelection, includeEasings, keyframes, nodePathInfo }) => {
     const { isSelected, selectItems } = (0, TimelineSelection_1.useTimelineSelection)();
-    const setFrame = remotion_1.Internals.useTimelineSetFrame();
+    const seekFrame = remotion_1.Internals.Timeline.useTimelineSeekFrame();
     const videoConfig = (0, remotion_1.useVideoConfig)();
     const items = (0, react_1.useMemo)(() => (0, keyframe_easing_navigator_items_1.getKeyframeEasingNavigatorItems)({
         includeEasings,
@@ -117,7 +115,7 @@ const KeyframeEasingNavigator = ({ currentSelection, includeEasings, keyframes,
     }, [selectItems]);
     const seekToItem = (0, react_1.useCallback)((item, direction) => {
         const frame = (0, keyframe_easing_navigator_items_1.getNavigatorItemPlayheadFrame)(item);
-        setFrame((current) => {
+        seekFrame((current) => {
             const next = { ...current, [videoConfig.id]: frame };
             remotion_1.Internals.persistCurrentFrame(next);
             return next;
@@ -127,7 +125,7 @@ const KeyframeEasingNavigator = ({ currentSelection, includeEasings, keyframes,
             durationInFrames: videoConfig.durationInFrames,
             frame,
         });
-    }, [setFrame, videoConfig.durationInFrames, videoConfig.id]);
+    }, [seekFrame, videoConfig.durationInFrames, videoConfig.id]);
     const selectPrevious = (0, react_1.useCallback)(() => {
         if (previousItem === null) {
             return;
@@ -145,8 +143,8 @@ const KeyframeEasingNavigator = ({ currentSelection, includeEasings, keyframes,
     if (currentItem === null) {
         return null;
     }
-    return (jsx_runtime_1.jsxs("div", { style: navigatorContainer, children: [jsx_runtime_1.jsx(InlineAction_1.InlineAction, { variant: null, disabled: previousItem === null, onClick: selectPrevious, title: "Previous animation item", renderAction: (color) => (jsx_runtime_1.jsx(NavigationChevron, { color: previousItem === null ? disabledChevronColor : color, direction: "left" })) }), jsx_runtime_1.jsxs("div", { style: itemStrip, children: [
+    return (jsx_runtime_1.jsxs("div", { style: navigatorContainer, children: [jsx_runtime_1.jsx(InlineAction_1.InlineAction, { variant: null, disabled: previousItem === null, onClick: selectPrevious, "aria-label": "Previous animation item", renderAction: (color) => (jsx_runtime_1.jsx(NavigationChevron, { color: previousItem === null ? disabledChevronColor : color, direction: "left" })) }), jsx_runtime_1.jsxs("div", { style: itemStrip, children: [
                     jsx_runtime_1.jsx(TimelineNavigatorItem, { extendLineLeft: false, extendLineRight: currentItem.type === 'keyframe', item: previousItem, onSelect: selectItem, selected: previousItem === null ? false : isSelected(previousItem.selection) }), jsx_runtime_1.jsx(TimelineNavigatorItem, { extendLineLeft: (previousItem === null || previousItem === void 0 ? void 0 : previousItem.type) === 'keyframe', extendLineRight: (nextItem === null || nextItem === void 0 ? void 0 : nextItem.type) === 'keyframe', item: currentItem, onSelect: selectItem, selected: isSelected(currentItem.selection) }), jsx_runtime_1.jsx(TimelineNavigatorItem, { extendLineLeft: currentItem.type === 'keyframe', extendLineRight: false, item: nextItem, onSelect: selectItem, selected: nextItem === null ? false : isSelected(nextItem.selection) })
-                ] }), jsx_runtime_1.jsx(InlineAction_1.InlineAction, { variant: null, disabled: nextItem === null, onClick: selectNext, title: "Next animation item", renderAction: (color) => (jsx_runtime_1.jsx(NavigationChevron, { color: nextItem === null ? disabledChevronColor : color, direction: "right" })) })] }));
+                ] }), jsx_runtime_1.jsx(InlineAction_1.InlineAction, { variant: null, disabled: nextItem === null, onClick: selectNext, "aria-label": "Next animation item", renderAction: (color) => (jsx_runtime_1.jsx(NavigationChevron, { color: nextItem === null ? disabledChevronColor : color, direction: "right" })) })] }));
 };
 exports.KeyframeEasingNavigator = KeyframeEasingNavigator;

package/dist/components/InspectorPanel/KeyframeInspector.js

@@ -12,9 +12,7 @@ const is_menu_item_1 = require("../Menu/is-menu-item");
 const InputDragger_1 = require("../NewComposition/InputDragger");
 const call_delete_keyframe_1 = require("../Timeline/call-delete-keyframe");
 const call_move_keyframe_1 = require("../Timeline/call-move-keyframe");
-const get_easing_selection_after_keyframe_delete_1 = require("../Timeline/get-easing-selection-after-keyframe-delete");
 const get_timeline_keyframes_1 = require("../Timeline/get-timeline-keyframes");
-const imperative_state_1 = require("../Timeline/imperative-state");
 const parse_keyframe_field_from_node_path_1 = require("../Timeline/parse-keyframe-field-from-node-path");
 const TimelineEffectPropItem_1 = require("../Timeline/TimelineEffectPropItem");
 const TimelineSelection_1 = require("../Timeline/TimelineSelection");
@@ -80,7 +78,7 @@ const KeyframeInspector = ({ selection }) => {
             return null;
         }
         const nodePath = selection.nodePathInfo.sequenceSubscriptionKey;
-        const { keyframeDisplayOffset } = track;
+        const { keyframeDisplayOffset, keyframePlaybackRate } = track;
         if (keyframeField.type === 'sequence') {
             const sequenceFields = (0, timeline_layout_1.getFieldsToShow)({
                 schema: track.sequence.controls.schema,
@@ -100,18 +98,25 @@ const KeyframeInspector = ({ selection }) => {
                 field: sequenceField,
                 fieldLabel: (_d = sequenceField.description) !== null && _d !== void 0 ? _d : sequenceField.key,
                 fileName: nodePath.absolutePath,
+                keyframePlaybackRate,
                 keyframeDisplayOffset: (0, get_timeline_keyframes_1.getKeyframeDisplayOffset)({
                     propStatus: sequencePropStatus,
                     keyframeDisplayOffset,
+                    keyframePlaybackRate,
                 }),
                 nodePath,
                 propStatus: sequencePropStatus,
                 schema: track.sequence.controls.schema,
-                sourceFrame: selection.frame -
-                    (0, get_timeline_keyframes_1.getKeyframeDisplayOffset)({
+                sourceFrame: (0, get_timeline_keyframes_1.getKeyframeSourceFrame)({
+                    displayFrame: selection.frame,
+                    propStatus: sequencePropStatus,
+                    keyframeDisplayOffset: (0, get_timeline_keyframes_1.getKeyframeDisplayOffset)({
                         propStatus: sequencePropStatus,
                         keyframeDisplayOffset,
+                        keyframePlaybackRate,
                     }),
+                    keyframePlaybackRate,
+                }),
             };
         }
         const effect = track.sequence.effects[keyframeField.effectIndex];
@@ -143,18 +148,25 @@ const KeyframeInspector = ({ selection }) => {
             field: effectField,
             fieldLabel: (_g = effectField.description) !== null && _g !== void 0 ? _g : effectField.key,
             fileName: nodePath.absolutePath,
+            keyframePlaybackRate,
             keyframeDisplayOffset: (0, get_timeline_keyframes_1.getKeyframeDisplayOffset)({
                 propStatus: effectPropStatus,
                 keyframeDisplayOffset,
+                keyframePlaybackRate,
             }),
             nodePath,
             propStatus: effectPropStatus,
             schema: effect.schema,
-            sourceFrame: selection.frame -
-                (0, get_timeline_keyframes_1.getKeyframeDisplayOffset)({
+            sourceFrame: (0, get_timeline_keyframes_1.getKeyframeSourceFrame)({
+                displayFrame: selection.frame,
+                propStatus: effectPropStatus,
+                keyframeDisplayOffset: (0, get_timeline_keyframes_1.getKeyframeDisplayOffset)({
                     propStatus: effectPropStatus,
                     keyframeDisplayOffset,
+                    keyframePlaybackRate,
                 }),
+                keyframePlaybackRate,
+            }),
             validatedLocation: {
                 source: nodePath.absolutePath,
                 line: 1,
@@ -188,9 +200,11 @@ const KeyframeInspector = ({ selection }) => {
         if (details === null) {
             return;
         }
-        const toFrame = (0, keyframe_inspector_frame_1.getInspectorKeyframeSourceFrame)({
+        const toFrame = (0, get_timeline_keyframes_1.getKeyframeSourceFrame)({
             displayFrame,
             keyframeDisplayOffset: details.keyframeDisplayOffset,
+            keyframePlaybackRate: details.keyframePlaybackRate,
+            propStatus: details.propStatus,
         });
         if (displayFrame === selection.frame || toFrame === details.sourceFrame) {
             clearFrameDragOverride(details);
@@ -227,9 +241,11 @@ const KeyframeInspector = ({ selection }) => {
             durationInFrames: videoConfig.durationInFrames,
             frame: value,
         });
-        const toFrame = (0, keyframe_inspector_frame_1.getInspectorKeyframeSourceFrame)({
+        const toFrame = (0, get_timeline_keyframes_1.getKeyframeSourceFrame)({
             displayFrame,
             keyframeDisplayOffset: details.keyframeDisplayOffset,
+            keyframePlaybackRate: details.keyframePlaybackRate,
+            propStatus: details.propStatus,
         });
         setDraftFrame(displayFrame);
         clearFrameDragOverride(details);
@@ -289,19 +305,7 @@ const KeyframeInspector = ({ selection }) => {
         if (details === null || previewServerState.type !== 'connected') {
             return;
         }
-        const easingSelection = (0, update_selected_easing_1.canEditEasingForInterpolationFunction)(details.propStatus.interpolationFunction)
-            ? (0, get_easing_selection_after_keyframe_delete_1.getEasingSelectionAfterKeyframeDelete)({
-                deletedSourceFrames: [details.sourceFrame],
-                keyframeDisplayOffset: details.keyframeDisplayOffset,
-                nodePathInfo: selection.nodePathInfo,
-                propStatus: details.propStatus,
-                timelinePosition: (0, imperative_state_1.getCurrentFrame)(),
-            })
-            : null;
-        if (easingSelection !== null) {
-            selectItems([easingSelection], { reveal: true });
-        }
-        else if (parentSelection !== null) {
+        if (parentSelection !== null) {
             selectItems([parentSelection], { reveal: true });
         }
         if (details.type === 'sequence') {
@@ -331,16 +335,16 @@ const KeyframeInspector = ({ selection }) => {
         parentSelection,
         previewServerState,
         selectItems,
-        selection.nodePathInfo,
         setPropStatuses,
     ]);
     if (details === null || track === null) {
         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.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) => ({
+            jsx_runtime_1.jsx(SequenceInspectorHeader_1.SequenceInspectorSections, { track: track }), jsx_runtime_1.jsx(common_1.InspectorBackAction, { disabled: parentSelection === null, onClick: onSelectParent, "aria-label": "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,
+                    frame: keyframe.frame / details.keyframePlaybackRate +
+                        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.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, runtimeValueStore: null })) }) }) })

package/dist/components/InspectorPanel/KeyframeSettings.js

@@ -25,8 +25,10 @@ const extrapolateOptions = [
     'wrap',
 ];
 const labelForExtrapolate = (value) => value[0].toUpperCase() + value.slice(1);
-const getExtrapolateValues = (onSelect, disabled) => {
-    return extrapolateOptions.map((value) => ({
+const getExtrapolateValues = (onSelect, disabled, allowIdentity) => {
+    return extrapolateOptions
+        .filter((value) => allowIdentity || value !== 'identity')
+        .map((value) => ({
         type: 'item',
         id: value,
         keyHint: null,
@@ -66,7 +68,9 @@ const KeyframeSettings = ({ update }) => {
     const { previewServerState } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
     const { propStatus } = update;
     const [posterize, setPosterize] = (0, react_1.useState)((_a = propStatus.posterize) !== null && _a !== void 0 ? _a : 0);
-    const canEditInterpolationSettings = propStatus.interpolationFunction === 'interpolate';
+    const canEditExtrapolation = propStatus.interpolationFunction === 'interpolate' ||
+        propStatus.interpolationFunction === 'interpolatePaths';
+    const canEditOutput = propStatus.interpolationFunction === 'interpolate';
     const disabled = previewServerState.type !== 'connected';
     (0, react_1.useEffect)(() => {
         var _a;
@@ -104,12 +108,13 @@ const KeyframeSettings = ({ update }) => {
         var { left = propStatus.clamping.left, output = (_b = propStatus.output) !== null && _b !== void 0 ? _b : 'linear', posterize: nextPosterize = (_c = propStatus.posterize) !== null && _c !== void 0 ? _c : 0, right = propStatus.clamping.right, } = _a;
         save({
             type: 'settings',
-            clamping: canEditInterpolationSettings ? { left, right } : undefined,
-            output: canEditInterpolationSettings ? output : undefined,
+            clamping: canEditExtrapolation ? { left, right } : undefined,
+            output: canEditOutput ? output : undefined,
             posterize: nextPosterize <= 0 ? undefined : nextPosterize,
         });
     }, [
-        canEditInterpolationSettings,
+        canEditExtrapolation,
+        canEditOutput,
         propStatus.clamping.left,
         propStatus.clamping.right,
         propStatus.output,
@@ -119,8 +124,8 @@ const KeyframeSettings = ({ update }) => {
     const onSelectLeft = (0, react_1.useCallback)((left) => saveSettings({ left }), [saveSettings]);
     const onSelectRight = (0, react_1.useCallback)((right) => saveSettings({ right }), [saveSettings]);
     const onSelectOutput = (0, react_1.useCallback)((output) => saveSettings({ output }), [saveSettings]);
-    const leftValues = (0, react_1.useMemo)(() => getExtrapolateValues(onSelectLeft, disabled), [disabled, onSelectLeft]);
-    const rightValues = (0, react_1.useMemo)(() => getExtrapolateValues(onSelectRight, disabled), [disabled, onSelectRight]);
+    const leftValues = (0, react_1.useMemo)(() => getExtrapolateValues(onSelectLeft, disabled, canEditOutput), [canEditOutput, disabled, onSelectLeft]);
+    const rightValues = (0, react_1.useMemo)(() => getExtrapolateValues(onSelectRight, disabled, canEditOutput), [canEditOutput, disabled, onSelectRight]);
     const outputValues = (0, react_1.useMemo)(() => getOutputValues(onSelectOutput, disabled), [disabled, onSelectOutput]);
     const onPosterizeChange = (0, react_1.useCallback)((value) => {
         setPosterize(Math.max(0, Math.round(value)));
@@ -133,9 +138,9 @@ const KeyframeSettings = ({ update }) => {
     const posterizeFormatter = (0, react_1.useCallback)((value) => {
         return String(Math.round(Number(value)));
     }, []);
-    return (jsx_runtime_1.jsx(CollapsibleInspectorSection_1.CollapsibleInspectorSection, { collapsible: true, label: "Keyframe settings", sectionId: "keyframe-settings", children: 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, 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 }) })
+    return (jsx_runtime_1.jsx(CollapsibleInspectorSection_1.CollapsibleInspectorSection, { collapsible: true, label: "Keyframe settings", sectionId: "keyframe-settings", children: jsx_runtime_1.jsxs("div", { style: keyframeSettingsContainer, children: [canEditExtrapolation ? (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, "aria-label": "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, "aria-label": "Extrapolate right", style: comboStyle, size: "small" }) })
+                    ] })) : null, canEditOutput ? (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', "aria-label": "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 }) })
             ] }) }));
 };
 exports.KeyframeSettings = KeyframeSettings;

package/dist/components/InspectorPanel/MultiSequenceField.js

@@ -116,7 +116,7 @@ const MultiSequenceField = ({ field, targets, readOnlyStudio }) => {
                 color: colors_1.BLUE,
                 fontSize: 12,
                 padding: 0,
-            }, title: "Set a value for all selected sequences", onClick: () => setEditingMixed(true), children: "Mixed" }));
+            }, "aria-label": "Set a value for all selected sequences", onClick: () => setEditingMixed(true), children: "Mixed" }));
     }
     else {
         content = (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [mixed ? jsx_runtime_1.jsx("span", { style: { fontSize: 12 }, children: "Mixed \u00B7 " }) : null, jsx_runtime_1.jsx(TimelineSchemaField_1.TimelineFieldValue, { field: field, effectiveValue: values[0], propStatus: {

package/dist/components/InspectorPanel/MultiSequenceInspector.js

@@ -9,7 +9,7 @@ const calculate_timeline_1 = require("../../helpers/calculate-timeline");
 const colors_1 = require("../../helpers/colors");
 const interactivity_enabled_1 = require("../../helpers/interactivity-enabled");
 const timeline_layout_1 = require("../../helpers/timeline-layout");
-const scissors_1 = require("../../icons/scissors");
+const split_1 = require("../../icons/split");
 const InspectorInfoHeader_1 = require("../InspectorInfoHeader");
 const InspectorPanelLayout_1 = require("../InspectorPanelLayout");
 const layout_1 = require("../layout");
@@ -31,11 +31,6 @@ const selectionCountStyle = {
     textOverflow: 'ellipsis',
     whiteSpace: 'nowrap',
 };
-const actionIconStyle = {
-    display: 'block',
-    height: 16,
-    width: 16,
-};
 const MultiSequenceInspector = ({ selections, readOnlyStudio }) => {
     const { sequences } = (0, react_1.useContext)(remotion_1.Internals.SequenceManager);
     const timelinePosition = remotion_1.Internals.Timeline.useTimelinePosition();
@@ -128,7 +123,7 @@ const MultiSequenceInspector = ({ selections, readOnlyStudio }) => {
                     const groupedFields = fields.filter((field) => field.group === group.id);
                     return groupedFields.length === 0 ? null : (jsx_runtime_1.jsx(CollapsibleInspectorSection_1.CollapsibleInspectorSection, { collapsible: true, label: group.label, sectionId: `multi-sequence-${group.id}`, children: groupedFields.map((field) => (jsx_runtime_1.jsx(MultiSequenceField_1.MultiSequenceField, { field: field, targets: targets, readOnlyStudio: readOnlyStudio }, JSON.stringify(targets.map((target) => target.nodePath)) +
                             field.key))) }, group.id));
-                }) })), jsx_runtime_1.jsx(CollapsibleInspectorSection_1.CollapsibleInspectorSection, { collapsible: true, label: "Actions", sectionId: "multi-sequence-actions", children: jsx_runtime_1.jsx(common_1.InspectorQuickActionsSection, { children: jsx_runtime_1.jsx(common_1.InspectorQuickAction, { disabled: !canSplit, onClick: onSplit, title: canSplit ? undefined : 'Studio is read-only', renderIcon: (color) => (jsx_runtime_1.jsx(scissors_1.ScissorsIcon, { style: actionIconStyle, color: color })), children: "Split selected" }) }) })
+                }) })), jsx_runtime_1.jsx(CollapsibleInspectorSection_1.CollapsibleInspectorSection, { collapsible: true, label: "Actions", sectionId: "multi-sequence-actions", children: jsx_runtime_1.jsx(common_1.InspectorQuickActionsSection, { children: jsx_runtime_1.jsx(common_1.InspectorQuickAction, { disabled: !canSplit, iconContainerStyle: common_1.largeInspectorActionIconContainerStyle, onClick: onSplit, "aria-label": canSplit ? undefined : 'Studio is read-only', renderIcon: (color) => (jsx_runtime_1.jsx(split_1.SplitIcon, { style: common_1.largeInspectorActionIconStyle, color: color })), children: "Split selected" }) }) })
         ] }));
 };
 exports.MultiSequenceInspector = MultiSequenceInspector;

package/dist/components/InspectorPanel/MultiSequenceNumberField.js

@@ -61,9 +61,9 @@ const NumericAxis = ({ field, values, axis, onPreview, onSave, onClear }) => {
                 event.target.value.trim() === '') {
                 clear();
             }
-        }, children: jsx_runtime_1.jsx(InputDragger_1.InputDragger, { type: "number", value: dragValue !== null && dragValue !== void 0 ? dragValue : coordinates[0], "aria-label": axis === null
+        }, children: jsx_runtime_1.jsx(InputDragger_1.InputDragger, { type: "number", "aria-description": "Type to set all values; drag to adjust each value", value: dragValue !== null && dragValue !== void 0 ? dragValue : coordinates[0], "aria-label": axis === null
                 ? ((_d = field.description) !== null && _d !== void 0 ? _d : field.key)
-                : `Offset ${['X', 'Y', 'Z'][axis]}`, title: "Type to set all values; drag to adjust each value", status: "ok", small: true, rightAlign: false, min: min, max: max, step: step, snapToStep: axis === null, dragDecimalPlaces: decimalPlaces, dragSensitivity: axis === null ? 1 : 3, buttonStyle: { paddingLeft: 0 }, style: { width: 70 }, formatter: (value) => mixed && dragValue === null
+                : `Offset ${['X', 'Y', 'Z'][axis]}`, status: "ok", small: true, rightAlign: false, min: min, max: max, step: step, allowStepMismatch: true, integerOnly: schema.type === 'number' && schema.integer === true, snapToStep: axis === null, dragDecimalPlaces: decimalPlaces, dragSensitivity: axis === null ? 1 : 3, buttonStyle: { paddingLeft: 0 }, style: { width: 70 }, formatter: (value) => mixed && dragValue === null
                 ? 'Mixed'
                 : (0, timeline_field_display_utils_1.formatTimelineFieldValueForDisplay)({ fieldSchema: schema, value }), onTextChange: noop_1.noop, onValueChange: (value, source) => {
                 var _a;

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

@@ -6,7 +6,9 @@ type SequenceInspectorSourceLocation = {
     readonly openFileLocation: () => void;
     readonly validatedLocation: CodePosition | null;
 };
-export declare const useSequenceInspectorSourceLocation: (sequence: import("remotion").TSequence) => SequenceInspectorSourceLocation;
+export declare const useSequenceInspectorSourceLocation: (sequence: import("remotion").TSequence & {
+    loopDisplay: import("@remotion/canvas").TimelineLoopDisplay | undefined;
+}) => SequenceInspectorSourceLocation;
 export declare const SequenceInspectorHeader: React.FC<{
     readonly sourceLocation: SequenceInspectorSourceLocation;
     readonly track: TimelineTrackData;

package/dist/components/InspectorPanel/SequenceInspectorHeader.js

@@ -101,7 +101,7 @@ 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.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(InlineEditableTitle_1.InlineEditableTitle, { value: sequenceDisplayName, canRename: canRename, onCommit: onRename, size: "inspector" }), documentationLink ? (jsx_runtime_1.jsxs(common_1.InspectorQuickAction, { disabled: false, style: defaultCursor, "aria-label": "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.canOpen, onOpen: sourceLocation.openFileLocation, renderIcon: renderReactIcon, size: "quick-action" })
             ] }) }));
 };