@remotion/studio 4.0.515 → 4.0.517

package/dist/components/ElementLibraryModal.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+export declare const ElementLibraryModal: React.FC<{
+    readonly name: string;
+    readonly url: string;
+}>;

package/dist/components/ElementLibraryModal.js

@@ -0,0 +1,38 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ElementLibraryModal = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const ModalContainer_1 = require("./ModalContainer");
+const ModalHeader_1 = require("./ModalHeader");
+const DismissableModal_1 = require("./NewComposition/DismissableModal");
+const panelStyle = {
+    display: 'flex',
+    flexDirection: 'column',
+    height: (0, ModalContainer_1.getMaxModalHeight)(1000),
+    overflow: 'hidden',
+    width: (0, ModalContainer_1.getMaxModalWidth)(1400),
+};
+const iframeStyle = {
+    border: 0,
+    flex: 1,
+    minHeight: 0,
+    width: '100%',
+};
+const ElementLibraryModal = ({ name, url }) => {
+    const iframeRef = (0, react_1.useRef)(null);
+    (0, react_1.useLayoutEffect)(() => {
+        const iframe = iframeRef.current;
+        if (iframe === null) {
+            return;
+        }
+        // Studio is cross-origin isolated. A credentialless iframe may embed a
+        // library that does not set Cross-Origin-Resource-Policy headers.
+        iframe.setAttribute('credentialless', '');
+        iframe.src = url;
+    }, [url]);
+    return (jsx_runtime_1.jsxs(DismissableModal_1.DismissableModal, { panelStyle: panelStyle, children: [
+            jsx_runtime_1.jsx(ModalHeader_1.ModalHeader, { title: name }), jsx_runtime_1.jsx("iframe", { ref: iframeRef, allow: "local-network-access; loopback-network", style: iframeStyle, title: `${name} library` })
+        ] }));
+};
+exports.ElementLibraryModal = ElementLibraryModal;

package/dist/components/FilePreview.js

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.FilePreview = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const studio_shared_1 = require("@remotion/studio-shared");
+const react_1 = require("react");
 const colors_1 = require("../helpers/colors");
 const JSONViewer_1 = require("./JSONViewer");
 const layout_1 = require("./layout");
@@ -14,6 +15,73 @@ const msgStyle = {
     display: 'flex',
     justifyContent: 'center',
 };
