@remotion/cli 4.0.63 → 4.0.66

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

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

package/dist/editor/components/UpdateCheck.js

@@ -37,6 +37,7 @@ const UpdateCheck = () => {
             if (err.message.includes('aborted')) {
                 return;
             }
+            // eslint-disable-next-line no-console
             console.log('Could not check for updates', err);
         });
         return controller;
@@ -54,6 +55,7 @@ const UpdateCheck = () => {
             if (err.message.includes('aborted')) {
                 return;
             }
+            // eslint-disable-next-line no-console
             console.log('Could not check for bugs in this version', err);
         });
         return controller;

package/dist/editor/helpers/colors.d.ts

@@ -1,9 +1,11 @@
-export declare const BACKGROUND = "#1f2428";
+export declare const BACKGROUND = "rgb(31,36,40)";
+export declare const BACKGROUND__TRANSPARENT = "rgba(31,36,40, 0)";
 export declare const INPUT_BACKGROUND = "#2f363d";
 export declare const BORDER_COLOR = "#000";
 export declare const LIGHT_COLOR = "#ddd";
 export declare const SELECTED_BACKGROUND = "hsla(0, 0%, 100%, 0.15)";
 export declare const LIGHT_TEXT = "#A6A7A9";
+export declare const RULER_COLOR = "#808080";
 export declare const VERY_LIGHT_TEXT = "rgba(255, 255, 255, 0.3)";
 export declare const CLEAR_HOVER = "rgba(255, 255, 255, 0.06)";
 export declare const INPUT_BORDER_COLOR_UNHOVERED = "rgba(0, 0, 0, 0.6)";
@@ -13,6 +15,9 @@ export declare const FAIL_COLOR = "#ff3232";
 export declare const WARNING_COLOR = "#f1c40f";
 export declare const BLUE = "#0b84f3";
 export declare const BLUE_DISABLED = "#284f73";
