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

package/android/src/main/java/com/photovideoeditor/photo/ui/DrawOverlayView.kt

@@ -0,0 +1,66 @@
+package com.photovideoeditor.photo.ui
+
+import android.content.Context
+import android.graphics.Canvas
+import android.graphics.Color
+import android.graphics.Paint
+import android.graphics.Path
+import android.graphics.RectF
+import android.view.MotionEvent
+import android.view.View
+
+data class DrawStroke(val points: MutableList<Pair<Float, Float>>, val color: Int, val widthPx: Float)
+
+/** Captures freehand strokes over the visible image while Draw mode is active. */
+class DrawOverlayView(context: Context) : View(context) {
+  private var imageBounds = RectF()
+  var strokeColor: Int = Color.RED
+  var strokeWidthPx: Float = 12f
+  private val strokes = mutableListOf<DrawStroke>()
+  private var current: DrawStroke? = null
+  var onStrokesChanged: ((List<DrawStroke>) -> Unit)? = null
+  private val paint = Paint(Paint.ANTI_ALIAS_FLAG).apply {
+    style = Paint.Style.STROKE
+    strokeCap = Paint.Cap.ROUND
+    strokeJoin = Paint.Join.ROUND
+  }
+
+  fun setImageBounds(bounds: RectF) { imageBounds = RectF(bounds) }
+  fun clearStrokes() { strokes.clear(); current = null; invalidate(); onStrokesChanged?.invoke(strokes) }
+  fun undoLastStroke() { if (strokes.isNotEmpty()) strokes.removeAt(strokes.lastIndex); invalidate(); onStrokesChanged?.invoke(strokes) }
+  val hasStrokes: Boolean get() = strokes.isNotEmpty()
+
+  fun normalizedStrokes(): List<Pair<List<Pair<Float, Float>>, DrawStroke>> {
+    if (imageBounds.width() <= 0 || imageBounds.height() <= 0) return emptyList()
+    return strokes.map { stroke ->
+      stroke.points.map { (x, y) ->
+        (x - imageBounds.left) / imageBounds.width() to (y - imageBounds.top) / imageBounds.height()
+      } to stroke
+    }
+  }
+
+  override fun onDraw(canvas: Canvas) {
+    strokes.forEach { stroke ->
+      if (stroke.points.size < 2) return@forEach
+      paint.color = stroke.color; paint.strokeWidth = stroke.widthPx
+      val path = Path()
+      stroke.points.forEachIndexed { index, point -> if (index == 0) path.moveTo(point.first, point.second) else path.lineTo(point.first, point.second) }
+      canvas.drawPath(path, paint)
+    }
+  }
+
+  override fun onTouchEvent(event: MotionEvent): Boolean {
+    if (!imageBounds.contains(event.x, event.y) && event.actionMasked == MotionEvent.ACTION_DOWN) return false
+    when (event.actionMasked) {
+      MotionEvent.ACTION_DOWN -> {
+        current = DrawStroke(mutableListOf(event.x to event.y), strokeColor, strokeWidthPx).also(strokes::add)
+        parent?.requestDisallowInterceptTouchEvent(true); invalidate(); return true
+      }
+      MotionEvent.ACTION_MOVE -> { current?.points?.add(event.x to event.y); invalidate(); return true }
+      MotionEvent.ACTION_UP, MotionEvent.ACTION_CANCEL -> {
+        current = null; parent?.requestDisallowInterceptTouchEvent(false); onStrokesChanged?.invoke(strokes); return true
+      }
+    }
+    return false
+  }
+}

package/android/src/main/java/com/photovideoeditor/photo/ui/LayerOverlayView.kt

