remotion 4.0.500 → 4.0.502

package/dist/cjs/interactivity-schema.d.ts

@@ -132,11 +132,25 @@ export type ArrayFieldSchema = {
     description?: string;
     keyframable?: false;
 };
-export type VisibleFieldSchema = NumberFieldSchema | BooleanFieldSchema | RotationCssFieldSchema | RotationDegreesFieldSchema | TranslateFieldSchema | TransformOriginFieldSchema | ScaleFieldSchema | UvCoordinateFieldSchema | ColorFieldSchema | TextContentFieldSchema | FontFamilyFieldSchema | AssetFieldSchema | ArrayFieldSchema | EnumFieldSchema;
+export type CaptionsFieldSchema = {
+    type: 'remotion-captions';
+    default: readonly unknown[] | undefined;
+    description?: string;
+    keyframable: false;
+};
+export type VisibleFieldSchema = NumberFieldSchema | BooleanFieldSchema | RotationCssFieldSchema | RotationDegreesFieldSchema | TranslateFieldSchema | TransformOriginFieldSchema | ScaleFieldSchema | UvCoordinateFieldSchema | ColorFieldSchema | TextContentFieldSchema | FontFamilyFieldSchema | AssetFieldSchema | ArrayFieldSchema | CaptionsFieldSchema | EnumFieldSchema;
 export type InteractivitySchemaField = VisibleFieldSchema | HiddenFieldSchema;
 export type InteractivitySchema = {
     [key: string]: InteractivitySchemaField;
 };
