@remotion/studio 4.0.527 → 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

@@ -60,7 +60,6 @@ const promptHeader = {
     justifyContent: 'space-between',
 };
 const skillRowContainer = {
-    borderTop: colors_1.BORDER_WHITE_ALPHA_12,
     marginTop: 10,
 };
 const skillError = { marginTop: 10 };
@@ -87,8 +86,8 @@ const AgentPrompt = ({ availableText, promptDetails, skillId }) => {
     const renderPromptCopy = (0, react_1.useCallback)((color) => (jsx_runtime_1.jsx(copy_1.CopyIcon, { copied: promptCopied, color: color, style: copyIcon })), [promptCopied]);
     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, { isLast: false, 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("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, "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
@@ -100,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/AudioWaveform.d.ts

@@ -13,4 +13,5 @@ export declare const AudioWaveform: React.NamedExoticComponent<{
     readonly muted: boolean;
     readonly playbackRate: number;
     readonly loopDisplay: LoopDisplay | undefined;
+    readonly loopDisplayOffsetInFrames: number;
 }>;

package/dist/components/AudioWaveform.js

@@ -40,6 +40,8 @@ const react_1 = __importStar(require("react"));
 const remotion_1 = require("remotion");
 const colors_1 = require("../helpers/colors");
 const get_timeline_max_zoom_1 = require("../helpers/get-timeline-max-zoom");
+const resolve_studio_color_1 = require("../helpers/resolve-studio-color");
+const studio_pixel_ratio_1 = require("../helpers/studio-pixel-ratio");
 const timeline_layout_1 = require("../helpers/timeline-layout");
 const EMPTY_PEAKS = new Float32Array(0);
 const getContainerStyle = (height) => {
@@ -66,7 +68,7 @@ const parseVolume = (volume) => {
     }
     return volume.split(',').map((v) => Number(v));
 };
-const AudioWaveformInner = ({ src, height, startFrom, durationInFrames, displayOffsetInFrames, displayDurationInFrames, visualizationWidth, volume, doesVolumeChange, muted, playbackRate, loopDisplay, }) => {
+const AudioWaveformInner = ({ src, height, startFrom, durationInFrames, displayOffsetInFrames, displayDurationInFrames, visualizationWidth, volume, doesVolumeChange, muted, playbackRate, loopDisplay, loopDisplayOffsetInFrames, }) => {
     const [peaks, setPeaks] = (0, react_1.useState)(null);
     const [error, setError] = (0, react_1.useState)(null);
     const vidConf = remotion_1.Internals.useUnsafeVideoConfig();
@@ -85,16 +87,9 @@ const AudioWaveformInner = ({ src, height, startFrom, durationInFrames, displayO
         return (0, timeline_utils_1.getVisibleWaveformVolume)({
             displayDurationInFrames,
             displayOffsetInFrames,
-            loopDisplay,
             volume: parsedVolume,
         });
-    }, [
-        displayDurationInFrames,
-        displayOffsetInFrames,
-        loopDisplay,
-        muted,
-        parsedVolume,
-    ]);
+    }, [displayDurationInFrames, displayOffsetInFrames, muted, parsedVolume]);
     // Layout effect so that a cache hit sets the peaks synchronously and the
     // waveform is painted on the very first frame after mounting.
     (0, react_1.useLayoutEffect)(() => {
@@ -113,7 +108,7 @@ const AudioWaveformInner = ({ src, height, startFrom, durationInFrames, displayO
         }
         return (0, timeline_utils_1.sliceVisibleWaveformPeaks)({
             displayDurationInFrames,
-            displayOffsetInFrames,
+            displayOffsetInFrames: displayOffsetInFrames + loopDisplayOffsetInFrames,
             durationInFrames,
             fps: vidConf.fps,
             loopDisplay,
@@ -127,6 +122,7 @@ const AudioWaveformInner = ({ src, height, startFrom, durationInFrames, displayO
         displayOffsetInFrames,
         durationInFrames,
         loopDisplay,
+        loopDisplayOffsetInFrames,
         peaks,
         playbackRate,
         startFrom,
@@ -141,7 +137,7 @@ const AudioWaveformInner = ({ src, height, startFrom, durationInFrames, displayO
         if (!canvasElement) {
             return;
         }
-        const pixelRatio = window.devicePixelRatio;
+        const pixelRatio = (0, studio_pixel_ratio_1.getStudioPixelRatio)();
         const h = Math.ceil(height * pixelRatio);
         const w = Math.ceil(visualizationWidth * pixelRatio);
         const drawingWidth = visualizationWidth * pixelRatio;
@@ -152,7 +148,7 @@ const AudioWaveformInner = ({ src, height, startFrom, durationInFrames, displayO
         (0, timeline_utils_1.drawBars)({
             canvas: canvasElement,
             peaks: portionPeaks !== null && portionPeaks !== void 0 ? portionPeaks : EMPTY_PEAKS,
-            color: colors_1.WHITE_ALPHA_60,
+            color: (0, resolve_studio_color_1.resolveStudioColor)(colors_1.WHITE_ALPHA_60, getComputedStyle(canvasElement)),
             volume: visibleVolume,
             width: drawingWidth,
         });
@@ -165,7 +161,7 @@ const AudioWaveformInner = ({ src, height, startFrom, durationInFrames, displayO
         if (!volumeCanvasElement) {
             return;
         }
-        const pixelRatio = window.devicePixelRatio;
+        const pixelRatio = (0, studio_pixel_ratio_1.getStudioPixelRatio)();
         const h = Math.ceil(height * pixelRatio);
         const w = Math.ceil(visualizationWidth * pixelRatio);
         const drawingWidth = visualizationWidth * pixelRatio;
@@ -195,7 +191,7 @@ const AudioWaveformInner = ({ src, height, startFrom, durationInFrames, displayO
                 context.lineTo(x, y);
             }
         });
-        context.strokeStyle = colors_1.WHITE_ALPHA_70;
+        context.strokeStyle = (0, resolve_studio_color_1.resolveStudioColor)(colors_1.WHITE_ALPHA_70, getComputedStyle(volumeCanvasElement));
         context.lineWidth = pixelRatio;
         context.stroke();
     }, [height, shouldRenderVolumeOverlay, visibleVolume, visualizationWidth]);

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

@@ -61,7 +61,7 @@ const CodeFrame = ({ source, lineNumberWidth, fontSize, horizontalMargin }) => {
                                     display: 'block',
                                     fontFamily: 'monospace',
                                     fontSize,
-                                    color: '#9cdcfe',
+                                    color: colors_1.PRISM_VARIABLE_COLOR,
                                     whiteSpace: 'pre',
                                     tabSize: 2,
                                     backgroundColor: colors_1.TRANSPARENT,

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/ColorPicker/checker.d.ts

@@ -1,4 +1,4 @@
 export declare const CHECKER_BACKGROUND_IMAGE: string;
 export declare const CHECKER_BACKGROUND_SIZE = "8px 8px";
 export declare const CHECKER_BACKGROUND_POSITION = "0 0, 0 4px, 4px -4px, -4px 0";
-export declare const CHECKER_BACKGROUND_COLOR = "#444";
+export declare const CHECKER_BACKGROUND_COLOR = "var(--remotion-studio-color-picker-checker-background-color)";

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

@@ -16,9 +16,9 @@ const open_in_remotion_convert_1 = require("../helpers/open-in-remotion-convert"
 const render_codec_label_1 = require("../helpers/render-codec-label");
 const use_image_metadata_1 = require("../helpers/use-image-metadata");
 const use_media_metadata_1 = require("../helpers/use-media-metadata");
+const background_removal_1 = require("../icons/background-removal");
 const folder_1 = require("../icons/folder");
 const remotion_convert_1 = require("../icons/remotion-convert");
-const separation_1 = require("../icons/separation");
 const transcription_1 = require("../icons/transcription");
 const trash_1 = require("../icons/trash");
 const modals_1 = require("../state/modals");
@@ -194,6 +194,7 @@ const AssetInfo = ({ assetName, contentSized = false, onAssetClick, readOnlyStud
             type: 'video-matting',
             src,
             displayName: fileName,
+            target: null,
         });
     }, [fileName, fileType, mutationsDisabled, setSelectedModal, src]);
     const canRename = onAssetClick === undefined &&
@@ -248,10 +249,10 @@ 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(separation_1.SeparationIcon, { color: color, style: quickActionIconStyle })), children: "Separate foreground" })) : 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",
+                                        : 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",
                                 jsx_runtime_1.jsx("svg", { "aria-hidden": "true", viewBox: "0 0 16 16", style: convertArrowStyle, children: jsx_runtime_1.jsx("path", { d: "M4 12 12 4M6 4h6v6", fill: "none", stroke: colors_1.CURRENT_COLOR, strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "1.5" }) })
                             ] })) : null, jsx_runtime_1.jsx(common_1.InspectorQuickAction, { disabled: mutationsDisabled, onClick: onDelete, renderIcon: (color) => (jsx_runtime_1.jsx(trash_1.TrashIcon, { color: color, style: quickActionIconStyle })), children: "Delete" })] }) })
         ] }));

