@remotion/studio 4.0.518 → 4.0.519

package/dist/components/FixComputedValueModal.js

@@ -1,53 +1,17 @@
 "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.FixComputedValueModal = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = __importStar(require("react"));
+const react_1 = require("react");
 const colors_1 = require("../helpers/colors");
 const copy_text_1 = require("../helpers/copy-text");
-const open_in_editor_1 = require("../helpers/open-in-editor");
-const caret_1 = require("../icons/caret");
 const clipboard_1 = require("../icons/clipboard");
-const CodingAgentIcon_1 = require("./CodingAgentIcon");
+const CodingAgentButton_1 = require("./CodingAgentButton");
 const InlineAction_1 = require("./InlineAction");
 const ModalFooter_1 = require("./ModalFooter");
 const ModalHeader_1 = require("./ModalHeader");
 const DismissableModal_1 = require("./NewComposition/DismissableModal");
 const NotificationCenter_1 = require("./Notifications/NotificationCenter");
-const SegmentedButton_1 = require("./SegmentedButton");
 const SettingsContext_1 = require("./SettingsContext");
 const panelStyle = {
     borderRadius: 6,
@@ -93,28 +57,12 @@ const footer = {
     flex: 'none',
     justifyContent: 'flex-end',
 };
-const mainSegmentStyle = {
-    gap: 6,
-    padding: '0 9px',
-};
-const dropdownSegmentStyle = {
-    padding: 0,
-    width: 20,
-};
-const menuLabel = {
-    color: 'inherit',
-    fontFamily: 'sans-serif',
-    fontSize: 13,
-    lineHeight: '16px',
-};
 const FixComputedValueModal = ({ state }) => {
-    var _a, _b;
+    var _a;
     const { codingAgentInfo } = (0, SettingsContext_1.useSettings)();
     const prompt = `/remotion-interactivity ${state.context} make "${state.prop}" interactive`;
     const installCommand = 'npx remotion skills add';
-    const installedCodingAgents = (_a = codingAgentInfo === null || codingAgentInfo === void 0 ? void 0 : codingAgentInfo.installedCodingAgents) !== null && _a !== void 0 ? _a : [];
-    const defaultCodingAgent = (_b = installedCodingAgents.find((agent) => agent.id === (codingAgentInfo === null || codingAgentInfo === void 0 ? void 0 : codingAgentInfo.defaultCodingAgent))) !== null && _b !== void 0 ? _b : installedCodingAgents[0];
-    const alternativeCodingAgents = installedCodingAgents.filter((agent) => agent.id !== (defaultCodingAgent === null || defaultCodingAgent === void 0 ? void 0 : defaultCodingAgent.id));
+    const hasCodingAgent = ((_a = codingAgentInfo === null || codingAgentInfo === void 0 ? void 0 : codingAgentInfo.installedCodingAgents.length) !== null && _a !== void 0 ? _a : 0) > 0;
     const onCopyPrompt = (0, react_1.useCallback)(() => {
         (0, copy_text_1.copyText)(prompt).catch((err) => {
             (0, NotificationCenter_1.showNotification)(`Could not copy: ${err.message}`, 2000);
@@ -128,80 +76,6 @@ const FixComputedValueModal = ({ state }) => {
     const renderCopyAction = (0, react_1.useCallback)((color) => {
         return jsx_runtime_1.jsx(clipboard_1.ClipboardIcon, { color: color, style: copyIcon });
     }, []);
-    const openWithCodingAgent = (0, react_1.useCallback)(async (codingAgentId, codingAgentName) => {
-        try {
-            const response = await (0, open_in_editor_1.openInCodingAgent)(codingAgentId, codingAgentId === 'copilot' ? null : prompt);
-            if (!response.success) {
-                (0, NotificationCenter_1.showNotification)(`Could not open ${codingAgentName}`, 2000);
-            }
-        }
-        catch (err) {
-            (0, NotificationCenter_1.showNotification)(err.message, 2000);
-        }
-    }, [prompt]);
-    const agentMenuItems = react_1.default.useMemo(() => {
-        return alternativeCodingAgents.map((codingAgent) => ({
-            id: `fix-computed-value-in-${codingAgent.id}`,
-            keyHint: null,
-            label: jsx_runtime_1.jsx("span", { style: menuLabel, children: codingAgent.name }),
-            leftItem: jsx_runtime_1.jsx(CodingAgentIcon_1.CodingAgentIcon, { codingAgentId: codingAgent.id, size: 18 }),
-            onClick: () => {
-                openWithCodingAgent(codingAgent.id, codingAgent.nameWithType).catch(() => undefined);
-            },
-            quickSwitcherLabel: null,
-            subMenu: null,
-            type: 'item',
-            value: `coding-agent-${codingAgent.id}`,
-        }));
-    }, [alternativeCodingAgents, openWithCodingAgent]);
-    const segments = react_1.default.useMemo(() => {
-        if (!defaultCodingAgent) {
-            return [];
-        }
-        return [
-            {
-                ariaLabel: `Open in ${defaultCodingAgent.nameWithType}`,
-                buttonId: null,
-                disabled: false,
-                idleColor: colors_1.LIGHT_TEXT,
-                onClick: () => {
-                    openWithCodingAgent(defaultCodingAgent.id, defaultCodingAgent.nameWithType).catch(() => undefined);
-                },
-                onPointerDown: null,
-                renderContent: () => (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
-                        jsx_runtime_1.jsx(CodingAgentIcon_1.CodingAgentIcon, { codingAgentId: defaultCodingAgent.id, size: 18 }),
-                        "Open in ", defaultCodingAgent.name] })),
-                segmentId: 'default-coding-agent',
-                style: mainSegmentStyle,
-                title: `Open in ${defaultCodingAgent.nameWithType}`,
-                type: 'action',
-            },
-            ...(alternativeCodingAgents.length > 0
-                ? [
-                    {
-                        ariaLabel: 'Open in another coding agent',
-                        buttonId: null,
-                        disabled: false,
-                        idleColor: colors_1.LIGHT_TEXT,
-                        leaveLeftSpace: true,
-                        onOpenChange: null,
-                        renderContent: (color) => jsx_runtime_1.jsx(caret_1.CaretDown, { color: color }),
-                        segmentId: 'another-coding-agent',
-                        selectedId: null,
-                        style: dropdownSegmentStyle,
-                        title: 'Open in another coding agent',
-                        type: 'menu',
-                        values: agentMenuItems,
-                    },
-                ]
-                : []),
-        ];
-    }, [
-        agentMenuItems,
-        alternativeCodingAgents.length,
-        defaultCodingAgent,
-        openWithCodingAgent,
-    ]);
     return (jsx_runtime_1.jsxs(DismissableModal_1.DismissableModal, { panelStyle: panelStyle, children: [
             jsx_runtime_1.jsx(ModalHeader_1.ModalHeader, { title: "Fix computed value" }), jsx_runtime_1.jsxs("div", { style: container, children: [state.remotionInteractivitySkillAvailable ? null : (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
                             jsx_runtime_1.jsx("div", { style: text, children: "First, install the Remotion Agent Skills:" }), jsx_runtime_1.jsxs("div", { style: commandField, children: [
@@ -215,6 +89,6 @@ const FixComputedValueModal = ({ state }) => {
                             : 'Then, paste this prompt into your coding agent:' }), jsx_runtime_1.jsxs("div", { style: commandField, children: [
                             jsx_runtime_1.jsx("pre", { style: code, children: prompt }), jsx_runtime_1.jsx(InlineAction_1.InlineAction, { variant: null, onClick: onCopyPrompt, renderAction: renderCopyAction, title: "Copy prompt" })
                         ] })
-                ] }), defaultCodingAgent ? (jsx_runtime_1.jsx(ModalFooter_1.ModalFooterContainer, { style: footer, children: jsx_runtime_1.jsx(SegmentedButton_1.SegmentedButton, { segments: segments, style: null, title: null }) })) : null] }));
+                ] }), hasCodingAgent ? (jsx_runtime_1.jsx(ModalFooter_1.ModalFooterContainer, { style: footer, children: jsx_runtime_1.jsx(CodingAgentButton_1.CodingAgentButton, { label: "Open in", prompt: prompt, size: "compact", style: null }) })) : null] }));
 };
 exports.FixComputedValueModal = FixComputedValueModal;

