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

package/ios/Editor/UI/CropPanel.swift

@@ -0,0 +1,97 @@
+import UIKit
+
+/// Shared compact photo/video crop panel. Draft edits remain in the session, never in this view.
+final class CropPanel: UIStackView {
+  private let slider = CropRulerSlider()
+  private let degrees = UILabel()
+  private var presets: [String:UIButton] = [:]
+  private let accent: UIColor
+  private let foreground: UIColor
+
+  init(accent: UIColor, surface: UIColor, foreground: UIColor, originalRatio: @escaping () -> CGFloat,
+       onReset: @escaping () -> Void, onDone: @escaping () -> Void, onCancel: @escaping () -> Void,
+       onStraighten: @escaping (CGFloat) -> Void, onRotate: @escaping () -> Void,
+       onRatio: @escaping (String, CGFloat?) -> Void) {
+    self.accent = accent; self.foreground = foreground
+    super.init(frame:.zero)
+    axis = .vertical; backgroundColor = surface
+    layer.cornerRadius = 20; layer.maskedCorners = [.layerMinXMinYCorner,.layerMaxXMinYCorner]
+    isLayoutMarginsRelativeArrangement = true; layoutMargins = UIEdgeInsets(top:8,left:12,bottom:8,right:12)
+    func icon(_ symbol: String, label: String, action: @escaping () -> Void) -> UIButton {
+      let button = UIButton(type:.system)
+      button.setImage(UIImage(systemName:symbol),for:.normal); button.tintColor = foreground; button.accessibilityLabel = label
+      button.widthAnchor.constraint(equalToConstant:44).isActive = true
+      button.addAction(UIAction { _ in action() },for:.touchUpInside); button.applyPressScale()
+      return button
+    }
+    let reset = UIButton(type:.system)
+    var resetStyle = UIButton.Configuration.plain(); resetStyle.title = "Reset"; resetStyle.image = UIImage(systemName:"arrow.counterclockwise")
+    resetStyle.imagePadding = 6; resetStyle.baseForegroundColor = foreground
+    reset.configuration = resetStyle; reset.addAction(UIAction { _ in onReset() },for:.touchUpInside)
+    reset.widthAnchor.constraint(equalToConstant:88).isActive = true
+    let title = UILabel(); title.text = "Crop"; title.font = .systemFont(ofSize:17,weight:.semibold); title.textColor = foreground; title.textAlignment = .center
+    let done = icon("checkmark",label:"Apply crop",action:onDone); done.tintColor = accent
+    let header = UIStackView(arrangedSubviews:[reset,title,icon("xmark",label:"Cancel crop",action:onCancel),done]); header.axis = .horizontal
+    header.heightAnchor.constraint(equalToConstant:48).isActive = true; addArrangedSubview(header)
+    let label = UILabel(); label.text = "Straighten"; label.font = .systemFont(ofSize:13); label.textColor = foreground
+    degrees.font = .monospacedDigitSystemFont(ofSize:13,weight:.medium); degrees.textColor = accent; degrees.textAlignment = .center
+    degrees.widthAnchor.constraint(equalToConstant:56).isActive = true
+    let labels = UIStackView(arrangedSubviews:[label,degrees,icon("arrow.counterclockwise",label:"Reset straighten") { onStraighten(0) },icon("rotate.right",label:"Rotate 90 degrees",action:onRotate)])
+    labels.axis = .horizontal; labels.heightAnchor.constraint(equalToConstant:44).isActive = true; addArrangedSubview(labels)
+    slider.minimumValue = -45; slider.maximumValue = 45; slider.minimumTrackTintColor = accent; slider.thumbTintColor = accent
+    slider.accessibilityLabel = "Straighten"
+    slider.addAction(UIAction { [weak slider] _ in if let slider { onStraighten(CGFloat((slider.value*10).rounded()/10)) } },for:.valueChanged)
+    slider.heightAnchor.constraint(equalToConstant:48).isActive = true; addArrangedSubview(slider)
+    let rail = UIStackView(); rail.axis = .horizontal
+    let ratios: [(String,CGFloat?)] = [("Free",nil),("Original",nil),("1:1",1),("9:16",9/16),("16:9",16/9),("10:16",10/16),("16:10",16/10),("4:5",4/5),("5:4",5/4),("3:4",3/4),("4:3",4/3)]
+    for (name,ratio) in ratios {
+      let control = UIButton(type:.system)
+      var config = UIButton.Configuration.plain(); config.title = name; config.imagePlacement = .top; config.imagePadding = 6
+      config.baseForegroundColor = foreground
+      config.titleTextAttributesTransformer = UIConfigurationTextAttributesTransformer { value in var output = value; output.font = .systemFont(ofSize:11); return output }
+      let aspect = name == "Original" ? max(0.01,originalRatio()) : ratio ?? 1.25
+      config.image = UIGraphicsImageRenderer(size:CGSize(width:30,height:30)).image { _ in
+        let w = min(24,24*aspect), h = w/aspect
+        let path = UIBezierPath(roundedRect:CGRect(x:(30-w)/2,y:(30-h)/2,width:w,height:h),cornerRadius:2)
+        UIColor.white.setStroke(); path.lineWidth = 1.5; path.stroke()
+      }.withRenderingMode(.alwaysTemplate)
+      control.configuration = config; control.layer.cornerRadius = 12
+      control.accessibilityLabel = "\(name) crop ratio"
+      control.widthAnchor.constraint(equalToConstant:64).isActive = true
+      control.addAction(UIAction { _ in onRatio(name,name == "Original" ? originalRatio() : ratio) },for:.touchUpInside)
+      control.applyPressScale(); rail.addArrangedSubview(control); presets[name] = control
+    }
+    let scroll = UIScrollView(); scroll.showsHorizontalScrollIndicator = false; scroll.addSubview(rail)
+    rail.translatesAutoresizingMaskIntoConstraints = false
+    NSLayoutConstraint.activate([
+      rail.leadingAnchor.constraint(equalTo:scroll.contentLayoutGuide.leadingAnchor), rail.trailingAnchor.constraint(equalTo:scroll.contentLayoutGuide.trailingAnchor),
+      rail.topAnchor.constraint(equalTo:scroll.contentLayoutGuide.topAnchor),rail.bottomAnchor.constraint(equalTo:scroll.contentLayoutGuide.bottomAnchor),
+      rail.heightAnchor.constraint(equalTo:scroll.frameLayoutGuide.heightAnchor), scroll.heightAnchor.constraint(equalToConstant:72)
+    ])
+    addArrangedSubview(scroll)
+  }
+  required init(coder:NSCoder) { fatalError("init(coder:) has not been implemented") }
+  func sync(_ state: PhotoTransformState) {
+    slider.value = Float(state.straightenDegrees); degrees.text = String(format:"%.1f°",Double(state.straightenDegrees))
+    for (name,control) in presets {
+      let selected = name == state.aspectPreset
+      control.configuration?.baseForegroundColor = selected ? accent : foreground
+      control.backgroundColor = selected ? accent.withAlphaComponent(0.13) : .clear
+      control.accessibilityTraits = selected ? [.button,.selected] : .button
+    }
+  }
+}
+
+private final class CropRulerSlider: UISlider {
+  override func draw(_ rect:CGRect) {
+    if let context = UIGraphicsGetCurrentContext() {
+      context.setLineWidth(0.5)
+      for i in 0...90 {
+        let x = 12+(bounds.width-24)*CGFloat(i)/90
+        context.setStrokeColor(UIColor.white.withAlphaComponent(i % 5 == 0 ? 0.5 : 0.2).cgColor)
+        context.move(to:CGPoint(x:x,y:2)); context.addLine(to:CGPoint(x:x,y:i % 5 == 0 ? 12 : 7)); context.strokePath()
+      }
+    }
+    super.draw(rect)
+  }
+}

