@remotion/cli 4.0.0-alpha.4 → 4.0.0-alpha11

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.getFrameIncrement = exports.getScrollPositionForCursorOnRightEdge = exports.getScrollPositionForCursorOnLeftEdge = exports.scrollToTimelineXOffset = exports.ensureFrameIsInViewport = exports.isCursorInViewport = exports.getFrameWhileScrollingLeft = exports.SCROLL_INCREMENT = 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");
@@ -13,7 +13,7 @@ const canScrollTimelineIntoDirection = () => {
     return { canScrollRight, canScrollLeft };
 };
 exports.canScrollTimelineIntoDirection = canScrollTimelineIntoDirection;
-exports.SCROLL_INCREMENT = 200;
+const SCROLL_INCREMENT = 200;
 const calculateFrameWhileScrollingRight = ({ durationInFrames, width, scrollLeft, }) => {
     var _a;
     return ((0, exports.getFrameFromX)({
@@ -23,12 +23,12 @@ 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;
     const nextFrame = (0, exports.getFrameFromX)({
-        clientX: ((_a = timeline_refs_1.scrollableRef.current) === null || _a === void 0 ? void 0 : _a.scrollLeft) - exports.SCROLL_INCREMENT,
+        clientX: ((_a = timeline_refs_1.scrollableRef.current) === null || _a === void 0 ? void 0 : _a.scrollLeft) - SCROLL_INCREMENT,
         durationInFrames,
         width,
         extrapolate: 'clamp',
@@ -95,7 +95,7 @@ const ensureFrameIsInViewport = ({ direction, durationInFrames, frame, }) => {
     if (direction === 'fit-right') {
         const currentFrameRight = calculateFrameWhileScrollingRight({
             durationInFrames,
-            scrollLeft: scrollLeft,
+            scrollLeft,
             width,
         });
         const scrollPos = (0, exports.getScrollPositionForCursorOnRightEdge)({
@@ -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) -
@@ -166,16 +166,18 @@ exports.getScrollPositionForCursorOnRightEdge = getScrollPositionForCursorOnRigh
 const getFrameIncrement = (durationInFrames) => {
     var _a, _b;
     const width = (_b = (_a = timeline_refs_1.scrollableRef.current) === null || _a === void 0 ? void 0 : _a.scrollWidth) !== null && _b !== void 0 ? _b : 0;
-    return ((width - timeline_layout_1.TIMELINE_PADDING * 2) /
-        (durationInFrames - 1));
+    return (0, exports.getFrameIncrementFromWidth)(durationInFrames, width);
 };
-exports.getFrameIncrement = getFrameIncrement;
+const getFrameIncrementFromWidth = (durationInFrames, width) => {
+    return (width - timeline_layout_1.TIMELINE_PADDING * 2) / (durationInFrames - 1);
+};
+exports.getFrameIncrementFromWidth = getFrameIncrementFromWidth;
 const getFrameWhileScrollingRight = ({ durationInFrames, width, }) => {
     var _a, _b;
     const nextFrame = calculateFrameWhileScrollingRight({
         durationInFrames,
         width,
-        scrollLeft: ((_a = timeline_refs_1.scrollableRef.current) === null || _a === void 0 ? void 0 : _a.scrollLeft) + exports.SCROLL_INCREMENT,
+        scrollLeft: ((_a = timeline_refs_1.scrollableRef.current) === null || _a === void 0 ? void 0 : _a.scrollLeft) + SCROLL_INCREMENT,
     });
     const currentFrame = calculateFrameWhileScrollingRight({
         durationInFrames,
@@ -206,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/TimelineInOutToggle.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 export declare const inOutHandles: React.RefObject<{
-    inMarkClick: () => void;
-    outMarkClick: () => void;
+    inMarkClick: (e: KeyboardEvent | null) => void;
+    outMarkClick: (e: KeyboardEvent | null) => void;
     clearMarks: () => void;
     setMarks: (marks: [number | null, number | null]) => void;
 }>;

package/dist/editor/components/TimelineInOutToggle.js

@@ -4,13 +4,21 @@ exports.TimelineInOutPointToggle = 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) => `Mark ${pointType}`;
+const getTooltipText = (pointType, key) => [
+    `Mark ${pointType}`,
+    (0, use_keybinding_1.areKeyboardShortcutsDisabled)() ? null : `(${key})`,
+    '- right click to clear',
+]
+    .filter(truthy_1.truthy)
+    .join(' ');
 const style = {
     width: 16,
     height: 16,
@@ -24,10 +32,27 @@ const TimelineInOutPointToggle = () => {
     const isStill = (0, is_current_selected_still_1.useIsStill)();
     const videoConfig = remotion_1.Internals.useUnsafeVideoConfig();
     const keybindings = (0, use_keybinding_1.useKeybinding)();
-    const onInMark = (0, react_1.useCallback)(() => {
+    const onInOutClear = (0, react_1.useCallback)(() => {
+        setInAndOutFrames(() => {
+            return {
+                inFrame: null,
+                outFrame: null,
+            };
+        });
+    }, [setInAndOutFrames]);
+    const onInMark = (0, react_1.useCallback)((e) => {
         if (!videoConfig) {
             return null;
         }
+        if (e === null || e === void 0 ? void 0 : e.shiftKey) {
+            setInAndOutFrames((f) => {
+                return {
+                    ...f,
+                    inFrame: null,
+                };
+            });
+            return null;
+        }
         setInAndOutFrames((prev) => {
             const biggestPossible = prev.outFrame === null ? Infinity : prev.outFrame - 1;
             const selected = Math.min(timelinePosition, biggestPossible);
@@ -52,10 +77,43 @@ const TimelineInOutPointToggle = () => {
             };
         });
     }, [setInAndOutFrames, timelinePosition, videoConfig]);
-    const onOutMark = (0, react_1.useCallback)(() => {
+    const clearInMark = (0, react_1.useCallback)((e) => {
+        if (!videoConfig) {
+            return null;
+        }
+        e.preventDefault();
+        setInAndOutFrames((f) => {
+            return {
+                ...f,
+                inFrame: null,
+            };
+        });
+    }, [setInAndOutFrames, videoConfig]);
+    const clearOutMark = (0, react_1.useCallback)((e) => {
+        if (!videoConfig) {
+            return null;
+        }
+        e === null || e === void 0 ? void 0 : e.preventDefault();
+        setInAndOutFrames((f) => {
+            return {
+                ...f,
+                outFrame: null,
+            };
+        });
+    }, [setInAndOutFrames, videoConfig]);
+    const onOutMark = (0, react_1.useCallback)((e) => {
         if (!videoConfig) {
             return null;
         }
+        if (e === null || e === void 0 ? void 0 : e.shiftKey) {
+            setInAndOutFrames((f) => {
+                return {
+                    ...f,
+                    outFrame: null,
+                };
+            });
+            return;
+        }
         setInAndOutFrames((prev) => {
             const smallestPossible = prev.inFrame === null ? -Infinity : prev.inFrame + 1;
             const selected = Math.max(timelinePosition, smallestPossible);
@@ -79,30 +137,26 @@ const TimelineInOutPointToggle = () => {
             };
         });
     }, [setInAndOutFrames, timelinePosition, videoConfig]);
-    const onInOutClear = (0, react_1.useCallback)(() => {
-        setInAndOutFrames(() => {
-            return {
-                inFrame: null,
-                outFrame: null,
-            };
-        });
-    }, [setInAndOutFrames]);
     (0, react_1.useEffect)(() => {
         const iKey = keybindings.registerKeybinding({
             event: 'keypress',
             key: 'i',
-            callback: () => {
-                onInMark();
+            callback: (e) => {
+                onInMark(e);
             },
             commandCtrlKey: false,
+            preventDefault: true,
+            triggerIfInputFieldFocused: false,
         });
         const oKey = keybindings.registerKeybinding({
             event: 'keypress',
             key: 'o',
-            callback: () => {
-                onOutMark();
+            callback: (e) => {
+                onOutMark(e);
             },
             commandCtrlKey: false,
+            preventDefault: true,
+            triggerIfInputFieldFocused: false,
         });
         const xKey = keybindings.registerKeybinding({
             event: 'keypress',
@@ -111,6 +165,8 @@ const TimelineInOutPointToggle = () => {
                 onInOutClear();
             },
             commandCtrlKey: false,
+            preventDefault: true,
+            triggerIfInputFieldFocused: false,
         });
         return () => {
             oKey.unregister();
@@ -162,13 +218,10 @@ const TimelineInOutPointToggle = () => {
                 });
             },
         };
-    });
-    if (!videoConfig) {
-        return null;
-    }
+    }, [onInMark, onInOutClear, onOutMark, setInAndOutFrames]);
     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: onInMark, 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, 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.js

@@ -3,11 +3,12 @@ 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 buttonStyle = {
     appearance: 'none',
-    color: 'var(--blue)',
+    color: colors_1.BLUE,
     border: 'none',
     fontWeight: 'bold',
     backgroundColor: 'transparent',

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: (frame: 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");
@@ -8,17 +8,16 @@ const FramePersistor_1 = require("./FramePersistor");
 const makeKey = (composition) => {
     return `remotion.zoom.${composition}`;
 };
-const persistCurrentZoom = (frame) => {
+const persistCurrentZoom = (zoom) => {
     const currentComposition = (0, FramePersistor_1.getCurrentCompositionFromUrl)();
     if (!currentComposition) {
         return;
     }
-    localStorage.setItem(makeKey(currentComposition), String(frame));
+    localStorage.setItem(makeKey(currentComposition), String(zoom));
 };
-exports.persistCurrentZoom = persistCurrentZoom;
 const getZoomForComposition = (composition) => {
-    const frame = localStorage.getItem(makeKey(composition));
-    return frame ? Number(frame) : 0;
+    const zoom = localStorage.getItem(makeKey(composition));
+    return zoom ? Number(zoom) : 0;
 };
 exports.getZoomForComposition = getZoomForComposition;
 const ZoomPersistor = () => {
@@ -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 declare type ZodType = Awaited<typeof import('zod')>['z'];
+export declare 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;
+}>;

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

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

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

@@ -3,14 +3,16 @@ export declare const SPACING_UNIT = 8;
 export declare const Spacing: React.FC<{
     x?: number;
     y?: number;
+    block?: boolean;
 }>;
 export declare const Flex: React.FC<{
     children?: React.ReactNode;
 }>;
 export declare const Row: React.FC<{
-    justify?: 'center';
+    justify?: 'center' | 'flex-start' | 'flex-end';
     align?: 'center';
     style?: React.CSSProperties;
+    flex?: number;
     className?: string;
     children: React.ReactNode;
 }>;

package/dist/editor/components/layout.js

@@ -4,21 +4,22 @@ exports.Column = exports.Row = exports.Flex = exports.Spacing = exports.SPACING_
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 exports.SPACING_UNIT = 8;
-const Spacing = ({ x = 0, y = 0 }) => {
+const Spacing = ({ x = 0, y = 0, block = false }) => {
     const style = (0, react_1.useMemo)(() => {
         return {
-            display: 'inline-block',
+            display: block ? 'block' : 'inline-block',
             width: x * exports.SPACING_UNIT,
             height: y * exports.SPACING_UNIT,
+            flexShrink: 0,
         };
-    }, [x, y]);
+    }, [block, x, y]);
     return (0, jsx_runtime_1.jsx)("div", { style: style });
 };
 exports.Spacing = Spacing;
-const flex = { flex: 1 };
-const Flex = ({ children }) => (0, jsx_runtime_1.jsx)("div", { style: flex, children: children });
+const flexCss = { flex: 1 };
+const Flex = ({ children }) => (0, jsx_runtime_1.jsx)("div", { style: flexCss, children: children });
 exports.Flex = Flex;
-const Row = ({ children, justify, className, align, style = {} }) => {
+const Row = ({ children, justify, className, align, flex, style = {} }) => {
     const finalStyle = (0, react_1.useMemo)(() => {
         return {
             ...style,
@@ -26,8 +27,9 @@ const Row = ({ children, justify, className, align, style = {} }) => {
             flexDirection: 'row',
             justifyContent: justify !== null && justify !== void 0 ? justify : 'flex-start',
             alignItems: align !== null && align !== void 0 ? align : 'flex-start',
+            flex: flex !== null && flex !== void 0 ? flex : undefined,
         };
-    }, [align, justify, style]);
+    }, [align, flex, justify, style]);
     return ((0, jsx_runtime_1.jsx)("div", { className: className, style: finalStyle, children: children }));
 };
 exports.Row = Row;

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

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

package/dist/editor/helpers/calculate-timeline.js

@@ -29,7 +29,7 @@ const calculateTimeline = ({ sequences, sequenceDuration, }) => {
                     rootId: '-',
                     showInTimeline: true,
                     nonce: 0,
-                    showLoopTimesInTimeline: undefined,
+                    loopDisplay: undefined,
                 },
                 depth: 0,
                 hash: '-',

package/dist/editor/helpers/client-id.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+declare type PreviewServerState = {
+    type: 'init';
+} | {
+    type: 'connected';
+    clientId: string;
+} | {
+    type: 'disconnected';
+};
+export declare const StudioServerConnectionCtx: React.Context<PreviewServerState>;
+export declare const studioServerConnectionRef: React.RefObject<{
+    set: (jobs: PreviewServerState) => void;
+}>;
+export declare const PreviewServerConnection: React.FC<{
+    children: React.ReactNode;
+}>;
+export {};