@remotion/cli 4.0.111 → 4.0.113

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

@@ -0,0 +1,9 @@
+export declare const getNewCompositionCode: ({ type, height, width, fps, durationInFrames, name, raw, }: {
+    type: 'still' | 'composition';
+    height: number;
+    width: number;
+    fps: number;
+    durationInFrames: number;
+    name: string;
+    raw: boolean;
+}) => string | (string | JSX.Element | (string | JSX.Element)[])[];

package/dist/editor/components/NewComposition/NewCompCode.js

@@ -0,0 +1,67 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getNewCompositionCode = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const strColor = '#9ECBFF';
+const consColor = '#79B8FF';
+const propColor = '#B392F0';
+const keywordColor = '#F97583';
+const cssReset = {
+    fontFamily: 'monospace',
+};
+const makeProperty = (key, val, type, raw) => {
+    if (raw) {
+        return makePropertyRaw(key, val, type);
+    }
+    return [
+        `  `,
+        (0, jsx_runtime_1.jsx)("span", { style: { ...cssReset, color: propColor }, children: key }, key + 'key'),
+        (0, jsx_runtime_1.jsx)("span", { style: { ...cssReset, color: keywordColor }, children: '=' }, key + 'equal'),
+        type === 'string'
+            ? [
+                (0, jsx_runtime_1.jsxs)("span", { style: { ...cssReset, color: strColor }, children: ['"', val, '"'] }, key + 'value'),
+            ]
+            : [
+                '{',
+                (0, jsx_runtime_1.jsx)("span", { style: {
+                        ...cssReset,
+                        color: typeof val === 'number' ? consColor : strColor,
+                    }, children: val }, key + 'value'),
+                '}',
+            ],
+        (0, jsx_runtime_1.jsx)("br", {}, key + 'br'),
+    ];
+};
+const makePropertyRaw = (key, val, type) => {
+    return [
+        `  `,
+        key,
+        '=',
+        type === 'string' ? ['"' + val + '"'].join('') : ['{', val, '}'].join(''),
+        '\n',
+    ].join('');
+};
+const getNewCompositionCode = ({ type, height, width, fps, durationInFrames, name, raw, }) => {
+    const compName = type === 'still' ? 'Still' : 'Composition';
+    const props = [
+        ...makeProperty('id', name, 'string', raw),
+        ...makeProperty('component', name, 'const', raw),
+        ...(type === 'composition'
+            ? makeProperty('durationInFrames', durationInFrames, 'const', raw)
+            : []),
+        ...makeProperty('height', height, 'const', raw),
+        ...makeProperty('width', width, 'const', raw),
+        ...(type === 'composition' ? makeProperty('fps', fps, 'const', raw) : []),
+    ];
+    if (raw) {
+        return ['<', compName, '\n', ...props, '/>'].join('');
+    }
+    return [
+        `<`,
+        (0, jsx_runtime_1.jsx)("span", { style: { ...cssReset, color: '#79B8FF' }, children: compName }, "compname"),
+        (0, jsx_runtime_1.jsx)("br", {}, "linebr1"),
+        ...props,
+        '/>',
+    ];
+};
+exports.getNewCompositionCode = getNewCompositionCode;

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

@@ -0,0 +1,6 @@
+import React from 'react';
+export declare const NewCompDuration: React.FC<{
+    durationInFrames: string;
+    fps: string;
+    setDurationInFrames: React.Dispatch<React.SetStateAction<string>>;
+}>;

package/dist/editor/components/NewComposition/NewCompDuration.js

