@remotion/studio 4.0.514 → 4.0.516

package/dist/components/ConfigSelect.js

@@ -0,0 +1,50 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ConfigSelect = exports.booleanOptions = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const Checkmark_1 = require("../icons/Checkmark");
+const ComboBox_1 = require("./NewComposition/ComboBox");
+const layout_1 = require("./RenderModal/layout");
+const DEFAULT_VALUE = 'studio-default';
+const controlWidth = {
+    boxSizing: 'border-box',
+    width: 180,
+};
+exports.booleanOptions = [
+    { label: 'Enabled', value: true },
+    { label: 'Disabled', value: false },
+];
+const ConfigSelect = ({ defaultLabel, name, onChange, options, value, }) => {
+    const values = [
+        {
+            id: DEFAULT_VALUE,
+            keyHint: null,
+            label: `Default (${defaultLabel})`,
+            leftItem: value === null ? jsx_runtime_1.jsx(Checkmark_1.Checkmark, {}) : null,
+            onClick: () => onChange(null),
+            quickSwitcherLabel: null,
+            subMenu: null,
+            type: 'item',
+            value: DEFAULT_VALUE,
+        },
+        { id: `${DEFAULT_VALUE}-divider`, type: 'divider' },
+        ...options.map((option) => {
+            const id = `${name}-${String(option.value)}`;
+            return {
+                id,
+                keyHint: null,
+                label: option.label,
+                leftItem: value === option.value ? jsx_runtime_1.jsx(Checkmark_1.Checkmark, {}) : null,
+                onClick: () => onChange(option.value),
+                quickSwitcherLabel: null,
+                subMenu: null,
+                type: 'item',
+                value: id,
+            };
+        }),
+    ];
+    return (jsx_runtime_1.jsxs("div", { style: layout_1.optionRow, children: [
+            jsx_runtime_1.jsx("div", { style: layout_1.label, children: name }), jsx_runtime_1.jsx("div", { style: layout_1.rightRow, children: jsx_runtime_1.jsx(ComboBox_1.Combobox, { values: values, selectedId: value === null ? DEFAULT_VALUE : `${name}-${String(value)}`, style: controlWidth, title: name }) })
+        ] }));
+};
+exports.ConfigSelect = ConfigSelect;

package/dist/components/CurrentAsset.d.ts

@@ -1,9 +1,16 @@
 import React from 'react';
 import type { MediaMetadata } from '../helpers/use-media-metadata';
-export declare const CURRENT_ASSET_HEIGHT = 84;
+export declare const CURRENT_ASSET_HEIGHT: number;
 export declare const getCurrentAssetMetadataSource: (assetName: string | null) => string | null;
 export declare const getCurrentAssetImageMetadataSource: (assetName: string | null) => string | null;