package/ios/Editor/UI/EditorPanel.swift

@@ -0,0 +1,334 @@
+import UIKit
+
+/// Shared building blocks for the editor's bottom panels (Crop / Adjust / Filters / Text / Stickers).
+/// Mirrors `EditorPanel.kt` — keep the two in step so the platforms don't drift apart again.
+///
+/// Before this existed, Adjust and Filters shared one bar of plain text buttons. Every panel now
+/// composes the same three pieces — `editorPanelHeader`, one slider, one strip — so heights,
+/// padding, radii, typography and selected states stay consistent.
+enum EditorPanelMetrics {
+  static let headerHeight: CGFloat = 40
+  static let sliderHeight: CGFloat = 48
+  static let stripHeight: CGFloat = 76
+  static let stripItemWidth: CGFloat = 68
+  static let iconSize: CGFloat = 22
+  static let thumbnailWidth: CGFloat = 64
+  static let thumbnailHeight: CGFloat = 72
+  static var totalHeight: CGFloat { headerHeight + sliderHeight + stripHeight }
+}
+
+/// Compact panel header: `Title            [Reset]  Done`.
+/// "Done" is an action, not a tool — it gets a 44pt touch target while staying visually small.
+func editorPanelHeader(
+  title: String,
+  accentColor: UIColor,
+  secondaryLabel: String? = nil,
+  onSecondary: (() -> Void)? = nil,
+  onDone: @escaping () -> Void
+) -> UIView {
+  let titleLabel = UILabel()
+  titleLabel.text = title
+  titleLabel.font = .systemFont(ofSize: 14, weight: .bold)
+  titleLabel.textColor = DesignTokens.textPrimary
+
+  let row = UIStackView(arrangedSubviews: [titleLabel])
+  row.axis = .horizontal
+  row.alignment = .center
+  row.spacing = DesignTokens.spaceSm
+  row.isLayoutMarginsRelativeArrangement = true
+  row.layoutMargins = UIEdgeInsets(top: 0, left: DesignTokens.spaceLg, bottom: 0, right: DesignTokens.spaceSm)
+
+  let spacer = UIView()
+  spacer.setContentHuggingPriority(.defaultLow, for: .horizontal)
+  row.addArrangedSubview(spacer)
+
+  if let secondaryLabel, let onSecondary {
+    row.addArrangedSubview(editorHeaderAction(label: secondaryLabel, color: DesignTokens.textSecondary, action: onSecondary))
+  }
+  row.addArrangedSubview(editorHeaderAction(label: "Done", color: accentColor, action: onDone))
+  return row
+}
+
+/// Small text action sized for touch (44pt) without looking like a button.
+private func editorHeaderAction(label: String, color: UIColor, action: @escaping () -> Void) -> UIButton {
+  let control = UIButton(type: .system)
+  var config = UIButton.Configuration.plain()
+  config.title = label
+  config.baseForegroundColor = color
+  config.contentInsets = NSDirectionalEdgeInsets(top: 0, leading: DesignTokens.spaceMd, bottom: 0, trailing: DesignTokens.spaceMd)
+  config.titleTextAttributesTransformer = UIConfigurationTextAttributesTransformer { incoming in
+    var value = incoming; value.font = .systemFont(ofSize: 13, weight: .bold); return value
+  }
+  control.configuration = config
+  control.widthAnchor.constraint(greaterThanOrEqualToConstant: DesignTokens.touchTargetMin).isActive = true
+  control.heightAnchor.constraint(equalToConstant: DesignTokens.touchTargetMin).isActive = true
+  control.addAction(UIAction { _ in action() }, for: .touchUpInside)
+  control.applyPressScale()
+  return control
+}
+
+/// Horizontally scrollable strip; the container every panel's list sits in.
+func editorToolStrip(_ content: UIStackView) -> UIScrollView {
+  let scroll = UIScrollView()
+  scroll.showsHorizontalScrollIndicator = false
+  content.axis = .horizontal
+  content.alignment = .center
+  scroll.addSubview(content)
+  content.translatesAutoresizingMaskIntoConstraints = false
+  NSLayoutConstraint.activate([
+    content.leadingAnchor.constraint(equalTo: scroll.contentLayoutGuide.leadingAnchor, constant: DesignTokens.spaceMd),
+    content.trailingAnchor.constraint(equalTo: scroll.contentLayoutGuide.trailingAnchor, constant: -DesignTokens.spaceMd),
+    content.topAnchor.constraint(equalTo: scroll.contentLayoutGuide.topAnchor),
+    content.bottomAnchor.constraint(equalTo: scroll.contentLayoutGuide.bottomAnchor),
+    content.heightAnchor.constraint(equalTo: scroll.frameLayoutGuide.heightAnchor),
+  ])
+  return scroll
+}
+
+/// An icon + single-line label entry in a strip, with an optional "value changed" dot.
+final class EditorStripItem {
+  let root: UIView
+  private let iconHolder: UIView
+  private let icon: UIImageView
+  private let label: UILabel
+  private let dot: UIView
+
+  init(root: UIView, iconHolder: UIView, icon: UIImageView, label: UILabel, dot: UIView) {
+    self.root = root
+    self.iconHolder = iconHolder
+    self.icon = icon
+    self.label = label
+    self.dot = dot
+  }
+
+  /// Selected state is a purple icon + label over a faint purple disc — never a filled purple tile,
+  /// which at this size reads as a giant button rather than a selection.
+  func setSelected(_ selected: Bool, accentColor: UIColor) {
+    icon.tintColor = selected ? accentColor : DesignTokens.textSecondary
+    label.textColor = selected ? accentColor : DesignTokens.textSecondary
+    iconHolder.backgroundColor = selected ? accentColor.withAlphaComponent(0.18) : .clear
+  }
+
+  /// Tiny dot marking an adjustment that is no longer at its default value.
+  func setModified(_ modified: Bool, accentColor: UIColor) {
+    dot.isHidden = !modified
+    dot.backgroundColor = accentColor
+  }
+}
+
+func editorStripItem(systemName: String, labelText: String, action: @escaping () -> Void) -> EditorStripItem {
+  let icon = UIImageView(image: UIImage(systemName: systemName, withConfiguration: UIImage.SymbolConfiguration(pointSize: 17, weight: .regular)))
+  icon.tintColor = DesignTokens.textSecondary
+  icon.contentMode = .scaleAspectFit
+
+  let iconHolder = UIView()
+  iconHolder.layer.cornerRadius = 16
+  iconHolder.addSubview(icon)
+  icon.translatesAutoresizingMaskIntoConstraints = false
+  NSLayoutConstraint.activate([
+    iconHolder.widthAnchor.constraint(equalToConstant: 32),
+    iconHolder.heightAnchor.constraint(equalToConstant: 32),
+    icon.centerXAnchor.constraint(equalTo: iconHolder.centerXAnchor),
+    icon.centerYAnchor.constraint(equalTo: iconHolder.centerYAnchor),
+    icon.widthAnchor.constraint(equalToConstant: EditorPanelMetrics.iconSize),
+    icon.heightAnchor.constraint(equalToConstant: EditorPanelMetrics.iconSize),
+  ])
+
+  let label = UILabel()
+  label.text = labelText
+  label.font = .systemFont(ofSize: 11, weight: .medium)
+  label.textColor = DesignTokens.textSecondary
+  label.textAlignment = .center
+  // Labels like "Brightness" and "Saturation" must never wrap to a second line.
+  label.numberOfLines = 1
+  label.adjustsFontSizeToFitWidth = true
+  label.minimumScaleFactor = 0.85
+
+  let dot = UIView()
+  dot.layer.cornerRadius = 2
+  dot.isHidden = true
+  dot.widthAnchor.constraint(equalToConstant: 4).isActive = true
+  dot.heightAnchor.constraint(equalToConstant: 4).isActive = true
+
+  let column = UIStackView(arrangedSubviews: [iconHolder, label, dot])
+  column.axis = .vertical
+  column.alignment = .center
+  column.spacing = DesignTokens.spaceXs
+
+  let root = UIView()
+  root.addSubview(column)
+  column.translatesAutoresizingMaskIntoConstraints = false
+  NSLayoutConstraint.activate([
+    root.widthAnchor.constraint(equalToConstant: EditorPanelMetrics.stripItemWidth),
+    column.centerXAnchor.constraint(equalTo: root.centerXAnchor),
+    column.centerYAnchor.constraint(equalTo: root.centerYAnchor),
+    column.leadingAnchor.constraint(greaterThanOrEqualTo: root.leadingAnchor),
+    column.trailingAnchor.constraint(lessThanOrEqualTo: root.trailingAnchor),
+  ])
+  root.isAccessibilityElement = true
+  root.accessibilityLabel = labelText
+  root.accessibilityTraits = .button
+  root.addGestureRecognizer(ClosureTapGestureRecognizer(action: action))
+  root.applyPressScale()
+  return EditorStripItem(root: root, iconHolder: iconHolder, icon: icon, label: label, dot: dot)
+}
+
+/// Filter thumbnail: a preview of the current photo, outlined in purple when selected.
+/// A thin outline rather than a filled container, so the photo stays readable.
+final class EditorFilterThumbnail {
+  let root: UIView
+  let image: UIImageView
+  private let frame: UIView
+  private let label: UILabel
+
+  init(root: UIView, image: UIImageView, frame: UIView, label: UILabel) {
+    self.root = root
+    self.image = image
+    self.frame = frame
+    self.label = label
+  }
+
+  func setSelected(_ selected: Bool, accentColor: UIColor) {
+    frame.layer.borderColor = (selected ? accentColor : UIColor.clear).cgColor
+    frame.layer.borderWidth = 2
+    label.textColor = selected ? accentColor : DesignTokens.textSecondary
+  }
+}
+
+func editorFilterThumbnail(labelText: String, action: @escaping () -> Void) -> EditorFilterThumbnail {
+  let image = UIImageView()
+  image.contentMode = .scaleAspectFill
+  image.clipsToBounds = true
+  image.layer.cornerRadius = DesignTokens.radiusMd
+  image.backgroundColor = DesignTokens.surfaceContainerHigh
+
+  // The outline lives on a frame *around* the image so the stroke never crops the preview.
+  let frame = UIView()
+  frame.layer.cornerRadius = DesignTokens.radiusMd + 2
+  frame.addSubview(image)
+  image.translatesAutoresizingMaskIntoConstraints = false
+  NSLayoutConstraint.activate([
+    image.widthAnchor.constraint(equalToConstant: EditorPanelMetrics.thumbnailWidth),
+    image.heightAnchor.constraint(equalToConstant: EditorPanelMetrics.thumbnailHeight),
+    image.leadingAnchor.constraint(equalTo: frame.leadingAnchor, constant: 2),
+    image.trailingAnchor.constraint(equalTo: frame.trailingAnchor, constant: -2),
+    image.topAnchor.constraint(equalTo: frame.topAnchor, constant: 2),
+    image.bottomAnchor.constraint(equalTo: frame.bottomAnchor, constant: -2),
+  ])
+
+  let label = UILabel()
+  label.text = labelText
+  label.font = .systemFont(ofSize: 11, weight: .medium)
+  label.textColor = DesignTokens.textSecondary
+  label.textAlignment = .center
+  label.numberOfLines = 1
+  label.adjustsFontSizeToFitWidth = true
+  label.minimumScaleFactor = 0.8
+
+  let column = UIStackView(arrangedSubviews: [frame, label])
+  column.axis = .vertical
+  column.alignment = .center
+  column.spacing = DesignTokens.spaceXs
+
+  let root = UIView()
+  root.addSubview(column)
+  column.translatesAutoresizingMaskIntoConstraints = false
+  NSLayoutConstraint.activate([
+    root.widthAnchor.constraint(equalToConstant: EditorPanelMetrics.thumbnailWidth + 12),
+    column.centerXAnchor.constraint(equalTo: root.centerXAnchor),
+    column.centerYAnchor.constraint(equalTo: root.centerYAnchor),
+    label.widthAnchor.constraint(equalTo: root.widthAnchor),
+  ])
+  root.isAccessibilityElement = true
+  root.accessibilityLabel = labelText
+  root.accessibilityTraits = .button
+  root.addGestureRecognizer(ClosureTapGestureRecognizer(action: action))
+  root.applyPressScale()
+  return EditorFilterThumbnail(root: root, image: image, frame: frame, label: label)
+}
+
+/// The editor's one slider: a `Label ......... value` line above a thin track, so a panel never
+/// needs a separate caption row and the same instance can be re-pointed at whichever adjustment is
+/// selected. Mirrors `EditorToolSlider.kt`.
+final class EditorValueSlider: UIView {
+  let slider = UISlider()
+  private let titleLabel = UILabel()
+  private let valueLabel = UILabel()
+  private let neutralTick = UIView()
+
+  /// Value at which the underlying adjustment is neutral, for bipolar ranges. When set, a tick is
+  /// drawn there so it is obvious where "no change" sits.
+  var neutralValue: Float? {
+    didSet { updateNeutralTick() }
+  }
+
+  var titleText: String? {
+    get { titleLabel.text }
+    set { titleLabel.text = newValue }
+  }
+
+  var valueText: String? {
+    get { valueLabel.text }
+    set { valueLabel.text = newValue }
+  }
+
+  init(accentColor: UIColor) {
+    super.init(frame: .zero)
+    titleLabel.font = .systemFont(ofSize: 12, weight: .medium)
+    titleLabel.textColor = DesignTokens.textSecondary
+    valueLabel.font = .monospacedDigitSystemFont(ofSize: 12, weight: .medium)
+    valueLabel.textColor = DesignTokens.textSecondary
+    valueLabel.textAlignment = .right
+
+    slider.minimumTrackTintColor = accentColor
+    slider.maximumTrackTintColor = UIColor.white.withAlphaComponent(0.28)
+    if let thumb = UIImage(systemName: "circle.fill")?.withConfiguration(UIImage.SymbolConfiguration(pointSize: 12)) {
+      slider.setThumbImage(thumb.withTintColor(.white, renderingMode: .alwaysOriginal), for: .normal)
+    }
+
+    neutralTick.backgroundColor = DesignTokens.textSubtle
+    neutralTick.isHidden = true
+    // Sits above the track (added last) but must never swallow a drag toward it.
+    neutralTick.isUserInteractionEnabled = false
+
+    let caption = UIStackView(arrangedSubviews: [titleLabel, valueLabel])
+    caption.axis = .horizontal
+    caption.distribution = .fill
+    valueLabel.setContentHuggingPriority(.required, for: .horizontal)
+
+    let column = UIStackView(arrangedSubviews: [caption, slider])
+    column.axis = .vertical
+    column.spacing = 2
+    column.isLayoutMarginsRelativeArrangement = true
+    column.layoutMargins = UIEdgeInsets(top: 4, left: DesignTokens.spaceLg, bottom: 4, right: DesignTokens.spaceLg)
+
+    addSubview(column)
+    addSubview(neutralTick)
+    column.translatesAutoresizingMaskIntoConstraints = false
+    NSLayoutConstraint.activate([
+      column.leadingAnchor.constraint(equalTo: leadingAnchor),
+      column.trailingAnchor.constraint(equalTo: trailingAnchor),
+      column.topAnchor.constraint(equalTo: topAnchor),
+      column.bottomAnchor.constraint(equalTo: bottomAnchor),
+    ])
+  }
+
+  required init?(coder: NSCoder) { fatalError("init(coder:) is not used") }
+
+  override func layoutSubviews() {
+    super.layoutSubviews()
+    updateNeutralTick()
+  }
+
+  private func updateNeutralTick() {
+    guard let neutralValue, slider.maximumValue > slider.minimumValue, slider.bounds.width > 0 else {
+      neutralTick.isHidden = true
+      return
+    }
+    neutralTick.isHidden = false
+    let fraction = CGFloat((neutralValue - slider.minimumValue) / (slider.maximumValue - slider.minimumValue))
+    let trackFrame = slider.convert(slider.bounds, to: self)
+    let x = trackFrame.minX + trackFrame.width * fraction
+    neutralTick.frame = CGRect(x: x - 0.5, y: trackFrame.midY - 5, width: 1, height: 10)
+  }
+}

