@remotion/studio 4.0.500 → 4.0.501

package/dist/components/SelectedOutlineOverlay.js

@@ -45,6 +45,7 @@ const use_keybinding_1 = require("../helpers/use-keybinding");
 const editor_guides_1 = require("../state/editor-guides");
 const editor_outlines_1 = require("../state/editor-outlines");
 const scale_lock_1 = require("../state/scale-lock");
+const timeline_sequence_hover_1 = require("../state/timeline-sequence-hover");
 const NotificationCenter_1 = require("./Notifications/NotificationCenter");
 const selected_outline_drag_1 = require("./selected-outline-drag");
 const selected_outline_measurement_1 = require("./selected-outline-measurement");
@@ -419,12 +420,12 @@ const SelectedOutlineOverlay = ({ compositionHeight, compositionWidth, scale, tr
     const { setPropStatuses, setDragOverrides, clearDragOverrides } = (0, react_1.useContext)(remotion_1.Internals.VisualModeSettersContext);
     const { getScaleLockState } = (0, react_1.useContext)(scale_lock_1.ScaleLockContext);
     const { editorShowOutlines } = (0, react_1.useContext)(editor_outlines_1.EditorShowOutlinesContext);
+    const { hoveredSequence, setHoveredSequence } = (0, react_1.useContext)(timeline_sequence_hover_1.TimelineSequenceHoverContext);
     const { editorShowGuides, guidesList } = (0, react_1.useContext)(editor_guides_1.EditorShowGuidesContext);
     const { frameBack, frameForward, getCurrentFrame, seek } = player_1.PlayerInternals.usePlayer();
     const keybindings = (0, use_keybinding_1.useKeybinding)();
     const timelinePosition = remotion_1.Internals.Timeline.useTimelinePosition();
     const [outlines, setOutlines] = (0, react_1.useState)([]);
-    const [hoveredOutlineKey, setHoveredOutlineKey] = (0, react_1.useState)(null);
     const [draggingOutline, setDraggingOutline] = (0, react_1.useState)(false);
     const [activeSnapPoints, setActiveSnapPoints] = (0, react_1.useState)([]);
     const overlayRef = (0, react_1.useRef)(null);
@@ -435,12 +436,20 @@ const SelectedOutlineOverlay = ({ compositionHeight, compositionWidth, scale, tr
     const onDraggingChange = react_1.default.useCallback((dragging) => {
         setDraggingOutline(dragging);
         if (dragging) {
-            setHoveredOutlineKey(null);
+            setHoveredSequence((currentHover) => (currentHover === null || currentHover === void 0 ? void 0 : currentHover.source) === 'canvas' ? null : currentHover);
         }
         else {
             setActiveSnapPoints([]);
         }
-    }, []);
+    }, [setHoveredSequence]);
+    const onHoverChange = (0, react_1.useCallback)((key) => {
+        setHoveredSequence((currentHover) => {
+            if (key !== null) {
+                return { key, source: 'canvas' };
+            }
+            return (currentHover === null || currentHover === void 0 ? void 0 : currentHover.source) === 'canvas' ? null : currentHover;
+        });
+    }, [setHoveredSequence]);
     const onSnapPointsChange = (0, react_1.useCallback)((snapPoints) => {
         setActiveSnapPoints(snapPoints);
     }, []);
@@ -757,11 +766,11 @@ const SelectedOutlineOverlay = ({ compositionHeight, compositionWidth, scale, tr
         timelinePosition,
     ]);
     (0, react_1.useEffect)(() => {
-        if (hoveredOutlineKey !== null &&
-            !outlineTargets.some((target) => target.key === hoveredOutlineKey)) {
-            setHoveredOutlineKey(null);
+        if ((hoveredSequence === null || hoveredSequence === void 0 ? void 0 : hoveredSequence.source) === 'canvas' &&
+            !outlineTargets.some((target) => target.key === hoveredSequence.key)) {
+            setHoveredSequence((currentHover) => (currentHover === null || currentHover === void 0 ? void 0 : currentHover.source) === 'canvas' ? null : currentHover);
         }
-    }, [hoveredOutlineKey, outlineTargets]);
+    }, [hoveredSequence, outlineTargets, setHoveredSequence]);
     const targetsByKey = (0, react_1.useMemo)(() => {
         return new Map(outlineTargets.map((target) => [target.key, target]));
     }, [outlineTargets]);
@@ -1073,6 +1082,6 @@ const SelectedOutlineOverlay = ({ compositionHeight, compositionWidth, scale, tr
         return null;
     }
     return (jsx_runtime_1.jsxs("svg", { ref: overlayRef, style: outlineContainer, width: "100%", height: "100%", "aria-hidden": "true", children: [
-            jsx_runtime_1.jsx(SelectedOutlineSnapIndicators, { activeSnapPoints: activeSnapPoints, compositionHeight: compositionHeight, compositionWidth: compositionWidth, scale: scale }), outlinesForRendering.map((outline) => (jsx_runtime_1.jsx(SelectedOutlineElement_1.SelectedOutlineElement, { allDragTargets: allDragTargets, allDragOutlines: allDragOutlines, allRotationDragTargets: allRotationDragTargets, allScaleDragTargets: allScaleDragTargets, dragging: draggingOutline, hovered: hoveredOutlineKey === outline.key, outline: outline, onDraggingChange: onDraggingChange, onHoverChange: setHoveredOutlineKey, onSnapPointsChange: onSnapPointsChange, onSelect: selectOutlineItem, scale: scale, snapTargets: snapTargets, target: targetsByKey.get(outline.key) }, outline.key))), outlinesForRendering.map((outline) => (jsx_runtime_1.jsx(SelectedOutlineElement_1.SelectedOutlineTransformOriginHandle, { outline: outline, onDraggingChange: onDraggingChange, target: targetsByKey.get(outline.key) }, `${outline.key}-transform-origin`))), outlinesForRendering.map((outline) => (jsx_runtime_1.jsx(SelectedOutlineUvControls_1.SelectedOutlineUvHandleConnectionLayer, { outline: outline, target: targetsByKey.get(outline.key) }, `${outline.key}-uv-connection-lines`))), outlinesForRendering.map((outline) => (jsx_runtime_1.jsx(SelectedOutlineUvControls_1.SelectedOutlineUvHandleCircleLayer, { onDraggingChange: onDraggingChange, onSelect: selectOutlineItem, outline: outline, target: targetsByKey.get(outline.key) }, `${outline.key}-uv-handles`)))] }));
+            jsx_runtime_1.jsx(SelectedOutlineSnapIndicators, { activeSnapPoints: activeSnapPoints, compositionHeight: compositionHeight, compositionWidth: compositionWidth, scale: scale }), outlinesForRendering.map((outline) => (jsx_runtime_1.jsx(SelectedOutlineElement_1.SelectedOutlineElement, { allDragTargets: allDragTargets, allDragOutlines: allDragOutlines, allRotationDragTargets: allRotationDragTargets, allScaleDragTargets: allScaleDragTargets, dragging: draggingOutline, hovered: (hoveredSequence === null || hoveredSequence === void 0 ? void 0 : hoveredSequence.key) === outline.key, outline: outline, onDraggingChange: onDraggingChange, onHoverChange: onHoverChange, onSnapPointsChange: onSnapPointsChange, onSelect: selectOutlineItem, scale: scale, snapTargets: snapTargets, target: targetsByKey.get(outline.key) }, outline.key))), outlinesForRendering.map((outline) => (jsx_runtime_1.jsx(SelectedOutlineElement_1.SelectedOutlineTransformOriginHandle, { outline: outline, onDraggingChange: onDraggingChange, target: targetsByKey.get(outline.key) }, `${outline.key}-transform-origin`))), outlinesForRendering.map((outline) => (jsx_runtime_1.jsx(SelectedOutlineUvControls_1.SelectedOutlineUvHandleConnectionLayer, { outline: outline, target: targetsByKey.get(outline.key) }, `${outline.key}-uv-connection-lines`))), outlinesForRendering.map((outline) => (jsx_runtime_1.jsx(SelectedOutlineUvControls_1.SelectedOutlineUvHandleCircleLayer, { onDraggingChange: onDraggingChange, onSelect: selectOutlineItem, outline: outline, target: targetsByKey.get(outline.key) }, `${outline.key}-uv-handles`)))] }));
 };
 exports.SelectedOutlineOverlay = SelectedOutlineOverlay;

