@remotion/studio 4.0.459 → 4.0.461

package/dist/Studio.d.ts

@@ -2,5 +2,4 @@ import React from 'react';
 export declare const Studio: React.FC<{
     readonly rootComponent: React.FC;
     readonly readOnly: boolean;
-    readonly visualModeEnabled: boolean;
 }>;

package/dist/Studio.js

@@ -15,17 +15,17 @@ const ResolveCompositionConfigInStudio_1 = require("./ResolveCompositionConfigIn
 const getServerDisconnectedDomElement = () => {
     return document.getElementById('server-disconnected-overlay');
 };
-const StudioInner = ({ rootComponent, readOnly, visualModeEnabled }) => {
+const StudioInner = ({ rootComponent, readOnly }) => {
     var _a, _b;
-    return (jsx_runtime_1.jsx(remotion_1.Internals.CompositionManagerProvider, { onlyRenderComposition: null, currentCompositionMetadata: null, initialCompositions: [], initialCanvasContent: null, children: jsx_runtime_1.jsx(remotion_1.Internals.RemotionRootContexts, { visualModeEnabled: visualModeEnabled, frameState: null, audioEnabled: window.remotion_audioEnabled, videoEnabled: window.remotion_videoEnabled, logLevel: (_a = window.remotion_logLevel) !== null && _a !== void 0 ? _a : 'info', numberOfAudioTags: window.remotion_numberOfAudioTags, audioLatencyHint: (_b = window.remotion_audioLatencyHint) !== null && _b !== void 0 ? _b : 'playback', children: jsx_runtime_1.jsx(use_static_files_1.StaticFilesProvider, { children: jsx_runtime_1.jsx(ResolveCompositionConfigInStudio_1.ResolveCompositionConfigInStudio, { children: jsx_runtime_1.jsxs(EditorContexts_1.EditorContexts, { readOnlyStudio: readOnly, children: [
+    return (jsx_runtime_1.jsx(remotion_1.Internals.CompositionManagerProvider, { onlyRenderComposition: null, currentCompositionMetadata: null, initialCompositions: [], initialCanvasContent: null, children: jsx_runtime_1.jsx(remotion_1.Internals.RemotionRootContexts, { frameState: null, audioEnabled: window.remotion_audioEnabled, videoEnabled: window.remotion_videoEnabled, logLevel: (_a = window.remotion_logLevel) !== null && _a !== void 0 ? _a : 'info', numberOfAudioTags: window.remotion_numberOfAudioTags, audioLatencyHint: (_b = window.remotion_audioLatencyHint) !== null && _b !== void 0 ? _b : 'playback', children: jsx_runtime_1.jsx(use_static_files_1.StaticFilesProvider, { children: jsx_runtime_1.jsx(ResolveCompositionConfigInStudio_1.ResolveCompositionConfigInStudio, { children: jsx_runtime_1.jsxs(EditorContexts_1.EditorContexts, { readOnlyStudio: readOnly, children: [
                             jsx_runtime_1.jsx(Editor_1.Editor, { readOnlyStudio: readOnly, Root: rootComponent }), readOnly
                                 ? null
                                 : (0, react_dom_1.createPortal)(jsx_runtime_1.jsx(ServerDisconnected_1.ServerDisconnected, {}), getServerDisconnectedDomElement())] }) }) }) }) }));
 };
-const Studio = ({ rootComponent, readOnly, visualModeEnabled }) => {
+const Studio = ({ rootComponent, readOnly }) => {
     (0, react_1.useLayoutEffect)(() => {
         (0, inject_css_1.injectCSS)();
     }, []);
-    return (jsx_runtime_1.jsx(FastRefreshProvider_1.FastRefreshProvider, { children: jsx_runtime_1.jsx(StudioInner, { rootComponent: rootComponent, readOnly: readOnly, visualModeEnabled: visualModeEnabled }) }));
+    return (jsx_runtime_1.jsx(FastRefreshProvider_1.FastRefreshProvider, { children: jsx_runtime_1.jsx(StudioInner, { rootComponent: rootComponent, readOnly: readOnly }) }));
 };
 exports.Studio = Studio;

package/dist/components/AudioWaveform.js

@@ -2,15 +2,11 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.AudioWaveform = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const timeline_utils_1 = require("@remotion/timeline-utils");
 const react_1 = require("react");
 const remotion_1 = require("remotion");
 const colors_1 = require("../helpers/colors");
 const timeline_layout_1 = require("../helpers/timeline-layout");
-const make_audio_waveform_worker_1 = require("../make-audio-waveform-worker");
-const draw_peaks_1 = require("./draw-peaks");
-const load_waveform_peaks_1 = require("./load-waveform-peaks");
-const looped_media_timeline_1 = require("./looped-media-timeline");
-const slice_waveform_peaks_1 = require("./slice-waveform-peaks");
 const EMPTY_PEAKS = new Float32Array(0);
 // Recreate the canvas after Fast Refresh because an already transferred canvas
 // cannot be handed to OffscreenCanvas again.
@@ -56,7 +52,13 @@ const drawLoopedWaveform = ({ canvas, peaks, volume, visualizationWidth, loopWid
     const targetCanvas = document.createElement('canvas');
     targetCanvas.width = Math.max(1, Math.ceil(loopWidth));
     targetCanvas.height = h;
-    (0, draw_peaks_1.drawBars)(targetCanvas, peaks, 'rgba(255, 255, 255, 0.6)', volume, targetCanvas.width);
+    (0, timeline_utils_1.drawBars)({
+        canvas: targetCanvas,
+        peaks,
+        color: 'rgba(255, 255, 255, 0.6)',
+        volume,
+        width: targetCanvas.width,
+    });
     canvas.width = w;
     canvas.height = h;
     const ctx = canvas.getContext('2d');
@@ -94,7 +96,7 @@ const AudioWaveform = ({ src, startFrom, durationInFrames, visualizationWidth, v
         const controller = new AbortController();
         setPeaks(null);
         setError(null);
-        (0, load_waveform_peaks_1.loadWaveformPeaks)(src, controller.signal)
+        (0, timeline_utils_1.loadWaveformPeaks)(src, controller.signal)
             .then((p) => {
             if (!controller.signal.aborted) {
                 setPeaks(p);
@@ -115,7 +117,7 @@ const AudioWaveform = ({ src, startFrom, durationInFrames, visualizationWidth, v
         if (!canvasElement || hasTransferredCanvas.current) {
             return;
         }
-        const worker = (0, make_audio_waveform_worker_1.makeAudioWaveformWorker)();
+        const worker = (0, timeline_utils_1.makeAudioWaveformWorker)();
         waveformWorker.current = worker;
         worker.addEventListener('message', (event) => {
             if (event.data.type === 'error') {
@@ -151,8 +153,8 @@ const AudioWaveform = ({ src, startFrom, durationInFrames, visualizationWidth, v
         if (canUseWorkerPath || !peaks) {
             return null;
         }
-        return (0, slice_waveform_peaks_1.sliceWaveformPeaks)({
-            durationInFrames: (0, looped_media_timeline_1.shouldTileLoopDisplay)(loopDisplay)
+        return (0, timeline_utils_1.sliceWaveformPeaks)({
+            durationInFrames: (0, timeline_utils_1.shouldTileLoopDisplay)(loopDisplay)
                 ? loopDisplay.durationInFrames
                 : durationInFrames,
             fps: vidConf.fps,
@@ -203,20 +205,26 @@ const AudioWaveform = ({ src, startFrom, durationInFrames, visualizationWidth, v
         }
         canvasElement.width = w;
         canvasElement.height = h;
-        if ((0, looped_media_timeline_1.shouldTileLoopDisplay)(loopDisplay)) {
+        if ((0, timeline_utils_1.shouldTileLoopDisplay)(loopDisplay)) {
             drawLoopedWaveform({
                 canvas: canvasElement,
                 peaks: portionPeaks !== null && portionPeaks !== void 0 ? portionPeaks : EMPTY_PEAKS,
                 volume: vol,
                 visualizationWidth,
-                loopWidth: (0, looped_media_timeline_1.getLoopDisplayWidth)({
+                loopWidth: (0, timeline_utils_1.getLoopDisplayWidth)({
                     visualizationWidth,
                     loopDisplay,
                 }),
             });
         }
         else {
-            (0, draw_peaks_1.drawBars)(canvasElement, portionPeaks !== null && portionPeaks !== void 0 ? portionPeaks : EMPTY_PEAKS, 'rgba(255, 255, 255, 0.6)', vol, w);
+            (0, timeline_utils_1.drawBars)({
+                canvas: canvasElement,
+                peaks: portionPeaks !== null && portionPeaks !== void 0 ? portionPeaks : EMPTY_PEAKS,
+                color: 'rgba(255, 255, 255, 0.6)',
+                volume: vol,
+                width: w,
+            });
         }
     }, [
         canUseWorkerPath,

package/dist/components/Checkbox.d.ts

@@ -1,8 +1,15 @@
 import React from 'react';
+declare const SIZES: {
+    readonly default: 20;
+    readonly small: 18;
+};
+export type CheckboxVariant = keyof typeof SIZES;
 export declare const Checkbox: React.FC<{
     readonly checked: boolean;
     readonly onChange: React.ChangeEventHandler<HTMLInputElement>;
     readonly name: string;
     readonly rounded?: boolean;
     readonly disabled?: boolean;
+    readonly variant?: CheckboxVariant;
 }>;
+export {};

package/dist/components/Checkbox.js

@@ -5,32 +5,46 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const colors_1 = require("../helpers/colors");
 const Checkmark_1 = require("../icons/Checkmark");
-const size = 20;
-const background = {
-    height: size,
-    width: size,
-    position: 'relative',
+const SIZES = {
+    default: 20,
+    small: 18,
 };
-const bullet = {
-    width: 10,
-    height: 10,
-    backgroundColor: colors_1.LIGHT_TEXT,
-    borderRadius: '50%',
+const BULLET_SIZES = {
+    default: 10,
+    small: 9,
 };
-const box = {
-    display: 'flex',
-    justifyContent: 'center',
-    alignItems: 'center',
-    position: 'absolute',
-    height: size,
-    width: size,
-    top: 0,
-    left: 0,
-    pointerEvents: 'none',
-    color: 'white',
+const CHECKMARK_SIZES = {
+    default: 14,
+    small: 13,
 };
-const Checkbox = ({ checked, onChange, disabled, name, rounded }) => {
+const Checkbox = ({ checked, onChange, disabled, name, rounded, variant = 'default' }) => {
     const ref = (0, react_1.useRef)(null);
+    const size = SIZES[variant];
+    const bulletSize = BULLET_SIZES[variant];
+    const checkmarkSize = CHECKMARK_SIZES[variant];
+    const background = (0, react_1.useMemo)(() => ({
+        height: size,
+        width: size,
+        position: 'relative',
+    }), [size]);
+    const bullet = (0, react_1.useMemo)(() => ({
+        width: bulletSize,
+        height: bulletSize,
+        backgroundColor: colors_1.LIGHT_TEXT,
+        borderRadius: '50%',
+    }), [bulletSize]);
+    const box = (0, react_1.useMemo)(() => ({
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center',
+        position: 'absolute',
+        height: size,
+        width: size,
+        top: 0,
+        left: 0,
+        pointerEvents: 'none',
+        color: 'white',
+    }), [size]);
     const input = (0, react_1.useMemo)(() => {
         return {
             appearance: 'none',
@@ -43,14 +57,14 @@ const Checkbox = ({ checked, onChange, disabled, name, rounded }) => {
             position: 'absolute',
             margin: 0,
         };
-    }, [disabled]);
+    }, [disabled, size]);
     (0, react_1.useEffect)(() => {
         if (ref.current) {
             ref.current.style.setProperty('border-radius', rounded ? '50%' : '0%', 'important');
         }
     }, [rounded]);
     return (jsx_runtime_1.jsxs("div", { style: background, children: [
-            jsx_runtime_1.jsx("input", { ref: ref, style: input, type: 'checkbox', checked: checked, onChange: onChange, disabled: disabled, name: name }), jsx_runtime_1.jsx("div", { style: box, children: checked ? rounded ? jsx_runtime_1.jsx("div", { style: bullet }) : jsx_runtime_1.jsx(Checkmark_1.Checkmark, {}) : null })
+            jsx_runtime_1.jsx("input", { ref: ref, style: input, type: 'checkbox', checked: checked, onChange: onChange, disabled: disabled, name: name }), jsx_runtime_1.jsx("div", { style: box, children: checked ? (rounded ? (jsx_runtime_1.jsx("div", { style: bullet })) : (jsx_runtime_1.jsx(Checkmark_1.Checkmark, { size: checkmarkSize }))) : null })
         ] }));
 };
 exports.Checkbox = Checkbox;

package/dist/components/Editor.js

@@ -49,6 +49,7 @@ const GlobalKeybindings_1 = require("./GlobalKeybindings");
 const Modals_1 = require("./Modals");
 const NotificationCenter_1 = require("./Notifications/NotificationCenter");
 const RenderErrorContext_1 = require("./RenderErrorContext");
+const SequencePropsSubscriptionProvider_1 = require("./SequencePropsSubscriptionProvider");
 const TopPanel_1 = require("./TopPanel");
 const background = {
     backgroundColor: colors_1.BACKGROUND,
@@ -90,14 +91,14 @@ const Editor = ({ Root, readOnlyStudio }) => {
     }, []);
     const compositionRenderErrorContextValue = (0, react_1.useMemo)(() => ({ setError: setRenderError, clearError }), [clearError]);
     const renderErrorContextValue = (0, react_1.useMemo)(() => ({ error: renderError }), [renderError]);
-    return (jsx_runtime_1.jsx(z_index_1.HigherZIndex, { onEscape: noop_1.noop, onOutsideClick: noop_1.noop, children: jsx_runtime_1.jsxs(timeline_zoom_1.TimelineZoomContext, { children: [
-                jsx_runtime_1.jsxs(remotion_1.Internals.CurrentScaleContext.Provider, { value: value, children: [
-                        jsx_runtime_1.jsx(ForceSpecificCursor_1.ForceSpecificCursor, {}), jsx_runtime_1.jsxs("div", { style: background, children: [
-                                jsx_runtime_1.jsx(remotion_1.Internals.CompositionRenderErrorContext.Provider, { value: compositionRenderErrorContextValue, children: canvasMounted ? jsx_runtime_1.jsx(MemoRoot, {}) : null }), jsx_runtime_1.jsxs(remotion_1.Internals.CanUseRemotionHooksProvider, { children: [
-                                        jsx_runtime_1.jsx(RenderErrorContext_1.RenderErrorContext.Provider, { value: renderErrorContextValue, children: jsx_runtime_1.jsx(EditorContent_1.EditorContent, { readOnlyStudio: readOnlyStudio, children: jsx_runtime_1.jsx(TopPanel_1.TopPanel, { drawRef: canvas_ref_1.drawRef, bufferStateDelayInMilliseconds: exports.BUFFER_STATE_DELAY_IN_MILLISECONDS, onMounted: onMounted, readOnlyStudio: readOnlyStudio }) }) }), jsx_runtime_1.jsx(GlobalKeybindings_1.GlobalKeybindings, {})
-                                    ] })
-                            ] })
-                    ] }), jsx_runtime_1.jsx(Modals_1.Modals, { readOnlyStudio: readOnlyStudio }), jsx_runtime_1.jsx(NotificationCenter_1.NotificationCenter, {})
-            ] }) }));
+    return (jsx_runtime_1.jsx(z_index_1.HigherZIndex, { onEscape: noop_1.noop, onOutsideClick: noop_1.noop, children: jsx_runtime_1.jsx(timeline_zoom_1.TimelineZoomContext, { children: jsx_runtime_1.jsxs(SequencePropsSubscriptionProvider_1.SequencePropsSubscriptionProvider, { children: [
+                    jsx_runtime_1.jsxs(remotion_1.Internals.CurrentScaleContext.Provider, { value: value, children: [
+                            jsx_runtime_1.jsx(ForceSpecificCursor_1.ForceSpecificCursor, {}), jsx_runtime_1.jsxs("div", { style: background, children: [
+                                    jsx_runtime_1.jsx(remotion_1.Internals.CompositionRenderErrorContext.Provider, { value: compositionRenderErrorContextValue, children: canvasMounted ? jsx_runtime_1.jsx(MemoRoot, {}) : null }), jsx_runtime_1.jsxs(remotion_1.Internals.CanUseRemotionHooksProvider, { children: [
+                                            jsx_runtime_1.jsx(RenderErrorContext_1.RenderErrorContext.Provider, { value: renderErrorContextValue, children: jsx_runtime_1.jsx(EditorContent_1.EditorContent, { readOnlyStudio: readOnlyStudio, children: jsx_runtime_1.jsx(TopPanel_1.TopPanel, { drawRef: canvas_ref_1.drawRef, bufferStateDelayInMilliseconds: exports.BUFFER_STATE_DELAY_IN_MILLISECONDS, onMounted: onMounted, readOnlyStudio: readOnlyStudio }) }) }), jsx_runtime_1.jsx(GlobalKeybindings_1.GlobalKeybindings, {})
+                                        ] })
+                                ] })
+                        ] }), jsx_runtime_1.jsx(Modals_1.Modals, { readOnlyStudio: readOnlyStudio }), jsx_runtime_1.jsx(NotificationCenter_1.NotificationCenter, {})
+                ] }) }) }));
 };
 exports.Editor = Editor;

package/dist/components/ExpandedTracksProvider.d.ts

@@ -1,9 +1,14 @@
 import React from 'react';
-type ExpandedTracksContextValue = {
-    readonly expandedTracks: Record<string, boolean>;
-    readonly toggleTrack: (id: string) => void;
+import type { SequenceNodePathInfo } from '../helpers/get-timeline-sequence-sort-key';
+export type GetIsExpanded = (nodePathInfo: SequenceNodePathInfo) => boolean;
+type ExpandedTracksGetterContextValue = {
+    readonly getIsExpanded: GetIsExpanded;
 };
-export declare const ExpandedTracksContext: React.Context<ExpandedTracksContextValue>;
+type ExpandedTracksSetterContextValue = {
+    readonly toggleTrack: (nodePathInfo: SequenceNodePathInfo) => void;
+};
+export declare const ExpandedTracksGetterContext: React.Context<ExpandedTracksGetterContextValue>;
+export declare const ExpandedTracksSetterContext: React.Context<ExpandedTracksSetterContextValue>;
 export declare const ExpandedTracksProvider: React.FC<{
     readonly children: React.ReactNode;
 }>;

package/dist/components/ExpandedTracksProvider.js

@@ -1,26 +1,56 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ExpandedTracksProvider = exports.ExpandedTracksContext = void 0;
+exports.ExpandedTracksProvider = exports.ExpandedTracksSetterContext = exports.ExpandedTracksGetterContext = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
-exports.ExpandedTracksContext = (0, react_1.createContext)({
-    expandedTracks: {},
+const nodePathInfoToKey = (info) => JSON.stringify([info.nodePath, info.index]);
+const LOCAL_STORAGE_KEY = 'remotion.editor.expandedTracks';
+const loadExpandedTracks = () => {
+    if (typeof window === 'undefined') {
+        return {};
+    }
+    const item = window.localStorage.getItem(LOCAL_STORAGE_KEY);
+    if (item === null) {
+        return {};
+    }
+    try {
+        const parsed = JSON.parse(item);
+        if (parsed && typeof parsed === 'object') {
+            return parsed;
+        }
+        return {};
+    }
+    catch (_a) {
+        return {};
+    }
+};
+exports.ExpandedTracksGetterContext = (0, react_1.createContext)({
+    getIsExpanded: () => {
+        throw new Error('ExpandedTracksGetterContext not initialized');
+    },
+});
+exports.ExpandedTracksSetterContext = (0, react_1.createContext)({
     toggleTrack: () => {
-        throw new Error('ExpandedTracksContext not initialized');
+        throw new Error('ExpandedTracksSetterContext not initialized');
     },
 });
 const ExpandedTracksProvider = ({ children }) => {
-    const [expandedTracks, setExpandedTracks] = (0, react_1.useState)({});
-    const toggleTrack = (0, react_1.useCallback)((id) => {
-        setExpandedTracks((prev) => ({
-            ...prev,
-            [id]: !prev[id],
-        }));
+    const [expandedTracks, setExpandedTracks] = (0, react_1.useState)(loadExpandedTracks);
+    const toggleTrack = (0, react_1.useCallback)((nodePathInfo) => {
+        setExpandedTracks((prev) => {
+            const key = nodePathInfoToKey(nodePathInfo);
+            const next = { ...prev, [key]: !prev[key] };
+            window.localStorage.setItem(LOCAL_STORAGE_KEY, JSON.stringify(next));
+            return next;
+        });
     }, []);
-    const value = (0, react_1.useMemo)(() => ({
-        expandedTracks,
-        toggleTrack,
-    }), [expandedTracks, toggleTrack]);
-    return (jsx_runtime_1.jsx(exports.ExpandedTracksContext.Provider, { value: value, children: children }));
+    const getterValue = (0, react_1.useMemo)(() => ({
+        getIsExpanded: (nodePathInfo) => {
+            var _a;
+            return (_a = expandedTracks[nodePathInfoToKey(nodePathInfo)]) !== null && _a !== void 0 ? _a : false;
+        },
+    }), [expandedTracks]);
+    const setterValue = (0, react_1.useMemo)(() => ({ toggleTrack }), [toggleTrack]);
+    return (jsx_runtime_1.jsx(exports.ExpandedTracksSetterContext.Provider, { value: setterValue, children: jsx_runtime_1.jsx(exports.ExpandedTracksGetterContext.Provider, { value: getterValue, children: children }) }));
 };
 exports.ExpandedTracksProvider = ExpandedTracksProvider;

package/dist/components/MenuBuildIndicator.js

@@ -22,7 +22,6 @@ const spinnerSize = 14;
 const spinner = {
     position: 'relative',
     width: spinnerSize,
-    marginTop: 4,
 };
 const noSpinner = {
     position: 'relative',
@@ -95,7 +94,7 @@ const MenuBuildIndicator = () => {
             window.remotion_finishedBuilding = undefined;
         };
     }, []);
-    return (jsx_runtime_1.jsxs("div", { style: cwd, title: window.remotion_cwd, children: [isClickable ? jsx_runtime_1.jsx(layout_1.Spacing, { x: 2 }) : null, isBuilding ? (jsx_runtime_1.jsx("div", { style: spinner, children: jsx_runtime_1.jsx(Spinner_1.Spinner, { duration: 0.5, size: spinnerSize }) })) : (jsx_runtime_1.jsx("div", { style: noSpinner })), isClickable ? jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.5 }) : null, isClickable ? (jsx_runtime_1.jsx("a", { style: projectNameHovered ? projectNameLinkHovered : projectNameLink, title: projectNameTitle, onClick: handleProjectNameClick, onPointerEnter: () => setProjectNameHovered(true), onPointerLeave: () => setProjectNameHovered(false), children: window.remotion_projectName })) : (window.remotion_projectName), jsx_runtime_1.jsx(MenuCompositionName_1.MenuCompositionName, {})
+    return (jsx_runtime_1.jsxs("div", { style: cwd, title: window.remotion_cwd, children: [isClickable ? jsx_runtime_1.jsx(layout_1.Spacing, { x: 2 }) : null, isBuilding ? (jsx_runtime_1.jsx("div", { style: spinner, children: jsx_runtime_1.jsx(Spinner_1.Spinner, { duration: 0.5, size: spinnerSize }) })) : (jsx_runtime_1.jsx("div", { style: noSpinner })), jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.5 }), isClickable ? (jsx_runtime_1.jsx("a", { style: projectNameHovered ? projectNameLinkHovered : projectNameLink, title: projectNameTitle, onClick: handleProjectNameClick, onPointerEnter: () => setProjectNameHovered(true), onPointerLeave: () => setProjectNameHovered(false), children: window.remotion_projectName })) : (window.remotion_projectName), jsx_runtime_1.jsx(MenuCompositionName_1.MenuCompositionName, {})
         ] }));
 };
 exports.MenuBuildIndicator = MenuBuildIndicator;

package/dist/components/MenuCompositionName.js

@@ -14,6 +14,7 @@ const baseStyle = {
     textDecoration: 'none',
     fontSize: 'inherit',
     textUnderlineOffset: 2,
+    whiteSpace: 'nowrap',
 };
 const compositionNameStyle = {
     ...baseStyle,

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

@@ -26,5 +26,6 @@ export declare const Combobox: React.FC<{
     readonly selectedId: string | number;
     readonly style?: React.CSSProperties;
     readonly title: string;
+    readonly small?: boolean;
 }>;
 export {};

package/dist/components/NewComposition/ComboBox.js

@@ -26,6 +26,10 @@ const container = {
     borderStyle: 'solid',
     maxWidth: '100%',
 };
+const smallContainer = {
+    ...container,
+    padding: '3px 4px',
+};
 const label = {
     flex: 1,
     overflow: 'hidden',
@@ -33,7 +37,12 @@ const label = {
     fontSize: 14,
     textAlign: 'left',
 };
-const Combobox = ({ values, selectedId, style: customStyle, title }) => {
+const smallLabel = {
+    ...label,
+    fontSize: 11,
+    lineHeight: 1,
+};
+const Combobox = ({ values, selectedId, style: customStyle, title, small = false }) => {
     const [hovered, setIsHovered] = (0, react_1.useState)(false);
     const [opened, setOpened] = (0, react_1.useState)(false);
     const ref = (0, react_1.useRef)(null);
@@ -147,7 +156,7 @@ const Combobox = ({ values, selectedId, style: customStyle, title }) => {
     const selected = values.find((v) => v.id === selectedId);
     const style = (0, react_1.useMemo)(() => {
         return {
-            ...container,
+            ...(small ? smallContainer : container),
             ...(customStyle !== null && customStyle !== void 0 ? customStyle : {}),
             userSelect: 'none',
             WebkitUserSelect: 'none',
@@ -161,11 +170,11 @@ const Combobox = ({ values, selectedId, style: customStyle, title }) => {
                     ? colors_1.INPUT_BORDER_COLOR_HOVERED
                     : colors_1.INPUT_BORDER_COLOR_UNHOVERED,
         };
-    }, [customStyle, hovered, opened]);
+    }, [customStyle, hovered, opened, small]);
     return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
-            jsx_runtime_1.jsxs("button", { ref: ref, title: title, tabIndex: tabIndex, type: "button", style: style, className: is_menu_item_1.MENU_INITIATOR_CLASSNAME, children: [selected ? (jsx_runtime_1.jsx("div", { title: typeof selected.label === 'string' ? selected.label : undefined, style: label, children: selected === null || selected === void 0 ? void 0 : selected.label })) : null, jsx_runtime_1.jsx(layout_1.Spacing, { x: 1 }),
+            jsx_runtime_1.jsxs("button", { ref: ref, title: title, tabIndex: tabIndex, type: "button", style: style, className: is_menu_item_1.MENU_INITIATOR_CLASSNAME, children: [selected ? (jsx_runtime_1.jsx("div", { title: typeof selected.label === 'string' ? selected.label : undefined, style: small ? smallLabel : label, children: selected === null || selected === void 0 ? void 0 : selected.label })) : null, jsx_runtime_1.jsx(layout_1.Spacing, { x: small ? 0.5 : 1 }),
                     " ",
-                    jsx_runtime_1.jsx(caret_1.CaretDown, {})
+                    jsx_runtime_1.jsx(caret_1.CaretDown, { small: small })
                 ] }), portalStyle
                 ? react_dom_1.default.createPortal(jsx_runtime_1.jsx("div", { style: styles_1.fullScreenOverlay, children: jsx_runtime_1.jsx("div", { style: styles_1.outerPortal, className: "css-reset", children: jsx_runtime_1.jsx(z_index_1.HigherZIndex, { onOutsideClick: onHide, onEscape: onHide, children: jsx_runtime_1.jsx("div", { style: portalStyle, children: jsx_runtime_1.jsx(MenuContent_1.MenuContent, { onNextMenu: noop_1.noop, onPreviousMenu: noop_1.noop, values: values, onHide: onHide, leaveLeftSpace: true, preselectIndex: values.findIndex((v) => selected && v.id === selected.id), topItemCanBeUnselected: false, fixedHeight: derivedMaxHeight }) }) }) }) }), (0, portals_1.getPortal)(currentZIndex))
                 : null] }));

package/dist/components/RenderButton.js

@@ -166,7 +166,7 @@ const RenderButton = ({ readOnlyStudio, }) => {
         };
     }, []);
     const video = remotion_1.Internals.useVideo();
-    const getCurrentFrame = player_1.PlayerInternals.useFrameImperative();
+    const { getCurrentFrame } = player_1.PlayerInternals.usePlayer();
     const { props } = (0, react_1.useContext)(remotion_1.Internals.EditorPropsContext);
     const openServerRenderModal = (0, react_1.useCallback)((copyCommandOnly) => {
         var _a;

package/dist/components/SequencePropsSubscriptionProvider.d.ts

@@ -0,0 +1,3 @@
+export declare const SequencePropsSubscriptionProvider: React.FC<{
+    readonly children: React.ReactNode;
+}>;

package/dist/components/SequencePropsSubscriptionProvider.js

@@ -0,0 +1,26 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SequencePropsSubscriptionProvider = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const remotion_1 = require("remotion");
+const SequencePropsSubscriptionProvider = ({ children }) => {
+    const [overrideToNodePathMap, setOverrideIdToNodePathMap] = (0, react_1.useState)({});
+    const setOverrideIdToNodePath = (0, react_1.useCallback)((overrideId, state) => {
+        setOverrideIdToNodePathMap((prev) => {
+            const existing = prev[overrideId];
+            if (existing && existing === state) {
+                return prev;
+            }
+            return { ...prev, [overrideId]: state };
+        });
+    }, []);
+    const getters = (0, react_1.useMemo)(() => {
+        return { overrideIdToNodePathMappings: overrideToNodePathMap };
+    }, [overrideToNodePathMap]);
+    const setters = (0, react_1.useMemo)(() => {
+        return { setOverrideIdToNodePath };
+    }, [setOverrideIdToNodePath]);
+    return (jsx_runtime_1.jsx(remotion_1.Internals.OverrideIdsToNodePathsGettersContext.Provider, { value: getters, children: jsx_runtime_1.jsx(remotion_1.Internals.OverrideIdsToNodePathsSettersContext.Provider, { value: setters, children: children }) }));
+};
+exports.SequencePropsSubscriptionProvider = SequencePropsSubscriptionProvider;

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

@@ -0,0 +1 @@
+export declare const SequencePropsObserver: () => null;

package/dist/components/Timeline/SequencePropsObserver.js

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SequencePropsObserver = void 0;
+const react_1 = require("react");
+const remotion_1 = require("remotion");
+const client_id_1 = require("../../helpers/client-id");
+const SequencePropsObserver = () => {
+    const { subscribeToEvent } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
+    const { setCodeValues } = (0, react_1.useContext)(remotion_1.Internals.VisualModeSettersContext);
+    (0, react_1.useEffect)(() => {
+        const handleEvent = (event) => {
+            if (event.type !== 'sequence-props-updated') {
+                return;
+            }
+            setCodeValues(event.nodePath, () => event.result);
+        };
+        const unsubscribe = subscribeToEvent('sequence-props-updated', handleEvent);
+        return () => {
+            unsubscribe();
+        };
+    }, [setCodeValues, subscribeToEvent]);
+    return null;
+};
+exports.SequencePropsObserver = SequencePropsObserver;

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

@@ -0,0 +1,7 @@
+import type React from 'react';
+import type { SequenceSchema } from 'remotion';
+export declare const SubscribeToNodePaths: React.FC<{
+    readonly overrideId: string;
+    readonly schema: SequenceSchema;
+    readonly stack: string;
+}>;

package/dist/components/Timeline/SubscribeToNodePaths.js

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SubscribeToNodePaths = void 0;
+const use_resolved_stack_1 = require("./use-resolved-stack");
+const use_sequence_props_subscription_1 = require("./use-sequence-props-subscription");
+const SubscribeToNodePaths = ({ overrideId, schema, stack }) => {
+    const originalLocation = (0, use_resolved_stack_1.useResolvedStack)(stack);
+    (0, use_sequence_props_subscription_1.useSequencePropsSubscription)({
+        overrideId,
+        schema,
+        originalLocation,
+    });
+    return null;
+};
+exports.SubscribeToNodePaths = SubscribeToNodePaths;