@remotion/studio-shared 4.0.482 → 4.0.484

package/dist/api-requests.d.ts

@@ -4,6 +4,7 @@ import type { _InternalTypes, CannotUpdateSequenceReason, CanUpdateEffectPropsRe
 import type { RecastCodemod, VisualControlChange } from './codemods';
 import type { ComponentProp } from './component-drag-data';
 import type { EffectClipboardParam, EffectClipboardPasteType, EffectClipboardSnapshot } from './effect-clipboard-data';
+import type { ElementDragData } from './element-drag-data';
 import type { PackageManager } from './package-manager';
 import type { ProjectInfo } from './project-info';
 import type { CompletedClientRender, RequiredChromiumOptions } from './render-job';
@@ -528,6 +529,19 @@ export type InsertJsxElementResponse = {
     reason: string;
     stack: string;
 };
+export type InsertElementRequest = {
+    compositionFile: string;
+    compositionId: string;
+    element: ElementDragData['element'];
+    position: InsertableCompositionElementPosition | null;
+};
+export type InsertElementResponse = {
+    success: true;
+} | {
+    success: false;
+    reason: string;
+    stack: string;
+};
 export type DownloadRemoteAssetRequest = {
     url: string;
 };
@@ -613,6 +627,7 @@ export type ApiRoutes = {
     '/api/delete-jsx-node': ReqAndRes<DeleteJsxNodeRequest, DeleteJsxNodeResponse>;
     '/api/duplicate-jsx-node': ReqAndRes<DuplicateJsxNodeRequest, DuplicateJsxNodeResponse>;
     '/api/insert-jsx-element': ReqAndRes<InsertJsxElementRequest, InsertJsxElementResponse>;
+    '/api/insert-element': ReqAndRes<InsertElementRequest, InsertElementResponse>;
     '/api/download-remote-asset': ReqAndRes<DownloadRemoteAssetRequest, DownloadRemoteAssetResponse>;
     '/api/update-available': ReqAndRes<UpdateAvailableRequest, UpdateAvailableResponse>;
     '/api/apply-codemod': ReqAndRes<ApplyCodemodRequest, ApplyCodemodResponse>;

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

@@ -0,0 +1,13 @@
+export declare const getDefinePluginDefinitions: ({ maxTimelineTracks, askAIEnabled, keyboardShortcutsEnabled, bufferStateDelayInMilliseconds, experimentalClientSideRenderingEnabled, }: {
+    maxTimelineTracks: number | null;
+    askAIEnabled: boolean;
+    keyboardShortcutsEnabled: boolean;
+    bufferStateDelayInMilliseconds: number | null;
+    experimentalClientSideRenderingEnabled: boolean;
+}) => {
+    'process.env.MAX_TIMELINE_TRACKS': number | null;
+    'process.env.ASK_AI_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

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getDefinePluginDefinitions = void 0;
+const getDefinePluginDefinitions = ({ maxTimelineTracks, askAIEnabled, keyboardShortcutsEnabled, bufferStateDelayInMilliseconds, experimentalClientSideRenderingEnabled, }) => ({
+    'process.env.MAX_TIMELINE_TRACKS': maxTimelineTracks,
+    'process.env.ASK_AI_ENABLED': askAIEnabled,
+    '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/easing-clipboard-data.js

@@ -19,8 +19,25 @@ const isEasing = (value) => {
                 isFiniteNumber(value.damping) &&
                 isFiniteNumber(value.mass) &&
                 isFiniteNumber(value.stiffness) &&
+                (value.allowTail === undefined ||
+                    value.allowTail === null ||
+                    typeof value.allowTail === 'boolean') &&
+                (value.durationRestThreshold === undefined ||
+                    value.durationRestThreshold === null ||
+                    isFiniteNumber(value.durationRestThreshold)) &&
                 typeof value.overshootClamping === 'boolean')));
 };
+const normalizeEasing = (easing) => {
+    var _a, _b;
+    if (easing.type !== 'spring') {
+        return easing;
+    }
+    return {
+        ...easing,
+        allowTail: (_a = easing.allowTail) !== null && _a !== void 0 ? _a : null,
+        durationRestThreshold: (_b = easing.durationRestThreshold) !== null && _b !== void 0 ? _b : null,
+    };
+};
 const parseEasingClipboardDataResult = (value) => {
     try {
         const parsed = JSON.parse(value);
@@ -45,7 +62,7 @@ const parseEasingClipboardDataResult = (value) => {
                 type: 'easing',
                 version: 1,
                 remotionClipboard: 'easing',
-                easing: parsed.easing,
+                easing: normalizeEasing(parsed.easing),
             },
         };
     }

package/dist/effect-catalog.js

@@ -160,6 +160,28 @@ exports.EFFECT_CATALOG = [
             },
         },
     },
+    {
+        id: 'effects-linear-gradient',
+        category: 'Color',
+        label: 'linearGradient()',
+        description: 'Two-stop gradient effect',
+        effect: {
+            name: 'linearGradient',
+            importPath: '@remotion/effects/linear-gradient',
+            config: {},
+        },
+    },
+    {
+        id: 'effects-linear-gradient-tint',
+        category: 'Color',
+        label: 'linearGradientTint()',
+        description: 'Gradient tint effect',
+        effect: {
+            name: 'linearGradientTint',
+            importPath: '@remotion/effects/linear-gradient-tint',
+            config: {},
+        },
+    },
     {
         id: 'effects-thermal-vision',
         category: 'Color',
@@ -195,6 +217,17 @@ exports.EFFECT_CATALOG = [
             config: {},
         },
     },
+    {
+        id: 'effects-radial-progressive-blur',
+        category: 'Blur & Shadow',
+        label: 'radialProgressiveBlur()',
+        description: 'Ellipse-controlled blur effect',
+        effect: {
+            name: 'radialProgressiveBlur',
+            importPath: '@remotion/effects/radial-progressive-blur',
+            config: {},
+        },
+    },
     {
         id: 'effects-zoom-blur',
         category: 'Blur & Shadow',

package/dist/effect-clipboard-data.js

@@ -21,8 +21,43 @@ const isEasing = (value) => {
                 isFiniteNumber(value.damping) &&
                 isFiniteNumber(value.mass) &&
                 isFiniteNumber(value.stiffness) &&
+                (value.allowTail === undefined ||
+                    value.allowTail === null ||
+                    typeof value.allowTail === 'boolean') &&
+                (value.durationRestThreshold === undefined ||
+                    value.durationRestThreshold === null ||
+                    isFiniteNumber(value.durationRestThreshold)) &&
                 typeof value.overshootClamping === 'boolean')));
 };
+const normalizeEasing = (easing) => {
+    var _a, _b;
+    if (easing.type !== 'spring') {
+        return easing;
+    }
+    return {
+        ...easing,
+        allowTail: (_a = easing.allowTail) !== null && _a !== void 0 ? _a : null,
+        durationRestThreshold: (_b = easing.durationRestThreshold) !== null && _b !== void 0 ? _b : null,
+    };
+};
+const normalizeParam = (param) => {
+    if (param.type === 'static') {
+        return param;
+    }
+    return {
+        ...param,
+        easing: param.easing.map(normalizeEasing),
+    };
+};
+const normalizeSnapshot = (snapshot) => {
+    return {
+        ...snapshot,
+        params: Object.fromEntries(Object.entries(snapshot.params).map(([key, param]) => [
+            key,
+            normalizeParam(param),
+        ])),
+    };
+};
 const isKeyframe = (value) => {
     return isRecord(value) && isFiniteNumber(value.frame) && 'value' in value;
 };
@@ -94,7 +129,7 @@ const parseEffectClipboardDataResult = (value) => {
             if (!isEffectClipboardSnapshotV3(effect)) {
                 return { status: 'invalid' };
             }
-            effects.push(effect);
+            effects.push(normalizeSnapshot(effect));
         }
         return {
             status: 'valid',
@@ -161,7 +196,7 @@ const parseEffectPropClipboardDataResult = (value) => {
                     importPath: parsed.effect.importPath,
                 },
                 key: parsed.key,
-                param: parsed.param,
+                param: normalizeParam(parsed.param),
             },
         };
     }

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

