@remotion/studio 4.0.528 → 4.0.529

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/TimelineColorField.js

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

@@ -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) => {

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.js

@@ -330,7 +330,7 @@ exports.shouldShowTimelineKeyframeNavigation = shouldShowTimelineKeyframeNavigat
 const TimelineKeyframeControls = ({ fieldKey, propStatus, nodePath, fileName, keyframeDisplayOffset, keyframePlaybackRate, defaultValue, dragOverrideValue, schema, effectIndex, nodePathInfo, mode = 'timeline', }) => {
     const videoConfig = (0, remotion_1.useVideoConfig)();
     const timelinePosition = remotion_1.Internals.Timeline.useTimelinePosition();
-    const setFrame = remotion_1.Internals.Timeline.useTimelineSeekFrame();
+    const seekFrame = remotion_1.Internals.Timeline.useTimelineSeekFrame();
     const { setPropStatuses } = (0, react_1.useContext)(remotion_1.Internals.VisualModeSettersContext);
     const { propStatuses } = (0, react_1.useContext)(remotion_1.Internals.VisualModePropStatusesContext);
     const { getDragOverrides, getEffectDragOverrides } = (0, react_1.useContext)(remotion_1.Internals.VisualModeDragOverridesContext);
@@ -440,7 +440,7 @@ const TimelineKeyframeControls = ({ fieldKey, propStatus, nodePath, fileName, ke
         tracks,
     ]);
     const seekToDisplayFrame = (0, react_1.useCallback)((frame, direction) => {
-        setFrame((current) => {
+        seekFrame((current) => {
             const next = { ...current, [videoConfig.id]: frame };
             remotion_1.Internals.persistCurrentFrame(next);
             return next;
@@ -450,7 +450,7 @@ const TimelineKeyframeControls = ({ fieldKey, propStatus, nodePath, fileName, ke
             durationInFrames: videoConfig.durationInFrames,
             frame,
         });
-    }, [setFrame, videoConfig.durationInFrames, videoConfig.id]);
+    }, [seekFrame, videoConfig.durationInFrames, videoConfig.id]);
     const onPrevious = (0, react_1.useCallback)((e) => {
         e.stopPropagation();
         if (previousDisplayFrame !== null) {
@@ -549,7 +549,7 @@ const TimelineKeyframeControls = ({ fieldKey, propStatus, nodePath, fileName, ke
     return (jsx_runtime_1.jsxs("div", { style: mode === 'inspector'
             ? inspectorControlsContainerStyle
             : controlsContainerStyle, children: [
-            jsx_runtime_1.jsx("button", { type: "button", style: previousStyle, disabled: previousDisabled, onPointerDown: previousDisabled ? undefined : onPrevious, "aria-label": "Go to previous keyframe", title: "Previous keyframe", children: jsx_runtime_1.jsx("svg", { width: "14", height: "14", viewBox: "0 0 10 10", style: svgStyle, children: jsx_runtime_1.jsx("path", { d: "M7 1.5L3 5L7 8.5Z", fill: colors_1.LIGHT_GRAY }) }) }), jsx_runtime_1.jsx("button", { type: "button", style: diamondStyle, disabled: !canToggleKeyframe || !clientId, onPointerDown: canToggleKeyframe && clientId ? onToggleKeyframe : undefined, "aria-label": hasKeyframeAtCurrentFrame ? 'Remove keyframe' : 'Add keyframe', title: hasKeyframeAtCurrentFrame ? 'Remove keyframe' : 'Add keyframe', children: jsx_runtime_1.jsx(TimelineKeyframeDiamondIcon_1.TimelineKeyframeDiamondIcon, { color: diamondColor, size: 12 }) }), jsx_runtime_1.jsx("button", { type: "button", style: nextStyle, disabled: nextDisabled, onPointerDown: nextDisabled ? undefined : onNext, "aria-label": "Go to next keyframe", title: "Next keyframe", children: jsx_runtime_1.jsx("svg", { width: "14", height: "14", viewBox: "0 0 10 10", style: svgStyle, children: jsx_runtime_1.jsx("path", { d: "M3 1.5L7 5L3 8.5Z", fill: colors_1.LIGHT_GRAY }) }) })
+            jsx_runtime_1.jsx("button", { type: "button", style: previousStyle, disabled: previousDisabled, onPointerDown: previousDisabled ? undefined : onPrevious, "aria-label": "Go to previous keyframe", children: jsx_runtime_1.jsx("svg", { width: "14", height: "14", viewBox: "0 0 10 10", style: svgStyle, children: jsx_runtime_1.jsx("path", { d: "M7 1.5L3 5L7 8.5Z", fill: colors_1.LIGHT_GRAY }) }) }), jsx_runtime_1.jsx("button", { type: "button", style: diamondStyle, disabled: !canToggleKeyframe || !clientId, onPointerDown: canToggleKeyframe && clientId ? onToggleKeyframe : undefined, "aria-label": hasKeyframeAtCurrentFrame ? 'Remove keyframe' : 'Add keyframe', children: jsx_runtime_1.jsx(TimelineKeyframeDiamondIcon_1.TimelineKeyframeDiamondIcon, { color: diamondColor, size: 12 }) }), jsx_runtime_1.jsx("button", { type: "button", style: nextStyle, disabled: nextDisabled, onPointerDown: nextDisabled ? undefined : onNext, "aria-label": "Go to next keyframe", children: jsx_runtime_1.jsx("svg", { width: "14", height: "14", viewBox: "0 0 10 10", style: svgStyle, children: jsx_runtime_1.jsx("path", { d: "M3 1.5L7 5L3 8.5Z", fill: colors_1.LIGHT_GRAY }) }) })
         ] }));
 };
 exports.TimelineKeyframeControls = TimelineKeyframeControls;

package/dist/components/Timeline/TimelineKeyframeDiamond.js

@@ -87,6 +87,6 @@ const TimelineKeyframeDiamondUnmemoized = ({ frame, rowHeight, nodePathInfo }) =
     if (style === null) {
         return null;
     }
-    return (jsx_runtime_1.jsx("button", { ref: ref, [TimelineSelection_1.TIMELINE_MARQUEE_ITEM_ATTR]: true, type: "button", style: style, title: `Keyframe at frame ${frame}`, "aria-label": `Select keyframe at frame ${frame}`, onPointerDown: selectable ? onPointerDown : undefined, children: jsx_runtime_1.jsx(TimelineKeyframeDiamondIcon_1.TimelineKeyframeDiamondIcon, { color: colors_1.LIGHT_TEXT, selected: visuallySelected, size: diamondSize }) }));
+    return (jsx_runtime_1.jsx("button", { ref: ref, [TimelineSelection_1.TIMELINE_MARQUEE_ITEM_ATTR]: true, type: "button", style: style, "aria-label": `Select keyframe at frame ${frame}`, onPointerDown: selectable ? onPointerDown : undefined, children: jsx_runtime_1.jsx(TimelineKeyframeDiamondIcon_1.TimelineKeyframeDiamondIcon, { color: colors_1.LIGHT_TEXT, selected: visuallySelected, size: diamondSize }) }));
 };
 exports.TimelineKeyframeDiamond = react_1.default.memo(TimelineKeyframeDiamondUnmemoized);

package/dist/components/Timeline/TimelineKeyframeEasingLine.js

@@ -167,7 +167,7 @@ const TimelineKeyframeEasingLineInteraction = ({ fromFrame, toFrame, nodePathInf
         selectionItem,
     });
     return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
-            jsx_runtime_1.jsx("button", { ref: buttonRef, [TimelineSelection_1.TIMELINE_MARQUEE_ITEM_ATTR]: true, type: "button", style: interactiveStyle, title: `Easing from frame ${fromFrame} to ${toFrame}`, "aria-label": `Select easing from frame ${fromFrame} to ${toFrame}`, onPointerDown: selectable ? onPointerDown : undefined, children: jsx_runtime_1.jsx(exports.TimelineKeyframeEasingLineVisual, { selected: selected }) }), jsx_runtime_1.jsx(ContextMenu_1.ContextMenuForTarget, { triggerRef: buttonRef, getItems: getContextMenuItems })
+            jsx_runtime_1.jsx("button", { ref: buttonRef, [TimelineSelection_1.TIMELINE_MARQUEE_ITEM_ATTR]: true, type: "button", style: interactiveStyle, "aria-label": `Select easing from frame ${fromFrame} to ${toFrame}`, onPointerDown: selectable ? onPointerDown : undefined, children: jsx_runtime_1.jsx(exports.TimelineKeyframeEasingLineVisual, { selected: selected }) }), jsx_runtime_1.jsx(ContextMenu_1.ContextMenuForTarget, { triggerRef: buttonRef, getItems: getContextMenuItems })
         ] }));
 };
 const TimelineKeyframeEasingLineUnmemoized = ({ fromFrame, toFrame, rowHeight, nodePathInfo, segmentIndex }) => {

package/dist/components/Timeline/TimelineLayerChildren.js

@@ -118,7 +118,7 @@ const TimelineLayerChildrenToggle = ({ sequence }) => {
         return jsx_runtime_1.jsx("div", { style: toggleLayout });
     }
     const label = `${isCollapsed ? 'Expand' : 'Collapse'} children of ${sequence.displayName}`;
-    return (jsx_runtime_1.jsx("button", { type: "button", className: `${hoverable_1.HOVERABLE_CLASS_NAME} ${hoverable_1.FOCUS_VISIBLE_ONLY_CLASS_NAME}`, "aria-label": label, "aria-expanded": !isCollapsed, title: label, onClick: onClick, onPointerDown: stopPropagation, onDoubleClick: stopPropagation, style: {
+    return (jsx_runtime_1.jsx("button", { type: "button", className: `${hoverable_1.HOVERABLE_CLASS_NAME} ${hoverable_1.FOCUS_VISIBLE_ONLY_CLASS_NAME}`, "aria-label": label, "aria-expanded": !isCollapsed, onClick: onClick, onPointerDown: stopPropagation, onDoubleClick: stopPropagation, style: {
             ...(0, hoverable_1.hoverableStyle)({
                 idleBackground: colors_1.TRANSPARENT,
                 hoverBackground: colors_1.TRANSPARENT,

package/dist/components/Timeline/TimelineList.js

@@ -23,12 +23,20 @@ const TimelineListTrack = react_1.default.memo(({ row }) => {
 });
 const TimelineList = () => {
     const { rows, tracksEnd, virtualItems } = (0, TimelineVirtualization_1.useTimelineVirtualization)();
-    return (jsx_runtime_1.jsx("div", { style: { ...container, height: tracksEnd }, children: virtualItems.map((virtualItem) => (jsx_runtime_1.jsx("div", { style: {
-                height: virtualItem.size,
-                left: 0,
-                position: 'absolute',
-                top: virtualItem.start,
-                width: '100%',
-            }, children: jsx_runtime_1.jsx(TimelineListTrack, { row: rows[virtualItem.index] }) }, virtualItem.key))) }));
+    return (jsx_runtime_1.jsxs("div", { style: { ...container, height: tracksEnd }, children: [
+            jsx_runtime_1.jsx("style", { children: `.remotion-timeline-sequence-name-measure::before {
+				content: attr(data-name);
+				display: block;
+				font-family: Arial, Helvetica, sans-serif;
+				font-size: 12px;
+				line-height: normal;
+				visibility: hidden;
+			}` }), virtualItems.map((virtualItem) => (jsx_runtime_1.jsx("div", { style: {
+                    height: virtualItem.size,
+                    left: 0,
+                    position: 'absolute',
+                    top: virtualItem.start,
+                    width: '100%',
+                }, children: jsx_runtime_1.jsx(TimelineListTrack, { row: rows[virtualItem.index] }) }, virtualItem.key)))] }));
 };
 exports.TimelineList = TimelineList;

package/dist/components/Timeline/TimelineMediaInfo.js

@@ -36,6 +36,6 @@ const useAssetLink = (src) => {
 const TimelineMediaInfo = ({ src }) => {
     const fileName = (0, react_1.useMemo)(() => remotion_1.Internals.getAssetDisplayName(src), [src]);
     const { linkInfo, fileNameStyle } = useAssetLink(src);
-    return (jsx_runtime_1.jsx("div", { style: fileNameStyle, title: linkInfo ? linkInfo.title : fileName, children: fileName }));
+    return (jsx_runtime_1.jsx("div", { role: "group", style: fileNameStyle, "aria-label": linkInfo ? linkInfo.title : fileName, children: fileName }));
 };
 exports.TimelineMediaInfo = TimelineMediaInfo;

package/dist/components/Timeline/TimelineScaleField.js

@@ -81,7 +81,7 @@ const LinkToggle = ({ linked, onToggle }) => {
         e.stopPropagation();
         onToggle();
     }, [onToggle]);
-    return (jsx_runtime_1.jsx("button", { type: "button", style: toggleStyle, onPointerDown: onPointerDown, title: linked ? 'Unlink scale axes' : 'Link scale axes', "aria-label": linked ? 'Unlink scale axes' : 'Link scale axes', children: linked ? (jsx_runtime_1.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 640 640", style: linkIconStyle, children: jsx_runtime_1.jsx("path", { fill: colors_1.CURRENT_COLOR_LOWERCASE, d: "M32 320C32 214 118 128 224 128L288 128L288 192L224 192C153.3 192 96 249.3 96 320C96 390.7 153.3 448 224 448L288 448L288 512L224 512C118 512 32 426 32 320zM608 320C608 426 522 512 416 512L352 512L352 448L416 448C486.7 448 544 390.7 544 320C544 249.3 486.7 192 416 192L352 192L352 128L416 128C522 128 608 214 608 320zM224 288L448 288L448 352L192 352L192 288L224 288z" }) })) : null }));
+    return (jsx_runtime_1.jsx("button", { type: "button", style: toggleStyle, onPointerDown: onPointerDown, "aria-label": linked ? 'Unlink scale axes' : 'Link scale axes', children: linked ? (jsx_runtime_1.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 640 640", style: linkIconStyle, children: jsx_runtime_1.jsx("path", { fill: colors_1.CURRENT_COLOR_LOWERCASE, d: "M32 320C32 214 118 128 224 128L288 128L288 192L224 192C153.3 192 96 249.3 96 320C96 390.7 153.3 448 224 448L288 448L288 512L224 512C118 512 32 426 32 320zM608 320C608 426 522 512 416 512L352 512L352 448L416 448C486.7 448 544 390.7 544 320C544 249.3 486.7 192 416 192L352 192L352 128L416 128C522 128 608 214 608 320zM224 288L448 288L448 352L192 352L192 288L224 288z" }) })) : null }));
 };
 const TimelineScaleField = ({ field, propStatus, effectiveValue, onSave, onDragValueChange, onDragEnd, scaleLockNodePath, }) => {
     var _a, _b;

package/dist/components/Timeline/TimelineSchemaField.js

@@ -107,8 +107,8 @@ const UnsupportedStatus = ({ label, onFix, formattedValue }) => {
     const stopPointerPropagation = (event) => {
         event.stopPropagation();
     };
-    return (jsx_runtime_1.jsxs("span", { style: unsupportedStatusWrapper, onPointerEnter: () => setHovered(true), onPointerLeave: () => setHovered(false), title: formattedValue && typeof label === 'string' ? label : undefined, children: [
-            jsx_runtime_1.jsx("span", { style: formattedValue ? computedValue : unsupportedLabel, inert: formattedValue, children: label }), onFix ? (jsx_runtime_1.jsx("button", { type: "button", className: `${hoverable_1.FOCUS_VISIBLE_ONLY_CLASS_NAME} ${hoverable_1.HOVERABLE_CLASS_NAME}`, style: fixLink, title: "Fix computed Studio value", onClick: (event) => {
+    return (jsx_runtime_1.jsxs("span", { role: "group", style: unsupportedStatusWrapper, onPointerEnter: () => setHovered(true), onPointerLeave: () => setHovered(false), "aria-label": formattedValue && typeof label === 'string' ? label : undefined, children: [
+            jsx_runtime_1.jsx("span", { style: formattedValue ? computedValue : unsupportedLabel, inert: formattedValue, children: label }), onFix ? (jsx_runtime_1.jsx("button", { type: "button", className: `${hoverable_1.FOCUS_VISIBLE_ONLY_CLASS_NAME} ${hoverable_1.HOVERABLE_CLASS_NAME}`, style: fixLink, "aria-label": "Fix computed Studio value", onClick: (event) => {
                     stopMousePropagation(event);
                     onFix();
                 }, onDoubleClick: stopMousePropagation, onPointerDown: stopPointerPropagation, onFocus: () => setFocused(true), onBlur: () => setFocused(false), tabIndex: visible ? 0 : -1, children: "Fix" })) : null] }));

package/dist/components/Timeline/TimelineSequence.js

@@ -207,7 +207,7 @@ const TimelineSequenceCurrentFrame = ({ s, displayDurationInFrames, premount, po
                     display: 'flex',
                     alignItems: 'center',
                 }, children: jsx_runtime_1.jsx(TimelineSequenceFrame_1.TimelineSequenceFrame, { premounted: isPremounting, postmounted: isPostmounting ? s.duration - 1 : null, roundedFrame: roundedFrame, frozenFrame: frozenFrame }) })) : null] }));
-    return (jsx_runtime_1.jsxs("div", { ref: ref, [TimelineSelection_1.TIMELINE_MARQUEE_ITEM_ATTR]: true, style: actualStyle, title: s.displayName, onPointerDownCapture: onPointerDownCapture, onPointerDown: selectable ? onPointerDown : undefined, onClick: onClick !== null && onClick !== void 0 ? onClick : undefined, children: [negativeStart ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
+    return (jsx_runtime_1.jsxs("div", { ref: ref, role: "group", [TimelineSelection_1.TIMELINE_MARQUEE_ITEM_ATTR]: true, style: actualStyle, "aria-label": s.displayName, onPointerDownCapture: onPointerDownCapture, onPointerDown: selectable ? onPointerDown : undefined, onClick: onClick !== null && onClick !== void 0 ? onClick : undefined, children: [negativeStart ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
                     jsx_runtime_1.jsx(TimelineSequenceNegativeStart, { left: negativeStart.left, width: negativeStart.width, leftEdgeVisible: leftEdgeVisible, clipped: negativeStartClipped }), jsx_runtime_1.jsx("div", { style: {
                             background: style.background,
                             border: style.border,

package/dist/components/Timeline/TimelineSequenceItem.js

@@ -108,31 +108,53 @@ const effectDropHighlight = {
     outline: colors_1.BORDER_TIMELINE_DROP_BLUE,
     outlineOffset: -1,
 };
-const TimelineSequenceExpandArrowInner = ({ disabled, isExpanded, nodePathInfo, selectedItems, sequence }) => {
+const TimelineSequenceLabelInner = ({ disabled, isExpanded, nodePathInfo, selectedItems, sequence, canHaveExpandableContent, displayName, fallbackDisplayName, selected, containsSelection, editing, onCancelEditing, onSaveName, numberOfHiddenDuplicates, }) => {
     const { toggleTrack } = (0, react_1.useContext)(ExpandedTracksProvider_1.ExpandedTracksSetterContext);
     const hasExpandableContent = (0, use_timeline_expanded_tree_1.useTimelineSequenceHasExpandableContent)({
         sequence,
         nodePathInfo,
         selectedItems,
     });
-    const onToggleExpand = (0, react_1.useCallback)(() => toggleTrack(nodePathInfo), [nodePathInfo, toggleTrack]);
-    if (!hasExpandableContent) {
-        return jsx_runtime_1.jsx(TimelineExpandArrowButton_1.TimelineExpandArrowSpacer, {});
-    }
-    return (jsx_runtime_1.jsx(TimelineExpandArrowButton_1.TimelineExpandArrowButton, { isExpanded: isExpanded, onClick: onToggleExpand, label: "track properties", disabled: disabled }));
+    const showChevronSlot = canHaveExpandableContent && nodePathInfo !== null;
+    const showChevron = showChevronSlot && hasExpandableContent;
+    const onToggleExpand = (0, react_1.useCallback)(() => {
+        if (nodePathInfo !== null) {
+            toggleTrack(nodePathInfo);
+        }
+    }, [nodePathInfo, toggleTrack]);
+    return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
+            jsx_runtime_1.jsx(TimelineSequenceName_1.TimelineSequenceName, { displayName: displayName, fallbackDisplayName: fallbackDisplayName, selected: selected, containsSelection: containsSelection, editing: editing, onCancelEditing: onCancelEditing, onSaveName: onSaveName, chevronSlot: showChevronSlot && !editing && numberOfHiddenDuplicates === 0
+                    ? showChevron
+                        ? 'occupied'
+                        : 'empty'
+                    : 'none' }), numberOfHiddenDuplicates > 0 ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
+                    jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.5 }), jsx_runtime_1.jsx(TimelineDuplicateCount_1.TimelineDuplicateCount, { count: numberOfHiddenDuplicates })
+                ] })) : null, showChevronSlot ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
+                    jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.5 }), showChevron ? (jsx_runtime_1.jsx(TimelineExpandArrowButton_1.TimelineExpandArrowButton, { isExpanded: isExpanded, onClick: onToggleExpand, label: "track properties", disabled: disabled })) : (jsx_runtime_1.jsx(TimelineExpandArrowButton_1.TimelineExpandArrowSpacer, {}))] })) : null] }));
 };
-const areTimelineSequenceExpandArrowPropsEqual = (first, second) => {
+const TimelineSequenceLabel = react_1.default.memo(TimelineSequenceLabelInner, (first, second) => {
     var _a, _b, _c, _d;
-    return (first.disabled === second.disabled &&
+    return first.disabled === second.disabled &&
         first.isExpanded === second.isExpanded &&
         first.selectedItems === second.selectedItems &&
+        first.canHaveExpandableContent === second.canHaveExpandableContent &&
+        first.displayName === second.displayName &&
+        first.fallbackDisplayName === second.fallbackDisplayName &&
+        first.selected === second.selected &&
+        first.containsSelection === second.containsSelection &&
+        first.editing === second.editing &&
+        first.onCancelEditing === second.onCancelEditing &&
+        first.onSaveName === second.onSaveName &&
+        first.numberOfHiddenDuplicates === second.numberOfHiddenDuplicates &&
         ((_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) &&
         first.sequence.effects === second.sequence.effects &&
-        (0, are_sequence_node_path_infos_equal_1.areSequenceNodePathInfosEqual)(first.nodePathInfo, second.nodePathInfo));
-};
-const TimelineSequenceExpandArrow = react_1.default.memo(TimelineSequenceExpandArrowInner, areTimelineSequenceExpandArrowPropsEqual);
+        (first.nodePathInfo === second.nodePathInfo ||
+            (first.nodePathInfo !== null &&
+                second.nodePathInfo !== null &&
+                (0, are_sequence_node_path_infos_equal_1.areSequenceNodePathInfosEqual)(first.nodePathInfo, second.nodePathInfo)));
+});
 const sequenceReorderWrapper = {
     position: 'relative',
 };
@@ -1078,11 +1100,7 @@ const TimelineSequenceItemInner = ({ afterDropLineOffset, connectedCompositions,
     ]);
     const trackRow = (jsx_runtime_1.jsx(TimelineRowChrome_1.TimelineRowChrome, { depth: nestedDepth, eye: showVisibilityToggle ? (jsx_runtime_1.jsx(TimelineLayerEye_1.TimelineLayerEye, { type: sequence.type === 'audio' ? 'speaker' : 'eye', hidden: isItemHidden, onInvoked: canToggleVisibility ? onToggleVisibility : null })) : (jsx_runtime_1.jsx(TimelineLayerEye_1.TimelineLayerEyeSpacer, {})), arrow: jsx_runtime_1.jsx(TimelineLayerChildren_1.TimelineLayerChildrenToggle, { sequence: sequence }), style: rowStyle, selected: selected, selectable: selectable, onSelect: onSelect, showSelectedBackground: true, containsSelection: containsSelection, hovered: hovered, outerHeight: outerHeight, onDragLeave: canDropEffect ? onEffectDragLeave : undefined, onDragOver: canDropEffect ? onEffectDragOver : undefined, onDrop: canDropEffect ? onEffectDrop : undefined, onDoubleClick: canHandleSequenceDoubleClick ? onSequenceDoubleClick : undefined, onPointerEnter: onPointerEnter, onPointerLeave: onPointerLeave, children: jsx_runtime_1.jsxs("div", { style: labelContainerStyle, children: [connectedCompositions.length > 0 ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
                         jsx_runtime_1.jsx(CompositionOrStillIcon_1.CompositionOrStillIcon, { color: (0, TimelineSelection_1.getTimelineColor)(false, false), composition: connectedCompositions[0], style: connectedCompositionIconStyle }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.5 })
-                    ] })) : null, jsx_runtime_1.jsx(TimelineSequenceName_1.TimelineSequenceName, { displayName: timelineDisplayName, fallbackDisplayName: fallbackDisplayName, selected: selected, containsSelection: containsSelection, editing: isRenaming, onCancelEditing: onCancelRenaming, onSaveName: onSaveName }), numberOfHiddenDuplicates > 0 ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
-                        jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.5 }), jsx_runtime_1.jsx(TimelineDuplicateCount_1.TimelineDuplicateCount, { count: numberOfHiddenDuplicates })
-                    ] })) : null, hasExpandableContent && nodePathInfo !== null ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
-                        jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.5 }), jsx_runtime_1.jsx(TimelineSequenceExpandArrow, { disabled: !previewInteractive, isExpanded: isExpanded, nodePathInfo: nodePathInfo, selectedItems: selectedItems, sequence: sequence })
-                    ] })) : null, mediaSrc ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
+                    ] })) : null, jsx_runtime_1.jsx(TimelineSequenceLabel, { displayName: timelineDisplayName, fallbackDisplayName: fallbackDisplayName, selected: selected, containsSelection: containsSelection, editing: isRenaming, onCancelEditing: onCancelRenaming, onSaveName: onSaveName, numberOfHiddenDuplicates: numberOfHiddenDuplicates, canHaveExpandableContent: hasExpandableContent, disabled: !previewInteractive, isExpanded: isExpanded, nodePathInfo: nodePathInfo, selectedItems: selectedItems, sequence: sequence }), mediaSrc ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
                         jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.5 }),
                         " ",
                         jsx_runtime_1.jsx(TimelineMediaInfo_1.TimelineMediaInfo, { src: mediaSrc })

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

@@ -7,4 +7,5 @@ export declare const TimelineSequenceName: React.FC<{
     readonly editing: boolean;
     readonly onCancelEditing: () => void;
     readonly onSaveName: (name: string) => Promise<void>;
+    readonly chevronSlot: 'none' | 'empty' | 'occupied';
 }>;

package/dist/components/Timeline/TimelineSequenceName.js

@@ -8,13 +8,16 @@ const TimelineSelection_1 = require("./TimelineSelection");
 const MAX_DISPLAY_NAME_LENGTH = 1000;
 const MAX_RENAME_INPUT_WIDTH = 240;
 const RENAME_INPUT_CLASS_NAME = 'remotion-timeline-sequence-name-input';
+const LABEL_FONT_FAMILY = 'Arial, Helvetica, sans-serif';
+// 4px gap + 12px chevron + 4px chevron margin.
+const CHEVRON_SLOT_WIDTH = 20;
 const getTruncatedDisplayName = (displayName) => {
     if (displayName.length > MAX_DISPLAY_NAME_LENGTH) {
         return displayName.slice(0, MAX_DISPLAY_NAME_LENGTH) + '...';
     }
     return displayName;
 };
-const TimelineSequenceName = ({ displayName, fallbackDisplayName, selected, containsSelection, editing, onCancelEditing, onSaveName, }) => {
+const TimelineSequenceName = ({ displayName, fallbackDisplayName, selected, containsSelection, editing, onCancelEditing, onSaveName, chevronSlot, }) => {
     const inputRef = (0, react_1.useRef)(null);
     const [draftName, setDraftName] = (0, react_1.useState)(displayName);
     const cancelNextBlurRef = (0, react_1.useRef)(false);
@@ -25,11 +28,12 @@ const TimelineSequenceName = ({ displayName, fallbackDisplayName, selected, cont
             ...(0, TimelineSelection_1.getTimelineSelectedLabelStyle)(selected, false),
             display: 'inline-flex',
             flexShrink: 1,
-            fontFamily: 'inherit',
+            fontFamily: LABEL_FONT_FAMILY,
             fontSize: 12,
             lineHeight: 'normal',
             minWidth: 0,
-            overflow: 'hidden',
+            overflow: chevronSlot === 'none' ? 'hidden' : 'visible',
+            position: chevronSlot === 'none' ? undefined : 'relative',
             whiteSpace: 'nowrap',
             textOverflow: 'ellipsis',
             color: (0, TimelineSelection_1.getTimelineColor)(selected, false),
@@ -40,14 +44,14 @@ const TimelineSequenceName = ({ displayName, fallbackDisplayName, selected, cont
                 ? `inset 0 0 0 2px ${TimelineSelection_1.TIMELINE_SELECTED_LABEL_BACKGROUND}`
                 : undefined,
         };
-    }, [selected, containsSelection]);
+    }, [selected, containsSelection, chevronSlot]);
     const inputStyle = (0, react_1.useMemo)(() => {
         return {
             ...style,
             background: colors_1.TRANSPARENT,
             border: 0,
             color: (0, TimelineSelection_1.getTimelineColor)(false, false),
-            fontFamily: 'inherit',
+            fontFamily: LABEL_FONT_FAMILY,
             fontSize: 12,
             outline: 'none',
             paddingBottom: 0,
@@ -101,6 +105,34 @@ const TimelineSequenceName = ({ displayName, fallbackDisplayName, selected, cont
                 jsx_runtime_1.jsx("style", { children: `.${RENAME_INPUT_CLASS_NAME}::selection { background: ${colors_1.WHITE_ALPHA_72}; color: ${colors_1.BLACK}; }` }), jsx_runtime_1.jsx("input", { ref: inputRef, className: RENAME_INPUT_CLASS_NAME, value: draftName, onChange: (e) => setDraftName(e.target.value), onBlur: onBlur, onKeyDown: onKeyDown, size: Math.max(1, draftName.length), style: inputStyle })
             ] }));
     }
-    return (jsx_runtime_1.jsx("div", { title: text, style: style, children: text }));
+    if (chevronSlot !== 'none') {
+        // Keep the name's flex width fixed while its visible text uses the empty slot.
+        return (jsx_runtime_1.jsx("div", { className: "remotion-timeline-sequence-name-measure", "data-name": text, title: text, style: {
+                ...style,
+                backgroundColor: undefined,
+                boxShadow: undefined,
+                clipPath: chevronSlot === 'occupied' ? 'inset(0)' : undefined,
+            }, children: jsx_runtime_1.jsx("div", { style: {
+                    ...(0, TimelineSelection_1.getTimelineSelectedLabelStyle)(selected, false),
+                    alignItems: 'center',
+                    boxShadow: style.boxShadow,
+                    boxSizing: 'border-box',
+                    color: (0, TimelineSelection_1.getTimelineColor)(selected, false),
+                    display: 'inline-flex',
+                    fontFamily: LABEL_FONT_FAMILY,
+                    fontSize: 12,
+                    height: '100%',
+                    left: 0,
+                    lineHeight: 'normal',
+                    maxWidth: `calc(100% + ${CHEVRON_SLOT_WIDTH}px)`,
+                    overflow: 'hidden',
+                    position: 'absolute',
+                    textOverflow: 'ellipsis',
+                    top: 0,
+                    whiteSpace: 'nowrap',
+                    width: 'max-content',
+                }, children: text }) }));
+    }
+    return (jsx_runtime_1.jsx("div", { role: "group", "aria-label": text, style: style, children: text }));
 };
 exports.TimelineSequenceName = TimelineSequenceName;

package/dist/components/Timeline/TimelineSequencePropItem.js

@@ -53,6 +53,7 @@ const get_timeline_keyframes_1 = require("./get-timeline-keyframes");
 const save_sequence_prop_1 = require("./save-sequence-prop");
 const timeline_field_row_layout_1 = require("./timeline-field-row-layout");
 const TimelineExpandArrowButton_1 = require("./TimelineExpandArrowButton");
+const TimelineFieldLabel_1 = require("./TimelineFieldLabel");
 const TimelineFieldRowContent_1 = require("./TimelineFieldRowContent");
 const TimelineKeyframeControls_1 = require("./TimelineKeyframeControls");
 const TimelineKeyframedValue_1 = require("./TimelineKeyframedValue");
@@ -415,7 +416,7 @@ const TimelineSequenceKeyframedValueUnmemoized = (props) => {
 };
 exports.TimelineSequenceKeyframedValue = react_1.default.memo(TimelineSequenceKeyframedValueUnmemoized);
 const TimelineSequencePropItem = ({ field, validatedLocation, rowDepth, nodePath, nodePathInfo, schema, keyframeDisplayOffset, keyframePlaybackRate, keyframeControlsMode, runtimeValue, }) => {
-    var _a, _b;
+    var _a, _b, _c;
     const { propStatuses: visualModePropStatuses } = (0, react_1.useContext)(remotion_1.Internals.VisualModePropStatusesContext);
     const propStatusesRef = (0, react_1.useContext)(remotion_1.Internals.VisualModePropStatusesRefContext);
     const sequencesRef = (0, react_1.useContext)(remotion_1.Internals.SequenceManagerRefContext);
@@ -445,11 +446,12 @@ const TimelineSequencePropItem = ({ field, validatedLocation, rowDepth, nodePath
                 selected: selection.selected,
                 keyframable,
             })) ? (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: schema, effectIndex: null, nodePathInfo: nodePathInfo, mode: keyframeControlsMode })) : null;
+    const hidePathValue = keyframeControlsMode === 'timeline' && field.typeName === 'svg-path';
     const style = (0, react_1.useMemo)(() => {
-        return (0, timeline_field_row_layout_1.isTimelineFieldStacked)({ field, transform3DMode })
+        return !hidePathValue && (0, timeline_field_row_layout_1.isTimelineFieldStacked)({ field, transform3DMode })
             ? fieldRowBase
             : { ...fieldRowBase, height: field.rowHeight };
-    }, [field, transform3DMode]);
+    }, [field, hidePathValue, transform3DMode]);
     const canResetToDefault = (0, react_1.useMemo)(() => {
         if (!propStatus || propStatus.status === 'computed') {
             return false;
@@ -614,7 +616,7 @@ const TimelineSequencePropItem = ({ field, validatedLocation, rowDepth, nodePath
                 ...style,
             }, children: fieldValue }));
     }
