@remotion/studio 4.0.515 → 4.0.516

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;

package/dist/components/InspectorPanel/CompositionInspector.js

@@ -20,6 +20,7 @@ const is_menu_item_1 = require("../Menu/is-menu-item");
 const NotificationCenter_1 = require("../Notifications/NotificationCenter");
 const ObserveDefaultPropsContext_1 = require("../ObserveDefaultPropsContext");
 const DataEditor_1 = require("../RenderModal/DataEditor");
+const infer_zod_schema_from_value_1 = require("../RenderModal/SchemaEditor/infer-zod-schema-from-value");
 const zod_schema_type_1 = require("../RenderModal/SchemaEditor/zod-schema-type");
 const WarningIndicatorButton_1 = require("../RenderModal/WarningIndicatorButton");
 const SegmentedControl_1 = require("../SegmentedControl");
@@ -84,6 +85,7 @@ const CompositionActions = () => {
 const CompositionDefaultPropsSection = ({ composition, currentDefaultProps, readOnlyStudio, setDefaultProps }) => {
     var _a;
     const z = (0, get_zod_if_possible_1.useZodIfPossible)();
+    const zodTypes = (0, get_zod_if_possible_1.useZodTypesIfPossible)();
     const canSaveDefaultProps = (0, react_1.useContext)(ObserveDefaultPropsContext_1.ObserveDefaultPropsContext);
     const [defaultPropsMode, setDefaultPropsMode] = (0, react_1.useState)('schema');
     const compositionId = composition.id;
@@ -110,16 +112,21 @@ const CompositionDefaultPropsSection = ({ composition, currentDefaultProps, read
             },
         ];
     }, [defaultPropsMode]);
