@remotion/studio 4.0.520 → 4.0.522

package/dist/components/Timeline/TimelineLayerChildren.js

@@ -0,0 +1,129 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TimelineLayerChildrenToggle = exports.useTimelineLayerChildren = exports.TimelineLayerChildrenProvider = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const colors_1 = require("../../helpers/colors");
+const hoverable_1 = require("../../helpers/hoverable");
+const persist_boolean_map_1 = require("../../helpers/persist-boolean-map");
+const timeline_node_path_key_1 = require("../../helpers/timeline-node-path-key");
+const TimelineCollapseToggle_1 = require("./TimelineCollapseToggle");
+const TimelineExpandArrowButton_1 = require("./TimelineExpandArrowButton");
+const STORAGE_KEY = 'remotion.editor.collapsedLayerChildren.v1';
+const TimelineLayerChildrenContext = (0, react_1.createContext)(null);
+exports.TimelineLayerChildrenProvider = TimelineLayerChildrenContext.Provider;
+const useTimelineLayerChildren = (tracks, sequences, compositionId) => {
+    const [collapsed, setCollapsed] = (0, react_1.useState)(() => {
+        var _a;
+        try {
+            const parsed = JSON.parse((_a = window.localStorage.getItem(STORAGE_KEY)) !== null && _a !== void 0 ? _a : '{}');
+            if (!parsed || typeof parsed !== 'object' || Array.isArray(parsed)) {
+                return {};
+            }
+            return Object.fromEntries(Object.entries(parsed).filter(([, storedValue]) => storedValue === true));
+        }
+        catch (_b) {
+            return {};
+        }
+    });
+    const toggle = (0, react_1.useCallback)((key) => {
+        setCollapsed((previous) => {
+            const next = (0, persist_boolean_map_1.toggleBooleanMapKey)(previous, key);
+            try {
+                window.localStorage.setItem(STORAGE_KEY, JSON.stringify(next));
+            }
+            catch (_a) {
+                // Keep the control usable when storage is unavailable.
+            }
+            return next;
+        });
+    }, []);
+    const hierarchy = (0, react_1.useMemo)(() => {
+        var _a;
+        var _b, _c;
+        const byId = new Map(sequences.map((sequence) => [sequence.id, sequence]));
+        const siblingIndices = new Map();
+        const siblingCounts = new Map();
+        for (const sequence of sequences) {
+            const index = (_b = siblingCounts.get(sequence.parent)) !== null && _b !== void 0 ? _b : 0;
+            siblingIndices.set(sequence.id, index);
+            siblingCounts.set(sequence.parent, index + 1);
+        }
+        const keys = new Map();
+        const parents = new Set();
+        const ancestors = new Map();
+        for (const track of tracks) {
+            const parentIds = [];
+            let { parent } = track.sequence;
+            while (parent !== null && !parentIds.includes(parent)) {
+                parentIds.push(parent);
+                parents.add(parent);
+                parent = (_c = (_a = byId.get(parent)) === null || _a === void 0 ? void 0 : _a.parent) !== null && _c !== void 0 ? _c : null;
+            }
+            ancestors.set(track.sequence.id, parentIds);
+            // Source identity survives remounts. For layers without source metadata,
+            // use the structural position instead of the ephemeral sequence ID.
+            const identity = track.nodePathInfo
+                ? ['source', (0, timeline_node_path_key_1.timelineNodePathInfoToKey)(track.nodePathInfo)]
+                : [
+                    'position',
+                    ...[...parentIds]
+                        .reverse()
+                        .concat(track.sequence.id)
+                        .map((id) => siblingIndices.get(id)),
+                ];
+            keys.set(track.sequence.id, JSON.stringify([compositionId, identity]));
+        }
+        return { keys, parents, ancestors };
+    }, [compositionId, sequences, tracks]);
+    const visibleTracks = (0, react_1.useMemo)(() => tracks.filter((track) => {
+        var _a;
+        return !((_a = hierarchy.ancestors.get(track.sequence.id)) !== null && _a !== void 0 ? _a : []).some((id) => {
+            const key = hierarchy.keys.get(id);
+            return key !== undefined && collapsed[key];
+        });
+    }), [hierarchy, collapsed, tracks]);
+    const value = (0, react_1.useMemo)(() => ({
+        collapsed,
+        keys: hierarchy.keys,
+        parents: hierarchy.parents,
+        toggle,
+    }), [collapsed, hierarchy, toggle]);
+    return { visibleTracks, value };
+};
+exports.useTimelineLayerChildren = useTimelineLayerChildren;
+const TimelineLayerChildrenToggle = ({ sequence }) => {
+    const context = (0, react_1.useContext)(TimelineLayerChildrenContext);
+    const key = context === null || context === void 0 ? void 0 : context.keys.get(sequence.id);
+    const isCollapsed = key !== undefined && Boolean(context === null || context === void 0 ? void 0 : context.collapsed[key]);
+    const onClick = (0, react_1.useCallback)((event) => {
+        event.stopPropagation();
+        if (key !== undefined) {
+            context === null || context === void 0 ? void 0 : context.toggle(key);
+        }
+    }, [context, key]);
+    const stopPropagation = (0, react_1.useCallback)((event) => event.stopPropagation(), []);
+    if (!(context === null || context === void 0 ? void 0 : context.parents.has(sequence.id)) || key === undefined) {
+        return jsx_runtime_1.jsx(TimelineExpandArrowButton_1.TimelineExpandArrowSpacer, {});
+    }
+    const label = `${isCollapsed ? 'Expand' : 'Collapse'} children of ${sequence.displayName}`;
+    return (jsx_runtime_1.jsx("button", { type: "button", className: `${hoverable_1.HOVERABLE_CLASS_NAME} ${hoverable_1.FOCUS_VISIBLE_ONLY_CLASS_NAME}`, "aria-label": label, "aria-expanded": !isCollapsed, title: label, onClick: onClick, onPointerDown: stopPropagation, onDoubleClick: stopPropagation, style: {
+            ...(0, hoverable_1.hoverableStyle)({
+                idleBackground: colors_1.TRANSPARENT,
+                hoverBackground: colors_1.TRANSPARENT,
+                idleColor: colors_1.LIGHT_TEXT,
+                hoverColor: colors_1.WHITE,
+            }),
+            border: 'none',
+            padding: 0,
+            cursor: 'default',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            width: 12,
+            height: 16,
+            marginRight: 0,
+            flexShrink: 0,
+        }, children: jsx_runtime_1.jsx(TimelineCollapseToggle_1.TimelineCollapseToggle, { collapsed: isCollapsed, color: "currentColor" }) }));
+};
+exports.TimelineLayerChildrenToggle = TimelineLayerChildrenToggle;

