react-native-photo-video-editor 0.1.0

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

@@ -0,0 +1,202 @@
+package com.photovideoeditor.photo.ui
+
+import android.content.Context
+import android.graphics.Canvas
+import android.graphics.Color
+import android.graphics.DashPathEffect
+import android.graphics.Paint
+import android.graphics.RectF
+import android.view.MotionEvent
+import android.view.View
+import android.text.TextPaint
+import com.photovideoeditor.photo.render.PhotoLayer
+import com.photovideoeditor.photo.render.LayerType
+import kotlin.math.atan2
+import kotlin.math.cos
+import kotlin.math.hypot
+import kotlin.math.min
+import kotlin.math.sin
+
+/** Reusable native move/scale/rotate surface shared by every overlay type. */
+class LayerOverlayView(context: Context) : View(context) {
+  private enum class Gesture { NONE, DRAG, HANDLE, MULTI }
+  private var imageBounds = RectF()
+  var minScale = 0.2f
+  var maxScale = 8f
+  var layers: List<PhotoLayer> = emptyList()
+    set(value) { field = value; invalidate() }
+  var selectedLayerId: String? = null
+    set(value) { field = value; invalidate() }
+  var onLayerTapped: ((String?) -> Unit)? = null
+  var onLayerTransformChanged: ((id: String, x: Float, y: Float, scale: Float, rotationDegrees: Float) -> Unit)? = null
+  var onLayerTransformEnded: ((id: String) -> Unit)? = null
+
+  private var gesture = Gesture.NONE
+  private var gestureId: String? = null
+  private var startLayer: PhotoLayer? = null
+  private var startPointX = 0f
+  private var startPointY = 0f
+  private var startDistance = 1f
+  private var startAngle = 0f
+  private var startMidX = 0f
+  private var startMidY = 0f
+  private val density = resources.displayMetrics.density
+  private val handleRadius = 11f * density
+  private val handleTouchRadius = 30f * density
+  private val selectionPaint = Paint(Paint.ANTI_ALIAS_FLAG).apply {
+    color = Color.WHITE; style = Paint.Style.STROKE; strokeWidth = 2f * density
+    pathEffect = DashPathEffect(floatArrayOf(8f * density, 5f * density), 0f)
+  }
+  private val handlePaint = Paint(Paint.ANTI_ALIAS_FLAG).apply { color = Color.WHITE }
+  private val handleGlyphPaint = Paint(Paint.ANTI_ALIAS_FLAG).apply {
+    color = Color.rgb(87, 55, 245); style = Paint.Style.STROKE; strokeWidth = 2f * density
+  }
+
+  fun setImageBounds(bounds: RectF) { imageBounds = RectF(bounds); invalidate() }
+
+  override fun onDraw(canvas: Canvas) {
+    super.onDraw(canvas)
+    val selected = selectedLayer() ?: return
+    val center = centerOf(selected)
+    val half = selectionHalfExtents(selected)
+    canvas.save()
+    canvas.translate(center.first, center.second)
+    canvas.rotate(selected.rotationDegrees)
+    canvas.drawRect(-half.first, -half.second, half.first, half.second, selectionPaint)
+    canvas.drawCircle(half.first, half.second, handleRadius, handlePaint)
+    val glyph = handleRadius * 0.52f
+    canvas.drawLine(half.first - glyph, half.second + glyph, half.first + glyph, half.second - glyph, handleGlyphPaint)
+    canvas.restore()
+  }
+
+  override fun onTouchEvent(event: MotionEvent): Boolean {
+    if (imageBounds.width() <= 0 || imageBounds.height() <= 0) return false
+    when (event.actionMasked) {
+      MotionEvent.ACTION_DOWN -> {
+        val selected = selectedLayer()
+        val handleHit = selected?.takeIf { !it.locked && isHandleHit(it, event.x, event.y) }
+        val hit = handleHit ?: hitTest(event.x, event.y)
+        onLayerTapped?.invoke(hit?.id)
+        if (hit == null || hit.locked) { resetGesture(); return false }
+        gestureId = hit.id
+        startLayer = hit.copy()
+        startPointX = event.x; startPointY = event.y
+        if (handleHit != null) {
+          gesture = Gesture.HANDLE
+          val center = centerOf(hit)
+          startDistance = hypot(event.x - center.first, event.y - center.second).coerceAtLeast(1f)
+          startAngle = angle(center.first, center.second, event.x, event.y)
+        } else gesture = Gesture.DRAG
+        parent?.requestDisallowInterceptTouchEvent(true)
+        return true
+      }
+      MotionEvent.ACTION_POINTER_DOWN -> {
+        val layer = currentGestureLayer() ?: return false
+        if (event.pointerCount >= 2) {
+          startLayer = layer.copy()
+          val metrics = multiMetrics(event)
+          startDistance = metrics.distance.coerceAtLeast(1f); startAngle = metrics.angle
+          startMidX = metrics.midX; startMidY = metrics.midY
+          gesture = Gesture.MULTI
+          return true
+        }
+      }
+      MotionEvent.ACTION_MOVE -> {
+        val initial = startLayer ?: return false
+        when (gesture) {
+          Gesture.DRAG -> {
+            val x = (initial.x + (event.x - startPointX) / imageBounds.width()).coerceIn(0f, 1f)
+            val y = (initial.y + (event.y - startPointY) / imageBounds.height()).coerceIn(0f, 1f)
+            emit(initial, x, y, initial.scale, initial.rotationDegrees)
+          }
+          Gesture.HANDLE -> {
+            val center = centerOf(initial)
+            val scale = (initial.scale * hypot(event.x - center.first, event.y - center.second) / startDistance).coerceIn(minScale, maxScale)
+            val rotation = normalizeDegrees(initial.rotationDegrees + angleDelta(startAngle, angle(center.first, center.second, event.x, event.y)))
+            emit(initial, initial.x, initial.y, scale, rotation)
+          }
+          Gesture.MULTI -> if (event.pointerCount >= 2) {
+            val metrics = multiMetrics(event)
+            val scale = (initial.scale * metrics.distance / startDistance).coerceIn(minScale, maxScale)
+            val rotation = normalizeDegrees(initial.rotationDegrees + angleDelta(startAngle, metrics.angle))
+            val x = (initial.x + (metrics.midX - startMidX) / imageBounds.width()).coerceIn(0f, 1f)
+            val y = (initial.y + (metrics.midY - startMidY) / imageBounds.height()).coerceIn(0f, 1f)
+            emit(initial, x, y, scale, rotation)
+          }
+          Gesture.NONE -> return false
+        }
+        return true
+      }
+      MotionEvent.ACTION_UP, MotionEvent.ACTION_CANCEL -> { finishGesture(); return true }
+      MotionEvent.ACTION_POINTER_UP -> return true
+    }
+    return false
+  }
+
+  private fun emit(layer: PhotoLayer, x: Float, y: Float, scale: Float, rotation: Float) =
+    onLayerTransformChanged?.invoke(layer.id, x, y, scale, rotation)
+
+  private fun finishGesture() {
+    gestureId?.let { onLayerTransformEnded?.invoke(it) }
+    resetGesture()
+    parent?.requestDisallowInterceptTouchEvent(false)
+  }
+
+  private fun resetGesture() { gesture = Gesture.NONE; gestureId = null; startLayer = null }
+  private fun selectedLayer() = layers.firstOrNull { it.id == selectedLayerId && it.visible }
+  private fun currentGestureLayer() = layers.firstOrNull { it.id == gestureId && it.visible && !it.locked }
+  private fun centerOf(layer: PhotoLayer) = Pair(imageBounds.left + layer.x * imageBounds.width(), imageBounds.top + layer.y * imageBounds.height())
+  private fun selectionHalfExtents(layer: PhotoLayer): Pair<Float, Float> {
+    val shortSide = min(imageBounds.width(), imageBounds.height())
+    val base = when (layer.type) {
+      LayerType.TEXT -> {
+        val paint = TextPaint(Paint.ANTI_ALIAS_FLAG).apply {
+          textSize = layer.fontSize / 48f * shortSide * 0.06f
+          layer.fontFamily?.let { typeface = android.graphics.Typeface.create(it, android.graphics.Typeface.NORMAL) }
+        }
+        val lines = layer.text.ifBlank { " " }.split("\n")
+        Pair((lines.maxOfOrNull { paint.measureText(it) } ?: paint.textSize) / 2f + 8f * density, paint.fontSpacing * lines.size / 2f + 6f * density)
+      }
+      LayerType.STICKER -> {
+        val size = shortSide * 0.18f
+        Pair(size / 2f, size / 2f)
+      }
+      LayerType.OVERLAY -> {
+        val aspect = layer.overlayAspectRatio ?: 1f
+        val baseSize = shortSide * 0.6f
+        if (aspect >= 1f) Pair(baseSize / 2f, (baseSize / aspect) / 2f) else Pair((baseSize * aspect) / 2f, baseSize / 2f)
+      }
+    }
+    return Pair((base.first * layer.scale).coerceAtLeast(handleRadius), (base.second * layer.scale).coerceAtLeast(handleRadius))
+  }
+
+  private fun handlePoint(layer: PhotoLayer): Pair<Float, Float> {
+    val center = centerOf(layer); val half = selectionHalfExtents(layer)
+    val radians = Math.toRadians(layer.rotationDegrees.toDouble())
+    return Pair(center.first + (half.first * cos(radians) - half.second * sin(radians)).toFloat(), center.second + (half.first * sin(radians) + half.second * cos(radians)).toFloat())
+  }
+
+  private fun isHandleHit(layer: PhotoLayer, x: Float, y: Float): Boolean {
+    val handle = handlePoint(layer)
+    return hypot(x - handle.first, y - handle.second) <= handleTouchRadius
+  }
+
+  private fun hitTest(x: Float, y: Float): PhotoLayer? = layers.asReversed().firstOrNull { layer ->
+    if (!layer.visible) return@firstOrNull false
+    val center = centerOf(layer); val radians = Math.toRadians((-layer.rotationDegrees).toDouble())
+    val dx = x - center.first; val dy = y - center.second
+    val localX = dx * cos(radians).toFloat() - dy * sin(radians).toFloat()
+    val localY = dx * sin(radians).toFloat() + dy * cos(radians).toFloat()
+    val half = selectionHalfExtents(layer)
+    localX in -half.first..half.first && localY in -half.second..half.second
+  }
+
+  private data class MultiMetrics(val midX: Float, val midY: Float, val distance: Float, val angle: Float)
+  private fun multiMetrics(event: MotionEvent): MultiMetrics {
+    val x0 = event.getX(0); val y0 = event.getY(0); val x1 = event.getX(1); val y1 = event.getY(1)
+    return MultiMetrics((x0 + x1) / 2f, (y0 + y1) / 2f, hypot(x1 - x0, y1 - y0), angle(x0, y0, x1, y1))
+  }
+  private fun angle(x0: Float, y0: Float, x1: Float, y1: Float) = Math.toDegrees(atan2(y1 - y0, x1 - x0).toDouble()).toFloat()
+  private fun angleDelta(from: Float, to: Float): Float = ((to - from + 540f) % 360f) - 180f
+  private fun normalizeDegrees(value: Float): Float = ((value % 360f) + 360f) % 360f
+}

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

