@remotion/cli 4.0.0-alpha4 → 4.0.0-alpha5

package/dist/editor/helpers/use-menu-structure.js

@@ -15,9 +15,9 @@ const checkerboard_1 = require("../state/checkerboard");
 const editor_zoom_gestures_1 = require("../state/editor-zoom-gestures");
 const modals_1 = require("../state/modals");
 const preview_size_1 = require("../state/preview-size");
-const rich_timeline_1 = require("../state/rich-timeline");
 const sidebar_1 = require("../state/sidebar");
 const timeline_ref_1 = require("../state/timeline-ref");
+const client_id_1 = require("./client-id");
 const open_in_editor_1 = require("./open-in-editor");
 const pick_color_1 = require("./pick-color");
 const use_keybinding_1 = require("./use-keybinding");
@@ -32,9 +32,9 @@ const useMenuStructure = (closeMenu) => {
     const { setSelectedModal } = (0, react_1.useContext)(modals_1.ModalsContext);
     const { checkerboard, setCheckerboard } = (0, react_1.useContext)(checkerboard_1.CheckerboardContext);
     const { editorZoomGestures, setEditorZoomGestures } = (0, react_1.useContext)(editor_zoom_gestures_1.EditorZoomGesturesContext);
-    const { richTimeline, setRichTimeline } = (0, react_1.useContext)(rich_timeline_1.RichTimelineContext);
     const { size, setSize } = (0, react_1.useContext)(preview_size_1.PreviewSizeContext);
-    const { setSidebarCollapsedState, sidebarCollapsedState } = (0, react_1.useContext)(sidebar_1.SidebarContext);
+    const { type } = (0, react_1.useContext)(client_id_1.PreviewServerConnectionCtx);
+    const { setSidebarCollapsedState, sidebarCollapsedStateLeft, sidebarCollapsedStateRight, } = (0, react_1.useContext)(sidebar_1.SidebarContext);
     const sizes = (0, SizeSelector_1.getUniqueSizes)(size);
     const structure = (0, react_1.useMemo)(() => {
         const struct = [
@@ -127,6 +127,35 @@ const useMenuStructure = (closeMenu) => {
                         subMenu: null,
                         quickSwitcherLabel: 'New still...',
                     },
+                    {
+                        type: 'divider',
+                        id: 'new-divider',
+                    },
+                    {
+                        id: 'render',
+                        value: 'render',
+                        label: 'Render...',
+                        onClick: () => {
+                            closeMenu();
+                            if (type !== 'connected') {
+                                (0, NotificationCenter_1.sendErrorNotification)('Preview server is offline');
+                                return;
+                            }
+                            const renderButton = document.getElementById('render-modal-button');
+                            renderButton.click();
+                        },
+                        type: 'item',
+                        keyHint: 'R',
+                        leftItem: null,
+                        subMenu: null,
+                        quickSwitcherLabel: 'Render...',
+                    },
+                    window.remotion_editorName
+                        ? {
+                            type: 'divider',
+                            id: 'open-in-editor-divider',
+                        }
+                        : null,
                     window.remotion_editorName
                         ? {
                             id: 'open-in-editor',
@@ -142,25 +171,13 @@ const useMenuStructure = (closeMenu) => {
                                 })
                                     .then((res) => res.json())
                                     .then(({ success }) => {
-                                    var _a;
                                     if (!success) {
-                                        (_a = NotificationCenter_1.notificationCenter.current) === null || _a === void 0 ? void 0 : _a.addNotification({
-                                            content: `Could not open ${window.remotion_editorName}`,
-                                            duration: 2000,
-                                            created: Date.now(),
-                                            id: String(Math.random()),
-                                        });
+                                        (0, NotificationCenter_1.sendErrorNotification)(`Could not open ${window.remotion_editorName}`);
                                     }
                                 })
                                     .catch((err) => {
-                                    var _a;
                                     console.error(err);
-                                    (_a = NotificationCenter_1.notificationCenter.current) === null || _a === void 0 ? void 0 : _a.addNotification({
-                                        content: `Could not open ${window.remotion_editorName}`,
-                                        duration: 2000,
-                                        created: Date.now(),
-                                        id: String(Math.random()),
-                                    });
+                                    (0, NotificationCenter_1.sendErrorNotification)(`Could not open ${window.remotion_editorName}`);
                                 });
                             },
                             type: 'item',
@@ -229,7 +246,7 @@ const useMenuStructure = (closeMenu) => {
                     },
                     {
                         id: 'left-sidebar',
-                        label: 'Sidebar',
+                        label: 'Left Sidebar',
                         keyHint: null,
                         type: 'item',
                         value: 'preview-size',
@@ -240,27 +257,74 @@ const useMenuStructure = (closeMenu) => {
                             preselectIndex: 0,
                             items: [
                                 {
-                                    id: 'sidebar-responsive',
+                                    id: 'left-sidebar-responsive',
                                     keyHint: null,
                                     label: 'Responsive',
-                                    leftItem: sidebarCollapsedState === 'responsive' ? ((0, jsx_runtime_1.jsx)(Checkmark_1.Checkmark, {})) : null,
+                                    leftItem: sidebarCollapsedStateLeft === 'responsive' ? ((0, jsx_runtime_1.jsx)(Checkmark_1.Checkmark, {})) : null,
                                     onClick: () => {
                                         closeMenu();
-                                        setSidebarCollapsedState('responsive');
+                                        setSidebarCollapsedState({
+                                            left: 'responsive',
+                                            right: null,
+                                        });
                                     },
                                     subMenu: null,
                                     type: 'item',
                                     value: 'responsive',
                                     quickSwitcherLabel: null,
                                 },
+                                {
+                                    id: 'left-sidebar-expanded',
+                                    keyHint: null,
+                                    label: 'Expanded',
+                                    leftItem: sidebarCollapsedStateLeft === 'expanded' ? ((0, jsx_runtime_1.jsx)(Checkmark_1.Checkmark, {})) : null,
+                                    onClick: () => {
+                                        closeMenu();
+                                        setSidebarCollapsedState({ left: 'expanded', right: null });
+                                    },
+                                    subMenu: null,
+                                    type: 'item',
+                                    value: 'expanded',
+                                    quickSwitcherLabel: 'Expand',
+                                },
+                                {
+                                    id: 'left-sidebar-collapsed',
+                                    keyHint: null,
+                                    label: 'Collapsed',
+                                    leftItem: sidebarCollapsedStateLeft === 'collapsed' ? ((0, jsx_runtime_1.jsx)(Checkmark_1.Checkmark, {})) : null,
+                                    onClick: () => {
+                                        closeMenu();
+                                        setSidebarCollapsedState({ left: 'collapsed', right: null });
+                                    },
+                                    subMenu: null,
+                                    type: 'item',
+                                    value: 'collapsed',
+                                    quickSwitcherLabel: 'Collapse',
+                                },
+                            ],
+                        },
+                        onClick: () => undefined,
+                    },
+                    {
+                        id: 'right-sidebar',
+                        label: 'Right Sidebar',
+                        keyHint: null,
+                        type: 'item',
+                        value: 'preview-size',
+                        leftItem: null,
+                        quickSwitcherLabel: null,
+                        subMenu: {
+                            leaveLeftSpace: true,
+                            preselectIndex: 0,
+                            items: [
                                 {
                                     id: 'sidebar-expanded',
                                     keyHint: null,
                                     label: 'Expanded',
-                                    leftItem: sidebarCollapsedState === 'expanded' ? (0, jsx_runtime_1.jsx)(Checkmark_1.Checkmark, {}) : null,
+                                    leftItem: sidebarCollapsedStateRight === 'expanded' ? ((0, jsx_runtime_1.jsx)(Checkmark_1.Checkmark, {})) : null,
                                     onClick: () => {
                                         closeMenu();
-                                        setSidebarCollapsedState('expanded');
+                                        setSidebarCollapsedState({ left: null, right: 'expanded' });
                                     },
                                     subMenu: null,
                                     type: 'item',
@@ -268,13 +332,13 @@ const useMenuStructure = (closeMenu) => {
                                     quickSwitcherLabel: 'Expand',
                                 },
                                 {
-                                    id: 'sidebar-collapsed',
+                                    id: 'right-sidebar-collapsed',
                                     keyHint: null,
                                     label: 'Collapsed',
-                                    leftItem: sidebarCollapsedState === 'collapsed' ? ((0, jsx_runtime_1.jsx)(Checkmark_1.Checkmark, {})) : null,
+                                    leftItem: sidebarCollapsedStateRight === 'collapsed' ? ((0, jsx_runtime_1.jsx)(Checkmark_1.Checkmark, {})) : null,
                                     onClick: () => {
                                         closeMenu();
-                                        setSidebarCollapsedState('collapsed');
+                                        setSidebarCollapsedState({ left: null, right: 'collapsed' });
                                     },
                                     subMenu: null,
                                     type: 'item',
@@ -309,22 +373,6 @@ const useMenuStructure = (closeMenu) => {
                         id: 'timeline-divider-3',
                         type: 'divider',
                     },
-                    {
-                        id: 'rich-timeline',
-                        keyHint: null,
-                        label: 'Rich timeline',
-                        onClick: () => {
-                            closeMenu();
-                            setRichTimeline((r) => !r);
-                        },
-                        type: 'item',
-                        value: 'rich-timeline',
-                        leftItem: richTimeline ? (0, jsx_runtime_1.jsx)(Checkmark_1.Checkmark, {}) : null,
-                        subMenu: null,
-                        quickSwitcherLabel: richTimeline
-                            ? 'Timeline: Disable Rich Timeline'
-                            : 'Timeline: Enable Rich Timeline',
-                    },
                     {
                         id: 'expand-all',
                         keyHint: null,
@@ -586,19 +634,19 @@ const useMenuStructure = (closeMenu) => {
         ].filter(remotion_1.Internals.truthy);
         return struct;
     }, [
+        sizes,
+        editorZoomGestures,
+        sidebarCollapsedStateLeft,
+        sidebarCollapsedStateRight,
         checkerboard,
         closeMenu,
-        editorZoomGestures,
-        richTimeline,
-        setCheckerboard,
-        setEditorZoomGestures,
-        setRichTimeline,
         setSelectedModal,
-        setSidebarCollapsedState,
-        setSize,
-        sidebarCollapsedState,
+        type,
         size.size,
-        sizes,
+        setSize,
+        setEditorZoomGestures,
+        setSidebarCollapsedState,
+        setCheckerboard,
     ]);
     return structure;
 };

package/dist/editor/helpers/validate-new-comp-data.d.ts

@@ -1,4 +1,4 @@
-import type { TComposition } from 'remotion';
-export declare const validateCompositionName: (compName: string, compositions: TComposition<unknown>[]) => string | null;
+import type { AnyComposition } from 'remotion';
+export declare const validateCompositionName: (compName: string, compositions: AnyComposition[]) => string | null;
 export declare const validateCompositionDimension: (dimension: 'Width' | 'Height', value: string) => string | null;
 export declare const validateCompositionDuration: (value: string) => string | null;

package/dist/editor/icons/Checkmark.js

@@ -6,5 +6,5 @@ const style = {
     width: 14,
     height: 14,
 };
-const Checkmark = () => ((0, jsx_runtime_1.jsx)("svg", { "aria-hidden": "true", focusable: "false", "data-prefix": "far", "data-icon": "check", className: "svg-inline--fa fa-check fa-w-16", role: "img", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 512 512", style: style, children: (0, jsx_runtime_1.jsx)("path", { fill: "currentColor", d: "M435.848 83.466L172.804 346.51l-96.652-96.652c-4.686-4.686-12.284-4.686-16.971 0l-28.284 28.284c-4.686 4.686-4.686 12.284 0 16.971l133.421 133.421c4.686 4.686 12.284 4.686 16.971 0l299.813-299.813c4.686-4.686 4.686-12.284 0-16.971l-28.284-28.284c-4.686-4.686-12.284-4.686-16.97 0z" }) }));
+const Checkmark = () => ((0, jsx_runtime_1.jsx)("svg", { focusable: "false", role: "img", viewBox: "0 0 512 512", style: style, children: (0, jsx_runtime_1.jsx)("path", { fill: "currentColor", d: "M435.848 83.466L172.804 346.51l-96.652-96.652c-4.686-4.686-12.284-4.686-16.971 0l-28.284 28.284c-4.686 4.686-4.686 12.284 0 16.971l133.421 133.421c4.686 4.686 12.284 4.686 16.971 0l299.813-299.813c4.686-4.686 4.686-12.284 0-16.971l-28.284-28.284c-4.686-4.686-12.284-4.686-16.97 0z" }) }));
 exports.Checkmark = Checkmark;

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

@@ -0,0 +1,2 @@
+import type { SVGProps } from 'react';
+export declare const AudioIcon: (props: SVGProps<SVGSVGElement>) => JSX.Element;

package/dist/editor/icons/audio.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AudioIcon = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const AudioIcon = (props) => ((0, jsx_runtime_1.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 512 512", ...props, children: (0, jsx_runtime_1.jsx)("path", { fill: "currentcolor", d: "M243 32.32C105.5 39.15 0 157.8 0 295.5v120.4C0 451.3 28.63 480 64 480h32c17.62 0 32-14.38 32-32V288c0-17.62-14.38-32-32-32H64c-10.79 0-20.8 2.9-29.72 7.7 14.2-106.8 100.5-193.9 210.4-199.4 120.5-5.965 221.7 83.92 234 199.9-9.08-5.1-19.48-8.2-30.68-8.2h-32c-17.62 0-32 14.38-32 32v160c0 17.62 14.38 32 32 32h32c35.38 0 64-28.75 64-64.13V287.9c0-145.4-122-262.88-269-255.58zM64 288h32v160H64c-17.62 0-32-14.5-32-32.13v-95.75C32 302.5 46.38 288 64 288zm416 127.9c0 17.6-14.4 32.1-32 32.1h-32V288h32c17.62 0 32 14.5 32 32.13v95.77z" }) }));
+exports.AudioIcon = AudioIcon;

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

@@ -1,3 +1,6 @@
-/// <reference types="react" />
+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,16 +1,32 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.CaretDown = exports.CaretRight = 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 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/icons/data.d.ts

@@ -0,0 +1,2 @@
+import type { SVGProps } from 'react';
+export declare const DataIcon: (props: SVGProps<SVGSVGElement>) => JSX.Element;

package/dist/editor/icons/data.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DataIcon = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const DataIcon = (props) => {
+    return ((0, jsx_runtime_1.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 448 512", ...props, children: (0, jsx_runtime_1.jsx)("path", { fill: "currentcolor", d: "M224 512C100.3 512 0 476.2 0 432V80C0 35.82 100.3 0 224 0C347.7 0 448 35.82 448 80V432C448 476.2 347.7 512 224 512zM416 80.45C415.7 79.69 414.4 77.27 409.8 73.31C402.4 67.11 389.9 60.09 371.6 53.57C335.4 40.62 283.2 32 224 32C164.8 32 112.6 40.62 76.37 53.57C58.1 60.09 45.59 67.11 38.25 73.31C33.55 77.27 32.29 79.69 32 80.45V182.1C46.47 192.7 69.9 202.8 100.9 210.4C135.5 218.9 177.1 224 224 224C270 224 312.5 218.9 347.1 210.4C378.1 202.8 401.5 192.7 416 182.1V80.45zM416 219.5C398.8 228.4 377.9 235.8 354.8 241.5C317.3 250.7 272.2 256 224 256C175.8 256 130.7 250.7 93.22 241.5C70.11 235.8 49.18 228.4 32 219.5V310.1C46.47 320.7 69.9 330.8 100.9 338.4C135.5 346.9 177.1 352 224 352C270 352 312.5 346.9 347.1 338.4C378.1 330.8 401.5 320.7 416 310.1V219.5zM38.25 438.7C45.59 444.9 58.1 451.9 76.37 458.4C112.6 471.4 164.8 480 224 480C283.2 480 335.4 471.4 371.6 458.4C389.9 451.9 402.4 444.9 409.8 438.7C414.4 434.7 415.7 432.3 416 431.6V347.5C398.8 356.4 377.9 363.8 354.8 369.5C317.3 378.7 272.2 384 224 384C175.8 384 130.7 378.7 93.22 369.5C70.11 363.8 49.18 356.4 32 347.5V431.6C32.29 432.3 33.55 434.7 38.25 438.7zM416 431.4C416.1 431.3 416.1 431.3 416.1 431.3L416 431.4zM31.96 431.4C31.94 431.3 31.93 431.3 31.92 431.3L31.96 431.4zM31.96 80.56C31.93 80.65 31.92 80.7 31.92 80.7L31.96 80.56zM416.1 80.7C416.1 80.7 416.1 80.65 416 80.56z" }) }));
+};
+exports.DataIcon = DataIcon;

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

@@ -0,0 +1,2 @@
+import type { SVGProps } from 'react';
+export declare const FileIcon: (props: SVGProps<SVGSVGElement>) => JSX.Element;

package/dist/editor/icons/file.js

@@ -0,0 +1,6 @@
+"use strict";
+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" }) }));
+exports.FileIcon = FileIcon;

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

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

package/dist/editor/icons/folder.js

@@ -2,11 +2,11 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ExpandedFolderIcon = exports.CollapsedFolderIcon = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const CollapsedFolderIcon = (props) => {
-    return ((0, jsx_runtime_1.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 512 512", ...props, children: (0, jsx_runtime_1.jsx)("path", { fill: "white", d: "M464 128H272l-64-64H48C21.49 64 0 85.49 0 112v288c0 26.51 21.49 48 48 48h416c26.51 0 48-21.49 48-48V176c0-26.51-21.49-48-48-48z" }) }));
+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" }) }));
 };
 exports.CollapsedFolderIcon = CollapsedFolderIcon;
-const ExpandedFolderIcon = (props) => {
-    return ((0, jsx_runtime_1.jsx)("svg", { ...props, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 576 512", children: (0, jsx_runtime_1.jsx)("path", { fill: "white", d: "M572.694 292.093L500.27 416.248A63.997 63.997 0 0 1 444.989 448H45.025c-18.523 0-30.064-20.093-20.731-36.093l72.424-124.155A64 64 0 0 1 152 256h399.964c18.523 0 30.064 20.093 20.73 36.093zM152 224h328v-48c0-26.51-21.49-48-48-48H272l-64-64H48C21.49 64 0 85.49 0 112v278.046l69.077-118.418C86.214 242.25 117.989 224 152 224z" }) }));
+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;

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

@@ -0,0 +1,2 @@
+import type { SVGProps } from 'react';
+export declare const PicIcon: (props: SVGProps<SVGSVGElement>) => JSX.Element;

package/dist/editor/icons/frame.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PicIcon = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const PicIcon = (props) => ((0, jsx_runtime_1.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 512 512", ...props, children: (0, jsx_runtime_1.jsx)("path", { fill: "currentcolor", d: "M324.9 157.8c-11.38-17.38-39.89-17.31-51.23-.063L200.5 268.5l-16.4-22.6c-11.4-16.8-38.2-16-49.7 0l-64.52 89.16c-6.797 9.406-7.75 21.72-2.547 32C72.53 377.5 83.05 384 94.75 384h322.5c11.41 0 21.8-6.281 27.14-16.38a30.922 30.922 0 0 0-1.516-31.56L324.9 157.8zM95.8 352l62.39-87.38 29.91 41.34c3.1 4.24 8.3 7.24 13.3 6.64 5.25-.125 10.12-2.781 13.02-7.188l83.83-129.9L415 352H95.8zM447.1 32h-384C28.65 32-.01 60.65-.01 96v320c0 35.35 28.65 64 63.1 64h384c35.35 0 64-28.65 64-64V96c.01-35.35-27.79-64-63.99-64zM480 416c0 17.64-14.36 32-32 32H64c-17.64 0-32-14.36-32-32V96c0-17.64 14.36-32 32-32h384c17.64 0 32 14.36 32 32v320zM144 192c26.5 0 48-21.5 48-48s-21.5-48-48-48-48 21.5-48 48 21.5 48 48 48zm0-64c8.822 0 15.1 7.178 15.1 16s-6.3 16-15.1 16-16-7.2-16-16 7.2-16 16-16z" }) }));
+exports.PicIcon = PicIcon;

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

@@ -0,0 +1,2 @@
+import type { SVGProps } from 'react';
+export declare const GearIcon: (props: SVGProps<SVGSVGElement>) => JSX.Element;

package/dist/editor/icons/gear.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.GearIcon = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const GearIcon = (props) => ((0, jsx_runtime_1.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 512 512", ...props, children: (0, jsx_runtime_1.jsx)("path", { fill: "currentcolor", d: "M168 255.1c0-47.7 39.4-88 88-88s88 40.3 88 88c0 49.5-39.4 88.9-88 88.9s-88-39.4-88-88.9zm88-56c-30.9 0-56 26-56 56 0 31.8 25.1 56 56 56s56-24.2 56-56c0-30-25.1-56-56-56zM65.67 230.6l-40.33-36.8c-11.12-10.1-13.68-26.6-6.16-39.6l30.24-52.4c7.52-13.02 23.09-19.05 37.42-14.48l51.96 16.58c13.4-10.34 28.2-18.94 44-25.47l11.7-53.27C197.7 10.47 210.7 0 225.8 0h60.4c15.1 0 28.1 10.47 31.3 25.16l11.7 53.27c14.9 6.53 30.6 15.13 44 25.47l52-16.58c14.3-4.57 29.9 1.46 37.4 14.48l30.2 52.4c7.5 13 5 29.5-6.1 39.6l-40.4 36.8c1.1 8.3 1.7 16.8 1.7 24.5 0 9.5-.6 18-1.7 26.3l40.4 36.8c11.1 10.1 13.6 26.6 6.1 39.6l-30.2 52.4c-7.5 13-23.1 19-37.4 14.5l-52-16.6c-13.4 10.3-29.1 18.9-44 25.5l-11.7 53.2c-3.2 14.7-16.2 25.2-31.3 25.2h-60.4c-15.1 0-28.1-10.5-31.3-25.2l-11.7-53.2c-15.8-6.6-30.6-15.2-44-25.5l-51.96 16.6c-14.33 4.5-29.9-1.5-37.42-14.5l-30.24-52.4c-7.52-13-4.96-29.5 6.16-39.6l40.33-36.8c-1.1-8.3-1.67-16.8-1.67-26.3 0-7.7.57-16.2 1.67-24.5zm92.73-101.4-13.3 10.3-67.97-21.7-30.24 52.4 52.69 48-2.19 16.6c-.92 6.9-1.39 14-1.39 20.3 0 8.1.47 15.2 1.39 22.1l2.19 16.6-52.69 48 30.24 52.4 67.97-21.7 13.3 10.3c11.1 8.6 23.5 15.8 36.6 20.3l15.5 7.3 15.3 69.6h60.4l15.3-69.6 14.6-7.3c14-4.5 26.4-11.7 37.5-20.3l13.3-10.3 68 21.7 30.2-52.4-52.7-48 2.2-16.6c.9-6.9 1.4-14 1.4-21.2 0-7.2-.5-14.3-1.4-21.2l-2.2-16.6 52.7-48-30.2-52.4-68 21.7-13.3-10.3c-11.1-8.6-23.5-15.8-37.5-21.2l-14.6-6.4L286.2 32h-60.4l-15.3 69.6L195 108c-13.1 5.4-25.5 12.6-36.6 21.2z" }) }));
+exports.GearIcon = GearIcon;

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

@@ -0,0 +1,2 @@
+import type { SVGProps } from 'react';
+export declare const GifIcon: (props: SVGProps<SVGSVGElement>) => JSX.Element;

package/dist/editor/icons/gif.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.GifIcon = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const GifIcon = (props) => ((0, jsx_runtime_1.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 576 512", ...props, children: (0, jsx_runtime_1.jsx)("path", { fill: "currentcolor", d: "M512 32H64C28.65 32 0 60.65 0 96v320c0 35.35 28.65 64 64 64h448c35.35 0 64-28.65 64-64V96c0-35.35-28.7-64-64-64zm32 384c0 17.64-14.36 32-32 32H64c-17.64 0-32-14.36-32-32V96c0-17.64 14.36-32 32-32h448c17.64 0 32 14.36 32 32v320zm-80-256h-96c-8.8 0-16 7.2-16 16v160c0 8.844 7.156 16 16 16s16-7.156 16-16v-64h56c8.844 0 16-7.156 16-16s-7.156-16-16-16h-56v-48h80c8.8 0 16-7.2 16-16s-7.2-16-16-16zm-160 0c-8.8 0-16 7.2-16 16v160c0 8.844 7.156 16 16 16s16-7.156 16-16V176c0-8.8-7.2-16-16-16zm-64 80h-64c-8.8 0-16 7.2-16 16s7.156 16 16 16h48v33.45c-24.83 19.91-69.13 18.16-91.48-4.203-24.95-24.95-24.95-65.55 0-90.5 25.03-25 64.19-25 89.22 0 6.25 6.25 16.38 6.25 22.62 0s6.25-16.38 0-22.62c-37.69-37.72-96.78-37.72-134.5 0-37.42 37.42-37.42 98.33 0 135.8C127.8 341.8 153.5 352 180.6 352c27.06 0 52.84-10.25 70.7-28.12 3-2.98 4.7-7.08 4.7-11.28V256c0-8.8-7.2-16-16-16z" }) }));
+exports.GifIcon = GifIcon;

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

@@ -0,0 +1,9 @@
+import type { SVGProps } from 'react';
+import React from 'react';
+export declare const RenderIcon: React.FC<{
+    svgProps: SVGProps<SVGSVGElement>;
+}>;
+export declare const ThinRenderIcon: React.FC<{
+    svgProps: SVGProps<SVGSVGElement>;
+    fill: string;
+}>;

package/dist/editor/icons/render.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ThinRenderIcon = exports.RenderIcon = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const RenderIcon = (props) => {
+    return ((0, jsx_runtime_1.jsx)("svg", { ...props.svgProps, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 512 512", children: (0, jsx_runtime_1.jsx)("path", { fill: 'currentColor', d: "M156.6 384.9L125.7 354c-8.5-8.5-11.5-20.8-7.7-32.2c3-8.9 7-20.5 11.8-33.8L24 288c-8.6 0-16.6-4.6-20.9-12.1s-4.2-16.7 .2-24.1l52.5-88.5c13-21.9 36.5-35.3 61.9-35.3l82.3 0c2.4-4 4.8-7.7 7.2-11.3C289.1-4.1 411.1-8.1 483.9 5.3c11.6 2.1 20.6 11.2 22.8 22.8c13.4 72.9 9.3 194.8-111.4 276.7c-3.5 2.4-7.3 4.8-11.3 7.2v82.3c0 25.4-13.4 49-35.3 61.9l-88.5 52.5c-7.4 4.4-16.6 4.5-24.1 .2s-12.1-12.2-12.1-20.9V380.8c-14.1 4.9-26.4 8.9-35.7 11.9c-11.2 3.6-23.4 .5-31.8-7.8zM384 168a40 40 0 1 0 0-80 40 40 0 1 0 0 80z" }) }));
+};
+exports.RenderIcon = RenderIcon;
+const ThinRenderIcon = (props) => {
+    return ((0, jsx_runtime_1.jsx)("svg", { ...props.svgProps, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 512 512", children: (0, jsx_runtime_1.jsx)("path", { fill: props.fill, d: "M188.9 372l-50.4-50.4c18.6-42.6 61.7-137.7 95.1-187C304.6 30.1 409 24.6 475.7 36.3c11.7 66.7 6.2 171.1-98.4 242c-49.4 33.5-145.5 75.6-188.4 93.7zm-79.9-62.8c-5.2 11.9-2.5 25.7 6.7 34.9l50.7 50.7c9.1 9.1 22.7 11.9 34.5 6.9c6.5-2.7 14.3-6 23-9.8L224 496c0 5.5 2.9 10.7 7.6 13.6s10.6 3.2 15.6 .7l101.5-50.7c21.7-10.8 35.4-33 35.4-57.2V312.1c4-2.5 7.7-4.9 11.3-7.3C516.1 222.9 520.1 100.9 506.7 28.1c-2.1-11.6-11.2-20.6-22.8-22.8C411.1-8.1 289.1-4.1 207.2 116.7c-2.4 3.6-4.9 7.3-7.3 11.3l-90.2 0c-24.2 0-46.4 13.7-57.2 35.4L1.7 264.8c-2.5 5-2.2 10.8 .7 15.6s8.1 7.6 13.6 7.6H118.5c-3.6 8-6.8 15.2-9.4 21.2zM256 470.1l0-92.5c30.3-13.7 65.4-30.3 96-47v71.7c0 12.1-6.8 23.2-17.7 28.6L256 470.1zM109.7 160h71.5c-16.9 30.7-34 65.8-48.1 96H41.9L81 177.7c5.4-10.8 16.5-17.7 28.6-17.7zM392 144a24 24 0 1 1 -48 0 24 24 0 1 1 48 0zM368 88a56 56 0 1 0 0 112 56 56 0 1 0 0-112z" }) }));
+};
+exports.ThinRenderIcon = ThinRenderIcon;

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

@@ -1,3 +1,5 @@
 import type { SVGProps } from 'react';
 import React from 'react';
-export declare const StillIcon: React.FC<SVGProps<SVGSVGElement>>;
+export declare const StillIcon: React.FC<SVGProps<SVGSVGElement> & {
+    color: string;
+}>;

package/dist/editor/icons/still.js

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.StillIcon = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const StillIcon = (props) => {
-    return ((0, jsx_runtime_1.jsx)("svg", { viewBox: "0 0 512 512", ...props, children: (0, jsx_runtime_1.jsx)("path", { fill: "currentColor", d: "M464 64H48C21.49 64 0 85.49 0 112v288c0 26.51 21.49 48 48 48h416c26.51 0 48-21.49 48-48V112c0-26.51-21.49-48-48-48zm-6 336H54a6 6 0 0 1-6-6V118a6 6 0 0 1 6-6h404a6 6 0 0 1 6 6v276a6 6 0 0 1-6 6zM128 152c-22.091 0-40 17.909-40 40s17.909 40 40 40 40-17.909 40-40-17.909-40-40-40zM96 352h320v-80l-87.515-87.515c-4.686-4.686-12.284-4.686-16.971 0L192 304l-39.515-39.515c-4.686-4.686-12.284-4.686-16.971 0L96 304v48z" }) }));
+const StillIcon = ({ color, ...props }) => {
+    return ((0, jsx_runtime_1.jsx)("svg", { ...props, viewBox: "0 0 512 512", children: (0, jsx_runtime_1.jsx)("path", { fill: color, d: "M144 288C144 226.1 194.1 176 256 176C317.9 176 368 226.1 368 288C368 349.9 317.9 400 256 400C194.1 400 144 349.9 144 288zM256 208C211.8 208 176 243.8 176 288C176 332.2 211.8 368 256 368C300.2 368 336 332.2 336 288C336 243.8 300.2 208 256 208zM362.9 64.82L373.3 96H448C483.3 96 512 124.7 512 160V416C512 451.3 483.3 480 448 480H64C28.65 480 0 451.3 0 416V160C0 124.7 28.65 96 64 96H138.7L149.1 64.82C155.6 45.22 173.9 32 194.6 32H317.4C338.1 32 356.4 45.22 362.9 64.82H362.9zM64 128C46.33 128 32 142.3 32 160V416C32 433.7 46.33 448 64 448H448C465.7 448 480 433.7 480 416V160C480 142.3 465.7 128 448 128H350.3L332.6 74.94C330.4 68.41 324.3 64 317.4 64H194.6C187.7 64 181.6 68.41 179.4 74.94L161.7 128H64z" }) }));
 };
 exports.StillIcon = StillIcon;

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

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

package/dist/editor/icons/video.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FilmIcon = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const FilmIcon = ({ color, ...props }) => {
+    return ((0, jsx_runtime_1.jsx)("svg", { ...props, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 512 512", children: (0, jsx_runtime_1.jsx)("path", { fill: color, d: "M448 32H64C28.65 32 0 60.65 0 96v320c0 35.35 28.65 64 64 64h384c35.35 0 64-28.65 64-64V96C512 60.65 483.3 32 448 32zM384 64v176H128V64H384zM32 96c0-17.64 14.36-32 32-32h32v80H32V96zM32 176h64v64H32V176zM32 272h64v64H32V272zM64 448c-17.64 0-32-14.36-32-32v-48h64V448H64zM128 448V272h256V448H128zM480 416c0 17.64-14.36 32-32 32h-32v-80h64V416zM480 336h-64v-64h64V336zM480 240h-64v-64h64V240zM480 144h-64V64h32c17.64 0 32 14.36 32 32V144z" }) }));
+};
+exports.FilmIcon = FilmIcon;

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

@@ -1,10 +1,48 @@
+import type { AudioCodec, Codec, OpenGlRenderer, PixelFormat, ProResProfile, StillImageFormat, VideoImageFormat } from '@remotion/renderer';
 import type React from 'react';
 import type { QuickSwitcherMode } from '../components/QuickSwitcher/NoResults';
+import type { RenderType } from '../components/RenderModal/RenderModalAdvanced';
 import type { UpdateInfo } from '../components/UpdateCheck';
 export declare type CompType = 'composition' | 'still';
+export declare type RenderModalState = {
+    type: 'render';
+    compositionId: string;
+    initialFrame: number;
+    initialStillImageFormat: StillImageFormat;
+    initialVideoImageFormat: VideoImageFormat;
+    initialJpegQuality: number;
+    initialOutName: string;
+    initialScale: number;
+    initialVerbose: boolean;
+    initialRenderType: RenderType;
+    initialVideoCodecForAudioTab: Codec;
+    initialVideoCodecForVideoTab: Codec;
+    initialAudioCodec: AudioCodec | null;
+    initialConcurrency: number;
+    initialMuted: boolean;
+    initialEnforceAudioTrack: boolean;
+    initialProResProfile: ProResProfile;
+    initialPixelFormat: PixelFormat;
+    initialVideoBitrate: string | null;
+    initialAudioBitrate: string | null;
+    initialEveryNthFrame: number;
+    initialNumberOfGifLoops: number | null;
+    initialDelayRenderTimeout: number;
+    initialEnvVariables: Record<string, string>;
+    initialDisableWebSecurity: boolean;
+    initialOpenGlRenderer: OpenGlRenderer | null;
+    initialIgnoreCertificateErrors: boolean;
+    initialHeadless: boolean;
+    minConcurrency: number;
+    maxConcurrency: number;
+    defaultProps: unknown;
+};
 export declare type ModalState = {
     type: 'new-comp';
     compType: CompType;
+} | RenderModalState | {
+    type: 'render-progress';
+    jobId: string;
 } | {
     type: 'update';
     info: UpdateInfo;

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,10 +1,14 @@
 import React from 'react';
 export declare type SidebarCollapsedState = 'collapsed' | 'expanded' | 'responsive';
+declare type RightSidebarCollapsedState = Exclude<SidebarCollapsedState, 'responsive'>;
 declare type Context = {
-    sidebarCollapsedState: SidebarCollapsedState;
-    setSidebarCollapsedState: (newState: SidebarCollapsedState) => void;
+    sidebarCollapsedStateLeft: SidebarCollapsedState;
+    setSidebarCollapsedState: (options: {
+        left: null | React.SetStateAction<SidebarCollapsedState>;
+        right: null | React.SetStateAction<RightSidebarCollapsedState>;
+    }) => void;
+    sidebarCollapsedStateRight: RightSidebarCollapsedState;
 };
-export declare const getSavedCollapsedState: () => SidebarCollapsedState;
 export declare const SidebarContext: React.Context<Context>;
 export declare const SidebarContextProvider: React.FC<{
     children: React.ReactNode;