@remotion/cli 4.0.0-alpha.185 → 4.0.0-alpha.217

package/dist/ansi/ansi-split.d.ts

@@ -1 +1,2 @@
 export declare function splitAnsi(str: string): string[];
+export declare const stripAnsi: (str: string) => string;

package/dist/ansi/ansi-split.js

@@ -1,9 +1,15 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.splitAnsi = void 0;
-const ansi_regex_1 = require("./ansi-regex");
+exports.stripAnsi = exports.splitAnsi = void 0;
+const ansiRegex = () => {
+    const pattern = [
+        '[\\u001B\\u009B][[\\]()#;?]*(?:(?:(?:(?:;[-a-zA-Z\\d\\/#&.:=?%@~_]+)*|[a-zA-Z\\d]+(?:;[-a-zA-Z\\d\\/#&.:=?%@~_]*)*)?\\u0007)',
+        '(?:(?:\\d{1,4}(?:;\\d{0,4})*)?[\\dA-PR-TZcf-nq-uy=><~]))',
+    ].join('|');
+    return new RegExp(pattern, 'g');
+};
 function splitAnsi(str) {
-    const parts = str.match((0, ansi_regex_1.ansiRegex)());
+    const parts = str.match(ansiRegex());
     if (!parts)
         return [str];
     const result = [];
@@ -29,3 +35,10 @@ function splitAnsi(str) {
     return result;
 }
 exports.splitAnsi = splitAnsi;
+const stripAnsi = (str) => {
+    if (typeof str !== 'string') {
+        throw new TypeError(`Expected a \`string\`, got \`${typeof str}\``);
+    }
+    return str.replace(ansiRegex(), '');
+};
+exports.stripAnsi = stripAnsi;

package/dist/benchmark.js

@@ -114,6 +114,9 @@ const benchmarkCommand = async (remotionRoot, args) => {
         logLevel: config_1.ConfigInternals.Logging.getLogLevel(),
         bundlingStep: 0,
         steps: 1,
+        onDirectoryCreated: (dir) => {
+            (0, cleanup_before_quit_1.registerCleanupJob)(() => renderer_1.RenderInternals.deleteDirectory(dir));
+        },
     });
     (0, cleanup_before_quit_1.registerCleanupJob)(() => cleanupBundle());
     const puppeteerInstance = await browserInstance;

package/dist/color-math.d.ts

@@ -1 +1,2 @@
-export declare const colorWithNewOpacity: (color: string, opacity: number) => string;
+import type { ZodColorType } from './editor/components/get-zod-if-possible';
+export declare const colorWithNewOpacity: (color: string, opacity: number, zColor: ZodColorType) => string;

package/dist/color-math.js

@@ -1,9 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.colorWithNewOpacity = void 0;
-const remotion_1 = require("remotion");
-const colorWithNewOpacity = (color, opacity) => {
-    const { r, g, b } = remotion_1.Internals.parseColor(color);
+const colorWithNewOpacity = (color, opacity, zColor) => {
+    const { r, g, b } = zColor.ZColorInternals.parseColor(color);
     if (opacity >= 255) {
         return `#${r.toString(16)}${g.toString(16)}${b.toString(16)}`;
     }

package/dist/composition-prompts.d.ts

@@ -1,8 +1,7 @@
 import type { PromptObject } from 'prompts';
-import prompts from 'prompts';
-export declare type Question<V extends string = string> = PromptObject<V> & {
+declare type Question<V extends string = string> = PromptObject<V> & {
     optionsPerPage?: number;
 };
-export declare type NamelessQuestion = Omit<Question<'value'>, 'name'>;
-export default function prompt(questions: Question): Promise<prompts.Answers<string>>;
+declare type NamelessQuestion = Omit<Question<'value'>, 'name'>;
 export declare function selectAsync(question: NamelessQuestion): Promise<string | string[]>;
+export {};

package/dist/composition-prompts.js

@@ -14,7 +14,6 @@ function prompt(questions) {
         },
     });
 }