package/dist/components/InitialCompositionLoader.js

@@ -131,8 +131,9 @@ const InitialCompositionLoader = () => {
             }
             setCanvasContent(newCanvas);
         };
-        window.addEventListener('popstate', onchange);
-        return () => window.removeEventListener('popstate', onchange);
+        const navigationWindow = (0, url_state_1.getNavigationWindow)();
+        navigationWindow.addEventListener('popstate', onchange);
+        return () => navigationWindow.removeEventListener('popstate', onchange);
     }, [
         compositions,
         selectAsset,

package/dist/components/InspectorOpenInEditor.js

@@ -6,14 +6,16 @@ const react_1 = require("react");
 const browser_studio_operations_1 = require("../helpers/browser-studio-operations");
 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 open_in_editor_1 = require("../helpers/open-in-editor");
 const caret_1 = require("../icons/caret");
 const editor_1 = require("../icons/editor");
-const modals_1 = require("../state/modals");
+const github_1 = require("../icons/github");
 const get_open_in_menu_items_1 = require("./get-open-in-menu-items");
 const NotificationCenter_1 = require("./Notifications/NotificationCenter");
 const actions_1 = require("./RenderQueue/actions");
 const SegmentedButton_1 = require("./SegmentedButton");
+const use_configure_default_apps_1 = require("./use-configure-default-apps");
 const use_default_editor_info_1 = require("./use-default-editor-info");
 const mainSegmentStyle = {
     columnGap: 4,
@@ -28,9 +30,11 @@ const dropdownSegmentStyle = {
 const editorButtonIconSize = 18;
 const InspectorOpenInEditor = ({ contextForAgents = null, label, location, locationType }) => {
     const { previewServerState } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
-    const { setSelectedModal } = (0, react_1.useContext)(modals_1.SetSelectedModalContext);
+    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 openWithEditor = (0, react_1.useCallback)(async (editorId) => {
         if (!location) {
             return;
@@ -53,35 +57,36 @@ const InspectorOpenInEditor = ({ contextForAgents = null, label, location, locat
             (0, NotificationCenter_1.showNotification)(err.message, 2000);
         }
     }, [contextForAgents]);
-    const editorName = defaultEditorName !== null && defaultEditorName !== void 0 ? defaultEditorName : 'default editor';
-    const canOpenDefault = location !== null && canOpenInEditor;
+    const defaultAppName = defaultActionIsGitHub
+        ? 'GitHub'
+        : (defaultEditorName !== null && defaultEditorName !== void 0 ? defaultEditorName : 'default editor');
+    const canOpenDefault = location !== null && (canOpenInEditor || canOpenInGitHub);
     const onOpenDefault = (0, react_1.useCallback)((event) => {
         event.stopPropagation();
-        if (defaultEditorId) {
+        if (defaultActionIsGitHub) {
+            (0, get_git_menu_item_1.openGitSource)({ folder: locationType === 'folder', location });
+        }
+        else if (defaultEditorId) {
             openWithEditor(defaultEditorId).catch(() => undefined);
         }
-    }, [defaultEditorId, openWithEditor]);
+    }, [
+        defaultActionIsGitHub,
+        defaultEditorId,
+        location,
+        locationType,
+        openWithEditor,
+    ]);
     const menuItems = (0, react_1.useMemo)(() => {
-        return (0, get_open_in_menu_items_1.getOpenInMenuItems)({
+        const items = (0, get_open_in_menu_items_1.getOpenInMenuItems)({
             codingAgentInfo,
-            editorDisabled: location === null,
+            editorDisabled: location === null || !canOpenInEditor,
             editorInfo,
             excludeCodingAgentId: null,
             excludeEditorId: defaultEditorId,
-            fileManagerDisabled: !(location === null || location === void 0 ? void 0 : location.source),
+            fileManagerDisabled: !(location === null || location === void 0 ? void 0 : location.source) || previewServerState.type !== 'connected',
             folder: locationType === 'folder',
             location,
-            onConfigureApps: canConfigureApps
-                ? () => {
-                    var _a;
-                    var _b;
-                    setSelectedModal({
-                        type: 'settings',
-                        initialTab: 'apps',
-                        initialPublicLicenseKey: (_b = (_a = window.remotion_renderDefaults) === null || _a === void 0 ? void 0 : _a.publicLicenseKey) !== null && _b !== void 0 ? _b : null,
-                    });
-                }
-                : null,
+            onConfigureApps: configureDefaultApps,
             onOpenInCodingAgent: (codingAgentId, codingAgentName) => {
                 openWithCodingAgent(codingAgentId, codingAgentName).catch(() => undefined);
             },
@@ -122,34 +127,40 @@ const InspectorOpenInEditor = ({ contextForAgents = null, label, location, locat
                 });
             },
         });
+        return defaultActionIsGitHub
+            ? items.filter((item) => item.id !== 'open-in-github')
+            : items;
     }, [
         codingAgentInfo,
-        canConfigureApps,
+        canOpenInEditor,
+        configureDefaultApps,
+        defaultActionIsGitHub,
         defaultEditorId,
         editorInfo,
         location,
         locationType,
         openWithCodingAgent,
         openWithEditor,
-        setSelectedModal,
+        previewServerState.type,
     ]);
     const segments = (0, react_1.useMemo)(() => {
-        return [
+        const result = [
             {
-                ariaLabel: `Open in ${editorName}`,
+                ariaLabel: `Open in ${defaultAppName}`,
                 buttonId: null,
                 disabled: !canOpenDefault,
                 idleColor: colors_1.LIGHT_TEXT,
                 onClick: onOpenDefault,
                 onPointerDown: null,
-                renderContent: () => (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [label, jsx_runtime_1.jsx(editor_1.EditorIcon, { editorId: defaultEditorId, size: editorButtonIconSize })
-                    ] })),
+                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 }))] })),
                 segmentId: 'default-editor',
                 style: mainSegmentStyle,
-                title: `Open in ${editorName}`,
+                title: `Open in ${defaultAppName}`,
                 type: 'action',
             },
-            {
+        ];
+        if (menuItems.length > 0) {
+            result.push({
                 ariaLabel: 'Open in another app',
                 buttonId: null,
                 disabled: false,
@@ -163,18 +174,22 @@ const InspectorOpenInEditor = ({ contextForAgents = null, label, location, locat
                 title: 'Open in another app',
                 type: 'menu',
                 values: menuItems,
-            },
-        ];
+            });
+        }
+        return result;
     }, [
         canOpenDefault,
+        defaultActionIsGitHub,
+        defaultAppName,
         defaultEditorId,
-        editorName,
         label,
         menuItems,
         onOpenDefault,
     ]);
