@remotion/studio 4.0.520 → 4.0.522

package/dist/components/Splitter/SplitterElement.js

@@ -15,7 +15,9 @@ const SplitterElement = ({ children, type, sticky }) => {
             flex: 
             // Multiply by 1000 because if flex values don't add up to at least 1, they will not fill up the screen
             (type === 'flexer' ? context.flexValue : 1 - context.flexValue) * 1000,
-            display: 'flex',
+            display: context.collapsedDuringDrag === (type === 'flexer' ? 'left' : 'right')
+                ? 'none'
+                : 'flex',
             position: 'relative',
             overflow: 'hidden',
             flexDirection: 'column',
@@ -28,7 +30,14 @@ const SplitterElement = ({ children, type, sticky }) => {
                 ? (minSize !== null && minSize !== void 0 ? minSize : undefined)
                 : undefined,
         };
-    }, [context.flexValue, context.orientation, maxSize, minSize, type]);
+    }, [
+        context.collapsedDuringDrag,
+        context.flexValue,
+        context.orientation,
+        maxSize,
+        minSize,
+        type,
+    ]);
     const stickStyle = (0, react_1.useMemo)(() => {
         return {
             position: 'absolute',

package/dist/components/Splitter/SplitterHandle.d.ts

@@ -3,4 +3,5 @@ export declare const SPLITTER_HANDLE_SIZE = 3;
 export declare const SplitterHandle: React.FC<{
     readonly allowToCollapse: 'right' | 'left' | 'none';
     readonly onCollapse: () => void;
+    readonly onCollapseDuringDrag: ((side: 'left' | 'right' | null) => void) | null;
 }>;

package/dist/components/Splitter/SplitterHandle.js

@@ -2,7 +2,6 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.SplitterHandle = exports.SPLITTER_HANDLE_SIZE = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const player_1 = require("@remotion/player");
 const react_1 = require("react");
 const pointer_session_1 = require("../../helpers/pointer-session");
 const ForceSpecificCursor_1 = require("../ForceSpecificCursor");
@@ -11,10 +10,14 @@ exports.SPLITTER_HANDLE_SIZE = 3;
 const containerRow = {
     height: exports.SPLITTER_HANDLE_SIZE,
 };
+const collapsedContainer = {
+    width: 0,
+    height: 0,
+};
 const containerColumn = {
     width: exports.SPLITTER_HANDLE_SIZE,
 };
-const SplitterHandle = ({ allowToCollapse, onCollapse }) => {
+const SplitterHandle = ({ allowToCollapse, onCollapse, onCollapseDuringDrag }) => {
     const context = (0, react_1.useContext)(SplitterContext_1.SplitterContext);
     if (!context) {
         throw new Error('Cannot find splitter context');
@@ -22,8 +25,13 @@ const SplitterHandle = ({ allowToCollapse, onCollapse }) => {
     const ref = (0, react_1.useRef)(null);
     // Keep the latest props/context readable inside the long-lived pointerdown
     // listener without re-subscribing it on every render.
-    const latest = (0, react_1.useRef)({ context, allowToCollapse, onCollapse });
-    latest.current = { context, allowToCollapse, onCollapse };
+    const latest = (0, react_1.useRef)({
+        context,
+        allowToCollapse,
+        onCollapse,
+        onCollapseDuringDrag,
+    });
+    latest.current = { context, allowToCollapse, onCollapse, onCollapseDuringDrag };
     (0, react_1.useEffect)(() => {
         const { current } = ref;
         if (!current) {
@@ -75,41 +83,59 @@ const SplitterHandle = ({ allowToCollapse, onCollapse }) => {
                 }
                 return newFlex;
             };
+            const getCollapsedSide = (ev) => {
+                const collapse = latest.current.allowToCollapse;
+                const unclamped = getNewValue(ev, false);
+                if (collapse === 'left' && unclamped < dragContext.minFlex / 2) {
+                    return 'left';
+                }
+                if (collapse === 'right' &&
+                    1 - unclamped < (1 - dragContext.maxFlex) / 2) {
+                    return 'right';
+                }
+                return null;
+            };
+            let lastFlex = startFlex;
+            let lastCollapsedSide = null;
             const onPointerMove = (ev) => {
+                var _a, _b;
                 if (!dragContext.isDragging.current) {
                     return;
                 }
-                dragContext.setFlexValue(getNewValue(ev, true));
-                const collapse = latest.current.allowToCollapse;
-                if (collapse === 'left') {
-                    const unclamped = getNewValue(ev, false);
-                    if (unclamped < dragContext.minFlex / 2) {
-                        endDrag === null || endDrag === void 0 ? void 0 : endDrag();
-                        latest.current.onCollapse();
-                    }
-                }
-                else if (collapse === 'right') {
-                    const unclamped = 1 - getNewValue(ev, false);
-                    if (unclamped < (1 - dragContext.maxFlex) / 2) {
-                        endDrag === null || endDrag === void 0 ? void 0 : endDrag();
-                        latest.current.onCollapse();
-                    }
-                }
+                // Keep the handle mounted and captured until release, even while
+                // the panel is hidden, so moving inward can restore it.
+                lastCollapsedSide = getCollapsedSide(ev);
+                lastFlex = getNewValue(ev, true);
+                (_b = (_a = latest.current).onCollapseDuringDrag) === null || _b === void 0 ? void 0 : _b.call(_a, lastCollapsedSide);
+                dragContext.setCollapsedDuringDrag(lastCollapsedSide);
+                dragContext.setFlexValue(lastFlex);
             };
             endDrag = (0, pointer_session_1.startCapturedPointerSession)({
                 event: e,
                 captureTarget: current,
                 onMove: onPointerMove,
                 onEnd: (reason, endEvent) => {
+                    var _a, _b;
                     if ((reason === 'pointerup' || reason === 'buttons-released') &&
-                        endEvent &&
-                        dragContext.isDragging.current) {
-                        dragContext.persistFlex(getNewValue(endEvent, true));
+                        endEvent) {
+                        lastFlex = getNewValue(endEvent, true);
+                        lastCollapsedSide = getCollapsedSide(endEvent);
+                    }
+                    // Capture loss and cancellation may have no usable coordinates.
+                    // Commit the last displayed state instead of resetting the panel.
+                    if (reason !== 'manual' && dragContext.isDragging.current) {
+                        const savedFlex = lastCollapsedSide === null ? lastFlex : startFlex;
+                        dragContext.setFlexValue(savedFlex);
+                        dragContext.persistFlex(savedFlex);
+                        if (lastCollapsedSide !== null) {
+                            latest.current.onCollapse();
+                        }
                     }
+                    (_b = (_a = latest.current).onCollapseDuringDrag) === null || _b === void 0 ? void 0 : _b.call(_a, null);
+                    dragContext.setCollapsedDuringDrag(null);
                     dragContext.isDragging.current = false;
                     (0, ForceSpecificCursor_1.stopForcingSpecificCursor)();
                     endDrag = null;
-                    player_1.PlayerInternals.updateAllElementsSizes();
                 },
             });
         };
@@ -124,6 +150,10 @@ const SplitterHandle = ({ allowToCollapse, onCollapse }) => {
             context.orientation === 'horizontal'
                 ? 'remotion-splitter-horizontal'
                 : 'remotion-splitter-vertical',
-        ].join(' '), style: context.orientation === 'horizontal' ? containerRow : containerColumn }));
+        ].join(' '), style: context.collapsedDuringDrag !== null
+            ? collapsedContainer
+            : context.orientation === 'horizontal'
+                ? containerRow
+                : containerColumn }));
 };
 exports.SplitterHandle = SplitterHandle;

