@remotion/studio-shared 4.0.502 → 4.0.503

package/dist/api-requests.d.ts

@@ -1,4 +1,4 @@
-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';
@@ -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/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/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,

package/dist/esm/index.mjs

@@ -1632,6 +1632,95 @@ var hotMiddlewareOptions = {
   reload: true,
   warn: true
 };
+// src/keyframe-clipboard-data.ts
+var KEYFRAME_CLIPBOARD_FIELD_TYPE_SUPPORT = {
+  array: false,
+  asset: false,
+  boolean: false,
+  "remotion-captions": false,
+  color: true,
+  enum: false,
+  "font-family": false,
+  hidden: false,
+  number: true,
+  "rotation-css": true,
+  "rotation-degrees": true,
+  scale: true,
+  "text-content": false,
+  "transform-origin": true,
+  translate: true,
+  "uv-coordinate": true
+};
+var isRecord3 = (value) => {
+  return typeof value === "object" && value !== null && !Array.isArray(value);
+};
+var isKeyframeClipboardFieldType = (value) => {
+  return typeof value === "string" && Object.hasOwn(KEYFRAME_CLIPBOARD_FIELD_TYPE_SUPPORT, value) && KEYFRAME_CLIPBOARD_FIELD_TYPE_SUPPORT[value];
+};
+var isKeyframeClipboardEntry = (value) => {
+  return isRecord3(value) && Number.isInteger(value.frameOffset) && Object.hasOwn(value, "value");
+};
+var areValidKeyframes = (value) => {
+  if (!Array.isArray(value) || value.length === 0) {
+    return false;
+  }
+  let previousOffset = -1;
+  for (const keyframe of value) {
+    if (!isKeyframeClipboardEntry(keyframe) || keyframe.frameOffset <= previousOffset) {
+      return false;
+    }
+    previousOffset = keyframe.frameOffset;
+  }
+  return value[0]?.frameOffset === 0;
+};
+var isKeyframeClipboardField = (value) => {
+  return isRecord3(value) && (value.type === "sequence" || value.type === "effect") && typeof value.fieldKey === "string";
+};
+var parseEasings = ({
+  value,
+  keyframeCount
+}) => {
+  if (Array.isArray(value) && value.length === Math.max(0, keyframeCount - 1) && value.every(isKeyframeEasing)) {
+    return value.map(normalizeKeyframeEasing);
+  }
+  return null;
+};
+var parseKeyframeClipboardDataResult = (value) => {
+  try {
+    const parsed = JSON.parse(value);
+    if (!isRecord3(parsed) || parsed.remotionClipboard !== "keyframe") {
+      return { status: "invalid" };
+    }
+    if (parsed.version !== 1) {
+      return { status: "unsupported-version", version: parsed.version };
+    }
+    const easing = parseEasings({
+      value: parsed.easing,
+      keyframeCount: Array.isArray(parsed.keyframes) ? parsed.keyframes.length : 0
+    });
+    if (parsed.type !== "keyframe" || !areValidKeyframes(parsed.keyframes) || easing === null || parsed.field !== null && !isKeyframeClipboardField(parsed.field) || parsed.fieldType !== null && !isKeyframeClipboardFieldType(parsed.fieldType)) {
+      return { status: "invalid" };
+    }
+    return {
+      status: "valid",
+      data: {
+        type: "keyframe",
+        version: 1,
+        remotionClipboard: "keyframe",
+        fieldType: parsed.fieldType,
+        field: parsed.field,
+        keyframes: parsed.keyframes,
+        easing
+      }
+    };
+  } catch {
+    return { status: "invalid" };
+  }
+};
+var parseKeyframeClipboardData = (value) => {
+  const result = parseKeyframeClipboardDataResult(value);
+  return result.status === "valid" ? result.data : null;
+};
 // src/keyframe-easing-presets.ts
 var LINEAR_KEYFRAME_EASING = { type: "linear" };
 var EASE_KEYFRAME_EASING = {
@@ -1745,95 +1834,6 @@ var KEYFRAME_EASING_PRESETS = [
     }
   }
 ];
-// src/keyframe-clipboard-data.ts
-var KEYFRAME_CLIPBOARD_FIELD_TYPE_SUPPORT = {
-  array: false,
-  asset: false,
-  boolean: false,
-  "remotion-captions": false,
-  color: true,
-  enum: false,
-  "font-family": false,
-  hidden: false,
-  number: true,
-  "rotation-css": true,
-  "rotation-degrees": true,
-  scale: true,
-  "text-content": false,
-  "transform-origin": true,
-  translate: true,
-  "uv-coordinate": true
-};
-var isRecord3 = (value) => {
-  return typeof value === "object" && value !== null && !Array.isArray(value);
-};
-var isKeyframeClipboardFieldType = (value) => {
-  return typeof value === "string" && Object.hasOwn(KEYFRAME_CLIPBOARD_FIELD_TYPE_SUPPORT, value) && KEYFRAME_CLIPBOARD_FIELD_TYPE_SUPPORT[value];
-};
-var isKeyframeClipboardEntry = (value) => {
-  return isRecord3(value) && Number.isInteger(value.frameOffset) && Object.hasOwn(value, "value");
-};
-var areValidKeyframes = (value) => {
-  if (!Array.isArray(value) || value.length === 0) {
-    return false;
-  }
-  let previousOffset = -1;
-  for (const keyframe of value) {
-    if (!isKeyframeClipboardEntry(keyframe) || keyframe.frameOffset <= previousOffset) {
-      return false;
-    }
-    previousOffset = keyframe.frameOffset;
-  }
-  return value[0]?.frameOffset === 0;
-};
-var isKeyframeClipboardField = (value) => {
-  return isRecord3(value) && (value.type === "sequence" || value.type === "effect") && typeof value.fieldKey === "string";
-};
-var parseEasings = ({
-  value,
-  keyframeCount
-}) => {
-  if (Array.isArray(value) && value.length === Math.max(0, keyframeCount - 1) && value.every(isKeyframeEasing)) {
-    return value.map(normalizeKeyframeEasing);
-  }
-  return null;
-};
-var parseKeyframeClipboardDataResult = (value) => {
-  try {
-    const parsed = JSON.parse(value);
-    if (!isRecord3(parsed) || parsed.remotionClipboard !== "keyframe") {
-      return { status: "invalid" };
-    }
-    if (parsed.version !== 1) {
-      return { status: "unsupported-version", version: parsed.version };
-    }
-    const easing = parseEasings({
-      value: parsed.easing,
-      keyframeCount: Array.isArray(parsed.keyframes) ? parsed.keyframes.length : 0
-    });
-    if (parsed.type !== "keyframe" || !areValidKeyframes(parsed.keyframes) || easing === null || parsed.field !== null && !isKeyframeClipboardField(parsed.field) || parsed.fieldType !== null && !isKeyframeClipboardFieldType(parsed.fieldType)) {
-      return { status: "invalid" };
-    }
-    return {
-      status: "valid",
-      data: {
-        type: "keyframe",
-        version: 1,
-        remotionClipboard: "keyframe",
-        fieldType: parsed.fieldType,
-        field: parsed.field,
-        keyframes: parsed.keyframes,
-        easing
-      }
-    };
-  } catch {
-    return { status: "invalid" };
-  }
-};
-var parseKeyframeClipboardData = (value) => {
-  const result = parseKeyframeClipboardDataResult(value);
-  return result.status === "valid" ? result.data : null;
-};
 // src/max-timeline-tracks.ts
 var DEFAULT_TIMELINE_TRACKS = 90;
 // src/package-info.ts
