@remotion/studio 4.0.492 → 4.0.493

package/dist/ResolveCompositionConfigInStudio.js

@@ -47,7 +47,7 @@ const ResolveCompositionConfigInStudio = ({ children }) => {
             return controller;
         }
         const { signal } = controller;
-        const result = remotion_1.Internals.resolveVideoConfigOrCatch({
+        const result = remotion_1.Internals.resolveVideoConfigWithMetadataOrCatch({
             compositionId,
             calculateMetadata: calculateMetadata,
             inputProps: combinedProps,
@@ -79,6 +79,7 @@ const ResolveCompositionConfigInStudio = ({ children }) => {
                         [compositionId]: {
                             type: 'success-and-refreshing',
                             result: prev.result,
+                            metadataSource: prev.metadataSource,
                         },
                     };
                 }
@@ -98,7 +99,8 @@ const ResolveCompositionConfigInStudio = ({ children }) => {
                     ...r,
                     [compositionId]: {
                         type: 'success',
-                        result: c,
+                        result: c.videoConfig,
+                        metadataSource: c.metadataSource,
                     },
                 }));
             })
@@ -120,7 +122,8 @@ const ResolveCompositionConfigInStudio = ({ children }) => {
                 ...r,
                 [compositionId]: {
                     type: 'success',
-                    result: promOrNot,
+                    result: promOrNot.videoConfig,
+                    metadataSource: promOrNot.metadataSource,
                 },
             }));
         }
@@ -143,7 +146,7 @@ const ResolveCompositionConfigInStudio = ({ children }) => {
             ...(inputProps !== null && inputProps !== void 0 ? inputProps : {}),
         };
         const controller = new AbortController();
-        const result = remotion_1.Internals.resolveVideoConfigOrCatch({
+        const result = remotion_1.Internals.resolveVideoConfigWithMetadataOrCatch({
             compositionId: composition.id,
             calculateMetadata: composition.calculateMetadata,
             inputProps: combinedProps,
@@ -162,10 +165,11 @@ const ResolveCompositionConfigInStudio = ({ children }) => {
             ...configs,
             [composition.id]: {
                 type: 'success',
-                result: resolved,
+                result: resolved.videoConfig,
+                metadataSource: resolved.metadataSource,
             },
         }));
-        return resolved;
+        return resolved.videoConfig;
     }, [allEditorProps, compositions, inputProps]);
     (0, react_1.useImperativeHandle)(remotion_1.Internals.resolveCompositionsRef, () => {
         return {
@@ -305,6 +309,12 @@ const ResolveCompositionConfigInStudio = ({ children }) => {
                     [curr.id]: {
                         type: 'success',
                         result: { ...curr, defaultProps: (_a = curr.defaultProps) !== null && _a !== void 0 ? _a : {} },
+                        metadataSource: {
+                            durationInFrames: 'composition',
+                            fps: 'composition',
+                            height: 'composition',
+                            width: 'composition',
+                        },
                     },
                 };
             }, {}),

package/dist/components/CompositionSelector.js

@@ -250,7 +250,7 @@ const CompositionSelector = () => {
                 },
                 dryRun: false,
                 signal: controller.signal,
-                symbolicatedStack: null,
+                symbolicatedStack: (0, studio_shared_1.compositionDragDataToSymbolicatedStack)(parsed),
             });
             notification.replaceContent(result.success
                 ? `Moved ${parsed.compositionId} outside of folder`

package/dist/components/CompositionSelectorItem.js

@@ -238,7 +238,7 @@ const CompositionSelectorItem = ({ item, level, currentComposition, tabIndex, se
                 },
                 dryRun: false,
                 signal: controller.signal,
-                symbolicatedStack: null,
+                symbolicatedStack: (0, studio_shared_1.compositionDragDataToSymbolicatedStack)(parsed),
             });
             notification.replaceContent(result.success
                 ? `Moved ${parsed.compositionId} to ${folderId}`

package/dist/components/CurrentComposition.d.ts

@@ -1,2 +1,2 @@
-export declare const CURRENT_COMPOSITION_HEIGHT = 84;
+export declare const CURRENT_COMPOSITION_HEIGHT = 66;
 export declare const CurrentComposition: () => import("react/jsx-runtime").JSX.Element;

package/dist/components/CurrentComposition.js

@@ -9,14 +9,13 @@ const open_in_editor_1 = require("../helpers/open-in-editor");
 const react_2 = require("../icons/react");
 const still_1 = require("../icons/still");
 const video_1 = require("../icons/video");
-const render_frame_1 = require("../state/render-frame");
 const InlineCompositionName_1 = require("./InlineCompositionName");
 const InspectorInfoHeader_1 = require("./InspectorInfoHeader");
 const InspectorLocationCopy_1 = require("./InspectorLocationCopy");
 const InspectorSourceLocation_1 = require("./InspectorSourceLocation");
 const NotificationCenter_1 = require("./Notifications/NotificationCenter");
 const use_resolved_stack_1 = require("./Timeline/use-resolved-stack");
-exports.CURRENT_COMPOSITION_HEIGHT = InspectorInfoHeader_1.INSPECTOR_INFO_HEADER_MIN_HEIGHT;
+exports.CURRENT_COMPOSITION_HEIGHT = 66;
 const sourceLocationIconStyle = {
     flexShrink: 0,
     height: 13,
@@ -86,9 +85,9 @@ const CurrentComposition = () => {
         }
         return (0, is_composition_still_1.isCompositionStill)(video) ? (jsx_runtime_1.jsx(still_1.StillIcon, { color: color, style: sourceLocationIconStyle })) : (jsx_runtime_1.jsx(video_1.FilmIcon, { color: color, style: sourceLocationIconStyle }));
     }, [video]);
