@remotion/studio 4.0.526 → 4.0.528

package/dist/components/InspectorPanel/easing-inspector-selection.js

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.getEasingSelectionFromCurrentKeyframes = void 0;
 const get_timeline_keyframes_1 = require("../Timeline/get-timeline-keyframes");
-const getEasingSelectionFromCurrentKeyframes = ({ keyframeDisplayOffset, nodePathInfo, propStatus, segmentIndex, }) => {
+const getEasingSelectionFromCurrentKeyframes = ({ keyframeDisplayOffset, keyframePlaybackRate, nodePathInfo, propStatus, segmentIndex, }) => {
     const fromKeyframe = propStatus.keyframes[segmentIndex];
     const toKeyframe = propStatus.keyframes[segmentIndex + 1];
     if (!fromKeyframe || !toKeyframe) {
@@ -11,12 +11,13 @@ const getEasingSelectionFromCurrentKeyframes = ({ keyframeDisplayOffset, nodePat
     const resolvedKeyframeDisplayOffset = (0, get_timeline_keyframes_1.getKeyframeDisplayOffset)({
         propStatus,
         keyframeDisplayOffset,
+        keyframePlaybackRate,
     });
     return {
         type: 'easing',
         nodePathInfo,
-        fromFrame: fromKeyframe.frame + resolvedKeyframeDisplayOffset,
-        toFrame: toKeyframe.frame + resolvedKeyframeDisplayOffset,
+        fromFrame: fromKeyframe.frame / keyframePlaybackRate + resolvedKeyframeDisplayOffset,
+        toFrame: toKeyframe.frame / keyframePlaybackRate + resolvedKeyframeDisplayOffset,
         segmentIndex,
     };
 };

package/dist/components/InspectorPanel/keyframe-inspector-frame.d.ts

@@ -2,7 +2,8 @@ export declare const clampInspectorKeyframeDisplayFrame: ({ durationInFrames, fr
     readonly durationInFrames: number;
     readonly frame: number;
 }) => number;
-export declare const getInspectorKeyframeSourceFrame: ({ displayFrame, keyframeDisplayOffset, }: {
+export declare const getInspectorKeyframeSourceFrame: ({ displayFrame, keyframeDisplayOffset, keyframePlaybackRate, }: {
     readonly displayFrame: number;
     readonly keyframeDisplayOffset: number;
+    readonly keyframePlaybackRate: number;
 }) => number;

package/dist/components/InspectorPanel/keyframe-inspector-frame.js

@@ -8,7 +8,7 @@ const clampInspectorKeyframeDisplayFrame = ({ durationInFrames, frame, }) => {
     return Math.min(Math.max(Math.round(frame), 0), durationInFrames - 1);
 };
 exports.clampInspectorKeyframeDisplayFrame = clampInspectorKeyframeDisplayFrame;
-const getInspectorKeyframeSourceFrame = ({ displayFrame, keyframeDisplayOffset, }) => {
-    return displayFrame - keyframeDisplayOffset;
+const getInspectorKeyframeSourceFrame = ({ displayFrame, keyframeDisplayOffset, keyframePlaybackRate, }) => {
+    return (displayFrame - keyframeDisplayOffset) * keyframePlaybackRate;
 };
 exports.getInspectorKeyframeSourceFrame = getInspectorKeyframeSourceFrame;

package/dist/components/InspectorPanel/styles.js

@@ -40,6 +40,7 @@ exports.sectionHeader = {
     lineHeight: '24px',
     padding: `4px 0 4px ${InspectorPanelLayout_1.INSPECTOR_PANEL_HORIZONTAL_PADDING}px`,
     userSelect: 'none',
+    WebkitUserSelect: 'none',
 };
 exports.inspectorSectionBody = {
     display: 'flex',
@@ -144,6 +145,7 @@ exports.detailLabel = {
     overflow: 'hidden',
     textOverflow: 'ellipsis',
     userSelect: 'none',
+    WebkitUserSelect: 'none',
     whiteSpace: 'nowrap',
 };
 exports.detailValue = {

package/dist/components/InspectorPanel/use-composition-actions.js

@@ -59,6 +59,7 @@ const useCompositionActions = () => {
     const canInsertComposition = canShowInsertComposition && !isAddingComposition;
     const canShowGenerateWithAgent = previewInteractive &&
         !window.remotion_isReadOnlyStudio &&
+        browserStudioOperations === null &&
         currentCompositionId !== null;
     const insertSolid = (0, react_1.useCallback)(async () => {
         if (!canInsertSolid ||

package/dist/components/InspectorSequenceSection.d.ts

@@ -14,6 +14,7 @@ export declare const InspectorSequenceSection: React.FC<{
     readonly validatedLocation: CodePosition;
     readonly nodePathInfo: SequenceNodePathInfo;
     readonly keyframeDisplayOffset: number;
+    readonly keyframePlaybackRate: number;
     readonly renderTransformControls: () => React.ReactNode;
 }>;
 export {};

package/dist/components/InspectorSequenceSection.js

@@ -200,7 +200,7 @@ const hasSequenceControls = (sequence) => {
     return sequence.controls !== null;
 };
 exports.hasSequenceControls = hasSequenceControls;
-const InspectorSequenceSection = ({ sequence, readOnlyStudio, validatedLocation, nodePathInfo, keyframeDisplayOffset, renderTransformControls, }) => {
+const InspectorSequenceSection = ({ sequence, readOnlyStudio, validatedLocation, nodePathInfo, keyframeDisplayOffset, keyframePlaybackRate, renderTransformControls, }) => {
     var _a;
     var _b;
     const { tree, propStatuses, runtimeValues } = (0, use_timeline_expanded_tree_1.useTimelineExpandedTree)({
@@ -209,7 +209,7 @@ const InspectorSequenceSection = ({ sequence, readOnlyStudio, validatedLocation,
         includeTextContent: true,
         includeSourceControls: true,
     });
-    const { inspectorRevealRequest, selectedItems } = (0, TimelineSelection_1.useTimelineSelection)();
+    const { inspectorRevealRequest, selectedItems, selectItems } = (0, TimelineSelection_1.useTimelineSelection)();
     const selectedEffect = selectedItems.length === 1 &&
         (selectedItems[0].type === 'sequence-effect' ||
             selectedItems[0].type === 'sequence-effect-prop')
@@ -521,14 +521,16 @@ const InspectorSequenceSection = ({ sequence, readOnlyStudio, validatedLocation,
             type: 'add-effect',
             clientId: previewServerState.clientId,
             fileName: validatedLocation.source,
-            nodePath: nodePathInfo.sequenceSubscriptionKey,
+            nodePathInfo,
+            selectItems,
         });
     }, [
         canAddEffect,
-        nodePathInfo.sequenceSubscriptionKey,
+        nodePathInfo,
         previewServerState,
         setAdditionalSectionExpanded,
         setSelectedModal,
+        selectItems,
         validatedLocation.source,
     ]);
     const onConvertBorderRadius = (0, react_1.useCallback)(() => {
@@ -575,7 +577,7 @@ const InspectorSequenceSection = ({ sequence, readOnlyStudio, validatedLocation,
                 : 'Show 3D transform controls', hoveredColor: show3DTransformControls ? colors_1.BLUE : undefined, unhoveredColor: show3DTransformControls ? colors_1.BLUE : colors_1.LIGHT_TEXT, renderAction: (color) => (jsx_runtime_1.jsx(cube_1.CubeIcon, { color: color, style: transform3DToggleIcon })) }));
     const effectsHeader = (jsx_runtime_1.jsx(CollapsibleInspectorSectionHeader_1.CollapsibleInspectorSectionHeader, { action: jsx_runtime_1.jsx(InlineAction_1.InlineAction, { variant: null, disabled: !canAddEffect, onClick: onAddEffect, title: canAddEffect ? 'Add effect' : undefined, renderAction: (color) => jsx_runtime_1.jsx(plus_1.Plus, { color: color, style: plusIcon }) }), expanded: effectsExpanded, label: "Effects", onToggle: hasEffects ? () => toggleAdditionalSection('effects') : null }));
     const renderRow = ({ node, depth }) => {
-        return (jsx_runtime_1.jsx(TimelineRowLayoutContext_1.TimelineRowLayoutContext.Provider, { value: TimelineRowLayoutContext_1.INSPECTOR_TIMELINE_ROW_LAYOUT, children: jsx_runtime_1.jsx(TimelineExpandedRow_1.TimelineExpandedRow, { node: node, depth: depth, nestedDepth: 0, rowDepthBase: 0, getIsExpanded: getIsExpanded, toggleTrack: toggleTrack, validatedLocation: validatedLocation, nodePath: nodePathInfo.sequenceSubscriptionKey, schema: schema, keyframeDisplayOffset: keyframeDisplayOffset, keyframeControlsMode: "inspector" }) }, JSON.stringify(node.nodePathInfo)));
+        return (jsx_runtime_1.jsx(TimelineRowLayoutContext_1.TimelineRowLayoutContext.Provider, { value: TimelineRowLayoutContext_1.INSPECTOR_TIMELINE_ROW_LAYOUT, children: jsx_runtime_1.jsx(TimelineExpandedRow_1.TimelineExpandedRow, { node: node, depth: depth, nestedDepth: 0, rowDepthBase: 0, getIsExpanded: getIsExpanded, toggleTrack: toggleTrack, validatedLocation: validatedLocation, nodePath: nodePathInfo.sequenceSubscriptionKey, schema: schema, keyframeDisplayOffset: keyframeDisplayOffset, keyframePlaybackRate: keyframePlaybackRate, keyframeControlsMode: "inspector" }) }, JSON.stringify(node.nodePathInfo)));
     };
     const renderControlGroupHeader = (group) => {
         const expanded = isControlGroupExpanded(group);

package/dist/components/InspectorSourceLocation.js

@@ -28,11 +28,13 @@ const sourceLocationStyle = {
     textDecoration: 'none',
     textOverflow: 'ellipsis',
     userSelect: 'none',
+    WebkitUserSelect: 'none',
     whiteSpace: 'nowrap',
     width: 'fit-content',
 };
 const quickActionStyle = {
     userSelect: 'none',
+    WebkitUserSelect: 'none',
 };
 const sourceLocationLabelStyle = {
     color: 'inherit',
@@ -44,6 +46,7 @@ const sourceLocationLabelStyle = {
     overflow: 'hidden',
     textOverflow: 'ellipsis',
     userSelect: 'none',
+    WebkitUserSelect: 'none',
     whiteSpace: 'nowrap',
 };
 const InspectorSourceLocation = ({ location, canOpen, onOpen, renderIcon, size = 'default' }) => {

package/dist/components/KeyboardShortcutsSettings.js

@@ -125,7 +125,7 @@ const key = {
 };
 const chordButton = {
     alignItems: 'center',
-    background: 'transparent',
+    background: colors_1.TRANSPARENT,
     border: 0,
     cursor: 'pointer',
     display: 'flex',

package/dist/components/Menu/styles.d.ts

@@ -3,8 +3,8 @@ export declare const MENU_VERTICAL_PADDING = 4;
 export declare const SUBMENU_LEFT_INSET = -8;
 export declare const MAX_MENU_WIDTH = 400;
 export declare const MAX_MOBILE_MENU_WIDTH = 300;
-export declare const SHADOW_TOWARDS_BOTTOM = "0 2px 8px rgba(0, 0, 0, 0.5)";
-export declare const SHADOW_TOWARDS_TOP = "0 -2px 8px rgba(0, 0, 0, 0.5)";
+export declare const SHADOW_TOWARDS_BOTTOM = "0 2px 8px var(--remotion-studio-black-alpha-50)";
+export declare const SHADOW_TOWARDS_TOP = "0 -2px 8px var(--remotion-studio-black-alpha-50)";
 export declare const menuContainerTowardsBottom: React.CSSProperties;
 export declare const menuContainerTowardsTop: React.CSSProperties;
 export declare const fullScreenOverlay: React.CSSProperties;

package/dist/components/MenuBuildIndicator.js

@@ -15,6 +15,7 @@ const cwd = {
     alignItems: 'center',
     justifyContent: 'center',
     userSelect: 'none',
+    WebkitUserSelect: 'none',
     whiteSpace: 'nowrap',
 };
 const spinnerSize = 14;

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", { 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(ActionTooltip_1.ActionTooltip, { label: "Uninstall", shortcut: null, delay: 800, dismissOnClick: true, children: jsx_runtime_1.jsx(InlineAction_1.InlineAction, { "aria-label": `Remove ${model.name}`, title: "", 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}`, title: "", disabled: cachedModels === null || actionInProgress, onClick: () => downloadModel(model.name), renderAction: renderDownloadIcon, variant: null }) }))] }, model.name));
                     }) })
             ] }) }));
 };

package/dist/components/NewComposition/CancelButton.js

@@ -3,23 +3,29 @@ 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 320 512", ...props, children: jsx_runtime_1.jsx("path", { fill: colors_1.CURRENT_COLOR, d: "M207.6 256l107.72-107.72c6.23-6.23 6.23-16.34 0-22.58l-25.03-25.03c-6.23-6.23-16.34-6.23-22.58 0L160 208.4 52.28 100.68c-6.23-6.23-16.34-6.23-22.58 0L4.68 125.7c-6.23 6.23-6.23 16.34 0 22.58L112.4 256 4.68 363.72c-6.23 6.23-6.23 16.34 0 22.58l25.03 25.03c6.23 6.23 16.34 6.23 22.58 0L160 303.6l107.72 107.72c6.23 6.23 16.34 6.23 22.58 0l25.03-25.03c6.23-6.23 6.23-16.34 0-22.58L207.6 256z" }) }));
+    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" }) }));
 };
 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/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;
@@ -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,

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,

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

@@ -47,6 +47,10 @@ const PIXEL_GRID_MIN_SCALE = 4;
 const containerStyle = (options) => {
     return {
         transform: `scale(${options.scale})`,
+        // Keep the scaled composition on its own layer so the checkerboard does
+        // not bleed through its edges at fractional preview scales. Using
+        // 'transform' caches the rasterization scale and blurs content after zooming.
+        willChange: 'opacity',
         marginLeft: options.xCorrection,
         marginTop: options.yCorrection,
         width: options.width,

package/dist/components/QuickSwitcher/ExplorerQuickSwitcherTrigger.js

@@ -29,6 +29,7 @@ const quickSwitcherTrigger = {
     flex: 1,
     appearance: 'none',
     userSelect: 'none',
+    WebkitUserSelect: 'none',
     ...(0, hoverable_1.hoverableStyle)({
         idleBackground: colors_1.WHITE_ALPHA_06,
         hoverBackground: colors_1.WHITE_ALPHA_06,

package/dist/components/QuickSwitcher/QuickSwitcherContent.js

@@ -49,6 +49,7 @@ const modeItem = {
     fontSize: 13,
     cursor: 'pointer',
     userSelect: 'none',
+    WebkitUserSelect: 'none',
 };
 const modeInactive = {
     ...modeItem,

package/dist/components/RadioButton.js

@@ -29,6 +29,7 @@ const row = {
     padding: '4px 8px',
     textAlign: 'left',
     userSelect: 'none',
+    WebkitUserSelect: 'none',
     width: 'calc(100% + 16px)',
 };
 const circle = {