@remotion/cli 4.0.0-webhook.26 → 4.0.0

package/dist/editor/components/Timeline/timeline-scroll-logic.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.zoomAndPreserveCursor = exports.getFrameFromX = exports.getFrameWhileScrollingRight = exports.getFrameIncrementFromWidth = exports.getFrameIncrement = exports.getScrollPositionForCursorOnRightEdge = exports.getScrollPositionForCursorOnLeftEdge = exports.scrollToTimelineXOffset = exports.ensureFrameIsInViewport = exports.isCursorInViewport = exports.getFrameWhileScrollingLeft = exports.canScrollTimelineIntoDirection = void 0;
+exports.zoomAndPreserveCursor = exports.getFrameFromX = exports.getFrameWhileScrollingRight = exports.getFrameIncrementFromWidth = exports.getScrollPositionForCursorOnRightEdge = exports.getScrollPositionForCursorOnLeftEdge = exports.scrollToTimelineXOffset = exports.ensureFrameIsInViewport = exports.isCursorInViewport = exports.getFrameWhileScrollingLeft = exports.canScrollTimelineIntoDirection = void 0;
 const remotion_1 = require("remotion");
 const timeline_layout_1 = require("../../helpers/timeline-layout");
 const timeline_refs_1 = require("./timeline-refs");
