@remotion/studio 4.0.515 → 4.0.517

package/dist/components/InspectorPanel/CompositionInspector.js

@@ -5,10 +5,8 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const browser_studio_operations_1 = require("../../helpers/browser-studio-operations");
 const client_id_1 = require("../../helpers/client-id");
-const colors_1 = require("../../helpers/colors");
 const download_blob_1 = require("../../helpers/download-blob");
 const interactivity_enabled_1 = require("../../helpers/interactivity-enabled");
-const browse_elements_1 = require("../../icons/browse-elements");
 const cloud_download_1 = require("../../icons/cloud-download");
 const frame_1 = require("../../icons/frame");
 const solid_1 = require("../../icons/solid");
@@ -20,6 +18,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");
@@ -27,29 +26,13 @@ const VisualControlsContent_1 = require("../VisualControls/VisualControlsContent
 const common_1 = require("./common");
 const CompositionInspectorHeader_1 = require("./CompositionInspectorHeader");
 const CompositionMetadata_1 = require("./CompositionMetadata");
+const ElementLibraryButton_1 = require("./ElementLibraryButton");
 const styles_1 = require("./styles");
 const use_composition_actions_1 = require("./use-composition-actions");
 const actionIconStyle = {
     height: 18,
     width: 18,
 };
-const browseElementsIconStyle = {
-    height: 22,
-    width: 22,
-};
-const browseElementsIconContainerStyle = {
-    height: 22,
-    marginLeft: -2,
-    marginRight: -2,
-    width: 22,
-};
-const browseElementsArrowStyle = {
-    display: 'inline-block',
-    height: 12,
-    marginLeft: 4,
-    verticalAlign: -2,
-    width: 12,
-};
 const CompositionActions = () => {
     var _a;
     var _b;
@@ -68,22 +51,18 @@ const CompositionActions = () => {
             (0, NotificationCenter_1.showNotification)(`Could not download project: ${error instanceof Error ? error.message : String(error)}`, 2000);
         }
     }, [downloadProject]);
-    const openElementsLibrary = (0, react_1.useCallback)(() => {
-        window.open('https://www.remotion.dev/elements', '_blank', 'noopener,noreferrer');
-    }, []);
     if (!canShowInsertAsset &&
         !canShowInsertComposition &&
         !canShowInsertSolid &&
         downloadProject === null) {
         return null;
     }
