@remotion/studio 4.0.508 → 4.0.510

package/dist/components/Timeline/TimelineClipboardKeybindings.js

@@ -21,6 +21,8 @@ const find_track_for_node_path_info_1 = require("./find-track-for-node-path-info
 const imperative_state_1 = require("./imperative-state");
 const keyframe_clipboard_1 = require("./keyframe-clipboard");
 const save_effect_prop_1 = require("./save-effect-prop");
+const save_sequence_prop_1 = require("./save-sequence-prop");
+const sequence_prop_clipboard_1 = require("./sequence-prop-clipboard");
 const TimelineSelection_1 = require("./TimelineSelection");
 const update_selected_easing_1 = require("./update-selected-easing");
 const makeClipboardText = (payload) => JSON.stringify(payload);
@@ -76,37 +78,6 @@ const getPasteEffectsTarget = (selectedItems) => {
     };
 };
 exports.getPasteEffectsTarget = getPasteEffectsTarget;
-const isClipboardInterpolationFunction = (value) => {
-    return (0, studio_shared_1.isKeyframeInterpolationFunction)(value);
-};
-const effectPropStatusToClipboardParam = (prop) => {
-    if (prop.status === 'computed') {
-        return null;
-    }
-    if (prop.status === 'static') {
-        if (prop.codeValue === undefined) {
-            return null;
-        }
-        return {
-            type: 'static',
-            value: prop.codeValue,
-        };
-    }
-    if (!isClipboardInterpolationFunction(prop.interpolationFunction)) {
-        return null;
-    }
-    return {
-        type: 'keyframed',
-        interpolationFunction: prop.interpolationFunction,
-        keyframes: prop.keyframes,
-        easing: prop.easing,
-        clamping: prop.clamping,
-        ...(prop.output === undefined || prop.output === 'linear'
-            ? {}
-            : { output: prop.output }),
-        ...(prop.posterize === undefined ? {} : { posterize: prop.posterize }),
-    };
-};
 const effectStatusToSnapshot = (effect) => {
     if (effect.importPath === null) {
         return null;
@@ -116,7 +87,7 @@ const effectStatusToSnapshot = (effect) => {
         if (prop.status === 'static' && prop.codeValue === undefined) {
             continue;
         }
-        const param = effectPropStatusToClipboardParam(prop);
+        const param = (0, sequence_prop_clipboard_1.propStatusToClipboardParam)(prop);
         if (param === null) {
             return null;
         }
@@ -251,7 +222,7 @@ const getEffectPropClipboardDataFromSelection = ({ selection, propStatuses, }) =
     if (!prop) {
         return null;
     }
-    const param = effectPropStatusToClipboardParam(prop);
+    const param = (0, sequence_prop_clipboard_1.propStatusToClipboardParam)(prop);
     if (param === null) {
         return null;
     }
@@ -397,7 +368,7 @@ const TimelineClipboardKeybindings = () => {
             event: 'keydown',
             key: 'c',
             callback: (e) => {
-                var _a;
+                var _a, _b;
                 const { selectedItems } = currentSelection.current;
                 const propStatuses = propStatusesRef.current;
                 const sequences = sequencesRef.current;
@@ -456,10 +427,37 @@ const TimelineClipboardKeybindings = () => {
                     });
                     return;
                 }
+                if (selectedItems.some((selection) => selection.type === 'sequence-prop')) {
+                    e.preventDefault();
+                    if (selectedItems.length !== 1 ||
+                        ((_a = selectedItems[0]) === null || _a === void 0 ? void 0 : _a.type) !== 'sequence-prop') {
+                        (0, NotificationCenter_1.showNotification)('Select one property to copy its value', 3000);
+                        return;
+                    }
+                    const payload = (0, sequence_prop_clipboard_1.getSequencePropClipboardDataFromSelection)({
+                        selection: selectedItems[0],
+                        propStatuses,
+                        sequences,
+                        overrideIdsToNodePaths: overrideIdToNodePathMappings,
+                    });
+                    if (payload === null) {
+                        (0, NotificationCenter_1.showNotification)('Cannot copy property because its value cannot be copied', 3000);
+                        return;
+                    }
+                    navigator.clipboard
+                        .writeText(makeClipboardText(payload))
+                        .then(() => {
+                        (0, NotificationCenter_1.showNotification)('Copied property value', 1000);
+                    })
+                        .catch((err) => {
+                        (0, NotificationCenter_1.showNotification)(`Could not copy property: ${err.message}`, 2000);
+                    });
+                    return;
+                }
                 if (selectedItems.some((selection) => selection.type === 'sequence-effect-prop')) {
                     e.preventDefault();
                     if (selectedItems.length !== 1 ||
-                        ((_a = selectedItems[0]) === null || _a === void 0 ? void 0 : _a.type) !== 'sequence-effect-prop') {
+                        ((_b = selectedItems[0]) === null || _b === void 0 ? void 0 : _b.type) !== 'sequence-effect-prop') {
                         (0, NotificationCenter_1.showNotification)('Select one effect prop to copy its value', 3000);
                         return;
                     }
@@ -732,6 +730,72 @@ const TimelineClipboardKeybindings = () => {
                         (0, NotificationCenter_1.showNotification)(`Could not paste easing: ${err.message}`, 3000);
                     });
                 }
+                const sequencePropResult = (0, studio_shared_1.parseSequencePropClipboardDataResult)(text);
+                if (sequencePropResult.status !== 'invalid') {
+                    e.preventDefault();
+                    if (sequencePropResult.status === 'unsupported-version') {
+                        (0, NotificationCenter_1.showNotification)('Cannot paste property copied from a different Remotion Studio version', 4000);
+                        return;
+                    }
+                    const sequencePropTarget = (0, sequence_prop_clipboard_1.getPasteSequencePropTarget)({
+                        selectedItems,
+                        payload: sequencePropResult.data,
+                        propStatuses,
+                        sequences,
+                        overrideIdsToNodePaths: overrideIdToNodePathMappings,
+                    });
+                    if (sequencePropTarget.type !== 'valid') {
+                        switch (sequencePropTarget.type) {
+                            case 'none':
+                                (0, NotificationCenter_1.showNotification)('Select a property or sequence to paste onto', 3000);
+                                return;
+                            case 'prop-mismatch':
+                                (0, NotificationCenter_1.showNotification)('Select the same property to paste this value', 3000);
+                                return;
+                            case 'uncopyable':
+                                (0, NotificationCenter_1.showNotification)('Cannot paste onto a property that cannot be updated', 3000);
+                                return;
+                            case 'incompatible':
+                                (0, NotificationCenter_1.showNotification)('The copied value is not compatible with this property', 3000);
+                                return;
+                            default:
+                                throw new Error(`Unexpected paste target: ${sequencePropTarget}`);
+                        }
+                    }
+                    const { param } = sequencePropResult.data;
+                    return (0, save_sequence_prop_1.saveSequenceProps)({
+                        changes: sequencePropTarget.targets.map((pasteTarget) => ({
+                            fileName: pasteTarget.fileName,
+                            nodePath: pasteTarget.nodePath,
+                            fieldKey: pasteTarget.fieldKey,
+                            value: param.type === 'static' ? param.value : undefined,
+                            defaultValue: pasteTarget.defaultValue,
+                            schema: pasteTarget.schema,
+                            ...(param.type === 'keyframed'
+                                ? {
+                                    sourceEdit: {
+                                        type: 'clipboard-param',
+                                        param,
+                                    },
+                                }
+                                : {}),
+                        })),
+                        addedKeyframes: null,
+                        movedKeyframes: null,
+                        setPropStatuses,
+                        clientId,
+                        undoLabel: sequencePropTarget.targets.length > 1
+                            ? 'Paste property onto selected sequences'
+                            : 'Paste property',
+                        redoLabel: sequencePropTarget.targets.length > 1
+                            ? 'Reapply property paste onto selected sequences'
+                            : 'Reapply property paste',
+                    }).then(() => {
+                        (0, NotificationCenter_1.showNotification)(sequencePropTarget.targets.length > 1
+                            ? 'Pasted property onto selected sequences'
+                            : 'Pasted property', 2000);
+                    });
+                }
                 const effectPropResult = (0, studio_shared_1.parseEffectPropClipboardDataResult)(text);
                 if (effectPropResult.status !== 'invalid') {
                     e.preventDefault();

package/dist/components/Timeline/TimelineColorField.js

@@ -42,16 +42,11 @@ const TimelineColorField = ({ field, effectiveValue, propStatus, onSave, onDragV
         }
         onDragEnd();
     }, [onSave, onDragEnd, propStatus]);
-    const swatchStyle = (0, react_1.useMemo)(() => {
-        return {
-            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 }) }));
+    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 }) }));
 };
 exports.TimelineColorField = TimelineColorField;