-    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: fieldValue }) }));
+    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: hidePathValue ? (jsx_runtime_1.jsx(TimelineFieldLabel_1.TimelineFieldLabel, { rowDepth: rowDepth, selected: selection.selected || containsSelection, label: (_c = field.description) !== null && _c !== void 0 ? _c : field.key })) : (jsx_runtime_1.jsx(TimelineFieldRowContent_1.TimelineFieldRowContent, { field: field, rowDepth: rowDepth, selected: selection.selected || containsSelection, children: fieldValue })) }));
     return jsx_runtime_1.jsx(ContextMenu_1.ContextMenu, { getItems: getContextMenuItems, children: row });
 };
 exports.TimelineSequencePropItem = TimelineSequencePropItem;

package/dist/components/Timeline/TimelineSequenceRightEdgeDragHandle.js

@@ -925,7 +925,7 @@ const TimelineSequenceLeftEdgeDragHandleInner = ({ cursor, nodePathInfo, windowW
         background: colors_1.TRANSPARENT,
     };
     return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
-            jsx_runtime_1.jsx("div", { role: "separator", "aria-orientation": "vertical", title: "Drag to trim start", style: style, onPointerDown: onPointerDown }), trimTooltip === null ? null : (jsx_runtime_1.jsx(TimelineTrimTooltip_1.TimelineTrimTooltip, { state: trimTooltip, fps: fps }))] }));
+            jsx_runtime_1.jsx("div", { role: "separator", "aria-orientation": "vertical", "aria-label": "Drag to trim start", style: style, onPointerDown: onPointerDown }), trimTooltip === null ? null : (jsx_runtime_1.jsx(TimelineTrimTooltip_1.TimelineTrimTooltip, { state: trimTooltip, fps: fps }))] }));
 };
 exports.TimelineSequenceLeftEdgeDragHandle = react_1.default.memo(TimelineSequenceLeftEdgeDragHandleInner);
 const useTimelineSequenceFromDrag = ({ nodePathInfo, windowWidth, timelineDurationInFrames, onDragEnd, }) => {
@@ -1373,6 +1373,6 @@ const TimelineSequenceRightEdgeDragHandleInner = ({ cursor, nodePathInfo, mediaD
         background: colors_1.TRANSPARENT,
     };
     return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
-            jsx_runtime_1.jsx("div", { role: "separator", "aria-orientation": "vertical", title: "Drag to change duration", style: style, onPointerDown: onPointerDown }), trimTooltip === null ? null : (jsx_runtime_1.jsx(TimelineTrimTooltip_1.TimelineTrimTooltip, { state: trimTooltip, fps: fps }))] }));
+            jsx_runtime_1.jsx("div", { role: "separator", "aria-orientation": "vertical", "aria-label": "Drag to change duration", style: style, onPointerDown: onPointerDown }), trimTooltip === null ? null : (jsx_runtime_1.jsx(TimelineTrimTooltip_1.TimelineTrimTooltip, { state: trimTooltip, fps: fps }))] }));
 };
 exports.TimelineSequenceRightEdgeDragHandle = react_1.default.memo(TimelineSequenceRightEdgeDragHandleInner);

