@remotion/studio 4.0.515 → 4.0.516

package/dist/components/Tabs/index.js

@@ -24,7 +24,7 @@ const selectorButton = {
     flex: 1,
     padding: 3,
     height: 34,
-    paddingLeft: 12,
+    paddingLeft: 10,
     display: 'flex',
     flexDirection: 'row',
     fontSize: 13,

package/dist/components/Timeline/Timeline.js

@@ -153,7 +153,6 @@ const TimelineContextMenuArea = ({ children }) => {
                 ? await browserStudioOperations.insertSolid(request)
                 : await (0, call_api_1.callApi)('/api/insert-jsx-element', request);
             if (result.success) {
-                (0, NotificationCenter_1.showNotification)('Added <Solid> to source file', 2000);
                 return;
             }
             (0, NotificationCenter_1.showNotification)(result.reason, 4000);

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

@@ -2,7 +2,7 @@ import React from 'react';
 import { type CanUpdateSequencePropStatusStatic } from 'remotion';
 import type { SchemaFieldInfo, TimelineFieldOnDragValueChange, TimelineFieldOnSave } from '../../helpers/timeline-layout';
 import { type InspectorQuickActionProps } from '../InspectorPanel/common';
-export type InspectorSourceAction = Omit<InspectorQuickActionProps, 'variant'>;
+export type InspectorSourceAction = InspectorQuickActionProps;
 type AssetSelectionContextValue = {
     readonly initialQuery: string;
     readonly getSourceAction: (src: string) => InspectorSourceAction | null;

package/dist/components/Timeline/TimelineAssetField.js

@@ -18,6 +18,19 @@ const penIcon = {
     height: 14,
     width: 14,
 };
+const sourceActions = {
+    alignItems: 'center',
+    display: 'flex',
+    flex: 1,
+    gap: 4,
+    minWidth: 0,
+};
+const standaloneSourceActionStyle = {
+    flex: 1,
+    margin: 0,
+    minWidth: 0,
+    width: 'auto',
+};
 exports.AssetSelectionContext = (0, react_1.createContext)({
     getSourceAction: () => null,
     initialQuery: '',
@@ -100,14 +113,7 @@ const TimelineAssetField = ({ field, effectiveValue, propStatus, onSave, onDragV
     if (inlineSourceAction === null) {
         return action;
     }
-    return (jsx_runtime_1.jsx(common_1.InspectorQuickAction, { ...inlineSourceAction, size: "compact", variant: {
-            type: 'segmented',
-            trailing: {
-                disabled: window.remotion_isReadOnlyStudio,
-                onClick: openAssetSelection,
-                renderIcon: (color) => jsx_runtime_1.jsx(pen_1.PenIcon, { color: color, style: penIcon }),
-                title: 'Change source',
-            },
-        } }));
+    return (jsx_runtime_1.jsxs("div", { style: sourceActions, children: [
+            jsx_runtime_1.jsx(common_1.InspectorQuickAction, { ...inlineSourceAction, size: "compact", style: standaloneSourceActionStyle }), action] }));
 };
 exports.TimelineAssetField = TimelineAssetField;

package/dist/components/Timeline/TimelineBooleanField.js

@@ -4,9 +4,6 @@ exports.TimelineBooleanField = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const Checkbox_1 = require("../Checkbox");
-const checkboxContainer = {
-    marginLeft: 8,
-};
 const TimelineBooleanField = ({ field, propStatus, effectiveValue, onSave }) => {
     const checked = Boolean(effectiveValue);
     const onChange = (0, react_1.useCallback)(() => {
@@ -15,6 +12,6 @@ const TimelineBooleanField = ({ field, propStatus, effectiveValue, onSave }) =>
             onSave(newValue);
         }
     }, [propStatus, onSave, checked]);
-    return (jsx_runtime_1.jsx("div", { style: checkboxContainer, children: jsx_runtime_1.jsx(Checkbox_1.Checkbox, { checked: checked, onChange: onChange, name: field.key, disabled: false, variant: "small" }) }));
+    return (jsx_runtime_1.jsx(Checkbox_1.Checkbox, { checked: checked, onChange: onChange, name: field.key, disabled: false, variant: "small" }));
 };
 exports.TimelineBooleanField = TimelineBooleanField;

package/dist/components/Timeline/TimelineClipboardKeybindings.js

@@ -792,9 +792,9 @@ const TimelineClipboardKeybindings = () => {
                             ? '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);
+                        if (sequencePropTarget.targets.length > 1) {
+                            (0, NotificationCenter_1.showNotification)('Pasted property onto selected sequences', 2000);
+                        }
                     });
                 }
                 const effectPropResult = (0, studio_shared_1.parseEffectPropClipboardDataResult)(text);
@@ -859,9 +859,9 @@ const TimelineClipboardKeybindings = () => {
                             ? 'Reapply effect prop paste onto selected effects'
                             : 'Reapply effect prop paste',
                     }).then(() => {
-                        (0, NotificationCenter_1.showNotification)(effectPropTarget.targets.length > 1
-                            ? 'Pasted effect prop onto selected effects'
-                            : 'Pasted effect prop', 2000);
+                        if (effectPropTarget.targets.length > 1) {
+                            (0, NotificationCenter_1.showNotification)('Pasted effect prop onto selected effects', 2000);
+                        }
                     });
                 }
                 const result = envelope === null
@@ -904,10 +904,7 @@ const TimelineClipboardKeybindings = () => {
                     clientId,
                     insertAtIndices,
                 }).then((pasteResult) => {
-                    if (pasteResult.success) {
-                        (0, NotificationCenter_1.showNotification)('Pasted effects', 2000);
-                    }
-                    else {
+                    if (!pasteResult.success) {
                         (0, NotificationCenter_1.showNotification)(pasteResult.reason, 4000);
                     }
                 });

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

@@ -12,6 +12,7 @@ export declare const TimelineEffectItem: React.FC<{
     readonly nodePath: SequencePropsSubscriptionKey;
     readonly validatedLocation: CodePosition;
     readonly rowDepth: number;
+    readonly labelNextToToggle: boolean;
     readonly getIsExpanded: GetIsExpanded;
     readonly toggleTrack: (nodePathInfo: SequenceNodePathInfo) => void;
 }>;

package/dist/components/Timeline/TimelineEffectItem.js

@@ -7,10 +7,12 @@ const remotion_1 = require("remotion");
 const browser_studio_operations_1 = require("../../helpers/browser-studio-operations");
 const client_id_1 = require("../../helpers/client-id");
 const colors_1 = require("../../helpers/colors");
+const format_file_location_1 = require("../../helpers/format-file-location");
 const timeline_layout_1 = require("../../helpers/timeline-layout");
 const ContextMenu_1 = require("../ContextMenu");
 const effect_operations_api_1 = require("../effect-operations-api");
 const NotificationCenter_1 = require("../Notifications/NotificationCenter");
+const get_copy_context_for_agents_menu_item_1 = require("./get-copy-context-for-agents-menu-item");
 const save_effect_prop_1 = require("./save-effect-prop");
 const TimelineExpandArrowButton_1 = require("./TimelineExpandArrowButton");
 const TimelineLayerEye_1 = require("./TimelineLayerEye");
@@ -73,7 +75,7 @@ const getEffectReorderDragData = (dataTransfer) => {
 const getDestinationIndex = ({ fromIndex, insertionIndex, }) => {
     return insertionIndex > fromIndex ? insertionIndex - 1 : insertionIndex;
 };
-const TimelineEffectItem = ({ label, nodePathInfo, effectIndex, effectSchema, documentationLink, nodePath, validatedLocation, rowDepth, getIsExpanded, toggleTrack, }) => {
+const TimelineEffectItem = ({ label, nodePathInfo, effectIndex, effectSchema, documentationLink, nodePath, validatedLocation, rowDepth, labelNextToToggle, getIsExpanded, toggleTrack, }) => {
     var _a;
     var _b;
     const { previewServerState } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
@@ -130,13 +132,25 @@ const TimelineEffectItem = ({ label, nodePathInfo, effectIndex, effectSchema, do
         }
     }, [deleteDisabled, effectIndex, nodePath, validatedLocation.source]);
     const getContextMenuItems = (0, react_1.useCallback)(() => {
-        if (!previewConnected) {
-            return [];
-        }
         if (selection.selectable) {
             selection.onSelect({ shiftKey: false, toggleKey: false });
         }
-        const items = [];
+        const items = [
+            (0, get_copy_context_for_agents_menu_item_1.getCopyContextForAgentsMenuItem)({
+                contextForAgents: (0, format_file_location_1.formatContextForAgents)({
+                    location: validatedLocation,
+                    name: `Effect "${label}"`,
+                    root: window.remotion_cwd,
+                }),
+            }),
+        ];
+        if (!previewConnected) {
+            return items;
+        }
+        items.push({
+            type: 'divider',
+            id: 'copy-context-for-agents-divider',
+        });
         if (documentationLink) {
             items.push({
                 type: 'item',
@@ -178,9 +192,11 @@ const TimelineEffectItem = ({ label, nodePathInfo, effectIndex, effectSchema, do
     }, [
         deleteDisabled,
         documentationLink,
+        label,
         onDeleteEffectFromSource,
         previewConnected,
         selection,
+        validatedLocation,
     ]);
     const onToggle = (0, react_1.useCallback)((type) => {
         if (!canToggle || previewServerState.type !== 'connected') {
@@ -310,10 +326,7 @@ const TimelineEffectItem = ({ label, nodePathInfo, effectIndex, effectSchema, do
                 toIndex: dropTarget.toIndex,
                 clientId: previewServerState.clientId,
             });
-            if (result.success) {
-                (0, NotificationCenter_1.showNotification)('Reordered effect', 2000);
-            }
-            else {
+            if (!result.success) {
                 (0, NotificationCenter_1.showNotification)(result.reason, 4000);
             }
         }
@@ -336,7 +349,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.TimelineExpandArrowSpacer, {}), style: rowStyle, selected: selection.selected, selectable: selection.selectable, onSelect: selection.onSelect, showSelectedBackground: true, containsSelection: containsSelection, isFieldRow: false, outerHeight: null, children: jsx_runtime_1.jsxs("div", { style: labelContainerStyle, children: [
+    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: labelNextToToggle ? null : jsx_runtime_1.jsx(TimelineExpandArrowButton_1.TimelineExpandArrowSpacer, {}), style: rowStyle, selected: selection.selected, selectable: selection.selectable, onSelect: selection.onSelect, showSelectedBackground: true, containsSelection: containsSelection, outerHeight: null, children: jsx_runtime_1.jsxs("div", { style: labelContainerStyle, children: [
                 jsx_runtime_1.jsx("span", { title: label, style: labelStyle, children: label }), jsx_runtime_1.jsx(TimelineExpandArrowButton_1.TimelineExpandArrowButton, { isExpanded: isExpanded, onClick: () => toggleTrack(nodePathInfo), label: `${label} section`, disabled: false })
             ] }) }));
     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);

package/dist/components/Timeline/TimelineEffectPropItem.js

@@ -7,12 +7,14 @@ const react_1 = require("react");
 const remotion_1 = require("remotion");
 const browser_studio_operations_1 = require("../../helpers/browser-studio-operations");
 const client_id_1 = require("../../helpers/client-id");
+const format_file_location_1 = require("../../helpers/format-file-location");
 const open_in_editor_1 = require("../../helpers/open-in-editor");
 const use_runtime_values_1 = require("../../helpers/use-runtime-values");
 const ContextMenu_1 = require("../ContextMenu");
 const effect_operations_api_1 = require("../effect-operations-api");
 const use_default_editor_info_1 = require("../use-default-editor-info");
 const call_add_keyframe_1 = require("./call-add-keyframe");
+const get_copy_context_for_agents_menu_item_1 = require("./get-copy-context-for-agents-menu-item");
 const get_timeline_keyframes_1 = require("./get-timeline-keyframes");
 const save_effect_prop_1 = require("./save-effect-prop");
 const save_prop_queue_1 = require("./save-prop-queue");
@@ -323,6 +325,17 @@ const TimelineEffectPropItem = ({ field, validatedLocation, rowDepth, nodePath,
             selection.onSelect({ shiftKey: false, toggleKey: false });
         }
         return [
+            (0, get_copy_context_for_agents_menu_item_1.getCopyContextForAgentsMenuItem)({
+                contextForAgents: (0, format_file_location_1.formatContextForAgents)({
+                    location: validatedLocation,
+                    name: `Effect property "${field.key}"`,
+                    root: window.remotion_cwd,
+                }),
+            }),
+            {
+                type: 'divider',
+                id: 'copy-context-for-agents-divider',
+            },
             {
                 type: 'item',
                 id: 'reset-effect-field',
@@ -336,7 +349,7 @@ const TimelineEffectPropItem = ({ field, validatedLocation, rowDepth, nodePath,
                 value: 'reset-effect-field',
             },
         ];
-    }, [canShowReset, onReset, selection]);
+    }, [canShowReset, field.key, onReset, selection, validatedLocation]);
     const onPropertyDoubleClick = (0, react_1.useCallback)((event) => {
         if (!canOpenInEditor || !defaultEditorId) {
             return;
@@ -348,7 +361,7 @@ const TimelineEffectPropItem = ({ field, validatedLocation, rowDepth, nodePath,
             property: field.key,
         }).catch(() => undefined);
     }, [canOpenInEditor, defaultEditorId, field.key, 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, 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: resolvedKeyframeDisplayOffset, runtimeValueStore: runtimeValueStore }) }) }));
+    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, 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: resolvedKeyframeDisplayOffset, runtimeValueStore: runtimeValueStore }) }) }));
     return jsx_runtime_1.jsx(ContextMenu_1.ContextMenu, { getItems: getContextMenuItems, children: row });
 };
 exports.TimelineEffectPropItem = TimelineEffectPropItem;

