@remotion/studio-server 4.0.496 → 4.0.497

package/dist/better-opn/index.d.ts

@@ -1,8 +1,14 @@
 export declare const getChromiumBrowsersToTry: (processes: string) => ("Arc" | "Brave Browser" | "Chromium" | "Google Chrome" | "Google Chrome Canary" | "Microsoft Edge" | "Vivaldi")[];
 export declare const getFocusBrowserTabAppleScript: (chromiumBrowser: "Arc" | "Brave Browser" | "Chromium" | "Google Chrome" | "Google Chrome Canary" | "Microsoft Edge" | "Vivaldi") => string;
+export declare const getFocusBrowserTabByOriginAppleScript: (chromiumBrowser: "Arc" | "Brave Browser" | "Chromium" | "Google Chrome" | "Google Chrome Canary" | "Microsoft Edge" | "Vivaldi") => string;
 export declare const focusBrowserTab: ({ url }: {
     url: string;
 }) => Promise<boolean>;
+export declare const focusBrowserTabByOrigin: ({ url, browserFlag, browserArgs, }: {
+    url: string;
+    browserFlag: string | undefined;
+    browserArgs: string | undefined;
+}) => false | Promise<boolean>;
 export declare const openBrowser: ({ url, browserFlag, browserArgs, }: {
     url: string;
     browserFlag: string | undefined;

package/dist/better-opn/index.js

@@ -1,7 +1,7 @@
 "use strict";
 // Copied from https://github.com/michaellzc/better-opn#readme
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.openBrowser = exports.focusBrowserTab = exports.getFocusBrowserTabAppleScript = exports.getChromiumBrowsersToTry = void 0;
+exports.openBrowser = exports.focusBrowserTabByOrigin = exports.focusBrowserTab = exports.getFocusBrowserTabByOriginAppleScript = exports.getFocusBrowserTabAppleScript = exports.getChromiumBrowsersToTry = void 0;
 const node_child_process_1 = require("node:child_process");
 const open = require("open");
 const supportedChromiumBrowsers = [
@@ -96,7 +96,21 @@ const normalizeURLToMatch = (target) => {
         return target;
     }
 };
-const getFocusBrowserTabAppleScript = (chromiumBrowser) => {
+const getBrowserArgs = (browserArgs) => {
+    if (browserArgs) {
+        return browserArgs.split(' ');
+    }
+    if (process.env.BROWSER_ARGS) {
+        return process.env.BROWSER_ARGS.split(' ');
+    }
+    return [];
+};
+const shouldTryOpenChromiumWithAppleScript = ({ browser, args, }) => {
+    return (process.platform === 'darwin' &&
+        args.length === 0 &&
+        (!browser || browser === 'google chrome' || browser === 'chrome'));
+};
+const getFocusBrowserTabAppleScriptWithCondition = (chromiumBrowser, condition) => {
     return `
 property targetTabIndex: -1
 property targetWindow: null
@@ -128,7 +142,7 @@ on lookupTabWithUrl(lookupUrl)
         set theTabIndex to 0
         repeat with theTab in every tab of theWindow
           set theTabIndex to theTabIndex + 1
-          if (theTab's URL as string) is lookupUrl then
+          ${condition}
             set targetTabIndex to theTabIndex
             set targetWindow to theWindow
             set found to true
@@ -146,8 +160,16 @@ on lookupTabWithUrl(lookupUrl)
 end lookupTabWithUrl
 `.trim();
 };
+const getFocusBrowserTabAppleScript = (chromiumBrowser) => {
+    return getFocusBrowserTabAppleScriptWithCondition(chromiumBrowser, "if (theTab's URL as string) is lookupUrl then");
+};
 exports.getFocusBrowserTabAppleScript = getFocusBrowserTabAppleScript;
-const focusBrowserTab = async ({ url }) => {
+const getFocusBrowserTabByOriginAppleScript = (chromiumBrowser) => {
+    return getFocusBrowserTabAppleScriptWithCondition(chromiumBrowser, `set tabURL to theTab's URL as string
+          if tabURL is lookupUrl or tabURL starts with lookupUrl & "/" or tabURL starts with lookupUrl & "?" or tabURL starts with lookupUrl & "#" then`);
+};
+exports.getFocusBrowserTabByOriginAppleScript = getFocusBrowserTabByOriginAppleScript;
+const focusBrowserTabWithAppleScript = async ({ url, getAppleScript, }) => {
     if (process.platform !== 'darwin') {
         return false;
     }
@@ -161,7 +183,7 @@ const focusBrowserTab = async ({ url }) => {
     for (const chromiumBrowser of browsersToTry) {
         try {
             const result = await runAppleScript({
-                appleScript: (0, exports.getFocusBrowserTabAppleScript)(chromiumBrowser),
+                appleScript: getAppleScript(chromiumBrowser),
                 args: [url],
             });
             if (result.trim() === 'true') {
@@ -176,15 +198,30 @@ const focusBrowserTab = async ({ url }) => {
     }
     return false;
 };
+const focusBrowserTab = ({ url }) => {
+    return focusBrowserTabWithAppleScript({
+        url,
+        getAppleScript: exports.getFocusBrowserTabAppleScript,
+    });
+};
 exports.focusBrowserTab = focusBrowserTab;
+const focusBrowserTabByOrigin = ({ url, browserFlag, browserArgs, }) => {
+    const args = getBrowserArgs(browserArgs);
+    const browser = browserFlag !== null && browserFlag !== void 0 ? browserFlag : process.env.BROWSER;
+    if (!shouldTryOpenChromiumWithAppleScript({ browser, args })) {
+        return false;
+    }
+    return focusBrowserTabWithAppleScript({
+        url: normalizeURLToMatch(url),
+        getAppleScript: exports.getFocusBrowserTabByOriginAppleScript,
+    });
+};
+exports.focusBrowserTabByOrigin = focusBrowserTabByOrigin;
 // Copy from
 // https://github.com/facebook/create-react-app/blob/master/packages/react-dev-utils/openBrowser.js#L64
 const startBrowserProcess = async ({ browser, url, args, }) => {
     const tryNewInstance = args.length > 0;
-    const shouldTryOpenChromiumWithAppleScript = process.platform === 'darwin' &&
-        !tryNewInstance &&
-        (!browser || browser === 'google chrome' || browser === 'chrome');
-    if (shouldTryOpenChromiumWithAppleScript) {
+    if (shouldTryOpenChromiumWithAppleScript({ browser, args })) {
         let appleScriptDenied = false;
         // Will use the first open browser found from list
         const browsersToTry = await getRunningChromiumBrowsers();
@@ -308,15 +345,6 @@ const startBrowserProcess = async ({ browser, url, args, }) => {
         wait: false,
     });
 };
-const getBrowserArgs = (browserArgs) => {
-    if (browserArgs) {
-        return browserArgs.split(' ');
-    }
-    if (process.env.BROWSER_ARGS) {
-        return process.env.BROWSER_ARGS.split(' ');
-    }
-    return [];
-};
 const openBrowser = ({ url, browserFlag, browserArgs, }) => {
     return startBrowserProcess({
         browser: browserFlag !== null && browserFlag !== void 0 ? browserFlag : process.env.BROWSER,

package/dist/codemods/update-sequence-props/update-sequence-props.js

@@ -36,6 +36,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.updateSequenceProps = exports.updateMultipleSequenceProps = exports.updateSequencePropsAst = void 0;
 const recast = __importStar(require("recast"));
 const no_react_1 = require("remotion/no-react");
+const css_shorthand_properties_1 = require("../../helpers/css-shorthand-properties");
 const video_config_numeric_expression_1 = require("../../helpers/video-config-numeric-expression");
 const video_config_values_1 = require("../../helpers/video-config-values");
 const can_update_sequence_props_1 = require("../../preview-server/routes/can-update-sequence-props");
@@ -474,11 +475,57 @@ const applyGoogleFontSourceEdits = ({ ast, updates, }) => {
         removeUnusedGoogleFontSourceEdits(ast);
     }
 };
+const migrateCssShorthand = ({ node, cssShorthand, }) => {
+    var _a, _b, _c;
+    var _d;
+    const styleAttribute = (_a = node.attributes) === null || _a === void 0 ? void 0 : _a.find((attribute) => attribute.type === 'JSXAttribute' &&
+        attribute.name.type === 'JSXIdentifier' &&
+        attribute.name.name === 'style');
+    if ((styleAttribute === null || styleAttribute === void 0 ? void 0 : styleAttribute.type) !== 'JSXAttribute' ||
+        ((_b = styleAttribute.value) === null || _b === void 0 ? void 0 : _b.type) !== 'JSXExpressionContainer' ||
+        styleAttribute.value.expression.type !== 'ObjectExpression') {
+        return;
+    }
+    const { properties } = styleAttribute.value.expression;
+    for (let index = 0; index < properties.length; index++) {
+        const property = properties[index];
+        if (property.type !== 'ObjectProperty' ||
+            !((property.key.type === 'Identifier' &&
+                property.key.name === cssShorthand.shorthand) ||
+                (property.key.type === 'StringLiteral' &&
+                    property.key.value === cssShorthand.shorthand))) {
+            continue;
+        }
+        const shorthandValue = property.value.type === 'StringLiteral'
+            ? property.value.value
+            : property.value.type === 'TemplateLiteral' &&
+                property.value.expressions.length === 0
+                ? ((_d = (_c = property.value.quasis[0]) === null || _c === void 0 ? void 0 : _c.value.cooked) !== null && _d !== void 0 ? _d : null)
+                : null;
+        if (shorthandValue === null) {
+            continue;
+        }
+        const parsed = cssShorthand.parse(shorthandValue);
+        if (!parsed) {
+            continue;
+        }
+        properties.splice(index, 1, ...cssShorthand.longhands.map((longhand) => {
+            const value = parsed[longhand];
+            return b.objectProperty(b.identifier(longhand), typeof value === 'number'
+                ? b.numericLiteral(value)
+                : b.stringLiteral(value));
+        }));
+        index += cssShorthand.longhands.length - 1;
+    }
+};
 const updateSequencePropsNode = ({ jsxElement, updates, schema, videoConfigValues, }) => {
     var _a, _b, _c, _d;
     var _e, _f;
     const node = jsxElement.openingElement;
     const logLine = (_e = (_a = node.loc) === null || _a === void 0 ? void 0 : _a.start.line) !== null && _e !== void 0 ? _e : 1;
+    for (const cssShorthand of (0, css_shorthand_properties_1.getCssShorthandsForUpdates)(updates.map((update) => update.key))) {
+        migrateCssShorthand({ node, cssShorthand });
+    }
     const oldValueStrings = [];
     const initialAttrs = snapshotTopLevelAttrs(node);
     const updatedTopLevelKeys = new Set(updates.map(({ key }) => {

package/dist/helpers/css-shorthand-properties.d.ts

@@ -0,0 +1,27 @@
+type ParsedCssShorthand = Readonly<Record<string, string | number>>;
+export type CssShorthandProperty = {
+    readonly parentKey: string;
+    readonly shorthand: string;
+    readonly longhands: readonly string[];
+    readonly parse: (value: string) => ParsedCssShorthand | null;
+    readonly isUnsupportedProperty: (propertyName: string) => boolean;
+};
+export declare const cssShorthandProperties: readonly [{
+    readonly parentKey: "style";
+    readonly shorthand: "background";
+    readonly longhands: readonly ["backgroundColor", "backgroundImage", "backgroundPosition", "backgroundSize", "backgroundRepeat", "backgroundOrigin", "backgroundClip", "backgroundAttachment"];
+    readonly parse: (value: string) => import("./parse-background-shorthand").ParsedBackgroundShorthand | null;
+    readonly isUnsupportedProperty: () => false;
+}, {
+    readonly parentKey: "style";
+    readonly shorthand: "border";
+    readonly longhands: readonly ["borderWidth", "borderStyle", "borderColor"];
+    readonly parse: (value: string) => import("./parse-border-shorthand").ParsedBorderShorthand | null;
+    readonly isUnsupportedProperty: (propertyName: string) => boolean;
+}];
+export declare const getCssShorthandForLonghand: ({ parentKey, longhand, }: {
+    parentKey: string;
+    longhand: string;
+}) => CssShorthandProperty | null;
+export declare const getCssShorthandsForUpdates: (updateKeys: readonly string[]) => CssShorthandProperty[];
+export {};

package/dist/helpers/css-shorthand-properties.js

@@ -0,0 +1,43 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getCssShorthandsForUpdates = exports.getCssShorthandForLonghand = exports.cssShorthandProperties = void 0;
+const parse_background_shorthand_1 = require("./parse-background-shorthand");
+const parse_border_shorthand_1 = require("./parse-border-shorthand");
+const borderSidePropertyRegex = /^border(?:Top|Right|Bottom|Left)(?:Width|Style|Color)?$/;
+const borderShorthand = {
+    parentKey: 'style',
+    shorthand: 'border',
+    longhands: ['borderWidth', 'borderStyle', 'borderColor'],
+    parse: parse_border_shorthand_1.parseBorderShorthand,
+    isUnsupportedProperty: (propertyName) => borderSidePropertyRegex.test(propertyName),
+};
+const backgroundShorthand = {
+    parentKey: 'style',
+    shorthand: 'background',
+    longhands: [
+        'backgroundColor',
+        'backgroundImage',
+        'backgroundPosition',
+        'backgroundSize',
+        'backgroundRepeat',
+        'backgroundOrigin',
+        'backgroundClip',
+        'backgroundAttachment',
+    ],
+    parse: parse_background_shorthand_1.parseBackgroundShorthand,
+    isUnsupportedProperty: () => false,
+};
+exports.cssShorthandProperties = [
+    backgroundShorthand,
+    borderShorthand,
+];
+const getCssShorthandForLonghand = ({ parentKey, longhand, }) => {
+    var _a;
+    return ((_a = exports.cssShorthandProperties.find((property) => property.parentKey === parentKey &&
+        property.longhands.includes(longhand))) !== null && _a !== void 0 ? _a : null);
+};
+exports.getCssShorthandForLonghand = getCssShorthandForLonghand;
+const getCssShorthandsForUpdates = (updateKeys) => {
+    return exports.cssShorthandProperties.filter((property) => updateKeys.some((key) => property.longhands.some((longhand) => key === `${property.parentKey}.${longhand}`)));
+};
+exports.getCssShorthandsForUpdates = getCssShorthandsForUpdates;

package/dist/helpers/package-manager-spawn-options.d.ts

@@ -0,0 +1,2 @@
+import type { SpawnOptionsWithoutStdio } from 'node:child_process';
+export declare const getPackageManagerSpawnOptions: () => Pick<SpawnOptionsWithoutStdio, "shell">;

package/dist/helpers/package-manager-spawn-options.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getPackageManagerSpawnOptions = void 0;
+const getPackageManagerSpawnOptions = () => {
+    return process.platform === 'win32' ? { shell: true } : {};
+};
+exports.getPackageManagerSpawnOptions = getPackageManagerSpawnOptions;

package/dist/helpers/parse-background-shorthand.d.ts

@@ -0,0 +1,11 @@
+export type ParsedBackgroundShorthand = {
+    backgroundAttachment: string;
+    backgroundClip: string;
+    backgroundColor: string;
+    backgroundImage: string;
+    backgroundOrigin: string;
+    backgroundPosition: string;
+    backgroundRepeat: string;
+    backgroundSize: string;
+};
+export declare const parseBackgroundShorthand: (value: string) => ParsedBackgroundShorthand | null;

package/dist/helpers/parse-background-shorthand.js

@@ -0,0 +1,41 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.parseBackgroundShorthand = void 0;
+const no_react_1 = require("remotion/no-react");
+const CSS_WIDE_KEYWORDS = new Set([
+    'inherit',
+    'initial',
+    'revert',
+    'revert-layer',
+    'unset',
+]);
+const makeColorOnlyBackground = (backgroundColor) => {
+    return {
+        backgroundColor,
+        backgroundImage: 'none',
+        backgroundPosition: '0% 0%',
+        backgroundSize: 'auto auto',
+        backgroundRepeat: 'repeat',
+        backgroundOrigin: 'padding-box',
+        backgroundClip: 'border-box',
+        backgroundAttachment: 'scroll',
+    };
+};
+const parseBackgroundShorthand = (value) => {
+    const trimmed = value.trim();
+    const lowerCaseValue = trimmed.toLowerCase();
+    if (trimmed === '' || CSS_WIDE_KEYWORDS.has(lowerCaseValue)) {
+        return null;
+    }
+    if (lowerCaseValue === 'none') {
+        return makeColorOnlyBackground('transparent');
+    }
+    try {
+        no_react_1.NoReactInternals.processColor(trimmed);
+        return makeColorOnlyBackground(trimmed);
+    }
+    catch (_a) {
+        return null;
+    }
+};
+exports.parseBackgroundShorthand = parseBackgroundShorthand;

package/dist/helpers/parse-border-shorthand.d.ts

@@ -0,0 +1,6 @@
+export type ParsedBorderShorthand = {
+    borderWidth: number;
+    borderStyle: string;
+    borderColor: string;
+};
+export declare const parseBorderShorthand: (value: string) => ParsedBorderShorthand | null;

package/dist/helpers/parse-border-shorthand.js

@@ -0,0 +1,135 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.parseBorderShorthand = void 0;
+const BORDER_STYLES = new Set([
+    'none',
+    'hidden',
+    'dotted',
+    'dashed',
+    'solid',
+    'double',
+    'groove',
+    'ridge',
+    'inset',
+    'outset',
+]);
+const CSS_WIDE_KEYWORDS = new Set([
+    'inherit',
+    'initial',
+    'revert',
+    'revert-layer',
+    'unset',
+]);
+const BORDER_WIDTH_KEYWORDS = {
+    // Chromium resolves these CSS keywords to these pixel values.
+    thin: 1,
+    medium: 3,
+    thick: 5,
+};
+const splitCssWhitespace = (value) => {
+    const parts = [];
+    let current = '';
+    let parenthesisDepth = 0;
+    let quote = null;
+    for (const char of value.trim()) {
+        if (quote !== null) {
+            current += char;
+            if (char === quote) {
+                quote = null;
+            }
+            continue;
+        }
+        if (char === '"' || char === "'") {
+            quote = char;
+            current += char;
+            continue;
+        }
+        if (char === '(') {
+            parenthesisDepth++;
+            current += char;
+            continue;
+        }
+        if (char === ')') {
+            parenthesisDepth--;
+            if (parenthesisDepth < 0) {
+                return null;
+            }
+            current += char;
+            continue;
+        }
+        if (/\s/.test(char) && parenthesisDepth === 0) {
+            if (current !== '') {
+                parts.push(current);
+                current = '';
+            }
+            continue;
+        }
+        current += char;
+    }
+    if (quote !== null || parenthesisDepth !== 0) {
+        return null;
+    }
+    if (current !== '') {
+        parts.push(current);
+    }
+    return parts;
+};
+const parsePixelWidth = (token) => {
+    if (token === '0') {
+        return 0;
+    }
+    const match = token.match(/^(\d+(?:\.\d+)?|\.\d+)px$/i);
+    if (!match) {
+        return null;
+    }
+    return Number(match[1]);
+};
+const parseBorderShorthand = (value) => {
+    const tokens = splitCssWhitespace(value);
+    if (!tokens || tokens.length === 0) {
+        return null;
+    }
+    let borderWidth = null;
+    let borderStyle = null;
+    let borderColor = null;
+    for (const token of tokens) {
+        const lowerCaseToken = token.toLowerCase();
+        if (CSS_WIDE_KEYWORDS.has(lowerCaseToken)) {
+            return null;
+        }
+        if (BORDER_STYLES.has(lowerCaseToken)) {
+            if (borderStyle !== null) {
+                return null;
+            }
+            borderStyle = lowerCaseToken;
+            continue;
+        }
+        const width = parsePixelWidth(token);
+        if (width !== null) {
+            if (borderWidth !== null) {
+                return null;
+            }
+            borderWidth = width;
+            continue;
+        }
+        const keywordWidth = BORDER_WIDTH_KEYWORDS[lowerCaseToken];
+        if (keywordWidth !== undefined) {
+            if (borderWidth !== null) {
+                return null;
+            }
+            borderWidth = keywordWidth;
+            continue;
+        }
+        if (borderColor === null) {
+            borderColor = token;
+            continue;
+        }
+        return null;
+    }
+    return {
+        borderWidth: borderWidth !== null && borderWidth !== void 0 ? borderWidth : BORDER_WIDTH_KEYWORDS.medium,
+        borderStyle: borderStyle !== null && borderStyle !== void 0 ? borderStyle : 'none',
+        borderColor: borderColor !== null && borderColor !== void 0 ? borderColor : 'currentColor',
+    };
+};
+exports.parseBorderShorthand = parseBorderShorthand;

package/dist/helpers/resolve-composition-component.d.ts

@@ -19,11 +19,12 @@ export declare const resolveCompositionComponent: ({ remotionRoot, compositionFi
     compositionFile: string;
     compositionId: string;
 }) => Promise<ResolvedCompositionComponent>;
-export declare const insertJsxElementIntoComposition: ({ remotionRoot, compositionFile, compositionId, element, prettierConfigOverride, wrapInSequence, }: {
+export declare const insertJsxElementIntoComposition: ({ remotionRoot, compositionFile, compositionId, element, from, prettierConfigOverride, wrapInSequence, }: {
     remotionRoot: string;
     compositionFile: string;
     compositionId: string;
     element: InsertableCompositionElement;
+    from: number | null;
     prettierConfigOverride: Record<string, unknown> | null;
     wrapInSequence?: {
         dimensions: {
@@ -31,6 +32,7 @@ export declare const insertJsxElementIntoComposition: ({ remotionRoot, compositi
             height: number;
         } | null;
         durationInFrames?: number | null | undefined;
+        from: number | null;
         name: string | null;
         position: InsertableCompositionElementPosition | null;
     } | null | undefined;

package/dist/helpers/resolve-composition-component.js

@@ -578,16 +578,18 @@ const createSolidElement = ({ localName, width, height, position, }) => {
         createPositionAbsoluteStyleAttribute(position),
     ], true), null, []);
 };
-const createComponentElement = ({ addPositionStyle, localName, props, position, }) => {
+const createComponentElement = ({ addPositionStyle, from, localName, props, position, }) => {
     return recast.types.builders.jsxElement(recast.types.builders.jsxOpeningElement(recast.types.builders.jsxIdentifier(localName), [
         ...props.map(createComponentProp),
+        ...(from === null ? [] : [createNumberAttribute('from', from)]),
         ...(addPositionStyle
             ? [createPositionAbsoluteStyleAttribute(position)]
             : []),
     ], true), null, []);
 };
-const createSequenceWrappedElement = ({ child, dimensions, durationInFrames, name, position, sequenceLocalName, }) => {
+const createSequenceWrappedElement = ({ child, dimensions, durationInFrames, from, name, position, sequenceLocalName, }) => {
     return recast.types.builders.jsxElement(recast.types.builders.jsxOpeningElement(recast.types.builders.jsxIdentifier(sequenceLocalName), [
+        ...(from === null ? [] : [createNumberAttribute('from', from)]),
         ...(name === null ? [] : [createStringAttribute('name', name)]),
         ...(dimensions !== null
             ? [
@@ -601,22 +603,29 @@ const createSequenceWrappedElement = ({ child, dimensions, durationInFrames, nam
         createPositionAbsoluteStyleAttribute(position),
     ], false), recast.types.builders.jsxClosingElement(recast.types.builders.jsxIdentifier(sequenceLocalName)), [child]);
 };
-const createAssetElement = ({ addPositionStyle, localName, staticFileLocalName, src, dimensions, position, }) => {
+const createAssetElement = ({ addPositionStyle, durationInFrames, from, localName, staticFileLocalName, src, dimensions, position, }) => {
     return recast.types.builders.jsxElement(recast.types.builders.jsxOpeningElement(recast.types.builders.jsxIdentifier(localName), [
         staticFileLocalName === null
             ? createStringSrcAttribute(src)
             : createStaticFileSrcAttribute({ staticFileLocalName, src }),
+        ...(durationInFrames === null
+            ? []
+            : [createNumberAttribute('durationInFrames', durationInFrames)]),
+        ...(from === null ? [] : [createNumberAttribute('from', from)]),
         ...(addPositionStyle
             ? [createAssetStyleAttribute({ dimensions, position })]
             : []),
     ], true), null, []);
 };
-const createSvgElement = async ({ interactiveLocalName, markup, position, }) => {
+const createSvgElement = async ({ from, interactiveLocalName, markup, position, }) => {
     var _a;
     var _b;
     const svgElement = await (0, svg_to_jsx_1.svgMarkupToJsx)(markup);
     const attributes = (_b = svgElement.openingElement.attributes) !== null && _b !== void 0 ? _b : [];
     svgElement.openingElement.attributes = attributes;
+    if (from !== null) {
+        attributes.push(createNumberAttribute('from', from));
+    }
     const styleAttribute = attributes.find((attribute) => attribute.type === 'JSXAttribute' &&
         attribute.name.type === 'JSXIdentifier' &&
         attribute.name.name === 'style');
@@ -1317,7 +1326,7 @@ const resolveCompositionComponent = async ({ remotionRoot, compositionFile, comp
     };
 };
 exports.resolveCompositionComponent = resolveCompositionComponent;
-const createInsertableJsxElement = ({ addPositionStyleToComponent, ast, destinationFileName, element, remotionRoot, }) => {
+const createInsertableJsxElement = ({ addPositionStyleToComponent, ast, destinationFileName, element, from, remotionRoot, }) => {
     if (element.type === 'solid') {
         const solidLocalName = ensureSolidImport(ast);
         return createSolidElement({
@@ -1336,6 +1345,7 @@ const createInsertableJsxElement = ({ addPositionStyleToComponent, ast, destinat
         });
         return createComponentElement({
             addPositionStyle: addPositionStyleToComponent,
+            from,
             localName: componentLocalName,
             props: element.props,
             position: element.position,
@@ -1343,6 +1353,7 @@ const createInsertableJsxElement = ({ addPositionStyleToComponent, ast, destinat
     }
     if (element.type === 'svg') {
         return createSvgElement({
+            from,
             interactiveLocalName: ensureInteractiveImport(ast),
             markup: element.markup,
             position: element.position,
@@ -1388,17 +1399,21 @@ const createInsertableJsxElement = ({ addPositionStyleToComponent, ast, destinat
             throw new Error('Unsupported asset type');
         }
         return createAssetElement({
-            addPositionStyle: element.assetType !== 'audio',
+            addPositionStyle: addPositionStyleToComponent && element.assetType !== 'audio',
+            durationInFrames: element.assetType === 'image' ? null : element.durationInFrames,
+            from,
             localName,
             staticFileLocalName,
             src: element.src,
-            dimensions: element.dimensions,
+            dimensions: element.assetType === 'image' && from !== null
+                ? null
+                : element.dimensions,
             position: element.position,
         });
     }
     throw new Error('Unsupported element type');
 };
-const insertJsxElementIntoComposition = async ({ remotionRoot, compositionFile, compositionId, element, prettierConfigOverride, wrapInSequence = null, }) => {
+const insertJsxElementIntoComposition = async ({ remotionRoot, compositionFile, compositionId, element, from, prettierConfigOverride, wrapInSequence = null, }) => {
     var _a;
     const location = await (0, exports.resolveCompositionComponentWithFile)({
         remotionRoot,
@@ -1423,13 +1438,26 @@ const insertJsxElementIntoComposition = async ({ remotionRoot, compositionFile,
             durationInFrames: element.durationInFrames,
             name: element.compositionId,
             position: element.position,
+            from,
         }
-        : wrapInSequence;
+        : from === null ||
+            element.type === 'asset' ||
+            element.type === 'svg' ||
+            element.type === 'component'
+            ? wrapInSequence
+            : {
+                dimensions: null,
+                durationInFrames: null,
+                name: null,
+                position: element.position,
+                from,
+            };
     const elementToInsert = await createInsertableJsxElement({
         addPositionStyleToComponent: sequenceWrapper === null,
         ast,
         destinationFileName: location.fileName,
         element,
+        from,
         remotionRoot,
     });
     const finalElementToInsert = sequenceWrapper
@@ -1437,6 +1465,7 @@ const insertJsxElementIntoComposition = async ({ remotionRoot, compositionFile,
             child: elementToInsert,
             dimensions: sequenceWrapper.dimensions,
             durationInFrames: (_a = sequenceWrapper.durationInFrames) !== null && _a !== void 0 ? _a : null,
+            from: sequenceWrapper.from,
             name: sequenceWrapper.name,
             position: sequenceWrapper.position,
             sequenceLocalName: ensureSequenceImport(ast),

package/dist/index.d.ts

@@ -115,6 +115,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,