@remotion/studio 4.0.513 → 4.0.514

package/dist/components/FixComputedValueModal.js

@@ -0,0 +1,217 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FixComputedValueModal = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = __importStar(require("react"));
+const colors_1 = require("../helpers/colors");
+const copy_text_1 = require("../helpers/copy-text");
+const open_in_editor_1 = require("../helpers/open-in-editor");
+const caret_1 = require("../icons/caret");
+const clipboard_1 = require("../icons/clipboard");
+const z_index_1 = require("../state/z-index");
+const CodingAgentIcon_1 = require("./CodingAgentIcon");
+const InlineAction_1 = require("./InlineAction");
+const InlineDropdown_1 = require("./InlineDropdown");
+const ModalFooter_1 = require("./ModalFooter");
+const ModalHeader_1 = require("./ModalHeader");
+const DismissableModal_1 = require("./NewComposition/DismissableModal");
+const NotificationCenter_1 = require("./Notifications/NotificationCenter");
+const SettingsContext_1 = require("./SettingsContext");
+const panelStyle = {
+    borderRadius: 6,
+    overflow: 'hidden',
+};
+const container = {
+    padding: '12px 16px 18px',
+};
+const text = {
+    color: colors_1.LIGHT_TEXT,
+    fontFamily: 'sans-serif',
+    fontSize: 14,
+    lineHeight: 1.5,
+};
+const commandField = {
+    alignItems: 'center',
+    background: colors_1.SELECTED_BACKGROUND,
+    borderRadius: 6,
+    boxSizing: 'border-box',
+    display: 'flex',
+    marginTop: 10,
+    padding: '8px 8px 8px 10px',
+    width: '100%',
+};
+const code = {
+    color: colors_1.WHITE,
+    flex: 1,
+    fontFamily: 'monospace',
+    fontSize: 14,
+    lineHeight: 1.5,
+    margin: 0,
+    minWidth: 0,
+    overflowX: 'auto',
+    whiteSpace: 'pre-wrap',
+};
+const copyIcon = {
+    flexShrink: 0,
+    height: 12,
+    width: 12,
+};
+const footer = {
+    display: 'flex',
+    flex: 'none',
+    justifyContent: 'flex-end',
+};
+const splitButton = {
+    alignItems: 'center',
+    borderRadius: 4,
+    display: 'inline-flex',
+    flexDirection: 'row',
+    gap: 1,
+    height: 24,
+    overflow: 'hidden',
+};
+const mainButtonBase = {
+    alignItems: 'center',
+    background: colors_1.TRANSPARENT,
+    border: 'none',
+    borderRadius: '4px 0 0 4px',
+    color: colors_1.LIGHT_TEXT,
+    display: 'inline-flex',
+    fontFamily: 'sans-serif',
+    fontSize: 12,
+    gap: 6,
+    height: 24,
+    padding: '0 9px',
+    whiteSpace: 'nowrap',
+};
+const singleButton = {
+    borderRadius: 4,
+};
+const dropdownButton = {
+    borderRadius: '0 4px 4px 0',
+    height: 24,
+    width: 24,
+};
+const menuLabel = {
+    color: 'inherit',
+    fontFamily: 'sans-serif',
+    fontSize: 13,
+    lineHeight: '16px',
+};
+const FixComputedValueModal = ({ state }) => {
+    var _a, _b;
+    const { codingAgentInfo } = (0, SettingsContext_1.useSettings)();
+    const { tabIndex } = (0, z_index_1.useZIndex)();
+    const [hovered, setHovered] = react_1.default.useState(false);
+    const prompt = `/remotion-interactivity ${state.context} make "${state.prop}" interactive`;
+    const installCommand = 'npx remotion skills add';
+    const installedCodingAgents = (_a = codingAgentInfo === null || codingAgentInfo === void 0 ? void 0 : codingAgentInfo.installedCodingAgents) !== null && _a !== void 0 ? _a : [];
+    const defaultCodingAgent = (_b = installedCodingAgents.find((agent) => agent.id === (codingAgentInfo === null || codingAgentInfo === void 0 ? void 0 : codingAgentInfo.defaultCodingAgent))) !== null && _b !== void 0 ? _b : installedCodingAgents[0];
+    const alternativeCodingAgents = installedCodingAgents.filter((agent) => agent.id !== (defaultCodingAgent === null || defaultCodingAgent === void 0 ? void 0 : defaultCodingAgent.id));
+    const onCopyPrompt = (0, react_1.useCallback)(() => {
+        (0, copy_text_1.copyText)(prompt).catch((err) => {
+            (0, NotificationCenter_1.showNotification)(`Could not copy: ${err.message}`, 2000);
+        });
+    }, [prompt]);
+    const onCopyInstallCommand = (0, react_1.useCallback)(() => {
+        (0, copy_text_1.copyText)(installCommand).catch((err) => {
+            (0, NotificationCenter_1.showNotification)(`Could not copy: ${err.message}`, 2000);
+        });
+    }, [installCommand]);
+    const renderCopyAction = (0, react_1.useCallback)((color) => {
+        return jsx_runtime_1.jsx(clipboard_1.ClipboardIcon, { color: color, style: copyIcon });
+    }, []);
+    const openWithCodingAgent = (0, react_1.useCallback)(async (codingAgentId, codingAgentName) => {
+        try {
+            const response = await (0, open_in_editor_1.openInCodingAgent)(codingAgentId, codingAgentId === 'copilot' ? null : prompt);
+            if (!response.success) {
+                (0, NotificationCenter_1.showNotification)(`Could not open ${codingAgentName}`, 2000);
+            }
+        }
+        catch (err) {
+            (0, NotificationCenter_1.showNotification)(err.message, 2000);
+        }
+    }, [prompt]);
+    const agentMenuItems = react_1.default.useMemo(() => {
+        return alternativeCodingAgents.map((codingAgent) => ({
+            id: `fix-computed-value-in-${codingAgent.id}`,
+            keyHint: null,
+            label: jsx_runtime_1.jsx("span", { style: menuLabel, children: codingAgent.name }),
+            leftItem: jsx_runtime_1.jsx(CodingAgentIcon_1.CodingAgentIcon, { codingAgentId: codingAgent.id, size: 18 }),
+            onClick: () => {
+                openWithCodingAgent(codingAgent.id, codingAgent.nameWithType).catch(() => undefined);
+            },
+            quickSwitcherLabel: null,
+            subMenu: null,
+            type: 'item',
+            value: `coding-agent-${codingAgent.id}`,
+        }));
+    }, [alternativeCodingAgents, openWithCodingAgent]);
+    const renderDropdownAction = (0, react_1.useCallback)((color) => {
+        return jsx_runtime_1.jsx(caret_1.CaretDown, { color: color, small: true });
+    }, []);
+    const mainButtonStyle = react_1.default.useMemo(() => {
+        return {
+            ...mainButtonBase,
+            ...(alternativeCodingAgents.length === 0 ? singleButton : null),
+            background: (0, colors_1.getBackgroundFromHoverState)({
+                hovered,
+                selected: false,
+            }),
+            color: hovered ? colors_1.WHITE : colors_1.LIGHT_TEXT,
+        };
+    }, [alternativeCodingAgents.length, hovered]);
+    return (jsx_runtime_1.jsxs(DismissableModal_1.DismissableModal, { panelStyle: panelStyle, children: [
+            jsx_runtime_1.jsx(ModalHeader_1.ModalHeader, { title: "Fix computed value" }), jsx_runtime_1.jsxs("div", { style: container, children: [state.remotionInteractivitySkillAvailable ? null : (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
+                            jsx_runtime_1.jsx("div", { style: text, children: "First, install the Remotion Agent Skills:" }), jsx_runtime_1.jsxs("div", { style: commandField, children: [
+                                    jsx_runtime_1.jsx("pre", { style: code, children: installCommand }), jsx_runtime_1.jsx(InlineAction_1.InlineAction, { variant: null, onClick: onCopyInstallCommand, renderAction: renderCopyAction, title: "Copy command" })
+                                ] })
+                        ] })), jsx_runtime_1.jsx("div", { style: {
+                            ...text,
+                            marginTop: state.remotionInteractivitySkillAvailable ? 0 : 16,
+                        }, children: state.remotionInteractivitySkillAvailable
+                            ? 'Paste this prompt into your coding agent to make this value editable in Studio:'
+                            : 'Then, paste this prompt into your coding agent:' }), jsx_runtime_1.jsxs("div", { style: commandField, children: [
+                            jsx_runtime_1.jsx("pre", { style: code, children: prompt }), jsx_runtime_1.jsx(InlineAction_1.InlineAction, { variant: null, onClick: onCopyPrompt, renderAction: renderCopyAction, title: "Copy prompt" })
+                        ] })
+                ] }), defaultCodingAgent ? (jsx_runtime_1.jsx(ModalFooter_1.ModalFooterContainer, { style: footer, children: jsx_runtime_1.jsxs("div", { style: splitButton, onPointerEnter: () => setHovered(true), onPointerLeave: () => setHovered(false), children: [
+                        jsx_runtime_1.jsxs("button", { "aria-label": `Open in ${defaultCodingAgent.nameWithType}`, onClick: () => {
+                                openWithCodingAgent(defaultCodingAgent.id, defaultCodingAgent.nameWithType).catch(() => undefined);
+                            }, style: mainButtonStyle, tabIndex: tabIndex, title: `Open in ${defaultCodingAgent.nameWithType}`, type: "button", children: [
+                                jsx_runtime_1.jsx(CodingAgentIcon_1.CodingAgentIcon, { codingAgentId: defaultCodingAgent.id, size: 18 }),
+                                "Open in ", defaultCodingAgent.name] }), alternativeCodingAgents.length > 0 ? (jsx_runtime_1.jsx(InlineDropdown_1.InlineDropdown, { renderAction: renderDropdownAction, style: dropdownButton, title: "Open in another coding agent", values: agentMenuItems, variant: null })) : null] }) })) : null] }));
+};
+exports.FixComputedValueModal = FixComputedValueModal;

