@remotion/studio 4.0.528 → 4.0.529

package/dist/components/RenderModal/WebRenderModalAdvanced.js

@@ -162,7 +162,7 @@ const WebRenderModalAdvanced = ({ renderMode, delayRenderTimeout, setDelayRender
                             jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.5 }), jsx_runtime_1.jsx(OptionExplainerBubble_1.WebRendererOptionExplainerBubble, { apiName: "mediaCacheSizeInBytes", id: "mediaCacheSizeInBytesOption" })
                         ] }), jsx_runtime_1.jsx("div", { style: layout_2.rightRow, children: jsx_runtime_1.jsx(Checkbox_1.Checkbox, { checked: mediaCacheSizeInBytes !== null, onChange: toggleCustomMediaCacheSizeInBytes, name: "media-cache-size" }) })
                 ] }), mediaCacheSizeInBytes === null ? null : (jsx_runtime_1.jsx(NumberSetting_1.NumberSetting, { name: "@remotion/media cache size", formatter: (w) => `${w} bytes`, min: 0, max: 10000000000, step: 10 * 1024 * 1024, value: mediaCacheSizeInBytes, onValueChanged: changeMediaCacheSizeInBytes })), renderMode === 'video' ? (jsx_runtime_1.jsxs("div", { style: layout_2.optionRow, children: [
-                    jsx_runtime_1.jsx("div", { style: layout_2.label, children: "Hardware Acceleration" }), jsx_runtime_1.jsx("div", { style: layout_2.rightRow, children: jsx_runtime_1.jsx(ComboBox_1.Combobox, { values: hardwareAccelerationOptions, selectedId: hardwareAcceleration, title: "Hardware Acceleration" }) })
+                    jsx_runtime_1.jsx("div", { style: layout_2.label, children: "Hardware Acceleration" }), jsx_runtime_1.jsx("div", { style: layout_2.rightRow, children: jsx_runtime_1.jsx(ComboBox_1.Combobox, { values: hardwareAccelerationOptions, selectedId: hardwareAcceleration, "aria-label": "Hardware Acceleration" }) })
                 ] })) : null, jsx_runtime_1.jsxs("div", { style: layout_2.optionRow, children: [
                     jsx_runtime_1.jsxs("div", { style: layout_2.label, children: ["Allow HTML-in-canvas ",
                             jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.5 }), jsx_runtime_1.jsx(OptionExplainerBubble_1.WebRendererOptionExplainerBubble, { apiName: "allowHtmlInCanvas", id: "allowHtmlInCanvasOption" })
@@ -171,7 +171,7 @@ const WebRenderModalAdvanced = ({ renderMode, delayRenderTimeout, setDelayRender
                     jsx_runtime_1.jsxs("div", { style: layout_2.optionRow, children: [
                             jsx_runtime_1.jsxs("div", { style: layout_2.label, children: ["Page Responsiveness ",
                                     jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.5 }), jsx_runtime_1.jsx(OptionExplainerBubble_1.WebRendererCustomOptionExplainerBubble, { apiName: "pageResponsiveness", description: jsx_runtime_1.jsx(PageResponsivenessDescription, {}), docLink: "https://www.remotion.dev/docs/client-side-rendering/page-responsiveness", name: "Page responsiveness" })
-                                ] }), jsx_runtime_1.jsx("div", { style: layout_2.rightRow, children: jsx_runtime_1.jsx(ComboBox_1.Combobox, { values: pageResponsivenessOptions, selectedId: selectedPageResponsiveness, title: "Page Responsiveness" }) })
+                                ] }), jsx_runtime_1.jsx("div", { style: layout_2.rightRow, children: jsx_runtime_1.jsx(ComboBox_1.Combobox, { values: pageResponsivenessOptions, selectedId: selectedPageResponsiveness, "aria-label": "Page Responsiveness" }) })
                         ] }), typeof pageResponsiveness === 'number' ? (jsx_runtime_1.jsx(NumberSetting_1.NumberSetting, { name: "Responsiveness Interval", formatter: (v) => `${v}ms`, min: 1, max: 1000000000, step: 1, value: pageResponsiveness, onValueChanged: setCustomPageResponsiveness })) : null] }))] }));
 };
 exports.WebRenderModalAdvanced = WebRenderModalAdvanced;

package/dist/components/RenderModal/WebRenderModalAudio.js

@@ -73,11 +73,11 @@ const WebRenderModalAudio = ({ renderMode, muted, setMuted, audioCodec, setAudio
     return (jsx_runtime_1.jsxs("div", { style: container, className: is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME, children: [isAudioOnly ? null : (jsx_runtime_1.jsx(MutedSetting_1.MutedSetting, { enforceAudioTrack: false, muted: muted, setMuted: setMuted })), showAudioSettings ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [isAudioOnly ? null : jsx_runtime_1.jsx(RenderModalHr_1.RenderModalHr, {}), jsx_runtime_1.jsxs("div", { style: layout_2.optionRow, children: [
                             jsx_runtime_1.jsxs("div", { style: layout_2.label, children: ["Audio Quality",
                                     jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.5 })
-                                ] }), jsx_runtime_1.jsx("div", { style: layout_2.rightRow, children: jsx_runtime_1.jsx(ComboBox_1.Combobox, { values: audioBitrateOptions, selectedId: audioBitrate, title: "Audio Quality" }) })
+                                ] }), jsx_runtime_1.jsx("div", { style: layout_2.rightRow, children: jsx_runtime_1.jsx(ComboBox_1.Combobox, { values: audioBitrateOptions, selectedId: audioBitrate, "aria-label": "Audio Quality" }) })
                         ] }), showAudioCodecSetting ? (jsx_runtime_1.jsxs("div", { style: layout_2.optionRow, children: [
                             jsx_runtime_1.jsxs("div", { style: layout_2.label, children: ["Audio Codec",
                                     jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.5 })
-                                ] }), jsx_runtime_1.jsx("div", { style: layout_2.rightRow, children: jsx_runtime_1.jsx(ComboBox_1.Combobox, { values: audioCodecOptions, selectedId: audioCodec, title: "Audio Codec" }) })
+                                ] }), jsx_runtime_1.jsx("div", { style: layout_2.rightRow, children: jsx_runtime_1.jsx(ComboBox_1.Combobox, { values: audioCodecOptions, selectedId: audioCodec, "aria-label": "Audio Codec" }) })
                         ] })) : null, showAudioCodecSetting && effectiveAudioCodec !== audioCodec ? (jsx_runtime_1.jsxs("div", { style: fallbackNoticeStyle, children: [humanReadableWebAudioCodec(audioCodec), " is not available in this browser. Using ", humanReadableWebAudioCodec(effectiveAudioCodec), ' ', "instead."] })) : null] })) : null] }));
 };
 exports.WebRenderModalAudio = WebRenderModalAudio;

package/dist/components/RenderModal/WebRenderModalBasic.js

