react-native-photo-video-editor 0.1.0 → 0.2.0

package/android/src/main/java/com/photovideoeditor/ui/components/EditorPanel.kt

@@ -0,0 +1,250 @@
+package com.photovideoeditor.ui.components
+
+import android.content.Context
+import android.graphics.Color
+import android.graphics.Typeface
+import android.view.Gravity
+import android.view.View
+import android.widget.FrameLayout
+import android.widget.HorizontalScrollView
+import android.widget.ImageView
+import android.widget.LinearLayout
+import android.widget.TextView
+import com.photovideoeditor.ui.DesignTokens
+
+/**
+ * Shared building blocks for the editor's bottom panels (Crop / Adjust / Filters / Text / Stickers).
+ *
+ * Before this existed each panel hand-rolled its own header, chips and spacing, which is how the
+ * Adjust panel ended up with four full-height rectangular buttons while Filters used thumbnail cards.
+ * Every panel now composes the same three pieces — [editorPanelHeader], one slider, one
+ * [editorToolStrip] — so heights, padding, radii, typography and selected states stay in step.
+ *
+ * Fixed vertical budget (see PANEL_* below): header 40dp + slider ~48dp + strip 76dp, so a panel
+ * never grows past ~164dp and the photo keeps the rest of the screen.
+ */
+object EditorPanelMetrics {
+  const val HEADER_HEIGHT_DP = 40
+  const val SLIDER_HEIGHT_DP = 48
+  const val STRIP_HEIGHT_DP = 76
+  const val STRIP_ITEM_WIDTH_DP = 68
+  const val ICON_SIZE_DP = 22
+  const val THUMBNAIL_WIDTH_DP = 64
+  const val THUMBNAIL_HEIGHT_DP = 72
+  const val TOTAL_HEIGHT_DP = HEADER_HEIGHT_DP + SLIDER_HEIGHT_DP + STRIP_HEIGHT_DP
+  /** Panel without the slider row (e.g. a picker that has nothing to scrub). */
+  const val HEADER_AND_STRIP_HEIGHT_DP = HEADER_HEIGHT_DP + STRIP_HEIGHT_DP
+}
+
+/**
+ * Compact panel header: `Title            [Reset]  Done`.
+ *
+ * "Done" is an action, not a tool — it gets a 44dp touch target via padding while staying visually
+ * small, rather than becoming another full-width card.
+ */
+fun editorPanelHeader(
+  context: Context,
+  title: String,
+  accentColor: Int,
+  secondaryLabel: String? = null,
+  onSecondary: (() -> Unit)? = null,
+  onDone: () -> Unit
+): LinearLayout = LinearLayout(context).apply {
+  orientation = LinearLayout.HORIZONTAL
+  gravity = Gravity.CENTER_VERTICAL
+  setPadding(dpToPx(DesignTokens.spaceLg, context), 0, dpToPx(DesignTokens.spaceSm, context), 0)
+  addView(TextView(context).apply {
+    text = title
+    textSize = 14f
+    maxLines = 1
+    includeFontPadding = false
+    setTypeface(typeface, Typeface.BOLD)
+    setTextColor(DesignTokens.textPrimary)
+  }, LinearLayout.LayoutParams(0, LinearLayout.LayoutParams.WRAP_CONTENT, 1f))
+  if (secondaryLabel != null && onSecondary != null) {
+    addView(editorHeaderAction(context, secondaryLabel, DesignTokens.textSecondary, onSecondary))
+  }
+  addView(editorHeaderAction(context, "Done", accentColor, onDone))
+}
+
+/** Small text action sized for touch (44dp) without looking like a button. */
+private fun editorHeaderAction(context: Context, label: String, color: Int, onClick: () -> Unit): TextView =
+  TextView(context).apply {
+    text = label
+    textSize = 13f
+    maxLines = 1
+    gravity = Gravity.CENTER
+    includeFontPadding = false
+    setTypeface(typeface, Typeface.BOLD)
+    setTextColor(color)
+    minWidth = dpToPx(DesignTokens.touchTargetMin, context)
+    minHeight = dpToPx(DesignTokens.touchTargetMin, context)
+    val padH = dpToPx(DesignTokens.spaceMd, context)
+    setPadding(padH, 0, padH, 0)
+    isClickable = true
+    isFocusable = true
+    setOnClickListener { onClick() }
+    applyPressScale()
+  }
+
+/** Horizontally scrollable strip of compact tool items; the container every panel's list sits in. */
+fun editorToolStrip(context: Context, build: LinearLayout.() -> Unit): HorizontalScrollView =
+  HorizontalScrollView(context).apply {
+    isHorizontalScrollBarEnabled = false
+    clipToPadding = false
+    val padH = dpToPx(DesignTokens.spaceMd, context)
+    setPadding(padH, 0, padH, 0)
+    addView(LinearLayout(context).apply {
+      orientation = LinearLayout.HORIZONTAL
+      gravity = Gravity.CENTER_VERTICAL
+      build()
+    }, LinearLayout.LayoutParams(LinearLayout.LayoutParams.WRAP_CONTENT, LinearLayout.LayoutParams.MATCH_PARENT))
+  }
+
+/** An icon + single-line label entry in a strip, with an optional "value changed" dot. */
+class EditorStripItem(
+  val root: LinearLayout,
+  private val iconHolder: FrameLayout,
+  private val icon: ImageView,
+  private val label: TextView,
+  private val dot: View
+) {
+  /**
+   * Selected state is a purple icon + label over a faint purple disc — never a filled purple tile,
+   * which at this size reads as a giant button rather than a selection.
+   */
+  fun setSelected(selected: Boolean, accentColor: Int) {
+    icon.setColorFilter(if (selected) accentColor else DesignTokens.textSecondary)
+    label.setTextColor(if (selected) accentColor else DesignTokens.textSecondary)
+    iconHolder.background = if (selected) {
+      circleDrawable(DesignTokens.withAlphaPercent(accentColor, 18))
+    } else {
+      null
+    }
+    root.isSelected = selected
+  }
+
+  /** Tiny dot marking an adjustment that is no longer at its default value. */
+  fun setModified(modified: Boolean, accentColor: Int) {
+    dot.visibility = if (modified) View.VISIBLE else View.INVISIBLE
+    dot.background = circleDrawable(accentColor)
+  }
+}
+
+private fun circleDrawable(color: Int): android.graphics.drawable.GradientDrawable =
+  android.graphics.drawable.GradientDrawable().apply {
+    shape = android.graphics.drawable.GradientDrawable.OVAL
+    setColor(color)
+  }
+
+fun editorStripItem(
+  context: Context,
+  iconRes: Int,
+  labelText: String,
+  onClick: () -> Unit
+): EditorStripItem {
+  val icon = ImageView(context).apply {
+    setImageResource(iconRes)
+    setColorFilter(DesignTokens.textSecondary)
+  }
+  val iconHolder = FrameLayout(context).apply {
+    addView(
+      icon,
+      FrameLayout.LayoutParams(
+        dpToPx(EditorPanelMetrics.ICON_SIZE_DP, context),
+        dpToPx(EditorPanelMetrics.ICON_SIZE_DP, context),
+        Gravity.CENTER
+      )
+    )
+  }
+  val label = TextView(context).apply {
+    text = labelText
+    textSize = 11f
+    // Labels like "Brightness" and "Saturation" must never wrap to a second line.
+    maxLines = 1
+    includeFontPadding = false
+    gravity = Gravity.CENTER
+    setTextColor(DesignTokens.textSecondary)
+    setPadding(0, dpToPx(DesignTokens.spaceXs, context), 0, 0)
+  }
+  val dot = View(context).apply { visibility = View.INVISIBLE }
+  val root = LinearLayout(context).apply {
+    orientation = LinearLayout.VERTICAL
+    gravity = Gravity.CENTER_HORIZONTAL
+    isClickable = true
+    isFocusable = true
+    contentDescription = labelText
+    minimumHeight = dpToPx(DesignTokens.touchTargetMin, context)
+    addView(
+      iconHolder,
+      LinearLayout.LayoutParams(dpToPx(32, context), dpToPx(32, context))
+    )
+    addView(label, LinearLayout.LayoutParams(LinearLayout.LayoutParams.MATCH_PARENT, LinearLayout.LayoutParams.WRAP_CONTENT))
+    addView(dot, LinearLayout.LayoutParams(dpToPx(4, context), dpToPx(4, context)).apply {
+      topMargin = dpToPx(3, context)
+    })
+    setOnClickListener { onClick() }
+    applyPressScale()
+  }
+  return EditorStripItem(root, iconHolder, icon, label, dot)
+}
+
+/**
+ * Filter thumbnail: a preview of the current photo, outlined in purple when selected.
+ * Deliberately a thin outline rather than a filled container, so the photo stays readable.
+ */
+class EditorFilterThumbnail(val root: LinearLayout, val image: ImageView, private val frame: FrameLayout, private val label: TextView) {
+  fun setSelected(selected: Boolean, accentColor: Int) {
+    frame.background = roundedDrawable(
+      color = Color.TRANSPARENT,
+      radiusDp = DesignTokens.radiusMd,
+      context = root.context,
+      strokeColor = if (selected) accentColor else Color.TRANSPARENT,
+      strokeWidthDp = 2
+    )
+    label.setTextColor(if (selected) accentColor else DesignTokens.textSecondary)
+    root.isSelected = selected
+  }
+}
+
+fun editorFilterThumbnail(context: Context, labelText: String, onClick: () -> Unit): EditorFilterThumbnail {
+  val image = ImageView(context).apply {
+    scaleType = ImageView.ScaleType.CENTER_CROP
+    background = roundedDrawable(DesignTokens.surfaceContainerHigh, DesignTokens.radiusMd, context)
+    clipToOutline = true
+    outlineProvider = android.view.ViewOutlineProvider.BACKGROUND
+  }
+  // The outline lives on a frame *around* the image so the stroke never crops the preview.
+  val frame = FrameLayout(context).apply {
+    val inset = dpToPx(2, context)
+    setPadding(inset, inset, inset, inset)
+    addView(
+      image,
+      FrameLayout.LayoutParams(
+        dpToPx(EditorPanelMetrics.THUMBNAIL_WIDTH_DP, context),
+        dpToPx(EditorPanelMetrics.THUMBNAIL_HEIGHT_DP, context)
+      )
+    )
+  }
+  val label = TextView(context).apply {
+    text = labelText
+    textSize = 11f
+    maxLines = 1
+    includeFontPadding = false
+    gravity = Gravity.CENTER
+    setTextColor(DesignTokens.textSecondary)
+    setPadding(0, dpToPx(DesignTokens.spaceXs, context), 0, 0)
+  }
+  val root = LinearLayout(context).apply {
+    orientation = LinearLayout.VERTICAL
+    gravity = Gravity.CENTER_HORIZONTAL
+    isClickable = true
+    isFocusable = true
+    contentDescription = labelText
+    addView(frame, LinearLayout.LayoutParams(LinearLayout.LayoutParams.WRAP_CONTENT, LinearLayout.LayoutParams.WRAP_CONTENT))
+    addView(label, LinearLayout.LayoutParams(dpToPx(EditorPanelMetrics.THUMBNAIL_WIDTH_DP + 8, context), LinearLayout.LayoutParams.WRAP_CONTENT))
+    setOnClickListener { onClick() }
+    applyPressScale()
+  }
+  return EditorFilterThumbnail(root, image, frame, label)
+}

