@remotion/studio 4.0.528 → 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;
@@ -236,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/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

@@ -209,7 +209,7 @@ const EasingInspector = ({ selection }) => {
         easingKeyframeDisplayOffset,
     ]);
     const renderHeader = (0, react_1.useCallback)(() => (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
-            jsx_runtime_1.jsx(common_1.InspectorBackAction, { disabled: parentSelection === null, onClick: onSelectParent, title: "Back to property", children: fieldLabel }), 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 / track.keyframePlaybackRate +
                         easingKeyframeDisplayOffset,

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.Timeline.useTimelineSeekFrame();
+    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

@@ -341,7 +341,7 @@ const KeyframeInspector = ({ selection }) => {
         return jsx_runtime_1.jsx(common_1.InspectorMessage, { children: "Keyframe unavailable" });
     }
     return (jsx_runtime_1.jsxs("div", { style: styles_1.selectedContainer, className: is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME, children: [
-            jsx_runtime_1.jsx(SequenceInspectorHeader_1.SequenceInspectorSections, { track: track }), jsx_runtime_1.jsx(common_1.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.keyframePlaybackRate +
                         details.keyframeDisplayOffset,

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, 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
+                : `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.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" })
             ] }) }));
 };

package/dist/components/InspectorPanel/SequenceSelectionInspector.js

@@ -10,8 +10,8 @@ const use_media_metadata_1 = require("../../helpers/use-media-metadata");
 const audio_1 = require("../../icons/audio");
 const background_removal_1 = require("../../icons/background-removal");
 const duplicate_1 = require("../../icons/duplicate");
-const scissors_1 = require("../../icons/scissors");
 const snowflake_1 = require("../../icons/snowflake");
+const split_1 = require("../../icons/split");
 const transcription_1 = require("../../icons/transcription");
 const trash_1 = require("../../icons/trash");
 const modals_1 = require("../../state/modals");
@@ -34,16 +34,6 @@ const SequenceInspectorHeader_1 = require("./SequenceInspectorHeader");
 const SequenceWrapAction_1 = require("./SequenceWrapAction");
 const styles_1 = require("./styles");
 const use_track_for_selection_1 = require("./use-track-for-selection");
-const actionIconStyle = {
-    display: 'block',
-    height: 16,
-    width: 16,
-};
-const largeActionIconStyle = {
-    ...actionIconStyle,
-    height: 20,
-    width: 20,
-};
 const SplitSequenceQuickAction = ({ selection, track }) => {
     const timelinePosition = remotion_1.Internals.Timeline.useTimelinePosition();
     const { propStatuses } = (0, react_1.useContext)(remotion_1.Internals.VisualModePropStatusesContext);
@@ -73,7 +63,7 @@ const SplitSequenceQuickAction = ({ selection, track }) => {
             : eligibility.canSplit
                 ? undefined
                 : eligibility.reason;
-    return (jsx_runtime_1.jsx(common_1.InspectorQuickAction, { disabled: !canSplit, onClick: onSplit, title: disabledReason, renderIcon: (color) => (jsx_runtime_1.jsx(scissors_1.ScissorsIcon, { style: actionIconStyle, color: color })), children: "Split clip" }));
+    return (jsx_runtime_1.jsx(common_1.InspectorQuickAction, { disabled: !canSplit, iconContainerStyle: common_1.largeInspectorActionIconContainerStyle, onClick: onSplit, "aria-label": disabledReason, renderIcon: (color) => (jsx_runtime_1.jsx(split_1.SplitIcon, { style: common_1.largeInspectorActionIconStyle, color: color })), children: "Split clip" }));
 };
 const SequenceSourceQuickActions = ({ selection, track, validatedSource }) => {
     var _a;
@@ -193,7 +183,8 @@ const SequenceSourceQuickActions = ({ selection, track, validatedSource }) => {
             (0, NotificationCenter_1.showNotification)(err.message, 4000);
         });
     }, [selection.nodePathInfo, splitVideoFromAudioDisabledReason]);
-    return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [(freezeFrameMenuItem === null || freezeFrameMenuItem === void 0 ? void 0 : freezeFrameMenuItem.type) === 'item' ? (jsx_runtime_1.jsx(common_1.InspectorQuickAction, { disabled: Boolean(freezeFrameMenuItem.disabled), onClick: () => freezeFrameMenuItem.onClick(freezeFrameMenuItem.id, null), renderIcon: (color) => (jsx_runtime_1.jsx(snowflake_1.SnowflakeIcon, { style: largeActionIconStyle, color: color })), children: freezeFrameMenuItem.label })) : null, track.sequence.type === 'video' ? (jsx_runtime_1.jsx(common_1.InspectorQuickAction, { disabled: videoMattingDisabledReason !== undefined, onClick: onRemoveBackground, title: videoMattingDisabledReason, renderIcon: (color) => (jsx_runtime_1.jsx(background_removal_1.BackgroundRemovalIcon, { style: actionIconStyle, color: color })), children: "Remove background" })) : null, track.sequence.type === 'video' ? (jsx_runtime_1.jsx(common_1.InspectorQuickAction, { disabled: splitVideoFromAudioDisabledReason !== undefined, onClick: onSplitVideoFromAudio, title: splitVideoFromAudioDisabledReason, renderIcon: (color) => (jsx_runtime_1.jsx(audio_1.AudioIcon, { style: actionIconStyle, color: color })), children: "Split video from audio" })) : null, mediaSequence !== null && (mediaMetadata === null || mediaMetadata === void 0 ? void 0 : mediaMetadata.hasAudioTrack) !== false ? (jsx_runtime_1.jsx(common_1.InspectorQuickAction, { disabled: transcriptionDisabledReason !== undefined, onClick: onGenerateCaptions, title: transcriptionDisabledReason, renderIcon: (color) => (jsx_runtime_1.jsx(transcription_1.TranscriptionIcon, { style: actionIconStyle, color: color })), children: "Generate captions" })) : null, jsx_runtime_1.jsx(common_1.InspectorQuickAction, { disabled: sourceActionsDisabled, onClick: onDuplicate, renderIcon: (color) => (jsx_runtime_1.jsx(duplicate_1.DuplicateIcon, { style: largeActionIconStyle, color: color })), children: "Duplicate" }), jsx_runtime_1.jsx(SequenceWrapAction_1.SequenceWrapAction, { nodePathInfo: selection.nodePathInfo, sequence: track.sequence, sourceActionsDisabled: sourceActionsDisabled }), jsx_runtime_1.jsx(common_1.InspectorQuickAction, { disabled: sourceActionsDisabled, onClick: onDelete, renderIcon: (color) => (jsx_runtime_1.jsx(trash_1.TrashIcon, { style: actionIconStyle, color: color })), children: "Delete" })] }));
+    // Pad the larger SVG glyphs so they have similar visible bounds at 22px.
+    return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [(freezeFrameMenuItem === null || freezeFrameMenuItem === void 0 ? void 0 : freezeFrameMenuItem.type) === 'item' ? (jsx_runtime_1.jsx(common_1.InspectorQuickAction, { disabled: Boolean(freezeFrameMenuItem.disabled), iconContainerStyle: common_1.largeInspectorActionIconContainerStyle, onClick: () => freezeFrameMenuItem.onClick(freezeFrameMenuItem.id, null), renderIcon: (color) => (jsx_runtime_1.jsx(snowflake_1.SnowflakeIcon, { style: common_1.largeInspectorActionIconStyle, color: color })), children: freezeFrameMenuItem.label })) : null, track.sequence.type === 'video' ? (jsx_runtime_1.jsx(common_1.InspectorQuickAction, { disabled: videoMattingDisabledReason !== undefined, iconContainerStyle: common_1.largeInspectorActionIconContainerStyle, onClick: onRemoveBackground, "aria-label": videoMattingDisabledReason, renderIcon: (color) => (jsx_runtime_1.jsx(background_removal_1.BackgroundRemovalIcon, { style: common_1.largeInspectorActionIconStyle, color: color, viewBox: "-32 -32 704 704" })), children: "Remove background" })) : null, track.sequence.type === 'video' ? (jsx_runtime_1.jsx(common_1.InspectorQuickAction, { disabled: splitVideoFromAudioDisabledReason !== undefined, iconContainerStyle: common_1.largeInspectorActionIconContainerStyle, onClick: onSplitVideoFromAudio, "aria-label": splitVideoFromAudioDisabledReason, renderIcon: (color) => (jsx_runtime_1.jsx(audio_1.AudioIcon, { style: common_1.largeInspectorActionIconStyle, color: color, viewBox: "-96 -64 704 640", preserveAspectRatio: "none" })), children: "Split video from audio" })) : null, mediaSequence !== null && (mediaMetadata === null || mediaMetadata === void 0 ? void 0 : mediaMetadata.hasAudioTrack) !== false ? (jsx_runtime_1.jsx(common_1.InspectorQuickAction, { disabled: transcriptionDisabledReason !== undefined, iconContainerStyle: common_1.largeInspectorActionIconContainerStyle, onClick: onGenerateCaptions, "aria-label": transcriptionDisabledReason, renderIcon: (color) => (jsx_runtime_1.jsx(transcription_1.TranscriptionIcon, { style: common_1.largeInspectorActionIconStyle, color: color, viewBox: "-96 -16 704 544", preserveAspectRatio: "none" })), children: "Generate captions" })) : null, jsx_runtime_1.jsx(common_1.InspectorQuickAction, { disabled: sourceActionsDisabled, iconContainerStyle: common_1.largeInspectorActionIconContainerStyle, onClick: onDuplicate, renderIcon: (color) => (jsx_runtime_1.jsx(duplicate_1.DuplicateIcon, { style: common_1.largeInspectorActionIconStyle, color: color, viewBox: "-32 -32 704 704" })), children: "Duplicate" }), jsx_runtime_1.jsx(SequenceWrapAction_1.SequenceWrapAction, { nodePathInfo: selection.nodePathInfo, sequence: track.sequence, sourceActionsDisabled: sourceActionsDisabled }), jsx_runtime_1.jsx(common_1.InspectorQuickAction, { disabled: sourceActionsDisabled, iconContainerStyle: common_1.largeInspectorActionIconContainerStyle, onClick: onDelete, renderIcon: (color) => (jsx_runtime_1.jsx(trash_1.TrashIcon, { style: common_1.largeInspectorActionIconStyle, color: color, viewBox: "-120 -96 688 688" })), children: "Delete" })] }));
 };
 const SequenceExpandedInspector = ({ track, readOnlyStudio }) => {
     const { previewServerState } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);

package/dist/components/InspectorPanel/SequenceWrapAction.js

@@ -11,6 +11,7 @@ const InspectorPanelLayout_1 = require("../InspectorPanelLayout");
 const NotificationCenter_1 = require("../Notifications/NotificationCenter");
 const SegmentedButton_1 = require("../SegmentedButton");
 const wrap_jsx_node_api_1 = require("../wrap-jsx-node-api");
+const common_1 = require("./common");
 const wrapperNames = ['AbsoluteFill', 'Sequence', 'HtmlInCanvas'];
 const buttonStyle = {
     borderRadius: 4,
@@ -25,14 +26,6 @@ const segmentStyle = {
     padding: `0 ${InspectorPanelLayout_1.INSPECTOR_PANEL_HORIZONTAL_PADDING - 4}px`,
     width: '100%',
 };
-const iconStyle = { height: 22, width: 22 };
-const iconContainerStyle = {
-    flexShrink: 0,
-    height: 22,
-    marginLeft: -2,
-    marginRight: -2,
-    width: 22,
-};
 const labelStyle = {
     flex: 1,
     fontFamily: 'sans-serif',
@@ -123,21 +116,20 @@ const SequenceWrapAction = ({ nodePathInfo, sequence, sourceActionsDisabled }) =
     })), [busy, eligibility, onWrap]);
     const segments = (0, react_1.useMemo)(() => [
         {
-            ariaLabel: 'Wrap',
+            ariaLabel: nodePathInfo.numberOfSequencesWithThisNodePath > 1
+                ? `Wrap all ${nodePathInfo.numberOfSequencesWithThisNodePath} instances of this JSX element`
+                : 'Wrap this JSX element',
             buttonId: null,
             disabled: busy,
             idleColor: colors_1.LIGHT_TEXT,
             leaveLeftSpace: false,
             onOpenChange: null,
             renderContent: (color) => (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
-                    jsx_runtime_1.jsx("span", { style: iconContainerStyle, children: jsx_runtime_1.jsx(wrap_1.WrapIcon, { color: color, style: iconStyle }) }), jsx_runtime_1.jsx("span", { style: labelStyle, children: "Wrap" }), jsx_runtime_1.jsx("span", { style: caretStyle, children: jsx_runtime_1.jsx(caret_1.CaretDown, { color: color }) })
+                    jsx_runtime_1.jsx("span", { style: common_1.largeInspectorActionIconContainerStyle, children: jsx_runtime_1.jsx(wrap_1.WrapIcon, { color: color, style: common_1.largeInspectorActionIconStyle }) }), jsx_runtime_1.jsx("span", { style: labelStyle, children: "Wrap" }), jsx_runtime_1.jsx("span", { style: caretStyle, children: jsx_runtime_1.jsx(caret_1.CaretDown, { color: color }) })
                 ] })),
             segmentId: 'wrap',
             selectedId: null,
             style: segmentStyle,
-            title: nodePathInfo.numberOfSequencesWithThisNodePath > 1
-                ? `Wrap all ${nodePathInfo.numberOfSequencesWithThisNodePath} instances of this JSX element`
-                : 'Wrap this JSX element',
             tooltipLabel: null,
             type: 'menu',
             values,
@@ -146,6 +138,6 @@ const SequenceWrapAction = ({ nodePathInfo, sequence, sourceActionsDisabled }) =
     if (!(eligibility === null || eligibility === void 0 ? void 0 : eligibility.canWrap) || sourceActionsDisabled) {
         return null;
     }
-    return (jsx_runtime_1.jsx(SegmentedButton_1.SegmentedButton, { segments: segments, style: buttonStyle, title: null }));
+    return jsx_runtime_1.jsx(SegmentedButton_1.SegmentedButton, { segments: segments, style: buttonStyle });
 };
 exports.SequenceWrapAction = SequenceWrapAction;

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

@@ -18,7 +18,7 @@ export declare const InspectorBackAction: React.FC<{
     readonly children: React.ReactNode;
     readonly disabled: boolean;
     readonly onClick: React.MouseEventHandler<HTMLButtonElement>;
-    readonly title: string;
+    readonly 'aria-label': string;
 }>;
 export declare const InspectorMessage: React.FC<{
     readonly children: React.ReactNode;
@@ -27,6 +27,10 @@ export declare const InspectorDetailRow: React.FC<{
     readonly label: React.ReactNode | ((hovered: boolean) => React.ReactNode);
     readonly children: React.ReactNode;
 }>;
+export declare const inspectorActionIconStyle: React.CSSProperties;
+export declare const inspectorActionIconContainerStyle: React.CSSProperties;
+export declare const largeInspectorActionIconStyle: React.CSSProperties;
+export declare const largeInspectorActionIconContainerStyle: React.CSSProperties;
 export type InspectorQuickActionProps = {
     readonly children: React.ReactNode;
     readonly disabled: boolean;
@@ -35,7 +39,7 @@ export type InspectorQuickActionProps = {
     readonly renderIcon?: (color: string) => React.ReactNode;
     readonly size?: 'default' | 'compact';
     readonly style?: React.CSSProperties;
-    readonly title?: string;
+    readonly 'aria-label'?: string;
 };
 export declare const InspectorQuickAction: React.FC<InspectorQuickActionProps>;
 export declare const InspectorDefaultPropsWarnings: React.FC<{

package/dist/components/InspectorPanel/common.js

@@ -3,7 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.InspectorDefaultPropsWarnings = exports.InspectorQuickAction = exports.InspectorDetailRow = exports.InspectorMessage = exports.InspectorBackAction = exports.InspectorSection = exports.InspectorSectionBody = exports.InspectorQuickActionsSection = exports.InspectorSectionHeader = void 0;
+exports.InspectorDefaultPropsWarnings = exports.InspectorQuickAction = exports.largeInspectorActionIconContainerStyle = exports.largeInspectorActionIconStyle = exports.inspectorActionIconContainerStyle = exports.inspectorActionIconStyle = exports.InspectorDetailRow = exports.InspectorMessage = exports.InspectorBackAction = exports.InspectorSection = exports.InspectorSectionBody = exports.InspectorQuickActionsSection = exports.InspectorSectionHeader = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = __importDefault(require("react"));
 const colors_1 = require("../../helpers/colors");
@@ -41,8 +41,8 @@ const backArrowIcon = {
 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 InspectorBackAction = ({ children, disabled, onClick, title }) => {
-    return (jsx_runtime_1.jsx("div", { style: styles_1.inspectorQuickActionsSection, children: jsx_runtime_1.jsx(exports.InspectorQuickAction, { disabled: disabled, onClick: onClick, renderIcon: (color) => jsx_runtime_1.jsx(BackArrow, { color: color }), title: title, children: children }) }));
+const InspectorBackAction = ({ children, disabled, onClick, 'aria-label': ariaLabel }) => {
+    return (jsx_runtime_1.jsx("div", { style: styles_1.inspectorQuickActionsSection, children: jsx_runtime_1.jsx(exports.InspectorQuickAction, { disabled: disabled, onClick: onClick, renderIcon: (color) => jsx_runtime_1.jsx(BackArrow, { color: color }), "aria-label": ariaLabel, children: children }) }));
 };
 exports.InspectorBackAction = InspectorBackAction;
 const InspectorMessage = ({ children }) => jsx_runtime_1.jsx("div", { style: styles_1.centeredMessage, children: children });
@@ -92,15 +92,31 @@ const inlineLabelText = {
     WebkitUserSelect: 'none',
     whiteSpace: 'nowrap',
 };
-const inlineLabelIcon = {
+const INSPECTOR_ACTION_ICON_SIZE = 18;
+exports.inspectorActionIconStyle = {
+    display: 'block',
+    height: INSPECTOR_ACTION_ICON_SIZE,
+    width: INSPECTOR_ACTION_ICON_SIZE,
+};
+exports.inspectorActionIconContainerStyle = {
     alignItems: 'center',
     display: 'flex',
     flexShrink: 0,
-    height: 18,
+    height: INSPECTOR_ACTION_ICON_SIZE,
     justifyContent: 'center',
-    width: 18,
+    width: INSPECTOR_ACTION_ICON_SIZE,
+};
+exports.largeInspectorActionIconStyle = {
+    height: 22,
+    width: 22,
+};
+exports.largeInspectorActionIconContainerStyle = {
+    height: 22,
+    marginLeft: -2,
+    marginRight: -2,
+    width: 22,
 };
-const InspectorQuickAction = ({ children, disabled, iconContainerStyle, onClick, renderIcon, size = 'default', style, title, }) => {
+const InspectorQuickAction = ({ children, disabled, iconContainerStyle, onClick, renderIcon, size = 'default', style, 'aria-label': ariaLabel, }) => {
     const showsHover = !disabled && onClick !== null;
     const buttonStyle = react_1.default.useMemo(() => ({
         ...(disabled ? inlineLabelButtonDisabled : inlineLabelButton),
@@ -115,9 +131,9 @@ const InspectorQuickAction = ({ children, disabled, iconContainerStyle, onClick,
         ...(size === 'compact' ? compactInlineLabelButton : null),
         ...style,
     }), [disabled, showsHover, size, style]);
-    const mainContent = (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [renderIcon ? (jsx_runtime_1.jsx("span", { style: { ...inlineLabelIcon, ...iconContainerStyle }, children: renderIcon(colors_1.CURRENT_COLOR) })) : null, jsx_runtime_1.jsx("span", { style: inlineLabelText, children: children })
+    const mainContent = (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [renderIcon ? (jsx_runtime_1.jsx("span", { style: { ...exports.inspectorActionIconContainerStyle, ...iconContainerStyle }, children: renderIcon(colors_1.CURRENT_COLOR) })) : null, jsx_runtime_1.jsx("span", { style: inlineLabelText, children: children })
         ] }));
-    const mainAction = onClick ? (jsx_runtime_1.jsx("button", { className: `__remotion-inspector-quick-action ${hoverable_1.HOVERABLE_CLASS_NAME}`, type: "button", disabled: disabled, style: buttonStyle, title: title, onClick: onClick, children: mainContent })) : (jsx_runtime_1.jsx("div", { className: hoverable_1.HOVERABLE_CLASS_NAME, style: buttonStyle, title: title, children: mainContent }));
+    const mainAction = onClick ? (jsx_runtime_1.jsx("button", { className: `__remotion-inspector-quick-action ${hoverable_1.HOVERABLE_CLASS_NAME}`, type: "button", disabled: disabled, style: buttonStyle, "aria-label": ariaLabel, onClick: onClick, children: mainContent })) : (jsx_runtime_1.jsx("div", { className: hoverable_1.HOVERABLE_CLASS_NAME, style: buttonStyle, "aria-label": ariaLabel, role: "group", children: mainContent }));
     return mainAction;
 };
 exports.InspectorQuickAction = InspectorQuickAction;

package/dist/components/InspectorSequenceSection.js

@@ -248,7 +248,7 @@ const InspectorSequenceSection = ({ sequence, readOnlyStudio, validatedLocation,
                 disabled: false,
                 onClick: () => (0, timeline_asset_link_1.openTimelineAssetLink)(linkInfo, selectAsset),
                 renderIcon: (color) => (jsx_runtime_1.jsx(AssetFileIcon_1.AssetFileIcon, { color: color, fileType: (0, get_preview_file_type_1.getPreviewFileType)(linkInfo.assetPath), style: assetSelectorIcon })),
-                title: linkInfo.assetPath,
+                'aria-label': linkInfo.assetPath,
             };
         }
         if ((linkInfo === null || linkInfo === void 0 ? void 0 : linkInfo.kind) === 'remote') {
@@ -259,7 +259,7 @@ const InspectorSequenceSection = ({ sequence, readOnlyStudio, validatedLocation,
                     ] })),
                 disabled: false,
                 onClick: () => (0, timeline_asset_link_1.openTimelineAssetLink)(linkInfo, selectAsset),
-                title: linkInfo.href,
+                'aria-label': linkInfo.href,
             };
         }
         return null;
@@ -563,19 +563,19 @@ const InspectorSequenceSection = ({ sequence, readOnlyStudio, validatedLocation,
         validatedLocation.source,
     ]);
     const borderRadiusAction = borderRadiusGroup ? (jsx_runtime_1.jsx(InlineAction_1.InlineAction, { variant: null, disabled: borderRadiusConversion === null ||
-            previewServerState.type !== 'connected', onClick: onConvertBorderRadius, title: borderRadiusConversion === null
+            previewServerState.type !== 'connected', onClick: onConvertBorderRadius, "aria-label": borderRadiusConversion === null
             ? borderRadiusUsesShorthand
                 ? 'A static border radius is required to use individual corners'
                 : 'All four corners must have the same static value'
             : borderRadiusUsesShorthand
                 ? 'Use individual corner radii'
                 : 'Use one border radius value', renderAction: (color) => borderRadiusUsesShorthand ? (jsx_runtime_1.jsx(fullscreen_1.FullscreenIcon, { color: color, style: borderRadiusToggleIcon })) : (jsx_runtime_1.jsx(border_radius_1.BorderRadiusIcon, { color: color, style: borderRadiusToggleIcon })) })) : null;
-    const transform3DAction = (jsx_runtime_1.jsx(InlineAction_1.InlineAction, { variant: null, disabled: automaticallyEnabled3DTransform, onClick: onToggle3DTransform, title: automaticallyEnabled3DTransform
+    const transform3DAction = (jsx_runtime_1.jsx(InlineAction_1.InlineAction, { variant: null, disabled: automaticallyEnabled3DTransform, onClick: onToggle3DTransform, "aria-label": automaticallyEnabled3DTransform
             ? '3D controls are required by the current transform values'
             : show3DTransformControls
                 ? 'Hide 3D transform controls'
                 : 'Show 3D transform controls', hoveredColor: show3DTransformControls ? colors_1.BLUE : undefined, unhoveredColor: show3DTransformControls ? colors_1.BLUE : colors_1.LIGHT_TEXT, renderAction: (color) => (jsx_runtime_1.jsx(cube_1.CubeIcon, { color: color, style: transform3DToggleIcon })) }));
-    const effectsHeader = (jsx_runtime_1.jsx(CollapsibleInspectorSectionHeader_1.CollapsibleInspectorSectionHeader, { action: jsx_runtime_1.jsx(InlineAction_1.InlineAction, { variant: null, disabled: !canAddEffect, onClick: onAddEffect, title: canAddEffect ? 'Add effect' : undefined, renderAction: (color) => jsx_runtime_1.jsx(plus_1.Plus, { color: color, style: plusIcon }) }), expanded: effectsExpanded, label: "Effects", onToggle: hasEffects ? () => toggleAdditionalSection('effects') : null }));
+    const effectsHeader = (jsx_runtime_1.jsx(CollapsibleInspectorSectionHeader_1.CollapsibleInspectorSectionHeader, { action: jsx_runtime_1.jsx(InlineAction_1.InlineAction, { variant: null, disabled: !canAddEffect, onClick: onAddEffect, "aria-label": canAddEffect ? 'Add effect' : undefined, renderAction: (color) => jsx_runtime_1.jsx(plus_1.Plus, { color: color, style: plusIcon }) }), expanded: effectsExpanded, label: "Effects", onToggle: hasEffects ? () => toggleAdditionalSection('effects') : null }));
     const renderRow = ({ node, depth }) => {
         return (jsx_runtime_1.jsx(TimelineRowLayoutContext_1.TimelineRowLayoutContext.Provider, { value: TimelineRowLayoutContext_1.INSPECTOR_TIMELINE_ROW_LAYOUT, children: jsx_runtime_1.jsx(TimelineExpandedRow_1.TimelineExpandedRow, { node: node, depth: depth, nestedDepth: 0, rowDepthBase: 0, getIsExpanded: getIsExpanded, toggleTrack: toggleTrack, validatedLocation: validatedLocation, nodePath: nodePathInfo.sequenceSubscriptionKey, schema: schema, keyframeDisplayOffset: keyframeDisplayOffset, keyframePlaybackRate: keyframePlaybackRate, keyframeControlsMode: "inspector" }) }, JSON.stringify(node.nodePathInfo)));
     };