@remotion/studio 4.0.514 → 4.0.515

package/dist/components/RenderModal/WebRenderModal.js

@@ -6,6 +6,7 @@ const studio_shared_1 = require("@remotion/studio-shared");
 const web_renderer_1 = require("@remotion/web-renderer");
 const react_1 = require("react");
 const ShortcutHint_1 = require("../../error-overlay/remotion-overlay/ShortcutHint");
+const browser_studio_operations_1 = require("../../helpers/browser-studio-operations");
 const audio_1 = require("../../icons/audio");
 const certificate_1 = require("../../icons/certificate");
 const file_1 = require("../../icons/file");
@@ -105,6 +106,7 @@ const WebRenderModal = ({ initialFrame, defaultProps, inFrameMark, outFrameMark,
             ? 'video'
             : 'still');
     const [tab, setTab] = (0, react_1.useState)('general');
+    const isBrowserStudio = (0, browser_studio_operations_1.getBrowserStudioOperations)() !== null;
     const [imageFormat, setImageFormat] = (0, react_1.useState)(() => initialStillImageFormat !== null && initialStillImageFormat !== void 0 ? initialStillImageFormat : 'png');
     const [frame, setFrame] = (0, react_1.useState)(() => initialFrame);
     const [logLevel, setLogLevel] = (0, react_1.useState)(() => initialLogLevel);
@@ -418,11 +420,11 @@ const WebRenderModal = ({ initialFrame, defaultProps, inFrameMark, outFrameMark,
                     jsx_runtime_1.jsx(SegmentedControl_1.SegmentedControl, { items: renderTabOptions, needsWrapping: false }), jsx_runtime_1.jsx("div", { style: render_modals_1.flexer }), jsx_runtime_1.jsxs(Button_1.Button, { autoFocus: true, onClick: onAddToQueue, style: render_modals_1.buttonStyle, disabled: !outnameValidation.valid, children: ["Render ", renderMode, jsx_runtime_1.jsx(ShortcutHint_1.ShortcutHint, { keyToPress: "\u21B5", cmdOrCtrl: true })
                         ] })
                 ] }), jsx_runtime_1.jsxs("div", { style: render_modals_1.horizontalLayout, children: [
-                    jsx_runtime_1.jsxs("div", { style: render_modals_1.leftSidebar, children: [jsx_runtime_1.jsx(vertical_1.VerticalTab, { style: render_modals_1.horizontalTab, selected: tab === 'general', onClick: () => setTab('general'), renderIcon: (color) => (jsx_runtime_1.jsx("div", { style: render_modals_1.iconContainer, children: jsx_runtime_1.jsx(file_1.FileIcon, { color: color, style: render_modals_1.icon }) })), children: "General" }), jsx_runtime_1.jsx(vertical_1.VerticalTab, { style: render_modals_1.horizontalTab, selected: tab === 'data', onClick: () => setTab('data'), renderIcon: (color) => (jsx_runtime_1.jsx("div", { style: render_modals_1.iconContainer, children: jsx_runtime_1.jsx(input_props_1.InputPropsIcon, { color: color, style: render_modals_1.icon }) })), children: "Input Props" }), renderMode !== 'audio' ? (jsx_runtime_1.jsx(vertical_1.VerticalTab, { style: render_modals_1.horizontalTab, selected: tab === 'picture', onClick: () => setTab('picture'), renderIcon: (color) => (jsx_runtime_1.jsx("div", { style: render_modals_1.iconContainer, children: jsx_runtime_1.jsx(frame_1.PicIcon, { color: color, style: render_modals_1.icon }) })), children: "Picture" })) : null, renderMode === 'video' || renderMode === 'audio' ? (jsx_runtime_1.jsx(vertical_1.VerticalTab, { style: render_modals_1.horizontalTab, selected: tab === 'audio', onClick: () => setTab('audio'), renderIcon: (color) => (jsx_runtime_1.jsx("div", { style: render_modals_1.iconContainer, children: jsx_runtime_1.jsx(audio_1.AudioIcon, { color: color, style: render_modals_1.icon }) })), children: "Audio" })) : null, jsx_runtime_1.jsx(vertical_1.VerticalTab, { style: render_modals_1.horizontalTab, selected: tab === 'advanced', onClick: () => setTab('advanced'), renderIcon: (color) => (jsx_runtime_1.jsx("div", { style: render_modals_1.iconContainer, children: jsx_runtime_1.jsx(gear_1.GearIcon, { color: color, style: render_modals_1.icon }) })), children: "Other" }), jsx_runtime_1.jsx(vertical_1.VerticalTab, { style: render_modals_1.horizontalTab, selected: false, onClick: () => setSelectedModal({
+                    jsx_runtime_1.jsxs("div", { style: render_modals_1.leftSidebar, children: [jsx_runtime_1.jsx(vertical_1.VerticalTab, { style: render_modals_1.horizontalTab, selected: tab === 'general', onClick: () => setTab('general'), renderIcon: (color) => (jsx_runtime_1.jsx("div", { style: render_modals_1.iconContainer, children: jsx_runtime_1.jsx(file_1.FileIcon, { color: color, style: render_modals_1.icon }) })), children: "General" }), jsx_runtime_1.jsx(vertical_1.VerticalTab, { style: render_modals_1.horizontalTab, selected: tab === 'data', onClick: () => setTab('data'), renderIcon: (color) => (jsx_runtime_1.jsx("div", { style: render_modals_1.iconContainer, children: jsx_runtime_1.jsx(input_props_1.InputPropsIcon, { color: color, style: render_modals_1.icon }) })), children: "Input Props" }), renderMode !== 'audio' ? (jsx_runtime_1.jsx(vertical_1.VerticalTab, { style: render_modals_1.horizontalTab, selected: tab === 'picture', onClick: () => setTab('picture'), renderIcon: (color) => (jsx_runtime_1.jsx("div", { style: render_modals_1.iconContainer, children: jsx_runtime_1.jsx(frame_1.PicIcon, { color: color, style: render_modals_1.icon }) })), children: "Picture" })) : null, renderMode === 'video' || renderMode === 'audio' ? (jsx_runtime_1.jsx(vertical_1.VerticalTab, { style: render_modals_1.horizontalTab, selected: tab === 'audio', onClick: () => setTab('audio'), renderIcon: (color) => (jsx_runtime_1.jsx("div", { style: render_modals_1.iconContainer, children: jsx_runtime_1.jsx(audio_1.AudioIcon, { color: color, style: render_modals_1.icon }) })), children: "Audio" })) : null, jsx_runtime_1.jsx(vertical_1.VerticalTab, { style: render_modals_1.horizontalTab, selected: tab === 'advanced', onClick: () => setTab('advanced'), renderIcon: (color) => (jsx_runtime_1.jsx("div", { style: render_modals_1.iconContainer, children: jsx_runtime_1.jsx(gear_1.GearIcon, { color: color, style: render_modals_1.icon }) })), children: "Other" }), isBrowserStudio ? null : (jsx_runtime_1.jsx(vertical_1.VerticalTab, { style: render_modals_1.horizontalTab, selected: false, onClick: () => setSelectedModal({
                                     type: 'settings',
                                     initialTab: 'license',
                                     initialPublicLicenseKey: publicLicenseKey,
-                                }), renderIcon: (color) => (jsx_runtime_1.jsx("div", { style: render_modals_1.iconContainer, children: jsx_runtime_1.jsx(certificate_1.CertificateIcon, { color: color, style: render_modals_1.icon }) })), children: "License" })] }), jsx_runtime_1.jsx("div", { style: render_modals_1.optionsPanel, className: is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME, children: tab === 'general' ? (jsx_runtime_1.jsx(WebRenderModalBasic_1.WebRenderModalBasic, { renderMode: renderMode, resolvedComposition: resolvedComposition, imageFormat: imageFormat, setStillFormat: setStillFormat, frame: frame, onFrameChanged: onFrameChanged, onFrameSetDirectly: onFrameSetDirectly, container: container, setContainerFormat: setContainerFormat, setCodec: setCodecWithContainer, encodableVideoCodecs: encodableVideoCodecs, effectiveVideoCodec: effectiveVideoCodec, startFrame: finalStartFrame, setStartFrame: setStartFrame, endFrame: finalEndFrame, setEndFrame: setEndFrame, outName: outName, onOutNameChange: onOutNameChange, validationMessage: outnameValidation.valid ? null : outnameValidation.error.message, logLevel: logLevel, setLogLevel: setLogLevel })) : tab === 'data' ? (jsx_runtime_1.jsx(DataEditor_1.DataEditor, { defaultProps: inputProps, setDefaultProps: setInputProps, unresolvedComposition: unresolvedComposition, propsEditType: "input-props", canSaveDefaultProps: {
+                                }), renderIcon: (color) => (jsx_runtime_1.jsx("div", { style: render_modals_1.iconContainer, children: jsx_runtime_1.jsx(certificate_1.CertificateIcon, { color: color, style: render_modals_1.icon }) })), children: "License" }))] }), jsx_runtime_1.jsx("div", { style: render_modals_1.optionsPanel, className: is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME, children: tab === 'general' ? (jsx_runtime_1.jsx(WebRenderModalBasic_1.WebRenderModalBasic, { renderMode: renderMode, resolvedComposition: resolvedComposition, imageFormat: imageFormat, setStillFormat: setStillFormat, frame: frame, onFrameChanged: onFrameChanged, onFrameSetDirectly: onFrameSetDirectly, container: container, setContainerFormat: setContainerFormat, setCodec: setCodecWithContainer, encodableVideoCodecs: encodableVideoCodecs, effectiveVideoCodec: effectiveVideoCodec, startFrame: finalStartFrame, setStartFrame: setStartFrame, endFrame: finalEndFrame, setEndFrame: setEndFrame, outName: outName, onOutNameChange: onOutNameChange, validationMessage: outnameValidation.valid ? null : outnameValidation.error.message, logLevel: logLevel, setLogLevel: setLogLevel })) : tab === 'data' ? (jsx_runtime_1.jsx(DataEditor_1.DataEditor, { defaultProps: inputProps, setDefaultProps: setInputProps, unresolvedComposition: unresolvedComposition, propsEditType: "input-props", canSaveDefaultProps: {
                                 canUpdate: false,
                                 reason: 'render dialogue',
                                 determined: false,

package/dist/components/RenderQueue/RenderQueueItem.js

@@ -4,6 +4,7 @@ exports.RenderQueueItem = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const remotion_1 = require("remotion");
+const browser_studio_operations_1 = require("../../helpers/browser-studio-operations");
 const colors_1 = require("../../helpers/colors");
 const url_state_1 = require("../../helpers/url-state");
 const layout_1 = require("../layout");
@@ -54,6 +55,7 @@ const RenderQueueItem = ({ job, selected }) => {
     const [hovered, setHovered] = (0, react_1.useState)(false);
     const { setCanvasContent } = (0, react_1.useContext)(remotion_1.Internals.CompositionSetters);
     const isClientJob = (0, context_1.isClientRenderJob)(job);
+    const isBrowserStudio = (0, browser_studio_operations_1.getBrowserStudioOperations)() !== null;
     const { canDrag, isDragging, onDragEnd, onDragStart } = (0, use_render_output_file_drag_1.useRenderOutputFileDrag)(job);
     const onPointerEnter = (0, react_1.useCallback)(() => {
         setHovered(true);
@@ -147,6 +149,6 @@ const RenderQueueItem = ({ job, selected }) => {
     return (jsx_runtime_1.jsxs(layout_1.Row, { "data-render-queue-item": job.id, onPointerEnter: onPointerEnter, onPointerLeave: onPointerLeave, style: containerStyle, align: "center", onClick: onClick, draggable: canDrag, onDragStart: onDragStart, onDragEnd: onDragEnd, className: selected ? SELECTED_CLASSNAME : undefined, children: [
             jsx_runtime_1.jsx(RenderQueueItemStatus_1.RenderQueueItemStatus, { job: job }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 1 }), jsx_runtime_1.jsxs("div", { style: right, children: [
                     jsx_runtime_1.jsx("div", { style: title, children: job.compositionId }), jsx_runtime_1.jsx("div", { style: subtitle, children: job.status === 'done' ? (jsx_runtime_1.jsx(RenderQueueOutputName_1.RenderQueueOutputName, { job: job })) : job.status === 'failed' ? (jsx_runtime_1.jsx(RenderQueueError_1.RenderQueueError, { job: job })) : job.status === 'running' ? (jsx_runtime_1.jsx(RenderQueueProgressMessage_1.RenderQueueProgressMessage, { job: job })) : job.status === 'saving' ? (jsx_runtime_1.jsx(RenderQueueSavingMessage_1.RenderQueueSavingMessage, {})) : job.status === 'cancelled' ? (jsx_runtime_1.jsx(RenderQueueCancelledMessage_1.RenderQueueCancelledMessage, {})) : null })
-                ] }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 1 }), !isDragging ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [canCopyToClipboard ? (jsx_runtime_1.jsx(RenderQueueCopyToClipboard_1.RenderQueueCopyToClipboard, { job: job })) : null, canRepeat ? jsx_runtime_1.jsx(RenderQueueRepeat_1.RenderQueueRepeatItem, { job: job }) : null, job.status === 'running' ? (jsx_runtime_1.jsx(RenderQueueItemCancelButton_1.RenderQueueCancelButton, { job: job })) : (jsx_runtime_1.jsx(RenderQueueRemoveItem_1.RenderQueueRemoveItem, { job: job })), job.status === 'done' ? (clientBlobInfo ? (jsx_runtime_1.jsx(RenderQueueDownloadItem_1.RenderQueueDownloadItem, { job: job })) : (jsx_runtime_1.jsx(RenderQueueOpenInFolder_1.RenderQueueOpenInFinderItem, { job: job }))) : null] })) : null] }));
+                ] }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 1 }), !isDragging ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [canCopyToClipboard ? (jsx_runtime_1.jsx(RenderQueueCopyToClipboard_1.RenderQueueCopyToClipboard, { job: job })) : null, canRepeat ? jsx_runtime_1.jsx(RenderQueueRepeat_1.RenderQueueRepeatItem, { job: job }) : null, job.status === 'running' ? (jsx_runtime_1.jsx(RenderQueueItemCancelButton_1.RenderQueueCancelButton, { job: job })) : isBrowserStudio ? null : (jsx_runtime_1.jsx(RenderQueueRemoveItem_1.RenderQueueRemoveItem, { job: job })), job.status === 'done' ? (clientBlobInfo ? (jsx_runtime_1.jsx(RenderQueueDownloadItem_1.RenderQueueDownloadItem, { job: job })) : isBrowserStudio ? null : (jsx_runtime_1.jsx(RenderQueueOpenInFolder_1.RenderQueueOpenInFinderItem, { job: job }))) : null] })) : null] }));
 };
 exports.RenderQueueItem = RenderQueueItem;

package/dist/components/RenderQueue/RenderQueueOpenInFolder.js

@@ -3,12 +3,14 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.RenderQueueOpenInFinderItem = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
+const browser_studio_operations_1 = require("../../helpers/browser-studio-operations");
 const colors_1 = require("../../helpers/colors");
 const folder_1 = require("../../icons/folder");
 const InlineAction_1 = require("../InlineAction");
 const NotificationCenter_1 = require("../Notifications/NotificationCenter");
 const actions_1 = require("./actions");
 const RenderQueueOpenInFinderItem = ({ job }) => {
+    const isBrowserStudio = (0, browser_studio_operations_1.getBrowserStudioOperations)() !== null;
     const onClick = (0, react_1.useCallback)((e) => {
         e.stopPropagation();
         (0, actions_1.openInFileExplorer)({ directory: job.outName }).catch((err) => {
@@ -24,6 +26,6 @@ const RenderQueueOpenInFinderItem = ({ job }) => {
     const renderAction = (0, react_1.useCallback)((color) => {
         return jsx_runtime_1.jsx(folder_1.ExpandedFolderIconSolid, { style: icon, color: color });
     }, [icon]);
-    return (jsx_runtime_1.jsx(InlineAction_1.InlineAction, { renderAction: renderAction, onClick: onClick, variant: null }));
+    return isBrowserStudio ? null : (jsx_runtime_1.jsx(InlineAction_1.InlineAction, { renderAction: renderAction, onClick: onClick, variant: null }));
 };
 exports.RenderQueueOpenInFinderItem = RenderQueueOpenInFinderItem;

package/dist/components/RenderQueue/RenderQueueRemoveItem.js

@@ -46,6 +46,6 @@ const RenderQueueRemoveItem = ({ job }) => {
     const renderAction = (0, react_1.useCallback)((color) => {
         return (jsx_runtime_1.jsx("svg", { style: icon, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 320 512", children: jsx_runtime_1.jsx("path", { fill: color, d: "M310.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L160 210.7 54.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L114.7 256 9.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L160 301.3 265.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L205.3 256 310.6 150.6z" }) }));
     }, [icon]);
-    return (jsx_runtime_1.jsx(InlineAction_1.InlineAction, { renderAction: renderAction, onClick: onClick, variant: null }));
+    return (jsx_runtime_1.jsx(InlineAction_1.InlineAction, { renderAction: renderAction, onClick: onClick, title: "Remove", variant: null }));
 };
 exports.RenderQueueRemoveItem = RenderQueueRemoveItem;

package/dist/components/SelectedOutlineCanvasRotation.d.ts

@@ -6,4 +6,5 @@ export declare const SelectedOutlineCanvasRotation: React.FC<{
     readonly layoutTarget: SelectedOutlineLayoutTarget;
     readonly onDraggingChange: (dragging: boolean) => void;
     readonly outline: SelectedOutline;
+    readonly transform3DMode: boolean;
 }>;

package/dist/components/SelectedOutlineCanvasRotation.js

@@ -52,10 +52,14 @@ 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 rotationDegreesPerPixel = 0.5;
-const SelectedOutlineCanvasRotation = ({ getLatestTargetByKey, layoutTarget, onDraggingChange, outline }) => {
+const canvas2DRotationCursor = (0, selected_outline_measurement_1.getRotationCursor)(0);
+const SelectedOutlineCanvasRotation = ({ getLatestTargetByKey, layoutTarget, onDraggingChange, outline, transform3DMode, }) => {
     const { getDragOverrides } = (0, react_1.useContext)(remotion_1.Internals.VisualModeDragOverridesContext);
     const { setPropStatuses, setDragOverrides, clearDragOverrides } = (0, react_1.useContext)(remotion_1.Internals.VisualModeSettersContext);
     const { editorSnapping } = (0, react_1.useContext)(editor_snapping_1.EditorSnappingContext);
+    const cursor = transform3DMode
+        ? canvas_rotation_cursor_1.canvasRotationCursor
+        : canvas2DRotationCursor;
     const onPointerDown = react_1.default.useCallback((event) => {
         var _a, _b;
         if (event.button !== 0) {
@@ -76,7 +80,10 @@ const SelectedOutlineCanvasRotation = ({ getLatestTargetByKey, layoutTarget, onD
             return;
         }
         const previousSvgCursor = svg.style.cursor;
-        svg.style.cursor = canvas_rotation_cursor_1.canvasRotationCursor;
+        const dragCursor = rotationDrag.transform3DMode
+            ? canvas_rotation_cursor_1.canvasRotationCursor
+            : canvas2DRotationCursor;
+        svg.style.cursor = dragCursor;
         const startPointer = { x: event.clientX, y: event.clientY };
         const center = (0, svg_point_to_client_point_1.svgPointToClientPoint)((0, selected_outline_measurement_1.getSelectedOutlineRotationPivot)({
             dimensions: outline.dimensions,
@@ -106,7 +113,7 @@ const SelectedOutlineCanvasRotation = ({ getLatestTargetByKey, layoutTarget, onD
                     return;
                 }
                 dragStarted = true;
-                (0, ForceSpecificCursor_1.forceSpecificCursor)(canvas_rotation_cursor_1.canvasRotationCursor);
+                (0, ForceSpecificCursor_1.forceSpecificCursor)(dragCursor);
                 onDraggingChange(true);
             }
             if (rotationDrag.transform3DMode) {
@@ -234,6 +241,6 @@ const SelectedOutlineCanvasRotation = ({ getLatestTargetByKey, layoutTarget, onD
         setDragOverrides,
         setPropStatuses,
     ]);
-    return (jsx_runtime_1.jsx("polygon", { points: outline.points.map((point) => `${point.x},${point.y}`).join(' '), fill: colors_1.TRANSPARENT, pointerEvents: "all", cursor: canvas_rotation_cursor_1.canvasRotationCursor, onPointerDown: onPointerDown, "data-remotion-studio-canvas-rotation": true }));
+    return (jsx_runtime_1.jsx("polygon", { points: outline.points.map((point) => `${point.x},${point.y}`).join(' '), fill: colors_1.TRANSPARENT, pointerEvents: "all", cursor: cursor, onPointerDown: onPointerDown, "data-remotion-studio-canvas-rotation": true }));
 };
 exports.SelectedOutlineCanvasRotation = SelectedOutlineCanvasRotation;

package/dist/components/SelectedOutlineElement.js

@@ -393,7 +393,7 @@ const SelectedOutlineElementUnmemoized = ({ compositionHeight, compositionWidth,
         setPropStatuses,
     ]);
     return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
-            jsx_runtime_1.jsx(SelectedOutlinePolygon_1.SelectedOutlinePolygon, { compositionHeight: compositionHeight, compositionWidth: compositionWidth, directlySelected: (layoutTarget === null || layoutTarget === void 0 ? void 0 : layoutTarget.selected) === true, dragging: dragging, getAllDragOutlines: getAllDragOutlines, getAllDragTargets: getAllDragTargets, getLayoutTarget: getLayoutTarget, getTarget: getTarget, hasTarget: layoutTarget !== undefined, hovered: hovered, outline: outline, onContextMenuOpen: onContextMenuOpen, onContextMenuOpenChange: onContextMenuOpenChange, onDraggingChange: onDraggingChange, onHoverChange: onHoverChange, onSnapPointsChange: onSnapPointsChange, onSelect: onSelect, onDoubleClickTarget: onDoubleClickTarget, scale: scale, showSelectedOutline: (_a = layoutTarget === null || layoutTarget === void 0 ? void 0 : layoutTarget.showSelectedOutline) !== null && _a !== void 0 ? _a : false }), (layoutTarget === null || layoutTarget === void 0 ? void 0 : layoutTarget.selectedForRotation) && (controlTarget === null || controlTarget === void 0 ? void 0 : controlTarget.rotationDrag) ? (jsx_runtime_1.jsx(SelectedOutlineCanvasRotation_1.SelectedOutlineCanvasRotation, { getLatestTargetByKey: getLatestTargetByKey, layoutTarget: layoutTarget, onDraggingChange: onDraggingChange, outline: outline })) : null, jsx_runtime_1.jsx(SelectedOutlineCropControls_1.SelectedOutlineCropControls, { outline: outline, onDraggingChange: onDraggingChange, target: controlTarget }), (controlTarget === null || controlTarget === void 0 ? void 0 : controlTarget.cropDrag) === null &&
+            jsx_runtime_1.jsx(SelectedOutlinePolygon_1.SelectedOutlinePolygon, { compositionHeight: compositionHeight, compositionWidth: compositionWidth, containsSelection: (layoutTarget === null || layoutTarget === void 0 ? void 0 : layoutTarget.containsSelection) === true, directlySelected: (layoutTarget === null || layoutTarget === void 0 ? void 0 : layoutTarget.selected) === true, dragging: dragging, getAllDragOutlines: getAllDragOutlines, getAllDragTargets: getAllDragTargets, getLayoutTarget: getLayoutTarget, getTarget: getTarget, hasTarget: layoutTarget !== undefined, hovered: hovered, outline: outline, onContextMenuOpen: onContextMenuOpen, onContextMenuOpenChange: onContextMenuOpenChange, onDraggingChange: onDraggingChange, onHoverChange: onHoverChange, onSnapPointsChange: onSnapPointsChange, onSelect: onSelect, onDoubleClickTarget: onDoubleClickTarget, scale: scale, showSelectedOutline: (_a = layoutTarget === null || layoutTarget === void 0 ? void 0 : layoutTarget.showSelectedOutline) !== null && _a !== void 0 ? _a : false }), (layoutTarget === null || layoutTarget === void 0 ? void 0 : layoutTarget.selectedForRotation) && (controlTarget === null || controlTarget === void 0 ? void 0 : controlTarget.rotationDrag) ? (jsx_runtime_1.jsx(SelectedOutlineCanvasRotation_1.SelectedOutlineCanvasRotation, { getLatestTargetByKey: getLatestTargetByKey, layoutTarget: layoutTarget, onDraggingChange: onDraggingChange, outline: outline, transform3DMode: controlTarget.rotationDrag.transform3DMode })) : null, jsx_runtime_1.jsx(SelectedOutlineCropControls_1.SelectedOutlineCropControls, { outline: outline, onDraggingChange: onDraggingChange, target: controlTarget }), (controlTarget === null || controlTarget === void 0 ? void 0 : controlTarget.cropDrag) === null &&
                 ((layoutTarget === null || layoutTarget === void 0 ? void 0 : layoutTarget.containsSelection) || hovered)
                 ? controlLayout.scaleEdges.map((edge) => (jsx_runtime_1.jsx(SelectedOutlineScaleEdgeLine_1.SelectedOutlineScaleEdgeLine, { getAllScaleDragTargets: getAllScaleDragTargets, dragging: dragging, edge: edge, hitWidth: edge === 'top' || edge === 'bottom'
                         ? controlLayout.scaleHitWidth.horizontal

package/dist/components/SelectedOutlinePolygon.d.ts

@@ -6,6 +6,7 @@ import type { TimelineSelection, TimelineSelectionInteraction } from './Timeline
 export declare const SelectedOutlinePolygon: React.NamedExoticComponent<{
     readonly compositionHeight: number;
     readonly compositionWidth: number;
+    readonly containsSelection: boolean;
     readonly directlySelected: boolean;
     readonly dragging: boolean;
     readonly getAllDragOutlines: () => readonly SelectedOutline[];

package/dist/components/SelectedOutlinePolygon.js

@@ -56,7 +56,7 @@ 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, directlySelected, dragging, getAllDragOutlines, getAllDragTargets, getLayoutTarget, getTarget, hasTarget, hovered, onContextMenuOpen, onContextMenuOpenChange, outline, onDraggingChange, onHoverChange, onSnapPointsChange, onSelect, onDoubleClickTarget, scale, showSelectedOutline, }) => {
+const SelectedOutlinePolygonUnmemoized = ({ compositionHeight, compositionWidth, containsSelection, directlySelected, 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);
     const { getDragOverrides } = (0, react_1.useContext)(remotion_1.Internals.VisualModeDragOverridesContext);
@@ -114,7 +114,7 @@ const SelectedOutlinePolygonUnmemoized = ({ compositionHeight, compositionWidth,
         const deferSelection = !selected &&
             !interaction.shiftKey &&
             !interaction.toggleKey &&
-            pointerInsideSelectedOutline;
+            (containsSelection || pointerInsideSelectedOutline);
         if (!deferSelection && shouldUpdateSelection) {
             onSelect(target.selection, interaction);
         }
@@ -317,6 +317,7 @@ const SelectedOutlinePolygonUnmemoized = ({ compositionHeight, compositionWidth,
         clearDragOverrides,
         compositionHeight,
         compositionWidth,
+        containsSelection,
         editorShowGuides,
         editorSnapping,
         getAllDragOutlines,

package/dist/components/Timeline/TimelineClipboardKeybindings.js

@@ -4,13 +4,14 @@ exports.TimelineClipboardKeybindings = exports.getPasteEffectPropTarget = export
 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 clipboard_figma_1 = require("../../helpers/clipboard-figma");
 const clipboard_images_1 = require("../../helpers/clipboard-images");
 const clipboard_svg_1 = require("../../helpers/clipboard-svg");
 const use_keybinding_1 = require("../../helpers/use-keybinding");
-const call_api_1 = require("../call-api");
 const ConfirmationDialog_1 = require("../ConfirmationDialog");
+const effect_operations_api_1 = require("../effect-operations-api");
 const NotificationCenter_1 = require("../Notifications/NotificationCenter");
 const call_add_keyframe_1 = require("./call-add-keyframe");
 const call_delete_keyframe_1 = require("./call-delete-keyframe");
@@ -869,6 +870,9 @@ const TimelineClipboardKeybindings = () => {
                 if (result.status === 'invalid') {
                     return;
                 }
+                if (!(0, browser_studio_operations_1.canUseEffectOperations)()) {
+                    return;
+                }
                 e.preventDefault();
                 if (result.status === 'unsupported-version') {
                     (0, NotificationCenter_1.showNotification)('Cannot paste effects copied from a different Remotion Studio version', 4000);
@@ -892,7 +896,7 @@ const TimelineClipboardKeybindings = () => {
                 const insertAtIndices = (envelope === null || envelope === void 0 ? void 0 : envelope.sourceIdentity) === makeTargetKey(targetSequenceNodePath)
                     ? envelope.originalEffectIndices
                     : null;
-                return (0, call_api_1.callApi)('/api/paste-effects', {
+                return (0, effect_operations_api_1.pasteEffects)({
                     targetFileName: targetSequenceNodePath.absolutePath,
                     targetSequenceNodePath,
                     type: payload.type,

package/dist/components/Timeline/TimelineEffectItem.js

@@ -4,11 +4,12 @@ exports.TimelineEffectItem = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 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 colors_1 = require("../../helpers/colors");
 const timeline_layout_1 = require("../../helpers/timeline-layout");
-const call_api_1 = require("../call-api");
 const ContextMenu_1 = require("../ContextMenu");
+const effect_operations_api_1 = require("../effect-operations-api");
 const NotificationCenter_1 = require("../Notifications/NotificationCenter");
 const save_effect_prop_1 = require("./save-effect-prop");
 const TimelineExpandArrowButton_1 = require("./TimelineExpandArrowButton");
@@ -26,6 +27,14 @@ const rowStyle = {
     height: timeline_layout_1.TREE_GROUP_ROW_HEIGHT,
     cursor: 'default',
 };
+const labelContainerStyle = {
+    alignItems: 'center',
+    alignSelf: 'stretch',
+    display: 'flex',
+    flex: 1,
+    minWidth: 0,
+    paddingRight: timeline_layout_1.EXPANDED_SECTION_PADDING_RIGHT,
+};
 const reorderWrapper = {
     position: 'relative',
 };
@@ -69,6 +78,7 @@ const TimelineEffectItem = ({ label, nodePathInfo, effectIndex, effectSchema, do
     var _b;
     const { previewServerState } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
     const previewConnected = previewServerState.type === 'connected';
+    const canMutateEffects = (0, browser_studio_operations_1.canUseEffectOperations)();
     const { propStatuses } = (0, react_1.useContext)(remotion_1.Internals.VisualModePropStatusesContext);
     const { setPropStatuses } = (0, react_1.useContext)(remotion_1.Internals.VisualModeSettersContext);
     const selection = (0, TimelineSelection_1.useTimelineRowSelection)(nodePathInfo);
@@ -88,11 +98,13 @@ const TimelineEffectItem = ({ label, nodePathInfo, effectIndex, effectSchema, do
         }
         return false;
     }, [disabledStatus]);
-    const canToggle = previewConnected && (disabledStatus === null || disabledStatus === void 0 ? void 0 : disabledStatus.status) === 'static';
+    const canToggle = previewConnected && canMutateEffects && (disabledStatus === null || disabledStatus === void 0 ? void 0 : disabledStatus.status) === 'static';
     const deleteDisabled = !previewConnected ||
+        !canMutateEffects ||
         effectStatus.type !== 'can-update-effect' ||
         !validatedLocation.source;
     const canReorder = previewConnected &&
+        canMutateEffects &&
         effectStatus.type === 'can-update-effect' &&
         Boolean(validatedLocation.source);
     const nodePathKey = (0, react_1.useMemo)(() => remotion_1.Internals.makeSequencePropsSubscriptionKey(nodePath), [nodePath]);
@@ -101,7 +113,7 @@ const TimelineEffectItem = ({ label, nodePathInfo, effectIndex, effectSchema, do
             return;
         }
         try {
-            const result = await (0, call_api_1.callApi)('/api/delete-effect', [
+            const result = await (0, effect_operations_api_1.deleteEffects)([
                 {
                     type: 'single-effect',
                     fileName: validatedLocation.source,
@@ -209,8 +221,11 @@ const TimelineEffectItem = ({ label, nodePathInfo, effectIndex, effectSchema, do
             alignItems: 'center',
             color: (0, TimelineSelection_1.getTimelineColor)(selection.selected, true),
             display: 'inline-flex',
-            marginRight: timeline_layout_1.EXPANDED_SECTION_PADDING_RIGHT,
+            flexShrink: 1,
             minWidth: 0,
+            overflow: 'hidden',
+            textOverflow: 'ellipsis',
+            whiteSpace: 'nowrap',
             boxShadow: containsSelection && !selection.selected
                 ? `inset 0 0 0 2px ${TimelineSelection_1.TIMELINE_SELECTED_LABEL_BACKGROUND}`
                 : undefined,
@@ -288,7 +303,7 @@ const TimelineEffectItem = ({ label, nodePathInfo, effectIndex, effectSchema, do
         setDropIndicator(null);
         currentEffectDrag = null;
         try {
-            const result = await (0, call_api_1.callApi)('/api/reorder-effect', {
+            const result = await (0, effect_operations_api_1.reorderEffect)({
                 fileName: validatedLocation.source,
                 sequenceNodePath: nodePath,
                 fromIndex: dropTarget.dragData.effectIndex,
@@ -321,7 +336,9 @@ 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, onSelect: selection.onSelect, showSelectedBackground: true, containsSelection: containsSelection, isFieldRow: false, 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.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: [
+                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);
     return previewConnected ? (jsx_runtime_1.jsx(ContextMenu_1.ContextMenu, { getItems: getContextMenuItems, children: draggableRow })) : (draggableRow);
 };

package/dist/components/Timeline/TimelineEffectPropItem.js

@@ -5,11 +5,12 @@ 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 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_timeline_keyframes_1 = require("./get-timeline-keyframes");
@@ -128,7 +129,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 +183,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 }));

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

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',
@@ -37,6 +71,7 @@ const TimelineRowKeyframeControlsColumn = ({ children, depth }) => {
 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 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,

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

@@ -3,6 +3,7 @@ import { type GetDragOverrides, type GetEffectDragOverrides, type PropStatuses }
 import type { SequenceNodePathInfo, TimelineTrackData } from '../../helpers/get-timeline-sequence-sort-key';
 import { type GetIsExpanded } from '../ExpandedTracksProvider';
 export declare const TIMELINE_SELECTED_BACKGROUND = "#3B3F42";
+export declare const TIMELINE_EXPANDED_SELECTED_BACKGROUND = "rgb(31,36,40)";
 export declare const TIMELINE_HOVER_BACKGROUND = "rgba(255, 255, 255, 0.05)";
 export declare const TIMELINE_SELECTED_LABEL_BACKGROUND = "#B0B0B0";
 export declare const TIMELINE_SELECTED_LABEL_TEXT = "black";
@@ -10,13 +11,14 @@ export declare const TIMELINE_SELECTED_LABEL_HORIZONTAL_PADDING = 2;
 export declare const getTimelineSelectedLabelStyle: (selected: boolean, subcategory: boolean) => CSSProperties;
 export declare const getTimelineColor: (selected: boolean, subcategory: boolean) => "black" | "rgba(255, 255, 255, 0.8)";
 export declare const getTimelineSelectedTrackHighlightStyle: (timelineWidth: number, backgroundColor?: string) => CSSProperties;
-export declare const getTimelineRowHighlightBackground: ({ showSelectedBackground, selected, containsSelection, hovered, }: {
+export declare const getTimelineRowHighlightBackground: ({ showSelectedBackground, selected, containsSelection, hovered, selectedBackground, }: {
     readonly showSelectedBackground: boolean;
     readonly selected: boolean;
     readonly containsSelection: boolean;
     readonly hovered: boolean;
+    readonly selectedBackground: string;
 }) => string | undefined;
-export declare const TIMELINE_BACKGROUND = "#0F1113";
+export declare const TIMELINE_BACKGROUND = "#15181B";
 export declare const TIMELINE_TICKS_BACKGROUND = "rgb(31,36,40)";
 export type TimelineSelection = {
     readonly type: 'guide';
@@ -222,5 +224,8 @@ export declare const useTimelineGuideSelection: (guideId: string) => {
     selectionItem: TimelineSelection;
 };
 export declare const useTimelineRowContainsSelection: (nodePathInfo: SequenceNodePathInfo | null) => boolean;
-export declare const useTimelineRowHighlightBackground: (nodePathInfo: SequenceNodePathInfo | null, hovered?: boolean) => string | undefined;
+export declare const useTimelineRowHighlightBackground: (nodePathInfo: SequenceNodePathInfo | null, { hovered, selectedBackground, }: {
+    readonly hovered: boolean;
+    readonly selectedBackground: string;
+}) => string | undefined;
 export {};