@remotion/studio 4.0.523 → 4.0.525

package/dist/components/RenderQueue/RenderQueueOpenInFolder.js

@@ -6,6 +6,7 @@ const react_1 = require("react");
 const browser_studio_operations_1 = require("../../helpers/browser-studio-operations");
 const colors_1 = require("../../helpers/colors");
 const folder_1 = require("../../icons/folder");
+const ActionTooltip_1 = require("../ActionTooltip");
 const InlineAction_1 = require("../InlineAction");
 const NotificationCenter_1 = require("../Notifications/NotificationCenter");
 const actions_1 = require("./actions");
@@ -26,6 +27,6 @@ const RenderQueueOpenInFinderItem = ({ job }) => {
     const renderAction = (0, react_1.useCallback)((color) => {
         return jsx_runtime_1.jsx(folder_1.ExpandedFolderIconSolid, { style: icon, color: color });
     }, [icon]);
-    return isBrowserStudio ? null : (jsx_runtime_1.jsx(InlineAction_1.InlineAction, { renderAction: renderAction, onClick: onClick, variant: null }));
+    return isBrowserStudio ? null : (jsx_runtime_1.jsx(ActionTooltip_1.ActionTooltip, { label: "Open in Folder", shortcut: null, delay: 800, dismissOnClick: true, children: jsx_runtime_1.jsx(InlineAction_1.InlineAction, { "aria-label": "Open in Folder", renderAction: renderAction, onClick: onClick, variant: null }) }));
 };
 exports.RenderQueueOpenInFinderItem = RenderQueueOpenInFinderItem;

package/dist/components/RenderQueue/RenderQueueRemoveItem.js

@@ -6,6 +6,7 @@ const react_1 = require("react");
 const remotion_1 = require("remotion");
 const save_render_output_1 = require("../../api/save-render-output");
 const colors_1 = require("../../helpers/colors");
+const ActionTooltip_1 = require("../ActionTooltip");
 const InlineAction_1 = require("../InlineAction");
 const NotificationCenter_1 = require("../Notifications/NotificationCenter");
 const actions_1 = require("./actions");
@@ -41,6 +42,6 @@ const RenderQueueRemoveItem = ({ job }) => {
     const renderAction = (0, react_1.useCallback)((color) => {
         return (jsx_runtime_1.jsx("svg", { style: icon, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 320 512", children: jsx_runtime_1.jsx("path", { fill: color, d: "M310.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L160 210.7 54.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L114.7 256 9.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L160 301.3 265.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L205.3 256 310.6 150.6z" }) }));
     }, [icon]);
-    return (jsx_runtime_1.jsx(InlineAction_1.InlineAction, { renderAction: renderAction, onClick: onClick, title: "Remove", variant: null }));
+    return (jsx_runtime_1.jsx(ActionTooltip_1.ActionTooltip, { label: "Clear", shortcut: null, delay: 800, dismissOnClick: true, children: jsx_runtime_1.jsx(InlineAction_1.InlineAction, { "aria-label": "Clear", renderAction: renderAction, onClick: onClick, variant: null }) }));
 };
 exports.RenderQueueRemoveItem = RenderQueueRemoveItem;

package/dist/components/RenderQueue/RenderQueueRepeat.js

@@ -6,6 +6,7 @@ const react_1 = require("react");
 const colors_1 = require("../../helpers/colors");
 const retry_payload_1 = require("../../helpers/retry-payload");
 const modals_1 = require("../../state/modals");
+const ActionTooltip_1 = require("../ActionTooltip");
 const InlineAction_1 = require("../InlineAction");
 const context_1 = require("./context");
 const RenderQueueRepeatItem = ({ job }) => {
@@ -31,6 +32,6 @@ const RenderQueueRepeatItem = ({ job }) => {
     const renderAction = (0, react_1.useCallback)((color) => {
         return (jsx_runtime_1.jsx("svg", { style: icon, viewBox: "0 0 512 512", children: jsx_runtime_1.jsx("path", { fill: color, d: "M386.3 160H336c-17.7 0-32 14.3-32 32s14.3 32 32 32H464c17.7 0 32-14.3 32-32V64c0-17.7-14.3-32-32-32s-32 14.3-32 32v51.2L414.4 97.6c-87.5-87.5-229.3-87.5-316.8 0s-87.5 229.3 0 316.8s229.3 87.5 316.8 0c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0c-62.5 62.5-163.8 62.5-226.3 0s-62.5-163.8 0-226.3s163.8-62.5 226.3 0L386.3 160z" }) }));
     }, [icon]);
-    return (jsx_runtime_1.jsx(InlineAction_1.InlineAction, { onClick: onClick, renderAction: renderAction, variant: null }));
+    return (jsx_runtime_1.jsx(ActionTooltip_1.ActionTooltip, { label: "Retry", shortcut: null, delay: 800, dismissOnClick: true, children: jsx_runtime_1.jsx(InlineAction_1.InlineAction, { "aria-label": "Retry", onClick: onClick, renderAction: renderAction, variant: null }) }));
 };
 exports.RenderQueueRepeatItem = RenderQueueRepeatItem;

package/dist/components/RenderQueue/VideoMattingQueueItem.js

@@ -6,6 +6,7 @@ const react_1 = require("react");
 const colors_1 = require("../../helpers/colors");
 const url_state_1 = require("../../helpers/url-state");
 const ellipsis_1 = require("../../icons/ellipsis");
+const ActionTooltip_1 = require("../ActionTooltip");
 const InlineAction_1 = require("../InlineAction");
 const InlineDropdown_1 = require("../InlineDropdown");
 const layout_1 = require("../layout");
@@ -124,6 +125,6 @@ const VideoMattingQueueItem = ({ job, selected }) => {
     return (jsx_runtime_1.jsxs(layout_1.Row, { "data-render-queue-item": job.id, style: style, align: "center", onClick: onClick, onPointerEnter: () => setHovered(true), onPointerLeave: () => setHovered(false), children: [
             jsx_runtime_1.jsx(Status, { job: job }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 1 }), jsx_runtime_1.jsxs("div", { style: right, children: [
                     jsx_runtime_1.jsx("div", { style: title, children: job.displayName }), jsx_runtime_1.jsx("div", { style: subtitles, title: tooltip, children: messages.map((message) => (jsx_runtime_1.jsx("span", { style: subtitle, children: message }, message))) })
-                ] }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 1 }), done ? (jsx_runtime_1.jsx(InlineDropdown_1.InlineDropdown, { renderAction: (color) => (jsx_runtime_1.jsx(ellipsis_1.EllipsisIcon, { fill: color, svgProps: ellipsisIconStyle })), title: "Reveal video layer", values: revealItems, variant: null })) : null, job.status === 'running' ? null : (jsx_runtime_1.jsx(InlineAction_1.InlineAction, { renderAction: renderRemove, onClick: onRemove, title: "Remove", variant: null }))] }));
+                ] }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 1 }), done ? (jsx_runtime_1.jsx(ActionTooltip_1.ActionTooltip, { label: "Reveal video layer", shortcut: null, delay: 800, dismissOnClick: true, children: jsx_runtime_1.jsx(InlineDropdown_1.InlineDropdown, { renderAction: (color) => (jsx_runtime_1.jsx(ellipsis_1.EllipsisIcon, { fill: color, svgProps: ellipsisIconStyle })), "aria-label": "Reveal video layer", values: revealItems, variant: null }) })) : null, job.status === 'running' ? null : (jsx_runtime_1.jsx(ActionTooltip_1.ActionTooltip, { label: "Clear", shortcut: null, delay: 800, dismissOnClick: true, children: jsx_runtime_1.jsx(InlineAction_1.InlineAction, { renderAction: renderRemove, onClick: onRemove, "aria-label": "Clear", variant: null }) }))] }));
 };
 exports.VideoMattingQueueItem = VideoMattingQueueItem;

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

