@remotion/studio 4.0.527 → 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/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/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;

package/dist/components/SkillsSettings.js

@@ -10,7 +10,9 @@ const use_copy_feedback_1 = require("../helpers/use-copy-feedback");
 const check_circle_filled_1 = require("../icons/check-circle-filled");
 const cloud_download_1 = require("../icons/cloud-download");
 const copy_1 = require("../icons/copy");
+const skills_1 = require("../icons/skills");
 const trash_1 = require("../icons/trash");
+const ActionTooltip_1 = require("./ActionTooltip");
 const InlineAction_1 = require("./InlineAction");
 const ValidationMessage_1 = require("./NewComposition/ValidationMessage");
 const NotificationCenter_1 = require("./Notifications/NotificationCenter");
@@ -33,7 +35,7 @@ const description = {
 };
 const commandField = {
     alignItems: 'center',
-    backgroundColor: 'rgba(0, 0, 0, 0.22)',
+    backgroundColor: colors_1.BLACK_ALPHA_22,
     borderRadius: 4,
     display: 'flex',
     marginTop: 8,
@@ -59,15 +61,14 @@ const list = {
 };
 const skillRow = {
     alignItems: 'center',
-    borderBottom: colors_1.BORDER_WHITE_ALPHA_12,
     display: 'flex',
     gap: 10,
     minHeight: 38,
-    padding: '0 10px',
 };
-const lastSkillRow = {
-    ...skillRow,
-    borderBottom: 'none',
+const skillIcon = {
+    flexShrink: 0,
+    height: 16,
+    width: 16,
 };
 const statusIcon = {
     flexShrink: 0,
@@ -75,7 +76,7 @@ const statusIcon = {
     width: 14,
 };
 const skillName = {
-    color: colors_1.WHITE,
+    color: colors_1.LIGHT_TEXT,
     flex: 1,
     fontFamily: 'monospace',
     fontSize: 13,
@@ -107,7 +108,7 @@ const loading = {
     ...description,
     marginTop: 14,
 };
-const SkillSettingsRow = ({ isLast, skill }) => {
+const SkillSettingsRow = ({ skill }) => {
     const { installSkill, removeSkill, skillAction } = (0, SettingsContext_1.useSettings)();
     const { previewServerState } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
     const canInstall = !window.remotion_isReadOnlyStudio &&
@@ -127,10 +128,8 @@ const SkillSettingsRow = ({ isLast, skill }) => {
     const renderRemoveAction = (0, react_1.useCallback)((color) => {
         return jsx_runtime_1.jsx(trash_1.TrashIcon, { color: color, style: actionIcon });
     }, []);
-    return (jsx_runtime_1.jsxs("div", { role: "listitem", style: isLast ? lastSkillRow : skillRow, children: [
-            jsx_runtime_1.jsxs("span", { style: skillName, children: ["/", skill.name] }), processingThisSkill ? (jsx_runtime_1.jsx("span", { style: status, children: skillAction.type === 'installing' ? 'Installing…' : 'Removing…' })) : installedLocation ? (jsx_runtime_1.jsx("span", { style: status, children: installedLocation })) : null, installed ? (jsx_runtime_1.jsx(check_circle_filled_1.CheckCircleFilled, { "aria-hidden": true, style: { ...statusIcon, fill: colors_1.BLUE } })) : null, processingThisSkill ? (jsx_runtime_1.jsx("span", { style: actionSlot, children: jsx_runtime_1.jsx(Spinner_1.Spinner, { duration: 0.5, size: 14 }) })) : installed && canInstall ? (jsx_runtime_1.jsx(InlineAction_1.InlineAction, { title: skill.installedInProject
-                    ? `Remove ${skill.name} from this project`
-                    : `Remove ${skill.name} globally`, disabled: skillAction !== null, onClick: () => removeSkill(skill.name), renderAction: renderRemoveAction, variant: null })) : canInstall ? (jsx_runtime_1.jsx(InlineAction_1.InlineAction, { title: `Install ${skill.name} in this project`, disabled: skillAction !== null, onClick: () => installSkill(skill.name), renderAction: renderInstallAction, variant: null })) : null] }));
+    return (jsx_runtime_1.jsxs("div", { role: "listitem", style: skillRow, children: [
+            jsx_runtime_1.jsx(skills_1.SkillsIcon, { "aria-hidden": true, color: colors_1.LIGHT_TEXT, style: skillIcon }), jsx_runtime_1.jsxs("span", { style: skillName, children: ["/", skill.name] }), processingThisSkill ? (jsx_runtime_1.jsx("span", { style: status, children: skillAction.type === 'installing' ? 'Installing…' : 'Removing…' })) : installedLocation ? (jsx_runtime_1.jsx("span", { style: status, children: installedLocation })) : null, installed ? (jsx_runtime_1.jsx(check_circle_filled_1.CheckCircleFilled, { "aria-hidden": true, style: { ...statusIcon, fill: colors_1.BLUE } })) : null, processingThisSkill ? (jsx_runtime_1.jsx("span", { style: actionSlot, children: jsx_runtime_1.jsx(Spinner_1.Spinner, { duration: 0.5, size: 14 }) })) : installed && canInstall ? (jsx_runtime_1.jsx(ActionTooltip_1.ActionTooltip, { label: "Uninstall", shortcut: null, delay: 800, dismissOnClick: true, children: jsx_runtime_1.jsx(InlineAction_1.InlineAction, { "aria-label": `Remove ${skill.name}`, title: "", disabled: skillAction !== null, onClick: () => removeSkill(skill.name), renderAction: renderRemoveAction, variant: null }) })) : canInstall ? (jsx_runtime_1.jsx(ActionTooltip_1.ActionTooltip, { label: "Install", shortcut: null, delay: 800, dismissOnClick: true, children: jsx_runtime_1.jsx(InlineAction_1.InlineAction, { "aria-label": `Install ${skill.name}`, title: "", disabled: skillAction !== null, onClick: () => installSkill(skill.name), renderAction: renderInstallAction, variant: null }) })) : null] }));
 };
 exports.SkillSettingsRow = SkillSettingsRow;
 const SkillsSettings = () => {
@@ -159,8 +158,8 @@ const SkillsSettings = () => {
                     jsx_runtime_1.jsx("p", { style: description, children: "Not all skills are installed. Run this command in the project directory, then reload Studio and restart your coding agent." }), jsx_runtime_1.jsxs("div", { style: commandField, children: [
                             jsx_runtime_1.jsx("pre", { style: command, children: INSTALL_COMMAND }), jsx_runtime_1.jsx(InlineAction_1.InlineAction, { variant: null, onClick: onCopy, renderAction: renderCopyAction, title: "Copy install command" })
                         ] })
-                ] })) : null, remotionSkillsInfo ? (jsx_runtime_1.jsx("div", { style: list, role: "list", "aria-label": "Remotion Agent Skills", children: remotionSkillsInfo.skills.map((skill, index) => {
-                    return (jsx_runtime_1.jsx(exports.SkillSettingsRow, { isLast: index === remotionSkillsInfo.skills.length - 1, skill: skill }, skill.name));
+                ] })) : null, remotionSkillsInfo ? (jsx_runtime_1.jsx("div", { style: list, role: "list", "aria-label": "Remotion Agent Skills", children: remotionSkillsInfo.skills.map((skill) => {
+                    return jsx_runtime_1.jsx(exports.SkillSettingsRow, { skill: skill }, skill.name);
                 }) })) : null] }));
 };
 exports.SkillsSettings = SkillsSettings;

