@remotion/studio 4.0.499 → 4.0.501

package/dist/components/SelectedOutlineOverlay.js

@@ -33,7 +33,7 @@ var __importStar = (this && this.__importStar) || (function () {
     };
 })();
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.SelectedOutlineOverlay = exports.orderOutlinesForRendering = exports.selectedOutlineDragThresholdPx = exports.getTransformedSvgViewportPoints = exports.getSequencesWithSelectableOutlines = exports.getSelectedSequenceKeys = exports.getSelectedOutlineRotationPivot = exports.getSelectedOutlineRotationDeltaDegrees = exports.getSelectedOutlineRotationCornerInfo = exports.getSelectedEffectFieldsBySequenceKey = exports.getOutlineSelectionInteraction = exports.snapSelectedOutlineUv = exports.snapSelectedOutlineTransformOriginUv = exports.snapSelectedOutlineRotationDeltaDegrees = exports.selectedOutlineUvSnapThresholdPx = exports.selectedOutlineTransformOriginSnapThresholdPx = exports.isSelectedOutlineDragPastThreshold = exports.getSelectedOutlineTransformOriginLockedAxis = exports.getSelectedOutlineTransformOriginDragChanges = exports.getSelectedOutlineScaleEdgeInfo = exports.getSelectedOutlineScaleDragValues = exports.getSelectedOutlineScaleDragStates = exports.getSelectedOutlineScaleDragChanges = exports.getSelectedOutlineRotationDragValues = exports.getSelectedOutlineRotationDragStates = exports.getSelectedOutlineRotationDragChanges = exports.getSelectedOutlineKeyboardNudgeDeltas = exports.getSelectedOutlineKeyboardNudgeDelta = exports.getSelectedOutlineDragValues = exports.getSelectedOutlineDragChanges = exports.getSelectedOutlineActiveSchema = exports.compensateTranslateForTransformOrigin = exports.applySelectedOutlineTransformOriginAxisLock = exports.applySelectedOutlineDragAxisLock = void 0;
+exports.SelectedOutlineOverlay = exports.orderOutlinesForRendering = exports.selectedOutlineDragThresholdPx = exports.getTransformedSvgViewportPoints = exports.getSequencesWithSelectableOutlines = exports.getSelectedSequenceKeys = exports.getSelectedOutlineRotationPivot = exports.getSelectedOutlineRotationDeltaDegrees = exports.getSelectedOutlineRotationCornerInfo = exports.getSelectedEffectFieldsBySequenceKey = exports.getSelectedCropInfo = exports.getOutlineSelectionInteraction = exports.snapSelectedOutlineUv = exports.snapSelectedOutlineTransformOriginUv = exports.snapSelectedOutlineRotationDeltaDegrees = exports.selectedOutlineUvSnapThresholdPx = exports.selectedOutlineTransformOriginSnapThresholdPx = exports.isSelectedOutlineDragPastThreshold = exports.getSelectedOutlineTransformOriginLockedAxis = exports.getSelectedOutlineTransformOriginDragChanges = exports.getSelectedOutlineScaleEdgeInfo = exports.getSelectedOutlineScaleDragValues = exports.getSelectedOutlineScaleDragStates = exports.getSelectedOutlineScaleDragChanges = exports.getSelectedOutlineRotationDragValues = exports.getSelectedOutlineRotationDragStates = exports.getSelectedOutlineRotationDragChanges = exports.getSelectedOutlineKeyboardNudgeDeltas = exports.getSelectedOutlineKeyboardNudgeDelta = exports.getSelectedOutlineDragValues = exports.getSelectedOutlineDragChanges = exports.getSelectedOutlineCropFollowingTransformOrigin = exports.getSelectedOutlineCropDragValues = exports.getSelectedOutlineCropDragChanges = exports.getSelectedOutlineActiveSchema = exports.compensateTranslateForTransformOrigin = exports.applySelectedOutlineTransformOriginAxisLock = exports.applySelectedOutlineDragAxisLock = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const player_1 = require("@remotion/player");
 const react_1 = __importStar(require("react"));