@@ -0,0 +1,57 @@
+package com.photovideoeditor.photo.ui
+
+import android.graphics.Bitmap
+import android.os.Handler
+import android.os.Looper
+import java.util.concurrent.Executors
+import java.util.concurrent.atomic.AtomicBoolean
+
+/**
+ * Runs the expensive photo pipeline away from the main thread and collapses a
+ * burst of slider/drag updates into the newest requested frame.
+ */
+class PhotoPreviewRenderCoordinator(
+  private val render: () -> Bitmap?,
+  private val display: (Bitmap?) -> Unit,
+) {
+  private val executor = Executors.newSingleThreadExecutor { task ->
+    Thread(task, "photo-preview-renderer").apply { priority = Thread.NORM_PRIORITY - 1 }
+  }
+  private val mainHandler = Handler(Looper.getMainLooper())
+  private val rendering = AtomicBoolean(false)
+  private val dirty = AtomicBoolean(false)
+  private val closed = AtomicBoolean(false)
+
+  fun request() {
+    if (closed.get()) return
+    dirty.set(true)
+    startIfIdle()
+  }
+
+  private fun startIfIdle() {
+    if (!rendering.compareAndSet(false, true)) return
+    executor.execute {
+      try {
+        do {
+          dirty.set(false)
+          val bitmap = if (closed.get()) null else render()
+          if (!closed.get()) mainHandler.post {
+            if (!closed.get()) display(bitmap)
+          }
+        } while (dirty.get() && !closed.get())
+      } finally {
+        rendering.set(false)
+        if (dirty.get() && !closed.get()) startIfIdle()
+      }
+    }
+  }
+
+  /** Runs cleanup after any in-flight render, preventing bitmap recycle races. */
+  fun close(onRendererDrained: () -> Unit) {
+    if (!closed.compareAndSet(false, true)) return
+    dirty.set(false)
+    mainHandler.removeCallbacksAndMessages(null)
+    executor.execute(onRendererDrained)
+    executor.shutdown()
+  }
+}

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

