@remotion/cli 4.0.62 → 4.0.63

package/dist/better-opn/index.d.ts

@@ -1,5 +1,3 @@
-/// <reference types="node" />
-/// <reference types="bun-types" />
 export declare const openBrowser: ({ url, browserFlag, browserArgs, }: {
     url: string;
     browserFlag: string | undefined;

package/dist/config/image-format.d.ts

@@ -2,4 +2,4 @@ import type { StillImageFormat, VideoImageFormat } from '@remotion/renderer';
 export declare const setStillImageFormat: (format: StillImageFormat) => void;
 export declare const setVideoImageFormat: (format: VideoImageFormat) => void;
 export declare const getUserPreferredStillImageFormat: () => "png" | "jpeg" | "pdf" | "webp" | undefined;
-export declare const getUserPreferredVideoImageFormat: () => "none" | "png" | "jpeg" | undefined;
+export declare const getUserPreferredVideoImageFormat: () => "png" | "jpeg" | "none" | undefined;

package/dist/config/index.d.ts

@@ -307,7 +307,7 @@ export declare const ConfigInternals: {
     getBrowser: () => null;
     getPixelFormat: () => "yuv420p" | "yuva420p" | "yuv422p" | "yuv444p" | "yuv420p10le" | "yuv422p10le" | "yuv444p10le" | "yuva444p10le";
     getProResProfile: () => "4444-xq" | "4444" | "hq" | "standard" | "light" | "proxy" | undefined;
-    getPresetProfile: () => "medium" | "ultrafast" | "superfast" | "veryfast" | "faster" | "fast" | "slow" | "slower" | "veryslow" | "placebo" | undefined;
+    getPresetProfile: () => "ultrafast" | "superfast" | "veryfast" | "faster" | "fast" | "medium" | "slow" | "slower" | "veryslow" | "placebo" | undefined;
     getShouldOverwrite: ({ defaultValue, }: {
         defaultValue: boolean;
     }) => boolean;
@@ -329,7 +329,7 @@ export declare const ConfigInternals: {
     getShouldOutputImageSequence: (frameRange: FrameRange | null) => boolean;
     getDotEnvLocation: () => string | null;
     getUserPreferredStillImageFormat: () => "png" | "jpeg" | "pdf" | "webp" | undefined;
-    getUserPreferredVideoImageFormat: () => "none" | "png" | "jpeg" | undefined;
+    getUserPreferredVideoImageFormat: () => "png" | "jpeg" | "none" | undefined;
     getWebpackOverrideFn: () => WebpackOverrideFn;
     getWebpackCaching: () => boolean;
     getOutputLocation: () => string | null;

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

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

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

@@ -0,0 +1,16 @@
+import React from 'react';
+interface Point {
+    value: number;
+    position: number;
+}
+interface RulerProps {
+    scale: number;
+    points: Point[];
+    originOffset: number;
+    startMarking: number;
+    containerRef: React.RefObject<HTMLDivElement>;
+    markingGaps: number;
+    orientation: 'horizontal' | 'vertical';
+}
+declare const Ruler: React.FC<RulerProps>;
+export default Ruler;

package/dist/editor/components/EditorRuler/Ruler.js

@@ -0,0 +1,40 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const editor_ruler_1 = require("../../helpers/editor-ruler");
+const editor_rulers_1 = require("../../state/editor-rulers");
+const Ruler = ({ scale, points, originOffset, startMarking, containerRef, markingGaps, orientation, }) => {
+    var _a, _b, _c, _d;
+    const rulerCanvasRef = (0, react_1.useRef)(null);
+    (0, react_1.useEffect)(() => {
+        (0, editor_ruler_1.drawMarkingOnRulerCanvas)({
+            scale,
+            points,
+            startMarking,
+            originOffset,
+            markingGaps,
+            orientation,
+            rulerCanvasRef,
+        });
+    }, [scale, points, startMarking, originOffset, markingGaps, orientation]);
+    const canvasContainerWidth = ((_b = (_a = containerRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect()) === null || _b === void 0 ? void 0 : _b.width) || 0;
+    const canvasContainerHeight = ((_d = (_c = containerRef.current) === null || _c === void 0 ? void 0 : _c.getBoundingClientRect()) === null || _d === void 0 ? void 0 : _d.height) || 0;
+    const rulerWidth = orientation === 'horizontal' ? canvasContainerWidth : editor_rulers_1.RULER_WIDTH;
+    const rulerHeight = orientation === 'horizontal' ? editor_rulers_1.RULER_WIDTH : canvasContainerHeight;
+    const rulerStyle = (0, react_1.useMemo)(() => ({
+        position: 'absolute',
+        background: '#000000',
+        width: `${rulerWidth}px`,
+        height: `${rulerHeight}px`,
+        ...(orientation === 'vertical'
+            ? {
+                left: 0,
+            }
+            : {
+                top: 0,
+            }),
+    }), [orientation, rulerWidth, rulerHeight]);
+    return ((0, jsx_runtime_1.jsx)("canvas", { ref: rulerCanvasRef, width: rulerWidth * devicePixelRatio, height: rulerHeight * devicePixelRatio, style: rulerStyle }));
+};
+exports.default = Ruler;

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

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

package/dist/editor/components/EditorRuler/index.js

@@ -0,0 +1,98 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.EditorRulers = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const player_1 = require("@remotion/player");
+const react_1 = require("react");
+const editor_ruler_1 = require("../../helpers/editor-ruler");
+const editor_rulers_1 = require("../../state/editor-rulers");
+const preview_size_1 = require("../../state/preview-size");
+const Ruler_1 = __importDefault(require("./Ruler"));
+const originBlockStyles = {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    borderBottom: '1px solid #444444',
+    borderRight: '1px solid #444444',
+    width: `${editor_rulers_1.RULER_WIDTH}px`,
+    height: `${editor_rulers_1.RULER_WIDTH}px`,
+    background: '#000000',
+};
+const EditorRulers = ({ contentDimensions, canvasSize, assetMetadata, containerRef }) => {
+    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,
+    ]);
+    const rulerMarkingGaps = (0, react_1.useMemo)(() => {
+        const minimumGap = editor_rulers_1.MINIMUM_RULER_MARKING_GAP_PX;
+        const predefinedGap = editor_rulers_1.PREDEFINED_RULER_SCALE_GAPS.find((gap) => gap * scale > minimumGap);
+        return predefinedGap || editor_rulers_1.MAXIMUM_PREDEFINED_RULER_SCALE_GAP;
+    }, [scale]);
+    const horizontalRulerScaleRange = (0, react_1.useMemo)(() => (0, editor_ruler_1.getRulerScaleRange)({
+        canvasLength: canvasDimensions.width,
+        containerRef,
+        scale,
+    }), [canvasDimensions.width, containerRef, scale]);
+    const verticalRulerScaleRange = (0, react_1.useMemo)(() => (0, editor_ruler_1.getRulerScaleRange)({
+        canvasLength: canvasDimensions.height,
+        containerRef,
+        scale,
+    }), [canvasDimensions.height, containerRef, scale]);
+    const { points: horizontalRulerPoints, startMarking: horizontalRulerStartMarking, } = (0, react_1.useMemo)(() => (0, editor_ruler_1.getRulerPoints)({
+        rulerScaleRange: horizontalRulerScaleRange,
+        rulerMarkingGaps,
+        scale,
+    }), [horizontalRulerScaleRange, rulerMarkingGaps, scale]);
+    const { points: verticalRulerPoints, startMarking: verticalRulerStartMarking } = (0, react_1.useMemo)(() => (0, editor_ruler_1.getRulerPoints)({
+        rulerScaleRange: verticalRulerScaleRange,
+        rulerMarkingGaps,
+        scale,
+    }), [verticalRulerScaleRange, rulerMarkingGaps, scale]);
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { style: originBlockStyles }), (0, jsx_runtime_1.jsx)(Ruler_1.default, { orientation: "horizontal", scale: scale, points: horizontalRulerPoints, startMarking: horizontalRulerStartMarking, containerRef: containerRef, markingGaps: rulerMarkingGaps, originOffset: canvasDimensions.left }), (0, jsx_runtime_1.jsx)(Ruler_1.default, { orientation: "vertical", scale: scale, points: verticalRulerPoints, startMarking: verticalRulerStartMarking, containerRef: containerRef, markingGaps: rulerMarkingGaps, originOffset: canvasDimensions.top })] }));
+};
+exports.EditorRulers = EditorRulers;

