@remotion/studio 4.0.527 → 4.0.529

package/dist/components/MenuCompositionName.js

@@ -90,6 +90,6 @@ const MenuCompositionName = () => {
     }
     const name = (_b = composition === null || composition === void 0 ? void 0 : composition.id) !== null && _b !== void 0 ? _b : asset;
     return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
-            jsx_runtime_1.jsx("span", { style: slashStyle, children: "/" }), composition ? (jsx_runtime_1.jsx(ContextMenu_1.ContextMenu, { getItems: getContextMenuItems, style: contextMenuStyle, children: jsx_runtime_1.jsx(InlineDropdown_1.InlineDropdown, { "aria-label": "Open composition menu", className: hoverable_1.FOCUS_VISIBLE_ONLY_CLASS_NAME, getItems: getContextMenuItems, hoveredColor: colors_1.WHITE, renderAction: () => composition.id, style: compositionNameStyle, title: "Open composition menu", unhoveredColor: colors_1.WHITE_ALPHA_80, variant: null }) })) : (jsx_runtime_1.jsx("span", { style: assetNameStyle, children: name }))] }));
+            jsx_runtime_1.jsx("span", { style: slashStyle, children: "/" }), composition ? (jsx_runtime_1.jsx(ContextMenu_1.ContextMenu, { getItems: getContextMenuItems, style: contextMenuStyle, children: jsx_runtime_1.jsx(InlineDropdown_1.InlineDropdown, { "aria-label": "Open composition menu", className: hoverable_1.FOCUS_VISIBLE_ONLY_CLASS_NAME, getItems: getContextMenuItems, hoveredColor: colors_1.WHITE, renderAction: () => composition.id, style: compositionNameStyle, unhoveredColor: colors_1.WHITE_ALPHA_80, variant: null }) })) : (jsx_runtime_1.jsx("span", { style: assetNameStyle, children: name }))] }));
 };
 exports.MenuCompositionName = MenuCompositionName;

package/dist/components/Modals.js