-    if (previewServerState.type !== 'connected' ||
-        (0, browser_studio_operations_1.getBrowserStudioOperations)() !== null) {
+    if ((0, browser_studio_operations_1.getBrowserStudioOperations)() !== null) {
+        return null;
+    }
+    if (previewServerState.type !== 'connected' && !canOpenInGitHub) {
         return null;
     }
     return jsx_runtime_1.jsx(SegmentedButton_1.SegmentedButton, { segments: segments, style: null, title: null });

package/dist/components/InspectorPanel/CompositionInspector.js

@@ -5,6 +5,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const browser_studio_operations_1 = require("../../helpers/browser-studio-operations");
 const client_id_1 = require("../../helpers/client-id");
+const colors_1 = require("../../helpers/colors");
 const download_blob_1 = require("../../helpers/download-blob");
 const interactivity_enabled_1 = require("../../helpers/interactivity-enabled");
 const cloud_download_1 = require("../../icons/cloud-download");
@@ -12,8 +13,10 @@ const frame_1 = require("../../icons/frame");
 const solid_1 = require("../../icons/solid");
 const video_1 = require("../../icons/video");
 const VisualControls_1 = require("../../visual-controls/VisualControls");
+const ConfirmationDialog_1 = require("../ConfirmationDialog");
 const DefaultPropsEditor_1 = require("../DefaultPropsEditor");
 const get_zod_if_possible_1 = require("../get-zod-if-possible");
+const LicenseExplanation_1 = require("../LicenseExplanation");
 const is_menu_item_1 = require("../Menu/is-menu-item");
 const NotificationCenter_1 = require("../Notifications/NotificationCenter");
 const ObserveDefaultPropsContext_1 = require("../ObserveDefaultPropsContext");
@@ -33,15 +36,42 @@ const actionIconStyle = {
     height: 18,
     width: 18,
 };
+const downloadLicenseAgreement = {
+    color: colors_1.LIGHT_TEXT,
+    fontFamily: 'sans-serif',
+    fontSize: 14,
+    lineHeight: 1.5,
+    marginBottom: 0,
+    marginTop: 20,
+};
+const downloadLicenseLink = {
+    color: colors_1.LIGHT_TEXT,
+    fontFamily: 'sans-serif',
+    fontSize: 14,
+    lineHeight: '21px',
+};
 const CompositionActions = () => {
     var _a;
     var _b;
     const { canInsertAsset, canInsertComposition, canInsertSolid, canShowInsertAsset, canShowInsertComposition, canShowInsertSolid, insertAsset, insertComposition, insertSolid, } = (0, use_composition_actions_1.useCompositionActions)();
     const downloadProject = (_b = (_a = (0, browser_studio_operations_1.getBrowserStudioOperations)()) === null || _a === void 0 ? void 0 : _a.downloadProject) !== null && _b !== void 0 ? _b : null;
+    const confirm = (0, ConfirmationDialog_1.useConfirmationDialog)();
     const onDownloadProject = (0, react_1.useCallback)(async () => {
         if (downloadProject === null) {
             return;
         }
+        const accepted = await confirm({
+            title: 'Download project',
+            message: (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
+                    jsx_runtime_1.jsx(LicenseExplanation_1.LicenseExplanation, {}), jsx_runtime_1.jsxs("p", { style: downloadLicenseAgreement, children: ["By downloading this project, you agree to comply with the", ' ', jsx_runtime_1.jsx("a", { href: "https://remotion.dev/license", rel: "noopener noreferrer", style: downloadLicenseLink, target: "_blank", children: "license" }),
+                            "."] })
+                ] })),
+            confirmLabel: 'Accept and download',
+            cancelLabel: 'Cancel',
+        });
+        if (!accepted) {
+            return;
+        }
         try {
             const { data, fileName } = await downloadProject();
             const arrayBuffer = data.buffer.slice(data.byteOffset, data.byteOffset + data.byteLength);
@@ -50,14 +80,16 @@ const CompositionActions = () => {
         catch (error) {
             (0, NotificationCenter_1.showNotification)(`Could not download project: ${error instanceof Error ? error.message : String(error)}`, 2000);
         }
-    }, [downloadProject]);
+    }, [confirm, downloadProject]);
     if (!canShowInsertAsset &&
         !canShowInsertComposition &&
         !canShowInsertSolid &&
         downloadProject === null) {
         return null;
     }
