@remotion/studio 4.0.459 → 4.0.461

package/dist/esm/renderEntry.mjs

@@ -166,7 +166,6 @@ var renderContent = (Root) => {
         logLevel: window.remotion_logLevel ?? "info",
         numberOfAudioTags: 0,
         audioLatencyHint: window.remotion_audioLatencyHint ?? "playback",
-        visualModeEnabled: false,
         children: /* @__PURE__ */ jsxs(Internals.RenderAssetManagerProvider, {
           collectAssets: null,
           children: [
@@ -193,7 +192,6 @@ var renderContent = (Root) => {
         logLevel: window.remotion_logLevel ?? "info",
         numberOfAudioTags: 0,
         audioLatencyHint: window.remotion_audioLatencyHint ?? "playback",
-        visualModeEnabled: false,
         children: /* @__PURE__ */ jsx(Internals.RenderAssetManagerProvider, {
           collectAssets: null,
           children: /* @__PURE__ */ jsx(Root, {})
@@ -209,14 +207,13 @@ var renderContent = (Root) => {
     renderToDOM(/* @__PURE__ */ jsx("div", {
       children: /* @__PURE__ */ jsx(DelayedSpinner, {})
     }));
-    import("./chunk-0njpenna.js").then(({ StudioInternals }) => {
+    import("./chunk-yzh34sp0.js").then(({ StudioInternals }) => {
       window.remotion_isStudio = true;
       window.remotion_isReadOnlyStudio = true;
       window.remotion_inputProps = "{}";
       renderToDOM(/* @__PURE__ */ jsx(StudioInternals.Studio, {
         readOnly: true,
-        rootComponent: Root,
-        visualModeEnabled: false
+        rootComponent: Root
       }));
     }).catch((err) => {
       renderToDOM(/* @__PURE__ */ jsxs("div", {

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

@@ -1,5 +1,6 @@
-import type { TSequence } from 'remotion';
+import type { OverrideIdToNodePaths, TSequence } from 'remotion';
 import type { TrackWithHash } from './get-timeline-sequence-sort-key';
-export declare const calculateTimeline: ({ sequences, }: {
+export declare const calculateTimeline: ({ sequences, overrideIdsToNodePaths, }: {
     sequences: TSequence[];
+    overrideIdsToNodePaths: OverrideIdToNodePaths;
 }) => TrackWithHash[];

package/dist/helpers/calculate-timeline.js

@@ -19,7 +19,9 @@ const getInheritedLoopDisplay = (sequence, sequences) => {
     }
     return getInheritedLoopDisplay(parent, sequences);
 };
-const calculateTimeline = ({ sequences, }) => {
+const calculateTimeline = ({ sequences, overrideIdsToNodePaths, }) => {
+    var _a;
+    var _b;
     const sortedSequences = (0, sort_by_nonce_history_1.sortItemsByNonceHistory)(sequences);
     const tracks = [];
     if (sortedSequences.length === 0) {
@@ -41,6 +43,8 @@ const calculateTimeline = ({ sequences, }) => {
         const cascadedStart = (0, get_sequence_visible_range_1.getCascadedStart)(sequence, sortedSequences);
         const visibleStart = (0, get_sequence_visible_range_1.getTimelineVisibleStart)(sequence, sortedSequences);
         const visibleDuration = (0, get_sequence_visible_range_1.getTimelineVisibleDuration)(sequence, sortedSequences);
+        const overrideId = (_b = (_a = sequence.controls) === null || _a === void 0 ? void 0 : _a.overrideId) !== null && _b !== void 0 ? _b : null;
+        const nodePath = overrideId ? overrideIdsToNodePaths[overrideId] : null;
         tracks.push({
             sequence: {
                 ...sequence,
@@ -54,6 +58,9 @@ const calculateTimeline = ({ sequences, }) => {
             hash: actualHash,
             cascadedStart,
             cascadedDuration: sequence.duration,
+            nodePathInfo: nodePath
+                ? { nodePath, index: 0, numberOfSequencesWithThisNodePath: 0 }
+                : null,
         });
     }
     const uniqueTracks = [];
@@ -67,10 +74,44 @@ const calculateTimeline = ({ sequences, }) => {
     for (let i = 0; i < tracks.length; i++) {
         nonceRanks.set(tracks[i].sequence.id, i);
     }
-    return uniqueTracks.sort((a, b) => {
+    const sortedTracks = uniqueTracks.sort((a, b) => {
         const sortKeyA = (0, get_timeline_sequence_sort_key_1.getTimelineSequenceSequenceSortKey)(a, tracks, sameHashes, nonceRanks);
         const sortKeyB = (0, get_timeline_sequence_sort_key_1.getTimelineSequenceSequenceSortKey)(b, tracks, sameHashes, nonceRanks);
         return sortKeyA.localeCompare(sortKeyB);
     });
+    const nodePathIndexCounters = new Map();
+    return sortedTracks
+        .map((track) => {
+        var _a;
+        if (track.nodePathInfo === null) {
+            return track;
+        }
+        const key = track.nodePathInfo.nodePath.join('.');
+        const index = (_a = nodePathIndexCounters.get(key)) !== null && _a !== void 0 ? _a : 0;
+        nodePathIndexCounters.set(key, index + 1);
+        return {
+            ...track,
+            nodePathInfo: {
+                nodePath: track.nodePathInfo.nodePath,
+                index,
+                numberOfSequencesWithThisNodePath: 0,
+            },
+        };
+    })
+        .map((track) => {
+        var _a;
+        if (track.nodePathInfo === null) {
+            return track;
+        }
+        const key = track.nodePathInfo.nodePath.join('.');
+        return {
+            ...track,
+            nodePathInfo: {
+                nodePath: track.nodePathInfo.nodePath,
+                index: track.nodePathInfo.index,
+                numberOfSequencesWithThisNodePath: (_a = nodePathIndexCounters.get(key)) !== null && _a !== void 0 ? _a : 0,
+            },
+        };
+    });
 };
 exports.calculateTimeline = calculateTimeline;

package/dist/helpers/get-timeline-sequence-layout.js

@@ -8,15 +8,15 @@ const getWidthOfTrack = ({ durationInFrames, lastFrame, windowWidth, spatialDura
     const base = durationInFrames === Infinity || lastFrame === 0
         ? fullWidth
         : (spatialDuration / lastFrame) * fullWidth;
-    return base - exports.SEQUENCE_BORDER_WIDTH + nonNegativeMarginLeft;
+    return Math.max(0, base - exports.SEQUENCE_BORDER_WIDTH + nonNegativeMarginLeft);
 };
 const getTimelineSequenceLayout = ({ durationInFrames, startFrom, maxMediaDuration, startFromMedia, video, windowWidth, premountDisplay, postmountDisplay, }) => {
     var _a;
     const maxMediaSequenceDuration = (maxMediaDuration !== null && maxMediaDuration !== void 0 ? maxMediaDuration : Infinity) - startFromMedia;
     const lastFrame = ((_a = video.durationInFrames) !== null && _a !== void 0 ? _a : 1) - 1;
-    const spatialDuration = Math.min(maxMediaSequenceDuration, durationInFrames - 1, lastFrame - startFrom);
+    const spatialDuration = Math.max(0, Math.min(maxMediaSequenceDuration, durationInFrames - 1, lastFrame - startFrom));
     // Unclipped spatial duration: without the lastFrame - startFrom constraint
-    const naturalSpatialDuration = Math.min(maxMediaSequenceDuration, durationInFrames - 1);
+    const naturalSpatialDuration = Math.max(0, Math.min(maxMediaSequenceDuration, durationInFrames - 1));
     const marginLeft = lastFrame === 0
         ? 0
         : (startFrom / lastFrame) * (windowWidth - timeline_layout_1.TIMELINE_PADDING * 2);

package/dist/helpers/get-timeline-sequence-sort-key.d.ts

@@ -1,7 +1,13 @@
-import type { TSequence } from 'remotion';
+import type { SequenceNodePath, TSequence } from 'remotion';
+export type SequenceNodePathInfo = {
+    nodePath: SequenceNodePath;
+    index: number;
+    numberOfSequencesWithThisNodePath: number;
+};
 type Track = {
     sequence: TSequence;
     depth: number;
+    nodePathInfo: SequenceNodePathInfo | null;
 };
 export type TrackWithHash = Track & {
     hash: string;

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

@@ -1,5 +1,7 @@
 import { type CodeValues, type DragOverrides, type SchemaFieldInfo, type SequenceControls } from '@remotion/studio-shared';
-import type { EffectDefinitionAndStack, TSequence } from 'remotion';
+import type { EffectDefinitionAndStack, GetCodeValues, GetDragOverrides, TSequence } from 'remotion';
+import type { GetIsExpanded } from '../components/ExpandedTracksProvider';
+import type { SequenceNodePathInfo } from './get-timeline-sequence-sort-key';
 export type { CodeValues, DragOverrides, SchemaFieldInfo, SequenceControls };
 export { SCHEMA_FIELD_ROW_HEIGHT, UNSUPPORTED_FIELD_ROW_HEIGHT, getFieldsToShow, } from '@remotion/studio-shared';
 export declare const TIMELINE_PADDING = 16;
@@ -9,6 +11,8 @@ 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;
 export type EffectSchemaFieldLabel = {
     key: string;
     description: string | undefined;
@@ -16,31 +20,37 @@ export type EffectSchemaFieldLabel = {
 export declare const getEffectSchemaLabels: (effect: EffectDefinitionAndStack<unknown>) => EffectSchemaFieldLabel[];
 export type TimelineTreeNode = {
     readonly kind: 'group';
-    readonly id: string;
+    readonly nodePathInfo: SequenceNodePathInfo;
     readonly label: string;
     readonly children: TimelineTreeNode[];
 } | {
     readonly kind: 'field';
-    readonly id: string;
+    readonly nodePathInfo: SequenceNodePathInfo;
     readonly label: string;
     readonly field: SchemaFieldInfo | null;
 };
-export declare const buildTimelineTree: ({ sequence, dragOverrides, codeValues, }: {
+export declare const buildTimelineTree: ({ sequence, nodePathInfo, getDragOverrides, getCodeValues, }: {
     sequence: TSequence;
-    dragOverrides: DragOverrides;
-    codeValues: CodeValues;
+    nodePathInfo: SequenceNodePathInfo;
+    getDragOverrides: GetDragOverrides;
+    getCodeValues: GetCodeValues;
 }) => TimelineTreeNode[];
 export type FlatTreeRow = {
     readonly node: TimelineTreeNode;
     readonly depth: number;
 };
-export declare const flattenVisibleTreeNodes: ({ nodes, expandedTracks, depth, }: {
+export declare const flattenVisibleTreeNodes: ({ nodes, getIsExpanded, depth, }: {
     nodes: TimelineTreeNode[];
-    expandedTracks: Record<string, boolean>;
+    getIsExpanded: GetIsExpanded;
     depth?: number | undefined;
 }) => FlatTreeRow[];
 export declare const getTreeRowHeight: (node: TimelineTreeNode) => number;
-export declare const getExpandedTrackHeight: (sequence: TSequence, expandedTracks: Record<string, boolean>, dragOverrides: DragOverrides, codeValues: CodeValues) => number;
+export declare const getExpandedTrackHeight: ({ sequence, nodePathInfo, getIsExpanded, getCodeValues, }: {
+    sequence: TSequence;
+    nodePathInfo: SequenceNodePathInfo;
+    getIsExpanded: GetIsExpanded;
+    getCodeValues: GetCodeValues;
+}) => number;
 export declare const TIMELINE_LAYER_HEIGHT_VIDEO = 75;
 export declare const TIMELINE_LAYER_HEIGHT_IMAGE = 50;
 export declare const TIMELINE_LAYER_HEIGHT_AUDIO = 25;

package/dist/helpers/timeline-layout.js

@@ -2,6 +2,7 @@
 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.getEffectSchemaLabels = 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.UNSUPPORTED_FIELD_ROW_HEIGHT = exports.SCHEMA_FIELD_ROW_HEIGHT = void 0;
 const studio_shared_1 = require("@remotion/studio-shared");
+const no_react_1 = require("remotion/no-react");
 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; } });
 Object.defineProperty(exports, "UNSUPPORTED_FIELD_ROW_HEIGHT", { enumerable: true, get: function () { return studio_shared_2.UNSUPPORTED_FIELD_ROW_HEIGHT; } });
@@ -17,31 +18,51 @@ const getEffectSchemaLabels = (effect) => {
     if (!effect.definition.schema) {
         return [];
     }
-    return Object.entries(effect.definition.schema).map(([key, fieldSchema]) => ({
-        key,
-        description: fieldSchema.description,
-    }));
+    return Object.entries(effect.definition.schema)
+        .map(([key, fieldSchema]) => {
+        if (fieldSchema.type === 'hidden') {
+            return null;
+        }
+        return {
+            key,
+            description: fieldSchema.description,
+        };
+    })
+        .filter(no_react_1.NoReactInternals.truthy);
 };
 exports.getEffectSchemaLabels = getEffectSchemaLabels;
-const buildTimelineTree = ({ sequence, dragOverrides, codeValues, }) => {
+const buildTimelineTree = ({ sequence, nodePathInfo, getDragOverrides, getCodeValues, }) => {
     var _a;
     const roots = [];
+    const { nodePath, index } = nodePathInfo;
     if (sequence.effects.length > 0) {
         roots.push({
             kind: 'group',
-            id: `${sequence.id}::effects`,
+            nodePathInfo: {
+                nodePath: [...nodePath, 'effects'],
+                index,
+                numberOfSequencesWithThisNodePath: 0,
+            },
             label: 'Effects',
             children: sequence.effects.map((effect, i) => {
-                const effectId = `${sequence.id}::effects::${i}`;
+                const effectNodePath = [...nodePath, 'effects', i];
                 return {
                     kind: 'group',
-                    id: effectId,
+                    nodePathInfo: {
+                        nodePath: effectNodePath,
+                        index,
+                        numberOfSequencesWithThisNodePath: 0,
+                    },
                     label: effect.definition.label,
                     children: (0, exports.getEffectSchemaLabels)(effect).map((label) => {
                         var _a;
                         return ({
                             kind: 'field',
-                            id: `${effectId}::${label.key}`,
+                            nodePathInfo: {
+                                nodePath: [...effectNodePath, label.key],
+                                index,
+                                numberOfSequencesWithThisNodePath: 0,
+                            },
                             label: (_a = label.description) !== null && _a !== void 0 ? _a : label.key,
                             field: null,
                         });
@@ -53,15 +74,19 @@ const buildTimelineTree = ({ sequence, dragOverrides, codeValues, }) => {
     const controlFields = (0, studio_shared_1.getFieldsToShow)({
         schema: sequence.controls.schema,
         currentRuntimeValueDotNotation: sequence.controls.currentRuntimeValueDotNotation,
-        dragOverrides,
-        codeValues,
-        overrideId: sequence.controls.overrideId,
+        getDragOverrides,
+        getCodeValues,
+        nodePath,
     });
     if (controlFields && controlFields.length > 0) {
         for (const f of controlFields) {
             roots.push({
                 kind: 'field',
-                id: `${sequence.id}::controls::${f.key}`,
+                nodePathInfo: {
+                    nodePath: [...nodePath, 'controls', f.key],
+                    index,
+                    numberOfSequencesWithThisNodePath: 0,
+                },
                 label: (_a = f.description) !== null && _a !== void 0 ? _a : f.key,
                 field: f,
             });
@@ -70,15 +95,14 @@ const buildTimelineTree = ({ sequence, dragOverrides, codeValues, }) => {
     return roots;
 };
 exports.buildTimelineTree = buildTimelineTree;
-const flattenVisibleTreeNodes = ({ nodes, expandedTracks, depth = 0, }) => {
-    var _a;
+const flattenVisibleTreeNodes = ({ nodes, getIsExpanded, depth = 0, }) => {
     const out = [];
     for (const node of nodes) {
         out.push({ node, depth });
-        if (node.kind === 'group' && ((_a = expandedTracks[node.id]) !== null && _a !== void 0 ? _a : false)) {
+        if (node.kind === 'group' && getIsExpanded(node.nodePathInfo)) {
             out.push(...(0, exports.flattenVisibleTreeNodes)({
                 nodes: node.children,
-                expandedTracks,
+                getIsExpanded,
                 depth: depth + 1,
             }));
         }
@@ -93,9 +117,15 @@ const getTreeRowHeight = (node) => {
     return exports.TREE_GROUP_ROW_HEIGHT;
 };
 exports.getTreeRowHeight = getTreeRowHeight;
-const getExpandedTrackHeight = (sequence, expandedTracks, dragOverrides, codeValues) => {
-    const tree = (0, exports.buildTimelineTree)({ sequence, dragOverrides, codeValues });
-    const flat = (0, exports.flattenVisibleTreeNodes)({ nodes: tree, expandedTracks });
+const getExpandedTrackHeight = ({ sequence, nodePathInfo, getIsExpanded, getCodeValues, }) => {
+    const tree = (0, exports.buildTimelineTree)({
+        sequence,
+        nodePathInfo,
+        // We assume that no drag overrides can change the timeline layout
+        getDragOverrides: () => ({}),
+        getCodeValues,
+    });
+    const flat = (0, exports.flattenVisibleTreeNodes)({ nodes: tree, getIsExpanded });
     if (flat.length === 0) {
         return exports.TIMELINE_TRACK_EXPANDED_HEIGHT;
     }

package/dist/icons/Checkmark.d.ts

@@ -1 +1,4 @@
-export declare const Checkmark: () => import("react/jsx-runtime").JSX.Element;
+import React from 'react';
+export declare const Checkmark: React.FC<{
+    readonly size?: number;
+}>;

package/dist/icons/Checkmark.js

@@ -2,9 +2,5 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Checkmark = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const style = {
-    width: 14,
-    height: 14,
-};
-const Checkmark = () => (jsx_runtime_1.jsx("svg", { focusable: "false", role: "img", viewBox: "0 0 512 512", style: style, children: jsx_runtime_1.jsx("path", { fill: "currentColor", d: "M435.848 83.466L172.804 346.51l-96.652-96.652c-4.686-4.686-12.284-4.686-16.971 0l-28.284 28.284c-4.686 4.686-4.686 12.284 0 16.971l133.421 133.421c4.686 4.686 12.284 4.686 16.971 0l299.813-299.813c4.686-4.686 4.686-12.284 0-16.971l-28.284-28.284c-4.686-4.686-12.284-4.686-16.97 0z" }) }));
+const Checkmark = ({ size = 14 }) => (jsx_runtime_1.jsx("svg", { focusable: "false", role: "img", viewBox: "0 0 512 512", style: { width: size, height: size }, children: jsx_runtime_1.jsx("path", { fill: "currentColor", d: "M435.848 83.466L172.804 346.51l-96.652-96.652c-4.686-4.686-12.284-4.686-16.971 0l-28.284 28.284c-4.686 4.686-4.686 12.284 0 16.971l133.421 133.421c4.686 4.686 12.284 4.686 16.971 0l299.813-299.813c4.686-4.686 4.686-12.284 0-16.971l-28.284-28.284c-4.686-4.686-12.284-4.686-16.97 0z" }) }));
 exports.Checkmark = Checkmark;

package/dist/icons/caret.d.ts

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

package/dist/icons/caret.js

@@ -10,13 +10,16 @@ const caret = {
 const caretDown = {
     width: 10,
 };
+const caretDownSmall = {
+    width: 7,
+};
 const angleDown = {
     width: 10,
 };
 const CaretRight = () => (jsx_runtime_1.jsx("svg", { viewBox: "0 0 192 512", style: caret, children: jsx_runtime_1.jsx("path", { fill: "currentColor", d: "M0 384.662V127.338c0-17.818 21.543-26.741 34.142-14.142l128.662 128.662c7.81 7.81 7.81 20.474 0 28.284L34.142 398.804C21.543 411.404 0 402.48 0 384.662z" }) }));
 exports.CaretRight = CaretRight;
-const CaretDown = () => {
-    return (jsx_runtime_1.jsx("svg", { viewBox: "0 0 320 512", style: caretDown, children: jsx_runtime_1.jsx("path", { fill: "currentColor", d: "M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z" }) }));
+const CaretDown = ({ small = false, }) => {
+    return (jsx_runtime_1.jsx("svg", { viewBox: "0 0 320 512", style: small ? caretDownSmall : caretDown, children: jsx_runtime_1.jsx("path", { fill: "currentColor", d: "M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z" }) }));
 };
 exports.CaretDown = CaretDown;
 const AngleDown = ({ down }) => {

package/dist/internals.d.ts

@@ -2,6 +2,5 @@ export declare const StudioInternals: {
     Studio: import("react").FC<{
         readonly rootComponent: import("react").FC<{}>;
         readonly readOnly: boolean;
-        readonly visualModeEnabled: boolean;
     }>;
 };

package/dist/previewEntry.js

@@ -44,5 +44,5 @@ const renderToDOM = (content) => {
 };
 renderToDOM(jsx_runtime_1.jsx(NoRegisterRoot_1.NoRegisterRoot, {}));
 remotion_1.Internals.waitForRoot((NewRoot) => {
-    renderToDOM(jsx_runtime_1.jsx(Studio_1.Studio, { readOnly: false, rootComponent: NewRoot, visualModeEnabled: Boolean(process.env.EXPERIMENTAL_VISUAL_MODE_ENABLED) }));
+    renderToDOM(jsx_runtime_1.jsx(Studio_1.Studio, { readOnly: false, rootComponent: NewRoot }));
 });

package/dist/renderEntry.js

@@ -186,13 +186,13 @@ const renderContent = (Root) => {
                 defaultPixelFormat: bundleMode.compositionDefaultPixelFormat,
                 defaultProResProfile: bundleMode.compositionDefaultProResProfile,
                 defaultSampleRate: bundleMode.compositionDefaultSampleRate,
-            }, initialCompositions: [], 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: 0, audioLatencyHint: (_b = window.remotion_audioLatencyHint) !== null && _b !== void 0 ? _b : 'playback', visualModeEnabled: false, children: jsx_runtime_1.jsxs(remotion_1.Internals.RenderAssetManagerProvider, { collectAssets: null, children: [
+            }, initialCompositions: [], 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: 0, audioLatencyHint: (_b = window.remotion_audioLatencyHint) !== null && _b !== void 0 ? _b : 'playback', children: jsx_runtime_1.jsxs(remotion_1.Internals.RenderAssetManagerProvider, { collectAssets: null, children: [
                         jsx_runtime_1.jsx(Root, {}), jsx_runtime_1.jsx(GetVideoComposition, { state: bundleMode })
                     ] }) }) }));
         renderToDOM(markup);
     }
     if (bundleMode.type === 'evaluation') {
-        const markup = (jsx_runtime_1.jsx(remotion_1.Internals.CompositionManagerProvider, { initialCanvasContent: null, onlyRenderComposition: null, currentCompositionMetadata: null, initialCompositions: [], children: jsx_runtime_1.jsx(remotion_1.Internals.RemotionRootContexts, { frameState: null, audioEnabled: window.remotion_audioEnabled, videoEnabled: window.remotion_videoEnabled, logLevel: (_c = window.remotion_logLevel) !== null && _c !== void 0 ? _c : 'info', numberOfAudioTags: 0, audioLatencyHint: (_d = window.remotion_audioLatencyHint) !== null && _d !== void 0 ? _d : 'playback', visualModeEnabled: false, children: jsx_runtime_1.jsx(remotion_1.Internals.RenderAssetManagerProvider, { collectAssets: null, children: jsx_runtime_1.jsx(Root, {}) }) }) }));
+        const markup = (jsx_runtime_1.jsx(remotion_1.Internals.CompositionManagerProvider, { initialCanvasContent: null, onlyRenderComposition: null, currentCompositionMetadata: null, initialCompositions: [], children: jsx_runtime_1.jsx(remotion_1.Internals.RemotionRootContexts, { frameState: null, audioEnabled: window.remotion_audioEnabled, videoEnabled: window.remotion_videoEnabled, logLevel: (_c = window.remotion_logLevel) !== null && _c !== void 0 ? _c : 'info', numberOfAudioTags: 0, audioLatencyHint: (_d = window.remotion_audioLatencyHint) !== null && _d !== void 0 ? _d : 'playback', children: jsx_runtime_1.jsx(remotion_1.Internals.RenderAssetManagerProvider, { collectAssets: null, children: jsx_runtime_1.jsx(Root, {}) }) }) }));
         renderToDOM(markup);
     }
     if (bundleMode.type === 'index') {
@@ -204,7 +204,7 @@ const renderContent = (Root) => {
             window.remotion_isStudio = true;
             window.remotion_isReadOnlyStudio = true;
             window.remotion_inputProps = '{}';
-            renderToDOM(jsx_runtime_1.jsx(StudioInternals.Studio, { readOnly: true, rootComponent: Root, visualModeEnabled: false }));
+            renderToDOM(jsx_runtime_1.jsx(StudioInternals.Studio, { readOnly: true, rootComponent: Root }));
         })
             .catch((err) => {
             renderToDOM(jsx_runtime_1.jsxs("div", { children: ["Failed to load Remotion Studio: ", err.message] }));

package/package.json

@@ -3,7 +3,7 @@
 		"url": "https://github.com/remotion-dev/remotion/tree/main/packages/studio"
 	},
 	"name": "@remotion/studio",
-	"version": "4.0.459",
+	"version": "4.0.461",
 	"description": "APIs for interacting with the Remotion Studio",
 	"main": "dist",
 	"sideEffects": false,
@@ -26,24 +26,25 @@
 	},
 	"dependencies": {
 		"semver": "7.5.3",
-		"remotion": "4.0.459",
-		"@remotion/player": "4.0.459",
-		"@remotion/media-utils": "4.0.459",
-		"@remotion/renderer": "4.0.459",
-		"@remotion/web-renderer": "4.0.459",
-		"@remotion/studio-shared": "4.0.459",
-		"@remotion/zod-types": "4.0.459",
+		"remotion": "4.0.461",
+		"@remotion/player": "4.0.461",
+		"@remotion/media-utils": "4.0.461",
+		"@remotion/renderer": "4.0.461",
+		"@remotion/web-renderer": "4.0.461",
+		"@remotion/studio-shared": "4.0.461",
+		"@remotion/timeline-utils": "4.0.461",
+		"@remotion/zod-types": "4.0.461",
+		"@jridgewell/trace-mapping": "0.3.31",
 		"mediabunny": "1.42.0",
 		"memfs": "3.4.3",
-		"source-map": "0.7.3",
-		"open": "^8.4.2",
+		"open": "8.4.2",
 		"zod": "4.3.6"
 	},
 	"devDependencies": {
 		"react": "19.2.3",
 		"react-dom": "19.2.3",
-		"@types/semver": "^7.3.4",
-		"@remotion/eslint-config-internal": "4.0.459",
+		"@types/semver": "7.5.3",
+		"@remotion/eslint-config-internal": "4.0.461",
 		"eslint": "9.19.0",
 		"@typescript/native-preview": "7.0.0-dev.20260217.1"
 	},
@@ -75,12 +76,6 @@
 			"require": "./dist/previewEntry.js",
 			"module": "./dist/esm/previewEntry.mjs",
 			"import": "./dist/esm/previewEntry.mjs"
-		},
-		"./audio-waveform-worker": {
-			"types": "./dist/audio-waveform-worker.d.ts",
-			"require": "./dist/audio-waveform-worker.js",
-			"module": "./dist/esm/audio-waveform-worker.mjs",
-			"import": "./dist/esm/audio-waveform-worker.mjs"
 		}
 	},
 	"homepage": "https://www.remotion.dev/docs/studio/api",
@@ -94,9 +89,6 @@
 			],
 			"previewEntry": [
 				"./dist/previewEntry.d.ts"
-			],
-			"audio-waveform-worker": [
-				"./dist/audio-waveform-worker.d.ts"
 			]
 		}
 	}

package/dist/audio-waveform-worker.d.ts

@@ -1 +0,0 @@
-export {};

package/dist/audio-waveform-worker.js

@@ -1,102 +0,0 @@
-"use strict";
-/// <reference lib="webworker" />
-Object.defineProperty(exports, "__esModule", { value: true });
-const draw_peaks_1 = require("./components/draw-peaks");
-const load_waveform_peaks_1 = require("./components/load-waveform-peaks");
-const looped_media_timeline_1 = require("./components/looped-media-timeline");
-const slice_waveform_peaks_1 = require("./components/slice-waveform-peaks");
-let canvas = null;
-let currentController = null;
-let latestRequestId = 0;
-const postError = (requestId, error) => {
-    const message = error instanceof Error ? error.message : 'Failed to render waveform';
-    const payload = {
-        type: 'error',
-        requestId,
-        message,
-    };
-    self.postMessage(payload);
-};
-const drawPartialWaveform = (message, peaks) => {
-    if (!canvas) {
-        return;
-    }
-    const portionPeaks = (0, slice_waveform_peaks_1.sliceWaveformPeaks)({
-        durationInFrames: (0, looped_media_timeline_1.shouldTileLoopDisplay)(message.loopDisplay)
-            ? message.loopDisplay.durationInFrames
-            : message.durationInFrames,
-        fps: message.fps,
-        peaks,
-        playbackRate: message.playbackRate,
-        startFrom: message.startFrom,
-    });
-    if (!(0, looped_media_timeline_1.shouldTileLoopDisplay)(message.loopDisplay)) {
-        (0, draw_peaks_1.drawBars)(canvas, portionPeaks, 'rgba(255, 255, 255, 0.6)', message.volume, message.width);
-        return;
-    }
-    const loopWidth = (0, looped_media_timeline_1.getLoopDisplayWidth)({
-        visualizationWidth: message.width,
-        loopDisplay: message.loopDisplay,
-    });
-    const targetCanvas = new OffscreenCanvas(Math.max(1, Math.ceil(loopWidth)), message.height);
-    (0, draw_peaks_1.drawBars)(targetCanvas, portionPeaks, 'rgba(255, 255, 255, 0.6)', message.volume, targetCanvas.width);
-    const ctx = canvas.getContext('2d');
-    if (!ctx) {
-        throw new Error('Failed to get canvas context');
-    }
-    const pattern = ctx.createPattern(targetCanvas, 'repeat-x');
-    if (!pattern) {
-        return;
-    }
-    pattern.setTransform(new DOMMatrix().scaleSelf(loopWidth / targetCanvas.width, 1));
-    ctx.clearRect(0, 0, message.width, message.height);
-    ctx.fillStyle = pattern;
-    ctx.fillRect(0, 0, message.width, message.height);
-};
-const renderWaveform = async (message) => {
-    if (!canvas) {
-        postError(message.requestId, new Error('Waveform canvas not initialized'));
-        return;
-    }
-    const controller = new AbortController();
-    currentController === null || currentController === void 0 ? void 0 : currentController.abort();
-    currentController = controller;
-    latestRequestId = message.requestId;
-    try {
-        canvas.width = message.width;
-        canvas.height = message.height;
-        const peaks = await (0, load_waveform_peaks_1.loadWaveformPeaks)(message.src, controller.signal, {
-            onProgress: ({ peaks: nextPeaks }) => {
-                if (controller.signal.aborted ||
-                    latestRequestId !== message.requestId) {
-                    return;
-                }
-                drawPartialWaveform(message, nextPeaks);
-            },
-        });
-        if (controller.signal.aborted || latestRequestId !== message.requestId) {
-            return;
-        }
-        drawPartialWaveform(message, peaks);
-    }
-    catch (error) {
-        if (controller.signal.aborted || latestRequestId !== message.requestId) {
-            return;
-        }
-        postError(message.requestId, error);
-    }
-};
-self.addEventListener('message', (event) => {
-    const message = event.data;
-    if (message.type === 'init') {
-        canvas = message.canvas;
-        return;
-    }
-    if (message.type === 'dispose') {
-        currentController === null || currentController === void 0 ? void 0 : currentController.abort();
-        currentController = null;
-        canvas = null;
-        return;
-    }
-    renderWaveform(message);
-});

package/dist/components/audio-waveform-worker-types.d.ts

@@ -1,28 +0,0 @@
-import type { LoopDisplay } from 'remotion';
-export type AudioWaveformWorkerInitMessage = {
-    readonly type: 'init';
-    readonly canvas: OffscreenCanvas;
-};
-export type AudioWaveformWorkerRenderMessage = {
-    readonly type: 'render';
-    readonly requestId: number;
-    readonly src: string;
-    readonly width: number;
-    readonly height: number;
-    readonly volume: number;
-    readonly startFrom: number;
-    readonly durationInFrames: number;
-    readonly fps: number;
-    readonly playbackRate: number;
-    readonly loopDisplay: LoopDisplay | undefined;
-};
-export type AudioWaveformWorkerDisposeMessage = {
-    readonly type: 'dispose';
-};
-export type AudioWaveformWorkerIncomingMessage = AudioWaveformWorkerInitMessage | AudioWaveformWorkerRenderMessage | AudioWaveformWorkerDisposeMessage;
-export type AudioWaveformWorkerErrorMessage = {
-    readonly type: 'error';
-    readonly requestId: number;
-    readonly message: string;
-};
-export type AudioWaveformWorkerOutgoingMessage = AudioWaveformWorkerErrorMessage;

package/dist/components/audio-waveform-worker-types.js

@@ -1,2 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });