@remotion/studio 4.0.500 → 4.0.502

package/dist/components/GlobalKeybindings.js

@@ -115,6 +115,7 @@ const GlobalKeybindings = () => {
                         : 'compositions',
                     invocationTimestamp: Date.now(),
                     assetSelection: null,
+                    compositionSelection: null,
                 });
             },
             triggerIfInputFieldFocused: true,
@@ -165,6 +166,7 @@ const GlobalKeybindings = () => {
                     mode: 'docs',
                     invocationTimestamp: Date.now(),
                     assetSelection: null,
+                    compositionSelection: null,
                 });
             },
             commandCtrlKey: false,

package/dist/components/InitialCompositionLoader.d.ts

@@ -1,3 +1,3 @@
 import type React from 'react';
-export declare const useSelectComposition: () => (c: import("remotion").AnyComposition, push: boolean, frame?: number | null) => void;
+export declare const useSelectComposition: () => (c: Pick<import("remotion").AnyComposition, "folderName" | "id" | "parentFolderName">, push: boolean, frame?: number | null) => void;
 export declare const InitialCompositionLoader: React.FC;

package/dist/components/InlineAction.js

@@ -27,9 +27,10 @@ const InlineAction = ({ renderAction, onClick, disabled, title, unhoveredColor =
             justifyContent: 'center',
             alignItems: 'center',
             borderRadius: 3,
+            opacity: disabled ? 0.5 : 1,
             pointerEvents: disabled ? 'none' : 'auto',
         };
     }, [disabled, hovered]);
-    return (jsx_runtime_1.jsx("button", { type: "button", disabled: disabled, onPointerEnter: onPointerEnter, onPointerLeave: onPointerLeave, onClick: onClick, style: style, tabIndex: tabIndex, title: title, children: renderAction(hovered ? colors_1.WHITE : unhoveredColor) }));
+    return (jsx_runtime_1.jsx("button", { type: "button", disabled: disabled, onPointerEnter: onPointerEnter, onPointerLeave: onPointerLeave, onClick: onClick, style: style, tabIndex: tabIndex, title: title, "aria-label": title, children: renderAction(hovered ? colors_1.WHITE : unhoveredColor) }));
 };
 exports.InlineAction = InlineAction;

package/dist/components/InlineCaptionInspector.d.ts

@@ -0,0 +1,11 @@
+import type { Caption } from '@remotion/captions';
+import React from 'react';
+import type { SequenceControls, SequencePropsSubscriptionKey } from 'remotion';
+import type { CodePosition } from '../error-overlay/react-overlay/utils/get-source-map';
+export declare const InlineCaptionInspector: React.FC<{
+    readonly captions: Caption[];
+    readonly controls: SequenceControls;
+    readonly nodePath: SequencePropsSubscriptionKey;
+    readonly readOnlyStudio: boolean;
+    readonly validatedLocation: CodePosition;
+}>;

package/dist/components/InlineCaptionInspector.js