+    const schema = (0, react_1.useMemo)(() => {
+        var _a;
+        return (0, infer_zod_schema_from_value_1.resolveCompositionSchema)({
+            explicitSchema: composition.schema,
+            defaultProps: (_a = composition.defaultProps) !== null && _a !== void 0 ? _a : {},
+            z,
+            zodTypes,
+        });
+    }, [composition.defaultProps, composition.schema, z, zodTypes]);
     const canShowDefaultPropsSection = (0, react_1.useMemo)(() => {
-        if (!z || !composition.schema || !composition.defaultProps) {
+        if (schema === 'no-schema' || schema === 'no-zod') {
             return false;
         }
-        if (!(typeof composition.schema.safeParse ===
-            'function')) {
-            return false;
-        }
-        return (0, zod_schema_type_1.getZodSchemaType)(composition.schema) !== 'any';
-    }, [composition.defaultProps, composition.schema, z]);
+        return (0, zod_schema_type_1.getZodSchemaType)(schema) !== 'any';
+    }, [schema]);
     const { setShowWarning, showWarning } = (0, DataEditor_1.useDataEditorWarningVisibility)();
     const { warnings: defaultPropsWarnings } = (0, DataEditor_1.useDataEditorWarnings)({
         canSaveDefaultProps: (_a = canSaveDefaultProps === null || canSaveDefaultProps === void 0 ? void 0 : canSaveDefaultProps.canSaveDefaultProps) !== null && _a !== void 0 ? _a : null,

package/dist/components/InspectorPanel/KeyframeEasingNavigator.js

@@ -7,6 +7,7 @@ const remotion_1 = require("remotion");
 const colors_1 = require("../../helpers/colors");
 const InlineAction_1 = require("../InlineAction");
 const InspectorPanelLayout_1 = require("../InspectorPanelLayout");
+const timeline_scroll_logic_1 = require("../Timeline/timeline-scroll-logic");
 const TimelineKeyframeDiamondIcon_1 = require("../Timeline/TimelineKeyframeDiamondIcon");
 const TimelineKeyframeEasingLine_1 = require("../Timeline/TimelineKeyframeEasingLine");
 const TimelineSelection_1 = require("../Timeline/TimelineSelection");
@@ -114,26 +115,31 @@ const KeyframeEasingNavigator = ({ currentSelection, includeEasings, keyframes,
     const selectItem = (0, react_1.useCallback)((item) => {
         selectItems([item.selection], { reveal: true });
     }, [selectItems]);
-    const seekToItem = (0, react_1.useCallback)((item) => {
+    const seekToItem = (0, react_1.useCallback)((item, direction) => {
         const frame = (0, keyframe_easing_navigator_items_1.getNavigatorItemPlayheadFrame)(item);
         setFrame((current) => {
             const next = { ...current, [videoConfig.id]: frame };
             remotion_1.Internals.persistCurrentFrame(next);
             return next;
         });
-    }, [setFrame, videoConfig.id]);
+        (0, timeline_scroll_logic_1.ensureFrameIsInViewport)({
+            direction,
+            durationInFrames: videoConfig.durationInFrames,
+            frame,
+        });
+    }, [setFrame, videoConfig.durationInFrames, videoConfig.id]);
     const selectPrevious = (0, react_1.useCallback)(() => {
         if (previousItem === null) {
             return;
         }
-        seekToItem(previousItem);
+        seekToItem(previousItem, 'fit-left');
         selectItem(previousItem);
     }, [previousItem, seekToItem, selectItem]);
     const selectNext = (0, react_1.useCallback)(() => {
         if (nextItem === null) {
             return;
         }
-        seekToItem(nextItem);
+        seekToItem(nextItem, 'fit-right');
         selectItem(nextItem);
     }, [nextItem, seekToItem, selectItem]);
     if (currentItem === null) {

package/dist/components/InspectorPanel/SequenceInspectorHeader.js

@@ -8,6 +8,7 @@ const react_2 = require("../../icons/react");
 const InlineEditableTitle_1 = require("../InlineEditableTitle");
 const InspectorInfoHeader_1 = require("../InspectorInfoHeader");
 const InspectorLocationCopy_1 = require("../InspectorLocationCopy");
+const InspectorPanelLayout_1 = require("../InspectorPanelLayout");
 const InspectorSourceLocation_1 = require("../InspectorSourceLocation");
 const layout_1 = require("../layout");
 const use_open_sequence_in_apps_1 = require("../Timeline/use-open-sequence-in-apps");
@@ -31,7 +32,7 @@ const sequenceInspectorSubtitle = {
     height: layout_1.COMPACT_INLINE_ROW_HEIGHT,
     lineHeight: '18px',
     margin: '0 4px',
-    padding: '0 8px',
+    padding: `0 ${InspectorPanelLayout_1.INSPECTOR_PANEL_HORIZONTAL_PADDING - 4}px`,
     width: 'calc(100% - 8px)',
 };
 const defaultCursor = {

package/dist/components/InspectorPanel/SequenceSelectionInspector.js

@@ -115,10 +115,7 @@ const SequenceSourceQuickActions = ({ selection, track, validatedSource }) => {
             nodePath: nodePath.nodePath,
         })
             .then((result) => {
-            if (result.success) {
-                (0, NotificationCenter_1.showNotification)('Split video from audio', 2000);
-            }
-            else {
+            if (!result.success) {
                 (0, NotificationCenter_1.showNotification)(result.reason, 4000);
             }
         })

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

@@ -24,12 +24,6 @@ export declare const InspectorDetailRow: React.FC<{
     readonly label: React.ReactNode | ((hovered: boolean) => React.ReactNode);
     readonly children: React.ReactNode;
 }>;
-export type InspectorQuickActionSegment = {
-    readonly disabled: boolean;
-    readonly onClick: React.MouseEventHandler<HTMLButtonElement>;
-    readonly renderIcon: (color: string) => React.ReactNode;
-    readonly title?: string;
-};
 export type InspectorQuickActionProps = {
     readonly children: React.ReactNode;
     readonly disabled: boolean;
@@ -39,12 +33,6 @@ export type InspectorQuickActionProps = {
     readonly size?: 'default' | 'compact';
     readonly style?: React.CSSProperties;
     readonly title?: string;
-    readonly variant?: {
-        readonly type: 'single';
-    } | {
-        readonly type: 'segmented';
-        readonly trailing: InspectorQuickActionSegment;
-    };
 };
 export declare const InspectorQuickAction: React.FC<InspectorQuickActionProps>;
 export declare const InspectorDefaultPropsWarnings: React.FC<{

package/dist/components/InspectorPanel/common.js

@@ -90,37 +90,8 @@ const inlineLabelIcon = {
     justifyContent: 'center',
     width: 18,
 };
-const segmentedInlineAction = {
-    display: 'flex',
-    gap: 1,
-    margin: `0 ${INLINE_LABEL_BUTTON_MARGIN}px`,
-    width: `calc(100% - ${INLINE_LABEL_BUTTON_MARGIN * 2}px)`,
-};
-const segmentedMainAction = {
-    borderRadius: '4px 0 0 4px',
-    flex: 1,
-    margin: 0,
-    minWidth: 0,
-    width: 'auto',
-};
-const segmentedTrailingAction = {
-    alignItems: 'center',
-    appearance: 'none',
-    border: 'none',
-    borderRadius: '0 4px 4px 0',
-    display: 'flex',
-    flex: '0 0 28px',
-    justifyContent: 'center',
-    margin: 0,
-    padding: 0,
-    width: 28,
-};
-const InspectorQuickAction = ({ children, disabled, iconContainerStyle, onClick, renderIcon, size = 'default', style, title, variant = { type: 'single' }, }) => {
-    const isSegmented = variant.type === 'segmented';
-    // A non-clickable single action (onClick === null) never shows a hover
-    // effect. In the segmented variant, the main segment highlights whenever
-    // the group is hovered, even if it is not clickable itself.
-    const showsHover = !disabled && (onClick !== null || isSegmented);
+const InspectorQuickAction = ({ children, disabled, iconContainerStyle, onClick, renderIcon, size = 'default', style, title, }) => {
+    const showsHover = !disabled && onClick !== null;
     const buttonStyle = react_1.default.useMemo(() => ({
         ...(disabled ? inlineLabelButtonDisabled : inlineLabelButton),
         ...(0, hoverable_1.hoverableStyle)({
@@ -132,31 +103,11 @@ const InspectorQuickAction = ({ children, disabled, iconContainerStyle, onClick,
             hoverColor: showsHover ? colors_1.WHITE : colors_1.LIGHT_TEXT,
         }),
         ...(size === 'compact' ? compactInlineLabelButton : null),
-        ...(isSegmented ? segmentedMainAction : null),
         ...style,
-    }), [disabled, showsHover, isSegmented, size, style]);
+    }), [disabled, showsHover, size, style]);
     const mainContent = (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [renderIcon ? (jsx_runtime_1.jsx("span", { style: { ...inlineLabelIcon, ...iconContainerStyle }, children: renderIcon(colors_1.CURRENT_COLOR) })) : null, jsx_runtime_1.jsx("span", { style: inlineLabelText, children: children })
         ] }));
     const mainAction = onClick ? (jsx_runtime_1.jsx("button", { className: `__remotion-inspector-quick-action ${hoverable_1.HOVERABLE_CLASS_NAME}`, type: "button", disabled: disabled, style: buttonStyle, title: title, onClick: onClick, children: mainContent })) : (jsx_runtime_1.jsx("div", { className: hoverable_1.HOVERABLE_CLASS_NAME, style: buttonStyle, title: title, children: mainContent }));
-    if (variant.type === 'segmented') {
-        const trailingStyle = {
-            ...segmentedTrailingAction,
-            ...(0, hoverable_1.hoverableStyle)({
-                idleBackground: colors_1.TRANSPARENT,
-                hoverBackground: variant.trailing.disabled
-                    ? colors_1.TRANSPARENT
-                    : (0, colors_1.getBackgroundFromHoverState)({ hovered: true, selected: false }),
-                idleColor: colors_1.LIGHT_TEXT,
-                hoverColor: variant.trailing.disabled ? colors_1.LIGHT_TEXT : colors_1.WHITE,
-            }),
-            height: size === 'compact'
-                ? layout_1.COMPACT_INLINE_ROW_HEIGHT
-                : layout_1.COMPACT_CONTROL_ROW_HEIGHT,
-            opacity: variant.trailing.disabled ? 0.35 : 1,
-        };
-        return (jsx_runtime_1.jsxs("div", { className: hoverable_1.HOVER_GROUP_CLASS_NAME, style: segmentedInlineAction, children: [mainAction, jsx_runtime_1.jsx("button", { type: "button", className: hoverable_1.HOVERABLE_CLASS_NAME, disabled: variant.trailing.disabled, style: trailingStyle, title: variant.trailing.title, onClick: variant.trailing.onClick, children: jsx_runtime_1.jsx("span", { className: hoverable_1.HOVER_GROUP_REVEAL_CLASS_NAME, style: inlineLabelIcon, children: variant.trailing.renderIcon(colors_1.CURRENT_COLOR) }) })
-            ] }));
-    }
     return mainAction;
 };
 exports.InspectorQuickAction = InspectorQuickAction;

package/dist/components/InspectorPanel/use-composition-actions.js

@@ -82,7 +82,6 @@ const useCompositionActions = () => {
                 ? await browserStudioOperations.insertSolid(request)
                 : await (0, call_api_1.callApi)('/api/insert-jsx-element', request);
             if (result.success) {
-                (0, NotificationCenter_1.showNotification)('Added <Solid> to source file', 2000);
                 return;
             }
             (0, NotificationCenter_1.showNotification)(result.reason, 4000);

package/dist/components/InspectorPanelLayout.d.ts

@@ -1 +1 @@
-export declare const INSPECTOR_PANEL_HORIZONTAL_PADDING = 12;
+export declare const INSPECTOR_PANEL_HORIZONTAL_PADDING = 10;

package/dist/components/InspectorPanelLayout.js

@@ -1,4 +1,4 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.INSPECTOR_PANEL_HORIZONTAL_PADDING = void 0;
-exports.INSPECTOR_PANEL_HORIZONTAL_PADDING = 12;
+exports.INSPECTOR_PANEL_HORIZONTAL_PADDING = 10;