@remotion/studio 4.0.232 → 4.0.233

package/.turbo/turbo-make.log

@@ -1,5 +1,5 @@
 
 
-> @remotion/studio@4.0.231 make /Users/jonathanburger/remotion/packages/studio
+> @remotion/studio@4.0.232 make /Users/jonathanburger/remotion/packages/studio
 > tsc -d && bun --env-file=../.env.bundle bundle.ts
 

package/dist/components/CanvasIfSizeIsAvailable.d.ts

@@ -0,0 +1 @@
+export declare const CanvasIfSizeIsAvailable: React.FC;

package/dist/components/CanvasIfSizeIsAvailable.js

@@ -0,0 +1,32 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CanvasIfSizeIsAvailable = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const remotion_1 = require("remotion");
+const editor_rulers_1 = require("../state/editor-rulers");
+const CanvasOrLoading_1 = require("./CanvasOrLoading");
+const use_is_ruler_visible_1 = require("./EditorRuler/use-is-ruler-visible");
+const CanvasIfSizeIsAvailable = () => {
+    const rulersAreVisible = (0, use_is_ruler_visible_1.useIsRulerVisible)();
+    const context = (0, react_1.useContext)(remotion_1.Internals.CurrentScaleContext);
+    const sizeWithRulersApplied = (0, react_1.useMemo)(() => {
+        const size = context && context.type === 'canvas-size' ? context.canvasSize : null;
+        if (!rulersAreVisible) {
+            return size;
+        }
+        if (!size) {
+            return null;
+        }
+        return {
+            ...size,
+            width: size.width - editor_rulers_1.RULER_WIDTH,
+            height: size.height - editor_rulers_1.RULER_WIDTH,
+        };
+    }, [context, rulersAreVisible]);
+    if (!sizeWithRulersApplied) {
+        return null;
+    }
+    return (0, jsx_runtime_1.jsx)(CanvasOrLoading_1.CanvasOrLoading, { size: sizeWithRulersApplied });
+};
+exports.CanvasIfSizeIsAvailable = CanvasIfSizeIsAvailable;

package/dist/components/CompositionSelectorItem.js

@@ -11,9 +11,9 @@ const video_1 = require("../icons/video");
 const modals_1 = require("../state/modals");
 const CompositionContextButton_1 = require("./CompositionContextButton");
 const ContextMenu_1 = require("./ContextMenu");
+const layout_1 = require("./layout");
 const NotificationCenter_1 = require("./Notifications/NotificationCenter");
 const SidebarRenderButton_1 = require("./SidebarRenderButton");