@@ -0,0 +1,108 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.InlineCaptionInspector = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const remotion_1 = require("remotion");
+const client_id_1 = require("../helpers/client-id");
+const CaptionInspector_1 = require("./CaptionInspector");
+const save_sequence_prop_1 = require("./Timeline/save-sequence-prop");
+const serializeCaptions = (captions) => {
+    return JSON.stringify(captions);
+};
+const getCaptionPatches = ({ previous, next, }) => {
+    if (previous.length !== next.length) {
+        return null;
+    }
+    const patches = [];
+    for (const [index, before] of previous.entries()) {
+        const after = next[index];
+        if (!after) {
+            return null;
+        }
+        if (before.text !== after.text) {
+            patches.push({
+                index,
+                before,
+                changes: { text: after.text },
+            });
+        }
+    }
+    return patches;
+};
+const InlineCaptionInspector = ({ captions, controls, nodePath, readOnlyStudio, validatedLocation }) => {
+    var _a;
+    const { previewServerState } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
+    const { propStatuses } = (0, react_1.useContext)(remotion_1.Internals.VisualModePropStatusesContext);
+    const { setPropStatuses, setDragOverrides, clearDragOverrides } = (0, react_1.useContext)(remotion_1.Internals.VisualModeSettersContext);
+    const captionStatus = (_a = remotion_1.Internals.getPropStatusesCtx(propStatuses, nodePath)) === null || _a === void 0 ? void 0 : _a.captions;
+    const clientId = previewServerState.type === 'connected'
+        ? previewServerState.clientId
+        : null;
+    const canSave = !readOnlyStudio && clientId !== null && (captionStatus === null || captionStatus === void 0 ? void 0 : captionStatus.status) === 'static';
+    const [draftCaptions, setDraftCaptions] = (0, react_1.useState)(captions);
+    const savedCaptions = (0, react_1.useRef)(captions);
+    const runtimeSignature = serializeCaptions(captions);
+    const lastRuntimeSignature = (0, react_1.useRef)(runtimeSignature);
+    (0, react_1.useEffect)(() => {
+        if (lastRuntimeSignature.current === runtimeSignature) {
+            return;
+        }
+        lastRuntimeSignature.current = runtimeSignature;
+        savedCaptions.current = captions;
+        setDraftCaptions(captions);
+        clearDragOverrides(nodePath);
+    }, [captions, clearDragOverrides, nodePath, runtimeSignature]);
+    const updateCaptions = (0, react_1.useCallback)((nextCaptions) => {
+        setDraftCaptions(nextCaptions);
+        setDragOverrides(nodePath, 'captions', remotion_1.Internals.makeStaticDragOverride(nextCaptions));
+    }, [nodePath, setDragOverrides]);
+    const cancelCaptions = (0, react_1.useCallback)(() => {
+        setDraftCaptions(savedCaptions.current);
+        clearDragOverrides(nodePath);
+    }, [clearDragOverrides, nodePath]);
+    const saveCaptions = (0, react_1.useCallback)((nextCaptions) => {
+        const patches = getCaptionPatches({
+            previous: savedCaptions.current,
+            next: nextCaptions,
+        });
+        setDraftCaptions(nextCaptions);
+        if (!canSave ||
+            clientId === null ||
+            patches === null ||
+            patches.length === 0) {
+            clearDragOverrides(nodePath);
+            return;
+        }
+        savedCaptions.current = nextCaptions;
+        (0, save_sequence_prop_1.saveInlineCaptionPatches)({
+            fileName: validatedLocation.source,
+            nodePath,
+            schema: controls.schema,
+            patches,
+            nextCaptions,
+            setPropStatuses,
+            clientId,
+            undoLabel: 'Update captions',
+            redoLabel: 'Update captions again',
+        });
+        clearDragOverrides(nodePath);
+    }, [
+        canSave,
+        clearDragOverrides,
+        clientId,
+        controls.schema,
+        nodePath,
+        setPropStatuses,
+        validatedLocation.source,
+    ]);
+    const readOnlyTitle = readOnlyStudio
+        ? 'Caption editing is unavailable in read-only Studio'
+        : clientId === null
+            ? 'Caption editing requires a Studio server connection'
+            : (captionStatus === null || captionStatus === void 0 ? void 0 : captionStatus.status) === 'computed'
+                ? 'Captions must be a direct inline JSX array to edit them'
+                : 'Captions are not ready for editing';
+    return (jsx_runtime_1.jsx(CaptionInspector_1.CaptionInspector, { captions: draftCaptions, onTextChange: updateCaptions, onTextSave: saveCaptions, onTextCancel: cancelCaptions, readOnly: !canSave, readOnlyTitle: canSave ? null : readOnlyTitle }));
+};
+exports.InlineCaptionInspector = InlineCaptionInspector;

package/dist/components/InspectorPanel/CompositionInspector.js

@@ -6,6 +6,7 @@ const react_1 = require("react");
 const interactivity_enabled_1 = require("../../helpers/interactivity-enabled");
 const frame_1 = require("../../icons/frame");
 const solid_1 = require("../../icons/solid");
