@remotion/studio 4.0.423 → 4.0.424

package/dist/components/Timeline/TimelineLayerEye.js

@@ -32,9 +32,9 @@ const TimelineLayerEye = ({ onInvoked, hidden, type }) => {
             return null;
         }
         if (type === 'speaker') {
-            return ((0, jsx_runtime_1.jsx)("svg", { viewBox: "0 0 10 14", fill: "none", style: speakerIcon, children: (0, jsx_runtime_1.jsx)("path", { d: "M9.40938 0.0869018C9.76875 0.249402 10 0.605652 10 0.999402V12.9994C10 13.3932 9.76875 13.7494 9.40938 13.9119C9.05 14.0744 8.62813 14.0088 8.33438 13.7463L4.11875 9.9994H2C0.896875 9.9994 0 9.10253 0 7.9994V5.9994C0 4.89628 0.896875 3.9994 2 3.9994H4.11875L8.33438 0.252527C8.62813 -0.0099732 9.05 -0.0724732 9.40938 0.0869018Z", fill: color }) }));
+            return (jsx_runtime_1.jsx("svg", { viewBox: "0 0 10 14", fill: "none", style: speakerIcon, children: jsx_runtime_1.jsx("path", { d: "M9.40938 0.0869018C9.76875 0.249402 10 0.605652 10 0.999402V12.9994C10 13.3932 9.76875 13.7494 9.40938 13.9119C9.05 14.0744 8.62813 14.0088 8.33438 13.7463L4.11875 9.9994H2C0.896875 9.9994 0 9.10253 0 7.9994V5.9994C0 4.89628 0.896875 3.9994 2 3.9994H4.11875L8.33438 0.252527C8.62813 -0.0099732 9.05 -0.0724732 9.40938 0.0869018Z", fill: color }) }));
         }
-        return ((0, jsx_runtime_1.jsx)("svg", { style: eyeIcon, viewBox: "0 0 24 16", fill: "none", children: (0, jsx_runtime_1.jsx)("path", { d: "M24 7.551C24 7.551 19.748 16 12.015 16C4.835 16 0 7.551 0 7.551C0 7.551 4.446 0 12.015 0C19.709 0 24 7.551 24 7.551ZM17 8C17 5.243 14.757 3 12 3C9.243 3 7 5.243 7 8C7 10.757 9.243 13 12 13C14.757 13 17 10.757 17 8Z", fill: color }) }));
+        return (jsx_runtime_1.jsx("svg", { style: eyeIcon, viewBox: "0 0 24 16", fill: "none", children: jsx_runtime_1.jsx("path", { d: "M24 7.551C24 7.551 19.748 16 12.015 16C4.835 16 0 7.551 0 7.551C0 7.551 4.446 0 12.015 0C19.709 0 24 7.551 24 7.551ZM17 8C17 5.243 14.757 3 12 3C9.243 3 7 5.243 7 8C7 10.757 9.243 13 12 13C14.757 13 17 10.757 17 8Z", fill: color }) }));
     }, [hidden, type]);
     const onPointerDown = (0, react_1.useCallback)((e) => {
         if (e.button !== 0) {
@@ -51,6 +51,6 @@ const TimelineLayerEye = ({ onInvoked, hidden, type }) => {
             onInvoked(layerPointedDown);
         }
     }, [onInvoked]);
-    return ((0, jsx_runtime_1.jsx)("div", { style: container, onPointerEnter: onPointerEnter, onPointerDown: onPointerDown, children: renderAction(colors_1.LIGHT_COLOR) }));
+    return (jsx_runtime_1.jsx("div", { style: container, onPointerEnter: onPointerEnter, onPointerDown: onPointerDown, children: renderAction(colors_1.LIGHT_COLOR) }));
 };
 exports.TimelineLayerEye = TimelineLayerEye;

package/dist/components/Timeline/TimelineList.js

@@ -18,8 +18,9 @@ const TimelineList = ({ timeline }) => {
         triggerOnWindowResize: false,
     });
     const isCompact = size ? size.width < 250 : false;
-    return ((0, jsx_runtime_1.jsxs)("div", { ref: ref, style: container, children: [(0, jsx_runtime_1.jsx)(TimelineTimeIndicators_1.TimelineTimePadding, {}), timeline.map((track) => {
-                return ((0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(TimelineListItem_1.TimelineListItem, { nestedDepth: track.depth, sequence: track.sequence, isCompact: isCompact }, track.sequence.id) }, track.sequence.id));
+    return (jsx_runtime_1.jsxs("div", { ref: ref, style: container, children: [
+            jsx_runtime_1.jsx(TimelineTimeIndicators_1.TimelineTimePadding, {}), timeline.map((track) => {
+                return (jsx_runtime_1.jsx("div", { children: jsx_runtime_1.jsx(TimelineListItem_1.TimelineListItem, { nestedDepth: track.depth, sequence: track.sequence, isCompact: isCompact }, track.sequence.id) }, track.sequence.id));
             })] }));
 };
 exports.TimelineList = TimelineList;

package/dist/components/Timeline/TimelineListItem.js

@@ -48,6 +48,8 @@ const TimelineListItem = ({ nestedDepth, sequence, isCompact }) => {
             borderBottom: `1px solid ${colors_1.TIMELINE_TRACK_SEPARATOR}`,
         };
     }, [sequence.type]);
-    return ((0, jsx_runtime_1.jsxs)("div", { style: outer, children: [(0, jsx_runtime_1.jsx)(TimelineLayerEye_1.TimelineLayerEye, { type: sequence.type === 'audio' ? 'speaker' : 'eye', hidden: isItemHidden, onInvoked: onToggleVisibility }), (0, jsx_runtime_1.jsx)("div", { style: padder }), sequence.parent && nestedDepth > 0 ? (0, jsx_runtime_1.jsx)("div", { style: space }) : null, (0, jsx_runtime_1.jsx)(TimelineStack_1.TimelineStack, { sequence: sequence, isCompact: isCompact })] }));
+    return (jsx_runtime_1.jsxs("div", { style: outer, children: [
+            jsx_runtime_1.jsx(TimelineLayerEye_1.TimelineLayerEye, { type: sequence.type === 'audio' ? 'speaker' : 'eye', hidden: isItemHidden, onInvoked: onToggleVisibility }), jsx_runtime_1.jsx("div", { style: padder }), sequence.parent && nestedDepth > 0 ? jsx_runtime_1.jsx("div", { style: space }) : null, jsx_runtime_1.jsx(TimelineStack_1.TimelineStack, { sequence: sequence, isCompact: isCompact })
+        ] }));
 };
 exports.TimelineListItem = TimelineListItem;

package/dist/components/Timeline/TimelineScrollable.js

@@ -21,6 +21,6 @@ const TimelineScrollable = ({ children }) => {
             minHeight: '100%',
         };
     }, []);
-    return ((0, jsx_runtime_1.jsx)("div", { ref: timeline_refs_1.scrollableRef, style: outer, className: is_menu_item_1.HORIZONTAL_SCROLLBAR_CLASSNAME, children: (0, jsx_runtime_1.jsx)("div", { style: containerStyle, children: children }) }));
+    return (jsx_runtime_1.jsx("div", { ref: timeline_refs_1.scrollableRef, style: outer, className: is_menu_item_1.HORIZONTAL_SCROLLBAR_CLASSNAME, children: jsx_runtime_1.jsx("div", { style: containerStyle, children: children }) }));
 };
 exports.TimelineScrollable = TimelineScrollable;

