@remotion/studio 4.0.509 → 4.0.511

package/dist/components/Canvas.js

@@ -723,7 +723,7 @@ const Canvas = ({ canvasContent, size }) => {
             return;
         }
         const metadata = studio_protocol_1.StudioProtocolInternals.getDragPreviewMetadata((_b = (_a = event.dataTransfer) === null || _a === void 0 ? void 0 : _a.types) !== null && _b !== void 0 ? _b : []);
-        if ((metadata === null || metadata === void 0 ? void 0 : metadata.type) !== 'composition' ||
+        if (((metadata === null || metadata === void 0 ? void 0 : metadata.type) !== 'composition' && (metadata === null || metadata === void 0 ? void 0 : metadata.type) !== 'element') ||
             metadata.width === undefined ||
             metadata.height === undefined) {
             setCompositionDropPreview(null);
@@ -734,7 +734,7 @@ const Canvas = ({ canvasContent, size }) => {
             clientX: event.clientX,
             clientY: event.clientY,
             contentDimensions,
-            unbounded: true,
+            unbounded: metadata.type === 'composition',
             previewSize,
             size,
         });
@@ -746,7 +746,10 @@ const Canvas = ({ canvasContent, size }) => {
             width: metadata.width,
             height: metadata.height,
         };
-        if (editorSnapping && !event.metaKey && !event.ctrlKey) {
+        if (metadata.type === 'composition' &&
+            editorSnapping &&
+            !event.metaKey &&
+            !event.ctrlKey) {
             dropPosition = (0, composition_drop_preview_1.snapCompositionDropPosition)({
                 compositionDimensions,
                 destinationDimensions: contentDimensions,

package/dist/components/CompositionSelectorItem.js

@@ -112,7 +112,7 @@ const CompositionSelectorItem = ({ item, level, currentComposition, tabIndex, se
         }
     }, [item, selectComposition, toggleFolder]);
     const onKeyDown = (0, react_1.useCallback)((evt) => {
-        if (evt.key === 'Enter' || evt.key === ' ') {
+        if (evt.key === 'Enter') {
             onClick(evt);
         }
     }, [onClick]);

package/dist/components/InspectorOpenInEditor.js

@@ -150,6 +150,17 @@ const InspectorOpenInEditor = ({ contextForAgents = null, label, location, locat
                     (0, NotificationCenter_1.showNotification)(`Could not open file: ${err.message}`, 2000);
                 });
             },
+            onOpenInGitClient: (gitClientId) => {
+                (0, open_in_editor_1.openInGitClient)(gitClientId)
+                    .then((response) => {
+                    if (!response.success) {
+                        (0, NotificationCenter_1.showNotification)('Could not open Git client', 2000);
+                    }
+                })
+                    .catch((err) => {
+                    (0, NotificationCenter_1.showNotification)(`Could not open Git client: ${err.message}`, 2000);
+                });
+            },
             onOpenInTerminal: (terminalId) => {
                 if (!(location === null || location === void 0 ? void 0 : location.source) || locationType !== 'folder') {
                     return;

package/dist/components/InspectorPanel/CompositionMetadata.js

@@ -39,6 +39,28 @@ const computedValueStyle = {
     fontStyle: 'italic',
     lineHeight: '20px',
 };
+const metadataDraggerStyles = {
+    durationInFrames: {
+        padding: '2px 0 2px 6px',
+        textAlign: 'right',
+        width: 92,
+    },
+    fps: {
+        padding: '2px 0 2px 6px',
+        textAlign: 'right',
+        width: 72,
+    },
+    height: {
+        padding: '2px 0 2px 6px',
+        textAlign: 'right',
+        width: 52,
+    },
+    width: {
+        padding: '2px 0 2px 6px',
+        textAlign: 'right',
+        width: 52,
+    },
+};
 const dimensionsControls = {
     alignItems: 'center',
     color: 'inherit',
@@ -124,7 +146,7 @@ const CompositionMetadataValue = ({ computed, disabled, field, onSave, pendingVa
         }
         return String(roundedValue);
     }, [field]);
-    return computed ? (jsx_runtime_1.jsx("span", { style: computedContainerStyle, children: jsx_runtime_1.jsx("span", { style: computedValueStyle, children: formatValue(value) }) })) : disabled ? (formatValue(value)) : (jsx_runtime_1.jsx(InputDragger_1.InputDragger, { "aria-label": fieldLabels[field], type: "number", value: (_a = dragValue !== null && dragValue !== void 0 ? dragValue : pendingValue === null || pendingValue === void 0 ? void 0 : pendingValue.value) !== null && _a !== void 0 ? _a : value, disabled: pendingValue !== null, status: "ok", onValueChange: setDragValue, onValueChangeEnd: save, onTextChange: () => undefined, min: isFps ? 0.01 : 1, step: isFps ? 0.01 : 1, dragDecimalPlaces: isFps ? 2 : 0, formatter: formatValue, rightAlign: true, small: true }));
+    return computed ? (jsx_runtime_1.jsx("span", { style: computedContainerStyle, children: jsx_runtime_1.jsx("span", { style: computedValueStyle, children: formatValue(value) }) })) : disabled ? (formatValue(value)) : (jsx_runtime_1.jsx(InputDragger_1.InputDragger, { "aria-label": fieldLabels[field], buttonStyle: metadataDraggerStyles[field], type: "number", value: (_a = dragValue !== null && dragValue !== void 0 ? dragValue : pendingValue === null || pendingValue === void 0 ? void 0 : pendingValue.value) !== null && _a !== void 0 ? _a : value, disabled: pendingValue !== null, status: "ok", onValueChange: setDragValue, onValueChangeEnd: save, onTextChange: () => undefined, min: isFps ? 0.01 : 1, step: isFps ? 0.01 : 1, dragDecimalPlaces: isFps ? 2 : 0, formatter: formatValue, rightAlign: true, style: metadataDraggerStyles[field] }));
 };
 const CompositionMetadata = ({ compositionId, disabled, stack }) => {
     var _a, _b, _c, _d;

package/dist/components/QuickSwitcher/asset-search.js

@@ -30,6 +30,7 @@ const componentAssetTypes = {
     'dev.remotion.media.Audio': 'audio',
     'dev.remotion.media.Video': 'video',
     'dev.remotion.remotion.AnimatedImage': 'image',
+    'dev.remotion.remotion.CanvasImage': 'image',
     'dev.remotion.remotion.Img': 'image',
 };
 const getAssetSearchQueryForComponent = (componentIdentity) => {

package/dist/components/SelectedOutlineCropControls.js

@@ -287,7 +287,7 @@ const CropHandle = ({ handle, outline, onDraggingChange, target }) => {
         setPropStatuses,
     ]);
     return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
-            jsx_runtime_1.jsx("path", { d: path, fill: "none", stroke: colors_1.TRANSPARENT, strokeWidth: CROP_HANDLE_HIT_WIDTH, strokeLinejoin: "miter", vectorEffect: "non-scaling-stroke", pointerEvents: "stroke", cursor: cursor, onPointerDown: onPointerDown }), jsx_runtime_1.jsx("path", { d: path, fill: "none", stroke: colors_1.BLUE, strokeWidth: CROP_HANDLE_THICKNESS, strokeLinejoin: "miter", strokeLinecap: "butt", vectorEffect: "non-scaling-stroke", pointerEvents: "none", style: { filter: colors_1.SELECTED_OUTLINE_DROP_SHADOW } })
+            jsx_runtime_1.jsx("path", { d: path, fill: "none", stroke: colors_1.TRANSPARENT, strokeWidth: CROP_HANDLE_HIT_WIDTH, strokeLinejoin: "miter", vectorEffect: "non-scaling-stroke", pointerEvents: "stroke", cursor: cursor, onPointerDown: onPointerDown }), jsx_runtime_1.jsx("path", { d: path, fill: "none", stroke: colors_1.BLUE, strokeWidth: CROP_HANDLE_THICKNESS, strokeLinejoin: "miter", strokeLinecap: "butt", vectorEffect: "non-scaling-stroke", pointerEvents: "none" })
         ] }));
 };
 const SelectedOutlineCropControls = ({ outline, onDraggingChange, target }) => {

package/dist/components/SelectedOutlinePolygon.js

@@ -55,6 +55,7 @@ const call_add_keyframe_1 = require("./Timeline/call-add-keyframe");
 const focus_inspector_field_1 = require("./Timeline/focus-inspector-field");
 const imperative_state_1 = require("./Timeline/imperative-state");
 const save_sequence_prop_1 = require("./Timeline/save-sequence-prop");
+const should_clear_selection_on_pointer_down_1 = require("./Timeline/should-clear-selection-on-pointer-down");
 const SelectedOutlinePolygonUnmemoized = ({ compositionHeight, compositionWidth, dragging, getAllDragOutlines, getAllDragTargets, getLayoutTarget, getTarget, hasTarget, hovered, onContextMenuOpen, onContextMenuOpenChange, outline, onDraggingChange, onHoverChange, onSnapPointsChange, onSelect, onDoubleClickTarget, scale, showSelectedOutline, }) => {
     const { previewServerState } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
     const { canvasContent } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
@@ -346,7 +347,7 @@ const SelectedOutlinePolygonUnmemoized = ({ compositionHeight, compositionWidth,
         });
     }, [getEffectDropTarget]);
     return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
-            jsx_runtime_1.jsx("polygon", { ref: polygonRef, points: points, fill: effectDropHovered ? colors_1.TIMELINE_DROP_BLUE_ALPHA_12 : colors_1.TRANSPARENT, stroke: colors_1.BLUE, strokeOpacity: visible || effectDropHovered ? 1 : 0, strokeWidth: 2, vectorEffect: "non-scaling-stroke", pointerEvents: hasTarget ? 'all' : undefined, onPointerEnter: () => {
+            jsx_runtime_1.jsx("polygon", { ref: polygonRef, [should_clear_selection_on_pointer_down_1.PREVENT_CLEAR_SELECTION_ON_POINTER_DOWN_ATTR]: 'true', points: points, fill: effectDropHovered ? colors_1.TIMELINE_DROP_BLUE_ALPHA_12 : colors_1.TRANSPARENT, stroke: colors_1.BLUE, strokeOpacity: visible || effectDropHovered ? 1 : 0, strokeWidth: 2, vectorEffect: "non-scaling-stroke", pointerEvents: hasTarget ? 'all' : undefined, onPointerEnter: () => {
                     if (!dragging) {
                         onHoverChange(outline.key);
                     }

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

@@ -2,6 +2,14 @@ import React from 'react';
 import type { SegmentedControlItem } from '../SegmentedControl';
 import type { TimelineSelection } from './TimelineSelection';
 import type { TimelineEasingValue } from './update-selected-easing';
+export declare const EasingPresetPreview: React.FC<{
+    readonly color: string;
+    readonly easing: TimelineEasingValue;
+    readonly height?: number;
+    readonly nonScalingStroke?: boolean;
+    readonly strokeWidth?: number;
+    readonly width?: number;
+}>;
 export type EasingEditorState = {
     initialEasing: TimelineEasingValue;
     selections: TimelineSelection[];

package/dist/components/Timeline/EasingEditorModal.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.EasingEditor = void 0;
+exports.EasingEditor = exports.EasingPresetPreview = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const studio_shared_1 = require("@remotion/studio-shared");
 const react_1 = require("react");
@@ -110,8 +110,6 @@ const presetButtonBase = {
 };
 const presetPreviewSvgStyle = {
     display: 'block',
-    height: PRESET_PREVIEW_HEIGHT,
-    width: PRESET_PREVIEW_WIDTH,
 };
 const coordinatesGridBase = {
     display: 'grid',
@@ -363,6 +361,11 @@ const getPresetPreviewPath = (easing) => {
     }
     return points.join(' ');
 };
+const EasingPresetPreview = ({ color, easing, height = PRESET_PREVIEW_HEIGHT, nonScalingStroke = false, strokeWidth = 2, width = PRESET_PREVIEW_WIDTH, }) => {
+    const path = (0, react_1.useMemo)(() => getPresetPreviewPath(easing), [easing]);
+    return (jsx_runtime_1.jsx("svg", { width: width, height: height, viewBox: `0 0 ${PRESET_PREVIEW_WIDTH} ${PRESET_PREVIEW_HEIGHT}`, style: presetPreviewSvgStyle, "aria-hidden": "true", focusable: false, children: jsx_runtime_1.jsx("path", { d: path, fill: "none", stroke: color, strokeWidth: strokeWidth, strokeLinecap: "round", strokeLinejoin: "round", vectorEffect: nonScalingStroke ? 'non-scaling-stroke' : undefined }) }));
+};
+exports.EasingPresetPreview = EasingPresetPreview;
 const pointFromBezier = (bezier, handle) => {
     const x = handle === 0 ? bezier[0] : bezier[2];
     const y = handle === 0 ? bezier[1] : bezier[3];
@@ -401,7 +404,6 @@ const EasingGraphScaffold = ({ labels }) => {
 const EasingPresetButton = ({ currentEasing, disabled, onClick, preset }) => {
     const selected = areEasingsEqual(currentEasing, preset.easing);
     const [hovered, setHovered] = (0, react_1.useState)(false);
-    const path = (0, react_1.useMemo)(() => getPresetPreviewPath(preset.easing), [preset.easing]);
     const onPointerEnter = (0, react_1.useCallback)(() => {
         setHovered(true);
     }, []);
@@ -417,7 +419,7 @@ const EasingPresetButton = ({ currentEasing, disabled, onClick, preset }) => {
     const handleClick = (0, react_1.useCallback)(() => {
         onClick(preset.easing);
     }, [onClick, preset.easing]);
-    return (jsx_runtime_1.jsx("button", { type: "button", style: style, title: preset.label, "aria-label": `Apply ${preset.label} easing`, disabled: disabled, onClick: handleClick, onPointerEnter: onPointerEnter, onPointerLeave: onPointerLeave, children: jsx_runtime_1.jsx("svg", { width: PRESET_PREVIEW_WIDTH, height: PRESET_PREVIEW_HEIGHT, viewBox: `0 0 ${PRESET_PREVIEW_WIDTH} ${PRESET_PREVIEW_HEIGHT}`, style: presetPreviewSvgStyle, "aria-hidden": "true", focusable: false, children: jsx_runtime_1.jsx("path", { d: path, fill: "none", stroke: selected || hovered ? colors_1.WHITE : colors_1.LIGHT_TEXT, strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round" }) }) }));
+    return (jsx_runtime_1.jsx("button", { type: "button", style: style, title: preset.label, "aria-label": `Apply ${preset.label} easing`, disabled: disabled, onClick: handleClick, onPointerEnter: onPointerEnter, onPointerLeave: onPointerLeave, children: jsx_runtime_1.jsx(exports.EasingPresetPreview, { color: selected || hovered ? colors_1.WHITE : colors_1.LIGHT_TEXT, easing: preset.easing }) }));
 };
 const EasingEditor = ({ state, renderHeader }) => {
     var _a, _b;
@@ -434,7 +436,6 @@ const EasingEditor = ({ state, renderHeader }) => {
     const springRef = (0, react_1.useRef)(spring);
     const liveOverrideVersionRef = (0, react_1.useRef)(0);
     const pendingOverrideTargetsRef = (0, react_1.useRef)([]);
-    const [activeHandle, setActiveHandle] = (0, react_1.useState)(null);
     (0, react_1.useEffect)(() => {
         const nextBezier = easingToBezier(state.initialEasing);
         const nextSpring = easingToSpring(state.initialEasing);
@@ -679,7 +680,6 @@ const EasingEditor = ({ state, renderHeader }) => {
         event.preventDefault();
         event.stopPropagation();
         const bezierBeforeDrag = [...bezierRef.current];
-        setActiveHandle(handle);
         updateHandleFromPointer(handle, event);
         (0, pointer_session_1.startCapturedPointerSession)({
             event,
@@ -697,7 +697,6 @@ const EasingEditor = ({ state, renderHeader }) => {
                     bezierRef.current = bezierBeforeDrag;
                     setBezier(bezierBeforeDrag);
                 }
-                setActiveHandle(null);
             },
         });
     }, [
@@ -777,7 +776,7 @@ const EasingEditor = ({ state, renderHeader }) => {
     const modeSwitcher = (jsx_runtime_1.jsx("div", { style: segmentedControlWrapper, children: jsx_runtime_1.jsx(SegmentedControl_1.SegmentedControl, { items: modeItems, needsWrapping: false }) }));
     return (jsx_runtime_1.jsxs("div", { style: inlineContainer, children: [renderHeader ? renderHeader(modeItems) : null, jsx_runtime_1.jsx("div", { style: renderHeader ? inspectorPresetButtonsWrapper : presetButtonsWrapper, children: EDITOR_EASING_PRESETS.map((preset) => (jsx_runtime_1.jsx(EasingPresetButton, { currentEasing: currentEasing, disabled: disabled, onClick: applyPreset, preset: preset }, preset.id))) }), mode === 'bezier' ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
                     jsx_runtime_1.jsxs("svg", { ref: svgRef, width: SVG_WIDTH, height: SVG_HEIGHT, viewBox: `0 0 ${SVG_WIDTH} ${SVG_HEIGHT}`, style: svgStyle, "aria-label": "Bezier curve editor", children: [
-                            jsx_runtime_1.jsx(EasingGraphScaffold, { labels: graphLabels }), jsx_runtime_1.jsx("line", { x1: startPoint.x, y1: startPoint.y, x2: firstHandle.x, y2: firstHandle.y, stroke: colors_1.WHITE_ALPHA_35, strokeWidth: 1 }), jsx_runtime_1.jsx("line", { x1: endPoint.x, y1: endPoint.y, x2: secondHandle.x, y2: secondHandle.y, stroke: colors_1.WHITE_ALPHA_35, strokeWidth: 1 }), jsx_runtime_1.jsx("path", { d: bezierPath, fill: "none", stroke: colors_1.BLUE, strokeWidth: 3 }), jsx_runtime_1.jsx("circle", { cx: startPoint.x, cy: startPoint.y, r: 4, fill: colors_1.WHITE }), jsx_runtime_1.jsx("circle", { cx: endPoint.x, cy: endPoint.y, r: 4, fill: colors_1.WHITE }), jsx_runtime_1.jsx("circle", { cx: firstHandle.x, cy: firstHandle.y, r: 6, fill: colors_1.WHITE, stroke: colors_1.BLUE, strokeWidth: 2, vectorEffect: "non-scaling-stroke", pointerEvents: disabled ? 'none' : 'all', cursor: activeHandle === 0 ? 'grabbing' : 'default', onPointerDown: (event) => onHandlePointerDown(0, event) }), jsx_runtime_1.jsx("circle", { cx: secondHandle.x, cy: secondHandle.y, r: 6, fill: colors_1.WHITE, stroke: colors_1.BLUE, strokeWidth: 2, vectorEffect: "non-scaling-stroke", pointerEvents: disabled ? 'none' : 'all', cursor: activeHandle === 1 ? 'grabbing' : 'default', onPointerDown: (event) => onHandlePointerDown(1, event) })
+                            jsx_runtime_1.jsx(EasingGraphScaffold, { labels: graphLabels }), jsx_runtime_1.jsx("line", { x1: startPoint.x, y1: startPoint.y, x2: firstHandle.x, y2: firstHandle.y, stroke: colors_1.WHITE_ALPHA_35, strokeWidth: 1 }), jsx_runtime_1.jsx("line", { x1: endPoint.x, y1: endPoint.y, x2: secondHandle.x, y2: secondHandle.y, stroke: colors_1.WHITE_ALPHA_35, strokeWidth: 1 }), jsx_runtime_1.jsx("path", { d: bezierPath, fill: "none", stroke: colors_1.BLUE, strokeWidth: 3 }), jsx_runtime_1.jsx("circle", { cx: startPoint.x, cy: startPoint.y, r: 4, fill: colors_1.WHITE }), jsx_runtime_1.jsx("circle", { cx: endPoint.x, cy: endPoint.y, r: 4, fill: colors_1.WHITE }), jsx_runtime_1.jsx("circle", { cx: firstHandle.x, cy: firstHandle.y, r: 6, fill: colors_1.WHITE, stroke: colors_1.BLUE, strokeWidth: 2, vectorEffect: "non-scaling-stroke", pointerEvents: disabled ? 'none' : 'all', cursor: "default", onPointerDown: (event) => onHandlePointerDown(0, event) }), jsx_runtime_1.jsx("circle", { cx: secondHandle.x, cy: secondHandle.y, r: 6, fill: colors_1.WHITE, stroke: colors_1.BLUE, strokeWidth: 2, vectorEffect: "non-scaling-stroke", pointerEvents: disabled ? 'none' : 'all', cursor: "default", onPointerDown: (event) => onHandlePointerDown(1, event) })
                         ] }), modeSwitcher, jsx_runtime_1.jsxs("div", { style: coordinatesGrid, children: [
                             jsx_runtime_1.jsxs("div", { style: coordinateRow, children: [
                                     jsx_runtime_1.jsx("div", { style: coordinateLabel, children: "X1" }), jsx_runtime_1.jsx("div", { style: coordinateInputWrapper, children: jsx_runtime_1.jsx(InputDragger_1.InputDragger, { type: "number", value: bezier[0], status: "ok", onValueChange: (value) => setCoordinate(0, 'x', value, false), onValueChangeEnd: (value) => setCoordinate(0, 'x', value, true), onTextChange: () => undefined, min: 0, max: 1, step: 0.01, formatter: formatNumber, rightAlign: false, style: numberInputStyle, snapToStep: false, disabled: disabled }) })

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/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

@@ -333,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/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/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/TimelineSequenceItem.js

@@ -905,7 +905,7 @@ const TimelineSequenceItemInner = ({ children, connectedCompositions, nestedDept
             clientId: previewServerState.clientId,
         });
     }, [canDropEffect, nodePath, previewServerState, validatedLocation]);
-    const trackRow = (jsx_runtime_1.jsx(TimelineRowChrome_1.TimelineRowChrome, { depth: nestedDepth, eye: canToggleVisibility ? (jsx_runtime_1.jsx(TimelineLayerEye_1.TimelineLayerEye, { type: sequence.type === 'audio' ? 'speaker' : 'eye', hidden: isItemHidden, onInvoked: onToggleVisibility })) : (jsx_runtime_1.jsx(TimelineLayerEye_1.TimelineLayerEyeSpacer, {})), arrow: hasExpandableContent && nodePathInfo !== null ? (jsx_runtime_1.jsx(TimelineSequenceExpandArrow, { disabled: !previewInteractive, isExpanded: isExpanded, nodePathInfo: nodePathInfo, sequence: sequence })) : (jsx_runtime_1.jsx(TimelineExpandArrowButton_1.TimelineExpandArrowSpacer, {})), style: rowStyle, selected: selected, selectable: selectable, selectionItem: selectionItem, onSelect: onSelect, showSelectedBackground: true, containsSelection: containsSelection, hovered: hovered, outerHeight: outerHeight, onDragLeave: canDropEffect ? onEffectDragLeave : undefined, onDragOver: canDropEffect ? onEffectDragOver : undefined, onDrop: canDropEffect ? onEffectDrop : undefined, onDoubleClick: canHandleSequenceDoubleClick ? onSequenceDoubleClick : undefined, onPointerEnter: onPointerEnter, onPointerLeave: onPointerLeave, children: jsx_runtime_1.jsxs("div", { style: labelContainerStyle, children: [connectedCompositions.length > 0 ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
+    const trackRow = (jsx_runtime_1.jsx(TimelineRowChrome_1.TimelineRowChrome, { depth: nestedDepth, eye: canToggleVisibility ? (jsx_runtime_1.jsx(TimelineLayerEye_1.TimelineLayerEye, { type: sequence.type === 'audio' ? 'speaker' : 'eye', hidden: isItemHidden, onInvoked: onToggleVisibility })) : (jsx_runtime_1.jsx(TimelineLayerEye_1.TimelineLayerEyeSpacer, {})), arrow: hasExpandableContent && nodePathInfo !== null ? (jsx_runtime_1.jsx(TimelineSequenceExpandArrow, { disabled: !previewInteractive, isExpanded: isExpanded, nodePathInfo: nodePathInfo, sequence: sequence })) : (jsx_runtime_1.jsx(TimelineExpandArrowButton_1.TimelineExpandArrowSpacer, {})), style: rowStyle, selected: selected, selectable: selectable, selectionItem: selectionItem, onSelect: onSelect, showSelectedBackground: true, containsSelection: containsSelection, hovered: hovered, isFieldRow: false, outerHeight: outerHeight, onDragLeave: canDropEffect ? onEffectDragLeave : undefined, onDragOver: canDropEffect ? onEffectDragOver : undefined, onDrop: canDropEffect ? onEffectDrop : undefined, onDoubleClick: canHandleSequenceDoubleClick ? onSequenceDoubleClick : undefined, onPointerEnter: onPointerEnter, onPointerLeave: onPointerLeave, children: jsx_runtime_1.jsxs("div", { style: labelContainerStyle, children: [connectedCompositions.length > 0 ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
                         jsx_runtime_1.jsx(CompositionOrStillIcon_1.CompositionOrStillIcon, { color: (0, TimelineSelection_1.getTimelineColor)(false, false), composition: connectedCompositions[0], style: connectedCompositionIconStyle }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.5 })
                     ] })) : null, jsx_runtime_1.jsx(TimelineSequenceName_1.TimelineSequenceName, { displayName: timelineDisplayName, fallbackDisplayName: fallbackDisplayName, selected: selected, containsSelection: containsSelection, editing: isRenaming, onCancelEditing: onCancelRenaming, onSaveName: onSaveName }), numberOfHiddenDuplicates > 0 ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
                         jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.5 }), jsx_runtime_1.jsx(TimelineDuplicateCount_1.TimelineDuplicateCount, { count: numberOfHiddenDuplicates })