@remotion/studio 4.0.520 → 4.0.521

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/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,
@@ -369,27 +375,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] }) })
-                                            ] })
-                                    ] })) })
-                        ] }) }) })
+            }), (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, 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/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;
+}>;

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/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 }) }));
     }