@remotion/studio 4.0.524 → 4.0.526

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,35 +57,37 @@ 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,
     ]);
     const menuItems = (0, react_1.useMemo)(() => {
         const items = (0, get_open_in_menu_items_1.getOpenInMenuItems)({
+            canOpenDesktopApps: canConfigureApps,
             codingAgentInfo,
             editorDisabled: location === null || !canOpenInEditor,
             editorInfo,
             excludeCodingAgentId: null,
             excludeEditorId: defaultEditorId,
+            excludeGitSource: defaultOpenInTarget === 'git-source',
             fileManagerDisabled: !(location === null || location === void 0 ? void 0 : location.source) || previewServerState.type !== 'connected',
             folder: locationType === 'folder',
-            location,
+            gitSourceDisabled: location === null,
             onConfigureApps: configureDefaultApps,
             onOpenInCodingAgent: (codingAgentId, codingAgentName) => {
                 openWithCodingAgent(codingAgentId, codingAgentName).catch(() => undefined);
@@ -112,6 +114,9 @@ const InspectorOpenInEditor = ({ contextForAgents = null, label, location, locat
                     (0, NotificationCenter_1.showNotification)(`Could not open Git client: ${err.message}`, 2000);
                 });
             },
+            onOpenInGitSource: () => {
+                (0, get_git_menu_item_1.openGitSource)({ folder: locationType === 'folder', location });
+            },
             onOpenInTerminal: (terminalId) => {
                 if (!(location === null || location === void 0 ? void 0 : location.source) || locationType !== 'folder') {
                     return;
@@ -127,15 +132,14 @@ const InspectorOpenInEditor = ({ contextForAgents = null, label, location, locat
                 });
             },
         });
-        return defaultActionIsGitHub
-            ? items.filter((item) => item.id !== 'open-in-github')
-            : items;
+        return items;
     }, [
         codingAgentInfo,
+        canConfigureApps,
         canOpenInEditor,
         configureDefaultApps,
-        defaultActionIsGitHub,
         defaultEditorId,
+        defaultOpenInTarget,
         editorInfo,
         location,
         locationType,
@@ -152,10 +156,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 +176,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 +185,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/CollapsibleInspectorSection.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+export declare const CollapsibleInspectorSection: React.FC<{
+    readonly children: React.ReactNode;
+    readonly collapsible: boolean;
+    readonly label: string;
+    readonly sectionId: string;
+}>;

package/dist/components/InspectorPanel/CollapsibleInspectorSection.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CollapsibleInspectorSection = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const CollapsibleInspectorSectionHeader_1 = require("./CollapsibleInspectorSectionHeader");
+const common_1 = require("./common");
+const use_inspector_section_expanded_1 = require("./use-inspector-section-expanded");
+const CollapsibleInspectorSection = ({ children, collapsible, label, sectionId }) => {
+    const [expanded, setExpanded] = (0, use_inspector_section_expanded_1.useInspectorSectionExpanded)(sectionId);
+    return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
+            jsx_runtime_1.jsx(common_1.InspectorSectionHeader, { children: jsx_runtime_1.jsx(CollapsibleInspectorSectionHeader_1.CollapsibleInspectorSectionHeader, { action: null, expanded: expanded, label: label, onToggle: collapsible ? () => setExpanded(!expanded) : null }) }), jsx_runtime_1.jsx(common_1.InspectorSectionBody, { expanded: !collapsible || expanded, children: children })
+        ] }));
+};
+exports.CollapsibleInspectorSection = CollapsibleInspectorSection;

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

@@ -3,5 +3,5 @@ export declare const CollapsibleInspectorSectionHeader: React.FC<{
     readonly action: React.ReactNode;
     readonly expanded: boolean;
     readonly label: string;
-    readonly onToggle: () => void;
+    readonly onToggle: (() => void) | null;
 }>;

package/dist/components/InspectorPanel/CollapsibleInspectorSectionHeader.js

@@ -5,12 +5,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const colors_1 = require("../../helpers/colors");
 const hoverable_1 = require("../../helpers/hoverable");
 const styles_1 = require("./styles");