package/dist/components/Timeline/TimelineZoomControls.js

@@ -85,7 +85,7 @@ const TimelineZoomSlider = ({ maxWidth, minZoom, timelineViewportWidth }) => {
         zoom: (_b = zoomMap[videoConfig.id]) !== null && _b !== void 0 ? _b : null,
     });
     const roundedZoom = Math.round(zoom * 100) / 100;
-    return (jsx_runtime_1.jsx("input", { style: maxWidth === undefined ? undefined : { maxWidth }, title: `Timeline zoom (${roundedZoom}px/frame)`, alt: `Timeline zoom (${roundedZoom}px/frame)`, type: "range", min: get_timeline_max_zoom_1.TIMELINE_ZOOM_SLIDER_PROPS.min, max: get_timeline_max_zoom_1.TIMELINE_ZOOM_SLIDER_PROPS.max, step: get_timeline_max_zoom_1.TIMELINE_ZOOM_SLIDER_PROPS.step, value: (0, get_timeline_max_zoom_1.timelineZoomToSliderValue)({ zoom, minZoom }), onChange: onChange, className: "__remotion-timeline-slider", tabIndex: tabIndex }));
+    return (jsx_runtime_1.jsx("input", { style: maxWidth === undefined ? undefined : { maxWidth }, "aria-label": `Timeline zoom (${roundedZoom}px/frame)`, alt: `Timeline zoom (${roundedZoom}px/frame)`, type: "range", min: get_timeline_max_zoom_1.TIMELINE_ZOOM_SLIDER_PROPS.min, max: get_timeline_max_zoom_1.TIMELINE_ZOOM_SLIDER_PROPS.max, step: get_timeline_max_zoom_1.TIMELINE_ZOOM_SLIDER_PROPS.step, value: (0, get_timeline_max_zoom_1.timelineZoomToSliderValue)({ zoom, minZoom }), onChange: onChange, className: "__remotion-timeline-slider", tabIndex: tabIndex }));
 };
 const TimelineZoomControlsInner = ({ sliderMaxWidth }) => {
     var _a;
@@ -124,7 +124,7 @@ const TimelineZoomControlsInner = ({ sliderMaxWidth }) => {
         return null;
     }
     return (jsx_runtime_1.jsxs("div", { style: container, children: [
-            jsx_runtime_1.jsx(ActionTooltip_1.ActionTooltip, { label: "Zoom out", shortcut: null, delay: 800, dismissOnClick: true, children: jsx_runtime_1.jsx(ControlButton_1.ControlButton, { onClick: onMinusClicked, style: buttonStyle, title: "", "aria-label": "Zoom out timeline", type: "button", children: (color) => jsx_runtime_1.jsx(canvas_zoom_1.CanvasZoomOutIcon, { color: color }) }) }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.5 }), jsx_runtime_1.jsx(TimelineZoomSlider, { maxWidth: sliderMaxWidth, minZoom: minZoom, timelineViewportWidth: timelineViewportWidth }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.5 }), jsx_runtime_1.jsx(ActionTooltip_1.ActionTooltip, { label: "Zoom in", shortcut: null, delay: 800, dismissOnClick: true, children: jsx_runtime_1.jsx(ControlButton_1.ControlButton, { onClick: onPlusClicked, style: buttonStyle, title: "", "aria-label": "Zoom in timeline", type: "button", children: (color) => jsx_runtime_1.jsx(canvas_zoom_1.CanvasZoomIcon, { color: color }) }) })
+            jsx_runtime_1.jsx(ActionTooltip_1.ActionTooltip, { label: "Zoom out", shortcut: null, delay: 800, dismissOnClick: true, children: jsx_runtime_1.jsx(ControlButton_1.ControlButton, { onClick: onMinusClicked, style: buttonStyle, "aria-label": "Zoom out timeline", type: "button", children: (color) => jsx_runtime_1.jsx(canvas_zoom_1.CanvasZoomOutIcon, { color: color }) }) }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.5 }), jsx_runtime_1.jsx(TimelineZoomSlider, { maxWidth: sliderMaxWidth, minZoom: minZoom, timelineViewportWidth: timelineViewportWidth }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.5 }), jsx_runtime_1.jsx(ActionTooltip_1.ActionTooltip, { label: "Zoom in", shortcut: null, delay: 800, dismissOnClick: true, children: jsx_runtime_1.jsx(ControlButton_1.ControlButton, { onClick: onPlusClicked, style: buttonStyle, "aria-label": "Zoom in timeline", type: "button", children: (color) => jsx_runtime_1.jsx(canvas_zoom_1.CanvasZoomIcon, { color: color }) }) })
         ] }));
 };
 exports.TimelineZoomControls = react_1.default.memo(TimelineZoomControlsInner);

