@remotion/studio-shared 4.0.501 → 4.0.503

package/dist/api-requests.d.ts

@@ -1,6 +1,6 @@
-import type { ComponentProp, ElementDragData } from '@remotion/drag-and-drop';
-import type { AudioCodec, ChromeMode, Codec, ColorSpace, LogLevel, PixelFormat, StillImageFormat, VideoImageFormat, X264Preset } from '@remotion/renderer';
+import type { AudioCodec, BuiltInEditor, ChromeMode, Codec, ColorSpace, LogLevel, PixelFormat, StillImageFormat, VideoImageFormat, X264Preset } from '@remotion/renderer';
 import type { HardwareAccelerationOption } from '@remotion/renderer/client';
+import type { ComponentProp, ElementDragData } from '@remotion/studio-protocol';
 import type { _InternalTypes, CannotUpdateSequenceReason, CanUpdateEffectPropsResponse, CanUpdateSequencePropsResponseFalse, CanUpdateSequencePropsResponseTrue, CanUpdateSequencePropStatus, ExtrapolateType, InteractivitySchema, InterpolateOutputOption, JsxComponentIdentity, SequenceNodePath, SequencePropsSubscriptionKey, VideoConfigValues } from 'remotion';
 import type { RecastCodemod, VisualControlChange } from './codemods';
 import type { EffectClipboardParam, EffectClipboardPasteType, EffectClipboardSnapshot } from './effect-clipboard-data';
