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

package/android/src/main/java/com/photovideoeditor/editor/PhotoVideoEditorActivity.kt

@@ -7,6 +7,7 @@ import android.content.Intent
 import android.graphics.Bitmap
 import android.graphics.BitmapFactory
 import android.graphics.Color
+import android.graphics.Typeface
 import android.net.Uri
 import android.os.Bundle
 import android.text.InputType
@@ -33,6 +34,7 @@ import androidx.media3.ui.PlayerView
 import com.photovideoeditor.files.SourceResolver
 import com.photovideoeditor.photo.export.PhotoExportException
 import com.photovideoeditor.photo.export.PhotoExporter
+import com.photovideoeditor.photo.render.OverlayGeometry
 import com.photovideoeditor.photo.render.LayerType
 import com.photovideoeditor.photo.render.PhotoAdjustments
 import com.photovideoeditor.photo.render.PhotoEditSession
@@ -55,9 +57,18 @@ import com.photovideoeditor.photo.ui.ZoomableImageView
 import com.photovideoeditor.stickers.OnlineStickerSheet
 import com.photovideoeditor.stickers.RuntimeSticker
 import com.photovideoeditor.ui.DesignTokens
+import com.photovideoeditor.ui.components.CropPanel
+import com.photovideoeditor.ui.components.EditorFilterThumbnail
+import com.photovideoeditor.ui.components.EditorPanelMetrics
+import com.photovideoeditor.ui.components.EditorStripItem
+import com.photovideoeditor.ui.components.EditorToolSlider
 import com.photovideoeditor.ui.components.applyPressScale
 import com.photovideoeditor.ui.components.editorChip
+import com.photovideoeditor.ui.components.editorFilterThumbnail
+import com.photovideoeditor.ui.components.editorPanelHeader
 import com.photovideoeditor.ui.components.editorPrimaryButton
+import com.photovideoeditor.ui.components.editorStripItem
+import com.photovideoeditor.ui.components.editorToolStrip
 import org.json.JSONObject
 import java.io.File
 import kotlin.math.roundToInt