+const video_1 = require("../../icons/video");
 const VisualControls_1 = require("../../visual-controls/VisualControls");
 const DefaultPropsEditor_1 = require("../DefaultPropsEditor");
 const get_zod_if_possible_1 = require("../get-zod-if-possible");
@@ -26,11 +27,12 @@ const actionIconStyle = {
     width: 18,
 };
 const CompositionActions = ({ readOnlyStudio }) => {
-    const { canInsertAsset, canInsertSolid, canShowInsertAsset, canShowInsertSolid, insertAsset, insertSolid, } = (0, use_composition_actions_1.useCompositionActions)();
-    if (readOnlyStudio || (!canShowInsertAsset && !canShowInsertSolid)) {
+    const { canInsertAsset, canInsertComposition, canInsertSolid, canShowInsertAsset, canShowInsertComposition, canShowInsertSolid, insertAsset, insertComposition, insertSolid, } = (0, use_composition_actions_1.useCompositionActions)();
+    if ((readOnlyStudio && !canShowInsertSolid) ||
+        (!canShowInsertAsset && !canShowInsertComposition && !canShowInsertSolid)) {
         return null;
     }
-    return (jsx_runtime_1.jsxs(common_1.InspectorActionSection, { children: [canShowInsertSolid ? (jsx_runtime_1.jsx(common_1.InspectorInlineAction, { disabled: !canInsertSolid, onClick: insertSolid, renderIcon: (color) => (jsx_runtime_1.jsx(solid_1.SolidIcon, { color: color, style: actionIconStyle })), children: "Add Solid" })) : null, canShowInsertAsset ? (jsx_runtime_1.jsx(common_1.InspectorInlineAction, { disabled: !canInsertAsset, onClick: insertAsset, renderIcon: (color) => (jsx_runtime_1.jsx(frame_1.PicIcon, { color: color, style: actionIconStyle })), children: "Add asset..." })) : null] }));
+    return (jsx_runtime_1.jsxs(common_1.InspectorActionSection, { children: [canShowInsertSolid ? (jsx_runtime_1.jsx(common_1.InspectorInlineAction, { disabled: !canInsertSolid, onClick: insertSolid, renderIcon: (color) => (jsx_runtime_1.jsx(solid_1.SolidIcon, { color: color, style: actionIconStyle })), children: "Add Solid" })) : null, canShowInsertAsset ? (jsx_runtime_1.jsx(common_1.InspectorInlineAction, { disabled: !canInsertAsset, onClick: insertAsset, renderIcon: (color) => (jsx_runtime_1.jsx(frame_1.PicIcon, { color: color, style: actionIconStyle })), children: "Add asset..." })) : null, canShowInsertComposition ? (jsx_runtime_1.jsx(common_1.InspectorInlineAction, { disabled: !canInsertComposition, onClick: insertComposition, renderIcon: (color) => (jsx_runtime_1.jsx(video_1.FilmIcon, { color: color, style: actionIconStyle })), children: "Add composition..." })) : null] }));
 };
 const CompositionDefaultPropsSection = ({ composition, currentDefaultProps, readOnlyStudio, setDefaultProps }) => {
     var _a;

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

@@ -2,4 +2,5 @@ import React from 'react';
 import type { TimelineSelection } from '../Timeline/TimelineSelection';
 export declare const SelectedInspector: React.FC<{
     readonly selection: TimelineSelection;
+    readonly readOnlyStudio: boolean;
 }>;

package/dist/components/InspectorPanel/SelectedInspector.js

@@ -8,9 +8,9 @@ const GuideInspector_1 = require("./GuideInspector");
 const inspector_selection_1 = require("./inspector-selection");
 const KeyframeInspector_1 = require("./KeyframeInspector");
 const SequenceSelectionInspector_1 = require("./SequenceSelectionInspector");
-const SelectedInspector = ({ selection }) => {
+const SelectedInspector = ({ selection, readOnlyStudio }) => {
     if ((0, inspector_selection_1.isSequenceSectionSelection)(selection)) {
-        return jsx_runtime_1.jsx(SequenceSelectionInspector_1.SequenceSelectionInspector, { selection: selection });
+        return (jsx_runtime_1.jsx(SequenceSelectionInspector_1.SequenceSelectionInspector, { selection: selection, readOnlyStudio: readOnlyStudio }));
     }
     if (selection.type === 'keyframe') {
         return jsx_runtime_1.jsx(KeyframeInspector_1.KeyframeInspector, { selection: selection });

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

@@ -2,4 +2,5 @@ import React from 'react';
 import type { SequenceSectionSelection } from './inspector-selection';
 export declare const SequenceSelectionInspector: React.FC<{
     readonly selection: SequenceSectionSelection;
+    readonly readOnlyStudio: boolean;
 }>;

package/dist/components/InspectorPanel/SequenceSelectionInspector.js

@@ -99,7 +99,7 @@ const SequenceSourceActions = ({ selection, track, validatedSource }) => {
     }, [confirm, selection.nodePathInfo, sourceActionsDisabled]);
     return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [(freezeFrameMenuItem === null || freezeFrameMenuItem === void 0 ? void 0 : freezeFrameMenuItem.type) === 'item' ? (jsx_runtime_1.jsx(common_1.InspectorInlineAction, { disabled: Boolean(freezeFrameMenuItem.disabled), onClick: () => freezeFrameMenuItem.onClick(freezeFrameMenuItem.id, null), renderIcon: (color) => (jsx_runtime_1.jsx(snowflake_1.SnowflakeIcon, { style: largeActionIconStyle, color: color })), children: freezeFrameMenuItem.label })) : null, jsx_runtime_1.jsx(common_1.InspectorInlineAction, { disabled: sourceActionsDisabled, onClick: onDuplicate, renderIcon: (color) => (jsx_runtime_1.jsx(duplicate_1.DuplicateIcon, { style: largeActionIconStyle, color: color })), children: "Duplicate" }), jsx_runtime_1.jsx(common_1.InspectorInlineAction, { disabled: sourceActionsDisabled, onClick: onDelete, renderIcon: (color) => (jsx_runtime_1.jsx(trash_1.TrashIcon, { style: actionIconStyle, color: color })), children: "Delete" })] }));
 };