-const layout_1 = require("./layout");
 const COMPOSITION_ITEM_HEIGHT = 32;
 const itemStyle = {
     paddingRight: 10,

package/dist/components/Editor.js

@@ -86,6 +86,6 @@ const Editor = ({ Root, readOnlyStudio }) => {
     const MemoRoot = (0, react_1.useMemo)(() => {
         return react_1.default.memo(Root);
     }, [Root]);
-    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.jsx)(remotion_1.Internals.CurrentScaleContext.Provider, { value: value, children: (0, jsx_runtime_1.jsxs)("div", { style: background, children: [canvasMounted ? (0, jsx_runtime_1.jsx)(MemoRoot, {}) : null, (0, jsx_runtime_1.jsxs)(remotion_1.Internals.CanUseRemotionHooksProvider, { children: [(0, jsx_runtime_1.jsx)(EditorContent_1.EditorContent, { readOnlyStudio: readOnlyStudio, children: (0, jsx_runtime_1.jsx)(TopPanel_1.TopPanel, { size: size, drawRef: canvas_ref_1.drawRef, bufferStateDelayInMilliseconds: exports.BUFFER_STATE_DELAY_IN_MILLISECONDS, onMounted: onMounted, readOnlyStudio: readOnlyStudio }) }), (0, jsx_runtime_1.jsx)(GlobalKeybindings_1.GlobalKeybindings, {})] })] }) }), (0, jsx_runtime_1.jsx)(Modals_1.Modals, { readOnlyStudio: readOnlyStudio }), (0, jsx_runtime_1.jsx)(NotificationCenter_1.NotificationCenter, {})] }) }));
+    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.jsx)(remotion_1.Internals.CurrentScaleContext.Provider, { value: value, children: (0, jsx_runtime_1.jsxs)("div", { style: background, children: [canvasMounted ? (0, jsx_runtime_1.jsx)(MemoRoot, {}) : null, (0, jsx_runtime_1.jsxs)(remotion_1.Internals.CanUseRemotionHooksProvider, { children: [(0, jsx_runtime_1.jsx)(EditorContent_1.EditorContent, { readOnlyStudio: readOnlyStudio, children: (0, jsx_runtime_1.jsx)(TopPanel_1.TopPanel, { drawRef: canvas_ref_1.drawRef, bufferStateDelayInMilliseconds: exports.BUFFER_STATE_DELAY_IN_MILLISECONDS, onMounted: onMounted, readOnlyStudio: readOnlyStudio }) }), (0, jsx_runtime_1.jsx)(GlobalKeybindings_1.GlobalKeybindings, {})] })] }) }), (0, jsx_runtime_1.jsx)(Modals_1.Modals, { readOnlyStudio: readOnlyStudio }), (0, jsx_runtime_1.jsx)(NotificationCenter_1.NotificationCenter, {})] }) }));
 };
 exports.Editor = Editor;

package/dist/components/InitialCompositionLoader.js