package/dist/components/Timeline/TimelineNumberField.js

@@ -35,8 +35,12 @@ const TimelineNumberField = ({ field, effectiveValue, onSave, onDragValueChange,
         }
     }, [onSave, propStatus]);
     const configuredStep = field.fieldSchema.type === 'number' ? field.fieldSchema.step : undefined;
-    const step = configuredStep !== null && configuredStep !== void 0 ? configuredStep : 1;
-    const allowStepMismatch = field.group === 'crop' ||
+    const currentValue = dragValue !== null && dragValue !== void 0 ? dragValue : effectiveValue;
+    const step = field.fieldSchema.type === 'font-weight' && currentValue % 100 === 0
+        ? 100
+        : (configuredStep !== null && configuredStep !== void 0 ? configuredStep : 1);
+    const allowStepMismatch = field.fieldSchema.type === 'font-weight' ||
+        field.group === 'crop' ||
         ('kind' in field && field.kind === 'effect-field');
     const formatter = (0, react_1.useCallback)((v) => {
         return (0, timeline_field_display_utils_1.formatTimelineFieldValueForDisplay)({
@@ -44,10 +48,14 @@ const TimelineNumberField = ({ field, effectiveValue, onSave, onDragValueChange,
             value: v,
         });
     }, [field.fieldSchema]);
-    return (jsx_runtime_1.jsx(InputDragger_1.InputDragger, { type: "number", value: dragValue !== null && dragValue !== void 0 ? dragValue : effectiveValue, buttonStyle: timeline_field_utils_1.leftAlignedDraggerStyle, style: timeline_field_utils_1.draggerStyle, status: "ok", small: true, onValueChange: onValueChange, onValueChangeEnd: onValueChangeEnd, onTextChange: onTextChange, min: field.fieldSchema.type === 'number'
+    return (jsx_runtime_1.jsx(InputDragger_1.InputDragger, { type: "number", value: currentValue, buttonStyle: timeline_field_utils_1.leftAlignedDraggerStyle, style: timeline_field_utils_1.draggerStyle, status: "ok", small: true, onValueChange: onValueChange, onValueChangeEnd: onValueChangeEnd, onTextChange: onTextChange, min: field.fieldSchema.type === 'number'
             ? ((_a = field.fieldSchema.min) !== null && _a !== void 0 ? _a : -Infinity)
-            : -Infinity, max: field.fieldSchema.type === 'number'
+            : field.fieldSchema.type === 'font-weight'
+                ? 1
+                : -Infinity, max: field.fieldSchema.type === 'number'
             ? ((_b = field.fieldSchema.max) !== null && _b !== void 0 ? _b : Infinity)
-            : Infinity, step: step, formatter: formatter, rightAlign: false, allowStepMismatch: allowStepMismatch }));
+            : field.fieldSchema.type === 'font-weight'
+                ? 1000
+                : Infinity, step: step, dragSensitivity: field.fieldSchema.type === 'font-weight' && step === 100 ? 0.1 : 1, formatter: formatter, rightAlign: false, allowStepMismatch: allowStepMismatch }));
 };
 exports.TimelineNumberField = TimelineNumberField;

package/dist/components/Timeline/TimelinePinchZoom.js

@@ -18,7 +18,6 @@ const ZOOM_WHEEL_SENSITIVITY = 0.06;
 const TimelinePinchZoom = () => {
     const isVideoComposition = (0, is_current_selected_still_1.useIsVideoComposition)();
     const videoConfig = remotion_1.Internals.useUnsafeVideoConfig();
-    const { canvasContent } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
     const { zoom, setZoom } = (0, react_1.useContext)(timeline_zoom_1.TimelineZoomCtx);
     const { editorZoomGestures } = (0, react_1.useContext)(editor_zoom_gestures_1.EditorZoomGesturesContext);
     const zoomRef = (0, react_1.useRef)(zoom);
@@ -51,9 +50,6 @@ const TimelinePinchZoom = () => {
         if (!videoConfig || videoConfig.durationInFrames < 2) {
             return;
         }
-        if (!canvasContent || canvasContent.type !== 'composition') {
-            return;
-        }
         const scrollEl = timeline_refs_1.scrollableRef.current;
         if (!scrollEl) {
             return;
@@ -70,14 +66,8 @@ const TimelinePinchZoom = () => {
         else if (deltaMode === WheelEvent.DOM_DELTA_PAGE) {
             scaledDeltaY *= scrollEl.clientHeight;
         }
-        setZoom(canvasContent.compositionId, (z) => z * Math.exp(-scaledDeltaY * ZOOM_WHEEL_SENSITIVITY), { anchorFrame: null, anchorContentX });
-    }, [
-        editorZoomGestures,
-        isVideoComposition,
-        videoConfig,
-        canvasContent,
-        setZoom,
-    ]);
+        setZoom(videoConfig.id, (z) => z * Math.exp(-scaledDeltaY * ZOOM_WHEEL_SENSITIVITY), { anchorFrame: null, anchorContentX });
+    }, [editorZoomGestures, isVideoComposition, videoConfig, setZoom]);
     const supportsWebKitPinch = typeof window !== 'undefined' && 'GestureEvent' in window;
     (0, react_1.useEffect)(() => {
         const el = timeline_refs_1.timelineVerticalScroll.current;
@@ -106,16 +96,13 @@ const TimelinePinchZoom = () => {
             if (!videoConfig || videoConfig.durationInFrames < 2) {
                 return;
             }
-            if (!canvasContent || canvasContent.type !== 'composition') {
-                return;
-            }
             const scrollEl = timeline_refs_1.scrollableRef.current;
             if (!scrollEl) {
                 return;
             }
             e.preventDefault();
             suppressWheelFromWebKitPinchRef.current = true;
-            pinchBaseZoomRef.current = getCurrentTimelineZoom(canvasContent.compositionId);
+            pinchBaseZoomRef.current = getCurrentTimelineZoom(videoConfig.id);
         };
         const onGestureChange = (event) => {
             const e = event;
@@ -126,9 +113,6 @@ const TimelinePinchZoom = () => {
                 videoConfig.durationInFrames < 2) {
                 return;
             }
-            if (!canvasContent || canvasContent.type !== 'composition') {
-                return;
-            }
             const scrollEl = timeline_refs_1.scrollableRef.current;
             if (!scrollEl) {
                 return;
@@ -138,7 +122,7 @@ const TimelinePinchZoom = () => {
                 clientX: e.clientX,
                 scrollEl,
             });
-            setZoom(canvasContent.compositionId, () => base * e.scale, {
+            setZoom(videoConfig.id, () => base * e.scale, {
                 anchorFrame: null,
                 anchorContentX,
             });
@@ -161,7 +145,6 @@ const TimelinePinchZoom = () => {
         supportsWebKitPinch,
         isVideoComposition,
         videoConfig,
-        canvasContent,
         getCurrentTimelineZoom,
         setZoom,
     ]);
@@ -180,9 +163,6 @@ const TimelinePinchZoom = () => {
                 videoConfig.durationInFrames < 2) {
                 return;
             }
-            if (!canvasContent || canvasContent.type !== 'composition') {
-                return;
-            }
             const [t0, t1] = [event.touches[0], event.touches[1]];
             const initialDistance = Math.hypot(t1.clientX - t0.clientX, t1.clientY - t0.clientY);
             if (initialDistance < 1e-6) {
@@ -190,7 +170,7 @@ const TimelinePinchZoom = () => {
             }
             touchPinchRef.current = {
                 initialDistance,
-                initialZoom: getCurrentTimelineZoom(canvasContent.compositionId),
+                initialZoom: getCurrentTimelineZoom(videoConfig.id),
             };
         };
         const onTouchMove = (event) => {
@@ -201,9 +181,6 @@ const TimelinePinchZoom = () => {
                 videoConfig.durationInFrames < 2) {
                 return;
             }
-            if (!canvasContent || canvasContent.type !== 'composition') {
-                return;
-            }
             const scrollEl = timeline_refs_1.scrollableRef.current;
             if (!scrollEl) {
                 return;
@@ -217,7 +194,7 @@ const TimelinePinchZoom = () => {
                 clientX,
                 scrollEl,
             });
-            setZoom(canvasContent.compositionId, () => pinch.initialZoom * ratio, {
+            setZoom(videoConfig.id, () => pinch.initialZoom * ratio, {
                 anchorFrame: null,
                 anchorContentX,
             });
@@ -241,7 +218,6 @@ const TimelinePinchZoom = () => {
         editorZoomGestures,
         isVideoComposition,
         videoConfig,
-        canvasContent,
         getCurrentTimelineZoom,
         setZoom,
     ]);

package/dist/components/Timeline/TimelinePlayCursorSyncer.js

@@ -16,17 +16,11 @@ const TimelinePlayCursorSyncer = () => {
     const timelinePosition = remotion_1.Internals.Timeline.useTimelinePosition();
     const playing = remotion_1.Internals.usePlaying();
     const { playbackRate } = remotion_1.Internals.usePlaybackRate();
-    const { canvasContent } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
     const { zoom: zoomMap } = (0, react_1.useContext)(timeline_zoom_1.TimelineZoomCtx);
-    const compositionId = canvasContent && canvasContent.type === 'composition'
-        ? canvasContent.compositionId
-        : null;
-    // Asset previews have a synthetic video config, but no composition ID
-    // with which to look up a persisted timeline zoom.
     const zoom = (0, get_timeline_max_zoom_1.getTimelineZoom)({
         durationInFrames: (_b = video === null || video === void 0 ? void 0 : video.durationInFrames) !== null && _b !== void 0 ? _b : 1,
         timelineViewportWidth: (_c = (_a = timeline_refs_1.scrollableRef.current) === null || _a === void 0 ? void 0 : _a.clientWidth) !== null && _c !== void 0 ? _c : 0,
-        zoom: compositionId ? ((_d = zoomMap[compositionId]) !== null && _d !== void 0 ? _d : null) : null,
+        zoom: video ? ((_d = zoomMap[video.id]) !== null && _d !== void 0 ? _d : null) : null,
     });
     if (video) {
         (0, imperative_state_1.setCurrentFrame)(timelinePosition);

package/dist/components/Timeline/TimelinePrimitiveFieldValue.js

@@ -7,6 +7,7 @@ const TimelineBooleanField_1 = require("./TimelineBooleanField");
 const TimelineColorField_1 = require("./TimelineColorField");
 const TimelineEnumField_1 = require("./TimelineEnumField");
 const TimelineFontFamilyField_1 = require("./TimelineFontFamilyField");
+const TimelineFontWeightField_1 = require("./TimelineFontWeightField");
 const TimelineNumberField_1 = require("./TimelineNumberField");
 const TimelineRotationField_1 = require("./TimelineRotationField");
 const TimelineScaleField_1 = require("./TimelineScaleField");
@@ -67,6 +68,9 @@ const TimelinePrimitiveFieldValue = ({ field, onSave, onDragValueChange, onDragE
     if (field.typeName === 'font-family') {
         return (jsx_runtime_1.jsx("span", { style: inlineWrapper, children: jsx_runtime_1.jsx(TimelineFontFamilyField_1.TimelineFontFamilyField, { effectiveValue: effectiveValue, field: field, onDragEnd: onDragEnd, onDragValueChange: onDragValueChange, onSave: onSave, propStatus: propStatus }) }));
     }
+    if (field.typeName === 'font-weight') {
+        return (jsx_runtime_1.jsx("span", { style: inlineWrapper, children: jsx_runtime_1.jsx(TimelineFontWeightField_1.TimelineFontWeightField, { effectiveValue: effectiveValue, field: field, onDragEnd: onDragEnd, onDragValueChange: onDragValueChange, onSave: onSave, propStatus: propStatus }) }));
+    }
     if (field.typeName === 'asset') {
         return (jsx_runtime_1.jsx("span", { style: assetInlineWrapper, children: jsx_runtime_1.jsx(TimelineAssetField_1.TimelineAssetField, { effectiveValue: effectiveValue, field: field, onDragEnd: onDragEnd, onDragValueChange: onDragValueChange, onSave: onSave, propStatus: propStatus }) }));
     }

package/dist/components/Timeline/TimelineSequence.js

@@ -35,6 +35,7 @@ var __importStar = (this && this.__importStar) || (function () {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TimelineSequence = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const canvas_1 = require("@remotion/canvas");
 const react_1 = __importStar(require("react"));
 const remotion_1 = require("remotion");
 const client_id_1 = require("../../helpers/client-id");
@@ -45,7 +46,7 @@ const get_timeline_sequence_layout_1 = require("../../helpers/get-timeline-seque
 const interactivity_enabled_1 = require("../../helpers/interactivity-enabled");
 const is_video_with_last_frame_hold_1 = require("../../helpers/is-video-with-last-frame-hold");
 const timeline_layout_1 = require("../../helpers/timeline-layout");
-const use_max_media_duration_1 = require("../../helpers/use-max-media-duration");
+const use_media_metadata_1 = require("../../helpers/use-media-metadata");
 const modals_1 = require("../../state/modals");
 const AudioWaveform_1 = require("../AudioWaveform");
 const ConfirmationDialog_1 = require("../ConfirmationDialog");
@@ -55,6 +56,8 @@ const use_select_asset_1 = require("../use-select-asset");
 const disable_sequence_interactivity_1 = require("./disable-sequence-interactivity");
 const duplicate_selected_timeline_item_1 = require("./duplicate-selected-timeline-item");
 const get_sequence_context_menu_items_1 = require("./get-sequence-context-menu-items");
+const get_sequence_split_menu_item_1 = require("./get-sequence-split-menu-item");
+const get_timeline_media_start_frame_1 = require("./get-timeline-media-start-frame");
 const get_timeline_sequence_visible_layout_1 = require("./get-timeline-sequence-visible-layout");
 const imperative_state_1 = require("./imperative-state");
 const LoopedTimelineIndicators_1 = require("./LoopedTimelineIndicators");
@@ -115,7 +118,7 @@ const TimelineSequenceNegativeStartInner = ({ left, width, leftEdgeVisible, clip
     return (jsx_runtime_1.jsx("div", { style: outerStyle, children: jsx_runtime_1.jsx("div", { style: innerStyle }) }));
 };
 const TimelineSequenceNegativeStart = react_1.default.memo(TimelineSequenceNegativeStartInner);
-const TimelineSequenceCurrentFrame = ({ s, displayDurationInFrames, premount, postmount, negativeStart, leftEdgeVisible, negativeStartClipped, style, children, nodePathInfo, sequenceFrameOffset, fromCanUpdate, frozenFrame, onMoveDragPointerDown, onPointerDownCapture, onDoubleClick, }) => {
+const TimelineSequenceCurrentFrame = ({ s, displayDurationInFrames, premount, postmount, negativeStart, leftEdgeVisible, negativeStartClipped, style, children, edgeDragHandles, nodePathInfo, sequenceFrameOffset, fromCanUpdate, frozenFrame, onMoveDragPointerDown, onPointerDownCapture, onDoubleClick, }) => {
     var _a, _b, _c;
     const ref = (0, react_1.useRef)(null);
     const { onSelect, selectable, selected, selectionItem } = (0, TimelineSelection_1.useTimelineRowSelection)(nodePathInfo);
@@ -197,31 +200,36 @@ const TimelineSequenceCurrentFrame = ({ s, displayDurationInFrames, premount, po
                     display: 'flex',
                     alignItems: 'center',
                 }, children: jsx_runtime_1.jsx(TimelineSequenceFrame_1.TimelineSequenceFrame, { premounted: isPremounting, postmounted: isPostmounting ? s.duration - 1 : null, roundedFrame: roundedFrame, frozenFrame: frozenFrame }) })) : null] }));
-    return (jsx_runtime_1.jsx("div", { ref: ref, [TimelineSelection_1.TIMELINE_MARQUEE_ITEM_ATTR]: true, style: actualStyle, title: s.displayName, onPointerDownCapture: onPointerDownCapture, onPointerDown: selectable ? onPointerDown : undefined, onDoubleClick: onDoubleClick, children: negativeStart ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
-                jsx_runtime_1.jsx(TimelineSequenceNegativeStart, { left: negativeStart.left, width: negativeStart.width, leftEdgeVisible: leftEdgeVisible, clipped: negativeStartClipped }), jsx_runtime_1.jsx("div", { style: {
-                        background: style.background,
-                        border: style.border,
-                        borderBottomLeftRadius: 0,
-                        borderBottomRightRadius: style.borderBottomRightRadius,
-                        borderLeft: 'none',
-                        borderRightColor: style.borderRightColor,
-                        borderTopLeftRadius: 0,
-                        borderTopRightRadius: style.borderTopRightRadius,
-                        boxSizing: 'border-box',
-                        height: '100%',
-                        left: negativeStartEnd,
-                        overflow: 'hidden',
-                        position: 'absolute',
-                        top: 0,
-                        width: `calc(100% - ${negativeStartEnd}px)`,
-                    }, children: jsx_runtime_1.jsx("div", { style: {
+    return (jsx_runtime_1.jsxs("div", { ref: ref, [TimelineSelection_1.TIMELINE_MARQUEE_ITEM_ATTR]: true, style: actualStyle, title: s.displayName, onPointerDownCapture: onPointerDownCapture, onPointerDown: selectable ? onPointerDown : undefined, onDoubleClick: onDoubleClick, children: [negativeStart ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
+                    jsx_runtime_1.jsx(TimelineSequenceNegativeStart, { left: negativeStart.left, width: negativeStart.width, leftEdgeVisible: leftEdgeVisible, clipped: negativeStartClipped }), jsx_runtime_1.jsx("div", { style: {
+                            background: style.background,
+                            border: style.border,
+                            borderBottomLeftRadius: 0,
+                            borderBottomRightRadius: style.borderBottomRightRadius,
+                            borderLeft: 'none',
+                            borderRightColor: style.borderRightColor,
+                            borderTopLeftRadius: 0,
+                            borderTopRightRadius: style.borderTopRightRadius,
+                            boxSizing: 'border-box',
                             height: '100%',
-                            left: -negativeStartEnd,
+                            left: negativeStartEnd,
+                            overflow: 'hidden',
                             position: 'absolute',
                             top: 0,
-                            width: style.width,
-                        }, children: content }) })
-            ] })) : (content) }));
+                            width: `calc(100% - ${negativeStartEnd}px)`,
+                        }, children: jsx_runtime_1.jsx("div", { style: {
+                                height: '100%',
+                                left: -negativeStartEnd,
+                                position: 'absolute',
+                                top: 0,
+                                width: style.width,
+                            }, children: content }) })
+                ] })) : (jsx_runtime_1.jsx("div", { style: {
+                    position: 'absolute',
+                    inset: 0,
+                    overflow: 'hidden',
+                    borderRadius: 'inherit',
+                }, children: content })), edgeDragHandles] }));
 };
 const TimelineSequenceInner = ({ s, connectedCompositions, windowWidth, nodePathInfo, sequenceFrameOffset, cascadedStart, localStart, }) => {
     // If a duration is 1, it is essentially a still and it should have width 0
@@ -230,11 +238,27 @@ const TimelineSequenceInner = ({ s, connectedCompositions, windowWidth, nodePath
     var _a, _b, _c;
     var _d, _e, _f, _g, _h, _j, _k;
     const video = remotion_1.Internals.useVideo();
+    const { sequences } = (0, react_1.useContext)(remotion_1.Internals.SequenceManager);
     const renderWindow = (0, react_1.useContext)(TimelineViewport_1.TimelineViewportContext);
     const dragAwareDoubleClick = (0, react_1.useMemo)(() => (0, drag_aware_double_click_1.createDragAwareDoubleClickTracker)(), []);
-    const maxMediaDuration = (0, use_max_media_duration_1.useMaxMediaDuration)(s, (_d = video === null || video === void 0 ? void 0 : video.fps) !== null && _d !== void 0 ? _d : 30);
-    const effectiveMaxMediaDuration = s.loopDisplay ? null : maxMediaDuration;
+    const mediaMetadata = (0, use_media_metadata_1.useMediaMetadata)(s.type === 'audio' || s.type === 'video' ? s.src : null);
     const extendVideoLastFrame = (0, is_video_with_last_frame_hold_1.isVideoWithLastFrameHold)(s);
+    const naturalMediaDuration = (s.type === 'audio' || s.type === 'video') &&
+        mediaMetadata !== null &&
+        s.playbackRate > 0
+        ? Math.max(0, (mediaMetadata.duration * ((_d = video === null || video === void 0 ? void 0 : video.fps) !== null && _d !== void 0 ? _d : 30) -
+            (0, get_timeline_media_start_frame_1.getTimelineMediaStartFrame)({
+                startMediaFrom: s.startMediaFrom,
+                mediaFrameAtSequenceZero: s.mediaFrameAtSequenceZero,
+                sequenceFrameOffset,
+                playbackRate: s.playbackRate,
+            })) /
+            s.playbackRate)
+        : null;
+    const maxMediaDuration = s.type === 'sequence' || s.type === 'image' || extendVideoLastFrame
+        ? Infinity
+        : naturalMediaDuration;
+    const effectiveMaxMediaDuration = s.loopDisplay ? null : maxMediaDuration;
     const { canOpenInEditor, canConfigureApps, codingAgentInfo, editorInfo, openInCodingAgent, openInEditor, originalLocation, } = (0, use_open_sequence_in_apps_1.useOpenSequenceInApps)(s);
     const validatedLocation = (0, react_1.useMemo)(() => {
         var _a;
@@ -401,6 +425,14 @@ const TimelineSequenceInner = ({ s, connectedCompositions, windowWidth, nodePath
                 onDuplicateSelectedSequences,
             });
         }
+        const splitMenuItem = (0, get_sequence_split_menu_item_1.getSequenceSplitMenuItem)({
+            nodePathInfo,
+            sequence: s,
+            propStatuses: propStatusesForOverride,
+            splitFrame: (0, imperative_state_1.getCurrentFrame)(),
+            canEditSource: previewInteractive && Boolean(validatedLocation === null || validatedLocation === void 0 ? void 0 : validatedLocation.source),
+            hasMultipleSelection: selected && selectedItems.length > 1,
+        });
         const freezeFrameMenuItem = (0, use_sequence_freeze_frame_menu_item_1.getSequenceFreezeFrameMenuItem)({
             clientId: previewInteractive && previewServerState.type === 'connected'
                 ? previewServerState.clientId
@@ -442,8 +474,11 @@ const TimelineSequenceInner = ({ s, connectedCompositions, windowWidth, nodePath
             originalLocation,
             selectAsset,
             sequence: s,
-            sourceActions: (0, interactivity_enabled_1.isStudioInteractivityEnabled)() && freezeFrameMenuItem
-                ? [freezeFrameMenuItem]
+            sourceActions: (0, interactivity_enabled_1.isStudioInteractivityEnabled)()
+                ? [
+                    ...(splitMenuItem ? [splitMenuItem] : []),
+                    ...(freezeFrameMenuItem ? [freezeFrameMenuItem] : []),
+                ]
                 : [],
         });
     }, [
@@ -457,6 +492,7 @@ const TimelineSequenceInner = ({ s, connectedCompositions, windowWidth, nodePath
         isProgrammaticallyDuplicated,
         mediaSrc,
         nodePath,
+        nodePathInfo,
         onSelect,
         onDeleteSequenceFromSource,
         onDeleteSelectedSequences,
@@ -473,6 +509,7 @@ const TimelineSequenceInner = ({ s, connectedCompositions, windowWidth, nodePath
         selectAsset,
         selectable,
         selected,
+        selectedItems.length,
         selectedSequenceNodePathInfos,
         sequenceFrameOffset,
         setPropStatuses,
@@ -497,7 +534,8 @@ const TimelineSequenceInner = ({ s, connectedCompositions, windowWidth, nodePath
             durationInFrames: displayDurationInFrames,
             startFrom: s.loopDisplay ? s.from + s.loopDisplay.startOffset : s.from,
             cascadedStart,
-            startFromMedia: s.type === 'sequence' || s.type === 'image' ? 0 : s.startMediaFrom,
+            // The media duration cap already accounts for trimming and playback speed.
+            startFromMedia: 0,
             maxMediaDuration: effectiveMaxMediaDuration,
             video,
             windowWidth,
@@ -544,7 +582,33 @@ const TimelineSequenceInner = ({ s, connectedCompositions, windowWidth, nodePath
     }, [visibleLayout]);
     const showLeftBorderRadius = (visibleLayout === null || visibleLayout === void 0 ? void 0 : visibleLayout.leftEdgeVisible) === true &&
         localStart >= 0 &&
-        ((_h = s.trimBefore) !== null && _h !== void 0 ? _h : 0) === 0;
+        ((_h = s.trimBefore) !== null && _h !== void 0 ? _h : 0) === 0 &&
+        (s.type === 'sequence' ||
+            s.type === 'image' ||
+            (0, get_timeline_media_start_frame_1.getTimelineMediaStartFrame)({
+                startMediaFrom: s.startMediaFrom,
+                mediaFrameAtSequenceZero: s.mediaFrameAtSequenceZero,
+                sequenceFrameOffset,
+                playbackRate: s.playbackRate,
+            }) === 0);
+    // Compare frame boundaries: fractional media durations still occupy the last frame.
+    const endsAtNaturalMediaDuration = !s.loopDisplay &&
+        s.frozenFrame === null &&
+        (s.type === 'audio' || s.type === 'video') &&
+        s.frozenMediaFrame === null &&
+        naturalMediaDuration !== null &&
+        Number.isFinite(naturalMediaDuration) &&
+        naturalMediaDuration > 0 &&
+        Math.ceil(Math.min(s.duration, video.durationInFrames - s.from, maxMediaDuration !== null && maxMediaDuration !== void 0 ? maxMediaDuration : Infinity)) === Math.ceil(naturalMediaDuration);
+    const parentSequence = sequences.find((candidate) => candidate.id === s.parent);
+    const parentEnd = parentSequence
+        ? (0, canvas_1.getTimelineVisibleStart)(parentSequence, sequences) +
+            (0, canvas_1.getTimelineVisibleDuration)(parentSequence, sequences)
+        : video.durationInFrames;
+    const endsAtContainerBoundary = Math.ceil(s.from + displayDurationInFrames) >=
+        Math.ceil(Math.min(parentEnd, video.durationInFrames));
+    const showRightBorderRadius = (visibleLayout === null || visibleLayout === void 0 ? void 0 : visibleLayout.rightEdgeVisible) === true &&
+        (endsAtContainerBoundary || endsAtNaturalMediaDuration);
     const style = (0, react_1.useMemo)(() => {
         var _a, _b;
         return {
@@ -562,16 +626,23 @@ const TimelineSequenceInner = ({ s, connectedCompositions, windowWidth, nodePath
                 : colors_1.TRANSPARENT,
             borderTopLeftRadius: showLeftBorderRadius ? 2 : 0,
             borderBottomLeftRadius: showLeftBorderRadius ? 2 : 0,
-            borderTopRightRadius: (visibleLayout === null || visibleLayout === void 0 ? void 0 : visibleLayout.rightEdgeVisible) ? 2 : 0,
-            borderBottomRightRadius: (visibleLayout === null || visibleLayout === void 0 ? void 0 : visibleLayout.rightEdgeVisible) ? 2 : 0,
+            borderTopRightRadius: showRightBorderRadius ? 2 : 0,
+            borderBottomRightRadius: showRightBorderRadius ? 2 : 0,
             position: 'absolute',
             height: (0, timeline_layout_1.getTimelineLayerHeight)(s.type),
             marginLeft: (_a = visibleLayout === null || visibleLayout === void 0 ? void 0 : visibleLayout.marginLeft) !== null && _a !== void 0 ? _a : 0,
             width: (_b = visibleLayout === null || visibleLayout === void 0 ? void 0 : visibleLayout.width) !== null && _b !== void 0 ? _b : 0,
             color: colors_1.WHITE,
-            overflow: 'hidden',
+            // Edge handles extend outside the layer; media is clipped separately.
+            overflow: 'visible',
         };
-    }, [negativeStartClipped, s.type, showLeftBorderRadius, visibleLayout]);
+    }, [
+        negativeStartClipped,
+        s.type,
+        showLeftBorderRadius,
+        showRightBorderRadius,
+        visibleLayout,
+    ]);
     const showRightEdgeDragHandle = (0, TimelineSequenceRightEdgeDragHandle_1.isTimelineSequenceDurationDraggable)(s) &&
         nodePath !== null &&
         validatedLocation !== null &&
@@ -592,14 +663,14 @@ const TimelineSequenceInner = ({ s, connectedCompositions, windowWidth, nodePath
     const mediaDisplayDurationInFrames = visibleLayout.media
         ? visibleLayout.media.width / frameIncrement
         : 0;
-    const sequence = (jsx_runtime_1.jsxs(TimelineSequenceCurrentFrame, { s: s, displayDurationInFrames: displayDurationInFrames, premount: visibleLayout.premount, postmount: visibleLayout.postmount, negativeStart: visibleLayout.negativeStart, leftEdgeVisible: visibleLayout.leftEdgeVisible, negativeStartClipped: negativeStartClipped, style: style, nodePathInfo: nodePathInfo, sequenceFrameOffset: sequenceFrameOffset, fromCanUpdate: fromCanUpdate, frozenFrame: frozenFrame, onMoveDragPointerDown: onMoveDragPointerDown, onPointerDownCapture: dragAwareDoubleClick.beginPointerGesture, onDoubleClick: canHandleSequenceDoubleClick ? onSequenceDoubleClick : undefined, children: [s.type === 'audio' && visibleLayout.media ? (jsx_runtime_1.jsx("div", { style: mediaVisualizationStyle, children: jsx_runtime_1.jsx(AudioWaveform_1.AudioWaveform, { src: s.src, height: timeline_layout_1.TIMELINE_LAYER_HEIGHT_AUDIO, doesVolumeChange: s.doesVolumeChange, muted: s.muted, visualizationWidth: visibleLayout.media.width, startFrom: s.startMediaFrom, durationInFrames: s.duration, displayOffsetInFrames: mediaDisplayOffsetInFrames, displayDurationInFrames: mediaDisplayDurationInFrames, volume: s.volume, playbackRate: s.playbackRate, loopDisplay: s.loopDisplay }) })) : null, s.type === 'video' && visibleLayout.media ? (jsx_runtime_1.jsx(TimelineVideoInfo_1.TimelineVideoInfo, { src: s.src, visualizationWidth: visibleLayout.media.width, displayOffsetInFrames: mediaDisplayOffsetInFrames, displayDurationInFrames: mediaDisplayDurationInFrames, startMediaFrom: s.startMediaFrom, mediaFrameAtSequenceZero: s.mediaFrameAtSequenceZero, sequenceFrameOffset: sequenceFrameOffset, playbackRate: s.playbackRate, volume: s.volume, muted: s.muted, doesVolumeChange: s.doesVolumeChange, marginLeft: visibleLayout.media.left, loopDisplay: s.loopDisplay, frozenMediaFrame: s.frozenMediaFrame, extendLastFrame: extendVideoLastFrame })) : null, s.type === 'image' && visibleLayout.media ? (jsx_runtime_1.jsx("div", { style: mediaVisualizationStyle, children: jsx_runtime_1.jsx(TimelineImageInfo_1.TimelineImageInfo, { src: s.src, offsetInPixels: visibleLayout.media.offset }) })) : null, s.loopDisplay === undefined ? null : (jsx_runtime_1.jsx(LoopedTimelineIndicators_1.LoopedTimelineIndicator, { loops: s.loopDisplay.numberOfTimes, fullWidth: width, visibleOffset: visibleLayout.cropLeft, visibleWidth: visibleLayout.width })), showLeftEdgeDragHandle &&
-                visibleLayout.leftEdgeVisible &&
-                negativeStartWidth === 0 &&
-                nodePathInfo &&
-                validatedLocation ? (jsx_runtime_1.jsx(TimelineSequenceRightEdgeDragHandle_1.TimelineSequenceLeftEdgeDragHandle, { nodePathInfo: nodePathInfo, windowWidth: windowWidth, timelineDurationInFrames: (_j = video.durationInFrames) !== null && _j !== void 0 ? _j : 1, onDragEnd: dragAwareDoubleClick.endPointerGesture })) : null, showRightEdgeDragHandle &&
-                visibleLayout.rightEdgeVisible &&
-                nodePathInfo &&
-                validatedLocation ? (jsx_runtime_1.jsx(TimelineSequenceRightEdgeDragHandle_1.TimelineSequenceRightEdgeDragHandle, { nodePathInfo: nodePathInfo, windowWidth: windowWidth, timelineDurationInFrames: (_k = video.durationInFrames) !== null && _k !== void 0 ? _k : 1, onDragEnd: dragAwareDoubleClick.endPointerGesture })) : null] }));
+    const sequence = (jsx_runtime_1.jsxs(TimelineSequenceCurrentFrame, { s: s, displayDurationInFrames: displayDurationInFrames, premount: visibleLayout.premount, postmount: visibleLayout.postmount, negativeStart: visibleLayout.negativeStart, leftEdgeVisible: visibleLayout.leftEdgeVisible, negativeStartClipped: negativeStartClipped, style: style, nodePathInfo: nodePathInfo, sequenceFrameOffset: sequenceFrameOffset, fromCanUpdate: fromCanUpdate, frozenFrame: frozenFrame, onMoveDragPointerDown: onMoveDragPointerDown, onPointerDownCapture: dragAwareDoubleClick.beginPointerGesture, edgeDragHandles: jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [showLeftEdgeDragHandle &&
+                    visibleLayout.leftEdgeVisible &&
+                    negativeStartWidth === 0 &&
+                    nodePathInfo &&
+                    validatedLocation ? (jsx_runtime_1.jsx(TimelineSequenceRightEdgeDragHandle_1.TimelineSequenceLeftEdgeDragHandle, { nodePathInfo: nodePathInfo, windowWidth: windowWidth, timelineDurationInFrames: (_j = video.durationInFrames) !== null && _j !== void 0 ? _j : 1, onDragEnd: dragAwareDoubleClick.endPointerGesture, onSelect: onSelect, selected: selected })) : null, showRightEdgeDragHandle &&
+                    visibleLayout.rightEdgeVisible &&
+                    nodePathInfo &&
+                    validatedLocation ? (jsx_runtime_1.jsx(TimelineSequenceRightEdgeDragHandle_1.TimelineSequenceRightEdgeDragHandle, { nodePathInfo: nodePathInfo, windowWidth: windowWidth, timelineDurationInFrames: (_k = video.durationInFrames) !== null && _k !== void 0 ? _k : 1, onDragEnd: dragAwareDoubleClick.endPointerGesture, onSelect: onSelect, selected: selected })) : null] }), onDoubleClick: canHandleSequenceDoubleClick ? onSequenceDoubleClick : undefined, children: [s.type === 'audio' && visibleLayout.media ? (jsx_runtime_1.jsx("div", { style: mediaVisualizationStyle, children: jsx_runtime_1.jsx(AudioWaveform_1.AudioWaveform, { src: s.src, height: timeline_layout_1.TIMELINE_LAYER_HEIGHT_AUDIO, doesVolumeChange: s.doesVolumeChange, muted: s.muted, visualizationWidth: visibleLayout.media.width, startFrom: s.startMediaFrom, durationInFrames: s.duration, displayOffsetInFrames: mediaDisplayOffsetInFrames, displayDurationInFrames: mediaDisplayDurationInFrames, volume: s.volume, playbackRate: s.playbackRate, loopDisplay: s.loopDisplay }) })) : null, s.type === 'video' && visibleLayout.media ? (jsx_runtime_1.jsx(TimelineVideoInfo_1.TimelineVideoInfo, { src: s.src, visualizationWidth: visibleLayout.media.width, displayOffsetInFrames: mediaDisplayOffsetInFrames, displayDurationInFrames: mediaDisplayDurationInFrames, startMediaFrom: s.startMediaFrom, mediaFrameAtSequenceZero: s.mediaFrameAtSequenceZero, sequenceFrameOffset: sequenceFrameOffset, playbackRate: s.playbackRate, volume: s.volume, muted: s.muted, doesVolumeChange: s.doesVolumeChange, marginLeft: visibleLayout.media.left, loopDisplay: s.loopDisplay, frozenMediaFrame: s.frozenMediaFrame, extendLastFrame: extendVideoLastFrame })) : null, s.type === 'image' && visibleLayout.media ? (jsx_runtime_1.jsx("div", { style: mediaVisualizationStyle, children: jsx_runtime_1.jsx(TimelineImageInfo_1.TimelineImageInfo, { src: s.src, offsetInPixels: visibleLayout.media.offset }) })) : null, s.loopDisplay === undefined ? null : (jsx_runtime_1.jsx(LoopedTimelineIndicators_1.LoopedTimelineIndicator, { loops: s.loopDisplay.numberOfTimes, fullWidth: width, visibleOffset: visibleLayout.cropLeft, visibleWidth: visibleLayout.width }))] }));
     return previewConnected || window.remotion_isReadOnlyStudio ? (jsx_runtime_1.jsx(ContextMenu_1.ContextMenu, { getItems: getContextMenuItems, children: sequence })) : (sequence);
 };
 exports.TimelineSequence = react_1.default.memo(TimelineSequenceFn);