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

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 { type } = (0, react_1.useContext)(client_id_1.PreviewServerConnectionCtx);
-    const { setSidebarCollapsedState, sidebarCollapsedStateLeft, sidebarCollapsedStateRight, } = (0, react_1.useContext)(sidebar_1.SidebarContext);
+    const { setSidebarCollapsedState, sidebarCollapsedState } = (0, react_1.useContext)(sidebar_1.SidebarContext);
     const sizes = (0, SizeSelector_1.getUniqueSizes)(size);
     const structure = (0, react_1.useMemo)(() => {
         const struct = [
@@ -127,35 +127,6 @@ 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',
@@ -171,13 +142,25 @@ const useMenuStructure = (closeMenu) => {
                                 })
                                     .then((res) => res.json())
                                     .then(({ success }) => {
+                                    var _a;
                                     if (!success) {
-                                        (0, NotificationCenter_1.sendErrorNotification)(`Could not open ${window.remotion_editorName}`);
+                                        (_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()),
+                                        });
                                     }
                                 })
                                     .catch((err) => {
+                                    var _a;
                                     console.error(err);
-                                    (0, NotificationCenter_1.sendErrorNotification)(`Could not open ${window.remotion_editorName}`);
+                                    (_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()),
+                                    });
                                 });
                             },
                             type: 'item',
