@remotion/studio 4.0.523 → 4.0.525

package/dist/components/ElementInstallConfirmation.js

@@ -1,37 +1,4 @@
 "use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || (function () {
-    var ownKeys = function(o) {
-        ownKeys = Object.getOwnPropertyNames || function (o) {
-            var ar = [];
-            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
-            return ar;
-        };
-        return ownKeys(o);
-    };
-    return function (mod) {
-        if (mod && mod.__esModule) return mod;
-        var result = {};
-        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
-        __setModuleDefault(result, mod);
-        return result;
-    };
-})();
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ElementInstallConfirmation = exports.ElementLibraryAddConfirmation = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
@@ -43,13 +10,16 @@ const ShortcutHint_1 = require("../error-overlay/remotion-overlay/ShortcutHint")
 const colors_1 = require("../helpers/colors");
 const hoverable_1 = require("../helpers/hoverable");
 const resolved_stack_to_symbolicated_1 = require("../helpers/resolved-stack-to-symbolicated");
+const url_state_1 = require("../helpers/url-state");
 const use_create_composition_1 = require("../helpers/use-create-composition");
 const validate_new_comp_data_1 = require("../helpers/validate-new-comp-data");
 const z_index_1 = require("../state/z-index");
 const Button_1 = require("./Button");
 const element_install_api_1 = require("./element-install-api");
 const import_assets_1 = require("./import-assets");
+const InitialCompositionLoader_1 = require("./InitialCompositionLoader");
 const layout_1 = require("./layout");
+const LazySyntaxHighlightedSource_1 = require("./LazySyntaxHighlightedSource");
 const is_menu_item_1 = require("./Menu/is-menu-item");
 const portals_1 = require("./Menu/portals");
 const ModalButton_1 = require("./ModalButton");
@@ -59,11 +29,9 @@ const ModalHeader_1 = require("./ModalHeader");
 const NewComposition_1 = require("./NewComposition/NewComposition");
 const RemInput_1 = require("./NewComposition/RemInput");
 const ValidationMessage_1 = require("./NewComposition/ValidationMessage");
-const NotificationCenter_1 = require("./Notifications/NotificationCenter");
 const RadioButton_1 = require("./RadioButton");
 const SegmentedControl_1 = require("./SegmentedControl");
 const use_resolved_stack_1 = require("./Timeline/use-resolved-stack");
-const HighlightedElementSource = (0, react_1.lazy)(() => Promise.resolve().then(() => __importStar(require('./HighlightedElementSource'))));
 const container = {
     display: 'flex',
     flexDirection: 'column',
@@ -287,6 +255,7 @@ const ElementInstallConfirmation = ({ state }) => {
     const sourcePreview = (0, react_1.useMemo)(() => makeSourceControlsVisible(request.element.sourceCode), [request.element.sourceCode]);
     const config = remotion_1.Internals.useUnsafeVideoConfig();
     const { canvasContent, compositions } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
+    const selectComposition = (0, InitialCompositionLoader_1.useSelectComposition)();
     const currentCompositionMetadata = config === null ||
         (canvasContent === null || canvasContent === void 0 ? void 0 : canvasContent.type) !== 'composition' ||
         canvasContent.compositionId !== request.compositionId
@@ -402,7 +371,7 @@ const ElementInstallConfirmation = ({ state }) => {
             canceled = true;
         };
     }, [folderCompositionFile, newPlan, request.element, selectedFolderStack]);