package/dist/components/Timeline/TimelineDragHandler.js

@@ -274,9 +274,9 @@ const TimelineDragHandlerInner = () => {
         if (!dragging.dragging) {
             return;
         }
-        return (0, pointer_session_1.startPointerSession)({
+        return (0, pointer_session_1.startCapturedPointerSession)({
             event: dragging,
-            target: dragging.target,
+            captureTarget: dragging.target,
             onMove: onPointerMoveScrubbing,
             onEnd: (reason, endEvent) => {
                 if ((reason === 'pointerup' || reason === 'buttons-released') &&

package/dist/components/Timeline/TimelineEffectItem.js

@@ -321,7 +321,7 @@ const TimelineEffectItem = ({ label, nodePathInfo, effectIndex, effectSchema, do
             ...(dropIndicator === 'before' ? { top: -1 } : { bottom: -1 }),
         };
     }, [dropIndicator]);
-    const row = (jsx_runtime_1.jsx(TimelineRowChrome_1.TimelineRowChrome, { depth: rowDepth, eye: canToggle ? (jsx_runtime_1.jsx(TimelineLayerEye_1.TimelineLayerEye, { type: "effect", hidden: isDisabled, onInvoked: onToggle })) : (jsx_runtime_1.jsx(TimelineLayerEye_1.TimelineLayerEyeSpacer, {})), arrow: jsx_runtime_1.jsx(TimelineExpandArrowButton_1.TimelineExpandArrowButton, { isExpanded: isExpanded, onClick: () => toggleTrack(nodePathInfo), label: `${label} section`, disabled: false }), style: rowStyle, selected: selection.selected, selectable: selection.selectable, selectionItem: selection.selectionItem, onSelect: selection.onSelect, showSelectedBackground: true, containsSelection: containsSelection, outerHeight: null, children: jsx_runtime_1.jsx("span", { title: label, style: labelStyle, children: label }) }));
+    const row = (jsx_runtime_1.jsx(TimelineRowChrome_1.TimelineRowChrome, { depth: rowDepth, eye: canToggle ? (jsx_runtime_1.jsx(TimelineLayerEye_1.TimelineLayerEye, { type: "effect", hidden: isDisabled, onInvoked: onToggle })) : (jsx_runtime_1.jsx(TimelineLayerEye_1.TimelineLayerEyeSpacer, {})), arrow: jsx_runtime_1.jsx(TimelineExpandArrowButton_1.TimelineExpandArrowButton, { isExpanded: isExpanded, onClick: () => toggleTrack(nodePathInfo), label: `${label} section`, disabled: false }), style: rowStyle, selected: selection.selected, selectable: selection.selectable, selectionItem: selection.selectionItem, onSelect: selection.onSelect, showSelectedBackground: true, containsSelection: containsSelection, isFieldRow: false, outerHeight: null, children: jsx_runtime_1.jsx("span", { title: label, style: labelStyle, children: label }) }));
     const draggableRow = canReorder ? (jsx_runtime_1.jsxs("div", { draggable: true, onDragStart: onDragStart, onDragEnd: onDragEnd, onDragOver: onDragOver, onDragLeave: onDragLeave, onDrop: onDrop, style: reorderWrapper, children: [reorderLineStyle ? jsx_runtime_1.jsx("div", { style: reorderLineStyle }) : null, row] })) : (row);
     return previewConnected ? (jsx_runtime_1.jsx(ContextMenu_1.ContextMenu, { getItems: getContextMenuItems, children: draggableRow })) : (draggableRow);
 };

package/dist/components/Timeline/TimelineEffectPropItem.js

@@ -63,11 +63,18 @@ const TimelineEffectPropValue = ({ field, nodePath, validatedLocation, sourceFra
                 status: propStatus,
                 frame: sourceFrame,
                 value,
+                defaultEasing: (0, studio_shared_1.isSchemaFieldHoldOnly)({
+                    schema: field.effectSchema,
+                    key: field.key,
+                })
+                    ? { type: 'step1' }
+                    : undefined,
             })
             : remotion_1.Internals.makeStaticDragOverride(value);
         setEffectDragOverrides(nodePath, field.effectIndex, field.key, nextDragOverrideValue);
     }, [
         field.effectIndex,
+        field.effectSchema,
         field.key,
         nodePath,
         propStatus,
@@ -326,7 +333,7 @@ const TimelineEffectPropItem = ({ field, validatedLocation, rowDepth, nodePath,
             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(TimelineEffectPropValueAtCurrentFrame, { field: field, nodePath: nodePath, validatedLocation: validatedLocation, keyframeDisplayOffset: keyframeDisplayOffset }) }) }));
+    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, isFieldRow: true, outerHeight: null, children: jsx_runtime_1.jsx(TimelineFieldRowContent_1.TimelineFieldRowContent, { field: field, rowDepth: rowDepth, selected: selection.selected, keyframeControls: keyframeControls, children: jsx_runtime_1.jsx(TimelineEffectPropValueAtCurrentFrame, { field: field, nodePath: nodePath, validatedLocation: validatedLocation, keyframeDisplayOffset: keyframeDisplayOffset }) }) }));
     return jsx_runtime_1.jsx(ContextMenu_1.ContextMenu, { getItems: getContextMenuItems, children: row });
 };
 exports.TimelineEffectPropItem = TimelineEffectPropItem;