@@ -0,0 +1,96 @@
+package com.photovideoeditor.photo.ui
+
+import android.content.Context
+import android.graphics.Matrix
+import android.graphics.RectF
+import android.view.MotionEvent
+import android.view.ScaleGestureDetector
+import android.widget.ImageView
+
+/**
+ * ImageView supporting pinch-to-zoom and single-finger pan for the photo
+ * preview, reporting the current on-screen image rect via [onBoundsChanged]
+ * so the crop overlay can stay aligned to it.
+ */
+class ZoomableImageView(context: Context) : ImageView(context) {
+  private val matrixValues = FloatArray(9)
+  private var minScale = 1f
+  private var maxScale = 4f
+  private var lastX = 0f
+  private var lastY = 0f
+  private var panning = false
+  var onBoundsChanged: ((RectF) -> Unit)? = null
+  var panZoomEnabled = true
+
+  private val scaleDetector = ScaleGestureDetector(
+    context,
+    object : ScaleGestureDetector.SimpleOnScaleGestureListener() {
+      override fun onScale(detector: ScaleGestureDetector): Boolean {
+        val targetScale = (currentScale() * detector.scaleFactor).coerceIn(minScale, maxScale)
+        val appliedFactor = targetScale / currentScale()
+        imageMatrix = Matrix(imageMatrix).apply { postScale(appliedFactor, appliedFactor, detector.focusX, detector.focusY) }
+        onBoundsChanged?.invoke(currentImageBounds())
+        return true
+      }
+    }
+  )
+
+  init {
+    scaleType = ScaleType.MATRIX
+  }
+
+  /** Fits the current drawable to the view bounds and resets zoom/pan. */
+  fun resetToFit() {
+    val bitmapDrawable = drawable ?: return
+    val viewWidth = width.toFloat()
+    val viewHeight = height.toFloat()
+    val drawableWidth = bitmapDrawable.intrinsicWidth.toFloat()
+    val drawableHeight = bitmapDrawable.intrinsicHeight.toFloat()
+    if (viewWidth <= 0 || viewHeight <= 0 || drawableWidth <= 0 || drawableHeight <= 0) return
+    val scale = minOf(viewWidth / drawableWidth, viewHeight / drawableHeight)
+    val dx = (viewWidth - drawableWidth * scale) / 2f
+    val dy = (viewHeight - drawableHeight * scale) / 2f
+    imageMatrix = Matrix().apply {
+      postScale(scale, scale)
+      postTranslate(dx, dy)
+    }
+    minScale = scale
+    maxScale = scale * 4f
+    onBoundsChanged?.invoke(currentImageBounds())
+  }
+
+  fun currentImageBounds(): RectF {
+    val bitmapDrawable = drawable ?: return RectF(0f, 0f, width.toFloat(), height.toFloat())
+    val rect = RectF(0f, 0f, bitmapDrawable.intrinsicWidth.toFloat(), bitmapDrawable.intrinsicHeight.toFloat())
+    imageMatrix.mapRect(rect)
+    return rect
+  }
+
+  private fun currentScale(): Float {
+    imageMatrix.getValues(matrixValues)
+    return matrixValues[Matrix.MSCALE_X]
+  }
+
+  override fun onTouchEvent(event: MotionEvent): Boolean {
+    if (!panZoomEnabled) return false
+    scaleDetector.onTouchEvent(event)
+    when (event.actionMasked) {
+      MotionEvent.ACTION_DOWN -> {
+        lastX = event.x
+        lastY = event.y
+        panning = true
+      }
+      MotionEvent.ACTION_POINTER_DOWN -> panning = false
+      MotionEvent.ACTION_MOVE -> if (panning && event.pointerCount == 1 && !scaleDetector.isInProgress) {
+        val dx = event.x - lastX
+        val dy = event.y - lastY
+        lastX = event.x
+        lastY = event.y
+        imageMatrix = Matrix(imageMatrix).apply { postTranslate(dx, dy) }
+        onBoundsChanged?.invoke(currentImageBounds())
+      }
+      MotionEvent.ACTION_UP, MotionEvent.ACTION_POINTER_UP -> panning = event.pointerCount <= 1
+    }
+    return true
+  }
+}

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

