remotion 4.0.478 → 4.0.481

package/dist/esm/index.mjs

@@ -1291,7 +1291,7 @@ var addSequenceStackTraces = (component) => {
 };
 
 // src/version.ts
-var VERSION = "4.0.478";
+var VERSION = "4.0.481";
 
 // src/multiple-versions-warning.ts
 var checkMultipleRemotionVersions = () => {
@@ -1712,14 +1712,8 @@ var Freeze = ({
   });
 };
 
-// src/PremountContext.tsx
-import { createContext as createContext14 } from "react";
-var PremountContext = createContext14({
-  premountFramesRemaining: 0
-});
-
-// src/sequence-field-schema.ts
-var sequenceVisualStyleSchema = {
+// src/interactivity-schema.ts
+var transformSchema = {
   "style.transformOrigin": {
     type: "transform-origin",
     step: 1,
@@ -1755,7 +1749,8 @@ var sequenceVisualStyleSchema = {
     hiddenFromList: false
   }
 };
-var sequencePremountSchema = {
+var sequenceVisualStyleSchema = transformSchema;
+var premountSchema = {
   premountFor: {
     type: "number",
     default: 0,
@@ -1778,9 +1773,10 @@ var sequencePremountSchema = {
     type: "hidden"
   }
 };
+var sequencePremountSchema = premountSchema;
 var sequenceStyleSchema = {
-  ...sequenceVisualStyleSchema,
-  ...sequencePremountSchema
+  ...transformSchema,
+  ...premountSchema
 };
 var hiddenField = {
   type: "boolean",
@@ -1818,12 +1814,16 @@ var freezeField = {
   step: 1,
   hiddenFromList: true
 };
-var sequenceSchema = extendSchemaWithSequenceName({
-  hidden: hiddenField,
-  showInTimeline: showInTimelineField,
+var baseSchema = {
+  durationInFrames: durationInFramesField,
   from: fromField,
   freeze: freezeField,
-  durationInFrames: durationInFramesField,
+  hidden: hiddenField,
+  name: sequenceNameField,
+  showInTimeline: showInTimelineField
+};
+var sequenceSchema = {
+  ...baseSchema,
   layout: {
     type: "enum",
     default: "absolute-fill",
@@ -1833,14 +1833,18 @@ var sequenceSchema = extendSchemaWithSequenceName({
       none: {}
     }
   }
-});
-var sequenceSchemaWithoutFrom = extendSchemaWithSequenceName({
-  hidden: hiddenField,
-  showInTimeline: showInTimelineField,
-  freeze: freezeField,
+};
+var baseSchemaWithoutFrom = {
   durationInFrames: durationInFramesField,
+  freeze: freezeField,
+  hidden: hiddenField,
+  name: sequenceNameField,
+  showInTimeline: showInTimelineField
+};
+var sequenceSchemaWithoutFrom = {
+  ...baseSchemaWithoutFrom,
   layout: sequenceSchema.layout
-});
+};
 var sequenceSchemaDefaultLayoutNone = {
   ...sequenceSchema,
   layout: {
@@ -1849,6 +1853,12 @@ var sequenceSchemaDefaultLayoutNone = {
   }
 };
 
+// src/PremountContext.tsx
+import { createContext as createContext14 } from "react";
+var PremountContext = createContext14({
+  premountFramesRemaining: 0
+});
+
 // src/SequenceManager.tsx
 import React11, { useCallback as useCallback5, useMemo as useMemo12, useRef as useRef4, useState as useState3 } from "react";
 import { jsx as jsx10 } from "react/jsx-runtime";
@@ -2058,7 +2068,7 @@ var useRequireToBeInsideSeries = () => {
 // src/v5-flag.ts
 var ENABLE_V5_BREAKING_CHANGES = false;
 
-// src/wrap-in-schema.ts
+// src/with-interactivity-schema.ts
 import React13, { forwardRef as forwardRef2, useContext as useContext16, useMemo as useMemo13, useState as useState4 } from "react";
 
 // src/delete-nested-key.ts
@@ -3572,10 +3582,21 @@ var interpolateColors = (input, inputRange, outputRange, options) => {
 
 // src/interpolate-keyframed-status.ts
 var easingToFn = (e) => {
-  if (e === "linear") {
-    return Easing.linear;
+  switch (e.type) {
+    case "linear":
+      return Easing.linear;
+    case "spring":
+      return Easing.spring({
+        damping: e.damping,
+        mass: e.mass,
+        overshootClamping: e.overshootClamping,
+        stiffness: e.stiffness
+      });
+    case "bezier":
+      return bezier(e.x1, e.y1, e.x2, e.y2);
+    default:
+      throw new TypeError(`Unsupported easing: ${JSON.stringify(e)}`);
   }
-  return bezier(e[0], e[1], e[2], e[3]);
 };
 var interpolateKeyframedStatus = ({
   frame,
@@ -3910,6 +3931,9 @@ var findPropsToDelete = ({
 };
 
 // src/use-schema.ts
+var DEFAULT_LINEAR_EASING = {
+  type: "linear"
+};
 var makeStaticDragOverride = (value) => {
   return { type: "static", value };
 };
@@ -3922,7 +3946,7 @@ var makeKeyframedDragOverride = ({
   const keyframes = existingIndex === -1 ? [...status.keyframes, { frame, value }].sort((first, second) => first.frame - second.frame) : status.keyframes.map((keyframe, index) => index === existingIndex ? { frame, value } : keyframe);
   const easing = [...status.easing];
   while (easing.length < keyframes.length - 1) {
-    easing.push("linear");
+    easing.push(DEFAULT_LINEAR_EASING);
   }
   if (easing.length > keyframes.length - 1) {
     easing.length = keyframes.length - 1;
@@ -4031,7 +4055,7 @@ var computeEffectiveSchemaValuesDotNotation = ({
   return { merged, propsToDelete };
 };
 
-// src/wrap-in-schema.ts
+// src/with-interactivity-schema.ts
 var getNestedValue = (obj, key) => {
   const parts = key.split(".");
   let current = obj;
@@ -4082,8 +4106,9 @@ var mergeValues = ({
   return merged;
 };
 var stackToOverrideMap = {};
-var wrapInSchema = ({
+var withInteractivitySchema = ({
   Component,
+  componentName,
   componentIdentity,
   schema,
   supportsEffects
@@ -4096,7 +4121,7 @@ var wrapInSchema = ({
     if (!env.isStudio || env.isReadOnlyStudio || env.isRendering) {
       return React13.createElement(Component, {
         ...props,
-        _experimentalControls: null,
+        controls: null,
         ref
       });
     }
@@ -4104,7 +4129,7 @@ var wrapInSchema = ({
     const { getDragOverrides } = useContext16(VisualModeDragOverridesContext);
     const nodePathMapping = useContext16(OverrideIdsToNodePathsGettersContext);
     const frame = useCurrentFrame();
-    if (props._experimentalControls) {
+    if (props.controls) {
       return React13.createElement(Component, {
         ...props,
         ref
@@ -4132,7 +4157,8 @@ var wrapInSchema = ({
         currentRuntimeValueDotNotation,
         overrideId,
         supportsEffects,
-        componentIdentity
+        componentIdentity,
+        componentName
       };
     }, [currentRuntimeValueDotNotation, overrideId]);
     const { merged: valuesDotNotation, propsToDelete } = useMemo13(() => {
@@ -4159,11 +4185,11 @@ var wrapInSchema = ({
     });
     return React13.createElement(Component, {
       ...mergedProps,
-      _experimentalControls: controls,
+      controls,
       ref
     });
   });
-  Wrapped.displayName = `wrapInSchema(${Component.displayName || Component.name || "Component"})`;
+  Wrapped.displayName = `withInteractivitySchema(${Component.displayName || Component.name || "Component"})`;
   return Wrapped;
 };
 
@@ -4180,7 +4206,7 @@ var RegularSequenceRefForwardingFunction = ({
   width,
   showInTimeline = true,
   hidden = false,
-  _experimentalControls: controls,
+  controls,
   _remotionInternalEffects,
   _remotionInternalLoopDisplay: loopDisplay,
   _remotionInternalStack: stack,
@@ -4188,7 +4214,7 @@ var RegularSequenceRefForwardingFunction = ({
   _remotionInternalPremountDisplay: premountDisplay,
   _remotionInternalPostmountDisplay: postmountDisplay,
   _remotionInternalIsMedia: isMedia,
-  _remotionInternalRefForOutline: passedRefForOutline,
+  outlineRef: passedRefForOutline,
   ...other
 }, ref) => {
   const { layout = "absolute-fill" } = other;
@@ -4515,14 +4541,16 @@ var SequenceRefForwardingFunction = (props, ref) => {
 };
 var SequenceInner = forwardRef3(SequenceRefForwardingFunction);
 var SequenceWithoutSchema = SequenceInner;
-var Sequence = wrapInSchema({
+var Sequence = withInteractivitySchema({
   Component: SequenceInner,
+  componentName: "<Sequence>",
   componentIdentity: "dev.remotion.remotion.Sequence",
   schema: sequenceSchema,
   supportsEffects: false
 });
-var SequenceWithoutFrom = wrapInSchema({
+var SequenceWithoutFrom = withInteractivitySchema({
   Component: SequenceInner,
+  componentName: "<Sequence>",
   componentIdentity: null,
   schema: sequenceSchemaWithoutFrom,
   supportsEffects: false
@@ -5098,9 +5126,7 @@ var resolveAnimatedImageSource = (src) => {
 // src/animated-image/AnimatedImage.tsx
 import { jsx as jsx14 } from "react/jsx-runtime";
 var animatedImageSchema = {
-  durationInFrames: durationInFramesField,
-  from: fromField,
-  freeze: freezeField,
+  ...baseSchema,
   playbackRate: {
     type: "number",
     min: 0,
@@ -5111,8 +5137,7 @@ var animatedImageSchema = {
     hiddenFromList: false,
     keyframable: false
   },
-  ...sequenceVisualStyleSchema,
-  hidden: hiddenField
+  ...transformSchema
 };
 var AnimatedImageContent = forwardRef4(({
   src,
@@ -5257,7 +5282,7 @@ var AnimatedImageInner = ({
   durationInFrames,
   requestInit,
   effects = [],
-  _experimentalControls: controls,
+  controls,
   ref,
   ...sequenceProps
 }) => {
@@ -5286,10 +5311,10 @@ var AnimatedImageInner = ({
     durationInFrames: resolvedDuration,
     name: "<AnimatedImage>",
     _remotionInternalDocumentationLink: "https://www.remotion.dev/docs/animatedimage",
-    _experimentalControls: controls,
+    controls,
     _remotionInternalEffects: memoizedEffectDefinitions,
     ...sequenceProps,
-    _remotionInternalRefForOutline: actualRef,
+    outlineRef: actualRef,
     children: /* @__PURE__ */ jsx14(AnimatedImageContent, {
       ...animatedImageProps,
       ref: actualRef,
@@ -5298,14 +5323,46 @@ var AnimatedImageInner = ({
     })
   });
 };
-var AnimatedImage = wrapInSchema({
+var AnimatedImage = withInteractivitySchema({
   Component: AnimatedImageInner,
+  componentName: "<AnimatedImage>",
   componentIdentity: "dev.remotion.remotion.AnimatedImage",
   schema: animatedImageSchema,
   supportsEffects: true
 });
 AnimatedImage.displayName = "AnimatedImage";
 addSequenceStackTraces(AnimatedImage);
+// src/effects/create-effect.ts
+var disabledEffectField = {
+  type: "boolean",
+  default: false,
+  description: "Disabled"
+};
+var createEffect = (definition) => {
+  const { calculateKey: userCalculateKey, validateParams } = definition;
+  const widened = {
+    ...definition,
+    documentationLink: definition.documentationLink ?? null,
+    calculateKey: (params) => {
+      const disabled = params.disabled ?? false;
+      return `${userCalculateKey(params)}-disabled-${disabled}`;
+    },
+    schema: {
+      disabled: disabledEffectField,
+      ...definition.schema
+    }
+  };
+  const factory = (params = {}) => {
+    validateParams(params);
+    return {
+      definition: widened,
+      params,
+      effectKey: widened.calculateKey(params),
+      memoized: false
+    };
+  };
+  return factory;
+};
 // src/Artifact.tsx
 import { useContext as useContext18, useLayoutEffect as useLayoutEffect4, useState as useState8 } from "react";
 
@@ -8447,9 +8504,7 @@ var resolveSolidPixelDensity = (pixelDensity) => {
   return pixelDensity;
 };
 var solidSchema = {
-  durationInFrames: durationInFramesField,
-  from: fromField,
-  freeze: freezeField,
+  ...baseSchema,
   color: {
     type: "color",
     default: "transparent",
@@ -8471,8 +8526,7 @@ var solidSchema = {
     description: "Height",
     hiddenFromList: false
   },
-  ...sequenceVisualStyleSchema,
-  hidden: hiddenField
+  ...transformSchema
 };
 var SolidInner = ({
   color,
@@ -8579,7 +8633,7 @@ var SolidInner = ({
 };
 var SolidOuter = forwardRef8(({
   effects = [],
-  _experimentalControls: controls,
+  controls,
   color,
   height,
   width,
@@ -8605,11 +8659,11 @@ var SolidOuter = forwardRef8(({
     freeze,
     hidden,
     showInTimeline,
-    _experimentalControls: controls,
+    controls,
     _remotionInternalEffects: memoizedEffectDefinitions,
     durationInFrames,
     name: name ?? "<Solid>",
-    _remotionInternalRefForOutline: actualRef,
+    outlineRef: actualRef,
     _remotionInternalDocumentationLink: "https://www.remotion.dev/docs/solid",
     ...props2,
     children: /* @__PURE__ */ jsx24(SolidInner, {
@@ -8625,8 +8679,9 @@ var SolidOuter = forwardRef8(({
     })
   });
 });
-var Solid = wrapInSchema({
+var Solid = withInteractivitySchema({
   Component: SolidOuter,
+  componentName: "<Solid>",
   componentIdentity: "dev.remotion.remotion.Solid",
   schema: solidSchema,
   supportsEffects: true
@@ -8913,7 +8968,7 @@ var HtmlInCanvasInner = forwardRef9(({
   onPaint,
   onInit,
   pixelDensity,
-  _experimentalControls: controls,
+  controls,
   style,
   durationInFrames,
   name,
@@ -8935,9 +8990,9 @@ var HtmlInCanvasInner = forwardRef9(({
     durationInFrames: resolvedDuration,
     name: name ?? "<HtmlInCanvas>",
     _remotionInternalDocumentationLink: "https://www.remotion.dev/docs/remotion/html-in-canvas",
-    _experimentalControls: controls,
+    controls,
     _remotionInternalEffects: memoizedEffectDefinitions,
-    _remotionInternalRefForOutline: actualRef,
+    outlineRef: actualRef,
     layout: "none",
     ...sequenceProps,
     children: /* @__PURE__ */ jsx25(HtmlInCanvasContent, {
@@ -8956,14 +9011,12 @@ var HtmlInCanvasInner = forwardRef9(({
 });
 HtmlInCanvasInner.displayName = "HtmlInCanvas";
 var htmlInCanvasSchema = {
-  durationInFrames: durationInFramesField,
-  from: fromField,
-  freeze: freezeField,
-  ...sequenceVisualStyleSchema,
-  hidden: hiddenField
+  ...baseSchema,
+  ...transformSchema
 };
-var HtmlInCanvasWrapped = wrapInSchema({
+var HtmlInCanvasWrapped = withInteractivitySchema({
   Component: HtmlInCanvasInner,
+  componentName: "<HtmlInCanvas>",
   componentIdentity: "dev.remotion.remotion.HtmlInCanvas",
   schema: htmlInCanvasSchema,
   supportsEffects: true
@@ -8996,9 +9049,7 @@ function truncateSrcForLabel(src) {
 // src/canvas-image/CanvasImage.tsx
 import { jsx as jsx26 } from "react/jsx-runtime";
 var canvasImageSchema = {
-  durationInFrames: durationInFramesField,
-  from: fromField,
-  freeze: freezeField,
+  ...baseSchema,
   fit: {
     type: "enum",
     default: "fill",
@@ -9009,8 +9060,7 @@ var canvasImageSchema = {
       cover: {}
     }
   },
-  ...sequenceVisualStyleSchema,
-  hidden: hiddenField
+  ...transformSchema
 };
 var makeAbortError = () => {
   if (typeof DOMException !== "undefined") {
@@ -9091,6 +9141,7 @@ var CanvasImageContent = forwardRef10(({
   const { delayRender: delayRender2, continueRender: continueRender2, cancelRender: cancelRender2 } = useDelayRender();
   const { delayPlayback } = useBufferState();
   const [outputCanvas, setOutputCanvas] = useState16(null);
+  const [loadedImage, setLoadedImage] = useState16(null);
   const actualSrc = usePreload(src);
   const chainState = useEffectChainState();
   const memoizedEffects = useMemoizedEffects({
@@ -9116,9 +9167,6 @@ var CanvasImageContent = forwardRef10(({
     }
   }, [ref, refForOutline]);
   useEffect17(() => {
-    if (!outputCanvas || !sourceCanvas) {
-      return;
-    }
     const isPremounting = Boolean(sequenceContext?.premounting);
     const isPostmounting = Boolean(sequenceContext?.postmounting);
     const handle = delayRender2(`Rendering <CanvasImage> with src="${truncateSrcForLabel(actualSrc)}"`, {
@@ -9133,6 +9181,7 @@ var CanvasImageContent = forwardRef10(({
     let continued = false;
     let errorCount = 0;
     let timeoutId = null;
+    setLoadedImage(null);
     const continueRenderOnce = () => {
       if (continued) {
         return;
@@ -9146,30 +9195,9 @@ var CanvasImageContent = forwardRef10(({
         if (cancelled) {
           return;
         }
-        const canvasWidth = width ?? image.width;
-        const canvasHeight = height ?? image.height;
-        const sourceContext = sourceCanvas.getContext("2d", {
-          colorSpace: "srgb"
-        });
-        if (!sourceContext) {
-          throw new Error("Could not get 2D context for <CanvasImage> source canvas");
-        }
-        sourceCanvas.width = canvasWidth;
-        sourceCanvas.height = canvasHeight;
-        outputCanvas.width = canvasWidth;
-        outputCanvas.height = canvasHeight;
-        sourceContext.clearRect(0, 0, canvasWidth, canvasHeight);
-        sourceContext.drawImage(image.element, ...calculateImageFit(fit, { width: image.width, height: image.height }, { width: canvasWidth, height: canvasHeight }));
-        return runEffectChain({
-          state: chainState.get(canvasWidth, canvasHeight),
-          source: sourceCanvas,
-          effects: memoizedEffects,
-          output: outputCanvas,
-          width: canvasWidth,
-          height: canvasHeight
-        });
-      }).then((completed) => {
-        if (completed && !cancelled) {
+        setLoadedImage(image);
+      }).then(() => {
+        if (!cancelled) {
           continueRenderOnce();
         }
       }).catch((err) => {
@@ -9206,21 +9234,87 @@ var CanvasImageContent = forwardRef10(({
   }, [
     actualSrc,
     cancelRender2,
-    chainState,
     continueRender2,
     delayPlayback,
     delayRender2,
     delayRenderRetries,
     delayRenderTimeoutInMilliseconds,
+    maxRetries,
+    onError,
+    pauseWhenLoading,
+    sequenceContext?.postmounting,
+    sequenceContext?.premounting
+  ]);
+  useEffect17(() => {
+    if (!loadedImage || !outputCanvas || !sourceCanvas) {
+      return;
+    }
+    const handle = delayRender2(`Applying effects to <CanvasImage> with src="${truncateSrcForLabel(actualSrc)}"`);
+    let cancelled = false;
+    let continued = false;
+    const continueRenderOnce = () => {
+      if (continued) {
+        return;
+      }
+      continued = true;
+      continueRender2(handle);
+    };
+    const canvasWidth = width ?? loadedImage.width;
+    const canvasHeight = height ?? loadedImage.height;
+    const sourceContext = sourceCanvas.getContext("2d", {
+      colorSpace: "srgb"
+    });
+    if (!sourceContext) {
+      cancelRender2(new Error("Could not get 2D context for <CanvasImage> source canvas"));
+      continueRenderOnce();
+      return () => {
+        continueRenderOnce();
+      };
+    }
+    sourceCanvas.width = canvasWidth;
+    sourceCanvas.height = canvasHeight;
+    outputCanvas.width = canvasWidth;
+    outputCanvas.height = canvasHeight;
+    sourceContext.clearRect(0, 0, canvasWidth, canvasHeight);
+    sourceContext.drawImage(loadedImage.element, ...calculateImageFit(fit, { width: loadedImage.width, height: loadedImage.height }, { width: canvasWidth, height: canvasHeight }));
+    runEffectChain({
+      state: chainState.get(canvasWidth, canvasHeight),
+      source: sourceCanvas,
+      effects: memoizedEffects,
+      output: outputCanvas,
+      width: canvasWidth,
+      height: canvasHeight
+    }).then((completed) => {
+      if (completed && !cancelled) {
+        continueRenderOnce();
+      }
+    }).catch((err) => {
+      if (cancelled) {
+        return;
+      }
+      if (onError) {
+        onError(err);
+        continueRenderOnce();
+      } else {
+        cancelRender2(err);
+      }
+    });
+    return () => {
+      cancelled = true;
+      continueRenderOnce();
+    };
+  }, [
+    actualSrc,
+    cancelRender2,
+    chainState,
+    continueRender2,
+    delayRender2,
     fit,
     height,
-    maxRetries,
+    loadedImage,
     memoizedEffects,
     onError,
     outputCanvas,
-    pauseWhenLoading,
-    sequenceContext?.postmounting,
-    sequenceContext?.premounting,
     sourceCanvas,
     width
   ]);
@@ -9256,9 +9350,9 @@ var CanvasImageInner = forwardRef10(({
   name,
   showInTimeline,
   stack,
-  _experimentalControls: controls,
+  controls,
   _remotionInternalDocumentationLink,
-  _remotionInternalRefForOutline,
+  outlineRef,
   ...canvasProps
 }, ref) => {
   if (!src) {
@@ -9278,11 +9372,11 @@ var CanvasImageInner = forwardRef10(({
     showInTimeline: showInTimeline ?? true,
     name: name ?? "<CanvasImage>",
     _remotionInternalDocumentationLink: _remotionInternalDocumentationLink ?? "https://www.remotion.dev/docs/canvasimage",
-    _experimentalControls: controls,
+    controls,
     _remotionInternalEffects: memoizedEffectDefinitions,
     _remotionInternalIsMedia: { type: "image", src },
     _remotionInternalStack: stack,
-    _remotionInternalRefForOutline: _remotionInternalRefForOutline ?? actualRef,
+    outlineRef: outlineRef ?? actualRef,
     children: /* @__PURE__ */ jsx26(CanvasImageContent, {
       ref: actualRef,
       src,
@@ -9299,13 +9393,14 @@ var CanvasImageInner = forwardRef10(({
       maxRetries,
       delayRenderRetries,
       delayRenderTimeoutInMilliseconds,
-      refForOutline: _remotionInternalRefForOutline ?? null,
+      refForOutline: outlineRef ?? null,
       ...canvasProps
     })
   });
 });
-var CanvasImage = wrapInSchema({
+var CanvasImage = withInteractivitySchema({
   Component: CanvasImageInner,
+  componentName: "<CanvasImage>",
   componentIdentity: "dev.remotion.remotion.CanvasImage",
   schema: canvasImageSchema,
   supportsEffects: true
@@ -9546,8 +9641,8 @@ var NativeImgInner = ({
   from,
   durationInFrames,
   freeze,
-  _experimentalControls: controls,
-  _remotionInternalRefForOutline: refForOutline,
+  controls,
+  outlineRef: refForOutline,
   ...props2
 }) => {
   if (!src) {
@@ -9562,10 +9657,10 @@ var NativeImgInner = ({
     _remotionInternalDocumentationLink: "https://www.remotion.dev/docs/img",
     _remotionInternalIsMedia: { type: "image", src },
     name: name ?? "<Img>",
-    _experimentalControls: controls,
+    controls,
     showInTimeline: showInTimeline ?? true,
     hidden,
-    _remotionInternalRefForOutline: refForOutline,
+    outlineRef: refForOutline,
     children: /* @__PURE__ */ jsx28(ImgContent, {
       src,
       refForOutline,
@@ -9575,11 +9670,8 @@ var NativeImgInner = ({
 };
 var CanvasImageWithPrivateProps = CanvasImage;
 var imgSchema = {
-  durationInFrames: durationInFramesField,
-  from: fromField,
-  freeze: freezeField,
-  ...sequenceVisualStyleSchema,
-  hidden: hiddenField
+  ...baseSchema,
+  ...transformSchema
 };
 var imgCanvasFallbackIncompatibleProps = new Set([
   "alt",
@@ -9634,7 +9726,7 @@ var ImgInner = ({
   from,
   durationInFrames,
   freeze,
-  _experimentalControls: controls,
+  controls,
   width,
   height,
   className,
@@ -9659,7 +9751,7 @@ var ImgInner = ({
       from,
       durationInFrames,
       freeze,
-      _experimentalControls: controls,
+      controls,
       width,
       height,
       className,
@@ -9669,7 +9761,7 @@ var ImgInner = ({
       maxRetries,
       delayRenderRetries,
       delayRenderTimeoutInMilliseconds,
-      _remotionInternalRefForOutline: refForOutline
+      outlineRef: refForOutline
     });
   }
   if (!src) {
@@ -9706,13 +9798,14 @@ var ImgInner = ({
     showInTimeline,
     stack,
     _remotionInternalDocumentationLink: "https://www.remotion.dev/docs/img",
-    _experimentalControls: controls,
-    _remotionInternalRefForOutline: refForOutline,
+    controls,
+    outlineRef: refForOutline,
     ...canvasProps
   });
 };
-var Img = wrapInSchema({
+var Img = withInteractivitySchema({
   Component: ImgInner,
+  componentName: "<Img>",
   componentIdentity: "dev.remotion.remotion.Img",
   schema: imgSchema,
   supportsEffects: true
@@ -9722,11 +9815,8 @@ addSequenceStackTraces(Img);
 import React29, { forwardRef as forwardRef12, useCallback as useCallback20, useRef as useRef25 } from "react";
 import { jsx as jsx29 } from "react/jsx-runtime";
 var interactiveElementSchema = {
-  durationInFrames: durationInFramesField,
-  from: fromField,
-  freeze: freezeField,
-  ...sequenceVisualStyleSchema,
-  hidden: hiddenField
+  ...baseSchema,
+  ...transformSchema
 };
 var setRef = (ref, value) => {
   if (typeof ref === "function") {
@@ -9745,7 +9835,7 @@ var makeInteractiveElement = (tag, displayName) => {
       name,
       showInTimeline,
       stack,
-      _experimentalControls,
+      controls,
       ...props2
     } = propsWithControls;
     const refForOutline = useRef25(null);
@@ -9761,10 +9851,10 @@ var makeInteractiveElement = (tag, displayName) => {
       hidden,
       name: name ?? displayName,
       showInTimeline: showInTimeline ?? true,
-      _experimentalControls,
+      controls,
       _remotionInternalStack: stack,
       _remotionInternalDocumentationLink: "https://www.remotion.dev/docs/interactive",
-      _remotionInternalRefForOutline: refForOutline,
+      outlineRef: refForOutline,
       children: React29.createElement(tag, {
         ...props2,
         ref: callbackRef
@@ -9772,8 +9862,9 @@ var makeInteractiveElement = (tag, displayName) => {
     });
   });
   Inner.displayName = displayName;
-  const Wrapped = wrapInSchema({
+  const Wrapped = withInteractivitySchema({
     Component: Inner,
+    componentName: displayName,
     componentIdentity: `dev.remotion.remotion.${displayName.slice(1, -1)}`,
     schema: interactiveElementSchema,
     supportsEffects: false
@@ -9783,6 +9874,11 @@ var makeInteractiveElement = (tag, displayName) => {
   return Wrapped;
 };
 var Interactive = {
+  baseSchema,
+  transformSchema,
+  premountSchema,
+  sequenceSchema,
+  withSchema: withInteractivitySchema,
   A: makeInteractiveElement("a", "<Interactive.A>"),
   Article: makeInteractiveElement("article", "<Interactive.Article>"),
   Aside: makeInteractiveElement("aside", "<Interactive.Aside>"),
@@ -9982,38 +10078,6 @@ var makeDefaultPreviewCSS = (scope, backgroundColor) => {
   `;
 };
 
-// src/effects/create-effect.ts
-var disabledEffectField = {
-  type: "boolean",
-  default: false,
-  description: "Disabled"
-};
-var createEffect = (definition) => {
-  const { calculateKey: userCalculateKey, validateParams } = definition;
-  const widened = {
-    ...definition,
-    documentationLink: definition.documentationLink ?? null,
-    calculateKey: (params) => {
-      const disabled = params.disabled ?? false;
-      return `${userCalculateKey(params)}-disabled-${disabled}`;
-    },
-    schema: {
-      disabled: disabledEffectField,
-      ...definition.schema
-    }
-  };
-  const factory = (params = {}) => {
-    validateParams(params);
-    return {
-      definition: widened,
-      params,
-      effectKey: widened.calculateKey(params),
-      memoized: false
-    };
-  };
-  return factory;
-};
-
 // src/get-preview-dom-element.ts
 var REMOTION_STUDIO_CONTAINER_ELEMENT = "__remotion-studio-container";
 var getPreviewDomElement = () => {
@@ -11280,12 +11344,14 @@ var Internals = {
   SequenceManager,
   SequenceManagerRefContext,
   SequenceStackTracesUpdateContext,
-  wrapInSchema,
+  baseSchema,
   sequenceSchema,
   SequenceWithoutSchema,
   sequenceStyleSchema,
   sequenceVisualStyleSchema,
   sequencePremountSchema,
+  transformSchema,
+  premountSchema,
   flattenActiveSchema,
   getFlatSchemaWithAllKeys,
   RemotionRootContexts,
@@ -11497,8 +11563,9 @@ var SeriesInner = (props2) => {
     })
   });
 };
-var Series = Object.assign(wrapInSchema({
+var Series = Object.assign(withInteractivitySchema({
   Component: SeriesInner,
+  componentName: "<Series>",
   componentIdentity: "dev.remotion.remotion.Series",
   schema: sequenceSchemaDefaultLayoutNone,
   supportsEffects: false
@@ -12133,6 +12200,7 @@ export {
   getRemotionEnvironment,
   getInputProps,
   delayRender,
+  createEffect,
   continueRender,
   cancelRender,
   assertValidInterpolatePosterizeOption,