@remotion/studio 4.0.525 → 4.0.527

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',
@@ -24,7 +19,20 @@ const collapsibleSectionHeaderButton = {
     textAlign: 'left',
     textOverflow: 'ellipsis',
     userSelect: 'none',
+    WebkitUserSelect: '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 +40,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');
@@ -142,17 +163,15 @@ const CompositionDefaultPropsSection = ({ composition, currentDefaultProps, read
         defaultProps: currentDefaultProps,
         mode: defaultPropsMode,
         propsEditType: 'default-props',
-        showCannotSaveDefaultPropsWarning: canShowDefaultPropsSection,
+        showCannotSaveDefaultPropsWarning: canShowDefaultPropsSection && !readOnlyStudio,
     });
-    if (readOnlyStudio || !canShowDefaultPropsSection) {
+    if (!canShowDefaultPropsSection) {
         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: readOnlyStudio ? 'Props' : '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/CompositionMetadata.js

@@ -31,6 +31,7 @@ const computedContainerStyle = {
     ...InputDragger_1.inputDraggerContainerStyle,
     textAlign: 'right',
     userSelect: 'none',
+    WebkitUserSelect: 'none',
 };
 const computedValueStyle = {
     color: colors_1.WHITE_ALPHA_40,
@@ -38,9 +39,13 @@ const computedValueStyle = {
     fontSize: 12,
     fontStyle: 'italic',
     lineHeight: '20px',
+    userSelect: 'none',
+    WebkitUserSelect: 'none',
 };
 const metadataFormatterStyle = {
     fontSize: 13,
+    userSelect: 'none',
+    WebkitUserSelect: 'none',
 };
 const metadataDraggerStyles = {
     durationInFrames: {
@@ -110,6 +115,8 @@ const metadataLabelText = {
     minWidth: 0,
     overflow: 'hidden',
     textOverflow: 'ellipsis',
+    userSelect: 'none',
+    WebkitUserSelect: 'none',
     whiteSpace: 'nowrap',
 };
 const dimensionPresets = [

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,8 @@ const elementLibraryDropdownLabelStyle = {
     overflow: 'hidden',
     textAlign: 'left',
     textOverflow: 'ellipsis',
+    userSelect: 'none',
+    WebkitUserSelect: 'none',
     whiteSpace: 'nowrap',
 };
 const elementLibraryDropdownCaretStyle = {

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

@@ -7,12 +7,16 @@ const react_1 = require("react");
 const remotion_1 = require("remotion");
 const calculate_timeline_1 = require("../../helpers/calculate-timeline");
 const colors_1 = require("../../helpers/colors");
+const interactivity_enabled_1 = require("../../helpers/interactivity-enabled");
 const timeline_layout_1 = require("../../helpers/timeline-layout");
+const scissors_1 = require("../../icons/scissors");
 const InspectorInfoHeader_1 = require("../InspectorInfoHeader");
 const InspectorPanelLayout_1 = require("../InspectorPanelLayout");
 const layout_1 = require("../layout");
 const is_menu_item_1 = require("../Menu/is-menu-item");
+const split_selected_timeline_item_1 = require("../Timeline/split-selected-timeline-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");
@@ -27,8 +31,14 @@ const selectionCountStyle = {
     textOverflow: 'ellipsis',
     whiteSpace: 'nowrap',
 };
+const actionIconStyle = {
+    display: 'block',
+    height: 16,
+    width: 16,
+};
 const MultiSequenceInspector = ({ selections, readOnlyStudio }) => {
     const { sequences } = (0, react_1.useContext)(remotion_1.Internals.SequenceManager);
+    const timelinePosition = remotion_1.Internals.Timeline.useTimelinePosition();
     const { overrideIdToNodePathMappings } = (0, react_1.useContext)(remotion_1.Internals.OverrideIdsToNodePathsGettersContext);
     const { propStatuses } = (0, react_1.useContext)(remotion_1.Internals.VisualModePropStatusesContext);
     const { getDragOverrides } = (0, react_1.useContext)(remotion_1.Internals.VisualModeDragOverridesContext);
@@ -92,11 +102,33 @@ const MultiSequenceInspector = ({ selections, readOnlyStudio }) => {
         });
         return ((_a = allFields[0]) !== null && _a !== void 0 ? _a : []).filter((field) => allFields.every((candidate) => candidate.some((other) => other.key === field.key && other.fieldSchema === field.fieldSchema)));
     }, [getDragOverrides, propStatuses, runtimeValues, targets]);
+    const canSplit = !readOnlyStudio && (0, interactivity_enabled_1.isStudioInteractivityEnabled)();
+    const onSplit = (0, react_1.useCallback)(() => {
+        var _a;
+        if (!canSplit) {
+            return;
+        }
+        (_a = (0, split_selected_timeline_item_1.splitSelectedTimelineItems)({
+            selections,
+            sequences,
+            overrideIdsToNodePaths: overrideIdToNodePathMappings,
+            propStatuses,
+            splitFrame: timelinePosition,
+        })) === null || _a === void 0 ? void 0 : _a.catch(() => undefined);
+    }, [
+        canSplit,
+        overrideIdToNodePathMappings,
+        propStatuses,
+        selections,
+        sequences,
+        timelinePosition,
+    ]);
     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));
-                }) }))] }));
+                }) })), jsx_runtime_1.jsx(CollapsibleInspectorSection_1.CollapsibleInspectorSection, { collapsible: true, label: "Actions", sectionId: "multi-sequence-actions", children: jsx_runtime_1.jsx(common_1.InspectorQuickActionsSection, { children: jsx_runtime_1.jsx(common_1.InspectorQuickAction, { disabled: !canSplit, onClick: onSplit, title: canSplit ? undefined : 'Studio is read-only', renderIcon: (color) => (jsx_runtime_1.jsx(scissors_1.ScissorsIcon, { style: actionIconStyle, color: color })), children: "Split selected" }) }) })
+        ] }));
 };
 exports.MultiSequenceInspector = MultiSequenceInspector;

