@remotion/cli 4.0.0-oops.3 → 4.0.0-prefetch.7

package/dist/editor/icons/step-back.d.ts

@@ -1,2 +1,3 @@
-import React, { SVGProps } from 'react';
+import type { SVGProps } from 'react';
+import React from 'react';
 export declare const StepBack: React.FC<SVGProps<SVGSVGElement>>;

package/dist/editor/icons/step-back.js

@@ -3,6 +3,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.StepBack = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const StepBack = (props) => {
-    return ((0, jsx_runtime_1.jsx)("svg", { viewBox: "0 0 448 512", ...props, children: (0, jsx_runtime_1.jsx)("path", { fill: "currentColor", d: "M64 468V44c0-6.6 5.4-12 12-12h48c6.6 0 12 5.4 12 12v176.4l195.5-181C352.1 22.3 384 36.6 384 64v384c0 27.4-31.9 41.7-52.5 24.6L136 292.7V468c0 6.6-5.4 12-12 12H76c-6.6 0-12-5.4-12-12z" }, void 0) }, void 0));
+    return ((0, jsx_runtime_1.jsx)("svg", { viewBox: "0 0 448 512", ...props, children: (0, jsx_runtime_1.jsx)("path", { fill: "currentColor", d: "M64 468V44c0-6.6 5.4-12 12-12h48c6.6 0 12 5.4 12 12v176.4l195.5-181C352.1 22.3 384 36.6 384 64v384c0 27.4-31.9 41.7-52.5 24.6L136 292.7V468c0 6.6-5.4 12-12 12H76c-6.6 0-12-5.4-12-12z" }) }));
 };
 exports.StepBack = StepBack;

package/dist/editor/icons/step-forward.d.ts

@@ -1,2 +1,3 @@
-import React, { SVGProps } from 'react';
+import type { SVGProps } from 'react';
+import React from 'react';
 export declare const StepForward: React.FC<SVGProps<SVGSVGElement>>;

package/dist/editor/icons/step-forward.js

@@ -3,6 +3,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.StepForward = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const StepForward = (props) => {
-    return ((0, jsx_runtime_1.jsx)("svg", { viewBox: "0 0 448 512", ...props, children: (0, jsx_runtime_1.jsx)("path", { fill: "currentColor", d: "M384 44v424c0 6.6-5.4 12-12 12h-48c-6.6 0-12-5.4-12-12V291.6l-195.5 181C95.9 489.7 64 475.4 64 448V64c0-27.4 31.9-41.7 52.5-24.6L312 219.3V44c0-6.6 5.4-12 12-12h48c6.6 0 12 5.4 12 12z" }, void 0) }, void 0));
+    return ((0, jsx_runtime_1.jsx)("svg", { viewBox: "0 0 448 512", ...props, children: (0, jsx_runtime_1.jsx)("path", { fill: "currentColor", d: "M384 44v424c0 6.6-5.4 12-12 12h-48c-6.6 0-12-5.4-12-12V291.6l-195.5 181C95.9 489.7 64 475.4 64 448V64c0-27.4 31.9-41.7 52.5-24.6L312 219.3V44c0-6.6 5.4-12 12-12h48c6.6 0 12 5.4 12 12z" }) }));
 };
 exports.StepForward = StepForward;

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

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

package/dist/editor/icons/still.js

@@ -3,6 +3,6 @@ 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" }, void 0) }, void 0));
+    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/icons/timeline.d.ts

@@ -1,2 +1,3 @@
-import React, { SVGProps } from 'react';
+import type { SVGProps } from 'react';
+import React from 'react';
 export declare const TimelineIcon: React.FC<SVGProps<SVGSVGElement>>;

package/dist/editor/icons/timeline.js

