@remotion/studio-shared 4.0.496 → 4.0.497

package/dist/api-requests.d.ts

@@ -252,10 +252,11 @@ export type SaveSequencePropEdit = {
 };
 export type SaveSequencePropsRequest = {
     edits: SaveSequencePropEdit[];
-    movedKeyframes?: {
+    addedKeyframes: AddSequenceKeyframe[] | null;
+    movedKeyframes: {
         sequenceKeyframes: MoveSequenceKeyframe[];
         effectKeyframes: MoveEffectKeyframe[];
-    };
+    } | null;
     clientId: string;
     undoLabel: string;
     redoLabel: string;
@@ -551,6 +552,7 @@ export type InsertableCompositionElement = {
         width: number;
         height: number;
     } | null;
+    durationInFrames: number | null;
     position: InsertableCompositionElementPosition | null;
 } | {
     type: 'svg';
@@ -574,6 +576,7 @@ export type InsertJsxElementRequest = {
     compositionFile: string;
     compositionId: string;
     element: InsertableCompositionElement;
+    from: number | null;
 };
 export type InsertJsxElementResponse = {
     success: true;
@@ -596,6 +599,7 @@ export type InsertElementRequest = {
     compositionFile: string;
     compositionId: string;
     element: ElementDragData['element'];
+    from: number | null;
     position: InsertableCompositionElementPosition | null;
 };
 export type InsertElementResponse = {

package/dist/keyframe-clipboard-data.d.ts

@@ -20,11 +20,19 @@ type KeyframeClipboardFieldTypeSupport = typeof KEYFRAME_CLIPBOARD_FIELD_TYPE_SU
 export type KeyframeClipboardFieldType = {
     [FieldType in keyof KeyframeClipboardFieldTypeSupport]: KeyframeClipboardFieldTypeSupport[FieldType] extends true ? FieldType : never;
 }[keyof KeyframeClipboardFieldTypeSupport];
+export type KeyframeClipboardField = {
+    readonly type: 'sequence';
+    readonly fieldKey: string;
+} | {
+    readonly type: 'effect';
+    readonly fieldKey: string;
+};
 export type KeyframeClipboardData = {
     readonly type: 'keyframe';
     readonly version: 1;
     readonly remotionClipboard: 'keyframe';
     readonly fieldType: KeyframeClipboardFieldType | null;
+    readonly field: KeyframeClipboardField | null;
     readonly keyframes: readonly {
         readonly frameOffset: number;
         readonly value: unknown;

package/dist/keyframe-clipboard-data.js

@@ -50,6 +50,11 @@ const areValidKeyframes = (value) => {
     }
     return ((_a = value[0]) === null || _a === void 0 ? void 0 : _a.frameOffset) === 0;
 };
+const isKeyframeClipboardField = (value) => {
+    return (isRecord(value) &&
+        (value.type === 'sequence' || value.type === 'effect') &&
+        typeof value.fieldKey === 'string');
+};
 const parseEasings = ({ value, keyframeCount, }) => {
     if (Array.isArray(value) &&
         value.length === Math.max(0, keyframeCount - 1) &&
@@ -76,6 +81,7 @@ const parseKeyframeClipboardDataResult = (value) => {
         if (parsed.type !== 'keyframe' ||
             !areValidKeyframes(parsed.keyframes) ||
             easing === null ||
+            (parsed.field !== null && !isKeyframeClipboardField(parsed.field)) ||
             (parsed.fieldType !== null &&
                 !(0, exports.isKeyframeClipboardFieldType)(parsed.fieldType))) {
             return { status: 'invalid' };
@@ -87,6 +93,7 @@ const parseKeyframeClipboardDataResult = (value) => {
                 version: 1,
                 remotionClipboard: 'keyframe',
                 fieldType: parsed.fieldType,
+                field: parsed.field,
                 keyframes: parsed.keyframes,
                 easing,
             },

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

@@ -18,7 +18,7 @@ export type EffectSchemaFieldInfo = SchemaFieldInfo & {
 };
 export type AnySchemaFieldInfo = InteractivitySchemaFieldInfo | EffectSchemaFieldInfo;
 export declare const SCHEMA_FIELD_ROW_HEIGHT = 22;
-export type SchemaFieldGroup = 'source' | 'controls' | 'transforms' | 'text';
+export type SchemaFieldGroup = 'source' | 'controls' | 'transforms' | 'background' | 'border' | 'text';
 export type SchemaFieldGroupInfo = {
     readonly id: SchemaFieldGroup;
     readonly label: string;
@@ -35,6 +35,12 @@ export declare const SCHEMA_FIELD_GROUPS: readonly [{
 }, {
     readonly id: "text";
     readonly label: "Text";
+}, {
+    readonly id: "background";
+    readonly label: "Background";
+}, {
+    readonly id: "border";
+    readonly label: "Border";
 }];
 export declare const getSchemaFieldGroup: (key: string) => SchemaFieldGroup;
 declare const TIMELINE_SCHEMA_FIELD_TYPE_SUPPORT: {

package/dist/schema-field-info.js

@@ -9,6 +9,8 @@ exports.SCHEMA_FIELD_GROUPS = [
     { id: 'controls', label: 'Controls' },
     { id: 'transforms', label: 'Transform' },
     { id: 'text', label: 'Text' },
+    { id: 'background', label: 'Background' },
+    { id: 'border', label: 'Border' },
 ];
 const schemaFieldGroupOrder = exports.SCHEMA_FIELD_GROUPS.reduce((acc, group, index) => {
     acc[group.id] = index;
@@ -21,6 +23,12 @@ const TRANSFORM_FIELD_KEYS = new Set([
     'style.rotate',
     'style.opacity',
 ]);
+const BORDER_FIELD_KEYS = new Set([
+    'style.borderWidth',
+    'style.borderStyle',
+    'style.borderColor',
+]);
+const BACKGROUND_FIELD_KEYS = new Set(['style.backgroundColor']);
 const TEXT_FIELD_KEYS = new Set([
     'children',
     'style.color',
@@ -39,6 +47,12 @@ const getSchemaFieldGroup = (key) => {
     if (TRANSFORM_FIELD_KEYS.has(key)) {
         return 'transforms';
     }
+    if (BORDER_FIELD_KEYS.has(key)) {
+        return 'border';
+    }
+    if (BACKGROUND_FIELD_KEYS.has(key)) {
+        return 'background';
+    }
     if (TEXT_FIELD_KEYS.has(key)) {
         return 'text';
     }

package/dist/studio-html.js

@@ -4,6 +4,16 @@ 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, fileSystemPlatform, gitSource, projectName, installedDependencies, packageManager, audioLatencyHint, sampleRate, logLevel, mode, bundleScriptUrl, readOnlyStudio, studioRuntimeConfig, }) => {
     const scriptUrl = bundleScriptUrl !== null && bundleScriptUrl !== void 0 ? bundleScriptUrl : `${publicPath}bundle.js`;
+    const isRelativeBundle = mode === 'bundle' && publicPath === './';
+    const staticBaseValue = isRelativeBundle
+        ? `new URL(${JSON.stringify(staticHash)}, window.location.href).pathname`
+        : JSON.stringify(staticHash);
+    const staticFilesValue = isRelativeBundle
+        ? `${JSON.stringify(publicFiles)}.map((file) => ({...file, src: new URL(file.src, window.location.href).pathname}))`
+        : JSON.stringify(publicFiles);
+    const publicFolderExistsValue = isRelativeBundle && publicFolderExists
+        ? `new URL(${JSON.stringify(publicFolderExists)}, window.location.href).pathname`
+        : JSON.stringify(publicFolderExists);
     return `
 <!DOCTYPE html>
 <html lang="en">
@@ -21,7 +31,7 @@ const studioHtml = ({ publicPath, editorName, inputProps, envVariables, staticHa
 		<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>
+		<script>window.remotion_staticBase = ${staticBaseValue};</script>
 		${editorName
         ? `<script>window.remotion_editorName = "${editorName}";</script>`
         : '<script>window.remotion_editorName = null;</script>'}
@@ -54,11 +64,16 @@ const studioHtml = ({ publicPath, editorName, inputProps, envVariables, staticHa
 		<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_staticFiles = ${staticFilesValue}</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.remotion_publicFolderExists = ${publicFolderExistsValue};</script>
 		<script>
+				// Increment this value when the generated bundle format or behavior changes
+				// in a backwards-incompatible way. It is not the Remotion package version
+				// and should not be bumped for every generated HTML change.
+				// Keep it synchronized with requiredVersion in
+				// packages/renderer/src/set-props-and-env.ts by incrementing both values.
 				window.siteVersion = '11';
 				window.remotion_version = '${remotion_1.VERSION}';
 		</script>

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

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

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

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

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

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

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

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

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

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

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

package/dist/shape-drag-data.js

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