@remotion/cli 4.0.63 → 4.0.65

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/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,13 @@ 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;
+    console.log(points);
     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 +111,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-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);
@@ -242,6 +246,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 +707,10 @@ const useMenuStructure = (closeMenu) => {
         setEditorZoomGestures,
         setSidebarCollapsedState,
         setCheckerboard,
+        editorShowRulers,
+        setEditorShowRulers,
+        editorShowGuides,
+        setEditorShowGuides,
     ]);
     return structure;
 };
@@ -706,7 +746,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;

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;
@@ -118,7 +118,7 @@ export declare const CliInternals: {
         "pixel-format": "yuv420p" | "yuva420p" | "yuv422p" | "yuv444p" | "yuv420p10le" | "yuv422p10le" | "yuv444p10le" | "yuva444p10le";
         "image-format": "png" | "jpeg" | "pdf" | "webp" | "none";
         "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;

package/dist/preview-server/public-folder.js

@@ -19,7 +19,7 @@ const fetchFolder = ({ publicDir, staticHash, }) => {
         folder: '.',
         startPath: publicDir,
         staticHash,
-        limit: 1000,
+        limit: 10000,
     }).map((f) => {
         return {
             ...f,

package/dist/preview-server/routes.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="node" />
 import type { LogLevel } from '@remotion/renderer';
 import type { IncomingMessage, ServerResponse } from 'node:http';
 import type { LiveEventsServer } from './live-events';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@remotion/cli",
-  "version": "4.0.63",
+  "version": "4.0.65",
   "description": "CLI for Remotion",
   "main": "dist/index.js",
   "sideEffects": false,
@@ -35,11 +35,11 @@
     "prompts": "2.4.1",
     "semver": "7.5.3",
     "source-map": "0.6.1",
-    "@remotion/bundler": "4.0.63",
-    "@remotion/player": "4.0.63",
-    "@remotion/media-utils": "4.0.63",
-    "@remotion/renderer": "4.0.63",
-    "remotion": "4.0.63"
+    "@remotion/bundler": "4.0.65",
+    "@remotion/media-utils": "4.0.65",
+    "@remotion/renderer": "4.0.65",
+    "remotion": "4.0.65",
+    "@remotion/player": "4.0.65"
   },
   "peerDependencies": {
     "react": ">=16.8.0",
@@ -65,8 +65,8 @@
     "react-dom": "18.2.0",
     "vitest": "0.31.1",
     "zod": "^3.22.3",
-    "@remotion/zod-types": "4.0.63",
-    "@remotion/tailwind": "4.0.63"
+    "@remotion/zod-types": "4.0.65",
+    "@remotion/tailwind": "4.0.65"
   },
   "keywords": [
     "remotion",