package/dist/components/Timeline/TimelineEnumField.js

@@ -4,9 +4,6 @@ exports.TimelineEnumField = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const ComboBox_1 = require("../NewComposition/ComboBox");
-const comboboxStyle = {
-    marginLeft: 8,
-};
 const TimelineEnumField = ({ field, propStatus, effectiveValue, onSave, onDragValueChange, onDragEnd, }) => {
     const { fieldSchema } = field;
     if (fieldSchema.type !== 'enum') {
@@ -37,6 +34,6 @@ const TimelineEnumField = ({ field, propStatus, effectiveValue, onSave, onDragVa
             disabled: false,
         }));
     }, [variantKeys, onSelect]);
-    return (jsx_runtime_1.jsx(ComboBox_1.Combobox, { size: "small", title: field.key, selectedId: current, values: items, style: comboboxStyle }));
+    return (jsx_runtime_1.jsx(ComboBox_1.Combobox, { size: "small", title: field.key, selectedId: current, values: items }));
 };
 exports.TimelineEnumField = TimelineEnumField;

package/dist/components/Timeline/TimelineExpandedRow.js

@@ -45,7 +45,7 @@ const TimelineExpandedRowInner = ({ node, depth, nestedDepth, rowDepthBase, getI
         const isExpanded = getIsExpanded(node.nodePathInfo);
         return (jsx_runtime_1.jsx(TimelineRowChrome_1.TimelineRowChrome, { depth: rowDepth, eye: jsx_runtime_1.jsx(TimelineLayerEye_1.TimelineLayerEyeSpacer, {}), arrow: jsx_runtime_1.jsx(TimelineExpandArrowButton_1.TimelineExpandArrowButton, { isExpanded: isExpanded, onClick: () => toggleTrack(node.nodePathInfo), label: `${node.label} section`, disabled: false }), style: {
                 height: timeline_layout_1.TREE_GROUP_ROW_HEIGHT,
-            }, selected: selection.selected, selectable: selection.selectable, selectionItem: selection.selectionItem, onSelect: selection.onSelect, showSelectedBackground: true, containsSelection: false, outerHeight: null, children: jsx_runtime_1.jsx("span", { style: labelStyle, children: node.label }) }));
+            }, selected: selection.selected, selectable: selection.selectable, selectionItem: selection.selectionItem, onSelect: selection.onSelect, showSelectedBackground: true, containsSelection: false, isFieldRow: false, outerHeight: null, children: jsx_runtime_1.jsx("span", { style: labelStyle, children: node.label }) }));
     }
     if (node.field) {
         if (node.field.kind === 'effect-field') {
@@ -58,6 +58,6 @@ const TimelineExpandedRowInner = ({ node, depth, nestedDepth, rowDepthBase, getI
     }
     return (jsx_runtime_1.jsx(TimelineRowChrome_1.TimelineRowChrome, { depth: rowDepth, eye: jsx_runtime_1.jsx(TimelineLayerEye_1.TimelineLayerEyeSpacer, {}), arrow: jsx_runtime_1.jsx(TimelineExpandArrowButton_1.TimelineExpandArrowSpacer, {}), style: {
             height: (0, timeline_layout_1.getTreeRowHeight)(node),
-        }, selected: selection.selected, selectable: selection.selectable, selectionItem: selection.selectionItem, onSelect: selection.onSelect, showSelectedBackground: true, containsSelection: false, outerHeight: null, children: jsx_runtime_1.jsx("span", { style: labelStyle, children: node.label }) }));
+        }, selected: selection.selected, selectable: selection.selectable, selectionItem: selection.selectionItem, onSelect: selection.onSelect, showSelectedBackground: true, containsSelection: false, isFieldRow: false, outerHeight: null, children: jsx_runtime_1.jsx("span", { style: labelStyle, children: node.label }) }));
 };
 exports.TimelineExpandedRow = react_1.default.memo(TimelineExpandedRowInner);

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