@@ -33,6 +33,7 @@ const QuickSwitcher_1 = __importDefault(require("./QuickSwitcher/QuickSwitcher")
 const RenderStatusModal_1 = require("./RenderModal/RenderStatusModal");
 const ServerRenderModal_1 = require("./RenderModal/ServerRenderModal");
 const WebRenderModal_1 = require("./RenderModal/WebRenderModal");
+const QueueJobErrorModal_1 = require("./RenderQueue/QueueJobErrorModal");
 const SettingsModal_1 = require("./SettingsModal");
 const SvgImportDialog_1 = require("./SvgImportDialog");
 const TranscriptionModalWithOptionalWhisper_1 = require("./Transcription/TranscriptionModalWithOptionalWhisper");
@@ -70,16 +71,16 @@ const Modals = ({ readOnlyStudio }) => {
             }
             (async () => {
                 const confirmed = await confirm({
-                    title: 'Add Element catalog',
+                    title: 'Add Element Library',
                     message: (jsx_runtime_1.jsx(ElementInstallConfirmation_1.ElementLibraryAddConfirmation, { displayName: event.displayName, origin: event.origin, url: event.url })),
-                    confirmLabel: 'Add catalog',
+                    confirmLabel: 'Add Element Library',
                     cancelLabel: 'Cancel',
                 });
                 if (!confirmed) {
                     return;
                 }
                 if (previewServerState.type !== 'connected') {
-                    (0, NotificationCenter_1.showNotification)('Could not add catalog: Studio disconnected', 4000);
+                    (0, NotificationCenter_1.showNotification)('Could not add Element Library: Studio disconnected', 4000);
                     return;
                 }
                 try {
@@ -96,17 +97,17 @@ const Modals = ({ readOnlyStudio }) => {
                         ],
                     });
                     if (!result.success) {
-                        (0, NotificationCenter_1.showNotification)(`Could not add catalog: ${result.reason}`, 4000);
+                        (0, NotificationCenter_1.showNotification)(`Could not add Element Library: ${result.reason}`, 4000);
                     }
                 }
                 catch (error) {
-                    (0, NotificationCenter_1.showNotification)(`Could not add catalog: ${error.message}`, 4000);
+                    (0, NotificationCenter_1.showNotification)(`Could not add Element Library: ${error.message}`, 4000);
                 }
             })();
         });
     }, [confirm, isBrowserStudio, previewServerState, subscribeToEvent]);
     return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [modalContextType && modalContextType.type === 'new-comp' && (jsx_runtime_1.jsx(NewComposition_1.NewComposition, { folderName: modalContextType.folderName, parentName: modalContextType.parentName, stack: modalContextType.stack, canvasCapture: modalContextType.canvasCapture })), modalContextType && modalContextType.type === 'new-folder' && (jsx_runtime_1.jsx(NewFolder_1.NewFolder, { parentName: modalContextType.parentName, stack: modalContextType.stack })), modalContextType && modalContextType.type === 'duplicate-comp' && (jsx_runtime_1.jsx(DuplicateComposition_1.DuplicateComposition, { compositionType: modalContextType.compositionType, compositionId: modalContextType.compositionId })), modalContextType && modalContextType.type === 'delete-comp' && (jsx_runtime_1.jsx(DeleteComposition_1.DeleteComposition, { compositionId: modalContextType.compositionId })), modalContextType && modalContextType.type === 'rename-comp' && (jsx_runtime_1.jsx(RenameComposition_1.RenameComposition, { compositionId: modalContextType.compositionId })), modalContextType && modalContextType.type === 'delete-folder' && (jsx_runtime_1.jsx(DeleteFolder_1.DeleteFolder, { folderName: modalContextType.folderName, parentName: modalContextType.parentName, stack: modalContextType.stack })), modalContextType && modalContextType.type === 'rename-folder' && (jsx_runtime_1.jsx(RenameFolder_1.RenameFolder, { folderName: modalContextType.folderName, parentName: modalContextType.parentName, stack: modalContextType.stack })), modalContextType && modalContextType.type === 'rename-static-file' && (jsx_runtime_1.jsx(RenameStaticFile_1.RenameStaticFileModal, { relativePath: modalContextType.relativePath })), modalContextType && modalContextType.type === 'input-props-override' && (jsx_runtime_1.jsx(OverrideInputProps_1.OverrideInputPropsModal, {})), modalContextType && modalContextType.type === 'settings' ? (jsx_runtime_1.jsx(SettingsModal_1.SettingsModal, { initialTab: modalContextType.initialTab, initialPublicLicenseKey: modalContextType.initialPublicLicenseKey }, `${modalContextType.initialTab}-${modalContextType.initialPublicLicenseKey}`)) : null, modalContextType && modalContextType.type === 'web-render' && (jsx_runtime_1.jsx(WebRenderModal_1.WebRenderModalWithLoader, { ...modalContextType })), modalContextType &&
                 modalContextType.type === 'server-render' &&
-                (canRender || modalContextType.readOnlyStudio) ? (jsx_runtime_1.jsx(ServerRenderModal_1.RenderModalWithLoader, { readOnlyStudio: (_a = modalContextType.readOnlyStudio) !== null && _a !== void 0 ? _a : false, initialFrame: modalContextType.initialFrame, initialDarkMode: modalContextType.initialDarkMode, compositionId: modalContextType.compositionId, initialVideoImageFormat: modalContextType.initialVideoImageFormat, initialJpegQuality: modalContextType.initialJpegQuality, initialScale: modalContextType.initialScale, initialLogLevel: modalContextType.initialLogLevel, initialOffthreadVideoCacheSizeInBytes: modalContextType.initialOffthreadVideoCacheSizeInBytes, initialOffthreadVideoThreads: modalContextType.initialOffthreadVideoThreads, initialMediaCacheSizeInBytes: modalContextType.initialMediaCacheSizeInBytes, initialConcurrency: modalContextType.initialConcurrency, maxConcurrency: modalContextType.maxConcurrency, minConcurrency: modalContextType.minConcurrency, initialStillImageFormat: modalContextType.initialStillImageFormat, initialMuted: modalContextType.initialMuted, initialEnforceAudioTrack: modalContextType.initialEnforceAudioTrack, initialProResProfile: modalContextType.initialProResProfile, initialx264Preset: modalContextType.initialx264Preset, initialGopSize: modalContextType.initialGopSize, initialPixelFormat: modalContextType.initialPixelFormat, initialAudioBitrate: modalContextType.initialAudioBitrate, initialVideoBitrate: modalContextType.initialVideoBitrate, initialEveryNthFrame: modalContextType.initialEveryNthFrame, initialNumberOfGifLoops: modalContextType.initialNumberOfGifLoops, initialDelayRenderTimeout: modalContextType.initialDelayRenderTimeout, initialEnvVariables: modalContextType.initialEnvVariables, initialDisableWebSecurity: modalContextType.initialDisableWebSecurity, initialGl: modalContextType.initialOpenGlRenderer, initialHeadless: modalContextType.initialHeadless, initialIgnoreCertificateErrors: modalContextType.initialIgnoreCertificateErrors, initialEncodingBufferSize: modalContextType.initialEncodingBufferSize, initialEncodingMaxRate: modalContextType.initialEncodingMaxRate, initialUserAgent: modalContextType.initialUserAgent, initialColorSpace: modalContextType.initialColorSpace, initialMultiProcessOnLinux: modalContextType.initialMultiProcessOnLinux, initialRepro: modalContextType.initialRepro, initialBeep: modalContextType.initialBeep, initialForSeamlessAacConcatenation: modalContextType.initialForSeamlessAacConcatenation, defaultProps: modalContextType.defaultProps, inFrameMark: modalContextType.inFrameMark, outFrameMark: modalContextType.outFrameMark, defaultConfigurationAudioCodec: modalContextType.defaultConfigurationAudioCodec, defaultConfigurationVideoCodec: modalContextType.defaultConfigurationVideoCodec, renderTypeOfLastRender: modalContextType.renderTypeOfLastRender, defaultMetadata: modalContextType.defaulMetadata, initialHardwareAcceleration: modalContextType.initialHardwareAcceleration, initialSampleRate: modalContextType.initialSampleRate, initialChromeMode: modalContextType.initialChromeMode, renderDefaults: modalContextType.renderDefaults })) : null, modalContextType && modalContextType.type === 'render-progress' && (jsx_runtime_1.jsx(RenderStatusModal_1.RenderStatusModal, { jobId: modalContextType.jobId })), modalContextType && modalContextType.type === 'transcribe' ? (jsx_runtime_1.jsx(TranscriptionModalWithOptionalWhisper_1.TranscriptionModalWithOptionalWhisper, { state: modalContextType })) : null, modalContextType && modalContextType.type === 'video-matting' ? (jsx_runtime_1.jsx(VideoMattingModalWithOptionalPackage_1.VideoMattingModalWithOptionalPackage, { state: modalContextType })) : null, modalContextType && modalContextType.type === 'fix-computed-value' && (jsx_runtime_1.jsx(FixComputedValueModal_1.FixComputedValueModal, { state: modalContextType })), modalContextType && modalContextType.type === 'generate-with-agent' ? (jsx_runtime_1.jsx(GenerateWithAgentModal_1.GenerateWithAgentModal, { state: modalContextType })) : null, modalContextType && modalContextType.type === 'quick-switcher' && (jsx_runtime_1.jsx(QuickSwitcher_1.default, { readOnlyStudio: readOnlyStudio, invocationTimestamp: modalContextType.invocationTimestamp, initialMode: modalContextType.mode, assetSelection: modalContextType.assetSelection, compositionSelection: modalContextType.compositionSelection })), modalContextType && modalContextType.type === 'asset-selection' ? (jsx_runtime_1.jsx(AssetSelectorModal_1.AssetSelectorModal, { readOnlyStudio: readOnlyStudio, state: modalContextType })) : null, modalContextType && modalContextType.type === 'element-library' && (jsx_runtime_1.jsx(ElementLibraryModal_1.ElementLibraryModal, { name: modalContextType.name, url: modalContextType.url })), modalContextType && modalContextType.type === 'element-install' && (jsx_runtime_1.jsx(ElementInstallConfirmation_1.ElementInstallConfirmation, { state: modalContextType })), modalContextType && modalContextType.type === 'add-effect' && (jsx_runtime_1.jsx(EffectPickerModal_1.EffectPickerModal, { state: modalContextType })), modalContextType && modalContextType.type === 'confirmation-dialog' && (jsx_runtime_1.jsx(ConfirmationDialog_1.ConfirmationDialog, { state: modalContextType })), modalContextType && modalContextType.type === 'svg-import-dialog' && (jsx_runtime_1.jsx(SvgImportDialog_1.SvgImportDialog, { state: modalContextType })), (0, studio_runtime_config_1.getStudioAskAIEnabled)() && jsx_runtime_1.jsx(AskAiModal_1.AskAiModal, {})] }));
+                (canRender || modalContextType.readOnlyStudio) ? (jsx_runtime_1.jsx(ServerRenderModal_1.RenderModalWithLoader, { readOnlyStudio: (_a = modalContextType.readOnlyStudio) !== null && _a !== void 0 ? _a : false, initialFrame: modalContextType.initialFrame, initialDarkMode: modalContextType.initialDarkMode, compositionId: modalContextType.compositionId, initialVideoImageFormat: modalContextType.initialVideoImageFormat, initialJpegQuality: modalContextType.initialJpegQuality, initialScale: modalContextType.initialScale, initialLogLevel: modalContextType.initialLogLevel, initialOffthreadVideoCacheSizeInBytes: modalContextType.initialOffthreadVideoCacheSizeInBytes, initialOffthreadVideoThreads: modalContextType.initialOffthreadVideoThreads, initialMediaCacheSizeInBytes: modalContextType.initialMediaCacheSizeInBytes, initialConcurrency: modalContextType.initialConcurrency, maxConcurrency: modalContextType.maxConcurrency, minConcurrency: modalContextType.minConcurrency, initialStillImageFormat: modalContextType.initialStillImageFormat, initialMuted: modalContextType.initialMuted, initialEnforceAudioTrack: modalContextType.initialEnforceAudioTrack, initialProResProfile: modalContextType.initialProResProfile, initialx264Preset: modalContextType.initialx264Preset, initialGopSize: modalContextType.initialGopSize, initialPixelFormat: modalContextType.initialPixelFormat, initialAudioBitrate: modalContextType.initialAudioBitrate, initialVideoBitrate: modalContextType.initialVideoBitrate, initialEveryNthFrame: modalContextType.initialEveryNthFrame, initialNumberOfGifLoops: modalContextType.initialNumberOfGifLoops, initialDelayRenderTimeout: modalContextType.initialDelayRenderTimeout, initialEnvVariables: modalContextType.initialEnvVariables, initialDisableWebSecurity: modalContextType.initialDisableWebSecurity, initialGl: modalContextType.initialOpenGlRenderer, initialHeadless: modalContextType.initialHeadless, initialIgnoreCertificateErrors: modalContextType.initialIgnoreCertificateErrors, initialEncodingBufferSize: modalContextType.initialEncodingBufferSize, initialEncodingMaxRate: modalContextType.initialEncodingMaxRate, initialUserAgent: modalContextType.initialUserAgent, initialColorSpace: modalContextType.initialColorSpace, initialMultiProcessOnLinux: modalContextType.initialMultiProcessOnLinux, initialRepro: modalContextType.initialRepro, initialBeep: modalContextType.initialBeep, initialForSeamlessAacConcatenation: modalContextType.initialForSeamlessAacConcatenation, defaultProps: modalContextType.defaultProps, inFrameMark: modalContextType.inFrameMark, outFrameMark: modalContextType.outFrameMark, defaultConfigurationAudioCodec: modalContextType.defaultConfigurationAudioCodec, defaultConfigurationVideoCodec: modalContextType.defaultConfigurationVideoCodec, renderTypeOfLastRender: modalContextType.renderTypeOfLastRender, defaultMetadata: modalContextType.defaulMetadata, initialHardwareAcceleration: modalContextType.initialHardwareAcceleration, initialSampleRate: modalContextType.initialSampleRate, initialChromeMode: modalContextType.initialChromeMode, renderDefaults: modalContextType.renderDefaults })) : null, modalContextType && modalContextType.type === 'render-progress' && (jsx_runtime_1.jsx(RenderStatusModal_1.RenderStatusModal, { jobId: modalContextType.jobId })), modalContextType && modalContextType.type === 'queue-job-error' ? (jsx_runtime_1.jsx(QueueJobErrorModal_1.QueueJobErrorModal, { title: modalContextType.title, error: modalContextType.error })) : null, modalContextType && modalContextType.type === 'transcribe' ? (jsx_runtime_1.jsx(TranscriptionModalWithOptionalWhisper_1.TranscriptionModalWithOptionalWhisper, { state: modalContextType })) : null, modalContextType && modalContextType.type === 'video-matting' ? (jsx_runtime_1.jsx(VideoMattingModalWithOptionalPackage_1.VideoMattingModalWithOptionalPackage, { state: modalContextType })) : null, modalContextType && modalContextType.type === 'fix-computed-value' && (jsx_runtime_1.jsx(FixComputedValueModal_1.FixComputedValueModal, { state: modalContextType })), modalContextType && modalContextType.type === 'generate-with-agent' ? (jsx_runtime_1.jsx(GenerateWithAgentModal_1.GenerateWithAgentModal, { state: modalContextType })) : null, modalContextType && modalContextType.type === 'quick-switcher' && (jsx_runtime_1.jsx(QuickSwitcher_1.default, { readOnlyStudio: readOnlyStudio, invocationTimestamp: modalContextType.invocationTimestamp, initialMode: modalContextType.mode, assetSelection: modalContextType.assetSelection, compositionSelection: modalContextType.compositionSelection })), modalContextType && modalContextType.type === 'asset-selection' ? (jsx_runtime_1.jsx(AssetSelectorModal_1.AssetSelectorModal, { readOnlyStudio: readOnlyStudio, state: modalContextType })) : null, modalContextType && modalContextType.type === 'element-library' && (jsx_runtime_1.jsx(ElementLibraryModal_1.ElementLibraryModal, { name: modalContextType.name, url: modalContextType.url })), modalContextType && modalContextType.type === 'element-install' && (jsx_runtime_1.jsx(ElementInstallConfirmation_1.ElementInstallConfirmation, { state: modalContextType })), modalContextType && modalContextType.type === 'add-effect' && (jsx_runtime_1.jsx(EffectPickerModal_1.EffectPickerModal, { state: modalContextType })), modalContextType && modalContextType.type === 'confirmation-dialog' && (jsx_runtime_1.jsx(ConfirmationDialog_1.ConfirmationDialog, { state: modalContextType })), modalContextType && modalContextType.type === 'svg-import-dialog' && (jsx_runtime_1.jsx(SvgImportDialog_1.SvgImportDialog, { state: modalContextType })), (0, studio_runtime_config_1.getStudioAskAIEnabled)() && jsx_runtime_1.jsx(AskAiModal_1.AskAiModal, {})] }));
 };
 exports.Modals = Modals;