package/dist/components/ShowOutlinesProvider.js

@@ -4,8 +4,10 @@ exports.ShowOutlinesProvider = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const editor_outlines_1 = require("../state/editor-outlines");
+const timeline_sequence_hover_1 = require("../state/timeline-sequence-hover");
 const ShowOutlinesProvider = ({ children }) => {
     const [editorShowOutlines, setEditorShowOutlinesState] = (0, react_1.useState)(() => (0, editor_outlines_1.loadEditorShowOutlinesOption)());
+    const [hoveredSequence, setHoveredSequence] = (0, react_1.useState)(null);
     const setEditorShowOutlines = (0, react_1.useCallback)((newValue) => {
         setEditorShowOutlinesState((prevState) => {
             const newVal = newValue(prevState);
@@ -19,6 +21,7 @@ const ShowOutlinesProvider = ({ children }) => {
             setEditorShowOutlines,
         };
     }, [editorShowOutlines, setEditorShowOutlines]);
-    return (jsx_runtime_1.jsx(editor_outlines_1.EditorShowOutlinesContext.Provider, { value: editorShowOutlinesCtx, children: children }));
+    const timelineSequenceHoverCtx = (0, react_1.useMemo)(() => ({ hoveredSequence, setHoveredSequence }), [hoveredSequence]);
+    return (jsx_runtime_1.jsx(editor_outlines_1.EditorShowOutlinesContext.Provider, { value: editorShowOutlinesCtx, children: jsx_runtime_1.jsx(timeline_sequence_hover_1.TimelineSequenceHoverContext.Provider, { value: timelineSequenceHoverCtx, children: children }) }));
 };
 exports.ShowOutlinesProvider = ShowOutlinesProvider;

package/dist/components/Timeline/Timeline.js

@@ -37,6 +37,7 @@ exports.Timeline = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = __importStar(require("react"));
 const remotion_1 = require("remotion");
+const browser_studio_operations_1 = require("../../helpers/browser-studio-operations");
 const calculate_timeline_1 = require("../../helpers/calculate-timeline");
 const client_id_1 = require("../../helpers/client-id");
 const colors_1 = require("../../helpers/colors");
@@ -93,6 +94,8 @@ const TimelineContextMenuArea = ({ children }) => {
     const { previewServerState } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
     const previewConnected = previewServerState.type === 'connected';
     const previewInteractive = previewConnected && (0, interactivity_enabled_1.isStudioInteractivityEnabled)();
+    const browserStudioOperations = (0, browser_studio_operations_1.getBrowserStudioOperations)();
+    const browserStudioCanInsertSolid = browserStudioOperations !== null;
     const currentCompositionId = (canvasContent === null || canvasContent === void 0 ? void 0 : canvasContent.type) === 'composition' ? canvasContent.compositionId : null;
     const currentComposition = (0, react_1.useMemo)(() => {
         var _a;
@@ -102,12 +105,14 @@ const TimelineContextMenuArea = ({ children }) => {
         return ((_a = compositions.find((composition) => composition.id === currentCompositionId)) !== null && _a !== void 0 ? _a : null);
     }, [compositions, currentCompositionId]);
     const resolvedCompositionLocation = (0, use_resolved_stack_1.useResolvedStack)((_a = currentComposition === null || currentComposition === void 0 ? void 0 : currentComposition.stack) !== null && _a !== void 0 ? _a : null);
-    const compositionFile = (_b = resolvedCompositionLocation === null || resolvedCompositionLocation === void 0 ? void 0 : resolvedCompositionLocation.source) !== null && _b !== void 0 ? _b : null;
+    const compositionFile = (_b = resolvedCompositionLocation === null || resolvedCompositionLocation === void 0 ? void 0 : resolvedCompositionLocation.source) !== null && _b !== void 0 ? _b : (currentCompositionId && browserStudioOperations
+        ? browserStudioOperations.getCompositionFile(currentCompositionId)
+        : null);
     const compositionComponentInfo = (0, open_in_editor_1.useCachedCompositionComponentInfo)({
         compositionFile,
         compositionId: currentCompositionId,
     });
-    const canInsertSolid = previewInteractive &&
+    const canInsertSolid = (previewInteractive || browserStudioCanInsertSolid) &&
         (compositionComponentInfo === null || compositionComponentInfo === void 0 ? void 0 : compositionComponentInfo.canAddSequence) === true &&
         currentCompositionId !== null &&
         compositionFile !== null &&
@@ -128,7 +133,7 @@ const TimelineContextMenuArea = ({ children }) => {
         }
         setIsAddingSolid(true);
         try {
-            const result = await (0, call_api_1.callApi)('/api/insert-jsx-element', {
+            const request = {
                 compositionFile,
                 compositionId: currentCompositionId,
                 from: null,
@@ -138,7 +143,10 @@ const TimelineContextMenuArea = ({ children }) => {
                     height: videoConfig.height,
                     position: null,
                 },
-            });
+            };
+            const result = browserStudioOperations
+                ? 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;
@@ -151,7 +159,13 @@ const TimelineContextMenuArea = ({ children }) => {
         finally {
             setIsAddingSolid(false);
         }
-    }, [canInsertSolid, compositionFile, currentCompositionId, videoConfig]);
+    }, [
+        browserStudioOperations,
+        canInsertSolid,
+        compositionFile,
+        currentCompositionId,
+        videoConfig,
+    ]);
     const insertAsset = (0, react_1.useCallback)(async () => {
         if (!canInsertAsset ||
             currentCompositionId === null ||

package/dist/components/Timeline/TimelineAssetField.js

@@ -58,6 +58,7 @@ const TimelineAssetField = ({ field, effectiveValue, propStatus, onSave, onDragV
                 initialQuery,
                 onSelected: (asset) => onSelect(asset.name, asset.src),
             },
+            compositionSelection: null,
         });
     }, [initialQuery, onSelect, setSelectedModal]);
     const action = (jsx_runtime_1.jsx(InlineAction_1.InlineAction, { onClick: openAssetSelection, disabled: window.remotion_isReadOnlyStudio, title: "Change source", renderAction: (color) => jsx_runtime_1.jsx(pen_1.PenIcon, { color: color, style: penIcon }) }));

package/dist/components/Timeline/TimelineExpandedKeyframeRow.js

@@ -42,8 +42,14 @@ const TimelineKeyframeDiamond_1 = require("./TimelineKeyframeDiamond");
 const TimelineKeyframeEasingLine_1 = require("./TimelineKeyframeEasingLine");
 const TimelineSelection_1 = require("./TimelineSelection");
 const TimelineWidthProvider_1 = require("./TimelineWidthProvider");
-const row = {
+const rowClipper = {
+    marginLeft: -timeline_layout_1.TIMELINE_PADDING,
+    marginRight: -timeline_layout_1.TIMELINE_PADDING,
     overflow: 'hidden',
+    paddingLeft: timeline_layout_1.TIMELINE_PADDING,
+    paddingRight: timeline_layout_1.TIMELINE_PADDING,
+};
+const row = {
     position: 'relative',
 };
 const rowSeparator = {
@@ -55,7 +61,7 @@ const TimelineExpandedKeyframeRowUnmemoized = ({ height, keyframes, canEditEasin
     const easingSegments = canEditEasing
         ? (0, get_timeline_easing_segments_1.getTimelineEasingSegments)(keyframes)
         : [];
-    return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [showSeparator ? jsx_runtime_1.jsx("div", { style: rowSeparator }) : null, jsx_runtime_1.jsxs("div", { style: { ...row, height }, children: [rowHighlightBackground && timelineWidth !== null ? (jsx_runtime_1.jsx("div", { style: (0, TimelineSelection_1.getTimelineSelectedTrackHighlightStyle)(timelineWidth, rowHighlightBackground) })) : null, easingSegments.map((segment) => (jsx_runtime_1.jsx(TimelineKeyframeEasingLine_1.TimelineKeyframeEasingLine, { fromFrame: segment.fromFrame, toFrame: segment.toFrame, rowHeight: height, nodePathInfo: nodePathInfo, segmentIndex: segment.segmentIndex }, `${segment.segmentIndex}-${segment.fromFrame}-${segment.toFrame}`))), keyframes.map((keyframe) => (jsx_runtime_1.jsx(TimelineKeyframeDiamond_1.TimelineKeyframeDiamond, { frame: keyframe.frame, rowHeight: height, nodePathInfo: nodePathInfo }, keyframe.frame)))] })
+    return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [showSeparator ? jsx_runtime_1.jsx("div", { style: rowSeparator }) : null, jsx_runtime_1.jsx("div", { style: { ...rowClipper, height }, children: jsx_runtime_1.jsxs("div", { style: { ...row, height }, children: [rowHighlightBackground && timelineWidth !== null ? (jsx_runtime_1.jsx("div", { style: (0, TimelineSelection_1.getTimelineSelectedTrackHighlightStyle)(timelineWidth, rowHighlightBackground) })) : null, easingSegments.map((segment) => (jsx_runtime_1.jsx(TimelineKeyframeEasingLine_1.TimelineKeyframeEasingLine, { fromFrame: segment.fromFrame, toFrame: segment.toFrame, rowHeight: height, nodePathInfo: nodePathInfo, segmentIndex: segment.segmentIndex }, `${segment.segmentIndex}-${segment.fromFrame}-${segment.toFrame}`))), keyframes.map((keyframe) => (jsx_runtime_1.jsx(TimelineKeyframeDiamond_1.TimelineKeyframeDiamond, { frame: keyframe.frame, rowHeight: height, nodePathInfo: nodePathInfo }, keyframe.frame)))] }) })
         ] }));
 };
 exports.TimelineExpandedKeyframeRow = react_1.default.memo(TimelineExpandedKeyframeRowUnmemoized);

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

@@ -1,9 +1,13 @@
 import React from 'react';
 import type { ArrayFieldSchema, CanUpdateSequencePropStatusStatic, SequencePropsSubscriptionKey, VisibleFieldSchema } from 'remotion';
 import type { SchemaFieldInfo, TimelineFieldOnDragValueChange, TimelineFieldOnSave } from '../../helpers/timeline-layout';
+type CaptionsFieldSchema = Extract<VisibleFieldSchema, {
+    type: 'remotion-captions';
+}>;
+type PrimitiveFieldSchema = Exclude<VisibleFieldSchema, ArrayFieldSchema | CaptionsFieldSchema>;
 export type TimelinePrimitiveFieldInfo = Omit<SchemaFieldInfo, 'fieldSchema' | 'typeName'> & {
-    readonly fieldSchema: Exclude<VisibleFieldSchema, ArrayFieldSchema>;
-    readonly typeName: Exclude<VisibleFieldSchema['type'], 'array'>;
+    readonly fieldSchema: PrimitiveFieldSchema;
+    readonly typeName: PrimitiveFieldSchema['type'];
 };
 export declare const isTimelinePrimitiveFieldInfo: (field: SchemaFieldInfo) => field is TimelinePrimitiveFieldInfo;
 export declare const TimelinePrimitiveFieldValue: React.FC<{
@@ -15,3 +19,4 @@ export declare const TimelinePrimitiveFieldValue: React.FC<{
     readonly effectiveValue: unknown;
     readonly scaleLockNodePath: SequencePropsSubscriptionKey | null;
 }>;
+export {};

package/dist/components/Timeline/TimelinePrimitiveFieldValue.js

@@ -24,7 +24,9 @@ const assetInlineWrapper = {
     minWidth: 0,
 };
 const isTimelinePrimitiveFieldInfo = (field) => {
-    return field.typeName !== 'array' && field.fieldSchema.type !== 'array';
+    return (field.typeName !== 'array' &&
+        field.fieldSchema.type !== 'array' &&
+        field.fieldSchema.type !== 'remotion-captions');
 };
 exports.isTimelinePrimitiveFieldInfo = isTimelinePrimitiveFieldInfo;
 const TimelinePrimitiveFieldValue = ({ field, onSave, onDragValueChange, onDragEnd, propStatus, effectiveValue, scaleLockNodePath, }) => {

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

@@ -14,9 +14,12 @@ export declare const TimelineRowChrome: React.FC<{
     readonly onSelect: (interaction?: TimelineSelectionInteraction) => void;
     readonly showSelectedBackground: boolean;
     readonly containsSelection: boolean;
+    readonly hovered?: boolean;
     readonly outerHeight: number | null;
     readonly onDragLeave?: (e: React.DragEvent<HTMLDivElement>) => void;
     readonly onDragOver?: (e: React.DragEvent<HTMLDivElement>) => void;
     readonly onDrop?: (e: React.DragEvent<HTMLDivElement>) => void;
     readonly onDoubleClick?: (e: React.MouseEvent<HTMLDivElement>) => void;
+    readonly onPointerEnter?: () => void;
+    readonly onPointerLeave?: () => void;
 }>;

package/dist/components/Timeline/TimelineRowChrome.js

@@ -24,7 +24,7 @@ const keyframeControlsColumnBaseStyle = {
     flexShrink: 0,
     justifyContent: 'flex-start',
 };
-const TimelineRowChrome = ({ depth, eye, keyframeControls, arrow, children, style, selected, selectable, selectionItem, onSelect, showSelectedBackground, containsSelection, outerHeight, onDragLeave, onDragOver, onDrop, onDoubleClick, }) => {
+const TimelineRowChrome = ({ depth, eye, keyframeControls, arrow, children, style, selected, selectable, selectionItem, onSelect, showSelectedBackground, containsSelection, hovered = false, outerHeight, onDragLeave, onDragOver, onDrop, onDoubleClick, onPointerEnter, onPointerLeave, }) => {
     const ref = (0, react_1.useRef)(null);
     const { basePadding, keyframeControlsPadding, rowBorderRadius, rowHorizontalMargin, } = (0, react_1.useContext)(TimelineRowLayoutContext_1.TimelineRowLayoutContext);
     const indentWidth = (0, timeline_row_layout_1.getTimelineRowIndentWidth)(depth);
@@ -59,6 +59,7 @@ const TimelineRowChrome = ({ depth, eye, keyframeControls, arrow, children, styl
         showSelectedBackground,
         selected,
         containsSelection,
+        hovered,
     });
     const innerRowStyle = (0, react_1.useMemo)(() => ({
         ...rowBase,
@@ -89,8 +90,8 @@ const TimelineRowChrome = ({ depth, eye, keyframeControls, arrow, children, styl
     const chrome = (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
             jsx_runtime_1.jsx("div", { style: leftChromeStyle, children: keyframeControls ? (jsx_runtime_1.jsx("div", { style: keyframeControlsColumnStyle, children: keyframeControls })) : (jsx_runtime_1.jsxs("div", { style: chromeColumnStyle, children: [eye, indentWidth > 0 ? jsx_runtime_1.jsx(Padder_1.Padder, { depth: depth }) : null, arrow] })) }), children] }));
     if (outerStyle) {
-        return (jsx_runtime_1.jsx("div", { ref: ref, style: outerStyle, onDragLeave: onDragLeave, onDragOver: onDragOver, onDrop: onDrop, onPointerDown: selectable ? onPointerDown : undefined, onContextMenu: selectable ? onContextMenu : undefined, onDoubleClick: onDoubleClick, children: jsx_runtime_1.jsx("div", { style: innerRowStyle, children: chrome }) }));
+        return (jsx_runtime_1.jsx("div", { ref: ref, style: outerStyle, onDragLeave: onDragLeave, onDragOver: onDragOver, onDrop: onDrop, onPointerDown: selectable ? onPointerDown : undefined, onContextMenu: selectable ? onContextMenu : undefined, onDoubleClick: onDoubleClick, onPointerEnter: onPointerEnter, onPointerLeave: onPointerLeave, children: jsx_runtime_1.jsx("div", { style: innerRowStyle, children: chrome }) }));
     }
-    return (jsx_runtime_1.jsx("div", { ref: ref, onDragLeave: onDragLeave, onDragOver: onDragOver, onDrop: onDrop, onPointerDown: selectable ? onPointerDown : undefined, onContextMenu: selectable ? onContextMenu : undefined, onDoubleClick: onDoubleClick, style: innerRowStyle, children: chrome }));
+    return (jsx_runtime_1.jsx("div", { ref: ref, onDragLeave: onDragLeave, onDragOver: onDragOver, onDrop: onDrop, onPointerDown: selectable ? onPointerDown : undefined, onContextMenu: selectable ? onContextMenu : undefined, onDoubleClick: onDoubleClick, onPointerEnter: onPointerEnter, onPointerLeave: onPointerLeave, style: innerRowStyle, children: chrome }));
 };
 exports.TimelineRowChrome = TimelineRowChrome;

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

@@ -3,16 +3,18 @@ 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_HOVER_BACKGROUND = "rgba(255, 255, 255, 0.05)";
 export declare const TIMELINE_SELECTED_LABEL_BACKGROUND = "#B0B0B0";
 export declare const TIMELINE_SELECTED_LABEL_TEXT = "black";
 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, }: {
+export declare const getTimelineRowHighlightBackground: ({ showSelectedBackground, selected, containsSelection, hovered, }: {
     readonly showSelectedBackground: boolean;
     readonly selected: boolean;
     readonly containsSelection: boolean;
+    readonly hovered: boolean;
 }) => string | undefined;
 export declare const TIMELINE_BACKGROUND = "#0F1113";
 export declare const TIMELINE_TICKS_BACKGROUND = "rgb(31,36,40)";
@@ -213,5 +215,5 @@ export declare const useTimelineGuideSelection: (guideId: string) => {
     selectionItem: TimelineSelection;
 };
 export declare const useTimelineRowContainsSelection: (nodePathInfo: SequenceNodePathInfo | null) => boolean;
-export declare const useTimelineRowHighlightBackground: (nodePathInfo: SequenceNodePathInfo | null) => string | undefined;
+export declare const useTimelineRowHighlightBackground: (nodePathInfo: SequenceNodePathInfo | null, hovered?: boolean) => string | undefined;
 export {};

package/dist/components/Timeline/TimelineSelection.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useTimelineRowHighlightBackground = exports.useTimelineRowContainsSelection = exports.useTimelineGuideSelection = exports.useTimelineEasingSelection = exports.useTimelineKeyframeSelection = exports.useTimelineRowSelection = exports.useTimelineFocusableItem = exports.useTimelineMarqueeSelectableItem = exports.useTimelineMarqueeSelection = exports.useCurrentTimelineSelectionStateAsRef = exports.TIMELINE_SCRUBBER_ATTR = exports.TIMELINE_MARQUEE_ITEM_ATTR = exports.useTimelineSelection = exports.TimelineSelectionProvider = exports.TimelineSelectableItemsProvider = exports.TimelineSelectAllKeybindings = exports.getTimelineSequenceSelectionKey = exports.getSelectableTimelineItems = exports.getSelectableTimelineSequenceSelections = exports.getTimelineSelectionKey = exports.getTimelineSelectionFromNodePathInfo = exports.TimelineSelectionOrderProvider = exports.extendTimelineMarqueeSelection = exports.getTimelineMarqueeSelection = exports.timelineMarqueeRectsIntersect = exports.getClampedTimelineMarqueePoint = exports.getNormalizedTimelineMarqueeRect = exports.getAvailableTimelineSelectionState = exports.getTimelineSelectionAfterInteraction = exports.EMPTY_TIMELINE_SELECTION_STATE = exports.shouldSelectTimelineRowOnPointerDown = exports.isTimelineSelectionModifierEvent = exports.TIMELINE_TICKS_BACKGROUND = exports.TIMELINE_BACKGROUND = exports.getTimelineRowHighlightBackground = exports.getTimelineSelectedTrackHighlightStyle = exports.getTimelineColor = exports.getTimelineSelectedLabelStyle = exports.TIMELINE_SELECTED_LABEL_HORIZONTAL_PADDING = exports.TIMELINE_SELECTED_LABEL_TEXT = exports.TIMELINE_SELECTED_LABEL_BACKGROUND = exports.TIMELINE_SELECTED_BACKGROUND = void 0;
+exports.useTimelineRowHighlightBackground = exports.useTimelineRowContainsSelection = exports.useTimelineGuideSelection = exports.useTimelineEasingSelection = exports.useTimelineKeyframeSelection = exports.useTimelineRowSelection = exports.useTimelineFocusableItem = exports.useTimelineMarqueeSelectableItem = exports.useTimelineMarqueeSelection = exports.useCurrentTimelineSelectionStateAsRef = exports.TIMELINE_SCRUBBER_ATTR = exports.TIMELINE_MARQUEE_ITEM_ATTR = exports.useTimelineSelection = exports.TimelineSelectionProvider = exports.TimelineSelectableItemsProvider = exports.TimelineSelectAllKeybindings = exports.getTimelineSequenceSelectionKey = exports.getSelectableTimelineItems = exports.getSelectableTimelineSequenceSelections = exports.getTimelineSelectionKey = exports.getTimelineSelectionFromNodePathInfo = exports.TimelineSelectionOrderProvider = exports.extendTimelineMarqueeSelection = exports.getTimelineMarqueeSelection = exports.timelineMarqueeRectsIntersect = exports.getClampedTimelineMarqueePoint = exports.getNormalizedTimelineMarqueeRect = exports.getAvailableTimelineSelectionState = exports.getTimelineSelectionAfterInteraction = exports.EMPTY_TIMELINE_SELECTION_STATE = exports.shouldSelectTimelineRowOnPointerDown = exports.isTimelineSelectionModifierEvent = exports.TIMELINE_TICKS_BACKGROUND = exports.TIMELINE_BACKGROUND = exports.getTimelineRowHighlightBackground = exports.getTimelineSelectedTrackHighlightStyle = exports.getTimelineColor = exports.getTimelineSelectedLabelStyle = exports.TIMELINE_SELECTED_LABEL_HORIZONTAL_PADDING = exports.TIMELINE_SELECTED_LABEL_TEXT = exports.TIMELINE_SELECTED_LABEL_BACKGROUND = exports.TIMELINE_HOVER_BACKGROUND = exports.TIMELINE_SELECTED_BACKGROUND = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const studio_shared_1 = require("@remotion/studio-shared");
 const react_1 = require("react");
@@ -21,6 +21,7 @@ const timeline_refs_1 = require("./timeline-refs");
 const TimelineClipboardKeybindings_1 = require("./TimelineClipboardKeybindings");
 const TimelineDeleteKeybindings_1 = require("./TimelineDeleteKeybindings");
 exports.TIMELINE_SELECTED_BACKGROUND = colors_1.TIMELINE_SELECTED_BACKGROUND_COLOR;
+exports.TIMELINE_HOVER_BACKGROUND = colors_1.WHITE_ALPHA_05;
 exports.TIMELINE_SELECTED_LABEL_BACKGROUND = colors_1.TIMELINE_SELECTED_LABEL_BACKGROUND_COLOR;
 exports.TIMELINE_SELECTED_LABEL_TEXT = colors_1.BLACK;
 exports.TIMELINE_SELECTED_LABEL_HORIZONTAL_PADDING = 2;
@@ -54,10 +55,11 @@ const getTimelineSelectedTrackHighlightStyle = (timelineWidth, backgroundColor =
     width: timelineWidth,
 });
 exports.getTimelineSelectedTrackHighlightStyle = getTimelineSelectedTrackHighlightStyle;
-const getTimelineRowHighlightBackground = ({ showSelectedBackground, selected, containsSelection, }) => {
-    return showSelectedBackground && (selected || containsSelection)
-        ? exports.TIMELINE_SELECTED_BACKGROUND
-        : undefined;
+const getTimelineRowHighlightBackground = ({ showSelectedBackground, selected, containsSelection, hovered, }) => {
+    if (showSelectedBackground && (selected || containsSelection)) {
+        return exports.TIMELINE_SELECTED_BACKGROUND;
+    }
+    return hovered ? exports.TIMELINE_HOVER_BACKGROUND : undefined;
 };
 exports.getTimelineRowHighlightBackground = getTimelineRowHighlightBackground;
 exports.TIMELINE_BACKGROUND = colors_1.TIMELINE_BACKGROUND_COLOR;
@@ -1109,13 +1111,14 @@ const useTimelineRowContainsSelection = (nodePathInfo) => {
     return containsSelection(nodePathInfo);
 };
 exports.useTimelineRowContainsSelection = useTimelineRowContainsSelection;
-const useTimelineRowHighlightBackground = (nodePathInfo) => {
+const useTimelineRowHighlightBackground = (nodePathInfo, hovered = false) => {
     const { selected } = (0, exports.useTimelineRowSelection)(nodePathInfo);
     const containsSelection = (0, exports.useTimelineRowContainsSelection)(nodePathInfo);
     return (0, exports.getTimelineRowHighlightBackground)({
         showSelectedBackground: true,
         selected,
         containsSelection,
+        hovered,
     });
 };
 exports.useTimelineRowHighlightBackground = useTimelineRowHighlightBackground;

package/dist/components/Timeline/TimelineSequence.js

@@ -291,10 +291,7 @@ const TimelineSequenceInner = ({ s, connectedCompositions, windowWidth, nodePath
                     },
                 ],
             });
-            if (result.success) {
-                (0, NotificationCenter_1.showNotification)('Removed sequence from source file', 2000);
-            }
-            else {
+            if (!result.success) {
                 (0, NotificationCenter_1.showNotification)(result.reason, 4000);
             }
         }

package/dist/components/Timeline/TimelineSequenceItem.js

@@ -46,6 +46,7 @@ const studio_runtime_config_1 = require("../../helpers/studio-runtime-config");
 const timeline_layout_1 = require("../../helpers/timeline-layout");
 const use_keybinding_1 = require("../../helpers/use-keybinding");
 const modals_1 = require("../../state/modals");
+const timeline_sequence_hover_1 = require("../../state/timeline-sequence-hover");
 const call_api_1 = require("../call-api");
 const CompositionOrStillIcon_1 = require("../CompositionOrStillIcon");
 const ConfirmationDialog_1 = require("../ConfirmationDialog");
@@ -176,6 +177,7 @@ const TimelineSequenceItem = ({ children, connectedCompositions, nestedDepth, se
     var _a, _b, _c;
     var _d, _e, _f;
     const nodePath = (_d = nodePathInfo === null || nodePathInfo === void 0 ? void 0 : nodePathInfo.sequenceSubscriptionKey) !== null && _d !== void 0 ? _d : null;
+    const { hovered, onPointerEnter, onPointerLeave } = (0, timeline_sequence_hover_1.useTimelineSequenceHover)(nodePathInfo);
     const { previewServerState } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
     const previewConnected = previewServerState.type === 'connected';
     const previewInteractive = previewConnected && (0, interactivity_enabled_1.isStudioInteractivityEnabled)();
@@ -268,10 +270,7 @@ const TimelineSequenceItem = ({ children, connectedCompositions, nestedDepth, se
                     },
                 ],
             });
-            if (result.success) {
-                (0, NotificationCenter_1.showNotification)('Removed sequence from source file', 2000);
-            }
-            else {
+            if (!result.success) {
                 (0, NotificationCenter_1.showNotification)(result.reason, 4000);
             }
         }
@@ -857,7 +856,7 @@ const TimelineSequenceItem = ({ children, connectedCompositions, nestedDepth, se
             clientId: previewServerState.clientId,
         });
     }, [canDropEffect, nodePath, previewServerState, validatedLocation]);
-    const trackRow = (jsx_runtime_1.jsx(TimelineRowChrome_1.TimelineRowChrome, { depth: nestedDepth, eye: canToggleVisibility ? (jsx_runtime_1.jsx(TimelineLayerEye_1.TimelineLayerEye, { type: sequence.type === 'audio' ? 'speaker' : 'eye', hidden: isItemHidden, onInvoked: onToggleVisibility })) : (jsx_runtime_1.jsx(TimelineLayerEye_1.TimelineLayerEyeSpacer, {})), arrow: hasExpandableContent && nodePathInfo !== null ? (jsx_runtime_1.jsx(TimelineSequenceExpandArrow, { disabled: !previewInteractive, isExpanded: isExpanded, nodePathInfo: nodePathInfo, onToggleExpand: onToggleExpand, sequence: sequence })) : (jsx_runtime_1.jsx(TimelineExpandArrowButton_1.TimelineExpandArrowSpacer, {})), style: rowStyle, selected: selected, selectable: selectable, selectionItem: selectionItem, onSelect: onSelect, showSelectedBackground: true, containsSelection: containsSelection, outerHeight: outerHeight, onDragLeave: canDropEffect ? onEffectDragLeave : undefined, onDragOver: canDropEffect ? onEffectDragOver : undefined, onDrop: canDropEffect ? onEffectDrop : undefined, onDoubleClick: canHandleSequenceDoubleClick ? onSequenceDoubleClick : undefined, children: jsx_runtime_1.jsxs("div", { style: labelContainerStyle, children: [connectedCompositions.length > 0 ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
+    const trackRow = (jsx_runtime_1.jsx(TimelineRowChrome_1.TimelineRowChrome, { depth: nestedDepth, eye: canToggleVisibility ? (jsx_runtime_1.jsx(TimelineLayerEye_1.TimelineLayerEye, { type: sequence.type === 'audio' ? 'speaker' : 'eye', hidden: isItemHidden, onInvoked: onToggleVisibility })) : (jsx_runtime_1.jsx(TimelineLayerEye_1.TimelineLayerEyeSpacer, {})), arrow: hasExpandableContent && nodePathInfo !== null ? (jsx_runtime_1.jsx(TimelineSequenceExpandArrow, { disabled: !previewInteractive, isExpanded: isExpanded, nodePathInfo: nodePathInfo, onToggleExpand: onToggleExpand, sequence: sequence })) : (jsx_runtime_1.jsx(TimelineExpandArrowButton_1.TimelineExpandArrowSpacer, {})), style: rowStyle, selected: selected, selectable: selectable, selectionItem: selectionItem, onSelect: onSelect, showSelectedBackground: true, containsSelection: containsSelection, hovered: hovered, outerHeight: outerHeight, onDragLeave: canDropEffect ? onEffectDragLeave : undefined, onDragOver: canDropEffect ? onEffectDragOver : undefined, onDrop: canDropEffect ? onEffectDrop : undefined, onDoubleClick: canHandleSequenceDoubleClick ? onSequenceDoubleClick : undefined, onPointerEnter: onPointerEnter, onPointerLeave: onPointerLeave, children: jsx_runtime_1.jsxs("div", { style: labelContainerStyle, children: [connectedCompositions.length > 0 ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
                         jsx_runtime_1.jsx(CompositionOrStillIcon_1.CompositionOrStillIcon, { color: (0, TimelineSelection_1.getTimelineColor)(false, false), composition: connectedCompositions[0], style: connectedCompositionIconStyle }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.5 })
                     ] })) : null, jsx_runtime_1.jsx(TimelineSequenceName_1.TimelineSequenceName, { displayName: timelineDisplayName, fallbackDisplayName: fallbackDisplayName, selected: selected, containsSelection: containsSelection, editing: isRenaming, onCancelEditing: onCancelRenaming, onSaveName: onSaveName }), mediaSrc ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
                         jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.5 }),

package/dist/components/Timeline/TimelineSequencePropItem.js

@@ -10,6 +10,7 @@ const open_in_editor_1 = require("../../helpers/open-in-editor");
 const ContextMenu_1 = require("../ContextMenu");
 const InspectorPanelLayout_1 = require("../InspectorPanelLayout");
 const call_add_keyframe_1 = require("./call-add-keyframe");
+const get_sequence_prop_reset_changes_1 = require("./get-sequence-prop-reset-changes");
 const save_sequence_prop_1 = require("./save-sequence-prop");
 const TimelineExpandArrowButton_1 = require("./TimelineExpandArrowButton");
 const TimelineFieldRowContent_1 = require("./TimelineFieldRowContent");
@@ -230,16 +231,14 @@ const TimelineSequencePropItem = ({ field, validatedLocation, rowDepth, nodePath
         (0, save_sequence_prop_1.saveSequenceProps)({
             addedKeyframes: null,
             movedKeyframes: null,
-            changes: [
-                {
-                    fileName: validatedLocation.source,
-                    nodePath,
-                    fieldKey: field.key,
-                    value: field.fieldSchema.default,
-                    defaultValue,
-                    schema,
-                },
-            ],
+            changes: (0, get_sequence_prop_reset_changes_1.getSequencePropResetChanges)({
+                fileName: validatedLocation.source,
+                nodePath,
+                fieldKey: field.key,
+                value: field.fieldSchema.default,
+                defaultValue,
+                schema,
+            }),
             setPropStatuses,
             clientId: previewServerState.clientId,
             undoLabel: `Reset ${fieldLabel}`,

package/dist/components/Timeline/TimelineTrack.js

@@ -38,6 +38,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = __importStar(require("react"));
 const client_id_1 = require("../../helpers/client-id");
 const timeline_layout_1 = require("../../helpers/timeline-layout");
+const timeline_sequence_hover_1 = require("../../state/timeline-sequence-hover");
 const ExpandedTracksProvider_1 = require("../ExpandedTracksProvider");
 const TimelineExpandedTrackKeyframes_1 = require("./TimelineExpandedTrackKeyframes");
 const TimelineSelection_1 = require("./TimelineSelection");
@@ -49,7 +50,8 @@ const TimelineTrackUnmemoized = ({ track }) => {
     const { previewServerState } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
     const previewServerConnected = previewServerState.type === 'connected';
     const timelineWidth = (0, react_1.useContext)(TimelineWidthProvider_1.TimelineWidthContext);
-    const rowHighlightBackground = (0, TimelineSelection_1.useTimelineRowHighlightBackground)(track.nodePathInfo);
+    const { hovered, onPointerEnter, onPointerLeave } = (0, timeline_sequence_hover_1.useTimelineSequenceHover)(track.nodePathInfo);
+    const rowHighlightBackground = (0, TimelineSelection_1.useTimelineRowHighlightBackground)(track.nodePathInfo, hovered);
     const layerStyle = (0, react_1.useMemo)(() => ({
         height: (0, timeline_layout_1.getTimelineLayerHeight)(track.sequence.type),
         marginBottom: timeline_layout_1.TIMELINE_ITEM_BORDER_BOTTOM,
@@ -58,7 +60,7 @@ const TimelineTrackUnmemoized = ({ track }) => {
     const showExpandedKeyframes = track.nodePathInfo !== null &&
         previewServerConnected &&
         getIsExpanded(track.nodePathInfo);
-    return (jsx_runtime_1.jsxs("div", { children: [
+    return (jsx_runtime_1.jsxs("div", { onPointerEnter: onPointerEnter, onPointerLeave: onPointerLeave, children: [
             jsx_runtime_1.jsxs("div", { style: layerStyle, children: [rowHighlightBackground && timelineWidth !== null ? (jsx_runtime_1.jsx("div", { style: (0, TimelineSelection_1.getTimelineSelectedTrackHighlightStyle)(timelineWidth, rowHighlightBackground) })) : null, jsx_runtime_1.jsx(TimelineSequence_1.TimelineSequence, { s: track.sequence, connectedCompositions: (_a = track.connectedCompositions) !== null && _a !== void 0 ? _a : [], nodePathInfo: track.nodePathInfo, sequenceFrameOffset: track.sequenceFrameOffset })
                 ] }), showExpandedKeyframes && track.nodePathInfo ? (jsx_runtime_1.jsx(TimelineExpandedTrackKeyframes_1.TimelineExpandedTrackKeyframes, { sequence: track.sequence, nodePathInfo: track.nodePathInfo, keyframeDisplayOffset: track.keyframeDisplayOffset })) : null] }));
 };

package/dist/components/Timeline/border-radius-representation.d.ts

@@ -0,0 +1,16 @@
+import { BORDER_RADIUS_LONGHAND_KEYS, BORDER_RADIUS_SHORTHAND_KEY } from '@remotion/studio-shared';
+import type { CanUpdateSequencePropStatus, DragOverrideValue } from 'remotion';
+export { BORDER_RADIUS_LONGHAND_KEYS, BORDER_RADIUS_SHORTHAND_KEY };
+export type BorderRadiusConversion = {
+    readonly type: 'individual';
+    readonly value: number;
+} | {
+    readonly type: 'shorthand';
+    readonly value: number;
+};
+export type BorderRadiusConversionChange = {
+    readonly fieldKey: string;
+    readonly value: number | undefined;
+};
+export declare const getBorderRadiusConversionChanges: (conversion: BorderRadiusConversion) => BorderRadiusConversionChange[];
+export declare const getBorderRadiusConversion: (props: Record<string, CanUpdateSequencePropStatus> | undefined, dragOverrides?: Record<string, DragOverrideValue>) => BorderRadiusConversion | null;

package/dist/components/Timeline/border-radius-representation.js

@@ -0,0 +1,60 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getBorderRadiusConversion = exports.getBorderRadiusConversionChanges = exports.BORDER_RADIUS_SHORTHAND_KEY = exports.BORDER_RADIUS_LONGHAND_KEYS = void 0;
+const studio_shared_1 = require("@remotion/studio-shared");
+Object.defineProperty(exports, "BORDER_RADIUS_LONGHAND_KEYS", { enumerable: true, get: function () { return studio_shared_1.BORDER_RADIUS_LONGHAND_KEYS; } });
+Object.defineProperty(exports, "BORDER_RADIUS_SHORTHAND_KEY", { enumerable: true, get: function () { return studio_shared_1.BORDER_RADIUS_SHORTHAND_KEY; } });
+const getBorderRadiusConversionChanges = (conversion) => {
+    if (conversion.type === 'individual') {
+        return [
+            { fieldKey: studio_shared_1.BORDER_RADIUS_SHORTHAND_KEY, value: undefined },
+            ...studio_shared_1.BORDER_RADIUS_LONGHAND_KEYS.map((fieldKey) => ({
+                fieldKey,
+                value: conversion.value,
+            })),
+        ];
+    }
+    return [
+        ...studio_shared_1.BORDER_RADIUS_LONGHAND_KEYS.map((fieldKey) => ({
+            fieldKey,
+            value: undefined,
+        })),
+        { fieldKey: studio_shared_1.BORDER_RADIUS_SHORTHAND_KEY, value: conversion.value },
+    ];
+};
+exports.getBorderRadiusConversionChanges = getBorderRadiusConversionChanges;
+const getBorderRadiusConversion = (props, dragOverrides = {}) => {
+    const getStaticValue = (key) => {
+        const status = props === null || props === void 0 ? void 0 : props[key];
+        if (status !== undefined && status.status !== 'static') {
+            return { isStatic: false, value: undefined };
+        }
+        const dragOverride = dragOverrides[key];
+        if ((dragOverride === null || dragOverride === void 0 ? void 0 : dragOverride.type) === 'keyframed') {
+            return { isStatic: false, value: undefined };
+        }
+        return {
+            isStatic: true,
+            value: (dragOverride === null || dragOverride === void 0 ? void 0 : dragOverride.type) === 'static'
+                ? dragOverride.value
+                : status === null || status === void 0 ? void 0 : status.codeValue,
+        };
+    };
+    const shorthand = getStaticValue(studio_shared_1.BORDER_RADIUS_SHORTHAND_KEY);
+    if (shorthand.isStatic && typeof shorthand.value === 'number') {
+        return { type: 'individual', value: shorthand.value };
+    }
+    const longhands = studio_shared_1.BORDER_RADIUS_LONGHAND_KEYS.map(getStaticValue);
+    const hasNoAuthoredRadius = [shorthand, ...longhands].every((status) => status.isStatic && status.value === undefined);
+    if (hasNoAuthoredRadius) {
+        return { type: 'individual', value: 0 };
+    }
+    if (longhands.every((status) => status.isStatic && typeof status.value === 'number')) {
+        const values = longhands.map((status) => status.value);
+        if (values.every((value) => value === values[0])) {
+            return { type: 'shorthand', value: values[0] };
+        }
+    }
+    return null;
+};
+exports.getBorderRadiusConversion = getBorderRadiusConversion;

package/dist/components/Timeline/delete-selected-timeline-item.js

@@ -46,12 +46,7 @@ const deleteSequencesFromSource = async (nodePathInfos, confirm) => {
         }),
     })
         .then((result) => {
-        if (result.success) {
-            (0, NotificationCenter_1.showNotification)(nodePathInfos.length === 1
-                ? 'Removed sequence from source file'
-                : 'Removed sequences from source files', 2000);
-        }
-        else {
+        if (!result.success) {
             (0, NotificationCenter_1.showNotification)(result.reason, 4000);
         }
         return true;

package/dist/components/Timeline/get-sequence-prop-reset-changes.d.ts

@@ -0,0 +1,10 @@
+import type { InteractivitySchema, SequencePropsSubscriptionKey } from 'remotion';
+import type { SaveSequencePropChange } from './save-sequence-prop';
+export declare const getSequencePropResetChanges: ({ fileName, nodePath, fieldKey, value, defaultValue, schema, }: {
+    readonly fileName: string;
+    readonly nodePath: SequencePropsSubscriptionKey;
+    readonly fieldKey: string;
+    readonly value: unknown;
+    readonly defaultValue: string | null;
+    readonly schema: InteractivitySchema;
+}) => SaveSequencePropChange[];

package/dist/components/Timeline/get-sequence-prop-reset-changes.js

@@ -0,0 +1,33 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getSequencePropResetChanges = void 0;
+const studio_shared_1 = require("@remotion/studio-shared");
+const remotion_1 = require("remotion");
+const isVisibleFieldSchema = (fieldSchema) => fieldSchema !== undefined && fieldSchema.type !== 'hidden';
+const getDefaultValue = (fieldSchema) => fieldSchema.default !== undefined
+    ? JSON.stringify(fieldSchema.default)
+    : null;
+const getSequencePropResetChanges = ({ fileName, nodePath, fieldKey, value, defaultValue, schema, }) => {
+    const flatSchema = remotion_1.Internals.getFlatSchemaWithAllKeys(schema);
+    const longhandChanges = (0, studio_shared_1.getStylePropertyLonghandKeys)(fieldKey).flatMap((longhandKey) => {
+        const fieldSchema = flatSchema[longhandKey];
+        if (!isVisibleFieldSchema(fieldSchema)) {
+            return [];
+        }
+        return [
+            {
+                fileName,
+                nodePath,
+                fieldKey: longhandKey,
+                value: fieldSchema.default,
+                defaultValue: getDefaultValue(fieldSchema),
+                schema,
+            },
+        ];
+    });
+    return [
+        { fileName, nodePath, fieldKey, value, defaultValue, schema },
+        ...longhandChanges,
+    ];
+};
+exports.getSequencePropResetChanges = getSequencePropResetChanges;