package/dist/components/Timeline/get-sequence-split-menu-item.js

@@ -28,12 +28,12 @@ const getSequenceSplitMenuItem = ({ nodePathInfo, sequence, propStatuses, splitF
     return {
         type: 'item',
         id: 'split-sequence',
-        label: (jsx_runtime_1.jsx("span", { style: {
+        label: (jsx_runtime_1.jsx("span", { role: "group", style: {
                 fontFamily: 'inherit',
                 fontSize: 'inherit',
                 lineHeight: 'inherit',
                 color: 'inherit',
-            }, title: disabledReason !== null && disabledReason !== void 0 ? disabledReason : 'Split at the playhead', children: "Split clip" })),
+            }, "aria-label": disabledReason !== null && disabledReason !== void 0 ? disabledReason : 'Split at the playhead', children: "Split clip" })),
         value: 'split-sequence',
         keyHint: null,
         leftItem: null,

package/dist/components/Timeline/use-timeline-expanded-tree.d.ts

@@ -2,7 +2,7 @@ import { type TSequence } from 'remotion';
 import type { SequenceNodePathInfo } from '../../helpers/get-timeline-sequence-sort-key';
 export declare const useTimelineSequenceHasExpandableContent: ({ sequence, nodePathInfo, selectedItems, }: {
     readonly sequence: TSequence;
-    readonly nodePathInfo: SequenceNodePathInfo;
+    readonly nodePathInfo: SequenceNodePathInfo | null;
     readonly selectedItems: readonly import("@remotion/canvas").CanvasSelectionItem[];
 }) => boolean;
 export declare const useTimelineExpandedTree: ({ sequence, nodePathInfo, includeTextContent, includeSourceControls, }: {

package/dist/components/Timeline/use-timeline-expanded-tree.js

@@ -14,6 +14,9 @@ const useTimelineSequenceHasExpandableContent = ({ sequence, nodePathInfo, selec
     const { getDragOverrides, getEffectDragOverrides } = (0, react_1.useContext)(remotion_1.Internals.VisualModeDragOverridesContext);
     const selectedRowKeys = (0, react_1.useMemo)(() => (0, timeline_expanded_filter_1.getSelectedTimelineExpandedRowKeys)(selectedItems), [selectedItems]);
     const selectHasExpandableContent = (0, react_1.useCallback)((runtimeValues) => {
+        if (nodePathInfo === null) {
+            return false;
+        }
         const tree = (0, timeline_layout_1.buildTimelineTree)({
             sequence,
             nodePathInfo,