@remotion/studio 4.0.225 → 4.0.227

package/dist/components/ShowRulersProvider.d.ts

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

package/dist/components/Splitter/SplitterElement.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 export declare const SplitterElement: React.FC<{
-    type: 'flexer' | 'anti-flexer';
-    children: React.ReactNode;
-    sticky: React.ReactNode | null;
+    readonly type: 'flexer' | 'anti-flexer';
+    readonly children: React.ReactNode;
+    readonly sticky: React.ReactNode | null;
 }>;

package/dist/components/Splitter/SplitterHandle.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 export declare const SPLITTER_HANDLE_SIZE = 3;
 export declare const SplitterHandle: React.FC<{
-    allowToCollapse: 'right' | 'left' | 'none';
-    onCollapse: () => void;
+    readonly allowToCollapse: 'right' | 'left' | 'none';
+    readonly onCollapse: () => void;
 }>;

package/dist/components/Tabs/vertical.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 export declare const VerticalTab: React.FC<{
-    children: React.ReactNode;
-    onClick: React.MouseEventHandler<HTMLButtonElement>;
-    style?: React.CSSProperties;
-    selected: boolean;
+    readonly children: React.ReactNode;
+    readonly onClick: React.MouseEventHandler<HTMLButtonElement>;
+    readonly style?: React.CSSProperties;
+    readonly selected: boolean;
 }>;

package/dist/components/Timeline/LoopedTimelineIndicators.d.ts

@@ -1,4 +1,4 @@
 import React from 'react';
 export declare const LoopedTimelineIndicator: React.FC<{
-    loops: number;
+    readonly loops: number;
 }>;

package/dist/components/Timeline/TimelineCollapseToggle.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
 export declare const TimelineCollapseToggle: React.FC<{
-    collapsed: boolean;
-    color: string;
+    readonly collapsed: boolean;
+    readonly color: string;
 }>;

package/dist/components/Timeline/TimelineInOutPointerHandle.d.ts

@@ -2,9 +2,9 @@ import React from 'react';
 export declare const inPointerHandle: React.RefObject<HTMLDivElement>;
 export declare const outPointerHandle: React.RefObject<HTMLDivElement>;
 type Props = {
-    dragging: boolean;
-    type: 'in' | 'out';
-    atFrame: number;
+    readonly dragging: boolean;
+    readonly type: 'in' | 'out';
+    readonly atFrame: number;
 };
 export declare const TimelineInOutPointerHandle: React.FC<Props>;
 export {};

package/dist/components/Timeline/TimelineList.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
 import type { TrackWithHash } from '../../helpers/get-timeline-sequence-sort-key';
 export declare const TimelineList: React.FC<{
-    timeline: TrackWithHash[];
+    readonly timeline: TrackWithHash[];
 }>;

package/dist/components/Timeline/TimelineListItem.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import type { TSequence } from 'remotion';
 export declare const TimelineListItem: React.FC<{
-    sequence: TSequence;
-    nestedDepth: number;
-    isCompact: boolean;
+    readonly sequence: TSequence;
+    readonly nestedDepth: number;
+    readonly isCompact: boolean;
 }>;

package/dist/components/Timeline/TimelineScrollable.d.ts

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

package/dist/components/Timeline/TimelineSequence.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
 import type { TSequence } from 'remotion';
 export declare const TimelineSequence: React.FC<{
-    s: TSequence;
+    readonly s: TSequence;
 }>;

package/dist/components/Timeline/TimelineSequenceFrame.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
 export declare const TimelineSequenceFrame: React.FC<{
-    roundedFrame: number;
-    premounted: boolean;
+    readonly roundedFrame: number;
+    readonly premounted: boolean;
 }>;

package/dist/components/Timeline/TimelineVideoInfo.d.ts

@@ -1,4 +1,4 @@
 import React from 'react';
 export declare const TimelineVideoInfo: React.FC<{
-    src: string;
+    readonly src: string;
 }>;

package/dist/components/ZoomGesturesProvider.d.ts

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

package/dist/components/get-zod-if-possible.d.ts

@@ -6,5 +6,5 @@ export declare const getZTypesIfPossible: () => Promise<ZodTypesType | null>;
 export declare const useZodIfPossible: () => typeof import("zod/lib/external") | null;
 export declare const useZodTypesIfPossible: () => typeof import("@remotion/zod-types") | null;
 export declare const ZodProvider: React.FC<{
-    children: React.ReactNode;
+    readonly children: React.ReactNode;
 }>;