@@ -0,0 +1,22 @@
+import { type ComponentDimensions } from './component-drag-data';
+export declare const ELEMENT_DRAG_MIME_TYPE = "application/vnd.remotion.element+json";
+export type ElementDragData = {
+    type: 'remotion-element';
+    version: 1;
+    element: {
+        slug: string;
+        displayName: string;
+        sourceCode: string;
+        dimensions: ComponentDimensions;
+    };
+};
+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: ({ dimensions, displayName, slug, sourceCode, }: {
+    slug: string;
+    displayName: string;
+    sourceCode: string;
+    dimensions: ComponentDimensions;
+}) => ElementDragData;
+export declare const parseElementDragData: (value: string) => ElementDragData | null;

package/dist/element-drag-data.js

@@ -0,0 +1,116 @@
+"use strict";
+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");
+exports.ELEMENT_DRAG_MIME_TYPE = 'application/vnd.remotion.element+json';
+const isRecord = (value) => {
+    return typeof value === 'object' && value !== null && !Array.isArray(value);
+};
+const isLowercaseElementFileName = (value) => {
+    return (typeof value === 'string' &&
+        value.length > 0 &&
+        value.length < 120 &&
+        value === value.toLowerCase() &&
+        value.endsWith('.tsx') &&
+        !value.includes('/') &&
+        !value.includes('\\') &&
+        !value.includes('\0') &&
+        !value.includes('..') &&
+        /^[a-z0-9][a-z0-9.-]*\.tsx$/.test(value));
+};
+exports.isLowercaseElementFileName = isLowercaseElementFileName;
+const isSlug = (value) => {
+    return (typeof value === 'string' &&
+        value.length > 0 &&
+        value.length < 120 &&
+        /^[a-z0-9][a-z0-9/-]*$/.test(value) &&
+        !value.includes('..') &&
+        !value.includes('//'));
+};
+const makeElementFileNameFromSlug = (slug) => {
+    if (!isSlug(slug)) {
+        return null;
+    }
+    const lastSegment = slug.split('/').at(-1);
+    if (!lastSegment) {
+        return null;
+    }
+    const fileName = `${lastSegment}.element.tsx`;
+    return (0, exports.isLowercaseElementFileName)(fileName) ? fileName : null;
+};
+exports.makeElementFileNameFromSlug = makeElementFileNameFromSlug;
+const isDisplayName = (value) => {
+    return typeof value === 'string' && value.length > 0 && value.length < 120;
+};
+const isSourceCode = (value) => {
+    return (typeof value === 'string' &&
+        value.trim().length > 0 &&
+        value.length < 200000);
+};
+const isDimensions = (value) => {
+    if (!isRecord(value)) {
+        return false;
+    }
+    return (typeof value.width === 'number' &&
+        Number.isFinite(value.width) &&
+        value.width > 0 &&
+        typeof value.height === 'number' &&
+        Number.isFinite(value.height) &&
+        value.height > 0);
+};
+const getElementComponentNameFromSourceCode = (sourceCode) => {
+    const componentNames = Array.from(sourceCode.matchAll(/export\s+(?:const|function)\s+([A-Z_$][A-Za-z0-9_$]*)\b/g)).map((match) => match[1]);
+    const uniqueComponentNames = Array.from(new Set(componentNames));
+    if (uniqueComponentNames.length !== 1) {
+        return null;
+    }
+    const [componentName] = uniqueComponentNames;
+    return (0, component_drag_data_1.isComponentIdentifier)(componentName) ? componentName : null;
+};
+exports.getElementComponentNameFromSourceCode = getElementComponentNameFromSourceCode;
+const makeElementDragData = ({ dimensions, displayName, slug, sourceCode, }) => {
+    return {
+        type: 'remotion-element',
+        version: 1,
+        element: {
+            slug,
+            displayName,
+            sourceCode,
+            dimensions,
+        },
+    };
+};
+exports.makeElementDragData = makeElementDragData;
+const parseElementDragData = (value) => {
+    try {
+        const parsed = JSON.parse(value);
+        if (!isRecord(parsed)) {
+            return null;
+        }
+        if (parsed.type !== 'remotion-element' || parsed.version !== 1) {
+            return null;
+        }
+        if (!isRecord(parsed.element)) {
+            return null;
+        }
+        const { dimensions, displayName, slug, sourceCode } = parsed.element;
+        if (!isSlug(slug) ||
+            !isDisplayName(displayName) ||
+            !isSourceCode(sourceCode) ||
+            (0, exports.getElementComponentNameFromSourceCode)(sourceCode) === null ||
+            (0, exports.makeElementFileNameFromSlug)(slug) === null ||
+            !isDimensions(dimensions)) {
+            return null;
+        }
+        return (0, exports.makeElementDragData)({
+            slug,
+            displayName,
+            sourceCode,
+            dimensions,
+        });
+    }
+    catch (_a) {
+        return null;
+    }
+};
+exports.parseElementDragData = parseElementDragData;

package/dist/index.d.ts

@@ -1,15 +1,16 @@
 export { splitAnsi, stripAnsi } from './ansi';
-export { AddEffectKeyframeRequest, AddEffectKeyframeResponse, AddKeyframesRequest, AddKeyframesResponse, AddEffectRequest, AddEffectResponse, AddRenderRequest, AddSequenceKeyframeRequest, AddSequenceKeyframeResponse, ApiRoutes, ApplyCodemodRequest, ApplyCodemodResponse, ApplyVisualControlRequest, ApplyVisualControlResponse, CanUpdateDefaultPropsResponse, CanUpdateSequencePropsRequest, CancelRenderRequest, CancelRenderResponse, CompositionComponentInfoRequest, CompositionComponentInfoResponse, CopyStillToClipboardRequest, DeleteEffectKeyframe, DeleteEffectRequest, DeleteEffectRequestItem, DeleteEffectResponse, DeleteJsxNodeRequest, DeleteJsxNodeRequestItem, DeleteJsxNodeResponse, DeleteKeyframesRequest, DeleteKeyframesResponse, DeleteSequenceKeyframe, DeleteStaticFileRequest, DeleteStaticFileResponse, DownloadRemoteAssetRequest, DownloadRemoteAssetResponse, DuplicateEffectRequest, DuplicateEffectRequestItem, DuplicateEffectResponse, DuplicateJsxNodeRequest, DuplicateJsxNodeResponse, 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, SaveSequencePropEdit, SaveSequencePropsRequest, SaveSequencePropsResponse, SaveSequencePropsResult, SimpleDiff, SubscribeToDefaultPropsRequest, SubscribeToDefaultPropsResponse, SubscribeToFileExistenceRequest, SubscribeToFileExistenceResponse, SubscribeToSequencePropsRequest, SubscribeToSequencePropsResponse, UndoRequest, UndoResponse, UnsubscribeFromDefaultPropsRequest, UnsubscribeFromFileExistenceRequest, UnsubscribeFromSequencePropsRequest, UpdateAvailableRequest, UpdateAvailableResponse, UpdateDefaultPropsRequest, UpdateDefaultPropsResponse, UpdateEffectKeyframeSettingsRequest, UpdateEffectKeyframeSettingsResponse, UpdateSequenceKeyframeSettingsRequest, UpdateSequenceKeyframeSettingsResponse, type KeyframeSettings, type AddEffectKeyframe, type AddSequenceKeyframe, } from './api-requests';
+export { AddEffectKeyframeRequest, AddEffectKeyframeResponse, AddEffectRequest, AddEffectResponse, AddKeyframesRequest, AddKeyframesResponse, AddRenderRequest, AddSequenceKeyframeRequest, AddSequenceKeyframeResponse, ApiRoutes, ApplyCodemodRequest, ApplyCodemodResponse, ApplyVisualControlRequest, ApplyVisualControlResponse, CanUpdateDefaultPropsResponse, CanUpdateSequencePropsRequest, CancelRenderRequest, CancelRenderResponse, CompositionComponentInfoRequest, CompositionComponentInfoResponse, CopyStillToClipboardRequest, DeleteEffectKeyframe, DeleteEffectRequest, DeleteEffectRequestItem, DeleteEffectResponse, DeleteJsxNodeRequest, DeleteJsxNodeRequestItem, DeleteJsxNodeResponse, DeleteKeyframesRequest, DeleteKeyframesResponse, DeleteSequenceKeyframe, DeleteStaticFileRequest, DeleteStaticFileResponse, DownloadRemoteAssetRequest, DownloadRemoteAssetResponse, DuplicateEffectRequest, DuplicateEffectRequestItem, DuplicateEffectResponse, DuplicateJsxNodeRequest, DuplicateJsxNodeResponse, 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, SaveSequencePropEdit, SaveSequencePropsRequest, SaveSequencePropsResponse, SaveSequencePropsResult, SimpleDiff, SubscribeToDefaultPropsRequest, SubscribeToDefaultPropsResponse, SubscribeToFileExistenceRequest, SubscribeToFileExistenceResponse, SubscribeToSequencePropsRequest, SubscribeToSequencePropsResponse, UndoRequest, UndoResponse, UnsubscribeFromDefaultPropsRequest, UnsubscribeFromFileExistenceRequest, UnsubscribeFromSequencePropsRequest, UpdateAvailableRequest, UpdateAvailableResponse, UpdateDefaultPropsRequest, UpdateDefaultPropsResponse, UpdateEffectKeyframeSettingsRequest, UpdateEffectKeyframeSettingsResponse, UpdateSequenceKeyframeSettingsRequest, UpdateSequenceKeyframeSettingsResponse, type AddEffectKeyframe, type AddSequenceKeyframe, type KeyframeSettings, } from './api-requests';
 export { ASSET_DRAG_MIME_TYPE, makeAssetDragData, parseAssetDragData, type AssetDragData, } from './asset-drag-data';
 export type { ApplyVisualControlCodemod, RecastCodemod } from './codemods';
 export { COMPONENT_DRAG_MIME_TYPE, areComponentProps, isComponentIdentifier, isComponentImportPath, makeComponentDragData, parseComponentDragData, type ComponentDimensions, type ComponentDragData, type ComponentProp, } from './component-drag-data';
 export { DEFAULT_BUFFER_STATE_DELAY_IN_MILLISECONDS } from './default-buffer-state-delay-in-milliseconds';