package/dist/components/TimeValue.js

@@ -6,11 +6,13 @@ const player_1 = require("@remotion/player");
 const react_1 = require("react");
 const remotion_1 = require("remotion");
 const colors_1 = require("../helpers/colors");
+const hoverable_1 = require("../helpers/hoverable");
 const is_current_selected_still_1 = require("../helpers/is-current-selected-still");
 const use_keybinding_1 = require("../helpers/use-keybinding");
 const render_frame_1 = require("../state/render-frame");
 const layout_1 = require("./layout");
 const InputDragger_1 = require("./NewComposition/InputDragger");
+const TimelineTickFormatProvider_1 = require("./Timeline/TimelineTickFormatProvider");
 const TimelineZoomControls_1 = require("./Timeline/TimelineZoomControls");
 const text = {
     color: colors_1.WHITE,
@@ -22,7 +24,7 @@ const text = {
     width: '100%',
 };
 const currentTimeTypography = {
-    color: colors_1.WHITE,
+    color: colors_1.LIGHT_TEXT,
     display: 'inline-block',
     fontSize: 14,
     fontVariantNumeric: 'tabular-nums',
@@ -32,14 +34,34 @@ const currentTimeTypography = {
 };
 const currentTimeInputStyle = {
     ...currentTimeTypography,
-    padding: '4px 6px 4px 0',
+    padding: 0,
 };
-const currentTimeButtonStyle = {
-    paddingLeft: 0,
+const currentTimeStack = {
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'flex-start',
+    lineHeight: 1,
+    padding: '5px 7px 5px 1px',
     transform: 'translateY(-1px)',
 };
+const currentTimeButtonStyle = {
+    display: 'block',
+    padding: 0,
+    border: 'none',
+    lineHeight: '21px',
+    '--remotion-cli-internals-blue-hovered': colors_1.WHITE,
+};
 const currentTimeSubtitle = {
-    color: colors_1.LIGHT_TEXT,
+    ...(0, hoverable_1.hoverableStyle)({
+        idleBackground: colors_1.TRANSPARENT,
+        hoverBackground: colors_1.TRANSPARENT,
+        idleColor: colors_1.LIGHT_TEXT,
+        hoverColor: colors_1.WHITE,
+    }),
+    background: colors_1.TRANSPARENT,
+    border: 'none',
+    padding: 0,
+    cursor: 'default',
     display: 'block',
     fontFamily: 'monospace',
     fontSize: 10,
@@ -50,6 +72,10 @@ const currentTimeSubtitle = {
 };
 const TimeValue = () => {
     const frame = (0, remotion_1.useCurrentFrame)();
+    const { showFrames, setShowFrames } = (0, react_1.useContext)(TimelineTickFormatProvider_1.TimelineTickFormatContext);
+    const toggleTickFormat = (0, react_1.useCallback)(() => {
+        setShowFrames((previous) => !previous);
+    }, [setShowFrames]);
     const config = remotion_1.Internals.useUnsafeVideoConfig();
     const isStill = (0, is_current_selected_still_1.useIsStill)();
     const { seek, play, pause, toggle } = player_1.PlayerInternals.usePlayerMethods();
@@ -64,7 +90,6 @@ const TimeValue = () => {
     const formatter = (0, react_1.useCallback)((value) => {
         return config ? (0, render_frame_1.renderFrame)(Number(value), config.fps) : String(value);
     }, [config]);
-    const formatterSubtitle = (0, react_1.useCallback)((value) => String(value), []);
     (0, react_1.useImperativeHandle)(remotion_1.Internals.timeValueRef, () => ({
         goToFrame: () => {
             var _a;
@@ -99,7 +124,11 @@ const TimeValue = () => {
         return null;
     }
     return (jsx_runtime_1.jsxs("div", { style: text, children: [
-            jsx_runtime_1.jsx(InputDragger_1.InputDragger, { ref: ref, "aria-label": String(frame), value: frame, onTextChange: onTextChange, onValueChange: onValueChange, formatter: formatter, formatterStyle: currentTimeTypography, formatterSubtitle: formatterSubtitle, formatterSubtitleStyle: currentTimeSubtitle, buttonStyle: currentTimeButtonStyle, rightAlign: false, status: "ok", style: currentTimeInputStyle }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 2 }), jsx_runtime_1.jsx(layout_1.Flex, {}), jsx_runtime_1.jsx(TimelineZoomControls_1.TimelineZoomControls, { sliderMaxWidth: 80 }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.5 })
+            jsx_runtime_1.jsxs("div", { style: currentTimeStack, children: [
+                    jsx_runtime_1.jsx(InputDragger_1.InputDragger, { ref: ref, "aria-label": String(frame), value: frame, onTextChange: onTextChange, onValueChange: onValueChange, formatter: formatter, formatterStyle: currentTimeTypography, buttonStyle: currentTimeButtonStyle, rightAlign: false, status: "ok", style: currentTimeInputStyle }), jsx_runtime_1.jsx("button", { type: "button", className: `${hoverable_1.HOVERABLE_CLASS_NAME} ${hoverable_1.FOCUS_VISIBLE_ONLY_CLASS_NAME}`, style: currentTimeSubtitle, onClick: toggleTickFormat, "aria-label": "Show timeline ticks as frames", "aria-pressed": showFrames, title: showFrames
+                            ? 'Show timeline ticks as timecode'
+                            : 'Show timeline ticks as frames', children: frame })
+                ] }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 2 }), jsx_runtime_1.jsx(layout_1.Flex, {}), jsx_runtime_1.jsx(TimelineZoomControls_1.TimelineZoomControls, { sliderMaxWidth: 80 }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.5 })
         ] }));
 };
 exports.TimeValue = TimeValue;

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

@@ -1,9 +1,10 @@
 import { type FC } from 'react';
-import type { EffectDefinition, JsxComponentIdentity, InteractivitySchema } from 'remotion';
+import type { EffectDefinition, JsxComponentIdentity, InteractivitySchema, VideoConfigValues } from 'remotion';
 export declare const SubscribeToNodePaths: FC<{
     readonly overrideId: string;
     readonly componentIdentity: JsxComponentIdentity | null;
     readonly schema: InteractivitySchema;
     readonly getStack: () => string | null;
     readonly effects: readonly EffectDefinition<unknown>[];
+    readonly videoConfigValues: VideoConfigValues | null;
 }>;

package/dist/components/Timeline/SubscribeToNodePaths.js

@@ -5,7 +5,7 @@ const react_1 = require("react");
 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 SubscribeToNodePaths = ({ overrideId, componentIdentity, schema, getStack, effects, videoConfigValues, }) => {
     const { resolvedLocation, stack, preferMappedNodePath } = (0, use_resolved_stack_react_to_change_1.useResolveStackAndReactToChange)(getStack, overrideId);
     const effectSubscriptions = (0, react_1.useMemo)(() => {
         return effects
@@ -22,6 +22,7 @@ const SubscribeToNodePaths = ({ overrideId, componentIdentity, schema, getStack,
         originalLocation: resolvedLocation,
         preferMappedNodePath,
         stack,
+        videoConfigValues,
     });
     return null;
 };

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

@@ -1,2 +1,2 @@
 import React from 'react';
-export declare const Timeline: React.NamedExoticComponent<{}>;
+export declare const Timeline: React.FC;

package/dist/components/Timeline/Timeline.js

@@ -69,6 +69,7 @@ const TimelineHeightContainer_1 = require("./TimelineHeightContainer");
 const TimelineInOutDragHandler_1 = require("./TimelineInOutDragHandler");
 const TimelineInOutPointer_1 = require("./TimelineInOutPointer");
 const TimelineKeyframeTracksContext_1 = require("./TimelineKeyframeTracksContext");
+const TimelineLayerChildren_1 = require("./TimelineLayerChildren");
 const TimelineList_1 = require("./TimelineList");
 const TimelinePinchZoom_1 = require("./TimelinePinchZoom");
 const TimelinePlayCursorSyncer_1 = require("./TimelinePlayCursorSyncer");
@@ -76,6 +77,7 @@ const TimelineScrollable_1 = require("./TimelineScrollable");
 const TimelineSelection_1 = require("./TimelineSelection");
 const TimelineSequenceItem_1 = require("./TimelineSequenceItem");
 const TimelineSlider_1 = require("./TimelineSlider");
+const TimelineTickFormatProvider_1 = require("./TimelineTickFormatProvider");
 const TimelineTimeIndicators_1 = require("./TimelineTimeIndicators");
 const TimelineTracks_1 = require("./TimelineTracks");
 const TimelineVirtualization_1 = require("./TimelineVirtualization");
@@ -308,10 +310,11 @@ const TimelineInner = () => {
             return;
         }
         const matchesInsertedNodePath = (track) => track.nodePathInfo !== null &&
-            track.nodePathInfo.sequenceSubscriptionKey.absolutePath ===
-                pendingInsertedElementSelection.nodePath.absolutePath &&
-            JSON.stringify(track.nodePathInfo.sequenceSubscriptionKey.nodePath) ===
-                JSON.stringify(pendingInsertedElementSelection.nodePath.nodePath);
+            (pendingInsertedElementSelection.nodePath === null ||
+                (track.nodePathInfo.sequenceSubscriptionKey.absolutePath ===
+                    pendingInsertedElementSelection.nodePath.absolutePath &&
+                    JSON.stringify(track.nodePathInfo.sequenceSubscriptionKey.nodePath) ===
+                        JSON.stringify(pendingInsertedElementSelection.nodePath.nodePath)));
         if (((_a = pendingSelectionStart.current) === null || _a === void 0 ? void 0 : _a.selection) !==
             pendingInsertedElementSelection) {
             pendingSelectionStart.current = {
@@ -342,6 +345,9 @@ const TimelineInner = () => {
         }
         selectItems([{ type: 'sequence', nodePathInfo: insertedTrack.nodePathInfo }], { reveal: true });
         (0, inserted_element_selection_1.clearInsertedElementSelection)(pendingInsertedElementSelection);
+        if (pendingInsertedElementSelection.notification !== null) {
+            (0, NotificationCenter_1.showNotification)(pendingInsertedElementSelection.notification, 3000);
+        }
     }, [
         canvasContent,
         fastRefreshes,
@@ -350,9 +356,20 @@ const TimelineInner = () => {
         timeline,
     ]);
     const durationInFrames = (_a = videoConfig === null || videoConfig === void 0 ? void 0 : videoConfig.durationInFrames) !== null && _a !== void 0 ? _a : 0;
+    const { getDragOverrides } = (0, react_1.useContext)(remotion_1.Internals.VisualModeDragOverridesContext);
     const filtered = (0, react_1.useMemo)(() => {
-        return timeline.filter((t) => (0, should_show_track_in_timeline_1.shouldShowTrackInTimeline)(t, durationInFrames));
-    }, [durationInFrames, timeline]);
+        return timeline.filter((t) => {
+            // Moving outside the composition can reduce the displayed duration to
+            // zero. Keep the drag owner mounted until its pending edit is saved.
+            if (t.sequence.showInTimeline &&
+                t.nodePathInfo !== null &&
+                getDragOverrides(t.nodePathInfo.sequenceSubscriptionKey).from !==
+                    undefined) {
+                return true;
+            }
+            return (0, should_show_track_in_timeline_1.shouldShowTrackInTimeline)(t, durationInFrames);
+        });
+    }, [durationInFrames, getDragOverrides, 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)(() => {
@@ -369,27 +386,33 @@ const TimelineInner = () => {
             return true;
         });
     }, [filtered]);
+    const { visibleTracks, value: layerChildrenValue } = (0, TimelineLayerChildren_1.useTimelineLayerChildren)(collapsed, sequences, (canvasContent === null || canvasContent === void 0 ? void 0 : canvasContent.type) === 'composition' ? canvasContent.compositionId : null);
     const maxTimelineTracks = (0, studio_runtime_config_1.getStudioMaxTimelineTracks)();
     const shown = (0, react_1.useMemo)(() => {
-        return maxTimelineTracks !== null && collapsed.length > maxTimelineTracks
-            ? collapsed.slice(0, maxTimelineTracks)
-            : collapsed;
-    }, [collapsed, maxTimelineTracks]);
-    const hasBeenCut = collapsed.length > shown.length;
+        return maxTimelineTracks !== null &&
+            visibleTracks.length > maxTimelineTracks
+            ? visibleTracks.slice(0, maxTimelineTracks)
+            : visibleTracks;
+    }, [visibleTracks, maxTimelineTracks]);
+    const hasBeenCut = visibleTracks.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;
                 }
-                return (jsx_runtime_1.jsx(SubscribeToNodePaths_1.SubscribeToNodePaths, { overrideId: sequence.controls.overrideId, componentIdentity: sequence.controls.componentIdentity, schema: sequence.controls.schema, getStack: sequence.getStack, effects: sequence.effects }, sequence.id));
-            }), (0, interactivity_enabled_1.isStudioInteractivityEnabled)() ? jsx_runtime_1.jsx(SequencePropsObserver_1.SequencePropsObserver, {}) : null, jsx_runtime_1.jsx(TimelineKeyframeTracksContext_1.TimelineKeyframeTracksProvider, { tracks: filtered, children: jsx_runtime_1.jsx(TimelineSelection_1.TimelineSelectableItemsProvider, { timeline: shown, children: jsx_runtime_1.jsxs(TimelineVirtualization_1.TimelineVirtualizationProvider, { hasBeenCut: hasBeenCut, isStill: isStill, timeline: shown, children: [(0, interactivity_enabled_1.isStudioInteractivityEnabled)() ? (jsx_runtime_1.jsx(TimelineSelection_1.TimelineSelectAllKeybindings, { timeline: shown })) : null, jsx_runtime_1.jsx(TimelineHeightContainer_1.TimelineHeightContainer, { children: isStill ? (jsx_runtime_1.jsx(TimelineList_1.TimelineList, {})) : (jsx_runtime_1.jsxs(TimelineWidthProvider_1.TimelineWidthProvider, { children: [
-                                        jsx_runtime_1.jsx(TimelinePinchZoom_1.TimelinePinchZoom, {}), jsx_runtime_1.jsxs(SplitterContainer_1.SplitterContainer, { orientation: "vertical", defaultFlex: 0.2, id: "names-to-timeline", maxFlex: 0.5, minFlex: 0.15, maxFlexerSize: null, minFlexerSize: MIN_TIMELINE_LABELS_WIDTH, maxAntiFlexerSize: null, minAntiFlexerSize: null, children: [
-                                                jsx_runtime_1.jsx(SplitterElement_1.SplitterElement, { type: "flexer", sticky: jsx_runtime_1.jsx(TimelineTimeIndicators_1.TimelineTimePlaceholders, {}), children: jsx_runtime_1.jsx(TimelineList_1.TimelineList, {}) }), jsx_runtime_1.jsx(SplitterHandle_1.SplitterHandle, { onCollapse: noop, allowToCollapse: "none" }), jsx_runtime_1.jsx(SplitterElement_1.SplitterElement, { type: "anti-flexer", sticky: jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
-                                                            jsx_runtime_1.jsx(TimelineTimeIndicators_1.TimelineTimeIndicators, {}), jsx_runtime_1.jsx(TimelineSlider_1.TimelineSlider, {})
-                                                        ] }), children: jsx_runtime_1.jsxs(TimelineScrollable_1.TimelineScrollable, { children: [
-                                                            jsx_runtime_1.jsx(TimelineTracks_1.TimelineTracks, { hasBeenCut: hasBeenCut }), jsx_runtime_1.jsx(TimelinePlayCursorSyncer_1.TimelinePlayCursorSyncer, {}), jsx_runtime_1.jsx(TimelineInOutPointer_1.TimelineInOutPointer, {}), jsx_runtime_1.jsx(TimelineDragHandler_1.TimelineDragHandler, {}), (0, interactivity_enabled_1.isStudioInteractivityEnabled)() ? (jsx_runtime_1.jsx(TimelineInOutDragHandler_1.TimelineInOutDragHandler, {})) : null] }) })
-                                            ] })
-                                    ] })) })
-                        ] }) }) })
+                return (jsx_runtime_1.jsx(SubscribeToNodePaths_1.SubscribeToNodePaths, { overrideId: sequence.controls.overrideId, componentIdentity: sequence.controls.componentIdentity, schema: sequence.controls.schema, getStack: sequence.getStack, effects: sequence.effects, videoConfigValues: sequence.controls.videoConfigValues }, sequence.id));
+            }), (0, interactivity_enabled_1.isStudioInteractivityEnabled)() ? jsx_runtime_1.jsx(SequencePropsObserver_1.SequencePropsObserver, {}) : null, jsx_runtime_1.jsx(TimelineLayerChildren_1.TimelineLayerChildrenProvider, { value: layerChildrenValue, children: jsx_runtime_1.jsx(TimelineKeyframeTracksContext_1.TimelineKeyframeTracksProvider, { tracks: filtered, children: jsx_runtime_1.jsx(TimelineSelection_1.TimelineSelectableItemsProvider, { timeline: shown, children: jsx_runtime_1.jsxs(TimelineVirtualization_1.TimelineVirtualizationProvider, { hasBeenCut: hasBeenCut, isStill: isStill, timeline: shown, children: [(0, interactivity_enabled_1.isStudioInteractivityEnabled)() ? (jsx_runtime_1.jsx(TimelineSelection_1.TimelineSelectAllKeybindings, { timeline: shown })) : null, jsx_runtime_1.jsx(TimelineHeightContainer_1.TimelineHeightContainer, { children: isStill ? (jsx_runtime_1.jsx(TimelineList_1.TimelineList, {})) : (jsx_runtime_1.jsxs(TimelineWidthProvider_1.TimelineWidthProvider, { children: [
+                                            jsx_runtime_1.jsx(TimelinePinchZoom_1.TimelinePinchZoom, {}), jsx_runtime_1.jsxs(SplitterContainer_1.SplitterContainer, { orientation: "vertical", defaultFlex: 0.2, id: "names-to-timeline", maxFlex: 0.5, minFlex: 0.15, maxFlexerSize: null, minFlexerSize: MIN_TIMELINE_LABELS_WIDTH, maxAntiFlexerSize: null, minAntiFlexerSize: null, children: [
+                                                    jsx_runtime_1.jsx(SplitterElement_1.SplitterElement, { type: "flexer", sticky: jsx_runtime_1.jsx(TimelineTimeIndicators_1.TimelineTimePlaceholders, {}), children: jsx_runtime_1.jsx(TimelineList_1.TimelineList, {}) }), jsx_runtime_1.jsx(SplitterHandle_1.SplitterHandle, { onCollapse: noop, onCollapseDuringDrag: null, allowToCollapse: "none" }), jsx_runtime_1.jsx(SplitterElement_1.SplitterElement, { type: "anti-flexer", sticky: jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
+                                                                jsx_runtime_1.jsx(TimelineTimeIndicators_1.TimelineTimeIndicators, {}), jsx_runtime_1.jsx(TimelineSlider_1.TimelineSlider, {})
+                                                            ] }), children: jsx_runtime_1.jsxs(TimelineScrollable_1.TimelineScrollable, { children: [
+                                                                jsx_runtime_1.jsx(TimelineTracks_1.TimelineTracks, { hasBeenCut: hasBeenCut }), jsx_runtime_1.jsx(TimelinePlayCursorSyncer_1.TimelinePlayCursorSyncer, {}), jsx_runtime_1.jsx(TimelineInOutPointer_1.TimelineInOutPointer, {}), jsx_runtime_1.jsx(TimelineDragHandler_1.TimelineDragHandler, {}), (0, interactivity_enabled_1.isStudioInteractivityEnabled)() ? (jsx_runtime_1.jsx(TimelineInOutDragHandler_1.TimelineInOutDragHandler, {})) : null] }) })
+                                                ] })
+                                        ] })) })
+                            ] }) }) }) })
         ] }));
 };