-    return (jsx_runtime_1.jsxs(common_1.InspectorQuickActionsSection, { children: [canShowInsertSolid ? (jsx_runtime_1.jsx(common_1.InspectorQuickAction, { disabled: !canInsertSolid, onClick: insertSolid, renderIcon: (color) => (jsx_runtime_1.jsx(solid_1.SolidIcon, { color: color, style: actionIconStyle })), children: "Add Solid" })) : null, canShowInsertAsset ? (jsx_runtime_1.jsx(common_1.InspectorQuickAction, { disabled: !canInsertAsset, onClick: insertAsset, renderIcon: (color) => (jsx_runtime_1.jsx(frame_1.PicIcon, { color: color, style: actionIconStyle })), children: "Add asset..." })) : null, canShowInsertComposition ? (jsx_runtime_1.jsx(common_1.InspectorQuickAction, { disabled: !canInsertComposition, onClick: insertComposition, renderIcon: (color) => (jsx_runtime_1.jsx(video_1.FilmIcon, { color: color, style: actionIconStyle })), children: "Add composition..." })) : null, canShowInsertAsset ? (jsx_runtime_1.jsxs(common_1.InspectorQuickAction, { disabled: false, iconContainerStyle: browseElementsIconContainerStyle, onClick: openElementsLibrary, renderIcon: (color) => (jsx_runtime_1.jsx(browse_elements_1.BrowseElementsIcon, { color: color, style: browseElementsIconStyle })), title: "Open the Remotion Elements library in a new tab. Install an Element there to send it to this composition.", children: ["Browse Elements",
-                    jsx_runtime_1.jsx("svg", { "aria-hidden": "true", viewBox: "0 0 16 16", style: browseElementsArrowStyle, children: jsx_runtime_1.jsx("path", { d: "M4 12 12 4M6 4h6v6", fill: "none", stroke: colors_1.CURRENT_COLOR, strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "1.5" }) })
-                ] })) : null, downloadProject ? (jsx_runtime_1.jsx(common_1.InspectorQuickAction, { disabled: false, onClick: onDownloadProject, renderIcon: (color) => (jsx_runtime_1.jsx(cloud_download_1.CloudDownloadIcon, { color: color, style: actionIconStyle })), children: "Download project" })) : null] }));
+    return (jsx_runtime_1.jsxs(common_1.InspectorQuickActionsSection, { children: [canShowInsertSolid ? (jsx_runtime_1.jsx(common_1.InspectorQuickAction, { disabled: !canInsertSolid, onClick: insertSolid, renderIcon: (color) => (jsx_runtime_1.jsx(solid_1.SolidIcon, { color: color, style: actionIconStyle })), children: "Add Solid" })) : null, canShowInsertAsset ? (jsx_runtime_1.jsx(common_1.InspectorQuickAction, { disabled: !canInsertAsset, onClick: insertAsset, renderIcon: (color) => (jsx_runtime_1.jsx(frame_1.PicIcon, { color: color, style: actionIconStyle })), children: "Add asset..." })) : null, canShowInsertComposition ? (jsx_runtime_1.jsx(common_1.InspectorQuickAction, { disabled: !canInsertComposition, onClick: insertComposition, renderIcon: (color) => (jsx_runtime_1.jsx(video_1.FilmIcon, { color: color, style: actionIconStyle })), children: "Add composition..." })) : null, canShowInsertAsset ? jsx_runtime_1.jsx(ElementLibraryButton_1.ElementLibraryButton, {}) : null, downloadProject ? (jsx_runtime_1.jsx(common_1.InspectorQuickAction, { disabled: false, onClick: onDownloadProject, renderIcon: (color) => (jsx_runtime_1.jsx(cloud_download_1.CloudDownloadIcon, { color: color, style: actionIconStyle })), children: "Download project" })) : null] }));
 };
 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 +89,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) {
-            return false;
-        }
-        if (!(typeof composition.schema.safeParse ===
-            'function')) {
+        if (schema === 'no-schema' || schema === 'no-zod') {
             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,
@@ -131,14 +115,12 @@ const CompositionDefaultPropsSection = ({ composition, currentDefaultProps, read
     if (readOnlyStudio || !canShowDefaultPropsSection) {
         return null;
     }
-    return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
-            jsx_runtime_1.jsx(common_1.InspectorSectionDivider, {}), jsx_runtime_1.jsxs("div", { style: styles_1.compositionDefaultPropsSection, children: [
-                    jsx_runtime_1.jsx(common_1.InspectorSectionHeader, { children: jsx_runtime_1.jsxs("div", { style: styles_1.sectionHeaderRow, children: [
-                                jsx_runtime_1.jsxs("div", { style: styles_1.sectionHeaderStart, children: [
-                                        jsx_runtime_1.jsx("span", { style: styles_1.sectionHeaderTitle, children: "Default Props" }), jsx_runtime_1.jsx(SegmentedControl_1.SegmentedControl, { items: defaultPropsModeItems, needsWrapping: false, size: "compact" })
-                                    ] }), jsx_runtime_1.jsx("div", { style: styles_1.sectionHeaderEnd, children: defaultPropsWarnings.length > 0 ? (jsx_runtime_1.jsx(WarningIndicatorButton_1.WarningIndicatorButton, { setShowWarning: setShowWarning, showWarning: showWarning, warningCount: defaultPropsWarnings.length, size: "compact" })) : null })
-                            ] }) }), defaultPropsWarnings.length > 0 && showWarning ? (jsx_runtime_1.jsx("div", { style: styles_1.defaultPropsWarningContainer, children: jsx_runtime_1.jsx(common_1.InspectorDefaultPropsWarnings, { warnings: defaultPropsWarnings }) })) : null, jsx_runtime_1.jsx(DefaultPropsEditor_1.DefaultPropsEditor, { unresolvedComposition: composition, defaultProps: currentDefaultProps, setDefaultProps: setDefaultProps, propsEditType: "default-props", schemaErrorMode: "compact", layout: "inspector", mode: defaultPropsMode, onModeChange: setDefaultPropsMode, hideModeControls: canShowDefaultPropsSection, warnings: defaultPropsWarnings, showWarning: false, setShowWarning: setShowWarning, hideWarningButton: true }, composition.id)
-                ] })
+    return (jsx_runtime_1.jsxs("div", { style: styles_1.compositionDefaultPropsSection, children: [
+            jsx_runtime_1.jsx(common_1.InspectorSectionHeader, { children: jsx_runtime_1.jsxs("div", { style: styles_1.sectionHeaderRow, children: [
+                        jsx_runtime_1.jsxs("div", { style: styles_1.sectionHeaderStart, children: [
+                                jsx_runtime_1.jsx("span", { style: styles_1.sectionHeaderTitle, children: "Default Props" }), jsx_runtime_1.jsx(SegmentedControl_1.SegmentedControl, { items: defaultPropsModeItems, needsWrapping: false, size: "compact" })
+                            ] }), jsx_runtime_1.jsx("div", { style: styles_1.sectionHeaderEnd, children: defaultPropsWarnings.length > 0 ? (jsx_runtime_1.jsx(WarningIndicatorButton_1.WarningIndicatorButton, { setShowWarning: setShowWarning, showWarning: showWarning, warningCount: defaultPropsWarnings.length, size: "compact" })) : null })
+                    ] }) }), defaultPropsWarnings.length > 0 && showWarning ? (jsx_runtime_1.jsx("div", { style: styles_1.defaultPropsWarningContainer, children: jsx_runtime_1.jsx(common_1.InspectorDefaultPropsWarnings, { warnings: defaultPropsWarnings }) })) : null, jsx_runtime_1.jsx(DefaultPropsEditor_1.DefaultPropsEditor, { unresolvedComposition: composition, defaultProps: currentDefaultProps, setDefaultProps: setDefaultProps, propsEditType: "default-props", schemaErrorMode: "compact", layout: "inspector", mode: defaultPropsMode, onModeChange: setDefaultPropsMode, hideModeControls: canShowDefaultPropsSection, warnings: defaultPropsWarnings, showWarning: false, setShowWarning: setShowWarning, hideWarningButton: true }, composition.id)
         ] }));
 };
 const CompositionVisualControlsSection = ({ readOnlyStudio }) => {
@@ -149,17 +131,15 @@ const CompositionVisualControlsSection = ({ readOnlyStudio }) => {
     if (!hasVisualControls) {
         return null;
     }
-    return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
-            jsx_runtime_1.jsx(common_1.InspectorSectionDivider, {}), jsx_runtime_1.jsxs("div", { style: styles_1.compositionVisualControlsSection, children: [
-                    jsx_runtime_1.jsx(common_1.InspectorSectionHeader, { children: "Visual Controls" }), jsx_runtime_1.jsx(VisualControlsContent_1.VisualControlsContent, {})
-                ] })
+    return (jsx_runtime_1.jsxs("div", { style: styles_1.compositionVisualControlsSection, children: [
+            jsx_runtime_1.jsx(common_1.InspectorSectionHeader, { children: "Visual Controls" }), jsx_runtime_1.jsx(VisualControlsContent_1.VisualControlsContent, {})
         ] }));
 };
 const CompositionInspector = ({ composition, currentDefaultProps, readOnlyStudio, setDefaultProps }) => {
     const { previewServerState } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
     return (jsx_runtime_1.jsxs("div", { style: styles_1.scrollableContainer, className: is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME, children: [
             jsx_runtime_1.jsxs("div", { style: styles_1.inspectorOverviewSection, children: [
-                    jsx_runtime_1.jsx(CompositionInspectorHeader_1.CompositionInspectorHeader, {}), jsx_runtime_1.jsx(common_1.InspectorSectionDivider, {}), jsx_runtime_1.jsx(CompositionMetadata_1.CompositionMetadata, { compositionId: composition.id, disabled: readOnlyStudio || previewServerState.type !== 'connected', stack: composition.stack })
+                    jsx_runtime_1.jsx(CompositionInspectorHeader_1.CompositionInspectorHeader, {}), jsx_runtime_1.jsx(CompositionMetadata_1.CompositionMetadata, { compositionId: composition.id, disabled: readOnlyStudio || previewServerState.type !== 'connected', stack: composition.stack })
                 ] }), jsx_runtime_1.jsx(CompositionDefaultPropsSection, { composition: composition, currentDefaultProps: currentDefaultProps, readOnlyStudio: readOnlyStudio, setDefaultProps: setDefaultProps }), jsx_runtime_1.jsx(CompositionVisualControlsSection, { readOnlyStudio: readOnlyStudio }), jsx_runtime_1.jsx(CompositionActions, {})
         ] }));
 };

package/dist/components/InspectorPanel/CompositionInspectorHeader.js

@@ -18,7 +18,7 @@ const layout_1 = require("../layout");
 const NotificationCenter_1 = require("../Notifications/NotificationCenter");
 const use_resolved_stack_1 = require("../Timeline/use-resolved-stack");
 const use_default_editor_info_1 = require("../use-default-editor-info");
-const COMPOSITION_INSPECTOR_HEADER_HEIGHT = 66;
+const COMPOSITION_INSPECTOR_HEADER_HEIGHT = layout_1.COMPACT_CONTROL_ROW_HEIGHT * 3;
 const sourceLocationIconStyle = {
     flexShrink: 0,
     height: 18,
@@ -26,7 +26,7 @@ const sourceLocationIconStyle = {
 };
 const componentLocationPlaceholder = {
     flexShrink: 0,
-    height: layout_1.COMPACT_INLINE_ROW_HEIGHT,
+    height: layout_1.COMPACT_CONTROL_ROW_HEIGHT,
 };
 const renderReactIcon = (color) => {
     return jsx_runtime_1.jsx(react_2.ReactIcon, { color: color, style: sourceLocationIconStyle });

package/dist/components/InspectorPanel/CompositionMetadata.js

@@ -39,23 +39,30 @@ const computedValueStyle = {
     fontStyle: 'italic',
     lineHeight: '20px',
 };
+const metadataFormatterStyle = {
+    fontSize: 13,
+};
 const metadataDraggerStyles = {
     durationInFrames: {
+        fontSize: 13,
         padding: '2px 0 2px 6px',
         textAlign: 'right',
-        width: 92,
+        width: 104,
     },
     fps: {
+        fontSize: 13,
         padding: '2px 0 2px 6px',
         textAlign: 'right',
         width: 72,
     },
     height: {
+        fontSize: 13,
         padding: '2px 0 2px 6px',
         textAlign: 'right',
         width: 52,
     },
     width: {
+        fontSize: 13,
         padding: '2px 0 2px 6px',
         textAlign: 'right',
         width: 52,
@@ -115,7 +122,7 @@ const dimensionPresets = [
 const frameRatePresets = [23.976, 24, 25, 29.97, 30, 50, 60];
 const PresetDropdown = ({ disabled, title, values, visible }) => {
     const renderAction = (0, react_1.useCallback)((color) => {
-        return (jsx_runtime_1.jsx("span", { style: presetButtonIcon, children: jsx_runtime_1.jsx(caret_1.CaretDown, { color: color, small: true }) }));
+        return (jsx_runtime_1.jsx("span", { style: presetButtonIcon, children: jsx_runtime_1.jsx(caret_1.CaretDown, { color: color }) }));
     }, []);
     return (jsx_runtime_1.jsx("div", { style: {
             ...presetDropdownContainer,
@@ -146,7 +153,7 @@ const CompositionMetadataValue = ({ computed, disabled, field, onSave, pendingVa
         }
         return String(roundedValue);
     }, [field]);
-    return computed ? (jsx_runtime_1.jsx("span", { style: computedContainerStyle, children: jsx_runtime_1.jsx("span", { style: computedValueStyle, children: formatValue(value) }) })) : disabled ? (formatValue(value)) : (jsx_runtime_1.jsx(InputDragger_1.InputDragger, { "aria-label": fieldLabels[field], buttonStyle: metadataDraggerStyles[field], type: "number", value: (_a = dragValue !== null && dragValue !== void 0 ? dragValue : pendingValue === null || pendingValue === void 0 ? void 0 : pendingValue.value) !== null && _a !== void 0 ? _a : value, disabled: pendingValue !== null, status: "ok", onValueChange: setDragValue, onValueChangeEnd: save, onTextChange: () => undefined, min: isFps ? 0.01 : 1, step: isFps ? 0.01 : 1, dragDecimalPlaces: isFps ? 2 : 0, formatter: formatValue, rightAlign: true, style: metadataDraggerStyles[field] }));
+    return computed || disabled ? (jsx_runtime_1.jsx("span", { style: computedContainerStyle, children: jsx_runtime_1.jsx("span", { style: computedValueStyle, children: formatValue(value) }) })) : (jsx_runtime_1.jsx(InputDragger_1.InputDragger, { "aria-label": fieldLabels[field], buttonStyle: metadataDraggerStyles[field], type: "number", value: (_a = dragValue !== null && dragValue !== void 0 ? dragValue : pendingValue === null || pendingValue === void 0 ? void 0 : pendingValue.value) !== null && _a !== void 0 ? _a : value, disabled: pendingValue !== null, status: "ok", onValueChange: setDragValue, onValueChangeEnd: save, onTextChange: () => undefined, min: isFps ? 0.01 : 1, step: isFps ? 0.01 : 1, dragDecimalPlaces: isFps ? 2 : 0, formatter: formatValue, formatterStyle: metadataFormatterStyle, rightAlign: true, style: metadataDraggerStyles[field] }));
 };
 const CompositionMetadata = ({ compositionId, disabled, stack }) => {
     var _a, _b, _c, _d;
@@ -310,7 +317,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 }), 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 })
+                        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 })
                     ] }) }), 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/EasingInspector.js

@@ -206,7 +206,7 @@ const EasingInspector = ({ selection }) => {
         easingKeyframeDisplayOffset,
     ]);
     const renderHeader = (0, react_1.useCallback)(() => (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
-            jsx_runtime_1.jsx(common_1.InspectorBackAction, { disabled: parentSelection === null, onClick: onSelectParent, title: "Back to property", children: fieldLabel }), jsx_runtime_1.jsx(common_1.InspectorSectionDivider, {}), easingUpdate === null || track === null ? null : (jsx_runtime_1.jsx(KeyframeEasingNavigator_1.KeyframeEasingNavigator, { currentSelection: currentEasingSelection !== null && currentEasingSelection !== void 0 ? currentEasingSelection : selection, includeEasings: true, keyframes: easingUpdate.propStatus.keyframes.map((keyframe) => ({
+            jsx_runtime_1.jsx(common_1.InspectorBackAction, { disabled: parentSelection === null, onClick: onSelectParent, title: "Back to property", children: fieldLabel }), easingUpdate === null || track === null ? null : (jsx_runtime_1.jsx(KeyframeEasingNavigator_1.KeyframeEasingNavigator, { currentSelection: currentEasingSelection !== null && currentEasingSelection !== void 0 ? currentEasingSelection : selection, includeEasings: true, keyframes: easingUpdate.propStatus.keyframes.map((keyframe) => ({
                     ...keyframe,
                     frame: keyframe.frame + easingKeyframeDisplayOffset,
                 })), nodePathInfo: selection.nodePathInfo }))] })), [
@@ -226,6 +226,6 @@ const EasingInspector = ({ selection }) => {
         return jsx_runtime_1.jsx(common_1.InspectorMessage, { children: "Easing unavailable" });
     }
     return (jsx_runtime_1.jsxs("div", { style: styles_1.selectedContainer, className: is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME, children: [
-            jsx_runtime_1.jsx(SequenceInspectorHeader_1.SequenceInspectorSections, { track: track }), jsx_runtime_1.jsx(common_1.InspectorSectionDivider, {}), jsx_runtime_1.jsx(EasingEditorModal_1.EasingEditor, { state: state, renderHeader: renderHeader }, (0, TimelineSelection_1.getTimelineSelectionKey)(currentEasingSelection)), jsx_runtime_1.jsx(common_1.InspectorSectionDivider, {}), jsx_runtime_1.jsx(KeyframeSettings_1.KeyframeSettings, { update: easingUpdate }), canAddKeyframeAtPlayhead ? (jsx_runtime_1.jsx(common_1.InspectorQuickActionsSection, { children: jsx_runtime_1.jsx(common_1.InspectorQuickAction, { disabled: addKeyframeDisabled, onClick: onAddKeyframeAtPlayhead, renderIcon: (color) => (jsx_runtime_1.jsx(plus_1.Plus, { color: color, style: addKeyframeIcon })), children: `Add keyframe at ${addKeyframeTime}` }) })) : null] }));
+            jsx_runtime_1.jsx(SequenceInspectorHeader_1.SequenceInspectorSections, { track: track }), jsx_runtime_1.jsx(EasingEditorModal_1.EasingEditor, { state: state, renderHeader: renderHeader }, (0, TimelineSelection_1.getTimelineSelectionKey)(currentEasingSelection)), jsx_runtime_1.jsx(KeyframeSettings_1.KeyframeSettings, { update: easingUpdate }), canAddKeyframeAtPlayhead ? (jsx_runtime_1.jsx(common_1.InspectorQuickActionsSection, { children: jsx_runtime_1.jsx(common_1.InspectorQuickAction, { disabled: addKeyframeDisabled, onClick: onAddKeyframeAtPlayhead, renderIcon: (color) => (jsx_runtime_1.jsx(plus_1.Plus, { color: color, style: addKeyframeIcon })), children: `Add keyframe at ${addKeyframeTime}` }) })) : null] }));
 };
 exports.EasingInspector = EasingInspector;

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

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const ElementLibraryButton: React.FC;

package/dist/components/InspectorPanel/ElementLibraryButton.js

@@ -0,0 +1,139 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ElementLibraryButton = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const browser_studio_operations_1 = require("../../helpers/browser-studio-operations");
+const colors_1 = require("../../helpers/colors");
+const browse_elements_1 = require("../../icons/browse-elements");
+const caret_1 = require("../../icons/caret");
+const modals_1 = require("../../state/modals");
+const InspectorPanelLayout_1 = require("../InspectorPanelLayout");
+const SegmentedButton_1 = require("../SegmentedButton");
+const SettingsContext_1 = require("../SettingsContext");
+const common_1 = require("./common");
+const noElementLibraries = [];
+const browseElementsIconStyle = {
+    height: 22,
+    width: 22,
+};
+const browseElementsIconContainerStyle = {
+    height: 22,
+    marginLeft: -2,
+    marginRight: -2,
+    width: 22,
+};
+const browseElementsArrowStyle = {
+    display: 'inline-block',
+    height: 12,
+    marginLeft: 4,
+    verticalAlign: -2,
+    width: 12,
+};
+const elementLibraryDropdownStyle = {
+    borderRadius: 4,
+    height: 28,
+    margin: '0 4px',
+    width: 'calc(100% - 8px)',
+};
+const elementLibraryDropdownSegmentStyle = {
+    fontSize: 13,
+    gap: 8,
+    justifyContent: 'flex-start',
+    padding: `0 ${InspectorPanelLayout_1.INSPECTOR_PANEL_HORIZONTAL_PADDING - 4}px`,
+    width: '100%',
+};
+const elementLibraryDropdownLabelStyle = {
+    flex: 1,
+    fontFamily: 'sans-serif',
+    fontSize: 13,
+    lineHeight: '18px',
+    minWidth: 0,
+    overflow: 'hidden',
+    textAlign: 'left',
+    textOverflow: 'ellipsis',
+    whiteSpace: 'nowrap',
+};
+const elementLibraryDropdownCaretStyle = {
+    display: 'flex',
+    height: 12,
+    width: 12,
+};
+const ElementLibraryButton = () => {
+    var _a;
+    const { setSelectedModal } = (0, react_1.useContext)(modals_1.SetSelectedModalContext);
+    const { studioRuntimeConfig } = (0, SettingsContext_1.useSettings)();
+    const isBrowserStudio = (0, browser_studio_operations_1.getBrowserStudioOperations)() !== null;
+    const elementLibraries = (_a = studioRuntimeConfig === null || studioRuntimeConfig === void 0 ? void 0 : studioRuntimeConfig.elementLibraries) !== null && _a !== void 0 ? _a : noElementLibraries;
+    const openElementLibrary = (0, react_1.useCallback)((name, url) => {
+        if (isBrowserStudio) {
+            window.open(url, '_blank', 'noopener,noreferrer');
+            return;
+        }
+        setSelectedModal({
+            type: 'element-library',
+            name,
+            url,
+        });
+    }, [isBrowserStudio, setSelectedModal]);
+    const openElementsLibrary = (0, react_1.useCallback)(() => {
+        openElementLibrary('Remotion Elements', 'https://www.remotion.dev/elements');
+    }, [openElementLibrary]);
+    const elementLibraryDropdownSegments = (0, react_1.useMemo)(() => [
+        {
+            ariaLabel: 'Browse Elements',
+            buttonId: null,
+            disabled: false,
+            idleColor: colors_1.LIGHT_TEXT,
+            leaveLeftSpace: false,
+            onOpenChange: null,
+            renderContent: (color) => (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
+                    jsx_runtime_1.jsx("span", { style: browseElementsIconContainerStyle, children: jsx_runtime_1.jsx(browse_elements_1.BrowseElementsIcon, { color: color, style: browseElementsIconStyle }) }), jsx_runtime_1.jsx("span", { style: elementLibraryDropdownLabelStyle, children: "Browse Elements" }), jsx_runtime_1.jsx("span", { style: elementLibraryDropdownCaretStyle, children: jsx_runtime_1.jsx(caret_1.CaretDown, { color: color }) })
+                ] })),
+            segmentId: 'element-library',
+            selectedId: null,
+            style: elementLibraryDropdownSegmentStyle,
+            title: 'Choose an Element library to browse inside Studio.',
+            type: 'menu',
+            values: [
+                {
+                    disabled: false,
+                    id: 'remotion-elements',
+                    keyHint: null,
+                    label: 'Remotion Elements',
+                    leftItem: null,
+                    onClick: openElementsLibrary,
+                    quickSwitcherLabel: null,
+                    subMenu: null,
+                    type: 'item',
+                    value: 'https://www.remotion.dev/elements',
+                },
+                ...elementLibraries.map((library, index) => {
+                    var _a;
+                    const parsedUrl = new URL(library.url);
+                    const pathname = parsedUrl.pathname.replace(/\/$/, '');
+                    const label = (_a = library.displayName) !== null && _a !== void 0 ? _a : `${parsedUrl.host}${pathname}`;
+                    return {
+                        disabled: false,
+                        id: `external-element-library-${index}`,
+                        keyHint: null,
+                        label,
+                        leftItem: null,
+                        onClick: () => openElementLibrary(label, library.url),
+                        quickSwitcherLabel: null,
+                        subMenu: null,
+                        type: 'item',
+                        value: library.url,
+                    };
+                }),
+            ],
+        },
+    ], [elementLibraries, openElementLibrary, openElementsLibrary]);
+    if (elementLibraries.length > 0 && !isBrowserStudio) {
+        return (jsx_runtime_1.jsx(SegmentedButton_1.SegmentedButton, { segments: elementLibraryDropdownSegments, style: elementLibraryDropdownStyle, title: null }));
+    }
+    return (jsx_runtime_1.jsxs(common_1.InspectorQuickAction, { disabled: false, iconContainerStyle: browseElementsIconContainerStyle, onClick: openElementsLibrary, renderIcon: (color) => (jsx_runtime_1.jsx(browse_elements_1.BrowseElementsIcon, { color: color, style: browseElementsIconStyle })), title: isBrowserStudio
+            ? 'Open the Remotion Elements library in a new tab. Install an Element there to send it to this composition.'
+            : 'Browse the Remotion Elements library inside Studio.', children: ["Browse Elements", isBrowserStudio ? (jsx_runtime_1.jsx("svg", { "aria-hidden": "true", viewBox: "0 0 16 16", style: browseElementsArrowStyle, children: jsx_runtime_1.jsx("path", { d: "M4 12 12 4M6 4h6v6", fill: "none", stroke: colors_1.CURRENT_COLOR, strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "1.5" }) })) : null] }));
+};
+exports.ElementLibraryButton = ElementLibraryButton;

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/KeyframeInspector.js

