@remotion/studio 4.0.526 → 4.0.528

package/dist/components/SelectedOutlineRenderer.js

@@ -35,34 +35,27 @@ var __importStar = (this && this.__importStar) || (function () {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.SelectedOutlineRenderer = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const canvas_1 = require("@remotion/canvas");
 const react_1 = __importStar(require("react"));
 const timeline_node_path_key_1 = require("../helpers/timeline-node-path-key");
 const timeline_sequence_hover_1 = require("../state/timeline-sequence-hover");
 const ContextMenu_1 = require("./ContextMenu");
-const selected_outline_measurement_1 = require("./selected-outline-measurement");
-const selected_outline_order_1 = require("./selected-outline-order");
 const SelectedOutlineEditingHandles_1 = require("./SelectedOutlineEditingHandles");
 const SelectedOutlineElement_1 = require("./SelectedOutlineElement");
+const SelectedOutlinePathPoints_1 = require("./SelectedOutlinePathPoints");
 const SelectedOutlinePolygon_1 = require("./SelectedOutlinePolygon");
 const SelectedOutlineSnapIndicators_1 = require("./SelectedOutlineSnapIndicators");
 const SelectedOutlineTransformOriginHandle_1 = require("./SelectedOutlineTransformOriginHandle");
 const SelectedOutlineUvControls_1 = require("./SelectedOutlineUvControls");
+const { useCanvasOutlines } = canvas_1.CanvasInternals;
 const outlineContainer = {
     position: 'absolute',
     inset: 0,
     pointerEvents: 'none',
     overflow: 'visible',
 };
-const SelectedOutlineRendererUnmemoized = ({ compositionHeight, compositionWidth, dragging, getLatestOutlineTargetByKey, outlineTargets, onDraggingChange, onContextMenuOpenChange, onSelect, scale, sequences, updateOutlinesRef, }) => {
-    var _a;
-    // Targets are derived props and can receive a new identity on every render.
-    // Keep only measured geometry in state to avoid layout-effect update loops.
-    const [outlines, setOutlines] = (0, react_1.useState)([]);
-    const outlinesRef = (0, react_1.useRef)(outlines);
+const SelectedOutlineRendererUnmemoized = ({ compositionHeight, compositionWidth, dragging, getAllDragTargets, getLatestOutlineTargetByKey, outlineTargets, onDraggingChange, onContextMenuOpenChange, onSelect, scale, sequences, updateOutlinesRef, }) => {
     const overlayRef = (0, react_1.useRef)(null);
-    const resizeObserverRef = (0, react_1.useRef)(null);
-    const resizeObserverAnimationFrameRef = (0, react_1.useRef)(null);
-    const observedOutlineElementsRef = (0, react_1.useRef)(new Set());
     const contextMenuOpenHandlersRef = (0, react_1.useRef)(new Map());
     const registerContextMenuOpen = (0, react_1.useCallback)((key, handler) => {
         if (handler === null) {
@@ -86,121 +79,15 @@ const SelectedOutlineRendererUnmemoized = ({ compositionHeight, compositionWidth
         const key = polygon.getAttribute(SelectedOutlinePolygon_1.SELECTED_OUTLINE_KEY_ATTR);
         return key === null ? false : ((_b = (_a = getContextMenuOpenByKey(key)) === null || _a === void 0 ? void 0 : _a()) !== null && _b !== void 0 ? _b : false);
     }, [getContextMenuOpenByKey]);
-    const hoveredSequence = (0, timeline_sequence_hover_1.useTimelineSequenceHoverState)();
-    const setHoveredSequence = (0, timeline_sequence_hover_1.useSetTimelineSequenceHover)();
-    const hoveredNodePathKey = (_a = hoveredSequence === null || hoveredSequence === void 0 ? void 0 : hoveredSequence.nodePathKey) !== null && _a !== void 0 ? _a : null;
-    const hoveredTimelineNodePathKey = (hoveredSequence === null || hoveredSequence === void 0 ? void 0 : hoveredSequence.source) === 'timeline' ? hoveredNodePathKey : null;
-    const updateOutlines = (0, react_1.useCallback)(() => {
-        if (overlayRef.current === null || outlineTargets.length === 0) {
-            if (outlinesRef.current.length === 0) {
-                return;
-            }
-            outlinesRef.current = [];
-            setOutlines(outlinesRef.current);
-            return;
-        }
-        const nextOutlines = (0, selected_outline_measurement_1.measureOutlines)(overlayRef.current, outlineTargets, hoveredTimelineNodePathKey);
-        if ((0, selected_outline_measurement_1.outlinesAreEqual)(outlinesRef.current, nextOutlines)) {
-            return;
-        }
-        outlinesRef.current = nextOutlines;
-        setOutlines(nextOutlines);
-    }, [hoveredTimelineNodePathKey, outlineTargets]);
-    (0, react_1.useLayoutEffect)(() => {
-        updateOutlinesRef.current = updateOutlines;
-        updateOutlines();
-        return () => {
-            if (updateOutlinesRef.current === updateOutlines) {
-                updateOutlinesRef.current = () => undefined;
-            }
-        };
-    }, [updateOutlines, updateOutlinesRef]);
-    (0, react_1.useLayoutEffect)(() => {
-        if (typeof ResizeObserver === 'undefined') {
-            return;
-        }
-        const resizeObserver = new ResizeObserver(() => {
-            if (resizeObserverAnimationFrameRef.current !== null) {
-                return;
-            }
-            resizeObserverAnimationFrameRef.current = requestAnimationFrame(() => {
-                resizeObserverAnimationFrameRef.current = null;
-                updateOutlinesRef.current();
-            });
-        });
-        resizeObserverRef.current = resizeObserver;
-        return () => {
-            if (resizeObserverAnimationFrameRef.current !== null) {
-                cancelAnimationFrame(resizeObserverAnimationFrameRef.current);
-                resizeObserverAnimationFrameRef.current = null;
-            }
-            resizeObserver.disconnect();
-            resizeObserverRef.current = null;
-            observedOutlineElementsRef.current = new Set();
-        };
-    }, [updateOutlinesRef]);
-    (0, react_1.useLayoutEffect)(() => {
-        const resizeObserver = resizeObserverRef.current;
-        if (resizeObserver === null) {
-            return;
-        }
-        const nextObservedElements = new Set();
-        if (overlayRef.current !== null) {
-            nextObservedElements.add(overlayRef.current);
-        }
-        for (const target of outlineTargets) {
-            if (target.ref.current !== null) {
-                nextObservedElements.add(target.ref.current);
-            }
-        }
-        for (const element of observedOutlineElementsRef.current) {
-            if (!nextObservedElements.has(element)) {
-                resizeObserver.unobserve(element);
-            }
-        }
-        for (const element of nextObservedElements) {
-            if (!observedOutlineElementsRef.current.has(element)) {
-                resizeObserver.observe(element);
-            }
-        }
-        observedOutlineElementsRef.current = nextObservedElements;
-    }, [outlineTargets]);
-    const targetsByKey = (0, react_1.useMemo)(() => {
-        return new Map(outlineTargets.map((target) => [target.key, target]));
-    }, [outlineTargets]);
-    (0, react_1.useEffect)(() => {
-        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);
-        }
-    }, [hoveredSequence, outlineTargets, setHoveredSequence]);
-    // Reordering a captured SVG target can cancel the active pointer session.
-    const outlineRenderingOrderRef = (0, react_1.useRef)([]);
-    const outlinesForRendering = (0, react_1.useMemo)(() => {
-        if (!dragging || outlineRenderingOrderRef.current.length === 0) {
-            const orderedOutlines = (0, selected_outline_order_1.orderOutlinesForRendering)({
-                outlines,
-                sequences,
-                targetsByKey,
-            });
-            outlineRenderingOrderRef.current = orderedOutlines.map((outline) => outline.key);
-            return orderedOutlines;
-        }
-        const currentOutlinesByKey = new Map(outlines.map((outline) => [outline.key, outline]));
-        const frozenKeys = new Set(outlineRenderingOrderRef.current);
-        const newOutlines = outlines.filter((outline) => !frozenKeys.has(outline.key));
-        outlineRenderingOrderRef.current = [
-            ...outlineRenderingOrderRef.current,
-            ...newOutlines.map((outline) => outline.key),
-        ];
-        return outlineRenderingOrderRef.current.flatMap((key) => {
-            const outline = currentOutlinesByKey.get(key);
-            return outline === undefined ? [] : [outline];
-        });
-    }, [dragging, outlines, sequences, targetsByKey]);
-    const outlinesByKey = (0, react_1.useMemo)(() => {
-        return new Map(outlines.map((outline) => [outline.key, outline]));
-    }, [outlines]);
+    const hoverController = (0, react_1.useContext)(timeline_sequence_hover_1.TimelineSequenceHoverContext);
+    const { outlinesForRendering, outlinesByKey, targetsByKey, hoveredNodePathKey, } = useCanvasOutlines({
+        containerRef: overlayRef,
+        targets: outlineTargets,
+        sequences,
+        hoverController,
+        freezeOrder: dragging,
+        updateOutlinesRef,
+    });
     const { outlinesForEditingHandles, outlinesForTransformOrigin, outlinesForUvHandles, } = (0, react_1.useMemo)(() => {
         const editingHandles = [];
         const transformOrigin = [];
@@ -232,15 +119,6 @@ const SelectedOutlineRendererUnmemoized = ({ compositionHeight, compositionWidth
         targetsRef.current = outlineTargets;
         outlinesByKeyRef.current = outlinesByKey;
     }, [outlineTargets, outlinesByKey]);
-    const getAllDragTargets = (0, react_1.useCallback)(() => targetsRef.current.flatMap((target) => {
-        var _a;
-        var _b;
-        if (!target.selected && !target.containsSelection) {
-            return [];
-        }
-        const drag = (_b = (_a = getLatestOutlineTargetByKey(target.key)) === null || _a === void 0 ? void 0 : _a.drag) !== null && _b !== void 0 ? _b : null;
-        return drag === null ? [] : [drag];
-    }), [getLatestOutlineTargetByKey]);
     const getAllDragOutlines = (0, react_1.useCallback)(() => targetsRef.current.flatMap((target) => {
         var _a;
         var _b;
@@ -254,6 +132,11 @@ const SelectedOutlineRendererUnmemoized = ({ compositionHeight, compositionWidth
     const getAllScaleDragTargets = (0, react_1.useCallback)(() => targetsRef.current.flatMap((target) => {
         var _a;
         var _b;
+        const outline = outlinesByKeyRef.current.get(target.key);
+        if (outline !== undefined && outline.path !== null) {
+            // Path outlines do not render scale handles.
+            return [];
+        }
         const scaleDrag = target.selected
             ? ((_b = (_a = getLatestOutlineTargetByKey(target.key)) === null || _a === void 0 ? void 0 : _a.scaleDrag) !== null && _b !== void 0 ? _b : null)
             : null;
@@ -262,6 +145,11 @@ const SelectedOutlineRendererUnmemoized = ({ compositionHeight, compositionWidth
     const getAllRotationDragTargets = (0, react_1.useCallback)(() => targetsRef.current.flatMap((target) => {
         var _a;
         var _b;
+        const outline = outlinesByKeyRef.current.get(target.key);
+        if (outline !== undefined && outline.path !== null) {
+            // Path outlines do not render rotation handles.
+            return [];
+        }
         const rotationDrag = target.selected
             ? ((_b = (_a = getLatestOutlineTargetByKey(target.key)) === null || _a === void 0 ? void 0 : _a.rotationDrag) !== null && _b !== void 0 ? _b : null)
             : null;
@@ -270,6 +158,14 @@ const SelectedOutlineRendererUnmemoized = ({ compositionHeight, compositionWidth
     const updateSnapPointsRef = (0, react_1.useRef)(() => undefined);
     const onSnapPointsChange = (0, react_1.useCallback)((snapPoints) => updateSnapPointsRef.current(snapPoints), []);
     return (jsx_runtime_1.jsxs("svg", { ref: overlayRef, style: outlineContainer, width: "100%", height: "100%", "aria-hidden": "true", children: [
-            jsx_runtime_1.jsx(ContextMenu_1.ContextMenuForTarget, { triggerRef: overlayRef, getItems: getDelegatedContextMenuItems, onOpenChange: onContextMenuOpenChange }), jsx_runtime_1.jsx(SelectedOutlineSnapIndicators_1.SelectedOutlineSnapIndicators, { compositionHeight: compositionHeight, compositionWidth: compositionWidth, scale: scale, updateSnapPointsRef: updateSnapPointsRef }), outlinesForRendering.map((outline) => (jsx_runtime_1.jsx(SelectedOutlineElement_1.SelectedOutlineElement, { compositionHeight: compositionHeight, compositionWidth: compositionWidth, dragging: dragging, getAllDragOutlines: getAllDragOutlines, getAllDragTargets: getAllDragTargets, getLatestTargetByKey: getLatestOutlineTargetByKey, outline: outline, onDraggingChange: onDraggingChange, onSnapPointsChange: onSnapPointsChange, onSelect: onSelect, registerContextMenuOpen: registerContextMenuOpen, scale: scale, layoutTarget: targetsByKey.get(outline.key) }, outline.key))), outlinesForEditingHandles.map((outline) => (jsx_runtime_1.jsx(SelectedOutlineEditingHandles_1.SelectedOutlineEditingHandles, { dragging: dragging, getAllRotationDragTargets: getAllRotationDragTargets, getAllScaleDragTargets: getAllScaleDragTargets, getContextMenuOpenByKey: getContextMenuOpenByKey, getLatestTargetByKey: getLatestOutlineTargetByKey, layoutTarget: targetsByKey.get(outline.key), onContextMenuOpenChange: onContextMenuOpenChange, onDraggingChange: onDraggingChange, onSelect: onSelect, outline: outline }, `${outline.key}-editing-handles`))), outlinesForUvHandles.map((outline) => (jsx_runtime_1.jsx(SelectedOutlineUvControls_1.SelectedOutlineUvHandleConnectionLayer, { outline: outline, layoutTarget: targetsByKey.get(outline.key) }, `${outline.key}-uv-connection-lines`))), outlinesForUvHandles.map((outline) => (jsx_runtime_1.jsx(SelectedOutlineUvControls_1.SelectedOutlineUvHandleCircleLayer, { onDraggingChange: onDraggingChange, onSelect: onSelect, outline: outline, layoutTarget: targetsByKey.get(outline.key) }, `${outline.key}-uv-handles`))), outlinesForTransformOrigin.map((outline) => (jsx_runtime_1.jsx(SelectedOutlineTransformOriginHandle_1.SelectedOutlineTransformOriginHandle, { outline: outline, onDraggingChange: onDraggingChange, getLatestTargetByKey: getLatestOutlineTargetByKey, layoutTarget: targetsByKey.get(outline.key) }, `${outline.key}-transform-origin`)))] }));
+            jsx_runtime_1.jsx(ContextMenu_1.ContextMenuForTarget, { triggerRef: overlayRef, getItems: getDelegatedContextMenuItems, onOpenChange: onContextMenuOpenChange }), jsx_runtime_1.jsx(SelectedOutlineSnapIndicators_1.SelectedOutlineSnapIndicators, { compositionHeight: compositionHeight, compositionWidth: compositionWidth, scale: scale, updateSnapPointsRef: updateSnapPointsRef }), outlinesForRendering.map((outline) => (jsx_runtime_1.jsx(SelectedOutlineElement_1.SelectedOutlineElement, { compositionHeight: compositionHeight, compositionWidth: compositionWidth, dragging: dragging, getAllDragOutlines: getAllDragOutlines, getAllDragTargets: getAllDragTargets, getLatestTargetByKey: getLatestOutlineTargetByKey, outline: outline, onDraggingChange: onDraggingChange, onSnapPointsChange: onSnapPointsChange, onSelect: onSelect, registerContextMenuOpen: registerContextMenuOpen, scale: scale, layoutTarget: targetsByKey.get(outline.key) }, outline.key))), outlinesForRendering.map((outline) => {
+                var _a;
+                var _b;
+                const target = targetsByKey.get(outline.key);
+                const pathDrag = (target === null || target === void 0 ? void 0 : target.selected)
+                    ? ((_b = (_a = getLatestOutlineTargetByKey(outline.key)) === null || _a === void 0 ? void 0 : _a.pathDrag) !== null && _b !== void 0 ? _b : null)
+                    : null;
+                return outline.path !== null && pathDrag !== null ? (jsx_runtime_1.jsx(SelectedOutlinePathPoints_1.SelectedOutlinePathPoints, { outline: outline, pathDrag: pathDrag, onDraggingChange: onDraggingChange }, `${outline.key}-path-points`)) : null;
+            }), outlinesForEditingHandles.map((outline) => (jsx_runtime_1.jsx(SelectedOutlineEditingHandles_1.SelectedOutlineEditingHandles, { dragging: dragging, getAllRotationDragTargets: getAllRotationDragTargets, getAllScaleDragTargets: getAllScaleDragTargets, getContextMenuOpenByKey: getContextMenuOpenByKey, getLatestTargetByKey: getLatestOutlineTargetByKey, layoutTarget: targetsByKey.get(outline.key), onContextMenuOpenChange: onContextMenuOpenChange, onDraggingChange: onDraggingChange, onSelect: onSelect, outline: outline }, `${outline.key}-editing-handles`))), outlinesForUvHandles.map((outline) => (jsx_runtime_1.jsx(SelectedOutlineUvControls_1.SelectedOutlineUvHandleConnectionLayer, { outline: outline, layoutTarget: targetsByKey.get(outline.key) }, `${outline.key}-uv-connection-lines`))), outlinesForUvHandles.map((outline) => (jsx_runtime_1.jsx(SelectedOutlineUvControls_1.SelectedOutlineUvHandleCircleLayer, { onDraggingChange: onDraggingChange, onSelect: onSelect, outline: outline, layoutTarget: targetsByKey.get(outline.key) }, `${outline.key}-uv-handles`))), outlinesForTransformOrigin.map((outline) => (jsx_runtime_1.jsx(SelectedOutlineTransformOriginHandle_1.SelectedOutlineTransformOriginHandle, { outline: outline, onDraggingChange: onDraggingChange, getLatestTargetByKey: getLatestOutlineTargetByKey, layoutTarget: targetsByKey.get(outline.key) }, `${outline.key}-transform-origin`)))] }));
 };
 exports.SelectedOutlineRenderer = react_1.default.memo(SelectedOutlineRendererUnmemoized);

package/dist/components/SelectedOutlineSnapIndicators.d.ts

@@ -1,6 +1,12 @@
 import React from 'react';
 import { type SelectedOutlineSnapPoint } from './selected-outline-snap';
 export type UpdateSelectedOutlineSnapPoints = (snapPoints: readonly SelectedOutlineSnapPoint[]) => void;
+export declare const SelectedOutlineSnapLines: React.FC<{
+    readonly compositionHeight: number;
+    readonly compositionWidth: number;
+    readonly scale: number;
+    readonly snapPoints: readonly SelectedOutlineSnapPoint[];
+}>;
 export declare const SelectedOutlineSnapIndicators: React.FC<{
     readonly compositionHeight: number;
     readonly compositionWidth: number;

package/dist/components/SelectedOutlineSnapIndicators.js

@@ -1,9 +1,23 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.SelectedOutlineSnapIndicators = void 0;
+exports.SelectedOutlineSnapIndicators = exports.SelectedOutlineSnapLines = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const selected_outline_snap_1 = require("./selected-outline-snap");
+const SelectedOutlineSnapLines = ({ compositionHeight, compositionWidth, scale, snapPoints }) => {
+    if (snapPoints.length === 0) {
+        return null;
+    }
+    return (jsx_runtime_1.jsx("g", { pointerEvents: "none", children: snapPoints.map((snapPoint) => {
+            if (snapPoint.target.axis === 'x') {
+                const x = snapPoint.target.position * scale;
+                return (jsx_runtime_1.jsx("line", { x1: x, x2: x, y1: 0, y2: compositionHeight * scale, stroke: selected_outline_snap_1.selectedOutlineSnapIndicatorColor, strokeWidth: 1, vectorEffect: "non-scaling-stroke" }, `${snapPoint.target.axis}-${snapPoint.target.type}-${snapPoint.target.position}-${snapPoint.edge}`));
+            }
+            const y = snapPoint.target.position * scale;
+            return (jsx_runtime_1.jsx("line", { x1: 0, x2: compositionWidth * scale, y1: y, y2: y, stroke: selected_outline_snap_1.selectedOutlineSnapIndicatorColor, strokeWidth: 1, vectorEffect: "non-scaling-stroke" }, `${snapPoint.target.axis}-${snapPoint.target.type}-${snapPoint.target.position}-${snapPoint.edge}`));
+        }) }));
+};
+exports.SelectedOutlineSnapLines = SelectedOutlineSnapLines;
 const SelectedOutlineSnapIndicators = ({ compositionHeight, compositionWidth, scale, updateSnapPointsRef }) => {
     const [activeSnapPoints, setActiveSnapPoints] = (0, react_1.useState)([]);
     (0, react_1.useLayoutEffect)(() => {
@@ -14,16 +28,6 @@ const SelectedOutlineSnapIndicators = ({ compositionHeight, compositionWidth, sc
             }
         };
     }, [updateSnapPointsRef]);
-    if (activeSnapPoints.length === 0) {
-        return null;
-    }
-    return (jsx_runtime_1.jsx("g", { pointerEvents: "none", children: activeSnapPoints.map((snapPoint) => {
-            if (snapPoint.target.axis === 'x') {
-                const x = snapPoint.target.position * scale;
-                return (jsx_runtime_1.jsx("line", { x1: x, x2: x, y1: 0, y2: compositionHeight * scale, stroke: selected_outline_snap_1.selectedOutlineSnapIndicatorColor, strokeWidth: 1, vectorEffect: "non-scaling-stroke" }, `${snapPoint.target.axis}-${snapPoint.target.type}-${snapPoint.target.position}-${snapPoint.edge}`));
-            }
-            const y = snapPoint.target.position * scale;
-            return (jsx_runtime_1.jsx("line", { x1: 0, x2: compositionWidth * scale, y1: y, y2: y, stroke: selected_outline_snap_1.selectedOutlineSnapIndicatorColor, strokeWidth: 1, vectorEffect: "non-scaling-stroke" }, `${snapPoint.target.axis}-${snapPoint.target.type}-${snapPoint.target.position}-${snapPoint.edge}`));
-        }) }));
+    return (jsx_runtime_1.jsx(exports.SelectedOutlineSnapLines, { compositionHeight: compositionHeight, compositionWidth: compositionWidth, scale: scale, snapPoints: activeSnapPoints }));
 };
 exports.SelectedOutlineSnapIndicators = SelectedOutlineSnapIndicators;

package/dist/components/SelectedOutlineTransformOriginHandle.js

@@ -48,6 +48,7 @@ const selected_outline_measurement_1 = require("./selected-outline-measurement")
 const selected_outline_types_1 = require("./selected-outline-types");
 const selected_outline_uv_1 = require("./selected-outline-uv");
 const call_add_keyframe_1 = require("./Timeline/call-add-keyframe");
+const get_timeline_keyframes_1 = require("./Timeline/get-timeline-keyframes");
 const save_sequence_prop_1 = require("./Timeline/save-sequence-prop");
 const timeline_rotation_utils_1 = require("./Timeline/timeline-rotation-utils");
 const timeline_translate_utils_1 = require("./Timeline/timeline-translate-utils");
@@ -183,7 +184,7 @@ const SelectedOutlineTransformOriginHandle = ({ getLatestTargetByKey, layoutTarg
             setDragOverrides(transformOriginDrag.nodePath, selected_outline_types_1.transformOriginFieldKey, transformOriginDrag.originPropStatus.status === 'keyframed'
                 ? remotion_1.Internals.makeKeyframedDragOverride({
                     status: transformOriginDrag.originPropStatus,
-                    frame: transformOriginDrag.sourceFrame,
+                    frame: (0, get_timeline_keyframes_1.resolveKeyframeSourceFrame)(transformOriginDrag.sourceFrame, transformOriginDrag.originPropStatus),
                     value: origin,
                 })
                 : remotion_1.Internals.makeStaticDragOverride(origin));
@@ -191,7 +192,7 @@ const SelectedOutlineTransformOriginHandle = ({ getLatestTargetByKey, layoutTarg
                 ? transformOriginDrag.originPropStatus.status === 'keyframed'
                     ? remotion_1.Internals.makeKeyframedDragOverride({
                         status: transformOriginDrag.translatePropStatus,
-                        frame: transformOriginDrag.sourceFrame,
+                        frame: (0, get_timeline_keyframes_1.resolveKeyframeSourceFrame)(transformOriginDrag.sourceFrame, transformOriginDrag.translatePropStatus),
                         value: translate,
                     })
                     : {

package/dist/components/SelectedOutlineUvControls.js

@@ -47,6 +47,7 @@ const selected_outline_measurement_1 = require("./selected-outline-measurement")
 const selected_outline_measurement_2 = require("./selected-outline-measurement");
 const selected_outline_uv_1 = require("./selected-outline-uv");
 const call_add_keyframe_1 = require("./Timeline/call-add-keyframe");
+const get_timeline_keyframes_1 = require("./Timeline/get-timeline-keyframes");
 const save_effect_prop_1 = require("./Timeline/save-effect-prop");
 const TimelineSelection_1 = require("./Timeline/TimelineSelection");
 const getSvgPointFromPointerEvent = ({ event, rect, }) => {
@@ -113,7 +114,7 @@ const saveNumericEffectField = ({ clearEffectDragOverrides, clientId, effectInde
             nodePath,
             effectIndex,
             fieldKey: field.fieldKey,
-            sourceFrame,
+            sourceFrame: (0, get_timeline_keyframes_1.resolveKeyframeSourceFrame)(sourceFrame, field.propStatus),
             value: lastValue,
             schema,
             setPropStatuses,
@@ -200,7 +201,7 @@ const SelectedUvEllipseStartHandle = ({ control, onDraggingChange, outline }) =>
             setEffectDragOverrides(control.handle.nodePath, control.handle.effectIndex, field.fieldKey, field.propStatus.status === 'keyframed'
                 ? remotion_1.Internals.makeKeyframedDragOverride({
                     status: field.propStatus,
-                    frame: control.handle.sourceFrame,
+                    frame: (0, get_timeline_keyframes_1.resolveKeyframeSourceFrame)(control.handle.sourceFrame, field.propStatus),
                     value: nextValue,
                 })
                 : remotion_1.Internals.makeStaticDragOverride(nextValue));
@@ -300,7 +301,7 @@ const SelectedUvEllipseResizeHandle = ({ axis, control, onDraggingChange, outlin
             setEffectDragOverrides(control.handle.nodePath, control.handle.effectIndex, field.fieldKey, field.propStatus.status === 'keyframed'
                 ? remotion_1.Internals.makeKeyframedDragOverride({
                     status: field.propStatus,
-                    frame: control.handle.sourceFrame,
+                    frame: (0, get_timeline_keyframes_1.resolveKeyframeSourceFrame)(control.handle.sourceFrame, field.propStatus),
                     value: nextValue,
                 })
                 : remotion_1.Internals.makeStaticDragOverride(nextValue));
@@ -431,7 +432,7 @@ const SelectedUvEllipseRotationHandle = ({ control, onDraggingChange }) => {
             setEffectDragOverrides(control.handle.nodePath, control.handle.effectIndex, field.fieldKey, field.propStatus.status === 'keyframed'
                 ? remotion_1.Internals.makeKeyframedDragOverride({
                     status: field.propStatus,
-                    frame: control.handle.sourceFrame,
+                    frame: (0, get_timeline_keyframes_1.resolveKeyframeSourceFrame)(control.handle.sourceFrame, field.propStatus),
                     value: nextValue,
                 })
                 : remotion_1.Internals.makeStaticDragOverride(nextValue));
@@ -575,7 +576,7 @@ const SelectedUvHandleCircle = ({ handle, nodePathInfo, onDraggingChange, onSele
             setEffectDragOverrides(handle.nodePath, handle.effectIndex, handle.fieldKey, handle.propStatus.status === 'keyframed'
                 ? remotion_1.Internals.makeKeyframedDragOverride({
                     status: handle.propStatus,
-                    frame: handle.sourceFrame,
+                    frame: (0, get_timeline_keyframes_1.resolveKeyframeSourceFrame)(handle.sourceFrame, handle.propStatus),
                     value: nextValue,
                 })
                 : remotion_1.Internals.makeStaticDragOverride(nextValue));
@@ -624,7 +625,7 @@ const SelectedUvHandleCircle = ({ handle, nodePathInfo, onDraggingChange, onSele
                     nodePath: handle.nodePath,
                     effectIndex: handle.effectIndex,
                     fieldKey: handle.fieldKey,
-                    sourceFrame: handle.sourceFrame,
+                    sourceFrame: (0, get_timeline_keyframes_1.resolveKeyframeSourceFrame)(handle.sourceFrame, handle.propStatus),
                     value: lastValue,
                     schema: handle.schema,
                     setPropStatuses,
@@ -684,7 +685,11 @@ const useSelectedOutlineUvTarget = (layoutTarget) => {
                 nodePath: layoutTarget.nodePathInfo.sequenceSubscriptionKey,
                 selectedEffects: selectedEffectsBySequenceKey.get(layoutTarget.key),
                 sequence: layoutTarget.sequence,
-                sourceFrame: timelinePosition - layoutTarget.keyframeDisplayOffset,
+                sourceFrame: {
+                    displayFrame: timelinePosition,
+                    keyframeDisplayOffset: layoutTarget.keyframeDisplayOffset,
+                    keyframePlaybackRate: layoutTarget.keyframePlaybackRate,
+                },
             }),
         };
     }, [

package/dist/components/SequencePropsSubscriptionProvider.d.ts

@@ -1,4 +1,7 @@
 import type { OverrideIdToNodePaths, TSequence } from 'remotion';
+export declare const OverrideIdToNodePathMappingsRefContext: import("react").Context<{
+    readonly current: OverrideIdToNodePaths;
+}>;
 export declare const getReadOnlyOverrideIdToNodePathMappings: (sequences: readonly TSequence[]) => OverrideIdToNodePaths;
 export declare const SequencePropsSubscriptionProvider: React.FC<{
     readonly children: React.ReactNode;

package/dist/components/SequencePropsSubscriptionProvider.js

@@ -1,9 +1,10 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.SequencePropsSubscriptionProvider = exports.getReadOnlyOverrideIdToNodePathMappings = void 0;
+exports.SequencePropsSubscriptionProvider = exports.getReadOnlyOverrideIdToNodePathMappings = exports.OverrideIdToNodePathMappingsRefContext = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const remotion_1 = require("remotion");
+exports.OverrideIdToNodePathMappingsRefContext = (0, react_1.createContext)({ current: {} });
 const getReadOnlyOverrideIdToNodePathMappings = (sequences) => {
     return Object.fromEntries(sequences.flatMap((sequence) => {
         var _a;
@@ -32,6 +33,9 @@ const SequencePropsSubscriptionProvider = ({ children }) => {
     const readOnlyOverrideToNodePathMap = (0, react_1.useMemo)(() => window.remotion_isReadOnlyStudio
         ? (0, exports.getReadOnlyOverrideIdToNodePathMappings)(sequences)
         : null, [sequences]);
+    const overrideIdToNodePathMappings = readOnlyOverrideToNodePathMap !== null && readOnlyOverrideToNodePathMap !== void 0 ? readOnlyOverrideToNodePathMap : overrideToNodePathMap;
+    const overrideIdToNodePathMappingsRef = (0, react_1.useRef)(overrideIdToNodePathMappings);
+    overrideIdToNodePathMappingsRef.current = overrideIdToNodePathMappings;
     const setOverrideIdToNodePath = (0, react_1.useCallback)((overrideId, state) => {
         setOverrideIdToNodePathMap((prev) => {
             const existing = prev[overrideId];
@@ -50,13 +54,11 @@ const SequencePropsSubscriptionProvider = ({ children }) => {
         });
     }, []);
     const getters = (0, react_1.useMemo)(() => {
-        return {
-            overrideIdToNodePathMappings: readOnlyOverrideToNodePathMap !== null && readOnlyOverrideToNodePathMap !== void 0 ? readOnlyOverrideToNodePathMap : overrideToNodePathMap,
-        };
-    }, [overrideToNodePathMap, readOnlyOverrideToNodePathMap]);
+        return { overrideIdToNodePathMappings };
+    }, [overrideIdToNodePathMappings]);
     const setters = (0, react_1.useMemo)(() => {
         return { setOverrideIdToNodePath };
     }, [setOverrideIdToNodePath]);
-    return (jsx_runtime_1.jsx(remotion_1.Internals.OverrideIdsToNodePathsGettersContext.Provider, { value: getters, children: jsx_runtime_1.jsx(remotion_1.Internals.OverrideIdsToNodePathsSettersContext.Provider, { value: setters, children: children }) }));
+    return (jsx_runtime_1.jsx(exports.OverrideIdToNodePathMappingsRefContext.Provider, { value: overrideIdToNodePathMappingsRef, children: jsx_runtime_1.jsx(remotion_1.Internals.OverrideIdsToNodePathsGettersContext.Provider, { value: getters, children: jsx_runtime_1.jsx(remotion_1.Internals.OverrideIdsToNodePathsSettersContext.Provider, { value: setters, children: children }) }) }));
 };
 exports.SequencePropsSubscriptionProvider = SequencePropsSubscriptionProvider;

package/dist/components/SettingsModal.js

@@ -8,6 +8,7 @@ const can_show_updates_1 = require("../helpers/can-show-updates");
 const client_id_1 = require("../helpers/client-id");
 const settings_tab_availability_1 = require("../helpers/settings-tab-availability");
 const apps_1 = require("../icons/apps");
+const browse_elements_1 = require("../icons/browse-elements");
 const cloud_download_1 = require("../icons/cloud-download");
 const keyboard_1 = require("../icons/keyboard");
 const license_1 = require("../icons/license");
@@ -19,6 +20,7 @@ const video_1 = require("../icons/video");
 const modals_1 = require("../state/modals");
 const ConfigureDefaultEditorModal_1 = require("./ConfigureDefaultEditorModal");
 const ConfigureLicenseModal_1 = require("./ConfigureLicenseModal");
+const ElementLibrariesSettings_1 = require("./ElementLibrariesSettings");
 const InstallPackage_1 = require("./InstallPackage");
 const KeyboardShortcutsSettings_1 = require("./KeyboardShortcutsSettings");
 const is_menu_item_1 = require("./Menu/is-menu-item");
@@ -63,6 +65,20 @@ const keyboardIcon = {
     height: 16,
     width: 16,
 };
+const elementsIcon = {
+    ...render_modals_1.icon,
+    flexShrink: 0,
+    height: 22,
+    width: 22,
+};
+const elementsIconContainer = {
+    ...render_modals_1.iconContainer,
+    flexShrink: 0,
+    height: 22,
+    marginLeft: -2,
+    marginRight: 6,
+    width: 22,
+};
 const SettingsModal = ({ initialPublicLicenseKey, initialTab }) => {
     const { setSelectedModal } = (0, react_1.useContext)(modals_1.SetSelectedModalContext);
     const { setPublicLicenseKey } = (0, SettingsContext_1.useSettings)();
@@ -93,6 +109,7 @@ const SettingsModal = ({ initialPublicLicenseKey, initialTab }) => {
     }), [isBrowserStudio, packageManager, previewServerConnected, showUpdates]);
     const safeInitialTab = (0, settings_tab_availability_1.getSafeSettingsTab)(initialTab, availableTabs);
     const [tab, setTab] = (0, react_1.useState)(safeInitialTab);
+    const [studioPane, setStudioPane] = (0, react_1.useState)('general');
     const [openedTabs, setOpenedTabs] = (0, react_1.useState)([safeInitialTab]);
     const [packagesFooterContainer, setPackagesFooterContainer] = (0, react_1.useState)(null);
     const dismiss = (0, react_1.useCallback)(() => {
@@ -118,13 +135,23 @@ const SettingsModal = ({ initialPublicLicenseKey, initialTab }) => {
     }, [initialPublicLicenseKey, setPublicLicenseKey]);
     return (jsx_runtime_1.jsx(DismissableModal_1.DismissableModal, { panelStyle: render_modals_1.outerModalStyle, children: jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
                 jsx_runtime_1.jsx(ModalHeader_1.ModalHeader, { title: "Settings", onClose: dismiss }), jsx_runtime_1.jsxs("div", { style: render_modals_1.horizontalLayout, children: [
-                        jsx_runtime_1.jsxs("div", { style: settingsLeftSidebar, children: [availableTabs.includes('studio') ? (jsx_runtime_1.jsx(vertical_1.VerticalTab, { style: render_modals_1.horizontalTab, selected: tab === 'studio', onClick: () => selectTab('studio'), renderIcon: (color) => (jsx_runtime_1.jsx("div", { style: render_modals_1.iconContainer, children: jsx_runtime_1.jsx(remotion_triangle_1.RemotionTriangleIcon, { color: color, style: render_modals_1.icon }) })), children: "Studio" })) : null, availableTabs.includes('rendering') ? (jsx_runtime_1.jsx(vertical_1.VerticalTab, { style: render_modals_1.horizontalTab, selected: tab === 'rendering', onClick: () => selectTab('rendering'), renderIcon: (color) => (jsx_runtime_1.jsx("div", { style: render_modals_1.iconContainer, children: jsx_runtime_1.jsx(video_1.FilmIcon, { color: color, style: render_modals_1.icon }) })), children: "Defaults" })) : null, jsx_runtime_1.jsx(vertical_1.VerticalTab, { style: render_modals_1.horizontalTab, selected: tab === 'shortcuts', onClick: () => selectTab('shortcuts'), renderIcon: (color) => (jsx_runtime_1.jsx("div", { style: render_modals_1.iconContainer, children: jsx_runtime_1.jsx(keyboard_1.KeyboardIcon, { color: color, style: keyboardIcon }) })), children: "Shortcuts" }), availableTabs.includes('packages') ? (jsx_runtime_1.jsx(vertical_1.VerticalTab, { style: render_modals_1.horizontalTab, selected: tab === 'packages', onClick: () => selectTab('packages'), renderIcon: (color) => (jsx_runtime_1.jsx("div", { style: render_modals_1.iconContainer, children: jsx_runtime_1.jsx(package_1.PackageIcon, { color: color, style: render_modals_1.icon }) })), children: "Packages" })) : null, availableTabs.includes('skills') ? (jsx_runtime_1.jsx(vertical_1.VerticalTab, { style: render_modals_1.horizontalTab, selected: tab === 'skills', onClick: () => selectTab('skills'), renderIcon: (color) => (jsx_runtime_1.jsx("div", { style: render_modals_1.iconContainer, children: jsx_runtime_1.jsx(skills_1.SkillsIcon, { color: color, style: skillsIcon }) })), children: "Skills" })) : null, availableTabs.includes('models') ? (jsx_runtime_1.jsx(vertical_1.VerticalTab, { style: render_modals_1.horizontalTab, selected: tab === 'models', onClick: () => selectTab('models'), renderIcon: (color) => (jsx_runtime_1.jsx("div", { style: render_modals_1.iconContainer, children: jsx_runtime_1.jsx(models_1.ModelsIcon, { color: color, style: render_modals_1.icon }) })), children: "Models" })) : null, availableTabs.includes('apps') ? (jsx_runtime_1.jsx(vertical_1.VerticalTab, { style: render_modals_1.horizontalTab, selected: tab === 'apps', onClick: () => selectTab('apps'), renderIcon: (color) => (jsx_runtime_1.jsx("div", { style: render_modals_1.iconContainer, children: jsx_runtime_1.jsx(apps_1.AppsIcon, { color: color, style: appsIcon }) })), children: "Apps" })) : null, availableTabs.includes('license') ? (jsx_runtime_1.jsx(vertical_1.VerticalTab, { style: render_modals_1.horizontalTab, selected: tab === 'license', onClick: () => selectTab('license'), renderIcon: (color) => (jsx_runtime_1.jsx("div", { style: render_modals_1.iconContainer, children: jsx_runtime_1.jsx(license_1.LicenseIcon, { color: color, style: render_modals_1.icon }) })), children: "License" })) : null, availableTabs.includes('updates') ? (jsx_runtime_1.jsx(vertical_1.VerticalTab, { style: render_modals_1.horizontalTab, selected: tab === 'updates', onClick: () => selectTab('updates'), renderIcon: (color) => (jsx_runtime_1.jsx("div", { style: render_modals_1.iconContainer, children: jsx_runtime_1.jsx(cloud_download_1.CloudDownloadIcon, { color: color, style: render_modals_1.icon }) })), children: "Updates" })) : null] }), availableTabs.includes('packages') &&
+                        jsx_runtime_1.jsxs("div", { style: settingsLeftSidebar, children: [availableTabs.includes('studio') ? (jsx_runtime_1.jsx(vertical_1.VerticalTab, { style: render_modals_1.horizontalTab, selected: tab === 'studio' && studioPane === 'general', onClick: () => {
+                                        selectTab('studio');
+                                        setStudioPane('general');
+                                    }, renderIcon: (color) => (jsx_runtime_1.jsx("div", { style: render_modals_1.iconContainer, children: jsx_runtime_1.jsx(remotion_triangle_1.RemotionTriangleIcon, { color: color, style: render_modals_1.icon }) })), children: "Studio" })) : null, availableTabs.includes('rendering') ? (jsx_runtime_1.jsx(vertical_1.VerticalTab, { style: render_modals_1.horizontalTab, selected: tab === 'rendering', onClick: () => selectTab('rendering'), renderIcon: (color) => (jsx_runtime_1.jsx("div", { style: render_modals_1.iconContainer, children: jsx_runtime_1.jsx(video_1.FilmIcon, { color: color, style: render_modals_1.icon }) })), children: "Defaults" })) : null, jsx_runtime_1.jsx(vertical_1.VerticalTab, { style: render_modals_1.horizontalTab, selected: tab === 'shortcuts', onClick: () => selectTab('shortcuts'), renderIcon: (color) => (jsx_runtime_1.jsx("div", { style: render_modals_1.iconContainer, children: jsx_runtime_1.jsx(keyboard_1.KeyboardIcon, { color: color, style: keyboardIcon }) })), children: "Shortcuts" }), availableTabs.includes('packages') ? (jsx_runtime_1.jsx(vertical_1.VerticalTab, { style: render_modals_1.horizontalTab, selected: tab === 'packages', onClick: () => selectTab('packages'), renderIcon: (color) => (jsx_runtime_1.jsx("div", { style: render_modals_1.iconContainer, children: jsx_runtime_1.jsx(package_1.PackageIcon, { color: color, style: render_modals_1.icon }) })), children: "Packages" })) : null, availableTabs.includes('skills') ? (jsx_runtime_1.jsx(vertical_1.VerticalTab, { style: render_modals_1.horizontalTab, selected: tab === 'skills', onClick: () => selectTab('skills'), renderIcon: (color) => (jsx_runtime_1.jsx("div", { style: render_modals_1.iconContainer, children: jsx_runtime_1.jsx(skills_1.SkillsIcon, { color: color, style: skillsIcon }) })), children: "Skills" })) : null, availableTabs.includes('studio') ? (jsx_runtime_1.jsx(vertical_1.VerticalTab, { style: render_modals_1.horizontalTab, selected: tab === 'studio' && studioPane === 'elements', onClick: () => {
+                                        selectTab('studio');
+                                        setStudioPane('elements');
+                                    }, renderIcon: (color) => (jsx_runtime_1.jsx("div", { style: elementsIconContainer, children: jsx_runtime_1.jsx(browse_elements_1.BrowseElementsIcon, { color: color, style: elementsIcon }) })), children: "Elements" })) : null, availableTabs.includes('models') ? (jsx_runtime_1.jsx(vertical_1.VerticalTab, { style: render_modals_1.horizontalTab, selected: tab === 'models', onClick: () => selectTab('models'), renderIcon: (color) => (jsx_runtime_1.jsx("div", { style: render_modals_1.iconContainer, children: jsx_runtime_1.jsx(models_1.ModelsIcon, { color: color, style: render_modals_1.icon }) })), children: "Models" })) : null, availableTabs.includes('apps') ? (jsx_runtime_1.jsx(vertical_1.VerticalTab, { style: render_modals_1.horizontalTab, selected: tab === 'apps', onClick: () => selectTab('apps'), renderIcon: (color) => (jsx_runtime_1.jsx("div", { style: render_modals_1.iconContainer, children: jsx_runtime_1.jsx(apps_1.AppsIcon, { color: color, style: appsIcon }) })), children: "Apps" })) : null, availableTabs.includes('license') ? (jsx_runtime_1.jsx(vertical_1.VerticalTab, { style: render_modals_1.horizontalTab, selected: tab === 'license', onClick: () => selectTab('license'), renderIcon: (color) => (jsx_runtime_1.jsx("div", { style: render_modals_1.iconContainer, children: jsx_runtime_1.jsx(license_1.LicenseIcon, { color: color, style: render_modals_1.icon }) })), children: "License" })) : null, availableTabs.includes('updates') ? (jsx_runtime_1.jsx(vertical_1.VerticalTab, { style: render_modals_1.horizontalTab, selected: tab === 'updates', onClick: () => selectTab('updates'), renderIcon: (color) => (jsx_runtime_1.jsx("div", { style: render_modals_1.iconContainer, children: jsx_runtime_1.jsx(cloud_download_1.CloudDownloadIcon, { color: color, style: render_modals_1.icon }) })), children: "Updates" })) : null] }), availableTabs.includes('packages') &&
                             openedTabs.includes('packages') ? (jsx_runtime_1.jsx("div", { style: tab === 'packages' ? render_modals_1.optionsPanel : hiddenPanel, children: jsx_runtime_1.jsx(InstallPackage_1.InstallPackageSettings, { footerContainer: packagesFooterContainer, packageManager: packageManager }) })) : null, availableTabs.includes('apps') && openedTabs.includes('apps') ? (jsx_runtime_1.jsx("div", { style: tab === 'apps' ? settingsOptionsPanel : hiddenPanel, className: is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME, children: jsx_runtime_1.jsx(ConfigureDefaultEditorModal_1.DefaultEditorSettings, {}) })) : null, availableTabs.includes('models') && openedTabs.includes('models') ? (jsx_runtime_1.jsx("div", { style: tab === 'models' ? settingsOptionsPanel : hiddenPanel, className: is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME, children: jsx_runtime_1.jsx(ModelsSettings_1.ModelsSettings, {}) })) : null, availableTabs.includes('license') &&
                             openedTabs.includes('license') ? (jsx_runtime_1.jsx("div", { style: tab === 'license' ? settingsOptionsPanel : hiddenPanel, className: is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME, children: jsx_runtime_1.jsx(ConfigureLicenseModal_1.LicenseSettings, {}) })) : null, availableTabs.includes('skills') && openedTabs.includes('skills') ? (jsx_runtime_1.jsx("div", { style: tab === 'skills' ? settingsOptionsPanel : hiddenPanel, className: is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME, children: jsx_runtime_1.jsx(SkillsSettings_1.SkillsSettings, {}) })) : null, openedTabs.includes('shortcuts') ? (jsx_runtime_1.jsx("div", { style: tab === 'shortcuts' ? settingsOptionsPanel : hiddenPanel, className: is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME, children: jsx_runtime_1.jsx(KeyboardShortcutsSettings_1.KeyboardShortcutsSettings, {}) })) : null, availableTabs.includes('rendering') &&
-                            openedTabs.includes('rendering') ? (jsx_runtime_1.jsx("div", { style: tab === 'rendering' ? settingsOptionsPanel : hiddenPanel, className: is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME, children: jsx_runtime_1.jsx(RenderingSettings_1.RenderingSettings, {}) })) : null, availableTabs.includes('studio') && openedTabs.includes('studio') ? (jsx_runtime_1.jsx("div", { style: tab === 'studio' ? settingsOptionsPanel : hiddenPanel, className: is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME, children: jsx_runtime_1.jsx(StudioSettings_1.StudioSettings, {}) })) : null, availableTabs.includes('updates') &&
+                            openedTabs.includes('rendering') ? (jsx_runtime_1.jsx("div", { style: tab === 'rendering' ? settingsOptionsPanel : hiddenPanel, className: is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME, children: jsx_runtime_1.jsx(RenderingSettings_1.RenderingSettings, {}) })) : null, availableTabs.includes('studio') && openedTabs.includes('studio') ? (jsx_runtime_1.jsx("div", { style: tab === 'studio' && studioPane === 'general'
+                                ? settingsOptionsPanel
+                                : hiddenPanel, className: is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME, children: jsx_runtime_1.jsx(StudioSettings_1.StudioSettings, {}) })) : null, availableTabs.includes('studio') && openedTabs.includes('studio') ? (jsx_runtime_1.jsx("div", { style: tab === 'studio' && studioPane === 'elements'
+                                ? settingsOptionsPanel
+                                : hiddenPanel, className: is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME, children: jsx_runtime_1.jsx(ElementLibrariesSettings_1.ElementLibrariesSettings, {}) })) : null, availableTabs.includes('updates') &&
                             openedTabs.includes('updates') ? (jsx_runtime_1.jsx("div", { style: tab === 'updates' ? settingsOptionsPanel : hiddenPanel, className: is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME, children: jsx_runtime_1.jsx(UpdatesSettings_1.UpdatesSettings, {}) })) : null] }), tab === 'packages' ? (jsx_runtime_1.jsx("div", { ref: setPackagesFooterContainer })) : !canEditConfig ||
                     tab === 'models' ||
                     tab === 'updates' ||
-                    tab === 'skills' ? null : (jsx_runtime_1.jsx(SettingsModalFooter_1.SettingsModalFooter, { showLicenseFaq: tab === 'license' }))] }) }));
+                    tab === 'skills' ? null : (jsx_runtime_1.jsx(SettingsModalFooter_1.SettingsModalFooter, { showAboutElements: tab === 'studio' && studioPane === 'elements', showLicenseFaq: tab === 'license' }))] }) }));
 };
 exports.SettingsModal = SettingsModal;

package/dist/components/SettingsModalFooter.d.ts

@@ -1,4 +1,5 @@
 import React from 'react';
 export declare const SettingsModalFooter: React.FC<{
+    readonly showAboutElements: boolean;
     readonly showLicenseFaq: boolean;
 }>;

package/dist/components/SettingsModalFooter.js

@@ -44,7 +44,7 @@ const externalLinkIndicator = {
     verticalAlign: -2,
     width: 12,
 };
-const SettingsModalFooter = ({ showLicenseFaq }) => {
+const SettingsModalFooter = ({ showAboutElements, showLicenseFaq }) => {
     const { restartRequired } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
     const [restarting, setRestarting] = (0, react_1.useState)(false);
     const configFileLocation = (0, react_1.useMemo)(() => {
@@ -57,6 +57,9 @@ const SettingsModalFooter = ({ showLicenseFaq }) => {
     const openLicenseFaq = (0, react_1.useCallback)(() => {
         window.open('https://www.remotion.dev/docs/license/faq', '_blank', 'noopener,noreferrer');
     }, []);
+    const openAboutElements = (0, react_1.useCallback)(() => {
+        window.open('https://www.remotion.dev/elements', '_blank', 'noopener,noreferrer');
+    }, []);
     const restart = (0, react_1.useCallback)(() => {
         setRestarting(true);
         (0, restart_studio_1.restartStudio)().catch((error) => {
@@ -67,8 +70,9 @@ const SettingsModalFooter = ({ showLicenseFaq }) => {
     return (jsx_runtime_1.jsx(ModalFooter_1.ModalFooterContainer, { style: footer, children: jsx_runtime_1.jsxs("div", { style: footerRow, children: [
                 jsx_runtime_1.jsx("div", { style: configFileHint, children: restartRequired ? ('Restart the server to apply changes') : (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: ["Changes save to",
                             jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.5 }), jsx_runtime_1.jsx(InspectorOpenInEditor_1.InspectorOpenInEditor, { locationType: null, location: configFileLocation, label: jsx_runtime_1.jsx("strong", { style: configFileName, children: "remotion.config.ts" }), showTooltips: false })
-                        ] })) }), restartRequired ? (jsx_runtime_1.jsx(ModalButton_1.ModalButton, { disabled: restarting, onClick: restart, size: "compact", title: "Restart Studio to apply config file changes", children: restarting ? 'Restarting...' : 'Restart Studio' })) : showLicenseFaq ? (jsx_runtime_1.jsxs(common_1.InspectorQuickAction, { disabled: false, onClick: openLicenseFaq, style: { flex: 'none', width: 'fit-content' }, title: "Open the Remotion License FAQ in a new tab", children: ["License FAQ",
-                        jsx_runtime_1.jsx("svg", { "aria-hidden": "true", viewBox: "0 0 16 16", style: externalLinkIndicator, children: jsx_runtime_1.jsx("path", { d: "M4 12 12 4M6 4h6v6", fill: "none", stroke: colors_1.CURRENT_COLOR, strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "1.5" }) })
+                        ] })) }), restartRequired ? (jsx_runtime_1.jsx(ModalButton_1.ModalButton, { disabled: restarting, onClick: restart, size: "compact", title: "Restart Studio to apply config file changes", children: restarting ? 'Restarting...' : 'Restart Studio' })) : showLicenseFaq || showAboutElements ? (jsx_runtime_1.jsxs(common_1.InspectorQuickAction, { disabled: false, onClick: showLicenseFaq ? openLicenseFaq : openAboutElements, style: { flex: 'none', width: 'fit-content' }, title: showLicenseFaq
+                        ? 'Open the Remotion License FAQ in a new tab'
+                        : 'Open Remotion Elements in a new tab', children: [showLicenseFaq ? 'License FAQ' : 'About Elements', jsx_runtime_1.jsx("svg", { "aria-hidden": "true", viewBox: "0 0 16 16", style: externalLinkIndicator, children: jsx_runtime_1.jsx("path", { d: "M4 12 12 4M6 4h6v6", fill: "none", stroke: colors_1.CURRENT_COLOR, strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "1.5" }) })
                     ] })) : null] }) }));
 };
 exports.SettingsModalFooter = SettingsModalFooter;

package/dist/components/ShowOutlinesProvider.js

@@ -11,7 +11,7 @@ const ShowOutlinesProvider = ({ children }) => {
     const timelineSequenceHoverStore = (0, react_1.useMemo)(() => (0, timeline_sequence_hover_1.createTimelineSequenceHoverStore)(), []);
     (0, react_1.useEffect)(() => {
         const onPointerLeave = () => {
-            timelineSequenceHoverStore.setHoveredSequence((hover) => (hover === null || hover === void 0 ? void 0 : hover.source) === 'timeline' ? null : hover);
+            timelineSequenceHoverStore.clear('timeline');
         };
         window.addEventListener('pointerleave', onPointerLeave);
         window.addEventListener(browserStudioPointerLeaveEvent, onPointerLeave);

package/dist/components/SkillsSettings.d.ts

@@ -1,7 +1,6 @@
 import type { GetRemotionSkillsInfoResponse } from '@remotion/studio-shared';
 import React from 'react';
 export declare const SkillSettingsRow: React.FC<{
-    readonly isLast: boolean;
     readonly skill: GetRemotionSkillsInfoResponse['skills'][number];
 }>;
 export declare const SkillsSettings: React.FC;