@remotion/studio 4.0.527 → 4.0.529

package/dist/components/InspectorPanel/SequenceSelectionInspector.js

@@ -8,9 +8,10 @@ const client_id_1 = require("../../helpers/client-id");
 const interactivity_enabled_1 = require("../../helpers/interactivity-enabled");
 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");
@@ -30,18 +31,9 @@ const CollapsibleInspectorSection_1 = require("./CollapsibleInspectorSection");
 const common_1 = require("./common");
 const ConnectedCompositionsSection_1 = require("./ConnectedCompositionsSection");
 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);
@@ -71,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;
@@ -105,6 +97,11 @@ const SequenceSourceQuickActions = ({ selection, track, validatedSource }) => {
         : selection.nodePathInfo.numberOfSequencesWithThisNodePath > 1
             ? 'Programmatically duplicated media cannot be transcribed from source'
             : undefined;
+    const videoMattingDisabledReason = sourceActionsDisabled
+        ? 'Studio is read-only'
+        : selection.nodePathInfo.numberOfSequencesWithThisNodePath > 1
+            ? 'Programmatically duplicated videos cannot have their background removed from source'
+            : undefined;
     const onGenerateCaptions = (0, react_1.useCallback)(() => {
         if (transcriptionDisabledReason !== undefined || mediaSequence === null) {
             return;
@@ -130,6 +127,27 @@ const SequenceSourceQuickActions = ({ selection, track, validatedSource }) => {
         mediaSequence,
         transcriptionDisabledReason,
     ]);
+    const onRemoveBackground = (0, react_1.useCallback)(() => {
+        if (videoMattingDisabledReason !== undefined ||
+            track.sequence.type !== 'video') {
+            return;
+        }
+        const nodePath = selection.nodePathInfo.sequenceSubscriptionKey;
+        setSelectedModal({
+            type: 'video-matting',
+            src: track.sequence.src,
+            displayName: (0, public_output_name_1.getMediaFileName)(track.sequence.src, track.sequence.displayName),
+            target: {
+                fileName: nodePath.absolutePath,
+                nodePath,
+            },
+        });
+    }, [
+        selection.nodePathInfo,
+        setSelectedModal,
+        track.sequence,
+        videoMattingDisabledReason,
+    ]);
     const onDuplicate = (0, react_1.useCallback)(() => {
         if (sourceActionsDisabled) {
             return;
@@ -165,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: 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(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);
@@ -210,7 +229,7 @@ const SequenceExpandedInspector = ({ track, readOnlyStudio }) => {
         return jsx_runtime_1.jsx(common_1.InspectorMessage, { children: "Sequence inspector unavailable" });
     }
     return (jsx_runtime_1.jsxs("div", { style: styles_1.selectedContainer, className: is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME, onPointerDown: selectSequenceOnInspectorPointerDown, children: [
-            jsx_runtime_1.jsx(SequenceInspectorHeader_1.SequenceInspectorHeader, { sourceLocation: sourceLocation, track: track }, stackKey !== null && stackKey !== void 0 ? stackKey : track.sequence.id), jsx_runtime_1.jsx(SequenceInspectorHeader_1.SequenceInspectorDuplicationSection, { track: track }), connectedCompositions.length > 0 ? (jsx_runtime_1.jsx(ConnectedCompositionsSection_1.ConnectedCompositionsSection, { connectedCompositions: connectedCompositions })) : null, validatedLocation ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [jsx_runtime_1.jsx(InspectorSequenceSection_1.InspectorSequenceSection, { sequence: track.sequence, readOnlyStudio: readOnlyStudio, validatedLocation: validatedLocation, nodePathInfo: track.nodePathInfo, keyframeDisplayOffset: track.keyframeDisplayOffset, renderTransformControls: () => jsx_runtime_1.jsx(AlignmentControls_1.AlignmentControls, { track: track }) }), jsx_runtime_1.jsx(CollapsibleInspectorSection_1.CollapsibleInspectorSection, { collapsible: true, label: "Actions", sectionId: "sequence-actions", children: jsx_runtime_1.jsxs(common_1.InspectorQuickActionsSection, { children: [
+            jsx_runtime_1.jsx(SequenceInspectorHeader_1.SequenceInspectorHeader, { sourceLocation: sourceLocation, track: track }, stackKey !== null && stackKey !== void 0 ? stackKey : track.sequence.id), jsx_runtime_1.jsx(SequenceInspectorHeader_1.SequenceInspectorDuplicationSection, { track: track }), connectedCompositions.length > 0 ? (jsx_runtime_1.jsx(ConnectedCompositionsSection_1.ConnectedCompositionsSection, { connectedCompositions: connectedCompositions })) : null, validatedLocation ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [jsx_runtime_1.jsx(InspectorSequenceSection_1.InspectorSequenceSection, { sequence: track.sequence, readOnlyStudio: readOnlyStudio, validatedLocation: validatedLocation, nodePathInfo: track.nodePathInfo, keyframeDisplayOffset: track.keyframeDisplayOffset, keyframePlaybackRate: track.keyframePlaybackRate, renderTransformControls: () => jsx_runtime_1.jsx(AlignmentControls_1.AlignmentControls, { track: track }) }), jsx_runtime_1.jsx(CollapsibleInspectorSection_1.CollapsibleInspectorSection, { collapsible: true, label: "Actions", sectionId: "sequence-actions", children: jsx_runtime_1.jsxs(common_1.InspectorQuickActionsSection, { children: [
                                 jsx_runtime_1.jsx(SplitSequenceQuickAction, { selection: sequenceSelection, track: track }), jsx_runtime_1.jsx(SequenceSourceQuickActions, { selection: sequenceSelection, track: track, validatedSource: validatedLocation.source })
                             ] }) })
                 ] })) : (jsx_runtime_1.jsx(common_1.InspectorMessage, { children: "Source controls unavailable" }))] }));

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

@@ -0,0 +1,8 @@
+import React from 'react';
+import type { SequenceNodePathInfo } from '../../helpers/get-timeline-sequence-sort-key';
+import type { TimelineTrackData } from '../../helpers/get-timeline-sequence-sort-key';
+export declare const SequenceWrapAction: React.FC<{
+    readonly nodePathInfo: SequenceNodePathInfo;
+    readonly sequence: TimelineTrackData['sequence'];
+    readonly sourceActionsDisabled: boolean;
+}>;

package/dist/components/InspectorPanel/SequenceWrapAction.js

@@ -0,0 +1,143 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SequenceWrapAction = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const remotion_1 = require("remotion");
+const colors_1 = require("../../helpers/colors");
+const caret_1 = require("../../icons/caret");
+const wrap_1 = require("../../icons/wrap");
+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,
+    height: 28,
+    margin: '0 4px',
+    width: 'calc(100% - 8px)',
+};
+const segmentStyle = {
+    fontSize: 13,
+    gap: 8,
+    justifyContent: 'flex-start',
+    padding: `0 ${InspectorPanelLayout_1.INSPECTOR_PANEL_HORIZONTAL_PADDING - 4}px`,
+    width: '100%',
+};
+const labelStyle = {
+    flex: 1,
+    fontFamily: 'sans-serif',
+    fontSize: 13,
+    lineHeight: '18px',
+    minWidth: 0,
+    overflow: 'hidden',
+    textAlign: 'left',
+    textOverflow: 'ellipsis',
+    userSelect: 'none',
+    WebkitUserSelect: 'none',
+    whiteSpace: 'nowrap',
+};
+const caretStyle = {
+    display: 'flex',
+    flexShrink: 0,
+    height: 12,
+    width: 12,
+};
+const SequenceWrapAction = ({ nodePathInfo, sequence, sourceActionsDisabled }) => {
+    const { width, height } = (0, remotion_1.useVideoConfig)();
+    const nodePathKey = JSON.stringify(nodePathInfo.sequenceSubscriptionKey);
+    const [eligibility, setEligibility] = (0, react_1.useState)(null);
+    const [busy, setBusy] = (0, react_1.useState)(false);
+    (0, react_1.useEffect)(() => {
+        setEligibility(null);
+        if (sourceActionsDisabled) {
+            return;
+        }
+        let cancelled = false;
+        const nodePath = JSON.parse(nodePathKey);
+        (0, wrap_jsx_node_api_1.wrapJsxNode)({
+            fileName: nodePath.absolutePath,
+            nodePath: nodePath.nodePath,
+            wrapper: null,
+            width: null,
+            height: null,
+        })
+            .then((result) => {
+            if (!cancelled && result.success) {
+                setEligibility({
+                    canWrap: result.canWrap,
+                    canWrapHtmlInCanvas: result.canWrapHtmlInCanvas,
+                });
+            }
+        })
+            .catch(() => undefined);
+        return () => {
+            cancelled = true;
+        };
+    }, [nodePathKey, sequence, sourceActionsDisabled]);
+    const onWrap = (0, react_1.useCallback)((wrapper) => {
+        if (busy || sourceActionsDisabled || !(eligibility === null || eligibility === void 0 ? void 0 : eligibility.canWrap)) {
+            return;
+        }
+        setBusy(true);
+        const nodePath = JSON.parse(nodePathKey);
+        (0, wrap_jsx_node_api_1.wrapJsxNode)({
+            fileName: nodePath.absolutePath,
+            nodePath: nodePath.nodePath,
+            wrapper,
+            width,
+            height,
+        })
+            .then((result) => {
+            if (!result.success) {
+                (0, NotificationCenter_1.showNotification)(result.reason, 4000);
+            }
+        })
+            .catch((error) => {
+            (0, NotificationCenter_1.showNotification)(error.message, 4000);
+        })
+            .finally(() => setBusy(false));
+    }, [busy, eligibility, height, nodePathKey, sourceActionsDisabled, width]);
+    const values = (0, react_1.useMemo)(() => wrapperNames.map((wrapper) => ({
+        type: 'item',
+        id: wrapper,
+        label: `<${wrapper}>`,
+        value: wrapper,
+        onClick: () => onWrap(wrapper),
+        keyHint: null,
+        leftItem: null,
+        subMenu: null,
+        quickSwitcherLabel: null,
+        disabled: busy ||
+            (wrapper === 'HtmlInCanvas' &&
+                (!(eligibility === null || eligibility === void 0 ? void 0 : eligibility.canWrapHtmlInCanvas) || !(0, remotion_1.isHtmlInCanvasSupported)())),
+    })), [busy, eligibility, onWrap]);
+    const segments = (0, react_1.useMemo)(() => [
+        {
+            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: 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,
+            tooltipLabel: null,
+            type: 'menu',
+            values,
+        },
+    ], [busy, nodePathInfo.numberOfSequencesWithThisNodePath, values]);
+    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 });
+};
+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/InspectorPanel/easing-inspector-selection.d.ts

@@ -1,7 +1,8 @@
 import type { CanUpdateSequencePropStatusKeyframed } from 'remotion';
 import type { SequenceNodePathInfo } from '../../helpers/get-timeline-sequence-sort-key';
-export declare const getEasingSelectionFromCurrentKeyframes: ({ keyframeDisplayOffset, nodePathInfo, propStatus, segmentIndex, }: {
+export declare const getEasingSelectionFromCurrentKeyframes: ({ keyframeDisplayOffset, keyframePlaybackRate, nodePathInfo, propStatus, segmentIndex, }: {
     readonly keyframeDisplayOffset: number;
+    readonly keyframePlaybackRate: number;
     readonly nodePathInfo: SequenceNodePathInfo;
     readonly propStatus: CanUpdateSequencePropStatusKeyframed;
     readonly segmentIndex: number;

package/dist/components/InspectorPanel/easing-inspector-selection.js

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.getEasingSelectionFromCurrentKeyframes = void 0;
 const get_timeline_keyframes_1 = require("../Timeline/get-timeline-keyframes");
-const getEasingSelectionFromCurrentKeyframes = ({ keyframeDisplayOffset, nodePathInfo, propStatus, segmentIndex, }) => {
+const getEasingSelectionFromCurrentKeyframes = ({ keyframeDisplayOffset, keyframePlaybackRate, nodePathInfo, propStatus, segmentIndex, }) => {
     const fromKeyframe = propStatus.keyframes[segmentIndex];
     const toKeyframe = propStatus.keyframes[segmentIndex + 1];
     if (!fromKeyframe || !toKeyframe) {
@@ -11,12 +11,13 @@ const getEasingSelectionFromCurrentKeyframes = ({ keyframeDisplayOffset, nodePat
     const resolvedKeyframeDisplayOffset = (0, get_timeline_keyframes_1.getKeyframeDisplayOffset)({
         propStatus,
         keyframeDisplayOffset,
+        keyframePlaybackRate,
     });
     return {
         type: 'easing',
         nodePathInfo,
-        fromFrame: fromKeyframe.frame + resolvedKeyframeDisplayOffset,
-        toFrame: toKeyframe.frame + resolvedKeyframeDisplayOffset,
+        fromFrame: fromKeyframe.frame / keyframePlaybackRate + resolvedKeyframeDisplayOffset,
+        toFrame: toKeyframe.frame / keyframePlaybackRate + resolvedKeyframeDisplayOffset,
         segmentIndex,
     };
 };

package/dist/components/InspectorPanel/keyframe-inspector-frame.d.ts

@@ -2,7 +2,8 @@ export declare const clampInspectorKeyframeDisplayFrame: ({ durationInFrames, fr
     readonly durationInFrames: number;
     readonly frame: number;
 }) => number;
-export declare const getInspectorKeyframeSourceFrame: ({ displayFrame, keyframeDisplayOffset, }: {
+export declare const getInspectorKeyframeSourceFrame: ({ displayFrame, keyframeDisplayOffset, keyframePlaybackRate, }: {
     readonly displayFrame: number;
     readonly keyframeDisplayOffset: number;
+    readonly keyframePlaybackRate: number;
 }) => number;

package/dist/components/InspectorPanel/keyframe-inspector-frame.js

@@ -8,7 +8,7 @@ const clampInspectorKeyframeDisplayFrame = ({ durationInFrames, frame, }) => {
     return Math.min(Math.max(Math.round(frame), 0), durationInFrames - 1);
 };
 exports.clampInspectorKeyframeDisplayFrame = clampInspectorKeyframeDisplayFrame;
-const getInspectorKeyframeSourceFrame = ({ displayFrame, keyframeDisplayOffset, }) => {
-    return displayFrame - keyframeDisplayOffset;
+const getInspectorKeyframeSourceFrame = ({ displayFrame, keyframeDisplayOffset, keyframePlaybackRate, }) => {
+    return (displayFrame - keyframeDisplayOffset) * keyframePlaybackRate;
 };
 exports.getInspectorKeyframeSourceFrame = getInspectorKeyframeSourceFrame;

package/dist/components/InspectorSequenceSection.d.ts

@@ -14,6 +14,7 @@ export declare const InspectorSequenceSection: React.FC<{
     readonly validatedLocation: CodePosition;
     readonly nodePathInfo: SequenceNodePathInfo;
     readonly keyframeDisplayOffset: number;
+    readonly keyframePlaybackRate: number;
     readonly renderTransformControls: () => React.ReactNode;
 }>;
 export {};

package/dist/components/InspectorSequenceSection.js

@@ -200,7 +200,7 @@ const hasSequenceControls = (sequence) => {
     return sequence.controls !== null;
 };
 exports.hasSequenceControls = hasSequenceControls;
-const InspectorSequenceSection = ({ sequence, readOnlyStudio, validatedLocation, nodePathInfo, keyframeDisplayOffset, renderTransformControls, }) => {
+const InspectorSequenceSection = ({ sequence, readOnlyStudio, validatedLocation, nodePathInfo, keyframeDisplayOffset, keyframePlaybackRate, renderTransformControls, }) => {
     var _a;
     var _b;
     const { tree, propStatuses, runtimeValues } = (0, use_timeline_expanded_tree_1.useTimelineExpandedTree)({
@@ -209,7 +209,7 @@ const InspectorSequenceSection = ({ sequence, readOnlyStudio, validatedLocation,
         includeTextContent: true,
         includeSourceControls: true,
     });
-    const { inspectorRevealRequest, selectedItems } = (0, TimelineSelection_1.useTimelineSelection)();
+    const { inspectorRevealRequest, selectedItems, selectItems } = (0, TimelineSelection_1.useTimelineSelection)();
     const selectedEffect = selectedItems.length === 1 &&
         (selectedItems[0].type === 'sequence-effect' ||
             selectedItems[0].type === 'sequence-effect-prop')
@@ -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;
@@ -521,14 +521,16 @@ const InspectorSequenceSection = ({ sequence, readOnlyStudio, validatedLocation,
             type: 'add-effect',
             clientId: previewServerState.clientId,
             fileName: validatedLocation.source,
-            nodePath: nodePathInfo.sequenceSubscriptionKey,
+            nodePathInfo,
+            selectItems,
         });
     }, [
         canAddEffect,
-        nodePathInfo.sequenceSubscriptionKey,
+        nodePathInfo,
         previewServerState,
         setAdditionalSectionExpanded,
         setSelectedModal,
+        selectItems,
         validatedLocation.source,
     ]);
     const onConvertBorderRadius = (0, react_1.useCallback)(() => {
@@ -561,21 +563,21 @@ 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, keyframeControlsMode: "inspector" }) }, JSON.stringify(node.nodePathInfo)));
+        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)));
     };
     const renderControlGroupHeader = (group) => {
         const expanded = isControlGroupExpanded(group);

package/dist/components/InspectorSourceLocation.js

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

package/dist/components/KeyboardShortcutsSettings.js

@@ -125,7 +125,7 @@ const key = {
 };
 const chordButton = {
     alignItems: 'center',
-    background: 'transparent',
+    background: colors_1.TRANSPARENT,
     border: 0,
     cursor: 'pointer',
     display: 'flex',
@@ -354,7 +354,7 @@ const KeyboardShortcutsSettings = () => {
                                                         });
                                                         setShortcutsEdited(true);
                                                         setRecording(null);
-                                                    }, children: recording === shortcut.actionId ? (jsx_runtime_1.jsx("span", { style: emptyShortcut, children: "Press shortcut\u2026" })) : (jsx_runtime_1.jsx(ShortcutChords, { values: shortcutValues })) }) }), jsx_runtime_1.jsx("span", { style: actionCell, children: jsx_runtime_1.jsx(InlineDropdown_1.InlineDropdown, { renderAction: (color) => jsx_runtime_1.jsx(caret_1.CaretDown, { color: color }), title: `Actions for ${shortcut.action}`, values: shortcutMenuItems, variant: "compact" }) })
+                                                    }, children: recording === shortcut.actionId ? (jsx_runtime_1.jsx("span", { style: emptyShortcut, children: "Press shortcut\u2026" })) : (jsx_runtime_1.jsx(ShortcutChords, { values: shortcutValues })) }) }), jsx_runtime_1.jsx("span", { style: actionCell, children: jsx_runtime_1.jsx(InlineDropdown_1.InlineDropdown, { renderAction: (color) => jsx_runtime_1.jsx(caret_1.CaretDown, { color: color }), "aria-label": `Actions for ${shortcut.action}`, values: shortcutMenuItems, variant: "compact" }) })
                                         ] }))] }, shortcut.action));
                         }) })
                 ] }, group.name))), (error !== null && error !== void 0 ? error : settingsError) ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [

package/dist/components/LicenseKeyValidation.js

@@ -102,9 +102,9 @@ const LicenseKeyDetailsDisplay = ({ details }) => {
     const projectUrl = `${PRO_HOST}/projects/${details.projectSlug}`;
     const usageUrl = `${projectUrl}/usage#client-renders-usage`;
     const hasActiveLicense = (0, exports.hasActiveCompanyLicense)(details);
-    return (jsx_runtime_1.jsxs("div", { children: [jsx_runtime_1.jsx(common_1.InspectorQuickAction, { disabled: false, onClick: () => window.open(usageUrl, '_blank', 'noopener,noreferrer'), renderIcon: (color) => (jsx_runtime_1.jsx(check_circle_filled_1.CheckCircleFilled, { style: { ...iconStyle, fill: color } })), style: actionStyle, title: "View license usage", children: jsx_runtime_1.jsxs("span", { style: actionContent, children: [
+    return (jsx_runtime_1.jsxs("div", { children: [jsx_runtime_1.jsx(common_1.InspectorQuickAction, { disabled: false, onClick: () => window.open(usageUrl, '_blank', 'noopener,noreferrer'), renderIcon: (color) => (jsx_runtime_1.jsx(check_circle_filled_1.CheckCircleFilled, { style: { ...iconStyle, fill: color } })), style: actionStyle, "aria-label": "View license usage", children: jsx_runtime_1.jsxs("span", { style: actionContent, children: [
                         jsx_runtime_1.jsxs("span", { style: actionText, children: ["Belongs to ", details.projectName] }), jsx_runtime_1.jsx("span", { style: actionLabel, children: "View usage" })
-                    ] }) }), jsx_runtime_1.jsx(common_1.InspectorQuickAction, { disabled: false, onClick: () => window.open(projectUrl, '_blank', 'noopener,noreferrer'), renderIcon: (color) => hasActiveLicense ? (jsx_runtime_1.jsx(check_circle_filled_1.CheckCircleFilled, { style: { ...iconStyle, fill: color } })) : (jsx_runtime_1.jsx(ErrorIcon, {})), style: actionStyle, title: "Manage Company License", children: jsx_runtime_1.jsxs("span", { style: actionContent, children: [
+                    ] }) }), jsx_runtime_1.jsx(common_1.InspectorQuickAction, { disabled: false, onClick: () => window.open(projectUrl, '_blank', 'noopener,noreferrer'), renderIcon: (color) => hasActiveLicense ? (jsx_runtime_1.jsx(check_circle_filled_1.CheckCircleFilled, { style: { ...iconStyle, fill: color } })) : (jsx_runtime_1.jsx(ErrorIcon, {})), style: actionStyle, "aria-label": "Manage Company License", children: jsx_runtime_1.jsxs("span", { style: actionContent, children: [
                         jsx_runtime_1.jsx("span", { style: hasActiveLicense ? actionText : inactiveLicenseText, children: hasActiveLicense
                                 ? 'Active Company License'
                                 : 'No active Company License' }), jsx_runtime_1.jsx("span", { style: actionLabel, children: "Manage" })

package/dist/components/LoopToggle.js

@@ -25,6 +25,6 @@ const LoopToggle = ({ loop, setLoop }) => {
     const onClick = (0, react_1.useCallback)(() => {
         (0, exports.toggleLoop)(setLoop);
     }, [setLoop]);
-    return (jsx_runtime_1.jsx(ActionTooltip_1.ActionTooltip, { label: accessibilityLabel, shortcut: shortcutsDisabled ? null : shortcut, delay: 800, dismissOnClick: false, children: jsx_runtime_1.jsx(ControlButton_1.ControlButton, { title: "", "aria-label": accessibilityLabel, "aria-keyshortcuts": shortcutsDisabled ? undefined : ariaShortcut || undefined, "aria-pressed": loop, onClick: onClick, style: buttonStyle, children: (color) => (jsx_runtime_1.jsx("svg", { viewBox: "0 0 512 512", style: { width: 18, height: 18 }, children: jsx_runtime_1.jsx("path", { fill: loop ? colors_1.BLUE : color, d: "M384 150.3V41.6l64 53.3v2l-64 53.3zM352 23.5V80H192C86 80 0 166 0 272c0 8.8 7.2 16 16 16s16-7.2 16-16c0-88.4 71.6-160 160-160h160v56.5c0 13 10.5 23.5 23.5 23.5 5.5 0 10.8-1.9 15-5.4l78-65c7.3-6.1 11.5-15.1 11.5-24.6v-2c0-9.5-4.2-18.5-11.5-24.6l-78-65c-4.2-3.5-9.5-5.4-15-5.4-13 0-23.5 10.5-23.5 23.5zM128 415.9v54.5l-64-53.3v-2l64-53.3v54.1zM160 400v-56.5c0-13-10.5-23.5-23.5-23.5-5.5 0-10.8 1.9-15 5.4l-78 65C36.2 396.5 32 405.5 32 415v2c0 9.5 4.2 18.5 11.5 24.6l78 65c4.2 3.5 9.5 5.4 15 5.4 13 0 23.5-10.5 23.5-23.5V432h160c106 0 192-86 192-192 0-8.8-7.2-16-16-16s-16 7.2-16 16c0 88.4-71.6 160-160 160H160z" }) })) }) }));
+    return (jsx_runtime_1.jsx(ActionTooltip_1.ActionTooltip, { label: accessibilityLabel, shortcut: shortcutsDisabled ? null : shortcut, delay: 800, dismissOnClick: false, children: jsx_runtime_1.jsx(ControlButton_1.ControlButton, { "aria-label": accessibilityLabel, "aria-keyshortcuts": shortcutsDisabled ? undefined : ariaShortcut || undefined, "aria-pressed": loop, onClick: onClick, style: buttonStyle, children: (color) => (jsx_runtime_1.jsx("svg", { viewBox: "0 0 512 512", style: { width: 18, height: 18 }, children: jsx_runtime_1.jsx("path", { fill: loop ? colors_1.BLUE : color, d: "M384 150.3V41.6l64 53.3v2l-64 53.3zM352 23.5V80H192C86 80 0 166 0 272c0 8.8 7.2 16 16 16s16-7.2 16-16c0-88.4 71.6-160 160-160h160v56.5c0 13 10.5 23.5 23.5 23.5 5.5 0 10.8-1.9 15-5.4l78-65c7.3-6.1 11.5-15.1 11.5-24.6v-2c0-9.5-4.2-18.5-11.5-24.6l-78-65c-4.2-3.5-9.5-5.4-15-5.4-13 0-23.5 10.5-23.5 23.5zM128 415.9v54.5l-64-53.3v-2l64-53.3v54.1zM160 400v-56.5c0-13-10.5-23.5-23.5-23.5-5.5 0-10.8 1.9-15 5.4l-78 65C36.2 396.5 32 405.5 32 415v2c0 9.5 4.2 18.5 11.5 24.6l78 65c4.2 3.5 9.5 5.4 15 5.4 13 0 23.5-10.5 23.5-23.5V432h160c106 0 192-86 192-192 0-8.8-7.2-16-16-16s-16 7.2-16 16c0 88.4-71.6 160-160 160H160z" }) })) }) }));
 };
 exports.LoopToggle = LoopToggle;

package/dist/components/Menu/MenuSubItem.js

@@ -124,9 +124,11 @@ const MenuSubItem = ({ label, leaveLeftSpace, leftItem, onActionChosen, id, sele
             });
         }
     }, [selected]);
-    return (jsx_runtime_1.jsx("div", { ref: ref, onPointerEnter: onPointerEnter, onPointerLeave: onPointerLeave, style: style, onPointerUp: onPointerUp, role: "button", className: is_menu_item_1.MENU_ITEM_CLASSNAME, children: jsx_runtime_1.jsxs(layout_1.Row, { align: "center", children: [leaveLeftSpace ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
+    return (jsx_runtime_1.jsx("div", { ref: ref, "aria-label": typeof label === 'string' ? label : undefined, onPointerEnter: onPointerEnter, onPointerLeave: onPointerLeave, style: style, onPointerUp: onPointerUp, role: "button", className: is_menu_item_1.MENU_ITEM_CLASSNAME, children: jsx_runtime_1.jsxs(layout_1.Row, { align: "center", children: [leaveLeftSpace ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
                         jsx_runtime_1.jsx("div", { style: leftSpace, children: leftItem }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 1 })
-                    ] })) : null, jsx_runtime_1.jsx("div", { style: labelStyle, title: typeof label === 'string' ? label : undefined, children: label }), ' ', jsx_runtime_1.jsx(layout_1.Spacing, { x: 2 }), subMenu ? jsx_runtime_1.jsx(caret_1.CaretRight, {}) : null, keyHint && !(0, use_keybinding_1.areKeyboardShortcutsDisabled)() ? (jsx_runtime_1.jsx("span", { style: keyHintCss, children: keyHint })) : null, portalStyle && subMenu
+                    ] })) : null, jsx_runtime_1.jsx("div", { style: labelStyle, children: label }),
+                " ",
+                jsx_runtime_1.jsx(layout_1.Spacing, { x: 2 }), subMenu ? jsx_runtime_1.jsx(caret_1.CaretRight, {}) : null, keyHint && !(0, use_keybinding_1.areKeyboardShortcutsDisabled)() ? (jsx_runtime_1.jsx("span", { style: keyHintCss, children: keyHint })) : null, portalStyle && subMenu
                     ? react_dom_1.default.createPortal(jsx_runtime_1.jsx(SubMenu_1.SubMenuComponent, { onQuitFullMenu: onQuitMenu, subMenu: subMenu, onQuitSubMenu: onQuitSubmenu, portalStyle: portalStyle, subMenuActivated: subMenuActivated }), (0, portals_1.getPortal)(currentZIndex))
                     : null] }) }));
 };

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

@@ -3,8 +3,8 @@ export declare const MENU_VERTICAL_PADDING = 4;
 export declare const SUBMENU_LEFT_INSET = -8;
 export declare const MAX_MENU_WIDTH = 400;
 export declare const MAX_MOBILE_MENU_WIDTH = 300;
-export declare const SHADOW_TOWARDS_BOTTOM = "0 2px 8px rgba(0, 0, 0, 0.5)";
-export declare const SHADOW_TOWARDS_TOP = "0 -2px 8px rgba(0, 0, 0, 0.5)";
+export declare const SHADOW_TOWARDS_BOTTOM = "0 2px 8px var(--remotion-studio-black-alpha-50)";
+export declare const SHADOW_TOWARDS_TOP = "0 -2px 8px var(--remotion-studio-black-alpha-50)";
 export declare const menuContainerTowardsBottom: React.CSSProperties;
 export declare const menuContainerTowardsTop: React.CSSProperties;
 export declare const fullScreenOverlay: React.CSSProperties;

package/dist/components/MenuBuildIndicator.js

@@ -53,7 +53,7 @@ const MenuBuildIndicator = ({ mobileLayout }) => {
             window.remotion_finishedBuilding = undefined;
         };
     }, []);
-    return (jsx_runtime_1.jsxs("div", { style: cwd, title: window.remotion_cwd, children: [
+    return (jsx_runtime_1.jsxs("div", { role: "group", style: cwd, "aria-label": window.remotion_cwd, children: [
             jsx_runtime_1.jsx(layout_1.Spacing, { x: mobileLayout ? 0.5 : 2 }), window.remotion_projectName, jsx_runtime_1.jsx(MenuCompositionName_1.MenuCompositionName, {}), jsx_runtime_1.jsx(layout_1.Spacing, { x: 1 }), jsx_runtime_1.jsx("div", { style: openInEditor, children: jsx_runtime_1.jsx(InspectorOpenInEditor_1.InspectorOpenInEditor, { location: folderLocation, locationType: "folder", showTooltips: true }) }), mobileLayout ? null : jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.5 }), mobileLayout ? (isBuilding ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
                     jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.5 }), jsx_runtime_1.jsx("div", { style: spinner, children: jsx_runtime_1.jsx(Spinner_1.Spinner, { duration: 0.5, size: spinnerSize, color: colors_1.WHITE_ALPHA_80 }) })
                 ] })) : null) : isBuilding ? (jsx_runtime_1.jsx("div", { style: spinner, children: jsx_runtime_1.jsx(Spinner_1.Spinner, { duration: 0.5, size: spinnerSize, color: colors_1.WHITE_ALPHA_80 }) })) : (jsx_runtime_1.jsx("div", { style: noSpinner }))] }));