@remotion/studio 4.0.491 → 4.0.492

package/dist/components/NewComposition/NewComposition.js

@@ -11,6 +11,7 @@ const ModalHeader_1 = require("../ModalHeader");
 const layout_2 = require("../RenderModal/layout");
 const CodemodFooter_1 = require("./CodemodFooter");
 const DismissableModal_1 = require("./DismissableModal");
+const get_new_composition_defaults_1 = require("./get-new-composition-defaults");
 const InputAndValidationContainer_1 = require("./InputAndValidationContainer");
 const InputDragger_1 = require("./InputDragger");
 const NewCompDuration_1 = require("./NewCompDuration");
@@ -28,13 +29,19 @@ const folderPathStyle = {
 };
 const NewCompositionLoaded = ({ folderName, parentName, stack }) => {
     const { compositions } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
+    const resolvedComposition = remotion_1.Internals.useResolvedVideoConfig(null);
+    const initialComposition = (resolvedComposition === null || resolvedComposition === void 0 ? void 0 : resolvedComposition.type) === 'success' ||
+        (resolvedComposition === null || resolvedComposition === void 0 ? void 0 : resolvedComposition.type) === 'success-and-refreshing'
+        ? resolvedComposition.result
+        : null;
+    const initialDimensions = (0, get_new_composition_defaults_1.getNewCompositionDefaults)(initialComposition);
     const [newId, setName] = (0, react_1.useState)(() => (0, use_create_composition_1.getUniqueCompositionName)(compositions));
-    const [selectedFrameRate, setFrameRate] = (0, react_1.useState)(30);
+    const [selectedFrameRate, setFrameRate] = (0, react_1.useState)(initialDimensions.fps);
     const [size, setSize] = (0, react_1.useState)(() => ({
-        width: 1920,
-        height: 1080,
+        width: initialDimensions.width,
+        height: initialDimensions.height,
     }));
-    const [durationInFrames, setDurationInFrames] = (0, react_1.useState)(150);
+    const [durationInFrames, setDurationInFrames] = (0, react_1.useState)(initialDimensions.durationInFrames);
     const onWidthChanged = (0, react_1.useCallback)((newValue) => {
         setSize((s) => {
             return {

package/dist/components/NewComposition/get-new-composition-defaults.d.ts

@@ -0,0 +1,4 @@
+import type { VideoConfig } from 'remotion';
+type CompositionDimensions = Pick<VideoConfig, 'width' | 'height' | 'fps' | 'durationInFrames'>;
+export declare const getNewCompositionDefaults: (composition: CompositionDimensions | null) => CompositionDimensions;
+export {};

package/dist/components/NewComposition/get-new-composition-defaults.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getNewCompositionDefaults = void 0;
+const defaultCompositionDimensions = {
+    width: 1920,
+    height: 1080,
+    fps: 30,
+    durationInFrames: 150,
+};
+const getNewCompositionDefaults = (composition) => {
+    return composition !== null && composition !== void 0 ? composition : defaultCompositionDimensions;
+};
+exports.getNewCompositionDefaults = getNewCompositionDefaults;

package/dist/components/Timeline/TimelineAssetField.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+import type { CanUpdateSequencePropStatusStatic } from 'remotion';
+import type { SchemaFieldInfo, TimelineFieldOnDragValueChange, TimelineFieldOnSave } from '../../helpers/timeline-layout';
+type TimelineAssetFieldProps = {
+    readonly field: SchemaFieldInfo;
+    readonly propStatus: CanUpdateSequencePropStatusStatic;
+    readonly effectiveValue: unknown;
+    readonly onSave: TimelineFieldOnSave;
+    readonly onDragValueChange: TimelineFieldOnDragValueChange;
+    readonly onDragEnd: () => void;
+};
+export declare const isStaticFileAssetValue: (value: unknown) => value is string;
+export declare const TimelineAssetField: React.FC<TimelineAssetFieldProps>;
+export {};

package/dist/components/Timeline/TimelineAssetField.js

@@ -0,0 +1,125 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TimelineAssetField = exports.isStaticFileAssetValue = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const no_react_1 = require("remotion/no-react");
+const write_static_file_1 = require("../../api/write-static-file");
+const Checkmark_1 = require("../../icons/Checkmark");
+const import_assets_1 = require("../import-assets");
+const ComboBox_1 = require("../NewComposition/ComboBox");
+const NotificationCenter_1 = require("../Notifications/NotificationCenter");
+const use_static_files_1 = require("../use-static-files");
+const comboboxStyle = {
+    marginLeft: 8,
+    maxWidth: 180,
+};
+const remoteAssetStyle = {
+    display: 'inline-block',
+    marginLeft: 8,
+    maxWidth: 180,
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+    verticalAlign: 'middle',
+    whiteSpace: 'nowrap',
+};
+const toFileToken = (name) => {
+    return `${no_react_1.NoReactInternals.FILE_TOKEN}${name
+        .split('/')
+        .map(encodeURIComponent)
+        .join('/')}`;
+};
+const toStaticFileUrl = (fileToken) => {
+    return `${window.remotion_staticBase}/${fileToken.slice(no_react_1.NoReactInternals.FILE_TOKEN.length)}`;
+};
+const isStaticFileAssetValue = (value) => {
+    return (typeof value === 'string' && value.startsWith(no_react_1.NoReactInternals.FILE_TOKEN));
+};
+exports.isStaticFileAssetValue = isStaticFileAssetValue;
+const TimelineStaticFileAssetField = ({ propStatus, effectiveValue, onSave, onDragValueChange, onDragEnd, }) => {
+    const staticFiles = (0, use_static_files_1.useStaticFiles)();
+    const current = String(effectiveValue !== null && effectiveValue !== void 0 ? effectiveValue : '');
+    const onSelect = (0, react_1.useCallback)((sourceValue, previewValue) => {
+        if (sourceValue === propStatus.codeValue) {
+            return;
+        }
+        onDragValueChange(previewValue);
+        onSave(sourceValue).finally(() => {
+            onDragEnd();
+        });
+    }, [propStatus.codeValue, onDragValueChange, onSave, onDragEnd]);
+    const upload = (0, react_1.useCallback)(async () => {
+        const [file] = await (0, import_assets_1.pickFilesToImport)({ multiple: false });
+        if (!file) {
+            return;
+        }
+        const existing = staticFiles.find((candidate) => candidate.name === file.name);
+        if (existing && existing.sizeInBytes !== file.size) {
+            (0, NotificationCenter_1.showNotification)(`File with name ${file.name} already exists and is different`, 4000);
+            return;
+        }
+        try {
+            if (!existing) {
+                await (0, write_static_file_1.writeStaticFile)({
+                    contents: await file.arrayBuffer(),
+                    filePath: file.name,
+                });
+            }
+            const fileToken = toFileToken(file.name);
+            onSelect(fileToken, toStaticFileUrl(fileToken));
+            if (!existing) {
+                (0, NotificationCenter_1.showNotification)(`Created ${file.name} in public folder`, 3000);
+            }
+        }
+        catch (error) {
+            (0, NotificationCenter_1.showNotification)(`Could not upload asset: ${error instanceof Error ? error.message : String(error)}`, 4000);
+        }
+    }, [onSelect, staticFiles]);
+    const items = (0, react_1.useMemo)(() => {
+        const publicFileItems = staticFiles.map((file) => {
+            const fileToken = toFileToken(file.name);
+            return {
+                type: 'item',
+                id: fileToken,
+                value: fileToken,
+                label: file.name,
+                onClick: () => onSelect(fileToken, file.src),
+                keyHint: null,
+                leftItem: fileToken === current ? jsx_runtime_1.jsx(Checkmark_1.Checkmark, {}) : null,
+                subMenu: null,
+                quickSwitcherLabel: null,
+            };
+        });
+        return [
+            ...publicFileItems,
+            { type: 'divider', id: 'upload-asset-divider' },
+            {
+                type: 'item',
+                id: 'upload-asset',
+                value: 'upload-asset',
+                label: 'Upload…',
+                onClick: () => {
+                    upload().catch(() => undefined);
+                },
+                keyHint: null,
+                leftItem: null,
+                subMenu: null,
+                quickSwitcherLabel: null,
+                disabled: window.remotion_isReadOnlyStudio,
+            },
+        ];
+    }, [current, onSelect, staticFiles, upload]);
+    return (jsx_runtime_1.jsx(ComboBox_1.Combobox, { small: true, title: current, selectedId: current, values: items, style: comboboxStyle }));
+};
+const TimelineAssetField = (props) => {
+    var _a;
+    if (props.field.fieldSchema.type !== 'asset') {
+        throw new Error('TimelineAssetField rendered for non-asset field');
+    }
+    if (!(0, exports.isStaticFileAssetValue)(props.effectiveValue)) {
+        const remote = String((_a = props.effectiveValue) !== null && _a !== void 0 ? _a : '');
+        return (jsx_runtime_1.jsx("span", { style: remoteAssetStyle, title: remote, children: remote }));
+    }
+    return jsx_runtime_1.jsx(TimelineStaticFileAssetField, { ...props });
+};
+exports.TimelineAssetField = TimelineAssetField;

package/dist/components/Timeline/TimelineExpandedSection.js

@@ -57,6 +57,7 @@ const TimelineExpandedSection = ({ sequence, validatedLocation, nodePathInfo, ne
         sequence,
         nodePathInfo,
         includeTextContent: false,
+        includeSourceControls: false,
     });
     const flat = (0, react_1.useMemo)(() => (0, timeline_layout_1.flattenVisibleTreeNodes)({ nodes: filteredTree, getIsExpanded }), [filteredTree, getIsExpanded]);
     const expandedHeight = (0, react_1.useMemo)(() => {

package/dist/components/Timeline/TimelineFieldLabel.js

@@ -6,6 +6,7 @@ const react_1 = require("react");
 const colors_1 = require("../../helpers/colors");
 const timeline_layout_1 = require("../../helpers/timeline-layout");
 const timeline_field_row_layout_1 = require("./timeline-field-row-layout");
+const TimelineRowLayoutContext_1 = require("./TimelineRowLayoutContext");
 const TimelineSelection_1 = require("./TimelineSelection");
 const fieldNameBase = {
     fontSize: 12,
@@ -18,12 +19,13 @@ const fieldNameBase = {
     minWidth: 0,
 };
 const TimelineFieldLabel = ({ rowDepth, selected, label, stacked = false }) => {
+    const { basePadding } = (0, react_1.useContext)(TimelineRowLayoutContext_1.TimelineRowLayoutContext);
     const labelRowStyle = (0, react_1.useMemo)(() => ({
-        ...(0, timeline_field_row_layout_1.getTimelineFieldLabelRowStyle)(rowDepth),
+        ...(0, timeline_field_row_layout_1.getTimelineFieldLabelRowStyle)(rowDepth, basePadding),
         ...(0, TimelineSelection_1.getTimelineSelectedLabelStyle)(selected, true),
         ...(stacked ? { flex: `0 0 ${timeline_layout_1.SCHEMA_FIELD_ROW_HEIGHT}px` } : null),
         alignSelf: 'stretch',
-    }), [rowDepth, selected, stacked]);
+    }), [basePadding, rowDepth, selected, stacked]);
     const fieldNameStyle = (0, react_1.useMemo)(() => ({
         ...fieldNameBase,
         color: (0, TimelineSelection_1.getTimelineColor)(selected, true),

package/dist/components/Timeline/TimelineKeyframeControls.js

@@ -114,6 +114,7 @@ const resolveKeyframeControlTarget = ({ nodePathInfo, tracks, propStatuses, getD
         getEffectDragOverrides,
         propStatuses,
         includeTextContent: false,
+        includeSourceControls: false,
     });
     const fieldNode = findFieldNode(tree, (0, timeline_node_path_key_1.timelineNodePathInfoToKey)(nodePathInfo));
     if (fieldNode === null || fieldNode.field === null) {

package/dist/components/Timeline/TimelinePrimitiveFieldValue.js

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TimelinePrimitiveFieldValue = exports.isTimelinePrimitiveFieldInfo = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const TimelineAssetField_1 = require("./TimelineAssetField");
 const TimelineBooleanField_1 = require("./TimelineBooleanField");
 const TimelineColorField_1 = require("./TimelineColorField");
 const TimelineEnumField_1 = require("./TimelineEnumField");
@@ -60,6 +61,9 @@ const TimelinePrimitiveFieldValue = ({ field, onSave, onDragValueChange, onDragE
     if (field.typeName === 'font-family') {
         return (jsx_runtime_1.jsx("span", { style: inlineWrapper, children: jsx_runtime_1.jsx(TimelineFontFamilyField_1.TimelineFontFamilyField, { effectiveValue: effectiveValue, field: field, onDragEnd: onDragEnd, onDragValueChange: onDragValueChange, onSave: onSave, propStatus: propStatus }) }));
     }
+    if (field.typeName === 'asset') {
+        return (jsx_runtime_1.jsx("span", { style: inlineWrapper, children: jsx_runtime_1.jsx(TimelineAssetField_1.TimelineAssetField, { effectiveValue: effectiveValue, field: field, onDragEnd: onDragEnd, onDragValueChange: onDragValueChange, onSave: onSave, propStatus: propStatus }) }));
+    }
     throw new Error(`Unsupported field type: ${field.typeName}`);
 };
 exports.TimelinePrimitiveFieldValue = TimelinePrimitiveFieldValue;

package/dist/components/Timeline/TimelineRowChrome.js

@@ -6,6 +6,7 @@ const react_1 = require("react");
 const colors_1 = require("../../helpers/colors");
 const Padder_1 = require("./Padder");
 const timeline_row_layout_1 = require("./timeline-row-layout");
+const TimelineRowLayoutContext_1 = require("./TimelineRowLayoutContext");
 const TimelineSelection_1 = require("./TimelineSelection");
 const rowBase = {
     alignItems: 'stretch',
@@ -19,27 +20,28 @@ const leftChromeStyle = {
 };
 const keyframeControlsColumnBaseStyle = {
     alignItems: 'center',
-    boxSizing: 'border-box',
     display: 'flex',
     flexShrink: 0,
     justifyContent: 'flex-start',
-    paddingLeft: timeline_row_layout_1.TIMELINE_ROW_BASE_PADDING,
 };
 const TimelineRowChrome = ({ depth, eye, keyframeControls, arrow, children, style, selected, selectable, selectionItem, onSelect, showSelectedBackground, containsSelection, outerHeight, onDragLeave, onDragOver, onDrop, onDoubleClick, }) => {
     const ref = (0, react_1.useRef)(null);
+    const { basePadding, keyframeControlsPadding } = (0, react_1.useContext)(TimelineRowLayoutContext_1.TimelineRowLayoutContext);
     const indentWidth = (0, timeline_row_layout_1.getTimelineRowIndentWidth)(depth);
     (0, TimelineSelection_1.useTimelineFocusableItem)(selectionItem, ref);
     const keyframeControlsColumnStyle = (0, react_1.useMemo)(() => ({
         ...keyframeControlsColumnBaseStyle,
-        width: (0, timeline_row_layout_1.getTimelineRowLeftChromeWidth)(depth),
-    }), [depth]);
+        boxSizing: keyframeControlsPadding === 0 ? undefined : 'border-box',
+        paddingLeft: keyframeControlsPadding,
+        width: (0, timeline_row_layout_1.getTimelineRowLeftChromeWidth)(depth, basePadding),
+    }), [basePadding, depth, keyframeControlsPadding]);
     const chromeColumnStyle = (0, react_1.useMemo)(() => ({
         alignItems: 'center',
         alignSelf: 'stretch',
         display: 'flex',
         flexShrink: 0,
-        paddingLeft: timeline_row_layout_1.TIMELINE_ROW_BASE_PADDING,
-    }), []);
+        paddingLeft: basePadding,
+    }), [basePadding]);
     const onPointerDown = (0, react_1.useCallback)((e) => {
         if (e.button === 0) {
             e.stopPropagation();

package/dist/components/Timeline/TimelineRowLayoutContext.d.ts

@@ -0,0 +1,7 @@
+type TimelineRowLayout = {
+    readonly basePadding: number;
+    readonly keyframeControlsPadding: number;
+};
+export declare const INSPECTOR_TIMELINE_ROW_LAYOUT: TimelineRowLayout;
+export declare const TimelineRowLayoutContext: import("react").Context<TimelineRowLayout>;
+export {};

package/dist/components/Timeline/TimelineRowLayoutContext.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TimelineRowLayoutContext = exports.INSPECTOR_TIMELINE_ROW_LAYOUT = void 0;
+const react_1 = require("react");
+const timeline_row_layout_1 = require("./timeline-row-layout");
+exports.INSPECTOR_TIMELINE_ROW_LAYOUT = {
+    basePadding: timeline_row_layout_1.INSPECTOR_ROW_BASE_PADDING,
+    keyframeControlsPadding: 0,
+};
+exports.TimelineRowLayoutContext = (0, react_1.createContext)({
+    basePadding: timeline_row_layout_1.TIMELINE_ROW_BASE_PADDING,
+    keyframeControlsPadding: timeline_row_layout_1.TIMELINE_ROW_BASE_PADDING,
+});

package/dist/components/Timeline/TimelineSelection.js

@@ -407,6 +407,7 @@ const getSelectableTimelineItems = ({ getDragOverrides, getEffectDragOverrides,
             getEffectDragOverrides,
             propStatuses,
             includeTextContent: false,
+            includeSourceControls: false,
         });
         const filteredTree = (0, timeline_expanded_filter_1.filterTimelineExpandedTree)({
             nodes: tree,

package/dist/components/Timeline/TimelineSequenceItem.js

@@ -88,6 +88,7 @@ const TimelineSequenceExpandArrow = ({ disabled, isExpanded, nodePathInfo, onTog
         sequence,
         nodePathInfo,
         includeTextContent: false,
+        includeSourceControls: false,
     });
     if (filteredTree.length === 0) {
         return jsx_runtime_1.jsx(TimelineExpandArrowButton_1.TimelineExpandArrowSpacer, {});

package/dist/components/Timeline/get-sequence-context-menu-items.js

@@ -31,15 +31,15 @@ const getSequenceContextMenuItems = ({ assetLinkInfo, canOpenInEditor, deleteDis
         editorName
             ? {
                 type: 'item',
-                id: 'show-in-editor',
+                id: 'open-in-editor',
                 keyHint: null,
-                label: `Show in ${editorName}`,
+                label: `Open in ${editorName}`,
                 leftItem: null,
                 disabled: !canOpenInEditor || !originalLocation,
                 onClick: openInEditor,
                 quickSwitcherLabel: null,
                 subMenu: null,
-                value: 'show-in-editor',
+                value: 'open-in-editor',
             }
             : null,
         {

package/dist/components/Timeline/sequence-props-subscription-store.js

@@ -4,10 +4,11 @@ exports.acquireSequencePropsSubscription = void 0;
 const studio_shared_1 = require("@remotion/studio-shared");
 const remotion_1 = require("remotion");
 const call_api_1 = require("../call-api");
-const makeKey = ({ fileName, line, column, componentIdentity, sequenceKeys, effectKeys, videoConfigValues, }) => `${fileName}\0${line}\0${column}\0${componentIdentity !== null && componentIdentity !== void 0 ? componentIdentity : ''}\0${sequenceKeys.join('\0')}\0${effectKeys.map((keys) => keys.join('\0')).join('\0\0')}\0${JSON.stringify(videoConfigValues)}`;
+const makeKey = ({ fileName, line, column, componentIdentity, sequenceKeys, assetKeys, effectKeys, videoConfigValues, }) => `${fileName}\0${line}\0${column}\0${componentIdentity !== null && componentIdentity !== void 0 ? componentIdentity : ''}\0${sequenceKeys.join('\0')}\0${assetKeys.join('\0')}\0${effectKeys.map((keys) => keys.join('\0')).join('\0\0')}\0${JSON.stringify(videoConfigValues)}`;
 const entries = new Map();
 const acquireSequencePropsSubscription = ({ fileName, line, column, schema, componentIdentity, effects, nodePath, clientId, applyOnce, applyEach, videoConfigValues, }) => {
     const sequenceKeys = (0, studio_shared_1.getAllSchemaKeys)(schema);
+    const assetKeys = (0, studio_shared_1.getAssetSchemaKeys)(schema);
     const effectKeys = effects.map((effect) => (0, studio_shared_1.getAllSchemaKeys)(effect));
     const key = makeKey({
         fileName,
@@ -15,6 +16,7 @@ const acquireSequencePropsSubscription = ({ fileName, line, column, schema, comp
         column,
         componentIdentity,
         sequenceKeys,
+        assetKeys,
         effectKeys,
         videoConfigValues,
     });
@@ -27,6 +29,7 @@ const acquireSequencePropsSubscription = ({ fileName, line, column, schema, comp
             nodePath,
             componentIdentity,
             keys: (0, studio_shared_1.getAllSchemaKeys)(schema),
+            assetKeys,
             effects: effectKeys,
             clientId,
             videoConfigValues,
@@ -88,6 +91,7 @@ const acquireSequencePropsSubscription = ({ fileName, line, column, schema, comp
                     nodePath: result.nodePath,
                     clientId: acquired.clientId,
                     sequenceKeys,
+                    assetKeys,
                     effectKeys,
                 });
             })

package/dist/components/Timeline/timeline-asset-link.d.ts

@@ -1,3 +1,4 @@
+import type { SequenceControls } from 'remotion';
 type LinkInfo = {
     kind: 'local';
     assetPath: string;
@@ -8,6 +9,11 @@ type LinkInfo = {
     title: string;
 } | null;
 export type TimelineAssetLinkInfo = Exclude<LinkInfo, null>;
+export declare const splitRemoteSourceForMiddleEllipsis: (src: string) => {
+    leading: string;
+    trailing: string;
+};
+export declare const getTimelineAssetSrcFromSchema: (controls: SequenceControls | null) => string | null;
 export declare const getTimelineAssetLinkInfo: (src: string) => LinkInfo;
 export declare const openTimelineAssetLink: (linkInfo: TimelineAssetLinkInfo, selectAsset: (asset: string) => void) => void;
 export {};

package/dist/components/Timeline/timeline-asset-link.js

@@ -1,7 +1,33 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.openTimelineAssetLink = exports.getTimelineAssetLinkInfo = void 0;
+exports.openTimelineAssetLink = exports.getTimelineAssetLinkInfo = exports.getTimelineAssetSrcFromSchema = exports.splitRemoteSourceForMiddleEllipsis = void 0;
+const studio_shared_1 = require("@remotion/studio-shared");
 const url_state_1 = require("../../helpers/url-state");
+const splitRemoteSourceForMiddleEllipsis = (src) => {
+    const protocolEnd = src.indexOf('://');
+    const minimumSlashIndex = protocolEnd === -1 ? 0 : protocolEnd + 3;
+    const lastSlash = src.lastIndexOf('/');
+    if (lastSlash >= minimumSlashIndex && lastSlash < src.length - 1) {
+        return {
+            leading: src.slice(0, lastSlash + 1),
+            trailing: src.slice(lastSlash + 1),
+        };
+    }
+    const middle = Math.ceil(src.length / 2);
+    return {
+        leading: src.slice(0, middle),
+        trailing: src.slice(middle),
+    };
+};
+exports.splitRemoteSourceForMiddleEllipsis = splitRemoteSourceForMiddleEllipsis;
+const getTimelineAssetSrcFromSchema = (controls) => {
+    if (!controls || !(0, studio_shared_1.getAssetSchemaKeys)(controls.schema).includes('src')) {
+        return null;
+    }
+    const { src } = controls.currentRuntimeValueDotNotation;
+    return typeof src === 'string' ? src : null;
+};
+exports.getTimelineAssetSrcFromSchema = getTimelineAssetSrcFromSchema;
 const getTimelineAssetLinkInfo = (src) => {
     const staticBase = typeof window === 'undefined' ? null : window.remotion_staticBase;
     if (staticBase && src.startsWith(staticBase + '/')) {

package/dist/components/Timeline/timeline-field-display-utils.js

@@ -236,6 +236,7 @@ const formatTimelineFieldValueForDisplay = ({ fieldSchema, value, }) => {
             return ((_e = formatUvCoordinateTimelineFieldValueForDisplay({ fieldSchema, value })) !== null && _e !== void 0 ? _e : formatUnknownTimelineValueForDisplay(value));
         case 'text-content':
             return String(value);
+        case 'asset':
         case 'array':
         case 'boolean':
         case 'color':

package/dist/components/Timeline/timeline-field-row-layout.d.ts

@@ -1,4 +1,4 @@
 import type React from 'react';
-export declare const getTimelineFieldLabelRowStyle: (depth: number) => React.CSSProperties;
+export declare const getTimelineFieldLabelRowStyle: (depth: number, basePadding?: number | undefined) => React.CSSProperties;
 export declare const timelineFieldValueColumnStyle: React.CSSProperties;
 export declare const timelineStackedFieldContentStyle: React.CSSProperties;

package/dist/components/Timeline/timeline-field-row-layout.js

@@ -3,9 +3,9 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.timelineStackedFieldContentStyle = exports.timelineFieldValueColumnStyle = exports.getTimelineFieldLabelRowStyle = void 0;
 const timeline_layout_1 = require("../../helpers/timeline-layout");
 const timeline_row_layout_1 = require("./timeline-row-layout");
-const getTimelineFieldLabelRowStyle = (depth) => {
+const getTimelineFieldLabelRowStyle = (depth, basePadding) => {
     return {
-        flex: `0 0 ${(0, timeline_row_layout_1.getTimelineFieldLabelFlexBasis)(depth)}`,
+        flex: `0 0 ${(0, timeline_row_layout_1.getTimelineFieldLabelFlexBasis)(depth, basePadding)}`,
         minWidth: 0,
         display: 'flex',
         flexDirection: 'row',

package/dist/components/Timeline/timeline-row-layout.d.ts

@@ -1,11 +1,12 @@
 export declare const TIMELINE_ROW_BASE_PADDING = 10;
+export declare const INSPECTOR_ROW_BASE_PADDING = 5;
 export declare const TIMELINE_EYE_COLUMN_WIDTH = 22;
 export declare const TIMELINE_ARROW_COLUMN_WIDTH = 16;
 export declare const TIMELINE_KEYFRAME_CONTROLS_WIDTH = 38;
 export declare const TIMELINE_FIELD_LABEL_EXTRA_WIDTH = 15;
 export declare const getTimelineRowIndentWidth: (depth: number) => number;
-export declare const getTimelineRowLeftChromeWidth: (depth: number) => number;
-export declare const getTimelineFieldLabelFlexBasis: (depth: number) => string;
+export declare const getTimelineRowLeftChromeWidth: (depth: number, basePadding?: number) => number;
+export declare const getTimelineFieldLabelFlexBasis: (depth: number, basePadding?: number) => string;
 export declare const getExpandedRowDepth: ({ nestedDepth, treeDepth, }: {
     nestedDepth: number;
     treeDepth: number;

package/dist/components/Timeline/timeline-row-layout.js

@@ -1,8 +1,9 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getExpandedRowDepth = exports.getTimelineFieldLabelFlexBasis = exports.getTimelineRowLeftChromeWidth = exports.getTimelineRowIndentWidth = exports.TIMELINE_FIELD_LABEL_EXTRA_WIDTH = exports.TIMELINE_KEYFRAME_CONTROLS_WIDTH = exports.TIMELINE_ARROW_COLUMN_WIDTH = exports.TIMELINE_EYE_COLUMN_WIDTH = exports.TIMELINE_ROW_BASE_PADDING = void 0;
+exports.getExpandedRowDepth = exports.getTimelineFieldLabelFlexBasis = exports.getTimelineRowLeftChromeWidth = exports.getTimelineRowIndentWidth = exports.TIMELINE_FIELD_LABEL_EXTRA_WIDTH = exports.TIMELINE_KEYFRAME_CONTROLS_WIDTH = exports.TIMELINE_ARROW_COLUMN_WIDTH = exports.TIMELINE_EYE_COLUMN_WIDTH = exports.INSPECTOR_ROW_BASE_PADDING = exports.TIMELINE_ROW_BASE_PADDING = void 0;
 const timeline_indent_1 = require("./timeline-indent");
 exports.TIMELINE_ROW_BASE_PADDING = 10;
+exports.INSPECTOR_ROW_BASE_PADDING = 5;
 exports.TIMELINE_EYE_COLUMN_WIDTH = 22;
 exports.TIMELINE_ARROW_COLUMN_WIDTH = 16;
 exports.TIMELINE_KEYFRAME_CONTROLS_WIDTH = 38;
@@ -11,15 +12,15 @@ const getTimelineRowIndentWidth = (depth) => {
     return depth * timeline_indent_1.TIMELINE_INDENT;
 };
 exports.getTimelineRowIndentWidth = getTimelineRowIndentWidth;
-const getTimelineRowLeftChromeWidth = (depth) => {
-    return (exports.TIMELINE_ROW_BASE_PADDING +
+const getTimelineRowLeftChromeWidth = (depth, basePadding = exports.TIMELINE_ROW_BASE_PADDING) => {
+    return (basePadding +
         exports.TIMELINE_EYE_COLUMN_WIDTH +
         (0, exports.getTimelineRowIndentWidth)(depth) +
         exports.TIMELINE_ARROW_COLUMN_WIDTH);
 };
 exports.getTimelineRowLeftChromeWidth = getTimelineRowLeftChromeWidth;
-const getTimelineFieldLabelFlexBasis = (depth) => {
-    return `calc(50% - ${(0, exports.getTimelineRowLeftChromeWidth)(depth) - exports.TIMELINE_FIELD_LABEL_EXTRA_WIDTH}px)`;
+const getTimelineFieldLabelFlexBasis = (depth, basePadding = exports.TIMELINE_ROW_BASE_PADDING) => {
+    return `calc(50% - ${(0, exports.getTimelineRowLeftChromeWidth)(depth, basePadding) - exports.TIMELINE_FIELD_LABEL_EXTRA_WIDTH}px)`;
 };
 exports.getTimelineFieldLabelFlexBasis = getTimelineFieldLabelFlexBasis;
 const getExpandedRowDepth = ({ nestedDepth, treeDepth, }) => {

package/dist/components/Timeline/use-expanded-track-keyframe-rows.js

@@ -45,6 +45,7 @@ const useExpandedTrackKeyframeRows = ({ sequence, nodePathInfo, keyframeDisplayO
         getEffectDragOverrides,
         propStatuses,
         includeTextContent: false,
+        includeSourceControls: false,
     }), [
         propStatuses,
         getDragOverrides,

package/dist/components/Timeline/use-timeline-expanded-tree.d.ts

@@ -1,9 +1,10 @@
 import { type TSequence } from 'remotion';
 import type { SequenceNodePathInfo } from '../../helpers/get-timeline-sequence-sort-key';
-export declare const useTimelineExpandedTree: ({ sequence, nodePathInfo, includeTextContent, }: {
+export declare const useTimelineExpandedTree: ({ sequence, nodePathInfo, includeTextContent, includeSourceControls, }: {
     readonly sequence: TSequence;
     readonly nodePathInfo: SequenceNodePathInfo;
     readonly includeTextContent: boolean;
+    readonly includeSourceControls: boolean;
 }) => {
     filteredTree: import("../../helpers/timeline-layout").TimelineTreeNode[];
     getIsExpanded: import("../ExpandedTracksProvider").GetIsExpanded;

package/dist/components/Timeline/use-timeline-expanded-tree.js

@@ -8,7 +8,7 @@ const ExpandedTracksProvider_1 = require("../ExpandedTracksProvider");
 const get_node_keyframes_1 = require("./get-node-keyframes");
 const timeline_expanded_filter_1 = require("./timeline-expanded-filter");
 const TimelineSelection_1 = require("./TimelineSelection");
-const useTimelineExpandedTree = ({ sequence, nodePathInfo, includeTextContent, }) => {
+const useTimelineExpandedTree = ({ sequence, nodePathInfo, includeTextContent, includeSourceControls, }) => {
     const { getIsExpanded } = (0, react_1.useContext)(ExpandedTracksProvider_1.ExpandedTracksGetterContext);
     const { toggleTrack } = (0, react_1.useContext)(ExpandedTracksProvider_1.ExpandedTracksSetterContext);
     const { propStatuses: visualModePropStatuses } = (0, react_1.useContext)(remotion_1.Internals.VisualModePropStatusesContext);
@@ -21,6 +21,7 @@ const useTimelineExpandedTree = ({ sequence, nodePathInfo, includeTextContent, }
         getEffectDragOverrides,
         propStatuses: visualModePropStatuses,
         includeTextContent,
+        includeSourceControls,
     }), [
         sequence,
         nodePathInfo,
@@ -28,6 +29,7 @@ const useTimelineExpandedTree = ({ sequence, nodePathInfo, includeTextContent, }
         getEffectDragOverrides,
         visualModePropStatuses,
         includeTextContent,
+        includeSourceControls,
     ]);
     const selectedRowKeys = (0, react_1.useMemo)(() => (0, timeline_expanded_filter_1.getSelectedTimelineExpandedRowKeys)(selectedItems), [selectedItems]);
     const filteredTree = (0, react_1.useMemo)(() => (0, timeline_expanded_filter_1.filterTimelineExpandedTree)({

package/dist/components/Timeline/use-timeline-height.js

@@ -38,6 +38,7 @@ const useTimelineHeight = ({ shown, hasBeenCut, }) => {
                     getEffectDragOverrides,
                     propStatuses,
                     includeTextContent: false,
+                    includeSourceControls: false,
                 });
                 const filteredTree = (0, timeline_expanded_filter_1.filterTimelineExpandedTree)({
                     nodes: tree,

package/dist/components/import-assets.d.ts

@@ -33,6 +33,11 @@ export declare const getElementPositionForDrop: ({ dimensions, dropPosition, }:
     dimensions: Dimensions | null;
     dropPosition: InsertElementDropPosition | null;
 }) => InsertableCompositionElementPosition | null;
+export declare const getCompositionPositionForDrop: ({ compositionDimensions, destinationDimensions, dropPosition, }: {
+    compositionDimensions: Dimensions;
+    destinationDimensions: Dimensions | null;
+    dropPosition: InsertElementDropPosition | null;
+}) => InsertableCompositionElementPosition | null;
 export declare const getComponentDimensions: (component: {
     componentName: string;
     dimensions?: import("@remotion/studio-shared").ComponentDimensions | undefined;
@@ -40,7 +45,9 @@ export declare const getComponentDimensions: (component: {
     importPath: string;
     props: ComponentProp[];
 }) => Dimensions | null;
-export declare const pickFilesToImport: () => Promise<File[]>;
+export declare const pickFilesToImport: ({ multiple, }?: {
+    readonly multiple?: boolean | undefined;
+}) => Promise<File[]>;
 export declare const importAssets: ({ compositionFile, compositionId, dropPosition, files, }: {
     compositionFile: string;
     compositionId: string;
@@ -76,10 +83,11 @@ export declare const insertComponent: ({ component, compositionFile, composition
     compositionId: string;
     dropPosition: InsertElementDropPosition | null;
 }) => Promise<void>;
-export declare const insertComposition: ({ composition, compositionFile, compositionId, dropPosition, }: {
+export declare const insertComposition: ({ composition, compositionFile, compositionId, destinationDimensions, dropPosition, }: {
     composition: CompositionDragData;
     compositionFile: string;
     compositionId: string;
+    destinationDimensions: Dimensions | null;
     dropPosition: InsertElementDropPosition | null;
 }) => Promise<void>;
 export declare const insertElement: ({ compositionFile, compositionId, dropPosition, element, }: {