package/dist/components/get-zod-if-possible.js

@@ -31,7 +31,7 @@ const getZodIfPossible = async () => {
         const { z } = await Promise.resolve().then(() => __importStar(require('zod')));
         return z;
     }
-    catch (err) {
+    catch (_a) {
         return null;
     }
 };
@@ -41,7 +41,7 @@ const getZTypesIfPossible = async () => {
         const mod = await Promise.resolve().then(() => __importStar(require('@remotion/zod-types')));
         return mod;
     }
-    catch (err) {
+    catch (_a) {
         return null;
     }
 };

package/dist/components/layout.d.ts

@@ -2,25 +2,25 @@ import type { HTMLAttributes } from 'react';
 import React from 'react';
 export declare const SPACING_UNIT = 8;
 export declare const Spacing: React.FC<{
-    x?: number;
-    y?: number;
-    block?: boolean;
+    readonly x?: number;
+    readonly y?: number;
+    readonly block?: boolean;
 }>;
 export declare const Flex: React.FC<{
-    children?: React.ReactNode;
+    readonly children?: React.ReactNode;
 }>;
 export declare const Row: React.FC<{
-    justify?: 'center' | 'flex-start' | 'flex-end';
-    align?: 'center';
-    style?: React.CSSProperties;
-    flex?: number;
-    className?: string;
-    children: React.ReactNode;
+    readonly justify?: 'center' | 'flex-start' | 'flex-end';
+    readonly align?: 'center';
+    readonly style?: React.CSSProperties;
+    readonly flex?: number;
+    readonly className?: string;
+    readonly children: React.ReactNode;
 } & HTMLAttributes<HTMLDivElement>>;
 export declare const Column: React.FC<{
-    justify?: 'center';
-    align?: 'center';
-    style?: React.CSSProperties;
-    className?: string;
-    children: React.ReactNode;
+    readonly justify?: 'center';
+    readonly align?: 'center';
+    readonly style?: React.CSSProperties;
+    readonly className?: string;
+    readonly children: React.ReactNode;
 }>;

package/dist/error-overlay/react-overlay/effects/stack-trace-limit.js

@@ -24,7 +24,7 @@ function registerStackTraceLimit(limit = MAX_STACK_LENGTH) {
         Error.stackTraceLimit = limit;
         stackTraceRegistered = true;
     }
-    catch (e) {
+    catch (_a) {
         // Not all browsers support this so we don't care if it errors
     }
 }
@@ -36,7 +36,7 @@ function unregisterStackTraceLimit() {
         Error.stackTraceLimit = restoreStackTraceValue;
         stackTraceRegistered = false;
     }
-    catch (e) {
+    catch (_a) {
         // Not all browsers support this so we don't care if it errors
     }
 }

package/dist/error-overlay/remotion-overlay/AskOnDiscord.d.ts

@@ -1,4 +1,4 @@
 import React from 'react';
 export declare const AskOnDiscord: React.FC<{
-    canHaveKeyboardShortcuts: boolean;
+    readonly canHaveKeyboardShortcuts: boolean;
 }>;

package/dist/error-overlay/remotion-overlay/CodeFrame.d.ts

@@ -1,6 +1,6 @@
 import type { ScriptLine } from '@remotion/studio-shared';
 import React from 'react';
 export declare const CodeFrame: React.FC<{
-    source: ScriptLine[];
-    lineNumberWidth: number;
+    readonly source: ScriptLine[];
+    readonly lineNumberWidth: number;
 }>;

package/dist/error-overlay/remotion-overlay/ErrorDisplay.d.ts

@@ -2,9 +2,9 @@ import React from 'react';
 import type { ErrorRecord } from '../react-overlay/listen-to-runtime-errors';
 export type OnRetry = null | (() => void);
 export declare const ErrorDisplay: React.FC<{
-    display: ErrorRecord;
-    keyboardShortcuts: boolean;
-    onRetry: OnRetry;
-    canHaveDismissButton: boolean;
-    calculateMetadata: boolean;
+    readonly display: ErrorRecord;
+    readonly keyboardShortcuts: boolean;
+    readonly onRetry: OnRetry;
+    readonly canHaveDismissButton: boolean;
+    readonly calculateMetadata: boolean;
 }>;