@@ -23,7 +23,7 @@ const calculateFrameWhileScrollingRight = ({ durationInFrames, width, scrollLeft
         extrapolate: 'clamp',
     }) +
         Math.ceil((((_a = timeline_refs_1.scrollableRef.current) === null || _a === void 0 ? void 0 : _a.clientWidth) - timeline_layout_1.TIMELINE_PADDING) /
-            (0, exports.getFrameIncrement)(durationInFrames)));
+            getFrameIncrement(durationInFrames)));
 };
 const getFrameWhileScrollingLeft = ({ durationInFrames, width, }) => {
     var _a, _b;
@@ -145,14 +145,14 @@ const scrollToTimelineXOffset = (scrollPos) => {
 };
 exports.scrollToTimelineXOffset = scrollToTimelineXOffset;
 const getScrollPositionForCursorOnLeftEdge = ({ nextFrame, durationInFrames, }) => {
-    const frameIncrement = (0, exports.getFrameIncrement)(durationInFrames);
+    const frameIncrement = getFrameIncrement(durationInFrames);
     const scrollPos = frameIncrement * nextFrame;
     return scrollPos;
 };
 exports.getScrollPositionForCursorOnLeftEdge = getScrollPositionForCursorOnLeftEdge;
 const getScrollPositionForCursorOnRightEdge = ({ nextFrame, durationInFrames, }) => {
     var _a, _b;
-    const frameIncrement = (0, exports.getFrameIncrement)(durationInFrames);
+    const frameIncrement = getFrameIncrement(durationInFrames);
     const framesRemaining = durationInFrames - 1 - nextFrame;
     const fromRight = framesRemaining * frameIncrement + timeline_layout_1.TIMELINE_PADDING;
     const scrollPos = ((_a = timeline_refs_1.scrollableRef.current) === null || _a === void 0 ? void 0 : _a.scrollWidth) -
@@ -168,7 +168,6 @@ const getFrameIncrement = (durationInFrames) => {
     const width = (_b = (_a = timeline_refs_1.scrollableRef.current) === null || _a === void 0 ? void 0 : _a.scrollWidth) !== null && _b !== void 0 ? _b : 0;
     return (0, exports.getFrameIncrementFromWidth)(durationInFrames, width);
 };
-exports.getFrameIncrement = getFrameIncrement;
 const getFrameIncrementFromWidth = (durationInFrames, width) => {
     return (width - timeline_layout_1.TIMELINE_PADDING * 2) / (durationInFrames - 1);
 };
@@ -209,7 +208,7 @@ const zoomAndPreserveCursor = ({ oldZoom, newZoom, currentFrame, currentDuration
     if (!current) {
         return;
     }
-    const frameIncrement = (0, exports.getFrameIncrement)(currentDurationInFrames);
+    const frameIncrement = getFrameIncrement(currentDurationInFrames);
     const prevCursorPosition = frameIncrement * currentFrame + timeline_layout_1.TIMELINE_PADDING;
     const newCursorPosition = ratio * (prevCursorPosition - timeline_layout_1.TIMELINE_PADDING) + timeline_layout_1.TIMELINE_PADDING;
     current.scrollLeft += newCursorPosition - prevCursorPosition;

package/dist/editor/components/Timeline/timeline-state-reducer.d.ts

@@ -1,9 +1,9 @@
-export declare type TimelineViewState = {
+export type TimelineViewState = {
     collapsed: {
         [key: string]: boolean;
     };
 };
-export declare type TimelineActionState = {
+export type TimelineActionState = {
     type: 'collapse';
     hash: string;
 } | {

package/dist/editor/components/TimelineInOutToggle.d.ts

@@ -1,8 +1,9 @@
 import React from 'react';
+import type { InOutValue } from '../state/in-out';
 export declare const inOutHandles: React.RefObject<{
     inMarkClick: (e: KeyboardEvent | null) => void;
     outMarkClick: (e: KeyboardEvent | null) => void;
     clearMarks: () => void;
-    setMarks: (marks: [number | null, number | null]) => void;
 }>;
+export declare const defaultInOutValue: InOutValue;
 export declare const TimelineInOutPointToggle: React.FC;

package/dist/editor/components/TimelineInOutToggle.js

@@ -1,15 +1,15 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.TimelineInOutPointToggle = exports.inOutHandles = void 0;
+exports.TimelineInOutPointToggle = exports.defaultInOutValue = exports.inOutHandles = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const remotion_1 = require("remotion");
 const truthy_1 = require("../../truthy");
+const colors_1 = require("../helpers/colors");
 const is_current_selected_still_1 = require("../helpers/is-current-selected-still");
 const use_keybinding_1 = require("../helpers/use-keybinding");
 const timelineInOutPointer_1 = require("../icons/timelineInOutPointer");
 const in_out_1 = require("../state/in-out");
-const marks_1 = require("../state/marks");
 const ControlButton_1 = require("./ControlButton");
 const getTooltipText = (pointType, key) => [
     `Mark ${pointType}`,
@@ -23,19 +23,22 @@ const style = {
     height: 16,
 };
 exports.inOutHandles = (0, react_1.createRef)();
+exports.defaultInOutValue = { inFrame: null, outFrame: null };
 const TimelineInOutPointToggle = () => {
     const timelinePosition = remotion_1.Internals.Timeline.useTimelinePosition();
     const { inFrame, outFrame } = (0, in_out_1.useTimelineInOutFramePosition)();
     const { setInAndOutFrames } = (0, in_out_1.useTimelineSetInOutFramePosition)();
-    const { currentComposition } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
     const isStill = (0, is_current_selected_still_1.useIsStill)();
     const videoConfig = remotion_1.Internals.useUnsafeVideoConfig();
     const keybindings = (0, use_keybinding_1.useKeybinding)();
-    const onInOutClear = (0, react_1.useCallback)(() => {
-        setInAndOutFrames(() => {
+    const onInOutClear = (0, react_1.useCallback)((composition) => {
+        setInAndOutFrames((prev) => {
             return {
-                inFrame: null,
-                outFrame: null,
+                ...prev,
+                [composition]: {
+                    inFrame: null,
+                    outFrame: null,
+                },
             };
         });
     }, [setInAndOutFrames]);
@@ -44,35 +47,51 @@ const TimelineInOutPointToggle = () => {
             return null;
         }
         if (e === null || e === void 0 ? void 0 : e.shiftKey) {
-            setInAndOutFrames((f) => {
+            setInAndOutFrames((prev) => {
+                var _a;
                 return {
-                    ...f,
-                    inFrame: null,
+                    ...prev,
+                    [videoConfig.id]: {
+                        ...((_a = prev[videoConfig.id]) !== null && _a !== void 0 ? _a : exports.defaultInOutValue),
+                        inFrame: null,
+                    },
                 };
             });
             return null;
         }
         setInAndOutFrames((prev) => {
-            const biggestPossible = prev.outFrame === null ? Infinity : prev.outFrame - 1;
+            var _a, _b, _c, _d, _e;
+            const prevOut = (_a = prev[videoConfig.id]) === null || _a === void 0 ? void 0 : _a.outFrame;
+            const biggestPossible = prevOut === undefined || prevOut === null ? Infinity : prevOut - 1;
             const selected = Math.min(timelinePosition, biggestPossible);
             if (selected === 0) {
                 return {
                     ...prev,
-                    inFrame: null,
+                    [videoConfig.id]: {
+                        ...((_b = prev[videoConfig.id]) !== null && _b !== void 0 ? _b : exports.defaultInOutValue),
+                        inFrame: null,
+                    },
                 };
             }
-            if (prev.inFrame !== null) {
+            const prevIn = (_c = prev[videoConfig.id]) === null || _c === void 0 ? void 0 : _c.inFrame;
+            if (prevIn !== null && prevIn !== undefined) {
                 // Disable if already at this position
-                if (prev.inFrame === selected) {
+                if (prevIn === selected) {
                     return {
                         ...prev,
-                        inFrame: null,
+                        [videoConfig.id]: {
+                            ...((_d = prev[videoConfig.id]) !== null && _d !== void 0 ? _d : exports.defaultInOutValue),
+                            inFrame: null,
+                        },
                     };
                 }
             }
             return {
                 ...prev,
-                inFrame: selected,
+                [videoConfig.id]: {
+                    ...((_e = prev[videoConfig.id]) !== null && _e !== void 0 ? _e : exports.defaultInOutValue),
+                    inFrame: selected,
+                },
             };
         });
     }, [setInAndOutFrames, timelinePosition, videoConfig]);
@@ -82,9 +101,13 @@ const TimelineInOutPointToggle = () => {
         }
         e.preventDefault();
         setInAndOutFrames((f) => {
+            var _a;
             return {
                 ...f,
-                inFrame: null,
+                [videoConfig.id]: {
+                    ...((_a = f[videoConfig.id]) !== null && _a !== void 0 ? _a : exports.defaultInOutValue),
+                    inFrame: null,
+                },
             };
         });
     }, [setInAndOutFrames, videoConfig]);
@@ -94,9 +117,13 @@ const TimelineInOutPointToggle = () => {
         }
         e === null || e === void 0 ? void 0 : e.preventDefault();
         setInAndOutFrames((f) => {
+            var _a;
             return {
                 ...f,
-                outFrame: null,
+                [videoConfig.id]: {
+                    ...((_a = f[videoConfig.id]) !== null && _a !== void 0 ? _a : exports.defaultInOutValue),
+                    outFrame: null,
+                },
             };
         });
     }, [setInAndOutFrames, videoConfig]);
@@ -106,37 +133,59 @@ const TimelineInOutPointToggle = () => {
         }
         if (e === null || e === void 0 ? void 0 : e.shiftKey) {
             setInAndOutFrames((f) => {
+                var _a;
                 return {
                     ...f,
-                    outFrame: null,
+                    [videoConfig.id]: {
+                        ...((_a = f[videoConfig.id]) !== null && _a !== void 0 ? _a : exports.defaultInOutValue),
+                        outFrame: null,
+                    },
                 };
             });
             return;
         }
         setInAndOutFrames((prev) => {
-            const smallestPossible = prev.inFrame === null ? -Infinity : prev.inFrame + 1;
+            var _a, _b, _c, _d, _e;
+            const prevInFrame = (_a = prev[videoConfig.id]) === null || _a === void 0 ? void 0 : _a.inFrame;
+            const smallestPossible = prevInFrame === null || prevInFrame === undefined
+                ? -Infinity
+                : prevInFrame + 1;
             const selected = Math.max(timelinePosition, smallestPossible);
             if (selected === videoConfig.durationInFrames - 1) {
                 return {
                     ...prev,
-                    outFrame: null,
+                    [videoConfig.id]: {
+                        ...((_b = prev[videoConfig.id]) !== null && _b !== void 0 ? _b : exports.defaultInOutValue),
+                        outFrame: null,
+                    },
                 };
             }
-            if (prev.outFrame !== null) {
-                if (prev.outFrame === selected) {
+            const prevOut = (_c = prev[videoConfig.id]) === null || _c === void 0 ? void 0 : _c.outFrame;
+            if (prevOut !== null && prevOut !== undefined) {
+                if (prevOut === selected) {
                     return {
                         ...prev,
-                        outFrame: null,
+                        [videoConfig.id]: {
+                            ...((_d = prev[videoConfig.id]) !== null && _d !== void 0 ? _d : exports.defaultInOutValue),
+                            outFrame: null,
+                        },
                     };
                 }
             }
             return {
                 ...prev,
-                outFrame: selected,
+                [videoConfig.id]: {
+                    ...((_e = prev[videoConfig.id]) !== null && _e !== void 0 ? _e : exports.defaultInOutValue),
+                    outFrame: selected,
+                },
             };
         });
     }, [setInAndOutFrames, timelinePosition, videoConfig]);
+    const confId = videoConfig === null || videoConfig === void 0 ? void 0 : videoConfig.id;
     (0, react_1.useEffect)(() => {
+        if (!confId) {
+            return;
+        }
         const iKey = keybindings.registerKeybinding({
             event: 'keypress',
             key: 'i',
@@ -144,6 +193,8 @@ const TimelineInOutPointToggle = () => {
                 onInMark(e);
             },
             commandCtrlKey: false,
+            preventDefault: true,
+            triggerIfInputFieldFocused: false,
         });
         const oKey = keybindings.registerKeybinding({
             event: 'keypress',
@@ -152,72 +203,40 @@ const TimelineInOutPointToggle = () => {
                 onOutMark(e);
             },
             commandCtrlKey: false,
+            preventDefault: true,
+            triggerIfInputFieldFocused: false,
         });
         const xKey = keybindings.registerKeybinding({
             event: 'keypress',
             key: 'x',
             callback: () => {
-                onInOutClear();
+                onInOutClear(confId);
             },
             commandCtrlKey: false,
+            preventDefault: true,
+            triggerIfInputFieldFocused: false,
         });
         return () => {
             oKey.unregister();
             iKey.unregister();
             xKey.unregister();
         };
-    }, [keybindings, onInMark, onInOutClear, onOutMark]);
-    (0, react_1.useEffect)(() => {
-        if (!currentComposition || !videoConfig) {
-            return;
-        }
-        (0, marks_1.persistMarks)(currentComposition, videoConfig.durationInFrames, [
-            inFrame,
-            outFrame,
-        ]);
-    }, [currentComposition, inFrame, outFrame, videoConfig]);
-    // If duration changes and it goes out of range, we reset
-    (0, react_1.useEffect)(() => {
-        if (outFrame === null) {
-            return;
-        }
-        if (!videoConfig) {
-            return;
-        }
-        if (outFrame >= videoConfig.durationInFrames - 1) {
-            onInOutClear();
-        }
-    }, [onInOutClear, outFrame, videoConfig]);
-    (0, react_1.useEffect)(() => {
-        if (inFrame === null) {
-            return;
-        }
-        if (!videoConfig) {
-            return;
-        }
-        if (inFrame >= videoConfig.durationInFrames - 1) {
-            onInOutClear();
-        }
-    }, [onInOutClear, inFrame, videoConfig]);
+    }, [confId, keybindings, onInMark, onInOutClear, onOutMark]);
     (0, react_1.useImperativeHandle)(exports.inOutHandles, () => {
         return {
-            clearMarks: onInOutClear,
+            clearMarks: () => {
+                if (!confId) {
+                    return;
+                }
+                onInOutClear(confId);
+            },
             inMarkClick: onInMark,
             outMarkClick: onOutMark,
-            setMarks: ([newInFrame, newOutFrame]) => {
-                setInAndOutFrames({
-                    inFrame: newInFrame,
-                    outFrame: newOutFrame,
-                });
-            },
         };
-    }, [onInMark, onInOutClear, onOutMark, setInAndOutFrames]);
-    if (!videoConfig) {
-        return null;
-    }
+    }, [confId, onInMark, onInOutClear, onOutMark]);
     if (isStill) {
         return null;
     }
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(ControlButton_1.ControlButton, { title: getTooltipText('In', 'I'), "aria-label": getTooltipText('In', 'I'), onClick: (e) => onInMark(e), onContextMenu: clearInMark, disabled: timelinePosition === 0, children: (0, jsx_runtime_1.jsx)(timelineInOutPointer_1.TimelineInPointer, { color: inFrame === null ? 'white' : 'var(--blue)', style: style }) }), (0, jsx_runtime_1.jsx)(ControlButton_1.ControlButton, { title: getTooltipText('Out', 'O'), "aria-label": getTooltipText('Out', 'O'), onClick: onOutMark, onContextMenu: clearOutMark, disabled: timelinePosition === videoConfig.durationInFrames - 1, children: (0, jsx_runtime_1.jsx)(timelineInOutPointer_1.TimelineOutPointer, { color: outFrame === null ? 'white' : 'var(--blue)', style: style }) })] }));
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(ControlButton_1.ControlButton, { title: getTooltipText('In', 'I'), "aria-label": getTooltipText('In', 'I'), onClick: (e) => onInMark(e), onContextMenu: clearInMark, disabled: !videoConfig || timelinePosition === 0, children: (0, jsx_runtime_1.jsx)(timelineInOutPointer_1.TimelineInPointer, { color: inFrame === null ? 'white' : colors_1.BLUE, style: style }) }), (0, jsx_runtime_1.jsx)(ControlButton_1.ControlButton, { title: getTooltipText('Out', 'O'), "aria-label": getTooltipText('Out', 'O'), onClick: onOutMark, onContextMenu: clearOutMark, disabled: !videoConfig || timelinePosition === videoConfig.durationInFrames - 1, children: (0, jsx_runtime_1.jsx)(timelineInOutPointer_1.TimelineOutPointer, { color: outFrame === null ? 'white' : colors_1.BLUE, style: style }) })] }));
 };
 exports.TimelineInOutPointToggle = TimelineInOutPointToggle;