-const SequenceExpandedInspector = ({ track }) => {
+const SequenceExpandedInspector = ({ track, readOnlyStudio }) => {
     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);
@@ -143,17 +143,17 @@ const SequenceExpandedInspector = ({ track }) => {
     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 }), connectedCompositions.length > 0 ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
                     jsx_runtime_1.jsx(common_1.InspectorSectionDivider, {}), jsx_runtime_1.jsx(ConnectedCompositionsSection_1.ConnectedCompositionsSection, { connectedCompositions: connectedCompositions })
-                ] })) : null, validatedLocation ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [jsx_runtime_1.jsx(InspectorSequenceSection_1.InspectorSequenceSection, { sequence: track.sequence, validatedLocation: validatedLocation, nodePathInfo: track.nodePathInfo, keyframeDisplayOffset: track.keyframeDisplayOffset, renderTransformControls: () => jsx_runtime_1.jsx(AlignmentControls_1.AlignmentControls, { track: track }) }), jsx_runtime_1.jsxs(common_1.InspectorActionSection, { children: [
+                ] })) : null, validatedLocation ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [jsx_runtime_1.jsx(InspectorSequenceSection_1.InspectorSequenceSection, { sequence: track.sequence, readOnlyStudio: readOnlyStudio, validatedLocation: validatedLocation, nodePathInfo: track.nodePathInfo, keyframeDisplayOffset: track.keyframeDisplayOffset, renderTransformControls: () => jsx_runtime_1.jsx(AlignmentControls_1.AlignmentControls, { track: track }) }), jsx_runtime_1.jsxs(common_1.InspectorActionSection, { children: [
                             jsx_runtime_1.jsx(SplitSequenceAction, { selection: sequenceSelection, track: track }), jsx_runtime_1.jsx(SequenceSourceActions, { selection: sequenceSelection, track: track, validatedSource: validatedLocation.source })
                         ] })
                 ] })) : (jsx_runtime_1.jsx(common_1.InspectorMessage, { children: "Source controls unavailable" }))] }));
 };