@@ -0,0 +1,23 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NewCompDuration = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const validate_new_comp_data_1 = require("../../helpers/validate-new-comp-data");
+const layout_1 = require("../layout");
+const InputDragger_1 = require("./InputDragger");
+const new_comp_layout_1 = require("./new-comp-layout");
+const ValidationMessage_1 = require("./ValidationMessage");
+const NewCompDuration = ({ durationInFrames, setDurationInFrames, fps }) => {
+    const onDurationInFramesChanged = (0, react_1.useCallback)((newValue) => {
+        setDurationInFrames(String(Number(newValue)));
+    }, [setDurationInFrames]);
+    const onDurationChangedDirectly = (0, react_1.useCallback)((newVal) => {
+        setDurationInFrames(String(newVal));
+    }, [setDurationInFrames]);
+    const compDurationErrMessage = (0, validate_new_comp_data_1.validateCompositionDuration)(durationInFrames);
+    return ((0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)("label", { children: (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: new_comp_layout_1.leftLabel, children: " Duration in frames" }), (0, jsx_runtime_1.jsxs)("div", { style: new_comp_layout_1.inputArea, children: [(0, jsx_runtime_1.jsx)(InputDragger_1.InputDragger, { type: "number", value: durationInFrames, onTextChange: onDurationInFramesChanged, placeholder: "Duration (frames)", name: "durationInFrames", min: 1, step: 1, required: true, status: "ok", 
+                                // Hitting Promise.all() limit in Chrome
+                                max: 300000, onValueChange: onDurationChangedDirectly, rightAlign: false }), compDurationErrMessage ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 1, block: true }), (0, jsx_runtime_1.jsx)(ValidationMessage_1.ValidationMessage, { align: "flex-start", message: compDurationErrMessage, type: "error" })] })) : null] }), (0, jsx_runtime_1.jsxs)("span", { style: new_comp_layout_1.rightLabel, children: [(Number(durationInFrames) / Number(fps)).toFixed(2), "sec"] })] }) }) }));
+};
+exports.NewCompDuration = NewCompDuration;

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

@@ -0,0 +1,6 @@
+import React from 'react';
+import type { CompType } from '../../state/modals';
+declare const NewComposition: React.FC<{
+    initialCompType: CompType;
+}>;
+export default NewComposition;

package/dist/editor/components/NewComposition/NewComposition.js

@@ -0,0 +1,204 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const remotion_1 = require("remotion");
+const validate_new_comp_data_1 = require("../../helpers/validate-new-comp-data");
+const Checkmark_1 = require("../../icons/Checkmark");
+const aspect_ratio_locked_1 = require("../../state/aspect-ratio-locked");
+const modals_1 = require("../../state/modals");
+const CopyButton_1 = require("../CopyButton");
+const layout_1 = require("../layout");
+const ModalContainer_1 = require("../ModalContainer");
+const ModalHeader_1 = require("../ModalHeader");
+const ComboBox_1 = require("./ComboBox");
+const CopyHint_1 = require("./CopyHint");
+const InputDragger_1 = require("./InputDragger");
+const new_comp_layout_1 = require("./new-comp-layout");
+const NewCompAspectRatio_1 = require("./NewCompAspectRatio");
+const NewCompCode_1 = require("./NewCompCode");
+const NewCompDuration_1 = require("./NewCompDuration");
+const RemInput_1 = require("./RemInput");
+const ValidationMessage_1 = require("./ValidationMessage");
+const left = {
+    padding: 12,
+    paddingBottom: 80,
+    paddingRight: 12,
+    flex: 1,
+    fontSize: 13,
+};
+const panelRight = {
+    backgroundColor: 'black',
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+    position: 'relative',
+    width: 400,
+};
+const pre = {
+    fontSize: 17,
+    fontFamily: 'monospace',
+};
+const comboBoxStyle = {
+    width: new_comp_layout_1.inputArea.width,
+};
+const copyRowStyle = {
+    position: 'absolute',
+    bottom: 10,
+    right: 0,
+    paddingRight: 10,
+    paddingLeft: 20,
+    width: '100%',
+    alignItems: 'center',
+    color: new_comp_layout_1.leftLabel.color,
+};
+const commonFrameRates = [24, 25, 29.97, 30, 48, 50];
+const NewComposition = (props) => {
+    const { initialCompType } = props;
+    const [selectedFrameRate, setFrameRate] = (0, react_1.useState)(String(commonFrameRates[0]));
+    const { compositions } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
+    const [type, setType] = (0, react_1.useState)(initialCompType);
+    const [name, setName] = (0, react_1.useState)('MyComp');
+    const [size, setSize] = (0, react_1.useState)({
+        width: '1280',
+        height: '720',
+    });
+    const panelContent = (0, react_1.useMemo)(() => {
+        return {
+            flexDirection: 'row',
+            display: 'flex',
+            width: (0, ModalContainer_1.getMaxModalWidth)(950),
+            height: type === 'composition'
+                ? (0, ModalContainer_1.getMaxModalHeight)(490)
+                : (0, ModalContainer_1.getMaxModalHeight)(340),
+            overflow: 'hidden',
+        };
+    }, [type]);
+    const [lockedAspectRatio, setLockedAspectRatio] = (0, react_1.useState)((0, aspect_ratio_locked_1.loadAspectRatioOption)() ? Number(size.width) / Number(size.height) : null);
+    const [durationInFrames, setDurationInFrames] = (0, react_1.useState)('150');
+    const setAspectRatioLocked = (0, react_1.useCallback)((option) => {
+        (0, aspect_ratio_locked_1.persistAspectRatioOption)(option);
+        setLockedAspectRatio(option ? Number(size.width) / Number(size.height) : null);
+    }, [size.height, size.width]);
+    const { setSelectedModal } = (0, react_1.useContext)(modals_1.ModalsContext);
+    const onQuit = (0, react_1.useCallback)(() => {
+        setSelectedModal(null);
+    }, [setSelectedModal]);
+    const onTypeChanged = (0, react_1.useCallback)((newType) => {
+        setType(newType);
+    }, []);
+    const onWidthChanged = (0, react_1.useCallback)((newValue) => {
+        setSize((s) => {
+            const { height } = s;
+            const newWidth = Number(newValue);
+            return {
+                height: lockedAspectRatio === null
+                    ? height
+                    : String(Math.ceil(newWidth / lockedAspectRatio / 2) * 2),
+                width: String(newWidth),
+            };
+        });
+    }, [lockedAspectRatio]);
+    const onWidthDirectlyChanged = (0, react_1.useCallback)((newWidth) => {
+        setSize((s) => {
+            const { height } = s;
+            return {
+                height: lockedAspectRatio === null
+                    ? height
+                    : String(Math.ceil(newWidth / lockedAspectRatio / 2) * 2),
+                width: String(newWidth),
+            };
+        });
+    }, [lockedAspectRatio]);
+    const onHeightDirectlyChanged = (0, react_1.useCallback)((newHeight) => {
+        setSize((s) => {
+            const { width } = s;
+            return {
+                width: lockedAspectRatio === null
+                    ? width
+                    : String(Math.ceil((newHeight / 2) * lockedAspectRatio) * 2),
+                height: String(newHeight),
+            };
+        });
+    }, [lockedAspectRatio]);
+    const onHeightChanged = (0, react_1.useCallback)((newValue) => {
+        setSize((s) => {
+            const { width } = s;
+            const newHeight = Number(newValue);
+            return {
+                width: lockedAspectRatio === null
+                    ? width
+                    : String(Math.ceil((newHeight / 2) * lockedAspectRatio) * 2),
+                height: String(newHeight),
+            };
+        });
+    }, [lockedAspectRatio]);
+    const onNameChange = (0, react_1.useCallback)((e) => {
+        setName(e.target.value);
+    }, []);
+    const onFpsChange = (0, react_1.useCallback)((newFps) => {
+        setFrameRate(String(newFps));
+    }, []);
+    const items = (0, react_1.useMemo)(() => {
+        return commonFrameRates.map((frameRate) => {
+            return {
+                id: String(frameRate),
+                label: `${frameRate}fps`,
+                onClick: () => onFpsChange(frameRate),
+                type: 'item',
+                value: frameRate,
+                keyHint: null,
+                leftItem: String(frameRate) === selectedFrameRate ? (0, jsx_runtime_1.jsx)(Checkmark_1.Checkmark, {}) : null,
+                subMenu: null,
+                quickSwitcherLabel: null,
+            };
+        });
+    }, [onFpsChange, selectedFrameRate]);
+    const compNameErrMessage = (0, validate_new_comp_data_1.validateCompositionName)(name, compositions);
+    const compWidthErrMessage = (0, validate_new_comp_data_1.validateCompositionDimension)('Width', size.width);
+    const compHeightErrMessage = (0, validate_new_comp_data_1.validateCompositionDimension)('Height', size.height);
+    const typeValues = (0, react_1.useMemo)(() => {
+        return [
+            {
+                id: 'composition',
+                keyHint: null,
+                label: '<Composition />',
+                leftItem: null,
+                onClick: () => onTypeChanged('composition'),
+                subMenu: null,
+                type: 'item',
+                value: 'composition',
+                quickSwitcherLabel: null,
+            },
+            {
+                id: 'still',
+                keyHint: null,
+                label: '<Still />',
+                leftItem: null,
+                onClick: () => onTypeChanged('still'),
+                subMenu: null,
+                type: 'item',
+                value: 'still',
+                quickSwitcherLabel: null,
+            },
+        ];
+    }, [onTypeChanged]);
+    return ((0, jsx_runtime_1.jsxs)(ModalContainer_1.ModalContainer, { onOutsideClick: onQuit, onEscape: onQuit, children: [(0, jsx_runtime_1.jsx)(ModalHeader_1.NewCompHeader, { title: "New composition" }), (0, jsx_runtime_1.jsxs)("div", { style: panelContent, children: [(0, jsx_runtime_1.jsxs)("div", { style: left, children: [(0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 3 }), (0, jsx_runtime_1.jsxs)("form", { children: [(0, jsx_runtime_1.jsxs)("label", { children: [(0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: new_comp_layout_1.leftLabel, children: "Type" }), (0, jsx_runtime_1.jsx)("div", { style: new_comp_layout_1.inputArea, children: (0, jsx_runtime_1.jsx)(ComboBox_1.Combobox, { title: "Type of composition", style: comboBoxStyle, values: typeValues, selectedId: type }) })] }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 1 }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: new_comp_layout_1.leftLabel, children: "Name" }), (0, jsx_runtime_1.jsxs)("div", { style: new_comp_layout_1.inputArea, children: [(0, jsx_runtime_1.jsx)(RemInput_1.RemotionInput, { value: name, onChange: onNameChange, type: "text", placeholder: "Composition name", status: "ok", rightAlign: false }), compNameErrMessage ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 1, block: true }), (0, jsx_runtime_1.jsx)(ValidationMessage_1.ValidationMessage, { align: "flex-start", message: compNameErrMessage, type: "error" })] })) : null] })] })] }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 1 }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)("label", { children: (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: new_comp_layout_1.leftLabel, children: "Width" }), (0, jsx_runtime_1.jsxs)("div", { style: new_comp_layout_1.inputArea, children: [(0, jsx_runtime_1.jsx)(InputDragger_1.InputDragger, { type: "number", value: size.width, placeholder: "Width", onTextChange: onWidthChanged, name: "width", step: 2, min: 2, required: true, status: "ok", formatter: (w) => `${w}px`, max: 100000000, onValueChange: onWidthDirectlyChanged, rightAlign: false }), compWidthErrMessage ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 1, block: true }), (0, jsx_runtime_1.jsx)(ValidationMessage_1.ValidationMessage, { align: "flex-start", message: compWidthErrMessage, type: "error" })] })) : null] })] }) }) }), (0, jsx_runtime_1.jsx)("div", {}), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 1 }), (0, jsx_runtime_1.jsx)("div", {}), (0, jsx_runtime_1.jsx)("label", { children: (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: new_comp_layout_1.leftLabel, children: "Height" }), (0, jsx_runtime_1.jsxs)("div", { style: new_comp_layout_1.inputArea, children: [(0, jsx_runtime_1.jsx)(InputDragger_1.InputDragger, { type: "number", value: size.height, onTextChange: onHeightChanged, placeholder: "Height", name: "height", step: 2, required: true, formatter: (h) => `${h}px`, min: 2, status: "ok", max: 100000000, onValueChange: onHeightDirectlyChanged, rightAlign: false }), compHeightErrMessage ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 1, block: true }), (0, jsx_runtime_1.jsx)(ValidationMessage_1.ValidationMessage, { align: "flex-start", message: compHeightErrMessage, type: "error" })] })) : null] })] }) })] }), (0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(NewCompAspectRatio_1.NewCompAspectRatio, { width: Number(size.width), height: Number(size.height), aspectRatioLocked: lockedAspectRatio, setAspectRatioLocked: setAspectRatioLocked }) })] }), (0, jsx_runtime_1.jsx)("div", {}), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 1 }), type === 'composition' ? ((0, jsx_runtime_1.jsx)(NewCompDuration_1.NewCompDuration, { durationInFrames: durationInFrames, fps: selectedFrameRate, setDurationInFrames: setDurationInFrames })) : null, (0, jsx_runtime_1.jsx)("div", {}), (0, jsx_runtime_1.jsx)("br", {}), (0, jsx_runtime_1.jsx)("div", {}), type === 'composition' ? ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("div", {}), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 1 }), (0, jsx_runtime_1.jsxs)("label", { children: [(0, jsx_runtime_1.jsx)("div", { style: new_comp_layout_1.leftLabel, children: "Framerate" }), (0, jsx_runtime_1.jsx)(ComboBox_1.Combobox, { title: "Framerate", style: comboBoxStyle, values: items, selectedId: selectedFrameRate })] })] })) : null] })] }), (0, jsx_runtime_1.jsxs)("div", { style: panelRight, children: [(0, jsx_runtime_1.jsx)("pre", { style: pre, children: (0, NewCompCode_1.getNewCompositionCode)({
+                                    type,
+                                    durationInFrames: Number(durationInFrames),
+                                    fps: Number(selectedFrameRate),
+                                    height: Number(size.height),
+                                    width: Number(size.width),
+                                    name,
+                                    raw: false,
+                                }) }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", style: copyRowStyle, children: [(0, jsx_runtime_1.jsx)(CopyHint_1.CopyHint, {}), (0, jsx_runtime_1.jsx)(layout_1.Flex, {}), (0, jsx_runtime_1.jsx)(CopyButton_1.CopyButton, { label: "Copy code", labelWhenCopied: "Copied!", textToCopy: (0, NewCompCode_1.getNewCompositionCode)({
+                                            type,
+                                            durationInFrames: Number(durationInFrames),
+                                            fps: Number(selectedFrameRate),
+                                            height: Number(size.height),
+                                            width: Number(size.width),
+                                            name,
+                                            raw: true,
+                                        }) })] })] }), ' '] })] }));
+};
+exports.default = NewComposition;

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

