@remotion/studio 4.0.506 → 4.0.508

package/dist/components/SettingsModalFooter.js

@@ -12,7 +12,6 @@ const footer = {
 const footerRow = {
     alignItems: 'center',
     display: 'flex',
-    justifyContent: 'space-between',
 };
 const configFileHint = {
     alignItems: 'center',
@@ -30,7 +29,7 @@ const configFileName = {
     fontWeight: 'bold',
     lineHeight: '20px',
 };
-const SettingsModalFooter = ({ children }) => {
+const SettingsModalFooter = () => {
     const configFileLocation = (0, react_1.useMemo)(() => {
         return {
             source: 'remotion.config.ts',
@@ -38,9 +37,8 @@ const SettingsModalFooter = ({ children }) => {
             column: 1,
         };
     }, []);
-    return (jsx_runtime_1.jsx(ModalFooter_1.ModalFooterContainer, { style: footer, noBorder: true, children: jsx_runtime_1.jsxs("div", { style: footerRow, children: [
-                jsx_runtime_1.jsxs("div", { style: configFileHint, children: ["Changes save to",
-                        jsx_runtime_1.jsx(InspectorOpenInEditor_1.InspectorOpenInEditor, { location: configFileLocation, label: jsx_runtime_1.jsx("strong", { style: configFileName, children: "remotion.config.ts" }) })
-                    ] }), children] }) }));
+    return (jsx_runtime_1.jsx(ModalFooter_1.ModalFooterContainer, { style: footer, noBorder: true, children: jsx_runtime_1.jsx("div", { style: footerRow, children: jsx_runtime_1.jsxs("div", { style: configFileHint, children: ["Changes save to",
+                    jsx_runtime_1.jsx(InspectorOpenInEditor_1.InspectorOpenInEditor, { locationType: null, location: configFileLocation, label: jsx_runtime_1.jsx("strong", { style: configFileName, children: "remotion.config.ts" }) })
+                ] }) }) }));
 };
 exports.SettingsModalFooter = SettingsModalFooter;

package/dist/components/ShowOutlinesProvider.js

@@ -7,7 +7,7 @@ const editor_outlines_1 = require("../state/editor-outlines");
 const timeline_sequence_hover_1 = require("../state/timeline-sequence-hover");
 const ShowOutlinesProvider = ({ children }) => {
     const [editorShowOutlines, setEditorShowOutlinesState] = (0, react_1.useState)(() => (0, editor_outlines_1.loadEditorShowOutlinesOption)());
-    const [hoveredSequence, setHoveredSequence] = (0, react_1.useState)(null);
+    const timelineSequenceHoverStore = (0, react_1.useMemo)(() => (0, timeline_sequence_hover_1.createTimelineSequenceHoverStore)(), []);
     const setEditorShowOutlines = (0, react_1.useCallback)((newValue) => {
         setEditorShowOutlinesState((prevState) => {
             const newVal = newValue(prevState);
@@ -21,7 +21,6 @@ const ShowOutlinesProvider = ({ children }) => {
             setEditorShowOutlines,
         };
     }, [editorShowOutlines, setEditorShowOutlines]);
-    const timelineSequenceHoverCtx = (0, react_1.useMemo)(() => ({ hoveredSequence, setHoveredSequence }), [hoveredSequence]);
-    return (jsx_runtime_1.jsx(editor_outlines_1.EditorShowOutlinesContext.Provider, { value: editorShowOutlinesCtx, children: jsx_runtime_1.jsx(timeline_sequence_hover_1.TimelineSequenceHoverContext.Provider, { value: timelineSequenceHoverCtx, children: children }) }));
+    return (jsx_runtime_1.jsx(editor_outlines_1.EditorShowOutlinesContext.Provider, { value: editorShowOutlinesCtx, children: jsx_runtime_1.jsx(timeline_sequence_hover_1.TimelineSequenceHoverContext.Provider, { value: timelineSequenceHoverStore, children: children }) }));
 };
 exports.ShowOutlinesProvider = ShowOutlinesProvider;

package/dist/components/Timeline/EasingEditorModal.js

@@ -75,8 +75,9 @@ const SPRING_FALLBACKS = {
     stiffness: DEFAULT_SPRING_EASING.stiffness,
 };
 const inlineContainer = {
-    width: '100%',
     minWidth: 0,
+    paddingBottom: 12,
+    width: '100%',
 };
 const segmentedControlWrapper = {
     display: 'flex',
@@ -85,27 +86,27 @@ const segmentedControlWrapper = {
     padding: `0 ${InspectorPanelLayout_1.INSPECTOR_PANEL_HORIZONTAL_PADDING}px`,
 };
 const presetButtonsWrapper = {
-    display: 'flex',
-    flexWrap: 'wrap',
-    gap: 6,
-    justifyContent: 'flex-start',
-    marginBottom: 8,
-    padding: `0 ${InspectorPanelLayout_1.INSPECTOR_PANEL_HORIZONTAL_PADDING}px`,
+    border: `1px solid ${colors_1.BLACK_ALPHA_60}`,
+    borderRadius: 4,
+    boxSizing: 'border-box',
+    display: 'grid',
+    gridTemplateColumns: 'repeat(4, minmax(0, 1fr))',
+    margin: `0 ${InspectorPanelLayout_1.INSPECTOR_PANEL_HORIZONTAL_PADDING}px 8px`,
+    overflow: 'hidden',
 };
 const inspectorPresetButtonsWrapper = {
     ...presetButtonsWrapper,
-    padding: `8px ${InspectorPanelLayout_1.INSPECTOR_PANEL_HORIZONTAL_PADDING}px 0`,
+    margin: `8px ${InspectorPanelLayout_1.INSPECTOR_PANEL_HORIZONTAL_PADDING}px 0`,
 };
 const presetButtonBase = {
     alignItems: 'center',
-    backgroundColor: colors_1.INPUT_BACKGROUND,
-    border: `1px solid ${colors_1.WHITE_ALPHA_05}`,
-    borderRadius: 4,
+    backgroundColor: colors_1.TRANSPARENT,
+    border: 'none',
     display: 'inline-flex',
     height: 34,
     justifyContent: 'center',
     padding: 0,
-    width: 52,
+    width: '100%',
 };
 const presetPreviewSvgStyle = {
     display: 'block',
@@ -172,7 +173,10 @@ const easingToSpring = (easing) => {
         : DEFAULT_SPRING_EASING;
 };
 const easingToMode = (easing) => {
-    return isSpringEasing(easing) ? 'spring' : 'bezier';
+    if (isSpringEasing(easing)) {
+        return 'spring';
+    }
+    return easing.type === 'step1' ? 'hold' : 'bezier';
 };
 const roundToDecimalPlaces = (value, decimalPlaces) => {
     const factor = 10 ** decimalPlaces;
@@ -243,6 +247,7 @@ const areEasingsEqual = (first, second) => {
     }
     switch (first.type) {
         case 'linear':
+        case 'step1':
             return true;
         case 'spring':
             return (second.type === 'spring' &&
@@ -322,6 +327,8 @@ const getEasingFunction = (easing) => {
     switch (easing.type) {
         case 'linear':
             return remotion_1.Easing.linear;
+        case 'step1':
+            return remotion_1.Easing.step1;
         case 'bezier':
             return remotion_1.Easing.bezier(easing.x1, easing.y1, easing.x2, easing.y2);
         case 'spring':
@@ -338,6 +345,13 @@ const getEasingFunction = (easing) => {
     }
 };
 const getPresetPreviewPath = (easing) => {
+    if (easing.type === 'step1') {
+        const startX = presetPreviewXToSvg(0);
+        const endX = presetPreviewXToSvg(1);
+        const startY = presetPreviewYToSvg(0);
+        const endY = presetPreviewYToSvg(1);
+        return `M ${startX} ${startY} L ${endX} ${startY} L ${endX} ${endY}`;
+    }
     const easingFunction = getEasingFunction(easing);
     const samples = 36;
     const points = [];
@@ -386,18 +400,24 @@ const EasingGraphScaffold = ({ labels }) => {
 };
 const EasingPresetButton = ({ currentEasing, disabled, onClick, preset }) => {
     const selected = areEasingsEqual(currentEasing, preset.easing);
+    const [hovered, setHovered] = (0, react_1.useState)(false);
     const path = (0, react_1.useMemo)(() => getPresetPreviewPath(preset.easing), [preset.easing]);
+    const onPointerEnter = (0, react_1.useCallback)(() => {
+        setHovered(true);
+    }, []);
+    const onPointerLeave = (0, react_1.useCallback)(() => {
+        setHovered(false);
+    }, []);
     const style = (0, react_1.useMemo)(() => ({
         ...presetButtonBase,
-        backgroundColor: selected ? colors_1.EASING_SELECTED_BACKGROUND : colors_1.INPUT_BACKGROUND,
-        borderColor: selected ? colors_1.BLUE : colors_1.WHITE_ALPHA_05,
-        cursor: disabled ? 'not-allowed' : 'pointer',
+        backgroundColor: selected ? colors_1.INPUT_BACKGROUND : colors_1.TRANSPARENT,
+        cursor: disabled ? 'not-allowed' : undefined,
         opacity: disabled ? 0.45 : 1,
     }), [disabled, selected]);
     const handleClick = (0, react_1.useCallback)(() => {
         onClick(preset.easing);
     }, [onClick, preset.easing]);
-    return (jsx_runtime_1.jsx("button", { type: "button", style: style, title: preset.label, "aria-label": `Apply ${preset.label} easing`, disabled: disabled, onClick: handleClick, children: jsx_runtime_1.jsx("svg", { width: PRESET_PREVIEW_WIDTH, height: PRESET_PREVIEW_HEIGHT, viewBox: `0 0 ${PRESET_PREVIEW_WIDTH} ${PRESET_PREVIEW_HEIGHT}`, style: presetPreviewSvgStyle, "aria-hidden": "true", focusable: false, children: jsx_runtime_1.jsx("path", { d: path, fill: "none", stroke: colors_1.WHITE, strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round" }) }) }));
+    return (jsx_runtime_1.jsx("button", { type: "button", style: style, title: preset.label, "aria-label": `Apply ${preset.label} easing`, disabled: disabled, onClick: handleClick, onPointerEnter: onPointerEnter, onPointerLeave: onPointerLeave, children: jsx_runtime_1.jsx("svg", { width: PRESET_PREVIEW_WIDTH, height: PRESET_PREVIEW_HEIGHT, viewBox: `0 0 ${PRESET_PREVIEW_WIDTH} ${PRESET_PREVIEW_HEIGHT}`, style: presetPreviewSvgStyle, "aria-hidden": "true", focusable: false, children: jsx_runtime_1.jsx("path", { d: path, fill: "none", stroke: selected || hovered ? colors_1.WHITE : colors_1.LIGHT_TEXT, strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round" }) }) }));
 };
 const EasingEditor = ({ state, renderHeader }) => {
     var _a, _b;
@@ -590,7 +610,9 @@ const EasingEditor = ({ state, renderHeader }) => {
         }
         const easing = nextMode === 'spring'
             ? serializeSpring(springRef.current)
-            : serializeBezier(bezierRef.current);
+            : nextMode === 'hold'
+                ? studio_shared_1.HOLD_KEYFRAME_EASING
+                : serializeBezier(bezierRef.current);
         const version = applyLiveEasing(easing);
         commitEasing(easing, version);
     }, [applyLiveEasing, commitEasing, mode, previewServerState.type]);
@@ -605,11 +627,18 @@ const EasingEditor = ({ state, renderHeader }) => {
             commitEasing(serializeSpring(nextSpring), springVersion);
             return;
         }
+        if (easing.type === 'step1') {
+            setMode('hold');
+            const holdVersion = applyLiveEasing(studio_shared_1.HOLD_KEYFRAME_EASING);
+            commitEasing(studio_shared_1.HOLD_KEYFRAME_EASING, holdVersion);
+            return;
+        }
         const nextBezier = easingToBezier(easing);
         setMode('bezier');
         const bezierVersion = setBezierAndPreview(nextBezier);
         commitEasing(serializeBezier(nextBezier), bezierVersion);
     }, [
+        applyLiveEasing,
         commitEasing,
         previewServerState.type,
         setBezierAndPreview,
@@ -709,9 +738,15 @@ const EasingEditor = ({ state, renderHeader }) => {
         }
         return points.join(' ');
     }, [spring]);
+    const holdPath = (0, react_1.useMemo)(() => `M ${startPoint.x} ${startPoint.y} L ${endPoint.x} ${startPoint.y} L ${endPoint.x} ${endPoint.y}`, [endPoint, startPoint]);
     const disabled = previewServerState.type !== 'connected';
     const graphLabels = getEasingGraphLabels(getCurrentEasingUpdates());
-    const currentEasing = (0, react_1.useMemo)(() => mode === 'spring' ? serializeSpring(spring) : serializeBezier(bezier), [bezier, mode, spring]);
+    const currentEasing = (0, react_1.useMemo)(() => {
+        if (mode === 'spring') {
+            return serializeSpring(spring);
+        }
+        return mode === 'hold' ? studio_shared_1.HOLD_KEYFRAME_EASING : serializeBezier(bezier);
+    }, [bezier, mode, spring]);
     const modeItems = (0, react_1.useMemo)(() => {
         return [
             {
@@ -726,12 +761,18 @@ const EasingEditor = ({ state, renderHeader }) => {
                 onClick: () => switchMode('spring'),
                 selected: mode === 'spring',
             },
+            {
+                key: 'hold',
+                label: 'Hold',
+                onClick: () => switchMode('hold'),
+                selected: mode === 'hold',
+            },
         ];
     }, [mode, switchMode]);
     const coordinatesGrid = (0, react_1.useMemo)(() => ({
         ...coordinatesGridBase,
         gridTemplateColumns: 'repeat(2, minmax(0, 1fr))',
-        padding: '0 12px 12px',
+        padding: '0 12px',
     }), []);
     const modeSwitcher = (jsx_runtime_1.jsx("div", { style: segmentedControlWrapper, children: jsx_runtime_1.jsx(SegmentedControl_1.SegmentedControl, { items: modeItems, needsWrapping: false }) }));
     return (jsx_runtime_1.jsxs("div", { style: inlineContainer, children: [renderHeader ? renderHeader(modeItems) : null, jsx_runtime_1.jsx("div", { style: renderHeader ? inspectorPresetButtonsWrapper : presetButtonsWrapper, children: EDITOR_EASING_PRESETS.map((preset) => (jsx_runtime_1.jsx(EasingPresetButton, { currentEasing: currentEasing, disabled: disabled, onClick: applyPreset, preset: preset }, preset.id))) }), mode === 'bezier' ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
@@ -748,7 +789,7 @@ const EasingEditor = ({ state, renderHeader }) => {
                                     jsx_runtime_1.jsx("div", { style: coordinateLabel, children: "Y2" }), jsx_runtime_1.jsx("div", { style: coordinateInputWrapper, children: jsx_runtime_1.jsx(InputDragger_1.InputDragger, { type: "number", value: bezier[3], status: "ok", onValueChange: (value) => setCoordinate(1, 'y', value, false), onValueChangeEnd: (value) => setCoordinate(1, 'y', value, true), onTextChange: () => undefined, min: Y_MIN, max: Y_MAX, step: 0.01, formatter: formatNumber, rightAlign: false, style: numberInputStyle, snapToStep: false, disabled: disabled }) })
                                 ] })
                         ] })
-                ] })) : (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
+                ] })) : mode === 'spring' ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
                     jsx_runtime_1.jsxs("svg", { width: SVG_WIDTH, height: SVG_HEIGHT, viewBox: `0 0 ${SVG_WIDTH} ${SVG_HEIGHT}`, style: svgStyle, "aria-label": "Spring easing curve", children: [
                             jsx_runtime_1.jsx(EasingGraphScaffold, { labels: graphLabels }), jsx_runtime_1.jsx("path", { d: springPath, fill: "none", stroke: colors_1.BLUE, strokeWidth: 3 }), jsx_runtime_1.jsx("circle", { cx: xToSvg(0), cy: yToSvg(0), r: 4, fill: colors_1.WHITE }), jsx_runtime_1.jsx("circle", { cx: xToSvg(1), cy: yToSvg(1), r: 4, fill: colors_1.WHITE })
                         ] }), modeSwitcher, jsx_runtime_1.jsxs("div", { style: coordinatesGrid, children: [
@@ -766,6 +807,9 @@ const EasingEditor = ({ state, renderHeader }) => {
                                     jsx_runtime_1.jsx("div", { style: coordinateLabel, children: "Allow tail" }), jsx_runtime_1.jsx("div", { style: checkboxWrapper, children: jsx_runtime_1.jsx(Checkbox_1.Checkbox, { checked: (_b = spring.allowTail) !== null && _b !== void 0 ? _b : false, onChange: setAllowTail, name: "spring-allow-tail", disabled: disabled, variant: "small" }) })
                                 ] })
                         ] })
-                ] }))] }));
+                ] })) : (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
+                    jsx_runtime_1.jsxs("svg", { width: SVG_WIDTH, height: SVG_HEIGHT, viewBox: `0 0 ${SVG_WIDTH} ${SVG_HEIGHT}`, style: svgStyle, "aria-label": "Hold easing curve", children: [
+                            jsx_runtime_1.jsx(EasingGraphScaffold, { labels: graphLabels }), jsx_runtime_1.jsx("path", { d: holdPath, fill: "none", stroke: colors_1.BLUE, strokeWidth: 3 }), jsx_runtime_1.jsx("circle", { cx: startPoint.x, cy: startPoint.y, r: 4, fill: colors_1.WHITE }), jsx_runtime_1.jsx("circle", { cx: endPoint.x, cy: endPoint.y, r: 4, fill: colors_1.WHITE })
+                        ] }), modeSwitcher] }))] }));
 };
 exports.EasingEditor = EasingEditor;

