@remotion/studio 4.0.502 → 4.0.504

package/dist/components/ElementInstallConfirmation.js

@@ -0,0 +1,205 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ElementInstallConfirmation = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const colors_1 = require("../helpers/colors");
+const ValidationMessage_1 = require("./NewComposition/ValidationMessage");
+const container = {
+    display: 'flex',
+    flexDirection: 'column',
+    gap: 20,
+    color: colors_1.WHITE,
+    fontFamily: 'sans-serif',
+    fontSize: 13,
+    lineHeight: 1.5,
+};
+const sectionStyle = {
+    display: 'flex',
+    flexDirection: 'column',
+    gap: 10,
+};
+const sectionTitleStyle = {
+    margin: 0,
+    color: colors_1.WHITE,
+    fontFamily: 'sans-serif',
+    fontSize: 13,
+    fontWeight: 600,
+    lineHeight: 1.5,
+};
+const metadataStyle = {
+    display: 'flex',
+    flexDirection: 'column',
+    gap: 8,
+    margin: 0,
+};
+const metadataRowStyle = {
+    display: 'grid',
+    gridTemplateColumns: '100px minmax(0, 1fr)',
+    alignItems: 'baseline',
+    gap: 12,
+};
+const metadataTermStyle = {
+    color: colors_1.LIGHT_TEXT,
+    fontFamily: 'sans-serif',
+    fontSize: 13,
+    fontWeight: 500,
+    lineHeight: 1.5,
+};
+const metadataDescriptionStyle = {
+    margin: 0,
+    minWidth: 0,
+    color: colors_1.WHITE,
+    fontFamily: 'sans-serif',
+    fontSize: 13,
+    fontWeight: 400,
+    lineHeight: 1.5,
+    overflowWrap: 'anywhere',
+};
+const unverifiedSourceStyle = {
+    ...metadataDescriptionStyle,
+    color: colors_1.WARNING_COLOR,
+};
+const codeStyle = {
+    color: 'inherit',
+    fontFamily: 'monospace',
+    fontSize: 13,
+    lineHeight: 1.5,
+};
+const overwriteStyle = {
+    margin: 0,
+    color: colors_1.WARNING_COLOR,
+    fontFamily: 'sans-serif',
+    fontSize: 13,
+    fontWeight: 500,
+    lineHeight: 1.5,
+};
+const dependencyListStyle = {
+    display: 'flex',
+    flexDirection: 'column',
+    gap: 8,
+    margin: 0,
+    padding: 0,
+    listStyleType: 'none',
+};
+const dependencyRowStyle = {
+    display: 'flex',
+    alignItems: 'baseline',
+    justifyContent: 'space-between',
+    gap: 16,
+    minWidth: 0,
+};
+const dependencyNameStyle = {
+    minWidth: 0,
+    color: colors_1.WHITE,
+    fontFamily: 'monospace',
+    fontSize: 13,
+    lineHeight: 1.5,
+    overflowWrap: 'anywhere',
+};
+const dependencyInstallStatusStyle = {
+    flexShrink: 0,
+    color: colors_1.WARNING_COLOR,
+    fontFamily: 'sans-serif',
+    fontSize: 13,
+    fontWeight: 500,
+    lineHeight: 1.5,
+};
+const dependencyInstalledStatusStyle = {
+    ...dependencyInstallStatusStyle,
+    color: colors_1.LIGHT_TEXT,
+};
+const warningStyle = {
+    display: 'flex',
+    alignItems: 'flex-start',
+    gap: 10,
+    minWidth: 0,
+};
+const warningIconStyle = {
+    width: 16,
+    height: 16,
+    marginTop: 1,
+    flexShrink: 0,
+    fill: colors_1.WARNING_COLOR,
+};
+const warningDescriptionStyle = {
+    margin: 0,
+    minWidth: 0,
+    color: colors_1.LIGHT_TEXT,
+    fontFamily: 'sans-serif',
+    fontSize: 13,
+    fontWeight: 400,
+    lineHeight: 1.5,
+};
+const sourceDetailsStyle = {
+    paddingTop: 2,
+    fontFamily: 'sans-serif',
+    fontSize: 13,
+    lineHeight: 1.5,
+};
+const sourceSummaryStyle = {
+    cursor: 'pointer',
+    color: colors_1.WHITE,
+    fontFamily: 'sans-serif',
+    fontSize: 13,
+    fontWeight: 500,
+    lineHeight: 1.5,
+};
+const sourceCodeBlockStyle = {
+    marginTop: 10,
+    marginBottom: 0,
+    maxHeight: 240,
+    overflow: 'auto',
+    padding: 12,
+    border: `1px solid ${colors_1.WHITE_ALPHA_12}`,
+    borderRadius: 6,
+    backgroundColor: colors_1.INPUT_BACKGROUND,
+    color: colors_1.WHITE,
+    fontFamily: 'monospace',
+    fontSize: 12,
+    lineHeight: 1.5,
+    whiteSpace: 'pre',
+};
+const sourceCodeStyle = {
+    color: 'inherit',
+    fontFamily: 'inherit',
+    fontSize: 'inherit',
+    lineHeight: 'inherit',
+};
+const makeSourceControlsVisible = (sourceCode) => {
+    return sourceCode.replace(/[\u200b-\u200f\u202a-\u202e\u2066-\u2069\ufeff]/g, (character) => {
+        var _a;
+        return `\\u${(_a = character.codePointAt(0)) === null || _a === void 0 ? void 0 : _a.toString(16).padStart(4, '0')}`;
+    });
+};
+const ElementInstallConfirmation = ({ displayName, sourceLabel, sourceIsUnverified, compositionId, filePath, overwritesExistingFile, dependenciesToReview, missingPackages, sourceCode, }) => {
+    return (jsx_runtime_1.jsxs("div", { style: container, children: [
+            jsx_runtime_1.jsxs("dl", { style: metadataStyle, "aria-label": "Installation details", children: [
+                    jsx_runtime_1.jsxs("div", { style: metadataRowStyle, children: [
+                            jsx_runtime_1.jsx("dt", { style: metadataTermStyle, children: "Element" }), jsx_runtime_1.jsx("dd", { style: metadataDescriptionStyle, children: displayName })
+                        ] }), jsx_runtime_1.jsxs("div", { style: metadataRowStyle, children: [
+                            jsx_runtime_1.jsx("dt", { style: metadataTermStyle, children: "Request source" }), jsx_runtime_1.jsx("dd", { style: sourceIsUnverified
+                                    ? unverifiedSourceStyle
+                                    : metadataDescriptionStyle, children: sourceLabel })
+                        ] }), jsx_runtime_1.jsxs("div", { style: metadataRowStyle, children: [
+                            jsx_runtime_1.jsx("dt", { style: metadataTermStyle, children: "Composition" }), jsx_runtime_1.jsx("dd", { style: metadataDescriptionStyle, children: jsx_runtime_1.jsx("code", { style: codeStyle, children: compositionId }) })
+                        ] }), jsx_runtime_1.jsxs("div", { style: metadataRowStyle, children: [
+                            jsx_runtime_1.jsx("dt", { style: metadataTermStyle, children: "Destination" }), jsx_runtime_1.jsx("dd", { style: metadataDescriptionStyle, children: jsx_runtime_1.jsx("code", { style: codeStyle, children: filePath }) })
+                        ] }), overwritesExistingFile ? (jsx_runtime_1.jsxs("div", { style: metadataRowStyle, children: [
+                            jsx_runtime_1.jsx("dt", { style: metadataTermStyle, children: "File change" }), jsx_runtime_1.jsx("dd", { style: overwriteStyle, children: "Replace existing source file" })
+                        ] })) : null] }), dependenciesToReview.length > 0 ? (jsx_runtime_1.jsxs("section", { style: sectionStyle, "aria-labelledby": "element-install-dependencies", children: [
+                    jsx_runtime_1.jsx("h3", { id: "element-install-dependencies", style: sectionTitleStyle, children: "Dependencies" }), jsx_runtime_1.jsx("ul", { style: dependencyListStyle, role: "list", children: dependenciesToReview.map((packageName) => {
+                            const willInstall = missingPackages.includes(packageName);
+                            return (jsx_runtime_1.jsxs("li", { style: dependencyRowStyle, children: [
+                                    jsx_runtime_1.jsx("div", { style: dependencyNameStyle, children: packageName }), jsx_runtime_1.jsx("div", { style: willInstall
+                                            ? dependencyInstallStatusStyle
+                                            : dependencyInstalledStatusStyle, children: willInstall ? 'Will be installed' : 'Installed' })
+                                ] }, packageName));
+                        }) })
+                ] })) : null, jsx_runtime_1.jsxs("div", { style: warningStyle, children: [
+                    jsx_runtime_1.jsx(ValidationMessage_1.WarningTriangle, { style: warningIconStyle }), jsx_runtime_1.jsx("p", { style: warningDescriptionStyle, children: "This adds executable source code to your project. Package lifecycle scripts may also run during installation, with access to your files and the network." })
+                ] }), jsx_runtime_1.jsxs("details", { style: sourceDetailsStyle, children: [
+                    jsx_runtime_1.jsx("summary", { style: sourceSummaryStyle, children: "Source code" }), jsx_runtime_1.jsx("pre", { style: sourceCodeBlockStyle, children: jsx_runtime_1.jsx("code", { style: sourceCodeStyle, children: makeSourceControlsVisible(sourceCode) }) })
+                ] })
+        ] }));
+};
+exports.ElementInstallConfirmation = ElementInstallConfirmation;

