@remotion/studio 4.0.527 → 4.0.529

package/dist/components/Splitter/SplitterElement.js

@@ -4,7 +4,6 @@ exports.SplitterElement = 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 SplitterContext_1 = require("./SplitterContext");
 const SplitterElement = ({ children, type, sticky }) => {
     const context = (0, react_1.useContext)(SplitterContext_1.SplitterContext);
@@ -44,7 +43,7 @@ const SplitterElement = ({ children, type, sticky }) => {
             left: (type === 'flexer' ? 0 : context.flexValue) * 100 + '%',
             width: (type === 'flexer' ? context.flexValue : 1 - context.flexValue) * 100 +
                 '%',
-            backgroundColor: (0, remotion_1.interpolateColors)((0, remotion_1.random)(context.flexValue), [0, 1], [colors_1.RED, 'blue']),
+            backgroundColor: (0, remotion_1.interpolateColors)((0, remotion_1.random)(context.flexValue), [0, 1], ['red', 'blue']),
         };
     }, [context.flexValue, type]);
     return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [

package/dist/components/StudioSettings.js

@@ -52,7 +52,7 @@ const initialSettings = {
 const ConfigNumber = ({ defaultValue, name, onChange, onChangeEnd, value, }) => {
     return (jsx_runtime_1.jsxs("div", { style: layout_2.optionRow, children: [
             jsx_runtime_1.jsx("div", { style: layout_2.label, children: name }), jsx_runtime_1.jsxs("div", { style: { ...layout_2.rightRow, gap: 6 }, children: [
-                    jsx_runtime_1.jsx(InputDragger_1.InputDragger, { "aria-label": name, buttonStyle: { textAlign: 'right', width: 140 }, formatter: () => value === null ? `Default (${defaultValue})` : String(value), min: 0, onTextChange: () => undefined, onValueChange: onChange, onValueChangeEnd: onChangeEnd, placeholder: `Default (${defaultValue})`, rightAlign: true, status: "ok", step: 1, value: value !== null && value !== void 0 ? value : defaultValue }), jsx_runtime_1.jsx(Button_1.Button, { disabled: value === null, onClick: () => onChangeEnd(null), size: "compact", style: { color: colors_1.LIGHT_TEXT }, title: `Use default (${defaultValue})`, children: jsx_runtime_1.jsx(undo_1.UndoIcon, { style: resetIcon }) })
+                    jsx_runtime_1.jsx(InputDragger_1.InputDragger, { "aria-label": name, buttonStyle: { textAlign: 'right', width: 140 }, formatter: () => value === null ? `Default (${defaultValue})` : String(value), min: 0, onTextChange: () => undefined, onValueChange: onChange, onValueChangeEnd: onChangeEnd, placeholder: `Default (${defaultValue})`, rightAlign: true, status: "ok", step: 1, value: value !== null && value !== void 0 ? value : defaultValue }), jsx_runtime_1.jsx(Button_1.Button, { disabled: value === null, onClick: () => onChangeEnd(null), size: "compact", style: { color: colors_1.LIGHT_TEXT }, "aria-label": `Use default (${defaultValue})`, children: jsx_runtime_1.jsx(undo_1.UndoIcon, { style: resetIcon }) })
                 ] })
         ] }));
 };
@@ -130,7 +130,7 @@ const StudioSettings = () => {
                     { label: 'Webpack', value: false },
                 ], value: settings.rspack }), jsx_runtime_1.jsxs("div", { style: layout_2.optionRow, children: [
                     jsx_runtime_1.jsxs("div", { style: layout_2.label, children: ["Cross-site isolation",
-                            jsx_runtime_1.jsx(InfoBubble_1.InfoBubble, { title: "About cross-site isolation", horizontalAlignment: "right", children: jsx_runtime_1.jsx("div", { style: {
+                            jsx_runtime_1.jsx(InfoBubble_1.InfoBubble, { "aria-label": "About cross-site isolation", horizontalAlignment: "right", children: jsx_runtime_1.jsx("div", { style: {
                                         padding: 12,
                                         maxWidth: 280,
                                         fontSize: 14,

package/dist/components/TimeValue.js

@@ -49,7 +49,7 @@ const currentTimeButtonStyle = {
     padding: 0,
     border: 'none',
     lineHeight: '21px',
-    '--remotion-cli-internals-blue-hovered': colors_1.WHITE,
+    '--remotion-studio-blue-hovered': colors_1.WHITE,
 };
 const currentTimeSubtitle = {
     ...(0, hoverable_1.hoverableStyle)({
@@ -124,9 +124,7 @@ const TimeValue = () => {
     }
     return (jsx_runtime_1.jsxs("div", { style: text, children: [
             jsx_runtime_1.jsxs("div", { style: currentTimeStack, children: [
-                    jsx_runtime_1.jsx(InputDragger_1.InputDragger, { ref: ref, "aria-label": String(frame), value: frame, onTextChange: onTextChange, onValueChange: onValueChange, formatter: formatter, formatterStyle: currentTimeTypography, buttonStyle: currentTimeButtonStyle, rightAlign: false, status: "ok", style: currentTimeInputStyle }), jsx_runtime_1.jsx("button", { type: "button", className: `${hoverable_1.HOVERABLE_CLASS_NAME} ${hoverable_1.FOCUS_VISIBLE_ONLY_CLASS_NAME}`, style: currentTimeSubtitle, onClick: toggleTickFormat, "aria-label": "Show timeline ticks as frames", "aria-pressed": showFrames, title: showFrames
-                            ? 'Show timeline ticks as timecode'
-                            : 'Show timeline ticks as frames', children: frame })
+                    jsx_runtime_1.jsx(InputDragger_1.InputDragger, { ref: ref, "aria-label": String(frame), value: frame, onTextChange: onTextChange, onValueChange: onValueChange, formatter: formatter, formatterStyle: currentTimeTypography, buttonStyle: currentTimeButtonStyle, rightAlign: false, status: "ok", style: currentTimeInputStyle }), jsx_runtime_1.jsx("button", { type: "button", className: `${hoverable_1.HOVERABLE_CLASS_NAME} ${hoverable_1.FOCUS_VISIBLE_ONLY_CLASS_NAME}`, style: currentTimeSubtitle, onClick: toggleTickFormat, "aria-label": "Show timeline ticks as frames", "aria-pressed": showFrames, children: frame })
                 ] }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 2 }), jsx_runtime_1.jsx(layout_1.Flex, {}), jsx_runtime_1.jsx(TimelineZoomControls_1.TimelineZoomControls, { sliderMaxWidth: 80 }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.5 })
         ] }));
 };

package/dist/components/Timeline/EasingEditorModal.js

@@ -395,10 +395,10 @@ const EasingGraphScaffold = ({ labels }) => {
     const bottomLabelWidth = getEasingGraphLabelWidth(labels.start);
     const topLabelWidth = getEasingGraphLabelWidth(labels.end);
     return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
-            jsx_runtime_1.jsx("line", { x1: PLOT_LEFT, y1: yZero, x2: PLOT_LEFT + PLOT_WIDTH, y2: yZero, stroke: EASING_GRAPH_GUIDE_COLOR, strokeWidth: 1 }), jsx_runtime_1.jsx("line", { x1: PLOT_LEFT, y1: yOne, x2: PLOT_LEFT + PLOT_WIDTH, y2: yOne, stroke: EASING_GRAPH_GUIDE_COLOR, strokeWidth: 1 }), jsx_runtime_1.jsx("foreignObject", { x: PLOT_LEFT - EASING_GRAPH_LABEL_HORIZONTAL_PADDING, y: yOne - EASING_GRAPH_LABEL_HEIGHT / 2, width: topLabelWidth, height: EASING_GRAPH_LABEL_HEIGHT, children: jsx_runtime_1.jsx("div", { style: getEasingGraphLabelStyle('left'), title: labels.end, children: labels.end }) }), jsx_runtime_1.jsx("foreignObject", { x: PLOT_LEFT +
+            jsx_runtime_1.jsx("line", { x1: PLOT_LEFT, y1: yZero, x2: PLOT_LEFT + PLOT_WIDTH, y2: yZero, stroke: EASING_GRAPH_GUIDE_COLOR, strokeWidth: 1 }), jsx_runtime_1.jsx("line", { x1: PLOT_LEFT, y1: yOne, x2: PLOT_LEFT + PLOT_WIDTH, y2: yOne, stroke: EASING_GRAPH_GUIDE_COLOR, strokeWidth: 1 }), jsx_runtime_1.jsx("foreignObject", { x: PLOT_LEFT - EASING_GRAPH_LABEL_HORIZONTAL_PADDING, y: yOne - EASING_GRAPH_LABEL_HEIGHT / 2, width: topLabelWidth, height: EASING_GRAPH_LABEL_HEIGHT, children: jsx_runtime_1.jsx("div", { role: "group", style: getEasingGraphLabelStyle('left'), "aria-label": labels.end, children: labels.end }) }), jsx_runtime_1.jsx("foreignObject", { x: PLOT_LEFT +
                     PLOT_WIDTH -
                     bottomLabelWidth +
-                    EASING_GRAPH_LABEL_HORIZONTAL_PADDING, y: yZero - EASING_GRAPH_LABEL_HEIGHT / 2, width: bottomLabelWidth, height: EASING_GRAPH_LABEL_HEIGHT, children: jsx_runtime_1.jsx("div", { style: getEasingGraphLabelStyle('right'), title: labels.start, children: labels.start }) })
+                    EASING_GRAPH_LABEL_HORIZONTAL_PADDING, y: yZero - EASING_GRAPH_LABEL_HEIGHT / 2, width: bottomLabelWidth, height: EASING_GRAPH_LABEL_HEIGHT, children: jsx_runtime_1.jsx("div", { role: "group", style: getEasingGraphLabelStyle('right'), "aria-label": labels.start, children: labels.start }) })
         ] }));
 };
 const EasingPresetButton = ({ currentEasing, disabled, onClick, preset }) => {
@@ -419,7 +419,7 @@ const EasingPresetButton = ({ currentEasing, disabled, onClick, preset }) => {
     const handleClick = (0, react_1.useCallback)(() => {
         onClick(preset.easing);
     }, [onClick, preset.easing]);
-    return (jsx_runtime_1.jsx("button", { type: "button", style: style, title: preset.label, "aria-label": `Apply ${preset.label} easing`, disabled: disabled, onClick: handleClick, onPointerEnter: onPointerEnter, onPointerLeave: onPointerLeave, children: jsx_runtime_1.jsx(exports.EasingPresetPreview, { color: selected || hovered ? colors_1.WHITE : colors_1.LIGHT_TEXT, easing: preset.easing }) }));
+    return (jsx_runtime_1.jsx("button", { type: "button", style: style, "aria-label": `Apply ${preset.label} easing`, disabled: disabled, onClick: handleClick, onPointerEnter: onPointerEnter, onPointerLeave: onPointerLeave, children: jsx_runtime_1.jsx(exports.EasingPresetPreview, { color: selected || hovered ? colors_1.WHITE : colors_1.LIGHT_TEXT, easing: preset.easing }) }));
 };
 const EasingEditor = ({ state, renderHeader }) => {
     var _a, _b;

package/dist/components/Timeline/LoopedTimelineIndicators.d.ts

@@ -1,6 +1,7 @@
 import React from 'react';
 export declare const LoopedTimelineIndicator: React.FC<{
     readonly loops: number;
+    readonly phase: number;
     readonly fullWidth: number;
     readonly visibleOffset: number;
     readonly visibleWidth: number;

package/dist/components/Timeline/LoopedTimelineIndicators.js

@@ -7,18 +7,19 @@ const LoopedIndicator_1 = require("./LoopedIndicator");
 const row = {
     overflow: 'hidden',
 };
-const LoopedTimelineIndicator = ({ loops, fullWidth, visibleOffset, visibleWidth }) => {
-    if (loops <= 1 || fullWidth <= 0 || visibleWidth <= 0) {
+const LoopedTimelineIndicator = ({ loops, phase, fullWidth, visibleOffset, visibleWidth }) => {
+    if (loops + phase <= 1 || fullWidth <= 0 || visibleWidth <= 0) {
         return null;
     }
     const loopWidth = fullWidth / loops;
-    const lastBoundaryIndex = Math.ceil(loops) - 1;
-    const firstVisibleBoundaryIndex = Math.max(1, Math.floor(visibleOffset / loopWidth));
-    const lastVisibleBoundaryIndex = Math.min(lastBoundaryIndex, Math.ceil((visibleOffset + visibleWidth) / loopWidth));
+    const phaseWidth = phase * loopWidth;
+    const lastBoundaryIndex = Math.ceil(loops + phase) - 1;
+    const firstVisibleBoundaryIndex = Math.max(1, Math.floor((visibleOffset + phaseWidth) / loopWidth));
+    const lastVisibleBoundaryIndex = Math.min(lastBoundaryIndex, Math.ceil((visibleOffset + visibleWidth + phaseWidth) / loopWidth));
     const visibleBoundaryCount = Math.max(0, lastVisibleBoundaryIndex - firstVisibleBoundaryIndex + 1);
     const boundaries = new Array(visibleBoundaryCount)
         .fill(true)
-        .map((_, index) => (firstVisibleBoundaryIndex + index) * loopWidth);
+        .map((_, index) => (firstVisibleBoundaryIndex + index) * loopWidth - phaseWidth);
     return (jsx_runtime_1.jsx(remotion_1.Internals.AbsoluteFillElement, { style: row, children: boundaries.map((boundary) => {
             return (jsx_runtime_1.jsx("div", { style: {
                     position: 'absolute',

package/dist/components/Timeline/TimelineArrayField.js

@@ -67,7 +67,7 @@ const getFallbackItemValue = (field) => {
         return [0.5, 0.5];
     }
     if (field.item.type === 'color') {
-        return colors_1.BLACK_FULL_HEX;
+        return '#000000';
     }
     if (field.item.type === 'enum') {
         const [firstVariant] = field.item.variants;
@@ -205,8 +205,8 @@ const TimelineArrayField = ({ field, effectiveValue, onSave, onDragValueChange,
     return (jsx_runtime_1.jsxs("span", { style: container, children: [items.map((_item, index) => {
                 const itemKey = itemKeys.current[index];
                 return (jsx_runtime_1.jsxs("span", { style: itemContainer, children: [
-                        jsx_runtime_1.jsx("span", { style: itemLabel, children: index }), jsx_runtime_1.jsx(ItemEditor, { arrayField: arrayField, field: field, index: index, items: items, onDragEnd: onDragEnd, onDragValueChange: onDragValueChange, onSave: onSave }), jsx_runtime_1.jsx("button", { disabled: !canRemove, onClick: () => onRemove(index), style: canRemove ? button : disabledButton, title: `Remove item ${index}`, type: "button", children: "-" })
+                        jsx_runtime_1.jsx("span", { style: itemLabel, children: index }), jsx_runtime_1.jsx(ItemEditor, { arrayField: arrayField, field: field, index: index, items: items, onDragEnd: onDragEnd, onDragValueChange: onDragValueChange, onSave: onSave }), jsx_runtime_1.jsx("button", { disabled: !canRemove, onClick: () => onRemove(index), style: canRemove ? button : disabledButton, "aria-label": `Remove item ${index}`, type: "button", children: "-" })
                     ] }, itemKey));
-            }), canAdd ? (jsx_runtime_1.jsx("span", { style: addButtonRow, children: jsx_runtime_1.jsx("button", { type: "button", style: button, onClick: onAdd, title: "Add item", children: "+" }) })) : null] }));
+            }), canAdd ? (jsx_runtime_1.jsx("span", { style: addButtonRow, children: jsx_runtime_1.jsx("button", { type: "button", style: button, onClick: onAdd, "aria-label": "Add item", children: "+" }) })) : null] }));
 };
 exports.TimelineArrayField = TimelineArrayField;

package/dist/components/Timeline/TimelineAssetField.js

@@ -229,7 +229,7 @@ const TimelineAssetField = ({ field, effectiveValue, propStatus, onSave, onDragV
         selectFile,
         setSelectedModal,
     ]);
-    const action = (jsx_runtime_1.jsx(InlineAction_1.InlineAction, { variant: null, onClick: openAssetSelection, disabled: window.remotion_isReadOnlyStudio, title: "Change source", renderAction: (color) => jsx_runtime_1.jsx(pen_1.PenIcon, { color: color, style: penIcon }) }));
+    const action = (jsx_runtime_1.jsx(InlineAction_1.InlineAction, { variant: null, onClick: openAssetSelection, disabled: window.remotion_isReadOnlyStudio, "aria-label": "Change source", renderAction: (color) => jsx_runtime_1.jsx(pen_1.PenIcon, { color: color, style: penIcon }) }));
     if (imageLinkInfo !== null) {
         const linkInfo = imageLinkInfo;
         let name;
@@ -258,7 +258,7 @@ const TimelineAssetField = ({ field, effectiveValue, propStatus, onSave, onDragV
         const opensSource = linkInfo.kind === 'local' &&
             inlineSourceAction !== null &&
             inlineSourceAction.onClick !== null;
-        const title = (_b = inlineSourceAction === null || inlineSourceAction === void 0 ? void 0 : inlineSourceAction.title) !== null && _b !== void 0 ? _b : linkInfo.title;
+        const sourceDescription = (_b = inlineSourceAction === null || inlineSourceAction === void 0 ? void 0 : inlineSourceAction['aria-label']) !== null && _b !== void 0 ? _b : linkInfo.title;
         const onPreviewClick = opensSource
             ? inlineSourceAction.onClick
             : openAssetSelection;
@@ -277,7 +277,7 @@ const TimelineAssetField = ({ field, effectiveValue, propStatus, onSave, onDragV
                 hoverColor: previewDisabled ? colors_1.LIGHT_TEXT : colors_1.WHITE,
             }),
         };
-        const previewAction = (jsx_runtime_1.jsxs("button", { "aria-label": previewLabel, className: `${hoverable_1.HOVERABLE_CLASS_NAME} ${hoverable_1.FOCUS_VISIBLE_ONLY_CLASS_NAME}`, disabled: previewDisabled, onClick: onPreviewClick, style: previewButtonStyle, title: title, type: "button", children: [
+        const previewAction = (jsx_runtime_1.jsxs("button", { "aria-label": previewLabel, "aria-description": sourceDescription, className: `${hoverable_1.HOVERABLE_CLASS_NAME} ${hoverable_1.FOCUS_VISIBLE_ONLY_CLASS_NAME}`, disabled: previewDisabled, onClick: onPreviewClick, style: previewButtonStyle, type: "button", children: [
                 jsx_runtime_1.jsx("span", { style: thumbnailContainer, children: jsx_runtime_1.jsx("img", { alt: "", draggable: false, src: previewSrc, style: thumbnail }) }), jsx_runtime_1.jsxs("span", { style: imageAssetInfo, children: [
                         jsx_runtime_1.jsx("span", { style: imageAssetName, children: name }), source === null ? null : (jsx_runtime_1.jsx("span", { style: imageAssetSource, children: source }))] })
             ] }));

package/dist/components/Timeline/TimelineClipboardKeybindings.js

@@ -560,7 +560,6 @@ const TimelineClipboardKeybindings = () => {
                         }
                         const nextSelection = (0, delete_selected_timeline_item_1.getTimelineSelectionAfterDeletingItems)({
                             selections: selectedItems,
-                            propStatuses,
                         });
                         if (nextSelection.length === 0) {
                             clearSelection();

package/dist/components/Timeline/TimelineColorField.js

@@ -31,7 +31,7 @@ const TimelineColorField = ({ field, effectiveValue, propStatus, onSave, onDragV
     const currentValue = typeof effectiveValue === 'string'
         ? effectiveValue
         : field.fieldSchema.type === 'color'
-            ? ((_a = field.fieldSchema.default) !== null && _a !== void 0 ? _a : colors_1.BLACK_HEX)
+            ? ((_a = field.fieldSchema.default) !== null && _a !== void 0 ? _a : '#000')
             : '';
     const onChange = (0, react_1.useCallback)((next) => {
         onDragValueChange(next);
@@ -44,9 +44,9 @@ const TimelineColorField = ({ field, effectiveValue, propStatus, onSave, onDragV
     }, [onSave, onDragEnd, propStatus]);
     if (currentValue === 'none') {
         return (jsx_runtime_1.jsxs("span", { style: containerStyle, children: [
-                jsx_runtime_1.jsx("span", { style: noneLabelStyle, children: "None" }), jsx_runtime_1.jsx("button", { type: "button", style: setButtonStyle, title: `Set ${(_b = field.description) !== null && _b !== void 0 ? _b : field.key} to gray`, onClick: () => onChangeComplete(DEFAULT_SET_COLOR), children: "Set" })
+                jsx_runtime_1.jsx("span", { style: noneLabelStyle, children: "None" }), jsx_runtime_1.jsx("button", { type: "button", style: setButtonStyle, "aria-label": `Set ${(_b = field.description) !== null && _b !== void 0 ? _b : field.key} to gray`, onClick: () => onChangeComplete(DEFAULT_SET_COLOR), children: "Set" })
             ] }));
     }
-    return (jsx_runtime_1.jsx("span", { style: containerStyle, children: jsx_runtime_1.jsx(ColorPicker_1.ColorPicker, { value: currentValue, status: "ok", onChange: onChange, onChangeComplete: onChangeComplete, width: SWATCH_WIDTH, height: SWATCH_HEIGHT, disabled: false, name: field.key, title: currentValue }) }));
+    return (jsx_runtime_1.jsx("span", { style: containerStyle, children: jsx_runtime_1.jsx(ColorPicker_1.ColorPicker, { value: currentValue, status: "ok", onChange: onChange, onChangeComplete: onChangeComplete, width: SWATCH_WIDTH, height: SWATCH_HEIGHT, disabled: false, name: field.key, "aria-label": currentValue }) }));
 };
 exports.TimelineColorField = TimelineColorField;

package/dist/components/Timeline/TimelineDragHandler.js

@@ -122,7 +122,7 @@ const TimelineDragHandlerInner = () => {
         shouldApplyCssTransforms: true,
     });
     const { isHighestContext } = (0, z_index_1.useZIndex)();
-    const setFrame = remotion_1.Internals.useTimelineSetFrame();
+    const seekFrame = remotion_1.Internals.Timeline.useTimelineSeekFrame();
     const width = (0, timeline_scroll_logic_1.getTimelineContentWidth)();
     const left = (_a = size === null || size === void 0 ? void 0 : size.left) !== null && _a !== void 0 ? _a : 0;
     const [dragging, setDragging] = (0, react_1.useState)({
@@ -238,7 +238,7 @@ const TimelineDragHandlerInner = () => {
             width,
             extrapolate: 'clamp',
         });
-        setFrame((c) => {
+        seekFrame((c) => {
             if (c[videoConfig.id] === frame) {
                 return c;
             }
@@ -249,7 +249,7 @@ const TimelineDragHandlerInner = () => {
         if (dragging.wasPlaying) {
             play();
         }
-    }, [dragging, left, play, videoConfig, setFrame, width]);
+    }, [dragging, left, play, videoConfig, seekFrame, width]);
     const onPointerCancelScrubbing = (0, react_1.useCallback)(() => {
         var _a;
         (_a = autoScroller.current) === null || _a === void 0 ? void 0 : _a.stop();

package/dist/components/Timeline/TimelineDuplicateCount.js

@@ -23,6 +23,6 @@ const badgeStyle = {
 };
 const TimelineDuplicateCount = ({ count }) => {
     const label = `${count} other programmatically duplicated ${count === 1 ? 'instance is' : 'instances are'} hidden`;
-    return (jsx_runtime_1.jsxs("span", { style: badgeStyle, title: label, "aria-label": label, children: ["+", count] }));
+    return (jsx_runtime_1.jsxs("span", { role: "group", style: badgeStyle, "aria-label": label, children: ["+", count] }));
 };
 exports.TimelineDuplicateCount = TimelineDuplicateCount;

package/dist/components/Timeline/TimelineEffectItem.js

@@ -351,7 +351,7 @@ const TimelineEffectItem = ({ label, nodePathInfo, effectIndex, effectSchema, do
         };
     }, [dropIndicator]);
     const row = (jsx_runtime_1.jsx(TimelineRowChrome_1.TimelineRowChrome, { depth: rowDepth, eye: canToggle ? (jsx_runtime_1.jsx(TimelineLayerEye_1.TimelineLayerEye, { type: "effect", hidden: isDisabled, onInvoked: onToggle })) : (jsx_runtime_1.jsx(TimelineLayerEye_1.TimelineLayerEyeSpacer, {})), arrow: labelNextToToggle ? null : jsx_runtime_1.jsx(TimelineExpandArrowButton_1.TimelineExpandArrowSpacer, {}), style: rowStyle, selected: selection.selected, selectable: selection.selectable, onSelect: selection.onSelect, showSelectedBackground: true, containsSelection: containsSelection, outerHeight: null, children: jsx_runtime_1.jsxs("div", { style: labelContainerStyle, children: [
-                jsx_runtime_1.jsx("span", { title: label, style: labelStyle, children: label }), jsx_runtime_1.jsx(TimelineExpandArrowButton_1.TimelineExpandArrowButton, { isExpanded: isExpanded, onClick: () => toggleTrack(nodePathInfo), label: `${label} section`, disabled: false })
+                jsx_runtime_1.jsx("span", { role: "group", "aria-label": label, style: labelStyle, children: label }), jsx_runtime_1.jsx(TimelineExpandArrowButton_1.TimelineExpandArrowButton, { isExpanded: isExpanded, onClick: () => toggleTrack(nodePathInfo), label: `${label} section`, disabled: false })
             ] }) }));
     const draggableRow = canReorder ? (jsx_runtime_1.jsxs("div", { draggable: true, onDragStart: onDragStart, onDragEnd: onDragEnd, onDragOver: onDragOver, onDragLeave: onDragLeave, onDrop: onDrop, style: reorderWrapper, children: [reorderLineStyle ? jsx_runtime_1.jsx("div", { style: reorderLineStyle }) : null, row] })) : (row);
     return previewConnected ? (jsx_runtime_1.jsx(ContextMenu_1.ContextMenu, { getItems: getContextMenuItems, children: draggableRow })) : (draggableRow);

package/dist/components/Timeline/TimelineEffectPropItem.d.ts

@@ -18,6 +18,7 @@ export declare const TimelineEffectPropItem: React.FC<{
     readonly nodePath: SequencePropsSubscriptionKey;
     readonly nodePathInfo: SequenceNodePathInfo;
     readonly keyframeDisplayOffset: number;
+    readonly keyframePlaybackRate: number;
     readonly keyframeControlsMode: TimelineKeyframeControlsMode;
     readonly revealInInspector: boolean;
     readonly runtimeValueStore: RuntimeValueStore | null;

package/dist/components/Timeline/TimelineEffectPropItem.js

@@ -228,11 +228,16 @@ const TimelineEffectPropValue = ({ field, nodePath, validatedLocation, sourceFra
     return (jsx_runtime_1.jsx(TimelineSchemaField_1.TimelineFieldValue, { field: field, propStatus: propStatus, onSave: onSave, onDragValueChange: onDragValueChange, onDragEnd: onDragEnd, effectiveValue: effectiveValue, scaleLockNodePath: null }));
 };
 exports.TimelineEffectPropValue = TimelineEffectPropValue;
-const TimelineEffectPropValueAtCurrentFrame = ({ field, nodePath, validatedLocation, keyframeDisplayOffset, runtimeValueStore, }) => {
+const TimelineEffectPropValueAtCurrentFrame = ({ field, nodePath, validatedLocation, keyframeDisplayOffset, keyframePlaybackRate, propStatus, runtimeValueStore, }) => {
     const timelinePosition = remotion_1.Internals.Timeline.useTimelinePosition();
-    return (jsx_runtime_1.jsx(exports.TimelineEffectPropValue, { field: field, nodePath: nodePath, validatedLocation: validatedLocation, sourceFrame: timelinePosition - keyframeDisplayOffset, runtimeValueStore: runtimeValueStore }));
+    return (jsx_runtime_1.jsx(exports.TimelineEffectPropValue, { field: field, nodePath: nodePath, validatedLocation: validatedLocation, sourceFrame: (0, get_timeline_keyframes_1.getKeyframeSourceFrame)({
+            displayFrame: timelinePosition,
+            keyframeDisplayOffset,
+            keyframePlaybackRate,
+            propStatus,
+        }), runtimeValueStore: runtimeValueStore }));
 };
-const TimelineEffectPropItem = ({ field, validatedLocation, rowDepth, nodePath, nodePathInfo, keyframeDisplayOffset, keyframeControlsMode, revealInInspector, runtimeValueStore, }) => {
+const TimelineEffectPropItem = ({ field, validatedLocation, rowDepth, nodePath, nodePathInfo, keyframeDisplayOffset, keyframePlaybackRate, keyframeControlsMode, revealInInspector, runtimeValueStore, }) => {
     var _a;
     var _b;
     const { previewServerState } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
@@ -241,6 +246,7 @@ const TimelineEffectPropItem = ({ field, validatedLocation, rowDepth, nodePath,
     const { propStatuses } = (0, react_1.useContext)(remotion_1.Internals.VisualModePropStatusesContext);
     const { getEffectDragOverrides } = (0, react_1.useContext)(remotion_1.Internals.VisualModeDragOverridesContext);
     const selection = (0, TimelineSelection_1.useTimelineRowSelection)(nodePathInfo, revealInInspector);
+    const containsSelection = (0, TimelineSelection_1.useTimelineRowContainsSelection)(nodePathInfo);
     const style = (0, react_1.useMemo)(() => {
         return field.typeName === 'text-content'
             ? fieldRowBase
@@ -257,6 +263,7 @@ const TimelineEffectPropItem = ({ field, validatedLocation, rowDepth, nodePath,
     const resolvedKeyframeDisplayOffset = (0, get_timeline_keyframes_1.getKeyframeDisplayOffset)({
         propStatus,
         keyframeDisplayOffset,
+        keyframePlaybackRate,
     });
     const dragOverrideValue = (0, react_1.useMemo)(() => {
         const overrides = getEffectDragOverrides(nodePath, field.effectIndex);
@@ -273,7 +280,7 @@ const TimelineEffectPropItem = ({ field, validatedLocation, rowDepth, nodePath,
                 propStatus,
                 selected: selection.selected,
                 keyframable,
-            })) ? (jsx_runtime_1.jsx(TimelineKeyframeControls_1.TimelineKeyframeControls, { fieldKey: field.key, propStatus: propStatus, nodePath: nodePath, fileName: validatedLocation.source, keyframeDisplayOffset: keyframeDisplayOffset, defaultValue: field.fieldSchema.default, dragOverrideValue: dragOverrideValue, schema: field.effectSchema, effectIndex: field.effectIndex, nodePathInfo: nodePathInfo, mode: keyframeControlsMode })) : null;
+            })) ? (jsx_runtime_1.jsx(TimelineKeyframeControls_1.TimelineKeyframeControls, { fieldKey: field.key, propStatus: propStatus, nodePath: nodePath, fileName: validatedLocation.source, keyframeDisplayOffset: keyframeDisplayOffset, keyframePlaybackRate: keyframePlaybackRate, defaultValue: field.fieldSchema.default, dragOverrideValue: dragOverrideValue, schema: field.effectSchema, effectIndex: field.effectIndex, nodePathInfo: nodePathInfo, mode: keyframeControlsMode })) : null;
     const canResetToDefault = (0, react_1.useMemo)(() => {
         if (!propStatus || propStatus.status === 'computed') {
             return false;
@@ -361,7 +368,7 @@ const TimelineEffectPropItem = ({ field, validatedLocation, rowDepth, nodePath,
             property: field.key,
         }).catch(() => undefined);
     }, [canOpenInEditor, defaultEditorId, field.key, validatedLocation]);
-    const row = (jsx_runtime_1.jsx(TimelineRowChrome_1.TimelineRowChrome, { depth: rowDepth, eye: jsx_runtime_1.jsx(TimelineLayerEye_1.TimelineLayerEyeSpacer, {}), keyframeControls: keyframeControls, arrow: jsx_runtime_1.jsx(TimelineExpandArrowButton_1.TimelineExpandArrowSpacer, {}), style: style, selected: selection.selected, selectable: selection.selectable, onSelect: selection.onSelect, onDoubleClick: onPropertyDoubleClick, showSelectedBackground: true, containsSelection: false, outerHeight: null, children: jsx_runtime_1.jsx(TimelineFieldRowContent_1.TimelineFieldRowContent, { field: field, rowDepth: rowDepth, selected: selection.selected, children: jsx_runtime_1.jsx(TimelineEffectPropValueAtCurrentFrame, { field: field, nodePath: nodePath, validatedLocation: validatedLocation, keyframeDisplayOffset: resolvedKeyframeDisplayOffset, runtimeValueStore: runtimeValueStore }) }) }));
+    const row = (jsx_runtime_1.jsx(TimelineRowChrome_1.TimelineRowChrome, { depth: rowDepth, eye: jsx_runtime_1.jsx(TimelineLayerEye_1.TimelineLayerEyeSpacer, {}), keyframeControls: keyframeControls, arrow: jsx_runtime_1.jsx(TimelineExpandArrowButton_1.TimelineExpandArrowSpacer, {}), style: style, selected: selection.selected, selectable: selection.selectable, onSelect: selection.onSelect, onDoubleClick: onPropertyDoubleClick, showSelectedBackground: true, containsSelection: containsSelection, outerHeight: null, children: jsx_runtime_1.jsx(TimelineFieldRowContent_1.TimelineFieldRowContent, { field: field, rowDepth: rowDepth, selected: selection.selected || containsSelection, children: jsx_runtime_1.jsx(TimelineEffectPropValueAtCurrentFrame, { field: field, nodePath: nodePath, validatedLocation: validatedLocation, keyframeDisplayOffset: resolvedKeyframeDisplayOffset, keyframePlaybackRate: keyframePlaybackRate, propStatus: propStatus, runtimeValueStore: runtimeValueStore }) }) }));
     return jsx_runtime_1.jsx(ContextMenu_1.ContextMenu, { getItems: getContextMenuItems, children: row });
 };
 exports.TimelineEffectPropItem = TimelineEffectPropItem;

package/dist/components/Timeline/TimelineEnumField.js

@@ -34,6 +34,6 @@ const TimelineEnumField = ({ field, propStatus, effectiveValue, onSave, onDragVa
             disabled: false,
         }));
     }, [variantKeys, onSelect]);
-    return (jsx_runtime_1.jsx(ComboBox_1.Combobox, { size: "small", title: field.key, selectedId: current, values: items }));
+    return (jsx_runtime_1.jsx(ComboBox_1.Combobox, { size: "small", "aria-label": field.key, selectedId: current, values: items }));
 };
 exports.TimelineEnumField = TimelineEnumField;

package/dist/components/Timeline/TimelineExpandedRow.d.ts

@@ -16,6 +16,7 @@ type TimelineExpandedRowProps = {
     readonly nodePath: SequencePropsSubscriptionKey;
     readonly schema: InteractivitySchema;
     readonly keyframeDisplayOffset: number;
+    readonly keyframePlaybackRate: number;
     readonly keyframeControlsMode: TimelineKeyframeControlsMode;
 };
 export declare const TimelineExpandedRow: React.NamedExoticComponent<TimelineExpandedRowProps>;

package/dist/components/Timeline/TimelineExpandedRow.js

@@ -22,10 +22,11 @@ const rowLabel = {
     userSelect: 'none',
     WebkitUserSelect: 'none',
 };
-const TimelineExpandedRowInner = ({ node, depth, nestedDepth, rowDepthBase, getIsExpanded, toggleTrack, validatedLocation, nodePath, schema, keyframeDisplayOffset, keyframeControlsMode, }) => {
+const TimelineExpandedRowInner = ({ node, depth, nestedDepth, rowDepthBase, getIsExpanded, toggleTrack, validatedLocation, nodePath, schema, keyframeDisplayOffset, keyframePlaybackRate, keyframeControlsMode, }) => {
     const rowDepth = (rowDepthBase !== null && rowDepthBase !== void 0 ? rowDepthBase : (0, timeline_row_layout_1.getExpandedRowDepth)({ nestedDepth, treeDepth: 0 })) + depth;
     const isInspector = keyframeControlsMode === 'inspector';
     const selection = (0, TimelineSelection_1.useTimelineRowSelection)(node.nodePathInfo);
+    const containsSelection = (0, TimelineSelection_1.useTimelineRowContainsSelection)(node.nodePathInfo);
     const labelStyle = react_1.default.useMemo(() => ({
         ...rowLabel,
         ...(0, TimelineSelection_1.getTimelineSelectedLabelStyle)(selection.selected, true),
@@ -47,14 +48,14 @@ const TimelineExpandedRowInner = ({ node, depth, nestedDepth, rowDepthBase, getI
         const isExpanded = getIsExpanded(node.nodePathInfo);
         return (jsx_runtime_1.jsx(TimelineRowChrome_1.TimelineRowChrome, { depth: rowDepth, eye: jsx_runtime_1.jsx(TimelineLayerEye_1.TimelineLayerEyeSpacer, {}), arrow: jsx_runtime_1.jsx(TimelineExpandArrowButton_1.TimelineExpandArrowButton, { isExpanded: isExpanded, onClick: () => toggleTrack(node.nodePathInfo), label: `${node.label} section`, disabled: false }), style: {
                 height: timeline_layout_1.TREE_GROUP_ROW_HEIGHT,
-            }, selected: selection.selected, selectable: selection.selectable, onSelect: selection.onSelect, showSelectedBackground: true, containsSelection: false, outerHeight: null, children: jsx_runtime_1.jsx("span", { style: labelStyle, children: node.label }) }));
+            }, selected: selection.selected, selectable: selection.selectable, onSelect: selection.onSelect, showSelectedBackground: true, containsSelection: containsSelection, outerHeight: null, children: jsx_runtime_1.jsx("span", { style: labelStyle, children: node.label }) }));
     }
     if (node.field) {
         if (node.field.kind === 'effect-field') {
-            return (jsx_runtime_1.jsx(TimelineEffectPropItem_1.TimelineEffectPropItem, { field: node.field, validatedLocation: validatedLocation, rowDepth: isInspector ? rowDepth - 1 : rowDepth, nodePath: nodePath, nodePathInfo: node.nodePathInfo, keyframeDisplayOffset: keyframeDisplayOffset, keyframeControlsMode: keyframeControlsMode, revealInInspector: !isInspector, runtimeValueStore: node.runtimeValueStore }));
+            return (jsx_runtime_1.jsx(TimelineEffectPropItem_1.TimelineEffectPropItem, { field: node.field, validatedLocation: validatedLocation, rowDepth: isInspector ? rowDepth - 1 : rowDepth, nodePath: nodePath, nodePathInfo: node.nodePathInfo, keyframeDisplayOffset: keyframeDisplayOffset, keyframePlaybackRate: keyframePlaybackRate, keyframeControlsMode: keyframeControlsMode, revealInInspector: !isInspector, runtimeValueStore: node.runtimeValueStore }));
         }
         if (node.field.kind === 'sequence-field') {
-            return (jsx_runtime_1.jsx(TimelineSequencePropItem_1.TimelineSequencePropItem, { field: node.field, validatedLocation: validatedLocation, rowDepth: rowDepth, nodePath: nodePath, nodePathInfo: node.nodePathInfo, schema: schema, keyframeDisplayOffset: keyframeDisplayOffset, keyframeControlsMode: keyframeControlsMode, runtimeValue: node.runtimeValue }));
+            return (jsx_runtime_1.jsx(TimelineSequencePropItem_1.TimelineSequencePropItem, { field: node.field, validatedLocation: validatedLocation, rowDepth: rowDepth, nodePath: nodePath, nodePathInfo: node.nodePathInfo, schema: schema, keyframeDisplayOffset: keyframeDisplayOffset, keyframePlaybackRate: keyframePlaybackRate, keyframeControlsMode: keyframeControlsMode, runtimeValue: node.runtimeValue }));
         }
         throw new Error('Unexpected field kind: ' + JSON.stringify(node.field));
     }

package/dist/components/Timeline/TimelineExpandedSection.d.ts

@@ -8,4 +8,5 @@ export declare const TimelineExpandedSection: React.FC<{
     readonly nodePathInfo: SequenceNodePathInfo;
     readonly nestedDepth: number;
     readonly keyframeDisplayOffset: number;
+    readonly keyframePlaybackRate: number;
 }>;

package/dist/components/Timeline/TimelineExpandedSection.js

@@ -55,7 +55,7 @@ const separator = {
     height: 0,
     borderBottom: `1px solid ${colors_1.TIMELINE_TRACK_SEPARATOR}`,
 };
-const TimelineExpandedSection = ({ sequence, validatedLocation, nodePathInfo, nestedDepth, keyframeDisplayOffset, }) => {
+const TimelineExpandedSection = ({ sequence, validatedLocation, nodePathInfo, nestedDepth, keyframeDisplayOffset, keyframePlaybackRate, }) => {
     const { filteredTree, getIsExpanded, toggleTrack } = (0, use_timeline_expanded_tree_1.useTimelineExpandedTree)({
         sequence,
         nodePathInfo,
@@ -79,7 +79,7 @@ const TimelineExpandedSection = ({ sequence, validatedLocation, nodePathInfo, ne
         return null;
     }
     return (jsx_runtime_1.jsx(TimelineRowChrome_1.TimelineRowSelectedBackgroundContext.Provider, { value: TimelineSelection_1.TIMELINE_EXPANDED_SELECTED_BACKGROUND, children: jsx_runtime_1.jsx("div", { style: style, children: flat.map(({ node, depth }, i) => {
-                return (jsx_runtime_1.jsxs(react_1.default.Fragment, { children: [i > 0 ? jsx_runtime_1.jsx("div", { style: separator }) : null, jsx_runtime_1.jsx(TimelineExpandedRow_1.TimelineExpandedRow, { node: node, depth: depth, nestedDepth: nestedDepth, getIsExpanded: getIsExpanded, toggleTrack: toggleTrack, validatedLocation: validatedLocation, nodePath: nodePathInfo.sequenceSubscriptionKey, schema: schema, keyframeDisplayOffset: keyframeDisplayOffset, keyframeControlsMode: "timeline" })
+                return (jsx_runtime_1.jsxs(react_1.default.Fragment, { children: [i > 0 ? jsx_runtime_1.jsx("div", { style: separator }) : null, jsx_runtime_1.jsx(TimelineExpandedRow_1.TimelineExpandedRow, { node: node, depth: depth, nestedDepth: nestedDepth, getIsExpanded: getIsExpanded, toggleTrack: toggleTrack, validatedLocation: validatedLocation, nodePath: nodePathInfo.sequenceSubscriptionKey, schema: schema, keyframeDisplayOffset: keyframeDisplayOffset, keyframePlaybackRate: keyframePlaybackRate, keyframeControlsMode: "timeline" })
                     ] }, JSON.stringify(node.nodePathInfo)));
             }) }) }));
 };

package/dist/components/Timeline/TimelineExpandedTrackKeyframes.d.ts

@@ -5,6 +5,7 @@ type TimelineExpandedTrackKeyframesProps = {
     readonly sequence: TSequence;
     readonly nodePathInfo: SequenceNodePathInfo;
     readonly keyframeDisplayOffset: number;
+    readonly keyframePlaybackRate: number;
 };
 export declare const TimelineExpandedTrackKeyframes: React.NamedExoticComponent<TimelineExpandedTrackKeyframesProps>;
 export {};

package/dist/components/Timeline/TimelineExpandedTrackKeyframes.js

@@ -9,17 +9,19 @@ const react_1 = __importDefault(require("react"));
 const are_sequence_node_path_infos_equal_1 = require("../../helpers/are-sequence-node-path-infos-equal");
 const TimelineExpandedKeyframeRow_1 = require("./TimelineExpandedKeyframeRow");
 const use_expanded_track_keyframe_rows_1 = require("./use-expanded-track-keyframe-rows");
-const TimelineExpandedTrackKeyframesInner = ({ nodePathInfo, sequence, keyframeDisplayOffset }) => {
+const TimelineExpandedTrackKeyframesInner = ({ nodePathInfo, sequence, keyframeDisplayOffset, keyframePlaybackRate }) => {
     const { rows, expandedHeight } = (0, use_expanded_track_keyframe_rows_1.useExpandedTrackKeyframeRows)({
         sequence,
         nodePathInfo,
         keyframeDisplayOffset,
+        keyframePlaybackRate,
     });
     return (jsx_runtime_1.jsx("div", { style: { height: expandedHeight }, children: rows.map((row, index) => (jsx_runtime_1.jsx(TimelineExpandedKeyframeRow_1.TimelineExpandedKeyframeRow, { height: row.height, keyframes: row.keyframes, canEditEasing: row.canEditEasing, nodePathInfo: row.nodePathInfo, showSeparator: index > 0 }, row.rowKey))) }));
 };
 const areTimelineExpandedTrackKeyframesPropsEqual = (first, second) => {
     var _a, _b, _c, _d;
     return (first.keyframeDisplayOffset === second.keyframeDisplayOffset &&
+        first.keyframePlaybackRate === second.keyframePlaybackRate &&
         ((_a = first.sequence.controls) === null || _a === void 0 ? void 0 : _a.schema) === ((_b = second.sequence.controls) === null || _b === void 0 ? void 0 : _b.schema) &&
         ((_c = first.sequence.controls) === null || _c === void 0 ? void 0 : _c.runtimeValues) ===
             ((_d = second.sequence.controls) === null || _d === void 0 ? void 0 : _d.runtimeValues) &&

package/dist/components/Timeline/TimelineFieldLabel.js

@@ -33,6 +33,6 @@ const TimelineFieldLabel = ({ rowDepth, selected, label, stacked = false }) => {
         ...fieldNameBase,
         color: (0, TimelineSelection_1.getTimelineColor)(selected, true),
     }), [selected]);
-    return (jsx_runtime_1.jsx("div", { style: labelRowStyle, children: jsx_runtime_1.jsx("span", { style: fieldNameStyle, title: label, children: label }) }));
+    return (jsx_runtime_1.jsx("div", { style: labelRowStyle, children: jsx_runtime_1.jsx("span", { role: "group", style: fieldNameStyle, "aria-label": label, children: label }) }));
 };
 exports.TimelineFieldLabel = TimelineFieldLabel;

package/dist/components/Timeline/TimelineFontFamilyField.js

@@ -22,9 +22,9 @@ const ROW_HEIGHT = 30;
 const LIST_HEIGHT = 280;
 const OVERSCAN = 10;
 const POPOVER_WIDTH = 280;
-const CLEAR_HOVER = 'rgba(255, 255, 255, 0.06)';
-const INPUT_BORDER_COLOR_UNHOVERED = 'rgba(0, 0, 0, 0.6)';
-const INPUT_BORDER_COLOR_HOVERED = 'rgba(255, 255, 255, 0.05)';
+const CLEAR_HOVER = colors_1.WHITE_ALPHA_06;
+const INPUT_BORDER_COLOR_UNHOVERED = colors_1.BLACK_ALPHA_60;
+const INPUT_BORDER_COLOR_HOVERED = colors_1.WHITE_ALPHA_05;
 const googleFonts = google_fonts_list_1.GOOGLE_FONTS_LIST.map((font) => ({
     id: `google-${font.importName}`,
     fontFamily: font.fontFamily,
@@ -67,7 +67,7 @@ const triggerStyle = {
     borderWidth: 1,
     borderStyle: 'solid',
     maxWidth: 140,
-    color: 'white',
+    color: colors_1.WHITE,
     userSelect: 'none',
     WebkitUserSelect: 'none',
 };
@@ -83,17 +83,17 @@ const popover = {
     position: 'fixed',
     width: POPOVER_WIDTH,
     backgroundColor: colors_1.BACKGROUND,
-    color: 'white',
+    color: colors_1.WHITE,
     userSelect: 'none',
     WebkitUserSelect: 'none',
-    border: '1px solid rgba(255, 255, 255, 0.08)',
+    border: `1px solid ${colors_1.WHITE_ALPHA_08}`,
 };
 const searchInput = {
     boxSizing: 'border-box',
     width: '100%',
     backgroundColor: colors_1.INPUT_BACKGROUND,
-    border: '1px solid rgba(255, 255, 255, 0.12)',
-    color: 'white',
+    border: colors_1.BORDER_WHITE_ALPHA_12,
+    color: colors_1.WHITE,
     fontSize: 12,
     outline: 'none',
     padding: '6px 8px',
@@ -113,8 +113,8 @@ const optionButton = {
     height: ROW_HEIGHT,
     width: '100%',
     border: 'none',
-    background: 'transparent',
-    color: 'white',
+    background: colors_1.TRANSPARENT,
+    color: colors_1.WHITE,
     display: 'flex',
     alignItems: 'center',
     padding: '0 8px',
@@ -136,7 +136,7 @@ const optionSource = {
 };
 const errorText = {
     padding: '6px 8px',
-    color: '#ff8a8a',
+    color: colors_1.FONT_FAMILY_ERROR_COLOR,
     fontSize: 10,
 };
 const portalStyle = ({ size, }) => {
@@ -495,7 +495,7 @@ const TimelineFontFamilyField = ({ field, propStatus, effectiveValue, onSave, on
     }, [hovered, opened]);
     const selectedPreviewStyle = getOptionPreviewStyle(selected);
     return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
-            jsx_runtime_1.jsxs("button", { ref: buttonRef, title: field.key, tabIndex: tabIndex, type: "button", style: style, className: is_menu_item_1.MENU_INITIATOR_CLASSNAME, onPointerDown: (event) => {
+            jsx_runtime_1.jsxs("button", { ref: buttonRef, "aria-label": field.key, tabIndex: tabIndex, type: "button", style: style, className: is_menu_item_1.MENU_INITIATOR_CLASSNAME, onPointerDown: (event) => {
                     event.stopPropagation();
                     toggleOpened();
                 }, onClick: (event) => {
@@ -504,7 +504,7 @@ const TimelineFontFamilyField = ({ field, propStatus, effectiveValue, onSave, on
                         toggleOpened();
                     }
                 }, onMouseEnter: () => setHovered(true), onMouseLeave: () => setHovered(false), children: [
-                    jsx_runtime_1.jsx("div", { title: selected.label, style: { ...triggerLabel, ...selectedPreviewStyle }, children: selected.label }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.5 }), jsx_runtime_1.jsx(caret_1.CaretDown, { small: true })
+                    jsx_runtime_1.jsx("div", { role: "group", "aria-label": selected.label, style: { ...triggerLabel, ...selectedPreviewStyle }, children: selected.label }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.5 }), jsx_runtime_1.jsx(caret_1.CaretDown, { small: true })
                 ] }), saveError === null ? null : jsx_runtime_1.jsx("div", { style: errorText, children: saveError }), opened && size
                 ? react_dom_1.default.createPortal(jsx_runtime_1.jsx("div", { style: styles_1.fullScreenOverlay, onPointerDown: (event) => event.stopPropagation(), children: jsx_runtime_1.jsx("div", { style: styles_1.outerPortal, className: "css-reset", children: jsx_runtime_1.jsx(z_index_1.HigherZIndex, { onOutsideClick: hide, onEscape: hide, children: jsx_runtime_1.jsxs("div", { style: portalStyle({ size }), children: [
                                     jsx_runtime_1.jsx("div", { style: { padding: 6 }, children: jsx_runtime_1.jsx("input", { ref: inputRef, value: query, onChange: (event) => setQuery(event.target.value), onKeyDown: onKeyDown, placeholder: "Search fonts", style: searchInput }) }), filteredOptions.length === 0 ? (jsx_runtime_1.jsx("div", { style: noResults, children: "No fonts found" })) : (jsx_runtime_1.jsxs("div", { ref: listRef, style: listStyle, className: is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME, onScroll: (event) => {
@@ -520,7 +520,7 @@ const TimelineFontFamilyField = ({ field, propStatus, effectiveValue, onSave, on
                                                             ? CLEAR_HOVER
                                                             : isSelected
                                                                 ? colors_1.SELECTED_BACKGROUND
-                                                                : 'transparent',
+                                                                : colors_1.TRANSPARENT,
                                                     }, onPointerEnter: () => setHighlightedIndex(actualIndex), onPointerDown: (event) => {
                                                         event.preventDefault();
                                                         event.stopPropagation();

package/dist/components/Timeline/TimelineFontWeightField.js

@@ -41,7 +41,7 @@ const TimelineFontWeightField = ({ field, propStatus, effectiveValue, onSave, on
         return (jsx_runtime_1.jsx(TimelineNumberField_1.TimelineNumberField, { effectiveValue: currentValue, field: field, onDragEnd: onDragEnd, onDragValueChange: onDragValueChange, onSave: onSave, propStatus: propStatus }));
     }
     if (FONT_WEIGHT_KEYWORDS.includes(sourceValue)) {
-        return (jsx_runtime_1.jsx(ComboBox_1.Combobox, { size: "small", title: field.key, selectedId: String(currentValue), values: keywordItems }));
+        return (jsx_runtime_1.jsx(ComboBox_1.Combobox, { size: "small", "aria-label": field.key, selectedId: String(currentValue), values: keywordItems }));
     }
     return (jsx_runtime_1.jsx(RemInput_1.RemotionInput, { status: "ok", rightAlign: false, small: true, defaultValue: String(currentValue !== null && currentValue !== void 0 ? currentValue : ''), onBlur: (event) => {
             const newValue = event.currentTarget.value;

package/dist/components/Timeline/TimelineKeyframeControls.d.ts

@@ -21,6 +21,7 @@ export declare const TimelineKeyframeControls: React.FC<{
     readonly nodePath: SequencePropsSubscriptionKey;
     readonly fileName: string;
     readonly keyframeDisplayOffset: number;
+    readonly keyframePlaybackRate: number;
     readonly defaultValue: unknown;
     readonly dragOverrideValue: DragOverrideValue | undefined;
     readonly schema: InteractivitySchema;