@@ -39,7 +39,7 @@ const useSelectComposition = () => {
     const { setCanvasContent } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
     const isMobileLayout = (0, mobile_layout_1.useMobileLayout)();
     const { setSidebarCollapsedState } = (0, react_1.useContext)(sidebar_1.SidebarContext);
-    return (c, push) => {
+    return (0, react_1.useCallback)((c, push) => {
         var _a;
         if (push) {
             (0, url_state_1.pushUrl)(`/${c.id}`);
@@ -62,7 +62,12 @@ const useSelectComposition = () => {
                 setSidebarCollapsedState({ left: 'collapsed', right: 'collapsed' });
             }
         }
-    };
+    }, [
+        isMobileLayout,
+        setCanvasContent,
+        setCompositionFoldersExpanded,
+        setSidebarCollapsedState,
+    ]);
 };
 exports.useSelectComposition = useSelectComposition;
 const InitialCompositionLoader = () => {

package/dist/components/PlayPause.js

@@ -33,14 +33,14 @@ const PlayPause = ({ playbackRate, loop, bufferStateDelayInMilliseconds }) => {
     const { inFrame, outFrame } = (0, in_out_1.useTimelineInOutFramePosition)();
     const videoConfig = remotion_1.Internals.useUnsafeVideoConfig();
     const [showBufferIndicator, setShowBufferState] = (0, react_1.useState)(false);
-    const { playing, play, pause, pauseAndReturnToPlayStart, frameBack, seek, frameForward, isLastFrame, isFirstFrame, remotionInternal_currentFrameRef, emitter, } = player_1.PlayerInternals.usePlayer();
+    const { playing, play, pause, pauseAndReturnToPlayStart, frameBack, seek, frameForward, isLastFrame, isFirstFrame, emitter, getCurrentFrame, } = player_1.PlayerInternals.usePlayer();
     player_1.PlayerInternals.usePlayback({
         loop,
         playbackRate,
         moveToBeginningWhenEnded: true,
         inFrame,
         outFrame,
-        frameRef: remotionInternal_currentFrameRef,
+        getCurrentFrame,
         browserMediaControlsBehavior: {
             mode: 'register-media-session',
         },
@@ -82,7 +82,7 @@ const PlayPause = ({ playbackRate, loop, bufferStateDelayInMilliseconds }) => {
             (0, timeline_scroll_logic_1.ensureFrameIsInViewport)({
                 direction: 'fit-left',
                 durationInFrames: (0, imperative_state_1.getCurrentDuration)(),
-                frame: Math.max(0, (0, imperative_state_1.getCurrentFrame)() - (0, imperative_state_1.getCurrentFps)()),
+                frame: Math.max(0, getCurrentFrame() - (0, imperative_state_1.getCurrentFps)()),
             });
         }
         else {
@@ -90,10 +90,10 @@ const PlayPause = ({ playbackRate, loop, bufferStateDelayInMilliseconds }) => {
             (0, timeline_scroll_logic_1.ensureFrameIsInViewport)({
                 direction: 'fit-left',
                 durationInFrames: (0, imperative_state_1.getCurrentDuration)(),
-                frame: Math.max(0, (0, imperative_state_1.getCurrentFrame)() - 1),
+                frame: Math.max(0, getCurrentFrame() - 1),
             });
         }
-    }, [frameBack, seek]);
+    }, [frameBack, seek, getCurrentFrame]);
     const onArrowRight = (0, react_1.useCallback)((e) => {
         if (e.altKey) {
             seek((0, imperative_state_1.getCurrentDuration)() - 1);
@@ -108,7 +108,7 @@ const PlayPause = ({ playbackRate, loop, bufferStateDelayInMilliseconds }) => {
             (0, timeline_scroll_logic_1.ensureFrameIsInViewport)({
                 direction: 'fit-right',
                 durationInFrames: (0, imperative_state_1.getCurrentDuration)(),
-                frame: Math.min((0, imperative_state_1.getCurrentDuration)() - 1, (0, imperative_state_1.getCurrentFrame)() + (0, imperative_state_1.getCurrentFps)()),
+                frame: Math.min((0, imperative_state_1.getCurrentDuration)() - 1, getCurrentFrame() + (0, imperative_state_1.getCurrentFps)()),
             });
         }
         else {
@@ -116,11 +116,11 @@ const PlayPause = ({ playbackRate, loop, bufferStateDelayInMilliseconds }) => {
             (0, timeline_scroll_logic_1.ensureFrameIsInViewport)({
                 direction: 'fit-right',
                 durationInFrames: (0, imperative_state_1.getCurrentDuration)(),
-                frame: Math.min((0, imperative_state_1.getCurrentDuration)() - 1, (0, imperative_state_1.getCurrentFrame)() + 1),
+                frame: Math.min((0, imperative_state_1.getCurrentDuration)() - 1, getCurrentFrame() + 1),
             });
         }
         e.preventDefault();
-    }, [frameForward, seek]);
+    }, [frameForward, seek, getCurrentFrame]);
     const oneFrameBack = (0, react_1.useCallback)(() => {
         frameBack(1);
     }, [frameBack]);

package/dist/components/RenderButton.js

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.RenderButton = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const player_1 = require("@remotion/player");
 const react_1 = require("react");
 const remotion_1 = require("remotion");
 const client_id_1 = require("../helpers/client-id");
@@ -38,7 +39,7 @@ const RenderButton = () => {
         };
     }, []);
     const video = remotion_1.Internals.useVideo();
-    const frame = (0, remotion_1.useCurrentFrame)();
+    const getCurrentFrame = player_1.PlayerInternals.useFrameImperative();
     const { props } = (0, react_1.useContext)(remotion_1.Internals.EditorPropsContext);
     const onClick = (0, react_1.useCallback)(() => {
         var _a, _b, _c;
@@ -52,7 +53,7 @@ const RenderButton = () => {
         setSelectedModal({
             type: 'render',
             compositionId: video.id,
-            initialFrame: frame,
+            initialFrame: getCurrentFrame(),
             initialStillImageFormat: defaults.stillImageFormat,
             initialVideoImageFormat: defaults.videoImageFormat,
             initialJpegQuality: defaults.jpegQuality,
@@ -94,7 +95,7 @@ const RenderButton = () => {
             defaulMetadata: defaults.metadata,
             initialHardwareAcceleration: defaults.hardwareAcceleration,
         });
-    }, [video, setSelectedModal, frame, props, inFrame, outFrame]);
+    }, [video, setSelectedModal, getCurrentFrame, props, inFrame, outFrame]);
     if (!video) {
         return null;
     }