@@ -28,6 +28,7 @@ class LayerOverlayView(context: Context) : View(context) {
   var selectedLayerId: String? = null
     set(value) { field = value; invalidate() }
   var onLayerTapped: ((String?) -> Unit)? = null
+  var onLayerDoubleTapped: ((String) -> Unit)? = null
   var onLayerTransformChanged: ((id: String, x: Float, y: Float, scale: Float, rotationDegrees: Float) -> Unit)? = null
   var onLayerTransformEnded: ((id: String) -> Unit)? = null
 
@@ -40,6 +41,9 @@ class LayerOverlayView(context: Context) : View(context) {
   private var startAngle = 0f
   private var startMidX = 0f
   private var startMidY = 0f
+  private var movedDuringGesture = false
+  private var lastTapTimeMs = 0L
+  private var lastTapLayerId: String? = null
   private val density = resources.displayMetrics.density
   private val handleRadius = 11f * density
   private val handleTouchRadius = 30f * density
@@ -79,6 +83,7 @@ class LayerOverlayView(context: Context) : View(context) {
         onLayerTapped?.invoke(hit?.id)
         if (hit == null || hit.locked) { resetGesture(); return false }
         gestureId = hit.id
+        movedDuringGesture = false
         startLayer = hit.copy()
         startPointX = event.x; startPointY = event.y
         if (handleHit != null) {
@@ -103,6 +108,7 @@ class LayerOverlayView(context: Context) : View(context) {
       }
       MotionEvent.ACTION_MOVE -> {
         val initial = startLayer ?: return false
+        if (hypot(event.x - startPointX, event.y - startPointY) > handleRadius) movedDuringGesture = true
         when (gesture) {
           Gesture.DRAG -> {
             val x = (initial.x + (event.x - startPointX) / imageBounds.width()).coerceIn(0f, 1f)
@@ -127,7 +133,16 @@ class LayerOverlayView(context: Context) : View(context) {
         }
         return true
       }
-      MotionEvent.ACTION_UP, MotionEvent.ACTION_CANCEL -> { finishGesture(); return true }
+      MotionEvent.ACTION_UP, MotionEvent.ACTION_CANCEL -> {
+        val tappedId = gestureId
+        if (event.actionMasked == MotionEvent.ACTION_UP && !movedDuringGesture && tappedId != null) {
+          val now = android.os.SystemClock.uptimeMillis()
+          if (lastTapLayerId == tappedId && now - lastTapTimeMs <= 350L) {
+            onLayerDoubleTapped?.invoke(tappedId); lastTapLayerId = null; lastTapTimeMs = 0L
+          } else { lastTapLayerId = tappedId; lastTapTimeMs = now }
+        }
+        finishGesture(); return true
+      }
       MotionEvent.ACTION_POINTER_UP -> return true
     }
     return false
@@ -166,6 +181,11 @@ class LayerOverlayView(context: Context) : View(context) {
         val baseSize = shortSide * 0.6f
         if (aspect >= 1f) Pair(baseSize / 2f, (baseSize / aspect) / 2f) else Pair((baseSize * aspect) / 2f, baseSize / 2f)
       }
+      LayerType.DRAWING -> {
+        val maxX = layer.drawPoints.maxOfOrNull { kotlin.math.abs(it.first) } ?: 0.08f
+        val maxY = layer.drawPoints.maxOfOrNull { kotlin.math.abs(it.second) } ?: 0.08f
+        Pair(maxX * imageBounds.width() + handleRadius, maxY * imageBounds.height() + handleRadius)
+      }
     }
     return Pair((base.first * layer.scale).coerceAtLeast(handleRadius), (base.second * layer.scale).coerceAtLeast(handleRadius))
   }

package/android/src/main/java/com/photovideoeditor/stickers/OnlineStickerSheet.kt

@@ -3,12 +3,14 @@ package com.photovideoeditor.stickers
 import android.app.Dialog
 import android.content.Context
 import android.graphics.Color
+import android.graphics.BitmapFactory
 import android.os.Bundle
 import android.os.Handler
 import android.os.Looper
 import android.text.Editable
 import android.text.TextWatcher
 import android.view.Gravity
+import android.view.MotionEvent
 import android.view.View
 import android.view.ViewGroup
 import android.view.Window
@@ -18,7 +20,6 @@ import android.widget.FrameLayout
 import android.widget.HorizontalScrollView
 import android.widget.ImageView
 import android.widget.LinearLayout
-import android.widget.ProgressBar
 import android.widget.TextView
 import android.widget.Toast
 import androidx.recyclerview.widget.GridLayoutManager
@@ -26,41 +27,50 @@ import androidx.recyclerview.widget.RecyclerView
 import com.photovideoeditor.ui.DesignTokens
 import com.photovideoeditor.ui.components.dpToPx
 import com.photovideoeditor.ui.components.editorChip
-import com.photovideoeditor.ui.components.editorPrimaryButton
 import com.photovideoeditor.ui.components.roundedDrawable
+import com.photovideoeditor.files.SourceResolver
+import java.io.File
+import java.io.FileOutputStream
+import java.net.URL
+import java.util.concurrent.Executors
+
+data class RuntimeSticker(val id: String, val uri: String)
 
 /**
- * Bottom sheet listing OpenMoji's free sticker catalog (search + category filter + grid),
+ * Bottom sheet listing bundled sticker assets (search + category filter + grid),
  * built as a plain [Dialog] (no Material `BottomSheetDialog`, which isn't a dependency here) that
  * slides up from the bottom and covers ~85% of the screen height.
  */
 class OnlineStickerSheet(
   context: Context,
+  private val runtimeStickers: List<RuntimeSticker> = emptyList(),
   private val onStickerPicked: (localFilePath: String) -> Unit
 ) : Dialog(context, android.R.style.Theme_Black_NoTitleBar) {
 
   private val mainHandler = Handler(Looper.getMainLooper())
+  private val ioExecutor = Executors.newFixedThreadPool(3)
   private var searchDebounce: Runnable? = null
 
-  private var allEntries: List<OpenMojiEntry> = emptyList()
+  private val localAssets: List<String> by lazy {
+    context.assets.list("Stickers")?.filter { it.endsWith(".png", ignoreCase = true) }?.sorted() ?: emptyList()
+  }
   private var selectedGroup: String? = null // null == "All"
   private var searchQuery: String = ""
-  private var loadError: Exception? = null
-  private var loading = true
 
   private lateinit var searchInput: EditText
   private lateinit var chipRow: LinearLayout
   private lateinit var recycler: RecyclerView
-  private lateinit var progress: ProgressBar
-  private lateinit var statusText: TextView
-  private lateinit var retryButton: View
   private lateinit var adapter: StickerAdapter
 
   override fun onCreate(savedInstanceState: Bundle?) {
     super.onCreate(savedInstanceState)
     setContentView(buildRootView())
     configureWindow()
-    loadCatalog()
+  }
+
+  override fun dismiss() {
+    ioExecutor.shutdownNow()
+    super.dismiss()
   }
 
   private fun configureWindow() {
@@ -76,7 +86,7 @@ class OnlineStickerSheet(
 
   private fun buildRootView(): View {
     val screenHeight = context.resources.displayMetrics.heightPixels
-    val sheetHeight = (screenHeight * 0.85f).toInt()
+    val sheetHeight = (screenHeight * 0.78f).toInt()
 
     val dimBackground = FrameLayout(context).apply {
       setBackgroundColor(Color.argb(140, 0, 0, 0))
@@ -90,17 +100,47 @@ class OnlineStickerSheet(
       setPadding(dp(DesignTokens.spaceLg), dp(DesignTokens.spaceMd), dp(DesignTokens.spaceLg), dp(DesignTokens.spaceLg))
     }
 
-    // Decorative drag handle.
-    sheet.addView(
-      View(context).apply { setBackgroundColor(DesignTokens.outlineVariant) },
-      LinearLayout.LayoutParams(dp(36), dp(4)).apply {
-        gravity = Gravity.CENTER_HORIZONTAL
-        bottomMargin = dp(DesignTokens.spaceMd)
+    // Functional drag handle with a generous touch target. The sheet follows
+    // the finger, dismisses past the threshold, or springs back into place.
+    var dragStartY = 0f
+    var sheetStartTranslation = 0f
+    val dragHandle = FrameLayout(context).apply {
+      isClickable = true
+      contentDescription = "Drag down to close stickers"
+      addView(
+        View(context).apply { setBackgroundColor(DesignTokens.outlineVariant) },
+        FrameLayout.LayoutParams(dp(40), dp(4), Gravity.CENTER)
+      )
+      setOnTouchListener { _, event ->
+        when (event.actionMasked) {
+          MotionEvent.ACTION_DOWN -> {
+            dragStartY = event.rawY
+            sheetStartTranslation = sheet.translationY
+            true
+          }
+          MotionEvent.ACTION_MOVE -> {
+            sheet.translationY = (sheetStartTranslation + event.rawY - dragStartY).coerceAtLeast(0f)
+            true
+          }
+          MotionEvent.ACTION_UP, MotionEvent.ACTION_CANCEL -> {
+            val shouldDismiss = sheet.translationY >= minOf(sheet.height * 0.18f, dp(140).toFloat())
+            if (shouldDismiss) {
+              sheet.animate().translationY(sheet.height.toFloat()).setDuration(180).withEndAction { dismiss() }.start()
+            } else {
+              sheet.animate().translationY(0f).setDuration(180).start()
+            }
+            true
+          }
+          else -> false
+        }
       }
-    )
+    }
+    sheet.addView(dragHandle, LinearLayout.LayoutParams(MATCH, dp(28)).apply {
+      bottomMargin = dp(DesignTokens.spaceSm)
+    })
 
     sheet.addView(TextView(context).apply {
-      text = "Browse stickers"
+      text = "Stickers"
       setTextColor(DesignTokens.textPrimary)
       textSize = 16f
       setTypeface(typeface, android.graphics.Typeface.BOLD)
@@ -140,43 +180,19 @@ class OnlineStickerSheet(
     val gridContainer = FrameLayout(context)
 
     recycler = RecyclerView(context).apply {
-      layoutManager = GridLayoutManager(context, 4)
+      layoutManager = GridLayoutManager(context, 5)
+      setHasFixedSize(true)
     }
     adapter = StickerAdapter()
     recycler.adapter = adapter
     gridContainer.addView(recycler, FrameLayout.LayoutParams(MATCH, MATCH))
 
-    progress = ProgressBar(context)
-    gridContainer.addView(progress, FrameLayout.LayoutParams(WRAP, WRAP, Gravity.CENTER))
-
-    val statusContainer = LinearLayout(context).apply {
-      orientation = LinearLayout.VERTICAL
-      gravity = Gravity.CENTER
-    }
-    statusText = TextView(context).apply {
-      setTextColor(DesignTokens.textSecondary)
-      textSize = 13f
-      gravity = Gravity.CENTER
-    }
-    statusContainer.addView(statusText, LinearLayout.LayoutParams(WRAP, WRAP))
-    retryButton = editorPrimaryButton(context, "Retry") { loadCatalog() }
-    statusContainer.addView(retryButton, LinearLayout.LayoutParams(WRAP, dp(DesignTokens.touchTargetMin)).apply {
-      topMargin = dp(DesignTokens.spaceMd)
-    })
-    gridContainer.addView(statusContainer, FrameLayout.LayoutParams(WRAP, WRAP, Gravity.CENTER))
-
     sheet.addView(gridContainer, LinearLayout.LayoutParams(MATCH, 0, 1f).apply {
       topMargin = dp(DesignTokens.spaceMd)
     })
 
-    sheet.addView(TextView(context).apply {
-      text = "Stickers by OpenMoji (CC BY-SA 4.0)"
-      setTextColor(DesignTokens.textSubtle)
-      textSize = 10f
-      gravity = Gravity.CENTER
-    }, LinearLayout.LayoutParams(MATCH, WRAP).apply { topMargin = dp(DesignTokens.spaceSm) })
-
-    updateStatusViews()
+    rebuildChips()
+    refreshList()
 
     val root = FrameLayout(context)
     root.addView(dimBackground, FrameLayout.LayoutParams(MATCH, MATCH))
@@ -194,27 +210,10 @@ class OnlineStickerSheet(
       )
     }
 
-  private fun loadCatalog() {
-    loading = true
-    loadError = null
-    updateStatusViews()
-    OpenMojiCatalog.load(context) { entries, error ->
-      loading = false
-      if (entries != null) {
-        allEntries = entries
-        loadError = null
-        rebuildChips()
-        refreshList()
-      } else {
-        loadError = error
-      }
-      updateStatusViews()
-    }
-  }
-
   private fun rebuildChips() {
     chipRow.removeAllViews()
-    val groups = listOf<String?>(null) + OpenMojiCatalog.groups()
+    val localGroups = localAssets.map { "local:" + it.substringBefore('_').lowercase() }.distinct()
+    val groups = listOf<String?>(null) + (if (runtimeStickers.isNotEmpty()) listOf("runtime") else emptyList()) + localGroups
     groups.forEach { group ->
       val label = group?.let { humanizeGroup(it) } ?: "All"
       val chip = editorChip(context, label, selected = group == selectedGroup) {
@@ -227,32 +226,20 @@ class OnlineStickerSheet(
   }
 
   private fun humanizeGroup(group: String): String =
-    group.split("-").joinToString(" ") { it.replaceFirstChar(Char::uppercase) }
+    if (group == "runtime") "My stickers" else group.removePrefix("local:").split("-").joinToString(" ") { it.replaceFirstChar(Char::uppercase) }
 
   private fun refreshList() {
     val query = searchQuery.trim()
-    val list = if (query.isNotEmpty()) {
-      OpenMojiCatalog.search(query)
-    } else {
-      val group = selectedGroup
-      if (group == null) allEntries else OpenMojiCatalog.byGroup(group)
-    }
-    adapter.submit(list)
-    updateStatusViews()
-  }
-
-  private fun updateStatusViews() {
-    progress.visibility = if (loading) View.VISIBLE else View.GONE
-    val error = loadError
-    val empty = !loading && error == null && adapter.itemCount == 0
-    recycler.visibility = if (!loading && error == null && !empty) View.VISIBLE else View.GONE
-    statusText.visibility = if (!loading && (error != null || empty)) View.VISIBLE else View.GONE
-    retryButton.visibility = if (!loading && error != null) View.VISIBLE else View.GONE
-    statusText.text = when {
-      error != null -> "Couldn't load stickers — check your connection."
-      empty -> "No stickers found."
-      else -> ""
-    }
+    val group = selectedGroup
+    val local = localAssets.filter { asset ->
+      val matchesQuery = query.isEmpty() || asset.contains(query, ignoreCase = true)
+      val matchesGroup = group == null || (group.startsWith("local:") && asset.startsWith(group.removePrefix("local:"), ignoreCase = true))
+      matchesQuery && matchesGroup
+    }.map { StickerItem(assetName = it) }
+    val runtime = runtimeStickers.filter {
+      (group == null || group == "runtime") && (query.isEmpty() || it.id.contains(query, ignoreCase = true))
+    }.map { StickerItem(runtime = it) }
+    adapter.submit(runtime + local)
   }
 
   private inner class StickerViewHolder(itemView: FrameLayout) : RecyclerView.ViewHolder(itemView) {
@@ -260,9 +247,9 @@ class OnlineStickerSheet(
   }
 
   private inner class StickerAdapter : RecyclerView.Adapter<StickerViewHolder>() {
-    private var items: List<OpenMojiEntry> = emptyList()
+    private var items: List<StickerItem> = emptyList()
 
-    fun submit(newItems: List<OpenMojiEntry>) {
+    fun submit(newItems: List<StickerItem>) {
       items = newItems
       notifyDataSetChanged()
     }
@@ -270,12 +257,13 @@ class OnlineStickerSheet(
     override fun getItemCount(): Int = items.size
 
     override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): StickerViewHolder {
-      val cardSize = dp(72)
+      val availableWidth = context.resources.displayMetrics.widthPixels - dp(DesignTokens.spaceLg * 2) - dp(8 * 5)
+      val cardSize = (availableWidth / 5).coerceAtLeast(dp(52))
       val image = ImageView(context).apply {
         scaleType = ImageView.ScaleType.CENTER_INSIDE
       }
       val cell = FrameLayout(context).apply {
-        background = roundedDrawable(DesignTokens.surfaceContainer, DesignTokens.radiusMd, context)
+        background = roundedDrawable(DesignTokens.surfaceContainerLow, DesignTokens.radiusMd, context)
         addView(image, FrameLayout.LayoutParams(cardSize - dp(16), cardSize - dp(16), Gravity.CENTER))
       }
       cell.layoutParams = RecyclerView.LayoutParams(cardSize, cardSize).apply {
@@ -285,24 +273,67 @@ class OnlineStickerSheet(
     }
 
     override fun onBindViewHolder(holder: StickerViewHolder, position: Int) {
-      val entry = items[position]
-      RemoteImageLoader.loadThumbnail(context, OpenMojiCatalog.thumbnailUrl(entry.hexcode), holder.imageView)
-      holder.itemView.setOnClickListener { onStickerTapped(entry) }
+      val item = items[position]
+      holder.imageView.setImageDrawable(null)
+      item.assetName?.let { asset ->
+        holder.imageView.setImageBitmap(context.assets.open("Stickers/$asset").use { BitmapFactory.decodeStream(it) })
+        holder.itemView.setOnClickListener { onLocalStickerTapped(asset) }
+      }
+      item.runtime?.let { runtime ->
+        loadRuntimeThumbnail(runtime, holder.imageView)
+        holder.itemView.setOnClickListener { onRuntimeStickerTapped(runtime) }
+      }
     }
   }
 
-  private fun onStickerTapped(entry: OpenMojiEntry) {
-    Toast.makeText(context, "Downloading sticker…", Toast.LENGTH_SHORT).show()
-    RemoteImageLoader.downloadFull(context, OpenMojiCatalog.fullUrl(entry.hexcode)) { path, error ->
-      if (path != null) {
-        onStickerPicked(path)
-        dismiss()
-      } else {
-        Toast.makeText(context, "Couldn't download that sticker, try another.", Toast.LENGTH_SHORT).show()
+  private data class StickerItem(val assetName: String? = null, val runtime: RuntimeSticker? = null)
+
+  private fun loadRuntimeThumbnail(sticker: RuntimeSticker, imageView: ImageView) {
+    imageView.tag = sticker.uri
+    ioExecutor.execute {
+      val bitmap = try {
+        if (sticker.uri.startsWith("https://")) downloadRuntimeSticker(sticker.uri).inputStream().use(BitmapFactory::decodeStream)
+        else SourceResolver.resolvePath(context, sticker.uri, "pve_runtime_sticker")?.let(BitmapFactory::decodeFile)
+      } catch (_: Exception) { null }
+      mainHandler.post { if (imageView.tag == sticker.uri) imageView.setImageBitmap(bitmap) }
+    }
+  }
+
+  private fun onRuntimeStickerTapped(sticker: RuntimeSticker) {
+    ioExecutor.execute {
+      val path = try {
+        if (sticker.uri.startsWith("https://")) {
+          val output = File.createTempFile("pve_runtime_sticker_", ".img", context.cacheDir)
+          output.writeBytes(downloadRuntimeSticker(sticker.uri))
+          output.absolutePath
+        } else SourceResolver.resolvePath(context, sticker.uri, "pve_runtime_sticker")
+      } catch (_: Exception) { null }
+      mainHandler.post {
+        if (path != null) { onStickerPicked(path); dismiss() }
+        else Toast.makeText(context, "Couldn't open that sticker.", Toast.LENGTH_SHORT).show()
       }
     }
   }
 
+  private fun downloadRuntimeSticker(uri: String): ByteArray {
+    val connection = URL(uri).openConnection().apply {
+      connectTimeout = 10_000
+      readTimeout = 15_000
+    }
+    return connection.getInputStream().use { it.readBytes() }
+  }
+
+  private fun onLocalStickerTapped(assetName: String) {
+    try {
+      val output = File(context.cacheDir, "sticker-${assetName.lowercase()}")
+      context.assets.open("Stickers/$assetName").use { input -> FileOutputStream(output).use(input::copyTo) }
+      onStickerPicked(output.absolutePath)
+      dismiss()
+    } catch (_: Exception) {
+      Toast.makeText(context, "Couldn't open that sticker.", Toast.LENGTH_SHORT).show()
+    }
+  }
+
   companion object {
     private const val MATCH = ViewGroup.LayoutParams.MATCH_PARENT
     private const val WRAP = ViewGroup.LayoutParams.WRAP_CONTENT

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/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`.