-exports.Timeline = react_1.default.memo(TimelineInner);
+const MemoizedTimelineInner = react_1.default.memo(TimelineInner);
+const Timeline = () => {
+    return (jsx_runtime_1.jsx(TimelineTickFormatProvider_1.TimelineTickFormatProvider, { children: jsx_runtime_1.jsx(MemoizedTimelineInner, {}) }));
+};
+exports.Timeline = Timeline;

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

@@ -4,7 +4,6 @@ import type { SchemaFieldInfo, TimelineFieldOnDragValueChange, TimelineFieldOnSa
 import { type InspectorQuickActionProps } from '../InspectorPanel/common';
 export type InspectorSourceAction = InspectorQuickActionProps;
 type AssetSelectionContextValue = {
-    readonly initialQuery: string;
     readonly getSourceAction: (src: string) => InspectorSourceAction | null;
     readonly sourceAction: InspectorSourceAction | null;
 };

package/dist/components/Timeline/TimelineAssetField.js

@@ -32,9 +32,13 @@ const standaloneSourceActionStyle = {
     minWidth: 0,
     width: 'auto',
 };
+const assetTypeToAccept = {
+    audio: 'audio/*',
+    video: 'video/*',
+    image: 'image/*',
+};
 exports.AssetSelectionContext = (0, react_1.createContext)({
     getSourceAction: () => null,
-    initialQuery: '',
     sourceAction: null,
 });
 const toFileToken = (name) => {
@@ -50,14 +54,14 @@ const TimelineAssetField = ({ field, effectiveValue, propStatus, onSave, onDragV
     }
     const { setSelectedModal } = (0, react_1.useContext)(modals_1.SetSelectedModalContext);
     const staticFiles = (0, use_static_files_1.useStaticFiles)();
-    const { getSourceAction, initialQuery, sourceAction } = (0, react_1.useContext)(exports.AssetSelectionContext);
+    const { getSourceAction, sourceAction } = (0, react_1.useContext)(exports.AssetSelectionContext);
+    const { assetType } = field.fieldSchema;
+    const initialQuery = assetType ? `type:${assetType} ` : '';
     const inlineSourceAction = (0, react_1.useMemo)(() => {
-        if (field.key !== 'src') {
-            return null;
+        if (typeof effectiveValue === 'string') {
+            return getSourceAction(effectiveValue);
         }
-        return typeof effectiveValue === 'string'
-            ? getSourceAction(effectiveValue)
-            : sourceAction;
+        return field.key === 'src' ? sourceAction : null;
     }, [effectiveValue, field.key, getSourceAction, sourceAction]);
     const onSelect = (0, react_1.useCallback)((assetName, previewValue) => {
         const sourceValue = (0, exports.toFileToken)(assetName);
@@ -70,7 +74,10 @@ const TimelineAssetField = ({ field, effectiveValue, propStatus, onSave, onDragV
         });
     }, [propStatus.codeValue, onDragValueChange, onSave, onDragEnd]);
     const selectFile = (0, react_1.useCallback)(async () => {
-        const [file] = await (0, import_assets_1.pickFilesToImport)({ multiple: false });
+        const [file] = await (0, import_assets_1.pickFilesToImport)({
+            multiple: false,
+            accept: assetType ? assetTypeToAccept[assetType] : null,
+        });
         if (!file) {
             return;
         }
@@ -94,7 +101,7 @@ const TimelineAssetField = ({ field, effectiveValue, propStatus, onSave, onDragV
         catch (error) {
             (0, NotificationCenter_1.showNotification)(`Could not upload asset: ${error instanceof Error ? error.message : String(error)}`, 4000);
         }
-    }, [onSelect, staticFiles]);
+    }, [assetType, onSelect, staticFiles]);
     const openAssetSelection = (0, react_1.useCallback)(() => {
         setSelectedModal({
             type: 'quick-switcher',

package/dist/components/Timeline/TimelineCollapseToggle.js

@@ -10,7 +10,7 @@ const container = {
     alignItems: 'center',
 };
 const Icon = ({ color, ...props }) => {
-    return (jsx_runtime_1.jsx("svg", { viewBox: "0 0 8 10", ...props, style: { height: 10, width: 8 }, children: jsx_runtime_1.jsx("path", { d: "M 0 0 L 8 5 L 0 10 z", fill: color }) }));
+    return (jsx_runtime_1.jsx("svg", { viewBox: "0 0 8 10", ...props, style: { height: 8, width: 6.4 }, children: jsx_runtime_1.jsx("path", { d: "M 0 0 L 8 5 L 0 10 z", fill: color }) }));
 };
 const TimelineCollapseToggle = ({ collapsed, color }) => {
     return (jsx_runtime_1.jsx("div", { style: collapsed ? container : { ...container, transform: 'rotate(90deg)' }, children: jsx_runtime_1.jsx(Icon, { color: color }) }));

package/dist/components/Timeline/TimelineDragHandler.js

@@ -80,6 +80,7 @@ const TimelineDragHandler = () => {
     });
     const { zoom: zoomMap } = (0, react_1.useContext)(timeline_zoom_1.TimelineZoomCtx);
     const { canvasContent, currentAssetMetadata } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
+    const videoId = video === null || video === void 0 ? void 0 : video.id;
     const containerStyle = (0, react_1.useMemo)(() => {
         var _a;
         var _b, _c, _d, _e;
@@ -90,16 +91,20 @@ const TimelineDragHandler = () => {
         const zoom = (0, get_timeline_max_zoom_1.getTimelineZoom)({
             durationInFrames,
             timelineViewportWidth: (_d = (_c = timelineSize === null || timelineSize === void 0 ? void 0 : timelineSize.width) !== null && _c !== void 0 ? _c : (_a = timeline_refs_1.scrollableRef.current) === null || _a === void 0 ? void 0 : _a.clientWidth) !== null && _d !== void 0 ? _d : 0,
-            zoom: canvasContent.type === 'composition'
-                ? ((_e = zoomMap[canvasContent.compositionId]) !== null && _e !== void 0 ? _e : null)
-                : null,
+            zoom: videoId ? ((_e = zoomMap[videoId]) !== null && _e !== void 0 ? _e : null) : null,
         });
         return {
             ...container,
             width: (0, get_timeline_max_zoom_1.getTimelineWidth)({ durationInFrames, zoom }),
             height: TimelineTimeIndicators_1.TIMELINE_TIME_INDICATOR_HEIGHT,
         };
-    }, [canvasContent, timelineSize === null || timelineSize === void 0 ? void 0 : timelineSize.width, video === null || video === void 0 ? void 0 : video.durationInFrames, zoomMap]);
+    }, [
+        canvasContent,
+        timelineSize === null || timelineSize === void 0 ? void 0 : timelineSize.width,
+        video === null || video === void 0 ? void 0 : video.durationInFrames,
+        videoId,
+        zoomMap,
+    ]);
     const hasPlayableContent = (canvasContent === null || canvasContent === void 0 ? void 0 : canvasContent.type) === 'composition' ||
         ((canvasContent === null || canvasContent === void 0 ? void 0 : canvasContent.type) === 'asset' &&
             (currentAssetMetadata === null || currentAssetMetadata === void 0 ? void 0 : currentAssetMetadata.asset) === canvasContent.asset);

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

@@ -0,0 +1,11 @@
+import React from 'react';
+import type { CanUpdateSequencePropStatusStatic } from 'remotion';
+import type { SchemaFieldInfo, TimelineFieldOnDragValueChange, TimelineFieldOnSave } from '../../helpers/timeline-layout';
+export declare const TimelineFontWeightField: React.FC<{
+    readonly field: SchemaFieldInfo;
+    readonly propStatus: CanUpdateSequencePropStatusStatic;
+    readonly effectiveValue: unknown;
+    readonly onSave: TimelineFieldOnSave;
+    readonly onDragValueChange: TimelineFieldOnDragValueChange;
+    readonly onDragEnd: () => void;
+}>;

package/dist/components/Timeline/TimelineFontWeightField.js

@@ -0,0 +1,65 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TimelineFontWeightField = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const ComboBox_1 = require("../NewComposition/ComboBox");
+const RemInput_1 = require("../NewComposition/RemInput");
+const timeline_field_utils_1 = require("./timeline-field-utils");
+const TimelineNumberField_1 = require("./TimelineNumberField");
+const FONT_WEIGHT_KEYWORDS = ['normal', 'bold', 'bolder', 'lighter'];
+const TimelineFontWeightField = ({ field, propStatus, effectiveValue, onSave, onDragValueChange, onDragEnd, }) => {
+    var _a;
+    const { fieldSchema } = field;
+    if (fieldSchema.type !== 'font-weight') {
+        throw new Error('TimelineFontWeightField rendered for non-font-weight field');
+    }
+    const sourceValue = (_a = propStatus.codeValue) !== null && _a !== void 0 ? _a : fieldSchema.default;
+    const currentValue = effectiveValue !== null && effectiveValue !== void 0 ? effectiveValue : sourceValue;
+    const onSelectKeyword = (0, react_1.useCallback)((newValue) => {
+        if (newValue === propStatus.codeValue) {
+            return;
+        }
+        onDragValueChange(newValue);
+        onSave(newValue).finally(onDragEnd);
+    }, [onDragEnd, onDragValueChange, onSave, propStatus.codeValue]);
+    const keywordItems = (0, react_1.useMemo)(() => {
+        return FONT_WEIGHT_KEYWORDS.map((keyword) => ({
+            type: 'item',
+            id: keyword,
+            value: keyword,
+            label: keyword,
+            onClick: () => onSelectKeyword(keyword),
+            keyHint: null,
+            leftItem: null,
+            subMenu: null,
+            quickSwitcherLabel: null,
+            disabled: false,
+        }));
+    }, [onSelectKeyword]);
+    if (typeof sourceValue === 'number') {
+        return (jsx_runtime_1.jsx(TimelineNumberField_1.TimelineNumberField, { effectiveValue: currentValue, field: field, onDragEnd: onDragEnd, onDragValueChange: onDragValueChange, onSave: onSave, propStatus: propStatus }));
+    }
+    if (FONT_WEIGHT_KEYWORDS.includes(sourceValue)) {
+        return (jsx_runtime_1.jsx(ComboBox_1.Combobox, { size: "small", title: field.key, selectedId: String(currentValue), values: keywordItems }));
+    }
+    return (jsx_runtime_1.jsx(RemInput_1.RemotionInput, { status: "ok", rightAlign: false, small: true, defaultValue: String(currentValue !== null && currentValue !== void 0 ? currentValue : ''), onBlur: (event) => {
+            const newValue = event.currentTarget.value;
+            if (newValue === propStatus.codeValue) {
+                onDragEnd();
+                return;
+            }
+            onSave(newValue).finally(onDragEnd);
+        }, onChange: (event) => onDragValueChange(event.currentTarget.value), onDoubleClick: (event) => event.stopPropagation(), onKeyDown: (event) => {
+            var _a;
+            if (event.key === 'Enter') {
+                event.currentTarget.blur();
+            }
+            if (event.key === 'Escape') {
+                event.currentTarget.value = String((_a = propStatus.codeValue) !== null && _a !== void 0 ? _a : '');
+                onDragEnd();
+                event.currentTarget.blur();
+            }
+        }, style: { ...timeline_field_utils_1.draggerStyle, boxSizing: 'border-box' } }, String(sourceValue)));
+};
+exports.TimelineFontWeightField = TimelineFontWeightField;

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

@@ -0,0 +1,21 @@
+import React from 'react';
+import type { TSequence } from 'remotion';
+import type { TimelineTrackData } from '../../helpers/get-timeline-sequence-sort-key';
+export declare const TimelineLayerChildrenProvider: React.Provider<{
+    readonly collapsed: Record<string, boolean>;
+    readonly keys: Map<string, string>;
+    readonly parents: Set<string>;
+    readonly toggle: (key: string) => void;
+} | null>;
+export declare const useTimelineLayerChildren: (tracks: TimelineTrackData[], sequences: TSequence[], compositionId: string | null) => {
+    visibleTracks: TimelineTrackData[];
+    value: {
+        collapsed: Record<string, boolean>;
+        keys: Map<string, string>;
+        parents: Set<string>;
+        toggle: (key: string) => void;
+    };
+};
+export declare const TimelineLayerChildrenToggle: React.FC<{
+    readonly sequence: TSequence;
+}>;