-    return (jsx_runtime_1.jsx(InspectorInfoHeader_1.InspectorInfoHeader, { children: video ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
+    return (jsx_runtime_1.jsx(InspectorInfoHeader_1.InspectorInfoHeader, { minHeight: exports.CURRENT_COMPOSITION_HEIGHT, children: video ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
                 jsx_runtime_1.jsxs(InspectorLocationCopy_1.InspectorLocationCopy, { location: validatedLocation, name: video.id, children: [
                         jsx_runtime_1.jsx(InlineCompositionName_1.InlineCompositionName, { compositionId: video.id, stack: (_e = currentComposition === null || currentComposition === void 0 ? void 0 : currentComposition.stack) !== null && _e !== void 0 ? _e : null, compositions: compositions }, video.id), jsx_runtime_1.jsx(InspectorSourceLocation_1.InspectorSourceLocation, { location: validatedLocation, canOpen: validatedLocation !== null, onOpen: openFileLocation, renderIcon: renderCompositionIcon }), jsx_runtime_1.jsx(InspectorSourceLocation_1.InspectorSourceLocation, { location: componentLocation, canOpen: componentLocation !== null, onOpen: openComponentLocation, renderIcon: renderReactIcon })
-                    ] }), jsx_runtime_1.jsxs(InspectorInfoHeader_1.InspectorInfoSubtitle, { children: [video.width, "x", video.height, (0, is_composition_still_1.isCompositionStill)(video) ? null : `, ${video.fps} FPS`] }), (0, is_composition_still_1.isCompositionStill)(video) ? (jsx_runtime_1.jsx(InspectorInfoHeader_1.InspectorInfoSubtitle, { children: "Still" })) : (jsx_runtime_1.jsxs(InspectorInfoHeader_1.InspectorInfoSubtitle, { children: ["Duration ", (0, render_frame_1.renderFrame)(video.durationInFrames, video.fps)] }))] })) : null }));
+                    ] }), (0, is_composition_still_1.isCompositionStill)(video) ? (jsx_runtime_1.jsx(InspectorInfoHeader_1.InspectorInfoSubtitle, { children: "Still" })) : null] })) : null }));
 };
 exports.CurrentComposition = CurrentComposition;

package/dist/components/InspectorInfoHeader.d.ts