@@ -4,6 +4,6 @@ exports.TimelineIcon = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const TimelineIcon = (props) => {
     var _a;
-    return ((0, jsx_runtime_1.jsx)("svg", { "aria-hidden": "true", focusable: "false", "data-prefix": "fas", "data-icon": "stream", className: "svg-inline--fa fa-stream fa-w-16", role: "img", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 512 512", ...props, children: (0, jsx_runtime_1.jsx)("path", { fill: (_a = props.style) === null || _a === void 0 ? void 0 : _a.color, d: "M16 128h416c8.84 0 16-7.16 16-16V48c0-8.84-7.16-16-16-16H16C7.16 32 0 39.16 0 48v64c0 8.84 7.16 16 16 16zm480 80H80c-8.84 0-16 7.16-16 16v64c0 8.84 7.16 16 16 16h416c8.84 0 16-7.16 16-16v-64c0-8.84-7.16-16-16-16zm-64 176H16c-8.84 0-16 7.16-16 16v64c0 8.84 7.16 16 16 16h416c8.84 0 16-7.16 16-16v-64c0-8.84-7.16-16-16-16z" }, void 0) }, void 0));
+    return ((0, jsx_runtime_1.jsx)("svg", { "aria-hidden": "true", focusable: "false", "data-prefix": "fas", "data-icon": "stream", className: "svg-inline--fa fa-stream fa-w-16", role: "img", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 512 512", ...props, children: (0, jsx_runtime_1.jsx)("path", { fill: (_a = props.style) === null || _a === void 0 ? void 0 : _a.color, d: "M16 128h416c8.84 0 16-7.16 16-16V48c0-8.84-7.16-16-16-16H16C7.16 32 0 39.16 0 48v64c0 8.84 7.16 16 16 16zm480 80H80c-8.84 0-16 7.16-16 16v64c0 8.84 7.16 16 16 16h416c8.84 0 16-7.16 16-16v-64c0-8.84-7.16-16-16-16zm-64 176H16c-8.84 0-16 7.16-16 16v64c0 8.84 7.16 16 16 16h416c8.84 0 16-7.16 16-16v-64c0-8.84-7.16-16-16-16z" }) }));
 };
 exports.TimelineIcon = TimelineIcon;

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

@@ -1,3 +1,4 @@
-import React, { SVGProps } from 'react';
+import type { SVGProps } from 'react';
+import React from 'react';
 export declare const TimelineInPointer: React.FC<SVGProps<SVGSVGElement>>;
 export declare const TimelineOutPointer: React.FC<SVGProps<SVGSVGElement>>;

package/dist/editor/icons/timelineInOutPointer.js

@@ -3,10 +3,10 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.TimelineOutPointer = exports.TimelineInPointer = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const TimelineInPointer = (props) => {
-    return ((0, jsx_runtime_1.jsx)("svg", { viewBox: "0 0 256 256", fill: "none", ...props, children: (0, jsx_runtime_1.jsx)("path", { d: "M158 25H99V230.5H158", stroke: props.color, strokeWidth: "42", strokeLinecap: "round", strokeLinejoin: "round" }, void 0) }, void 0));
+    return ((0, jsx_runtime_1.jsx)("svg", { viewBox: "0 0 256 256", fill: "none", ...props, children: (0, jsx_runtime_1.jsx)("path", { d: "M158 25H99V230.5H158", stroke: props.color, strokeWidth: "42", strokeLinecap: "round", strokeLinejoin: "round" }) }));
 };
 exports.TimelineInPointer = TimelineInPointer;
 const TimelineOutPointer = (props) => {
-    return ((0, jsx_runtime_1.jsx)("svg", { viewBox: "0 0 256 256", fill: "none", ...props, children: (0, jsx_runtime_1.jsx)("path", { d: "M98 25H157V230.5H98", stroke: props.color, strokeWidth: "42", strokeLinecap: "round", strokeLinejoin: "round" }, void 0) }, void 0));
+    return ((0, jsx_runtime_1.jsx)("svg", { viewBox: "0 0 256 256", fill: "none", ...props, children: (0, jsx_runtime_1.jsx)("path", { d: "M98 25H157V230.5H98", stroke: props.color, strokeWidth: "42", strokeLinecap: "round", strokeLinejoin: "round" }) }));
 };
 exports.TimelineOutPointer = TimelineOutPointer;

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

@@ -0,0 +1,11 @@
+import React from 'react';
+import type { ExpandedFoldersState } from '../helpers/persist-open-folders';
+declare type TFolderContext = {
+    foldersExpanded: ExpandedFoldersState;
+    setFoldersExpanded: React.Dispatch<React.SetStateAction<ExpandedFoldersState>>;
+};
+export declare const FolderContext: React.Context<TFolderContext>;
+export declare const FolderContextProvider: React.FC<{
+    children: React.ReactNode;
+}>;
+export {};

package/dist/editor/state/folders.js

@@ -0,0 +1,23 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FolderContextProvider = exports.FolderContext = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const persist_open_folders_1 = require("../helpers/persist-open-folders");
+exports.FolderContext = (0, react_1.createContext)({
+    foldersExpanded: {},
+    setFoldersExpanded: () => {
+        throw new Error('default state');
+    },
+});
+const FolderContextProvider = ({ children }) => {
+    const [foldersExpanded, setFoldersExpanded] = (0, react_1.useState)((0, persist_open_folders_1.loadExpandedFolders)());
+    const value = (0, react_1.useMemo)(() => {
+        return {
+            foldersExpanded,
+            setFoldersExpanded,
+        };
+    }, [foldersExpanded]);
+    return ((0, jsx_runtime_1.jsx)(exports.FolderContext.Provider, { value: value, children: children }));
+};
+exports.FolderContextProvider = FolderContextProvider;

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

@@ -19,7 +19,7 @@ const HighestZIndexProvider = ({ children }) => {
             if (index === -1) {
                 throw new Error('did not find z-index ' + newIndex);
             }
-            return prev.filter((n, i) => i !== index);
+            return prev.filter((_n, i) => i !== index);
         });
     }, []);
     const highestIndex = Math.max(...zIndexes);
@@ -30,6 +30,6 @@ const HighestZIndexProvider = ({ children }) => {
             unregisterZIndex,
         };
     }, [registerZIndex, unregisterZIndex, highestIndex]);
-    return ((0, jsx_runtime_1.jsx)(exports.HighestZIndexContext.Provider, { value: value, children: children }, void 0));
+    return ((0, jsx_runtime_1.jsx)(exports.HighestZIndexContext.Provider, { value: value, children: children }));
 };
 exports.HighestZIndexProvider = HighestZIndexProvider;

