@remotion/studio 4.0.100 → 4.0.102

package/.turbo/turbo-build.log

@@ -1,4 +1,4 @@
 
-> @remotion/studio@4.0.99 build /Users/jonathanburger/remotion/packages/studio
+> @remotion/studio@4.0.101 build /Users/jonathanburger/remotion/packages/studio
 > tsc -d
 

package/dist/components/Canvas.d.ts

@@ -1,5 +1,7 @@
+import type { Size } from '@remotion/player';
 import React from 'react';
 import type { CanvasContent } from 'remotion';
 export declare const Canvas: React.FC<{
     canvasContent: CanvasContent;
+    size: Size;
 }>;

package/dist/components/Canvas.js

@@ -36,7 +36,7 @@ const resetZoom = {
     right: layout_1.SPACING_UNIT * 2,
 };
 const ZOOM_PX_FACTOR = 0.003;
-const Canvas = ({ canvasContent }) => {
+const Canvas = ({ canvasContent, size }) => {
     const { setSize, size: previewSize } = (0, react_1.useContext)(preview_size_1.PreviewSizeContext);
     const { editorZoomGestures } = (0, react_1.useContext)(editor_zoom_gestures_1.EditorZoomGesturesContext);
     const keybindings = (0, use_keybinding_1.useKeybinding)();
@@ -55,10 +55,6 @@ const Canvas = ({ canvasContent }) => {
         }
         return null;
     }, [assetResolution, config, canvasContent]);
-    const size = player_1.PlayerInternals.useElementSize(canvas_ref_1.canvasRef, {
-        triggerOnWindowResize: false,
-        shouldApplyCssTransforms: true,
-    });
     const isFit = previewSize.size === 'auto';
     const onWheel = (0, react_1.useCallback)((e) => {
         if (!editorZoomGestures) {

package/dist/components/CanvasOrLoading.d.ts

@@ -1,2 +1,5 @@
+import type { Size } from '@remotion/player';
 import React from 'react';
-export declare const CanvasOrLoading: React.FC;
+export declare const CanvasOrLoading: React.FC<{
+    size: Size;
+}>;

package/dist/components/CanvasOrLoading.js

@@ -24,7 +24,7 @@ const container = {
     backgroundColor: colors_1.BACKGROUND,
     flexDirection: 'column',
 };
-const CanvasOrLoading = () => {
+const CanvasOrLoading = ({ size }) => {
     const resolved = remotion_1.Internals.useResolvedVideoConfig(null);
     const [takesALongTime, setTakesALongTime] = (0, react_1.useState)(false);
     const { setZoom } = (0, react_1.useContext)(timeline_zoom_1.TimelineZoomCtx);
@@ -60,7 +60,7 @@ const CanvasOrLoading = () => {
     if (!canvasContent) {
         return null;
     }
-    const content = ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(ZoomPersistor_1.ZoomPersistor, {}), (0, jsx_runtime_1.jsx)(Canvas_1.Canvas, { canvasContent: canvasContent })] }));
+    const content = ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(ZoomPersistor_1.ZoomPersistor, {}), (0, jsx_runtime_1.jsx)(Canvas_1.Canvas, { size: size, canvasContent: canvasContent })] }));
     if (canvasContent.type === 'asset' || canvasContent.type === 'output') {
         return content;
     }

package/dist/components/Editor.js

@@ -1,8 +1,31 @@
 "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.Editor = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
+const react_1 = __importStar(require("react"));
 const remotion_1 = require("remotion");
 const colors_1 = require("../helpers/colors");
 const noop_1 = require("../helpers/noop");
@@ -35,6 +58,10 @@ const Editor = ({ Root, readOnlyStudio, }) => {
             window.removeEventListener('beforeunload', listenToChanges);
         };
     }, [readOnlyStudio]);
