@remotion/studio 4.0.528 → 4.0.529

package/dist/Studio.js

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Studio = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const paths_1 = require("@remotion/paths");
 const react_1 = require("react");
 const react_dom_1 = require("react-dom");
 const remotion_1 = require("remotion");
@@ -13,6 +14,7 @@ const FastRefreshProvider_1 = require("./FastRefreshProvider");
 const inject_css_1 = require("./helpers/inject-css");
 const ResolveCompositionConfigInStudio_1 = require("./ResolveCompositionConfigInStudio");
 const composition_list_1 = require("./state/composition-list");
+remotion_1.Internals.setInterpolatePaths(paths_1.interpolatePaths);
 const getServerDisconnectedDomElement = () => {
     return document.getElementById('server-disconnected-overlay');
 };

package/dist/components/AgentPrompt.js

@@ -87,7 +87,7 @@ const AgentPrompt = ({ availableText, promptDetails, skillId }) => {
     const renderInstallCopy = (0, react_1.useCallback)((color) => (jsx_runtime_1.jsx(copy_1.CopyIcon, { copied: installCopied, color: color, style: copyIcon })), [installCopied]);
     return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [skillAvailable ? null : (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
                     jsx_runtime_1.jsx("div", { style: text, children: "Install the Agent Skill first:" }), canInstallSkill && skill ? (jsx_runtime_1.jsx("div", { "aria-label": "Remotion Agent Skills", role: "list", style: skillRowContainer, children: jsx_runtime_1.jsx(SkillsSettings_1.SkillSettingsRow, { skill: skill }) })) : (jsx_runtime_1.jsxs("div", { style: commandField, children: [
-                            jsx_runtime_1.jsx("pre", { style: code, children: installCommand }), jsx_runtime_1.jsx(InlineAction_1.InlineAction, { onClick: () => copy(installCommand, markInstallCopied), renderAction: renderInstallCopy, style: copyAction, title: "Copy command", variant: null })
+                            jsx_runtime_1.jsx("pre", { style: code, children: installCommand }), jsx_runtime_1.jsx(InlineAction_1.InlineAction, { onClick: () => copy(installCommand, markInstallCopied), renderAction: renderInstallCopy, style: copyAction, "aria-label": "Copy command", variant: null })
                         ] })), skillActionError ? (jsx_runtime_1.jsx("div", { style: skillError, children: jsx_runtime_1.jsx(ValidationMessage_1.ValidationMessage, { align: "flex-start", message: skillActionError, type: "error" }) })) : null] })), jsx_runtime_1.jsxs("div", { style: { ...promptHeader, marginTop: skillAvailable ? 0 : 16 }, children: [
                     jsx_runtime_1.jsx("div", { style: text, children: skillAvailable
                             ? availableText
@@ -99,7 +99,7 @@ const AgentPrompt = ({ availableText, promptDetails, skillId }) => {
                                     fontSize: 'inherit',
                                     fontWeight: 'inherit',
                                     lineHeight: 'inherit',
-                                }, children: skillName }), promptDetails] }), jsx_runtime_1.jsx(InlineAction_1.InlineAction, { onClick: () => copy(prompt, markPromptCopied), renderAction: renderPromptCopy, style: copyAction, title: "Copy prompt", variant: null })
+                                }, children: skillName }), promptDetails] }), jsx_runtime_1.jsx(InlineAction_1.InlineAction, { onClick: () => copy(prompt, markPromptCopied), renderAction: renderPromptCopy, style: copyAction, "aria-label": "Copy prompt", variant: null })
                 ] })
         ] }));
 };

package/dist/components/AppLaunchButton.d.ts

@@ -12,5 +12,4 @@ export declare const AppLaunchButton: React.FC<{
     readonly onClick: React.MouseEventHandler<HTMLButtonElement>;
     readonly size: 'compact' | 'default';
     readonly style: React.CSSProperties | null;
-    readonly title: string;
 }>;

package/dist/components/AppLaunchButton.js

@@ -26,7 +26,7 @@ const dropdownIconStyle = {
     display: 'flex',
     transform: 'translateY(-1px)',
 };