-export { KEYFRAME_EASING_PRESETS, LINEAR_KEYFRAME_EASING, type KeyframeEasing, type KeyframeEasingPreset, } from './keyframe-easing-presets';
+export { getDefinePluginDefinitions } from './define-plugin-definitions';
 export { detectFileType, isImageFileType, type FileDimensions, type FileType, type ImageFileType, } from './detect-file-type';
 export { parseEasingClipboardData, parseEasingClipboardDataResult, type EasingClipboardData, type EasingClipboardDataParseResult, } from './easing-clipboard-data';
+export { EFFECT_CATALOG, getEffectCatalogCategories, getEffectDocumentationLink, getEffectDocumentationPath, getEffectPreviewAlt, getEffectPreviewSource, makeEffectDragDataFromCatalogItem, type EffectCatalogCategory, type EffectCatalogItem, } from './effect-catalog';
 export { parseEffectClipboardData, parseEffectClipboardDataResult, parseEffectPropClipboardData, parseEffectPropClipboardDataResult, type EffectClipboardClamping, type EffectClipboardData, type EffectClipboardDataParseResult, type EffectClipboardEasing, type EffectClipboardExtrapolateType, type EffectClipboardInterpolationFunction, type EffectClipboardKeyframe, type EffectClipboardKeyframedParam, type EffectClipboardParam, type EffectClipboardPasteType, type EffectClipboardSnapshot, type EffectClipboardStaticParam, type EffectPropClipboardData, type EffectPropClipboardDataParseResult, } from './effect-clipboard-data';
 export { EFFECT_DRAG_MIME_TYPE, parseEffectDragData, type EffectDragData, } from './effect-drag-data';
-export { EFFECT_CATALOG, getEffectCatalogCategories, getEffectDocumentationLink, getEffectDocumentationPath, getEffectPreviewAlt, getEffectPreviewSource, makeEffectDragDataFromCatalogItem, type EffectCatalogCategory, type EffectCatalogItem, } from './effect-catalog';
+export { ELEMENT_DRAG_MIME_TYPE, getElementComponentNameFromSourceCode, isLowercaseElementFileName, makeElementDragData, makeElementFileNameFromSlug, parseElementDragData, type ElementDragData, } from './element-drag-data';
 export { EventSourceEvent } from './event-source-event';
 export { formatBytes } from './format-bytes';
 export { getAllSchemaKeys } from './get-all-keys';
@@ -18,20 +19,23 @@ 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 { getKeyframeInterpolationFunction, getKeyframeInterpolationFunctionForSchemaField, isKeyframeInterpolationFunction, isSchemaFieldKeyframable, isInteractivitySchemaFieldKeyframable, keyframeInterpolationFunctions, type KeyframeInterpolationFunction, } from './keyframe-interpolation-function';
-export { DEFAULT_SPRING_EASING, parseSpringEasingConfig, type SpringKeyframeEasing, } from './parse-spring-easing-config';
+export { KEYFRAME_EASING_PRESETS, LINEAR_KEYFRAME_EASING, type KeyframeEasing, type KeyframeEasingPreset, } from './keyframe-easing-presets';
+export { getKeyframeInterpolationFunction, getKeyframeInterpolationFunctionForSchemaField, isInteractivitySchemaFieldKeyframable, isKeyframeInterpolationFunction, isSchemaFieldKeyframable, keyframeInterpolationFunctions, type KeyframeInterpolationFunction, } from './keyframe-interpolation-function';
 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';
+export { DEFAULT_SPRING_EASING, parseSpringEasingConfig, type SpringKeyframeEasing, } from './parse-spring-easing-config';
 export { ProjectInfo } from './project-info';
 export type { RenderDefaults } from './render-defaults';
 export { AggregateRenderProgress, ArtifactProgress, BrowserDownloadState, BrowserProgressLog, BundlingState, CopyingState, DownloadProgress, JobProgressCallback, RenderJob, RenderJobWithCleanup, RenderingProgressInput, RequiredChromiumOptions, StitchingProgressInput, UiOpenGlOptions, } from './render-job';
 export type { CompletedClientRender } from './render-job';
 export { getRequiredPackageForEffectImportPath, getRequiredPackageForInsertableElement, } from './required-package';
-export { SCHEMA_FIELD_ROW_HEIGHT, getEffectFieldsToShow, getFieldsToShow, } from './schema-field-info';
-export type { AnySchemaFieldInfo, DragOverrides, EffectSchemaFieldInfo, PropStatuses, SchemaFieldInfo, SequenceControls, InteractivitySchemaFieldInfo, } from './schema-field-info';
+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 { SFX_DRAG_MIME_TYPE, parseSfxDragData, type SfxDragData, } from './sfx-drag-data';
 export { ScriptLine, SomeStackFrame, StackFrame, SymbolicatedStackFrame, } from './stack-types';