package/ios/Editor/UI/EditorToolSlider.swift

@@ -0,0 +1,22 @@
+import UIKit
+
+/// Native slider with a compact property title/value above its track.
+final class EditorToolSlider: UISlider {
+  var propertyKey = "" { didSet { accessibilityLabel = propertyKey; setNeedsDisplay() } }
+  override var intrinsicContentSize: CGSize { CGSize(width: UIView.noIntrinsicMetric, height: 64) }
+  override func trackRect(forBounds bounds: CGRect) -> CGRect {
+    var rect = super.trackRect(forBounds: bounds)
+    rect.origin.y = bounds.height * 0.65
+    return rect
+  }
+  override func draw(_ rect: CGRect) {
+    super.draw(rect)
+    let title = propertyKey == "fontSize" ? "Size" : (propertyKey == "rotation" ? "Rotate" : propertyKey.capitalized)
+    let suffix = propertyKey == "rotation" ? "°" : (propertyKey == "fontSize" ? "" : "%")
+    let valueText = "\(Int(value.rounded()))\(suffix)"
+    let attributes: [NSAttributedString.Key: Any] = [.font: UIFont.monospacedDigitSystemFont(ofSize: 12, weight: .medium), .foregroundColor: DesignTokens.textSecondary]
+    (title as NSString).draw(at: CGPoint(x: 4, y: 4), withAttributes: attributes)
+    let size = (valueText as NSString).size(withAttributes: attributes)
+    (valueText as NSString).draw(at: CGPoint(x: bounds.width - size.width - 4, y: 4), withAttributes: attributes)
+  }
+}

