remotion 4.0.499 → 4.0.501

package/dist/cjs/AbsoluteFill.d.ts

@@ -1,2 +1,238 @@
 import React from 'react';
-export declare const AbsoluteFill: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+import { type AbsoluteFillElementProps } from './AbsoluteFillElement.js';
+import type { InteractiveBaseProps } from './Interactive.js';
+export type AbsoluteFillProps = Omit<AbsoluteFillElementProps, keyof InteractiveBaseProps> & InteractiveBaseProps & {
+    /**
+     * @deprecated For internal use only
+     */
+    readonly stack?: string;
+};
+export declare const absoluteFillSchema: {
+    readonly 'style.transformOrigin': {
+        readonly type: "transform-origin";
+        readonly step: 1;
+        readonly default: "50% 50%";
+        readonly description: "Transform origin";
+    };
+    readonly 'style.translate': {
+        readonly type: "translate";
+        readonly step: 1;
+        readonly default: "0px 0px";
+        readonly description: "Offset";
+    };
+    readonly 'style.scale': {
+        readonly type: "scale";
+        readonly max: 100;
+        readonly step: 0.01;
+        readonly default: 1;
+        readonly description: "Scale";
+        readonly defaultKeyframeOutput: "perceptual-scale";
+    };
+    readonly 'style.rotate': {
+        readonly type: "rotation-css";
+        readonly step: 1;
+        readonly default: "0deg";
+        readonly description: "Rotation";
+    };
+    readonly 'style.opacity': {
+        readonly type: "number";
+        readonly min: 0;
+        readonly max: 1;
+        readonly step: 0.01;
+        readonly default: 1;
+        readonly description: "Opacity";
+        readonly hiddenFromList: false;
+    };
+    readonly 'style.color': {
+        readonly type: "color";
+        readonly default: undefined;
+        readonly description: "Color";
+    };
+    readonly 'style.fontFamily': {
+        readonly type: "font-family";
+        readonly default: undefined;
+        readonly description: "Font family";
+        readonly keyframable: false;
+    };
+    readonly 'style.fontSize': {
+        readonly type: "number";
+        readonly default: undefined;
+        readonly min: 0;
+        readonly step: 1;
+        readonly description: "Font size";
+        readonly hiddenFromList: false;
+    };
+    readonly 'style.lineHeight': {
+        readonly type: "number";
+        readonly default: undefined;
+        readonly min: 0;
+        readonly step: 0.05;
+        readonly description: "Line height";
+        readonly hiddenFromList: false;
+    };
+    readonly 'style.fontWeight': {
+        readonly type: "enum";
+        readonly default: "400";
+        readonly description: "Font weight";
+        readonly variants: {
+            readonly '100': {};
+            readonly '200': {};
+            readonly '300': {};
+            readonly '400': {};
+            readonly '500': {};
+            readonly '600': {};
+            readonly '700': {};
+            readonly '800': {};
+            readonly '900': {};
+            readonly normal: {};
+            readonly bold: {};
+        };
+    };
+    readonly 'style.fontStyle': {
+        readonly type: "enum";
+        readonly default: "normal";
+        readonly description: "Font style";
+        readonly variants: {
+            readonly normal: {};
+            readonly italic: {};
+            readonly oblique: {};
+        };
+    };
+    readonly 'style.textAlign': {
+        readonly type: "enum";
+        readonly default: "left";
+        readonly description: "Text align";
+        readonly variants: {
+            readonly left: {};
+            readonly center: {};
+            readonly right: {};
+            readonly justify: {};
+            readonly start: {};
+            readonly end: {};
+        };
+    };
+    readonly 'style.letterSpacing': {
+        readonly type: "number";
+        readonly default: undefined;
+        readonly step: 0.1;
+        readonly description: "Letter spacing";
+        readonly hiddenFromList: false;
+    };
+    readonly 'style.borderWidth': {
+        readonly type: "number";
+        readonly default: undefined;
+        readonly min: 0;
+        readonly step: 1;
+        readonly description: "Border width";
+        readonly hiddenFromList: false;
+    };
+    readonly 'style.borderStyle': {
+        readonly type: "enum";
+        readonly default: "none";
+        readonly description: "Border style";
+        readonly variants: {
+            readonly none: {};
+            readonly hidden: {};
+            readonly solid: {};
+            readonly dashed: {};
+            readonly dotted: {};
+            readonly double: {};
+            readonly groove: {};
+            readonly ridge: {};
+            readonly inset: {};
+            readonly outset: {};
+        };
+    };
+    readonly 'style.borderColor': {
+        readonly type: "color";
+        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";
+        readonly description: "Color";
+    };
+    readonly children: {
+        readonly type: "text-content";
+        readonly default: "";
+        readonly description: "Text";
+        readonly keyframable: false;
+    };
+    readonly durationInFrames: {
+        readonly type: "number";
+        readonly default: undefined;
+        readonly min: 1;
+        readonly step: 1;
+        readonly hiddenFromList: true;
+    };
+    readonly from: {
+        readonly type: "number";
+        readonly default: 0;
+        readonly step: 1;
+        readonly hiddenFromList: true;
+    };
+    readonly trimBefore: {
+        readonly type: "number";
+        readonly default: 0;
+        readonly min: 0;
+        readonly step: 1;
+        readonly hiddenFromList: true;
+    };
+    readonly freeze: {
+        readonly type: "number";
+        readonly default: null;
+        readonly step: 1;
+        readonly hiddenFromList: true;
+    };
+    readonly hidden: import("./interactivity-schema.js").BooleanFieldSchema;
+    readonly name: import("./interactivity-schema.js").HiddenFieldSchema;
+    readonly showInTimeline: import("./interactivity-schema.js").HiddenFieldSchema;
+};
+export declare const AbsoluteFill: React.ComponentType<Omit<AbsoluteFillElementProps, "durationInFrames" | "freeze" | "from" | "hidden" | "name" | "showInTimeline" | "trimBefore"> & InteractiveBaseProps & {
+    /**
+     * @deprecated For internal use only
+     */
+    readonly stack?: string | undefined;
+}>;