-const collapsibleSectionHeaderButton = {
-    appearance: 'none',
-    backgroundColor: 'transparent',
-    border: 'none',
-    borderRadius: 3,
-    cursor: 'default',
+const sectionTitle = {
     display: 'block',
     flex: 1,
     fontFamily: 'Arial, Helvetica, sans-serif',
@@ -25,6 +20,18 @@ const collapsibleSectionHeaderButton = {
     textOverflow: 'ellipsis',
     userSelect: 'none',
     whiteSpace: 'nowrap',
+};
+const staticSectionTitle = {
+    ...sectionTitle,
+    color: colors_1.LIGHT_TEXT,
+};
+const collapsibleSectionHeaderButton = {
+    ...sectionTitle,
+    appearance: 'none',
+    backgroundColor: 'transparent',
+    border: 'none',
+    borderRadius: 3,
+    cursor: 'default',
     ...(0, hoverable_1.hoverableStyle)({
         idleBackground: colors_1.TRANSPARENT,
         hoverBackground: colors_1.TRANSPARENT,
@@ -32,8 +39,12 @@ const collapsibleSectionHeaderButton = {
         hoverColor: colors_1.WHITE,
     }),
 };
+const stopActivationKeyPropagation = (event) => {
+    if (event.key === 'Enter' || event.key === ' ') {
+        event.stopPropagation();
+    }
+};
 const CollapsibleInspectorSectionHeader = ({ action, expanded, label, onToggle }) => {
-    return (jsx_runtime_1.jsxs("div", { style: styles_1.sectionHeaderRow, children: [
-            jsx_runtime_1.jsx("button", { type: "button", "aria-expanded": expanded, "aria-label": `${expanded ? 'Collapse' : 'Expand'} ${label}`, className: `__remotion-inspector-section-title ${hoverable_1.HOVERABLE_CLASS_NAME}`, onClick: onToggle, style: collapsibleSectionHeaderButton, children: label }), action] }));
+    return (jsx_runtime_1.jsxs("div", { style: styles_1.sectionHeaderRow, children: [onToggle === null ? (jsx_runtime_1.jsx("div", { style: staticSectionTitle, children: label })) : (jsx_runtime_1.jsx("button", { type: "button", "aria-expanded": expanded, "aria-label": `${expanded ? 'Collapse' : 'Expand'} ${label}`, className: `__remotion-inspector-section-title ${hoverable_1.HOVERABLE_CLASS_NAME} ${hoverable_1.FOCUS_VISIBLE_ONLY_CLASS_NAME}`, onClick: onToggle, onKeyDown: stopActivationKeyPropagation, onKeyUp: stopActivationKeyPropagation, style: collapsibleSectionHeaderButton, children: label })), action] }));
 };
 exports.CollapsibleInspectorSectionHeader = CollapsibleInspectorSectionHeader;

package/dist/components/InspectorPanel/CompositionInspector.js

@@ -11,6 +11,7 @@ const interactivity_enabled_1 = require("../../helpers/interactivity-enabled");
 const cloud_download_1 = require("../../icons/cloud-download");
 const frame_1 = require("../../icons/frame");
 const solid_1 = require("../../icons/solid");
+const sparkles_1 = require("../../icons/sparkles");
 const video_1 = require("../../icons/video");
 const VisualControls_1 = require("../../visual-controls/VisualControls");
 const ConfirmationDialog_1 = require("../ConfirmationDialog");
@@ -22,16 +23,20 @@ const NotificationCenter_1 = require("../Notifications/NotificationCenter");
 const ObserveDefaultPropsContext_1 = require("../ObserveDefaultPropsContext");
 const DataEditor_1 = require("../RenderModal/DataEditor");
 const infer_zod_schema_from_value_1 = require("../RenderModal/SchemaEditor/infer-zod-schema-from-value");
+const scroll_to_default_props_path_1 = require("../RenderModal/SchemaEditor/scroll-to-default-props-path");
 const zod_schema_type_1 = require("../RenderModal/SchemaEditor/zod-schema-type");
 const WarningIndicatorButton_1 = require("../RenderModal/WarningIndicatorButton");
 const SegmentedControl_1 = require("../SegmentedControl");
 const VisualControlsContent_1 = require("../VisualControls/VisualControlsContent");
+const CollapsibleInspectorSection_1 = require("./CollapsibleInspectorSection");
+const CollapsibleInspectorSectionHeader_1 = require("./CollapsibleInspectorSectionHeader");
 const common_1 = require("./common");
 const CompositionInspectorHeader_1 = require("./CompositionInspectorHeader");
 const CompositionMetadata_1 = require("./CompositionMetadata");
 const ElementLibraryButton_1 = require("./ElementLibraryButton");
 const styles_1 = require("./styles");
 const use_composition_actions_1 = require("./use-composition-actions");
+const use_inspector_section_expanded_1 = require("./use-inspector-section-expanded");
 const actionIconStyle = {
     height: 18,
     width: 18,
@@ -53,7 +58,7 @@ const downloadLicenseLink = {
 const CompositionActions = () => {
     var _a;
     var _b;
-    const { canInsertAsset, canInsertComposition, canInsertSolid, canShowInsertAsset, canShowInsertComposition, canShowInsertSolid, insertAsset, insertComposition, insertSolid, } = (0, use_composition_actions_1.useCompositionActions)();
+    const { canInsertAsset, canInsertComposition, canInsertSolid, canShowInsertAsset, canShowInsertComposition, canShowInsertSolid, insertAsset, insertComposition, insertSolid, generateWithAgent, canShowGenerateWithAgent, } = (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 () => {
@@ -84,12 +89,11 @@ const CompositionActions = () => {
     if (!canShowInsertAsset &&
         !canShowInsertComposition &&
         !canShowInsertSolid &&
+        !canShowGenerateWithAgent &&
         downloadProject === null) {
         return 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] })
-        ] }));
+    return (jsx_runtime_1.jsx(CollapsibleInspectorSection_1.CollapsibleInspectorSection, { collapsible: true, label: "Actions", sectionId: "composition-actions", children: 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, canShowGenerateWithAgent ? (jsx_runtime_1.jsx(common_1.InspectorQuickAction, { disabled: false, onClick: generateWithAgent, renderIcon: (color) => (jsx_runtime_1.jsx(sparkles_1.SparklesIcon, { color: color, style: actionIconStyle })), children: "Generate with agent..." })) : 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;
@@ -97,6 +101,23 @@ const CompositionDefaultPropsSection = ({ composition, currentDefaultProps, read
     const zodTypes = (0, get_zod_if_possible_1.useZodTypesIfPossible)();
     const canSaveDefaultProps = (0, react_1.useContext)(ObserveDefaultPropsContext_1.ObserveDefaultPropsContext);
     const [defaultPropsMode, setDefaultPropsMode] = (0, react_1.useState)('schema');
+    const [expanded, setExpanded] = (0, use_inspector_section_expanded_1.useInspectorSectionExpanded)('composition-default-props');
+    const pendingScroll = (0, react_1.useRef)(null);
+    (0, react_1.useImperativeHandle)(scroll_to_default_props_path_1.expandDefaultPropsEditorRef, () => (onExpanded) => {
+        if (expanded) {
+            onExpanded();
+            return;
+        }
+        pendingScroll.current = onExpanded;
+        setExpanded(true);
+    }, [expanded, setExpanded]);
+    (0, react_1.useLayoutEffect)(() => {
+        if (expanded && pendingScroll.current !== null) {
+            const scroll = pendingScroll.current;
+            pendingScroll.current = null;
+            scroll();
+        }
+    }, [expanded]);
     const compositionId = composition.id;
     (0, react_1.useEffect)(() => {
         setDefaultPropsMode('schema');
@@ -148,11 +169,9 @@ const CompositionDefaultPropsSection = ({ composition, currentDefaultProps, read
         return null;
     }
     return (jsx_runtime_1.jsxs("div", { style: styles_1.compositionDefaultPropsSection, children: [
-            jsx_runtime_1.jsx(common_1.InspectorSectionHeader, { children: jsx_runtime_1.jsxs("div", { style: styles_1.sectionHeaderRow, children: [
-                        jsx_runtime_1.jsxs("div", { style: styles_1.sectionHeaderStart, children: [
-                                jsx_runtime_1.jsx("span", { style: styles_1.sectionHeaderTitle, children: "Default Props" }), jsx_runtime_1.jsx(SegmentedControl_1.SegmentedControl, { items: defaultPropsModeItems, needsWrapping: false, size: "compact" })
-                            ] }), jsx_runtime_1.jsx("div", { style: styles_1.sectionHeaderEnd, children: defaultPropsWarnings.length > 0 ? (jsx_runtime_1.jsx(WarningIndicatorButton_1.WarningIndicatorButton, { setShowWarning: setShowWarning, showWarning: showWarning, warningCount: defaultPropsWarnings.length, size: "compact" })) : null })
-                    ] }) }), defaultPropsWarnings.length > 0 && showWarning ? (jsx_runtime_1.jsx("div", { style: styles_1.defaultPropsWarningContainer, children: jsx_runtime_1.jsx(common_1.InspectorDefaultPropsWarnings, { warnings: defaultPropsWarnings }) })) : null, jsx_runtime_1.jsx(DefaultPropsEditor_1.DefaultPropsEditor, { unresolvedComposition: composition, defaultProps: currentDefaultProps, setDefaultProps: setDefaultProps, propsEditType: "default-props", schemaErrorMode: "compact", layout: "inspector", mode: defaultPropsMode, onModeChange: setDefaultPropsMode, hideModeControls: canShowDefaultPropsSection, warnings: defaultPropsWarnings, showWarning: false, setShowWarning: setShowWarning, hideWarningButton: true }, composition.id)
+            jsx_runtime_1.jsx(common_1.InspectorSectionHeader, { children: jsx_runtime_1.jsx(CollapsibleInspectorSectionHeader_1.CollapsibleInspectorSectionHeader, { action: expanded ? (jsx_runtime_1.jsxs("div", { style: styles_1.sectionHeaderRow, children: [
+                            jsx_runtime_1.jsx(SegmentedControl_1.SegmentedControl, { items: defaultPropsModeItems, needsWrapping: false, size: "compact" }), defaultPropsWarnings.length > 0 ? (jsx_runtime_1.jsx(WarningIndicatorButton_1.WarningIndicatorButton, { setShowWarning: setShowWarning, showWarning: showWarning, warningCount: defaultPropsWarnings.length, size: "compact" })) : null] })) : null, expanded: expanded, label: "Default Props", onToggle: () => setExpanded(!expanded) }) }), jsx_runtime_1.jsxs(common_1.InspectorSectionBody, { expanded: expanded, children: [defaultPropsWarnings.length > 0 && showWarning ? (jsx_runtime_1.jsx("div", { style: styles_1.defaultPropsWarningContainer, children: jsx_runtime_1.jsx(common_1.InspectorDefaultPropsWarnings, { warnings: defaultPropsWarnings }) })) : null, jsx_runtime_1.jsx(DefaultPropsEditor_1.DefaultPropsEditor, { unresolvedComposition: composition, defaultProps: currentDefaultProps, setDefaultProps: setDefaultProps, propsEditType: "default-props", schemaErrorMode: "compact", layout: "inspector", mode: defaultPropsMode, onModeChange: setDefaultPropsMode, hideModeControls: canShowDefaultPropsSection, warnings: defaultPropsWarnings, showWarning: false, setShowWarning: setShowWarning, hideWarningButton: true }, composition.id)
+                ] })
         ] }));
 };
 const CompositionVisualControlsSection = ({ readOnlyStudio }) => {
@@ -163,15 +182,13 @@ const CompositionVisualControlsSection = ({ readOnlyStudio }) => {
     if (!hasVisualControls) {
         return null;
     }
-    return (jsx_runtime_1.jsxs("div", { style: styles_1.compositionVisualControlsSection, children: [
-            jsx_runtime_1.jsx(common_1.InspectorSectionHeader, { children: "Visual Controls" }), jsx_runtime_1.jsx(VisualControlsContent_1.VisualControlsContent, {})
-        ] }));
+    return (jsx_runtime_1.jsx(CollapsibleInspectorSection_1.CollapsibleInspectorSection, { collapsible: true, label: "Visual Controls", sectionId: "composition-visual-controls", children: jsx_runtime_1.jsx(VisualControlsContent_1.VisualControlsContent, {}) }));
 };
 const CompositionInspector = ({ composition, currentDefaultProps, readOnlyStudio, setDefaultProps }) => {
     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(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(CompositionInspectorHeader_1.CompositionInspectorHeader, {}), jsx_runtime_1.jsx(CollapsibleInspectorSection_1.CollapsibleInspectorSection, { collapsible: true, label: "Metadata", sectionId: "composition-metadata", children: 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

@@ -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

@@ -38,9 +38,11 @@ const computedValueStyle = {
     fontSize: 12,
     fontStyle: 'italic',
     lineHeight: '20px',
+    userSelect: 'none',
 };
 const metadataFormatterStyle = {
     fontSize: 13,
+    userSelect: 'none',
 };
 const metadataDraggerStyles = {
     durationInFrames: {
@@ -110,6 +112,7 @@ const metadataLabelText = {
     minWidth: 0,
     overflow: 'hidden',
     textOverflow: 'ellipsis',
+    userSelect: 'none',
     whiteSpace: 'nowrap',
 };
 const dimensionPresets = [
@@ -242,6 +245,7 @@ const CompositionMetadata = ({ compositionId, disabled, stack }) => {
             dryRun: false,
             signal: new AbortController().signal,
             symbolicatedStack,
+            undoRedoNavigation: null,
         })
             .then((result) => {
             if (!result.success) {

package/dist/components/InspectorPanel/ConnectedCompositionsSection.js

@@ -4,7 +4,6 @@ exports.ConnectedCompositionsSection = exports.useConnectedCompositions = void 0
 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_connected_compositions_1 = require("../../helpers/get-connected-compositions");
 const noop_1 = require("../../helpers/noop");
 const modals_1 = require("../../state/modals");
@@ -13,7 +12,8 @@ const CompositionOrStillIcon_1 = require("../CompositionOrStillIcon");
 const ContextMenu_1 = require("../ContextMenu");
 const InitialCompositionLoader_1 = require("../InitialCompositionLoader");
 const use_resolved_stack_1 = require("../Timeline/use-resolved-stack");
-const use_default_editor_info_1 = require("../use-default-editor-info");
+const use_open_in_menu_apps_1 = require("../use-open-in-menu-apps");
+const CollapsibleInspectorSection_1 = require("./CollapsibleInspectorSection");
 const common_1 = require("./common");
 const compositionIconStyle = {
     height: 18,
@@ -36,33 +36,27 @@ const useConnectedCompositions = ({ track, }) => {
 };
 exports.useConnectedCompositions = useConnectedCompositions;
 const ConnectedCompositionsSection = ({ connectedCompositions }) => {
-    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))) })
-        ] }));
+    return (jsx_runtime_1.jsx(CollapsibleInspectorSection_1.CollapsibleInspectorSection, { collapsible: true, label: "Connected compositions", sectionId: "connected-compositions", children: 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 }) => {
     const selectComposition = (0, InitialCompositionLoader_1.useSelectComposition)();
     const { setSelectedModal } = (0, react_1.useContext)(modals_1.SetSelectedModalContext);
-    const connectionStatus = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx)
-        .previewServerState.type;
-    const { defaultEditorId, defaultEditorName } = (0, use_default_editor_info_1.useEditorOpening)(connectionStatus === 'connected');
+    const { connectionStatus, openInApps } = (0, use_open_in_menu_apps_1.useOpenInMenuApps)();
     const resolvedLocation = (0, use_resolved_stack_1.useResolvedStack)(composition.stack);
     const getContextMenuItems = (0, react_1.useCallback)(() => (0, composition_menu_items_1.getCompositionContextMenuItems)({
         closeMenu: noop_1.noop,
         composition,
         connectionStatus,
-        editorId: defaultEditorId,
-        editorName: defaultEditorName,
         includeCompositionManagementItems: false,
+        openInApps,
         readOnlyStudio: window.remotion_isReadOnlyStudio,
         resolvedLocation,
         setSelectedModal,
     }), [
         composition,
         connectionStatus,
-        defaultEditorId,
-        defaultEditorName,
+        openInApps,
         resolvedLocation,
         setSelectedModal,
     ]);

package/dist/components/InspectorPanel/ElementLibraryButton.js

@@ -44,6 +44,7 @@ const elementLibraryDropdownLabelStyle = {
     overflow: 'hidden',
     textAlign: 'left',
     textOverflow: 'ellipsis',
+    userSelect: 'none',
     whiteSpace: 'nowrap',
 };
 const elementLibraryDropdownCaretStyle = {
@@ -81,6 +82,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/GuideInspector.js

@@ -6,6 +6,7 @@ const react_1 = require("react");
 const editor_guides_1 = require("../../state/editor-guides");
 const is_menu_item_1 = require("../Menu/is-menu-item");
 const InputDragger_1 = require("../NewComposition/InputDragger");
+const CollapsibleInspectorSection_1 = require("./CollapsibleInspectorSection");
 const common_1 = require("./common");
 const styles_1 = require("./styles");
 const updateGuidePosition = ({ guideId, persist, position, setGuidesList, }) => {
@@ -48,8 +49,6 @@ const GuideInspector = ({ selection }) => {
     if (!guide) {
         return jsx_runtime_1.jsx(common_1.InspectorMessage, { children: "Guide unavailable" });
     }
-    return (jsx_runtime_1.jsxs("div", { style: styles_1.selectedContainer, className: is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME, children: [
-            jsx_runtime_1.jsxs(common_1.InspectorSectionHeader, { children: [guide.orientation === 'vertical' ? 'Vertical' : 'Horizontal', " guide"] }), jsx_runtime_1.jsx("div", { style: styles_1.guideDetailsContainer, children: jsx_runtime_1.jsx(common_1.InspectorDetailRow, { label: guide.orientation === 'vertical' ? 'X position' : 'Y position', children: jsx_runtime_1.jsx(InputDragger_1.InputDragger, { type: "number", value: guide.position, status: "ok", onValueChange: onValueChange, onValueChangeEnd: onValueChangeEnd, onTextChange: () => undefined, step: 1, formatter: (value) => String(Math.round(Number(value))), rightAlign: true, small: true }) }) })
-        ] }));
+    return (jsx_runtime_1.jsx("div", { style: styles_1.selectedContainer, className: is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME, children: jsx_runtime_1.jsx(CollapsibleInspectorSection_1.CollapsibleInspectorSection, { collapsible: true, label: `${guide.orientation === 'vertical' ? 'Vertical' : 'Horizontal'} guide`, sectionId: "guide", children: jsx_runtime_1.jsx("div", { style: styles_1.guideDetailsContainer, children: jsx_runtime_1.jsx(common_1.InspectorDetailRow, { label: guide.orientation === 'vertical' ? 'X position' : 'Y position', children: jsx_runtime_1.jsx(InputDragger_1.InputDragger, { type: "number", value: guide.position, status: "ok", onValueChange: onValueChange, onValueChangeEnd: onValueChangeEnd, onTextChange: () => undefined, step: 1, formatter: (value) => String(Math.round(Number(value))), rightAlign: true, small: true }) }) }) }) }));
 };
 exports.GuideInspector = GuideInspector;

package/dist/components/InspectorPanel/KeyframeSettings.js

@@ -8,6 +8,7 @@ const client_id_1 = require("../../helpers/client-id");
 const ComboBox_1 = require("../NewComposition/ComboBox");
 const InputDragger_1 = require("../NewComposition/InputDragger");
 const call_update_keyframe_settings_1 = require("../Timeline/call-update-keyframe-settings");
+const CollapsibleInspectorSection_1 = require("./CollapsibleInspectorSection");
 const common_1 = require("./common");
 const styles_1 = require("./styles");
 const comboStyle = {
@@ -132,11 +133,9 @@ const KeyframeSettings = ({ update }) => {
     const posterizeFormatter = (0, react_1.useCallback)((value) => {
         return String(Math.round(Number(value)));
     }, []);
-    return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
-            jsx_runtime_1.jsx(common_1.InspectorSectionHeader, { children: "Keyframe settings" }), jsx_runtime_1.jsxs("div", { style: keyframeSettingsContainer, children: [canEditInterpolationSettings ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
-                            jsx_runtime_1.jsx(common_1.InspectorDetailRow, { label: "Extrapolate left", children: jsx_runtime_1.jsx(ComboBox_1.Combobox, { values: leftValues, selectedId: propStatus.clamping.left, title: "Extrapolate left", style: comboStyle, size: "small" }) }), jsx_runtime_1.jsx(common_1.InspectorDetailRow, { label: "Extrapolate right", children: jsx_runtime_1.jsx(ComboBox_1.Combobox, { values: rightValues, selectedId: propStatus.clamping.right, title: "Extrapolate right", style: comboStyle, size: "small" }) }), jsx_runtime_1.jsx(common_1.InspectorDetailRow, { label: "Output", children: jsx_runtime_1.jsx(ComboBox_1.Combobox, { values: outputValues, selectedId: (_b = propStatus.output) !== null && _b !== void 0 ? _b : 'linear', title: "Output", style: comboStyle, size: "small" }) })
-                        ] })) : null, jsx_runtime_1.jsx(common_1.InspectorDetailRow, { label: "Posterize", children: jsx_runtime_1.jsx(InputDragger_1.InputDragger, { type: "number", value: posterize, status: "ok", onValueChange: onPosterizeChange, onValueChangeEnd: onPosterizeChangeEnd, onTextChange: () => undefined, min: 0, step: 1, formatter: posterizeFormatter, rightAlign: true, small: true, disabled: disabled }) })
-                ] })
-        ] }));
+    return (jsx_runtime_1.jsx(CollapsibleInspectorSection_1.CollapsibleInspectorSection, { collapsible: true, label: "Keyframe settings", sectionId: "keyframe-settings", children: jsx_runtime_1.jsxs("div", { style: keyframeSettingsContainer, children: [canEditInterpolationSettings ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
+                        jsx_runtime_1.jsx(common_1.InspectorDetailRow, { label: "Extrapolate left", children: jsx_runtime_1.jsx(ComboBox_1.Combobox, { values: leftValues, selectedId: propStatus.clamping.left, title: "Extrapolate left", style: comboStyle, size: "small" }) }), jsx_runtime_1.jsx(common_1.InspectorDetailRow, { label: "Extrapolate right", children: jsx_runtime_1.jsx(ComboBox_1.Combobox, { values: rightValues, selectedId: propStatus.clamping.right, title: "Extrapolate right", style: comboStyle, size: "small" }) }), jsx_runtime_1.jsx(common_1.InspectorDetailRow, { label: "Output", children: jsx_runtime_1.jsx(ComboBox_1.Combobox, { values: outputValues, selectedId: (_b = propStatus.output) !== null && _b !== void 0 ? _b : 'linear', title: "Output", style: comboStyle, size: "small" }) })
+                    ] })) : null, jsx_runtime_1.jsx(common_1.InspectorDetailRow, { label: "Posterize", children: jsx_runtime_1.jsx(InputDragger_1.InputDragger, { type: "number", value: posterize, status: "ok", onValueChange: onPosterizeChange, onValueChangeEnd: onPosterizeChangeEnd, onTextChange: () => undefined, min: 0, step: 1, formatter: posterizeFormatter, rightAlign: true, small: true, disabled: disabled }) })
+            ] }) }));
 };
 exports.KeyframeSettings = KeyframeSettings;

package/dist/components/InspectorPanel/MultiSequenceInspector.js

@@ -13,6 +13,7 @@ const InspectorPanelLayout_1 = require("../InspectorPanelLayout");
 const layout_1 = require("../layout");
 const is_menu_item_1 = require("../Menu/is-menu-item");
 const TimelineRowLayoutContext_1 = require("../Timeline/TimelineRowLayoutContext");
+const CollapsibleInspectorSection_1 = require("./CollapsibleInspectorSection");
 const common_1 = require("./common");
 const MultiSequenceField_1 = require("./MultiSequenceField");
 const styles_1 = require("./styles");
@@ -95,7 +96,7 @@ const MultiSequenceInspector = ({ selections, readOnlyStudio }) => {
     return (jsx_runtime_1.jsxs("div", { style: styles_1.scrollableContainer, className: is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME, children: [
             jsx_runtime_1.jsx(InspectorInfoHeader_1.InspectorInfoHeader, { padding: "4px 0", children: jsx_runtime_1.jsxs("div", { style: selectionCountStyle, children: [selections.length, " sequences selected"] }) }), jsx_runtime_1.jsx("div", { role: "separator", style: styles_1.sequenceHeaderDivider }), targets === null ? (jsx_runtime_1.jsx(common_1.InspectorMessage, { children: "Sequence controls unavailable" })) : fields.length === 0 ? (jsx_runtime_1.jsx(common_1.InspectorMessage, { children: "No shared controls" })) : (jsx_runtime_1.jsx(TimelineRowLayoutContext_1.TimelineRowLayoutContext.Provider, { value: TimelineRowLayoutContext_1.INSPECTOR_TIMELINE_ROW_LAYOUT, children: timeline_layout_1.SCHEMA_FIELD_GROUPS.map((group) => {
                     const groupedFields = fields.filter((field) => field.group === group.id);
-                    return groupedFields.length === 0 ? null : (jsx_runtime_1.jsx(common_1.InspectorSection, { header: group.label, children: groupedFields.map((field) => (jsx_runtime_1.jsx(MultiSequenceField_1.MultiSequenceField, { field: field, targets: targets, readOnlyStudio: readOnlyStudio }, JSON.stringify(targets.map((target) => target.nodePath)) +
+                    return groupedFields.length === 0 ? null : (jsx_runtime_1.jsx(CollapsibleInspectorSection_1.CollapsibleInspectorSection, { collapsible: true, label: group.label, sectionId: `multi-sequence-${group.id}`, children: groupedFields.map((field) => (jsx_runtime_1.jsx(MultiSequenceField_1.MultiSequenceField, { field: field, targets: targets, readOnlyStudio: readOnlyStudio }, JSON.stringify(targets.map((target) => target.nodePath)) +
                             field.key))) }, group.id));
                 }) }))] }));
 };

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,
     };

package/dist/components/InspectorPanel/SequenceSelectionInspector.js

@@ -22,6 +22,7 @@ const TimelineSelection_1 = require("../Timeline/TimelineSelection");
 const use_delete_timeline_items_1 = require("../Timeline/use-delete-timeline-items");
 const use_sequence_freeze_frame_menu_item_1 = require("../Timeline/use-sequence-freeze-frame-menu-item");
 const AlignmentControls_1 = require("./AlignmentControls");
+const CollapsibleInspectorSection_1 = require("./CollapsibleInspectorSection");
 const common_1 = require("./common");
 const ConnectedCompositionsSection_1 = require("./ConnectedCompositionsSection");
 const SequenceInspectorHeader_1 = require("./SequenceInspectorHeader");
@@ -169,9 +170,9 @@ 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.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(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(CollapsibleInspectorSection_1.CollapsibleInspectorSection, { collapsible: true, label: "Actions", sectionId: "sequence-actions", children: 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" }))] }));
 };
 const SequenceSelectionInspector = ({ selection, readOnlyStudio }) => {