package/dist/components/InitialCompositionLoader.js

@@ -6,6 +6,7 @@ const remotion_1 = require("remotion");
 const create_folder_tree_1 = require("../helpers/create-folder-tree");
 const persist_open_folders_1 = require("../helpers/persist-open-folders");
 const url_state_1 = require("../helpers/url-state");
+const composition_list_1 = require("../state/composition-list");
 const folders_1 = require("../state/folders");
 const ExplorerPanelRef_1 = require("./ExplorerPanelRef");
 const load_canvas_content_from_url_1 = require("./load-canvas-content-from-url");
@@ -45,11 +46,16 @@ exports.useSelectComposition = useSelectComposition;
 const InitialCompositionLoader = () => {
     const { compositions, canvasContent } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
     const { setCanvasContent } = (0, react_1.useContext)(remotion_1.Internals.CompositionSetters);
+    const { setCompositionListState } = (0, react_1.useContext)(composition_list_1.CompositionListContext);
     const selectComposition = (0, exports.useSelectComposition)();
     const selectAsset = (0, use_select_asset_1.useSelectAsset)();
     const staticFiles = (0, use_static_files_1.useStaticFiles)();
     (0, react_1.useEffect)(() => {
+        var _a;
         const canvasContentFromUrl = (0, load_canvas_content_from_url_1.deriveCanvasContentFromUrl)();
+        const seenCompositionIds = (_a = window.remotion_seenCompositionIds) !== null && _a !== void 0 ? _a : [];
+        const compositionListIsReady = composition_list_1.compositionListRenderedRef.current &&
+            seenCompositionIds.every((id) => compositions.some((composition) => composition.id === id));
         if (canvasContent) {
             // If the URL points to a different composition than the one currently
             // displayed, switch to it. This handles the case where the URL is
@@ -63,13 +69,19 @@ const InitialCompositionLoader = () => {
                     selectComposition(exists, false);
                 }
             }
+            setCompositionListState('ready');
             return;
         }
         if (canvasContentFromUrl && canvasContentFromUrl.type === 'composition') {
+            if (!compositionListIsReady) {
+                return;
+            }
             const exists = compositions.find((c) => c.id === canvasContentFromUrl.compositionId);
             if (exists) {
                 selectComposition(exists, false);
+                return;
             }
+            setCompositionListState('ready');
             return;
         }
         if (canvasContentFromUrl && canvasContentFromUrl.type === 'asset') {
@@ -80,14 +92,21 @@ const InitialCompositionLoader = () => {
             setCanvasContent(canvasContentFromUrl);
             return;
         }
+        if (!compositionListIsReady) {
+            return;
+        }
         if (compositions.length > 0) {
             selectComposition(compositions[0], true);
         }
+        else {
+            setCompositionListState('ready');
+        }
     }, [
         compositions,
         canvasContent,
         selectComposition,
         setCanvasContent,
+        setCompositionListState,
         selectAsset,
     ]);
     (0, react_1.useEffect)(() => {

package/dist/components/InlineDropdown.js

@@ -31,11 +31,11 @@ const InlineDropdown = ({ values, getItems, onOpenChange, unhoveredColor, ...pro
     });
     const isMobileLayout = (0, mobile_layout_1.useMobileLayout)();
     const onClick = (0, react_1.useCallback)((e) => {
-        var _a;
+        var _a, _b;
         e.preventDefault();
         e.stopPropagation();
-        const invocationValues = (_a = getItems === null || getItems === void 0 ? void 0 : getItems()) !== null && _a !== void 0 ? _a : null;
-        if ((invocationValues === null || invocationValues === void 0 ? void 0 : invocationValues.length) === 0) {
+        const invocationValues = (_b = (_a = getItems === null || getItems === void 0 ? void 0 : getItems()) !== null && _a !== void 0 ? _a : values) !== null && _b !== void 0 ? _b : [];
+        if (invocationValues.length === 0) {
             return;
         }
         setOpened({
@@ -45,7 +45,7 @@ const InlineDropdown = ({ values, getItems, onOpenChange, unhoveredColor, ...pro
             values: invocationValues,
         });
         onOpenChange === null || onOpenChange === void 0 ? void 0 : onOpenChange(true);
-    }, [getItems, onOpenChange]);
+    }, [getItems, onOpenChange, values]);
     const spaceToBottom = (0, react_1.useMemo)(() => {
         if (size && opened.type === 'open') {
             return size.windowSize.height - opened.top;

package/dist/components/InspectorInfoHeader.js

@@ -49,10 +49,10 @@ const inspectorSubtitle = {
     boxSizing: 'border-box',
     fontFamily: 'sans-serif',
     fontSize: 13,
-    height: 28,
-    lineHeight: '18px',
+    height: 20,
+    lineHeight: '20px',
     margin: '0 4px',
-    padding: '5px 8px',
+    padding: '0 8px',
     width: 'calc(100% - 8px)',
 };
 const InspectorInfoHeader = ({ children, contentSized = false, minHeight, padding }) => {

package/dist/components/InspectorOpenInEditor.js

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.InspectorOpenInEditor = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
+const browser_studio_operations_1 = require("../helpers/browser-studio-operations");
 const client_id_1 = require("../helpers/client-id");
 const colors_1 = require("../helpers/colors");
 const open_in_editor_1 = require("../helpers/open-in-editor");
@@ -186,7 +187,8 @@ const InspectorOpenInEditor = ({ contextForAgents = null, label, location, locat
         openWithEditor,
         setSelectedModal,
     ]);
-    if (previewServerState.type !== 'connected') {
+    if (previewServerState.type !== 'connected' ||
+        (0, browser_studio_operations_1.getBrowserStudioOperations)() !== null) {
         return null;
     }
     return (jsx_runtime_1.jsxs("div", { style: splitButton, onPointerEnter: () => {

package/dist/components/InspectorPanel/CompositionInspector.js

@@ -4,6 +4,7 @@ exports.CompositionInspector = void 0;
 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 interactivity_enabled_1 = require("../../helpers/interactivity-enabled");
 const browse_elements_1 = require("../../icons/browse-elements");
 const frame_1 = require("../../icons/frame");
@@ -38,6 +39,13 @@ const browseElementsIconContainerStyle = {
     marginRight: -2,
     width: 22,
 };
+const browseElementsArrowStyle = {
+    display: 'inline-block',
+    height: 12,
+    marginLeft: 4,
+    verticalAlign: -2,
+    width: 12,
+};
 const CompositionActions = ({ readOnlyStudio }) => {
     const { canInsertAsset, canInsertComposition, canInsertSolid, canShowInsertAsset, canShowInsertComposition, canShowInsertSolid, insertAsset, insertComposition, insertSolid, } = (0, use_composition_actions_1.useCompositionActions)();
     const openElementsLibrary = (0, react_1.useCallback)(() => {
@@ -47,7 +55,9 @@ const CompositionActions = ({ readOnlyStudio }) => {
         (!canShowInsertAsset && !canShowInsertComposition && !canShowInsertSolid)) {
         return null;
     }
-    return (jsx_runtime_1.jsxs(common_1.InspectorActionSection, { children: [canShowInsertSolid ? (jsx_runtime_1.jsx(common_1.InspectorInlineAction, { 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.InspectorInlineAction, { 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.InspectorInlineAction, { 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(common_1.InspectorInlineAction, { disabled: false, iconContainerStyle: browseElementsIconContainerStyle, onClick: openElementsLibrary, renderIcon: (color) => (jsx_runtime_1.jsx(browse_elements_1.BrowseElementsIcon, { color: color, style: browseElementsIconStyle })), title: "Open the Remotion Elements library in a new tab. Install an Element there to send it to this composition.", children: "Browse Elements..." })) : null] }));
+    return (jsx_runtime_1.jsxs(common_1.InspectorQuickActionsSection, { children: [canShowInsertSolid ? (jsx_runtime_1.jsx(common_1.InspectorQuickAction, { disabled: !canInsertSolid, onClick: insertSolid, renderIcon: (color) => (jsx_runtime_1.jsx(solid_1.SolidIcon, { color: color, style: actionIconStyle })), children: "Add Solid" })) : null, canShowInsertAsset ? (jsx_runtime_1.jsx(common_1.InspectorQuickAction, { disabled: !canInsertAsset, onClick: insertAsset, renderIcon: (color) => (jsx_runtime_1.jsx(frame_1.PicIcon, { color: color, style: actionIconStyle })), children: "Add asset..." })) : null, canShowInsertComposition ? (jsx_runtime_1.jsx(common_1.InspectorQuickAction, { disabled: !canInsertComposition, onClick: insertComposition, renderIcon: (color) => (jsx_runtime_1.jsx(video_1.FilmIcon, { color: color, style: actionIconStyle })), children: "Add composition..." })) : null, canShowInsertAsset ? (jsx_runtime_1.jsxs(common_1.InspectorQuickAction, { disabled: false, iconContainerStyle: browseElementsIconContainerStyle, onClick: openElementsLibrary, renderIcon: (color) => (jsx_runtime_1.jsx(browse_elements_1.BrowseElementsIcon, { color: color, style: browseElementsIconStyle })), title: "Open the Remotion Elements library in a new tab. Install an Element there to send it to this composition.", children: ["Browse Elements",
+                    jsx_runtime_1.jsx("svg", { "aria-hidden": "true", viewBox: "0 0 16 16", style: browseElementsArrowStyle, children: jsx_runtime_1.jsx("path", { d: "M4 12 12 4M6 4h6v6", fill: "none", stroke: colors_1.CURRENT_COLOR, strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "1.5" }) })
+                ] })) : null] }));
 };
 const CompositionDefaultPropsSection = ({ composition, currentDefaultProps, readOnlyStudio, setDefaultProps }) => {
     var _a;

package/dist/components/InspectorPanel/CompositionInspectorHeader.js

@@ -95,8 +95,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, onOpen: openFileLocation, renderIcon: renderCompositionIcon, size: "inline-action" }), compositionComponentInfo === null &&
+                jsx_runtime_1.jsx(InlineCompositionName_1.InlineCompositionName, { compositionId: video.id, stack: (_e = currentComposition === null || currentComposition === void 0 ? void 0 : currentComposition.stack) !== null && _e !== void 0 ? _e : null, compositions: compositions }, video.id), jsx_runtime_1.jsx(InspectorSourceLocation_1.InspectorSourceLocation, { location: validatedLocation, canOpen: validatedLocation !== null && canOpenInEditor, onOpen: openFileLocation, renderIcon: renderCompositionIcon, size: "quick-action" }), compositionComponentInfo === null &&
                     compositionFile !== null &&
-                    compositionId !== null ? (jsx_runtime_1.jsx("div", { "aria-hidden": true, style: componentLocationPlaceholder })) : (jsx_runtime_1.jsx(InspectorSourceLocation_1.InspectorSourceLocation, { location: componentLocation, canOpen: componentLocation !== null && canOpenInEditor, onOpen: openComponentLocation, renderIcon: renderReactIcon, size: "inline-action" }))] })) : null }));
+                    compositionId !== null ? (jsx_runtime_1.jsx("div", { "aria-hidden": true, style: componentLocationPlaceholder })) : (jsx_runtime_1.jsx(InspectorSourceLocation_1.InspectorSourceLocation, { location: componentLocation, canOpen: componentLocation !== null && canOpenInEditor, onOpen: openComponentLocation, renderIcon: renderReactIcon, size: "quick-action" }))] })) : null }));
 };
 exports.CompositionInspectorHeader = CompositionInspectorHeader;

package/dist/components/InspectorPanel/ConnectedCompositionsSection.js

@@ -64,5 +64,5 @@ const ConnectedCompositionRow = ({ composition }) => {
         resolvedLocation,
         setSelectedModal,
     ]);
-    return (jsx_runtime_1.jsx(ContextMenu_1.ContextMenu, { getItems: getContextMenuItems, style: compositionContextMenuStyle, children: jsx_runtime_1.jsx(common_1.InspectorInlineAction, { disabled: false, onClick: () => selectComposition(composition, true), renderIcon: (color) => (jsx_runtime_1.jsx(CompositionOrStillIcon_1.CompositionOrStillIcon, { color: color, composition: composition, style: compositionIconStyle })), children: composition.id }) }));
+    return (jsx_runtime_1.jsx(ContextMenu_1.ContextMenu, { getItems: getContextMenuItems, style: compositionContextMenuStyle, children: jsx_runtime_1.jsx(common_1.InspectorQuickAction, { disabled: false, onClick: () => selectComposition(composition, true), renderIcon: (color) => (jsx_runtime_1.jsx(CompositionOrStillIcon_1.CompositionOrStillIcon, { color: color, composition: composition, style: compositionIconStyle })), children: composition.id }) }));
 };

package/dist/components/InspectorPanel/EasingInspector.js

@@ -226,6 +226,6 @@ const EasingInspector = ({ selection }) => {
         return jsx_runtime_1.jsx(common_1.InspectorMessage, { children: "Easing unavailable" });
     }
     return (jsx_runtime_1.jsxs("div", { style: styles_1.selectedContainer, className: is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME, children: [
-            jsx_runtime_1.jsx(SequenceInspectorHeader_1.SequenceInspectorSections, { track: track }), jsx_runtime_1.jsx(common_1.InspectorSectionDivider, {}), jsx_runtime_1.jsx(EasingEditorModal_1.EasingEditor, { state: state, renderHeader: renderHeader }, (0, TimelineSelection_1.getTimelineSelectionKey)(currentEasingSelection)), jsx_runtime_1.jsx(common_1.InspectorSectionDivider, {}), jsx_runtime_1.jsx(KeyframeSettings_1.KeyframeSettings, { update: easingUpdate }), canAddKeyframeAtPlayhead ? (jsx_runtime_1.jsx(common_1.InspectorActionSection, { children: jsx_runtime_1.jsx(common_1.InspectorInlineAction, { disabled: addKeyframeDisabled, onClick: onAddKeyframeAtPlayhead, renderIcon: (color) => (jsx_runtime_1.jsx(plus_1.Plus, { color: color, style: addKeyframeIcon })), children: `Add keyframe at ${addKeyframeTime}` }) })) : null] }));
+            jsx_runtime_1.jsx(SequenceInspectorHeader_1.SequenceInspectorSections, { track: track }), jsx_runtime_1.jsx(common_1.InspectorSectionDivider, {}), jsx_runtime_1.jsx(EasingEditorModal_1.EasingEditor, { state: state, renderHeader: renderHeader }, (0, TimelineSelection_1.getTimelineSelectionKey)(currentEasingSelection)), jsx_runtime_1.jsx(common_1.InspectorSectionDivider, {}), jsx_runtime_1.jsx(KeyframeSettings_1.KeyframeSettings, { update: easingUpdate }), canAddKeyframeAtPlayhead ? (jsx_runtime_1.jsx(common_1.InspectorQuickActionsSection, { children: jsx_runtime_1.jsx(common_1.InspectorQuickAction, { disabled: addKeyframeDisabled, onClick: onAddKeyframeAtPlayhead, renderIcon: (color) => (jsx_runtime_1.jsx(plus_1.Plus, { color: color, style: addKeyframeIcon })), children: `Add keyframe at ${addKeyframeTime}` }) })) : null] }));
 };
 exports.EasingInspector = EasingInspector;