package/dist/components/ModelManager.js

@@ -7,7 +7,9 @@ const react_1 = require("react");
 const colors_1 = require("../helpers/colors");
 const check_circle_filled_1 = require("../icons/check-circle-filled");
 const cloud_download_1 = require("../icons/cloud-download");
+const models_1 = require("../icons/models");
 const trash_1 = require("../icons/trash");
+const ActionTooltip_1 = require("./ActionTooltip");
 const InlineAction_1 = require("./InlineAction");
 const is_menu_item_1 = require("./Menu/is-menu-item");
 const ValidationMessage_1 = require("./NewComposition/ValidationMessage");
@@ -40,15 +42,14 @@ const descriptionStyle = {
 const list = { marginTop: 14 };
 const modelRow = {
     alignItems: 'center',
-    borderBottom: colors_1.BORDER_WHITE_ALPHA_12,
     display: 'flex',
     gap: 10,
     minHeight: 38,
-    padding: '0 10px',
 };
-const lastModelRow = {
-    ...modelRow,
-    borderBottom: 'none',
+const modelIcon = {
+    flexShrink: 0,
+    height: 16,
+    width: 16,
 };
 const statusIcon = {
     flexShrink: 0,
@@ -56,7 +57,7 @@ const statusIcon = {
     width: 14,
 };
 const modelName = {
-    color: colors_1.WHITE,
+    color: colors_1.LIGHT_TEXT,
     flex: 1,
     fontFamily: 'monospace',
     fontSize: 13,
@@ -175,7 +176,7 @@ const ModelManager = ({ ariaLabel, availableModels, description, indent, isModel
         return jsx_runtime_1.jsx(trash_1.TrashIcon, { color: color, style: actionIcon });
     }, []);
     const actionInProgress = actionState.type === 'downloading' || actionState.type === 'removing';
-    return (jsx_runtime_1.jsx("div", { style: visible ? modelPanel : hiddenPanel, className: is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME, children: jsx_runtime_1.jsxs("div", { style: indent ? container : flushContainer, children: [description === null ? null : (jsx_runtime_1.jsx("p", { style: descriptionStyle, children: description })), cacheCheckError ? (jsx_runtime_1.jsx(ValidationMessage_1.ValidationMessage, { align: "flex-start", message: cacheCheckError, type: "error" })) : null, jsx_runtime_1.jsx("div", { style: description === null ? undefined : list, role: "list", "aria-label": ariaLabel, children: availableModels.map((model, index) => {
+    return (jsx_runtime_1.jsx("div", { style: visible ? modelPanel : hiddenPanel, className: is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME, children: jsx_runtime_1.jsxs("div", { style: indent ? container : flushContainer, children: [description === null ? null : (jsx_runtime_1.jsx("p", { style: descriptionStyle, children: description })), cacheCheckError ? (jsx_runtime_1.jsx(ValidationMessage_1.ValidationMessage, { align: "flex-start", message: cacheCheckError, type: "error" })) : null, jsx_runtime_1.jsx("div", { style: description === null ? undefined : list, role: "list", "aria-label": ariaLabel, children: availableModels.map((model) => {
                         var _a;
                         const cached = (_a = cachedModels === null || cachedModels === void 0 ? void 0 : cachedModels.has(model.name)) !== null && _a !== void 0 ? _a : false;
                         const processingThisModel = actionState.type !== 'idle' &&
@@ -192,8 +193,8 @@ const ModelManager = ({ ariaLabel, availableModels, description, indent, isModel
                             : actionState.type === 'error' && actionState.model === model.name
                                 ? actionState.message
                                 : (0, studio_shared_1.formatBytes)(model.webGpuDownloadSize);
-                        return (jsx_runtime_1.jsxs("div", { role: "listitem", style: index === availableModels.length - 1 ? lastModelRow : modelRow, children: [
-                                jsx_runtime_1.jsx("span", { style: modelName, children: model.name }), jsx_runtime_1.jsx("span", { style: status, title: modelStatus, children: modelStatus }), cached ? (jsx_runtime_1.jsx(check_circle_filled_1.CheckCircleFilled, { "aria-hidden": true, style: { ...statusIcon, fill: colors_1.BLUE } })) : null, processingThisModel ? (jsx_runtime_1.jsx("span", { style: actionSlot, children: jsx_runtime_1.jsx(Spinner_1.Spinner, { duration: 0.5, size: 14 }) })) : cached ? (jsx_runtime_1.jsx(InlineAction_1.InlineAction, { disabled: actionInProgress, onClick: () => remove(model.name), renderAction: renderRemoveIcon, title: `Remove ${model.name}`, variant: null })) : (jsx_runtime_1.jsx(InlineAction_1.InlineAction, { disabled: cachedModels === null || actionInProgress, onClick: () => downloadModel(model.name), renderAction: renderDownloadIcon, title: `Download ${model.name}`, variant: null }))] }, model.name));
+                        return (jsx_runtime_1.jsxs("div", { role: "listitem", style: modelRow, children: [
+                                jsx_runtime_1.jsx(models_1.ModelsIcon, { "aria-hidden": true, color: colors_1.LIGHT_TEXT, style: modelIcon }), jsx_runtime_1.jsx("span", { style: modelName, children: model.name }), jsx_runtime_1.jsx("span", { role: "group", style: status, "aria-label": modelStatus, children: modelStatus }), cached ? (jsx_runtime_1.jsx(check_circle_filled_1.CheckCircleFilled, { "aria-hidden": true, style: { ...statusIcon, fill: colors_1.BLUE } })) : null, processingThisModel ? (jsx_runtime_1.jsx("span", { style: actionSlot, children: jsx_runtime_1.jsx(Spinner_1.Spinner, { duration: 0.5, size: 14 }) })) : cached ? (jsx_runtime_1.jsx(ActionTooltip_1.ActionTooltip, { label: "Uninstall", shortcut: null, delay: 800, dismissOnClick: true, children: jsx_runtime_1.jsx(InlineAction_1.InlineAction, { "aria-label": `Remove ${model.name}`, disabled: actionInProgress, onClick: () => remove(model.name), renderAction: renderRemoveIcon, variant: null }) })) : (jsx_runtime_1.jsx(ActionTooltip_1.ActionTooltip, { label: "Install", shortcut: null, delay: 800, dismissOnClick: true, children: jsx_runtime_1.jsx(InlineAction_1.InlineAction, { "aria-label": `Download ${model.name}`, disabled: cachedModels === null || actionInProgress, onClick: () => downloadModel(model.name), renderAction: renderDownloadIcon, variant: null }) }))] }, model.name));
                     }) })
             ] }) }));
 };

package/dist/components/MuteToggle.js

@@ -26,6 +26,6 @@ const MuteToggle = ({ muted, setMuted }) => {
         (0, exports.toggleMute)(setMuted);
     }, [setMuted]);
     const accessibilityLabel = muted ? 'Unmute video' : 'Mute video';
-    return (jsx_runtime_1.jsx(ActionTooltip_1.ActionTooltip, { label: "Mute", shortcut: shortcutsDisabled ? null : shortcut, delay: 800, dismissOnClick: false, children: jsx_runtime_1.jsx(ControlButton_1.ControlButton, { title: "", "aria-label": accessibilityLabel, "aria-keyshortcuts": shortcutsDisabled ? undefined : ariaShortcut || undefined, onClick: onClick, style: buttonStyle, children: (color) => muted ? (jsx_runtime_1.jsx(media_volume_1.VolumeOffIcon, { color: colors_1.BLUE })) : (jsx_runtime_1.jsx(media_volume_1.VolumeOnIcon, { color: color })) }) }));
+    return (jsx_runtime_1.jsx(ActionTooltip_1.ActionTooltip, { label: "Mute", shortcut: shortcutsDisabled ? null : shortcut, delay: 800, dismissOnClick: false, children: jsx_runtime_1.jsx(ControlButton_1.ControlButton, { "aria-label": accessibilityLabel, "aria-keyshortcuts": shortcutsDisabled ? undefined : ariaShortcut || undefined, onClick: onClick, style: buttonStyle, children: (color) => muted ? (jsx_runtime_1.jsx(media_volume_1.VolumeOffIcon, { color: colors_1.BLUE })) : (jsx_runtime_1.jsx(media_volume_1.VolumeOnIcon, { color: color })) }) }));
 };
 exports.MuteToggle = MuteToggle;

package/dist/components/NewComposition/CancelButton.js

@@ -3,16 +3,22 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.CancelButton = exports.CancelIcon = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const colors_1 = require("../../helpers/colors");
+const hoverable_1 = require("../../helpers/hoverable");
 const z_index_1 = require("../../state/z-index");
 const style = {
     appearance: 'none',
     border: 'none',
-    backgroundColor: colors_1.TRANSPARENT,
-    color: colors_1.WHITE,
-    cursor: 'pointer',
+    borderRadius: 4,
+    cursor: 'default',
     display: 'inline-flex',
     justifyContent: 'center',
     alignItems: 'center',
+    ...(0, hoverable_1.hoverableStyle)({
+        idleBackground: colors_1.TRANSPARENT,
+        hoverBackground: colors_1.WHITE_ALPHA_06,
+        idleColor: colors_1.LIGHT_TEXT,
+        hoverColor: colors_1.WHITE,
+    }),
 };
 const CancelIcon = (props) => {
     return (jsx_runtime_1.jsx("svg", { viewBox: "0 0 640 640", ...props, children: jsx_runtime_1.jsx("path", { fill: colors_1.CURRENT_COLOR, d: "M507.3 155.3C513.5 149.1 513.5 138.9 507.3 132.7C501.1 126.5 490.9 126.5 484.7 132.7L320 297.4L155.3 132.7C149.1 126.5 138.9 126.5 132.7 132.7C126.5 138.9 126.5 149.1 132.7 155.3L297.4 320L132.7 484.7C126.5 490.9 126.5 501.1 132.7 507.3C138.9 513.5 149.1 513.5 155.3 507.3L320 342.6L484.7 507.3C490.9 513.5 501.1 513.5 507.3 507.3C513.5 501.1 513.5 490.9 507.3 484.7L342.6 320L507.3 155.3z" }) }));
@@ -20,6 +26,6 @@ const CancelIcon = (props) => {
 exports.CancelIcon = CancelIcon;
 const CancelButton = ({ onPress, ...props }) => {
     const { tabIndex } = (0, z_index_1.useZIndex)();
-    return (jsx_runtime_1.jsx("button", { tabIndex: tabIndex, style: style, type: "button", onClick: onPress, children: jsx_runtime_1.jsx(exports.CancelIcon, { ...props }) }));
+    return (jsx_runtime_1.jsx("button", { "aria-label": "Close dialog", className: `${hoverable_1.HOVERABLE_CLASS_NAME} ${hoverable_1.FOCUS_VISIBLE_ONLY_CLASS_NAME}`, tabIndex: tabIndex, style: style, type: "button", onClick: onPress, children: jsx_runtime_1.jsx(exports.CancelIcon, { ...props }) }));
 };
 exports.CancelButton = CancelButton;

package/dist/components/NewComposition/ComboBox.d.ts

@@ -31,7 +31,7 @@ export declare const Combobox: React.FC<{
     readonly values: ComboboxValue[];
     readonly selectedId: string | number;
     readonly style?: React.CSSProperties;
-    readonly title: string;
+    readonly 'aria-label': string;
     readonly size?: ComboboxSize;
     readonly unhoveredIconColor?: string;
 }>;

package/dist/components/NewComposition/ComboBox.js

@@ -61,7 +61,7 @@ const smallLabel = {
     fontSize: 11,
     lineHeight: '12px',
 };
-const Combobox = ({ values, selectedId, style: customStyle, title, size: controlSize = 'default', unhoveredIconColor = colors_1.LIGHT_TEXT, }) => {
+const Combobox = ({ values, selectedId, style: customStyle, 'aria-label': ariaLabel, size: controlSize = 'default', unhoveredIconColor = colors_1.LIGHT_TEXT, }) => {
     const [hovered, setIsHovered] = (0, react_1.useState)(false);
     const [opened, setOpened] = (0, react_1.useState)(false);
     const ref = (0, react_1.useRef)(null);
@@ -206,7 +206,7 @@ const Combobox = ({ values, selectedId, style: customStyle, title, size: control
             ? compactLabel
             : label;
     return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
-            jsx_runtime_1.jsxs("button", { ref: ref, title: title, tabIndex: tabIndex, type: "button", style: style, className: is_menu_item_1.MENU_INITIATOR_CLASSNAME, children: [selected ? (jsx_runtime_1.jsx("div", { title: typeof selected.label === 'string' ? selected.label : undefined, style: selectedLabelStyle, children: selected === null || selected === void 0 ? void 0 : selected.label })) : null, jsx_runtime_1.jsx(layout_1.Spacing, { x: controlSize === 'default' ? 1 : 0.5 }), ' ', jsx_runtime_1.jsx(caret_1.CaretDown, { color: hovered || opened ? colors_1.WHITE : unhoveredIconColor, small: controlSize === 'small' })
+            jsx_runtime_1.jsxs("button", { ref: ref, "aria-label": ariaLabel, tabIndex: tabIndex, type: "button", style: style, className: is_menu_item_1.MENU_INITIATOR_CLASSNAME, children: [selected ? (jsx_runtime_1.jsx("div", { role: "group", "aria-label": typeof selected.label === 'string' ? selected.label : undefined, style: selectedLabelStyle, children: selected === null || selected === void 0 ? void 0 : selected.label })) : null, jsx_runtime_1.jsx(layout_1.Spacing, { x: controlSize === 'default' ? 1 : 0.5 }), ' ', jsx_runtime_1.jsx(caret_1.CaretDown, { color: hovered || opened ? colors_1.WHITE : unhoveredIconColor, small: controlSize === 'small' })
                 ] }), portalStyle
                 ? react_dom_1.default.createPortal(jsx_runtime_1.jsx("div", { style: styles_1.fullScreenOverlay, onPointerDown: onOverlayPointerDown, 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(MenuContent_1.MenuContent, { onNextMenu: noop_1.noop, onPreviousMenu: noop_1.noop, values: values, onHide: onHide, leaveLeftSpace: true, preselectIndex: values.findIndex((v) => selected && v.id === selected.id), topItemCanBeUnselected: false, fixedHeight: derivedMaxHeight }) }) }) }) }), (0, portals_1.getPortal)(currentZIndex))
                 : null] }));

package/dist/components/NewComposition/DuplicateComposition.js

@@ -183,7 +183,7 @@ const DuplicateCompositionLoaded = ({ initialType }) => {
                             // We allow converting from a composition to a still, but
                             // not the other way around
                             jsx_runtime_1.jsxs("div", { style: layout_2.optionRow, children: [
-                                    jsx_runtime_1.jsx("div", { style: layout_2.label, children: "Type" }), jsx_runtime_1.jsx("div", { style: layout_2.rightRow, children: jsx_runtime_1.jsx(ComboBox_1.Combobox, { title: "Type of composition", style: comboBoxStyle, values: typeValues, selectedId: type }) })
+                                    jsx_runtime_1.jsx("div", { style: layout_2.label, children: "Type" }), jsx_runtime_1.jsx("div", { style: layout_2.rightRow, children: jsx_runtime_1.jsx(ComboBox_1.Combobox, { "aria-label": "Type of composition", style: comboBoxStyle, values: typeValues, selectedId: type }) })
                                 ] })) : null, jsx_runtime_1.jsxs("div", { style: layout_2.optionRow, children: [
                                     jsx_runtime_1.jsx("div", { style: layout_2.label, children: "ID" }), jsx_runtime_1.jsx("div", { style: layout_2.rightRow, children: jsx_runtime_1.jsxs(InputAndValidationContainer_1.InputAndValidationContainer, { children: [
                                                 jsx_runtime_1.jsx(RemInput_1.RemotionInput, { value: newId, onChange: onNameChange, type: "text", autoFocus: true, placeholder: "Composition ID", status: "ok", rightAlign: true }), compNameErrMessage ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [

package/dist/components/NewComposition/InputDragger.d.ts

@@ -22,11 +22,12 @@ export declare const isInputDraggerValueAlignedToStep: ({ min, step, value, }: {
     readonly step: string | number | undefined;
     readonly value: number;
 }) => boolean;
-export declare const validateInputDraggerValue: ({ max, min, step, value, }: {
+export declare const validateInputDraggerValue: ({ max, min, step, value, integerOnly, }: {
     readonly max: string | number | undefined;
     readonly min: string | number | undefined;
     readonly step: string | number | undefined;
     readonly value: string;
+    readonly integerOnly?: boolean | undefined;
 }) => InputDraggerValidationResult;
 export declare const deriveInputDraggerArrowValue: ({ direction, max, min, step, value, }: {
     readonly direction: -1 | 1;
@@ -54,7 +55,7 @@ export declare const deriveInputDraggerValueDiff: ({ dragSensitivity, step, xDis
     readonly step: number;
     readonly xDistance: number;
 }) => number;
-export declare const InputDragger: React.ForwardRefExoticComponent<InputHTMLAttributes<HTMLInputElement> & {
+export declare const InputDragger: React.ForwardRefExoticComponent<Omit<InputHTMLAttributes<HTMLInputElement>, "title"> & {
     readonly onValueChange: (newVal: number, source: "drag" | "input") => void;
     readonly onValueChangeEnd?: ((newVal: number, source: "drag" | "input") => void) | undefined;
     readonly onTextChange: (newVal: string) => void;
@@ -67,6 +68,7 @@ export declare const InputDragger: React.ForwardRefExoticComponent<InputHTMLAttr
     readonly rightAlign: boolean;
     readonly small?: boolean | undefined;
     readonly allowStepMismatch?: boolean | undefined;
+    readonly integerOnly?: boolean | undefined;
     readonly snapToStep?: boolean | undefined;
     readonly dragDecimalPlaces?: number | undefined;
     readonly dragSensitivity?: number | undefined;

package/dist/components/NewComposition/InputDragger.js

@@ -236,7 +236,7 @@ const isInputDraggerValueAlignedToStep = ({ min, step, value, }) => {
     return Math.abs(stepsFromBase - Math.round(stepsFromBase)) <= tolerance;
 };
 exports.isInputDraggerValueAlignedToStep = isInputDraggerValueAlignedToStep;
-const validateInputDraggerValue = ({ max, min, step, value, }) => {
+const validateInputDraggerValue = ({ max, min, step, value, integerOnly = false, }) => {
     const parsed = (0, exports.parseInputDraggerNumber)(value);
     if (parsed === null) {
         return {
@@ -258,6 +258,12 @@ const validateInputDraggerValue = ({ max, min, step, value, }) => {
             message: `Value must be less than or equal to ${numericMax}.`,
         };
     }
+    if (integerOnly && !Number.isInteger(parsed)) {
+        return {
+            valid: false,
+            message: 'Value must be an integer.',
+        };
+    }
     if (!(0, exports.isInputDraggerValueAlignedToStep)({ min, step, value: parsed })) {
         return {
             valid: false,
@@ -324,7 +330,7 @@ const deriveInputDraggerValueDiff = ({ dragSensitivity, step, xDistance, }) => {
     return (0, remotion_1.interpolate)(xDistance, [-5, -4, 0, 4, 5], [-step * dragSensitivity, 0, 0, 0, step * dragSensitivity]);
 };
 exports.deriveInputDraggerValueDiff = deriveInputDraggerValueDiff;
-const InputDraggerForwardRefFn = ({ onValueChange, onValueChangeEnd, min: _min, max: _max, step: _step, value, onTextChange, formatter = (q) => String(q), formatterStyle, formatterSubtitle, formatterSubtitleStyle, buttonStyle, style: inputStyle, status, rightAlign, small, allowStepMismatch = false, snapToStep = true, dragDecimalPlaces, dragSensitivity = 1, type: _type, ...props }, ref) => {
+const InputDraggerForwardRefFn = ({ onValueChange, onValueChangeEnd, min: _min, max: _max, step: _step, value, onTextChange, formatter = (q) => String(q), formatterStyle, formatterSubtitle, formatterSubtitleStyle, buttonStyle, style: inputStyle, status, rightAlign, small, allowStepMismatch = false, integerOnly = false, snapToStep = true, dragDecimalPlaces, dragSensitivity = 1, type: _type, ...props }, ref) => {
     const [inputFallback, setInputFallback] = (0, react_1.useState)(false);
     const [dragging, setDragging] = (0, react_1.useState)(false);
     const fallbackRef = (0, react_1.useRef)(null);
@@ -336,9 +342,9 @@ const InputDraggerForwardRefFn = ({ onValueChange, onValueChangeEnd, min: _min,
             step: _step,
         });
     }, [_min, _step, snapToStep]);
-    const validationStep = allowStepMismatch ? 'any' : deriveStep;
+    const validationStep = allowStepMismatch || integerOnly ? 'any' : deriveStep;
     const span = (0, react_1.useMemo)(() => ({
-        color: dragging ? 'var(--remotion-cli-internals-blue-hovered)' : colors_1.BLUE,
+        color: dragging ? colors_1.BLUE_HOVERED : colors_1.BLUE,
         cursor: 'ew-resize',
         userSelect: 'none',
         WebkitUserSelect: 'none',
@@ -380,6 +386,7 @@ const InputDraggerForwardRefFn = ({ onValueChange, onValueChangeEnd, min: _min,
         e.target.setCustomValidity('');
         const parsed = (0, exports.parseInputDraggerNumber)(e.target.value);
         if (parsed !== null &&
+            (!integerOnly || Number.isInteger(parsed)) &&
             (0, exports.isInputDraggerValueInRange)({
                 max: _max,
                 min: _min,
@@ -387,7 +394,7 @@ const InputDraggerForwardRefFn = ({ onValueChange, onValueChangeEnd, min: _min,
             })) {
             onValueChange(parsed, 'input');
         }
-    }, [_max, _min, onValueChange]);
+    }, [_max, _min, integerOnly, onValueChange]);
     const onBlur = (0, react_1.useCallback)(() => {
         if (!fallbackRef.current) {
             return;
@@ -402,6 +409,7 @@ const InputDraggerForwardRefFn = ({ onValueChange, onValueChangeEnd, min: _min,
             min: _min,
             step: validationStep,
             value: newValue,
+            integerOnly,
         });
         if (validation.valid) {
             fallbackRef.current.setCustomValidity('');
@@ -412,7 +420,7 @@ const InputDraggerForwardRefFn = ({ onValueChange, onValueChangeEnd, min: _min,
             fallbackRef.current.setCustomValidity(validation.message);
             fallbackRef.current.reportValidity();
         }
-    }, [_max, _min, onEscape, onValueChangeEnd, validationStep]);
+    }, [_max, _min, integerOnly, onEscape, onValueChangeEnd, validationStep]);
     const onInputKeyDown = (0, react_1.useCallback)((e) => {
         var _a;
         if (e.key === 'Tab') {
@@ -432,17 +440,22 @@ const InputDraggerForwardRefFn = ({ onValueChange, onValueChangeEnd, min: _min,
             min: _min,
             value,
         });
-        const nextValue = (0, exports.deriveInputDraggerArrowValue)({
+        const steppedValue = (0, exports.deriveInputDraggerArrowValue)({
             direction: e.key === 'ArrowUp' ? 1 : -1,
             max: _max,
             min: _min,
             step: deriveStep,
             value: currentValue,
         });
+        const nextValue = integerOnly ? Math.round(steppedValue) : steppedValue;
+        if (integerOnly &&
+            !(0, exports.isInputDraggerValueInRange)({ max: _max, min: _min, value: nextValue })) {
+            return;
+        }
         e.currentTarget.value = String(nextValue);
         e.currentTarget.setCustomValidity('');
         onValueChange(nextValue, 'input');
-    }, [_max, _min, deriveStep, onValueChange, value]);
+    }, [_max, _min, deriveStep, integerOnly, onValueChange, value]);
     const roundToStep = (val, stepSize) => {
         const factor = 1 / stepSize;
         return Math.ceil(val * factor) / factor;
@@ -478,11 +491,16 @@ const InputDraggerForwardRefFn = ({ onValueChange, onValueChangeEnd, min: _min,
                 xDistance,
             });
             const newValue = Math.min(max, Math.max(min, dragStartValue + diff));
-            const nextValue = snapToStep
+            const steppedValue = snapToStep
                 ? roundToStep(newValue, step)
                 : dragDecimalPlaces === undefined
                     ? newValue
                     : roundToDecimalPlaces(newValue, dragDecimalPlaces);
+            const nextValue = integerOnly ? Math.round(steppedValue) : steppedValue;
+            if (integerOnly &&
+                !(0, exports.isInputDraggerValueInRange)({ max: _max, min: _min, value: nextValue })) {
+                return;
+            }
             lastDragValue = nextValue;
             onValueChange(nextValue, 'drag');
         };
@@ -508,6 +526,7 @@ const InputDraggerForwardRefFn = ({ onValueChange, onValueChangeEnd, min: _min,
         _min,
         _max,
         value,
+        integerOnly,
         onValueChange,
         onValueChangeEnd,
         snapToStep,
@@ -529,7 +548,7 @@ const InputDraggerForwardRefFn = ({ onValueChange, onValueChangeEnd, min: _min,
                     }
                     : inputStyle, type: "text" }) }));
     }
-    return (jsx_runtime_1.jsxs("button", { ref: ref, type: "button", "aria-label": props['aria-label'], title: props.title, className: '__remotion_input_dragger', style: buttonStyle
+    return (jsx_runtime_1.jsxs("button", { ref: ref, type: "button", "aria-label": props['aria-label'], className: '__remotion_input_dragger', style: buttonStyle
             ? {
                 ...(small
                     ? compactInputDraggerContainerStyle

package/dist/components/NewComposition/NewComposition.js

@@ -28,6 +28,7 @@ const NewCompDuration_1 = require("./NewCompDuration");
 const RemInput_1 = require("./RemInput");
 const SlugPreview_1 = require("./SlugPreview");
 const ValidationMessage_1 = require("./ValidationMessage");
+const { sortItemsByCommitOrder } = canvas_1.CanvasInternals;
 const content = {
     padding: 12,
     paddingRight: 12,
@@ -62,9 +63,9 @@ const folderLabelTextStyle = {
     textOverflow: 'ellipsis',
     whiteSpace: 'nowrap',
 };
-const FolderDropdownLabel = ({ folderPath, indentation }) => {
+const FolderDropdownLabel = ({ folderName, indentation }) => {
     return (jsx_runtime_1.jsxs("div", { style: folderLabelStyle, children: [
-            jsx_runtime_1.jsx(layout_1.Spacing, { x: indentation * 1.5 }), folderPath === null ? (jsx_runtime_1.jsx("div", { style: folderIconStyle })) : (jsx_runtime_1.jsx(folder_1.CollapsedFolderIcon, { color: colors_1.LIGHT_TEXT, style: folderIconStyle })), jsx_runtime_1.jsx(layout_1.Spacing, { x: 1 }), jsx_runtime_1.jsx("span", { style: folderLabelTextStyle, children: folderPath !== null && folderPath !== void 0 ? folderPath : 'None' })
+            jsx_runtime_1.jsx(layout_1.Spacing, { x: indentation * 1.5 }), folderName === null ? (jsx_runtime_1.jsx("div", { style: folderIconStyle })) : (jsx_runtime_1.jsx(folder_1.CollapsedFolderIcon, { color: colors_1.LIGHT_TEXT, style: folderIconStyle })), jsx_runtime_1.jsx(layout_1.Spacing, { x: 1 }), jsx_runtime_1.jsx("span", { style: folderLabelTextStyle, children: folderName !== null && folderName !== void 0 ? folderName : 'None' })
         ] }));
 };
 const rootFolderId = 'new-composition-root-folder';
@@ -84,7 +85,7 @@ const NewCompositionFields = ({ compositionId, heightValidationMessage, inputRef
             ? folders
                 .slice()
                 .sort((a, b) => a.name.localeCompare(b.name, undefined, { numeric: true }))
-            : (0, canvas_1.sortItemsByCommitOrder)(folders, (folder) => folder.order);
+            : sortItemsByCommitOrder(folders, (folder) => folder.order);
         const appendFolders = (parent) => {
             sortedFolders
                 .filter((folder) => folder.parent === parent)
@@ -98,7 +99,7 @@ const NewCompositionFields = ({ compositionId, heightValidationMessage, inputRef
             {
                 id: rootFolderId,
                 keyHint: null,
-                label: jsx_runtime_1.jsx(FolderDropdownLabel, { folderPath: null, indentation: 0 }),
+                label: jsx_runtime_1.jsx(FolderDropdownLabel, { folderName: null, indentation: 0 }),
                 leftItem: values.folder.folderName === null ? jsx_runtime_1.jsx(Checkmark_1.Checkmark, {}) : null,
                 onClick: () => {
                     setValues((current) => ({
@@ -135,7 +136,7 @@ const NewCompositionFields = ({ compositionId, heightValidationMessage, inputRef
                 return {
                     id,
                     keyHint: null,
-                    label: (jsx_runtime_1.jsx(FolderDropdownLabel, { folderPath: folderPath, indentation: indentation })),
+                    label: (jsx_runtime_1.jsx(FolderDropdownLabel, { folderName: folder.name, indentation: indentation })),
                     leftItem: selectedFolderId === id ? jsx_runtime_1.jsx(Checkmark_1.Checkmark, {}) : null,
                     onClick: () => {
                         setValues((current) => ({
@@ -147,7 +148,7 @@ const NewCompositionFields = ({ compositionId, heightValidationMessage, inputRef
                             },
                         }));
                     },
-                    quickSwitcherLabel: folderPath,
+                    quickSwitcherLabel: folder.name,
                     subMenu: null,
                     type: 'item',
                     value: id,
@@ -205,7 +206,7 @@ const NewCompositionFields = ({ compositionId, heightValidationMessage, inputRef
     }, [setValues]);
     return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
             jsx_runtime_1.jsxs("div", { style: layout_2.optionRow, children: [
-                    jsx_runtime_1.jsx("div", { style: layout_2.label, children: "Folder" }), jsx_runtime_1.jsx("div", { style: layout_2.rightRow, children: jsx_runtime_1.jsx(ComboBox_1.Combobox, { values: folderValues, selectedId: selectedFolderId, style: folderSelectStyle, title: "Folder" }) })
+                    jsx_runtime_1.jsx("div", { style: layout_2.label, children: "Folder" }), jsx_runtime_1.jsx("div", { style: layout_2.rightRow, children: jsx_runtime_1.jsx(ComboBox_1.Combobox, { values: folderValues, selectedId: selectedFolderId, style: folderSelectStyle, "aria-label": "Folder" }) })
                 ] }), jsx_runtime_1.jsxs("div", { style: layout_2.optionRow, children: [
                     jsx_runtime_1.jsx("div", { style: layout_2.label, children: "ID" }), jsx_runtime_1.jsx("div", { style: layout_2.rightRow, children: jsx_runtime_1.jsxs(InputAndValidationContainer_1.InputAndValidationContainer, { children: [
                                 jsx_runtime_1.jsx(RemInput_1.RemotionInput, { ref: inputRef, value: values.id, onChange: onNameChange, type: "text", autoFocus: true, placeholder: "Composition ID", status: "ok", rightAlign: true }), jsx_runtime_1.jsx(SlugPreview_1.SlugPreview, { action: "create", currentName: null, input: values.id, slug: compositionId }), nameValidationMessage ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [

package/dist/components/NewComposition/RemInput.d.ts

@@ -13,6 +13,6 @@ export declare const getInputBorderColor: ({ status, isFocused, isHovered, }: {
     status: "error" | "ok" | "warning";
     isFocused: boolean;
     isHovered: boolean;
-}) => "#f1c40f" | "#ff3232" | "hsla(0, 0%, 100%, 0.15)" | "rgba(0, 0, 0, 0.6)" | "rgba(255, 255, 255, 0.05)";
+}) => "var(--remotion-studio-black-alpha-60)" | "var(--remotion-studio-fail-color)" | "var(--remotion-studio-warning-color)" | "var(--remotion-studio-white-alpha-05)" | "var(--remotion-studio-white-alpha-15)";
 export declare const RemotionInput: React.ForwardRefExoticComponent<Omit<Props, "ref"> & React.RefAttributes<HTMLInputElement>>;
 export {};

package/dist/components/NewComposition/menu-typeahead.js

@@ -8,7 +8,7 @@ const getLabelToMatch = (value) => {
     if (typeof value.label === 'string') {
         return value.label;
     }
-    return null;
+    return value.quickSwitcherLabel;
 };
 const findTypeaheadMenuItem = ({ query, values, }) => {
     const normalizedQuery = query.trim().toLowerCase();

package/dist/components/OpenIssueButton.js

@@ -32,6 +32,6 @@ const OpenIssueButton = ({ link }) => {
     const onPointerLeave = (0, react_1.useCallback)(() => {
         setHovered(false);
     }, []);
-    return (jsx_runtime_1.jsx("button", { title: buttonTooltip, type: "button", onPointerEnter: onPointerEnter, onPointerLeave: onPointerLeave, style: buttonStyle, onClick: handleClick, children: openInEditorSvg }));
+    return (jsx_runtime_1.jsx("button", { "aria-label": buttonTooltip, type: "button", onPointerEnter: onPointerEnter, onPointerLeave: onPointerLeave, style: buttonStyle, onClick: handleClick, children: openInEditorSvg }));
 };
 exports.OpenIssueButton = OpenIssueButton;

package/dist/components/OutlineToggle.js

@@ -21,7 +21,7 @@ const OutlineToggle = () => {
     const accessibilityLabel = editorShowOutlines
         ? 'Hide outlines'
         : 'Show outlines';
-    return (jsx_runtime_1.jsx(ActionTooltip_1.ActionTooltip, { label: "Outlines", shortcut: shortcutsDisabled ? null : shortcut, delay: 800, dismissOnClick: false, children: jsx_runtime_1.jsx(ControlButton_1.ControlButton, { title: "", "aria-label": accessibilityLabel, "aria-keyshortcuts": shortcutsDisabled ? undefined : ariaShortcut || undefined, "aria-pressed": editorShowOutlines, onClick: onClick, style: buttonStyle, children: (color) => {
+    return (jsx_runtime_1.jsx(ActionTooltip_1.ActionTooltip, { label: "Outlines", shortcut: shortcutsDisabled ? null : shortcut, delay: 800, dismissOnClick: false, children: jsx_runtime_1.jsx(ControlButton_1.ControlButton, { "aria-label": accessibilityLabel, "aria-keyshortcuts": shortcutsDisabled ? undefined : ariaShortcut || undefined, "aria-pressed": editorShowOutlines, onClick: onClick, style: buttonStyle, children: (color) => {
                 const iconColor = editorShowOutlines ? colors_1.BLUE : color;
                 return (jsx_runtime_1.jsxs("svg", { style: { width: 17, height: 17 }, viewBox: "0 0 512 512", fill: "none", "aria-hidden": "true", focusable: "false", children: [
                         jsx_runtime_1.jsx("path", { d: "M64 64H448V448H64V64Z", stroke: iconColor, strokeWidth: "36" }), [

package/dist/components/PlayPause.js

@@ -235,6 +235,6 @@ const PlayPauseInner = ({ playbackRate, loop, bufferStateDelayInMilliseconds, mu
         };
     }, [bufferStateDelayInMilliseconds, emitter]);
     return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
-            jsx_runtime_1.jsx(PlaybackManager, { loop: loop, playbackRate: playbackRate, muted: muted, inFrame: inFrame, outFrame: outFrame, getCurrentFrame: getCurrentFrame }), hideNavigationControls ? null : (jsx_runtime_1.jsx(ActionTooltip_1.ActionTooltip, { label: "Go to beginning", shortcut: jumpToBeginningShortcut, delay: 800, dismissOnClick: true, children: jsx_runtime_1.jsx(ControlButton_1.ControlButton, { "aria-label": "Go to beginning", "aria-keyshortcuts": jumpToBeginningAriaShortcut || undefined, title: "", disabled: !videoConfig, onClick: jumpToStart, children: (color) => jsx_runtime_1.jsx(jump_to_start_1.JumpToStart, { style: backStyle, color: color }) }) })), hideNavigationControls ? null : (jsx_runtime_1.jsx(ActionTooltip_1.ActionTooltip, { label: "Previous frame", shortcut: "\u2190", delay: 800, dismissOnClick: true, children: jsx_runtime_1.jsx(ControlButton_1.ControlButton, { "aria-label": "Go back 1 frame", "aria-keyshortcuts": "ArrowLeft", title: "", disabled: !videoConfig, onClick: oneFrameBack, children: (color) => jsx_runtime_1.jsx(step_back_1.StepBack, { style: forwardBackStyle, color: color }) }) })), jsx_runtime_1.jsx(ActionTooltip_1.ActionTooltip, { label: playing ? 'Pause' : 'Play', shortcut: playPauseShortcut, delay: 800, dismissOnClick: false, children: jsx_runtime_1.jsx(ControlButton_1.ControlButton, { "aria-label": playing ? 'Pause' : 'Play', "aria-keyshortcuts": playPauseAriaShortcut || undefined, title: "", onClick: playing ? pause : play, disabled: !videoConfig, children: (color) => playing ? (showBufferIndicator ? (jsx_runtime_1.jsx(player_1.PlayerInternals.BufferingIndicator, { type: "studio", color: color })) : (jsx_runtime_1.jsx(pause_1.Pause, { style: iconButton, color: color }))) : (jsx_runtime_1.jsx(play_1.Play, { style: iconButton, color: color })) }) }), hideNavigationControls ? null : (jsx_runtime_1.jsx(ActionTooltip_1.ActionTooltip, { label: "Next frame", shortcut: "\u2192", delay: 800, dismissOnClick: true, children: jsx_runtime_1.jsx(ControlButton_1.ControlButton, { "aria-label": "Go forward 1 frame", "aria-keyshortcuts": "ArrowRight", title: "", disabled: !videoConfig, onClick: oneFrameForward, children: (color) => jsx_runtime_1.jsx(step_forward_1.StepForward, { style: forwardBackStyle, color: color }) }) }))] }));
+            jsx_runtime_1.jsx(PlaybackManager, { loop: loop, playbackRate: playbackRate, muted: muted, inFrame: inFrame, outFrame: outFrame, getCurrentFrame: getCurrentFrame }), hideNavigationControls ? null : (jsx_runtime_1.jsx(ActionTooltip_1.ActionTooltip, { label: "Go to beginning", shortcut: jumpToBeginningShortcut, delay: 800, dismissOnClick: true, children: jsx_runtime_1.jsx(ControlButton_1.ControlButton, { "aria-label": "Go to beginning", "aria-keyshortcuts": jumpToBeginningAriaShortcut || undefined, disabled: !videoConfig, onClick: jumpToStart, children: (color) => jsx_runtime_1.jsx(jump_to_start_1.JumpToStart, { style: backStyle, color: color }) }) })), hideNavigationControls ? null : (jsx_runtime_1.jsx(ActionTooltip_1.ActionTooltip, { label: "Previous frame", shortcut: "\u2190", delay: 800, dismissOnClick: true, children: jsx_runtime_1.jsx(ControlButton_1.ControlButton, { "aria-label": "Go back 1 frame", "aria-keyshortcuts": "ArrowLeft", disabled: !videoConfig, onClick: oneFrameBack, children: (color) => jsx_runtime_1.jsx(step_back_1.StepBack, { style: forwardBackStyle, color: color }) }) })), jsx_runtime_1.jsx(ActionTooltip_1.ActionTooltip, { label: playing ? 'Pause' : 'Play', shortcut: playPauseShortcut, delay: 800, dismissOnClick: false, children: jsx_runtime_1.jsx(ControlButton_1.ControlButton, { "aria-label": playing ? 'Pause' : 'Play', "aria-keyshortcuts": playPauseAriaShortcut || undefined, onClick: playing ? pause : play, disabled: !videoConfig, children: (color) => playing ? (showBufferIndicator ? (jsx_runtime_1.jsx(player_1.PlayerInternals.BufferingIndicator, { type: "studio", color: color })) : (jsx_runtime_1.jsx(pause_1.Pause, { style: iconButton, color: color }))) : (jsx_runtime_1.jsx(play_1.Play, { style: iconButton, color: color })) }) }), hideNavigationControls ? null : (jsx_runtime_1.jsx(ActionTooltip_1.ActionTooltip, { label: "Next frame", shortcut: "\u2192", delay: 800, dismissOnClick: true, children: jsx_runtime_1.jsx(ControlButton_1.ControlButton, { "aria-label": "Go forward 1 frame", "aria-keyshortcuts": "ArrowRight", disabled: !videoConfig, onClick: oneFrameForward, children: (color) => jsx_runtime_1.jsx(step_forward_1.StepForward, { style: forwardBackStyle, color: color }) }) }))] }));
 };
 exports.PlayPause = react_1.default.memo(PlayPauseInner);

package/dist/components/PlaybackRateSelector.js

@@ -57,6 +57,6 @@ const PlaybackRateSelector = ({ playbackRate, setPlaybackRate, }) => {
     if (isStill || canvasContent === null) {
         return null;
     }
-    return (jsx_runtime_1.jsx(TimelineCombobox_1.TimelineCombobox, { title: accessibilityLabel, tooltipDelay: 800, labelWidth: 30, selectedId: selectedId, values: items, renderLeftItem: (color) => (jsx_runtime_1.jsx(playback_rate_1.PlaybackRateIcon, { color: color, playbackRate: playbackRate })), unhoveredIconColor: colors_1.WHITE_ALPHA_80 }));
+    return (jsx_runtime_1.jsx(TimelineCombobox_1.TimelineCombobox, { "aria-label": accessibilityLabel, tooltipDelay: 800, labelWidth: 30, selectedId: selectedId, values: items, renderLeftItem: (color) => (jsx_runtime_1.jsx(playback_rate_1.PlaybackRateIcon, { color: color, playbackRate: playbackRate })), unhoveredIconColor: colors_1.WHITE_ALPHA_80 }));
 };
 exports.PlaybackRateSelector = PlaybackRateSelector;

package/dist/components/PreviewToolbarOverflowButton.js

@@ -194,6 +194,6 @@ const PreviewToolbarOverflowButton = ({ showFullscreen, showPlaybackRate, showLo
     if (values.length === 0) {
         return null;
     }
-    return (jsx_runtime_1.jsx(ActionTooltip_1.ActionTooltip, { label: "View options", shortcut: null, delay: 800, dismissOnClick: true, children: jsx_runtime_1.jsx(InlineDropdown_1.InlineDropdown, { variant: null, renderAction: renderAction, values: values, title: "More actions", unhoveredColor: colors_1.WHITE_ALPHA_80 }) }));
+    return (jsx_runtime_1.jsx(ActionTooltip_1.ActionTooltip, { label: "View options", shortcut: null, delay: 800, dismissOnClick: true, children: jsx_runtime_1.jsx(InlineDropdown_1.InlineDropdown, { variant: null, renderAction: renderAction, values: values, "aria-label": "More actions", unhoveredColor: colors_1.WHITE_ALPHA_80 }) }));
 };
 exports.PreviewToolbarOverflowButton = PreviewToolbarOverflowButton;

package/dist/components/QuickSwitcher/ExplorerQuickSwitcherTrigger.js

@@ -65,7 +65,7 @@ const ExplorerQuickSwitcherTrigger = ({ mode, showShortcut, tabIndex, getActions
     return (jsx_runtime_1.jsxs("div", { style: quickSwitcherArea, children: [
             jsx_runtime_1.jsxs("button", { type: "button", style: quickSwitcherTrigger, onClick: openQuickSwitcher, tabIndex: tabIndex, className: `${hoverable_1.HOVERABLE_CLASS_NAME} ${hoverable_1.FOCUS_VISIBLE_ONLY_CLASS_NAME}`, children: ["Search...", showShortcut &&
                         !(0, use_keybinding_1.areKeyboardShortcutsDisabled)() &&
-                        quickSwitcherShortcut !== '' ? (jsx_runtime_1.jsx("span", { style: shortcutLabel, children: quickSwitcherShortcut })) : null] }), jsx_runtime_1.jsx(InlineDropdown_1.InlineDropdown, { variant: null, title: moreActionsTitle, renderAction: renderMoreActions, getItems: getActions, className: hoverable_1.FOCUS_VISIBLE_ONLY_CLASS_NAME })
+                        quickSwitcherShortcut !== '' ? (jsx_runtime_1.jsx("span", { style: shortcutLabel, children: quickSwitcherShortcut })) : null] }), jsx_runtime_1.jsx(InlineDropdown_1.InlineDropdown, { variant: null, "aria-label": moreActionsTitle, renderAction: renderMoreActions, getItems: getActions, className: hoverable_1.FOCUS_VISIBLE_ONLY_CLASS_NAME })
         ] }));
 };
 exports.ExplorerQuickSwitcherTrigger = ExplorerQuickSwitcherTrigger;

package/dist/components/RenderButton.js

@@ -379,7 +379,7 @@ const RenderButtonInner = ({ readOnlyStudio, size: controlSize = 'default', narr
     const segments = (0, react_1.useMemo)(() => {
         return [
             {
-                ariaLabel: renderLabel,
+                ariaLabel: showRenderLabel ? tooltip : renderLabel,
                 buttonId: 'render-modal-button',
                 disabled: false,
                 idleColor: colors_1.WHITE_ALPHA_80,
@@ -395,7 +395,6 @@ const RenderButtonInner = ({ readOnlyStudio, size: controlSize = 'default', narr
                 style: controlSize === 'compact'
                     ? compactMainSegmentStyle
                     : defaultMainSegmentStyle,
-                title: showRenderLabel ? tooltip : null,
                 tooltipLabel: showRenderLabel ? null : renderLabel,
                 type: 'action',
             },
@@ -412,7 +411,6 @@ const RenderButtonInner = ({ readOnlyStudio, size: controlSize = 'default', narr
                 style: controlSize === 'compact'
                     ? compactDropdownSegmentStyle
                     : defaultDropdownSegmentStyle,
-                title: 'Select render type',
                 tooltipLabel: null,
                 type: 'menu',
                 values: dropdownValues,
@@ -432,7 +430,7 @@ const RenderButtonInner = ({ readOnlyStudio, size: controlSize = 'default', narr
         return null;
     }
     return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
-            jsx_runtime_1.jsx("button", { style: { display: 'none' }, id: "render-modal-button-server", disabled: !canServerRender, onClick: () => openServerRenderModal(false), type: "button" }), ' ', jsx_runtime_1.jsx("button", { style: { display: 'none' }, id: "render-modal-button-client", onClick: openClientRenderModal, type: "button" }), jsx_runtime_1.jsx("button", { style: { display: 'none' }, id: "render-modal-button-command", onClick: () => openServerRenderModal(true), type: "button" }), jsx_runtime_1.jsx(SegmentedButton_1.SegmentedButton, { segments: segments, style: segmentedButtonStyle, title: showRenderLabel ? tooltip : null })
+            jsx_runtime_1.jsx("button", { style: { display: 'none' }, id: "render-modal-button-server", disabled: !canServerRender, onClick: () => openServerRenderModal(false), type: "button" }), ' ', jsx_runtime_1.jsx("button", { style: { display: 'none' }, id: "render-modal-button-client", onClick: openClientRenderModal, type: "button" }), jsx_runtime_1.jsx("button", { style: { display: 'none' }, id: "render-modal-button-command", onClick: () => openServerRenderModal(true), type: "button" }), jsx_runtime_1.jsx(SegmentedButton_1.SegmentedButton, { segments: segments, style: segmentedButtonStyle })
         ] }));
 };
 exports.RenderButton = react_1.default.memo(RenderButtonInner);

package/dist/components/RenderModal/InfoBubble.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 export declare const InfoBubble: React.FC<{
-    readonly title: string;
+    readonly 'aria-label': string;
     readonly children: React.ReactNode;
     readonly horizontalAlignment?: 'left' | 'right';
 }>;