package/ios/Editor/UI/TextEditorSheet.swift

@@ -0,0 +1,84 @@
+import UIKit
+
+/// Keyboard-anchored text entry shared by photo and video. It only commits on Add/Done.
+final class TextEditorSheet: UIViewController, UITextViewDelegate {
+  private let input = UITextView()
+  private let placeholder = UILabel()
+  private let initialText: String
+  private let editing: Bool
+  private let accent: UIColor
+  private let onSave: (String) -> Void
+  private var inputHeight: NSLayoutConstraint?
+
+  init(text: String, editing: Bool, accent: UIColor, onSave: @escaping (String) -> Void) {
+    initialText = text; self.editing = editing; self.accent = accent; self.onSave = onSave
+    super.init(nibName: nil, bundle: nil)
+    modalPresentationStyle = .overFullScreen
+    modalTransitionStyle = .crossDissolve
+  }
+  required init?(coder: NSCoder) { nil }
+
+  override func viewDidLoad() {
+    super.viewDidLoad()
+    view.backgroundColor = UIColor.black.withAlphaComponent(0.7)
+    let panel = UIStackView(); panel.axis = .vertical; panel.spacing = 16
+    panel.backgroundColor = DesignTokens.surfaceContainerHigh
+    panel.layer.cornerRadius = 16
+    panel.isLayoutMarginsRelativeArrangement = true
+    panel.layoutMargins = UIEdgeInsets(top: 20, left: 20, bottom: 20, right: 20)
+    let title = UILabel(); title.text = editing ? "Edit Text" : "Add Text"
+    title.textColor = .white; title.font = .systemFont(ofSize: 20, weight: .semibold)
+    panel.addArrangedSubview(title)
+    input.text = initialText; input.textColor = .white; input.tintColor = accent
+    input.font = .systemFont(ofSize: 22)
+    input.backgroundColor = DesignTokens.surfaceContainerLow
+    input.layer.cornerRadius = 12
+    input.textContainerInset = UIEdgeInsets(top: 12, left: 8, bottom: 12, right: 8)
+    input.delegate = self
+    input.accessibilityLabel = "Text"
+    placeholder.text = "Type something..."; placeholder.textColor = DesignTokens.outline
+    placeholder.font = input.font; placeholder.isUserInteractionEnabled = false
+    input.addSubview(placeholder); placeholder.translatesAutoresizingMaskIntoConstraints = false
+    NSLayoutConstraint.activate([
+      placeholder.leadingAnchor.constraint(equalTo: input.leadingAnchor, constant: 13),
+      placeholder.topAnchor.constraint(equalTo: input.topAnchor, constant: 12),
+    ])
+    panel.addArrangedSubview(input)
+    inputHeight = input.heightAnchor.constraint(equalToConstant: 100); inputHeight?.priority = .defaultHigh; inputHeight?.isActive = true
+    let actions = UIStackView(); actions.axis = .horizontal; actions.spacing = 12
+    actions.addArrangedSubview(UIView())
+    let cancel = UIButton(type: .system); cancel.setTitle("Cancel", for: .normal); cancel.tintColor = .white
+    cancel.addAction(UIAction { [weak self] _ in self?.close() }, for: .touchUpInside)
+    let save = UIButton(type: .system)
+    save.setTitle(editing ? "Done" : "Add", for: .normal); save.tintColor = .white
+    save.backgroundColor = accent; save.layer.cornerRadius = 12
+    save.addAction(UIAction { [weak self] _ in
+      guard let self, !self.input.text.trimmingCharacters(in: .whitespacesAndNewlines).isEmpty else { return }
+      self.onSave(self.input.text); self.close()
+    }, for: .touchUpInside)
+    for button in [cancel, save] {
+      button.widthAnchor.constraint(equalToConstant: 80).isActive = true
+      button.heightAnchor.constraint(equalToConstant: 48).isActive = true
+      actions.addArrangedSubview(button)
+    }
+    panel.addArrangedSubview(actions)
+    view.addSubview(panel); panel.translatesAutoresizingMaskIntoConstraints = false
+    NSLayoutConstraint.activate([
+      panel.leadingAnchor.constraint(equalTo: view.safeAreaLayoutGuide.leadingAnchor, constant: 12),
+      panel.trailingAnchor.constraint(equalTo: view.safeAreaLayoutGuide.trailingAnchor, constant: -12),
+      panel.bottomAnchor.constraint(equalTo: view.keyboardLayoutGuide.topAnchor, constant: -12),
+      panel.topAnchor.constraint(greaterThanOrEqualTo: view.safeAreaLayoutGuide.topAnchor, constant: 8),
+    ])
+    textViewDidChange(input)
+  }
+
+  override func viewDidAppear(_ animated: Bool) { super.viewDidAppear(animated); input.becomeFirstResponder() }
+  func textViewDidChange(_ textView: UITextView) {
+    placeholder.isHidden = !textView.text.isEmpty
+    let width = max(view.bounds.width - 64, 100)
+    let height = textView.sizeThatFits(CGSize(width: width, height: .greatestFiniteMagnitude)).height
+    inputHeight?.constant = min(max(height, 80), 180)
+    textView.isScrollEnabled = height > 180
+  }
+  private func close() { input.resignFirstResponder(); dismiss(animated: true) }
+}