+export { getStudioEntryPoints, type StudioEntryPointPaths, } from './studio-entry-points';
+export { studioHtml, type StudioHtmlOptions } from './studio-html';
 export { EnumPath, stringifyDefaultProps } from './stringify-default-props';
 export type { VisualControlChange } from './codemods';
 export { optimisticAddEffectKeyframe, optimisticAddSequenceKeyframe, } from './optimistic-add-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.installableMap = exports.extraPackages = exports.descriptions = exports.apiDocs = exports.DEFAULT_TIMELINE_TRACKS = exports.parseSpringEasingConfig = exports.DEFAULT_SPRING_EASING = exports.keyframeInterpolationFunctions = exports.isInteractivitySchemaFieldKeyframable = exports.isSchemaFieldKeyframable = exports.isKeyframeInterpolationFunction = exports.getKeyframeInterpolationFunctionForSchemaField = exports.getKeyframeInterpolationFunction = exports.hotMiddlewareOptions = exports.getProjectName = exports.getLocationFromBuildError = exports.getDefaultOutLocation = exports.getAllSchemaKeys = exports.formatBytes = exports.makeEffectDragDataFromCatalogItem = exports.getEffectPreviewSource = exports.getEffectPreviewAlt = exports.getEffectDocumentationPath = exports.getEffectDocumentationLink = exports.getEffectCatalogCategories = exports.EFFECT_CATALOG = exports.parseEffectDragData = exports.EFFECT_DRAG_MIME_TYPE = exports.parseEffectPropClipboardDataResult = exports.parseEffectPropClipboardData = exports.parseEffectClipboardDataResult = exports.parseEffectClipboardData = exports.parseEasingClipboardDataResult = exports.parseEasingClipboardData = exports.isImageFileType = exports.detectFileType = exports.LINEAR_KEYFRAME_EASING = exports.KEYFRAME_EASING_PRESETS = exports.DEFAULT_BUFFER_STATE_DELAY_IN_MILLISECONDS = exports.parseComponentDragData = exports.makeComponentDragData = exports.isComponentImportPath = exports.isComponentIdentifier = exports.areComponentProps = exports.COMPONENT_DRAG_MIME_TYPE = exports.parseAssetDragData = exports.makeAssetDragData = exports.ASSET_DRAG_MIME_TYPE = 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.stringifyDefaultProps = exports.parseSfxDragData = exports.SFX_DRAG_MIME_TYPE = exports.getFieldsToShow = exports.getEffectFieldsToShow = exports.SCHEMA_FIELD_ROW_HEIGHT = exports.getRequiredPackageForInsertableElement = exports.getRequiredPackageForEffectImportPath = exports.packages = void 0;