-const AppLaunchButton = ({ actionButtonId, ariaLabel, children, disabled, menuAriaLabel, menuButtonId, menuItems, onConfigureApps, onClick, size, style, title, }) => {
+const AppLaunchButton = ({ actionButtonId, ariaLabel, children, disabled, menuAriaLabel, menuButtonId, menuItems, onConfigureApps, onClick, size, style, }) => {
     const items = (0, react_1.useMemo)(() => {
         return [
             ...menuItems,
@@ -50,7 +50,6 @@ const AppLaunchButton = ({ actionButtonId, ariaLabel, children, disabled, menuAr
                 style: size === 'default'
                     ? defaultMainSegmentStyle
                     : compactMainSegmentStyle,
-                title,
                 tooltipLabel: null,
                 type: 'action',
             },
@@ -67,7 +66,6 @@ const AppLaunchButton = ({ actionButtonId, ariaLabel, children, disabled, menuAr
                         segmentId: 'another-app',
                         selectedId: null,
                         style: dropdownSegmentStyle,
-                        title: menuAriaLabel,
                         tooltipLabel: null,
                         type: 'menu',
                         values: items,
@@ -85,8 +83,7 @@ const AppLaunchButton = ({ actionButtonId, ariaLabel, children, disabled, menuAr
         menuButtonId,
         onClick,
         size,
-        title,
     ]);
-    return (jsx_runtime_1.jsx(SegmentedButton_1.SegmentedButton, { segments: segments, style: { ...(size === 'default' ? { height: 41 } : null), ...style }, title: null }));
+    return (jsx_runtime_1.jsx(SegmentedButton_1.SegmentedButton, { segments: segments, style: { ...(size === 'default' ? { height: 41 } : null), ...style } }));
 };
 exports.AppLaunchButton = AppLaunchButton;

package/dist/components/AssetAudioVolume.js

@@ -23,11 +23,11 @@ const AssetAudioVolume = ({ src, waveformSampleRate }) => {
             onError: () => setValue('Unavailable'),
         });
     }, [src, waveformSampleRate]);
-    return (jsx_runtime_1.jsx("span", { style: {
+    return (jsx_runtime_1.jsx("span", { role: "group", style: {
             fontFamily: 'sans-serif',
             fontSize: 13,
             lineHeight: '20px',
             color: colors_1.LIGHT_TEXT,
-        }, title: "RMS level across all channels over the full audio track, including silence.", children: value }));
+        }, "aria-label": "RMS level across all channels over the full audio track, including silence.", children: value }));
 };
 exports.AssetAudioVolume = AssetAudioVolume;

package/dist/components/AssetSelectorItem.js

@@ -275,7 +275,7 @@ const AssetFolderItem = ({ tabIndex, item, level, parentFolder, toggleFolder, dr
     return (jsx_runtime_1.jsxs("div", { onDragEnter: onDragEnter, onDragLeave: onDragLeave, style: {
             backgroundColor: isDropDiv ? colors_1.WHITE_ALPHA_06 : colors_1.BACKGROUND,
         }, children: [
-            jsx_runtime_1.jsx(ContextMenu_1.ContextMenu, { getItems: getContextMenuItems, children: jsx_runtime_1.jsx(layout_1.Row, { align: "center", children: jsx_runtime_1.jsxs("div", { style: folderStyle, className: `${hoverable_1.HOVERABLE_CLASS_NAME} ${hoverable_1.HOVER_GROUP_CLASS_NAME}`, tabIndex: tabIndex, title: item.name, onClick: onClick, onDragEnter: (event) => {
+            jsx_runtime_1.jsx(ContextMenu_1.ContextMenu, { getItems: getContextMenuItems, children: jsx_runtime_1.jsx(layout_1.Row, { align: "center", children: jsx_runtime_1.jsxs("div", { role: "group", style: folderStyle, className: `${hoverable_1.HOVERABLE_CLASS_NAME} ${hoverable_1.HOVER_GROUP_CLASS_NAME}`, tabIndex: tabIndex, "aria-label": item.name, onClick: onClick, onDragEnter: (event) => {
                             if (!(0, use_asset_drag_events_1.isAssetUploadDragEvent)(event)) {
                                 return;
                             }
@@ -293,7 +293,7 @@ const AssetFolderItem = ({ tabIndex, item, level, parentFolder, toggleFolder, dr
                             }
                         }, children: [
                             jsx_runtime_1.jsx(Icon, { style: iconStyle, color: colors_1.CURRENT_COLOR }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 1 }), jsx_runtime_1.jsx("div", { style: labelStyle, children: item.name }), jsx_runtime_1.jsxs("div", { className: hoverable_1.HOVER_GROUP_REVEAL_CLASS_NAME, style: inlineActionsStyle, children: [
-                                    jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.5 }), jsx_runtime_1.jsx(InlineDropdown_1.InlineDropdown, { variant: null, title: "More actions", renderAction: renderContextMenuAction, getItems: getContextMenuItems, style: hoverable_1.NO_HOVER_BACKGROUND_STYLE, className: hoverable_1.FOCUS_VISIBLE_ONLY_CLASS_NAME })
+                                    jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.5 }), jsx_runtime_1.jsx(InlineDropdown_1.InlineDropdown, { variant: null, "aria-label": "More actions", renderAction: renderContextMenuAction, getItems: getContextMenuItems, style: hoverable_1.NO_HOVER_BACKGROUND_STYLE, className: hoverable_1.FOCUS_VISIBLE_ONLY_CLASS_NAME })
                                 ] })
                         ] }) }) }), item.expanded ? (jsx_runtime_1.jsx(exports.AssetFolderTree, { item: item.items, name: item.name, level: level, parentFolder: parentFolder, tabIndex: tabIndex, toggleFolder: toggleFolder, dropLocation: dropLocation, setDropLocation: setDropLocation, readOnlyStudio: readOnlyStudio, uploadAssets: uploadAssets }, item.name)) : null] }));
 };
@@ -412,9 +412,9 @@ const AssetSelectorItem = ({ item, tabIndex, level, parentFolder, readOnlyStudio
         e.stopPropagation();
         openAssetInExplorer();
     }, [openAssetInExplorer]);
-    return (jsx_runtime_1.jsx(ContextMenu_1.ContextMenu, { getItems: getContextMenuItems, children: jsx_runtime_1.jsx(layout_1.Row, { align: "center", children: jsx_runtime_1.jsxs("div", { ref: rowRef, style: style, className: `${hoverable_1.HOVERABLE_CLASS_NAME} ${hoverable_1.HOVER_GROUP_CLASS_NAME}`, onClick: onClick, draggable: canDragAsset, onDragStart: onDragStart, onDragEnd: onDragEnd, tabIndex: tabIndex, title: item.name, children: [
+    return (jsx_runtime_1.jsx(ContextMenu_1.ContextMenu, { getItems: getContextMenuItems, children: jsx_runtime_1.jsx(layout_1.Row, { align: "center", children: jsx_runtime_1.jsxs("div", { ref: rowRef, role: "group", style: style, className: `${hoverable_1.HOVERABLE_CLASS_NAME} ${hoverable_1.HOVER_GROUP_CLASS_NAME}`, onClick: onClick, draggable: canDragAsset, onDragStart: onDragStart, onDragEnd: onDragEnd, tabIndex: tabIndex, "aria-label": item.name, children: [
                     jsx_runtime_1.jsx(AssetFileIcon_1.AssetFileIcon, { fileType: previewFileType, style: iconStyle, color: colors_1.CURRENT_COLOR }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 1 }), jsx_runtime_1.jsx("div", { style: labelStyle, children: item.name }), !isDragging ? (jsx_runtime_1.jsxs("div", { className: hoverable_1.HOVER_GROUP_REVEAL_CLASS_NAME, style: inlineActionsStyle, children: [
-                            jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.5 }), jsx_runtime_1.jsx(InlineDropdown_1.InlineDropdown, { variant: null, title: "More actions", renderAction: renderContextMenuAction, getItems: getContextMenuItems, style: hoverable_1.NO_HOVER_BACKGROUND_STYLE, className: hoverable_1.FOCUS_VISIBLE_ONLY_CLASS_NAME }), fileExplorerDisabled ? null : (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
-                                    jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.5 }), jsx_runtime_1.jsx(InlineAction_1.InlineAction, { variant: null, title: `Show in ${fileManagerName}`, renderAction: renderFileExplorerAction, onClick: revealInExplorer, style: hoverable_1.NO_HOVER_BACKGROUND_STYLE, className: hoverable_1.FOCUS_VISIBLE_ONLY_CLASS_NAME })
+                            jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.5 }), jsx_runtime_1.jsx(InlineDropdown_1.InlineDropdown, { variant: null, "aria-label": "More actions", renderAction: renderContextMenuAction, getItems: getContextMenuItems, style: hoverable_1.NO_HOVER_BACKGROUND_STYLE, className: hoverable_1.FOCUS_VISIBLE_ONLY_CLASS_NAME }), fileExplorerDisabled ? null : (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
+                                    jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.5 }), jsx_runtime_1.jsx(InlineAction_1.InlineAction, { variant: null, "aria-label": `Show in ${fileManagerName}`, renderAction: renderFileExplorerAction, onClick: revealInExplorer, style: hoverable_1.NO_HOVER_BACKGROUND_STYLE, className: hoverable_1.FOCUS_VISIBLE_ONLY_CLASS_NAME })
                                 ] }))] })) : null] }) }) }));
 };

package/dist/components/Button.d.ts

@@ -7,7 +7,7 @@ export type ButtonProps = {
     readonly style?: React.CSSProperties;
     readonly buttonContainerStyle?: React.CSSProperties;
     readonly autoFocus?: boolean;
-    readonly title?: string;
+    readonly 'aria-label'?: string;
     readonly id?: string;
     readonly onPointerDown?: React.PointerEventHandler<HTMLButtonElement>;
 };

package/dist/components/Button.js

@@ -16,7 +16,7 @@ const button = {
     margin: 0,
     padding: 0,
 };
-const ButtonRefForwardFunction = ({ children, onClick, title, disabled, size = 'default', style, id, autoFocus, buttonContainerStyle, onPointerDown, }, ref) => {
+const ButtonRefForwardFunction = ({ children, onClick, 'aria-label': ariaLabel, disabled, size = 'default', style, id, autoFocus, buttonContainerStyle, onPointerDown, }, ref) => {
     const combined = (0, react_1.useMemo)(() => {
         var _a, _b;
         const idleBackground = (_a = style === null || style === void 0 ? void 0 : style.backgroundColor) !== null && _a !== void 0 ? _a : colors_1.TRANSPARENT;
@@ -46,6 +46,6 @@ const ButtonRefForwardFunction = ({ children, onClick, title, disabled, size = '
             ...(buttonContainerStyle !== null && buttonContainerStyle !== void 0 ? buttonContainerStyle : {}),
         };
     }, [buttonContainerStyle, disabled, size]);
-    return (jsx_runtime_1.jsx("button", { ref: ref, className: `${hoverable_1.HOVERABLE_CLASS_NAME} ${hoverable_1.FOCUS_VISIBLE_ONLY_CLASS_NAME}`, id: id, style: combined, type: "button", disabled: disabled, onClick: onClick, onPointerDown: onPointerDown, autoFocus: autoFocus, title: title, children: jsx_runtime_1.jsx("div", { className: "css-reset", style: buttonContainer, children: children }) }));
+    return (jsx_runtime_1.jsx("button", { ref: ref, className: `${hoverable_1.HOVERABLE_CLASS_NAME} ${hoverable_1.FOCUS_VISIBLE_ONLY_CLASS_NAME}`, id: id, style: combined, type: "button", disabled: disabled, onClick: onClick, onPointerDown: onPointerDown, autoFocus: autoFocus, "aria-label": ariaLabel, children: jsx_runtime_1.jsx("div", { className: "css-reset", style: buttonContainer, children: children }) }));
 };
 exports.Button = (0, react_1.forwardRef)(ButtonRefForwardFunction);

package/dist/components/CaptionInspector.js

@@ -118,6 +118,6 @@ const CaptionInspector = ({ captions, expanded, onTextChange, onTextSave, onText
     }, [importCaptions, setSelectedModal]);
     return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
             jsx_runtime_1.jsx(common_1.InspectorSectionHeader, { children: jsx_runtime_1.jsx(CollapsibleInspectorSectionHeader_1.CollapsibleInspectorSectionHeader, { action: jsx_runtime_1.jsxs("div", { style: styles_1.sectionHeaderEnd, children: [onReplaceCaptions === null ? null : (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
-                                    jsx_runtime_1.jsx("input", { ref: fileInput, accept: ".json", "aria-label": "Import captions file", hidden: true, onChange: onFileSelected, type: "file" }), jsx_runtime_1.jsx(InlineAction_1.InlineAction, { "aria-label": "Import captions", className: hoverable_1.FOCUS_VISIBLE_ONLY_CLASS_NAME, disabled: isImporting, onClick: openCaptionSelection, renderAction: (color) => (jsx_runtime_1.jsx(upload_1.UploadIcon, { "aria-hidden": "true", color: color, focusable: "false", style: { height: 14, width: 14 } })), title: importTooltip, variant: null })] })), readOnly ? (jsx_runtime_1.jsx("div", { style: readOnlyStatus, title: readOnlyTitle !== null && readOnlyTitle !== void 0 ? readOnlyTitle : undefined, children: "Read only" })) : null] }), expanded: expanded, label: "Captions", onToggle: captions.length > 0 ? onToggle : null }) }), expanded || captions.length === 0 ? (jsx_runtime_1.jsx(CaptionTextEditor_1.CaptionTextEditor, { captions: captions, onChange: onTextChange, onSave: onTextSave, onCancel: onTextCancel, readOnly: readOnly })) : null] }));
+                                    jsx_runtime_1.jsx("input", { ref: fileInput, accept: ".json", "aria-label": "Import captions file", hidden: true, onChange: onFileSelected, type: "file" }), jsx_runtime_1.jsx(InlineAction_1.InlineAction, { "aria-label": "Import captions", "aria-description": importTooltip, className: hoverable_1.FOCUS_VISIBLE_ONLY_CLASS_NAME, disabled: isImporting, onClick: openCaptionSelection, renderAction: (color) => (jsx_runtime_1.jsx(upload_1.UploadIcon, { "aria-hidden": "true", color: color, focusable: "false", style: { height: 14, width: 14 } })), variant: null })] })), readOnly ? (jsx_runtime_1.jsx("div", { role: "group", style: readOnlyStatus, "aria-label": readOnlyTitle !== null && readOnlyTitle !== void 0 ? readOnlyTitle : undefined, children: "Read only" })) : null] }), expanded: expanded, label: "Captions", onToggle: captions.length > 0 ? onToggle : null }) }), expanded || captions.length === 0 ? (jsx_runtime_1.jsx(CaptionTextEditor_1.CaptionTextEditor, { captions: captions, onChange: onTextChange, onSave: onTextSave, onCancel: onTextCancel, readOnly: readOnly })) : null] }));
 };
 exports.CaptionInspector = CaptionInspector;

