@remotion/studio 4.0.490 → 4.0.492

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, }) => `${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')}`;
+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, }) => {
+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,7 +16,9 @@ const acquireSequencePropsSubscription = ({ fileName, line, column, schema, comp
         column,
         componentIdentity,
         sequenceKeys,
+        assetKeys,
         effectKeys,
+        videoConfigValues,
     });
     let entry = entries.get(key);
     if (!entry) {
@@ -26,8 +29,10 @@ const acquireSequencePropsSubscription = ({ fileName, line, column, schema, comp
             nodePath,
             componentIdentity,
             keys: (0, studio_shared_1.getAllSchemaKeys)(schema),
+            assetKeys,
             effects: effectKeys,
             clientId,
+            videoConfigValues,
         });
         const created = {
             refCount: 0,
@@ -86,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,3 +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

@@ -1,11 +1,11 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.timelineFieldValueColumnStyle = exports.getTimelineFieldLabelRowStyle = void 0;
+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',
@@ -22,3 +22,10 @@ exports.timelineFieldValueColumnStyle = {
     minWidth: 0,
     paddingRight: timeline_layout_1.EXPANDED_SECTION_PADDING_RIGHT,
 };
+exports.timelineStackedFieldContentStyle = {
+    alignSelf: 'stretch',
+    display: 'flex',
+    flex: 1,
+    flexDirection: 'column',
+    minWidth: 0,
+};

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

@@ -1,11 +1,12 @@
-export declare const TIMELINE_ROW_BASE_PADDING = 5;
+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 = 5;
+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-sequence-props-subscription.js

@@ -18,6 +18,7 @@ const useSequencePropsSubscription = ({ originalLocation, overrideId, componentI
     const overrideIdToNodePathMappingsRef = (0, react_1.useRef)(overrideIdToNodePathMappings);
     overrideIdToNodePathMappingsRef.current = overrideIdToNodePathMappings;
     const clientId = state.type === 'connected' ? state.clientId : undefined;
+    const videoConfig = remotion_1.Internals.useUnsafeVideoConfig();
     const effectsSignature = (0, react_1.useMemo)(() => effects.map((effect) => (0, studio_shared_1.getAllSchemaKeys)(effect).join('\0')).join('\0\0'), [effects]);
     const validatedLocation = (0, react_1.useMemo)(() => {
         var _a;
@@ -41,7 +42,8 @@ const useSequencePropsSubscription = ({ originalLocation, overrideId, componentI
             !locationSource ||
             !locationLine ||
             locationColumn === null ||
-            !schema) {
+            !schema ||
+            videoConfig === null) {
             return;
         }
         const nodePathAtResubscribe = (_a = overrideIdToNodePathMappingsRef.current[overrideId]) !== null && _a !== void 0 ? _a : null;
@@ -54,6 +56,12 @@ const useSequencePropsSubscription = ({ originalLocation, overrideId, componentI
             effects,
             nodePath: (_b = nodePathAtResubscribe === null || nodePathAtResubscribe === void 0 ? void 0 : nodePathAtResubscribe.nodePath) !== null && _b !== void 0 ? _b : null,
             clientId,
+            videoConfigValues: {
+                durationInFrames: videoConfig.durationInFrames,
+                fps: videoConfig.fps,
+                height: videoConfig.height,
+                width: videoConfig.width,
+            },
             applyOnce: (result) => {
                 if (!result.success) {
                     return;
@@ -97,6 +105,7 @@ const useSequencePropsSubscription = ({ originalLocation, overrideId, componentI
         schema,
         setPropStatuses,
         setOverrideIdToNodePath,
+        videoConfig,
     ]);
 };
 exports.useSequencePropsSubscription = useSequencePropsSubscription;

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

@@ -29,6 +29,15 @@ export declare const getAssetElementFromPath: (assetPath: string) => {
     } | null;
     position: InsertableCompositionElementPosition | null;
 } | null;
+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;
@@ -36,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;
@@ -72,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, }: {

package/dist/components/import-assets.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.insertElement = exports.insertComposition = exports.insertComponent = exports.insertExistingAssets = exports.insertRemoteAudio = exports.importRemoteAsset = exports.importAssets = exports.pickFilesToImport = exports.getComponentDimensions = exports.getAssetElementFromPath = exports.getAssetElement = void 0;
+exports.insertElement = exports.insertComposition = exports.insertComponent = exports.insertExistingAssets = exports.insertRemoteAudio = exports.importRemoteAsset = exports.importAssets = exports.pickFilesToImport = exports.getComponentDimensions = exports.getCompositionPositionForDrop = exports.getElementPositionForDrop = exports.getAssetElementFromPath = exports.getAssetElement = void 0;
 const media_utils_1 = require("@remotion/media-utils");
 const studio_shared_1 = require("@remotion/studio-shared");
 const remotion_1 = require("remotion");
@@ -174,6 +174,26 @@ const getCenteredPosition = ({ dimensions, dropPosition, }) => {
         y: dropPosition.centerY - dimensions.height / 2,
     };
 };
+const getElementPositionForDrop = ({ dimensions, dropPosition, }) => {
+    if (dimensions === null) {
+        return null;
+    }
+    return getCenteredPosition({ dimensions, dropPosition });
+};
+exports.getElementPositionForDrop = getElementPositionForDrop;
+const getCompositionPositionForDrop = ({ compositionDimensions, destinationDimensions, dropPosition, }) => {
+    // No translation makes an equal-sized composition fill the destination.
+    if (destinationDimensions !== null &&
+        compositionDimensions.width === destinationDimensions.width &&
+        compositionDimensions.height === destinationDimensions.height) {
+        return null;
+    }
+    return getCenteredPosition({
+        dimensions: compositionDimensions,
+        dropPosition,
+    });
+};
+exports.getCompositionPositionForDrop = getCompositionPositionForDrop;
 const getComponentPropNumber = (props, name) => {
     const prop = props.find((p) => p.name === name);
     return typeof (prop === null || prop === void 0 ? void 0 : prop.value) === 'number' ? prop.value : null;
@@ -306,11 +326,11 @@ const getAssetElementFromStaticAsset = async (assetPath) => {
     }
     return (0, exports.getAssetElementFromPath)(assetPath);
 };
-const pickFilesToImport = () => {
+const pickFilesToImport = ({ multiple = true, } = {}) => {
     return new Promise((resolve) => {
         const input = document.createElement('input');
         input.type = 'file';
-        input.multiple = true;
+        input.multiple = multiple;
         input.style.display = 'none';
         let didResolve = false;
         const resolveOnce = (files) => {
@@ -577,7 +597,7 @@ const serializeResolvedPropsForSourceCode = (props) => {
         staticBase: window.remotion_staticBase,
     }).serializedString;
 };
-const insertComposition = async ({ composition, compositionFile, compositionId, dropPosition, }) => {
+const insertComposition = async ({ composition, compositionFile, compositionId, destinationDimensions, dropPosition, }) => {
     if (composition.compositionId === compositionId) {
         (0, NotificationCenter_1.showNotification)('Cannot add a composition to itself', 3000);
         return;
@@ -607,8 +627,9 @@ const insertComposition = async ({ composition, compositionFile, compositionId,
                 width: calculated.width,
                 height: calculated.height,
                 serializedResolvedPropsWithCustomSchema: serializeResolvedPropsForSourceCode(calculated.props),
-                position: getCenteredPosition({
-                    dimensions,
+                position: (0, exports.getCompositionPositionForDrop)({
+                    compositionDimensions: dimensions,
+                    destinationDimensions,
                     dropPosition,
                 }),
             },
@@ -630,7 +651,7 @@ const insertElement = async ({ compositionFile, compositionId, dropPosition, ele
             compositionFile,
             compositionId,
             element,
-            position: getCenteredPosition({
+            position: (0, exports.getElementPositionForDrop)({
                 dimensions: element.dimensions,
                 dropPosition,
             }),

package/dist/components/root-composition-menu-items.d.ts

@@ -0,0 +1,8 @@
+import type { SetStateAction } from 'react';
+import type { ModalState } from '../state/modals';
+import type { ComboboxValue } from './NewComposition/ComboBox';
+export declare const getRootCompositionMenuItems: ({ connectionStatus, readOnlyStudio, setSelectedModal, }: {
+    connectionStatus: "connected" | "disconnected" | "init";
+    readOnlyStudio: boolean;
+    setSelectedModal: (value: SetStateAction<ModalState | null>) => void;
+}) => ComboboxValue[];

package/dist/components/root-composition-menu-items.js

@@ -0,0 +1,45 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getRootCompositionMenuItems = void 0;
+const getRootCompositionMenuItems = ({ connectionStatus, readOnlyStudio, setSelectedModal, }) => {
+    return [
+        {
+            id: 'new-root-composition',
+            keyHint: null,
+            label: 'New composition...',
+            leftItem: null,
+            onClick: () => {
+                setSelectedModal({
+                    type: 'new-comp',
+                    folderName: null,
+                    parentName: null,
+                    stack: null,
+                });
+            },
+            quickSwitcherLabel: 'New composition...',
+            subMenu: null,
+            type: 'item',
+            value: 'new-root-composition',
+            disabled: readOnlyStudio || connectionStatus !== 'connected',
+        },
+        {
+            id: 'new-root-folder',
+            keyHint: null,
+            label: 'New folder...',
+            leftItem: null,
+            onClick: () => {
+                setSelectedModal({
+                    type: 'new-folder',
+                    parentName: null,
+                    stack: null,
+                });
+            },
+            quickSwitcherLabel: 'New folder...',
+            subMenu: null,
+            type: 'item',
+            value: 'new-root-folder',
+            disabled: readOnlyStudio || connectionStatus !== 'connected',
+        },
+    ];
+};
+exports.getRootCompositionMenuItems = getRootCompositionMenuItems;

package/dist/components/selected-outline-measurement.d.ts

@@ -48,6 +48,10 @@ export declare const getOutlineSelectionInteraction: ({ shiftKey, metaKey, ctrlK
     readonly metaKey: boolean;
     readonly ctrlKey: boolean;
 }) => TimelineSelectionInteraction;
+export declare const getOutlineDoubleClickAction: ({ button, canOpenInEditor, }: {
+    readonly button: number;
+    readonly canOpenInEditor: boolean;
+}) => "open-in-editor" | null;
 type SelectedEffectFields = {
     allFields: boolean;
     fieldKeys: Set<string>;

package/dist/components/selected-outline-measurement.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.outlinesAreEqual = exports.measureOutlines = exports.getSequencesWithSelectableOutlines = exports.getSelectedTransformOriginInfo = exports.getSelectedEffectFieldsBySequenceKey = exports.getOutlineSelectionInteraction = exports.getSequenceKeysContainingSelection = exports.getSelectedSequenceKeys = exports.getTransformedSvgViewportPoints = exports.getSelectedOutlineRotationPivot = exports.getSelectedOutlineRotationCornerInfo = exports.getRotationCursor = exports.getSelectedOutlineRotationDeltaDegrees = exports.getAngleDegrees = exports.vectorBetween = exports.vectorLength = exports.dot = exports.getOutlineCenter = exports.midpoint = exports.pointToString = void 0;
+exports.outlinesAreEqual = exports.measureOutlines = exports.getSequencesWithSelectableOutlines = exports.getSelectedTransformOriginInfo = exports.getSelectedEffectFieldsBySequenceKey = exports.getOutlineDoubleClickAction = exports.getOutlineSelectionInteraction = exports.getSequenceKeysContainingSelection = exports.getSelectedSequenceKeys = exports.getTransformedSvgViewportPoints = exports.getSelectedOutlineRotationPivot = exports.getSelectedOutlineRotationCornerInfo = exports.getRotationCursor = exports.getSelectedOutlineRotationDeltaDegrees = exports.getAngleDegrees = exports.vectorBetween = exports.vectorLength = exports.dot = exports.getOutlineCenter = exports.midpoint = exports.pointToString = void 0;
 const calculate_timeline_1 = require("../helpers/calculate-timeline");
 const colors_1 = require("../helpers/colors");
 const get_box_quads_ponyfill_1 = require("../helpers/get-box-quads-ponyfill");
@@ -220,6 +220,8 @@ const getOutlineSelectionInteraction = ({ shiftKey, metaKey, ctrlKey, }) => ({
     toggleKey: metaKey || ctrlKey,
 });
 exports.getOutlineSelectionInteraction = getOutlineSelectionInteraction;
+const getOutlineDoubleClickAction = ({ button, canOpenInEditor, }) => button === 0 && canOpenInEditor ? 'open-in-editor' : null;
+exports.getOutlineDoubleClickAction = getOutlineDoubleClickAction;
 const getKeyframeOrEasingField = (item) => {
     if (item.type !== 'keyframe' && item.type !== 'easing') {
         return null;

package/dist/components/selected-outline-types.d.ts

@@ -1,4 +1,4 @@
-import type { CanUpdateSequencePropStatus, CanUpdateSequencePropStatusKeyframed, CanUpdateSequencePropStatusStatic, InteractivitySchema, InteractivitySchemaField, SequencePropsSubscriptionKey, TSequence } from 'remotion';
+import type { CanUpdateSequencePropStatusKeyframed, CanUpdateSequencePropStatusStatic, InteractivitySchema, InteractivitySchemaField, SequencePropsSubscriptionKey, TSequence } from 'remotion';
 import type { SequenceNodePathInfo } from '../helpers/get-timeline-sequence-sort-key';
 import type { ComboboxValue } from './NewComposition/ComboBox';
 import type { SelectedOutlineUvHandle } from './selected-outline-uv';
@@ -18,7 +18,6 @@ export type SelectedOutlineTarget = {
     readonly scaleDrag: SelectedOutlineScaleDragTarget | null;
     readonly rotationDrag: SelectedOutlineRotationDragTarget | null;
     readonly transformOriginDrag: SelectedOutlineTransformOriginDragTarget | null;
-    readonly textEdit: SelectedOutlineTextEditTarget | null;
     readonly uvHandles: readonly SelectedOutlineUvHandle[];
 };
 export type SelectedOutlineEffectDropTarget = {
@@ -26,10 +25,6 @@ export type SelectedOutlineEffectDropTarget = {
     readonly fileName: string;
     readonly nodePath: SequencePropsSubscriptionKey;
 };
-export type SelectedOutlineTextEditTarget = {
-    readonly nodePath: SequencePropsSubscriptionKey;
-    readonly propStatus: CanUpdateSequencePropStatus;
-};
 export type SelectedOutlineDragTarget = {
     readonly propStatus: CanUpdateSequencePropStatusStatic | CanUpdateSequencePropStatusKeyframed;
     readonly clientId: string;