@@ -338,7 +338,7 @@ const KeyframeInspector = ({ selection }) => {
         return jsx_runtime_1.jsx(common_1.InspectorMessage, { children: "Keyframe unavailable" });
     }
     return (jsx_runtime_1.jsxs("div", { style: styles_1.selectedContainer, className: is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME, children: [
-            jsx_runtime_1.jsx(SequenceInspectorHeader_1.SequenceInspectorSections, { track: track }), jsx_runtime_1.jsx(common_1.InspectorSectionDivider, {}), jsx_runtime_1.jsx(common_1.InspectorBackAction, { disabled: parentSelection === null, onClick: onSelectParent, title: "Back to property", children: details.fieldLabel }), jsx_runtime_1.jsx(common_1.InspectorSectionDivider, {}), jsx_runtime_1.jsx(KeyframeEasingNavigator_1.KeyframeEasingNavigator, { currentSelection: selection, includeEasings: (0, update_selected_easing_1.canEditEasingForInterpolationFunction)(details.propStatus.interpolationFunction), keyframes: details.propStatus.keyframes.map((keyframe) => ({
+            jsx_runtime_1.jsx(SequenceInspectorHeader_1.SequenceInspectorSections, { track: track }), jsx_runtime_1.jsx(common_1.InspectorBackAction, { disabled: parentSelection === null, onClick: onSelectParent, title: "Back to property", children: details.fieldLabel }), jsx_runtime_1.jsx(KeyframeEasingNavigator_1.KeyframeEasingNavigator, { currentSelection: selection, includeEasings: (0, update_selected_easing_1.canEditEasingForInterpolationFunction)(details.propStatus.interpolationFunction), keyframes: details.propStatus.keyframes.map((keyframe) => ({
                     ...keyframe,
                     frame: keyframe.frame + details.keyframeDisplayOffset,
                 })), nodePathInfo: selection.nodePathInfo }), jsx_runtime_1.jsxs("div", { style: styles_1.detailsWithInlineAction, children: [

package/dist/components/InspectorPanel/SequenceInspectorHeader.js

@@ -4,10 +4,12 @@ exports.SequenceInspectorSections = exports.SequenceInspectorDuplicationSection
 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 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");
@@ -28,15 +30,22 @@ const sequenceInspectorSubtitle = {
     alignItems: 'center',
     boxSizing: 'border-box',
     fontSize: 13,
-    height: layout_1.COMPACT_INLINE_ROW_HEIGHT,
+    height: layout_1.COMPACT_CONTROL_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 = {
     cursor: 'default',
 };
+const externalTabIndicatorStyle = {
+    display: 'inline-block',
+    height: 12,
+    marginLeft: 4,
+    verticalAlign: -2,
+    width: 12,
+};
 const useSequenceInspectorSourceLocation = (sequence) => {
     const { canOpenInEditor, openInEditor, originalLocation } = (0, use_open_sequence_in_apps_1.useOpenSequenceInApps)(sequence);
     const validatedLocation = (0, react_1.useMemo)(() => {
@@ -95,7 +104,8 @@ const SequenceInspectorHeader = ({ sourceLocation, track }) => {
         saveName(newName).catch(() => undefined);
     }, [saveName]);
     return (jsx_runtime_1.jsx(InspectorInfoHeader_1.InspectorInfoHeader, { contentSized: true, padding: "4px 0", children: jsx_runtime_1.jsxs(InspectorLocationCopy_1.InspectorLocationCopy, { location: sourceLocation.validatedLocation, name: componentName !== null && componentName !== void 0 ? componentName : null, openInEditorLocation: sourceLocation.validatedLocation, children: [
-                jsx_runtime_1.jsx(InlineEditableTitle_1.InlineEditableTitle, { value: sequenceDisplayName, canRename: canRename, onCommit: onRename, size: "inspector" }), documentationLink ? (jsx_runtime_1.jsx(common_1.InspectorQuickAction, { disabled: false, style: defaultCursor, size: "compact", title: "Open component docs", onClick: openDocumentationLink, children: componentName })) : (jsx_runtime_1.jsx("div", { style: subtitleStyle, children: componentName })), jsx_runtime_1.jsx(InspectorSourceLocation_1.InspectorSourceLocation, { location: sourceLocation.validatedLocation, canOpen: sourceLocation.canOpenInEditor, onOpen: sourceLocation.openFileLocation, renderIcon: renderReactIcon, size: "quick-action" })
+                jsx_runtime_1.jsx(InlineEditableTitle_1.InlineEditableTitle, { value: sequenceDisplayName, canRename: canRename, onCommit: onRename, size: "inspector" }), documentationLink ? (jsx_runtime_1.jsxs(common_1.InspectorQuickAction, { disabled: false, style: defaultCursor, title: "Open component docs", onClick: openDocumentationLink, children: [componentName, jsx_runtime_1.jsx("svg", { "aria-hidden": "true", viewBox: "0 0 16 16", style: externalTabIndicatorStyle, children: jsx_runtime_1.jsx("path", { d: "M4 12 12 4M6 4h6v6", fill: "none", stroke: colors_1.CURRENT_COLOR, strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "1.5" }) })
+                    ] })) : (jsx_runtime_1.jsx("div", { style: subtitleStyle, children: componentName })), jsx_runtime_1.jsx(InspectorSourceLocation_1.InspectorSourceLocation, { location: sourceLocation.validatedLocation, canOpen: sourceLocation.canOpenInEditor, onOpen: sourceLocation.openFileLocation, renderIcon: renderReactIcon, size: "quick-action" })
             ] }) }));
 };
 exports.SequenceInspectorHeader = SequenceInspectorHeader;
@@ -121,8 +131,6 @@ const SequenceInspectorSections = ({ track }) => {
     const sourceLocation = (0, exports.useSequenceInspectorSourceLocation)(track.sequence);
     const connectedCompositions = (0, ConnectedCompositionsSection_1.useConnectedCompositions)({ track });
     return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
-            jsx_runtime_1.jsx(exports.SequenceInspectorHeader, { sourceLocation: sourceLocation, track: track }), jsx_runtime_1.jsx(exports.SequenceInspectorDuplicationSection, { track: track }), connectedCompositions.length > 0 ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
-                    jsx_runtime_1.jsx(common_1.InspectorSectionDivider, {}), jsx_runtime_1.jsx(ConnectedCompositionsSection_1.ConnectedCompositionsSection, { connectedCompositions: connectedCompositions })
-                ] })) : null] }));
+            jsx_runtime_1.jsx(exports.SequenceInspectorHeader, { sourceLocation: sourceLocation, track: track }), jsx_runtime_1.jsx(exports.SequenceInspectorDuplicationSection, { track: track }), connectedCompositions.length > 0 ? (jsx_runtime_1.jsx(ConnectedCompositionsSection_1.ConnectedCompositionsSection, { connectedCompositions: connectedCompositions })) : null] }));
 };
 exports.SequenceInspectorSections = SequenceInspectorSections;

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);
             }
         })
