@remotion/studio-shared 4.0.482 → 4.0.483

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/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

@@ -195,6 +195,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,15 @@
 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 { 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,18 +18,19 @@ 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 { EnumPath, stringifyDefaultProps } from './stringify-default-props';

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.DEFAULT_TIMELINE_TRACKS = 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.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.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 = 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,12 @@ 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 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 +47,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 +74,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,13 +92,18 @@ 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; } });

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/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/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.483",
 	"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.483"
 	},
 	"devDependencies": {
-		"@remotion/renderer": "4.0.482",
-		"@remotion/eslint-config-internal": "4.0.482",
+		"@remotion/renderer": "4.0.483",
+		"@remotion/eslint-config-internal": "4.0.483",
 		"eslint": "9.19.0",
 		"@typescript/native-preview": "7.0.0-dev.20260217.1"
 	},