package/dist/editor/state/in-out.d.ts

@@ -0,0 +1,12 @@
+import type React from 'react';
+export declare type TimelineInOutContextValue = {
+    inFrame: number | null;
+    outFrame: number | null;
+};
+export declare type SetTimelineInOutContextValue = {
+    setInAndOutFrames: (u: React.SetStateAction<TimelineInOutContextValue>) => void;
+};
+export declare const TimelineInOutContext: React.Context<TimelineInOutContextValue>;
+export declare const SetTimelineInOutContext: React.Context<SetTimelineInOutContextValue>;
+export declare const useTimelineInOutFramePosition: () => TimelineInOutContextValue;
+export declare const useTimelineSetInOutFramePosition: () => SetTimelineInOutContextValue;

package/dist/editor/state/in-out.js

@@ -0,0 +1,23 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useTimelineSetInOutFramePosition = exports.useTimelineInOutFramePosition = exports.SetTimelineInOutContext = exports.TimelineInOutContext = void 0;
+const react_1 = require("react");
+exports.TimelineInOutContext = (0, react_1.createContext)({
+    inFrame: null,
+    outFrame: null,
+});
+exports.SetTimelineInOutContext = (0, react_1.createContext)({
+    setInAndOutFrames: () => {
+        throw new Error('default');
+    },
+});
+const useTimelineInOutFramePosition = () => {
+    const state = (0, react_1.useContext)(exports.TimelineInOutContext);
+    return state;
+};
+exports.useTimelineInOutFramePosition = useTimelineInOutFramePosition;
+const useTimelineSetInOutFramePosition = () => {
+    const { setInAndOutFrames } = (0, react_1.useContext)(exports.SetTimelineInOutContext);
+    return { setInAndOutFrames };
+};
+exports.useTimelineSetInOutFramePosition = useTimelineSetInOutFramePosition;

package/dist/editor/state/keybindings.js

@@ -4,7 +4,9 @@ exports.KeybindingContextProvider = exports.KeybindingContext = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 exports.KeybindingContext = (0, react_1.createContext)({
-    registerKeybinding: () => undefined,
+    registerKeybinding: () => {
+        throw new Error('Has no keybinding context');
+    },
     unregisterKeybinding: () => undefined,
     unregisterPane: () => undefined,
 });