@@ -1,8 +1,9 @@
 import React from 'react';
-import type { SchemaFieldInfo } from '../../helpers/timeline-layout';
+import { type SchemaFieldInfo } from '../../helpers/timeline-layout';
 export declare const TimelineFieldRowContent: React.FC<{
     readonly field: SchemaFieldInfo;
     readonly rowDepth: number;
     readonly selected: boolean;
+    readonly keyframeControls: React.ReactNode;
     readonly children: React.ReactNode;
 }>;

package/dist/components/Timeline/TimelineFieldRowContent.js

@@ -3,21 +3,36 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.TimelineFieldRowContent = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
+const timeline_layout_1 = require("../../helpers/timeline-layout");
 const timeline_field_row_layout_1 = require("./timeline-field-row-layout");
 const TimelineFieldLabel_1 = require("./TimelineFieldLabel");
+const TimelineRowChrome_1 = require("./TimelineRowChrome");
+const TimelineRowLayoutContext_1 = require("./TimelineRowLayoutContext");
 const Transform3DModeContext_1 = require("./Transform3DModeContext");
-const TimelineFieldRowContent = ({ field, rowDepth, selected, children }) => {
+const stackedHeaderStyle = {
+    display: 'flex',
+    flex: `0 0 ${timeline_layout_1.SCHEMA_FIELD_ROW_HEIGHT}px`,
+    minWidth: 0,
+};
+const stackedLabelStyle = {
+    flex: 1,
+    minWidth: 0,
+};
+const TimelineFieldRowContent = ({ field, rowDepth, selected, keyframeControls, children }) => {
     var _a;
     const transform3DMode = (0, react_1.useContext)(Transform3DModeContext_1.Transform3DModeContext);
+    const { keyframeControlsPlacement } = (0, react_1.useContext)(TimelineRowLayoutContext_1.TimelineRowLayoutContext);
     const stacked = (0, timeline_field_row_layout_1.isTimelineFieldStacked)({ field, transform3DMode });
     const compactStacked = stacked && field.typeName !== 'text-content';
     const label = (jsx_runtime_1.jsx(TimelineFieldLabel_1.TimelineFieldLabel, { rowDepth: rowDepth, selected: selected, label: (_a = field.description) !== null && _a !== void 0 ? _a : field.key, stacked: stacked }));
     const value = (jsx_runtime_1.jsx("div", { style: compactStacked
             ? timeline_field_row_layout_1.timelineCompactStackedFieldValueColumnStyle
             : timeline_field_row_layout_1.timelineFieldValueColumnStyle, children: children }));
+    const controls = keyframeControlsPlacement === 'after-label' ? (jsx_runtime_1.jsx(TimelineRowChrome_1.TimelineRowKeyframeControlsColumn, { depth: rowDepth, children: keyframeControls })) : null;
     if (stacked) {
-        return (jsx_runtime_1.jsxs("div", { style: timeline_field_row_layout_1.timelineStackedFieldContentStyle, children: [label, value] }));
+        return (jsx_runtime_1.jsxs("div", { style: timeline_field_row_layout_1.timelineStackedFieldContentStyle, children: [controls ? (jsx_runtime_1.jsxs("div", { style: stackedHeaderStyle, children: [
+                        jsx_runtime_1.jsx("div", { style: stackedLabelStyle, children: label }), controls] })) : (label), value] }));
     }
-    return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [label, value] }));
+    return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [label, controls, value] }));
 };
 exports.TimelineFieldRowContent = TimelineFieldRowContent;

