@remotion/cli 4.0.62 → 4.0.65

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/editor-ruler.d.ts

@@ -0,0 +1,53 @@
+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;
+        value: number;
+    }>;
+    startMarking: number;
+    originOffset: number;
+    markingGaps: number;
+    orientation: 'horizontal' | 'vertical';
+    rulerCanvasRef: React.RefObject<HTMLCanvasElement>;
+    selectedGuide: Guide | null;
+}) => void;
+export declare const getRulerPoints: ({ rulerScaleRange, rulerMarkingGaps, scale, }: {
+    rulerScaleRange: {
+        start: number;
+        end: number;
+    };
+    rulerMarkingGaps: number;
+    scale: number;
+}) => {
+    points: {
+        value: number;
+        position: number;
+    }[];
+    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>;
+    scale: number;
+}) => {
+    start: number;
+    end: number;
+};
+export {};

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

@@ -0,0 +1,184 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getRulerScaleRange = exports.rulerValueToPosition = exports.getRulerPoints = exports.drawMarkingOnRulerCanvas = exports.drawGuide = void 0;
+const editor_rulers_1 = require("../state/editor-rulers");
+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;
+    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);
+    context.clearRect(0, 0, canvasWidth, canvasHeight);
+    context.strokeStyle = colors_1.RULER_COLOR;
+    context.lineWidth = 1;
+    context.beginPath();
+    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') {
+            context.moveTo(originDistance, 0);
+            context.lineTo(originDistance, canvasHeight);
+        }
+        else {
+            context.moveTo(0, originDistance);
+            context.lineTo(canvasWidth, originDistance);
+        }
+        for (let i = 1; i < 5; i++) {
+            const markingOffsetXY = i * markingGaps * scale;
+            if (orientation === 'horizontal') {
+                context.moveTo(originDistance + markingOffsetXY / 5, 0);
+                context.lineTo(originDistance + markingOffsetXY / 5, 4);
+            }
+            else {
+                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 = 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: (0, exports.rulerValueToPosition)({
+                scale,
+                startMarking,
+                value: i * rulerMarkingGaps,
+            }),
+        });
+    }
+    return {
+        points,
+        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) ||
+        editor_rulers_1.MINIMUM_VISIBLE_CANVAS_SIZE - editor_rulers_1.MINIMUM_VISIBLE_CANVAS_SIZE) / scale;
+    return {
+        start: -scaleRangeBeyondCanvas,
+        end: scaleRangeBeyondCanvas + canvasLength,
+    };
+};
+exports.getRulerScaleRange = getRulerScaleRange;

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/state/editor-guides.d.ts

@@ -0,0 +1,25 @@
+/// <reference types="react" />
+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 persistGuidesList: (guides: Guide[]) => void;
+export declare const loadGuidesList: () => Guide[];
+export declare const EditorShowGuidesContext: import("react").Context<GuideState>;

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

@@ -0,0 +1,34 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+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));
+};
+exports.persistEditorShowGuidesOption = persistEditorShowGuidesOption;
+const loadEditorShowGuidesOption = () => {
+    const item = localStorage.getItem('remotion.editorShowGuides');
+    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: false,
+    setEditorShowGuides: () => undefined,
+    guidesList: [],
+    setGuidesList: () => undefined,
+    selectedGuideId: null,
+    setSelectedGuideId: () => undefined,
+    shouldCreateGuideRef: { current: false },
+    shouldDeleteGuideRef: { current: false },
+    hoveredGuideId: null,
+    setHoveredGuideId: () => undefined,
+});

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

@@ -0,0 +1,14 @@
+/// <reference types="react" />
+type State = {
+    editorShowRulers: boolean;
+    setEditorShowRulers: (cb: (prevState: boolean) => boolean) => void;
+};
+export declare const persistEditorShowRulersOption: (option: boolean) => void;
+export declare const loadEditorShowRulersOption: () => boolean;
+export declare const EditorShowRulersContext: import("react").Context<State>;
+export declare const RULER_WIDTH = 20;
+export declare const MINIMUM_VISIBLE_CANVAS_SIZE = 50;
+export declare const PREDEFINED_RULER_SCALE_GAPS: number[];
+export declare const MAXIMUM_PREDEFINED_RULER_SCALE_GAP = 5000;
+export declare const MINIMUM_RULER_MARKING_GAP_PX = 50;
+export {};

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

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MINIMUM_RULER_MARKING_GAP_PX = exports.MAXIMUM_PREDEFINED_RULER_SCALE_GAP = exports.PREDEFINED_RULER_SCALE_GAPS = exports.MINIMUM_VISIBLE_CANVAS_SIZE = exports.RULER_WIDTH = exports.EditorShowRulersContext = exports.loadEditorShowRulersOption = exports.persistEditorShowRulersOption = void 0;
+const react_1 = require("react");
+const persistEditorShowRulersOption = (option) => {
+    localStorage.setItem('remotion.editorShowRulers', String(option));
+};
+exports.persistEditorShowRulersOption = persistEditorShowRulersOption;
+const loadEditorShowRulersOption = () => {
+    const item = localStorage.getItem('remotion.editorShowRulers');
+    return item === 'true';
+};
+exports.loadEditorShowRulersOption = loadEditorShowRulersOption;
+exports.EditorShowRulersContext = (0, react_1.createContext)({
+    editorShowRulers: (0, exports.loadEditorShowRulersOption)(),
+    setEditorShowRulers: () => undefined,
+});
+exports.RULER_WIDTH = 20;
+exports.MINIMUM_VISIBLE_CANVAS_SIZE = 50;
+exports.PREDEFINED_RULER_SCALE_GAPS = [
+    1, 2, 5, 10, 20, 50, 100, 250, 500, 1000, 2000, 5000,
+];
+exports.MAXIMUM_PREDEFINED_RULER_SCALE_GAP = 5000;
+exports.MINIMUM_RULER_MARKING_GAP_PX = 50;

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