-    return (jsx_runtime_1.jsxs(common_1.InspectorQuickActionsSection, { children: [canShowInsertSolid ? (jsx_runtime_1.jsx(common_1.InspectorQuickAction, { disabled: !canInsertSolid, onClick: insertSolid, renderIcon: (color) => (jsx_runtime_1.jsx(solid_1.SolidIcon, { color: color, style: actionIconStyle })), children: "Add Solid" })) : null, canShowInsertAsset ? (jsx_runtime_1.jsx(common_1.InspectorQuickAction, { disabled: !canInsertAsset, onClick: insertAsset, renderIcon: (color) => (jsx_runtime_1.jsx(frame_1.PicIcon, { color: color, style: actionIconStyle })), children: "Add asset..." })) : null, canShowInsertComposition ? (jsx_runtime_1.jsx(common_1.InspectorQuickAction, { disabled: !canInsertComposition, onClick: insertComposition, renderIcon: (color) => (jsx_runtime_1.jsx(video_1.FilmIcon, { color: color, style: actionIconStyle })), children: "Add composition..." })) : null, canShowInsertAsset ? jsx_runtime_1.jsx(ElementLibraryButton_1.ElementLibraryButton, {}) : null, downloadProject ? (jsx_runtime_1.jsx(common_1.InspectorQuickAction, { disabled: false, onClick: onDownloadProject, renderIcon: (color) => (jsx_runtime_1.jsx(cloud_download_1.CloudDownloadIcon, { color: color, style: actionIconStyle })), children: "Download project" })) : null] }));
+    return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
+            jsx_runtime_1.jsx(common_1.InspectorSectionHeader, { children: "Actions" }), jsx_runtime_1.jsxs(common_1.InspectorQuickActionsSection, { children: [canShowInsertSolid ? (jsx_runtime_1.jsx(common_1.InspectorQuickAction, { disabled: !canInsertSolid, onClick: insertSolid, renderIcon: (color) => (jsx_runtime_1.jsx(solid_1.SolidIcon, { color: color, style: actionIconStyle })), children: "Add Solid" })) : null, canShowInsertAsset ? (jsx_runtime_1.jsx(common_1.InspectorQuickAction, { disabled: !canInsertAsset, onClick: insertAsset, renderIcon: (color) => (jsx_runtime_1.jsx(frame_1.PicIcon, { color: color, style: actionIconStyle })), children: "Add asset..." })) : null, canShowInsertComposition ? (jsx_runtime_1.jsx(common_1.InspectorQuickAction, { disabled: !canInsertComposition, onClick: insertComposition, renderIcon: (color) => (jsx_runtime_1.jsx(video_1.FilmIcon, { color: color, style: actionIconStyle })), children: "Add composition..." })) : null, canShowInsertAsset ? jsx_runtime_1.jsx(ElementLibraryButton_1.ElementLibraryButton, {}) : null, downloadProject ? (jsx_runtime_1.jsx(common_1.InspectorQuickAction, { disabled: false, onClick: onDownloadProject, renderIcon: (color) => (jsx_runtime_1.jsx(cloud_download_1.CloudDownloadIcon, { color: color, style: actionIconStyle })), children: "Download project" })) : null] })
+        ] }));
 };
 const CompositionDefaultPropsSection = ({ composition, currentDefaultProps, readOnlyStudio, setDefaultProps }) => {
     var _a;
@@ -139,7 +171,7 @@ const CompositionInspector = ({ composition, currentDefaultProps, readOnlyStudio
     const { previewServerState } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
     return (jsx_runtime_1.jsxs("div", { style: styles_1.scrollableContainer, className: is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME, children: [
             jsx_runtime_1.jsxs("div", { style: styles_1.inspectorOverviewSection, children: [
-                    jsx_runtime_1.jsx(CompositionInspectorHeader_1.CompositionInspectorHeader, {}), jsx_runtime_1.jsx(CompositionMetadata_1.CompositionMetadata, { compositionId: composition.id, disabled: readOnlyStudio || previewServerState.type !== 'connected', stack: composition.stack })
+                    jsx_runtime_1.jsx(CompositionInspectorHeader_1.CompositionInspectorHeader, {}), jsx_runtime_1.jsx(common_1.InspectorSectionHeader, { children: "Metadata" }), jsx_runtime_1.jsx(CompositionMetadata_1.CompositionMetadata, { compositionId: composition.id, disabled: readOnlyStudio || previewServerState.type !== 'connected', stack: composition.stack })
                 ] }), jsx_runtime_1.jsx(CompositionDefaultPropsSection, { composition: composition, currentDefaultProps: currentDefaultProps, readOnlyStudio: readOnlyStudio, setDefaultProps: setDefaultProps }), jsx_runtime_1.jsx(CompositionVisualControlsSection, { readOnlyStudio: readOnlyStudio }), jsx_runtime_1.jsx(CompositionActions, {})
         ] }));
 };

package/dist/components/InspectorPanel/CompositionInspectorHeader.js

@@ -5,6 +5,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const remotion_1 = require("remotion");
 const client_id_1 = require("../../helpers/client-id");
+const get_git_menu_item_1 = require("../../helpers/get-git-menu-item");
 const is_composition_still_1 = require("../../helpers/is-composition-still");
 const open_in_editor_1 = require("../../helpers/open-in-editor");
 const react_2 = require("../../icons/react");
@@ -37,6 +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 currentComposition = (0, react_1.useMemo)(() => {
         var _a;
         if (!video) {
@@ -72,22 +74,27 @@ const CompositionInspectorHeader = () => {
             compositionId,
         });
     }, [compositionFile, compositionId]);
-    const openFileLocation = (0, react_1.useCallback)(() => {
-        if (!validatedLocation || !defaultEditorId || !canOpenInEditor) {
+    const openSourceLocation = (0, react_1.useCallback)((location) => {
+        if (canOpenInEditor && defaultEditorId) {
+            (0, open_in_editor_1.openOriginalPositionInEditor)(location, defaultEditorId).catch((err) => {
+                (0, NotificationCenter_1.showNotification)(err.message, 2000);
+            });
             return;
         }
-        (0, open_in_editor_1.openOriginalPositionInEditor)(validatedLocation, defaultEditorId).catch((err) => {
-            (0, NotificationCenter_1.showNotification)(err.message, 2000);
-        });
-    }, [canOpenInEditor, defaultEditorId, validatedLocation]);
+        if (canOpenInGitHub) {
+            (0, get_git_menu_item_1.openGitSource)({ folder: false, location });
+        }
+    }, [canOpenInEditor, canOpenInGitHub, defaultEditorId]);
+    const openFileLocation = (0, react_1.useCallback)(() => {
+        if (validatedLocation) {
+            openSourceLocation(validatedLocation);
+        }
+    }, [openSourceLocation, validatedLocation]);
     const openComponentLocation = (0, react_1.useCallback)(() => {
-        if (!componentLocation || !defaultEditorId || !canOpenInEditor) {
-            return;
+        if (componentLocation) {
+            openSourceLocation(componentLocation);
         }
-        (0, open_in_editor_1.openOriginalPositionInEditor)(componentLocation, defaultEditorId).catch((err) => {
-            (0, NotificationCenter_1.showNotification)(err.message, 2000);
-        });
-    }, [canOpenInEditor, componentLocation, defaultEditorId]);
+    }, [componentLocation, openSourceLocation]);
     const renderCompositionIcon = (0, react_1.useCallback)((color) => {
         if (!video) {
             return null;
@@ -95,8 +102,9 @@ 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, 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 && (canOpenInEditor || canOpenInGitHub), 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, 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 &&
+                        (canOpenInEditor || canOpenInGitHub), onOpen: openComponentLocation, renderIcon: renderReactIcon, size: "quick-action" }))] })) : null }));
 };
 exports.CompositionInspectorHeader = CompositionInspectorHeader;