package/dist/editor/components/NewComposition/NewCompCode.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export declare const getNewCompositionCode: ({ type, height, width, fps, durationInFrames, name, raw, }: {
     type: 'still' | 'composition';
     height: number;

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

@@ -13,5 +13,5 @@ export declare const getInputBorderColor: ({ status, isFocused, isHovered, }: {
     isFocused: boolean;
     isHovered: boolean;
 }) => "hsla(0, 0%, 100%, 0.15)" | "rgba(0, 0, 0, 0.6)" | "rgba(255, 255, 255, 0.05)" | "#ff3232" | "#f1c40f";
-export declare const RemotionInput: React.ForwardRefExoticComponent<Pick<Props, "key" | keyof React.InputHTMLAttributes<HTMLInputElement> | "status" | "rightAlign"> & React.RefAttributes<HTMLInputElement>>;
+export declare const RemotionInput: React.ForwardRefExoticComponent<Pick<Props, "key" | "status" | "rightAlign" | keyof React.InputHTMLAttributes<HTMLInputElement>> & React.RefAttributes<HTMLInputElement>>;
 export {};

package/dist/editor/components/NewComposition/RemInputTypeColor.d.ts

@@ -4,5 +4,5 @@ type Props = React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>
     status: RemInputStatus;
     name: string;
 };
-export declare const RemInputTypeColor: React.ForwardRefExoticComponent<Pick<Props, "key" | keyof React.InputHTMLAttributes<HTMLInputElement> | "status"> & React.RefAttributes<HTMLInputElement>>;
+export declare const RemInputTypeColor: React.ForwardRefExoticComponent<Pick<Props, "key" | "status" | keyof React.InputHTMLAttributes<HTMLInputElement>> & React.RefAttributes<HTMLInputElement>>;
 export {};

package/dist/editor/components/RenderModal/human-readable-codec.d.ts

@@ -1,2 +1,2 @@
 import type { Codec } from '@remotion/renderer';
-export declare const humanReadableCodec: (codec: Codec) => "AAC" | "MP3" | "GIF" | "H.264" | "H.264 Matroska" | "H.265" | "ProRes" | "WebM VP8" | "WebM VP9" | "Waveform" | undefined;
+export declare const humanReadableCodec: (codec: Codec) => "GIF" | "AAC" | "MP3" | "H.264" | "H.264 Matroska" | "H.265" | "ProRes" | "WebM VP8" | "WebM VP9" | "Waveform" | undefined;

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

@@ -0,0 +1,4 @@
+import React from 'react';
+export declare const ShowGuidesProvider: React.FC<{
+    children: React.ReactNode;
+}>;

package/dist/editor/components/ShowGuidesProvider.js

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ShowGuidesProvider = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const editor_guides_1 = require("../state/editor-guides");
+const ShowGuidesProvider = ({ children }) => {
+    const [editorShowGuides, setEditorShowGuidesState] = (0, react_1.useState)(() => (0, editor_guides_1.loadEditorShowGuidesOption)());
+    const setEditorShowGuides = (0, react_1.useCallback)((newValue) => {
+        setEditorShowGuidesState((prevState) => {
+            const newVal = newValue(prevState);
+            (0, editor_guides_1.persistEditorShowGuidesOption)(newVal);
+            return newVal;
+        });
+    }, []);
+    const editorShowGuidesCtx = (0, react_1.useMemo)(() => {
+        return {
+            editorShowGuides,
+            setEditorShowGuides,
+        };
+    }, [editorShowGuides, setEditorShowGuides]);
+    return ((0, jsx_runtime_1.jsx)(editor_guides_1.EditorShowGuidesContext.Provider, { value: editorShowGuidesCtx, children: children }));
+};
+exports.ShowGuidesProvider = ShowGuidesProvider;

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

@@ -0,0 +1,4 @@
+import React from 'react';
+export declare const ShowRulersProvider: React.FC<{
+    children: React.ReactNode;
+}>;

package/dist/editor/components/ShowRulersProvider.js

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ShowRulersProvider = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const editor_rulers_1 = require("../state/editor-rulers");
+const ShowRulersProvider = ({ children }) => {
+    const [editorShowRulers, setEditorShowRulersState] = (0, react_1.useState)(() => (0, editor_rulers_1.loadEditorShowRulersOption)());
+    const setEditorShowRulers = (0, react_1.useCallback)((newValue) => {
+        setEditorShowRulersState((prevState) => {
+            const newVal = newValue(prevState);
+            (0, editor_rulers_1.persistEditorShowRulersOption)(newVal);
+            return newVal;
+        });
+    }, []);
+    const editorShowRulersCtx = (0, react_1.useMemo)(() => {
+        return {
+            editorShowRulers,
+            setEditorShowRulers,
+        };
+    }, [editorShowRulers, setEditorShowRulers]);
+    return ((0, jsx_runtime_1.jsx)(editor_rulers_1.EditorShowRulersContext.Provider, { value: editorShowRulersCtx, children: children }));
+};
+exports.ShowRulersProvider = ShowRulersProvider;

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

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

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

@@ -1,2 +1,8 @@
-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

@@ -0,0 +1,34 @@
+export declare const drawMarkingOnRulerCanvas: ({ scale, points, startMarking, originOffset, markingGaps, orientation, rulerCanvasRef, }: {
+    scale: number;
+    points: Array<{
+        position: number;
+        value: number;
+    }>;
+    startMarking: number;
+    originOffset: number;
+    markingGaps: number;
+    orientation: 'horizontal' | 'vertical';
+    rulerCanvasRef: React.RefObject<HTMLCanvasElement>;
+}) => 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 getRulerScaleRange: ({ canvasLength, containerRef, scale, }: {
+    canvasLength: number;
+    containerRef: React.RefObject<HTMLDivElement>;
+    scale: number;
+}) => {
+    start: number;
+    end: number;
+};

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

@@ -0,0 +1,84 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getRulerScaleRange = exports.getRulerPoints = exports.drawMarkingOnRulerCanvas = void 0;
+const editor_rulers_1 = require("../state/editor-rulers");
+const drawMarkingOnRulerCanvas = ({ scale, points, startMarking, originOffset, markingGaps, orientation, rulerCanvasRef, }) => {
+    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 = '#dbe3e8';
+    context.lineWidth = 1;
+    context.beginPath();
+    context.strokeStyle = '#dbe3e8';
+    context.lineWidth = 1;
+    points.forEach((point) => {
+        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++) {
+            if (orientation === 'horizontal') {
+                context.moveTo(originDistance + (i * markingGaps * scale) / 5, 0);
+                context.lineTo(originDistance + (i * markingGaps * scale) / 5, 4);
+            }
+            else {
+                context.moveTo(0, originDistance + (i * markingGaps * scale) / 5);
+                context.lineTo(4, originDistance + (i * markingGaps * scale) / 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);
+        }
+    });
+};
+exports.drawMarkingOnRulerCanvas = drawMarkingOnRulerCanvas;
+const getRulerPoints = ({ rulerScaleRange, rulerMarkingGaps, scale, }) => {
+    const points = [];
+    const startPoint = Math.ceil(rulerScaleRange.start / rulerMarkingGaps);
+    const endPoint = Math.floor(rulerScaleRange.end / rulerMarkingGaps);
+    for (let i = startPoint; i <= endPoint; i++) {
+        points.push({
+            value: i * rulerMarkingGaps,
+            position: (i * rulerMarkingGaps + startPoint * rulerMarkingGaps) * scale,
+        });
+    }
+    return {
+        points,
+        startMarking: startPoint * rulerMarkingGaps,
+    };
+};
+exports.getRulerPoints = getRulerPoints;
+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/presets-labels.d.ts

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

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

@@ -1,4 +1,3 @@
-/// <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/icons/Checkmark.d.ts

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

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

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+type State = {
+    editorShowGuides: boolean;
+    setEditorShowGuides: (cb: (prevState: boolean) => boolean) => void;
+};
+export declare const persistEditorShowGuidesOption: (option: boolean) => void;
+export declare const loadEditorShowGuidesOption: () => boolean;
+export declare const EditorShowGuidesContext: import("react").Context<State>;
+export {};

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

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.EditorShowGuidesContext = 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;
+exports.EditorShowGuidesContext = (0, react_1.createContext)({
+    editorShowGuides: (0, exports.loadEditorShowGuidesOption)(),
+    setEditorShowGuides: () => 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

@@ -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: "medium" | "ultrafast" | "superfast" | "veryfast" | "faster" | "fast" | "slow" | "slower" | "veryslow" | "placebo" | undefined;
+    x264Preset: "ultrafast" | "superfast" | "veryfast" | "faster" | "fast" | "medium" | "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: "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

@@ -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: "medium" | "ultrafast" | "superfast" | "veryfast" | "faster" | "fast" | "slow" | "slower" | "veryslow" | "placebo" | undefined;
+        x264Preset: "ultrafast" | "superfast" | "veryfast" | "faster" | "fast" | "medium" | "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: "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,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": "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";
+        "x264-preset": "ultrafast" | "superfast" | "veryfast" | "faster" | "fast" | "medium" | "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: "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/routes.d.ts

@@ -1,4 +1,3 @@
-/// <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.62",
+  "version": "4.0.63",
   "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.63",
+    "@remotion/player": "4.0.63",
+    "@remotion/media-utils": "4.0.63",
+    "@remotion/renderer": "4.0.63",
+    "remotion": "4.0.63"
   },
   "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.63",
+    "@remotion/tailwind": "4.0.63"
   },
   "keywords": [
     "remotion",