remotion 4.0.473 → 4.0.475

package/dist/cjs/CompositionManager.d.ts

@@ -71,7 +71,7 @@ export type TSequence = {
     premountDisplay: number | null;
     postmountDisplay: number | null;
     controls: SequenceControls | null;
-    refForOutline: React.RefObject<HTMLElement | null> | null;
+    refForOutline: React.RefObject<Element | null> | null;
     effects: readonly EffectDefinition<unknown>[];
     isInsideSeries: boolean;
 } & EnhancedTSequenceData;

package/dist/cjs/Img.d.ts

@@ -18,6 +18,12 @@ export type ImgProps = NativeImgProps & {
     readonly stack?: string;
 } & Pick<SequenceProps, 'durationInFrames' | 'from' | 'hidden'>;
 export declare const imgSchema: {
+    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;

package/dist/cjs/Interactive.d.ts

@@ -0,0 +1,56 @@
+import React from 'react';
+import type { SequenceProps } from './Sequence.js';
+type InteractiveHtmlTag = 'a' | 'article' | 'aside' | 'button' | 'code' | 'div' | 'em' | 'footer' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'header' | 'label' | 'li' | 'main' | 'nav' | 'ol' | 'p' | 'pre' | 'section' | 'small' | 'span' | 'strong' | 'ul';
+type InteractiveSvgTag = 'circle' | 'ellipse' | 'g' | 'line' | 'path' | 'rect' | 'svg' | 'text';
+type InteractiveTag = InteractiveHtmlTag | InteractiveSvgTag;
+type ElementForTag<Tag extends InteractiveTag> = Tag extends keyof HTMLElementTagNameMap ? HTMLElementTagNameMap[Tag] : Tag extends keyof SVGElementTagNameMap ? SVGElementTagNameMap[Tag] : Element;
+type InteractiveSequenceProps = Pick<SequenceProps, 'durationInFrames' | 'from' | 'hidden' | 'name' | 'showInTimeline'> & {
+    /**
+     * @deprecated For internal use only
+     */
+    readonly stack?: string;
+};
+type InteractiveElementProps<Tag extends InteractiveTag> = Omit<React.ComponentPropsWithoutRef<Tag>, keyof InteractiveSequenceProps> & InteractiveSequenceProps;
+type InteractiveElementComponent<Tag extends InteractiveTag> = React.ComponentType<InteractiveElementProps<Tag> & React.RefAttributes<ElementForTag<Tag>>>;
+/**
+ * @description HTML and SVG elements that are registered in the Remotion Studio timeline and can be visually edited.
+ */
+export declare const Interactive: {
+    A: InteractiveElementComponent<"a">;
+    Article: InteractiveElementComponent<"article">;
+    Aside: InteractiveElementComponent<"aside">;
+    Button: InteractiveElementComponent<"button">;
+    Circle: InteractiveElementComponent<"circle">;
+    Code: InteractiveElementComponent<"code">;
+    Div: InteractiveElementComponent<"div">;
+    Ellipse: InteractiveElementComponent<"ellipse">;
+    Em: InteractiveElementComponent<"em">;
+    Footer: InteractiveElementComponent<"footer">;
+    G: InteractiveElementComponent<"g">;
+    H1: InteractiveElementComponent<"h1">;
+    H2: InteractiveElementComponent<"h2">;
+    H3: InteractiveElementComponent<"h3">;
+    H4: InteractiveElementComponent<"h4">;
+    H5: InteractiveElementComponent<"h5">;
+    H6: InteractiveElementComponent<"h6">;
+    Header: InteractiveElementComponent<"header">;
+    Label: InteractiveElementComponent<"label">;
+    Li: InteractiveElementComponent<"li">;
+    Line: InteractiveElementComponent<"line">;
+    Main: InteractiveElementComponent<"main">;
+    Nav: InteractiveElementComponent<"nav">;
+    Ol: InteractiveElementComponent<"ol">;
+    P: InteractiveElementComponent<"p">;
+    Path: InteractiveElementComponent<"path">;
+    Pre: InteractiveElementComponent<"pre">;
+    Rect: InteractiveElementComponent<"rect">;
+    Section: InteractiveElementComponent<"section">;
+    Small: InteractiveElementComponent<"small">;
+    Span: InteractiveElementComponent<"span">;
+    Strong: InteractiveElementComponent<"strong">;
+    Svg: InteractiveElementComponent<"svg">;
+    Text: InteractiveElementComponent<"text">;
+    Ul: InteractiveElementComponent<"ul">;
+};
+export type InteractiveProps<Tag extends InteractiveTag> = InteractiveElementProps<Tag>;
+export {};

package/dist/cjs/Interactive.js

@@ -0,0 +1,119 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Interactive = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = __importStar(require("react"));
+const enable_sequence_stack_traces_js_1 = require("./enable-sequence-stack-traces.js");
+const sequence_field_schema_js_1 = require("./sequence-field-schema.js");
+const Sequence_js_1 = require("./Sequence.js");
+const wrap_in_schema_js_1 = require("./wrap-in-schema.js");
+const interactiveElementSchema = {
+    durationInFrames: sequence_field_schema_js_1.durationInFramesField,
+    from: sequence_field_schema_js_1.fromField,
+    ...sequence_field_schema_js_1.sequenceVisualStyleSchema,
+    hidden: sequence_field_schema_js_1.hiddenField,
+};
+const setRef = (ref, value) => {
+    if (typeof ref === 'function') {
+        ref(value);
+    }
+    else if (ref) {
+        ref.current = value;
+    }
+};
+const makeInteractiveElement = (tag, displayName) => {
+    const Inner = (0, react_1.forwardRef)((propsWithControls, ref) => {
+        const { durationInFrames, from, hidden, name, showInTimeline, stack, _experimentalControls, ...props } = propsWithControls;
+        const refForOutline = (0, react_1.useRef)(null);
+        const callbackRef = (0, react_1.useCallback)((element) => {
+            refForOutline.current = element;
+            setRef(ref, element);
+        }, [ref]);
+        return (jsx_runtime_1.jsx(Sequence_js_1.Sequence, { layout: "none", from: from !== null && from !== void 0 ? from : 0, durationInFrames: durationInFrames !== null && durationInFrames !== void 0 ? durationInFrames : Infinity, hidden: hidden, name: name !== null && name !== void 0 ? name : displayName, showInTimeline: showInTimeline !== null && showInTimeline !== void 0 ? showInTimeline : true, _experimentalControls: _experimentalControls, _remotionInternalStack: stack, _remotionInternalRefForOutline: refForOutline, children: react_1.default.createElement(tag, {
+                ...props,
+                ref: callbackRef,
+            }) }));
+    });
+    Inner.displayName = displayName;
+    const Wrapped = (0, wrap_in_schema_js_1.wrapInSchema)({
+        Component: Inner,
+        schema: interactiveElementSchema,
+        supportsEffects: false,
+    });
+    Wrapped.displayName = displayName;
+    (0, enable_sequence_stack_traces_js_1.addSequenceStackTraces)(Wrapped);
+    return Wrapped;
+};
+/**
+ * @description HTML and SVG elements that are registered in the Remotion Studio timeline and can be visually edited.
+ */
+exports.Interactive = {
+    A: makeInteractiveElement('a', '<Interactive.A>'),
+    Article: makeInteractiveElement('article', '<Interactive.Article>'),
+    Aside: makeInteractiveElement('aside', '<Interactive.Aside>'),
+    Button: makeInteractiveElement('button', '<Interactive.Button>'),
+    Circle: makeInteractiveElement('circle', '<Interactive.Circle>'),
+    Code: makeInteractiveElement('code', '<Interactive.Code>'),
+    Div: makeInteractiveElement('div', '<Interactive.Div>'),
+    Ellipse: makeInteractiveElement('ellipse', '<Interactive.Ellipse>'),
+    Em: makeInteractiveElement('em', '<Interactive.Em>'),
+    Footer: makeInteractiveElement('footer', '<Interactive.Footer>'),
+    G: makeInteractiveElement('g', '<Interactive.G>'),
+    H1: makeInteractiveElement('h1', '<Interactive.H1>'),
+    H2: makeInteractiveElement('h2', '<Interactive.H2>'),
+    H3: makeInteractiveElement('h3', '<Interactive.H3>'),
+    H4: makeInteractiveElement('h4', '<Interactive.H4>'),
+    H5: makeInteractiveElement('h5', '<Interactive.H5>'),
+    H6: makeInteractiveElement('h6', '<Interactive.H6>'),
+    Header: makeInteractiveElement('header', '<Interactive.Header>'),
+    Label: makeInteractiveElement('label', '<Interactive.Label>'),
+    Li: makeInteractiveElement('li', '<Interactive.Li>'),
+    Line: makeInteractiveElement('line', '<Interactive.Line>'),
+    Main: makeInteractiveElement('main', '<Interactive.Main>'),
+    Nav: makeInteractiveElement('nav', '<Interactive.Nav>'),
+    Ol: makeInteractiveElement('ol', '<Interactive.Ol>'),
+    P: makeInteractiveElement('p', '<Interactive.P>'),
+    Path: makeInteractiveElement('path', '<Interactive.Path>'),
+    Pre: makeInteractiveElement('pre', '<Interactive.Pre>'),
+    Rect: makeInteractiveElement('rect', '<Interactive.Rect>'),
+    Section: makeInteractiveElement('section', '<Interactive.Section>'),
+    Small: makeInteractiveElement('small', '<Interactive.Small>'),
+    Span: makeInteractiveElement('span', '<Interactive.Span>'),
+    Strong: makeInteractiveElement('strong', '<Interactive.Strong>'),
+    Svg: makeInteractiveElement('svg', '<Interactive.Svg>'),
+    Text: makeInteractiveElement('text', '<Interactive.Text>'),
+    Ul: makeInteractiveElement('ul', '<Interactive.Ul>'),
+};

package/dist/cjs/Sequence.d.ts

@@ -65,7 +65,7 @@ export type SequencePropsWithoutDuration = {
     /**
      * @deprecated For internal use only.
      */
-    readonly _remotionInternalRefForOutline?: React.RefObject<HTMLElement | null> | null;
+    readonly _remotionInternalRefForOutline?: React.RefObject<Element | null> | null;
 } & LayoutAndStyle;
 export type SequenceProps = {
     readonly durationInFrames?: number;

package/dist/cjs/SequenceManager.d.ts

@@ -1,15 +1,22 @@
 import React from 'react';
 import type { TSequence } from './CompositionManager.js';
-import type { CanUpdateSequencePropStatus, CodeValues, DragOverrideValue, GetDragOverrides, GetEffectDragOverrides } from './use-schema.js';
+import type { CanUpdateSequencePropStatus, DragOverrideValue, GetDragOverrides, GetEffectDragOverrides, PropStatuses } from './use-schema.js';
 export type SequenceManagerContext = {
     registerSequence: (seq: TSequence) => void;
     unregisterSequence: (id: string) => void;
     sequences: TSequence[];
 };
+export type SequenceManagerRef = {
+    current: TSequence[];
+};
 export type SequenceNodePath = Array<string | number>;
 export declare const SequenceManager: React.Context<SequenceManagerContext>;
-export type VisualModeCodeValues = {
-    codeValues: CodeValues;
+export declare const SequenceManagerRefContext: React.Context<SequenceManagerRef>;
+export type VisualModePropStatuses = {
+    propStatuses: PropStatuses;
+};
+export type VisualModePropStatusesRef = {
+    current: PropStatuses;
 };
 export type VisualModeDragOverrides = {
     getDragOverrides: GetDragOverrides;
@@ -20,7 +27,7 @@ export type VisualModeSetters = {
     clearDragOverrides: (nodePath: SequencePropsSubscriptionKey) => void;
     setEffectDragOverrides: (nodePath: SequencePropsSubscriptionKey, effectIndex: number, key: string, value: DragOverrideValue) => void;
     clearEffectDragOverrides: (nodePath: SequencePropsSubscriptionKey, effectIndex: number) => void;
-    setCodeValues: (nodePath: SequencePropsSubscriptionKey, values: (prev: CanUpdateSequencePropsResponse) => CanUpdateSequencePropsResponse) => void;
+    setPropStatuses: (nodePath: SequencePropsSubscriptionKey, values: (prev: CanUpdateSequencePropsResponse) => CanUpdateSequencePropsResponse) => void;
 };
 export type CanUpdateEffectPropsResponseTrue = {
     canUpdate: true;
@@ -48,7 +55,8 @@ export type CanUpdateSequencePropsResponseFalse = {
 };
 export type CanUpdateSequencePropsResponse = CanUpdateSequencePropsResponseTrue | CanUpdateSequencePropsResponseFalse;
 export declare const makeSequencePropsSubscriptionKey: (key: SequencePropsSubscriptionKey) => string;
-export declare const VisualModeCodeValuesContext: React.Context<VisualModeCodeValues>;
+export declare const VisualModePropStatusesContext: React.Context<VisualModePropStatuses>;
+export declare const VisualModePropStatusesRefContext: React.Context<VisualModePropStatusesRef>;
 export declare const VisualModeDragOverridesContext: React.Context<VisualModeDragOverrides>;
 export declare const VisualModeSettersContext: React.Context<VisualModeSetters>;
 export type SequencePropsSubscriptionKey = {

package/dist/cjs/SequenceManager.js

@@ -33,7 +33,7 @@ var __importStar = (this && this.__importStar) || (function () {
     };
 })();
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.SequenceManagerProvider = exports.VisualModeSettersContext = exports.VisualModeDragOverridesContext = exports.VisualModeCodeValuesContext = exports.makeSequencePropsSubscriptionKey = exports.SequenceManager = void 0;
+exports.SequenceManagerProvider = exports.VisualModeSettersContext = exports.VisualModeDragOverridesContext = exports.VisualModePropStatusesRefContext = exports.VisualModePropStatusesContext = exports.makeSequencePropsSubscriptionKey = exports.SequenceManagerRefContext = exports.SequenceManager = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = __importStar(require("react"));
 exports.SequenceManager = react_1.default.createContext({
@@ -45,12 +45,18 @@ exports.SequenceManager = react_1.default.createContext({
     },
     sequences: [],
 });
+exports.SequenceManagerRefContext = react_1.default.createContext({
+    current: [],
+});
 const makeSequencePropsSubscriptionKey = (key) => {
     return `${key.nodePath.join('.')}.${key.sequenceKeys.join('.')}.${key.effectKeys.map((keys) => keys.join('.')).join('.')}`;
 };
 exports.makeSequencePropsSubscriptionKey = makeSequencePropsSubscriptionKey;
-exports.VisualModeCodeValuesContext = react_1.default.createContext({
-    codeValues: {},
+exports.VisualModePropStatusesContext = react_1.default.createContext({
+    propStatuses: {},
+});
+exports.VisualModePropStatusesRefContext = react_1.default.createContext({
+    current: {},
 });
 exports.VisualModeDragOverridesContext = react_1.default.createContext({
     getDragOverrides: () => {
@@ -73,18 +79,22 @@ exports.VisualModeSettersContext = react_1.default.createContext({
     clearEffectDragOverrides: () => {
         throw new Error('VisualModeSettersContext not initialized');
     },
-    setCodeValues: () => {
+    setPropStatuses: () => {
         throw new Error('VisualModeSettersContext not initialized');
     },
 });
 const effectDragOverridesKey = (nodePath, effectIndex) => `${(0, exports.makeSequencePropsSubscriptionKey)(nodePath)}.effects.${effectIndex}`;
 const SequenceManagerProvider = ({ children }) => {
     const [sequences, setSequences] = (0, react_1.useState)([]);
+    const sequencesRef = (0, react_1.useRef)(sequences);
+    sequencesRef.current = sequences;
     const [dragOverrides, setControlOverrides] = (0, react_1.useState)({});
     const controlOverridesRef = (0, react_1.useRef)(dragOverrides);
     controlOverridesRef.current = dragOverrides;
     const [effectDragOverridesState, setEffectDragOverridesState] = (0, react_1.useState)({});
-    const [codeValues, setCodeValuesMapState] = (0, react_1.useState)({});
+    const [propStatuses, setPropStatusesMapState] = (0, react_1.useState)({});
+    const propStatusesRef = (0, react_1.useRef)(propStatuses);
+    propStatusesRef.current = propStatuses;
     const setDragOverrides = (0, react_1.useCallback)((nodePath, key, value) => {
         setControlOverrides((prev) => ({
             ...prev,
@@ -128,8 +138,8 @@ const SequenceManagerProvider = ({ children }) => {
             return next;
         });
     }, []);
-    const setCodeValues = (0, react_1.useCallback)((nodePath, values) => {
-        setCodeValuesMapState((prev) => {
+    const setPropStatuses = (0, react_1.useCallback)((nodePath, values) => {
+        setPropStatusesMapState((prev) => {
             const key = (0, exports.makeSequencePropsSubscriptionKey)(nodePath);
             const prevKey = prev[key];
             const newKey = values(prevKey);
@@ -162,11 +172,11 @@ const SequenceManagerProvider = ({ children }) => {
         var _a;
         return ((_a = effectDragOverridesState[effectDragOverridesKey(nodePath, effectIndex)]) !== null && _a !== void 0 ? _a : {});
     }, [effectDragOverridesState]);
-    const codeValuesContext = (0, react_1.useMemo)(() => {
+    const propStatusesContext = (0, react_1.useMemo)(() => {
         return {
-            codeValues,
+            propStatuses,
         };
-    }, [codeValues]);
+    }, [propStatuses]);
     const dragOverridesContext = (0, react_1.useMemo)(() => {
         return {
             getDragOverrides,
@@ -179,15 +189,15 @@ const SequenceManagerProvider = ({ children }) => {
             clearDragOverrides,
             setEffectDragOverrides,
             clearEffectDragOverrides,
-            setCodeValues,
+            setPropStatuses,
         };
     }, [
         setDragOverrides,
         clearDragOverrides,
         setEffectDragOverrides,
         clearEffectDragOverrides,
-        setCodeValues,
+        setPropStatuses,
     ]);
-    return (jsx_runtime_1.jsx(exports.SequenceManager.Provider, { value: sequenceContext, children: jsx_runtime_1.jsx(exports.VisualModeCodeValuesContext.Provider, { value: codeValuesContext, children: jsx_runtime_1.jsx(exports.VisualModeDragOverridesContext.Provider, { value: dragOverridesContext, children: jsx_runtime_1.jsx(exports.VisualModeSettersContext.Provider, { value: settersContext, children: children }) }) }) }));
+    return (jsx_runtime_1.jsx(exports.SequenceManagerRefContext.Provider, { value: sequencesRef, children: jsx_runtime_1.jsx(exports.SequenceManager.Provider, { value: sequenceContext, children: jsx_runtime_1.jsx(exports.VisualModePropStatusesRefContext.Provider, { value: propStatusesRef, children: jsx_runtime_1.jsx(exports.VisualModePropStatusesContext.Provider, { value: propStatusesContext, children: jsx_runtime_1.jsx(exports.VisualModeDragOverridesContext.Provider, { value: dragOverridesContext, children: jsx_runtime_1.jsx(exports.VisualModeSettersContext.Provider, { value: settersContext, children: children }) }) }) }) }) }));
 };
 exports.SequenceManagerProvider = SequenceManagerProvider;

package/dist/cjs/animated-image/AnimatedImage.js

@@ -25,7 +25,7 @@ const animatedImageSchema = {
         max: 10,
         step: 0.1,
         default: 1,
-        description: 'Playback Rate',
+        description: 'Playback rate',
         hiddenFromList: false,
         keyframable: false,
     },

package/dist/cjs/calculate-media-duration.js

@@ -12,6 +12,6 @@ const calculateMediaDuration = ({ trimAfter, mediaDurationInFrames, playbackRate
         duration -= trimBefore;
     }
     const actualDuration = duration / playbackRate;
-    return Math.floor(actualDuration);
+    return Number(actualDuration.toFixed(10));
 };
 exports.calculateMediaDuration = calculateMediaDuration;

package/dist/cjs/canvas-image/CanvasImage.d.ts

@@ -2,6 +2,12 @@ import { type RefObject } from 'react';
 import type { EffectsProp } from '../effects/effect-types.js';
 import type { CanvasImageCanvasProps } from './props.js';
 export declare const canvasImageSchema: {
+    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;

package/dist/cjs/effects/use-memoized-effects.d.ts

@@ -1,6 +1,6 @@
 import type { CannotUpdateEffectReason, CannotUpdateSequenceReason } from '../SequenceManager.js';
 import { type SequencePropsSubscriptionKey } from '../SequenceManager.js';
-import { type CanUpdateSequencePropStatus, type CodeValues } from '../use-schema.js';
+import { type CanUpdateSequencePropStatus, type PropStatuses } from '../use-schema.js';
 import type { EffectDefinition, EffectDefinitionAndStack, EffectDescriptor } from './effect-types.js';
 export declare const useMemoizedEffectDefinitions: (effects: readonly EffectDescriptor<unknown>[]) => readonly EffectDefinition<unknown>[];
 type EffectStatus = {
@@ -13,13 +13,13 @@ type EffectStatus = {
     type: 'can-update-effect';
     props: Record<string, CanUpdateSequencePropStatus>;
 };
-export declare const getEffectCodeValuesCtx: ({ codeValues, nodePath, effectIndex, }: {
-    codeValues: CodeValues;
+export declare const getEffectPropStatusesCtx: ({ propStatuses, nodePath, effectIndex, }: {
+    propStatuses: PropStatuses;
     nodePath: SequencePropsSubscriptionKey;
     effectIndex: number;
 }) => EffectStatus;
-export declare const getCodeValuesCtx: (codeValues: CodeValues, nodePath: SequencePropsSubscriptionKey) => Record<string, CanUpdateSequencePropStatus> | undefined;
-export type GetCodeValuesType = typeof getCodeValuesCtx;
+export declare const getPropStatusesCtx: (propStatuses: PropStatuses, nodePath: SequencePropsSubscriptionKey) => Record<string, CanUpdateSequencePropStatus> | undefined;
+export type GetPropStatusesType = typeof getPropStatusesCtx;
 export declare const useMemoizedEffects: ({ effects, overrideId, }: {
     effects: readonly EffectDescriptor<unknown>[];
     readonly overrideId: string | null;

package/dist/cjs/effects/use-memoized-effects.js

@@ -1,21 +1,21 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useMemoizedEffects = exports.getCodeValuesCtx = exports.getEffectCodeValuesCtx = exports.useMemoizedEffectDefinitions = void 0;
+exports.useMemoizedEffects = exports.getPropStatusesCtx = exports.getEffectPropStatusesCtx = exports.useMemoizedEffectDefinitions = void 0;
 const react_1 = require("react");
 const get_effective_visual_mode_value_js_1 = require("../get-effective-visual-mode-value.js");
+const interpolate_keyframed_status_js_1 = require("../interpolate-keyframed-status.js");
 const sequence_node_path_js_1 = require("../sequence-node-path.js");
 const SequenceManager_js_1 = require("../SequenceManager.js");
-const SequenceManager_js_2 = require("../SequenceManager.js");
 const use_current_frame_js_1 = require("../use-current-frame.js");
-const mergeOverrides = ({ descriptor, codeOverrides, dragOverrides, frame, }) => {
-    if (!codeOverrides && !dragOverrides) {
+const mergeOverrides = ({ descriptor, propStatusOverrides, dragOverrides, frame, }) => {
+    if (!propStatusOverrides && !dragOverrides) {
         return { params: descriptor.params, effectKey: descriptor.effectKey };
     }
     const merged = {
         ...descriptor.params,
     };
-    if (codeOverrides) {
-        for (const [key, value] of Object.entries(codeOverrides)) {
+    if (propStatusOverrides) {
+        for (const [key, value] of Object.entries(propStatusOverrides)) {
             if (value !== undefined) {
                 merged[key] = value;
             }
@@ -37,16 +37,27 @@ const mergeOverrides = ({ descriptor, codeOverrides, dragOverrides, frame, }) =>
         effectKey: descriptor.definition.calculateKey(merged),
     };
 };
-const extractCodeOverrides = (propStatus) => {
+const resolvePropStatusOverrides = (propStatus, frame) => {
     if (!propStatus) {
         return null;
     }
     const out = {};
     let hasAny = false;
     for (const [key, status] of Object.entries(propStatus)) {
-        if (status.status !== 'computed') {
+        if (status.status === 'static') {
             out[key] = status.codeValue;
             hasAny = true;
+            continue;
+        }
+        if (status.status === 'keyframed') {
+            const value = (0, interpolate_keyframed_status_js_1.interpolateKeyframedStatus)({
+                frame,
+                status,
+            });
+            if (value !== null) {
+                out[key] = value;
+                hasAny = true;
+            }
         }
     }
     return hasAny ? out : null;
@@ -65,8 +76,8 @@ const useMemoizedEffectDefinitions = (effects) => {
     return definitions;
 };
 exports.useMemoizedEffectDefinitions = useMemoizedEffectDefinitions;
-const getEffectCodeValuesCtx = ({ codeValues, nodePath, effectIndex, }) => {
-    const status = codeValues[(0, SequenceManager_js_1.makeSequencePropsSubscriptionKey)(nodePath)];
+const getEffectPropStatusesCtx = ({ propStatuses, nodePath, effectIndex, }) => {
+    const status = propStatuses[(0, SequenceManager_js_1.makeSequencePropsSubscriptionKey)(nodePath)];
     if (!status) {
         return { type: 'cannot-update-sequence', reason: 'not-found' };
     }
@@ -82,9 +93,9 @@ const getEffectCodeValuesCtx = ({ codeValues, nodePath, effectIndex, }) => {
     }
     return { type: 'can-update-effect', props: effect.props };
 };
-exports.getEffectCodeValuesCtx = getEffectCodeValuesCtx;
-const getCodeValuesCtx = (codeValues, nodePath) => {
-    const status = codeValues[(0, SequenceManager_js_1.makeSequencePropsSubscriptionKey)(nodePath)];
+exports.getEffectPropStatusesCtx = getEffectPropStatusesCtx;
+const getPropStatusesCtx = (propStatuses, nodePath) => {
+    const status = propStatuses[(0, SequenceManager_js_1.makeSequencePropsSubscriptionKey)(nodePath)];
     if (!status) {
         return undefined;
     }
@@ -93,12 +104,12 @@ const getCodeValuesCtx = (codeValues, nodePath) => {
     }
     return status.props;
 };
-exports.getCodeValuesCtx = getCodeValuesCtx;
+exports.getPropStatusesCtx = getPropStatusesCtx;
 const useMemoizedEffects = ({ effects, overrideId, }) => {
     var _a;
     const previousRef = (0, react_1.useRef)(null);
-    const { codeValues } = (0, react_1.useContext)(SequenceManager_js_2.VisualModeCodeValuesContext);
-    const { getEffectDragOverrides } = (0, react_1.useContext)(SequenceManager_js_2.VisualModeDragOverridesContext);
+    const { propStatuses } = (0, react_1.useContext)(SequenceManager_js_1.VisualModePropStatusesContext);
+    const { getEffectDragOverrides } = (0, react_1.useContext)(SequenceManager_js_1.VisualModeDragOverridesContext);
     const frame = (0, use_current_frame_js_1.useCurrentFrame)();
     const { overrideIdToNodePathMappings } = (0, react_1.useContext)(sequence_node_path_js_1.OverrideIdsToNodePathsGettersContext);
     const previous = previousRef.current;
@@ -113,19 +124,19 @@ const useMemoizedEffects = ({ effects, overrideId, }) => {
                 effectKey: descriptor.effectKey,
             };
         }
-        const effectStatus = (0, exports.getEffectCodeValuesCtx)({
-            codeValues,
+        const effectStatus = (0, exports.getEffectPropStatusesCtx)({
+            propStatuses,
             nodePath,
             effectIndex: index,
         });
-        const codeOverrides = effectStatus.type === 'can-update-effect'
-            ? extractCodeOverrides(effectStatus.props)
+        const propStatusOverrides = effectStatus.type === 'can-update-effect'
+            ? resolvePropStatusOverrides(effectStatus.props, frame)
             : null;
         const dragOverridesMap = getEffectDragOverrides(nodePath, index);
         const dragOverrides = Object.keys(dragOverridesMap).length === 0 ? null : dragOverridesMap;
         const { params, effectKey } = mergeOverrides({
             descriptor,
-            codeOverrides,
+            propStatusOverrides,
             dragOverrides,
             frame,
         });

package/dist/cjs/get-effective-visual-mode-value.d.ts

@@ -9,8 +9,8 @@ export declare const resolveDragOverrideValue: ({ dragOverrideValue, frame, }: {
     dragOverrideValue: DragOverrideValue | undefined;
     frame: number | null;
 }) => ResolvedDragOverrideValue;
-export declare const getEffectiveVisualModeValue: ({ codeValue, dragOverrideValue, defaultValue, frame, shouldResortToDefaultValueIfUndefined, }: {
-    codeValue: CanUpdateSequencePropStatusKeyframed | CanUpdateSequencePropStatusStatic;
+export declare const getEffectiveVisualModeValue: ({ propStatus, dragOverrideValue, defaultValue, frame, shouldResortToDefaultValueIfUndefined, }: {
+    propStatus: CanUpdateSequencePropStatusKeyframed | CanUpdateSequencePropStatusStatic;
     dragOverrideValue: DragOverrideValue | undefined;
     defaultValue: unknown;
     frame?: number | null | undefined;

package/dist/cjs/get-effective-visual-mode-value.js

@@ -22,7 +22,7 @@ const resolveDragOverrideValue = ({ dragOverrideValue, frame, }) => {
     return { type: 'resolved', value: interpolated };
 };
 exports.resolveDragOverrideValue = resolveDragOverrideValue;
-const getEffectiveVisualModeValue = ({ codeValue, dragOverrideValue, defaultValue, frame = null, shouldResortToDefaultValueIfUndefined = false, }) => {
+const getEffectiveVisualModeValue = ({ propStatus, dragOverrideValue, defaultValue, frame = null, shouldResortToDefaultValueIfUndefined = false, }) => {
     const dragOverride = (0, exports.resolveDragOverrideValue)({
         dragOverrideValue,
         frame,
@@ -30,16 +30,19 @@ const getEffectiveVisualModeValue = ({ codeValue, dragOverrideValue, defaultValu
     if (dragOverride.type === 'resolved' && dragOverride.value !== undefined) {
         return dragOverride.value;
     }
-    if (codeValue.status === 'keyframed' && frame !== null) {
-        return (0, interpolate_keyframed_status_1.interpolateKeyframedStatus)({
-            frame,
-            status: codeValue,
-        });
+    if (propStatus.status === 'keyframed') {
+        if (frame !== null) {
+            return (0, interpolate_keyframed_status_1.interpolateKeyframedStatus)({
+                frame,
+                status: propStatus,
+            });
+        }
+        return shouldResortToDefaultValueIfUndefined ? defaultValue : undefined;
     }
-    if (codeValue.codeValue === undefined &&
+    if (propStatus.codeValue === undefined &&
         shouldResortToDefaultValueIfUndefined) {
         return defaultValue;
     }
-    return codeValue.codeValue;
+    return propStatus.codeValue;
 };
 exports.getEffectiveVisualModeValue = getEffectiveVisualModeValue;

package/dist/cjs/index.d.ts

@@ -127,6 +127,7 @@ export { getRemotionEnvironment } from './get-remotion-environment.js';
 export { getStaticFiles, StaticFile } from './get-static-files.js';
 export * from './IFrame.js';
 export { Img, ImgProps } from './Img.js';
+export { Interactive, type InteractiveProps } from './Interactive.js';
 export * from './internals.js';
 export { interpolateColors, type InterpolateColorsOptions, } from './interpolate-colors.js';
 export { LogLevel } from './log.js';

package/dist/cjs/index.js

@@ -14,7 +14,7 @@ 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.Config = exports.Experimental = exports.watchStaticFile = exports.MediaPlaybackError = exports.Video = exports.OffthreadVideo = exports.Html5Video = exports.useRemotionEnvironment = exports.usePixelDensity = exports.useDelayRender = exports.useCurrentScale = exports.useCurrentFrame = exports.useBufferState = exports.staticFile = exports.Series = exports.Sequence = exports.registerRoot = exports.prefetch = exports.random = exports.interpolate = exports.assertValidInterpolatePosterizeOption = exports.assertValidInterpolateEasingOption = exports.Loop = exports.interpolateColors = exports.Img = exports.getStaticFiles = exports.getRemotionEnvironment = exports.delayRender = exports.continueRender = exports.getInputProps = exports.Composition = exports.CanvasImage = exports.isHtmlInCanvasSupported = exports.HtmlInCanvas = exports.HTML_IN_CANVAS_UNSUPPORTED_MESSAGE = exports.Solid = exports.cancelRender = exports.Html5Audio = exports.Audio = exports.Artifact = void 0;
+exports.Config = exports.Experimental = exports.watchStaticFile = exports.MediaPlaybackError = exports.Video = exports.OffthreadVideo = exports.Html5Video = exports.useRemotionEnvironment = exports.usePixelDensity = exports.useDelayRender = exports.useCurrentScale = exports.useCurrentFrame = exports.useBufferState = exports.staticFile = exports.Series = exports.Sequence = exports.registerRoot = exports.prefetch = exports.random = exports.interpolate = exports.assertValidInterpolatePosterizeOption = exports.assertValidInterpolateEasingOption = exports.Loop = exports.interpolateColors = exports.Interactive = exports.Img = exports.getStaticFiles = exports.getRemotionEnvironment = exports.delayRender = exports.continueRender = exports.getInputProps = exports.Composition = exports.CanvasImage = exports.isHtmlInCanvasSupported = exports.HtmlInCanvas = exports.HTML_IN_CANVAS_UNSUPPORTED_MESSAGE = exports.Solid = exports.cancelRender = exports.Html5Audio = exports.Audio = exports.Artifact = void 0;
 require("./_check-rsc.js");
 require("./asset-types.js");
 const Clipper_js_1 = require("./Clipper.js");
@@ -64,6 +64,8 @@ Object.defineProperty(exports, "getStaticFiles", { enumerable: true, get: functi
 __exportStar(require("./IFrame.js"), exports);
 const Img_js_1 = require("./Img.js");
 Object.defineProperty(exports, "Img", { enumerable: true, get: function () { return Img_js_1.Img; } });
+const Interactive_js_1 = require("./Interactive.js");
+Object.defineProperty(exports, "Interactive", { enumerable: true, get: function () { return Interactive_js_1.Interactive; } });
 __exportStar(require("./internals.js"), exports);
 const interpolate_colors_js_1 = require("./interpolate-colors.js");
 Object.defineProperty(exports, "interpolateColors", { enumerable: true, get: function () { return interpolate_colors_js_1.interpolateColors; } });