@remotion/studio 4.0.456 → 4.0.458

package/dist/esm/renderEntry.mjs

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

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

@@ -1,24 +1,14 @@
-import type { EffectDefinitionAndStack, SequenceControls, SequenceFieldSchema, TSequence } from 'remotion';
+import { type CodeValues, type DragOverrides, type SchemaFieldInfo, type SequenceControls } from '@remotion/studio-shared';
+import type { EffectDefinitionAndStack, TSequence } from 'remotion';
+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;
 export declare const TIMELINE_BORDER = 1;
 export declare const TIMELINE_ITEM_BORDER_BOTTOM = 1;
 export declare const TIMELINE_TRACK_EXPANDED_HEIGHT = 100;
-export declare const SCHEMA_FIELD_ROW_HEIGHT = 22;
-export declare const UNSUPPORTED_FIELD_ROW_HEIGHT = 22;
 export declare const TREE_GROUP_ROW_HEIGHT = 22;
-export declare const TREE_INDENT_PER_LEVEL = 16;
 export declare const EXPANDED_SECTION_PADDING_LEFT = 28;
 export declare const EXPANDED_SECTION_PADDING_RIGHT = 10;
-export type SchemaFieldInfo = {
-    key: string;
-    description: string | undefined;
-    typeName: string;
-    supported: boolean;
-    rowHeight: number;
-    currentValue: unknown;
-    fieldSchema: SequenceFieldSchema;
-};
-export declare const getSchemaFields: (controls: SequenceControls | null) => SchemaFieldInfo[] | null;
 export type EffectSchemaFieldLabel = {
     key: string;
     description: string | undefined;
@@ -35,14 +25,22 @@ export type TimelineTreeNode = {
     readonly label: string;
     readonly field: SchemaFieldInfo | null;
 };
-export declare const buildTimelineTree: (sequence: TSequence) => TimelineTreeNode[];
+export declare const buildTimelineTree: ({ sequence, dragOverrides, codeValues, }: {
+    sequence: TSequence;
+    dragOverrides: DragOverrides;
+    codeValues: CodeValues;
+}) => TimelineTreeNode[];
 export type FlatTreeRow = {
     readonly node: TimelineTreeNode;
     readonly depth: number;
 };
-export declare const flattenVisibleTreeNodes: (nodes: TimelineTreeNode[], expandedTracks: Record<string, boolean>, depth?: number) => FlatTreeRow[];
+export declare const flattenVisibleTreeNodes: ({ nodes, expandedTracks, depth, }: {
+    nodes: TimelineTreeNode[];
+    expandedTracks: Record<string, boolean>;
+    depth?: number | undefined;
+}) => FlatTreeRow[];
 export declare const getTreeRowHeight: (node: TimelineTreeNode) => number;
-export declare const getExpandedTrackHeight: (sequence: TSequence, expandedTracks: Record<string, boolean>) => number;
+export declare const getExpandedTrackHeight: (sequence: TSequence, expandedTracks: Record<string, boolean>, dragOverrides: DragOverrides, codeValues: CodeValues) => 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

@@ -1,43 +1,18 @@
 "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.getSchemaFields = exports.EXPANDED_SECTION_PADDING_RIGHT = exports.EXPANDED_SECTION_PADDING_LEFT = exports.TREE_INDENT_PER_LEVEL = exports.TREE_GROUP_ROW_HEIGHT = exports.UNSUPPORTED_FIELD_ROW_HEIGHT = exports.SCHEMA_FIELD_ROW_HEIGHT = exports.TIMELINE_TRACK_EXPANDED_HEIGHT = exports.TIMELINE_ITEM_BORDER_BOTTOM = exports.TIMELINE_BORDER = exports.TIMELINE_PADDING = 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.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 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, "getFieldsToShow", { enumerable: true, get: function () { return studio_shared_2.getFieldsToShow; } });
 exports.TIMELINE_PADDING = 16;
 exports.TIMELINE_BORDER = 1;
 exports.TIMELINE_ITEM_BORDER_BOTTOM = 1;
 exports.TIMELINE_TRACK_EXPANDED_HEIGHT = 100;
-exports.SCHEMA_FIELD_ROW_HEIGHT = 22;
-exports.UNSUPPORTED_FIELD_ROW_HEIGHT = 22;
 exports.TREE_GROUP_ROW_HEIGHT = 22;
-exports.TREE_INDENT_PER_LEVEL = 16;
 exports.EXPANDED_SECTION_PADDING_LEFT = 28;
 exports.EXPANDED_SECTION_PADDING_RIGHT = 10;
-const SUPPORTED_SCHEMA_TYPES = new Set([
-    'number',
-    'boolean',
-    'rotation',
-    'translate',
-]);
-const getSchemaFields = (controls) => {
-    if (!controls) {
-        return null;
-    }
-    return Object.entries(controls.schema).map(([key, fieldSchema]) => {
-        const typeName = fieldSchema.type;
-        const supported = SUPPORTED_SCHEMA_TYPES.has(typeName);
-        return {
-            key,
-            description: fieldSchema.description,
-            typeName,
-            supported,
-            rowHeight: supported
-                ? exports.SCHEMA_FIELD_ROW_HEIGHT
-                : exports.UNSUPPORTED_FIELD_ROW_HEIGHT,
-            currentValue: controls.currentValue[key],
-            fieldSchema,
-        };
-    });
-};
-exports.getSchemaFields = getSchemaFields;
 const getEffectSchemaLabels = (effect) => {
     if (!effect.definition.schema) {
         return [];
@@ -48,7 +23,8 @@ const getEffectSchemaLabels = (effect) => {
     }));
 };
 exports.getEffectSchemaLabels = getEffectSchemaLabels;
