@remotion/studio 4.0.513 → 4.0.514

package/dist/esm/renderEntry.mjs

@@ -10,7 +10,6 @@ import {
 import { useContext, useEffect, useRef, useState } from "react";
 import ReactDOM from "react-dom/client";
 import {
-  AbsoluteFill,
   getInputProps,
   getRemotionEnvironment,
   continueRender as globalContinueRender,
@@ -57,7 +56,7 @@ var DelayedSpinner = () => {
   if (!show) {
     return null;
   }
-  return /* @__PURE__ */ jsx(AbsoluteFill, {
+  return /* @__PURE__ */ jsx(Internals.AbsoluteFillElement, {
     style: {
       justifyContent: "center",
       alignItems: "center",
@@ -214,7 +213,7 @@ var renderContent = (Root) => {
     renderToDOM(/* @__PURE__ */ jsx("div", {
       children: /* @__PURE__ */ jsx(DelayedSpinner, {})
     }));
-    import("./chunk-tv7r0jy3.js").then(({ StudioInternals }) => {
+    import("./chunk-xn2q7eem.js").then(({ StudioInternals }) => {
       window.remotion_isStudio = true;
       window.remotion_isReadOnlyStudio = true;
       window.remotion_inputProps = "{}";

package/dist/helpers/browser-studio-operations.d.ts

@@ -1,3 +1,5 @@
 import type { BrowserStudioOperations } from '@remotion/studio-shared';
 export declare const BROWSER_STUDIO_OPERATIONS_READY_EVENT = "remotion-browser-studio-operations-ready";
 export declare const getBrowserStudioOperations: () => BrowserStudioOperations | null;
+export declare const getBrowserStudioKeyframeOperations: () => import("@remotion/studio-shared").BrowserStudioKeyframeOperations | null;
+export declare const canUseKeyframeOperations: () => boolean;

package/dist/helpers/browser-studio-operations.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getBrowserStudioOperations = exports.BROWSER_STUDIO_OPERATIONS_READY_EVENT = void 0;
+exports.canUseKeyframeOperations = exports.getBrowserStudioKeyframeOperations = exports.getBrowserStudioOperations = exports.BROWSER_STUDIO_OPERATIONS_READY_EVENT = void 0;
 // Browser Studio may be hosted by a different studio-shared version, so this
 // handshake intentionally has no shared runtime import.
 exports.BROWSER_STUDIO_OPERATIONS_READY_EVENT = 'remotion-browser-studio-operations-ready';
@@ -12,3 +12,12 @@ const getBrowserStudioOperations = () => {
     return (_a = window.remotion_browserStudio) !== null && _a !== void 0 ? _a : null;
 };
 exports.getBrowserStudioOperations = getBrowserStudioOperations;
+const getBrowserStudioKeyframeOperations = () => {
+    var _a;
+    var _b;
+    return (_b = (_a = (0, exports.getBrowserStudioOperations)()) === null || _a === void 0 ? void 0 : _a.keyframes) !== null && _b !== void 0 ? _b : null;
+};
+exports.getBrowserStudioKeyframeOperations = getBrowserStudioKeyframeOperations;
+const canUseKeyframeOperations = () => !window.remotion_isReadOnlyStudio ||
+    (0, exports.getBrowserStudioKeyframeOperations)() !== null;
+exports.canUseKeyframeOperations = canUseKeyframeOperations;

package/dist/helpers/get-timeline-max-zoom.d.ts

@@ -0,0 +1,26 @@
+export declare const TIMELINE_MIN_ZOOM = 1;
+export declare const TIMELINE_MAX_ZOOM_FLOOR = 5;
+/**
+ * How many frames fill the timeline viewport at max zoom.
+ * 30 frames matches the previous 5x cap on a 150-frame composition
+ * (5 seconds at 30fps) and keeps a single frame wide enough to trim.
+ */
+export declare const TIMELINE_FRAMES_VISIBLE_AT_MAX_ZOOM = 30;
+export declare const getTimelineMaxZoom: (durationInFrames: number) => number;
+export declare const clampTimelineZoom: ({ zoom, durationInFrames, }: {
+    zoom: number;
+    durationInFrames: number;
+}) => number;
+export declare const timelineZoomToSliderValue: ({ zoom, maxZoom, }: {
+    zoom: number;
+    maxZoom: number;
+}) => number;
+export declare const sliderValueToTimelineZoom: ({ sliderValue, maxZoom, }: {
+    sliderValue: number;
+    maxZoom: number;
+}) => number;
+export declare const TIMELINE_ZOOM_SLIDER_PROPS: {
+    readonly min: 0;
+    readonly max: 1000;
+    readonly step: 1;
+};

package/dist/helpers/get-timeline-max-zoom.js

@@ -0,0 +1,45 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TIMELINE_ZOOM_SLIDER_PROPS = exports.sliderValueToTimelineZoom = exports.timelineZoomToSliderValue = exports.clampTimelineZoom = exports.getTimelineMaxZoom = exports.TIMELINE_FRAMES_VISIBLE_AT_MAX_ZOOM = exports.TIMELINE_MAX_ZOOM_FLOOR = exports.TIMELINE_MIN_ZOOM = void 0;
+exports.TIMELINE_MIN_ZOOM = 1;
+exports.TIMELINE_MAX_ZOOM_FLOOR = 5;
+/**
+ * How many frames fill the timeline viewport at max zoom.
+ * 30 frames matches the previous 5x cap on a 150-frame composition
+ * (5 seconds at 30fps) and keeps a single frame wide enough to trim.
+ */
+exports.TIMELINE_FRAMES_VISIBLE_AT_MAX_ZOOM = 30;
+const TIMELINE_ZOOM_SLIDER_MAX = 1000;
+const getTimelineMaxZoom = (durationInFrames) => {
+    const frameLevelZoom = durationInFrames / exports.TIMELINE_FRAMES_VISIBLE_AT_MAX_ZOOM;
+    return Math.max(exports.TIMELINE_MAX_ZOOM_FLOOR, Math.ceil(frameLevelZoom * 10) / 10);
+};
+exports.getTimelineMaxZoom = getTimelineMaxZoom;
+const clampTimelineZoom = ({ zoom, durationInFrames, }) => {
+    const clamped = Math.min((0, exports.getTimelineMaxZoom)(durationInFrames), Math.max(exports.TIMELINE_MIN_ZOOM, zoom));
+    return Math.round(clamped * 10) / 10;
+};
+exports.clampTimelineZoom = clampTimelineZoom;
+const timelineZoomToSliderValue = ({ zoom, maxZoom, }) => {
+    if (maxZoom <= exports.TIMELINE_MIN_ZOOM) {
+        return 0;
+    }
+    const clampedZoom = Math.min(maxZoom, Math.max(exports.TIMELINE_MIN_ZOOM, zoom));
+    const t = Math.log(clampedZoom / exports.TIMELINE_MIN_ZOOM) /
+        Math.log(maxZoom / exports.TIMELINE_MIN_ZOOM);
+    return Math.round(t * TIMELINE_ZOOM_SLIDER_MAX);
+};
+exports.timelineZoomToSliderValue = timelineZoomToSliderValue;
+const sliderValueToTimelineZoom = ({ sliderValue, maxZoom, }) => {
+    if (maxZoom <= exports.TIMELINE_MIN_ZOOM) {
+        return exports.TIMELINE_MIN_ZOOM;
+    }
+    const t = sliderValue / TIMELINE_ZOOM_SLIDER_MAX;
+    return exports.TIMELINE_MIN_ZOOM * (maxZoom / exports.TIMELINE_MIN_ZOOM) ** t;
+};
+exports.sliderValueToTimelineZoom = sliderValueToTimelineZoom;
+exports.TIMELINE_ZOOM_SLIDER_PROPS = {
+    min: 0,
+    max: TIMELINE_ZOOM_SLIDER_MAX,
+    step: 1,
+};

package/dist/helpers/inject-css.js

@@ -65,14 +65,14 @@ const makeDefaultGlobalCSS = () => {
 	  }
 
   .__remotion-composition-selector-item:focus,
-  .__remotion-inspector-inline-action:focus,
+  .__remotion-inspector-quick-action:focus,
   .__remotion-inspector-section-title:focus {
     outline: none;
     box-shadow: none;
   }
 
   .__remotion-composition-selector-item:focus-visible,
-  .__remotion-inspector-inline-action:focus-visible,
+  .__remotion-inspector-quick-action:focus-visible,
   .__remotion-inspector-section-title:focus-visible {
     box-shadow: ${colors_1.FOCUS_BOX_SHADOW};
   }

package/dist/helpers/render-codec-label.d.ts

@@ -1,2 +1,2 @@
-export declare const renderHumanReadableAudioCodec: (codec: "aac" | "ac3" | "alaw" | "eac3" | "flac" | "mp3" | "opus" | "pcm-f32" | "pcm-f32be" | "pcm-f64" | "pcm-f64be" | "pcm-s16" | "pcm-s16be" | "pcm-s24" | "pcm-s24be" | "pcm-s32" | "pcm-s32be" | "pcm-s8" | "pcm-u8" | "ulaw" | "vorbis" | null) => string;
+export declare const renderHumanReadableAudioCodec: (codec: "aac" | "ac3" | "alaw" | "dts" | "eac3" | "flac" | "mp3" | "opus" | "pcm-f32" | "pcm-f32be" | "pcm-f64" | "pcm-f64be" | "pcm-s16" | "pcm-s16be" | "pcm-s24" | "pcm-s24be" | "pcm-s32" | "pcm-s32be" | "pcm-s8" | "pcm-u8" | "ulaw" | "vorbis" | null) => string;
 export declare const renderHumanReadableVideoCodec: (codec: "av1" | "avc" | "hevc" | "prores" | "vp8" | "vp9" | null) => string;

package/dist/helpers/retry-payload.js

@@ -201,6 +201,7 @@ const makeClientRetryPayload = (job) => {
         initialKeyframeIntervalInSeconds: job.type === 'client-video' ? job.keyframeIntervalInSeconds : null,
         initialMuted: job.type === 'client-video' ? job.muted : null,
         initialTransparent: job.type === 'client-video' ? job.transparent : null,
+        initialAllowHtmlInCanvas: job.allowHtmlInCanvas,
         initialPageResponsiveness: job.type === 'client-video' ? job.pageResponsiveness : 'disabled',
     };
 };

package/dist/helpers/studio-runtime-config.d.ts

@@ -2,5 +2,5 @@ export declare const DEFAULT_BUFFER_STATE_DELAY_IN_MILLISECONDS = 300;
 export declare const getStudioAskAIEnabled: () => boolean;
 export declare const getStudioInteractivityEnabled: () => boolean;
 export declare const getStudioKeyboardShortcutsEnabled: () => boolean;
-export declare const getStudioMaxTimelineTracks: () => number;
+export declare const getStudioMaxTimelineTracks: () => number | null;
 export declare const getStudioBufferStateDelayInMilliseconds: () => number;

package/dist/helpers/studio-runtime-config.js

@@ -1,7 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.getStudioBufferStateDelayInMilliseconds = exports.getStudioMaxTimelineTracks = exports.getStudioKeyboardShortcutsEnabled = exports.getStudioInteractivityEnabled = exports.getStudioAskAIEnabled = exports.DEFAULT_BUFFER_STATE_DELAY_IN_MILLISECONDS = void 0;
-const studio_shared_1 = require("@remotion/studio-shared");
 exports.DEFAULT_BUFFER_STATE_DELAY_IN_MILLISECONDS = 300;
 const defaultStudioRuntimeConfig = {
     askAIEnabled: false,
@@ -12,6 +11,7 @@ const defaultStudioRuntimeConfig = {
     keyboardShortcutsEnabled: true,
     maxTimelineTracks: null,
     publicLicenseKey: null,
+    configFileStudioSettings: null,
 };
 const getStudioRuntimeConfig = () => {
     var _a;
@@ -33,8 +33,7 @@ const getStudioKeyboardShortcutsEnabled = () => {
 };
 exports.getStudioKeyboardShortcutsEnabled = getStudioKeyboardShortcutsEnabled;
 const getStudioMaxTimelineTracks = () => {
-    var _a;
-    return (_a = getStudioRuntimeConfig().maxTimelineTracks) !== null && _a !== void 0 ? _a : studio_shared_1.DEFAULT_TIMELINE_TRACKS;
+    return getStudioRuntimeConfig().maxTimelineTracks;
 };
 exports.getStudioMaxTimelineTracks = getStudioMaxTimelineTracks;
 const getStudioBufferStateDelayInMilliseconds = () => {

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

@@ -1,5 +1,5 @@
 import { type AnySchemaFieldInfo, type DragOverrides, type EffectSchemaFieldInfo, type InteractivitySchemaFieldInfo, type SchemaFieldGroup, type SchemaFieldGroupInfo, type PropStatuses, type SchemaFieldInfo, type SequenceControls, type SaveSequencePropSourceEdit } from '@remotion/studio-shared';
-import type { GetDragOverrides, GetEffectDragOverrides, InteractivitySchema as InteractivitySchemaShape, TSequence } from 'remotion';
+import type { GetDragOverrides, GetEffectDragOverrides, InteractivitySchema as InteractivitySchemaShape, RuntimeValueStore, TSequence } from 'remotion';
 import type { GetIsExpanded } from '../components/ExpandedTracksProvider';
 import type { SequenceNodePathInfo } from './get-timeline-sequence-sort-key';
 export { SCHEMA_FIELD_GROUPS, getEffectFieldsToShow, getFieldsToShow, getSchemaFieldGroup, SCHEMA_FIELD_ROW_HEIGHT, } from '@remotion/studio-shared';
@@ -30,6 +30,8 @@ export type TimelineTreeNode = {
     readonly nodePathInfo: SequenceNodePathInfo;
     readonly label: string;
     readonly field: AnySchemaFieldInfo | null;
+    readonly runtimeValue: unknown;
+    readonly runtimeValueStore: RuntimeValueStore | null;
 };
 export declare const buildTimelineTree: ({ sequence, nodePathInfo, getDragOverrides, getEffectDragOverrides, propStatuses, includeTextContent, includeSourceControls, runtimeValues, }: {
     sequence: TSequence;

package/dist/helpers/timeline-layout.js

@@ -44,6 +44,8 @@ const buildTimelineTree = ({ sequence, nodePathInfo, getDragOverrides, getEffect
                 },
                 label: (_a = f.description) !== null && _a !== void 0 ? _a : f.key,
                 field: f,
+                runtimeValue: runtimeValues === null || runtimeValues === void 0 ? void 0 : runtimeValues[f.key],
+                runtimeValueStore: null,
             });
         }
     }
@@ -85,6 +87,7 @@ const buildTimelineTree = ({ sequence, nodePathInfo, getDragOverrides, getEffect
                     },
                     children: effectFields.map((f) => {
                         var _a;
+                        var _b, _c;
                         return ({
                             kind: 'field',
                             nodePathInfo: {
@@ -99,8 +102,10 @@ const buildTimelineTree = ({ sequence, nodePathInfo, getDragOverrides, getEffect
                                 numberOfSequencesWithThisNodePath: 0,
                                 supportsEffects,
                             },
-                            label: (_a = f.description) !== null && _a !== void 0 ? _a : f.key,
+                            label: (_b = f.description) !== null && _b !== void 0 ? _b : f.key,
                             field: f,
+                            runtimeValue: null,
+                            runtimeValueStore: (_c = (_a = sequence.effectRuntimeValues) === null || _a === void 0 ? void 0 : _a[i]) !== null && _c !== void 0 ? _c : null,
                         });
                     }),
                 };

package/dist/helpers/url-state.js

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.getRoute = exports.reloadUrl = exports.clearUrl = exports.replaceUrl = exports.pushUrl = exports.getUrlForRoute = void 0;
 const getUrlHandlingType = () => {
-    if (window.remotion_isReadOnlyStudio) {
+    if (window.remotion_isReadOnlyStudio || window.remotion_browserStudio) {
         return 'query-string';
     }
     return 'spa';
@@ -32,7 +32,8 @@ const reloadUrl = () => {
 exports.reloadUrl = reloadUrl;
 const getRoute = () => {
     if (getUrlHandlingType() === 'query-string') {
-        return window.location.search.substring(1);
+        const route = window.location.search.substring(1);
+        return route.startsWith('/') ? route : '';
     }
     return window.location.pathname;
 };

package/dist/helpers/use-menu-structure.js

@@ -268,9 +268,6 @@ const useMenuStructure = (closeMenu, readOnlyStudio) => {
     const { defaultEditorId, defaultEditorName } = (0, use_default_editor_info_1.useEditorOpening)(type === 'connected');
     const keyboardShortcutsDisabled = (0, use_keybinding_1.areKeyboardShortcutsDisabled)();
     const studioAskAIEnabled = (0, studio_runtime_config_1.getStudioAskAIEnabled)();
-    const canConfigureDefaultEditor = !readOnlyStudio &&
-        type === 'connected' &&
-        (0, browser_studio_operations_1.getBrowserStudioOperations)() === null;
     const { setSidebarCollapsedState, sidebarCollapsedStateLeft, sidebarCollapsedStateRight, } = (0, react_1.useContext)(sidebar_1.SidebarContext);
     const sizes = (0, react_1.useMemo)(() => (0, SizeSelector_1.getUniqueSizes)(size), [size]);
     const isFullscreenSupported = (0, check_fullscreen_support_1.checkFullscreenSupport)();
@@ -341,7 +338,7 @@ const useMenuStructure = (closeMenu, readOnlyStudio) => {
                             closeMenu();
                             setSelectedModal({
                                 type: 'settings',
-                                initialTab: canConfigureDefaultEditor ? 'apps' : 'license',
+                                initialTab: 'rendering',
                                 initialPublicLicenseKey: (_b = (_a = window.remotion_renderDefaults) === null || _a === void 0 ? void 0 : _a.publicLicenseKey) !== null && _b !== void 0 ? _b : null,
                             });
                         },
@@ -999,7 +996,6 @@ const useMenuStructure = (closeMenu, readOnlyStudio) => {
         }
         return struct;
     }, [
-        canConfigureDefaultEditor,
         readOnlyStudio,
         closeMenu,
         type,

package/dist/helpers/use-runtime-values.d.ts

@@ -1,6 +1,7 @@
-import type { SequenceRegistrationControls } from 'remotion';
+import type { RuntimeValueStore, SequenceRegistrationControls } from 'remotion';
 export declare const useRuntimeValues: (controls: SequenceRegistrationControls | null) => Readonly<Record<string, unknown>>;
 export declare const useRuntimeValue: (controls: SequenceRegistrationControls | null, key: string) => unknown;
+export declare const useRuntimeStoreValue: (storeOrNull: RuntimeValueStore | null, key: string) => unknown;
 export declare const useRuntimeValueSelector: <T>({ controls, selector, isEqual, }: {
     controls: SequenceRegistrationControls | null;
     selector: (values: Readonly<Record<string, unknown>>) => T;

package/dist/helpers/use-runtime-values.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useRuntimeValueSnapshots = exports.useRuntimeValueSelector = exports.useRuntimeValue = exports.useRuntimeValues = void 0;
+exports.useRuntimeValueSnapshots = exports.useRuntimeValueSelector = exports.useRuntimeStoreValue = exports.useRuntimeValue = exports.useRuntimeValues = void 0;
 const react_1 = require("react");
 const EMPTY_RUNTIME_VALUES = {};
 const EMPTY_RUNTIME_VALUE_STORE = {
@@ -15,11 +15,15 @@ const useRuntimeValues = (controls) => {
 exports.useRuntimeValues = useRuntimeValues;
 const useRuntimeValue = (controls, key) => {
     var _a;
-    const store = (_a = controls === null || controls === void 0 ? void 0 : controls.runtimeValues) !== null && _a !== void 0 ? _a : EMPTY_RUNTIME_VALUE_STORE;
+    return (0, exports.useRuntimeStoreValue)((_a = controls === null || controls === void 0 ? void 0 : controls.runtimeValues) !== null && _a !== void 0 ? _a : null, key);
+};
+exports.useRuntimeValue = useRuntimeValue;
+const useRuntimeStoreValue = (storeOrNull, key) => {
+    const store = storeOrNull !== null && storeOrNull !== void 0 ? storeOrNull : EMPTY_RUNTIME_VALUE_STORE;
     const getSnapshot = (0, react_1.useCallback)(() => store.getSnapshot()[key], [key, store]);
     return (0, react_1.useSyncExternalStore)(store.subscribe, getSnapshot, getSnapshot);
 };
-exports.useRuntimeValue = useRuntimeValue;
+exports.useRuntimeStoreValue = useRuntimeStoreValue;
 const useRuntimeValueSelector = ({ controls, selector, isEqual = Object.is, }) => {
     var _a;
     const store = (_a = controls === null || controls === void 0 ? void 0 : controls.runtimeValues) !== null && _a !== void 0 ? _a : EMPTY_RUNTIME_VALUE_STORE;

package/dist/icons/remotion-triangle.d.ts

@@ -0,0 +1,2 @@
+import type { SVGProps } from 'react';
+export declare const RemotionTriangleIcon: ({ color, ...props }: SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;

package/dist/icons/remotion-triangle.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RemotionTriangleIcon = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const colors_1 = require("../helpers/colors");
+const RemotionTriangleIcon = ({ color, ...props }) => (jsx_runtime_1.jsx("svg", { viewBox: "-14 -14 438 453", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, children: jsx_runtime_1.jsx("path", { d: "M92.3905 0.603638C83.5124 1.08554 76.358 2.49417 69.1481 5.2373C65.5523 6.59033 59.6583 9.53735 56.4148 11.5762C42.8474 20.0836 32.5051 32.8724 27.1115 47.7558C26.0365 50.7028 23.1266 60.0998 21.2546 66.5684C8.78078 109.81 1.70055 157.092 0.180713 207.135C-0.0602375 215.105 -0.0602375 234.084 0.180713 241.925C1.20012 275.102 4.36954 305.053 10.1153 335.599C12.4506 347.961 16.1946 364.568 18.3632 372.112C22.793 387.44 31.8379 400.488 44.7009 410.052C53.3195 416.465 63.1058 420.765 73.9485 422.878C79.1753 423.897 86.0702 424.361 91.1487 424.027C98.1733 423.564 112.111 421.692 123.436 419.672C174.48 410.571 221.632 394.279 264.392 370.963C291.471 356.19 314.621 340.195 336.955 320.789C359.215 301.476 378.194 280.699 394.894 257.382C398.768 251.989 400.714 248.838 402.66 244.872C407.665 234.64 410.018 224.465 410 213.085C410 202.483 407.998 193.067 403.68 183.429C401.604 178.777 399.62 175.441 395.172 169.102C378.788 145.767 360.605 125.434 338.438 105.676C304.074 75.0573 263.261 49.9428 217.685 31.3526C207.806 27.3306 198.075 23.7905 186.361 19.9538C161.562 11.8542 130.868 4.82956 104.901 1.32651C100.824 0.770477 95.2819 0.455353 92.3905 0.603638Z", stroke: color !== null && color !== void 0 ? color : colors_1.CURRENT_COLOR_LOWERCASE, strokeLinejoin: "round", strokeWidth: 24 }) }));
+exports.RemotionTriangleIcon = RemotionTriangleIcon;

package/dist/renderEntry.js

@@ -89,7 +89,7 @@ const DelayedSpinner = () => {
     if (!show) {
         return null;
     }
-    return (jsx_runtime_1.jsx(remotion_1.AbsoluteFill, { style: {
+    return (jsx_runtime_1.jsx(remotion_1.Internals.AbsoluteFillElement, { style: {
             justifyContent: 'center',
             alignItems: 'center',
             fontSize: 13,

package/dist/state/composition-list.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+type CompositionListState = 'loading' | 'ready';
+export declare const compositionListRenderedRef: {
+    current: boolean;
+};
+export declare const CompositionListContext: React.Context<{
+    compositionListState: CompositionListState;
+    setCompositionListState: React.Dispatch<React.SetStateAction<CompositionListState>>;
+}>;
+export declare const CompositionListProvider: React.FC<{
+    readonly children: React.ReactNode;
+}>;
+export {};

package/dist/state/composition-list.js

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CompositionListProvider = exports.CompositionListContext = exports.compositionListRenderedRef = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+exports.compositionListRenderedRef = { current: false };
+exports.CompositionListContext = (0, react_1.createContext)({
+    compositionListState: 'loading',
+    setCompositionListState: () => {
+        throw new Error('CompositionListContext provider is missing');
+    },
+});
+const CompositionListProvider = ({ children }) => {
+    const [compositionListState, setCompositionListState] = (0, react_1.useState)(() => {
+        exports.compositionListRenderedRef.current = false;
+        return 'loading';
+    });
+    const value = (0, react_1.useMemo)(() => ({ compositionListState, setCompositionListState }), [compositionListState]);
+    return (jsx_runtime_1.jsx(exports.CompositionListContext.Provider, { value: value, children: children }));
+};
+exports.CompositionListProvider = CompositionListProvider;

package/dist/state/modals.d.ts

@@ -31,6 +31,7 @@ export type WebRenderModalState = {
     initialTransparent: boolean | null;
     initialMuted: boolean | null;
     initialMediaCacheSizeInBytes: number | null;
+    initialAllowHtmlInCanvas: boolean;
     initialPageResponsiveness: WebRendererPageResponsiveness;
 };
 export type RenderModalState = {
@@ -153,7 +154,7 @@ export type ModalState = {
     type: 'input-props-override';
 } | {
     type: 'settings';
-    initialTab: 'apps' | 'license';
+    initialTab: 'apps' | 'rendering' | 'studio' | 'license';
     initialPublicLicenseKey: string | null;
 } | RenderModalState | WebRenderModalState | {
     type: 'render-progress';
@@ -162,6 +163,11 @@ export type ModalState = {
     type: 'update';
     info: UpdateInfo;
     knownBugs: Bug[];
+} | {
+    type: 'fix-computed-value';
+    prop: string;
+    context: string;
+    remotionInteractivitySkillAvailable: boolean;
 } | {
     type: 'install-packages';
     packageManager: PackageManager;

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

@@ -1,6 +1,5 @@
 import React from 'react';
-export declare const TIMELINE_MIN_ZOOM = 1;
-export declare const TIMELINE_MAX_ZOOM = 5;
+export { getTimelineMaxZoom, TIMELINE_MIN_ZOOM, } from '../helpers/get-timeline-max-zoom';
 export type TimelineSetZoomOptions = {
     anchorFrame: number | null;
     anchorContentX: number | null;

package/dist/state/timeline-zoom.js

@@ -1,14 +1,16 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.TimelineZoomContext = exports.TimelineZoomCtx = exports.TIMELINE_MAX_ZOOM = exports.TIMELINE_MIN_ZOOM = void 0;
+exports.TimelineZoomContext = exports.TimelineZoomCtx = exports.TIMELINE_MIN_ZOOM = exports.getTimelineMaxZoom = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const react_dom_1 = require("react-dom");
 const imperative_state_1 = require("../components/Timeline/imperative-state");
 const timeline_scroll_logic_1 = require("../components/Timeline/timeline-scroll-logic");
 const ZoomPersistor_1 = require("../components/ZoomPersistor");
-exports.TIMELINE_MIN_ZOOM = 1;
-exports.TIMELINE_MAX_ZOOM = 5;
+const get_timeline_max_zoom_1 = require("../helpers/get-timeline-max-zoom");
+const get_timeline_max_zoom_2 = require("../helpers/get-timeline-max-zoom");
+Object.defineProperty(exports, "getTimelineMaxZoom", { enumerable: true, get: function () { return get_timeline_max_zoom_2.getTimelineMaxZoom; } });
+Object.defineProperty(exports, "TIMELINE_MIN_ZOOM", { enumerable: true, get: function () { return get_timeline_max_zoom_2.TIMELINE_MIN_ZOOM; } });
 exports.TimelineZoomCtx = (0, react_1.createContext)({
     zoom: {},
     setZoom: () => {
@@ -29,8 +31,10 @@ const TimelineZoomContext = ({ children }) => {
         (0, react_dom_1.flushSync)(() => {
             setZoomState((prevZoomMap) => {
                 var _a;
-                const newZoomWithFloatingPointErrors = Math.min(exports.TIMELINE_MAX_ZOOM, Math.max(exports.TIMELINE_MIN_ZOOM, callback((_a = prevZoomMap[compositionId]) !== null && _a !== void 0 ? _a : exports.TIMELINE_MIN_ZOOM)));
-                const newZoom = Math.round(newZoomWithFloatingPointErrors * 10) / 10;
+                const newZoom = (0, get_timeline_max_zoom_1.clampTimelineZoom)({
+                    zoom: callback((_a = prevZoomMap[compositionId]) !== null && _a !== void 0 ? _a : get_timeline_max_zoom_1.TIMELINE_MIN_ZOOM),
+                    durationInFrames: (0, imperative_state_1.getCurrentDuration)(),
+                });
                 return { ...prevZoomMap, [compositionId]: newZoom };
             });
         });

package/package.json

@@ -3,7 +3,7 @@
 		"url": "https://github.com/remotion-dev/remotion/tree/main/packages/studio"
 	},
 	"name": "@remotion/studio",
-	"version": "4.0.513",
+	"version": "4.0.514",
 	"description": "APIs for interacting with the Remotion Studio",
 	"main": "dist",
 	"scripts": {
@@ -24,19 +24,20 @@
 		"react-dom": ">=16.8.0"
 	},
 	"dependencies": {
-		"@remotion/studio-protocol": "4.0.513",
+		"@tanstack/react-virtual": "3.14.9",
+		"@remotion/studio-protocol": "4.0.514",
 		"semver": "7.5.3",
-		"remotion": "4.0.513",
-		"@remotion/captions": "4.0.513",
-		"@remotion/player": "4.0.513",
-		"@remotion/media-utils": "4.0.513",
-		"@remotion/renderer": "4.0.513",
-		"@remotion/web-renderer": "4.0.513",
-		"@remotion/studio-shared": "4.0.513",
-		"@remotion/timeline-utils": "4.0.513",
-		"@remotion/zod-types": "4.0.513",
+		"remotion": "4.0.514",
+		"@remotion/captions": "4.0.514",
+		"@remotion/player": "4.0.514",
+		"@remotion/media-utils": "4.0.514",
+		"@remotion/renderer": "4.0.514",
+		"@remotion/web-renderer": "4.0.514",
+		"@remotion/studio-shared": "4.0.514",
+		"@remotion/timeline-utils": "4.0.514",
+		"@remotion/zod-types": "4.0.514",
 		"@jridgewell/trace-mapping": "0.3.31",
-		"mediabunny": "1.50.8",
+		"mediabunny": "1.55.1",
 		"memfs": "3.4.3",
 		"open": "8.4.2",
 		"zod": "4.4.3"
@@ -45,7 +46,7 @@
 		"react": "19.2.3",
 		"react-dom": "19.2.3",
 		"@types/semver": "7.5.3",
-		"@remotion/eslint-config-internal": "4.0.513",
+		"@remotion/eslint-config-internal": "4.0.514",
 		"eslint": "9.19.0",
 		"@typescript/native-preview": "7.0.0-dev.20260217.1"
 	},