@@ -115,16 +115,16 @@ const WebRenderModalBasic = ({ renderMode, resolvedComposition, imageFormat, set
                             jsx_runtime_1.jsx("div", { style: layout_2.label, children: "Frame" }), jsx_runtime_1.jsx("div", { style: layout_2.rightRow, children: jsx_runtime_1.jsx(RemInput_1.RightAlignInput, { children: jsx_runtime_1.jsx(InputDragger_1.InputDragger, { value: frame, onTextChange: onFrameChanged, placeholder: `0-${resolvedComposition.durationInFrames - 1}`, onValueChange: onFrameSetDirectly, name: "frame", step: 1, min: 0, status: "ok", max: resolvedComposition.durationInFrames - 1, rightAlign: true }) }) })
                         ] })) : null] })) : (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
                     jsx_runtime_1.jsxs("div", { style: layout_2.optionRow, children: [
-                            jsx_runtime_1.jsx("div", { style: layout_2.label, children: "Container" }), jsx_runtime_1.jsx("div", { style: layout_2.rightRow, children: jsx_runtime_1.jsx(ComboBox_1.Combobox, { values: containerOptions, selectedId: container, title: "Container" }) })
+                            jsx_runtime_1.jsx("div", { style: layout_2.label, children: "Container" }), jsx_runtime_1.jsx("div", { style: layout_2.rightRow, children: jsx_runtime_1.jsx(ComboBox_1.Combobox, { values: containerOptions, selectedId: container, "aria-label": "Container" }) })
                         ] }), renderMode === 'video' ? (jsx_runtime_1.jsxs("div", { style: layout_2.optionRow, children: [
                             jsx_runtime_1.jsxs("div", { style: layout_2.label, children: ["Codec",
                                     jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.5 }), jsx_runtime_1.jsx(OptionExplainerBubble_1.WebRendererOptionExplainerBubble, { apiName: "codec", id: "videoCodecOption" })
-                                ] }), jsx_runtime_1.jsx("div", { style: layout_2.rightRow, children: jsx_runtime_1.jsx(ComboBox_1.Combobox, { values: codecOptions, selectedId: effectiveVideoCodec, title: "Codec" }) })
+                                ] }), jsx_runtime_1.jsx("div", { style: layout_2.rightRow, children: jsx_runtime_1.jsx(ComboBox_1.Combobox, { values: codecOptions, selectedId: effectiveVideoCodec, "aria-label": "Codec" }) })
                         ] })) : null, jsx_runtime_1.jsx(FrameRangeSetting_1.FrameRangeSetting, { durationInFrames: resolvedComposition.durationInFrames, startFrame: startFrame !== null && startFrame !== void 0 ? startFrame : 0, endFrame: endFrame !== null && endFrame !== void 0 ? endFrame : resolvedComposition.durationInFrames - 1, setStartFrame: setStartFrame, setEndFrame: setEndFrame })
                 ] })), jsx_runtime_1.jsx(RenderModalOutputName_1.RenderModalOutputName, { ariaLabel: window.remotion_isReadOnlyStudio ? 'Download name' : 'Output name', existingOutputPath: null, existence: false, inputStyle: layout_2.input, outName: outName, onValueChange: onOutNameChange, validationMessage: validationMessage, label: window.remotion_isReadOnlyStudio ? 'Download name' : 'Output name' }), jsx_runtime_1.jsxs("div", { style: layout_2.optionRow, children: [
                     jsx_runtime_1.jsxs("div", { style: layout_2.label, children: ["Log Level ",
                             jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.5 }), jsx_runtime_1.jsx(OptionExplainerBubble_1.WebRendererOptionExplainerBubble, { apiName: "logLevel", id: "logLevelOption" })
-                        ] }), jsx_runtime_1.jsx("div", { style: layout_2.rightRow, children: jsx_runtime_1.jsx(ComboBox_1.Combobox, { values: logLevelOptions, selectedId: logLevel, title: "Log Level" }) })
+                        ] }), jsx_runtime_1.jsx("div", { style: layout_2.rightRow, children: jsx_runtime_1.jsx(ComboBox_1.Combobox, { values: logLevelOptions, selectedId: logLevel, "aria-label": "Log Level" }) })
                 ] })
         ] }));
 };

package/dist/components/RenderModal/WebRenderModalPicture.js

@@ -20,7 +20,7 @@ const WebRenderModalPicture = ({ renderMode, videoBitrate, setVideoBitrate, keyf
     return (jsx_runtime_1.jsxs("div", { style: tabContainer, children: [
             jsx_runtime_1.jsx(ScaleSetting_1.ScaleSetting, { scale: scale, setScale: setScale, compositionWidth: compositionWidth, compositionHeight: compositionHeight }), renderMode !== 'video' ? null : (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
                     jsx_runtime_1.jsxs("div", { style: layout_1.optionRow, children: [
-                            jsx_runtime_1.jsx("div", { style: layout_1.label, children: "Quality" }), jsx_runtime_1.jsx("div", { style: layout_1.rightRow, children: jsx_runtime_1.jsx(ComboBox_1.Combobox, { values: qualityOptions, selectedId: videoBitrate, title: "Quality" }) })
+                            jsx_runtime_1.jsx("div", { style: layout_1.label, children: "Quality" }), jsx_runtime_1.jsx("div", { style: layout_1.rightRow, children: jsx_runtime_1.jsx(ComboBox_1.Combobox, { values: qualityOptions, selectedId: videoBitrate, "aria-label": "Quality" }) })
                         ] }), jsx_runtime_1.jsx(NumberSetting_1.NumberSetting, { name: "Keyframe Interval", formatter: (v) => `${v}s`, min: 1, max: 300, step: 1, value: keyframeIntervalInSeconds, onValueChanged: setKeyframeIntervalInSeconds }), jsx_runtime_1.jsxs("div", { style: layout_1.optionRow, children: [
                             jsx_runtime_1.jsx("div", { style: layout_1.label, children: "Transparent" }), jsx_runtime_1.jsx("div", { style: layout_1.rightRow, children: jsx_runtime_1.jsx(Checkbox_1.Checkbox, { checked: transparent, onChange: onTransparentChanged, name: "transparent" }) })
                         ] })

package/dist/components/RenderQueue/CaptionQueueItem.js

@@ -134,7 +134,7 @@ const CaptionQueueItem = ({ job, selected }) => {
     }, [job]);
     return (jsx_runtime_1.jsxs(layout_1.Row, { "data-render-queue-item": job.id, style: containerStyle, align: "center", onClick: onClick, onPointerEnter: onPointerEnter, onPointerLeave: onPointerLeave, className: selected ? item_style_1.RENDER_QUEUE_ITEM_SELECTED_CLASSNAME : undefined, children: [
             jsx_runtime_1.jsx(CaptionJobStatus, { job: job }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 1 }), jsx_runtime_1.jsxs("div", { style: right, children: [
-                    jsx_runtime_1.jsx("div", { style: title, children: job.displayName }), jsx_runtime_1.jsx("div", { style: subtitleContainer, children: job.status === 'cancelled' ? (jsx_runtime_1.jsx(RenderQueueCancelledMessage_1.RenderQueueCancelledMessage, {})) : job.status === 'failed' ? (jsx_runtime_1.jsx(QueueJobError_1.QueueJobError, { error: job.error, modalTitle: "Transcription failed" })) : (jsx_runtime_1.jsx("span", { style: subtitle, title: message, children: message })) })
+                    jsx_runtime_1.jsx("div", { style: title, children: job.displayName }), jsx_runtime_1.jsx("div", { style: subtitleContainer, children: job.status === 'cancelled' ? (jsx_runtime_1.jsx(RenderQueueCancelledMessage_1.RenderQueueCancelledMessage, {})) : job.status === 'failed' ? (jsx_runtime_1.jsx(QueueJobError_1.QueueJobError, { error: job.error, modalTitle: "Transcription failed" })) : (jsx_runtime_1.jsx("span", { role: "group", style: subtitle, "aria-label": message, children: message })) })
                 ] }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 1 }), job.status === 'done' ||
                 job.status === 'failed' ||
                 job.status === 'cancelled' ? (jsx_runtime_1.jsx(RenderQueueRepeat_1.RenderQueueRepeatItem, { job: job })) : null, job.status === 'running' ? (jsx_runtime_1.jsx(RenderQueueItemCancelButton_1.RenderQueueCancelButton, { job: job })) : job.status === 'saving' ? null : (jsx_runtime_1.jsx(ActionTooltip_1.ActionTooltip, { label: "Clear", shortcut: null, delay: 800, dismissOnClick: true, children: jsx_runtime_1.jsx(InlineAction_1.InlineAction, { renderAction: renderRemoveAction, onClick: onRemove, "aria-label": "Clear", variant: null }) }))] }));

package/dist/components/RenderQueue/QueueJobError.js

@@ -19,6 +19,6 @@ const QueueJobError = ({ error, modalTitle }) => {
             error: { message: error.message, stack: (_a = error.stack) !== null && _a !== void 0 ? _a : null },
         });
     }, [error, modalTitle, setSelectedModal]);
-    return (jsx_runtime_1.jsx("button", { onClick: onClick, type: "button", style: errorStyle, title: error.message, children: error.message }));
+    return (jsx_runtime_1.jsx("button", { onClick: onClick, type: "button", style: errorStyle, "aria-label": error.message, children: error.message }));
 };
 exports.QueueJobError = QueueJobError;