package/android/src/main/java/com/photovideoeditor/ui/components/EditorToolSlider.kt

@@ -0,0 +1,103 @@
+package com.photovideoeditor.ui.components
+
+import android.content.Context
+import android.graphics.Canvas
+import android.graphics.Color
+import android.graphics.Paint
+import android.graphics.drawable.ClipDrawable
+import android.graphics.drawable.GradientDrawable
+import android.graphics.drawable.LayerDrawable
+import android.view.Gravity
+import android.widget.SeekBar
+import com.photovideoeditor.ui.DesignTokens
+
+/**
+ * The editor's one slider. Draws its own `Label ................ value` line above a thin track, so
+ * a panel never needs a separate caption row, and the same instance can be re-pointed at whichever
+ * adjustment/property is selected instead of every property owning its own slider.
+ */
+class EditorToolSlider(context: Context) : SeekBar(context) {
+  var propertyKey: String = ""
+    set(value) { field = value; contentDescription = labelText ?: value; invalidate() }
+
+  /** Overrides the [propertyKey]-derived caption (e.g. "Brightness", "Intensity"). */
+  var labelText: String? = null
+    set(value) { field = value; contentDescription = value ?: propertyKey; invalidate() }
+
+  /** Overrides the value readout, given the raw progress. */
+  var valueFormatter: ((Int) -> String)? = null
+    set(value) { field = value; invalidate() }
+
+  /**
+   * Progress at which the underlying value is neutral/default, for bipolar ranges. When set, a tick
+   * is drawn there so it is obvious where "no change" sits.
+   */
+  var neutralProgress: Int? = null
+    set(value) { field = value; invalidate() }
+
+  private val density = resources.displayMetrics.density
+  private val labelPaint = Paint(Paint.ANTI_ALIAS_FLAG).apply {
+    color = DesignTokens.textSecondary
+    textSize = 12 * density
+  }
+  private val tickPaint = Paint(Paint.ANTI_ALIAS_FLAG).apply { color = DesignTokens.textSubtle }
+
+  init {
+    minimumHeight = (48 * density).toInt()
+    setPadding((16 * density).toInt(), (20 * density).toInt(), (16 * density).toInt(), 0)
+  }
+
+  /** Thin track, accent-coloured progress, compact thumb — the slider styling used editor-wide. */
+  fun applyCompactTrack(accentColor: Int) {
+    val inset = (9 * density).toInt()
+    progressDrawable = LayerDrawable(
+      arrayOf(
+        pill(Color.argb(70, 255, 255, 255)),
+        ClipDrawable(pill(accentColor), Gravity.START, ClipDrawable.HORIZONTAL)
+      )
+    ).apply {
+      setId(0, android.R.id.background)
+      setId(1, android.R.id.progress)
+      setLayerInset(0, 0, inset, 0, inset)
+      setLayerInset(1, 0, inset, 0, inset)
+    }
+    thumb = GradientDrawable().apply {
+      shape = GradientDrawable.OVAL
+      setColor(Color.WHITE)
+      setSize((12 * density).toInt(), (12 * density).toInt())
+    }
+    splitTrack = false
+  }
+
+  private fun pill(color: Int) = GradientDrawable().apply {
+    cornerRadius = 999f
+    setColor(color)
+  }
+
+  override fun onDraw(canvas: Canvas) {
+    neutralProgress?.let { neutral ->
+      if (max > 0) {
+        val trackWidth = width - paddingLeft - paddingRight
+        val x = paddingLeft + trackWidth * (neutral.toFloat() / max)
+        val centerY = (height + paddingTop) / 2f
+        canvas.drawRect(x - density, centerY - 5 * density, x + density, centerY + 5 * density, tickPaint)
+      }
+    }
+    super.onDraw(canvas)
+    val label = labelText ?: when (propertyKey) {
+      "fontSize" -> "Size"
+      "rotation" -> "Rotate"
+      else -> propertyKey.replaceFirstChar { it.uppercase() }
+    }
+    val value = valueFormatter?.invoke(progress) ?: when (propertyKey) {
+      "rotation" -> "${progress - 180}°"
+      "fontSize" -> "${progress + 12}"
+      "opacity" -> "$progress%"
+      else -> "${progress + 20}%"
+    }
+    labelPaint.textAlign = Paint.Align.LEFT
+    canvas.drawText(label, paddingLeft.toFloat(), 14 * density, labelPaint)
+    labelPaint.textAlign = Paint.Align.RIGHT
+    canvas.drawText(value, (width - paddingRight).toFloat(), 14 * density, labelPaint)
+  }
+}

