@remotion/studio 4.0.460 → 4.0.462

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-nrgs0ad5.js").then(({ StudioInternals }) => {
+    import("./chunk-yvg1f56k.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.js

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.calculateTimeline = void 0;
+const studio_shared_1 = require("@remotion/studio-shared");
 const get_sequence_visible_range_1 = require("./get-sequence-visible-range");
 const get_timeline_nestedness_1 = require("./get-timeline-nestedness");
 const get_timeline_sequence_hash_1 = require("./get-timeline-sequence-hash");
@@ -58,7 +59,14 @@ const calculateTimeline = ({ sequences, overrideIdsToNodePaths, }) => {
             hash: actualHash,
             cascadedStart,
             cascadedDuration: sequence.duration,
-            nodePathInfo: nodePath ? { nodePath, index: 0 } : null,
+            nodePathInfo: nodePath
+                ? {
+                    sequenceSubscriptionKey: nodePath,
+                    auxiliaryKeys: [],
+                    index: 0,
+                    numberOfSequencesWithThisNodePath: 0,
+                }
+                : null,
         });
     }
     const uniqueTracks = [];
@@ -78,17 +86,39 @@ const calculateTimeline = ({ sequences, overrideIdsToNodePaths, }) => {
         return sortKeyA.localeCompare(sortKeyB);
     });
     const nodePathIndexCounters = new Map();
-    return sortedTracks.map((track) => {
+    return sortedTracks
+        .map((track) => {
         var _a;
         if (track.nodePathInfo === null) {
             return track;
         }
-        const key = JSON.stringify(track.nodePathInfo.nodePath);
+        const key = (0, studio_shared_1.stringifySequenceSubscriptionKey)(track.nodePathInfo.sequenceSubscriptionKey);
         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 },
+            nodePathInfo: {
+                sequenceSubscriptionKey: track.nodePathInfo.sequenceSubscriptionKey,
+                auxiliaryKeys: track.nodePathInfo.auxiliaryKeys,
+                index,
+                numberOfSequencesWithThisNodePath: 0,
+            },
+        };
+    })
+        .map((track) => {
+        var _a;
+        if (track.nodePathInfo === null) {
+            return track;
+        }
+        const key = (0, studio_shared_1.stringifySequenceSubscriptionKey)(track.nodePathInfo.sequenceSubscriptionKey);
+        return {
+            ...track,
+            nodePathInfo: {
+                sequenceSubscriptionKey: track.nodePathInfo.sequenceSubscriptionKey,
+                auxiliaryKeys: track.nodePathInfo.auxiliaryKeys,
+                index: track.nodePathInfo.index,
+                numberOfSequencesWithThisNodePath: (_a = nodePathIndexCounters.get(key)) !== null && _a !== void 0 ? _a : 0,
+            },
         };
     });
 };

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