@@ -0,0 +1,17 @@
+import type { PropsWithChildren } from 'react';
+import React from 'react';
+export type RemInputStatus = 'error' | 'warning' | 'ok';
+type Props = React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement> & {
+    status: RemInputStatus;
+    rightAlign: boolean;
+};
+export declare const INPUT_HORIZONTAL_PADDING = 8;
+export declare const RightAlignInput: React.FC<PropsWithChildren>;
+export declare const inputBaseStyle: React.CSSProperties;
+export declare const getInputBorderColor: ({ status, isFocused, isHovered, }: {
+    status: 'error' | 'warning' | 'ok';
+    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, "status" | "key" | "rightAlign" | keyof React.InputHTMLAttributes<HTMLInputElement>> & React.RefAttributes<HTMLInputElement>>;
+export {};

package/dist/editor/components/NewComposition/RemInput.js

@@ -0,0 +1,74 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RemotionInput = exports.getInputBorderColor = exports.inputBaseStyle = exports.RightAlignInput = exports.INPUT_HORIZONTAL_PADDING = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const colors_1 = require("../../helpers/colors");
+const z_index_1 = require("../../state/z-index");
+exports.INPUT_HORIZONTAL_PADDING = 8;
+const aligner = {
+    marginRight: -exports.INPUT_HORIZONTAL_PADDING,
+};
+const RightAlignInput = ({ children }) => {
+    return (0, jsx_runtime_1.jsx)("div", { style: aligner, children: children });
+};
+exports.RightAlignInput = RightAlignInput;
+exports.inputBaseStyle = {
+    padding: `${exports.INPUT_HORIZONTAL_PADDING}px 10px`,
+    color: 'white',
+    borderStyle: 'solid',
+    borderWidth: 1,
+    fontSize: 14,
+};
+const getInputBorderColor = ({ status, isFocused, isHovered, }) => status === 'warning'
+    ? colors_1.WARNING_COLOR
+    : status === 'error'
+        ? colors_1.FAIL_COLOR
+        : isFocused
+            ? colors_1.SELECTED_BACKGROUND
+            : isHovered
+                ? colors_1.INPUT_BORDER_COLOR_HOVERED
+                : colors_1.INPUT_BORDER_COLOR_UNHOVERED;
+exports.getInputBorderColor = getInputBorderColor;
+const RemInputForwardRef = ({ status, rightAlign, ...props }, ref) => {
+    const [isFocused, setIsFocused] = (0, react_1.useState)(false);
+    const [isHovered, setIsHovered] = (0, react_1.useState)(false);
+    const inputRef = (0, react_1.useRef)(null);
+    const { tabIndex } = (0, z_index_1.useZIndex)();
+    const style = (0, react_1.useMemo)(() => {
+        var _a;
+        return {
+            backgroundColor: colors_1.INPUT_BACKGROUND,
+            ...exports.inputBaseStyle,
+            width: '100%',
+            borderColor: (0, exports.getInputBorderColor)({ isFocused, isHovered, status }),
+            textAlign: rightAlign ? 'right' : 'left',
+            ...((_a = props.style) !== null && _a !== void 0 ? _a : {}),
+        };
+    }, [isFocused, isHovered, rightAlign, props.style, status]);
+    (0, react_1.useImperativeHandle)(ref, () => {
+        return inputRef.current;
+    }, []);
+    (0, react_1.useEffect)(() => {
+        if (!inputRef.current) {
+            return;
+        }
+        const { current } = inputRef;
+        const onFocus = () => setIsFocused(true);
+        const onBlur = () => setIsFocused(false);
+        const onMouseEnter = () => setIsHovered(true);
+        const onMouseLeave = () => setIsHovered(false);
+        current.addEventListener('focus', onFocus);
+        current.addEventListener('blur', onBlur);
+        current.addEventListener('mouseenter', onMouseEnter);
+        current.addEventListener('mouseleave', onMouseLeave);
+        return () => {
+            current.removeEventListener('focus', onFocus);
+            current.removeEventListener('blur', onBlur);
+            current.removeEventListener('mouseenter', onMouseEnter);
+            current.removeEventListener('mouseleave', onMouseLeave);
+        };
+    }, [inputRef]);
+    return (0, jsx_runtime_1.jsx)("input", { ref: inputRef, tabIndex: tabIndex, ...props, style: style });
+};
+exports.RemotionInput = (0, react_1.forwardRef)(RemInputForwardRef);

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

@@ -0,0 +1,8 @@
+import React from 'react';
+import type { RemInputStatus } from './RemInput';
+type Props = React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement> & {
+    status: RemInputStatus;
+    name: string;
+};
+export declare const RemInputTypeColor: React.ForwardRefExoticComponent<Pick<Props, "status" | "key" | keyof React.InputHTMLAttributes<HTMLInputElement>> & React.RefAttributes<HTMLInputElement>>;
+export {};

package/dist/editor/components/NewComposition/RemInputTypeColor.js

@@ -0,0 +1,53 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RemInputTypeColor = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const colors_1 = require("../../helpers/colors");
+const z_index_1 = require("../../state/z-index");
+const RemInput_1 = require("./RemInput");
+const inputBaseStyle = {
+    padding: 0,
+    borderStyle: 'solid',
+    borderWidth: 1,
+};
+const RemInputTypeColorForwardRef = ({ status, ...props }, ref) => {
+    const [isFocused, setIsFocused] = (0, react_1.useState)(false);
+    const [isHovered, setIsHovered] = (0, react_1.useState)(false);
+    const inputRef = (0, react_1.useRef)(null);
+    const { tabIndex } = (0, z_index_1.useZIndex)();
+    const style = (0, react_1.useMemo)(() => {
+        var _a;
+        return {
+            backgroundColor: colors_1.INPUT_BACKGROUND,
+            ...inputBaseStyle,
+            borderColor: (0, RemInput_1.getInputBorderColor)({ isFocused, isHovered, status }),
+            ...((_a = props.style) !== null && _a !== void 0 ? _a : {}),
+        };
+    }, [isFocused, isHovered, props.style, status]);
+    (0, react_1.useImperativeHandle)(ref, () => {
+        return inputRef.current;
+    }, []);
+    (0, react_1.useEffect)(() => {
+        if (!inputRef.current) {
+            return;
+        }
+        const { current } = inputRef;
+        const onFocus = () => setIsFocused(true);
+        const onBlur = () => setIsFocused(false);
+        const onMouseEnter = () => setIsHovered(true);
+        const onMouseLeave = () => setIsHovered(false);
+        current.addEventListener('focus', onFocus);
+        current.addEventListener('blur', onBlur);
+        current.addEventListener('mouseenter', onMouseEnter);
+        current.addEventListener('mouseleave', onMouseLeave);
+        return () => {
+            current.removeEventListener('focus', onFocus);
+            current.removeEventListener('blur', onBlur);
+            current.removeEventListener('mouseenter', onMouseEnter);
+            current.removeEventListener('mouseleave', onMouseLeave);
+        };
+    }, [inputRef]);
+    return ((0, jsx_runtime_1.jsx)("input", { ref: inputRef, type: "color", tabIndex: tabIndex, ...props, name: props.name, style: style }));
+};
+exports.RemInputTypeColor = (0, react_1.forwardRef)(RemInputTypeColorForwardRef);

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

@@ -0,0 +1,7 @@
+import React from 'react';
+type Props = React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement> & {
+    status: 'error' | 'warning' | 'ok';
+};
+export declare const inputBaseStyle: React.CSSProperties;
+export declare const RemTextarea: React.ForwardRefExoticComponent<Pick<Props, "status" | "key" | keyof React.InputHTMLAttributes<HTMLTextAreaElement>> & React.RefAttributes<HTMLTextAreaElement>>;
+export {};

package/dist/editor/components/NewComposition/RemTextarea.js

@@ -0,0 +1,92 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RemTextarea = exports.inputBaseStyle = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const colors_1 = require("../../helpers/colors");
+const z_index_1 = require("../../state/z-index");
+const is_menu_item_1 = require("../Menu/is-menu-item");
+const RemInput_1 = require("../NewComposition/RemInput");
+exports.inputBaseStyle = {
+    padding: `${RemInput_1.INPUT_HORIZONTAL_PADDING}px 10px`,
+    color: 'white',
+    borderStyle: 'solid',
+    borderWidth: 1,
+    fontSize: 14,
+    resize: 'none',
+    overflowX: 'hidden',
+};
+const RemTextareaFRFunction = ({ status, ...props }, ref) => {
+    const [isFocused, setIsFocused] = (0, react_1.useState)(false);
+    const [isHovered, setIsHovered] = (0, react_1.useState)(false);
+    const inputRef = (0, react_1.useRef)(null);
+    const { tabIndex } = (0, z_index_1.useZIndex)();
+    (0, react_1.useImperativeHandle)(ref, () => {
+        return inputRef.current;
+    }, []);
+    const style = (0, react_1.useMemo)(() => {
+        var _a;
+        return {
+            backgroundColor: colors_1.INPUT_BACKGROUND,
+            ...exports.inputBaseStyle,
+            width: '100%',
+            borderColor: (0, RemInput_1.getInputBorderColor)({ isFocused, isHovered, status }),
+            ...((_a = props.style) !== null && _a !== void 0 ? _a : {}),
+        };
+    }, [isFocused, isHovered, props.style, status]);
+    (0, react_1.useEffect)(() => {
+        if (!inputRef.current) {
+            return;
+        }
+        const { current } = inputRef;
+        const onFocus = () => setIsFocused(true);
+        const onBlur = () => setIsFocused(false);
+        const onMouseEnter = () => setIsHovered(true);
+        const onMouseLeave = () => setIsHovered(false);
+        const onKeyDown = (e) => {
+            if (!inputRef.current) {
+                return;
+            }
+            if (inputRef.current !== document.activeElement) {
+                return;
+            }
+            if (e.code === 'Tab') {
+                e.preventDefault();
+                // Always match up with value in JSON.stringify(content, null, 2)
+                document.execCommand('insertText', false, ' '.repeat(2));
+            }
+            if (e.code === 'Enter') {
+                e.preventDefault();
+                const { selectionStart, selectionEnd, value } = inputRef.current;
+                if (selectionStart !== selectionEnd) {
+                    return;
+                }
+                let prevNewline = selectionStart;
+                for (let i = selectionStart - 1; i >= 0; i--) {
+                    if (value[i] === '\n') {
+                        break;
+                    }
+                    prevNewline = i;
+                }
+                const currentLine = value.substring(prevNewline, selectionStart);
+                const trimmed = currentLine.trim();
+                const difference = currentLine.length - trimmed.length;
+                document.execCommand('insertText', false, '\n' + ' '.repeat(difference));
+            }
+        };
+        current.addEventListener('focus', onFocus);
+        current.addEventListener('blur', onBlur);
+        current.addEventListener('mouseenter', onMouseEnter);
+        current.addEventListener('mouseleave', onMouseLeave);
+        current.addEventListener('keydown', onKeyDown);
+        return () => {
+            current.removeEventListener('focus', onFocus);
+            current.removeEventListener('blur', onBlur);
+            current.removeEventListener('mouseenter', onMouseEnter);
+            current.removeEventListener('mouseleave', onMouseLeave);
+            current.removeEventListener('keydown', onKeyDown);
+        };
+    }, [inputRef]);
+    return ((0, jsx_runtime_1.jsx)("textarea", { ref: inputRef, tabIndex: tabIndex, ...props, className: is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME, style: style }));
+};
+exports.RemTextarea = (0, react_1.forwardRef)(RemTextareaFRFunction);

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

@@ -0,0 +1,5 @@
+import React from 'react';
+export declare const ToggleAspectRatio: React.FC<{
+    aspectRatioLocked: boolean;
+    setAspectRatioLocked: (option: boolean) => void;
+}>;

package/dist/editor/components/NewComposition/ToggleAspectRatio.js

@@ -0,0 +1,26 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ToggleAspectRatio = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const colors_1 = require("../../helpers/colors");
+const lock_1 = require("../../icons/lock");
+const buttonStyle = {
+    backgroundColor: colors_1.BACKGROUND,
+    border: 'none',
+    position: 'absolute',
+    paddingLeft: 2,
+    paddingRight: 2,
+    marginLeft: 3,
+};
+const iconStyle = {
+    width: 10,
+    color: 'white',
+};
+const ToggleAspectRatio = ({ aspectRatioLocked, setAspectRatioLocked }) => {
+    const onClick = (0, react_1.useCallback)(() => {
+        setAspectRatioLocked(!aspectRatioLocked);
+    }, [aspectRatioLocked, setAspectRatioLocked]);
+    return ((0, jsx_runtime_1.jsx)("button", { type: "button", onClick: onClick, style: buttonStyle, children: aspectRatioLocked ? ((0, jsx_runtime_1.jsx)(lock_1.LockIcon, { style: iconStyle })) : ((0, jsx_runtime_1.jsx)(lock_1.UnlockIcon, { style: iconStyle })) }));
+};
+exports.ToggleAspectRatio = ToggleAspectRatio;

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

@@ -0,0 +1,8 @@
+import type { SVGProps } from 'react';
+import React from 'react';
+export declare const WarningTriangle: React.FC<SVGProps<SVGSVGElement>>;
+export declare const ValidationMessage: React.FC<{
+    message: string;
+    align: 'flex-start' | 'flex-end';
+    type: 'warning' | 'error';
+}>;