package/dist/components/CaptionTextEditor.js

@@ -150,7 +150,7 @@ const CaptionTextEditor = ({ captions, onChange, onSave, onCancel, readOnly }) =
                                 }, value: caption.text }), jsx_runtime_1.jsx(InlineAction_1.InlineAction, { "aria-pressed": hasPageBreakAfter, className: hoverable_1.FOCUS_VISIBLE_ONLY_CLASS_NAME, disabled: readOnly, onClick: () => {
                                     updatePageBreakAfter(index, !hasPageBreakAfter);
                                     commitPending();
-                                }, renderAction: (color) => (jsx_runtime_1.jsx(enter_1.EnterIcon, { "aria-hidden": "true", color: hasPageBreakAfter ? colors_1.BLUE : color, focusable: "false", style: { height: 16, width: 16 } })), title: pageBreakTitle, variant: null })] }, key));
+                                }, renderAction: (color) => (jsx_runtime_1.jsx(enter_1.EnterIcon, { "aria-hidden": "true", color: hasPageBreakAfter ? colors_1.BLUE : color, focusable: "false", style: { height: 16, width: 16 } })), "aria-label": pageBreakTitle, variant: null })] }, key));
                 })] }) }));
 };
 exports.CaptionTextEditor = CaptionTextEditor;

package/dist/components/CheckboardToggle.js