-exports.default = prompt;
 async function selectAsync(question) {
     const { value } = await prompt({
         ...question,

package/dist/compositions.js

@@ -36,6 +36,9 @@ const listCompositionsCommand = async (remotionRoot, args) => {
         logLevel: config_1.ConfigInternals.Logging.getLogLevel(),
         bundlingStep: 0,
         steps: 1,
+        onDirectoryCreated: (dir) => {
+            (0, cleanup_before_quit_1.registerCleanupJob)(() => renderer_1.RenderInternals.deleteDirectory(dir));
+        },
     });
     (0, cleanup_before_quit_1.registerCleanupJob)(() => cleanupBundle());
     const compositions = await (0, renderer_1.getCompositions)(bundled, {

package/dist/config/browser.d.ts

@@ -1,3 +1 @@
-import type { Browser } from '@remotion/renderer';
-export declare const setBrowser: (browser: Browser) => void;
-export declare const getBrowser: () => Browser | null;
+export declare const getBrowser: () => null;

package/dist/config/browser.js

@@ -1,17 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getBrowser = exports.setBrowser = void 0;
-let currentBrowser = null;
-const setBrowser = (browser) => {
-    if (browser === 'chrome') {
-        process.env.PUPPETEER_PRODUCT = 'chrome';
-    }
-    if (browser === 'firefox') {
-        process.env.PUPPETEER_PRODUCT = 'firefox';
-    }
-    currentBrowser = browser;
-};
-exports.setBrowser = setBrowser;
+exports.getBrowser = void 0;
+const currentBrowser = null;
 const getBrowser = () => {
     return currentBrowser;
 };

package/dist/config/index.d.ts

@@ -106,6 +106,11 @@ declare global {
          * Default: 'swangle' in Lambda, null elsewhere.
          */
         readonly setChromiumOpenGlRenderer: (renderer: 'swangle' | 'angle' | 'egl' | 'swiftshader') => void;
+        /**
+         * Set the user agent for Chrome. Only works during rendering.
+         * Default is the default user agent for Chrome
+         */
+        readonly setChromiumUserAgent: (userAgent: string | null) => void;
         /**
          * Set a custom location for a .env file.
          * Default: `.env`
@@ -120,10 +125,13 @@ declare global {
          * @deprecated Renamed to `setJpegQuality`.
          */
         readonly setQuality: (q: never) => void;
+        /**
+         * @deprecated Separated into `setStillImageFormat()` and `setVideoImageFormat()`.
+         */
+        readonly setImageFormat: (q: never) => void;
         /**
          * Set the JPEG quality for the frames.
          * Must be between 0 and 100.
-         * Must be between 0 and 100.
          * Default: 80
          */
         readonly setJpegQuality: (q: number | undefined) => void;
@@ -243,7 +251,7 @@ export type { Concurrency, WebpackConfiguration, WebpackOverrideFn };
 export declare const ConfigInternals: {
     getRange: () => FrameRange | null;
     getOutputCodecOrUndefined: () => CodecOrUndefined;
-    getBrowser: () => import("@remotion/renderer").Browser | null;
+    getBrowser: () => null;
     getPixelFormat: () => "yuv420p" | "yuva420p" | "yuv422p" | "yuv444p" | "yuv420p10le" | "yuv422p10le" | "yuv444p10le" | "yuva444p10le";
     getProResProfile: () => "4444-xq" | "4444" | "hq" | "standard" | "light" | "proxy" | undefined;
     getShouldOverwrite: ({ defaultValue, }: {
@@ -290,4 +298,5 @@ export declare const ConfigInternals: {
     getNumberOfGifLoops: () => Loop;
     getWebpackPolling: () => number | null;
     getShouldOpenBrowser: () => boolean;
+    getChromiumUserAgent: () => string | null;
 };

package/dist/config/index.js

@@ -78,6 +78,7 @@ const prores_profile_2 = require("./prores-profile");
 const public_dir_1 = require("./public-dir");
 const scale_2 = require("./scale");
 const timeout_2 = require("./timeout");
+const user_agent_1 = require("./user-agent");
 const webpack_caching_2 = require("./webpack-caching");
 const webpack_poll_1 = require("./webpack-poll");
 const width_1 = require("./width");
@@ -100,11 +101,15 @@ exports.Config = {
     setChromiumIgnoreCertificateErrors: chromium_flags_2.setChromiumIgnoreCertificateErrors,
     setChromiumHeadlessMode: chromium_flags_2.setChromiumHeadlessMode,
     setChromiumOpenGlRenderer: chromium_flags_2.setChromiumOpenGlRenderer,
+    setChromiumUserAgent: user_agent_1.setChromiumUserAgent,
     setDotEnvLocation: env_file_2.setDotEnvLocation,
     setConcurrency: concurrency_2.setConcurrency,
     setQuality: () => {
         throw new Error('setQuality() has been renamed - use setJpegQuality() instead.');
     },
+    setImageFormat: () => {
+        throw new Error('setImageFormat() has been renamed - use setVideoImageFormat() or setStillImageFormat() instead.');
+    },
     setJpegQuality: jpeg_quality_2.setJpegQuality,
     setStillImageFormat: image_format_1.setStillImageFormat,
     setVideoImageFormat: image_format_1.setVideoImageFormat,
@@ -126,7 +131,6 @@ exports.Config = {
     overrideHeight: height_1.overrideHeight,
     overrideWidth: width_1.overrideWidth,
     overrideFfmpegCommand: ffmpeg_override_1.setFfmpegOverrideFunction,
-    // Options added after migration
     setAudioCodec: audio_codec_1.setAudioCodec,
 };
 exports.ConfigInternals = {
@@ -177,4 +181,5 @@ exports.ConfigInternals = {
     getNumberOfGifLoops: number_of_gif_loops_1.getNumberOfGifLoops,
     getWebpackPolling: webpack_poll_1.getWebpackPolling,
     getShouldOpenBrowser: open_browser_1.getShouldOpenBrowser,
+    getChromiumUserAgent: user_agent_1.getChromiumUserAgent,
 };

package/dist/config/scale.d.ts

@@ -1,3 +1,4 @@
-export declare type Scale = number;
+declare type Scale = number;
 export declare const setScale: (newScale: Scale) => void;
 export declare const getScale: () => number;
+export {};

package/dist/config/user-agent.d.ts

@@ -0,0 +1,4 @@
+declare type UserAgent = string | null;
+export declare const setChromiumUserAgent: (newAgent: UserAgent) => void;
+export declare const getChromiumUserAgent: () => UserAgent;
+export {};

package/dist/config/user-agent.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getChromiumUserAgent = exports.setChromiumUserAgent = void 0;
+let userAgent = null;
+const setChromiumUserAgent = (newAgent) => {
+    userAgent = newAgent;
+};
+exports.setChromiumUserAgent = setChromiumUserAgent;
+const getChromiumUserAgent = () => {
+    return userAgent;
+};
+exports.getChromiumUserAgent = getChromiumUserAgent;

package/dist/download-progress.js

@@ -4,6 +4,7 @@ exports.makeMultiDownloadProgress = exports.getFileSizeDownloadBar = void 0;
 const format_bytes_1 = require("./format-bytes");
 const log_1 = require("./log");
 const make_progress_bar_1 = require("./make-progress-bar");
+const truthy_1 = require("./truthy");
 const getFileSizeDownloadBar = (downloaded) => {
     const desiredLength = (0, make_progress_bar_1.makeProgressBar)(0).length;
     return `[${(0, format_bytes_1.formatBytes)(downloaded).padEnd(desiredLength - 2, ' ')}]`;
@@ -25,7 +26,9 @@ const makeMultiDownloadProgress = (progresses, indent) => {
                 ? (0, make_progress_bar_1.makeProgressBar)(progress.progress)
                 : (0, exports.getFileSizeDownloadBar)(progress.downloaded),
             `Downloading ${truncatedFileName}`,
-        ].join(' ');
+        ]
+            .filter(truthy_1.truthy)
+            .join(' ');
     }
     const everyFileHasContentLength = progresses.every((p) => p.totalBytes !== null);
     return [
@@ -36,6 +39,8 @@ const makeMultiDownloadProgress = (progresses, indent) => {
                 progresses.length)
             : (0, exports.getFileSizeDownloadBar)(progresses.reduce((a, b) => a + b.downloaded, 0)),
         `Downloading ${progresses.length} files`,
-    ].join(' ');
+    ]
+        .filter(truthy_1.truthy)
+        .join(' ');
 };
 exports.makeMultiDownloadProgress = makeMultiDownloadProgress;

package/dist/editor/components/EditorContexts.js

@@ -9,6 +9,7 @@ const keybindings_1 = require("../state/keybindings");
 const preview_size_1 = require("../state/preview-size");
 const sidebar_1 = require("../state/sidebar");
 const CheckerboardProvider_1 = require("./CheckerboardProvider");
+const get_zod_if_possible_1 = require("./get-zod-if-possible");
 const MediaVolumeProvider_1 = require("./MediaVolumeProvider");
 const ModalsProvider_1 = require("./ModalsProvider");
 const PlayerEmitterContext_1 = require("./PlayerEmitterContext");
@@ -16,6 +17,6 @@ const context_1 = require("./RenderQueue/context");
 const SetTimelineInOutProvider_1 = require("./SetTimelineInOutProvider");
 const ZoomGesturesProvider_1 = require("./ZoomGesturesProvider");
 const EditorContexts = ({ children }) => {
-    return ((0, jsx_runtime_1.jsx)(client_id_1.PreviewServerConnection, { children: (0, jsx_runtime_1.jsx)(context_1.RenderQueueContextProvider, { children: (0, jsx_runtime_1.jsx)(keybindings_1.KeybindingContextProvider, { children: (0, jsx_runtime_1.jsx)(CheckerboardProvider_1.CheckerboardProvider, { children: (0, jsx_runtime_1.jsx)(ZoomGesturesProvider_1.ZoomGesturesProvider, { children: (0, jsx_runtime_1.jsx)(preview_size_1.PreviewSizeProvider, { children: (0, jsx_runtime_1.jsx)(ModalsProvider_1.ModalsProvider, { children: (0, jsx_runtime_1.jsx)(MediaVolumeProvider_1.MediaVolumeProvider, { children: (0, jsx_runtime_1.jsx)(PlayerEmitterContext_1.PlayerEmitterContext, { children: (0, jsx_runtime_1.jsx)(sidebar_1.SidebarContextProvider, { children: (0, jsx_runtime_1.jsx)(folders_1.FolderContextProvider, { children: (0, jsx_runtime_1.jsx)(highest_z_index_1.HighestZIndexProvider, { children: (0, jsx_runtime_1.jsx)(SetTimelineInOutProvider_1.SetTimelineInOutProvider, { children: children }) }) }) }) }) }) }) }) }) }) }) }) }));
+    return ((0, jsx_runtime_1.jsx)(get_zod_if_possible_1.ZodProvider, { children: (0, jsx_runtime_1.jsx)(client_id_1.PreviewServerConnection, { children: (0, jsx_runtime_1.jsx)(context_1.RenderQueueContextProvider, { children: (0, jsx_runtime_1.jsx)(keybindings_1.KeybindingContextProvider, { children: (0, jsx_runtime_1.jsx)(CheckerboardProvider_1.CheckerboardProvider, { children: (0, jsx_runtime_1.jsx)(ZoomGesturesProvider_1.ZoomGesturesProvider, { children: (0, jsx_runtime_1.jsx)(preview_size_1.PreviewSizeProvider, { children: (0, jsx_runtime_1.jsx)(ModalsProvider_1.ModalsProvider, { children: (0, jsx_runtime_1.jsx)(MediaVolumeProvider_1.MediaVolumeProvider, { children: (0, jsx_runtime_1.jsx)(PlayerEmitterContext_1.PlayerEmitterContext, { children: (0, jsx_runtime_1.jsx)(sidebar_1.SidebarContextProvider, { children: (0, jsx_runtime_1.jsx)(folders_1.FolderContextProvider, { children: (0, jsx_runtime_1.jsx)(highest_z_index_1.HighestZIndexProvider, { children: (0, jsx_runtime_1.jsx)(SetTimelineInOutProvider_1.SetTimelineInOutProvider, { children: children }) }) }) }) }) }) }) }) }) }) }) }) }) }));
 };
 exports.EditorContexts = EditorContexts;

package/dist/editor/components/Menu/MenuSubItem.d.ts

@@ -1,6 +1,5 @@
 import React from 'react';
 import type { SubMenu } from '../NewComposition/ComboBox';
-export declare const MENU_SUBMENU_BUTTON_CLASS_NAME = "remotion-submenu-button";
 export declare type SubMenuActivated = false | 'with-mouse' | 'without-mouse';
 export declare const MenuSubItem: React.FC<{
     label: React.ReactNode;

package/dist/editor/components/Menu/MenuSubItem.js

@@ -3,7 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.MenuSubItem = exports.MENU_SUBMENU_BUTTON_CLASS_NAME = void 0;
+exports.MenuSubItem = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const player_1 = require("@remotion/player");
 const react_1 = require("react");
@@ -24,7 +24,6 @@ const container = {
     paddingRight: 8,
     cursor: 'default',
 };
-exports.MENU_SUBMENU_BUTTON_CLASS_NAME = 'remotion-submenu-button';
 const labelStyle = {
     fontSize: 13,
     overflow: 'hidden',

package/dist/editor/components/ModalContainer.d.ts

@@ -1,4 +1,6 @@
 import React from 'react';
+export declare const getMaxModalWidth: (width: number) => string;
+export declare const getMaxModalHeight: (height: number) => string;
 export declare const ModalContainer: React.FC<{
     onEscape: () => void;
     onOutsideClick: () => void;

package/dist/editor/components/ModalContainer.js

@@ -1,9 +1,18 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ModalContainer = void 0;
+exports.ModalContainer = exports.getMaxModalHeight = exports.getMaxModalWidth = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const colors_1 = require("../helpers/colors");
 const z_index_1 = require("../state/z-index");
+const padding = 20;
+const getMaxModalWidth = (width) => {
+    return `min(calc(100vw - ${padding * 2}px), calc(${width}px - ${padding * 2}px))`;
+};
+exports.getMaxModalWidth = getMaxModalWidth;
+const getMaxModalHeight = (height) => {
+    return `min(calc(100vh - ${padding * 2}px), calc(${height}px - ${padding * 2}px))`;
+};
+exports.getMaxModalHeight = getMaxModalHeight;
 const backgroundOverlay = {
     backgroundColor: 'rgba(255, 255, 255, 0.2)',
     backdropFilter: `blur(1px)`,
@@ -11,13 +20,13 @@ const backgroundOverlay = {
     height: '100%',
     width: '100%',
     display: 'flex',
-    justifyContent: 'center',
-    alignItems: 'center',
+    padding,
 };
 const panel = {
     backgroundColor: colors_1.BACKGROUND,
     boxShadow: '0 0 4px black',
     color: 'white',
+    margin: 'auto',
 };
 const ModalContainer = ({ children, onEscape, onOutsideClick }) => {
     return ((0, jsx_runtime_1.jsx)("div", { className: "css-reset", style: backgroundOverlay, role: "dialog", "aria-modal": "true", children: (0, jsx_runtime_1.jsx)(z_index_1.HigherZIndex, { onOutsideClick: onOutsideClick, onEscape: onEscape, children: (0, jsx_runtime_1.jsx)("div", { style: panel, children: children }) }) }));

package/dist/editor/components/Modals.js

@@ -16,7 +16,7 @@ const UpdateModal_1 = require("./UpdateModal/UpdateModal");
 const Modals = () => {
     const { selectedModal: modalContextType } = (0, react_1.useContext)(modals_1.ModalsContext);
     const canRender = (0, react_1.useContext)(client_id_1.PreviewServerConnectionCtx).type === 'connected';
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [modalContextType && modalContextType.type === 'new-comp' && ((0, jsx_runtime_1.jsx)(NewComposition_1.default, { initialCompType: modalContextType.compType })), modalContextType && canRender && modalContextType.type === 'render' && ((0, jsx_runtime_1.jsx)(RenderModal_1.RenderModal, { initialFrame: modalContextType.initialFrame, compositionId: modalContextType.compositionId, initialVideoImageFormat: modalContextType.initialVideoImageFormat, initialJpegQuality: modalContextType.initialJpegQuality, initialOutName: modalContextType.initialOutName, initialScale: modalContextType.initialScale, initialVerbose: modalContextType.initialVerbose, initialRenderType: modalContextType.initialRenderType, initialVideoCodecForAudioTab: modalContextType.initialVideoCodecForAudioTab, initialVideoCodecForVideoTab: modalContextType.initialVideoCodecForVideoTab, initialConcurrency: modalContextType.initialConcurrency, maxConcurrency: modalContextType.maxConcurrency, minConcurrency: modalContextType.minConcurrency, initialStillImageFormat: modalContextType.initialStillImageFormat, initialMuted: modalContextType.initialMuted, initialEnforceAudioTrack: modalContextType.initialEnforceAudioTrack, initialProResProfile: modalContextType.initialProResProfile, initialPixelFormat: modalContextType.initialPixelFormat, initialAudioBitrate: modalContextType.initialAudioBitrate, initialVideoBitrate: modalContextType.initialVideoBitrate, initialEveryNthFrame: modalContextType.initialEveryNthFrame, initialNumberOfGifLoops: modalContextType.initialNumberOfGifLoops, initialDelayRenderTimeout: modalContextType.initialDelayRenderTimeout, initialAudioCodec: modalContextType.initialAudioCodec, initialEnvVariables: modalContextType.initialEnvVariables, initialDisableWebSecurity: modalContextType.initialDisableWebSecurity, initialGl: modalContextType.initialOpenGlRenderer, initialHeadless: modalContextType.initialHeadless, initialIgnoreCertificateErrors: modalContextType.initialIgnoreCertificateErrors })), modalContextType &&
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [modalContextType && modalContextType.type === 'new-comp' && ((0, jsx_runtime_1.jsx)(NewComposition_1.default, { initialCompType: modalContextType.compType })), modalContextType && canRender && modalContextType.type === 'render' && ((0, jsx_runtime_1.jsx)(RenderModal_1.RenderModal, { initialFrame: modalContextType.initialFrame, compositionId: modalContextType.compositionId, initialVideoImageFormat: modalContextType.initialVideoImageFormat, initialJpegQuality: modalContextType.initialJpegQuality, initialOutName: modalContextType.initialOutName, initialScale: modalContextType.initialScale, initialVerbose: modalContextType.initialVerbose, initialRenderType: modalContextType.initialRenderType, initialVideoCodecForAudioTab: modalContextType.initialVideoCodecForAudioTab, initialVideoCodecForVideoTab: modalContextType.initialVideoCodecForVideoTab, initialConcurrency: modalContextType.initialConcurrency, maxConcurrency: modalContextType.maxConcurrency, minConcurrency: modalContextType.minConcurrency, initialStillImageFormat: modalContextType.initialStillImageFormat, initialMuted: modalContextType.initialMuted, initialEnforceAudioTrack: modalContextType.initialEnforceAudioTrack, initialProResProfile: modalContextType.initialProResProfile, initialPixelFormat: modalContextType.initialPixelFormat, initialAudioBitrate: modalContextType.initialAudioBitrate, initialVideoBitrate: modalContextType.initialVideoBitrate, initialEveryNthFrame: modalContextType.initialEveryNthFrame, initialNumberOfGifLoops: modalContextType.initialNumberOfGifLoops, initialDelayRenderTimeout: modalContextType.initialDelayRenderTimeout, initialAudioCodec: modalContextType.initialAudioCodec, initialEnvVariables: modalContextType.initialEnvVariables, initialDisableWebSecurity: modalContextType.initialDisableWebSecurity, initialGl: modalContextType.initialOpenGlRenderer, initialHeadless: modalContextType.initialHeadless, initialIgnoreCertificateErrors: modalContextType.initialIgnoreCertificateErrors, defaultProps: modalContextType.defaultProps })), modalContextType &&
                 canRender &&
                 modalContextType.type === 'render-progress' && ((0, jsx_runtime_1.jsx)(RenderStatusModal_1.RenderStatusModal, { jobId: modalContextType.jobId })), modalContextType && modalContextType.type === 'update' && ((0, jsx_runtime_1.jsx)(UpdateModal_1.UpdateModal, { info: modalContextType.info })), modalContextType && modalContextType.type === 'quick-switcher' && ((0, jsx_runtime_1.jsx)(QuickSwitcher_1.default, { invocationTimestamp: modalContextType.invocationTimestamp, initialMode: modalContextType.mode }))] }));
 };

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

@@ -6,6 +6,7 @@ declare type Props = InputHTMLAttributes<HTMLInputElement> & {
     onTextChange: (newVal: string) => void;
     status: RemInputStatus;
     formatter?: (str: number | string) => string;
+    rightAlign: boolean;
 };
 export declare const InputDragger: React.FC<Props>;
 export {};

package/dist/editor/components/NewComposition/InputDragger.js

@@ -8,7 +8,7 @@ const noop_1 = require("../../helpers/noop");
 const input_dragger_click_lock_1 = require("../../state/input-dragger-click-lock");
 const z_index_1 = require("../../state/z-index");
 const RemInput_1 = require("./RemInput");
-const InputDragger = ({ onValueChange, min: _min, max: _max, step: _step, value, onTextChange, formatter = (q) => String(q), status, ...props }) => {
+const InputDragger = ({ onValueChange, min: _min, max: _max, step: _step, value, onTextChange, formatter = (q) => String(q), status, rightAlign, ...props }) => {
     const [inputFallback, setInputFallback] = (0, react_1.useState)(false);
     const fallbackRef = (0, react_1.useRef)(null);
     const style = (0, react_1.useMemo)(() => {
@@ -99,7 +99,7 @@ const InputDragger = ({ onValueChange, min: _min, max: _max, step: _step, value,
         }
     }, [inputFallback]);
     if (inputFallback) {
-        return ((0, jsx_runtime_1.jsx)(z_index_1.HigherZIndex, { onEscape: onEscape, onOutsideClick: noop_1.noop, children: (0, jsx_runtime_1.jsx)(RemInput_1.RemotionInput, { ref: fallbackRef, autoFocus: true, onKeyPress: onKeyPress, onBlur: onBlur, min: _min, step: _step, defaultValue: value, status: status, pattern: '[0-9]*[.]?[0-9]*', ...props }) }));
+        return ((0, jsx_runtime_1.jsx)(z_index_1.HigherZIndex, { onEscape: onEscape, onOutsideClick: noop_1.noop, children: (0, jsx_runtime_1.jsx)(RemInput_1.RemotionInput, { ref: fallbackRef, autoFocus: true, onKeyPress: onKeyPress, onBlur: onBlur, min: _min, step: _step, defaultValue: value, status: status, pattern: '[0-9]*[.]?[0-9]*', rightAlign: rightAlign, ...props }) }));
     }
     return ((0, jsx_runtime_1.jsx)("button", { type: "button", style: style, onClick: onClick, onPointerDown: onPointerDown, children: (0, jsx_runtime_1.jsx)("span", { style: span, children: formatter(value) }) }));
 };

package/dist/editor/components/NewComposition/NewCompDuration.js

@@ -18,6 +18,6 @@ const NewCompDuration = ({ durationInFrames, setDurationInFrames, fps }) => {
     const compDurationErrMessage = (0, validate_new_comp_data_1.validateCompositionDuration)(durationInFrames);
     return ((0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)("label", { children: (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: new_comp_layout_1.leftLabel, children: " Duration in frames" }), (0, jsx_runtime_1.jsxs)("div", { style: new_comp_layout_1.inputArea, children: [(0, jsx_runtime_1.jsx)(InputDragger_1.InputDragger, { type: "number", value: durationInFrames, onTextChange: onDurationInFramesChanged, placeholder: "Duration (frames)", name: "durationInFrames", min: 1, step: 1, required: true, status: "ok", 
                                 // Hitting Promise.all() limit in Chrome
-                                max: 300000, onValueChange: onDurationChangedDirectly }), compDurationErrMessage ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 1, block: true }), (0, jsx_runtime_1.jsx)(ValidationMessage_1.ValidationMessage, { align: "flex-start", message: compDurationErrMessage, type: "error" })] })) : null] }), (0, jsx_runtime_1.jsxs)("span", { style: new_comp_layout_1.rightLabel, children: [(Number(durationInFrames) / Number(fps)).toFixed(2), "sec"] })] }) }) }));
+                                max: 300000, onValueChange: onDurationChangedDirectly, rightAlign: false }), compDurationErrMessage ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 1, block: true }), (0, jsx_runtime_1.jsx)(ValidationMessage_1.ValidationMessage, { align: "flex-start", message: compDurationErrMessage, type: "error" })] })) : null] }), (0, jsx_runtime_1.jsxs)("span", { style: new_comp_layout_1.rightLabel, children: [(Number(durationInFrames) / Number(fps)).toFixed(2), "sec"] })] }) }) }));
 };
 exports.NewCompDuration = NewCompDuration;

