@remotion/studio 4.0.517 → 4.0.519

package/dist/components/QuickSwitcher/ExplorerQuickSwitcherTrigger.js

@@ -5,32 +5,47 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const ShortcutHint_1 = require("../../error-overlay/remotion-overlay/ShortcutHint");
 const colors_1 = require("../../helpers/colors");
+const hoverable_1 = require("../../helpers/hoverable");
 const use_keybinding_1 = require("../../helpers/use-keybinding");
+const ellipsis_1 = require("../../icons/ellipsis");
 const modals_1 = require("../../state/modals");
+const InlineDropdown_1 = require("../InlineDropdown");
 const quickSwitcherArea = {
     padding: '4px 4px 4px 8px',
     borderBottom: `1px solid ${colors_1.BLACK_HEX}`,
-    overflowY: 'auto',
+    display: 'flex',
+    alignItems: 'center',
+    gap: 4,
 };
 const quickSwitcherTrigger = {
-    backgroundColor: colors_1.WHITE_ALPHA_06,
     borderRadius: 4,
     padding: '4px 10px 4px 12px',
-    color: colors_1.LIGHT_TEXT,
     fontSize: 12,
-    cursor: 'pointer',
+    cursor: 'default',
     display: 'flex',
     alignItems: 'center',
     justifyContent: 'space-between',
     border: 'none',
-    width: '100%',
+    flex: 1,
     appearance: 'none',
+    userSelect: 'none',
+    ...(0, hoverable_1.hoverableStyle)({
+        idleBackground: colors_1.WHITE_ALPHA_06,
+        hoverBackground: colors_1.WHITE_ALPHA_06,
+        idleColor: colors_1.LIGHT_TEXT,
+        hoverColor: colors_1.WHITE,
+    }),
+};
+const ellipsisSvgProps = {
+    style: {
+        height: 12,
+    },
 };
 const shortcutLabel = {
     fontSize: 11,
     opacity: 0.6,
 };