package/dist/components/InspectorPanel/KeyframeInspector.js

@@ -343,8 +343,8 @@ const KeyframeInspector = ({ selection }) => {
                     frame: keyframe.frame + details.keyframeDisplayOffset,
                 })), nodePathInfo: selection.nodePathInfo }), jsx_runtime_1.jsxs("div", { style: styles_1.detailsWithInlineAction, children: [
                     jsx_runtime_1.jsxs("div", { style: styles_1.detailsBeforeInlineAction, children: [
-                            jsx_runtime_1.jsx(common_1.InspectorDetailRow, { label: "Frame", children: jsx_runtime_1.jsx(InputDragger_1.InputDragger, { type: "number", value: draftFrame, status: "ok", onValueChange: onFrameChange, onValueChangeEnd: onFrameChangeEnd, onTextChange: () => undefined, min: 0, max: Math.max(0, videoConfig.durationInFrames - 1), step: 1, formatter: (value) => String(Math.round(Number(value))), rightAlign: true, small: true }) }), jsx_runtime_1.jsx("div", { style: styles_1.keyframeEditorRow, children: jsx_runtime_1.jsx(common_1.InspectorDetailRow, { label: details.fieldLabel, children: jsx_runtime_1.jsx("div", { style: styles_1.keyframeEditorValue, children: details.type === 'sequence' ? (jsx_runtime_1.jsx(TimelineSequencePropItem_1.TimelineSequenceKeyframedValue, { field: details.field, fileName: details.fileName, nodePath: details.nodePath, schema: details.schema, propStatus: details.propStatus, sourceFrame: details.sourceFrame })) : (jsx_runtime_1.jsx(TimelineEffectPropItem_1.TimelineEffectPropValue, { field: details.field, nodePath: details.nodePath, validatedLocation: details.validatedLocation, sourceFrame: details.sourceFrame })) }) }) })
-                        ] }), jsx_runtime_1.jsx(common_1.InspectorActionSection, { children: jsx_runtime_1.jsx(common_1.InspectorInlineAction, { disabled: removeDisabled, onClick: onRemoveKeyframe, renderIcon: (color) => jsx_runtime_1.jsx(TrashIcon, { color: color }), children: "Remove keyframe" }) })
+                            jsx_runtime_1.jsx(common_1.InspectorDetailRow, { label: "Frame", children: jsx_runtime_1.jsx(InputDragger_1.InputDragger, { type: "number", value: draftFrame, status: "ok", onValueChange: onFrameChange, onValueChangeEnd: onFrameChangeEnd, onTextChange: () => undefined, min: 0, max: Math.max(0, videoConfig.durationInFrames - 1), step: 1, formatter: (value) => String(Math.round(Number(value))), rightAlign: true, small: true }) }), jsx_runtime_1.jsx("div", { style: styles_1.keyframeEditorRow, children: jsx_runtime_1.jsx(common_1.InspectorDetailRow, { label: details.fieldLabel, children: jsx_runtime_1.jsx("div", { style: styles_1.keyframeEditorValue, children: details.type === 'sequence' ? (jsx_runtime_1.jsx(TimelineSequencePropItem_1.TimelineSequenceKeyframedValue, { field: details.field, fileName: details.fileName, nodePath: details.nodePath, schema: details.schema, propStatus: details.propStatus, sourceFrame: details.sourceFrame })) : (jsx_runtime_1.jsx(TimelineEffectPropItem_1.TimelineEffectPropValue, { field: details.field, nodePath: details.nodePath, validatedLocation: details.validatedLocation, sourceFrame: details.sourceFrame, runtimeValueStore: null })) }) }) })
+                        ] }), jsx_runtime_1.jsx(common_1.InspectorQuickActionsSection, { children: jsx_runtime_1.jsx(common_1.InspectorQuickAction, { disabled: removeDisabled, onClick: onRemoveKeyframe, renderIcon: (color) => jsx_runtime_1.jsx(TrashIcon, { color: color }), children: "Remove keyframe" }) })
                 ] })
         ] }));
 };

