@remotion/studio 4.0.514 → 4.0.516

package/dist/components/Timeline/TimelineEffectPropItem.js

@@ -5,13 +5,16 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const studio_shared_1 = require("@remotion/studio-shared");
 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 call_api_1 = require("../call-api");
 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");
@@ -128,7 +131,7 @@ const TimelineEffectPropValue = ({ field, nodePath, validatedLocation, sourceFra
                 value,
                 schema: field.effectSchema,
             }),
-            apiCall: () => (0, call_api_1.callApi)('/api/save-effect-props', {
+            apiCall: () => (0, effect_operations_api_1.saveEffectProps)({
                 type: 'value',
                 fileName: validatedLocation.source,
                 sequenceNodePath: nodePath,
@@ -182,6 +185,9 @@ const TimelineEffectPropValue = ({ field, nodePath, validatedLocation, sourceFra
     if (field.fieldSchema.type === 'scale') {
         throw new Error(`Effects do not support scale fields: ${field.key}`);
     }
+    if (!(0, browser_studio_operations_1.canUseEffectOperations)()) {
+        return jsx_runtime_1.jsx(TimelineSchemaField_1.UnsupportedStatus, { label: "read only", formattedValue: false });
+    }
     if (effectStatus.type === 'cannot-update-effect') {
         if (effectStatus.reason === 'computed') {
             return (jsx_runtime_1.jsx(TimelineComputedEffectPropValue, { propStatus: { status: 'computed' }, field: field, runtimeValueStore: runtimeValueStore, validatedLocation: validatedLocation }));
@@ -319,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',
@@ -332,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;
@@ -344,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/TimelineExpandArrowButton.js

@@ -37,11 +37,11 @@ exports.TimelineExpandArrowSpacer = exports.TimelineExpandArrowButton = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = __importStar(require("react"));
 const colors_1 = require("../../helpers/colors");
+const hoverable_1 = require("../../helpers/hoverable");
+const caret_1 = require("../../icons/caret");
 const arrowButton = {
     background: 'none',
     border: 'none',
-    color: colors_1.WHITE,
-    cursor: 'pointer',
     padding: 0,
     display: 'flex',
     alignItems: 'center',
@@ -57,9 +57,7 @@ const arrowButton = {
 };
 const arrowSpacer = {
     ...arrowButton,
-    cursor: 'default',
 };
-const svgStyle = { display: 'block' };
 const TimelineExpandArrowButton = ({ isExpanded, onClick, label, disabled = false }) => {
     const handleClick = react_1.default.useCallback((e) => {
         e.stopPropagation();
@@ -71,12 +69,17 @@ const TimelineExpandArrowButton = ({ isExpanded, onClick, label, disabled = fals
     const style = (0, react_1.useMemo)(() => {
         return {
             ...arrowButton,
-            transform: isExpanded ? 'rotate(90deg)' : 'rotate(0deg)',
-            cursor: disabled ? 'default' : 'pointer',
+            ...(0, hoverable_1.hoverableStyle)({
+                idleBackground: colors_1.TRANSPARENT,
+                hoverBackground: colors_1.TRANSPARENT,
+                idleColor: colors_1.LIGHT_GRAY,
+                hoverColor: disabled ? colors_1.LIGHT_GRAY : colors_1.WHITE,
+            }),
+            transform: isExpanded ? 'rotate(0deg)' : 'rotate(-90deg)',
             opacity: disabled ? 0.5 : 1,
         };
     }, [isExpanded, disabled]);
-    return (jsx_runtime_1.jsx("button", { type: "button", style: style, onClick: handleClick, onDoubleClick: stopPropagation, onPointerDown: stopPropagation, disabled: disabled, "aria-expanded": isExpanded, "aria-label": `${isExpanded ? 'Collapse' : 'Expand'} ${label}`, children: jsx_runtime_1.jsx("svg", { width: "12", height: "12", viewBox: "0 0 8 8", style: svgStyle, children: jsx_runtime_1.jsx("path", { d: "M2 1L6 4L2 7Z", fill: colors_1.LIGHT_GRAY }) }) }));
+    return (jsx_runtime_1.jsx("button", { type: "button", className: `${hoverable_1.HOVERABLE_CLASS_NAME} __remotion-timeline-expand-arrow-button`, style: style, onClick: handleClick, onDoubleClick: stopPropagation, onPointerDown: stopPropagation, disabled: disabled, "aria-expanded": isExpanded, "aria-label": `${isExpanded ? 'Collapse' : 'Expand'} ${label}`, children: jsx_runtime_1.jsx(caret_1.CaretDown, {}) }));
 };
 exports.TimelineExpandArrowButton = TimelineExpandArrowButton;
 const TimelineExpandArrowSpacer = () => {

package/dist/components/Timeline/TimelineExpandedKeyframeRow.js

@@ -59,7 +59,10 @@ const rowSeparator = {
 };
 const TimelineExpandedKeyframeRowUnmemoized = ({ height, keyframes, canEditEasing, nodePathInfo, showSeparator }) => {
     const timelineWidth = (0, react_1.useContext)(TimelineWidthProvider_1.TimelineWidthContext);
-    const rowHighlightBackground = (0, TimelineSelection_1.useTimelineRowHighlightBackground)(nodePathInfo);
+    const rowHighlightBackground = (0, TimelineSelection_1.useTimelineRowHighlightBackground)(nodePathInfo, {
+        hovered: false,
+        selectedBackground: TimelineSelection_1.TIMELINE_EXPANDED_SELECTED_BACKGROUND,
+    });
     const easingSegments = canEditEasing
         ? (0, get_timeline_easing_segments_1.getTimelineEasingSegments)(keyframes)
         : [];

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/TimelineExpandedSection.js

@@ -39,8 +39,11 @@ const react_1 = __importStar(require("react"));
 const colors_1 = require("../../helpers/colors");
 const timeline_layout_1 = require("../../helpers/timeline-layout");
 const TimelineExpandedRow_1 = require("./TimelineExpandedRow");
+const TimelineRowChrome_1 = require("./TimelineRowChrome");
+const TimelineSelection_1 = require("./TimelineSelection");
 const use_timeline_expanded_tree_1 = require("./use-timeline-expanded-tree");
 const expandedSectionBase = {
+    backgroundColor: TimelineSelection_1.TIMELINE_BACKGROUND,
     color: colors_1.WHITE,
     fontFamily: 'Arial, Helvetica, sans-serif',
     fontSize: 12,
@@ -68,16 +71,16 @@ const TimelineExpandedSection = ({ sequence, validatedLocation, nodePathInfo, ne
     const style = (0, react_1.useMemo)(() => {
         return {
             ...expandedSectionBase,
-            height: expandedHeight,
+            height: expandedHeight + timeline_layout_1.TIMELINE_ITEM_BORDER_BOTTOM,
         };
     }, [expandedHeight]);
     const { schema } = sequence.controls;
     if (flat.length === 0) {
         return null;
     }
-    return (jsx_runtime_1.jsx("div", { style: style, children: flat.map(({ node, depth }, i) => {
-            return (jsx_runtime_1.jsxs(react_1.default.Fragment, { children: [i > 0 ? jsx_runtime_1.jsx("div", { style: separator }) : null, jsx_runtime_1.jsx(TimelineExpandedRow_1.TimelineExpandedRow, { node: node, depth: depth, nestedDepth: nestedDepth, getIsExpanded: getIsExpanded, toggleTrack: toggleTrack, validatedLocation: validatedLocation, nodePath: nodePathInfo.sequenceSubscriptionKey, schema: schema, keyframeDisplayOffset: keyframeDisplayOffset, keyframeControlsMode: "timeline" })
-                ] }, JSON.stringify(node.nodePathInfo)));
-        }) }));
+    return (jsx_runtime_1.jsx(TimelineRowChrome_1.TimelineRowSelectedBackgroundContext.Provider, { value: TimelineSelection_1.TIMELINE_EXPANDED_SELECTED_BACKGROUND, children: jsx_runtime_1.jsx("div", { style: style, children: flat.map(({ node, depth }, i) => {
+                return (jsx_runtime_1.jsxs(react_1.default.Fragment, { children: [i > 0 ? jsx_runtime_1.jsx("div", { style: separator }) : null, jsx_runtime_1.jsx(TimelineExpandedRow_1.TimelineExpandedRow, { node: node, depth: depth, nestedDepth: nestedDepth, getIsExpanded: getIsExpanded, toggleTrack: toggleTrack, validatedLocation: validatedLocation, nodePath: nodePathInfo.sequenceSubscriptionKey, schema: schema, keyframeDisplayOffset: keyframeDisplayOffset, keyframeControlsMode: "timeline" })
+                    ] }, JSON.stringify(node.nodePathInfo)));
+            }) }) }));
 };
 exports.TimelineExpandedSection = TimelineExpandedSection;

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

@@ -1,5 +1,6 @@
 import React from 'react';
 import type { TimelineSelectionInteraction } from './TimelineSelection';
+export declare const TimelineRowSelectedBackgroundContext: React.Context<string>;
 export declare const TimelineRowKeyframeControlsColumn: React.FC<{
     readonly children: React.ReactNode;
     readonly depth: number;
@@ -17,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

@@ -1,13 +1,47 @@
 "use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.TimelineRowChrome = exports.TimelineRowKeyframeControlsColumn = void 0;
+exports.TimelineRowChrome = exports.TimelineRowKeyframeControlsColumn = exports.TimelineRowSelectedBackgroundContext = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
+const react_1 = __importStar(require("react"));
 const colors_1 = require("../../helpers/colors");
 const Padder_1 = require("./Padder");
 const timeline_row_layout_1 = require("./timeline-row-layout");
 const TimelineRowLayoutContext_1 = require("./TimelineRowLayoutContext");
 const TimelineSelection_1 = require("./TimelineSelection");
+exports.TimelineRowSelectedBackgroundContext = react_1.default.createContext(TimelineSelection_1.TIMELINE_SELECTED_BACKGROUND);
 const rowBase = {
     alignItems: 'stretch',
     display: 'flex',
@@ -35,8 +69,9 @@ 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)(() => ({
         alignItems: 'center',
@@ -72,6 +107,7 @@ const TimelineRowChrome = ({ depth, eye, keyframeControls, arrow, children, styl
         selected,
         containsSelection,
         hovered,
+        selectedBackground,
     });
     const innerRowStyle = (0, react_1.useMemo)(() => ({
         ...rowBase,
@@ -99,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',

package/dist/components/Timeline/TimelineSchemaField.js

@@ -37,6 +37,7 @@ exports.TimelineFieldValue = exports.TimelineNonEditableStatus = exports.Unsuppo
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = __importStar(require("react"));
 const colors_1 = require("../../helpers/colors");
+const hoverable_1 = require("../../helpers/hoverable");
 const modals_1 = require("../../state/modals");
 const SettingsContext_1 = require("../SettingsContext");
 const timeline_field_display_utils_1 = require("./timeline-field-display-utils");
@@ -62,7 +63,12 @@ const computedValue = {
     pointerEvents: 'none',
 };
 const fixLinkBase = {
-    color: colors_1.LIGHT_TEXT,
+    ...(0, hoverable_1.hoverableStyle)({
+        idleBackground: colors_1.TRANSPARENT,
+        hoverBackground: colors_1.TRANSPARENT,
+        idleColor: colors_1.LIGHT_TEXT,
+        hoverColor: colors_1.WHITE,
+    }),
     display: 'inline-block',
     fontSize: 10,
     fontStyle: 'normal',
@@ -73,7 +79,7 @@ const fixLinkBase = {
     appearance: 'none',
     background: 'none',
     border: 'none',
-    cursor: 'pointer',
+    cursor: 'default',
     padding: 0,
 };
 const UnsupportedStatus = ({ label, onFix, formattedValue }) => {
@@ -94,7 +100,7 @@ const UnsupportedStatus = ({ label, onFix, formattedValue }) => {
         event.stopPropagation();
     };
     return (jsx_runtime_1.jsxs("span", { style: unsupportedStatusWrapper, onPointerEnter: () => setHovered(true), onPointerLeave: () => setHovered(false), children: [
-            jsx_runtime_1.jsx("span", { style: formattedValue ? computedValue : unsupportedLabel, inert: formattedValue, children: label }), onFix ? (jsx_runtime_1.jsx("button", { type: "button", style: fixLink, title: "Fix computed Studio value", onClick: (event) => {
+            jsx_runtime_1.jsx("span", { style: formattedValue ? computedValue : unsupportedLabel, inert: formattedValue, children: label }), onFix ? (jsx_runtime_1.jsx("button", { type: "button", className: `${hoverable_1.FOCUS_VISIBLE_ONLY_CLASS_NAME} ${hoverable_1.HOVERABLE_CLASS_NAME}`, style: fixLink, title: "Fix computed Studio value", onClick: (event) => {
                     stopMousePropagation(event);
                     onFix();
                 }, onDoubleClick: stopMousePropagation, onPointerDown: stopPointerPropagation, onFocus: () => setFocused(true), onBlur: () => setFocused(false), tabIndex: visible ? 0 : -1, children: "Fix" })) : null] }));