@remotion/cli 4.0.0-alpha7 → 4.0.0-alpha9

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

@@ -39,20 +39,18 @@ const Tab = ({ children, onClick, style, selected }) => {
     const onPointerLeave = (0, react_1.useCallback)(() => {
         setHovered(false);
     }, []);
-    const definiteStyle = (0, react_1.useMemo)(() => {
-        return {
-            ...selectorButton,
-            backgroundColor: selected
-                ? 'transparent'
-                : hovered
-                    ? colors_1.CLEAR_HOVER
-                    : colors_1.INPUT_BACKGROUND,
-            color: selected ? 'white' : colors_1.LIGHT_TEXT,
-            borderTop: selected ? '2px solid var(--blue)' : '2px solid transparent',
-            boxShadow: selected ? 'none' : undefined,
-            ...style,
-        };
-    }, [hovered, selected, style]);
+    const definiteStyle = (0, react_1.useMemo)(() => ({
+        ...selectorButton,
+        backgroundColor: selected
+            ? 'transparent'
+            : hovered
+                ? colors_1.CLEAR_HOVER
+                : colors_1.INPUT_BACKGROUND,
+        color: selected ? 'white' : colors_1.LIGHT_TEXT,
+        borderTop: selected ? '2px solid ' + colors_1.BLUE : '2px solid transparent',
+        boxShadow: selected ? 'none' : undefined,
+        ...style,
+    }), [hovered, selected, style]);
     return ((0, jsx_runtime_1.jsx)("button", { style: definiteStyle, type: "button", onClick: onClick, tabIndex: tabIndex, onPointerLeave: onPointerLeave, onPointerEnter: onPointerEnter, children: children }));
 };
 exports.Tab = Tab;

package/dist/editor/components/Timeline/TimelineSequence.js

@@ -5,13 +5,13 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const player_1 = require("@remotion/player");
 const react_1 = require("react");
 const remotion_1 = require("remotion");
+const colors_1 = require("../../helpers/colors");
 const get_timeline_sequence_layout_1 = require("../../helpers/get-timeline-sequence-layout");
 const timeline_layout_1 = require("../../helpers/timeline-layout");
 const AudioWaveform_1 = require("../AudioWaveform");
 const LoopedTimelineIndicators_1 = require("./LoopedTimelineIndicators");
 const timeline_refs_1 = require("./timeline-refs");
 const TimelineVideoInfo_1 = require("./TimelineVideoInfo");
-const SEQUENCE_GRADIENT = 'var(--blue)';
 const AUDIO_GRADIENT = 'linear-gradient(rgb(16 171 58), rgb(43 165 63) 60%)';
 const VIDEO_GRADIENT = 'linear-gradient(to top, #8e44ad, #9b59b6)';
 const TimelineSequence = ({ s, fps }) => {
@@ -45,7 +45,7 @@ const TimelineSequence = ({ s, fps }) => {
                 ? AUDIO_GRADIENT
                 : s.type === 'video'
                     ? VIDEO_GRADIENT
-                    : SEQUENCE_GRADIENT,
+                    : colors_1.BLUE,
             border: get_timeline_sequence_layout_1.SEQUENCE_BORDER_WIDTH + 'px solid rgba(255, 255, 255, 0.2)',
             borderRadius: 4,
             position: 'absolute',

package/dist/editor/components/TimelineInOutToggle.js

@@ -5,6 +5,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const remotion_1 = require("remotion");
 const truthy_1 = require("../../truthy");
+const colors_1 = require("../helpers/colors");
 const is_current_selected_still_1 = require("../helpers/is-current-selected-still");
 const use_keybinding_1 = require("../helpers/use-keybinding");
 const timelineInOutPointer_1 = require("../icons/timelineInOutPointer");
@@ -224,6 +225,6 @@ const TimelineInOutPointToggle = () => {
     if (isStill) {
         return null;
     }
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(ControlButton_1.ControlButton, { title: getTooltipText('In', 'I'), "aria-label": getTooltipText('In', 'I'), onClick: (e) => onInMark(e), onContextMenu: clearInMark, disabled: timelinePosition === 0, children: (0, jsx_runtime_1.jsx)(timelineInOutPointer_1.TimelineInPointer, { color: inFrame === null ? 'white' : 'var(--blue)', style: style }) }), (0, jsx_runtime_1.jsx)(ControlButton_1.ControlButton, { title: getTooltipText('Out', 'O'), "aria-label": getTooltipText('Out', 'O'), onClick: onOutMark, onContextMenu: clearOutMark, disabled: timelinePosition === videoConfig.durationInFrames - 1, children: (0, jsx_runtime_1.jsx)(timelineInOutPointer_1.TimelineOutPointer, { color: outFrame === null ? 'white' : 'var(--blue)', style: style }) })] }));
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(ControlButton_1.ControlButton, { title: getTooltipText('In', 'I'), "aria-label": getTooltipText('In', 'I'), onClick: (e) => onInMark(e), onContextMenu: clearInMark, disabled: timelinePosition === 0, children: (0, jsx_runtime_1.jsx)(timelineInOutPointer_1.TimelineInPointer, { color: inFrame === null ? 'white' : colors_1.BLUE, style: style }) }), (0, jsx_runtime_1.jsx)(ControlButton_1.ControlButton, { title: getTooltipText('Out', 'O'), "aria-label": getTooltipText('Out', 'O'), onClick: onOutMark, onContextMenu: clearOutMark, disabled: timelinePosition === videoConfig.durationInFrames - 1, children: (0, jsx_runtime_1.jsx)(timelineInOutPointer_1.TimelineOutPointer, { color: outFrame === null ? 'white' : colors_1.BLUE, style: style }) })] }));
 };
 exports.TimelineInOutPointToggle = TimelineInOutPointToggle;

