@remotion/studio 4.0.454 → 4.0.456

package/dist/esm/renderEntry.mjs

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

package/dist/helpers/create-folder-tree.d.ts

@@ -14,4 +14,9 @@ export declare const splitParentIntoNameAndParent: (name: string | null) => {
     name: string | null;
     parent: string | null;
 };
+/**
+ * Returns storage keys for the composition folder and each ancestor, so the
+ * tree can be expanded when navigating to a nested composition.
+ */
+export declare const getKeysToExpand: (initialFolderName: string, parentFolderName: string | null, initial?: string[]) => string[];
 export declare const createFolderTree: (comps: import("remotion").AnyComposition[], folders: TFolder[], foldersExpanded: Record<string, boolean>) => CompositionSelectorItemType[];

package/dist/helpers/create-folder-tree.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.createFolderTree = exports.splitParentIntoNameAndParent = exports.buildAssetFolderStructure = void 0;
+exports.createFolderTree = exports.getKeysToExpand = exports.splitParentIntoNameAndParent = exports.buildAssetFolderStructure = void 0;
 const persist_open_folders_1 = require("./persist-open-folders");
 const buildAssetFolderStructure = (files, parentFolderName, foldersExpanded) => {
     const notInFolder = files.filter((f) => !f.name.includes('/'));
@@ -52,6 +52,22 @@ const splitParentIntoNameAndParent = (name) => {
     };
 };
 exports.splitParentIntoNameAndParent = splitParentIntoNameAndParent;
+/**
+ * Returns storage keys for the composition folder and each ancestor, so the
+ * tree can be expanded when navigating to a nested composition.
+ */
+const getKeysToExpand = (initialFolderName, parentFolderName, initial = []) => {
+    initial.push((0, persist_open_folders_1.openFolderKey)({
+        folderName: initialFolderName,
+        parentName: parentFolderName,
+    }));
+    const { name, parent } = (0, exports.splitParentIntoNameAndParent)(parentFolderName);
+    if (!name) {
+        return initial;
+    }
+    return (0, exports.getKeysToExpand)(name, parent, initial);
+};
+exports.getKeysToExpand = getKeysToExpand;
 const doesFolderExist = (items, folderName, parentName) => {
     for (const item of items) {
         if (item.type === 'folder') {

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

@@ -1,10 +1,14 @@
-import type { SequenceControls, SequenceFieldSchema } from 'remotion';
+import type { EffectDefinitionAndStack, SequenceControls, SequenceFieldSchema, TSequence } from 'remotion';
 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;
@@ -15,7 +19,30 @@ export type SchemaFieldInfo = {
     fieldSchema: SequenceFieldSchema;
 };
 export declare const getSchemaFields: (controls: SequenceControls | null) => SchemaFieldInfo[] | null;
-export declare const getExpandedTrackHeight: (controls: SequenceControls | null) => number;
+export type EffectSchemaFieldLabel = {
+    key: string;
+    description: string | undefined;
+};
+export declare const getEffectSchemaLabels: (effect: EffectDefinitionAndStack<unknown>) => EffectSchemaFieldLabel[];
+export type TimelineTreeNode = {
+    readonly kind: 'group';
+    readonly id: string;
+    readonly label: string;
+    readonly children: TimelineTreeNode[];
+} | {
+    readonly kind: 'field';
+    readonly id: string;
+    readonly label: string;
+    readonly field: SchemaFieldInfo | null;
+};
+export declare const buildTimelineTree: (sequence: TSequence) => 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 getTreeRowHeight: (node: TimelineTreeNode) => number;
+export declare const getExpandedTrackHeight: (sequence: TSequence, expandedTracks: Record<string, boolean>) => 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,12 +1,16 @@
 "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.getSchemaFields = 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.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.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',
@@ -34,13 +38,90 @@ const getSchemaFields = (controls) => {
     });
 };
 exports.getSchemaFields = getSchemaFields;
-const getExpandedTrackHeight = (controls) => {
-    const fields = (0, exports.getSchemaFields)(controls);
-    if (!fields || fields.length === 0) {
+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) => {
+    const roots = [];
+    if (sequence.effects.length > 0) {
+        roots.push({
+            kind: 'group',
+            id: `${sequence.id}::effects`,
+            label: 'Effects',
+            children: sequence.effects.map((effect, i) => {
+                const effectId = `${sequence.id}::effects::${i}`;
+                return {
+                    kind: 'group',
+                    id: effectId,
+                    label: effect.definition.label,
+                    children: (0, exports.getEffectSchemaLabels)(effect).map((label) => {
+                        var _a;
+                        return ({
+                            kind: 'field',
+                            id: `${effectId}::${label.key}`,
+                            label: (_a = label.description) !== null && _a !== void 0 ? _a : label.key,
+                            field: null,
+                        });
+                    }),
+                };
+            }),
+        });
+    }
+    const controlFields = (0, exports.getSchemaFields)(sequence.controls);
+    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,
+                });
+            }),
+        });
+    }
+    return roots;
+};
+exports.buildTimelineTree = buildTimelineTree;
+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));
+        }
+    }
+    return out;
+};
+exports.flattenVisibleTreeNodes = flattenVisibleTreeNodes;
+const getTreeRowHeight = (node) => {
+    if (node.kind === 'field' && node.field) {
+        return node.field.rowHeight;
+    }
+    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);
+    if (flat.length === 0) {
         return exports.TIMELINE_TRACK_EXPANDED_HEIGHT;
     }
-    const separators = Math.max(0, fields.length - 1);
-    return fields.reduce((sum, f) => sum + f.rowHeight, 0) + separators;
+    const totalRowsHeight = flat.reduce((sum, { node }) => sum + (0, exports.getTreeRowHeight)(node), 0);
+    const separators = Math.max(0, flat.length - 1);
+    return totalRowsHeight + separators;
 };
 exports.getExpandedTrackHeight = getExpandedTrackHeight;
 exports.TIMELINE_LAYER_HEIGHT_VIDEO = 75;

package/package.json

@@ -3,7 +3,7 @@
 		"url": "https://github.com/remotion-dev/remotion/tree/main/packages/studio"
 	},
 	"name": "@remotion/studio",
-	"version": "4.0.454",
+	"version": "4.0.456",
 	"description": "APIs for interacting with the Remotion Studio",
 	"main": "dist",
 	"sideEffects": false,
@@ -26,13 +26,13 @@
 	},
 	"dependencies": {
 		"semver": "7.5.3",
-		"remotion": "4.0.454",
-		"@remotion/player": "4.0.454",
-		"@remotion/media-utils": "4.0.454",
-		"@remotion/renderer": "4.0.454",
-		"@remotion/web-renderer": "4.0.454",
-		"@remotion/studio-shared": "4.0.454",
-		"@remotion/zod-types": "4.0.454",
+		"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",
 		"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.454",
+		"@remotion/eslint-config-internal": "4.0.456",
 		"eslint": "9.19.0",
 		"@typescript/native-preview": "7.0.0-dev.20260217.1"
 	},