@remotion/studio 4.0.463 → 4.0.465

package/dist/esm/renderEntry.mjs

@@ -1,6 +1,7 @@
 import {
-  __require
-} from "./chunk-5gtx3pza.js";
+  __require,
+  __toESM
+} from "./chunk-6jf1natv.js";
 
 // src/renderEntry.tsx
 import { useContext, useEffect, useRef, useState } from "react";
@@ -206,7 +207,7 @@ var renderContent = (Root) => {
     renderToDOM(/* @__PURE__ */ jsx("div", {
       children: /* @__PURE__ */ jsx(DelayedSpinner, {})
     }));
-    import("./chunk-b0m62frw.js").then(({ StudioInternals }) => {
+    import("./chunk-pqk2qd0d.js").then(({ StudioInternals }) => {
       window.remotion_isStudio = true;
       window.remotion_isReadOnlyStudio = true;
       window.remotion_inputProps = "{}";

package/dist/helpers/client-id.d.ts

@@ -1,15 +1,8 @@
 import type { EventSourceEvent } from '@remotion/studio-shared';
 import React from 'react';
-type PreviewServerState = {
-    type: 'init';
-} | {
-    type: 'connected';
-    clientId: string;
-} | {
-    type: 'disconnected';
-};
+import { type PreviewServerConnectionState } from './preview-server-events';
 type Context = {
-    previewServerState: PreviewServerState;
+    previewServerState: PreviewServerConnectionState;
     subscribeToEvent: (type: EventSourceEvent['type'], listener: (event: EventSourceEvent) => void) => () => void;
 };
 export declare const StudioServerConnectionCtx: React.Context<Context>;

package/dist/helpers/client-id.js

@@ -43,6 +43,7 @@ const remotion_1 = require("remotion");
 const NotificationCenter_1 = require("../components/Notifications/NotificationCenter");
 const PlayBeepSound_1 = __importDefault(require("../components/PlayBeepSound"));
 const context_1 = require("../components/RenderQueue/context");
+const preview_server_events_1 = require("./preview-server-events");
 const url_state_1 = require("./url-state");
 exports.StudioServerConnectionCtx = react_1.default.createContext({
     previewServerState: {
@@ -60,20 +61,20 @@ const PreviewServerConnection = ({ children, readOnlyStudio }) => {
             listeners.current = listeners.current.filter((l) => l.type !== type || l.listener !== listener);
         };
     }, []);
-    const openEventSource = (0, react_1.useCallback)(() => {
-        const source = new EventSource('/events');
-        source.addEventListener('message', (event) => {
-            var _a, _b, _c;
-            const newEvent = JSON.parse(event.data);
+    const [state, setState] = react_1.default.useState({
+        type: 'init',
+    });
+    (0, react_1.useEffect)(() => {
+        if (readOnlyStudio) {
+            return;
+        }
+        const handleEvent = (newEvent) => {
+            var _a, _b;
             if (newEvent.type === 'new-input-props' ||
                 newEvent.type === 'new-env-variables') {
                 (0, url_state_1.reloadUrl)();
             }
             if (newEvent.type === 'init') {
-                setState({
-                    type: 'connected',
-                    clientId: newEvent.clientId,
-                });
                 listeners.current.forEach((l) => {
                     if (l.type === 'undo-redo-stack-changed') {
                         l.listener({
@@ -108,45 +109,19 @@ const PreviewServerConnection = ({ children, readOnlyStudio }) => {
                     detail: payload,
                 }));
             }
-            if (newEvent.type === 'hmr') {
-                (_c = window.__remotion_processHmrEvent) === null || _c === void 0 ? void 0 : _c.call(window, newEvent.hmrEvent);
-            }
             listeners.current.forEach((l) => {
                 if (l.type === newEvent.type) {
                     l.listener(newEvent);
                 }
             });
-        });
-        source.addEventListener('open', () => {
-            source.addEventListener('error', () => {
-                setState({ type: 'disconnected' });
-                // Display an error message that the studio server has disconnected.
-                source === null || source === void 0 ? void 0 : source.close();
-                // Retry later
-                setTimeout(() => {
-                    openEventSource();
-                }, 1000);
-            }, { once: true });
-        });
-        const close = () => {
-            source.close();
         };
-        return {
-            close,
-        };
-    }, []);
-    (0, react_1.useEffect)(() => {
-        if (readOnlyStudio) {
-            return;
-        }
-        const { close } = openEventSource();
+        const unsubscribeFromEvents = (0, preview_server_events_1.subscribeToPreviewServerEvents)(handleEvent);
+        const unsubscribeFromConnectionState = (0, preview_server_events_1.subscribeToPreviewServerConnectionState)(setState);
         return () => {
-            close();
+            unsubscribeFromEvents();
+            unsubscribeFromConnectionState();
         };
-    }, [openEventSource, readOnlyStudio]);
-    const [state, setState] = react_1.default.useState({
-        type: 'init',
-    });
+    }, [readOnlyStudio]);
     const context = (0, react_1.useMemo)(() => {
         return {
             previewServerState: state,

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

@@ -0,0 +1,36 @@
+export type Rgba = {
+    r: number;
+    g: number;
+    b: number;
+    a: number;
+};
+export type Hsva = {
+    h: number;
+    s: number;
+    v: number;
+    a: number;
+};
+export declare const clamp: (value: number, min: number, max: number) => number;
+export declare const parseAnyColor: (input: string) => Rgba;
+export declare const formatRgbHex: ({ r, g, b }: {
+    r: number;
+    g: number;
+    b: number;
+}) => string;
+export declare const formatRgba: ({ r, g, b, a }: Rgba) => string;
+export declare const rgbToHsv: ({ r, g, b, }: {
+    r: number;
+    g: number;
+    b: number;
+}) => Hsva;
+export declare const hsvToRgb: ({ h, s, v, }: {
+    h: number;
+    s: number;
+    v: number;
+}) => {
+    r: number;
+    g: number;
+    b: number;
+};
+export declare const rgbaToHsva: (rgba: Rgba) => Hsva;
+export declare const hsvaToRgba: (hsva: Hsva) => Rgba;

package/dist/helpers/color-conversion.js

@@ -0,0 +1,121 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.hsvaToRgba = exports.rgbaToHsva = exports.hsvToRgb = exports.rgbToHsv = exports.formatRgba = exports.formatRgbHex = exports.parseAnyColor = exports.clamp = void 0;
+const no_react_1 = require("remotion/no-react");
+const clamp = (value, min, max) => {
+    return Math.min(Math.max(value, min), max);
+};
+exports.clamp = clamp;
+const componentToHex = (c) => {
+    return Math.round((0, exports.clamp)(c, 0, 255))
+        .toString(16)
+        .padStart(2, '0');
+};
+// Always returns a normalized {r, g, b, a (0-255)} object,
+// regardless of whether the input was a hex, rgb(), rgba(), or named color.
+// Falls back to opaque black when parsing fails.
+const parseAnyColor = (input) => {
+    try {
+        const argb = no_react_1.NoReactInternals.processColor(input)
+            .toString(16)
+            .padStart(8, '0');
+        const a = parseInt(argb.slice(0, 2), 16);
+        const r = parseInt(argb.slice(2, 4), 16);
+        const g = parseInt(argb.slice(4, 6), 16);
+        const b = parseInt(argb.slice(6, 8), 16);
+        return { r, g, b, a };
+    }
+    catch (_a) {
+        return { r: 0, g: 0, b: 0, a: 255 };
+    }
+};
+exports.parseAnyColor = parseAnyColor;
+const formatRgbHex = ({ r, g, b }) => {
+    return `#${componentToHex(r)}${componentToHex(g)}${componentToHex(b)}`;
+};
+exports.formatRgbHex = formatRgbHex;
+const formatRgba = ({ r, g, b, a }) => {
+    if (a >= 255) {
+        return (0, exports.formatRgbHex)({ r, g, b });
+    }
+    const opacity = Number((a / 255).toFixed(2));
+    return `rgba(${Math.round(r)}, ${Math.round(g)}, ${Math.round(b)}, ${opacity})`;
+};
+exports.formatRgba = formatRgba;
+const rgbToHsv = ({ r, g, b, }) => {
+    const rn = r / 255;
+    const gn = g / 255;
+    const bn = b / 255;
+    const max = Math.max(rn, gn, bn);
+    const min = Math.min(rn, gn, bn);
+    const delta = max - min;
+    let h = 0;
+    if (delta !== 0) {
+        if (max === rn) {
+            h = ((gn - bn) / delta) % 6;
+        }
+        else if (max === gn) {
+            h = (bn - rn) / delta + 2;
+        }
+        else {
+            h = (rn - gn) / delta + 4;
+        }
+        h *= 60;
+        if (h < 0) {
+            h += 360;
+        }
+    }
+    const s = max === 0 ? 0 : delta / max;
+    const v = max;
+    return { h, s, v, a: 1 };
+};
+exports.rgbToHsv = rgbToHsv;
+const hsvToRgb = ({ h, s, v, }) => {
+    const c = v * s;
+    const hh = (h % 360) / 60;
+    const x = c * (1 - Math.abs((hh % 2) - 1));
+    let r1 = 0;
+    let g1 = 0;
+    let b1 = 0;
+    if (hh >= 0 && hh < 1) {
+        r1 = c;
+        g1 = x;
+    }
+    else if (hh >= 1 && hh < 2) {
+        r1 = x;
+        g1 = c;
+    }
+    else if (hh >= 2 && hh < 3) {
+        g1 = c;
+        b1 = x;
+    }
+    else if (hh >= 3 && hh < 4) {
+        g1 = x;
+        b1 = c;
+    }
+    else if (hh >= 4 && hh < 5) {
+        r1 = x;
+        b1 = c;
+    }
+    else {
+        r1 = c;
+        b1 = x;
+    }
+    const m = v - c;
+    return {
+        r: Math.round((r1 + m) * 255),
+        g: Math.round((g1 + m) * 255),
+        b: Math.round((b1 + m) * 255),
+    };
+};
+exports.hsvToRgb = hsvToRgb;
+const rgbaToHsva = (rgba) => {
+    const { h, s, v } = (0, exports.rgbToHsv)(rgba);
+    return { h, s, v, a: rgba.a / 255 };
+};
+exports.rgbaToHsva = rgbaToHsva;
+const hsvaToRgba = (hsva) => {
+    const { r, g, b } = (0, exports.hsvToRgb)(hsva);
+    return { r, g, b, a: Math.round(hsva.a * 255) };
+};
+exports.hsvaToRgba = hsvaToRgba;

package/dist/helpers/inject-css.js

@@ -84,7 +84,7 @@ const makeDefaultGlobalCSS = () => {
   
   input:focus,
   textarea:focus,
-  button:focus:not(.__remotion_input_dragger),
+  button:focus:not(.__remotion_input_dragger):not(.__remotion_color_swatch),
   a:focus {
     outline: none;
     box-shadow:
@@ -93,12 +93,9 @@ const makeDefaultGlobalCSS = () => {
       inset 1px -1px #555,
       inset -1px 1px #555;
   }
-  
-  input[type='color'].__remotion_color_picker::-webkit-color-swatch-wrapper {
-    padding: 0;
-  }
-  input[type='color'].__remotion_color_picker::-webkit-color-swatch {
-    border: none;
+
+  .__remotion_color_swatch:focus {
+    outline: none;
   }
   
   .__remotion_thumb,

package/dist/helpers/migrate-expanded-tracks-for-subscription-key.d.ts

@@ -0,0 +1,3 @@
+import type { SequencePropsSubscriptionKey } from 'remotion';
+import type { BooleanMap } from './persist-boolean-map';
+export declare const migrateExpandedTracksForSubscriptionKey: (prev: BooleanMap, oldKey: SequencePropsSubscriptionKey, newKey: SequencePropsSubscriptionKey) => BooleanMap | null;

package/dist/helpers/migrate-expanded-tracks-for-subscription-key.js

@@ -0,0 +1,26 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.migrateExpandedTracksForSubscriptionKey = void 0;
+const studio_shared_1 = require("@remotion/studio-shared");
+const migrateExpandedTracksForSubscriptionKey = (prev, oldKey, newKey) => {
+    const oldPrefix = (0, studio_shared_1.stringifySequenceExpandedRowKey)(oldKey);
+    const newPrefix = (0, studio_shared_1.stringifySequenceExpandedRowKey)(newKey);
+    if (oldPrefix === newPrefix) {
+        return null;
+    }
+    let changed = false;
+    const next = { ...prev };
+    for (const [key, value] of Object.entries(prev)) {
+        if (!value || !key.startsWith(oldPrefix + '.')) {
+            continue;
+        }
+        const migratedKey = newPrefix + key.slice(oldPrefix.length);
+        if (!next[migratedKey]) {
+            next[migratedKey] = true;
+        }
+        delete next[key];
+        changed = true;
+    }
+    return changed ? next : null;
+};
+exports.migrateExpandedTracksForSubscriptionKey = migrateExpandedTracksForSubscriptionKey;

package/dist/helpers/preview-server-events.d.ts

@@ -0,0 +1,15 @@
+import type { EventSourceEvent } from '@remotion/studio-shared';
+export type PreviewServerConnectionState = {
+    type: 'init';
+} | {
+    type: 'connected';
+    clientId: string;
+} | {
+    type: 'disconnected';
+};
+type MessageListener = (event: EventSourceEvent) => void;
+type ConnectionStateListener = (state: PreviewServerConnectionState) => void;
+export declare const ensurePreviewServerEventSource: () => void;
+export declare const subscribeToPreviewServerEvents: (listener: MessageListener) => () => void;
+export declare const subscribeToPreviewServerConnectionState: (listener: ConnectionStateListener) => () => void;
+export {};

package/dist/helpers/preview-server-events.js

@@ -0,0 +1,81 @@
+"use strict";
+/// <reference lib="dom" />
+/// <reference lib="dom.iterable" />
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.subscribeToPreviewServerConnectionState = exports.subscribeToPreviewServerEvents = exports.ensurePreviewServerEventSource = void 0;
+let source = null;
+let connectionState = { type: 'init' };
+let lastInitEvent = null;
+const messageListeners = new Set();
+const connectionStateListeners = new Set();
+const notifyConnectionState = () => {
+    for (const listener of connectionStateListeners) {
+        listener(connectionState);
+    }
+};
+const dispatch = (event) => {
+    for (const listener of messageListeners) {
+        listener(event);
+    }
+};
+const openEventSource = () => {
+    if (source) {
+        return;
+    }
+    source = new EventSource('/events');
+    source.addEventListener('message', (event) => {
+        try {
+            const newEvent = JSON.parse(event.data);
+            if (newEvent.type === 'init') {
+                lastInitEvent = newEvent;
+                connectionState = {
+                    type: 'connected',
+                    clientId: newEvent.clientId,
+                };
+                notifyConnectionState();
+            }
+            dispatch(newEvent);
+        }
+        catch (_a) {
+            // Ignore parse errors
+        }
+    });
+    source.addEventListener('open', () => {
+        source === null || source === void 0 ? void 0 : source.addEventListener('error', () => {
+            connectionState = { type: 'disconnected' };
+            notifyConnectionState();
+            source === null || source === void 0 ? void 0 : source.close();
+            source = null;
+            setTimeout(() => {
+                openEventSource();
+            }, 1000);
+        }, { once: true });
+    });
+};
+const ensurePreviewServerEventSource = () => {
+    if (typeof window === 'undefined' || typeof EventSource === 'undefined') {
+        return;
+    }
+    openEventSource();
+};
+exports.ensurePreviewServerEventSource = ensurePreviewServerEventSource;
+const subscribeToPreviewServerEvents = (listener) => {
+    (0, exports.ensurePreviewServerEventSource)();
+    messageListeners.add(listener);
+    if (lastInitEvent && connectionState.type === 'connected') {
+        listener(lastInitEvent);
+    }
+    return () => {
+        messageListeners.delete(listener);
+    };
+};
+exports.subscribeToPreviewServerEvents = subscribeToPreviewServerEvents;
+const subscribeToPreviewServerConnectionState = (listener) => {
+    (0, exports.ensurePreviewServerEventSource)();
+    connectionStateListeners.add(listener);
+    listener(connectionState);
+    return () => {
+        connectionStateListeners.delete(listener);
+    };
+};
+exports.subscribeToPreviewServerConnectionState = subscribeToPreviewServerConnectionState;

package/dist/helpers/resolved-stack-to-symbolicated.d.ts

@@ -0,0 +1,3 @@
+import type { SymbolicatedStackFrame } from '@remotion/studio-shared';
+import type { ResolvedStackLocation } from 'remotion';
+export declare const resolvedStackToSymbolicated: (location: ResolvedStackLocation | null) => SymbolicatedStackFrame | null;

package/dist/helpers/resolved-stack-to-symbolicated.js

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.resolvedStackToSymbolicated = void 0;
+const resolvedStackToSymbolicated = (location) => {
+    if (!(location === null || location === void 0 ? void 0 : location.source)) {
+        return null;
+    }
+    return {
+        originalFileName: location.source,
+        originalLineNumber: location.line,
+        originalColumnNumber: location.column,
+        originalFunctionName: null,
+        originalScriptCode: null,
+    };
+};
+exports.resolvedStackToSymbolicated = resolvedStackToSymbolicated;

package/dist/helpers/timeline-layout.d.ts

@@ -9,7 +9,6 @@ export declare const TIMELINE_BORDER = 1;
 export declare const TIMELINE_ITEM_BORDER_BOTTOM = 1;
 export declare const TIMELINE_TRACK_EXPANDED_HEIGHT = 100;
 export declare const TREE_GROUP_ROW_HEIGHT = 22;
-export declare const EXPANDED_SECTION_PADDING_LEFT = 28;
 export declare const EXPANDED_SECTION_PADDING_RIGHT = 10;
 export type TimelineFieldOnSave = (value: unknown) => Promise<void>;
 export type TimelineFieldOnDragValueChange = (value: unknown) => void;

package/dist/helpers/timeline-layout.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getTimelineLayerHeight = exports.TIMELINE_LAYER_HEIGHT_AUDIO = exports.TIMELINE_LAYER_HEIGHT_IMAGE = exports.TIMELINE_LAYER_HEIGHT_VIDEO = exports.getExpandedTrackHeight = exports.getTreeRowHeight = exports.flattenVisibleTreeNodes = exports.buildTimelineTree = exports.EXPANDED_SECTION_PADDING_RIGHT = exports.EXPANDED_SECTION_PADDING_LEFT = exports.TREE_GROUP_ROW_HEIGHT = exports.TIMELINE_TRACK_EXPANDED_HEIGHT = exports.TIMELINE_ITEM_BORDER_BOTTOM = exports.TIMELINE_BORDER = exports.TIMELINE_PADDING = exports.getFieldsToShow = exports.getEffectFieldsToShow = exports.SCHEMA_FIELD_ROW_HEIGHT = void 0;
+exports.getTimelineLayerHeight = exports.TIMELINE_LAYER_HEIGHT_AUDIO = exports.TIMELINE_LAYER_HEIGHT_IMAGE = exports.TIMELINE_LAYER_HEIGHT_VIDEO = exports.getExpandedTrackHeight = exports.getTreeRowHeight = exports.flattenVisibleTreeNodes = exports.buildTimelineTree = exports.EXPANDED_SECTION_PADDING_RIGHT = exports.TREE_GROUP_ROW_HEIGHT = exports.TIMELINE_TRACK_EXPANDED_HEIGHT = exports.TIMELINE_ITEM_BORDER_BOTTOM = exports.TIMELINE_BORDER = exports.TIMELINE_PADDING = exports.getFieldsToShow = exports.getEffectFieldsToShow = exports.SCHEMA_FIELD_ROW_HEIGHT = void 0;
 const studio_shared_1 = require("@remotion/studio-shared");
 const studio_shared_2 = require("@remotion/studio-shared");
 Object.defineProperty(exports, "SCHEMA_FIELD_ROW_HEIGHT", { enumerable: true, get: function () { return studio_shared_2.SCHEMA_FIELD_ROW_HEIGHT; } });
@@ -11,12 +11,33 @@ exports.TIMELINE_BORDER = 1;
 exports.TIMELINE_ITEM_BORDER_BOTTOM = 1;
 exports.TIMELINE_TRACK_EXPANDED_HEIGHT = 100;
 exports.TREE_GROUP_ROW_HEIGHT = 22;
-exports.EXPANDED_SECTION_PADDING_LEFT = 28;
 exports.EXPANDED_SECTION_PADDING_RIGHT = 10;
 const buildTimelineTree = ({ sequence, nodePathInfo, getDragOverrides, codeValues, }) => {
     var _a;
     const roots = [];
     const { sequenceSubscriptionKey, index, auxiliaryKeys } = nodePathInfo;
+    const controlFields = (0, studio_shared_1.getFieldsToShow)({
+        schema: sequence.controls.schema,
+        currentRuntimeValueDotNotation: sequence.controls.currentRuntimeValueDotNotation,
+        getDragOverrides,
+        codeValues,
+        nodePath: sequenceSubscriptionKey,
+    });
+    if (controlFields && controlFields.length > 0) {
+        for (const f of controlFields) {
+            roots.push({
+                kind: 'field',
+                nodePathInfo: {
+                    sequenceSubscriptionKey,
+                    auxiliaryKeys: [...auxiliaryKeys, 'controls', f.key],
+                    index,
+                    numberOfSequencesWithThisNodePath: 0,
+                },
+                label: (_a = f.description) !== null && _a !== void 0 ? _a : f.key,
+                field: f,
+            });
+        }
+    }
     if (sequence.effects.length > 0) {
         roots.push({
             kind: 'group',
@@ -46,7 +67,12 @@ const buildTimelineTree = ({ sequence, nodePathInfo, getDragOverrides, codeValue
                             kind: 'field',
                             nodePathInfo: {
                                 sequenceSubscriptionKey,
-                                auxiliaryKeys: [...auxiliaryKeys, f.key],
+                                auxiliaryKeys: [
+                                    ...auxiliaryKeys,
+                                    'effects',
+                                    i.toString(),
+                                    f.key,
+                                ],
                                 index,
                                 numberOfSequencesWithThisNodePath: 0,
                             },
@@ -58,28 +84,6 @@ const buildTimelineTree = ({ sequence, nodePathInfo, getDragOverrides, codeValue
             }),
         });
     }
-    const controlFields = (0, studio_shared_1.getFieldsToShow)({
-        schema: sequence.controls.schema,
-        currentRuntimeValueDotNotation: sequence.controls.currentRuntimeValueDotNotation,
-        getDragOverrides,
-        codeValues,
-        nodePath: sequenceSubscriptionKey,
-    });
-    if (controlFields && controlFields.length > 0) {
-        for (const f of controlFields) {
-            roots.push({
-                kind: 'field',
-                nodePathInfo: {
-                    sequenceSubscriptionKey,
-                    auxiliaryKeys: [...auxiliaryKeys, 'controls', f.key],
-                    index,
-                    numberOfSequencesWithThisNodePath: 0,
-                },
-                label: (_a = f.description) !== null && _a !== void 0 ? _a : f.key,
-                field: f,
-            });
-        }
-    }
     return roots;
 };
 exports.buildTimelineTree = buildTimelineTree;

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.463",
+	"version": "4.0.465",
 	"description": "APIs for interacting with the Remotion Studio",
 	"main": "dist",
 	"scripts": {
@@ -25,14 +25,14 @@
 	},
 	"dependencies": {
 		"semver": "7.5.3",
-		"remotion": "4.0.463",
-		"@remotion/player": "4.0.463",
-		"@remotion/media-utils": "4.0.463",
-		"@remotion/renderer": "4.0.463",
-		"@remotion/web-renderer": "4.0.463",
-		"@remotion/studio-shared": "4.0.463",
-		"@remotion/timeline-utils": "4.0.463",
-		"@remotion/zod-types": "4.0.463",
+		"remotion": "4.0.465",
+		"@remotion/player": "4.0.465",
+		"@remotion/media-utils": "4.0.465",
+		"@remotion/renderer": "4.0.465",
+		"@remotion/web-renderer": "4.0.465",
+		"@remotion/studio-shared": "4.0.465",
+		"@remotion/timeline-utils": "4.0.465",
+		"@remotion/zod-types": "4.0.465",
 		"@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.463",
+		"@remotion/eslint-config-internal": "4.0.465",
 		"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 {};