package/dist/components/InspectorPanel/SequenceInspectorHeader.js

@@ -95,7 +95,7 @@ const SequenceInspectorHeader = ({ sourceLocation, track }) => {
         saveName(newName).catch(() => undefined);
     }, [saveName]);
     return (jsx_runtime_1.jsx(InspectorInfoHeader_1.InspectorInfoHeader, { contentSized: true, padding: "4px 0", children: jsx_runtime_1.jsxs(InspectorLocationCopy_1.InspectorLocationCopy, { location: sourceLocation.validatedLocation, name: componentName !== null && componentName !== void 0 ? componentName : null, openInEditorLocation: sourceLocation.validatedLocation, children: [
-                jsx_runtime_1.jsx(InlineEditableTitle_1.InlineEditableTitle, { value: sequenceDisplayName, canRename: canRename, onCommit: onRename, size: "inspector" }), documentationLink ? (jsx_runtime_1.jsx(common_1.InspectorInlineAction, { disabled: false, style: defaultCursor, size: "compact", title: "Open component docs", onClick: openDocumentationLink, children: componentName })) : (jsx_runtime_1.jsx("div", { style: subtitleStyle, children: componentName })), jsx_runtime_1.jsx(InspectorSourceLocation_1.InspectorSourceLocation, { location: sourceLocation.validatedLocation, canOpen: sourceLocation.canOpenInEditor, onOpen: sourceLocation.openFileLocation, renderIcon: renderReactIcon, size: "inline-action" })
+                jsx_runtime_1.jsx(InlineEditableTitle_1.InlineEditableTitle, { value: sequenceDisplayName, canRename: canRename, onCommit: onRename, size: "inspector" }), documentationLink ? (jsx_runtime_1.jsx(common_1.InspectorQuickAction, { disabled: false, style: defaultCursor, size: "compact", title: "Open component docs", onClick: openDocumentationLink, children: componentName })) : (jsx_runtime_1.jsx("div", { style: subtitleStyle, children: componentName })), jsx_runtime_1.jsx(InspectorSourceLocation_1.InspectorSourceLocation, { location: sourceLocation.validatedLocation, canOpen: sourceLocation.canOpenInEditor, onOpen: sourceLocation.openFileLocation, renderIcon: renderReactIcon, size: "quick-action" })
             ] }) }));
 };
 exports.SequenceInspectorHeader = SequenceInspectorHeader;