@@ -36,6 +38,6 @@ const KeybindingContextProvider = ({ children }) => {
             unregisterPane,
         };
     }, [registerKeybinding, unregisterKeybinding, unregisterPane]);
-    return ((0, jsx_runtime_1.jsx)(exports.KeybindingContext.Provider, { value: value, children: children }, void 0));
+    return ((0, jsx_runtime_1.jsx)(exports.KeybindingContext.Provider, { value: value, children: children }));
 };
 exports.KeybindingContextProvider = KeybindingContextProvider;

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

@@ -1,5 +1,5 @@
-import React from 'react';
-import { UpdateInfo } from '../components/UpdateCheck';
+import type React from 'react';
+import type { UpdateInfo } from '../components/UpdateCheck';
 export declare type CompType = 'composition' | 'still';
 export declare type ModalState = {
     type: 'new-comp';

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

@@ -1,10 +1,13 @@
-/// <reference types="react" />
-import { PreviewSize } from '@remotion/player';
+import type { PreviewSize } from '@remotion/player';
+import React from 'react';
 declare type PreviewSizeCtx = {
     size: PreviewSize;
     setSize: (cb: (oldSize: PreviewSize) => PreviewSize) => void;
 };
 export declare const persistPreviewSizeOption: (option: PreviewSize) => void;
 export declare const loadPreviewSizeOption: () => PreviewSize;
-export declare const PreviewSizeContext: import("react").Context<PreviewSizeCtx>;
+export declare const PreviewSizeContext: React.Context<PreviewSizeCtx>;
+export declare const PreviewSizeProvider: React.FC<{
+    children: React.ReactNode;
+}>;
 export {};

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

@@ -1,20 +1,54 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.PreviewSizeContext = exports.loadPreviewSizeOption = 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 key = 'remotion.previewSize';
 const persistPreviewSizeOption = (option) => {
-    localStorage.setItem('previewSize', String(option));
+    localStorage.setItem(key, JSON.stringify(option));
 };
 exports.persistPreviewSizeOption = persistPreviewSizeOption;
 const loadPreviewSizeOption = () => {
-    const item = localStorage.getItem('previewSize');
+    const item = localStorage.getItem(key);
     if (item === null) {
-        return 'auto';
+        return {
+            size: 'auto',
+            translation: {
+                x: 0,
+                y: 0,
+            },
+        };
     }
-    return item;
+    return JSON.parse(item);
 };
 exports.loadPreviewSizeOption = loadPreviewSizeOption;
 exports.PreviewSizeContext = (0, react_1.createContext)({
     setSize: () => undefined,
     size: (0, exports.loadPreviewSizeOption)(),
 });
+const PreviewSizeProvider = ({ children }) => {
+    const [size, setSizeState] = (0, react_1.useState)(() => (0, exports.loadPreviewSizeOption)());
+    const [translation, setTranslation] = (0, react_1.useState)(() => {
+        return {
+            x: 0,
+            y: 0,
+        };
+    });
+    const setSize = (0, react_1.useCallback)((newValue) => {
+        setSizeState((prevState) => {
+            const newVal = newValue(prevState);
+            (0, exports.persistPreviewSizeOption)(newVal);
+            return newVal;
+        });
+    }, []);
+    const previewSizeCtx = (0, react_1.useMemo)(() => {
+        return {
+            size,
+            setSize,
+            translation,
+            setTranslation,
+        };
+    }, [setSize, size, translation, setTranslation]);
+    return ((0, jsx_runtime_1.jsx)(exports.PreviewSizeContext.Provider, { value: previewSizeCtx, children: children }));
+};
+exports.PreviewSizeProvider = PreviewSizeProvider;

package/dist/editor/state/render-frame.js

@@ -2,10 +2,19 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.renderFrame = void 0;
 const renderFrame = (frame, fps) => {
-    const minutes = Math.floor(frame / fps / 60);
-    const remainingSec = frame - minutes * fps * 60;
+    const hours = Math.floor(frame / fps / 3600);
+    const remainingMinutes = frame - hours * fps * 3600;
+    const minutes = Math.floor(remainingMinutes / 60 / fps);
+    const remainingSec = frame - hours * fps * 3600 - minutes * fps * 60;
     const seconds = Math.floor(remainingSec / fps);
     const frameAfterSec = Math.round(frame % fps);
-    return `${String(minutes).padStart(2, '0')}:${String(seconds).padStart(2, '0')}.${String(frameAfterSec).padStart(2, '0')}`;
+    const hoursStr = String(hours);
+    const minutesStr = String(minutes).padStart(2, '0');
+    const secondsStr = String(seconds).padStart(2, '0');
+    const frameStr = String(frameAfterSec).padStart(2, '0');
+    if (hours > 0) {
+        return `${hoursStr}:${minutesStr}:${secondsStr}.${frameStr}`;
+    }
+    return `${minutesStr}:${secondsStr}.${frameStr}`;
 };
 exports.renderFrame = renderFrame;

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

@@ -0,0 +1,12 @@
+import React from 'react';
+export declare type SidebarCollapsedState = 'collapsed' | 'expanded' | 'responsive';
+declare type Context = {
+    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;
+}>;
+export {};

package/dist/editor/state/sidebar.js

@@ -0,0 +1,40 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SidebarContextProvider = exports.SidebarContext = exports.getSavedCollapsedState = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const storageKey = 'remotion.sidebarCollapsing';
+const getSavedCollapsedState = () => {
+    const state = window.localStorage.getItem(storageKey);
+    if (state === 'collapsed') {
+        return 'collapsed';
+    }
+    if (state === 'expanded') {
+        return 'expanded';
+    }
+    return 'responsive';
+};
+exports.getSavedCollapsedState = getSavedCollapsedState;
+const setSavedCollapsedState = (type) => {
+    window.localStorage.setItem(storageKey, type);
+};
+exports.SidebarContext = (0, react_1.createContext)({
+    sidebarCollapsedState: 'collapsed',
+    setSidebarCollapsedState: () => {
+        throw new Error('sidebar collapsed state');
+    },
+});
+const SidebarContextProvider = ({ children }) => {
+    const [sidebarCollapsedState, setSidebarCollapsedState] = (0, react_1.useState)(() => (0, exports.getSavedCollapsedState)());
+    const value = (0, react_1.useMemo)(() => {
+        return {
+            setSidebarCollapsedState: (state) => {
+                setSidebarCollapsedState(state);
+                setSavedCollapsedState(state);
+            },
+            sidebarCollapsedState,
+        };
+    }, [sidebarCollapsedState]);
+    return ((0, jsx_runtime_1.jsx)(exports.SidebarContext.Provider, { value: value, children: children }));
+};
+exports.SidebarContextProvider = SidebarContextProvider;

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

@@ -0,0 +1,10 @@
+import React from 'react';
+export declare const TIMELINE_MIN_ZOOM = 1;
+export declare const TIMELINE_MAX_ZOOM = 5;
+export declare const TimelineZoomCtx: React.Context<{
+    zoom: number;
+    setZoom: (prev: (prevZoom: number) => number) => void;
+}>;
+export declare const TimelineZoomContext: React.FC<{
+    children: React.ReactNode;
+}>;

package/dist/editor/state/timeline-zoom.js

@@ -0,0 +1,38 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TimelineZoomContext = exports.TimelineZoomCtx = exports.TIMELINE_MAX_ZOOM = exports.TIMELINE_MIN_ZOOM = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const imperative_state_1 = require("../components/Timeline/imperative-state");
+const timeline_scroll_logic_1 = require("../components/Timeline/timeline-scroll-logic");
+exports.TIMELINE_MIN_ZOOM = 1;
+exports.TIMELINE_MAX_ZOOM = 5;
+exports.TimelineZoomCtx = (0, react_1.createContext)({
+    zoom: -1,
+    setZoom: () => {
+        throw new Error('has no context');
+    },
+});
+const TimelineZoomContext = ({ children }) => {
+    const [zoom, setZoom] = (0, react_1.useState)(exports.TIMELINE_MIN_ZOOM);
+    const value = (0, react_1.useMemo)(() => {
+        return {
+            zoom,
+            setZoom: (callback) => {
+                setZoom((prevZoom) => {
+                    const newZoomWithFloatingPointErrors = Math.min(exports.TIMELINE_MAX_ZOOM, Math.max(exports.TIMELINE_MIN_ZOOM, callback(prevZoom)));
+                    const newZoom = Math.round(newZoomWithFloatingPointErrors * 10) / 10;
+                    (0, timeline_scroll_logic_1.zoomAndPreserveCursor)({
+                        oldZoom: prevZoom,
+                        newZoom,
+                        currentDurationInFrames: (0, imperative_state_1.getCurrentDuration)(),
+                        currentFrame: (0, imperative_state_1.getCurrentFrame)(),
+                    });
+                    return newZoom;
+                });
+            },
+        };
+    }, [zoom]);
+    return ((0, jsx_runtime_1.jsx)(exports.TimelineZoomCtx.Provider, { value: value, children: children }));
+};
+exports.TimelineZoomContext = TimelineZoomContext;

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

@@ -12,7 +12,12 @@ exports.ZIndexContext = (0, react_1.createContext)({
 const EscapeHook = ({ onEscape }) => {
     const keybindings = (0, use_keybinding_1.useKeybinding)();
     (0, react_1.useEffect)(() => {
-        const escape = keybindings.registerKeybinding('keydown', 'Escape', onEscape);
+        const escape = keybindings.registerKeybinding({
+            event: 'keydown',
+            key: 'Escape',
+            callback: onEscape,
+            commandCtrlKey: false,
+        });
         return () => {
             escape.unregister();
         };
@@ -49,7 +54,7 @@ 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 }, void 0), (0, jsx_runtime_1.jsx)("div", { ref: containerRef, children: children }, void 0)] }, void 0));
+    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 })] }));
 };
 exports.HigherZIndex = HigherZIndex;
 const useZIndex = () => {

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

@@ -0,0 +1,6 @@
+export declare type EventSourceEvent = {
+    type: 'new-input-props';
+    newProps: object;
+} | {
+    type: 'init';
+};

package/dist/event-source-events.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/event-source.d.ts

@@ -0,0 +1 @@
+export declare const openEventSource: () => void;

package/dist/event-source.js

@@ -0,0 +1,28 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.openEventSource = void 0;
+const ServerDisconnected_1 = require("./editor/components/Notifications/ServerDisconnected");
+let source = null;
+const openEventSource = () => {
+    source = new EventSource('/events');
+    source.addEventListener('message', (event) => {
+        const newEvent = JSON.parse(event.data);
+        if (newEvent.type === 'new-input-props') {
+            window.location.reload();
+        }
+    });
+    source.addEventListener('open', () => {
+        var _a;
+        (_a = ServerDisconnected_1.serverDisconnectedRef.current) === null || _a === void 0 ? void 0 : _a.setServerConnected();
+    });
+    source.addEventListener('error', () => {
+        var _a;
+        // Display an error message that the preview server has disconnected.
+        (_a = ServerDisconnected_1.serverDisconnectedRef.current) === null || _a === void 0 ? void 0 : _a.setServerDisconnected();
+        // Retry later
+        setTimeout(() => {
+            (0, exports.openEventSource)();
+        }, 1000);
+    });
+};
+exports.openEventSource = openEventSource;

package/dist/find-closest-package-json.d.ts

@@ -0,0 +1,2 @@
+export declare const findClosestPackageJson: () => string | null;
+export declare const findRemotionRoot: () => string;

package/dist/find-closest-package-json.js

@@ -0,0 +1,35 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.findRemotionRoot = exports.findClosestPackageJson = void 0;
+const fs_1 = __importDefault(require("fs"));
+const path_1 = __importDefault(require("path"));
+const log_1 = require("./log");
+const recursionLimit = 5;
+const findClosestPackageJson = () => {
+    let currentDir = process.cwd();
+    let possiblePackageJson = '';
+    for (let i = 0; i < recursionLimit; i++) {
+        possiblePackageJson = path_1.default.join(currentDir, 'package.json');
+        const exists = fs_1.default.existsSync(possiblePackageJson);
+        if (exists) {
+            return possiblePackageJson;
+        }
+        currentDir = path_1.default.dirname(currentDir);
+    }
+    return null;
+};
+exports.findClosestPackageJson = findClosestPackageJson;
+const findRemotionRoot = () => {
+    const closestPackageJson = (0, exports.findClosestPackageJson)();
+    if (closestPackageJson === null) {
+        log_1.Log.error('Could not find a package.json in the current directory or any of the ' +
+            recursionLimit +
+            ' parent directories. Is this a Remotion project?');
+        process.exit(1);
+    }
+    return path_1.default.dirname(closestPackageJson);
+};
+exports.findRemotionRoot = findRemotionRoot;

package/dist/format-bytes.d.ts

@@ -0,0 +1,6 @@
+export declare const formatBytes: (number: number, options?: Intl.NumberFormatOptions & {
+    locale: string;
+    bits?: boolean;
+    binary?: boolean;
+    signed: boolean;
+}) => string;

package/dist/format-bytes.js

@@ -0,0 +1,103 @@
+'use strict';
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.formatBytes = void 0;
+const BYTE_UNITS = ['B', 'kB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];
+const BIBYTE_UNITS = [
+    'B',
+    'kiB',
+    'MiB',
+    'GiB',
+    'TiB',
+    'PiB',
+    'EiB',
+    'ZiB',
+    'YiB',
+];
+const BIT_UNITS = [
+    'b',
+    'kbit',
+    'Mbit',
+    'Gbit',
+    'Tbit',
+    'Pbit',
+    'Ebit',
+    'Zbit',
+    'Ybit',
+];
+const BIBIT_UNITS = [
+    'b',
+    'kibit',
+    'Mibit',
+    'Gibit',
+    'Tibit',
+    'Pibit',
+    'Eibit',
+    'Zibit',
+    'Yibit',
+];
+/*
+Formats the given number using `Number#toLocaleString`.
+- If locale is a string, the value is expected to be a locale-key (for example: `de`).
+- If locale is true, the system default locale is used for translation.
+- If no value for locale is specified, the number is returned unmodified.
+*/
+const toLocaleString = (number, locale, options) => {
+    if (typeof locale === 'string' || Array.isArray(locale)) {
+        return number.toLocaleString(locale, options);
+    }
+    if (locale === true || options !== undefined) {
+        return number.toLocaleString(undefined, options);
+    }
+    return String(number);
+};
+const formatBytes = (number, options = {
+    locale: 'en-US',
+    signed: false,
+    maximumFractionDigits: 1,
+}) => {
+    if (!Number.isFinite(number)) {
+        throw new TypeError(`Expected a finite number, got ${typeof number}: ${number}`);
+    }
+    options = { bits: false, binary: false, ...options };
+    const UNITS = options.bits
+        ? options.binary
+            ? BIBIT_UNITS
+            : BIT_UNITS
+        : options.binary
+            ? BIBYTE_UNITS
+            : BYTE_UNITS;
+    if (options.signed && number === 0) {
+        return `0 $ {
+            UNITS[0]
+        }`;
+    }
+    const isNegative = number < 0;
+    const prefix = isNegative ? '-' : options.signed ? '+' : '';
+    if (isNegative) {
+        number = -number;
+    }
+    let localeOptions;
+    if (options.minimumFractionDigits !== undefined) {
+        localeOptions = {
+            minimumFractionDigits: options.minimumFractionDigits,
+        };
+    }
+    if (options.maximumFractionDigits !== undefined) {
+        localeOptions = {
+            maximumFractionDigits: options.maximumFractionDigits,
+            ...localeOptions,
+        };
+    }
+    if (number < 1) {
+        const numString = toLocaleString(number, options.locale, localeOptions);
+        return prefix + numString + ' ' + UNITS[0];
+    }
+    const exponent = Math.min(Math.floor(options.binary
+        ? Math.log(number) / Math.log(1024)
+        : Math.log10(number) / 3), UNITS.length - 1);
+    number /= (options.binary ? 1024 : 1000) ** exponent;
+    const numberString = toLocaleString(Number(number), options.locale, localeOptions);
+    const unit = UNITS[exponent];
+    return prefix + numberString + ' ' + unit;
+};
+exports.formatBytes = formatBytes;