@@ -1869,7 +1869,6 @@ var allPackages = [
   "brand",
   "bundler",
   "browser-studio",
-  "canvas-capture",
   "claude-code-plugin",
   "cli",
   "cloudrun",
@@ -2006,7 +2005,6 @@ var descriptions = {
   lambda: "Render Remotion videos on AWS Lambda",
   bundler: "Bundle Remotion compositions using Webpack",
   "browser-studio": "Run Remotion Studio in the browser",
-  "canvas-capture": "Capture HTML-in-canvas content as a video",
   "studio-codemods": "Shared codemods for Remotion Studio",
   "studio-server": "Run a Remotion Studio with a server backend",
   "install-whisper-cpp": "Helpers for installing and using Whisper.cpp",
@@ -2107,7 +2105,6 @@ var installableMap = {
   brand: false,
   bundler: false,
   "browser-studio": false,
-  "canvas-capture": false,
   cli: false,
   cloudrun: true,
   "claude-code-plugin": false,
@@ -2225,7 +2222,6 @@ var apiDocs = {
   lambda: "https://www.remotion.dev/docs/lambda",
   bundler: "https://www.remotion.dev/docs/bundler",
   "browser-studio": null,
-  "canvas-capture": null,
   "studio-codemods": null,
   "lambda-client": null,
   "serverless-client": null,

package/dist/index.d.ts

@@ -1,6 +1,6 @@
 export { splitAnsi, stripAnsi } from './ansi';
+export { AddEffectKeyframeRequest, AddEffectKeyframeResponse, AddEffectRequest, AddEffectResponse, AddKeyframesRequest, AddKeyframesResponse, AddRenderRequest, AddSequenceKeyframeRequest, AddSequenceKeyframeResponse, ApiRoutes, ApplyCodemodRequest, ApplyCodemodResponse, ApplyVisualControlRequest, ApplyVisualControlResponse, BatchUpdateEffectKeyframeSettings, BatchUpdateKeyframeSettingsRequest, BatchUpdateKeyframeSettingsResponse, BatchUpdateSequenceKeyframeSettings, CanUpdateDefaultPropsResponse, CanUpdateSequencePropsRequest, CancelRenderRequest, CancelRenderResponse, CaptionPatch, CompositionComponentInfoRequest, CompositionComponentInfoResponse, ConvertFigmaClipboardToSvgRequest, ConvertFigmaClipboardToSvgResponse, CopyStillToClipboardRequest, DeleteEffectKeyframe, DeleteEffectRequest, DeleteEffectRequestItem, DeleteEffectResponse, DeleteJsxNodeRequest, DeleteJsxNodeRequestItem, DeleteJsxNodeResponse, DeleteKeyframesRequest, DeleteKeyframesResponse, DeleteSequenceKeyframe, DeleteStaticFileRequest, DeleteStaticFileResponse, DownloadRemoteAssetRequest, DownloadRemoteAssetResponse, DuplicateEffectRequest, DuplicateEffectRequestItem, DuplicateEffectResponse, DuplicateJsxNodeRequest, DuplicateJsxNodeResponse, ElementInstallExpectedFileState, ElementInstallRequest, ElementInstallSource, EditorPickerId, FindInFileRequest, FindInFileResponse, GetDefaultEditorInfoRequest, GetDefaultEditorInfoResponse, GoogleFontSourceEdit, InsertElementFileConflict, InsertElementRequest, InsertElementResponse, InsertJsxElementRequest, InsertJsxElementResponse, InsertableCompositionElement, InsertableCompositionElementPosition, InstallPackageRequest, InstallPackageResponse, LogStudioErrorRequest, LogStudioErrorResponse, MoveEffectKeyframe, MoveKeyframesRequest, MoveKeyframesResponse, MoveSequenceKeyframe, OpenInEditorRequest, OpenInEditorResponse, OpenInFileExplorerRequest, PasteEffectsRequest, PasteEffectsResponse, PrepareElementInstallRequest, PrepareElementInstallResponse, ProjectInfoRequest, ProjectInfoResponse, RedoRequest, RedoResponse, RemoveRenderRequest, RenameStaticFileRequest, RenameStaticFileResponse, ReorderEffectRequest, ReorderEffectResponse, ReorderSequencePosition, ReorderSequenceRequest, ReorderSequenceResponse, RestartStudioRequest, RestartStudioResponse, SaveEffectPropsRequest, SaveEffectPropsResponse, SaveInlineCaptionPatchesRequest, SaveMultipleEffectPropsEdit, SaveMultipleEffectPropsRequest, SaveMultipleEffectPropsResponse, SaveMultipleEffectPropsResult, SaveSequencePropEdit, SaveSequencePropSourceEdit, SaveSequencePropsRequest, SaveSequencePropsResponse, SaveSequencePropsResult, SimpleDiff, SplitJsxSequenceRequest, SplitJsxSequenceResponse, SubscribeToDefaultPropsRequest, SubscribeToDefaultPropsResponse, SubscribeToFileExistenceRequest, SubscribeToFileExistenceResponse, SubscribeToSequencePropsRequest, SubscribeToSequencePropsResponse, UndoRequest, UndoResponse, UnsubscribeFromDefaultPropsRequest, UnsubscribeFromFileExistenceRequest, UnsubscribeFromSequencePropsRequest, UpdateAvailableRequest, UpdateAvailableResponse, UpdateDefaultEditorRequest, UpdateDefaultEditorResponse, UpdateDefaultPropsRequest, UpdateDefaultPropsResponse, UpdateEffectKeyframeSettingsRequest, UpdateEffectKeyframeSettingsResponse, UpdateElementInstallTargetRequest, UpdateElementInstallTargetResponse, UpdatePublicLicenseRequest, UpdatePublicLicenseResponse, UpdateSequenceKeyframeSettingsRequest, UpdateSequenceKeyframeSettingsResponse, type AddEffectKeyframe, type AddSequenceKeyframe, type KeyframeSettings, } from './api-requests';
 export type { BrowserStudioOperations } from './browser-studio-operations';
-export { AddEffectKeyframeRequest, AddEffectKeyframeResponse, AddEffectRequest, AddEffectResponse, AddKeyframesRequest, AddKeyframesResponse, AddRenderRequest, AddSequenceKeyframeRequest, AddSequenceKeyframeResponse, ApiRoutes, ApplyCodemodRequest, ApplyCodemodResponse, ApplyVisualControlRequest, ApplyVisualControlResponse, BatchUpdateEffectKeyframeSettings, BatchUpdateKeyframeSettingsRequest, BatchUpdateKeyframeSettingsResponse, BatchUpdateSequenceKeyframeSettings, CanUpdateDefaultPropsResponse, CanUpdateSequencePropsRequest, CaptionPatch, CancelRenderRequest, CancelRenderResponse, CompositionComponentInfoRequest, CompositionComponentInfoResponse, ConvertFigmaClipboardToSvgRequest, ConvertFigmaClipboardToSvgResponse, CopyStillToClipboardRequest, DeleteEffectKeyframe, DeleteEffectRequest, DeleteEffectRequestItem, DeleteEffectResponse, DeleteJsxNodeRequest, DeleteJsxNodeRequestItem, DeleteJsxNodeResponse, DeleteKeyframesRequest, DeleteKeyframesResponse, DeleteSequenceKeyframe, DeleteStaticFileRequest, DeleteStaticFileResponse, DownloadRemoteAssetRequest, DownloadRemoteAssetResponse, DuplicateEffectRequest, DuplicateEffectRequestItem, DuplicateEffectResponse, DuplicateJsxNodeRequest, DuplicateJsxNodeResponse, ElementInstallRequest, FindInFileRequest, FindInFileResponse, GoogleFontSourceEdit, InsertElementFileConflict, InsertElementRequest, InsertElementResponse, InsertJsxElementRequest, InsertJsxElementResponse, InsertableCompositionElement, InsertableCompositionElementPosition, InstallPackageRequest, InstallPackageResponse, LogStudioErrorRequest, LogStudioErrorResponse, MoveEffectKeyframe, MoveKeyframesRequest, MoveKeyframesResponse, MoveSequenceKeyframe, OpenInEditorRequest, OpenInEditorResponse, OpenInFileExplorerRequest, PasteEffectsRequest, PasteEffectsResponse, ProjectInfoRequest, ProjectInfoResponse, RedoRequest, RedoResponse, RemoveRenderRequest, RenameStaticFileRequest, RenameStaticFileResponse, ReorderEffectRequest, ReorderEffectResponse, ReorderSequencePosition, ReorderSequenceRequest, ReorderSequenceResponse, RestartStudioRequest, RestartStudioResponse, SaveEffectPropsRequest, SaveEffectPropsResponse, SaveMultipleEffectPropsEdit, SaveMultipleEffectPropsRequest, SaveMultipleEffectPropsResponse, SaveMultipleEffectPropsResult, SaveInlineCaptionPatchesRequest, SaveSequencePropEdit, SaveSequencePropSourceEdit, SaveSequencePropsRequest, SaveSequencePropsResponse, SaveSequencePropsResult, SimpleDiff, SplitJsxSequenceRequest, SplitJsxSequenceResponse, SubscribeToDefaultPropsRequest, SubscribeToDefaultPropsResponse, SubscribeToFileExistenceRequest, SubscribeToFileExistenceResponse, SubscribeToSequencePropsRequest, SubscribeToSequencePropsResponse, UndoRequest, UndoResponse, UnsubscribeFromDefaultPropsRequest, UnsubscribeFromFileExistenceRequest, UnsubscribeFromSequencePropsRequest, UpdateAvailableRequest, UpdateAvailableResponse, UpdateDefaultPropsRequest, UpdateDefaultPropsResponse, UpdateEffectKeyframeSettingsRequest, UpdateEffectKeyframeSettingsResponse, UpdateElementInstallTargetRequest, UpdateElementInstallTargetResponse, UpdatePublicLicenseRequest, UpdatePublicLicenseResponse, UpdateSequenceKeyframeSettingsRequest, UpdateSequenceKeyframeSettingsResponse, type AddEffectKeyframe, type AddSequenceKeyframe, type KeyframeSettings, } from './api-requests';
 export type { ApplyVisualControlCodemod, RecastCodemod } from './codemods';
 export { compositionDragDataToSymbolicatedStack } from './composition-drag-data';
 export { DEFAULT_BUFFER_STATE_DELAY_IN_MILLISECONDS } from './default-buffer-state-delay-in-milliseconds';
@@ -16,9 +16,9 @@ export { ErrorLocation, getLocationFromBuildError, } from './get-location-from-b
 export { getProjectName } from './get-project-name';
 export type { GitSource } from './git-source';
 export { HotMiddlewareMessage, HotMiddlewareOptions, ModuleMap, hotMiddlewareOptions, } from './hot-middleware';
+export { isKeyframeClipboardFieldType, parseKeyframeClipboardData, parseKeyframeClipboardDataResult, type KeyframeClipboardData, type KeyframeClipboardDataParseResult, type KeyframeClipboardFieldType, } from './keyframe-clipboard-data';
 export { CUBIC_KEYFRAME_EASING, EASE_KEYFRAME_EASING, KEYFRAME_EASING_PRESETS, LINEAR_KEYFRAME_EASING, QUAD_KEYFRAME_EASING, getBackKeyframeEasing, getOutKeyframeEasing, getPolyKeyframeEasing, type KeyframeEasing, type KeyframeEasingPreset, } from './keyframe-easing-presets';
 export { canEditEasingForInterpolationFunction, getKeyframeInterpolationFunction, getKeyframeInterpolationFunctionForSchemaField, isInteractivitySchemaFieldKeyframable, isKeyframeInterpolationFunction, isSchemaFieldKeyframable, keyframeInterpolationFunctions, type KeyframeInterpolationFunction, } from './keyframe-interpolation-function';
-export { isKeyframeClipboardFieldType, parseKeyframeClipboardData, parseKeyframeClipboardDataResult, type KeyframeClipboardData, type KeyframeClipboardDataParseResult, type KeyframeClipboardFieldType, } from './keyframe-clipboard-data';
 export { DEFAULT_TIMELINE_TRACKS } from './max-timeline-tracks';
 export { Pkgs, apiDocs, descriptions, extraPackages, installableMap, packages, type ExtraPackage, } from './package-info';
 export { PackageManager } from './package-manager';
@@ -31,11 +31,11 @@ export { getRequiredPackageForEffectImportPath, getRequiredPackageForInsertableE
 export { SCHEMA_FIELD_GROUPS, SCHEMA_FIELD_ROW_HEIGHT, getEffectFieldsToShow, getFieldsToShow, getSchemaFieldGroup, } from './schema-field-info';
 export type { AnySchemaFieldInfo, DragOverrides, EffectSchemaFieldInfo, InteractivitySchemaFieldInfo, PropStatuses, SchemaFieldGroup, SchemaFieldGroupInfo, SchemaFieldInfo, SequenceControls, } from './schema-field-info';
 export { ScriptLine, SomeStackFrame, StackFrame, SymbolicatedStackFrame, } from './stack-types';
-export { BORDER_RADIUS_LONGHAND_KEYS, BORDER_RADIUS_SHORTHAND_KEY, getStylePropertyLonghandKeys, } from './style-property-relations';
 export { EnumPath, stringifyDefaultProps } from './stringify-default-props';
 export { getStudioEntryPoints, type StudioEntryPointPaths, } from './studio-entry-points';
 export { studioHtml, type StudioHtmlOptions } from './studio-html';
 export type { StudioRuntimeConfig } from './studio-runtime-config';
+export { BORDER_RADIUS_LONGHAND_KEYS, BORDER_RADIUS_SHORTHAND_KEY, getStylePropertyLonghandKeys, } from './style-property-relations';
 export type { VisualControlChange } from './codemods';
 export { optimisticAddEffectKeyframe, optimisticAddSequenceKeyframe, } from './optimistic-add-keyframe';
 export { optimisticDeleteEffectKeyframe, optimisticDeleteEffectKeyframes, optimisticDeleteSequenceKeyframe, optimisticDeleteSequenceKeyframes, } from './optimistic-delete-keyframe';

package/dist/index.js

@@ -14,8 +14,8 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.DEFAULT_SPRING_EASING = exports.packages = exports.installableMap = exports.extraPackages = exports.descriptions = exports.apiDocs = exports.DEFAULT_TIMELINE_TRACKS = exports.parseKeyframeClipboardDataResult = exports.parseKeyframeClipboardData = exports.isKeyframeClipboardFieldType = exports.keyframeInterpolationFunctions = exports.isSchemaFieldKeyframable = exports.isKeyframeInterpolationFunction = exports.isInteractivitySchemaFieldKeyframable = exports.getKeyframeInterpolationFunctionForSchemaField = exports.getKeyframeInterpolationFunction = exports.canEditEasingForInterpolationFunction = exports.getPolyKeyframeEasing = exports.getOutKeyframeEasing = exports.getBackKeyframeEasing = exports.QUAD_KEYFRAME_EASING = exports.LINEAR_KEYFRAME_EASING = exports.KEYFRAME_EASING_PRESETS = exports.EASE_KEYFRAME_EASING = exports.CUBIC_KEYFRAME_EASING = exports.hotMiddlewareOptions = exports.getProjectName = exports.getLocationFromBuildError = exports.getDefaultOutLocation = exports.getAssetSchemaKeys = exports.getAllSchemaKeys = exports.formatBytes = exports.parseEffectPropClipboardDataResult = exports.parseEffectPropClipboardData = exports.parseEffectClipboardDataResult = exports.parseEffectClipboardData = exports.getEffectPreviewSource = exports.getEffectPreviewAlt = exports.getEffectDocumentationPath = exports.getEffectDocumentationLink = exports.getEffectCatalogCategories = exports.EFFECT_CATALOG = exports.parseEasingClipboardDataResult = exports.parseEasingClipboardData = exports.isImageFileType = exports.detectFileType = exports.DEFAULT_BUFFER_STATE_DELAY_IN_MILLISECONDS = exports.compositionDragDataToSymbolicatedStack = exports.stripAnsi = exports.splitAnsi = void 0;
-exports.isUrl = exports.stringifySequenceSubscriptionKey = exports.stringifySequenceExpandedRowKey = exports.optimisticUpdateSequenceKeyframeSettings = exports.optimisticUpdateEffectKeyframeSettings = exports.optimisticUpdateForPropStatuses = exports.optimisticUpdateForEffectPropStatuses = exports.optimisticMoveSequenceKeyframes = exports.optimisticMoveEffectKeyframes = exports.moveKeyframesInPropStatus = exports.canMoveKeyframesWithoutCollisions = exports.optimisticDeleteSequenceKeyframes = exports.optimisticDeleteSequenceKeyframe = exports.optimisticDeleteEffectKeyframes = exports.optimisticDeleteEffectKeyframe = exports.optimisticAddSequenceKeyframe = exports.optimisticAddEffectKeyframe = exports.studioHtml = exports.getStudioEntryPoints = exports.stringifyDefaultProps = exports.getStylePropertyLonghandKeys = exports.BORDER_RADIUS_SHORTHAND_KEY = exports.BORDER_RADIUS_LONGHAND_KEYS = exports.getSchemaFieldGroup = exports.getFieldsToShow = exports.getEffectFieldsToShow = exports.SCHEMA_FIELD_ROW_HEIGHT = exports.SCHEMA_FIELD_GROUPS = exports.isValidPackageName = exports.getRequiredPackageForInsertableElement = exports.getRequiredPackageForEffectImportPath = exports.parseSpringEasingConfig = void 0;
+exports.DEFAULT_SPRING_EASING = exports.packages = exports.installableMap = exports.extraPackages = exports.descriptions = exports.apiDocs = exports.DEFAULT_TIMELINE_TRACKS = exports.keyframeInterpolationFunctions = exports.isSchemaFieldKeyframable = exports.isKeyframeInterpolationFunction = exports.isInteractivitySchemaFieldKeyframable = exports.getKeyframeInterpolationFunctionForSchemaField = exports.getKeyframeInterpolationFunction = exports.canEditEasingForInterpolationFunction = exports.getPolyKeyframeEasing = exports.getOutKeyframeEasing = exports.getBackKeyframeEasing = exports.QUAD_KEYFRAME_EASING = exports.LINEAR_KEYFRAME_EASING = exports.KEYFRAME_EASING_PRESETS = exports.EASE_KEYFRAME_EASING = exports.CUBIC_KEYFRAME_EASING = exports.parseKeyframeClipboardDataResult = exports.parseKeyframeClipboardData = exports.isKeyframeClipboardFieldType = exports.hotMiddlewareOptions = exports.getProjectName = exports.getLocationFromBuildError = exports.getDefaultOutLocation = exports.getAssetSchemaKeys = exports.getAllSchemaKeys = exports.formatBytes = exports.parseEffectPropClipboardDataResult = exports.parseEffectPropClipboardData = exports.parseEffectClipboardDataResult = exports.parseEffectClipboardData = exports.getEffectPreviewSource = exports.getEffectPreviewAlt = exports.getEffectDocumentationPath = exports.getEffectDocumentationLink = exports.getEffectCatalogCategories = exports.EFFECT_CATALOG = exports.parseEasingClipboardDataResult = exports.parseEasingClipboardData = exports.isImageFileType = exports.detectFileType = exports.DEFAULT_BUFFER_STATE_DELAY_IN_MILLISECONDS = exports.compositionDragDataToSymbolicatedStack = exports.stripAnsi = exports.splitAnsi = void 0;
+exports.isUrl = exports.stringifySequenceSubscriptionKey = exports.stringifySequenceExpandedRowKey = exports.optimisticUpdateSequenceKeyframeSettings = exports.optimisticUpdateEffectKeyframeSettings = exports.optimisticUpdateForPropStatuses = exports.optimisticUpdateForEffectPropStatuses = exports.optimisticMoveSequenceKeyframes = exports.optimisticMoveEffectKeyframes = exports.moveKeyframesInPropStatus = exports.canMoveKeyframesWithoutCollisions = exports.optimisticDeleteSequenceKeyframes = exports.optimisticDeleteSequenceKeyframe = exports.optimisticDeleteEffectKeyframes = exports.optimisticDeleteEffectKeyframe = exports.optimisticAddSequenceKeyframe = exports.optimisticAddEffectKeyframe = exports.getStylePropertyLonghandKeys = exports.BORDER_RADIUS_SHORTHAND_KEY = exports.BORDER_RADIUS_LONGHAND_KEYS = exports.studioHtml = exports.getStudioEntryPoints = exports.stringifyDefaultProps = exports.getSchemaFieldGroup = exports.getFieldsToShow = exports.getEffectFieldsToShow = exports.SCHEMA_FIELD_ROW_HEIGHT = exports.SCHEMA_FIELD_GROUPS = exports.isValidPackageName = exports.getRequiredPackageForInsertableElement = exports.getRequiredPackageForEffectImportPath = exports.parseSpringEasingConfig = void 0;
 const ansi_1 = require("./ansi");
 Object.defineProperty(exports, "splitAnsi", { enumerable: true, get: function () { return ansi_1.splitAnsi; } });
 Object.defineProperty(exports, "stripAnsi", { enumerable: true, get: function () { return ansi_1.stripAnsi; } });
@@ -55,6 +55,10 @@ const get_project_name_1 = require("./get-project-name");
 Object.defineProperty(exports, "getProjectName", { enumerable: true, get: function () { return get_project_name_1.getProjectName; } });
 const hot_middleware_1 = require("./hot-middleware");
 Object.defineProperty(exports, "hotMiddlewareOptions", { enumerable: true, get: function () { return hot_middleware_1.hotMiddlewareOptions; } });
+const keyframe_clipboard_data_1 = require("./keyframe-clipboard-data");
+Object.defineProperty(exports, "isKeyframeClipboardFieldType", { enumerable: true, get: function () { return keyframe_clipboard_data_1.isKeyframeClipboardFieldType; } });
+Object.defineProperty(exports, "parseKeyframeClipboardData", { enumerable: true, get: function () { return keyframe_clipboard_data_1.parseKeyframeClipboardData; } });
+Object.defineProperty(exports, "parseKeyframeClipboardDataResult", { enumerable: true, get: function () { return keyframe_clipboard_data_1.parseKeyframeClipboardDataResult; } });
 const keyframe_easing_presets_1 = require("./keyframe-easing-presets");
 Object.defineProperty(exports, "CUBIC_KEYFRAME_EASING", { enumerable: true, get: function () { return keyframe_easing_presets_1.CUBIC_KEYFRAME_EASING; } });
 Object.defineProperty(exports, "EASE_KEYFRAME_EASING", { enumerable: true, get: function () { return keyframe_easing_presets_1.EASE_KEYFRAME_EASING; } });
@@ -72,10 +76,6 @@ Object.defineProperty(exports, "isInteractivitySchemaFieldKeyframable", { enumer
 Object.defineProperty(exports, "isKeyframeInterpolationFunction", { enumerable: true, get: function () { return keyframe_interpolation_function_1.isKeyframeInterpolationFunction; } });
 Object.defineProperty(exports, "isSchemaFieldKeyframable", { enumerable: true, get: function () { return keyframe_interpolation_function_1.isSchemaFieldKeyframable; } });
 Object.defineProperty(exports, "keyframeInterpolationFunctions", { enumerable: true, get: function () { return keyframe_interpolation_function_1.keyframeInterpolationFunctions; } });
-const keyframe_clipboard_data_1 = require("./keyframe-clipboard-data");
-Object.defineProperty(exports, "isKeyframeClipboardFieldType", { enumerable: true, get: function () { return keyframe_clipboard_data_1.isKeyframeClipboardFieldType; } });
-Object.defineProperty(exports, "parseKeyframeClipboardData", { enumerable: true, get: function () { return keyframe_clipboard_data_1.parseKeyframeClipboardData; } });
-Object.defineProperty(exports, "parseKeyframeClipboardDataResult", { enumerable: true, get: function () { return keyframe_clipboard_data_1.parseKeyframeClipboardDataResult; } });
 const max_timeline_tracks_1 = require("./max-timeline-tracks");
 Object.defineProperty(exports, "DEFAULT_TIMELINE_TRACKS", { enumerable: true, get: function () { return max_timeline_tracks_1.DEFAULT_TIMELINE_TRACKS; } });
 const package_info_1 = require("./package-info");
@@ -97,16 +97,16 @@ Object.defineProperty(exports, "SCHEMA_FIELD_ROW_HEIGHT", { enumerable: true, ge
 Object.defineProperty(exports, "getEffectFieldsToShow", { enumerable: true, get: function () { return schema_field_info_1.getEffectFieldsToShow; } });
 Object.defineProperty(exports, "getFieldsToShow", { enumerable: true, get: function () { return schema_field_info_1.getFieldsToShow; } });
 Object.defineProperty(exports, "getSchemaFieldGroup", { enumerable: true, get: function () { return schema_field_info_1.getSchemaFieldGroup; } });
-const style_property_relations_1 = require("./style-property-relations");
-Object.defineProperty(exports, "BORDER_RADIUS_LONGHAND_KEYS", { enumerable: true, get: function () { return style_property_relations_1.BORDER_RADIUS_LONGHAND_KEYS; } });
-Object.defineProperty(exports, "BORDER_RADIUS_SHORTHAND_KEY", { enumerable: true, get: function () { return style_property_relations_1.BORDER_RADIUS_SHORTHAND_KEY; } });
-Object.defineProperty(exports, "getStylePropertyLonghandKeys", { enumerable: true, get: function () { return style_property_relations_1.getStylePropertyLonghandKeys; } });
 const stringify_default_props_1 = require("./stringify-default-props");
 Object.defineProperty(exports, "stringifyDefaultProps", { enumerable: true, get: function () { return stringify_default_props_1.stringifyDefaultProps; } });
 const studio_entry_points_1 = require("./studio-entry-points");
 Object.defineProperty(exports, "getStudioEntryPoints", { enumerable: true, get: function () { return studio_entry_points_1.getStudioEntryPoints; } });
 const studio_html_1 = require("./studio-html");
 Object.defineProperty(exports, "studioHtml", { enumerable: true, get: function () { return studio_html_1.studioHtml; } });
+const style_property_relations_1 = require("./style-property-relations");
+Object.defineProperty(exports, "BORDER_RADIUS_LONGHAND_KEYS", { enumerable: true, get: function () { return style_property_relations_1.BORDER_RADIUS_LONGHAND_KEYS; } });
+Object.defineProperty(exports, "BORDER_RADIUS_SHORTHAND_KEY", { enumerable: true, get: function () { return style_property_relations_1.BORDER_RADIUS_SHORTHAND_KEY; } });
+Object.defineProperty(exports, "getStylePropertyLonghandKeys", { enumerable: true, get: function () { return style_property_relations_1.getStylePropertyLonghandKeys; } });
 const optimistic_add_keyframe_1 = require("./optimistic-add-keyframe");
 Object.defineProperty(exports, "optimisticAddEffectKeyframe", { enumerable: true, get: function () { return optimistic_add_keyframe_1.optimisticAddEffectKeyframe; } });
 Object.defineProperty(exports, "optimisticAddSequenceKeyframe", { enumerable: true, get: function () { return optimistic_add_keyframe_1.optimisticAddSequenceKeyframe; } });

package/dist/optimistic-update-for-code-values.d.ts

@@ -0,0 +1,7 @@
+import { type CanUpdateSequencePropsResponse, type SequenceSchema } from 'remotion';
+export declare const optimisticUpdateForCodeValues: ({ previous, fieldKey, value, schema, }: {
+    previous: CanUpdateSequencePropsResponse;
+    fieldKey: string;
+    value: unknown;
+    schema: SequenceSchema;
+}) => CanUpdateSequencePropsResponse;

package/dist/optimistic-update-for-code-values.js

@@ -0,0 +1,30 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.optimisticUpdateForCodeValues = void 0;
+const no_react_1 = require("remotion/no-react");
+const optimisticUpdateForCodeValues = ({ previous, fieldKey, value, schema, }) => {
+    var _a;
+    if (!previous.canUpdate) {
+        return previous;
+    }
+    const props = {
+        ...previous.props,
+        [fieldKey]: { status: 'static', codeValue: value },
+    };
+    if (((_a = schema[fieldKey]) === null || _a === void 0 ? void 0 : _a.type) === 'enum') {
+        const propsToDelete = no_react_1.NoReactInternals.findPropsToDelete({
+            schema,
+            key: fieldKey,
+            value,
+        });
+        for (const propToDelete of propsToDelete) {
+            delete props[propToDelete];
+        }
+    }
+    return {
+        canUpdate: true,
+        props,
+        effects: previous.effects,
+    };
+};
+exports.optimisticUpdateForCodeValues = optimisticUpdateForCodeValues;

package/dist/optimistic-update-for-effect-code-values.d.ts

@@ -0,0 +1,8 @@
+import { type CanUpdateSequencePropsResponse, type SequenceSchema } from 'remotion';
+export declare const optimisticUpdateForEffectCodeValues: ({ previous, effectIndex, fieldKey, value, schema, }: {
+    previous: CanUpdateSequencePropsResponse;
+    effectIndex: number;
+    fieldKey: string;
+    value: unknown;
+    schema: SequenceSchema;
+}) => CanUpdateSequencePropsResponse;

package/dist/optimistic-update-for-effect-code-values.js

@@ -0,0 +1,43 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.optimisticUpdateForEffectCodeValues = void 0;
+const no_react_1 = require("remotion/no-react");
+const optimisticUpdateForEffectCodeValues = ({ previous, effectIndex, fieldKey, value, schema, }) => {
+    var _a;
+    if (!previous.canUpdate) {
+        return previous;
+    }
+    const targetIndex = previous.effects.findIndex((e) => e.effectIndex === effectIndex);
+    if (targetIndex === -1) {
+        return previous;
+    }
+    const target = previous.effects[targetIndex];
+    if (!target.canUpdate) {
+        return previous;
+    }
+    const props = {
+        ...target.props,
+        [fieldKey]: { status: 'static', codeValue: value },
+    };
+    if (((_a = schema[fieldKey]) === null || _a === void 0 ? void 0 : _a.type) === 'enum') {
+        const propsToDelete = no_react_1.NoReactInternals.findPropsToDelete({
+            schema,
+            key: fieldKey,
+            value,
+        });
+        for (const propToDelete of propsToDelete) {
+            delete props[propToDelete];
+        }
+    }
+    const updatedEffect = {
+        ...target,
+        props,
+    };
+    const effects = [...previous.effects];
+    effects[targetIndex] = updatedEffect;
+    return {
+        ...previous,
+        effects,
+    };
+};
+exports.optimisticUpdateForEffectCodeValues = optimisticUpdateForEffectCodeValues;

package/dist/package-info.d.ts

@@ -1,6 +1,6 @@
-declare const allPackages: readonly ["svg-3d-engine", "animation-utils", "animated-emoji", "astro-example", "babel-loader", "bugs", "brand", "bundler", "browser-studio", "canvas-capture", "claude-code-plugin", "cli", "cloudrun", "codex-plugin", "kimi-code-plugin", "compositor-darwin-arm64", "compositor-darwin-x64", "compositor-linux-arm64-gnu", "compositor-linux-arm64-musl", "compositor-linux-x64-gnu", "compositor-linux-x64-musl", "compositor-win32-x64-msvc", "core", "create-video", "discord-poster", "docusaurus-plugin", "docs", "enable-scss", "eslint-config", "eslint-config-flat", "eslint-config-internal", "eslint-plugin", "example-without-zod", "example", "fonts", "gif", "google-fonts", "install-whisper-cpp", "it-tests", "react18-tests", "lambda-go-example", "lambda-go", "lambda-php", "lambda-ruby", "lambda-python", "lambda", "lambda-client", "layout-utils", "rounded-text-box", "licensing", "lottie", "mcp", "media-utils", "motion-blur", "noise", "paths", "player-a11y", "player-example", "player", "preload", "renderer", "rive", "shapes", "skia", "promo-pages", "streaming", "serverless", "serverless-client", "skills", "skills-evals", "studio-codemods", "studio-server", "studio-shared", "studio", "tailwind", "tailwind-v4", "timeline-utils", "test-utils", "three", "transitions", "media-parser", "zod-types", "zod-types-v3", "webcodecs", "convert", "captions", "openai-whisper", "elevenlabs", "compositor", "example-videos", "whisper-web", "media", "remotion-media", "web-renderer", "design", "studio-protocol", "light-leaks", "rough-notation", "starburst", "vercel", "sfx", "effects"];
+declare const allPackages: readonly ["svg-3d-engine", "animation-utils", "animated-emoji", "astro-example", "babel-loader", "bugs", "brand", "bundler", "browser-studio", "claude-code-plugin", "cli", "cloudrun", "codex-plugin", "kimi-code-plugin", "compositor-darwin-arm64", "compositor-darwin-x64", "compositor-linux-arm64-gnu", "compositor-linux-arm64-musl", "compositor-linux-x64-gnu", "compositor-linux-x64-musl", "compositor-win32-x64-msvc", "core", "create-video", "discord-poster", "docusaurus-plugin", "docs", "enable-scss", "eslint-config", "eslint-config-flat", "eslint-config-internal", "eslint-plugin", "example-without-zod", "example", "fonts", "gif", "google-fonts", "install-whisper-cpp", "it-tests", "react18-tests", "lambda-go-example", "lambda-go", "lambda-php", "lambda-ruby", "lambda-python", "lambda", "lambda-client", "layout-utils", "rounded-text-box", "licensing", "lottie", "mcp", "media-utils", "motion-blur", "noise", "paths", "player-a11y", "player-example", "player", "preload", "renderer", "rive", "shapes", "skia", "promo-pages", "streaming", "serverless", "serverless-client", "skills", "skills-evals", "studio-codemods", "studio-server", "studio-shared", "studio", "tailwind", "tailwind-v4", "timeline-utils", "test-utils", "three", "transitions", "media-parser", "zod-types", "zod-types-v3", "webcodecs", "convert", "captions", "openai-whisper", "elevenlabs", "compositor", "example-videos", "whisper-web", "media", "remotion-media", "web-renderer", "design", "studio-protocol", "light-leaks", "rough-notation", "starburst", "vercel", "sfx", "effects"];
 export type Pkgs = (typeof allPackages)[number];
-export declare const packages: ("animated-emoji" | "animation-utils" | "astro-example" | "babel-loader" | "brand" | "browser-studio" | "bugs" | "bundler" | "canvas-capture" | "captions" | "claude-code-plugin" | "cli" | "cloudrun" | "codex-plugin" | "compositor" | "compositor-darwin-arm64" | "compositor-darwin-x64" | "compositor-linux-arm64-gnu" | "compositor-linux-arm64-musl" | "compositor-linux-x64-gnu" | "compositor-linux-x64-musl" | "compositor-win32-x64-msvc" | "convert" | "core" | "create-video" | "design" | "discord-poster" | "docs" | "docusaurus-plugin" | "effects" | "elevenlabs" | "enable-scss" | "eslint-config" | "eslint-config-flat" | "eslint-config-internal" | "eslint-plugin" | "example" | "example-videos" | "example-without-zod" | "fonts" | "gif" | "google-fonts" | "install-whisper-cpp" | "it-tests" | "kimi-code-plugin" | "lambda" | "lambda-client" | "lambda-go" | "lambda-go-example" | "lambda-php" | "lambda-python" | "lambda-ruby" | "layout-utils" | "licensing" | "light-leaks" | "lottie" | "mcp" | "media" | "media-parser" | "media-utils" | "motion-blur" | "noise" | "openai-whisper" | "paths" | "player" | "player-a11y" | "player-example" | "preload" | "promo-pages" | "react18-tests" | "remotion-media" | "renderer" | "rive" | "rough-notation" | "rounded-text-box" | "serverless" | "serverless-client" | "sfx" | "shapes" | "skia" | "skills" | "skills-evals" | "starburst" | "streaming" | "studio" | "studio-codemods" | "studio-protocol" | "studio-server" | "studio-shared" | "svg-3d-engine" | "tailwind" | "tailwind-v4" | "test-utils" | "three" | "timeline-utils" | "transitions" | "vercel" | "web-renderer" | "webcodecs" | "whisper-web" | "zod-types" | "zod-types-v3")[];
+export declare const packages: ("animated-emoji" | "animation-utils" | "astro-example" | "babel-loader" | "brand" | "browser-studio" | "bugs" | "bundler" | "captions" | "claude-code-plugin" | "cli" | "cloudrun" | "codex-plugin" | "compositor" | "compositor-darwin-arm64" | "compositor-darwin-x64" | "compositor-linux-arm64-gnu" | "compositor-linux-arm64-musl" | "compositor-linux-x64-gnu" | "compositor-linux-x64-musl" | "compositor-win32-x64-msvc" | "convert" | "core" | "create-video" | "design" | "discord-poster" | "docs" | "docusaurus-plugin" | "effects" | "elevenlabs" | "enable-scss" | "eslint-config" | "eslint-config-flat" | "eslint-config-internal" | "eslint-plugin" | "example" | "example-videos" | "example-without-zod" | "fonts" | "gif" | "google-fonts" | "install-whisper-cpp" | "it-tests" | "kimi-code-plugin" | "lambda" | "lambda-client" | "lambda-go" | "lambda-go-example" | "lambda-php" | "lambda-python" | "lambda-ruby" | "layout-utils" | "licensing" | "light-leaks" | "lottie" | "mcp" | "media" | "media-parser" | "media-utils" | "motion-blur" | "noise" | "openai-whisper" | "paths" | "player" | "player-a11y" | "player-example" | "preload" | "promo-pages" | "react18-tests" | "remotion-media" | "renderer" | "rive" | "rough-notation" | "rounded-text-box" | "serverless" | "serverless-client" | "sfx" | "shapes" | "skia" | "skills" | "skills-evals" | "starburst" | "streaming" | "studio" | "studio-codemods" | "studio-protocol" | "studio-server" | "studio-shared" | "svg-3d-engine" | "tailwind" | "tailwind-v4" | "test-utils" | "three" | "timeline-utils" | "transitions" | "vercel" | "web-renderer" | "webcodecs" | "whisper-web" | "zod-types" | "zod-types-v3")[];
 export type ExtraPackage = {
     name: string;
     version: string;

package/dist/package-info.js

@@ -13,7 +13,6 @@ const allPackages = [
     'brand',
     'bundler',
     'browser-studio',
-    'canvas-capture',
     'claude-code-plugin',
     'cli',
     'cloudrun',
@@ -150,7 +149,6 @@ exports.descriptions = {
     lambda: 'Render Remotion videos on AWS Lambda',
     bundler: 'Bundle Remotion compositions using Webpack',
     'browser-studio': 'Run Remotion Studio in the browser',
-    'canvas-capture': 'Capture HTML-in-canvas content as a video',
     'studio-codemods': 'Shared codemods for Remotion Studio',
     'studio-server': 'Run a Remotion Studio with a server backend',
     'install-whisper-cpp': 'Helpers for installing and using Whisper.cpp',
@@ -251,7 +249,6 @@ exports.installableMap = {
     brand: false,
     bundler: false,
     'browser-studio': false,
-    'canvas-capture': false,
     cli: false,
     cloudrun: true,
     'claude-code-plugin': false,
@@ -369,7 +366,6 @@ exports.apiDocs = {
     lambda: 'https://www.remotion.dev/docs/lambda',
     bundler: 'https://www.remotion.dev/docs/bundler',
     'browser-studio': null,
-    'canvas-capture': null,
     'studio-codemods': null,
     'lambda-client': null,
     'serverless-client': null,

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

@@ -0,0 +1,22 @@
+export declare const SHAPE_DRAG_MIME_TYPE = "application/vnd.remotion.shape+json";
+export declare const shapeNames: readonly ["Arrow", "Circle", "Ellipse", "Heart", "Pie", "Polygon", "Rect", "Star", "Triangle"];
+export type ShapeName = (typeof shapeNames)[number];
+export type ShapeAttribute = {
+    name: string;
+    value: string | number | boolean;
+};
+export type ShapeDragData = {
+    type: 'remotion-shape';
+    version: 1;
+    shape: ShapeName;
+    attributes: ShapeAttribute[];
+};
+export declare const isShapeName: (value: unknown) => value is "Arrow" | "Circle" | "Ellipse" | "Heart" | "Pie" | "Polygon" | "Rect" | "Star" | "Triangle";
+export declare const isShapeAttributeName: (value: unknown) => value is string;
+export declare const isShapeAttribute: (value: unknown) => value is ShapeAttribute;
+export declare const areShapeAttributes: (value: unknown) => value is ShapeAttribute[];
+export declare const makeShapeDragData: ({ attributes, shape, }: {
+    attributes: ShapeAttribute[];
+    shape: "Arrow" | "Circle" | "Ellipse" | "Heart" | "Pie" | "Polygon" | "Rect" | "Star" | "Triangle";
+}) => ShapeDragData;
+export declare const parseShapeDragData: (value: string) => ShapeDragData | null;

package/dist/shape-drag-data.js

@@ -0,0 +1,90 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.parseShapeDragData = exports.makeShapeDragData = exports.areShapeAttributes = exports.isShapeAttribute = exports.isShapeAttributeName = exports.isShapeName = exports.shapeNames = exports.SHAPE_DRAG_MIME_TYPE = void 0;
+exports.SHAPE_DRAG_MIME_TYPE = 'application/vnd.remotion.shape+json';
+exports.shapeNames = [
+    'Arrow',
+    'Circle',
+    'Ellipse',
+    'Heart',
+    'Pie',
+    'Polygon',
+    'Rect',
+    'Star',
+    'Triangle',
+];
+const isRecord = (value) => {
+    return typeof value === 'object' && value !== null && !Array.isArray(value);
+};
+const isShapeName = (value) => {
+    return typeof value === 'string' && exports.shapeNames.includes(value);
+};
+exports.isShapeName = isShapeName;
+const isShapeAttributeName = (value) => {
+    return (typeof value === 'string' &&
+        value !== 'style' &&
+        /^[A-Za-z_$][A-Za-z0-9_$]*$/.test(value));
+};
+exports.isShapeAttributeName = isShapeAttributeName;
+const isShapeAttribute = (value) => {
+    if (!isRecord(value)) {
+        return false;
+    }
+    if (!(0, exports.isShapeAttributeName)(value.name)) {
+        return false;
+    }
+    return (typeof value.value === 'string' ||
+        typeof value.value === 'boolean' ||
+        (typeof value.value === 'number' && Number.isFinite(value.value)));
+};
+exports.isShapeAttribute = isShapeAttribute;
+const areShapeAttributes = (value) => {
+    if (!Array.isArray(value)) {
+        return false;
+    }
+    const seen = new Set();
+    for (const attribute of value) {
+        if (!(0, exports.isShapeAttribute)(attribute) || seen.has(attribute.name)) {
+            return false;
+        }
+        seen.add(attribute.name);
+    }
+    return true;
+};
+exports.areShapeAttributes = areShapeAttributes;
+const makeShapeDragData = ({ attributes, shape, }) => {
+    return {
+        type: 'remotion-shape',
+        version: 1,
+        shape,
+        attributes,
+    };
+};
+exports.makeShapeDragData = makeShapeDragData;
+const parseShapeDragData = (value) => {
+    try {
+        const parsed = JSON.parse(value);
+        if (!isRecord(parsed)) {
+            return null;
+        }
+        if (parsed.type !== 'remotion-shape' || parsed.version !== 1) {
+            return null;
+        }
+        if (!(0, exports.isShapeName)(parsed.shape)) {
+            return null;
+        }
+        if (!(0, exports.areShapeAttributes)(parsed.attributes)) {
+            return null;
+        }
+        return {
+            type: 'remotion-shape',
+            version: 1,
+            shape: parsed.shape,
+            attributes: parsed.attributes,
+        };
+    }
+    catch (_a) {
+        return null;
+    }
+};
+exports.parseShapeDragData = parseShapeDragData;

package/package.json

@@ -3,7 +3,7 @@
 		"url": "https://github.com/remotion-dev/remotion/tree/main/packages/studio-shared"
 	},
 	"name": "@remotion/studio-shared",
-	"version": "4.0.502",
+	"version": "4.0.503",
 	"description": "Internal package for shared objects between the Studio backend and frontend",
 	"main": "dist",
 	"module": "dist/esm/index.mjs",
@@ -21,12 +21,12 @@
 		"url": "https://github.com/remotion-dev/remotion/issues"
 	},
 	"dependencies": {
-		"@remotion/studio-protocol": "4.0.502",
-		"remotion": "4.0.502"
+		"@remotion/studio-protocol": "4.0.503",
+		"remotion": "4.0.503"
 	},
 	"devDependencies": {
-		"@remotion/renderer": "4.0.502",
-		"@remotion/eslint-config-internal": "4.0.502",
+		"@remotion/renderer": "4.0.503",
+		"@remotion/eslint-config-internal": "4.0.503",
 		"eslint": "9.19.0",
 		"@typescript/native-preview": "7.0.0-dev.20260217.1"
 	},