@@ -171,9 +168,7 @@ const SequenceExpandedInspector = ({ track, readOnlyStudio }) => {
         return jsx_runtime_1.jsx(common_1.InspectorMessage, { children: "Sequence inspector unavailable" });
     }
     return (jsx_runtime_1.jsxs("div", { style: styles_1.selectedContainer, className: is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME, onPointerDown: selectSequenceOnInspectorPointerDown, children: [
-            jsx_runtime_1.jsx(SequenceInspectorHeader_1.SequenceInspectorHeader, { sourceLocation: sourceLocation, track: track }, stackKey !== null && stackKey !== void 0 ? stackKey : track.sequence.id), jsx_runtime_1.jsx(SequenceInspectorHeader_1.SequenceInspectorDuplicationSection, { track: track }), connectedCompositions.length > 0 ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
-                    jsx_runtime_1.jsx(common_1.InspectorSectionDivider, {}), jsx_runtime_1.jsx(ConnectedCompositionsSection_1.ConnectedCompositionsSection, { connectedCompositions: connectedCompositions })
-                ] })) : null, validatedLocation ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [jsx_runtime_1.jsx(InspectorSequenceSection_1.InspectorSequenceSection, { sequence: track.sequence, readOnlyStudio: readOnlyStudio, validatedLocation: validatedLocation, nodePathInfo: track.nodePathInfo, keyframeDisplayOffset: track.keyframeDisplayOffset, renderTransformControls: () => jsx_runtime_1.jsx(AlignmentControls_1.AlignmentControls, { track: track }) }), jsx_runtime_1.jsxs(common_1.InspectorQuickActionsSection, { children: [
+            jsx_runtime_1.jsx(SequenceInspectorHeader_1.SequenceInspectorHeader, { sourceLocation: sourceLocation, track: track }, stackKey !== null && stackKey !== void 0 ? stackKey : track.sequence.id), jsx_runtime_1.jsx(SequenceInspectorHeader_1.SequenceInspectorDuplicationSection, { track: track }), connectedCompositions.length > 0 ? (jsx_runtime_1.jsx(ConnectedCompositionsSection_1.ConnectedCompositionsSection, { connectedCompositions: connectedCompositions })) : null, validatedLocation ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [jsx_runtime_1.jsx(InspectorSequenceSection_1.InspectorSequenceSection, { sequence: track.sequence, readOnlyStudio: readOnlyStudio, validatedLocation: validatedLocation, nodePathInfo: track.nodePathInfo, keyframeDisplayOffset: track.keyframeDisplayOffset, renderTransformControls: () => jsx_runtime_1.jsx(AlignmentControls_1.AlignmentControls, { track: track }) }), jsx_runtime_1.jsxs(common_1.InspectorQuickActionsSection, { children: [
                             jsx_runtime_1.jsx(SplitSequenceQuickAction, { selection: sequenceSelection, track: track }), jsx_runtime_1.jsx(SequenceSourceQuickActions, { selection: sequenceSelection, track: track, validatedSource: validatedLocation.source })
                         ] })
                 ] })) : (jsx_runtime_1.jsx(common_1.InspectorMessage, { children: "Source controls unavailable" }))] }));

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

@@ -3,7 +3,6 @@ import type { RenderModalWarning } from '../RenderModal/DataEditor';
 export declare const InspectorSectionHeader: React.FC<{
     readonly children: React.ReactNode;
 }>;
-export declare const InspectorSectionDivider: React.FC;
 export declare const InspectorQuickActionsSection: React.FC<{
     readonly children: React.ReactNode;
 }>;
@@ -24,12 +23,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 +32,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<{