package/dist/components/RenderQueue/RenderQueueError.js

@@ -21,6 +21,6 @@ const RenderQueueError = ({ job }) => {
     if (job.status !== 'failed') {
         throw new Error('should not have rendered this component');
     }
-    return (jsx_runtime_1.jsx("button", { onClick: onClick, type: "button", style: outputLocation, tabIndex: tabIndex, title: job.error.message, children: job.error.message }));
+    return (jsx_runtime_1.jsx("button", { onClick: onClick, type: "button", style: outputLocation, tabIndex: tabIndex, "aria-label": job.error.message, children: job.error.message }));
 };
 exports.RenderQueueError = RenderQueueError;

package/dist/components/RenderQueue/RenderQueueOutputName.js

@@ -20,6 +20,6 @@ const RenderQueueOutputName = ({ job }) => {
         }
         return job.outName;
     };
-    return (jsx_runtime_1.jsx("span", { style: style, title: getTitle(), children: job.outName }));
+    return (jsx_runtime_1.jsx("span", { role: "group", style: style, "aria-label": getTitle(), children: job.outName }));
 };
 exports.RenderQueueOutputName = RenderQueueOutputName;

package/dist/components/RenderQueue/RenderQueueProgressMessage.js

@@ -27,6 +27,6 @@ const RenderQueueProgressMessage = ({ job }) => {
     const message = isClientJob
         ? (0, client_render_progress_1.getClientRenderProgressMessage)(job.progress)
         : job.progress.message;
-    return (jsx_runtime_1.jsx("button", { onClick: onClick, type: "button", style: outputLocation, tabIndex: tabIndex, title: message, children: message }));
+    return (jsx_runtime_1.jsx("button", { onClick: onClick, type: "button", style: outputLocation, tabIndex: tabIndex, "aria-label": message, children: message }));
 };
 exports.RenderQueueProgressMessage = RenderQueueProgressMessage;

package/dist/components/RenderQueue/VideoMattingQueueItem.js

@@ -120,7 +120,7 @@ const VideoMattingQueueItem = ({ job, selected }) => {
     const renderRemove = (0, react_1.useCallback)((color) => (jsx_runtime_1.jsx("svg", { style: removeIcon, viewBox: "0 0 320 512", children: jsx_runtime_1.jsx("path", { fill: color, d: "M310.6 150.6 205.3 256l105.3 105.4-45.3 45.3L160 301.3 54.6 406.6 9.4 361.4 114.7 256 9.4 150.6l45.2-45.2L160 210.7l105.3-105.3z" }) })), []);
     return (jsx_runtime_1.jsxs(layout_1.Row, { "data-render-queue-item": job.id, style: style, align: "center", onClick: onClick, onPointerEnter: () => setHovered(true), onPointerLeave: () => setHovered(false), children: [
             jsx_runtime_1.jsx(Status, { job: job }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 1 }), jsx_runtime_1.jsxs("div", { style: right, children: [
-                    jsx_runtime_1.jsx("div", { style: title, children: job.displayName }), jsx_runtime_1.jsx("div", { style: subtitles, title: tooltip, children: job.status === 'cancelled' ? (jsx_runtime_1.jsx(RenderQueueCancelledMessage_1.RenderQueueCancelledMessage, {})) : job.status === 'failed' ? (jsx_runtime_1.jsx(QueueJobError_1.QueueJobError, { error: job.error, modalTitle: "Background removal failed" })) : (messages.map((message) => (jsx_runtime_1.jsx("span", { style: subtitle, children: message }, message)))) })
+                    jsx_runtime_1.jsx("div", { style: title, children: job.displayName }), jsx_runtime_1.jsx("div", { role: "group", style: subtitles, "aria-label": tooltip, children: job.status === 'cancelled' ? (jsx_runtime_1.jsx(RenderQueueCancelledMessage_1.RenderQueueCancelledMessage, {})) : job.status === 'failed' ? (jsx_runtime_1.jsx(QueueJobError_1.QueueJobError, { error: job.error, modalTitle: "Background removal failed" })) : (messages.map((message) => (jsx_runtime_1.jsx("span", { style: subtitle, children: message }, message)))) })
                 ] }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 1 }), done ? (jsx_runtime_1.jsx(ActionTooltip_1.ActionTooltip, { label: "Reveal output", shortcut: null, delay: 800, dismissOnClick: true, children: jsx_runtime_1.jsx(InlineDropdown_1.InlineDropdown, { renderAction: (color) => (jsx_runtime_1.jsx(ellipsis_1.EllipsisIcon, { fill: color, svgProps: ellipsisIconStyle })), "aria-label": "Reveal output", values: revealItems, variant: null }) })) : null, job.status === 'done' ||
                 job.status === 'failed' ||
                 job.status === 'cancelled' ? (jsx_runtime_1.jsx(RenderQueueRepeat_1.RenderQueueRepeatItem, { job: job })) : null, job.status === 'running' ? (jsx_runtime_1.jsx(RenderQueueItemCancelButton_1.RenderQueueCancelButton, { job: job })) : job.status === 'saving' ? null : (jsx_runtime_1.jsx(ActionTooltip_1.ActionTooltip, { label: "Clear", shortcut: null, delay: 800, dismissOnClick: true, children: jsx_runtime_1.jsx(InlineAction_1.InlineAction, { renderAction: renderRemove, onClick: onRemove, "aria-label": "Clear", variant: null }) }))] }));

package/dist/components/RenderingSettings.js