package/dist/editor/components/UpdateCheck.js

@@ -3,11 +3,12 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.UpdateCheck = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
+const colors_1 = require("../helpers/colors");
 const modals_1 = require("../state/modals");
 const z_index_1 = require("../state/z-index");
 const buttonStyle = {
     appearance: 'none',
-    color: 'var(--blue)',
+    color: colors_1.BLUE,
     border: 'none',
     fontWeight: 'bold',
     backgroundColor: 'transparent',

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

@@ -11,6 +11,8 @@ export declare const INPUT_BORDER_COLOR_HOVERED = "rgba(255, 255, 255, 0.05)";
 export declare const TIMELINE_BACKGROUND = "#111";
 export declare const FAIL_COLOR = "#ff3232";
 export declare const WARNING_COLOR = "#f1c40f";
+export declare const BLUE = "#0b84f3";
+export declare const BLUE_DISABLED = "#284f73";
 export declare const getBackgroundFromHoverState: ({ selected, hovered, }: {
     selected: boolean;
     hovered: boolean;

package/dist/editor/helpers/colors.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getBackgroundFromHoverState = 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.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.INPUT_BACKGROUND = '#2f363d';
 exports.BORDER_COLOR = '#000';
@@ -15,6 +15,8 @@ exports.INPUT_BORDER_COLOR_HOVERED = 'rgba(255, 255, 255, 0.05)';
 exports.TIMELINE_BACKGROUND = '#111';
 exports.FAIL_COLOR = '#ff3232';
 exports.WARNING_COLOR = '#f1c40f';
+exports.BLUE = '#0b84f3';
+exports.BLUE_DISABLED = '#284f73';
 const getBackgroundFromHoverState = ({ selected, hovered, }) => {
     if (selected) {
         if (hovered) {

package/dist/editor/icons/media-volume.js

@@ -2,9 +2,10 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.VolumeOnIcon = exports.VolumeOffIcon = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const colors_1 = require("../helpers/colors");
 const size = 25;
 const VolumeOffIcon = () => {
-    return ((0, jsx_runtime_1.jsx)("svg", { width: size, height: size, viewBox: "0 0 24 24", children: (0, jsx_runtime_1.jsx)("path", { d: "M3.63 3.63a.996.996 0 000 1.41L7.29 8.7 7 9H4c-.55 0-1 .45-1 1v4c0 .55.45 1 1 1h3l3.29 3.29c.63.63 1.71.18 1.71-.71v-4.17l4.18 4.18c-.49.37-1.02.68-1.6.91-.36.15-.58.53-.58.92 0 .72.73 1.18 1.39.91.8-.33 1.55-.77 2.22-1.31l1.34 1.34a.996.996 0 101.41-1.41L5.05 3.63c-.39-.39-1.02-.39-1.42 0zM19 12c0 .82-.15 1.61-.41 2.34l1.53 1.53c.56-1.17.88-2.48.88-3.87 0-3.83-2.4-7.11-5.78-8.4-.59-.23-1.22.23-1.22.86v.19c0 .38.25.71.61.85C17.18 6.54 19 9.06 19 12zm-8.71-6.29l-.17.17L12 7.76V6.41c0-.89-1.08-1.33-1.71-.7zM16.5 12A4.5 4.5 0 0014 7.97v1.79l2.48 2.48c.01-.08.02-.16.02-.24z", fill: "var(--blue)" }) }));
+    return ((0, jsx_runtime_1.jsx)("svg", { width: size, height: size, viewBox: "0 0 24 24", children: (0, jsx_runtime_1.jsx)("path", { d: "M3.63 3.63a.996.996 0 000 1.41L7.29 8.7 7 9H4c-.55 0-1 .45-1 1v4c0 .55.45 1 1 1h3l3.29 3.29c.63.63 1.71.18 1.71-.71v-4.17l4.18 4.18c-.49.37-1.02.68-1.6.91-.36.15-.58.53-.58.92 0 .72.73 1.18 1.39.91.8-.33 1.55-.77 2.22-1.31l1.34 1.34a.996.996 0 101.41-1.41L5.05 3.63c-.39-.39-1.02-.39-1.42 0zM19 12c0 .82-.15 1.61-.41 2.34l1.53 1.53c.56-1.17.88-2.48.88-3.87 0-3.83-2.4-7.11-5.78-8.4-.59-.23-1.22.23-1.22.86v.19c0 .38.25.71.61.85C17.18 6.54 19 9.06 19 12zm-8.71-6.29l-.17.17L12 7.76V6.41c0-.89-1.08-1.33-1.71-.7zM16.5 12A4.5 4.5 0 0014 7.97v1.79l2.48 2.48c.01-.08.02-.16.02-.24z", fill: colors_1.BLUE }) }));
 };
 exports.VolumeOffIcon = VolumeOffIcon;
 const VolumeOnIcon = () => {

package/dist/editor/state/modals.d.ts

@@ -35,7 +35,9 @@ export declare type RenderModalState = {
     initialHeadless: boolean;
     minConcurrency: number;
     maxConcurrency: number;
-    defaultProps: unknown;
+    defaultProps: Record<string, unknown>;
+    inFrameMark: number | null;
+    outFrameMark: number | null;
 };
 export declare type ModalState = {
     type: 'new-comp';

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

@@ -9,7 +9,7 @@ export declare const getCliOptions: (options: {
     concurrency: string | number | null;
     frameRange: FrameRange | null;
     shouldOutputImageSequence: boolean;
-    inputProps: object;
+    inputProps: Record<string, unknown>;
     envVariables: Record<string, string>;
     jpegQuality: number | undefined;
     browser: import("@remotion/renderer").Browser;

package/dist/get-input-props.d.ts

@@ -1 +1 @@
-export declare const getInputProps: (onUpdate: ((newProps: object) => void) | null) => object;
+export declare const getInputProps: (onUpdate: ((newProps: Record<string, unknown>) => void) | null) => Record<string, unknown>;

package/dist/index.d.ts

@@ -87,7 +87,7 @@ export declare const CliInternals: {
         concurrency: string | number | null;
         frameRange: import("@remotion/renderer").FrameRange | null;
         shouldOutputImageSequence: boolean;
-        inputProps: object;
+        inputProps: Record<string, unknown>;
         envVariables: Record<string, string>;
         jpegQuality: number | undefined;
         browser: import("@remotion/renderer").Browser;

package/dist/list-of-remotion-packages.js

@@ -24,5 +24,6 @@ exports.listOfRemotionPackages = [
     '@remotion/gif',
     '@remotion/shapes',
     '@remotion/zod-types',
+    '@remotion/tailwind',
     'remotion',
 ];

package/dist/preview-server/api-types.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="node" />
 import type { IncomingMessage, ServerResponse } from 'node:http';
-import type { AddRenderRequest, CancelRenderRequest, CancelRenderResponse, CanUpdateDefaultPropsRequest, CanUpdateDefaultPropsResponse, OpenInFileExplorerRequest, RemoveRenderRequest, SubscribeToFileExistenceRequest, SubscribeToFileExistenceResponse, UnsubscribeFromFileExistenceRequest, UpdateDefaultPropsRequest } from './render-queue/job';
+import type { AddRenderRequest, CancelRenderRequest, CancelRenderResponse, CanUpdateDefaultPropsRequest, CanUpdateDefaultPropsResponse, OpenInFileExplorerRequest, RemoveRenderRequest, SubscribeToFileExistenceRequest, SubscribeToFileExistenceResponse, UnsubscribeFromFileExistenceRequest, UpdateDefaultPropsRequest, UpdateDefaultPropsResponse } from './render-queue/job';
 export declare type ApiHandler<ReqData, ResData> = (params: {
     input: ReqData;
     entryPoint: string;
@@ -19,7 +19,7 @@ export declare type ApiRoutes = {
     '/api/subscribe-to-file-existence': ReqAndRes<SubscribeToFileExistenceRequest, SubscribeToFileExistenceResponse>;
     '/api/remove-render': ReqAndRes<RemoveRenderRequest, undefined>;
     '/api/open-in-file-explorer': ReqAndRes<OpenInFileExplorerRequest, void>;
-    '/api/update-default-props': ReqAndRes<UpdateDefaultPropsRequest, void>;
+    '/api/update-default-props': ReqAndRes<UpdateDefaultPropsRequest, UpdateDefaultPropsResponse>;
     '/api/can-update-default-props': ReqAndRes<CanUpdateDefaultPropsRequest, CanUpdateDefaultPropsResponse>;
 };
 export {};

package/dist/preview-server/error-overlay/remotion-overlay/HelpLink.js

@@ -3,11 +3,12 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.HelpLink = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
+const colors_1 = require("../../../editor/helpers/colors");
 const use_keybinding_1 = require("../../../editor/helpers/use-keybinding");
 const Button_1 = require("./Button");
 const ShortcutHint_1 = require("./ShortcutHint");
 const buttonStyle = {
-    backgroundColor: 'var(--blue)',
+    backgroundColor: colors_1.BLUE,
     color: 'white',
 };
 const HelpLink = ({ canHaveKeyboardShortcuts, link }) => {

package/dist/preview-server/render-queue/job.d.ts

@@ -60,7 +60,7 @@ export declare type RenderJob = {
     cancelToken: ReturnType<typeof makeCancelSignal>;
     chromiumOptions: RequiredChromiumOptions;
     envVariables: Record<string, string>;
-    inputProps: unknown;
+    inputProps: Record<string, unknown>;
 } & RenderJobDynamicFields;
 export declare type RenderJobWithCleanup = RenderJob & {
     cleanup: (() => void)[];
@@ -104,7 +104,7 @@ export declare type AddRenderRequest = {
     chromiumOptions: RequiredChromiumOptions;
     delayRenderTimeout: number;
     envVariables: Record<string, string>;
-    inputProps: unknown;
+    inputProps: Record<string, unknown>;
 } & AddRenderRequestDynamicFields;
 export declare type RemoveRenderRequest = {
     jobId: string;
@@ -128,6 +128,13 @@ export declare type UpdateDefaultPropsRequest = {
     defaultProps: string;
     enumPaths: EnumPath[];
 };
+export declare type UpdateDefaultPropsResponse = {
+    success: true;
+} | {
+    success: false;
+    reason: string;
+    stack: string;
+};
 export declare type CanUpdateDefaultPropsRequest = {
     compositionId: string;
 };

package/dist/preview-server/render-queue/make-retry-payload.js

@@ -45,11 +45,13 @@ const makeRetryPayload = (job) => {
             initialHeadless: job.chromiumOptions.headless,
             initialIgnoreCertificateErrors: job.chromiumOptions.ignoreCertificateErrors,
             defaultProps: job.inputProps,
+            inFrameMark: null,
+            outFrameMark: null,
         };
     }
     if (job.type === 'video') {
         const { initialAudioCodec, initialRenderType, initialVideoCodec } = (0, get_default_video_contexts_1.getDefaultCodecs)({
-            defaultCodec: defaults.codec,
+            defaultCodec: job.codec,
             isStill: false,
         });
         return {
@@ -84,6 +86,8 @@ const makeRetryPayload = (job) => {
             initialHeadless: job.chromiumOptions.headless,
             initialIgnoreCertificateErrors: job.chromiumOptions.ignoreCertificateErrors,
             defaultProps: job.inputProps,
+            inFrameMark: job.startFrame,
+            outFrameMark: job.endFrame,
         };
     }
     throw new Error(`Job ${JSON.stringify(job)} Not implemented`);

package/dist/preview-server/render-queue/queue.js

@@ -93,7 +93,6 @@ const cancelJob = (jobId) => {
     }
 };
 exports.cancelJob = cancelJob;
-// TODO: Currently, concurrency = 1 is not enforced
 const processJobIfPossible = async ({ remotionRoot, entryPoint, }) => {
     const runningJob = jobQueue.find((q) => {
         return q.status === 'running';

package/dist/preview-server/routes/update-default-props.d.ts

@@ -1,3 +1,3 @@
 import type { ApiHandler } from '../api-types';
-import type { UpdateDefaultPropsRequest } from '../render-queue/job';
-export declare const updateDefaultPropsHandler: ApiHandler<UpdateDefaultPropsRequest, void>;
+import type { UpdateDefaultPropsRequest, UpdateDefaultPropsResponse } from '../render-queue/job';
+export declare const updateDefaultPropsHandler: ApiHandler<UpdateDefaultPropsRequest, UpdateDefaultPropsResponse>;

package/dist/preview-server/routes/update-default-props.js

@@ -7,19 +7,29 @@ const input_props_serialization_1 = require("../../editor/components/RenderModal
 const project_info_1 = require("../project-info");
 const can_update_default_props_1 = require("./can-update-default-props");
 const updateDefaultPropsHandler = async ({ input: { compositionId, defaultProps, enumPaths }, remotionRoot }) => {
-    const projectInfo = await (0, project_info_1.getProjectInfo)(remotionRoot);
-    // TODO: What happens if this error is thrown? Handle in frontend
-    if (!projectInfo.videoFile) {
-        throw new Error('Cannot find root file in project');
+    try {
+        const projectInfo = await (0, project_info_1.getProjectInfo)(remotionRoot);
+        if (!projectInfo.videoFile) {
+            throw new Error('Cannot find root file in project');
+        }
+        (0, can_update_default_props_1.checkIfTypeScriptFile)(projectInfo.videoFile);
+        const updated = await (0, update_default_props_1.updateDefaultProps)({
+            compositionId,
+            input: (0, node_fs_1.readFileSync)(projectInfo.videoFile, 'utf-8'),
+            newDefaultProps: (0, input_props_serialization_1.deserializeJSONWithCustomFields)(defaultProps),
+            enumPaths,
+        });
+        (0, node_fs_1.writeFileSync)(projectInfo.videoFile, updated);
+        return {
+            success: true,
+        };
+    }
+    catch (err) {
+        return {
+            success: false,
+            reason: err.message,
+            stack: err.stack,
+        };
     }
-    (0, can_update_default_props_1.checkIfTypeScriptFile)(projectInfo.videoFile);
-    // TODO: Pass error to frontend
-    const updated = await (0, update_default_props_1.updateDefaultProps)({
-        compositionId,
-        input: (0, node_fs_1.readFileSync)(projectInfo.videoFile, 'utf-8'),
-        newDefaultProps: (0, input_props_serialization_1.deserializeJSONWithCustomFields)(defaultProps),
-        enumPaths,
-    });
-    (0, node_fs_1.writeFileSync)(projectInfo.videoFile, updated);
 };
 exports.updateDefaultPropsHandler = updateDefaultPropsHandler;

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

@@ -1,3 +1,4 @@
+/// <reference types="node" />
 import type { IncomingMessage, ServerResponse } from 'node:http';
 import type { LiveEventsServer } from './live-events';
 export declare const handleRoutes: ({ hash, hashPrefix, request, response, liveEventsServer, getCurrentInputProps, getEnvVariables, remotionRoot, entryPoint, publicDir, }: {
@@ -11,4 +12,4 @@ export declare const handleRoutes: ({ hash, hashPrefix, request, response, liveE
     remotionRoot: string;
     entryPoint: string;
     publicDir: string;
-}) => void | Promise<void>;
+}) => void | Promise<void> | Promise<ServerResponse<IncomingMessage> | undefined>;

package/dist/preview-server/start-server.js

@@ -49,7 +49,7 @@ const startServer = async (options) => {
             });
         })
             .then(() => {
-            return (0, routes_1.handleRoutes)({
+            (0, routes_1.handleRoutes)({
                 hash: options.hash,
                 hashPrefix: options.hashPrefix,
                 request,

package/dist/render-flows/render.d.ts

@@ -13,7 +13,7 @@ export declare const renderVideoFlow: ({ remotionRoot, fullEntryPoint, indent, l
     indent: boolean;
     shouldOutputImageSequence: boolean;
     publicDir: string | null;
-    inputProps: object;
+    inputProps: Record<string, unknown>;
     envVariables: Record<string, string>;
     puppeteerTimeout: number;
     port: number | null;

package/dist/render-flows/still.d.ts

@@ -5,7 +5,7 @@ export declare const renderStillFlow: ({ remotionRoot, fullEntryPoint, entryPoin
     fullEntryPoint: string;
     entryPointReason: string;
     remainingArgs: string[];
-    inputProps: object;
+    inputProps: Record<string, unknown>;
     envVariables: Record<string, string>;
     jpegQuality: number | undefined;
     browser: Browser;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@remotion/cli",
-  "version": "4.0.0-alpha7",
+  "version": "4.0.0-alpha9",
   "description": "CLI for Remotion",
   "main": "dist/index.js",
   "sideEffects": false,
@@ -28,18 +28,18 @@
   "author": "Jonny Burger <jonny@remotion.dev>",
   "license": "SEE LICENSE IN LICENSE.md",
   "dependencies": {
-    "@remotion/bundler": "4.0.0-alpha7",
-    "@remotion/media-utils": "4.0.0-alpha7",
-    "@remotion/player": "4.0.0-alpha7",
-    "@remotion/renderer": "4.0.0-alpha7",
     "dotenv": "9.0.2",
     "memfs": "3.4.3",
     "minimist": "1.2.6",
     "open": "^8.4.2",
     "prompts": "2.4.1",
-    "remotion": "4.0.0-alpha7",
     "semver": "7.3.5",
-    "source-map": "0.6.1"
+    "source-map": "0.6.1",
+    "@remotion/bundler": "4.0.0-alpha9",
+    "@remotion/media-utils": "4.0.0-alpha9",
+    "@remotion/player": "4.0.0-alpha9",
+    "remotion": "4.0.0-alpha9",
+    "@remotion/renderer": "4.0.0-alpha9"
   },
   "peerDependencies": {
     "react": ">=16.8.0",
@@ -48,7 +48,7 @@
   "devDependencies": {
     "@jonny/eslint-config": "3.0.266",
     "@types/minimist": "^1.2.2",
-    "@types/node": "^16.7.5",
+    "@types/node": "18.14.6",
     "@types/prompts": "^2.4.1",
     "@types/react": "18.0.26",
     "@types/prettier": "^2.7.2",
@@ -56,7 +56,6 @@
     "@types/semver": "^7.3.4",
     "@typescript-eslint/eslint-plugin": "5.18.0",
     "@typescript-eslint/parser": "5.18.0",
-    "@remotion/zod-types": "4.0.0-alpha7",
     "eslint": "8.25.0",
     "eslint-plugin-10x": "1.5.2",
     "eslint-plugin-react": "7.29.4",
@@ -66,8 +65,10 @@
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
     "typescript": "^4.7.0",
-    "vitest": "0.24.3",
-    "zod": "^3.21.4"
+    "vitest": "0.31.1",
+    "zod": "^3.21.4",
+    "@remotion/zod-types": "4.0.0-alpha9",
+    "@remotion/tailwind": "4.0.0-alpha9"
   },
   "keywords": [
     "remotion",
@@ -80,6 +81,7 @@
     "access": "public"
   },
   "scripts": {
+    "formatting": "prettier src --check",
     "lint": "eslint src --ext ts,tsx",
     "test": "vitest --run",
     "build": "tsc -d",

package/styles/styles.css

@@ -1,6 +1,5 @@
 html {
-	--blue: #0b84f3;
-	--blue-disabled: #284f73;
+	--remotion-cli-internals-blue: #0b84f3;
 }
 
 body {
@@ -18,7 +17,7 @@ body {
 
 .remotion-splitter:hover,
 .remotion-splitter-active {
-	background-color: var(--blue);
+	background-color: var(--remotion-cli-internals-blue);
 }
 
 input::-webkit-outer-spin-button,
@@ -37,9 +36,9 @@ a:focus {
 	border-radius: 0 !important;
 }
 
-input[type="color"].__remotion_color_picker::-webkit-color-swatch-wrapper {
+input[type='color'].__remotion_color_picker::-webkit-color-swatch-wrapper {
 	padding: 0;
 }
-input[type="color"].__remotion_color_picker::-webkit-color-swatch {
+input[type='color'].__remotion_color_picker::-webkit-color-swatch {
 	border: none;
 }