@@ -34,7 +34,7 @@ export declare const getCliOptions: (options: {
     videoBitrate: string | null;
     height: number | null;
     width: number | null;
-    configFileImageFormat: "none" | "png" | "jpeg" | undefined;
+    configFileImageFormat: "png" | "jpeg" | "none" | undefined;
     offthreadVideoCacheSizeInBytes: number | null;
     deleteAfter: ("1-day" | "3-days" | "7-days" | "30-days") | null;
     colorSpace: "default" | "bt709";

package/dist/index.d.ts

@@ -104,7 +104,7 @@ export declare const CliInternals: {
         videoBitrate: string | null;
         height: number | null;
         width: number | null;
-        configFileImageFormat: "none" | "png" | "jpeg" | undefined;
+        configFileImageFormat: "png" | "jpeg" | "none" | undefined;
         offthreadVideoCacheSizeInBytes: number | null;
         deleteAfter: ("1-day" | "3-days" | "7-days" | "30-days") | null;
         colorSpace: "default" | "bt709";
@@ -116,7 +116,7 @@ export declare const CliInternals: {
     parsedCli: {
         "browser-executable": import("@remotion/renderer").BrowserExecutable;
         "pixel-format": "yuv420p" | "yuva420p" | "yuv422p" | "yuv444p" | "yuv420p10le" | "yuv422p10le" | "yuv444p10le" | "yuva444p10le";
-        "image-format": "none" | "png" | "jpeg" | "pdf" | "webp";
+        "image-format": "png" | "jpeg" | "pdf" | "webp" | "none";
         "prores-profile": "4444-xq" | "4444" | "hq" | "standard" | "light" | "proxy";
         "x264-preset": "medium" | "ultrafast" | "superfast" | "veryfast" | "faster" | "fast" | "slow" | "slower" | "veryslow" | "placebo";
         "bundle-cache": string;
@@ -187,7 +187,7 @@ export declare const CliInternals: {
         downloadName: string | null;
         outName: string | null;
         configImageFormat: "png" | "jpeg" | "pdf" | "webp" | null;
-        cliFlag: "none" | "png" | "jpeg" | "pdf" | "webp" | null;
+        cliFlag: "png" | "jpeg" | "pdf" | "webp" | "none" | 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: "none" | "png" | "jpeg" | null;
-    }) => "none" | "png" | "jpeg";
+        uiImageFormat: "png" | "jpeg" | "none" | null;
+    }) => "png" | "jpeg" | "none";
     printCompositions: (compositions: import("remotion").VideoConfig[]) => void;
     getFinalOutputCodec: ({ cliFlag, configFile, downloadName, outName, uiCodec, compositionCodec, }: {
         cliFlag: import("@remotion/renderer").CodecOrUndefined;

package/dist/index.js

@@ -76,7 +76,7 @@ const cli = async () => {
             await (0, studio_1.studioCommand)(remotionRoot, args, logLevel);
         }
         else if (command === 'lambda') {
-            await (0, lambda_command_1.lambdaCommand)(remotionRoot, args);
+            await (0, lambda_command_1.lambdaCommand)(remotionRoot, args, logLevel);
         }
         else if (command === 'cloudrun') {
             await (0, cloudrun_command_1.cloudrunCommand)(remotionRoot, args, logLevel);

package/dist/lambda-command.d.ts

@@ -1 +1,2 @@
-export declare const lambdaCommand: (remotionRoot: string, args: string[]) => Promise<never>;
+import type { LogLevel } from '@remotion/renderer';
+export declare const lambdaCommand: (remotionRoot: string, args: string[], logLevel: LogLevel) => Promise<never>;

package/dist/lambda-command.js

@@ -4,13 +4,13 @@ exports.lambdaCommand = void 0;
 const log_1 = require("./log");
 const get_package_manager_1 = require("./preview-server/get-package-manager");
 const update_available_1 = require("./preview-server/update-available");
-const lambdaCommand = async (remotionRoot, args) => {
+const lambdaCommand = async (remotionRoot, args, logLevel) => {
     try {
         const path = require.resolve('@remotion/lambda', {
             paths: [remotionRoot],
         });
         const { LambdaInternals } = require(path);
-        await LambdaInternals.executeCommand(args, remotionRoot);
+        await LambdaInternals.executeCommand(args, remotionRoot, logLevel);
         process.exit(0);
     }
     catch (err) {

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 | -2 | Ranges;
+export declare function parseRange(size: number, str: string | string[]): -1 | Ranges | -2;
 export {};

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@remotion/cli",
-  "version": "4.0.62",
+  "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.62",
-    "@remotion/player": "4.0.62",
-    "remotion": "4.0.62",
-    "@remotion/media-utils": "4.0.62",
-    "@remotion/renderer": "4.0.62"
+    "@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/tailwind": "4.0.62",
-    "@remotion/zod-types": "4.0.62"
+    "@remotion/zod-types": "4.0.65",
+    "@remotion/tailwind": "4.0.65"
   },
   "keywords": [
     "remotion",