package/dist/components/Timeline/TimelineFontFamilyField.js

@@ -60,7 +60,6 @@ const systemFonts = [
     value: fontFamily,
 }));
 const triggerStyle = {
-    marginLeft: 8,
     padding: '3px 4px',
     display: 'inline-flex',
     alignItems: 'center',
@@ -508,7 +507,7 @@ const TimelineFontFamilyField = ({ field, propStatus, effectiveValue, onSave, on
                     jsx_runtime_1.jsx("div", { title: selected.label, style: { ...triggerLabel, ...selectedPreviewStyle }, children: selected.label }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.5 }), jsx_runtime_1.jsx(caret_1.CaretDown, { small: true })
                 ] }), saveError === null ? null : jsx_runtime_1.jsx("div", { style: errorText, children: saveError }), opened && size
                 ? react_dom_1.default.createPortal(jsx_runtime_1.jsx("div", { style: styles_1.fullScreenOverlay, onPointerDown: (event) => event.stopPropagation(), children: jsx_runtime_1.jsx("div", { style: styles_1.outerPortal, className: "css-reset", children: jsx_runtime_1.jsx(z_index_1.HigherZIndex, { onOutsideClick: hide, onEscape: hide, children: jsx_runtime_1.jsxs("div", { style: portalStyle({ size }), children: [
-                                    jsx_runtime_1.jsx("div", { style: { padding: 6 }, children: jsx_runtime_1.jsx("input", { ref: inputRef, value: query, onChange: (event) => setQuery(event.target.value), onKeyDown: onKeyDown, placeholder: "Search fonts", style: searchInput }) }), filteredOptions.length === 0 ? (jsx_runtime_1.jsx("div", { style: noResults, children: "No fonts found" })) : (jsx_runtime_1.jsxs("div", { ref: listRef, style: listStyle, onScroll: (event) => {
+                                    jsx_runtime_1.jsx("div", { style: { padding: 6 }, children: jsx_runtime_1.jsx("input", { ref: inputRef, value: query, onChange: (event) => setQuery(event.target.value), onKeyDown: onKeyDown, placeholder: "Search fonts", style: searchInput }) }), filteredOptions.length === 0 ? (jsx_runtime_1.jsx("div", { style: noResults, children: "No fonts found" })) : (jsx_runtime_1.jsxs("div", { ref: listRef, style: listStyle, className: is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME, onScroll: (event) => {
                                             setScrollTop(event.currentTarget.scrollTop);
                                         }, children: [
                                             jsx_runtime_1.jsx("div", { style: { height: visibleRange.start * ROW_HEIGHT } }), renderedOptions.map((option, index) => {

package/dist/components/Timeline/TimelineInOutDragHandler.js

@@ -275,9 +275,9 @@ const TimelineInOutDragHandlerInner = () => {
         if (inOutDragging.dragging === false) {
             return;
         }
-        return (0, pointer_session_1.startPointerSession)({
+        return (0, pointer_session_1.startCapturedPointerSession)({
             event: inOutDragging,
-            target: inOutDragging.target,
+            captureTarget: inOutDragging.target,
             onMove: onPointerMoveInOut,
             onEnd: (reason, endEvent) => {
                 if ((reason === 'pointerup' || reason === 'buttons-released') &&

package/dist/components/Timeline/TimelineKeyframeEasingLine.js

@@ -43,6 +43,7 @@ const colors_1 = require("../../helpers/colors");
 const get_left_of_timeline_slider_1 = require("../../helpers/get-left-of-timeline-slider");
 const timeline_layout_1 = require("../../helpers/timeline-layout");
 const ContextMenu_1 = require("../ContextMenu");
+const EasingEditorModal_1 = require("./EasingEditorModal");
 const TimelineSelection_1 = require("./TimelineSelection");
 const TimelineWidthProvider_1 = require("./TimelineWidthProvider");
 const update_selected_easing_1 = require("./update-selected-easing");
@@ -138,7 +139,7 @@ const TimelineKeyframeEasingLineInteraction = ({ fromFrame, toFrame, nodePathInf
                 id: 'linear',
                 keyHint: null,
                 label: 'Linear',
-                leftItem: null,
+                leftItem: (jsx_runtime_1.jsx(EasingEditorModal_1.EasingPresetPreview, { color: colors_1.LIGHT_TEXT, easing: studio_shared_1.LINEAR_KEYFRAME_EASING, height: 18, nonScalingStroke: true, strokeWidth: 5, width: 18 })),
                 disabled: previewServerState.type !== 'connected',
                 onClick: () => updateEasing(studio_shared_1.LINEAR_KEYFRAME_EASING),
                 quickSwitcherLabel: null,
@@ -150,7 +151,7 @@ const TimelineKeyframeEasingLineInteraction = ({ fromFrame, toFrame, nodePathInf
                 id: preset.id,
                 keyHint: null,
                 label: preset.label,
-                leftItem: null,
+                leftItem: (jsx_runtime_1.jsx(EasingEditorModal_1.EasingPresetPreview, { color: colors_1.LIGHT_TEXT, easing: preset.easing, height: 18, nonScalingStroke: true, strokeWidth: 5, width: 18 })),
                 disabled: previewServerState.type !== 'connected',
                 onClick: () => updateEasing(preset.easing),
                 quickSwitcherLabel: null,

package/dist/components/Timeline/TimelineLayerEye.js

@@ -58,9 +58,9 @@ const TimelineLayerEye = ({ onInvoked, hidden, type }) => {
         layerPointedDown = hidden ? 'enable' : 'disable';
         onInvoked(layerPointedDown);
         lastPaintedLayerEye = e.currentTarget;
-        stopLayerPointerSession = (0, pointer_session_1.startPointerSession)({
+        stopLayerPointerSession = (0, pointer_session_1.startCapturedPointerSession)({
             event: e,
-            target: e.currentTarget,
+            captureTarget: e.currentTarget,
             onMove: (moveEvent) => {
                 var _a, _b;
                 const pointedElement = (_a = document

package/dist/components/Timeline/TimelineNumberField.js

@@ -36,16 +36,18 @@ 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' ||
+        ('kind' in field && field.kind === 'effect-field');
     const formatter = (0, react_1.useCallback)((v) => {
         return (0, timeline_field_display_utils_1.formatTimelineFieldValueForDisplay)({
             fieldSchema: field.fieldSchema,
             value: v,
         });
     }, [field.fieldSchema]);
-    return (jsx_runtime_1.jsx(InputDragger_1.InputDragger, { type: "number", value: dragValue !== null && dragValue !== void 0 ? dragValue : effectiveValue, 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: 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'
             ? ((_a = field.fieldSchema.min) !== null && _a !== void 0 ? _a : -Infinity)
             : -Infinity, max: field.fieldSchema.type === 'number'
             ? ((_b = field.fieldSchema.max) !== null && _b !== void 0 ? _b : Infinity)
-            : Infinity, step: step, formatter: formatter, rightAlign: false }));
+            : Infinity, step: step, formatter: formatter, rightAlign: false, allowStepMismatch: allowStepMismatch }));
 };
 exports.TimelineNumberField = TimelineNumberField;

package/dist/components/Timeline/TimelineRotationField.js

@@ -52,7 +52,7 @@ const TimelineRotationField = ({ field, effectiveValue, propStatus, onSave, onDr
         step: configuredStep,
     }), [configuredStep]);
     const serializeValue = (0, react_1.useCallback)((value) => isCssRotation
-        ? (0, timeline_rotation_utils_1.serializeCssRotation)(value, decimalPlaces)
+        ? (0, timeline_rotation_utils_1.serializeCssRotation)(value, Math.max(6, decimalPlaces))
         : (0, timeline_field_utils_1.normalizeTimelineNumber)(value), [decimalPlaces, isCssRotation]);
     const serializeRotation = (0, react_1.useCallback)((rotation) => (0, timeline_rotation_utils_1.serializeCssRotationFromEuler)({
         rotation,
@@ -141,9 +141,9 @@ const TimelineRotationField = ({ field, effectiveValue, propStatus, onSave, onDr
         propStatus.codeValue,
         serializeRotation,
     ]);
-    const angleDragger = (jsx_runtime_1.jsx(InputDragger_1.InputDragger, { type: "number", value: dragValue !== null && dragValue !== void 0 ? dragValue : degrees, style: timeline_field_utils_1.draggerStyle, status: "ok", small: true, onValueChange: onValueChange, onValueChangeEnd: onValueChangeEnd, onTextChange: onTextChange, min: min, max: max, step: step, formatter: formatter, rightAlign: false, "aria-label": isCssRotation ? 'Rotation Z' : 'Rotation angle' }));
+    const angleDragger = (jsx_runtime_1.jsx(InputDragger_1.InputDragger, { type: "number", value: dragValue !== null && dragValue !== void 0 ? dragValue : degrees, buttonStyle: timeline_field_utils_1.leftAlignedDraggerStyle, style: timeline_field_utils_1.draggerStyle, status: "ok", small: true, onValueChange: onValueChange, onValueChangeEnd: onValueChangeEnd, onTextChange: onTextChange, min: min, max: max, step: step, formatter: formatter, rightAlign: false, allowStepMismatch: true, "aria-label": isCssRotation ? 'Rotation Z' : 'Rotation angle' }));
     if (show3D) {
-        return (jsx_runtime_1.jsx("span", { style: containerStyle, children: ROTATION_LABELS.map((rotationLabel, rotationIndex) => (jsx_runtime_1.jsx(InputDragger_1.InputDragger, { type: "number", value: (dragRotation !== null && dragRotation !== void 0 ? dragRotation : cssRotation)[rotationIndex], buttonStyle: compactDraggerStyle, status: "ok", small: true, onValueChange: (newValue) => onRotationValueChange(rotationIndex, newValue), onValueChangeEnd: (newValue) => onRotationValueChangeEnd(rotationIndex, newValue), onTextChange: (newValue) => onRotationTextChange(rotationIndex, newValue), min: -Infinity, max: Infinity, step: step, formatter: formatter, rightAlign: false, "aria-label": `Rotation ${rotationLabel}` }, rotationLabel))) }));
+        return (jsx_runtime_1.jsx("span", { style: containerStyle, children: ROTATION_LABELS.map((rotationLabel, rotationIndex) => (jsx_runtime_1.jsx(InputDragger_1.InputDragger, { type: "number", value: (dragRotation !== null && dragRotation !== void 0 ? dragRotation : cssRotation)[rotationIndex], buttonStyle: compactDraggerStyle, status: "ok", small: true, onValueChange: (newValue) => onRotationValueChange(rotationIndex, newValue), onValueChangeEnd: (newValue) => onRotationValueChangeEnd(rotationIndex, newValue), onTextChange: (newValue) => onRotationTextChange(rotationIndex, newValue), min: -Infinity, max: Infinity, step: step, formatter: formatter, rightAlign: false, allowStepMismatch: true, "aria-label": `Rotation ${rotationLabel}` }, rotationLabel))) }));
     }
     return angleDragger;
 };

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

@@ -1,6 +1,10 @@
 import React from 'react';
 import type { TimelineSelectionInteraction } from './TimelineSelection';
 import { type TimelineSelection } from './TimelineSelection';
+export declare const TimelineRowKeyframeControlsColumn: React.FC<{
+    readonly children: React.ReactNode;
+    readonly depth: number;
+}>;
 export declare const TimelineRowChrome: React.FC<{
     readonly depth: number;
     readonly eye: React.ReactNode;
@@ -15,6 +19,7 @@ export declare const TimelineRowChrome: React.FC<{
     readonly showSelectedBackground: boolean;
     readonly containsSelection: boolean;
     readonly hovered?: boolean;
+    readonly isFieldRow: boolean;
     readonly outerHeight: number | null;
     readonly onDragLeave?: (e: React.DragEvent<HTMLDivElement>) => void;
     readonly onDragOver?: (e: React.DragEvent<HTMLDivElement>) => void;

package/dist/components/Timeline/TimelineRowChrome.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.TimelineRowChrome = void 0;
+exports.TimelineRowChrome = exports.TimelineRowKeyframeControlsColumn = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const colors_1 = require("../../helpers/colors");
@@ -24,17 +24,22 @@ const keyframeControlsColumnBaseStyle = {
     flexShrink: 0,
     justifyContent: 'flex-start',
 };
-const TimelineRowChrome = ({ depth, eye, keyframeControls, arrow, children, style, selected, selectable, selectionItem, onSelect, showSelectedBackground, containsSelection, hovered = false, outerHeight, onDragLeave, onDragOver, onDrop, onDoubleClick, onPointerEnter, onPointerLeave, }) => {
-    const ref = (0, react_1.useRef)(null);
-    const { basePadding, keyframeControlsPadding, rowBorderRadius, rowHorizontalMargin, } = (0, react_1.useContext)(TimelineRowLayoutContext_1.TimelineRowLayoutContext);
-    const indentWidth = (0, timeline_row_layout_1.getTimelineRowIndentWidth)(depth);
-    (0, TimelineSelection_1.useTimelineFocusableItem)(selectionItem, ref);
-    const keyframeControlsColumnStyle = (0, react_1.useMemo)(() => ({
+const TimelineRowKeyframeControlsColumn = ({ children, depth }) => {
+    const { basePadding, keyframeControlsPadding } = (0, react_1.useContext)(TimelineRowLayoutContext_1.TimelineRowLayoutContext);
+    const style = (0, react_1.useMemo)(() => ({
         ...keyframeControlsColumnBaseStyle,
         boxSizing: keyframeControlsPadding === 0 ? undefined : 'border-box',
         paddingLeft: keyframeControlsPadding,
         width: (0, timeline_row_layout_1.getTimelineRowLeftChromeWidth)(depth, basePadding),
     }), [basePadding, depth, keyframeControlsPadding]);
+    return (jsx_runtime_1.jsx("div", { style: leftChromeStyle, children: jsx_runtime_1.jsx("div", { style: style, children: children }) }));
+};
+exports.TimelineRowKeyframeControlsColumn = TimelineRowKeyframeControlsColumn;
+const TimelineRowChrome = ({ depth, eye, keyframeControls, arrow, children, style, selected, selectable, selectionItem, onSelect, showSelectedBackground, containsSelection, hovered = false, isFieldRow, outerHeight, onDragLeave, onDragOver, onDrop, onDoubleClick, onPointerEnter, onPointerLeave, }) => {
+    const ref = (0, react_1.useRef)(null);
+    const { basePadding, keyframeControlsPlacement, rowBorderRadius, rowHorizontalMargin, } = (0, react_1.useContext)(TimelineRowLayoutContext_1.TimelineRowLayoutContext);
+    const indentWidth = (0, timeline_row_layout_1.getTimelineRowIndentWidth)(depth);
+    (0, TimelineSelection_1.useTimelineFocusableItem)(selectionItem, ref);
     const chromeColumnStyle = (0, react_1.useMemo)(() => ({
         alignItems: 'center',
         alignSelf: 'stretch',
@@ -87,8 +92,8 @@ const TimelineRowChrome = ({ depth, eye, keyframeControls, arrow, children, styl
             backgroundColor: highlightBackground,
         };
     }, [outerHeight, highlightBackground]);
-    const chrome = (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
-            jsx_runtime_1.jsx("div", { style: leftChromeStyle, children: keyframeControls ? (jsx_runtime_1.jsx("div", { style: keyframeControlsColumnStyle, children: keyframeControls })) : (jsx_runtime_1.jsxs("div", { style: chromeColumnStyle, children: [eye, indentWidth > 0 ? jsx_runtime_1.jsx(Padder_1.Padder, { depth: depth }) : null, arrow] })) }), children] }));
+    const shouldRenderLeftChrome = !isFieldRow || keyframeControlsPlacement === 'before-label';
+    const chrome = (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [shouldRenderLeftChrome ? (keyframeControls ? (jsx_runtime_1.jsx(exports.TimelineRowKeyframeControlsColumn, { depth: depth, children: keyframeControls })) : (jsx_runtime_1.jsx("div", { style: leftChromeStyle, children: jsx_runtime_1.jsxs("div", { style: chromeColumnStyle, children: [eye, indentWidth > 0 ? jsx_runtime_1.jsx(Padder_1.Padder, { depth: depth }) : null, arrow] }) }))) : null, children] }));
     if (outerStyle) {
         return (jsx_runtime_1.jsx("div", { ref: ref, style: outerStyle, onDragLeave: onDragLeave, onDragOver: onDragOver, onDrop: onDrop, onPointerDown: selectable ? onPointerDown : undefined, onContextMenu: selectable ? onContextMenu : undefined, onDoubleClick: onDoubleClick, onPointerEnter: onPointerEnter, onPointerLeave: onPointerLeave, children: jsx_runtime_1.jsx("div", { style: innerRowStyle, children: chrome }) }));
     }

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

@@ -2,6 +2,7 @@ type TimelineRowLayout = {
     readonly basePadding: number;
     readonly highlightSelectedLabel: boolean;
     readonly keyframeControlsPadding: number;
+    readonly keyframeControlsPlacement: 'before-label' | 'after-label';
     readonly rowBorderRadius: number;
     readonly rowHorizontalMargin: number;
 };

package/dist/components/Timeline/TimelineRowLayoutContext.js

@@ -2,18 +2,21 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TimelineRowLayoutContext = exports.INSPECTOR_TIMELINE_ROW_LAYOUT = void 0;
 const react_1 = require("react");
+const InspectorPanelLayout_1 = require("../InspectorPanelLayout");
 const timeline_row_layout_1 = require("./timeline-row-layout");
 exports.INSPECTOR_TIMELINE_ROW_LAYOUT = {
     basePadding: timeline_row_layout_1.INSPECTOR_ROW_BASE_PADDING,
     highlightSelectedLabel: false,
     keyframeControlsPadding: 0,
+    keyframeControlsPlacement: 'after-label',
     rowBorderRadius: 4,
-    rowHorizontalMargin: 4,
+    rowHorizontalMargin: InspectorPanelLayout_1.INSPECTOR_PANEL_HORIZONTAL_PADDING,
 };
 exports.TimelineRowLayoutContext = (0, react_1.createContext)({
     basePadding: timeline_row_layout_1.TIMELINE_ROW_BASE_PADDING,
     highlightSelectedLabel: true,
     keyframeControlsPadding: timeline_row_layout_1.TIMELINE_ROW_BASE_PADDING,
+    keyframeControlsPlacement: 'before-label',
     rowBorderRadius: 0,
     rowHorizontalMargin: 0,
 });

package/dist/components/Timeline/TimelineScaleField.js

@@ -15,11 +15,15 @@ const leftDraggerStyle = {
     paddingBottom: 2,
     paddingLeft: 0,
     paddingTop: 2,
+    textAlign: 'left',
+    width: 52,
 };
 const rightDraggerStyle = {
     paddingBottom: 2,
     paddingRight: 0,
     paddingTop: 2,
+    textAlign: 'left',
+    width: 52,
 };
 const containerStyle = {
     alignItems: 'center',

package/dist/components/Timeline/TimelineSelection.js

@@ -1013,9 +1013,9 @@ const useTimelineMarqueeSelection = () => {
         const onPointerMove = (moveEvent) => {
             updateSelection(moveEvent.clientX, moveEvent.clientY);
         };
-        (0, pointer_session_1.startPointerSession)({
+        (0, pointer_session_1.startCapturedPointerSession)({
             event,
-            target,
+            captureTarget: target,
             onMove: onPointerMove,
             onEnd: (reason, endEvent) => {
                 if ((reason === 'pointerup' || reason === 'buttons-released') &&