package/dist/components/ForceSpecificCursor.js

@@ -40,7 +40,19 @@ const ref = react_1.default.createRef();
 const removeAutomaticCleanupListeners = () => {
     window.removeEventListener('pointerup', exports.stopForcingSpecificCursor, true);
     window.removeEventListener('pointercancel', exports.stopForcingSpecificCursor, true);
+    window.removeEventListener('pointermove', stopIfNoButtonsArePressed, true);
     window.removeEventListener('blur', exports.stopForcingSpecificCursor, true);
+    document.removeEventListener('visibilitychange', stopIfDocumentIsHidden);
+};
+const stopIfNoButtonsArePressed = (event) => {
+    if (event.buttons === 0) {
+        (0, exports.stopForcingSpecificCursor)();
+    }
+};
+const stopIfDocumentIsHidden = () => {
+    if (document.visibilityState === 'hidden') {
+        (0, exports.stopForcingSpecificCursor)();
+    }
 };
 const forceSpecificCursor = (cursor) => {
     if (!ref.current) {
@@ -53,7 +65,9 @@ const forceSpecificCursor = (cursor) => {
     // initiator so the cursor overlay can never remain stuck.
     window.addEventListener('pointerup', exports.stopForcingSpecificCursor, true);
     window.addEventListener('pointercancel', exports.stopForcingSpecificCursor, true);
+    window.addEventListener('pointermove', stopIfNoButtonsArePressed, true);
     window.addEventListener('blur', exports.stopForcingSpecificCursor, true);
+    document.addEventListener('visibilitychange', stopIfDocumentIsHidden);
 };
 exports.forceSpecificCursor = forceSpecificCursor;
 const stopForcingSpecificCursor = () => {

package/dist/components/FullscreenToggle.js

@@ -5,7 +5,6 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const remotion_1 = require("remotion");
 const no_react_1 = require("remotion/no-react");
-const colors_1 = require("../helpers/colors");
 const use_keybinding_1 = require("../helpers/use-keybinding");
 const fullscreen_1 = require("../icons/fullscreen");
 const canvas_ref_1 = require("../state/canvas-ref");
@@ -45,6 +44,6 @@ const FullScreenToggle = ({ hidden }) => {
             f.unregister();
         };
     }, [keybindings, onClick]);
-    return hidden ? (jsx_runtime_1.jsx("button", { id: "fullscreen-toggle", type: "button", style: { display: 'none' }, onClick: onClick })) : (jsx_runtime_1.jsx(ControlButton_1.ControlButton, { id: "fullscreen-toggle", title: accessibilityLabel, "aria-label": accessibilityLabel, onClick: onClick, children: jsx_runtime_1.jsx(fullscreen_1.FullscreenIcon, { color: colors_1.WHITE_HEX, style: { width: 18, height: 18 } }) }));
+    return hidden ? (jsx_runtime_1.jsx("button", { id: "fullscreen-toggle", type: "button", style: { display: 'none' }, onClick: onClick })) : (jsx_runtime_1.jsx(ControlButton_1.ControlButton, { id: "fullscreen-toggle", title: accessibilityLabel, "aria-label": accessibilityLabel, onClick: onClick, children: (color) => (jsx_runtime_1.jsx(fullscreen_1.FullscreenIcon, { color: color, style: { width: 18, height: 18 } })) }));
 };
 exports.FullScreenToggle = FullScreenToggle;