-const SequenceSelectionInspector = ({ selection }) => {
+const SequenceSelectionInspector = ({ selection, readOnlyStudio }) => {
     const track = (0, use_track_for_selection_1.useTrackForSelection)(selection);
     if (!track) {
         return jsx_runtime_1.jsx(common_1.InspectorMessage, { children: "Sequence inspector unavailable" });
     }
     const stackKey = track.sequence.getStack();
-    return (jsx_runtime_1.jsx(SequenceExpandedInspector, { track: track }, stackKey !== null && stackKey !== void 0 ? stackKey : track.sequence.id));
+    return (jsx_runtime_1.jsx(SequenceExpandedInspector, { track: track, readOnlyStudio: readOnlyStudio }, stackKey !== null && stackKey !== void 0 ? stackKey : track.sequence.id));
 };
 exports.SequenceSelectionInspector = SequenceSelectionInspector;

package/dist/components/InspectorPanel/inspector-section-collapse.d.ts

@@ -0,0 +1,22 @@
+import type { SchemaFieldGroup } from '@remotion/studio-shared';
+import { type InteractivitySchema } from 'remotion';
+export type SmartCollapsibleInspectorGroup = Extract<SchemaFieldGroup, 'background' | 'border' | 'border-radius' | 'crop' | 'layout'>;
+export type InspectorSectionActivity = 'active' | 'inactive' | 'unknown';
+type InspectorSectionPropStatus = {
+    readonly status: 'static';
+    readonly codeValue: unknown;
+} | {
+    readonly status: 'computed' | 'keyframed';
+};
+export declare const isSmartCollapsibleInspectorGroup: (group: SchemaFieldGroup) => group is SmartCollapsibleInspectorGroup;
+export declare const isInspectorSectionEffectivelyInactive: ({ group, propStatuses, schema, }: {
+    readonly group: SmartCollapsibleInspectorGroup;
+    readonly propStatuses: Readonly<Record<string, InspectorSectionPropStatus>> | undefined;
+    readonly schema?: InteractivitySchema | undefined;
+}) => boolean;
+export declare const getInspectorSectionActivity: ({ group, propStatuses, schema, }: {
+    readonly group: SmartCollapsibleInspectorGroup;
+    readonly propStatuses: Readonly<Record<string, InspectorSectionPropStatus>> | undefined;
+    readonly schema?: InteractivitySchema | undefined;
+}) => InspectorSectionActivity;
+export {};

package/dist/components/InspectorPanel/inspector-section-collapse.js

@@ -0,0 +1,165 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getInspectorSectionActivity = exports.isInspectorSectionEffectivelyInactive = exports.isSmartCollapsibleInspectorGroup = void 0;
+const remotion_1 = require("remotion");
+const color_conversion_1 = require("../../helpers/color-conversion");
+const BORDER_KEYS = [
+    'style.borderWidth',
+    'style.borderStyle',
+    'style.borderColor',
+];
+const BORDER_RADIUS_SHORTHAND_KEY = 'style.borderRadius';
+const BORDER_RADIUS_LONGHAND_KEYS = [
+    'style.borderTopLeftRadius',
+    'style.borderTopRightRadius',
+    'style.borderBottomRightRadius',
+    'style.borderBottomLeftRadius',
+];
+const CROP_KEYS = ['cropLeft', 'cropRight', 'cropTop', 'cropBottom'];
+const LAYOUT_KEYS = ['layout', 'premountFor'];
+const BACKGROUND_COLOR_KEY = 'style.backgroundColor';
+const isSmartCollapsibleInspectorGroup = (group) => {
+    return (group === 'background' ||
+        group === 'border' ||
+        group === 'border-radius' ||
+        group === 'crop' ||
+        group === 'layout');
+};
+exports.isSmartCollapsibleInspectorGroup = isSmartCollapsibleInspectorGroup;
+const getStaticValue = ({ key, propStatuses, }) => {
+    const status = propStatuses === null || propStatuses === void 0 ? void 0 : propStatuses[key];
+    if ((status === null || status === void 0 ? void 0 : status.status) !== 'static') {
+        return { found: false };
+    }
+    return { found: true, value: status.codeValue };
+};
+const isZeroOrUndefined = (value) => {
+    return value === undefined || value === 0;
+};
+const isTransparentOrUndefined = (value) => {
+    if (value === undefined) {
+        return true;
+    }
+    if (typeof value !== 'string') {
+        return false;
+    }
+    return (0, color_conversion_1.parseAnyColor)(value).a === 0;
+};
+const hasOnlyStaticZeroValues = ({ keys, propStatuses, }) => {
+    for (const key of keys) {
+        const result = getStaticValue({ key, propStatuses });
+        if (!result.found || !isZeroOrUndefined(result.value)) {
+            return false;
+        }
+    }
+    return true;
+};
+const isBorderInactive = (propStatuses) => {
+    const [width, style, color] = BORDER_KEYS.map((key) => getStaticValue({ key, propStatuses }));
+    if (!width.found || !style.found || !color.found) {
+        return false;
+    }
+    if (style.value === undefined ||
+        style.value === 'none' ||
+        style.value === 'hidden') {
+        return true;
+    }
+    if (width.value === 0) {
+        return true;
+    }
+    return isTransparentOrUndefined(color.value) && color.value !== undefined;
+};
+const isBorderRadiusInactive = (propStatuses) => {
+    const shorthandStatus = propStatuses === null || propStatuses === void 0 ? void 0 : propStatuses[BORDER_RADIUS_SHORTHAND_KEY];
+    if (shorthandStatus && shorthandStatus.status !== 'static') {
+        return false;
+    }
+    if ((shorthandStatus === null || shorthandStatus === void 0 ? void 0 : shorthandStatus.codeValue) !== undefined) {
+        return shorthandStatus.codeValue === 0;
+    }
+    return hasOnlyStaticZeroValues({
+        keys: BORDER_RADIUS_LONGHAND_KEYS,
+        propStatuses,
+    });
+};
+const isLayoutInactive = ({ propStatuses, schema, }) => {
+    if (!schema) {
+        return false;
+    }
+    const flatSchema = remotion_1.Internals.getFlatSchemaWithAllKeys(schema);
+    const layoutKeys = LAYOUT_KEYS.filter((key) => flatSchema[key] !== undefined);
+    if (layoutKeys.length === 0) {
+        return false;
+    }
+    return layoutKeys.every((key) => {
+        const result = getStaticValue({ key, propStatuses });
+        const field = flatSchema[key];
+        if (!result.found || !field || field.type === 'hidden') {
+            return false;
+        }
+        const effectiveValue = result.value === undefined ? field.default : result.value;
+        return Object.is(effectiveValue, field.default);
+    });
+};
+const isInspectorSectionEffectivelyInactive = ({ group, propStatuses, schema, }) => {
+    if (group === 'layout') {
+        return isLayoutInactive({ propStatuses, schema });
+    }
+    if (group === 'border') {
+        return isBorderInactive(propStatuses);
+    }
+    if (group === 'border-radius') {
+        return isBorderRadiusInactive(propStatuses);
+    }
+    if (group === 'crop') {
+        return hasOnlyStaticZeroValues({ keys: CROP_KEYS, propStatuses });
+    }
+    const backgroundColor = getStaticValue({
+        key: BACKGROUND_COLOR_KEY,
+        propStatuses,
+    });
+    return (backgroundColor.found && isTransparentOrUndefined(backgroundColor.value));
+};
+exports.isInspectorSectionEffectivelyInactive = isInspectorSectionEffectivelyInactive;
+const hasOwnStatus = ({ key, propStatuses, }) => {
+    return (propStatuses !== undefined &&
+        Object.prototype.hasOwnProperty.call(propStatuses, key));
+};
+const hasEveryStatus = ({ keys, propStatuses, }) => {
+    return keys.every((key) => hasOwnStatus({ key, propStatuses }));
+};
+const getInspectorSectionActivity = ({ group, propStatuses, schema, }) => {
+    let resolved = false;
+    if (group === 'border') {
+        resolved = hasEveryStatus({ keys: BORDER_KEYS, propStatuses });
+    }
+    else if (group === 'border-radius') {
+        const shorthandStatus = propStatuses === null || propStatuses === void 0 ? void 0 : propStatuses[BORDER_RADIUS_SHORTHAND_KEY];
+        resolved =
+            (shorthandStatus !== undefined &&
+                (shorthandStatus.status !== 'static' ||
+                    shorthandStatus.codeValue !== undefined)) ||
+                hasEveryStatus({ keys: BORDER_RADIUS_LONGHAND_KEYS, propStatuses });
+    }
+    else if (group === 'crop') {
+        resolved = hasEveryStatus({ keys: CROP_KEYS, propStatuses });
+    }
+    else if (group === 'layout') {
+        const flatSchema = schema
+            ? remotion_1.Internals.getFlatSchemaWithAllKeys(schema)
+            : undefined;
+        const layoutKeys = LAYOUT_KEYS.filter((key) => (flatSchema === null || flatSchema === void 0 ? void 0 : flatSchema[key]) !== undefined);
+        resolved =
+            layoutKeys.length > 0 && hasEveryStatus({ keys: layoutKeys, propStatuses });
+    }
+    else {
+        resolved = hasOwnStatus({ key: BACKGROUND_COLOR_KEY, propStatuses });
+    }
+    if (!resolved) {
+        return 'unknown';
+    }
+    return (0, exports.isInspectorSectionEffectivelyInactive)({ group, propStatuses, schema })
+        ? 'inactive'
+        : 'active';
+};
+exports.getInspectorSectionActivity = getInspectorSectionActivity;

package/dist/components/InspectorPanel/styles.js

@@ -39,9 +39,11 @@ exports.sequenceHeaderDivider = {
 };
 exports.sectionHeader = {
     color: colors_1.LIGHT_TEXT,
+    fontFamily: 'sans-serif',
     fontSize: 12,
     fontWeight: 'bold',
-    padding: `8px ${InspectorPanelLayout_1.INSPECTOR_PANEL_HORIZONTAL_PADDING}px`,
+    lineHeight: '24px',
+    padding: `4px ${InspectorPanelLayout_1.INSPECTOR_PANEL_HORIZONTAL_PADDING}px`,
     userSelect: 'none',
 };
 exports.inspectorSectionBody = {
@@ -76,11 +78,15 @@ exports.sectionHeaderRow = {
     minWidth: 0,
 };
 exports.sectionHeaderTitle = {
+    alignItems: 'center',
     color: colors_1.LIGHT_TEXT,
+    display: 'flex',
     flexShrink: 0,
+    fontFamily: 'sans-serif',
     fontSize: 12,
     fontWeight: 'bold',
     lineHeight: '16px',
+    minHeight: 24,
     minWidth: 0,
     overflow: 'hidden',
     textOverflow: 'ellipsis',

package/dist/components/InspectorPanel/use-composition-actions.d.ts

@@ -1,8 +1,11 @@
 export declare const useCompositionActions: () => {
     canInsertAsset: boolean;
+    canInsertComposition: boolean;
     canInsertSolid: boolean;
     canShowInsertAsset: boolean;
+    canShowInsertComposition: boolean;
     canShowInsertSolid: boolean;
-    insertAsset: () => Promise<void>;
+    insertAsset: () => void;
+    insertComposition: () => void;
     insertSolid: () => Promise<void>;
 };