+export declare const LIGHT_TRANSPARENT = "rgba(255, 255, 255, 0.7)";
+export declare const UNSELECTED_GUIDE = "#7e1219";
+export declare const SELECTED_GUIDE = "#d22d3a";
 export declare const getBackgroundFromHoverState: ({ selected, hovered, }: {
     selected: boolean;
     hovered: boolean;

package/dist/editor/helpers/colors.js

@@ -1,12 +1,14 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getBackgroundFromHoverState = exports.BLUE_DISABLED = exports.BLUE = exports.WARNING_COLOR = exports.FAIL_COLOR = exports.TIMELINE_BACKGROUND = exports.INPUT_BORDER_COLOR_HOVERED = exports.INPUT_BORDER_COLOR_UNHOVERED = exports.CLEAR_HOVER = exports.VERY_LIGHT_TEXT = exports.LIGHT_TEXT = exports.SELECTED_BACKGROUND = exports.LIGHT_COLOR = exports.BORDER_COLOR = exports.INPUT_BACKGROUND = exports.BACKGROUND = void 0;
-exports.BACKGROUND = '#1f2428';
+exports.getBackgroundFromHoverState = exports.SELECTED_GUIDE = exports.UNSELECTED_GUIDE = exports.LIGHT_TRANSPARENT = exports.BLUE_DISABLED = exports.BLUE = exports.WARNING_COLOR = exports.FAIL_COLOR = exports.TIMELINE_BACKGROUND = exports.INPUT_BORDER_COLOR_HOVERED = exports.INPUT_BORDER_COLOR_UNHOVERED = exports.CLEAR_HOVER = exports.VERY_LIGHT_TEXT = exports.RULER_COLOR = exports.LIGHT_TEXT = exports.SELECTED_BACKGROUND = exports.LIGHT_COLOR = exports.BORDER_COLOR = exports.INPUT_BACKGROUND = exports.BACKGROUND__TRANSPARENT = exports.BACKGROUND = void 0;
+exports.BACKGROUND = 'rgb(31,36,40)';
+exports.BACKGROUND__TRANSPARENT = 'rgba(31,36,40, 0)';
 exports.INPUT_BACKGROUND = '#2f363d';
 exports.BORDER_COLOR = '#000';
 exports.LIGHT_COLOR = '#ddd';
 exports.SELECTED_BACKGROUND = 'hsla(0, 0%, 100%, 0.15)';
 exports.LIGHT_TEXT = '#A6A7A9';
+exports.RULER_COLOR = '#808080';
 exports.VERY_LIGHT_TEXT = 'rgba(255, 255, 255, 0.3)';
 const SELECTED_HOVER_BACKGROUND = 'hsla(0, 0%, 100%, 0.25)';
 exports.CLEAR_HOVER = 'rgba(255, 255, 255, 0.06)';
@@ -17,6 +19,9 @@ exports.FAIL_COLOR = '#ff3232';
 exports.WARNING_COLOR = '#f1c40f';
 exports.BLUE = '#0b84f3';
 exports.BLUE_DISABLED = '#284f73';
+exports.LIGHT_TRANSPARENT = 'rgba(255, 255, 255, 0.7)';
+exports.UNSELECTED_GUIDE = '#7e1219';
+exports.SELECTED_GUIDE = '#d22d3a';
 const getBackgroundFromHoverState = ({ selected, hovered, }) => {
     if (selected) {
         if (hovered) {

package/dist/editor/helpers/convert-env-variables.d.ts

@@ -1,8 +1,2 @@
-export declare const envVariablesObjectToArray: (envVariables: Record<string, string>) => [
-    string,
-    string
-][];
-export declare const envVariablesArrayToObject: (envVariables: [
-    string,
-    string
-][]) => Record<string, string>;
+export declare const envVariablesObjectToArray: (envVariables: Record<string, string>) => [string, string][];
+export declare const envVariablesArrayToObject: (envVariables: [string, string][]) => Record<string, string>;

package/dist/editor/helpers/create-folder-tree.js

@@ -72,6 +72,7 @@ const findItemListToPush = (items, folderName, parentName) => {
     }
     const folder = doesFolderExist(items, folderName, parentName);
     if (!folder) {
+        // eslint-disable-next-line no-console
         console.log({ items, folderName, parentName });
         throw new Error('did not find folder ' + folderName);
     }

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

@@ -1,4 +1,16 @@
-export declare const drawMarkingOnRulerCanvas: ({ scale, points, startMarking, originOffset, markingGaps, orientation, rulerCanvasRef, }: {
+import type { Guide } from '../state/editor-guides';
+type Orientation = 'horizontal' | 'vertical';
+export declare const drawGuide: ({ selectedGuide, scale, startMarking, context, canvasHeight, canvasWidth, orientation, originOffset, }: {
+    selectedGuide: Guide;
+    scale: number;
+    startMarking: number;
+    context: CanvasRenderingContext2D;
+    canvasHeight: number;
+    canvasWidth: number;
+    orientation: Orientation;
+    originOffset: number;
+}) => void;
+export declare const drawMarkingOnRulerCanvas: ({ scale, points, startMarking, originOffset, markingGaps, orientation, rulerCanvasRef, selectedGuide, }: {
     scale: number;
     points: Array<{
         position: number;
@@ -9,6 +21,7 @@ export declare const drawMarkingOnRulerCanvas: ({ scale, points, startMarking, o
     markingGaps: number;
     orientation: 'horizontal' | 'vertical';
     rulerCanvasRef: React.RefObject<HTMLCanvasElement>;
+    selectedGuide: Guide | null;
 }) => void;
 export declare const getRulerPoints: ({ rulerScaleRange, rulerMarkingGaps, scale, }: {
     rulerScaleRange: {
@@ -24,6 +37,11 @@ export declare const getRulerPoints: ({ rulerScaleRange, rulerMarkingGaps, scale
     }[];
     startMarking: number;
 };
+export declare const rulerValueToPosition: ({ value, startMarking, scale, }: {
+    value: number;
+    startMarking: number;
+    scale: number;
+}) => number;
 export declare const getRulerScaleRange: ({ canvasLength, containerRef, scale, }: {
     canvasLength: number;
     containerRef: React.RefObject<HTMLDivElement>;
@@ -32,3 +50,4 @@ export declare const getRulerScaleRange: ({ canvasLength, containerRef, scale, }
     start: number;
     end: number;
 };
+export {};

package/dist/editor/helpers/editor-ruler.js

@@ -1,8 +1,86 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getRulerScaleRange = exports.getRulerPoints = exports.drawMarkingOnRulerCanvas = void 0;
+exports.getRulerScaleRange = exports.rulerValueToPosition = exports.getRulerPoints = exports.drawMarkingOnRulerCanvas = exports.drawGuide = void 0;
 const editor_rulers_1 = require("../state/editor-rulers");
-const drawMarkingOnRulerCanvas = ({ scale, points, startMarking, originOffset, markingGaps, orientation, rulerCanvasRef, }) => {
+const colors_1 = require("./colors");
+const drawLabel = ({ orientation, context, label, originDistance, color, }) => {
+    context.fillStyle = color;
+    if (orientation === 'horizontal') {
+        context.fillText(label, originDistance + 4, 16);
+    }
+    else {
+        context.rotate(-Math.PI / 2);
+        context.fillText(label, -originDistance + 4, 16);
+        context.rotate(Math.PI / 2);
+    }
+};
+const drawGradient = ({ orientation, context, originDistance, canvasHeight, canvasWidth, }) => {
+    const size = 250;
+    const startX = orientation === 'horizontal' ? originDistance - size / 2 : 0;
+    const startY = orientation === 'horizontal' ? 0 : originDistance - size / 2;
+    const endX = orientation === 'horizontal' ? originDistance + size / 2 : canvasWidth;
+    const endY = orientation === 'horizontal' ? canvasHeight : originDistance + size / 2;
+    const grd = context.createLinearGradient(startX, startY, endX, endY);
+    grd.addColorStop(0, colors_1.BACKGROUND__TRANSPARENT);
+    grd.addColorStop(0.25, colors_1.BACKGROUND);
+    grd.addColorStop(0.75, colors_1.BACKGROUND);
+    grd.addColorStop(1, colors_1.BACKGROUND__TRANSPARENT);
+    context.fillStyle = grd;
+    context.fillRect(startX, startY, endX - startX, endY - startY);
+};
+const drawGuide = ({ selectedGuide, scale, startMarking, context, canvasHeight, canvasWidth, orientation, originOffset, }) => {
+    const originDistance = (0, exports.rulerValueToPosition)({
+        value: selectedGuide.position,
+        startMarking,
+        scale,
+    }) +
+        originOffset -
+        startMarking * scale;
+    drawGradient({
+        canvasHeight,
+        context,
+        orientation,
+        originDistance,
+        canvasWidth,
+    });
+    context.strokeStyle = colors_1.SELECTED_GUIDE;
+    context.lineWidth = 1;
+    context.beginPath();
+    if (orientation === 'horizontal' &&
+        selectedGuide.orientation === 'horizontal') {
+        return;
+    }
+    if (orientation === 'vertical' && selectedGuide.orientation === 'vertical') {
+        return;
+    }
+    if (orientation === 'vertical' &&
+        selectedGuide.orientation === 'horizontal') {
+        context.moveTo(0, originDistance);
+        context.lineTo(canvasWidth, originDistance);
+        drawLabel({
+            context,
+            label: selectedGuide.position.toString(),
+            originDistance,
+            orientation,
+            color: colors_1.SELECTED_GUIDE,
+        });
+    }
+    else if (orientation === 'horizontal' &&
+        selectedGuide.orientation === 'vertical') {
+        context.moveTo(originDistance, 0);
+        context.lineTo(originDistance, canvasHeight);
+        drawLabel({
+            context,
+            label: selectedGuide.position.toString(),
+            originDistance,
+            orientation,
+            color: colors_1.SELECTED_GUIDE,
+        });
+    }
+    context.stroke();
+};
+exports.drawGuide = drawGuide;
+const drawMarkingOnRulerCanvas = ({ scale, points, startMarking, originOffset, markingGaps, orientation, rulerCanvasRef, selectedGuide, }) => {
     const canvas = rulerCanvasRef.current;
     if (!canvas)
         return;
@@ -15,12 +93,12 @@ const drawMarkingOnRulerCanvas = ({ scale, points, startMarking, originOffset, m
     canvas.height = canvasHeight;
     context.scale(window.devicePixelRatio, window.devicePixelRatio);
     context.clearRect(0, 0, canvasWidth, canvasHeight);
-    context.strokeStyle = '#dbe3e8';
+    context.strokeStyle = colors_1.RULER_COLOR;
     context.lineWidth = 1;
     context.beginPath();
-    context.strokeStyle = '#dbe3e8';
-    context.lineWidth = 1;
     points.forEach((point) => {
+        context.strokeStyle = colors_1.RULER_COLOR;
+        context.lineWidth = 1;
         const originDistance = point.position + originOffset - startMarking * scale;
         context.beginPath();
         if (orientation === 'horizontal') {
@@ -32,46 +110,67 @@ const drawMarkingOnRulerCanvas = ({ scale, points, startMarking, originOffset, m
             context.lineTo(canvasWidth, originDistance);
         }
         for (let i = 1; i < 5; i++) {
+            const markingOffsetXY = i * markingGaps * scale;
             if (orientation === 'horizontal') {
-                context.moveTo(originDistance + (i * markingGaps * scale) / 5, 0);
-                context.lineTo(originDistance + (i * markingGaps * scale) / 5, 4);
+                context.moveTo(originDistance + markingOffsetXY / 5, 0);
+                context.lineTo(originDistance + markingOffsetXY / 5, 4);
             }
             else {
-                context.moveTo(0, originDistance + (i * markingGaps * scale) / 5);
-                context.lineTo(4, originDistance + (i * markingGaps * scale) / 5);
+                context.moveTo(0, originDistance + markingOffsetXY / 5);
+                context.lineTo(4, originDistance + markingOffsetXY / 5);
             }
         }
         context.stroke();
         context.font = '10px Arial, Helvetica, sans-serif';
         context.textAlign = 'left';
-        context.fillStyle = '#dbe3e8';
-        if (orientation === 'horizontal') {
-            context.fillText(point.value.toString().split('').join(String.fromCharCode(8202)), originDistance + 4, 16);
-        }
-        else {
-            context.rotate(-Math.PI / 2);
-            context.fillText(point.value.toString().split('').join(String.fromCharCode(8202)), -originDistance + 4, 16);
-            context.rotate(Math.PI / 2);
-        }
+        context.fillStyle = colors_1.RULER_COLOR;
+        drawLabel({
+            orientation,
+            context,
+            label: point.value.toString(),
+            originDistance,
+            color: colors_1.RULER_COLOR,
+        });
     });
+    if (selectedGuide && orientation !== selectedGuide.orientation) {
+        (0, exports.drawGuide)({
+            canvasHeight,
+            canvasWidth,
+            context,
+            orientation,
+            originOffset,
+            scale,
+            selectedGuide,
+            startMarking,
+        });
+    }
 };
 exports.drawMarkingOnRulerCanvas = drawMarkingOnRulerCanvas;
 const getRulerPoints = ({ rulerScaleRange, rulerMarkingGaps, scale, }) => {
     const points = [];
     const startPoint = Math.ceil(rulerScaleRange.start / rulerMarkingGaps);
     const endPoint = Math.floor(rulerScaleRange.end / rulerMarkingGaps);
+    const startMarking = startPoint * rulerMarkingGaps;
     for (let i = startPoint; i <= endPoint; i++) {
         points.push({
             value: i * rulerMarkingGaps,
-            position: (i * rulerMarkingGaps + startPoint * rulerMarkingGaps) * scale,
+            position: (0, exports.rulerValueToPosition)({
+                scale,
+                startMarking,
+                value: i * rulerMarkingGaps,
+            }),
         });
     }
     return {
         points,
-        startMarking: startPoint * rulerMarkingGaps,
+        startMarking,
     };
 };
 exports.getRulerPoints = getRulerPoints;
+const rulerValueToPosition = ({ value, startMarking, scale, }) => {
+    return (value + startMarking) * scale;
+};
+exports.rulerValueToPosition = rulerValueToPosition;
 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) ||

package/dist/editor/helpers/presets-labels.d.ts

@@ -1,2 +1,2 @@
 import type { X264Preset } from '@remotion/renderer';
-export declare const labelx264Preset: (profile: X264Preset) => "ultrafast" | "superfast" | "veryfast" | "faster" | "fast" | "medium" | "slow" | "slower" | "veryslow" | "placebo";
+export declare const labelx264Preset: (profile: X264Preset) => "medium" | "ultrafast" | "superfast" | "veryfast" | "faster" | "fast" | "slow" | "slower" | "veryslow" | "placebo";

package/dist/editor/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/dist/editor/helpers/use-keybinding.js

@@ -5,6 +5,7 @@ const react_1 = require("react");
 const keybindings_1 = require("../state/keybindings");
 const z_index_1 = require("../state/z-index");
 if (!process.env.KEYBOARD_SHORTCUTS_ENABLED) {
+    // eslint-disable-next-line no-console
     console.warn('Keyboard shortcuts disabled either due to: a) --disable-keyboard-shortcuts being passed b) Config.setKeyboardShortcutsEnabled(false) being set or c) a Remotion version mismatch.');
 }
 const areKeyboardShortcutsDisabled = () => {

package/dist/editor/helpers/use-menu-structure.js

@@ -13,6 +13,8 @@ const TimelineInOutToggle_1 = require("../components/TimelineInOutToggle");
 const Checkmark_1 = require("../icons/Checkmark");
 const canvas_ref_1 = require("../state/canvas-ref");
 const checkerboard_1 = require("../state/checkerboard");
+const editor_guides_1 = require("../state/editor-guides");
+const editor_rulers_1 = require("../state/editor-rulers");
 const editor_zoom_gestures_1 = require("../state/editor-zoom-gestures");
 const modals_1 = require("../state/modals");
 const preview_size_1 = require("../state/preview-size");
@@ -33,6 +35,8 @@ const useMenuStructure = (closeMenu) => {
     const { setSelectedModal } = (0, react_1.useContext)(modals_1.ModalsContext);
     const { checkerboard, setCheckerboard } = (0, react_1.useContext)(checkerboard_1.CheckerboardContext);
     const { editorZoomGestures, setEditorZoomGestures } = (0, react_1.useContext)(editor_zoom_gestures_1.EditorZoomGesturesContext);
+    const { editorShowRulers, setEditorShowRulers } = (0, react_1.useContext)(editor_rulers_1.EditorShowRulersContext);
+    const { editorShowGuides, setEditorShowGuides } = (0, react_1.useContext)(editor_guides_1.EditorShowGuidesContext);
     const { size, setSize } = (0, react_1.useContext)(preview_size_1.PreviewSizeContext);
     const { type } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
     const { setSidebarCollapsedState, sidebarCollapsedStateLeft, sidebarCollapsedStateRight, } = (0, react_1.useContext)(sidebar_1.SidebarContext);
@@ -178,6 +182,7 @@ const useMenuStructure = (closeMenu) => {
                                     }
                                 })
                                     .catch((err) => {
+                                    // eslint-disable-next-line no-console
                                     console.error(err);
                                     (0, NotificationCenter_1.sendErrorNotification)(`Could not open ${window.remotion_editorName}`);
                                 });
@@ -242,6 +247,38 @@ const useMenuStructure = (closeMenu) => {
                             ? 'Disable Zoom and Pan Gestures'
                             : 'Enable Zoom and Pan Gestures',
                     },
+                    {
+                        id: 'show-rulers',
+                        keyHint: null,
+                        label: 'Show Rulers',
+                        onClick: () => {
+                            closeMenu();
+                            setEditorShowRulers((c) => !c);
+                        },
+                        type: 'item',
+                        value: 'show-ruler',
+                        leftItem: editorShowRulers ? (0, jsx_runtime_1.jsx)(Checkmark_1.Checkmark, {}) : null,
+                        subMenu: null,
+                        quickSwitcherLabel: editorShowRulers
+                            ? 'Hide Rulers'
+                            : 'Show Rulers',
+                    },
+                    {
+                        id: 'show-guides',
+                        keyHint: null,
+                        label: 'Show Guides',
+                        onClick: () => {
+                            closeMenu();
+                            setEditorShowGuides((c) => !c);
+                        },
+                        type: 'item',
+                        value: 'show-guides',
+                        leftItem: editorShowGuides ? (0, jsx_runtime_1.jsx)(Checkmark_1.Checkmark, {}) : null,
+                        subMenu: null,
+                        quickSwitcherLabel: editorShowGuides
+                            ? 'Hide Guides'
+                            : 'Show Guides',
+                    },
                     {
                         id: 'timeline-divider-1',
                         type: 'divider',
@@ -671,6 +708,10 @@ const useMenuStructure = (closeMenu) => {
         setEditorZoomGestures,
         setSidebarCollapsedState,
         setCheckerboard,
+        editorShowRulers,
+        setEditorShowRulers,
+        editorShowGuides,
+        setEditorShowGuides,
     ]);
     return structure;
 };
@@ -706,7 +747,7 @@ const itemToSearchResult = (item, setSelectedModal, prefixes) => {
             id: item.id,
             onSelected: () => {
                 setSelectedModal(null);
-                item.onClick(item.id);
+                item.onClick(item.id, null);
             },
             title: [...prefixes, getItemLabel(item)].join(': '),
         },

package/dist/editor/helpers/use-studio-canvas-dimensions.d.ts

@@ -0,0 +1,16 @@
+import type { Size } from '@remotion/player';
+import type { AssetMetadata } from './get-asset-metadata';
+import type { Dimensions } from './is-current-selected-still';
+export declare const useStudioCanvasDimensions: ({ canvasSize, contentDimensions, assetMetadata, }: {
+    canvasSize: Size | null;
+    contentDimensions: Dimensions | 'none' | null;
+    assetMetadata: AssetMetadata | null;
+}) => {
+    canvasDimensions: {
+        left: number;
+        top: number;
+        width: number;
+        height: number;
+    };
+    scale: number;
+};

package/dist/editor/helpers/use-studio-canvas-dimensions.js

@@ -0,0 +1,59 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useStudioCanvasDimensions = void 0;
+const player_1 = require("@remotion/player");
+const react_1 = require("react");
+const preview_size_1 = require("../state/preview-size");
+const useStudioCanvasDimensions = ({ canvasSize, contentDimensions, assetMetadata, }) => {
+    const { size: previewSize } = (0, react_1.useContext)(preview_size_1.PreviewSizeContext);
+    const { centerX, centerY, scale } = (0, react_1.useMemo)(() => {
+        if (contentDimensions === 'none' ||
+            contentDimensions === null ||
+            (assetMetadata && assetMetadata.type === 'not-found') ||
+            !canvasSize) {
+            return {
+                centerX: previewSize.translation.x,
+                centerY: previewSize.translation.y,
+                scale: 1,
+            };
+        }
+        return player_1.PlayerInternals.calculateCanvasTransformation({
+            canvasSize,
+            compositionHeight: contentDimensions.height,
+            compositionWidth: contentDimensions.width,
+            previewSize: previewSize.size,
+        });
+    }, [
+        canvasSize,
+        contentDimensions,
+        previewSize.size,
+        previewSize.translation.y,
+        previewSize.translation.x,
+        assetMetadata,
+    ]);
+    const canvasDimensions = (0, react_1.useMemo)(() => {
+        return {
+            left: centerX - previewSize.translation.x,
+            top: centerY - previewSize.translation.y,
+            width: contentDimensions === 'none' || !contentDimensions
+                ? (canvasSize === null || canvasSize === void 0 ? void 0 : canvasSize.width) || 0
+                : contentDimensions.width * scale,
+            height: contentDimensions === 'none' || !contentDimensions
+                ? (canvasSize === null || canvasSize === void 0 ? void 0 : canvasSize.height) || 0
+                : contentDimensions.height * scale,
+        };
+    }, [
+        scale,
+        centerX,
+        previewSize.translation.x,
+        previewSize.translation.y,
+        centerY,
+        canvasSize,
+        contentDimensions,
+    ]);
+    return {
+        canvasDimensions,
+        scale,
+    };
+};
+exports.useStudioCanvasDimensions = useStudioCanvasDimensions;

package/dist/editor/icons/Checkmark.d.ts

@@ -1 +1,2 @@
+/// <reference types="react" />
 export declare const Checkmark: () => JSX.Element;

package/dist/editor/state/editor-guides.d.ts

@@ -1,9 +1,25 @@
 /// <reference types="react" />
-type State = {
+export type Guide = {
+    orientation: 'horizontal' | 'vertical';
+    position: number;
+    show: boolean;
+    id: string;
+    compositionId: string;
+};
+export type GuideState = {
     editorShowGuides: boolean;
     setEditorShowGuides: (cb: (prevState: boolean) => boolean) => void;
+    guidesList: Guide[];
+    setGuidesList: (cb: (prevState: Guide[]) => Guide[]) => void;
+    selectedGuideId: string | null;
+    setSelectedGuideId: (cb: (prevState: string | null) => string | null) => void;
+    setHoveredGuideId: (cb: (prevState: string | null) => string | null) => void;
+    hoveredGuideId: string | null;
+    shouldCreateGuideRef: React.MutableRefObject<boolean>;
+    shouldDeleteGuideRef: React.MutableRefObject<boolean>;
 };
 export declare const persistEditorShowGuidesOption: (option: boolean) => void;
 export declare const loadEditorShowGuidesOption: () => boolean;
-export declare const EditorShowGuidesContext: import("react").Context<State>;
-export {};
+export declare const persistGuidesList: (guides: Guide[]) => void;
+export declare const loadGuidesList: () => Guide[];
+export declare const EditorShowGuidesContext: import("react").Context<GuideState>;

package/dist/editor/state/editor-guides.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.EditorShowGuidesContext = exports.loadEditorShowGuidesOption = exports.persistEditorShowGuidesOption = void 0;
+exports.EditorShowGuidesContext = exports.loadGuidesList = exports.persistGuidesList = exports.loadEditorShowGuidesOption = exports.persistEditorShowGuidesOption = void 0;
 const react_1 = require("react");
 const persistEditorShowGuidesOption = (option) => {
     localStorage.setItem('remotion.editorShowGuides', String(option));
@@ -11,7 +11,24 @@ const loadEditorShowGuidesOption = () => {
     return item === 'true';
 };
 exports.loadEditorShowGuidesOption = loadEditorShowGuidesOption;
+const persistGuidesList = (guides) => {
+    localStorage.setItem('remotion.guidesList', JSON.stringify(guides));
+};
+exports.persistGuidesList = persistGuidesList;
+const loadGuidesList = () => {
+    const item = localStorage.getItem('remotion.guidesList');
+    return item ? JSON.parse(item) : [];
+};
+exports.loadGuidesList = loadGuidesList;
 exports.EditorShowGuidesContext = (0, react_1.createContext)({
-    editorShowGuides: (0, exports.loadEditorShowGuidesOption)(),
+    editorShowGuides: false,
     setEditorShowGuides: () => undefined,
+    guidesList: [],
+    setGuidesList: () => undefined,
+    selectedGuideId: null,
+    setSelectedGuideId: () => undefined,
+    shouldCreateGuideRef: { current: false },
+    shouldDeleteGuideRef: { current: false },
+    hoveredGuideId: null,
+    setHoveredGuideId: () => undefined,
 });

package/dist/get-cli-options.d.ts

@@ -17,7 +17,7 @@ export declare const getCliOptions: (options: {
     crf: import("@remotion/renderer").Crf | null;
     pixelFormat: "yuv420p" | "yuva420p" | "yuv422p" | "yuv444p" | "yuv420p10le" | "yuv422p10le" | "yuv444p10le" | "yuva444p10le";
     proResProfile: "4444-xq" | "4444" | "hq" | "standard" | "light" | "proxy" | undefined;
-    x264Preset: "ultrafast" | "superfast" | "veryfast" | "faster" | "fast" | "medium" | "slow" | "slower" | "veryslow" | "placebo" | undefined;
+    x264Preset: "medium" | "ultrafast" | "superfast" | "veryfast" | "faster" | "fast" | "slow" | "slower" | "veryslow" | "placebo" | undefined;
     everyNthFrame: number;
     numberOfGifLoops: import("./config/number-of-gif-loops").Loop;
     stillFrame: number;
@@ -34,7 +34,7 @@ export declare const getCliOptions: (options: {
     videoBitrate: string | null;
     height: number | null;
     width: number | null;
-    configFileImageFormat: "png" | "jpeg" | "none" | undefined;
+    configFileImageFormat: "none" | "png" | "jpeg" | undefined;
     offthreadVideoCacheSizeInBytes: number | null;
     deleteAfter: ("1-day" | "3-days" | "7-days" | "30-days") | null;
     colorSpace: "default" | "bt709";

package/dist/index.d.ts

@@ -87,7 +87,7 @@ export declare const CliInternals: {
         crf: import("@remotion/renderer").Crf | null;
         pixelFormat: "yuv420p" | "yuva420p" | "yuv422p" | "yuv444p" | "yuv420p10le" | "yuv422p10le" | "yuv444p10le" | "yuva444p10le";
         proResProfile: "4444-xq" | "4444" | "hq" | "standard" | "light" | "proxy" | undefined;
-        x264Preset: "ultrafast" | "superfast" | "veryfast" | "faster" | "fast" | "medium" | "slow" | "slower" | "veryslow" | "placebo" | undefined;
+        x264Preset: "medium" | "ultrafast" | "superfast" | "veryfast" | "faster" | "fast" | "slow" | "slower" | "veryslow" | "placebo" | undefined;
         everyNthFrame: number;
         numberOfGifLoops: import("./config/number-of-gif-loops").Loop;
         stillFrame: number;
@@ -104,7 +104,7 @@ export declare const CliInternals: {
         videoBitrate: string | null;
         height: number | null;
         width: number | null;
-        configFileImageFormat: "png" | "jpeg" | "none" | undefined;
+        configFileImageFormat: "none" | "png" | "jpeg" | undefined;
         offthreadVideoCacheSizeInBytes: number | null;
         deleteAfter: ("1-day" | "3-days" | "7-days" | "30-days") | null;
         colorSpace: "default" | "bt709";
@@ -116,9 +116,9 @@ export declare const CliInternals: {
     parsedCli: {
         "browser-executable": import("@remotion/renderer").BrowserExecutable;
         "pixel-format": "yuv420p" | "yuva420p" | "yuv422p" | "yuv444p" | "yuv420p10le" | "yuv422p10le" | "yuv444p10le" | "yuva444p10le";
-        "image-format": "png" | "jpeg" | "pdf" | "webp" | "none";
+        "image-format": "none" | "png" | "jpeg" | "pdf" | "webp";
         "prores-profile": "4444-xq" | "4444" | "hq" | "standard" | "light" | "proxy";
-        "x264-preset": "ultrafast" | "superfast" | "veryfast" | "faster" | "fast" | "medium" | "slow" | "slower" | "veryslow" | "placebo";
+        "x264-preset": "medium" | "ultrafast" | "superfast" | "veryfast" | "faster" | "fast" | "slow" | "slower" | "veryslow" | "placebo";
         "bundle-cache": string;
         "env-file": string;
         "ignore-certificate-errors": string;
@@ -187,7 +187,7 @@ export declare const CliInternals: {
         downloadName: string | null;
         outName: string | null;
         configImageFormat: "png" | "jpeg" | "pdf" | "webp" | null;
-        cliFlag: "png" | "jpeg" | "pdf" | "webp" | "none" | null;
+        cliFlag: "none" | "png" | "jpeg" | "pdf" | "webp" | null;
         isLambda: boolean;
         fromUi: "png" | "jpeg" | "pdf" | "webp" | null;
     }) => {
@@ -202,8 +202,8 @@ export declare const CliInternals: {
     };
     getVideoImageFormat: ({ codec, uiImageFormat, }: {
         codec: import("@remotion/renderer").CodecOrUndefined;
-        uiImageFormat: "png" | "jpeg" | "none" | null;
-    }) => "png" | "jpeg" | "none";
+        uiImageFormat: "none" | "png" | "jpeg" | null;
+    }) => "none" | "png" | "jpeg";
     printCompositions: (compositions: import("remotion").VideoConfig[]) => void;
     getFinalOutputCodec: ({ cliFlag, configFile, downloadName, outName, uiCodec, compositionCodec, }: {
         cliFlag: import("@remotion/renderer").CodecOrUndefined;

package/dist/preview-server/dev-middleware/range-parser.d.ts

@@ -11,5 +11,5 @@ type Range = {
 type Ranges = Range[] & {
     type?: string;
 };
-export declare function parseRange(size: number, str: string | string[]): -1 | Ranges | -2;
+export declare function parseRange(size: number, str: string | string[]): -1 | -2 | Ranges;
 export {};