package/dist/components/InspectorPanel/SequenceSelectionInspector.js

@@ -6,15 +6,19 @@ const react_1 = require("react");
 const remotion_1 = require("remotion");
 const client_id_1 = require("../../helpers/client-id");
 const interactivity_enabled_1 = require("../../helpers/interactivity-enabled");
+const use_media_metadata_1 = require("../../helpers/use-media-metadata");
 const audio_1 = require("../../icons/audio");
 const duplicate_1 = require("../../icons/duplicate");
 const scissors_1 = require("../../icons/scissors");
 const snowflake_1 = require("../../icons/snowflake");
+const transcription_1 = require("../../icons/transcription");
 const trash_1 = require("../../icons/trash");
+const modals_1 = require("../../state/modals");
 const ConfirmationDialog_1 = require("../ConfirmationDialog");
 const InspectorSequenceSection_1 = require("../InspectorSequenceSection");
 const is_menu_item_1 = require("../Menu/is-menu-item");
 const NotificationCenter_1 = require("../Notifications/NotificationCenter");
+const public_output_name_1 = require("../public-output-name");
 const split_video_from_audio_api_1 = require("../split-video-from-audio-api");
 const duplicate_selected_timeline_item_1 = require("../Timeline/duplicate-selected-timeline-item");
 const split_selected_timeline_item_1 = require("../Timeline/split-selected-timeline-item");
@@ -22,6 +26,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");
@@ -69,8 +74,10 @@ const SplitSequenceQuickAction = ({ selection, track }) => {
     return (jsx_runtime_1.jsx(common_1.InspectorQuickAction, { disabled: !canSplit, onClick: onSplit, title: disabledReason, renderIcon: (color) => (jsx_runtime_1.jsx(scissors_1.ScissorsIcon, { style: actionIconStyle, color: color })), children: "Split clip" }));
 };
 const SequenceSourceQuickActions = ({ selection, track, validatedSource }) => {
+    var _a;
     const timelinePosition = remotion_1.Internals.Timeline.useTimelinePosition();
     const { previewServerState } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
+    const { setSelectedModal } = (0, react_1.useContext)(modals_1.SetSelectedModalContext);
     const { propStatuses } = (0, react_1.useContext)(remotion_1.Internals.VisualModePropStatusesContext);
     const { setPropStatuses } = (0, react_1.useContext)(remotion_1.Internals.VisualModeSettersContext);
     const confirm = (0, ConfirmationDialog_1.useConfirmationDialog)();
@@ -89,6 +96,40 @@ const SequenceSourceQuickActions = ({ selection, track, validatedSource }) => {
         validatedSource,
     });
     const sourceActionsDisabled = previewServerState.type !== 'connected' || !(0, interactivity_enabled_1.isStudioInteractivityEnabled)();
