@remotion/maptiler 4.0.527 → 4.0.528

package/dist/esm/index.mjs

@@ -2,9 +2,11 @@
 import {
   helpers
 } from "@maptiler/sdk";
-import { useContext as useContext2, useEffect, useRef } from "react";
+import { useContext as useContext3, useEffect as useEffect2, useRef as useRef2 } from "react";
 import {
+  Freeze,
   Sequence,
+  Internals as Internals2,
   useDelayRender
 } from "remotion";
 
@@ -43,6 +45,37 @@ var useMapTiler = () => {
   return useContext(MapTilerContext);
 };
 
+// src/use-map-premounting.ts
+import { useCallback, useContext as useContext2, useEffect, useRef } from "react";
+import { Internals } from "remotion";
+var useMapPremounting = (getLayerIds) => {
+  const { map } = useContext2(MapTilerContext);
+  const sequence = useContext2(Internals.SequenceContext);
+  const hidden = Boolean(sequence?.premounting || sequence?.postmounting);
+  const hiddenRef = useRef(hidden);
+  const layerIdsRef = useRef(getLayerIds);
+  hiddenRef.current = hidden;
+  layerIdsRef.current = getLayerIds;
+  const applyPremountVisibility = useCallback(() => {
+    if (!map) {
+      return;
+    }
+    for (const id of layerIdsRef.current()) {
+      if (!id || !map.getLayer(id)) {
+        continue;
+      }
+      const visibility = hiddenRef.current ? "none" : "visible";
+      if (map.getLayoutProperty(id, "visibility") !== visibility) {
+        map.setLayoutProperty(id, "visibility", visibility);
+      }
+    }
+  }, [map]);
+  useEffect(() => {
+    applyPremountVisibility();
+  }, [applyPremountVisibility, hidden]);
+  return applyPremountVisibility;
+};
+
 // src/MapHeatmap.tsx
 import { jsx } from "react/jsx-runtime";
 var MapHeatmapDrawing = ({
@@ -60,10 +93,11 @@ var MapHeatmapDrawing = ({
   weight,
   zoomCompensation
 }) => {
-  const { map, styleRevision } = useContext2(MapTilerContext);
+  const { map, styleRevision } = useContext3(MapTilerContext);
   const { continueRender, delayRender } = useDelayRender();
-  const layerIdsRef = useRef(null);
-  const optionsRef = useRef(null);
+  const layerIdsRef = useRef2(null);
+  const applyPremountVisibility = useMapPremounting(() => Object.entries(layerIdsRef.current ?? {}).filter(([key]) => key.endsWith("LayerId")).map(([, value]) => value));
+  const optionsRef = useRef2(null);
   const intensityIsDynamic = typeof intensity === "number";
   const opacityIsDynamic = typeof opacity === "number";
   const radiusIsDynamic = typeof radius === "number";
@@ -95,7 +129,7 @@ var MapHeatmapDrawing = ({
     ...weight === undefined ? {} : { weight },
     ...zoomCompensation === undefined ? {} : { zoomCompensation }
   };
-  useEffect(() => {
+  useEffect2(() => {
     if (!map || !optionsRef.current) {
       return;
     }
@@ -109,6 +143,7 @@ var MapHeatmapDrawing = ({
       continueRender(loadingHandle);
     };
     layerIdsRef.current = helpers.addHeatmap(map, optionsRef.current);
+    applyPremountVisibility();
     map.once("idle", finish);
     map.triggerRepaint();
     return () => {
@@ -127,8 +162,16 @@ var MapHeatmapDrawing = ({
       layerIdsRef.current = null;
       map.triggerRepaint();
     };
-  }, [continueRender, delayRender, layerId, map, structuralKey, styleRevision]);
-  useEffect(() => {
+  }, [
+    applyPremountVisibility,
+    continueRender,
+    delayRender,
+    layerId,
+    map,
+    structuralKey,
+    styleRevision
+  ]);
+  useEffect2(() => {
     if (!map || typeof data === "string") {
       return;
     }
@@ -143,7 +186,7 @@ var MapHeatmapDrawing = ({
       });
     }
   }, [continueRender, data, delayRender, layerId, map]);
-  useEffect(() => {
+  useEffect2(() => {
     if (!map) {
       return;
     }
@@ -188,34 +231,75 @@ var MapHeatmap = (props) => {
     durationInFrames,
     freeze,
     from,
+    premountFor,
+    postmountFor,
     hidden,
     name,
     showInTimeline,
-    trimBefore
+    trimBefore,
+    playbackRate
   } = props;
-  return /* @__PURE__ */ jsx(Sequence, {
-    layout: "none",
+  const {
+    effectivePremountFor,
+    effectivePostmountFor,
+    freezeFrame,
+    isPremountingOrPostmounting,
+    premountingActive,
+    postmountingActive
+  } = Internals2.usePremounting({
     from: from ?? 0,
-    trimBefore,
     durationInFrames: durationInFrames ?? Infinity,
-    freeze,
-    hidden,
-    name: name ?? "<MapHeatmap>",
-    showInTimeline: showInTimeline ?? true,
-    controls,
-    children: /* @__PURE__ */ jsx(MapHeatmapDrawing, {
-      ...props
+    premountFor: premountFor ?? null,
+    postmountFor: postmountFor ?? null,
+    style: null,
+    styleWhilePremounted: null,
+    styleWhilePostmounted: null,
+    hideWhilePremounted: "opacity"
+  });
+  return /* @__PURE__ */ jsx(Freeze, {
+    frame: freezeFrame,
+    active: isPremountingOrPostmounting,
+    children: /* @__PURE__ */ jsx(Sequence, {
+      layout: "none",
+      from: from ?? 0,
+      trimBefore,
+      playbackRate,
+      durationInFrames: durationInFrames ?? Infinity,
+      freeze,
+      hidden,
+      name: name ?? "<MapHeatmap>",
+      showInTimeline: showInTimeline ?? true,
+      controls,
+      _remotionInternalPremountDisplay: effectivePremountFor || null,
+      _remotionInternalPostmountDisplay: effectivePostmountFor || null,
+      _remotionInternalIsPremounting: premountingActive,
+      _remotionInternalIsPostmounting: postmountingActive,
+      children: /* @__PURE__ */ jsx(MapHeatmapDrawing, {
+        ...props
+      })
     })
   });
 };
 // src/MapLayer.tsx
-import { useContext as useContext3, useEffect as useEffect2, useRef as useRef2 } from "react";
-import { useDelayRender as useDelayRender2 } from "remotion";
-var MapLayer = ({ beforeId, layer }) => {
-  const { map, styleRevision } = useContext3(MapTilerContext);
-  const previousLayerRef = useRef2(null);
+import { useContext as useContext4, useEffect as useEffect3, useRef as useRef3, useMemo } from "react";
+import {
+  Freeze as Freeze2,
+  Sequence as Sequence2,
+  Internals as Internals3,
+  useDelayRender as useDelayRender2
+} from "remotion";
+import { jsx as jsx2 } from "react/jsx-runtime";
+var MapLayerContent = ({ beforeId, layer: passedLayer }) => {
+  const { map, styleRevision } = useContext4(MapTilerContext);
+  const sequence = useContext4(Internals3.SequenceContext);
+  const isPremountingOrPostmounting = Boolean(sequence?.premounting || sequence?.postmounting);
+  const layer = useMemo(() => isPremountingOrPostmounting ? {
+    ...passedLayer,
+    layout: { ...passedLayer.layout, visibility: "none" }
+  } : passedLayer, [isPremountingOrPostmounting, passedLayer]);
+  const previousLayerRef = useRef3(null);
   const { continueRender, delayRender } = useDelayRender2();
-  useEffect2(() => {
+  useEffect3(() => {
     if (!map) {
       return;
     }
@@ -274,7 +358,7 @@ var MapLayer = ({ beforeId, layer }) => {
       finish();
     };
   }, [beforeId, continueRender, delayRender, layer, map, styleRevision]);
-  useEffect2(() => {
+  useEffect3(() => {
     if (!map) {
       return;
     }
@@ -287,20 +371,76 @@ var MapLayer = ({ beforeId, layer }) => {
   }, [layer.id, map]);
   return null;
 };
+var MapLayer = ({
+  from,
+  durationInFrames,
+  trimBefore,
+  playbackRate,
+  freeze,
+  hidden,
+  name,
+  showInTimeline,
+  premountFor,
+  postmountFor,
+  ...props
+}) => {
+  const {
+    effectivePremountFor,
+    effectivePostmountFor,
+    freezeFrame,
+    isPremountingOrPostmounting,
+    premountingActive,
+    postmountingActive
+  } = Internals3.usePremounting({
+    from: from ?? 0,
+    durationInFrames: durationInFrames ?? Infinity,
+    premountFor: premountFor ?? null,
+    postmountFor: postmountFor ?? null,
+    style: null,
+    styleWhilePremounted: null,
+    styleWhilePostmounted: null,
+    hideWhilePremounted: "opacity"
+  });
+  return /* @__PURE__ */ jsx2(Freeze2, {
+    frame: freezeFrame,
+    active: isPremountingOrPostmounting,
+    children: /* @__PURE__ */ jsx2(Sequence2, {
+      layout: "none",
+      from,
+      durationInFrames,
+      trimBefore,
+      playbackRate,
+      freeze,
+      hidden,
+      showInTimeline: showInTimeline ?? false,
+      name: name ?? "<MapLayer>",
+      _remotionInternalPremountDisplay: effectivePremountFor || null,
+      _remotionInternalPostmountDisplay: effectivePostmountFor || null,
+      _remotionInternalIsPremounting: premountingActive,
+      _remotionInternalIsPostmounting: postmountingActive,
+      children: /* @__PURE__ */ jsx2(MapLayerContent, {
+        ...props
+      })
+    })
+  });
+};
 // src/MapOverlay.tsx
 import {
   forwardRef,
-  useContext as useContext4,
+  useContext as useContext5,
   useImperativeHandle,
-  useRef as useRef3
+  useRef as useRef4
 } from "react";
 import {
   Interactive,
-  Sequence as Sequence2
+  Freeze as Freeze3,
+  Sequence as Sequence3,
+  Internals as Internals4
 } from "remotion";
-import { jsx as jsx2 } from "react/jsx-runtime";
+import { jsx as jsx3 } from "react/jsx-runtime";
 var mapOverlaySchema = {
   ...Interactive.baseSchema,
+  ...Interactive.premountSchema,
   longitude: {
     type: "number",
     min: -180,
@@ -374,44 +514,76 @@ var MapOverlayRefForwardingFunction = ({
   style,
   durationInFrames,
   from,
+  premountFor,
+  postmountFor,
+  styleWhilePremounted,
+  styleWhilePostmounted,
   trimBefore,
+  playbackRate,
   freeze,
   hidden,
   name,
   showInTimeline,
   controls
 }, ref) => {
-  const { map } = useContext4(MapTilerContext);
-  const refForOutline = useRef3(null);
+  const { map } = useContext5(MapTilerContext);
+  const refForOutline = useRef4(null);
   const point = map?.project([longitude, latitude]);
   const horizontalAnchor = anchor.includes("left") ? 0 : anchor.includes("right") ? -100 : -50;
   const verticalAnchor = anchor.includes("top") ? 0 : anchor.includes("bottom") ? -100 : -50;
   useImperativeHandle(ref, () => refForOutline.current, []);
-  return /* @__PURE__ */ jsx2(Sequence2, {
-    layout: "none",
+  const {
+    effectivePremountFor,
+    effectivePostmountFor,
+    freezeFrame,
+    isPremountingOrPostmounting,
+    premountingActive,
+    postmountingActive,
+    premountingStyle
+  } = Internals4.usePremounting({
     from: from ?? 0,
-    trimBefore,
     durationInFrames: durationInFrames ?? Infinity,
-    freeze,
-    hidden,
-    name: name ?? "<MapOverlay>",
-    showInTimeline: showInTimeline ?? true,
-    controls,
-    outlineRef: refForOutline,
-    children: /* @__PURE__ */ jsx2("div", {
-      ref: refForOutline,
-      style: {
-        left: (point?.x ?? 0) + offsetX,
-        opacity,
-        pointerEvents: "none",
-        position: "absolute",
-        rotate: `${rotation + (rotationAlignment === "map" ? map?.getBearing() ?? 0 : 0)}deg`,
-        top: (point?.y ?? 0) + offsetY,
-        translate: `${horizontalAnchor}% ${verticalAnchor}%`,
-        zIndex: 1,
-        ...style
-      },
-      children
+    premountFor: premountFor ?? null,
+    postmountFor: postmountFor ?? null,
+    style: { opacity, ...style },
+    styleWhilePremounted: styleWhilePremounted ?? null,
+    styleWhilePostmounted: styleWhilePostmounted ?? null,
+    hideWhilePremounted: "opacity"
+  });
+  return /* @__PURE__ */ jsx3(Freeze3, {
+    frame: freezeFrame,
+    active: isPremountingOrPostmounting,
+    children: /* @__PURE__ */ jsx3(Sequence3, {
+      layout: "none",
+      from: from ?? 0,
+      trimBefore,
+      playbackRate,
+      durationInFrames: durationInFrames ?? Infinity,
+      freeze,
+      hidden,
+      name: name ?? "<MapOverlay>",
+      showInTimeline: showInTimeline ?? true,
+      controls,
+      outlineRef: refForOutline,
+      _remotionInternalPremountDisplay: effectivePremountFor || null,
+      _remotionInternalPostmountDisplay: effectivePostmountFor || null,
+      _remotionInternalIsPremounting: premountingActive,
+      _remotionInternalIsPostmounting: postmountingActive,
+      children: /* @__PURE__ */ jsx3("div", {
+        ref: refForOutline,
+        style: {
+          left: (point?.x ?? 0) + offsetX,
+          opacity,
+          pointerEvents: "none",
+          position: "absolute",
+          rotate: `${rotation + (rotationAlignment === "map" ? map?.getBearing() ?? 0 : 0)}deg`,
+          top: (point?.y ?? 0) + offsetY,
+          translate: `${horizontalAnchor}% ${verticalAnchor}%`,
+          zIndex: 1,
+          ...premountingStyle
+        },
+        children
+      })
     })
   });
 };
@@ -427,12 +599,14 @@ var MapMarker = MapOverlay;
 import {
   helpers as helpers2
 } from "@maptiler/sdk";
-import { useContext as useContext5, useEffect as useEffect3, useRef as useRef4 } from "react";
+import { useContext as useContext6, useEffect as useEffect4, useRef as useRef5 } from "react";
 import {
-  Sequence as Sequence3,
+  Freeze as Freeze4,
+  Sequence as Sequence4,
+  Internals as Internals5,
   useDelayRender as useDelayRender3
 } from "remotion";
-import { jsx as jsx3 } from "react/jsx-runtime";
+import { jsx as jsx4 } from "react/jsx-runtime";
 var MapPointDrawing = ({
   alignOnViewport,
   beforeId,
@@ -457,10 +631,11 @@ var MapPointDrawing = ({
   sourceId = `${layerId}-source`,
   zoomCompensation
 }) => {
-  const { map, styleRevision } = useContext5(MapTilerContext);
+  const { map, styleRevision } = useContext6(MapTilerContext);
   const { continueRender, delayRender } = useDelayRender3();
-  const layerIdsRef = useRef4(null);
-  const optionsRef = useRef4(null);
+  const layerIdsRef = useRef5(null);
+  const applyPremountVisibility = useMapPremounting(() => Object.entries(layerIdsRef.current ?? {}).filter(([key]) => key.endsWith("LayerId")).map(([, value]) => value));
+  const optionsRef = useRef5(null);
   const outlineColorIsDynamic = typeof outlineColor === "string";
   const outlineOpacityIsDynamic = typeof outlineOpacity === "number";
   const outlineWidthIsDynamic = typeof outlineWidth === "number";
@@ -511,7 +686,7 @@ var MapPointDrawing = ({
     sourceId,
     ...zoomCompensation === undefined ? {} : { zoomCompensation }
   };
-  useEffect3(() => {
+  useEffect4(() => {
     if (!map || !optionsRef.current) {
       return;
     }
@@ -525,6 +700,7 @@ var MapPointDrawing = ({
       continueRender(loadingHandle);
     };
     layerIdsRef.current = helpers2.addPoint(map, optionsRef.current);
+    applyPremountVisibility();
     map.once("idle", finish);
     map.triggerRepaint();
     return () => {
@@ -549,8 +725,16 @@ var MapPointDrawing = ({
       layerIdsRef.current = null;
       map.triggerRepaint();
     };
-  }, [continueRender, delayRender, layerId, map, structuralKey, styleRevision]);
-  useEffect3(() => {
+  }, [
+    applyPremountVisibility,
+    continueRender,
+    delayRender,
+    layerId,
+    map,
+    structuralKey,
+    styleRevision
+  ]);
+  useEffect4(() => {
     if (!map || typeof data === "string") {
       return;
     }
@@ -565,7 +749,7 @@ var MapPointDrawing = ({
       });
     }
   }, [continueRender, data, delayRender, layerId, map]);
-  useEffect3(() => {
+  useEffect4(() => {
     if (!map) {
       return;
     }
@@ -640,23 +824,52 @@ var MapPoint = (props) => {
     durationInFrames,
     freeze,
     from,
+    premountFor,
+    postmountFor,
     hidden,
     name,
     showInTimeline,
-    trimBefore
+    trimBefore,
+    playbackRate
   } = props;
-  return /* @__PURE__ */ jsx3(Sequence3, {
-    layout: "none",
+  const {
+    effectivePremountFor,
+    effectivePostmountFor,
+    freezeFrame,
+    isPremountingOrPostmounting,
+    premountingActive,
+    postmountingActive
+  } = Internals5.usePremounting({
     from: from ?? 0,
-    trimBefore,
     durationInFrames: durationInFrames ?? Infinity,
-    freeze,
-    hidden,
-    name: name ?? "<MapPoint>",
-    showInTimeline: showInTimeline ?? true,
-    controls,
-    children: /* @__PURE__ */ jsx3(MapPointDrawing, {
-      ...props
+    premountFor: premountFor ?? null,
+    postmountFor: postmountFor ?? null,
+    style: null,
+    styleWhilePremounted: null,
+    styleWhilePostmounted: null,
+    hideWhilePremounted: "opacity"
+  });
+  return /* @__PURE__ */ jsx4(Freeze4, {
+    frame: freezeFrame,
+    active: isPremountingOrPostmounting,
+    children: /* @__PURE__ */ jsx4(Sequence4, {
+      layout: "none",
+      from: from ?? 0,
+      trimBefore,
+      playbackRate,
+      durationInFrames: durationInFrames ?? Infinity,
+      freeze,
+      hidden,
+      name: name ?? "<MapPoint>",
+      showInTimeline: showInTimeline ?? true,
+      controls,
+      _remotionInternalPremountDisplay: effectivePremountFor || null,
+      _remotionInternalPostmountDisplay: effectivePostmountFor || null,
+      _remotionInternalIsPremounting: premountingActive,
+      _remotionInternalIsPostmounting: postmountingActive,
+      children: /* @__PURE__ */ jsx4(MapPointDrawing, {
+        ...props
+      })
     })
   });
 };
@@ -664,9 +877,11 @@ var MapPoint = (props) => {
 import {
   helpers as helpers4
 } from "@maptiler/sdk";
-import { useContext as useContext7, useEffect as useEffect5, useMemo, useRef as useRef6 } from "react";
+import { useContext as useContext8, useEffect as useEffect6, useMemo as useMemo2, useRef as useRef7 } from "react";
 import {
-  Sequence as Sequence5,
+  Freeze as Freeze6,
+  Sequence as Sequence6,
+  Internals as Internals7,
   useDelayRender as useDelayRender5
 } from "remotion";
 
@@ -675,12 +890,14 @@ import {
   helpers as helpers3
 } from "@maptiler/sdk";
 import { length as getLineLength, lineSliceAlong, lineString } from "@turf/turf";
-import { useContext as useContext6, useEffect as useEffect4, useRef as useRef5, useState } from "react";
+import { useContext as useContext7, useEffect as useEffect5, useRef as useRef6, useState } from "react";
 import {
-  Sequence as Sequence4,
+  Freeze as Freeze5,
+  Sequence as Sequence5,
+  Internals as Internals6,
   useDelayRender as useDelayRender4
 } from "remotion";
-import { jsx as jsx4 } from "react/jsx-runtime";
+import { jsx as jsx5 } from "react/jsx-runtime";
 var normalizeData = (data) => {
   if (typeof data === "string" || data.type === "FeatureCollection") {
     return data;
@@ -755,10 +972,11 @@ var MapPolylineDrawing = ({
   progress = 1,
   sourceId = `${layerId}-source`
 }) => {
-  const { map, styleRevision } = useContext6(MapTilerContext);
+  const { map, styleRevision } = useContext7(MapTilerContext);
   const { cancelRender, continueRender, delayRender } = useDelayRender4();
-  const layerIdsRef = useRef5(null);
-  const optionsRef = useRef5(null);
+  const layerIdsRef = useRef6(null);
+  const applyPremountVisibility = useMapPremounting(() => Object.entries(layerIdsRef.current ?? {}).filter(([key]) => key.endsWith("LayerId")).map(([, value]) => value));
+  const optionsRef = useRef6(null);
   const [layerRevision, setLayerRevision] = useState(0);
   const lineBlurIsDynamic = typeof lineBlur === "number";
   const lineColorIsDynamic = typeof lineColor === "string";
@@ -809,7 +1027,7 @@ var MapPolylineDrawing = ({
     ...outlineWidth === undefined ? {} : { outlineWidth },
     sourceId
   };
-  useEffect4(() => {
+  useEffect5(() => {
     if (!map || !optionsRef.current) {
       return;
     }
@@ -840,6 +1058,7 @@ var MapPolylineDrawing = ({
         return;
       }
       layerIdsRef.current = ids;
+      applyPremountVisibility();
       setLayerRevision((revision) => revision + 1);
       map.once("idle", finish);
       map.triggerRepaint();
@@ -861,6 +1080,7 @@ var MapPolylineDrawing = ({
       }
     };
   }, [
+    applyPremountVisibility,
     cancelRender,
     continueRender,
     delayRender,
@@ -869,7 +1089,7 @@ var MapPolylineDrawing = ({
     structuralKey,
     styleRevision
   ]);
-  useEffect4(() => {
+  useEffect5(() => {
     if (!map || typeof data === "string") {
       return;
     }
@@ -892,7 +1112,7 @@ var MapPolylineDrawing = ({
     map,
     progress
   ]);
-  useEffect4(() => {
+  useEffect5(() => {
     if (!map) {
       return;
     }
@@ -987,29 +1207,58 @@ var MapPolyline = (props) => {
     durationInFrames,
     freeze,
     from,
+    premountFor,
+    postmountFor,
     hidden,
     name,
     showInTimeline,
-    trimBefore
+    trimBefore,
+    playbackRate
   } = props;
-  return /* @__PURE__ */ jsx4(Sequence4, {
-    layout: "none",
+  const {
+    effectivePremountFor,
+    effectivePostmountFor,
+    freezeFrame,
+    isPremountingOrPostmounting,
+    premountingActive,
+    postmountingActive
+  } = Internals6.usePremounting({
     from: from ?? 0,
-    trimBefore,
     durationInFrames: durationInFrames ?? Infinity,
-    freeze,
-    hidden,
-    name: name ?? "<MapPolyline>",
-    showInTimeline: showInTimeline ?? true,
-    controls,
-    children: /* @__PURE__ */ jsx4(MapPolylineDrawing, {
-      ...props
+    premountFor: premountFor ?? null,
+    postmountFor: postmountFor ?? null,
+    style: null,
+    styleWhilePremounted: null,
+    styleWhilePostmounted: null,
+    hideWhilePremounted: "opacity"
+  });
+  return /* @__PURE__ */ jsx5(Freeze5, {
+    frame: freezeFrame,
+    active: isPremountingOrPostmounting,
+    children: /* @__PURE__ */ jsx5(Sequence5, {
+      layout: "none",
+      from: from ?? 0,
+      trimBefore,
+      playbackRate,
+      durationInFrames: durationInFrames ?? Infinity,
+      freeze,
+      hidden,
+      name: name ?? "<MapPolyline>",
+      showInTimeline: showInTimeline ?? true,
+      controls,
+      _remotionInternalPremountDisplay: effectivePremountFor || null,
+      _remotionInternalPostmountDisplay: effectivePostmountFor || null,
+      _remotionInternalIsPremounting: premountingActive,
+      _remotionInternalIsPostmounting: postmountingActive,
+      children: /* @__PURE__ */ jsx5(MapPolylineDrawing, {
+        ...props
+      })
     })
   });
 };
 
 // src/MapPolygon.tsx
-import { jsx as jsx5 } from "react/jsx-runtime";
+import { jsx as jsx6 } from "react/jsx-runtime";
 var normalizeData2 = (data) => {
   if (typeof data === "string" || data.type === "FeatureCollection") {
     return data;
@@ -1070,10 +1319,11 @@ var MapPolygonDrawing = ({
   progress,
   sourceId = `${layerId}-source`
 }) => {
-  const { map, styleRevision } = useContext7(MapTilerContext);
+  const { map, styleRevision } = useContext8(MapTilerContext);
   const { continueRender, delayRender } = useDelayRender5();
-  const layerIdsRef = useRef6(null);
-  const optionsRef = useRef6(null);
+  const layerIdsRef = useRef7(null);
+  const applyPremountVisibility = useMapPremounting(() => Object.entries(layerIdsRef.current ?? {}).filter(([key]) => key.endsWith("LayerId")).map(([, value]) => value));
+  const optionsRef = useRef7(null);
   const fillColorIsDynamic = typeof fillColor === "string";
   const fillOpacityIsDynamic = typeof fillOpacity === "number";
   const outlineBlurIsDynamic = typeof outlineBlur === "number";
@@ -1081,7 +1331,7 @@ var MapPolygonDrawing = ({
   const outlineOpacityIsDynamic = typeof outlineOpacity === "number";
   const outlineWidthIsDynamic = typeof outlineWidth === "number";
   const shouldAnimateOutline = progress !== undefined;
-  const outlineData = useMemo(() => shouldAnimateOutline ? getOutlineData(data) : null, [data, shouldAnimateOutline]);
+  const outlineData = useMemo2(() => shouldAnimateOutline ? getOutlineData(data) : null, [data, shouldAnimateOutline]);
   const hasAnimatedOutline = outlineData !== null && outline !== false;
   const structuralKey = JSON.stringify({
     beforeId,
@@ -1122,7 +1372,7 @@ var MapPolygonDrawing = ({
     ...pattern === undefined ? {} : { pattern },
     sourceId
   };
-  useEffect5(() => {
+  useEffect6(() => {
     if (!map || !optionsRef.current) {
       return;
     }
@@ -1136,6 +1386,7 @@ var MapPolygonDrawing = ({
       continueRender(loadingHandle);
     };
     layerIdsRef.current = helpers4.addPolygon(map, optionsRef.current);
+    applyPremountVisibility();
     map.once("idle", finish);
     map.triggerRepaint();
     return () => {
@@ -1156,8 +1407,16 @@ var MapPolygonDrawing = ({
       layerIdsRef.current = null;
       map.triggerRepaint();
     };
-  }, [continueRender, delayRender, layerId, map, structuralKey, styleRevision]);
-  useEffect5(() => {
+  }, [
+    applyPremountVisibility,
+    continueRender,
+    delayRender,
+    layerId,
+    map,
+    structuralKey,
+    styleRevision
+  ]);
+  useEffect6(() => {
     if (!map || typeof data === "string") {
       return;
     }
@@ -1172,7 +1431,7 @@ var MapPolygonDrawing = ({
       });
     }
   }, [continueRender, data, delayRender, layerId, map]);
-  useEffect5(() => {
+  useEffect6(() => {
     if (!map) {
       return;
     }
@@ -1229,7 +1488,7 @@ var MapPolygonDrawing = ({
   if (!hasAnimatedOutline) {
     return null;
   }
-  return /* @__PURE__ */ jsx5(MapPolyline, {
+  return /* @__PURE__ */ jsx6(MapPolyline, {
     beforeId,
     data: outlineData,
     layerId: `${layerId}-outline`,
@@ -1254,23 +1513,52 @@ var MapPolygon = (props) => {
     durationInFrames,
     freeze,
     from,
+    premountFor,
+    postmountFor,
     hidden,
     name,
     showInTimeline,
-    trimBefore
+    trimBefore,
+    playbackRate
   } = props;
-  return /* @__PURE__ */ jsx5(Sequence5, {
-    layout: "none",
+  const {
+    effectivePremountFor,
+    effectivePostmountFor,
+    freezeFrame,
+    isPremountingOrPostmounting,
+    premountingActive,
+    postmountingActive
+  } = Internals7.usePremounting({
     from: from ?? 0,
-    trimBefore,
     durationInFrames: durationInFrames ?? Infinity,
-    freeze,
-    hidden,
-    name: name ?? "<MapPolygon>",
-    showInTimeline: showInTimeline ?? true,
-    controls,
-    children: /* @__PURE__ */ jsx5(MapPolygonDrawing, {
-      ...props
+    premountFor: premountFor ?? null,
+    postmountFor: postmountFor ?? null,
+    style: null,
+    styleWhilePremounted: null,
+    styleWhilePostmounted: null,
+    hideWhilePremounted: "opacity"
+  });
+  return /* @__PURE__ */ jsx6(Freeze6, {
+    frame: freezeFrame,
+    active: isPremountingOrPostmounting,
+    children: /* @__PURE__ */ jsx6(Sequence6, {
+      layout: "none",
+      from: from ?? 0,
+      trimBefore,
+      playbackRate,
+      durationInFrames: durationInFrames ?? Infinity,
+      freeze,
+      hidden,
+      name: name ?? "<MapPolygon>",
+      showInTimeline: showInTimeline ?? true,
+      controls,
+      _remotionInternalPremountDisplay: effectivePremountFor || null,
+      _remotionInternalPostmountDisplay: effectivePostmountFor || null,
+      _remotionInternalIsPremounting: premountingActive,
+      _remotionInternalIsPostmounting: postmountingActive,
+      children: /* @__PURE__ */ jsx6(MapPolygonDrawing, {
+        ...props
+      })
     })
   });
 };
@@ -1278,21 +1566,27 @@ var MapPolygon = (props) => {
 import { length as getLineLength2, lineSliceAlong as lineSliceAlong2, lineString as lineString2 } from "@turf/turf";
 import {
   forwardRef as forwardRef2,
-  useContext as useContext8,
-  useEffect as useEffect6,
+  useContext as useContext9,
+  useEffect as useEffect7,
   useImperativeHandle as useImperativeHandle2,
-  useMemo as useMemo2,
-  useRef as useRef7,
+  useMemo as useMemo3,
+  useRef as useRef8,
   useState as useState2
 } from "react";
 import {
   Interactive as Interactive2,
-  Sequence as Sequence6,
+  Freeze as Freeze7,
+  Sequence as Sequence7,
+  Internals as Internals8,
   useDelayRender as useDelayRender6
 } from "remotion";
-import { jsx as jsx6, jsxs } from "react/jsx-runtime";
+import { jsx as jsx7, jsxs, Fragment } from "react/jsx-runtime";
 var mapRegionSchema = {
   ...Interactive2.baseSchema,
+  ...{
+    premountFor: Interactive2.premountSchema.premountFor,
+    postmountFor: Interactive2.premountSchema.postmountFor
+  },
   fill: {
     type: "number",
     min: 0,
@@ -1352,16 +1646,21 @@ var MapRegionDrawing = ({
   strokeColor = "#8f1712",
   strokeWidth = 9
 }) => {
-  const { map } = useContext8(MapTilerContext);
+  const { map } = useContext9(MapTilerContext);
   const { continueRender, delayRender } = useDelayRender6();
   const [isReady, setIsReady] = useState2(false);
   const [loadingHandle] = useState2(() => delayRender(`Loading ${feature.properties.name} geometry`));
-  const outline = useMemo2(() => lineString2(feature.geometry.coordinates[0]), [feature]);
-  const outlineLength = useMemo2(() => getLineLength2(outline), [outline]);
+  const outline = useMemo3(() => lineString2(feature.geometry.coordinates[0]), [feature]);
+  const outlineLength = useMemo3(() => getLineLength2(outline), [outline]);
   const fillSourceId = `${id}-fill`;
   const outlineSourceId = `${id}-outline`;
   const outlineGlowLayerId = `${id}-outline-glow`;
-  useEffect6(() => {
+  const applyPremountVisibility = useMapPremounting(() => [
+    fillSourceId,
+    outlineSourceId,
+    outlineGlowLayerId
+  ]);
+  useEffect7(() => {
     if (!map) {
       return;
     }
@@ -1424,12 +1723,14 @@ var MapRegionDrawing = ({
     }
     map.setPaintProperty(outlineSourceId, "line-color", strokeColor);
     map.setPaintProperty(outlineSourceId, "line-width", strokeWidth);
+    applyPremountVisibility();
     map.once("idle", () => {
       setIsReady(true);
       continueRender(loadingHandle);
     });
     map.triggerRepaint();
   }, [
+    applyPremountVisibility,
     continueRender,
     feature,
     fillColor,
@@ -1443,7 +1744,7 @@ var MapRegionDrawing = ({
     strokeColor,
     strokeWidth
   ]);
-  useEffect6(() => {
+  useEffect7(() => {
     if (!isReady || !map) {
       return;
     }
@@ -1465,7 +1766,7 @@ var MapRegionDrawing = ({
     outlineSourceId,
     progress
   ]);
-  useEffect6(() => {
+  useEffect7(() => {
     if (!map) {
       return;
     }
@@ -1494,9 +1795,9 @@ var MapRegionBounds = ({
   feature,
   refForOutline
 }) => {
-  const { map } = useContext8(MapTilerContext);
+  const { map } = useContext9(MapTilerContext);
   if (!map) {
-    return /* @__PURE__ */ jsx6("div", {
+    return /* @__PURE__ */ jsx7("div", {
       ref: refForOutline
     });
   }
@@ -1505,7 +1806,7 @@ var MapRegionBounds = ({
   const right = Math.max(...points.map((point) => point.x));
   const top = Math.min(...points.map((point) => point.y));
   const bottom = Math.max(...points.map((point) => point.y));
-  return /* @__PURE__ */ jsx6("div", {
+  return /* @__PURE__ */ jsx7("div", {
     ref: refForOutline,
     style: {
       height: bottom - top,
@@ -1530,42 +1831,73 @@ var MapRegionRefForwardingFunction = ({
   strokeWidth = 9,
   durationInFrames,
   from,
+  premountFor,
+  postmountFor,
   trimBefore,
+  playbackRate,
   freeze,
   hidden,
   name,
   showInTimeline,
   controls
 }, ref) => {
-  const refForOutline = useRef7(null);
+  const refForOutline = useRef8(null);
   useImperativeHandle2(ref, () => refForOutline.current, []);
-  return /* @__PURE__ */ jsxs(Sequence6, {
-    layout: "none",
+  const {
+    effectivePremountFor,
+    effectivePostmountFor,
+    freezeFrame,
+    isPremountingOrPostmounting,
+    premountingActive,
+    postmountingActive
+  } = Internals8.usePremounting({
     from: from ?? 0,
-    trimBefore,
     durationInFrames: durationInFrames ?? Infinity,
-    freeze,
-    hidden,
-    name: name ?? `<${feature.properties.name}>`,
-    showInTimeline: showInTimeline ?? true,
-    controls,
-    outlineRef: refForOutline,
-    children: [
-      /* @__PURE__ */ jsx6(MapRegionDrawing, {
-        feature,
-        fill,
-        fillColor,
-        glow,
-        id,
-        progress,
-        strokeColor,
-        strokeWidth
-      }),
-      /* @__PURE__ */ jsx6(MapRegionBounds, {
-        feature,
-        refForOutline
+    premountFor: premountFor ?? null,
+    postmountFor: postmountFor ?? null,
+    style: null,
+    styleWhilePremounted: null,
+    styleWhilePostmounted: null,
+    hideWhilePremounted: "opacity"
+  });
+  return /* @__PURE__ */ jsx7(Freeze7, {
+    frame: freezeFrame,
+    active: isPremountingOrPostmounting,
+    children: /* @__PURE__ */ jsx7(Sequence7, {
+      layout: "none",
+      from: from ?? 0,
+      trimBefore,
+      playbackRate,
+      durationInFrames: durationInFrames ?? Infinity,
+      freeze,
+      hidden,
+      name: name ?? `<${feature.properties.name}>`,
+      showInTimeline: showInTimeline ?? true,
+      controls,
+      outlineRef: refForOutline,
+      _remotionInternalPremountDisplay: effectivePremountFor || null,
+      _remotionInternalPostmountDisplay: effectivePostmountFor || null,
+      _remotionInternalIsPremounting: premountingActive,
+      _remotionInternalIsPostmounting: postmountingActive,
+      children: /* @__PURE__ */ jsxs(Fragment, {
+        children: [
+          /* @__PURE__ */ jsx7(MapRegionDrawing, {
+            feature,
+            fill,
+            fillColor,
+            glow,
+            id,
+            progress,
+            strokeColor,
+            strokeWidth
+          }),
+          /* @__PURE__ */ jsx7(MapRegionBounds, {
+            feature,
+            refForOutline
+          })
+        ]
       })
-    ]
+    })
   });
 };
 var MapRegionInner = forwardRef2(MapRegionRefForwardingFunction);
@@ -1579,21 +1911,27 @@ var MapRegion = Interactive2.withSchema({
 import { length as getLineLength3, lineSliceAlong as lineSliceAlong3, lineString as lineString3 } from "@turf/turf";
 import {
   forwardRef as forwardRef3,
-  useContext as useContext9,
-  useEffect as useEffect7,
+  useContext as useContext10,
+  useEffect as useEffect8,
   useImperativeHandle as useImperativeHandle3,
-  useMemo as useMemo3,
-  useRef as useRef8,
+  useMemo as useMemo4,
+  useRef as useRef9,
   useState as useState3
 } from "react";
 import {
   Interactive as Interactive3,
-  Sequence as Sequence7,
+  Freeze as Freeze8,
+  Sequence as Sequence8,
+  Internals as Internals9,
   useDelayRender as useDelayRender7
 } from "remotion";
-import { jsx as jsx7, jsxs as jsxs2 } from "react/jsx-runtime";
+import { jsx as jsx8, jsxs as jsxs2, Fragment as Fragment2 } from "react/jsx-runtime";
 var mapRouteSchema = {
   ...Interactive3.baseSchema,
+  ...{
+    premountFor: Interactive3.premountSchema.premountFor,
+    postmountFor: Interactive3.premountSchema.postmountFor
+  },
   glow: {
     type: "number",
     min: 0,
@@ -1636,15 +1974,19 @@ var MapRouteDrawing = ({
   strokeColor = "#006cff",
   strokeWidth = 9
 }) => {
-  const { map } = useContext9(MapTilerContext);
+  const { map } = useContext10(MapTilerContext);
   const { continueRender, delayRender } = useDelayRender7();
   const [isReady, setIsReady] = useState3(false);
   const [loadingHandle] = useState3(() => delayRender(`Loading ${feature.properties.name} route`));
-  const route = useMemo3(() => lineString3(feature.geometry.coordinates), [feature]);
-  const routeLength = useMemo3(() => getLineLength3(route), [route]);
+  const route = useMemo4(() => lineString3(feature.geometry.coordinates), [feature]);
+  const routeLength = useMemo4(() => getLineLength3(route), [route]);
   const sourceId = `${id}-route`;
   const glowLayerId = `${id}-route-glow`;
-  useEffect7(() => {
+  const applyPremountVisibility = useMapPremounting(() => [
+    sourceId,
+    glowLayerId
+  ]);
+  useEffect8(() => {
     if (!map) {
       return;
     }
@@ -1687,12 +2029,14 @@ var MapRouteDrawing = ({
     }
     map.setPaintProperty(sourceId, "line-color", strokeColor);
     map.setPaintProperty(sourceId, "line-width", strokeWidth);
+    applyPremountVisibility();
     map.once("idle", () => {
       setIsReady(true);
       continueRender(loadingHandle);
     });
     map.triggerRepaint();
   }, [
+    applyPremountVisibility,
     continueRender,
     glow,
     glowLayerId,
@@ -1703,7 +2047,7 @@ var MapRouteDrawing = ({
     strokeColor,
     strokeWidth
   ]);
-  useEffect7(() => {
+  useEffect8(() => {
     if (!isReady || !map) {
       return;
     }
@@ -1722,7 +2066,7 @@ var MapRouteDrawing = ({
     routeLength,
     sourceId
   ]);
-  useEffect7(() => {
+  useEffect8(() => {
     if (!map) {
       return;
     }
@@ -1745,9 +2089,9 @@ var MapRouteBounds = ({
   feature,
   refForOutline
 }) => {
-  const { map } = useContext9(MapTilerContext);
+  const { map } = useContext10(MapTilerContext);
   if (!map) {
-    return /* @__PURE__ */ jsx7("div", {
+    return /* @__PURE__ */ jsx8("div", {
       ref: refForOutline
     });
   }
@@ -1756,7 +2100,7 @@ var MapRouteBounds = ({
   const right = Math.max(...points.map((point) => point.x));
   const top = Math.min(...points.map((point) => point.y));
   const bottom = Math.max(...points.map((point) => point.y));
-  return /* @__PURE__ */ jsx7("div", {
+  return /* @__PURE__ */ jsx8("div", {
     ref: refForOutline,
     style: {
       height: bottom - top,
@@ -1779,40 +2123,71 @@ var MapRouteRefForwardingFunction = ({
   strokeWidth = 9,
   durationInFrames,
   from,
+  premountFor,
+  postmountFor,
   trimBefore,
+  playbackRate,
   freeze,
   hidden,
   name,
   showInTimeline,
   controls
 }, ref) => {
-  const refForOutline = useRef8(null);
+  const refForOutline = useRef9(null);
   useImperativeHandle3(ref, () => refForOutline.current, []);
-  return /* @__PURE__ */ jsxs2(Sequence7, {
-    layout: "none",
+  const {
+    effectivePremountFor,
+    effectivePostmountFor,
+    freezeFrame,
+    isPremountingOrPostmounting,
+    premountingActive,
+    postmountingActive
+  } = Internals9.usePremounting({
     from: from ?? 0,
-    trimBefore,
     durationInFrames: durationInFrames ?? Infinity,
-    freeze,
-    hidden,
-    name: name ?? `<${feature.properties.name}>`,
-    showInTimeline: showInTimeline ?? true,
-    controls,
-    outlineRef: refForOutline,
-    children: [
-      /* @__PURE__ */ jsx7(MapRouteDrawing, {
-        feature,
-        glow,
-        id,
-        progress,
-        strokeColor,
-        strokeWidth
-      }),
-      /* @__PURE__ */ jsx7(MapRouteBounds, {
-        feature,
-        refForOutline
+    premountFor: premountFor ?? null,
+    postmountFor: postmountFor ?? null,
+    style: null,
+    styleWhilePremounted: null,
+    styleWhilePostmounted: null,
+    hideWhilePremounted: "opacity"
+  });
+  return /* @__PURE__ */ jsx8(Freeze8, {
+    frame: freezeFrame,
+    active: isPremountingOrPostmounting,
+    children: /* @__PURE__ */ jsx8(Sequence8, {
+      layout: "none",
+      from: from ?? 0,
+      trimBefore,
+      playbackRate,
+      durationInFrames: durationInFrames ?? Infinity,
+      freeze,
+      hidden,
+      name: name ?? `<${feature.properties.name}>`,
+      showInTimeline: showInTimeline ?? true,
+      controls,
+      outlineRef: refForOutline,
+      _remotionInternalPremountDisplay: effectivePremountFor || null,
+      _remotionInternalPostmountDisplay: effectivePostmountFor || null,
+      _remotionInternalIsPremounting: premountingActive,
+      _remotionInternalIsPostmounting: postmountingActive,
+      children: /* @__PURE__ */ jsxs2(Fragment2, {
+        children: [
+          /* @__PURE__ */ jsx8(MapRouteDrawing, {
+            feature,
+            glow,
+            id,
+            progress,
+            strokeColor,
+            strokeWidth
+          }),
+          /* @__PURE__ */ jsx8(MapRouteBounds, {
+            feature,
+            refForOutline
+          })
+        ]
       })
-    ]
+    })
   });
 };
 var MapRouteInner = forwardRef3(MapRouteRefForwardingFunction);
@@ -1823,14 +2198,20 @@ var MapRoute = Interactive3.withSchema({
   supportsEffects: false
 });
 // src/MapSource.tsx
-import { useContext as useContext10, useEffect as useEffect8, useRef as useRef9 } from "react";
-import { useDelayRender as useDelayRender8 } from "remotion";
-var MapSource = ({ children, id, source }) => {
-  const { map, styleRevision } = useContext10(MapTilerContext);
-  const sourceRef = useRef9(source);
+import { useContext as useContext11, useEffect as useEffect9, useRef as useRef10 } from "react";
+import {
+  Freeze as Freeze9,
+  Sequence as Sequence9,
+  Internals as Internals10,
+  useDelayRender as useDelayRender8
+} from "remotion";
+import { jsx as jsx9 } from "react/jsx-runtime";
+var MapSourceContent = ({ children, id, source }) => {
+  const { map, styleRevision } = useContext11(MapTilerContext);
+  const sourceRef = useRef10(source);
   const { continueRender, delayRender } = useDelayRender8();
   sourceRef.current = source;
-  useEffect8(() => {
+  useEffect9(() => {
     if (!map) {
       return;
     }
@@ -1862,7 +2243,7 @@ var MapSource = ({ children, id, source }) => {
       map.triggerRepaint();
     };
   }, [continueRender, delayRender, id, map, styleRevision]);
-  useEffect8(() => {
+  useEffect9(() => {
     if (!map || source.type !== "geojson") {
       return;
     }
@@ -1880,23 +2261,78 @@ var MapSource = ({ children, id, source }) => {
   }, [continueRender, delayRender, id, map, source]);
   return children;
 };
+var MapSource = ({
+  from,
+  durationInFrames,
+  trimBefore,
+  playbackRate,
+  freeze,
+  hidden,
+  name,
+  showInTimeline,
+  premountFor,
+  postmountFor,
+  ...props
+}) => {
+  const {
+    effectivePremountFor,
+    effectivePostmountFor,
+    freezeFrame,
+    isPremountingOrPostmounting,
+    premountingActive,
+    postmountingActive
+  } = Internals10.usePremounting({
+    from: from ?? 0,
+    durationInFrames: durationInFrames ?? Infinity,
+    premountFor: premountFor ?? null,
+    postmountFor: postmountFor ?? null,
+    style: null,
+    styleWhilePremounted: null,
+    styleWhilePostmounted: null,
+    hideWhilePremounted: "opacity"
+  });
+  return /* @__PURE__ */ jsx9(Freeze9, {
+    frame: freezeFrame,
+    active: isPremountingOrPostmounting,
+    children: /* @__PURE__ */ jsx9(Sequence9, {
+      layout: "none",
+      from,
+      durationInFrames,
+      trimBefore,
+      playbackRate,
+      freeze,
+      hidden,
+      showInTimeline: showInTimeline ?? false,
+      name: name ?? "<MapSource>",
+      _remotionInternalPremountDisplay: effectivePremountFor || null,
+      _remotionInternalPostmountDisplay: effectivePostmountFor || null,
+      _remotionInternalIsPremounting: premountingActive,
+      _remotionInternalIsPostmounting: postmountingActive,
+      children: /* @__PURE__ */ jsx9(MapSourceContent, {
+        ...props
+      })
+    })
+  });
+};
 // src/MapViewport.tsx
 import { Map as MapTilerMap, MapStyle } from "@maptiler/sdk";
 import"@maptiler/sdk/style.css";
 import {
   forwardRef as forwardRef4,
-  useEffect as useEffect9,
+  useEffect as useEffect10,
   useImperativeHandle as useImperativeHandle4,
-  useMemo as useMemo4,
-  useRef as useRef10,
+  useMemo as useMemo5,
+  useRef as useRef11,
   useState as useState4
 } from "react";
 import {
   Interactive as Interactive4,
-  Sequence as Sequence8,
+  Freeze as Freeze10,
+  Sequence as Sequence10,
+  Internals as Internals11,
   useDelayRender as useDelayRender9
 } from "remotion";
-import { jsx as jsx8, jsxs as jsxs3, Fragment } from "react/jsx-runtime";
+import { jsx as jsx10, jsxs as jsxs3, Fragment as Fragment3 } from "react/jsx-runtime";
 var stripStyleLayers = ({
   administrativeBorders,
   map,
@@ -1912,6 +2348,7 @@ var stripStyleLayers = ({
 };
 var mapViewportSchema = {
   ...Interactive4.baseSchema,
+  ...Interactive4.premountSchema,
   centerLongitude: {
     type: "number",
     min: -180,
@@ -2023,19 +2460,20 @@ var MissingApiKey = () => {
       textAlign: "center"
     },
     children: [
-      /* @__PURE__ */ jsx8("div", {
+      /* @__PURE__ */ jsx10("div", {
         style: { fontSize: 64, fontWeight: 700 },
         children: "MapTiler key needed"
       }),
-      /* @__PURE__ */ jsx8("div", {
+      /* @__PURE__ */ jsx10("div", {
         style: { fontSize: 32, lineHeight: 1.4, marginTop: 24 },
         children: "Pass an apiKey prop to <MapViewport>."
       })
     ]
   });
 };
-var MapViewportRefForwardingFunction = ({
+var MapViewportContentRefForwardingFunction = ({
   apiKey,
+  premountingStyle,
   backgroundColor = "#dfe7e2",
   bearing = 0,
   centerLatitude = 0,
@@ -2055,20 +2493,12 @@ var MapViewportRefForwardingFunction = ({
   administrativeBorders = "all",
   terrain = false,
   terrainExaggeration = 1,
-  durationInFrames,
-  from,
-  trimBefore,
-  freeze,
-  hidden,
-  name,
-  showInTimeline,
-  zoom = 4,
-  controls
+  zoom = 4
 }, ref) => {
-  const mapContainerRef = useRef10(null);
-  const mapRef = useRef10(null);
-  const viewportRef = useRef10(null);
-  const initialCameraRef = useRef10({
+  const mapContainerRef = useRef11(null);
+  const mapRef = useRef11(null);
+  const viewportRef = useRef11(null);
+  const initialCameraRef = useRef11({
     bearing,
     centerLatitude,
     centerLongitude,
@@ -2079,7 +2509,7 @@ var MapViewportRefForwardingFunction = ({
     pitch,
     zoom
   });
-  const initialMapOptionsRef = useRef10({
+  const initialMapOptionsRef = useRef11({
     administrativeBorders,
     language,
     mapOptions,
@@ -2089,21 +2519,21 @@ var MapViewportRefForwardingFunction = ({
     terrain,
     terrainExaggeration
   });
-  const lastMapStyleRef = useRef10(mapStyle);
-  const lastLayerVisibilityRef = useRef10({
+  const lastMapStyleRef = useRef11(mapStyle);
+  const lastLayerVisibilityRef = useRef11({
     administrativeBorders,
     showLabels
   });
-  const onMapReadyRef = useRef10(onMapReady);
+  const onMapReadyRef = useRef11(onMapReady);
   onMapReadyRef.current = onMapReady;
   const { continueRender, delayRender } = useDelayRender9();
   const [map, setMap] = useState4(null);
   const [cameraRevision, setCameraRevision] = useState4(0);
   const [styleRevision, setStyleRevision] = useState4(0);
   const [loadingHandle] = useState4(() => delayRender("Loading MapTiler map"));
-  const contextValue = useMemo4(() => ({ cameraRevision, map, styleRevision }), [cameraRevision, map, styleRevision]);
+  const contextValue = useMemo5(() => ({ cameraRevision, map, styleRevision }), [cameraRevision, map, styleRevision]);
   useImperativeHandle4(ref, () => viewportRef.current, []);
-  useEffect9(() => {
+  useEffect10(() => {
     if (!apiKey) {
       continueRender(loadingHandle);
       return;
@@ -2163,7 +2593,7 @@ var MapViewportRefForwardingFunction = ({
       mapRef.current = null;
     };
   }, [apiKey, continueRender, loadingHandle]);
-  useEffect9(() => {
+  useEffect10(() => {
     if (!map) {
       return;
     }
@@ -2216,7 +2646,7 @@ var MapViewportRefForwardingFunction = ({
     pitch,
     zoom
   ]);
-  useEffect9(() => {
+  useEffect10(() => {
     if (!map || lastMapStyleRef.current === mapStyle && lastLayerVisibilityRef.current.showLabels === showLabels && lastLayerVisibilityRef.current.administrativeBorders === administrativeBorders) {
       return;
     }
@@ -2256,13 +2686,13 @@ var MapViewportRefForwardingFunction = ({
     mapStyle,
     showLabels
   ]);
-  useEffect9(() => {
+  useEffect10(() => {
     if (map && language) {
       map.setLanguage(language);
       map.triggerRepaint();
     }
   }, [language, map]);
-  useEffect9(() => {
+  useEffect10(() => {
     if (!map) {
       return;
     }
@@ -2273,45 +2703,96 @@ var MapViewportRefForwardingFunction = ({
     }
     map.triggerRepaint();
   }, [map, terrain, terrainExaggeration]);
-  useEffect9(() => {
+  useEffect10(() => {
     if (map && projection) {
       map.setProjection(projection, { persist: true });
       map.triggerRepaint();
     }
   }, [map, projection]);
-  return /* @__PURE__ */ jsx8(Sequence8, {
-    layout: "none",
+  return /* @__PURE__ */ jsx10("div", {
+    ref: viewportRef,
+    style: {
+      backgroundColor,
+      inset: 0,
+      overflow: "hidden",
+      position: "absolute",
+      ...premountingStyle
+    },
+    children: apiKey ? /* @__PURE__ */ jsxs3(Fragment3, {
+      children: [
+        /* @__PURE__ */ jsx10("div", {
+          ref: mapContainerRef,
+          style: {
+            inset: 0,
+            position: "absolute"
+          }
+        }),
+        /* @__PURE__ */ jsx10(MapTilerContext.Provider, {
+          value: contextValue,
+          children
+        })
+      ]
+    }) : /* @__PURE__ */ jsx10(MissingApiKey, {})
+  });
+};
+var MapViewportContent = forwardRef4(MapViewportContentRefForwardingFunction);
+var MapViewportRefForwardingFunction = ({
+  durationInFrames,
+  from,
+  trimBefore,
+  playbackRate,
+  freeze,
+  hidden,
+  name,
+  showInTimeline,
+  controls,
+  premountFor,
+  postmountFor,
+  styleWhilePremounted,
+  styleWhilePostmounted,
+  ...props
+}, ref) => {
+  const {
+    effectivePremountFor,
+    effectivePostmountFor,
+    freezeFrame,
+    isPremountingOrPostmounting,
+    premountingActive,
+    postmountingActive,
+    premountingStyle
+  } = Internals11.usePremounting({
     from: from ?? 0,
-    trimBefore,
     durationInFrames: durationInFrames ?? Infinity,
-    freeze,
-    hidden,
-    name: name ?? "<MapViewport>",
-    showInTimeline: showInTimeline ?? true,
-    controls,
-    children: /* @__PURE__ */ jsx8("div", {
-      ref: viewportRef,
-      style: {
-        backgroundColor,
-        inset: 0,
-        overflow: "hidden",
-        position: "absolute"
-      },
-      children: apiKey ? /* @__PURE__ */ jsxs3(Fragment, {
-        children: [
-          /* @__PURE__ */ jsx8("div", {
-            ref: mapContainerRef,
-            style: {
-              inset: 0,
-              position: "absolute"
-            }
-          }),
-          /* @__PURE__ */ jsx8(MapTilerContext.Provider, {
-            value: contextValue,
-            children
-          })
-        ]
-      }) : /* @__PURE__ */ jsx8(MissingApiKey, {})
+    premountFor: premountFor ?? null,
+    postmountFor: postmountFor ?? null,
+    style: null,
+    styleWhilePremounted: styleWhilePremounted ?? null,
+    styleWhilePostmounted: styleWhilePostmounted ?? null,
+    hideWhilePremounted: "opacity"
+  });
+  return /* @__PURE__ */ jsx10(Freeze10, {
+    frame: freezeFrame,
+    active: isPremountingOrPostmounting,
+    children: /* @__PURE__ */ jsx10(Sequence10, {
+      layout: "none",
+      durationInFrames,
+      from,
+      trimBefore,
+      playbackRate,
+      freeze,
+      hidden,
+      showInTimeline,
+      controls,
+      name: name ?? "<MapViewport>",
+      _remotionInternalPremountDisplay: effectivePremountFor || null,
+      _remotionInternalPostmountDisplay: effectivePostmountFor || null,
+      _remotionInternalIsPremounting: premountingActive,
+      _remotionInternalIsPostmounting: postmountingActive,
+      children: /* @__PURE__ */ jsx10(MapViewportContent, {
+        ...props,
+        ref,
+        premountingStyle
+      })
     })
   });
 };