@remotion/studio 4.0.518 → 4.0.520

package/dist/components/SelectedOutlineElement.js

@@ -45,7 +45,6 @@ const open_in_editor_1 = require("../helpers/open-in-editor");
 const modals_1 = require("../state/modals");
 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_types_1 = require("./selected-outline-types");
@@ -57,6 +56,7 @@ const get_sequence_context_menu_items_1 = require("./Timeline/get-sequence-conte
 const timeline_asset_link_1 = require("./Timeline/timeline-asset-link");
 const TimelineSelection_1 = require("./Timeline/TimelineSelection");
 const get_stack_1 = require("./Timeline/TimelineStack/get-stack");
+const use_delete_timeline_items_1 = require("./Timeline/use-delete-timeline-items");
 const use_default_editor_info_1 = require("./use-default-editor-info");
 const use_select_asset_1 = require("./use-select-asset");
 const use_selected_outline_control_target_1 = require("./use-selected-outline-control-target");
@@ -68,6 +68,7 @@ const SelectedOutlineElementUnmemoized = ({ compositionHeight, compositionWidth,
     const { setPropStatuses } = (0, react_1.useContext)(remotion_1.Internals.VisualModeSettersContext);
     const updateResolvedStackTrace = (0, react_1.useContext)(remotion_1.Internals.SequenceStackTracesUpdateContext);
     const confirm = (0, ConfirmationDialog_1.useConfirmationDialog)();
+    const deleteTimelineItems = (0, use_delete_timeline_items_1.useDeleteTimelineItems)();
     const selectAsset = (0, use_select_asset_1.useSelectAsset)();
     const selectComposition = (0, InitialCompositionLoader_1.useSelectComposition)();
     const { compositions } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
@@ -180,38 +181,16 @@ const SelectedOutlineElementUnmemoized = ({ compositionHeight, compositionWidth,
                     });
                 }
                 : null,
-            onDeleteSequenceFromSource: async () => {
+            onDeleteSequenceFromSource: () => {
                 if (sourceEditDisabled || previewServerState.type !== 'connected') {
                     return;
                 }
-                if (contextMenuTarget.nodePathInfo.numberOfSequencesWithThisNodePath > 1) {
-                    const shouldDelete = await confirm({
-                        title: 'Delete sequence?',
-                        message: 'This sequence is programmatically duplicated ' +
-                            contextMenuTarget.nodePathInfo.numberOfSequencesWithThisNodePath +
-                            ' times in the code. Deleting removes all instances. Continue?',
-                        confirmLabel: 'Delete',
-                    });
-                    if (!shouldDelete) {
-                        return;
-                    }
-                }
-                try {
-                    const result = await (0, delete_jsx_node_api_1.deleteJsxNode)({
-                        nodes: [
-                            {
-                                fileName: nodePath.absolutePath,
-                                nodePath: nodePath.nodePath,
-                            },
-                        ],
-                    });
-                    if (!result.success) {
-                        (0, NotificationCenter_1.showNotification)(result.reason, 4000);
-                    }
-                }
-                catch (err) {
-                    (0, NotificationCenter_1.showNotification)(err.message, 4000);
-                }
+                deleteTimelineItems([
+                    {
+                        type: 'sequence',
+                        nodePathInfo: contextMenuTarget.nodePathInfo,
+                    },
+                ]);
             },
             onDisableSequenceInteractivity: () => {
                 if (disableInteractivityDisabled ||
@@ -343,6 +322,7 @@ const SelectedOutlineElementUnmemoized = ({ compositionHeight, compositionWidth,
         canConfigureApps,
         codingAgentInfo,
         confirm,
+        deleteTimelineItems,
         editorInfo,
         getTarget,
         onSelect,
@@ -362,6 +342,7 @@ const SelectedOutlineElementUnmemoized = ({ compositionHeight, compositionWidth,
         };
     }, [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, 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] }));
+            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, translateWithCommandKey: (layoutTarget === null || layoutTarget === void 0 ? void 0 : layoutTarget.selectedForRotation) === true &&
+                    Boolean(controlTarget === null || controlTarget === void 0 ? void 0 : controlTarget.rotationDrag) }), (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/SelectedOutlineKeyboardControls.d.ts

@@ -1,7 +1,7 @@
-import type { CanvasSelectableOutline } from '@remotion/canvas';
 import type React from 'react';
+import type { getSequencesWithSelectableOutlines } from './selected-outline-measurement';
 import { type SelectedOutlineTarget } from './selected-outline-types';
 export declare const SelectedOutlineKeyboardControls: React.FC<{
     readonly getLatestOutlineTargetByKey: (key: string) => SelectedOutlineTarget | undefined;
-    readonly getSelectableOutlines: () => readonly CanvasSelectableOutline[];
+    readonly getSelectableOutlines: () => ReturnType<typeof getSequencesWithSelectableOutlines>;
 }>;

package/dist/components/SelectedOutlineOverlay.d.ts

@@ -1,6 +1,8 @@
 import React from 'react';
+import { orderOutlinesForRendering } from './selected-outline-order';
+export { orderOutlinesForRendering };
 export { applySelectedOutlineDragAxisLock, applySelectedOutlineTransformOriginAxisLock, compensateTranslateForTransformOrigin, getSelectedOutline3DRotationDragValues, getSelectedOutlineActiveSchema, getSelectedOutlineCropDragChanges, getSelectedOutlineCropDragValues, getSelectedOutlineCropFollowingTransformOrigin, getSelectedOutlineDragChanges, getSelectedOutlineDragValues, getSelectedOutlineKeyboardNudgeDelta, getSelectedOutlineKeyboardNudgeDeltas, getSelectedOutlineRotationDragChanges, getSelectedOutlineRotationDragStates, getSelectedOutlineRotationDragValues, getSelectedOutlineScaleDragChanges, getSelectedOutlineScaleDragStates, getSelectedOutlineScaleDragValues, getSelectedOutlineScaleEdgeInfo, getSelectedOutlineTransformOriginDragChanges, getSelectedOutlineTransformOriginLockedAxis, isSelectedOutlineDragPastThreshold, selectedOutlineTransformOriginSnapThresholdPx, selectedOutlineUvSnapThresholdPx, snapSelectedOutlineRotationDeltaDegrees, snapSelectedOutlineTransformOriginUv, snapSelectedOutlineUv, } from './selected-outline-drag';
-export { getOutlineSelectionInteraction, getSelectedCropInfo, getSelectedEffectFieldsBySequenceKey, getSelectedOutlineRotationCornerInfo, getSelectedOutlineRotationDeltaDegrees, getSelectedOutlineRotationPivot, getSelectedSequenceKeys, } from './selected-outline-measurement';
+export { getOutlineSelectionInteraction, getSelectedCropInfo, getSelectedEffectFieldsBySequenceKey, getSelectedOutlineRotationCornerInfo, getSelectedOutlineRotationDeltaDegrees, getSelectedOutlineRotationPivot, getSelectedSequenceKeys, getSequencesWithSelectableOutlines, getTransformedSvgViewportPoints, } from './selected-outline-measurement';
 export { selectedOutlineDragThresholdPx } from './selected-outline-types';
 export type { SelectedOutlineDragState, SelectedOutlineRotationDragState, SelectedOutlineScaleDragState, } from './selected-outline-types';
 type SelectedOutlineOverlayProps = {

package/dist/components/SelectedOutlineOverlay.js

@@ -33,9 +33,8 @@ var __importStar = (this && this.__importStar) || (function () {
     };
 })();
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.SelectedOutlineOverlay = exports.selectedOutlineDragThresholdPx = exports.getSelectedSequenceKeys = exports.getSelectedOutlineRotationPivot = exports.getSelectedOutlineRotationDeltaDegrees = exports.getSelectedOutlineRotationCornerInfo = exports.getSelectedEffectFieldsBySequenceKey = exports.getSelectedCropInfo = exports.getOutlineSelectionInteraction = exports.snapSelectedOutlineUv = exports.snapSelectedOutlineTransformOriginUv = exports.snapSelectedOutlineRotationDeltaDegrees = exports.selectedOutlineUvSnapThresholdPx = exports.selectedOutlineTransformOriginSnapThresholdPx = exports.isSelectedOutlineDragPastThreshold = exports.getSelectedOutlineTransformOriginLockedAxis = exports.getSelectedOutlineTransformOriginDragChanges = exports.getSelectedOutlineScaleEdgeInfo = exports.getSelectedOutlineScaleDragValues = exports.getSelectedOutlineScaleDragStates = exports.getSelectedOutlineScaleDragChanges = exports.getSelectedOutlineRotationDragValues = exports.getSelectedOutlineRotationDragStates = exports.getSelectedOutlineRotationDragChanges = exports.getSelectedOutlineKeyboardNudgeDeltas = exports.getSelectedOutlineKeyboardNudgeDelta = exports.getSelectedOutlineDragValues = exports.getSelectedOutlineDragChanges = exports.getSelectedOutlineCropFollowingTransformOrigin = exports.getSelectedOutlineCropDragValues = exports.getSelectedOutlineCropDragChanges = exports.getSelectedOutlineActiveSchema = exports.getSelectedOutline3DRotationDragValues = exports.compensateTranslateForTransformOrigin = exports.applySelectedOutlineTransformOriginAxisLock = exports.applySelectedOutlineDragAxisLock = void 0;
+exports.SelectedOutlineOverlay = exports.selectedOutlineDragThresholdPx = exports.getTransformedSvgViewportPoints = exports.getSequencesWithSelectableOutlines = exports.getSelectedSequenceKeys = exports.getSelectedOutlineRotationPivot = exports.getSelectedOutlineRotationDeltaDegrees = exports.getSelectedOutlineRotationCornerInfo = exports.getSelectedEffectFieldsBySequenceKey = exports.getSelectedCropInfo = exports.getOutlineSelectionInteraction = exports.snapSelectedOutlineUv = exports.snapSelectedOutlineTransformOriginUv = exports.snapSelectedOutlineRotationDeltaDegrees = exports.selectedOutlineUvSnapThresholdPx = exports.selectedOutlineTransformOriginSnapThresholdPx = exports.isSelectedOutlineDragPastThreshold = exports.getSelectedOutlineTransformOriginLockedAxis = exports.getSelectedOutlineTransformOriginDragChanges = exports.getSelectedOutlineScaleEdgeInfo = exports.getSelectedOutlineScaleDragValues = exports.getSelectedOutlineScaleDragStates = exports.getSelectedOutlineScaleDragChanges = exports.getSelectedOutlineRotationDragValues = exports.getSelectedOutlineRotationDragStates = exports.getSelectedOutlineRotationDragChanges = exports.getSelectedOutlineKeyboardNudgeDeltas = exports.getSelectedOutlineKeyboardNudgeDelta = exports.getSelectedOutlineDragValues = exports.getSelectedOutlineDragChanges = exports.getSelectedOutlineCropFollowingTransformOrigin = exports.getSelectedOutlineCropDragValues = exports.getSelectedOutlineCropDragChanges = exports.getSelectedOutlineActiveSchema = exports.getSelectedOutline3DRotationDragValues = exports.compensateTranslateForTransformOrigin = exports.applySelectedOutlineTransformOriginAxisLock = exports.applySelectedOutlineDragAxisLock = exports.orderOutlinesForRendering = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const canvas_1 = require("@remotion/canvas");
 const player_1 = require("@remotion/player");
 const react_1 = __importStar(require("react"));
 const remotion_1 = require("remotion");
@@ -51,6 +50,8 @@ const timeline_sequence_hover_1 = require("../state/timeline-sequence-hover");
 const transform_3d_mode_1 = require("../state/transform-3d-mode");
 const selected_outline_drag_1 = require("./selected-outline-drag");
 const selected_outline_measurement_1 = require("./selected-outline-measurement");
+const selected_outline_order_1 = require("./selected-outline-order");
+Object.defineProperty(exports, "orderOutlinesForRendering", { enumerable: true, get: function () { return selected_outline_order_1.orderOutlinesForRendering; } });
 const selected_outline_types_1 = require("./selected-outline-types");
 const SelectedOutlineKeyboardControls_1 = require("./SelectedOutlineKeyboardControls");
 const SelectedOutlineRenderer_1 = require("./SelectedOutlineRenderer");
@@ -93,6 +94,8 @@ Object.defineProperty(exports, "getSelectedOutlineRotationCornerInfo", { enumera
 Object.defineProperty(exports, "getSelectedOutlineRotationDeltaDegrees", { enumerable: true, get: function () { return selected_outline_measurement_2.getSelectedOutlineRotationDeltaDegrees; } });
 Object.defineProperty(exports, "getSelectedOutlineRotationPivot", { enumerable: true, get: function () { return selected_outline_measurement_2.getSelectedOutlineRotationPivot; } });
 Object.defineProperty(exports, "getSelectedSequenceKeys", { enumerable: true, get: function () { return selected_outline_measurement_2.getSelectedSequenceKeys; } });
+Object.defineProperty(exports, "getSequencesWithSelectableOutlines", { enumerable: true, get: function () { return selected_outline_measurement_2.getSequencesWithSelectableOutlines; } });
+Object.defineProperty(exports, "getTransformedSvgViewportPoints", { enumerable: true, get: function () { return selected_outline_measurement_2.getTransformedSvgViewportPoints; } });
 const selected_outline_types_2 = require("./selected-outline-types");
 Object.defineProperty(exports, "selectedOutlineDragThresholdPx", { enumerable: true, get: function () { return selected_outline_types_2.selectedOutlineDragThresholdPx; } });
 const getEffectiveCropValue = ({ activeSchema, dragOverrides, fieldKey, frame, propStatuses, runtimeValues, }) => {
@@ -260,7 +263,6 @@ const calculateOutlineTargets = ({ connectedClientId, editorShowOutlines, getDra
             key,
             containsSelection,
             crop,
-            includeOutsideContainer: showSelectedOutline,
             keyframeDisplayOffset: nodeKeyframeDisplayOffset,
             nodePathInfo,
             ref: sequence.refForOutline,
@@ -531,30 +533,21 @@ const ActiveSelectedOutlineOverlayUnmemoized = ({ calculateOutlineTargetsForCurr
         controls.runtimeValues,
         outlineRuntimeSnapshots[index],
     ])), [outlineRuntimeControls, outlineRuntimeSnapshots]);
-    const outlineTargets = (0, react_1.useMemo)(() => {
-        const targets = calculateOutlineTargetsForCurrentState({
-            mode: 'layout',
-            runtimeValuesByStore: outlineRuntimeValuesByStore,
-            selectableOutlines: selectableOutlinesForLayout,
-            targetKey: null,
-            targetTimelinePosition: timelinePosition,
-        });
-        return targets.map((target) => {
-            const hovered = (0, timeline_node_path_key_1.timelineSequenceNodePathToKey)(target.nodePathInfo.sequenceSubscriptionKey) === hoveredTimelineNodePathKey;
-            return hovered && !target.includeOutsideContainer
-                ? { ...target, includeOutsideContainer: true }
-                : target;
-        });
-    }, [
+    const outlineTargets = (0, react_1.useMemo)(() => calculateOutlineTargetsForCurrentState({
+        mode: 'layout',
+        runtimeValuesByStore: outlineRuntimeValuesByStore,
+        selectableOutlines: selectableOutlinesForLayout,
+        targetKey: null,
+        targetTimelinePosition: timelinePosition,
+    }), [
         calculateOutlineTargetsForCurrentState,
-        hoveredTimelineNodePathKey,
         outlineRuntimeValuesByStore,
         selectableOutlinesForLayout,
         timelinePosition,
     ]);
     (0, react_1.useLayoutEffect)(() => {
         updateOutlinesRef.current();
-    }, [outlineTargets, scale, translationX, translationY]);
+    }, [scale, translationX, translationY]);
     return (jsx_runtime_1.jsx(SelectedOutlineRenderer_1.SelectedOutlineRenderer, { compositionHeight: compositionHeight, compositionWidth: compositionWidth, dragging: draggingOutline, getLatestOutlineTargetByKey: getLatestOutlineTargetByKey, outlineTargets: outlineTargets, onDraggingChange: onDraggingChange, onContextMenuOpenChange: onContextMenuOpenChange, onSelect: onSelect, scale: scale, sequences: sequences, updateOutlinesRef: updateOutlinesRef }));
 };
 const ActiveSelectedOutlineOverlay = react_1.default.memo(ActiveSelectedOutlineOverlayUnmemoized);
@@ -589,7 +582,7 @@ const SelectedOutlineOverlayUnmemoized = ({ canvasHovered, compositionHeight, co
             !editorShowOutlines) {
             return [];
         }
-        return (0, canvas_1.getCanvasSelectableOutlines)({
+        return (0, selected_outline_measurement_1.getSequencesWithSelectableOutlines)({
             sequences,
             overrideIdsToNodePaths: overrideIdToNodePathMappings,
             compositions,
@@ -638,13 +631,11 @@ const SelectedOutlineOverlayUnmemoized = ({ canvasHovered, compositionHeight, co
         selectedTransformOriginInfo,
         sequenceKeysContainingSelection,
     ]);
-    const calculateOutlineTargetsRef = (0, react_1.useRef)(calculateOutlineTargetsForCurrentState);
     const getSelectableOutlinesRef = (0, react_1.useRef)(getSelectableOutlines);
     const selectableOutlinesCacheRef = (0, react_1.useRef)(null);
     (0, react_1.useLayoutEffect)(() => {
-        calculateOutlineTargetsRef.current = calculateOutlineTargetsForCurrentState;
         getSelectableOutlinesRef.current = getSelectableOutlines;
-    }, [calculateOutlineTargetsForCurrentState, getSelectableOutlines]);
+    }, [getSelectableOutlines]);
     const getSelectableOutlinesAtFrame = (0, react_1.useCallback)((timelinePosition) => {
         const currentGetSelectableOutlines = getSelectableOutlinesRef.current;
         const cached = selectableOutlinesCacheRef.current;
@@ -662,7 +653,7 @@ const SelectedOutlineOverlayUnmemoized = ({ canvasHovered, compositionHeight, co
     }, []);
     const getLatestOutlineTargetByKey = (0, react_1.useCallback)((key) => {
         const timelinePosition = getCurrentFrame();
-        const target = calculateOutlineTargetsRef.current({
+        const target = calculateOutlineTargetsForCurrentState({
             mode: 'controls',
             runtimeValuesByStore: new Map(),
             selectableOutlines: getSelectableOutlinesAtFrame(timelinePosition),
@@ -670,7 +661,11 @@ const SelectedOutlineOverlayUnmemoized = ({ canvasHovered, compositionHeight, co
             targetTimelinePosition: timelinePosition,
         })[0];
         return target;
-    }, [getCurrentFrame, getSelectableOutlinesAtFrame]);
+    }, [
+        calculateOutlineTargetsForCurrentState,
+        getCurrentFrame,
+        getSelectableOutlinesAtFrame,
+    ]);
     const getCurrentSelectableOutlines = (0, react_1.useCallback)(() => getSelectableOutlinesAtFrame(getCurrentFrame()), [getCurrentFrame, getSelectableOutlinesAtFrame]);
     const onDraggingChange = (0, react_1.useCallback)((dragging) => {
         setDraggingOutline(dragging);

package/dist/components/SelectedOutlinePolygon.d.ts

@@ -23,4 +23,5 @@ export declare const SelectedOutlinePolygon: React.NamedExoticComponent<{
     readonly onDoubleClickTarget: (target: SelectedOutlineTarget, button: number, sequenceWasDragged: boolean) => boolean;
     readonly scale: number;
     readonly showSelectedOutline: boolean;
+    readonly translateWithCommandKey: boolean;
 }>;

package/dist/components/SelectedOutlinePolygon.js

@@ -41,6 +41,7 @@ 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 is_mac_1 = require("../helpers/is-mac");
 const pointer_session_1 = require("../helpers/pointer-session");
 const editor_guides_1 = require("../state/editor-guides");
 const editor_snapping_1 = require("../state/editor-snapping");
@@ -57,7 +58,7 @@ 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");
 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 SelectedOutlinePolygonUnmemoized = ({ compositionHeight, compositionWidth, containsSelection, directlySelected, dragging, getAllDragOutlines, getAllDragTargets, getLayoutTarget, getTarget, hasTarget, hovered, outline, onDraggingChange, onHoverChange, onSnapPointsChange, onSelect, onDoubleClickTarget, scale, showSelectedOutline, translateWithCommandKey, }) => {
     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);
@@ -95,7 +96,12 @@ const SelectedOutlinePolygonUnmemoized = ({ compositionHeight, compositionWidth,
         const { drag, selected } = target;
         event.preventDefault();
         event.stopPropagation();
-        const interaction = (0, selected_outline_measurement_1.getOutlineSelectionInteraction)(event);
+        const temporaryTranslate = translateWithCommandKey &&
+            (selected || containsSelection) &&
+            (is_mac_1.isMac ? event.metaKey : event.ctrlKey);
+        const interaction = temporaryTranslate
+            ? { shiftKey: false, toggleKey: false }
+            : (0, selected_outline_measurement_1.getOutlineSelectionInteraction)(event);
         const shouldUpdateSelection = !selected || interaction.shiftKey || interaction.toggleKey;
         const ownerSvg = (_a = polygonRef.current) === null || _a === void 0 ? void 0 : _a.ownerSVGElement;
         let pointerInsideSelectedOutline = false;
@@ -159,7 +165,7 @@ const SelectedOutlinePolygonUnmemoized = ({ compositionHeight, compositionWidth,
         let currentPointerY = startPointerY;
         let axisLocked = false;
         let dragStarted = false;
-        let snappingDisabled = event.metaKey || event.ctrlKey;
+        let snappingDisabled = !temporaryTranslate && (event.metaKey || event.ctrlKey);
         let snapTargets = null;
         const updateDragOverrides = () => {
             const screenDeltaX = currentPointerX - startPointerX;
@@ -241,7 +247,8 @@ const SelectedOutlinePolygonUnmemoized = ({ compositionHeight, compositionWidth,
             currentPointerX = moveEvent.clientX;
             currentPointerY = moveEvent.clientY;
             axisLocked = moveEvent.shiftKey;
-            snappingDisabled = moveEvent.metaKey || moveEvent.ctrlKey;
+            snappingDisabled =
+                !temporaryTranslate && (moveEvent.metaKey || moveEvent.ctrlKey);
             updateDragOverrides();
         };
         const onKeyChange = (keyEvent) => {
@@ -336,6 +343,7 @@ const SelectedOutlinePolygonUnmemoized = ({ compositionHeight, compositionWidth,
         scale,
         setPropStatuses,
         setDragOverrides,
+        translateWithCommandKey,
     ]);
     const onDoubleClick = react_1.default.useCallback((event) => {
         const target = getTarget();

package/dist/components/SelectedOutlineRenderer.js

@@ -35,11 +35,12 @@ 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 SelectedOutlinePolygon_1 = require("./SelectedOutlinePolygon");
@@ -54,9 +55,14 @@ const outlineContainer = {
 };
 const SelectedOutlineRendererUnmemoized = ({ compositionHeight, compositionWidth, dragging, getLatestOutlineTargetByKey, outlineTargets, onDraggingChange, onContextMenuOpenChange, onSelect, scale, sequences, updateOutlinesRef, }) => {
     var _a;
-    const outlinesController = (0, canvas_1.useCanvasOutlinesController)();
-    const renderState = (0, canvas_1.useCanvasOutlines)(outlinesController);
+    // 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 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) {
@@ -83,9 +89,23 @@ const SelectedOutlineRendererUnmemoized = ({ compositionHeight, compositionWidth
     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)(() => {
-        outlinesController.update(overlayRef.current, outlineTargets);
-    }, [outlineTargets, outlinesController]);
+        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();
@@ -96,32 +116,79 @@ const SelectedOutlineRendererUnmemoized = ({ compositionHeight, compositionWidth
         };
     }, [updateOutlines, updateOutlinesRef]);
     (0, react_1.useLayoutEffect)(() => {
-        return () => outlinesController.disconnect();
-    }, [outlinesController]);
+        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(renderState.targets.map((target) => [target.key, target]));
-    }, [renderState.targets]);
+        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' &&
-            !renderState.targets.some((target) => target.key === hoveredSequence.key)) {
+            !outlineTargets.some((target) => target.key === hoveredSequence.key)) {
             setHoveredSequence((currentHover) => (currentHover === null || currentHover === void 0 ? void 0 : currentHover.source) === 'canvas' ? null : currentHover);
         }
-    }, [hoveredSequence, renderState.targets, setHoveredSequence]);
+    }, [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, canvas_1.orderCanvasOutlinesForRendering)({
-                outlines: renderState.outlines,
+            const orderedOutlines = (0, selected_outline_order_1.orderOutlinesForRendering)({
+                outlines,
                 sequences,
                 targetsByKey,
             });
             outlineRenderingOrderRef.current = orderedOutlines.map((outline) => outline.key);
             return orderedOutlines;
         }
-        const currentOutlinesByKey = new Map(renderState.outlines.map((outline) => [outline.key, outline]));
+        const currentOutlinesByKey = new Map(outlines.map((outline) => [outline.key, outline]));
         const frozenKeys = new Set(outlineRenderingOrderRef.current);
-        const newOutlines = renderState.outlines.filter((outline) => !frozenKeys.has(outline.key));
+        const newOutlines = outlines.filter((outline) => !frozenKeys.has(outline.key));
         outlineRenderingOrderRef.current = [
             ...outlineRenderingOrderRef.current,
             ...newOutlines.map((outline) => outline.key),
@@ -130,10 +197,10 @@ const SelectedOutlineRendererUnmemoized = ({ compositionHeight, compositionWidth
             const outline = currentOutlinesByKey.get(key);
             return outline === undefined ? [] : [outline];
         });
-    }, [dragging, renderState.outlines, sequences, targetsByKey]);
+    }, [dragging, outlines, sequences, targetsByKey]);
     const outlinesByKey = (0, react_1.useMemo)(() => {
-        return new Map(renderState.outlines.map((outline) => [outline.key, outline]));
-    }, [renderState.outlines]);
+        return new Map(outlines.map((outline) => [outline.key, outline]));
+    }, [outlines]);
     const { outlinesForEditingHandles, outlinesForTransformOrigin, outlinesForUvHandles, } = (0, react_1.useMemo)(() => {
         const editingHandles = [];
         const transformOrigin = [];
@@ -159,12 +226,12 @@ const SelectedOutlineRendererUnmemoized = ({ compositionHeight, compositionWidth
             outlinesForUvHandles: uvHandles,
         };
     }, [hoveredNodePathKey, outlinesForRendering, targetsByKey]);
-    const targetsRef = (0, react_1.useRef)(renderState.targets);
+    const targetsRef = (0, react_1.useRef)(outlineTargets);
     const outlinesByKeyRef = (0, react_1.useRef)(outlinesByKey);
     (0, react_1.useLayoutEffect)(() => {
-        targetsRef.current = renderState.targets;
+        targetsRef.current = outlineTargets;
         outlinesByKeyRef.current = outlinesByKey;
-    }, [outlinesByKey, renderState.targets]);
+    }, [outlineTargets, outlinesByKey]);
     const getAllDragTargets = (0, react_1.useCallback)(() => targetsRef.current.flatMap((target) => {
         var _a;
         var _b;

package/dist/components/SettingsContext.js

@@ -6,6 +6,7 @@ const react_1 = require("react");
 const browser_studio_operations_1 = require("../helpers/browser-studio-operations");
 const client_id_1 = require("../helpers/client-id");
 const call_api_1 = require("./call-api");
+const UpdateStatusContext_1 = require("./UpdateStatusContext");
 const SettingsContext = (0, react_1.createContext)(null);
 const SettingsProvider = ({ children }) => {
     var _a;
@@ -110,7 +111,7 @@ const SettingsProvider = ({ children }) => {
     const value = (0, react_1.useMemo)(() => {
         return { ...settings, setPublicLicenseKey };
     }, [setPublicLicenseKey, settings]);
-    return (jsx_runtime_1.jsx(SettingsContext.Provider, { value: value, children: children }));
+    return (jsx_runtime_1.jsx(SettingsContext.Provider, { value: value, children: jsx_runtime_1.jsx(UpdateStatusContext_1.UpdateStatusProvider, { children: children }) }));
 };
 exports.SettingsProvider = SettingsProvider;
 const useSettings = () => {

package/dist/components/SettingsModal.d.ts

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

package/dist/components/SettingsModal.js

@@ -4,7 +4,10 @@ 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 can_show_updates_1 = require("../helpers/can-show-updates");
+const client_id_1 = require("../helpers/client-id");
 const apps_1 = require("../icons/apps");
+const cloud_download_1 = require("../icons/cloud-download");
 const keyboard_1 = require("../icons/keyboard");
 const license_1 = require("../icons/license");
 const package_1 = require("../icons/package");
@@ -26,6 +29,7 @@ const SettingsModalFooter_1 = require("./SettingsModalFooter");
 const SkillsSettings_1 = require("./SkillsSettings");
 const StudioSettings_1 = require("./StudioSettings");
 const vertical_1 = require("./Tabs/vertical");
+const UpdatesSettings_1 = require("./UpdatesSettings");
 const hiddenPanel = {
     display: 'none',
 };
@@ -58,13 +62,20 @@ const keyboardIcon = {
 const SettingsModal = ({ initialPublicLicenseKey, initialTab }) => {
     const { setSelectedModal } = (0, react_1.useContext)(modals_1.SetSelectedModalContext);
     const { setPublicLicenseKey } = (0, SettingsContext_1.useSettings)();
+    const { previewServerState } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
     const isBrowserStudio = (0, browser_studio_operations_1.getBrowserStudioOperations)() !== null;
+    const showUpdates = (0, can_show_updates_1.canShowUpdates)({
+        connectionStatus: previewServerState.type,
+        isBrowserStudio,
+        readOnlyStudio: window.remotion_isReadOnlyStudio,
+    });
     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 safeInitialTab = initialTab === 'updates' && !showUpdates ? 'shortcuts' : initialTab;
+    const [tab, setTab] = (0, react_1.useState)(safeInitialTab);
+    const [openedTabs, setOpenedTabs] = (0, react_1.useState)([safeInitialTab]);
     const [packagesFooterContainer, setPackagesFooterContainer] = (0, react_1.useState)(null);
     const dismiss = (0, react_1.useCallback)(() => {
         setSelectedModal(null);
@@ -78,11 +89,16 @@ const SettingsModal = ({ initialPublicLicenseKey, initialTab }) => {
             return [...currentOpenedTabs, newTab];
         });
     }, []);
+    (0, react_1.useLayoutEffect)(() => {
+        if (!showUpdates && tab === 'updates') {
+            selectTab('shortcuts');
+        }
+    }, [selectTab, showUpdates, tab]);
     (0, react_1.useEffect)(() => {
         setPublicLicenseKey(initialPublicLicenseKey);
     }, [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: [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, { showLicenseFaq: tab === 'license' }))] }) }));
+                        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" })), showUpdates ? (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] }), 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, showUpdates && 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 })) : isBrowserStudio || tab === 'updates' ? null : (jsx_runtime_1.jsx(SettingsModalFooter_1.SettingsModalFooter, { showLicenseFaq: tab === 'license' }))] }) }));
 };
 exports.SettingsModal = SettingsModal;

package/dist/components/SidebarRenderButton.d.ts

@@ -3,4 +3,5 @@ import type { _InternalTypes } from 'remotion';
 export declare const SidebarRenderButton: React.FC<{
     readonly composition: _InternalTypes['AnyCompMetadata'];
     readonly visible: boolean;
+    readonly readOnlyStudio: boolean;
 }>;