react-native-photo-video-editor 0.1.1 → 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/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.