package/android/src/main/java/com/photovideoeditor/video/export/VideoExporter.kt

@@ -10,6 +10,7 @@ import android.os.Looper
 import androidx.media3.common.Effect
 import androidx.media3.common.MediaItem
 import androidx.media3.common.MimeTypes
+import androidx.media3.common.OverlaySettings
 import androidx.media3.common.util.Size
 import androidx.media3.effect.BitmapOverlay
 import androidx.media3.effect.Brightness
@@ -18,6 +19,7 @@ import androidx.media3.effect.HslAdjustment
 import androidx.media3.effect.OverlayEffect
 import androidx.media3.effect.Presentation
 import androidx.media3.effect.ScaleAndRotateTransformation
+import androidx.media3.effect.StaticOverlaySettings
 import androidx.media3.effect.TextureOverlay
 import androidx.media3.transformer.Composition
 import androidx.media3.transformer.EditedMediaItem
@@ -28,6 +30,7 @@ import androidx.media3.transformer.ExportResult
 import androidx.media3.transformer.ProgressHolder
 import androidx.media3.transformer.Transformer
 import com.photovideoeditor.files.SourceResolver
+import com.photovideoeditor.photo.render.OverlayGeometry
 import com.photovideoeditor.photo.render.PhotoLayer
 import com.photovideoeditor.photo.render.PhotoLayerRenderer
 import com.photovideoeditor.video.render.VideoClip