package/dist/components/Timeline/TimelineSequence.js

@@ -20,7 +20,7 @@ const TimelineSequence = ({ s }) => {
     if (windowWidth === null) {
         return null;
     }
-    return (0, jsx_runtime_1.jsx)(Inner, { windowWidth: windowWidth, s: s });
+    return jsx_runtime_1.jsx(Inner, { windowWidth: windowWidth, s: s });
 };
 exports.TimelineSequence = TimelineSequence;
 const Inner = ({ s, windowWidth }) => {
@@ -80,7 +80,7 @@ const Inner = ({ s, windowWidth }) => {
     if (maxMediaDuration === null) {
         return null;
     }
-    return ((0, jsx_runtime_1.jsxs)("div", { style: style, title: s.displayName, children: [premountWidth ? ((0, jsx_runtime_1.jsx)("div", { style: {
+    return (jsx_runtime_1.jsxs("div", { style: style, title: s.displayName, children: [premountWidth ? (jsx_runtime_1.jsx("div", { style: {
                     width: premountWidth,
                     height: '100%',
                     background: `repeating-linear-gradient(
@@ -91,7 +91,7 @@ const Inner = ({ s, windowWidth }) => {
 							rgba(255, 255, 255, ${isPremounting ? 0.5 : 0.2}) 4px
 						)`,
                     position: 'absolute',
-                } })) : null, postmountWidth ? ((0, jsx_runtime_1.jsx)("div", { style: {
+                } })) : null, postmountWidth ? (jsx_runtime_1.jsx("div", { style: {
                     width: postmountWidth,
                     height: '100%',
                     background: `repeating-linear-gradient(
@@ -103,13 +103,13 @@ const Inner = ({ s, windowWidth }) => {
 						)`,
                     position: 'absolute',
                     right: 0,
-                } })) : null, s.type === 'audio' ? ((0, jsx_runtime_1.jsx)(AudioWaveform_1.AudioWaveform, { src: s.src, doesVolumeChange: s.doesVolumeChange, visualizationWidth: width, startFrom: s.startMediaFrom, durationInFrames: s.duration, volume: s.volume, playbackRate: s.playbackRate })) : null, s.type === 'video' ? ((0, jsx_runtime_1.jsx)(TimelineVideoInfo_1.TimelineVideoInfo, { src: s.src, visualizationWidth: width, naturalWidth: naturalWidth, trimBefore: s.startMediaFrom, durationInFrames: s.duration, playbackRate: s.playbackRate })) : null, s.loopDisplay === undefined ? null : ((0, jsx_runtime_1.jsx)(LoopedTimelineIndicators_1.LoopedTimelineIndicator, { loops: s.loopDisplay.numberOfTimes })), s.type !== 'audio' &&
+                } })) : null, s.type === 'audio' ? (jsx_runtime_1.jsx(AudioWaveform_1.AudioWaveform, { src: s.src, doesVolumeChange: s.doesVolumeChange, visualizationWidth: width, startFrom: s.startMediaFrom, durationInFrames: s.duration, volume: s.volume, playbackRate: s.playbackRate })) : null, s.type === 'video' ? (jsx_runtime_1.jsx(TimelineVideoInfo_1.TimelineVideoInfo, { src: s.src, visualizationWidth: width, naturalWidth: naturalWidth, trimBefore: s.startMediaFrom, durationInFrames: s.duration, playbackRate: s.playbackRate })) : null, s.loopDisplay === undefined ? null : (jsx_runtime_1.jsx(LoopedTimelineIndicators_1.LoopedTimelineIndicator, { loops: s.loopDisplay.numberOfTimes })), s.type !== 'audio' &&
                 s.type !== 'video' &&
                 s.loopDisplay === undefined &&
-                (isInRange || isPremounting || isPostmounting) ? ((0, jsx_runtime_1.jsx)("div", { style: {
+                (isInRange || isPremounting || isPostmounting) ? (jsx_runtime_1.jsx("div", { style: {
                     paddingLeft: 5 + (premountWidth !== null && premountWidth !== void 0 ? premountWidth : 0),
                     height: '100%',
                     display: 'flex',
                     alignItems: 'center',
-                }, children: (0, jsx_runtime_1.jsx)(TimelineSequenceFrame_1.TimelineSequenceFrame, { premounted: isPremounting, postmounted: isPostmounting ? s.duration - 1 : null, roundedFrame: roundedFrame }) })) : null] }, s.id));
+                }, children: jsx_runtime_1.jsx(TimelineSequenceFrame_1.TimelineSequenceFrame, { premounted: isPremounting, postmounted: isPostmounting ? s.duration - 1 : null, roundedFrame: roundedFrame }) })) : null] }, s.id));
 };

package/dist/components/Timeline/TimelineSequenceFrame.js

@@ -9,7 +9,7 @@ const relativeFrameStyle = {
     opacity: 0.5,
 };
 const TimelineSequenceFrame = ({ roundedFrame, premounted, postmounted }) => {
-    return ((0, jsx_runtime_1.jsx)("div", { style: relativeFrameStyle, children: premounted
+    return (jsx_runtime_1.jsx("div", { style: relativeFrameStyle, children: premounted
             ? '0 (Premounted)'
             : postmounted !== null
                 ? `${postmounted} (Postmounted)`

package/dist/components/Timeline/TimelineSlider.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
 export declare const redrawTimelineSliderFast: React.RefObject<{
-    draw: (frame: number, width?: number) => void;
+    draw: (frame: number, width?: number | undefined) => void;
 } | null>;
 export declare const TimelineSlider: React.FC;

package/dist/components/Timeline/TimelineSlider.js

@@ -28,7 +28,7 @@ const TimelineSlider = () => {
     if (videoConfig === null || timelineWidth === null) {
         return null;
     }
-    return (0, jsx_runtime_1.jsx)(Inner, {});
+    return jsx_runtime_1.jsx(Inner, {});
 };
 exports.TimelineSlider = TimelineSlider;
 const Inner = () => {
@@ -49,7 +49,8 @@ const Inner = () => {
     (0, react_1.useImperativeHandle)(exports.redrawTimelineSliderFast, () => {
         return {
             draw: (frame, width) => {
-                var _a, _b;
+                var _a;
+                var _b;
                 const { current } = ref;
                 if (!current) {
                     throw new Error('unexpectedly did not have ref to timelineslider');
@@ -75,5 +76,7 @@ const Inner = () => {
             current.removeEventListener('scroll', onScroll);
         };
     }, []);
-    return ((0, jsx_runtime_1.jsxs)("div", { ref: ref, style: style, children: [(0, jsx_runtime_1.jsx)("div", { style: line }), (0, jsx_runtime_1.jsx)(TimelineSliderHandle_1.TimelineSliderHandle, {})] }));
+    return (jsx_runtime_1.jsxs("div", { ref: ref, style: style, children: [
+            jsx_runtime_1.jsx("div", { style: line }), jsx_runtime_1.jsx(TimelineSliderHandle_1.TimelineSliderHandle, {})
+        ] }));
 };

package/dist/components/Timeline/TimelineSliderHandle.js

@@ -9,6 +9,6 @@ const container = {
     marginLeft: -8,
 };
 const TimelineSliderHandle = () => {
-    return ((0, jsx_runtime_1.jsx)("div", { style: container, children: (0, jsx_runtime_1.jsx)("svg", { width: 17, viewBox: "0 0 159 212", children: (0, jsx_runtime_1.jsx)("path", { d: "M17.0234375,1.07763419 L143.355469,1.07763419 C151.63974,1.07763419 158.355469,7.79336295 158.355469,16.0776342 L158.355469,69.390507 C158.355469,73.7938677 156.420655,77.9748242 153.064021,80.8248415 L89.3980057,134.881757 C83.7986799,139.635978 75.5802263,139.635978 69.9809005,134.881757 L6.66764807,81.1243622 C3.0872392,78.0843437 1.0234375,73.6246568 1.0234375,68.9277387 L1.0234375,17.0776342 C1.0234375,8.2410782 8.1868815,1.07763419 17.0234375,1.07763419 Z", fill: "#f02c00" }) }) }));
+    return (jsx_runtime_1.jsx("div", { style: container, children: jsx_runtime_1.jsx("svg", { width: 17, viewBox: "0 0 159 212", children: jsx_runtime_1.jsx("path", { d: "M17.0234375,1.07763419 L143.355469,1.07763419 C151.63974,1.07763419 158.355469,7.79336295 158.355469,16.0776342 L158.355469,69.390507 C158.355469,73.7938677 156.420655,77.9748242 153.064021,80.8248415 L89.3980057,134.881757 C83.7986799,139.635978 75.5802263,139.635978 69.9809005,134.881757 L6.66764807,81.1243622 C3.0872392,78.0843437 1.0234375,73.6246568 1.0234375,68.9277387 L1.0234375,17.0776342 C1.0234375,8.2410782 8.1868815,1.07763419 17.0234375,1.07763419 Z", fill: "#f02c00" }) }) }));
 };
 exports.TimelineSliderHandle = TimelineSliderHandle;

package/dist/components/Timeline/TimelineStack/index.js

@@ -169,8 +169,11 @@ const TimelineStack = ({ isCompact, sequence }) => {
     const text = sequence.displayName.length > 1000
         ? sequence.displayName.slice(0, 1000) + '...'
         : sequence.displayName;
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { onPointerEnter: onTitlePointerEnter, onPointerLeave: onTitlePointerLeave, title: originalLocation
+    return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
+            jsx_runtime_1.jsx("div", { onPointerEnter: onTitlePointerEnter, onPointerLeave: onTitlePointerLeave, title: originalLocation
                     ? (0, source_attribution_1.getOriginalSourceAttribution)(originalLocation)
-                    : text || '<Sequence>', style: titleStyle, onClick: onClickTitle, children: text || '<Sequence>' }), isCompact || !originalLocation ? null : ((0, jsx_runtime_1.jsx)("div", { onPointerEnter: onStackPointerEnter, onPointerLeave: onStackPointerLeave, onClick: onClickStack, style: style, children: (0, source_attribution_1.getOriginalSourceAttribution)(originalLocation) })), opening ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 0.5 }), (0, jsx_runtime_1.jsx)(Spinner_1.Spinner, { duration: 0.5, size: 12 })] })) : null] }));
+                    : text || '<Sequence>', style: titleStyle, onClick: onClickTitle, children: text || '<Sequence>' }), isCompact || !originalLocation ? null : (jsx_runtime_1.jsx("div", { onPointerEnter: onStackPointerEnter, onPointerLeave: onStackPointerLeave, onClick: onClickStack, style: style, children: (0, source_attribution_1.getOriginalSourceAttribution)(originalLocation) })), opening ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
+                    jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.5 }), jsx_runtime_1.jsx(Spinner_1.Spinner, { duration: 0.5, size: 12 })
+                ] })) : null] }));
 };
 exports.TimelineStack = TimelineStack;

