@remotion/promo-pages 4.0.504 → 4.0.506

package/dist/prompts/PromptsSubmit.js

@@ -4194,7 +4194,13 @@ import React13, { createContext as createContext14 } from "react";
 import { jsx as jsx11 } from "react/jsx-runtime";
 import { useContext as useContext15, useMemo as useMemo13 } from "react";
 import { createContext as createContext15 } from "react";
-import React14, { forwardRef as forwardRef2, useContext as useContext17, useMemo as useMemo14, useState as useState4 } from "react";
+import React14, {
+  forwardRef as forwardRef2,
+  useContext as useContext17,
+  useLayoutEffect as useLayoutEffect2,
+  useMemo as useMemo14,
+  useState as useState4
+} from "react";
 import { useContext as useContext16, useRef as useRef5 } from "react";
 import { createContext as createContext16 } from "react";
 import { jsx as jsx12 } from "react/jsx-runtime";
@@ -4204,7 +4210,7 @@ import {
   forwardRef as forwardRef4,
   useEffect as useEffect5,
   useImperativeHandle as useImperativeHandle2,
-  useLayoutEffect as useLayoutEffect2,
+  useLayoutEffect as useLayoutEffect3,
   useRef as useRef10,
   useState as useState6
 } from "react";
@@ -4213,12 +4219,12 @@ import React17, { useCallback as useCallback8, useImperativeHandle, useMemo as u
 import { useEffect as useEffect4, useMemo as useMemo17, useRef as useRef8 } from "react";
 import { jsx as jsx14 } from "react/jsx-runtime";
 import { jsx as jsx15 } from "react/jsx-runtime";
-import { useContext as useContext19, useLayoutEffect as useLayoutEffect4, useState as useState8 } from "react";
+import { useContext as useContext19, useLayoutEffect as useLayoutEffect5, useState as useState8 } from "react";
 import {
   createContext as createContext17,
   useCallback as useCallback9,
   useImperativeHandle as useImperativeHandle3,
-  useLayoutEffect as useLayoutEffect3,
+  useLayoutEffect as useLayoutEffect4,
   useMemo as useMemo19,
   useRef as useRef11,
   useState as useState7
@@ -4242,7 +4248,7 @@ import React24, {
   useRef as useRef20,
   useState as useState14
 } from "react";
-import { useContext as useContext22, useLayoutEffect as useLayoutEffect5, useRef as useRef15 } from "react";
+import { useContext as useContext22, useLayoutEffect as useLayoutEffect6, useRef as useRef15 } from "react";
 import React21, {
   createContext as createContext21,
   createRef as createRef2,
@@ -4262,7 +4268,7 @@ import {
   useCallback as useCallback13,
   useContext as useContext27,
   useEffect as useEffect12,
-  useLayoutEffect as useLayoutEffect7,
+  useLayoutEffect as useLayoutEffect8,
   useRef as useRef19
 } from "react";
 import { useCallback as useCallback12, useMemo as useMemo27, useRef as useRef17 } from "react";
@@ -4271,7 +4277,7 @@ import React22, {
   useCallback as useCallback11,
   useContext as useContext25,
   useEffect as useEffect9,
-  useLayoutEffect as useLayoutEffect6,
+  useLayoutEffect as useLayoutEffect7,
   useMemo as useMemo25,
   useRef as useRef16,
   useState as useState12
@@ -4288,7 +4294,7 @@ import {
   useContext as useContext30,
   useEffect as useEffect15,
   useImperativeHandle as useImperativeHandle5,
-  useLayoutEffect as useLayoutEffect8,
+  useLayoutEffect as useLayoutEffect9,
   useMemo as useMemo30,
   useRef as useRef21
 } from "react";
@@ -4309,7 +4315,7 @@ import {
   forwardRef as forwardRef9,
   useCallback as useCallback17,
   useContext as useContext32,
-  useLayoutEffect as useLayoutEffect9,
+  useLayoutEffect as useLayoutEffect10,
   useMemo as useMemo32,
   useRef as useRef23
 } from "react";
@@ -4319,7 +4325,7 @@ import {
   useCallback as useCallback18,
   useContext as useContext33,
   useImperativeHandle as useImperativeHandle7,
-  useLayoutEffect as useLayoutEffect10,
+  useLayoutEffect as useLayoutEffect11,
   useMemo as useMemo33,
   useRef as useRef24,
   useState as useState16
@@ -4330,7 +4336,7 @@ import { jsx as jsx28 } from "react/jsx-runtime";
 import {
   useCallback as useCallback20,
   useContext as useContext34,
-  useLayoutEffect as useLayoutEffect11,
+  useLayoutEffect as useLayoutEffect12,
   useRef as useRef25,
   useState as useState18
 } from "react";
@@ -4360,7 +4366,7 @@ import {
   useCallback as useCallback23,
   useContext as useContext37,
   useEffect as useEffect17,
-  useLayoutEffect as useLayoutEffect12,
+  useLayoutEffect as useLayoutEffect13,
   useMemo as useMemo37,
   useState as useState20
 } from "react";
@@ -4393,7 +4399,7 @@ import {
   useContext as useContext39,
   useEffect as useEffect20,
   useImperativeHandle as useImperativeHandle10,
-  useLayoutEffect as useLayoutEffect13,
+  useLayoutEffect as useLayoutEffect14,
   useMemo as useMemo41,
   useRef as useRef29
 } from "react";
@@ -5586,7 +5592,7 @@ var getSingleChildComponent = (children) => {
   }
   return child.type;
 };
-var VERSION = "4.0.504";
+var VERSION = "4.0.506";
 var checkMultipleRemotionVersions = () => {
   if (typeof globalThis === "undefined") {
     return;
@@ -5637,6 +5643,7 @@ var SetTimelineContext = createContext13({
   }
 });
 var TimelineContext = createContext13(null);
+var TimelineImperativeContext = createContext13(null);
 var PlaybackRateContext = createContext13(null);
 var AbsoluteTimeContext = createContext13(null);
 var TimelineContextProvider = ({ children, frameState }) => {
@@ -5646,6 +5653,8 @@ var TimelineContextProvider = ({ children, frameState }) => {
   const audioAndVideoTags = useRef3([]);
   const [_frame, setFrame] = useState2(() => getInitialFrameState());
   const frame = frameState ?? _frame;
+  const frameRef = useRef3(frame);
+  frameRef.current = frame;
   const { delayRender: delayRender2, continueRender: continueRender2 } = useDelayRender();
   if (typeof window !== "undefined") {
     useLayoutEffect(() => {
@@ -5681,6 +5690,13 @@ var TimelineContextProvider = ({ children, frameState }) => {
       audioAndVideoTags
     };
   }, [frame, playing]);
+  const timelineImperativeContextValue = useMemo8(() => {
+    return {
+      frameRef,
+      imperativePlaying,
+      audioAndVideoTags
+    };
+  }, []);
   const playbackRateContextValue = useMemo8(() => {
     return {
       playbackRate,
@@ -5697,11 +5713,14 @@ var TimelineContextProvider = ({ children, frameState }) => {
     value: timelineContextValue,
     children: /* @__PURE__ */ jsx8(PlaybackRateContext.Provider, {
       value: playbackRateContextValue,
-      children: /* @__PURE__ */ jsx8(TimelineContext.Provider, {
-        value: timelineContextValue,
-        children: /* @__PURE__ */ jsx8(SetTimelineContext.Provider, {
-          value: setTimelineContextValue,
-          children
+      children: /* @__PURE__ */ jsx8(TimelineImperativeContext.Provider, {
+        value: timelineImperativeContextValue,
+        children: /* @__PURE__ */ jsx8(TimelineContext.Provider, {
+          value: timelineContextValue,
+          children: /* @__PURE__ */ jsx8(SetTimelineContext.Provider, {
+            value: setTimelineContextValue,
+            children
+          })
         })
       })
     })
@@ -8526,6 +8545,31 @@ var getFlatSchemaWithAllKeys = (schema) => {
   }
   return out;
 };
+var createRuntimeValueStore = (initialSnapshot) => {
+  let snapshot = initialSnapshot;
+  const listeners = new Set;
+  const store = {
+    getSnapshot: () => snapshot,
+    subscribe: (listener) => {
+      listeners.add(listener);
+      return () => {
+        listeners.delete(listener);
+      };
+    }
+  };
+  return {
+    store,
+    setSnapshot: (newSnapshot) => {
+      if (snapshot === newSnapshot) {
+        return;
+      }
+      snapshot = newSnapshot;
+      for (const listener of listeners) {
+        listener();
+      }
+    }
+  };
+};
 var findPropsToDelete = ({
   schema,
   key,
@@ -8827,16 +8871,21 @@ var withInteractivitySchema = ({
       props: cleanProps
     }));
     const currentRuntimeValueDotNotation = useMemo14(() => readValuesFromProps(cleanProps, flatKeys, flatSchema), runtimeValues);
+    const [runtimeValueStore] = useState4(() => createRuntimeValueStore(currentRuntimeValueDotNotation));
+    useLayoutEffect2(() => {
+      runtimeValueStore.setSnapshot(currentRuntimeValueDotNotation);
+    }, [currentRuntimeValueDotNotation, runtimeValueStore]);
     const controls = useMemo14(() => {
       return {
         schema: schemaWithSequenceName,
         currentRuntimeValueDotNotation,
+        runtimeValues: runtimeValueStore.store,
         overrideId,
         supportsEffects,
         componentIdentity,
         componentName
       };
-    }, [currentRuntimeValueDotNotation, overrideId]);
+    }, [currentRuntimeValueDotNotation, overrideId, runtimeValueStore.store]);
     setStackForControls(controls, internalStack);
     const { merged: valuesDotNotation, propsToDelete } = useMemo14(() => {
       return computeEffectiveSchemaValuesDotNotation({
@@ -9021,6 +9070,32 @@ var RegularSequenceRefForwardingFunction = ({
   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;
+  const controlsSchema = controls?.schema;
+  const controlsRuntimeValues = controls?.runtimeValues;
+  const controlsOverrideId = controls?.overrideId;
+  const controlsSupportsEffects = controls?.supportsEffects;
+  const controlsComponentIdentity = controls?.componentIdentity;
+  const controlsComponentName = controls?.componentName;
+  const registrationControls = useMemo15(() => {
+    if (controlsSchema === undefined || controlsRuntimeValues === undefined || controlsOverrideId === undefined || controlsSupportsEffects === undefined || controlsComponentIdentity === undefined || controlsComponentName === undefined) {
+      return null;
+    }
+    return {
+      schema: controlsSchema,
+      runtimeValues: controlsRuntimeValues,
+      overrideId: controlsOverrideId,
+      supportsEffects: controlsSupportsEffects,
+      componentIdentity: controlsComponentIdentity,
+      componentName: controlsComponentName
+    };
+  }, [
+    controlsComponentIdentity,
+    controlsComponentName,
+    controlsOverrideId,
+    controlsRuntimeValues,
+    controlsSchema,
+    controlsSupportsEffects
+  ]);
   useEffect3(() => {
     if (!env.isStudio) {
       return;
@@ -9029,7 +9104,7 @@ var RegularSequenceRefForwardingFunction = ({
       if (isMedia.type === "image") {
         registerSequence({
           type: "image",
-          controls: controls ?? null,
+          controls: registrationControls,
           effects: _remotionInternalEffects ?? EMPTY_EFFECTS,
           displayName: timelineClipName,
           documentationLink: resolvedDocumentationLink,
@@ -9053,7 +9128,7 @@ var RegularSequenceRefForwardingFunction = ({
       } else {
         registerSequence({
           type: isMedia.type,
-          controls: controls ?? null,
+          controls: registrationControls,
           effects: _remotionInternalEffects ?? EMPTY_EFFECTS,
           displayName: timelineClipName,
           documentationLink: resolvedDocumentationLink,
@@ -9100,7 +9175,7 @@ var RegularSequenceRefForwardingFunction = ({
       getStack: () => stackRef.current,
       premountDisplay: premountDisplay ?? null,
       postmountDisplay: postmountDisplay ?? null,
-      controls: controls ?? null,
+      controls: registrationControls,
       effects: _remotionInternalEffects ?? EMPTY_EFFECTS,
       refForOutline: refForOutline ?? null,
       isInsideSeries,
@@ -9128,7 +9203,7 @@ var RegularSequenceRefForwardingFunction = ({
     premountDisplay,
     postmountDisplay,
     env.isStudio,
-    controls,
+    registrationControls,
     _remotionInternalEffects,
     isMedia,
     resolvedDocumentationLink,
@@ -10054,7 +10129,7 @@ var AnimatedImageContent = forwardRef4(({
       imageDecoder?.close();
     };
   }, [imageDecoder]);
-  useLayoutEffect2(() => {
+  useLayoutEffect3(() => {
     if (!imageDecoder) {
       return;
     }
@@ -10311,7 +10386,7 @@ var RenderAssetManagerProvider = ({ children, collectAssets }) => {
     renderAssetsRef.current = renderAssetsRef.current.filter((a2) => a2.id !== id);
     setRenderAssets(renderAssetsRef.current);
   }, []);
-  useLayoutEffect3(() => {
+  useLayoutEffect4(() => {
     if (typeof window !== "undefined") {
       window.remotion_collectAssets = () => {
         const assets = renderAssetsRef.current;
@@ -10341,7 +10416,7 @@ var Artifact = ({ filename, content, downloadBehavior }) => {
   const [id] = useState8(() => {
     return String(Math.random());
   });
-  useLayoutEffect4(() => {
+  useLayoutEffect5(() => {
     if (!env.isRendering) {
       return;
     }
@@ -11659,7 +11734,7 @@ var useVolume = ({
   }
   const { audioContext, gainNode: masterGainNode } = sharedAudioContext;
   if (typeof window !== "undefined") {
-    useLayoutEffect5(() => {
+    useLayoutEffect6(() => {
       if (!audioContext) {
         return;
       }
@@ -12025,7 +12100,7 @@ var useBufferManager = (logLevel, mountTime) => {
     }
   }, [blocks]);
   if (typeof window !== "undefined") {
-    useLayoutEffect6(() => {
+    useLayoutEffect7(() => {
       if (rendering) {
         return;
       }
@@ -12659,7 +12734,7 @@ var useMediaPlayback = ({
     isPostmounting
   ]);
   const env = useRemotionEnvironment();
-  useLayoutEffect7(() => {
+  useLayoutEffect8(() => {
     const playbackRateToSet = Math.max(0, playbackRate);
     if (mediaRef.current && mediaRef.current.playbackRate !== playbackRateToSet) {
       mediaRef.current.playbackRate = playbackRateToSet;
@@ -13137,7 +13212,7 @@ var AudioForRenderingRefForwardingFunction = (props, ref) => {
   ]);
   const { src } = props;
   const needsToRenderAudioTag = ref || _remotionInternalNeedsDurationCalculation;
-  useLayoutEffect8(() => {
+  useLayoutEffect9(() => {
     if (window.process?.env?.NODE_ENV === "test") {
       return;
     }
@@ -13784,7 +13859,7 @@ var HtmlInCanvasContent = forwardRef9(({
     resolvedPixelDensity,
     canRetryMissingPaintRecord
   ]);
-  useLayoutEffect9(() => {
+  useLayoutEffect10(() => {
     const placeholder = canvas2dRef.current;
     if (!placeholder) {
       throw new Error("Canvas not found");
@@ -13816,7 +13891,7 @@ var HtmlInCanvasContent = forwardRef9(({
     usesDirectLayoutCanvas
   ]);
   const onPaintChangedRef = useRef23(false);
-  useLayoutEffect9(() => {
+  useLayoutEffect10(() => {
     if (!onPaintChangedRef.current) {
       onPaintChangedRef.current = true;
       return;
@@ -13827,7 +13902,7 @@ var HtmlInCanvasContent = forwardRef9(({
     }
     canvas.requestPaint?.();
   }, [onPaint, memoizedEffects]);
-  useLayoutEffect9(() => {
+  useLayoutEffect10(() => {
     const canvas = canvas2dRef.current;
     if (!canvas) {
       return;
@@ -14125,7 +14200,7 @@ var CanvasImageContent = forwardRef10(({
       ref.current = canvas;
     }
   }, [ref, refForOutline]);
-  useLayoutEffect10(() => {
+  useLayoutEffect11(() => {
     if (!pauseWhenLoading || !isLoadPending || isPremounting || isPostmounting) {
       return;
     }
@@ -14137,7 +14212,7 @@ var CanvasImageContent = forwardRef10(({
     isPremounting,
     pauseWhenLoading
   ]);
-  useLayoutEffect10(() => {
+  useLayoutEffect11(() => {
     const handle = delayRender2(`Rendering <CanvasImage> with src="${truncateSrcForLabel(actualSrc)}"`, {
       retries: delayRenderRetries ?? undefined,
       timeoutInMilliseconds: delayRenderTimeoutInMilliseconds ?? undefined
@@ -14199,7 +14274,7 @@ var CanvasImageContent = forwardRef10(({
     maxRetries,
     onError
   ]);
-  useLayoutEffect10(() => {
+  useLayoutEffect11(() => {
     if (!loadedImage || !outputCanvas || !sourceCanvas) {
       return;
     }
@@ -14527,7 +14602,7 @@ var ImgContent = ({
     } catch {}
   }, [cancelRender2, maxRetries, onError, retryIn]);
   if (typeof window !== "undefined") {
-    useLayoutEffect11(() => {
+    useLayoutEffect12(() => {
       if (!pauseWhenLoading || !isLoading || isPremounting || isPostmounting) {
         return;
       }
@@ -14539,7 +14614,7 @@ var ImgContent = ({
       isPremounting,
       pauseWhenLoading
     ]);
-    useLayoutEffect11(() => {
+    useLayoutEffect12(() => {
       if (window.process?.env?.NODE_ENV === "test") {
         if (imageRef.current) {
           imageRef.current.src = actualSrc;
@@ -14890,7 +14965,8 @@ var makeRemotionComponentIdentity = ({
 };
 var interactiveElementSchema = {
   ...baseSchema,
-  ...transformSchema
+  ...transformSchema,
+  ...cropSchema
 };
 var interactiveBackgroundElementSchema = {
   ...interactiveElementSchema,
@@ -14947,8 +15023,21 @@ var makeInteractiveElement = (tag, displayName, schema) => {
       name,
       showInTimeline,
       controls,
+      cropLeft,
+      cropRight,
+      cropTop,
+      cropBottom,
+      style,
       ...props2
     } = propsWithControls;
+    const croppedStyle = useCropStyle({
+      cropLeft,
+      cropRight,
+      cropTop,
+      cropBottom,
+      style: style ?? null,
+      componentName: displayName
+    });
     const refForOutline = useRef26(null);
     const callbackRef = useCallback21((element) => {
       refForOutline.current = element;
@@ -14968,6 +15057,7 @@ var makeInteractiveElement = (tag, displayName, schema) => {
       outlineRef: refForOutline,
       children: React31.createElement(tag, {
         ...props2,
+        style: croppedStyle ?? undefined,
         ref: callbackRef
       })
     });
@@ -15669,7 +15759,7 @@ var OffthreadVideoForRendering = ({
   }, [toneMapped, currentTime, src, transparent]);
   const [imageSrc, setImageSrc] = useState20(null);
   const { delayRender: delayRender2, continueRender: continueRender2 } = useDelayRender();
-  useLayoutEffect12(() => {
+  useLayoutEffect13(() => {
     if (!window.remotion_videoEnabled) {
       return;
     }
@@ -16204,6 +16294,7 @@ var WATCH_REMOTION_STATIC_FILES = "remotion_staticFilesChanged";
 function useRemotionContexts() {
   const compositionManagerCtx = React41.useContext(CompositionManager);
   const timelineContext = React41.useContext(TimelineContext);
+  const timelineImperativeContext = React41.useContext(TimelineImperativeContext);
   const setTimelineContext = React41.useContext(SetTimelineContext);
   const sequenceContext = React41.useContext(SequenceContext);
   const nonceContext = React41.useContext(NonceContext);
@@ -16219,6 +16310,7 @@ function useRemotionContexts() {
   return useMemo39(() => ({
     compositionManagerCtx,
     timelineContext,
+    timelineImperativeContext,
     setTimelineContext,
     sequenceContext,
     nonceContext,
@@ -16237,6 +16329,7 @@ function useRemotionContexts() {
     sequenceContext,
     setTimelineContext,
     timelineContext,
+    timelineImperativeContext,
     canUseRemotionHooksContext,
     preloadContext,
     resolveCompositionContext,
@@ -16270,15 +16363,18 @@ var RemotionContextProvider = (props2) => {
                     value: contexts.renderAssetManagerContext,
                     children: /* @__PURE__ */ jsx37(ResolveCompositionContext.Provider, {
                       value: contexts.resolveCompositionContext,
-                      children: /* @__PURE__ */ jsx37(TimelineContext.Provider, {
-                        value: contexts.timelineContext,
-                        children: /* @__PURE__ */ jsx37(SetTimelineContext.Provider, {
-                          value: contexts.setTimelineContext,
-                          children: /* @__PURE__ */ jsx37(SequenceContext.Provider, {
-                            value: contexts.sequenceContext,
-                            children: /* @__PURE__ */ jsx37(BufferingContextReact.Provider, {
-                              value: contexts.bufferManagerContext,
-                              children
+                      children: /* @__PURE__ */ jsx37(TimelineImperativeContext.Provider, {
+                        value: contexts.timelineImperativeContext,
+                        children: /* @__PURE__ */ jsx37(TimelineContext.Provider, {
+                          value: contexts.timelineContext,
+                          children: /* @__PURE__ */ jsx37(SetTimelineContext.Provider, {
+                            value: contexts.setTimelineContext,
+                            children: /* @__PURE__ */ jsx37(SequenceContext.Provider, {
+                              value: contexts.sequenceContext,
+                              children: /* @__PURE__ */ jsx37(BufferingContextReact.Provider, {
+                                value: contexts.bufferManagerContext,
+                                children
+                              })
                             })
                           })
                         })
@@ -16422,6 +16518,7 @@ var Internals = {
   TimelinePosition: exports_timeline_position_state,
   DelayRenderContextType,
   TimelineContext,
+  TimelineImperativeContext,
   PlaybackRateContext,
   AbsoluteTimeContext,
   RenderAssetManagerProvider,
@@ -17006,7 +17103,7 @@ var VideoForRenderingForwardFunction = ({
   ]);
   const { src } = props2;
   if (environment.isRendering) {
-    useLayoutEffect13(() => {
+    useLayoutEffect14(() => {
       if (window.process?.env?.NODE_ENV === "test") {
         return;
       }

package/dist/tailwind.css

@@ -220,6 +220,9 @@
   .mt-\[3px\] {
     margin-top: 3px;
   }
+  .mt-\[60px\] {
+    margin-top: 60px;
+  }
   .mt-\[75px\] {
     margin-top: 75px;
   }
@@ -271,6 +274,9 @@
   .mb-10 {
     margin-bottom: calc(var(--spacing) * 10);
   }
+  .mb-16 {
+    margin-bottom: calc(var(--spacing) * 16);
+  }
   .mb-20 {
     margin-bottom: calc(var(--spacing) * 20);
   }
@@ -1493,6 +1499,11 @@
       max-width: 400px;
     }
   }
+  .md\:grid-cols-2 {
+    @media (width >= 48rem) {
+      grid-template-columns: repeat(2, minmax(0, 1fr));
+    }
+  }
   .md\:flex-col {
     @media (width >= 48rem) {
       flex-direction: column;
@@ -1575,14 +1586,14 @@
       margin-left: auto;
     }
   }
-  .lg\:aspect-square {
+  .lg\:flex {
     @media (width >= 64rem) {
-      aspect-ratio: 1 / 1;
+      display: flex;
     }
   }
-  .lg\:w-\[300px\] {
+  .lg\:aspect-square {
     @media (width >= 64rem) {
-      width: 300px;
+      aspect-ratio: 1 / 1;
     }
   }
   .lg\:w-auto {