@remotion/studio 4.0.515 → 4.0.517

package/dist/components/StudioSettings.js

@@ -6,16 +6,14 @@ const client_1 = require("@remotion/renderer/client");
 const studio_shared_1 = require("@remotion/studio-shared");
 const react_1 = require("react");
 const colors_1 = require("../helpers/colors");
-const Checkmark_1 = require("../icons/Checkmark");
 const undo_1 = require("../icons/undo");
 const Button_1 = require("./Button");
+const ConfigSelect_1 = require("./ConfigSelect");
 const styles_1 = require("./InspectorPanel/styles");
 const layout_1 = require("./layout");
-const ComboBox_1 = require("./NewComposition/ComboBox");
 const InputDragger_1 = require("./NewComposition/InputDragger");
 const ValidationMessage_1 = require("./NewComposition/ValidationMessage");
 const layout_2 = require("./RenderModal/layout");
-const RenderModalHr_1 = require("./RenderModal/RenderModalHr");
 const SettingsContext_1 = require("./SettingsContext");
 const use_auto_save_config_1 = require("./use-auto-save-config");
 const container = {
@@ -29,15 +27,14 @@ const dividerLabel = {
     margin: 0,
     padding: '4px 16px',
 };
-const controlWidth = {
-    boxSizing: 'border-box',
-    width: 180,
+const sectionTitle = {
+    ...dividerLabel,
+    marginTop: 8,
 };
 const resetIcon = {
     height: 12,
     width: 12,
 };
-const DEFAULT_VALUE = 'studio-default';
 const initialSettings = {
     askAIEnabled: null,
     audioLatencyHint: null,
@@ -50,39 +47,6 @@ const initialSettings = {
     numberOfSharedAudioTags: null,
     rspack: null,
 };
-const ConfigSelect = ({ defaultLabel, name, onChange, options, value, }) => {
-    const values = [
-        {
-            id: DEFAULT_VALUE,
-            keyHint: null,
-            label: `Default (${defaultLabel})`,
-            leftItem: value === null ? jsx_runtime_1.jsx(Checkmark_1.Checkmark, {}) : null,
-            onClick: () => onChange(null),
-            quickSwitcherLabel: null,
-            subMenu: null,
-            type: 'item',
-            value: DEFAULT_VALUE,
-        },
-        { id: `${DEFAULT_VALUE}-divider`, type: 'divider' },
-        ...options.map((option) => {
-            const id = `${name}-${String(option.value)}`;
-            return {
-                id,
-                keyHint: null,
-                label: option.label,
-                leftItem: value === option.value ? jsx_runtime_1.jsx(Checkmark_1.Checkmark, {}) : null,
-                onClick: () => onChange(option.value),
-                quickSwitcherLabel: null,
-                subMenu: null,
-                type: 'item',
-                value: id,
-            };
-        }),
-    ];
-    return (jsx_runtime_1.jsxs("div", { style: layout_2.optionRow, children: [
-            jsx_runtime_1.jsx("div", { style: layout_2.label, children: name }), jsx_runtime_1.jsx("div", { style: layout_2.rightRow, children: jsx_runtime_1.jsx(ComboBox_1.Combobox, { values: values, selectedId: value === null ? DEFAULT_VALUE : `${name}-${String(value)}`, style: controlWidth, title: name }) })
-        ] }));
-};
 const ConfigNumber = ({ defaultLabel, defaultValue, name, onChange, onChangeEnd, value, }) => {
     const resolvedDefaultLabel = defaultLabel !== null && defaultLabel !== void 0 ? defaultLabel : String(defaultValue);
     return (jsx_runtime_1.jsxs("div", { style: layout_2.optionRow, children: [
@@ -91,10 +55,6 @@ const ConfigNumber = ({ defaultLabel, defaultValue, name, onChange, onChangeEnd,
                 ] })
         ] }));
 };
-const booleanOptions = [
-    { label: 'Enabled', value: true },
-    { label: 'Disabled', value: false },
-];
 const StudioSettings = () => {
     var _a;
     const { error: settingsError, revision, studioRuntimeConfig } = (0, SettingsContext_1.useSettings)();
@@ -140,7 +100,6 @@ const StudioSettings = () => {
             update('setAudioLatencyHint', settings.audioLatencyHint),
             update('setNumberOfSharedAudioTags', committedNumberSettings.numberOfSharedAudioTags),
             update('setRspack', settings.rspack),
-            update('setKeyboardShortcutsEnabled', settings.keyboardShortcutsEnabled),
             update('setInteractivityEnabled', settings.interactivityEnabled),
             update('setLogLevel', settings.logLevel),
         ].filter((item) => editedSetters.has(item.setter));
@@ -167,14 +126,14 @@ const StudioSettings = () => {
         return null;
     }
     return (jsx_runtime_1.jsxs("div", { style: container, children: [
-            jsx_runtime_1.jsx("p", { style: dividerLabel, children: "Interface" }), jsx_runtime_1.jsx(ConfigSelect, { defaultLabel: "Enabled", name: "Ask AI enabled", onChange: (value) => changeSetting('askAIEnabled', 'setAskAIEnabled', value), options: booleanOptions, value: settings.askAIEnabled }), jsx_runtime_1.jsx(ConfigSelect, { defaultLabel: "Enabled", name: "Keyboard shortcuts enabled", onChange: (value) => changeSetting('keyboardShortcutsEnabled', 'setKeyboardShortcutsEnabled', value), options: booleanOptions, value: settings.keyboardShortcutsEnabled }), jsx_runtime_1.jsx(ConfigSelect, { defaultLabel: "Enabled", name: "Interactivity enabled", onChange: (value) => changeSetting('interactivityEnabled', 'setInteractivityEnabled', value), options: booleanOptions, value: settings.interactivityEnabled }), jsx_runtime_1.jsx(ConfigNumber, { defaultLabel: "Unlimited", defaultValue: studio_shared_1.DEFAULT_TIMELINE_TRACKS, name: "Max timeline tracks", onChange: (value) => previewNumberSetting('maxTimelineTracks', value), onChangeEnd: (value) => commitNumberSetting('maxTimelineTracks', 'setMaxTimelineTracks', value), value: settings.maxTimelineTracks }), jsx_runtime_1.jsx(RenderModalHr_1.RenderModalHr, {}), jsx_runtime_1.jsx("p", { style: dividerLabel, children: "Audio" }), jsx_runtime_1.jsx(ConfigSelect, { defaultLabel: "Playback", name: "Audio latency hint", onChange: (value) => changeSetting('audioLatencyHint', 'setAudioLatencyHint', value), options: [
+            jsx_runtime_1.jsx("p", { style: dividerLabel, children: "Interface" }), jsx_runtime_1.jsx(ConfigSelect_1.ConfigSelect, { defaultLabel: "Enabled", name: "Ask AI enabled", onChange: (value) => changeSetting('askAIEnabled', 'setAskAIEnabled', value), options: ConfigSelect_1.booleanOptions, value: settings.askAIEnabled }), jsx_runtime_1.jsx(ConfigSelect_1.ConfigSelect, { defaultLabel: "Enabled", name: "Interactivity enabled", onChange: (value) => changeSetting('interactivityEnabled', 'setInteractivityEnabled', value), options: ConfigSelect_1.booleanOptions, value: settings.interactivityEnabled }), jsx_runtime_1.jsx(ConfigNumber, { defaultLabel: "Unlimited", defaultValue: studio_shared_1.DEFAULT_TIMELINE_TRACKS, name: "Max timeline tracks", onChange: (value) => previewNumberSetting('maxTimelineTracks', value), onChangeEnd: (value) => commitNumberSetting('maxTimelineTracks', 'setMaxTimelineTracks', value), value: settings.maxTimelineTracks }), jsx_runtime_1.jsx("p", { style: sectionTitle, children: "Audio" }), jsx_runtime_1.jsx(ConfigSelect_1.ConfigSelect, { defaultLabel: "Playback", name: "Audio latency hint", onChange: (value) => changeSetting('audioLatencyHint', 'setAudioLatencyHint', value), options: [
                     { label: 'Interactive', value: 'interactive' },
                     { label: 'Balanced', value: 'balanced' },
                     { label: 'Playback', value: 'playback' },
-                ], value: settings.audioLatencyHint }), jsx_runtime_1.jsx(ConfigNumber, { defaultValue: 0, name: "Number of shared audio tags", onChange: (value) => previewNumberSetting('numberOfSharedAudioTags', value), onChangeEnd: (value) => commitNumberSetting('numberOfSharedAudioTags', 'setNumberOfSharedAudioTags', value), value: settings.numberOfSharedAudioTags }), jsx_runtime_1.jsx(ConfigSelect, { defaultLabel: "Disabled", name: "Beep on finish", onChange: (value) => changeSetting('beepOnFinish', 'setBeepOnFinish', value), options: booleanOptions, value: settings.beepOnFinish }), jsx_runtime_1.jsx(RenderModalHr_1.RenderModalHr, {}), jsx_runtime_1.jsx("p", { style: dividerLabel, children: "Development" }), jsx_runtime_1.jsx(ConfigSelect, { defaultLabel: "Webpack", name: "Bundler", onChange: (value) => changeSetting('rspack', 'setRspack', value), options: [
+                ], value: settings.audioLatencyHint }), jsx_runtime_1.jsx(ConfigNumber, { defaultValue: 0, name: "Number of shared audio tags", onChange: (value) => previewNumberSetting('numberOfSharedAudioTags', value), onChangeEnd: (value) => commitNumberSetting('numberOfSharedAudioTags', 'setNumberOfSharedAudioTags', value), value: settings.numberOfSharedAudioTags }), jsx_runtime_1.jsx(ConfigSelect_1.ConfigSelect, { defaultLabel: "Disabled", name: "Beep on finish", onChange: (value) => changeSetting('beepOnFinish', 'setBeepOnFinish', value), options: ConfigSelect_1.booleanOptions, value: settings.beepOnFinish }), jsx_runtime_1.jsx("p", { style: sectionTitle, children: "Development" }), jsx_runtime_1.jsx(ConfigSelect_1.ConfigSelect, { defaultLabel: "Webpack", name: "Bundler", onChange: (value) => changeSetting('rspack', 'setRspack', value), options: [
                     { label: 'Rspack', value: true },
                     { label: 'Webpack', value: false },
-                ], value: settings.rspack }), jsx_runtime_1.jsx(ConfigSelect, { defaultLabel: "Disabled", name: "Cross-site isolation", onChange: (value) => changeSetting('enableCrossSiteIsolation', 'setEnableCrossSiteIsolation', value), options: booleanOptions, value: settings.enableCrossSiteIsolation }), jsx_runtime_1.jsx(ConfigSelect, { defaultLabel: "Info", name: "Log level", onChange: (value) => changeSetting('logLevel', 'setLogLevel', value), options: client_1.BrowserSafeApis.logLevels.map((value) => ({
+                ], value: settings.rspack }), jsx_runtime_1.jsx(ConfigSelect_1.ConfigSelect, { defaultLabel: "Disabled", name: "Cross-site isolation", onChange: (value) => changeSetting('enableCrossSiteIsolation', 'setEnableCrossSiteIsolation', value), options: ConfigSelect_1.booleanOptions, value: settings.enableCrossSiteIsolation }), jsx_runtime_1.jsx(ConfigSelect_1.ConfigSelect, { defaultLabel: "Info", name: "Log level", onChange: (value) => changeSetting('logLevel', 'setLogLevel', value), options: client_1.BrowserSafeApis.logLevels.map((value) => ({
                     label: value[0].toUpperCase() + value.slice(1),
                     value,
                 })), value: settings.logLevel }), (error !== null && error !== void 0 ? error : settingsError) ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [

package/dist/components/Tabs/index.js

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

package/dist/components/Timeline/Timeline.js

@@ -62,6 +62,7 @@ const should_subscribe_to_sequence_props_1 = require("./should-subscribe-to-sequ
 const SubscribeToNodePaths_1 = require("./SubscribeToNodePaths");
 const timeline_asset_drop_context_1 = require("./timeline-asset-drop-context");
 const timeline_refs_1 = require("./timeline-refs");
+const timeline_scroll_logic_1 = require("./timeline-scroll-logic");
 const TimelineDragHandler_1 = require("./TimelineDragHandler");
 const TimelineHeightContainer_1 = require("./TimelineHeightContainer");
 const TimelineInOutDragHandler_1 = require("./TimelineInOutDragHandler");
@@ -72,6 +73,7 @@ const TimelinePinchZoom_1 = require("./TimelinePinchZoom");
 const TimelinePlayCursorSyncer_1 = require("./TimelinePlayCursorSyncer");
 const TimelineScrollable_1 = require("./TimelineScrollable");
 const TimelineSelection_1 = require("./TimelineSelection");
+const TimelineSequenceItem_1 = require("./TimelineSequenceItem");
 const TimelineSlider_1 = require("./TimelineSlider");
 const TimelineTimeIndicators_1 = require("./TimelineTimeIndicators");
 const TimelineTracks_1 = require("./TimelineTracks");
@@ -94,6 +96,7 @@ const TimelineContextMenuArea = ({ children }) => {
     const assetDropFrame = (0, use_timeline_asset_drop_1.useTimelineAssetDrop)();
     const { compositions, canvasContent } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
     const videoConfig = remotion_1.Internals.useUnsafeVideoConfig();
+    const isStill = (0, is_current_selected_still_1.useIsStill)();
     const [isAddingSolid, setIsAddingSolid] = (0, react_1.useState)(false);
     const [isAddingAsset, setIsAddingAsset] = (0, react_1.useState)(false);
     const { previewServerState } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
@@ -101,6 +104,44 @@ const TimelineContextMenuArea = ({ children }) => {
     const previewInteractive = previewConnected && (0, interactivity_enabled_1.isStudioInteractivityEnabled)();
     const browserStudioOperations = (0, browser_studio_operations_1.getBrowserStudioOperations)();
     const browserStudioCanInsertSolid = browserStudioOperations !== null;
+    (0, react_1.useEffect)(() => {
+        const verticalScroll = timeline_refs_1.timelineVerticalScroll.current;
+        if (!verticalScroll) {
+            return;
+        }
+        const autoScroll = (0, timeline_scroll_logic_1.startTimelineEdgeAutoScroll)({
+            includeHorizontal: false,
+            includeVertical: true,
+            verticalTopOffset: isStill ? 0 : TimelineTimeIndicators_1.TIMELINE_TIME_INDICATOR_HEIGHT,
+            onTick: (directions) => {
+                if (directions.y === null) {
+                    return;
+                }
+                verticalScroll.scrollTop +=
+                    directions.y === 'up'
+                        ? -timeline_scroll_logic_1.EDGE_SCROLL_VERTICAL_INCREMENT
+                        : timeline_scroll_logic_1.EDGE_SCROLL_VERTICAL_INCREMENT;
+            },
+        });
+        const onDragOver = (event) => {
+            if (!event.dataTransfer ||
+                !Array.from(event.dataTransfer.types).includes(TimelineSequenceItem_1.SEQUENCE_REORDER_MIME_TYPE)) {
+                autoScroll.stop();
+                return;
+            }
+            autoScroll.update(event);
+        };
+        const stopAutoScroll = () => autoScroll.stop();
+        verticalScroll.addEventListener('dragover', onDragOver, true);
+        document.addEventListener('dragend', stopAutoScroll, true);
+        document.addEventListener('drop', stopAutoScroll, true);
+        return () => {
+            autoScroll.stop();
+            verticalScroll.removeEventListener('dragover', onDragOver, true);
+            document.removeEventListener('dragend', stopAutoScroll, true);
+            document.removeEventListener('drop', stopAutoScroll, true);
+        };
+    }, [isStill]);
     const currentCompositionId = (canvasContent === null || canvasContent === void 0 ? void 0 : canvasContent.type) === 'composition' ? canvasContent.compositionId : null;
     const currentComposition = (0, react_1.useMemo)(() => {
         var _a;
@@ -153,7 +194,6 @@ const TimelineContextMenuArea = ({ children }) => {
                 ? await browserStudioOperations.insertSolid(request)
                 : await (0, call_api_1.callApi)('/api/insert-jsx-element', request);
             if (result.success) {
-                (0, NotificationCenter_1.showNotification)('Added <Solid> to source file', 2000);
                 return;
             }
             (0, NotificationCenter_1.showNotification)(result.reason, 4000);

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

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

package/dist/components/Timeline/TimelineAssetField.js

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

package/dist/components/Timeline/TimelineBooleanField.js

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

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

@@ -3,7 +3,6 @@ import type React from 'react';
 import { type OverrideIdToNodePaths, type PropStatuses, type SequencePropsSubscriptionKey, type InteractivitySchema, type TSequence } from 'remotion';
 import type { SequenceNodePathInfo } from '../../helpers/get-timeline-sequence-sort-key';
 import { type EffectsClipboardEnvelope } from './effects-clipboard';
-import { type TimelineSelection } from './TimelineSelection';
 export type PasteEffectsTarget = {
     readonly type: 'valid';
     readonly nodePathInfo: SequenceNodePathInfo;
@@ -28,9 +27,9 @@ export type PasteEffectPropTarget = {
 } | {
     readonly type: 'none' | 'unsupported' | 'effect-type-mismatch' | 'prop-mismatch' | 'uncopyable';
 };
-export declare const getPasteEffectsTarget: (selectedItems: readonly TimelineSelection[]) => PasteEffectsTarget;
+export declare const getPasteEffectsTarget: (selectedItems: readonly import("@remotion/canvas").CanvasSelectionItem[]) => PasteEffectsTarget;
 export declare const getSnapshotsFromSelection: ({ selection, propStatuses, }: {
-    selection: TimelineSelection;
+    selection: import("@remotion/canvas").CanvasSelectionItem;
     propStatuses: PropStatuses;
 }) => EffectClipboardSnapshot[] | null;
 export type EffectClipboardDataFromSelections = {
@@ -44,15 +43,15 @@ export type EffectClipboardDataFromSelections = {
     readonly type: 'uncopyable';
 };
 export declare const getEffectClipboardDataFromSelections: ({ selectedItems, propStatuses, }: {
-    selectedItems: readonly TimelineSelection[];
+    selectedItems: readonly import("@remotion/canvas").CanvasSelectionItem[];
     propStatuses: PropStatuses;
 }) => EffectClipboardDataFromSelections;
 export declare const getEffectsClipboardEnvelopeFromSelections: ({ selectedItems, payload, }: {
-    selectedItems: readonly TimelineSelection[];
+    selectedItems: readonly import("@remotion/canvas").CanvasSelectionItem[];
     payload: EffectClipboardData;
 }) => EffectsClipboardEnvelope;
 export declare const getEffectPropClipboardDataFromSelection: ({ selection, propStatuses, }: {
-    selection: TimelineSelection;
+    selection: import("@remotion/canvas").CanvasSelectionItem;
     propStatuses: PropStatuses;
 }) => EffectPropClipboardData | null;
 export declare const getEasingClipboardDataFromSelection: ({ selection, sequences, overrideIdsToNodePaths, propStatuses, }: {
@@ -68,7 +67,7 @@ export declare const getEasingClipboardDataFromSelection: ({ selection, sequence
     propStatuses: PropStatuses;
 }) => EasingClipboardData | null;
 export declare const getPasteEffectPropTarget: ({ selectedItems, payload, propStatuses, sequences, overrideIdsToNodePaths, }: {
-    readonly selectedItems: readonly TimelineSelection[];
+    readonly selectedItems: readonly import("@remotion/canvas").CanvasSelectionItem[];
     readonly payload: EffectPropClipboardData;
     readonly propStatuses: PropStatuses;
     readonly sequences: TSequence[];

package/dist/components/Timeline/TimelineClipboardKeybindings.js

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

package/dist/components/Timeline/TimelineDragHandler.js

@@ -74,20 +74,25 @@ const getClientXWithScroll = (x) => {
 const TimelineDragHandler = () => {
     const video = remotion_1.Internals.useUnsafeVideoConfig();
     const { zoom: zoomMap } = (0, react_1.useContext)(timeline_zoom_1.TimelineZoomCtx);
-    const { canvasContent } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
+    const { canvasContent, currentAssetMetadata } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
     const containerStyle = (0, react_1.useMemo)(() => {
         var _a;
-        if (!canvasContent || canvasContent.type !== 'composition') {
+        if (!canvasContent) {
             return {};
         }
-        const zoom = (_a = zoomMap[canvasContent.compositionId]) !== null && _a !== void 0 ? _a : timeline_zoom_1.TIMELINE_MIN_ZOOM;
+        const zoom = canvasContent.type === 'composition'
+            ? ((_a = zoomMap[canvasContent.compositionId]) !== null && _a !== void 0 ? _a : timeline_zoom_1.TIMELINE_MIN_ZOOM)
+            : timeline_zoom_1.TIMELINE_MIN_ZOOM;
         return {
             ...container,
             width: 100 * zoom + '%',
             height: TimelineTimeIndicators_1.TIMELINE_TIME_INDICATOR_HEIGHT,
         };
     }, [canvasContent, zoomMap]);
-    if (!canvasContent || canvasContent.type !== 'composition') {
+    const hasPlayableContent = (canvasContent === null || canvasContent === void 0 ? void 0 : canvasContent.type) === 'composition' ||
+        ((canvasContent === null || canvasContent === void 0 ? void 0 : canvasContent.type) === 'asset' &&
+            (currentAssetMetadata === null || currentAssetMetadata === void 0 ? void 0 : currentAssetMetadata.asset) === canvasContent.asset);
+    if (!hasPlayableContent) {
         return null;
     }
     return (jsx_runtime_1.jsx("div", { ref: timeline_refs_1.sliderAreaRef, style: containerStyle, [TimelineSelection_1.TIMELINE_SCRUBBER_ATTR]: true, children: video && (0, interactivity_enabled_1.isStudioSelectionEnabled)() ? (jsx_runtime_1.jsx(TimelineDragHandlerInnerMemo, {})) : null }));
@@ -248,7 +253,9 @@ const TimelineDragHandlerInner = () => {
             return;
         }
         const scroller = (0, timeline_scroll_logic_1.startTimelineEdgeAutoScroll)({
+            includeHorizontal: true,
             includeVertical: false,
+            verticalTopOffset: 0,
             onTick: onEdgeScrollTick,
         });
         autoScroller.current = scroller;

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

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

package/dist/components/Timeline/TimelineEffectItem.js

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

package/dist/components/Timeline/TimelineEffectPropItem.js

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

package/dist/components/Timeline/TimelineExpandedRow.js

@@ -23,6 +23,7 @@ const rowLabel = {
 };
 const TimelineExpandedRowInner = ({ node, depth, nestedDepth, rowDepthBase, getIsExpanded, toggleTrack, validatedLocation, nodePath, schema, keyframeDisplayOffset, keyframeControlsMode, }) => {
     const rowDepth = (rowDepthBase !== null && rowDepthBase !== void 0 ? rowDepthBase : (0, timeline_row_layout_1.getExpandedRowDepth)({ nestedDepth, treeDepth: 0 })) + depth;
+    const isInspector = keyframeControlsMode === 'inspector';
     const selection = (0, TimelineSelection_1.useTimelineRowSelection)(node.nodePathInfo);
     const labelStyle = react_1.default.useMemo(() => ({
         ...rowLabel,
@@ -39,17 +40,17 @@ const TimelineExpandedRowInner = ({ node, depth, nestedDepth, rowDepthBase, getI
         if (node.effectInfo) {
             return (
             // A single effect
-            jsx_runtime_1.jsx(TimelineEffectItem_1.TimelineEffectItem, { label: node.label, nodePathInfo: node.nodePathInfo, effectIndex: node.effectInfo.effectIndex, effectSchema: node.effectInfo.effectSchema, documentationLink: node.effectInfo.documentationLink, nodePath: nodePath, validatedLocation: validatedLocation, rowDepth: rowDepth, getIsExpanded: getIsExpanded, toggleTrack: toggleTrack }));
+            jsx_runtime_1.jsx(TimelineEffectItem_1.TimelineEffectItem, { label: node.label, nodePathInfo: node.nodePathInfo, effectIndex: node.effectInfo.effectIndex, effectSchema: node.effectInfo.effectSchema, documentationLink: node.effectInfo.documentationLink, nodePath: nodePath, validatedLocation: validatedLocation, rowDepth: rowDepth, labelNextToToggle: isInspector, getIsExpanded: getIsExpanded, toggleTrack: toggleTrack }));
         }
         // Group like "Effects"
         const isExpanded = getIsExpanded(node.nodePathInfo);
         return (jsx_runtime_1.jsx(TimelineRowChrome_1.TimelineRowChrome, { depth: rowDepth, eye: jsx_runtime_1.jsx(TimelineLayerEye_1.TimelineLayerEyeSpacer, {}), arrow: jsx_runtime_1.jsx(TimelineExpandArrowButton_1.TimelineExpandArrowButton, { isExpanded: isExpanded, onClick: () => toggleTrack(node.nodePathInfo), label: `${node.label} section`, disabled: false }), style: {
                 height: timeline_layout_1.TREE_GROUP_ROW_HEIGHT,
-            }, selected: selection.selected, selectable: selection.selectable, onSelect: selection.onSelect, showSelectedBackground: true, containsSelection: false, isFieldRow: false, outerHeight: null, children: jsx_runtime_1.jsx("span", { style: labelStyle, children: node.label }) }));
+            }, selected: selection.selected, selectable: selection.selectable, onSelect: selection.onSelect, showSelectedBackground: true, containsSelection: false, outerHeight: null, children: jsx_runtime_1.jsx("span", { style: labelStyle, children: node.label }) }));
     }
     if (node.field) {
         if (node.field.kind === 'effect-field') {
-            return (jsx_runtime_1.jsx(TimelineEffectPropItem_1.TimelineEffectPropItem, { field: node.field, validatedLocation: validatedLocation, rowDepth: rowDepth, nodePath: nodePath, nodePathInfo: node.nodePathInfo, keyframeDisplayOffset: keyframeDisplayOffset, keyframeControlsMode: keyframeControlsMode, runtimeValueStore: node.runtimeValueStore }));
+            return (jsx_runtime_1.jsx(TimelineEffectPropItem_1.TimelineEffectPropItem, { field: node.field, validatedLocation: validatedLocation, rowDepth: isInspector ? rowDepth - 1 : rowDepth, nodePath: nodePath, nodePathInfo: node.nodePathInfo, keyframeDisplayOffset: keyframeDisplayOffset, keyframeControlsMode: keyframeControlsMode, runtimeValueStore: node.runtimeValueStore }));
         }
         if (node.field.kind === 'sequence-field') {
             return (jsx_runtime_1.jsx(TimelineSequencePropItem_1.TimelineSequencePropItem, { field: node.field, validatedLocation: validatedLocation, rowDepth: rowDepth, nodePath: nodePath, nodePathInfo: node.nodePathInfo, schema: schema, keyframeDisplayOffset: keyframeDisplayOffset, keyframeControlsMode: keyframeControlsMode, runtimeValue: node.runtimeValue }));
@@ -58,6 +59,6 @@ const TimelineExpandedRowInner = ({ node, depth, nestedDepth, rowDepthBase, getI
     }
     return (jsx_runtime_1.jsx(TimelineRowChrome_1.TimelineRowChrome, { depth: rowDepth, eye: jsx_runtime_1.jsx(TimelineLayerEye_1.TimelineLayerEyeSpacer, {}), arrow: jsx_runtime_1.jsx(TimelineExpandArrowButton_1.TimelineExpandArrowSpacer, {}), style: {
             height: (0, timeline_layout_1.getTreeRowHeight)(node),
-        }, selected: selection.selected, selectable: selection.selectable, onSelect: selection.onSelect, showSelectedBackground: true, containsSelection: false, isFieldRow: false, outerHeight: null, children: jsx_runtime_1.jsx("span", { style: labelStyle, children: node.label }) }));
+        }, selected: selection.selected, selectable: selection.selectable, onSelect: selection.onSelect, showSelectedBackground: true, containsSelection: false, outerHeight: null, children: jsx_runtime_1.jsx("span", { style: labelStyle, children: node.label }) }));
 };
 exports.TimelineExpandedRow = react_1.default.memo(TimelineExpandedRowInner);

package/dist/components/Timeline/TimelineFieldLabel.js

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

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

@@ -1,9 +1,8 @@
 import React from 'react';
-import { type SchemaFieldInfo } from '../../helpers/timeline-layout';
+import type { SchemaFieldInfo } from '../../helpers/timeline-layout';
 export declare const TimelineFieldRowContent: React.FC<{
     readonly field: SchemaFieldInfo;
     readonly rowDepth: number;
     readonly selected: boolean;
-    readonly keyframeControls: React.ReactNode;
     readonly children: React.ReactNode;
 }>;