-    const { createComposition, heightValidationMessage, nameValidationMessage, valid: newCompositionValuesAreValid, widthValidationMessage, } = (0, use_create_composition_1.useCreateComposition)({
+    const { codemod: newCompositionCodemod, compositionId: newCompositionId, heightValidationMessage, nameValidationMessage, valid: newCompositionValuesAreValid, widthValidationMessage, } = (0, use_create_composition_1.useCreateComposition)({
         canvasCapture: null,
         compositions,
         durationInFrames: newCompositionValues.durationInFrames,
@@ -459,9 +428,6 @@ const ElementInstallConfirmation = ({ state }) => {
     const activePlan = overwriteExisting
         ? existingDestination.plan
         : ((_f = preparedInstallation === null || preparedInstallation === void 0 ? void 0 : preparedInstallation.plan) !== null && _f !== void 0 ? _f : null);
-    const [createdComposition, setCreatedComposition] = (0, react_1.useState)(null);
-    const creationKey = JSON.stringify(newCompositionValues);
-    const compositionAlreadyCreated = createdComposition === creationKey;
     (0, react_1.useEffect)(() => {
         if (selectedPlan === null) {
             return;
@@ -554,7 +520,7 @@ const ElementInstallConfirmation = ({ state }) => {
                     : requestedName !== null))) &&
         (mode === 'current-composition'
             ? currentPlan !== null
-            : (newCompositionValuesAreValid || compositionAlreadyCreated) &&
+            : newCompositionValuesAreValid &&
                 folderTargetIsReady &&
                 selectedNewCompositionPlan !== null);
     const submit = (0, react_1.useCallback)(async () => {
@@ -563,18 +529,6 @@ const ElementInstallConfirmation = ({ state }) => {
             return;
         }
         setSubmitting(true);
-        if (mode === 'new-composition' && !compositionAlreadyCreated) {
-            const created = await createComposition({
-                signal: new AbortController().signal,
-                symbolicatedStack: selectedFolderStack === null ? null : folderSymbolicatedStack,
-            });
-            if (!created.success) {
-                (0, NotificationCenter_1.showNotification)(`Could not create composition: ${created.reason}`, 4000);
-                setSubmitting(false);
-                return;
-            }
-            setCreatedComposition(creationKey);
-        }
         const installed = await (0, import_assets_1.insertElement)({
             installationName: overwriteExisting
                 ? ((_a = existingDestination === null || existingDestination === void 0 ? void 0 : existingDestination.name) !== null && _a !== void 0 ? _a : installationName)
@@ -582,18 +536,36 @@ const ElementInstallConfirmation = ({ state }) => {
             compositionFile: mode === 'new-composition'
                 ? selectedPlan.compositionFile
                 : request.compositionFile,
-            compositionId: mode === 'new-composition'
-                ? newCompositionValues.id
-                : request.compositionId,
+            compositionId: mode === 'new-composition' ? newCompositionId : request.compositionId,
             element: request.element,
             // The insert operation revalidates this even if the name preflight is pending.
             expectedFileState: (_b = activePlan === null || activePlan === void 0 ? void 0 : activePlan.expectedFileState) !== null && _b !== void 0 ? _b : { exists: false },
             from: mode === 'new-composition' ? null : request.from,
             overwriteExisting,
             position: mode === 'new-composition' ? null : request.position,
+            undoRedoNavigation: mode === 'new-composition'
+                ? {
+                    undoRoute: (0, url_state_1.getRoute)(),
+                    redoRoute: `/${newCompositionId}`,
+                }
+                : null,
+            newComposition: mode === 'new-composition'
+                ? {
+                    codemod: newCompositionCodemod,
+                    symbolicatedStack: selectedFolderStack === null ? null : folderSymbolicatedStack,
+                }
+                : null,
         });
-        if (installed)
+        if (installed) {
+            if (mode === 'new-composition') {
+                selectComposition({
+                    id: newCompositionId,
+                    folderName: newCompositionValues.folder.folderName,
+                    parentFolderName: newCompositionValues.folder.parentName,
+                }, true);
+            }
             onClose();
+        }
         else {
             setSubmitting(false);
             setRefreshPlan((value) => value + 1);
@@ -601,19 +573,20 @@ const ElementInstallConfirmation = ({ state }) => {
     }, [
         activePlan,
         existingDestination,
-        compositionAlreadyCreated,
-        creationKey,
         installationName,
         overwriteExisting,
         canSubmit,
-        createComposition,
         folderSymbolicatedStack,
         mode,
-        newCompositionValues.id,
+        newCompositionCodemod,
+        newCompositionId,
         onClose,
         request,
         selectedFolderStack,
         selectedPlan,
+        selectComposition,
+        newCompositionValues.folder.folderName,
+        newCompositionValues.folder.parentName,
     ]);
     const cancel = (0, react_1.useCallback)(() => {
         if (!submitting) {
@@ -658,7 +631,7 @@ const ElementInstallConfirmation = ({ state }) => {
                                 ] }), currentPlan === null ? (jsx_runtime_1.jsxs("div", { style: warningStyle, role: "status", children: [
                                     jsx_runtime_1.jsx(ValidationMessage_1.WarningTriangle, { style: warningIconStyle }), jsx_runtime_1.jsxs("p", { style: warningDescriptionStyle, children: ["Studio could not find a safe place in \u201C", request.compositionId, "\u201D to insert the Element. Install it into a new composition instead."] })
                                 ] })) : null, mode === 'new-composition' ? (jsx_runtime_1.jsxs("section", { style: { ...sectionStyle, marginInline: -16 }, "aria-label": "New composition settings", children: [
-                                    jsx_runtime_1.jsx(NewComposition_1.NewCompositionFields, { heightValidationMessage: heightValidationMessage, inputRef: inputRef, nameValidationMessage: compositionAlreadyCreated ? null : nameValidationMessage, setValues: setNewCompositionValues, values: newCompositionValues, widthValidationMessage: widthValidationMessage }), (activeNewCompositionPlanState === null || activeNewCompositionPlanState === void 0 ? void 0 : activeNewCompositionPlanState.type) === 'error' ? (jsx_runtime_1.jsx(ValidationMessage_1.ValidationMessage, { align: "flex-start", message: activeNewCompositionPlanState.reason, type: "error" })) : null] })) : null, jsx_runtime_1.jsx("section", { style: sectionStyle, "aria-label": "Element implementation", children: existingDestination ? (jsx_runtime_1.jsxs("div", { role: "radiogroup", "aria-label": "Existing Element file", style: sectionStyle, children: [
+                                    jsx_runtime_1.jsx(NewComposition_1.NewCompositionFields, { compositionId: newCompositionId, heightValidationMessage: heightValidationMessage, inputRef: inputRef, nameValidationMessage: nameValidationMessage, setValues: setNewCompositionValues, values: newCompositionValues, widthValidationMessage: widthValidationMessage }), (activeNewCompositionPlanState === null || activeNewCompositionPlanState === void 0 ? void 0 : activeNewCompositionPlanState.type) === 'error' ? (jsx_runtime_1.jsx(ValidationMessage_1.ValidationMessage, { align: "flex-start", message: activeNewCompositionPlanState.reason, type: "error" })) : null] })) : null, jsx_runtime_1.jsx("section", { style: sectionStyle, "aria-label": "Element implementation", children: existingDestination ? (jsx_runtime_1.jsxs("div", { role: "radiogroup", "aria-label": "Existing Element file", style: sectionStyle, children: [
                                         jsx_runtime_1.jsx(RadioButton_1.RadioButton, { checked: !overwriteExisting, disabled: submitting, onClick: () => setInput((previous) => ({ ...previous, overwritePlan: null })), children: "Create a copy" }), !overwriteExisting ? (jsx_runtime_1.jsxs("div", { style: {
                                                 ...sectionStyle,
                                                 paddingLeft: 28,
@@ -686,7 +659,7 @@ const ElementInstallConfirmation = ({ state }) => {
                                 ] })) : null, jsx_runtime_1.jsxs("div", { style: warningStyle, children: [
                                     jsx_runtime_1.jsx(ValidationMessage_1.WarningTriangle, { style: warningIconStyle }), jsx_runtime_1.jsx("p", { style: warningDescriptionStyle, children: "Installed code can access your files and network." })
                                 ] }), jsx_runtime_1.jsxs("details", { style: sourceDetailsStyle, children: [
-                                    jsx_runtime_1.jsx("summary", { className: `${hoverable_1.HOVERABLE_CLASS_NAME} ${hoverable_1.FOCUS_VISIBLE_ONLY_CLASS_NAME}`, style: sourceSummaryStyle, children: "Source code" }), jsx_runtime_1.jsx("div", { style: sourceCodeContainerStyle, children: jsx_runtime_1.jsx("pre", { className: `language-tsx ${is_menu_item_1.HORIZONTAL_SCROLLBAR_CLASSNAME} ${is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME} ${hoverable_1.FOCUS_VISIBLE_ONLY_CLASS_NAME}`, style: sourceCodeBlockStyle, children: jsx_runtime_1.jsx("code", { style: sourceCodeStyle, children: jsx_runtime_1.jsx(react_1.Suspense, { fallback: sourcePreview, children: jsx_runtime_1.jsx(HighlightedElementSource, { source: sourcePreview }) }) }) }) })
+                                    jsx_runtime_1.jsx("summary", { className: `${hoverable_1.HOVERABLE_CLASS_NAME} ${hoverable_1.FOCUS_VISIBLE_ONLY_CLASS_NAME}`, style: sourceSummaryStyle, children: "Source code" }), jsx_runtime_1.jsx("div", { style: sourceCodeContainerStyle, children: jsx_runtime_1.jsx("pre", { className: `language-tsx ${is_menu_item_1.HORIZONTAL_SCROLLBAR_CLASSNAME} ${is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME} ${hoverable_1.FOCUS_VISIBLE_ONLY_CLASS_NAME}`, style: sourceCodeBlockStyle, children: jsx_runtime_1.jsx("code", { style: sourceCodeStyle, children: jsx_runtime_1.jsx(LazySyntaxHighlightedSource_1.LazySyntaxHighlightedSource, { source: sourcePreview }) }) }) })
                                 ] })
                         ] }), jsx_runtime_1.jsx(ModalFooter_1.ModalFooterContainer, { style: footerStyle, children: jsx_runtime_1.jsxs(layout_1.Row, { align: "center", children: [
                                 jsx_runtime_1.jsx(layout_1.Flex, {}), jsx_runtime_1.jsx(Button_1.Button, { disabled: submitting, onClick: cancel, style: cancelStyle, children: "Cancel" }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 1 }), jsx_runtime_1.jsxs(ModalButton_1.ModalButton, { autoFocus: mode === 'current-composition', disabled: !canSubmit, onClick: submit, children: [submitting

package/dist/components/FullscreenToggle.js

@@ -4,11 +4,11 @@ exports.FullScreenToggle = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const remotion_1 = require("remotion");
-const no_react_1 = require("remotion/no-react");
 const use_keybinding_1 = require("../helpers/use-keybinding");
 const use_keyboard_shortcut_label_1 = require("../helpers/use-keyboard-shortcut-label");
 const fullscreen_1 = require("../icons/fullscreen");
 const canvas_ref_1 = require("../state/canvas-ref");
+const ActionTooltip_1 = require("./ActionTooltip");
 const ControlButton_1 = require("./ControlButton");
 const FullScreenToggle = ({ hidden }) => {
     const keybindings = (0, use_keybinding_1.useKeybinding)();
@@ -26,12 +26,9 @@ const FullScreenToggle = ({ hidden }) => {
             }));
     }, [setSize]);
     const shortcut = (0, use_keyboard_shortcut_label_1.useKeyboardShortcutLabel)('enterFullscreen');
-    const accessibilityLabel = [
-        'Enter fullscreen preview',
-        (0, use_keybinding_1.areKeyboardShortcutsDisabled)() || shortcut === '' ? null : `(${shortcut})`,
-    ]
-        .filter(no_react_1.NoReactInternals.truthy)
-        .join(' ');
+    const ariaKeyShortcuts = (0, use_keyboard_shortcut_label_1.useKeyboardShortcutAriaKeyShortcuts)('enterFullscreen');
+    const accessibilityLabel = 'Enter fullscreen preview';
+    const shortcutsDisabled = (0, use_keybinding_1.areKeyboardShortcutsDisabled)();
     (0, react_1.useEffect)(() => {
         const f = keybindings.registerKeybinding({
             event: 'keydown',
@@ -45,6 +42,6 @@ const FullScreenToggle = ({ hidden }) => {
             f.unregister();
         };
     }, [keybindings, onClick]);
-    return hidden ? (jsx_runtime_1.jsx("button", { id: "fullscreen-toggle", type: "button", style: { display: 'none' }, onClick: onClick })) : (jsx_runtime_1.jsx(ControlButton_1.ControlButton, { id: "fullscreen-toggle", title: accessibilityLabel, "aria-label": accessibilityLabel, onClick: onClick, children: (color) => (jsx_runtime_1.jsx(fullscreen_1.FullscreenIcon, { color: color, style: { width: 18, height: 18 } })) }));
+    return hidden ? (jsx_runtime_1.jsx("button", { id: "fullscreen-toggle", type: "button", style: { display: 'none' }, onClick: onClick })) : (jsx_runtime_1.jsx(ActionTooltip_1.ActionTooltip, { label: "Fullscreen", shortcut: shortcutsDisabled ? null : shortcut, delay: 800, dismissOnClick: true, children: jsx_runtime_1.jsx(ControlButton_1.ControlButton, { id: "fullscreen-toggle", title: "", "aria-label": accessibilityLabel, "aria-keyshortcuts": shortcutsDisabled ? undefined : ariaKeyShortcuts || undefined, onClick: onClick, children: (color) => (jsx_runtime_1.jsx(fullscreen_1.FullscreenIcon, { color: color, style: { width: 18, height: 18 } })) }) }));
 };
 exports.FullScreenToggle = FullScreenToggle;

package/dist/components/GlobalKeybindings.js

@@ -4,10 +4,15 @@ exports.GlobalKeybindings = void 0;
 const react_1 = require("react");
 const remotion_1 = require("remotion");
 const calculate_timeline_1 = require("../helpers/calculate-timeline");
+const get_preview_file_type_1 = require("../helpers/get-preview-file-type");
+const pick_color_1 = require("../helpers/pick-color");
 const studio_runtime_config_1 = require("../helpers/studio-runtime-config");
 const timeline_node_path_key_1 = require("../helpers/timeline-node-path-key");
 const use_keybinding_1 = require("../helpers/use-keybinding");
 const checkerboard_1 = require("../state/checkerboard");
+const editor_guides_1 = require("../state/editor-guides");
+const editor_outlines_1 = require("../state/editor-outlines");
+const editor_rulers_1 = require("../state/editor-rulers");
 const editor_snapping_1 = require("../state/editor-snapping");
 const modals_1 = require("../state/modals");
 const AskAiModal_1 = require("./AskAiModal");
@@ -27,6 +32,59 @@ const GlobalKeybindings = () => {
     const { setSelectedModal } = (0, react_1.useContext)(modals_1.SetSelectedModalContext);
     const { setCheckerboard } = (0, react_1.useContext)(checkerboard_1.CheckerboardContext);
     const { setEditorSnapping } = (0, react_1.useContext)(editor_snapping_1.EditorSnappingContext);
+    const { canvasContent } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
+    const { setEditorShowOutlines } = (0, react_1.useContext)(editor_outlines_1.EditorShowOutlinesContext);
+    const { editorShowRulers, setEditorShowRulers } = (0, react_1.useContext)(editor_rulers_1.EditorShowRulersContext);
+    const { editorShowGuides, setEditorShowGuides } = (0, react_1.useContext)(editor_guides_1.EditorShowGuidesContext);
+    const showGuides = (canvasContent === null || canvasContent === void 0 ? void 0 : canvasContent.type) === 'composition';
+    const showCanvasViewControls = showGuides ||
+        ((canvasContent === null || canvasContent === void 0 ? void 0 : canvasContent.type) === 'asset' &&
+            (0, get_preview_file_type_1.getPreviewFileType)(canvasContent.asset) === 'video');
+    (0, react_1.useEffect)(() => {
+        if (!showCanvasViewControls)
+            return;
+        const outlines = showGuides
+            ? keybindings.registerKeybinding({
+                event: 'keydown',
+                action: 'toggleOutlines',
+                callback: (event) => {
+                    if (!event.repeat)
+                        setEditorShowOutlines((current) => !current);
+                },
+                preventDefault: true,
+                triggerIfInputFieldFocused: false,
+                keepRegisteredWhenNotHighestContext: false,
+            })
+            : null;
+        const rulers = keybindings.registerKeybinding({
+            event: 'keydown',
+            action: 'toggleRulersAndGuides',
+            callback: (event) => {
+                if (event.repeat)
+                    return;
+                const visible = editorShowRulers || (showGuides && editorShowGuides);
+                setEditorShowRulers(() => !visible);
+                if (showGuides)
+                    setEditorShowGuides(() => !visible);
+            },
+            preventDefault: true,
+            triggerIfInputFieldFocused: false,
+            keepRegisteredWhenNotHighestContext: false,
+        });
+        return () => {
+            outlines === null || outlines === void 0 ? void 0 : outlines.unregister();
+            rulers.unregister();
+        };
+    }, [
+        keybindings,
+        showCanvasViewControls,
+        showGuides,
+        editorShowRulers,
+        editorShowGuides,
+        setEditorShowOutlines,
+        setEditorShowRulers,
+        setEditorShowGuides,
+    ]);
     const currentSelection = (0, TimelineSelection_1.useCurrentTimelineSelectionStateAsRef)();
     const { sequences } = (0, react_1.useContext)(remotion_1.Internals.SequenceManager);
     const videoConfig = remotion_1.Internals.useUnsafeVideoConfig();
@@ -127,6 +185,18 @@ const GlobalKeybindings = () => {
                 preventDefault: true,
             })
             : null;
+        const colorPicker = 'EyeDropper' in window
+            ? keybindings.registerKeybinding({
+                event: 'keydown',
+                action: 'pickColor',
+                callback: () => {
+                    (0, pick_color_1.pickColor)();
+                },
+                triggerIfInputFieldFocused: false,
+                keepRegisteredWhenNotHighestContext: false,
+                preventDefault: true,
+            })
+            : null;
         const sequencePropKeys = sequencePropShortcuts.map(({ action, fieldKey }) => keybindings.registerKeybinding({
             event: 'keydown',
             action,
@@ -217,6 +287,7 @@ const GlobalKeybindings = () => {
             cmdKKey.unregister();
             cmdSKey.unregister();
             cmdIKey === null || cmdIKey === void 0 ? void 0 : cmdIKey.unregister();
+            colorPicker === null || colorPicker === void 0 ? void 0 : colorPicker.unregister();
             pageDown.unregister();
             pageUp.unregister();
             shiftMKey.unregister();

package/dist/components/InspectorLocationCopy.js

@@ -69,6 +69,6 @@ const InspectorLocationCopy = ({ children, location, name, openInEditorLocation
                     opacity: showAction ? 1 : 0,
                     pointerEvents: showAction ? 'auto' : 'none',
                 }, children: [
-                    jsx_runtime_1.jsx(InspectorOpenInEditor_1.InspectorOpenInEditor, { locationType: null, contextForAgents: contextForAgents, location: openInEditorLocation }), contextForAgents ? (jsx_runtime_1.jsx(InlineAction_1.InlineAction, { variant: null, onClick: onCopy, renderAction: renderCopyAction, title: "Copy context for agents" })) : null] })) : null] }));
+                    jsx_runtime_1.jsx(InspectorOpenInEditor_1.InspectorOpenInEditor, { locationType: null, contextForAgents: contextForAgents, location: openInEditorLocation, showTooltips: false }), contextForAgents ? (jsx_runtime_1.jsx(InlineAction_1.InlineAction, { variant: null, onClick: onCopy, renderAction: renderCopyAction, title: "Copy context for agents" })) : null] })) : null] }));
 };
 exports.InspectorLocationCopy = InspectorLocationCopy;

package/dist/components/InspectorOpenInEditor.d.ts

@@ -5,4 +5,5 @@ export declare const InspectorOpenInEditor: React.FC<{
     readonly location: OriginalPosition | null;
     readonly label?: React.ReactNode;
     readonly locationType: 'file' | 'folder' | null;
+    readonly showTooltips: boolean;
 }>;

package/dist/components/InspectorOpenInEditor.js

@@ -28,13 +28,13 @@ const dropdownSegmentStyle = {
     width: 20,
 };
 const editorButtonIconSize = 18;
-const InspectorOpenInEditor = ({ contextForAgents = null, label, location, locationType }) => {
+const githubButtonIconSize = 16;
+const InspectorOpenInEditor = ({ contextForAgents = null, label, location, locationType, showTooltips, }) => {
     const { previewServerState } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
     const configureDefaultApps = (0, use_configure_default_apps_1.useConfigureDefaultApps)();
     const { canConfigureApps, canOpenInEditor, defaultEditorId, defaultEditorName, editorInfo, } = (0, use_default_editor_info_1.useEditorOpening)(previewServerState.type === 'connected');
     const codingAgentInfo = (0, use_default_editor_info_1.useDefaultCodingAgentInfo)(canConfigureApps);
-    const canOpenInGitHub = (0, get_git_menu_item_1.hasReadOnlyGitSource)();
-    const defaultActionIsGitHub = !canOpenInEditor && canOpenInGitHub;
+    const defaultOpenInTarget = (0, get_git_menu_item_1.getDefaultOpenInTarget)({ canOpenInEditor });
     const openWithEditor = (0, react_1.useCallback)(async (editorId) => {
         if (!location) {
             return;
@@ -57,21 +57,21 @@ const InspectorOpenInEditor = ({ contextForAgents = null, label, location, locat
             (0, NotificationCenter_1.showNotification)(err.message, 2000);
         }
     }, [contextForAgents]);
-    const defaultAppName = defaultActionIsGitHub
+    const defaultAppName = defaultOpenInTarget === 'git-source'
         ? 'GitHub'
         : (defaultEditorName !== null && defaultEditorName !== void 0 ? defaultEditorName : 'default editor');
-    const canOpenDefault = location !== null && (canOpenInEditor || canOpenInGitHub);
+    const canOpenDefault = location !== null && defaultOpenInTarget !== null;
     const onOpenDefault = (0, react_1.useCallback)((event) => {
         event.stopPropagation();
-        if (defaultActionIsGitHub) {
+        if (defaultOpenInTarget === 'git-source') {
             (0, get_git_menu_item_1.openGitSource)({ folder: locationType === 'folder', location });
         }
-        else if (defaultEditorId) {
+        else if (defaultOpenInTarget === 'editor' && defaultEditorId) {
             openWithEditor(defaultEditorId).catch(() => undefined);
         }
     }, [
-        defaultActionIsGitHub,
         defaultEditorId,
+        defaultOpenInTarget,
         location,
         locationType,
         openWithEditor,
@@ -127,15 +127,15 @@ const InspectorOpenInEditor = ({ contextForAgents = null, label, location, locat
                 });
             },
         });
-        return defaultActionIsGitHub
+        return defaultOpenInTarget === 'git-source'
             ? items.filter((item) => item.id !== 'open-in-github')
             : items;
     }, [
         codingAgentInfo,
         canOpenInEditor,
         configureDefaultApps,
-        defaultActionIsGitHub,
         defaultEditorId,
+        defaultOpenInTarget,
         editorInfo,
         location,
         locationType,
@@ -152,10 +152,11 @@ const InspectorOpenInEditor = ({ contextForAgents = null, label, location, locat
                 idleColor: colors_1.LIGHT_TEXT,
                 onClick: onOpenDefault,
                 onPointerDown: null,
-                renderContent: () => (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [label, defaultActionIsGitHub ? (jsx_runtime_1.jsx(github_1.GitHubIcon, { size: editorButtonIconSize })) : (jsx_runtime_1.jsx(editor_1.EditorIcon, { editorId: defaultEditorId, size: editorButtonIconSize }))] })),
+                renderContent: () => (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [label, defaultOpenInTarget === 'git-source' ? (jsx_runtime_1.jsx(github_1.GitHubIcon, { size: githubButtonIconSize })) : (jsx_runtime_1.jsx(editor_1.EditorIcon, { editorId: defaultEditorId, size: editorButtonIconSize }))] })),
                 segmentId: 'default-editor',
                 style: mainSegmentStyle,
-                title: `Open in ${defaultAppName}`,
+                title: showTooltips ? '' : `Open in ${defaultAppName}`,
+                tooltipLabel: showTooltips ? `Open in ${defaultAppName}` : null,
                 type: 'action',
             },
         ];
@@ -171,7 +172,8 @@ const InspectorOpenInEditor = ({ contextForAgents = null, label, location, locat
                 segmentId: 'another-app',
                 selectedId: null,
                 style: dropdownSegmentStyle,
-                title: 'Open in another app',
+                title: showTooltips ? '' : 'Open in another app',
+                tooltipLabel: showTooltips ? 'Open in another app' : null,
                 type: 'menu',
                 values: menuItems,
             });
@@ -179,17 +181,18 @@ const InspectorOpenInEditor = ({ contextForAgents = null, label, location, locat
         return result;
     }, [
         canOpenDefault,
-        defaultActionIsGitHub,
         defaultAppName,
         defaultEditorId,
+        defaultOpenInTarget,
         label,
         menuItems,
         onOpenDefault,
+        showTooltips,
     ]);
     if ((0, browser_studio_operations_1.getBrowserStudioOperations)() !== null) {
         return null;
     }
-    if (previewServerState.type !== 'connected' && !canOpenInGitHub) {
+    if (previewServerState.type !== 'connected' && defaultOpenInTarget === null) {
         return null;
     }
     return jsx_runtime_1.jsx(SegmentedButton_1.SegmentedButton, { segments: segments, style: null, title: null });

package/dist/components/InspectorPanel/CompositionInspectorHeader.js

@@ -38,7 +38,7 @@ const CompositionInspectorHeader = () => {
     const { compositions } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
     const { previewServerState } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
     const { canOpenInEditor, defaultEditorId } = (0, use_default_editor_info_1.useEditorOpening)(previewServerState.type === 'connected');
-    const canOpenInGitHub = (0, get_git_menu_item_1.hasReadOnlyGitSource)();
+    const defaultOpenInTarget = (0, get_git_menu_item_1.getDefaultOpenInTarget)({ canOpenInEditor });
     const currentComposition = (0, react_1.useMemo)(() => {
         var _a;
         if (!video) {
@@ -75,16 +75,16 @@ const CompositionInspectorHeader = () => {
         });
     }, [compositionFile, compositionId]);
     const openSourceLocation = (0, react_1.useCallback)((location) => {
-        if (canOpenInEditor && defaultEditorId) {
+        if (defaultOpenInTarget === 'editor' && defaultEditorId) {
             (0, open_in_editor_1.openOriginalPositionInEditor)(location, defaultEditorId).catch((err) => {
                 (0, NotificationCenter_1.showNotification)(err.message, 2000);
             });
             return;
         }
-        if (canOpenInGitHub) {
+        if (defaultOpenInTarget === 'git-source') {
             (0, get_git_menu_item_1.openGitSource)({ folder: false, location });
         }
-    }, [canOpenInEditor, canOpenInGitHub, defaultEditorId]);
+    }, [defaultEditorId, defaultOpenInTarget]);
     const openFileLocation = (0, react_1.useCallback)(() => {
         if (validatedLocation) {
             openSourceLocation(validatedLocation);
@@ -102,9 +102,8 @@ const CompositionInspectorHeader = () => {
         return (0, is_composition_still_1.isCompositionStill)(video) ? (jsx_runtime_1.jsx(still_1.StillIcon, { color: color, style: sourceLocationIconStyle })) : (jsx_runtime_1.jsx(video_1.FilmIcon, { color: color, style: sourceLocationIconStyle }));
     }, [video]);
     return (jsx_runtime_1.jsx(InspectorInfoHeader_1.InspectorInfoHeader, { minHeight: COMPOSITION_INSPECTOR_HEADER_HEIGHT, padding: "4px 0", children: video ? (jsx_runtime_1.jsxs(InspectorLocationCopy_1.InspectorLocationCopy, { location: validatedLocation, name: video.id, openInEditorLocation: componentLocation, children: [
-                jsx_runtime_1.jsx(InlineCompositionName_1.InlineCompositionName, { compositionId: video.id, stack: (_e = currentComposition === null || currentComposition === void 0 ? void 0 : currentComposition.stack) !== null && _e !== void 0 ? _e : null, compositions: compositions }, video.id), jsx_runtime_1.jsx(InspectorSourceLocation_1.InspectorSourceLocation, { location: validatedLocation, canOpen: validatedLocation !== null && (canOpenInEditor || canOpenInGitHub), onOpen: openFileLocation, renderIcon: renderCompositionIcon, size: "quick-action" }), compositionComponentInfo === null &&
+                jsx_runtime_1.jsx(InlineCompositionName_1.InlineCompositionName, { compositionId: video.id, stack: (_e = currentComposition === null || currentComposition === void 0 ? void 0 : currentComposition.stack) !== null && _e !== void 0 ? _e : null, compositions: compositions }, video.id), jsx_runtime_1.jsx(InspectorSourceLocation_1.InspectorSourceLocation, { location: validatedLocation, canOpen: validatedLocation !== null && defaultOpenInTarget !== null, onOpen: openFileLocation, renderIcon: renderCompositionIcon, size: "quick-action" }), compositionComponentInfo === null &&
                     compositionFile !== null &&
-                    compositionId !== null ? (jsx_runtime_1.jsx("div", { "aria-hidden": true, style: componentLocationPlaceholder })) : (jsx_runtime_1.jsx(InspectorSourceLocation_1.InspectorSourceLocation, { location: componentLocation, canOpen: componentLocation !== null &&
-                        (canOpenInEditor || canOpenInGitHub), onOpen: openComponentLocation, renderIcon: renderReactIcon, size: "quick-action" }))] })) : null }));
+                    compositionId !== null ? (jsx_runtime_1.jsx("div", { "aria-hidden": true, style: componentLocationPlaceholder })) : (jsx_runtime_1.jsx(InspectorSourceLocation_1.InspectorSourceLocation, { location: componentLocation, canOpen: componentLocation !== null && defaultOpenInTarget !== null, onOpen: openComponentLocation, renderIcon: renderReactIcon, size: "quick-action" }))] })) : null }));
 };
 exports.CompositionInspectorHeader = CompositionInspectorHeader;

package/dist/components/InspectorPanel/CompositionMetadata.js

@@ -242,6 +242,7 @@ const CompositionMetadata = ({ compositionId, disabled, stack }) => {
             dryRun: false,
             signal: new AbortController().signal,
             symbolicatedStack,
+            undoRedoNavigation: null,
         })
             .then((result) => {
             if (!result.success) {

package/dist/components/InspectorPanel/ElementLibraryButton.js

@@ -81,6 +81,7 @@ const ElementLibraryButton = () => {
             selectedId: null,
             style: elementLibraryDropdownSegmentStyle,
             title: 'Choose an Element library to browse inside Studio.',
+            tooltipLabel: null,
             type: 'menu',
             values: [
                 {

package/dist/components/InspectorPanel/SequenceInspectorHeader.js

@@ -5,7 +5,6 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const client_id_1 = require("../../helpers/client-id");
 const colors_1 = require("../../helpers/colors");
-const get_git_menu_item_1 = require("../../helpers/get-git-menu-item");
 const react_2 = require("../../icons/react");
 const InlineEditableTitle_1 = require("../InlineEditableTitle");
 const InspectorInfoHeader_1 = require("../InspectorInfoHeader");
@@ -48,8 +47,7 @@ const externalTabIndicatorStyle = {
     width: 12,
 };
 const useSequenceInspectorSourceLocation = (sequence) => {
-    const { canOpenInEditor, openInEditor, originalLocation } = (0, use_open_sequence_in_apps_1.useOpenSequenceInApps)(sequence);
-    const canOpenInGitHub = (0, get_git_menu_item_1.hasReadOnlyGitSource)();
+    const { canOpenSource, openSource, originalLocation } = (0, use_open_sequence_in_apps_1.useOpenSequenceInApps)(sequence);
     const validatedLocation = (0, react_1.useMemo)(() => {
         var _a;
         if (!originalLocation ||
@@ -64,16 +62,10 @@ const useSequenceInspectorSourceLocation = (sequence) => {
         };
     }, [originalLocation]);
     const openFileLocation = (0, react_1.useCallback)(() => {
-        if (canOpenInEditor) {
-            openInEditor(null);
-            return;
-        }
-        if (canOpenInGitHub && validatedLocation) {
-            (0, get_git_menu_item_1.openGitSource)({ folder: false, location: validatedLocation });
-        }
-    }, [canOpenInEditor, canOpenInGitHub, openInEditor, validatedLocation]);
+        openSource();
+    }, [openSource]);
     return {
-        canOpen: validatedLocation !== null && (canOpenInEditor || canOpenInGitHub),
+        canOpen: validatedLocation !== null && canOpenSource,
         openFileLocation,
         validatedLocation,
     };