package/dist/components/InitialCompositionLoader.js

@@ -4,11 +4,9 @@ exports.InitialCompositionLoader = exports.useSelectComposition = void 0;
 const react_1 = require("react");
 const remotion_1 = require("remotion");
 const create_folder_tree_1 = require("../helpers/create-folder-tree");
-const mobile_layout_1 = require("../helpers/mobile-layout");
 const persist_open_folders_1 = require("../helpers/persist-open-folders");
 const url_state_1 = require("../helpers/url-state");
 const folders_1 = require("../state/folders");
-const sidebar_1 = require("../state/sidebar");
 const ExplorerPanelRef_1 = require("./ExplorerPanelRef");
 const load_canvas_content_from_url_1 = require("./load-canvas-content-from-url");
 const use_select_asset_1 = require("./use-select-asset");
@@ -17,8 +15,6 @@ const useSelectComposition = () => {
     const { setCompositionFoldersExpanded } = (0, react_1.useContext)(folders_1.FolderContext);
     const { setCanvasContent } = (0, react_1.useContext)(remotion_1.Internals.CompositionSetters);
     const setFrame = remotion_1.Internals.useTimelineSetFrame();
-    const isMobileLayout = (0, mobile_layout_1.useMobileLayout)();
-    const { setSidebarCollapsedState } = (0, react_1.useContext)(sidebar_1.SidebarContext);
     return (0, react_1.useCallback)((c, push, frame = null) => {
         var _a;
         if (push) {
@@ -42,17 +38,8 @@ const useSelectComposition = () => {
                 (0, persist_open_folders_1.persistExpandedFolders)('compositions', newState);
                 return newState;
             });
-            if (isMobileLayout) {
-                setSidebarCollapsedState({ left: 'collapsed', right: 'collapsed' });
-            }
         }
-    }, [
-        isMobileLayout,
-        setCanvasContent,
-        setCompositionFoldersExpanded,
-        setFrame,
-        setSidebarCollapsedState,
-    ]);
+    }, [setCanvasContent, setCompositionFoldersExpanded, setFrame]);
 };
 exports.useSelectComposition = useSelectComposition;
 const InitialCompositionLoader = () => {

package/dist/components/InlineAction.d.ts

@@ -1,10 +1,10 @@
 import React from 'react';
 export type RenderInlineAction = (color: string) => React.ReactNode;
-export type InlineActionProps = {
+export type InlineActionProps = Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'children' | 'onClick' | 'style'> & {
     readonly onClick: React.MouseEventHandler<HTMLButtonElement>;
-    readonly disabled?: boolean;
     readonly renderAction: RenderInlineAction;
-    readonly title?: string;
     readonly unhoveredColor?: string;
+    readonly variant: 'compact' | null;
+    readonly style?: React.CSSProperties;
 };
-export declare const InlineAction: ({ renderAction, onClick, disabled, title, unhoveredColor, }: InlineActionProps) => import("react/jsx-runtime").JSX.Element;
+export declare const InlineAction: ({ renderAction, onClick, disabled, title, unhoveredColor, variant, style: customStyle, ...buttonProps }: InlineActionProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/InlineAction.js

@@ -5,7 +5,8 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const colors_1 = require("../helpers/colors");
 const z_index_1 = require("../state/z-index");
-const InlineAction = ({ renderAction, onClick, disabled, title, unhoveredColor = colors_1.LIGHT_TEXT, }) => {
+const InlineAction = ({ renderAction, onClick, disabled, title, unhoveredColor = colors_1.LIGHT_TEXT, variant, style: customStyle, ...buttonProps }) => {
+    var _a;
     const { tabIndex } = (0, z_index_1.useZIndex)();
     const [hovered, setHovered] = (0, react_1.useState)(false);
     const onPointerEnter = (0, react_1.useCallback)(() => {
@@ -21,7 +22,7 @@ const InlineAction = ({ renderAction, onClick, disabled, title, unhoveredColor =
                 ? colors_1.TRANSPARENT
                 : (0, colors_1.getBackgroundFromHoverState)({ hovered, selected: false }),
             height: 24,
-            width: 24,
+            width: variant === 'compact' ? 14 : 24,
             padding: 0,
             display: 'inline-flex',
             justifyContent: 'center',
@@ -29,8 +30,9 @@ const InlineAction = ({ renderAction, onClick, disabled, title, unhoveredColor =
             borderRadius: 3,
             opacity: disabled ? 0.5 : 1,
             pointerEvents: disabled ? 'none' : 'auto',
+            ...customStyle,
         };
-    }, [disabled, hovered]);
-    return (jsx_runtime_1.jsx("button", { type: "button", disabled: disabled, onPointerEnter: onPointerEnter, onPointerLeave: onPointerLeave, onClick: onClick, style: style, tabIndex: tabIndex, title: title, "aria-label": title, children: renderAction(hovered ? colors_1.WHITE : unhoveredColor) }));
+    }, [customStyle, disabled, hovered, variant]);
+    return (jsx_runtime_1.jsx("button", { ...buttonProps, type: "button", disabled: disabled, onPointerEnter: onPointerEnter, onPointerLeave: onPointerLeave, onClick: onClick, style: style, tabIndex: tabIndex, title: title, "aria-label": (_a = buttonProps['aria-label']) !== null && _a !== void 0 ? _a : title, children: renderAction(hovered ? colors_1.WHITE : unhoveredColor) }));
 };
 exports.InlineAction = InlineAction;

package/dist/components/InspectorLocationCopy.d.ts

@@ -4,4 +4,5 @@ export declare const InspectorLocationCopy: React.FC<{
     readonly children: React.ReactNode;
     readonly location: OriginalPosition | null;
     readonly name: string | null;
+    readonly openInEditorLocation: OriginalPosition | null;
 }>;

package/dist/components/InspectorLocationCopy.js

@@ -6,6 +6,7 @@ const react_1 = require("react");
 const format_file_location_1 = require("../helpers/format-file-location");
 const clipboard_1 = require("../icons/clipboard");
 const InlineAction_1 = require("./InlineAction");
+const InspectorOpenInEditor_1 = require("./InspectorOpenInEditor");
 const NotificationCenter_1 = require("./Notifications/NotificationCenter");
 const row = {
     alignItems: 'center',
@@ -22,6 +23,8 @@ const content = {
     overflow: 'hidden',
 };
 const action = {
+    alignItems: 'center',
+    display: 'flex',
     flexShrink: 0,
     height: 24,
     marginLeft: 0,
@@ -32,7 +35,7 @@ const icon = {
     height: 12,
     width: 12,
 };
-const InspectorLocationCopy = ({ children, location, name }) => {
+const InspectorLocationCopy = ({ children, location, name, openInEditorLocation }) => {
     const [hovered, setHovered] = (0, react_1.useState)(false);
     const [focusedWithin, setFocusedWithin] = (0, react_1.useState)(false);
     const textToCopy = (0, react_1.useMemo)(() => {
@@ -56,10 +59,11 @@ const InspectorLocationCopy = ({ children, location, name }) => {
     }, [textToCopy]);
     const showAction = hovered || focusedWithin;
     return (jsx_runtime_1.jsxs("div", { style: row, onPointerEnter: () => setHovered(true), onPointerLeave: () => setHovered(false), onFocus: () => setFocusedWithin(true), onBlur: () => setFocusedWithin(false), children: [
-            jsx_runtime_1.jsx("div", { style: content, children: children }), textToCopy ? (jsx_runtime_1.jsx("div", { style: {
+            jsx_runtime_1.jsx("div", { style: content, children: children }), textToCopy || openInEditorLocation ? (jsx_runtime_1.jsxs("div", { style: {
                     ...action,
                     opacity: showAction ? 1 : 0,
                     pointerEvents: showAction ? 'auto' : 'none',
-                }, children: jsx_runtime_1.jsx(InlineAction_1.InlineAction, { onClick: onCopy, renderAction: renderCopyAction, title: "Copy location for agents" }) })) : null] }));
+                }, children: [
+                    jsx_runtime_1.jsx(InspectorOpenInEditor_1.InspectorOpenInEditor, { location: openInEditorLocation }), textToCopy ? (jsx_runtime_1.jsx(InlineAction_1.InlineAction, { variant: null, onClick: onCopy, renderAction: renderCopyAction, title: "Copy location for agents" })) : null] })) : null] }));
 };
 exports.InspectorLocationCopy = InspectorLocationCopy;

package/dist/components/InspectorOpenInEditor.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import type { OriginalPosition } from '../error-overlay/react-overlay/utils/get-source-map';
+export declare const InspectorOpenInEditor: React.FC<{
+    readonly location: OriginalPosition | null;
+}>;

package/dist/components/InspectorOpenInEditor.js

@@ -0,0 +1,135 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.InspectorOpenInEditor = 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 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 InlineDropdown_1 = require("./InlineDropdown");
+const NotificationCenter_1 = require("./Notifications/NotificationCenter");
+const use_default_editor_info_1 = require("./use-default-editor-info");
+const splitButton = {
+    alignItems: 'center',
+    display: 'inline-flex',
+    flexDirection: 'row',
+    flexShrink: 0,
+    height: 24,
+};
+const mainButtonBase = {
+    alignItems: 'center',
+    background: colors_1.TRANSPARENT,
+    border: 'none',
+    borderRadius: 3,
+    color: colors_1.LIGHT_TEXT,
+    display: 'inline-flex',
+    fontFamily: 'sans-serif',
+    fontSize: 11,
+    height: 24,
+    lineHeight: '14px',
+    padding: '0 6px',
+    whiteSpace: 'nowrap',
+};
+const menuLabel = {
+    color: 'inherit',
+    fontFamily: 'sans-serif',
+    fontSize: 13,
+    lineHeight: '16px',
+};
+const editorButtonIconSize = 18;
+const editorMenuIconSize = 18;
+const InspectorOpenInEditor = ({ location }) => {
+    var _a;
+    const { previewServerState } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
+    const { setSelectedModal } = (0, react_1.useContext)(modals_1.ModalsContext);
+    const { tabIndex } = (0, z_index_1.useZIndex)();
+    const [hovered, setHovered] = (0, react_1.useState)(false);
+    const editorPickerAvailable = (0, use_default_editor_info_1.canUseEditorPicker)(previewServerState.type === 'connected');
+    const editorInfo = (0, use_default_editor_info_1.useDefaultEditorInfo)(editorPickerAvailable);
+    const openWithEditor = (0, react_1.useCallback)(async (editorId) => {
+        if (!location) {
+            return;
+        }
+        try {
+            await (0, open_in_editor_1.openOriginalPositionInEditor)(location, editorId);
+        }
+        catch (err) {
+            (0, NotificationCenter_1.showNotification)(err.message, 2000);
+        }
+    }, [location]);
+    const preferredEditorId = (0, use_default_editor_info_1.getPreferredEditorId)(editorInfo);
+    const editorName = (_a = window.remotion_editorName) !== null && _a !== void 0 ? _a : 'default editor';
+    const canOpenDefault = location !== null && window.remotion_editorName !== null;
+    const onOpenDefault = (0, react_1.useCallback)((event) => {
+        event.stopPropagation();
+        openWithEditor(null).catch(() => undefined);
+    }, [openWithEditor]);
+    const mainButtonStyle = (0, react_1.useMemo)(() => {
+        return {
+            ...mainButtonBase,
+            background: (0, colors_1.getBackgroundFromHoverState)({
+                hovered,
+                selected: false,
+            }),
+            color: hovered ? colors_1.WHITE : colors_1.LIGHT_TEXT,
+            opacity: canOpenDefault ? 1 : 0.5,
+            pointerEvents: canOpenDefault ? 'auto' : 'none',
+        };
+    }, [canOpenDefault, 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)(() => {
+        var _a;
+        const alternateEditors = ((_a = editorInfo === null || editorInfo === void 0 ? void 0 : editorInfo.installedEditors) !== null && _a !== void 0 ? _a : [])
+            .filter((editor) => editor.id !== preferredEditorId)
+            .map((editor) => ({
+            id: `open-in-${editor.id}`,
+            keyHint: null,
+            label: jsx_runtime_1.jsx("span", { style: menuLabel, children: editor.name }),
+            leftItem: jsx_runtime_1.jsx(editor_1.EditorIcon, { editorId: editor.id, size: editorMenuIconSize }),
+            onClick: () => {
+                openWithEditor(editor.id).catch(() => undefined);
+            },
+            quickSwitcherLabel: null,
+            subMenu: null,
+            type: 'item',
+            value: editor.id,
+        }));
+        const settingsItems = [
+            ...(alternateEditors.length > 0
+                ? [{ type: 'divider', id: 'editor-settings-divider' }]
+                : []),
+            {
+                id: 'set-default-editor',
+                keyHint: null,
+                label: jsx_runtime_1.jsx("span", { style: menuLabel, children: "Set default editor..." }),
+                leftItem: null,
+                onClick: () => {
+                    setSelectedModal({ type: 'configure-default-editor' });
+                },
+                quickSwitcherLabel: null,
+                subMenu: null,
+                type: 'item',
+                value: 'set-default-editor',
+            },
+        ];
+        return [...alternateEditors, ...settingsItems];
+    }, [
+        editorInfo === null || editorInfo === void 0 ? void 0 : editorInfo.installedEditors,
+        openWithEditor,
+        preferredEditorId,
+        setSelectedModal,
+    ]);
+    if (!editorPickerAvailable) {
+        return null;
+    }
+    return (jsx_runtime_1.jsxs("div", { style: splitButton, children: [
+            jsx_runtime_1.jsx("button", { "aria-label": `Open in ${editorName}`, disabled: !canOpenDefault, onClick: onOpenDefault, onPointerEnter: () => setHovered(true), onPointerLeave: () => setHovered(false), style: mainButtonStyle, tabIndex: tabIndex, title: `Open in ${editorName}`, type: "button", children: jsx_runtime_1.jsx(editor_1.EditorIcon, { editorId: preferredEditorId, size: editorButtonIconSize }) }), jsx_runtime_1.jsx(InlineDropdown_1.InlineDropdown, { renderAction: renderDropdownAction, title: "Open in another editor", values: menuItems, variant: "compact" })
+        ] }));
+};
+exports.InspectorOpenInEditor = InspectorOpenInEditor;

package/dist/components/InspectorPanel/AlignmentControls.js

@@ -44,7 +44,7 @@ const verticalDivider = {
     margin: '0 8px',
 };
 const AlignmentButton = ({ onClick, title, Icon, disabled }) => {
-    return (jsx_runtime_1.jsx(InlineAction_1.InlineAction, { title: title, onClick: onClick, renderAction: (color) => jsx_runtime_1.jsx(Icon, { style: iconStyle, color: color }), disabled: disabled }));
+    return (jsx_runtime_1.jsx(InlineAction_1.InlineAction, { variant: null, title: title, onClick: onClick, renderAction: (color) => jsx_runtime_1.jsx(Icon, { style: iconStyle, color: color }), disabled: disabled }));
 };
 const AlignmentControls = ({ track }) => {
     var _a;

package/dist/components/InspectorPanel/CompositionInspectorHeader.js

@@ -72,7 +72,7 @@ const CompositionInspectorHeader = () => {
         if (!validatedLocation) {
             return;
         }
-        (0, open_in_editor_1.openOriginalPositionInEditor)(validatedLocation).catch((err) => {
+        (0, open_in_editor_1.openOriginalPositionInEditor)(validatedLocation, null).catch((err) => {
             (0, NotificationCenter_1.showNotification)(err.message, 2000);
         });
     }, [validatedLocation]);
@@ -80,7 +80,7 @@ const CompositionInspectorHeader = () => {
         if (!componentLocation) {
             return;
         }
-        (0, open_in_editor_1.openOriginalPositionInEditor)(componentLocation).catch((err) => {
+        (0, open_in_editor_1.openOriginalPositionInEditor)(componentLocation, null).catch((err) => {
             (0, NotificationCenter_1.showNotification)(err.message, 2000);
         });
     }, [componentLocation]);
@@ -90,7 +90,7 @@ 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, children: [
+    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, onOpen: openFileLocation, renderIcon: renderCompositionIcon, size: "inline-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, onOpen: openComponentLocation, renderIcon: renderReactIcon, size: "inline-action" }))] })) : null }));

package/dist/components/InspectorPanel/CompositionMetadata.js

@@ -37,16 +37,17 @@ const computedValueStyle = {
     fontFamily: 'sans-serif',
     fontSize: 12,
     fontStyle: 'italic',
-    lineHeight: 1.5,
+    lineHeight: '20px',
 };
 const dimensionsControls = {
     alignItems: 'center',
+    color: 'inherit',
     display: 'flex',
     fontFamily: 'sans-serif',
-    fontSize: 12,
+    fontSize: 13,
     gap: 4,
     justifyContent: 'flex-end',
-    lineHeight: '16px',
+    lineHeight: '20px',
     minWidth: 0,
 };
 const presetButtonIcon = {
@@ -69,14 +70,14 @@ const metadataLabelControls = {
     fontFamily: 'sans-serif',
     fontSize: 13,
     gap: 2,
-    lineHeight: '18px',
+    lineHeight: '20px',
     minWidth: 0,
 };
 const metadataLabelText = {
     color: 'inherit',
     fontFamily: 'sans-serif',
     fontSize: 13,
-    lineHeight: '18px',
+    lineHeight: '20px',
     minWidth: 0,
     overflow: 'hidden',
     textOverflow: 'ellipsis',
@@ -97,7 +98,7 @@ const PresetDropdown = ({ disabled, title, values, visible }) => {
     return (jsx_runtime_1.jsx("div", { style: {
             ...presetDropdownContainer,
             visibility: visible ? 'visible' : 'hidden',
-        }, children: jsx_runtime_1.jsx(InlineDropdown_1.InlineDropdown, { disabled: disabled, renderAction: renderAction, title: title, values: values }) }));
+        }, children: jsx_runtime_1.jsx(InlineDropdown_1.InlineDropdown, { disabled: disabled, renderAction: renderAction, title: title, values: values, variant: "compact" }) }));
 };
 const CompositionMetadataValue = ({ computed, disabled, field, onSave, pendingValue, value }) => {
     var _a;
@@ -287,7 +288,7 @@ const CompositionMetadata = ({ compositionId, disabled, stack }) => {
     return (jsx_runtime_1.jsxs("div", { style: compositionMetadataContainer, children: [jsx_runtime_1.jsx(common_1.InspectorDetailRow, { label: (hovered) => (jsx_runtime_1.jsxs("div", { style: metadataLabelControls, children: [
                         jsx_runtime_1.jsx("span", { style: metadataLabelText, children: "Dimensions" }), disabled || widthIsComputed || heightIsComputed ? null : (jsx_runtime_1.jsx(PresetDropdown, { disabled: pendingValues.width !== undefined ||
                                 pendingValues.height !== undefined, title: "Choose dimension preset", values: dimensionPresetValues, visible: hovered }))] })), children: jsx_runtime_1.jsxs("div", { style: dimensionsControls, children: [
-                        jsx_runtime_1.jsx(CompositionMetadataValue, { computed: widthIsComputed, disabled: disabled, field: "width", onSave: saveMetadata, pendingValue: (_a = pendingValues.width) !== null && _a !== void 0 ? _a : null, value: video.width }), jsx_runtime_1.jsx(CompositionMetadataValue, { computed: heightIsComputed, disabled: disabled, field: "height", onSave: saveMetadata, pendingValue: (_b = pendingValues.height) !== null && _b !== void 0 ? _b : null, value: video.height })
+                        jsx_runtime_1.jsx(CompositionMetadataValue, { computed: widthIsComputed, disabled: disabled, field: "width", onSave: saveMetadata, pendingValue: (_a = pendingValues.width) !== null && _a !== void 0 ? _a : null, value: video.width }), disabled ? '\u00A0' : null, jsx_runtime_1.jsx(CompositionMetadataValue, { computed: heightIsComputed, disabled: disabled, field: "height", onSave: saveMetadata, pendingValue: (_b = pendingValues.height) !== null && _b !== void 0 ? _b : null, value: video.height })
                     ] }) }), isStill ? null : (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [jsx_runtime_1.jsx(common_1.InspectorDetailRow, { label: (hovered) => (jsx_runtime_1.jsxs("div", { style: metadataLabelControls, children: [
                                 jsx_runtime_1.jsx("span", { style: metadataLabelText, children: "Frame rate" }), disabled || fpsIsComputed ? null : (jsx_runtime_1.jsx(PresetDropdown, { disabled: pendingValues.fps !== undefined, title: "Choose frame rate preset", values: frameRatePresetValues, visible: hovered }))] })), children: jsx_runtime_1.jsx("div", { style: dimensionsControls, children: jsx_runtime_1.jsx(CompositionMetadataValue, { computed: fpsIsComputed, disabled: disabled, field: "fps", onSave: saveMetadata, pendingValue: (_c = pendingValues.fps) !== null && _c !== void 0 ? _c : null, value: video.fps }) }) }), jsx_runtime_1.jsx(common_1.InspectorDetailRow, { label: "Duration", children: jsx_runtime_1.jsx(CompositionMetadataValue, { computed: durationIsComputed, disabled: disabled, field: "durationInFrames", onSave: saveMetadata, pendingValue: (_d = pendingValues.durationInFrames) !== null && _d !== void 0 ? _d : null, value: video.durationInFrames }) })
                 ] }))] }));

package/dist/components/InspectorPanel/KeyframeEasingNavigator.js

@@ -139,8 +139,8 @@ const KeyframeEasingNavigator = ({ currentSelection, includeEasings, keyframes,
     if (currentItem === null) {
         return null;
     }
-    return (jsx_runtime_1.jsxs("div", { style: navigatorContainer, children: [jsx_runtime_1.jsx(InlineAction_1.InlineAction, { disabled: previousItem === null, onClick: selectPrevious, title: "Previous animation item", renderAction: (color) => (jsx_runtime_1.jsx(NavigationChevron, { color: previousItem === null ? disabledChevronColor : color, direction: "left" })) }), jsx_runtime_1.jsxs("div", { style: itemStrip, children: [
+    return (jsx_runtime_1.jsxs("div", { style: navigatorContainer, children: [jsx_runtime_1.jsx(InlineAction_1.InlineAction, { variant: null, disabled: previousItem === null, onClick: selectPrevious, title: "Previous animation item", renderAction: (color) => (jsx_runtime_1.jsx(NavigationChevron, { color: previousItem === null ? disabledChevronColor : color, direction: "left" })) }), jsx_runtime_1.jsxs("div", { style: itemStrip, children: [
                     jsx_runtime_1.jsx(TimelineNavigatorItem, { extendLineLeft: false, extendLineRight: currentItem.type === 'keyframe', item: previousItem, onSelect: selectItem, selected: previousItem === null ? false : isSelected(previousItem.selection) }), jsx_runtime_1.jsx(TimelineNavigatorItem, { extendLineLeft: (previousItem === null || previousItem === void 0 ? void 0 : previousItem.type) === 'keyframe', extendLineRight: (nextItem === null || nextItem === void 0 ? void 0 : nextItem.type) === 'keyframe', item: currentItem, onSelect: selectItem, selected: isSelected(currentItem.selection) }), jsx_runtime_1.jsx(TimelineNavigatorItem, { extendLineLeft: currentItem.type === 'keyframe', extendLineRight: false, item: nextItem, onSelect: selectItem, selected: nextItem === null ? false : isSelected(nextItem.selection) })
-                ] }), jsx_runtime_1.jsx(InlineAction_1.InlineAction, { disabled: nextItem === null, onClick: selectNext, title: "Next animation item", renderAction: (color) => (jsx_runtime_1.jsx(NavigationChevron, { color: nextItem === null ? disabledChevronColor : color, direction: "right" })) })] }));
+                ] }), jsx_runtime_1.jsx(InlineAction_1.InlineAction, { variant: null, disabled: nextItem === null, onClick: selectNext, title: "Next animation item", renderAction: (color) => (jsx_runtime_1.jsx(NavigationChevron, { color: nextItem === null ? disabledChevronColor : color, direction: "right" })) })] }));
 };
 exports.KeyframeEasingNavigator = KeyframeEasingNavigator;