package/dist/components/Timeline/TimelineExpandedRow.js

@@ -23,6 +23,7 @@ const rowLabel = {
 };
 const TimelineExpandedRowInner = ({ node, depth, nestedDepth, rowDepthBase, getIsExpanded, toggleTrack, validatedLocation, nodePath, schema, keyframeDisplayOffset, keyframeControlsMode, }) => {
     const rowDepth = (rowDepthBase !== null && rowDepthBase !== void 0 ? rowDepthBase : (0, timeline_row_layout_1.getExpandedRowDepth)({ nestedDepth, treeDepth: 0 })) + depth;
+    const isInspector = keyframeControlsMode === 'inspector';
     const selection = (0, TimelineSelection_1.useTimelineRowSelection)(node.nodePathInfo);
     const labelStyle = react_1.default.useMemo(() => ({
         ...rowLabel,
@@ -39,17 +40,17 @@ const TimelineExpandedRowInner = ({ node, depth, nestedDepth, rowDepthBase, getI
         if (node.effectInfo) {
             return (
             // A single effect
-            jsx_runtime_1.jsx(TimelineEffectItem_1.TimelineEffectItem, { label: node.label, nodePathInfo: node.nodePathInfo, effectIndex: node.effectInfo.effectIndex, effectSchema: node.effectInfo.effectSchema, documentationLink: node.effectInfo.documentationLink, nodePath: nodePath, validatedLocation: validatedLocation, rowDepth: rowDepth, getIsExpanded: getIsExpanded, toggleTrack: toggleTrack }));
+            jsx_runtime_1.jsx(TimelineEffectItem_1.TimelineEffectItem, { label: node.label, nodePathInfo: node.nodePathInfo, effectIndex: node.effectInfo.effectIndex, effectSchema: node.effectInfo.effectSchema, documentationLink: node.effectInfo.documentationLink, nodePath: nodePath, validatedLocation: validatedLocation, rowDepth: rowDepth, labelNextToToggle: isInspector, getIsExpanded: getIsExpanded, toggleTrack: toggleTrack }));
         }
         // Group like "Effects"
         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, onSelect: selection.onSelect, showSelectedBackground: true, containsSelection: false, isFieldRow: false, outerHeight: null, children: jsx_runtime_1.jsx("span", { style: labelStyle, children: node.label }) }));
+            }, selected: selection.selected, selectable: selection.selectable, onSelect: selection.onSelect, showSelectedBackground: true, containsSelection: false, outerHeight: null, children: jsx_runtime_1.jsx("span", { style: labelStyle, children: node.label }) }));
     }
     if (node.field) {
         if (node.field.kind === 'effect-field') {
-            return (jsx_runtime_1.jsx(TimelineEffectPropItem_1.TimelineEffectPropItem, { field: node.field, validatedLocation: validatedLocation, rowDepth: rowDepth, nodePath: nodePath, nodePathInfo: node.nodePathInfo, keyframeDisplayOffset: keyframeDisplayOffset, keyframeControlsMode: keyframeControlsMode, runtimeValueStore: node.runtimeValueStore }));
+            return (jsx_runtime_1.jsx(TimelineEffectPropItem_1.TimelineEffectPropItem, { field: node.field, validatedLocation: validatedLocation, rowDepth: isInspector ? rowDepth - 1 : rowDepth, nodePath: nodePath, nodePathInfo: node.nodePathInfo, keyframeDisplayOffset: keyframeDisplayOffset, keyframeControlsMode: keyframeControlsMode, runtimeValueStore: node.runtimeValueStore }));
         }
         if (node.field.kind === 'sequence-field') {
             return (jsx_runtime_1.jsx(TimelineSequencePropItem_1.TimelineSequencePropItem, { field: node.field, validatedLocation: validatedLocation, rowDepth: rowDepth, nodePath: nodePath, nodePathInfo: node.nodePathInfo, schema: schema, keyframeDisplayOffset: keyframeDisplayOffset, keyframeControlsMode: keyframeControlsMode, runtimeValue: node.runtimeValue }));
@@ -58,6 +59,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, onSelect: selection.onSelect, showSelectedBackground: true, containsSelection: false, isFieldRow: false, outerHeight: null, children: jsx_runtime_1.jsx("span", { style: labelStyle, children: node.label }) }));
+        }, selected: selection.selected, selectable: selection.selectable, onSelect: selection.onSelect, showSelectedBackground: true, containsSelection: 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/TimelineFieldLabel.js

