@remotion/studio-server 4.0.496 → 4.0.498

package/dist/index.d.ts

@@ -2,7 +2,7 @@ export { ApiRoutes, CopyStillToClipboardRequest, getDefaultOutLocation, OpenInFi
 export type { AggregateRenderProgress, BundlingState, CopyingState, DownloadProgress, HotMiddlewareOptions, JobProgressCallback, ModuleMap, PackageManager, ProjectInfo, RenderingProgressInput, RenderJob, RenderJobWithCleanup, RequiredChromiumOptions, StitchingProgressInput, UiOpenGlOptions, } from '@remotion/studio-shared';
 import { AnsiDiff } from './ansi-diff';
 export declare const StudioServerInternals: {
-    startStudio: ({ browserArgs, browserFlag, shouldOpenBrowser, fullEntryPath, logLevel, getCurrentInputProps, getEnvVariables, desiredPort, maxTimelineTracks, remotionRoot, keyboardShortcutsEnabled, relativePublicDir, webpackOverride, poll, getRenderDefaults, getRenderQueue, getNumberOfAudioTags, queueMethods, previewEntry, gitSource, bufferStateDelayInMilliseconds, binariesDirectory, forceIPv4, getAudioLatencyHint, getPreviewSampleRate, enableCrossSiteIsolation, askAIEnabled, interactivityEnabled, forceNew, rspack, getStudioRuntimeConfig, }: {
+    startStudio: ({ browserArgs, browserFlag, shouldOpenBrowser, fullEntryPath, logLevel, getCurrentInputProps, getEnvVariables, desiredPort, remotionRoot, relativePublicDir, bundlerOverride, rspackOverride, webpackOverride, poll, getRenderDefaults, getRenderQueue, getNumberOfAudioTags, queueMethods, previewEntry, gitSource, binariesDirectory, forceIPv4, getAudioLatencyHint, getPreviewSampleRate, enableCrossSiteIsolation, forceNew, rspack, getStudioRuntimeConfig, configFile, }: {
         browserArgs: string;
         browserFlag: string;
         logLevel: "error" | "info" | "trace" | "verbose" | "warn";
@@ -11,11 +11,10 @@ export declare const StudioServerInternals: {
         getCurrentInputProps: () => object;
         getEnvVariables: () => Record<string, string>;
         desiredPort: number | null;
-        maxTimelineTracks: number | null;
-        bufferStateDelayInMilliseconds: number | null;
         remotionRoot: string;
-        keyboardShortcutsEnabled: boolean;
         relativePublicDir: string | null;
+        bundlerOverride: import("@remotion/bundler").BundlerOverrideFn;
+        rspackOverride: import("@remotion/bundler").RspackOverrideFn;
         webpackOverride: import("@remotion/bundler").WebpackOverrideFn;
         poll: number | null;
         getRenderDefaults: () => import("@remotion/studio-shared").RenderDefaults;
@@ -29,11 +28,10 @@ export declare const StudioServerInternals: {
         gitSource: import("@remotion/studio-shared").GitSource | null;
         binariesDirectory: string | null;
         forceIPv4: boolean;
-        askAIEnabled: boolean;
-        interactivityEnabled: boolean;
         forceNew: boolean;
         rspack: boolean;
         getStudioRuntimeConfig: () => import("@remotion/studio-shared").StudioRuntimeConfig;
+        configFile: string | null;
     }) => Promise<import("./start-studio").StartStudioResult>;
     getRemotionVersion: () => any;
     waitForLiveEventsListener: () => Promise<import("./preview-server/live-events").LiveEventsServer>;
@@ -115,6 +113,7 @@ export declare const StudioServerInternals: {
         version: string;
         additionalArgs: string[];
     }) => string[];
+    getPackageManagerSpawnOptions: () => Pick<import("child_process").SpawnOptionsWithoutStdio, "shell">;
     addCompletedClientRender: ({ render, remotionRoot, }: {
         render: import("@remotion/studio-shared").CompletedClientRender;
         remotionRoot: string;

package/dist/index.js

@@ -13,6 +13,7 @@ const file_watcher_1 = require("./file-watcher");
 const get_latest_remotion_version_1 = require("./get-latest-remotion-version");
 const get_installed_dependencies_1 = require("./helpers/get-installed-dependencies");
 const install_command_1 = require("./helpers/install-command");
+const package_manager_spawn_options_1 = require("./helpers/package-manager-spawn-options");
 const max_timeline_tracks_1 = require("./max-timeline-tracks");
 const get_package_manager_1 = require("./preview-server/get-package-manager");
 const live_events_1 = require("./preview-server/live-events");
@@ -41,6 +42,7 @@ exports.StudioServerInternals = {
     getInstalledDependencies: get_installed_dependencies_1.getInstalledDependencies,
     getInstalledDependenciesWithVersions: get_installed_dependencies_1.getInstalledDependenciesWithVersions,
     getInstallCommand: install_command_1.getInstallCommand,
+    getPackageManagerSpawnOptions: package_manager_spawn_options_1.getPackageManagerSpawnOptions,
     addCompletedClientRender: client_render_queue_1.addCompletedClientRender,
     getCompletedClientRenders: client_render_queue_1.getCompletedClientRenders,
     removeCompletedClientRender: client_render_queue_1.removeCompletedClientRender,

package/dist/open-browser-shortcut.js

@@ -36,6 +36,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.registerOpenBrowserShortcut = void 0;
 const readline = __importStar(require("node:readline"));
 const renderer_1 = require("@remotion/renderer");
+const better_opn_1 = require("./better-opn");
 const maybe_open_browser_1 = require("./maybe-open-browser");
 const live_events_1 = require("./preview-server/live-events");
 const registerOpenBrowserShortcut = ({ browserArgs, browserFlag, url, logLevel, }) => {
@@ -64,30 +65,39 @@ const registerOpenBrowserShortcut = ({ browserArgs, browserFlag, url, logLevel,
             process.stdin.pause();
         }
     };
-    const openStudio = () => {
+    const openStudio = async () => {
         if (isOpeningBrowser) {
             return;
         }
         isOpeningBrowser = true;
         (0, live_events_1.clearPrintPortMessageTimeout)();
-        (0, maybe_open_browser_1.maybeOpenBrowser)({
-            browserArgs,
-            browserFlag,
-            shouldOpenBrowser: true,
-            url,
-            logLevel,
-        })
-            .then((result) => {
+        try {
+            const didFocus = await (0, better_opn_1.focusBrowserTabByOrigin)({
+                url,
+                browserArgs,
+                browserFlag,
+            });
+            if (didFocus) {
+                renderer_1.RenderInternals.Log.info({ indent: false, logLevel }, renderer_1.RenderInternals.chalk.blue(`Opened ${url} in browser`));
+                return;
+            }
+            const result = await (0, maybe_open_browser_1.maybeOpenBrowser)({
+                browserArgs,
+                browserFlag,
+                shouldOpenBrowser: true,
+                url,
+                logLevel,
+            });
             if (result.didOpenBrowser) {
-                renderer_1.RenderInternals.Log.info({ indent: false, logLevel }, `Opened ${url} in browser`);
+                renderer_1.RenderInternals.Log.info({ indent: false, logLevel }, renderer_1.RenderInternals.chalk.blue(`Opened ${url} in browser`));
             }
-        })
-            .catch((err) => {
+        }
+        catch (err) {
             renderer_1.RenderInternals.Log.error({ indent: false, logLevel }, 'Could not open browser:', err);
-        })
-            .finally(() => {
+        }
+        finally {
             isOpeningBrowser = false;
-        });
+        }
     };
     function onKeypress(_str, key) {
         if ((key === null || key === void 0 ? void 0 : key.ctrl) && key.name === 'c') {
@@ -98,7 +108,7 @@ const registerOpenBrowserShortcut = ({ browserArgs, browserFlag, url, logLevel,
         if ((key === null || key === void 0 ? void 0 : key.meta) || (key === null || key === void 0 ? void 0 : key.ctrl) || (key === null || key === void 0 ? void 0 : key.name) !== 's') {
             return;
         }
-        openStudio();
+        openStudio().catch(() => undefined);
     }
     readline.emitKeypressEvents(process.stdin);
     process.stdin.setRawMode(true);

package/dist/preview-server/api-routes.js

@@ -8,6 +8,7 @@ const add_render_1 = require("./routes/add-render");
 const add_sequence_keyframe_1 = require("./routes/add-sequence-keyframe");
 const apply_codemod_1 = require("./routes/apply-codemod");
 const apply_visual_control_change_1 = require("./routes/apply-visual-control-change");
+const batch_update_keyframe_settings_1 = require("./routes/batch-update-keyframe-settings");
 const cancel_render_1 = require("./routes/cancel-render");
 const composition_component_info_1 = require("./routes/composition-component-info");
 const convert_figma_clipboard_to_svg_1 = require("./routes/convert-figma-clipboard-to-svg");
@@ -49,6 +50,7 @@ const update_available_1 = require("./routes/update-available");
 const update_default_props_1 = require("./routes/update-default-props");
 const update_effect_keyframe_settings_1 = require("./routes/update-effect-keyframe-settings");
 const update_element_install_target_1 = require("./routes/update-element-install-target");
+const update_public_license_1 = require("./routes/update-public-license");
 const update_sequence_keyframe_settings_1 = require("./routes/update-sequence-keyframe-settings");
 exports.allApiRoutes = {
     '/api/composition-component-info': composition_component_info_1.compositionComponentInfoHandler,
@@ -82,6 +84,7 @@ exports.allApiRoutes = {
     '/api/add-keyframes': add_keyframes_1.addKeyframesHandler,
     '/api/update-sequence-keyframe-settings': update_sequence_keyframe_settings_1.updateSequenceKeyframeSettingsHandler,
     '/api/update-effect-keyframe-settings': update_effect_keyframe_settings_1.updateEffectKeyframeSettingsHandler,
+    '/api/batch-update-keyframe-settings': batch_update_keyframe_settings_1.batchUpdateKeyframeSettingsHandler,
     '/api/delete-effect': delete_effect_1.deleteEffectHandler,
     '/api/paste-effects': paste_effects_1.pasteEffectsHandler,
     '/api/delete-jsx-node': delete_jsx_node_1.deleteJsxNodeHandler,
@@ -92,6 +95,7 @@ exports.allApiRoutes = {
     '/api/delete-static-file': delete_static_file_1.deleteStaticFileHandler,
     '/api/rename-static-file': rename_static_file_1.renameStaticFileHandler,
     '/api/restart-studio': restart_studio_1.handleRestartStudio,
+    '/api/update-public-license': update_public_license_1.updatePublicLicenseHandler,
     '/api/install-package': install_dependency_1.handleInstallPackage,
     '/api/insert-jsx-element': insert_jsx_element_1.insertJsxElementHandler,
     '/api/insert-element': insert_element_1.insertElementHandler,

package/dist/preview-server/api-types.d.ts

@@ -21,4 +21,5 @@ export type ApiHandler<ReqData, ResData> = (params: {
     methods: QueueMethods;
     publicDir: string;
     binariesDirectory: string | null;
+    configFile: string | null;
 }) => Promise<ResData>;

package/dist/preview-server/handler.d.ts

@@ -1,12 +1,13 @@
 import type { IncomingMessage, ServerResponse } from 'node:http';
 import type { ApiHandler, QueueMethods } from './api-types';
-export declare const handleRequest: <Req, Res>({ remotionRoot, request, response, entryPoint, handler, logLevel, methods, binariesDirectory, publicDir, }: {
+export declare const handleRequest: <Req, Res>({ remotionRoot, request, response, entryPoint, handler, logLevel, methods, binariesDirectory, publicDir, configFile, }: {
     remotionRoot: string;
     publicDir: string;
     request: IncomingMessage;
     response: ServerResponse<IncomingMessage>;
     entryPoint: string;
     binariesDirectory: string | null;
+    configFile: string | null;
     handler: ApiHandler<Req, Res>;
     logLevel: "error" | "info" | "trace" | "verbose" | "warn";
     methods: QueueMethods;

package/dist/preview-server/handler.js

@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.handleRequest = void 0;
 const parse_body_1 = require("./parse-body");
 const validate_same_origin_1 = require("./validate-same-origin");
-const handleRequest = async ({ remotionRoot, request, response, entryPoint, handler, logLevel, methods, binariesDirectory, publicDir, }) => {
+const handleRequest = async ({ remotionRoot, request, response, entryPoint, handler, logLevel, methods, binariesDirectory, publicDir, configFile, }) => {
     if (request.method === 'OPTIONS') {
         response.statusCode = 200;
         response.end();
@@ -24,6 +24,7 @@ const handleRequest = async ({ remotionRoot, request, response, entryPoint, hand
             methods,
             binariesDirectory,
             publicDir,
+            configFile,
         });
         response.end(JSON.stringify({
             success: true,

package/dist/preview-server/routes/batch-update-keyframe-settings.d.ts

@@ -0,0 +1,7 @@
+import type { BatchUpdateKeyframeSettingsRequest, BatchUpdateKeyframeSettingsResponse } from '@remotion/studio-shared';
+import type { ApiHandler } from '../api-types';
+export declare const batchUpdateKeyframeSettings: ({ sequenceKeyframes, effectKeyframes, clientId, remotionRoot, logLevel, }: BatchUpdateKeyframeSettingsRequest & {
+    remotionRoot: string;
+    logLevel: "error" | "info" | "trace" | "verbose" | "warn";
+}) => Promise<void>;
+export declare const batchUpdateKeyframeSettingsHandler: ApiHandler<BatchUpdateKeyframeSettingsRequest, BatchUpdateKeyframeSettingsResponse>;

package/dist/preview-server/routes/batch-update-keyframe-settings.js

@@ -0,0 +1,187 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.batchUpdateKeyframeSettingsHandler = exports.batchUpdateKeyframeSettings = void 0;
+const node_fs_1 = require("node:fs");
+const renderer_1 = require("@remotion/renderer");
+const update_keyframes_1 = require("../../codemods/update-keyframes/update-keyframes");
+const file_watcher_1 = require("../../file-watcher");
+const resolve_file_inside_project_1 = require("../../helpers/resolve-file-inside-project");
+const undo_stack_1 = require("../undo-stack");
+const watch_ignore_next_change_1 = require("../watch-ignore-next-change");
+const log_effect_update_1 = require("./log-updates/log-effect-update");
+const log_update_1 = require("./log-updates/log-update");
+const source_file_write_queue_1 = require("./source-file-write-queue");
+const groupBy = (items, getKey) => {
+    var _a;
+    const groups = new Map();
+    for (const item of items) {
+        const key = getKey(item);
+        const group = (_a = groups.get(key)) !== null && _a !== void 0 ? _a : [];
+        group.push(item);
+        groups.set(key, group);
+    }
+    return [...groups.values()];
+};
+const toOperation = (settings) => settings.type === 'settings'
+    ? {
+        type: 'settings',
+        clamping: settings.clamping,
+        posterize: settings.posterize,
+        output: settings.output,
+    }
+    : {
+        type: 'easing',
+        segmentIndex: settings.segmentIndex,
+        easing: settings.easing,
+    };
+const batchUpdateKeyframeSettings = async ({ sequenceKeyframes, effectKeyframes, clientId, remotionRoot, logLevel, }) => {
+    var _a, _b;
+    const totalUpdates = sequenceKeyframes.length + effectKeyframes.length;
+    if (totalUpdates === 0) {
+        throw new Error('No keyframe settings updates were specified');
+    }
+    const fileGroups = new Map();
+    for (const update of sequenceKeyframes) {
+        const { absolutePath, fileRelativeToRoot } = (0, resolve_file_inside_project_1.resolveFileInsideProject)({
+            remotionRoot,
+            fileName: update.fileName,
+            action: 'modify',
+        });
+        const group = (_a = fileGroups.get(absolutePath)) !== null && _a !== void 0 ? _a : {
+            sequenceKeyframes: [],
+            effectKeyframes: [],
+        };
+        group.sequenceKeyframes.push({ ...update, fileRelativeToRoot });
+        fileGroups.set(absolutePath, group);
+    }
+    for (const update of effectKeyframes) {
+        const { absolutePath, fileRelativeToRoot } = (0, resolve_file_inside_project_1.resolveFileInsideProject)({
+            remotionRoot,
+            fileName: update.fileName,
+            action: 'modify',
+        });
+        const group = (_b = fileGroups.get(absolutePath)) !== null && _b !== void 0 ? _b : {
+            sequenceKeyframes: [],
+            effectKeyframes: [],
+        };
+        group.effectKeyframes.push({ ...update, fileRelativeToRoot });
+        fileGroups.set(absolutePath, group);
+    }
+    const snapshots = [];
+    const sequenceLogs = [];
+    const effectLogs = [];
+    for (const [absolutePath, group] of fileGroups) {
+        const fileContents = (0, node_fs_1.readFileSync)(absolutePath, 'utf-8');
+        let output = fileContents;
+        let firstLogLine = Number.POSITIVE_INFINITY;
+        for (const updates of groupBy(group.sequenceKeyframes, (update) => JSON.stringify(update.nodePath.nodePath))) {
+            const firstUpdate = updates[0];
+            const result = await (0, update_keyframes_1.updateSequenceKeyframes)({
+                input: output,
+                nodePath: firstUpdate.nodePath.nodePath,
+                schema: firstUpdate.schema,
+                videoConfigValues: firstUpdate.nodePath.videoConfigValues,
+                updates: updates.map((update) => ({
+                    key: update.key,
+                    operation: toOperation(update.settings),
+                })),
+            });
+            output = result.output;
+            firstLogLine = Math.min(firstLogLine, result.logLine);
+            for (const [index, update] of updates.entries()) {
+                sequenceLogs.push({
+                    fileRelativeToRoot: update.fileRelativeToRoot,
+                    line: result.logLine,
+                    key: update.key,
+                    oldValueString: result.oldValueStrings[index],
+                    newValueString: result.newValueStrings[index],
+                    formatted: result.formatted,
+                });
+            }
+        }
+        for (const updates of groupBy(group.effectKeyframes, (update) => `${JSON.stringify(update.sequenceNodePath.nodePath)}:${update.effectIndex}`)) {
+            const firstUpdate = updates[0];
+            const result = await (0, update_keyframes_1.updateEffectKeyframes)({
+                input: output,
+                sequenceNodePath: firstUpdate.sequenceNodePath.nodePath,
+                effectIndex: firstUpdate.effectIndex,
+                schema: firstUpdate.schema,
+                videoConfigValues: firstUpdate.sequenceNodePath.videoConfigValues,
+                updates: updates.map((update) => ({
+                    key: update.key,
+                    operation: toOperation(update.settings),
+                })),
+            });
+            output = result.output;
+            firstLogLine = Math.min(firstLogLine, result.logLine);
+            for (const [index, update] of updates.entries()) {
+                effectLogs.push({
+                    fileRelativeToRoot: update.fileRelativeToRoot,
+                    line: result.logLine,
+                    effectName: result.effectCallee,
+                    propKey: update.key,
+                    oldValueString: result.oldValueStrings[index],
+                    newValueString: result.newValueStrings[index],
+                    formatted: result.formatted,
+                });
+            }
+        }
+        snapshots.push({
+            filePath: absolutePath,
+            oldContents: fileContents,
+            newContents: output,
+            logLine: Number.isFinite(firstLogLine) ? firstLogLine : 1,
+        });
+    }
+    (0, undo_stack_1.pushTransactionToUndoStack)({
+        snapshots,
+        logLevel,
+        remotionRoot,
+        description: totalUpdates === 1
+            ? {
+                undoMessage: '↩️  Keyframe settings reverted',
+                redoMessage: '↪️  Keyframe settings updated',
+            }
+            : {
+                undoMessage: `↩️  ${totalUpdates} keyframe settings reverted`,
+                redoMessage: `↪️  ${totalUpdates} keyframe settings updated`,
+            },
+        entryType: sequenceKeyframes.length > 0 ? 'sequence-props' : 'effect-props',
+        suppressHmrOnFileRestore: true,
+    });
+    for (const snapshot of snapshots) {
+        (0, undo_stack_1.suppressUndoStackInvalidation)(snapshot.filePath);
+        (0, watch_ignore_next_change_1.suppressBundlerUpdateForFile)(snapshot.filePath);
+        (0, file_watcher_1.writeFileAndNotifyFileWatchers)(snapshot.filePath, snapshot.newContents, clientId);
+    }
+    for (const log of sequenceLogs) {
+        (0, log_update_1.logUpdate)({
+            ...log,
+            defaultValueString: null,
+            logLevel,
+            removedProps: [],
+            addedProps: [],
+        });
+    }
+    for (const log of effectLogs) {
+        (0, log_effect_update_1.logEffectUpdate)({
+            ...log,
+            defaultValueString: null,
+            logLevel,
+            removedProps: [],
+            addedProps: [],
+        });
+    }
+    (0, undo_stack_1.printUndoHint)(logLevel);
+};
+exports.batchUpdateKeyframeSettings = batchUpdateKeyframeSettings;
+const batchUpdateKeyframeSettingsHandler = ({ input, remotionRoot, logLevel }) => (0, source_file_write_queue_1.withSourceFileWriteQueue)(async () => {
+    renderer_1.RenderInternals.Log.trace({ indent: false, logLevel }, `[batch-update-keyframe-settings] Received ${input.sequenceKeyframes.length + input.effectKeyframes.length} update(s)`);
+    await (0, exports.batchUpdateKeyframeSettings)({
+        ...input,
+        remotionRoot,
+        logLevel,
+    });
+    return { success: true };
+});
+exports.batchUpdateKeyframeSettingsHandler = batchUpdateKeyframeSettingsHandler;

package/dist/preview-server/routes/can-update-sequence-props.js

@@ -40,6 +40,7 @@ const studio_shared_1 = require("@remotion/studio-shared");
 const recast = __importStar(require("recast"));
 const no_react_1 = require("remotion/no-react");
 const parse_ast_1 = require("../../codemods/parse-ast");
+const css_shorthand_properties_1 = require("../../helpers/css-shorthand-properties");
 const get_ast_node_path_1 = require("../../helpers/get-ast-node-path");
 const import_agnostic_node_path_1 = require("../../helpers/import-agnostic-node-path");
 const parse_keyframe_easing_expression_1 = require("../../helpers/parse-keyframe-easing-expression");
@@ -669,6 +670,15 @@ const validateStyleValue = (childKey, value) => {
     }
     return true;
 };
+const getObjectPropertyName = (property) => {
+    if (property.key.type === 'Identifier') {
+        return property.key.name;
+    }
+    if (property.key.type === 'StringLiteral') {
+        return property.key.value;
+    }
+    return null;
+};
 const getNestedPropStatus = ({ jsxElement, ast, parentKey, childKey, videoConfigValues, allowSpecialValues, }) => {
     const attr = jsxElement.attributes.find((a) => a.type !== 'JSXSpreadAttribute' &&
         a.name.type !== 'JSXNamespacedName' &&
@@ -687,9 +697,50 @@ const getNestedPropStatus = ({ jsxElement, ast, parentKey, childKey, videoConfig
         return computedStatus();
     }
     const objExpr = expression;
-    const prop = objExpr.properties.find((p) => p.type === 'ObjectProperty' &&
-        ((p.key.type === 'Identifier' && p.key.name === childKey) ||
-            (p.key.type === 'StringLiteral' && p.key.value === childKey)));
+    const cssShorthand = (0, css_shorthand_properties_1.getCssShorthandForLonghand)({
+        parentKey,
+        longhand: childKey,
+    });
+    if (cssShorthand &&
+        objExpr.properties.some((property) => {
+            if (property.type !== 'ObjectProperty') {
+                return false;
+            }
+            const propertyName = getObjectPropertyName(property);
+            return (propertyName !== null &&
+                cssShorthand.isUnsupportedProperty(propertyName));
+        })) {
+        return computedStatus();
+    }
+    let prop;
+    for (let index = objExpr.properties.length - 1; index >= 0; index--) {
+        const candidate = objExpr.properties[index];
+        if (candidate.type === 'SpreadElement') {
+            return computedStatus();
+        }
+        if (candidate.type === 'ObjectProperty' &&
+            (getObjectPropertyName(candidate) === childKey ||
+                getObjectPropertyName(candidate) === (cssShorthand === null || cssShorthand === void 0 ? void 0 : cssShorthand.shorthand))) {
+            prop = candidate;
+            break;
+        }
+    }
+    if (prop &&
+        cssShorthand &&
+        getObjectPropertyName(prop) === cssShorthand.shorthand) {
+        const shorthandValue = prop.value;
+        if (!(0, exports.isStaticValue)(shorthandValue, { allowSpecialValues: false })) {
+            return computedStatus();
+        }
+        const staticShorthandValue = (0, exports.extractStaticValue)(shorthandValue, {
+            allowSpecialValues: false,
+        });
+        if (typeof staticShorthandValue !== 'string') {
+            return computedStatus();
+        }
+        const parsed = cssShorthand.parse(staticShorthandValue);
+        return parsed ? staticStatus(parsed[childKey], null) : computedStatus();
+    }
     if (!prop) {
         // Property not set in the object, can be added
         return staticStatus(undefined, null);

package/dist/preview-server/routes/download-remote-asset.js

@@ -263,6 +263,7 @@ const downloadRemoteAssetHandler = async ({ input, publicDir, request }) => {
         src: assetPath,
         srcType: 'static',
         dimensions: fileType.dimensions,
+        durationInFrames: null,
         position: null,
     };
     return {

package/dist/preview-server/routes/insert-element.js

@@ -69,10 +69,14 @@ const validateElement = (element) => {
     }
     validateDimensions(element.dimensions);
 };
-const insertElementHandler = ({ input: { compositionFile, compositionId, element, position }, remotionRoot, logLevel, }) => (0, source_file_write_queue_1.withSourceFileWriteQueue)(async () => {
+const insertElementHandler = ({ input: { compositionFile, compositionId, element, from, position }, remotionRoot, logLevel, }) => (0, source_file_write_queue_1.withSourceFileWriteQueue)(async () => {
     try {
         validateElement(element);
         validatePosition(position);
+        if (from !== null &&
+            (!Number.isInteger(from) || !Number.isFinite(from) || from < 0)) {
+            throw new Error('from must be a non-negative integer');
+        }
         const componentName = (0, studio_shared_1.getElementComponentNameFromSourceCode)(element.sourceCode);
         if (componentName === null) {
             throw new Error('Element source must export exactly one named component');
@@ -118,9 +122,11 @@ const insertElementHandler = ({ input: { compositionFile, compositionId, element
                 props: [],
                 position: null,
             },
+            from: null,
             prettierConfigOverride: null,
             wrapInSequence: {
                 dimensions: element.dimensions,
+                from,
                 name: element.displayName,
                 position,
             },

package/dist/preview-server/routes/insert-jsx-element.js

@@ -72,6 +72,9 @@ const validateElement = (element, remotionRoot) => {
             validateDimension('width', element.dimensions.width);
             validateDimension('height', element.dimensions.height);
         }
+        if (element.durationInFrames !== null) {
+            validateDimension('durationInFrames', element.durationInFrames);
+        }
         return;
     }
     if (element.type === 'component') {
@@ -145,9 +148,13 @@ const getElementLabel = (element) => {
     }
     throw new Error('Unsupported element type');
 };
-const insertJsxElementHandler = ({ input: { compositionFile, compositionId, element }, remotionRoot, logLevel, }) => (0, source_file_write_queue_1.withSourceFileWriteQueue)(async () => {
+const insertJsxElementHandler = ({ input: { compositionFile, compositionId, element, from }, remotionRoot, logLevel, }) => (0, source_file_write_queue_1.withSourceFileWriteQueue)(async () => {
     try {
         validateElement(element, remotionRoot);
+        if (from !== null &&
+            (!Number.isInteger(from) || !Number.isFinite(from) || from < 0)) {
+            throw new Error('from must be a non-negative integer');
+        }
         const elementLabel = getElementLabel(element);
         renderer_1.RenderInternals.Log.trace({ indent: false, logLevel }, `[insert-jsx-element] Received request for compositionFile="${compositionFile}" compositionId="${compositionId}" element="${element.type}"`);
         const { fileName, source, oldContents, output, formatted, logLine } = await (0, resolve_composition_component_1.insertJsxElementIntoComposition)({
@@ -155,6 +162,7 @@ const insertJsxElementHandler = ({ input: { compositionFile, compositionId, elem
             compositionFile,
             compositionId,
             element,
+            from,
             prettierConfigOverride: null,
         });
         (0, undo_stack_1.pushToUndoStack)({

package/dist/preview-server/routes/install-dependency.js

@@ -6,6 +6,7 @@ const renderer_1 = require("@remotion/renderer");
 const studio_shared_1 = require("@remotion/studio-shared");
 const version_1 = require("remotion/version");
 const install_command_1 = require("../../helpers/install-command");
+const package_manager_spawn_options_1 = require("../../helpers/package-manager-spawn-options");
 const get_package_manager_1 = require("../get-package-manager");
 const getExtraPackageVersion = (packageName) => {
     const pkg = studio_shared_1.extraPackages.find((p) => p.name === packageName);
@@ -52,7 +53,10 @@ const handleInstallPackage = async ({ logLevel, remotionRoot, input: { packageNa
     const time = Date.now();
     try {
         await new Promise((resolve, reject) => {
-            const cmd = (0, node_child_process_1.spawn)(manager.manager, command, {});
+            const cmd = (0, node_child_process_1.spawn)(manager.manager, command, (0, package_manager_spawn_options_1.getPackageManagerSpawnOptions)());
+            cmd.on('error', (err) => {
+                reject(err);
+            });
             cmd.stdout.on('data', (d) => {
                 const splitted = d.toString().trim().split('\n');
                 splitted.forEach((line) => {