package/dist/components/Timeline/TimelineTimeIndicators.js

@@ -48,11 +48,11 @@ const timeValue = {
     borderBottom: `${timeline_layout_1.TIMELINE_ITEM_BORDER_BOTTOM}px solid ${colors_1.TIMELINE_TRACK_SEPARATOR}`,
 };
 const TimelineTimePlaceholders = () => {
-    return ((0, jsx_runtime_1.jsx)("div", { style: timeValue, children: (0, jsx_runtime_1.jsx)(TimeValue_1.TimeValue, {}) }));
+    return (jsx_runtime_1.jsx("div", { style: timeValue, children: jsx_runtime_1.jsx(TimeValue_1.TimeValue, {}) }));
 };
 exports.TimelineTimePlaceholders = TimelineTimePlaceholders;
 const TimelineTimePadding = () => {
-    return ((0, jsx_runtime_1.jsx)("div", { style: {
+    return (jsx_runtime_1.jsx("div", { style: {
             height: exports.TIMELINE_TIME_INDICATOR_HEIGHT,
         } }));
 };
@@ -66,7 +66,7 @@ const TimelineTimeIndicators = () => {
     if (video === null) {
         return null;
     }
-    return ((0, jsx_runtime_1.jsx)(Inner, { durationInFrames: video.durationInFrames, fps: video.fps, windowWidth: sliderTrack }));
+    return (jsx_runtime_1.jsx(Inner, { durationInFrames: video.durationInFrames, fps: video.fps, windowWidth: sliderTrack }));
 };
 exports.TimelineTimeIndicators = TimelineTimeIndicators;
 const Inner = ({ windowWidth, durationInFrames, fps }) => {
@@ -148,7 +148,7 @@ const Inner = ({ windowWidth, durationInFrames, fps }) => {
             return !alreadyUsed;
         });
     }, [durationInFrames, fps, windowWidth]);
-    return ((0, jsx_runtime_1.jsx)("div", { ref: ref, style: style, children: ticks.map((t) => {
-            return ((0, jsx_runtime_1.jsx)("div", { style: t.style, children: t.showTime ? ((0, jsx_runtime_1.jsx)("div", { style: tickLabel, children: (0, render_frame_1.renderFrame)(t.frame, fps) })) : null }, t.frame));
+    return (jsx_runtime_1.jsx("div", { ref: ref, style: style, children: ticks.map((t) => {
+            return (jsx_runtime_1.jsx("div", { style: t.style, children: t.showTime ? (jsx_runtime_1.jsx("div", { style: tickLabel, children: (0, render_frame_1.renderFrame)(t.frame, fps) })) : null }, t.frame));
         }) }));
 };

package/dist/components/Timeline/TimelineTracks.js

@@ -23,14 +23,16 @@ const TimelineTracks = ({ timeline, hasBeenCut }) => {
             width: 100 + '%',
         };
     }, []);
-    return ((0, jsx_runtime_1.jsxs)("div", { style: timelineStyle, children: [(0, jsx_runtime_1.jsxs)("div", { style: content, children: [(0, jsx_runtime_1.jsx)(TimelineTimeIndicators_1.TimelineTimePadding, {}), timeline.map((track) => {
+    return (jsx_runtime_1.jsxs("div", { style: timelineStyle, children: [
+            jsx_runtime_1.jsxs("div", { style: content, children: [
+                    jsx_runtime_1.jsx(TimelineTimeIndicators_1.TimelineTimePadding, {}), timeline.map((track) => {
                         if ((0, is_collapsed_1.isTrackHidden)(track)) {
                             return null;
                         }
-                        return ((0, jsx_runtime_1.jsx)("div", { style: {
+                        return (jsx_runtime_1.jsx("div", { style: {
                                 height: (0, timeline_layout_1.getTimelineLayerHeight)(track.sequence.type === 'video' ? 'video' : 'other'),
                                 marginBottom: timeline_layout_1.TIMELINE_ITEM_BORDER_BOTTOM,
-                            }, children: (0, jsx_runtime_1.jsx)(TimelineSequence_1.TimelineSequence, { s: track.sequence }) }, track.sequence.id));
-                    })] }), hasBeenCut ? (0, jsx_runtime_1.jsx)(MaxTimelineTracks_1.MaxTimelineTracksReached, {}) : null] }));
+                            }, children: jsx_runtime_1.jsx(TimelineSequence_1.TimelineSequence, { s: track.sequence }) }, track.sequence.id));
+                    })] }), hasBeenCut ? jsx_runtime_1.jsx(MaxTimelineTracks_1.MaxTimelineTracksReached, {}) : null] }));
 };
 exports.TimelineTracks = TimelineTracks;

package/dist/components/Timeline/TimelineVideoInfo.js

@@ -283,6 +283,6 @@ const TimelineVideoInfo = ({ src, visualizationWidth, naturalWidth, trimBefore,
         trimBefore,
         visualizationWidth,
     ]);
-    return (0, jsx_runtime_1.jsx)("div", { ref: ref, style: containerStyle });
+    return jsx_runtime_1.jsx("div", { ref: ref, style: containerStyle });
 };
 exports.TimelineVideoInfo = TimelineVideoInfo;

package/dist/components/Timeline/TimelineWidthProvider.js

@@ -12,6 +12,6 @@ const TimelineWidthProvider = ({ children }) => {
         triggerOnWindowResize: false,
         shouldApplyCssTransforms: true,
     });
-    return ((0, jsx_runtime_1.jsx)(exports.TimelineWidthContext.Provider, { value: (_a = size === null || size === void 0 ? void 0 : size.width) !== null && _a !== void 0 ? _a : null, children: children }));
+    return (jsx_runtime_1.jsx(exports.TimelineWidthContext.Provider, { value: (_a = size === null || size === void 0 ? void 0 : size.width) !== null && _a !== void 0 ? _a : null, children: children }));
 };
 exports.TimelineWidthProvider = TimelineWidthProvider;