@@ -4,12 +4,12 @@ exports.TimelineFieldLabel = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const colors_1 = require("../../helpers/colors");
-const timeline_layout_1 = require("../../helpers/timeline-layout");
 const timeline_field_row_layout_1 = require("./timeline-field-row-layout");
 const TimelineRowLayoutContext_1 = require("./TimelineRowLayoutContext");
 const TimelineSelection_1 = require("./TimelineSelection");
 const fieldNameBase = {
     fontSize: 12,
+    lineHeight: `${timeline_field_row_layout_1.TIMELINE_STACKED_FIELD_HEADER_HEIGHT}px`,
     color: colors_1.WHITE_ALPHA_80,
     userSelect: 'none',
     whiteSpace: 'nowrap',
@@ -23,7 +23,9 @@ const TimelineFieldLabel = ({ rowDepth, selected, label, stacked = false }) => {
     const labelRowStyle = (0, react_1.useMemo)(() => ({
         ...(0, timeline_field_row_layout_1.getTimelineFieldLabelRowStyle)(rowDepth, basePadding),
         ...(0, TimelineSelection_1.getTimelineSelectedLabelStyle)(selected && highlightSelectedLabel, true),
-        ...(stacked ? { flex: `0 0 ${timeline_layout_1.SCHEMA_FIELD_ROW_HEIGHT}px` } : null),
+        ...(stacked
+            ? { flex: `0 0 ${timeline_field_row_layout_1.TIMELINE_STACKED_FIELD_HEADER_HEIGHT}px` }
+            : null),
         alignSelf: 'stretch',
     }), [basePadding, highlightSelectedLabel, rowDepth, selected, stacked]);
     const fieldNameStyle = (0, react_1.useMemo)(() => ({

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

@@ -1,9 +1,8 @@
 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,36 +3,23 @@ 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 TimelineSelection_1 = require("./TimelineSelection");
 const Transform3DModeContext_1 = require("./Transform3DModeContext");
-const stackedHeaderStyle = {
-    display: 'flex',
-    flex: `0 0 ${timeline_layout_1.SCHEMA_FIELD_ROW_HEIGHT}px`,
-    minWidth: 0,
+const stackedValueStyle = {
+    ...timeline_field_row_layout_1.timelineFieldValueColumnStyle,
+    paddingLeft: TimelineSelection_1.TIMELINE_SELECTED_LABEL_HORIZONTAL_PADDING,
 };
-const stackedLabelStyle = {
-    flex: 1,
-    minWidth: 0,
-};
-const TimelineFieldRowContent = ({ field, rowDepth, selected, keyframeControls, children }) => {
+const TimelineFieldRowContent = ({ field, rowDepth, selected, 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;
+    const value = (jsx_runtime_1.jsx("div", { style: stacked ? stackedValueStyle : timeline_field_row_layout_1.timelineFieldValueColumnStyle, children: children }));
     if (stacked) {
-        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("div", { style: timeline_field_row_layout_1.timelineStackedFieldContentStyle, children: [label, value] }));
     }
-    return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [label, controls, value] }));
+    return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [label, value] }));
 };
 exports.TimelineFieldRowContent = TimelineFieldRowContent;

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

@@ -1,6 +1,5 @@
 import React from 'react';
 export declare const TimelineImageInfo: React.FC<{
     readonly src: string;
-    readonly visualizationWidth: number;
     readonly offsetInPixels: number;
 }>;

package/dist/components/Timeline/TimelineImageInfo.js

@@ -2,7 +2,6 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TimelineImageInfo = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const timeline_utils_1 = require("@remotion/timeline-utils");
 const react_1 = require("react");
 const colors_1 = require("../../helpers/colors");
 const timeline_layout_1 = require("../../helpers/timeline-layout");
@@ -14,38 +13,20 @@ const containerStyle = {
     display: 'flex',
     borderTopLeftRadius: 2,
     borderBottomLeftRadius: 2,
+    backgroundRepeat: 'repeat-x',
+    backgroundSize: 'auto 100%',
+    backgroundPositionY: 0,
 };
-const TimelineImageInfo = ({ src, visualizationWidth, offsetInPixels }) => {
-    const ref = (0, react_1.useRef)(null);
-    (0, react_1.useEffect)(() => {
-        const { current } = ref;
-        if (!current) {
-            return;
-        }
-        const canvas = document.createElement('canvas');
-        canvas.width = visualizationWidth * window.devicePixelRatio;
-        canvas.height = HEIGHT * window.devicePixelRatio;
-        canvas.style.width = visualizationWidth + 'px';
-        canvas.style.height = HEIGHT + 'px';
-        const ctx = canvas.getContext('2d');
-        if (!ctx) {
-            return;
-        }
-        current.appendChild(canvas);
-        const img = new Image();
-        img.crossOrigin = 'anonymous';
-        img.onload = () => {
-            (0, timeline_utils_1.drawRepeatingImageThumbnail)({
-                canvas,
-                image: img,
-                offsetInPixels: offsetInPixels * window.devicePixelRatio,
-            });
+const TimelineImageInfo = ({ src, offsetInPixels }) => {
+    const style = (0, react_1.useMemo)(() => {
+        return {
+            ...containerStyle,
+            // This is Studio UI, not a Remotion composition that needs to wait for
+            // background images before rendering.
+            backgroundImage: `url(${JSON.stringify(src)})`,
+            backgroundPositionX: -offsetInPixels,
         };
-        img.src = src;
-        return () => {
-            current.removeChild(canvas);
-        };
-    }, [offsetInPixels, src, visualizationWidth]);
-    return jsx_runtime_1.jsx("div", { ref: ref, style: containerStyle });
+    }, [offsetInPixels, src]);
+    return jsx_runtime_1.jsx("div", { style: style });
 };
 exports.TimelineImageInfo = TimelineImageInfo;

package/dist/components/Timeline/TimelineKeyframeControls.js

@@ -15,6 +15,7 @@ const call_delete_keyframe_1 = require("./call-delete-keyframe");
 const get_easing_selection_after_keyframe_delete_1 = require("./get-easing-selection-after-keyframe-delete");
 const get_keyframe_navigation_1 = require("./get-keyframe-navigation");
 const get_timeline_keyframes_1 = require("./get-timeline-keyframes");
+const timeline_scroll_logic_1 = require("./timeline-scroll-logic");
 const TimelineKeyframeDiamondIcon_1 = require("./TimelineKeyframeDiamondIcon");
 const TimelineKeyframeTracksContext_1 = require("./TimelineKeyframeTracksContext");
 const TimelineSelection_1 = require("./TimelineSelection");
@@ -405,23 +406,28 @@ const TimelineKeyframeControls = ({ fieldKey, propStatus, nodePath, fileName, ke
         timelinePosition,
         tracks,
     ]);
-    const seekToDisplayFrame = (0, react_1.useCallback)((frame) => {
+    const seekToDisplayFrame = (0, react_1.useCallback)((frame, direction) => {
         setFrame((current) => {
             const next = { ...current, [videoConfig.id]: frame };
             remotion_1.Internals.persistCurrentFrame(next);
             return next;
         });
-    }, [setFrame, videoConfig.id]);
+        (0, timeline_scroll_logic_1.ensureFrameIsInViewport)({
+            direction,
+            durationInFrames: videoConfig.durationInFrames,
+            frame,
+        });
+    }, [setFrame, videoConfig.durationInFrames, videoConfig.id]);
     const onPrevious = (0, react_1.useCallback)((e) => {
         e.stopPropagation();
         if (previousDisplayFrame !== null) {
-            seekToDisplayFrame(previousDisplayFrame);
+            seekToDisplayFrame(previousDisplayFrame, 'fit-left');
         }
     }, [previousDisplayFrame, seekToDisplayFrame]);
     const onNext = (0, react_1.useCallback)((e) => {
         e.stopPropagation();
         if (nextDisplayFrame !== null) {
-            seekToDisplayFrame(nextDisplayFrame);
+            seekToDisplayFrame(nextDisplayFrame, 'fit-right');
         }
     }, [nextDisplayFrame, seekToDisplayFrame]);
     const onToggleKeyframe = (0, react_1.useCallback)(async (e) => {

package/dist/components/Timeline/TimelinePrimitiveFieldValue.js

@@ -31,7 +31,7 @@ const isTimelinePrimitiveFieldInfo = (field) => {
 exports.isTimelinePrimitiveFieldInfo = isTimelinePrimitiveFieldInfo;
 const TimelinePrimitiveFieldValue = ({ field, onSave, onDragValueChange, onDragEnd, propStatus, effectiveValue, scaleLockNodePath, }) => {
     if (field.typeName === 'number') {
-        return (jsx_runtime_1.jsx("span", { children: jsx_runtime_1.jsx(TimelineNumberField_1.TimelineNumberField, { effectiveValue: effectiveValue, field: field, onDragEnd: onDragEnd, onDragValueChange: onDragValueChange, onSave: onSave, propStatus: propStatus }) }));
+        return (jsx_runtime_1.jsx(TimelineNumberField_1.TimelineNumberField, { effectiveValue: effectiveValue, field: field, onDragEnd: onDragEnd, onDragValueChange: onDragValueChange, onSave: onSave, propStatus: propStatus }));
     }
     if (field.typeName === 'rotation-css' ||
         field.typeName === 'rotation-degrees') {

package/dist/components/Timeline/TimelineRotationField.js

@@ -14,10 +14,8 @@ const containerStyle = {
     gap: 4,
 };
 const compactDraggerStyle = {
-    paddingBottom: 2,
     paddingLeft: 2,
     paddingRight: 2,
-    paddingTop: 2,
 };
 const ROTATION_LABELS = ['X', 'Y', 'Z'];
 const TimelineRotationField = ({ field, effectiveValue, propStatus, onSave, onDragValueChange, onDragEnd, }) => {

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

@@ -18,7 +18,6 @@ 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

@@ -69,8 +69,8 @@ const TimelineRowKeyframeControlsColumn = ({ children, depth }) => {
     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, onSelect, showSelectedBackground, containsSelection, hovered = false, isFieldRow, outerHeight, onDragLeave, onDragOver, onDrop, onDoubleClick, onPointerEnter, onPointerLeave, }) => {
-    const { basePadding, keyframeControlsPlacement, rowBorderRadius, rowHorizontalMargin, } = (0, react_1.useContext)(TimelineRowLayoutContext_1.TimelineRowLayoutContext);
+const TimelineRowChrome = ({ depth, eye, keyframeControls, arrow, children, style, selected, selectable, onSelect, showSelectedBackground, containsSelection, hovered = false, outerHeight, onDragLeave, onDragOver, onDrop, onDoubleClick, onPointerEnter, onPointerLeave, }) => {
+    const { basePadding, rowBorderRadius, rowHorizontalMargin } = (0, react_1.useContext)(TimelineRowLayoutContext_1.TimelineRowLayoutContext);
     const selectedBackground = (0, react_1.useContext)(exports.TimelineRowSelectedBackgroundContext);
     const indentWidth = (0, timeline_row_layout_1.getTimelineRowIndentWidth)(depth);
     const chromeColumnStyle = (0, react_1.useMemo)(() => ({
@@ -135,8 +135,7 @@ const TimelineRowChrome = ({ depth, eye, keyframeControls, arrow, children, styl
             backgroundColor: highlightBackground,
         };
     }, [outerHeight, highlightBackground]);
-    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] }));
+    const chrome = (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [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] }) })), children] }));
     if (outerStyle) {
         return (jsx_runtime_1.jsx("div", { style: outerStyle, onDragLeave: onDragLeave, onDragOver: onDragOver, onDrop: onDrop, onPointerDown: selectable ? onPointerDown : undefined, onContextMenu: selectable ? onContextMenu : undefined, onDoubleClick: onDoubleClickIfNotInteractive, onPointerEnter: onPointerEnter, onPointerLeave: onPointerLeave, children: jsx_runtime_1.jsx("div", { style: innerRowStyle, children: chrome }) }));
     }

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

@@ -2,7 +2,6 @@ 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,21 +2,18 @@
 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: InspectorPanelLayout_1.INSPECTOR_PANEL_HORIZONTAL_PADDING,
+    rowHorizontalMargin: 4,
 };
 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

@@ -12,18 +12,14 @@ const timeline_field_utils_1 = require("./timeline-field-utils");
 const TimelineLayerEye_1 = require("./TimelineLayerEye");
 const Transform3DModeContext_1 = require("./Transform3DModeContext");
 const leftDraggerStyle = {
-    paddingBottom: 2,
     paddingLeft: 0,
-    paddingTop: 2,
     textAlign: 'left',
-    width: 52,
+    width: 40,
 };
 const rightDraggerStyle = {
-    paddingBottom: 2,
     paddingRight: 0,
-    paddingTop: 2,
     textAlign: 'left',
-    width: 52,
+    width: 40,
 };
 const containerStyle = {
     alignItems: 'center',