package/dist/editor/components/NewComposition/NewComposition.js

@@ -28,12 +28,12 @@ const left = {
     fontSize: 13,
 };
 const panelRight = {
-    width: 400,
     backgroundColor: 'black',
     display: 'flex',
     justifyContent: 'center',
     alignItems: 'center',
     position: 'relative',
+    width: 400,
 };
 const pre = {
     fontSize: 17,
@@ -67,8 +67,11 @@ const NewComposition = (props) => {
         return {
             flexDirection: 'row',
             display: 'flex',
-            width: 950,
-            height: type === 'composition' ? 450 : 300,
+            width: (0, ModalContainer_1.getMaxModalWidth)(950),
+            height: type === 'composition'
+                ? (0, ModalContainer_1.getMaxModalHeight)(490)
+                : (0, ModalContainer_1.getMaxModalHeight)(340),
+            overflow: 'hidden',
         };
     }, [type]);
     const [lockedAspectRatio, setLockedAspectRatio] = (0, react_1.useState)((0, aspect_ratio_locked_1.loadAspectRatioOption)() ? Number(size.width) / Number(size.height) : null);
@@ -180,7 +183,7 @@ const NewComposition = (props) => {
             },
         ];
     }, [onTypeChanged]);
-    return ((0, jsx_runtime_1.jsxs)(ModalContainer_1.ModalContainer, { onOutsideClick: onQuit, onEscape: onQuit, children: [(0, jsx_runtime_1.jsx)(ModalHeader_1.NewCompHeader, { title: "New composition" }), (0, jsx_runtime_1.jsxs)("div", { style: panelContent, children: [(0, jsx_runtime_1.jsxs)("div", { style: left, children: [(0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 3 }), (0, jsx_runtime_1.jsxs)("form", { children: [(0, jsx_runtime_1.jsxs)("label", { children: [(0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: new_comp_layout_1.leftLabel, children: "Type" }), (0, jsx_runtime_1.jsx)("div", { style: new_comp_layout_1.inputArea, children: (0, jsx_runtime_1.jsx)(ComboBox_1.Combobox, { title: "Type of composition", style: comboBoxStyle, values: typeValues, selectedId: type }) })] }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 1 }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: new_comp_layout_1.leftLabel, children: "Name" }), (0, jsx_runtime_1.jsxs)("div", { style: new_comp_layout_1.inputArea, children: [(0, jsx_runtime_1.jsx)(RemInput_1.RemotionInput, { value: name, onChange: onNameChange, type: "text", placeholder: "Composition name", status: "ok" }), compNameErrMessage ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 1, block: true }), (0, jsx_runtime_1.jsx)(ValidationMessage_1.ValidationMessage, { align: "flex-start", message: compNameErrMessage, type: "error" })] })) : null] })] })] }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 1 }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)("label", { children: (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: new_comp_layout_1.leftLabel, children: "Width" }), (0, jsx_runtime_1.jsxs)("div", { style: new_comp_layout_1.inputArea, children: [(0, jsx_runtime_1.jsx)(InputDragger_1.InputDragger, { type: "number", value: size.width, placeholder: "Width", onTextChange: onWidthChanged, name: "width", step: 2, min: 2, required: true, status: "ok", formatter: (w) => `${w}px`, max: 100000000, onValueChange: onWidthDirectlyChanged }), compWidthErrMessage ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 1, block: true }), (0, jsx_runtime_1.jsx)(ValidationMessage_1.ValidationMessage, { align: "flex-start", message: compWidthErrMessage, type: "error" })] })) : null] })] }) }) }), (0, jsx_runtime_1.jsx)("div", {}), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 1 }), (0, jsx_runtime_1.jsx)("div", {}), (0, jsx_runtime_1.jsx)("label", { children: (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: new_comp_layout_1.leftLabel, children: "Height" }), (0, jsx_runtime_1.jsxs)("div", { style: new_comp_layout_1.inputArea, children: [(0, jsx_runtime_1.jsx)(InputDragger_1.InputDragger, { type: "number", value: size.height, onTextChange: onHeightChanged, placeholder: "Height", name: "height", step: 2, required: true, formatter: (h) => `${h}px`, min: 2, status: "ok", max: 100000000, onValueChange: onHeightDirectlyChanged }), compHeightErrMessage ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 1, block: true }), (0, jsx_runtime_1.jsx)(ValidationMessage_1.ValidationMessage, { align: "flex-start", message: compHeightErrMessage, type: "error" })] })) : null] })] }) })] }), (0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(NewCompAspectRatio_1.NewCompAspectRatio, { width: Number(size.width), height: Number(size.height), aspectRatioLocked: lockedAspectRatio, setAspectRatioLocked: setAspectRatioLocked }) })] }), (0, jsx_runtime_1.jsx)("div", {}), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 1 }), type === 'composition' ? ((0, jsx_runtime_1.jsx)(NewCompDuration_1.NewCompDuration, { durationInFrames: durationInFrames, fps: selectedFrameRate, setDurationInFrames: setDurationInFrames })) : null, (0, jsx_runtime_1.jsx)("div", {}), (0, jsx_runtime_1.jsx)("br", {}), (0, jsx_runtime_1.jsx)("div", {}), type === 'composition' ? ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("div", {}), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 1 }), (0, jsx_runtime_1.jsxs)("label", { children: [(0, jsx_runtime_1.jsx)("div", { style: new_comp_layout_1.leftLabel, children: "Framerate" }), (0, jsx_runtime_1.jsx)(ComboBox_1.Combobox, { title: "Framerate", style: comboBoxStyle, values: items, selectedId: selectedFrameRate })] })] })) : null] })] }), (0, jsx_runtime_1.jsxs)("div", { style: panelRight, children: [(0, jsx_runtime_1.jsx)("pre", { style: pre, children: (0, NewCompCode_1.getNewCompositionCode)({
+    return ((0, jsx_runtime_1.jsxs)(ModalContainer_1.ModalContainer, { onOutsideClick: onQuit, onEscape: onQuit, children: [(0, jsx_runtime_1.jsx)(ModalHeader_1.NewCompHeader, { title: "New composition" }), (0, jsx_runtime_1.jsxs)("div", { style: panelContent, children: [(0, jsx_runtime_1.jsxs)("div", { style: left, children: [(0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 3 }), (0, jsx_runtime_1.jsxs)("form", { children: [(0, jsx_runtime_1.jsxs)("label", { children: [(0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: new_comp_layout_1.leftLabel, children: "Type" }), (0, jsx_runtime_1.jsx)("div", { style: new_comp_layout_1.inputArea, children: (0, jsx_runtime_1.jsx)(ComboBox_1.Combobox, { title: "Type of composition", style: comboBoxStyle, values: typeValues, selectedId: type }) })] }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 1 }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: new_comp_layout_1.leftLabel, children: "Name" }), (0, jsx_runtime_1.jsxs)("div", { style: new_comp_layout_1.inputArea, children: [(0, jsx_runtime_1.jsx)(RemInput_1.RemotionInput, { value: name, onChange: onNameChange, type: "text", placeholder: "Composition name", status: "ok", rightAlign: false }), compNameErrMessage ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 1, block: true }), (0, jsx_runtime_1.jsx)(ValidationMessage_1.ValidationMessage, { align: "flex-start", message: compNameErrMessage, type: "error" })] })) : null] })] })] }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 1 }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)("label", { children: (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: new_comp_layout_1.leftLabel, children: "Width" }), (0, jsx_runtime_1.jsxs)("div", { style: new_comp_layout_1.inputArea, children: [(0, jsx_runtime_1.jsx)(InputDragger_1.InputDragger, { type: "number", value: size.width, placeholder: "Width", onTextChange: onWidthChanged, name: "width", step: 2, min: 2, required: true, status: "ok", formatter: (w) => `${w}px`, max: 100000000, onValueChange: onWidthDirectlyChanged, rightAlign: false }), compWidthErrMessage ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 1, block: true }), (0, jsx_runtime_1.jsx)(ValidationMessage_1.ValidationMessage, { align: "flex-start", message: compWidthErrMessage, type: "error" })] })) : null] })] }) }) }), (0, jsx_runtime_1.jsx)("div", {}), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 1 }), (0, jsx_runtime_1.jsx)("div", {}), (0, jsx_runtime_1.jsx)("label", { children: (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: new_comp_layout_1.leftLabel, children: "Height" }), (0, jsx_runtime_1.jsxs)("div", { style: new_comp_layout_1.inputArea, children: [(0, jsx_runtime_1.jsx)(InputDragger_1.InputDragger, { type: "number", value: size.height, onTextChange: onHeightChanged, placeholder: "Height", name: "height", step: 2, required: true, formatter: (h) => `${h}px`, min: 2, status: "ok", max: 100000000, onValueChange: onHeightDirectlyChanged, rightAlign: false }), compHeightErrMessage ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 1, block: true }), (0, jsx_runtime_1.jsx)(ValidationMessage_1.ValidationMessage, { align: "flex-start", message: compHeightErrMessage, type: "error" })] })) : null] })] }) })] }), (0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(NewCompAspectRatio_1.NewCompAspectRatio, { width: Number(size.width), height: Number(size.height), aspectRatioLocked: lockedAspectRatio, setAspectRatioLocked: setAspectRatioLocked }) })] }), (0, jsx_runtime_1.jsx)("div", {}), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 1 }), type === 'composition' ? ((0, jsx_runtime_1.jsx)(NewCompDuration_1.NewCompDuration, { durationInFrames: durationInFrames, fps: selectedFrameRate, setDurationInFrames: setDurationInFrames })) : null, (0, jsx_runtime_1.jsx)("div", {}), (0, jsx_runtime_1.jsx)("br", {}), (0, jsx_runtime_1.jsx)("div", {}), type === 'composition' ? ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("div", {}), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 1 }), (0, jsx_runtime_1.jsxs)("label", { children: [(0, jsx_runtime_1.jsx)("div", { style: new_comp_layout_1.leftLabel, children: "Framerate" }), (0, jsx_runtime_1.jsx)(ComboBox_1.Combobox, { title: "Framerate", style: comboBoxStyle, values: items, selectedId: selectedFrameRate })] })] })) : null] })] }), (0, jsx_runtime_1.jsxs)("div", { style: panelRight, children: [(0, jsx_runtime_1.jsx)("pre", { style: pre, children: (0, NewCompCode_1.getNewCompositionCode)({
                                     type,
                                     durationInFrames: Number(durationInFrames),
                                     fps: Number(selectedFrameRate),
@@ -196,6 +199,6 @@ const NewComposition = (props) => {
                                             width: Number(size.width),
                                             name,
                                             raw: true,
-                                        }) })] })] })] })] }));
+                                        }) })] })] }), ' '] })] }));
 };
 exports.default = NewComposition;

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

@@ -3,6 +3,7 @@ import React from 'react';
 export declare type RemInputStatus = 'error' | 'warning' | 'ok';
 declare type Props = React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement> & {
     status: RemInputStatus;
+    rightAlign: boolean;
 };
 export declare const INPUT_HORIZONTAL_PADDING = 8;
 export declare const RightAlignInput: React.FC<PropsWithChildren>;
@@ -12,5 +13,5 @@ export declare const getInputBorderColor: ({ status, isFocused, isHovered, }: {
     isFocused: boolean;
     isHovered: boolean;
 }) => "hsla(0, 0%, 100%, 0.15)" | "rgba(0, 0, 0, 0.6)" | "rgba(255, 255, 255, 0.05)" | "#ff3232" | "#f1c40f";
-export declare const RemotionInput: React.ForwardRefExoticComponent<Pick<Props, "key" | "status" | keyof React.InputHTMLAttributes<HTMLInputElement>> & React.RefAttributes<HTMLInputElement>>;
+export declare const RemotionInput: React.ForwardRefExoticComponent<Pick<Props, "key" | "status" | "rightAlign" | keyof React.InputHTMLAttributes<HTMLInputElement>> & React.RefAttributes<HTMLInputElement>>;
 export {};

package/dist/editor/components/NewComposition/RemInput.js