@@ -0,0 +1,310 @@
+package com.photovideoeditor.stickers
+
+import android.app.Dialog
+import android.content.Context
+import android.graphics.Color
+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.View
+import android.view.ViewGroup
+import android.view.Window
+import android.view.WindowManager
+import android.widget.EditText
+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
+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
+
+/**
+ * Bottom sheet listing OpenMoji's free sticker catalog (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 onStickerPicked: (localFilePath: String) -> Unit
+) : Dialog(context, android.R.style.Theme_Black_NoTitleBar) {
+
+  private val mainHandler = Handler(Looper.getMainLooper())
+  private var searchDebounce: Runnable? = null
+
+  private var allEntries: List<OpenMojiEntry> = 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()
+  }
+
+  private fun configureWindow() {
+    val window = this.window ?: return
+    window.setBackgroundDrawableResource(android.R.color.transparent)
+    window.setLayout(WindowManager.LayoutParams.MATCH_PARENT, WindowManager.LayoutParams.MATCH_PARENT)
+    window.setGravity(Gravity.BOTTOM)
+    window.setWindowAnimations(android.R.style.Animation_InputMethod)
+    setCanceledOnTouchOutside(true)
+  }
+
+  private fun dp(value: Int) = dpToPx(value, context)
+
+  private fun buildRootView(): View {
+    val screenHeight = context.resources.displayMetrics.heightPixels
+    val sheetHeight = (screenHeight * 0.85f).toInt()
+
+    val dimBackground = FrameLayout(context).apply {
+      setBackgroundColor(Color.argb(140, 0, 0, 0))
+      setOnClickListener { dismiss() }
+    }
+
+    val sheet = LinearLayout(context).apply {
+      orientation = LinearLayout.VERTICAL
+      background = roundedTopDrawable()
+      isClickable = true
+      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)
+      }
+    )
+
+    sheet.addView(TextView(context).apply {
+      text = "Browse stickers"
+      setTextColor(DesignTokens.textPrimary)
+      textSize = 16f
+      setTypeface(typeface, android.graphics.Typeface.BOLD)
+    })
+
+    searchInput = EditText(context).apply {
+      hint = "Search stickers"
+      setHintTextColor(DesignTokens.outline)
+      setTextColor(DesignTokens.onSurface)
+      background = roundedDrawable(DesignTokens.surfaceContainerHigh, DesignTokens.radiusLg, context)
+      setPadding(dp(DesignTokens.spaceMd), dp(DesignTokens.spaceSm), dp(DesignTokens.spaceMd), dp(DesignTokens.spaceSm))
+      setSingleLine(true)
+      addTextChangedListener(object : TextWatcher {
+        override fun beforeTextChanged(s: CharSequence?, start: Int, count: Int, after: Int) {}
+        override fun onTextChanged(s: CharSequence?, start: Int, before: Int, count: Int) {}
+        override fun afterTextChanged(s: Editable?) {
+          searchDebounce?.let { mainHandler.removeCallbacks(it) }
+          val runnable = Runnable {
+            searchQuery = s?.toString().orEmpty()
+            refreshList()
+          }
+          searchDebounce = runnable
+          mainHandler.postDelayed(runnable, 300)
+        }
+      })
+    }
+    sheet.addView(searchInput, LinearLayout.LayoutParams(MATCH, WRAP).apply {
+      topMargin = dp(DesignTokens.spaceMd)
+    })
+
+    chipRow = LinearLayout(context).apply { orientation = LinearLayout.HORIZONTAL }
+    sheet.addView(HorizontalScrollView(context).apply {
+      isHorizontalScrollBarEnabled = false
+      addView(chipRow)
+    }, LinearLayout.LayoutParams(MATCH, WRAP).apply { topMargin = dp(DesignTokens.spaceMd) })
+
+    val gridContainer = FrameLayout(context)
+
+    recycler = RecyclerView(context).apply {
+      layoutManager = GridLayoutManager(context, 4)
+    }
+    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()
+
+    val root = FrameLayout(context)
+    root.addView(dimBackground, FrameLayout.LayoutParams(MATCH, MATCH))
+    root.addView(sheet, FrameLayout.LayoutParams(MATCH, sheetHeight, Gravity.BOTTOM))
+    return root
+  }
+
+  private fun roundedTopDrawable(): android.graphics.drawable.GradientDrawable =
+    android.graphics.drawable.GradientDrawable().apply {
+      setColor(DesignTokens.elevatedPanel)
+      cornerRadii = floatArrayOf(
+        dp(DesignTokens.radiusSheet).toFloat(), dp(DesignTokens.radiusSheet).toFloat(),
+        dp(DesignTokens.radiusSheet).toFloat(), dp(DesignTokens.radiusSheet).toFloat(),
+        0f, 0f, 0f, 0f
+      )
+    }
+
+  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()
+    groups.forEach { group ->
+      val label = group?.let { humanizeGroup(it) } ?: "All"
+      val chip = editorChip(context, label, selected = group == selectedGroup) {
+        selectedGroup = group
+        rebuildChips()
+        refreshList()
+      }
+      chipRow.addView(chip, LinearLayout.LayoutParams(WRAP, WRAP).apply { marginEnd = dp(DesignTokens.spaceSm) })
+    }
+  }
+
+  private fun humanizeGroup(group: String): String =
+    group.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 -> ""
+    }
+  }
+
+  private inner class StickerViewHolder(itemView: FrameLayout) : RecyclerView.ViewHolder(itemView) {
+    val imageView: ImageView = itemView.getChildAt(0) as ImageView
+  }
+
+  private inner class StickerAdapter : RecyclerView.Adapter<StickerViewHolder>() {
+    private var items: List<OpenMojiEntry> = emptyList()
+
+    fun submit(newItems: List<OpenMojiEntry>) {
+      items = newItems
+      notifyDataSetChanged()
+    }
+
+    override fun getItemCount(): Int = items.size
+
+    override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): StickerViewHolder {
+      val cardSize = dp(72)
+      val image = ImageView(context).apply {
+        scaleType = ImageView.ScaleType.CENTER_INSIDE
+      }
+      val cell = FrameLayout(context).apply {
+        background = roundedDrawable(DesignTokens.surfaceContainer, DesignTokens.radiusMd, context)
+        addView(image, FrameLayout.LayoutParams(cardSize - dp(16), cardSize - dp(16), Gravity.CENTER))
+      }
+      cell.layoutParams = RecyclerView.LayoutParams(cardSize, cardSize).apply {
+        setMargins(dp(4), dp(4), dp(4), dp(4))
+      }
+      return StickerViewHolder(cell)
+    }
+
+    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) }
+    }
+  }
+
+  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()
+      }
+    }
+  }
+
+  companion object {
+    private const val MATCH = ViewGroup.LayoutParams.MATCH_PARENT
+    private const val WRAP = ViewGroup.LayoutParams.WRAP_CONTENT
+  }
+}