@remotion/promo-pages 4.0.477 → 4.0.479

package/dist/experts.js

@@ -2335,7 +2335,7 @@ var getComponentsToAddStacksTo = () => componentsToAddStacksTo;
 var addSequenceStackTraces = (component) => {
   componentsToAddStacksTo.push(component);
 };
-var VERSION = "4.0.477";
+var VERSION = "4.0.479";
 var checkMultipleRemotionVersions = () => {
   if (typeof globalThis === "undefined") {
     return;
@@ -2698,10 +2698,7 @@ var Freeze = ({
     })
   });
 };
-var PremountContext = createContext14({
-  premountFramesRemaining: 0
-});
-var sequenceVisualStyleSchema = {
+var transformSchema = {
   "style.transformOrigin": {
     type: "transform-origin",
     step: 1,
@@ -2737,7 +2734,8 @@ var sequenceVisualStyleSchema = {
     hiddenFromList: false
   }
 };
-var sequencePremountSchema = {
+var sequenceVisualStyleSchema = transformSchema;
+var premountSchema = {
   premountFor: {
     type: "number",
     default: 0,
@@ -2760,9 +2758,10 @@ var sequencePremountSchema = {
     type: "hidden"
   }
 };
+var sequencePremountSchema = premountSchema;
 var sequenceStyleSchema = {
-  ...sequenceVisualStyleSchema,
-  ...sequencePremountSchema
+  ...transformSchema,
+  ...premountSchema
 };
 var hiddenField = {
   type: "boolean",
@@ -2800,12 +2799,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",
@@ -2815,14 +2818,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: {
@@ -2830,6 +2837,9 @@ var sequenceSchemaDefaultLayoutNone = {
     default: "none"
   }
 };
+var PremountContext = createContext14({
+  premountFramesRemaining: 0
+});
 var SequenceManager = React11.createContext({
   registerSequence: () => {
     throw new Error("SequenceManagerContext not initialized");
@@ -4514,10 +4524,21 @@ var interpolateColors = (input, inputRange, outputRange, options) => {
   return interpolateColorsRGB(input, inputRange, processedOutputRange, options);
 };
 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,
@@ -4839,6 +4860,9 @@ var findPropsToDelete = ({
   }
   return [...otherKeys];
 };
+var DEFAULT_LINEAR_EASING = {
+  type: "linear"
+};
 var makeStaticDragOverride = (value) => {
   return { type: "static", value };
 };
@@ -4851,7 +4875,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;
@@ -5009,7 +5033,7 @@ var mergeValues = ({
   return merged;
 };
 var stackToOverrideMap = {};
-var wrapInSchema = ({
+var withInteractivitySchema = ({
   Component,
   componentIdentity,
   schema,
@@ -5023,7 +5047,7 @@ var wrapInSchema = ({
     if (!env.isStudio || env.isReadOnlyStudio || env.isRendering) {
       return React13.createElement(Component, {
         ...props,
-        _experimentalControls: null,
+        controls: null,
         ref
       });
     }
@@ -5031,7 +5055,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
@@ -5086,11 +5110,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;
 };
 var EMPTY_EFFECTS = [];
@@ -5104,7 +5128,7 @@ var RegularSequenceRefForwardingFunction = ({
   width,
   showInTimeline = true,
   hidden = false,
-  _experimentalControls: controls,
+  controls,
   _remotionInternalEffects,
   _remotionInternalLoopDisplay: loopDisplay,
   _remotionInternalStack: stack,
@@ -5112,7 +5136,7 @@ var RegularSequenceRefForwardingFunction = ({
   _remotionInternalPremountDisplay: premountDisplay,
   _remotionInternalPostmountDisplay: postmountDisplay,
   _remotionInternalIsMedia: isMedia,
-  _remotionInternalRefForOutline: passedRefForOutline,
+  outlineRef: passedRefForOutline,
   ...other
 }, ref) => {
   const { layout = "absolute-fill" } = other;
@@ -5209,6 +5233,11 @@ var RegularSequenceRefForwardingFunction = ({
   const inheritedStack = other?.stack ?? null;
   const stackRef = useRef6(null);
   stackRef.current = stack ?? inheritedStack;
+  const registeredFrozenFrame = typeof freeze === "number" ? freeze : null;
+  const parentCumulatedNegativeFrom = parentSequence?.cumulatedNegativeFrom ?? 0;
+  const startMediaFrom = isMedia && isMedia.type !== "image" ? isMedia.data.startMediaFrom + parentCumulatedNegativeFrom - cumulatedNegativeFrom : null;
+  const mediaFrameAtSequenceZero = isMedia && isMedia.type !== "image" ? isMedia.data.startMediaFrom + parentCumulatedNegativeFrom : null;
+  const frozenMediaFrame = isMedia && isMedia.type !== "image" && mediaFrameAtSequenceZero !== null ? registeredFrozenFrame === null ? null : mediaFrameAtSequenceZero + (loopDisplay ? registeredFrozenFrame % loopDisplay.durationInFrames : registeredFrozenFrame) * isMedia.data.playbackRate : null;
   useEffect3(() => {
     if (!env.isStudio) {
       return;
@@ -5234,7 +5263,8 @@ var RegularSequenceRefForwardingFunction = ({
           src: isMedia.src,
           getStack: () => stackRef.current,
           refForOutline: refForOutline ?? null,
-          isInsideSeries
+          isInsideSeries,
+          frozenFrame: registeredFrozenFrame
         });
       } else {
         registerSequence({
@@ -5257,10 +5287,12 @@ var RegularSequenceRefForwardingFunction = ({
           showInTimeline,
           src: isMedia.data.src,
           getStack: () => stackRef.current,
-          startMediaFrom: isMedia.data.startMediaFrom,
+          startMediaFrom: startMediaFrom ?? isMedia.data.startMediaFrom,
           volume: isMedia.data.volumes,
           refForOutline: refForOutline ?? null,
-          isInsideSeries
+          isInsideSeries,
+          frozenFrame: registeredFrozenFrame,
+          frozenMediaFrame
         });
       }
       return () => {
@@ -5285,7 +5317,8 @@ var RegularSequenceRefForwardingFunction = ({
       controls: controls ?? null,
       effects: _remotionInternalEffects ?? EMPTY_EFFECTS,
       refForOutline: refForOutline ?? null,
-      isInsideSeries
+      isInsideSeries,
+      frozenFrame: registeredFrozenFrame
     });
     return () => {
       unregisterSequence(id);
@@ -5312,7 +5345,10 @@ var RegularSequenceRefForwardingFunction = ({
     isMedia,
     resolvedDocumentationLink,
     refForOutline,
-    isInsideSeries
+    isInsideSeries,
+    registeredFrozenFrame,
+    startMediaFrom,
+    frozenMediaFrame
   ]);
   const endThreshold = Math.ceil(cumulatedFrom + from + durationInFrames - 1);
   const content = absoluteFrame < cumulatedFrom + from ? null : absoluteFrame > endThreshold ? null : children;
@@ -5427,13 +5463,13 @@ var SequenceRefForwardingFunction = (props, ref) => {
 };
 var SequenceInner = forwardRef3(SequenceRefForwardingFunction);
 var SequenceWithoutSchema = SequenceInner;
-var Sequence = wrapInSchema({
+var Sequence = withInteractivitySchema({
   Component: SequenceInner,
   componentIdentity: "dev.remotion.remotion.Sequence",
   schema: sequenceSchema,
   supportsEffects: false
 });
-var SequenceWithoutFrom = wrapInSchema({
+var SequenceWithoutFrom = withInteractivitySchema({
   Component: SequenceInner,
   componentIdentity: null,
   schema: sequenceSchemaWithoutFrom,
@@ -5972,9 +6008,7 @@ var resolveAnimatedImageSource = (src) => {
   return new URL(src, window.origin).href;
 };
 var animatedImageSchema = {
-  durationInFrames: durationInFramesField,
-  from: fromField,
-  freeze: freezeField,
+  ...baseSchema,
   playbackRate: {
     type: "number",
     min: 0,
@@ -5985,8 +6019,7 @@ var animatedImageSchema = {
     hiddenFromList: false,
     keyframable: false
   },
-  ...sequenceVisualStyleSchema,
-  hidden: hiddenField
+  ...transformSchema
 };
 var AnimatedImageContent = forwardRef4(({
   src,
@@ -6131,7 +6164,7 @@ var AnimatedImageInner = ({
   durationInFrames,
   requestInit,
   effects = [],
-  _experimentalControls: controls,
+  controls,
   ref,
   ...sequenceProps
 }) => {
@@ -6160,10 +6193,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,
@@ -6172,7 +6205,7 @@ var AnimatedImageInner = ({
     })
   });
 };
-var AnimatedImage = wrapInSchema({
+var AnimatedImage = withInteractivitySchema({
   Component: AnimatedImageInner,
   componentIdentity: "dev.remotion.remotion.AnimatedImage",
   schema: animatedImageSchema,
@@ -6180,6 +6213,36 @@ var AnimatedImage = wrapInSchema({
 });
 AnimatedImage.displayName = "AnimatedImage";
 addSequenceStackTraces(AnimatedImage);
+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;
+};
 var validateArtifactFilename = (filename) => {
   if (typeof filename !== "string") {
     throw new TypeError(`The "filename" must be a string, but you passed a value of type ${typeof filename}`);
@@ -7807,7 +7870,9 @@ var useMediaInTimeline = ({
       controls: null,
       effects: [],
       refForOutline,
-      isInsideSeries: false
+      isInsideSeries: false,
+      frozenFrame: null,
+      frozenMediaFrame: null
     });
     return () => {
       unregisterSequence(id);
@@ -9123,9 +9188,7 @@ var resolveSolidPixelDensity = (pixelDensity) => {
   return pixelDensity;
 };
 var solidSchema = {
-  durationInFrames: durationInFramesField,
-  from: fromField,
-  freeze: freezeField,
+  ...baseSchema,
   color: {
     type: "color",
     default: "transparent",
@@ -9147,8 +9210,7 @@ var solidSchema = {
     description: "Height",
     hiddenFromList: false
   },
-  ...sequenceVisualStyleSchema,
-  hidden: hiddenField
+  ...transformSchema
 };
 var SolidInner = ({
   color,
@@ -9255,7 +9317,7 @@ var SolidInner = ({
 };
 var SolidOuter = forwardRef8(({
   effects = [],
-  _experimentalControls: controls,
+  controls,
   color,
   height,
   width,
@@ -9281,11 +9343,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, {
@@ -9301,7 +9363,7 @@ var SolidOuter = forwardRef8(({
     })
   });
 });
-var Solid = wrapInSchema({
+var Solid = withInteractivitySchema({
   Component: SolidOuter,
   componentIdentity: "dev.remotion.remotion.Solid",
   schema: solidSchema,
@@ -9578,7 +9640,7 @@ var HtmlInCanvasInner = forwardRef9(({
   onPaint,
   onInit,
   pixelDensity,
-  _experimentalControls: controls,
+  controls,
   style,
   durationInFrames,
   name,
@@ -9600,9 +9662,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, {
@@ -9621,13 +9683,10 @@ 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,
   componentIdentity: "dev.remotion.remotion.HtmlInCanvas",
   schema: htmlInCanvasSchema,
@@ -9645,9 +9704,7 @@ function truncateSrcForLabel(src) {
   return src;
 }
 var canvasImageSchema = {
-  durationInFrames: durationInFramesField,
-  from: fromField,
-  freeze: freezeField,
+  ...baseSchema,
   fit: {
     type: "enum",
     default: "fill",
@@ -9658,8 +9715,7 @@ var canvasImageSchema = {
       cover: {}
     }
   },
-  ...sequenceVisualStyleSchema,
-  hidden: hiddenField
+  ...transformSchema
 };
 var makeAbortError = () => {
   if (typeof DOMException !== "undefined") {
@@ -9740,6 +9796,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({
@@ -9765,9 +9822,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)}"`, {
@@ -9782,6 +9836,7 @@ var CanvasImageContent = forwardRef10(({
     let continued = false;
     let errorCount = 0;
     let timeoutId = null;
+    setLoadedImage(null);
     const continueRenderOnce = () => {
       if (continued) {
         return;
@@ -9795,30 +9850,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) => {
@@ -9855,21 +9889,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
   ]);
@@ -9905,9 +10005,9 @@ var CanvasImageInner = forwardRef10(({
   name,
   showInTimeline,
   stack,
-  _experimentalControls: controls,
+  controls,
   _remotionInternalDocumentationLink,
-  _remotionInternalRefForOutline,
+  outlineRef,
   ...canvasProps
 }, ref) => {
   if (!src) {
@@ -9927,11 +10027,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,
@@ -9948,12 +10048,12 @@ var CanvasImageInner = forwardRef10(({
       maxRetries,
       delayRenderRetries,
       delayRenderTimeoutInMilliseconds,
-      refForOutline: _remotionInternalRefForOutline ?? null,
+      refForOutline: outlineRef ?? null,
       ...canvasProps
     })
   });
 });
-var CanvasImage = wrapInSchema({
+var CanvasImage = withInteractivitySchema({
   Component: CanvasImageInner,
   componentIdentity: "dev.remotion.remotion.CanvasImage",
   schema: canvasImageSchema,
@@ -10158,8 +10258,8 @@ var NativeImgInner = ({
   from,
   durationInFrames,
   freeze,
-  _experimentalControls: controls,
-  _remotionInternalRefForOutline: refForOutline,
+  controls,
+  outlineRef: refForOutline,
   ...props2
 }) => {
   if (!src) {
@@ -10174,10 +10274,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,
@@ -10187,11 +10287,8 @@ var NativeImgInner = ({
 };
 var CanvasImageWithPrivateProps = CanvasImage;
 var imgSchema = {
-  durationInFrames: durationInFramesField,
-  from: fromField,
-  freeze: freezeField,
-  ...sequenceVisualStyleSchema,
-  hidden: hiddenField
+  ...baseSchema,
+  ...transformSchema
 };
 var imgCanvasFallbackIncompatibleProps = new Set([
   "alt",
@@ -10246,7 +10343,7 @@ var ImgInner = ({
   from,
   durationInFrames,
   freeze,
-  _experimentalControls: controls,
+  controls,
   width,
   height,
   className,
@@ -10271,7 +10368,7 @@ var ImgInner = ({
       from,
       durationInFrames,
       freeze,
-      _experimentalControls: controls,
+      controls,
       width,
       height,
       className,
@@ -10281,7 +10378,7 @@ var ImgInner = ({
       maxRetries,
       delayRenderRetries,
       delayRenderTimeoutInMilliseconds,
-      _remotionInternalRefForOutline: refForOutline
+      outlineRef: refForOutline
     });
   }
   if (!src) {
@@ -10318,12 +10415,12 @@ 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,
   componentIdentity: "dev.remotion.remotion.Img",
   schema: imgSchema,
@@ -10331,11 +10428,8 @@ var Img = wrapInSchema({
 });
 addSequenceStackTraces(Img);
 var interactiveElementSchema = {
-  durationInFrames: durationInFramesField,
-  from: fromField,
-  freeze: freezeField,
-  ...sequenceVisualStyleSchema,
-  hidden: hiddenField
+  ...baseSchema,
+  ...transformSchema
 };
 var setRef = (ref, value) => {
   if (typeof ref === "function") {
@@ -10354,7 +10448,7 @@ var makeInteractiveElement = (tag, displayName) => {
       name,
       showInTimeline,
       stack,
-      _experimentalControls,
+      controls,
       ...props2
     } = propsWithControls;
     const refForOutline = useRef25(null);
@@ -10370,10 +10464,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
@@ -10381,7 +10475,7 @@ var makeInteractiveElement = (tag, displayName) => {
     });
   });
   Inner.displayName = displayName;
-  const Wrapped = wrapInSchema({
+  const Wrapped = withInteractivitySchema({
     Component: Inner,
     componentIdentity: `dev.remotion.remotion.${displayName.slice(1, -1)}`,
     schema: interactiveElementSchema,
@@ -10392,6 +10486,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>"),
@@ -10573,36 +10672,6 @@ var makeDefaultPreviewCSS = (scope, backgroundColor) => {
     }
   `;
 };
-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;
-};
 var REMOTION_STUDIO_CONTAINER_ELEMENT = "__remotion-studio-container";
 var getPreviewDomElement = () => {
   return document.getElementById(REMOTION_STUDIO_CONTAINER_ELEMENT);
@@ -11689,12 +11758,14 @@ var Internals = {
   SequenceManager,
   SequenceManagerRefContext,
   SequenceStackTracesUpdateContext,
-  wrapInSchema,
+  baseSchema,
   sequenceSchema,
   SequenceWithoutSchema,
   sequenceStyleSchema,
   sequenceVisualStyleSchema,
   sequencePremountSchema,
+  transformSchema,
+  premountSchema,
   flattenActiveSchema,
   getFlatSchemaWithAllKeys,
   RemotionRootContexts,
@@ -11894,7 +11965,7 @@ var SeriesInner = (props2) => {
     })
   });
 };
-var Series = Object.assign(wrapInSchema({
+var Series = Object.assign(withInteractivitySchema({
   Component: SeriesInner,
   componentIdentity: "dev.remotion.remotion.Series",
   schema: sequenceSchemaDefaultLayoutNone,