@remotion/studio 4.0.528 → 4.0.529

package/dist/components/TimelineCombobox.d.ts

@@ -4,7 +4,7 @@ import type { ComboboxValue } from './NewComposition/ComboBox';
 export declare const TimelineCombobox: React.FC<{
     readonly values: ComboboxValue[];
     readonly selectedId: string | number;
-    readonly title: string;
+    readonly 'aria-label': string;
     readonly tooltipDelay: number | null;
     readonly labelWidth?: number;
     readonly renderLeftItem?: RenderInlineAction;

package/dist/components/TimelineCombobox.js

@@ -23,31 +23,30 @@ const label = {
     WebkitUserSelect: 'none',
     whiteSpace: 'nowrap',
 };
-const TimelineCombobox = ({ values, selectedId, title, tooltipDelay, labelWidth = 32, renderLeftItem, unhoveredIconColor = colors_1.LIGHT_TEXT, }) => {
+const TimelineCombobox = ({ values, selectedId, 'aria-label': ariaLabel, tooltipDelay, labelWidth = 32, renderLeftItem, unhoveredIconColor = colors_1.LIGHT_TEXT, }) => {
     const selected = values.find((value) => value.id === selectedId);
     const segments = [
         {
-            ariaLabel: title,
+            ariaLabel,
             buttonId: null,
             disabled: false,
             idleColor: unhoveredIconColor,
             leaveLeftSpace: true,
             onOpenChange: null,
             renderContent: (color) => (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [renderLeftItem ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [renderLeftItem(color), jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.5 })
-                        ] })) : null, selected ? (jsx_runtime_1.jsx("div", { title: tooltipDelay === null && typeof selected.label === 'string'
+                        ] })) : null, selected ? (jsx_runtime_1.jsx("div", { role: "group", "aria-label": tooltipDelay === null && typeof selected.label === 'string'
                             ? selected.label
                             : undefined, style: { ...label, width: labelWidth }, children: selected.label })) : null, jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.5 }), jsx_runtime_1.jsx(caret_1.CaretDown, { color: color })
                 ] })),
             segmentId: 'selector',
             selectedId,
             style: { fontFamily: 'inherit', padding: '0 4px' },
-            title: tooltipDelay === null ? title : null,
             tooltipLabel: null,
             type: 'menu',
             values,
         },
     ];
-    const button = (jsx_runtime_1.jsx(SegmentedButton_1.SegmentedButton, { segments: segments, style: segmentedButtonStyle, title: null }));
-    return tooltipDelay === null ? (button) : (jsx_runtime_1.jsx(ActionTooltip_1.ActionTooltip, { label: title, shortcut: null, delay: tooltipDelay, dismissOnClick: true, children: button }));
+    const button = (jsx_runtime_1.jsx(SegmentedButton_1.SegmentedButton, { segments: segments, style: segmentedButtonStyle }));
+    return tooltipDelay === null ? (button) : (jsx_runtime_1.jsx(ActionTooltip_1.ActionTooltip, { label: ariaLabel, shortcut: null, delay: tooltipDelay, dismissOnClick: true, children: button }));
 };
 exports.TimelineCombobox = TimelineCombobox;

package/dist/components/TimelineInOutToggle.js

@@ -242,7 +242,7 @@ const TimelineInOutPointToggle = () => {
         };
     }, [confId, onInMark, onInOutClear, onOutMark]);
     return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
-            jsx_runtime_1.jsx(ActionTooltip_1.ActionTooltip, { label: "In point", shortcut: shortcutsDisabled ? null : inShortcut, delay: 800, dismissOnClick: true, children: jsx_runtime_1.jsx(ControlButton_1.ControlButton, { title: "", "aria-label": "In point", "aria-description": "Right click to clear", "aria-keyshortcuts": shortcutsDisabled ? undefined : inAriaShortcut || undefined, style: buttonStyle, onClick: onInMark, onContextMenu: clearInMark, disabled: !videoConfig || isFirstFrame, children: (color) => (jsx_runtime_1.jsx(timelineInOutPointer_1.TimelineInPointer, { color: inFrame === null ? color : colors_1.BLUE, style: style })) }) }), jsx_runtime_1.jsx(ActionTooltip_1.ActionTooltip, { label: "Out point", shortcut: shortcutsDisabled ? null : outShortcut, delay: 800, dismissOnClick: true, children: jsx_runtime_1.jsx(ControlButton_1.ControlButton, { title: "", "aria-label": "Out point", "aria-description": "Right click to clear", "aria-keyshortcuts": shortcutsDisabled ? undefined : outAriaShortcut || undefined, style: buttonStyle, onClick: onOutMark, onContextMenu: clearOutMark, disabled: !videoConfig || isLastFrame, children: (color) => (jsx_runtime_1.jsx(timelineInOutPointer_1.TimelineOutPointer, { color: outFrame === null ? color : colors_1.BLUE, style: style })) }) })
+            jsx_runtime_1.jsx(ActionTooltip_1.ActionTooltip, { label: "In point", shortcut: shortcutsDisabled ? null : inShortcut, delay: 800, dismissOnClick: true, children: jsx_runtime_1.jsx(ControlButton_1.ControlButton, { "aria-label": "In point", "aria-description": "Right click to clear", "aria-keyshortcuts": shortcutsDisabled ? undefined : inAriaShortcut || undefined, style: buttonStyle, onClick: onInMark, onContextMenu: clearInMark, disabled: !videoConfig || isFirstFrame, children: (color) => (jsx_runtime_1.jsx(timelineInOutPointer_1.TimelineInPointer, { color: inFrame === null ? color : colors_1.BLUE, style: style })) }) }), jsx_runtime_1.jsx(ActionTooltip_1.ActionTooltip, { label: "Out point", shortcut: shortcutsDisabled ? null : outShortcut, delay: 800, dismissOnClick: true, children: jsx_runtime_1.jsx(ControlButton_1.ControlButton, { "aria-label": "Out point", "aria-description": "Right click to clear", "aria-keyshortcuts": shortcutsDisabled ? undefined : outAriaShortcut || undefined, style: buttonStyle, onClick: onOutMark, onContextMenu: clearOutMark, disabled: !videoConfig || isLastFrame, children: (color) => (jsx_runtime_1.jsx(timelineInOutPointer_1.TimelineOutPointer, { color: outFrame === null ? color : colors_1.BLUE, style: style })) }) })
         ] }));
 };
 exports.TimelineInOutPointToggle = TimelineInOutPointToggle;