@@ -1,7 +1,9 @@
-import type { SequenceNodePath, TSequence } from 'remotion';
+import type { SequencePropsSubscriptionKey, TSequence } from 'remotion';
 export type SequenceNodePathInfo = {
-    nodePath: SequenceNodePath;
+    sequenceSubscriptionKey: SequencePropsSubscriptionKey;
+    auxiliaryKeys: string[];
     index: number;
+    numberOfSequencesWithThisNodePath: number;
 };
 type Track = {
     sequence: TSequence;

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

@@ -1,9 +1,9 @@
-import { type CodeValues, type DragOverrides, type SchemaFieldInfo, type SequenceControls } from '@remotion/studio-shared';
-import type { EffectDefinitionAndStack, GetCodeValues, GetDragOverrides, TSequence } from 'remotion';
+import { type AnySchemaFieldInfo, type CodeValues, type DragOverrides, type EffectSchemaFieldInfo, type SchemaFieldInfo, type SequenceControls, type SequenceSchemaFieldInfo } from '@remotion/studio-shared';
+import type { 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 type { AnySchemaFieldInfo, CodeValues, DragOverrides, EffectSchemaFieldInfo, SchemaFieldInfo, SequenceControls, SequenceSchemaFieldInfo, };
+export { SCHEMA_FIELD_ROW_HEIGHT, getEffectFieldsToShow, getFieldsToShow, } from '@remotion/studio-shared';
 export declare const TIMELINE_PADDING = 16;
 export declare const TIMELINE_BORDER = 1;
 export declare const TIMELINE_ITEM_BORDER_BOTTOM = 1;
@@ -11,11 +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 EffectSchemaFieldLabel = {
-    key: string;
-    description: string | undefined;
-};
-export declare const getEffectSchemaLabels: (effect: EffectDefinitionAndStack<unknown>) => EffectSchemaFieldLabel[];
+export type TimelineFieldOnSave = (value: unknown) => Promise<void>;
+export type TimelineFieldOnDragValueChange = (value: unknown) => void;
 export type TimelineTreeNode = {
     readonly kind: 'group';
     readonly nodePathInfo: SequenceNodePathInfo;
@@ -25,13 +22,13 @@ export type TimelineTreeNode = {
     readonly kind: 'field';
     readonly nodePathInfo: SequenceNodePathInfo;
     readonly label: string;
-    readonly field: SchemaFieldInfo | null;
+    readonly field: AnySchemaFieldInfo | null;
 };
-export declare const buildTimelineTree: ({ sequence, nodePathInfo, getDragOverrides, getCodeValues, }: {
+export declare const buildTimelineTree: ({ sequence, nodePathInfo, getDragOverrides, codeValues, }: {
     sequence: TSequence;
     nodePathInfo: SequenceNodePathInfo;
     getDragOverrides: GetDragOverrides;
-    getCodeValues: GetCodeValues;
+    codeValues: CodeValues;
 }) => TimelineTreeNode[];
 export type FlatTreeRow = {
     readonly node: TimelineTreeNode;
@@ -43,12 +40,11 @@ export declare const flattenVisibleTreeNodes: ({ nodes, getIsExpanded, depth, }:
     depth?: number | undefined;
 }) => FlatTreeRow[];
 export declare const getTreeRowHeight: (node: TimelineTreeNode) => number;
-export declare const getExpandedTrackHeight: ({ sequence, nodePathInfo, getIsExpanded, getDragOverrides, getCodeValues, }: {
+export declare const getExpandedTrackHeight: ({ sequence, nodePathInfo, getIsExpanded, codeValues, }: {
     sequence: TSequence;
     nodePathInfo: SequenceNodePathInfo;
     getIsExpanded: GetIsExpanded;
-    getDragOverrides: GetDragOverrides;
-    getCodeValues: GetCodeValues;
+    codeValues: CodeValues;
 }) => number;
 export declare const TIMELINE_LAYER_HEIGHT_VIDEO = 75;
 export declare const TIMELINE_LAYER_HEIGHT_IMAGE = 50;

package/dist/helpers/timeline-layout.js

@@ -1,10 +1,10 @@
 "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.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;
+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;
 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; } });
-Object.defineProperty(exports, "UNSUPPORTED_FIELD_ROW_HEIGHT", { enumerable: true, get: function () { return studio_shared_2.UNSUPPORTED_FIELD_ROW_HEIGHT; } });
+Object.defineProperty(exports, "getEffectFieldsToShow", { enumerable: true, get: function () { return studio_shared_2.getEffectFieldsToShow; } });
 Object.defineProperty(exports, "getFieldsToShow", { enumerable: true, get: function () { return studio_shared_2.getFieldsToShow; } });
 exports.TIMELINE_PADDING = 16;
 exports.TIMELINE_BORDER = 1;
@@ -13,41 +13,43 @@ 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 getEffectSchemaLabels = (effect) => {
-    if (!effect.definition.schema) {
-        return [];
-    }
-    return Object.entries(effect.definition.schema).map(([key, fieldSchema]) => ({
-        key,
-        description: fieldSchema.description,
-    }));
-};
-exports.getEffectSchemaLabels = getEffectSchemaLabels;
-const buildTimelineTree = ({ sequence, nodePathInfo, getDragOverrides, getCodeValues, }) => {
+const buildTimelineTree = ({ sequence, nodePathInfo, getDragOverrides, codeValues, }) => {
     var _a;
     const roots = [];
-    const { nodePath, index } = nodePathInfo;
+    const { sequenceSubscriptionKey, index, auxiliaryKeys } = nodePathInfo;
     if (sequence.effects.length > 0) {
         roots.push({
             kind: 'group',
-            nodePathInfo: { nodePath: [...nodePath, 'effects'], index },
+            nodePathInfo: {
+                sequenceSubscriptionKey,
+                auxiliaryKeys: [...auxiliaryKeys, 'effects'],
+                index,
+                numberOfSequencesWithThisNodePath: 0,
+            },
             label: 'Effects',
             children: sequence.effects.map((effect, i) => {
-                const effectNodePath = [...nodePath, 'effects', i];
+                const effectFields = (0, studio_shared_1.getEffectFieldsToShow)(effect, i);
                 return {
                     kind: 'group',
-                    nodePathInfo: { nodePath: effectNodePath, index },
-                    label: effect.definition.label,
-                    children: (0, exports.getEffectSchemaLabels)(effect).map((label) => {
+                    nodePathInfo: {
+                        sequenceSubscriptionKey,
+                        auxiliaryKeys: [...auxiliaryKeys, 'effects', i.toString()],
+                        index,
+                        numberOfSequencesWithThisNodePath: 0,
+                    },
+                    label: effect.label,
+                    children: effectFields.map((f) => {
                         var _a;
                         return ({
                             kind: 'field',
                             nodePathInfo: {
-                                nodePath: [...effectNodePath, label.key],
+                                sequenceSubscriptionKey,
+                                auxiliaryKeys: [...auxiliaryKeys, f.key],
                                 index,
+                                numberOfSequencesWithThisNodePath: 0,
                             },
-                            label: (_a = label.description) !== null && _a !== void 0 ? _a : label.key,
-                            field: null,
+                            label: (_a = f.description) !== null && _a !== void 0 ? _a : f.key,
+                            field: f,
                         });
                     }),
                 };
@@ -58,14 +60,19 @@ const buildTimelineTree = ({ sequence, nodePathInfo, getDragOverrides, getCodeVa
         schema: sequence.controls.schema,
         currentRuntimeValueDotNotation: sequence.controls.currentRuntimeValueDotNotation,
         getDragOverrides,
-        getCodeValues,
-        nodePath,
+        codeValues,
+        nodePath: sequenceSubscriptionKey,
     });
     if (controlFields && controlFields.length > 0) {
         for (const f of controlFields) {
             roots.push({
                 kind: 'field',
-                nodePathInfo: { nodePath: [...nodePath, 'controls', f.key], index },
+                nodePathInfo: {
+                    sequenceSubscriptionKey,
+                    auxiliaryKeys: [...auxiliaryKeys, 'controls', f.key],
+                    index,
+                    numberOfSequencesWithThisNodePath: 0,
+                },
                 label: (_a = f.description) !== null && _a !== void 0 ? _a : f.key,
                 field: f,
             });
@@ -96,12 +103,13 @@ const getTreeRowHeight = (node) => {
     return exports.TREE_GROUP_ROW_HEIGHT;
 };
 exports.getTreeRowHeight = getTreeRowHeight;
-const getExpandedTrackHeight = ({ sequence, nodePathInfo, getIsExpanded, getDragOverrides, getCodeValues, }) => {
+const getExpandedTrackHeight = ({ sequence, nodePathInfo, getIsExpanded, codeValues, }) => {
     const tree = (0, exports.buildTimelineTree)({
         sequence,
         nodePathInfo,
-        getDragOverrides,
-        getCodeValues,
+        // We assume that no drag overrides can change the timeline layout
+        getDragOverrides: () => ({}),
+        codeValues,
     });
     const flat = (0, exports.flattenVisibleTreeNodes)({ nodes: tree, getIsExpanded });
     if (flat.length === 0) {

package/dist/icons/eyedropper.d.ts

@@ -0,0 +1,4 @@
+import type { SVGProps } from 'react';
+export declare const EyedropperIcon: React.FC<SVGProps<SVGSVGElement> & {
+    color?: string;
+}>;

package/dist/icons/eyedropper.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.EyedropperIcon = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const EyedropperIcon = ({ color, ...props }) => (jsx_runtime_1.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 640 640", ...props, children: jsx_runtime_1.jsx("path", { fill: color !== null && color !== void 0 ? color : 'currentColor', d: "M263 233C278.6 248.6 315.3 285.3 373.1 343.1C400.1 370.1 414 384 415 385C424.4 394.4 439.6 394.4 448.9 385C458.2 375.6 458.3 360.4 448.9 351.1L440.9 343.1C457.3 326.7 492.4 291.6 546.1 237.9C565.2 218.8 575.9 192.9 575.9 165.9C575.9 109.7 530.3 64.1 474.1 64.1C447.1 64.1 421.2 74.8 402.1 93.9C348.4 147.6 313.3 182.7 296.9 199.1L288.9 191.1C279.5 181.7 264.3 181.7 255 191.1C245.7 200.5 245.6 215.7 255 225L255 225L263 233zM512.2 203.9L407 309.1L330.9 233L436.1 127.8C446.2 117.7 459.9 112 474.2 112C503.9 112 528 136.1 528 165.8C528 180.1 522.3 193.8 512.2 203.9zM117.1 393C103.6 406.5 96 424.8 96 443.9L96 496.8L68 538.8C61.7 548.3 62.9 561 71 569.1C79.1 577.2 91.8 578.4 101.3 572.1L143.3 544.1L196.2 544.1C215.3 544.1 233.6 536.5 247.1 523L366.1 404L332.2 370.1L213.2 489.1C208.7 493.6 202.6 496.1 196.2 496.1L144.1 496.1L144.1 444C144.1 437.6 146.6 431.5 151.1 427L270.1 308L236.2 274.1L117.2 393.1z" }) }));
+exports.EyedropperIcon = EyedropperIcon;

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,10 +3,9 @@
 		"url": "https://github.com/remotion-dev/remotion/tree/main/packages/studio"
 	},
 	"name": "@remotion/studio",
-	"version": "4.0.460",
+	"version": "4.0.462",
 	"description": "APIs for interacting with the Remotion Studio",
 	"main": "dist",
-	"sideEffects": false,
 	"scripts": {
 		"lint": "eslint src",
 		"make": "tsgo -d && bun --env-file=../.env.bundle bundle.ts",
@@ -26,25 +25,25 @@
 	},
 	"dependencies": {
 		"semver": "7.5.3",
-		"remotion": "4.0.460",
-		"@remotion/player": "4.0.460",
-		"@remotion/media-utils": "4.0.460",
-		"@remotion/renderer": "4.0.460",
-		"@remotion/web-renderer": "4.0.460",
-		"@remotion/studio-shared": "4.0.460",
-		"@remotion/timeline-utils": "4.0.460",
-		"@remotion/zod-types": "4.0.460",
-		"mediabunny": "1.42.0",
+		"remotion": "4.0.462",
+		"@remotion/player": "4.0.462",
+		"@remotion/media-utils": "4.0.462",
+		"@remotion/renderer": "4.0.462",
+		"@remotion/web-renderer": "4.0.462",
+		"@remotion/studio-shared": "4.0.462",
+		"@remotion/timeline-utils": "4.0.462",
+		"@remotion/zod-types": "4.0.462",
+		"@jridgewell/trace-mapping": "0.3.31",
+		"mediabunny": "1.45.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.460",
+		"@types/semver": "7.5.3",
+		"@remotion/eslint-config-internal": "4.0.462",
 		"eslint": "9.19.0",
 		"@typescript/native-preview": "7.0.0-dev.20260217.1"
 	},
@@ -76,12 +75,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",
@@ -95,9 +88,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 timeline_utils_1 = require("@remotion/timeline-utils");
-const draw_peaks_1 = require("./components/draw-peaks");
-const load_waveform_peaks_1 = require("./components/load-waveform-peaks");
-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, timeline_utils_1.shouldTileLoopDisplay)(message.loopDisplay)
-            ? message.loopDisplay.durationInFrames
-            : message.durationInFrames,
-        fps: message.fps,
-        peaks,
-        playbackRate: message.playbackRate,
-        startFrom: message.startFrom,
-    });
-    if (!(0, timeline_utils_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, timeline_utils_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 });

package/dist/components/draw-peaks.d.ts

@@ -1 +0,0 @@
-export declare const drawBars: (canvas: HTMLCanvasElement | OffscreenCanvas, peaks: Float32Array<ArrayBufferLike>, color: string, volume: number, width: number) => void;

package/dist/components/draw-peaks.js

@@ -1,68 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.drawBars = void 0;
-const parse_color_1 = require("./parse-color");
-const CLIPPING_COLOR = '#FF7F50';
-const drawBars = (canvas, peaks, color, volume, width) => {
-    const ctx = canvas.getContext('2d');
-    if (!ctx) {
-        throw new Error('Failed to get canvas context');
-    }
-    const { height } = canvas;
-    const w = canvas.width;
-    // Skip drawing when the target canvas has not been laid out yet.
-    // `createImageData(0, h)` / `(w, 0)` throws a DOMException, which
-    // surfaces in Studio's console for compositions with many audio
-    // sequences — some segments are 0 px wide at certain zoom levels.
-    if (w === 0 || height === 0) {
-        return;
-    }
-    ctx.clearRect(0, 0, w, height);
-    if (volume === 0)
-        return;
-    const [r, g, b, a] = (0, parse_color_1.parseColor)(color);
-    const [cr, cg, cb, ca] = (0, parse_color_1.parseColor)(CLIPPING_COLOR);
-    const imageData = ctx.createImageData(w, height);
-    const { data } = imageData;
-    const numBars = width;
-    for (let barIndex = 0; barIndex < numBars; barIndex++) {
-        const x = barIndex;
-        if (x >= w)
-            break;
-        const peakIndex = Math.floor((barIndex / numBars) * peaks.length);
-        const peak = peaks[peakIndex] || 0;
-        const scaledPeak = peak * volume;
-        const halfBar = Math.max(0, Math.min(height / 2, (scaledPeak * height) / 2));
-        if (halfBar === 0)
-            continue;
-        const mid = height / 2;
-        const barY = Math.round(mid - halfBar);
-        const barEnd = Math.round(mid + halfBar);
-        const isClipping = scaledPeak > 1;
-        const clipTopEnd = isClipping ? Math.min(barY + 2, barEnd) : barY;
-        const clipBotStart = isClipping ? Math.max(barEnd - 2, barY) : barEnd;
-        for (let y = barY; y < clipTopEnd; y++) {
-            const idx = (y * w + x) * 4;
-            data[idx] = cr;
-            data[idx + 1] = cg;
-            data[idx + 2] = cb;
-            data[idx + 3] = ca;
-        }
-        for (let y = clipTopEnd; y < clipBotStart; y++) {
-            const idx = (y * w + x) * 4;
-            data[idx] = r;
-            data[idx + 1] = g;
-            data[idx + 2] = b;
-            data[idx + 3] = a;
-        }
-        for (let y = clipBotStart; y < barEnd; y++) {
-            const idx = (y * w + x) * 4;
-            data[idx] = cr;
-            data[idx + 1] = cg;
-            data[idx + 2] = cb;
-            data[idx + 3] = ca;
-        }
-    }
-    ctx.putImageData(imageData, 0, 0);
-};
-exports.drawBars = drawBars;

package/dist/components/load-waveform-peaks.d.ts

@@ -1,13 +0,0 @@
-declare const TARGET_SAMPLE_RATE = 100;
-export { TARGET_SAMPLE_RATE };
-type Progress = {
-    readonly peaks: Float32Array;
-    readonly completedPeaks: number;
-    readonly totalPeaks: number;
-    readonly final: boolean;
-};
-type LoadWaveformPeaksOptions = {
-    readonly onProgress?: (progress: Progress) => void;
-    readonly progressIntervalInMs?: number;
-};
-export declare function loadWaveformPeaks(url: string, signal: AbortSignal, options?: LoadWaveformPeaksOptions): Promise<Float32Array>;