@@ -30,7 +30,7 @@ const getInputBorderColor = ({ status, isFocused, isHovered, }) => status === 'w
                 ? colors_1.INPUT_BORDER_COLOR_HOVERED
                 : colors_1.INPUT_BORDER_COLOR_UNHOVERED;
 exports.getInputBorderColor = getInputBorderColor;
-const RemInputForwardRef = ({ status, ...props }, ref) => {
+const RemInputForwardRef = ({ status, rightAlign, ...props }, ref) => {
     const [isFocused, setIsFocused] = (0, react_1.useState)(false);
     const [isHovered, setIsHovered] = (0, react_1.useState)(false);
     const inputRef = (0, react_1.useRef)(null);
@@ -42,9 +42,10 @@ const RemInputForwardRef = ({ status, ...props }, ref) => {
             ...exports.inputBaseStyle,
             width: '100%',
             borderColor: (0, exports.getInputBorderColor)({ isFocused, isHovered, status }),
+            textAlign: rightAlign ? 'right' : 'left',
             ...((_a = props.style) !== null && _a !== void 0 ? _a : {}),
         };
-    }, [isFocused, isHovered, props.style, status]);
+    }, [isFocused, isHovered, rightAlign, props.style, status]);
     (0, react_1.useImperativeHandle)(ref, () => {
         return inputRef.current;
     }, []);