package/dist/components/Timeline/TimelineZoomControls.js

@@ -54,6 +54,8 @@ const TimelineZoomControls = () => {
         return null;
     }
     const zoom = (_a = zoomMap[canvasContent.compositionId]) !== null && _a !== void 0 ? _a : timeline_zoom_1.TIMELINE_MIN_ZOOM;
-    return ((0, jsx_runtime_1.jsxs)("div", { style: container, children: [(0, jsx_runtime_1.jsx)(ControlButton_1.ControlButton, { onClick: onMinusClicked, style: buttonStyle, title: "Zoom out timeline", role: 'ControlButton', type: "button", disabled: timeline_zoom_1.TIMELINE_MIN_ZOOM === zoom, children: (0, jsx_runtime_1.jsx)(minus_1.Minus, { style: iconStyle }) }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 0.5 }), (0, jsx_runtime_1.jsx)("input", { title: `Timeline zoom (${zoom}x)`, alt: `Timeline zoom (${zoom}x)`, type: 'range', min: timeline_zoom_1.TIMELINE_MIN_ZOOM, step: 0.1, value: zoom, max: timeline_zoom_1.TIMELINE_MAX_ZOOM, onChange: onChange, className: "__remotion-timeline-slider", tabIndex: tabIndex }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 0.5 }), (0, jsx_runtime_1.jsx)(ControlButton_1.ControlButton, { onClick: onPlusClicked, style: buttonStyle, title: "Zoom in timeline", role: 'button', type: "button", disabled: timeline_zoom_1.TIMELINE_MAX_ZOOM === zoom, children: (0, jsx_runtime_1.jsx)(plus_1.Plus, { color: "currentcolor", style: iconStyle }) })] }));
+    return (jsx_runtime_1.jsxs("div", { style: container, children: [
+            jsx_runtime_1.jsx(ControlButton_1.ControlButton, { onClick: onMinusClicked, style: buttonStyle, title: "Zoom out timeline", role: 'ControlButton', type: "button", disabled: timeline_zoom_1.TIMELINE_MIN_ZOOM === zoom, children: jsx_runtime_1.jsx(minus_1.Minus, { style: iconStyle }) }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.5 }), jsx_runtime_1.jsx("input", { title: `Timeline zoom (${zoom}x)`, alt: `Timeline zoom (${zoom}x)`, type: 'range', min: timeline_zoom_1.TIMELINE_MIN_ZOOM, step: 0.1, value: zoom, max: timeline_zoom_1.TIMELINE_MAX_ZOOM, onChange: onChange, className: "__remotion-timeline-slider", tabIndex: tabIndex }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.5 }), jsx_runtime_1.jsx(ControlButton_1.ControlButton, { onClick: onPlusClicked, style: buttonStyle, title: "Zoom in timeline", role: 'button', type: "button", disabled: timeline_zoom_1.TIMELINE_MAX_ZOOM === zoom, children: jsx_runtime_1.jsx(plus_1.Plus, { color: "currentcolor", style: iconStyle }) })
+        ] }));
 };
 exports.TimelineZoomControls = TimelineZoomControls;

package/dist/components/Timeline/timeline-scroll-logic.d.ts

@@ -11,7 +11,7 @@ export declare const isCursorInViewport: ({ frame, durationInFrames, }: {
     durationInFrames: number;
 }) => boolean;
 export declare const ensureFrameIsInViewport: ({ direction, durationInFrames, frame, }: {
-    direction: "fit-left" | "fit-right" | "page-right" | "page-left" | "center";
+    direction: "center" | "fit-left" | "fit-right" | "page-left" | "page-right";
     durationInFrames: number;
     frame: number;
 }) => void;

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