package/dist/components/EditorRuler/Ruler.js

@@ -7,6 +7,7 @@ const colors_1 = require("../../helpers/colors");
 const editor_guide_selection_1 = require("../../helpers/editor-guide-selection");
 const editor_ruler_1 = require("../../helpers/editor-ruler");
 const ruler_canvas_size_1 = require("../../helpers/ruler-canvas-size");
+const studio_pixel_ratio_1 = require("../../helpers/studio-pixel-ratio");
 const editor_guides_1 = require("../../state/editor-guides");
 const ForceSpecificCursor_1 = require("../ForceSpecificCursor");
 const should_clear_selection_on_pointer_down_1 = require("../Timeline/should-clear-selection-on-pointer-down");
@@ -35,6 +36,7 @@ const Ruler = ({ scale, points, originOffset, startMarking, size, markingGaps, o
         orientation,
         size,
     });
+    const pixelRatio = (0, studio_pixel_ratio_1.getStudioPixelRatio)();
     (0, react_1.useEffect)(() => {
         (0, editor_ruler_1.drawMarkingOnRulerCanvas)({
             scale,
@@ -45,8 +47,8 @@ const Ruler = ({ scale, points, originOffset, startMarking, size, markingGaps, o
             orientation,
             rulerCanvasRef,
             guideHighlight,
-            canvasHeight: rulerHeight * window.devicePixelRatio,
-            canvasWidth: rulerWidth * window.devicePixelRatio,
+            canvasHeight: rulerHeight * pixelRatio,
+            canvasWidth: rulerWidth * pixelRatio,
         });
     }, [
         scale,
@@ -59,6 +61,7 @@ const Ruler = ({ scale, points, originOffset, startMarking, size, markingGaps, o
         size,
         rulerHeight,
         rulerWidth,
+        pixelRatio,
     ]);
     const rulerStyle = (0, react_1.useMemo)(() => ({
         position: 'absolute',
@@ -107,6 +110,6 @@ const Ruler = ({ scale, points, originOffset, startMarking, size, markingGaps, o
         onPointerSessionStart,
         canCreateGuides,
     ]);
-    return (jsx_runtime_1.jsx("canvas", { ref: rulerCanvasRef, width: rulerWidth * window.devicePixelRatio, height: rulerHeight * window.devicePixelRatio, style: rulerStyle, "aria-label": `${isVerticalRuler ? 'Vertical' : 'Horizontal'} ruler`, "aria-readonly": !canCreateGuides, [should_clear_selection_on_pointer_down_1.PREVENT_CLEAR_SELECTION_ON_POINTER_DOWN_ATTR]: 'true', onPointerDown: onPointerDown }));
+    return (jsx_runtime_1.jsx("canvas", { ref: rulerCanvasRef, width: rulerWidth * pixelRatio, height: rulerHeight * pixelRatio, style: rulerStyle, "aria-label": `${isVerticalRuler ? 'Vertical' : 'Horizontal'} ruler`, "aria-readonly": !canCreateGuides, [should_clear_selection_on_pointer_down_1.PREVENT_CLEAR_SELECTION_ON_POINTER_DOWN_ATTR]: 'true', onPointerDown: onPointerDown }));
 };
 exports.default = Ruler;