@remotion/studio 4.0.491 → 4.0.493

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,6 +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 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);
@@ -72,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("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,6 +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 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");
@@ -16,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) {
@@ -52,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(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>;

package/dist/components/InspectorPanel/common.js

@@ -3,15 +3,18 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.InspectorDefaultPropsWarnings = exports.InspectorInlineAction = exports.InspectorDetailRow = exports.InspectorMessage = exports.InspectorBackHeaderWithDivider = exports.InspectorSectionHeader = void 0;
+exports.InspectorDefaultPropsWarnings = exports.InspectorInlineAction = exports.InspectorDetailRow = exports.InspectorMessage = exports.InspectorBackHeader = exports.InspectorSectionDivider = exports.InspectorSectionHeader = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = __importDefault(require("react"));
 const colors_1 = require("../../helpers/colors");
 const InlineAction_1 = require("../InlineAction");
+const InspectorPanelLayout_1 = require("../InspectorPanelLayout");
 const ValidationMessage_1 = require("../NewComposition/ValidationMessage");
 const styles_1 = require("./styles");
 const InspectorSectionHeader = ({ children }) => jsx_runtime_1.jsx("div", { style: styles_1.sectionHeader, children: children });
 exports.InspectorSectionHeader = InspectorSectionHeader;
+const InspectorSectionDivider = () => (jsx_runtime_1.jsx("div", { style: styles_1.inspectorSectionDivider }));
+exports.InspectorSectionDivider = InspectorSectionDivider;
 const backIcon = {
     alignItems: 'center',
     display: 'flex',
@@ -22,12 +25,10 @@ const backIcon = {
 const BackChevron = ({ color }) => {
     return (jsx_runtime_1.jsx("svg", { viewBox: "0 0 8 12", style: backIcon, children: jsx_runtime_1.jsx("path", { d: "M6 1L2 6L6 11", fill: "none", stroke: color, strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "1.5" }) }));
 };
-const InspectorBackHeaderWithDivider = ({ children, disabled, onClick, title }) => {
-    return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
-            jsx_runtime_1.jsx(exports.InspectorSectionHeader, { children: jsx_runtime_1.jsx("div", { style: styles_1.sectionHeaderRow, children: jsx_runtime_1.jsxs("div", { style: styles_1.sectionHeaderStart, children: [jsx_runtime_1.jsx(InlineAction_1.InlineAction, { disabled: disabled, onClick: onClick, title: title, renderAction: (color) => jsx_runtime_1.jsx(BackChevron, { color: color }) }), children] }) }) }), jsx_runtime_1.jsx("div", { style: styles_1.inspectorSectionDivider })
-        ] }));
+const InspectorBackHeader = ({ children, disabled, onClick, title }) => {
+    return (jsx_runtime_1.jsx(exports.InspectorSectionHeader, { children: jsx_runtime_1.jsx("div", { style: styles_1.sectionHeaderRow, children: jsx_runtime_1.jsxs("div", { style: styles_1.sectionHeaderStart, children: [jsx_runtime_1.jsx(InlineAction_1.InlineAction, { disabled: disabled, onClick: onClick, title: title, renderAction: (color) => jsx_runtime_1.jsx(BackChevron, { color: color }) }), children] }) }) }));
 };
-exports.InspectorBackHeaderWithDivider = InspectorBackHeaderWithDivider;
+exports.InspectorBackHeader = InspectorBackHeader;
 const InspectorMessage = ({ children }) => jsx_runtime_1.jsx("div", { style: styles_1.centeredMessage, children: children });
 exports.InspectorMessage = InspectorMessage;
 const InspectorDetailRow = ({ label, children }) => (jsx_runtime_1.jsxs("div", { style: styles_1.detailRow, children: [
@@ -39,6 +40,7 @@ const inlineLabelButton = {
     appearance: 'none',
     backgroundColor: colors_1.TRANSPARENT,
     border: 'none',
+    boxSizing: 'border-box',
     color: colors_1.LIGHT_TEXT,
     cursor: 'default',
     display: 'flex',
@@ -47,7 +49,9 @@ const inlineLabelButton = {
     gap: 8,
     lineHeight: '18px',
     margin: 0,
-    padding: '10px 0 0',
+    padding: `5px ${InspectorPanelLayout_1.INSPECTOR_PANEL_HORIZONTAL_PADDING}px`,
+    textAlign: 'left',
+    width: '100%',
 };
 const inlineLabelButtonDisabled = {
     ...inlineLabelButton,

package/dist/components/InspectorPanel/optimistic-composition-metadata.d.ts

@@ -0,0 +1,22 @@
+export type CompositionMetadataField = 'durationInFrames' | 'fps' | 'height' | 'width';
+export type PendingCompositionMetadataValue = {
+    readonly baseline: object;
+    readonly status: 'saving' | 'awaiting-hmr';
+    readonly value: number;
+};
+export type PendingCompositionMetadata = Partial<Record<CompositionMetadataField, PendingCompositionMetadataValue>>;
+export declare const failPendingCompositionMetadataValue: ({ field, pending, value, }: {
+    readonly field: CompositionMetadataField;
+    readonly pending: Partial<Record<CompositionMetadataField, PendingCompositionMetadataValue>>;
+    readonly value: PendingCompositionMetadataValue;
+}) => Partial<Record<CompositionMetadataField, PendingCompositionMetadataValue>>;
+export declare const acceptPendingCompositionMetadataValue: ({ currentConfig, field, pending, value, }: {
+    readonly currentConfig: object;
+    readonly field: CompositionMetadataField;
+    readonly pending: Partial<Record<CompositionMetadataField, PendingCompositionMetadataValue>>;
+    readonly value: PendingCompositionMetadataValue;
+}) => Partial<Record<CompositionMetadataField, PendingCompositionMetadataValue>>;
+export declare const reconcilePendingCompositionMetadata: ({ currentConfig, pending, }: {
+    readonly currentConfig: object;
+    readonly pending: Partial<Record<CompositionMetadataField, PendingCompositionMetadataValue>>;
+}) => Partial<Record<CompositionMetadataField, PendingCompositionMetadataValue>>;

package/dist/components/InspectorPanel/optimistic-composition-metadata.js

@@ -0,0 +1,41 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.reconcilePendingCompositionMetadata = exports.acceptPendingCompositionMetadataValue = exports.failPendingCompositionMetadataValue = void 0;
+const removePendingValue = ({ field, pending, }) => {
+    const { [field]: _removed, ...remaining } = pending;
+    return remaining;
+};
+const failPendingCompositionMetadataValue = ({ field, pending, value, }) => {
+    if (pending[field] !== value) {
+        return pending;
+    }
+    return removePendingValue({ field, pending });
+};
+exports.failPendingCompositionMetadataValue = failPendingCompositionMetadataValue;
+const acceptPendingCompositionMetadataValue = ({ currentConfig, field, pending, value, }) => {
+    if (pending[field] !== value) {
+        return pending;
+    }
+    if (currentConfig !== value.baseline) {
+        return removePendingValue({ field, pending });
+    }
+    return {
+        ...pending,
+        [field]: {
+            ...value,
+            status: 'awaiting-hmr',
+        },
+    };
+};
+exports.acceptPendingCompositionMetadataValue = acceptPendingCompositionMetadataValue;
+const reconcilePendingCompositionMetadata = ({ currentConfig, pending, }) => {
+    let reconciled = pending;
+    for (const field of Object.keys(pending)) {
+        const value = pending[field];
+        if ((value === null || value === void 0 ? void 0 : value.status) === 'awaiting-hmr' && value.baseline !== currentConfig) {
+            reconciled = removePendingValue({ field, pending: reconciled });
+        }
+    }
+    return reconciled;
+};
+exports.reconcilePendingCompositionMetadata = reconcilePendingCompositionMetadata;

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

@@ -20,6 +20,8 @@ export declare const resolveLinkStyle: React.CSSProperties;
 export declare const selectedContainer: React.CSSProperties;
 export declare const centeredMessage: React.CSSProperties;
 export declare const detailsContainer: React.CSSProperties;
+export declare const detailsWithInlineAction: React.CSSProperties;
+export declare const detailsBeforeInlineAction: React.CSSProperties;
 export declare const guideDetailsContainer: React.CSSProperties;
 export declare const detailRow: React.CSSProperties;
 export declare const detailLabel: React.CSSProperties;

package/dist/components/InspectorPanel/styles.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.keyframeEditorValue = exports.keyframeEditorLabel = exports.keyframeEditorRow = exports.detailValue = exports.detailLabel = exports.detailRow = exports.guideDetailsContainer = exports.detailsContainer = exports.centeredMessage = exports.selectedContainer = exports.resolveLinkStyle = exports.defaultPropsWarningMessages = exports.defaultPropsWarningContainer = exports.sectionHeaderEnd = exports.sectionHeaderStart = exports.sectionHeaderTitle = exports.sectionHeaderRow = exports.sequenceHeaderSubtitle = exports.sequenceHeaderTitle = exports.sequenceHeader = exports.sectionHeader = exports.sequenceHeaderDivider = exports.inspectorSectionDivider = exports.compositionSection = exports.visualControlsSection = exports.defaultPropsSection = exports.scrollableContainer = exports.container = void 0;
+exports.keyframeEditorValue = exports.keyframeEditorLabel = exports.keyframeEditorRow = exports.detailValue = exports.detailLabel = exports.detailRow = exports.guideDetailsContainer = exports.detailsBeforeInlineAction = exports.detailsWithInlineAction = exports.detailsContainer = exports.centeredMessage = exports.selectedContainer = exports.resolveLinkStyle = exports.defaultPropsWarningMessages = exports.defaultPropsWarningContainer = exports.sectionHeaderEnd = exports.sectionHeaderStart = exports.sectionHeaderTitle = exports.sectionHeaderRow = exports.sequenceHeaderSubtitle = exports.sequenceHeaderTitle = exports.sequenceHeader = exports.sectionHeader = exports.sequenceHeaderDivider = exports.inspectorSectionDivider = exports.compositionSection = exports.visualControlsSection = exports.defaultPropsSection = exports.scrollableContainer = exports.container = void 0;
 const colors_1 = require("../../helpers/colors");
 const InspectorPanelLayout_1 = require("../InspectorPanelLayout");
 exports.container = {
@@ -155,6 +155,12 @@ exports.centeredMessage = {
 exports.detailsContainer = {
     padding: `0 ${InspectorPanelLayout_1.INSPECTOR_PANEL_HORIZONTAL_PADDING}px ${InspectorPanelLayout_1.INSPECTOR_PANEL_HORIZONTAL_PADDING}px`,
 };
+exports.detailsWithInlineAction = {
+    paddingBottom: InspectorPanelLayout_1.INSPECTOR_PANEL_HORIZONTAL_PADDING,
+};
+exports.detailsBeforeInlineAction = {
+    padding: `0 ${InspectorPanelLayout_1.INSPECTOR_PANEL_HORIZONTAL_PADDING}px`,
+};
 exports.guideDetailsContainer = {
     padding: `0 ${InspectorPanelLayout_1.INSPECTOR_PANEL_HORIZONTAL_PADDING}px ${InspectorPanelLayout_1.INSPECTOR_PANEL_HORIZONTAL_PADDING}px`,
 };
@@ -163,7 +169,6 @@ exports.detailRow = {
     display: 'flex',
     gap: 12,
     justifyContent: 'space-between',
-    padding: '10px 0',
 };
 exports.detailLabel = {
     color: colors_1.LIGHT_TEXT,