@@ -3,6 +3,7 @@ export declare const INSPECTOR_INFO_HEADER_MIN_HEIGHT = 84;
 export declare const InspectorInfoHeader: React.FC<{
     readonly children?: React.ReactNode;
     readonly contentSized?: boolean;
+    readonly minHeight?: number;
 }>;
 export declare const InspectorInfoTitle: React.FC<{
     readonly children: React.ReactNode;

package/dist/components/InspectorInfoHeader.js

@@ -44,8 +44,13 @@ const subtitle = {
     textOverflow: 'ellipsis',
     whiteSpace: 'nowrap',
 };
-const InspectorInfoHeader = ({ children, contentSized = false }) => {
-    return (jsx_runtime_1.jsx("div", { style: contentSized ? containerBase : container, children: children === undefined || children === null ? null : (jsx_runtime_1.jsx("div", { style: row, children: jsx_runtime_1.jsx("div", { style: content, children: children }) })) }));
+const InspectorInfoHeader = ({ children, contentSized = false, minHeight }) => {
+    const style = contentSized
+        ? containerBase
+        : minHeight === undefined
+            ? container
+            : { ...containerBase, minHeight };
+    return (jsx_runtime_1.jsx("div", { style: style, children: children === undefined || children === null ? null : (jsx_runtime_1.jsx("div", { style: row, children: jsx_runtime_1.jsx("div", { style: content, children: children }) })) }));
 };
 exports.InspectorInfoHeader = InspectorInfoHeader;
 const InspectorInfoTitle = ({ children }) => {

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

@@ -0,0 +1,6 @@
+import React from 'react';
+export declare const CompositionDimensions: React.FC<{
+    readonly compositionId: string;
+    readonly disabled: boolean;
+    readonly stack: string | null;
+}>;

package/dist/components/InspectorPanel/CompositionDimensions.js

@@ -0,0 +1,173 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CompositionDimensions = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const remotion_1 = require("remotion");
+const colors_1 = require("../../helpers/colors");
+const is_composition_still_1 = require("../../helpers/is-composition-still");
+const resolved_stack_to_symbolicated_1 = require("../../helpers/resolved-stack-to-symbolicated");
+const InputDragger_1 = require("../NewComposition/InputDragger");
+const NotificationCenter_1 = require("../Notifications/NotificationCenter");
+const actions_1 = require("../RenderQueue/actions");
+const use_resolved_stack_1 = require("../Timeline/use-resolved-stack");
+const common_1 = require("./common");
+const optimistic_composition_metadata_1 = require("./optimistic-composition-metadata");
+const styles_1 = require("./styles");
+const fieldLabels = {
+    durationInFrames: 'Duration',
+    fps: 'Frame rate',
+    height: 'Height',
+    width: 'Width',
+};
+const computedStyle = {
+    color: colors_1.WHITE_ALPHA_40,
+    fontFamily: 'sans-serif',
+    fontSize: 12,
+    fontStyle: 'italic',
+    lineHeight: '16px',
+    userSelect: 'none',
+};
+const dimensionsControls = {
+    alignItems: 'center',
+    display: 'flex',
+    fontFamily: 'sans-serif',
+    fontSize: 12,
+    gap: 4,
+    justifyContent: 'flex-end',
+    lineHeight: '16px',
+    minWidth: 0,
+};
+const CompositionMetadataValue = ({ compositionId, computed, disabled, field, onPendingValue, onPendingValueAccepted, onPendingValueFailed, pendingValue, resolvedConfig, symbolicatedStack, value, }) => {
+    var _a;
+    const [dragValue, setDragValue] = (0, react_1.useState)(null);
+    const save = (0, react_1.useCallback)((newValue) => {
+        var _a;
+        if (newValue === ((_a = pendingValue === null || pendingValue === void 0 ? void 0 : pendingValue.value) !== null && _a !== void 0 ? _a : value)) {
+            setDragValue(null);
+            return;
+        }
+        if (symbolicatedStack === null) {
+            setDragValue(null);
+            (0, NotificationCenter_1.showNotification)('Could not determine where this composition is defined', 2000);
+            return;
+        }
+        const codemod = {
+            type: 'update-composition-metadata',
+            idToUpdate: compositionId,
+            newDurationInFrames: field === 'durationInFrames' ? newValue : null,
+            newFps: field === 'fps' ? newValue : null,
+            newHeight: field === 'height' ? newValue : null,
+            newWidth: field === 'width' ? newValue : null,
+        };
+        const optimisticValue = {
+            baseline: resolvedConfig,
+            status: 'saving',
+            value: newValue,
+        };
+        onPendingValue(field, optimisticValue);
+        setDragValue(null);
+        (0, actions_1.applyCodemod)({
+            codemod,
+            dryRun: false,
+            signal: new AbortController().signal,
+            symbolicatedStack,
+        })
+            .then((result) => {
+            if (!result.success) {
+                onPendingValueFailed(field, optimisticValue);
+                (0, NotificationCenter_1.showNotification)(`Could not update composition ${field}: ${result.reason}`, 2000);
+                return;
+            }
+            onPendingValueAccepted(field, optimisticValue);
+        })
+            .catch((error) => {
+            onPendingValueFailed(field, optimisticValue);
+            (0, NotificationCenter_1.showNotification)(`Could not update composition ${field}: ${error.message}`, 2000);
+        });
+    }, [
+        compositionId,
+        field,
+        onPendingValue,
+        onPendingValueAccepted,
+        onPendingValueFailed,
+        pendingValue === null || pendingValue === void 0 ? void 0 : pendingValue.value,
+        resolvedConfig,
+        symbolicatedStack,
+        value,
+    ]);
+    const isFps = field === 'fps';
+    const formatValue = (0, react_1.useCallback)((newValue) => {
+        const numberValue = Number(newValue);
+        if (field === 'fps') {
+            return `${numberValue}fps`;
+        }
+        const roundedValue = Math.round(numberValue);
+        if (field === 'durationInFrames') {
+            return `${roundedValue} ${roundedValue === 1 ? 'frame' : 'frames'}`;
+        }
+        return String(roundedValue);
+    }, [field]);
+    return computed ? (jsx_runtime_1.jsx("span", { style: computedStyle, children: formatValue(value) })) : disabled ? (formatValue(value)) : (jsx_runtime_1.jsx(InputDragger_1.InputDragger, { "aria-label": fieldLabels[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, small: true }));
+};
+const CompositionDimensions = ({ compositionId, disabled, stack }) => {
+    var _a, _b, _c, _d;
+    const video = remotion_1.Internals.useVideo();
+    const resolvedVideoConfig = remotion_1.Internals.useResolvedVideoConfig(compositionId);
+    const resolvedConfig = (resolvedVideoConfig === null || resolvedVideoConfig === void 0 ? void 0 : resolvedVideoConfig.type) === 'success' ||
+        (resolvedVideoConfig === null || resolvedVideoConfig === void 0 ? void 0 : resolvedVideoConfig.type) === 'success-and-refreshing'
+        ? resolvedVideoConfig.result
+        : null;
+    const resolvedConfigRef = (0, react_1.useRef)(resolvedConfig);
+    resolvedConfigRef.current = resolvedConfig;
+    const [pendingValues, setPendingValues] = (0, react_1.useState)({});
+    const resolvedLocation = (0, use_resolved_stack_1.useResolvedStack)(stack);
+    const symbolicatedStack = (0, react_1.useMemo)(() => (0, resolved_stack_to_symbolicated_1.resolvedStackToSymbolicated)(resolvedLocation), [resolvedLocation]);
+    (0, react_1.useEffect)(() => {
+        if (resolvedConfig === null) {
+            return;
+        }
+        setPendingValues((pending) => (0, optimistic_composition_metadata_1.reconcilePendingCompositionMetadata)({
+            currentConfig: resolvedConfig,
+            pending,
+        }));
+    }, [resolvedConfig]);
+    const onPendingValue = (0, react_1.useCallback)((field, value) => {
+        setPendingValues((pending) => ({ ...pending, [field]: value }));
+    }, []);
+    const onPendingValueAccepted = (0, react_1.useCallback)((field, value) => {
+        setPendingValues((pending) => {
+            if (resolvedConfigRef.current === null) {
+                return pending;
+            }
+            return (0, optimistic_composition_metadata_1.acceptPendingCompositionMetadataValue)({
+                currentConfig: resolvedConfigRef.current,
+                field,
+                pending,
+                value,
+            });
+        });
+    }, []);
+    const onPendingValueFailed = (0, react_1.useCallback)((field, value) => {
+        setPendingValues((pending) => (0, optimistic_composition_metadata_1.failPendingCompositionMetadataValue)({ field, pending, value }));
+    }, []);
+    if (video === null || resolvedConfig === null) {
+        return null;
+    }
+    const metadataSource = (resolvedVideoConfig === null || resolvedVideoConfig === void 0 ? void 0 : resolvedVideoConfig.type) === 'success' ||
+        (resolvedVideoConfig === null || resolvedVideoConfig === void 0 ? void 0 : resolvedVideoConfig.type) === 'success-and-refreshing'
+        ? resolvedVideoConfig.metadataSource
+        : undefined;
+    const widthIsComputed = (metadataSource === null || metadataSource === void 0 ? void 0 : metadataSource.width) === 'calculate-metadata';
+    const heightIsComputed = (metadataSource === null || metadataSource === void 0 ? void 0 : metadataSource.height) === 'calculate-metadata';
+    const fpsIsComputed = (metadataSource === null || metadataSource === void 0 ? void 0 : metadataSource.fps) === 'calculate-metadata';
+    const durationIsComputed = (metadataSource === null || metadataSource === void 0 ? void 0 : metadataSource.durationInFrames) === 'calculate-metadata';
+    const isStill = (0, is_composition_still_1.isCompositionStill)(video);
+    return (jsx_runtime_1.jsxs("div", { style: styles_1.detailsContainer, children: [
+            jsx_runtime_1.jsx(common_1.InspectorDetailRow, { label: "Dimensions", children: jsx_runtime_1.jsxs("div", { style: dimensionsControls, children: [
+                        jsx_runtime_1.jsx(CompositionMetadataValue, { compositionId: compositionId, computed: widthIsComputed, disabled: disabled, field: "width", onPendingValue: onPendingValue, onPendingValueAccepted: onPendingValueAccepted, onPendingValueFailed: onPendingValueFailed, pendingValue: (_a = pendingValues.width) !== null && _a !== void 0 ? _a : null, resolvedConfig: resolvedConfig, symbolicatedStack: symbolicatedStack, value: video.width }), jsx_runtime_1.jsx(CompositionMetadataValue, { compositionId: compositionId, computed: heightIsComputed, disabled: disabled, field: "height", onPendingValue: onPendingValue, onPendingValueAccepted: onPendingValueAccepted, onPendingValueFailed: onPendingValueFailed, pendingValue: (_b = pendingValues.height) !== null && _b !== void 0 ? _b : null, resolvedConfig: resolvedConfig, symbolicatedStack: symbolicatedStack, value: video.height })
+                    ] }) }), isStill ? null : (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
+                    jsx_runtime_1.jsx(common_1.InspectorDetailRow, { label: "Frame rate", children: jsx_runtime_1.jsx(CompositionMetadataValue, { compositionId: compositionId, computed: fpsIsComputed, disabled: disabled, field: "fps", onPendingValue: onPendingValue, onPendingValueAccepted: onPendingValueAccepted, onPendingValueFailed: onPendingValueFailed, pendingValue: (_c = pendingValues.fps) !== null && _c !== void 0 ? _c : null, resolvedConfig: resolvedConfig, symbolicatedStack: symbolicatedStack, value: video.fps }) }), jsx_runtime_1.jsx(common_1.InspectorDetailRow, { label: "Duration", children: jsx_runtime_1.jsx(CompositionMetadataValue, { compositionId: compositionId, computed: durationIsComputed, disabled: disabled, field: "durationInFrames", onPendingValue: onPendingValue, onPendingValueAccepted: onPendingValueAccepted, onPendingValueFailed: onPendingValueFailed, pendingValue: (_d = pendingValues.durationInFrames) !== null && _d !== void 0 ? _d : null, resolvedConfig: resolvedConfig, symbolicatedStack: symbolicatedStack, value: video.durationInFrames }) })
+                ] }))] }));
+};
+exports.CompositionDimensions = CompositionDimensions;

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

@@ -0,0 +1,9 @@
+import React from 'react';
+import type { _InternalTypes } from 'remotion';
+import type { TrackWithHash } from '../../helpers/get-timeline-sequence-sort-key';
+export declare const useConnectedCompositions: ({ track, }: {
+    readonly track: TrackWithHash;
+}) => import("remotion").AnyComposition[];
+export declare const ConnectedCompositionsSection: React.FC<{
+    readonly connectedCompositions: readonly _InternalTypes['AnyComposition'][];
+}>;

package/dist/components/InspectorPanel/ConnectedCompositionsSection.js

@@ -0,0 +1,32 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ConnectedCompositionsSection = exports.useConnectedCompositions = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const remotion_1 = require("remotion");
+const get_connected_compositions_1 = require("../../helpers/get-connected-compositions");
+const CompositionOrStillIcon_1 = require("../CompositionOrStillIcon");
+const InitialCompositionLoader_1 = require("../InitialCompositionLoader");
+const common_1 = require("./common");
+const compositionIconStyle = {
+    height: 13,
+    width: 13,
+};
+const compositionListStyle = {
+    display: 'flex',
+    flexDirection: 'column',
+    padding: '6px 0',
+};
+const useConnectedCompositions = ({ track, }) => {
+    const { compositions } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
+    return (0, react_1.useMemo)(() => (0, get_connected_compositions_1.getConnectedCompositions)({
+        compositions,
+        singleChildComponent: track.sequence.singleChildComponent,
+    }), [compositions, track.sequence.singleChildComponent]);
+};
+exports.useConnectedCompositions = useConnectedCompositions;
+const ConnectedCompositionsSection = ({ connectedCompositions }) => {
+    const selectComposition = (0, InitialCompositionLoader_1.useSelectComposition)();
+    return (jsx_runtime_1.jsx("div", { style: compositionListStyle, children: connectedCompositions.map((composition) => (jsx_runtime_1.jsx(common_1.InspectorInlineAction, { disabled: false, onClick: () => selectComposition(composition, true), renderIcon: (color) => (jsx_runtime_1.jsx(CompositionOrStillIcon_1.CompositionOrStillIcon, { color: color, composition: composition, style: compositionIconStyle })), children: composition.id }, composition.id))) }));
+};
+exports.ConnectedCompositionsSection = ConnectedCompositionsSection;

package/dist/components/InspectorPanel/DefaultInspector.js

@@ -18,6 +18,7 @@ const WarningIndicatorButton_1 = require("../RenderModal/WarningIndicatorButton"
 const SegmentedControl_1 = require("../SegmentedControl");
 const VisualControlsContent_1 = require("../VisualControls/VisualControlsContent");
 const common_1 = require("./common");
+const CompositionDimensions_1 = require("./CompositionDimensions");
 const styles_1 = require("./styles");
 const DefaultInspector = ({ composition, currentDefaultProps, readOnlyStudio, setDefaultProps }) => {
     var _a, _b;
@@ -77,8 +78,10 @@ const DefaultInspector = ({ composition, currentDefaultProps, readOnlyStudio, se
         return jsx_runtime_1.jsx("div", { style: styles_1.container });
     }
     return (jsx_runtime_1.jsxs("div", { style: styles_1.scrollableContainer, className: is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME, children: [
-            jsx_runtime_1.jsx("div", { style: styles_1.compositionSection, children: jsx_runtime_1.jsx(CurrentComposition_1.CurrentComposition, {}) }), canShowDefaultPropsSection ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
-                    jsx_runtime_1.jsx("div", { style: styles_1.inspectorSectionDivider }), jsx_runtime_1.jsxs("div", { style: styles_1.defaultPropsSection, children: [
+            jsx_runtime_1.jsxs("div", { style: styles_1.compositionSection, children: [
+                    jsx_runtime_1.jsx(CurrentComposition_1.CurrentComposition, {}), jsx_runtime_1.jsx(common_1.InspectorSectionDivider, {}), jsx_runtime_1.jsx(CompositionDimensions_1.CompositionDimensions, { compositionId: composition.id, disabled: readOnlyStudio, stack: composition.stack })
+                ] }), canShowDefaultPropsSection ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
+                    jsx_runtime_1.jsx(common_1.InspectorSectionDivider, {}), jsx_runtime_1.jsxs("div", { style: styles_1.defaultPropsSection, 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" })
@@ -86,7 +89,7 @@ const DefaultInspector = ({ composition, currentDefaultProps, readOnlyStudio, se
                                     ] }) }), 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)
                         ] })
                 ] })) : null, hasVisualControls ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
-                    jsx_runtime_1.jsx("div", { style: styles_1.inspectorSectionDivider }), jsx_runtime_1.jsxs("div", { style: styles_1.visualControlsSection, children: [
+                    jsx_runtime_1.jsx(common_1.InspectorSectionDivider, {}), jsx_runtime_1.jsxs("div", { style: styles_1.visualControlsSection, children: [
                             jsx_runtime_1.jsx(common_1.InspectorSectionHeader, { children: "Visual Controls" }), jsx_runtime_1.jsx(VisualControlsContent_1.VisualControlsContent, {})
                         ] })
                 ] })) : null] }));