@@ -44,9 +44,10 @@ const getFrameWhileScrollingLeft = ({ durationInFrames, width, }) => {
 };
 exports.getFrameWhileScrollingLeft = getFrameWhileScrollingLeft;
 const isCursorInViewport = ({ frame, durationInFrames, }) => {
-    var _a, _b, _c, _d;
-    const width = (_b = (_a = timeline_refs_1.scrollableRef.current) === null || _a === void 0 ? void 0 : _a.scrollWidth) !== null && _b !== void 0 ? _b : 0;
-    const scrollLeft = (_d = (_c = timeline_refs_1.scrollableRef.current) === null || _c === void 0 ? void 0 : _c.scrollLeft) !== null && _d !== void 0 ? _d : 0;
+    var _a, _b;
+    var _c, _d;
+    const width = (_c = (_a = timeline_refs_1.scrollableRef.current) === null || _a === void 0 ? void 0 : _a.scrollWidth) !== null && _c !== void 0 ? _c : 0;
+    const scrollLeft = (_d = (_b = timeline_refs_1.scrollableRef.current) === null || _b === void 0 ? void 0 : _b.scrollLeft) !== null && _d !== void 0 ? _d : 0;
     const scrollPosOnRightEdge = (0, exports.getScrollPositionForCursorOnRightEdge)({
         nextFrame: frame,
         durationInFrames,
@@ -68,10 +69,11 @@ const isCursorInViewport = ({ frame, durationInFrames, }) => {
 };
 exports.isCursorInViewport = isCursorInViewport;
 const ensureFrameIsInViewport = ({ direction, durationInFrames, frame, }) => {
-    var _a, _b, _c, _d, _e;
+    var _a, _b, _c;
+    var _d, _e;
     (_a = TimelineSlider_1.redrawTimelineSliderFast.current) === null || _a === void 0 ? void 0 : _a.draw(frame);
-    const width = (_c = (_b = timeline_refs_1.scrollableRef.current) === null || _b === void 0 ? void 0 : _b.scrollWidth) !== null && _c !== void 0 ? _c : 0;
-    const scrollLeft = (_e = (_d = timeline_refs_1.scrollableRef.current) === null || _d === void 0 ? void 0 : _d.scrollLeft) !== null && _e !== void 0 ? _e : 0;
+    const width = (_d = (_b = timeline_refs_1.scrollableRef.current) === null || _b === void 0 ? void 0 : _b.scrollWidth) !== null && _d !== void 0 ? _d : 0;
+    const scrollLeft = (_e = (_c = timeline_refs_1.scrollableRef.current) === null || _c === void 0 ? void 0 : _c.scrollLeft) !== null && _e !== void 0 ? _e : 0;
     if (direction === 'fit-left') {
         const currentFrameLeft = (0, exports.getFrameFromX)({
             clientX: scrollLeft,
@@ -164,7 +166,8 @@ const getScrollPositionForCursorOnRightEdge = ({ nextFrame, durationInFrames, })
 };
 exports.getScrollPositionForCursorOnRightEdge = getScrollPositionForCursorOnRightEdge;
 const getFrameIncrement = (durationInFrames) => {
-    var _a, _b;
+    var _a;
+    var _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 (0, exports.getFrameIncrementFromWidth)(durationInFrames, width);
 };
@@ -198,7 +201,8 @@ const getFrameFromX = ({ clientX, durationInFrames, width, extrapolate, }) => {
 };
 exports.getFrameFromX = getFrameFromX;
 const zoomAndPreserveCursor = ({ oldZoom, newZoom, currentFrame, currentDurationInFrames, }) => {
-    var _a, _b, _c;
+    var _a, _b;
+    var _c;
     const ratio = newZoom / oldZoom;
     if (ratio === 1) {
         return;

package/dist/components/TimelineInOutToggle.js

@@ -59,7 +59,8 @@ const TimelineInOutPointToggle = () => {
             return null;
         }
         setInAndOutFrames((prev) => {
-            var _a, _b, _c, _d, _e;
+            var _a, _b;
+            var _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(getCurrentFrame(), biggestPossible);
@@ -67,12 +68,12 @@ const TimelineInOutPointToggle = () => {
                 return {
                     ...prev,
                     [videoConfig.id]: {
-                        ...((_b = prev[videoConfig.id]) !== null && _b !== void 0 ? _b : exports.defaultInOutValue),
+                        ...((_c = prev[videoConfig.id]) !== null && _c !== void 0 ? _c : exports.defaultInOutValue),
                         inFrame: null,
                     },
                 };
             }
-            const prevIn = (_c = prev[videoConfig.id]) === null || _c === void 0 ? void 0 : _c.inFrame;
+            const prevIn = (_b = prev[videoConfig.id]) === null || _b === void 0 ? void 0 : _b.inFrame;
             if (prevIn !== null && prevIn !== undefined) {
                 // Disable if already at this position
                 if (prevIn === selected) {
@@ -144,7 +145,8 @@ const TimelineInOutPointToggle = () => {
             return;
         }
         setInAndOutFrames((prev) => {
-            var _a, _b, _c, _d, _e;
+            var _a, _b;
+            var _c, _d, _e;
             const prevInFrame = (_a = prev[videoConfig.id]) === null || _a === void 0 ? void 0 : _a.inFrame;
             const smallestPossible = prevInFrame === null || prevInFrame === undefined
                 ? -Infinity
@@ -154,12 +156,12 @@ const TimelineInOutPointToggle = () => {
                 return {
                     ...prev,
                     [videoConfig.id]: {
-                        ...((_b = prev[videoConfig.id]) !== null && _b !== void 0 ? _b : exports.defaultInOutValue),
+                        ...((_c = prev[videoConfig.id]) !== null && _c !== void 0 ? _c : exports.defaultInOutValue),
                         outFrame: null,
                     },
                 };
             }
-            const prevOut = (_c = prev[videoConfig.id]) === null || _c === void 0 ? void 0 : _c.outFrame;
+            const prevOut = (_b = prev[videoConfig.id]) === null || _b === void 0 ? void 0 : _b.outFrame;
             if (prevOut !== null && prevOut !== undefined) {
                 if (prevOut === selected) {
                     return {
@@ -236,6 +238,8 @@ const TimelineInOutPointToggle = () => {
             outMarkClick: onOutMark,
         };
     }, [confId, onInMark, onInOutClear, onOutMark]);
-    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, onContextMenu: clearInMark, disabled: !videoConfig || isFirstFrame, 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 || isLastFrame, children: (0, jsx_runtime_1.jsx)(timelineInOutPointer_1.TimelineOutPointer, { color: outFrame === null ? 'white' : colors_1.BLUE, style: style }) })] }));
+    return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
+            jsx_runtime_1.jsx(ControlButton_1.ControlButton, { title: getTooltipText('In', 'I'), "aria-label": getTooltipText('In', 'I'), onClick: onInMark, onContextMenu: clearInMark, disabled: !videoConfig || isFirstFrame, children: jsx_runtime_1.jsx(timelineInOutPointer_1.TimelineInPointer, { color: inFrame === null ? 'white' : colors_1.BLUE, style: style }) }), jsx_runtime_1.jsx(ControlButton_1.ControlButton, { title: getTooltipText('Out', 'O'), "aria-label": getTooltipText('Out', 'O'), onClick: onOutMark, onContextMenu: clearOutMark, disabled: !videoConfig || isLastFrame, children: jsx_runtime_1.jsx(timelineInOutPointer_1.TimelineOutPointer, { color: outFrame === null ? 'white' : colors_1.BLUE, style: style }) })
+        ] }));
 };
 exports.TimelineInOutPointToggle = TimelineInOutPointToggle;

package/dist/components/TopPanel.js

@@ -74,6 +74,10 @@ const TopPanel = ({ readOnlyStudio, onMounted, drawRef, bufferStateDelayInMillis
         setSidebarCollapsedState({ left: null, right: 'collapsed' });
     }, [setSidebarCollapsedState]);
     const isMobileLayout = (0, mobile_layout_1.useMobileLayout)();
-    return ((0, jsx_runtime_1.jsxs)("div", { style: container, children: [(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' ? (isMobileLayout ? ((0, jsx_runtime_1.jsx)(MobilePanel_1.default, { onClose: onCollapseLeft, children: (0, jsx_runtime_1.jsx)(ExplorerPanel_1.ExplorerPanel, { readOnlyStudio: readOnlyStudio }) })) : ((0, jsx_runtime_1.jsx)(SplitterElement_1.SplitterElement, { sticky: null, type: "flexer", children: (0, jsx_runtime_1.jsx)(ExplorerPanel_1.ExplorerPanel, { readOnlyStudio: readOnlyStudio }) }))) : null, actualStateLeft === 'expanded' ? ((0, jsx_runtime_1.jsx)(SplitterHandle_1.SplitterHandle, { allowToCollapse: "left", onCollapse: onCollapseLeft })) : null, (0, jsx_runtime_1.jsx)(SplitterElement_1.SplitterElement, { sticky: null, 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, { sticky: null, type: "flexer", children: (0, jsx_runtime_1.jsx)("div", { ref: drawRef, style: canvasContainerStyle, children: (0, jsx_runtime_1.jsx)(CanvasIfSizeIsAvailable_1.CanvasIfSizeIsAvailable, {}) }) }), actualStateRight === 'expanded' ? ((0, jsx_runtime_1.jsx)(SplitterHandle_1.SplitterHandle, { allowToCollapse: "right", onCollapse: onCollapseRight })) : null, actualStateRight === 'expanded' ? (isMobileLayout ? ((0, jsx_runtime_1.jsx)(MobilePanel_1.default, { onClose: onCollapseRight, children: (0, jsx_runtime_1.jsx)(OptionsPanel_1.OptionsPanel, { readOnlyStudio: readOnlyStudio }) })) : ((0, jsx_runtime_1.jsx)(SplitterElement_1.SplitterElement, { sticky: null, type: "anti-flexer", children: (0, jsx_runtime_1.jsx)(OptionsPanel_1.OptionsPanel, { readOnlyStudio: readOnlyStudio }) }))) : null] }) })] }) }), (0, jsx_runtime_1.jsx)(PreviewToolbar_1.PreviewToolbar, { bufferStateDelayInMilliseconds: bufferStateDelayInMilliseconds, readOnlyStudio: readOnlyStudio }), (0, jsx_runtime_1.jsx)(CurrentCompositionSideEffects_1.CurrentCompositionKeybindings, { readOnlyStudio: readOnlyStudio }), (0, jsx_runtime_1.jsx)(CurrentCompositionSideEffects_1.TitleUpdater, {})] }));
+    return (jsx_runtime_1.jsxs("div", { style: container, children: [
+            jsx_runtime_1.jsx("div", { style: row, children: 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' ? (isMobileLayout ? (jsx_runtime_1.jsx(MobilePanel_1.default, { onClose: onCollapseLeft, children: jsx_runtime_1.jsx(ExplorerPanel_1.ExplorerPanel, { readOnlyStudio: readOnlyStudio }) })) : (jsx_runtime_1.jsx(SplitterElement_1.SplitterElement, { sticky: null, type: "flexer", children: jsx_runtime_1.jsx(ExplorerPanel_1.ExplorerPanel, { readOnlyStudio: readOnlyStudio }) }))) : null, actualStateLeft === 'expanded' ? (jsx_runtime_1.jsx(SplitterHandle_1.SplitterHandle, { allowToCollapse: "left", onCollapse: onCollapseLeft })) : null, jsx_runtime_1.jsx(SplitterElement_1.SplitterElement, { sticky: null, type: "anti-flexer", children: jsx_runtime_1.jsxs(SplitterContainer_1.SplitterContainer, { minFlex: 0.5, maxFlex: 0.8, defaultFlex: 0.7, id: "canvas-to-right-sidebar", orientation: "vertical", children: [
+                                    jsx_runtime_1.jsx(SplitterElement_1.SplitterElement, { sticky: null, type: "flexer", children: jsx_runtime_1.jsx("div", { ref: drawRef, style: canvasContainerStyle, children: jsx_runtime_1.jsx(CanvasIfSizeIsAvailable_1.CanvasIfSizeIsAvailable, {}) }) }), actualStateRight === 'expanded' ? (jsx_runtime_1.jsx(SplitterHandle_1.SplitterHandle, { allowToCollapse: "right", onCollapse: onCollapseRight })) : null, actualStateRight === 'expanded' ? (isMobileLayout ? (jsx_runtime_1.jsx(MobilePanel_1.default, { onClose: onCollapseRight, children: jsx_runtime_1.jsx(OptionsPanel_1.OptionsPanel, { readOnlyStudio: readOnlyStudio }) })) : (jsx_runtime_1.jsx(SplitterElement_1.SplitterElement, { sticky: null, type: "anti-flexer", children: jsx_runtime_1.jsx(OptionsPanel_1.OptionsPanel, { readOnlyStudio: readOnlyStudio }) }))) : null] }) })
+                    ] }) }), jsx_runtime_1.jsx(PreviewToolbar_1.PreviewToolbar, { bufferStateDelayInMilliseconds: bufferStateDelayInMilliseconds, readOnlyStudio: readOnlyStudio }), jsx_runtime_1.jsx(CurrentCompositionSideEffects_1.CurrentCompositionKeybindings, { readOnlyStudio: readOnlyStudio }), jsx_runtime_1.jsx(CurrentCompositionSideEffects_1.TitleUpdater, {})
+        ] }));
 };
 exports.TopPanel = TopPanel;