package/dist/error-overlay/remotion-overlay/ErrorLoader.d.ts

@@ -1,9 +1,9 @@
 import React from 'react';
 import type { OnRetry } from './ErrorDisplay';
 export declare const ErrorLoader: React.FC<{
-    error: Error;
-    keyboardShortcuts: boolean;
-    onRetry: OnRetry;
-    canHaveDismissButton: boolean;
-    calculateMetadata: boolean;
+    readonly error: Error;
+    readonly keyboardShortcuts: boolean;
+    readonly onRetry: OnRetry;
+    readonly canHaveDismissButton: boolean;
+    readonly calculateMetadata: boolean;
 }>;

package/dist/error-overlay/remotion-overlay/ErrorMessage.d.ts

@@ -1,4 +1,4 @@
 import React from 'react';
 export declare const ErrorMessage: React.FC<{
-    message: string;
+    readonly message: string;
 }>;

package/dist/error-overlay/remotion-overlay/ErrorTitle.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 export declare const ErrorTitle: React.FC<{
-    name: string;
-    message: string;
-    symbolicating: boolean;
-    canHaveDismissButton: boolean;
+    readonly name: string;
+    readonly message: string;
+    readonly symbolicating: boolean;
+    readonly canHaveDismissButton: boolean;
 }>;

package/dist/error-overlay/remotion-overlay/HelpLink.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import type { THelpLink } from './get-help-link';
 export declare const HelpLink: React.FC<{
-    canHaveKeyboardShortcuts: boolean;
-    link: THelpLink;
+    readonly canHaveKeyboardShortcuts: boolean;
+    readonly link: THelpLink;
 }>;

package/dist/error-overlay/remotion-overlay/OpenInEditor.d.ts

@@ -1,6 +1,6 @@
 import type { SymbolicatedStackFrame } from '@remotion/studio-shared';
 import React from 'react';
 export declare const OpenInEditor: React.FC<{
-    stack: SymbolicatedStackFrame;
-    canHaveKeyboardShortcuts: boolean;
+    readonly stack: SymbolicatedStackFrame;
+    readonly canHaveKeyboardShortcuts: boolean;
 }>;

package/dist/error-overlay/remotion-overlay/SearchGitHubIssues.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
 export declare const SearchGithubIssues: React.FC<{
-    message: string;
-    canHaveKeyboardShortcuts: boolean;
+    readonly message: string;
+    readonly canHaveKeyboardShortcuts: boolean;
 }>;

package/dist/error-overlay/remotion-overlay/StackFrame.d.ts

@@ -1,8 +1,8 @@
 import type { SymbolicatedStackFrame } from '@remotion/studio-shared';
 import React from 'react';
 export declare const StackElement: React.FC<{
-    s: SymbolicatedStackFrame;
-    lineNumberWidth: number;
-    isFirst: boolean;
-    defaultFunctionName: string;
+    readonly s: SymbolicatedStackFrame;
+    readonly lineNumberWidth: number;
+    readonly isFirst: boolean;
+    readonly defaultFunctionName: string;
 }>;

package/dist/error-overlay/remotion-overlay/carets.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
 export declare const CaretRight: () => import("react/jsx-runtime").JSX.Element;
 export declare const CaretDown: React.FC<{
-    invert: boolean;
+    readonly invert: boolean;
 }>;

package/dist/esm/internals.mjs

@@ -10431,7 +10431,7 @@ var getZodIfPossible = async () => {
   try {
     const { z } = await import("zod");
     return z;
-  } catch (err) {
+  } catch {
     return null;
   }
 };
@@ -10439,7 +10439,7 @@ var getZTypesIfPossible = async () => {
   try {
     const mod = await import("@remotion/zod-types");
     return mod;
-  } catch (err) {
+  } catch {
     return null;
   }
 };
@@ -26137,7 +26137,9 @@ var buttonRow = {
   flexDirection: "row",
   justifyContent: "flex-end"
 };