-const ExplorerQuickSwitcherTrigger = ({ mode, showShortcut, tabIndex }) => {
+const ExplorerQuickSwitcherTrigger = ({ mode, showShortcut, tabIndex, getActions }) => {
     const { setSelectedModal } = (0, react_1.useContext)(modals_1.SetSelectedModalContext);
     const openQuickSwitcher = (0, react_1.useCallback)(() => {
         setSelectedModal({
@@ -41,6 +56,12 @@ const ExplorerQuickSwitcherTrigger = ({ mode, showShortcut, tabIndex }) => {
             compositionSelection: null,
         });
     }, [mode, setSelectedModal]);
-    return (jsx_runtime_1.jsx("div", { style: quickSwitcherArea, className: "__remotion-vertical-scrollbar", children: jsx_runtime_1.jsxs("button", { type: "button", style: quickSwitcherTrigger, onClick: openQuickSwitcher, tabIndex: tabIndex, children: ["Search...", showShortcut && !(0, use_keybinding_1.areKeyboardShortcutsDisabled)() ? (jsx_runtime_1.jsxs("span", { style: shortcutLabel, children: [ShortcutHint_1.cmdOrCtrlCharacter, "+K"] })) : null] }) }));
+    const renderMoreActions = (0, react_1.useCallback)((color) => {
+        return jsx_runtime_1.jsx(ellipsis_1.EllipsisIcon, { svgProps: ellipsisSvgProps, fill: color });
+    }, []);
+    const moreActionsTitle = mode === 'assets' ? 'More asset actions' : 'More composition actions';
+    return (jsx_runtime_1.jsxs("div", { style: quickSwitcherArea, children: [
+            jsx_runtime_1.jsxs("button", { type: "button", style: quickSwitcherTrigger, onClick: openQuickSwitcher, tabIndex: tabIndex, className: `${hoverable_1.HOVERABLE_CLASS_NAME} ${hoverable_1.FOCUS_VISIBLE_ONLY_CLASS_NAME}`, children: ["Search...", showShortcut && !(0, use_keybinding_1.areKeyboardShortcutsDisabled)() ? (jsx_runtime_1.jsxs("span", { style: shortcutLabel, children: [ShortcutHint_1.cmdOrCtrlCharacter, "+K"] })) : null] }), jsx_runtime_1.jsx(InlineDropdown_1.InlineDropdown, { variant: null, title: moreActionsTitle, renderAction: renderMoreActions, getItems: getActions, className: hoverable_1.FOCUS_VISIBLE_ONLY_CLASS_NAME })
+        ] }));
 };
 exports.ExplorerQuickSwitcherTrigger = ExplorerQuickSwitcherTrigger;

package/dist/components/QuickSwitcher/QuickSwitcherContent.js

@@ -27,6 +27,10 @@ const input = {
     width: '100%',
     borderRadius: 4,
 };
+const touchscreenInput = {
+    ...input,
+    fontSize: 16,
+};
 const modeSelector = {
     paddingLeft: 16,
     paddingRight: 16,
@@ -42,6 +46,7 @@ const modeItem = {
     padding: 0,
     fontSize: 13,
     cursor: 'pointer',
+    userSelect: 'none',
 };
 const modeInactive = {
     ...modeItem,
@@ -126,6 +131,7 @@ const QuickSwitcherContent = ({ initialMode, invocationTimestamp, readOnlyStudio
         });
     }, [assetSelection, compositionSelection, initialMode, invocationTimestamp]);
     const inputRef = (0, react_1.useRef)(null);
+    const isTouchscreen = navigator.maxTouchPoints > 0;
     const selectComposition = (0, InitialCompositionLoader_1.useSelectComposition)();
     const selectAsset = (0, use_select_asset_1.useSelectAsset)();
     const closeMenu = (0, react_1.useCallback)(() => undefined, []);
@@ -314,39 +320,41 @@ const QuickSwitcherContent = ({ initialMode, invocationTimestamp, readOnlyStudio
         setState({ query: e.target.value, selectedIndex: 0 });
     }, []);
     const selectedIndexRounded = (0, shared_1.loopIndex)(state.selectedIndex, resultsArray.length);
-    const onActionsSelected = (0, react_1.useCallback)(() => {
+    const focusInput = (0, react_1.useCallback)(() => {
         var _a;
+        if (!isTouchscreen) {
+            (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+        }
+    }, [isTouchscreen]);
+    const onActionsSelected = (0, react_1.useCallback)(() => {
         setState((s) => ({
             query: `> ${stripQuery(s.query)}`,
             selectedIndex: 0,
         }));
-        (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
-    }, []);
+        focusInput();
+    }, [focusInput]);
     const onCompositionsSelected = (0, react_1.useCallback)(() => {
-        var _a;
         setState((s) => ({
             query: stripQuery(s.query),
             selectedIndex: 0,
         }));
-        (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
-    }, []);
+        focusInput();
+    }, [focusInput]);
     const onAssetsSelected = (0, react_1.useCallback)(() => {
-        var _a;
         setState((s) => ({
             query: `$ ${stripQuery(s.query)}`,
             selectedIndex: 0,
         }));
-        (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
-    }, []);
+        focusInput();
+    }, [focusInput]);
     const onDocSearchSelected = (0, react_1.useCallback)(() => {
-        var _a;
         setState((s) => ({
             query: `? ${stripQuery(s.query)}`,
             selectedIndex: 0,
         }));
         setDocResults({ type: 'initial' });
-        (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
-    }, []);
+        focusInput();
+    }, [focusInput]);
     const showSearchLoadingState = mode === 'docs' && docResults.type === 'loading';
     const showEmptyDocSearch = mode === 'docs' && actualQuery.trim() === '';
     const placeholder = mode === 'assets'
@@ -360,7 +368,7 @@ const QuickSwitcherContent = ({ initialMode, invocationTimestamp, readOnlyStudio
                     jsx_runtime_1.jsx("button", { onClick: onCompositionsSelected, style: mode === 'compositions' ? modeActive : modeInactive, type: "button", children: "Compositions" }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 1 }), jsx_runtime_1.jsx("button", { onClick: onAssetsSelected, style: mode === 'assets' ? modeActive : modeInactive, type: "button", children: "Assets" }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 1 }), jsx_runtime_1.jsx("button", { onClick: onActionsSelected, style: mode === 'commands' ? modeActive : modeInactive, type: "button", children: "Actions" }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 1 }), jsx_runtime_1.jsx("button", { onClick: onDocSearchSelected, style: mode === 'docs' ? modeActive : modeInactive, type: "button", children: "Documentation" })
                 ] })), jsx_runtime_1.jsx("div", { style: assetSelection === null && compositionSelection === null
                     ? content
-                    : contentWithoutModeSelector, children: jsx_runtime_1.jsx(RemInput_1.RemotionInput, { ref: inputRef, type: "text", style: input, autoFocus: true, status: "ok", value: state.query, onChange: onTextChange, placeholder: placeholder, rightAlign: false }) }), jsx_runtime_1.jsx("div", { style: results, className: is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME, children: showEmptyDocSearch ||
+                    : contentWithoutModeSelector, children: jsx_runtime_1.jsx(RemInput_1.RemotionInput, { ref: inputRef, type: "text", style: isTouchscreen ? touchscreenInput : input, autoFocus: !isTouchscreen, status: "ok", value: state.query, onChange: onTextChange, placeholder: placeholder, rightAlign: false }) }), jsx_runtime_1.jsx("div", { style: results, className: is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME, children: showEmptyDocSearch ||
                     showSearchLoadingState ? null : resultsArray.length === 0 ? (jsx_runtime_1.jsx(NoResults_1.QuickSwitcherNoResults, { mode: mode, query: actualQuery })) : (resultsArray.map((result, i) => {
                     return (jsx_runtime_1.jsx(QuickSwitcherResult_1.QuickSwitcherResult, { selected: selectedIndexRounded === i, result: result }, result.id));
                 })) })