package/dist/editor/components/NewComposition/RemInputTypeColor.d.ts

@@ -3,6 +3,5 @@ import type { RemInputStatus } from './RemInput';
 declare type Props = React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement> & {
     status: RemInputStatus;
 };
-export declare const inputBaseStyle: React.CSSProperties;
 export declare const RemInputTypeColor: React.ForwardRefExoticComponent<Pick<Props, "key" | "status" | keyof React.InputHTMLAttributes<HTMLInputElement>> & React.RefAttributes<HTMLInputElement>>;
 export {};

package/dist/editor/components/NewComposition/RemInputTypeColor.js

@@ -1,12 +1,12 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.RemInputTypeColor = exports.inputBaseStyle = void 0;
+exports.RemInputTypeColor = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const colors_1 = require("../../helpers/colors");
 const z_index_1 = require("../../state/z-index");
 const RemInput_1 = require("./RemInput");
-exports.inputBaseStyle = {
+const inputBaseStyle = {
     padding: 0,
     borderStyle: 'solid',
     borderWidth: 1,
@@ -20,7 +20,7 @@ const RemInputTypeColorForwardRef = ({ status, ...props }, ref) => {
         var _a;
         return {
             backgroundColor: colors_1.INPUT_BACKGROUND,
-            ...exports.inputBaseStyle,
+            ...inputBaseStyle,
             borderColor: (0, RemInput_1.getInputBorderColor)({ isFocused, isHovered, status }),
             ...((_a = props.style) !== null && _a !== void 0 ? _a : {}),
         };

package/dist/editor/components/NewComposition/ValidationMessage.js

@@ -9,8 +9,8 @@ const WarningTriangle = (props) => {
     return ((0, jsx_runtime_1.jsx)("svg", { viewBox: "0 0 576 512", ...props, children: (0, jsx_runtime_1.jsx)("path", { d: "M248.747 204.705l6.588 112c.373 6.343 5.626 11.295 11.979 11.295h41.37a12 12 0 0 0 11.979-11.295l6.588-112c.405-6.893-5.075-12.705-11.979-12.705h-54.547c-6.903 0-12.383 5.812-11.978 12.705zM330 384c0 23.196-18.804 42-42 42s-42-18.804-42-42 18.804-42 42-42 42 18.804 42 42zm-.423-360.015c-18.433-31.951-64.687-32.009-83.154 0L6.477 440.013C-11.945 471.946 11.118 512 48.054 512H527.94c36.865 0 60.035-39.993 41.577-71.987L329.577 23.985zM53.191 455.002L282.803 57.008c2.309-4.002 8.085-4.002 10.394 0l229.612 397.993c2.308 4-.579 8.998-5.197 8.998H58.388c-4.617.001-7.504-4.997-5.197-8.997z" }) }));
 };
 const style = {
-    width: 11,
-    height: 11,
+    width: 12,
+    height: 12,
     flexShrink: 0,
 };
 const container = {

package/dist/editor/components/Notifications/ServerDisconnected.d.ts

@@ -1,6 +1,2 @@
 import React from 'react';
-export declare const serverDisconnectedRef: React.RefObject<{
-    setServerDisconnected: () => void;
-    setServerConnected: () => void;
-}>;
 export declare const ServerDisconnected: React.FC;

package/dist/editor/components/Notifications/ServerDisconnected.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ServerDisconnected = exports.serverDisconnectedRef = void 0;
+exports.ServerDisconnected = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const client_id_1 = require("../../helpers/client-id");
@@ -32,7 +32,6 @@ const inlineCode = {
     fontSize: 16,
     fontFamily: 'monospace',
 };
-exports.serverDisconnectedRef = (0, react_1.createRef)();
 let pageIsGoingToReload = false;
 window.addEventListener('beforeunload', () => {
     pageIsGoingToReload = true;

package/dist/editor/components/PlaybackRateSelector.d.ts

@@ -1,6 +1,4 @@
 import React from 'react';
-export declare const commonPlaybackRates: number[];
-export declare const getPlaybackRateLabel: (playbackRate: number) => string;
 export declare const PlaybackRateSelector: React.FC<{
     playbackRate: number;
     setPlaybackRate: React.Dispatch<React.SetStateAction<number>>;