package/dist/components/Transcription/TranscriptionModal.js

@@ -134,7 +134,7 @@ const openIconStyle = {
     flexShrink: 0,
 };
 const TranscriptionSettingLabel = ({ children, inputId, name }) => {
-    return (jsx_runtime_1.jsxs("div", { style: layout_2.label, children: [inputId === null ? (name) : (jsx_runtime_1.jsx("label", { htmlFor: inputId, style: nestedLabelStyle, children: name })), jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.5 }), jsx_runtime_1.jsx(InfoBubble_1.InfoBubble, { title: `Learn more about ${name}`, children: jsx_runtime_1.jsx("div", { style: tooltipContent, children: children }) })
+    return (jsx_runtime_1.jsxs("div", { style: layout_2.label, children: [inputId === null ? (name) : (jsx_runtime_1.jsx("label", { htmlFor: inputId, style: nestedLabelStyle, children: name })), jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.5 }), jsx_runtime_1.jsx(InfoBubble_1.InfoBubble, { "aria-label": `Learn more about ${name}`, children: jsx_runtime_1.jsx("div", { style: tooltipContent, children: children }) })
         ] }));
 };
 const ModelSettings = ({ cachedModels, selectedLanguage, selectedModel, selectedTask, setSelectedLanguage, setSelectedModel, setSelectedTask, supportState, }) => {
@@ -214,11 +214,11 @@ const ModelSettings = ({ cachedModels, selectedLanguage, selectedModel, selected
     }, [selectedModelInfo.supportsTranslation, setSelectedTask]);
     return (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: "Whisper model" }), jsx_runtime_1.jsx("div", { style: layout_2.rightRow, children: jsx_runtime_1.jsx(ComboBox_1.Combobox, { values: modelOptions, selectedId: selectedModel, title: "Whisper model", style: controlStyle }) })