@@ -100,11 +100,12 @@ export declare const subscribeToFileExistenceWatcher: ({ file, clientId, }: {
 export declare const openInFileExplorer: ({ directory }: {
     directory: string;
 }) => Promise<void>;
-export declare const applyCodemod: ({ codemod, dryRun, symbolicatedStack, signal, }: {
+export declare const applyCodemod: ({ codemod, dryRun, symbolicatedStack, signal, undoRedoNavigation, }: {
     codemod: RecastCodemod;
     dryRun: boolean;
     symbolicatedStack: import("@remotion/studio-shared").SymbolicatedStackFrame | null;
     signal: AbortSignal;
+    undoRedoNavigation: import("@remotion/studio-shared").UndoRedoNavigation | null;
 }) => Promise<import("@remotion/studio-shared").ApplyCodemodResponse>;
 export declare const removeRenderJob: (job: RenderJob) => Promise<undefined>;
 export declare const cancelRenderJob: (job: RenderJob) => Promise<import("@remotion/studio-shared").CancelRenderResponse>;

package/dist/components/RenderQueue/actions.js

@@ -137,11 +137,12 @@ const openInFileExplorer = ({ directory }) => {
     return (0, call_api_1.callApi)('/api/open-in-file-explorer', body);
 };
 exports.openInFileExplorer = openInFileExplorer;
-const applyCodemod = ({ codemod, dryRun, symbolicatedStack, signal, }) => {
+const applyCodemod = ({ codemod, dryRun, symbolicatedStack, signal, undoRedoNavigation, }) => {
     const body = {
         codemod,
         dryRun,
         symbolicatedStack,
+        undoRedoNavigation,
     };
     const browserStudioOperations = (0, browser_studio_operations_1.getBrowserStudioOperations)();
     if (browserStudioOperations !== null) {

package/dist/components/RulersAndGuidesToggle.js

@@ -4,9 +4,13 @@ exports.RulersAndGuidesToggle = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const colors_1 = require("../helpers/colors");
+const use_keybinding_1 = require("../helpers/use-keybinding");
+const use_keyboard_shortcut_label_1 = require("../helpers/use-keyboard-shortcut-label");
 const editor_guides_1 = require("../state/editor-guides");
 const editor_rulers_1 = require("../state/editor-rulers");
+const ActionTooltip_1 = require("./ActionTooltip");
 const ControlButton_1 = require("./ControlButton");
+const buttonStyle = { width: 26 };
 const RulersAndGuidesToggle = ({ showGuides }) => {
     const { editorShowGuides, setEditorShowGuides } = (0, react_1.useContext)(editor_guides_1.EditorShowGuidesContext);
     const { editorShowRulers, setEditorShowRulers } = (0, react_1.useContext)(editor_rulers_1.EditorShowRulersContext);
@@ -22,6 +26,9 @@ const RulersAndGuidesToggle = ({ showGuides }) => {
         setEditorShowRulers,
         showGuides,
     ]);
+    const shortcut = (0, use_keyboard_shortcut_label_1.useKeyboardShortcutLabel)('toggleRulersAndGuides');
+    const ariaShortcut = (0, use_keyboard_shortcut_label_1.useKeyboardShortcutAriaKeyShortcuts)('toggleRulersAndGuides');
+    const shortcutsDisabled = (0, use_keybinding_1.areKeyboardShortcutsDisabled)();
     const accessibilityLabel = showGuides
         ? rulersOrGuidesAreVisible
             ? 'Hide rulers and guides'
@@ -29,6 +36,6 @@ const RulersAndGuidesToggle = ({ showGuides }) => {
         : editorShowRulers
             ? 'Hide rulers'
             : 'Show rulers';
-    return (jsx_runtime_1.jsx(ControlButton_1.ControlButton, { title: accessibilityLabel, "aria-label": accessibilityLabel, "aria-pressed": rulersOrGuidesAreVisible, onClick: onClick, children: (color) => (jsx_runtime_1.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 576 512", style: { width: 18, height: 18 }, "aria-hidden": "true", focusable: "false", children: jsx_runtime_1.jsx("path", { fill: rulersOrGuidesAreVisible ? colors_1.BLUE : color, d: "M525.9 154.2L186.5 493.6c-6.2 6.2-16.4 6.2-22.6 0L50.7 380.5c-6.2-6.2-6.2-16.4 0-22.6l33.9-33.9 56.6 56.6c6.2 6.2 16.4 6.2 22.6 0s6.2-16.4 0-22.6l-56.6-56.6 39.6-39.6 33.9 33.9c6.2 6.2 16.4 6.2 22.6 0s6.2-16.4 0-22.6l-33.9-33.9 39.6-39.6 56.6 56.6c6.2 6.2 16.4 6.2 22.6 0s6.2-16.4 0-22.6l-56.6-56.6 39.6-39.6 33.9 33.9c6.2 6.2 16.4 6.2 22.6 0s6.2-16.4 0-22.6l-33.9-33.9 39.6-39.6 56.6 56.6c6.2 6.2 16.4 6.2 22.6 0s6.2-16.4 0-22.6l-56.6-56.6 33.9-33.9c6.2-6.2 16.4-6.2 22.6 0L525.9 131.5c6.2 6.2 6.2 16.4 0 22.6zM73.3 289.9L28.1 335.2c-18.7 18.7-18.7 49.1 0 67.9L141.2 516.2c18.7 18.7 49.1 18.7 67.9 0L548.5 176.8c18.7-18.7 18.7-49.1 0-67.9L435.4-4.2C416.6-23 386.2-23 367.5-4.2 77.1 286.2 140.3 223 73.3 289.9z" }) })) }));
+    return (jsx_runtime_1.jsx(ActionTooltip_1.ActionTooltip, { label: showGuides ? 'Rulers and Guides' : 'Rulers', shortcut: shortcutsDisabled ? null : shortcut, delay: 800, dismissOnClick: false, children: jsx_runtime_1.jsx(ControlButton_1.ControlButton, { title: "", "aria-label": accessibilityLabel, "aria-keyshortcuts": shortcutsDisabled ? undefined : ariaShortcut || undefined, "aria-pressed": rulersOrGuidesAreVisible, onClick: onClick, style: buttonStyle, children: (color) => (jsx_runtime_1.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 576 512", style: { width: 18, height: 18 }, "aria-hidden": "true", focusable: "false", children: jsx_runtime_1.jsx("path", { fill: rulersOrGuidesAreVisible ? colors_1.BLUE : color, d: "M525.9 154.2L186.5 493.6c-6.2 6.2-16.4 6.2-22.6 0L50.7 380.5c-6.2-6.2-6.2-16.4 0-22.6l33.9-33.9 56.6 56.6c6.2 6.2 16.4 6.2 22.6 0s6.2-16.4 0-22.6l-56.6-56.6 39.6-39.6 33.9 33.9c6.2 6.2 16.4 6.2 22.6 0s6.2-16.4 0-22.6l-33.9-33.9 39.6-39.6 56.6 56.6c6.2 6.2 16.4 6.2 22.6 0s6.2-16.4 0-22.6l-56.6-56.6 39.6-39.6 33.9 33.9c6.2 6.2 16.4 6.2 22.6 0s6.2-16.4 0-22.6l-33.9-33.9 39.6-39.6 56.6 56.6c6.2 6.2 16.4 6.2 22.6 0s6.2-16.4 0-22.6l-56.6-56.6 33.9-33.9c6.2-6.2 16.4-6.2 22.6 0L525.9 131.5c6.2 6.2 6.2 16.4 0 22.6zM73.3 289.9L28.1 335.2c-18.7 18.7-18.7 49.1 0 67.9L141.2 516.2c18.7 18.7 49.1 18.7 67.9 0L548.5 176.8c18.7-18.7 18.7-49.1 0-67.9L435.4-4.2C416.6-23 386.2-23 367.5-4.2 77.1 286.2 140.3 223 73.3 289.9z" }) })) }) }));
 };
 exports.RulersAndGuidesToggle = RulersAndGuidesToggle;

package/dist/components/SegmentedButton.d.ts

@@ -9,6 +9,7 @@ type SegmentedButtonSegmentCommon = {
     readonly segmentId: string;
     readonly style: React.CSSProperties | null;
     readonly title: string | null;
+    readonly tooltipLabel: string | null;
 };
 export type SegmentedButtonSegment = SegmentedButtonSegmentCommon & ({
     readonly onClick: React.MouseEventHandler<HTMLButtonElement>;

package/dist/components/SegmentedButton.js

@@ -13,6 +13,7 @@ const hoverable_1 = require("../helpers/hoverable");
 const mobile_layout_1 = require("../helpers/mobile-layout");
 const noop_1 = require("../helpers/noop");
 const z_index_1 = require("../state/z-index");
+const ActionTooltip_1 = require("./ActionTooltip");
 const is_menu_item_1 = require("./Menu/is-menu-item");
 const portals_1 = require("./Menu/portals");
 const styles_1 = require("./Menu/styles");
@@ -46,6 +47,7 @@ const segmentStyle = {
     padding: '0 6px',
     whiteSpace: 'nowrap',
 };
+const tooltipTriggerStyle = { height: '100%' };
 const getSegmentBorderRadius = ({ index, segmentCount, }) => {
     if (segmentCount === 1) {
         return SEGMENTED_BUTTON_BORDER_RADIUS;
@@ -106,7 +108,11 @@ const SegmentedButtonAction = ({ index, segment, segmentCount }) => {
         (_a = segment.onPointerDown) === null || _a === void 0 ? void 0 : _a.call(segment, event);
         preventPointerFocus(event);
     }, [segment]);
-    return (jsx_runtime_1.jsx("button", { "aria-label": segment.ariaLabel, className: `${hoverable_1.HOVERABLE_CLASS_NAME} ${hoverable_1.FOCUS_VISIBLE_ONLY_CLASS_NAME}`, disabled: segment.disabled, id: (_a = segment.buttonId) !== null && _a !== void 0 ? _a : undefined, onClick: onClick, onMouseDown: preventMouseFocus, onPointerDown: onPointerDown, style: style, tabIndex: tabIndex, title: (_b = segment.title) !== null && _b !== void 0 ? _b : undefined, type: "button", children: segment.renderContent(colors_1.CURRENT_COLOR) }));
+    const button = (jsx_runtime_1.jsx("button", { "aria-label": segment.ariaLabel, className: `${hoverable_1.HOVERABLE_CLASS_NAME} ${hoverable_1.FOCUS_VISIBLE_ONLY_CLASS_NAME}`, disabled: segment.disabled, id: (_a = segment.buttonId) !== null && _a !== void 0 ? _a : undefined, onClick: onClick, onMouseDown: preventMouseFocus, onPointerDown: onPointerDown, style: style, tabIndex: tabIndex, title: (_b = segment.title) !== null && _b !== void 0 ? _b : undefined, type: "button", children: segment.renderContent(colors_1.CURRENT_COLOR) }));
+    if (segment.tooltipLabel === null) {
+        return button;
+    }
+    return (jsx_runtime_1.jsx(ActionTooltip_1.ActionTooltip, { label: segment.tooltipLabel, shortcut: null, delay: 800, dismissOnClick: true, triggerStyle: tooltipTriggerStyle, children: button }));
 };
 const SegmentedButtonMenu = ({ index, segment, segmentCount }) => {
     var _a, _b;
@@ -208,8 +214,8 @@ const SegmentedButtonMenu = ({ index, segment, segmentCount }) => {
             ...segment.style,
         };
     }, [index, opened, segment, segmentCount]);
-    return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
-            jsx_runtime_1.jsx("button", { ref: ref, "aria-expanded": opened, "aria-haspopup": "menu", "aria-label": segment.ariaLabel, className: `${hoverable_1.HOVERABLE_CLASS_NAME} ${hoverable_1.FOCUS_VISIBLE_ONLY_CLASS_NAME} ${is_menu_item_1.MENU_INITIATOR_CLASSNAME}`, disabled: segment.disabled, id: (_a = segment.buttonId) !== null && _a !== void 0 ? _a : undefined, onClick: onClick, onMouseDown: preventMouseFocus, onPointerDown: onPointerDown, style: style, tabIndex: tabIndex, title: (_b = segment.title) !== null && _b !== void 0 ? _b : undefined, type: "button", children: segment.renderContent(colors_1.CURRENT_COLOR) }), portalStyle
+    const button = (jsx_runtime_1.jsx("button", { ref: ref, "aria-expanded": opened, "aria-haspopup": "menu", "aria-label": segment.ariaLabel, className: `${hoverable_1.HOVERABLE_CLASS_NAME} ${hoverable_1.FOCUS_VISIBLE_ONLY_CLASS_NAME} ${is_menu_item_1.MENU_INITIATOR_CLASSNAME}`, disabled: segment.disabled, id: (_a = segment.buttonId) !== null && _a !== void 0 ? _a : undefined, onClick: onClick, onMouseDown: preventMouseFocus, onPointerDown: onPointerDown, style: style, tabIndex: tabIndex, title: (_b = segment.title) !== null && _b !== void 0 ? _b : undefined, type: "button", children: segment.renderContent(colors_1.CURRENT_COLOR) }));
+    return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [segment.tooltipLabel === null ? (button) : (jsx_runtime_1.jsx(ActionTooltip_1.ActionTooltip, { label: segment.tooltipLabel, shortcut: null, delay: 800, dismissOnClick: true, triggerStyle: tooltipTriggerStyle, children: button })), portalStyle
                 ? react_dom_1.default.createPortal(jsx_runtime_1.jsx("div", { style: styles_1.fullScreenOverlay, onPointerDown: (event) => event.stopPropagation(), children: jsx_runtime_1.jsx("div", { style: styles_1.outerPortal, className: "css-reset", children: jsx_runtime_1.jsx(z_index_1.HigherZIndex, { onOutsideClick: onOutsideClick, onEscape: onHide, children: jsx_runtime_1.jsx("div", { style: portalStyle, children: jsx_runtime_1.jsx(MenuContent_1.MenuContent, { fixedHeight: Math.max(spaceToBottom, spaceToTop), leaveLeftSpace: segment.leaveLeftSpace, onHide: onHide, onNextMenu: noop_1.noop, onPreviousMenu: noop_1.noop, preselectIndex: segment.selectedId === null
                                         ? false
                                         : segment.values.findIndex((value) => value.id === segment.selectedId), topItemCanBeUnselected: false, values: segment.values }) }) }) }) }), (0, portals_1.getPortal)(currentZIndex))

package/dist/components/SelectedOutlineElement.js

@@ -39,6 +39,7 @@ const react_1 = __importStar(require("react"));
 const remotion_1 = require("remotion");
 const client_id_1 = require("../helpers/client-id");
 const get_connected_compositions_1 = require("../helpers/get-connected-compositions");
+const get_git_menu_item_1 = require("../helpers/get-git-menu-item");
 const get_sequence_double_click_action_1 = require("../helpers/get-sequence-double-click-action");
 const interactivity_enabled_1 = require("../helpers/interactivity-enabled");
 const open_in_editor_1 = require("../helpers/open-in-editor");
@@ -65,6 +66,9 @@ const SelectedOutlineElementUnmemoized = ({ compositionHeight, compositionWidth,
     const { previewServerState } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
     const { canConfigureApps, canOpenInEditor: editorAvailable, defaultEditorId, editorInfo, } = (0, use_default_editor_info_1.useEditorOpening)(previewServerState.type === 'connected');
     const codingAgentInfo = (0, use_default_editor_info_1.useDefaultCodingAgentInfo)(canConfigureApps);
+    const defaultOpenInTarget = (0, get_git_menu_item_1.getDefaultOpenInTarget)({
+        canOpenInEditor: editorAvailable,
+    });
     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)();
@@ -100,7 +104,7 @@ const SelectedOutlineElementUnmemoized = ({ compositionHeight, compositionWidth,
         });
         const action = (0, get_sequence_double_click_action_1.getSequenceDoubleClickAction)({
             button,
-            canOpenInEditor: editorAvailable,
+            canOpenSource: defaultOpenInTarget !== null,
             numberOfConnectedCompositions: connectedCompositions.length,
             sequenceWasDragged,
         });
@@ -111,21 +115,27 @@ const SelectedOutlineElementUnmemoized = ({ compositionHeight, compositionWidth,
             selectComposition(connectedCompositions[0], true);
             return true;
         }
-        const openTargetInEditor = async () => {
+        const openTargetSource = async () => {
             const originalLocation = await resolveOriginalLocation(doubleClickTarget);
-            if (originalLocation === null || defaultEditorId === null) {
+            if (originalLocation === null) {
+                return;
+            }
+            if (defaultOpenInTarget === 'editor' && defaultEditorId !== null) {
+                await (0, open_in_editor_1.openOriginalPositionInEditor)(originalLocation, defaultEditorId);
                 return;
             }
-            await (0, open_in_editor_1.openOriginalPositionInEditor)(originalLocation, defaultEditorId);
+            if (defaultOpenInTarget === 'git-source') {
+                (0, get_git_menu_item_1.openGitSource)({ folder: false, location: originalLocation });
+            }
         };
-        openTargetInEditor().catch((err) => {
+        openTargetSource().catch((err) => {
             (0, NotificationCenter_1.showNotification)(err.message, 2000);
         });
         return true;
     }, [
         compositions,
         defaultEditorId,
-        editorAvailable,
+        defaultOpenInTarget,
         resolveOriginalLocation,
         selectComposition,
     ]);

package/dist/components/SelectedOutlinePolygon.js

@@ -262,7 +262,7 @@ const SelectedOutlinePolygonUnmemoized = ({ compositionHeight, compositionWidth,
             axisLocked = nextAxisLocked;
             updateDragOverrides();
         };
-        const onPointerUp = (reason) => {
+        const onPointerUp = (reason, endEvent) => {
             dragAwareDoubleClick.endPointerGesture(dragStarted);
             window.removeEventListener('keydown', onKeyChange);
             window.removeEventListener('keyup', onKeyChange);
@@ -277,7 +277,9 @@ const SelectedOutlinePolygonUnmemoized = ({ compositionHeight, compositionWidth,
             });
             if (changes.length === 0) {
                 (0, selected_outline_drag_1.clearSelectedOutlineDragOverrides)({ clearDragOverrides, dragStates });
-                if (deferSelection && !dragStarted && reason === 'pointerup') {
+                if (deferSelection &&
+                    !dragStarted &&
+                    (0, pointer_session_1.isPointerSessionRelease)(reason, endEvent)) {
                     onSelect(target.selection, interaction);
                 }
                 return;

package/dist/components/SettingsButton.js

@@ -7,6 +7,7 @@ const browser_studio_operations_1 = require("../helpers/browser-studio-operation
 const colors_1 = require("../helpers/colors");
 const gear_1 = require("../icons/gear");
 const modals_1 = require("../state/modals");
+const ActionTooltip_1 = require("./ActionTooltip");
 const InlineAction_1 = require("./InlineAction");
 const UpdateStatusContext_1 = require("./UpdateStatusContext");
 const SettingsButton = ({ showUpdates }) => {
@@ -24,7 +25,7 @@ const SettingsButton = ({ showUpdates }) => {
             initialTab: updateAvailable
                 ? 'updates'
                 : (0, browser_studio_operations_1.getBrowserStudioOperations)() === null
-                    ? 'rendering'
+                    ? 'studio'
                     : 'shortcuts',
             initialPublicLicenseKey: (_b = (_a = window.remotion_renderDefaults) === null || _a === void 0 ? void 0 : _a.publicLicenseKey) !== null && _b !== void 0 ? _b : null,
         });
@@ -40,10 +41,11 @@ const SettingsButton = ({ showUpdates }) => {
                 flexShrink: 0,
             }, viewBox: "0 0 512 512", children: jsx_runtime_1.jsx("path", { fill: color, d: "M256 32a224 224 0 1 1 0 448 224 224 0 1 1 0-448zm0 480a256 256 0 1 0 0-512 256 256 0 1 0 0 512zM377 231L273 127c-9.4-9.4-24.6-9.4-33.9 0L135 231c-6.9 6.9-8.9 17.2-5.2 26.2S142.3 272 152 272l40 0 0 72c0 22.1 17.9 40 40 40l48 0c22.1 0 40-17.9 40-40l0-72 40 0c9.7 0 18.5-5.8 22.2-14.8s1.7-19.3-5.2-26.2z" }) }));
     }, []);
-    return (jsx_runtime_1.jsx(InlineAction_1.InlineAction, { variant: null, onClick: openModal, renderAction: updateAvailable ? renderUpdateIcon : renderGearIcon, unhoveredColor: hasBugfixesAvailable ? colors_1.WARNING_COLOR : colors_1.WHITE_ALPHA_80, title: hasBugfixesAvailable
-            ? 'Bugfixes available'
-            : updateAvailable
-                ? 'Update available'
-                : 'Settings' }));
+    const label = hasBugfixesAvailable
+        ? 'Bugfixes available'
+        : updateAvailable
+            ? 'Update available'
+            : 'Settings';
+    return (jsx_runtime_1.jsx(ActionTooltip_1.ActionTooltip, { label: label, shortcut: null, delay: 800, dismissOnClick: true, children: jsx_runtime_1.jsx(InlineAction_1.InlineAction, { variant: null, onClick: openModal, renderAction: updateAvailable ? renderUpdateIcon : renderGearIcon, unhoveredColor: hasBugfixesAvailable ? colors_1.WARNING_COLOR : colors_1.WHITE_ALPHA_80, title: "", "aria-label": label }) }));
 };
 exports.SettingsButton = SettingsButton;

package/dist/components/SettingsContext.d.ts

@@ -1,5 +1,9 @@
 import type { GetDefaultCodingAgentInfoResponse, GetDefaultEditorInfoResponse, GetRemotionSkillsInfoResponse, RenderDefaults, StudioRuntimeConfig } from '@remotion/studio-shared';
 import React from 'react';
+type SkillAction = {
+    readonly skill: string;
+    readonly type: 'installing' | 'removing';
+};
 type SettingsContextValue = {
     readonly codingAgentInfo: GetDefaultCodingAgentInfoResponse | null;
     readonly editorInfo: GetDefaultEditorInfoResponse | null;
@@ -10,6 +14,10 @@ type SettingsContextValue = {
     readonly studioRuntimeConfig: StudioRuntimeConfig | null;
     readonly revision: number;
     readonly setPublicLicenseKey: (publicLicenseKey: string | null) => void;
+    readonly installSkill: (skill: string) => Promise<void>;
+    readonly removeSkill: (skill: string) => Promise<void>;
+    readonly skillAction: SkillAction | null;
+    readonly skillActionError: string | null;
 };
 export declare const SettingsProvider: React.FC<{
     readonly children: React.ReactNode;

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 NotificationCenter_1 = require("./Notifications/NotificationCenter");
 const UpdateStatusContext_1 = require("./UpdateStatusContext");
 const SettingsContext = (0, react_1.createContext)(null);
 const SettingsProvider = ({ children }) => {
@@ -21,6 +22,8 @@ const SettingsProvider = ({ children }) => {
         renderDefaults: (_c = window.remotion_renderDefaults) !== null && _c !== void 0 ? _c : null,
         studioRuntimeConfig: (_d = window.remotion_studioConfig) !== null && _d !== void 0 ? _d : null,
         revision: 0,
+        skillAction: null,
+        skillActionError: null,
     });
     (0, react_1.useEffect)(() => {
         if (previewServerState.type !== 'connected' ||
@@ -108,9 +111,61 @@ const SettingsProvider = ({ children }) => {
             };
         });
     }, []);
+    const installSkill = (0, react_1.useCallback)(async (skill) => {
+        setSettings((currentSettings) => ({
+            ...currentSettings,
+            skillAction: { skill, type: 'installing' },
+            skillActionError: null,
+        }));
+        try {
+            const remotionSkillsInfo = await (0, call_api_1.callApi)('/api/install-remotion-skill', {
+                skill,
+            });
+            setSettings((currentSettings) => ({
+                ...currentSettings,
+                remotionSkillsInfo,
+                skillAction: null,
+                revision: currentSettings.revision + 1,
+            }));
+            (0, NotificationCenter_1.showNotification)(`Installed ${skill}.`, 5000);
+        }
+        catch (err) {
+            setSettings((currentSettings) => ({
+                ...currentSettings,
+                skillAction: null,
+                skillActionError: err.message,
+            }));
+        }
+    }, []);
+    const removeSkill = (0, react_1.useCallback)(async (skill) => {
+        setSettings((currentSettings) => ({
+            ...currentSettings,
+            skillAction: { skill, type: 'removing' },
+            skillActionError: null,
+        }));
+        try {
+            const remotionSkillsInfo = await (0, call_api_1.callApi)('/api/remove-remotion-skill', {
+                skill,
+            });
+            setSettings((currentSettings) => ({
+                ...currentSettings,
+                remotionSkillsInfo,
+                skillAction: null,
+                revision: currentSettings.revision + 1,
+            }));
+            (0, NotificationCenter_1.showNotification)(`Removed ${skill}.`, 5000);
+        }
+        catch (err) {
+            setSettings((currentSettings) => ({
+                ...currentSettings,
+                skillAction: null,
+                skillActionError: err.message,
+            }));
+        }
+    }, []);
     const value = (0, react_1.useMemo)(() => {
-        return { ...settings, setPublicLicenseKey };
-    }, [setPublicLicenseKey, settings]);
+        return { ...settings, setPublicLicenseKey, installSkill, removeSkill };
+    }, [installSkill, removeSkill, setPublicLicenseKey, settings]);
     return (jsx_runtime_1.jsx(SettingsContext.Provider, { value: value, children: jsx_runtime_1.jsx(UpdateStatusContext_1.UpdateStatusProvider, { children: children }) }));
 };
 exports.SettingsProvider = SettingsProvider;

package/dist/components/SettingsModal.js

@@ -104,6 +104,9 @@ const SettingsModal = ({ initialPublicLicenseKey, initialTab }) => {
     }, [initialPublicLicenseKey, setPublicLicenseKey]);
     return (jsx_runtime_1.jsx(DismissableModal_1.DismissableModal, { panelStyle: render_modals_1.outerModalStyle, children: jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
                 jsx_runtime_1.jsx(ModalHeader_1.ModalHeader, { title: "Settings", onClose: dismiss }), jsx_runtime_1.jsxs("div", { style: render_modals_1.horizontalLayout, children: [
-                        jsx_runtime_1.jsxs("div", { style: settingsLeftSidebar, children: [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" })), jsx_runtime_1.jsx(vertical_1.VerticalTab, { style: render_modals_1.horizontalTab, selected: tab === 'models', onClick: () => selectTab('models'), renderIcon: (color) => (jsx_runtime_1.jsx("div", { style: render_modals_1.iconContainer, children: jsx_runtime_1.jsx(models_1.ModelsIcon, { color: color, style: render_modals_1.icon }) })), children: "Models" }), 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('models') ? (jsx_runtime_1.jsx("div", { style: tab === 'models' ? settingsOptionsPanel : hiddenPanel, className: is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME, children: jsx_runtime_1.jsx(ModelsSettings_1.ModelsSettings, {}) })) : null, 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 === 'models' || tab === 'updates' ? 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 === '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" })), 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" })), 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" })), jsx_runtime_1.jsx(vertical_1.VerticalTab, { style: render_modals_1.horizontalTab, selected: tab === 'models', onClick: () => selectTab('models'), renderIcon: (color) => (jsx_runtime_1.jsx("div", { style: render_modals_1.iconContainer, children: jsx_runtime_1.jsx(models_1.ModelsIcon, { color: color, style: render_modals_1.icon }) })), children: "Models" }), 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('models') ? (jsx_runtime_1.jsx("div", { style: tab === 'models' ? settingsOptionsPanel : hiddenPanel, className: is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME, children: jsx_runtime_1.jsx(ModelsSettings_1.ModelsSettings, {}) })) : null, 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 === 'models' ||
+                    tab === 'updates' ||
+                    tab === 'skills' ? null : (jsx_runtime_1.jsx(SettingsModalFooter_1.SettingsModalFooter, { showLicenseFaq: tab === 'license' }))] }) }));
 };
 exports.SettingsModal = SettingsModal;

package/dist/components/SettingsModalFooter.js

@@ -52,7 +52,7 @@ const SettingsModalFooter = ({ showLicenseFaq }) => {
     }, []);
     return (jsx_runtime_1.jsx(ModalFooter_1.ModalFooterContainer, { style: footer, children: jsx_runtime_1.jsxs("div", { style: footerRow, children: [
                 jsx_runtime_1.jsxs("div", { style: configFileHint, children: ["Changes save to",
-                        jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.5 }), jsx_runtime_1.jsx(InspectorOpenInEditor_1.InspectorOpenInEditor, { locationType: null, location: configFileLocation, label: jsx_runtime_1.jsx("strong", { style: configFileName, children: "remotion.config.ts" }) })
+                        jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.5 }), jsx_runtime_1.jsx(InspectorOpenInEditor_1.InspectorOpenInEditor, { locationType: null, location: configFileLocation, label: jsx_runtime_1.jsx("strong", { style: configFileName, children: "remotion.config.ts" }), showTooltips: false })
                     ] }), showLicenseFaq ? (jsx_runtime_1.jsxs(common_1.InspectorQuickAction, { disabled: false, onClick: openLicenseFaq, style: { flex: 'none', width: 'fit-content' }, title: "Open the Remotion License FAQ in a new tab", children: ["License FAQ",
                         jsx_runtime_1.jsx("svg", { "aria-hidden": "true", viewBox: "0 0 16 16", style: externalLinkIndicator, children: jsx_runtime_1.jsx("path", { d: "M4 12 12 4M6 4h6v6", fill: "none", stroke: colors_1.CURRENT_COLOR, strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "1.5" }) })
                     ] })) : null] }) }));

package/dist/components/SidebarCollapserControls.js

@@ -7,6 +7,7 @@ const colors_1 = require("../helpers/colors");
 const use_keybinding_1 = require("../helpers/use-keybinding");
 const use_keyboard_shortcut_label_1 = require("../helpers/use-keyboard-shortcut-label");
 const sidebar_1 = require("../state/sidebar");
+const ActionTooltip_1 = require("./ActionTooltip");
 const InlineAction_1 = require("./InlineAction");
 const TopPanel_1 = require("./TopPanel");
 const style = {
@@ -123,14 +124,13 @@ const SidebarCollapserControl = ({ side }) => {
             right.unregister();
         };
     }, [keybindings, side, toggleBoth, toggleLeft, toggleRight]);
-    const leftShortcut = (0, use_keyboard_shortcut_label_1.useKeyboardShortcutLabel)('toggleLeftSidebar');
-    const rightShortcut = (0, use_keyboard_shortcut_label_1.useKeyboardShortcutLabel)('toggleRightSidebar');
-    const toggleLeftTooltip = (0, use_keybinding_1.areKeyboardShortcutsDisabled)() || leftShortcut === ''
-        ? 'Toggle Left Sidebar'
-        : `Toggle Left Sidebar (${leftShortcut})`;
-    const toggleRightTooltip = (0, use_keybinding_1.areKeyboardShortcutsDisabled)() || rightShortcut === ''
-        ? 'Toggle Right Sidebar'
-        : `Toggle Right Sidebar (${rightShortcut})`;
+    const action = side === 'left' ? 'toggleLeftSidebar' : 'toggleRightSidebar';
+    const shortcut = (0, use_keyboard_shortcut_label_1.useKeyboardShortcutLabel)(action);
+    const ariaShortcut = (0, use_keyboard_shortcut_label_1.useKeyboardShortcutAriaKeyShortcuts)(action);
+    const shortcutsDisabled = (0, use_keybinding_1.areKeyboardShortcutsDisabled)();
+    const expanded = (side === 'left' ? leftSidebarStatus : sidebarCollapsedStateRight) ===
+        'expanded' && sidebarCollapsedDuringDrag !== side;
+    const label = `${expanded ? 'Collapse' : 'Expand'} ${side} sidebar`;
     const colorStyle = (0, react_1.useCallback)((color) => {
         return {
             ...style,
@@ -138,14 +138,11 @@ const SidebarCollapserControl = ({ side }) => {
         };
     }, []);
     const toggleLeftAction = (0, react_1.useCallback)((color) => {
-        return (jsx_runtime_1.jsx("div", { "data-sidebar-toggle": "left", style: colorStyle(color), title: toggleLeftTooltip, children: jsx_runtime_1.jsx("div", { style: leftIcon(color) }) }));
-    }, [colorStyle, leftIcon, toggleLeftTooltip]);
+        return (jsx_runtime_1.jsx("div", { "data-sidebar-toggle": "left", style: colorStyle(color), children: jsx_runtime_1.jsx("div", { style: leftIcon(color) }) }));
+    }, [colorStyle, leftIcon]);
     const toggleRightAction = (0, react_1.useCallback)((color) => {
-        return (jsx_runtime_1.jsx("div", { "data-sidebar-toggle": "right", style: colorStyle(color), title: toggleRightTooltip, children: jsx_runtime_1.jsx("div", { style: rightIcon(color) }) }));
-    }, [colorStyle, rightIcon, toggleRightTooltip]);
-    if (side === 'left') {
-        return (jsx_runtime_1.jsx(InlineAction_1.InlineAction, { variant: null, onClick: toggleLeft, renderAction: toggleLeftAction, style: { marginRight: 4 } }));
-    }
-    return (jsx_runtime_1.jsx(InlineAction_1.InlineAction, { variant: null, onClick: toggleRight, renderAction: toggleRightAction }));
+        return (jsx_runtime_1.jsx("div", { "data-sidebar-toggle": "right", style: colorStyle(color), children: jsx_runtime_1.jsx("div", { style: rightIcon(color) }) }));
+    }, [colorStyle, rightIcon]);
+    return (jsx_runtime_1.jsx(ActionTooltip_1.ActionTooltip, { label: label, shortcut: shortcutsDisabled ? null : shortcut, delay: 800, dismissOnClick: true, children: jsx_runtime_1.jsx(InlineAction_1.InlineAction, { variant: null, onClick: side === 'left' ? toggleLeft : toggleRight, renderAction: side === 'left' ? toggleLeftAction : toggleRightAction, unhoveredColor: colors_1.WHITE_ALPHA_80, style: side === 'left' ? { marginRight: 4 } : undefined, "aria-label": label, "aria-expanded": expanded, "aria-keyshortcuts": shortcutsDisabled ? undefined : ariaShortcut || undefined }) }));
 };
 exports.SidebarCollapserControl = SidebarCollapserControl;

package/dist/components/SizeSelector.js

@@ -48,7 +48,7 @@ const getPreviewSizeLabel = (previewSize) => {
     return `${(previewSize.size * 100).toFixed(0)}%`;
 };
 exports.getPreviewSizeLabel = getPreviewSizeLabel;
-const accessibilityLabel = 'Preview Size';
+const accessibilityLabel = 'Zoom';
 const getUniqueSizes = (size) => {
     const customPreviewSizes = [size, ...commonPreviewSizes];
     const uniqueSizes = [];
@@ -126,6 +126,6 @@ const SizeSelector = () => {
     if (!zoomable) {
         return null;
     }
-    return (jsx_runtime_1.jsx(TimelineCombobox_1.TimelineCombobox, { title: accessibilityLabel, selectedId: selectedId, values: items, renderLeftItem: (color) => selectedId === 'auto' ? (jsx_runtime_1.jsx(canvas_zoom_1.CanvasFitIcon, { color: color })) : Number(selectedId) < 1 ? (jsx_runtime_1.jsx(canvas_zoom_1.CanvasZoomOutIcon, { color: color })) : (jsx_runtime_1.jsx(canvas_zoom_1.CanvasZoomIcon, { color: color })), unhoveredIconColor: colors_1.WHITE_ALPHA_80 }));
+    return (jsx_runtime_1.jsx(TimelineCombobox_1.TimelineCombobox, { title: accessibilityLabel, tooltipDelay: 800, selectedId: selectedId, values: items, renderLeftItem: (color) => selectedId === 'auto' ? (jsx_runtime_1.jsx(canvas_zoom_1.CanvasFitIcon, { color: color })) : Number(selectedId) < 1 ? (jsx_runtime_1.jsx(canvas_zoom_1.CanvasZoomOutIcon, { color: color })) : (jsx_runtime_1.jsx(canvas_zoom_1.CanvasZoomIcon, { color: color })), unhoveredIconColor: colors_1.WHITE_ALPHA_80 }));
 };
 exports.SizeSelector = SizeSelector;