-export declare const getCurrentAssetMediaDetailLines: (mediaMetadata: MediaMetadata) => string[];
+type CurrentAssetDetail = {
+    readonly label: string;
+    readonly value: string;
+};
+export declare const getCurrentAssetMediaSections: (mediaMetadata: MediaMetadata) => {
+    audio: CurrentAssetDetail[] | null;
+    video: CurrentAssetDetail[] | null;
+};
 export declare const AssetInfo: React.FC<{
     readonly assetName: string | null;
     readonly contentSized?: boolean;
@@ -13,3 +20,4 @@ export declare const AssetInfo: React.FC<{
 export declare const CurrentAsset: React.FC<{
     readonly readOnlyStudio: boolean;
 }>;
+export {};

package/dist/components/CurrentAsset.js

@@ -1,23 +1,62 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.CurrentAsset = exports.AssetInfo = exports.getCurrentAssetMediaDetailLines = exports.getCurrentAssetImageMetadataSource = exports.getCurrentAssetMetadataSource = exports.CURRENT_ASSET_HEIGHT = void 0;
+exports.CurrentAsset = exports.AssetInfo = exports.getCurrentAssetMediaSections = exports.getCurrentAssetImageMetadataSource = exports.getCurrentAssetMetadataSource = exports.CURRENT_ASSET_HEIGHT = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const studio_shared_1 = require("@remotion/studio-shared");
 const react_1 = require("react");
 const remotion_1 = require("remotion");
 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 format_media_duration_1 = require("../helpers/format-media-duration");
+const get_file_manager_name_1 = require("../helpers/get-file-manager-name");
 const get_preview_file_type_1 = require("../helpers/get-preview-file-type");
+const open_in_remotion_convert_1 = require("../helpers/open-in-remotion-convert");
 const render_codec_label_1 = require("../helpers/render-codec-label");
 const use_image_metadata_1 = require("../helpers/use-image-metadata");
 const use_media_metadata_1 = require("../helpers/use-media-metadata");
+const folder_1 = require("../icons/folder");
+const remotion_convert_1 = require("../icons/remotion-convert");
+const trash_1 = require("../icons/trash");
 const InlineEditableTitle_1 = require("./InlineEditableTitle");
 const InspectorInfoHeader_1 = require("./InspectorInfoHeader");
+const common_1 = require("./InspectorPanel/common");
 const InspectorPanelLayout_1 = require("./InspectorPanelLayout");
+const layout_1 = require("./layout");
 const use_rename_static_file_1 = require("./NewComposition/use-rename-static-file");
+const NotificationCenter_1 = require("./Notifications/NotificationCenter");
+const actions_1 = require("./RenderQueue/actions");
+const use_delete_asset_1 = require("./use-delete-asset");
 const use_static_files_1 = require("./use-static-files");
-exports.CURRENT_ASSET_HEIGHT = InspectorInfoHeader_1.INSPECTOR_INFO_HEADER_MIN_HEIGHT;
+exports.CURRENT_ASSET_HEIGHT = layout_1.COMPACT_INLINE_ROW_HEIGHT + 8;
+const quickActionIconStyle = {
+    display: 'block',
+    height: 18,
+    width: 18,
+};
+const convertArrowStyle = {
+    display: 'inline-block',
+    height: 12,
+    marginLeft: 4,
+    verticalAlign: -2,
+    width: 12,
+};
+const assetMetadataStyle = {
+    padding: `0 ${InspectorPanelLayout_1.INSPECTOR_PANEL_HORIZONTAL_PADDING}px`,
+};
+const assetMetadataValueStyle = {
+    color: colors_1.LIGHT_TEXT,
+    fontFamily: 'sans-serif',
+    fontSize: 13,
+    lineHeight: '20px',
+};
+const assetEmptyStateStyle = {
+    color: colors_1.LIGHT_TEXT,
+    fontFamily: 'sans-serif',
+    fontSize: 12,
+    lineHeight: 1.4,
+    padding: `0 ${InspectorPanelLayout_1.INSPECTOR_PANEL_HORIZONTAL_PADDING}px`,
+};
 const getCurrentAssetMetadataSource = (assetName) => {
     if (!assetName) {
         return null;
@@ -38,39 +77,72 @@ const getCurrentAssetImageMetadataSource = (assetName) => {
 };
 exports.getCurrentAssetImageMetadataSource = getCurrentAssetImageMetadataSource;
 const formatFps = (fps) => `${fps.toFixed(2)} FPS`;
-const getCurrentAssetMediaDetailLines = (mediaMetadata) => {
-    const detailLines = [];
-    if (mediaMetadata.hasVideoTrack === true) {
-        const videoParts = [
-            (0, render_codec_label_1.renderHumanReadableVideoCodec)(mediaMetadata.videoCodec),
-        ];
+const getCurrentAssetMediaSections = (mediaMetadata) => {
+    const hasVideo = mediaMetadata.hasVideoTrack === true ||
+        mediaMetadata.width !== null ||
+        mediaMetadata.height !== null ||
+        mediaMetadata.videoCodec !== null ||
+        mediaMetadata.fps !== null ||
+        mediaMetadata.isHdr !== null;
+    const hasAudio = mediaMetadata.hasAudioTrack === true ||
+        mediaMetadata.audioCodec !== null ||
+        mediaMetadata.sampleRate !== null;
+    const video = [];
+    const audio = [];
+    if (hasVideo) {
+        if (mediaMetadata.width !== null && mediaMetadata.height !== null) {
+            video.push({
+                label: 'Dimensions',
+                value: `${mediaMetadata.width} × ${mediaMetadata.height}`,
+            });
+        }
         if (mediaMetadata.fps !== null) {
-            videoParts.push(formatFps(mediaMetadata.fps));
+            video.push({ label: 'Frame rate', value: formatFps(mediaMetadata.fps) });
         }
+        video.push({
+            label: 'Duration',
+            value: (0, format_media_duration_1.formatMediaDuration)(mediaMetadata.duration),
+        });
+        video.push({
+            label: 'Codec',
+            value: (0, render_codec_label_1.renderHumanReadableVideoCodec)(mediaMetadata.videoCodec),
+        });
         if (mediaMetadata.isHdr !== null) {
-            videoParts.push(`HDR: ${mediaMetadata.isHdr ? 'Yes' : 'No'}`);
+            video.push({
+                label: 'HDR',
+                value: mediaMetadata.isHdr ? 'Yes' : 'No',
+            });
         }
-        detailLines.push(`Video: ${videoParts.join(' · ')}`);
     }
-    if (mediaMetadata.hasAudioTrack === true) {
-        const audioParts = [
-            (0, render_codec_label_1.renderHumanReadableAudioCodec)(mediaMetadata.audioCodec),
-        ];
+    if (hasAudio) {
+        audio.push({
+            label: 'Duration',
+            value: (0, format_media_duration_1.formatMediaDuration)(mediaMetadata.duration),
+        });
+        audio.push({
+            label: 'Codec',
+            value: (0, render_codec_label_1.renderHumanReadableAudioCodec)(mediaMetadata.audioCodec),
+        });
         if (mediaMetadata.sampleRate !== null) {
-            audioParts.push(`${mediaMetadata.sampleRate} Hz`);
+            audio.push({
+                label: 'Sample rate',
+                value: `${mediaMetadata.sampleRate} Hz`,
+            });
         }
-        detailLines.push(`Audio: ${audioParts.join(' · ')}`);
     }
-    else if (mediaMetadata.hasAudioTrack === false) {
-        detailLines.push('Audio: No audio');
-    }
-    return detailLines;
+    return {
+        audio: hasAudio || (hasVideo && mediaMetadata.hasAudioTrack === false)
+            ? audio
+            : null,
+        video: hasVideo ? video : null,
+    };
 };
-exports.getCurrentAssetMediaDetailLines = getCurrentAssetMediaDetailLines;
+exports.getCurrentAssetMediaSections = getCurrentAssetMediaSections;
 const AssetInfo = ({ assetName, contentSized = false, onAssetClick, readOnlyStudio }) => {
-    var _a;
+    var _a, _b, _c;
     const connectionStatus = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx)
         .previewServerState.type;
+    const browserStudioOperations = (0, browser_studio_operations_1.getBrowserStudioOperations)();
     const staticFiles = (0, use_static_files_1.useStaticFiles)();
     const renameFile = (0, use_rename_static_file_1.useRenameStaticFile)({
         relativePath: assetName !== null && assetName !== void 0 ? assetName : '',
@@ -89,38 +161,59 @@ const AssetInfo = ({ assetName, contentSized = false, onAssetClick, readOnlyStud
     const imageSrc = (0, exports.getCurrentAssetImageMetadataSource)(assetName);
     const imageMetadata = (0, use_image_metadata_1.useImageMetadata)(imageSrc);
     const canRename = onAssetClick === undefined &&
-        ((0, browser_studio_operations_1.getBrowserStudioOperations)() !== null ||
+        (browserStudioOperations !== null ||
             (connectionStatus === 'connected' && !readOnlyStudio));
     const onRename = (0, react_1.useCallback)((newName) => {
         renameFile(newName).catch(() => undefined);
     }, [renameFile]);
+    const onOpenConvert = (0, react_1.useCallback)(() => {
+        if (assetName === null) {
+            return;
+        }
+        (0, open_in_remotion_convert_1.openInRemotionConvert)({ relativePath: assetName });
+    }, [assetName]);
+    const onShowInFileManager = (0, react_1.useCallback)(() => {
+        if (assetName === null || !window.remotion_publicFolderExists) {
+            (0, NotificationCenter_1.showNotification)('Could not find the public folder', 2000);
+            return;
+        }
+        (0, actions_1.openInFileExplorer)({
+            directory: window.remotion_publicFolderExists + '/' + assetName,
+        }).catch((err) => {
+            (0, NotificationCenter_1.showNotification)(`Could not open file: ${err.message}`, 2000);
+        });
+    }, [assetName]);
+    const onDelete = (0, use_delete_asset_1.useDeleteAsset)(assetName);
     if (!assetName) {
-        return jsx_runtime_1.jsx(InspectorInfoHeader_1.InspectorInfoHeader, { contentSized: contentSized });
+        return (jsx_runtime_1.jsx(InspectorInfoHeader_1.InspectorInfoHeader, { contentSized: contentSized, minHeight: exports.CURRENT_ASSET_HEIGHT }));
     }
     const fileName = (_a = assetName.split('/').pop()) !== null && _a !== void 0 ? _a : assetName;
-    const subtitleParts = [];
-    if (sizeInBytes !== null) {
-        subtitleParts.push((0, studio_shared_1.formatBytes)(sizeInBytes));
-    }
-    if (mediaMetadata) {
-        if (mediaMetadata.format) {
-            subtitleParts.push(mediaMetadata.format);
-        }
-        if (mediaMetadata.width !== null && mediaMetadata.height !== null) {
-            subtitleParts.push(`${mediaMetadata.width}x${mediaMetadata.height}`);
-        }
+    const fileDetails = [];
+    const container = (_c = (_b = mediaMetadata === null || mediaMetadata === void 0 ? void 0 : mediaMetadata.format) !== null && _b !== void 0 ? _b : imageMetadata === null || imageMetadata === void 0 ? void 0 : imageMetadata.format) !== null && _c !== void 0 ? _c : null;
+    if (container !== null) {
+        fileDetails.push({ label: 'Container', value: container });
     }
-    else if (imageMetadata) {
-        subtitleParts.push(imageMetadata.format);
-        subtitleParts.push(`${imageMetadata.width}x${imageMetadata.height}`);
+    if (sizeInBytes !== null) {
+        fileDetails.push({ label: 'Size', value: (0, studio_shared_1.formatBytes)(sizeInBytes) });
     }
-    const mediaDetailLines = mediaMetadata
-        ? (0, exports.getCurrentAssetMediaDetailLines)(mediaMetadata)
-        : [];
-    return (jsx_runtime_1.jsxs(InspectorInfoHeader_1.InspectorInfoHeader, { contentSized: contentSized, padding: contentSized ? `0 ${InspectorPanelLayout_1.INSPECTOR_PANEL_HORIZONTAL_PADDING}px 6px` : '4px 0', children: [
-            jsx_runtime_1.jsx(InlineEditableTitle_1.InlineEditableTitle, { value: fileName, canRename: canRename, getInitialSelection: use_rename_static_file_1.getStaticFileRenameSelection, onClick: onAssetClick, onCommit: onRename, size: contentSized ? 'default' : 'inspector', title: assetName }), subtitleParts.length > 0 ? (jsx_runtime_1.jsx(InspectorInfoHeader_1.InspectorInfoSubtitle, { size: contentSized ? 'default' : 'inspector', children: subtitleParts.join(' · ') })) : null, mediaMetadata ? (jsx_runtime_1.jsx(InspectorInfoHeader_1.InspectorInfoSubtitle, { size: contentSized ? 'default' : 'inspector', children: (0, format_media_duration_1.formatMediaDuration)(mediaMetadata.duration) })) : null, mediaDetailLines.map((line) => {
-                return (jsx_runtime_1.jsx(InspectorInfoHeader_1.InspectorInfoSubtitle, { size: contentSized ? 'default' : 'inspector', children: line }, line));
-            })] }));
+    const mediaSections = mediaMetadata
+        ? (0, exports.getCurrentAssetMediaSections)(mediaMetadata)
+        : null;
+    const fileManagerAvailable = browserStudioOperations === null;
+    const fileManagerDisabled = window.remotion_publicFolderExists === null ||
+        readOnlyStudio ||
+        connectionStatus !== 'connected';
+    const fileManagerName = (0, get_file_manager_name_1.getFileManagerName)(window.remotion_fileSystemPlatform);
+    const mutationsDisabled = browserStudioOperations === null &&
+        (readOnlyStudio || connectionStatus !== 'connected');
+    return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
+            jsx_runtime_1.jsxs(InspectorInfoHeader_1.InspectorInfoHeader, { contentSized: contentSized, minHeight: exports.CURRENT_ASSET_HEIGHT, padding: contentSized
+                    ? `0 ${InspectorPanelLayout_1.INSPECTOR_PANEL_HORIZONTAL_PADDING}px 6px`
+                    : '4px 0', children: [
+                    jsx_runtime_1.jsx(InlineEditableTitle_1.InlineEditableTitle, { value: fileName, canRename: canRename, getInitialSelection: use_rename_static_file_1.getStaticFileRenameSelection, onClick: onAssetClick, onCommit: onRename, size: contentSized ? 'default' : 'inspector', title: assetName }), imageMetadata ? (jsx_runtime_1.jsxs(InspectorInfoHeader_1.InspectorInfoSubtitle, { size: contentSized ? 'default' : 'inspector', children: [imageMetadata.width, " \u00D7 ", imageMetadata.height] })) : null] }), fileDetails.length > 0 ? (jsx_runtime_1.jsx(common_1.InspectorSection, { header: "File", children: jsx_runtime_1.jsx("div", { style: assetMetadataStyle, children: fileDetails.map((detail) => (jsx_runtime_1.jsx(common_1.InspectorDetailRow, { label: detail.label, children: jsx_runtime_1.jsx("span", { style: assetMetadataValueStyle, children: detail.value }) }, detail.label))) }) })) : null, mediaSections && mediaSections.video ? (jsx_runtime_1.jsx(common_1.InspectorSection, { header: "Video", children: jsx_runtime_1.jsx("div", { style: assetMetadataStyle, children: mediaSections.video.map((detail) => (jsx_runtime_1.jsx(common_1.InspectorDetailRow, { label: detail.label, children: jsx_runtime_1.jsx("span", { style: assetMetadataValueStyle, children: detail.value }) }, detail.label))) }) })) : null, mediaSections && mediaSections.audio !== null ? (jsx_runtime_1.jsx(common_1.InspectorSection, { header: "Audio", children: mediaSections.audio.length === 0 ? (jsx_runtime_1.jsx("div", { style: assetEmptyStateStyle, children: "None" })) : (jsx_runtime_1.jsx("div", { style: assetMetadataStyle, children: mediaSections.audio.map((detail) => (jsx_runtime_1.jsx(common_1.InspectorDetailRow, { label: detail.label, children: jsx_runtime_1.jsx("span", { style: assetMetadataValueStyle, children: detail.value }) }, detail.label))) })) })) : null, jsx_runtime_1.jsxs(common_1.InspectorQuickActionsSection, { children: [src ? (jsx_runtime_1.jsxs(common_1.InspectorQuickAction, { disabled: false, onClick: onOpenConvert, renderIcon: (color) => (jsx_runtime_1.jsx(remotion_convert_1.RemotionConvertIcon, { color: color, style: quickActionIconStyle })), children: ["Convert",
+                            jsx_runtime_1.jsx("svg", { "aria-hidden": "true", viewBox: "0 0 16 16", style: convertArrowStyle, 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, fileManagerAvailable ? (jsx_runtime_1.jsxs(common_1.InspectorQuickAction, { disabled: fileManagerDisabled, onClick: onShowInFileManager, renderIcon: (color) => (jsx_runtime_1.jsx(folder_1.ExpandedFolderIcon, { color: color, style: quickActionIconStyle })), children: ["Show in ", fileManagerName] })) : null, jsx_runtime_1.jsx(common_1.InspectorQuickAction, { disabled: mutationsDisabled, onClick: onDelete, renderIcon: (color) => (jsx_runtime_1.jsx(trash_1.TrashIcon, { color: color, style: quickActionIconStyle })), children: "Delete" })] })
+        ] }));
 };
 exports.AssetInfo = AssetInfo;
 const CurrentAsset = ({ readOnlyStudio }) => {

package/dist/components/FixComputedValueModal.js

@@ -41,14 +41,13 @@ 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 SegmentedButton_1 = require("./SegmentedButton");
 const SettingsContext_1 = require("./SettingsContext");
 const panelStyle = {
     borderRadius: 6,
@@ -94,36 +93,13 @@ const footer = {
     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,
+const mainSegmentStyle = {
     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 dropdownSegmentStyle = {
+    padding: 0,
+    width: 20,
 };
 const menuLabel = {
     color: 'inherit',
@@ -134,8 +110,6 @@ const menuLabel = {
 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 : [];
@@ -180,20 +154,54 @@ const FixComputedValueModal = ({ state }) => {
             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]);
+    const segments = react_1.default.useMemo(() => {
+        if (!defaultCodingAgent) {
+            return [];
+        }
+        return [
+            {
+                ariaLabel: `Open in ${defaultCodingAgent.nameWithType}`,
+                buttonId: null,
+                disabled: false,
+                idleColor: colors_1.LIGHT_TEXT,
+                onClick: () => {
+                    openWithCodingAgent(defaultCodingAgent.id, defaultCodingAgent.nameWithType).catch(() => undefined);
+                },
+                onPointerDown: null,
+                renderContent: () => (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
+                        jsx_runtime_1.jsx(CodingAgentIcon_1.CodingAgentIcon, { codingAgentId: defaultCodingAgent.id, size: 18 }),
+                        "Open in ", defaultCodingAgent.name] })),
+                segmentId: 'default-coding-agent',
+                style: mainSegmentStyle,
+                title: `Open in ${defaultCodingAgent.nameWithType}`,
+                type: 'action',
+            },
+            ...(alternativeCodingAgents.length > 0
+                ? [
+                    {
+                        ariaLabel: 'Open in another coding agent',
+                        buttonId: null,
+                        disabled: false,
+                        idleColor: colors_1.LIGHT_TEXT,
+                        leaveLeftSpace: true,
+                        onOpenChange: null,
+                        renderContent: (color) => jsx_runtime_1.jsx(caret_1.CaretDown, { color: color }),
+                        segmentId: 'another-coding-agent',
+                        selectedId: null,
+                        style: dropdownSegmentStyle,
+                        title: 'Open in another coding agent',
+                        type: 'menu',
+                        values: agentMenuItems,
+                    },
+                ]
+                : []),
+        ];
+    }, [
+        agentMenuItems,
+        alternativeCodingAgents.length,
+        defaultCodingAgent,
+        openWithCodingAgent,
+    ]);
     return (jsx_runtime_1.jsxs(DismissableModal_1.DismissableModal, { panelStyle: panelStyle, children: [
             jsx_runtime_1.jsx(ModalHeader_1.ModalHeader, { title: "Fix computed value" }), jsx_runtime_1.jsxs("div", { style: container, children: [state.remotionInteractivitySkillAvailable ? null : (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
                             jsx_runtime_1.jsx("div", { style: text, children: "First, install the Remotion Agent Skills:" }), jsx_runtime_1.jsxs("div", { style: commandField, children: [
@@ -207,11 +215,6 @@ const FixComputedValueModal = ({ state }) => {
                             : 'Then, paste this prompt into your coding agent:' }), jsx_runtime_1.jsxs("div", { style: commandField, children: [
                             jsx_runtime_1.jsx("pre", { style: code, children: prompt }), jsx_runtime_1.jsx(InlineAction_1.InlineAction, { variant: null, onClick: onCopyPrompt, renderAction: renderCopyAction, title: "Copy prompt" })
                         ] })
-                ] }), defaultCodingAgent ? (jsx_runtime_1.jsx(ModalFooter_1.ModalFooterContainer, { style: footer, children: jsx_runtime_1.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] }));
+                ] }), defaultCodingAgent ? (jsx_runtime_1.jsx(ModalFooter_1.ModalFooterContainer, { style: footer, children: jsx_runtime_1.jsx(SegmentedButton_1.SegmentedButton, { segments: segments, style: null, title: null }) })) : null] }));
 };
 exports.FixComputedValueModal = FixComputedValueModal;

package/dist/components/GlobalKeybindings.js

@@ -162,12 +162,12 @@ const GlobalKeybindings = () => {
             event: 'keypress',
             key: '?',
             callback: () => {
+                var _a;
+                var _b;
                 setSelectedModal({
-                    type: 'quick-switcher',
-                    mode: 'docs',
-                    invocationTimestamp: Date.now(),
-                    assetSelection: null,
-                    compositionSelection: null,
+                    type: 'settings',
+                    initialTab: 'shortcuts',
+                    initialPublicLicenseKey: (_b = (_a = window.remotion_renderDefaults) === null || _a === void 0 ? void 0 : _a.publicLicenseKey) !== null && _b !== void 0 ? _b : null,
                 });
             },
             commandCtrlKey: false,

package/dist/components/InlineAction.d.ts

@@ -8,4 +8,4 @@ export type InlineActionProps = Omit<React.ButtonHTMLAttributes<HTMLButtonElemen
     readonly variant: 'compact' | null;
     readonly style?: React.CSSProperties;
 };
-export declare const InlineAction: ({ renderAction, onClick, disabled, title, hoveredColor, unhoveredColor, variant, style: customStyle, className, ...buttonProps }: InlineActionProps) => import("react/jsx-runtime").JSX.Element;
+export declare const InlineAction: ({ renderAction, onClick, disabled, title, hoveredColor, unhoveredColor, variant, style: customStyle, className, onPointerDown: onPointerDownProp, ...buttonProps }: InlineActionProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/InlineAction.js

@@ -6,9 +6,19 @@ const react_1 = require("react");
 const colors_1 = require("../helpers/colors");
 const hoverable_1 = require("../helpers/hoverable");
 const z_index_1 = require("../state/z-index");
-const InlineAction = ({ renderAction, onClick, disabled, title, hoveredColor = colors_1.WHITE, unhoveredColor = colors_1.LIGHT_TEXT, variant, style: customStyle, className, ...buttonProps }) => {
+const InlineAction = ({ renderAction, onClick, disabled, title, hoveredColor = colors_1.WHITE, unhoveredColor = colors_1.LIGHT_TEXT, variant, style: customStyle, className, onPointerDown: onPointerDownProp, ...buttonProps }) => {
     var _a;
     const { tabIndex } = (0, z_index_1.useZIndex)();
+    const onPointerDown = (0, react_1.useCallback)((event) => {
+        onPointerDownProp === null || onPointerDownProp === void 0 ? void 0 : onPointerDownProp(event);
+        if (event.button !== 0) {
+            return;
+        }
+        if (document.activeElement instanceof HTMLElement) {
+            document.activeElement.blur();
+        }
+        event.preventDefault();
+    }, [onPointerDownProp]);
     const style = (0, react_1.useMemo)(() => {
         return {
             border: 'none',
@@ -34,6 +44,6 @@ const InlineAction = ({ renderAction, onClick, disabled, title, hoveredColor = c
     }, [customStyle, disabled, hoveredColor, unhoveredColor, variant]);
     return (jsx_runtime_1.jsx("button", { ...buttonProps, type: "button", className: className
             ? `${hoverable_1.HOVERABLE_CLASS_NAME} ${className}`
-            : hoverable_1.HOVERABLE_CLASS_NAME, disabled: disabled, onClick: onClick, style: style, tabIndex: tabIndex, title: title, "aria-label": (_a = buttonProps['aria-label']) !== null && _a !== void 0 ? _a : title, children: renderAction(colors_1.CURRENT_COLOR) }));
+            : hoverable_1.HOVERABLE_CLASS_NAME, disabled: disabled, onClick: onClick, onPointerDown: onPointerDown, style: style, tabIndex: tabIndex, title: title, "aria-label": (_a = buttonProps['aria-label']) !== null && _a !== void 0 ? _a : title, children: renderAction(colors_1.CURRENT_COLOR) }));
 };
 exports.InlineAction = InlineAction;

package/dist/components/InlineCaptionInspector.d.ts

@@ -5,7 +5,9 @@ import type { CodePosition } from '../error-overlay/react-overlay/utils/get-sour
 export declare const InlineCaptionInspector: React.FC<{
     readonly captions: Caption[];
     readonly controls: SequenceRegistrationControls;
+    readonly expanded: boolean;
     readonly nodePath: SequencePropsSubscriptionKey;
+    readonly onToggle: () => void;
     readonly readOnlyStudio: boolean;
     readonly validatedLocation: CodePosition;
 }>;

package/dist/components/InlineCaptionInspector.js

@@ -30,7 +30,7 @@ const getCaptionPatches = ({ previous, next, }) => {
     }
     return patches;
 };
-const InlineCaptionInspector = ({ captions, controls, nodePath, readOnlyStudio, validatedLocation }) => {
+const InlineCaptionInspector = ({ captions, controls, expanded, nodePath, onToggle, readOnlyStudio, validatedLocation, }) => {
     var _a;
     const { previewServerState } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
     const { propStatuses } = (0, react_1.useContext)(remotion_1.Internals.VisualModePropStatusesContext);
@@ -103,6 +103,6 @@ const InlineCaptionInspector = ({ captions, controls, nodePath, readOnlyStudio,
             : (captionStatus === null || captionStatus === void 0 ? void 0 : captionStatus.status) === 'computed'
                 ? 'Captions must be a direct inline JSX array to edit them'
                 : 'Captions are not ready for editing';
-    return (jsx_runtime_1.jsx(CaptionInspector_1.CaptionInspector, { captions: draftCaptions, onTextChange: updateCaptions, onTextSave: saveCaptions, onTextCancel: cancelCaptions, readOnly: !canSave, readOnlyTitle: canSave ? null : readOnlyTitle }));
+    return (jsx_runtime_1.jsx(CaptionInspector_1.CaptionInspector, { captions: draftCaptions, expanded: expanded, onTextChange: updateCaptions, onTextSave: saveCaptions, onTextCancel: cancelCaptions, onToggle: onToggle, readOnly: !canSave, readOnlyTitle: canSave ? null : readOnlyTitle }));
 };
 exports.InlineCaptionInspector = InlineCaptionInspector;

package/dist/components/InlineCompositionName.js

@@ -41,7 +41,7 @@ const InlineCompositionName = ({ compositionId, stack, compositions }) => {
                 notification.replaceContent(`Could not rename composition: ${result.reason}`, 2000);
                 return;
             }
-            notification.replaceContent(`Renamed to ${newId}`, 2000);
+            notification.dismiss();
         })
             .catch((err) => {
             notification.replaceContent(`Could not rename composition: ${err.message}`, 2000);

package/dist/components/InlineEditableTitle.js

@@ -4,6 +4,7 @@ exports.InlineEditableTitle = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const colors_1 = require("../helpers/colors");
+const InspectorPanelLayout_1 = require("./InspectorPanelLayout");
 const layout_1 = require("./layout");
 const titleWrapper = {
     boxSizing: 'border-box',
@@ -69,8 +70,8 @@ const inspectorTitleInner = {
     fontSize: 13,
     height: layout_1.COMPACT_INLINE_ROW_HEIGHT,
     paddingBottom: 0,
-    paddingLeft: 8,
-    paddingRight: 8,
+    paddingLeft: InspectorPanelLayout_1.INSPECTOR_PANEL_HORIZONTAL_PADDING - 4,
+    paddingRight: InspectorPanelLayout_1.INSPECTOR_PANEL_HORIZONTAL_PADDING - 4,
     paddingTop: 0,
     width: '100%',
 };

package/dist/components/InspectorInfoHeader.js

@@ -52,7 +52,7 @@ const inspectorSubtitle = {
     height: 20,
     lineHeight: '20px',
     margin: '0 4px',
-    padding: '0 8px',
+    padding: `0 ${InspectorPanelLayout_1.INSPECTOR_PANEL_HORIZONTAL_PADDING - 4}px`,
     width: 'calc(100% - 8px)',
 };
 const InspectorInfoHeader = ({ children, contentSized = false, minHeight, padding }) => {