-const buildTimelineTree = (sequence) => {
+const buildTimelineTree = ({ sequence, dragOverrides, codeValues, }) => {
+    var _a;
     const roots = [];
     if (sequence.effects.length > 0) {
         roots.push({
@@ -74,33 +50,37 @@ const buildTimelineTree = (sequence) => {
             }),
         });
     }
-    const controlFields = (0, exports.getSchemaFields)(sequence.controls);
+    const controlFields = (0, studio_shared_1.getFieldsToShow)({
+        schema: sequence.controls.schema,
+        currentRuntimeValueDotNotation: sequence.controls.currentRuntimeValueDotNotation,
+        dragOverrides,
+        codeValues,
+        overrideId: sequence.controls.overrideId,
+    });
     if (controlFields && controlFields.length > 0) {
-        roots.push({
-            kind: 'group',
-            id: `${sequence.id}::controls`,
-            label: 'Controls',
-            children: controlFields.map((f) => {
-                var _a;
-                return ({
-                    kind: 'field',
-                    id: `${sequence.id}::controls::${f.key}`,
-                    label: (_a = f.description) !== null && _a !== void 0 ? _a : f.key,
-                    field: f,
-                });
-            }),
-        });
+        for (const f of controlFields) {
+            roots.push({
+                kind: 'field',
+                id: `${sequence.id}::controls::${f.key}`,
+                label: (_a = f.description) !== null && _a !== void 0 ? _a : f.key,
+                field: f,
+            });
+        }
     }
     return roots;
 };
 exports.buildTimelineTree = buildTimelineTree;
-const flattenVisibleTreeNodes = (nodes, expandedTracks, depth = 0) => {
+const flattenVisibleTreeNodes = ({ nodes, expandedTracks, depth = 0, }) => {
     var _a;
     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)) {
-            out.push(...(0, exports.flattenVisibleTreeNodes)(node.children, expandedTracks, depth + 1));
+            out.push(...(0, exports.flattenVisibleTreeNodes)({
+                nodes: node.children,
+                expandedTracks,
+                depth: depth + 1,
+            }));
         }
     }
     return out;
@@ -113,9 +93,9 @@ const getTreeRowHeight = (node) => {
     return exports.TREE_GROUP_ROW_HEIGHT;
 };
 exports.getTreeRowHeight = getTreeRowHeight;
-const getExpandedTrackHeight = (sequence, expandedTracks) => {
-    const tree = (0, exports.buildTimelineTree)(sequence);
-    const flat = (0, exports.flattenVisibleTreeNodes)(tree, expandedTracks);
+const getExpandedTrackHeight = (sequence, expandedTracks, dragOverrides, codeValues) => {
+    const tree = (0, exports.buildTimelineTree)({ sequence, dragOverrides, codeValues });
+    const flat = (0, exports.flattenVisibleTreeNodes)({ nodes: tree, expandedTracks });
     if (flat.length === 0) {
         return exports.TIMELINE_TRACK_EXPANDED_HEIGHT;
     }

package/package.json

@@ -3,7 +3,7 @@
 		"url": "https://github.com/remotion-dev/remotion/tree/main/packages/studio"
 	},
 	"name": "@remotion/studio",
-	"version": "4.0.456",
+	"version": "4.0.458",
 	"description": "APIs for interacting with the Remotion Studio",
 	"main": "dist",
 	"sideEffects": false,
@@ -26,13 +26,13 @@
 	},
 	"dependencies": {
 		"semver": "7.5.3",
-		"remotion": "4.0.456",
-		"@remotion/player": "4.0.456",
-		"@remotion/media-utils": "4.0.456",
-		"@remotion/renderer": "4.0.456",
-		"@remotion/web-renderer": "4.0.456",
-		"@remotion/studio-shared": "4.0.456",
-		"@remotion/zod-types": "4.0.456",
+		"remotion": "4.0.458",
+		"@remotion/player": "4.0.458",
+		"@remotion/media-utils": "4.0.458",
+		"@remotion/renderer": "4.0.458",
+		"@remotion/web-renderer": "4.0.458",
+		"@remotion/studio-shared": "4.0.458",
+		"@remotion/zod-types": "4.0.458",
 		"mediabunny": "1.42.0",
 		"memfs": "3.4.3",
 		"source-map": "0.7.3",
@@ -43,7 +43,7 @@
 		"react": "19.2.3",
 		"react-dom": "19.2.3",
 		"@types/semver": "^7.3.4",
-		"@remotion/eslint-config-internal": "4.0.456",
+		"@remotion/eslint-config-internal": "4.0.458",
 		"eslint": "9.19.0",
 		"@typescript/native-preview": "7.0.0-dev.20260217.1"
 	},