@remotion/studio 4.0.459 → 4.0.461

package/dist/components/Timeline/TimelineHeightContainer.js

@@ -0,0 +1,51 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TimelineHeightContainer = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = __importStar(require("react"));
+const use_timeline_height_1 = require("./use-timeline-height");
+const baseStyle = {
+    display: 'flex',
+    flex: 1,
+    minHeight: '100%',
+    overflowX: 'hidden',
+};
+const TimelineHeightContainerInner = ({ 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 = react_1.default.memo(TimelineHeightContainerInner);

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,16 @@ 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 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,8 +47,10 @@ const TimelineListItem = ({ nestedDepth, sequence, isCompact }) => {
         if (!(validatedLocation === null || validatedLocation === void 0 ? void 0 : validatedLocation.source) || !nodePath) {
             return;
         }
-        if (jsxInMapCallback) {
-            const message = 'This sequence is rendered inside a .map() callback. Duplicating inserts another copy in that callback (affecting each list item). Continue?';
+        if (nodePathInfo && nodePathInfo.numberOfSequencesWithThisNodePath > 1) {
+            const message = 'This sequence is programmatically duplicated ' +
+                nodePathInfo.numberOfSequencesWithThisNodePath +
+                ' times in the code. Duplicating inserts another copy. Continue?';
             // eslint-disable-next-line no-alert -- native confirm before applying duplicate codemod in .map callbacks
             if (!window.confirm(message)) {
                 return;
@@ -71,11 +71,20 @@ 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, nodePathInfo]);
     const onDeleteSequenceFromSource = (0, react_1.useCallback)(async () => {
         if (!(validatedLocation === null || validatedLocation === void 0 ? void 0 : validatedLocation.source) || !nodePath) {
             return;
         }
+        if (nodePathInfo && nodePathInfo.numberOfSequencesWithThisNodePath > 1) {
+            const message = 'This sequence is programmatically duplicated ' +
+                nodePathInfo.numberOfSequencesWithThisNodePath +
+                ' times in the code. Deleting removes all instances. 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,9 +100,9 @@ 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, nodePathInfo]);
     const contextMenuValues = (0, react_1.useMemo)(() => {
-        if (!visualModeEnvEnabled) {
+        if (!previewConnected) {
             return [];
         }
         return [
@@ -137,12 +146,15 @@ const TimelineListItem = ({ nestedDepth, sequence, isCompact }) => {
         duplicateDisabled,
         onDeleteSequenceFromSource,
         onDuplicateSequenceFromSource,
-        visualModeEnvEnabled,
+        previewConnected,
     ]);
-    const isExpanded = visualModeActive && ((_b = expandedTracks[sequence.id]) !== null && _b !== void 0 ? _b : false);
+    const isExpanded = previewConnected && 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 +189,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 }), previewConnected ? (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: [previewConnected ? (jsx_runtime_1.jsx(ContextMenu_1.ContextMenu, { values: contextMenuValues, children: trackRow })) : (trackRow), previewConnected &&
+                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/TimelineNumberField.d.ts

@@ -1,11 +1,11 @@
 import React from 'react';
-import type { SchemaFieldInfo } from '../../helpers/timeline-layout';
+import type { CanUpdateSequencePropStatus } from 'remotion';
+import type { SchemaFieldInfo, TimelineFieldOnDragValueChange, TimelineFieldOnSave } from '../../helpers/timeline-layout';
 export declare const TimelineNumberField: React.FC<{
     readonly field: SchemaFieldInfo;
     readonly effectiveValue: unknown;
-    readonly codeValue: unknown;
-    readonly canUpdate: boolean;
-    readonly onSave: (key: string, value: unknown) => Promise<void>;
-    readonly onDragValueChange: (key: string, value: unknown) => void;
+    readonly propStatus: CanUpdateSequencePropStatus;
+    readonly onSave: TimelineFieldOnSave;
+    readonly onDragValueChange: TimelineFieldOnDragValueChange;
     readonly onDragEnd: () => void;
 }>;

package/dist/components/Timeline/TimelineNumberField.js

@@ -5,16 +5,16 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const InputDragger_1 = require("../NewComposition/InputDragger");
 const timeline_field_utils_1 = require("./timeline-field-utils");
-const TimelineNumberField = ({ field, effectiveValue, canUpdate, onSave, onDragValueChange, onDragEnd, codeValue, }) => {
+const TimelineNumberField = ({ field, effectiveValue, onSave, onDragValueChange, onDragEnd, propStatus, }) => {
     var _a, _b, _c;
     const [dragValue, setDragValue] = (0, react_1.useState)(null);
     const onValueChange = (0, react_1.useCallback)((newVal) => {
         setDragValue(newVal);
-        onDragValueChange(field.key, newVal);
-    }, [onDragValueChange, field.key]);
+        onDragValueChange(newVal);
+    }, [onDragValueChange]);
     const onValueChangeEnd = (0, react_1.useCallback)((newVal) => {
-        if (canUpdate && newVal !== codeValue) {
-            onSave(field.key, newVal).finally(() => {
+        if (propStatus.canUpdate && newVal !== propStatus.codeValue) {
+            onSave(newVal).finally(() => {
                 setDragValue(null);
                 onDragEnd();
             });
@@ -23,18 +23,20 @@ const TimelineNumberField = ({ field, effectiveValue, canUpdate, onSave, onDragV
             setDragValue(null);
             onDragEnd();
         }
-    }, [canUpdate, onSave, field.key, codeValue, onDragEnd]);
+    }, [onSave, propStatus, onDragEnd]);
     const onTextChange = (0, react_1.useCallback)((newVal) => {
-        if (canUpdate) {
+        if (propStatus.canUpdate) {
             const parsed = Number(newVal);
-            if (!Number.isNaN(parsed) && parsed !== codeValue) {
+            if (!Number.isNaN(parsed) &&
+                propStatus.canUpdate &&
+                parsed !== propStatus.codeValue) {
                 setDragValue(parsed);
-                onSave(field.key, parsed).catch(() => {
+                onSave(parsed).catch(() => {
                     setDragValue(null);
                 });
             }
         }
-    }, [canUpdate, onSave, field.key, codeValue]);
+    }, [onSave, propStatus]);
     const step = field.fieldSchema.type === 'number' ? ((_a = field.fieldSchema.step) !== null && _a !== void 0 ? _a : 1) : 1;
     const stepDecimals = (0, react_1.useMemo)(() => (0, timeline_field_utils_1.getDecimalPlaces)(step), [step]);
     const formatter = (0, react_1.useCallback)((v) => {

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

@@ -1,11 +1,11 @@
 import React from 'react';
-import type { SchemaFieldInfo } from '../../helpers/timeline-layout';
+import type { CanUpdateSequencePropStatus } from 'remotion';
+import type { SchemaFieldInfo, TimelineFieldOnDragValueChange, TimelineFieldOnSave } from '../../helpers/timeline-layout';
 export declare const TimelineRotationField: React.FC<{
     readonly field: SchemaFieldInfo;
     readonly effectiveValue: unknown;
-    readonly codeValue: unknown;
-    readonly canUpdate: boolean;
-    readonly onSave: (key: string, value: unknown) => Promise<void>;
-    readonly onDragValueChange: (key: string, value: unknown) => void;
+    readonly propStatus: CanUpdateSequencePropStatus;
+    readonly onSave: TimelineFieldOnSave;
+    readonly onDragValueChange: TimelineFieldOnDragValueChange;
     readonly onDragEnd: () => void;
 }>;

package/dist/components/Timeline/TimelineRotationField.js

@@ -25,18 +25,18 @@ const parseCssRotationToDegrees = (value) => {
         return 0;
     }
 };
-const TimelineRotationField = ({ field, effectiveValue, codeValue, canUpdate, onSave, onDragValueChange, onDragEnd, }) => {
+const TimelineRotationField = ({ field, effectiveValue, propStatus, onSave, onDragValueChange, onDragEnd, }) => {
     var _a;
     const [dragValue, setDragValue] = (0, react_1.useState)(null);
     const degrees = (0, react_1.useMemo)(() => parseCssRotationToDegrees(String(effectiveValue !== null && effectiveValue !== void 0 ? effectiveValue : '0deg')), [effectiveValue]);
     const onValueChange = (0, react_1.useCallback)((newVal) => {
         setDragValue(newVal);
-        onDragValueChange(field.key, `${newVal}deg`);
-    }, [onDragValueChange, field.key]);
+        onDragValueChange(`${newVal}deg`);
+    }, [onDragValueChange]);
     const onValueChangeEnd = (0, react_1.useCallback)((newVal) => {
         const newStr = `${newVal}deg`;
-        if (canUpdate && newStr !== codeValue) {
-            onSave(field.key, newStr).finally(() => {
+        if (propStatus.canUpdate && newStr !== propStatus.codeValue) {
+            onSave(newStr).finally(() => {
                 setDragValue(null);
                 onDragEnd();
             });
@@ -45,21 +45,21 @@ const TimelineRotationField = ({ field, effectiveValue, codeValue, canUpdate, on
             setDragValue(null);
             onDragEnd();
         }
-    }, [canUpdate, onSave, field.key, codeValue, onDragEnd]);
+    }, [propStatus, onSave, onDragEnd]);
     const onTextChange = (0, react_1.useCallback)((newVal) => {
-        if (canUpdate) {
+        if (propStatus.canUpdate) {
             const parsed = Number(newVal);
             if (!Number.isNaN(parsed)) {
                 const newStr = `${parsed}deg`;
-                if (newStr !== codeValue) {
+                if (newStr !== propStatus.codeValue) {
                     setDragValue(parsed);
-                    onSave(field.key, newStr).catch(() => {
+                    onSave(newStr).catch(() => {
                         setDragValue(null);
                     });
                 }
             }
         }
-    }, [canUpdate, onSave, field.key, codeValue]);
+    }, [propStatus, onSave]);
     const step = field.fieldSchema.type === 'rotation' ? ((_a = field.fieldSchema.step) !== null && _a !== void 0 ? _a : 1) : 1;
     const stepDecimals = (0, react_1.useMemo)(() => (0, timeline_field_utils_1.getDecimalPlaces)(step), [step]);
     const formatter = (0, react_1.useCallback)((v) => {

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

@@ -1,13 +1,11 @@
 import React from 'react';
 import type { CanUpdateSequencePropStatus } from 'remotion';
-import type { SchemaFieldInfo } from '../../helpers/timeline-layout';
+import type { SchemaFieldInfo, TimelineFieldOnDragValueChange, TimelineFieldOnSave } from '../../helpers/timeline-layout';
 export declare const TimelineFieldValue: React.FC<{
     readonly field: SchemaFieldInfo;
-    readonly onSave: (key: string, value: unknown) => Promise<void>;
-    readonly onDragValueChange: (key: string, value: unknown) => void;
+    readonly onSave: TimelineFieldOnSave;
+    readonly onDragValueChange: TimelineFieldOnDragValueChange;
     readonly onDragEnd: () => void;
-    readonly canUpdate: boolean;
-    readonly propStatus: CanUpdateSequencePropStatus | null;
-    readonly codeValue: unknown;
+    readonly propStatus: CanUpdateSequencePropStatus;
     readonly effectiveValue: unknown;
 }>;

package/dist/components/Timeline/TimelineSchemaField.js

@@ -17,36 +17,36 @@ const notEditableBackground = {
     borderRadius: 3,
     padding: '0 4px',
 };
-const TimelineFieldValue = ({ field, onSave, onDragValueChange, onDragEnd, propStatus, canUpdate, effectiveValue, codeValue, }) => {
-    const wrapperStyle = canUpdate === null || canUpdate === false
+const inlineWrapper = {
+    fontSize: 12,
+};
+const TimelineFieldValue = ({ field, onSave, onDragValueChange, onDragEnd, propStatus, effectiveValue, }) => {
+    const wrapperStyle = !propStatus.canUpdate
         ? notEditableBackground
         : undefined;
     if (!field.supported) {
         return jsx_runtime_1.jsx("span", { style: unsupportedLabel, children: "unsupported" });
     }
-    if (propStatus !== null && !propStatus.canUpdate) {
+    if (!propStatus.canUpdate) {
         if (propStatus.reason === 'computed') {
             return jsx_runtime_1.jsx("span", { style: unsupportedLabel, children: "computed" });
         }
         throw new Error(`Unsupported prop status: ${propStatus.reason}`);
     }
-    if (propStatus === null) {
-        return (jsx_runtime_1.jsx("span", { style: notEditableBackground, children: jsx_runtime_1.jsx("span", { style: unsupportedLabel, children: "error" }) }));
-    }
     if (field.typeName === 'number') {
-        return (jsx_runtime_1.jsx("span", { style: wrapperStyle, children: jsx_runtime_1.jsx(TimelineNumberField_1.TimelineNumberField, { field: field, effectiveValue: effectiveValue, canUpdate: canUpdate, onSave: onSave, codeValue: codeValue, onDragValueChange: onDragValueChange, onDragEnd: onDragEnd }) }));
+        return (jsx_runtime_1.jsx("span", { style: wrapperStyle, children: jsx_runtime_1.jsx(TimelineNumberField_1.TimelineNumberField, { field: field, effectiveValue: effectiveValue, onSave: onSave, propStatus: propStatus, onDragValueChange: onDragValueChange, onDragEnd: onDragEnd }) }));
     }
     if (field.typeName === 'rotation') {
-        return (jsx_runtime_1.jsx("span", { style: wrapperStyle, children: jsx_runtime_1.jsx(TimelineRotationField_1.TimelineRotationField, { field: field, effectiveValue: effectiveValue, codeValue: codeValue, canUpdate: canUpdate, onSave: onSave, onDragValueChange: onDragValueChange, onDragEnd: onDragEnd }) }));
+        return (jsx_runtime_1.jsx("span", { style: wrapperStyle, children: jsx_runtime_1.jsx(TimelineRotationField_1.TimelineRotationField, { field: field, effectiveValue: effectiveValue, propStatus: propStatus, onSave: onSave, onDragValueChange: onDragValueChange, onDragEnd: onDragEnd }) }));
     }
     if (field.typeName === 'translate') {
-        return (jsx_runtime_1.jsx("span", { style: wrapperStyle, children: jsx_runtime_1.jsx(TimelineTranslateField_1.TimelineTranslateField, { field: field, effectiveValue: effectiveValue, codeValue: codeValue, canUpdate: canUpdate, onSave: onSave, onDragValueChange: onDragValueChange, onDragEnd: onDragEnd }) }));
+        return (jsx_runtime_1.jsx("span", { style: wrapperStyle, children: jsx_runtime_1.jsx(TimelineTranslateField_1.TimelineTranslateField, { field: field, effectiveValue: effectiveValue, propStatus: propStatus, onSave: onSave, onDragValueChange: onDragValueChange, onDragEnd: onDragEnd }) }));
     }
     if (field.typeName === 'boolean') {
-        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 }) }));
+        return (jsx_runtime_1.jsx("span", { style: wrapperStyle, children: jsx_runtime_1.jsx(TimelineBooleanField_1.TimelineBooleanField, { field: field, propStatus: propStatus, 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, propStatus: propStatus, 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/TimelineSequence.js

@@ -55,7 +55,7 @@ const TimelineSequenceFn = ({ s }) => {
     if (windowWidth === null) {
         return null;
     }
-    return jsx_runtime_1.jsx(Inner, { windowWidth: windowWidth, s: s });
+    return jsx_runtime_1.jsx(TimelineSequenceInner, { windowWidth: windowWidth, s: s });
 };
 const TimelineSequenceCurrentFrame = ({ s, displayDurationInFrames, premountWidth, postmountWidth, style, children, }) => {
     var _a, _b;
@@ -111,7 +111,7 @@ const TimelineSequenceCurrentFrame = ({ s, displayDurationInFrames, premountWidt
                     alignItems: 'center',
                 }, children: jsx_runtime_1.jsx(TimelineSequenceFrame_1.TimelineSequenceFrame, { premounted: isPremounting, postmounted: isPostmounting ? s.duration - 1 : null, roundedFrame: roundedFrame }) })) : null] }));
 };
-const Inner = ({ s, windowWidth }) => {
+const TimelineSequenceInner = ({ s, windowWidth }) => {
     // If a duration is 1, it is essentially a still and it should have width 0
     // Some compositions may not be longer than their media duration,
     // if that is the case, it needs to be asynchronously determined

package/dist/components/Timeline/TimelineSlider.js

@@ -29,10 +29,10 @@ const TimelineSlider = () => {
     if (videoConfig === null || timelineWidth === null) {
         return null;
     }
-    return jsx_runtime_1.jsx(Inner, {});
+    return jsx_runtime_1.jsx(TimelineSliderInner, {});
 };
 exports.TimelineSlider = TimelineSlider;
-const Inner = () => {
+const TimelineSliderInner = () => {
     var _a;
     const videoConfig = (0, remotion_1.useVideoConfig)();
     const timelinePosition = remotion_1.Internals.Timeline.useTimelinePosition();

package/dist/components/Timeline/TimelineStack/get-stack.js

@@ -1,43 +1,29 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.getOriginalLocationFromStack = void 0;
-const source_map_1 = require("source-map");
+const trace_mapping_1 = require("@jridgewell/trace-mapping");
 const get_source_map_1 = require("../../../error-overlay/react-overlay/utils/get-source-map");
 const get_location_of_sequence_1 = require("../../../helpers/get-location-of-sequence");
-const waiters = [];
-const sourceMapConsumerCache = {};
-const isCreating = {};
+const traceMapCache = {};
+const traceMapPromises = {};
 const getSourceMapCache = async (fileName) => {
-    if (sourceMapConsumerCache[fileName]) {
-        return sourceMapConsumerCache[fileName];
+    if (traceMapCache[fileName]) {
+        return traceMapCache[fileName];
     }
-    if (isCreating[fileName]) {
-        return new Promise((resolve) => {
-            waiters.push({
-                id: String(Math.random()),
-                forFileName: fileName,
-                resolve,
-            });
-        });
+    if (traceMapPromises[fileName]) {
+        return traceMapPromises[fileName];
     }
-    isCreating[fileName] = true;
-    const res = await fetch(`${fileName}.map`);
-    const json = await res.json();
-    const map = await new Promise((resolve) => {
-        source_map_1.SourceMapConsumer.with(json, null, (consumer) => {
-            resolve(consumer);
-        });
+    traceMapPromises[fileName] = fetch(`${fileName}.map`)
+        .then((res) => res.json())
+        .then((json) => {
+        const map = new trace_mapping_1.TraceMap(json);
+        traceMapCache[fileName] = map;
+        return map;
+    })
+        .finally(() => {
+        delete traceMapPromises[fileName];
     });
-    waiters.filter((w) => {
-        if (w.forFileName === fileName) {
-            w.resolve(map);
-            return false;
-        }
-        return true;
-    });
-    sourceMapConsumerCache[fileName] = map;
-    isCreating[fileName] = false;
-    return map;
+    return traceMapPromises[fileName];
 };
 const getOriginalLocationFromStack = async (stack, type) => {
     const location = type === 'sequence'

package/dist/components/Timeline/TimelineStack/index.js

@@ -2,9 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TimelineStack = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const studio_shared_1 = require("@remotion/studio-shared");
 const react_1 = require("react");
-const source_map_1 = require("source-map");
 const client_id_1 = require("../../../helpers/client-id");
 const colors_1 = require("../../../helpers/colors");
 const get_git_menu_item_1 = require("../../../helpers/get-git-menu-item");
@@ -15,14 +13,6 @@ const layout_1 = require("../../layout");
 const NotificationCenter_1 = require("../../Notifications/NotificationCenter");
 const Spinner_1 = require("../../Spinner");
 const source_attribution_1 = require("./source-attribution");
-const publicPath = window.remotion_publicPath === '/' ? '' : window.remotion_publicPath;
-const withoutSlashInTheEnd = publicPath.endsWith('/')
-    ? publicPath.slice(0, -1)
-    : publicPath;
-// @ts-expect-error
-source_map_1.SourceMapConsumer.initialize({
-    'lib/mappings.wasm': withoutSlashInTheEnd + studio_shared_1.SOURCE_MAP_ENDPOINT,
-});
 const TimelineStack = ({ isCompact, sequence, originalLocation }) => {
     const [stackHovered, setStackHovered] = (0, react_1.useState)(false);
     const [titleHovered, setTitleHovered] = (0, react_1.useState)(false);

package/dist/components/Timeline/TimelineTimeIndicators.js

@@ -69,10 +69,10 @@ const TimelineTimeIndicators = () => {
     if (video === null) {
         return null;
     }
-    return (jsx_runtime_1.jsx(Inner, { durationInFrames: video.durationInFrames, fps: video.fps, windowWidth: sliderTrack }));
+    return (jsx_runtime_1.jsx(TimelineTimeIndicatorsInner, { durationInFrames: video.durationInFrames, fps: video.fps, windowWidth: sliderTrack }));
 };
 exports.TimelineTimeIndicators = TimelineTimeIndicators;
-const Inner = ({ windowWidth, durationInFrames, fps }) => {
+const TimelineTimeIndicatorsInner = ({ windowWidth, durationInFrames, fps }) => {
     const ref = (0, react_1.useRef)(null);
     (0, react_1.useEffect)(() => {
         const currentRef = ref.current;

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import type { TrackWithHash } from '../../helpers/get-timeline-sequence-sort-key';
-export declare const TimelineTracks: React.FC<{
+export declare const TimelineTracks: React.NamedExoticComponent<{
     readonly timeline: TrackWithHash[];
     readonly hasBeenCut: boolean;
 }>;

package/dist/components/Timeline/TimelineTracks.js

@@ -1,8 +1,41 @@
 "use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TimelineTracks = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
+const react_1 = __importStar(require("react"));
 const remotion_1 = require("remotion");
 const client_id_1 = require("../../helpers/client-id");
 const timeline_layout_1 = require("../../helpers/timeline-layout");
@@ -19,15 +52,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, getCodeValues, }) => ({
+    height: (0, timeline_layout_1.getExpandedTrackHeight)({
+        sequence,
+        nodePathInfo,
+        getIsExpanded,
+        getCodeValues,
+    }) + timeline_layout_1.TIMELINE_ITEM_BORDER_BOTTOM,
 });
-const TimelineTracks = ({ timeline, hasBeenCut }) => {
-    const { expandedTracks } = (0, react_1.useContext)(ExpandedTracksProvider_1.ExpandedTracksContext);
+const TimelineTracksInner = ({ timeline, hasBeenCut }) => {
+    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 visualModeEnabled = Boolean(process.env.EXPERIMENTAL_VISUAL_MODE_ENABLED) &&
-        previewServerState.type === 'connected';
+    const { getCodeValues } = (0, react_1.useContext)(remotion_1.Internals.VisualModeCodeValuesContext);
+    const previewServerConnected = previewServerState.type === 'connected';
     const timelineStyle = (0, react_1.useMemo)(() => {
         return {
             ...timelineContent,
@@ -37,16 +74,20 @@ 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 }) }), isExpanded && track.nodePathInfo && previewServerConnected ? (jsx_runtime_1.jsx("div", { style: getExpandedPlaceholderStyle({
+                                        sequence: track.sequence,
+                                        nodePathInfo: track.nodePathInfo,
+                                        getIsExpanded,
+                                        getCodeValues,
+                                    }) })) : null] }, track.sequence.id));
                     })] }), hasBeenCut ? jsx_runtime_1.jsx(MaxTimelineTracks_1.MaxTimelineTracksReached, {}) : null] }));
 };
-exports.TimelineTracks = TimelineTracks;
+exports.TimelineTracks = react_1.default.memo(TimelineTracksInner);