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

package/dist/editor/components/get-zod-if-possible.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+export declare type ZodType = Awaited<typeof import('zod')>['z'];
+export declare type ZodColorType = Awaited<typeof import('@remotion/z-color')>;
+export declare const getZodIfPossible: () => Promise<ZodType | null>;
+export declare const getZColorIfPossible: () => Promise<ZodColorType | null>;
+export declare const useZodIfPossible: () => typeof import("zod/lib/external") | null;
+export declare const useZodColorIfPossible: () => typeof import("@remotion/z-color") | null;
+export declare const ZodProvider: React.FC<{
+    children: React.ReactNode;
+}>;

package/dist/editor/components/get-zod-if-possible.js

@@ -0,0 +1,79 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ZodProvider = exports.useZodColorIfPossible = exports.useZodIfPossible = exports.getZColorIfPossible = exports.getZodIfPossible = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const getZodIfPossible = async () => {
+    try {
+        const { z } = await Promise.resolve().then(() => __importStar(require('zod')));
+        return z;
+    }
+    catch (err) {
+        return null;
+    }
+};
+exports.getZodIfPossible = getZodIfPossible;
+const getZColorIfPossible = async () => {
+    try {
+        const mod = await Promise.resolve().then(() => __importStar(require('@remotion/z-color')));
+        return mod;
+    }
+    catch (err) {
+        return null;
+    }
+};
+exports.getZColorIfPossible = getZColorIfPossible;
+const useZodIfPossible = () => {
+    var _a;
+    const context = (0, react_1.useContext)(ZodContext);
+    return (_a = context === null || context === void 0 ? void 0 : context.zod) !== null && _a !== void 0 ? _a : null;
+};
+exports.useZodIfPossible = useZodIfPossible;
+const useZodColorIfPossible = () => {
+    var _a;
+    const context = (0, react_1.useContext)(ZodContext);
+    return (_a = context === null || context === void 0 ? void 0 : context.zodColor) !== null && _a !== void 0 ? _a : null;
+};
+exports.useZodColorIfPossible = useZodColorIfPossible;
+const ZodContext = (0, react_1.createContext)(null);
+const ZodProvider = ({ children }) => {
+    const [zod, setZod] = (0, react_1.useState)(null);
+    const [zodColor, setZodColor] = (0, react_1.useState)(null);
+    (0, react_1.useEffect)(() => {
+        (0, exports.getZodIfPossible)().then((z) => setZod(z));
+    }, []);
+    (0, react_1.useEffect)(() => {
+        (0, exports.getZColorIfPossible)().then((z) => setZodColor(z));
+    }, []);
+    const contextValue = (0, react_1.useMemo)(() => {
+        return {
+            zod,
+            zodColor,
+        };
+    }, [zod, zodColor]);
+    return ((0, jsx_runtime_1.jsx)(ZodContext.Provider, { value: contextValue, children: children }));
+};
+exports.ZodProvider = ZodProvider;

package/dist/editor/helpers/calculate-timeline.d.ts

@@ -1,9 +1,5 @@
 import type { TSequence } from 'remotion';
 import type { TrackWithHash } from './get-timeline-sequence-sort-key';
