@remotion/studio 4.0.462 → 4.0.464

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

@@ -4,6 +4,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.enableHotMiddleware = void 0;
 const studio_shared_1 = require("@remotion/studio-shared");
+const preview_server_events_1 = require("../helpers/preview-server-events");
 const process_update_1 = require("./process-update");
 function createReporter() {
     const styles = {
@@ -88,6 +89,7 @@ function processMessage(obj) {
 }
 let reporter;
 const singletonKey = '__webpack_hot_middleware_reporter__';
+let unsubscribeFromPreviewServerEvents = null;
 const enableHotMiddleware = () => {
     if (typeof window !== 'undefined') {
         if (!window[singletonKey]) {
@@ -98,24 +100,16 @@ const enableHotMiddleware = () => {
     window.__remotion_processHmrEvent = (hmrEvent) => {
         processMessage(hmrEvent);
     };
-    // Create a standalone SSE listener for HMR events immediately.
-    // This is needed because lazy-compiled modules require HMR updates
-    // to deliver compiled code, but the React-managed /events SSE
-    // (in PreviewServerConnection) only connects after React mounts —
-    // which itself depends on lazy modules loading first.
+    // Connect to /events immediately so HMR works before React mounts.
+    // PreviewServerConnection reuses the same EventSource via preview-server-events.
     if (typeof window !== 'undefined' && typeof EventSource !== 'undefined') {
-        const source = new EventSource('/events');
-        source.addEventListener('message', (event) => {
-            try {
-                const parsed = JSON.parse(event.data);
-                if (parsed.type === 'hmr') {
-                    processMessage(parsed.hmrEvent);
+        if (!unsubscribeFromPreviewServerEvents) {
+            unsubscribeFromPreviewServerEvents = (0, preview_server_events_1.subscribeToPreviewServerEvents)((event) => {
+                if (event.type === 'hmr') {
+                    processMessage(event.hmrEvent);
                 }
-            }
-            catch (_a) {
-                // Ignore parse errors
-            }
-        });
+            });
+        }
     }
 };
 exports.enableHotMiddleware = enableHotMiddleware;

package/package.json

@@ -3,7 +3,7 @@
 		"url": "https://github.com/remotion-dev/remotion/tree/main/packages/studio"
 	},
 	"name": "@remotion/studio",
-	"version": "4.0.462",
+	"version": "4.0.464",
 	"description": "APIs for interacting with the Remotion Studio",
 	"main": "dist",
 	"scripts": {
@@ -25,14 +25,14 @@
 	},
 	"dependencies": {
 		"semver": "7.5.3",
-		"remotion": "4.0.462",
-		"@remotion/player": "4.0.462",
-		"@remotion/media-utils": "4.0.462",
-		"@remotion/renderer": "4.0.462",
-		"@remotion/web-renderer": "4.0.462",
-		"@remotion/studio-shared": "4.0.462",
-		"@remotion/timeline-utils": "4.0.462",
-		"@remotion/zod-types": "4.0.462",
+		"remotion": "4.0.464",
+		"@remotion/player": "4.0.464",
+		"@remotion/media-utils": "4.0.464",
+		"@remotion/renderer": "4.0.464",
+		"@remotion/web-renderer": "4.0.464",
+		"@remotion/studio-shared": "4.0.464",
+		"@remotion/timeline-utils": "4.0.464",
+		"@remotion/zod-types": "4.0.464",
 		"@jridgewell/trace-mapping": "0.3.31",
 		"mediabunny": "1.45.0",
 		"memfs": "3.4.3",
@@ -43,7 +43,7 @@
 		"react": "19.2.3",
 		"react-dom": "19.2.3",
 		"@types/semver": "7.5.3",
-		"@remotion/eslint-config-internal": "4.0.462",
+		"@remotion/eslint-config-internal": "4.0.464",
 		"eslint": "9.19.0",
 		"@typescript/native-preview": "7.0.0-dev.20260217.1"
 	},

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

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

package/dist/components/NewComposition/RemInputTypeColor.js

@@ -1,53 +0,0 @@
-"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 (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/components/Timeline/is-collapsed.d.ts

@@ -1,2 +0,0 @@
-import type { TrackWithHash } from '../../helpers/get-timeline-sequence-sort-key';
-export declare const isTrackHidden: (track: TrackWithHash) => boolean;

package/dist/components/Timeline/is-collapsed.js

@@ -1,10 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.isTrackHidden = void 0;
-const isTrackHidden = (track) => {
-    if (!track.sequence.parent) {
-        return false;
-    }
-    return !track.sequence.showInTimeline;
-};
-exports.isTrackHidden = isTrackHidden;

package/dist/helpers/color-math.d.ts

@@ -1 +0,0 @@
-export declare const colorWithNewOpacity: (color: string, opacity: number, zodTypes: typeof import("@remotion/zod-types")) => string;

package/dist/helpers/color-math.js

@@ -1,13 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.colorWithNewOpacity = void 0;
-const colorWithNewOpacity = (color, opacity, zodTypes) => {
-    const { r, g, b } = zodTypes.ZodZypesInternals.parseColor(color);
-    if (opacity >= 255) {
-        return `#${r.toString(16).padStart(2, '0')}${g
-            .toString(16)
-            .padStart(2, '0')}${b.toString(16).padStart(2, '0')}`;
-    }
-    return `rgba(${r}, ${g}, ${b}, ${(opacity / 255).toFixed(2)})`;
-};
-exports.colorWithNewOpacity = colorWithNewOpacity;