+                    jsx_runtime_1.jsx("div", { style: layout_2.label, children: "Whisper model" }), jsx_runtime_1.jsx("div", { style: layout_2.rightRow, children: jsx_runtime_1.jsx(ComboBox_1.Combobox, { values: modelOptions, selectedId: selectedModel, "aria-label": "Whisper model", style: controlStyle }) })
                 ] }), selectedModelInfo.multilingual ? (jsx_runtime_1.jsxs("div", { style: layout_2.optionRow, children: [
-                    jsx_runtime_1.jsx("div", { style: layout_2.label, children: "Spoken language" }), jsx_runtime_1.jsx("div", { style: layout_2.rightRow, children: jsx_runtime_1.jsx(ComboBox_1.Combobox, { values: languageOptions, selectedId: selectedLanguage, title: "Spoken language", style: controlStyle }) })
+                    jsx_runtime_1.jsx("div", { style: layout_2.label, children: "Spoken language" }), jsx_runtime_1.jsx("div", { style: layout_2.rightRow, children: jsx_runtime_1.jsx(ComboBox_1.Combobox, { values: languageOptions, selectedId: selectedLanguage, "aria-label": "Spoken language", style: controlStyle }) })
                 ] })) : null, selectedModelInfo.supportsTranslation ? (jsx_runtime_1.jsxs("div", { style: layout_2.optionRow, children: [
-                    jsx_runtime_1.jsx("div", { style: layout_2.label, children: "Task" }), jsx_runtime_1.jsx("div", { style: layout_2.rightRow, children: jsx_runtime_1.jsx(ComboBox_1.Combobox, { values: taskOptions, selectedId: effectiveTask, title: "Task", style: controlStyle }) })
+                    jsx_runtime_1.jsx("div", { style: layout_2.label, children: "Task" }), jsx_runtime_1.jsx("div", { style: layout_2.rightRow, children: jsx_runtime_1.jsx(ComboBox_1.Combobox, { values: taskOptions, selectedId: effectiveTask, "aria-label": "Task", style: controlStyle }) })
                 ] })) : null, effectiveTask === 'translate' ? (jsx_runtime_1.jsx("div", { id: TRANSCRIPTION_TASK_MESSAGE_ID, "aria-live": "polite", style: taskMessageRow, children: jsx_runtime_1.jsx(ValidationMessage_1.ValidationMessage, { align: "flex-end", message: "Word timings may be less accurate when translating to English.", type: "warning" }) })) : null, supportState.type === 'unsupported' ? (jsx_runtime_1.jsx("div", { style: { padding: '0 16px' }, children: jsx_runtime_1.jsx(ValidationMessage_1.ValidationMessage, { align: "flex-end", message: supportState.message, type: "error" }) })) : null] }));
 };
 const OutputSettings = ({ exists, onOutNameChange, outName, validationMessage }) => {
@@ -246,7 +246,7 @@ const OutputSettings = ({ exists, onOutNameChange, outName, validationMessage })
                         jsx_runtime_1.jsx(RemInput_1.RemotionInput, { "aria-label": "Caption output file", "aria-describedby": validationMessage || exists
                                 ? TRANSCRIPTION_OUTPUT_MESSAGE_ID
                                 : undefined, "aria-invalid": validationMessage ? true : undefined, status: validationMessage ? 'error' : exists ? 'warning' : 'ok', style: layout_2.input, type: "text", value: outName, onChange: onOutNameChange, rightAlign: true }), validationMessage || exists ? (jsx_runtime_1.jsxs("div", { id: TRANSCRIPTION_OUTPUT_MESSAGE_ID, "aria-live": "polite", children: [
-                                jsx_runtime_1.jsx(layout_1.Spacing, { y: 1, block: true }), jsx_runtime_1.jsx(ValidationMessage_1.ValidationMessage, { align: "flex-end", message: validationMessage !== null && validationMessage !== void 0 ? validationMessage : (jsx_runtime_1.jsxs("span", { style: existsMessageStyle, children: [isBrowserStudio ? null : (jsx_runtime_1.jsx(InlineAction_1.InlineAction, { onClick: openExistingOutput, renderAction: renderOpenIcon, title: `Open in ${fileManagerName}`, variant: null })), "Exists, will be overwritten"] })), type: validationMessage ? 'error' : 'warning' })] })) : null] }) })
+                                jsx_runtime_1.jsx(layout_1.Spacing, { y: 1, block: true }), jsx_runtime_1.jsx(ValidationMessage_1.ValidationMessage, { align: "flex-end", message: validationMessage !== null && validationMessage !== void 0 ? validationMessage : (jsx_runtime_1.jsxs("span", { style: existsMessageStyle, children: [isBrowserStudio ? null : (jsx_runtime_1.jsx(InlineAction_1.InlineAction, { onClick: openExistingOutput, renderAction: renderOpenIcon, "aria-label": `Open in ${fileManagerName}`, variant: null })), "Exists, will be overwritten"] })), type: validationMessage ? 'error' : 'warning' })] })) : null] }) })
         ] }));
 };
 const AdvancedSettings = ({ chunkLengthInSeconds, doSample, forceFullSequences, noRepeatNgramSize, repetitionPenalty, setChunkLengthInSeconds, setDoSample, setForceFullSequences, setNoRepeatNgramSize, setRepetitionPenalty, setStrideLengthInSeconds, setTemperature, setTopK, strideLengthInSeconds, temperature, topK, decodingValidationMessage, validationMessage, }) => {
@@ -420,7 +420,7 @@ const TranscriptionModal = ({ audioStreamIndex, displayName, requestInit, src, t
     const title = target === null ? `Transcribe ${displayName}` : 'Generate captions';
     return (jsx_runtime_1.jsx(DismissableModal_1.DismissableModal, { ariaLabel: title, children: jsx_runtime_1.jsxs("div", { style: transcriptionModalStyle, children: [
                 jsx_runtime_1.jsx(ModalHeader_1.ModalHeader, { title: title }), jsx_runtime_1.jsxs("div", { style: render_modals_1.container, children: [
-                        jsx_runtime_1.jsx("div", { style: render_modals_1.flexer }), jsx_runtime_1.jsx(Button_1.Button, { onClick: onAddToQueue, disabled: !canTranscribe, title: transcribeDisabledReason, style: {
+                        jsx_runtime_1.jsx("div", { style: render_modals_1.flexer }), jsx_runtime_1.jsx(Button_1.Button, { onClick: onAddToQueue, disabled: !canTranscribe, "aria-label": transcribeDisabledReason, style: {
                                 ...render_modals_1.buttonStyle,
                                 backgroundColor: canTranscribe
                                     ? render_modals_1.buttonStyle.backgroundColor

package/dist/components/UndoRedoButtons.js

@@ -130,7 +130,7 @@ const UndoRedoButtons = () => {
         return null;
     }
     return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
-            jsx_runtime_1.jsx(InlineAction_1.InlineAction, { variant: null, onClick: onUndo, renderAction: renderUndo, title: undoTooltip, disabled: !canUndo, unhoveredColor: colors_1.WHITE_ALPHA_80 }), jsx_runtime_1.jsx(InlineAction_1.InlineAction, { variant: null, onClick: onRedo, renderAction: renderRedo, title: redoTooltip, disabled: !canRedo, unhoveredColor: colors_1.WHITE_ALPHA_80 })
+            jsx_runtime_1.jsx(InlineAction_1.InlineAction, { variant: null, onClick: onUndo, renderAction: renderUndo, "aria-label": undoTooltip, disabled: !canUndo, unhoveredColor: colors_1.WHITE_ALPHA_80 }), jsx_runtime_1.jsx(InlineAction_1.InlineAction, { variant: null, onClick: onRedo, renderAction: renderRedo, "aria-label": redoTooltip, disabled: !canRedo, unhoveredColor: colors_1.WHITE_ALPHA_80 })
         ] }));
 };
 exports.UndoRedoButtons = UndoRedoButtons;

package/dist/components/UpdatesSettings.js

@@ -171,7 +171,7 @@ const RenderedReleaseNotes = ({ release }) => {
             jsx_runtime_1.jsxs("div", { style: releaseNotesTitle, children: ["v", release.version, formattedReleaseDate === null
                         ? null
                         : ` \u2013\u00a0${formattedReleaseDate}`] }), document === null ? (jsx_runtime_1.jsxs("div", { style: text, children: ["Release notes could not be loaded.", ' ', jsx_runtime_1.jsx("a", { style: link, target: "_blank", href: `https://github.com/remotion-dev/remotion/releases/tag/v${release.version}`, children: "View them on GitHub" }),
-                    "."] })) : (jsx_runtime_1.jsx("iframe", { ref: frameRef, onLoad: onLoad, sandbox: "allow-popups allow-popups-to-escape-sandbox allow-same-origin", scrolling: "no", srcDoc: document, style: { ...releaseNotesFrame, height }, title: `Release notes for Remotion v${release.version}` }))] }));
+                    "."] })) : (jsx_runtime_1.jsx("iframe", { ref: frameRef, onLoad: onLoad, sandbox: "allow-popups allow-popups-to-escape-sandbox allow-same-origin", scrolling: "no", srcDoc: document, style: { ...releaseNotesFrame, height }, "aria-label": `Release notes for Remotion v${release.version}` }))] }));
 };
 const UpdatesSettings = () => {
     const { remotionSkillsInfo } = (0, SettingsContext_1.useSettings)();
@@ -263,7 +263,7 @@ const UpdatesSettings = () => {
     return (jsx_runtime_1.jsxs("div", { style: container, children: [info.updateAvailable ? (jsx_runtime_1.jsx("div", { style: title, children: "A new Remotion update is available." })) : null, info.updateAvailable && info.packageManager !== 'unknown' ? (jsx_runtime_1.jsx("div", { children: jsx_runtime_1.jsxs(ModalButton_1.ModalButton, { onClick: onUpgrade, children: ["Upgrade to v", info.latestVersion] }) })) : null, upgradeError ? (jsx_runtime_1.jsx(ValidationMessage_1.ValidationMessage, { message: upgradeError, type: "error", align: "flex-start" })) : null, hasKnownBugs && info.updateAvailable ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
                     jsx_runtime_1.jsxs("div", { style: title, children: ["The currently installed version v", info.currentVersion, " has the following known bugs:"] }), jsx_runtime_1.jsx(KnownBugs_1.KnownBugs, { bugs: knownBugs !== null && knownBugs !== void 0 ? knownBugs : [] }), jsx_runtime_1.jsx("div", { style: { height: '20px' } }), jsx_runtime_1.jsxs("div", { style: text, children: ["Or run the following ", updateActionType, ":"] })
                 ] })) : info.updateAvailable ? (jsx_runtime_1.jsxs("div", { style: titleBeforeCommand, children: ["You can also run the following ", updateActionType, ":"] })) : (jsx_runtime_1.jsxs("div", { style: titleBeforeCommand, children: ["Your Remotion Agent Skills are out of date. Run the following", ' ', updateActionType, ":"] })), jsx_runtime_1.jsxs("div", { style: commandField, children: [
-                    jsx_runtime_1.jsx("pre", { style: code, children: updateAction }), jsx_runtime_1.jsx(InlineAction_1.InlineAction, { variant: null, onClick: onClick, renderAction: renderCopyAction, title: "Copy command" })
+                    jsx_runtime_1.jsx("pre", { style: code, children: updateAction }), jsx_runtime_1.jsx(InlineAction_1.InlineAction, { variant: null, onClick: onClick, renderAction: renderCopyAction, "aria-label": "Copy command" })
                 ] }), info.updateAvailable ? (jsx_runtime_1.jsxs("div", { style: text, children: ["You", "'re", " currently running Remotion v", info.currentVersion, "."] })) : null, info.updateAvailable ? ((releaseNotes === null || releaseNotes === void 0 ? void 0 : releaseNotes.currentVersion) === info.currentVersion &&
                 releaseNotes.latestVersion === info.latestVersion ? (releaseNotes.releases.length === 0 ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
                     jsx_runtime_1.jsxs("div", { style: releaseNotesTitle, children: ["v", info.latestVersion] }), jsx_runtime_1.jsxs("div", { style: text, children: ["Release notes could not be loaded.", ' ', jsx_runtime_1.jsx("a", { style: link, target: "_blank", href: "https://github.com/remotion-dev/remotion/releases", children: "View them on GitHub" }),

package/dist/components/VideoMatting/VideoMattingModal.js

@@ -166,7 +166,7 @@ const VideoMattingModal = ({ displayName, src, target, }) => {
     const title = `Remove background from ${displayName}`;
     return (jsx_runtime_1.jsx(DismissableModal_1.DismissableModal, { ariaLabel: title, children: jsx_runtime_1.jsxs("div", { style: modalStyle, children: [
                 jsx_runtime_1.jsx(ModalHeader_1.ModalHeader, { title: title }), jsx_runtime_1.jsxs("div", { style: render_modals_1.container, children: [
-                        jsx_runtime_1.jsx("div", { style: render_modals_1.flexer }), jsx_runtime_1.jsx(Button_1.Button, { disabled: !canSubmit, onClick: submit, title: support.type === 'unsupported' ? support.message : undefined, style: {
+                        jsx_runtime_1.jsx("div", { style: render_modals_1.flexer }), jsx_runtime_1.jsx(Button_1.Button, { disabled: !canSubmit, onClick: submit, "aria-label": support.type === 'unsupported' ? support.message : undefined, style: {
                                 ...render_modals_1.buttonStyle,
                                 backgroundColor: canSubmit
                                     ? render_modals_1.buttonStyle.backgroundColor
@@ -177,11 +177,11 @@ const VideoMattingModal = ({ displayName, src, target, }) => {
                                 jsx_runtime_1.jsx(RenderModalOutputName_1.RenderModalOutputName, { ariaLabel: "Video output file", existingOutputPath: window.remotion_publicFolderExists
                                         ? `${window.remotion_publicFolderExists}/${outName}`
                                         : null, existence: outputExists, inputStyle: layout_1.input, label: "Output in public/", onValueChange: (event) => setOutName(event.target.value), outName: outName, validationMessage: outputError }), jsx_runtime_1.jsx(RenderModalHr_1.RenderModalHr, {}), jsx_runtime_1.jsxs("div", { style: layout_1.optionRow, children: [
-                                        jsx_runtime_1.jsx("div", { style: layout_1.label, children: "Model" }), jsx_runtime_1.jsx("div", { style: layout_1.rightRow, children: jsx_runtime_1.jsx(ComboBox_1.Combobox, { values: modelOptions, selectedId: model, title: "Model", style: controlStyle }) })
+                                        jsx_runtime_1.jsx("div", { style: layout_1.label, children: "Model" }), jsx_runtime_1.jsx("div", { style: layout_1.rightRow, children: jsx_runtime_1.jsx(ComboBox_1.Combobox, { values: modelOptions, selectedId: model, "aria-label": "Model", style: controlStyle }) })
                                     ] }), support.type === 'unsupported' ? (jsx_runtime_1.jsx("div", { style: validationStyle, children: jsx_runtime_1.jsx(ValidationMessage_1.ValidationMessage, { align: "flex-end", message: support.message, type: "error" }) })) : null, jsx_runtime_1.jsxs("div", { style: layout_1.optionRow, children: [
-                                        jsx_runtime_1.jsx("div", { style: layout_1.label, children: "Audio" }), jsx_runtime_1.jsx("div", { style: layout_1.rightRow, children: jsx_runtime_1.jsx(ComboBox_1.Combobox, { values: audioOptions, selectedId: audio, title: "Audio", style: controlStyle }) })
+                                        jsx_runtime_1.jsx("div", { style: layout_1.label, children: "Audio" }), jsx_runtime_1.jsx("div", { style: layout_1.rightRow, children: jsx_runtime_1.jsx(ComboBox_1.Combobox, { values: audioOptions, selectedId: audio, "aria-label": "Audio", style: controlStyle }) })
                                     ] }), jsx_runtime_1.jsxs("div", { style: layout_1.optionRow, children: [
-                                        jsx_runtime_1.jsx("div", { style: layout_1.label, children: "Video quality" }), jsx_runtime_1.jsx("div", { style: layout_1.rightRow, children: jsx_runtime_1.jsx(ComboBox_1.Combobox, { values: qualityOptions, selectedId: String(videoBitrate), title: "Video quality", style: controlStyle }) })
+                                        jsx_runtime_1.jsx("div", { style: layout_1.label, children: "Video quality" }), jsx_runtime_1.jsx("div", { style: layout_1.rightRow, children: jsx_runtime_1.jsx(ComboBox_1.Combobox, { values: qualityOptions, selectedId: String(videoBitrate), "aria-label": "Video quality", style: controlStyle }) })
                                     ] })
                             ] }), jsx_runtime_1.jsx(Models_1.Models, { description: 'Models are downloaded automatically when needed.\nYou can also manage the browser cache here.', indent: true, visible: tab === 'models' })
                     ] })

package/dist/components/selected-outline-types.d.ts

@@ -24,7 +24,9 @@ export type SelectedOutlineTarget = SelectedOutlineLayoutTarget & {
 export type SelectedOutlinePathDragTarget = {
     readonly clientId: string;
     readonly nodePath: SequencePropsSubscriptionKey;
+    readonly propStatus: CanUpdateSequencePropStatusStatic | CanUpdateSequencePropStatusKeyframed;
     readonly schema: InteractivitySchema;
+    readonly sourceFrame: KeyframeSourceFrame;
 };
 export declare const cropFieldKeys: {
     readonly left: "cropLeft";

package/dist/error-overlay/remotion-overlay/CompositionIdListItem.js

@@ -28,6 +28,6 @@ const CompositionIdListItem = ({ id, isActive, onSelect }) => {
             ...exports.listItemStyle,
             ...(hover ? exports.listItemHoverStyle : {}),
             ...(isActive ? exports.listItemActiveStyle : {}),
-        }, title: id, children: id }));
+        }, "aria-label": id, children: id }));
 };
 exports.CompositionIdListItem = CompositionIdListItem;

package/dist/error-overlay/remotion-overlay/OpenInEditor.js

@@ -111,7 +111,7 @@ const OpenInEditor = ({ stack, canHaveKeyboardShortcuts, editorId, editorName, s
         openWithEditor,
         sourcePath,
     ]);
-    return (jsx_runtime_1.jsxs(AppLaunchButton_1.AppLaunchButton, { actionButtonId: "error-overlay-open-in-editor", ariaLabel: `Open in ${editorName}`, disabled: false, menuAriaLabel: "Open in another app", menuButtonId: "error-overlay-open-in-another-app", menuItems: menuItems, onConfigureApps: configureDefaultApps, onClick: openPreferredEditor, size: size, style: null, title: `Open in ${editorName}`, children: [
+    return (jsx_runtime_1.jsxs(AppLaunchButton_1.AppLaunchButton, { actionButtonId: "error-overlay-open-in-editor", ariaLabel: `Open in ${editorName}`, disabled: false, menuAriaLabel: "Open in another app", menuButtonId: "error-overlay-open-in-another-app", menuItems: menuItems, onConfigureApps: configureDefaultApps, onClick: openPreferredEditor, size: size, style: null, children: [
             jsx_runtime_1.jsx(editor_1.EditorIcon, { editorId: editorId, size: size === 'default' ? 14 : 18 }),
             "Open in ", editorName, canHaveKeyboardShortcuts ? (jsx_runtime_1.jsx(ShortcutHint_1.ShortcutHint, { keyToPress: "o", cmdOrCtrl: true })) : null] }));
 };

package/dist/error-overlay/remotion-overlay/StackFrame.js

@@ -93,7 +93,7 @@ const StackElement = ({ s, lineNumberWidth, isFirst, defaultFunctionName, editor
                     paddingLeft: horizontalSpacing,
                     paddingRight: horizontalSpacing,
                 }, children: [
-                    jsx_runtime_1.jsxs("div", { style: left, children: [functionName === null ? null : (jsx_runtime_1.jsx("div", { style: { ...fnName, fontSize }, children: functionName })), fileLocation ? (jsx_runtime_1.jsx("div", { ref: locationRef, style: { ...locationContainer, fontSize }, title: locationOverflows ? fileLocation : undefined, children: canOpenFileLocation ? (jsx_runtime_1.jsx("button", { type: "button", className: `${hoverable_1.HOVERABLE_CLASS_NAME} ${hoverable_1.FOCUS_VISIBLE_ONLY_CLASS_NAME}`, onClick: onOpenFileLocation, style: {
+                    jsx_runtime_1.jsxs("div", { style: left, children: [functionName === null ? null : (jsx_runtime_1.jsx("div", { style: { ...fnName, fontSize }, children: functionName })), fileLocation ? (jsx_runtime_1.jsx("div", { ref: locationRef, role: "group", style: { ...locationContainer, fontSize }, "aria-label": locationOverflows ? fileLocation : undefined, children: canOpenFileLocation ? (jsx_runtime_1.jsx("button", { type: "button", className: `${hoverable_1.HOVERABLE_CLASS_NAME} ${hoverable_1.FOCUS_VISIBLE_ONLY_CLASS_NAME}`, onClick: onOpenFileLocation, style: {
                                         ...location,
                                         ...(0, hoverable_1.hoverableStyle)({
                                             idleBackground: colors_1.TRANSPARENT,

package/dist/esm/{CaptionQueueProcessor-nr7hjcga.mjs → CaptionQueueProcessor-qj37c6r2.mjs}

@@ -3,7 +3,7 @@ import {
 } from "./index-09txs1bj.mjs";
 import {
   installRequiredPackages
-} from "./index-dh3zk2hv.mjs";
+} from "./index-vtr5qzam.mjs";
 import {
   RenderQueueContext
 } from "./index-hqxc6tzp.mjs";
@@ -14,7 +14,7 @@ import {
 } from "./index-dfy1t576.mjs";
 import"./index-qve7mdfp.mjs";
 import"./index-5zrb1ft4.mjs";
-import"./index-wqc43mw0.mjs";
+import"./index-3qb54r5j.mjs";
 import"./index-rcv7qkt5.mjs";
 
 // src/components/RenderQueue/CaptionQueueProcessor.tsx

package/dist/esm/{LazyModels-ajkn7fs3.mjs → LazyModels-rjsrgap5.mjs}

@@ -1,11 +1,11 @@
 import {
   Models
-} from "./index-9q9w8v9p.mjs";
-import"./index-t7xnxdf8.mjs";
-import"./index-890dd9b3.mjs";
+} from "./index-f9hxt5yh.mjs";
+import"./index-vnc2wdfd.mjs";
+import"./index-m01zjph7.mjs";
 import"./index-qve7mdfp.mjs";
 import"./index-5zrb1ft4.mjs";
-import"./index-wqc43mw0.mjs";
+import"./index-3qb54r5j.mjs";
 import"./index-rcv7qkt5.mjs";
 export {
   Models as default

package/dist/esm/{LazyModels-g1g7cf4e.mjs → LazyModels-rnbjx98t.mjs}

@@ -1,11 +1,11 @@
 import {
   Models
-} from "./index-8nt6a0mw.mjs";
-import"./index-t7xnxdf8.mjs";
-import"./index-890dd9b3.mjs";
+} from "./index-jc22b2wb.mjs";
+import"./index-vnc2wdfd.mjs";
+import"./index-m01zjph7.mjs";
 import"./index-qve7mdfp.mjs";
 import"./index-5zrb1ft4.mjs";
-import"./index-wqc43mw0.mjs";
+import"./index-3qb54r5j.mjs";
 import"./index-rcv7qkt5.mjs";
 export {
   Models as default

package/dist/esm/{TranscriptionModal-e18bzbkb.mjs → TranscriptionModal-y7zeqj2d.mjs}

@@ -5,7 +5,7 @@ import {
   NumberSetting,
   getDefaultCaptionOutputName,
   validateCaptionOutputName
-} from "./index-xac20sv4.mjs";
+} from "./index-r9bj4tta.mjs";
 import {
   Button,
   Checkbox,
@@ -30,24 +30,24 @@ import {
   persistSelectedOptionsSidebarPanel,
   rightRow,
   useStaticFiles
-} from "./index-x6r9bn12.mjs";
+} from "./index-m2a95v3p.mjs";
 import {
   showNotification
-} from "./index-dh3zk2hv.mjs";
+} from "./index-vtr5qzam.mjs";
 import {
   RenderQueueContext
 } from "./index-hqxc6tzp.mjs";
 import {
   openInFileExplorer
-} from "./index-s6qya2gg.mjs";
+} from "./index-19d05w9e.mjs";
 import {
   getBrowserStudioOperations
 } from "./index-dfy1t576.mjs";
-import"./index-t7tbt980.mjs";
+import"./index-24wge6y5.mjs";
 import {
   Models
-} from "./index-9q9w8v9p.mjs";
-import"./index-t7xnxdf8.mjs";
+} from "./index-f9hxt5yh.mjs";
+import"./index-vnc2wdfd.mjs";
 import {
   InlineAction,
   ModelsIcon,
@@ -64,14 +64,14 @@ import {
   leftSidebar,
   optionsPanel,
   outerModalStyle
-} from "./index-890dd9b3.mjs";
+} from "./index-m01zjph7.mjs";
 import"./index-qve7mdfp.mjs";
 import"./index-5zrb1ft4.mjs";
 import {
   BLUE_DISABLED,
   LIGHT_TEXT,
   WHITE
-} from "./index-wqc43mw0.mjs";
+} from "./index-3qb54r5j.mjs";
 import"./index-rcv7qkt5.mjs";
 
 // src/components/Transcription/TranscriptionModal.tsx
@@ -299,7 +299,7 @@ var TranscriptionSettingLabel = ({ children, inputId, name }) => {
         x: 0.5
       }),
       /* @__PURE__ */ jsx(InfoBubble, {
-        title: `Learn more about ${name}`,
+        "aria-label": `Learn more about ${name}`,
         children: /* @__PURE__ */ jsx("div", {
           style: tooltipContent,
           children
@@ -424,7 +424,7 @@ var ModelSettings = ({
             children: /* @__PURE__ */ jsx(Combobox, {
               values: modelOptions,
               selectedId: selectedModel,
-              title: "Whisper model",
+              "aria-label": "Whisper model",
               style: controlStyle
             })
           })
@@ -442,7 +442,7 @@ var ModelSettings = ({
             children: /* @__PURE__ */ jsx(Combobox, {
               values: languageOptions,
               selectedId: selectedLanguage,
-              title: "Spoken language",
+              "aria-label": "Spoken language",
               style: controlStyle
             })
           })
@@ -460,7 +460,7 @@ var ModelSettings = ({
             children: /* @__PURE__ */ jsx(Combobox, {
               values: taskOptions,
               selectedId: effectiveTask,
-              title: "Task",
+              "aria-label": "Task",
               style: controlStyle
             })
           })
@@ -560,7 +560,7 @@ var OutputSettings = ({ exists, onOutNameChange, outName, validationMessage }) =
                       isBrowserStudio ? null : /* @__PURE__ */ jsx(InlineAction, {
                         onClick: openExistingOutput,
                         renderAction: renderOpenIcon,
-                        title: `Open in ${fileManagerName}`,
+                        "aria-label": `Open in ${fileManagerName}`,
                         variant: null
                       }),
                       "Exists, will be overwritten"
@@ -898,7 +898,7 @@ var TranscriptionModal = ({
             /* @__PURE__ */ jsx(Button, {
               onClick: onAddToQueue,
               disabled: !canTranscribe,
-              title: transcribeDisabledReason,
+              "aria-label": transcribeDisabledReason,
               style: {
                 ...buttonStyle,
                 backgroundColor: canTranscribe ? buttonStyle.backgroundColor : BLUE_DISABLED

package/dist/esm/{VideoMattingModal-5bz2s4rs.mjs → VideoMattingModal-jzrkhah1.mjs}

@@ -3,7 +3,7 @@ import {
 } from "./index-7tt71e8n.mjs";
 import {
   RenderModalOutputName
-} from "./index-c2wabcdt.mjs";
+} from "./index-cakcjjy2.mjs";
 import {
   Button,
   Checkmark,
@@ -24,18 +24,18 @@ import {
   rightRow,
   useStaticFiles,
   validatePublicOutputName
-} from "./index-x6r9bn12.mjs";
-import"./index-dh3zk2hv.mjs";
+} from "./index-m2a95v3p.mjs";
+import"./index-vtr5qzam.mjs";
 import {
   RenderQueueContext
 } from "./index-hqxc6tzp.mjs";
-import"./index-s6qya2gg.mjs";
+import"./index-19d05w9e.mjs";
 import"./index-dfy1t576.mjs";
-import"./index-t7tbt980.mjs";
+import"./index-24wge6y5.mjs";
 import {
   Models
-} from "./index-8nt6a0mw.mjs";
-import"./index-t7xnxdf8.mjs";
+} from "./index-jc22b2wb.mjs";
+import"./index-vnc2wdfd.mjs";
 import {
   ModelsIcon,
   VERTICAL_SCROLLBAR_CLASSNAME,
@@ -50,12 +50,12 @@ import {
   leftSidebar,
   optionsPanel,
   outerModalStyle
-} from "./index-890dd9b3.mjs";
+} from "./index-m01zjph7.mjs";
 import"./index-qve7mdfp.mjs";
 import"./index-5zrb1ft4.mjs";
 import {
   BLUE_DISABLED
-} from "./index-wqc43mw0.mjs";
+} from "./index-3qb54r5j.mjs";
 import"./index-rcv7qkt5.mjs";
 
 // src/components/VideoMatting/VideoMattingModal.tsx
@@ -219,7 +219,7 @@ var VideoMattingModal = ({
             /* @__PURE__ */ jsx(Button, {
               disabled: !canSubmit,
               onClick: submit,
-              title: support.type === "unsupported" ? support.message : undefined,
+              "aria-label": support.type === "unsupported" ? support.message : undefined,
               style: {
                 ...buttonStyle,
                 backgroundColor: canSubmit ? buttonStyle.backgroundColor : BLUE_DISABLED
@@ -290,7 +290,7 @@ var VideoMattingModal = ({
                       children: /* @__PURE__ */ jsx(Combobox, {
                         values: modelOptions,
                         selectedId: model,
-                        title: "Model",
+                        "aria-label": "Model",
                         style: controlStyle
                       })
                     })
@@ -316,7 +316,7 @@ var VideoMattingModal = ({
                       children: /* @__PURE__ */ jsx(Combobox, {
                         values: audioOptions,
                         selectedId: audio,
-                        title: "Audio",
+                        "aria-label": "Audio",
                         style: controlStyle
                       })
                     })
@@ -334,7 +334,7 @@ var VideoMattingModal = ({
                       children: /* @__PURE__ */ jsx(Combobox, {
                         values: qualityOptions,
                         selectedId: String(videoBitrate),
-                        title: "Video quality",
+                        "aria-label": "Video quality",
                         style: controlStyle
                       })
                     })

package/dist/esm/{index-s6qya2gg.mjs → index-19d05w9e.mjs}

@@ -8,7 +8,7 @@ import {
 import {
   CURRENT_COLOR,
   CURRENT_COLOR_LOWERCASE
-} from "./index-wqc43mw0.mjs";
+} from "./index-3qb54r5j.mjs";
 import {
   __require,
   __toESM

package/dist/esm/{index-t7tbt980.mjs → index-24wge6y5.mjs}

@@ -30,7 +30,6 @@ var studioCssVariables = `
   --remotion-studio-white-alpha-72: rgba(255, 255, 255, 0.72);
   --remotion-studio-white-alpha-80: rgba(255, 255, 255, 0.8);
   --remotion-studio-white-alpha-90: rgba(255, 255, 255, 0.9);
-  --remotion-studio-black-alpha-10: rgba(0, 0, 0, 0.1);
   --remotion-studio-black-alpha-28: rgba(0, 0, 0, 0.28);
   --remotion-studio-black-alpha-30: rgba(0, 0, 0, 0.3);
   --remotion-studio-black-alpha-40: rgba(0, 0, 0, 0.4);
@@ -71,12 +70,12 @@ var studioCssVariables = `
   --remotion-studio-timeline-marquee-blue-alpha-75: rgba(70, 130, 255, 0.75);
   --remotion-studio-easing-selected-background: rgba(11, 132, 243, 0.18);
   --remotion-studio-info-blue-background: rgba(59, 130, 246, 0.15);
-  --remotion-studio-color-picker-checker-background-color: #444;
+  --remotion-studio-color-picker-checker-background-color: var(--remotion-studio-background);
   --remotion-studio-color-picker-hue-gradient: linear-gradient(to right, #f00 0%, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%);
   --remotion-studio-timeline-audio-gradient: linear-gradient(rgb(16 171 58), rgb(43 165 63) 60%);
   --remotion-studio-timeline-video-gradient: linear-gradient(to top, #8e44ad, #9b59b6);
   --remotion-studio-focus-color: #555;
-  --remotion-studio-color-picker-checker-color: #888;
+  --remotion-studio-color-picker-checker-color: var(--remotion-studio-white-alpha-15);
   --remotion-studio-info-blue-border-color: rgba(59, 130, 246, 0.4);
   --remotion-studio-black-alpha-22: rgba(0, 0, 0, 0.22);
   --remotion-studio-font-family-error-color: #ff8a8a;

package/dist/esm/{index-wqc43mw0.mjs → index-3qb54r5j.mjs}

@@ -33,7 +33,6 @@ var WHITE_ALPHA_70 = "var(--remotion-studio-white-alpha-70)";
 var WHITE_ALPHA_72 = "var(--remotion-studio-white-alpha-72)";
 var WHITE_ALPHA_80 = "var(--remotion-studio-white-alpha-80)";
 var WHITE_ALPHA_90 = "var(--remotion-studio-white-alpha-90)";
-var BLACK_ALPHA_10 = "var(--remotion-studio-black-alpha-10)";
 var BLACK_ALPHA_28 = "var(--remotion-studio-black-alpha-28)";
 var BLACK_ALPHA_30 = "var(--remotion-studio-black-alpha-30)";
 var BLACK_ALPHA_40 = "var(--remotion-studio-black-alpha-40)";
@@ -120,12 +119,12 @@ var FOCUS_BOX_SHADOW = `inset 1px 1px ${FOCUS_COLOR}, inset -1px -1px ${FOCUS_CO
 var CHECKERBOARD_BACKGROUND_IMAGE = `
      linear-gradient(
         45deg,
-        ${BLACK_ALPHA_10} 25%,
+        ${WHITE_ALPHA_15} 25%,
         ${TRANSPARENT} 25%
       ),
-      linear-gradient(135deg, ${BLACK_ALPHA_10} 25%, ${TRANSPARENT} 25%),
-      linear-gradient(45deg, ${TRANSPARENT} 75%, ${BLACK_ALPHA_10} 75%),
-      linear-gradient(135deg, ${TRANSPARENT} 75%, ${BLACK_ALPHA_10} 75%)
+      linear-gradient(135deg, ${WHITE_ALPHA_15} 25%, ${TRANSPARENT} 25%),
+      linear-gradient(45deg, ${TRANSPARENT} 75%, ${WHITE_ALPHA_15} 75%),
+      linear-gradient(135deg, ${TRANSPARENT} 75%, ${WHITE_ALPHA_15} 75%)
     `;
 var COLOR_PICKER_CHECKER_BACKGROUND_IMAGE = `linear-gradient(45deg, ${COLOR_PICKER_CHECKER_COLOR} 25%, ${TRANSPARENT} 25%), ` + `linear-gradient(-45deg, ${COLOR_PICKER_CHECKER_COLOR} 25%, ${TRANSPARENT} 25%), ` + `linear-gradient(45deg, ${TRANSPARENT} 75%, ${COLOR_PICKER_CHECKER_COLOR} 75%), ` + `linear-gradient(-45deg, ${TRANSPARENT} 75%, ${COLOR_PICKER_CHECKER_COLOR} 75%)`;
 var COLOR_PICKER_CHECKER_BACKGROUND_COLOR = "var(--remotion-studio-color-picker-checker-background-color)";

package/dist/esm/{index-c2wabcdt.mjs → index-cakcjjy2.mjs}

@@ -5,13 +5,13 @@ import {
   label,
   optionRow,
   rightRow
-} from "./index-x6r9bn12.mjs";
+} from "./index-m2a95v3p.mjs";
 import {
   showNotification
-} from "./index-dh3zk2hv.mjs";
+} from "./index-vtr5qzam.mjs";
 import {
   openInFileExplorer
-} from "./index-s6qya2gg.mjs";
+} from "./index-19d05w9e.mjs";
 import {
   getBrowserStudioOperations
 } from "./index-dfy1t576.mjs";
@@ -20,10 +20,10 @@ import {
   InlineAction,
   Spacing,
   ValidationMessage
-} from "./index-890dd9b3.mjs";
+} from "./index-m01zjph7.mjs";
 import {
   WHITE
-} from "./index-wqc43mw0.mjs";
+} from "./index-3qb54r5j.mjs";
 
 // src/components/RenderModal/RenderModalOutputName.tsx
 import { useCallback } from "react";
@@ -125,7 +125,7 @@ var RenderModalOutputName = ({
                         variant: null,
                         onClick: openExistingOutput,
                         renderAction: renderOpenIcon,
-                        title: `Open in ${fileManagerName}`
+                        "aria-label": `Open in ${fileManagerName}`
                       }),
                       "Exists, will be overwritten"
                     ]

package/dist/esm/{index-9q9w8v9p.mjs → index-f9hxt5yh.mjs}

@@ -1,6 +1,6 @@
 import {
   ModelManager
-} from "./index-t7xnxdf8.mjs";
+} from "./index-vnc2wdfd.mjs";
 
 // src/components/Transcription/Models.tsx
 import {

package/dist/esm/{index-8nt6a0mw.mjs → index-jc22b2wb.mjs}

@@ -1,6 +1,6 @@
 import {
   ModelManager
-} from "./index-t7xnxdf8.mjs";
+} from "./index-vnc2wdfd.mjs";
 
 // src/components/VideoMatting/Models.tsx
 import {

package/dist/esm/{index-890dd9b3.mjs → index-m01zjph7.mjs}

@@ -22,7 +22,7 @@ import {
   WHITE_ALPHA_20,
   WHITE_ALPHA_90,
   getBackgroundFromHoverState
-} from "./index-wqc43mw0.mjs";
+} from "./index-3qb54r5j.mjs";
 
 // src/components/layout.tsx
 import { useMemo } from "react";
@@ -167,7 +167,6 @@ var InlineAction = ({
   renderAction,
   onClick,
   disabled,
-  title,
   hoveredColor = WHITE,
   unhoveredColor = LIGHT_TEXT,
   variant,
@@ -217,8 +216,6 @@ var InlineAction = ({
     onPointerDown,
     style,
     tabIndex,
-    title,
-    "aria-label": buttonProps["aria-label"] ?? title,
     children: renderAction(CURRENT_COLOR)
   });
 };
@@ -727,11 +724,12 @@ var Spinner = ({ size, duration, color = LIGHT_TEXT }) => {
 
 // src/icons/trash.tsx
 import { jsx as jsx8 } from "react/jsx-runtime";
-var TrashIcon = ({ color, ...props }) => {
+var TrashIcon = ({ color, style: style2, ...props }) => {
   return /* @__PURE__ */ jsx8("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 448 512",
     ...props,
+    style: { overflow: "visible", ...style2 },
     children: /* @__PURE__ */ jsx8("path", {
       fill: color,
       d: "M160.5 27.4C162.5 20.6 168.8 16 175.8 16h96.4c7.1 0 13.3 4.6 15.3 11.4l11 36.6h-149l11-36.6zM116.1 64H16C7.2 64 0 71.2 0 80s7.2 16 16 16h416c8.8 0 16-7.2 16-16s-7.2-16-16-16H331.9l-13.7-45.8C312.1-2.1 293.4-16 272.2-16h-96.4c-21.2 0-39.9 13.9-46 34.2L116.1 64zM28.7 144l22.9 308.7c2.5 33.4 30.3 59.3 63.8 59.3h217.1c33.5 0 61.3-25.9 63.8-59.3L419.2 144h-32.1l-22.7 306.4c-1.2 16.7-15.2 29.6-31.9 29.6H115.4c-16.8 0-30.7-12.9-31.9-29.6L60.8 144H28.7z"