package/dist/components/InspectorPanel/ConnectedCompositionsSection.js

@@ -36,7 +36,9 @@ const useConnectedCompositions = ({ track, }) => {
 };
 exports.useConnectedCompositions = useConnectedCompositions;
 const ConnectedCompositionsSection = ({ connectedCompositions }) => {
-    return (jsx_runtime_1.jsx("div", { style: compositionListStyle, children: connectedCompositions.map((composition) => (jsx_runtime_1.jsx(ConnectedCompositionRow, { composition: composition }, composition.id))) }));
+    return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
+            jsx_runtime_1.jsx(common_1.InspectorSectionHeader, { children: "Connected compositions" }), jsx_runtime_1.jsx("div", { style: compositionListStyle, children: connectedCompositions.map((composition) => (jsx_runtime_1.jsx(ConnectedCompositionRow, { composition: composition }, composition.id))) })
+        ] }));
 };
 exports.ConnectedCompositionsSection = ConnectedCompositionsSection;
 const ConnectedCompositionRow = ({ composition }) => {

package/dist/components/InspectorPanel/SequenceInspectorHeader.d.ts

@@ -2,7 +2,7 @@ import React from 'react';
 import type { CodePosition } from '../../error-overlay/react-overlay/utils/get-source-map';
 import type { TimelineTrackData } from '../../helpers/get-timeline-sequence-sort-key';
 type SequenceInspectorSourceLocation = {
-    readonly canOpenInEditor: boolean;
+    readonly canOpen: boolean;
     readonly openFileLocation: () => void;
     readonly validatedLocation: CodePosition | null;
 };

package/dist/components/InspectorPanel/SequenceInspectorHeader.js

@@ -5,6 +5,7 @@ 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,6 +49,7 @@ const externalTabIndicatorStyle = {
 };
 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 validatedLocation = (0, react_1.useMemo)(() => {
         var _a;
         if (!originalLocation ||
@@ -62,13 +64,16 @@ const useSequenceInspectorSourceLocation = (sequence) => {
         };
     }, [originalLocation]);
     const openFileLocation = (0, react_1.useCallback)(() => {
-        if (!canOpenInEditor) {
+        if (canOpenInEditor) {
+            openInEditor(null);
             return;
         }
-        openInEditor(null);
-    }, [canOpenInEditor, openInEditor]);
+        if (canOpenInGitHub && validatedLocation) {
+            (0, get_git_menu_item_1.openGitSource)({ folder: false, location: validatedLocation });
+        }
+    }, [canOpenInEditor, canOpenInGitHub, openInEditor, validatedLocation]);
     return {
-        canOpenInEditor,
+        canOpen: validatedLocation !== null && (canOpenInEditor || canOpenInGitHub),
         openFileLocation,
         validatedLocation,
     };
@@ -105,7 +110,7 @@ const SequenceInspectorHeader = ({ sourceLocation, track }) => {
     }, [saveName]);
     return (jsx_runtime_1.jsx(InspectorInfoHeader_1.InspectorInfoHeader, { contentSized: true, padding: "4px 0", children: jsx_runtime_1.jsxs(InspectorLocationCopy_1.InspectorLocationCopy, { location: sourceLocation.validatedLocation, name: componentName !== null && componentName !== void 0 ? componentName : null, openInEditorLocation: sourceLocation.validatedLocation, children: [
                 jsx_runtime_1.jsx(InlineEditableTitle_1.InlineEditableTitle, { value: sequenceDisplayName, canRename: canRename, onCommit: onRename, size: "inspector" }), documentationLink ? (jsx_runtime_1.jsxs(common_1.InspectorQuickAction, { disabled: false, style: defaultCursor, title: "Open component docs", onClick: openDocumentationLink, children: [componentName, jsx_runtime_1.jsx("svg", { "aria-hidden": "true", viewBox: "0 0 16 16", style: externalTabIndicatorStyle, 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" }) })
-                    ] })) : (jsx_runtime_1.jsx("div", { style: subtitleStyle, children: componentName })), jsx_runtime_1.jsx(InspectorSourceLocation_1.InspectorSourceLocation, { location: sourceLocation.validatedLocation, canOpen: sourceLocation.canOpenInEditor, onOpen: sourceLocation.openFileLocation, renderIcon: renderReactIcon, size: "quick-action" })
+                    ] })) : (jsx_runtime_1.jsx("div", { style: subtitleStyle, children: componentName })), jsx_runtime_1.jsx(InspectorSourceLocation_1.InspectorSourceLocation, { location: sourceLocation.validatedLocation, canOpen: sourceLocation.canOpen, onOpen: sourceLocation.openFileLocation, renderIcon: renderReactIcon, size: "quick-action" })
             ] }) }));
 };
 exports.SequenceInspectorHeader = SequenceInspectorHeader;