@@ -246,7 +229,7 @@ const useMenuStructure = (closeMenu) => {
                     },
                     {
                         id: 'left-sidebar',
-                        label: 'Left Sidebar',
+                        label: 'Sidebar',
                         keyHint: null,
                         type: 'item',
                         value: 'preview-size',
@@ -257,74 +240,27 @@ const useMenuStructure = (closeMenu) => {
                             preselectIndex: 0,
                             items: [
                                 {
-                                    id: 'left-sidebar-responsive',
+                                    id: 'sidebar-responsive',
                                     keyHint: null,
                                     label: 'Responsive',
-                                    leftItem: sidebarCollapsedStateLeft === 'responsive' ? ((0, jsx_runtime_1.jsx)(Checkmark_1.Checkmark, {})) : null,
+                                    leftItem: sidebarCollapsedState === 'responsive' ? ((0, jsx_runtime_1.jsx)(Checkmark_1.Checkmark, {})) : null,
                                     onClick: () => {
                                         closeMenu();
-                                        setSidebarCollapsedState({
-                                            left: 'responsive',
-                                            right: null,
-                                        });
+                                        setSidebarCollapsedState('responsive');
                                     },
                                     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: sidebarCollapsedStateRight === 'expanded' ? ((0, jsx_runtime_1.jsx)(Checkmark_1.Checkmark, {})) : null,
+                                    leftItem: sidebarCollapsedState === 'expanded' ? (0, jsx_runtime_1.jsx)(Checkmark_1.Checkmark, {}) : null,
                                     onClick: () => {
                                         closeMenu();
-                                        setSidebarCollapsedState({ left: null, right: 'expanded' });
+                                        setSidebarCollapsedState('expanded');
                                     },
                                     subMenu: null,
                                     type: 'item',
@@ -332,13 +268,13 @@ const useMenuStructure = (closeMenu) => {
                                     quickSwitcherLabel: 'Expand',
                                 },
                                 {
-                                    id: 'right-sidebar-collapsed',
+                                    id: 'sidebar-collapsed',
                                     keyHint: null,
                                     label: 'Collapsed',
-                                    leftItem: sidebarCollapsedStateRight === 'collapsed' ? ((0, jsx_runtime_1.jsx)(Checkmark_1.Checkmark, {})) : null,
+                                    leftItem: sidebarCollapsedState === 'collapsed' ? ((0, jsx_runtime_1.jsx)(Checkmark_1.Checkmark, {})) : null,
                                     onClick: () => {
                                         closeMenu();
-                                        setSidebarCollapsedState({ left: null, right: 'collapsed' });
+                                        setSidebarCollapsedState('collapsed');
                                     },
                                     subMenu: null,
                                     type: 'item',
@@ -373,6 +309,22 @@ 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,
@@ -634,19 +586,19 @@ const useMenuStructure = (closeMenu) => {
         ].filter(remotion_1.Internals.truthy);
         return struct;
     }, [
-        sizes,
-        editorZoomGestures,
-        sidebarCollapsedStateLeft,
-        sidebarCollapsedStateRight,
         checkerboard,
         closeMenu,
-        setSelectedModal,
-        type,
-        size.size,
-        setSize,
+        editorZoomGestures,
+        richTimeline,
+        setCheckerboard,
         setEditorZoomGestures,
+        setRichTimeline,
+        setSelectedModal,
         setSidebarCollapsedState,
-        setCheckerboard,
+        setSize,
+        sidebarCollapsedState,
+        size.size,
+        sizes,
     ]);
     return structure;
 };

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

@@ -1,4 +1,4 @@
-import type { AnyComposition } from 'remotion';
-export declare const validateCompositionName: (compName: string, compositions: AnyComposition[]) => string | null;
+import type { TComposition } from 'remotion';
+export declare const validateCompositionName: (compName: string, compositions: TComposition<unknown>[]) => 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", { 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" }) }));
+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" }) }));
 exports.Checkmark = Checkmark;

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

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

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

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 = ({ 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" }) }));
+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" }) }));
 };
 exports.CollapsedFolderIcon = CollapsedFolderIcon;
-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" }) }));
+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" }) }));
 };
 exports.ExpandedFolderIcon = ExpandedFolderIcon;

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

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

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 = ({ 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" }) }));
+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" }) }));
 };
 exports.StillIcon = StillIcon;

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

@@ -1,6 +1,6 @@
 import React from 'react';
 export declare type KeyEventType = 'keydown' | 'keyup' | 'keypress';
-declare type KeyListenerCallback = (e: KeyboardEvent) => void;
+export declare type KeyListenerCallback = (e: KeyboardEvent) => void;
 export declare type RegisteredKeybinding = {
     registeredFromPane: string;
     id: string;
@@ -17,4 +17,3 @@ 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,48 +1,10 @@
-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,6 +5,7 @@ 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.persistPreviewSizeOption = void 0;
+exports.PreviewSizeProvider = exports.PreviewSizeContext = exports.loadPreviewSizeOption = 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,12 +22,13 @@ const loadPreviewSizeOption = () => {
     }
     return JSON.parse(item);
 };
+exports.loadPreviewSizeOption = loadPreviewSizeOption;
 exports.PreviewSizeContext = (0, react_1.createContext)({
     setSize: () => undefined,
-    size: loadPreviewSizeOption(),
+    size: (0, exports.loadPreviewSizeOption)(),
 });
 const PreviewSizeProvider = ({ children }) => {
-    const [size, setSizeState] = (0, react_1.useState)(() => loadPreviewSizeOption());
+    const [size, setSizeState] = (0, react_1.useState)(() => (0, exports.loadPreviewSizeOption)());
     const [translation, setTranslation] = (0, react_1.useState)(() => {
         return {
             x: 0,

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

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

package/dist/editor/state/sidebar.js

@@ -1,16 +1,11 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.SidebarContextProvider = exports.SidebarContext = void 0;
+exports.SidebarContextProvider = exports.SidebarContext = exports.getSavedCollapsedState = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
-const storageKey = (sidebar) => {
-    if (sidebar === 'right') {
-        return 'remotion.sidebarRightCollapsing';
-    }
-    return 'remotion.sidebarCollapsing';
-};
-const getSavedCollapsedStateLeft = () => {
-    const state = window.localStorage.getItem(storageKey('left'));
+const storageKey = 'remotion.sidebarCollapsing';
+const getSavedCollapsedState = () => {
+    const state = window.localStorage.getItem(storageKey);
     if (state === 'collapsed') {
         return 'collapsed';
     }
@@ -19,49 +14,25 @@ const getSavedCollapsedStateLeft = () => {
     }
     return 'responsive';
 };
-const getSavedCollapsedStateRight = () => {
-    const state = window.localStorage.getItem(storageKey('right'));
-    if (state === 'expanded') {
-        return 'expanded';
-    }
-    return 'collapsed';
-};
-const saveCollapsedState = (type, sidebar) => {
-    window.localStorage.setItem(storageKey(sidebar), type);
+exports.getSavedCollapsedState = getSavedCollapsedState;
+const setSavedCollapsedState = (type) => {
+    window.localStorage.setItem(storageKey, type);
 };
 exports.SidebarContext = (0, react_1.createContext)({
-    sidebarCollapsedStateLeft: 'collapsed',
+    sidebarCollapsedState: 'collapsed',
     setSidebarCollapsedState: () => {
         throw new Error('sidebar collapsed state');
     },
-    sidebarCollapsedStateRight: 'collapsed',
 });
 const SidebarContextProvider = ({ children }) => {
-    const [sidebarCollapsedState, setSidebarCollapsedState] = (0, react_1.useState)(() => ({
-        left: getSavedCollapsedStateLeft(),
-        right: getSavedCollapsedStateRight(),
-    }));
+    const [sidebarCollapsedState, setSidebarCollapsedState] = (0, react_1.useState)(() => (0, exports.getSavedCollapsedState)());
     const value = (0, react_1.useMemo)(() => {
         return {
-            sidebarCollapsedStateLeft: sidebarCollapsedState.left,
-            sidebarCollapsedStateRight: sidebarCollapsedState.right,
-            setSidebarCollapsedState: (options) => {
-                const { left, right } = options;
-                setSidebarCollapsedState((f) => {
-                    const copied = { ...f };
-                    if (left) {
-                        const updatedLeft = typeof left === 'function' ? left(f.left) : left;
-                        saveCollapsedState(updatedLeft, 'left');
-                        copied.left = updatedLeft;
-                    }
-                    if (right) {
-                        const updatedRight = typeof right === 'function' ? right(f.right) : right;
-                        saveCollapsedState(updatedRight, 'right');
-                        copied.right = updatedRight;
-                    }
-                    return copied;
-                });
+            setSidebarCollapsedState: (state) => {
+                setSidebarCollapsedState(state);
+                setSavedCollapsedState(state);
             },
+            sidebarCollapsedState,
         };
     }, [sidebarCollapsedState]);
     return ((0, jsx_runtime_1.jsx)(exports.SidebarContext.Provider, { value: value, children: children }));

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

@@ -1,7 +1,6 @@
 /// <reference types="react" />
-declare type TimelineRef = {
+export 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,4 +1,8 @@
 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;
@@ -10,3 +14,4 @@ export declare const useZIndex: () => {
     isHighestContext: boolean;
     tabIndex: number;
 };
+export {};