@remotion/studio 4.0.458 → 4.0.460

package/dist/components/Timeline/TimelineExpandArrowButton.d.ts

@@ -3,5 +3,6 @@ export declare const TimelineExpandArrowButton: React.FC<{
     readonly isExpanded: boolean;
     readonly onClick: () => void;
     readonly label: string;
+    readonly disabled: boolean;
 }>;
 export declare const TimelineExpandArrowSpacer: React.FC;

package/dist/components/Timeline/TimelineExpandArrowButton.js

@@ -22,14 +22,16 @@ const arrowButton = {
     lineHeight: 1,
 };
 const svgStyle = { display: 'block' };
-const TimelineExpandArrowButton = ({ isExpanded, onClick, label }) => {
+const TimelineExpandArrowButton = ({ isExpanded, onClick, label, disabled = false }) => {
     const style = (0, react_1.useMemo)(() => {
         return {
             ...arrowButton,
             transform: isExpanded ? 'rotate(90deg)' : 'rotate(0deg)',
+            cursor: disabled ? 'default' : 'pointer',
+            opacity: disabled ? 0.5 : 1,
         };
-    }, [isExpanded]);
-    return (jsx_runtime_1.jsx("button", { type: "button", style: style, onClick: onClick, "aria-expanded": isExpanded, "aria-label": `${isExpanded ? 'Collapse' : 'Expand'} ${label}`, children: jsx_runtime_1.jsx("svg", { width: "12", height: "12", viewBox: "0 0 8 8", style: svgStyle, children: jsx_runtime_1.jsx("path", { d: "M2 1L6 4L2 7Z", fill: "white" }) }) }));
+    }, [isExpanded, disabled]);
+    return (jsx_runtime_1.jsx("button", { type: "button", style: style, onClick: onClick, disabled: disabled, "aria-expanded": isExpanded, "aria-label": `${isExpanded ? 'Collapse' : 'Expand'} ${label}`, children: jsx_runtime_1.jsx("svg", { width: "12", height: "12", viewBox: "0 0 8 8", style: svgStyle, children: jsx_runtime_1.jsx("path", { d: "M2 1L6 4L2 7Z", fill: "white" }) }) }));
 };
 exports.TimelineExpandArrowButton = TimelineExpandArrowButton;
 const TimelineExpandArrowSpacer = () => {

package/dist/components/Timeline/TimelineExpandedRow.d.ts

@@ -1,16 +1,16 @@
-import type { SequenceNodePath } from '@remotion/studio-shared';
 import React from 'react';
-import type { SequenceSchema } from 'remotion';
+import type { SequenceSchema, SequenceNodePath } from 'remotion';
 import type { CodePosition } from '../../error-overlay/react-overlay/utils/get-source-map';
+import type { SequenceNodePathInfo } from '../../helpers/get-timeline-sequence-sort-key';
 import type { TimelineTreeNode } from '../../helpers/timeline-layout';
+import type { GetIsExpanded } from '../ExpandedTracksProvider';
 export declare const TimelineExpandedRow: React.FC<{
     readonly node: TimelineTreeNode;
     readonly depth: number;
     readonly nestedDepth: number;
-    readonly expandedTracks: Record<string, boolean>;
-    readonly toggleTrack: (id: string) => void;
-    readonly overrideId: string;
+    readonly getIsExpanded: GetIsExpanded;
+    readonly toggleTrack: (nodePathInfo: SequenceNodePathInfo) => void;
     readonly validatedLocation: CodePosition | null;
-    readonly nodePath: SequenceNodePath | null;
+    readonly nodePath: SequenceNodePath;
     readonly schema: SequenceSchema;
 }>;

package/dist/components/Timeline/TimelineExpandedRow.js

@@ -24,8 +24,7 @@ const labelOnlyRowBase = {
     alignItems: 'center',
     paddingRight: timeline_layout_1.EXPANDED_SECTION_PADDING_RIGHT,
 };
-const TimelineExpandedRow = ({ node, depth, nestedDepth, expandedTracks, toggleTrack, overrideId, validatedLocation, nodePath, schema, }) => {
-    var _a;
+const TimelineExpandedRow = ({ node, depth, nestedDepth, getIsExpanded, toggleTrack, validatedLocation, nodePath, schema, }) => {
     const paddingLeft = timeline_layout_1.EXPANDED_SECTION_PADDING_LEFT + depth * TimelineListItem_1.INDENT;
     const groupStyle = (0, react_1.useMemo)(() => ({ ...groupRowBase, paddingLeft }), [paddingLeft]);
     const labelOnlyStyle = (0, react_1.useMemo)(() => ({
@@ -34,13 +33,13 @@ const TimelineExpandedRow = ({ node, depth, nestedDepth, expandedTracks, toggleT
         paddingLeft,
     }), [node, paddingLeft]);
     if (node.kind === 'group') {
-        const isExpanded = (_a = expandedTracks[node.id]) !== null && _a !== void 0 ? _a : false;
+        const isExpanded = getIsExpanded(node.nodePathInfo);
         return (jsx_runtime_1.jsxs("div", { style: groupStyle, children: [
-                jsx_runtime_1.jsx(Padder_1.Padder, { depth: nestedDepth + 1 }), jsx_runtime_1.jsx(TimelineExpandArrowButton_1.TimelineExpandArrowButton, { isExpanded: isExpanded, onClick: () => toggleTrack(node.id), label: `${node.label} section` }), jsx_runtime_1.jsx("span", { style: rowLabel, children: node.label })
+                jsx_runtime_1.jsx(Padder_1.Padder, { depth: nestedDepth + 1 }), jsx_runtime_1.jsx(TimelineExpandArrowButton_1.TimelineExpandArrowButton, { isExpanded: isExpanded, onClick: () => toggleTrack(node.nodePathInfo), label: `${node.label} section`, disabled: false }), jsx_runtime_1.jsx("span", { style: rowLabel, children: node.label })
             ] }));
     }
     if (node.field) {
-        return (jsx_runtime_1.jsx(TimelineFieldRow_1.TimelineFieldRow, { field: node.field, overrideId: overrideId, validatedLocation: validatedLocation, paddingLeft: paddingLeft, nestedDepth: nestedDepth, nodePath: nodePath, schema: schema }));
+        return (jsx_runtime_1.jsx(TimelineFieldRow_1.TimelineFieldRow, { field: node.field, validatedLocation: validatedLocation, paddingLeft: paddingLeft, nestedDepth: nestedDepth, nodePath: nodePath, schema: schema }));
     }
     return (jsx_runtime_1.jsxs("div", { style: labelOnlyStyle, children: [
             jsx_runtime_1.jsx(Padder_1.Padder, { depth: nestedDepth + 1 }), jsx_runtime_1.jsx("span", { style: rowLabel, children: node.label })

package/dist/components/Timeline/TimelineExpandedSection.d.ts

@@ -1,10 +1,10 @@
-import type { SequenceNodePath } from '@remotion/studio-shared';
 import React from 'react';
 import { type TSequence } from 'remotion';
 import type { OriginalPosition } from '../../error-overlay/react-overlay/utils/get-source-map';
+import type { SequenceNodePathInfo } from '../../helpers/get-timeline-sequence-sort-key';
 export declare const TimelineExpandedSection: React.FC<{
     readonly sequence: TSequence;
     readonly originalLocation: OriginalPosition | null;
-    readonly nodePath: SequenceNodePath | null;
+    readonly nodePathInfo: SequenceNodePathInfo;
     readonly nestedDepth: number;
 }>;

package/dist/components/Timeline/TimelineExpandedSection.js

@@ -53,10 +53,10 @@ const separator = {
     height: 1,
     backgroundColor: colors_1.TIMELINE_TRACK_SEPARATOR,
 };
-const TimelineExpandedSection = ({ sequence, originalLocation, nodePath, nestedDepth }) => {
-    const { expandedTracks, toggleTrack } = (0, react_1.useContext)(ExpandedTracksProvider_1.ExpandedTracksContext);
-    const { dragOverrides, codeValues } = (0, react_1.useContext)(remotion_1.Internals.VisualModeOverridesContext);
-    const { overrideId } = sequence.controls;
+const TimelineExpandedSection = ({ sequence, originalLocation, nodePathInfo, nestedDepth }) => {
+    const { getIsExpanded } = (0, react_1.useContext)(ExpandedTracksProvider_1.ExpandedTracksGetterContext);
+    const { toggleTrack } = (0, react_1.useContext)(ExpandedTracksProvider_1.ExpandedTracksSetterContext);
+    const { getDragOverrides, getCodeValues } = (0, react_1.useContext)(remotion_1.Internals.VisualModeGettersContext);
     const validatedLocation = (0, react_1.useMemo)(() => {
         var _a;
         if (!originalLocation ||
@@ -70,9 +70,20 @@ const TimelineExpandedSection = ({ sequence, originalLocation, nodePath, nestedD
             column: (_a = originalLocation.column) !== null && _a !== void 0 ? _a : 0,
         };
     }, [originalLocation]);
-    const tree = (0, react_1.useMemo)(() => (0, timeline_layout_1.buildTimelineTree)({ sequence, dragOverrides, codeValues }), [sequence, dragOverrides, codeValues]);
-    const flat = (0, react_1.useMemo)(() => (0, timeline_layout_1.flattenVisibleTreeNodes)({ nodes: tree, expandedTracks }), [tree, expandedTracks]);
-    const expandedHeight = (0, react_1.useMemo)(() => (0, timeline_layout_1.getExpandedTrackHeight)(sequence, expandedTracks, dragOverrides, codeValues), [sequence, expandedTracks, dragOverrides, codeValues]);
+    const tree = (0, react_1.useMemo)(() => (0, timeline_layout_1.buildTimelineTree)({
+        sequence,
+        nodePathInfo,
+        getDragOverrides,
+        getCodeValues,
+    }), [sequence, nodePathInfo, getDragOverrides, getCodeValues]);
+    const flat = (0, react_1.useMemo)(() => (0, timeline_layout_1.flattenVisibleTreeNodes)({ nodes: tree, getIsExpanded }), [tree, getIsExpanded]);
+    const expandedHeight = (0, react_1.useMemo)(() => (0, timeline_layout_1.getExpandedTrackHeight)({
+        sequence,
+        nodePathInfo,
+        getIsExpanded,
+        getDragOverrides,
+        getCodeValues,
+    }), [sequence, nodePathInfo, getIsExpanded, getDragOverrides, getCodeValues]);
     const style = (0, react_1.useMemo)(() => {
         return {
             ...expandedSectionBase,
@@ -84,8 +95,8 @@ const TimelineExpandedSection = ({ sequence, originalLocation, nodePath, nestedD
         return jsx_runtime_1.jsx("div", { style: style, children: "No schema" });
     }
     return (jsx_runtime_1.jsx("div", { style: style, children: flat.map(({ node, depth }, i) => {
-            return (jsx_runtime_1.jsxs(react_1.default.Fragment, { children: [i > 0 ? jsx_runtime_1.jsx("div", { style: separator }) : null, jsx_runtime_1.jsx(TimelineExpandedRow_1.TimelineExpandedRow, { node: node, depth: depth, nestedDepth: nestedDepth, expandedTracks: expandedTracks, toggleTrack: toggleTrack, overrideId: overrideId, validatedLocation: validatedLocation, nodePath: nodePath, schema: schema })
-                ] }, node.id));
+            return (jsx_runtime_1.jsxs(react_1.default.Fragment, { children: [i > 0 ? jsx_runtime_1.jsx("div", { style: separator }) : null, jsx_runtime_1.jsx(TimelineExpandedRow_1.TimelineExpandedRow, { node: node, depth: depth, nestedDepth: nestedDepth, getIsExpanded: getIsExpanded, toggleTrack: toggleTrack, validatedLocation: validatedLocation, nodePath: nodePathInfo.nodePath, schema: schema })
+                ] }, JSON.stringify(node.nodePathInfo)));
         }) }));
 };
 exports.TimelineExpandedSection = TimelineExpandedSection;

package/dist/components/Timeline/TimelineFieldRow.d.ts

@@ -1,14 +1,13 @@
-import type { SequenceNodePath } from '@remotion/studio-shared';
 import React from 'react';
+import type { SequenceNodePath } from 'remotion';
 import type { SequenceSchema } from 'remotion';
 import type { CodePosition } from '../../error-overlay/react-overlay/utils/get-source-map';
 import type { SchemaFieldInfo } from '../../helpers/timeline-layout';
 export declare const TimelineFieldRow: React.FC<{
     readonly field: SchemaFieldInfo;
-    readonly overrideId: string;
     readonly validatedLocation: CodePosition | null;
     readonly paddingLeft: number;
     readonly nestedDepth: number;
-    readonly nodePath: SequenceNodePath | null;
+    readonly nodePath: SequenceNodePath;
     readonly schema: SequenceSchema;
 }>;

package/dist/components/Timeline/TimelineFieldRow.js

@@ -26,15 +26,18 @@ const fieldLabelRow = {
     alignItems: 'center',
     gap: 6,
 };
-const TimelineFieldRow = ({ field, overrideId, validatedLocation, paddingLeft, nestedDepth, nodePath, schema, }) => {
-    var _a, _b, _c, _d;
-    const { setDragOverrides, clearDragOverrides, dragOverrides, codeValues } = (0, react_1.useContext)(remotion_1.Internals.VisualModeOverridesContext);
-    const codeValuesForOverride = (_a = codeValues[overrideId]) !== null && _a !== void 0 ? _a : null;
-    const codeValue = (_b = codeValuesForOverride === null || codeValuesForOverride === void 0 ? void 0 : codeValuesForOverride[field.key]) !== null && _b !== void 0 ? _b : null;
+const TimelineFieldRow = ({ field, validatedLocation, paddingLeft, nestedDepth, nodePath, schema, }) => {
+    var _a, _b, _c;
+    const { getDragOverrides, getCodeValues } = (0, react_1.useContext)(remotion_1.Internals.VisualModeGettersContext);
+    const { setDragOverrides, clearDragOverrides } = (0, react_1.useContext)(remotion_1.Internals.VisualModeSettersContext);
+    const codeValuesForOverride = getCodeValues(nodePath);
+    const codeValue = (_a = codeValuesForOverride === null || codeValuesForOverride === void 0 ? void 0 : codeValuesForOverride[field.key]) !== null && _a !== void 0 ? _a : null;
     const dragOverrideValue = (0, react_1.useMemo)(() => {
         var _a;
-        return ((_a = dragOverrides[overrideId]) !== null && _a !== void 0 ? _a : {})[field.key];
-    }, [dragOverrides, overrideId, field.key]);
+        return nodePath === null
+            ? undefined
+            : ((_a = getDragOverrides(nodePath)) !== null && _a !== void 0 ? _a : {})[field.key];
+    }, [getDragOverrides, nodePath, field.key]);
     const effectiveValue = remotion_1.Internals.getEffectiveVisualModeValue({
         codeValue,
         runtimeValue: field.currentRuntimeValue,
@@ -42,7 +45,7 @@ const TimelineFieldRow = ({ field, overrideId, validatedLocation, paddingLeft, n
         defaultValue: field.fieldSchema.default,
         shouldResortToDefaultValueIfUndefined: true,
     });
-    const { setCodeValues } = (0, react_1.useContext)(remotion_1.Internals.VisualModeOverridesContext);
+    const { setCodeValues } = (0, react_1.useContext)(remotion_1.Internals.VisualModeSettersContext);
     const onSave = (0, react_1.useCallback)((key, value) => {
         if (!codeValuesForOverride || !validatedLocation || !nodePath) {
             return Promise.reject(new Error('Cannot save'));
@@ -63,12 +66,7 @@ const TimelineFieldRow = ({ field, overrideId, validatedLocation, paddingLeft, n
             schema,
         }).then((data) => {
             if (data.success) {
-                if (data.newStatus.canUpdate) {
-                    setCodeValues(overrideId, data.newStatus.props);
-                }
-                else {
-                    setCodeValues(overrideId, null);
-                }
+                setCodeValues(nodePath, data.newStatus);
                 return;
             }
             return Promise.reject(new Error(data.reason));
@@ -77,17 +75,22 @@ const TimelineFieldRow = ({ field, overrideId, validatedLocation, paddingLeft, n
         codeValuesForOverride,
         field.fieldSchema.default,
         nodePath,
-        overrideId,
         schema,
         setCodeValues,
         validatedLocation,
     ]);
     const onDragValueChange = (0, react_1.useCallback)((key, value) => {
-        setDragOverrides(overrideId, key, value);
-    }, [setDragOverrides, overrideId]);
+        if (nodePath === null) {
+            throw new Error('Cannot drag value');
+        }
+        setDragOverrides(nodePath, key, value);
+    }, [setDragOverrides, nodePath]);
     const onDragEnd = (0, react_1.useCallback)(() => {
-        clearDragOverrides(overrideId);
-    }, [clearDragOverrides, overrideId]);
+        if (nodePath === null) {
+            throw new Error('Cannot clear drag value');
+        }
+        clearDragOverrides(nodePath);
+    }, [clearDragOverrides, nodePath]);
     const style = (0, react_1.useMemo)(() => {
         return {
             ...fieldRowBase,
@@ -96,7 +99,7 @@ const TimelineFieldRow = ({ field, overrideId, validatedLocation, paddingLeft, n
         };
     }, [field.rowHeight, paddingLeft]);
     return (jsx_runtime_1.jsxs("div", { style: style, children: [
-            jsx_runtime_1.jsx(Padder_1.Padder, { depth: nestedDepth + 1 }), jsx_runtime_1.jsx("div", { style: fieldLabelRow, children: jsx_runtime_1.jsx("span", { style: fieldName, children: (_c = field.description) !== null && _c !== void 0 ? _c : field.key }) }), jsx_runtime_1.jsx(TimelineSchemaField_1.TimelineFieldValue, { field: field, propStatus: codeValue, onSave: onSave, onDragValueChange: onDragValueChange, onDragEnd: onDragEnd, canUpdate: (_d = codeValue === null || codeValue === void 0 ? void 0 : codeValue.canUpdate) !== null && _d !== void 0 ? _d : false, effectiveValue: effectiveValue, codeValue: codeValue })
+            jsx_runtime_1.jsx(Padder_1.Padder, { depth: nestedDepth + 1 }), jsx_runtime_1.jsx("div", { style: fieldLabelRow, children: jsx_runtime_1.jsx("span", { style: fieldName, children: (_b = field.description) !== null && _b !== void 0 ? _b : field.key }) }), jsx_runtime_1.jsx(TimelineSchemaField_1.TimelineFieldValue, { field: field, propStatus: codeValue, onSave: onSave, onDragValueChange: onDragValueChange, onDragEnd: onDragEnd, canUpdate: (_c = codeValue === null || codeValue === void 0 ? void 0 : codeValue.canUpdate) !== null && _c !== void 0 ? _c : false, effectiveValue: effectiveValue, codeValue: codeValue })
         ] }));
 };
 exports.TimelineFieldRow = TimelineFieldRow;

package/dist/components/Timeline/TimelineHeightContainer.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import type { TrackWithHash } from '../../helpers/get-timeline-sequence-sort-key';
+export declare const TimelineHeightContainer: React.FC<{
+    readonly shown: TrackWithHash[];
+    readonly hasBeenCut: boolean;
+    readonly children: React.ReactNode;
+}>;

package/dist/components/Timeline/TimelineHeightContainer.js

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TimelineHeightContainer = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const use_timeline_height_1 = require("./use-timeline-height");
+const baseStyle = {
+    display: 'flex',
+    flex: 1,
+    minHeight: '100%',
+    overflowX: 'hidden',
+};
+const TimelineHeightContainer = ({ shown, hasBeenCut, children }) => {
+    const height = (0, use_timeline_height_1.useTimelineHeight)({ shown, hasBeenCut });
+    const style = (0, react_1.useMemo)(() => ({ ...baseStyle, height }), [height]);
+    return jsx_runtime_1.jsx("div", { style: style, children: children });
+};
+exports.TimelineHeightContainer = TimelineHeightContainer;

package/dist/components/Timeline/TimelineList.js

@@ -20,7 +20,7 @@ const TimelineList = ({ timeline }) => {
     const isCompact = size ? size.width < 250 : false;
     return (jsx_runtime_1.jsxs("div", { ref: ref, style: container, children: [
             jsx_runtime_1.jsx(TimelineTimeIndicators_1.TimelineTimePadding, {}), timeline.map((track) => {
-                return (jsx_runtime_1.jsx("div", { children: jsx_runtime_1.jsx(TimelineListItem_1.TimelineListItem, { nestedDepth: track.depth, sequence: track.sequence, isCompact: isCompact }, track.sequence.id) }, track.sequence.id));
+                return (jsx_runtime_1.jsx("div", { children: jsx_runtime_1.jsx(TimelineListItem_1.TimelineListItem, { nestedDepth: track.depth, sequence: track.sequence, isCompact: isCompact, nodePathInfo: track.nodePathInfo }, track.sequence.id) }, track.sequence.id));
             })] }));
 };
 exports.TimelineList = TimelineList;

package/dist/components/Timeline/TimelineListItem.d.ts

@@ -1,8 +1,10 @@
 import React from 'react';
 import type { TSequence } from 'remotion';
+import type { SequenceNodePathInfo } from '../../helpers/get-timeline-sequence-sort-key';
 export declare const INDENT = 10;
 export declare const TimelineListItem: React.FC<{
     readonly sequence: TSequence;
     readonly nestedDepth: number;
     readonly isCompact: boolean;
+    readonly nodePathInfo: SequenceNodePathInfo | null;
 }>;

package/dist/components/Timeline/TimelineListItem.js

@@ -17,18 +17,19 @@ const TimelineExpandedSection_1 = require("./TimelineExpandedSection");
 const TimelineLayerEye_1 = require("./TimelineLayerEye");
 const TimelineStack_1 = require("./TimelineStack");
 const use_resolved_stack_1 = require("./use-resolved-stack");
-const use_sequence_props_subscription_1 = require("./use-sequence-props-subscription");
 exports.INDENT = 10;
-const TimelineListItem = ({ nestedDepth, sequence, isCompact }) => {
+const TimelineListItem = ({ nestedDepth, sequence, isCompact, nodePathInfo }) => {
     var _a, _b;
+    const nodePath = (_a = nodePathInfo === null || nodePathInfo === void 0 ? void 0 : nodePathInfo.nodePath) !== null && _a !== void 0 ? _a : null;
     const { previewServerState } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
     const visualModeEnvEnabled = Boolean(process.env.EXPERIMENTAL_VISUAL_MODE_ENABLED);
     const previewConnected = previewServerState.type === 'connected';
     const visualModeActive = visualModeEnvEnabled && previewConnected;
     const { hidden, setHidden } = (0, react_1.useContext)(remotion_1.Internals.SequenceVisibilityToggleContext);
-    const { expandedTracks, toggleTrack } = (0, react_1.useContext)(ExpandedTracksProvider_1.ExpandedTracksContext);
-    const originalLocation = (0, use_resolved_stack_1.useResolvedStack)((_a = sequence.stack) !== null && _a !== void 0 ? _a : null);
-    const { nodePath, jsxInMapCallback } = (0, use_sequence_props_subscription_1.useSequencePropsSubscription)(sequence, originalLocation, visualModeActive);
+    const { getIsExpanded } = (0, react_1.useContext)(ExpandedTracksProvider_1.ExpandedTracksGetterContext);
+    const { toggleTrack } = (0, react_1.useContext)(ExpandedTracksProvider_1.ExpandedTracksSetterContext);
+    const { getIsJsxInMapCallback } = (0, react_1.useContext)(remotion_1.Internals.VisualModeGettersContext);
+    const originalLocation = (0, use_resolved_stack_1.useResolvedStack)((_b = sequence.stack) !== null && _b !== void 0 ? _b : null);
     const validatedLocation = (0, react_1.useMemo)(() => {
         var _a;
         if (!originalLocation ||
@@ -49,7 +50,7 @@ const TimelineListItem = ({ nestedDepth, sequence, isCompact }) => {
         if (!(validatedLocation === null || validatedLocation === void 0 ? void 0 : validatedLocation.source) || !nodePath) {
             return;
         }
-        if (jsxInMapCallback) {
+        if (getIsJsxInMapCallback(nodePath)) {
             const message = 'This sequence is rendered inside a .map() callback. Duplicating inserts another copy in that callback (affecting each list item). Continue?';
             // eslint-disable-next-line no-alert -- native confirm before applying duplicate codemod in .map callbacks
             if (!window.confirm(message)) {
@@ -71,11 +72,18 @@ const TimelineListItem = ({ nestedDepth, sequence, isCompact }) => {
         catch (err) {
             (0, NotificationCenter_1.showNotification)(err.message, 4000);
         }
-    }, [jsxInMapCallback, nodePath, validatedLocation === null || validatedLocation === void 0 ? void 0 : validatedLocation.source]);
+    }, [nodePath, validatedLocation === null || validatedLocation === void 0 ? void 0 : validatedLocation.source, getIsJsxInMapCallback]);
     const onDeleteSequenceFromSource = (0, react_1.useCallback)(async () => {
         if (!(validatedLocation === null || validatedLocation === void 0 ? void 0 : validatedLocation.source) || !nodePath) {
             return;
         }
+        if (getIsJsxInMapCallback(nodePath)) {
+            const message = 'This sequence is rendered inside a .map() callback. Deleting removes all sequences in that callback. Continue?';
+            // eslint-disable-next-line no-alert -- native confirm before applying duplicate codemod in .map callbacks
+            if (!window.confirm(message)) {
+                return;
+            }
+        }
         try {
             const result = await (0, call_api_1.callApi)('/api/delete-jsx-node', {
                 fileName: validatedLocation.source,
@@ -91,7 +99,7 @@ const TimelineListItem = ({ nestedDepth, sequence, isCompact }) => {
         catch (err) {
             (0, NotificationCenter_1.showNotification)(err.message, 4000);
         }
-    }, [nodePath, validatedLocation === null || validatedLocation === void 0 ? void 0 : validatedLocation.source]);
+    }, [nodePath, validatedLocation === null || validatedLocation === void 0 ? void 0 : validatedLocation.source, getIsJsxInMapCallback]);
     const contextMenuValues = (0, react_1.useMemo)(() => {
         if (!visualModeEnvEnabled) {
             return [];
@@ -139,10 +147,13 @@ const TimelineListItem = ({ nestedDepth, sequence, isCompact }) => {
         onDuplicateSequenceFromSource,
         visualModeEnvEnabled,
     ]);
-    const isExpanded = visualModeActive && ((_b = expandedTracks[sequence.id]) !== null && _b !== void 0 ? _b : false);
+    const isExpanded = visualModeActive && nodePathInfo !== null && getIsExpanded(nodePathInfo);
     const onToggleExpand = (0, react_1.useCallback)(() => {
-        toggleTrack(sequence.id);
-    }, [sequence.id, toggleTrack]);
+        if (nodePathInfo === null) {
+            return;
+        }
+        toggleTrack(nodePathInfo);
+    }, [nodePathInfo, toggleTrack]);
     const isItemHidden = (0, react_1.useMemo)(() => {
         var _a;
         return (_a = hidden[sequence.id]) !== null && _a !== void 0 ? _a : false;
@@ -177,8 +188,11 @@ const TimelineListItem = ({ nestedDepth, sequence, isCompact }) => {
     }, []);
     const hasExpandableContent = Boolean(sequence.controls) || sequence.effects.length > 0;
     const trackRow = (jsx_runtime_1.jsx("div", { style: outer, children: jsx_runtime_1.jsxs("div", { style: inner, children: [
-                jsx_runtime_1.jsx(TimelineLayerEye_1.TimelineLayerEye, { type: sequence.type === 'audio' ? 'speaker' : 'eye', hidden: isItemHidden, onInvoked: onToggleVisibility }), jsx_runtime_1.jsx(Padder_1.Padder, { depth: nestedDepth }), visualModeActive ? (hasExpandableContent ? (jsx_runtime_1.jsx(TimelineExpandArrowButton_1.TimelineExpandArrowButton, { isExpanded: isExpanded, onClick: onToggleExpand, label: "track properties" })) : (jsx_runtime_1.jsx(TimelineExpandArrowButton_1.TimelineExpandArrowSpacer, {}))) : null, jsx_runtime_1.jsx(TimelineStack_1.TimelineStack, { sequence: sequence, isCompact: isCompact, originalLocation: originalLocation })
+                jsx_runtime_1.jsx(TimelineLayerEye_1.TimelineLayerEye, { type: sequence.type === 'audio' ? 'speaker' : 'eye', hidden: isItemHidden, onInvoked: onToggleVisibility }), jsx_runtime_1.jsx(Padder_1.Padder, { depth: nestedDepth }), visualModeActive ? (hasExpandableContent ? (jsx_runtime_1.jsx(TimelineExpandArrowButton_1.TimelineExpandArrowButton, { isExpanded: isExpanded, onClick: onToggleExpand, label: "track properties", disabled: nodePathInfo === null })) : (jsx_runtime_1.jsx(TimelineExpandArrowButton_1.TimelineExpandArrowSpacer, {}))) : null, jsx_runtime_1.jsx(TimelineStack_1.TimelineStack, { sequence: sequence, isCompact: isCompact, originalLocation: originalLocation })
             ] }) }));
-    return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [visualModeEnvEnabled ? (jsx_runtime_1.jsx(ContextMenu_1.ContextMenu, { values: contextMenuValues, children: trackRow })) : (trackRow), visualModeActive && isExpanded && hasExpandableContent ? (jsx_runtime_1.jsx(TimelineExpandedSection_1.TimelineExpandedSection, { sequence: sequence, originalLocation: originalLocation, nodePath: nodePath, nestedDepth: nestedDepth })) : null] }));
+    return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [visualModeEnvEnabled ? (jsx_runtime_1.jsx(ContextMenu_1.ContextMenu, { values: contextMenuValues, children: trackRow })) : (trackRow), visualModeActive &&
+                isExpanded &&
+                hasExpandableContent &&
+                nodePathInfo ? (jsx_runtime_1.jsx(TimelineExpandedSection_1.TimelineExpandedSection, { sequence: sequence, originalLocation: originalLocation, nodePathInfo: nodePathInfo, nestedDepth: nestedDepth })) : null] }));
 };
 exports.TimelineListItem = TimelineListItem;

package/dist/components/Timeline/TimelineSchemaField.js

@@ -17,6 +17,9 @@ const notEditableBackground = {
     borderRadius: 3,
     padding: '0 4px',
 };
+const inlineWrapper = {
+    fontSize: 12,
+};
 const TimelineFieldValue = ({ field, onSave, onDragValueChange, onDragEnd, propStatus, canUpdate, effectiveValue, codeValue, }) => {
     const wrapperStyle = canUpdate === null || canUpdate === false
         ? notEditableBackground
@@ -46,7 +49,7 @@ const TimelineFieldValue = ({ field, onSave, onDragValueChange, onDragEnd, propS
         return (jsx_runtime_1.jsx("span", { style: wrapperStyle, children: jsx_runtime_1.jsx(TimelineBooleanField_1.TimelineBooleanField, { field: field, codeValue: codeValue, canUpdate: canUpdate, onSave: onSave, effectiveValue: effectiveValue }) }));
     }
     if (field.typeName === 'enum') {
-        return (jsx_runtime_1.jsx("span", { style: wrapperStyle, children: jsx_runtime_1.jsx(TimelineEnumField_1.TimelineEnumField, { field: field, codeValue: codeValue, canUpdate: canUpdate, onSave: onSave, effectiveValue: effectiveValue, onDragValueChange: onDragValueChange, onDragEnd: onDragEnd }) }));
+        return (jsx_runtime_1.jsx("span", { style: inlineWrapper, children: jsx_runtime_1.jsx(TimelineEnumField_1.TimelineEnumField, { field: field, codeValue: codeValue, canUpdate: canUpdate, onSave: onSave, effectiveValue: effectiveValue, onDragValueChange: onDragValueChange, onDragEnd: onDragEnd }) }));
     }
     return (jsx_runtime_1.jsx("span", { style: { ...unsupportedLabel, fontStyle: 'normal' }, children: String(effectiveValue) }));
 };

package/dist/components/Timeline/TimelineTracks.js

@@ -19,13 +19,19 @@ const content = {
 const timelineContent = {
     minHeight: '100%',
 };
-const getExpandedPlaceholderStyle = (sequence, expandedTracks, dragOverrides, codeValues) => ({
-    height: (0, timeline_layout_1.getExpandedTrackHeight)(sequence, expandedTracks, dragOverrides, codeValues) + timeline_layout_1.TIMELINE_ITEM_BORDER_BOTTOM,
+const getExpandedPlaceholderStyle = ({ sequence, nodePathInfo, getIsExpanded, getDragOverrides, getCodeValues, }) => ({
+    height: (0, timeline_layout_1.getExpandedTrackHeight)({
+        sequence,
+        nodePathInfo,
+        getIsExpanded,
+        getDragOverrides,
+        getCodeValues,
+    }) + timeline_layout_1.TIMELINE_ITEM_BORDER_BOTTOM,
 });
 const TimelineTracks = ({ timeline, hasBeenCut }) => {
-    const { expandedTracks } = (0, react_1.useContext)(ExpandedTracksProvider_1.ExpandedTracksContext);
+    const { getIsExpanded } = (0, react_1.useContext)(ExpandedTracksProvider_1.ExpandedTracksGetterContext);
     const { previewServerState } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
-    const { dragOverrides, codeValues } = (0, react_1.useContext)(remotion_1.Internals.VisualModeOverridesContext);
+    const { getDragOverrides, getCodeValues } = (0, react_1.useContext)(remotion_1.Internals.VisualModeGettersContext);
     const visualModeEnabled = Boolean(process.env.EXPERIMENTAL_VISUAL_MODE_ENABLED) &&
         previewServerState.type === 'connected';
     const timelineStyle = (0, react_1.useMemo)(() => {
@@ -37,16 +43,21 @@ const TimelineTracks = ({ timeline, hasBeenCut }) => {
     return (jsx_runtime_1.jsxs("div", { style: timelineStyle, children: [
             jsx_runtime_1.jsxs("div", { style: content, children: [
                     jsx_runtime_1.jsx(TimelineTimeIndicators_1.TimelineTimePadding, {}), timeline.map((track) => {
-                        var _a;
                         if ((0, is_collapsed_1.isTrackHidden)(track)) {
                             return null;
                         }
-                        const isExpanded = (_a = expandedTracks[track.sequence.id]) !== null && _a !== void 0 ? _a : false;
+                        const isExpanded = track.nodePathInfo !== null && getIsExpanded(track.nodePathInfo);
                         return (jsx_runtime_1.jsxs("div", { children: [
                                 jsx_runtime_1.jsx("div", { style: {
                                         height: (0, timeline_layout_1.getTimelineLayerHeight)(track.sequence.type),
                                         marginBottom: timeline_layout_1.TIMELINE_ITEM_BORDER_BOTTOM,
-                                    }, children: jsx_runtime_1.jsx(TimelineSequence_1.TimelineSequence, { s: track.sequence }) }), visualModeEnabled && isExpanded ? (jsx_runtime_1.jsx("div", { style: getExpandedPlaceholderStyle(track.sequence, expandedTracks, dragOverrides, codeValues) })) : null] }, track.sequence.id));
+                                    }, children: jsx_runtime_1.jsx(TimelineSequence_1.TimelineSequence, { s: track.sequence }) }), visualModeEnabled && isExpanded && track.nodePathInfo ? (jsx_runtime_1.jsx("div", { style: getExpandedPlaceholderStyle({
+                                        sequence: track.sequence,
+                                        nodePathInfo: track.nodePathInfo,
+                                        getIsExpanded,
+                                        getDragOverrides,
+                                        getCodeValues,
+                                    }) })) : null] }, track.sequence.id));
                     })] }), hasBeenCut ? jsx_runtime_1.jsx(MaxTimelineTracks_1.MaxTimelineTracksReached, {}) : null] }));
 };
 exports.TimelineTracks = TimelineTracks;