@remotion/studio 4.0.514 → 4.0.516

package/dist/components/SelectedOutlineElement.js

@@ -42,21 +42,15 @@ const get_connected_compositions_1 = require("../helpers/get-connected-compositi
 const get_sequence_double_click_action_1 = require("../helpers/get-sequence-double-click-action");
 const interactivity_enabled_1 = require("../helpers/interactivity-enabled");
 const open_in_editor_1 = require("../helpers/open-in-editor");
-const timeline_node_path_key_1 = require("../helpers/timeline-node-path-key");
 const modals_1 = require("../state/modals");
-const timeline_sequence_hover_1 = require("../state/timeline-sequence-hover");
 const transform_3d_mode_1 = require("../state/transform-3d-mode");
 const ConfirmationDialog_1 = require("./ConfirmationDialog");
 const delete_jsx_node_api_1 = require("./delete-jsx-node-api");
 const InitialCompositionLoader_1 = require("./InitialCompositionLoader");
 const NotificationCenter_1 = require("./Notifications/NotificationCenter");
-const selected_outline_control_layout_1 = require("./selected-outline-control-layout");
 const selected_outline_types_1 = require("./selected-outline-types");
 const SelectedOutlineCanvasRotation_1 = require("./SelectedOutlineCanvasRotation");
-const SelectedOutlineCropControls_1 = require("./SelectedOutlineCropControls");
 const SelectedOutlinePolygon_1 = require("./SelectedOutlinePolygon");
-const SelectedOutlineRotationCornerHandle_1 = require("./SelectedOutlineRotationCornerHandle");
-const SelectedOutlineScaleEdgeLine_1 = require("./SelectedOutlineScaleEdgeLine");
 const disable_sequence_interactivity_1 = require("./Timeline/disable-sequence-interactivity");
 const duplicate_selected_timeline_item_1 = require("./Timeline/duplicate-selected-timeline-item");
 const get_sequence_context_menu_items_1 = require("./Timeline/get-sequence-context-menu-items");
@@ -65,7 +59,8 @@ const TimelineSelection_1 = require("./Timeline/TimelineSelection");
 const get_stack_1 = require("./Timeline/TimelineStack/get-stack");
 const use_default_editor_info_1 = require("./use-default-editor-info");
 const use_select_asset_1 = require("./use-select-asset");
-const SelectedOutlineElementUnmemoized = ({ compositionHeight, compositionWidth, dragging, getAllDragOutlines, getAllDragTargets, getAllRotationDragTargets, getAllScaleDragTargets, getLatestTargetByKey, layoutTarget, outline, onDraggingChange, onContextMenuOpenChange, onSnapPointsChange, onSelect, scale, }) => {
+const use_selected_outline_control_target_1 = require("./use-selected-outline-control-target");
+const SelectedOutlineElementUnmemoized = ({ compositionHeight, compositionWidth, dragging, getAllDragOutlines, getAllDragTargets, getLatestTargetByKey, layoutTarget, outline, onDraggingChange, onSnapPointsChange, onSelect, registerContextMenuOpen, scale, }) => {
     var _a;
     const { previewServerState } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
     const { canConfigureApps, canOpenInEditor: editorAvailable, defaultEditorId, editorInfo, } = (0, use_default_editor_info_1.useEditorOpening)(previewServerState.type === 'connected');
@@ -78,43 +73,10 @@ const SelectedOutlineElementUnmemoized = ({ compositionHeight, compositionWidth,
     const { compositions } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
     const { setSelectedModal } = (0, react_1.useContext)(modals_1.SetSelectedModalContext);
     const { setManuallyEnabled } = (0, react_1.useContext)(transform_3d_mode_1.Transform3DModeStateContext);
-    const setHoveredSequence = (0, timeline_sequence_hover_1.useSetTimelineSequenceHover)();
-    const targetRef = (0, react_1.useRef)(layoutTarget);
-    const controlLayout = (0, react_1.useMemo)(() => (0, selected_outline_control_layout_1.getSelectedOutlineControlLayout)(outline.points), [outline.points]);
-    (0, react_1.useLayoutEffect)(() => {
-        targetRef.current = layoutTarget;
-    }, [layoutTarget]);
-    const getTarget = react_1.default.useCallback(() => {
-        const currentTarget = targetRef.current;
-        if (currentTarget === undefined) {
-            return undefined;
-        }
-        return getLatestTargetByKey(currentTarget.key);
-    }, [getLatestTargetByKey]);
-    const getLayoutTarget = react_1.default.useCallback(() => targetRef.current, []);
-    const hoveredNodePathKey = (0, react_1.useMemo)(() => layoutTarget === undefined
-        ? null
-        : (0, timeline_node_path_key_1.timelineSequenceNodePathToKey)(layoutTarget.nodePathInfo.sequenceSubscriptionKey), [layoutTarget]);
-    const hovered = (0, timeline_sequence_hover_1.useIsTimelineSequenceHovered)(hoveredNodePathKey);
-    const controlTarget = layoutTarget !== undefined && (layoutTarget.containsSelection || hovered)
-        ? getLatestTargetByKey(layoutTarget.key)
-        : undefined;
-    const onHoverChange = react_1.default.useCallback((key) => {
-        setHoveredSequence((currentHover) => {
-            if (key !== null) {
-                const hoverTarget = targetRef.current;
-                if (hoverTarget === undefined || hoverTarget.key !== key) {
-                    return currentHover;
-                }
-                return {
-                    key,
-                    nodePathKey: (0, timeline_node_path_key_1.timelineSequenceNodePathToKey)(hoverTarget.nodePathInfo.sequenceSubscriptionKey),
-                    source: 'canvas',
-                };
-            }
-            return (currentHover === null || currentHover === void 0 ? void 0 : currentHover.source) === 'canvas' ? null : currentHover;
-        });
-    }, [setHoveredSequence]);
+    const { controlTarget, getLayoutTarget, getTarget, hovered, onHoverChange } = (0, use_selected_outline_control_target_1.useSelectedOutlineControlTarget)({
+        getLatestTargetByKey,
+        layoutTarget,
+    });
     const resolveOriginalLocation = react_1.default.useCallback(async (resolveTarget) => {
         const stack = resolveTarget.sequence.getStack();
         if (!stack) {
@@ -130,7 +92,7 @@ const SelectedOutlineElementUnmemoized = ({ compositionHeight, compositionWidth,
         updateResolvedStackTrace(stack, originalLocation);
         return originalLocation;
     }, [updateResolvedStackTrace]);
-    const onDoubleClickTarget = react_1.default.useCallback((doubleClickTarget, button) => {
+    const onDoubleClickTarget = react_1.default.useCallback((doubleClickTarget, button, sequenceWasDragged) => {
         const connectedCompositions = (0, get_connected_compositions_1.getConnectedCompositions)({
             compositions,
             singleChildComponent: doubleClickTarget.sequence.singleChildComponent,
@@ -139,6 +101,7 @@ const SelectedOutlineElementUnmemoized = ({ compositionHeight, compositionWidth,
             button,
             canOpenInEditor: editorAvailable,
             numberOfConnectedCompositions: connectedCompositions.length,
+            sequenceWasDragged,
         });
         if (action === null) {
             return false;
@@ -392,15 +355,13 @@ const SelectedOutlineElementUnmemoized = ({ compositionHeight, compositionWidth,
         setSelectedModal,
         setPropStatuses,
     ]);
+    (0, react_1.useLayoutEffect)(() => {
+        registerContextMenuOpen(outline.key, onContextMenuOpen);
+        return () => {
+            registerContextMenuOpen(outline.key, null);
+        };
+    }, [onContextMenuOpen, outline.key, registerContextMenuOpen]);
     return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
-            jsx_runtime_1.jsx(SelectedOutlinePolygon_1.SelectedOutlinePolygon, { compositionHeight: compositionHeight, compositionWidth: compositionWidth, directlySelected: (layoutTarget === null || layoutTarget === void 0 ? void 0 : layoutTarget.selected) === true, dragging: dragging, getAllDragOutlines: getAllDragOutlines, getAllDragTargets: getAllDragTargets, getLayoutTarget: getLayoutTarget, getTarget: getTarget, hasTarget: layoutTarget !== undefined, hovered: hovered, outline: outline, onContextMenuOpen: onContextMenuOpen, onContextMenuOpenChange: onContextMenuOpenChange, onDraggingChange: onDraggingChange, onHoverChange: onHoverChange, onSnapPointsChange: onSnapPointsChange, onSelect: onSelect, onDoubleClickTarget: onDoubleClickTarget, scale: scale, showSelectedOutline: (_a = layoutTarget === null || layoutTarget === void 0 ? void 0 : layoutTarget.showSelectedOutline) !== null && _a !== void 0 ? _a : false }), (layoutTarget === null || layoutTarget === void 0 ? void 0 : layoutTarget.selectedForRotation) && (controlTarget === null || controlTarget === void 0 ? void 0 : controlTarget.rotationDrag) ? (jsx_runtime_1.jsx(SelectedOutlineCanvasRotation_1.SelectedOutlineCanvasRotation, { getLatestTargetByKey: getLatestTargetByKey, layoutTarget: layoutTarget, onDraggingChange: onDraggingChange, outline: outline })) : null, jsx_runtime_1.jsx(SelectedOutlineCropControls_1.SelectedOutlineCropControls, { outline: outline, onDraggingChange: onDraggingChange, target: controlTarget }), (controlTarget === null || controlTarget === void 0 ? void 0 : controlTarget.cropDrag) === null &&
-                ((layoutTarget === null || layoutTarget === void 0 ? void 0 : layoutTarget.containsSelection) || hovered)
-                ? controlLayout.scaleEdges.map((edge) => (jsx_runtime_1.jsx(SelectedOutlineScaleEdgeLine_1.SelectedOutlineScaleEdgeLine, { getAllScaleDragTargets: getAllScaleDragTargets, dragging: dragging, edge: edge, hitWidth: edge === 'top' || edge === 'bottom'
-                        ? controlLayout.scaleHitWidth.horizontal
-                        : controlLayout.scaleHitWidth.vertical, outline: outline, onContextMenuOpen: onContextMenuOpen, onContextMenuOpenChange: onContextMenuOpenChange, onDraggingChange: onDraggingChange, onHoverChange: onHoverChange, onSelect: onSelect, target: controlTarget }, edge)))
-                : null, (controlTarget === null || controlTarget === void 0 ? void 0 : controlTarget.cropDrag) === null &&
-                ((layoutTarget === null || layoutTarget === void 0 ? void 0 : layoutTarget.containsSelection) || hovered)
-                ? controlLayout.rotationCorners.map(({ corner, point }) => (jsx_runtime_1.jsx(SelectedOutlineRotationCornerHandle_1.SelectedOutlineRotationCornerHandle, { getAllRotationDragTargets: getAllRotationDragTargets, corner: corner, dragging: dragging, handlePoint: point, outline: outline, onContextMenuOpen: onContextMenuOpen, onContextMenuOpenChange: onContextMenuOpenChange, onDraggingChange: onDraggingChange, onHoverChange: onHoverChange, onSelect: onSelect, radius: controlLayout.rotationHandleRadius, target: controlTarget }, corner)))
-                : null] }));
+            jsx_runtime_1.jsx(SelectedOutlinePolygon_1.SelectedOutlinePolygon, { compositionHeight: compositionHeight, compositionWidth: compositionWidth, containsSelection: (layoutTarget === null || layoutTarget === void 0 ? void 0 : layoutTarget.containsSelection) === true, directlySelected: (layoutTarget === null || layoutTarget === void 0 ? void 0 : layoutTarget.selected) === true, dragging: dragging, getAllDragOutlines: getAllDragOutlines, getAllDragTargets: getAllDragTargets, getLayoutTarget: getLayoutTarget, getTarget: getTarget, hasTarget: layoutTarget !== undefined, hovered: hovered, outline: outline, onDraggingChange: onDraggingChange, onHoverChange: onHoverChange, onSnapPointsChange: onSnapPointsChange, onSelect: onSelect, onDoubleClickTarget: onDoubleClickTarget, scale: scale, showSelectedOutline: (_a = layoutTarget === null || layoutTarget === void 0 ? void 0 : layoutTarget.showSelectedOutline) !== null && _a !== void 0 ? _a : false }), (layoutTarget === null || layoutTarget === void 0 ? void 0 : layoutTarget.selectedForRotation) && (controlTarget === null || controlTarget === void 0 ? void 0 : controlTarget.rotationDrag) ? (jsx_runtime_1.jsx(SelectedOutlineCanvasRotation_1.SelectedOutlineCanvasRotation, { getLatestTargetByKey: getLatestTargetByKey, layoutTarget: layoutTarget, onDraggingChange: onDraggingChange, outline: outline, transform3DMode: controlTarget.rotationDrag.transform3DMode })) : null] }));
 };
 exports.SelectedOutlineElement = react_1.default.memo(SelectedOutlineElementUnmemoized);

package/dist/components/SelectedOutlineOverlay.js

@@ -485,14 +485,38 @@ const calculateOutlineTargets = ({ connectedClientId, editorShowOutlines, getDra
         ];
     });
 };
-const ActiveSelectedOutlineOverlayUnmemoized = ({ calculateOutlineTargetsForCurrentState, compositionHeight, compositionWidth, draggingOutline, getLatestOutlineTargetByKey, getSelectableOutlines, onDraggingChange, onContextMenuOpenChange, onSelect, scale, selectedSequenceKeys, sequenceKeysContainingSelection, sequences, translationX, translationY, }) => {
+const ActiveSelectedOutlineOverlayUnmemoized = ({ calculateOutlineTargetsForCurrentState, compositionHeight, compositionWidth, draggingOutline, getLatestOutlineTargetByKey, getSelectableOutlines, hoveredTimelineNodePathKey, measureAllOutlines, onDraggingChange, onContextMenuOpenChange, onSelect, scale, selectedSequenceKeys, sequenceKeysContainingSelection, sequences, translationX, translationY, }) => {
     const timelinePosition = remotion_1.Internals.Timeline.useTimelinePosition();
     const updateOutlinesRef = (0, react_1.useRef)(() => undefined);
     const selectableOutlines = (0, react_1.useMemo)(() => {
         return getSelectableOutlines(timelinePosition);
     }, [getSelectableOutlines, timelinePosition]);
+    const selectableOutlinesForLayout = (0, react_1.useMemo)(() => {
+        if (measureAllOutlines) {
+            return selectableOutlines;
+        }
+        // A timeline item can represent multiple connected canvas instances.
+        // Keep every instance of an active source node without calculating targets
+        // for unrelated timeline items while the canvas itself is inactive.
+        const activeNodePathKeys = new Set();
+        for (const { key, nodePathInfo } of selectableOutlines) {
+            const nodePathKey = (0, timeline_node_path_key_1.timelineSequenceNodePathToKey)(nodePathInfo.sequenceSubscriptionKey);
+            if (selectedSequenceKeys.has(key) ||
+                sequenceKeysContainingSelection.has(key) ||
+                nodePathKey === hoveredTimelineNodePathKey) {
+                activeNodePathKeys.add(nodePathKey);
+            }
+        }
+        return selectableOutlines.filter(({ nodePathInfo }) => activeNodePathKeys.has((0, timeline_node_path_key_1.timelineSequenceNodePathToKey)(nodePathInfo.sequenceSubscriptionKey)));
+    }, [
+        hoveredTimelineNodePathKey,
+        measureAllOutlines,
+        selectableOutlines,
+        selectedSequenceKeys,
+        sequenceKeysContainingSelection,
+    ]);
     const outlineRuntimeControls = (0, react_1.useMemo)(() => {
-        return selectableOutlines.flatMap(({ key, sequence }) => {
+        return selectableOutlinesForLayout.flatMap(({ key, sequence }) => {
             if (!selectedSequenceKeys.has(key) &&
                 !sequenceKeysContainingSelection.has(key)) {
                 return [];
@@ -500,7 +524,7 @@ const ActiveSelectedOutlineOverlayUnmemoized = ({ calculateOutlineTargetsForCurr
             return sequence.controls ? [sequence.controls] : [];
         });
     }, [
-        selectableOutlines,
+        selectableOutlinesForLayout,
         selectedSequenceKeys,
         sequenceKeysContainingSelection,
     ]);
@@ -512,13 +536,13 @@ const ActiveSelectedOutlineOverlayUnmemoized = ({ calculateOutlineTargetsForCurr
     const outlineTargets = (0, react_1.useMemo)(() => calculateOutlineTargetsForCurrentState({
         mode: 'layout',
         runtimeValuesByStore: outlineRuntimeValuesByStore,
-        selectableOutlines,
+        selectableOutlines: selectableOutlinesForLayout,
         targetKey: null,
         targetTimelinePosition: timelinePosition,
     }), [
         calculateOutlineTargetsForCurrentState,
         outlineRuntimeValuesByStore,
-        selectableOutlines,
+        selectableOutlinesForLayout,
         timelinePosition,
     ]);
     const outlineTargetsRef = (0, react_1.useRef)(outlineTargets);
@@ -658,6 +682,8 @@ const SelectedOutlineOverlayUnmemoized = ({ canvasHovered, compositionHeight, co
         canvasContextMenuOpen ||
         sequenceKeysContainingSelection.size > 0 ||
         (hoveredSequence === null || hoveredSequence === void 0 ? void 0 : hoveredSequence.source) === 'timeline';
+    const measureAllOutlines = canvasHovered || draggingOutline || canvasContextMenuOpen;
+    const hoveredTimelineNodePathKey = (hoveredSequence === null || hoveredSequence === void 0 ? void 0 : hoveredSequence.source) === 'timeline' ? hoveredSequence.nodePathKey : null;
     (0, react_1.useLayoutEffect)(() => {
         if (measurementActive) {
             return;
@@ -665,6 +691,6 @@ const SelectedOutlineOverlayUnmemoized = ({ canvasHovered, compositionHeight, co
         setHoveredSequence((currentHover) => (currentHover === null || currentHover === void 0 ? void 0 : currentHover.source) === 'canvas' ? null : currentHover);
     }, [measurementActive, setHoveredSequence]);
     return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
-            jsx_runtime_1.jsx(SelectedOutlineKeyboardControls_1.SelectedOutlineKeyboardControls, { getLatestOutlineTargetByKey: getLatestOutlineTargetByKey, getSelectableOutlines: getCurrentSelectableOutlines }), measurementActive ? (jsx_runtime_1.jsx(ActiveSelectedOutlineOverlay, { calculateOutlineTargetsForCurrentState: calculateOutlineTargetsForCurrentState, compositionHeight: compositionHeight, compositionWidth: compositionWidth, draggingOutline: draggingOutline, getLatestOutlineTargetByKey: getLatestOutlineTargetByKey, getSelectableOutlines: getSelectableOutlines, onDraggingChange: onDraggingChange, onContextMenuOpenChange: setCanvasContextMenuOpen, onSelect: selectOutlineItem, scale: scale, selectedSequenceKeys: selectedSequenceKeys, sequenceKeysContainingSelection: sequenceKeysContainingSelection, sequences: sequences, translationX: translationX, translationY: translationY })) : null] }));
+            jsx_runtime_1.jsx(SelectedOutlineKeyboardControls_1.SelectedOutlineKeyboardControls, { getLatestOutlineTargetByKey: getLatestOutlineTargetByKey, getSelectableOutlines: getCurrentSelectableOutlines }), measurementActive ? (jsx_runtime_1.jsx(ActiveSelectedOutlineOverlay, { calculateOutlineTargetsForCurrentState: calculateOutlineTargetsForCurrentState, compositionHeight: compositionHeight, compositionWidth: compositionWidth, draggingOutline: draggingOutline, getLatestOutlineTargetByKey: getLatestOutlineTargetByKey, getSelectableOutlines: getSelectableOutlines, hoveredTimelineNodePathKey: hoveredTimelineNodePathKey, measureAllOutlines: measureAllOutlines, onDraggingChange: onDraggingChange, onContextMenuOpenChange: setCanvasContextMenuOpen, onSelect: selectOutlineItem, scale: scale, selectedSequenceKeys: selectedSequenceKeys, sequenceKeysContainingSelection: sequenceKeysContainingSelection, sequences: sequences, translationX: translationX, translationY: translationY })) : null] }));
 };
 exports.SelectedOutlineOverlay = react_1.default.memo(SelectedOutlineOverlayUnmemoized);

package/dist/components/SelectedOutlinePolygon.d.ts

@@ -1,11 +1,13 @@
 import React from 'react';
 import type { SelectedOutline } from './selected-outline-geometry';
 import { type SelectedOutlineSnapPoint } from './selected-outline-snap';
-import { type SelectedOutlineContextMenuOpenHandler, type SelectedOutlineDragTarget, type SelectedOutlineLayoutTarget, type SelectedOutlineTarget } from './selected-outline-types';
+import { type SelectedOutlineDragTarget, type SelectedOutlineLayoutTarget, type SelectedOutlineTarget } from './selected-outline-types';
 import type { TimelineSelection, TimelineSelectionInteraction } from './Timeline/TimelineSelection';
+export declare const SELECTED_OUTLINE_KEY_ATTR = "data-remotion-studio-selected-outline-key";
 export declare const SelectedOutlinePolygon: React.NamedExoticComponent<{
     readonly compositionHeight: number;
     readonly compositionWidth: number;
+    readonly containsSelection: boolean;
     readonly directlySelected: boolean;
     readonly dragging: boolean;
     readonly getAllDragOutlines: () => readonly SelectedOutline[];
@@ -14,14 +16,12 @@ export declare const SelectedOutlinePolygon: React.NamedExoticComponent<{
     readonly getTarget: () => SelectedOutlineTarget | undefined;
     readonly hasTarget: boolean;
     readonly hovered: boolean;
-    readonly onContextMenuOpen: SelectedOutlineContextMenuOpenHandler;
-    readonly onContextMenuOpenChange: (open: boolean) => void;
     readonly outline: SelectedOutline;
     readonly onDraggingChange: (dragging: boolean) => void;
     readonly onHoverChange: (key: string | null) => void;
     readonly onSnapPointsChange: (snapPoints: readonly SelectedOutlineSnapPoint[]) => void;
     readonly onSelect: (item: TimelineSelection, interaction: TimelineSelectionInteraction) => void;
-    readonly onDoubleClickTarget: (target: SelectedOutlineTarget, button: number) => boolean;
+    readonly onDoubleClickTarget: (target: SelectedOutlineTarget, button: number, sequenceWasDragged: boolean) => boolean;
     readonly scale: number;
     readonly showSelectedOutline: boolean;
 }>;

package/dist/components/SelectedOutlinePolygon.js

@@ -33,17 +33,17 @@ var __importStar = (this && this.__importStar) || (function () {
     };
 })();
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.SelectedOutlinePolygon = void 0;
+exports.SelectedOutlinePolygon = exports.SELECTED_OUTLINE_KEY_ATTR = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = __importStar(require("react"));
 const remotion_1 = require("remotion");
 const client_id_1 = require("../helpers/client-id");
 const colors_1 = require("../helpers/colors");
+const drag_aware_double_click_1 = require("../helpers/drag-aware-double-click");
 const interactivity_enabled_1 = require("../helpers/interactivity-enabled");
 const pointer_session_1 = require("../helpers/pointer-session");
 const editor_guides_1 = require("../state/editor-guides");
 const editor_snapping_1 = require("../state/editor-snapping");
-const ContextMenu_1 = require("./ContextMenu");
 const effect_drag_and_drop_1 = require("./effect-drag-and-drop");
 const ForceSpecificCursor_1 = require("./ForceSpecificCursor");
 const NotificationCenter_1 = require("./Notifications/NotificationCenter");
@@ -56,8 +56,10 @@ const focus_inspector_field_1 = require("./Timeline/focus-inspector-field");
 const imperative_state_1 = require("./Timeline/imperative-state");
 const save_sequence_prop_1 = require("./Timeline/save-sequence-prop");
 const should_clear_selection_on_pointer_down_1 = require("./Timeline/should-clear-selection-on-pointer-down");
-const SelectedOutlinePolygonUnmemoized = ({ compositionHeight, compositionWidth, directlySelected, dragging, getAllDragOutlines, getAllDragTargets, getLayoutTarget, getTarget, hasTarget, hovered, onContextMenuOpen, onContextMenuOpenChange, outline, onDraggingChange, onHoverChange, onSnapPointsChange, onSelect, onDoubleClickTarget, scale, showSelectedOutline, }) => {
+exports.SELECTED_OUTLINE_KEY_ATTR = 'data-remotion-studio-selected-outline-key';
+const SelectedOutlinePolygonUnmemoized = ({ compositionHeight, compositionWidth, containsSelection, directlySelected, dragging, getAllDragOutlines, getAllDragTargets, getLayoutTarget, getTarget, hasTarget, hovered, outline, onDraggingChange, onHoverChange, onSnapPointsChange, onSelect, onDoubleClickTarget, scale, showSelectedOutline, }) => {
     const { previewServerState } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
+    const dragAwareDoubleClick = (0, react_1.useMemo)(() => (0, drag_aware_double_click_1.createDragAwareDoubleClickTracker)(), []);
     const { canvasContent } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
     const { getDragOverrides } = (0, react_1.useContext)(remotion_1.Internals.VisualModeDragOverridesContext);
     const { setPropStatuses, setDragOverrides, clearDragOverrides } = (0, react_1.useContext)(remotion_1.Internals.VisualModeSettersContext);
@@ -114,7 +116,7 @@ const SelectedOutlinePolygonUnmemoized = ({ compositionHeight, compositionWidth,
         const deferSelection = !selected &&
             !interaction.shiftKey &&
             !interaction.toggleKey &&
-            pointerInsideSelectedOutline;
+            (containsSelection || pointerInsideSelectedOutline);
         if (!deferSelection && shouldUpdateSelection) {
             onSelect(target.selection, interaction);
         }
@@ -254,6 +256,7 @@ const SelectedOutlinePolygonUnmemoized = ({ compositionHeight, compositionWidth,
             updateDragOverrides();
         };
         const onPointerUp = (reason) => {
+            dragAwareDoubleClick.endPointerGesture(dragStarted);
             window.removeEventListener('keydown', onKeyChange);
             window.removeEventListener('keyup', onKeyChange);
             if (dragStarted) {
@@ -317,6 +320,8 @@ const SelectedOutlinePolygonUnmemoized = ({ compositionHeight, compositionWidth,
         clearDragOverrides,
         compositionHeight,
         compositionWidth,
+        containsSelection,
+        dragAwareDoubleClick,
         editorShowGuides,
         editorSnapping,
         getAllDragOutlines,
@@ -337,12 +342,12 @@ const SelectedOutlinePolygonUnmemoized = ({ compositionHeight, compositionWidth,
         if (target === undefined) {
             return;
         }
-        if (!onDoubleClickTarget(target, event.button)) {
+        if (!onDoubleClickTarget(target, event.button, dragAwareDoubleClick.consumePointerGestureWasDragged())) {
             return;
         }
         event.preventDefault();
         event.stopPropagation();
-    }, [getTarget, onDoubleClickTarget]);
+    }, [dragAwareDoubleClick, getTarget, onDoubleClickTarget]);
     const onEffectDragOver = react_1.default.useCallback((event) => {
         if (!(0, effect_drag_and_drop_1.hasEffectDragType)(event.dataTransfer)) {
             return;
@@ -390,16 +395,14 @@ const SelectedOutlinePolygonUnmemoized = ({ compositionHeight, compositionWidth,
             clientId: effectDrop.clientId,
         });
     }, [getEffectDropTarget]);
-    return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
-            jsx_runtime_1.jsx("polygon", { ref: polygonRef, [should_clear_selection_on_pointer_down_1.PREVENT_CLEAR_SELECTION_ON_POINTER_DOWN_ATTR]: 'true', "data-remotion-directly-selected-outline": directlySelected ? 'true' : undefined, points: points, fill: effectDropHovered ? colors_1.TIMELINE_DROP_BLUE_ALPHA_12 : colors_1.TRANSPARENT, stroke: colors_1.BLUE, strokeOpacity: visible || effectDropHovered ? 1 : 0, strokeWidth: 2, vectorEffect: "non-scaling-stroke", pointerEvents: hasTarget ? 'all' : undefined, onPointerEnter: () => {
-                    if (!dragging) {
-                        onHoverChange(outline.key);
-                    }
-                }, onPointerLeave: () => {
-                    if (!dragging) {
-                        onHoverChange(null);
-                    }
-                }, onPointerDown: onPointerDown, onDoubleClick: onDoubleClick, onDragOver: onEffectDragOver, onDragLeave: onEffectDragLeave, onDrop: onEffectDrop }), jsx_runtime_1.jsx(ContextMenu_1.ContextMenuForTarget, { triggerRef: polygonRef, getItems: onContextMenuOpen, onOpenChange: onContextMenuOpenChange })
-        ] }));
+    return (jsx_runtime_1.jsx("polygon", { ref: polygonRef, [should_clear_selection_on_pointer_down_1.PREVENT_CLEAR_SELECTION_ON_POINTER_DOWN_ATTR]: 'true', [exports.SELECTED_OUTLINE_KEY_ATTR]: outline.key, "data-remotion-directly-selected-outline": directlySelected ? 'true' : undefined, points: points, fill: effectDropHovered ? colors_1.TIMELINE_DROP_BLUE_ALPHA_12 : colors_1.TRANSPARENT, stroke: colors_1.BLUE, strokeOpacity: visible || effectDropHovered ? 1 : 0, strokeWidth: 2, vectorEffect: "non-scaling-stroke", pointerEvents: hasTarget ? 'all' : undefined, onPointerEnter: () => {
+            if (!dragging) {
+                onHoverChange(outline.key);
+            }
+        }, onPointerLeave: () => {
+            if (!dragging) {
+                onHoverChange(null);
+            }
+        }, onPointerDown: onPointerDown, onPointerDownCapture: dragAwareDoubleClick.beginPointerGesture, onDoubleClick: onDoubleClick, onDragOver: onEffectDragOver, onDragLeave: onEffectDragLeave, onDrop: onEffectDrop }));
 };
 exports.SelectedOutlinePolygon = react_1.default.memo(SelectedOutlinePolygonUnmemoized);

package/dist/components/SelectedOutlineRenderer.js

@@ -36,10 +36,14 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.SelectedOutlineRenderer = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 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 SelectedOutlinePolygon_1 = require("./SelectedOutlinePolygon");
 const SelectedOutlineSnapIndicators_1 = require("./SelectedOutlineSnapIndicators");
 const SelectedOutlineTransformOriginHandle_1 = require("./SelectedOutlineTransformOriginHandle");
 const SelectedOutlineUvControls_1 = require("./SelectedOutlineUvControls");
@@ -53,30 +57,47 @@ const emptyRenderState = {
     outlines: [],
     targets: [],
 };
-const SelectedOutlineHoverCleanup = ({ targets }) => {
-    const hoveredSequence = (0, timeline_sequence_hover_1.useTimelineSequenceHoverState)();
-    const setHoveredSequence = (0, timeline_sequence_hover_1.useSetTimelineSequenceHover)();
-    (0, react_1.useEffect)(() => {
-        if ((hoveredSequence === null || hoveredSequence === void 0 ? void 0 : hoveredSequence.source) === 'canvas' &&
-            !targets.some((target) => target.key === hoveredSequence.key)) {
-            setHoveredSequence((currentHover) => (currentHover === null || currentHover === void 0 ? void 0 : currentHover.source) === 'canvas' ? null : currentHover);
-        }
-    }, [hoveredSequence, setHoveredSequence, targets]);
-    return null;
-};
 const SelectedOutlineRendererUnmemoized = ({ compositionHeight, compositionWidth, dragging, getLatestOutlineTargetByKey, getOutlineTargets, onDraggingChange, onContextMenuOpenChange, onSelect, scale, sequences, updateOutlinesRef, }) => {
+    var _a;
     const [renderState, setRenderState] = (0, react_1.useState)(emptyRenderState);
     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) {
+            contextMenuOpenHandlersRef.current.delete(key);
+        }
+        else {
+            contextMenuOpenHandlersRef.current.set(key, handler);
+        }
+    }, []);
+    const getContextMenuOpenByKey = (0, react_1.useCallback)((key) => contextMenuOpenHandlersRef.current.get(key), []);
+    const getDelegatedContextMenuItems = (0, react_1.useCallback)((event) => {
+        var _a;
+        var _b;
+        if (!(event.target instanceof Element)) {
+            return false;
+        }
+        const polygon = event.target.closest(`polygon[${SelectedOutlinePolygon_1.SELECTED_OUTLINE_KEY_ATTR}]`);
+        if ((polygon === null || polygon === void 0 ? void 0 : polygon.ownerSVGElement) !== overlayRef.current) {
+            return false;
+        }
+        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)(() => {
         const targets = getOutlineTargets();
         if (overlayRef.current === null || targets.length === 0) {
             setRenderState((prevState) => prevState.targets.length === 0 ? prevState : emptyRenderState);
             return;
         }
-        const nextOutlines = (0, selected_outline_measurement_1.measureOutlines)(overlayRef.current, targets);
+        const nextOutlines = (0, selected_outline_measurement_1.measureOutlines)(overlayRef.current, targets, hoveredTimelineNodePathKey);
         setRenderState((prevState) => {
             const outlines = (0, selected_outline_measurement_1.outlinesAreEqual)(prevState.outlines, nextOutlines)
                 ? prevState.outlines
@@ -86,7 +107,7 @@ const SelectedOutlineRendererUnmemoized = ({ compositionHeight, compositionWidth
             }
             return { outlines, targets };
         });
-    }, [getOutlineTargets]);
+    }, [getOutlineTargets, hoveredTimelineNodePathKey]);
     (0, react_1.useLayoutEffect)(() => {
         updateOutlinesRef.current = updateOutlines;
         updateOutlines();
@@ -149,6 +170,12 @@ const SelectedOutlineRendererUnmemoized = ({ compositionHeight, compositionWidth
     const targetsByKey = (0, react_1.useMemo)(() => {
         return new Map(renderState.targets.map((target) => [target.key, target]));
     }, [renderState.targets]);
+    (0, react_1.useEffect)(() => {
+        if ((hoveredSequence === null || hoveredSequence === void 0 ? void 0 : hoveredSequence.source) === 'canvas' &&
+            !renderState.targets.some((target) => target.key === hoveredSequence.key)) {
+            setHoveredSequence((currentHover) => (currentHover === null || currentHover === void 0 ? void 0 : currentHover.source) === 'canvas' ? null : currentHover);
+        }
+    }, [hoveredSequence, renderState.targets, setHoveredSequence]);
     // Reordering a captured SVG target can cancel the active pointer session.
     const outlineRenderingOrderRef = (0, react_1.useRef)([]);
     const outlinesForRendering = (0, react_1.useMemo)(() => {
@@ -176,6 +203,31 @@ const SelectedOutlineRendererUnmemoized = ({ compositionHeight, compositionWidth
     const outlinesByKey = (0, react_1.useMemo)(() => {
         return new Map(renderState.outlines.map((outline) => [outline.key, outline]));
     }, [renderState.outlines]);
+    const { outlinesForEditingHandles, outlinesForTransformOrigin, outlinesForUvHandles, } = (0, react_1.useMemo)(() => {
+        const editingHandles = [];
+        const transformOrigin = [];
+        const uvHandles = [];
+        for (const outline of outlinesForRendering) {
+            const target = targetsByKey.get(outline.key);
+            if ((target === null || target === void 0 ? void 0 : target.containsSelection) === true ||
+                (target !== undefined &&
+                    (0, timeline_node_path_key_1.timelineSequenceNodePathToKey)(target.nodePathInfo.sequenceSubscriptionKey) === hoveredNodePathKey)) {
+                editingHandles.push(outline);
+            }
+            if ((target === null || target === void 0 ? void 0 : target.selectedForUvHandles) === true) {
+                uvHandles.push(outline);
+            }
+            if ((target === null || target === void 0 ? void 0 : target.selectedForTransformOrigin) === true ||
+                (target === null || target === void 0 ? void 0 : target.selectedForRotation) === true) {
+                transformOrigin.push(outline);
+            }
+        }
+        return {
+            outlinesForEditingHandles: editingHandles,
+            outlinesForTransformOrigin: transformOrigin,
+            outlinesForUvHandles: uvHandles,
+        };
+    }, [hoveredNodePathKey, outlinesForRendering, targetsByKey]);
     const targetsRef = (0, react_1.useRef)(renderState.targets);
     const outlinesByKeyRef = (0, react_1.useRef)(outlinesByKey);
     (0, react_1.useLayoutEffect)(() => {
@@ -220,6 +272,6 @@ 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(SelectedOutlineHoverCleanup, { targets: renderState.targets }), 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, getAllRotationDragTargets: getAllRotationDragTargets, getAllScaleDragTargets: getAllScaleDragTargets, getLatestTargetByKey: getLatestOutlineTargetByKey, outline: outline, onDraggingChange: onDraggingChange, onContextMenuOpenChange: onContextMenuOpenChange, onSnapPointsChange: onSnapPointsChange, onSelect: onSelect, scale: scale, layoutTarget: targetsByKey.get(outline.key) }, outline.key))), outlinesForRendering.map((outline) => (jsx_runtime_1.jsx(SelectedOutlineUvControls_1.SelectedOutlineUvHandleConnectionLayer, { outline: outline, layoutTarget: targetsByKey.get(outline.key) }, `${outline.key}-uv-connection-lines`))), outlinesForRendering.map((outline) => (jsx_runtime_1.jsx(SelectedOutlineUvControls_1.SelectedOutlineUvHandleCircleLayer, { onDraggingChange: onDraggingChange, onSelect: onSelect, outline: outline, layoutTarget: targetsByKey.get(outline.key) }, `${outline.key}-uv-handles`))), outlinesForRendering.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))), 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/SettingsModal.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-type SettingsTab = 'apps' | 'rendering' | 'studio' | 'license';
+type SettingsTab = 'apps' | 'rendering' | 'studio' | 'packages' | 'shortcuts' | 'skills' | 'license';
 export declare const SettingsModal: React.FC<{
     readonly initialTab: SettingsTab;
     readonly initialPublicLicenseKey: string | null;

package/dist/components/SettingsModal.js

@@ -3,13 +3,19 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.SettingsModal = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
+const browser_studio_operations_1 = require("../helpers/browser-studio-operations");
 const apps_1 = require("../icons/apps");
-const certificate_1 = require("../icons/certificate");
+const keyboard_1 = require("../icons/keyboard");
+const license_1 = require("../icons/license");
+const package_1 = require("../icons/package");
 const remotion_triangle_1 = require("../icons/remotion-triangle");
+const skills_1 = require("../icons/skills");
 const video_1 = require("../icons/video");
 const modals_1 = require("../state/modals");
 const ConfigureDefaultEditorModal_1 = require("./ConfigureDefaultEditorModal");
 const ConfigureLicenseModal_1 = require("./ConfigureLicenseModal");
+const InstallPackage_1 = require("./InstallPackage");
+const KeyboardShortcutsSettings_1 = require("./KeyboardShortcutsSettings");
 const is_menu_item_1 = require("./Menu/is-menu-item");
 const ModalHeader_1 = require("./ModalHeader");
 const DismissableModal_1 = require("./NewComposition/DismissableModal");
@@ -17,6 +23,7 @@ const RenderingSettings_1 = require("./RenderingSettings");
 const render_modals_1 = require("./RenderModal/render-modals");
 const SettingsContext_1 = require("./SettingsContext");
 const SettingsModalFooter_1 = require("./SettingsModalFooter");
+const SkillsSettings_1 = require("./SkillsSettings");
 const StudioSettings_1 = require("./StudioSettings");
 const vertical_1 = require("./Tabs/vertical");
 const hiddenPanel = {
@@ -27,21 +34,38 @@ const settingsOptionsPanel = {
     boxSizing: 'border-box',
     paddingBottom: 16,
 };
+const settingsLeftSidebar = {
+    ...render_modals_1.leftSidebar,
+    paddingLeft: 8,
+};
 const appsIcon = {
     ...render_modals_1.icon,
-    height: 20,
-    width: 20,
+    flexShrink: 0,
+    height: 24,
+    width: 24,
 };
-const appsIconContainer = {
-    ...render_modals_1.iconContainer,
+const skillsIcon = {
+    ...render_modals_1.icon,
+    flexShrink: 0,
     height: 20,
     width: 20,
 };
+const keyboardIcon = {
+    ...render_modals_1.icon,
+    height: 16,
+    width: 16,
+};
 const SettingsModal = ({ initialPublicLicenseKey, initialTab }) => {
     const { setSelectedModal } = (0, react_1.useContext)(modals_1.SetSelectedModalContext);
     const { setPublicLicenseKey } = (0, SettingsContext_1.useSettings)();
+    const isBrowserStudio = (0, browser_studio_operations_1.getBrowserStudioOperations)() !== null;
+    const packageManager = window.remotion_packageManager === 'unknown'
+        ? null
+        : window.remotion_packageManager;
+    const showPackages = (0, browser_studio_operations_1.canInstallPackages)() && (isBrowserStudio || packageManager !== null);
     const [tab, setTab] = (0, react_1.useState)(initialTab);
     const [openedTabs, setOpenedTabs] = (0, react_1.useState)([initialTab]);
+    const [packagesFooterContainer, setPackagesFooterContainer] = (0, react_1.useState)(null);
     const dismiss = (0, react_1.useCallback)(() => {
         setSelectedModal(null);
     }, [setSelectedModal]);
@@ -59,7 +83,6 @@ 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: render_modals_1.leftSidebar, children: [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" }), 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" }), 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: appsIconContainer, children: jsx_runtime_1.jsx(apps_1.AppsIcon, { color: color, style: appsIcon }) })), children: "Apps" }), 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(certificate_1.CertificateIcon, { color: color, style: render_modals_1.icon }) })), children: "License" })] }), 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, 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, 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, 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] }), jsx_runtime_1.jsx(SettingsModalFooter_1.SettingsModalFooter, {})
-            ] }) }));
+                        jsx_runtime_1.jsxs("div", { style: settingsLeftSidebar, children: [isBrowserStudio ? null : (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" })), isBrowserStudio ? null : (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" })), 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" }), showPackages ? (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, isBrowserStudio ? null : (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" })), isBrowserStudio ? null : (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" })), isBrowserStudio ? null : (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" }))] }), 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, 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, 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, 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, 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, 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] }), tab === 'packages' ? (jsx_runtime_1.jsx("div", { ref: setPackagesFooterContainer })) : isBrowserStudio ? null : (jsx_runtime_1.jsx(SettingsModalFooter_1.SettingsModalFooter, {}))] }) }));
 };
 exports.SettingsModal = SettingsModal;

package/dist/components/SettingsModalFooter.js

@@ -5,6 +5,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const colors_1 = require("../helpers/colors");
 const InspectorOpenInEditor_1 = require("./InspectorOpenInEditor");
+const layout_1 = require("./layout");
 const ModalFooter_1 = require("./ModalFooter");
 const footer = {
     flex: 'none',
@@ -38,7 +39,7 @@ const SettingsModalFooter = () => {
         };
     }, []);
     return (jsx_runtime_1.jsx(ModalFooter_1.ModalFooterContainer, { style: footer, children: jsx_runtime_1.jsx("div", { style: footerRow, children: jsx_runtime_1.jsxs("div", { style: configFileHint, children: ["Changes save to",
-                    jsx_runtime_1.jsx(InspectorOpenInEditor_1.InspectorOpenInEditor, { locationType: null, location: configFileLocation, label: jsx_runtime_1.jsx("strong", { style: configFileName, children: "remotion.config.ts" }) })
+                    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" }) })
                 ] }) }) }));
 };
 exports.SettingsModalFooter = SettingsModalFooter;

package/dist/components/SkillsSettings.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const SkillsSettings: React.FC;