package/dist/components/InspectorPanel/SequenceSelectionInspector.js

@@ -168,7 +168,7 @@ const SequenceExpandedInspector = ({ track, readOnlyStudio }) => {
         return jsx_runtime_1.jsx(common_1.InspectorMessage, { children: "Sequence inspector unavailable" });
     }
     return (jsx_runtime_1.jsxs("div", { style: styles_1.selectedContainer, className: is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME, onPointerDown: selectSequenceOnInspectorPointerDown, children: [
-            jsx_runtime_1.jsx(SequenceInspectorHeader_1.SequenceInspectorHeader, { sourceLocation: sourceLocation, track: track }, stackKey !== null && stackKey !== void 0 ? stackKey : track.sequence.id), jsx_runtime_1.jsx(SequenceInspectorHeader_1.SequenceInspectorDuplicationSection, { track: track }), connectedCompositions.length > 0 ? (jsx_runtime_1.jsx(ConnectedCompositionsSection_1.ConnectedCompositionsSection, { connectedCompositions: connectedCompositions })) : null, validatedLocation ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [jsx_runtime_1.jsx(InspectorSequenceSection_1.InspectorSequenceSection, { sequence: track.sequence, readOnlyStudio: readOnlyStudio, validatedLocation: validatedLocation, nodePathInfo: track.nodePathInfo, keyframeDisplayOffset: track.keyframeDisplayOffset, renderTransformControls: () => jsx_runtime_1.jsx(AlignmentControls_1.AlignmentControls, { track: track }) }), jsx_runtime_1.jsxs(common_1.InspectorQuickActionsSection, { children: [
+            jsx_runtime_1.jsx(SequenceInspectorHeader_1.SequenceInspectorHeader, { sourceLocation: sourceLocation, track: track }, stackKey !== null && stackKey !== void 0 ? stackKey : track.sequence.id), jsx_runtime_1.jsx(SequenceInspectorHeader_1.SequenceInspectorDuplicationSection, { track: track }), connectedCompositions.length > 0 ? (jsx_runtime_1.jsx(ConnectedCompositionsSection_1.ConnectedCompositionsSection, { connectedCompositions: connectedCompositions })) : null, validatedLocation ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [jsx_runtime_1.jsx(InspectorSequenceSection_1.InspectorSequenceSection, { sequence: track.sequence, readOnlyStudio: readOnlyStudio, validatedLocation: validatedLocation, nodePathInfo: track.nodePathInfo, keyframeDisplayOffset: track.keyframeDisplayOffset, renderTransformControls: () => jsx_runtime_1.jsx(AlignmentControls_1.AlignmentControls, { track: track }) }), jsx_runtime_1.jsx(common_1.InspectorSectionHeader, { children: "Actions" }), jsx_runtime_1.jsxs(common_1.InspectorQuickActionsSection, { children: [
                             jsx_runtime_1.jsx(SplitSequenceQuickAction, { selection: sequenceSelection, track: track }), jsx_runtime_1.jsx(SequenceSourceQuickActions, { selection: sequenceSelection, track: track, validatedSource: validatedLocation.source })
                         ] })
                 ] })) : (jsx_runtime_1.jsx(common_1.InspectorMessage, { children: "Source controls unavailable" }))] }));

package/dist/components/InspectorPanel/common.js

@@ -76,6 +76,7 @@ const inlineLabelText = {
     minWidth: 0,
     overflow: 'hidden',
     textOverflow: 'ellipsis',
+    userSelect: 'none',
     whiteSpace: 'nowrap',
 };
 const inlineLabelIcon = {

package/dist/components/InspectorPanel/styles.js

@@ -169,6 +169,7 @@ exports.detailLabel = {
     minWidth: 0,
     overflow: 'hidden',
     textOverflow: 'ellipsis',
+    userSelect: 'none',
     whiteSpace: 'nowrap',
 };
 exports.detailValue = {