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

package/ios/Editor/PhotoVideoEditorViewController.swift

@@ -20,7 +20,9 @@ final class PhotoVideoEditorViewController: UIViewController {
 
   private var photoSession: PhotoEditSession?
   private var cropMode = false
+  private var cropEntryState: PhotoTransformState?
   private var filtersMode = false
+  private var drawMode = false
   private var stickersMode = false
   private var pendingPickPurpose: ImagePickPurpose?
   private var activeAdjustmentKey = "brightness"
@@ -30,11 +32,13 @@ final class PhotoVideoEditorViewController: UIViewController {
   private var photoImageView: ZoomableImageView?
   private var cropOverlay: CropOverlayView?
   private var layerOverlay: LayerOverlayView?
+  private var drawOverlay: DrawOverlayView?
   private var straightenSlider: UISlider?
   private var cropSubBar: UIView?
   private var adjustmentSlider: UISlider?
   private var filtersSubBar: UIView?
   private var stickersSubBar: UIView?
+  private var drawSubBar: UIView?
   private var layerToolBar: UIView?
   private var layerPropertySlider: UISlider?
   private var layerColorSwatchRow: UIView?
@@ -186,30 +190,32 @@ final class PhotoVideoEditorViewController: UIViewController {
       layers.bottomAnchor.constraint(equalTo: preview.bottomAnchor),
     ])
 
-    let metadataBadge = UILabel()
-    metadataBadge.text = "  ●  ORIGINAL   •   100%  "
-    metadataBadge.font = .systemFont(ofSize: 10, weight: .semibold)
-    metadataBadge.textColor = DesignTokens.onSurfaceVariant
-    metadataBadge.backgroundColor = DesignTokens.surfaceContainerHigh.withAlphaComponent(0.92)
-    metadataBadge.layer.cornerRadius = DesignTokens.radiusLg
-    metadataBadge.clipsToBounds = true
-    preview.addSubview(metadataBadge)
-    metadataBadge.translatesAutoresizingMaskIntoConstraints = false
+    let drawing = DrawOverlayView()
+    drawing.isHidden = true
+    drawOverlay = drawing
+    preview.addSubview(drawing)
+    drawing.translatesAutoresizingMaskIntoConstraints = false
     NSLayoutConstraint.activate([
-      metadataBadge.centerXAnchor.constraint(equalTo: preview.centerXAnchor),
-      metadataBadge.topAnchor.constraint(equalTo: preview.topAnchor, constant: DesignTokens.spaceSm),
-      metadataBadge.heightAnchor.constraint(equalToConstant: 28),
+      drawing.leadingAnchor.constraint(equalTo: preview.leadingAnchor),
+      drawing.trailingAnchor.constraint(equalTo: preview.trailingAnchor),
+      drawing.topAnchor.constraint(equalTo: preview.topAnchor),
+      drawing.bottomAnchor.constraint(equalTo: preview.bottomAnchor),
     ])
 
     imageView.onBoundsChanged = { [weak self] bounds in
       guard let self else { return }
       if self.cropMode { overlay.setImageBounds(bounds, resetCrop: false) }
       layers.setImageBounds(bounds)
+      drawing.setImageBounds(bounds)
     }
     overlay.onCropChanged = { left, top, right, bottom in
       session.update { $0.setCrop(left: left, top: top, right: right, bottom: bottom) }
     }
     layers.onLayerTapped = { [weak self] id in self?.selectLayer(id) }
+    layers.onLayerDoubleTapped = { [weak self] id in
+      guard let self, let layer = session.layerStack.layers.first(where: { $0.id == id && $0.type == .text }) else { return }
+      self.showTextInputDialog(session: session, editingLayer: layer)
+    }
     layers.onLayerTransformChanged = { [weak self] id, x, y, scale, rotation in
       guard let self, let session = self.photoSession else { return }
       if self.dragStartSnapshot == nil { self.dragStartSnapshot = session.layerStack.layers }
@@ -251,6 +257,10 @@ final class PhotoVideoEditorViewController: UIViewController {
     stickersBar.isHidden = true
     stickersSubBar = stickersBar
 
+    let drawBar = makeDrawSubBar(textColor: textColor, primaryColor: primaryColor, toolbarColor: toolbarColor)
+    drawBar.isHidden = true
+    drawSubBar = drawBar
+
     let layerSlider = UISlider()
     layerSlider.isHidden = true
     layerSlider.addTarget(self, action: #selector(layerPropertyChanged(_:)), for: .valueChanged)
@@ -267,7 +277,7 @@ final class PhotoVideoEditorViewController: UIViewController {
     let toolbar = makePhotoToolBar(textColor: textColor, toolbarColor: toolbarColor)
     mainToolBar = toolbar
 
-    let root = UIStackView(arrangedSubviews: [header, preview, straighten, cropBar, adjustmentSlider, filtersBar, stickersBar, layerSlider, colorSwatchRow, layerBar, toolbar])
+    let root = UIStackView(arrangedSubviews: [header, preview, straighten, cropBar, adjustmentSlider, filtersBar, stickersBar, drawBar, layerSlider, colorSwatchRow, layerBar, toolbar])
     root.axis = .vertical
     root.translatesAutoresizingMaskIntoConstraints = false
     view.addSubview(root)
@@ -281,6 +291,7 @@ final class PhotoVideoEditorViewController: UIViewController {
       cropBar.heightAnchor.constraint(equalToConstant: 100), // rotate row (44pt) + aspect chip row (56pt)
       filtersBar.heightAnchor.constraint(equalToConstant: 56),
       stickersBar.heightAnchor.constraint(equalToConstant: 56),
+      drawBar.heightAnchor.constraint(equalToConstant: 56),
       layerBar.heightAnchor.constraint(equalToConstant: 56),
       colorSwatchRow.heightAnchor.constraint(equalToConstant: 56),
     ])
@@ -377,9 +388,7 @@ final class PhotoVideoEditorViewController: UIViewController {
       ("filters", "Filters", "camera.filters"),
       ("text", "Text", "textformat"),
       ("stickers", "Stickers", "face.smiling"),
-      ("overlay", "Overlay", "photo.on.rectangle.angled"),
-      ("retouch", "Retouch", "wand.and.rays"),
-      ("layers", "Layers", "square.3.layers.3d"),
+      ("draw", "Draw", "pencil.tip"),
       ("resize", "Resize", "aspectratio"),
     ]
     let scroll = UIScrollView(); scroll.backgroundColor = toolbarColor
@@ -435,6 +444,7 @@ final class PhotoVideoEditorViewController: UIViewController {
     outer.addArrangedSubview(transformRow)
 
     let bar = UIStackView(); bar.axis = .horizontal; bar.alignment = .center
+    bar.addArrangedSubview(button("Cancel", color: textColor) { [weak self] in self?.cancelCropMode() })
     let scroll = UIScrollView()
     let presetStack = UIStackView(); presetStack.axis = .horizontal; presetStack.spacing = 4
     presets.forEach { label, ratio in
@@ -470,19 +480,18 @@ final class PhotoVideoEditorViewController: UIViewController {
     switch key {
     case "crop":
       setCropMode(true)
-    case "adjust", "filters", "retouch":
+    case "adjust", "filters":
       setFiltersMode(true, session: session)
     case "text":
       showTextInputDialog(session: session)
     case "stickers":
-      setStickersMode(true)
-    case "overlay":
-      presentImagePicker(purpose: .photoOverlay)
+      stickersMode = true
+      refreshPhotoToolSelection()
+      presentOnlineStickerSheet(purpose: .photoSticker)
+    case "draw":
+      setDrawMode(true, session: session)
     case "resize":
       setCropMode(true)
-    case "layers":
-      if let top = session.layerStack.layers.last { selectLayer(top.id) }
-      else { showToast("Add content to start a layer stack.") }
     default:
       showToast("\(key) is coming in a later milestone.")
     }
@@ -491,15 +500,15 @@ final class PhotoVideoEditorViewController: UIViewController {
   // MARK: - Layers: text, selection, and transform/duplicate/reorder/lock/hide/delete
   // with undo/redo (Milestone 4)
 
-  private func showTextInputDialog(session: PhotoEditSession) {
-    let alert = UIAlertController(title: "Add text", message: nil, preferredStyle: .alert)
-    alert.addTextField { $0.placeholder = "Text" }
+  private func showTextInputDialog(session: PhotoEditSession, editingLayer: PhotoLayer? = nil) {
+    let alert = UIAlertController(title: editingLayer == nil ? "Add text" : "Edit text", message: "Pinch to resize and rotate after adding.", preferredStyle: .alert)
+    alert.addTextField { $0.placeholder = "Text"; $0.text = editingLayer?.text; $0.textColor = editingLayer?.textColor ?? .white }
     alert.addAction(UIAlertAction(title: "Cancel", style: .cancel))
     alert.addAction(UIAlertAction(title: "Add", style: .default) { [weak self, weak alert] _ in
       guard let text = alert?.textFields?.first?.text, !text.trimmingCharacters(in: .whitespaces).isEmpty else { return }
-      var layer = PhotoLayer(type: .text)
+      var layer = editingLayer ?? PhotoLayer(type: .text)
       layer.text = text
-      session.layerStack.commit { $0 + [layer] }
+      session.layerStack.commit { list in editingLayer == nil ? list + [layer] : list.map { $0.id == layer.id ? layer : $0 } }
       self?.selectLayer(layer.id)
     })
     present(alert, animated: true)
@@ -537,11 +546,6 @@ final class PhotoVideoEditorViewController: UIViewController {
     chipStack.addArrangedSubview(button("Upload", color: textColor) { [weak self] in
       self?.presentImagePicker(purpose: .photoSticker)
     })
-    if features["onlineStickers"] as? Bool != false {
-      chipStack.addArrangedSubview(button("Browse", color: textColor) { [weak self] in
-        self?.presentOnlineStickerSheet(purpose: .photoSticker)
-      })
-    }
     scroll.addSubview(chipStack)
     chipStack.translatesAutoresizingMaskIntoConstraints = false
     NSLayoutConstraint.activate([
@@ -559,6 +563,71 @@ final class PhotoVideoEditorViewController: UIViewController {
     return bar
   }
 
+  private func setDrawMode(_ enabled: Bool, session: PhotoEditSession) {
+    drawMode = enabled
+    drawOverlay?.isHidden = !enabled
+    drawSubBar?.isHidden = !enabled
+    mainToolBar?.isHidden = enabled
+    layerOverlay?.isHidden = enabled
+    photoImageView?.panZoomEnabled = !enabled
+    if enabled {
+      drawOverlay?.strokeColor = .red
+      drawOverlay?.strokeWidthPx = 4
+      if let bounds = photoImageView?.currentImageBounds() { drawOverlay?.setImageBounds(bounds) }
+    } else {
+      commitDrawStrokes(session: session)
+      drawOverlay?.clearStrokes()
+    }
+    refreshPhotoToolSelection()
+  }
+
+  private func commitDrawStrokes(session: PhotoEditSession) {
+    guard let drawOverlay, drawOverlay.hasStrokes, let bounds = photoImageView?.currentImageBounds(), bounds.width > 0 else { return }
+    let shortSide = min(bounds.width, bounds.height)
+    let newLayers: [PhotoLayer] = drawOverlay.normalizedStrokes().compactMap { points, stroke in
+      guard points.count >= 2 else { return nil }
+      let centerX = points.reduce(0) { $0 + $1.0 } / CGFloat(points.count)
+      let centerY = points.reduce(0) { $0 + $1.1 } / CGFloat(points.count)
+      var layer = PhotoLayer(type: .drawing)
+      layer.x = centerX; layer.y = centerY
+      layer.drawColor = stroke.color
+      layer.drawStrokeWidth = stroke.widthPx / shortSide
+      layer.drawPoints = points.map { ($0.0 - centerX, $0.1 - centerY) }
+      return layer
+    }
+    if !newLayers.isEmpty { session.layerStack.commit { $0 + newLayers } }
+    onLayerStackChanged()
+  }
+
+  private func makeDrawSubBar(textColor: UIColor, primaryColor: UIColor, toolbarColor: UIColor) -> UIView {
+    let colors: [(String, UIColor)] = [("Red", .red), ("Yellow", .yellow), ("Green", .green), ("Blue", .systemBlue), ("White", .white), ("Black", .black)]
+    let bar = UIStackView(); bar.axis = .horizontal; bar.alignment = .center
+    let scroll = UIScrollView()
+    let controls = UIStackView(); controls.axis = .horizontal; controls.spacing = 4
+    colors.forEach { label, value in controls.addArrangedSubview(button(label, color: value) { [weak self] in self?.drawOverlay?.strokeColor = value }) }
+    controls.addArrangedSubview(button("Thin", color: textColor) { [weak self] in self?.drawOverlay?.strokeWidthPx = 2 })
+    controls.addArrangedSubview(button("Thick", color: textColor) { [weak self] in self?.drawOverlay?.strokeWidthPx = 10 })
+    controls.addArrangedSubview(button("Undo", color: textColor) { [weak self] in self?.drawOverlay?.undoLastStroke() })
+    controls.addArrangedSubview(button("Clear", color: textColor) { [weak self] in self?.drawOverlay?.clearStrokes() })
+    scroll.addSubview(controls); controls.translatesAutoresizingMaskIntoConstraints = false
+    NSLayoutConstraint.activate([
+      controls.leadingAnchor.constraint(equalTo: scroll.contentLayoutGuide.leadingAnchor, constant: 8),
+      controls.trailingAnchor.constraint(equalTo: scroll.contentLayoutGuide.trailingAnchor, constant: -8),
+      controls.topAnchor.constraint(equalTo: scroll.contentLayoutGuide.topAnchor),
+      controls.bottomAnchor.constraint(equalTo: scroll.contentLayoutGuide.bottomAnchor),
+      controls.heightAnchor.constraint(equalTo: scroll.frameLayoutGuide.heightAnchor),
+    ])
+    bar.addArrangedSubview(scroll)
+    bar.addArrangedSubview(button("Done", color: primaryColor) { [weak self] in
+      guard let self, let session = self.photoSession else { return }
+      self.setDrawMode(false, session: session)
+    })
+    bar.backgroundColor = toolbarColor
+    bar.isLayoutMarginsRelativeArrangement = true
+    bar.layoutMargins = UIEdgeInsets(top: 0, left: 12, bottom: 0, right: 12)
+    return bar
+  }
+
   private func consumerStickerAssets() -> [(id: String, uri: String)] {
     stickerAssets.compactMap { asset in
       guard let uri = asset["uri"] as? String, !uri.isEmpty else { return nil }
@@ -578,14 +647,24 @@ final class PhotoVideoEditorViewController: UIViewController {
     present(picker, animated: true)
   }
 
-  /// Presents the OpenMoji "Browse online" bottom sheet, reusing `handlePickedImage` as the
-  /// insertion point once the user picks a sticker — same shared path the Upload flow uses.
+  /// Presents the bundled sticker sheet, reusing `handlePickedImage` as the insertion point.
   private func presentOnlineStickerSheet(purpose: ImagePickPurpose) {
-    let sheet = OnlineStickerSheetViewController()
+    let runtimeStickers = consumerStickerAssets().map { OnlineStickerSheetViewController.RuntimeSticker(id: $0.id, uri: $0.uri) }
+    let sheet = OnlineStickerSheetViewController(runtimeStickers: runtimeStickers)
+    sheet.isModalInPresentation = false
+    sheet.onDismiss = { [weak self] in
+      if case .photoSticker = purpose {
+        self?.stickersMode = false
+        self?.refreshPhotoToolSelection()
+      }
+    }
     sheet.onStickerPicked = { [weak self] fileURL, image in
       self?.handlePickedImage(fileURL, image: image, purpose: purpose)
     }
     sheet.sheetPresentationController?.detents = [.medium(), .large()]
+    sheet.sheetPresentationController?.selectedDetentIdentifier = .large
+    sheet.sheetPresentationController?.prefersGrabberVisible = true
+    sheet.sheetPresentationController?.preferredCornerRadius = DesignTokens.radiusSheet
     present(sheet, animated: true)
   }
 
@@ -648,6 +727,7 @@ final class PhotoVideoEditorViewController: UIViewController {
       case "crop": selected = cropMode
       case "adjust", "filters": selected = filtersMode
       case "stickers": selected = stickersMode
+      case "draw": selected = drawMode
       default: selected = false
       }
       setToolNodeSelected(node, selected: selected, textColor: textColor)
@@ -1003,6 +1083,7 @@ final class PhotoVideoEditorViewController: UIViewController {
 
   private func setCropMode(_ enabled: Bool) {
     guard let imageView = photoImageView, let overlay = cropOverlay, let session = photoSession else { return }
+    if enabled && !cropMode { cropEntryState = session.state }
     cropMode = enabled
     imageView.panZoomEnabled = !enabled
     overlay.isHidden = !enabled
@@ -1013,6 +1094,10 @@ final class PhotoVideoEditorViewController: UIViewController {
     if enabled {
       imageView.resetToFit()
       overlay.setImageBounds(imageView.currentImageBounds(), resetCrop: session.state.isIdentity)
+      overlay.setCrop(left: session.state.cropLeft, top: session.state.cropTop, right: session.state.cropRight, bottom: session.state.cropBottom)
+      overlay.setAspectRatio(session.state.aspectRatio)
+    } else {
+      cropEntryState = nil
     }
     refreshPhotoToolSelection()
     let textColor = color("textColor") ?? DesignTokens.onSurface
@@ -1020,6 +1105,15 @@ final class PhotoVideoEditorViewController: UIViewController {
     refreshSelection(cropAspectButtons, activeKey: aspectRatioLabel(session.state.aspectRatio), textColor: textColor, primaryColor: primaryColor)
   }
 
+  private func cancelCropMode() {
+    guard let session = photoSession else { return }
+    if let snapshot = cropEntryState { session.update { $0 = snapshot } }
+    straightenSlider?.value = Float(cropEntryState?.straightenDegrees ?? 0)
+    cropEntryState = nil
+    schedulePhotoPreviewRender()
+    setCropMode(false)
+  }
+
   /// Maps an aspect ratio back to its preset label (matching the presets defined in `makeCropSubBar`/`makeVideoAspectSubBar`) so the correct chip can be highlighted.
   private func aspectRatioLabel(_ ratio: CGFloat?) -> String {
     guard let ratio else { return "Free" }
@@ -1051,6 +1145,7 @@ final class PhotoVideoEditorViewController: UIViewController {
       completion?(.failure(code: "E_INTERNAL", message: "Nothing to export."))
       return
     }
+    if drawMode { setDrawMode(false, session: session) }
     progressOverlay?.isHidden = false
     let state = session.state
     let adjustments = session.adjustments
@@ -1141,11 +1236,26 @@ final class PhotoVideoEditorViewController: UIViewController {
       self.onVideoLayerStackChanged()
     }
 
-    let playPause = button("Play", color: textColor) { [weak self] in
+    let playPause = UIButton(type: .system)
+    playPause.tintColor = textColor
+    playPause.setImage(UIImage(systemName: "play.fill"), for: .normal)
+    playPause.accessibilityLabel = "Play video"
+    playPause.addAction(UIAction { [weak self] _ in
       guard let self, let session = self.videoSession else { return }
-      // `.rate = x` (rather than `.play()`) so playback always resumes at the currently selected speed.
-      if session.player.timeControlStatus == .playing { session.player.pause() } else { session.player.rate = session.state.speed }
-    }
+      if session.player.timeControlStatus == .playing {
+        session.player.pause()
+      } else {
+        let current = CMTimeGetSeconds(session.player.currentTime())
+        let duration = Double(session.durationMs) / 1000
+        if current.isFinite, duration > 0, current >= duration - 0.05 {
+          session.player.seek(to: .zero) { finished in
+            if finished { session.player.rate = session.state.speed }
+          }
+        } else {
+          session.player.rate = session.state.speed
+        }
+      }
+    }, for: .touchUpInside)
     playPauseButton = playPause
     let time = UILabel()
     time.text = "0:00 / 0:00"
@@ -1229,7 +1339,9 @@ final class PhotoVideoEditorViewController: UIViewController {
     let toolbar = makeVideoToolBar(session: session, playerController: playerController, textColor: textColor, toolbarColor: toolbarColor)
     videoToolBar = toolbar
 
-    let root = UIStackView(arrangedSubviews: [header, preview, transport, position, trim, stripScroll, aspectBar, layerSlider, layerBar, toolbar])
+    // The editor is intentionally single-video: omit the multi-clip strip and
+    // its Split/Copy/Delete/Reorder controls from the visible layout.
+    let root = UIStackView(arrangedSubviews: [header, preview, transport, position, aspectBar, layerSlider, layerBar, toolbar])
     root.axis = .vertical
     root.translatesAutoresizingMaskIntoConstraints = false
     view.addSubview(root)
@@ -1283,7 +1395,9 @@ final class PhotoVideoEditorViewController: UIViewController {
         self.positionSlider?.value = Float(min(max(Double(currentMs) / Double(session.durationMs), 0), 1)) * 1000
         self.updateTimeLabel()
       }
-      self.playPauseButton?.setTitle(session.player.timeControlStatus == .playing ? "Pause" : "Play", for: .normal)
+      let playing = session.player.timeControlStatus == .playing
+      self.playPauseButton?.setImage(UIImage(systemName: playing ? "pause.fill" : "play.fill"), for: .normal)
+      self.playPauseButton?.accessibilityLabel = playing ? "Pause video" : "Play video"
       self.refreshVideoOverlayPreview(session: session)
     }
   }
@@ -1382,7 +1496,13 @@ final class PhotoVideoEditorViewController: UIViewController {
     videoLayerToolBar?.isHidden = !visible
     videoLayerPropertySlider?.isHidden = !visible
     videoToolBar?.isHidden = visible
-    if visible { syncVideoLayerPropertySlider(session: session) }
+    if visible {
+      if !["rotation", "opacity"].contains(activeVideoLayerPropertyKey) { activeVideoLayerPropertyKey = "rotation" }
+      syncVideoLayerPropertySlider(session: session)
+      let textColor = color("textColor") ?? DesignTokens.onSurface
+      let primaryColor = color("primaryColor") ?? DesignTokens.primaryContainer
+      refreshSelection(videoLayerPropertyButtons, activeKey: activeVideoLayerPropertyKey, textColor: textColor, primaryColor: primaryColor)
+    }
   }
 
   private func currentSelectedVideoLayer(session: VideoEditSession) -> PhotoLayer? {
@@ -1428,7 +1548,7 @@ final class PhotoVideoEditorViewController: UIViewController {
   }
 
   private func makeVideoLayerToolBar(session: VideoEditSession, textColor: UIColor, primaryColor: UIColor, toolbarColor: UIColor) -> UIView {
-    let properties: [(String, String)] = [("scale", "Scale"), ("rotation", "Rotate"), ("opacity", "Opacity"), ("start", "Start"), ("end", "End")]
+    let properties: [(String, String)] = [("rotation", "Rotate"), ("opacity", "Opacity")]
     let bar = UIStackView(); bar.axis = .horizontal; bar.alignment = .center
     let scroll = UIScrollView()
     let chipStack = UIStackView(); chipStack.axis = .horizontal; chipStack.spacing = 4
@@ -1496,8 +1616,7 @@ final class PhotoVideoEditorViewController: UIViewController {
 
   private func makeVideoToolBar(session: VideoEditSession, playerController: AVPlayerViewController, textColor: UIColor, toolbarColor: UIColor) -> UIView {
     let tools: [(String, String)] = [
-      ("cover", "Cover"), ("speed", "Speed 1x"), ("crop", "Crop"), ("rotate", "Rotate"),
-      ("filters", "Filters"), ("text", "Text"), ("stickers", "Stickers"), ("overlay", "Overlay"),
+      ("text", "Text"), ("stickers", "Stickers"),
     ]
     let scroll = UIScrollView(); scroll.backgroundColor = toolbarColor
     let stack = UIStackView(); stack.axis = .horizontal; stack.spacing = 8
@@ -1560,37 +1679,7 @@ final class PhotoVideoEditorViewController: UIViewController {
   }
 
   private func showVideoStickerPicker(session: VideoEditSession) {
-    let alert = UIAlertController(title: "Add sticker", message: nil, preferredStyle: .actionSheet)
-    PhotoLayerRenderer.builtinStickerIDs().forEach { id in
-      alert.addAction(UIAlertAction(title: PhotoLayerRenderer.glyph(for: id), style: .default) { [weak self] _ in
-        var layer = PhotoLayer(type: .sticker)
-        layer.stickerId = id
-        session.layerStack.commit { $0 + [layer] }
-        self?.onVideoLayerStackChanged()
-      })
-    }
-    consumerStickerAssets().forEach { asset in
-      alert.addAction(UIAlertAction(title: asset.id, style: .default) { [weak self] _ in
-        var layer = PhotoLayer(type: .sticker)
-        layer.stickerUri = asset.uri
-        session.layerStack.commit { $0 + [layer] }
-        self?.onVideoLayerStackChanged()
-      })
-    }
-    alert.addAction(UIAlertAction(title: "Upload", style: .default) { [weak self] _ in
-      self?.presentImagePicker(purpose: .videoSticker)
-    })
-    if features["onlineStickers"] as? Bool != false {
-      alert.addAction(UIAlertAction(title: "Browse online", style: .default) { [weak self] _ in
-        self?.presentOnlineStickerSheet(purpose: .videoSticker)
-      })
-    }
-    alert.addAction(UIAlertAction(title: "Cancel", style: .cancel))
-    if let popover = alert.popoverPresentationController {
-      popover.sourceView = view
-      popover.sourceRect = CGRect(x: view.bounds.midX, y: view.bounds.maxY - 1, width: 1, height: 1)
-    }
-    present(alert, animated: true)
+    presentOnlineStickerSheet(purpose: .videoSticker)
   }
 
   private func formatSpeedLabel(_ speed: Float) -> String {

package/ios/Photo/Rendering/PhotoLayer.swift

@@ -1,7 +1,7 @@
 import UIKit
 
 enum LayerType {
-  case text, sticker, overlay
+  case text, sticker, overlay, drawing
 }
 
 /// A single non-destructive overlay layer (text, sticker, or a user-uploaded
@@ -31,6 +31,10 @@ struct PhotoLayer {
   // Overlay (user-uploaded image, placed as a fully generic movable/resizable/rotatable layer)
   var overlayUri: String?
   var overlayAspectRatio: CGFloat?
+  // Drawing (points are normalized offsets from x/y)
+  var drawColor: UIColor = .red
+  var drawStrokeWidth: CGFloat = 0.012
+  var drawPoints: [(CGFloat, CGFloat)] = []
   // Timing (video overlays only; ignored for photo layers). endMs <= 0 means "to end of video".
   var startMs: Int64 = 0
   var endMs: Int64 = 0

package/ios/Photo/Rendering/PhotoLayerRenderer.swift

@@ -29,6 +29,7 @@ enum PhotoLayerRenderer {
         case .text: drawText(layer, shortSide: geometry.shortSide)
         case .sticker: drawSticker(layer, shortSide: geometry.shortSide, resolver: imageResolver)
         case .overlay: drawOverlay(layer, canvasWidth: base.size.width, resolver: imageResolver)
+        case .drawing: drawStroke(ctx, layer, width: base.size.width, height: base.size.height, shortSide: geometry.shortSide)
         }
         ctx.restoreGState()
       }
@@ -80,6 +81,19 @@ enum PhotoLayerRenderer {
     image.draw(in: rect, blendMode: .normal, alpha: layer.opacity)
   }
 
+  private static func drawStroke(_ ctx: CGContext, _ layer: PhotoLayer, width: CGFloat, height: CGFloat, shortSide: CGFloat) {
+    guard layer.drawPoints.count >= 2 else { return }
+    ctx.setAlpha(layer.opacity)
+    ctx.setStrokeColor(layer.drawColor.cgColor)
+    ctx.setLineWidth(layer.drawStrokeWidth * shortSide)
+    ctx.setLineCap(.round)
+    ctx.setLineJoin(.round)
+    let points = layer.drawPoints.map { CGPoint(x: $0.0 * width, y: $0.1 * height) }
+    ctx.move(to: points[0])
+    points.dropFirst().forEach { ctx.addLine(to: $0) }
+    ctx.strokePath()
+  }
+
 }
 
 private extension NSAttributedString {

package/ios/Photo/UI/CropOverlayView.swift

@@ -12,10 +12,11 @@ final class CropOverlayView: UIView {
 
   private let dimLayer = CAShapeLayer()
   private let borderLayer = CAShapeLayer()
+  private let handlesLayer = CAShapeLayer()
   private let handleRadius: CGFloat = 32
   private let minSize: CGFloat = 60
 
-  private enum Handle { case move, topLeft, topRight, bottomLeft, bottomRight }
+  private enum Handle { case move, top, right, bottom, left, topLeft, topRight, bottomLeft, bottomRight }
   private var activeHandle: Handle?
   private var lastPoint: CGPoint = .zero
 
@@ -29,6 +30,8 @@ final class CropOverlayView: UIView {
     borderLayer.fillColor = UIColor.clear.cgColor
     borderLayer.lineWidth = 2
     layer.addSublayer(borderLayer)
+    handlesLayer.fillColor = UIColor.white.cgColor
+    layer.addSublayer(handlesLayer)
   }
 
   required init?(coder: NSCoder) { nil }
@@ -43,6 +46,18 @@ final class CropOverlayView: UIView {
     setNeedsLayout()
   }
 
+  /// Restores a normalized crop rectangle, used when reopening or cancelling crop mode.
+  func setCrop(left: CGFloat, top: CGFloat, right: CGFloat, bottom: CGFloat) {
+    guard imageBounds.width > 0, imageBounds.height > 0 else { return }
+    cropRect = CGRect(
+      x: imageBounds.minX + left * imageBounds.width,
+      y: imageBounds.minY + top * imageBounds.height,
+      width: (right - left) * imageBounds.width,
+      height: (bottom - top) * imageBounds.height
+    )
+    clampToImageBounds(); setNeedsLayout()
+  }
+
   func setAspectRatio(_ ratio: CGFloat?) {
     aspectRatio = ratio
     if let ratio, imageBounds.width > 0, imageBounds.height > 0 {
@@ -79,6 +94,16 @@ final class CropOverlayView: UIView {
       borderPath.addLine(to: CGPoint(x: cropRect.maxX, y: y))
     }
     borderLayer.path = borderPath.cgPath
+
+    let handlesPath = UIBezierPath()
+    let points = [
+      CGPoint(x: cropRect.minX, y: cropRect.minY), CGPoint(x: cropRect.midX, y: cropRect.minY),
+      CGPoint(x: cropRect.maxX, y: cropRect.minY), CGPoint(x: cropRect.maxX, y: cropRect.midY),
+      CGPoint(x: cropRect.maxX, y: cropRect.maxY), CGPoint(x: cropRect.midX, y: cropRect.maxY),
+      CGPoint(x: cropRect.minX, y: cropRect.maxY), CGPoint(x: cropRect.minX, y: cropRect.midY),
+    ]
+    points.forEach { point in handlesPath.append(UIBezierPath(ovalIn: CGRect(x: point.x - 4, y: point.y - 4, width: 8, height: 8))) }
+    handlesLayer.path = handlesPath.cgPath
   }
 
   override func touchesBegan(_ touches: Set<UITouch>, with event: UIEvent?) {
@@ -108,6 +133,10 @@ final class CropOverlayView: UIView {
     if near(CGPoint(x: cropRect.maxX, y: cropRect.minY)) { return .topRight }
     if near(CGPoint(x: cropRect.minX, y: cropRect.maxY)) { return .bottomLeft }
     if near(CGPoint(x: cropRect.maxX, y: cropRect.maxY)) { return .bottomRight }
+    if near(CGPoint(x: cropRect.midX, y: cropRect.minY)) { return .top }
+    if near(CGPoint(x: cropRect.maxX, y: cropRect.midY)) { return .right }
+    if near(CGPoint(x: cropRect.midX, y: cropRect.maxY)) { return .bottom }
+    if near(CGPoint(x: cropRect.minX, y: cropRect.midY)) { return .left }
     if cropRect.contains(point) { return .move }
     return nil
   }
@@ -125,6 +154,10 @@ final class CropOverlayView: UIView {
       rect = CGRect(x: rect.minX + dx, y: rect.minY, width: rect.width - dx, height: rect.height + dy)
     case .bottomRight:
       rect = CGRect(x: rect.minX, y: rect.minY, width: rect.width + dx, height: rect.height + dy)
+    case .top: rect = CGRect(x: rect.minX, y: rect.minY + dy, width: rect.width, height: rect.height - dy)
+    case .right: rect.size.width += dx
+    case .bottom: rect.size.height += dy
+    case .left: rect = CGRect(x: rect.minX + dx, y: rect.minY, width: rect.width - dx, height: rect.height)
     }
     guard rect.width >= minSize, rect.height >= minSize else { return }
     if let ratio = aspectRatio {
@@ -137,6 +170,10 @@ final class CropOverlayView: UIView {
         rect.size.height = newHeight
       case .move:
         break
+      case .left, .right:
+        let centerY = cropRect.midY; rect.size.height = rect.width / ratio; rect.origin.y = centerY - rect.height / 2
+      case .top, .bottom:
+        let centerX = cropRect.midX; rect.size.width = rect.height * ratio; rect.origin.x = centerX - rect.width / 2
       }
     }
     cropRect = rect

package/ios/Photo/UI/DrawOverlayView.swift

@@ -0,0 +1,48 @@
+import UIKit
+
+struct DrawStroke {
+  var points: [CGPoint]
+  let color: UIColor
+  let widthPx: CGFloat
+}
+
+/** Captures freehand strokes over the visible image while Draw mode is active. */
+final class DrawOverlayView: UIView {
+  private var imageBounds: CGRect = .zero
+  var strokeColor: UIColor = .red
+  var strokeWidthPx: CGFloat = 12
+  private var strokes: [DrawStroke] = []
+  private var currentIndex: Int?
+
+  override init(frame: CGRect) { super.init(frame: frame); backgroundColor = .clear; isOpaque = false }
+  required init?(coder: NSCoder) { nil }
+  func setImageBounds(_ bounds: CGRect) { imageBounds = bounds }
+  func clearStrokes() { strokes.removeAll(); currentIndex = nil; setNeedsDisplay() }
+  func undoLastStroke() { if !strokes.isEmpty { strokes.removeLast() }; setNeedsDisplay() }
+  var hasStrokes: Bool { !strokes.isEmpty }
+  func normalizedStrokes() -> [(points: [(CGFloat, CGFloat)], stroke: DrawStroke)] {
+    guard imageBounds.width > 0, imageBounds.height > 0 else { return [] }
+    return strokes.map { stroke in
+      (stroke.points.map { (($0.x - imageBounds.minX) / imageBounds.width, ($0.y - imageBounds.minY) / imageBounds.height) }, stroke)
+    }
+  }
+
+  override func draw(_ rect: CGRect) {
+    guard let ctx = UIGraphicsGetCurrentContext() else { return }
+    ctx.setLineCap(.round); ctx.setLineJoin(.round)
+    for stroke in strokes where stroke.points.count >= 2 {
+      ctx.setStrokeColor(stroke.color.cgColor); ctx.setLineWidth(stroke.widthPx)
+      ctx.move(to: stroke.points[0]); stroke.points.dropFirst().forEach { ctx.addLine(to: $0) }; ctx.strokePath()
+    }
+  }
+  override func touchesBegan(_ touches: Set<UITouch>, with event: UIEvent?) {
+    guard let point = touches.first?.location(in: self), imageBounds.contains(point) else { return }
+    strokes.append(DrawStroke(points: [point], color: strokeColor, widthPx: strokeWidthPx)); currentIndex = strokes.count - 1; setNeedsDisplay()
+  }
+  override func touchesMoved(_ touches: Set<UITouch>, with event: UIEvent?) {
+    guard let index = currentIndex, let point = touches.first?.location(in: self) else { return }
+    strokes[index].points.append(point); setNeedsDisplay()
+  }
+  override func touchesEnded(_ touches: Set<UITouch>, with event: UIEvent?) { currentIndex = nil }
+  override func touchesCancelled(_ touches: Set<UITouch>, with event: UIEvent?) { currentIndex = nil }
+}

package/ios/Photo/UI/LayerOverlayView.swift

@@ -9,6 +9,7 @@ final class LayerOverlayView: UIView {
   var layers: [PhotoLayer] = [] { didSet { setNeedsDisplay() } }
   var selectedLayerID: String? { didSet { setNeedsDisplay() } }
   var onLayerTapped: ((String?) -> Void)?
+  var onLayerDoubleTapped: ((String) -> Void)?
   var onLayerTransformChanged: ((_ id: String, _ x: CGFloat, _ y: CGFloat, _ scale: CGFloat, _ rotationDegrees: CGFloat) -> Void)?
   var onLayerTransformEnded: ((String) -> Void)?
 
@@ -107,7 +108,10 @@ final class LayerOverlayView: UIView {
     }
   }
 
-  override func touchesEnded(_ touches: Set<UITouch>, with event: UIEvent?) { endTouches(touches) }
+  override func touchesEnded(_ touches: Set<UITouch>, with event: UIEvent?) {
+    if let touch = touches.first, touch.tapCount >= 2, let id = gestureID { onLayerDoubleTapped?(id) }
+    endTouches(touches)
+  }
   override func touchesCancelled(_ touches: Set<UITouch>, with event: UIEvent?) { endTouches(touches) }
 
   private func endTouches(_ touches: Set<UITouch>) {
@@ -146,6 +150,10 @@ final class LayerOverlayView: UIView {
       // Mirrors `PhotoLayerRenderer.drawOverlay`'s box: full canvas width, height from aspect ratio.
       let aspectRatio = layer.overlayAspectRatio.flatMap { $0 > 0 ? $0 : nil } ?? 1
       base = CGSize(width: imageBounds.width / 2, height: imageBounds.width / (2 * aspectRatio))
+    case .drawing:
+      let maxX = layer.drawPoints.map { abs($0.0) }.max() ?? 0.08
+      let maxY = layer.drawPoints.map { abs($0.1) }.max() ?? 0.08
+      base = CGSize(width: maxX * imageBounds.width + handleRadius, height: maxY * imageBounds.height + handleRadius)
     }
     return CGSize(width: max(handleRadius, base.width * layer.scale), height: max(handleRadius, base.height * layer.scale))
   }