package/dist/editor/components/TopPanel.d.ts

@@ -1,2 +1,3 @@
 import React from 'react';
+export declare const useResponsiveSidebarStatus: () => 'collapsed' | 'expanded';
 export declare const TopPanel: React.FC;

package/dist/editor/components/TopPanel.js

@@ -1,16 +1,17 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.TopPanel = void 0;
+exports.TopPanel = exports.useResponsiveSidebarStatus = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
-const use_compact_ui_1 = require("../helpers/use-compact-ui");
+const use_breakpoint_1 = require("../helpers/use-breakpoint");
 const sidebar_1 = require("../state/sidebar");
-const Canvas_1 = require("./Canvas");
-const CollapsedCompositionSelector_1 = require("./CollapsedCompositionSelector");
+const CanvasOrLoading_1 = require("./CanvasOrLoading");
 const CompositionSelector_1 = require("./CompositionSelector");
+const CurrentCompositionSideEffects_1 = require("./CurrentCompositionSideEffects");
 const InitialCompositionLoader_1 = require("./InitialCompositionLoader");
 const MenuToolbar_1 = require("./MenuToolbar");
 const PreviewToolbar_1 = require("./PreviewToolbar");
+const RightPanel_1 = require("./RightPanel");
 const SplitterContainer_1 = require("./Splitter/SplitterContainer");
 const SplitterElement_1 = require("./Splitter/SplitterElement");
 const SplitterHandle_1 = require("./Splitter/SplitterHandle");