-    return ((0, jsx_runtime_1.jsx)(z_index_1.HigherZIndex, { onEscape: noop_1.noop, onOutsideClick: noop_1.noop, children: (0, jsx_runtime_1.jsxs)(timeline_zoom_1.TimelineZoomContext, { children: [(0, jsx_runtime_1.jsxs)("div", { style: background, children: [(0, jsx_runtime_1.jsx)(Root, {}), (0, jsx_runtime_1.jsxs)(remotion_1.Internals.CanUseRemotionHooksProvider, { children: [(0, jsx_runtime_1.jsx)(EditorContent_1.EditorContent, { readOnlyStudio: readOnlyStudio }), (0, jsx_runtime_1.jsx)(GlobalKeybindings_1.GlobalKeybindings, {})] }), (0, jsx_runtime_1.jsx)(NotificationCenter_1.NotificationCenter, {})] }), (0, jsx_runtime_1.jsx)(Modals_1.Modals, { readOnlyStudio: readOnlyStudio })] }) }));
+    const [canvasMounted, setCanvasMounted] = react_1.default.useState(false);
+    const onMounted = (0, react_1.useCallback)(() => {
+        setCanvasMounted(true);
+    }, []);
+    return ((0, jsx_runtime_1.jsx)(z_index_1.HigherZIndex, { onEscape: noop_1.noop, onOutsideClick: noop_1.noop, children: (0, jsx_runtime_1.jsxs)(timeline_zoom_1.TimelineZoomContext, { children: [(0, jsx_runtime_1.jsxs)("div", { style: background, children: [canvasMounted ? (0, jsx_runtime_1.jsx)(Root, {}) : null, (0, jsx_runtime_1.jsxs)(remotion_1.Internals.CanUseRemotionHooksProvider, { children: [(0, jsx_runtime_1.jsx)(EditorContent_1.EditorContent, { onMounted: onMounted, readOnlyStudio: readOnlyStudio }), (0, jsx_runtime_1.jsx)(GlobalKeybindings_1.GlobalKeybindings, {})] }), (0, jsx_runtime_1.jsx)(NotificationCenter_1.NotificationCenter, {})] }), (0, jsx_runtime_1.jsx)(Modals_1.Modals, { readOnlyStudio: readOnlyStudio })] }) }));
 };
 exports.Editor = Editor;

package/dist/components/EditorContent.d.ts

@@ -1,4 +1,5 @@
 import React from 'react';
 export declare const EditorContent: React.FC<{
     readOnlyStudio: boolean;
+    onMounted: () => void;
 }>;

package/dist/components/EditorContent.js

@@ -19,11 +19,11 @@ const container = {
     flex: 1,
     height: 0,
 };
-const EditorContent = ({ readOnlyStudio }) => {
+const EditorContent = ({ readOnlyStudio, onMounted }) => {
     const isStill = (0, is_current_selected_still_1.useIsStill)();
     const { canvasContent } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
     // Preventing multiple renders so the update check doesn't get rendered twice and needs to be aborted
     const onlyTopPanel = canvasContent === null || isStill || canvasContent.type !== 'composition';
-    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, { readOnlyStudio: readOnlyStudio }), onlyTopPanel ? ((0, jsx_runtime_1.jsx)(TopPanel_1.TopPanel, { readOnlyStudio: readOnlyStudio })) : ((0, jsx_runtime_1.jsxs)(SplitterContainer_1.SplitterContainer, { orientation: "horizontal", id: "top-to-bottom", maxFlex: 0.9, minFlex: 0.2, defaultFlex: 0.75, children: [(0, jsx_runtime_1.jsx)(SplitterElement_1.SplitterElement, { sticky: null, type: "flexer", children: (0, jsx_runtime_1.jsx)(TopPanel_1.TopPanel, { readOnlyStudio: readOnlyStudio }) }), (0, jsx_runtime_1.jsx)(SplitterHandle_1.SplitterHandle, { allowToCollapse: "none", onCollapse: noop }), (0, jsx_runtime_1.jsx)(SplitterElement_1.SplitterElement, { sticky: null, type: "anti-flexer", children: (0, jsx_runtime_1.jsx)(Timeline_1.Timeline, {}) })] }))] }));
+    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, { readOnlyStudio: readOnlyStudio }), onlyTopPanel ? ((0, jsx_runtime_1.jsx)(TopPanel_1.TopPanel, { onMounted: onMounted, readOnlyStudio: readOnlyStudio })) : ((0, jsx_runtime_1.jsxs)(SplitterContainer_1.SplitterContainer, { orientation: "horizontal", id: "top-to-bottom", maxFlex: 0.9, minFlex: 0.2, defaultFlex: 0.75, children: [(0, jsx_runtime_1.jsx)(SplitterElement_1.SplitterElement, { sticky: null, type: "flexer", children: (0, jsx_runtime_1.jsx)(TopPanel_1.TopPanel, { onMounted: onMounted, readOnlyStudio: readOnlyStudio }) }), (0, jsx_runtime_1.jsx)(SplitterHandle_1.SplitterHandle, { allowToCollapse: "none", onCollapse: noop }), (0, jsx_runtime_1.jsx)(SplitterElement_1.SplitterElement, { sticky: null, type: "anti-flexer", children: (0, jsx_runtime_1.jsx)(Timeline_1.Timeline, {}) })] }))] }));
 };
 exports.EditorContent = EditorContent;