+    const mediaSequence = track.sequence.type === 'video' || track.sequence.type === 'audio'
+        ? track.sequence
+        : null;
+    const mediaMetadata = (0, use_media_metadata_1.useMediaMetadata)((_a = mediaSequence === null || mediaSequence === void 0 ? void 0 : mediaSequence.src) !== null && _a !== void 0 ? _a : null);
+    const transcriptionDisabledReason = sourceActionsDisabled
+        ? 'Studio is read-only'
+        : selection.nodePathInfo.numberOfSequencesWithThisNodePath > 1
+            ? 'Programmatically duplicated media cannot be transcribed from source'
+            : undefined;
+    const onGenerateCaptions = (0, react_1.useCallback)(() => {
+        if (transcriptionDisabledReason !== undefined || mediaSequence === null) {
+            return;
+        }
+        const nodePath = selection.nodePathInfo.sequenceSubscriptionKey;
+        setSelectedModal({
+            type: 'transcribe',
+            src: mediaSequence.src,
+            displayName: (0, public_output_name_1.getMediaFileName)(mediaSequence.src, mediaSequence.displayName),
+            audioStreamIndex: null,
+            requestInit: null,
+            target: {
+                fileName: nodePath.absolutePath,
+                nodePath,
+                durationInFrames: Number.isFinite(mediaSequence.duration)
+                    ? mediaSequence.duration
+                    : null,
+            },
+        });
+    }, [
+        selection.nodePathInfo,
+        setSelectedModal,
+        mediaSequence,
+        transcriptionDisabledReason,
+    ]);
     const onDuplicate = (0, react_1.useCallback)(() => {
         if (sourceActionsDisabled) {
             return;
@@ -124,7 +165,7 @@ const SequenceSourceQuickActions = ({ selection, track, validatedSource }) => {
             (0, NotificationCenter_1.showNotification)(err.message, 4000);
         });
     }, [selection.nodePathInfo, splitVideoFromAudioDisabledReason]);