package/dist/components/Splitter/SplitterContainer.js

@@ -21,30 +21,12 @@ exports.containerColumn = {
 const SplitterContainer = ({ orientation, children, defaultFlex, maxFlex, minFlex, id }) => {
     const [initialTimelineFlex, persistFlex] = (0, timeline_1.useTimelineFlex)(id);
     const [flexValue, setFlexValue] = (0, react_1.useState)(initialTimelineFlex !== null && initialTimelineFlex !== void 0 ? initialTimelineFlex : defaultFlex);
-    const [domRect, setDomRect] = (0, react_1.useState)(null);
     const ref = (0, react_1.useRef)(null);
     const isDragging = (0, react_1.useRef)(false);
-    const [resizeObserver] = (0, react_1.useState)(() => {
-        return new ResizeObserver((entries) => {
-            setDomRect(entries[0].contentRect);
-        });
-    });
-    (0, react_1.useEffect)(() => {
-        const { current } = ref;
-        if (!current) {
-            return;
-        }
-        resizeObserver.observe(current);
-        return () => resizeObserver.unobserve(current);
-    }, [resizeObserver]);
-    (0, react_1.useEffect)(() => {
-        var _a, _b;
-        setDomRect((_b = (_a = ref.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect()) !== null && _b !== void 0 ? _b : null);
-    }, []);
     const value = (0, react_1.useMemo)(() => {
         return {
             flexValue,
-            domRect,
+            ref,
             setFlexValue,
             isDragging,
             orientation,
@@ -56,13 +38,13 @@ const SplitterContainer = ({ orientation, children, defaultFlex, maxFlex, minFle
         };
     }, [
         defaultFlex,
-        domRect,
         flexValue,
         id,
         maxFlex,
         minFlex,
         orientation,
         persistFlex,
+        ref,
     ]);
     return ((0, jsx_runtime_1.jsx)(SplitterContext_1.SplitterContext.Provider, { value: value, children: (0, jsx_runtime_1.jsx)("div", { ref: ref, style: orientation === 'horizontal' ? exports.containerColumn : containerRow, children: children }) }));
 };

package/dist/components/Splitter/SplitterContext.d.ts

@@ -7,8 +7,8 @@ export type SplitterOrientation = 'horizontal' | 'vertical';
 export type TSplitterContext = {
     flexValue: number;
     setFlexValue: React.Dispatch<React.SetStateAction<number>>;
-    domRect: DOMRect | DOMRectReadOnly | null;
     orientation: SplitterOrientation;
+    ref: React.RefObject<HTMLDivElement>;
     maxFlex: number;
     minFlex: number;
     defaultFlex: number;

package/dist/components/Splitter/SplitterContext.js

@@ -7,7 +7,7 @@ exports.SplitterContext = void 0;
 const react_1 = __importDefault(require("react"));
 exports.SplitterContext = react_1.default.createContext({
     flexValue: 1,
-    domRect: null,
+    ref: { current: null },
     setFlexValue: () => undefined,
     isDragging: { current: false },
     orientation: 'horizontal',

package/dist/components/Splitter/SplitterHandle.js

@@ -25,9 +25,6 @@ const SplitterHandle = ({ allowToCollapse, onCollapse }) => {
         if (context.isDragging.current) {
             return;
         }
-        if (!context.domRect) {
-            return;
-        }
         const { current } = ref;
         if (!current) {
             return;
@@ -36,10 +33,10 @@ const SplitterHandle = ({ allowToCollapse, onCollapse }) => {
             if (!context.isDragging.current) {
                 throw new Error('cannot get value if not dragging');
             }
-            if (!context.domRect) {
+            if (!context.ref.current) {
                 throw new Error('domRect is not mounted');
             }
-            const { width, height } = context.domRect;
+            const { width, height } = context.ref.current.getBoundingClientRect();
             const change = (() => {
                 if (context.orientation === 'vertical') {
                     return ((e.clientX - context.isDragging.current.x) /
@@ -110,14 +107,7 @@ const SplitterHandle = ({ allowToCollapse, onCollapse }) => {
                 cleanup();
             }
         };
-    }, [
-        allowToCollapse,
-        context,
-        context.domRect,
-        context.flexValue,
-        lastPointerUp,
-        onCollapse,
-    ]);
+    }, [allowToCollapse, context, context.flexValue, lastPointerUp, onCollapse]);
     return ((0, jsx_runtime_1.jsx)("div", { ref: ref, className: [
             'remotion-splitter',
             context.orientation === 'horizontal'

package/dist/components/TimelineInOutToggle.js

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TimelineInOutPointToggle = exports.defaultInOutValue = exports.inOutHandles = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const player_1 = require("@remotion/player");
 const react_1 = require("react");
 const remotion_1 = require("remotion");
 const no_react_1 = require("remotion/no-react");
@@ -24,11 +25,11 @@ const style = {
 exports.inOutHandles = (0, react_1.createRef)();
 exports.defaultInOutValue = { inFrame: null, outFrame: null };
 const TimelineInOutPointToggle = () => {
-    const timelinePosition = remotion_1.Internals.Timeline.useTimelinePosition();
     const { inFrame, outFrame } = (0, in_out_1.useTimelineInOutFramePosition)();
     const { setInAndOutFrames } = (0, in_out_1.useTimelineSetInOutFramePosition)();
     const videoConfig = remotion_1.Internals.useUnsafeVideoConfig();
     const keybindings = (0, use_keybinding_1.useKeybinding)();
+    const { getCurrentFrame, isFirstFrame, isLastFrame } = player_1.PlayerInternals.usePlayer();
     const onInOutClear = (0, react_1.useCallback)((composition) => {
         setInAndOutFrames((prev) => {
             return {
@@ -61,7 +62,7 @@ const TimelineInOutPointToggle = () => {
             var _a, _b, _c, _d, _e;
             const prevOut = (_a = prev[videoConfig.id]) === null || _a === void 0 ? void 0 : _a.outFrame;
             const biggestPossible = prevOut === undefined || prevOut === null ? Infinity : prevOut - 1;
-            const selected = Math.min(timelinePosition, biggestPossible);
+            const selected = Math.min(getCurrentFrame(), biggestPossible);
             if (selected === 0) {
                 return {
                     ...prev,
@@ -92,7 +93,7 @@ const TimelineInOutPointToggle = () => {
                 },
             };
         });
-    }, [setInAndOutFrames, timelinePosition, videoConfig]);
+    }, [getCurrentFrame, setInAndOutFrames, videoConfig]);
     const clearInMark = (0, react_1.useCallback)((e) => {
         if (!videoConfig) {
             return null;
@@ -148,7 +149,7 @@ const TimelineInOutPointToggle = () => {
             const smallestPossible = prevInFrame === null || prevInFrame === undefined
                 ? -Infinity
                 : prevInFrame + 1;
-            const selected = Math.max(timelinePosition, smallestPossible);
+            const selected = Math.max(getCurrentFrame(), smallestPossible);
             if (selected === videoConfig.durationInFrames - 1) {
                 return {
                     ...prev,
@@ -178,7 +179,7 @@ const TimelineInOutPointToggle = () => {
                 },
             };
         });
-    }, [setInAndOutFrames, timelinePosition, videoConfig]);
+    }, [getCurrentFrame, setInAndOutFrames, videoConfig]);
     const confId = videoConfig === null || videoConfig === void 0 ? void 0 : videoConfig.id;
     (0, react_1.useEffect)(() => {
         if (!confId) {
@@ -235,6 +236,6 @@ 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: (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 }) })] }));
+    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 }) })] }));
 };
 exports.TimelineInOutPointToggle = TimelineInOutPointToggle;

package/dist/components/TopPanel.d.ts

@@ -1,10 +1,8 @@
-import type { Size } from '@remotion/player';
 import React from 'react';
 export declare const useResponsiveSidebarStatus: () => "collapsed" | "expanded";
 export declare const TopPanel: React.FC<{
     readonly readOnlyStudio: boolean;
     readonly onMounted: () => void;
-    readonly size: Size | null;
     readonly drawRef: React.RefObject<HTMLDivElement>;
     readonly bufferStateDelayInMilliseconds: number;
 }>;

package/dist/components/TopPanel.js

@@ -10,7 +10,7 @@ const mobile_layout_1 = require("../helpers/mobile-layout");
 const use_breakpoint_1 = require("../helpers/use-breakpoint");
 const editor_rulers_1 = require("../state/editor-rulers");
 const sidebar_1 = require("../state/sidebar");
-const CanvasOrLoading_1 = require("./CanvasOrLoading");
+const CanvasIfSizeIsAvailable_1 = require("./CanvasIfSizeIsAvailable");
 const CurrentCompositionSideEffects_1 = require("./CurrentCompositionSideEffects");
 const use_is_ruler_visible_1 = require("./EditorRuler/use-is-ruler-visible");
 const ExplorerPanel_1 = require("./ExplorerPanel");
@@ -48,7 +48,7 @@ const useResponsiveSidebarStatus = () => {
     return actualStateLeft;
 };
 exports.useResponsiveSidebarStatus = useResponsiveSidebarStatus;
-const TopPanel = ({ readOnlyStudio, onMounted, size, drawRef, bufferStateDelayInMilliseconds, }) => {
+const TopPanel = ({ readOnlyStudio, onMounted, drawRef, bufferStateDelayInMilliseconds }) => {
     const { setSidebarCollapsedState, sidebarCollapsedStateRight } = (0, react_1.useContext)(sidebar_1.SidebarContext);
     const rulersAreVisible = (0, use_is_ruler_visible_1.useIsRulerVisible)();
     const actualStateLeft = (0, exports.useResponsiveSidebarStatus)();
@@ -58,29 +58,15 @@ const TopPanel = ({ readOnlyStudio, onMounted, size, drawRef, bufferStateDelayIn
         }
         return 'expanded';
     }, [sidebarCollapsedStateRight]);
-    const hasSize = size !== null;
     (0, react_1.useEffect)(() => {
         onMounted();
-    }, [hasSize, onMounted]);
+    }, [onMounted]);
     const canvasContainerStyle = (0, react_1.useMemo)(() => ({
         flex: 1,
         display: 'flex',
         paddingTop: rulersAreVisible ? editor_rulers_1.RULER_WIDTH : 0,
         paddingLeft: rulersAreVisible ? editor_rulers_1.RULER_WIDTH : 0,
     }), [rulersAreVisible]);
-    const sizeWithRulersApplied = (0, react_1.useMemo)(() => {
-        if (!rulersAreVisible) {
-            return size;
-        }
-        if (!size) {
-            return null;
-        }
-        return {
-            ...size,
-            width: size.width - editor_rulers_1.RULER_WIDTH,
-            height: size.height - editor_rulers_1.RULER_WIDTH,
-        };
-    }, [rulersAreVisible, size]);
     const onCollapseLeft = (0, react_1.useCallback)(() => {
         setSidebarCollapsedState({ left: 'collapsed', right: null });
     }, [setSidebarCollapsedState]);
@@ -88,6 +74,6 @@ const TopPanel = ({ readOnlyStudio, onMounted, size, drawRef, bufferStateDelayIn
         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: sizeWithRulersApplied ? ((0, jsx_runtime_1.jsx)(CanvasOrLoading_1.CanvasOrLoading, { size: sizeWithRulersApplied })) : null }) }), 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 ((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, {})] }));
 };
 exports.TopPanel = TopPanel;