@remotion/studio-server 4.0.495 → 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/recast-mods.js

@@ -37,6 +37,7 @@ exports.applyCodemod = void 0;
 const recast = __importStar(require("recast"));
 const apply_visual_control_1 = require("./apply-visual-control");
 const delete_jsx_node_1 = require("./delete-jsx-node");
+const strip_parenthesized_extra_1 = require("./strip-parenthesized-extra");
 const b = recast.types.builders;
 const applyCodemod = ({ file, codeMod, }) => {
     const changesMade = [];
@@ -131,25 +132,13 @@ const mapReturnStatement = (statement, transformation, changesMade, parentFolder
     };
 };
 const nullLiteral = () => ({ type: 'NullLiteral' });
-// When a node was originally parenthesized (e.g. the `<JSX/>` inside
-// `return (<JSX/>)`), Babel records `extra.parenthesized` on it. If we move
-// such a node into a JSXFragment without clearing that hint, recast prints
-// stray `(` / `)` characters around it as JSX text. Clear the hint so the
-// node prints cleanly in its new context.
-const stripParenthesizedExtra = (node) => {
-    if (!node.extra) {
-        return node;
-    }
-    const { parenthesized: _p, parenStart: _ps, ...rest } = node.extra;
-    return { ...node, extra: rest };
-};
 const wrapInJsxFragment = (children) => ({
     type: 'JSXFragment',
     openingFragment: { type: 'JSXOpeningFragment' },
     closingFragment: { type: 'JSXClosingFragment' },
     children: children.map((child) => {
         if (child.type === 'JSXElement' || child.type === 'JSXFragment') {
-            return stripParenthesizedExtra(child);
+            return (0, strip_parenthesized_extra_1.stripParenthesizedExtra)(child);
         }
         return child;
     }),
@@ -292,7 +281,7 @@ const appendCompositionToFolder = ({ compositionElement, folderElement, }) => {
         type: 'JSXClosingElement',
         name: folderElement.openingElement.name,
     };
-    folderElement.children.push(stripParenthesizedExtra(compositionElement));
+    folderElement.children.push((0, strip_parenthesized_extra_1.stripParenthesizedExtra)(compositionElement));
 };
 const appendCompositionToRoot = ({ compositionElement, file, }) => {
     let appended = false;
@@ -307,7 +296,7 @@ const appendCompositionToRoot = ({ compositionElement, file, }) => {
                 return undefined;
             }
             if (argument.type === 'JSXFragment') {
-                argument.children.push(stripParenthesizedExtra(compositionElement));
+                argument.children.push((0, strip_parenthesized_extra_1.stripParenthesizedExtra)(compositionElement));
             }
             else {
                 astPath.node.argument = wrapInJsxFragment([

package/dist/codemods/strip-parenthesized-extra.d.ts

@@ -0,0 +1 @@
+export declare const stripParenthesizedExtra: <T extends object>(node: T) => T;

package/dist/codemods/strip-parenthesized-extra.js

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.stripParenthesizedExtra = void 0;
+// When a node was originally parenthesized (e.g. the `<JSX/>` inside
+// `return (<JSX/>)`), Babel records `extra.parenthesized` on it. If we move
+// such a node into a new JSX parent without clearing that hint, recast prints
+// stray `(` / `)` characters around it as JSX text.
+const stripParenthesizedExtra = (node) => {
+    const { extra } = node;
+    if (!extra) {
+        return node;
+    }
+    const { parenthesized: _p, parenStart: _ps, ...rest } = extra;
+    return { ...node, extra: rest };
+};
+exports.stripParenthesizedExtra = stripParenthesizedExtra;

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;