package/dist/components/RenderQueue/actions.d.ts

@@ -109,6 +109,7 @@ export declare const applyCodemod: ({ codemod, dryRun, symbolicatedStack, signal
 export declare const removeRenderJob: (job: RenderJob) => Promise<undefined>;
 export declare const cancelRenderJob: (job: RenderJob) => Promise<import("@remotion/studio-shared").CancelRenderResponse>;
 export declare const updateAvailable: (signal: AbortSignal) => Promise<import("@remotion/studio-shared").UpdateAvailableResponse>;
+export declare const getReleaseNotes: (currentVersion: string, latestVersion: string, signal: AbortSignal) => Promise<import("@remotion/studio-shared").GetReleaseNotesResponse>;
 export declare const getProjectInfo: (signal: AbortSignal) => Promise<import("@remotion/studio-shared").ProjectInfoResponse>;
 export declare const callUpdateDefaultPropsApi: (compositionId: string, defaultProps: Record<string, unknown>, enumPaths: EnumPath[]) => Promise<import("@remotion/studio-shared").UpdateDefaultPropsResponse>;
 export declare const applyVisualControlChange: ({ fileName, changes, }: {

package/dist/components/RenderQueue/actions.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.applyVisualControlChange = exports.callUpdateDefaultPropsApi = exports.getProjectInfo = exports.updateAvailable = exports.cancelRenderJob = exports.removeRenderJob = exports.applyCodemod = exports.openInFileExplorer = exports.subscribeToFileExistenceWatcher = exports.unsubscribeFromFileExistenceWatcher = exports.addVideoRenderJob = exports.addSequenceRenderJob = exports.addStillRenderJob = void 0;
+exports.applyVisualControlChange = exports.callUpdateDefaultPropsApi = exports.getProjectInfo = exports.getReleaseNotes = exports.updateAvailable = exports.cancelRenderJob = exports.removeRenderJob = exports.applyCodemod = exports.openInFileExplorer = exports.subscribeToFileExistenceWatcher = exports.unsubscribeFromFileExistenceWatcher = exports.addVideoRenderJob = exports.addSequenceRenderJob = exports.addStillRenderJob = void 0;
 const no_react_1 = require("remotion/no-react");
 const browser_studio_operations_1 = require("../../helpers/browser-studio-operations");
 const call_api_1 = require("../call-api");
@@ -166,6 +166,10 @@ const updateAvailable = (signal) => {
     return (0, call_api_1.callApi)('/api/update-available', {}, signal);
 };
 exports.updateAvailable = updateAvailable;
+const getReleaseNotes = (currentVersion, latestVersion, signal) => {
+    return (0, call_api_1.callApi)('/api/release-notes', { currentVersion, latestVersion }, signal);
+};
+exports.getReleaseNotes = getReleaseNotes;
 const getProjectInfo = (signal) => {
     return (0, call_api_1.callApi)('/api/project-info', {}, signal);
 };

package/dist/components/SelectedOutlineCanvasRotation.js

@@ -38,6 +38,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = __importStar(require("react"));
 const remotion_1 = require("remotion");
 const colors_1 = require("../helpers/colors");
+const is_mac_1 = require("../helpers/is-mac");
 const pointer_session_1 = require("../helpers/pointer-session");
 const editor_snapping_1 = require("../state/editor-snapping");
 const canvas_rotation_cursor_1 = require("./canvas-rotation-cursor");
@@ -57,9 +58,34 @@ const SelectedOutlineCanvasRotation = ({ getLatestTargetByKey, layoutTarget, onD
     const { getDragOverrides } = (0, react_1.useContext)(remotion_1.Internals.VisualModeDragOverridesContext);
     const { setPropStatuses, setDragOverrides, clearDragOverrides } = (0, react_1.useContext)(remotion_1.Internals.VisualModeSettersContext);
     const { editorSnapping } = (0, react_1.useContext)(editor_snapping_1.EditorSnappingContext);
+    const [commandKeyPressed, setCommandKeyPressed] = react_1.default.useState(false);
     const cursor = transform3DMode
         ? canvas_rotation_cursor_1.canvasRotationCursor
         : canvas2DRotationCursor;
+    react_1.default.useEffect(() => {
+        const commandKey = is_mac_1.isMac ? 'Meta' : 'Control';
+        const onKeyDown = (event) => {
+            if (event.key === commandKey) {
+                setCommandKeyPressed(true);
+            }
+        };
+        const onKeyUp = (event) => {
+            if (event.key === commandKey) {
+                setCommandKeyPressed(false);
+            }
+        };
+        const onBlur = () => {
+            setCommandKeyPressed(false);
+        };
+        window.addEventListener('keydown', onKeyDown);
+        window.addEventListener('keyup', onKeyUp);
+        window.addEventListener('blur', onBlur);
+        return () => {
+            window.removeEventListener('keydown', onKeyDown);
+            window.removeEventListener('keyup', onKeyUp);
+            window.removeEventListener('blur', onBlur);
+        };
+    }, []);
     const onPointerDown = react_1.default.useCallback((event) => {
         var _a, _b;
         if (event.button !== 0) {
@@ -241,6 +267,6 @@ const SelectedOutlineCanvasRotation = ({ getLatestTargetByKey, layoutTarget, onD
         setDragOverrides,
         setPropStatuses,
     ]);
-    return (jsx_runtime_1.jsx("polygon", { points: outline.points.map((point) => `${point.x},${point.y}`).join(' '), fill: colors_1.TRANSPARENT, pointerEvents: "all", cursor: cursor, onPointerDown: onPointerDown, "data-remotion-studio-canvas-rotation": true }));
+    return (jsx_runtime_1.jsx("polygon", { points: outline.points.map((point) => `${point.x},${point.y}`).join(' '), fill: colors_1.TRANSPARENT, pointerEvents: commandKeyPressed ? 'none' : 'all', cursor: commandKeyPressed ? 'default' : cursor, onPointerDown: onPointerDown, "data-remotion-studio-canvas-rotation": true }));
 };
 exports.SelectedOutlineCanvasRotation = SelectedOutlineCanvasRotation;

package/dist/components/SelectedOutlineElement.js

@@ -362,6 +362,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/SelectedOutlineOverlay.js

@@ -545,13 +545,10 @@ const ActiveSelectedOutlineOverlayUnmemoized = ({ calculateOutlineTargetsForCurr
         selectableOutlinesForLayout,
         timelinePosition,
     ]);
-    const outlineTargetsRef = (0, react_1.useRef)(outlineTargets);
-    const getOutlineTargets = (0, react_1.useCallback)(() => outlineTargetsRef.current, []);
     (0, react_1.useLayoutEffect)(() => {
-        outlineTargetsRef.current = outlineTargets;
         updateOutlinesRef.current();
-    }, [outlineTargets, scale, translationX, translationY]);
-    return (jsx_runtime_1.jsx(SelectedOutlineRenderer_1.SelectedOutlineRenderer, { compositionHeight: compositionHeight, compositionWidth: compositionWidth, dragging: draggingOutline, getLatestOutlineTargetByKey: getLatestOutlineTargetByKey, getOutlineTargets: getOutlineTargets, onDraggingChange: onDraggingChange, onContextMenuOpenChange: onContextMenuOpenChange, onSelect: onSelect, scale: scale, sequences: sequences, updateOutlinesRef: updateOutlinesRef }));
+    }, [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);
 const SelectedOutlineOverlayUnmemoized = ({ canvasHovered, compositionHeight, compositionWidth, scale, translationX, translationY, }) => {
@@ -634,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;
@@ -658,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),
@@ -666,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.d.ts

@@ -5,7 +5,7 @@ export declare const SelectedOutlineRenderer: React.NamedExoticComponent<{
     readonly compositionWidth: number;
     readonly dragging: boolean;
     readonly getLatestOutlineTargetByKey: (key: string) => SelectedOutlineTarget | undefined;
-    readonly getOutlineTargets: () => readonly SelectedOutlineLayoutTarget[];
+    readonly outlineTargets: readonly SelectedOutlineLayoutTarget[];
     readonly onDraggingChange: (dragging: boolean) => void;
     readonly onContextMenuOpenChange: (open: boolean) => void;
     readonly onSelect: (item: import("@remotion/canvas").CanvasSelectionItem, interaction?: import("@remotion/canvas").CanvasSelectionInteraction | undefined) => void;

package/dist/components/SelectedOutlineRenderer.js

@@ -53,13 +53,12 @@ const outlineContainer = {
     pointerEvents: 'none',
     overflow: 'visible',
 };
-const emptyRenderState = {
-    outlines: [],
-    targets: [],
-};
-const SelectedOutlineRendererUnmemoized = ({ compositionHeight, compositionWidth, dragging, getLatestOutlineTargetByKey, getOutlineTargets, onDraggingChange, onContextMenuOpenChange, onSelect, scale, sequences, updateOutlinesRef, }) => {
+const SelectedOutlineRendererUnmemoized = ({ compositionHeight, compositionWidth, dragging, getLatestOutlineTargetByKey, outlineTargets, onDraggingChange, onContextMenuOpenChange, onSelect, scale, sequences, updateOutlinesRef, }) => {
     var _a;
-    const [renderState, setRenderState] = (0, react_1.useState)(emptyRenderState);
+    // 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);
@@ -92,22 +91,21 @@ const SelectedOutlineRendererUnmemoized = ({ compositionHeight, compositionWidth
     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);
+        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, targets, hoveredTimelineNodePathKey);
-        setRenderState((prevState) => {
-            const outlines = (0, selected_outline_measurement_1.outlinesAreEqual)(prevState.outlines, nextOutlines)
-                ? prevState.outlines
-                : nextOutlines;
-            if (prevState.targets === targets && prevState.outlines === outlines) {
-                return prevState;
-            }
-            return { outlines, targets };
-        });
-    }, [getOutlineTargets, hoveredTimelineNodePathKey]);
+        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();
@@ -150,7 +148,7 @@ const SelectedOutlineRendererUnmemoized = ({ compositionHeight, compositionWidth
         if (overlayRef.current !== null) {
             nextObservedElements.add(overlayRef.current);
         }
-        for (const target of renderState.targets) {
+        for (const target of outlineTargets) {
             if (target.ref.current !== null) {
                 nextObservedElements.add(target.ref.current);
             }
@@ -166,31 +164,31 @@ const SelectedOutlineRendererUnmemoized = ({ compositionHeight, compositionWidth
             }
         }
         observedOutlineElementsRef.current = nextObservedElements;
-    }, [renderState.targets]);
+    }, [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, selected_outline_order_1.orderOutlinesForRendering)({
-                outlines: renderState.outlines,
+                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),
@@ -199,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 = [];
@@ -228,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;