@@ -33,25 +34,38 @@ const canvasContainer = {
 const leftContainer = {
     flex: 1,
     display: 'flex',
+    maxWidth: '100%',
 };
-const TopPanel = () => {
-    const compactUi = (0, use_compact_ui_1.useCompactUI)();
-    const { setSidebarCollapsedState, sidebarCollapsedState } = (0, react_1.useContext)(sidebar_1.SidebarContext);
-    const actualState = (0, react_1.useMemo)(() => {
-        if (sidebarCollapsedState === 'collapsed') {
+const useResponsiveSidebarStatus = () => {
+    const { sidebarCollapsedStateLeft } = (0, react_1.useContext)(sidebar_1.SidebarContext);
+    const responsiveLeftStatus = (0, use_breakpoint_1.useBreakpoint)(1200) ? 'collapsed' : 'expanded';
+    const actualStateLeft = (0, react_1.useMemo)(() => {
+        if (sidebarCollapsedStateLeft === 'collapsed') {
             return 'collapsed';
         }
-        if (sidebarCollapsedState === 'expanded') {
+        if (sidebarCollapsedStateLeft === 'expanded') {
             return 'expanded';
         }
-        return compactUi ? 'collapsed' : 'expanded';
-    }, [compactUi, sidebarCollapsedState]);
-    const onCollapse = (0, react_1.useCallback)(() => {
-        setSidebarCollapsedState('collapsed');
+        return responsiveLeftStatus;
+    }, [sidebarCollapsedStateLeft, responsiveLeftStatus]);
+    return actualStateLeft;
+};
+exports.useResponsiveSidebarStatus = useResponsiveSidebarStatus;
+const TopPanel = () => {
+    const { setSidebarCollapsedState, sidebarCollapsedStateRight } = (0, react_1.useContext)(sidebar_1.SidebarContext);
+    const actualStateLeft = (0, exports.useResponsiveSidebarStatus)();
+    const actualStateRight = (0, react_1.useMemo)(() => {
+        if (sidebarCollapsedStateRight === 'collapsed') {
+            return 'collapsed';
+        }
+        return 'expanded';
+    }, [sidebarCollapsedStateRight]);
+    const onCollapseLeft = (0, react_1.useCallback)(() => {
+        setSidebarCollapsedState({ left: 'collapsed', right: null });
     }, [setSidebarCollapsedState]);
-    const onExpand = (0, react_1.useCallback)(() => {
-        setSidebarCollapsedState('expanded');
+    const onCollapseRight = (0, react_1.useCallback)(() => {
+        setSidebarCollapsedState({ left: null, right: 'collapsed' });
     }, [setSidebarCollapsedState]);
-    return ((0, jsx_runtime_1.jsxs)("div", { style: container, children: [(0, jsx_runtime_1.jsx)(InitialCompositionLoader_1.InitialCompositionLoader, {}), (0, jsx_runtime_1.jsx)(MenuToolbar_1.MenuToolbar, {}), (0, jsx_runtime_1.jsxs)("div", { style: row, children: [actualState === 'collapsed' ? ((0, jsx_runtime_1.jsx)(CollapsedCompositionSelector_1.CollapsedCompositionSelector, { onExpand: onExpand })) : null, (0, jsx_runtime_1.jsxs)(SplitterContainer_1.SplitterContainer, { minFlex: 0.15, maxFlex: 0.4, defaultFlex: 0.2, id: "sidebar-to-preview", orientation: "vertical", children: [actualState === 'expanded' ? ((0, jsx_runtime_1.jsx)(SplitterElement_1.SplitterElement, { type: "flexer", children: (0, jsx_runtime_1.jsx)("div", { style: leftContainer, className: "css-reset", children: (0, jsx_runtime_1.jsx)(CompositionSelector_1.CompositionSelector, {}) }) })) : null, actualState === 'expanded' ? ((0, jsx_runtime_1.jsx)(SplitterHandle_1.SplitterHandle, { allowToCollapse: true, onCollapse: onCollapse })) : null, (0, jsx_runtime_1.jsx)(SplitterElement_1.SplitterElement, { type: "anti-flexer", children: (0, jsx_runtime_1.jsx)("div", { style: canvasContainer, children: (0, jsx_runtime_1.jsx)(Canvas_1.Canvas, {}) }) })] })] }), (0, jsx_runtime_1.jsx)(PreviewToolbar_1.PreviewToolbar, {})] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { style: container, children: [(0, jsx_runtime_1.jsx)(InitialCompositionLoader_1.InitialCompositionLoader, {}), (0, jsx_runtime_1.jsx)(MenuToolbar_1.MenuToolbar, {}), (0, jsx_runtime_1.jsx)("div", { style: row, children: (0, jsx_runtime_1.jsxs)(SplitterContainer_1.SplitterContainer, { minFlex: 0.15, maxFlex: 0.4, defaultFlex: 0.2, id: "sidebar-to-preview", orientation: "vertical", children: [actualStateLeft === 'expanded' ? ((0, jsx_runtime_1.jsx)(SplitterElement_1.SplitterElement, { type: "flexer", children: (0, jsx_runtime_1.jsx)("div", { style: leftContainer, className: "css-reset", children: (0, jsx_runtime_1.jsx)(CompositionSelector_1.CompositionSelector, {}) }) })) : null, actualStateLeft === 'expanded' ? ((0, jsx_runtime_1.jsx)(SplitterHandle_1.SplitterHandle, { allowToCollapse: "left", onCollapse: onCollapseLeft })) : null, (0, jsx_runtime_1.jsx)(SplitterElement_1.SplitterElement, { type: "anti-flexer", children: (0, jsx_runtime_1.jsxs)(SplitterContainer_1.SplitterContainer, { minFlex: 0.5, maxFlex: 0.8, defaultFlex: 0.7, id: "canvas-to-right-sidebar", orientation: "vertical", children: [(0, jsx_runtime_1.jsx)(SplitterElement_1.SplitterElement, { type: "flexer", children: (0, jsx_runtime_1.jsx)("div", { style: canvasContainer, children: (0, jsx_runtime_1.jsx)(CanvasOrLoading_1.CanvasOrLoading, {}) }) }), actualStateRight === 'expanded' ? ((0, jsx_runtime_1.jsx)(SplitterHandle_1.SplitterHandle, { allowToCollapse: "right", onCollapse: onCollapseRight })) : null, actualStateRight === 'expanded' ? ((0, jsx_runtime_1.jsx)(SplitterElement_1.SplitterElement, { type: "anti-flexer", children: (0, jsx_runtime_1.jsx)(RightPanel_1.RightPanel, {}) })) : null] }) })] }) }), (0, jsx_runtime_1.jsx)(PreviewToolbar_1.PreviewToolbar, {}), (0, jsx_runtime_1.jsx)(CurrentCompositionSideEffects_1.CurrentCompositionKeybindings, {}), (0, jsx_runtime_1.jsx)(CurrentCompositionSideEffects_1.TitleUpdater, {})] }));
 };
 exports.TopPanel = TopPanel;

package/dist/editor/components/UpdateCheck.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import type { PackageManager } from '../../preview-server/get-package-manager';
-export declare type UpdateInfo = {
+export type UpdateInfo = {
     currentVersion: string;
     latestVersion: string;
     updateAvailable: boolean;

package/dist/editor/components/UpdateCheck.js

@@ -3,11 +3,13 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.UpdateCheck = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
+const colors_1 = require("../helpers/colors");
 const modals_1 = require("../state/modals");
 const z_index_1 = require("../state/z-index");
+const actions_1 = require("./RenderQueue/actions");
 const buttonStyle = {
     appearance: 'none',
-    color: 'var(--blue)',
+    color: colors_1.BLUE,
     border: 'none',
     fontWeight: 'bold',
     backgroundColor: 'transparent',
@@ -20,10 +22,7 @@ const UpdateCheck = () => {
     const { tabIndex } = (0, z_index_1.useZIndex)();
     const checkForUpdates = (0, react_1.useCallback)(() => {
         const controller = new AbortController();
-        fetch('/api/update', {
-            signal: controller.signal,
-        })
-            .then((res) => res.json())
+        (0, actions_1.updateAvailable)(controller.signal)
             .then((d) => {
             setInfo(d);
         })

package/dist/editor/components/ZoomGesturesProvider.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+export declare const ZoomGesturesProvider: React.FC<{
+    children: React.ReactNode;
+}>;

package/dist/editor/components/ZoomGesturesProvider.js

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ZoomGesturesProvider = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const editor_zoom_gestures_1 = require("../state/editor-zoom-gestures");
+const ZoomGesturesProvider = ({ children }) => {
+    const [editorZoomGestures, setEditorZoomGesturesState] = (0, react_1.useState)(() => (0, editor_zoom_gestures_1.loadEditorZoomGesturesOption)());
+    const setEditorZoomGestures = (0, react_1.useCallback)((newValue) => {
+        setEditorZoomGesturesState((prevState) => {
+            const newVal = newValue(prevState);
+            (0, editor_zoom_gestures_1.persistEditorZoomGesturesOption)(newVal);
+            return newVal;
+        });
+    }, []);
+    const editorZoomGesturesCtx = (0, react_1.useMemo)(() => {
+        return {
+            editorZoomGestures,
+            setEditorZoomGestures,
+        };
+    }, [editorZoomGestures, setEditorZoomGestures]);
+    return ((0, jsx_runtime_1.jsx)(editor_zoom_gestures_1.EditorZoomGesturesContext.Provider, { value: editorZoomGesturesCtx, children: children }));
+};
+exports.ZoomGesturesProvider = ZoomGesturesProvider;

package/dist/editor/components/ZoomPersistor.d.ts

@@ -1,4 +1,3 @@
 import type React from 'react';
-export declare const persistCurrentZoom: (zoom: number) => void;
 export declare const getZoomForComposition: (composition: string) => number;
 export declare const ZoomPersistor: React.FC;

package/dist/editor/components/ZoomPersistor.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ZoomPersistor = exports.getZoomForComposition = exports.persistCurrentZoom = void 0;
+exports.ZoomPersistor = exports.getZoomForComposition = void 0;
 const react_1 = require("react");
 const remotion_1 = require("remotion");
 const timeline_zoom_1 = require("../state/timeline-zoom");
@@ -15,7 +15,6 @@ const persistCurrentZoom = (zoom) => {
     }
     localStorage.setItem(makeKey(currentComposition), String(zoom));
 };
-exports.persistCurrentZoom = persistCurrentZoom;
 const getZoomForComposition = (composition) => {
     const zoom = localStorage.getItem(makeKey(composition));
     return zoom ? Number(zoom) : 0;
@@ -30,7 +29,7 @@ const ZoomPersistor = () => {
         if (!isActive) {
             return;
         }
-        (0, exports.persistCurrentZoom)(zoom);
+        persistCurrentZoom(zoom);
     }, [zoom, isActive, playing]);
     return null;
 };

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

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