-var RenderStatusModal = ({ jobId }) => {
+var RenderStatusModal = ({
+  jobId
+}) => {
   const { setSelectedModal } = useContext76(ModalsContext);
   const { jobs } = useContext76(RenderQueueContext);
   const job = jobs.find((j) => j.id === jobId);

package/dist/helpers/colors.d.ts

@@ -24,4 +24,4 @@ export declare const TIMELINE_TRACK_SEPARATOR = "rgba(0, 0, 0, 0.3)";
 export declare const getBackgroundFromHoverState: ({ selected, hovered, }: {
     selected: boolean;
     hovered: boolean;
-}) => "transparent" | "rgba(255, 255, 255, 0.06)" | "hsla(0, 0%, 100%, 0.15)" | "hsla(0, 0%, 100%, 0.25)";
+}) => "hsla(0, 0%, 100%, 0.15)" | "hsla(0, 0%, 100%, 0.25)" | "rgba(255, 255, 255, 0.06)" | "transparent";

package/dist/helpers/presets-labels.d.ts

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

package/dist/hot-middleware-client/process-update.js

@@ -12,7 +12,7 @@ const url_state_1 = require("../helpers/url-state");
 if (!__webpack_module__.hot) {
     throw new Error('[Fast refresh] Hot Module Replacement is disabled.');
 }