package/dist/components/EditorRuler/Ruler.d.ts

@@ -1,3 +1,4 @@
+import type { Size } from '@remotion/player';
 import React from 'react';
 interface Point {
     value: number;
@@ -8,9 +9,9 @@ interface RulerProps {
     points: Point[];
     originOffset: number;
     startMarking: number;
-    containerRef: React.RefObject<HTMLDivElement>;
     markingGaps: number;
     orientation: 'horizontal' | 'vertical';
+    size: Size;
 }
 declare const Ruler: React.FC<RulerProps>;
 export default Ruler;

package/dist/components/EditorRuler/Ruler.js

@@ -10,8 +10,7 @@ const editor_rulers_1 = require("../../state/editor-rulers");
 const makeGuideId = () => {
     return Math.random().toString(36).substring(7);
 };
-const Ruler = ({ scale, points, originOffset, startMarking, containerRef, markingGaps, orientation, }) => {
-    var _a;
+const Ruler = ({ scale, points, originOffset, startMarking, size, markingGaps, orientation, }) => {
     const rulerCanvasRef = (0, react_1.useRef)(null);
     const isVerticalRuler = orientation === 'vertical';
     const { shouldCreateGuideRef, setGuidesList, selectedGuideId, hoveredGuideId, setSelectedGuideId, guidesList, setEditorShowGuides, } = (0, react_1.useContext)(editor_guides_1.EditorShowGuidesContext);
@@ -24,6 +23,8 @@ const Ruler = ({ scale, points, originOffset, startMarking, containerRef, markin
         var _a, _b;
         return ((_b = (_a = guidesList.find((guide) => guide.id === selectedGuideId)) !== null && _a !== void 0 ? _a : guidesList.find((guide) => guide.id === hoveredGuideId)) !== null && _b !== void 0 ? _b : null);
     }, [guidesList, hoveredGuideId, selectedGuideId]);
+    const rulerWidth = isVerticalRuler ? editor_rulers_1.RULER_WIDTH : size.width - editor_rulers_1.RULER_WIDTH;
+    const rulerHeight = isVerticalRuler ? size.height - editor_rulers_1.RULER_WIDTH : editor_rulers_1.RULER_WIDTH;
     (0, react_1.useEffect)(() => {
         (0, editor_ruler_1.drawMarkingOnRulerCanvas)({
             scale,
@@ -34,6 +35,8 @@ const Ruler = ({ scale, points, originOffset, startMarking, containerRef, markin
             orientation,
             rulerCanvasRef,
             selectedGuide: selectedOrHoveredGuide,
+            canvasHeight: rulerHeight * window.devicePixelRatio,
+            canvasWidth: rulerWidth * window.devicePixelRatio,
         });
     }, [
         scale,
@@ -43,15 +46,15 @@ const Ruler = ({ scale, points, originOffset, startMarking, containerRef, markin
         markingGaps,
         orientation,
         selectedOrHoveredGuide,
+        size,
+        rulerHeight,
+        rulerWidth,
     ]);
-    const { width: canvasContainerWidth, height: canvasContainerHeight } = ((_a = containerRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect()) || { width: 0, height: 0 };
-    const rulerWidth = isVerticalRuler ? editor_rulers_1.RULER_WIDTH : canvasContainerWidth;
-    const rulerHeight = isVerticalRuler ? canvasContainerHeight : editor_rulers_1.RULER_WIDTH;
     const rulerStyle = (0, react_1.useMemo)(() => ({
         position: 'absolute',
         background: colors_1.BACKGROUND,
-        width: `${rulerWidth}px`,
-        height: `${rulerHeight}px`,
+        width: rulerWidth,
+        height: rulerHeight,
         left: isVerticalRuler ? 0 : 'unset',
         top: isVerticalRuler ? 'unset' : 0,
         borderBottom: isVerticalRuler ? undefined : '1px solid ' + colors_1.RULER_COLOR,
@@ -100,6 +103,6 @@ const Ruler = ({ scale, points, originOffset, startMarking, containerRef, markin
             setCursor(isVerticalRuler ? 'ew-resize' : 'ns-resize');
         }
     }, [selectedGuideId, isVerticalRuler]);
-    return ((0, jsx_runtime_1.jsx)("canvas", { ref: rulerCanvasRef, width: rulerWidth * devicePixelRatio, height: rulerHeight * devicePixelRatio, style: rulerStyle, onPointerDown: onMouseDown, onPointerEnter: changeCursor, onPointerLeave: changeCursor }));
+    return ((0, jsx_runtime_1.jsx)("canvas", { ref: rulerCanvasRef, width: rulerWidth * window.devicePixelRatio, height: rulerHeight * window.devicePixelRatio, style: rulerStyle, onPointerDown: onMouseDown, onPointerEnter: changeCursor, onPointerLeave: changeCursor }));
 };
 exports.default = Ruler;

package/dist/components/EditorRuler/index.d.ts

@@ -3,7 +3,7 @@ import React from 'react';
 import type { AssetMetadata } from '../../helpers/get-asset-metadata';
 import type { Dimensions } from '../../helpers/is-current-selected-still';
 export declare const EditorRulers: React.FC<{
-    canvasSize: Size | null;
+    canvasSize: Size;
     contentDimensions: Dimensions | 'none' | null;
     assetMetadata: AssetMetadata | null;
     containerRef: React.RefObject<HTMLDivElement>;

package/dist/components/EditorRuler/index.js

@@ -23,7 +23,7 @@ const originBlockStyles = {
     background: colors_1.BACKGROUND,
 };
 const EditorRulers = ({ contentDimensions, canvasSize, assetMetadata, containerRef }) => {
-    const { scale, canvasDimensions } = (0, use_studio_canvas_dimensions_1.useStudioCanvasDimensions)({
+    const { scale } = (0, use_studio_canvas_dimensions_1.useStudioCanvasDimensions)({
         canvasSize,
         contentDimensions,
         assetMetadata,
@@ -35,15 +35,15 @@ const EditorRulers = ({ contentDimensions, canvasSize, assetMetadata, containerR
         return predefinedGap || editor_rulers_1.MAXIMUM_PREDEFINED_RULER_SCALE_GAP;
     }, [scale]);
     const horizontalRulerScaleRange = (0, react_1.useMemo)(() => (0, editor_ruler_1.getRulerScaleRange)({
-        canvasLength: canvasDimensions.width,
-        containerRef,
+        canvasLength: canvasSize.width,
         scale,
-    }), [canvasDimensions.width, containerRef, scale]);
+        canvasSize,
+    }), [canvasSize, scale]);
     const verticalRulerScaleRange = (0, react_1.useMemo)(() => (0, editor_ruler_1.getRulerScaleRange)({
-        canvasLength: canvasDimensions.height,
-        containerRef,
+        canvasLength: canvasSize.height,
         scale,
-    }), [canvasDimensions.height, containerRef, scale]);
+        canvasSize,
+    }), [canvasSize, scale]);
     const { points: horizontalRulerPoints, startMarking: horizontalRulerStartMarking, } = (0, react_1.useMemo)(() => (0, editor_ruler_1.getRulerPoints)({
         rulerScaleRange: horizontalRulerScaleRange,
         rulerMarkingGaps,
@@ -98,10 +98,8 @@ const EditorRulers = ({ contentDimensions, canvasSize, assetMetadata, containerR
                             return guide;
                         }
                         const position = guide.orientation === 'vertical'
-                            ? (mouseX - containerLeft) / scale -
-                                canvasDimensions.left / scale
-                            : (mouseY - containerTop) / scale -
-                                canvasDimensions.top / scale;
+                            ? (mouseX - containerLeft) / scale - canvasSize.left / scale
+                            : (mouseY - containerTop) / scale - canvasSize.top / scale;
                         const desiredCursor = guide.orientation === 'vertical' ? 'ew-resize' : 'ns-resize';
                         if (document.body.style.cursor !== desiredCursor) {
                             document.body.style.cursor = desiredCursor;
@@ -118,11 +116,11 @@ const EditorRulers = ({ contentDimensions, canvasSize, assetMetadata, containerR
     }, [
         containerRef,
         shouldDeleteGuideRef,
+        setGuidesList,
         selectedGuideId,
         scale,
-        setGuidesList,
-        canvasDimensions.left,
-        canvasDimensions.top,
+        canvasSize.left,
+        canvasSize.top,
     ]);
     const onMouseUp = (0, react_1.useCallback)(() => {
         setGuidesList((prevState) => {
@@ -162,6 +160,6 @@ const EditorRulers = ({ contentDimensions, canvasSize, assetMetadata, containerR
             }
         };
     }, [selectedGuideId, onMouseMove, onMouseUp]);
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { style: originBlockStyles }), (0, jsx_runtime_1.jsx)(Ruler_1.default, { orientation: "horizontal", scale: scale, points: horizontalRulerPoints, startMarking: horizontalRulerStartMarking, containerRef: containerRef, markingGaps: rulerMarkingGaps, originOffset: canvasDimensions.left }), (0, jsx_runtime_1.jsx)(Ruler_1.default, { orientation: "vertical", scale: scale, points: verticalRulerPoints, startMarking: verticalRulerStartMarking, containerRef: containerRef, markingGaps: rulerMarkingGaps, originOffset: canvasDimensions.top })] }));
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { style: originBlockStyles }), (0, jsx_runtime_1.jsx)(Ruler_1.default, { orientation: "horizontal", scale: scale, points: horizontalRulerPoints, startMarking: horizontalRulerStartMarking, markingGaps: rulerMarkingGaps, originOffset: canvasSize.left, size: canvasSize }), (0, jsx_runtime_1.jsx)(Ruler_1.default, { orientation: "vertical", scale: scale, points: verticalRulerPoints, startMarking: verticalRulerStartMarking, markingGaps: rulerMarkingGaps, originOffset: canvasSize.top, size: canvasSize })] }));
 };
 exports.EditorRulers = EditorRulers;

package/dist/components/NewComposition/RemInput.d.ts

@@ -12,6 +12,6 @@ export declare const getInputBorderColor: ({ status, isFocused, isHovered, }: {
     status: 'error' | 'warning' | 'ok';
     isFocused: boolean;
     isHovered: boolean;
-}) => "#ff3232" | "hsla(0, 0%, 100%, 0.15)" | "#f1c40f" | "rgba(0, 0, 0, 0.6)" | "rgba(255, 255, 255, 0.05)";
+}) => "hsla(0, 0%, 100%, 0.15)" | "rgba(0, 0, 0, 0.6)" | "rgba(255, 255, 255, 0.05)" | "#ff3232" | "#f1c40f";
 export declare const RemotionInput: React.ForwardRefExoticComponent<Omit<Props, "ref"> & React.RefAttributes<HTMLInputElement>>;
 export {};

package/dist/components/TopPanel.d.ts

@@ -2,4 +2,5 @@ import React from 'react';
 export declare const useResponsiveSidebarStatus: () => 'collapsed' | 'expanded';
 export declare const TopPanel: React.FC<{
     readOnlyStudio: boolean;
+    onMounted: () => void;
 }>;

package/dist/components/TopPanel.js

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TopPanel = exports.useResponsiveSidebarStatus = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const player_1 = require("@remotion/player");
 const react_1 = require("react");
 const use_breakpoint_1 = require("../helpers/use-breakpoint");
 const editor_rulers_1 = require("../state/editor-rulers");
@@ -43,9 +44,10 @@ const useResponsiveSidebarStatus = () => {
     return actualStateLeft;
 };
 exports.useResponsiveSidebarStatus = useResponsiveSidebarStatus;
-const TopPanel = ({ readOnlyStudio }) => {
+const TopPanel = ({ readOnlyStudio, onMounted }) => {
     const { setSidebarCollapsedState, sidebarCollapsedStateRight } = (0, react_1.useContext)(sidebar_1.SidebarContext);
     const rulersAreVisible = (0, use_is_ruler_visible_1.useIsRulerVisible)();
+    const ref = (0, react_1.useRef)(null);
     const actualStateLeft = (0, exports.useResponsiveSidebarStatus)();
     const actualStateRight = (0, react_1.useMemo)(() => {
         if (sidebarCollapsedStateRight === 'collapsed') {
@@ -53,6 +55,14 @@ const TopPanel = ({ readOnlyStudio }) => {
         }
         return 'expanded';
     }, [sidebarCollapsedStateRight]);
+    const size = player_1.PlayerInternals.useElementSize(ref, {
+        triggerOnWindowResize: false,
+        shouldApplyCssTransforms: true,
+    });
+    const hasSize = size !== null;
+    (0, react_1.useEffect)(() => {
+        onMounted();
+    }, [hasSize, onMounted]);
     const canvasContainerStyle = (0, react_1.useMemo)(() => ({
         flex: 1,
         display: 'flex',
@@ -65,6 +75,6 @@ const TopPanel = ({ readOnlyStudio }) => {
     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)("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, { sticky: null, type: "flexer", children: (0, jsx_runtime_1.jsx)(ExplorerPanel_1.ExplorerPanel, {}) })) : 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", { style: canvasContainerStyle, 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, { 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, { readOnlyStudio: readOnlyStudio }), (0, jsx_runtime_1.jsx)(CurrentCompositionSideEffects_1.CurrentCompositionKeybindings, { readOnlyStudio: readOnlyStudio }), (0, jsx_runtime_1.jsx)(CurrentCompositionSideEffects_1.TitleUpdater, {})] }));
+    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' ? ((0, jsx_runtime_1.jsx)(SplitterElement_1.SplitterElement, { sticky: null, type: "flexer", children: (0, jsx_runtime_1.jsx)(ExplorerPanel_1.ExplorerPanel, {}) })) : 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: ref, style: canvasContainerStyle, children: size ? (0, jsx_runtime_1.jsx)(CanvasOrLoading_1.CanvasOrLoading, { size: size }) : null }) }), 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, { 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, { readOnlyStudio: readOnlyStudio }), (0, jsx_runtime_1.jsx)(CurrentCompositionSideEffects_1.CurrentCompositionKeybindings, { readOnlyStudio: readOnlyStudio }), (0, jsx_runtime_1.jsx)(CurrentCompositionSideEffects_1.TitleUpdater, {})] }));
 };
 exports.TopPanel = TopPanel;

package/dist/helpers/checkerboard-background.d.ts

@@ -1,4 +1,4 @@
 export declare const getCheckerboardBackgroundSize: (size: number) => string;
 export declare const getCheckerboardBackgroundPos: (size: number) => string;
-export declare const checkerboardBackgroundColor: (checkerboard: boolean) => "white" | "black";
+export declare const checkerboardBackgroundColor: (checkerboard: boolean) => "black" | "white";
 export declare const checkerboardBackgroundImage: (checkerboard: boolean) => "\n     linear-gradient(\n        45deg,\n        rgba(0, 0, 0, 0.1) 25%,\n        transparent 25%\n      ),\n      linear-gradient(135deg, rgba(0, 0, 0, 0.1) 25%, transparent 25%),\n      linear-gradient(45deg, transparent 75%, rgba(0, 0, 0, 0.1) 75%),\n      linear-gradient(135deg, transparent 75%, rgba(0, 0, 0, 0.1) 75%)\n    " | undefined;

package/dist/helpers/colors.d.ts

@@ -23,4 +23,4 @@ export declare const TIMELINE_TRACK_SEPARATOR = "rgba(0, 0, 0, 0.3)";
 export declare const getBackgroundFromHoverState: ({ selected, hovered, }: {
     selected: boolean;
     hovered: boolean;
-}) => "hsla(0, 0%, 100%, 0.15)" | "hsla(0, 0%, 100%, 0.25)" | "rgba(255, 255, 255, 0.06)" | "transparent";
+}) => "transparent" | "hsla(0, 0%, 100%, 0.15)" | "hsla(0, 0%, 100%, 0.25)" | "rgba(255, 255, 255, 0.06)";

package/dist/helpers/editor-ruler.d.ts

@@ -1,5 +1,6 @@
+import type { Size } from '@remotion/player';
 import type { Guide } from '../state/editor-guides';
-export declare const drawMarkingOnRulerCanvas: ({ scale, points, startMarking, originOffset, markingGaps, orientation, rulerCanvasRef, selectedGuide, }: {
+export declare const drawMarkingOnRulerCanvas: ({ scale, points, startMarking, originOffset, markingGaps, orientation, rulerCanvasRef, selectedGuide, canvasHeight, canvasWidth, }: {
     scale: number;
     points: Array<{
         position: number;
@@ -11,6 +12,8 @@ export declare const drawMarkingOnRulerCanvas: ({ scale, points, startMarking, o
     orientation: 'horizontal' | 'vertical';
     rulerCanvasRef: React.RefObject<HTMLCanvasElement>;
     selectedGuide: Guide | null;
+    canvasWidth: number;
+    canvasHeight: number;
 }) => void;
 export declare const getRulerPoints: ({ rulerScaleRange, rulerMarkingGaps, scale, }: {
     rulerScaleRange: {
@@ -26,10 +29,10 @@ export declare const getRulerPoints: ({ rulerScaleRange, rulerMarkingGaps, scale
     }[];
     startMarking: number;
 };
-export declare const getRulerScaleRange: ({ canvasLength, containerRef, scale, }: {
+export declare const getRulerScaleRange: ({ canvasLength, scale, canvasSize, }: {
     canvasLength: number;
-    containerRef: React.RefObject<HTMLDivElement>;
     scale: number;
+    canvasSize: Size;
 }) => {
     start: number;
     end: number;

package/dist/helpers/editor-ruler.js

@@ -79,15 +79,13 @@ const drawGuide = ({ selectedGuide, scale, startMarking, context, canvasHeight,
     }
     context.stroke();
 };
-const drawMarkingOnRulerCanvas = ({ scale, points, startMarking, originOffset, markingGaps, orientation, rulerCanvasRef, selectedGuide, }) => {
+const drawMarkingOnRulerCanvas = ({ scale, points, startMarking, originOffset, markingGaps, orientation, rulerCanvasRef, selectedGuide, canvasHeight, canvasWidth, }) => {
     const canvas = rulerCanvasRef.current;
     if (!canvas)
         return;
     const context = canvas.getContext('2d');
     if (!context)
         return;
-    const canvasWidth = canvas.clientWidth * window.devicePixelRatio;
-    const canvasHeight = canvas.clientHeight * window.devicePixelRatio;
     canvas.width = canvasWidth;
     canvas.height = canvasHeight;
     context.scale(window.devicePixelRatio, window.devicePixelRatio);
@@ -169,9 +167,8 @@ exports.getRulerPoints = getRulerPoints;
 const rulerValueToPosition = ({ value, startMarking, scale, }) => {
     return (value + startMarking) * scale;
 };
-const getRulerScaleRange = ({ canvasLength, containerRef, scale, }) => {
-    var _a, _b;
-    const scaleRangeBeyondCanvas = (((_b = (_a = containerRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect()) === null || _b === void 0 ? void 0 : _b.width) ||
+const getRulerScaleRange = ({ canvasLength, scale, canvasSize, }) => {
+    const scaleRangeBeyondCanvas = (canvasSize.width ||
         editor_rulers_1.MINIMUM_VISIBLE_CANVAS_SIZE - editor_rulers_1.MINIMUM_VISIBLE_CANVAS_SIZE) / scale;
     return {
         start: -scaleRangeBeyondCanvas,

package/dist/helpers/render-modal-sections.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import type { Codec } from '@remotion/renderer';
 import type { RenderType } from '../components/RenderModal/RenderModalAdvanced';
 type Section = 'general' | 'picture' | 'advanced' | 'data' | 'gif' | 'audio';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@remotion/studio",
-  "version": "4.0.100",
+  "version": "4.0.102",
   "description": "Remotion Editor",
   "main": "dist",
   "sideEffects": false,
@@ -18,11 +18,11 @@
     "memfs": "3.4.3",
     "source-map": "0.7.3",
     "open": "^8.4.2",
-    "remotion": "4.0.100",
-    "@remotion/player": "4.0.100",
-    "@remotion/media-utils": "4.0.100",
-    "@remotion/renderer": "4.0.100",
-    "@remotion/studio-shared": "4.0.100"
+    "remotion": "4.0.102",
+    "@remotion/player": "4.0.102",
+    "@remotion/renderer": "4.0.102",
+    "@remotion/media-utils": "4.0.102",
+    "@remotion/studio-shared": "4.0.102"
   },
   "devDependencies": {
     "react": "18.2.0",
@@ -40,7 +40,7 @@
     "prettier-plugin-organize-imports": "3.2.4",
     "vitest": "0.31.1",
     "zod": "^3.22.3",
-    "@remotion/zod-types": "4.0.100"
+    "@remotion/zod-types": "4.0.102"
   },
   "publishConfig": {
     "access": "public"