package/dist/components/InspectorPanel/SequenceSelectionInspector.js

@@ -6,6 +6,7 @@ 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 audio_1 = require("../../icons/audio");
 const duplicate_1 = require("../../icons/duplicate");
 const scissors_1 = require("../../icons/scissors");
 const snowflake_1 = require("../../icons/snowflake");
@@ -13,6 +14,8 @@ const trash_1 = require("../../icons/trash");
 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 split_video_from_audio_api_1 = require("../split-video-from-audio-api");
 const delete_selected_timeline_item_1 = require("../Timeline/delete-selected-timeline-item");
 const duplicate_selected_timeline_item_1 = require("../Timeline/duplicate-selected-timeline-item");
 const split_selected_timeline_item_1 = require("../Timeline/split-selected-timeline-item");
@@ -34,7 +37,7 @@ const largeActionIconStyle = {
     height: 20,
     width: 20,
 };
-const SplitSequenceAction = ({ selection, track }) => {
+const SplitSequenceQuickAction = ({ selection, track }) => {
     const timelinePosition = remotion_1.Internals.Timeline.useTimelinePosition();
     const { propStatuses } = (0, react_1.useContext)(remotion_1.Internals.VisualModePropStatusesContext);
     const sequencePropStatuses = (0, react_1.useMemo)(() => remotion_1.Internals.getPropStatusesCtx(propStatuses, selection.nodePathInfo.sequenceSubscriptionKey), [propStatuses, selection]);
@@ -63,9 +66,9 @@ const SplitSequenceAction = ({ selection, track }) => {
             : eligibility.canSplit
                 ? undefined
                 : eligibility.reason;
-    return (jsx_runtime_1.jsx(common_1.InspectorInlineAction, { disabled: !canSplit, onClick: onSplit, title: disabledReason, renderIcon: (color) => (jsx_runtime_1.jsx(scissors_1.ScissorsIcon, { style: actionIconStyle, color: color })), children: "Split clip" }));
+    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 SequenceSourceActions = ({ selection, track, validatedSource }) => {
+const SequenceSourceQuickActions = ({ selection, track, validatedSource }) => {
     const timelinePosition = remotion_1.Internals.Timeline.useTimelinePosition();
     const { previewServerState } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
     const { propStatuses } = (0, react_1.useContext)(remotion_1.Internals.VisualModePropStatusesContext);
@@ -97,7 +100,33 @@ const SequenceSourceActions = ({ selection, track, validatedSource }) => {
         }
         (0, delete_selected_timeline_item_1.deleteSequencesFromSource)([selection.nodePathInfo], confirm).catch(() => undefined);
     }, [confirm, selection.nodePathInfo, sourceActionsDisabled]);
-    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.InspectorInlineAction, { 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, jsx_runtime_1.jsx(common_1.InspectorInlineAction, { 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.InspectorInlineAction, { disabled: sourceActionsDisabled, onClick: onDelete, renderIcon: (color) => (jsx_runtime_1.jsx(trash_1.TrashIcon, { style: actionIconStyle, color: color })), children: "Delete" })] }));
+    const splitVideoFromAudioDisabledReason = sourceActionsDisabled
+        ? 'Studio is read-only'
+        : selection.nodePathInfo.numberOfSequencesWithThisNodePath > 1
+            ? 'Programmatically duplicated sequences cannot be split from source'
+            : undefined;
+    const onSplitVideoFromAudio = (0, react_1.useCallback)(() => {
+        if (splitVideoFromAudioDisabledReason !== undefined) {
+            return;
+        }
+        const nodePath = selection.nodePathInfo.sequenceSubscriptionKey;
+        (0, split_video_from_audio_api_1.splitVideoFromAudio)({
+            fileName: nodePath.absolutePath,
+            nodePath: nodePath.nodePath,
+        })
+            .then((result) => {
+            if (result.success) {
+                (0, NotificationCenter_1.showNotification)('Split video from audio', 2000);
+            }
+            else {
+                (0, NotificationCenter_1.showNotification)(result.reason, 4000);
+            }
+        })
+            .catch((err) => {
+            (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" })] }));
 };
 const SequenceExpandedInspector = ({ track, readOnlyStudio }) => {
     const { previewServerState } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
@@ -144,8 +173,8 @@ const SequenceExpandedInspector = ({ track, readOnlyStudio }) => {
     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.jsxs(jsx_runtime_1.Fragment, { children: [
                     jsx_runtime_1.jsx(common_1.InspectorSectionDivider, {}), jsx_runtime_1.jsx(ConnectedCompositionsSection_1.ConnectedCompositionsSection, { connectedCompositions: connectedCompositions })
-                ] })) : null, validatedLocation ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [jsx_runtime_1.jsx(InspectorSequenceSection_1.InspectorSequenceSection, { sequence: track.sequence, readOnlyStudio: readOnlyStudio, validatedLocation: validatedLocation, nodePathInfo: track.nodePathInfo, keyframeDisplayOffset: track.keyframeDisplayOffset, renderTransformControls: () => jsx_runtime_1.jsx(AlignmentControls_1.AlignmentControls, { track: track }) }), jsx_runtime_1.jsxs(common_1.InspectorActionSection, { children: [
-                            jsx_runtime_1.jsx(SplitSequenceAction, { selection: sequenceSelection, track: track }), jsx_runtime_1.jsx(SequenceSourceActions, { selection: sequenceSelection, track: track, validatedSource: validatedLocation.source })
+                ] })) : null, validatedLocation ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [jsx_runtime_1.jsx(InspectorSequenceSection_1.InspectorSequenceSection, { sequence: track.sequence, readOnlyStudio: readOnlyStudio, validatedLocation: validatedLocation, nodePathInfo: track.nodePathInfo, keyframeDisplayOffset: track.keyframeDisplayOffset, renderTransformControls: () => jsx_runtime_1.jsx(AlignmentControls_1.AlignmentControls, { track: track }) }), jsx_runtime_1.jsxs(common_1.InspectorQuickActionsSection, { children: [
+                            jsx_runtime_1.jsx(SplitSequenceQuickAction, { selection: sequenceSelection, track: track }), jsx_runtime_1.jsx(SequenceSourceQuickActions, { selection: sequenceSelection, track: track, validatedSource: validatedLocation.source })
                         ] })
                 ] })) : (jsx_runtime_1.jsx(common_1.InspectorMessage, { children: "Source controls unavailable" }))] }));
 };

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