@@ -331,11 +331,11 @@ const RenderingSettings = () => {
     }
     return (jsx_runtime_1.jsxs("div", { style: container, children: [
             jsx_runtime_1.jsx("p", { style: dividerLabel, children: "Output" }), jsx_runtime_1.jsxs("div", { style: layout_2.optionRow, children: [
-                    jsx_runtime_1.jsx("div", { style: layout_2.label, children: "Default codec" }), jsx_runtime_1.jsx("div", { style: layout_2.rightRow, children: jsx_runtime_1.jsx(ComboBox_1.Combobox, { values: codecValues, selectedId: codec !== null && codec !== void 0 ? codec : REMOTION_DEFAULT, title: "Codec" }) })
+                    jsx_runtime_1.jsx("div", { style: layout_2.label, children: "Default codec" }), jsx_runtime_1.jsx("div", { style: layout_2.rightRow, children: jsx_runtime_1.jsx(ComboBox_1.Combobox, { values: codecValues, selectedId: codec !== null && codec !== void 0 ? codec : REMOTION_DEFAULT, "aria-label": "Codec" }) })
                 ] }), jsx_runtime_1.jsx(NumberSetting_1.NumberSetting, { name: "Scale", value: scale, onValueChanged: changeScale, min: 0.1, step: 0.1 }), jsx_runtime_1.jsxs("div", { style: layout_2.optionRow, children: [
-                    jsx_runtime_1.jsx("div", { style: layout_2.label, children: "Still image format" }), jsx_runtime_1.jsx("div", { style: layout_2.rightRow, children: jsx_runtime_1.jsx(ComboBox_1.Combobox, { values: stillFormatValues, selectedId: stillImageFormat !== null && stillImageFormat !== void 0 ? stillImageFormat : REMOTION_DEFAULT, title: "Still image format" }) })
+                    jsx_runtime_1.jsx("div", { style: layout_2.label, children: "Still image format" }), jsx_runtime_1.jsx("div", { style: layout_2.rightRow, children: jsx_runtime_1.jsx(ComboBox_1.Combobox, { values: stillFormatValues, selectedId: stillImageFormat !== null && stillImageFormat !== void 0 ? stillImageFormat : REMOTION_DEFAULT, "aria-label": "Still image format" }) })
                 ] }), jsx_runtime_1.jsxs("div", { style: layout_2.optionRow, children: [
-                    jsx_runtime_1.jsx("div", { style: layout_2.label, children: "Video frame format" }), jsx_runtime_1.jsx("div", { style: layout_2.rightRow, children: jsx_runtime_1.jsx(ComboBox_1.Combobox, { values: videoFormatValues, selectedId: videoImageFormat !== null && videoImageFormat !== void 0 ? videoImageFormat : REMOTION_DEFAULT, title: "Video frame format" }) })
+                    jsx_runtime_1.jsx("div", { style: layout_2.label, children: "Video frame format" }), jsx_runtime_1.jsx("div", { style: layout_2.rightRow, children: jsx_runtime_1.jsx(ComboBox_1.Combobox, { values: videoFormatValues, selectedId: videoImageFormat !== null && videoImageFormat !== void 0 ? videoImageFormat : REMOTION_DEFAULT, "aria-label": "Video frame format" }) })
                 ] }), jsx_runtime_1.jsx("p", { style: sectionTitle, children: "Encoding" }), client_1.BrowserSafeApis.codecSupportsCrf(resolvedCodec) &&
                 client_1.BrowserSafeApis.codecSupportsVideoBitrate(resolvedCodec) ? (jsx_runtime_1.jsxs("div", { style: layout_2.optionRow, children: [
                     jsx_runtime_1.jsx("div", { style: layout_2.label, children: "Quality control" }), jsx_runtime_1.jsx("div", { style: layout_2.rightRow, children: jsx_runtime_1.jsx(SegmentedControl_1.SegmentedControl, { items: qualityModeValues, needsWrapping: true }) })
@@ -345,11 +345,11 @@ const RenderingSettings = () => {
                 client_1.BrowserSafeApis.codecSupportsVideoBitrate(resolvedCodec) ? (jsx_runtime_1.jsxs("div", { style: layout_2.optionRow, children: [
                     jsx_runtime_1.jsx("div", { style: layout_2.label, children: "Video bitrate" }), jsx_runtime_1.jsx("div", { style: layout_2.rightRow, children: jsx_runtime_1.jsx(RemInput_1.RemotionInput, { style: { ...layout_2.input, ...fullWidth }, value: videoBitrate, onChange: onVideoBitrateChange, onBlur: onVideoBitrateBlur, status: "ok", rightAlign: true }) })
                 ] })) : null, resolvedCodec === 'prores' ? (jsx_runtime_1.jsxs("div", { style: layout_2.optionRow, children: [
-                    jsx_runtime_1.jsx("div", { style: layout_2.label, children: "ProRes profile" }), jsx_runtime_1.jsx("div", { style: layout_2.rightRow, children: jsx_runtime_1.jsx(ComboBox_1.Combobox, { values: profileValues, selectedId: proResProfile !== null && proResProfile !== void 0 ? proResProfile : REMOTION_DEFAULT, title: "ProRes profile" }) })
+                    jsx_runtime_1.jsx("div", { style: layout_2.label, children: "ProRes profile" }), jsx_runtime_1.jsx("div", { style: layout_2.rightRow, children: jsx_runtime_1.jsx(ComboBox_1.Combobox, { values: profileValues, selectedId: proResProfile !== null && proResProfile !== void 0 ? proResProfile : REMOTION_DEFAULT, "aria-label": "ProRes profile" }) })
                 ] })) : null, resolvedCodec === 'h264' ? (jsx_runtime_1.jsxs("div", { style: layout_2.optionRow, children: [
-                    jsx_runtime_1.jsx("div", { style: layout_2.label, children: "x264 preset" }), jsx_runtime_1.jsx("div", { style: layout_2.rightRow, children: jsx_runtime_1.jsx(ComboBox_1.Combobox, { values: presetValues, selectedId: x264Preset !== null && x264Preset !== void 0 ? x264Preset : REMOTION_DEFAULT, title: "x264 preset" }) })
+                    jsx_runtime_1.jsx("div", { style: layout_2.label, children: "x264 preset" }), jsx_runtime_1.jsx("div", { style: layout_2.rightRow, children: jsx_runtime_1.jsx(ComboBox_1.Combobox, { values: presetValues, selectedId: x264Preset !== null && x264Preset !== void 0 ? x264Preset : REMOTION_DEFAULT, "aria-label": "x264 preset" }) })
                 ] })) : null, jsx_runtime_1.jsx("p", { style: sectionTitle, children: "Audio" }), jsx_runtime_1.jsxs("div", { style: layout_2.optionRow, children: [
-                    jsx_runtime_1.jsx("div", { style: layout_2.label, children: "Audio codec" }), jsx_runtime_1.jsx("div", { style: layout_2.rightRow, children: jsx_runtime_1.jsx(ComboBox_1.Combobox, { values: audioCodecValues, selectedId: audioCodec !== null && audioCodec !== void 0 ? audioCodec : REMOTION_DEFAULT, title: "Audio codec" }) })
+                    jsx_runtime_1.jsx("div", { style: layout_2.label, children: "Audio codec" }), jsx_runtime_1.jsx("div", { style: layout_2.rightRow, children: jsx_runtime_1.jsx(ComboBox_1.Combobox, { values: audioCodecValues, selectedId: audioCodec !== null && audioCodec !== void 0 ? audioCodec : REMOTION_DEFAULT, "aria-label": "Audio codec" }) })
                 ] }), jsx_runtime_1.jsx("p", { style: sectionTitle, children: "Performance" }), jsx_runtime_1.jsx(NumberSetting_1.NumberSetting, { name: "Concurrency", value: concurrency, onValueChanged: changeConcurrency, min: renderDefaults.minConcurrency, max: renderDefaults.maxConcurrency, step: 1 }), (error !== null && error !== void 0 ? error : settingsError) ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
                     jsx_runtime_1.jsx(layout_1.Spacing, { y: 1, block: true }), jsx_runtime_1.jsx("div", { style: { paddingLeft: 16, paddingRight: 16 }, children: jsx_runtime_1.jsx(ValidationMessage_1.ValidationMessage, { message: (_a = error !== null && error !== void 0 ? error : settingsError) !== null && _a !== void 0 ? _a : '', align: "flex-start", type: "error" }) })
                 ] })) : null, jsx_runtime_1.jsx(layout_1.Spacing, { y: 2, block: true })

package/dist/components/RulersAndGuidesToggle.js

@@ -36,6 +36,6 @@ const RulersAndGuidesToggle = ({ showGuides }) => {
         : editorShowRulers
             ? 'Hide rulers'
             : 'Show rulers';
-    return (jsx_runtime_1.jsx(ActionTooltip_1.ActionTooltip, { label: showGuides ? 'Rulers and Guides' : 'Rulers', shortcut: shortcutsDisabled ? null : shortcut, delay: 800, dismissOnClick: false, children: jsx_runtime_1.jsx(ControlButton_1.ControlButton, { title: "", "aria-label": accessibilityLabel, "aria-keyshortcuts": shortcutsDisabled ? undefined : ariaShortcut || undefined, "aria-pressed": rulersOrGuidesAreVisible, onClick: onClick, style: buttonStyle, children: (color) => (jsx_runtime_1.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 576 512", style: { width: 18, height: 18 }, "aria-hidden": "true", focusable: "false", children: jsx_runtime_1.jsx("path", { fill: rulersOrGuidesAreVisible ? colors_1.BLUE : color, d: "M525.9 154.2L186.5 493.6c-6.2 6.2-16.4 6.2-22.6 0L50.7 380.5c-6.2-6.2-6.2-16.4 0-22.6l33.9-33.9 56.6 56.6c6.2 6.2 16.4 6.2 22.6 0s6.2-16.4 0-22.6l-56.6-56.6 39.6-39.6 33.9 33.9c6.2 6.2 16.4 6.2 22.6 0s6.2-16.4 0-22.6l-33.9-33.9 39.6-39.6 56.6 56.6c6.2 6.2 16.4 6.2 22.6 0s6.2-16.4 0-22.6l-56.6-56.6 39.6-39.6 33.9 33.9c6.2 6.2 16.4 6.2 22.6 0s6.2-16.4 0-22.6l-33.9-33.9 39.6-39.6 56.6 56.6c6.2 6.2 16.4 6.2 22.6 0s6.2-16.4 0-22.6l-56.6-56.6 33.9-33.9c6.2-6.2 16.4-6.2 22.6 0L525.9 131.5c6.2 6.2 6.2 16.4 0 22.6zM73.3 289.9L28.1 335.2c-18.7 18.7-18.7 49.1 0 67.9L141.2 516.2c18.7 18.7 49.1 18.7 67.9 0L548.5 176.8c18.7-18.7 18.7-49.1 0-67.9L435.4-4.2C416.6-23 386.2-23 367.5-4.2 77.1 286.2 140.3 223 73.3 289.9z" }) })) }) }));
+    return (jsx_runtime_1.jsx(ActionTooltip_1.ActionTooltip, { label: showGuides ? 'Rulers and Guides' : 'Rulers', shortcut: shortcutsDisabled ? null : shortcut, delay: 800, dismissOnClick: false, children: jsx_runtime_1.jsx(ControlButton_1.ControlButton, { "aria-label": accessibilityLabel, "aria-keyshortcuts": shortcutsDisabled ? undefined : ariaShortcut || undefined, "aria-pressed": rulersOrGuidesAreVisible, onClick: onClick, style: buttonStyle, children: (color) => (jsx_runtime_1.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 576 512", style: { width: 18, height: 18 }, "aria-hidden": "true", focusable: "false", children: jsx_runtime_1.jsx("path", { fill: rulersOrGuidesAreVisible ? colors_1.BLUE : color, d: "M525.9 154.2L186.5 493.6c-6.2 6.2-16.4 6.2-22.6 0L50.7 380.5c-6.2-6.2-6.2-16.4 0-22.6l33.9-33.9 56.6 56.6c6.2 6.2 16.4 6.2 22.6 0s6.2-16.4 0-22.6l-56.6-56.6 39.6-39.6 33.9 33.9c6.2 6.2 16.4 6.2 22.6 0s6.2-16.4 0-22.6l-33.9-33.9 39.6-39.6 56.6 56.6c6.2 6.2 16.4 6.2 22.6 0s6.2-16.4 0-22.6l-56.6-56.6 39.6-39.6 33.9 33.9c6.2 6.2 16.4 6.2 22.6 0s6.2-16.4 0-22.6l-33.9-33.9 39.6-39.6 56.6 56.6c6.2 6.2 16.4 6.2 22.6 0s6.2-16.4 0-22.6l-56.6-56.6 33.9-33.9c6.2-6.2 16.4-6.2 22.6 0L525.9 131.5c6.2 6.2 6.2 16.4 0 22.6zM73.3 289.9L28.1 335.2c-18.7 18.7-18.7 49.1 0 67.9L141.2 516.2c18.7 18.7 49.1 18.7 67.9 0L548.5 176.8c18.7-18.7 18.7-49.1 0-67.9L435.4-4.2C416.6-23 386.2-23 367.5-4.2 77.1 286.2 140.3 223 73.3 289.9z" }) })) }) }));
 };
 exports.RulersAndGuidesToggle = RulersAndGuidesToggle;

package/dist/components/SegmentedButton.d.ts

@@ -8,7 +8,6 @@ type SegmentedButtonSegmentCommon = {
     readonly renderContent: (color: string) => React.ReactNode;
     readonly segmentId: string;
     readonly style: React.CSSProperties | null;
-    readonly title: string | null;
     readonly tooltipLabel: string | null;
 };
 export type SegmentedButtonSegment = SegmentedButtonSegmentCommon & ({
@@ -25,6 +24,5 @@ export type SegmentedButtonSegment = SegmentedButtonSegmentCommon & ({
 export declare const SegmentedButton: React.FC<{
     readonly segments: SegmentedButtonSegment[];
     readonly style: React.CSSProperties | null;
-    readonly title: string | null;
 }>;
 export {};

package/dist/components/SegmentedButton.js

@@ -80,7 +80,7 @@ const preventMouseFocus = (event) => {
     event.preventDefault();
 };
 const SegmentedButtonAction = ({ index, segment, segmentCount }) => {
-    var _a, _b;
+    var _a;
     const { tabIndex } = (0, z_index_1.useZIndex)();
     const style = (0, react_1.useMemo)(() => {
         return {
@@ -108,14 +108,14 @@ const SegmentedButtonAction = ({ index, segment, segmentCount }) => {
         (_a = segment.onPointerDown) === null || _a === void 0 ? void 0 : _a.call(segment, event);
         preventPointerFocus(event);
     }, [segment]);
-    const button = (jsx_runtime_1.jsx("button", { "aria-label": segment.ariaLabel, className: `${hoverable_1.HOVERABLE_CLASS_NAME} ${hoverable_1.FOCUS_VISIBLE_ONLY_CLASS_NAME}`, disabled: segment.disabled, id: (_a = segment.buttonId) !== null && _a !== void 0 ? _a : undefined, onClick: onClick, onMouseDown: preventMouseFocus, onPointerDown: onPointerDown, style: style, tabIndex: tabIndex, title: (_b = segment.title) !== null && _b !== void 0 ? _b : undefined, type: "button", children: segment.renderContent(colors_1.CURRENT_COLOR) }));
+    const button = (jsx_runtime_1.jsx("button", { "aria-label": segment.ariaLabel, className: `${hoverable_1.HOVERABLE_CLASS_NAME} ${hoverable_1.FOCUS_VISIBLE_ONLY_CLASS_NAME}`, disabled: segment.disabled, id: (_a = segment.buttonId) !== null && _a !== void 0 ? _a : undefined, onClick: onClick, onMouseDown: preventMouseFocus, onPointerDown: onPointerDown, style: style, tabIndex: tabIndex, type: "button", children: segment.renderContent(colors_1.CURRENT_COLOR) }));
     if (segment.tooltipLabel === null) {
         return button;
     }
     return (jsx_runtime_1.jsx(ActionTooltip_1.ActionTooltip, { label: segment.tooltipLabel, shortcut: null, delay: 800, dismissOnClick: true, triggerStyle: tooltipTriggerStyle, children: button }));
 };
 const SegmentedButtonMenu = ({ index, segment, segmentCount }) => {
-    var _a, _b;
+    var _a;
     const [opened, setOpened] = (0, react_1.useState)(false);
     const ref = (0, react_1.useRef)(null);
     const { currentZIndex, tabIndex } = (0, z_index_1.useZIndex)();
@@ -214,15 +214,15 @@ const SegmentedButtonMenu = ({ index, segment, segmentCount }) => {
             ...segment.style,
         };
     }, [index, opened, segment, segmentCount]);
-    const button = (jsx_runtime_1.jsx("button", { ref: ref, "aria-expanded": opened, "aria-haspopup": "menu", "aria-label": segment.ariaLabel, className: `${hoverable_1.HOVERABLE_CLASS_NAME} ${hoverable_1.FOCUS_VISIBLE_ONLY_CLASS_NAME} ${is_menu_item_1.MENU_INITIATOR_CLASSNAME}`, disabled: segment.disabled, id: (_a = segment.buttonId) !== null && _a !== void 0 ? _a : undefined, onClick: onClick, onMouseDown: preventMouseFocus, onPointerDown: onPointerDown, style: style, tabIndex: tabIndex, title: (_b = segment.title) !== null && _b !== void 0 ? _b : undefined, type: "button", children: segment.renderContent(colors_1.CURRENT_COLOR) }));
+    const button = (jsx_runtime_1.jsx("button", { ref: ref, "aria-expanded": opened, "aria-haspopup": "menu", "aria-label": segment.ariaLabel, className: `${hoverable_1.HOVERABLE_CLASS_NAME} ${hoverable_1.FOCUS_VISIBLE_ONLY_CLASS_NAME} ${is_menu_item_1.MENU_INITIATOR_CLASSNAME}`, disabled: segment.disabled, id: (_a = segment.buttonId) !== null && _a !== void 0 ? _a : undefined, onClick: onClick, onMouseDown: preventMouseFocus, onPointerDown: onPointerDown, style: style, tabIndex: tabIndex, type: "button", children: segment.renderContent(colors_1.CURRENT_COLOR) }));
     return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [segment.tooltipLabel === null ? (button) : (jsx_runtime_1.jsx(ActionTooltip_1.ActionTooltip, { label: segment.tooltipLabel, shortcut: null, delay: 800, dismissOnClick: true, triggerStyle: tooltipTriggerStyle, children: button })), portalStyle
                 ? 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: onOutsideClick, onEscape: onHide, children: jsx_runtime_1.jsx("div", { style: portalStyle, children: jsx_runtime_1.jsx(MenuContent_1.MenuContent, { fixedHeight: Math.max(spaceToBottom, spaceToTop), leaveLeftSpace: segment.leaveLeftSpace, onHide: onHide, onNextMenu: noop_1.noop, onPreviousMenu: noop_1.noop, preselectIndex: segment.selectedId === null
                                         ? false
                                         : segment.values.findIndex((value) => value.id === segment.selectedId), topItemCanBeUnselected: false, values: segment.values }) }) }) }) }), (0, portals_1.getPortal)(currentZIndex))
                 : null] }));
 };
-const SegmentedButton = ({ segments, style, title }) => {
-    return (jsx_runtime_1.jsx("div", { style: { ...containerStyle, ...style }, title: title !== null && title !== void 0 ? title : undefined, children: segments.map((segment, index) => {
+const SegmentedButton = ({ segments, style }) => {
+    return (jsx_runtime_1.jsx("div", { style: { ...containerStyle, ...style }, children: segments.map((segment, index) => {
             if (segment.type === 'action') {
                 return (jsx_runtime_1.jsx(SegmentedButtonAction, { index: index, segment: segment, segmentCount: segments.length }, segment.segmentId));
             }

package/dist/components/SelectedOutlineOverlay.js

@@ -338,12 +338,25 @@ const calculateOutlineTargets = ({ connectedClientId, editorShowOutlines, getDra
                 pathDrag: previewInteractive &&
                     controls !== null &&
                     (pathFieldSchema === null || pathFieldSchema === void 0 ? void 0 : pathFieldSchema.type) === 'svg-path' &&
-                    (pathPropStatus === null || pathPropStatus === void 0 ? void 0 : pathPropStatus.status) === 'static' &&
-                    typeof pathPropStatus.codeValue === 'string'
+                    (((pathPropStatus === null || pathPropStatus === void 0 ? void 0 : pathPropStatus.status) === 'static' &&
+                        typeof pathPropStatus.codeValue === 'string') ||
+                        ((pathPropStatus === null || pathPropStatus === void 0 ? void 0 : pathPropStatus.status) === 'keyframed' &&
+                            pathFieldSchema.keyframable !== false &&
+                            pathPropStatus.interpolationFunction === 'interpolatePaths'))
                     ? {
                         clientId: connectedClientId,
                         nodePath,
+                        propStatus: pathPropStatus,
                         schema: controls.schema,
+                        sourceFrame: {
+                            displayFrame: targetTimelinePosition,
+                            keyframeDisplayOffset: (0, get_timeline_keyframes_1.getKeyframeDisplayOffset)({
+                                propStatus: pathPropStatus,
+                                keyframeDisplayOffset,
+                                keyframePlaybackRate,
+                            }),
+                            keyframePlaybackRate,
+                        },
                     }
                     : null,
                 canCrop: previewInteractive && controls !== null && cropFields !== null,

package/dist/components/SelectedOutlinePathPoints.js

@@ -8,6 +8,8 @@ const remotion_1 = require("remotion");
 const colors_1 = require("../helpers/colors");
 const pointer_session_1 = require("../helpers/pointer-session");
 const NotificationCenter_1 = require("./Notifications/NotificationCenter");
+const call_add_keyframe_1 = require("./Timeline/call-add-keyframe");
+const get_timeline_keyframes_1 = require("./Timeline/get-timeline-keyframes");
 const save_sequence_prop_1 = require("./Timeline/save-sequence-prop");
 const SelectedOutlinePathPoints = ({ outline, pathDrag, onDraggingChange }) => {
     const { setDragOverrides, clearDragOverrides, setPropStatuses } = (0, react_1.useContext)(remotion_1.Internals.VisualModeSettersContext);
@@ -251,7 +253,17 @@ const SelectedOutlinePathPoints = ({ outline, pathDrag, onDraggingChange }) => {
         const startX = event.clientX;
         const startY = event.clientY;
         const originalD = (0, paths_1.serializeInstructions)(instructions);
+        const sourceFrame = (0, get_timeline_keyframes_1.resolveKeyframeSourceFrame)(pathDrag.sourceFrame, pathDrag.propStatus);
         let lastD = originalD;
+        const updatePathOverride = (value) => {
+            setDragOverrides(pathDrag.nodePath, 'd', pathDrag.propStatus.status === 'keyframed'
+                ? remotion_1.Internals.makeKeyframedDragOverride({
+                    status: pathDrag.propStatus,
+                    frame: sourceFrame,
+                    value,
+                })
+                : remotion_1.Internals.makeStaticDragOverride(value));
+        };
         (0, pointer_session_1.startCapturedPointerSession)({
             event,
             captureTarget: svg,
@@ -264,7 +276,7 @@ const SelectedOutlinePathPoints = ({ outline, pathDrag, onDraggingChange }) => {
                 if (localDeltaX === 0 && localDeltaY === 0) {
                     if (lastD !== originalD) {
                         lastD = originalD;
-                        setDragOverrides(pathDrag.nodePath, 'd', remotion_1.Internals.makeStaticDragOverride(originalD));
+                        updatePathOverride(originalD);
                     }
                     return;
                 }
@@ -393,7 +405,7 @@ const SelectedOutlinePathPoints = ({ outline, pathDrag, onDraggingChange }) => {
                     return;
                 }
                 lastD = nextD;
-                setDragOverrides(pathDrag.nodePath, 'd', remotion_1.Internals.makeStaticDragOverride(nextD));
+                updatePathOverride(nextD);
             },
             onEnd: (reason, endEvent) => {
                 onDraggingChange(false);
@@ -401,24 +413,36 @@ const SelectedOutlinePathPoints = ({ outline, pathDrag, onDraggingChange }) => {
                     clearDragOverrides(pathDrag.nodePath);
                     return;
                 }
-                (0, save_sequence_prop_1.saveSequenceProps)({
-                    changes: [
-                        {
-                            fileName: pathDrag.nodePath.absolutePath,
-                            nodePath: pathDrag.nodePath,
-                            fieldKey: 'd',
-                            value: lastD,
-                            defaultValue: null,
-                            schema: pathDrag.schema,
-                        },
-                    ],
-                    addedKeyframes: null,
-                    movedKeyframes: null,
-                    setPropStatuses,
-                    clientId: pathDrag.clientId,
-                    undoLabel: 'Edit path point',
-                    redoLabel: 'Edit path point back',
-                })
+                const promise = pathDrag.propStatus.status === 'keyframed'
+                    ? (0, call_add_keyframe_1.callAddSequenceKeyframe)({
+                        fileName: pathDrag.nodePath.absolutePath,
+                        nodePath: pathDrag.nodePath,
+                        fieldKey: 'd',
+                        sourceFrame,
+                        value: lastD,
+                        schema: pathDrag.schema,
+                        setPropStatuses,
+                        clientId: pathDrag.clientId,
+                    })
+                    : (0, save_sequence_prop_1.saveSequenceProps)({
+                        changes: [
+                            {
+                                fileName: pathDrag.nodePath.absolutePath,
+                                nodePath: pathDrag.nodePath,
+                                fieldKey: 'd',
+                                value: lastD,
+                                defaultValue: null,
+                                schema: pathDrag.schema,
+                            },
+                        ],
+                        addedKeyframes: null,
+                        movedKeyframes: null,
+                        setPropStatuses,
+                        clientId: pathDrag.clientId,
+                        undoLabel: 'Edit path point',
+                        redoLabel: 'Edit path point back',
+                    });
+                promise
                     .catch((error) => {
                     (0, NotificationCenter_1.showNotification)(`Could not save path: ${error instanceof Error ? error.message : String(error)}`, 3000);
                 })
@@ -427,7 +451,7 @@ const SelectedOutlinePathPoints = ({ outline, pathDrag, onDraggingChange }) => {
         });
     };
     return (jsx_runtime_1.jsxs("g", { children: [connections.map((connection) => (jsx_runtime_1.jsx("line", { x1: connection.x1, y1: connection.y1, x2: connection.x2, y2: connection.y2, stroke: colors_1.BLUE, strokeWidth: 2, pointerEvents: "none" }, connection.key))), points.map((point) => (jsx_runtime_1.jsxs("g", { children: [
-                    jsx_runtime_1.jsx("circle", { cx: point.x, cy: point.y, r: 10, fill: "transparent", pointerEvents: "all", onPointerDown: (event) => onPointPointerDown(event, point), style: { cursor: 'pointer' } }), jsx_runtime_1.jsx("circle", { cx: point.x, cy: point.y, r: 4.5, fill: colors_1.WHITE, stroke: colors_1.BLUE, strokeWidth: 2, pointerEvents: "none" })
+                    jsx_runtime_1.jsx("circle", { cx: point.x, cy: point.y, r: 10, fill: "transparent", pointerEvents: "all", onPointerDown: (event) => onPointPointerDown(event, point), style: { cursor: 'default' } }), jsx_runtime_1.jsx("circle", { cx: point.x, cy: point.y, r: 4.5, fill: colors_1.WHITE, stroke: colors_1.BLUE, strokeWidth: 2, pointerEvents: "none" })
                 ] }, point.key)))] }));
 };
 exports.SelectedOutlinePathPoints = SelectedOutlinePathPoints;

package/dist/components/SelectedOutlineRenderer.js

@@ -162,7 +162,7 @@ const SelectedOutlineRendererUnmemoized = ({ compositionHeight, compositionWidth
                 var _a;
                 var _b;
                 const target = targetsByKey.get(outline.key);
-                const pathDrag = (target === null || target === void 0 ? void 0 : target.selected)
+                const pathDrag = (target === null || target === void 0 ? void 0 : target.containsSelection)
                     ? ((_b = (_a = getLatestOutlineTargetByKey(outline.key)) === null || _a === void 0 ? void 0 : _a.pathDrag) !== null && _b !== void 0 ? _b : null)
                     : null;
                 return outline.path !== null && pathDrag !== null ? (jsx_runtime_1.jsx(SelectedOutlinePathPoints_1.SelectedOutlinePathPoints, { outline: outline, pathDrag: pathDrag, onDraggingChange: onDraggingChange }, `${outline.key}-path-points`)) : null;

package/dist/components/SettingsButton.js

@@ -55,6 +55,6 @@ const SettingsButton = ({ showUpdates }) => {
         : updateAvailable
             ? 'Update available'
             : 'Settings';
-    return (jsx_runtime_1.jsx(ActionTooltip_1.ActionTooltip, { label: label, shortcut: null, delay: 800, dismissOnClick: true, children: jsx_runtime_1.jsx(InlineAction_1.InlineAction, { variant: null, onClick: openModal, renderAction: updateAvailable ? renderUpdateIcon : renderGearIcon, unhoveredColor: hasBugfixesAvailable ? colors_1.WARNING_COLOR : colors_1.WHITE_ALPHA_80, title: "", "aria-label": label }) }));
+    return (jsx_runtime_1.jsx(ActionTooltip_1.ActionTooltip, { label: label, shortcut: null, delay: 800, dismissOnClick: true, children: jsx_runtime_1.jsx(InlineAction_1.InlineAction, { variant: null, onClick: openModal, renderAction: updateAvailable ? renderUpdateIcon : renderGearIcon, unhoveredColor: hasBugfixesAvailable ? colors_1.WARNING_COLOR : colors_1.WHITE_ALPHA_80, "aria-label": label }) }));
 };
 exports.SettingsButton = SettingsButton;

package/dist/components/SettingsModalFooter.js

@@ -70,7 +70,7 @@ const SettingsModalFooter = ({ showAboutElements, showLicenseFaq }) => {
     return (jsx_runtime_1.jsx(ModalFooter_1.ModalFooterContainer, { style: footer, children: jsx_runtime_1.jsxs("div", { style: footerRow, children: [
                 jsx_runtime_1.jsx("div", { style: configFileHint, children: restartRequired ? ('Restart the server to apply changes') : (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: ["Changes save to",
                             jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.5 }), jsx_runtime_1.jsx(InspectorOpenInEditor_1.InspectorOpenInEditor, { locationType: null, location: configFileLocation, label: jsx_runtime_1.jsx("strong", { style: configFileName, children: "remotion.config.ts" }), showTooltips: false })
-                        ] })) }), restartRequired ? (jsx_runtime_1.jsx(ModalButton_1.ModalButton, { disabled: restarting, onClick: restart, size: "compact", title: "Restart Studio to apply config file changes", children: restarting ? 'Restarting...' : 'Restart Studio' })) : showLicenseFaq || showAboutElements ? (jsx_runtime_1.jsxs(common_1.InspectorQuickAction, { disabled: false, onClick: showLicenseFaq ? openLicenseFaq : openAboutElements, style: { flex: 'none', width: 'fit-content' }, title: showLicenseFaq
+                        ] })) }), restartRequired ? (jsx_runtime_1.jsx(ModalButton_1.ModalButton, { disabled: restarting, onClick: restart, size: "compact", "aria-label": "Restart Studio to apply config file changes", children: restarting ? 'Restarting...' : 'Restart Studio' })) : showLicenseFaq || showAboutElements ? (jsx_runtime_1.jsxs(common_1.InspectorQuickAction, { disabled: false, onClick: showLicenseFaq ? openLicenseFaq : openAboutElements, style: { flex: 'none', width: 'fit-content' }, "aria-label": showLicenseFaq
                         ? 'Open the Remotion License FAQ in a new tab'
                         : 'Open Remotion Elements in a new tab', children: [showLicenseFaq ? 'License FAQ' : 'About Elements', jsx_runtime_1.jsx("svg", { "aria-hidden": "true", viewBox: "0 0 16 16", style: externalLinkIndicator, children: jsx_runtime_1.jsx("path", { d: "M4 12 12 4M6 4h6v6", fill: "none", stroke: colors_1.CURRENT_COLOR, strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "1.5" }) })
                     ] })) : null] }) }));

package/dist/components/SizeSelector.js

@@ -126,6 +126,6 @@ const SizeSelector = () => {
     if (!zoomable) {
         return null;
     }
-    return (jsx_runtime_1.jsx(TimelineCombobox_1.TimelineCombobox, { title: accessibilityLabel, tooltipDelay: 800, selectedId: selectedId, values: items, renderLeftItem: (color) => selectedId === 'auto' ? (jsx_runtime_1.jsx(canvas_zoom_1.CanvasFitIcon, { color: color })) : Number(selectedId) < 1 ? (jsx_runtime_1.jsx(canvas_zoom_1.CanvasZoomOutIcon, { color: color })) : (jsx_runtime_1.jsx(canvas_zoom_1.CanvasZoomIcon, { color: color })), unhoveredIconColor: colors_1.WHITE_ALPHA_80 }));
+    return (jsx_runtime_1.jsx(TimelineCombobox_1.TimelineCombobox, { "aria-label": accessibilityLabel, tooltipDelay: 800, selectedId: selectedId, values: items, renderLeftItem: (color) => selectedId === 'auto' ? (jsx_runtime_1.jsx(canvas_zoom_1.CanvasFitIcon, { color: color })) : Number(selectedId) < 1 ? (jsx_runtime_1.jsx(canvas_zoom_1.CanvasZoomOutIcon, { color: color })) : (jsx_runtime_1.jsx(canvas_zoom_1.CanvasZoomIcon, { color: color })), unhoveredIconColor: colors_1.WHITE_ALPHA_80 }));
 };
 exports.SizeSelector = SizeSelector;

package/dist/components/SkillsSettings.js

@@ -129,7 +129,7 @@ const SkillSettingsRow = ({ skill }) => {
         return jsx_runtime_1.jsx(trash_1.TrashIcon, { color: color, style: actionIcon });
     }, []);
     return (jsx_runtime_1.jsxs("div", { role: "listitem", style: skillRow, children: [
-            jsx_runtime_1.jsx(skills_1.SkillsIcon, { "aria-hidden": true, color: colors_1.LIGHT_TEXT, style: skillIcon }), jsx_runtime_1.jsxs("span", { style: skillName, children: ["/", skill.name] }), processingThisSkill ? (jsx_runtime_1.jsx("span", { style: status, children: skillAction.type === 'installing' ? 'Installing…' : 'Removing…' })) : installedLocation ? (jsx_runtime_1.jsx("span", { style: status, children: installedLocation })) : null, installed ? (jsx_runtime_1.jsx(check_circle_filled_1.CheckCircleFilled, { "aria-hidden": true, style: { ...statusIcon, fill: colors_1.BLUE } })) : null, processingThisSkill ? (jsx_runtime_1.jsx("span", { style: actionSlot, children: jsx_runtime_1.jsx(Spinner_1.Spinner, { duration: 0.5, size: 14 }) })) : installed && canInstall ? (jsx_runtime_1.jsx(ActionTooltip_1.ActionTooltip, { label: "Uninstall", shortcut: null, delay: 800, dismissOnClick: true, children: jsx_runtime_1.jsx(InlineAction_1.InlineAction, { "aria-label": `Remove ${skill.name}`, title: "", disabled: skillAction !== null, onClick: () => removeSkill(skill.name), renderAction: renderRemoveAction, variant: null }) })) : canInstall ? (jsx_runtime_1.jsx(ActionTooltip_1.ActionTooltip, { label: "Install", shortcut: null, delay: 800, dismissOnClick: true, children: jsx_runtime_1.jsx(InlineAction_1.InlineAction, { "aria-label": `Install ${skill.name}`, title: "", disabled: skillAction !== null, onClick: () => installSkill(skill.name), renderAction: renderInstallAction, variant: null }) })) : null] }));
+            jsx_runtime_1.jsx(skills_1.SkillsIcon, { "aria-hidden": true, color: colors_1.LIGHT_TEXT, style: skillIcon }), jsx_runtime_1.jsxs("span", { style: skillName, children: ["/", skill.name] }), processingThisSkill ? (jsx_runtime_1.jsx("span", { style: status, children: skillAction.type === 'installing' ? 'Installing…' : 'Removing…' })) : installedLocation ? (jsx_runtime_1.jsx("span", { style: status, children: installedLocation })) : null, installed ? (jsx_runtime_1.jsx(check_circle_filled_1.CheckCircleFilled, { "aria-hidden": true, style: { ...statusIcon, fill: colors_1.BLUE } })) : null, processingThisSkill ? (jsx_runtime_1.jsx("span", { style: actionSlot, children: jsx_runtime_1.jsx(Spinner_1.Spinner, { duration: 0.5, size: 14 }) })) : installed && canInstall ? (jsx_runtime_1.jsx(ActionTooltip_1.ActionTooltip, { label: "Uninstall", shortcut: null, delay: 800, dismissOnClick: true, children: jsx_runtime_1.jsx(InlineAction_1.InlineAction, { "aria-label": `Remove ${skill.name}`, disabled: skillAction !== null, onClick: () => removeSkill(skill.name), renderAction: renderRemoveAction, variant: null }) })) : canInstall ? (jsx_runtime_1.jsx(ActionTooltip_1.ActionTooltip, { label: "Install", shortcut: null, delay: 800, dismissOnClick: true, children: jsx_runtime_1.jsx(InlineAction_1.InlineAction, { "aria-label": `Install ${skill.name}`, disabled: skillAction !== null, onClick: () => installSkill(skill.name), renderAction: renderInstallAction, variant: null }) })) : null] }));
 };
 exports.SkillSettingsRow = SkillSettingsRow;
 const SkillsSettings = () => {
@@ -156,7 +156,7 @@ const SkillsSettings = () => {
     }, [copied]);
     return (jsx_runtime_1.jsxs("div", { style: container, children: [remotionSkillsInfo === null && error === null ? (jsx_runtime_1.jsx("p", { style: loading, children: "Checking installed skills..." })) : null, remotionSkillsInfo === null && error ? (jsx_runtime_1.jsx("div", { style: { marginTop: 14 }, children: jsx_runtime_1.jsx(ValidationMessage_1.ValidationMessage, { message: error, align: "flex-start", type: "error" }) })) : null, missingSkills > 0 && canInstall ? (jsx_runtime_1.jsx("p", { style: description, children: "Install skills in this project to use them with your coding agent." })) : null, skillActionError ? (jsx_runtime_1.jsx("div", { style: { marginTop: 14 }, children: jsx_runtime_1.jsx(ValidationMessage_1.ValidationMessage, { message: skillActionError, align: "flex-start", type: "error" }) })) : null, missingSkills > 0 && !canInstall ? (jsx_runtime_1.jsxs("div", { children: [
                     jsx_runtime_1.jsx("p", { style: description, children: "Not all skills are installed. Run this command in the project directory, then reload Studio and restart your coding agent." }), jsx_runtime_1.jsxs("div", { style: commandField, children: [
-                            jsx_runtime_1.jsx("pre", { style: command, children: INSTALL_COMMAND }), jsx_runtime_1.jsx(InlineAction_1.InlineAction, { variant: null, onClick: onCopy, renderAction: renderCopyAction, title: "Copy install command" })
+                            jsx_runtime_1.jsx("pre", { style: command, children: INSTALL_COMMAND }), jsx_runtime_1.jsx(InlineAction_1.InlineAction, { variant: null, onClick: onCopy, renderAction: renderCopyAction, "aria-label": "Copy install command" })
                         ] })
                 ] })) : null, remotionSkillsInfo ? (jsx_runtime_1.jsx("div", { style: list, role: "list", "aria-label": "Remotion Agent Skills", children: remotionSkillsInfo.skills.map((skill) => {
                     return jsx_runtime_1.jsx(exports.SkillSettingsRow, { skill: skill }, skill.name);

package/dist/components/SnappingToggle.js

@@ -22,6 +22,6 @@ const SnappingToggle = () => {
         ? 'Disable snapping'
         : 'Enable snapping';
     const shortcutsDisabled = (0, use_keybinding_1.areKeyboardShortcutsDisabled)();
-    return (jsx_runtime_1.jsx(ActionTooltip_1.ActionTooltip, { label: "Snapping", shortcut: shortcutsDisabled ? null : shortcut, delay: 800, dismissOnClick: false, children: jsx_runtime_1.jsx(ControlButton_1.ControlButton, { title: "", "aria-label": accessibilityLabel, "aria-pressed": editorSnapping, "aria-keyshortcuts": shortcutsDisabled ? undefined : ariaKeyShortcuts || undefined, onClick: onClick, style: buttonStyle, children: (color) => (jsx_runtime_1.jsx(magnet_1.MagnetIcon, { style: { width: 18, height: 18, transform: 'translateY(1px)' }, color: editorSnapping ? colors_1.BLUE : color, "aria-hidden": "true", focusable: "false" })) }) }));
+    return (jsx_runtime_1.jsx(ActionTooltip_1.ActionTooltip, { label: "Snapping", shortcut: shortcutsDisabled ? null : shortcut, delay: 800, dismissOnClick: false, children: jsx_runtime_1.jsx(ControlButton_1.ControlButton, { "aria-label": accessibilityLabel, "aria-pressed": editorSnapping, "aria-keyshortcuts": shortcutsDisabled ? undefined : ariaKeyShortcuts || undefined, onClick: onClick, style: buttonStyle, children: (color) => (jsx_runtime_1.jsx(magnet_1.MagnetIcon, { style: { width: 18, height: 18, transform: 'translateY(1px)' }, color: editorSnapping ? colors_1.BLUE : color, "aria-hidden": "true", focusable: "false" })) }) }));
 };
 exports.SnappingToggle = SnappingToggle;

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

@@ -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/TimelineArrayField.js

@@ -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;