package/dist/components/Timeline/SequencePropsObserver.js

@@ -3,10 +3,20 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.SequencePropsObserver = void 0;
 const react_1 = require("react");
 const remotion_1 = require("remotion");
+const fast_refresh_context_1 = require("../../fast-refresh-context");
 const client_id_1 = require("../../helpers/client-id");
+const sequence_node_path_mutations_1 = require("../../helpers/sequence-node-path-mutations");
+const ExpandedTracksProvider_1 = require("../ExpandedTracksProvider");
 const SequencePropsObserver = () => {
     const { subscribeToEvent } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
-    const { setPropStatuses } = (0, react_1.useContext)(remotion_1.Internals.VisualModeSettersContext);
+    const { remapPropStatuses, setPropStatuses } = (0, react_1.useContext)(remotion_1.Internals.VisualModeSettersContext);
+    const propStatusesRef = (0, react_1.useContext)(remotion_1.Internals.VisualModePropStatusesRefContext);
+    const { overrideIdToNodePathMappings } = (0, react_1.useContext)(remotion_1.Internals.OverrideIdsToNodePathsGettersContext);
+    const overrideIdToNodePathMappingsRef = (0, react_1.useRef)(overrideIdToNodePathMappings);
+    overrideIdToNodePathMappingsRef.current = overrideIdToNodePathMappings;
+    const { setOverrideIdToNodePath } = (0, react_1.useContext)(remotion_1.Internals.OverrideIdsToNodePathsSettersContext);
+    const { fastRefreshes } = (0, react_1.useContext)(fast_refresh_context_1.FastRefreshContext);
+    const { migrateExpandedTracksForSubscriptionKey } = (0, react_1.useContext)(ExpandedTracksProvider_1.ExpandedTracksSetterContext);
     (0, react_1.useEffect)(() => {
         const handleEvent = (event) => {
             if (event.type !== 'sequence-props-updated') {
@@ -19,6 +29,92 @@ const SequencePropsObserver = () => {
             unsubscribe();
         };
     }, [setPropStatuses, subscribeToEvent]);
+    (0, react_1.useLayoutEffect)(() => {
+        var _a;
+        const mutations = (0, sequence_node_path_mutations_1.takePendingSequenceNodePathMutations)();
+        if (mutations.length === 0) {
+            return;
+        }
+        const statusRemappings = [];
+        const overrideUpdates = [];
+        for (const [overrideId, previousNodePath] of Object.entries(overrideIdToNodePathMappingsRef.current)) {
+            let { nodePath } = previousNodePath;
+            let wasRemapped = false;
+            let wasDeleted = false;
+            let runtimeNodePathExists = true;
+            const previousNodePathString = JSON.stringify(previousNodePath.nodePath);
+            for (const mutation of mutations) {
+                for (const file of mutation.files) {
+                    if (file.absolutePath !== previousNodePath.absolutePath) {
+                        continue;
+                    }
+                    // Prop statuses follow source nodes to their new paths. Override IDs,
+                    // however, follow React's runtime instances. After deleting an unkeyed
+                    // sibling, React reuses the instance already at the destination path.
+                    // Keep that mapping in place and only remove mappings for vacated paths.
+                    const runtimeNodePathIsSource = file.remappings.some((item) => JSON.stringify(item.oldNodePath) === previousNodePathString);
+                    const runtimeNodePathIsDestination = file.remappings.some((item) => item.newNodePath !== null &&
+                        JSON.stringify(item.newNodePath) === previousNodePathString);
+                    const runtimeNodePathWasRestored = file.restoredNodePaths.some((item) => JSON.stringify(item) === previousNodePathString);
+                    if (runtimeNodePathIsSource) {
+                        runtimeNodePathExists =
+                            runtimeNodePathIsDestination || runtimeNodePathWasRestored;
+                    }
+                    else if (runtimeNodePathIsDestination ||
+                        runtimeNodePathWasRestored) {
+                        runtimeNodePathExists = true;
+                    }
+                    if (wasDeleted) {
+                        const wasRestored = file.restoredNodePaths.some((restoredNodePath) => JSON.stringify(restoredNodePath) === JSON.stringify(nodePath));
+                        if (wasRestored) {
+                            wasDeleted = false;
+                        }
+                        continue;
+                    }
+                    const remapping = file.remappings.find((item) => JSON.stringify(item.oldNodePath) === JSON.stringify(nodePath));
+                    if (!remapping) {
+                        continue;
+                    }
+                    wasRemapped = true;
+                    if (remapping.newNodePath === null) {
+                        wasDeleted = true;
+                        continue;
+                    }
+                    nodePath = remapping.newNodePath;
+                }
+            }
+            if (!wasRemapped) {
+                continue;
+            }
+            const nextNodePath = wasDeleted ? null : { ...previousNodePath, nodePath };
+            const previousStatusKey = remotion_1.Internals.makeSequencePropsSubscriptionKey(previousNodePath);
+            statusRemappings.push({
+                previousNodePath,
+                nodePath: nextNodePath,
+                result: (_a = propStatusesRef.current[previousStatusKey]) !== null && _a !== void 0 ? _a : null,
+            });
+            overrideUpdates.push({
+                overrideId,
+                nodePath: runtimeNodePathExists ? previousNodePath : null,
+            });
+        }
+        remapPropStatuses(statusRemappings);
+        for (const event of overrideUpdates) {
+            setOverrideIdToNodePath(event.overrideId, event.nodePath);
+        }
+        for (const event of statusRemappings) {
+            if (event.nodePath === null) {
+                continue;
+            }
+            migrateExpandedTracksForSubscriptionKey(event.previousNodePath, event.nodePath);
+        }
+    }, [
+        fastRefreshes,
+        migrateExpandedTracksForSubscriptionKey,
+        propStatusesRef,
+        remapPropStatuses,
+        setOverrideIdToNodePath,
+    ]);
     return null;
 };
 exports.SequencePropsObserver = SequencePropsObserver;

package/dist/components/Timeline/SubscribeToNodePaths.js

@@ -6,7 +6,7 @@ const no_react_1 = require("remotion/no-react");
 const use_resolved_stack_react_to_change_1 = require("./use-resolved-stack-react-to-change");
 const use_sequence_props_subscription_1 = require("./use-sequence-props-subscription");
 const SubscribeToNodePaths = ({ overrideId, componentIdentity, schema, getStack, effects }) => {
-    const originalLocation = (0, use_resolved_stack_react_to_change_1.useResolveStackAndReactToChange)(getStack);
+    const { resolvedLocation, stack, preferMappedNodePath } = (0, use_resolved_stack_react_to_change_1.useResolveStackAndReactToChange)(getStack);
     const effectSubscriptions = (0, react_1.useMemo)(() => {
         return effects
             .map((effect) => {
@@ -19,7 +19,9 @@ const SubscribeToNodePaths = ({ overrideId, componentIdentity, schema, getStack,
         componentIdentity,
         schema,
         effects: effectSubscriptions,
-        originalLocation,
+        originalLocation: resolvedLocation,
+        preferMappedNodePath,
+        stack,
     });
     return null;
 };

package/dist/components/Timeline/Timeline.js

@@ -45,6 +45,7 @@ const interactivity_enabled_1 = require("../../helpers/interactivity-enabled");
 const is_current_selected_still_1 = require("../../helpers/is-current-selected-still");
 const open_in_editor_1 = require("../../helpers/open-in-editor");
 const studio_runtime_config_1 = require("../../helpers/studio-runtime-config");
+const timeline_node_path_key_1 = require("../../helpers/timeline-node-path-key");
 const call_api_1 = require("../call-api");
 const ContextMenu_1 = require("../ContextMenu");
 const import_assets_1 = require("../import-assets");
@@ -256,13 +257,29 @@ const TimelineInner = () => {
     const filtered = (0, react_1.useMemo)(() => {
         return timeline.filter((t) => (0, should_show_track_in_timeline_1.shouldShowTrackInTimeline)(t, durationInFrames));
     }, [durationInFrames, timeline]);
+    // Keep `filtered` complete so a future toggle can show every programmatic
+    // instance without recalculating the timeline or losing its instance index.
+    const collapsed = (0, react_1.useMemo)(() => {
+        const seenNodePaths = new Set();
+        return filtered.filter((track) => {
+            if (track.nodePathInfo === null) {
+                return true;
+            }
+            const key = (0, timeline_node_path_key_1.timelineSequenceNodePathToKey)(track.nodePathInfo.sequenceSubscriptionKey);
+            if (seenNodePaths.has(key)) {
+                return false;
+            }
+            seenNodePaths.add(key);
+            return true;
+        });
+    }, [filtered]);
     const maxTimelineTracks = (0, studio_runtime_config_1.getStudioMaxTimelineTracks)();
     const shown = (0, react_1.useMemo)(() => {
-        return filtered.length > maxTimelineTracks
-            ? filtered.slice(0, maxTimelineTracks)
-            : filtered;
-    }, [filtered, maxTimelineTracks]);
-    const hasBeenCut = filtered.length > shown.length;
+        return collapsed.length > maxTimelineTracks
+            ? collapsed.slice(0, maxTimelineTracks)
+            : collapsed;
+    }, [collapsed, maxTimelineTracks]);
+    const hasBeenCut = collapsed.length > shown.length;
     return (jsx_runtime_1.jsxs(TimelineContextMenuArea, { children: [sequences.map((sequence) => {
                 if (!(0, should_subscribe_to_sequence_props_1.shouldSubscribeToSequenceProps)(sequence, previewInteractive)) {
                     return null;

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

@@ -0,0 +1,4 @@
+import React from 'react';
+export declare const TimelineDuplicateCount: React.FC<{
+    readonly count: number;
+}>;

package/dist/components/Timeline/TimelineDuplicateCount.js

@@ -0,0 +1,28 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TimelineDuplicateCount = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const colors_1 = require("../../helpers/colors");
+const badgeStyle = {
+    alignItems: 'center',
+    border: `1px solid ${colors_1.WHITE_ALPHA_20}`,
+    borderRadius: 4,
+    boxSizing: 'border-box',
+    color: colors_1.WHITE_ALPHA_60,
+    display: 'inline-flex',
+    flexShrink: 0,
+    fontSize: 10,
+    fontWeight: 300,
+    height: 14,
+    justifyContent: 'center',
+    lineHeight: '12px',
+    minWidth: 18,
+    padding: '0 3px',
+    userSelect: 'none',
+    WebkitUserSelect: 'none',
+};
+const TimelineDuplicateCount = ({ count }) => {
+    const label = `${count} other programmatically duplicated ${count === 1 ? 'instance is' : 'instances are'} hidden`;
+    return (jsx_runtime_1.jsxs("span", { style: badgeStyle, title: label, "aria-label": label, children: ["+", count] }));
+};
+exports.TimelineDuplicateCount = TimelineDuplicateCount;

package/dist/components/Timeline/TimelineEffectItem.js

@@ -109,10 +109,7 @@ const TimelineEffectItem = ({ label, nodePathInfo, effectIndex, effectSchema, do
                     effectIndex,
                 },
             ]);
-            if (result.success) {
-                (0, NotificationCenter_1.showNotification)('Removed effect from source file', 2000);
-            }
-            else {
+            if (!result.success) {
                 (0, NotificationCenter_1.showNotification)(result.reason, 4000);
             }
         }

package/dist/components/Timeline/TimelineExpandedKeyframeRow.js

@@ -35,8 +35,8 @@ var __importStar = (this && this.__importStar) || (function () {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TimelineExpandedKeyframeRow = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const studio_shared_1 = require("@remotion/studio-shared");
 const react_1 = __importStar(require("react"));
+const are_sequence_node_path_infos_equal_1 = require("../../helpers/are-sequence-node-path-infos-equal");
 const timeline_layout_1 = require("../../helpers/timeline-layout");
 const get_timeline_easing_segments_1 = require("./get-timeline-easing-segments");
 const TimelineKeyframeDiamond_1 = require("./TimelineKeyframeDiamond");
@@ -71,29 +71,9 @@ const areTimelineExpandedKeyframeRowPropsEqual = (prevProps, nextProps) => {
         prevProps.canEditEasing !== nextProps.canEditEasing ||
         prevProps.showSeparator !== nextProps.showSeparator ||
         prevProps.keyframes.length !== nextProps.keyframes.length ||
-        prevProps.nodePathInfo.index !== nextProps.nodePathInfo.index ||
-        prevProps.nodePathInfo.numberOfSequencesWithThisNodePath !==
-            nextProps.nodePathInfo.numberOfSequencesWithThisNodePath ||
-        prevProps.nodePathInfo.supportsEffects !==
-            nextProps.nodePathInfo.supportsEffects ||
-        (0, studio_shared_1.stringifySequenceSubscriptionKey)(prevProps.nodePathInfo.sequenceSubscriptionKey) !==
-            (0, studio_shared_1.stringifySequenceSubscriptionKey)(nextProps.nodePathInfo.sequenceSubscriptionKey) ||
-        prevProps.nodePathInfo.auxiliaryKeys.length !==
-            nextProps.nodePathInfo.auxiliaryKeys.length) {
+        !(0, are_sequence_node_path_infos_equal_1.areSequenceNodePathInfosEqual)(prevProps.nodePathInfo, nextProps.nodePathInfo)) {
         return false;
     }
-    const prevVideoConfig = prevProps.nodePathInfo.sequenceSubscriptionKey.videoConfigValues;
-    const nextVideoConfig = nextProps.nodePathInfo.sequenceSubscriptionKey.videoConfigValues;
-    if (prevVideoConfig !== nextVideoConfig &&
-        (prevVideoConfig === null ||
-            nextVideoConfig === null ||
-            prevVideoConfig.durationInFrames !== nextVideoConfig.durationInFrames ||
-            prevVideoConfig.fps !== nextVideoConfig.fps ||
-            prevVideoConfig.height !== nextVideoConfig.height ||
-            prevVideoConfig.width !== nextVideoConfig.width)) {
-        return false;
-    }
-    return (prevProps.keyframes.every((keyframe, index) => keyframe.frame === nextProps.keyframes[index].frame) &&
-        prevProps.nodePathInfo.auxiliaryKeys.every((key, index) => key === nextProps.nodePathInfo.auxiliaryKeys[index]));
+    return prevProps.keyframes.every((keyframe, index) => keyframe.frame === nextProps.keyframes[index].frame);
 };
 exports.TimelineExpandedKeyframeRow = react_1.default.memo(TimelineExpandedKeyframeRowUnmemoized, areTimelineExpandedKeyframeRowPropsEqual);

package/dist/components/Timeline/TimelineExpandedTrackKeyframes.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 TimelineExpandedTrackKeyframes: React.NamedExoticComponent<{
+type TimelineExpandedTrackKeyframesProps = {
     readonly sequence: TSequence;
     readonly nodePathInfo: SequenceNodePathInfo;
     readonly keyframeDisplayOffset: number;
-}>;
+};
+export declare const TimelineExpandedTrackKeyframes: React.NamedExoticComponent<TimelineExpandedTrackKeyframesProps>;
+export {};

package/dist/components/Timeline/TimelineExpandedTrackKeyframes.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.TimelineExpandedTrackKeyframes = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = __importDefault(require("react"));
+const are_sequence_node_path_infos_equal_1 = require("../../helpers/are-sequence-node-path-infos-equal");
 const TimelineExpandedKeyframeRow_1 = require("./TimelineExpandedKeyframeRow");
 const use_expanded_track_keyframe_rows_1 = require("./use-expanded-track-keyframe-rows");
 const TimelineExpandedTrackKeyframesInner = ({ nodePathInfo, sequence, keyframeDisplayOffset }) => {
@@ -16,4 +17,13 @@ const TimelineExpandedTrackKeyframesInner = ({ nodePathInfo, sequence, keyframeD
     });
     return (jsx_runtime_1.jsx("div", { style: { height: expandedHeight }, children: rows.map((row, index) => (jsx_runtime_1.jsx(TimelineExpandedKeyframeRow_1.TimelineExpandedKeyframeRow, { height: row.height, keyframes: row.keyframes, canEditEasing: row.canEditEasing, nodePathInfo: row.nodePathInfo, showSeparator: index > 0 }, row.rowKey))) }));
 };
-exports.TimelineExpandedTrackKeyframes = react_1.default.memo(TimelineExpandedTrackKeyframesInner);
+const areTimelineExpandedTrackKeyframesPropsEqual = (first, second) => {
+    var _a, _b, _c, _d;
+    return (first.keyframeDisplayOffset === second.keyframeDisplayOffset &&
+        ((_a = first.sequence.controls) === null || _a === void 0 ? void 0 : _a.schema) === ((_b = second.sequence.controls) === null || _b === void 0 ? void 0 : _b.schema) &&
+        ((_c = first.sequence.controls) === null || _c === void 0 ? void 0 : _c.runtimeValues) ===
+            ((_d = second.sequence.controls) === null || _d === void 0 ? void 0 : _d.runtimeValues) &&
+        first.sequence.effects === second.sequence.effects &&
+        (0, are_sequence_node_path_infos_equal_1.areSequenceNodePathInfosEqual)(first.nodePathInfo, second.nodePathInfo));
+};
+exports.TimelineExpandedTrackKeyframes = react_1.default.memo(TimelineExpandedTrackKeyframesInner, areTimelineExpandedTrackKeyframesPropsEqual);

package/dist/components/Timeline/TimelineFieldRowContent.js

@@ -2,13 +2,20 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TimelineFieldRowContent = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
 const timeline_field_row_layout_1 = require("./timeline-field-row-layout");
 const TimelineFieldLabel_1 = require("./TimelineFieldLabel");
+const Transform3DModeContext_1 = require("./Transform3DModeContext");
 const TimelineFieldRowContent = ({ field, rowDepth, selected, children }) => {
     var _a;
-    const label = (jsx_runtime_1.jsx(TimelineFieldLabel_1.TimelineFieldLabel, { rowDepth: rowDepth, selected: selected, label: (_a = field.description) !== null && _a !== void 0 ? _a : field.key, stacked: field.typeName === 'text-content' }));
-    const value = jsx_runtime_1.jsx("div", { style: timeline_field_row_layout_1.timelineFieldValueColumnStyle, children: children });
-    if (field.typeName === 'text-content') {
+    const transform3DMode = (0, react_1.useContext)(Transform3DModeContext_1.Transform3DModeContext);
+    const stacked = (0, timeline_field_row_layout_1.isTimelineFieldStacked)({ field, transform3DMode });
+    const compactStacked = stacked && field.typeName !== 'text-content';
+    const label = (jsx_runtime_1.jsx(TimelineFieldLabel_1.TimelineFieldLabel, { rowDepth: rowDepth, selected: selected, label: (_a = field.description) !== null && _a !== void 0 ? _a : field.key, stacked: stacked }));
+    const value = (jsx_runtime_1.jsx("div", { style: compactStacked
+            ? timeline_field_row_layout_1.timelineCompactStackedFieldValueColumnStyle
+            : timeline_field_row_layout_1.timelineFieldValueColumnStyle, children: children }));
+    if (stacked) {
         return (jsx_runtime_1.jsxs("div", { style: timeline_field_row_layout_1.timelineStackedFieldContentStyle, children: [label, value] }));
     }
     return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [label, value] }));