@@ -4,7 +4,7 @@ export declare const InspectorSectionHeader: React.FC<{
     readonly children: React.ReactNode;
 }>;
 export declare const InspectorSectionDivider: React.FC;
-export declare const InspectorActionSection: React.FC<{
+export declare const InspectorQuickActionsSection: React.FC<{
     readonly children: React.ReactNode;
 }>;
 export declare const InspectorSection: React.FC<{
@@ -24,13 +24,13 @@ export declare const InspectorDetailRow: React.FC<{
     readonly label: React.ReactNode | ((hovered: boolean) => React.ReactNode);
     readonly children: React.ReactNode;
 }>;
-export type InspectorInlineActionSegment = {
+export type InspectorQuickActionSegment = {
     readonly disabled: boolean;
     readonly onClick: React.MouseEventHandler<HTMLButtonElement>;
     readonly renderIcon: (color: string) => React.ReactNode;
     readonly title?: string;
 };
-export type InspectorInlineActionProps = {
+export type InspectorQuickActionProps = {
     readonly children: React.ReactNode;
     readonly disabled: boolean;
     readonly iconContainerStyle?: React.CSSProperties;
@@ -43,10 +43,10 @@ export type InspectorInlineActionProps = {
         readonly type: 'single';
     } | {
         readonly type: 'segmented';
-        readonly trailing: InspectorInlineActionSegment;
+        readonly trailing: InspectorQuickActionSegment;
     };
 };
-export declare const InspectorInlineAction: React.FC<InspectorInlineActionProps>;
+export declare const InspectorQuickAction: React.FC<InspectorQuickActionProps>;
 export declare const InspectorDefaultPropsWarnings: React.FC<{
     readonly warnings: RenderModalWarning[];
 }>;

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.InspectorInlineAction = exports.InspectorDetailRow = exports.InspectorMessage = exports.InspectorBackAction = exports.InspectorSection = exports.InspectorActionSection = exports.InspectorSectionDivider = exports.InspectorSectionHeader = void 0;
+exports.InspectorDefaultPropsWarnings = exports.InspectorQuickAction = exports.InspectorDetailRow = exports.InspectorMessage = exports.InspectorBackAction = exports.InspectorSection = exports.InspectorQuickActionsSection = exports.InspectorSectionDivider = 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,10 +16,10 @@ const InspectorSectionHeader = ({ children }) => jsx_runtime_1.jsx("div", { styl
 exports.InspectorSectionHeader = InspectorSectionHeader;
 const InspectorSectionDivider = () => (jsx_runtime_1.jsx("div", { style: styles_1.inspectorSectionDivider }));
 exports.InspectorSectionDivider = InspectorSectionDivider;
-const InspectorActionSection = ({ children }) => (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
-        jsx_runtime_1.jsx(exports.InspectorSectionDivider, {}), jsx_runtime_1.jsx("div", { style: styles_1.inspectorActionSection, children: children })
+const InspectorQuickActionsSection = ({ children }) => (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
+        jsx_runtime_1.jsx(exports.InspectorSectionDivider, {}), jsx_runtime_1.jsx("div", { style: styles_1.inspectorQuickActionsSection, children: children })
     ] }));
-exports.InspectorActionSection = InspectorActionSection;
+exports.InspectorQuickActionsSection = InspectorQuickActionsSection;
 const InspectorSection = ({ children, header }) => {
     return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
             jsx_runtime_1.jsx(exports.InspectorSectionDivider, {}), jsx_runtime_1.jsx(exports.InspectorSectionHeader, { children: header }), children === null ? null : (jsx_runtime_1.jsx("div", { style: styles_1.inspectorSectionBody, children: children }))] }));
@@ -34,7 +34,7 @@ const BackArrow = ({ color }) => {
     return (jsx_runtime_1.jsx("svg", { viewBox: "0 0 512 512", style: backArrowIcon, children: jsx_runtime_1.jsx("path", { d: "M7 239c-9.4 9.4-9.4 24.6 0 33.9L175 441c9.4 9.4 24.6 9.4 33.9 0s9.4-24.6 0-33.9L81.9 280 488 280c13.3 0 24-10.7 24-24s-10.7-24-24-24L81.9 232 209 105c9.4-9.4 9.4-24.6 0-33.9s-24.6-9.4-33.9 0L7 239z", fill: color }) }));
 };
 const InspectorBackAction = ({ children, disabled, onClick, title }) => {
-    return (jsx_runtime_1.jsx("div", { style: styles_1.inspectorActionSection, children: jsx_runtime_1.jsx(exports.InspectorInlineAction, { disabled: disabled, onClick: onClick, renderIcon: (color) => jsx_runtime_1.jsx(BackArrow, { color: color }), title: title, children: children }) }));
+    return (jsx_runtime_1.jsx("div", { style: styles_1.inspectorQuickActionsSection, children: jsx_runtime_1.jsx(exports.InspectorQuickAction, { disabled: disabled, onClick: onClick, renderIcon: (color) => jsx_runtime_1.jsx(BackArrow, { color: color }), title: title, children: children }) }));
 };
 exports.InspectorBackAction = InspectorBackAction;
 const InspectorMessage = ({ children }) => jsx_runtime_1.jsx("div", { style: styles_1.centeredMessage, children: children });
@@ -115,7 +115,7 @@ const segmentedTrailingAction = {
     padding: 0,
     width: 28,
 };
-const InspectorInlineAction = ({ children, disabled, iconContainerStyle, onClick, renderIcon, size = 'default', style, title, variant = { type: 'single' }, }) => {
+const InspectorQuickAction = ({ children, disabled, iconContainerStyle, onClick, renderIcon, size = 'default', style, title, variant = { type: 'single' }, }) => {
     const isSegmented = variant.type === 'segmented';
     // A non-clickable single action (onClick === null) never shows a hover
     // effect. In the segmented variant, the main segment highlights whenever
@@ -137,7 +137,7 @@ const InspectorInlineAction = ({ children, disabled, iconContainerStyle, onClick
     }), [disabled, showsHover, isSegmented, size, style]);
     const mainContent = (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [renderIcon ? (jsx_runtime_1.jsx("span", { style: { ...inlineLabelIcon, ...iconContainerStyle }, children: renderIcon(colors_1.CURRENT_COLOR) })) : null, jsx_runtime_1.jsx("span", { style: inlineLabelText, children: children })
         ] }));