package/dist/components/UpdateCheck.js

@@ -87,9 +87,9 @@ const UpdateCheck = () => {
     if (!info.updateAvailable) {
         return null;
     }
-    return ((0, jsx_runtime_1.jsx)("button", { tabIndex: tabIndex, style: dynButtonStyle, onClick: openModal, type: "button", title: hasKnownBugs ? 'Bugfixes available' : 'Update available', children: hasKnownBugs ? ('Bugfixes available') : ((0, jsx_runtime_1.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", style: {
+    return (jsx_runtime_1.jsx("button", { tabIndex: tabIndex, style: dynButtonStyle, onClick: openModal, type: "button", title: hasKnownBugs ? 'Bugfixes available' : 'Update available', children: hasKnownBugs ? ('Bugfixes available') : (jsx_runtime_1.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", style: {
                 height: 16,
                 width: 16,
-            }, viewBox: "0 0 512 512", children: (0, jsx_runtime_1.jsx)("path", { fill: "currentcolor", d: "M256 48a208 208 0 1 1 0 416 208 208 0 1 1 0-416zm0 464A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM135.1 217.4c-4.5 4.2-7.1 10.1-7.1 16.3c0 12.3 10 22.3 22.3 22.3H208v96c0 17.7 14.3 32 32 32h32c17.7 0 32-14.3 32-32V256h57.7c12.3 0 22.3-10 22.3-22.3c0-6.2-2.6-12.1-7.1-16.3L269.8 117.5c-3.8-3.5-8.7-5.5-13.8-5.5s-10.1 2-13.8 5.5L135.1 217.4z" }) })) }));
+            }, viewBox: "0 0 512 512", children: jsx_runtime_1.jsx("path", { fill: "currentcolor", d: "M256 48a208 208 0 1 1 0 416 208 208 0 1 1 0-416zm0 464A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM135.1 217.4c-4.5 4.2-7.1 10.1-7.1 16.3c0 12.3 10 22.3 22.3 22.3H208v96c0 17.7 14.3 32 32 32h32c17.7 0 32-14.3 32-32V256h57.7c12.3 0 22.3-10 22.3-22.3c0-6.2-2.6-12.1-7.1-16.3L269.8 117.5c-3.8-3.5-8.7-5.5-13.8-5.5s-10.1 2-13.8 5.5L135.1 217.4z" }) })) }));
 };
 exports.UpdateCheck = UpdateCheck;

package/dist/components/UpdateModal/OpenIssueButton.js