-export declare type SequenceWithOverlap = {
-    sequence: TSequence;
-    overlaps: TSequence[];
-};
 export declare const calculateTimeline: ({ sequences, sequenceDuration, }: {
     sequences: TSequence[];
     sequenceDuration: number;

package/dist/editor/helpers/colors.d.ts

@@ -5,7 +5,6 @@ export declare const LIGHT_COLOR = "#ddd";
 export declare const SELECTED_BACKGROUND = "hsla(0, 0%, 100%, 0.15)";
 export declare const LIGHT_TEXT = "rgba(255, 255, 255, 0.6)";
 export declare const VERY_LIGHT_TEXT = "rgba(255, 255, 255, 0.3)";
-export declare const SELECTED_HOVER_BACKGROUND = "hsla(0, 0%, 100%, 0.25)";
 export declare const CLEAR_HOVER = "rgba(255, 255, 255, 0.06)";
 export declare const INPUT_BORDER_COLOR_UNHOVERED = "rgba(0, 0, 0, 0.6)";
 export declare const INPUT_BORDER_COLOR_HOVERED = "rgba(255, 255, 255, 0.05)";

package/dist/editor/helpers/colors.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getBackgroundFromHoverState = exports.WARNING_COLOR = exports.FAIL_COLOR = exports.TIMELINE_BACKGROUND = exports.INPUT_BORDER_COLOR_HOVERED = exports.INPUT_BORDER_COLOR_UNHOVERED = exports.CLEAR_HOVER = exports.SELECTED_HOVER_BACKGROUND = exports.VERY_LIGHT_TEXT = exports.LIGHT_TEXT = exports.SELECTED_BACKGROUND = exports.LIGHT_COLOR = exports.BORDER_COLOR = exports.INPUT_BACKGROUND = exports.BACKGROUND = void 0;
+exports.getBackgroundFromHoverState = exports.WARNING_COLOR = exports.FAIL_COLOR = exports.TIMELINE_BACKGROUND = exports.INPUT_BORDER_COLOR_HOVERED = exports.INPUT_BORDER_COLOR_UNHOVERED = exports.CLEAR_HOVER = exports.VERY_LIGHT_TEXT = exports.LIGHT_TEXT = exports.SELECTED_BACKGROUND = exports.LIGHT_COLOR = exports.BORDER_COLOR = exports.INPUT_BACKGROUND = exports.BACKGROUND = void 0;
 exports.BACKGROUND = '#1f2428';
 exports.INPUT_BACKGROUND = '#2f363d';
 exports.BORDER_COLOR = '#000';
@@ -8,7 +8,7 @@ exports.LIGHT_COLOR = '#ddd';
 exports.SELECTED_BACKGROUND = 'hsla(0, 0%, 100%, 0.15)';
 exports.LIGHT_TEXT = 'rgba(255, 255, 255, 0.6)';
 exports.VERY_LIGHT_TEXT = 'rgba(255, 255, 255, 0.3)';
-exports.SELECTED_HOVER_BACKGROUND = 'hsla(0, 0%, 100%, 0.25)';
+const SELECTED_HOVER_BACKGROUND = 'hsla(0, 0%, 100%, 0.25)';
 exports.CLEAR_HOVER = 'rgba(255, 255, 255, 0.06)';
 exports.INPUT_BORDER_COLOR_UNHOVERED = 'rgba(0, 0, 0, 0.6)';
 exports.INPUT_BORDER_COLOR_HOVERED = 'rgba(255, 255, 255, 0.05)';
@@ -18,7 +18,7 @@ exports.WARNING_COLOR = '#f1c40f';
 const getBackgroundFromHoverState = ({ selected, hovered, }) => {
     if (selected) {
         if (hovered) {
-            return exports.SELECTED_HOVER_BACKGROUND;
+            return SELECTED_HOVER_BACKGROUND;
         }
         return exports.SELECTED_BACKGROUND;
     }

package/dist/editor/helpers/create-folder-tree.d.ts

@@ -4,5 +4,4 @@ export declare const splitParentIntoNameAndParent: (name: string | null) => {
     name: string | null;
     parent: string | null;
 };
-export declare const findItemListToPush: (items: CompositionSelectorItemType[], folderName: string | null, parentName: string | null) => CompositionSelectorItemType[];
 export declare const createFolderTree: (comps: AnyComposition[], folders: TFolder[], foldersExpanded: Record<string, boolean>) => CompositionSelectorItemType[];

package/dist/editor/helpers/create-folder-tree.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.createFolderTree = exports.findItemListToPush = exports.splitParentIntoNameAndParent = void 0;
+exports.createFolderTree = exports.splitParentIntoNameAndParent = void 0;
 const persist_open_folders_1 = require("./persist-open-folders");
 const splitParentIntoNameAndParent = (name) => {
     if (name === null) {
@@ -44,7 +44,6 @@ const findItemListToPush = (items, folderName, parentName) => {
     }
     return folder;
 };
-exports.findItemListToPush = findItemListToPush;
 const createFolderIfDoesNotExist = (items, availableFolders, folderItem, foldersExpanded) => {
     var _a;
     if (doesFolderExist(items, folderItem.name, folderItem.parent)) {
@@ -58,7 +57,7 @@ const createFolderIfDoesNotExist = (items, availableFolders, folderItem, folders
         }
         createFolderIfDoesNotExist(items, availableFolders, parent, foldersExpanded);
     }
-    const itemList = (0, exports.findItemListToPush)(items, splitted.name, splitted.parent);
+    const itemList = findItemListToPush(items, splitted.name, splitted.parent);
     if (!itemList) {
         throw new Error('why did folder not exist? ' + folderItem.name);
     }
@@ -93,7 +92,7 @@ const createFolderTree = (comps, folders, foldersExpanded) => {
             composition: item,
             key: item.id,
         };
-        const list = (0, exports.findItemListToPush)(items, item.folderName, item.parentFolderName);
+        const list = findItemListToPush(items, item.folderName, item.parentFolderName);
         list.push(toPush);
     }
     return items;

package/dist/editor/helpers/get-timeline-sequence-sort-key.d.ts

@@ -1,5 +1,5 @@
 import type { TSequence } from 'remotion';
-export declare type Track = {
+declare type Track = {
     sequence: TSequence;
     depth: number;
 };
@@ -15,3 +15,4 @@ export declare type TrackWithHashAndOriginalTimings = TrackWithHash & {
 export declare const getTimelineSequenceSequenceSortKey: (track: TrackWithHash, tracks: TrackWithHash[], sameHashes?: {
     [hash: string]: string[];
 }) => string;
+export {};

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

@@ -1,4 +1,6 @@
-/// <reference types="react" />
-export declare const CaretLeft: () => JSX.Element;
+import React from 'react';
 export declare const CaretRight: () => JSX.Element;
 export declare const CaretDown: () => JSX.Element;
+export declare const AngleDown: React.FC<{
+    down: boolean;
+}>;

package/dist/editor/icons/caret.js

@@ -1,18 +1,32 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.CaretDown = exports.CaretRight = exports.CaretLeft = void 0;
+exports.AngleDown = exports.CaretDown = exports.CaretRight = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const colors_1 = require("../helpers/colors");
 const caret = {
     height: 12,
 };
 const caretDown = {
     width: 10,
 };
-const CaretLeft = () => ((0, jsx_runtime_1.jsx)("svg", { viewBox: "0 0 256 512", style: caret, children: (0, jsx_runtime_1.jsx)("path", { fill: "currentColor", d: "M9.4 278.6c-12.5-12.5-12.5-32.8 0-45.3l128-128c9.2-9.2 22.9-11.9 34.9-6.9s19.8 16.6 19.8 29.6l0 256c0 12.9-7.8 24.6-19.8 29.6s-25.7 2.2-34.9-6.9l-128-128z" }) }));
-exports.CaretLeft = CaretLeft;
+const angleDown = {
+    width: 10,
+};
 const CaretRight = () => ((0, jsx_runtime_1.jsx)("svg", { viewBox: "0 0 192 512", style: caret, children: (0, jsx_runtime_1.jsx)("path", { fill: "currentColor", d: "M0 384.662V127.338c0-17.818 21.543-26.741 34.142-14.142l128.662 128.662c7.81 7.81 7.81 20.474 0 28.284L34.142 398.804C21.543 411.404 0 402.48 0 384.662z" }) }));
 exports.CaretRight = CaretRight;
 const CaretDown = () => {
     return ((0, jsx_runtime_1.jsx)("svg", { viewBox: "0 0 320 512", style: caretDown, children: (0, jsx_runtime_1.jsx)("path", { fill: "currentColor", d: "M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z" }) }));
 };
 exports.CaretDown = CaretDown;
+const AngleDown = ({ down }) => {
+    const style = (0, react_1.useMemo)(() => {
+        return {
+            ...angleDown,
+            transform: down ? 'rotate(180deg)' : 'rotate(0deg)',
+            marginTop: 1,
+        };
+    }, [down]);
+    return ((0, jsx_runtime_1.jsx)("svg", { style: style, viewBox: "0 0 448 512", children: (0, jsx_runtime_1.jsx)("path", { fill: colors_1.LIGHT_TEXT, d: "M201.4 342.6c12.5 12.5 32.8 12.5 45.3 0l160-160c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L224 274.7 86.6 137.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l160 160z" }) }));
+};
+exports.AngleDown = AngleDown;

package/dist/editor/state/keybindings.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 export declare type KeyEventType = 'keydown' | 'keyup' | 'keypress';
-export declare type KeyListenerCallback = (e: KeyboardEvent) => void;
+declare type KeyListenerCallback = (e: KeyboardEvent) => void;
 export declare type RegisteredKeybinding = {
     registeredFromPane: string;
     id: string;
@@ -17,3 +17,4 @@ export declare const KeybindingContext: React.Context<KeybindingContextType>;
 export declare const KeybindingContextProvider: React.FC<{
     children: React.ReactNode;
 }>;
+export {};

package/dist/editor/state/modals.d.ts

@@ -35,6 +35,7 @@ export declare type RenderModalState = {
     initialHeadless: boolean;
     minConcurrency: number;
     maxConcurrency: number;
+    defaultProps: unknown;
 };
 export declare type ModalState = {
     type: 'new-comp';

package/dist/editor/state/preview-size.d.ts

@@ -5,7 +5,6 @@ declare type PreviewSizeCtx = {
     setSize: (cb: (oldSize: PreviewSize) => PreviewSize) => void;
 };
 export declare const persistPreviewSizeOption: (option: PreviewSize) => void;
-export declare const loadPreviewSizeOption: () => PreviewSize;
 export declare const PreviewSizeContext: React.Context<PreviewSizeCtx>;
 export declare const PreviewSizeProvider: React.FC<{
     children: React.ReactNode;

package/dist/editor/state/preview-size.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.PreviewSizeProvider = exports.PreviewSizeContext = exports.loadPreviewSizeOption = exports.persistPreviewSizeOption = void 0;
+exports.PreviewSizeProvider = exports.PreviewSizeContext = exports.persistPreviewSizeOption = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const editor_zoom_gestures_1 = require("./editor-zoom-gestures");
@@ -22,13 +22,12 @@ const loadPreviewSizeOption = () => {
     }
     return JSON.parse(item);
 };
-exports.loadPreviewSizeOption = loadPreviewSizeOption;
 exports.PreviewSizeContext = (0, react_1.createContext)({
     setSize: () => undefined,
-    size: (0, exports.loadPreviewSizeOption)(),
+    size: loadPreviewSizeOption(),
 });
 const PreviewSizeProvider = ({ children }) => {
-    const [size, setSizeState] = (0, react_1.useState)(() => (0, exports.loadPreviewSizeOption)());
+    const [size, setSizeState] = (0, react_1.useState)(() => loadPreviewSizeOption());
     const [translation, setTranslation] = (0, react_1.useState)(() => {
         return {
             x: 0,

package/dist/editor/state/sidebar.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 export declare type SidebarCollapsedState = 'collapsed' | 'expanded' | 'responsive';
-export declare type RightSidebarCollapsedState = Exclude<SidebarCollapsedState, 'responsive'>;
+declare type RightSidebarCollapsedState = Exclude<SidebarCollapsedState, 'responsive'>;
 declare type Context = {
     sidebarCollapsedStateLeft: SidebarCollapsedState;
     setSidebarCollapsedState: (options: {

package/dist/editor/state/timeline-ref.d.ts

@@ -1,6 +1,7 @@
 /// <reference types="react" />
-export declare type TimelineRef = {
+declare type TimelineRef = {
     collapseAll: () => void;
     expandAll: () => void;
 };
 export declare const timelineRef: import("react").RefObject<TimelineRef>;
+export {};

package/dist/editor/state/z-index.d.ts

@@ -1,8 +1,4 @@
 import React from 'react';
-declare type ZIndex = {
-    currentIndex: number;
-};
-export declare const ZIndexContext: React.Context<ZIndex>;
 export declare const HigherZIndex: React.FC<{
     onEscape: () => void;
     onOutsideClick: () => void;
@@ -14,4 +10,3 @@ export declare const useZIndex: () => {
     isHighestContext: boolean;
     tabIndex: number;
 };
-export {};

package/dist/editor/state/z-index.js

@@ -1,14 +1,17 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useZIndex = exports.HigherZIndex = exports.ZIndexContext = void 0;
+exports.useZIndex = exports.HigherZIndex = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const use_keybinding_1 = require("../helpers/use-keybinding");
 const highest_z_index_1 = require("./highest-z-index");
 const input_dragger_click_lock_1 = require("./input-dragger-click-lock");
-exports.ZIndexContext = (0, react_1.createContext)({
+const ZIndexContext = (0, react_1.createContext)({
     currentIndex: 0,
 });
+const margin = {
+    margin: 'auto',
+};
 const EscapeHook = ({ onEscape }) => {
     const keybindings = (0, use_keybinding_1.useKeybinding)();
     (0, react_1.useEffect)(() => {
@@ -28,7 +31,7 @@ const EscapeHook = ({ onEscape }) => {
     return null;
 };
 const HigherZIndex = ({ children, onEscape, onOutsideClick }) => {
-    const context = (0, react_1.useContext)(exports.ZIndexContext);
+    const context = (0, react_1.useContext)(ZIndexContext);
     const highestContext = (0, react_1.useContext)(highest_z_index_1.HighestZIndexContext);
     const containerRef = (0, react_1.useRef)(null);
     const currentIndex = context.currentIndex + 1;
@@ -75,11 +78,11 @@ const HigherZIndex = ({ children, onEscape, onOutsideClick }) => {
             currentIndex,
         };
     }, [currentIndex]);
-    return ((0, jsx_runtime_1.jsxs)(exports.ZIndexContext.Provider, { value: value, children: [(0, jsx_runtime_1.jsx)(EscapeHook, { onEscape: onEscape }), (0, jsx_runtime_1.jsx)("div", { ref: containerRef, children: children })] }));
+    return ((0, jsx_runtime_1.jsxs)(ZIndexContext.Provider, { value: value, children: [(0, jsx_runtime_1.jsx)(EscapeHook, { onEscape: onEscape }), (0, jsx_runtime_1.jsx)("div", { ref: containerRef, style: margin, children: children })] }));
 };
 exports.HigherZIndex = HigherZIndex;
 const useZIndex = () => {
-    const context = (0, react_1.useContext)(exports.ZIndexContext);
+    const context = (0, react_1.useContext)(ZIndexContext);
     const highestContext = (0, react_1.useContext)(highest_z_index_1.HighestZIndexContext);
     const isHighestContext = highestContext.highestIndex === context.currentIndex;
     return (0, react_1.useMemo)(() => ({

package/dist/get-cli-options.js

@@ -79,6 +79,7 @@ const getCliOptions = async (options) => {
         ignoreCertificateErrors: config_1.ConfigInternals.getIgnoreCertificateErrors(),
         headless: config_1.ConfigInternals.getChromiumHeadlessMode(),
         gl: (_a = config_1.ConfigInternals.getChromiumOpenGlRenderer()) !== null && _a !== void 0 ? _a : renderer_1.RenderInternals.DEFAULT_OPENGL_RENDERER,
+        userAgent: config_1.ConfigInternals.getChromiumUserAgent(),
     };
     const everyNthFrame = config_1.ConfigInternals.getEveryNthFrame();
     const numberOfGifLoops = config_1.ConfigInternals.getNumberOfGifLoops();

package/dist/get-config-file-name.d.ts

@@ -1,3 +1 @@
-export declare const defaultConfigFileJavascript = "remotion.config.js";
-export declare const defaultConfigFileTypescript = "remotion.config.ts";
 export declare const loadConfig: (remotionRoot: string) => Promise<string | null>;

package/dist/get-config-file-name.js

@@ -3,14 +3,14 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.loadConfig = exports.defaultConfigFileTypescript = exports.defaultConfigFileJavascript = void 0;
+exports.loadConfig = void 0;
 const fs_1 = require("fs");
 const path_1 = __importDefault(require("path"));
 const load_config_1 = require("./load-config");
 const log_1 = require("./log");
 const parse_command_line_1 = require("./parse-command-line");
-exports.defaultConfigFileJavascript = 'remotion.config.js';
-exports.defaultConfigFileTypescript = 'remotion.config.ts';
+const defaultConfigFileJavascript = 'remotion.config.js';
+const defaultConfigFileTypescript = 'remotion.config.ts';
 const loadConfig = (remotionRoot) => {
     if (parse_command_line_1.parsedCli.config) {
         const fullPath = path_1.default.resolve(process.cwd(), parse_command_line_1.parsedCli.config);
@@ -23,11 +23,11 @@ const loadConfig = (remotionRoot) => {
     if (remotionRoot === null) {
         return Promise.resolve(null);
     }
-    if ((0, fs_1.existsSync)(path_1.default.resolve(remotionRoot, exports.defaultConfigFileTypescript))) {
-        return (0, load_config_1.loadConfigFile)(remotionRoot, exports.defaultConfigFileTypescript, false);
+    if ((0, fs_1.existsSync)(path_1.default.resolve(remotionRoot, defaultConfigFileTypescript))) {
+        return (0, load_config_1.loadConfigFile)(remotionRoot, defaultConfigFileTypescript, false);
     }
-    if ((0, fs_1.existsSync)(path_1.default.resolve(remotionRoot, exports.defaultConfigFileJavascript))) {
-        return (0, load_config_1.loadConfigFile)(remotionRoot, exports.defaultConfigFileJavascript, true);
+    if ((0, fs_1.existsSync)(path_1.default.resolve(remotionRoot, defaultConfigFileJavascript))) {
+        return (0, load_config_1.loadConfigFile)(remotionRoot, defaultConfigFileJavascript, true);
     }
     return Promise.resolve(null);
 };

package/dist/index.d.ts

@@ -117,7 +117,58 @@ export declare const CliInternals: {
     initializeCli: (remotionRoot: string) => Promise<void>;
     BooleanFlags: string[];
     quietFlagProvided: () => boolean;
-    parsedCli: import("./parse-command-line").CommandLineOptions & {
+    parsedCli: {
+        "browser-executable": import("@remotion/renderer").BrowserExecutable;
+        "pixel-format": "yuv420p" | "yuva420p" | "yuv422p" | "yuv444p" | "yuv420p10le" | "yuv422p10le" | "yuv444p10le" | "yuva444p10le";
+        "image-format": "png" | "jpeg" | "pdf" | "webp" | "none";
+        "prores-profile": "4444-xq" | "4444" | "hq" | "standard" | "light" | "proxy";
+        "bundle-cache": string;
+        "env-file": string;
+        "ignore-certificate-errors": string;
+        "disable-web-security": string;
+        "every-nth-frame": number;
+        "number-of-gif-loops": number;
+        "number-of-shared-audio-tags": number;
+        codec: "h264" | "h265" | "vp8" | "vp9" | "mp3" | "aac" | "wav" | "prores" | "h264-mkv" | "gif";
+        concurrency: number;
+        timeout: number;
+        config: string;
+        "public-dir": string;
+        "audio-bitrate": string;
+        "video-bitrate": string;
+        "audio-codec": "mp3" | "aac" | "pcm-16" | "opus";
+        crf: number;
+        force: boolean;
+        overwrite: boolean;
+        png: boolean;
+        props: string;
+        quality: number;
+        "jpeg-quality": number;
+        frames: string | number;
+        scale: number;
+        sequence: boolean;
+        quiet: boolean;
+        q: boolean;
+        log: string;
+        help: boolean;
+        port: number;
+        frame: string | number;
+        "disable-headless": boolean;
+        "disable-keyboard-shortcuts": boolean;
+        muted: boolean;
+        height: number;
+        width: number;
+        runs: number;
+        concurrencies: string;
+        "enforce-audio-track": boolean;
+        gl: "swangle" | "angle" | "egl" | "swiftshader";
+        "package-manager": string;
+        "webpack-poll": number;
+        "no-open": boolean;
+        browser: string;
+        "browser-args": string;
+        "user-agent": string;
+    } & {
         _: string[];
     };
     handleCommonError: (err: Error) => Promise<void>;

package/dist/list-of-remotion-packages.js

@@ -23,5 +23,6 @@ exports.listOfRemotionPackages = [
     '@remotion/rive',
     '@remotion/gif',
     '@remotion/shapes',
+    '@remotion/z-color',
     'remotion',
 ];

package/dist/parse-command-line.d.ts

@@ -1,5 +1,5 @@
 import type { AudioCodec, BrowserExecutable, Codec, OpenGlRenderer, PixelFormat, ProResProfile, StillImageFormat, VideoImageFormat } from '@remotion/renderer';
-export declare type CommandLineOptions = {
+declare type CommandLineOptions = {
     ['browser-executable']: BrowserExecutable;
     ['pixel-format']: PixelFormat;
     ['image-format']: VideoImageFormat | StillImageFormat;
@@ -49,6 +49,7 @@ export declare type CommandLineOptions = {
     ['no-open']: boolean;
     ['browser']: string;
     ['browser-args']: string;
+    ['user-agent']: string;
 };
 export declare const BooleanFlags: string[];
 export declare const parsedCli: CommandLineOptions & {
@@ -56,3 +57,4 @@ export declare const parsedCli: CommandLineOptions & {
 };
 export declare const parseCommandLine: () => void;
 export declare const quietFlagProvided: () => boolean;
+export {};

package/dist/parse-command-line.js

@@ -56,6 +56,9 @@ const parseCommandLine = () => {
     if (exports.parsedCli['disable-headless']) {
         config_1.Config.setChromiumHeadlessMode(false);
     }
+    if (exports.parsedCli['user-agent']) {
+        config_1.Config.setChromiumUserAgent(exports.parsedCli['user-agent']);
+    }
     if (exports.parsedCli.log) {
         if (!renderer_1.RenderInternals.isValidLogLevel(exports.parsedCli.log)) {
             log_1.Log.error('Invalid `--log` value passed.');

package/dist/preview-server/api-types.d.ts

@@ -8,10 +8,6 @@ export declare type ApiHandler<ReqData, ResData> = (params: {
     request: IncomingMessage;
     response: ServerResponse;
 }) => Promise<ResData>;
-export declare type ApiRoute<ReqData, ResData> = {
-    handler: ApiHandler<ReqData, ResData>;
-    endpoint: string;
-};
 declare type ReqAndRes<A, B> = {
     Request: A;
     Response: B;

package/dist/preview-server/dev-middleware/middleware.d.ts

@@ -1,7 +1,6 @@
 /// <reference types="node" />
 import type { IncomingMessage, ServerResponse } from 'http';
 import type { DevMiddlewareContext } from './types';
-export declare function getFilenameFromUrl(context: DevMiddlewareContext, url: string | undefined): string | undefined;
 export declare function getValueContentRangeHeader(type: string, size: number, range?: {
     start: number;
     end: number;

package/dist/preview-server/dev-middleware/middleware.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.middleware = exports.getValueContentRangeHeader = exports.getFilenameFromUrl = void 0;
+exports.middleware = exports.getValueContentRangeHeader = void 0;
 const renderer_1 = require("@remotion/renderer");
 const path_1 = __importDefault(require("path"));
 const querystring_1 = __importDefault(require("querystring"));
@@ -92,7 +92,6 @@ function getFilenameFromUrl(context, url) {
     }
     return foundFilename;
 }
-exports.getFilenameFromUrl = getFilenameFromUrl;
 function getValueContentRangeHeader(type, size, range) {
     return `${type} ${range ? `${range.start}-${range.end}` : '*'}/${size}`;
 }

package/dist/preview-server/error-overlay/remotion-overlay/Button.d.ts

@@ -1,8 +1,11 @@
 import React from 'react';
-export declare const Button: React.FC<{
+export declare const Button: React.ForwardRefExoticComponent<{
     onClick: () => void;
-    disabled?: boolean;
+    disabled?: boolean | undefined;
     children: React.ReactNode;
-    style?: React.CSSProperties;
-    autoFocus?: boolean;
-}>;
+    style?: React.CSSProperties | undefined;
+    buttonContainerStyle?: React.CSSProperties | undefined;
+    autoFocus?: boolean | undefined;
+    title?: string | undefined;
+    id?: string | undefined;
+} & React.RefAttributes<HTMLButtonElement>>;

package/dist/preview-server/error-overlay/remotion-overlay/Button.js

@@ -14,7 +14,7 @@ const button = {
     color: 'white',
     flexDirection: 'row',
 };
-const Button = ({ children, onClick, disabled, style, autoFocus }) => {
+const ButtonRefForwardFunction = ({ children, onClick, title, disabled, style, id, autoFocus, buttonContainerStyle, }, ref) => {
     const combined = (0, react_1.useMemo)(() => {
         return {
             ...button,
@@ -27,8 +27,9 @@ const Button = ({ children, onClick, disabled, style, autoFocus }) => {
             cursor: disabled ? 'inherit' : 'pointer',
             fontSize: 14,
             opacity: disabled ? 0.7 : 1,
+            ...(buttonContainerStyle !== null && buttonContainerStyle !== void 0 ? buttonContainerStyle : {}),
         };
-    }, [disabled]);
-    return ((0, jsx_runtime_1.jsx)("button", { style: combined, type: "button", disabled: disabled, onClick: onClick, autoFocus: autoFocus, children: (0, jsx_runtime_1.jsx)("div", { className: "css-reset", style: buttonContainer, children: children }) }));
+    }, [buttonContainerStyle, disabled]);
+    return ((0, jsx_runtime_1.jsx)("button", { ref: ref, id: id, style: combined, type: "button", disabled: disabled, onClick: onClick, autoFocus: autoFocus, title: title, children: (0, jsx_runtime_1.jsx)("div", { className: "css-reset", style: buttonContainer, children: children }) }));
 };
-exports.Button = Button;
+exports.Button = (0, react_1.forwardRef)(ButtonRefForwardFunction);

package/dist/preview-server/hot-middleware/client.js

@@ -6,8 +6,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
  * https://github.com/webpack-contrib/webpack-hot-middleware#readme
  * and rewritten in TypeScript. This file is MIT licensed
  */
+const ansi_split_1 = require("../../ansi/ansi-split");
 const process_update_1 = require("./process-update");
-const strip_ansi_1 = require("./strip-ansi");
 const types_1 = require("./types");
 if (typeof window === 'undefined') {
     // do nothing
@@ -107,7 +107,7 @@ function createReporter() {
         }
         const newProblems = obj[type]
             .map((msg) => {
-            return (0, strip_ansi_1.stripAnsi)(msg);
+            return (0, ansi_split_1.stripAnsi)(msg);
         })
             .join('\n');
         if (previousProblems === newProblems) {

package/dist/preview-server/public-folder.d.ts

@@ -9,9 +9,4 @@ export declare const fetchFolder: ({ publicDir, staticHash, }: {
     publicDir: string;
     staticHash: string;
 }) => void;
-export declare const watchPublicFolder: ({ publicDir, onUpdate, staticHash, }: {
-    publicDir: string;
-    onUpdate: () => void;
-    staticHash: string;
-}) => void;
 export declare const getFiles: () => StaticFile[];