@remotion/studio 4.0.500 → 4.0.501

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>;
+    insertComposition: () => void;
     insertSolid: () => Promise<void>;
 };

package/dist/components/InspectorPanel/use-composition-actions.js

@@ -1,14 +1,18 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useCompositionActions = void 0;
+const drag_and_drop_1 = require("@remotion/drag-and-drop");
 const react_1 = require("react");
 const remotion_1 = require("remotion");
+const browser_studio_operations_1 = require("../../helpers/browser-studio-operations");
 const client_id_1 = require("../../helpers/client-id");
 const interactivity_enabled_1 = require("../../helpers/interactivity-enabled");
 const open_in_editor_1 = require("../../helpers/open-in-editor");
+const modals_1 = require("../../state/modals");
 const call_api_1 = require("../call-api");
 const import_assets_1 = require("../import-assets");
 const NotificationCenter_1 = require("../Notifications/NotificationCenter");
+const get_stack_1 = require("../Timeline/TimelineStack/get-stack");
 const use_resolved_stack_1 = require("../Timeline/use-resolved-stack");
 const useCompositionActions = () => {
     var _a, _b;
@@ -16,9 +20,13 @@ const useCompositionActions = () => {
     const videoConfig = remotion_1.Internals.useUnsafeVideoConfig();
     const [isAddingSolid, setIsAddingSolid] = (0, react_1.useState)(false);
     const [isAddingAsset, setIsAddingAsset] = (0, react_1.useState)(false);
+    const [isAddingComposition, setIsAddingComposition] = (0, react_1.useState)(false);
+    const { setSelectedModal } = (0, react_1.useContext)(modals_1.ModalsContext);
     const { previewServerState } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
     const previewConnected = previewServerState.type === 'connected';
     const previewInteractive = previewConnected && (0, interactivity_enabled_1.isStudioInteractivityEnabled)();
+    const browserStudioOperations = (0, browser_studio_operations_1.getBrowserStudioOperations)();
+    const browserStudioCanInsertSolid = browserStudioOperations !== null;
     const currentCompositionId = (canvasContent === null || canvasContent === void 0 ? void 0 : canvasContent.type) === 'composition' ? canvasContent.compositionId : null;
     const currentComposition = (0, react_1.useMemo)(() => {
         var _a;
@@ -28,13 +36,15 @@ const useCompositionActions = () => {
         return ((_a = compositions.find((composition) => composition.id === currentCompositionId)) !== null && _a !== void 0 ? _a : null);
     }, [compositions, currentCompositionId]);
     const resolvedCompositionLocation = (0, use_resolved_stack_1.useResolvedStack)((_a = currentComposition === null || currentComposition === void 0 ? void 0 : currentComposition.stack) !== null && _a !== void 0 ? _a : null);
-    const compositionFile = (_b = resolvedCompositionLocation === null || resolvedCompositionLocation === void 0 ? void 0 : resolvedCompositionLocation.source) !== null && _b !== void 0 ? _b : null;
+    const compositionFile = (_b = resolvedCompositionLocation === null || resolvedCompositionLocation === void 0 ? void 0 : resolvedCompositionLocation.source) !== null && _b !== void 0 ? _b : (currentCompositionId && browserStudioOperations
+        ? browserStudioOperations.getCompositionFile(currentCompositionId)
+        : null);
     const compositionComponentInfo = (0, open_in_editor_1.useCachedCompositionComponentInfo)({
         compositionFile,
         compositionId: currentCompositionId,
     });
-    const canShowInsertSolid = previewInteractive &&
-        !window.remotion_isReadOnlyStudio &&
+    const canShowInsertSolid = (previewInteractive || browserStudioCanInsertSolid) &&
+        (!window.remotion_isReadOnlyStudio || browserStudioCanInsertSolid) &&
         (compositionComponentInfo === null || compositionComponentInfo === void 0 ? void 0 : compositionComponentInfo.canAddSequence) === true &&
         currentCompositionId !== null &&
         compositionFile !== null &&
@@ -46,6 +56,8 @@ const useCompositionActions = () => {
         currentCompositionId !== null &&
         compositionFile !== null;
     const canInsertAsset = canShowInsertAsset && !isAddingAsset;
+    const canShowInsertComposition = canShowInsertAsset;
+    const canInsertComposition = canShowInsertComposition && !isAddingComposition;
     const insertSolid = (0, react_1.useCallback)(async () => {
         if (!canInsertSolid ||
             currentCompositionId === null ||
@@ -55,7 +67,7 @@ const useCompositionActions = () => {
         }
         setIsAddingSolid(true);
         try {
-            const result = await (0, call_api_1.callApi)('/api/insert-jsx-element', {
+            const request = {
                 compositionFile,
                 compositionId: currentCompositionId,
                 from: null,
@@ -65,7 +77,10 @@ const useCompositionActions = () => {
                     height: videoConfig.height,
                     position: null,
                 },
-            });
+            };
+            const result = browserStudioOperations
+                ? await browserStudioOperations.insertSolid(request)
+                : await (0, call_api_1.callApi)('/api/insert-jsx-element', request);
             if (result.success) {
                 (0, NotificationCenter_1.showNotification)('Added <Solid> to source file', 2000);
                 return;
@@ -78,7 +93,13 @@ const useCompositionActions = () => {
         finally {
             setIsAddingSolid(false);
         }
-    }, [canInsertSolid, compositionFile, currentCompositionId, videoConfig]);
+    }, [
+        browserStudioOperations,
+        canInsertSolid,
+        compositionFile,
+        currentCompositionId,
+        videoConfig,
+    ]);
     const insertAsset = (0, react_1.useCallback)(async () => {
         if (!canInsertAsset ||
             currentCompositionId === null ||
@@ -107,12 +128,76 @@ const useCompositionActions = () => {
             setIsAddingAsset(false);
         }
     }, [canInsertAsset, compositionFile, currentCompositionId, videoConfig]);
+    const onCompositionSelected = (0, react_1.useCallback)(async (composition) => {
+        var _a, _b, _c, _d, _e;
+        if (!canInsertComposition ||
+            currentCompositionId === null ||
+            compositionFile === null) {
+            return;
+        }
+        setIsAddingComposition(true);
+        try {
+            const resolvedLocation = composition.stack
+                ? await (0, get_stack_1.getOriginalLocationFromStack)(composition.stack, 'sequence')
+                : null;
+            const selectedCompositionFile = (_b = (_a = resolvedLocation === null || resolvedLocation === void 0 ? void 0 : resolvedLocation.source) !== null && _a !== void 0 ? _a : browserStudioOperations === null || browserStudioOperations === void 0 ? void 0 : browserStudioOperations.getCompositionFile(composition.id)) !== null && _b !== void 0 ? _b : null;
+            const compositionDragData = drag_and_drop_1.DragAndDropInternals.makeDragData({
+                type: 'composition',
+                compositionFile: selectedCompositionFile,
+                compositionId: composition.id,
+                width: (_c = composition.width) !== null && _c !== void 0 ? _c : null,
+                height: (_d = composition.height) !== null && _d !== void 0 ? _d : null,
+                durationInFrames: (_e = composition.durationInFrames) !== null && _e !== void 0 ? _e : null,
+            }).data;
+            await (0, import_assets_1.insertComposition)({
+                composition: compositionDragData,
+                compositionFile,
+                compositionId: currentCompositionId,
+                dropPosition: null,
+                from: null,
+            });
+        }
+        catch (error) {
+            (0, NotificationCenter_1.showNotification)(`Could not add composition: ${error instanceof Error ? error.message : String(error)}`, 4000);
+        }
+        finally {
+            setIsAddingComposition(false);
+        }
+    }, [
+        browserStudioOperations,
+        canInsertComposition,
+        compositionFile,
+        currentCompositionId,
+    ]);
+    const insertComposition = (0, react_1.useCallback)(() => {
+        if (!canInsertComposition) {
+            return;
+        }
+        setSelectedModal({
+            type: 'quick-switcher',
+            mode: 'compositions',
+            invocationTimestamp: Date.now(),
+            assetSelection: null,
+            compositionSelection: {
+                excludeCompositionId: currentCompositionId,
+                onSelected: onCompositionSelected,
+            },
+        });
+    }, [
+        canInsertComposition,
+        currentCompositionId,
+        onCompositionSelected,
+        setSelectedModal,
+    ]);
     return {
         canInsertAsset,
+        canInsertComposition,
         canInsertSolid,
         canShowInsertAsset,
+        canShowInsertComposition,
         canShowInsertSolid,
         insertAsset,
+        insertComposition,
         insertSolid,
     };
 };

package/dist/components/InspectorPanel.js

@@ -26,10 +26,10 @@ const InspectorPanel = ({ composition, currentDefaultProps, readOnlyStudio, setD
     }
     if (selectedItems.length > 1) {
         if (sameSequenceInspectorSelection) {
-            return (jsx_runtime_1.jsx("div", { style: styles_1.container, children: jsx_runtime_1.jsx(SelectedInspector_1.SelectedInspector, { selection: sameSequenceInspectorSelection }) }));
+            return (jsx_runtime_1.jsx("div", { style: styles_1.container, children: jsx_runtime_1.jsx(SelectedInspector_1.SelectedInspector, { selection: sameSequenceInspectorSelection, readOnlyStudio: readOnlyStudio }) }));
         }
         return (jsx_runtime_1.jsx("div", { style: styles_1.container, children: jsx_runtime_1.jsxs(common_1.InspectorMessage, { children: [selectedItems.length, " items selected"] }) }));
     }
-    return (jsx_runtime_1.jsx("div", { style: styles_1.container, children: jsx_runtime_1.jsx(SelectedInspector_1.SelectedInspector, { selection: selectedItems[0] }) }));
+    return (jsx_runtime_1.jsx("div", { style: styles_1.container, children: jsx_runtime_1.jsx(SelectedInspector_1.SelectedInspector, { selection: selectedItems[0], readOnlyStudio: readOnlyStudio }) }));
 };
 exports.InspectorPanel = InspectorPanel;

package/dist/components/InspectorSequenceSection.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import type { TSequence } from 'remotion';
+import { type TSequence } from 'remotion';
 import type { CodePosition } from '../error-overlay/react-overlay/utils/get-source-map';
 import type { SequenceNodePathInfo } from '../helpers/get-timeline-sequence-sort-key';
 import { type FlatTreeRow } from '../helpers/timeline-layout';
@@ -11,6 +11,7 @@ export declare const getInspectorSelectableItems: (rows: readonly FlatTreeRow[])
 export declare const hasSequenceControls: (sequence: TSequence) => sequence is SequenceWithControls;
 export declare const InspectorSequenceSection: React.FC<{
     readonly sequence: SequenceWithControls;
+    readonly readOnlyStudio: boolean;
     readonly validatedLocation: CodePosition;
     readonly nodePathInfo: SequenceNodePathInfo;
     readonly keyframeDisplayOffset: number;