@@ -71,6 +82,7 @@ class PhotoVideoEditorActivity : Activity() {
   private var photoSession: PhotoEditSession? = null
   private var cropMode = false
   private var cropEntryState: PhotoTransformState? = null
+  private var photoCropPanel: CropPanel? = null
   private var adjustMode = false
   private var filtersMode = false
   private var drawMode = false
@@ -78,7 +90,7 @@ class PhotoVideoEditorActivity : Activity() {
   private lateinit var stickersSubBar: View
   private var activeAdjustmentKey = "brightness"
   private var selectedLayerId: String? = null
-  private var activeLayerPropertyKey = "scale"
+  private var activeLayerPropertyKey = ""
   private var dragStartSnapshot: List<PhotoLayer>? = null
   private lateinit var photoImageView: ZoomableImageView
   private lateinit var cropOverlay: CropOverlayView
@@ -86,7 +98,10 @@ class PhotoVideoEditorActivity : Activity() {
   private lateinit var drawOverlay: DrawOverlayView
   private lateinit var straightenSeekBar: SeekBar
   private lateinit var cropSubBar: View
-  private lateinit var adjustmentSeekBar: SeekBar
+  /** Drives whichever adjustment is selected in the Adjust panel. */
+  private lateinit var adjustmentSeekBar: EditorToolSlider
+  /** Filter strength, owned by the Filters panel (a View can only have one parent, so not shared). */
+  private lateinit var filterIntensitySeekBar: EditorToolSlider
   private lateinit var filtersSubBar: View
   private lateinit var adjustSubBar: View
   private lateinit var drawSubBar: View
@@ -104,9 +119,14 @@ class PhotoVideoEditorActivity : Activity() {
   private var videoSession: VideoEditSession? = null
   private var videoExporter: VideoExporter? = null
   private var videoAspectMode = false
+  private var videoCropMode = false
+  private var videoCropEntryState: PhotoTransformState? = null
+  private var videoCropPanel: CropPanel? = null
+  private lateinit var videoCropOverlay: CropOverlayView
+  private lateinit var cropPlayerView: PlayerView
   private lateinit var trimRangeView: TrimRangeView
   private lateinit var positionSeekBar: SeekBar
-  private lateinit var playPauseButton: Button
+  private lateinit var playPauseButton: ImageButton
   private lateinit var timeLabel: TextView
   private lateinit var videoAspectSubBar: View
   private lateinit var videoToolBar: View
@@ -118,20 +138,22 @@ class PhotoVideoEditorActivity : Activity() {
   private val positionPollHandler = android.os.Handler(android.os.Looper.getMainLooper())
   private var positionPollRunnable: Runnable? = null
   private var seeking = false
+  private lateinit var videoControlsOverlay: View
+  private var videoControlsVisible = true
+  private val hideVideoControlsRunnable = Runnable { setVideoControlsVisible(false) }
 
   private val photoToolButtons = mutableMapOf<String, ToolNode>()
   private var photoToolScroll: HorizontalScrollView? = null
   private val cropAspectButtons = mutableMapOf<Float?, Button>()
-  private val filterAdjustmentButtons = mutableMapOf<String, Button>()
-  /** Preset id ("" = Original) -> (thumbnail frame, label) for the Filters preset-card scroller. */
-  private val filterPresetCards = mutableMapOf<String, Pair<FrameLayout, TextView>>()
+  /** Adjustment key (plus "mirror") -> its entry in the Adjust panel's strip. */
+  private val adjustmentStripItems = mutableMapOf<String, EditorStripItem>()
+  /** Preset id ("" = Original) -> its thumbnail in the Filters carousel. */
+  private val filterPresetCards = mutableMapOf<String, EditorFilterThumbnail>()
   private var resizeMode = false
   private lateinit var resizeSubBar: View
   private var resizePresetSize: Pair<Int, Int>? = null
   private val resizePresetButtons = mutableMapOf<Pair<Int, Int>?, Button>()
-  private val layerPropertyButtons = mutableMapOf<String, Button>()
-  /** Non-Delete/Duplicate layer action icons, hidden for TEXT layers (only Opacity/Colors/Duplicate/Delete apply there). */
-  private val layerIconButtons = mutableMapOf<String, View>()
+  private val layerPropertyButtons = mutableMapOf<String, ToolNode>()
   private val videoToolButtons = mutableMapOf<String, ToolNode>()
   private val videoAspectButtons = mutableMapOf<Float?, Button>()
   private val videoFilterButtons = mutableMapOf<String, Button>()
@@ -143,9 +165,12 @@ class PhotoVideoEditorActivity : Activity() {
   private lateinit var videoLayerToolBar: View
   private lateinit var videoLayerPropertySeekBar: SeekBar
   private var selectedVideoLayerId: String? = null
-  private var activeVideoLayerPropertyKey = "scale"
+  private var activeVideoLayerPropertyKey = ""
   private var videoDragStartSnapshot: List<PhotoLayer>? = null
-  private val videoLayerPropertyButtons = mutableMapOf<String, Button>()
+  private val videoLayerPropertyButtons = mutableMapOf<String, ToolNode>()
+  private lateinit var videoColorRow: View
+  private val textSwatches = mutableMapOf<Int, View>()
+  private val videoTextSwatches = mutableMapOf<Int, View>()
   private var selectedClipIndex = 0
   private lateinit var clipStripBar: LinearLayout
   private var timelineThumbnailRepository: TimelineThumbnailRepository? = null
@@ -234,9 +259,13 @@ class PhotoVideoEditorActivity : Activity() {
     }
     photoImageView = imageView
     photoPreviewRenderer = PhotoPreviewRenderCoordinator(
-      render = { session.renderPreview() },
+      render = { session.renderPreview(cropMode || resizeMode) },
       display = { bitmap ->
-        if (!comparingOriginal && !isFinishing && !isDestroyed) imageView.setImageBitmap(bitmap)
+        if (!comparingOriginal && !isFinishing && !isDestroyed) {
+          imageView.setImageBitmap(bitmap)
+          imageView.resetToFit()
+          if (cropMode && ::cropOverlay.isInitialized) cropOverlay.restore(imageView.currentImageBounds(), session.state)
+        }
       },
     )
     previewContainer.addView(imageView, FrameLayout.LayoutParams(MATCH, MATCH))
@@ -254,11 +283,17 @@ class PhotoVideoEditorActivity : Activity() {
     previewContainer.addView(drawing, FrameLayout.LayoutParams(MATCH, MATCH))
 
     imageView.onBoundsChanged = { bounds ->
-      if (cropMode) overlay.setImageBounds(bounds, resetCrop = false)
+      if (cropMode) overlay.restore(bounds, session.state)
       layers.setImageBounds(bounds)
       drawing.setImageBounds(bounds)
     }
     overlay.onCropChanged = { left, top, right, bottom -> session.update { it.withCrop(left, top, right, bottom) } }
+    overlay.onMediaBoundsChanged = { bounds -> imageView.setRenderedBounds(bounds) }
+    overlay.onViewportChanged = { zoom, panX, panY -> session.update { it.copy(zoom = zoom, panX = panX, panY = panY) } }
+    layers.onLayerDelete = { id ->
+      session.layerStack.commit { list -> list.filterNot { it.id == id } }
+      selectLayer(null); onLayerStackChanged()
+    }
     layers.onLayerTapped = { id -> selectLayer(id) }
     layers.onLayerDoubleTapped = { id ->
       session.layerStack.layers.firstOrNull { it.id == id && it.type == LayerType.TEXT }?.let { showTextInputDialog(session, it) }
@@ -298,10 +333,7 @@ class PhotoVideoEditorActivity : Activity() {
       })
     }
     straightenSeekBar = straighten
-    root.addView(
-      straighten,
-      LinearLayout.LayoutParams(MATCH, WRAP).apply { setMargins(dp(16), dp(4), dp(16), 0) }
-    )
+
 
     val cropBar = createCropSubBar(session, imageView, overlay)
     cropSubBar = cropBar
@@ -313,22 +345,35 @@ class PhotoVideoEditorActivity : Activity() {
     resizeBar.visibility = View.GONE
     root.addView(resizeBar, LinearLayout.LayoutParams(MATCH, dp(56)))
 
-    val adjustmentSeek = SeekBar(this).apply {
-      visibility = View.GONE
+    val accentColor = themeColor("primaryColor", DesignTokens.primaryContainer)
+    adjustmentSeekBar = EditorToolSlider(this).apply {
+      applyCompactTrack(accentColor)
       setOnSeekBarChangeListener(object : SeekBar.OnSeekBarChangeListener {
         override fun onProgressChanged(seekBar: SeekBar?, progress: Int, fromUser: Boolean) {
           if (!fromUser) return
           val (min, _) = PhotoAdjustments.rangeFor(activeAdjustmentKey)
-          val value = min + progress
-          session.updateAdjustments { it.with(activeAdjustmentKey, value) }
+          session.updateAdjustments { it.with(activeAdjustmentKey, min + progress) }
+          // Coalesced by the preview renderer, so dragging does not queue a render per pixel.
+          schedulePhotoPreviewRender()
+        }
+        override fun onStartTrackingTouch(seekBar: SeekBar?) {}
+        override fun onStopTrackingTouch(seekBar: SeekBar?) { refreshAdjustSelection(session) }
+      })
+    }
+    filterIntensitySeekBar = EditorToolSlider(this).apply {
+      applyCompactTrack(accentColor)
+      labelText = "Intensity"
+      valueFormatter = { progress -> "$progress" }
+      setOnSeekBarChangeListener(object : SeekBar.OnSeekBarChangeListener {
+        override fun onProgressChanged(seekBar: SeekBar?, progress: Int, fromUser: Boolean) {
+          if (!fromUser) return
+          session.updateAdjustments { it.copy(filterStrength = progress.toFloat()) }
           schedulePhotoPreviewRender()
         }
         override fun onStartTrackingTouch(seekBar: SeekBar?) {}
         override fun onStopTrackingTouch(seekBar: SeekBar?) {}
       })
     }
-    adjustmentSeekBar = adjustmentSeek
-    root.addView(adjustmentSeek, LinearLayout.LayoutParams(MATCH, WRAP).apply { setMargins(dp(16), dp(4), dp(16), 0) })
 
     val adjustBar = createAdjustSubBar(session, imageView)
     adjustSubBar = adjustBar
@@ -350,15 +395,17 @@ class PhotoVideoEditorActivity : Activity() {
     drawBar.visibility = View.GONE
     root.addView(drawBar, LinearLayout.LayoutParams(MATCH, dp(56)))
 
-    val layerPropertySeek = SeekBar(this).apply {
+    val layerPropertySeek = EditorToolSlider(this).apply {
+      progressTintList = android.content.res.ColorStateList.valueOf(themeColor("primaryColor", DesignTokens.primaryContainer))
+      thumbTintList = progressTintList
       visibility = View.GONE
       setOnSeekBarChangeListener(object : SeekBar.OnSeekBarChangeListener {
         override fun onProgressChanged(seekBar: SeekBar?, progress: Int, fromUser: Boolean) {
           if (!fromUser) return
           onLayerPropertyChanged(progress)
         }
-        override fun onStartTrackingTouch(seekBar: SeekBar?) {}
-        override fun onStopTrackingTouch(seekBar: SeekBar?) {}
+        override fun onStartTrackingTouch(seekBar: SeekBar?) { dragStartSnapshot = session.layerStack.layers.map { it.copy() } }
+        override fun onStopTrackingTouch(seekBar: SeekBar?) { dragStartSnapshot?.let { session.layerStack.commitSnapshot(it) }; dragStartSnapshot = null; onLayerStackChanged() }
       })
     }
     layerPropertySeekBar = layerPropertySeek
@@ -372,7 +419,7 @@ class PhotoVideoEditorActivity : Activity() {
     val layerBar = createLayerToolBar(session)
     layerToolBar = layerBar
     layerBar.visibility = View.GONE
-    root.addView(layerBar, LinearLayout.LayoutParams(MATCH, dp(56)))
+    root.addView(layerBar, LinearLayout.LayoutParams(MATCH, dp(76)))
 
     val toolbarHeight = dp(76)
     val toolbar = createPhotoToolBar(session, imageView, overlay)
@@ -390,7 +437,7 @@ class PhotoVideoEditorActivity : Activity() {
         filtersBar to dp(FILTERS_SUB_BAR_HEIGHT_DP),
         stickersBar to dp(ASSET_GRID_BAR_HEIGHT_DP),
         drawBar to dp(56),
-        layerBar to dp(56)
+        layerBar to dp(76)
       )
     )
     return outer
@@ -404,39 +451,57 @@ class PhotoVideoEditorActivity : Activity() {
     Triple("text", "Text", R.drawable.ic_title),
     Triple("stickers", "Stickers", R.drawable.ic_sentiment_satisfied),
     Triple("draw", "Draw", R.drawable.ic_draw),
-    Triple("resize", "Resize", R.drawable.ic_aspect_ratio)
+    Triple("resize", "Resize", R.drawable.ic_aspect_ratio),
+    Triple("compare", "Original", R.drawable.ic_compare)
   )
 
+  /**
+   * Main tool dock. All eight tools stay available; rather than compressing them onto one screen
+   * (tiny icons, wrapped labels), items are sized so roughly five fill the width and the rest are a
+   * scroll away.
+   */
   private fun createPhotoToolBar(session: PhotoEditSession, imageView: ZoomableImageView, overlay: CropOverlayView): LinearLayout {
     val backgroundColor = themeColor("toolbarColor", DesignTokens.withAlphaPercent(DesignTokens.surfaceContainerLowest, 95))
+    val itemWidth = photoToolItemWidth()
     return LinearLayout(this).apply {
       orientation = LinearLayout.VERTICAL
       setBackgroundColor(backgroundColor)
-      setPadding(dp(DesignTokens.spaceXs), dp(DesignTokens.spaceSm), dp(DesignTokens.spaceXs), dp(DesignTokens.spaceLg))
-
-      addView(
-        View(this@PhotoVideoEditorActivity).apply { background = roundedDrawable(DesignTokens.surfaceVariant, DesignTokens.radiusSm) },
-        LinearLayout.LayoutParams(dp(36), dp(4)).apply { gravity = Gravity.CENTER_HORIZONTAL; bottomMargin = dp(DesignTokens.spaceXs) }
-      )
 
       val features = request.optJSONObject("features")
       addView(HorizontalScrollView(this@PhotoVideoEditorActivity).apply {
         isHorizontalScrollBarEnabled = false
+        clipToPadding = false
         photoToolScroll = this
         addView(LinearLayout(this@PhotoVideoEditorActivity).apply {
           orientation = LinearLayout.HORIZONTAL
           gravity = Gravity.CENTER_VERTICAL
-          setPadding(dp(DesignTokens.spaceSm), dp(DesignTokens.spaceXs), dp(DesignTokens.spaceSm), dp(DesignTokens.spaceXs))
           photoToolDefinitions.filter { features?.optBoolean(it.first, true) != false }.forEach { (key, label, iconRes) ->
             val node = createToolNode(iconRes, label) { onPhotoToolTapped(key, session, imageView, overlay) }
+            if (key == "compare") {
+              node.root.contentDescription = "Hold to compare with original"
+              node.root.setOnTouchListener { _, event ->
+                when (event.actionMasked) {
+                  MotionEvent.ACTION_DOWN -> showOriginalPreview(true)
+                  MotionEvent.ACTION_UP, MotionEvent.ACTION_CANCEL -> showOriginalPreview(false)
+                }
+                true
+              }
+            }
             photoToolButtons[key] = node
-            addView(node.root, LinearLayout.LayoutParams(dp(DesignTokens.touchTargetMin), WRAP).apply { marginEnd = dp(DesignTokens.spaceSm) })
+            addView(node.root, LinearLayout.LayoutParams(itemWidth, WRAP))
           }
         })
       }, LinearLayout.LayoutParams(MATCH, WRAP))
     }
   }
 
+  /**
+   * Width that shows about five tools at once, so the dock fills the screen evenly on a small phone
+   * and does not leave 40dp gaps on a large one. Clamped so labels stay on one line either way.
+   */
+  private fun photoToolItemWidth(): Int =
+    (resources.displayMetrics.widthPixels / 5).coerceIn(dp(64), dp(88))
+
   private fun refreshPhotoToolSelection() {
     val textColor = themeColor("textColor", DesignTokens.onSurface)
     photoToolButtons.forEach { (key, node) ->
@@ -468,7 +533,9 @@ class PhotoVideoEditorActivity : Activity() {
   }
 
   private fun onPhotoToolTapped(key: String, session: PhotoEditSession, imageView: ZoomableImageView, overlay: CropOverlayView) {
+    if (key != "compare" && comparingOriginal) showOriginalPreview(false)
     when (key) {
+      "compare" -> showOriginalPreview(!comparingOriginal)
       "crop" -> setCropMode(true, session, imageView, overlay)
       "adjust" -> setAdjustMode(true, session)
       "filters" -> setFiltersMode(true, session)
@@ -486,60 +553,92 @@ class PhotoVideoEditorActivity : Activity() {
   // ---------------------------------------------------------------------
 
   private fun showTextInputDialog(session: PhotoEditSession, editingLayer: PhotoLayer? = null) {
-    var selectedColor = editingLayer?.textColor ?: Color.WHITE
+    showTextEditor(editingLayer) { text ->
+      val layer = editingLayer?.copy(text = text) ?: PhotoLayer(type = LayerType.TEXT, text = text)
+      session.layerStack.commit { list -> if (editingLayer == null) list + layer else list.map { if (it.id == layer.id) layer else it } }
+      selectLayer(layer.id)
+      onLayerStackChanged()
+    }
+  }
+
+  private fun showTextEditor(editingLayer: PhotoLayer?, onSave: (String) -> Unit) {
+    val dialog = android.app.Dialog(this)
+    dialog.requestWindowFeature(android.view.Window.FEATURE_NO_TITLE)
+    val panel = LinearLayout(this).apply {
+      orientation = LinearLayout.VERTICAL
+      setPadding(dp(20), dp(16), dp(20), dp(20))
+      background = roundedDrawable(DesignTokens.surfaceContainerHigh, 16)
+    }
+    panel.addView(TextView(this).apply {
+      text = if (editingLayer == null) "Add Text" else "Edit Text"
+      textSize = 20f
+      setTextColor(Color.WHITE)
+      setTypeface(typeface, android.graphics.Typeface.BOLD)
+    })
     val input = EditText(this).apply {
-      inputType = InputType.TYPE_CLASS_TEXT or InputType.TYPE_TEXT_FLAG_MULTI_LINE
-      setTextColor(selectedColor)
-      setHintTextColor(DesignTokens.outline)
+      inputType = InputType.TYPE_CLASS_TEXT or InputType.TYPE_TEXT_FLAG_MULTI_LINE or InputType.TYPE_TEXT_FLAG_CAP_SENTENCES
       hint = "Type something..."
+      setHintTextColor(DesignTokens.outline)
+      setTextColor(Color.WHITE)
+      textSize = 22f
+      gravity = Gravity.TOP or Gravity.START
+      minLines = 2; maxLines = 6
+      setPadding(dp(12), dp(12), dp(12), dp(12))
+      background = roundedDrawable(DesignTokens.surfaceContainerLow, 12)
       setText(editingLayer?.text.orEmpty())
-      gravity = Gravity.CENTER
-      setPadding(dp(DesignTokens.spaceLg), dp(DesignTokens.spaceLg), dp(DesignTokens.spaceLg), dp(DesignTokens.spaceLg))
-    }
-    val colors = listOf(Color.WHITE, Color.BLACK, Color.RED, Color.YELLOW, Color.GREEN, Color.CYAN, Color.BLUE, Color.MAGENTA)
-    val colorRow = LinearLayout(this).apply {
-      orientation = LinearLayout.HORIZONTAL
-      gravity = Gravity.CENTER
-      colors.forEach { color ->
-        addView(createColorSwatch(color) { selectedColor = color; input.setTextColor(color) }, LinearLayout.LayoutParams(dp(40), dp(40)))
-      }
+      setSelection(text.length)
+    }
+    panel.addView(input, LinearLayout.LayoutParams(MATCH, WRAP).apply { topMargin = dp(16); bottomMargin = dp(12) })
+    val actions = LinearLayout(this).apply { gravity = Gravity.END or Gravity.CENTER_VERTICAL }
+    actions.addView(actionButton("Cancel") { dialog.dismiss() }, LinearLayout.LayoutParams(dp(88), dp(48)))
+    actions.addView(editorPrimaryButton(this, if (editingLayer == null) "Add" else "Done", fillColor = themeColor("primaryColor", DesignTokens.primaryContainer)) {
+      val text = input.text.toString()
+      if (text.isNotBlank()) { onSave(text); dialog.dismiss() }
+    }, LinearLayout.LayoutParams(dp(88), dp(48)))
+    panel.addView(actions, LinearLayout.LayoutParams(MATCH, WRAP))
+    val scroll = android.widget.ScrollView(this).apply { isFillViewport = true; addView(panel) }
+    dialog.setContentView(scroll)
+    dialog.window?.apply {
+      setBackgroundDrawableResource(android.R.color.transparent)
+      addFlags(android.view.WindowManager.LayoutParams.FLAG_DIM_BEHIND)
+      setDimAmount(0.7f)
+      setSoftInputMode(android.view.WindowManager.LayoutParams.SOFT_INPUT_ADJUST_RESIZE or android.view.WindowManager.LayoutParams.SOFT_INPUT_STATE_ALWAYS_VISIBLE)
+    }
+    dialog.setOnShowListener {
+      dialog.window?.setLayout(MATCH, WRAP)
+      dialog.window?.setGravity(Gravity.BOTTOM)
+      input.requestFocus()
+      input.post { (getSystemService(INPUT_METHOD_SERVICE) as android.view.inputmethod.InputMethodManager).showSoftInput(input, android.view.inputmethod.InputMethodManager.SHOW_IMPLICIT) }
     }
-    val container = LinearLayout(this).apply {
-      orientation = LinearLayout.VERTICAL
-      background = roundedDrawable(DesignTokens.surfaceContainerHigh, DesignTokens.radiusLg)
-      addView(input, LinearLayout.LayoutParams(MATCH, dp(220)))
-      addView(HorizontalScrollView(this@PhotoVideoEditorActivity).apply { addView(colorRow) }, LinearLayout.LayoutParams(MATCH, dp(56)))
-    }
-    val dialog = AlertDialog.Builder(this, android.R.style.Theme_Material_Dialog_Alert)
-      .setTitle(if (editingLayer == null) "Add text" else "Edit text")
-      .setView(container)
-      .setPositiveButton("Done") { _, _ ->
-        val text = input.text?.toString().orEmpty()
-        if (text.isNotBlank()) {
-          val layer = editingLayer?.copy(text = text, textColor = selectedColor)
-            ?: PhotoLayer(type = LayerType.TEXT, text = text, textColor = selectedColor)
-          session.layerStack.commit { list -> if (editingLayer == null) list + layer else list.map { if (it.id == layer.id) layer else it } }
-          selectLayer(layer.id)
-        }
-      }
-      .setNegativeButton("Cancel", null)
-      .create()
-    dialog.setOnShowListener { dialog.window?.setLayout(MATCH, MATCH); input.requestFocus() }
     dialog.show()
   }
 
   private fun setStickersMode(enabled: Boolean, session: PhotoEditSession) {
     stickersMode = enabled
     stickersSubBar.visibility = if (enabled) View.VISIBLE else View.GONE
-    mainToolBar.visibility = if (enabled) View.GONE else View.VISIBLE
+    mainToolBar.visibility = if (enabled || selectedLayerId != null) View.GONE else View.VISIBLE
     refreshPhotoToolSelection()
   }
 
+  private fun newSticker(stickerId: String? = null, stickerUri: String? = null): PhotoLayer {
+    val bounds = if (mediaType == "photo") photoImageView.currentImageBounds()
+      else videoSession?.let { computeVideoLetterboxBounds(it, videoOverlayImageView) }
+    val scale = bounds?.takeIf { it.width() > 0 && it.height() > 0 }?.let {
+      OverlayGeometry.initialStickerScale(it.width(), it.height())
+    } ?: (0.3f / 0.18f)
+    val options = BitmapFactory.Options().apply { inJustDecodeBounds = true }
+    stickerUri?.let { uri ->
+      SourceResolver.resolvePath(this, uri, "pve_sticker_bounds")?.let { BitmapFactory.decodeFile(it, options) }
+    }
+    val aspect = if (options.outWidth > 0 && options.outHeight > 0) options.outWidth.toFloat() / options.outHeight else 1f
+    return PhotoLayer(type = LayerType.STICKER, stickerId = stickerId, stickerUri = stickerUri, scale = scale, overlayAspectRatio = aspect)
+  }
+
   private fun showStickerBottomSheet(session: PhotoEditSession) {
     stickersMode = true
     refreshPhotoToolSelection()
     OnlineStickerSheet(this, runtimeStickerAssets()) { path ->
-      val layer = PhotoLayer(type = LayerType.STICKER, stickerUri = Uri.fromFile(File(path)).toString())
+      val layer = newSticker(stickerUri = Uri.fromFile(File(path)).toString())
       session.layerStack.commit { it + layer }
       selectLayer(layer.id)
     }.apply {
@@ -598,7 +697,7 @@ class PhotoVideoEditorActivity : Activity() {
             val emoji = TextView(this@PhotoVideoEditorActivity).apply { text = PhotoLayerRenderer.glyphFor(id); textSize = 26f }
             addView(
               createAssetCard(emoji, null) {
-                val layer = PhotoLayer(type = LayerType.STICKER, stickerId = id)
+                val layer = newSticker(stickerId = id)
                 session.layerStack.commit { it + layer }
                 selectLayer(layer.id)
                 setStickersMode(false, session)
@@ -617,7 +716,7 @@ class PhotoVideoEditorActivity : Activity() {
               }
               addView(
                 createAssetCard(icon, id) {
-                  val layer = PhotoLayer(type = LayerType.STICKER, stickerUri = uri)
+                  val layer = newSticker(stickerUri = uri)
                   session.layerStack.commit { it + layer }
                   selectLayer(layer.id)
                   setStickersMode(false, session)
@@ -735,7 +834,7 @@ class PhotoVideoEditorActivity : Activity() {
     when (requestCode) {
       REQUEST_CODE_STICKER_UPLOAD -> {
         val session = photoSession ?: return
-        val layer = PhotoLayer(type = LayerType.STICKER, stickerUri = resolvedUri)
+        val layer = newSticker(stickerUri = resolvedUri)
         session.layerStack.commit { it + layer }
         selectLayer(layer.id)
         setStickersMode(false, session)
@@ -755,7 +854,7 @@ class PhotoVideoEditorActivity : Activity() {
       }
       REQUEST_CODE_VIDEO_STICKER_UPLOAD -> {
         val session = videoSession ?: return
-        val layer = PhotoLayer(type = LayerType.STICKER, stickerUri = resolvedUri)
+        val layer = newSticker(stickerUri = resolvedUri)
         session.layerStack.commit { it + layer }
         onVideoLayerStackChanged()
         selectVideoLayer(layer.id, session)
@@ -779,52 +878,37 @@ class PhotoVideoEditorActivity : Activity() {
 
   private fun selectLayer(id: String?) {
     val session = photoSession
+    if (selectedLayerId != id) activeLayerPropertyKey = ""
     selectedLayerId = id
     layerOverlay.selectedLayerId = id
     if (session != null) {
       layerOverlay.layers = session.layerStack.layers
       schedulePhotoPreviewRender()
     }
+    if (id != null) {
+      if (drawMode && session != null) setDrawMode(false, session)
+      if (cropMode && session != null) cancelCropMode(session, photoImageView, cropOverlay)
+      adjustMode = false; filtersMode = false; stickersMode = false; resizeMode = false
+      listOf(adjustSubBar, filtersSubBar, stickersSubBar, resizeSubBar, adjustmentSeekBar).forEach { it.visibility = View.GONE }
+    }
     setLayerToolBarVisible(id != null)
   }
 
   private fun setLayerToolBarVisible(visible: Boolean) {
     layerToolBar.visibility = if (visible) View.VISIBLE else View.GONE
     mainToolBar.visibility = if (visible) View.GONE else View.VISIBLE
-    if (visible) {
-      // TEXT layers show only Opacity/Colors/Duplicate/Delete; STICKER layers show only
-      // Opacity/Duplicate/Delete (no Colors either) — Scale/Rotate/Size and the
-      // lock/visibility/reorder icons don't apply to either and are hidden per each reduced list.
-      val selectedType = currentSelectedLayer()?.type
-      val isText = selectedType == LayerType.TEXT
-      val isSticker = selectedType == LayerType.STICKER
-      val reducedControls = isText || isSticker
-      layerPropertyButtons["scale"]?.visibility = if (reducedControls) View.GONE else View.VISIBLE
-      layerPropertyButtons["rotation"]?.visibility = if (reducedControls) View.GONE else View.VISIBLE
-      layerPropertyButtons["fontSize"]?.visibility = View.GONE
-      layerPropertyButtons["color"]?.visibility = if (isText) View.VISIBLE else View.GONE
-      listOf("lock", "visibility", "front", "back").forEach { key ->
-        layerIconButtons[key]?.visibility = if (reducedControls) View.GONE else View.VISIBLE
-      }
-      val allowedKeys = when {
-        isText -> setOf("opacity", "color")
-        isSticker -> setOf("opacity")
-        else -> setOf("scale", "rotation", "opacity")
-      }
-      if (activeLayerPropertyKey !in allowedKeys) {
-        activeLayerPropertyKey = "opacity"
-      }
-      layerPropertySeekBar.visibility = if (activeLayerPropertyKey == "color") View.GONE else View.VISIBLE
-      layerColorSwatchRow.visibility = if (activeLayerPropertyKey == "color") View.VISIBLE else View.GONE
-      syncLayerPropertySeekBar()
-      refreshSelection(layerPropertyButtons, activeLayerPropertyKey, themeColor("textColor", DesignTokens.onSurface), themeColor("primaryColor", DesignTokens.primaryContainer))
-    } else {
-      layerPropertySeekBar.visibility = View.GONE
-      layerColorSwatchRow.visibility = View.GONE
-    }
+    val isText = currentSelectedLayer()?.type == LayerType.TEXT
+    val simple = isText || currentSelectedLayer()?.type == LayerType.STICKER
+    listOf("scale", "lock", "visibility", "front", "back").forEach { layerPropertyButtons[it]?.root?.visibility = if (simple) View.GONE else View.VISIBLE }
+    listOf("edit", "color", "fontSize").forEach { layerPropertyButtons[it]?.root?.visibility = if (isText) View.VISIBLE else View.GONE }
+    if (!isText && activeLayerPropertyKey in setOf("color", "fontSize")) activeLayerPropertyKey = ""
+    layerPropertySeekBar.visibility = if (visible && activeLayerPropertyKey in setOf("scale", "rotation", "opacity", "fontSize")) View.VISIBLE else View.GONE
+    layerColorSwatchRow.visibility = if (visible && activeLayerPropertyKey == "color") View.VISIBLE else View.GONE
+    if (visible) syncLayerPropertySeekBar()
+    textSwatches.forEach { (color, view) -> view.background = roundedDrawable(DesignTokens.surfaceContainerHigh, 24).apply { if (color == currentSelectedLayer()?.textColor) setStroke(dp(2), themeColor("primaryColor", DesignTokens.primaryContainer)) } }
+    refreshToolNodeSelection(layerPropertyButtons, activeLayerPropertyKey, Color.WHITE)
   }
 
-  /** Circular color swatch, matching the drawing_brush_studio mockup's palette dots. */
   private fun createColorSwatch(color: Int, onClick: () -> Unit): FrameLayout {
     val outer = FrameLayout(this).apply {
       background = circleDrawable(DesignTokens.surfaceContainerHigh)
@@ -837,38 +921,29 @@ class PhotoVideoEditorActivity : Activity() {
   }
 
   /** Text color swatch row, shown when a TEXT layer's "Color" property is active (text_editor_typography_studio mockup). */
-  private fun createTextColorSwatchRow(session: PhotoEditSession): LinearLayout {
-    val toolbarColor = themeColor("toolbarColor", DesignTokens.surfaceContainerLow)
-    val colors = listOf(
-      Color.WHITE, Color.BLACK, Color.RED, Color.rgb(255, 214, 51),
-      Color.rgb(76, 217, 100), Color.rgb(0, 145, 255), DesignTokens.primary, DesignTokens.tertiary
-    )
-    return LinearLayout(this).apply {
-      gravity = Gravity.CENTER_VERTICAL
-      setPadding(dp(12), 0, dp(12), 0)
-      setBackgroundColor(toolbarColor)
-      addView(HorizontalScrollView(this@PhotoVideoEditorActivity).apply {
-        isHorizontalScrollBarEnabled = false
-        addView(LinearLayout(this@PhotoVideoEditorActivity).apply {
-          orientation = LinearLayout.HORIZONTAL
-          gravity = Gravity.CENTER_VERTICAL
-          colors.forEach { color ->
-            addView(
-              createColorSwatch(color) {
-                val id = selectedLayerId ?: return@createColorSwatch
-                session.layerStack.commit { list -> list.map { if (it.id == id) it.copy(textColor = color) else it } }
-                onLayerStackChanged()
-              },
-              LinearLayout.LayoutParams(dp(32), dp(32)).apply { marginEnd = dp(DesignTokens.spaceSm) }
-            )
-          }
-        })
-      }, LinearLayout.LayoutParams(0, MATCH, 1f))
-      addView(
-        actionButton("Done") { selectLayer(null) }.apply { setTextColor(themeColor("primaryColor", DesignTokens.primaryContainer)) },
-        LinearLayout.LayoutParams(dp(72), MATCH)
-      )
-    }
+  private fun createTextColorSwatchRow(session: PhotoEditSession): LinearLayout = createTextPalette(false) { color ->
+    val id = selectedLayerId ?: return@createTextPalette
+    session.layerStack.commit { list -> list.map { if (it.id == id) it.copy(textColor = color) else it } }
+    onLayerStackChanged()
+    setLayerToolBarVisible(true)
+  }
+
+  private fun createTextPalette(video: Boolean, onColor: (Int) -> Unit): LinearLayout = LinearLayout(this).apply {
+    setBackgroundColor(themeColor("toolbarColor", DesignTokens.surfaceContainerLow))
+    val swatches = if (video) videoTextSwatches else textSwatches
+    addView(HorizontalScrollView(this@PhotoVideoEditorActivity).apply {
+      isHorizontalScrollBarEnabled = false
+      addView(LinearLayout(this@PhotoVideoEditorActivity).apply {
+        gravity = Gravity.CENTER_VERTICAL
+        setPadding(dp(12), 0, dp(12), 0)
+        listOf(Color.WHITE, Color.BLACK, Color.rgb(255, 77, 94), Color.rgb(255, 155, 61), Color.rgb(255, 214, 51), Color.rgb(76, 217, 100), Color.rgb(0, 145, 255), DesignTokens.primary, Color.rgb(255, 105, 180)).forEach { color ->
+          val swatch = createColorSwatch(color) { onColor(color) }
+          swatch.contentDescription = "Text color #" + Integer.toHexString(color).takeLast(6)
+          swatches[color] = swatch
+          addView(swatch, LinearLayout.LayoutParams(dp(48), dp(48)))
+        }
+      })
+    }, LinearLayout.LayoutParams(MATCH, dp(48)))
   }
 
   private fun currentSelectedLayer(): PhotoLayer? {
@@ -879,13 +954,14 @@ class PhotoVideoEditorActivity : Activity() {
   private fun syncLayerPropertySeekBar() {
     val layer = currentSelectedLayer() ?: return
     val (min, max, value) = when (activeLayerPropertyKey) {
-      "rotation" -> Triple(-180f, 180f, layer.rotationDegrees)
+      "rotation" -> Triple(-180f, 180f, ((layer.rotationDegrees % 360f + 540f) % 360f) - 180f)
       "opacity" -> Triple(0f, 100f, layer.opacity * 100f)
       "fontSize" -> Triple(12f, 160f, layer.fontSize)
       else -> Triple(20f, 800f, layer.scale * 100f)
     }
     layerPropertySeekBar.max = (max - min).roundToInt()
     layerPropertySeekBar.progress = (value - min).roundToInt()
+    (layerPropertySeekBar as? EditorToolSlider)?.propertyKey = activeLayerPropertyKey
   }
 
   private fun onLayerPropertyChanged(progress: Int) {
@@ -913,269 +989,250 @@ class PhotoVideoEditorActivity : Activity() {
     schedulePhotoPreviewRender()
   }
 
-  private fun createLayerToolBar(session: PhotoEditSession): LinearLayout {
-    val toolbarColor = themeColor("toolbarColor", DesignTokens.surfaceContainerLow)
-    val textColor = themeColor("textColor", DesignTokens.onSurface)
-    val primaryColor = themeColor("primaryColor", DesignTokens.primaryContainer)
-    // "fontSize"/"color" only make sense for TEXT layers; their chips are hidden/shown per-selection in `setLayerToolBarVisible`.
-    val properties = listOf("scale" to "Scale", "rotation" to "Rotate", "opacity" to "Opacity", "fontSize" to "Size", "color" to "Color")
+  private fun createLayerToolBar(session: PhotoEditSession): LinearLayout = createContextToolbar(false) { key ->
+    val layer = currentSelectedLayer() ?: return@createContextToolbar
+    when (key) {
+      "edit" -> showTextInputDialog(session, layer)
+      "done" -> selectLayer(null)
+      "delete" -> { session.layerStack.commit { it.filterNot { item -> item.id == layer.id } }; selectLayer(null); onLayerStackChanged() }
+      "duplicate" -> {
+        val copy = layer.copy(id = java.util.UUID.randomUUID().toString(), x = (layer.x + 0.04f).coerceIn(0f, 1f), y = (layer.y + 0.04f).coerceIn(0f, 1f))
+        session.layerStack.commit { it + copy }; selectLayer(copy.id); onLayerStackChanged()
+      }
+      "lock", "visibility", "front", "back" -> {
+        session.layerStack.commit { list -> when (key) {
+          "front" -> list.filterNot { it.id == layer.id } + layer
+          "back" -> listOf(layer) + list.filterNot { it.id == layer.id }
+          else -> list.map { if (it.id != layer.id) it else if (key == "lock") it.copy(locked = !it.locked) else it.copy(visible = !it.visible) }
+        } }; onLayerStackChanged()
+      }
+      else -> { activeLayerPropertyKey = if (activeLayerPropertyKey == key) "" else key; setLayerToolBarVisible(true) }
+    }
+  }
+
+  private fun createContextToolbar(video: Boolean, onAction: (String) -> Unit): LinearLayout {
+    val nodes = if (video) videoLayerPropertyButtons else layerPropertyButtons
+    val actions = mutableListOf(
+      Triple("edit", "Edit", R.drawable.ic_draw), Triple("color", "Color", R.drawable.ic_palette),
+      Triple("fontSize", "Size", R.drawable.ic_format_size), Triple("rotation", "Rotate", R.drawable.ic_rotate_right),
+      Triple("opacity", "Opacity", R.drawable.ic_opacity), Triple("scale", "Scale", R.drawable.ic_fullscreen),
+      Triple("duplicate", "Duplicate", R.drawable.ic_content_copy), Triple("delete", "Delete", R.drawable.ic_delete)
+    )
+    if (!video) actions.addAll(listOf(Triple("lock", "Lock", R.drawable.ic_lock), Triple("visibility", "Hide", R.drawable.ic_visibility_off), Triple("front", "Front", R.drawable.ic_chevron_right), Triple("back", "Back", R.drawable.ic_chevron_left)))
     return LinearLayout(this).apply {
       gravity = Gravity.CENTER_VERTICAL
-      setPadding(dp(12), 0, dp(12), 0)
-      setBackgroundColor(toolbarColor)
+      setBackgroundColor(themeColor("toolbarColor", DesignTokens.surfaceContainerLow))
       addView(HorizontalScrollView(this@PhotoVideoEditorActivity).apply {
         isHorizontalScrollBarEnabled = false
         addView(LinearLayout(this@PhotoVideoEditorActivity).apply {
-          orientation = LinearLayout.HORIZONTAL
           gravity = Gravity.CENTER_VERTICAL
-          properties.forEach { (key, label) ->
-            val chip = actionButton(label) {
-              activeLayerPropertyKey = key
-              layerPropertySeekBar.visibility = if (key == "color") View.GONE else View.VISIBLE
-              layerColorSwatchRow.visibility = if (key == "color") View.VISIBLE else View.GONE
-              if (key != "color") syncLayerPropertySeekBar()
-              refreshSelection(layerPropertyButtons, activeLayerPropertyKey, textColor, primaryColor)
-            }.apply { setTextColor(textColor) }
-            layerPropertyButtons[key] = chip
-            addView(chip, LinearLayout.LayoutParams(dp(80), MATCH))
+          actions.forEach { (key, label, icon) ->
+            val node = createToolNode(icon, label) { onAction(key) }
+            nodes[key] = node
+            if (key == "delete") { node.icon.setColorFilter(Color.rgb(255, 100, 115)); node.label.setTextColor(Color.rgb(255, 100, 115)) }
+            addView(node.root, LinearLayout.LayoutParams(dp(72), WRAP))
           }
-          addView(
-            createIconButton(R.drawable.ic_content_copy, "Duplicate layer", textColor) {
-              val original = currentSelectedLayer() ?: return@createIconButton
-              val copy = original.copy(id = java.util.UUID.randomUUID().toString(), x = (original.x + 0.04f).coerceIn(0f, 1f), y = (original.y + 0.04f).coerceIn(0f, 1f))
-              session.layerStack.commit { it + copy }
-              selectLayer(copy.id)
-            },
-            LinearLayout.LayoutParams(dp(DesignTokens.touchTargetMin), dp(DesignTokens.touchTargetMin))
-          )
-          addView(
-            createIconButton(R.drawable.ic_lock, "Toggle lock", textColor) {
-              val id = selectedLayerId ?: return@createIconButton
-              session.layerStack.commit { list -> list.map { if (it.id == id) it.copy(locked = !it.locked) else it } }
-              onLayerStackChanged()
-            }.also { layerIconButtons["lock"] = it },
-            LinearLayout.LayoutParams(dp(DesignTokens.touchTargetMin), dp(DesignTokens.touchTargetMin))
-          )
-          addView(
-            createIconButton(R.drawable.ic_visibility_off, "Toggle visibility", textColor) {
-              val id = selectedLayerId ?: return@createIconButton
-              session.layerStack.commit { list -> list.map { if (it.id == id) it.copy(visible = !it.visible) else it } }
-              onLayerStackChanged()
-            }.also { layerIconButtons["visibility"] = it },
-            LinearLayout.LayoutParams(dp(DesignTokens.touchTargetMin), dp(DesignTokens.touchTargetMin))
-          )
-          addView(
-            createIconButton(R.drawable.ic_chevron_right, "Bring to front", textColor) {
-              val id = selectedLayerId ?: return@createIconButton
-              session.layerStack.commit { list -> (list.filter { it.id != id } + list.first { it.id == id }) }
-              onLayerStackChanged()
-            }.also { layerIconButtons["front"] = it },
-            LinearLayout.LayoutParams(dp(DesignTokens.touchTargetMin), dp(DesignTokens.touchTargetMin))
-          )
-          addView(
-            createIconButton(R.drawable.ic_chevron_left, "Send to back", textColor) {
-              val id = selectedLayerId ?: return@createIconButton
-              session.layerStack.commit { list -> (listOf(list.first { it.id == id }) + list.filter { it.id != id }) }
-              onLayerStackChanged()
-            }.also { layerIconButtons["back"] = it },
-            LinearLayout.LayoutParams(dp(DesignTokens.touchTargetMin), dp(DesignTokens.touchTargetMin))
-          )
-          addView(
-            createIconButton(R.drawable.ic_delete, "Delete layer", textColor) {
-              val id = selectedLayerId ?: return@createIconButton
-              session.layerStack.commit { list -> list.filterNot { it.id == id } }
-              selectLayer(null)
-              onLayerStackChanged()
-            },
-            LinearLayout.LayoutParams(dp(DesignTokens.touchTargetMin), dp(DesignTokens.touchTargetMin))
-          )
         })
       }, LinearLayout.LayoutParams(0, MATCH, 1f))
-      addView(
-        actionButton("Done") { selectLayer(null) }.apply { setTextColor(primaryColor) },
-        LinearLayout.LayoutParams(dp(72), MATCH)
-      )
+      val done = createToolNode(R.drawable.ic_check, "Done") { onAction("done") }
+      setToolNodeSelected(done, true, Color.WHITE)
+      addView(done.root, LinearLayout.LayoutParams(dp(64), WRAP))
     }
   }
 
-  /** Adjust (image_adjustments_workspace mockup) — Brightness/Contrast/Saturation/etc sliders + Mirror. */
   private fun setAdjustMode(enabled: Boolean, session: PhotoEditSession) {
     adjustMode = enabled
+    // The slider now lives inside the panel, so showing the panel shows it — one less thing to
+    // keep in sync, and no stray full-width slider row left behind above the main dock.
     adjustSubBar.visibility = if (enabled) View.VISIBLE else View.GONE
-    adjustmentSeekBar.visibility = if (enabled) View.VISIBLE else View.GONE
     mainToolBar.visibility = if (enabled) View.GONE else View.VISIBLE
     layerOverlay.visibility = if (enabled) View.GONE else View.VISIBLE
-    if (enabled) { activeAdjustmentKey = "brightness"; syncAdjustmentSeekBar(session) }
+    // Entering Adjust selects a control to scrub but never resets the values themselves, so
+    // Adjust -> Filters -> Adjust round-trips keep whatever the user already dialled in.
+    if (enabled) { activeAdjustmentKey = "brightness"; syncAdjustmentSeekBar(session); fadeInPanel(adjustSubBar) }
     refreshPhotoToolSelection()
-    refreshAdjustSelection()
+    refreshAdjustSelection(session)
   }
 
-  /** Filters (filter_browser_library mockup) — preset thumbnail chips + strength slider. */
+  /** Filters — preset thumbnail carousel with an intensity slider above it. */
   private fun setFiltersMode(enabled: Boolean, session: PhotoEditSession) {
     filtersMode = enabled
     filtersSubBar.visibility = if (enabled) View.VISIBLE else View.GONE
-    adjustmentSeekBar.visibility = if (enabled) View.VISIBLE else View.GONE
     mainToolBar.visibility = if (enabled) View.GONE else View.VISIBLE
     layerOverlay.visibility = if (enabled) View.GONE else View.VISIBLE
-    if (enabled) { activeAdjustmentKey = "filterStrength"; syncAdjustmentSeekBar(session) }
+    if (enabled) { syncAdjustmentSeekBar(session); fadeInPanel(filtersSubBar) }
     refreshPhotoToolSelection()
     refreshFiltersSelection(session)
   }
 
-  private fun refreshAdjustSelection() {
-    val textColor = themeColor("textColor", DesignTokens.onSurface)
-    val primaryColor = themeColor("primaryColor", DesignTokens.primaryContainer)
-    refreshSelection(filterAdjustmentButtons, activeAdjustmentKey, textColor, primaryColor)
+  /** Short cross-fade when a panel opens, per the "subtle transition" spec (no slide/scale drama). */
+  private fun fadeInPanel(panel: View) {
+    panel.animate().cancel()
+    panel.alpha = 0f
+    panel.animate().alpha(1f).setDuration(180).start()
   }
 
-  private fun refreshFiltersSelection(session: PhotoEditSession) {
-    val textColor = themeColor("textColor", DesignTokens.onSurface)
+  private fun refreshAdjustSelection(session: PhotoEditSession) {
     val primaryColor = themeColor("primaryColor", DesignTokens.primaryContainer)
-    val activePreset = session.adjustments.filterPreset ?: ""
-    filterPresetCards.forEach { (id, pair) ->
-      val (frame, label) = pair
-      val selected = id == activePreset
-      frame.background = roundedDrawable(DesignTokens.surfaceContainerHighest, DesignTokens.radiusLg)
-      frame.foreground = if (selected) {
-        android.graphics.drawable.GradientDrawable().apply {
-          cornerRadius = dp(DesignTokens.radiusLg).toFloat()
-          setStroke(dp(2), DesignTokens.primaryContainer)
-        }
+    val defaults = PhotoAdjustments()
+    adjustmentStripItems.forEach { (key, item) ->
+      if (key == "mirror") {
+        // A toggle, so "selected" means "on" rather than "being scrubbed".
+        item.setSelected(session.adjustments.mirror, primaryColor)
+        item.setModified(false, primaryColor)
       } else {
-        null
+        item.setSelected(key == activeAdjustmentKey, primaryColor)
+        item.setModified(session.adjustments.value(key) != defaults.value(key), primaryColor)
       }
-      label.setTextColor(if (selected) primaryColor else DesignTokens.outline)
-      label.setTypeface(label.typeface, if (selected) android.graphics.Typeface.BOLD else android.graphics.Typeface.NORMAL)
     }
   }
 
+  private fun refreshFiltersSelection(session: PhotoEditSession) {
+    val primaryColor = themeColor("primaryColor", DesignTokens.primaryContainer)
+    val activePreset = session.adjustments.filterPreset ?: ""
+    filterPresetCards.forEach { (id, thumbnail) -> thumbnail.setSelected(id == activePreset, primaryColor) }
+    // Intensity only means something once a preset is applied.
+    filterIntensitySeekBar.visibility = if (activePreset.isEmpty()) View.INVISIBLE else View.VISIBLE
+  }
+
+  /** Points whichever slider is on screen at the currently selected value. */
   private fun syncAdjustmentSeekBar(session: PhotoEditSession) {
     val (min, max) = PhotoAdjustments.rangeFor(activeAdjustmentKey)
     adjustmentSeekBar.max = (max - min).roundToInt()
     adjustmentSeekBar.progress = (session.adjustments.value(activeAdjustmentKey) - min).roundToInt()
+    adjustmentSeekBar.labelText = photoAdjustmentDefinitions.firstOrNull { it.first == activeAdjustmentKey }?.second
+    adjustmentSeekBar.valueFormatter = { progress -> formatAdjustmentValue(activeAdjustmentKey, min + progress) }
+    // Bipolar adjustments get a centre tick at their neutral value; unipolar ones (blur) do not.
+    adjustmentSeekBar.neutralProgress = if (min < 0f) (-min).roundToInt() else null
+
+    val (strengthMin, strengthMax) = PhotoAdjustments.rangeFor("filterStrength")
+    filterIntensitySeekBar.max = (strengthMax - strengthMin).roundToInt()
+    filterIntensitySeekBar.progress = (session.adjustments.filterStrength - strengthMin).roundToInt()
+  }
+
+  private fun formatAdjustmentValue(key: String, value: Float): String {
+    val rounded = value.roundToInt()
+    return if (key == "blurRadius") "$rounded" else if (rounded > 0) "+$rounded" else "$rounded"
   }
 
+  /**
+   * Adjustments the processing engine actually implements, in carousel order. Deliberately not a
+   * wishlist: every entry maps to a real [PhotoAdjustments] field, so there are no controls that
+   * move a slider without changing the photo. (Highlights/shadows/tint/sharpness were removed from
+   * the engine in an earlier pass and would need that processing restored before they could return.)
+   */
+  private val photoAdjustmentDefinitions = listOf(
+    Triple("exposure", "Exposure", R.drawable.ic_flare),
+    Triple("brightness", "Brightness", R.drawable.ic_light_mode),
+    Triple("contrast", "Contrast", R.drawable.ic_opacity),
+    Triple("saturation", "Saturation", R.drawable.ic_palette),
+    Triple("temperature", "Warmth", R.drawable.ic_compare),
+    Triple("blurRadius", "Blur", R.drawable.ic_filter_center_focus)
+  )
+
+  /**
+   * Adjust panel: `Adjust / Reset / Done` header, one shared slider bound to whichever adjustment is
+   * selected, then a compact scrollable strip. Replaces the previous row of full-height rectangular
+   * buttons, which wrapped "Brightness" onto two lines and gave `Done` a quarter of the screen.
+   */
   private fun createAdjustSubBar(session: PhotoEditSession, imageView: ZoomableImageView): LinearLayout {
-    val toolbarColor = themeColor("toolbarColor", DesignTokens.surfaceContainerLow)
-    val textColor = themeColor("textColor", DesignTokens.onSurface)
     val primaryColor = themeColor("primaryColor", DesignTokens.primaryContainer)
-    val adjustmentChips = listOf(
-      "brightness" to "Brightness", "contrast" to "Contrast", "saturation" to "Saturation",
-      "exposure" to "Exposure", "temperature" to "Temp", "blurRadius" to "Blur"
-    )
     return LinearLayout(this).apply {
-      gravity = Gravity.CENTER_VERTICAL
-      setPadding(dp(12), 0, dp(12), 0)
-      setBackgroundColor(toolbarColor)
-      addView(HorizontalScrollView(this@PhotoVideoEditorActivity).apply {
-        isHorizontalScrollBarEnabled = false
-        addView(LinearLayout(this@PhotoVideoEditorActivity).apply {
-          orientation = LinearLayout.HORIZONTAL
-          adjustmentChips.forEach { (key, label) ->
-            val chip = actionButton(label) {
+      orientation = LinearLayout.VERTICAL
+      setBackgroundColor(DesignTokens.editorSurface)
+      addView(
+        editorPanelHeader(
+          context = this@PhotoVideoEditorActivity,
+          title = "Adjust",
+          accentColor = primaryColor,
+          secondaryLabel = "Reset",
+          onSecondary = {
+            session.updateAdjustments {
+              it.copy(brightness = 0f, contrast = 0f, saturation = 0f, exposure = 0f, temperature = 0f, blurRadius = 0f, mirror = false)
+            }
+            syncAdjustmentSeekBar(session)
+            schedulePhotoPreviewRender()
+            refreshAdjustSelection(session)
+          },
+          onDone = { setAdjustMode(false, session) }
+        ),
+        LinearLayout.LayoutParams(MATCH, dp(EditorPanelMetrics.HEADER_HEIGHT_DP))
+      )
+      addView(adjustmentSeekBar, LinearLayout.LayoutParams(MATCH, dp(EditorPanelMetrics.SLIDER_HEIGHT_DP)))
+      addView(
+        editorToolStrip(this@PhotoVideoEditorActivity) {
+          photoAdjustmentDefinitions.forEach { (key, label, iconRes) ->
+            val item = editorStripItem(this@PhotoVideoEditorActivity, iconRes, label) {
               activeAdjustmentKey = key
               syncAdjustmentSeekBar(session)
-              refreshAdjustSelection()
-            }.apply { setTextColor(textColor) }
-            filterAdjustmentButtons[key] = chip
-            addView(chip, LinearLayout.LayoutParams(dp(84), MATCH))
+              refreshAdjustSelection(session)
+            }
+            adjustmentStripItems[key] = item
+            addView(item.root, LinearLayout.LayoutParams(dp(EditorPanelMetrics.STRIP_ITEM_WIDTH_DP), WRAP))
           }
-          addView(
-            actionButton("Mirror") {
-              session.updateAdjustments { it.copy(mirror = !it.mirror) }
-              schedulePhotoPreviewRender()
-            }.apply { setTextColor(textColor) },
-            LinearLayout.LayoutParams(dp(84), MATCH)
-          )
-          addView(
-            actionButton("Reset") {
-              session.updateAdjustments { it.copy(brightness = 0f, contrast = 0f, saturation = 0f, exposure = 0f, temperature = 0f, blurRadius = 0f, mirror = false) }
-              syncAdjustmentSeekBar(session)
-              schedulePhotoPreviewRender()
-              refreshAdjustSelection()
-            }.apply { setTextColor(textColor) },
-            LinearLayout.LayoutParams(dp(72), MATCH)
-          )
-        })
-      }, LinearLayout.LayoutParams(0, MATCH, 1f))
-      addView(
-        actionButton("Done") { setAdjustMode(false, session) }.apply { setTextColor(primaryColor) },
-        LinearLayout.LayoutParams(dp(72), MATCH)
+          // Mirror is a toggle, not a slider target, but it lives in the same strip so the panel has
+          // one visual language rather than a stray button.
+          val mirror = editorStripItem(this@PhotoVideoEditorActivity, R.drawable.ic_aspect_ratio, "Mirror") {
+            session.updateAdjustments { it.copy(mirror = !it.mirror) }
+            schedulePhotoPreviewRender()
+            refreshAdjustSelection(session)
+          }
+          adjustmentStripItems["mirror"] = mirror
+          addView(mirror.root, LinearLayout.LayoutParams(dp(EditorPanelMetrics.STRIP_ITEM_WIDTH_DP), WRAP))
+        },
+        LinearLayout.LayoutParams(MATCH, dp(EditorPanelMetrics.STRIP_HEIGHT_DP))
       )
     }
   }
 
-  /** Preset thumbnail card (64x64 preview + label), matching the "Preset Thumbnail Cards" component. */
-  private fun createPresetCard(thumbnail: Bitmap?, labelText: String, textColor: Int, onClick: () -> Unit): Triple<LinearLayout, FrameLayout, TextView> {
-    val thumbSize = dp(64)
-    val image = ImageView(this).apply {
-      thumbnail?.let { setImageBitmap(it) }
-      scaleType = ImageView.ScaleType.CENTER_CROP
-    }
-    val frame = FrameLayout(this).apply {
-      background = roundedDrawable(DesignTokens.surfaceContainerHighest, DesignTokens.radiusLg)
-      clipToOutline = true
-      addView(image, FrameLayout.LayoutParams(MATCH, MATCH))
-    }
-    val label = TextView(this).apply {
-      text = labelText
-      textSize = 11f
-      gravity = Gravity.CENTER
-      setTextColor(DesignTokens.outline)
-      setPadding(0, dp(DesignTokens.spaceXs), 0, 0)
-      maxLines = 1
-    }
-    val root = LinearLayout(this).apply {
-      orientation = LinearLayout.VERTICAL
-      gravity = Gravity.CENTER_HORIZONTAL
-      isClickable = true
-      setPadding(dp(4), 0, dp(4), 0)
-      addView(frame, LinearLayout.LayoutParams(thumbSize, thumbSize))
-      addView(label, LinearLayout.LayoutParams(dp(72), WRAP))
-      setOnClickListener { onClick() }
-    }
-    return Triple(root, frame, label)
-  }
-
+  /**
+   * Filters panel: `Filters / Done` header, an intensity slider that appears once a preset is
+   * applied, then the preset carousel. Same header/slider/strip skeleton as Adjust so the two read
+   * as one system.
+   */
   private fun createFiltersSubBar(session: PhotoEditSession, imageView: ZoomableImageView): LinearLayout {
-    val toolbarColor = themeColor("toolbarColor", DesignTokens.surfaceContainerLow)
-    val textColor = themeColor("textColor", DesignTokens.onSurface)
     val primaryColor = themeColor("primaryColor", DesignTokens.primaryContainer)
     return LinearLayout(this).apply {
-      gravity = Gravity.CENTER_VERTICAL
-      setPadding(dp(12), dp(8), dp(12), dp(8))
-      setBackgroundColor(toolbarColor)
-      addView(HorizontalScrollView(this@PhotoVideoEditorActivity).apply {
-        isHorizontalScrollBarEnabled = false
-        addView(LinearLayout(this@PhotoVideoEditorActivity).apply {
-          orientation = LinearLayout.HORIZONTAL
-          gravity = Gravity.CENTER_VERTICAL
-          val (originalCard, originalFrame, originalLabel) = createPresetCard(session.baseBitmap, "Original", textColor) {
+      orientation = LinearLayout.VERTICAL
+      setBackgroundColor(DesignTokens.editorSurface)
+      addView(
+        editorPanelHeader(
+          context = this@PhotoVideoEditorActivity,
+          title = "Filters",
+          accentColor = primaryColor,
+          onDone = { setFiltersMode(false, session) }
+        ),
+        LinearLayout.LayoutParams(MATCH, dp(EditorPanelMetrics.HEADER_HEIGHT_DP))
+      )
+      addView(filterIntensitySeekBar, LinearLayout.LayoutParams(MATCH, dp(EditorPanelMetrics.SLIDER_HEIGHT_DP)))
+      addView(
+        editorToolStrip(this@PhotoVideoEditorActivity) {
+          val original = editorFilterThumbnail(this@PhotoVideoEditorActivity, "Original") {
             session.updateAdjustments { it.copy(filterPreset = null, filterStrength = 100f) }
             syncAdjustmentSeekBar(session)
             schedulePhotoPreviewRender()
             refreshFiltersSelection(session)
           }
-          addView(originalCard, LinearLayout.LayoutParams(WRAP, WRAP).apply { marginEnd = dp(DesignTokens.spaceSm) })
+          original.image.setImageBitmap(session.baseBitmap)
+          filterPresetCards[""] = original
+          addView(original.root, LinearLayout.LayoutParams(WRAP, WRAP).apply { marginEnd = dp(DesignTokens.spaceSm) })
           PhotoFilterPresets.PRESET_IDS.forEach { id ->
-            val (card, frame, label) = createPresetCard(null, PhotoFilterPresets.labelFor(id), textColor) {
+            val thumbnail = editorFilterThumbnail(this@PhotoVideoEditorActivity, PhotoFilterPresets.labelFor(id)) {
               session.updateAdjustments { it.copy(filterPreset = if (it.filterPreset == id) null else id) }
-              activeAdjustmentKey = "filterStrength"
               syncAdjustmentSeekBar(session)
               schedulePhotoPreviewRender()
               refreshFiltersSelection(session)
             }
-            val thumbnailView = frame.getChildAt(0) as ImageView
-            filterThumbnailLoader.load(session.baseBitmap, id, dp(64)) { thumbnailView.setImageBitmap(it) }
-            filterPresetCards[id] = Pair(frame, label)
-            addView(card, LinearLayout.LayoutParams(WRAP, WRAP).apply { marginEnd = dp(DesignTokens.spaceSm) })
+            // Thumbnails render off a cached downscaled copy of the photo, never the full-resolution
+            // bitmap — 17 presets at full size would stall the panel on open.
+            filterThumbnailLoader.load(session.baseBitmap, id, dp(EditorPanelMetrics.THUMBNAIL_WIDTH_DP)) {
+              thumbnail.image.setImageBitmap(it)
+            }
+            filterPresetCards[id] = thumbnail
+            addView(thumbnail.root, LinearLayout.LayoutParams(WRAP, WRAP).apply { marginEnd = dp(DesignTokens.spaceSm) })
           }
-          filterPresetCards[""] = Pair(originalFrame, originalLabel)
-        })
-      }, LinearLayout.LayoutParams(0, MATCH, 1f))
-      addView(
-        actionButton("Done") { setFiltersMode(false, session) }.apply { setTextColor(primaryColor) },
-        LinearLayout.LayoutParams(dp(72), MATCH)
+        },
+        LinearLayout.LayoutParams(MATCH, dp(EditorPanelMetrics.STRIP_HEIGHT_DP + 24))
       )
     }
   }
@@ -1185,118 +1242,39 @@ class PhotoVideoEditorActivity : Activity() {
     cropMode = enabled
     imageView.panZoomEnabled = !enabled
     overlay.visibility = if (enabled) View.VISIBLE else View.GONE
-    straightenSeekBar.visibility = if (enabled) View.VISIBLE else View.GONE
     cropSubBar.visibility = if (enabled) View.VISIBLE else View.GONE
     mainToolBar.visibility = if (enabled) View.GONE else View.VISIBLE
     layerOverlay.visibility = if (enabled) View.GONE else View.VISIBLE
-    if (enabled) {
-      imageView.resetToFit()
-      val state = session.state
-      val isIdentityCrop = state.cropLeft == 0f && state.cropTop == 0f && state.cropRight == 1f && state.cropBottom == 1f
-      overlay.setImageBounds(imageView.currentImageBounds(), resetCrop = isIdentityCrop)
-      overlay.setCrop(state.cropLeft, state.cropTop, state.cropRight, state.cropBottom)
-      overlay.setAspectRatio(state.aspectRatio)
-    } else {
-      cropEntryState = null
-    }
+    if (!enabled) cropEntryState = null
+    photoCropPanel?.sync(session.state)
+    schedulePhotoPreviewRender()
     refreshPhotoToolSelection()
-    refreshSelection(cropAspectButtons, session.state.aspectRatio, themeColor("textColor", DesignTokens.onSurface), themeColor("primaryColor", DesignTokens.primaryContainer))
   }
 
   private fun cancelCropMode(session: PhotoEditSession, imageView: ZoomableImageView, overlay: CropOverlayView) {
     cropEntryState?.let { snapshot -> session.update { snapshot } }
-    straightenSeekBar.progress = ((cropEntryState?.straightenDegrees ?: 0f) + 45f).roundToInt()
-    cropEntryState = null
-    schedulePhotoPreviewRender()
     setCropMode(false, session, imageView, overlay)
   }
 
   private fun createCropSubBar(session: PhotoEditSession, imageView: ZoomableImageView, overlay: CropOverlayView): LinearLayout {
-    val toolbarColor = themeColor("toolbarColor", DesignTokens.surfaceContainerLow)
-    val textColor = themeColor("textColor", DesignTokens.onSurface)
-    val primaryColor = themeColor("primaryColor", DesignTokens.primaryContainer)
-    val aspectPresets = listOf<Pair<String, Float?>>(
-      "Free" to null, "1:1" to 1f, "4:5" to 4f / 5f, "3:4" to 3f / 4f, "9:16" to 9f / 16f, "16:9" to 16f / 9f
-    )
-    return LinearLayout(this).apply {
-      orientation = LinearLayout.VERTICAL
-      setPadding(0, dp(6), 0, dp(6))
-      setBackgroundColor(toolbarColor)
-
-      addView(TextView(this@PhotoVideoEditorActivity).apply {
-        text = "Crop Mode   •   TRANSFORM & ASPECT RATIO"
-        textSize = 14f
-        setTypeface(typeface, android.graphics.Typeface.BOLD)
-        setTextColor(textColor)
-        gravity = Gravity.CENTER_VERTICAL
-        setPadding(dp(DesignTokens.spaceLg), 0, dp(DesignTokens.spaceLg), 0)
-      }, LinearLayout.LayoutParams(MATCH, dp(36)))
-
-      // Rotate/Flip row — moved here from the main tool rail to match the crop_transform_editor mockup.
-      addView(LinearLayout(this@PhotoVideoEditorActivity).apply {
-        orientation = LinearLayout.HORIZONTAL
-        gravity = Gravity.CENTER
-        addView(
-          createIconButton(R.drawable.ic_rotate_left, "Rotate left", textColor) {
-            session.update { it.rotatedRight().rotatedRight().rotatedRight() }
-            schedulePhotoPreviewRender()
-            imageView.post { imageView.resetToFit(); overlay.setImageBounds(imageView.currentImageBounds(), resetCrop = true) }
-          },
-          LinearLayout.LayoutParams(dp(DesignTokens.touchTargetMin), dp(DesignTokens.touchTargetMin))
-        )
-        addView(
-          createIconButton(R.drawable.ic_rotate_right, "Rotate right", textColor) {
-            session.update { it.rotatedRight() }
-            schedulePhotoPreviewRender()
-            imageView.post { imageView.resetToFit(); overlay.setImageBounds(imageView.currentImageBounds(), resetCrop = true) }
-          },
-          LinearLayout.LayoutParams(dp(DesignTokens.touchTargetMin), dp(DesignTokens.touchTargetMin))
-        )
-      }, LinearLayout.LayoutParams(MATCH, dp(DesignTokens.touchTargetMin)))
-
-      addView(LinearLayout(this@PhotoVideoEditorActivity).apply {
-        gravity = Gravity.CENTER_VERTICAL
-        setPadding(dp(12), 0, dp(12), 0)
-        addView(
-          actionButton("Cancel") { cancelCropMode(session, imageView, overlay) }.apply { setTextColor(textColor) },
-          LinearLayout.LayoutParams(dp(72), MATCH)
-        )
-        addView(HorizontalScrollView(this@PhotoVideoEditorActivity).apply {
-          isHorizontalScrollBarEnabled = false
-          addView(LinearLayout(this@PhotoVideoEditorActivity).apply {
-            orientation = LinearLayout.HORIZONTAL
-            aspectPresets.forEach { (label, ratio) ->
-              val chip = actionButton(label) {
-                overlay.setAspectRatio(ratio)
-                session.update { it.withAspectRatio(ratio) }
-                refreshSelection(cropAspectButtons, ratio, textColor, primaryColor)
-              }.apply { setTextColor(textColor) }
-              cropAspectButtons[ratio] = chip
-              addView(chip, LinearLayout.LayoutParams(dp(64), MATCH))
-            }
-            addView(
-              actionButton("Reset") {
-                session.update { it.reset() }
-                overlay.setAspectRatio(null)
-                straightenSeekBar.progress = 45
-                schedulePhotoPreviewRender()
-                imageView.resetToFit()
-                overlay.setImageBounds(imageView.currentImageBounds(), resetCrop = true)
-                refreshSelection(cropAspectButtons, null, textColor, primaryColor)
-              }.apply { setTextColor(textColor) },
-              LinearLayout.LayoutParams(dp(72), MATCH)
-            )
-          })
-        }, LinearLayout.LayoutParams(0, MATCH, 1f))
-        addView(
-          actionButton("Done") { setCropMode(false, session, imageView, overlay) }.apply { setTextColor(primaryColor) },
-          LinearLayout.LayoutParams(dp(72), MATCH)
-        )
-      }, LinearLayout.LayoutParams(MATCH, dp(56)))
-    }
+    fun refresh() { photoCropPanel?.sync(session.state); schedulePhotoPreviewRender() }
+    return CropPanel(this, themeColor("primaryColor", DesignTokens.primaryContainer), themeColor("toolbarColor", DesignTokens.surfaceContainerLow), themeColor("textColor", DesignTokens.onSurface),
+      originalRatio = { session.baseBitmap?.let { it.width.toFloat() / it.height } ?: 1f },
+      onReset = { session.update { it.reset() }; refresh() },
+      onDone = { setCropMode(false, session, imageView, overlay) },
+      onCancel = { cancelCropMode(session, imageView, overlay) },
+      onStraighten = { value -> session.update { it.withStraighten(value) }; refresh() },
+      onRotate = {
+        session.update { it.rotatedRight().copy(zoom = 1f, panX = 0f, panY = 0f, aspectRatio = null, aspectPreset = "Free") }; refresh()
+      },
+      onRatio = { label, ratio ->
+        session.update { it.copy(aspectRatio = ratio, aspectPreset = label) }
+        overlay.setAspectRatio(ratio)
+        photoCropPanel?.sync(session.state)
+      }
+    ).also { photoCropPanel = it; it.sync(session.state) }
   }
 
-  /** Canvas Resize & Social Presets (canvas_resize_social_presets mockup): reuses the crop-aspect mechanism to frame the shot, plus an exact export pixel size for the chosen platform. */
   private fun setResizeMode(enabled: Boolean, session: PhotoEditSession, imageView: ZoomableImageView, overlay: CropOverlayView) {
     resizeMode = enabled
     imageView.panZoomEnabled = !enabled
@@ -1410,7 +1388,12 @@ class PhotoVideoEditorActivity : Activity() {
     root.addView(header, LinearLayout.LayoutParams(MATCH, headerHeight))
 
     val preview = FrameLayout(this).apply { setBackgroundColor(Color.BLACK) }
-    root.addView(preview, LinearLayout.LayoutParams(MATCH, 0, 1f))
+    root.addView(
+      preview,
+      LinearLayout.LayoutParams(MATCH, 0, 1f).apply {
+        setMargins(0, dp(DesignTokens.spaceXs), 0, dp(DesignTokens.spaceXs))
+      }
+    )
 
     val session = VideoEditSession(this, sourceUri)
     videoSession = session
@@ -1443,6 +1426,7 @@ class PhotoVideoEditorActivity : Activity() {
       useController = false
       contentDescription = "Selected video preview"
     }
+    cropPlayerView = playerView
     preview.addView(playerView, FrameLayout.LayoutParams(MATCH, MATCH))
 
     val overlayView = ImageView(this).apply {
@@ -1454,9 +1438,33 @@ class PhotoVideoEditorActivity : Activity() {
     videoOverlayImageView = overlayView
     preview.addView(overlayView, FrameLayout.LayoutParams(MATCH, MATCH))
 
+    videoCropOverlay = CropOverlayView(this).apply {
+      visibility = View.GONE
+      onCropChanged = { l, t, r, b -> session.update { it.copy(crop = it.crop.withCrop(l, t, r, b)) } }
+      onViewportChanged = { zoom, x, y -> session.update { it.copy(crop = it.crop.copy(zoom = zoom, panX = x, panY = y)) } }
+      onMediaBoundsChanged = { bounds ->
+        val fitted = videoMediaBounds(session, playerView, false)
+        if (fitted.width() > 0) {
+          playerView.pivotX = playerView.width / 2f; playerView.pivotY = playerView.height / 2f
+          playerView.scaleX = bounds.width() / fitted.width(); playerView.scaleY = playerView.scaleX
+          playerView.translationX = bounds.centerX() - fitted.centerX(); playerView.translationY = bounds.centerY() - fitted.centerY()
+        }
+      }
+    }
+    preview.addView(videoCropOverlay, FrameLayout.LayoutParams(MATCH, MATCH))
+    preview.addOnLayoutChangeListener { _, _, _, _, _, _, _, _, _ ->
+      if (videoCropMode) videoCropOverlay.restore(videoMediaBounds(session, playerView, false), session.state.crop)
+    }
     val layerOverlay = LayerOverlayView(this)
     videoLayerOverlay = layerOverlay
     preview.addView(layerOverlay, FrameLayout.LayoutParams(MATCH, MATCH))
+    layerOverlay.onLayerDelete = { id ->
+      session.layerStack.commit { list -> list.filterNot { it.id == id } }
+      selectVideoLayer(null, session); onVideoLayerStackChanged()
+    }
+    layerOverlay.onLayerDoubleTapped = { id ->
+      session.layerStack.layers.firstOrNull { it.id == id && it.type == LayerType.TEXT }?.let { showVideoTextInputDialog(session, it) }
+    }
     layerOverlay.onLayerTapped = { id -> selectVideoLayer(id, session) }
     layerOverlay.onLayerTransformChanged = { id, x, y, scale, rotation ->
       if (videoDragStartSnapshot == null) videoDragStartSnapshot = session.layerStack.layers
@@ -1472,12 +1480,15 @@ class PhotoVideoEditorActivity : Activity() {
       onVideoLayerStackChanged()
     }
 
-    val playPause = Button(this).apply {
-      text = ""
+    val accentColor = themeColor("primaryColor", DesignTokens.primaryContainer)
+
+    val playPause = ImageButton(this).apply {
       contentDescription = "Play video"
-      setCompoundDrawablesWithIntrinsicBounds(R.drawable.ic_play, 0, 0, 0)
-      gravity = Gravity.CENTER
-      setBackgroundColor(Color.TRANSPARENT)
+      setImageResource(R.drawable.ic_play)
+      setColorFilter(Color.WHITE)
+      scaleType = ImageView.ScaleType.CENTER_INSIDE
+      background = android.graphics.drawable.InsetDrawable(circleDrawable(Color.argb(140, 0, 0, 0)), dp(2))
+      setPadding(dp(9), dp(9), dp(9), dp(9))
       setOnClickListener {
         if (session.player.isPlaying) {
           session.player.pause()
@@ -1487,38 +1498,64 @@ class PhotoVideoEditorActivity : Activity() {
           }
           session.player.play()
         }
+        setVideoControlsVisible(true)
       }
+      applyPressScale()
     }
     playPauseButton = playPause
     val time = TextView(this).apply {
       text = "0:00 / 0:00"
-      setTextColor(textColor)
-      textSize = 12f
+      setTextColor(Color.WHITE)
+      textSize = 11f
     }
     timeLabel = time
     val transport = LinearLayout(this).apply {
       orientation = LinearLayout.HORIZONTAL
       gravity = Gravity.CENTER_VERTICAL
-      setBackgroundColor(toolbarColor)
-      setPadding(dp(8), 0, dp(8), 0)
-      addView(playPause, LinearLayout.LayoutParams(dp(72), WRAP))
-      addView(time, LinearLayout.LayoutParams(WRAP, WRAP))
+      addView(playPause, LinearLayout.LayoutParams(dp(44), dp(44)))
+      addView(time, LinearLayout.LayoutParams(WRAP, WRAP).apply { marginStart = dp(DesignTokens.spaceSm) })
     }
-    root.addView(transport, LinearLayout.LayoutParams(MATCH, dp(40)))
 
+    val seekTrack = android.graphics.drawable.LayerDrawable(
+      arrayOf(
+        roundedDrawable(Color.argb(90, 255, 255, 255), 999),
+        android.graphics.drawable.ClipDrawable(roundedDrawable(accentColor, 999), Gravity.START, android.graphics.drawable.ClipDrawable.HORIZONTAL)
+      )
+    ).apply {
+      setId(0, android.R.id.background)
+      setId(1, android.R.id.progress)
+      setLayerInset(0, 0, dp(9), 0, dp(9))
+      setLayerInset(1, 0, dp(9), 0, dp(9))
+    }
     val seek = SeekBar(this).apply {
+      contentDescription = "Playback position"
+      progressDrawable = seekTrack
+      thumb = circleDrawable(Color.WHITE).apply { setSize(dp(12), dp(12)) }
+      splitTrack = false
       max = 1000
       setOnSeekBarChangeListener(object : SeekBar.OnSeekBarChangeListener {
         override fun onProgressChanged(seekBar: SeekBar?, progress: Int, fromUser: Boolean) {
           if (!fromUser || session.durationMs <= 0) return
           session.seekToGlobalMs(session.durationMs * progress / 1000)
+          updateTimeLabel()
         }
-        override fun onStartTrackingTouch(seekBar: SeekBar?) { seeking = true }
-        override fun onStopTrackingTouch(seekBar: SeekBar?) { seeking = false }
+        override fun onStartTrackingTouch(seekBar: SeekBar?) { seeking = true; setVideoControlsVisible(true) }
+        override fun onStopTrackingTouch(seekBar: SeekBar?) { seeking = false; scheduleAutoHideVideoControls(session) }
       })
     }
     positionSeekBar = seek
-    root.addView(seek, LinearLayout.LayoutParams(MATCH, WRAP).apply { setMargins(dp(8), 0, dp(8), 0) })
+
+    val controlsOverlay = LinearLayout(this).apply {
+      orientation = LinearLayout.VERTICAL
+      setBackgroundColor(Color.argb(150, 0, 0, 0))
+      setPadding(dp(DesignTokens.spaceSm), dp(DesignTokens.spaceXs), dp(DesignTokens.spaceSm), dp(DesignTokens.spaceXs))
+      addView(transport, LinearLayout.LayoutParams(WRAP, WRAP))
+      addView(seek, LinearLayout.LayoutParams(MATCH, dp(24)))
+    }
+    videoControlsOverlay = controlsOverlay
+    preview.addView(controlsOverlay, FrameLayout.LayoutParams(MATCH, WRAP, Gravity.BOTTOM))
+    preview.isClickable = true
+    preview.setOnClickListener { toggleVideoControls(session) }
 
     val trim = TrimRangeView(this).apply {
       // Bound to the currently selected clip (Milestone 7): fractions are relative to that clip's
@@ -1565,6 +1602,17 @@ class PhotoVideoEditorActivity : Activity() {
       }
     }
 
+    val cropPanel = CropPanel(this, themeColor("primaryColor", DesignTokens.primaryContainer), toolbarColor, textColor,
+      originalRatio = { session.sourceWidth.toFloat() / session.sourceHeight.coerceAtLeast(1) },
+      onReset = { session.update { it.copy(crop = PhotoTransformState()) }; refreshVideoCrop(session) },
+      onDone = { setVideoCropMode(false, session) },
+      onCancel = { videoCropEntryState?.let { saved -> session.update { it.copy(crop = saved) } }; setVideoCropMode(false, session) },
+      onStraighten = { value -> session.update { it.copy(crop = it.crop.withStraighten(value)) }; refreshVideoCrop(session) },
+      onRotate = { session.update { it.copy(crop = it.crop.rotatedRight().copy(zoom = 1f, panX = 0f, panY = 0f, aspectRatio = null, aspectPreset = "Free")) }; refreshVideoCrop(session) },
+      onRatio = { label, ratio -> session.update { it.copy(crop = it.crop.copy(aspectRatio = ratio, aspectPreset = label)) }; videoCropOverlay.setAspectRatio(ratio); videoCropPanel?.sync(session.state.crop) }
+    ).apply { visibility = View.GONE }
+    videoCropPanel = cropPanel
+    root.addView(cropPanel, LinearLayout.LayoutParams(MATCH, dp(CROP_SUB_BAR_HEIGHT_DP)))
     val aspectBar = createVideoAspectSubBar(session, playerView)
     aspectBar.visibility = View.GONE
     videoAspectSubBar = aspectBar
@@ -1589,32 +1637,43 @@ class PhotoVideoEditorActivity : Activity() {
     videoFiltersSubBar = filtersBar
     root.addView(filtersBar, LinearLayout.LayoutParams(MATCH, dp(56)))
 
-    val layerPropertySeek = SeekBar(this).apply {
+    val layerPropertySeek = EditorToolSlider(this).apply {
+      progressTintList = android.content.res.ColorStateList.valueOf(themeColor("primaryColor", DesignTokens.primaryContainer))
+      thumbTintList = progressTintList
       visibility = View.GONE
       setOnSeekBarChangeListener(object : SeekBar.OnSeekBarChangeListener {
         override fun onProgressChanged(seekBar: SeekBar?, progress: Int, fromUser: Boolean) {
           if (fromUser) onVideoLayerPropertyChanged(progress, session)
         }
-        override fun onStartTrackingTouch(seekBar: SeekBar?) {}
-        override fun onStopTrackingTouch(seekBar: SeekBar?) {}
+        override fun onStartTrackingTouch(seekBar: SeekBar?) { videoDragStartSnapshot = session.layerStack.layers.map { it.copy() } }
+        override fun onStopTrackingTouch(seekBar: SeekBar?) { videoDragStartSnapshot?.let { session.layerStack.commitSnapshot(it) }; videoDragStartSnapshot = null; onVideoLayerStackChanged() }
       })
     }
     videoLayerPropertySeekBar = layerPropertySeek
     root.addView(layerPropertySeek, LinearLayout.LayoutParams(MATCH, WRAP).apply { setMargins(dp(8), dp(4), dp(8), 0) })
 
+    videoColorRow = createTextPalette(true) { color ->
+      val id = selectedVideoLayerId ?: return@createTextPalette
+      session.layerStack.commit { list -> list.map { if (it.id == id) it.copy(textColor = color) else it } }
+      onVideoLayerStackChanged()
+      setVideoLayerToolBarVisible(true, session)
+    }.apply { visibility = View.GONE }
+    root.addView(videoColorRow, LinearLayout.LayoutParams(MATCH, dp(48)))
     val layerBar = createVideoLayerToolBar(session)
     layerBar.visibility = View.GONE
     videoLayerToolBar = layerBar
-    root.addView(layerBar, LinearLayout.LayoutParams(MATCH, dp(56)))
+    root.addView(layerBar, LinearLayout.LayoutParams(MATCH, dp(76)))
 
-    val toolbarHeight = dp(76)
+    // The dock builds its own horizontal inset and pill; this holder only reserves the row height
+    // (plus an 8dp gap) so the system-bar inset lands on transparent space, not on the pill.
+    val toolbarHeight = dp(VIDEO_DOCK_BAR_HEIGHT_DP)
     val toolbar = createVideoToolBar(session, playerView)
     videoToolBar = toolbar
     root.addView(toolbar, LinearLayout.LayoutParams(MATCH, toolbarHeight))
     applySystemBarInsets(
       header,
       headerHeight,
-      listOf(toolbar to toolbarHeight, aspectBar to dp(CROP_SUB_BAR_HEIGHT_DP), filtersBar to dp(56), layerBar to dp(56))
+      listOf(cropPanel to dp(CROP_SUB_BAR_HEIGHT_DP), toolbar to toolbarHeight, aspectBar to dp(CROP_SUB_BAR_HEIGHT_DP), filtersBar to dp(56), layerBar to dp(76))
     )
 
     startPositionPolling(session)
@@ -1622,6 +1681,7 @@ class PhotoVideoEditorActivity : Activity() {
   }
 
   private fun startPositionPolling(session: VideoEditSession) {
+    var wasPlaying = false
     val runnable = object : Runnable {
       override fun run() {
         if (!seeking && session.durationMs > 0) {
@@ -1629,8 +1689,12 @@ class PhotoVideoEditorActivity : Activity() {
           updateTimeLabel()
         }
         val playing = session.player.isPlaying
-        playPauseButton.setCompoundDrawablesWithIntrinsicBounds(if (playing) R.drawable.ic_pause else R.drawable.ic_play, 0, 0, 0)
+        playPauseButton.setImageResource(if (playing) R.drawable.ic_pause else R.drawable.ic_play)
         playPauseButton.contentDescription = if (playing) "Pause video" else "Play video"
+        if (playing != wasPlaying) {
+          wasPlaying = playing
+          if (playing) scheduleAutoHideVideoControls(session) else setVideoControlsVisible(true)
+        }
         refreshVideoOverlayPreview(session)
         positionPollHandler.postDelayed(this, 250)
       }
@@ -1639,6 +1703,35 @@ class PhotoVideoEditorActivity : Activity() {
     positionPollHandler.postDelayed(runnable, 250)
   }
 
+  /** Shows/hides the in-preview playback controls with a subtle fade (spec: auto-hide while playing). */
+  private fun setVideoControlsVisible(visible: Boolean) {
+    if (!::videoControlsOverlay.isInitialized) return
+    positionPollHandler.removeCallbacks(hideVideoControlsRunnable)
+    videoControlsVisible = visible
+    videoControlsOverlay.animate().cancel()
+    if (visible) {
+      videoControlsOverlay.visibility = View.VISIBLE
+      videoControlsOverlay.animate().alpha(1f).setDuration(200).start()
+    } else {
+      videoControlsOverlay.animate().alpha(0f).setDuration(200)
+        .withEndAction { if (!videoControlsVisible) videoControlsOverlay.visibility = View.INVISIBLE }.start()
+    }
+  }
+
+  private fun scheduleAutoHideVideoControls(session: VideoEditSession) {
+    positionPollHandler.removeCallbacks(hideVideoControlsRunnable)
+    if (session.player.isPlaying) positionPollHandler.postDelayed(hideVideoControlsRunnable, 2500)
+  }
+
+  private fun toggleVideoControls(session: VideoEditSession) {
+    if (videoControlsVisible) {
+      setVideoControlsVisible(false)
+    } else {
+      setVideoControlsVisible(true)
+      scheduleAutoHideVideoControls(session)
+    }
+  }
+
   private fun updateTimeLabel() {
     val session = videoSession ?: return
     timeLabel.text = "${formatMs(session.globalPositionMs())} / ${formatMs(session.durationMs)}"
@@ -1668,9 +1761,16 @@ class PhotoVideoEditorActivity : Activity() {
       videoOverlayRenderKey = null
       return
     }
-    val videoSize = session.player.videoSize
-    val sourceWidth = videoSize.width.takeIf { it > 0 } ?: 1280
-    val sourceHeight = videoSize.height.takeIf { it > 0 } ?: 720
+    // Deliberately NOT `session.player.videoSize`: ExoPlayer's live-reported size is an
+    // independent source of truth from `videoOutputSize()` (which drives `computeVideoLetterboxBounds()`
+    // above, i.e. the touch/gesture-normalization bounds for `videoLayerOverlay`). The two can disagree
+    // (e.g. before the first decoded frame reports a size, or if the effects pipeline republishes a
+    // different size under crop), which silently shifts a layer's normalized x/y/scale relative to what
+    // the user saw on screen. Sourcing both from the same deterministic function keeps preview (this
+    // bitmap) and gesture math in lockstep, and matches what `VideoExporter` computes for the real frame.
+    val (sourceWidthF, sourceHeightF) = videoOutputSize(session, cropped = !videoCropMode)
+    val sourceWidth = sourceWidthF.roundToInt().coerceAtLeast(1)
+    val sourceHeight = sourceHeightF.roundToInt().coerceAtLeast(1)
     val previewScale = minOf(1f, 1280f / maxOf(sourceWidth, sourceHeight))
     val width = (sourceWidth * previewScale).roundToInt().coerceAtLeast(2)
     val height = (sourceHeight * previewScale).roundToInt().coerceAtLeast(2)
@@ -1696,23 +1796,62 @@ class PhotoVideoEditorActivity : Activity() {
     return bitmap
   }
 
-  /** Where the video actually renders within [view] under `FIT_CENTER`-style letterboxing (mirrors `ZoomableImageView.resetToFit`'s math). */
-  private fun computeVideoLetterboxBounds(session: VideoEditSession, view: View): android.graphics.RectF {
-    val viewWidth = view.width.toFloat()
-    val viewHeight = view.height.toFloat()
-    val videoSize = session.player.videoSize
-    if (viewWidth <= 0 || viewHeight <= 0 || videoSize.width <= 0 || videoSize.height <= 0) {
-      return android.graphics.RectF(0f, 0f, viewWidth, viewHeight)
+  /**
+   * Where the video actually renders within [view] under `FIT_CENTER`-style letterboxing (mirrors
+   * `ZoomableImageView.resetToFit`'s math). This is the SINGLE source of truth for overlay-relative
+   * coordinates: [computeVideoLetterboxBounds] (touch/gesture normalization) and
+   * [refreshVideoOverlayPreview] (the bitmap layers actually draw into) both derive their size from
+   * here, so a layer's normalized x/y/scale always means the same on-screen place in both.
+   *
+   * Known gap (not currently reachable from the UI — the video tool rail only exposes Crop/Text/
+   * Stickers, not a whole-video "Rotate" tool): [VideoTransformState.rotationDegrees] (the top-level
+   * rotate field, distinct from `crop.rotationDegrees` handled below) is applied to `playerView` as a
+   * cosmetic `View.rotation` only and is never folded in here, while `VideoExporter` bakes it into the
+   * real output frame (swapping width/height for 90/270°). If that tool is ever wired back up, this
+   * function's width/height swap must also account for `state.rotationDegrees`, or preview and export
+   * will disagree the same way this function's fix for `crop.rotationDegrees` was needed.
+   */
+  private fun videoOutputSize(session: VideoEditSession, cropped: Boolean): Pair<Float, Float> {
+    var w = session.sourceWidth.coerceAtLeast(1).toFloat(); var h = session.sourceHeight.coerceAtLeast(1).toFloat()
+    val crop = session.state.crop
+    if (crop.rotationDegrees % 180 != 0) { val swap = w; w = h; h = swap }
+    return if (cropped) w * (crop.cropRight - crop.cropLeft) to h * (crop.cropBottom - crop.cropTop) else w to h
+  }
+
+  private fun videoMediaBounds(session: VideoEditSession, view: View, cropped: Boolean): android.graphics.RectF {
+    val (w, h) = videoOutputSize(session, cropped)
+    val scale = minOf(view.width / w, view.height / h)
+    val x = (view.width - w * scale) / 2; val y = (view.height - h * scale) / 2
+    return android.graphics.RectF(x, y, x + w * scale, y + h * scale)
+  }
+
+  private fun computeVideoLetterboxBounds(session: VideoEditSession, view: View): android.graphics.RectF = videoMediaBounds(session, view, !videoCropMode)
+
+  private fun refreshVideoCrop(session: VideoEditSession) {
+    session.player.setVideoEffects(com.photovideoeditor.video.render.VideoCropEffects.create(session.state.crop, !videoCropMode))
+    videoCropPanel?.sync(session.state.crop)
+    cropPlayerView.scaleX = 1f; cropPlayerView.scaleY = 1f; cropPlayerView.translationX = 0f; cropPlayerView.translationY = 0f
+    if (videoCropMode) videoCropOverlay.restore(videoMediaBounds(session, cropPlayerView, false), session.state.crop)
+    videoOverlayRenderKey = null
+    refreshVideoOverlayPreview(session)
+  }
+
+  private fun setVideoCropMode(enabled: Boolean, session: VideoEditSession) {
+    if (enabled && !videoCropMode) {
+      videoCropEntryState = session.state.crop
+      session.player.pause()
+      selectVideoLayer(null, session)
     }
-    val scale = minOf(viewWidth / videoSize.width, viewHeight / videoSize.height)
-    val fittedWidth = videoSize.width * scale
-    val fittedHeight = videoSize.height * scale
-    val left = (viewWidth - fittedWidth) / 2f
-    val top = (viewHeight - fittedHeight) / 2f
-    return android.graphics.RectF(left, top, left + fittedWidth, top + fittedHeight)
+    videoCropMode = enabled
+    videoCropPanel?.visibility = if (enabled) View.VISIBLE else View.GONE
+    videoCropOverlay.visibility = if (enabled) View.VISIBLE else View.GONE
+    videoLayerOverlay.visibility = if (enabled) View.GONE else View.VISIBLE
+    videoOverlayImageView.visibility = if (enabled) View.GONE else View.VISIBLE
+    videoToolBar.visibility = if (enabled) View.GONE else View.VISIBLE
+    if (!enabled) videoCropEntryState = null
+    refreshVideoCrop(session)
   }
 
-  /** Mirrors [onLayerStackChanged] for the video overlay stack (Milestone 6). */
   private fun onVideoLayerStackChanged() {
     val session = videoSession ?: return
     if (selectedVideoLayerId != null && session.layerStack.layers.none { it.id == selectedVideoLayerId }) {
@@ -1728,20 +1867,25 @@ class PhotoVideoEditorActivity : Activity() {
   }
 
   private fun selectVideoLayer(id: String?, session: VideoEditSession) {
+    if (selectedVideoLayerId != id) activeVideoLayerPropertyKey = ""
     selectedVideoLayerId = id
     videoLayerOverlay.selectedLayerId = id
     setVideoLayerToolBarVisible(id != null, session)
   }
 
   private fun setVideoLayerToolBarVisible(visible: Boolean, session: VideoEditSession) {
+    if (visible) setVideoControlsVisible(true)
     videoLayerToolBar.visibility = if (visible) View.VISIBLE else View.GONE
-    videoLayerPropertySeekBar.visibility = if (visible) View.VISIBLE else View.GONE
     videoToolBar.visibility = if (visible) View.GONE else View.VISIBLE
-    if (visible) {
-      if (activeVideoLayerPropertyKey !in setOf("rotation", "opacity")) activeVideoLayerPropertyKey = "rotation"
-      syncVideoLayerPropertySeekBar(session)
-      refreshSelection(videoLayerPropertyButtons, activeVideoLayerPropertyKey, themeColor("textColor", DesignTokens.onSurface), themeColor("primaryColor", DesignTokens.primaryContainer))
-    }
+    val isText = currentSelectedVideoLayer(session)?.type == LayerType.TEXT
+    videoLayerPropertyButtons["scale"]?.root?.visibility = if (isText || currentSelectedVideoLayer(session)?.type == LayerType.STICKER) View.GONE else View.VISIBLE
+    listOf("edit", "color", "fontSize").forEach { videoLayerPropertyButtons[it]?.root?.visibility = if (isText) View.VISIBLE else View.GONE }
+    if (!isText && activeVideoLayerPropertyKey in setOf("color", "fontSize")) activeVideoLayerPropertyKey = ""
+    videoLayerPropertySeekBar.visibility = if (visible && activeVideoLayerPropertyKey in setOf("scale", "rotation", "opacity", "fontSize")) View.VISIBLE else View.GONE
+    videoColorRow.visibility = if (visible && activeVideoLayerPropertyKey == "color") View.VISIBLE else View.GONE
+    if (visible) syncVideoLayerPropertySeekBar(session)
+    videoTextSwatches.forEach { (color, view) -> view.background = roundedDrawable(DesignTokens.surfaceContainerHigh, 24).apply { if (color == currentSelectedVideoLayer(session)?.textColor) setStroke(dp(2), themeColor("primaryColor", DesignTokens.primaryContainer)) } }
+    refreshToolNodeSelection(videoLayerPropertyButtons, activeVideoLayerPropertyKey, Color.WHITE)
   }
 
   private fun currentSelectedVideoLayer(session: VideoEditSession): PhotoLayer? =
@@ -1750,12 +1894,14 @@ class PhotoVideoEditorActivity : Activity() {
   private fun syncVideoLayerPropertySeekBar(session: VideoEditSession) {
     val layer = currentSelectedVideoLayer(session) ?: return
     val (min, max, value) = when (activeVideoLayerPropertyKey) {
-      "rotation" -> Triple(-180f, 180f, layer.rotationDegrees)
+      "rotation" -> Triple(-180f, 180f, ((layer.rotationDegrees % 360f + 540f) % 360f) - 180f)
       "opacity" -> Triple(0f, 100f, layer.opacity * 100f)
+      "fontSize" -> Triple(12f, 160f, layer.fontSize)
       "start" -> Triple(0f, session.durationMs.toFloat(), layer.startMs.toFloat())
       "end" -> Triple(0f, session.durationMs.toFloat(), session.durationMs.effectiveEndOr(layer.endMs).toFloat())
       else -> Triple(20f, 800f, layer.scale * 100f)
     }
+    (videoLayerPropertySeekBar as? EditorToolSlider)?.propertyKey = activeVideoLayerPropertyKey
     videoLayerPropertySeekBar.max = (max - min).roundToInt()
     videoLayerPropertySeekBar.progress = (value - min).roundToInt()
   }
@@ -1767,6 +1913,7 @@ class PhotoVideoEditorActivity : Activity() {
     val min = when (activeVideoLayerPropertyKey) {
       "rotation" -> -180f
       "opacity", "start", "end" -> 0f
+      "fontSize" -> 12f
       else -> 20f
     }
     val value = min + progress
@@ -1776,6 +1923,7 @@ class PhotoVideoEditorActivity : Activity() {
         when (activeVideoLayerPropertyKey) {
           "rotation" -> layer.copy(rotationDegrees = value)
           "opacity" -> layer.copy(opacity = value / 100f)
+          "fontSize" -> layer.copy(fontSize = value)
           "start" -> layer.copy(startMs = value.toLong().coerceAtMost(layer.endMs.takeIf { it > 0 } ?: session.durationMs))
           "end" -> layer.copy(endMs = value.toLong().coerceAtLeast(layer.startMs))
           else -> layer.copy(scale = value / 100f)
@@ -1785,94 +1933,102 @@ class PhotoVideoEditorActivity : Activity() {
     refreshVideoOverlayPreview(session)
   }
 
-  private fun createVideoLayerToolBar(session: VideoEditSession): LinearLayout {
-    val toolbarColor = themeColor("toolbarColor", DesignTokens.surfaceContainerLow)
-    val textColor = themeColor("textColor", DesignTokens.onSurface)
-    val primaryColor = themeColor("primaryColor", DesignTokens.primaryContainer)
-    val properties = listOf("rotation" to "Rotate", "opacity" to "Opacity")
-    return LinearLayout(this).apply {
+  private fun createVideoLayerToolBar(session: VideoEditSession): LinearLayout = createContextToolbar(true) { key ->
+    val layer = currentSelectedVideoLayer(session) ?: return@createContextToolbar
+    when (key) {
+      "edit" -> showVideoTextInputDialog(session, layer)
+      "done" -> selectVideoLayer(null, session)
+      "delete" -> { session.layerStack.commit { it.filterNot { item -> item.id == layer.id } }; selectVideoLayer(null, session); onVideoLayerStackChanged() }
+      "duplicate" -> {
+        val copy = layer.copy(id = java.util.UUID.randomUUID().toString(), x = (layer.x + 0.04f).coerceIn(0f, 1f), y = (layer.y + 0.04f).coerceIn(0f, 1f))
+        session.layerStack.commit { it + copy }; selectVideoLayer(copy.id, session); onVideoLayerStackChanged()
+      }
+      else -> { activeVideoLayerPropertyKey = if (activeVideoLayerPropertyKey == key) "" else key; setVideoLayerToolBarVisible(true, session) }
+    }
+  }
+
+  private fun showVideoTextInputDialog(session: VideoEditSession, editingLayer: PhotoLayer? = null) {
+    showTextEditor(editingLayer) { text ->
+      val layer = editingLayer?.copy(text = text) ?: PhotoLayer(type = LayerType.TEXT, text = text)
+      session.layerStack.commit { list -> if (editingLayer == null) list + layer else list.map { if (it.id == layer.id) layer else it } }
+      onVideoLayerStackChanged()
+      selectVideoLayer(layer.id, session)
+    }
+  }
+
+  /**
+   * Compact video dock: two equal-width icon+label actions in one rounded pill. Deliberately not
+   * [createToolNode] — that rail stacks a 44dp tile above a label (76dp of chrome), which is far more
+   * than two actions warrant. Returns a transparent holder so [applySystemBarInsets] can pad the
+   * gesture/nav inset without stretching the pill itself into the system bar.
+   */
+  private fun createVideoToolBar(session: VideoEditSession, playerView: PlayerView): View {
+    val features = request.optJSONObject("features")
+    val dock = LinearLayout(this).apply {
+      orientation = LinearLayout.HORIZONTAL
       gravity = Gravity.CENTER_VERTICAL
-      setPadding(dp(12), 0, dp(12), 0)
-      setBackgroundColor(toolbarColor)
-      addView(HorizontalScrollView(this@PhotoVideoEditorActivity).apply {
-        isHorizontalScrollBarEnabled = false
-        addView(LinearLayout(this@PhotoVideoEditorActivity).apply {
-          orientation = LinearLayout.HORIZONTAL
-          properties.forEach { (key, label) ->
-            val chip = actionButton(label) {
-              activeVideoLayerPropertyKey = key
-              syncVideoLayerPropertySeekBar(session)
-              refreshSelection(videoLayerPropertyButtons, activeVideoLayerPropertyKey, textColor, primaryColor)
-            }.apply { setTextColor(textColor) }
-            videoLayerPropertyButtons[key] = chip
-            addView(chip, LinearLayout.LayoutParams(dp(72), MATCH))
-          }
+      background = roundedDrawable(DesignTokens.surfaceContainer, VIDEO_DOCK_RADIUS_DP)
+      listOf("text" to "Text", "stickers" to "Stickers")
+        .filter { features?.optBoolean(it.first, true) != false }
+        .forEach { (key, label) ->
           addView(
-            actionButton("Delete") {
-              val id = selectedVideoLayerId ?: return@actionButton
-              session.layerStack.commit { list -> list.filterNot { it.id == id } }
-              selectVideoLayer(null, session)
-              onVideoLayerStackChanged()
-            }.apply { setTextColor(textColor) },
-            LinearLayout.LayoutParams(dp(80), MATCH)
+            createVideoDockAction(key, label) { onVideoToolTapped(key, session, playerView) },
+            LinearLayout.LayoutParams(0, MATCH, 1f)
           )
-        })
-      }, LinearLayout.LayoutParams(0, MATCH, 1f))
+        }
+    }
+    return FrameLayout(this).apply {
       addView(
-        actionButton("Done") { selectVideoLayer(null, session) }.apply { setTextColor(primaryColor) },
-        LinearLayout.LayoutParams(dp(72), MATCH)
+        dock,
+        FrameLayout.LayoutParams(MATCH, dp(VIDEO_DOCK_HEIGHT_DP), Gravity.TOP).apply {
+          setMargins(dp(DesignTokens.spaceMd), 0, dp(DesignTokens.spaceMd), 0)
+        }
       )
     }
   }
 
-  private fun showVideoTextInputDialog(session: VideoEditSession) {
-    val input = EditText(this).apply { inputType = InputType.TYPE_CLASS_TEXT or InputType.TYPE_TEXT_FLAG_MULTI_LINE }
-    AlertDialog.Builder(this)
-      .setTitle("Add text")
-      .setView(input)
-      .setPositiveButton("Add") { _, _ ->
-        val text = input.text?.toString().orEmpty()
-        if (text.isNotBlank()) {
-          val layer = PhotoLayer(type = LayerType.TEXT, text = text)
-          session.layerStack.commit { it + layer }
-          onVideoLayerStackChanged()
-          selectVideoLayer(layer.id, session)
-        }
+  /** One dock action: icon + label on a single row, purple pill while pressed. */
+  private fun createVideoDockAction(key: String, labelText: String, onClick: () -> Unit): LinearLayout {
+    val icon: View = if (key == "text") {
+      // A literal "Aa" reads as typography far better than R.drawable.ic_title, which is a lone
+      // oversized "T".
+      TextView(this).apply {
+        text = "Aa"
+        textSize = 15f
+        includeFontPadding = false
+        gravity = Gravity.CENTER
+        setTypeface(typeface, Typeface.BOLD)
+        setTextColor(DesignTokens.textPrimary)
       }
-      .setNegativeButton("Cancel", null)
-      .show()
-  }
-
-  private fun createVideoToolBar(session: VideoEditSession, playerView: PlayerView): LinearLayout {
-    val backgroundColor = themeColor("toolbarColor", DesignTokens.withAlphaPercent(DesignTokens.surfaceContainerLowest, 95))
+    } else {
+      ImageView(this).apply {
+        setImageResource(R.drawable.ic_sentiment_satisfied)
+        setColorFilter(DesignTokens.textPrimary)
+      }
+    }
+    val accent = themeColor("primaryColor", DesignTokens.primaryContainer)
     return LinearLayout(this).apply {
-      orientation = LinearLayout.VERTICAL
-      setBackgroundColor(backgroundColor)
-      setPadding(dp(DesignTokens.spaceXs), dp(DesignTokens.spaceSm), dp(DesignTokens.spaceXs), dp(DesignTokens.spaceLg))
-
-      addView(
-        View(this@PhotoVideoEditorActivity).apply { background = roundedDrawable(DesignTokens.surfaceVariant, DesignTokens.radiusSm) },
-        LinearLayout.LayoutParams(dp(36), dp(4)).apply { gravity = Gravity.CENTER_HORIZONTAL; bottomMargin = dp(DesignTokens.spaceXs) }
-      )
-
-      val features = request.optJSONObject("features")
-      val tools = listOf(
-        Triple("text", "Text", R.drawable.ic_title),
-        Triple("stickers", "Stickers", R.drawable.ic_sentiment_satisfied)
-      )
-      addView(HorizontalScrollView(this@PhotoVideoEditorActivity).apply {
-        isHorizontalScrollBarEnabled = false
-        addView(LinearLayout(this@PhotoVideoEditorActivity).apply {
-          orientation = LinearLayout.HORIZONTAL
-          gravity = Gravity.CENTER_VERTICAL
-          setPadding(dp(DesignTokens.spaceSm), dp(DesignTokens.spaceXs), dp(DesignTokens.spaceSm), dp(DesignTokens.spaceXs))
-          tools.filter { features?.optBoolean(it.first, true) != false }.forEach { (key, label, iconRes) ->
-            val node = createToolNode(iconRes, label) { onVideoToolTapped(key, session, playerView) }
-            videoToolButtons[key] = node
-            addView(node.root, LinearLayout.LayoutParams(dp(DesignTokens.touchTargetMin), WRAP).apply { marginEnd = dp(DesignTokens.spaceSm) })
-          }
-        })
-      }, LinearLayout.LayoutParams(MATCH, WRAP))
+      orientation = LinearLayout.HORIZONTAL
+      gravity = Gravity.CENTER
+      isClickable = true
+      isFocusable = true
+      contentDescription = labelText
+      // A StateListDrawable rather than a touch listener, so it composes with applyPressScale()
+      // (which installs its own OnTouchListener).
+      background = android.graphics.drawable.StateListDrawable().apply {
+        addState(intArrayOf(android.R.attr.state_pressed), roundedDrawable(accent, VIDEO_DOCK_RADIUS_DP))
+        addState(intArrayOf(), roundedDrawable(Color.TRANSPARENT, VIDEO_DOCK_RADIUS_DP))
+      }
+      addView(icon, LinearLayout.LayoutParams(dp(22), dp(22)).apply { marginEnd = dp(DesignTokens.spaceSm) })
+      addView(TextView(this@PhotoVideoEditorActivity).apply {
+        text = labelText
+        textSize = 13f
+        maxLines = 1
+        includeFontPadding = false
+        setTextColor(DesignTokens.textPrimary)
+      })
+      setOnClickListener { onClick() }
+      applyPressScale()
     }
   }
 
@@ -1890,6 +2046,7 @@ class PhotoVideoEditorActivity : Activity() {
 
   private fun onVideoToolTapped(key: String, session: VideoEditSession, playerView: PlayerView) {
     when (key) {
+      "crop" -> setVideoCropMode(true, session)
       "cover" -> {
         val globalMs = session.globalPositionMs()
         session.update { it.withCoverFrame(globalMs) }
@@ -1915,7 +2072,7 @@ class PhotoVideoEditorActivity : Activity() {
 
   private fun showVideoStickerPicker(session: VideoEditSession) {
     OnlineStickerSheet(this, runtimeStickerAssets()) { path ->
-      val layer = PhotoLayer(type = LayerType.STICKER, stickerUri = Uri.fromFile(File(path)).toString())
+      val layer = newSticker(stickerUri = Uri.fromFile(File(path)).toString())
       session.layerStack.commit { it + layer }
       onVideoLayerStackChanged()
       selectVideoLayer(layer.id, session)
@@ -2307,7 +2464,9 @@ class PhotoVideoEditorActivity : Activity() {
 
       addView(TextView(this@PhotoVideoEditorActivity).apply {
         text = if (mediaType == "photo") "Photo Editor" else "Video Editor"
-        textSize = 16f
+        textSize = 14f
+        maxLines = 1
+        ellipsize = android.text.TextUtils.TruncateAt.END
         gravity = Gravity.CENTER
         setTextColor(textColor)
         setTypeface(typeface, android.graphics.Typeface.BOLD)
@@ -2321,25 +2480,16 @@ class PhotoVideoEditorActivity : Activity() {
         if (mediaType == "photo") { photoSession?.layerStack?.redo(); onLayerStackChanged() }
         else { videoSession?.layerStack?.redo(); onVideoLayerStackChanged() }
       }
+      undo.isEnabled = false; undo.alpha = 0.4f
+      redo.isEnabled = false; redo.alpha = 0.4f
       undoButton = undo
       redoButton = redo
       addView(undo, LinearLayout.LayoutParams(dp(DesignTokens.touchTargetMin), dp(DesignTokens.touchTargetMin)))
       addView(redo, LinearLayout.LayoutParams(dp(DesignTokens.touchTargetMin), dp(DesignTokens.touchTargetMin)))
 
-      if (mediaType == "photo") {
-        addView(createIconButton(R.drawable.ic_compare, "Hold to compare with original", textColor) {}.apply {
-          setOnTouchListener { _, event ->
-            when (event.actionMasked) {
-              MotionEvent.ACTION_DOWN -> showOriginalPreview(true)
-              MotionEvent.ACTION_UP, MotionEvent.ACTION_CANCEL -> showOriginalPreview(false)
-            }
-            true
-          }
-        }, LinearLayout.LayoutParams(dp(DesignTokens.touchTargetMin), dp(DesignTokens.touchTargetMin)))
-      }
 
       addView(
-        editorPrimaryButton(this@PhotoVideoEditorActivity, "Export", R.drawable.ic_share, primaryColor, onPrimaryColor) {
+        editorPrimaryButton(this@PhotoVideoEditorActivity, "Export", null, primaryColor, onPrimaryColor) {
           if (mediaType == "photo") showPhotoExportConfiguration() else finishDone()
         },
         LinearLayout.LayoutParams(WRAP, dp(DesignTokens.touchTargetMin)).apply { marginStart = dp(DesignTokens.spaceXs) }
@@ -2461,17 +2611,20 @@ class PhotoVideoEditorActivity : Activity() {
     val label = TextView(this).apply {
       text = labelText
       textSize = 11f
+      maxLines = 1
+      includeFontPadding = false
       gravity = Gravity.CENTER
       setTextColor(DesignTokens.outline)
-      setPadding(0, dp(DesignTokens.spaceXs), 0, 0)
+      setPadding(0, dp(2), 0, 0)
     }
     val root = LinearLayout(this).apply {
       orientation = LinearLayout.VERTICAL
       gravity = Gravity.CENTER_HORIZONTAL
       isClickable = true
       isFocusable = true
+      contentDescription = labelText
       background = roundedDrawable(Color.TRANSPARENT, DesignTokens.radiusLg)
-      setPadding(0, dp(4), 0, dp(4))
+      setPadding(0, dp(2), 0, dp(2))
       addView(tile, LinearLayout.LayoutParams(dp(DesignTokens.touchTargetMin), dp(DesignTokens.touchTargetMin)))
       addView(label, LinearLayout.LayoutParams(WRAP, WRAP))
       setOnClickListener { onClick() }
@@ -2481,17 +2634,23 @@ class PhotoVideoEditorActivity : Activity() {
   }
 
   /** Highlights a tool-rail node the same way the mockups do: filled tile + text/icon tint switching to the theme's text color. */
+  /**
+   * Selection is a purple icon + label over a faint purple disc — not a filled purple tile, which at
+   * dock size reads as a large button and fights the photo for attention.
+   */
   private fun setToolNodeSelected(node: ToolNode, selected: Boolean, textColor: Int) {
-    node.tile.background = roundedDrawable(
-      if (selected) themeColor("primaryColor", DesignTokens.primaryContainer) else DesignTokens.surfaceContainerLow,
-      DesignTokens.radiusLg
-    )
-    node.icon.setColorFilter(if (selected) DesignTokens.onPrimaryContainer else DesignTokens.outline)
-    node.label.setTextColor(if (selected) DesignTokens.primary else DesignTokens.outline)
+    val accent = themeColor("primaryColor", DesignTokens.primaryContainer)
+    node.tile.background = if (selected) circleDrawable(DesignTokens.withAlphaPercent(accent, 18)) else null
+    node.root.isSelected = selected
+    node.icon.setColorFilter(if (selected) accent else DesignTokens.textSecondary)
+    node.label.setTextColor(if (selected) accent else DesignTokens.textSecondary)
   }
 
   private fun <K> refreshToolNodeSelection(nodes: Map<K, ToolNode>, activeKey: K?, textColor: Int) {
-    nodes.forEach { (key, node) -> setToolNodeSelected(node, key == activeKey, textColor) }
+    nodes.forEach { (key, node) ->
+      setToolNodeSelected(node, key == activeKey, textColor)
+      if (key == "delete") { node.icon.setColorFilter(Color.rgb(255, 100, 115)); node.label.setTextColor(Color.rgb(255, 100, 115)) }
+    }
   }
 
   private fun showPreviewError(container: FrameLayout) {
@@ -2540,7 +2699,13 @@ class PhotoVideoEditorActivity : Activity() {
   }
 
   @Deprecated("Deprecated in Java")
-  override fun onBackPressed() = confirmDiscardChanges()
+  override fun onBackPressed() {
+    if (cropMode) photoSession?.let { cancelCropMode(it, photoImageView, cropOverlay) }
+    else if (videoCropMode) videoSession?.let { session ->
+      videoCropEntryState?.let { saved -> session.update { it.copy(crop = saved) } }; setVideoCropMode(false, session)
+    }
+    else confirmDiscardChanges()
+  }
 
   override fun onTrimMemory(level: Int) {
     super.onTrimMemory(level)
@@ -2573,12 +2738,17 @@ class PhotoVideoEditorActivity : Activity() {
 
   companion object {
     /** Rotate icon row (44dp) + aspect-preset chip row (56dp). */
-    const val CROP_SUB_BAR_HEIGHT_DP = 148
-    const val ADJUST_SUB_BAR_HEIGHT_DP = 112
-    /** 64dp preset thumbnail + label + vertical padding, matching the "Preset Thumbnail Cards" spec. */
-    const val FILTERS_SUB_BAR_HEIGHT_DP = 104
+    const val CROP_SUB_BAR_HEIGHT_DP = 232
+    /** Header + shared slider + adjustment strip; see EditorPanelMetrics for the breakdown. */
+    const val ADJUST_SUB_BAR_HEIGHT_DP = EditorPanelMetrics.TOTAL_HEIGHT_DP
+    /** Same skeleton as Adjust, with a taller strip for the thumbnail + label. */
+    const val FILTERS_SUB_BAR_HEIGHT_DP = EditorPanelMetrics.TOTAL_HEIGHT_DP + 24
     /** 64dp asset card + optional caption + vertical padding, for the Stickers/Shapes grid. */
     const val ASSET_GRID_BAR_HEIGHT_DP = 104
+    /** Compact video dock (Text/Stickers pill) and the gap between it and the safe-area edge. */
+    const val VIDEO_DOCK_HEIGHT_DP = 52
+    const val VIDEO_DOCK_RADIUS_DP = 18
+    const val VIDEO_DOCK_BAR_HEIGHT_DP = VIDEO_DOCK_HEIGHT_DP + 8
     private const val TIMELINE_THUMBNAIL_COUNT = 12
     const val EXTRA_URI = "photoVideoEditor.uri"
     const val EXTRA_TYPE = "photoVideoEditor.type"