+export declare const captionsSchema: {
+    readonly captions: {
+        readonly type: "remotion-captions";
+        readonly default: undefined;
+        readonly description: "Captions";
+        readonly keyframable: false;
+    };
+};
 export type InteractivitySchemaKeysRecord<S extends InteractivitySchema> = Record<keyof S, unknown>;
 export declare const transformSchema: {
     readonly 'style.transformOrigin': {
@@ -321,6 +335,49 @@ export declare const borderSchema: {
         readonly description: "Border color";
     };
 };
+export declare const borderRadiusSchema: {
+    readonly 'style.borderRadius': {
+        readonly type: "number";
+        readonly default: 0;
+        readonly min: 0;
+        readonly step: 1;
+        readonly description: "Border radius";
+        readonly hiddenFromList: false;
+        readonly keyframable: true;
+    };
+    readonly 'style.borderTopLeftRadius': {
+        readonly type: "number";
+        readonly default: 0;
+        readonly min: 0;
+        readonly step: 1;
+        readonly description: "Top left radius";
+        readonly hiddenFromList: false;
+    };
+    readonly 'style.borderTopRightRadius': {
+        readonly type: "number";
+        readonly default: 0;
+        readonly min: 0;
+        readonly step: 1;
+        readonly description: "Top right radius";
+        readonly hiddenFromList: false;
+    };
+    readonly 'style.borderBottomRightRadius': {
+        readonly type: "number";
+        readonly default: 0;
+        readonly min: 0;
+        readonly step: 1;
+        readonly description: "Bottom right radius";
+        readonly hiddenFromList: false;
+    };
+    readonly 'style.borderBottomLeftRadius': {
+        readonly type: "number";
+        readonly default: 0;
+        readonly min: 0;
+        readonly step: 1;
+        readonly description: "Bottom left radius";
+        readonly hiddenFromList: false;
+    };
+};
 export declare const backgroundSchema: {
     readonly 'style.backgroundColor': {
         readonly type: "color";
@@ -559,6 +616,47 @@ export declare const sequenceStyleSchema: {
         readonly default: undefined;
         readonly description: "Border color";
     };
+    readonly 'style.borderRadius': {
+        readonly type: "number";
+        readonly default: 0;
+        readonly min: 0;
+        readonly step: 1;
+        readonly description: "Border radius";
+        readonly hiddenFromList: false;
+        readonly keyframable: true;
+    };
+    readonly 'style.borderTopLeftRadius': {
+        readonly type: "number";
+        readonly default: 0;
+        readonly min: 0;
+        readonly step: 1;
+        readonly description: "Top left radius";
+        readonly hiddenFromList: false;
+    };
+    readonly 'style.borderTopRightRadius': {
+        readonly type: "number";
+        readonly default: 0;
+        readonly min: 0;
+        readonly step: 1;
+        readonly description: "Top right radius";
+        readonly hiddenFromList: false;
+    };
+    readonly 'style.borderBottomRightRadius': {
+        readonly type: "number";
+        readonly default: 0;
+        readonly min: 0;
+        readonly step: 1;
+        readonly description: "Bottom right radius";
+        readonly hiddenFromList: false;
+    };
+    readonly 'style.borderBottomLeftRadius': {
+        readonly type: "number";
+        readonly default: 0;
+        readonly min: 0;
+        readonly step: 1;
+        readonly description: "Bottom left radius";
+        readonly hiddenFromList: false;
+    };
     readonly 'style.backgroundColor': {
         readonly type: "color";
         readonly default: "transparent";
@@ -785,6 +883,47 @@ export declare const sequenceSchema: {
                     readonly default: undefined;
                     readonly description: "Border color";
                 };
+                readonly 'style.borderRadius': {
+                    readonly type: "number";
+                    readonly default: 0;
+                    readonly min: 0;
+                    readonly step: 1;
+                    readonly description: "Border radius";
+                    readonly hiddenFromList: false;
+                    readonly keyframable: true;
+                };
+                readonly 'style.borderTopLeftRadius': {
+                    readonly type: "number";
+                    readonly default: 0;
+                    readonly min: 0;
+                    readonly step: 1;
+                    readonly description: "Top left radius";
+                    readonly hiddenFromList: false;
+                };
+                readonly 'style.borderTopRightRadius': {
+                    readonly type: "number";
+                    readonly default: 0;
+                    readonly min: 0;
+                    readonly step: 1;
+                    readonly description: "Top right radius";
+                    readonly hiddenFromList: false;
+                };
+                readonly 'style.borderBottomRightRadius': {
+                    readonly type: "number";
+                    readonly default: 0;
+                    readonly min: 0;
+                    readonly step: 1;
+                    readonly description: "Bottom right radius";
+                    readonly hiddenFromList: false;
+                };
+                readonly 'style.borderBottomLeftRadius': {
+                    readonly type: "number";
+                    readonly default: 0;
+                    readonly min: 0;
+                    readonly step: 1;
+                    readonly description: "Bottom left radius";
+                    readonly hiddenFromList: false;
+                };
                 readonly 'style.backgroundColor': {
                     readonly type: "color";
                     readonly default: "transparent";
@@ -972,6 +1111,47 @@ export declare const sequenceSchemaWithoutFrom: {
                     readonly default: undefined;
                     readonly description: "Border color";
                 };
+                readonly 'style.borderRadius': {
+                    readonly type: "number";
+                    readonly default: 0;
+                    readonly min: 0;
+                    readonly step: 1;
+                    readonly description: "Border radius";
+                    readonly hiddenFromList: false;
+                    readonly keyframable: true;
+                };
+                readonly 'style.borderTopLeftRadius': {
+                    readonly type: "number";
+                    readonly default: 0;
+                    readonly min: 0;
+                    readonly step: 1;
+                    readonly description: "Top left radius";
+                    readonly hiddenFromList: false;
+                };
+                readonly 'style.borderTopRightRadius': {
+                    readonly type: "number";
+                    readonly default: 0;
+                    readonly min: 0;
+                    readonly step: 1;
+                    readonly description: "Top right radius";
+                    readonly hiddenFromList: false;
+                };
+                readonly 'style.borderBottomRightRadius': {
+                    readonly type: "number";
+                    readonly default: 0;
+                    readonly min: 0;
+                    readonly step: 1;
+                    readonly description: "Bottom right radius";
+                    readonly hiddenFromList: false;
+                };
+                readonly 'style.borderBottomLeftRadius': {
+                    readonly type: "number";
+                    readonly default: 0;
+                    readonly min: 0;
+                    readonly step: 1;
+                    readonly description: "Bottom left radius";
+                    readonly hiddenFromList: false;
+                };
                 readonly 'style.backgroundColor': {
                     readonly type: "color";
                     readonly default: "transparent";

package/dist/cjs/interactivity-schema.js

@@ -1,6 +1,14 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.sequenceSchemaDefaultLayoutNone = exports.sequenceSchemaWithoutFrom = exports.baseSchemaWithoutFrom = exports.sequenceSchema = exports.baseSchema = exports.freezeField = exports.trimBeforeField = exports.fromField = exports.durationInFramesField = exports.extendSchemaWithSequenceName = exports.sequenceNameField = exports.hiddenField = exports.sequenceStyleSchema = exports.sequenceCropSchema = exports.cropSchema = exports.sequencePremountSchema = exports.premountSchema = exports.textContentSchema = exports.svgPaintSchema = exports.svgStrokeSchema = exports.backgroundSchema = exports.borderSchema = exports.textSchema = exports.sequenceVisualStyleSchema = exports.transformSchema = void 0;
+exports.sequenceSchemaDefaultLayoutNone = exports.sequenceSchemaWithoutFrom = exports.baseSchemaWithoutFrom = exports.sequenceSchema = exports.baseSchema = exports.freezeField = exports.trimBeforeField = exports.fromField = exports.durationInFramesField = exports.extendSchemaWithSequenceName = exports.sequenceNameField = exports.hiddenField = exports.sequenceStyleSchema = exports.sequenceCropSchema = exports.cropSchema = exports.sequencePremountSchema = exports.premountSchema = exports.textContentSchema = exports.svgPaintSchema = exports.svgStrokeSchema = exports.backgroundSchema = exports.borderRadiusSchema = exports.borderSchema = exports.textSchema = exports.sequenceVisualStyleSchema = exports.transformSchema = exports.captionsSchema = void 0;
+exports.captionsSchema = {
+    captions: {
+        type: 'remotion-captions',
+        default: undefined,
+        description: 'Captions',
+        keyframable: false,
+    },
+};
 exports.transformSchema = {
     'style.transformOrigin': {
         type: 'transform-origin',
@@ -149,6 +157,49 @@ exports.borderSchema = {
         description: 'Border color',
     },
 };
+exports.borderRadiusSchema = {
+    'style.borderRadius': {
+        type: 'number',
+        default: 0,
+        min: 0,
+        step: 1,
+        description: 'Border radius',
+        hiddenFromList: false,
+        keyframable: true,
+    },
+    'style.borderTopLeftRadius': {
+        type: 'number',
+        default: 0,
+        min: 0,
+        step: 1,
+        description: 'Top left radius',
+        hiddenFromList: false,
+    },
+    'style.borderTopRightRadius': {
+        type: 'number',
+        default: 0,
+        min: 0,
+        step: 1,
+        description: 'Top right radius',
+        hiddenFromList: false,
+    },
+    'style.borderBottomRightRadius': {
+        type: 'number',
+        default: 0,
+        min: 0,
+        step: 1,
+        description: 'Bottom right radius',
+        hiddenFromList: false,
+    },
+    'style.borderBottomLeftRadius': {
+        type: 'number',
+        default: 0,
+        min: 0,
+        step: 1,
+        description: 'Bottom left radius',
+        hiddenFromList: false,
+    },
+};
 exports.backgroundSchema = {
     'style.backgroundColor': {
         type: 'color',
@@ -260,6 +311,7 @@ exports.sequenceStyleSchema = {
     ...exports.transformSchema,
     ...exports.backgroundSchema,
     ...exports.borderSchema,
+    ...exports.borderRadiusSchema,
     ...exports.sequencePremountSchema,
 };
 exports.hiddenField = {

package/dist/cjs/internals.d.ts

@@ -215,6 +215,47 @@ export declare const Internals: {
                         readonly default: undefined;
                         readonly description: "Border color";
                     };
+                    readonly 'style.borderRadius': {
+                        readonly type: "number";
+                        readonly default: 0;
+                        readonly min: 0;
+                        readonly step: 1;
+                        readonly description: "Border radius";
+                        readonly hiddenFromList: false;
+                        readonly keyframable: true;
+                    };
+                    readonly 'style.borderTopLeftRadius': {
+                        readonly type: "number";
+                        readonly default: 0;
+                        readonly min: 0;
+                        readonly step: 1;
+                        readonly description: "Top left radius";
+                        readonly hiddenFromList: false;
+                    };
+                    readonly 'style.borderTopRightRadius': {
+                        readonly type: "number";
+                        readonly default: 0;
+                        readonly min: 0;
+                        readonly step: 1;
+                        readonly description: "Top right radius";
+                        readonly hiddenFromList: false;
+                    };
+                    readonly 'style.borderBottomRightRadius': {
+                        readonly type: "number";
+                        readonly default: 0;
+                        readonly min: 0;
+                        readonly step: 1;
+                        readonly description: "Bottom right radius";
+                        readonly hiddenFromList: false;
+                    };
+                    readonly 'style.borderBottomLeftRadius': {
+                        readonly type: "number";
+                        readonly default: 0;
+                        readonly min: 0;
+                        readonly step: 1;
+                        readonly description: "Bottom left radius";
+                        readonly hiddenFromList: false;
+                    };
                     readonly 'style.backgroundColor': {
                         readonly type: "color";
                         readonly default: "transparent";
@@ -349,6 +390,47 @@ export declare const Internals: {
             readonly default: undefined;
             readonly description: "Border color";
         };
+        readonly 'style.borderRadius': {
+            readonly type: "number";
+            readonly default: 0;
+            readonly min: 0;
+            readonly step: 1;
+            readonly description: "Border radius";
+            readonly hiddenFromList: false;
+            readonly keyframable: true;
+        };
+        readonly 'style.borderTopLeftRadius': {
+            readonly type: "number";
+            readonly default: 0;
+            readonly min: 0;
+            readonly step: 1;
+            readonly description: "Top left radius";
+            readonly hiddenFromList: false;
+        };
+        readonly 'style.borderTopRightRadius': {
+            readonly type: "number";
+            readonly default: 0;
+            readonly min: 0;
+            readonly step: 1;
+            readonly description: "Top right radius";
+            readonly hiddenFromList: false;
+        };
+        readonly 'style.borderBottomRightRadius': {
+            readonly type: "number";
+            readonly default: 0;
+            readonly min: 0;
+            readonly step: 1;
+            readonly description: "Bottom right radius";
+            readonly hiddenFromList: false;
+        };
+        readonly 'style.borderBottomLeftRadius': {
+            readonly type: "number";
+            readonly default: 0;
+            readonly min: 0;
+            readonly step: 1;
+            readonly description: "Bottom left radius";
+            readonly hiddenFromList: false;
+        };
         readonly 'style.backgroundColor': {
             readonly type: "color";
             readonly default: "transparent";
@@ -925,6 +1007,8 @@ export declare const Internals: {
     readonly getComponentsToAddStacksTo: () => unknown[];
     readonly getSequenceComponent: () => unknown;
     readonly getSingleChildComponent: (children: import("react").ReactNode) => unknown;
+    readonly getStackForControls: (controls: import("./CompositionManager.js").SequenceControls) => string | null;
+    readonly REMOTION_INTERNAL_STACK_PROP: "_remotionInternalStack";
     readonly CurrentScaleContext: import("react").Context<({
         type: "scale";
         scale: number;
@@ -1035,7 +1119,6 @@ export declare const Internals: {
         readonly _remotionInternalNativeLoopPassed: boolean;
         readonly _remotionInternalStack: string | null;
         readonly showInTimeline: boolean;
-        readonly stack?: string | undefined;
         readonly onNativeError: import("react").ReactEventHandler<HTMLAudioElement>;
     }, "ref"> & import("react").RefAttributes<HTMLAudioElement>>;
     readonly OBJECTFIT_CONTAIN_CLASS_NAME: "__remotion_objectfitcontain";

package/dist/cjs/internals.js

@@ -221,6 +221,8 @@ exports.Internals = {
     getComponentsToAddStacksTo: enable_sequence_stack_traces_js_1.getComponentsToAddStacksTo,
     getSequenceComponent: enable_sequence_stack_traces_js_1.getSequenceComponent,
     getSingleChildComponent: enable_sequence_stack_traces_js_1.getSingleChildComponent,
+    getStackForControls: enable_sequence_stack_traces_js_1.getStackForControls,
+    REMOTION_INTERNAL_STACK_PROP: enable_sequence_stack_traces_js_1.REMOTION_INTERNAL_STACK_PROP,
     CurrentScaleContext: use_current_scale_js_1.CurrentScaleContext,
     PixelDensityContext: use_pixel_density_js_1.PixelDensityContext,
     PreviewSizeContext: use_current_scale_js_1.PreviewSizeContext,

package/dist/cjs/no-react.d.ts

@@ -163,6 +163,47 @@ export declare const NoReactInternals: {
                         readonly default: undefined;
                         readonly description: "Border color";
                     };
+                    readonly 'style.borderRadius': {
+                        readonly type: "number";
+                        readonly default: 0;
+                        readonly min: 0;
+                        readonly step: 1;
+                        readonly description: "Border radius";
+                        readonly hiddenFromList: false;
+                        readonly keyframable: true;
+                    };
+                    readonly 'style.borderTopLeftRadius': {
+                        readonly type: "number";
+                        readonly default: 0;
+                        readonly min: 0;
+                        readonly step: 1;
+                        readonly description: "Top left radius";
+                        readonly hiddenFromList: false;
+                    };
+                    readonly 'style.borderTopRightRadius': {
+                        readonly type: "number";
+                        readonly default: 0;
+                        readonly min: 0;
+                        readonly step: 1;
+                        readonly description: "Top right radius";
+                        readonly hiddenFromList: false;
+                    };
+                    readonly 'style.borderBottomRightRadius': {
+                        readonly type: "number";
+                        readonly default: 0;
+                        readonly min: 0;
+                        readonly step: 1;
+                        readonly description: "Bottom right radius";
+                        readonly hiddenFromList: false;
+                    };
+                    readonly 'style.borderBottomLeftRadius': {
+                        readonly type: "number";
+                        readonly default: 0;
+                        readonly min: 0;
+                        readonly step: 1;
+                        readonly description: "Bottom left radius";
+                        readonly hiddenFromList: false;
+                    };
                     readonly 'style.backgroundColor': {
                         readonly type: "color";
                         readonly default: "transparent";

package/dist/cjs/sequence-crop.d.ts

@@ -1,11 +1,12 @@
+import type { CSSProperties } from 'react';
 export type ResolvedSequenceCrop = {
     readonly left: number;
     readonly right: number;
     readonly top: number;
     readonly bottom: number;
 };
-type ResolvedSequenceCropWithBorderRadius = ResolvedSequenceCrop & {
-    readonly borderRadius?: string | number;
+type ResolvedSequenceCropWithStyle = ResolvedSequenceCrop & {
+    readonly style: CSSProperties | null | undefined;
 };
 export type SequenceCropInput = {
     readonly cropLeft?: number;
@@ -14,6 +15,6 @@ export type SequenceCropInput = {
     readonly cropBottom?: number;
 };
 export declare const resolveSequenceCrop: ({ cropLeft, cropRight, cropTop, cropBottom, }: SequenceCropInput) => ResolvedSequenceCrop;
-export declare const getSequenceCropClipPath: ({ left, right, top, bottom, borderRadius, }: ResolvedSequenceCropWithBorderRadius) => string | null;
+export declare const getSequenceCropClipPath: ({ left, right, top, bottom, style, }: ResolvedSequenceCropWithStyle) => string | null;
 export declare const validateSequenceCrop: (crop: SequenceCropInput, componentName?: string) => void;
 export {};

package/dist/cjs/sequence-crop.js

@@ -18,11 +18,25 @@ const resolveSequenceCrop = ({ cropLeft, cropRight, cropTop, cropBottom, }) => {
     return { left, right, top, bottom };
 };
 exports.resolveSequenceCrop = resolveSequenceCrop;
-const getSequenceCropClipPath = ({ left, right, top, bottom, borderRadius, }) => {
+const getSequenceCropClipPath = ({ left, right, top, bottom, style, }) => {
     if (left === 0 && right === 0 && top === 0 && bottom === 0) {
         return null;
     }
-    const serializedBorderRadius = typeof borderRadius === 'number' ? `${borderRadius}px` : borderRadius;
+    const serializeRadius = (radius) => typeof radius === 'number' ? `${radius}px` : radius;
+    const shorthand = serializeRadius(style === null || style === void 0 ? void 0 : style.borderRadius);
+    const longhands = [
+        style === null || style === void 0 ? void 0 : style.borderTopLeftRadius,
+        style === null || style === void 0 ? void 0 : style.borderTopRightRadius,
+        style === null || style === void 0 ? void 0 : style.borderBottomRightRadius,
+        style === null || style === void 0 ? void 0 : style.borderBottomLeftRadius,
+    ];
+    const serializedBorderRadius = shorthand ||
+        (longhands.some((radius) => radius !== undefined)
+            ? longhands.map((radius) => {
+                var _a;
+                return (_a = serializeRadius(radius)) !== null && _a !== void 0 ? _a : '0px';
+            }).join(' ')
+            : undefined);
     const rounded = serializedBorderRadius
         ? ` round ${serializedBorderRadius}`
         : '';

package/dist/cjs/series/index.js

@@ -53,10 +53,10 @@ const seriesSequenceSchema = {
     trimBefore: Interactive_js_1.Interactive.sequenceSchema.trimBefore,
     layout: Interactive_js_1.Interactive.sequenceSchema.layout,
 };
-const SeriesSequenceInner = (0, react_1.forwardRef)(({ offset = 0, className = '', stack = null, _remotionInternalRender = null, ...props }, ref) => {
+const SeriesSequenceInner = (0, react_1.forwardRef)(({ offset = 0, className = '', _remotionInternalRender = null, ...props }, ref) => {
     (0, is_inside_series_js_1.useRequireToBeInsideSeries)();
     if (_remotionInternalRender) {
-        return _remotionInternalRender({ ...props, offset, className: className || undefined, stack }, ref);
+        return _remotionInternalRender({ ...props, offset, className: className || undefined }, ref);
     }
     return (jsx_runtime_1.jsx(is_inside_series_js_1.IsNotInsideSeriesProvider, { children: props.children }));
 });
@@ -117,7 +117,7 @@ const SeriesInner = (props) => {
             return react_1.default.cloneElement(castedElement, {
                 _remotionInternalRender: (resolvedProps, ref) => {
                     const durationInFramesProp = resolvedProps.durationInFrames;
-                    const { durationInFrames: _durationInFrames, children: sequenceChildren, offset: offsetProp, controls, stack, from: _from, name, ...passedProps } = resolvedProps; // `from` is not accepted and must be filtered out if used in JS
+                    const { durationInFrames: _durationInFrames, children: sequenceChildren, offset: offsetProp, controls, from: _from, name, ...passedProps } = resolvedProps; // `from` is not accepted and must be filtered out if used in JS
                     const offset = validateSeriesSequenceProps({
                         durationInFrames: durationInFramesProp,
                         offset: offsetProp,
@@ -127,7 +127,7 @@ const SeriesInner = (props) => {
                     const currentStartFrame = startFrame + offset;
                     const nextStartFrame = startFrame + durationInFramesProp + offset;
                     return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
-                            jsx_runtime_1.jsx(SequenceWithoutSchemaWithRef, { ref: ref, name: name || '<Series.Sequence>', _remotionInternalDocumentationLink: name ? undefined : 'https://www.remotion.dev/docs/series', _remotionInternalStack: stack !== null && stack !== void 0 ? stack : undefined, controls: controls !== null && controls !== void 0 ? controls : undefined, from: currentStartFrame, durationInFrames: durationInFramesProp, ...passedProps, children: jsx_runtime_1.jsx(is_inside_series_js_1.IsNotInsideSeriesProvider, { children: sequenceChildren }) }), renderChildren(i + 1, nextStartFrame)] }));
+                            jsx_runtime_1.jsx(SequenceWithoutSchemaWithRef, { ref: ref, name: name || '<Series.Sequence>', _remotionInternalDocumentationLink: name ? undefined : 'https://www.remotion.dev/docs/series', controls: controls !== null && controls !== void 0 ? controls : undefined, from: currentStartFrame, durationInFrames: durationInFramesProp, ...passedProps, children: jsx_runtime_1.jsx(is_inside_series_js_1.IsNotInsideSeriesProvider, { children: sequenceChildren }) }), renderChildren(i + 1, nextStartFrame)] }));
                 },
             });
         };

package/dist/cjs/static-file.js

@@ -66,6 +66,7 @@ const encodeBySplitting = (path) => {
  * @see [Documentation](https://www.remotion.dev/docs/staticfile)
  */
 const staticFile = (path) => {
+    var _a;
     if (path === null) {
         throw new TypeError('null was passed to staticFile()');
     }
@@ -96,6 +97,15 @@ const staticFile = (path) => {
     if (includesHex.containsHex) {
         warnOnce(`WARNING: You seem to pass an already encoded path (path contains ${includesHex.hexCode}). Since Remotion 4.0, the encoding is done by staticFile() itself. You may want to remove a encodeURIComponent() wrapping.`);
     }
+    if (typeof window !== 'undefined') {
+        // This lookup is primarily used by Browser Studio, where virtual assets
+        // have blob: URLs. Regular Studio sources are already encoded using the
+        // same per-path-segment encoding as the fallback below.
+        const matchingStaticFile = (_a = window.remotion_staticFiles) === null || _a === void 0 ? void 0 : _a.find((file) => file.name === trimLeadingSlash(path));
+        if (matchingStaticFile) {
+            return matchingStaticFile.src;
+        }
+    }
     const preprocessed = encodeBySplitting(path);
     const preparsed = inner(preprocessed);
     if (!preparsed.startsWith('/')) {

package/dist/cjs/truncate-src-for-label.js

@@ -4,7 +4,11 @@ exports.truncateSrcForLabel = truncateSrcForLabel;
 // Data URLs like the ones from canvas.toDataURL() can be many megabytes, which makes the delayRender() label
 // unreadable and bloats log output
 function truncateSrcForLabel(src) {
-    if (src.startsWith('data:') && src.length > 100) {
+    if (typeof src !== 'string') {
+        return String(src);
+    }
+    if (src.length > 100 &&
+        (src.startsWith('data:') || src.startsWith('blob:'))) {
         return src.slice(0, 60) + '...[' + src.length + ' chars total]';
     }
     return src;

package/dist/cjs/use-crop-style.js

@@ -8,7 +8,7 @@ const useCropStyle = ({ cropLeft, cropRight, cropTop, cropBottom, style, compone
     return (0, react_1.useMemo)(() => {
         const cropClipPath = (0, sequence_crop_js_1.getSequenceCropClipPath)({
             ...(0, sequence_crop_js_1.resolveSequenceCrop)({ cropLeft, cropRight, cropTop, cropBottom }),
-            borderRadius: style === null || style === void 0 ? void 0 : style.borderRadius,
+            style,
         });
         if (cropClipPath === null) {
             return style;

package/dist/cjs/version.d.ts

@@ -3,4 +3,4 @@
  * @see [Documentation](https://remotion.dev/docs/version)
  * @returns {string} The current version of the remotion package
  */
-export declare const VERSION = "4.0.500";
+export declare const VERSION = "4.0.502";

package/dist/cjs/version.js

@@ -7,4 +7,4 @@ exports.VERSION = void 0;
  * @see [Documentation](https://remotion.dev/docs/version)
  * @returns {string} The current version of the remotion package
  */
-exports.VERSION = '4.0.500';
+exports.VERSION = '4.0.502';