@@ -25,13 +25,13 @@ const OpenIssueButton = ({ link }) => {
     const svgFillColor = (0, react_1.useMemo)(() => {
         return hovered ? 'white' : colors_1.LIGHT_TEXT;
     }, [hovered]);
-    const openInEditorSvg = ((0, jsx_runtime_1.jsx)("svg", { viewBox: "0 0 512 512", style: svgStyle, children: (0, jsx_runtime_1.jsx)("path", { fill: svgFillColor, d: "M320 0c-17.7 0-32 14.3-32 32s14.3 32 32 32h82.7L201.4 265.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L448 109.3V192c0 17.7 14.3 32 32 32s32-14.3 32-32V32c0-17.7-14.3-32-32-32H320zM80 32C35.8 32 0 67.8 0 112V432c0 44.2 35.8 80 80 80H400c44.2 0 80-35.8 80-80V320c0-17.7-14.3-32-32-32s-32 14.3-32 32V432c0 8.8-7.2 16-16 16H80c-8.8 0-16-7.2-16-16V112c0-8.8 7.2-16 16-16H192c17.7 0 32-14.3 32-32s-14.3-32-32-32H80z" }) }));
+    const openInEditorSvg = (jsx_runtime_1.jsx("svg", { viewBox: "0 0 512 512", style: svgStyle, children: jsx_runtime_1.jsx("path", { fill: svgFillColor, d: "M320 0c-17.7 0-32 14.3-32 32s14.3 32 32 32h82.7L201.4 265.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L448 109.3V192c0 17.7 14.3 32 32 32s32-14.3 32-32V32c0-17.7-14.3-32-32-32H320zM80 32C35.8 32 0 67.8 0 112V432c0 44.2 35.8 80 80 80H400c44.2 0 80-35.8 80-80V320c0-17.7-14.3-32-32-32s-32 14.3-32 32V432c0 8.8-7.2 16-16 16H80c-8.8 0-16-7.2-16-16V112c0-8.8 7.2-16 16-16H192c17.7 0 32-14.3 32-32s-14.3-32-32-32H80z" }) }));
     const onPointerEnter = (0, react_1.useCallback)(() => {
         setHovered(true);
     }, []);
     const onPointerLeave = (0, react_1.useCallback)(() => {
         setHovered(false);
     }, []);
-    return ((0, jsx_runtime_1.jsx)("button", { title: buttonTooltip, type: "button", onPointerEnter: onPointerEnter, onPointerLeave: onPointerLeave, style: buttonStyle, onClick: handleClick, children: openInEditorSvg }));
+    return (jsx_runtime_1.jsx("button", { title: buttonTooltip, type: "button", onPointerEnter: onPointerEnter, onPointerLeave: onPointerLeave, style: buttonStyle, onClick: handleClick, children: openInEditorSvg }));
 };
 exports.OpenIssueButton = OpenIssueButton;

package/dist/components/UpdateModal/UpdateModal.js

@@ -53,6 +53,13 @@ const UpdateModal = ({ info, knownBugs }) => {
             (0, NotificationCenter_1.showNotification)(`Could not copy: ${err.message}`, 2000);
         });
     }, [command]);
-    return ((0, jsx_runtime_1.jsxs)(DismissableModal_1.DismissableModal, { children: [(0, jsx_runtime_1.jsx)(ModalHeader_1.ModalHeader, { title: "Update available" }), (0, jsx_runtime_1.jsxs)("div", { style: container, children: [hasKnownBugs ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { style: title, children: ["The currently installed version ", info.currentVersion, " has the following known bugs:"] }), (0, jsx_runtime_1.jsx)(KnownBugs_1.KnownBugs, { bugs: knownBugs }), (0, jsx_runtime_1.jsx)("div", { style: { height: '20px' } }), (0, jsx_runtime_1.jsx)("div", { style: text, children: "To upgrade, run the following command:" })] })) : ((0, jsx_runtime_1.jsx)("div", { style: title, children: "A new update for Remotion is available! Run the following command:" })), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)(layout_1.Flex, { children: (0, jsx_runtime_1.jsx)("pre", { onClick: onClick, style: code, children: command }) }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 1 }), (0, jsx_runtime_1.jsx)(CopyButton_1.CopyButton, { textToCopy: command, label: "Copy", labelWhenCopied: "Copied!" })] }), (0, jsx_runtime_1.jsxs)("div", { style: text, children: ["This will upgrade Remotion from ", info.currentVersion, " to", ' ', info.latestVersion, "."] }), (0, jsx_runtime_1.jsxs)("div", { style: text, children: ["Read the", ' ', (0, jsx_runtime_1.jsx)("a", { style: link, target: "_blank", href: "https://github.com/remotion-dev/remotion/releases", children: "Release notes" }), ' ', "to know what", "'s", " new in Remotion."] })] })] }));
+    return (jsx_runtime_1.jsxs(DismissableModal_1.DismissableModal, { children: [
+            jsx_runtime_1.jsx(ModalHeader_1.ModalHeader, { title: "Update available" }), jsx_runtime_1.jsxs("div", { style: container, children: [hasKnownBugs ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
+                            jsx_runtime_1.jsxs("div", { style: title, children: ["The currently installed version ", info.currentVersion, " has the following known bugs:"] }), jsx_runtime_1.jsx(KnownBugs_1.KnownBugs, { bugs: knownBugs }), jsx_runtime_1.jsx("div", { style: { height: '20px' } }), jsx_runtime_1.jsx("div", { style: text, children: "To upgrade, run the following command:" })
+                        ] })) : (jsx_runtime_1.jsx("div", { style: title, children: "A new update for Remotion is available! Run the following command:" })), jsx_runtime_1.jsxs(layout_1.Row, { align: "center", children: [
+                            jsx_runtime_1.jsx(layout_1.Flex, { children: jsx_runtime_1.jsx("pre", { onClick: onClick, style: code, children: command }) }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 1 }), jsx_runtime_1.jsx(CopyButton_1.CopyButton, { textToCopy: command, label: "Copy", labelWhenCopied: "Copied!" })
+                        ] }), jsx_runtime_1.jsxs("div", { style: text, children: ["This will upgrade Remotion from ", info.currentVersion, " to", ' ', info.latestVersion, "."] }), jsx_runtime_1.jsxs("div", { style: text, children: ["Read the", ' ', jsx_runtime_1.jsx("a", { style: link, target: "_blank", href: "https://github.com/remotion-dev/remotion/releases", children: "Release notes" }), ' ', "to know what", "'s", " new in Remotion."] })
+                ] })
+        ] }));
 };
 exports.UpdateModal = UpdateModal;

package/dist/components/VisualControls/ClickableFileName.js

@@ -34,7 +34,7 @@ const ClickableFileName = ({ originalFileName, }) => {
         }
         await (0, open_in_editor_1.openOriginalPositionInEditor)(originalFileName.originalFileName);
     }, [originalFileName]);
