@remotion/cli 4.1.0-alpha10 → 4.1.0-alpha12

package/dist/editor/components/RenderModal/RenderModalJSONPropsEditor.js

@@ -29,6 +29,7 @@ const react_1 = __importStar(require("react"));
 const remotion_1 = require("remotion");
 const Button_1 = require("../../../preview-server/error-overlay/remotion-overlay/Button");
 const colors_1 = require("../../helpers/colors");
+const document_title_1 = require("../../helpers/document-title");
 const use_keybinding_1 = require("../../helpers/use-keybinding");
 const layout_1 = require("../layout");
 const RemTextarea_1 = require("../NewComposition/RemTextarea");
@@ -95,6 +96,9 @@ const RenderModalJSONPropsEditor = ({ setValue, value, defaultProps, onSave, sho
     const hasChanged = (0, react_1.useMemo)(() => {
         return !(0, deep_equal_1.deepEqual)(value, defaultProps);
     }, [defaultProps, value]);
+    (0, react_1.useEffect)(() => {
+        (0, document_title_1.setUnsavedProps)(hasChanged);
+    }, [hasChanged]);
     const onQuickSave = (0, react_1.useCallback)(() => {
         if (hasChanged) {
             onSave();

package/dist/editor/components/RenderModal/SchemaEditor/SchemaEditor.js

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.SchemaEditor = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
+const document_title_1 = require("../../../helpers/document-title");
 const use_keybinding_1 = require("../../../helpers/use-keybinding");
 const get_zod_if_possible_1 = require("../../get-zod-if-possible");
 const is_menu_item_1 = require("../../Menu/is-menu-item");
@@ -23,6 +24,9 @@ const SchemaEditor = ({ schema, value, setValue, zodValidationResult, defaultPro
     const hasChanged = (0, react_1.useMemo)(() => {
         return !(0, deep_equal_1.deepEqual)(defaultProps, value);
     }, [defaultProps, value]);
+    (0, react_1.useEffect)(() => {
+        (0, document_title_1.setUnsavedProps)(hasChanged);
+    }, [hasChanged]);
     const onQuickSave = (0, react_1.useCallback)(() => {
         if (hasChanged && showSaveButton) {
             onSave(() => {
@@ -59,6 +63,6 @@ const SchemaEditor = ({ schema, value, setValue, zodValidationResult, defaultPro
     if (typeName !== z.ZodFirstPartyTypeKind.ZodObject) {
         return (0, jsx_runtime_1.jsx)(SchemaErrorMessages_1.TopLevelZodValue, { typeReceived: typeName });
     }
-    return ((0, jsx_runtime_1.jsx)("div", { style: scrollable, className: is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME, children: (0, jsx_runtime_1.jsx)(ZodObjectEditor_1.ZodObjectEditor, { value: value, setValue: setValue, jsonPath: [], schema: schema, defaultValue: defaultProps, onSave: onSave, showSaveButton: showSaveButton, onRemove: null, saving: saving, saveDisabledByParent: saveDisabledByParent, mayPad: true }) }));
+    return ((0, jsx_runtime_1.jsx)("div", { style: scrollable, className: is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME, children: (0, jsx_runtime_1.jsx)(ZodObjectEditor_1.ZodObjectEditor, { discriminatedUnionReplacement: null, value: value, setValue: setValue, jsonPath: [], schema: schema, defaultValue: defaultProps, onSave: onSave, showSaveButton: showSaveButton, onRemove: null, saving: saving, saveDisabledByParent: saveDisabledByParent, mayPad: true }) }));
 };
 exports.SchemaEditor = SchemaEditor;

package/dist/editor/components/RenderModal/SchemaEditor/ZodDiscriminatedUnionEditor.d.ts

@@ -0,0 +1,17 @@
+/// <reference types="react" />
+import type { z } from 'zod';
+import type { JSONPath } from './zod-types';
+import type { UpdaterFunction } from './ZodSwitch';
+export declare const ZodDiscriminatedUnionEditor: React.FC<{
+    schema: z.ZodTypeAny;
+    setValue: UpdaterFunction<Record<string, unknown>>;
+    value: Record<string, unknown>;
+    defaultValue: Record<string, unknown>;
+    mayPad: boolean;
+    jsonPath: JSONPath;
+    onRemove: null | (() => void);
+    onSave: UpdaterFunction<unknown>;
+    showSaveButton: boolean;
+    saving: boolean;
+    saveDisabledByParent: boolean;
+}>;

package/dist/editor/components/RenderModal/SchemaEditor/ZodDiscriminatedUnionEditor.js

@@ -0,0 +1,83 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ZodDiscriminatedUnionEditor = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const Checkmark_1 = require("../../../icons/Checkmark");
+const get_zod_if_possible_1 = require("../../get-zod-if-possible");
+const ComboBox_1 = require("../../NewComposition/ComboBox");
+const create_zod_values_1 = require("./create-zod-values");
+const Fieldset_1 = require("./Fieldset");
+const local_state_1 = require("./local-state");
+const SchemaLabel_1 = require("./SchemaLabel");
+const ZodObjectEditor_1 = require("./ZodObjectEditor");
+const ZodDiscriminatedUnionEditor = ({ schema, setValue, showSaveButton, saving, value, defaultValue, saveDisabledByParent, onSave, mayPad, jsonPath, onRemove, }) => {
+    const z = (0, get_zod_if_possible_1.useZodIfPossible)();
+    if (!z) {
+        throw new Error('expected zod');
+    }
+    const zodTypes = (0, get_zod_if_possible_1.useZodTypesIfPossible)();
+    const typedSchema = schema._def;
+    const options = (0, react_1.useMemo)(() => [...typedSchema.optionsMap.keys()], [typedSchema.optionsMap]);
+    const { localValue, onChange: setLocalValue, reset, } = (0, local_state_1.useLocalState)({
+        schema,
+        setValue,
+        value,
+        defaultValue,
+    });
+    const comboBoxValues = (0, react_1.useMemo)(() => {
+        return options.map((option) => {
+            return {
+                value: option,
+                label: option,
+                id: option,
+                keyHint: null,
+                leftItem: option === value[typedSchema.discriminator] ? (0, jsx_runtime_1.jsx)(Checkmark_1.Checkmark, {}) : null,
+                onClick: () => {
+                    const val = (0, create_zod_values_1.createZodValues)(typedSchema.optionsMap.get(option), z, zodTypes);
+                    setLocalValue(() => val, false, false);
+                },
+                quickSwitcherLabel: null,
+                subMenu: null,
+                type: 'item',
+            };
+        });
+    }, [
+        options,
+        setLocalValue,
+        typedSchema.discriminator,
+        typedSchema.optionsMap,
+        value,
+        z,
+        zodTypes,
+    ]);
+    const save = (0, react_1.useCallback)(() => {
+        onSave(() => value, false, false);
+    }, [onSave, value]);
+    const discriminatedUnionReplacement = (0, react_1.useMemo)(() => {
+        return {
+            discriminator: typedSchema.discriminator,
+            markup: ((0, jsx_runtime_1.jsxs)(Fieldset_1.Fieldset, { shouldPad: mayPad, success: true, children: [(0, jsx_runtime_1.jsx)(SchemaLabel_1.SchemaLabel, { isDefaultValue: localValue.value[typedSchema.discriminator] ===
+                            defaultValue[typedSchema.discriminator], jsonPath: [...jsonPath, typedSchema.discriminator], onRemove: onRemove, onReset: reset, onSave: save, saveDisabledByParent: saveDisabledByParent, saving: saving, showSaveButton: showSaveButton, suffix: null, valid: localValue.zodValidation.success }), (0, jsx_runtime_1.jsx)(ComboBox_1.Combobox, { title: "Select type", values: comboBoxValues, selectedId: value[typedSchema.discriminator] })] })),
+        };
+    }, [
+        comboBoxValues,
+        defaultValue,
+        jsonPath,
+        localValue.value,
+        localValue.zodValidation.success,
+        mayPad,
+        onRemove,
+        reset,
+        save,
+        saveDisabledByParent,
+        saving,
+        showSaveButton,
+        typedSchema.discriminator,
+        value,
+    ]);
+    return ((0, jsx_runtime_1.jsx)(ZodObjectEditor_1.ZodObjectEditor
+    // Re-render the object editor when the discriminator changes
+    , { jsonPath: jsonPath, mayPad: mayPad, defaultValue: defaultValue, onRemove: onRemove, onSave: onSave, saveDisabledByParent: saveDisabledByParent, saving: saving, schema: typedSchema.optionsMap.get(value[typedSchema.discriminator]), setValue: setLocalValue, showSaveButton: showSaveButton, value: value, discriminatedUnionReplacement: discriminatedUnionReplacement }, value[typedSchema.discriminator]));
+};
+exports.ZodDiscriminatedUnionEditor = ZodDiscriminatedUnionEditor;

package/dist/editor/components/RenderModal/SchemaEditor/ZodObjectEditor.d.ts

@@ -2,6 +2,10 @@ import React from 'react';
 import type { z } from 'zod';
 import type { JSONPath } from './zod-types';
 import type { UpdaterFunction } from './ZodSwitch';
+export type ObjectDiscrimatedUnionReplacement = {
+    discriminator: string;
+    markup: React.ReactNode;
+};
 export declare const ZodObjectEditor: React.FC<{
     schema: z.ZodTypeAny;
     jsonPath: JSONPath;
@@ -14,4 +18,5 @@ export declare const ZodObjectEditor: React.FC<{
     saving: boolean;
     saveDisabledByParent: boolean;
     mayPad: boolean;
+    discriminatedUnionReplacement: ObjectDiscrimatedUnionReplacement | null;
 }>;

package/dist/editor/components/RenderModal/SchemaEditor/ZodObjectEditor.js

@@ -35,7 +35,7 @@ const SchemaLabel_1 = require("./SchemaLabel");
 const SchemaSeparationLine_1 = require("./SchemaSeparationLine");
 const SchemaVerticalGuide_1 = require("./SchemaVerticalGuide");
 const ZodSwitch_1 = require("./ZodSwitch");
-const ZodObjectEditor = ({ schema, jsonPath, setValue, value, defaultValue, onSave, showSaveButton, onRemove, saving, saveDisabledByParent, mayPad, }) => {
+const ZodObjectEditor = ({ schema, jsonPath, setValue, value, defaultValue, onSave, showSaveButton, onRemove, saving, saveDisabledByParent, mayPad, discriminatedUnionReplacement, }) => {
     const z = (0, get_zod_if_possible_1.useZodIfPossible)();
     if (!z) {
         throw new Error('expected zod');
@@ -62,6 +62,10 @@ const ZodObjectEditor = ({ schema, jsonPath, setValue, value, defaultValue, onSa
                         return localValue.value;
                     }, false, false);
                 }, saveDisabledByParent: saveDisabledByParent, saving: saving, showSaveButton: showSaveButton, valid: localValue.zodValidation.success })), (0, jsx_runtime_1.jsx)(RevisionContextProvider, { children: (0, jsx_runtime_1.jsx)(SchemaVerticalGuide_1.SchemaVerticalGuide, { isRoot: isRoot, children: keys.map((key, i) => {
+                        if (discriminatedUnionReplacement &&
+                            key === discriminatedUnionReplacement.discriminator) {
+                            return discriminatedUnionReplacement.markup;
+                        }
                         return ((0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [(0, jsx_runtime_1.jsx)(ZodSwitch_1.ZodSwitch, { mayPad: true, jsonPath: [...jsonPath, key], schema: shape[key], value: localValue.value[key], 
                                     // In case of null | {a: string, b: string} type, we need to fallback to the default value
                                     defaultValue: (defaultValue !== null && defaultValue !== void 0 ? defaultValue : value)[key], setValue: (val, forceApply) => {

package/dist/editor/components/RenderModal/SchemaEditor/ZodOrNullishEditor.js

@@ -45,6 +45,6 @@ const ZodOrNullishEditor = ({ jsonPath, schema, setValue, onSave, defaultValue,
     const save = (0, react_1.useCallback)(() => {
         onSave(() => value, false, false);
     }, [onSave, value]);
-    return ((0, jsx_runtime_1.jsxs)(Fieldset_1.Fieldset, { shouldPad: mayPad, success: localValue.zodValidation.success, children: [localValue.value === nullishValue ? ((0, jsx_runtime_1.jsx)(SchemaLabel_1.SchemaLabel, { isDefaultValue: localValue.value === defaultValue, jsonPath: jsonPath, onReset: reset, onSave: save, showSaveButton: showSaveButton, onRemove: onRemove, saving: saving, valid: localValue.zodValidation.success, saveDisabledByParent: saveDisabledByParent, suffix: null })) : ((0, jsx_runtime_1.jsx)(ZodSwitch_1.ZodSwitch, { value: localValue.value, setValue: setLocalValue, jsonPath: jsonPath, schema: innerSchema, defaultValue: value, onSave: onSave, showSaveButton: showSaveButton, onRemove: onRemove, saving: saving, saveDisabledByParent: saveDisabledByParent, mayPad: false })), (0, jsx_runtime_1.jsxs)("div", { style: checkBoxWrapper, children: [(0, jsx_runtime_1.jsx)(Checkbox_1.Checkbox, { checked: isChecked, onChange: onCheckBoxChange, disabled: false, name: jsonPath.join('.') }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 1 }), (0, jsx_runtime_1.jsx)("div", { style: labelStyle, children: String(nullishValue) })] })] }));
+    return ((0, jsx_runtime_1.jsxs)(Fieldset_1.Fieldset, { shouldPad: mayPad, success: localValue.zodValidation.success, children: [localValue.value === nullishValue ? ((0, jsx_runtime_1.jsx)(SchemaLabel_1.SchemaLabel, { isDefaultValue: localValue.value === defaultValue, jsonPath: jsonPath, onReset: reset, onSave: save, showSaveButton: showSaveButton, onRemove: onRemove, saving: saving, valid: localValue.zodValidation.success, saveDisabledByParent: saveDisabledByParent, suffix: null })) : ((0, jsx_runtime_1.jsx)(ZodSwitch_1.ZodSwitch, { value: localValue.value, setValue: setLocalValue, jsonPath: jsonPath, schema: innerSchema, defaultValue: defaultValue, onSave: onSave, showSaveButton: showSaveButton, onRemove: onRemove, saving: saving, saveDisabledByParent: saveDisabledByParent, mayPad: false })), (0, jsx_runtime_1.jsxs)("div", { style: checkBoxWrapper, children: [(0, jsx_runtime_1.jsx)(Checkbox_1.Checkbox, { checked: isChecked, onChange: onCheckBoxChange, disabled: false, name: jsonPath.join('.') }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 1 }), (0, jsx_runtime_1.jsx)("div", { style: labelStyle, children: String(nullishValue) })] })] }));
 };
 exports.ZodOrNullishEditor = ZodOrNullishEditor;

package/dist/editor/components/RenderModal/SchemaEditor/ZodSwitch.js

@@ -8,6 +8,7 @@ const ZodBooleanEditor_1 = require("./ZodBooleanEditor");
 const ZodColorEditor_1 = require("./ZodColorEditor");
 const ZodDateEditor_1 = require("./ZodDateEditor");
 const ZodDefaultEditor_1 = require("./ZodDefaultEditor");
+const ZodDiscriminatedUnionEditor_1 = require("./ZodDiscriminatedUnionEditor");
 const ZodEffectEditor_1 = require("./ZodEffectEditor");
 const ZodEnumEditor_1 = require("./ZodEnumEditor");
 const ZodNonEditableValue_1 = require("./ZodNonEditableValue");
@@ -28,7 +29,7 @@ const ZodSwitch = ({ schema, jsonPath, value, setValue, defaultValue, onSave, sh
     }
     const zodTypes = (0, get_zod_if_possible_1.useZodTypesIfPossible)();
     if (typeName === z.ZodFirstPartyTypeKind.ZodObject) {
-        return ((0, jsx_runtime_1.jsx)(ZodObjectEditor_1.ZodObjectEditor, { setValue: setValue, value: value, defaultValue: defaultValue, jsonPath: jsonPath, schema: schema, onSave: onSave, showSaveButton: showSaveButton, onRemove: onRemove, saving: saving, saveDisabledByParent: saveDisabledByParent, mayPad: mayPad }));
+        return ((0, jsx_runtime_1.jsx)(ZodObjectEditor_1.ZodObjectEditor, { setValue: setValue, value: value, defaultValue: defaultValue, jsonPath: jsonPath, schema: schema, onSave: onSave, showSaveButton: showSaveButton, onRemove: onRemove, saving: saving, saveDisabledByParent: saveDisabledByParent, mayPad: mayPad, discriminatedUnionReplacement: null }));
     }
     if (typeName === z.ZodFirstPartyTypeKind.ZodString) {
         if (value.startsWith(window.remotion_staticBase)) {
@@ -86,6 +87,9 @@ const ZodSwitch = ({ schema, jsonPath, value, setValue, defaultValue, onSave, sh
     if (typeName === z.ZodFirstPartyTypeKind.ZodDefault) {
         return ((0, jsx_runtime_1.jsx)(ZodDefaultEditor_1.ZodDefaultEditor, { jsonPath: jsonPath, showSaveButton: showSaveButton, defaultValue: defaultValue, value: value, setValue: setValue, onSave: onSave, onRemove: onRemove, schema: schema, saving: saving, saveDisabledByParent: saveDisabledByParent, mayPad: mayPad }));
     }
+    if (typeName === z.ZodFirstPartyTypeKind.ZodDiscriminatedUnion) {
+        return ((0, jsx_runtime_1.jsx)(ZodDiscriminatedUnionEditor_1.ZodDiscriminatedUnionEditor, { defaultValue: defaultValue, mayPad: mayPad, schema: schema, setValue: setValue, value: value, jsonPath: jsonPath, onRemove: onRemove, onSave: onSave, saving: saving, saveDisabledByParent: saveDisabledByParent, showSaveButton: showSaveButton }));
+    }
     return ((0, jsx_runtime_1.jsx)(ZodNonEditableValue_1.ZonNonEditableValue, { jsonPath: jsonPath, showSaveButton: showSaveButton, label: `${typeName} (not editable)`, saving: saving, mayPad: mayPad }));
 };
 exports.ZodSwitch = ZodSwitch;

package/dist/editor/components/RenderQueue/RenderQueueOpenInFolder.js

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.RenderQueueOpenInFinderItem = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
+const folder_1 = require("../../icons/folder");
 const InlineAction_1 = require("../InlineAction");
 const NotificationCenter_1 = require("../Notifications/NotificationCenter");
 const actions_1 = require("./actions");
@@ -19,7 +20,7 @@ const RenderQueueOpenInFinderItem = ({ job, }) => {
         };
     }, []);
     const renderAction = (0, react_1.useCallback)((color) => {
-        return ((0, jsx_runtime_1.jsx)("svg", { style: icon, viewBox: "0 0 576 512", children: (0, jsx_runtime_1.jsx)("path", { fill: color, d: "M384 480h48c11.4 0 21.9-6 27.6-15.9l112-192c5.8-9.9 5.8-22.1 .1-32.1S555.5 224 544 224H144c-11.4 0-21.9 6-27.6 15.9L48 357.1V96c0-8.8 7.2-16 16-16H181.5c4.2 0 8.3 1.7 11.3 4.7l26.5 26.5c21 21 49.5 32.8 79.2 32.8H416c8.8 0 16 7.2 16 16v32h48V160c0-35.3-28.7-64-64-64H298.5c-17 0-33.3-6.7-45.3-18.7L226.7 50.7c-12-12-28.3-18.7-45.3-18.7H64C28.7 32 0 60.7 0 96V416c0 35.3 28.7 64 64 64H87.7 384z" }) }));
+        return (0, jsx_runtime_1.jsx)(folder_1.ExpandedFolderIconSolid, { style: icon, color: color });
     }, [icon]);
     return (0, jsx_runtime_1.jsx)(InlineAction_1.InlineAction, { renderAction: renderAction, onClick: onClick });
 };

package/dist/editor/components/TopPanel.js

@@ -6,12 +6,12 @@ const react_1 = require("react");
 const use_breakpoint_1 = require("../helpers/use-breakpoint");
 const sidebar_1 = require("../state/sidebar");
 const CanvasOrLoading_1 = require("./CanvasOrLoading");
-const CompositionSelector_1 = require("./CompositionSelector");
 const CurrentCompositionSideEffects_1 = require("./CurrentCompositionSideEffects");
+const ExplorerPanel_1 = require("./ExplorerPanel");
 const InitialCompositionLoader_1 = require("./InitialCompositionLoader");
 const MenuToolbar_1 = require("./MenuToolbar");
+const OptionsPanel_1 = require("./OptionsPanel");
 const PreviewToolbar_1 = require("./PreviewToolbar");
-const RightPanel_1 = require("./RightPanel");
 const SplitterContainer_1 = require("./Splitter/SplitterContainer");
 const SplitterElement_1 = require("./Splitter/SplitterElement");
 const SplitterHandle_1 = require("./Splitter/SplitterHandle");
@@ -26,16 +26,12 @@ const row = {
     display: 'flex',
     flexDirection: 'row',
     flex: 1,
+    minHeight: 0,
 };
 const canvasContainer = {
     flex: 1,
     display: 'flex',
 };
-const leftContainer = {
-    flex: 1,
-    display: 'flex',
-    maxWidth: '100%',
-};
 const useResponsiveSidebarStatus = () => {
     const { sidebarCollapsedStateLeft } = (0, react_1.useContext)(sidebar_1.SidebarContext);
     const responsiveLeftStatus = (0, use_breakpoint_1.useBreakpoint)(1200) ? 'collapsed' : 'expanded';
@@ -66,6 +62,6 @@ const TopPanel = () => {
     const onCollapseRight = (0, react_1.useCallback)(() => {
         setSidebarCollapsedState({ left: null, right: 'collapsed' });
     }, [setSidebarCollapsedState]);
-    return ((0, jsx_runtime_1.jsxs)("div", { style: container, children: [(0, jsx_runtime_1.jsx)(InitialCompositionLoader_1.InitialCompositionLoader, {}), (0, jsx_runtime_1.jsx)(MenuToolbar_1.MenuToolbar, {}), (0, jsx_runtime_1.jsx)("div", { style: row, children: (0, jsx_runtime_1.jsxs)(SplitterContainer_1.SplitterContainer, { minFlex: 0.15, maxFlex: 0.4, defaultFlex: 0.2, id: "sidebar-to-preview", orientation: "vertical", children: [actualStateLeft === 'expanded' ? ((0, jsx_runtime_1.jsx)(SplitterElement_1.SplitterElement, { type: "flexer", children: (0, jsx_runtime_1.jsx)("div", { style: leftContainer, className: "css-reset", children: (0, jsx_runtime_1.jsx)(CompositionSelector_1.CompositionSelector, {}) }) })) : null, actualStateLeft === 'expanded' ? ((0, jsx_runtime_1.jsx)(SplitterHandle_1.SplitterHandle, { allowToCollapse: "left", onCollapse: onCollapseLeft })) : null, (0, jsx_runtime_1.jsx)(SplitterElement_1.SplitterElement, { type: "anti-flexer", children: (0, jsx_runtime_1.jsxs)(SplitterContainer_1.SplitterContainer, { minFlex: 0.5, maxFlex: 0.8, defaultFlex: 0.7, id: "canvas-to-right-sidebar", orientation: "vertical", children: [(0, jsx_runtime_1.jsx)(SplitterElement_1.SplitterElement, { type: "flexer", children: (0, jsx_runtime_1.jsx)("div", { style: canvasContainer, children: (0, jsx_runtime_1.jsx)(CanvasOrLoading_1.CanvasOrLoading, {}) }) }), actualStateRight === 'expanded' ? ((0, jsx_runtime_1.jsx)(SplitterHandle_1.SplitterHandle, { allowToCollapse: "right", onCollapse: onCollapseRight })) : null, actualStateRight === 'expanded' ? ((0, jsx_runtime_1.jsx)(SplitterElement_1.SplitterElement, { type: "anti-flexer", children: (0, jsx_runtime_1.jsx)(RightPanel_1.RightPanel, {}) })) : null] }) })] }) }), (0, jsx_runtime_1.jsx)(PreviewToolbar_1.PreviewToolbar, {}), (0, jsx_runtime_1.jsx)(CurrentCompositionSideEffects_1.CurrentCompositionKeybindings, {}), (0, jsx_runtime_1.jsx)(CurrentCompositionSideEffects_1.TitleUpdater, {})] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { style: container, children: [(0, jsx_runtime_1.jsx)(InitialCompositionLoader_1.InitialCompositionLoader, {}), (0, jsx_runtime_1.jsx)(MenuToolbar_1.MenuToolbar, {}), (0, jsx_runtime_1.jsx)("div", { style: row, children: (0, jsx_runtime_1.jsxs)(SplitterContainer_1.SplitterContainer, { minFlex: 0.15, maxFlex: 0.4, defaultFlex: 0.2, id: "sidebar-to-preview", orientation: "vertical", children: [actualStateLeft === 'expanded' ? ((0, jsx_runtime_1.jsx)(SplitterElement_1.SplitterElement, { type: "flexer", children: (0, jsx_runtime_1.jsx)(ExplorerPanel_1.ExplorerPanel, {}) })) : null, actualStateLeft === 'expanded' ? ((0, jsx_runtime_1.jsx)(SplitterHandle_1.SplitterHandle, { allowToCollapse: "left", onCollapse: onCollapseLeft })) : null, (0, jsx_runtime_1.jsx)(SplitterElement_1.SplitterElement, { type: "anti-flexer", children: (0, jsx_runtime_1.jsxs)(SplitterContainer_1.SplitterContainer, { minFlex: 0.5, maxFlex: 0.8, defaultFlex: 0.7, id: "canvas-to-right-sidebar", orientation: "vertical", children: [(0, jsx_runtime_1.jsx)(SplitterElement_1.SplitterElement, { type: "flexer", children: (0, jsx_runtime_1.jsx)("div", { style: canvasContainer, children: (0, jsx_runtime_1.jsx)(CanvasOrLoading_1.CanvasOrLoading, {}) }) }), actualStateRight === 'expanded' ? ((0, jsx_runtime_1.jsx)(SplitterHandle_1.SplitterHandle, { allowToCollapse: "right", onCollapse: onCollapseRight })) : null, actualStateRight === 'expanded' ? ((0, jsx_runtime_1.jsx)(SplitterElement_1.SplitterElement, { type: "anti-flexer", children: (0, jsx_runtime_1.jsx)(OptionsPanel_1.OptionsPanel, {}) })) : null] }) })] }) }), (0, jsx_runtime_1.jsx)(PreviewToolbar_1.PreviewToolbar, {}), (0, jsx_runtime_1.jsx)(CurrentCompositionSideEffects_1.CurrentCompositionKeybindings, {}), (0, jsx_runtime_1.jsx)(CurrentCompositionSideEffects_1.TitleUpdater, {})] }));
 };
 exports.TopPanel = TopPanel;

package/dist/editor/components/UpdateModal/UpdateModal.js

@@ -10,6 +10,7 @@ const CopyButton_1 = require("../CopyButton");
 const layout_1 = require("../layout");
 const ModalContainer_1 = require("../ModalContainer");
 const ModalHeader_1 = require("../ModalHeader");
+const NotificationCenter_1 = require("../Notifications/NotificationCenter");
 const container = {
     padding: 20,
     paddingTop: 0,
@@ -38,6 +39,8 @@ const UpdateModal = ({ info }) => {
         setSelectedModal(null);
     }, [setSelectedModal]);
     const command = commands[info.packageManager];
-    return ((0, jsx_runtime_1.jsxs)(ModalContainer_1.ModalContainer, { onOutsideClick: onQuit, onEscape: onQuit, children: [(0, jsx_runtime_1.jsx)(ModalHeader_1.NewCompHeader, { title: "Update available" }), (0, jsx_runtime_1.jsxs)("div", { style: container, children: [(0, jsx_runtime_1.jsx)("p", { children: "A new update for Remotion is available! Run the following command:" }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)(layout_1.Flex, { children: (0, jsx_runtime_1.jsx)("pre", { onClick: () => (0, copy_text_1.copyText)(command), style: code, children: command }) }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 1 }), (0, jsx_runtime_1.jsx)(CopyButton_1.CopyButton, { textToCopy: command, label: "Copy command", labelWhenCopied: "Copied!" })] }), (0, jsx_runtime_1.jsxs)("p", { children: ["This will upgrade Remotion from ", info.currentVersion, " to", ' ', info.latestVersion, "."] }), (0, jsx_runtime_1.jsxs)("p", { children: ["Read the", ' ', (0, jsx_runtime_1.jsx)("a", { style: link, target: "_blank", href: "https://github.com/remotion-dev/remotion/releases", children: "Release notes" }), ' ', "to know what", "'s", " new in Remotion."] })] })] }));
+    return ((0, jsx_runtime_1.jsxs)(ModalContainer_1.ModalContainer, { onOutsideClick: onQuit, onEscape: onQuit, children: [(0, jsx_runtime_1.jsx)(ModalHeader_1.NewCompHeader, { title: "Update available" }), (0, jsx_runtime_1.jsxs)("div", { style: container, children: [(0, jsx_runtime_1.jsx)("p", { children: "A new update for Remotion is available! Run the following command:" }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)(layout_1.Flex, { children: (0, jsx_runtime_1.jsx)("pre", { onClick: () => (0, copy_text_1.copyText)(command).catch((err) => {
+                                        (0, NotificationCenter_1.sendErrorNotification)(`Could not copy: ${err.message}`);
+                                    }), style: code, children: command }) }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 1 }), (0, jsx_runtime_1.jsx)(CopyButton_1.CopyButton, { textToCopy: command, label: "Copy command", labelWhenCopied: "Copied!" })] }), (0, jsx_runtime_1.jsxs)("p", { children: ["This will upgrade Remotion from ", info.currentVersion, " to", ' ', info.latestVersion, "."] }), (0, jsx_runtime_1.jsxs)("p", { children: ["Read the", ' ', (0, jsx_runtime_1.jsx)("a", { style: link, target: "_blank", href: "https://github.com/remotion-dev/remotion/releases", children: "Release notes" }), ' ', "to know what", "'s", " new in Remotion."] })] })] }));
 };
 exports.UpdateModal = UpdateModal;

package/dist/editor/helpers/copy-text.d.ts

@@ -1 +1 @@
-export declare const copyText: (cmd: string) => void;
+export declare const copyText: (cmd: string) => Promise<void>;

package/dist/editor/helpers/copy-text.js

@@ -3,16 +3,21 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.copyText = void 0;
 const copyText = (cmd) => {
     const permissionName = 'clipboard-write';
-    navigator.permissions
-        .query({ name: permissionName })
-        .then((result) => {
-        if (result.state === 'granted' || result.state === 'prompt') {
-            navigator.clipboard.writeText(cmd);
-        }
-    })
-        .catch((err) => {
-        // eslint-disable-next-line no-alert
-        alert('Could not copy:' + err);
+    return new Promise((resolve, reject) => {
+        navigator.permissions
+            .query({ name: permissionName })
+            .then((result) => {
+            if (result.state === 'granted' || result.state === 'prompt') {
+                navigator.clipboard.writeText(cmd);
+                resolve();
+            }
+            else {
+                reject(new Error('Permission to copy not granted'));
+            }
+        })
+            .catch((err) => {
+            reject(err);
+        });
     });
 };
 exports.copyText = copyText;

package/dist/editor/helpers/document-title.d.ts

@@ -0,0 +1,4 @@
+import type { RenderJob } from '../../preview-server/render-queue/job';
+export declare const setCurrentVideoId: (id: string | null) => void;
+export declare const setUnsavedProps: (unsaved: boolean) => void;
+export declare const setRenderJobs: (jobs: RenderJob[]) => void;

package/dist/editor/helpers/document-title.js

@@ -0,0 +1,60 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.setRenderJobs = exports.setUnsavedProps = exports.setCurrentVideoId = void 0;
+const truthy_1 = require("../../truthy");
+let currentVideoId = null;
+let unsavedProps = false;
+let tabInactive = false;
+let renderJobs = [];
+const setCurrentVideoId = (id) => {
+    currentVideoId = id;
+    updateTitle();
+};
+exports.setCurrentVideoId = setCurrentVideoId;
+const setUnsavedProps = (unsaved) => {
+    unsavedProps = unsaved;
+};
+exports.setUnsavedProps = setUnsavedProps;
+const setRenderJobs = (jobs) => {
+    renderJobs = jobs;
+    updateTitle();
+};
+exports.setRenderJobs = setRenderJobs;
+document.addEventListener('visibilitychange', () => {
+    tabInactive = document.visibilityState === 'hidden';
+    updateTitle();
+});
+const productName = 'Remotion Studio';
+const suffix = `- ${productName}`;
+const updateTitle = () => {
+    if (!currentVideoId) {
+        document.title = productName;
+        return;
+    }
+    const currentCompTitle = `${currentVideoId} / ${window.remotion_projectName}`;
+    document.title = [
+        getProgressInBrackets(currentVideoId, renderJobs),
+        unsavedProps && tabInactive ? '✏️' : null,
+        `${currentCompTitle} ${suffix}`,
+    ]
+        .filter(truthy_1.truthy)
+        .join(' ');
+};
+const getProgressInBrackets = (selectedCompositionId, jobs) => {
+    const currentRender = jobs.find((job) => job.status === 'running');
+    if (!currentRender) {
+        return null;
+    }
+    if (currentRender.status !== 'running') {
+        throw new Error('expected running job');
+    }
+    const progInPercent = Math.ceil(currentRender.progress.value * 100);
+    const progressInBrackets = currentRender.compositionId === selectedCompositionId
+        ? `[${progInPercent}%]`
+        : `[${progInPercent}% ${currentRender.compositionId}]`;
+    return progressInBrackets;
+};
+document.addEventListener('visibilitychange', () => {
+    tabInactive = document.visibilityState === 'hidden';
+    updateTitle();
+});

package/dist/editor/helpers/pick-color.js

@@ -11,13 +11,18 @@ const pickColor = () => {
     const open = new EyeDropper().open();
     open
         .then((color) => {
-        var _a;
-        (0, copy_text_1.copyText)(color.sRGBHex);
-        (_a = NotificationCenter_1.notificationCenter.current) === null || _a === void 0 ? void 0 : _a.addNotification({
-            content: ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(ColorDot_1.ColorDot, { color: color.sRGBHex }), " ", (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 1 }), " Copied", ' ', color.sRGBHex] })),
-            created: Date.now(),
-            duration: 2000,
-            id: String(Math.random()),
+        (0, copy_text_1.copyText)(color.sRGBHex)
+            .then(() => {
+            var _a;
+            (_a = NotificationCenter_1.notificationCenter.current) === null || _a === void 0 ? void 0 : _a.addNotification({
+                content: ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(ColorDot_1.ColorDot, { color: color.sRGBHex }), " ", (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 1 }), " Copied", ' ', color.sRGBHex] })),
+                created: Date.now(),
+                duration: 2000,
+                id: String(Math.random()),
+            });
+        })
+            .catch((err) => {
+            (0, NotificationCenter_1.sendErrorNotification)(`Could not copy: ${err.message}`);
         });
     })
         .catch((err) => {

package/dist/editor/helpers/render-modal-sections.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import type { Codec } from '@remotion/renderer';
 import type { RenderType } from '../components/RenderModal/RenderModalAdvanced';
 type Section = 'general' | 'picture' | 'advanced' | 'data' | 'gif' | 'audio';

package/dist/editor/icons/clipboard.d.ts

@@ -0,0 +1,4 @@
+import type { SVGProps } from 'react';
+export declare const ClipboardIcon: React.FC<SVGProps<SVGSVGElement> & {
+    color?: string;
+}>;

package/dist/editor/icons/clipboard.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ClipboardIcon = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const ClipboardIcon = ({ color, ...props }) => ((0, jsx_runtime_1.jsx)("svg", { viewBox: "0 0 384 512", ...props, children: (0, jsx_runtime_1.jsx)("path", { fill: color, d: "M336 64h-80c0-35.3-28.7-64-64-64s-64 28.7-64 64H48C21.5 64 0 85.5 0 112v352c0 26.5 21.5 48 48 48h288c26.5 0 48-21.5 48-48V112c0-26.5-21.5-48-48-48zM192 40c13.3 0 24 10.7 24 24s-10.7 24-24 24-24-10.7-24-24 10.7-24 24-24zm144 418c0 3.3-2.7 6-6 6H54c-3.3 0-6-2.7-6-6V118c0-3.3 2.7-6 6-6h42v36c0 6.6 5.4 12 12 12h168c6.6 0 12-5.4 12-12v-36h42c3.3 0 6 2.7 6 6z" }) }));
+exports.ClipboardIcon = ClipboardIcon;

package/dist/editor/icons/file.d.ts

@@ -1,2 +1,4 @@
 import type { SVGProps } from 'react';
-export declare const FileIcon: (props: SVGProps<SVGSVGElement>) => JSX.Element;
+export declare const FileIcon: React.FC<SVGProps<SVGSVGElement> & {
+    color?: string;
+}>;

package/dist/editor/icons/file.js

@@ -2,5 +2,5 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.FileIcon = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const FileIcon = (props) => ((0, jsx_runtime_1.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 384 512", ...props, children: (0, jsx_runtime_1.jsx)("path", { fill: "currentcolor", d: "M0 64C0 28.65 28.65 0 64 0h156.1c12.7 0 25 5.057 34 14.06L369.9 129.9c9 9 14.1 21.3 14.1 34V448c0 35.3-28.7 64-64 64H64c-35.35 0-64-28.7-64-64V64zm352 128H240c-26.5 0-48-21.5-48-48V32H64c-17.67 0-32 14.33-32 32v384c0 17.7 14.33 32 32 32h256c17.7 0 32-14.3 32-32V192zm-4.7-39.4L231.4 36.69c-2-2.07-4.6-3.51-7.4-4.21V144c0 8.8 7.2 16 16 16h111.5c-.7-2.8-2.1-5.4-4.2-7.4z" }) }));
+const FileIcon = ({ color, ...props }) => ((0, jsx_runtime_1.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 384 512", ...props, children: (0, jsx_runtime_1.jsx)("path", { fill: color !== null && color !== void 0 ? color : 'currentColor', d: "M0 64C0 28.65 28.65 0 64 0h156.1c12.7 0 25 5.057 34 14.06L369.9 129.9c9 9 14.1 21.3 14.1 34V448c0 35.3-28.7 64-64 64H64c-35.35 0-64-28.7-64-64V64zm352 128H240c-26.5 0-48-21.5-48-48V32H64c-17.67 0-32 14.33-32 32v384c0 17.7 14.33 32 32 32h256c17.7 0 32-14.3 32-32V192zm-4.7-39.4L231.4 36.69c-2-2.07-4.6-3.51-7.4-4.21V144c0 8.8 7.2 16 16 16h111.5c-.7-2.8-2.1-5.4-4.2-7.4z" }) }));
 exports.FileIcon = FileIcon;

package/dist/editor/icons/folder.d.ts

@@ -6,3 +6,6 @@ export declare const CollapsedFolderIcon: React.FC<SVGProps<SVGSVGElement> & {
 export declare const ExpandedFolderIcon: React.FC<SVGProps<SVGSVGElement> & {
     color: string;
 }>;
+export declare const ExpandedFolderIconSolid: React.FC<SVGProps<SVGSVGElement> & {
+    color: string;
+}>;

package/dist/editor/icons/folder.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ExpandedFolderIcon = exports.CollapsedFolderIcon = void 0;
+exports.ExpandedFolderIconSolid = exports.ExpandedFolderIcon = exports.CollapsedFolderIcon = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const CollapsedFolderIcon = ({ color, ...props }) => {
     return ((0, jsx_runtime_1.jsx)("svg", { viewBox: "0 0 512 512", ...props, children: (0, jsx_runtime_1.jsx)("path", { fill: color, d: "M447.1 96H272L226.7 50.75C214.7 38.74 198.5 32 181.5 32H63.1c-35.35 0-64 28.65-64 64v320c0 35.35 28.65 64 64 64h384c35.35 0 64-28.65 64-64V160C511.1 124.7 483.3 96 447.1 96zM480 416c0 17.64-14.36 32-32 32H64c-17.64 0-32-14.36-32-32V96c0-17.64 14.36-32 32-32h117.5c8.549 0 16.58 3.328 22.63 9.375L258.7 128H448c17.64 0 32 14.36 32 32V416z" }) }));
@@ -10,3 +10,7 @@ const ExpandedFolderIcon = ({ color, ...props }) => {
     return ((0, jsx_runtime_1.jsx)("svg", { viewBox: "0 0 576 512", ...props, children: (0, jsx_runtime_1.jsx)("path", { fill: color, d: "M566.6 211.6C557.5 199.1 543.4 192 527.1 192H134.2C114.3 192 96.2 204.5 89.23 223.1L32 375.8V96c0-17.64 14.36-32 32-32h117.5c8.549 0 16.58 3.328 22.63 9.375L258.7 128H448c17.64 0 32 14.36 32 32h32c0-35.35-28.65-64-64-64H272L226.7 50.75C214.7 38.74 198.5 32 181.5 32H64C28.65 32 0 60.65 0 96v320c0 35.35 28.65 64 64 64h403.1c21.11 0 39.53-13.53 45.81-33.69l60-192C578.4 239.6 575.8 224 566.6 211.6zM543.2 244.8l-60 192C481.1 443.5 475 448 467.1 448H64c-3.322 0-6.357-.9551-9.373-1.898c-2.184-1.17-4.109-2.832-5.596-4.977c-3.031-4.375-3.703-9.75-1.828-14.73l72-192C121.5 228.2 127.5 224 134.2 224h393.8c5.141 0 9.844 2.375 12.89 6.516C543.9 234.7 544.8 239.9 543.2 244.8z" }) }));
 };
 exports.ExpandedFolderIcon = ExpandedFolderIcon;
+const ExpandedFolderIconSolid = ({ color, ...props }) => {
+    return ((0, jsx_runtime_1.jsx)("svg", { viewBox: "0 0 576 512", ...props, children: (0, jsx_runtime_1.jsx)("path", { fill: color, d: "M384 480h48c11.4 0 21.9-6 27.6-15.9l112-192c5.8-9.9 5.8-22.1 .1-32.1S555.5 224 544 224H144c-11.4 0-21.9 6-27.6 15.9L48 357.1V96c0-8.8 7.2-16 16-16H181.5c4.2 0 8.3 1.7 11.3 4.7l26.5 26.5c21 21 49.5 32.8 79.2 32.8H416c8.8 0 16 7.2 16 16v32h48V160c0-35.3-28.7-64-64-64H298.5c-17 0-33.3-6.7-45.3-18.7L226.7 50.7c-12-12-28.3-18.7-45.3-18.7H64C28.7 32 0 60.7 0 96V416c0 35.3 28.7 64 64 64H87.7 384z" }) }));
+};
+exports.ExpandedFolderIconSolid = ExpandedFolderIconSolid;

package/dist/event-source-events.d.ts

@@ -27,4 +27,5 @@ export type EventSourceEvent = {
 } | {
     type: 'new-public-folder';
     files: StaticFile[];
+    folderExists: string | null;
 };

package/dist/event-source.js

@@ -36,6 +36,7 @@ const openEventSource = () => {
         }
         if (newEvent.type === 'new-public-folder') {
             window.remotion_staticFiles = newEvent.files;
+            window.remotion_publicFolderExists = newEvent.folderExists;
         }
         listeners.forEach((l) => {
             if (l.type === newEvent.type) {

package/dist/get-cli-options.d.ts

@@ -33,5 +33,5 @@ export declare const getCliOptions: (options: {
     videoBitrate: string | null;
     height: number | null;
     width: number | null;
-    configFileImageFormat: "png" | "jpeg" | "none" | undefined;
+    configFileImageFormat: "none" | "png" | "jpeg" | undefined;
 }>;

package/dist/get-input-props.js

@@ -33,7 +33,8 @@ const getInputProps = (onUpdate) => {
         return JSON.parse(parse_command_line_1.parsedCli.props);
     }
     catch (err) {
-        log_1.Log.error('You passed --props but it was neither valid JSON nor a file path to a valid JSON file.');
+        log_1.Log.error('You passed --props but it was neither valid JSON nor a file path to a valid JSON file. Provided value: ' +
+            parse_command_line_1.parsedCli.props);
         log_1.Log.info('Got the following value:', parse_command_line_1.parsedCli.props);
         log_1.Log.error('Check that your input is parseable using `JSON.parse` and try again.');
         if (node_os_1.default.platform() === 'win32') {

package/dist/handle-common-errors.js

@@ -27,8 +27,8 @@ const handleCommonError = async (err, logLevel) => {
     }
     if (err.message.includes('Error creating WebGL context')) {
         log_1.Log.info();
-        log_1.Log.info('💡 You might need to set the OpenGL renderer to "angle"');
-        log_1.Log.info('💡 Get help for this issue at https://www.remotion.dev/docs/three');
+        log_1.Log.warn('💡 You might need to set the OpenGL renderer to "angle" (or "swangle" if rendering on lambda). Learn why at https://www.remotion.dev/docs/three');
+        log_1.Log.warn("💡 Check how it's done at https://www.remotion.dev/docs/chromium-flags#--gl");
     }
     if (err.message.includes('The bucket does not allow ACLs')) {
         log_1.Log.info();

package/dist/index.d.ts

@@ -118,7 +118,7 @@ export declare const CliInternals: {
         videoBitrate: string | null;
         height: number | null;
         width: number | null;
-        configFileImageFormat: "png" | "jpeg" | "none" | undefined;
+        configFileImageFormat: "none" | "png" | "jpeg" | undefined;
     }>;
     loadConfig: (remotionRoot: string) => Promise<string | null>;
     initializeCli: (remotionRoot: string) => Promise<void>;
@@ -127,7 +127,7 @@ export declare const CliInternals: {
     parsedCli: {
         "browser-executable": import("@remotion/renderer").BrowserExecutable;
         "pixel-format": "yuv420p" | "yuva420p" | "yuv422p" | "yuv444p" | "yuv420p10le" | "yuv422p10le" | "yuv444p10le" | "yuva444p10le";
-        "image-format": "png" | "jpeg" | "pdf" | "webp" | "none";
+        "image-format": "none" | "png" | "jpeg" | "pdf" | "webp";
         "prores-profile": "4444-xq" | "4444" | "hq" | "standard" | "light" | "proxy";
         "bundle-cache": string;
         "env-file": string;
@@ -136,6 +136,7 @@ export declare const CliInternals: {
         "every-nth-frame": number;
         "number-of-gif-loops": number;
         "number-of-shared-audio-tags": number;
+        version: string;
         codec: "h264" | "h265" | "vp8" | "vp9" | "mp3" | "aac" | "wav" | "prores" | "h264-mkv" | "gif";
         concurrency: number;
         timeout: number;
@@ -191,7 +192,7 @@ export declare const CliInternals: {
         downloadName: string | null;
         outName: string | null;
         configImageFormat: "png" | "jpeg" | "pdf" | "webp" | null;
-        cliFlag: "png" | "jpeg" | "pdf" | "webp" | "none" | null;
+        cliFlag: "none" | "png" | "jpeg" | "pdf" | "webp" | null;
         isLambda: boolean;
         fromUi: "png" | "jpeg" | "pdf" | "webp" | null;
     }) => {
@@ -206,8 +207,8 @@ export declare const CliInternals: {
     };
     getVideoImageFormat: ({ codec, uiImageFormat, }: {
         codec: import("@remotion/renderer").CodecOrUndefined;
-        uiImageFormat: "png" | "jpeg" | "none" | null;
-    }) => "png" | "jpeg" | "none";
+        uiImageFormat: "none" | "png" | "jpeg" | null;
+    }) => "none" | "png" | "jpeg";
     printCompositions: (compositions: import("remotion").VideoConfig[]) => void;
     getFinalOutputCodec: ({ cliFlag, configFile, downloadName, outName, uiCodec, }: {
         cliFlag: import("@remotion/renderer").CodecOrUndefined;

package/dist/index.js

@@ -94,7 +94,7 @@ const cli = async () => {
             (0, ffmpeg_1.ffprobeCommand)(remotionRoot, process.argv.slice(3));
         }
         else if (command === 'upgrade') {
-            await (0, upgrade_1.upgrade)(remotionRoot, parse_command_line_1.parsedCli['package-manager']);
+            await (0, upgrade_1.upgrade)(remotionRoot, parse_command_line_1.parsedCli['package-manager'], parse_command_line_1.parsedCli.version);
         }
         else if (command === versions_1.VERSIONS_COMMAND) {
             await (0, versions_1.versionsCommand)(remotionRoot);