-    const mainAction = onClick ? (jsx_runtime_1.jsx("button", { className: `__remotion-inspector-inline-action ${hoverable_1.HOVERABLE_CLASS_NAME}`, type: "button", disabled: disabled, style: buttonStyle, title: title, onClick: onClick, children: mainContent })) : (jsx_runtime_1.jsx("div", { className: hoverable_1.HOVERABLE_CLASS_NAME, style: buttonStyle, title: title, children: mainContent }));
+    const mainAction = onClick ? (jsx_runtime_1.jsx("button", { className: `__remotion-inspector-quick-action ${hoverable_1.HOVERABLE_CLASS_NAME}`, type: "button", disabled: disabled, style: buttonStyle, title: title, onClick: onClick, children: mainContent })) : (jsx_runtime_1.jsx("div", { className: hoverable_1.HOVERABLE_CLASS_NAME, style: buttonStyle, title: title, children: mainContent }));
     if (variant.type === 'segmented') {
         const trailingStyle = {
             ...segmentedTrailingAction,
@@ -159,7 +159,7 @@ const InspectorInlineAction = ({ children, disabled, iconContainerStyle, onClick
     }
     return mainAction;
 };
-exports.InspectorInlineAction = InspectorInlineAction;
+exports.InspectorQuickAction = InspectorQuickAction;
 const InspectorDefaultPropsWarnings = ({ warnings }) => {
     return (jsx_runtime_1.jsx("div", { style: styles_1.defaultPropsWarningMessages, children: warnings.map((warning) => (jsx_runtime_1.jsx(ValidationMessage_1.ValidationMessage, { message: warning.message, align: "flex-start", type: "warning", size: "compact", action: warning.resolveLink ? (jsx_runtime_1.jsx("a", { href: warning.resolveLink, target: "_blank", rel: "noopener noreferrer", style: styles_1.resolveLinkStyle, children: "Resolve" })) : null }, warning.id))) }));
 };