package/ios/Photo/Export/PhotoExporter.swift

@@ -52,9 +52,9 @@ enum PhotoExporter {
 
     let transformed = PhotoEditSession.applyTransform(upright, state: transform)
     let adjusted = PhotoAdjustmentRenderer.apply(transformed, adjustments: adjustments)
-    let layered = PhotoLayerRenderer.render(adjusted, layers: layers) { uri in resolveImageLayer(uri) }
-    let cropped = crop(layered, transform: transform)
-    let resized = resize(cropped, maxWidth: maxWidth, maxHeight: maxHeight)
+    let cropped = PhotoEditSession.crop(adjusted, state: transform)
+    let layered = PhotoLayerRenderer.render(cropped, layers: layers) { uri in resolveImageLayer(uri) }
+    let resized = resize(layered, maxWidth: maxWidth, maxHeight: maxHeight)
 
     let format = (exportOptions?["imageFormat"] as? String)?.lowercased() ?? "jpeg"
     let quality = qualityFor(exportOptions?["quality"] as? String ?? "high")

package/ios/Photo/Rendering/CropGeometry.swift

@@ -0,0 +1,48 @@
+import CoreGraphics
+
+/// Resolution-independent constraints; mirrors Android CropGeometry.
+enum CropGeometry {
+  enum Handle { case move, top, right, bottom, left, topLeft, topRight, bottomLeft, bottomRight }
+  static func fillScale(width: CGFloat, height: CGFloat, degrees: CGFloat) -> CGFloat {
+    let radians = degrees * .pi / 180
+    let c = abs(cos(radians)), s = abs(sin(radians))
+    return max(c + height / width * s, c + width / height * s)
+  }
+  static func fit(_ bounds: CGRect, ratio: CGFloat?) -> CGRect {
+    guard let ratio, ratio > 0 else { return bounds }
+    let w = min(bounds.width, bounds.height * ratio), h = min(bounds.width / ratio, bounds.height)
+    return CGRect(x: bounds.midX - w / 2, y: bounds.midY - h / 2, width: w, height: h)
+  }
+  static func resize(_ r: CGRect, bounds: CGRect, handle: Handle, dx: CGFloat, dy: CGFloat, ratio: CGFloat?, minimum: CGFloat) -> CGRect {
+    if handle == .move {
+      return r.offsetBy(dx: max(bounds.minX-r.minX, min(bounds.maxX-r.maxX, dx)), dy: max(bounds.minY-r.minY, min(bounds.maxY-r.maxY, dy)))
+    }
+    let left = [Handle.left, .topLeft, .bottomLeft].contains(handle)
+    let right = [Handle.right, .topRight, .bottomRight].contains(handle)
+    let top = [Handle.top, .topLeft, .topRight].contains(handle)
+    let bottom = [Handle.bottom, .bottomLeft, .bottomRight].contains(handle)
+    var l = r.minX + (left ? dx : 0), t = r.minY + (top ? dy : 0)
+    var rr = r.maxX + (right ? dx : 0), b = r.maxY + (bottom ? dy : 0)
+    if let ratio, ratio > 0 {
+      if (left || right) && (top || bottom) {
+        let dw = left ? -dx : dx, dh = top ? -dy : dy
+        let w = r.width + (abs(dw) > abs(dh * ratio) ? dw : dh * ratio)
+        if left { l = r.maxX - w } else { rr = r.minX + w }
+        if top { t = r.maxY - w / ratio } else { b = r.minY + w / ratio }
+      } else if left || right {
+        let h = (rr-l)/ratio; t = r.midY-h/2; b = t+h
+      } else {
+        let w = (b-t)*ratio; l = r.midX-w/2; rr = l+w
+      }
+    }
+    var fraction: CGFloat = 1
+    func limit(_ before: CGFloat, _ after: CGFloat, _ minimum: CGFloat) {
+      if after < minimum && after < before { fraction = min(fraction, max(0, min(1, (before-minimum)/(before-after)))) }
+    }
+    limit(r.minX,l,bounds.minX); limit(r.minY,t,bounds.minY)
+    limit(-r.maxX,-rr,-bounds.maxX); limit(-r.maxY,-b,-bounds.maxY)
+    limit(r.width,rr-l,min(minimum,r.width)); limit(r.height,b-t,min(minimum,r.height))
+    let x = r.minX+(l-r.minX)*fraction, y = r.minY+(t-r.minY)*fraction
+    return CGRect(x: x, y: y, width: r.maxX+(rr-r.maxX)*fraction-x, height: r.maxY+(b-r.maxY)*fraction-y)
+  }
+}

package/ios/Photo/Rendering/PhotoEditSession.swift

@@ -52,8 +52,10 @@ final class PhotoEditSession {
   }
 
   /// Renders rotate/flip/straighten + adjustments + layers — the crop overlay draws the crop live on top of this.
-  func renderPreview() -> UIImage? {
-    guard let base = computeBase() else { return nil }
+  func renderPreview(cropping: Bool = false) -> UIImage? {
+    guard let transformed = computeBase() else { return nil }
+    if cropping { return transformed }
+    let base = Self.crop(transformed, state: state)
     if cachedPreviewBaseImage === base,
        cachedPreviewLayerRevision == layerStack.revision,
        let cachedPreviewImage {
@@ -94,18 +96,27 @@ final class PhotoEditSession {
 
   static func applyTransform(_ image: UIImage, state: PhotoTransformState) -> UIImage {
     guard state.rotationDegrees != 0 || state.straightenDegrees != 0 else { return image }
-    let radians = state.totalRotationRadians
-    let rotatedBounds = CGRect(origin: .zero, size: image.size).applying(CGAffineTransform(rotationAngle: radians))
-    let canvasSize = CGSize(width: abs(rotatedBounds.width), height: abs(rotatedBounds.height))
-    let renderer = pixelRenderer(size: canvasSize)
-    return renderer.image { context in
+    let swap = state.rotationDegrees % 180 != 0
+    let canvasSize = swap ? CGSize(width: image.size.height, height: image.size.width) : image.size
+    let fill = CropGeometry.fillScale(width: canvasSize.width, height: canvasSize.height, degrees: state.straightenDegrees)
+    return pixelRenderer(size: canvasSize).image { context in
       let ctx = context.cgContext
-      ctx.translateBy(x: canvasSize.width / 2, y: canvasSize.height / 2)
-      ctx.rotate(by: radians)
-      image.draw(in: CGRect(x: -image.size.width / 2, y: -image.size.height / 2, width: image.size.width, height: image.size.height))
+      ctx.translateBy(x: canvasSize.width/2,y:canvasSize.height/2)
+      ctx.rotate(by:state.totalRotationRadians); ctx.scaleBy(x:fill,y:fill)
+      image.draw(in:CGRect(x:-image.size.width/2,y:-image.size.height/2,width:image.size.width,height:image.size.height))
     }
   }
 
+  static func crop(_ image: UIImage, state: PhotoTransformState) -> UIImage {
+    guard let cg = image.cgImage else { return image }
+    let w = CGFloat(cg.width), h = CGFloat(cg.height)
+    let left = max(0,min(w-1,(state.cropLeft*w).rounded())), top = max(0,min(h-1,(state.cropTop*h).rounded()))
+    let right = max(left+1,min(w,(state.cropRight*w).rounded())), bottom = max(top+1,min(h,(state.cropBottom*h).rounded()))
+    if left == 0 && top == 0 && right == w && bottom == h { return image }
+    guard let cropped = cg.cropping(to:CGRect(x:left,y:top,width:right-left,height:bottom-top)) else { return image }
+    return UIImage(cgImage:cropped)
+  }
+
   private static func decodeUpright(sourceUri: String, maxDimension: CGFloat) -> UIImage? {
     guard let path = SourceResolver.resolvePath(sourceUri: sourceUri, tempPrefix: "pve_preview") else { return nil }
     let url = URL(fileURLWithPath: path)