@remotion/studio-server 4.0.469 → 4.0.471

package/dist/helpers/open-in-editor.js

@@ -136,6 +136,15 @@ const editorNames = [
     '/Applications/Windsurf.app/Contents/MacOS/Windsurf',
     'Windsurf.exe',
     'zed',
+    'zedit',
+    'zeditor',
+    'zed-editor',
+    '/Applications/Zed.app/Contents/MacOS/zed',
+    '/Applications/Zed.app/Contents/MacOS/cli',
+    '/Applications/Zed Preview.app/Contents/MacOS/zed',
+    '/Applications/Zed Preview.app/Contents/MacOS/cli',
+    '/Applications/Zed Preview.app/Contents/MacOS/Zed Preview',
+    'Zed.exe',
 ];
 const displayNameForEditor = {
     '/Applications/AppCode.app/Contents/MacOS/appcode': 'AppCode',
@@ -159,6 +168,7 @@ const displayNameForEditor = {
     'Code.exe': 'VS Code',
     'Cursor.exe': 'Cursor',
     'Windsurf.exe': 'Windsurf',
+    'Zed.exe': 'Zed',
     'VSCodium.exe': 'VS Codium',
     'atom.exe': 'Atom',
     'clion.exe': 'CLion',
@@ -186,6 +196,14 @@ const displayNameForEditor = {
     cursor: 'Cursor',
     windsurf: 'Windsurf',
     zed: 'Zed',
+    zedit: 'Zed',
+    zeditor: 'Zed',
+    'zed-editor': 'Zed',
+    '/Applications/Zed.app/Contents/MacOS/zed': 'Zed',
+    '/Applications/Zed.app/Contents/MacOS/cli': 'Zed',
+    '/Applications/Zed Preview.app/Contents/MacOS/zed': 'Zed Preview',
+    '/Applications/Zed Preview.app/Contents/MacOS/cli': 'Zed Preview',
+    '/Applications/Zed Preview.app/Contents/MacOS/Zed Preview': 'Zed Preview',
     emacs: 'emacs',
     goland: 'GoLand',
     gvim: 'GVim',
@@ -228,6 +246,9 @@ const COMMON_EDITORS_OSX = {
     '/Applications/VSCodium.app/Contents/MacOS/Electron': 'vscodium',
     '/Applications/Cursor.app/Contents/MacOS/Cursor': 'cursor',
     '/Applications/Windsurf.app/Contents/MacOS/Electron': 'windsurf',
+    '/Applications/Zed.app/Contents/MacOS/zed': '/Applications/Zed.app/Contents/MacOS/cli',
+    '/Applications/Zed Preview.app/Contents/MacOS/zed': '/Applications/Zed Preview.app/Contents/MacOS/cli',
+    '/Applications/Zed Preview.app/Contents/MacOS/Zed Preview': '/Applications/Zed Preview.app/Contents/MacOS/cli',
     '/Applications/AppCode.app/Contents/MacOS/appcode': '/Applications/AppCode.app/Contents/MacOS/appcode',
     '/Applications/CLion.app/Contents/MacOS/clion': '/Applications/CLion.app/Contents/MacOS/clion',
     '/Applications/IntelliJ IDEA.app/Contents/MacOS/idea': '/Applications/IntelliJ IDEA.app/Contents/MacOS/idea',
@@ -248,6 +269,9 @@ const COMMON_EDITORS_LINUX = {
     cursor: 'cursor',
     windsurf: 'windsurf',
     zed: 'zed',
+    zedit: 'zedit',
+    zeditor: 'zeditor',
+    'zed-editor': 'zed-editor',
     vscodium: 'vscodium',
     emacs: 'emacs',
     gvim: 'gvim',
@@ -268,6 +292,7 @@ const COMMON_EDITORS_WIN = [
     'VSCodium.exe',
     'Cursor.exe',
     'Windsurf.exe',
+    'Zed.exe',
     'atom.exe',
     'sublime_text.exe',
     'notepad++.exe',
@@ -294,7 +319,17 @@ const COMMON_EDITORS_WIN = [
 const WINDOWS_FILE_NAME_WHITELIST = /^([A-Za-z]:[/\\])?(?:[\x2D-9A-Z\\_a-z\xAA\xB5\xBA\xC0-\xD6\xD8-\xF6\xF8-\u02C1\u02C6-\u02D1\u02E0-\u02E4\u02EC\u02EE\u0370-\u0374\u0376\u0377\u037A-\u037D\u037F\u0386\u0388-\u038A\u038C\u038E-\u03A1\u03A3-\u03F5\u03F7-\u0481\u048A-\u052F\u0531-\u0556\u0559\u0560-\u0588\u05D0-\u05EA\u05EF-\u05F2\u0620-\u064A\u066E\u066F\u0671-\u06D3\u06D5\u06E5\u06E6\u06EE\u06EF\u06FA-\u06FC\u06FF\u0710\u0712-\u072F\u074D-\u07A5\u07B1\u07CA-\u07EA\u07F4\u07F5\u07FA\u0800-\u0815\u081A\u0824\u0828\u0840-\u0858\u0860-\u086A\u08A0-\u08B4\u08B6-\u08BD\u0904-\u0939\u093D\u0950\u0958-\u0961\u0971-\u0980\u0985-\u098C\u098F\u0990\u0993-\u09A8\u09AA-\u09B0\u09B2\u09B6-\u09B9\u09BD\u09CE\u09DC\u09DD\u09DF-\u09E1\u09F0\u09F1\u09FC\u0A05-\u0A0A\u0A0F\u0A10\u0A13-\u0A28\u0A2A-\u0A30\u0A32\u0A33\u0A35\u0A36\u0A38\u0A39\u0A59-\u0A5C\u0A5E\u0A72-\u0A74\u0A85-\u0A8D\u0A8F-\u0A91\u0A93-\u0AA8\u0AAA-\u0AB0\u0AB2\u0AB3\u0AB5-\u0AB9\u0ABD\u0AD0\u0AE0\u0AE1\u0AF9\u0B05-\u0B0C\u0B0F\u0B10\u0B13-\u0B28\u0B2A-\u0B30\u0B32\u0B33\u0B35-\u0B39\u0B3D\u0B5C\u0B5D\u0B5F-\u0B61\u0B71\u0B83\u0B85-\u0B8A\u0B8E-\u0B90\u0B92-\u0B95\u0B99\u0B9A\u0B9C\u0B9E\u0B9F\u0BA3\u0BA4\u0BA8-\u0BAA\u0BAE-\u0BB9\u0BD0\u0C05-\u0C0C\u0C0E-\u0C10\u0C12-\u0C28\u0C2A-\u0C39\u0C3D\u0C58-\u0C5A\u0C60\u0C61\u0C80\u0C85-\u0C8C\u0C8E-\u0C90\u0C92-\u0CA8\u0CAA-\u0CB3\u0CB5-\u0CB9\u0CBD\u0CDE\u0CE0\u0CE1\u0CF1\u0CF2\u0D05-\u0D0C\u0D0E-\u0D10\u0D12-\u0D3A\u0D3D\u0D4E\u0D54-\u0D56\u0D5F-\u0D61\u0D7A-\u0D7F\u0D85-\u0D96\u0D9A-\u0DB1\u0DB3-\u0DBB\u0DBD\u0DC0-\u0DC6\u0E01-\u0E30\u0E32\u0E33\u0E40-\u0E46\u0E81\u0E82\u0E84\u0E87\u0E88\u0E8A\u0E8D\u0E94-\u0E97\u0E99-\u0E9F\u0EA1-\u0EA3\u0EA5\u0EA7\u0EAA\u0EAB\u0EAD-\u0EB0\u0EB2\u0EB3\u0EBD\u0EC0-\u0EC4\u0EC6\u0EDC-\u0EDF\u0F00\u0F40-\u0F47\u0F49-\u0F6C\u0F88-\u0F8C\u1000-\u102A\u103F\u1050-\u1055\u105A-\u105D\u1061\u1065\u1066\u106E-\u1070\u1075-\u1081\u108E\u10A0-\u10C5\u10C7\u10CD\u10D0-\u10FA\u10FC-\u1248\u124A-\u124D\u1250-\u1256\u1258\u125A-\u125D\u1260-\u1288\u128A-\u128D\u1290-\u12B0\u12B2-\u12B5\u12B8-\u12BE\u12C0\u12C2-\u12C5\u12C8-\u12D6\u12D8-\u1310\u1312-\u1315\u1318-\u135A\u1380-\u138F\u13A0-\u13F5\u13F8-\u13FD\u1401-\u166C\u166F-\u167F\u1681-\u169A\u16A0-\u16EA\u16F1-\u16F8\u1700-\u170C\u170E-\u1711\u1720-\u1731\u1740-\u1751\u1760-\u176C\u176E-\u1770\u1780-\u17B3\u17D7\u17DC\u1820-\u1878\u1880-\u1884\u1887-\u18A8\u18AA\u18B0-\u18F5\u1900-\u191E\u1950-\u196D\u1970-\u1974\u1980-\u19AB\u19B0-\u19C9\u1A00-\u1A16\u1A20-\u1A54\u1AA7\u1B05-\u1B33\u1B45-\u1B4B\u1B83-\u1BA0\u1BAE\u1BAF\u1BBA-\u1BE5\u1C00-\u1C23\u1C4D-\u1C4F\u1C5A-\u1C7D\u1C80-\u1C88\u1C90-\u1CBA\u1CBD-\u1CBF\u1CE9-\u1CEC\u1CEE-\u1CF1\u1CF5\u1CF6\u1D00-\u1DBF\u1E00-\u1F15\u1F18-\u1F1D\u1F20-\u1F45\u1F48-\u1F4D\u1F50-\u1F57\u1F59\u1F5B\u1F5D\u1F5F-\u1F7D\u1F80-\u1FB4\u1FB6-\u1FBC\u1FBE\u1FC2-\u1FC4\u1FC6-\u1FCC\u1FD0-\u1FD3\u1FD6-\u1FDB\u1FE0-\u1FEC\u1FF2-\u1FF4\u1FF6-\u1FFC\u2071\u207F\u2090-\u209C\u2102\u2107\u210A-\u2113\u2115\u2119-\u211D\u2124\u2126\u2128\u212A-\u212D\u212F-\u2139\u213C-\u213F\u2145-\u2149\u214E\u2183\u2184\u2C00-\u2C2E\u2C30-\u2C5E\u2C60-\u2CE4\u2CEB-\u2CEE\u2CF2\u2CF3\u2D00-\u2D25\u2D27\u2D2D\u2D30-\u2D67\u2D6F\u2D80-\u2D96\u2DA0-\u2DA6\u2DA8-\u2DAE\u2DB0-\u2DB6\u2DB8-\u2DBE\u2DC0-\u2DC6\u2DC8-\u2DCE\u2DD0-\u2DD6\u2DD8-\u2DDE\u2E2F\u3005\u3006\u3031-\u3035\u303B\u303C\u3041-\u3096\u309D-\u309F\u30A1-\u30FA\u30FC-\u30FF\u3105-\u312F\u3131-\u318E\u31A0-\u31BA\u31F0-\u31FF\u3400-\u4DB5\u4E00-\u9FEF\uA000-\uA48C\uA4D0-\uA4FD\uA500-\uA60C\uA610-\uA61F\uA62A\uA62B\uA640-\uA66E\uA67F-\uA69D\uA6A0-\uA6E5\uA717-\uA71F\uA722-\uA788\uA78B-\uA7B9\uA7F7-\uA801\uA803-\uA805\uA807-\uA80A\uA80C-\uA822\uA840-\uA873\uA882-\uA8B3\uA8F2-\uA8F7\uA8FB\uA8FD\uA8FE\uA90A-\uA925\uA930-\uA946\uA960-\uA97C\uA984-\uA9B2\uA9CF\uA9E0-\uA9E4\uA9E6-\uA9EF\uA9FA-\uA9FE\uAA00-\uAA28\uAA40-\uAA42\uAA44-\uAA4B\uAA60-\uAA76\uAA7A\uAA7E-\uAAAF\uAAB1\uAAB5\uAAB6\uAAB9-\uAABD\uAAC0\uAAC2\uAADB-\uAADD\uAAE0-\uAAEA\uAAF2-\uAAF4\uAB01-\uAB06\uAB09-\uAB0E\uAB11-\uAB16\uAB20-\uAB26\uAB28-\uAB2E\uAB30-\uAB5A\uAB5C-\uAB65\uAB70-\uABE2\uAC00-\uD7A3\uD7B0-\uD7C6\uD7CB-\uD7FB\uF900-\uFA6D\uFA70-\uFAD9\uFB00-\uFB06\uFB13-\uFB17\uFB1D\uFB1F-\uFB28\uFB2A-\uFB36\uFB38-\uFB3C\uFB3E\uFB40\uFB41\uFB43\uFB44\uFB46-\uFBB1\uFBD3-\uFD3D\uFD50-\uFD8F\uFD92-\uFDC7\uFDF0-\uFDFB\uFE70-\uFE74\uFE76-\uFEFC\uFF21-\uFF3A\uFF41-\uFF5A\uFF66-\uFFBE\uFFC2-\uFFC7\uFFCA-\uFFCF\uFFD2-\uFFD7\uFFDA-\uFFDC]|\uD800[\uDC00-\uDC0B\uDC0D-\uDC26\uDC28-\uDC3A\uDC3C\uDC3D\uDC3F-\uDC4D\uDC50-\uDC5D\uDC80-\uDCFA\uDE80-\uDE9C\uDEA0-\uDED0\uDF00-\uDF1F\uDF2D-\uDF40\uDF42-\uDF49\uDF50-\uDF75\uDF80-\uDF9D\uDFA0-\uDFC3\uDFC8-\uDFCF]|\uD801[\uDC00-\uDC9D\uDCB0-\uDCD3\uDCD8-\uDCFB\uDD00-\uDD27\uDD30-\uDD63\uDE00-\uDF36\uDF40-\uDF55\uDF60-\uDF67]|\uD802[\uDC00-\uDC05\uDC08\uDC0A-\uDC35\uDC37\uDC38\uDC3C\uDC3F-\uDC55\uDC60-\uDC76\uDC80-\uDC9E\uDCE0-\uDCF2\uDCF4\uDCF5\uDD00-\uDD15\uDD20-\uDD39\uDD80-\uDDB7\uDDBE\uDDBF\uDE00\uDE10-\uDE13\uDE15-\uDE17\uDE19-\uDE35\uDE60-\uDE7C\uDE80-\uDE9C\uDEC0-\uDEC7\uDEC9-\uDEE4\uDF00-\uDF35\uDF40-\uDF55\uDF60-\uDF72\uDF80-\uDF91]|\uD803[\uDC00-\uDC48\uDC80-\uDCB2\uDCC0-\uDCF2\uDD00-\uDD23\uDF00-\uDF1C\uDF27\uDF30-\uDF45]|\uD804[\uDC03-\uDC37\uDC83-\uDCAF\uDCD0-\uDCE8\uDD03-\uDD26\uDD44\uDD50-\uDD72\uDD76\uDD83-\uDDB2\uDDC1-\uDDC4\uDDDA\uDDDC\uDE00-\uDE11\uDE13-\uDE2B\uDE80-\uDE86\uDE88\uDE8A-\uDE8D\uDE8F-\uDE9D\uDE9F-\uDEA8\uDEB0-\uDEDE\uDF05-\uDF0C\uDF0F\uDF10\uDF13-\uDF28\uDF2A-\uDF30\uDF32\uDF33\uDF35-\uDF39\uDF3D\uDF50\uDF5D-\uDF61]|\uD805[\uDC00-\uDC34\uDC47-\uDC4A\uDC80-\uDCAF\uDCC4\uDCC5\uDCC7\uDD80-\uDDAE\uDDD8-\uDDDB\uDE00-\uDE2F\uDE44\uDE80-\uDEAA\uDF00-\uDF1A]|\uD806[\uDC00-\uDC2B\uDCA0-\uDCDF\uDCFF\uDE00\uDE0B-\uDE32\uDE3A\uDE50\uDE5C-\uDE83\uDE86-\uDE89\uDE9D\uDEC0-\uDEF8]|\uD807[\uDC00-\uDC08\uDC0A-\uDC2E\uDC40\uDC72-\uDC8F\uDD00-\uDD06\uDD08\uDD09\uDD0B-\uDD30\uDD46\uDD60-\uDD65\uDD67\uDD68\uDD6A-\uDD89\uDD98\uDEE0-\uDEF2]|\uD808[\uDC00-\uDF99]|\uD809[\uDC80-\uDD43]|[\uD80C\uD81C-\uD820\uD840-\uD868\uD86A-\uD86C\uD86F-\uD872\uD874-\uD879][\uDC00-\uDFFF]|\uD80D[\uDC00-\uDC2E]|\uD811[\uDC00-\uDE46]|\uD81A[\uDC00-\uDE38\uDE40-\uDE5E\uDED0-\uDEED\uDF00-\uDF2F\uDF40-\uDF43\uDF63-\uDF77\uDF7D-\uDF8F]|\uD81B[\uDE40-\uDE7F\uDF00-\uDF44\uDF50\uDF93-\uDF9F\uDFE0\uDFE1]|\uD821[\uDC00-\uDFF1]|\uD822[\uDC00-\uDEF2]|\uD82C[\uDC00-\uDD1E\uDD70-\uDEFB]|\uD82F[\uDC00-\uDC6A\uDC70-\uDC7C\uDC80-\uDC88\uDC90-\uDC99]|\uD835[\uDC00-\uDC54\uDC56-\uDC9C\uDC9E\uDC9F\uDCA2\uDCA5\uDCA6\uDCA9-\uDCAC\uDCAE-\uDCB9\uDCBB\uDCBD-\uDCC3\uDCC5-\uDD05\uDD07-\uDD0A\uDD0D-\uDD14\uDD16-\uDD1C\uDD1E-\uDD39\uDD3B-\uDD3E\uDD40-\uDD44\uDD46\uDD4A-\uDD50\uDD52-\uDEA5\uDEA8-\uDEC0\uDEC2-\uDEDA\uDEDC-\uDEFA\uDEFC-\uDF14\uDF16-\uDF34\uDF36-\uDF4E\uDF50-\uDF6E\uDF70-\uDF88\uDF8A-\uDFA8\uDFAA-\uDFC2\uDFC4-\uDFCB]|\uD83A[\uDC00-\uDCC4\uDD00-\uDD43]|\uD83B[\uDE00-\uDE03\uDE05-\uDE1F\uDE21\uDE22\uDE24\uDE27\uDE29-\uDE32\uDE34-\uDE37\uDE39\uDE3B\uDE42\uDE47\uDE49\uDE4B\uDE4D-\uDE4F\uDE51\uDE52\uDE54\uDE57\uDE59\uDE5B\uDE5D\uDE5F\uDE61\uDE62\uDE64\uDE67-\uDE6A\uDE6C-\uDE72\uDE74-\uDE77\uDE79-\uDE7C\uDE7E\uDE80-\uDE89\uDE8B-\uDE9B\uDEA1-\uDEA3\uDEA5-\uDEA9\uDEAB-\uDEBB]|\uD869[\uDC00-\uDED6\uDF00-\uDFFF]|\uD86D[\uDC00-\uDF34\uDF40-\uDFFF]|\uD86E[\uDC00-\uDC1D\uDC20-\uDFFF]|\uD873[\uDC00-\uDEA1\uDEB0-\uDFFF]|\uD87A[\uDC00-\uDFE0]|\uD87E[\uDC00-\uDE1D])+$/;
 function getArgumentsForLineNumber(editor, fileName, lineNumber, colNumber) {
     const editorBasename = node_path_1.default.basename(editor).replace(/\.(exe|cmd|bat)$/i, '');
+    const isZedEditor = editor === 'zed' ||
+        editor === 'zedit' ||
+        editor === 'zeditor' ||
+        editor === 'zed-editor' ||
+        editor === 'Zed.exe' ||
+        editor.endsWith('/Zed.app/Contents/MacOS/cli') ||
+        editor.endsWith('/Zed Preview.app/Contents/MacOS/cli');
     const isFolder = node_fs_1.default.existsSync(fileName) && node_fs_1.default.lstatSync(fileName).isDirectory();
+    if (isZedEditor) {
+        return [fileName + ':' + lineNumber + ':' + colNumber];
+    }
     switch (editorBasename) {
         case 'atom':
         case 'Atom':
@@ -333,8 +368,6 @@ function getArgumentsForLineNumber(editor, fileName, lineNumber, colNumber) {
         case 'windsurf':
         case 'Windsurf':
             return ['-g', fileName + ':' + lineNumber + ':' + colNumber];
-        case 'zed':
-            return ['--new', fileName + ':' + lineNumber + ':' + colNumber];
         case 'appcode':
         case 'clion':
         case 'clion64':

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

@@ -1,3 +1,4 @@
+import type { InsertableCompositionElement } from '@remotion/studio-shared';
 export type ResolvedCompositionComponent = {
     source: string;
     line: number;
@@ -9,3 +10,17 @@ export declare const resolveCompositionComponent: ({ remotionRoot, compositionFi
     compositionFile: string;
     compositionId: string;
 }) => Promise<ResolvedCompositionComponent>;
+export declare const insertJsxElementIntoComposition: ({ remotionRoot, compositionFile, compositionId, element, prettierConfigOverride, }: {
+    remotionRoot: string;
+    compositionFile: string;
+    compositionId: string;
+    element: InsertableCompositionElement;
+    prettierConfigOverride: Record<string, unknown> | null;
+}) => Promise<{
+    fileName: string;
+    source: string;
+    oldContents: string;
+    output: string;
+    formatted: boolean;
+    logLine: number;
+}>;

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

@@ -36,10 +36,11 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.resolveCompositionComponent = void 0;
+exports.insertJsxElementIntoComposition = exports.resolveCompositionComponent = void 0;
 const node_fs_1 = __importDefault(require("node:fs"));
 const node_path_1 = __importDefault(require("node:path"));
 const recast = __importStar(require("recast"));
+const format_file_content_1 = require("../codemods/format-file-content");
 const parse_ast_1 = require("../codemods/parse-ast");
 const allowedFileExtensions = new Set(['.tsx', '.ts', '.jsx', '.js']);
 const extensionsToProbe = ['.tsx', '.ts', '.jsx', '.js'];
@@ -503,6 +504,205 @@ const getComponentRootNode = (declaration) => {
 const createSequenceElement = () => {
     return recast.types.builders.jsxElement(recast.types.builders.jsxOpeningElement(recast.types.builders.jsxIdentifier('Sequence'), []), recast.types.builders.jsxClosingElement(recast.types.builders.jsxIdentifier('Sequence')), []);
 };
+const createNumberAttribute = (name, value) => {
+    return recast.types.builders.jsxAttribute(recast.types.builders.jsxIdentifier(name), recast.types.builders.jsxExpressionContainer(recast.types.builders.numericLiteral(value)));
+};
+const createSolidElement = ({ localName, width, height, }) => {
+    return recast.types.builders.jsxElement(recast.types.builders.jsxOpeningElement(recast.types.builders.jsxIdentifier(localName), [
+        createNumberAttribute('width', width),
+        createNumberAttribute('height', height),
+        recast.types.builders.jsxAttribute(recast.types.builders.jsxIdentifier('style'), recast.types.builders.jsxExpressionContainer(recast.types.builders.objectExpression([
+            recast.types.builders.objectProperty(recast.types.builders.identifier('position'), recast.types.builders.stringLiteral('absolute')),
+        ]))),
+    ], true), null, []);
+};
+const createFragmentWithElement = (element) => {
+    return recast.types.builders.jsxFragment(recast.types.builders.jsxOpeningFragment(), recast.types.builders.jsxClosingFragment(), [element]);
+};
+const replaceNullReturnInFunctionLike = ({ fn, element, }) => {
+    var _a, _b;
+    var _c, _d;
+    if (fn.type === 'ArrowFunctionExpression' && fn.body.type === 'NullLiteral') {
+        fn.body = createFragmentWithElement(element);
+        return (_c = (_a = fn.loc) === null || _a === void 0 ? void 0 : _a.start.line) !== null && _c !== void 0 ? _c : 1;
+    }
+    if (fn.body.type !== 'BlockStatement') {
+        return null;
+    }
+    const returnStatement = getTopLevelReturnStatement(fn.body.body);
+    if (!(returnStatement === null || returnStatement === void 0 ? void 0 : returnStatement.argument) ||
+        returnStatement.argument.type !== 'NullLiteral') {
+        return null;
+    }
+    returnStatement.argument = createFragmentWithElement(element);
+    return (_d = (_b = returnStatement.loc) === null || _b === void 0 ? void 0 : _b.start.line) !== null && _d !== void 0 ? _d : 1;
+};
+const addElementToNullComponentReturn = ({ declaration, element, }) => {
+    var _a;
+    var _b;
+    if (declaration.type === 'VariableDeclarator') {
+        if (!declaration.init ||
+            (declaration.init.type !== 'ArrowFunctionExpression' &&
+                declaration.init.type !== 'FunctionExpression')) {
+            return null;
+        }
+        return replaceNullReturnInFunctionLike({ fn: declaration.init, element });
+    }
+    if (declaration.type === 'ArrowFunctionExpression' ||
+        declaration.type === 'FunctionExpression' ||
+        declaration.type === 'FunctionDeclaration') {
+        return replaceNullReturnInFunctionLike({ fn: declaration, element });
+    }
+    if (declaration.type !== 'ClassDeclaration') {
+        return null;
+    }
+    const renderMethod = findRenderMethod(declaration);
+    if (!renderMethod) {
+        return null;
+    }
+    const returnStatement = getTopLevelReturnStatement(renderMethod.body.body);
+    if (!(returnStatement === null || returnStatement === void 0 ? void 0 : returnStatement.argument) ||
+        returnStatement.argument.type !== 'NullLiteral') {
+        return null;
+    }
+    returnStatement.argument = createFragmentWithElement(element);
+    return (_b = (_a = returnStatement.loc) === null || _a === void 0 ? void 0 : _a.start.line) !== null && _b !== void 0 ? _b : 1;
+};
+const getImportedName = (specifier) => {
+    if (specifier.imported.type === 'Identifier') {
+        return specifier.imported.name;
+    }
+    return specifier.imported.value;
+};
+const declarationBindsName = (declaration, name) => {
+    var _a;
+    if (declaration.type === 'FunctionDeclaration' ||
+        declaration.type === 'ClassDeclaration') {
+        return ((_a = declaration.id) === null || _a === void 0 ? void 0 : _a.name) === name;
+    }
+    return declaration.declarations.some((variableDeclaration) => {
+        return (variableDeclaration.id.type === 'Identifier' &&
+            variableDeclaration.id.name === name);
+    });
+};
+const hasTopLevelBinding = ({ ast, name }) => {
+    return ast.program.body.some((node) => {
+        var _a;
+        if (node.type === 'FunctionDeclaration' ||
+            node.type === 'ClassDeclaration' ||
+            node.type === 'VariableDeclaration') {
+            return declarationBindsName(node, name);
+        }
+        if (node.type === 'ExportNamedDeclaration' &&
+            node.declaration &&
+            (node.declaration.type === 'FunctionDeclaration' ||
+                node.declaration.type === 'ClassDeclaration' ||
+                node.declaration.type === 'VariableDeclaration')) {
+            return declarationBindsName(node.declaration, name);
+        }
+        if (node.type !== 'ImportDeclaration') {
+            return false;
+        }
+        return (_a = node.specifiers) === null || _a === void 0 ? void 0 : _a.some((specifier) => {
+            var _a;
+            return ((_a = specifier.local) === null || _a === void 0 ? void 0 : _a.name) === name;
+        });
+    });
+};
+const getAvailableSolidLocalName = (ast) => {
+    const candidates = ['Solid', 'RemotionSolid'];
+    const available = candidates.find((candidate) => {
+        return !hasTopLevelBinding({ ast, name: candidate });
+    });
+    if (!available) {
+        throw new Error('Cannot add <Solid> because Solid is already defined');
+    }
+    return available;
+};
+const insertImportDeclaration = (ast, importDeclaration) => {
+    const { body } = ast.program;
+    let lastImportIndex = -1;
+    for (let i = 0; i < body.length; i++) {
+        if (body[i].type === 'ImportDeclaration') {
+            lastImportIndex = i;
+        }
+    }
+    body.splice(lastImportIndex + 1, 0, importDeclaration);
+};
+const addSolidImport = ({ ast, localName, remotionImport, }) => {
+    var _a;
+    var _b;
+    const imported = recast.types.builders.identifier('Solid');
+    const local = localName === 'Solid' ? null : recast.types.builders.identifier(localName);
+    const specifier = recast.types.builders.importSpecifier(imported, local);
+    const canAddToExistingRemotionImport = remotionImport &&
+        !((_a = remotionImport.specifiers) === null || _a === void 0 ? void 0 : _a.some((importSpecifier) => importSpecifier.type === 'ImportNamespaceSpecifier'));
+    if (canAddToExistingRemotionImport) {
+        remotionImport.specifiers = [
+            ...((_b = remotionImport.specifiers) !== null && _b !== void 0 ? _b : []),
+            specifier,
+        ];
+        return;
+    }
+    const importDeclaration = recast.types.builders.importDeclaration([], recast.types.builders.stringLiteral('remotion'));
+    importDeclaration.specifiers = [specifier];
+    insertImportDeclaration(ast, importDeclaration);
+};
+const ensureSolidImport = (ast) => {
+    var _a, _b;
+    let remotionImport = null;
+    for (const node of ast.program.body) {
+        if (node.type !== 'ImportDeclaration' || node.source.value !== 'remotion') {
+            continue;
+        }
+        remotionImport = node;
+        const solidSpecifier = (_a = node.specifiers) === null || _a === void 0 ? void 0 : _a.find((specifier) => {
+            return (specifier.type === 'ImportSpecifier' &&
+                getImportedName(specifier) === 'Solid');
+        });
+        if ((_b = solidSpecifier === null || solidSpecifier === void 0 ? void 0 : solidSpecifier.local) === null || _b === void 0 ? void 0 : _b.name) {
+            return solidSpecifier.local.name;
+        }
+    }
+    const localName = getAvailableSolidLocalName(ast);
+    addSolidImport({ ast, localName, remotionImport });
+    return localName;
+};
+const addElementToComponentRoot = ({ ast, exportName, element, }) => {
+    var _a;
+    var _b;
+    const declaration = getDeclarationByExportName({ ast, exportName });
+    if (!declaration) {
+        throw new Error('Could not find composition component declaration');
+    }
+    const rootNode = getComponentRootNode(declaration);
+    if (!rootNode) {
+        const insertedAt = addElementToNullComponentReturn({ declaration, element });
+        if (insertedAt !== null) {
+            return insertedAt;
+        }
+        throw new Error('Composition component does not return JSX');
+    }
+    if (rootNode.type === 'JSXElement' && rootNode.openingElement.selfClosing) {
+        throw new Error('Cannot insert into a self-closing root JSX element');
+    }
+    const CANVAS_ROOT_ELEMENTS = [
+        'ThreeCanvas',
+        'RiveCanvas',
+        'SkiaCanvas',
+        'canvas',
+    ];
+    if (rootNode.type === 'JSXElement' &&
+        rootNode.openingElement.name.type === 'JSXIdentifier' &&
+        CANVAS_ROOT_ELEMENTS.includes(rootNode.openingElement.name.name)) {
+        throw new Error(`Cannot insert a <Solid> into a composition whose root element is <${rootNode.openingElement.name.name}>`);
+    }
+    if (!rootNode.children) {
+        throw new Error('Composition component root does not accept children');
+    }
+    rootNode.children.push(element);
+    return (_b = (_a = rootNode.loc) === null || _a === void 0 ? void 0 : _a.start.line) !== null && _b !== void 0 ? _b : 1;
+};
 const getDefaultExportDeclaration = (ast) => {
     let declaration = null;
     let identifierName = null;
@@ -532,39 +732,16 @@ const getDeclarationByExportName = ({ ast, exportName, }) => {
     return findLocalComponentDeclaration({ ast, name: exportName });
 };
 const canAddSequenceToComponent = ({ ast, exportName, }) => {
-    const declaration = getDeclarationByExportName({ ast, exportName });
-    if (!declaration) {
-        return false;
-    }
-    const rootNode = getComponentRootNode(declaration);
-    if (!rootNode) {
-        return false;
-    }
-    if (rootNode.type === 'JSXElement') {
-        if (rootNode.openingElement.selfClosing) {
-            return false;
-        }
-        if (!rootNode.children) {
-            return false;
-        }
-        rootNode.children.push(createSequenceElement());
-        try {
-            recast.print(ast);
-            return true;
-        }
-        catch (_a) {
-            return false;
-        }
-    }
-    if (!rootNode.children) {
-        return false;
-    }
-    rootNode.children.push(createSequenceElement());
     try {
+        addElementToComponentRoot({
+            ast,
+            exportName,
+            element: createSequenceElement(),
+        });
         recast.print(ast);
         return true;
     }
-    catch (_b) {
+    catch (_a) {
         return false;
     }
 };
@@ -582,6 +759,8 @@ const getComponentLocationInFile = async ({ remotionRoot, fileName, exportName,
     });
     return {
         source: node_path_1.default.relative(remotionRoot, fileName),
+        fileName,
+        exportName,
         line: (_a = location === null || location === void 0 ? void 0 : location.line) !== null && _a !== void 0 ? _a : 1,
         column: (_b = location === null || location === void 0 ? void 0 : location.column) !== null && _b !== void 0 ? _b : 0,
         canAddSequence,
@@ -641,7 +820,7 @@ const getComponentLocationRecursively = async ({ remotionRoot, fileName, exportN
         visited.delete(key);
     }
 };
-const resolveCompositionComponent = async ({ remotionRoot, compositionFile, compositionId, }) => {
+const resolveCompositionComponentWithFile = async ({ remotionRoot, compositionFile, compositionId, }) => {
     const compositionFileName = node_path_1.default.resolve(remotionRoot, compositionFile);
     const input = await readSourceFile({
         remotionRoot,
@@ -688,4 +867,63 @@ const resolveCompositionComponent = async ({ remotionRoot, compositionFile, comp
         visited: new Set(),
     });
 };
+const resolveCompositionComponent = async ({ remotionRoot, compositionFile, compositionId, }) => {
+    const { source, line, column, canAddSequence } = await resolveCompositionComponentWithFile({
+        remotionRoot,
+        compositionFile,
+        compositionId,
+    });
+    return {
+        source,
+        line,
+        column,
+        canAddSequence,
+    };
+};
 exports.resolveCompositionComponent = resolveCompositionComponent;
+const createInsertableJsxElement = ({ ast, element, }) => {
+    if (element.type === 'solid') {
+        const solidLocalName = ensureSolidImport(ast);
+        return createSolidElement({
+            localName: solidLocalName,
+            width: element.width,
+            height: element.height,
+        });
+    }
+    throw new Error('Unsupported element type');
+};
+const insertJsxElementIntoComposition = async ({ remotionRoot, compositionFile, compositionId, element, prettierConfigOverride, }) => {
+    const location = await resolveCompositionComponentWithFile({
+        remotionRoot,
+        compositionFile,
+        compositionId,
+    });
+    if (!location.canAddSequence) {
+        throw new Error('Cannot insert JSX element into this composition component');
+    }
+    const input = await readSourceFile({
+        remotionRoot,
+        fileName: location.fileName,
+    });
+    const ast = (0, parse_ast_1.parseAst)(input);
+    const elementToInsert = createInsertableJsxElement({ ast, element });
+    const logLine = addElementToComponentRoot({
+        ast,
+        exportName: location.exportName,
+        element: elementToInsert,
+    });
+    const finalFile = (0, parse_ast_1.serializeAst)(ast);
+    const { output, formatted } = await (0, format_file_content_1.formatFileContent)({
+        input: finalFile,
+        prettierConfigOverride,
+    });
+    return {
+        fileName: location.fileName,
+        source: location.source,
+        oldContents: input,
+        output,
+        formatted,
+        logLine,
+    };
+};
+exports.insertJsxElementIntoComposition = insertJsxElementIntoComposition;

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, experimentalClientSideRenderingEnabled, relativePublicDir, webpackOverride, poll, getRenderDefaults, getRenderQueue, numberOfAudioTags, queueMethods, previewEntry, gitSource, bufferStateDelayInMilliseconds, binariesDirectory, forceIPv4, audioLatencyHint, enableCrossSiteIsolation, askAIEnabled, forceNew, rspack, }: {
+    startStudio: ({ browserArgs, browserFlag, shouldOpenBrowser, fullEntryPath, logLevel, getCurrentInputProps, getEnvVariables, desiredPort, maxTimelineTracks, remotionRoot, keyboardShortcutsEnabled, experimentalClientSideRenderingEnabled, relativePublicDir, webpackOverride, poll, getRenderDefaults, getRenderQueue, numberOfAudioTags, queueMethods, previewEntry, gitSource, bufferStateDelayInMilliseconds, binariesDirectory, forceIPv4, audioLatencyHint, previewSampleRate, enableCrossSiteIsolation, askAIEnabled, forceNew, rspack, }: {
         browserArgs: string;
         browserFlag: string;
         logLevel: "error" | "info" | "trace" | "verbose" | "warn";
@@ -23,6 +23,7 @@ export declare const StudioServerInternals: {
         getRenderQueue: () => import("@remotion/studio-shared").RenderJob[];
         numberOfAudioTags: number;
         audioLatencyHint: AudioContextLatencyCategory | null;
+        previewSampleRate: number | null;
         enableCrossSiteIsolation: boolean;
         queueMethods: import("./preview-server/api-types").QueueMethods;
         previewEntry: string;

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

@@ -1,19 +1,28 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.allApiRoutes = void 0;
+const add_effect_1 = require("./routes/add-effect");
+const add_effect_keyframe_1 = require("./routes/add-effect-keyframe");
 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 cancel_render_1 = require("./routes/cancel-render");
+const composition_component_info_1 = require("./routes/composition-component-info");
 const delete_effect_1 = require("./routes/delete-effect");
 const delete_jsx_node_1 = require("./routes/delete-jsx-node");
+const delete_keyframes_1 = require("./routes/delete-keyframes");
 const delete_static_file_1 = require("./routes/delete-static-file");
 const duplicate_jsx_node_1 = require("./routes/duplicate-jsx-node");
+const insert_jsx_element_1 = require("./routes/insert-jsx-element");
 const install_dependency_1 = require("./routes/install-dependency");
+const open_in_editor_1 = require("./routes/open-in-editor");
 const open_in_file_explorer_1 = require("./routes/open-in-file-explorer");
 const project_info_1 = require("./routes/project-info");
 const redo_1 = require("./routes/redo");
+const register_client_render_1 = require("./routes/register-client-render");
 const remove_render_1 = require("./routes/remove-render");
+const reorder_effect_1 = require("./routes/reorder-effect");
 const restart_studio_1 = require("./routes/restart-studio");
 const save_effect_props_1 = require("./routes/save-effect-props");
 const save_sequence_props_1 = require("./routes/save-sequence-props");
@@ -21,18 +30,23 @@ const subscribe_to_default_props_1 = require("./routes/subscribe-to-default-prop
 const subscribe_to_file_existence_1 = require("./routes/subscribe-to-file-existence");
 const subscribe_to_sequence_props_1 = require("./routes/subscribe-to-sequence-props");
 const undo_1 = require("./routes/undo");
+const unregister_client_render_1 = require("./routes/unregister-client-render");
 const unsubscribe_from_default_props_1 = require("./routes/unsubscribe-from-default-props");
 const unsubscribe_from_file_existence_1 = require("./routes/unsubscribe-from-file-existence");
 const unsubscribe_from_sequence_props_1 = require("./routes/unsubscribe-from-sequence-props");
 const update_available_1 = require("./routes/update-available");
 const update_default_props_1 = require("./routes/update-default-props");
 exports.allApiRoutes = {
+    '/api/composition-component-info': composition_component_info_1.compositionComponentInfoHandler,
     '/api/cancel': cancel_render_1.handleCancelRender,
     '/api/render': add_render_1.handleAddRender,
     '/api/unsubscribe-from-file-existence': unsubscribe_from_file_existence_1.unsubscribeFromFileExistence,
     '/api/subscribe-to-file-existence': subscribe_to_file_existence_1.subscribeToFileExistence,
     '/api/remove-render': remove_render_1.handleRemoveRender,
+    '/api/open-in-editor': open_in_editor_1.openInEditorHandler,
     '/api/open-in-file-explorer': open_in_file_explorer_1.handleOpenInFileExplorer,
+    '/api/register-client-render': register_client_render_1.registerClientRenderHandler,
+    '/api/unregister-client-render': unregister_client_render_1.unregisterClientRenderHandler,
     '/api/update-default-props': update_default_props_1.updateDefaultPropsHandler,
     '/api/apply-visual-control-change': apply_visual_control_change_1.applyVisualControlHandler,
     '/api/apply-codemod': apply_codemod_1.applyCodemodHandler,
@@ -42,6 +56,11 @@ exports.allApiRoutes = {
     '/api/unsubscribe-from-sequence-props': unsubscribe_from_sequence_props_1.unsubscribeFromSequenceProps,
     '/api/save-sequence-props': save_sequence_props_1.saveSequencePropsHandler,
     '/api/save-effect-props': save_effect_props_1.saveEffectPropsHandler,
+    '/api/add-effect': add_effect_1.addEffectHandler,
+    '/api/reorder-effect': reorder_effect_1.reorderEffectHandler,
+    '/api/delete-keyframes': delete_keyframes_1.deleteKeyframesHandler,
+    '/api/add-sequence-keyframe': add_sequence_keyframe_1.addSequenceKeyframeHandler,
+    '/api/add-effect-keyframe': add_effect_keyframe_1.addEffectKeyframeHandler,
     '/api/delete-effect': delete_effect_1.deleteEffectHandler,
     '/api/delete-jsx-node': delete_jsx_node_1.deleteJsxNodeHandler,
     '/api/duplicate-jsx-node': duplicate_jsx_node_1.duplicateJsxNodeHandler,
@@ -50,6 +69,7 @@ exports.allApiRoutes = {
     '/api/delete-static-file': delete_static_file_1.deleteStaticFileHandler,
     '/api/restart-studio': restart_studio_1.handleRestartStudio,
     '/api/install-package': install_dependency_1.handleInstallPackage,
+    '/api/insert-jsx-element': insert_jsx_element_1.insertJsxElementHandler,
     '/api/undo': undo_1.undoHandler,
     '/api/redo': redo_1.redoHandler,
 };

package/dist/preview-server/routes/add-effect-keyframe.d.ts

@@ -0,0 +1,3 @@
+import type { AddEffectKeyframeRequest, AddEffectKeyframeResponse } from '@remotion/studio-shared';
+import type { ApiHandler } from '../api-types';
+export declare const addEffectKeyframeHandler: ApiHandler<AddEffectKeyframeRequest, AddEffectKeyframeResponse>;

package/dist/preview-server/routes/add-effect-keyframe.js

@@ -0,0 +1,91 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.addEffectKeyframeHandler = void 0;
+const node_fs_1 = require("node:fs");
+const renderer_1 = require("@remotion/renderer");
+const studio_shared_1 = require("@remotion/studio-shared");
+const parse_ast_1 = require("../../codemods/parse-ast");
+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 can_update_effect_props_1 = require("./can-update-effect-props");
+const can_update_sequence_props_1 = require("./can-update-sequence-props");
+const log_effect_update_1 = require("./log-updates/log-effect-update");
+const save_props_mutex_1 = require("./save-props-mutex");
+const addEffectKeyframeHandler = ({ input: { fileName, sequenceNodePath, effectIndex, key, frame, value, schema, clientId, }, remotionRoot, logLevel, }) => (0, save_props_mutex_1.withSavePropsLock)(async () => {
+    renderer_1.RenderInternals.Log.trace({ indent: false, logLevel }, `[add-effect-keyframe] Received request for fileName="${fileName}" effectIndex=${effectIndex} key="${key}" frame=${frame}`);
+    const { absolutePath, fileRelativeToRoot } = (0, resolve_file_inside_project_1.resolveFileInsideProject)({
+        remotionRoot,
+        fileName,
+        action: 'modify',
+    });
+    const fileContents = (0, node_fs_1.readFileSync)(absolutePath, 'utf-8');
+    const parsedValue = JSON.parse(value);
+    const { output, oldValueStrings, newValueStrings, formatted, logLine, effectCallee, updatedSequenceNodePath, } = await (0, update_keyframes_1.updateEffectKeyframes)({
+        input: fileContents,
+        sequenceNodePath: sequenceNodePath.nodePath,
+        effectIndex,
+        updates: [
+            {
+                key,
+                operation: {
+                    type: 'add',
+                    frame,
+                    value: parsedValue,
+                },
+            },
+        ],
+    });
+    const oldValueString = oldValueStrings[0];
+    const newValueString = newValueStrings[0];
+    const undoPropChange = `${key} keyframe removed at frame ${frame}`;
+    const redoPropChange = `${key} keyframe added at frame ${frame}`;
+    (0, undo_stack_1.pushToUndoStack)({
+        filePath: absolutePath,
+        oldContents: fileContents,
+        newContents: null,
+        logLevel,
+        remotionRoot,
+        logLine,
+        description: {
+            undoMessage: `↩️  ${undoPropChange}`,
+            redoMessage: `↪️  ${redoPropChange}`,
+        },
+        entryType: 'effect-props',
+        suppressHmrOnFileRestore: true,
+    });
+    (0, undo_stack_1.suppressUndoStackInvalidation)(absolutePath);
+    (0, watch_ignore_next_change_1.suppressBundlerUpdateForFile)(absolutePath);
+    (0, file_watcher_1.writeFileAndNotifyFileWatchers)(absolutePath, output, clientId);
+    (0, log_effect_update_1.logEffectUpdate)({
+        fileRelativeToRoot,
+        line: logLine,
+        effectName: effectCallee,
+        propKey: key,
+        oldValueString,
+        newValueString,
+        defaultValueString: null,
+        formatted,
+        logLevel,
+        removedProps: [],
+        addedProps: [],
+    });
+    (0, undo_stack_1.printUndoHint)(logLevel);
+    const ast = (0, parse_ast_1.parseAst)((0, node_fs_1.readFileSync)(absolutePath, 'utf-8'));
+    const jsx = (0, can_update_sequence_props_1.findJsxElementAtNodePath)(ast, updatedSequenceNodePath);
+    if (!jsx) {
+        return {
+            canUpdate: false,
+            effectIndex,
+            reason: 'not-found',
+        };
+    }
+    return (0, can_update_effect_props_1.computeEffectPropStatus)({
+        jsx,
+        effectIndex,
+        keys: (0, studio_shared_1.getAllSchemaKeys)(schema),
+    });
+});
+exports.addEffectKeyframeHandler = addEffectKeyframeHandler;

package/dist/preview-server/routes/add-effect.d.ts

@@ -0,0 +1,3 @@
+import type { AddEffectRequest, AddEffectResponse } from '@remotion/studio-shared';
+import type { ApiHandler } from '../api-types';
+export declare const addEffectHandler: ApiHandler<AddEffectRequest, AddEffectResponse>;