refactor: move callout to Marker props with bubbled support

Remove standalone Callout component. Callout is now configured via
Marker props: callout, onCalloutPress, calloutBubbled.

When calloutBubbled={false}, render live interactive views above the
marker instead of rasterized info windows, enabling buttons and
other interactive content inside callouts on all platforms.

Author: lodev09

README.md

@@ -113,8 +113,7 @@ import { MapView, Marker, Polyline, Polygon } from '@lugg/maps';
 ## Components
 
 - [MapView](docs/MAPVIEW.md) - Main map component
-- [Marker](docs/MARKER.md) - Map markers
-- [Callout](docs/CALLOUT.md) - Marker callouts
+- [Marker](docs/MARKER.md) - Map markers with callout support
 - [Polyline](docs/POLYLINE.md) - Draw lines on the map
 - [Polygon](docs/POLYGON.md) - Draw filled shapes on the map
 - [GeoJson](docs/GEOJSON.md) - Render GeoJSON data on the map

android/src/main/java/com/luggmaps/LuggCalloutView.kt

@@ -13,6 +13,7 @@ import com.luggmaps.extensions.dispatchEvent
 
 class LuggCalloutView(context: Context) : ReactViewGroup(context) {
   val contentView: ReactViewGroup = ReactViewGroup(context)
+  var bubbled: Boolean = true
 
   val hasCustomContent: Boolean
     get() = contentView.isNotEmpty()

android/src/main/java/com/luggmaps/LuggCalloutViewManager.kt

@@ -17,6 +17,10 @@ class LuggCalloutViewManager :
   override fun getName(): String = NAME
   override fun createViewInstance(context: ThemedReactContext): LuggCalloutView = LuggCalloutView(context)
 
+  override fun setBubbled(view: LuggCalloutView, value: Boolean) {
+    view.bubbled = value
+  }
+
   override fun getExportedCustomDirectEventTypeConstants(): Map<String, Any> =
     mapOf(
       "topCalloutPress" to mapOf("registrationName" to "onCalloutPress")

android/src/main/java/com/luggmaps/core/GoogleMapProvider.kt

@@ -18,6 +18,7 @@ import com.google.android.gms.maps.model.Marker
 import com.google.android.gms.maps.model.Polygon
 import com.google.android.gms.maps.model.PolygonOptions
 import com.google.android.gms.maps.model.PolylineOptions
+import com.luggmaps.LuggCalloutView
 import com.luggmaps.LuggMapWrapperView
 import com.luggmaps.LuggMarkerView
 import com.luggmaps.LuggMarkerViewDelegate
@@ -59,6 +60,7 @@ class GoogleMapProvider(private val context: Context) :
   private val polylineAnimators = mutableMapOf<LuggPolylineView, PolylineAnimator>()
   private val polygonToViewMap = mutableMapOf<Polygon, LuggPolygonView>()
   private val markerToViewMap = mutableMapOf<Marker, LuggMarkerView>()
+  private var activeNonBubbledMarker: Marker? = null
   private var tapLocation: LatLng? = null
 
   // Initial camera settings
@@ -106,6 +108,7 @@ class GoogleMapProvider(private val context: Context) :
   }
 
   override fun destroy() {
+    dismissNonBubbledCallout()
     pendingMarkerViews.clear()
     pendingPolylineViews.clear()
     pendingPolygonViews.clear()
@@ -184,6 +187,7 @@ class GoogleMapProvider(private val context: Context) :
     val map = googleMap ?: return
     val position = map.cameraPosition
     delegate?.mapProviderDidMoveCamera(position.target.latitude, position.target.longitude, position.zoom, isDragging)
+    positionNonBubbledCallout()
   }
 
   override fun onCameraIdle() {
@@ -197,6 +201,7 @@ class GoogleMapProvider(private val context: Context) :
   }
 
   override fun onMapClick(latLng: LatLng) {
+    dismissNonBubbledCallout()
     val map = googleMap ?: return
     val point = map.projection.toScreenLocation(latLng)
     delegate?.mapProviderDidPress(latLng.latitude, latLng.longitude, point.x.toFloat(), point.y.toFloat())
@@ -218,9 +223,17 @@ class GoogleMapProvider(private val context: Context) :
   }
 
   override fun onMarkerClick(marker: Marker): Boolean {
+    dismissNonBubbledCallout()
+
     markerToViewMap[marker]?.let { view ->
       val point = googleMap?.projection?.toScreenLocation(marker.position)
       view.emitPressEvent(point?.x?.toFloat() ?: 0f, point?.y?.toFloat() ?: 0f)
+
+      val calloutView = view.calloutView
+      if (calloutView != null && !calloutView.bubbled && calloutView.hasCustomContent) {
+        showNonBubbledCallout(marker, calloutView)
+        return true
+      }
     }
     return false
   }
@@ -251,12 +264,15 @@ class GoogleMapProvider(private val context: Context) :
     }
   }
 