-    return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [(freezeFrameMenuItem === null || freezeFrameMenuItem === void 0 ? void 0 : freezeFrameMenuItem.type) === 'item' ? (jsx_runtime_1.jsx(common_1.InspectorQuickAction, { disabled: Boolean(freezeFrameMenuItem.disabled), onClick: () => freezeFrameMenuItem.onClick(freezeFrameMenuItem.id, null), renderIcon: (color) => (jsx_runtime_1.jsx(snowflake_1.SnowflakeIcon, { style: largeActionIconStyle, color: color })), children: freezeFrameMenuItem.label })) : null, track.sequence.type === 'video' ? (jsx_runtime_1.jsx(common_1.InspectorQuickAction, { disabled: splitVideoFromAudioDisabledReason !== undefined, onClick: onSplitVideoFromAudio, title: splitVideoFromAudioDisabledReason, renderIcon: (color) => (jsx_runtime_1.jsx(audio_1.AudioIcon, { style: actionIconStyle, color: color })), children: "Split video from audio" })) : null, jsx_runtime_1.jsx(common_1.InspectorQuickAction, { disabled: sourceActionsDisabled, onClick: onDuplicate, renderIcon: (color) => (jsx_runtime_1.jsx(duplicate_1.DuplicateIcon, { style: largeActionIconStyle, color: color })), children: "Duplicate" }), jsx_runtime_1.jsx(common_1.InspectorQuickAction, { disabled: sourceActionsDisabled, onClick: onDelete, renderIcon: (color) => (jsx_runtime_1.jsx(trash_1.TrashIcon, { style: actionIconStyle, color: color })), children: "Delete" })] }));
+    return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [(freezeFrameMenuItem === null || freezeFrameMenuItem === void 0 ? void 0 : freezeFrameMenuItem.type) === 'item' ? (jsx_runtime_1.jsx(common_1.InspectorQuickAction, { disabled: Boolean(freezeFrameMenuItem.disabled), onClick: () => freezeFrameMenuItem.onClick(freezeFrameMenuItem.id, null), renderIcon: (color) => (jsx_runtime_1.jsx(snowflake_1.SnowflakeIcon, { style: largeActionIconStyle, color: color })), children: freezeFrameMenuItem.label })) : null, track.sequence.type === 'video' ? (jsx_runtime_1.jsx(common_1.InspectorQuickAction, { disabled: splitVideoFromAudioDisabledReason !== undefined, onClick: onSplitVideoFromAudio, title: splitVideoFromAudioDisabledReason, renderIcon: (color) => (jsx_runtime_1.jsx(audio_1.AudioIcon, { style: actionIconStyle, color: color })), children: "Split video from audio" })) : null, mediaSequence !== null && (mediaMetadata === null || mediaMetadata === void 0 ? void 0 : mediaMetadata.hasAudioTrack) !== false ? (jsx_runtime_1.jsx(common_1.InspectorQuickAction, { disabled: transcriptionDisabledReason !== undefined, onClick: onGenerateCaptions, title: transcriptionDisabledReason, renderIcon: (color) => (jsx_runtime_1.jsx(transcription_1.TranscriptionIcon, { style: actionIconStyle, color: color })), children: "Generate captions" })) : null, jsx_runtime_1.jsx(common_1.InspectorQuickAction, { disabled: sourceActionsDisabled, onClick: onDuplicate, renderIcon: (color) => (jsx_runtime_1.jsx(duplicate_1.DuplicateIcon, { style: largeActionIconStyle, color: color })), children: "Duplicate" }), jsx_runtime_1.jsx(common_1.InspectorQuickAction, { disabled: sourceActionsDisabled, onClick: onDelete, renderIcon: (color) => (jsx_runtime_1.jsx(trash_1.TrashIcon, { style: actionIconStyle, color: color })), children: "Delete" })] }));
 };
 const SequenceExpandedInspector = ({ track, readOnlyStudio }) => {
     const { previewServerState } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
@@ -169,9 +210,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 }) => {

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

@@ -6,6 +6,10 @@ export declare const InspectorSectionHeader: React.FC<{
 export declare const InspectorQuickActionsSection: React.FC<{
     readonly children: React.ReactNode;
 }>;
+export declare const InspectorSectionBody: React.FC<{
+    readonly children: React.ReactNode;
+    readonly expanded: boolean;
+}>;
 export declare const InspectorSection: React.FC<{
     readonly children: React.ReactNode;
     readonly header: React.ReactNode;

package/dist/components/InspectorPanel/common.js

@@ -3,7 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.InspectorDefaultPropsWarnings = exports.InspectorQuickAction = exports.InspectorDetailRow = exports.InspectorMessage = exports.InspectorBackAction = exports.InspectorSection = exports.InspectorQuickActionsSection = exports.InspectorSectionHeader = void 0;
+exports.InspectorDefaultPropsWarnings = exports.InspectorQuickAction = exports.InspectorDetailRow = exports.InspectorMessage = exports.InspectorBackAction = exports.InspectorSection = exports.InspectorSectionBody = exports.InspectorQuickActionsSection = exports.InspectorSectionHeader = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = __importDefault(require("react"));
 const colors_1 = require("../../helpers/colors");
@@ -16,9 +16,21 @@ const InspectorSectionHeader = ({ children }) => jsx_runtime_1.jsx("div", { styl
 exports.InspectorSectionHeader = InspectorSectionHeader;
 const InspectorQuickActionsSection = ({ children }) => jsx_runtime_1.jsx("div", { style: styles_1.inspectorQuickActionsSection, children: children });
 exports.InspectorQuickActionsSection = InspectorQuickActionsSection;
+const collapsedSectionBody = {
+    ...styles_1.inspectorSectionBody,
+    display: 'none',
+};
+const InspectorSectionBody = ({ children, expanded }) => {
+    if (children === null) {
+        return null;
+    }
+    return (jsx_runtime_1.jsx("div", { hidden: !expanded, style: expanded ? styles_1.inspectorSectionBody : collapsedSectionBody, children: children }));
+};
+exports.InspectorSectionBody = InspectorSectionBody;
 const InspectorSection = ({ children, header }) => {
     return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
-            jsx_runtime_1.jsx(exports.InspectorSectionHeader, { children: header }), children === null ? null : (jsx_runtime_1.jsx("div", { style: styles_1.inspectorSectionBody, children: children }))] }));
+            jsx_runtime_1.jsx(exports.InspectorSectionHeader, { children: header }), jsx_runtime_1.jsx(exports.InspectorSectionBody, { expanded: true, children: children })
+        ] }));
 };
 exports.InspectorSection = InspectorSection;
 const backArrowIcon = {
@@ -77,6 +89,7 @@ const inlineLabelText = {
     overflow: 'hidden',
     textOverflow: 'ellipsis',
     userSelect: 'none',
+    WebkitUserSelect: 'none',
     whiteSpace: 'nowrap',
 };
 const inlineLabelIcon = {

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

@@ -2,15 +2,12 @@ import type React from 'react';
 export declare const container: React.CSSProperties;
 export declare const scrollableContainer: React.CSSProperties;
 export declare const compositionDefaultPropsSection: React.CSSProperties;
-export declare const compositionVisualControlsSection: React.CSSProperties;
 export declare const inspectorOverviewSection: React.CSSProperties;
 export declare const sequenceHeaderDivider: React.CSSProperties;
 export declare const sectionHeader: React.CSSProperties;
 export declare const inspectorSectionBody: React.CSSProperties;
 export declare const sequenceHeaderSubtitle: React.CSSProperties;
 export declare const sectionHeaderRow: React.CSSProperties;
-export declare const sectionHeaderTitle: React.CSSProperties;
-export declare const sectionHeaderStart: React.CSSProperties;
 export declare const sectionHeaderEnd: React.CSSProperties;
 export declare const defaultPropsWarningContainer: React.CSSProperties;
 export declare const defaultPropsWarningMessages: React.CSSProperties;