@remotion/studio 4.0.461 → 4.0.462

package/dist/esm/renderEntry.mjs

@@ -207,7 +207,7 @@ var renderContent = (Root) => {
     renderToDOM(/* @__PURE__ */ jsx("div", {
       children: /* @__PURE__ */ jsx(DelayedSpinner, {})
     }));
-    import("./chunk-yzh34sp0.js").then(({ StudioInternals }) => {
+    import("./chunk-yvg1f56k.js").then(({ StudioInternals }) => {
       window.remotion_isStudio = true;
       window.remotion_isReadOnlyStudio = true;
       window.remotion_inputProps = "{}";

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");
@@ -59,7 +60,12 @@ const calculateTimeline = ({ sequences, overrideIdsToNodePaths, }) => {
             cascadedStart,
             cascadedDuration: sequence.duration,
             nodePathInfo: nodePath
-                ? { nodePath, index: 0, numberOfSequencesWithThisNodePath: 0 }
+                ? {
+                    sequenceSubscriptionKey: nodePath,
+                    auxiliaryKeys: [],
+                    index: 0,
+                    numberOfSequencesWithThisNodePath: 0,
+                }
                 : null,
         });
     }
@@ -86,13 +92,14 @@ const calculateTimeline = ({ sequences, overrideIdsToNodePaths, }) => {
         if (track.nodePathInfo === null) {
             return track;
         }
-        const key = track.nodePathInfo.nodePath.join('.');
+        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,
+                sequenceSubscriptionKey: track.nodePathInfo.sequenceSubscriptionKey,
+                auxiliaryKeys: track.nodePathInfo.auxiliaryKeys,
                 index,
                 numberOfSequencesWithThisNodePath: 0,
             },
@@ -103,11 +110,12 @@ const calculateTimeline = ({ sequences, overrideIdsToNodePaths, }) => {
         if (track.nodePathInfo === null) {
             return track;
         }
-        const key = track.nodePathInfo.nodePath.join('.');
+        const key = (0, studio_shared_1.stringifySequenceSubscriptionKey)(track.nodePathInfo.sequenceSubscriptionKey);
         return {
             ...track,
             nodePathInfo: {
-                nodePath: track.nodePathInfo.nodePath,
+                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,6 +1,7 @@
-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;
 };

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;
@@ -13,11 +13,6 @@ 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;
-};
-export declare const getEffectSchemaLabels: (effect: EffectDefinitionAndStack<unknown>) => EffectSchemaFieldLabel[];
 export type TimelineTreeNode = {
     readonly kind: 'group';
     readonly nodePathInfo: SequenceNodePathInfo;
@@ -27,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;
@@ -45,11 +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, getCodeValues, }: {
+export declare const getExpandedTrackHeight: ({ sequence, nodePathInfo, getIsExpanded, codeValues, }: {
     sequence: TSequence;
     nodePathInfo: SequenceNodePathInfo;
     getIsExpanded: GetIsExpanded;
-    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,11 +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 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; } });
+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;
@@ -14,57 +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]) => {
-        if (fieldSchema.type === 'hidden') {
-            return null;
-        }
-        return {
-            key,
-            description: fieldSchema.description,
-        };
-    })
-        .filter(no_react_1.NoReactInternals.truthy);
-};
-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'],
+                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,
+                        sequenceSubscriptionKey,
+                        auxiliaryKeys: [...auxiliaryKeys, 'effects', i.toString()],
                         index,
                         numberOfSequencesWithThisNodePath: 0,
                     },
-                    label: effect.definition.label,
-                    children: (0, exports.getEffectSchemaLabels)(effect).map((label) => {
+                    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,
                         });
                     }),
                 };
@@ -75,15 +60,16 @@ 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],
+                    sequenceSubscriptionKey,
+                    auxiliaryKeys: [...auxiliaryKeys, 'controls', f.key],
                     index,
                     numberOfSequencesWithThisNodePath: 0,
                 },
@@ -117,13 +103,13 @@ const getTreeRowHeight = (node) => {
     return exports.TREE_GROUP_ROW_HEIGHT;
 };
 exports.getTreeRowHeight = getTreeRowHeight;
-const getExpandedTrackHeight = ({ sequence, nodePathInfo, getIsExpanded, getCodeValues, }) => {
+const getExpandedTrackHeight = ({ sequence, nodePathInfo, getIsExpanded, codeValues, }) => {
     const tree = (0, exports.buildTimelineTree)({
         sequence,
         nodePathInfo,
         // We assume that no drag overrides can change the timeline layout
         getDragOverrides: () => ({}),
-        getCodeValues,
+        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/package.json

@@ -3,10 +3,9 @@
 		"url": "https://github.com/remotion-dev/remotion/tree/main/packages/studio"
 	},
 	"name": "@remotion/studio",
-	"version": "4.0.461",
+	"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,16 +25,16 @@
 	},
 	"dependencies": {
 		"semver": "7.5.3",
-		"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",
+		"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.42.0",
+		"mediabunny": "1.45.0",
 		"memfs": "3.4.3",
 		"open": "8.4.2",
 		"zod": "4.3.6"
@@ -44,7 +43,7 @@
 		"react": "19.2.3",
 		"react-dom": "19.2.3",
 		"@types/semver": "7.5.3",
-		"@remotion/eslint-config-internal": "4.0.461",
+		"@remotion/eslint-config-internal": "4.0.462",
 		"eslint": "9.19.0",
 		"@typescript/native-preview": "7.0.0-dev.20260217.1"
 	},