-  override fun getInfoWindow(marker: Marker): View? = null
+  override fun getInfoWindow(marker: Marker): View? {
+    // Non-bubbled callouts are rendered as live views, not info windows
+    return null
+  }
 
   override fun getInfoContents(marker: Marker): View? {
     val markerView = markerToViewMap[marker] ?: return null
     val calloutView = markerView.calloutView ?: return null
-    if (!calloutView.hasCustomContent) return null
+    if (!calloutView.hasCustomContent || !calloutView.bubbled) return null
 
     val bitmap = calloutView.createContentBitmap() ?: return null
     return ImageView(context).apply { setImageBitmap(bitmap) }
@@ -266,6 +282,45 @@ class GoogleMapProvider(private val context: Context) :
     markerToViewMap[marker]?.calloutView?.emitPressEvent()
   }
 
+  private fun showNonBubbledCallout(marker: Marker, calloutView: LuggCalloutView) {
+    val wrapper = wrapperView ?: return
+    val contentView = calloutView.contentView
+
+    contentView.setOnClickListener {
+      calloutView.emitPressEvent()
+    }
+
+    wrapper.addView(contentView)
+    activeNonBubbledMarker = marker
+    positionNonBubbledCallout()
+  }
+
+  private fun dismissNonBubbledCallout() {
+    val marker = activeNonBubbledMarker ?: return
+    val markerView = markerToViewMap[marker] ?: return
+    val calloutView = markerView.calloutView ?: return
+    val contentView = calloutView.contentView
+
+    (contentView.parent as? android.view.ViewGroup)?.removeView(contentView)
+    activeNonBubbledMarker = null
+  }
+
+  private fun positionNonBubbledCallout() {
+    val marker = activeNonBubbledMarker ?: return
+    val markerView = markerToViewMap[marker] ?: return
+    val calloutView = markerView.calloutView ?: return
+    val contentView = calloutView.contentView
+    val map = googleMap ?: return
+
+    val point = map.projection.toScreenLocation(marker.position)
+    contentView.post {
+      val x = point.x - contentView.width / 2f
+      val y = point.y - contentView.height.toFloat()
+      contentView.translationX = x
+      contentView.translationY = y
+    }
+  }
+
   // endregion
 
   // region Props

docs/CALLOUT.md

@@ -44,6 +44,9 @@ import { MapView, Marker } from '@lugg/maps';
 | `onDragStart` | `(event: MarkerDragEvent) => void` | - | Called when marker drag starts. Event includes `coordinate` and `point` |
 | `onDragChange` | `(event: MarkerDragEvent) => void` | - | Called continuously as the marker is dragged. Event includes `coordinate` and `point` |
 | `onDragEnd` | `(event: MarkerDragEvent) => void` | - | Called when marker drag ends. Event includes `coordinate` and `point` |
+| `callout` | `ComponentType \| ReactElement` | - | Callout content displayed when marker is tapped |
+| `onCalloutPress` | `() => void` | - | Called when the callout is pressed |
+| `calloutBubbled` | `boolean` | `true` | Whether to wrap the callout in the native platform bubble |
 | `children` | `ReactNode` | - | Custom marker view |
 
 ## Draggable Markers
@@ -85,14 +88,45 @@ Use the `children` prop to render a custom marker view. The `anchor` prop contro
 
 ## Callout
 
-Use the [`Callout`](./CALLOUT.md) component as a child to display a callout when the marker is tapped.
+Use the `callout` prop to display a callout when the marker is tapped.
 
 ```tsx
+{/* Native callout using title/description */}
 <Marker
   coordinate={{ latitude: 37.7749, longitude: -122.4194 }}
   title="San Francisco"
   description="California, USA"
->
-  <Callout onPress={() => console.log('Callout pressed')} />
-</Marker>
+  onCalloutPress={() => console.log('Callout pressed')}
+/>
+
+{/* Custom callout content */}
+<Marker
+  coordinate={{ latitude: 37.8049, longitude: -122.4094 }}
+  callout={
+    <View style={{ padding: 8 }}>
+      <Text style={{ fontWeight: 'bold' }}>Custom Callout</Text>
+      <Text>With React content</Text>
+    </View>
+  }
+  onCalloutPress={() => console.log('Callout pressed')}
+/>
+
+{/* Non-bubbled callout (no native chrome) */}
+<Marker
+  coordinate={{ latitude: 37.7849, longitude: -122.4294 }}
+  calloutBubbled={false}
+  callout={
+    <View style={{ padding: 12, backgroundColor: 'white', borderRadius: 8 }}>
+      <Text style={{ fontWeight: 'bold' }}>Custom Tooltip</Text>
+      <Text>Rendered without native bubble</Text>
+    </View>
+  }
+  onCalloutPress={() => console.log('Callout pressed')}
+/>
 ```
+
+### Platform Behavior
+
+- **Apple Maps (iOS)**: Custom callout content is rendered as a live interactive view inside the native callout bubble. With `calloutBubbled={false}`, content is rendered as a live interactive view positioned above the marker without the native bubble.
+- **Google Maps (iOS & Android)**: Custom callout content is rasterized into the info window. With `calloutBubbled={false}`, content is rendered as a live interactive view positioned above the marker (not rasterized), allowing interactive elements like buttons.
+- **Web**: Uses Google Maps `InfoWindow`. With `calloutBubbled={false}`, content is rendered as a positioned element above the marker.