@remotion/studio 4.0.516 → 4.0.517

package/dist/components/EditorRuler/use-is-ruler-visible.d.ts

@@ -1 +1 @@
-export declare const useIsRulerVisible: () => boolean | null;
+export declare const useIsRulerVisible: () => boolean;

package/dist/components/EditorRuler/use-is-ruler-visible.js

@@ -3,10 +3,16 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.useIsRulerVisible = void 0;
 const react_1 = require("react");
 const remotion_1 = require("remotion");
+const get_preview_file_type_1 = require("../../helpers/get-preview-file-type");
 const editor_rulers_1 = require("../../state/editor-rulers");
 const useIsRulerVisible = () => {
-    const { canvasContent } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
+    const { canvasContent, currentAssetMetadata } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
     const { editorShowRulers } = (0, react_1.useContext)(editor_rulers_1.EditorShowRulersContext);
-    return (editorShowRulers && canvasContent && canvasContent.type === 'composition');
+    return (editorShowRulers &&
+        canvasContent !== null &&
+        (canvasContent.type === 'composition' ||
+            (canvasContent.type === 'asset' &&
+                (0, get_preview_file_type_1.getPreviewFileType)(canvasContent.asset) === 'video' &&
+                (currentAssetMetadata === null || currentAssetMetadata === void 0 ? void 0 : currentAssetMetadata.asset) === canvasContent.asset)));
 };
 exports.useIsRulerVisible = useIsRulerVisible;

package/dist/components/ElementLibraryModal.d.ts

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

package/dist/components/ElementLibraryModal.js

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

package/dist/components/FilePreview.js

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

package/dist/components/InlineEditableTitle.js

@@ -59,7 +59,7 @@ const inspectorTitleWrapper = {
     ...titleWrapper,
     fontFamily: 'sans-serif',
     fontSize: 13,
-    height: layout_1.COMPACT_INLINE_ROW_HEIGHT,
+    height: layout_1.COMPACT_CONTROL_ROW_HEIGHT,
     margin: '0 4px',
     width: 'calc(100% - 8px)',
 };
@@ -68,7 +68,7 @@ const inspectorTitleInner = {
     alignItems: 'center',
     fontFamily: 'sans-serif',
     fontSize: 13,
-    height: layout_1.COMPACT_INLINE_ROW_HEIGHT,
+    height: layout_1.COMPACT_CONTROL_ROW_HEIGHT,
     paddingBottom: 0,
     paddingLeft: InspectorPanelLayout_1.INSPECTOR_PANEL_HORIZONTAL_PADDING - 4,
     paddingRight: InspectorPanelLayout_1.INSPECTOR_PANEL_HORIZONTAL_PADDING - 4,

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");
@@ -28,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;
@@ -69,18 +51,13 @@ 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;
@@ -138,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 }) => {
@@ -156,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/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,6 +4,7 @@ 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");
@@ -29,7 +30,7 @@ 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 ${InspectorPanelLayout_1.INSPECTOR_PANEL_HORIZONTAL_PADDING - 4}px`,
@@ -38,6 +39,13 @@ const sequenceInspectorSubtitle = {
 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)(() => {
@@ -96,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;
@@ -122,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

@@ -168,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;
 }>;