-    return ((0, jsx_runtime_1.jsx)("div", { style: container, children: (0, jsx_runtime_1.jsx)("span", { style: style, onClick: onClick, onPointerEnter: onTitlePointerEnter, onPointerLeave: onTitlePointerLeave, children: originalFileName.type === 'loaded'
+    return (jsx_runtime_1.jsx("div", { style: container, children: jsx_runtime_1.jsx("span", { style: style, onClick: onClick, onPointerEnter: onTitlePointerEnter, onPointerLeave: onTitlePointerLeave, children: originalFileName.type === 'loaded'
                 ? (0, source_attribution_1.getOriginalSourceAttribution)(originalFileName.originalFileName)
                 : originalFileName.type === 'loading'
                     ? 'Loading...'

package/dist/components/VisualControls/VisualControlHandle.js

@@ -90,6 +90,8 @@ const VisualControlHandle = ({ value, keyName }) => {
     (0, react_1.useEffect)(() => {
         setSaving(false);
     }, [fastRefreshes]);
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(VisualControlHandleHeader_1.VisualControlHandleHeader, { originalFileName: originalFileName }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { block: true, y: 0.5 }), (0, jsx_runtime_1.jsx)(RevisionContextProvider, { children: (0, jsx_runtime_1.jsx)(ZodSwitch_1.ZodSwitch, { mayPad: true, schema: value.schema, showSaveButton: !disableSave, saving: saving, saveDisabledByParent: false, onSave: onSave, jsonPath: [keyName], value: localValue.value, defaultValue: value.valueInCode, setValue: onChange, onRemove: null }) })] }));
+    return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
+            jsx_runtime_1.jsx(VisualControlHandleHeader_1.VisualControlHandleHeader, { originalFileName: originalFileName }), jsx_runtime_1.jsx(layout_1.Spacing, { block: true, y: 0.5 }), jsx_runtime_1.jsx(RevisionContextProvider, { children: jsx_runtime_1.jsx(ZodSwitch_1.ZodSwitch, { mayPad: true, schema: value.schema, showSaveButton: !disableSave, saving: saving, saveDisabledByParent: false, onSave: onSave, jsonPath: [keyName], value: localValue.value, defaultValue: value.valueInCode, setValue: onChange, onRemove: null }) })
+        ] }));
 };
 exports.VisualControlHandle = VisualControlHandle;

package/dist/components/VisualControls/VisualControlHandleHeader.js

@@ -4,6 +4,6 @@ exports.VisualControlHandleHeader = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const ClickableFileName_1 = require("./ClickableFileName");
 const VisualControlHandleHeader = ({ originalFileName }) => {
-    return (0, jsx_runtime_1.jsx)(ClickableFileName_1.ClickableFileName, { originalFileName: originalFileName });
+    return jsx_runtime_1.jsx(ClickableFileName_1.ClickableFileName, { originalFileName: originalFileName });
 };
 exports.VisualControlHandleHeader = VisualControlHandleHeader;

package/dist/components/VisualControls/VisualControlsContent.js

@@ -46,8 +46,9 @@ const container = {
 const VisualControlsContent = () => {
     const { handles } = (0, react_1.useContext)(VisualControls_1.VisualControlsContext);
     const entries = Object.entries(handles);
-    return ((0, jsx_runtime_1.jsx)("div", { style: container, className: is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME, children: entries.map(([key, value], i) => {
-            return ((0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [(0, jsx_runtime_1.jsx)(VisualControlHandle_1.VisualControlHandle, { keyName: key, value: value }), i === entries.length - 1 ? null : (0, jsx_runtime_1.jsx)(SchemaSeparationLine_1.SchemaSeparationLine, {})] }, key));
+    return (jsx_runtime_1.jsx("div", { style: container, className: is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME, children: entries.map(([key, value], i) => {
+            return (jsx_runtime_1.jsxs(react_1.default.Fragment, { children: [
+                    jsx_runtime_1.jsx(VisualControlHandle_1.VisualControlHandle, { keyName: key, value: value }), i === entries.length - 1 ? null : jsx_runtime_1.jsx(SchemaSeparationLine_1.SchemaSeparationLine, {})] }, key));
         }) }));
 };
 exports.VisualControlsContent = VisualControlsContent;

package/dist/components/ZoomGesturesProvider.js

@@ -19,6 +19,6 @@ const ZoomGesturesProvider = ({ children }) => {
             setEditorZoomGestures,
         };
     }, [editorZoomGestures, setEditorZoomGestures]);
-    return ((0, jsx_runtime_1.jsx)(editor_zoom_gestures_1.EditorZoomGesturesContext.Provider, { value: editorZoomGesturesCtx, children: children }));
+    return (jsx_runtime_1.jsx(editor_zoom_gestures_1.EditorZoomGesturesContext.Provider, { value: editorZoomGesturesCtx, children: children }));
 };
 exports.ZoomGesturesProvider = ZoomGesturesProvider;

package/dist/components/call-api.d.ts

@@ -1,2 +1,2 @@
 import type { ApiRoutes } from '@remotion/studio-shared';
-export declare const callApi: <Endpoint extends keyof ApiRoutes>(endpoint: Endpoint, body: ApiRoutes[Endpoint]["Request"], signal?: AbortSignal) => Promise<ApiRoutes[Endpoint]["Response"]>;
+export declare const callApi: <Endpoint extends keyof ApiRoutes>(endpoint: Endpoint, body: ApiRoutes[Endpoint]["Request"], signal?: AbortSignal | undefined) => Promise<ApiRoutes[Endpoint]["Response"]>;

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

@@ -1,9 +1,9 @@
 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 function getZodIfPossible(): Promise<ZodType | null>;
+export declare const getZTypesIfPossible: () => Promise<typeof import("@remotion/zod-types") | null>;
+export declare function useZodIfPossible(): ZodType | null;
 export declare const useZodTypesIfPossible: () => typeof import("@remotion/zod-types") | null;
 export declare const ZodProvider: React.FC<{
     readonly children: React.ReactNode;

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

@@ -33,10 +33,12 @@ var __importStar = (this && this.__importStar) || (function () {
     };
 })();
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ZodProvider = exports.useZodTypesIfPossible = exports.useZodIfPossible = exports.getZTypesIfPossible = exports.getZodIfPossible = void 0;
+exports.ZodProvider = exports.useZodTypesIfPossible = exports.getZTypesIfPossible = void 0;
+exports.getZodIfPossible = getZodIfPossible;
+exports.useZodIfPossible = useZodIfPossible;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
-const getZodIfPossible = async () => {
+async function getZodIfPossible() {
     try {
         const { z } = await Promise.resolve().then(() => __importStar(require('zod')));
         return z;
@@ -44,8 +46,7 @@ const getZodIfPossible = async () => {
     catch (_a) {
         return null;
     }
-};
-exports.getZodIfPossible = getZodIfPossible;
+}
 const getZTypesIfPossible = async () => {
     try {
         const mod = await Promise.resolve().then(() => __importStar(require('@remotion/zod-types')));
@@ -56,12 +57,11 @@ const getZTypesIfPossible = async () => {
     }
 };
 exports.getZTypesIfPossible = getZTypesIfPossible;
-const useZodIfPossible = () => {
+function 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);
@@ -73,7 +73,7 @@ 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));
+        getZodIfPossible().then((z) => setZod(z));
     }, []);
     (0, react_1.useEffect)(() => {
         (0, exports.getZTypesIfPossible)().then((z) => setZodTypes(z));
@@ -84,6 +84,6 @@ const ZodProvider = ({ children }) => {
             zodTypes,
         };
     }, [zod, zodTypes]);
-    return ((0, jsx_runtime_1.jsx)(ZodContext.Provider, { value: contextValue, children: children }));
+    return (jsx_runtime_1.jsx(ZodContext.Provider, { value: contextValue, children: children }));
 };
 exports.ZodProvider = ZodProvider;