@@ -21,7 +21,7 @@ const CheckboardToggle = () => {
     const ariaKeyShortcuts = (0, use_keyboard_shortcut_label_1.useKeyboardShortcutAriaKeyShortcuts)('toggleCheckerboard');
     const accessibilityLabel = 'Show transparency as checkerboard';
     const shortcutsDisabled = (0, use_keybinding_1.areKeyboardShortcutsDisabled)();
-    return (jsx_runtime_1.jsx(ActionTooltip_1.ActionTooltip, { label: "Checkerboard", shortcut: shortcutsDisabled ? null : shortcut, delay: 800, dismissOnClick: false, children: jsx_runtime_1.jsx(ControlButton_1.ControlButton, { title: "", "aria-label": accessibilityLabel, "aria-pressed": checkerboard, "aria-keyshortcuts": shortcutsDisabled ? undefined : ariaKeyShortcuts || undefined, onClick: onClick, style: buttonStyle, children: (color) => (jsx_runtime_1.jsxs("svg", { "aria-hidden": "true", focusable: "false", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 512 512", style: { width: 18, height: 18 }, fill: "none", children: [
+    return (jsx_runtime_1.jsx(ActionTooltip_1.ActionTooltip, { label: "Checkerboard", shortcut: shortcutsDisabled ? null : shortcut, delay: 800, dismissOnClick: false, children: jsx_runtime_1.jsx(ControlButton_1.ControlButton, { "aria-label": accessibilityLabel, "aria-pressed": checkerboard, "aria-keyshortcuts": shortcutsDisabled ? undefined : ariaKeyShortcuts || undefined, onClick: onClick, style: buttonStyle, children: (color) => (jsx_runtime_1.jsxs("svg", { "aria-hidden": "true", focusable: "false", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 512 512", style: { width: 18, height: 18 }, fill: "none", children: [
                     jsx_runtime_1.jsx("path", { fill: checkerboard ? colors_1.BLUE : color, d: "M256 48h184c13.3 0 24 10.7 24 24v184H256V48zM48 256h208v208H72c-13.3 0-24-10.7-24-24V256z" }), jsx_runtime_1.jsx("rect", { x: "48", y: "48", width: "416", height: "416", rx: "24", stroke: checkerboard ? colors_1.BLUE : color, strokeWidth: "32" }), jsx_runtime_1.jsx("path", { d: "M256 48v416M48 256h416", stroke: checkerboard ? colors_1.BLUE : color, strokeWidth: "32" })
                 ] })) }) }));
 };

package/dist/components/CodingAgentButton.js

@@ -53,7 +53,7 @@ const CodingAgentButton = ({ label, prompt, size, style }) => {
     }
     return (jsx_runtime_1.jsxs(AppLaunchButton_1.AppLaunchButton, { actionButtonId: null, ariaLabel: `${label} ${defaultCodingAgent.nameWithType}`, disabled: false, menuAriaLabel: `${label} another coding agent`, menuButtonId: null, menuItems: agentMenuItems, onConfigureApps: configureDefaultApps, onClick: () => {
             openWithCodingAgent(defaultCodingAgent.id, defaultCodingAgent.nameWithType).catch(() => undefined);
-        }, size: size, style: style, title: `${label} ${defaultCodingAgent.nameWithType}`, children: [
+        }, size: size, style: style, children: [
             jsx_runtime_1.jsx(CodingAgentIcon_1.CodingAgentIcon, { codingAgentId: defaultCodingAgent.id, size: size === 'default' ? 14 : 18 }), label, " ", defaultCodingAgent.name] }));
 };
 exports.CodingAgentButton = CodingAgentButton;

package/dist/components/ColorPicker/ColorPicker.d.ts

@@ -9,7 +9,7 @@ type Props = {
     readonly width?: number;
     readonly height?: number;
     readonly borderRadius?: number;
-    readonly title?: string;
+    readonly 'aria-label'?: string;
     readonly name?: string;
     readonly className?: string;
     readonly style?: React.CSSProperties;

package/dist/components/ColorPicker/ColorPicker.js

@@ -56,7 +56,7 @@ const eyedropperButtonBaseStyle = {
     justifyContent: 'center',
     flex: '0 0 auto',
 };
-const ColorPicker = ({ value, onChange, onChangeComplete, disabled, width = 45, height = 25, borderRadius = 3, title, name, className, style: customStyle, }) => {
+const ColorPicker = ({ value, onChange, onChangeComplete, disabled, width = 45, height = 25, borderRadius = 3, 'aria-label': ariaLabel, name, className, style: customStyle, }) => {
     const [opened, setOpened] = (0, react_1.useState)(false);
     const triggerRef = (0, react_1.useRef)(null);
     const { tabIndex, currentZIndex } = (0, z_index_1.useZIndex)();
@@ -204,7 +204,7 @@ const ColorPicker = ({ value, onChange, onChangeComplete, disabled, width = 45,
             jsx_runtime_1.jsxs("span", { style: controlStyle, children: [
                     jsx_runtime_1.jsx("button", { ref: triggerRef, type: "button", className: [is_menu_item_1.MENU_INITIATOR_CLASSNAME, SWATCH_CLASSNAME, className]
                             .filter(Boolean)
-                            .join(' '), disabled: disabled, name: name, title: title !== null && title !== void 0 ? title : value, tabIndex: tabIndex, style: swatchStyle, onPointerDown: onTriggerPointerDown, onClick: onTriggerClick, children: jsx_runtime_1.jsx("span", { style: swatchFill }) }), showEyeDropper ? (jsx_runtime_1.jsx("button", { type: "button", disabled: disabled, style: eyedropperButtonStyle, onPointerDown: onEyeDropperPointerDown, onClick: onPickWithEyeDropper, tabIndex: tabIndex, title: "Pick color from screen", "aria-label": "Pick color from screen", children: jsx_runtime_1.jsx(eyedropper_1.EyedropperIcon, { style: eyedropperIconStyle, color: colors_1.CURRENT_COLOR }) })) : null] }), portalStyle
+                            .join(' '), disabled: disabled, name: name, "aria-label": ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : value, tabIndex: tabIndex, style: swatchStyle, onPointerDown: onTriggerPointerDown, onClick: onTriggerClick, children: jsx_runtime_1.jsx("span", { style: swatchFill }) }), showEyeDropper ? (jsx_runtime_1.jsx("button", { type: "button", disabled: disabled, style: eyedropperButtonStyle, onPointerDown: onEyeDropperPointerDown, onClick: onPickWithEyeDropper, tabIndex: tabIndex, "aria-label": "Pick color from screen", children: jsx_runtime_1.jsx(eyedropper_1.EyedropperIcon, { style: eyedropperIconStyle, color: colors_1.CURRENT_COLOR }) })) : null] }), portalStyle
                 ? react_dom_1.default.createPortal(jsx_runtime_1.jsx("div", { style: styles_1.fullScreenOverlay, children: jsx_runtime_1.jsx("div", { style: styles_1.outerPortal, className: "css-reset", children: jsx_runtime_1.jsx(z_index_1.HigherZIndex, { onOutsideClick: onHide, onEscape: onHide, children: jsx_runtime_1.jsx("div", { style: portalStyle, children: jsx_runtime_1.jsx(ColorPickerPopup_1.ColorPickerPopup, { value: value, onChange: onChange, onChangeComplete: onChangeComplete }) }) }) }) }), (0, portals_1.getPortal)(currentZIndex))
                 : null] }));
 };

package/dist/components/ColorPicker/ColorPickerPopup.js

@@ -271,7 +271,7 @@ const ColorPickerPopup = ({ value, onChange, onChangeComplete }) => {
     }, [formatted]);
     const showEyeDropper = (0, exports.hasEyeDropper)();
     return (jsx_runtime_1.jsxs("div", { style: popupShellStyle, children: [
-            jsx_runtime_1.jsx(SaturationValueArea_1.SaturationValueArea, { hue: hsva.h, saturation: hsva.s, value: hsva.v, onChange: onSvChange, onChangeComplete: onSvComplete }), jsx_runtime_1.jsxs("div", { style: sliderRowStyle, children: [showEyeDropper ? (jsx_runtime_1.jsx("button", { type: "button", style: eyedropperButtonStyle, onClick: onPickWithEyeDropper, tabIndex: tabIndex, title: "Pick color from screen", "aria-label": "Pick color from screen", children: jsx_runtime_1.jsx(eyedropper_1.EyedropperIcon, { style: { width: 14, height: 14 }, color: colors_1.CURRENT_COLOR }) })) : null, jsx_runtime_1.jsx("div", { style: previewSwatchStyle, title: formatted, children: jsx_runtime_1.jsx("div", { style: previewFill }) }), jsx_runtime_1.jsxs("div", { style: slidersColumnStyle, children: [
+            jsx_runtime_1.jsx(SaturationValueArea_1.SaturationValueArea, { hue: hsva.h, saturation: hsva.s, value: hsva.v, onChange: onSvChange, onChangeComplete: onSvComplete }), jsx_runtime_1.jsxs("div", { style: sliderRowStyle, children: [showEyeDropper ? (jsx_runtime_1.jsx("button", { type: "button", style: eyedropperButtonStyle, onClick: onPickWithEyeDropper, tabIndex: tabIndex, "aria-label": "Pick color from screen", children: jsx_runtime_1.jsx(eyedropper_1.EyedropperIcon, { style: { width: 14, height: 14 }, color: colors_1.CURRENT_COLOR }) })) : null, jsx_runtime_1.jsx("div", { role: "group", style: previewSwatchStyle, "aria-label": formatted, children: jsx_runtime_1.jsx("div", { style: previewFill }) }), jsx_runtime_1.jsxs("div", { style: slidersColumnStyle, children: [
                             jsx_runtime_1.jsx(HueSlider_1.HueSlider, { hue: hsva.h, onChange: onHueChange, onChangeComplete: onHueComplete }), jsx_runtime_1.jsx(AlphaSlider_1.AlphaSlider, { hue: hsva.h, saturation: hsva.s, value: hsva.v, alpha: hsva.a, onChange: onAlphaChange, onChangeComplete: onAlphaComplete })
                         ] })
                 ] }), jsx_runtime_1.jsxs("div", { style: inputsRowStyle, children: [

package/dist/components/CompactExplanation.js

@@ -38,12 +38,12 @@ const compactHelpIcon = {
 const compactHelpIconPath = {
     color: 'inherit',
 };
-const CompactHelpLink = ({ href, ariaLabel, title, }) => {
+const CompactHelpLink = ({ href, ariaLabel, }) => {
     const [hovered, setHovered] = (0, react_1.useState)(false);
-    return (jsx_runtime_1.jsx("a", { href: href, target: "_blank", rel: "noopener noreferrer", style: hovered ? compactHelpLinkHovered : compactHelpLink, "aria-label": ariaLabel, title: title, onMouseEnter: () => setHovered(true), onMouseLeave: () => setHovered(false), children: jsx_runtime_1.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 512 512", style: compactHelpIcon, "aria-hidden": "true", children: jsx_runtime_1.jsx("path", { style: compactHelpIconPath, fill: colors_1.CURRENT_COLOR, d: "M464 256a208 208 0 1 0 -416 0 208 208 0 1 0 416 0zM0 256a256 256 0 1 1 512 0 256 256 0 1 1 -512 0zm256-80c-17.7 0-32 14.3-32 32l-48 0c0-44.2 35.8-80 80-80s80 35.8 80 80c0 35.1-20.5 57.5-38.2 70-6.3 4.4-12.5 7.8-17.8 10.4l0 21.9-48 0 0-56.7c1.4-.4 2.7-.7 4.1-1.1 12.2-3.2 23.3-6.1 34.1-13.7 10.4-7.3 17.8-16.9 17.8-30.8 0-17.7-14.3-32-32-32zM232 344l48 0 0 48-48 0 0-48z" }) }) }));
+    return (jsx_runtime_1.jsx("a", { href: href, target: "_blank", rel: "noopener noreferrer", style: hovered ? compactHelpLinkHovered : compactHelpLink, "aria-label": ariaLabel, onMouseEnter: () => setHovered(true), onMouseLeave: () => setHovered(false), children: jsx_runtime_1.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 512 512", style: compactHelpIcon, "aria-hidden": "true", children: jsx_runtime_1.jsx("path", { style: compactHelpIconPath, fill: colors_1.CURRENT_COLOR, d: "M464 256a208 208 0 1 0 -416 0 208 208 0 1 0 416 0zM0 256a256 256 0 1 1 512 0 256 256 0 1 1 -512 0zm256-80c-17.7 0-32 14.3-32 32l-48 0c0-44.2 35.8-80 80-80s80 35.8 80 80c0 35.1-20.5 57.5-38.2 70-6.3 4.4-12.5 7.8-17.8 10.4l0 21.9-48 0 0-56.7c1.4-.4 2.7-.7 4.1-1.1 12.2-3.2 23.3-6.1 34.1-13.7 10.4-7.3 17.8-16.9 17.8-30.8 0-17.7-14.3-32-32-32zM232 344l48 0 0 48-48 0 0-48z" }) }) }));
 };
 const CompactExplanation = ({ children, learnMoreAriaLabel, learnMoreHref, learnMoreTitle = 'Learn more', }) => {
-    return (jsx_runtime_1.jsxs("div", { style: compactExplanation, children: [children, learnMoreHref ? (jsx_runtime_1.jsx(CompactHelpLink, { href: learnMoreHref, ariaLabel: learnMoreAriaLabel !== null && learnMoreAriaLabel !== void 0 ? learnMoreAriaLabel : learnMoreTitle, title: learnMoreTitle })) : null] }));
+    return (jsx_runtime_1.jsxs("div", { style: compactExplanation, children: [children, learnMoreHref ? (jsx_runtime_1.jsx(CompactHelpLink, { href: learnMoreHref, ariaLabel: learnMoreAriaLabel !== null && learnMoreAriaLabel !== void 0 ? learnMoreAriaLabel : learnMoreTitle })) : null] }));
 };
 exports.CompactExplanation = CompactExplanation;
 const CompactNotSetUp = ({ learnMoreAriaLabel, learnMoreHref, learnMoreTitle, }) => {

package/dist/components/CompositionSelectorItem.js

@@ -504,7 +504,7 @@ const CompositionSelectorItem = ({ item, level, currentComposition, tabIndex, se
     if (item.type === 'folder') {
         const folderPath = getFolderPath(item);
         return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
-                jsx_runtime_1.jsx(ContextMenu_1.ContextMenu, { getItems: getContextMenuItems, children: jsx_runtime_1.jsxs("div", { style: reorderWrapper, children: [reorderLineStyle ? (jsx_runtime_1.jsx("div", { "data-composition-reorder-line": true, style: reorderLineStyle })) : null, jsx_runtime_1.jsx(layout_1.Row, { align: "center", children: jsx_runtime_1.jsxs("div", { style: style, className: `__remotion-composition-selector-item ${hoverable_1.HOVERABLE_CLASS_NAME} ${hoverable_1.HOVER_GROUP_CLASS_NAME}`, tabIndex: tabIndex, onClick: onClick, onKeyDown: onKeyDown, draggable: !window.remotion_isReadOnlyStudio, onDragStart: onItemDragStart, onDragEnd: onItemDragEnd, onDragOver: onRowDragOver, onDragLeave: onRowDragLeave, onDrop: onRowDrop, title: item.folderName, role: "button", "aria-expanded": item.expanded, children: [item.expanded ? (jsx_runtime_1.jsx(folder_1.ExpandedFolderIcon, { style: iconStyle, color: colors_1.CURRENT_COLOR })) : (jsx_runtime_1.jsx(folder_1.CollapsedFolderIcon, { color: colors_1.CURRENT_COLOR, style: iconStyle })), jsx_runtime_1.jsx(layout_1.Spacing, { x: 1 }), jsx_runtime_1.jsx("div", { style: labelStyle, children: item.folderName }), jsx_runtime_1.jsx(CompositionContextButton_1.CompositionContextButton, { getItems: getContextMenuItems, visible: true, readOnlyStudio: window.remotion_isReadOnlyStudio })
+                jsx_runtime_1.jsx(ContextMenu_1.ContextMenu, { getItems: getContextMenuItems, children: jsx_runtime_1.jsxs("div", { style: reorderWrapper, children: [reorderLineStyle ? (jsx_runtime_1.jsx("div", { "data-composition-reorder-line": true, style: reorderLineStyle })) : null, jsx_runtime_1.jsx(layout_1.Row, { align: "center", children: jsx_runtime_1.jsxs("div", { style: style, className: `__remotion-composition-selector-item ${hoverable_1.HOVERABLE_CLASS_NAME} ${hoverable_1.HOVER_GROUP_CLASS_NAME}`, tabIndex: tabIndex, onClick: onClick, onKeyDown: onKeyDown, draggable: !window.remotion_isReadOnlyStudio, onDragStart: onItemDragStart, onDragEnd: onItemDragEnd, onDragOver: onRowDragOver, onDragLeave: onRowDragLeave, onDrop: onRowDrop, "aria-label": item.folderName, role: "button", "aria-expanded": item.expanded, children: [item.expanded ? (jsx_runtime_1.jsx(folder_1.ExpandedFolderIcon, { style: iconStyle, color: colors_1.CURRENT_COLOR })) : (jsx_runtime_1.jsx(folder_1.CollapsedFolderIcon, { color: colors_1.CURRENT_COLOR, style: iconStyle })), jsx_runtime_1.jsx(layout_1.Spacing, { x: 1 }), jsx_runtime_1.jsx("div", { style: labelStyle, children: item.folderName }), jsx_runtime_1.jsx(CompositionContextButton_1.CompositionContextButton, { getItems: getContextMenuItems, visible: true, readOnlyStudio: window.remotion_isReadOnlyStudio })
                                     ] }) })
                         ] }) }), item.expanded ? (jsx_runtime_1.jsx("div", { onDragOver: onFolderChildListDragOver, onDrop: onFolderChildListDrop, children: item.items.map((childItem, index) => {
                         return (jsx_runtime_1.jsx(exports.CompositionSelectorItem, { currentComposition: currentComposition, selectComposition: selectComposition, item: childItem, tabIndex: tabIndex, level: level + 1, toggleFolder: toggleFolder, clearRootDragHover: clearRootDragHover, canReorder: canReorder, activeDragRef: activeDragRef, parentFolderPath: folderPath, previousSibling: index === 0 ? null : item.items[index - 1], nextSibling: index === item.items.length - 1
@@ -512,7 +512,7 @@ const CompositionSelectorItem = ({ item, level, currentComposition, tabIndex, se
                                 : item.items[index + 1] }, childItem.key + childItem.type));
                     }) })) : null] }));
     }
-    return (jsx_runtime_1.jsx(ContextMenu_1.ContextMenu, { getItems: getContextMenuItems, children: jsx_runtime_1.jsxs("div", { style: reorderWrapper, children: [reorderLineStyle ? (jsx_runtime_1.jsx("div", { "data-composition-reorder-line": true, style: reorderLineStyle })) : null, jsx_runtime_1.jsx(layout_1.Row, { align: "center", children: jsx_runtime_1.jsxs("a", { ref: compositionRowRef, style: style, tabIndex: tabIndex, onClick: onClick, onKeyDown: onKeyDown, draggable: !window.remotion_isReadOnlyStudio, onDragStart: onItemDragStart, onDragEnd: onItemDragEnd, onDragOver: onRowDragOver, onDragLeave: onRowDragLeave, onDrop: onRowDrop, type: "button", title: item.composition.id, className: `__remotion-composition __remotion-composition-selector-item ${hoverable_1.HOVERABLE_CLASS_NAME} ${hoverable_1.HOVER_GROUP_CLASS_NAME}`, "data-compname": item.composition.id, children: [
+    return (jsx_runtime_1.jsx(ContextMenu_1.ContextMenu, { getItems: getContextMenuItems, children: jsx_runtime_1.jsxs("div", { style: reorderWrapper, children: [reorderLineStyle ? (jsx_runtime_1.jsx("div", { "data-composition-reorder-line": true, style: reorderLineStyle })) : null, jsx_runtime_1.jsx(layout_1.Row, { align: "center", children: jsx_runtime_1.jsxs("a", { ref: compositionRowRef, style: style, tabIndex: tabIndex, onClick: onClick, onKeyDown: onKeyDown, draggable: !window.remotion_isReadOnlyStudio, onDragStart: onItemDragStart, onDragEnd: onItemDragEnd, onDragOver: onRowDragOver, onDragLeave: onRowDragLeave, onDrop: onRowDrop, type: "button", "aria-label": item.composition.id, className: `__remotion-composition __remotion-composition-selector-item ${hoverable_1.HOVERABLE_CLASS_NAME} ${hoverable_1.HOVER_GROUP_CLASS_NAME}`, "data-compname": item.composition.id, children: [
                             jsx_runtime_1.jsx(CompositionOrStillIcon_1.CompositionOrStillIcon, { composition: item.composition, color: colors_1.CURRENT_COLOR, style: iconStyle }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 1 }), jsx_runtime_1.jsx("div", { style: labelStyle, children: item.composition.id }), jsx_runtime_1.jsx(CompositionContextButton_1.CompositionContextButton, { getItems: getContextMenuItems, visible: !isDragging, readOnlyStudio: window.remotion_isReadOnlyStudio }), jsx_runtime_1.jsx(SidebarRenderButton_1.SidebarRenderButton, { visible: !isDragging, composition: item.composition, readOnlyStudio: window.remotion_isReadOnlyStudio })
                         ] }) })
             ] }) }));

package/dist/components/ConfigSelect.js

@@ -44,7 +44,7 @@ const ConfigSelect = ({ defaultLabel, name, onChange, options, value, }) => {
         }),
     ];
     return (jsx_runtime_1.jsxs("div", { style: layout_1.optionRow, children: [
-            jsx_runtime_1.jsx("div", { style: layout_1.label, children: name }), jsx_runtime_1.jsx("div", { style: layout_1.rightRow, children: jsx_runtime_1.jsx(ComboBox_1.Combobox, { values: values, selectedId: value === null ? DEFAULT_VALUE : `${name}-${String(value)}`, style: controlWidth, title: name }) })
+            jsx_runtime_1.jsx("div", { style: layout_1.label, children: name }), jsx_runtime_1.jsx("div", { style: layout_1.rightRow, children: jsx_runtime_1.jsx(ComboBox_1.Combobox, { values: values, selectedId: value === null ? DEFAULT_VALUE : `${name}-${String(value)}`, style: controlWidth, "aria-label": name }) })
         ] }));
 };
 exports.ConfigSelect = ConfigSelect;

package/dist/components/ConfigureDefaultEditorModal.js

@@ -195,9 +195,9 @@ const DefaultEditorSettings = () => {
     const displayedError = error !== null && error !== void 0 ? error : settingsError;
     return (jsx_runtime_1.jsx("div", { style: container, children: jsx_runtime_1.jsxs("div", { style: content, children: [
                 jsx_runtime_1.jsxs("div", { style: layout_2.optionRow, children: [
-                        jsx_runtime_1.jsx("div", { style: layout_2.label, children: "Default editor" }), jsx_runtime_1.jsxs("div", { style: rightColumn, children: [editorInfo === null && displayedError === null ? (jsx_runtime_1.jsx("p", { style: rightDescription, children: "Loading installed editors..." })) : null, (editorInfo === null || editorInfo === void 0 ? void 0 : editorInfo.installedEditors.length) === 0 ? (jsx_runtime_1.jsx("p", { style: rightDescription, children: "No supported editors were found on this computer." })) : null, editorInfo === null ? null : (jsx_runtime_1.jsx(ComboBox_1.Combobox, { values: editorValues, selectedId: selectedEditor !== null && selectedEditor !== void 0 ? selectedEditor : NO_PREFERENCE_ID, style: comboBoxStyle, title: "Default editor" }))] })
+                        jsx_runtime_1.jsx("div", { style: layout_2.label, children: "Default editor" }), jsx_runtime_1.jsxs("div", { style: rightColumn, children: [editorInfo === null && displayedError === null ? (jsx_runtime_1.jsx("p", { style: rightDescription, children: "Loading installed editors..." })) : null, (editorInfo === null || editorInfo === void 0 ? void 0 : editorInfo.installedEditors.length) === 0 ? (jsx_runtime_1.jsx("p", { style: rightDescription, children: "No supported editors were found on this computer." })) : null, editorInfo === null ? null : (jsx_runtime_1.jsx(ComboBox_1.Combobox, { values: editorValues, selectedId: selectedEditor !== null && selectedEditor !== void 0 ? selectedEditor : NO_PREFERENCE_ID, style: comboBoxStyle, "aria-label": "Default editor" }))] })
                     ] }), jsx_runtime_1.jsxs("div", { style: layout_2.optionRow, children: [
-                        jsx_runtime_1.jsx("div", { style: layout_2.label, children: "Default coding agent" }), jsx_runtime_1.jsxs("div", { style: rightColumn, children: [codingAgentInfo === null && displayedError === null ? (jsx_runtime_1.jsx("p", { style: rightDescription, children: "Loading installed coding agents..." })) : null, (codingAgentInfo === null || codingAgentInfo === void 0 ? void 0 : codingAgentInfo.installedCodingAgents.length) === 0 ? (jsx_runtime_1.jsx("p", { style: rightDescription, children: "No supported coding agents were found on this computer." })) : null, codingAgentInfo === null ? null : (jsx_runtime_1.jsx(ComboBox_1.Combobox, { values: codingAgentValues, selectedId: selectedCodingAgent !== null && selectedCodingAgent !== void 0 ? selectedCodingAgent : NO_PREFERENCE_ID, style: comboBoxStyle, title: "Default coding agent" }))] })
+                        jsx_runtime_1.jsx("div", { style: layout_2.label, children: "Default coding agent" }), jsx_runtime_1.jsxs("div", { style: rightColumn, children: [codingAgentInfo === null && displayedError === null ? (jsx_runtime_1.jsx("p", { style: rightDescription, children: "Loading installed coding agents..." })) : null, (codingAgentInfo === null || codingAgentInfo === void 0 ? void 0 : codingAgentInfo.installedCodingAgents.length) === 0 ? (jsx_runtime_1.jsx("p", { style: rightDescription, children: "No supported coding agents were found on this computer." })) : null, codingAgentInfo === null ? null : (jsx_runtime_1.jsx(ComboBox_1.Combobox, { values: codingAgentValues, selectedId: selectedCodingAgent !== null && selectedCodingAgent !== void 0 ? selectedCodingAgent : NO_PREFERENCE_ID, style: comboBoxStyle, "aria-label": "Default coding agent" }))] })
                     ] }), displayedError ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
                         jsx_runtime_1.jsx(layout_1.Spacing, { y: 1.5 }), jsx_runtime_1.jsx("div", { style: { paddingLeft: 16, paddingRight: 16 }, children: jsx_runtime_1.jsx(ValidationMessage_1.ValidationMessage, { message: displayedError, align: "flex-start", type: "error" }) })
                     ] })) : null] }) }));

package/dist/components/ControlButton.d.ts

@@ -2,7 +2,6 @@ import React from 'react';
 import type { RenderInlineAction } from './InlineAction';
 export declare const CONTROL_BUTTON_PADDING = 6;
 export declare const ControlButton: (props: Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "children" | "onClick" | "title"> & {
-    readonly title: string;
     readonly onClick: React.MouseEventHandler<HTMLButtonElement>;
     readonly children: RenderInlineAction | React.ReactNode;
 }) => import("react/jsx-runtime").JSX.Element;

package/dist/components/ControlButton.js

@@ -6,8 +6,8 @@ const colors_1 = require("../helpers/colors");
 const InlineAction_1 = require("./InlineAction");
 exports.CONTROL_BUTTON_PADDING = 6;
 const ControlButton = (props) => {
-    const { children, onClick, title, ...buttonProps } = props;
+    const { children, onClick, ...buttonProps } = props;
     const renderAction = typeof children === 'function' ? children : () => children;
-    return (jsx_runtime_1.jsx(InlineAction_1.InlineAction, { ...buttonProps, title: title, onClick: onClick, renderAction: renderAction, variant: null, unhoveredColor: colors_1.WHITE_ALPHA_80 }));
+    return (jsx_runtime_1.jsx(InlineAction_1.InlineAction, { ...buttonProps, onClick: onClick, renderAction: renderAction, variant: null, unhoveredColor: colors_1.WHITE_ALPHA_80 }));
 };
 exports.ControlButton = ControlButton;

package/dist/components/CurrentAsset.js

@@ -249,7 +249,7 @@ const AssetInfo = ({ assetName, contentSized = false, onAssetClick, readOnlyStud
     return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
             jsx_runtime_1.jsx(InspectorInfoHeader_1.InspectorInfoHeader, { contentSized: contentSized, minHeight: exports.CURRENT_ASSET_HEIGHT, padding: contentSized
                     ? `0 ${InspectorPanelLayout_1.INSPECTOR_PANEL_HORIZONTAL_PADDING}px 6px`
-                    : '4px 0', children: jsx_runtime_1.jsx(InlineEditableTitle_1.InlineEditableTitle, { value: fileName, canRename: canRename, getInitialSelection: use_rename_static_file_1.getStaticFileRenameSelection, onClick: onAssetClick, onCommit: onRename, size: contentSized ? 'default' : 'inspector', title: assetName }) }), fileDetails.length > 0 ? (jsx_runtime_1.jsx(CollapsibleInspectorSection_1.CollapsibleInspectorSection, { collapsible: true, label: "File", sectionId: "asset-file", children: jsx_runtime_1.jsx("div", { style: assetMetadataStyle, children: fileDetails.map((detail) => (jsx_runtime_1.jsx(common_1.InspectorDetailRow, { label: detail.label, children: jsx_runtime_1.jsx("span", { style: assetMetadataValueStyle, children: detail.value }) }, detail.label))) }) })) : null, mediaSections && mediaSections.video ? (jsx_runtime_1.jsx(CollapsibleInspectorSection_1.CollapsibleInspectorSection, { collapsible: true, label: "Video", sectionId: "asset-video", children: jsx_runtime_1.jsx("div", { style: assetMetadataStyle, children: mediaSections.video.map((detail) => (jsx_runtime_1.jsx(common_1.InspectorDetailRow, { label: detail.label, children: jsx_runtime_1.jsx("span", { style: assetMetadataValueStyle, children: detail.value }) }, detail.label))) }) })) : null, mediaSections && mediaSections.audio !== null ? (jsx_runtime_1.jsx(CollapsibleInspectorSection_1.CollapsibleInspectorSection, { collapsible: mediaSections.audio.length > 0, label: "Audio", sectionId: "asset-audio", children: mediaSections.audio.length === 0 ? (jsx_runtime_1.jsx("div", { style: assetEmptyStateStyle, children: "None" })) : (jsx_runtime_1.jsxs("div", { style: assetMetadataStyle, children: [mediaSections.audio.map((detail) => (jsx_runtime_1.jsx(common_1.InspectorDetailRow, { label: detail.label, children: jsx_runtime_1.jsx("span", { style: assetMetadataValueStyle, children: detail.value }) }, detail.label))), src ? (jsx_runtime_1.jsx(common_1.InspectorDetailRow, { label: "Average volume", children: jsx_runtime_1.jsx("span", { style: assetMetadataValueStyle, children: jsx_runtime_1.jsx(AssetAudioVolume_1.AssetAudioVolume, { src: (_d = volumeMetadata === null || volumeMetadata === void 0 ? void 0 : volumeMetadata.src) !== null && _d !== void 0 ? _d : null, waveformSampleRate: volumeMetadata
+                    : '4px 0', children: jsx_runtime_1.jsx(InlineEditableTitle_1.InlineEditableTitle, { value: fileName, canRename: canRename, getInitialSelection: use_rename_static_file_1.getStaticFileRenameSelection, onClick: onAssetClick, onCommit: onRename, size: contentSized ? 'default' : 'inspector', "aria-label": assetName }) }), fileDetails.length > 0 ? (jsx_runtime_1.jsx(CollapsibleInspectorSection_1.CollapsibleInspectorSection, { collapsible: true, label: "File", sectionId: "asset-file", children: jsx_runtime_1.jsx("div", { style: assetMetadataStyle, children: fileDetails.map((detail) => (jsx_runtime_1.jsx(common_1.InspectorDetailRow, { label: detail.label, children: jsx_runtime_1.jsx("span", { style: assetMetadataValueStyle, children: detail.value }) }, detail.label))) }) })) : null, mediaSections && mediaSections.video ? (jsx_runtime_1.jsx(CollapsibleInspectorSection_1.CollapsibleInspectorSection, { collapsible: true, label: "Video", sectionId: "asset-video", children: jsx_runtime_1.jsx("div", { style: assetMetadataStyle, children: mediaSections.video.map((detail) => (jsx_runtime_1.jsx(common_1.InspectorDetailRow, { label: detail.label, children: jsx_runtime_1.jsx("span", { style: assetMetadataValueStyle, children: detail.value }) }, detail.label))) }) })) : null, mediaSections && mediaSections.audio !== null ? (jsx_runtime_1.jsx(CollapsibleInspectorSection_1.CollapsibleInspectorSection, { collapsible: mediaSections.audio.length > 0, label: "Audio", sectionId: "asset-audio", children: mediaSections.audio.length === 0 ? (jsx_runtime_1.jsx("div", { style: assetEmptyStateStyle, children: "None" })) : (jsx_runtime_1.jsxs("div", { style: assetMetadataStyle, children: [mediaSections.audio.map((detail) => (jsx_runtime_1.jsx(common_1.InspectorDetailRow, { label: detail.label, children: jsx_runtime_1.jsx("span", { style: assetMetadataValueStyle, children: detail.value }) }, detail.label))), src ? (jsx_runtime_1.jsx(common_1.InspectorDetailRow, { label: "Average volume", children: jsx_runtime_1.jsx("span", { style: assetMetadataValueStyle, children: jsx_runtime_1.jsx(AssetAudioVolume_1.AssetAudioVolume, { src: (_d = volumeMetadata === null || volumeMetadata === void 0 ? void 0 : volumeMetadata.src) !== null && _d !== void 0 ? _d : null, waveformSampleRate: volumeMetadata
                                         ? Math.ceil(volumeMetadata.fps *
                                             get_timeline_max_zoom_1.TIMELINE_FRAME_WIDTH_AT_MAX_ZOOM)
                                         : null }, (_e = volumeMetadata === null || volumeMetadata === void 0 ? void 0 : volumeMetadata.src) !== null && _e !== void 0 ? _e : src) }) })) : null] })) })) : null, jsx_runtime_1.jsx(CollapsibleInspectorSection_1.CollapsibleInspectorSection, { collapsible: true, label: "Actions", sectionId: "asset-actions", children: jsx_runtime_1.jsxs(common_1.InspectorQuickActionsSection, { children: [fileManagerAvailable ? (jsx_runtime_1.jsxs(common_1.InspectorQuickAction, { disabled: fileManagerDisabled, onClick: onShowInFileManager, renderIcon: (color) => (jsx_runtime_1.jsx(folder_1.ExpandedFolderIcon, { color: color, style: quickActionIconStyle })), children: ["Show in ", fileManagerName] })) : null, src && (mediaMetadata === null || mediaMetadata === void 0 ? void 0 : mediaMetadata.hasAudioTrack) !== false ? (jsx_runtime_1.jsx(common_1.InspectorQuickAction, { disabled: mutationsDisabled, onClick: onTranscribe, renderIcon: (color) => (jsx_runtime_1.jsx(transcription_1.TranscriptionIcon, { color: color, style: quickActionIconStyle })), children: "Transcribe" })) : null, fileType === 'video' ? (jsx_runtime_1.jsx(common_1.InspectorQuickAction, { disabled: mutationsDisabled, onClick: onTrackMatting, renderIcon: (color) => (jsx_runtime_1.jsx(background_removal_1.BackgroundRemovalIcon, { color: color, style: quickActionIconStyle })), children: "Remove background" })) : null, src ? (jsx_runtime_1.jsxs(common_1.InspectorQuickAction, { disabled: false, onClick: onOpenConvert, renderIcon: (color) => (jsx_runtime_1.jsx(remotion_convert_1.RemotionConvertIcon, { color: color, style: quickActionIconStyle })), children: ["Convert",

package/dist/components/ElementLibrariesSettings.js

@@ -192,7 +192,7 @@ const ElementLibrariesSettings = () => {
                                                 ...libraryUrlStyle,
                                                 color: hoveredUrl === library.url ? colors_1.WHITE : colors_1.LIGHT_TEXT,
                                             }, onMouseEnter: () => setHoveredUrl(library.url), onMouseLeave: () => setHoveredUrl(null), children: library.url.replace(/^https?:\/\//, '') })
-                                    ] }), busy === library.url ? (jsx_runtime_1.jsx(Spinner_1.Spinner, { duration: 0.5, size: 14 })) : (jsx_runtime_1.jsx(ActionTooltip_1.ActionTooltip, { label: "Remove", shortcut: null, delay: 800, dismissOnClick: true, children: jsx_runtime_1.jsx(InlineAction_1.InlineAction, { "aria-label": `Remove ${(_b = library.displayName) !== null && _b !== void 0 ? _b : library.url}`, title: "", disabled: !canSave, onClick: () => removeLibrary(library.url), renderAction: renderTrash, variant: null }) }))] }, library.url));
+                                    ] }), busy === library.url ? (jsx_runtime_1.jsx(Spinner_1.Spinner, { duration: 0.5, size: 14 })) : (jsx_runtime_1.jsx(ActionTooltip_1.ActionTooltip, { label: "Remove", shortcut: null, delay: 800, dismissOnClick: true, children: jsx_runtime_1.jsx(InlineAction_1.InlineAction, { "aria-label": `Remove ${(_b = library.displayName) !== null && _b !== void 0 ? _b : library.url}`, disabled: !canSave, onClick: () => removeLibrary(library.url), renderAction: renderTrash, variant: null }) }))] }, library.url));
                     })] }), jsx_runtime_1.jsx("h3", { style: addLibraryHeading, children: "Add new library" }), jsx_runtime_1.jsxs("div", { style: inputRow, children: [
                     jsx_runtime_1.jsx(RemInput_1.RemotionInput, { "aria-label": "Element Library URL", placeholder: "https://example.com/elements", status: "ok", rightAlign: false, style: input, value: url, onChange: (event) => setUrl(event.target.value) }), jsx_runtime_1.jsx(RemInput_1.RemotionInput, { "aria-label": "Element Library name", placeholder: "Name (optional)", status: "ok", rightAlign: false, style: input, value: displayName, onChange: (event) => setDisplayName(event.target.value) })
                 ] }), jsx_runtime_1.jsx("div", { style: inputRow, children: jsx_runtime_1.jsx(Button_1.Button, { disabled: !canSave || normalizedUrl === null || duplicate, onClick: addLibrary, size: "compact", children: busy === 'add' ? 'Adding…' : '+ Add Element Library' }) }), duplicate ? (jsx_runtime_1.jsx("div", { style: message, children: jsx_runtime_1.jsx(ValidationMessage_1.ValidationMessage, { align: "flex-start", type: "warning", message: "This library is already added." }) })) : null, error ? (jsx_runtime_1.jsx("div", { style: message, children: jsx_runtime_1.jsx(ValidationMessage_1.ValidationMessage, { align: "flex-start", type: "error", message: error }) })) : null] }));

package/dist/components/ElementLibraryModal.js

@@ -36,7 +36,7 @@ const ElementLibraryModal = ({ name, url }) => {
         iframe.src = iframeUrl.toString();
     }, [url]);
     return (jsx_runtime_1.jsxs(DismissableModal_1.DismissableModal, { panelStyle: panelStyle, children: [
-            jsx_runtime_1.jsx(ModalHeader_1.ModalHeader, { title: name }), jsx_runtime_1.jsx("iframe", { ref: iframeRef, allow: "local-network-access; loopback-network", "data-remotion-element-library": "", style: iframeStyle, title: `${name} library` })
+            jsx_runtime_1.jsx(ModalHeader_1.ModalHeader, { title: name }), jsx_runtime_1.jsx("iframe", { ref: iframeRef, allow: "local-network-access; loopback-network", "data-remotion-element-library": "", style: iframeStyle, "aria-label": `${name} library` })
         ] }));
 };
 exports.ElementLibraryModal = ElementLibraryModal;

package/dist/components/FramePersistor.js

@@ -7,16 +7,16 @@ const FramePersistor = () => {
     const playing = remotion_1.Internals.usePlaying();
     const config = (0, remotion_1.useVideoConfig)();
     const frame = remotion_1.Internals.Timeline.useTimelinePosition();
-    const setFrame = remotion_1.Internals.useTimelineSetFrame();
+    const setFrameWithoutSeek = remotion_1.Internals.useTimelineSetFrameWithoutSeek();
     (0, react_1.useEffect)(() => {
         if (!playing) {
-            setFrame((f) => {
+            setFrameWithoutSeek((f) => {
                 const newObj = f[config.id] === frame ? f : { ...f, [config.id]: frame };
                 remotion_1.Internals.persistCurrentFrame(newObj);
                 return newObj;
             });
         }
-    }, [config.id, frame, playing, setFrame]);
+    }, [config.id, frame, playing, setFrameWithoutSeek]);
     return null;
 };
 exports.FramePersistor = FramePersistor;

package/dist/components/FullscreenToggle.js

@@ -42,6 +42,6 @@ const FullScreenToggle = ({ hidden }) => {
             f.unregister();
         };
     }, [keybindings, onClick]);
-    return hidden ? (jsx_runtime_1.jsx("button", { id: "fullscreen-toggle", type: "button", style: { display: 'none' }, onClick: onClick })) : (jsx_runtime_1.jsx(ActionTooltip_1.ActionTooltip, { label: "Fullscreen", shortcut: shortcutsDisabled ? null : shortcut, delay: 800, dismissOnClick: true, children: jsx_runtime_1.jsx(ControlButton_1.ControlButton, { id: "fullscreen-toggle", title: "", "aria-label": accessibilityLabel, "aria-keyshortcuts": shortcutsDisabled ? undefined : ariaKeyShortcuts || undefined, onClick: onClick, children: (color) => (jsx_runtime_1.jsx(fullscreen_1.FullscreenIcon, { color: color, style: { width: 18, height: 18 } })) }) }));
+    return hidden ? (jsx_runtime_1.jsx("button", { id: "fullscreen-toggle", type: "button", style: { display: 'none' }, onClick: onClick })) : (jsx_runtime_1.jsx(ActionTooltip_1.ActionTooltip, { label: "Fullscreen", shortcut: shortcutsDisabled ? null : shortcut, delay: 800, dismissOnClick: true, children: jsx_runtime_1.jsx(ControlButton_1.ControlButton, { id: "fullscreen-toggle", "aria-label": accessibilityLabel, "aria-keyshortcuts": shortcutsDisabled ? undefined : ariaKeyShortcuts || undefined, onClick: onClick, children: (color) => (jsx_runtime_1.jsx(fullscreen_1.FullscreenIcon, { color: color, style: { width: 18, height: 18 } })) }) }));
 };
 exports.FullScreenToggle = FullScreenToggle;

package/dist/components/InitialCompositionLoader.js

@@ -17,7 +17,7 @@ const useSelectComposition = () => {
     const { setCanvasContent } = (0, react_1.useContext)(remotion_1.Internals.CompositionSetters);
     // A supplied frame is explicit navigation (for example, opening a nested
     // composition at its sequence's frame). Plain selection does not seek.
-    const setFrame = remotion_1.Internals.Timeline.useTimelineSeekFrame();
+    const seekFrame = remotion_1.Internals.Timeline.useTimelineSeekFrame();
     return (0, react_1.useCallback)((c, push, frame = null) => {
         var _a;
         if (push) {
@@ -25,7 +25,7 @@ const useSelectComposition = () => {
         }
         (_a = ExplorerPanelRef_1.explorerSidebarTabs.current) === null || _a === void 0 ? void 0 : _a.selectCompositionPanel();
         if (frame !== null) {
-            setFrame((current) => ({ ...current, [c.id]: frame }));
+            seekFrame((current) => ({ ...current, [c.id]: frame }));
         }
         setCanvasContent({ type: 'composition', compositionId: c.id });
         const { folderName, parentFolderName } = c;
@@ -42,7 +42,7 @@ const useSelectComposition = () => {
                 return newState;
             });
         }
-    }, [setCanvasContent, setCompositionFoldersExpanded, setFrame]);
+    }, [setCanvasContent, setCompositionFoldersExpanded, seekFrame]);
 };
 exports.useSelectComposition = useSelectComposition;
 const InitialCompositionLoader = () => {

package/dist/components/InlineAction.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 export type RenderInlineAction = (color: string) => React.ReactNode;
-export type InlineActionProps = Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'children' | 'onClick' | 'style'> & {
+export type InlineActionProps = Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'children' | 'onClick' | 'style' | 'title'> & {
     readonly onClick: React.MouseEventHandler<HTMLButtonElement>;
     readonly renderAction: RenderInlineAction;
     readonly hoveredColor?: string;
@@ -8,4 +8,4 @@ export type InlineActionProps = Omit<React.ButtonHTMLAttributes<HTMLButtonElemen
     readonly variant: 'compact' | null;
     readonly style?: React.CSSProperties;
 };
-export declare const InlineAction: ({ renderAction, onClick, disabled, title, hoveredColor, unhoveredColor, variant, style: customStyle, className, onPointerDown: onPointerDownProp, ...buttonProps }: InlineActionProps) => import("react/jsx-runtime").JSX.Element;
+export declare const InlineAction: ({ renderAction, onClick, disabled, hoveredColor, unhoveredColor, variant, style: customStyle, className, onPointerDown: onPointerDownProp, ...buttonProps }: InlineActionProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/InlineAction.js

@@ -6,8 +6,7 @@ const react_1 = require("react");
 const colors_1 = require("../helpers/colors");
 const hoverable_1 = require("../helpers/hoverable");
 const z_index_1 = require("../state/z-index");
-const InlineAction = ({ renderAction, onClick, disabled, title, hoveredColor = colors_1.WHITE, unhoveredColor = colors_1.LIGHT_TEXT, variant, style: customStyle, className, onPointerDown: onPointerDownProp, ...buttonProps }) => {
-    var _a;
+const InlineAction = ({ renderAction, onClick, disabled, hoveredColor = colors_1.WHITE, unhoveredColor = colors_1.LIGHT_TEXT, variant, style: customStyle, className, onPointerDown: onPointerDownProp, ...buttonProps }) => {
     const { tabIndex } = (0, z_index_1.useZIndex)();
     const onPointerDown = (0, react_1.useCallback)((event) => {
         onPointerDownProp === null || onPointerDownProp === void 0 ? void 0 : onPointerDownProp(event);
@@ -44,6 +43,6 @@ const InlineAction = ({ renderAction, onClick, disabled, title, hoveredColor = c
     }, [customStyle, disabled, hoveredColor, unhoveredColor, variant]);
     return (jsx_runtime_1.jsx("button", { ...buttonProps, type: "button", className: className
             ? `${hoverable_1.HOVERABLE_CLASS_NAME} ${className}`
-            : hoverable_1.HOVERABLE_CLASS_NAME, disabled: disabled, onClick: onClick, onPointerDown: onPointerDown, style: style, tabIndex: tabIndex, title: title, "aria-label": (_a = buttonProps['aria-label']) !== null && _a !== void 0 ? _a : title, children: renderAction(colors_1.CURRENT_COLOR) }));
+            : hoverable_1.HOVERABLE_CLASS_NAME, disabled: disabled, onClick: onClick, onPointerDown: onPointerDown, style: style, tabIndex: tabIndex, children: renderAction(colors_1.CURRENT_COLOR) }));
 };
 exports.InlineAction = InlineAction;

package/dist/components/InlineEditableTitle.d.ts

@@ -6,5 +6,5 @@ export declare const InlineEditableTitle: React.FC<{
     readonly onClick?: () => void;
     readonly onCommit: (newValue: string) => void;
     readonly size?: 'default' | 'inspector';
-    readonly title?: string;
+    readonly 'aria-label'?: string;
 }>;

package/dist/components/InlineEditableTitle.js

@@ -90,7 +90,7 @@ const inspectorTitleInput = {
     fontFamily: 'sans-serif',
     fontSize: 13,
 };
-const InlineEditableTitle = ({ value, canRename, getInitialSelection, onClick, onCommit, size = 'default', title, }) => {
+const InlineEditableTitle = ({ value, canRename, getInitialSelection, onClick, onCommit, size = 'default', 'aria-label': ariaLabel, }) => {
     const [isEditing, setIsEditing] = (0, react_1.useState)(false);
     const [isHovered, setIsHovered] = (0, react_1.useState)(false);
     const [draftValue, setDraftValue] = (0, react_1.useState)(value);
@@ -179,10 +179,10 @@ const InlineEditableTitle = ({ value, canRename, getInitialSelection, onClick, o
         ? inspectorTitleGridItem
         : titleGridItem;
     const inputStyle = isInspectorSize ? inspectorTitleInput : titleInput;
-    return (jsx_runtime_1.jsx("div", { style: isInspectorSize ? inspectorTitleWrapper : titleWrapper, title: title !== null && title !== void 0 ? title : value, children: jsx_runtime_1.jsxs("span", { style: innerStyle, onMouseEnter: () => setIsHovered(true), onMouseLeave: () => setIsHovered(false), onClick: isEditing || !isInteractive ? undefined : handleClick, children: [
+    return (jsx_runtime_1.jsx("div", { style: isInspectorSize ? inspectorTitleWrapper : titleWrapper, "aria-label": ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : value, role: "group", children: jsx_runtime_1.jsxs("span", { style: innerStyle, onMouseEnter: () => setIsHovered(true), onMouseLeave: () => setIsHovered(false), onClick: isEditing || !isInteractive ? undefined : handleClick, children: [
                 jsx_runtime_1.jsx("span", { "aria-hidden": isEditing, style: {
                         ...gridItemStyle,
                         visibility: isEditing ? 'hidden' : 'visible',
-                    }, children: value }), isEditing ? (jsx_runtime_1.jsx("input", { ref: focusInput, style: { ...gridItemStyle, ...inputStyle }, value: draftValue, onChange: onChange, onBlur: onBlur, onKeyDown: onKeyDown })) : null] }) }));
+                    }, children: value }), isEditing ? (jsx_runtime_1.jsx("input", { ref: focusInput, "aria-label": ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : value, style: { ...gridItemStyle, ...inputStyle }, value: draftValue, onChange: onChange, onBlur: onBlur, onKeyDown: onKeyDown })) : null] }) }));
 };
 exports.InlineEditableTitle = InlineEditableTitle;

package/dist/components/InspectorLocationCopy.js

@@ -69,6 +69,6 @@ const InspectorLocationCopy = ({ children, location, name, openInEditorLocation
                     opacity: showAction ? 1 : 0,
                     pointerEvents: showAction ? 'auto' : 'none',
                 }, children: [
-                    jsx_runtime_1.jsx(InspectorOpenInEditor_1.InspectorOpenInEditor, { locationType: null, contextForAgents: contextForAgents, location: openInEditorLocation, showTooltips: false }), contextForAgents ? (jsx_runtime_1.jsx(InlineAction_1.InlineAction, { variant: null, onClick: onCopy, renderAction: renderCopyAction, title: "Copy context for agents" })) : null] })) : null] }));
+                    jsx_runtime_1.jsx(InspectorOpenInEditor_1.InspectorOpenInEditor, { locationType: null, contextForAgents: contextForAgents, location: openInEditorLocation, showTooltips: false }), contextForAgents ? (jsx_runtime_1.jsx(InlineAction_1.InlineAction, { variant: null, onClick: onCopy, renderAction: renderCopyAction, "aria-label": "Copy context for agents" })) : null] })) : null] }));
 };
 exports.InspectorLocationCopy = InspectorLocationCopy;

package/dist/components/InspectorOpenInEditor.js

@@ -172,7 +172,6 @@ const InspectorOpenInEditor = ({ contextForAgents = null, label, location, locat
                 renderContent: () => (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [label, defaultOpenInTarget === 'git-source' ? (jsx_runtime_1.jsx(github_1.GitHubIcon, { size: githubButtonIconSize })) : (jsx_runtime_1.jsx(editor_1.EditorIcon, { editorId: defaultEditorId, size: editorButtonIconSize }))] })),
                 segmentId: 'default-editor',
                 style: mainSegmentStyle,
-                title: showTooltips ? '' : `Open in ${defaultAppName}`,
                 tooltipLabel: showTooltips ? `Open in ${defaultAppName}` : null,
                 type: 'action',
             },
@@ -189,7 +188,6 @@ const InspectorOpenInEditor = ({ contextForAgents = null, label, location, locat
                 segmentId: 'another-app',
                 selectedId: null,
                 style: dropdownSegmentStyle,
-                title: showTooltips ? '' : 'Open in another app',
                 tooltipLabel: showTooltips ? 'Open in another app' : null,
                 type: 'menu',
                 values: menuItems,
@@ -212,6 +210,6 @@ const InspectorOpenInEditor = ({ contextForAgents = null, label, location, locat
     if (previewServerState.type !== 'connected' && defaultOpenInTarget === null) {
         return null;
     }
-    return jsx_runtime_1.jsx(SegmentedButton_1.SegmentedButton, { segments: segments, style: null, title: null });
+    return jsx_runtime_1.jsx(SegmentedButton_1.SegmentedButton, { segments: segments, style: null });
 };
 exports.InspectorOpenInEditor = InspectorOpenInEditor;