package/dist/cjs/AbsoluteFill.js

@@ -1,115 +1,52 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.AbsoluteFill = void 0;
+exports.AbsoluteFill = exports.absoluteFillSchema = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
-const hasTailwindClassName = ({ className, classPrefix, type, }) => {
-    if (!className) {
-        return false;
+const AbsoluteFillElement_js_1 = require("./AbsoluteFillElement.js");
+const enable_sequence_stack_traces_js_1 = require("./enable-sequence-stack-traces.js");
+const interactivity_schema_js_1 = require("./interactivity-schema.js");
+const Sequence_js_1 = require("./Sequence.js");
+const use_unsafe_video_config_js_1 = require("./use-unsafe-video-config.js");
+const with_interactivity_schema_js_1 = require("./with-interactivity-schema.js");
+exports.absoluteFillSchema = {
+    ...interactivity_schema_js_1.baseSchema,
+    ...interactivity_schema_js_1.transformSchema,
+    ...interactivity_schema_js_1.backgroundSchema,
+    ...interactivity_schema_js_1.borderSchema,
+    ...interactivity_schema_js_1.borderRadiusSchema,
+    ...interactivity_schema_js_1.textSchema,
+    ...interactivity_schema_js_1.textContentSchema,
+};
+const setRef = (ref, value) => {
+    if (typeof ref === 'function') {
+        ref(value);
     }
-    if (type === 'exact') {
-        const split = className.split(' ');
-        return classPrefix.some((token) => {
-            return split.some((part) => {
-                return (part.trim() === token ||
-                    part.trim().endsWith(`:${token}`) ||
-                    part.trim().endsWith(`!${token}`));
-            });
-        });
+    else if (ref) {
+        ref.current = value;
     }
-    return classPrefix.some((prefix) => {
-        return (className.startsWith(prefix) ||
-            className.includes(` ${prefix}`) ||
-            className.includes(`!${prefix}`) ||
-            className.includes(`:${prefix}`));
-    });
 };
-const AbsoluteFillRefForwarding = (props, ref) => {
-    const { style, ...other } = props;
-    const actualStyle = (0, react_1.useMemo)(() => {
-        // Make TailwindCSS classes get accepted
-        return {
-            position: 'absolute',
-            top: hasTailwindClassName({
-                className: other.className,
-                classPrefix: ['top-', 'inset-'],
-                type: 'prefix',
-            })
-                ? undefined
-                : 0,
-            left: hasTailwindClassName({
-                className: other.className,
-                classPrefix: ['left-', 'inset-'],
-                type: 'prefix',
-            })
-                ? undefined
-                : 0,
-            right: hasTailwindClassName({
-                className: other.className,
-                classPrefix: ['right-', 'inset-'],
-                type: 'prefix',
-            })
-                ? undefined
-                : 0,
-            bottom: hasTailwindClassName({
-                className: other.className,
-                classPrefix: ['bottom-', 'inset-'],
-                type: 'prefix',
-            })
-                ? undefined
-                : 0,
-            width: hasTailwindClassName({
-                className: other.className,
-                classPrefix: ['w-'],
-                type: 'prefix',
-            })
-                ? undefined
-                : '100%',
-            height: hasTailwindClassName({
-                className: other.className,
-                classPrefix: ['h-'],
-                type: 'prefix',
-            })
-                ? undefined
-                : '100%',
-            display: hasTailwindClassName({
-                className: other.className,
-                classPrefix: [
-                    'block',
-                    'inline-block',
-                    'inline',
-                    'flex',
-                    'inline-flex',
-                    'flow-root',
-                    'grid',
-                    'inline-grid',
-                    'contents',
-                    'list-item',
-                    'hidden',
-                ],
-                type: 'exact',
-            })
-                ? undefined
-                : 'flex',
-            flexDirection: hasTailwindClassName({
-                className: other.className,
-                classPrefix: [
-                    'flex-row',
-                    'flex-col',
-                    'flex-row-reverse',
-                    'flex-col-reverse',
-                ],
-                type: 'exact',
-            })
-                ? undefined
-                : 'column',
-            ...style,
-        };
-    }, [other.className, style]);
-    return jsx_runtime_1.jsx("div", { ref: ref, style: actualStyle, ...other });
+const AbsoluteFillInner = ({ ref, from, trimBefore, freeze, durationInFrames, hidden, name, showInTimeline, stack, controls, children, ...divProps }) => {
+    const videoConfig = (0, use_unsafe_video_config_js_1.useUnsafeVideoConfig)();
+    const refForOutline = (0, react_1.useRef)(null);
+    const callbackRef = (0, react_1.useCallback)((element) => {
+        refForOutline.current = element;
+        setRef(ref, element);
+    }, [ref]);
+    if (videoConfig === null) {
+        return hidden ? null : (jsx_runtime_1.jsx(AbsoluteFillElement_js_1.AbsoluteFillElement, { ref: callbackRef, ...divProps, children: children }));
+    }
+    return (jsx_runtime_1.jsx(Sequence_js_1.Sequence, { layout: "none", from: from !== null && from !== void 0 ? from : 0, trimBefore: trimBefore, freeze: freeze, durationInFrames: durationInFrames !== null && durationInFrames !== void 0 ? durationInFrames : Infinity, hidden: hidden, name: name !== null && name !== void 0 ? name : '<AbsoluteFill>', showInTimeline: showInTimeline !== null && showInTimeline !== void 0 ? showInTimeline : true, controls: controls, _remotionInternalStack: stack, _remotionInternalDocumentationLink: "https://www.remotion.dev/docs/absolute-fill", outlineRef: refForOutline, children: jsx_runtime_1.jsx(AbsoluteFillElement_js_1.AbsoluteFillElement, { ref: callbackRef, ...divProps, children: children }) }));
 };
 /*
  * @description A helper component which renders an absolutely positioned <div> element with full width, height, and flex display suited for content layering.
  * @see [Documentation](https://remotion.dev/docs/absolute-fill)
  */
-exports.AbsoluteFill = (0, react_1.forwardRef)(AbsoluteFillRefForwarding);
+exports.AbsoluteFill = (0, with_interactivity_schema_js_1.withInteractivitySchema)({
+    Component: AbsoluteFillInner,
+    componentName: '<AbsoluteFill>',
+    componentIdentity: 'dev.remotion.remotion.AbsoluteFill',
+    schema: exports.absoluteFillSchema,
+    supportsEffects: false,
+});
+(0, enable_sequence_stack_traces_js_1.addSequenceStackTraces)(exports.AbsoluteFill);

package/dist/cjs/AbsoluteFillElement.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+export type AbsoluteFillElementProps = React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>;
+export declare const AbsoluteFillElement: React.ForwardRefExoticComponent<Omit<AbsoluteFillElementProps, "ref"> & React.RefAttributes<HTMLDivElement>>;

package/dist/cjs/AbsoluteFillElement.js

@@ -0,0 +1,111 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AbsoluteFillElement = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const hasTailwindClassName = ({ className, classPrefix, type, }) => {
+    if (!className) {
+        return false;
+    }
+    if (type === 'exact') {
+        const split = className.split(' ');
+        return classPrefix.some((token) => {
+            return split.some((part) => {
+                return (part.trim() === token ||
+                    part.trim().endsWith(`:${token}`) ||
+                    part.trim().endsWith(`!${token}`));
+            });
+        });
+    }
+    return classPrefix.some((prefix) => {
+        return (className.startsWith(prefix) ||
+            className.includes(` ${prefix}`) ||
+            className.includes(`!${prefix}`) ||
+            className.includes(`:${prefix}`));
+    });
+};
+const AbsoluteFillElementRefForwarding = (props, ref) => {
+    const { style, ...other } = props;
+    const actualStyle = (0, react_1.useMemo)(() => {
+        // Make TailwindCSS classes get accepted
+        return {
+            position: 'absolute',
+            top: hasTailwindClassName({
+                className: other.className,
+                classPrefix: ['top-', 'inset-'],
+                type: 'prefix',
+            })
+                ? undefined
+                : 0,
+            left: hasTailwindClassName({
+                className: other.className,
+                classPrefix: ['left-', 'inset-'],
+                type: 'prefix',
+            })
+                ? undefined
+                : 0,
+            right: hasTailwindClassName({
+                className: other.className,
+                classPrefix: ['right-', 'inset-'],
+                type: 'prefix',
+            })
+                ? undefined
+                : 0,
+            bottom: hasTailwindClassName({
+                className: other.className,
+                classPrefix: ['bottom-', 'inset-'],
+                type: 'prefix',
+            })
+                ? undefined
+                : 0,
+            width: hasTailwindClassName({
+                className: other.className,
+                classPrefix: ['w-'],
+                type: 'prefix',
+            })
+                ? undefined
+                : '100%',
+            height: hasTailwindClassName({
+                className: other.className,
+                classPrefix: ['h-'],
+                type: 'prefix',
+            })
+                ? undefined
+                : '100%',
+            display: hasTailwindClassName({
+                className: other.className,
+                classPrefix: [
+                    'block',
+                    'inline-block',
+                    'inline',
+                    'flex',
+                    'inline-flex',
+                    'flow-root',
+                    'grid',
+                    'inline-grid',
+                    'contents',
+                    'list-item',
+                    'hidden',
+                ],
+                type: 'exact',
+            })
+                ? undefined
+                : 'flex',
+            flexDirection: hasTailwindClassName({
+                className: other.className,
+                classPrefix: [
+                    'flex-row',
+                    'flex-col',
+                    'flex-row-reverse',
+                    'flex-col-reverse',
+                ],
+                type: 'exact',
+            })
+                ? undefined
+                : 'column',
+            ...style,
+        };
+    }, [other.className, style]);
+    return jsx_runtime_1.jsx("div", { ref: ref, style: actualStyle, ...other });
+};
+exports.AbsoluteFillElement = (0, react_1.forwardRef)(AbsoluteFillElementRefForwarding);

package/dist/cjs/Composition.js

@@ -54,7 +54,8 @@ const InnerComposition = ({ width, height, fps, durationInFrames, id, defaultPro
         throw new Error('<Composition> mounted inside another composition. See https://remotion.dev/docs/wrong-composition-mount for help.');
     }
     const { folderName, parentName } = (0, react_1.useContext)(Folder_js_1.FolderContext);
-    const stack = (_b = compProps.stack) !== null && _b !== void 0 ? _b : null;
+    const stack = (_b = compProps
+        ._remotionInternalStack) !== null && _b !== void 0 ? _b : null;
     const componentFromProps = 'component' in compProps ? compProps.component : null;
     (0, react_1.useEffect)(() => {
         var _a;

package/dist/cjs/CompositionManager.d.ts

@@ -72,7 +72,6 @@ export type TSequence = {
     displayName: string;
     documentationLink: string | null;
     parent: string | null;
-    rootId: string;
     showInTimeline: boolean;
     nonce: NonceHistory;
     loopDisplay: LoopDisplay | undefined;

package/dist/cjs/Folder.js

@@ -21,7 +21,8 @@ const Folder = (props) => {
     const parent = (0, react_1.useContext)(exports.FolderContext);
     const { registerFolder, unregisterFolder } = (0, react_1.useContext)(CompositionManagerContext_js_1.CompositionSetters);
     const nonce = (0, nonce_js_1.useNonce)();
-    const stack = (_a = props.stack) !== null && _a !== void 0 ? _a : null;
+    const stack = (_a = props
+        ._remotionInternalStack) !== null && _a !== void 0 ? _a : null;
     (0, validate_folder_name_js_1.validateFolderName)(name);
     const parentNameArr = [parent.parentName, parent.folderName].filter(truthy_js_1.truthy);
     const parentName = parentNameArr.length === 0 ? null : parentNameArr.join('/');

package/dist/cjs/HtmlInCanvas.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import type { EffectsProp } from './effects/effect-types.js';
-import type { InteractiveBaseProps } from './Interactive.js';
+import type { InteractiveBaseProps, InteractiveCropProps } from './Interactive.js';
 import type { AbsoluteFillLayout } from './Sequence.js';
 declare global {
     interface ElementImage {
@@ -54,7 +54,7 @@ export type HtmlInCanvasOnPaint = (params: HtmlInCanvasOnPaintParams) => void |
 export type HtmlInCanvasOnInitCleanup = () => void;
 export type HtmlInCanvasOnInit = (params: HtmlInCanvasOnPaintParams) => HtmlInCanvasOnInitCleanup | Promise<HtmlInCanvasOnInitCleanup>;
 export type HtmlInCanvasPixelDensity = number;
-export type HtmlInCanvasProps = Omit<InteractiveBaseProps, 'children'> & Omit<AbsoluteFillLayout, 'layout' | 'styleWhilePostmounted' | 'postmountFor' | 'premountFor' | 'styleWhilePremounted'> & {
+export type HtmlInCanvasProps = Omit<InteractiveBaseProps, 'children'> & InteractiveCropProps & Omit<AbsoluteFillLayout, 'layout' | 'styleWhilePostmounted' | 'postmountFor' | 'premountFor' | 'styleWhilePremounted'> & {
     readonly durationInFrames?: number;
     readonly width: number;
     readonly height: number;
@@ -130,11 +130,92 @@ export declare const htmlInCanvasSchema: {
         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";
         readonly description: "Color";
     };
+    readonly cropLeft: {
+        readonly type: "number";
+        readonly default: 0;
+        readonly description: "Crop left";
+        readonly min: 0;
+        readonly max: 1;
+        readonly step: 0.01;
+        readonly hiddenFromList: false;
+        readonly keyframable: true;
+    };
+    readonly cropRight: {
+        readonly type: "number";
+        readonly default: 0;
+        readonly description: "Crop right";
+        readonly min: 0;
+        readonly max: 1;
+        readonly step: 0.01;
+        readonly hiddenFromList: false;
+        readonly keyframable: true;
+    };
+    readonly cropTop: {
+        readonly type: "number";
+        readonly default: 0;
+        readonly description: "Crop top";
+        readonly min: 0;
+        readonly max: 1;
+        readonly step: 0.01;
+        readonly hiddenFromList: false;
+        readonly keyframable: true;
+    };
+    readonly cropBottom: {
+        readonly type: "number";
+        readonly default: 0;
+        readonly description: "Crop bottom";
+        readonly min: 0;
+        readonly max: 1;
+        readonly step: 0.01;
+        readonly hiddenFromList: false;
+        readonly keyframable: true;
+    };
     readonly durationInFrames: {
         readonly type: "number";
         readonly default: undefined;
@@ -174,7 +255,7 @@ export declare const htmlInCanvasSchema: {
         readonly hiddenFromList: false;
     };
 };
-export declare const HtmlInCanvas: React.ForwardRefExoticComponent<Omit<InteractiveBaseProps, "children"> & Omit<AbsoluteFillLayout, "layout" | "postmountFor" | "premountFor" | "styleWhilePostmounted" | "styleWhilePremounted"> & {
+export declare const HtmlInCanvas: React.ForwardRefExoticComponent<Omit<InteractiveBaseProps, "children"> & InteractiveCropProps & Omit<AbsoluteFillLayout, "layout" | "postmountFor" | "premountFor" | "styleWhilePostmounted" | "styleWhilePremounted"> & {
     readonly durationInFrames?: number | undefined;
     readonly width: number;
     readonly height: number;