@remotion/studio 4.0.499 → 4.0.501

package/dist/components/Timeline/TimelineAssetField.js

@@ -1,45 +1,46 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.TimelineAssetField = exports.isStaticFileAssetValue = void 0;
+exports.TimelineAssetField = exports.toFileToken = exports.AssetSelectionContext = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const no_react_1 = require("remotion/no-react");
-const write_static_file_1 = require("../../api/write-static-file");
-const Checkmark_1 = require("../../icons/Checkmark");
-const import_assets_1 = require("../import-assets");
-const ComboBox_1 = require("../NewComposition/ComboBox");
-const NotificationCenter_1 = require("../Notifications/NotificationCenter");
-const use_static_files_1 = require("../use-static-files");
-const comboboxStyle = {
-    marginLeft: 8,
-    maxWidth: 180,
-};
-const remoteAssetStyle = {
-    display: 'inline-block',
-    marginLeft: 8,
-    maxWidth: 180,
-    overflow: 'hidden',
-    textOverflow: 'ellipsis',
-    verticalAlign: 'middle',
-    whiteSpace: 'nowrap',
+const pen_1 = require("../../icons/pen");
+const modals_1 = require("../../state/modals");
+const InlineAction_1 = require("../InlineAction");
+const common_1 = require("../InspectorPanel/common");
+const penIcon = {
+    display: 'block',
+    height: 14,
+    width: 14,
 };
+exports.AssetSelectionContext = (0, react_1.createContext)({
+    getSourceAction: () => null,
+    initialQuery: '',
+    sourceAction: null,
+});
 const toFileToken = (name) => {
     return `${no_react_1.NoReactInternals.FILE_TOKEN}${name
         .split('/')
         .map(encodeURIComponent)
         .join('/')}`;
 };
-const toStaticFileUrl = (fileToken) => {
-    return `${window.remotion_staticBase}/${fileToken.slice(no_react_1.NoReactInternals.FILE_TOKEN.length)}`;
-};
-const isStaticFileAssetValue = (value) => {
-    return (typeof value === 'string' && value.startsWith(no_react_1.NoReactInternals.FILE_TOKEN));
-};
-exports.isStaticFileAssetValue = isStaticFileAssetValue;
-const TimelineStaticFileAssetField = ({ propStatus, effectiveValue, onSave, onDragValueChange, onDragEnd, }) => {
-    const staticFiles = (0, use_static_files_1.useStaticFiles)();
-    const current = String(effectiveValue !== null && effectiveValue !== void 0 ? effectiveValue : '');
-    const onSelect = (0, react_1.useCallback)((sourceValue, previewValue) => {
+exports.toFileToken = toFileToken;
+const TimelineAssetField = ({ field, effectiveValue, propStatus, onSave, onDragValueChange, onDragEnd, }) => {
+    if (field.fieldSchema.type !== 'asset') {
+        throw new Error('TimelineAssetField rendered for non-asset field');
+    }
+    const { setSelectedModal } = (0, react_1.useContext)(modals_1.ModalsContext);
+    const { getSourceAction, initialQuery, sourceAction } = (0, react_1.useContext)(exports.AssetSelectionContext);
+    const inlineSourceAction = (0, react_1.useMemo)(() => {
+        if (field.key !== 'src') {
+            return null;
+        }
+        return typeof effectiveValue === 'string'
+            ? getSourceAction(effectiveValue)
+            : sourceAction;
+    }, [effectiveValue, field.key, getSourceAction, sourceAction]);
+    const onSelect = (0, react_1.useCallback)((assetName, previewValue) => {
+        const sourceValue = (0, exports.toFileToken)(assetName);
         if (sourceValue === propStatus.codeValue) {
             return;
         }
@@ -48,78 +49,30 @@ const TimelineStaticFileAssetField = ({ propStatus, effectiveValue, onSave, onDr
             onDragEnd();
         });
     }, [propStatus.codeValue, onDragValueChange, onSave, onDragEnd]);
-    const upload = (0, react_1.useCallback)(async () => {
-        const [file] = await (0, import_assets_1.pickFilesToImport)({ multiple: false });
-        if (!file) {
-            return;
-        }
-        const existing = staticFiles.find((candidate) => candidate.name === file.name);
-        if (existing && existing.sizeInBytes !== file.size) {
-            (0, NotificationCenter_1.showNotification)(`File with name ${file.name} already exists and is different`, 4000);
-            return;
-        }
-        try {
-            if (!existing) {
-                await (0, write_static_file_1.writeStaticFile)({
-                    contents: await file.arrayBuffer(),
-                    filePath: file.name,
-                });
-            }
-            const fileToken = toFileToken(file.name);
-            onSelect(fileToken, toStaticFileUrl(fileToken));
-            if (!existing) {
-                (0, NotificationCenter_1.showNotification)(`Created ${file.name} in public folder`, 3000);
-            }
-        }
-        catch (error) {
-            (0, NotificationCenter_1.showNotification)(`Could not upload asset: ${error instanceof Error ? error.message : String(error)}`, 4000);
-        }
-    }, [onSelect, staticFiles]);
-    const items = (0, react_1.useMemo)(() => {
-        const publicFileItems = staticFiles.map((file) => {
-            const fileToken = toFileToken(file.name);
-            return {
-                type: 'item',
-                id: fileToken,
-                value: fileToken,
-                label: file.name,
-                onClick: () => onSelect(fileToken, file.src),
-                keyHint: null,
-                leftItem: fileToken === current ? jsx_runtime_1.jsx(Checkmark_1.Checkmark, {}) : null,
-                subMenu: null,
-                quickSwitcherLabel: null,
-            };
+    const openAssetSelection = (0, react_1.useCallback)(() => {
+        setSelectedModal({
+            type: 'quick-switcher',
+            mode: 'assets',
+            invocationTimestamp: Date.now(),
+            assetSelection: {
+                initialQuery,
+                onSelected: (asset) => onSelect(asset.name, asset.src),
+            },
+            compositionSelection: null,
         });
-        return [
-            ...publicFileItems,
-            { type: 'divider', id: 'upload-asset-divider' },
-            {
-                type: 'item',
-                id: 'upload-asset',
-                value: 'upload-asset',
-                label: 'Upload…',
-                onClick: () => {
-                    upload().catch(() => undefined);
-                },
-                keyHint: null,
-                leftItem: null,
-                subMenu: null,
-                quickSwitcherLabel: null,
+    }, [initialQuery, onSelect, setSelectedModal]);
+    const action = (jsx_runtime_1.jsx(InlineAction_1.InlineAction, { onClick: openAssetSelection, disabled: window.remotion_isReadOnlyStudio, title: "Change source", renderAction: (color) => jsx_runtime_1.jsx(pen_1.PenIcon, { color: color, style: penIcon }) }));
+    if (inlineSourceAction === null) {
+        return action;
+    }
+    return (jsx_runtime_1.jsx(common_1.InspectorInlineAction, { ...inlineSourceAction, size: "compact", variant: {
+            type: 'segmented',
+            trailing: {
                 disabled: window.remotion_isReadOnlyStudio,
+                onClick: openAssetSelection,
+                renderIcon: (color) => jsx_runtime_1.jsx(pen_1.PenIcon, { color: color, style: penIcon }),
+                title: 'Change source',
             },
-        ];
-    }, [current, onSelect, staticFiles, upload]);
-    return (jsx_runtime_1.jsx(ComboBox_1.Combobox, { size: "small", title: current, selectedId: current, values: items, style: comboboxStyle }));
-};
-const TimelineAssetField = (props) => {
-    var _a;
-    if (props.field.fieldSchema.type !== 'asset') {
-        throw new Error('TimelineAssetField rendered for non-asset field');
-    }
-    if (!(0, exports.isStaticFileAssetValue)(props.effectiveValue)) {
-        const remote = String((_a = props.effectiveValue) !== null && _a !== void 0 ? _a : '');
-        return (jsx_runtime_1.jsx("span", { style: remoteAssetStyle, title: remote, children: remote }));
-    }
-    return jsx_runtime_1.jsx(TimelineStaticFileAssetField, { ...props });
+        } }));
 };
 exports.TimelineAssetField = TimelineAssetField;

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

@@ -14,16 +14,19 @@ export type PasteEffectsTarget = {
 } | {
     readonly type: 'unsupported';
 };
-export type PasteEffectPropTarget = {
-    readonly type: 'valid';
+type PasteEffectPropEditTarget = {
     readonly fileName: string;
     readonly nodePath: SequencePropsSubscriptionKey;
     readonly effectIndex: number;
     readonly fieldKey: string;
     readonly defaultValue: string | null;
     readonly schema: InteractivitySchema;
+};
+export type PasteEffectPropTarget = {
+    readonly type: 'valid';
+    readonly targets: PasteEffectPropEditTarget[];
 } | {
-    readonly type: 'none' | 'multiple' | 'unsupported' | 'effect-type-mismatch' | 'prop-mismatch' | 'uncopyable';
+    readonly type: 'none' | 'unsupported' | 'effect-type-mismatch' | 'prop-mismatch' | 'uncopyable';
 };
 export declare const getPasteEffectsTarget: (selectedItems: readonly TimelineSelection[]) => PasteEffectsTarget;
 export declare const getSnapshotsFromSelection: ({ selection, propStatuses, }: {
@@ -72,3 +75,4 @@ export declare const getPasteEffectPropTarget: ({ selectedItems, payload, propSt
     readonly overrideIdsToNodePaths: OverrideIdToNodePaths;
 }) => PasteEffectPropTarget;
 export declare const TimelineClipboardKeybindings: React.FC;
+export {};

package/dist/components/Timeline/TimelineClipboardKeybindings.js

@@ -285,18 +285,8 @@ const getEasingClipboardDataFromSelection = ({ selection, sequences, overrideIds
     };
 };
 exports.getEasingClipboardDataFromSelection = getEasingClipboardDataFromSelection;
-const getPasteEffectPropTarget = ({ selectedItems, payload, propStatuses, sequences, overrideIdsToNodePaths, }) => {
+const getPasteEffectPropTargetForSelection = ({ selection, payload, propStatuses, sequences, overrideIdsToNodePaths, }) => {
     var _a;
-    if (selectedItems.length === 0) {
-        return { type: 'none' };
-    }
-    if (selectedItems.length !== 1) {
-        return { type: 'multiple' };
-    }
-    const [selection] = selectedItems;
-    if (!selection) {
-        return { type: 'none' };
-    }
     if (selection.type !== 'sequence-effect-prop' &&
         selection.type !== 'sequence-effect') {
         return { type: 'none' };
@@ -348,12 +338,42 @@ const getPasteEffectPropTarget = ({ selectedItems, payload, propStatuses, sequen
     }
     return {
         type: 'valid',
-        fileName: selection.nodePathInfo.sequenceSubscriptionKey.absolutePath,
-        nodePath: selection.nodePathInfo.sequenceSubscriptionKey,
-        effectIndex: target.effectIndex,
-        fieldKey: target.fieldKey,
-        defaultValue: getDefaultValue(fieldSchema),
-        schema: effect.schema,
+        target: {
+            fileName: selection.nodePathInfo.sequenceSubscriptionKey.absolutePath,
+            nodePath: selection.nodePathInfo.sequenceSubscriptionKey,
+            effectIndex: target.effectIndex,
+            fieldKey: target.fieldKey,
+            defaultValue: getDefaultValue(fieldSchema),
+            schema: effect.schema,
+        },
+    };
+};
+const getPasteEffectPropTarget = ({ selectedItems, payload, propStatuses, sequences, overrideIdsToNodePaths, }) => {
+    if (selectedItems.length === 0) {
+        return { type: 'none' };
+    }
+    const targets = [];
+    for (const selection of selectedItems) {
+        const result = getPasteEffectPropTargetForSelection({
+            selection,
+            payload,
+            propStatuses,
+            sequences,
+            overrideIdsToNodePaths,
+        });
+        if (result.type !== 'valid') {
+            return result;
+        }
+        targets.push(result.target);
+    }
+    return {
+        type: 'valid',
+        targets: [
+            ...new Map(targets.map((target) => [
+                `${makeTargetKey(target.nodePath)}:${target.effectIndex}:${target.fieldKey}`,
+                target,
+            ])).values(),
+        ],
     };
 };
 exports.getPasteEffectPropTarget = getPasteEffectPropTarget;
@@ -730,11 +750,8 @@ const TimelineClipboardKeybindings = () => {
                     });
                     if (effectPropTarget.type !== 'valid') {
                         switch (effectPropTarget.type) {
-                            case 'multiple':
-                                (0, NotificationCenter_1.showNotification)('Select one target effect prop or effect to paste onto', 3000);
-                                return;
                             case 'none':
-                                (0, NotificationCenter_1.showNotification)('Select a matching effect prop or effect to paste onto', 3000);
+                                (0, NotificationCenter_1.showNotification)('Select matching effect props or effects to paste onto', 3000);
                                 return;
                             case 'unsupported':
                                 (0, NotificationCenter_1.showNotification)('This sequence does not support effects', 3000);
@@ -752,26 +769,36 @@ const TimelineClipboardKeybindings = () => {
                                 throw new Error(`Unexpected paste target: ${effectPropTarget}`);
                         }
                     }
-                    return (0, save_effect_prop_1.saveEffectProp)({
-                        fileName: effectPropTarget.fileName,
-                        nodePath: effectPropTarget.nodePath,
-                        effectIndex: effectPropTarget.effectIndex,
-                        fieldKey: effectPropTarget.fieldKey,
-                        ...(effectPropResult.data.param.type === 'static'
-                            ? {
-                                type: 'value',
-                                value: effectPropResult.data.param.value,
-                            }
-                            : {
-                                type: 'effect-param',
-                                effectParam: effectPropResult.data.param,
-                            }),
-                        defaultValue: effectPropTarget.defaultValue,
-                        schema: effectPropTarget.schema,
+                    return (0, save_effect_prop_1.saveMultipleEffectProps)({
+                        changes: effectPropTarget.targets.map((pasteTarget) => ({
+                            fileName: pasteTarget.fileName,
+                            nodePath: pasteTarget.nodePath,
+                            effectIndex: pasteTarget.effectIndex,
+                            fieldKey: pasteTarget.fieldKey,
+                            ...(effectPropResult.data.param.type === 'static'
+                                ? {
+                                    type: 'value',
+                                    value: effectPropResult.data.param.value,
+                                }
+                                : {
+                                    type: 'effect-param',
+                                    effectParam: effectPropResult.data.param,
+                                }),
+                            defaultValue: pasteTarget.defaultValue,
+                            schema: pasteTarget.schema,
+                        })),
                         setPropStatuses,
                         clientId,
+                        undoLabel: effectPropTarget.targets.length > 1
+                            ? 'Paste effect prop onto selected effects'
+                            : 'Paste effect prop',
+                        redoLabel: effectPropTarget.targets.length > 1
+                            ? 'Reapply effect prop paste onto selected effects'
+                            : 'Reapply effect prop paste',
                     }).then(() => {
-                        (0, NotificationCenter_1.showNotification)('Pasted effect prop', 2000);
+                        (0, NotificationCenter_1.showNotification)(effectPropTarget.targets.length > 1
+                            ? 'Pasted effect prop onto selected effects'
+                            : 'Pasted effect prop', 2000);
                     });
                 }
                 const result = envelope === null

package/dist/components/Timeline/TimelineColorField.js

@@ -12,8 +12,22 @@ const containerStyle = {
 };
 const SWATCH_WIDTH = 20;
 const SWATCH_HEIGHT = 15;
+const DEFAULT_SET_COLOR = '#808080';
+const noneLabelStyle = {
+    color: colors_1.LIGHT_TEXT,
+    fontSize: 12,
+};
+const setButtonStyle = {
+    background: 'none',
+    border: 'none',
+    color: colors_1.BLUE,
+    cursor: 'pointer',
+    fontSize: 12,
+    margin: 0,
+    padding: 0,
+};
 const TimelineColorField = ({ field, effectiveValue, propStatus, onSave, onDragValueChange, onDragEnd, }) => {
-    var _a;
+    var _a, _b;
     const currentValue = typeof effectiveValue === 'string'
         ? effectiveValue
         : field.fieldSchema.type === 'color'
@@ -33,6 +47,11 @@ const TimelineColorField = ({ field, effectiveValue, propStatus, onSave, onDragV
             marginLeft: 5,
         };
     }, []);
+    if (currentValue === 'none') {
+        return (jsx_runtime_1.jsxs("span", { style: containerStyle, children: [
+                jsx_runtime_1.jsx("span", { style: noneLabelStyle, children: "None" }), jsx_runtime_1.jsx("button", { type: "button", style: setButtonStyle, title: `Set ${(_b = field.description) !== null && _b !== void 0 ? _b : field.key} to gray`, onClick: () => onChangeComplete(DEFAULT_SET_COLOR), children: "Set" })
+            ] }));
+    }
     return (jsx_runtime_1.jsx("span", { style: containerStyle, children: jsx_runtime_1.jsx(ColorPicker_1.ColorPicker, { value: currentValue, status: "ok", onChange: onChange, onChangeComplete: onChangeComplete, width: SWATCH_WIDTH, height: SWATCH_HEIGHT, disabled: false, name: field.key, title: currentValue, style: swatchStyle }) }));
 };
 exports.TimelineColorField = TimelineColorField;

package/dist/components/Timeline/TimelineEffectPropItem.js

@@ -6,10 +6,10 @@ const studio_shared_1 = require("@remotion/studio-shared");
 const react_1 = require("react");
 const remotion_1 = require("remotion");
 const client_id_1 = require("../../helpers/client-id");
+const open_in_editor_1 = require("../../helpers/open-in-editor");
 const call_api_1 = require("../call-api");
 const ContextMenu_1 = require("../ContextMenu");
 const call_add_keyframe_1 = require("./call-add-keyframe");
-const get_animation_item_selection_for_frame_1 = require("./get-animation-item-selection-for-frame");
 const get_timeline_keyframes_1 = require("./get-timeline-keyframes");
 const save_effect_prop_1 = require("./save-effect-prop");
 const save_prop_queue_1 = require("./save-prop-queue");
@@ -21,7 +21,6 @@ const TimelineLayerEye_1 = require("./TimelineLayerEye");
 const TimelineRowChrome_1 = require("./TimelineRowChrome");
 const TimelineSchemaField_1 = require("./TimelineSchemaField");
 const TimelineSelection_1 = require("./TimelineSelection");
-const update_selected_easing_1 = require("./update-selected-easing");
 const fieldRowBase = {};
 const isKeyframedStatus = (status) => {
     return status.status === 'keyframed';
@@ -218,9 +217,6 @@ const TimelineEffectPropItem = ({ field, validatedLocation, rowDepth, nodePath,
     const { propStatuses } = (0, react_1.useContext)(remotion_1.Internals.VisualModePropStatusesContext);
     const { getEffectDragOverrides } = (0, react_1.useContext)(remotion_1.Internals.VisualModeDragOverridesContext);
     const selection = (0, TimelineSelection_1.useTimelineRowSelection)(nodePathInfo);
-    const { selectItems } = (0, TimelineSelection_1.useTimelineSelection)();
-    const setFrame = remotion_1.Internals.useTimelineSetFrame();
-    const videoConfig = (0, remotion_1.useVideoConfig)();
     const timelinePosition = remotion_1.Internals.Timeline.useTimelinePosition();
     const sourceFrame = timelinePosition - keyframeDisplayOffset;
     const style = (0, react_1.useMemo)(() => {
@@ -314,82 +310,17 @@ const TimelineEffectPropItem = ({ field, validatedLocation, rowDepth, nodePath,
             },
         ];
     }, [canShowReset, onReset]);
-    const seekToDisplayFrame = (0, react_1.useCallback)((frame) => {
-        setFrame((current) => {
-            const next = { ...current, [videoConfig.id]: frame };
-            remotion_1.Internals.persistCurrentFrame(next);
-            return next;
-        });
-    }, [setFrame, videoConfig.id]);
     const onPropertyDoubleClick = (0, react_1.useCallback)((event) => {
-        if (propStatus === null || propStatus.status === 'computed') {
-            return;
-        }
-        const keyframeSelection = {
-            type: 'keyframe',
-            nodePathInfo,
-            frame: sourceFrame + keyframeDisplayOffset,
-        };
-        if (propStatus.status === 'static') {
-            if (!keyframable || previewServerState.type !== 'connected') {
-                return;
-            }
-            const value = remotion_1.Internals.getEffectiveVisualModeValue({
-                propStatus,
-                dragOverrideValue,
-                frame: sourceFrame,
-                defaultValue: field.fieldSchema.default,
-                shouldResortToDefaultValueIfUndefined: true,
-            });
-            event.stopPropagation();
-            (0, call_add_keyframe_1.callAddEffectKeyframe)({
-                fileName: validatedLocation.source,
-                nodePath,
-                effectIndex: field.effectIndex,
-                fieldKey: field.key,
-                sourceFrame,
-                value,
-                schema: field.effectSchema,
-                setPropStatuses,
-                clientId: previewServerState.clientId,
-            }).catch(() => undefined);
-            selectItems([keyframeSelection], { reveal: true });
-            seekToDisplayFrame(keyframeSelection.frame);
-            return;
-        }
-        const targetSelection = (0, get_animation_item_selection_for_frame_1.getAnimationItemSelectionForSourceFrame)({
-            includeEasings: (0, update_selected_easing_1.canEditEasingForInterpolationFunction)(propStatus.interpolationFunction),
-            keyframeDisplayOffset,
-            keyframes: propStatus.keyframes,
-            nodePathInfo,
-            sourceFrame,
-        });
-        if (targetSelection === null) {
+        if (!window.remotion_editorName ||
+            previewServerState.type !== 'connected') {
             return;
         }
         event.stopPropagation();
-        selectItems([targetSelection], { reveal: true });
-        if (targetSelection.type === 'keyframe') {
-            seekToDisplayFrame(targetSelection.frame);
-        }
-    }, [
-        dragOverrideValue,
-        field.effectIndex,
-        field.effectSchema,
-        field.fieldSchema.default,
-        field.key,
-        keyframeDisplayOffset,
-        keyframable,
-        nodePath,
-        nodePathInfo,
-        previewServerState,
-        propStatus,
-        seekToDisplayFrame,
-        selectItems,
-        setPropStatuses,
-        sourceFrame,
-        validatedLocation.source,
-    ]);
+        (0, open_in_editor_1.openOriginalPositionInEditorAtProperty)({
+            originalPosition: validatedLocation,
+            property: field.key,
+        }).catch(() => undefined);
+    }, [field.key, previewServerState.type, validatedLocation]);
     const row = (jsx_runtime_1.jsx(TimelineRowChrome_1.TimelineRowChrome, { depth: rowDepth, eye: jsx_runtime_1.jsx(TimelineLayerEye_1.TimelineLayerEyeSpacer, {}), keyframeControls: keyframeControls, arrow: jsx_runtime_1.jsx(TimelineExpandArrowButton_1.TimelineExpandArrowSpacer, {}), style: style, selected: selection.selected, selectable: selection.selectable, selectionItem: selection.selectionItem, onSelect: selection.onSelect, onDoubleClick: onPropertyDoubleClick, showSelectedBackground: true, containsSelection: false, outerHeight: null, children: jsx_runtime_1.jsx(TimelineFieldRowContent_1.TimelineFieldRowContent, { field: field, rowDepth: rowDepth, selected: selection.selected, children: jsx_runtime_1.jsx(exports.TimelineEffectPropValue, { field: field, nodePath: nodePath, validatedLocation: validatedLocation, sourceFrame: sourceFrame }) }) }));
     return (jsx_runtime_1.jsx(ContextMenu_1.ContextMenu, { values: contextMenuValues, onOpen: selection.selectable ? selection.onSelect : null, children: row }));
 };

package/dist/components/Timeline/TimelineExpandedKeyframeRow.js

@@ -42,6 +42,13 @@ const TimelineKeyframeDiamond_1 = require("./TimelineKeyframeDiamond");
 const TimelineKeyframeEasingLine_1 = require("./TimelineKeyframeEasingLine");
 const TimelineSelection_1 = require("./TimelineSelection");
 const TimelineWidthProvider_1 = require("./TimelineWidthProvider");
+const rowClipper = {
+    marginLeft: -timeline_layout_1.TIMELINE_PADDING,
+    marginRight: -timeline_layout_1.TIMELINE_PADDING,
+    overflow: 'hidden',
+    paddingLeft: timeline_layout_1.TIMELINE_PADDING,
+    paddingRight: timeline_layout_1.TIMELINE_PADDING,
+};
 const row = {
     position: 'relative',
 };
@@ -54,7 +61,7 @@ const TimelineExpandedKeyframeRowUnmemoized = ({ height, keyframes, canEditEasin
     const easingSegments = canEditEasing
         ? (0, get_timeline_easing_segments_1.getTimelineEasingSegments)(keyframes)
         : [];
-    return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [showSeparator ? jsx_runtime_1.jsx("div", { style: rowSeparator }) : null, jsx_runtime_1.jsxs("div", { style: { ...row, height }, children: [rowHighlightBackground && timelineWidth !== null ? (jsx_runtime_1.jsx("div", { style: (0, TimelineSelection_1.getTimelineSelectedTrackHighlightStyle)(timelineWidth, rowHighlightBackground) })) : null, easingSegments.map((segment) => (jsx_runtime_1.jsx(TimelineKeyframeEasingLine_1.TimelineKeyframeEasingLine, { fromFrame: segment.fromFrame, toFrame: segment.toFrame, rowHeight: height, nodePathInfo: nodePathInfo, segmentIndex: segment.segmentIndex }, `${segment.segmentIndex}-${segment.fromFrame}-${segment.toFrame}`))), keyframes.map((keyframe) => (jsx_runtime_1.jsx(TimelineKeyframeDiamond_1.TimelineKeyframeDiamond, { frame: keyframe.frame, rowHeight: height, nodePathInfo: nodePathInfo }, keyframe.frame)))] })
+    return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [showSeparator ? jsx_runtime_1.jsx("div", { style: rowSeparator }) : null, jsx_runtime_1.jsx("div", { style: { ...rowClipper, height }, children: jsx_runtime_1.jsxs("div", { style: { ...row, height }, children: [rowHighlightBackground && timelineWidth !== null ? (jsx_runtime_1.jsx("div", { style: (0, TimelineSelection_1.getTimelineSelectedTrackHighlightStyle)(timelineWidth, rowHighlightBackground) })) : null, easingSegments.map((segment) => (jsx_runtime_1.jsx(TimelineKeyframeEasingLine_1.TimelineKeyframeEasingLine, { fromFrame: segment.fromFrame, toFrame: segment.toFrame, rowHeight: height, nodePathInfo: nodePathInfo, segmentIndex: segment.segmentIndex }, `${segment.segmentIndex}-${segment.fromFrame}-${segment.toFrame}`))), keyframes.map((keyframe) => (jsx_runtime_1.jsx(TimelineKeyframeDiamond_1.TimelineKeyframeDiamond, { frame: keyframe.frame, rowHeight: height, nodePathInfo: nodePathInfo }, keyframe.frame)))] }) })
         ] }));
 };
 exports.TimelineExpandedKeyframeRow = react_1.default.memo(TimelineExpandedKeyframeRowUnmemoized);

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

@@ -1,7 +1,7 @@
 import React from 'react';
-import type { TrackWithHash } from '../../helpers/get-timeline-sequence-sort-key';
+import type { TimelineTrackData } from '../../helpers/get-timeline-sequence-sort-key';
 export declare const TimelineHeightContainer: React.NamedExoticComponent<{
-    readonly shown: TrackWithHash[];
+    readonly shown: TimelineTrackData[];
     readonly hasBeenCut: boolean;
     readonly children: React.ReactNode;
 }>;

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

@@ -1,7 +1,7 @@
 import React from 'react';
-import type { TrackWithHash } from '../../helpers/get-timeline-sequence-sort-key';
+import type { TimelineTrackData } from '../../helpers/get-timeline-sequence-sort-key';
 export declare const TimelineKeyframeTracksProvider: React.FC<{
-    readonly tracks: readonly TrackWithHash[];
+    readonly tracks: readonly TimelineTrackData[];
     readonly children: React.ReactNode;
 }>;
-export declare const useTimelineKeyframeTracks: () => readonly TrackWithHash[];
+export declare const useTimelineKeyframeTracks: () => readonly TimelineTrackData[];

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

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

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

@@ -1,9 +1,13 @@
 import React from 'react';
 import type { ArrayFieldSchema, CanUpdateSequencePropStatusStatic, SequencePropsSubscriptionKey, VisibleFieldSchema } from 'remotion';
 import type { SchemaFieldInfo, TimelineFieldOnDragValueChange, TimelineFieldOnSave } from '../../helpers/timeline-layout';
+type CaptionsFieldSchema = Extract<VisibleFieldSchema, {
+    type: 'remotion-captions';
+}>;
+type PrimitiveFieldSchema = Exclude<VisibleFieldSchema, ArrayFieldSchema | CaptionsFieldSchema>;
 export type TimelinePrimitiveFieldInfo = Omit<SchemaFieldInfo, 'fieldSchema' | 'typeName'> & {
-    readonly fieldSchema: Exclude<VisibleFieldSchema, ArrayFieldSchema>;
-    readonly typeName: Exclude<VisibleFieldSchema['type'], 'array'>;
+    readonly fieldSchema: PrimitiveFieldSchema;
+    readonly typeName: PrimitiveFieldSchema['type'];
 };
 export declare const isTimelinePrimitiveFieldInfo: (field: SchemaFieldInfo) => field is TimelinePrimitiveFieldInfo;
 export declare const TimelinePrimitiveFieldValue: React.FC<{
@@ -15,3 +19,4 @@ export declare const TimelinePrimitiveFieldValue: React.FC<{
     readonly effectiveValue: unknown;
     readonly scaleLockNodePath: SequencePropsSubscriptionKey | null;
 }>;
+export {};

package/dist/components/Timeline/TimelinePrimitiveFieldValue.js

@@ -17,8 +17,16 @@ const TimelineUvCoordinateField_1 = require("./TimelineUvCoordinateField");
 const inlineWrapper = {
     fontSize: 12,
 };
+const assetInlineWrapper = {
+    ...inlineWrapper,
+    display: 'flex',
+    flex: 1,
+    minWidth: 0,
+};
 const isTimelinePrimitiveFieldInfo = (field) => {
-    return field.typeName !== 'array' && field.fieldSchema.type !== 'array';
+    return (field.typeName !== 'array' &&
+        field.fieldSchema.type !== 'array' &&
+        field.fieldSchema.type !== 'remotion-captions');
 };
 exports.isTimelinePrimitiveFieldInfo = isTimelinePrimitiveFieldInfo;
 const TimelinePrimitiveFieldValue = ({ field, onSave, onDragValueChange, onDragEnd, propStatus, effectiveValue, scaleLockNodePath, }) => {
@@ -60,7 +68,7 @@ const TimelinePrimitiveFieldValue = ({ field, onSave, onDragValueChange, onDragE
         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 === 'asset') {
-        return (jsx_runtime_1.jsx("span", { style: inlineWrapper, children: jsx_runtime_1.jsx(TimelineAssetField_1.TimelineAssetField, { effectiveValue: effectiveValue, field: field, onDragEnd: onDragEnd, onDragValueChange: onDragValueChange, onSave: onSave, propStatus: propStatus }) }));
+        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 }) }));
     }
     throw new Error(`Unsupported field type: ${field.typeName}`);
 };

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

@@ -14,9 +14,12 @@ export declare const TimelineRowChrome: React.FC<{
     readonly onSelect: (interaction?: TimelineSelectionInteraction) => void;
     readonly showSelectedBackground: boolean;
     readonly containsSelection: boolean;
+    readonly hovered?: boolean;
     readonly outerHeight: number | null;
     readonly onDragLeave?: (e: React.DragEvent<HTMLDivElement>) => void;
     readonly onDragOver?: (e: React.DragEvent<HTMLDivElement>) => void;
     readonly onDrop?: (e: React.DragEvent<HTMLDivElement>) => void;
     readonly onDoubleClick?: (e: React.MouseEvent<HTMLDivElement>) => void;
+    readonly onPointerEnter?: () => void;
+    readonly onPointerLeave?: () => void;
 }>;