package/dist/components/Splitter/SplitterElement.js

@@ -4,7 +4,6 @@ exports.SplitterElement = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const remotion_1 = require("remotion");
-const colors_1 = require("../../helpers/colors");
 const SplitterContext_1 = require("./SplitterContext");
 const SplitterElement = ({ children, type, sticky }) => {
     const context = (0, react_1.useContext)(SplitterContext_1.SplitterContext);
@@ -44,7 +43,7 @@ const SplitterElement = ({ children, type, sticky }) => {
             left: (type === 'flexer' ? 0 : context.flexValue) * 100 + '%',
             width: (type === 'flexer' ? context.flexValue : 1 - context.flexValue) * 100 +
                 '%',
-            backgroundColor: (0, remotion_1.interpolateColors)((0, remotion_1.random)(context.flexValue), [0, 1], [colors_1.RED, 'blue']),
+            backgroundColor: (0, remotion_1.interpolateColors)((0, remotion_1.random)(context.flexValue), [0, 1], ['red', 'blue']),
         };
     }, [context.flexValue, type]);
     return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [

package/dist/components/TimeValue.js

@@ -49,7 +49,7 @@ const currentTimeButtonStyle = {
     padding: 0,
     border: 'none',
     lineHeight: '21px',
-    '--remotion-cli-internals-blue-hovered': colors_1.WHITE,
+    '--remotion-studio-blue-hovered': colors_1.WHITE,
 };
 const currentTimeSubtitle = {
     ...(0, hoverable_1.hoverableStyle)({

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

@@ -1,6 +1,7 @@
 import React from 'react';
 export declare const LoopedTimelineIndicator: React.FC<{
     readonly loops: number;
+    readonly phase: number;
     readonly fullWidth: number;
     readonly visibleOffset: number;
     readonly visibleWidth: number;