@remotion/studio 4.0.471 → 4.0.472

package/dist/components/Timeline/TimelineUvCoordinateField.js

@@ -57,8 +57,7 @@ const TimelineUvCoordinateField = ({ field, propStatus, effectiveValue, onSave,
     const onXChangeEnd = (0, react_1.useCallback)((newVal) => {
         const currentY = dragY !== null && dragY !== void 0 ? dragY : codeY;
         const newTuple = [newVal, currentY];
-        if (propStatus.canUpdate &&
-            !tuplesEqual(propStatus.codeValue, newTuple)) {
+        if (!tuplesEqual(propStatus.codeValue, newTuple)) {
             onSave(newTuple).finally(() => {
                 setDragX(null);
                 onDragEnd();
@@ -70,17 +69,15 @@ const TimelineUvCoordinateField = ({ field, propStatus, effectiveValue, onSave,
         }
     }, [dragY, codeY, propStatus, onSave, onDragEnd]);
     const onXTextChange = (0, react_1.useCallback)((newVal) => {
-        if (propStatus.canUpdate) {
-            const parsed = Number(newVal);
-            if (!Number.isNaN(parsed)) {
-                const currentY = dragY !== null && dragY !== void 0 ? dragY : codeY;
-                const newTuple = [parsed, currentY];
-                if (!tuplesEqual(propStatus.codeValue, newTuple)) {
-                    setDragX(parsed);
-                    onSave(newTuple).finally(() => {
-                        setDragX(null);
-                    });
-                }
+        const parsed = Number(newVal);
+        if (!Number.isNaN(parsed)) {
+            const currentY = dragY !== null && dragY !== void 0 ? dragY : codeY;
+            const newTuple = [parsed, currentY];
+            if (!tuplesEqual(propStatus.codeValue, newTuple)) {
+                setDragX(parsed);
+                onSave(newTuple).finally(() => {
+                    setDragX(null);
+                });
             }
         }
     }, [propStatus, dragY, codeY, onSave]);
@@ -92,8 +89,7 @@ const TimelineUvCoordinateField = ({ field, propStatus, effectiveValue, onSave,
     const onYChangeEnd = (0, react_1.useCallback)((newVal) => {
         const currentX = dragX !== null && dragX !== void 0 ? dragX : codeX;
         const newTuple = [currentX, newVal];
-        if (propStatus.canUpdate &&
-            !tuplesEqual(propStatus.codeValue, newTuple)) {
+        if (!tuplesEqual(propStatus.codeValue, newTuple)) {
             onSave(newTuple).finally(() => {
                 setDragY(null);
                 onDragEnd();
@@ -105,17 +101,15 @@ const TimelineUvCoordinateField = ({ field, propStatus, effectiveValue, onSave,
         }
     }, [dragX, codeX, propStatus, onSave, onDragEnd]);
     const onYTextChange = (0, react_1.useCallback)((newVal) => {
-        if (propStatus.canUpdate) {
-            const parsed = Number(newVal);
-            if (!Number.isNaN(parsed)) {
-                const currentX = dragX !== null && dragX !== void 0 ? dragX : codeX;
-                const newTuple = [currentX, parsed];
-                if (!tuplesEqual(propStatus.codeValue, newTuple)) {
-                    setDragY(parsed);
-                    onSave(newTuple).finally(() => {
-                        setDragY(null);
-                    });
-                }
+        const parsed = Number(newVal);
+        if (!Number.isNaN(parsed)) {
+            const currentX = dragX !== null && dragX !== void 0 ? dragX : codeX;
+            const newTuple = [currentX, parsed];
+            if (!tuplesEqual(propStatus.codeValue, newTuple)) {
+                setDragY(parsed);
+                onSave(newTuple).finally(() => {
+                    setDragY(null);
+                });
             }
         }
     }, [propStatus, onSave, dragX, codeX]);

package/dist/components/Timeline/call-add-keyframe.js

@@ -13,6 +13,7 @@ const callAddSequenceKeyframe = ({ fileName, nodePath, fieldKey, sourceFrame, va
             fieldKey,
             frame: sourceFrame,
             value,
+            schema,
         }),
         apiCall: () => (0, call_api_1.callApi)('/api/add-sequence-keyframe', {
             fileName,
@@ -37,6 +38,7 @@ const callAddEffectKeyframe = ({ fileName, nodePath, effectIndex, fieldKey, sour
             fieldKey,
             frame: sourceFrame,
             value,
+            schema,
         }),
         apiCall: () => (0, call_api_1.callApi)('/api/add-effect-keyframe', {
             fileName,

package/dist/components/Timeline/get-node-keyframes.d.ts

@@ -1,10 +1,13 @@
-import { type CodeValues, type SequencePropsSubscriptionKey } from 'remotion';
+import { type CodeValues, type GetDragOverrides, type GetEffectDragOverrides, type SequencePropsSubscriptionKey } from 'remotion';
 import type { TimelineTreeNode } from '../../helpers/timeline-layout';
-export declare const getNodeKeyframes: ({ node, nodePath, codeValues, keyframeDisplayOffset, }: {
+export declare const getNodeKeyframes: ({ node, nodePath, codeValues, keyframeDisplayOffset, getDragOverrides, getEffectDragOverrides, timelinePosition, }: {
     node: TimelineTreeNode;
     nodePath: SequencePropsSubscriptionKey;
     codeValues: CodeValues;
     keyframeDisplayOffset: number;
+    getDragOverrides: GetDragOverrides;
+    getEffectDragOverrides: GetEffectDragOverrides;
+    timelinePosition: number;
 }) => {
     frame: number;
     value: unknown;

package/dist/components/Timeline/get-node-keyframes.js

@@ -3,21 +3,54 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.getNodeKeyframes = void 0;
 const remotion_1 = require("remotion");
 const get_timeline_keyframes_1 = require("./get-timeline-keyframes");
-const getNodeKeyframes = ({ node, nodePath, codeValues, keyframeDisplayOffset, }) => {
+const hasOverride = (overrides, key) => Object.prototype.hasOwnProperty.call(overrides, key);
+const withDragOverrideKeyframe = ({ propStatus, keyframeDisplayOffset, timelinePosition, dragOverrideValue, hasDragOverride, }) => {
+    if ((dragOverrideValue === null || dragOverrideValue === void 0 ? void 0 : dragOverrideValue.type) === 'keyframed') {
+        return (0, get_timeline_keyframes_1.getTimelineKeyframes)(dragOverrideValue.status, keyframeDisplayOffset);
+    }
+    const keyframes = (0, get_timeline_keyframes_1.getTimelineKeyframes)(propStatus, keyframeDisplayOffset);
+    if (!hasDragOverride || (propStatus === null || propStatus === void 0 ? void 0 : propStatus.status) !== 'keyframed') {
+        return keyframes;
+    }
+    const dragKeyframe = {
+        frame: timelinePosition,
+        value: dragOverrideValue === null || dragOverrideValue === void 0 ? void 0 : dragOverrideValue.value,
+    };
+    const existingIndex = keyframes.findIndex((keyframe) => keyframe.frame === timelinePosition);
+    if (existingIndex !== -1) {
+        return keyframes.map((keyframe, index) => index === existingIndex ? dragKeyframe : keyframe);
+    }
+    return [...keyframes, dragKeyframe].sort((first, second) => first.frame - second.frame);
+};
+const getNodeKeyframes = ({ node, nodePath, codeValues, keyframeDisplayOffset, getDragOverrides, getEffectDragOverrides, timelinePosition, }) => {
     var _a, _b;
     if (node.kind !== 'field' || node.field === null) {
         return [];
     }
     if (node.field.kind === 'sequence-field') {
-        return (0, get_timeline_keyframes_1.getTimelineKeyframes)((_a = remotion_1.Internals.getCodeValuesCtx(codeValues, nodePath)) === null || _a === void 0 ? void 0 : _a[node.field.key], keyframeDisplayOffset);
+        const dragOverrides = getDragOverrides(nodePath);
+        return withDragOverrideKeyframe({
+            propStatus: (_a = remotion_1.Internals.getCodeValuesCtx(codeValues, nodePath)) === null || _a === void 0 ? void 0 : _a[node.field.key],
+            keyframeDisplayOffset,
+            timelinePosition,
+            dragOverrideValue: dragOverrides[node.field.key],
+            hasDragOverride: hasOverride(dragOverrides, node.field.key),
+        });
     }
     const effectStatus = remotion_1.Internals.getEffectCodeValuesCtx({
         codeValues,
         nodePath,
         effectIndex: node.field.effectIndex,
     });
-    return (0, get_timeline_keyframes_1.getTimelineKeyframes)(effectStatus.type === 'can-update-effect'
-        ? (_b = effectStatus.props) === null || _b === void 0 ? void 0 : _b[node.field.key]
-        : null, keyframeDisplayOffset);
+    const effectDragOverrides = getEffectDragOverrides(nodePath, node.field.effectIndex);
+    return withDragOverrideKeyframe({
+        propStatus: effectStatus.type === 'can-update-effect'
+            ? (_b = effectStatus.props) === null || _b === void 0 ? void 0 : _b[node.field.key]
+            : null,
+        keyframeDisplayOffset,
+        timelinePosition,
+        dragOverrideValue: effectDragOverrides[node.field.key],
+        hasDragOverride: hasOverride(effectDragOverrides, node.field.key),
+    });
 };
 exports.getNodeKeyframes = getNodeKeyframes;

package/dist/components/Timeline/get-timeline-keyframes.js

@@ -2,17 +2,17 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.getTimelineKeyframes = exports.getComputedStatusLabel = void 0;
 const getComputedStatusLabel = (propStatus) => {
-    if (propStatus.reason === 'computed') {
+    if (propStatus.status === 'computed') {
         return 'computed';
     }
-    return 'keyframed';
+    throw new Error(`Unsupported prop status: ${propStatus.status}`);
 };
 exports.getComputedStatusLabel = getComputedStatusLabel;
 const getTimelineKeyframes = (propStatus, keyframeDisplayOffset = 0) => {
-    if (!propStatus || propStatus.canUpdate) {
+    if (!propStatus) {
         return [];
     }
-    if (propStatus.reason === 'computed') {
+    if (propStatus.status !== 'keyframed') {
         return [];
     }
     const { keyframes } = propStatus;

package/dist/components/Timeline/reset-selected-timeline-props.js

@@ -9,6 +9,21 @@ const isPropResetSelection = (selection) => selection.type === 'sequence-prop' |
     selection.type === 'sequence-effect-prop';
 const isVisibleFieldSchema = (fieldSchema) => fieldSchema !== undefined && fieldSchema.type !== 'hidden';
 const isNonDefaultCodeValue = ({ codeValue, defaultValue, }) => JSON.stringify(codeValue !== null && codeValue !== void 0 ? codeValue : defaultValue) !== JSON.stringify(defaultValue);
+const isResettablePropStatus = ({ propStatus, defaultValue, }) => {
+    if (!propStatus || propStatus.status === 'computed') {
+        return false;
+    }
+    if (defaultValue === undefined) {
+        return false;
+    }
+    if (propStatus.status === 'keyframed') {
+        return true;
+    }
+    return isNonDefaultCodeValue({
+        codeValue: propStatus.codeValue,
+        defaultValue,
+    });
+};
 const getDefaultValue = (fieldSchema) => fieldSchema.default !== undefined
     ? JSON.stringify(fieldSchema.default)
     : null;
@@ -41,9 +56,8 @@ const getTimelinePropResetTargets = ({ selections, sequences, overrideIdsToNodeP
             const sequenceFieldSchema = sequence.controls.schema[selection.key];
             const sequencePropStatus = (_a = remotion_1.Internals.getCodeValuesCtx(codeValues, nodePath)) === null || _a === void 0 ? void 0 : _a[selection.key];
             if (!isVisibleFieldSchema(sequenceFieldSchema) ||
-                !(sequencePropStatus === null || sequencePropStatus === void 0 ? void 0 : sequencePropStatus.canUpdate) ||
-                !isNonDefaultCodeValue({
-                    codeValue: sequencePropStatus.codeValue,
+                !isResettablePropStatus({
+                    propStatus: sequencePropStatus,
                     defaultValue: sequenceFieldSchema.default,
                 })) {
                 continue;
@@ -71,9 +85,8 @@ const getTimelinePropResetTargets = ({ selections, sequences, overrideIdsToNodeP
             : null;
         if (!effect ||
             !isVisibleFieldSchema(fieldSchema) ||
-            !(propStatus === null || propStatus === void 0 ? void 0 : propStatus.canUpdate) ||
-            !isNonDefaultCodeValue({
-                codeValue: propStatus.codeValue,
+            !isResettablePropStatus({
+                propStatus,
                 defaultValue: fieldSchema.default,
             })) {
             continue;

package/dist/components/Timeline/timeline-field-utils.d.ts

@@ -1,2 +1,3 @@
 export declare const getDecimalPlaces: (num: number) => number;
+export declare const normalizeTimelineNumber: (value: number) => number;
 export declare const draggerStyle: React.CSSProperties;

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

@@ -1,12 +1,16 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.draggerStyle = exports.getDecimalPlaces = void 0;
+exports.draggerStyle = exports.normalizeTimelineNumber = exports.getDecimalPlaces = void 0;
 const getDecimalPlaces = (num) => {
     const str = String(num);
     const decimalIndex = str.indexOf('.');
     return decimalIndex === -1 ? 0 : str.length - decimalIndex - 1;
 };
 exports.getDecimalPlaces = getDecimalPlaces;
+const normalizeTimelineNumber = (value) => {
+    return Math.round(value * 1000000) / 1000000;
+};
+exports.normalizeTimelineNumber = normalizeTimelineNumber;
 exports.draggerStyle = {
     width: 80,
 };

package/dist/components/Timeline/timeline-translate-utils.js

@@ -1,17 +1,21 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.serializeTranslate = exports.parseTranslate = void 0;
+const timeline_field_utils_1 = require("./timeline-field-utils");
 const PIXEL_PATTERN = /^(-?\d+(?:\.\d+)?)px(?:\s+(-?\d+(?:\.\d+)?)px)?$/;
 const parseTranslate = (value) => {
     const m = value.match(PIXEL_PATTERN);
     if (!m) {
         return [0, 0];
     }
-    return [Number(m[1]), m[2] !== undefined ? Number(m[2]) : 0];
+    return [
+        (0, timeline_field_utils_1.normalizeTimelineNumber)(Number(m[1])),
+        m[2] !== undefined ? (0, timeline_field_utils_1.normalizeTimelineNumber)(Number(m[2])) : 0,
+    ];
 };
 exports.parseTranslate = parseTranslate;
 const formatTranslateCoordinate = (value) => {
-    const rounded = Math.round(value * 1000) / 1000;
+    const rounded = (0, timeline_field_utils_1.normalizeTimelineNumber)(value);
     return String(Object.is(rounded, -0) ? 0 : rounded);
 };
 const serializeTranslate = (x, y) => {

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

@@ -11,6 +11,7 @@ const useExpandedTrackKeyframeRows = ({ sequence, nodePathInfo, keyframeDisplayO
     const { getIsExpanded } = (0, react_1.useContext)(ExpandedTracksProvider_1.ExpandedTracksGetterContext);
     const { codeValues } = (0, react_1.useContext)(remotion_1.Internals.VisualModeCodeValuesContext);
     const { getDragOverrides, getEffectDragOverrides } = (0, react_1.useContext)(remotion_1.Internals.VisualModeDragOverridesContext);
+    const timelinePosition = remotion_1.Internals.Timeline.useTimelinePosition();
     const tree = (0, react_1.useMemo)(() => (0, timeline_layout_1.buildTimelineTree)({
         sequence,
         nodePathInfo,
@@ -38,14 +39,20 @@ const useExpandedTrackKeyframeRows = ({ sequence, nodePathInfo, keyframeDisplayO
             nodePath: nodePathInfo.sequenceSubscriptionKey,
             codeValues,
             keyframeDisplayOffset,
+            getDragOverrides,
+            getEffectDragOverrides,
+            timelinePosition,
         }),
         rowKey: (0, timeline_node_path_key_1.timelineNodePathInfoToKey)(node.nodePathInfo),
         nodePathInfo: node.nodePathInfo,
     })), [
         codeValues,
         flat,
+        getDragOverrides,
+        getEffectDragOverrides,
         keyframeDisplayOffset,
         nodePathInfo.sequenceSubscriptionKey,
+        timelinePosition,
     ]);
     return { rows, expandedHeight };
 };

package/dist/components/TopPanel.d.ts

@@ -3,6 +3,6 @@ export declare const useResponsiveSidebarStatus: () => "collapsed" | "expanded";
 export declare const TopPanel: React.NamedExoticComponent<{
     readonly readOnlyStudio: boolean;
     readonly onMounted: () => void;
-    readonly drawRef: React.RefObject<HTMLDivElement | null>;
+    readonly drawRef: React.Ref<HTMLDivElement>;
     readonly bufferStateDelayInMilliseconds: number;
 }>;

package/dist/components/folder-menu-items.d.ts

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

package/dist/components/folder-menu-items.js

@@ -0,0 +1,147 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getFolderMenuItems = void 0;
+const no_react_1 = require("remotion/no-react");
+const format_file_location_1 = require("../helpers/format-file-location");
+const get_folder_id_1 = require("../helpers/get-folder-id");
+const open_in_editor_1 = require("../helpers/open-in-editor");
+const NotificationCenter_1 = require("./Notifications/NotificationCenter");
+const getFolderMenuItems = ({ closeMenu, connectionStatus, folder, readOnlyStudio, resolvedLocation, setSelectedModal, }) => {
+    const editorName = window.remotion_editorName;
+    const folderId = (0, get_folder_id_1.getFolderId)({
+        folderName: folder.name,
+        parentName: folder.parent,
+    });
+    const fileLocation = (0, format_file_location_1.formatFileLocation)({
+        location: resolvedLocation,
+        root: window.remotion_cwd,
+    });
+    const showInEditorDisabled = connectionStatus !== 'connected' || !resolvedLocation;
+    const copyFileLocationDisabled = !fileLocation;
+    const codemodDisabled = readOnlyStudio || !folder.stack;
+    return [
+        editorName
+            ? {
+                id: 'show-folder-in-editor',
+                keyHint: null,
+                label: `Show folder in ${editorName}`,
+                leftItem: null,
+                onClick: async () => {
+                    closeMenu();
+                    if (!resolvedLocation) {
+                        return;
+                    }
+                    try {
+                        await (0, open_in_editor_1.openOriginalPositionInEditor)(resolvedLocation);
+                    }
+                    catch (err) {
+                        (0, NotificationCenter_1.showNotification)(err.message, 2000);
+                    }
+                },
+                quickSwitcherLabel: `Show folder in ${editorName}`,
+                subMenu: null,
+                type: 'item',
+                value: 'show-folder-in-editor',
+                disabled: showInEditorDisabled,
+            }
+            : null,
+        {
+            id: 'copy-folder-file-location',
+            keyHint: null,
+            label: `Copy file location`,
+            leftItem: null,
+            onClick: () => {
+                closeMenu();
+                if (!fileLocation) {
+                    return;
+                }
+                navigator.clipboard
+                    .writeText(fileLocation)
+                    .then(() => {
+                    (0, NotificationCenter_1.showNotification)('Copied file location to clipboard', 1000);
+                })
+                    .catch((err) => {
+                    (0, NotificationCenter_1.showNotification)(`Could not copy to clipboard: ${err.message}`, 1000);
+                });
+            },
+            quickSwitcherLabel: 'Copy folder file location',
+            subMenu: null,
+            type: 'item',
+            value: 'copy-folder-file-location',
+            disabled: copyFileLocationDisabled,
+        },
+        editorName || fileLocation
+            ? {
+                type: 'divider',
+                id: 'show-folder-in-editor-divider',
+            }
+            : null,
+        {
+            id: 'rename-folder',
+            keyHint: null,
+            label: `Rename...`,
+            leftItem: null,
+            onClick: () => {
+                closeMenu();
+                setSelectedModal({
+                    type: 'rename-folder',
+                    folderName: folder.name,
+                    parentName: folder.parent,
+                    stack: folder.stack,
+                });
+            },
+            quickSwitcherLabel: 'Rename folder...',
+            subMenu: null,
+            type: 'item',
+            value: 'rename-folder',
+            disabled: codemodDisabled,
+        },
+        {
+            id: 'delete-folder',
+            keyHint: null,
+            label: `Delete...`,
+            leftItem: null,
+            onClick: () => {
+                closeMenu();
+                setSelectedModal({
+                    type: 'delete-folder',
+                    folderName: folder.name,
+                    parentName: folder.parent,
+                    stack: folder.stack,
+                });
+            },
+            quickSwitcherLabel: 'Delete folder...',
+            subMenu: null,
+            type: 'item',
+            value: 'delete-folder',
+            disabled: codemodDisabled,
+        },
+        {
+            type: 'divider',
+            id: 'copy-folder-id-divider',
+        },
+        {
+            id: 'copy-folder-id',
+            keyHint: null,
+            label: `Copy ID`,
+            leftItem: null,
+            onClick: () => {
+                closeMenu();
+                navigator.clipboard
+                    .writeText(folderId)
+                    .then(() => {
+                    (0, NotificationCenter_1.showNotification)('Copied to clipboard', 1000);
+                })
+                    .catch((err) => {
+                    (0, NotificationCenter_1.showNotification)(`Could not copy to clipboard: ${err.message}`, 1000);
+                });
+            },
+            quickSwitcherLabel: 'Copy folder ID',
+            subMenu: null,
+            type: 'item',
+            value: 'copy-folder-id',
+            disabled: false,
+        },
+    ].filter(no_react_1.NoReactInternals.truthy);
+};
+exports.getFolderMenuItems = getFolderMenuItems;

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

@@ -0,0 +1,6 @@
+export declare const pickFilesToImport: () => Promise<File[]>;
+export declare const importAssets: ({ compositionFile, compositionId, files, }: {
+    compositionFile: string;
+    compositionId: string;
+    files: File[];
+}) => Promise<void>;

package/dist/components/import-assets.js

@@ -0,0 +1,157 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.importAssets = exports.pickFilesToImport = void 0;
+const get_static_files_1 = require("../api/get-static-files");
+const write_static_file_1 = require("../api/write-static-file");
+const detect_file_type_1 = require("../helpers/detect-file-type");
+const call_api_1 = require("./call-api");
+const NotificationCenter_1 = require("./Notifications/NotificationCenter");
+const getAssetElement = ({ fileType, src, }) => {
+    if (fileType.type === 'png' ||
+        fileType.type === 'jpeg' ||
+        fileType.type === 'webp' ||
+        fileType.type === 'bmp') {
+        return {
+            type: 'asset',
+            assetType: 'image',
+            src,
+            dimensions: fileType.dimensions,
+        };
+    }
+    if (fileType.type === 'gif') {
+        return {
+            type: 'asset',
+            assetType: 'gif',
+            src,
+            dimensions: fileType.dimensions,
+        };
+    }
+    if (fileType.type === 'riff' ||
+        fileType.type === 'webm' ||
+        fileType.type === 'iso-base-media' ||
+        fileType.type === 'transport-stream') {
+        return {
+            type: 'asset',
+            assetType: 'video',
+            src,
+            dimensions: null,
+        };
+    }
+    return null;
+};
+const getAssetLabel = (element) => {
+    if (element.type !== 'asset') {
+        throw new Error('Expected asset element');
+    }
+    if (element.assetType === 'image') {
+        return '<Img>';
+    }
+    if (element.assetType === 'video') {
+        return '<Video>';
+    }
+    return '<Gif>';
+};
+const pickFilesToImport = () => {
+    return new Promise((resolve) => {
+        const input = document.createElement('input');
+        input.type = 'file';
+        input.multiple = true;
+        input.style.display = 'none';
+        let didResolve = false;
+        const resolveOnce = (files) => {
+            if (didResolve) {
+                return;
+            }
+            didResolve = true;
+            input.removeEventListener('change', onChange);
+            input.removeEventListener('cancel', onCancel);
+            input.remove();
+            resolve(files);
+        };
+        const onChange = () => {
+            var _a;
+            return resolveOnce(Array.from((_a = input.files) !== null && _a !== void 0 ? _a : []));
+        };
+        const onCancel = () => resolveOnce([]);
+        input.addEventListener('change', onChange);
+        input.addEventListener('cancel', onCancel);
+        document.body.appendChild(input);
+        input.click();
+    });
+};
+exports.pickFilesToImport = pickFilesToImport;
+const importAssets = async ({ compositionFile, compositionId, files, }) => {
+    if (files.length === 0) {
+        return;
+    }
+    const staticFiles = (0, get_static_files_1.getStaticFiles)();
+    const differentExistingFile = files.find((file) => {
+        return staticFiles.some((staticFile) => staticFile.name === file.name && staticFile.sizeInBytes !== file.size);
+    });
+    if (differentExistingFile) {
+        (0, NotificationCenter_1.showNotification)(`File with name ${differentExistingFile.name} already exists and is different`, 4000);
+        return;
+    }
+    const insertedLabels = [];
+    const addedStaticFiles = [];
+    const unsupportedFiles = [];
+    const notifyAddedStaticFiles = () => {
+        if (addedStaticFiles.length === 1) {
+            (0, NotificationCenter_1.showNotification)(`Created ${addedStaticFiles[0]} in public folder`, 3000);
+        }
+        else if (addedStaticFiles.length > 1) {
+            (0, NotificationCenter_1.showNotification)(`Added ${addedStaticFiles.length} files to public folder`, 3000);
+        }
+        addedStaticFiles.length = 0;
+    };
+    try {
+        for (const file of files) {
+            const contents = await file.arrayBuffer();
+            const fileType = (0, detect_file_type_1.detectFileType)(new Uint8Array(contents));
+            const element = getAssetElement({
+                fileType,
+                src: file.name,
+            });
+            if (element === null) {
+                unsupportedFiles.push(file.name);
+                continue;
+            }
+            const alreadyExists = staticFiles.some((staticFile) => staticFile.name === file.name && staticFile.sizeInBytes === file.size);
+            if (!alreadyExists) {
+                await (0, write_static_file_1.writeStaticFile)({
+                    contents,
+                    filePath: file.name,
+                });
+                addedStaticFiles.push(file.name);
+            }
+            const result = await (0, call_api_1.callApi)('/api/insert-jsx-element', {
+                compositionFile,
+                compositionId,
+                element,
+            });
+            if (!result.success) {
+                notifyAddedStaticFiles();
+                (0, NotificationCenter_1.showNotification)(result.reason, 4000);
+                return;
+            }
+            insertedLabels.push(getAssetLabel(element));
+        }
+        notifyAddedStaticFiles();
+        if (insertedLabels.length === 1) {
+            (0, NotificationCenter_1.showNotification)(`Added ${insertedLabels[0]} to source file`, 2000);
+        }
+        else if (insertedLabels.length > 1) {
+            (0, NotificationCenter_1.showNotification)(`Added ${insertedLabels.length} assets to source file`, 2000);
+        }
+        if (unsupportedFiles.length === 1) {
+            (0, NotificationCenter_1.showNotification)(`Cannot add ${unsupportedFiles[0]}: Unsupported file type`, 3000);
+        }
+        else if (unsupportedFiles.length > 1) {
+            (0, NotificationCenter_1.showNotification)(`Skipped ${unsupportedFiles.length} unsupported files`, 3000);
+        }
+    }
+    catch (error) {
+        (0, NotificationCenter_1.showNotification)(`Could not add asset: ${error instanceof Error ? error.message : String(error)}`, 4000);
+    }
+};
+exports.importAssets = importAssets;