package/dist/components/InspectorPanel/EasingInspector.js

@@ -195,7 +195,7 @@ const EasingInspector = ({ selection }) => {
         track,
     ]);
     const renderHeader = (0, react_1.useCallback)(() => (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
-            jsx_runtime_1.jsx(common_1.InspectorBackHeaderWithDivider, { disabled: parentSelection === null, onClick: onSelectParent, title: "Back to property", children: jsx_runtime_1.jsx("div", { style: styles_1.sectionHeaderTitle, 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) => ({
+            jsx_runtime_1.jsx(common_1.InspectorBackHeader, { disabled: parentSelection === null, onClick: onSelectParent, title: "Back to property", children: jsx_runtime_1.jsx("div", { style: styles_1.sectionHeaderTitle, 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) => ({
                     ...keyframe,
                     frame: keyframe.frame + track.keyframeDisplayOffset,
                 })), nodePathInfo: selection.nodePathInfo }))] })), [
@@ -214,8 +214,8 @@ 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.SequenceInspectorHeaderWithDivider, { 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.jsxs(jsx_runtime_1.Fragment, { children: [
-                    jsx_runtime_1.jsx("div", { style: styles_1.inspectorSectionDivider }), jsx_runtime_1.jsx("div", { style: styles_1.detailsContainer, children: jsx_runtime_1.jsx(common_1.InspectorInlineAction, { disabled: addKeyframeDisabled, onClick: onAddKeyframeAtPlayhead, renderIcon: (color) => (jsx_runtime_1.jsx(plus_1.Plus, { color: color, style: addKeyframeIcon })), children: `Add keyframe at ${addKeyframeTime}` }) })
+            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.jsxs(jsx_runtime_1.Fragment, { children: [
+                    jsx_runtime_1.jsx(common_1.InspectorSectionDivider, {}), jsx_runtime_1.jsx("div", { style: styles_1.detailsWithInlineAction, children: jsx_runtime_1.jsx(common_1.InspectorInlineAction, { 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/KeyframeInspector.js

@@ -321,12 +321,14 @@ 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.SequenceInspectorHeaderWithDivider, { track: track }), jsx_runtime_1.jsx(common_1.InspectorBackHeaderWithDivider, { disabled: parentSelection === null, onClick: onSelectParent, title: "Back to property", children: jsx_runtime_1.jsx("div", { style: styles_1.sectionHeaderTitle, 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) => ({
+            jsx_runtime_1.jsx(SequenceInspectorHeader_1.SequenceInspectorSections, { track: track }), jsx_runtime_1.jsx(common_1.InspectorSectionDivider, {}), jsx_runtime_1.jsx(common_1.InspectorBackHeader, { disabled: parentSelection === null, onClick: onSelectParent, title: "Back to property", children: jsx_runtime_1.jsx("div", { style: styles_1.sectionHeaderTitle, 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) => ({
                     ...keyframe,
                     frame: keyframe.frame + details.keyframeDisplayOffset,
-                })), nodePathInfo: selection.nodePathInfo }), jsx_runtime_1.jsxs("div", { style: styles_1.detailsContainer, children: [
-                    jsx_runtime_1.jsx(common_1.InspectorDetailRow, { label: "Frame", children: jsx_runtime_1.jsx(InputDragger_1.InputDragger, { type: "number", value: draftFrame, status: "ok", onValueChange: onFrameChange, onValueChangeEnd: onFrameChangeEnd, onTextChange: () => undefined, min: 0, max: Math.max(0, videoConfig.durationInFrames - 1), step: 1, formatter: (value) => String(Math.round(Number(value))), rightAlign: true, small: true }) }), jsx_runtime_1.jsxs("div", { style: styles_1.keyframeEditorRow, children: [
-                            jsx_runtime_1.jsx("div", { style: styles_1.keyframeEditorLabel, children: details.fieldLabel }), jsx_runtime_1.jsx("div", { style: styles_1.keyframeEditorValue, children: details.type === 'sequence' ? (jsx_runtime_1.jsx(TimelineSequencePropItem_1.TimelineSequenceKeyframedValue, { field: details.field, fileName: details.fileName, nodePath: details.nodePath, schema: details.schema, propStatus: details.propStatus, sourceFrame: details.sourceFrame })) : (jsx_runtime_1.jsx(TimelineEffectPropItem_1.TimelineEffectPropValue, { field: details.field, nodePath: details.nodePath, validatedLocation: details.validatedLocation, sourceFrame: details.sourceFrame })) })
+                })), nodePathInfo: selection.nodePathInfo }), jsx_runtime_1.jsxs("div", { style: styles_1.detailsWithInlineAction, children: [
+                    jsx_runtime_1.jsxs("div", { style: styles_1.detailsBeforeInlineAction, children: [
+                            jsx_runtime_1.jsx(common_1.InspectorDetailRow, { label: "Frame", children: jsx_runtime_1.jsx(InputDragger_1.InputDragger, { type: "number", value: draftFrame, status: "ok", onValueChange: onFrameChange, onValueChangeEnd: onFrameChangeEnd, onTextChange: () => undefined, min: 0, max: Math.max(0, videoConfig.durationInFrames - 1), step: 1, formatter: (value) => String(Math.round(Number(value))), rightAlign: true, small: true }) }), jsx_runtime_1.jsxs("div", { style: styles_1.keyframeEditorRow, children: [
+                                    jsx_runtime_1.jsx("div", { style: styles_1.keyframeEditorLabel, children: details.fieldLabel }), jsx_runtime_1.jsx("div", { style: styles_1.keyframeEditorValue, children: details.type === 'sequence' ? (jsx_runtime_1.jsx(TimelineSequencePropItem_1.TimelineSequenceKeyframedValue, { field: details.field, fileName: details.fileName, nodePath: details.nodePath, schema: details.schema, propStatus: details.propStatus, sourceFrame: details.sourceFrame })) : (jsx_runtime_1.jsx(TimelineEffectPropItem_1.TimelineEffectPropValue, { field: details.field, nodePath: details.nodePath, validatedLocation: details.validatedLocation, sourceFrame: details.sourceFrame })) })
+                                ] })
                         ] }), jsx_runtime_1.jsx(common_1.InspectorInlineAction, { disabled: removeDisabled, onClick: onRemoveKeyframe, renderIcon: (color) => jsx_runtime_1.jsx(TrashIcon, { color: color }), children: "Remove keyframe" })] })
         ] }));
 };

package/dist/components/InspectorPanel/KeyframeSettings.js

@@ -133,7 +133,7 @@ const KeyframeSettings = ({ update }) => {
         return String(Math.round(Number(value)));
     }, []);
     return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
-            jsx_runtime_1.jsx("div", { style: styles_1.inspectorSectionDivider }), jsx_runtime_1.jsx(common_1.InspectorSectionHeader, { children: "Keyframe settings" }), jsx_runtime_1.jsxs("div", { style: keyframeSettingsContainer, children: [canEditInterpolationSettings ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
+            jsx_runtime_1.jsx(common_1.InspectorSectionHeader, { children: "Keyframe settings" }), jsx_runtime_1.jsxs("div", { style: keyframeSettingsContainer, children: [canEditInterpolationSettings ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
                             jsx_runtime_1.jsx(common_1.InspectorDetailRow, { label: "Extrapolate left", children: jsx_runtime_1.jsx(ComboBox_1.Combobox, { values: leftValues, selectedId: propStatus.clamping.left, title: "Extrapolate left", style: comboStyle, small: true }) }), jsx_runtime_1.jsx(common_1.InspectorDetailRow, { label: "Extrapolate right", children: jsx_runtime_1.jsx(ComboBox_1.Combobox, { values: rightValues, selectedId: propStatus.clamping.right, title: "Extrapolate right", style: comboStyle, small: true }) }), jsx_runtime_1.jsx(common_1.InspectorDetailRow, { label: "Output", children: jsx_runtime_1.jsx(ComboBox_1.Combobox, { values: outputValues, selectedId: (_b = propStatus.output) !== null && _b !== void 0 ? _b : 'linear', title: "Output", style: comboStyle, small: true }) })
                         ] })) : null, jsx_runtime_1.jsx(common_1.InspectorDetailRow, { label: "Posterize", children: jsx_runtime_1.jsx(InputDragger_1.InputDragger, { type: "number", value: posterize, status: "ok", onValueChange: onPosterizeChange, onValueChangeEnd: onPosterizeChangeEnd, onTextChange: () => undefined, min: 0, step: 1, formatter: posterizeFormatter, rightAlign: true, small: true, disabled: disabled }) })
                 ] })

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

@@ -11,7 +11,7 @@ export declare const SequenceInspectorHeader: React.FC<{
     readonly sourceLocation: SequenceInspectorSourceLocation;
     readonly track: TrackWithHash;
 }>;
-export declare const SequenceInspectorHeaderWithDivider: React.FC<{
+export declare const SequenceInspectorSections: React.FC<{
     readonly track: TrackWithHash;
 }>;
 export {};

package/dist/components/InspectorPanel/SequenceInspectorHeader.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.SequenceInspectorHeaderWithDivider = exports.SequenceInspectorHeader = exports.useSequenceInspectorSourceLocation = void 0;
+exports.SequenceInspectorSections = exports.SequenceInspectorHeader = exports.useSequenceInspectorSourceLocation = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const client_id_1 = require("../../helpers/client-id");
@@ -9,7 +9,8 @@ const InspectorLocationCopy_1 = require("../InspectorLocationCopy");
 const InspectorSourceLocation_1 = require("../InspectorSourceLocation");
 const use_open_sequence_in_editor_1 = require("../Timeline/use-open-sequence-in-editor");
 const use_rename_sequence_1 = require("../Timeline/use-rename-sequence");
-const SequenceCompositionsSection_1 = require("./SequenceCompositionsSection");
+const common_1 = require("./common");
+const ConnectedCompositionsSection_1 = require("./ConnectedCompositionsSection");
 const styles_1 = require("./styles");
 const useSequenceInspectorSourceLocation = (sequence) => {
     const { canOpenInEditor, openInEditor, originalLocation } = (0, use_open_sequence_in_editor_1.useOpenSequenceInEditor)(sequence);
@@ -73,10 +74,12 @@ const SequenceInspectorHeader = ({ sourceLocation, track }) => {
             ] }) }));
 };
 exports.SequenceInspectorHeader = SequenceInspectorHeader;
-const SequenceInspectorHeaderWithDivider = ({ track }) => {
+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(SequenceCompositionsSection_1.SequenceCompositionsSection, { track: track }), jsx_runtime_1.jsx("div", { style: styles_1.sequenceHeaderDivider })
-        ] }));
+            jsx_runtime_1.jsx(exports.SequenceInspectorHeader, { sourceLocation: sourceLocation, 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] }));
 };
-exports.SequenceInspectorHeaderWithDivider = SequenceInspectorHeaderWithDivider;
+exports.SequenceInspectorSections = SequenceInspectorSections;

package/dist/components/InspectorPanel/SequenceSelectionInspector.js

@@ -9,7 +9,7 @@ const is_menu_item_1 = require("../Menu/is-menu-item");
 const TimelineSelection_1 = require("../Timeline/TimelineSelection");
 const AlignmentControls_1 = require("./AlignmentControls");
 const common_1 = require("./common");
-const SequenceCompositionsSection_1 = require("./SequenceCompositionsSection");
+const ConnectedCompositionsSection_1 = require("./ConnectedCompositionsSection");
 const SequenceInspectorHeader_1 = require("./SequenceInspectorHeader");
 const styles_1 = require("./styles");
 const use_track_for_selection_1 = require("./use-track-for-selection");
@@ -17,6 +17,7 @@ const SequenceExpandedInspector = ({ track }) => {
     const { previewServerState } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
     const { selectedItems, selectItems } = (0, TimelineSelection_1.useTimelineSelection)();
     const sourceLocation = (0, SequenceInspectorHeader_1.useSequenceInspectorSourceLocation)(track.sequence);
+    const connectedCompositions = (0, ConnectedCompositionsSection_1.useConnectedCompositions)({ track });
     const { validatedLocation } = sourceLocation;
     const sequenceSelection = (0, react_1.useMemo)(() => {
         if (!track.nodePathInfo) {
@@ -53,7 +54,9 @@ const SequenceExpandedInspector = ({ track }) => {
         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 }), jsx_runtime_1.jsx(SequenceCompositionsSection_1.SequenceCompositionsSection, { track: track }), jsx_runtime_1.jsx(InspectorSequenceSection_1.InspectorSequenceSection, { sequence: track.sequence, validatedLocation: validatedLocation, nodePathInfo: track.nodePathInfo, keyframeDisplayOffset: track.keyframeDisplayOffset, renderSectionHeader: (children) => (jsx_runtime_1.jsx(common_1.InspectorSectionHeader, { children: children })), renderTransformControls: () => jsx_runtime_1.jsx(AlignmentControls_1.AlignmentControls, { track: track }) })] }));
+            jsx_runtime_1.jsx(SequenceInspectorHeader_1.SequenceInspectorHeader, { sourceLocation: sourceLocation, 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(common_1.InspectorSectionDivider, {}), jsx_runtime_1.jsx(InspectorSequenceSection_1.InspectorSequenceSection, { sequence: track.sequence, validatedLocation: validatedLocation, nodePathInfo: track.nodePathInfo, keyframeDisplayOffset: track.keyframeDisplayOffset, renderSectionHeader: (children) => (jsx_runtime_1.jsx(common_1.InspectorSectionHeader, { children: children })), renderTransformControls: () => jsx_runtime_1.jsx(AlignmentControls_1.AlignmentControls, { track: track }) })] }));
 };
 const SequenceSelectionInspector = ({ selection }) => {
     const track = (0, use_track_for_selection_1.useTrackForSelection)(selection);

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

@@ -3,7 +3,8 @@ import type { RenderModalWarning } from '../RenderModal/DataEditor';
 export declare const InspectorSectionHeader: React.FC<{
     readonly children: React.ReactNode;
 }>;
-export declare const InspectorBackHeaderWithDivider: React.FC<{
+export declare const InspectorSectionDivider: React.FC;
+export declare const InspectorBackHeader: React.FC<{
     readonly children: React.ReactNode;
     readonly disabled: boolean;
     readonly onClick: React.MouseEventHandler<HTMLButtonElement>;