@@ -120,6 +123,8 @@ class VideoExporter(private val context: Context) {
         effects.add(Presentation.createForAspectRatio(ratio, Presentation.LAYOUT_SCALE_TO_FIT_WITH_CROP))
       }
 
+      effects.addAll(com.photovideoeditor.video.render.VideoCropEffects.create(state.crop))
+
       // Video-level filters: export-only for now, no live preview — see docs/video-editor.md.
       if (state.brightness != 0f) effects.add(Brightness(state.brightness / 100f))
       if (state.contrast != 0f) effects.add(Contrast(state.contrast / 100f))
@@ -148,20 +153,37 @@ class VideoExporter(private val context: Context) {
               object : BitmapOverlay() {
                 @Volatile private var outputWidth = sourceWidth.coerceAtLeast(2)
                 @Volatile private var outputHeight = sourceHeight.coerceAtLeast(2)
+                @Volatile private var settings: OverlaySettings = StaticOverlaySettings.Builder().build()
 
                 override fun configure(videoSize: Size) {
                   super.configure(videoSize)
-                  // Media3 maps a same-aspect overlay texture onto the complete background
-                  // frame. Bound the longest edge to avoid allocating a huge ARGB bitmap for
-                  // extreme (4K/8K) outputs, while preserving exact normalized geometry. The
-                  // cap is set to cover common Full HD exports (1920px long edge) natively —
-                  // a lower cap visibly softens overlay text/sticker edges vs. the preview,
-                  // since it downscales the overlay before compositing.
-                  val scale = minOf(1f, MAX_OVERLAY_EDGE_PX / maxOf(videoSize.width, videoSize.height).coerceAtLeast(1))
-                  outputWidth = (videoSize.width * scale).toInt().coerceAtLeast(2)
-                  outputHeight = (videoSize.height * scale).toInt().coerceAtLeast(2)
+                  // Media3 composites an overlay texture **1:1 in pixels, centred** on the frame — it
+                  // does NOT stretch it to fill (that is what iOS's `contentsGravity = .resizeAspect`
+                  // does, which is why only Android was affected). Verified against the 1.8.0 bytecode
+                  // of `OverlayMatrixProvider.getTransformationMatrix`: with default anchors/rotation
+                  // its matrix chain collapses to
+                  //     net scale = (overlaySize / frameSize) * OverlaySettings.scale
+                  // (the inner scale/scaleInv pair only exists to apply the anchor offset in unscaled
+                  // space; the chain multiplies by `scaleMatrix` once more at the end).
+                  //
+                  // `PhotoLayerRenderer` draws in coordinates normalized to the bitmap it is handed,
+                  // so an overlay bitmap smaller than the frame made every layer render *smaller and
+                  // pulled toward the frame centre* by exactly the shortfall — e.g. a 4K export
+                  // (3840px long edge) downscaled to a 1920px overlay put every sticker/text at half
+                  // its preview size. Videos at or under the cap were unaffected, which is why this
+                  // only reproduced on high-resolution sources.
+                  //
+                  // Fix: keep the memory cap, but tell Media3 to scale the overlay back up to the
+                  // full frame. The compensation divides by the *rounded* bitmap size actually
+                  // allocated (not the pre-rounding ratio) so rounding cannot reintroduce drift.
+                  val plan = OverlayGeometry.canvasPlan(videoSize.width, videoSize.height, MAX_OVERLAY_EDGE_PX)
+                  outputWidth = plan.width
+                  outputHeight = plan.height
+                  settings = StaticOverlaySettings.Builder().setScale(plan.scaleX, plan.scaleY).build()
                 }
 
+                override fun getOverlaySettings(presentationTimeUs: Long): OverlaySettings = settings
+
                 override fun getBitmap(presentationTimeUs: Long): Bitmap {
                   val positionMs = presentationTimeUs / 1000 + clipOffsetMs
                   val activeLayers = layers.filter { it.isActiveAt(positionMs, totalDurationMs) }
@@ -313,7 +335,12 @@ class VideoExporter(private val context: Context) {
   }
 
   private companion object {
-    /** Overlay-compositing bitmap longest-edge cap; see the comment at its call site. */
-    const val MAX_OVERLAY_EDGE_PX = 1920f
+    /**
+     * Overlay-compositing bitmap longest-edge cap — purely a memory guard (an ARGB_8888 bitmap this
+     * size is allocated twice transiently while rendering). Geometry no longer depends on it: any
+     * shortfall is scaled back to the full frame via `OverlaySettings` (see the `configure` comment),
+     * so the cap only trades overlay sharpness for peak memory on above-1440p exports.
+     */
+    const val MAX_OVERLAY_EDGE_PX = 2560f
   }
 }

package/android/src/main/java/com/photovideoeditor/video/render/VideoCropEffects.kt

@@ -0,0 +1,35 @@
+package com.photovideoeditor.video.render
+
+import android.graphics.Matrix
+import androidx.media3.common.Effect
+import androidx.media3.common.util.Size
+import androidx.media3.effect.Crop
+import androidx.media3.effect.MatrixTransformation
+import androidx.media3.effect.ScaleAndRotateTransformation
+import com.photovideoeditor.photo.render.CropGeometry
+import com.photovideoeditor.photo.render.PhotoTransformState
+import kotlin.math.cos
+import kotlin.math.sin
+
+/** Identical effect order for ExoPlayer preview and Transformer export. */
+object VideoCropEffects {
+  fun create(state: PhotoTransformState, includeCrop: Boolean = true): List<Effect> = buildList {
+    if (state.rotationDegrees != 0) add(ScaleAndRotateTransformation.Builder().setRotationDegrees(-state.rotationDegrees.toFloat()).build())
+    if (state.straightenDegrees != 0f) add(object : MatrixTransformation {
+      private val matrix = Matrix()
+      override fun configure(inputWidth: Int, inputHeight: Int): Size {
+        val w = inputWidth.toFloat(); val h = inputHeight.toFloat()
+        val scale = CropGeometry.fillScale(w, h, state.straightenDegrees)
+        val radians = Math.toRadians(state.straightenDegrees.toDouble())
+        val c = cos(radians).toFloat() * scale; val s = sin(radians).toFloat() * scale
+        // GL's Y axis points up; UI rotation is clockwise with Y pointing down.
+        matrix.setValues(floatArrayOf(c, s * h / w, 0f, -s * w / h, c, 0f, 0f, 0f, 1f))
+        return Size(inputWidth, inputHeight)
+      }
+      override fun getMatrix(presentationTimeUs: Long) = matrix
+    })
+    if (includeCrop && (state.cropLeft != 0f || state.cropTop != 0f || state.cropRight != 1f || state.cropBottom != 1f)) {
+      add(Crop(state.cropLeft * 2 - 1, state.cropRight * 2 - 1, 1 - state.cropBottom * 2, 1 - state.cropTop * 2))
+    }
+  }
+}

package/android/src/main/java/com/photovideoeditor/video/render/VideoEditSession.kt

@@ -17,6 +17,10 @@ import java.io.File
  * clip list again to produce the exported file.
  */
 class VideoEditSession(context: Context, val sourceUri: String) {
+  var sourceWidth = 0
+    private set
+  var sourceHeight = 0
+    private set
   val player: ExoPlayer = ExoPlayer.Builder(context).build()
 
   /** Text/sticker/shape overlays. Reuses the photo layer model/stack — see `PhotoLayer.startMs`/`endMs` for timing. */
@@ -49,6 +53,12 @@ class VideoEditSession(context: Context, val sourceUri: String) {
 
   init {
     player.addListener(object : Player.Listener {
+      override fun onVideoSizeChanged(size: androidx.media3.common.VideoSize) {
+        if (sourceWidth == 0 && size.width > 0 && size.height > 0) {
+          sourceWidth = (size.width * size.pixelWidthHeightRatio).toInt()
+          sourceHeight = size.height
+        }
+      }
       override fun onPlaybackStateChanged(playbackState: Int) {
         if (playbackState == Player.STATE_READY && !initialTimelineCreated && player.duration > 0) {
           initialTimelineCreated = true

package/android/src/main/java/com/photovideoeditor/video/render/VideoTransformState.kt

@@ -9,6 +9,7 @@ package com.photovideoeditor.video.render
  */
 data class VideoTransformState(
   val rotationDegrees: Int = 0,
+  val crop: com.photovideoeditor.photo.render.PhotoTransformState = com.photovideoeditor.photo.render.PhotoTransformState(),
   val aspectRatio: Float? = null,
   val coverFrameMs: Long = 0L,
   /** Preview-only for now: cycled via the Speed tool. Export does not yet honor this — see docs/video-editor.md. */

package/android/src/main/res/drawable/ic_draw.xml

@@ -0,0 +1,6 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="24dp" android:height="24dp" android:viewportWidth="960" android:viewportHeight="960">
+  <group android:translateY="960">
+    <path android:fillColor="#FFFFFF" android:pathData="M160-120v-170l527-526q12-12 27-18t30-6q16 0 30.5 6t25.5 18l56 56q12 11 18 25.5t6 30.5q0 15-6 30t-18 27L330-120H160Zm80-80h56l393-392-28-29-29-28-392 393v56Zm320 80q74 0 137-37t63-103q0-36-19-62t-51-45l-59 59q23 10 36 22t13 26q0 23-36.5 41.5T560-200q-17 0-28.5 11.5T520-160q0 17 11.5 28.5T560-120ZM183-426l60-60q-20-8-31.5-16.5T200-520q0-12 18-24t76-37q88-38 117-69t29-70q0-55-44-87.5T280-840q-45 0-80.5 16T145-785q-11 13-9 29t15 26q13 11 29 9t27-13q14-14 31-20t42-6q41 0 60.5 12t19.5 28q0 14-17.5 25.5T262-654q-80 35-111 63.5T120-520q0 32 17 54.5t46 39.5Z"/>
+  </group>
+</vector>

package/android/src/main/res/drawable/ic_pause.xml

@@ -0,0 +1,7 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="24dp"
+    android:height="24dp"
+    android:viewportWidth="24"
+    android:viewportHeight="24">
+  <path android:fillColor="#FFFFFFFF" android:pathData="M6,19h4V5H6v14zM14,5v14h4V5h-4z" />
+</vector>

package/android/src/main/res/drawable/ic_play.xml

@@ -0,0 +1,7 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="24dp"
+    android:height="24dp"
+    android:viewportWidth="24"
+    android:viewportHeight="24">
+  <path android:fillColor="#FFFFFFFF" android:pathData="M8,5v14l11,-7z" />
+</vector>

package/docs/api.md

@@ -2,7 +2,7 @@
 
 `openEditor(options)` validates defaults, invokes native code, and returns `Promise<EditorResult>`. In milestone one it returns the source URI/type and `cancelled: false`; it does not present UI or export. `cancelExport(jobId?)` currently returns `false`. `isAvailable()` synchronously checks native linkage. `addExportProgressListener(listener)` returns `{ remove() }`; no fake events are emitted.
 
-Defaults enable all feature flags, set quality to `high`, preserve metadata, and disable gallery saving. For photos, `trim` normalizes to `false`. Photo/video format mismatches and unknown enum values are rejected.
+Defaults enable all feature flags—including `text`, `stickers`, `overlays`, and `draw`—set quality to `high`, preserve metadata, and disable gallery saving. For photos, `trim` normalizes to `false`. Photo/video format mismatches and unknown enum values are rejected.
 
 Dimensions use pixels, duration milliseconds, file size bytes, bitrate bits/second, frame rate frames/second, and progress ranges from 0 to 1. Public types and option-level JSDoc live in `src/types.ts`.
 

package/docs/editor-ui-validation.md

@@ -0,0 +1,22 @@
+# Native editor UI
+
+The Kotlin and UIKit editors reuse their existing layer stacks, normalized media coordinates, renderers, and export paths. Tool selection is transient UI state; opening a palette or slider does not mutate a layer. Slider gestures commit one history snapshot, and duplication copies all layer properties including timing and drawing data.
+
+Both editors use contextual icon rails, an explicit Color palette for text, and custom multiline text entry. Unsupported font-family and alignment controls are omitted. Existing crop, adjustment, filtering, drawing, and layer actions remain available.
+
+New stickers start at 30% of rendered media width. Their original image aspect ratio is retained using the existing `overlayAspectRatio` field. Existing layer scales retain their meaning. Bitmap stickers now render at their source aspect ratio instead of stretching into squares. Selection controls belong to a separate view and are not part of the bitmap/video compositor.
+
+## Device validation
+
+The following needs device/simulator verification, particularly on iOS where UIKit cannot be built on Linux:
+
+- Open portrait, landscape, and square photos/videos; check complete media visibility and centered placement.
+- Add multiline text with the keyboard open in portrait and landscape. Check Add, Edit, Cancel, focus, and keyboard dismissal.
+- Change text color, size, rotation, and opacity; switch tools; check one-step undo/redo and retained position/timing.
+- Add a non-square sticker, drag, pinch, rotate, release one finger, duplicate, and delete through the canvas handle.
+- Tap outside to dismiss selection; check the main toolbar returns without extra panels.
+- Seek/play/pause video; verify overlay visibility at its start/end times.
+- Export at original resolution and compare overlay centers, dimensions, colors, opacity, rotation, and ordering with the preview. Selection chrome must be absent.
+- Check small screens, large text settings, navigation insets, VoiceOver/TalkBack, and horizontal toolbar scrolling.
+
+Android unit coverage includes portrait/landscape/square sticker sizing, preview/export proportional geometry, layer-edit state preservation, and undo/redo. These tests do not replace rendered export comparison or keyboard/gesture checks on devices.

package/docs/photo-editor.md

@@ -2,7 +2,7 @@
 
 ## Milestone 2 — transform and export
 
-- **Crop** — draggable/resizable freeform crop with corner handles, plus aspect-ratio presets (Free, 1:1, 4:5, 3:4, 9:16, 16:9). Tap **Crop** to enter crop mode; **Done** in the crop sub-bar commits it.
+- **Crop** — dedicated ZLImageEditor-inspired crop mode with a dimmed mask, rule-of-thirds grid, four corner and four edge handles, movable crop frame, and aspect presets (Free, 1:1, 4:5, 3:4, 9:16, 16:9). **Cancel** restores the exact pre-crop state; **Done** commits the crop.
 - **Rotate** — rotates 90° per tap. Resets the current crop (a rotated image has a different frame of reference for the crop rectangle).
 - **Flip** — cycles none → horizontal → vertical → none.
 - **Straighten** — a fine -45°...45° slider, shown while crop mode is active.
@@ -18,13 +18,13 @@ Tap **Filters** to enter adjustment mode: a horizontal chip row selects which co
 - **Reset** (filters sub-bar) — restores all adjustments to their zero/no-op defaults, independent of crop/transform/layers.
 - Same pipeline and formulas applied in preview and export on both platforms.
 
-## Milestone 4 — layers: text, stickers, shapes, drawing
+## Milestone 4 — layers: text, stickers, images, drawing
 
 - **Text** — tap **Text**, type a string in the dialog, and it's added as a centered, draggable text layer.
-- **Stickers** — tap **Stickers** for a picker with 8 built-in emoji stickers, any consumer-provided `stickerAssets` (see `EditorOptions.stickerAssets`), and three basic shapes (Rect/Oval/Line) sharing the same picker.
+- **Stickers** — tap **Stickers** for the searchable, categorized sticker collection bundled with the package. No third-party sticker API or network connection is used.
 - **Draw** — tap **Draw** for a freehand canvas: pick a color and thin/thick width, draw multiple strokes, undo the last stroke or clear all, then **Done** commits every stroke as its own layer (so strokes with different colors/widths keep their own settings).
 - **Selection** — tap any layer on the canvas to select it (shown with a dashed bounding box) and open its mini toolbar.
-- **Transform** — the mini toolbar's Scale/Rotate/Opacity chips each bind a shared slider; dragging the layer directly on the canvas moves it. (Two-finger pinch/rotate gestures were scoped out in favor of sliders, to keep the gesture code small enough to be confident in without a device to test on — see Known limitations in the root README.)
+- **Transform** — drag layers to move them, pinch with two fingers to scale and rotate, or use the corner handle. Scale/Rotate/Opacity sliders remain available for precise changes.
 - **Duplicate / Lock / Hide / Front / Back / Delete** — per-layer actions in the mini toolbar.
 - **Undo/redo** — header buttons, backed by a snapshot history (50 entries). One entry is recorded per *committed* operation — add/delete/duplicate/reorder, or a drag/slider gesture's final value — never per intermediate touch-move frame.
 - Layers are burned into the image identically in preview and at export, positioned in the same full-frame coordinate space as the crop overlay (so cropping after adding layers can crop them out, matching what the crop preview would suggest).
@@ -32,8 +32,7 @@ Tap **Filters** to enter adjustment mode: a horizontal chip row selects which co
 ### Known gaps in Milestone 4
 
 - **Font registration is not wired to custom font files yet.** `EditorOptions.fonts` is accepted structurally (passed through to the native layer) but text layers currently only resolve `fontFamily` against system-installed font names (Android `Typeface.create`, iOS `UIFont(name:)`) — a consumer-provided font *file* is not loaded. This is an honest scope cut, not a silent gap: closing it means adding a font-file loader (`Typeface.createFromFile` / `CTFontManagerRegisterFontsForURL`) on each platform, planned as a small follow-up.
-- Hit-testing for layer selection uses an axis-aligned box around each layer's center and does not account for the layer's own rotation.
-- No sealed per-type layer model — one flat `PhotoLayer` struct/data class covers text/sticker/shape/drawing, a deliberate simplification.
+- No sealed per-type layer model — one flat `PhotoLayer` struct/data class covers text/sticker/image/drawing, a deliberate simplification.
 - Text styling is limited to color and font size for now (no stroke/background/shadow/alignment controls yet, though the fields exist on `PhotoLayer` for a later pass).
 
 Export applies the combined transform + adjustments + layers to the full-resolution source (never mutated) and writes JPEG or PNG (WebP on Android only; iOS falls back to JPEG). Output width/height/fileSize/mimeType are returned on the `EditorResult`.