@@ -16,6 +16,7 @@ export type OpenInFileExplorerRequest = {
     directory: string;
 };
 export type OpenInEditorRequest = {
+    editorId: EditorPickerId | null;
     stack: SymbolicatedStackFrame;
 };
 export type OpenInEditorResponse = {
@@ -654,10 +655,33 @@ export type ConvertFigmaClipboardToSvgResponse = {
     success: false;
     reason: string;
 };
+export type ElementInstallExpectedFileState = {
+    exists: false;
+} | {
+    exists: true;
+    sourceHash: string;
+};
+export type PrepareElementInstallRequest = {
+    compositionFile: string;
+    compositionId: string;
+    element: ElementDragData['element'];
+};
+export type PrepareElementInstallResponse = {
+    success: true;
+    plan: {
+        filePath: string;
+        expectedFileState: ElementInstallExpectedFileState;
+    };
+} | {
+    success: false;
+    reason: string;
+    stack: string;
+};
 export type InsertElementRequest = {
     compositionFile: string;
     compositionId: string;
     element: ElementDragData['element'];
+    expectedFileState: ElementInstallExpectedFileState | null;
     from: number | null;
     position: InsertableCompositionElementPosition | null;
     overwriteExisting: boolean;
@@ -679,6 +703,12 @@ export type InsertElementResponse = {
     reason: string;
     stack: string;
 };
+export type ElementInstallSource = {
+    type: 'studio-protocol';
+    origin: string;
+} | {
+    type: 'drag-and-drop';
+};
 export type ElementInstallRequest = {
     id: string;
     clientId: string;
@@ -686,7 +716,9 @@ export type ElementInstallRequest = {
     compositionFile: string;
     compositionId: string;
     element: ElementDragData['element'];
+    from: number | null;
     position: InsertableCompositionElementPosition | null;
+    source: ElementInstallSource;
 };
 export type UpdateElementInstallTargetRequest = {
     requestId: string | null;
@@ -713,6 +745,8 @@ export type UpdateAvailableResponse = {
     currentVersion: string;
     latestVersion: string;
     updateAvailable: boolean;
+    skillsUpdateAvailable: boolean;
+    remotionUpgradeSkillAvailable: boolean;
     timedOut: boolean;
     packageManager: PackageManager | 'unknown';
 };
@@ -731,6 +765,24 @@ export type UpdatePublicLicenseResponse = {
     success: false;
     reason: string;
 };
+export type GetDefaultEditorInfoRequest = {};
+export type EditorPickerId = BuiltInEditor | 'custom';
+export type GetDefaultEditorInfoResponse = {
+    defaultEditor: EditorPickerId | null;
+    installedEditors: {
+        id: EditorPickerId;
+        name: string;
+    }[];
+};
+export type UpdateDefaultEditorRequest = {
+    defaultEditor: EditorPickerId | null;
+};
+export type UpdateDefaultEditorResponse = {
+    success: true;
+} | {
+    success: false;
+    reason: string;
+};
 export type InstallPackageRequest = {
     packageNames: string[];
 };
@@ -799,6 +851,7 @@ export type ApiRoutes = {
     '/api/insert-jsx-element': ReqAndRes<InsertJsxElementRequest, InsertJsxElementResponse>;
     '/api/convert-figma-clipboard-to-svg': ReqAndRes<ConvertFigmaClipboardToSvgRequest, ConvertFigmaClipboardToSvgResponse>;
     '/api/insert-element': ReqAndRes<InsertElementRequest, InsertElementResponse>;
+    '/api/prepare-element-install': ReqAndRes<PrepareElementInstallRequest, PrepareElementInstallResponse>;
     '/api/update-element-install-target': ReqAndRes<UpdateElementInstallTargetRequest, UpdateElementInstallTargetResponse>;
     '/api/download-remote-asset': ReqAndRes<DownloadRemoteAssetRequest, DownloadRemoteAssetResponse>;
     '/api/update-available': ReqAndRes<UpdateAvailableRequest, UpdateAvailableResponse>;
@@ -808,6 +861,8 @@ export type ApiRoutes = {
     '/api/rename-static-file': ReqAndRes<RenameStaticFileRequest, RenameStaticFileResponse>;
     '/api/restart-studio': ReqAndRes<RestartStudioRequest, RestartStudioResponse>;
     '/api/update-public-license': ReqAndRes<UpdatePublicLicenseRequest, UpdatePublicLicenseResponse>;
+    '/api/default-editor-info': ReqAndRes<GetDefaultEditorInfoRequest, GetDefaultEditorInfoResponse>;
+    '/api/update-default-editor': ReqAndRes<UpdateDefaultEditorRequest, UpdateDefaultEditorResponse>;
     '/api/install-package': ReqAndRes<InstallPackageRequest, InstallPackageResponse>;
     '/api/undo': ReqAndRes<UndoRequest, UndoResponse>;
     '/api/redo': ReqAndRes<RedoRequest, RedoResponse>;

package/dist/browser-studio-operations.d.ts

@@ -1,4 +1,4 @@
-import type { CompositionComponentInfoRequest, CompositionComponentInfoResponse, DeleteStaticFileRequest, DeleteStaticFileResponse, FindInFileRequest, FindInFileResponse, InsertJsxElementRequest, InsertJsxElementResponse, RedoResponse, RenameStaticFileRequest, RenameStaticFileResponse, UndoResponse } from './api-requests';
+import type { CompositionComponentInfoRequest, CompositionComponentInfoResponse, DeleteStaticFileRequest, DeleteStaticFileResponse, FindInFileRequest, FindInFileResponse, InsertJsxElementRequest, InsertJsxElementResponse, RedoResponse, RenameStaticFileRequest, RenameStaticFileResponse, SaveSequencePropsRequest, SaveSequencePropsResponse, SubscribeToDefaultPropsRequest, SubscribeToDefaultPropsResponse, SubscribeToSequencePropsRequest, SubscribeToSequencePropsResponse, UndoResponse, UnsubscribeFromDefaultPropsRequest, UnsubscribeFromSequencePropsRequest } from './api-requests';
 import type { EventSourceEvent } from './event-source-event';
 export type WriteStaticFileRequest = {
     contents: string | ArrayBuffer;
@@ -17,8 +17,13 @@ export type BrowserStudioOperations = {
     insertSolid: (request: InsertJsxElementRequest) => Promise<InsertJsxElementResponse>;
     redo: () => Promise<RedoResponse>;
     renameStaticFile: (request: RenameStaticFileRequest) => Promise<RenameStaticFileResponse>;
+    saveSequenceProps: (request: SaveSequencePropsRequest) => Promise<SaveSequencePropsResponse>;
+    subscribeToDefaultProps: (request: SubscribeToDefaultPropsRequest) => Promise<SubscribeToDefaultPropsResponse>;
+    subscribeToSequenceProps: (request: SubscribeToSequencePropsRequest) => Promise<SubscribeToSequencePropsResponse>;
     subscribeToEvent: (listener: (event: EventSourceEvent) => void) => () => void;
     undo: () => Promise<UndoResponse>;
+    unsubscribeFromDefaultProps: (request: UnsubscribeFromDefaultPropsRequest) => Promise<undefined>;
+    unsubscribeFromSequenceProps: (request: UnsubscribeFromSequencePropsRequest) => Promise<undefined>;
     writeStaticFile: (request: WriteStaticFileRequest) => Promise<void>;
 };
 declare global {

package/dist/composition-drag-data.d.ts

@@ -1,3 +1,3 @@
-import type { CompositionDragData } from '@remotion/drag-and-drop';
+import type { CompositionDragData } from '@remotion/studio-protocol';
 import type { SymbolicatedStackFrame } from './stack-types';
 export declare const compositionDragDataToSymbolicatedStack: (dragData: CompositionDragData) => SymbolicatedStackFrame | null;

package/dist/define-plugin-definitions.d.ts

@@ -1,13 +1,15 @@
-export declare const getDefinePluginDefinitions: ({ maxTimelineTracks, askAIEnabled, interactivityEnabled, keyboardShortcutsEnabled, bufferStateDelayInMilliseconds, }: {
+export declare const getDefinePluginDefinitions: ({ maxTimelineTracks, askAIEnabled, interactivityEnabled, keyboardShortcutsEnabled, bufferStateDelayInMilliseconds, experimentalClientSideRenderingEnabled, }: {
     maxTimelineTracks: number | null;
     askAIEnabled: boolean;
     interactivityEnabled: boolean;
     keyboardShortcutsEnabled: boolean;
     bufferStateDelayInMilliseconds: number | null;
+    experimentalClientSideRenderingEnabled: boolean;
 }) => {
     'process.env.MAX_TIMELINE_TRACKS': number | null;
     'process.env.ASK_AI_ENABLED': boolean;
     'process.env.INTERACTIVITY_ENABLED': boolean;
     'process.env.KEYBOARD_SHORTCUTS_ENABLED': boolean;
     'process.env.BUFFER_STATE_DELAY_IN_MILLISECONDS': number | null;
+    'process.env.EXPERIMENTAL_CLIENT_SIDE_RENDERING_ENABLED': boolean;
 };

package/dist/define-plugin-definitions.js

@@ -1,11 +1,12 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.getDefinePluginDefinitions = void 0;
-const getDefinePluginDefinitions = ({ maxTimelineTracks, askAIEnabled, interactivityEnabled, keyboardShortcutsEnabled, bufferStateDelayInMilliseconds, }) => ({
+const getDefinePluginDefinitions = ({ maxTimelineTracks, askAIEnabled, interactivityEnabled, keyboardShortcutsEnabled, bufferStateDelayInMilliseconds, experimentalClientSideRenderingEnabled, }) => ({
     'process.env.MAX_TIMELINE_TRACKS': maxTimelineTracks,
     'process.env.ASK_AI_ENABLED': askAIEnabled,
     'process.env.INTERACTIVITY_ENABLED': interactivityEnabled,
     'process.env.KEYBOARD_SHORTCUTS_ENABLED': keyboardShortcutsEnabled,
     'process.env.BUFFER_STATE_DELAY_IN_MILLISECONDS': bufferStateDelayInMilliseconds,
+    'process.env.EXPERIMENTAL_CLIENT_SIDE_RENDERING_ENABLED': experimentalClientSideRenderingEnabled,
 });
 exports.getDefinePluginDefinitions = getDefinePluginDefinitions;

package/dist/effect-catalog.d.ts

@@ -1,4 +1,4 @@
-import type { EffectDragData } from '@remotion/drag-and-drop';
+import type { EffectDragData } from '@remotion/studio-protocol';
 export type EffectCatalogItem = {
     readonly id: string;
     readonly category: string;

package/dist/element-drag-data.d.ts

@@ -4,7 +4,6 @@ export type ElementDragData = {
     type: 'remotion-element';
     version: 1;
     element: {
-        dependencies: string[];
         slug: string;
         displayName: string;
         sourceCode: string;
@@ -14,8 +13,7 @@ export type ElementDragData = {
 export declare const isLowercaseElementFileName: (value: unknown) => value is string;
 export declare const makeElementFileNameFromSlug: (slug: string) => string | null;
 export declare const getElementComponentNameFromSourceCode: (sourceCode: string) => string | null;
-export declare const makeElementDragData: ({ dependencies, dimensions, displayName, slug, sourceCode, }: {
-    dependencies: string[];
+export declare const makeElementDragData: ({ dimensions, displayName, slug, sourceCode, }: {
     slug: string;
     displayName: string;
     sourceCode: string;

package/dist/element-drag-data.js

@@ -2,7 +2,6 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.parseElementDragData = exports.makeElementDragData = exports.getElementComponentNameFromSourceCode = exports.makeElementFileNameFromSlug = exports.isLowercaseElementFileName = exports.ELEMENT_DRAG_MIME_TYPE = void 0;
 const component_drag_data_1 = require("./component-drag-data");
-const package_name_1 = require("./package-name");
 const drag_mime_types_1 = require("./drag-mime-types");
 Object.defineProperty(exports, "ELEMENT_DRAG_MIME_TYPE", { enumerable: true, get: function () { return drag_mime_types_1.ELEMENT_DRAG_MIME_TYPE; } });
 const isRecord = (value) => {
@@ -49,11 +48,6 @@ const isSourceCode = (value) => {
         value.trim().length > 0 &&
         value.length < 200000);
 };
-const isDependencies = (value) => {
-    return (Array.isArray(value) &&
-        value.length <= 100 &&
-        value.every((dependency) => typeof dependency === 'string' && (0, package_name_1.isValidPackageName)(dependency)));
-};
 const isDimensions = (value) => {
     if (!isRecord(value)) {
         return false;
@@ -75,12 +69,11 @@ const getElementComponentNameFromSourceCode = (sourceCode) => {
     return (0, component_drag_data_1.isComponentIdentifier)(componentName) ? componentName : null;
 };
 exports.getElementComponentNameFromSourceCode = getElementComponentNameFromSourceCode;
-const makeElementDragData = ({ dependencies, dimensions, displayName, slug, sourceCode, }) => {
+const makeElementDragData = ({ dimensions, displayName, slug, sourceCode, }) => {
     return {
         type: 'remotion-element',
         version: 1,
         element: {
-            dependencies: Array.from(new Set(dependencies)),
             slug,
             displayName,
             sourceCode,
@@ -101,20 +94,18 @@ const parseElementDragData = (value) => {
         if (!isRecord(parsed.element)) {
             return null;
         }
-        const { dependencies, dimensions, displayName, slug, sourceCode } = parsed.element;
+        const { dimensions, displayName, slug, sourceCode } = parsed.element;
         if (!isSlug(slug) ||
             !isDisplayName(displayName) ||
             !isSourceCode(sourceCode) ||
             (0, exports.getElementComponentNameFromSourceCode)(sourceCode) === null ||
             (0, exports.makeElementFileNameFromSlug)(slug) === null ||
-            (dependencies !== undefined && !isDependencies(dependencies)) ||
             (dimensions !== undefined &&
                 dimensions !== null &&
                 !isDimensions(dimensions))) {
             return null;
         }
         return (0, exports.makeElementDragData)({
-            dependencies: dependencies !== null && dependencies !== void 0 ? dependencies : [],
             slug,
             displayName,
             sourceCode,