+exports.keyframeInterpolationFunctions = exports.isSchemaFieldKeyframable = exports.isKeyframeInterpolationFunction = exports.isInteractivitySchemaFieldKeyframable = exports.getKeyframeInterpolationFunctionForSchemaField = exports.getKeyframeInterpolationFunction = exports.LINEAR_KEYFRAME_EASING = exports.KEYFRAME_EASING_PRESETS = exports.hotMiddlewareOptions = exports.getProjectName = exports.getLocationFromBuildError = exports.getDefaultOutLocation = exports.getAllSchemaKeys = exports.formatBytes = exports.parseElementDragData = exports.makeElementFileNameFromSlug = exports.makeElementDragData = exports.isLowercaseElementFileName = exports.getElementComponentNameFromSourceCode = exports.ELEMENT_DRAG_MIME_TYPE = exports.parseEffectDragData = exports.EFFECT_DRAG_MIME_TYPE = exports.parseEffectPropClipboardDataResult = exports.parseEffectPropClipboardData = exports.parseEffectClipboardDataResult = exports.parseEffectClipboardData = exports.makeEffectDragDataFromCatalogItem = exports.getEffectPreviewSource = exports.getEffectPreviewAlt = exports.getEffectDocumentationPath = exports.getEffectDocumentationLink = exports.getEffectCatalogCategories = exports.EFFECT_CATALOG = exports.parseEasingClipboardDataResult = exports.parseEasingClipboardData = exports.isImageFileType = exports.detectFileType = exports.getDefinePluginDefinitions = exports.DEFAULT_BUFFER_STATE_DELAY_IN_MILLISECONDS = exports.parseComponentDragData = exports.makeComponentDragData = exports.isComponentImportPath = exports.isComponentIdentifier = exports.areComponentProps = exports.COMPONENT_DRAG_MIME_TYPE = exports.parseAssetDragData = exports.makeAssetDragData = exports.ASSET_DRAG_MIME_TYPE = 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.stringifyDefaultProps = exports.studioHtml = exports.getStudioEntryPoints = exports.parseSfxDragData = exports.SFX_DRAG_MIME_TYPE = exports.getSchemaFieldGroup = exports.getFieldsToShow = exports.getEffectFieldsToShow = exports.SCHEMA_FIELD_ROW_HEIGHT = exports.SCHEMA_FIELD_GROUPS = exports.getRequiredPackageForInsertableElement = exports.getRequiredPackageForEffectImportPath = exports.parseSpringEasingConfig = exports.DEFAULT_SPRING_EASING = exports.packages = exports.installableMap = exports.extraPackages = exports.descriptions = exports.apiDocs = exports.DEFAULT_TIMELINE_TRACKS = 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; } });
@@ -33,23 +33,14 @@ Object.defineProperty(exports, "makeComponentDragData", { enumerable: true, get:
 Object.defineProperty(exports, "parseComponentDragData", { enumerable: true, get: function () { return component_drag_data_1.parseComponentDragData; } });
 const default_buffer_state_delay_in_milliseconds_1 = require("./default-buffer-state-delay-in-milliseconds");
 Object.defineProperty(exports, "DEFAULT_BUFFER_STATE_DELAY_IN_MILLISECONDS", { enumerable: true, get: function () { return default_buffer_state_delay_in_milliseconds_1.DEFAULT_BUFFER_STATE_DELAY_IN_MILLISECONDS; } });
-const keyframe_easing_presets_1 = require("./keyframe-easing-presets");
-Object.defineProperty(exports, "KEYFRAME_EASING_PRESETS", { enumerable: true, get: function () { return keyframe_easing_presets_1.KEYFRAME_EASING_PRESETS; } });
-Object.defineProperty(exports, "LINEAR_KEYFRAME_EASING", { enumerable: true, get: function () { return keyframe_easing_presets_1.LINEAR_KEYFRAME_EASING; } });
+const define_plugin_definitions_1 = require("./define-plugin-definitions");
+Object.defineProperty(exports, "getDefinePluginDefinitions", { enumerable: true, get: function () { return define_plugin_definitions_1.getDefinePluginDefinitions; } });
 const detect_file_type_1 = require("./detect-file-type");
 Object.defineProperty(exports, "detectFileType", { enumerable: true, get: function () { return detect_file_type_1.detectFileType; } });
 Object.defineProperty(exports, "isImageFileType", { enumerable: true, get: function () { return detect_file_type_1.isImageFileType; } });
 const easing_clipboard_data_1 = require("./easing-clipboard-data");
 Object.defineProperty(exports, "parseEasingClipboardData", { enumerable: true, get: function () { return easing_clipboard_data_1.parseEasingClipboardData; } });
 Object.defineProperty(exports, "parseEasingClipboardDataResult", { enumerable: true, get: function () { return easing_clipboard_data_1.parseEasingClipboardDataResult; } });
-const effect_clipboard_data_1 = require("./effect-clipboard-data");
-Object.defineProperty(exports, "parseEffectClipboardData", { enumerable: true, get: function () { return effect_clipboard_data_1.parseEffectClipboardData; } });
-Object.defineProperty(exports, "parseEffectClipboardDataResult", { enumerable: true, get: function () { return effect_clipboard_data_1.parseEffectClipboardDataResult; } });
-Object.defineProperty(exports, "parseEffectPropClipboardData", { enumerable: true, get: function () { return effect_clipboard_data_1.parseEffectPropClipboardData; } });
-Object.defineProperty(exports, "parseEffectPropClipboardDataResult", { enumerable: true, get: function () { return effect_clipboard_data_1.parseEffectPropClipboardDataResult; } });
-const effect_drag_data_1 = require("./effect-drag-data");
-Object.defineProperty(exports, "EFFECT_DRAG_MIME_TYPE", { enumerable: true, get: function () { return effect_drag_data_1.EFFECT_DRAG_MIME_TYPE; } });
-Object.defineProperty(exports, "parseEffectDragData", { enumerable: true, get: function () { return effect_drag_data_1.parseEffectDragData; } });
 const effect_catalog_1 = require("./effect-catalog");
 Object.defineProperty(exports, "EFFECT_CATALOG", { enumerable: true, get: function () { return effect_catalog_1.EFFECT_CATALOG; } });
 Object.defineProperty(exports, "getEffectCatalogCategories", { enumerable: true, get: function () { return effect_catalog_1.getEffectCatalogCategories; } });
@@ -58,6 +49,21 @@ Object.defineProperty(exports, "getEffectDocumentationPath", { enumerable: true,
 Object.defineProperty(exports, "getEffectPreviewAlt", { enumerable: true, get: function () { return effect_catalog_1.getEffectPreviewAlt; } });
 Object.defineProperty(exports, "getEffectPreviewSource", { enumerable: true, get: function () { return effect_catalog_1.getEffectPreviewSource; } });
 Object.defineProperty(exports, "makeEffectDragDataFromCatalogItem", { enumerable: true, get: function () { return effect_catalog_1.makeEffectDragDataFromCatalogItem; } });
+const effect_clipboard_data_1 = require("./effect-clipboard-data");
+Object.defineProperty(exports, "parseEffectClipboardData", { enumerable: true, get: function () { return effect_clipboard_data_1.parseEffectClipboardData; } });
+Object.defineProperty(exports, "parseEffectClipboardDataResult", { enumerable: true, get: function () { return effect_clipboard_data_1.parseEffectClipboardDataResult; } });
+Object.defineProperty(exports, "parseEffectPropClipboardData", { enumerable: true, get: function () { return effect_clipboard_data_1.parseEffectPropClipboardData; } });
+Object.defineProperty(exports, "parseEffectPropClipboardDataResult", { enumerable: true, get: function () { return effect_clipboard_data_1.parseEffectPropClipboardDataResult; } });
+const effect_drag_data_1 = require("./effect-drag-data");
+Object.defineProperty(exports, "EFFECT_DRAG_MIME_TYPE", { enumerable: true, get: function () { return effect_drag_data_1.EFFECT_DRAG_MIME_TYPE; } });
+Object.defineProperty(exports, "parseEffectDragData", { enumerable: true, get: function () { return effect_drag_data_1.parseEffectDragData; } });
+const element_drag_data_1 = require("./element-drag-data");
+Object.defineProperty(exports, "ELEMENT_DRAG_MIME_TYPE", { enumerable: true, get: function () { return element_drag_data_1.ELEMENT_DRAG_MIME_TYPE; } });
+Object.defineProperty(exports, "getElementComponentNameFromSourceCode", { enumerable: true, get: function () { return element_drag_data_1.getElementComponentNameFromSourceCode; } });
+Object.defineProperty(exports, "isLowercaseElementFileName", { enumerable: true, get: function () { return element_drag_data_1.isLowercaseElementFileName; } });
+Object.defineProperty(exports, "makeElementDragData", { enumerable: true, get: function () { return element_drag_data_1.makeElementDragData; } });
+Object.defineProperty(exports, "makeElementFileNameFromSlug", { enumerable: true, get: function () { return element_drag_data_1.makeElementFileNameFromSlug; } });
+Object.defineProperty(exports, "parseElementDragData", { enumerable: true, get: function () { return element_drag_data_1.parseElementDragData; } });
 const format_bytes_1 = require("./format-bytes");
 Object.defineProperty(exports, "formatBytes", { enumerable: true, get: function () { return format_bytes_1.formatBytes; } });
 const get_all_keys_1 = require("./get-all-keys");
@@ -70,16 +76,16 @@ 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_easing_presets_1 = require("./keyframe-easing-presets");
+Object.defineProperty(exports, "KEYFRAME_EASING_PRESETS", { enumerable: true, get: function () { return keyframe_easing_presets_1.KEYFRAME_EASING_PRESETS; } });
+Object.defineProperty(exports, "LINEAR_KEYFRAME_EASING", { enumerable: true, get: function () { return keyframe_easing_presets_1.LINEAR_KEYFRAME_EASING; } });
 const keyframe_interpolation_function_1 = require("./keyframe-interpolation-function");
 Object.defineProperty(exports, "getKeyframeInterpolationFunction", { enumerable: true, get: function () { return keyframe_interpolation_function_1.getKeyframeInterpolationFunction; } });
 Object.defineProperty(exports, "getKeyframeInterpolationFunctionForSchemaField", { enumerable: true, get: function () { return keyframe_interpolation_function_1.getKeyframeInterpolationFunctionForSchemaField; } });
+Object.defineProperty(exports, "isInteractivitySchemaFieldKeyframable", { enumerable: true, get: function () { return keyframe_interpolation_function_1.isInteractivitySchemaFieldKeyframable; } });
 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, "isInteractivitySchemaFieldKeyframable", { enumerable: true, get: function () { return keyframe_interpolation_function_1.isInteractivitySchemaFieldKeyframable; } });
 Object.defineProperty(exports, "keyframeInterpolationFunctions", { enumerable: true, get: function () { return keyframe_interpolation_function_1.keyframeInterpolationFunctions; } });
-const parse_spring_easing_config_1 = require("./parse-spring-easing-config");
-Object.defineProperty(exports, "DEFAULT_SPRING_EASING", { enumerable: true, get: function () { return parse_spring_easing_config_1.DEFAULT_SPRING_EASING; } });
-Object.defineProperty(exports, "parseSpringEasingConfig", { enumerable: true, get: function () { return parse_spring_easing_config_1.parseSpringEasingConfig; } });
 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");
@@ -88,16 +94,25 @@ Object.defineProperty(exports, "descriptions", { enumerable: true, get: function
 Object.defineProperty(exports, "extraPackages", { enumerable: true, get: function () { return package_info_1.extraPackages; } });
 Object.defineProperty(exports, "installableMap", { enumerable: true, get: function () { return package_info_1.installableMap; } });
 Object.defineProperty(exports, "packages", { enumerable: true, get: function () { return package_info_1.packages; } });
+const parse_spring_easing_config_1 = require("./parse-spring-easing-config");
+Object.defineProperty(exports, "DEFAULT_SPRING_EASING", { enumerable: true, get: function () { return parse_spring_easing_config_1.DEFAULT_SPRING_EASING; } });
+Object.defineProperty(exports, "parseSpringEasingConfig", { enumerable: true, get: function () { return parse_spring_easing_config_1.parseSpringEasingConfig; } });
 const required_package_1 = require("./required-package");
 Object.defineProperty(exports, "getRequiredPackageForEffectImportPath", { enumerable: true, get: function () { return required_package_1.getRequiredPackageForEffectImportPath; } });
 Object.defineProperty(exports, "getRequiredPackageForInsertableElement", { enumerable: true, get: function () { return required_package_1.getRequiredPackageForInsertableElement; } });
 const schema_field_info_1 = require("./schema-field-info");
+Object.defineProperty(exports, "SCHEMA_FIELD_GROUPS", { enumerable: true, get: function () { return schema_field_info_1.SCHEMA_FIELD_GROUPS; } });
 Object.defineProperty(exports, "SCHEMA_FIELD_ROW_HEIGHT", { enumerable: true, get: function () { return schema_field_info_1.SCHEMA_FIELD_ROW_HEIGHT; } });
 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 sfx_drag_data_1 = require("./sfx-drag-data");
 Object.defineProperty(exports, "SFX_DRAG_MIME_TYPE", { enumerable: true, get: function () { return sfx_drag_data_1.SFX_DRAG_MIME_TYPE; } });
 Object.defineProperty(exports, "parseSfxDragData", { enumerable: true, get: function () { return sfx_drag_data_1.parseSfxDragData; } });
+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 stringify_default_props_1 = require("./stringify-default-props");
 Object.defineProperty(exports, "stringifyDefaultProps", { enumerable: true, get: function () { return stringify_default_props_1.stringifyDefaultProps; } });
 const optimistic_add_keyframe_1 = require("./optimistic-add-keyframe");

package/dist/keyframe-easing-presets.d.ts

@@ -1,7 +1,7 @@
 import type { CanUpdateSequencePropStatusEasing } from 'remotion';
 export type KeyframeEasing = CanUpdateSequencePropStatusEasing;
 export type KeyframeEasingPreset = {
-    readonly id: 'ease-in' | 'ease-out' | 'ease-in-out' | 'spring' | 'bouncy-spring';
+    readonly id: 'ease-in' | 'ease-out' | 'ease-in-out' | 'spring' | 'bouncy-spring' | 'tail-spring';
     readonly label: string;
     readonly easing: KeyframeEasing;
 };

package/dist/keyframe-easing-presets.js

@@ -18,12 +18,27 @@ exports.KEYFRAME_EASING_PRESETS = [
         label: 'Ease in-out',
         easing: { type: 'bezier', x1: 0.42, y1: 0, x2: 0.58, y2: 1 },
     },
+    {
+        id: 'tail-spring',
+        label: 'Tail spring',
+        easing: {
+            type: 'spring',
+            allowTail: true,
+            damping: 200,
+            durationRestThreshold: 0.02,
+            mass: 1,
+            overshootClamping: false,
+            stiffness: 100,
+        },
+    },
     {
         id: 'spring',
         label: 'Spring',
         easing: {
             type: 'spring',
+            allowTail: true,
             damping: 10,
+            durationRestThreshold: 0.02,
             mass: 1,
             overshootClamping: false,
             stiffness: 100,
@@ -34,7 +49,9 @@ exports.KEYFRAME_EASING_PRESETS = [
         label: 'Bouncy spring',
         easing: {
             type: 'spring',
+            allowTail: true,
             damping: 5,
+            durationRestThreshold: 0.02,
             mass: 1,
             overshootClamping: false,
             stiffness: 120,

package/dist/optimistic-add-keyframe.js

@@ -3,6 +3,13 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.optimisticAddEffectKeyframe = exports.optimisticAddSequenceKeyframe = void 0;
 const keyframe_easing_presets_1 = require("./keyframe-easing-presets");
 const keyframe_interpolation_function_1 = require("./keyframe-interpolation-function");
+const getEasingIndexToDuplicate = ({ insertedKeyframeIndex, easingLength, keyframeCount, }) => {
+    const isSplittingExistingSegment = insertedKeyframeIndex > 0 && insertedKeyframeIndex < keyframeCount - 1;
+    if (!isSplittingExistingSegment || easingLength === 0) {
+        return null;
+    }
+    return Math.min(insertedKeyframeIndex - 1, easingLength - 1);
+};
 const addKeyframeToPropStatus = ({ status, fieldKey, frame, value, schema, }) => {
     var _a;
     if (status.status === 'keyframed') {
@@ -16,6 +23,16 @@ const addKeyframeToPropStatus = ({ status, fieldKey, frame, value, schema, }) =>
         }
         const keyframes = [...status.keyframes, { frame, value }].sort((first, second) => first.frame - second.frame);
         const easing = [...status.easing];
+        const insertedKeyframeIndex = keyframes.findIndex((keyframe) => keyframe.frame === frame);
+        const easingIndexToDuplicate = getEasingIndexToDuplicate({
+            insertedKeyframeIndex,
+            easingLength: easing.length,
+            keyframeCount: keyframes.length,
+        });
+        const easingToDuplicate = easingIndexToDuplicate === null
+            ? keyframe_easing_presets_1.LINEAR_KEYFRAME_EASING
+            : easing[easingIndexToDuplicate];
+        easing.splice(insertedKeyframeIndex, 0, easingToDuplicate);
         while (easing.length < keyframes.length - 1) {
             easing.push(keyframe_easing_presets_1.LINEAR_KEYFRAME_EASING);
         }

package/dist/optimistic-delete-keyframe.js

@@ -1,6 +1,15 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.optimisticDeleteEffectKeyframes = exports.optimisticDeleteEffectKeyframe = exports.optimisticDeleteSequenceKeyframes = exports.optimisticDeleteSequenceKeyframe = void 0;
+const getEasingIndexToRemove = ({ removedKeyframeIndex, keyframeCountBeforeRemoval, }) => {
+    if (removedKeyframeIndex === 0) {
+        return 0;
+    }
+    if (removedKeyframeIndex === keyframeCountBeforeRemoval - 1) {
+        return removedKeyframeIndex - 1;
+    }
+    return removedKeyframeIndex;
+};
 const removeKeyframeFromPropStatus = ({ status, frame, }) => {
     if (status.status !== 'keyframed') {
         return status;
@@ -21,7 +30,10 @@ const removeKeyframeFromPropStatus = ({ status, frame, }) => {
     // keyframe so the invariant keeps holding until the server responds.
     const easing = [...status.easing];
     if (easing.length > 0) {
-        const easingIndexToRemove = index === 0 ? 0 : index - 1;
+        const easingIndexToRemove = getEasingIndexToRemove({
+            removedKeyframeIndex: index,
+            keyframeCountBeforeRemoval: status.keyframes.length,
+        });
         easing.splice(easingIndexToRemove, 1);
     }
     return {

package/dist/optimistic-update-for-prop-statuses.d.ts

@@ -1,7 +1,8 @@
 import { type CanUpdateSequencePropsResponse, type InteractivitySchema } from 'remotion';
-export declare const optimisticUpdateForPropStatuses: ({ previous, fieldKey, value, schema, }: {
+export declare const optimisticUpdateForPropStatuses: ({ previous, fieldKey, value, defaultValue, schema, }: {
     previous: CanUpdateSequencePropsResponse;
     fieldKey: string;
     value: unknown;
+    defaultValue?: string | null | undefined;
     schema: InteractivitySchema;
 }) => CanUpdateSequencePropsResponse;

package/dist/optimistic-update-for-prop-statuses.js

@@ -2,14 +2,18 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.optimisticUpdateForPropStatuses = void 0;
 const no_react_1 = require("remotion/no-react");
-const optimisticUpdateForPropStatuses = ({ previous, fieldKey, value, schema, }) => {
+const optimisticUpdateForPropStatuses = ({ previous, fieldKey, value, defaultValue, schema, }) => {
     var _a;
     if (!previous.canUpdate) {
         return previous;
     }
+    const serializedValue = JSON.stringify(value);
+    const optimisticValue = defaultValue !== null && defaultValue === serializedValue
+        ? undefined
+        : value;
     const props = {
         ...previous.props,
-        [fieldKey]: { status: 'static', codeValue: value },
+        [fieldKey]: { status: 'static', codeValue: optimisticValue },
     };
     if (((_a = schema[fieldKey]) === null || _a === void 0 ? void 0 : _a.type) === 'enum') {
         const propsToDelete = no_react_1.NoReactInternals.findPropsToDelete({

package/dist/package-info.d.ts

@@ -1,4 +1,4 @@
-export declare const packages: readonly ["svg-3d-engine", "animation-utils", "animated-emoji", "astro-example", "babel-loader", "bugs", "brand", "bundler", "canvas-capture", "cli", "cloudrun", "codex-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-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", "light-leaks", "starburst", "vercel", "sfx", "effects"];
+export declare const packages: readonly ["svg-3d-engine", "animation-utils", "animated-emoji", "astro-example", "babel-loader", "bugs", "brand", "bundler", "browser-studio", "canvas-capture", "cli", "cloudrun", "codex-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-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", "light-leaks", "starburst", "vercel", "sfx", "effects"];
 export type Pkgs = (typeof packages)[number];
 export type ExtraPackage = {
     name: string;

package/dist/package-info.js

@@ -10,6 +10,7 @@ exports.packages = [
     'bugs',
     'brand',
     'bundler',
+    'browser-studio',
     'canvas-capture',
     'cli',
     'cloudrun',
@@ -129,6 +130,7 @@ exports.descriptions = {
     core: 'Make videos programmatically',
     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-server': 'Run a Remotion Studio with a server backend',
     'install-whisper-cpp': 'Helpers for installing and using Whisper.cpp',
@@ -226,6 +228,7 @@ exports.installableMap = {
     bugs: false,
     brand: false,
     bundler: false,
+    'browser-studio': false,
     'canvas-capture': false,
     cli: false,
     cloudrun: true,
@@ -324,6 +327,7 @@ exports.apiDocs = {
     core: 'https://www.remotion.dev/docs/remotion',
     lambda: 'https://www.remotion.dev/docs/lambda',
     bundler: 'https://www.remotion.dev/docs/bundler',
+    'browser-studio': null,
     'canvas-capture': null,
     'lambda-client': null,
     'serverless-client': null,

package/dist/parse-spring-easing-config.d.ts

@@ -1,6 +1,8 @@
 export type SpringKeyframeEasing = {
     readonly type: 'spring';
+    allowTail: boolean | null;
     damping: number;
+    durationRestThreshold: number | null;
     mass: number;
     overshootClamping: boolean;
     stiffness: number;

package/dist/parse-spring-easing-config.js

@@ -3,7 +3,9 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.parseSpringEasingConfig = exports.DEFAULT_SPRING_EASING = void 0;
 exports.DEFAULT_SPRING_EASING = {
     type: 'spring',
+    allowTail: null,
     damping: 10,
+    durationRestThreshold: null,
     mass: 1,
     overshootClamping: false,
     stiffness: 100,
@@ -72,7 +74,10 @@ const parseSpringEasingConfig = (node) => {
         if (!key || !isAstNode(prop.value)) {
             return null;
         }
-        if (key === 'damping' || key === 'mass' || key === 'stiffness') {
+        if (key === 'damping' ||
+            key === 'mass' ||
+            key === 'stiffness' ||
+            key === 'durationRestThreshold') {
             const numericValue = getNumericValue(prop.value);
             if (numericValue === null ||
                 !Number.isFinite(numericValue) ||
@@ -82,12 +87,12 @@ const parseSpringEasingConfig = (node) => {
             spring[key] = numericValue;
             continue;
         }
-        if (key === 'overshootClamping') {
+        if (key === 'overshootClamping' || key === 'allowTail') {
             const booleanValue = getBooleanValue(prop.value);
             if (booleanValue === null) {
                 return null;
             }
-            spring.overshootClamping = booleanValue;
+            spring[key] = booleanValue;
             continue;
         }
         return null;

package/dist/schema-field-info.d.ts

@@ -6,6 +6,7 @@ export type SchemaFieldInfo = {
     typeName: SupportedSchemaType;
     rowHeight: number;
     fieldSchema: VisibleFieldSchema;
+    group: SchemaFieldGroup;
 };
 export type InteractivitySchemaFieldInfo = SchemaFieldInfo & {
     readonly kind: 'sequence-field';
@@ -17,6 +18,22 @@ export type EffectSchemaFieldInfo = SchemaFieldInfo & {
 };
 export type AnySchemaFieldInfo = InteractivitySchemaFieldInfo | EffectSchemaFieldInfo;
 export declare const SCHEMA_FIELD_ROW_HEIGHT = 22;
+export type SchemaFieldGroup = 'controls' | 'transforms' | 'text';
+export type SchemaFieldGroupInfo = {
+    readonly id: SchemaFieldGroup;
+    readonly label: string;
+};
+export declare const SCHEMA_FIELD_GROUPS: readonly [{
+    readonly id: "controls";
+    readonly label: "Controls";
+}, {
+    readonly id: "transforms";
+    readonly label: "Transform";
+}, {
+    readonly id: "text";
+    readonly label: "Text";
+}];
+export declare const getSchemaFieldGroup: (key: string) => SchemaFieldGroup;
 declare const SUPPORTED_SCHEMA_TYPES: readonly ["number", "boolean", "rotation-css", "rotation-degrees", "translate", "transform-origin", "scale", "uv-coordinate", "color", "array", "enum", "hidden"];
 type SupportedSchemaType = (typeof SUPPORTED_SCHEMA_TYPES)[number];
 export declare const getFieldsToShow: ({ getDragOverrides, propStatuses, nodePath, schema, currentRuntimeValueDotNotation, }: {

package/dist/schema-field-info.js

@@ -1,9 +1,54 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getEffectFieldsToShow = exports.getFieldsToShow = exports.SCHEMA_FIELD_ROW_HEIGHT = void 0;
+exports.getEffectFieldsToShow = exports.getFieldsToShow = exports.getSchemaFieldGroup = exports.SCHEMA_FIELD_GROUPS = exports.SCHEMA_FIELD_ROW_HEIGHT = void 0;
 const remotion_1 = require("remotion");
 const no_react_1 = require("remotion/no-react");
 exports.SCHEMA_FIELD_ROW_HEIGHT = 22;
+exports.SCHEMA_FIELD_GROUPS = [
+    { id: 'controls', label: 'Controls' },
+    { id: 'transforms', label: 'Transform' },
+    { id: 'text', label: 'Text' },
+];
+const schemaFieldGroupOrder = exports.SCHEMA_FIELD_GROUPS.reduce((acc, group, index) => {
+    acc[group.id] = index;
+    return acc;
+}, {});
+const TRANSFORM_FIELD_KEYS = new Set([
+    'style.transformOrigin',
+    'style.translate',
+    'style.scale',
+    'style.rotate',
+    'style.opacity',
+]);
+const TEXT_FIELD_KEYS = new Set([
+    'style.color',
+    'style.fontSize',
+    'style.lineHeight',
+    'style.fontWeight',
+    'style.fontStyle',
+    'style.letterSpacing',
+    'style.textAlign',
+]);
+const getSchemaFieldGroup = (key) => {
+    if (TRANSFORM_FIELD_KEYS.has(key)) {
+        return 'transforms';
+    }
+    if (TEXT_FIELD_KEYS.has(key)) {
+        return 'text';
+    }
+    return 'controls';
+};
+exports.getSchemaFieldGroup = getSchemaFieldGroup;
+const sortSchemaFields = (fields) => {
+    return fields
+        .map((field, index) => ({ field, index }))
+        .sort((a, b) => {
+        const groupDiff = schemaFieldGroupOrder[a.field.group] -
+            schemaFieldGroupOrder[b.field.group];
+        return groupDiff === 0 ? a.index - b.index : groupDiff;
+    })
+        .map(({ field }) => field);
+};
 const SUPPORTED_SCHEMA_TYPES = [
     'number',
     'boolean',
@@ -60,7 +105,7 @@ const getFieldsToShow = ({ getDragOverrides, propStatuses, nodePath, schema, cur
         frame: null,
     });
     const activeSchema = remotion_1.Internals.flattenActiveSchema(schema, (key) => valuesDotNotation[key]);
-    return Object.entries(activeSchema)
+    const fields = Object.entries(activeSchema)
         .map(([key, fieldSchema]) => {
         const typeName = fieldSchema.type;
         if (SUPPORTED_SCHEMA_TYPES.indexOf(typeName) === -1) {
@@ -87,9 +132,11 @@ const getFieldsToShow = ({ getDragOverrides, propStatuses, nodePath, schema, cur
                 value: valuesDotNotation[key],
             }),
             fieldSchema,
+            group: (0, exports.getSchemaFieldGroup)(key),
         };
     })
         .filter(no_react_1.NoReactInternals.truthy);
+    return sortSchemaFields(fields);
 };
 exports.getFieldsToShow = getFieldsToShow;
 const getEffectFieldsToShow = ({ effect, effectIndex, nodePath, propStatuses, getEffectDragOverrides, }) => {
@@ -104,7 +151,7 @@ const getEffectFieldsToShow = ({ effect, effectIndex, nodePath, propStatuses, ge
     const activeSchema = remotion_1.Internals.flattenActiveSchema(effect.schema, (key) => {
         return getEffectFieldValue({ key, dragOverrides, effectStatus });
     });
-    return Object.entries(activeSchema)
+    const fields = Object.entries(activeSchema)
         .map(([key, fieldSchema]) => {
         const typeName = fieldSchema.type;
         if (typeName === 'hidden') {
@@ -133,8 +180,10 @@ const getEffectFieldsToShow = ({ effect, effectIndex, nodePath, propStatuses, ge
             fieldSchema,
             effectSchema: effect.schema,
             effectIndex,
+            group: (0, exports.getSchemaFieldGroup)(key),
         };
     })
         .filter(no_react_1.NoReactInternals.truthy);
+    return sortSchemaFields(fields);
 };
 exports.getEffectFieldsToShow = getEffectFieldsToShow;

package/dist/studio-entry-points.d.ts

@@ -0,0 +1,9 @@
+export type StudioEntryPointPaths = {
+    fastRefreshRuntime: string | null;
+    environmentSetup: string;
+    sequenceStackTraces: string | null;
+    userDefinedComponent: string;
+    reactShim: string;
+    studioRenderEntry: string;
+};
+export declare const getStudioEntryPoints: ({ fastRefreshRuntime, environmentSetup, sequenceStackTraces, userDefinedComponent, reactShim, studioRenderEntry, }: StudioEntryPointPaths) => [string, ...string[]];

package/dist/studio-entry-points.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getStudioEntryPoints = void 0;
+const getStudioEntryPoints = ({ fastRefreshRuntime, environmentSetup, sequenceStackTraces, userDefinedComponent, reactShim, studioRenderEntry, }) => [
+    // Fast Refresh must come first because setup-environment imports ReactDOM.
+    // If ReactDOM is imported before Fast Refresh, Fast Refresh does not work.
+    fastRefreshRuntime,
+    environmentSetup,
+    sequenceStackTraces,
+    userDefinedComponent,
+    reactShim,
+    studioRenderEntry,
+].filter(Boolean);
+exports.getStudioEntryPoints = getStudioEntryPoints;

package/dist/studio-html.d.ts

@@ -0,0 +1,32 @@
+import type { LogLevel, StaticFile } from 'remotion';
+import type { GitSource } from './git-source';
+import type { PackageManager } from './package-manager';
+import type { RenderDefaults } from './render-defaults';
+export type StudioHtmlOptions = {
+    staticHash: string;
+    publicPath: string;
+    editorName: string | null;
+    inputProps: object | null;
+    envVariables?: Record<string, string>;
+    remotionRoot: string;
+    studioServerCommand: string | null;
+    renderQueue: unknown | null;
+    completedClientRenders?: unknown | null;
+    numberOfAudioTags: number;
+    audioLatencyHint: AudioContextLatencyCategory;
+    sampleRate: number | null;
+    publicFiles: StaticFile[];
+    publicFolderExists: string | null;
+    includeFavicon: boolean;
+    title: string;
+    renderDefaults: RenderDefaults | undefined;
+    gitSource: GitSource | null;
+    projectName: string;
+    installedDependencies: string[] | null;
+    packageManager: PackageManager | 'unknown';
+    logLevel: LogLevel;
+    mode: 'dev' | 'bundle';
+    bundleScriptUrl?: string;
+    readOnlyStudio?: boolean;
+};
+export declare const studioHtml: ({ publicPath, editorName, inputProps, envVariables, staticHash, remotionRoot, studioServerCommand, renderQueue, completedClientRenders, numberOfAudioTags, publicFiles, includeFavicon, title, renderDefaults, publicFolderExists, gitSource, projectName, installedDependencies, packageManager, audioLatencyHint, sampleRate, logLevel, mode, bundleScriptUrl, readOnlyStudio, }: StudioHtmlOptions) => string;

package/dist/studio-html.js

@@ -0,0 +1,79 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.studioHtml = void 0;
+const remotion_1 = require("remotion");
+const studioHtml = ({ publicPath, editorName, inputProps, envVariables, staticHash, remotionRoot, studioServerCommand, renderQueue, completedClientRenders, numberOfAudioTags, publicFiles, includeFavicon, title, renderDefaults, publicFolderExists, gitSource, projectName, installedDependencies, packageManager, audioLatencyHint, sampleRate, logLevel, mode, bundleScriptUrl, readOnlyStudio, }) => {
+    const scriptUrl = bundleScriptUrl !== null && bundleScriptUrl !== void 0 ? bundleScriptUrl : `${publicPath}bundle.js`;
+    return `
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<meta charset="UTF-8" />
+		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+		${includeFavicon
+        ? `<link id="__remotion_favicon" rel="icon" type="image/png" href="${publicPath}favicon.ico" />`
+        : ''}
+		<title>${title}</title>
+	</head>
+	<body>
+		<script>window.remotion_numberOfAudioTags = ${numberOfAudioTags};</script>
+		<script>window.remotion_audioLatencyHint = "${audioLatencyHint}";</script>
+		<script>window.remotion_sampleRate = ${sampleRate};</script>
+		<script>window.remotion_previewSampleRate = ${sampleRate};</script>
+		${mode === 'dev' ? `<script>window.remotion_logLevel = "${logLevel}";</script>` : ''}
+		<script>window.remotion_staticBase = "${staticHash}";</script>
+		${editorName
+        ? `<script>window.remotion_editorName = "${editorName}";</script>`
+        : '<script>window.remotion_editorName = null;</script>'}
+		<script>window.remotion_projectName = ${JSON.stringify(projectName)};</script>
+		<script>window.remotion_publicPath = ${JSON.stringify(publicPath)};</script>
+		<script>window.remotion_audioEnabled = true;</script>
+		<script>window.remotion_videoEnabled = true;</script>
+		<script>window.remotion_renderDefaults = ${JSON.stringify(renderDefaults)};</script>
+		<script>window.remotion_cwd = ${JSON.stringify(remotionRoot)};</script>
+		<script>window.remotion_studioServerCommand = ${studioServerCommand ? JSON.stringify(studioServerCommand) : 'null'};</script>
+		${inputProps
+        ? `<script>window.remotion_inputProps = ${JSON.stringify(JSON.stringify(inputProps))};</script>`
+        : ''}
+		${renderQueue
+        ? `<script>window.remotion_initialRenderQueue = ${JSON.stringify(renderQueue)};</script>`
+        : ''}
+		${completedClientRenders
+        ? `<script>window.remotion_initialClientRenders = ${JSON.stringify(completedClientRenders)};</script>`
+        : ''}
+		${envVariables
+        ? `<script>window.process = {env: ${JSON.stringify(envVariables)}};</script>`
+        : ''}
+		${gitSource
+        ? `<script>window.remotion_gitSource = ${JSON.stringify(gitSource)};</script>`
+        : ''}
+		${mode === 'dev'
+        ? `
+		<script>window.remotion_isStudio = true;</script>
+		<script>window.remotion_isReadOnlyStudio = ${readOnlyStudio ? 'true' : 'false'};</script>`.trimStart()
+        : ''}
+		<script>window.remotion_staticFiles = ${JSON.stringify(publicFiles)}</script>
+		<script>window.remotion_installedPackages = ${JSON.stringify(installedDependencies)}</script>
+		<script>window.remotion_packageManager = ${JSON.stringify(packageManager)}</script>
+		<script>window.remotion_publicFolderExists = ${JSON.stringify(publicFolderExists)};</script>
+		<script>
+				window.siteVersion = '11';
+				window.remotion_version = '${remotion_1.VERSION}';
+		</script>
+		
+		<div id="video-container"></div>
+		<div id="${remotion_1.Internals.REMOTION_STUDIO_CONTAINER_ELEMENT}"></div>
+		<div id="remotion-error-overlay"></div>
+		<div id="server-disconnected-overlay"></div>
+		<div id="menuportal-0"></div>
+		<div id="menuportal-1"></div>
+		<div id="menuportal-2"></div>
+		<div id="menuportal-3"></div>
+		<div id="menuportal-4"></div>
+		<div id="menuportal-5"></div>
+		<script src="${scriptUrl}"></script>
+	</body>
+</html>
+`.trim();
+};
+exports.studioHtml = studioHtml;

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.482",
+	"version": "4.0.484",
 	"description": "Internal package for shared objects between the Studio backend and frontend",
 	"main": "dist",
 	"scripts": {
@@ -20,11 +20,11 @@
 		"url": "https://github.com/remotion-dev/remotion/issues"
 	},
 	"dependencies": {
-		"remotion": "4.0.482"
+		"remotion": "4.0.484"
 	},
 	"devDependencies": {
-		"@remotion/renderer": "4.0.482",
-		"@remotion/eslint-config-internal": "4.0.482",
+		"@remotion/renderer": "4.0.484",
+		"@remotion/eslint-config-internal": "4.0.484",
 		"eslint": "9.19.0",
 		"@typescript/native-preview": "7.0.0-dev.20260217.1"
 	},
@@ -33,6 +33,18 @@
 	},
 	"exports": {
 		".": "./dist/index.js",
+		"./define-plugin-definitions": {
+			"types": "./dist/define-plugin-definitions.d.ts",
+			"default": "./dist/define-plugin-definitions.js"
+		},
+		"./studio-entry-points": {
+			"types": "./dist/studio-entry-points.d.ts",
+			"default": "./dist/studio-entry-points.js"
+		},
+		"./studio-html": {
+			"types": "./dist/studio-html.d.ts",
+			"default": "./dist/studio-html.js"
+		},
 		"./package.json": "./package.json"
 	}
 }