remotion 4.0.498 → 4.0.500

package/dist/esm/index.mjs

@@ -1310,7 +1310,7 @@ var getSingleChildComponent = (children) => {
 };
 
 // src/version.ts
-var VERSION = "4.0.498";
+var VERSION = "4.0.500";
 
 // src/multiple-versions-warning.ts
 var checkMultipleRemotionVersions = () => {
@@ -1388,42 +1388,6 @@ import {
   useRef as useRef3,
   useState as useState2
 } from "react";
-
-// src/random.ts
-function mulberry32(a) {
-  let t = a + 1831565813;
-  t = Math.imul(t ^ t >>> 15, t | 1);
-  t ^= t + Math.imul(t ^ t >>> 7, t | 61);
-  return ((t ^ t >>> 14) >>> 0) / 4294967296;
-}
-function hashCode(str) {
-  let i = 0;
-  let chr = 0;
-  let hash = 0;
-  for (i = 0;i < str.length; i++) {
-    chr = str.charCodeAt(i);
-    hash = (hash << 5) - hash + chr;
-    hash |= 0;
-  }
-  return hash;
-}
-var random = (seed, dummy) => {
-  if (dummy !== undefined) {
-    throw new TypeError("random() takes only one argument");
-  }
-  if (seed === null) {
-    return Math.random();
-  }
-  if (typeof seed === "string") {
-    return mulberry32(hashCode(seed));
-  }
-  if (typeof seed === "number") {
-    return mulberry32(seed * 10000000000);
-  }
-  throw new Error("random() argument must be a number or a string");
-};
-
-// src/TimelineContext.tsx
 import { jsx as jsx8 } from "react/jsx-runtime";
 var SetTimelineContext = createContext13({
   setFrame: () => {
@@ -1441,7 +1405,6 @@ var TimelineContextProvider = ({ children, frameState }) => {
   const imperativePlaying = useRef3(false);
   const [playbackRate, setPlaybackRate] = useState2(1);
   const audioAndVideoTags = useRef3([]);
-  const [remotionRootId] = useState2(() => String(random(null)));
   const [_frame, setFrame] = useState2(() => getInitialFrameState());
   const frame = frameState ?? _frame;
   const { delayRender: delayRender2, continueRender: continueRender2 } = useDelayRender();
@@ -1476,10 +1439,9 @@ var TimelineContextProvider = ({ children, frameState }) => {
       frame,
       playing,
       imperativePlaying,
-      rootId: remotionRootId,
       audioAndVideoTags
     };
-  }, [frame, playing, remotionRootId]);
+  }, [frame, playing]);
   const playbackRateContextValue = useMemo8(() => {
     return {
       playbackRate,
@@ -1886,6 +1848,29 @@ var backgroundSchema = {
     description: "Color"
   }
 };
+var svgStrokeSchema = {
+  stroke: {
+    type: "color",
+    default: "none",
+    description: "Stroke"
+  },
+  strokeWidth: {
+    type: "number",
+    default: 1,
+    description: "Stroke width",
+    min: 0,
+    step: 1,
+    hiddenFromList: false
+  }
+};
+var svgPaintSchema = {
+  fill: {
+    type: "color",
+    default: undefined,
+    description: "Fill"
+  },
+  ...svgStrokeSchema
+};
 var textContentSchema = {
   children: {
     type: "text-content",
@@ -1916,7 +1901,51 @@ var premountSchema = {
 var sequencePremountSchema = {
   ...premountSchema
 };
+var cropSchema = {
+  cropLeft: {
+    type: "number",
+    default: 0,
+    description: "Crop left",
+    min: 0,
+    max: 1,
+    step: 0.01,
+    hiddenFromList: false,
+    keyframable: true
+  },
+  cropRight: {
+    type: "number",
+    default: 0,
+    description: "Crop right",
+    min: 0,
+    max: 1,
+    step: 0.01,
+    hiddenFromList: false,
+    keyframable: true
+  },
+  cropTop: {
+    type: "number",
+    default: 0,
+    description: "Crop top",
+    min: 0,
+    max: 1,
+    step: 0.01,
+    hiddenFromList: false,
+    keyframable: true
+  },
+  cropBottom: {
+    type: "number",
+    default: 0,
+    description: "Crop bottom",
+    min: 0,
+    max: 1,
+    step: 0.01,
+    hiddenFromList: false,
+    keyframable: true
+  }
+};
+var sequenceCropSchema = cropSchema;
 var sequenceStyleSchema = {
+  ...sequenceCropSchema,
   ...transformSchema,
   ...backgroundSchema,
   ...borderSchema,
@@ -2006,6 +2035,56 @@ var sequenceSchemaDefaultLayoutNone = {
   }
 };
 
+// src/sequence-crop.ts
+var clampCrop = (value) => {
+  return Math.min(1, Math.max(0, value ?? 0));
+};
+var resolveAxis = (start, end) => {
+  const resolvedStart = clampCrop(start);
+  const resolvedEnd = clampCrop(end);
+  if (resolvedStart + resolvedEnd > 1) {
+    return [0.5, 0.5];
+  }
+  return [resolvedStart, resolvedEnd];
+};
+var resolveSequenceCrop = ({
+  cropLeft,
+  cropRight,
+  cropTop,
+  cropBottom
+}) => {
+  const [left, right] = resolveAxis(cropLeft, cropRight);
+  const [top, bottom] = resolveAxis(cropTop, cropBottom);
+  return { left, right, top, bottom };
+};
+var getSequenceCropClipPath = ({
+  left,
+  right,
+  top,
+  bottom,
+  borderRadius
+}) => {
+  if (left === 0 && right === 0 && top === 0 && bottom === 0) {
+    return null;
+  }
+  const serializedBorderRadius = typeof borderRadius === "number" ? `${borderRadius}px` : borderRadius;
+  const rounded = serializedBorderRadius ? ` round ${serializedBorderRadius}` : "";
+  return `inset(${top * 100}% ${right * 100}% ${bottom * 100}% ${left * 100}%${rounded})`;
+};
+var validateSequenceCrop = (crop, componentName = "<Sequence />") => {
+  for (const [name, value] of Object.entries(crop)) {
+    if (value === undefined) {
+      continue;
+    }
+    if (typeof value !== "number" || !Number.isFinite(value)) {
+      throw new TypeError(`The "${name}" prop of ${componentName} must be a finite number, but got ${String(value)}.`);
+    }
+    if (value < 0 || value > 1) {
+      throw new RangeError(`The "${name}" prop of ${componentName} must be between 0 and 1, but got ${value}.`);
+    }
+  }
+};
+
 // src/SequenceManager.tsx
 import React12, { useCallback as useCallback5, useMemo as useMemo12, useRef as useRef4, useState as useState3 } from "react";
 import { jsx as jsx10 } from "react/jsx-runtime";
@@ -4487,7 +4566,7 @@ var withInteractivitySchema = ({
   const flatKeys = Object.keys(flatSchema);
   const Wrapped = forwardRef2((props, ref) => {
     const env = useRemotionEnvironment();
-    if (!env.isStudio || env.isReadOnlyStudio || env.isRendering) {
+    if (!env.isStudio || env.isRendering) {
       return React14.createElement(Component, {
         ...props,
         controls: null,
@@ -4517,7 +4596,7 @@ var withInteractivitySchema = ({
       stackToOverrideMap[stack] = newOverrideId;
       return newOverrideId;
     });
-    const nodePath = nodePathMapping.overrideIdToNodePathMappings[overrideId] ?? null;
+    const nodePath = env.isReadOnlyStudio ? null : nodePathMapping.overrideIdToNodePathMappings[overrideId] ?? null;
     const runtimeValues = flatKeys.map((key) => getRuntimeValueForSchemaKey({
       flatSchema,
       key,
@@ -4591,17 +4670,32 @@ var RegularSequenceRefForwardingFunction = ({
   _remotionInternalPostmountDisplay: postmountDisplay,
   _remotionInternalIsMedia: isMedia,
   outlineRef: passedRefForOutline,
+  cropLeft,
+  cropRight,
+  cropTop,
+  cropBottom,
   ...other
 }, ref) => {
   const { layout = "absolute-fill" } = other;
   const [id] = useState5(() => String(Math.random()));
   const parentSequence = useContext18(SequenceContext);
-  const { rootId } = useTimelineContext();
   const cumulatedFrom = parentSequence ? parentSequence.cumulatedFrom + parentSequence.relativeFrom : 0;
   const nonce = useNonce();
   if (layout !== "absolute-fill" && layout !== "none") {
     throw new TypeError(`The layout prop of <Sequence /> expects either "absolute-fill" or "none", but you passed: ${layout}`);
   }
+  const cropProps = { cropLeft, cropRight, cropTop, cropBottom };
+  const hasCropProp = Object.values(cropProps).some((value) => value !== undefined);
+  if (layout === "none" && hasCropProp) {
+    throw new TypeError('The cropLeft, cropRight, cropTop and cropBottom props of <Sequence /> are only supported with layout="absolute-fill".');
+  }
+  validateSequenceCrop(cropProps);
+  const {
+    left: resolvedCropLeft,
+    right: resolvedCropRight,
+    top: resolvedCropTop,
+    bottom: resolvedCropBottom
+  } = resolveSequenceCrop(cropProps);
   if (layout === "none" && typeof other.style !== "undefined") {
     throw new TypeError('If layout="none", you may not pass a style. Passed: ' + JSON.stringify(other.style));
   }
@@ -4727,7 +4821,6 @@ var RegularSequenceRefForwardingFunction = ({
           parent: parentSequence?.id ?? null,
           postmountDisplay: postmountDisplay ?? null,
           premountDisplay: premountDisplay ?? null,
-          rootId,
           showInTimeline,
           src: isMedia.src,
           getStack: () => stackRef.current,
@@ -4754,7 +4847,6 @@ var RegularSequenceRefForwardingFunction = ({
           playbackRate: isMedia.data.playbackRate,
           postmountDisplay: postmountDisplay ?? null,
           premountDisplay: premountDisplay ?? null,
-          rootId,
           showInTimeline,
           src: isMedia.data.src,
           getStack: () => stackRef.current,
@@ -4781,7 +4873,6 @@ var RegularSequenceRefForwardingFunction = ({
       documentationLink: resolvedDocumentationLink,
       parent: parentSequence?.id ?? null,
       type: "sequence",
-      rootId,
       showInTimeline,
       nonce: nonce.get(),
       loopDisplay,
@@ -4807,7 +4898,6 @@ var RegularSequenceRefForwardingFunction = ({
     unregisterSequence,
     parentSequence?.id,
     actualDurationInFrames,
-    rootId,
     from,
     trimBefore,
     registeredTrimBefore,
@@ -4836,6 +4926,13 @@ var RegularSequenceRefForwardingFunction = ({
     children: content
   });
   const styleIfThere = other.layout === "none" ? undefined : other.style;
+  const cropClipPath = getSequenceCropClipPath({
+    left: resolvedCropLeft,
+    right: resolvedCropRight,
+    top: resolvedCropTop,
+    bottom: resolvedCropBottom,
+    borderRadius: styleIfThere?.borderRadius
+  });
   const sequenceRef = useCallback6((node) => {
     wrapperRefForOutline.current = node;
     if (typeof ref === "function") {
@@ -4849,9 +4946,12 @@ var RegularSequenceRefForwardingFunction = ({
       flexDirection: undefined,
       ...width ? { width } : {},
       ...height ? { height } : {},
-      ...styleIfThere ?? {}
+      ...styleIfThere ?? {},
+      ...cropClipPath ? {
+        clipPath: cropClipPath
+      } : {}
     };
-  }, [height, styleIfThere, width]);
+  }, [cropClipPath, height, styleIfThere, width]);
   if (ref !== null && layout === "none") {
     throw new TypeError('It is not supported to pass both a `ref` and `layout="none"` to <Sequence />.');
   }
@@ -4960,8 +5060,31 @@ import {
   useState as useState6
 } from "react";
 
+// src/use-crop-style.ts
+import { useMemo as useMemo16 } from "react";
+var useCropStyle = ({
+  cropLeft,
+  cropRight,
+  cropTop,
+  cropBottom,
+  style,
+  componentName
+}) => {
+  validateSequenceCrop({ cropLeft, cropRight, cropTop, cropBottom }, componentName);
+  return useMemo16(() => {
+    const cropClipPath = getSequenceCropClipPath({
+      ...resolveSequenceCrop({ cropLeft, cropRight, cropTop, cropBottom }),
+      borderRadius: style?.borderRadius
+    });
+    if (cropClipPath === null) {
+      return style;
+    }
+    return { ...style, clipPath: cropClipPath };
+  }, [cropBottom, cropLeft, cropRight, cropTop, style]);
+};
+
 // src/animated-image/canvas.tsx
-import React16, { useCallback as useCallback7, useImperativeHandle, useMemo as useMemo17, useRef as useRef8 } from "react";
+import React16, { useCallback as useCallback7, useImperativeHandle, useMemo as useMemo18, useRef as useRef8 } from "react";
 
 // src/calculate-image-fit.ts
 var calculateImageFit = (fit, imageSize, canvasSize) => {
@@ -5257,7 +5380,7 @@ var runEffectChain = async ({
 };
 
 // src/effects/use-effect-chain-state.ts
-import { useEffect as useEffect4, useMemo as useMemo16, useRef as useRef7 } from "react";
+import { useEffect as useEffect4, useMemo as useMemo17, useRef as useRef7 } from "react";
 var useEffectChainState = () => {
   const chainStateRef = useRef7(null);
   const sizeRef = useRef7(null);
@@ -5268,7 +5391,7 @@ var useEffectChainState = () => {
       }
     };
   }, []);
-  return useMemo16(() => ({
+  return useMemo17(() => ({
     get: (width, height) => {
       if (!sizeRef.current || sizeRef.current.width !== width || sizeRef.current.height !== height) {
         if (chainStateRef.current) {
@@ -5287,7 +5410,7 @@ import { jsx as jsx13 } from "react/jsx-runtime";
 var CanvasRefForwardingFunction = ({ width, height, fit, className, style, effects, ...props }, ref) => {
   const canvasRef = useRef8(null);
   const chainState = useEffectChainState();
-  const sourceCanvas = useMemo17(() => {
+  const sourceCanvas = useMemo18(() => {
     if (typeof document === "undefined") {
       return null;
     }
@@ -5562,6 +5685,7 @@ var animatedImageSchema = {
     keyframable: false
   },
   ...baseSchema,
+  ...cropSchema,
   ...premountSchema,
   playbackRate: {
     type: "number",
@@ -5756,6 +5880,10 @@ var AnimatedImageInner = ({
   postmountFor,
   styleWhilePremounted,
   styleWhilePostmounted,
+  cropLeft,
+  cropRight,
+  cropTop,
+  cropBottom,
   requestInit,
   effects = [],
   controls,
@@ -5785,6 +5913,14 @@ var AnimatedImageInner = ({
     styleWhilePostmounted: styleWhilePostmounted ?? null,
     hideWhilePremounted: "display-none"
   });
+  const croppedStyle = useCropStyle({
+    cropLeft,
+    cropRight,
+    cropTop,
+    cropBottom,
+    style: premountingStyle,
+    componentName: "<AnimatedImage />"
+  });
   const canvasProps = getCanvasPropsFromSequenceProps(sequenceProps);
   const animatedImageProps = {
     src,
@@ -5796,7 +5932,7 @@ var AnimatedImageInner = ({
     loopBehavior,
     id,
     className,
-    style: premountingStyle ?? undefined,
+    style: croppedStyle ?? undefined,
     requestInit,
     ...canvasProps
   };
@@ -5875,7 +6011,7 @@ import {
   useCallback as useCallback8,
   useImperativeHandle as useImperativeHandle3,
   useLayoutEffect as useLayoutEffect3,
-  useMemo as useMemo18,
+  useMemo as useMemo19,
   useRef as useRef10,
   useState as useState7
 } from "react";
@@ -5956,7 +6092,7 @@ var RenderAssetManagerProvider = ({ children, collectAssets }) => {
       };
     }
   }, []);
-  const contextValue = useMemo18(() => {
+  const contextValue = useMemo19(() => {
     return {
       registerRenderAsset,
       unregisterRenderAsset,
@@ -6061,7 +6197,7 @@ var calculateMediaDuration = ({
 };
 
 // src/loop/index.tsx
-import React17, { createContext as createContext18, useMemo as useMemo19 } from "react";
+import React17, { createContext as createContext18, useMemo as useMemo20 } from "react";
 import { jsx as jsx16 } from "react/jsx-runtime";
 var LoopContext = createContext18(null);
 var useLoop = () => {
@@ -6097,14 +6233,14 @@ var Loop = ({
   const iteration = Math.floor(currentFrame / durationInFrames);
   const start = iteration * durationInFrames;
   const from = Math.min(start, maxFrame);
-  const loopDisplay = useMemo19(() => {
+  const loopDisplay = useMemo20(() => {
     return {
       numberOfTimes: Math.min(compDuration / durationInFrames, times),
       startOffset: -from,
       durationInFrames
     };
   }, [compDuration, durationInFrames, from, times]);
-  const loopContext = useMemo19(() => {
+  const loopContext = useMemo20(() => {
     return {
       iteration: Math.floor(currentFrame / durationInFrames),
       durationInFrames
@@ -6469,7 +6605,7 @@ var resolveTrimProps = ({
 };
 
 // src/video/duration-state.tsx
-import { createContext as createContext20, useMemo as useMemo20, useReducer } from "react";
+import { createContext as createContext20, useMemo as useMemo21, useReducer } from "react";
 import { jsx as jsx18 } from "react/jsx-runtime";
 var durationReducer = (state, action) => {
   switch (action.type) {
@@ -6495,7 +6631,7 @@ var DurationsContext = createContext20({
 });
 var DurationsContextProvider = ({ children }) => {
   const [durations, setDurations] = useReducer(durationReducer, {});
-  const value = useMemo20(() => {
+  const value = useMemo21(() => {
     return {
       durations,
       setDurations
@@ -6514,7 +6650,7 @@ import React23, {
   useContext as useContext29,
   useEffect as useEffect14,
   useImperativeHandle as useImperativeHandle4,
-  useMemo as useMemo28,
+  useMemo as useMemo29,
   useRef as useRef19,
   useState as useState14
 } from "react";
@@ -6537,6 +6673,40 @@ var getCrossOriginValue = ({
   return;
 };
 
+// src/random.ts
+function mulberry32(a2) {
+  let t = a2 + 1831565813;
+  t = Math.imul(t ^ t >>> 15, t | 1);
+  t ^= t + Math.imul(t ^ t >>> 7, t | 61);
+  return ((t ^ t >>> 14) >>> 0) / 4294967296;
+}
+function hashCode(str) {
+  let i = 0;
+  let chr = 0;
+  let hash = 0;
+  for (i = 0;i < str.length; i++) {
+    chr = str.charCodeAt(i);
+    hash = (hash << 5) - hash + chr;
+    hash |= 0;
+  }
+  return hash;
+}
+var random = (seed, dummy) => {
+  if (dummy !== undefined) {
+    throw new TypeError("random() takes only one argument");
+  }
+  if (seed === null) {
+    return Math.random();
+  }
+  if (typeof seed === "string") {
+    return mulberry32(hashCode(seed));
+  }
+  if (typeof seed === "number") {
+    return mulberry32(seed * 10000000000);
+  }
+  throw new Error("random() argument must be a number or a string");
+};
+
 // src/use-amplification.ts
 import { useContext as useContext22, useLayoutEffect as useLayoutEffect5, useRef as useRef14 } from "react";
 
@@ -6547,7 +6717,7 @@ import React20, {
   useCallback as useCallback9,
   useContext as useContext21,
   useEffect as useEffect7,
-  useMemo as useMemo22,
+  useMemo as useMemo23,
   useRef as useRef12,
   useState as useState10
 } from "react";
@@ -6652,7 +6822,7 @@ var makeSharedElementSourceNode = ({
 };
 
 // src/audio/use-audio-context.ts
-import { useMemo as useMemo21, useRef as useRef11 } from "react";
+import { useMemo as useMemo22, useRef as useRef11 } from "react";
 var warned = false;
 var warnOnce = (logLevel) => {
   if (warned) {
@@ -6674,7 +6844,7 @@ var useSingletonAudioContext = ({
   if (sampleRate !== initialSampleRate.current) {
     throw new Error(`Changing the AudioContext sample rate dynamically is not supported. The sample rate was initialized with ${initialSampleRate.current} Hz, but ${sampleRate} Hz was passed later.`);
   }
-  const context = useMemo21(() => {
+  const context = useMemo22(() => {
     if (env.isRendering) {
       return null;
     }
@@ -6813,9 +6983,9 @@ var SharedAudioContextProvider = ({ children, audioLatencyHint, audioEnabled, pr
   });
   const audioContextIsPlayingEventually = useRef12(false);
   const isResuming = useRef12(null);
-  const audioSyncAnchor = useMemo22(() => ({ value: 0 }), []);
+  const audioSyncAnchor = useMemo23(() => ({ value: 0 }), []);
   const audioSyncAnchorListeners = useRef12([]);
-  const audioSyncAnchorEmitter = useMemo22(() => {
+  const audioSyncAnchorEmitter = useMemo23(() => {
     return {
       dispatch: (event) => {
         audioSyncAnchorListeners.current.forEach((l) => l(event));
@@ -6835,7 +7005,7 @@ var SharedAudioContextProvider = ({ children, audioLatencyHint, audioEnabled, pr
   const unscheduleAudioNode = useCallback9((node) => {
     nodesToResume.current.delete(node);
   }, []);
-  const scheduleAudioNode = useMemo22(() => {
+  const scheduleAudioNode = useMemo23(() => {
     return ({
       node,
       mediaTimestamp,
@@ -6927,7 +7097,7 @@ var SharedAudioContextProvider = ({ children, audioLatencyHint, audioEnabled, pr
     audioContextIsPlayingEventually.current = false;
     return ctxAndGain.suspend();
   }, [ctxAndGain]);
-  const audioContextValue = useMemo22(() => {
+  const audioContextValue = useMemo23(() => {
     return {
       audioContext: ctxAndGain?.audioContext ?? null,
       getAudioContextState: () => ctxAndGain?.getState() ?? null,
@@ -7109,7 +7279,7 @@ var SharedAudioTagsContextProvider = ({ children, numberOfAudioTags }) => {
     });
     resume?.();
   }, [logLevel, mountTime, refs, env.isPlayer, resume]);
-  const audioTagsValue = useMemo22(() => {
+  const audioTagsValue = useMemo23(() => {
     return {
       registerAudio,
       unregisterAudio,
@@ -7124,7 +7294,7 @@ var SharedAudioTagsContextProvider = ({ children, numberOfAudioTags }) => {
     unregisterAudio,
     updateAudio
   ]);
-  const sharedAudioTagElements = useMemo22(() => {
+  const sharedAudioTagElements = useMemo23(() => {
     return refs.map(({ id, ref }) => {
       return /* @__PURE__ */ jsx19("audio", {
         ref,
@@ -7401,7 +7571,7 @@ var useVolume = ({
 };
 
 // src/use-media-in-timeline.ts
-import { useContext as useContext24, useEffect as useEffect8, useMemo as useMemo23, useState as useState11 } from "react";
+import { useContext as useContext24, useEffect as useEffect8, useMemo as useMemo24, useState as useState11 } from "react";
 
 // src/audio/use-audio-frame.ts
 import { useContext as useContext23 } from "react";
@@ -7513,7 +7683,7 @@ var useBasicMediaInTimeline = ({
     parentSequenceDurationInFrames: parentSequence?.durationInFrames ?? null,
     loop
   });
-  const volumes = useMemo23(() => {
+  const volumes = useMemo24(() => {
     if (typeof volume === "number") {
       return volume;
     }
@@ -7532,15 +7702,13 @@ var useBasicMediaInTimeline = ({
   }, [initialVolume, mediaType, src, volume]);
   const doesVolumeChange = typeof volume === "function";
   const nonce = useNonce();
-  const { rootId } = useTimelineContext();
   const startMediaFrom = 0 - mediaStartsAt + (trimBefore ?? 0);
-  const memoizedResult = useMemo23(() => {
+  const memoizedResult = useMemo24(() => {
     return {
       volumes,
       duration,
       doesVolumeChange,
       nonce,
-      rootId,
       finalDisplayName: displayName ?? getAssetDisplayName(src),
       startMediaFrom,
       src,
@@ -7551,7 +7719,6 @@ var useBasicMediaInTimeline = ({
     duration,
     doesVolumeChange,
     nonce,
-    rootId,
     displayName,
     src,
     startMediaFrom,
@@ -7580,7 +7747,7 @@ var useMediaInTimeline = ({
   const { registerSequence, unregisterSequence } = useContext24(SequenceManager);
   const { durationInFrames } = useVideoConfig();
   const mediaStartsAt = useMediaStartsAt();
-  const { volumes, duration, doesVolumeChange, nonce, rootId, finalDisplayName } = useBasicMediaInTimeline({
+  const { volumes, duration, doesVolumeChange, nonce, finalDisplayName } = useBasicMediaInTimeline({
     volume,
     mediaVolume,
     mediaType,
@@ -7614,7 +7781,6 @@ var useMediaInTimeline = ({
       parent: parentSequence?.id ?? null,
       displayName: finalDisplayName,
       documentationLink,
-      rootId,
       volume: volumes,
       showInTimeline: true,
       nonce: nonce.get(),
@@ -7655,7 +7821,6 @@ var useMediaInTimeline = ({
     postmountDisplay,
     loopDisplay,
     documentationLink,
-    rootId,
     finalDisplayName,
     isStudio,
     refForOutline
@@ -7672,10 +7837,10 @@ import {
 } from "react";
 
 // src/buffer-until-first-frame.ts
-import { useCallback as useCallback11, useMemo as useMemo26, useRef as useRef16 } from "react";
+import { useCallback as useCallback11, useMemo as useMemo27, useRef as useRef16 } from "react";
 
 // src/use-buffer-state.ts
-import { useContext as useContext26, useMemo as useMemo25 } from "react";
+import { useContext as useContext26, useMemo as useMemo26 } from "react";
 
 // src/buffering.tsx
 import React21, {
@@ -7683,7 +7848,7 @@ import React21, {
   useContext as useContext25,
   useEffect as useEffect9,
   useLayoutEffect as useLayoutEffect6,
-  useMemo as useMemo24,
+  useMemo as useMemo25,
   useRef as useRef15,
   useState as useState12
 } from "react";
@@ -7769,7 +7934,7 @@ var useBufferManager = (logLevel, mountTime) => {
       }
     }, [blocks]);
   }
-  return useMemo24(() => {
+  return useMemo25(() => {
     return { addBlock, listenForBuffering, listenForResume, buffering };
   }, [addBlock, buffering, listenForBuffering, listenForResume]);
 };
@@ -7806,7 +7971,7 @@ var useBufferState = () => {
   const buffer = useContext26(BufferingContextReact);
   const logLevel = useLogLevel();
   const addBlock = buffer ? buffer.addBlock : null;
-  return useMemo25(() => ({
+  return useMemo26(() => ({
     delayPlayback: () => {
       if (!addBlock) {
         throw new Error("Tried to enable the buffering state, but a Remotion context was not found. This API can only be called in a component that was passed to the Remotion Player or a <Composition>. Or you might have experienced a version mismatch - run `npx remotion versions` and ensure all packages have the same version. This error is thrown by the buffer state https://remotion.dev/docs/player/buffer-state");
@@ -7916,7 +8081,7 @@ var useBufferUntilFirstFrame = ({
     onVariableFpsVideoDetected,
     pauseWhenBuffering
   ]);
-  return useMemo26(() => {
+  return useMemo27(() => {
     return {
       isBuffering: () => bufferingRef.current,
       bufferUntilFirstFrame
@@ -8596,7 +8761,7 @@ var useMediaTag = ({
 };
 
 // src/volume-position-state.ts
-import { createContext as createContext22, useContext as useContext28, useMemo as useMemo27 } from "react";
+import { createContext as createContext22, useContext as useContext28, useMemo as useMemo28 } from "react";
 var MediaVolumeContext = createContext22({
   playerMuted: false,
   mediaVolume: 1
@@ -8612,14 +8777,14 @@ var SetMediaVolumeContext = createContext22({
 var useMediaVolumeState = () => {
   const { mediaVolume } = useContext28(MediaVolumeContext);
   const { setMediaVolume } = useContext28(SetMediaVolumeContext);
-  return useMemo27(() => {
+  return useMemo28(() => {
     return [mediaVolume, setMediaVolume];
   }, [mediaVolume, setMediaVolume]);
 };
 var usePlayerMutedState = () => {
   const { playerMuted } = useContext28(MediaVolumeContext);
   const { setPlayerMuted } = useContext28(SetMediaVolumeContext);
-  return useMemo27(() => {
+  return useMemo28(() => {
     return [playerMuted, setPlayerMuted];
   }, [playerMuted, setPlayerMuted]);
 };
@@ -8691,7 +8856,7 @@ var AudioForDevelopmentForwardRefFunction = (props, ref) => {
     requestsVideoFrame: false,
     isClientSideRendering: false
   });
-  const propsToPass = useMemo28(() => {
+  const propsToPass = useMemo29(() => {
     return {
       muted: muted || playerMuted || userPreferredVolume <= 0,
       src: preloadedSrc,
@@ -8708,7 +8873,7 @@ var AudioForDevelopmentForwardRefFunction = (props, ref) => {
     userPreferredVolume,
     crossOriginValue
   ]);
-  const id = useMemo28(() => `audio-${random(src ?? "")}-${sequenceContext?.relativeFrom}-${sequenceContext?.cumulatedFrom}-${sequenceContext?.durationInFrames}-muted:${props.muted}-loop:${props.loop}`, [
+  const id = useMemo29(() => `audio-${random(src ?? "")}-${sequenceContext?.relativeFrom}-${sequenceContext?.cumulatedFrom}-${sequenceContext?.durationInFrames}-muted:${props.muted}-loop:${props.loop}`, [
     src,
     sequenceContext?.relativeFrom,
     sequenceContext?.cumulatedFrom,
@@ -8822,7 +8987,7 @@ import {
   useEffect as useEffect15,
   useImperativeHandle as useImperativeHandle5,
   useLayoutEffect as useLayoutEffect8,
-  useMemo as useMemo29,
+  useMemo as useMemo30,
   useRef as useRef20
 } from "react";
 import { jsx as jsx22 } from "react/jsx-runtime";
@@ -8853,7 +9018,7 @@ var AudioForRenderingRefForwardingFunction = (props, ref) => {
   const sequenceContext = useContext30(SequenceContext);
   const { registerRenderAsset, unregisterRenderAsset } = useContext30(RenderAssetManager);
   const { delayRender: delayRender2, continueRender: continueRender2 } = useDelayRender();
-  const id = useMemo29(() => `audio-${random(props.src ?? "")}-${sequenceContext?.relativeFrom}-${sequenceContext?.cumulatedFrom}-${sequenceContext?.durationInFrames}`, [
+  const id = useMemo30(() => `audio-${random(props.src ?? "")}-${sequenceContext?.relativeFrom}-${sequenceContext?.cumulatedFrom}-${sequenceContext?.durationInFrames}`, [
     props.src,
     sequenceContext?.relativeFrom,
     sequenceContext?.cumulatedFrom,
@@ -9093,7 +9258,7 @@ import {
   useCallback as useCallback15,
   useEffect as useEffect16,
   useImperativeHandle as useImperativeHandle6,
-  useMemo as useMemo30,
+  useMemo as useMemo31,
   useRef as useRef21,
   useState as useState15
 } from "react";
@@ -9141,7 +9306,8 @@ var solidSchema = {
   },
   ...transformSchema,
   ...backgroundSchema,
-  ...borderSchema
+  ...borderSchema,
+  ...cropSchema
 };
 var SolidInner = ({
   color,
@@ -9163,7 +9329,7 @@ var SolidInner = ({
     effects,
     overrideId: overrideId ?? null
   });
-  const sourceCanvas = useMemo30(() => {
+  const sourceCanvas = useMemo31(() => {
     if (typeof document === "undefined") {
       return null;
     }
@@ -9231,7 +9397,7 @@ var SolidInner = ({
     cancelRender2,
     memoizedEffects
   ]);
-  const canvasStyle = useMemo30(() => {
+  const canvasStyle = useMemo31(() => {
     return {
       width,
       height,
@@ -9262,6 +9428,10 @@ var SolidOuter = forwardRef8(({
   hidden,
   showInTimeline,
   pixelDensity,
+  cropLeft,
+  cropRight,
+  cropTop,
+  cropBottom,
   ...props2
 }, ref) => {
   const memoizedEffectDefinitions = useMemoizedEffectDefinitions(effects);
@@ -9269,6 +9439,14 @@ var SolidOuter = forwardRef8(({
   useImperativeHandle6(ref, () => {
     return actualRef.current;
   }, []);
+  const croppedStyle = useCropStyle({
+    cropLeft,
+    cropRight,
+    cropTop,
+    cropBottom,
+    style: style ?? null,
+    componentName: "<Solid />"
+  });
   return /* @__PURE__ */ jsx24(Sequence, {
     layout: "none",
     from,
@@ -9290,7 +9468,7 @@ var SolidOuter = forwardRef8(({
       height,
       width,
       className,
-      style,
+      style: croppedStyle ?? undefined,
       effects,
       pixelDensity
     })
@@ -9312,7 +9490,7 @@ import {
   useCallback as useCallback16,
   useContext as useContext32,
   useLayoutEffect as useLayoutEffect9,
-  useMemo as useMemo31,
+  useMemo as useMemo32,
   useRef as useRef22
 } from "react";
 import { jsx as jsx25 } from "react/jsx-runtime";
@@ -9330,6 +9508,17 @@ var isHtmlInCanvasSupported = () => {
   return cachedSupport;
 };
 var HTML_IN_CANVAS_UNSUPPORTED_MESSAGE = "HTML in Canvas is not supported. Two common causes: Chrome is older than version 148 (update Chrome), or the HTML-in-Canvas flag is disabled at chrome://flags/#canvas-draw-element (enable it and restart Chrome).";
+var MINIMUM_CHROME_VERSION_FOR_NESTED_HTML_IN_CANVAS = 152;
+var getChromeMajorVersion = () => {
+  if (typeof navigator === "undefined") {
+    return null;
+  }
+  const match = navigator.userAgent.match(/\b(?:HeadlessChrome|Chrome)\/(\d+)/);
+  if (!match) {
+    return null;
+  }
+  return Number(match[1]);
+};
 function assertHtmlInCanvasDimensions(width, height) {
   if (typeof width !== "number" || typeof height !== "number") {
     throw new Error(`HtmlInCanvas: \`width\` and \`height\` must be numbers. Received width=${String(width)}, height=${String(height)}.`);
@@ -9393,6 +9582,10 @@ var HtmlInCanvasContent = forwardRef9(({
 }, ref) => {
   const ancestor = useContext32(HtmlInCanvasAncestorContext);
   assertHtmlInCanvasDimensions(width, height);
+  const chromeMajorVersion = getChromeMajorVersion();
+  if (ancestor && chromeMajorVersion !== null && chromeMajorVersion < MINIMUM_CHROME_VERSION_FOR_NESTED_HTML_IN_CANVAS) {
+    throw new Error(`Nested <HtmlInCanvas> components require Chrome ${MINIMUM_CHROME_VERSION_FOR_NESTED_HTML_IN_CANVAS} or newer, but the current browser is Chrome ${chromeMajorVersion}. Upgrade Chrome or avoid nesting components that use <HtmlInCanvas>, such as shapes with effects.`);
+  }
   const resolvedPixelDensity = resolveHtmlInCanvasPixelDensity(pixelDensity);
   const canvasWidth = Math.ceil(width * resolvedPixelDensity);
   const canvasHeight = Math.ceil(height * resolvedPixelDensity);
@@ -9611,20 +9804,20 @@ var HtmlInCanvasContent = forwardRef9(({
       continueRender2(handle);
     };
   }, [width, height, continueRender2, delayRender2, canvasSizeKey]);
-  const innerStyle = useMemo31(() => {
+  const innerStyle = useMemo32(() => {
     return {
       width,
       height
     };
   }, [width, height]);
-  const canvasStyle = useMemo31(() => {
+  const canvasStyle = useMemo32(() => {
     return {
       width,
       height,
       ...style ?? {}
     };
   }, [height, style, width]);
-  const ancestorValue = useMemo31(() => {
+  const ancestorValue = useMemo32(() => {
     return {
       requestParentPaint: () => {
         canvas2dRef.current?.requestPaint?.();
@@ -9657,6 +9850,10 @@ var HtmlInCanvasInner = forwardRef9(({
   pixelDensity,
   controls,
   style,
+  cropLeft,
+  cropRight,
+  cropTop,
+  cropBottom,
   durationInFrames,
   name,
   ...sequenceProps
@@ -9671,6 +9868,14 @@ var HtmlInCanvasInner = forwardRef9(({
       ref.current = node;
     }
   }, [ref]);
+  const croppedStyle = useCropStyle({
+    cropLeft,
+    cropRight,
+    cropTop,
+    cropBottom,
+    style: style ?? null,
+    componentName: "<HtmlInCanvas />"
+  });
   return /* @__PURE__ */ jsx25(Sequence, {
     durationInFrames,
     name: name ?? "<HtmlInCanvas>",
@@ -9689,7 +9894,7 @@ var HtmlInCanvasInner = forwardRef9(({
       onInit,
       pixelDensity,
       controls,
-      style,
+      style: croppedStyle ?? undefined,
       children
     })
   });
@@ -9708,7 +9913,8 @@ var htmlInCanvasSchema = {
   },
   ...transformSchema,
   ...backgroundSchema,
-  ...borderSchema
+  ...borderSchema,
+  ...cropSchema
 };
 var HtmlInCanvasWrapped = withInteractivitySchema({
   Component: HtmlInCanvasInner,
@@ -9729,7 +9935,7 @@ import {
   useContext as useContext33,
   useImperativeHandle as useImperativeHandle7,
   useLayoutEffect as useLayoutEffect10,
-  useMemo as useMemo32,
+  useMemo as useMemo33,
   useRef as useRef23,
   useState as useState16
 } from "react";
@@ -9746,6 +9952,7 @@ function truncateSrcForLabel(src) {
 import { jsx as jsx26 } from "react/jsx-runtime";
 var canvasImageSchema = {
   ...baseSchema,
+  ...cropSchema,
   ...premountSchema,
   fit: {
     type: "enum",
@@ -9876,7 +10083,7 @@ var CanvasImageContent = forwardRef10(({
     continueRender2(pending.handle);
     pendingLoadDelayRef.current = null;
   }, [continueRender2]);
-  const sourceCanvas = useMemo32(() => {
+  const sourceCanvas = useMemo33(() => {
     if (typeof document === "undefined") {
       return null;
     }
@@ -10090,9 +10297,14 @@ var CanvasImageInner = forwardRef10(({
   hidden,
   name,
   showInTimeline,
+  cropLeft,
+  cropRight,
+  cropTop,
+  cropBottom,
   stack,
   controls,
   _remotionInternalDocumentationLink,
+  _remotionInternalCropComponentName,
   outlineRef,
   ...canvasProps
 }, ref) => {
@@ -10122,6 +10334,14 @@ var CanvasImageInner = forwardRef10(({
     styleWhilePostmounted: styleWhilePostmounted ?? null,
     hideWhilePremounted: "display-none"
   });
+  const croppedStyle = useCropStyle({
+    cropLeft,
+    cropRight,
+    cropTop,
+    cropBottom,
+    style: premountingStyle,
+    componentName: _remotionInternalCropComponentName ?? "<CanvasImage />"
+  });
   return /* @__PURE__ */ jsx26(Freeze, {
     frame: freezeFrame,
     active: isPremountingOrPostmounting,
@@ -10153,7 +10373,7 @@ var CanvasImageInner = forwardRef10(({
         effects,
         controls,
         className,
-        style: premountingStyle ?? undefined,
+        style: croppedStyle ?? undefined,
         id,
         onError,
         pauseWhenLoading,
@@ -10427,6 +10647,10 @@ var NativeImgInner = ({
   style,
   styleWhilePremounted,
   styleWhilePostmounted,
+  cropLeft,
+  cropRight,
+  cropTop,
+  cropBottom,
   controls,
   outlineRef: refForOutline,
   ...props2
@@ -10452,6 +10676,14 @@ var NativeImgInner = ({
     styleWhilePostmounted: styleWhilePostmounted ?? null,
     hideWhilePremounted: "display-none"
   });
+  const croppedStyle = useCropStyle({
+    cropLeft,
+    cropRight,
+    cropTop,
+    cropBottom,
+    style: premountingStyle,
+    componentName: "<Img />"
+  });
   return /* @__PURE__ */ jsx28(Freeze, {
     frame: freezeFrame,
     active: isPremountingOrPostmounting,
@@ -10476,7 +10708,7 @@ var NativeImgInner = ({
       children: /* @__PURE__ */ jsx28(ImgContent, {
         src,
         refForOutline,
-        style: premountingStyle ?? undefined,
+        style: croppedStyle ?? undefined,
         ...props2
       })
     })
@@ -10491,6 +10723,7 @@ var imgSchema = {
     keyframable: false
   },
   ...baseSchema,
+  ...cropSchema,
   ...premountSchema,
   ...transformSchema,
   ...backgroundSchema,
@@ -10559,6 +10792,10 @@ var ImgInner = ({
   height,
   className,
   style,
+  cropLeft,
+  cropRight,
+  cropTop,
+  cropBottom,
   id,
   pauseWhenLoading,
   maxRetries,
@@ -10590,6 +10827,10 @@ var ImgInner = ({
       height,
       className,
       style,
+      cropLeft,
+      cropRight,
+      cropTop,
+      cropBottom,
       id,
       pauseWhenLoading: shouldPauseWhenLoading,
       maxRetries,
@@ -10619,6 +10860,10 @@ var ImgInner = ({
     effects,
     className,
     style,
+    cropLeft,
+    cropRight,
+    cropTop,
+    cropBottom,
     id,
     pauseWhenLoading: shouldPauseWhenLoading,
     maxRetries,
@@ -10637,6 +10882,7 @@ var ImgInner = ({
     showInTimeline,
     stack,
     _remotionInternalDocumentationLink: "https://www.remotion.dev/docs/img",
+    _remotionInternalCropComponentName: "<Img />",
     controls,
     outlineRef: refForOutline,
     ...canvasProps
@@ -10688,9 +10934,22 @@ var interactiveTextElementSchema = {
 };
 var interactiveSvgTextElementSchema = {
   ...interactiveElementSchema,
+  ...svgPaintSchema,
   ...textSchema,
   ...textContentSchema
 };
+var interactiveSvgElementSchema = {
+  ...interactiveElementSchema,
+  ...svgPaintSchema
+};
+var interactiveSvgStrokeElementSchema = {
+  ...interactiveElementSchema,
+  ...svgStrokeSchema
+};
+var interactiveSvgRootElementSchema = {
+  ...interactiveBorderElementSchema,
+  ...svgPaintSchema
+};
 var setRef = (ref, value) => {
   if (typeof ref === "function") {
     ref(value);
@@ -10758,8 +11017,11 @@ var makeInteractiveElement = (tag, displayName, schema) => {
 var makeInteractiveTextElement = (tag, displayName) => {
   return makeInteractiveElement(tag, displayName, interactiveTextElementSchema);
 };
-var makeInteractiveNonTextElement = (tag, displayName) => {
-  return makeInteractiveElement(tag, displayName, interactiveElementSchema);
+var makeInteractiveSvgElement = (tag, displayName) => {
+  return makeInteractiveElement(tag, displayName, interactiveSvgElementSchema);
+};
+var makeInteractiveSvgStrokeElement = (tag, displayName) => {
+  return makeInteractiveElement(tag, displayName, interactiveSvgStrokeElementSchema);
 };
 var Interactive = {
   baseSchema,
@@ -10767,6 +11029,9 @@ var Interactive = {
   textSchema,
   backgroundSchema,
   borderSchema,
+  cropSchema,
+  svgPaintSchema,
+  svgStrokeSchema,
   premountSchema,
   sequenceSchema,
   withSchema,
@@ -10775,13 +11040,13 @@ var Interactive = {
   Article: makeInteractiveTextElement("article", "<Interactive.Article>"),
   Aside: makeInteractiveTextElement("aside", "<Interactive.Aside>"),
   Button: makeInteractiveTextElement("button", "<Interactive.Button>"),
-  Circle: makeInteractiveNonTextElement("circle", "<Interactive.Circle>"),
+  Circle: makeInteractiveSvgElement("circle", "<Interactive.Circle>"),
   Code: makeInteractiveTextElement("code", "<Interactive.Code>"),
   Div: makeInteractiveTextElement("div", "<Interactive.Div>"),
-  Ellipse: makeInteractiveNonTextElement("ellipse", "<Interactive.Ellipse>"),
+  Ellipse: makeInteractiveSvgElement("ellipse", "<Interactive.Ellipse>"),
   Em: makeInteractiveTextElement("em", "<Interactive.Em>"),
   Footer: makeInteractiveTextElement("footer", "<Interactive.Footer>"),
-  G: makeInteractiveNonTextElement("g", "<Interactive.G>"),
+  G: makeInteractiveSvgElement("g", "<Interactive.G>"),
   H1: makeInteractiveTextElement("h1", "<Interactive.H1>"),
   H2: makeInteractiveTextElement("h2", "<Interactive.H2>"),
   H3: makeInteractiveTextElement("h3", "<Interactive.H3>"),
@@ -10791,19 +11056,19 @@ var Interactive = {
   Header: makeInteractiveTextElement("header", "<Interactive.Header>"),
   Label: makeInteractiveTextElement("label", "<Interactive.Label>"),
   Li: makeInteractiveTextElement("li", "<Interactive.Li>"),
-  Line: makeInteractiveNonTextElement("line", "<Interactive.Line>"),
+  Line: makeInteractiveSvgStrokeElement("line", "<Interactive.Line>"),
   Main: makeInteractiveTextElement("main", "<Interactive.Main>"),
   Nav: makeInteractiveTextElement("nav", "<Interactive.Nav>"),
   Ol: makeInteractiveTextElement("ol", "<Interactive.Ol>"),
   P: makeInteractiveTextElement("p", "<Interactive.P>"),
-  Path: makeInteractiveNonTextElement("path", "<Interactive.Path>"),
+  Path: makeInteractiveSvgElement("path", "<Interactive.Path>"),
   Pre: makeInteractiveTextElement("pre", "<Interactive.Pre>"),
-  Rect: makeInteractiveNonTextElement("rect", "<Interactive.Rect>"),
+  Rect: makeInteractiveSvgElement("rect", "<Interactive.Rect>"),
   Section: makeInteractiveTextElement("section", "<Interactive.Section>"),
   Small: makeInteractiveTextElement("small", "<Interactive.Small>"),
   Span: makeInteractiveTextElement("span", "<Interactive.Span>"),
   Strong: makeInteractiveTextElement("strong", "<Interactive.Strong>"),
-  Svg: makeInteractiveElement("svg", "<Interactive.Svg>", interactiveBorderElementSchema),
+  Svg: makeInteractiveElement("svg", "<Interactive.Svg>", interactiveSvgRootElementSchema),
   Text: makeInteractiveElement("text", "<Interactive.Text>", interactiveSvgTextElementSchema),
   Ul: makeInteractiveTextElement("ul", "<Interactive.Ul>")
 };
@@ -10849,7 +11114,7 @@ var compositionsRef = React31.createRef();
 import {
   useCallback as useCallback21,
   useImperativeHandle as useImperativeHandle8,
-  useMemo as useMemo33,
+  useMemo as useMemo34,
   useRef as useRef26,
   useState as useState19
 } from "react";
@@ -10908,7 +11173,7 @@ var CompositionManagerProvider = ({
       getCompositions: () => currentcompositionsRef.current
     };
   }, []);
-  const compositionManagerSetters = useMemo33(() => {
+  const compositionManagerSetters = useMemo34(() => {
     return {
       registerComposition,
       unregisterComposition,
@@ -10924,7 +11189,7 @@ var CompositionManagerProvider = ({
     unregisterFolder,
     onlyRenderComposition
   ]);
-  const compositionManagerContextValue = useMemo33(() => {
+  const compositionManagerContextValue = useMemo34(() => {
     return {
       compositions,
       folders,
@@ -11043,10 +11308,10 @@ var waitForRoot = (fn) => {
 };
 
 // src/RemotionRoot.tsx
-import { useMemo as useMemo35 } from "react";
+import { useMemo as useMemo36 } from "react";
 
 // src/use-media-enabled.tsx
-import { createContext as createContext24, useContext as useContext35, useMemo as useMemo34 } from "react";
+import { createContext as createContext24, useContext as useContext35, useMemo as useMemo35 } from "react";
 import { jsx as jsx31 } from "react/jsx-runtime";
 var MediaEnabledContext = createContext24(null);
 var useVideoEnabled = () => {
@@ -11074,7 +11339,7 @@ var MediaEnabledProvider = ({
   videoEnabled,
   audioEnabled
 }) => {
-  const value = useMemo34(() => ({ videoEnabled, audioEnabled }), [videoEnabled, audioEnabled]);
+  const value = useMemo35(() => ({ videoEnabled, audioEnabled }), [videoEnabled, audioEnabled]);
   return /* @__PURE__ */ jsx31(MediaEnabledContext.Provider, {
     value,
     children
@@ -11093,13 +11358,13 @@ var RemotionRootContexts = ({
   audioEnabled,
   frameState
 }) => {
-  const nonceContext = useMemo35(() => {
+  const nonceContext = useMemo36(() => {
     let counter = 0;
     return {
       getNonce: () => counter++
     };
   }, []);
-  const logging = useMemo35(() => {
+  const logging = useMemo36(() => {
     return { logLevel, mountTime: Date.now() };
   }, [logLevel]);
   return /* @__PURE__ */ jsx32(LogLevelContext.Provider, {
@@ -11448,7 +11713,7 @@ import {
   useContext as useContext37,
   useEffect as useEffect17,
   useLayoutEffect as useLayoutEffect12,
-  useMemo as useMemo36,
+  useMemo as useMemo37,
   useState as useState20
 } from "react";
 
@@ -11494,7 +11759,7 @@ var OffthreadVideoForRendering = ({
   if (!src) {
     throw new TypeError("No `src` was passed to <OffthreadVideo>.");
   }
-  const id = useMemo36(() => `offthreadvideo-${random(src)}-${sequenceContext?.cumulatedFrom}-${sequenceContext?.relativeFrom}-${sequenceContext?.durationInFrames}`, [
+  const id = useMemo37(() => `offthreadvideo-${random(src)}-${sequenceContext?.cumulatedFrom}-${sequenceContext?.relativeFrom}-${sequenceContext?.durationInFrames}`, [
     src,
     sequenceContext?.cumulatedFrom,
     sequenceContext?.relativeFrom,
@@ -11549,14 +11814,14 @@ var OffthreadVideoForRendering = ({
     sequenceContext?.cumulatedNegativeFrom,
     audioStreamIndex
   ]);
-  const currentTime = useMemo36(() => {
+  const currentTime = useMemo37(() => {
     return getExpectedMediaFrameUncorrected({
       frame,
       playbackRate: playbackRate || 1,
       startFrom: -mediaStartsAt
     }) / videoConfig.fps;
   }, [frame, mediaStartsAt, playbackRate, videoConfig.fps]);
-  const actualSrc = useMemo36(() => {
+  const actualSrc = useMemo37(() => {
     return getOffthreadVideoSource({
       src,
       currentTime,
@@ -11644,7 +11909,7 @@ var OffthreadVideoForRendering = ({
       cancelRender("Failed to load image with src " + imageSrc);
     }
   }, [imageSrc, onError]);
-  const className = useMemo36(() => {
+  const className = useMemo37(() => {
     return [OBJECTFIT_CONTAIN_CLASS_NAME, props2.className].filter(truthy).join(" ");
   }, [props2.className]);
   const onImageFrame = useCallback22((img) => {
@@ -11674,7 +11939,7 @@ import React38, {
   useContext as useContext38,
   useEffect as useEffect19,
   useImperativeHandle as useImperativeHandle9,
-  useMemo as useMemo37,
+  useMemo as useMemo38,
   useRef as useRef27,
   useState as useState21
 } from "react";
@@ -11732,7 +11997,7 @@ var VideoForDevelopmentRefForwardingFunction = (props2, ref) => {
     throw new Error("SharedAudioContext not found");
   }
   const videoRef = useRef27(null);
-  const sharedSource = useMemo37(() => {
+  const sharedSource = useMemo38(() => {
     if (!context.audioContext) {
       return null;
     }
@@ -11935,7 +12200,7 @@ var VideoForDevelopmentRefForwardingFunction = (props2, ref) => {
       current.preload = "auto";
     }
   }, []);
-  const actualStyle = useMemo37(() => {
+  const actualStyle = useMemo38(() => {
     return {
       ...style
     };
@@ -12158,7 +12423,7 @@ var watchStaticFile = (fileName, callback) => {
 };
 
 // src/wrap-remotion-context.tsx
-import React40, { useMemo as useMemo38 } from "react";
+import React40, { useMemo as useMemo39 } from "react";
 import { jsx as jsx36 } from "react/jsx-runtime";
 function useRemotionContexts() {
   const compositionManagerCtx = React40.useContext(CompositionManager);
@@ -12175,7 +12440,7 @@ function useRemotionContexts() {
   const visualModePropStatusesRefContext = React40.useContext(VisualModePropStatusesRefContext);
   const bufferManagerContext = React40.useContext(BufferingContextReact);
   const logLevelContext = React40.useContext(LogLevelContext);
-  return useMemo38(() => ({
+  return useMemo39(() => ({
     compositionManagerCtx,
     timelineContext,
     setTimelineContext,
@@ -12286,6 +12551,7 @@ var Internals = {
   sequenceStyleSchema,
   sequenceVisualStyleSchema,
   sequencePremountSchema,
+  sequenceCropSchema,
   textSchema,
   transformSchema,
   premountSchema,
@@ -12409,12 +12675,14 @@ var Internals = {
   hiddenField,
   durationInFramesField,
   freezeField,
-  fromField
+  fromField,
+  resolveSequenceCrop,
+  useCropStyle
 };
 // src/series/index.tsx
 import React42, {
   forwardRef as forwardRef14,
-  useMemo as useMemo39
+  useMemo as useMemo40
 } from "react";
 
 // src/series/flatten-children.tsx
@@ -12490,7 +12758,7 @@ var validateSeriesSequenceProps = ({
   return offset;
 };
 var SeriesInner = (props2) => {
-  const childrenValue = useMemo39(() => {
+  const childrenValue = useMemo40(() => {
     const flattenedChildren = flattenChildren(props2.children);
     const renderChildren = (i, startFrame) => {
       if (i === flattenedChildren.length) {
@@ -12688,7 +12956,7 @@ import {
   useEffect as useEffect20,
   useImperativeHandle as useImperativeHandle10,
   useLayoutEffect as useLayoutEffect13,
-  useMemo as useMemo40,
+  useMemo as useMemo41,
   useRef as useRef28
 } from "react";
 
@@ -12847,7 +13115,7 @@ var VideoForRenderingForwardFunction = ({
   const mountTime = useMountTime();
   const { delayRender: delayRender2, continueRender: continueRender2 } = useDelayRender();
   const { registerRenderAsset, unregisterRenderAsset } = useContext39(RenderAssetManager);
-  const id = useMemo40(() => `video-${random(props2.src ?? "")}-${sequenceContext?.cumulatedFrom}-${sequenceContext?.relativeFrom}-${sequenceContext?.durationInFrames}`, [
+  const id = useMemo41(() => `video-${random(props2.src ?? "")}-${sequenceContext?.cumulatedFrom}-${sequenceContext?.relativeFrom}-${sequenceContext?.durationInFrames}`, [
     props2.src,
     sequenceContext?.cumulatedFrom,
     sequenceContext?.relativeFrom,