@@ -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");
@@ -63,6 +64,9 @@ Object.defineProperty(exports, "applySelectedOutlineDragAxisLock", { enumerable:
 Object.defineProperty(exports, "applySelectedOutlineTransformOriginAxisLock", { enumerable: true, get: function () { return selected_outline_drag_2.applySelectedOutlineTransformOriginAxisLock; } });
 Object.defineProperty(exports, "compensateTranslateForTransformOrigin", { enumerable: true, get: function () { return selected_outline_drag_2.compensateTranslateForTransformOrigin; } });
 Object.defineProperty(exports, "getSelectedOutlineActiveSchema", { enumerable: true, get: function () { return selected_outline_drag_2.getSelectedOutlineActiveSchema; } });
+Object.defineProperty(exports, "getSelectedOutlineCropDragChanges", { enumerable: true, get: function () { return selected_outline_drag_2.getSelectedOutlineCropDragChanges; } });
+Object.defineProperty(exports, "getSelectedOutlineCropDragValues", { enumerable: true, get: function () { return selected_outline_drag_2.getSelectedOutlineCropDragValues; } });
+Object.defineProperty(exports, "getSelectedOutlineCropFollowingTransformOrigin", { enumerable: true, get: function () { return selected_outline_drag_2.getSelectedOutlineCropFollowingTransformOrigin; } });
 Object.defineProperty(exports, "getSelectedOutlineDragChanges", { enumerable: true, get: function () { return selected_outline_drag_2.getSelectedOutlineDragChanges; } });
 Object.defineProperty(exports, "getSelectedOutlineDragValues", { enumerable: true, get: function () { return selected_outline_drag_2.getSelectedOutlineDragValues; } });
 Object.defineProperty(exports, "getSelectedOutlineKeyboardNudgeDelta", { enumerable: true, get: function () { return selected_outline_drag_2.getSelectedOutlineKeyboardNudgeDelta; } });
@@ -84,6 +88,7 @@ Object.defineProperty(exports, "snapSelectedOutlineTransformOriginUv", { enumera
 Object.defineProperty(exports, "snapSelectedOutlineUv", { enumerable: true, get: function () { return selected_outline_drag_2.snapSelectedOutlineUv; } });
 const selected_outline_measurement_2 = require("./selected-outline-measurement");
 Object.defineProperty(exports, "getOutlineSelectionInteraction", { enumerable: true, get: function () { return selected_outline_measurement_2.getOutlineSelectionInteraction; } });
+Object.defineProperty(exports, "getSelectedCropInfo", { enumerable: true, get: function () { return selected_outline_measurement_2.getSelectedCropInfo; } });
 Object.defineProperty(exports, "getSelectedEffectFieldsBySequenceKey", { enumerable: true, get: function () { return selected_outline_measurement_2.getSelectedEffectFieldsBySequenceKey; } });
 Object.defineProperty(exports, "getSelectedOutlineRotationCornerInfo", { enumerable: true, get: function () { return selected_outline_measurement_2.getSelectedOutlineRotationCornerInfo; } });
 Object.defineProperty(exports, "getSelectedOutlineRotationDeltaDegrees", { enumerable: true, get: function () { return selected_outline_measurement_2.getSelectedOutlineRotationDeltaDegrees; } });
@@ -93,6 +98,50 @@ Object.defineProperty(exports, "getSequencesWithSelectableOutlines", { enumerabl
 Object.defineProperty(exports, "getTransformedSvgViewportPoints", { enumerable: true, get: function () { return selected_outline_measurement_2.getTransformedSvgViewportPoints; } });
 const selected_outline_types_2 = require("./selected-outline-types");
 Object.defineProperty(exports, "selectedOutlineDragThresholdPx", { enumerable: true, get: function () { return selected_outline_types_2.selectedOutlineDragThresholdPx; } });
+const getEffectiveCropValue = ({ activeSchema, controls, dragOverrides, fieldKey, frame, propStatuses, }) => {
+    var _a;
+    const fieldSchema = activeSchema === null || activeSchema === void 0 ? void 0 : activeSchema[fieldKey];
+    if ((fieldSchema === null || fieldSchema === void 0 ? void 0 : fieldSchema.type) !== 'number') {
+        return 0;
+    }
+    const propStatus = propStatuses === null || propStatuses === void 0 ? void 0 : propStatuses[fieldKey];
+    const value = (propStatus === null || propStatus === void 0 ? void 0 : propStatus.status) === 'static' || (propStatus === null || propStatus === void 0 ? void 0 : propStatus.status) === 'keyframed'
+        ? remotion_1.Internals.getEffectiveVisualModeValue({
+            propStatus,
+            dragOverrideValue: dragOverrides[fieldKey],
+            defaultValue: fieldSchema.default,
+            frame,
+            shouldResortToDefaultValueIfUndefined: true,
+        })
+        : ((_a = controls === null || controls === void 0 ? void 0 : controls.currentRuntimeValueDotNotation[fieldKey]) !== null && _a !== void 0 ? _a : fieldSchema.default);
+    return typeof value === 'number' && Number.isFinite(value) ? value : 0;
+};
+const getCropDragFields = ({ activeSchema, cropValues, propStatuses, }) => {
+    if (!(0, selected_outline_types_1.canEditSelectedOutlineCrop)({
+        schema: activeSchema,
+        propStatuses,
+    })) {
+        return null;
+    }
+    const fields = {};
+    for (const fieldKey of Object.values(selected_outline_types_1.cropFieldKeys)) {
+        const fieldSchema = activeSchema === null || activeSchema === void 0 ? void 0 : activeSchema[fieldKey];
+        const propStatus = propStatuses === null || propStatuses === void 0 ? void 0 : propStatuses[fieldKey];
+        const canEditStatus = (propStatus === null || propStatus === void 0 ? void 0 : propStatus.status) === 'static' ||
+            ((propStatus === null || propStatus === void 0 ? void 0 : propStatus.status) === 'keyframed' &&
+                propStatus.interpolationFunction === 'interpolate');
+        if ((fieldSchema === null || fieldSchema === void 0 ? void 0 : fieldSchema.type) !== 'number' || !canEditStatus) {
+            return null;
+        }
+        fields[fieldKey] = {
+            defaultValue: fieldSchema.default,
+            fieldSchema,
+            propStatus,
+            value: cropValues[fieldKey],
+        };
+    }
+    return fields;
+};
 const outlineContainer = {
     position: 'absolute',
     inset: 0,
@@ -371,26 +420,36 @@ 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);
     const keyboardNudgeSessionRef = (0, react_1.useRef)(null);
     const saveKeyboardNudgeSessionRef = (0, react_1.useRef)(() => undefined);
+    const previewInteractive = previewServerState.type === 'connected' && (0, interactivity_enabled_1.isStudioInteractivityEnabled)();
+    const previewSelectionAvailable = previewServerState.type === 'connected' || window.remotion_isReadOnlyStudio;
     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);
     }, []);
@@ -398,13 +457,16 @@ const SelectedOutlineOverlay = ({ compositionHeight, compositionWidth, scale, tr
         selectItem(item, interaction, undefined, { reveal: true });
     }, [selectItem]);
     const outlineTargets = (0, react_1.useMemo)(() => {
-        if (!(0, interactivity_enabled_1.isStudioInteractivityEnabled)() || !editorShowOutlines) {
+        if (!(0, interactivity_enabled_1.isStudioSelectionEnabled)() ||
+            !previewSelectionAvailable ||
+            !editorShowOutlines) {
             return [];
         }
         const selectedSequenceKeys = (0, selected_outline_measurement_1.getSelectedSequenceKeys)(selectedItems);
         const sequenceKeysContainingSelection = (0, selected_outline_measurement_1.getSequenceKeysContainingSelection)(selectedItems);
         const selectedEffectsBySequenceKey = (0, selected_outline_measurement_1.getSelectedEffectFieldsBySequenceKey)(selectedItems);
         const selectedTransformOriginInfo = (0, selected_outline_measurement_1.getSelectedTransformOriginInfo)(selectedItems);
+        const selectedCropInfo = (0, selected_outline_measurement_1.getSelectedCropInfo)(selectedItems);
         const clientId = previewServerState.type === 'connected'
             ? previewServerState.clientId
             : null;
@@ -434,6 +496,46 @@ const SelectedOutlineOverlay = ({ compositionHeight, compositionWidth, scale, tr
                     frame: sourceFrame,
                 })
                 : null;
+            const cropValues = {
+                cropLeft: getEffectiveCropValue({
+                    activeSchema,
+                    controls,
+                    dragOverrides,
+                    fieldKey: selected_outline_types_1.cropFieldKeys.left,
+                    frame: sourceFrame,
+                    propStatuses: nodePropStatuses,
+                }),
+                cropRight: getEffectiveCropValue({
+                    activeSchema,
+                    controls,
+                    dragOverrides,
+                    fieldKey: selected_outline_types_1.cropFieldKeys.right,
+                    frame: sourceFrame,
+                    propStatuses: nodePropStatuses,
+                }),
+                cropTop: getEffectiveCropValue({
+                    activeSchema,
+                    controls,
+                    dragOverrides,
+                    fieldKey: selected_outline_types_1.cropFieldKeys.top,
+                    frame: sourceFrame,
+                    propStatuses: nodePropStatuses,
+                }),
+                cropBottom: getEffectiveCropValue({
+                    activeSchema,
+                    controls,
+                    dragOverrides,
+                    fieldKey: selected_outline_types_1.cropFieldKeys.bottom,
+                    frame: sourceFrame,
+                    propStatuses: nodePropStatuses,
+                }),
+            };
+            const crop = remotion_1.Internals.resolveSequenceCrop(cropValues);
+            const cropFields = getCropDragFields({
+                activeSchema,
+                cropValues,
+                propStatuses: nodePropStatuses,
+            });
             const fieldSchema = activeSchema === null || activeSchema === void 0 ? void 0 : activeSchema[selected_outline_types_1.translateFieldKey];
             const propStatus = nodePropStatuses === null || nodePropStatuses === void 0 ? void 0 : nodePropStatuses[selected_outline_types_1.translateFieldKey];
             const scaleFieldSchema = activeSchema === null || activeSchema === void 0 ? void 0 : activeSchema[selected_outline_types_1.scaleFieldKey];
@@ -459,18 +561,18 @@ const SelectedOutlineOverlay = ({ compositionHeight, compositionWidth, scale, tr
             const canRotationDragStatus = (rotationPropStatus === null || rotationPropStatus === void 0 ? void 0 : rotationPropStatus.status) === 'static' ||
                 ((rotationPropStatus === null || rotationPropStatus === void 0 ? void 0 : rotationPropStatus.status) === 'keyframed' &&
                     rotationPropStatus.interpolationFunction === 'interpolate');
-            const canDrag = previewServerState.type === 'connected' &&
+            const canDrag = previewInteractive &&
                 controls !== null &&
                 (fieldSchema === null || fieldSchema === void 0 ? void 0 : fieldSchema.type) === 'translate' &&
                 canDragStatus;
             const canScaleDragStatus = (scalePropStatus === null || scalePropStatus === void 0 ? void 0 : scalePropStatus.status) === 'static' ||
                 ((scalePropStatus === null || scalePropStatus === void 0 ? void 0 : scalePropStatus.status) === 'keyframed' &&
                     scalePropStatus.interpolationFunction === 'interpolate');
-            const canScaleDrag = previewServerState.type === 'connected' &&
+            const canScaleDrag = previewInteractive &&
                 controls !== null &&
                 (scaleFieldSchema === null || scaleFieldSchema === void 0 ? void 0 : scaleFieldSchema.type) === 'scale' &&
                 canScaleDragStatus;
-            const canRotationDrag = previewServerState.type === 'connected' &&
+            const canRotationDrag = previewInteractive &&
                 controls !== null &&
                 (rotationFieldSchema === null || rotationFieldSchema === void 0 ? void 0 : rotationFieldSchema.type) === 'rotation-css' &&
                 canRotationDragStatus;
@@ -485,17 +587,44 @@ const SelectedOutlineOverlay = ({ compositionHeight, compositionWidth, scale, tr
             const canTransformOriginTranslateStatus = (propStatus === null || propStatus === void 0 ? void 0 : propStatus.status) === 'static' ||
                 ((propStatus === null || propStatus === void 0 ? void 0 : propStatus.status) === 'keyframed' &&
                     propStatus.interpolationFunction === 'interpolate');
-            const canTransformOriginDrag = previewServerState.type === 'connected' &&
+            const canTransformOriginDrag = previewInteractive &&
                 selectedForTransformOrigin &&
                 controls !== null &&
                 (transformOriginFieldSchema === null || transformOriginFieldSchema === void 0 ? void 0 : transformOriginFieldSchema.type) === 'transform-origin' &&
                 (fieldSchema === null || fieldSchema === void 0 ? void 0 : fieldSchema.type) === 'translate' &&
                 canTransformOriginStatus &&
                 canTransformOriginTranslateStatus;
-            const canDropEffect = previewServerState.type === 'connected' &&
-                (controls === null || controls === void 0 ? void 0 : controls.supportsEffects) === true;
+            const selectedForCrop = (selectedCropInfo === null || selectedCropInfo === void 0 ? void 0 : selectedCropInfo.sequenceKey) === key;
+            const cropSourceFrame = (selectedCropInfo === null || selectedCropInfo === void 0 ? void 0 : selectedCropInfo.displayFrame) === null ||
+                (selectedCropInfo === null || selectedCropInfo === void 0 ? void 0 : selectedCropInfo.displayFrame) === undefined
+                ? sourceFrame
+                : selectedCropInfo.displayFrame - keyframeDisplayOffset;
+            const canCropDrag = previewInteractive &&
+                selectedForCrop &&
+                controls !== null &&
+                cropFields !== null;
+            const canDropEffect = previewInteractive && (controls === null || controls === void 0 ? void 0 : controls.supportsEffects) === true;
             return {
                 key,
+                canCrop: previewInteractive && controls !== null && cropFields !== null,
+                crop,
+                cropDrag: canCropDrag
+                    ? {
+                        clientId: previewServerState.clientId,
+                        fields: cropFields,
+                        nodePath,
+                        schema: controls.schema,
+                        sourceFrame: cropSourceFrame,
+                        transformOrigin: (transformOriginFieldSchema === null || transformOriginFieldSchema === void 0 ? void 0 : transformOriginFieldSchema.type) === 'transform-origin' &&
+                            transformOriginPropStatus !== undefined
+                            ? {
+                                defaultValue: transformOriginFieldSchema.default,
+                                propStatus: transformOriginPropStatus,
+                                value: transformOriginValueForRotation,
+                            }
+                            : null,
+                    }
+                    : null,
                 containsSelection,
                 effectDrop: canDropEffect
                     ? {
@@ -628,6 +757,8 @@ const SelectedOutlineOverlay = ({ compositionHeight, compositionWidth, scale, tr
         getScaleLockState,
         editorShowOutlines,
         overrideIdToNodePathMappings,
+        previewInteractive,
+        previewSelectionAvailable,
         previewServerState,
         selectedItems,
         sequences,
@@ -635,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]);
@@ -951,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/SequencePropsSubscriptionProvider.d.ts

@@ -1,3 +1,5 @@
+import type { OverrideIdToNodePaths, TSequence } from 'remotion';
+export declare const getReadOnlyOverrideIdToNodePathMappings: (sequences: readonly TSequence[]) => OverrideIdToNodePaths;
 export declare const SequencePropsSubscriptionProvider: React.FC<{
     readonly children: React.ReactNode;
 }>;

package/dist/components/SequencePropsSubscriptionProvider.js

@@ -1,11 +1,37 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.SequencePropsSubscriptionProvider = void 0;
+exports.SequencePropsSubscriptionProvider = exports.getReadOnlyOverrideIdToNodePathMappings = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const remotion_1 = require("remotion");
+const getReadOnlyOverrideIdToNodePathMappings = (sequences) => {
+    return Object.fromEntries(sequences.flatMap((sequence) => {
+        var _a;
+        const overrideId = (_a = sequence.controls) === null || _a === void 0 ? void 0 : _a.overrideId;
+        if (!overrideId) {
+            return [];
+        }
+        return [
+            [
+                overrideId,
+                {
+                    absolutePath: '',
+                    effectKeys: [],
+                    nodePath: ['readonly-sequence', overrideId],
+                    sequenceKeys: [],
+                    videoConfigValues: null,
+                },
+            ],
+        ];
+    }));
+};
+exports.getReadOnlyOverrideIdToNodePathMappings = getReadOnlyOverrideIdToNodePathMappings;
 const SequencePropsSubscriptionProvider = ({ children }) => {
+    const { sequences } = (0, react_1.useContext)(remotion_1.Internals.SequenceManager);
     const [overrideToNodePathMap, setOverrideIdToNodePathMap] = (0, react_1.useState)({});
+    const readOnlyOverrideToNodePathMap = (0, react_1.useMemo)(() => window.remotion_isReadOnlyStudio
+        ? (0, exports.getReadOnlyOverrideIdToNodePathMappings)(sequences)
+        : null, [sequences]);
     const setOverrideIdToNodePath = (0, react_1.useCallback)((overrideId, state) => {
         setOverrideIdToNodePathMap((prev) => {
             const existing = prev[overrideId];
@@ -16,8 +42,10 @@ const SequencePropsSubscriptionProvider = ({ children }) => {
         });
     }, []);
     const getters = (0, react_1.useMemo)(() => {
-        return { overrideIdToNodePathMappings: overrideToNodePathMap };
-    }, [overrideToNodePathMap]);
+        return {
+            overrideIdToNodePathMappings: readOnlyOverrideToNodePathMap !== null && readOnlyOverrideToNodePathMap !== void 0 ? readOnlyOverrideToNodePathMap : overrideToNodePathMap,
+        };
+    }, [overrideToNodePathMap, readOnlyOverrideToNodePathMap]);
     const setters = (0, react_1.useMemo)(() => {
         return { setOverrideIdToNodePath };
     }, [setOverrideIdToNodePath]);

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/SidebarCollapserControls.d.ts

@@ -1,2 +1,4 @@
 import React from 'react';
-export declare const SidebarCollapserControls: React.FC<{}>;
+export declare const SidebarCollapserControl: React.FC<{
+    readonly side: 'left' | 'right';
+}>;

package/dist/components/SidebarCollapserControls.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.SidebarCollapserControls = void 0;
+exports.SidebarCollapserControl = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const ShortcutHint_1 = require("../error-overlay/remotion-overlay/ShortcutHint");
@@ -18,7 +18,7 @@ const style = {
     color: colors_1.CURRENT_COLOR,
     position: 'relative',
 };
-const SidebarCollapserControls = () => {
+const SidebarCollapserControl = ({ side }) => {
     const { setSidebarCollapsedState, sidebarCollapsedStateRight } = (0, react_1.useContext)(sidebar_1.SidebarContext);
     const keybindings = (0, use_keybinding_1.useKeybinding)();
     const leftSidebarStatus = (0, TopPanel_1.useResponsiveSidebarStatus)();
@@ -83,15 +83,30 @@ const SidebarCollapserControls = () => {
         toggleRight,
     ]);
     (0, react_1.useEffect)(() => {
-        const left = keybindings.registerKeybinding({
-            event: 'keydown',
-            key: 'b',
-            commandCtrlKey: true,
-            callback: toggleLeft,
-            preventDefault: true,
-            triggerIfInputFieldFocused: false,
-            keepRegisteredWhenNotHighestContext: false,
-        });
+        if (side === 'left') {
+            const left = keybindings.registerKeybinding({
+                event: 'keydown',
+                key: 'b',
+                commandCtrlKey: true,
+                callback: toggleLeft,
+                preventDefault: true,
+                triggerIfInputFieldFocused: false,
+                keepRegisteredWhenNotHighestContext: false,
+            });
+            const zen = keybindings.registerKeybinding({
+                event: 'keydown',
+                key: 'g',
+                commandCtrlKey: true,
+                callback: toggleBoth,
+                preventDefault: true,
+                triggerIfInputFieldFocused: false,
+                keepRegisteredWhenNotHighestContext: false,
+            });
+            return () => {
+                left.unregister();
+                zen.unregister();
+            };
+        }
         const right = keybindings.registerKeybinding({
             event: 'keydown',
             key: 'j',
@@ -101,21 +116,10 @@ const SidebarCollapserControls = () => {
             triggerIfInputFieldFocused: false,
             keepRegisteredWhenNotHighestContext: false,
         });
-        const zen = keybindings.registerKeybinding({
-            event: 'keydown',
-            key: 'g',
-            commandCtrlKey: true,
-            callback: toggleBoth,
-            preventDefault: true,
-            triggerIfInputFieldFocused: false,
-            keepRegisteredWhenNotHighestContext: false,
-        });
         return () => {
-            left.unregister();
             right.unregister();
-            zen.unregister();
         };
-    }, [keybindings, toggleBoth, toggleLeft, toggleRight]);
+    }, [keybindings, side, toggleBoth, toggleLeft, toggleRight]);
     const toggleLeftTooltip = (0, use_keybinding_1.areKeyboardShortcutsDisabled)()
         ? 'Toggle Left Sidebar'
         : `Toggle Left Sidebar (${ShortcutHint_1.cmdOrCtrlCharacter}+B)`;
@@ -129,13 +133,14 @@ const SidebarCollapserControls = () => {
         };
     }, []);
     const toggleLeftAction = (0, react_1.useCallback)((color) => {
-        return (jsx_runtime_1.jsx("div", { style: colorStyle(color), title: toggleLeftTooltip, children: jsx_runtime_1.jsx("div", { style: leftIcon(color) }) }));
+        return (jsx_runtime_1.jsx("div", { "data-sidebar-toggle": "left", style: colorStyle(color), title: toggleLeftTooltip, children: jsx_runtime_1.jsx("div", { style: leftIcon(color) }) }));
     }, [colorStyle, leftIcon, toggleLeftTooltip]);
     const toggleRightAction = (0, react_1.useCallback)((color) => {
-        return (jsx_runtime_1.jsx("div", { style: colorStyle(color), title: toggleRightTooltip, children: jsx_runtime_1.jsx("div", { style: rightIcon(color) }) }));
+        return (jsx_runtime_1.jsx("div", { "data-sidebar-toggle": "right", style: colorStyle(color), title: toggleRightTooltip, children: jsx_runtime_1.jsx("div", { style: rightIcon(color) }) }));
     }, [colorStyle, rightIcon, toggleRightTooltip]);
-    return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
-            jsx_runtime_1.jsx(InlineAction_1.InlineAction, { onClick: toggleLeft, renderAction: toggleLeftAction }), jsx_runtime_1.jsx(InlineAction_1.InlineAction, { onClick: toggleRight, renderAction: toggleRightAction })
-        ] }));
+    if (side === 'left') {
+        return (jsx_runtime_1.jsx(InlineAction_1.InlineAction, { onClick: toggleLeft, renderAction: toggleLeftAction, unhoveredColor: colors_1.WHITE_ALPHA_80 }));
+    }
+    return (jsx_runtime_1.jsx(InlineAction_1.InlineAction, { onClick: toggleRight, renderAction: toggleRightAction, unhoveredColor: colors_1.WHITE_ALPHA_80 }));
 };
-exports.SidebarCollapserControls = SidebarCollapserControls;
+exports.SidebarCollapserControl = SidebarCollapserControl;

package/dist/components/SnappingToggle.d.ts

@@ -1,4 +1,2 @@
 import React from 'react';
-export declare const SnappingToggle: React.FC<{
-    readonly disabled: boolean;
-}>;
+export declare const SnappingToggle: React.FC;

package/dist/components/SnappingToggle.js

@@ -9,7 +9,7 @@ const use_keybinding_1 = require("../helpers/use-keybinding");
 const magnet_1 = require("../icons/magnet");
 const editor_snapping_1 = require("../state/editor-snapping");
 const ControlButton_1 = require("./ControlButton");
-const SnappingToggle = ({ disabled }) => {
+const SnappingToggle = () => {
     const { editorSnapping, setEditorSnapping } = (0, react_1.useContext)(editor_snapping_1.EditorSnappingContext);
     const onClick = (0, react_1.useCallback)(() => {
         setEditorSnapping((current) => !current);
@@ -21,6 +21,6 @@ const SnappingToggle = ({ disabled }) => {
     ]
         .filter(no_react_1.NoReactInternals.truthy)
         .join(' ');
-    return (jsx_runtime_1.jsx(ControlButton_1.ControlButton, { title: accessibilityLabel, "aria-label": accessibilityLabel, "aria-pressed": editorSnapping, "aria-keyshortcuts": "Shift+M", disabled: disabled, onClick: onClick, children: jsx_runtime_1.jsx(magnet_1.MagnetIcon, { style: { width: 17, height: 17 }, fill: color, "aria-hidden": "true", focusable: "false" }) }));
+    return (jsx_runtime_1.jsx(ControlButton_1.ControlButton, { title: accessibilityLabel, "aria-label": accessibilityLabel, "aria-pressed": editorSnapping, "aria-keyshortcuts": "Shift+M", onClick: onClick, children: jsx_runtime_1.jsx(magnet_1.MagnetIcon, { style: { width: 17, height: 17 }, fill: color, "aria-hidden": "true", focusable: "false" }) }));
 };
 exports.SnappingToggle = SnappingToggle;

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.d.ts

@@ -1,6 +1,15 @@
 import React from 'react';
 import type { CanUpdateSequencePropStatusStatic } from 'remotion';
 import type { SchemaFieldInfo, TimelineFieldOnDragValueChange, TimelineFieldOnSave } from '../../helpers/timeline-layout';
+import { type InspectorInlineActionProps } from '../InspectorPanel/common';
+export type InspectorSourceAction = Omit<InspectorInlineActionProps, 'variant'>;
+type AssetSelectionContextValue = {
+    readonly initialQuery: string;
+    readonly getSourceAction: (src: string) => InspectorSourceAction | null;
+    readonly sourceAction: InspectorSourceAction | null;
+};
+export declare const AssetSelectionContext: React.Context<AssetSelectionContextValue>;
+export declare const toFileToken: (name: string) => string;
 type TimelineAssetFieldProps = {
     readonly field: SchemaFieldInfo;
     readonly propStatus: CanUpdateSequencePropStatusStatic;
@@ -9,6 +18,5 @@ type TimelineAssetFieldProps = {
     readonly onDragValueChange: TimelineFieldOnDragValueChange;
     readonly onDragEnd: () => void;
 };
-export declare const isStaticFileAssetValue: (value: unknown) => value is string;
 export declare const TimelineAssetField: React.FC<TimelineAssetFieldProps>;
 export {};