+const fontPreviewContainerStyle = {
+    display: 'flex',
+    flex: 1,
+    flexDirection: 'column',
+    justifyContent: 'center',
+    overflow: 'hidden',
+    padding: 40,
+    textAlign: 'center',
+};
+const fontPreviewLargeTextStyle = {
+    color: colors_1.WHITE,
+    fontSize: 'clamp(80px, 18vh, 180px)',
+    lineHeight: 1,
+};
+const fontPreviewTextStyle = {
+    color: colors_1.LIGHT_TEXT,
+    fontSize: 'clamp(18px, 4vh, 40px)',
+    lineHeight: 1.35,
+    marginTop: 32,
+    wordBreak: 'break-word',
+};
+let fontPreviewId = 0;
+const FontPreview = ({ src }) => {
+    const [fontFamily] = (0, react_1.useState)(() => {
+        fontPreviewId++;
+        return `RemotionStudioFontPreview${fontPreviewId}`;
+    });
+    const [fontLoaded, setFontLoaded] = (0, react_1.useState)(false);
+    const [fontLoadFailed, setFontLoadFailed] = (0, react_1.useState)(false);
+    (0, react_1.useEffect)(() => {
+        let cancelled = false;
+        const fontFace = new FontFace(fontFamily, `url(${JSON.stringify(src)})`);
+        setFontLoaded(false);
+        setFontLoadFailed(false);
+        fontFace
+            .load()
+            .then((loadedFontFace) => {
+            if (cancelled) {
+                return;
+            }
+            document.fonts.add(loadedFontFace);
+            setFontLoaded(true);
+        })
+            .catch(() => {
+            if (!cancelled) {
+                setFontLoadFailed(true);
+            }
+        });
+        return () => {
+            cancelled = true;
+            document.fonts.delete(fontFace);
+        };
+    }, [fontFamily, src]);
+    if (fontLoadFailed) {
+        return jsx_runtime_1.jsx("div", { style: msgStyle, children: "Could not preview font" });
+    }
+    if (!fontLoaded) {
+        return jsx_runtime_1.jsx("div", { style: msgStyle, children: "Loading font preview..." });
+    }
+    return (jsx_runtime_1.jsxs("div", { style: { ...fontPreviewContainerStyle, fontFamily }, children: [
+            jsx_runtime_1.jsx("div", { style: fontPreviewLargeTextStyle, children: "Aa" }), jsx_runtime_1.jsxs("div", { style: fontPreviewTextStyle, children: ["ABCDEFGHIJKLMNOPQRSTUVWXYZ",
+                    jsx_runtime_1.jsx("br", {}),
+                    "abcdefghijklmnopqrstuvwxyz",
+                    jsx_runtime_1.jsx("br", {}),
+                    "0123456789"] })
+        ] }));
+};
 const FilePreview = ({ fileType, src, currentAsset, assetMetadata }) => {
     if (!assetMetadata) {
         throw new Error('expected to have assetMetadata');
@@ -33,6 +101,9 @@ const FilePreview = ({ fileType, src, currentAsset, assetMetadata }) => {
     if (fileType === 'image') {
         return jsx_runtime_1.jsx("img", { src: src });
     }
+    if (fileType === 'font') {
+        return jsx_runtime_1.jsx(FontPreview, { src: src });
+    }
     if (fileType === 'json') {
         return jsx_runtime_1.jsx(JSONViewer_1.JSONViewer, { src: src });
     }

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',
@@ -58,7 +59,7 @@ const inspectorTitleWrapper = {
     ...titleWrapper,
     fontFamily: 'sans-serif',
     fontSize: 13,
-    height: layout_1.COMPACT_INLINE_ROW_HEIGHT,
+    height: layout_1.COMPACT_CONTROL_ROW_HEIGHT,
     margin: '0 4px',
     width: 'calc(100% - 8px)',
 };
@@ -67,10 +68,10 @@ const inspectorTitleInner = {
     alignItems: 'center',
     fontFamily: 'sans-serif',
     fontSize: 13,
-    height: layout_1.COMPACT_INLINE_ROW_HEIGHT,
+    height: layout_1.COMPACT_CONTROL_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 }) => {

package/dist/components/InspectorOpenInEditor.js

@@ -10,45 +10,25 @@ const open_in_editor_1 = require("../helpers/open-in-editor");
 const caret_1 = require("../icons/caret");
 const editor_1 = require("../icons/editor");
 const modals_1 = require("../state/modals");
-const z_index_1 = require("../state/z-index");
 const get_open_in_menu_items_1 = require("./get-open-in-menu-items");
-const InlineDropdown_1 = require("./InlineDropdown");
 const NotificationCenter_1 = require("./Notifications/NotificationCenter");
 const actions_1 = require("./RenderQueue/actions");
+const SegmentedButton_1 = require("./SegmentedButton");
 const use_default_editor_info_1 = require("./use-default-editor-info");
-const splitButton = {
-    alignItems: 'center',
-    borderRadius: 3,
-    display: 'inline-flex',
-    flexDirection: 'row',
-    flexShrink: 0,
-    gap: 1,
-    height: 24,
-    overflow: 'hidden',
-};
-const mainButtonBase = {
-    alignItems: 'center',
-    background: colors_1.TRANSPARENT,
-    border: 'none',
-    borderRadius: '3px 0 0 3px',
-    color: colors_1.LIGHT_TEXT,
+const mainSegmentStyle = {
     columnGap: 4,
-    display: 'inline-flex',
-    fontFamily: 'sans-serif',
     fontSize: 11,
-    height: 24,
     lineHeight: '14px',
-    padding: '0 6px',
-    whiteSpace: 'nowrap',
+    padding: '0 2px 0 4px',
+};
+const dropdownSegmentStyle = {
+    padding: 0,
+    width: 20,
 };
 const editorButtonIconSize = 18;
 const InspectorOpenInEditor = ({ contextForAgents = null, label, location, locationType }) => {
     const { previewServerState } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
     const { setSelectedModal } = (0, react_1.useContext)(modals_1.SetSelectedModalContext);
-    const { tabIndex } = (0, z_index_1.useZIndex)();
-    const [hovered, setHovered] = (0, react_1.useState)(false);
-    const [dropdownOpened, setDropdownOpened] = (0, react_1.useState)(false);
-    const ignorePointerEnter = (0, react_1.useRef)(false);
     const { canConfigureApps, canOpenInEditor, defaultEditorId, defaultEditorName, editorInfo, } = (0, use_default_editor_info_1.useEditorOpening)(previewServerState.type === 'connected');
     const codingAgentInfo = (0, use_default_editor_info_1.useDefaultCodingAgentInfo)(canConfigureApps);
     const openWithEditor = (0, react_1.useCallback)(async (editorId) => {
@@ -81,40 +61,6 @@ const InspectorOpenInEditor = ({ contextForAgents = null, label, location, locat
             openWithEditor(defaultEditorId).catch(() => undefined);
         }
     }, [defaultEditorId, openWithEditor]);
-    const onDropdownOpenChange = (0, react_1.useCallback)((open) => {
-        setDropdownOpened(open);
-        if (!open) {
-            ignorePointerEnter.current = true;
-            setHovered(false);
-        }
-    }, []);
-    const mainHovered = hovered && !dropdownOpened;
-    const mainButtonStyle = (0, react_1.useMemo)(() => {
-        return {
-            ...mainButtonBase,
-            background: (0, colors_1.getBackgroundFromHoverState)({
-                hovered: mainHovered,
-                selected: false,
-            }),
-            color: mainHovered ? colors_1.WHITE : colors_1.LIGHT_TEXT,
-            opacity: canOpenDefault ? 1 : 0.5,
-            pointerEvents: canOpenDefault ? 'auto' : 'none',
-        };
-    }, [canOpenDefault, mainHovered]);
-    const dropdownForegroundColor = hovered || dropdownOpened ? colors_1.WHITE : colors_1.LIGHT_TEXT;
-    const dropdownStyle = (0, react_1.useMemo)(() => {
-        return {
-            background: (0, colors_1.getBackgroundFromHoverState)({
-                hovered,
-                selected: dropdownOpened,
-            }),
-            borderRadius: '0 3px 3px 0',
-            color: dropdownForegroundColor,
-        };
-    }, [dropdownForegroundColor, dropdownOpened, hovered]);
-    const renderDropdownAction = (0, react_1.useCallback)((color) => {
-        return jsx_runtime_1.jsx(caret_1.CaretDown, { color: color, small: true });
-    }, []);
     const menuItems = (0, react_1.useMemo)(() => {
         return (0, get_open_in_menu_items_1.getOpenInMenuItems)({
             codingAgentInfo,
@@ -187,20 +133,50 @@ const InspectorOpenInEditor = ({ contextForAgents = null, label, location, locat
         openWithEditor,
         setSelectedModal,
     ]);
+    const segments = (0, react_1.useMemo)(() => {
+        return [
+            {
+                ariaLabel: `Open in ${editorName}`,
+                buttonId: null,
+                disabled: !canOpenDefault,
+                idleColor: colors_1.LIGHT_TEXT,
+                onClick: onOpenDefault,
+                onPointerDown: null,
+                renderContent: () => (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [label, jsx_runtime_1.jsx(editor_1.EditorIcon, { editorId: defaultEditorId, size: editorButtonIconSize })
+                    ] })),
+                segmentId: 'default-editor',
+                style: mainSegmentStyle,
+                title: `Open in ${editorName}`,
+                type: 'action',
+            },
+            {
+                ariaLabel: 'Open in another app',
+                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-app',
+                selectedId: null,
+                style: dropdownSegmentStyle,
+                title: 'Open in another app',
+                type: 'menu',
+                values: menuItems,
+            },
+        ];
+    }, [
+        canOpenDefault,
+        defaultEditorId,
+        editorName,
+        label,
+        menuItems,
+        onOpenDefault,
+    ]);
     if (previewServerState.type !== 'connected' ||
         (0, browser_studio_operations_1.getBrowserStudioOperations)() !== null) {
         return null;
     }
-    return (jsx_runtime_1.jsxs("div", { style: splitButton, onPointerEnter: () => {
-            if (!ignorePointerEnter.current) {
-                setHovered(true);
-            }
-        }, onPointerLeave: () => {
-            ignorePointerEnter.current = false;
-            setHovered(false);
-        }, children: [
-            jsx_runtime_1.jsxs("button", { "aria-label": `Open in ${editorName}`, disabled: !canOpenDefault, onClick: onOpenDefault, style: mainButtonStyle, tabIndex: tabIndex, title: `Open in ${editorName}`, type: "button", children: [label, jsx_runtime_1.jsx(editor_1.EditorIcon, { editorId: defaultEditorId, size: editorButtonIconSize })
-                ] }), jsx_runtime_1.jsx(InlineDropdown_1.InlineDropdown, { onOpenChange: onDropdownOpenChange, renderAction: renderDropdownAction, style: dropdownStyle, title: "Open in another app", unhoveredColor: dropdownForegroundColor, values: menuItems, variant: "compact" })
-        ] }));
+    return jsx_runtime_1.jsx(SegmentedButton_1.SegmentedButton, { segments: segments, style: null, title: null });
 };
 exports.InspectorOpenInEditor = InspectorOpenInEditor;

package/dist/components/InspectorPanel/AlignmentControls.js

@@ -39,10 +39,9 @@ const iconStyle = {
     width: 16,
     height: 16,
 };
-const verticalDivider = {
+const verticalSpacer = {
     width: 1,
     height: 16,
-    backgroundColor: 'rgba(255, 255, 255, 0.1)',
     margin: '0 8px',
 };
 const AlignmentButton = ({ onClick, title, Icon, disabled }) => {
@@ -218,7 +217,7 @@ const AlignmentControls = ({ track }) => {
     }
     const alignmentDisabled = !isPropStatusDraggable(renderPropStatus);
     return (jsx_runtime_1.jsxs("div", { style: container, children: [
-            jsx_runtime_1.jsx(AlignmentButton, { title: "Align left", onClick: () => handleAlign('left'), Icon: align_left_1.AlignLeftIcon, disabled: alignmentDisabled }), jsx_runtime_1.jsx(AlignmentButton, { title: "Align center horizontally", onClick: () => handleAlign('center-h'), Icon: align_center_horizontal_1.AlignCenterHorizontalIcon, disabled: alignmentDisabled }), jsx_runtime_1.jsx(AlignmentButton, { title: "Align right", onClick: () => handleAlign('right'), Icon: align_right_1.AlignRightIcon, disabled: alignmentDisabled }), jsx_runtime_1.jsx("div", { style: verticalDivider }), jsx_runtime_1.jsx(AlignmentButton, { title: "Align top", onClick: () => handleAlign('top'), Icon: align_top_1.AlignTopIcon, disabled: alignmentDisabled }), jsx_runtime_1.jsx(AlignmentButton, { title: "Align center vertically", onClick: () => handleAlign('center-v'), Icon: align_center_vertical_1.AlignCenterVerticalIcon, disabled: alignmentDisabled }), jsx_runtime_1.jsx(AlignmentButton, { title: "Align bottom", onClick: () => handleAlign('bottom'), Icon: align_bottom_1.AlignBottomIcon, disabled: alignmentDisabled })
+            jsx_runtime_1.jsx(AlignmentButton, { title: "Align left", onClick: () => handleAlign('left'), Icon: align_left_1.AlignLeftIcon, disabled: alignmentDisabled }), jsx_runtime_1.jsx(AlignmentButton, { title: "Align center horizontally", onClick: () => handleAlign('center-h'), Icon: align_center_horizontal_1.AlignCenterHorizontalIcon, disabled: alignmentDisabled }), jsx_runtime_1.jsx(AlignmentButton, { title: "Align right", onClick: () => handleAlign('right'), Icon: align_right_1.AlignRightIcon, disabled: alignmentDisabled }), jsx_runtime_1.jsx("div", { style: verticalSpacer }), jsx_runtime_1.jsx(AlignmentButton, { title: "Align top", onClick: () => handleAlign('top'), Icon: align_top_1.AlignTopIcon, disabled: alignmentDisabled }), jsx_runtime_1.jsx(AlignmentButton, { title: "Align center vertically", onClick: () => handleAlign('center-v'), Icon: align_center_vertical_1.AlignCenterVerticalIcon, disabled: alignmentDisabled }), jsx_runtime_1.jsx(AlignmentButton, { title: "Align bottom", onClick: () => handleAlign('bottom'), Icon: align_bottom_1.AlignBottomIcon, disabled: alignmentDisabled })
         ] }));
 };
 exports.AlignmentControls = AlignmentControls;

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

@@ -0,0 +1,7 @@
+import React from 'react';
+export declare const CollapsibleInspectorSectionHeader: React.FC<{
+    readonly action: React.ReactNode;
+    readonly expanded: boolean;
+    readonly label: string;
+    readonly onToggle: () => void;
+}>;

package/dist/components/InspectorPanel/CollapsibleInspectorSectionHeader.js

@@ -0,0 +1,39 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CollapsibleInspectorSectionHeader = void 0;
+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',
+    display: 'block',
+    flex: 1,
+    fontFamily: 'Arial, Helvetica, sans-serif',
+    fontSize: 12,
+    fontWeight: 'bold',
+    lineHeight: '16px',
+    margin: 0,
+    minWidth: 0,
+    overflow: 'hidden',
+    padding: '4px 0',
+    textAlign: 'left',
+    textOverflow: 'ellipsis',
+    userSelect: 'none',
+    whiteSpace: 'nowrap',
+    ...(0, hoverable_1.hoverableStyle)({
+        idleBackground: colors_1.TRANSPARENT,
+        hoverBackground: colors_1.TRANSPARENT,
+        idleColor: colors_1.LIGHT_TEXT,
+        hoverColor: colors_1.WHITE,
+    }),
+};
+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] }));
+};
+exports.CollapsibleInspectorSectionHeader = CollapsibleInspectorSectionHeader;