-const hmrDocsUrl = 'https://webpack.js.org/concepts/hot-module-replacement/'; // eslint-disable-line max-len
+const hmrDocsUrl = 'https://webpack.js.org/concepts/hot-module-replacement/';
 let lastHash;
 const failureStatuses = { abort: 1, fail: 1 };
 const applyOptions = {

package/dist/icons/caret.d.ts

@@ -2,5 +2,5 @@ import React from 'react';
 export declare const CaretRight: () => import("react/jsx-runtime").JSX.Element;
 export declare const CaretDown: () => import("react/jsx-runtime").JSX.Element;
 export declare const AngleDown: React.FC<{
-    down: boolean;
+    readonly down: boolean;
 }>;

package/dist/icons/folder.d.ts

@@ -1,11 +1,11 @@
 import type { SVGProps } from 'react';
 import React from 'react';
 export declare const CollapsedFolderIcon: React.FC<SVGProps<SVGSVGElement> & {
-    color: string;
+    readonly color: string;
 }>;
 export declare const ExpandedFolderIcon: React.FC<SVGProps<SVGSVGElement> & {
-    color: string;
+    readonly color: string;
 }>;
 export declare const ExpandedFolderIconSolid: React.FC<SVGProps<SVGSVGElement> & {
-    color: string;
+    readonly color: string;
 }>;

package/dist/icons/plus.d.ts

@@ -1,5 +1,5 @@
 import type { SVGProps } from 'react';
 import React from 'react';
 export declare const Plus: React.FC<SVGProps<SVGSVGElement> & {
-    color: string;
+    readonly color: string;
 }>;

package/dist/icons/render.d.ts

@@ -1,9 +1,9 @@
 import type { SVGProps } from 'react';
 import React from 'react';
 export declare const RenderIcon: React.FC<{
-    svgProps: SVGProps<SVGSVGElement>;
+    readonly svgProps: SVGProps<SVGSVGElement>;
 }>;
 export declare const ThinRenderIcon: React.FC<{
-    svgProps: SVGProps<SVGSVGElement>;
-    fill: string;
+    readonly svgProps: SVGProps<SVGSVGElement>;
+    readonly fill: string;
 }>;

package/dist/icons/still.d.ts

@@ -1,5 +1,5 @@
 import type { SVGProps } from 'react';
 import React from 'react';
 export declare const StillIcon: React.FC<SVGProps<SVGSVGElement> & {
-    color: string;
+    readonly color: string;
 }>;

package/dist/icons/video.d.ts

@@ -1,5 +1,5 @@
 import type { SVGProps } from 'react';
 import React from 'react';
 export declare const FilmIcon: React.FC<SVGProps<SVGSVGElement> & {
-    color: string;
+    readonly color: string;
 }>;

package/dist/state/folders.d.ts

@@ -8,6 +8,6 @@ type TFolderContext = {
 };
 export declare const FolderContext: React.Context<TFolderContext>;
 export declare const FolderContextProvider: React.FC<{
-    children: React.ReactNode;
+    readonly children: React.ReactNode;
 }>;
 export {};

package/dist/state/highest-z-index.d.ts

@@ -6,6 +6,6 @@ type HighestZIndexContainer = {
 };
 export declare const HighestZIndexContext: React.Context<HighestZIndexContainer>;
 export declare const HighestZIndexProvider: React.FC<{
-    children: React.ReactNode;
+    readonly children: React.ReactNode;
 }>;
 export {};

package/dist/state/keybindings.d.ts

@@ -15,6 +15,6 @@ type KeybindingContextType = {
 };
 export declare const KeybindingContext: React.Context<KeybindingContextType>;
 export declare const KeybindingContextProvider: React.FC<{
-    children: React.ReactNode;
+    readonly children: React.ReactNode;
 }>;
 export {};

package/dist/state/preview-size.d.ts

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

package/dist/state/timeline-zoom.d.ts

@@ -6,5 +6,5 @@ export declare const TimelineZoomCtx: React.Context<{
     setZoom: (compositionId: string, prev: (prevZoom: number) => number) => void;
 }>;
 export declare const TimelineZoomContext: React.FC<{
-    children: React.ReactNode;
+    readonly children: React.ReactNode;
 }>;

package/dist/state/z-index.d.ts

@@ -1,8 +1,8 @@
 import React from 'react';
 export declare const HigherZIndex: React.FC<{
-    onEscape: () => void;
-    onOutsideClick: (target: Node) => void;
-    children: React.ReactNode;
+    readonly onEscape: () => void;
+    readonly onOutsideClick: (target: Node) => void;
+    readonly children: React.ReactNode;
 }>;
 export declare const useZIndex: () => {
     currentZIndex: number;

package/eslint.config.mjs

@@ -0,0 +1,40 @@
+import {remotionFlatConfig} from '@remotion/eslint-config-internal';
+
+const config = remotionFlatConfig({react: true});
+
+export default {
+	...config,
+	rules: {
+		...config.rules,
+		'no-console': 'error',
+		'no-restricted-imports': [
+			'error',
+			{
+				patterns: [
+					'@remotion/*/src',
+					'@remotion/*/src/*',
+					'@remotion/*/dist/*',
+					'remotion/src/*',
+				],
+			},
+		],
+		'@typescript-eslint/no-use-before-define': 'off',
+		'@typescript-eslint/no-restricted-imports': [
+			'error',
+			{
+				paths: [
+					{
+						name: 'zod',
+						message: 'Can only import zod as a type',
+						allowTypeImports: true,
+					},
+					{
+						name: '@remotion/zod-types',
+						message: 'Can only import @remotion/zod-types as a type',
+						allowTypeImports: true,
+					},
+				],
+			},
+		],
+	},
+};

package/package.json

@@ -3,7 +3,7 @@
     "url": "https://github.com/remotion-dev/remotion/tree/main/packages/studio"
   },
   "name": "@remotion/studio",
-  "version": "4.0.225",
+  "version": "4.0.227",
   "description": "APIs for interacting with the Remotion Studio",
   "main": "dist",
   "sideEffects": false,
@@ -18,18 +18,20 @@
     "memfs": "3.4.3",
     "source-map": "0.7.3",
     "open": "^8.4.2",
-    "@remotion/player": "4.0.225",
-    "@remotion/media-utils": "4.0.225",
-    "@remotion/renderer": "4.0.225",
-    "@remotion/studio-shared": "4.0.225",
-    "remotion": "4.0.225"
+    "remotion": "4.0.227",
+    "@remotion/player": "4.0.227",
+    "@remotion/media-utils": "4.0.227",
+    "@remotion/renderer": "4.0.227",
+    "@remotion/studio-shared": "4.0.227"
   },
   "devDependencies": {
     "react": "18.3.1",
     "react-dom": "18.3.1",
     "@types/semver": "^7.3.4",
     "zod": "3.22.3",
-    "@remotion/zod-types": "4.0.225"
+    "eslint": "9.14.0",
+    "@remotion/zod-types": "4.0.227",
+    "@remotion/eslint-config-internal": "4.0.227"
   },
   "publishConfig": {
     "access": "public"
@@ -52,8 +54,8 @@
   },
   "homepage": "https://www.remotion.dev/docs/studio/api",
   "scripts": {
-    "lint": "eslint src --ext ts,tsx",
-    "make": "bun --env-file=../.env.bundle bundle.ts",
+    "lint": "eslint src",
+    "make": "tsc -d && bun --env-file=../.env.bundle bundle.ts",
     "test": "bun test src",
     "formatting": "prettier src --check"
   }