Make crop a Photos-style tool with undo and actual-size view

Crop is now a mode like Draw/Redact: a draggable rect with corner and
edge handles, rule-of-thirds grid, dimmed surroundings, Cancel (Esc) and
Crop Image (Return). Re-entering crop after a crop shows the full
original with the handles on the current crop region, so it can be
dragged back outward; every crop is undoable from the toolbar.

The result window also gains an Actual Size view (Cmd+0): one image
pixel per screen pixel, scrollable, so retina captures stay crisp
instead of being resampled down to the window size.

Generated with OpenCode

Assisted-by: Kimi:k3

Sources/Kapture/App.swift

@@ -34,19 +34,41 @@ final class AppDelegate: NSObject, NSApplicationDelegate {
         }
         HotkeyManager.shared.onTrigger = { CaptureController.shared.begin() }
         HotkeyManager.shared.onFrozenTrigger = { CaptureController.shared.begin(frozen: true) }
+        HotkeyManager.shared.onRecordTrigger = {
+            if RecordingController.shared.state.isRecording {
+                RecordingController.shared.stop()
+            } else {
+                CaptureController.shared.begin(recording: true)
+            }
+        }
         HotkeyManager.shared.register()
     }
+
+    func applicationWillTerminate(_ notification: Notification) {
+        RecordingController.shared.finalizeForTermination()
+    }
 }
 
 struct MenuView: View {
     @State private var granted = PermissionManager.isGranted
+    @ObservedObject private var recordingState = RecordingController.shared.state
 
     var body: some View {
         Button("Capture & OCR") { CaptureController.shared.begin() }
             .keyboardShortcut("s", modifiers: [.command, .shift])
+            .disabled(recordingState.isRecording)
 
         Button("Capture Frozen Screen") { CaptureController.shared.begin(frozen: true) }
             .keyboardShortcut("s", modifiers: [.command, .shift, .control])
+            .disabled(recordingState.isRecording)
+
+        if recordingState.isRecording {
+            Button("Stop Recording") { RecordingController.shared.stop() }
+                .keyboardShortcut("r", modifiers: [.command, .shift, .control])
+        } else {
+            Button("Record Screen…") { CaptureController.shared.begin(recording: true) }
+                .keyboardShortcut("r", modifiers: [.command, .shift, .control])
+        }
 
         Button("Extract from Image File…") { ResultWindow.shared.showOpenPanel() }
 
@@ -123,8 +145,8 @@ enum LoginItem {
     }
 }
 
-func renderTestImage(_ text: String, fontSize: CGFloat = 56) -> CGImage? {
+func renderTestImage(_ text: String, fontSize: CGFloat = 56, width: CGFloat = 1900, height: CGFloat = 220) -> CGImage? {
-    let size = NSSize(width: 1900, height: 220)
+    let size = NSSize(width: width, height: height)
     guard let rep = NSBitmapImageRep(
         bitmapDataPlanes: nil, pixelsWide: Int(size.width), pixelsHigh: Int(size.height),
         bitsPerSample: 8, samplesPerPixel: 4, hasAlpha: true, isPlanar: false,
@@ -138,15 +160,20 @@ func renderTestImage(_ text: String, fontSize: CGFloat = 56) -> CGImage? {
         .font: NSFont.systemFont(ofSize: fontSize),
         .foregroundColor: NSColor.black,
     ]
-    text.draw(at: NSPoint(x: 60, y: 75), withAttributes: attrs)
+    // Centre the text vertically so tiny canvases still contain it.
+    let textHeight = ("Ag" as NSString).size(withAttributes: attrs).height
+    let y = max(4, (size.height - textHeight) / 2)
+    text.draw(at: NSPoint(x: 20, y: y), withAttributes: attrs)
     NSGraphicsContext.restoreGraphicsState()
     return rep.cgImage
 }
 
 func runOCRSelfTest() {
-    let cases: [(expected: String, contains: String)] = [
+    let cases: [(expected: String, contains: String, fontSize: CGFloat, width: CGFloat, height: CGFloat)] = [
-        ("Kapture OCR test 1234, hello world", "Kapture OCR test 1234"),
+        ("Kapture OCR test 1234, hello world", "Kapture OCR test 1234", 56, 1900, 220),
-        ("你好世界，这是一个测试", "你好世界"),
+        ("你好世界，这是一个测试", "你好世界", 56, 1900, 220),
+        // Tiny text: needs the upscale retry to read anything at all.
+        ("会话导出并发冲突报错 export fail", "导出", 7, 320, 40),
     ]
     var index = 0
 
@@ -154,9 +181,9 @@ func runOCRSelfTest() {
         guard index < cases.count else { exit(0) }
         let current = cases[index]
         index += 1
-        guard let image = renderTestImage(current.expected) else { exit(1) }
+        guard let image = renderTestImage(current.expected, fontSize: current.fontSize, width: current.width, height: current.height) else { exit(1) }
         OCRService.shared.recognize(image) { recognized in
-            print("case:     \(current.expected)")
+            print("case:     \(current.expected) @\(Int(current.fontSize))pt")
             print("got:      \(recognized)")
             let ok = recognized.contains(current.contains)
             print(ok ? "PASS" : "FAIL")

Sources/Kapture/CaptureController.swift

@@ -79,16 +79,22 @@ final class CaptureController: NSObject {
     /// Frozen mode: the screen is snapshotted at hotkey press, so the pointer
     /// and any hover state (tooltips, open menus) end up in the capture.
     private(set) var isFrozenMode = false
+    /// Recording mode: the selection flow ends in a recording, not a still.
+    private(set) var isRecordingMode = false
     private var frozenSnapshots: [ScreenCapture.DisplaySnapshot] = []
 
-    func begin(frozen: Bool = false) {
+    func begin(frozen: Bool = false, recording: Bool = false) {
         guard !isSelecting else { return }
+        // No new captures while a recording is running (the selection
+        // overlays would end up in the video).
+        guard !RecordingController.shared.state.isRecording else { return }
         guard PermissionManager.isGranted else {
             PermissionManager.request()
             return
         }
         isSelecting = true
-        isFrozenMode = frozen
+        isFrozenMode = frozen && !recording
+        isRecordingMode = recording
         previousApp = NSWorkspace.shared.frontmostApplication
         // With the event tap driving input we must NOT activate: stealing
         // focus turns the target app into background mode (dimmed chrome),
@@ -98,7 +104,7 @@ final class CaptureController: NSObject {
         if !usesTap {
             NSApp.activate(ignoringOtherApps: true)
         }
-        CaptureController.log("begin: frozen=\(frozen) usesTap=\(usesTap) active=\(NSApp.isActive)")
+        CaptureController.log("begin: frozen=\(isFrozenMode) recording=\(recording) usesTap=\(usesTap) active=\(NSApp.isActive)")
 
         if frozen {
             ScreenCapture.shared.snapshotAllDisplays(includeCursor: true) { [weak self] snapshots in
@@ -137,9 +143,20 @@ final class CaptureController: NSObject {
     /// corners come from the window's own alpha).
     private func finishWindowPick(_ windowID: CGWindowID, _ rect: NSRect, ownedRisk: Bool) {
         let ids = overlayIDs
+        let recording = isRecordingMode
         hideOverlays()
         isSelecting = false
         restorePreviousApp()
+        if recording {
+            // Owned-popup risk: record the screen region instead of the
+            // window filter, which could composite the parent into the video.
+            RecordingController.shared.begin(
+                region: rect,
+                windowID: ownedRisk ? nil : windowID,
+                excludingWindowIDs: ids
+            )
+            return
+        }
         DispatchQueue.main.async { [self] in
             if ownedRisk {
                 capture(rect, excludingWindowIDs: ids, roundedCorners: true)
@@ -153,6 +170,7 @@ final class CaptureController: NSObject {
         let ids = overlayIDs
         let frozen = frozenSnapshots
         let wasFrozen = isFrozenMode
+        let recording = isRecordingMode
         hideOverlays()
         guard rect.width >= 2, rect.height >= 2 else {
             cancelSelection()
@@ -175,6 +193,13 @@ final class CaptureController: NSObject {
             return
         }
 
+        if recording {
+            isSelecting = false
+            restorePreviousApp()
+            RecordingController.shared.begin(region: rect, windowID: nil, excludingWindowIDs: ids)
+            return
+        }
+
         DispatchQueue.main.async { [self] in
             capture(rect, excludingWindowIDs: ids)
         }
@@ -195,6 +220,7 @@ final class CaptureController: NSObject {
         marqueeStart = nil
         frozenSnapshots = []
         isFrozenMode = false
+        isRecordingMode = false
     }
 
     private func restorePreviousApp() {

Sources/Kapture/HotkeyManager.swift

@@ -8,6 +8,8 @@ final class HotkeyManager {
     var onTrigger: (() -> Void)?
     /// ⌃⇧⌘S — frozen capture (snapshot at hotkey press).
     var onFrozenTrigger: (() -> Void)?
+    /// ⌃⇧⌘R — screen recording (region or window); toggles stop.
+    var onRecordTrigger: (() -> Void)?
 
     private var hotKeyRefs: [EventHotKeyRef?] = []
     private var eventHandlerRef: EventHandlerRef?
@@ -36,6 +38,7 @@ final class HotkeyManager {
                 switch hotKeyID.id {
                 case 1: HotkeyManager.shared.onTrigger?()
                 case 2: HotkeyManager.shared.onFrozenTrigger?()
+                case 3: HotkeyManager.shared.onRecordTrigger?()
                 default: break
                 }
             }
@@ -44,6 +47,7 @@ final class HotkeyManager {
 
         registerHotkey(id: 1, keyCode: UInt32(kVK_ANSI_S), modifiers: UInt32(cmdKey | shiftKey))
         registerHotkey(id: 2, keyCode: UInt32(kVK_ANSI_S), modifiers: UInt32(cmdKey | shiftKey | controlKey))
+        registerHotkey(id: 3, keyCode: UInt32(kVK_ANSI_R), modifiers: UInt32(cmdKey | shiftKey | controlKey))
     }
 
     private func registerHotkey(id: UInt32, keyCode: UInt32, modifiers: UInt32) {

Sources/Kapture/OCRService.swift

@@ -8,34 +8,66 @@ final class OCRService {
 
     func recognize(_ cgImage: CGImage, completion: @escaping (String) -> Void) {
         queue.async {
-            let request = VNRecognizeTextRequest()
+            let text = Self.perform(cgImage)
-            request.recognitionLevel = .accurate
+            // Tiny text (small UI labels) often reads as nothing at native
-            request.usesLanguageCorrection = true
+            // size; retry upscaled and keep whichever pass read more.
-            request.recognitionLanguages = ["en-US", "zh-Hans", "zh-Hant", "ja-JP", "ko-KR"]
+            guard text.count < 3 else {
-            // Without this, Vision defaults to the first listed language and
+                completion(text)
-            // renders CJK as Latin garbage (verified: 你好世界 -> "177WR").
-            if #available(macOS 13.0, *) {
-                request.automaticallyDetectsLanguage = true
-            }
-
-            let handler = VNImageRequestHandler(cgImage: cgImage, options: [:])
-            do {
-                try handler.perform([request])
-            } catch {
-                completion("")
                 return
             }
-
+            var best = text
-            let observations = request.results ?? []
+            for factor in [CGFloat(2), CGFloat(3)] {
-            let lines = observations
+                guard let upscaled = Self.upscaled(cgImage, factor: factor) else { continue }
-                .sorted { a, b in
+                let candidate = Self.perform(upscaled)
-                    let ay = a.boundingBox.midY
+                if candidate.count > best.count { best = candidate }
-                    let by = b.boundingBox.midY
+                if best.count >= 3 { break }
-                    if abs(ay - by) > 0.02 { return ay > by }
+            }
-                    return a.boundingBox.minX < b.boundingBox.minX
+            completion(best)
-                }
-                .compactMap { $0.topCandidates(1).first?.string }
-            completion(lines.joined(separator: "\n"))
         }
     }
+
+    private static func perform(_ cgImage: CGImage) -> String {
+        let request = VNRecognizeTextRequest()
+        request.recognitionLevel = .accurate
+        request.usesLanguageCorrection = true
+        request.recognitionLanguages = ["en-US", "zh-Hans", "zh-Hant", "ja-JP", "ko-KR"]
+        // Without this, Vision defaults to the first listed language and
+        // renders CJK as Latin garbage (verified: 你好世界 -> "177WR").
+        if #available(macOS 13.0, *) {
+            request.automaticallyDetectsLanguage = true
+        }
+
+        let handler = VNImageRequestHandler(cgImage: cgImage, options: [:])
+        do {
+            try handler.perform([request])
+        } catch {
+            return ""
+        }
+
+        let observations = request.results ?? []
+        let lines = observations
+            .sorted { a, b in
+                let ay = a.boundingBox.midY
+                let by = b.boundingBox.midY
+                if abs(ay - by) > 0.02 { return ay > by }
+                return a.boundingBox.minX < b.boundingBox.minX
+            }
+            .compactMap { $0.topCandidates(1).first?.string }
+        return lines.joined(separator: "\n")
+    }
+
+    private static func upscaled(_ cgImage: CGImage, factor: CGFloat) -> CGImage? {
+        let width = Int(CGFloat(cgImage.width) * factor)
+        let height = Int(CGFloat(cgImage.height) * factor)
+        guard width > 0, height > 0, width <= 20000, height <= 20000 else { return nil }
+        guard let ctx = CGContext(
+            data: nil, width: width, height: height,
+            bitsPerComponent: 8, bytesPerRow: 0,
+            space: CGColorSpaceCreateDeviceRGB(),
+            bitmapInfo: CGImageAlphaInfo.premultipliedLast.rawValue
+        ) else { return nil }
+        ctx.interpolationQuality = .high
+        ctx.draw(cgImage, in: CGRect(x: 0, y: 0, width: CGFloat(width), height: CGFloat(height)))
+        return ctx.makeImage()
+    }
 }

Sources/Kapture/OverlayView.swift

@@ -97,7 +97,14 @@ final class OverlayView: NSView {
         }
 
         // Esc hint — the only way out once clicks are consumed by the tap.
-        let hint = "Drag to select · hover + click a window to capture it · Esc to cancel"
+        let hint: String
+        if controller?.isRecordingMode == true {
+            hint = "Drag to select · hover + click a window to record · Esc to cancel"
+        } else if frozenImage != nil {
+            hint = "Frozen screen · drag to select · Esc to cancel"
+        } else {
+            hint = "Drag to select · hover + click a window to capture it · Esc to cancel"
+        }
         let hintAttrs: [NSAttributedString.Key: Any] = [
             .font: NSFont.monospacedSystemFont(ofSize: 12, weight: .medium),
             .foregroundColor: NSColor.white.withAlphaComponent(0.85),
@@ -115,22 +122,17 @@ final class OverlayView: NSView {
 
         guard let controller else { return }
 
-        // Frozen mode: no window highlight; the marquee is cut straight out
+        // Frozen mode: same look as live mode — a dark veil over everything,
-        // of the still image so it shows the frozen pixels.
+        // with the selection showing the frozen pixels undimmed.
-        if frozenImage != nil {
+        if let frozenImage {
+            NSColor.black.withAlphaComponent(0.35).setFill()
+            NSBezierPath(rect: bounds).fill()
+
             if let sel = controller.marqueeRect, sel.width > 0, sel.height > 0 {
                 let vf = viewRect(sel)
-                // Dim everything except the selection (even-odd fill).
-                let maskPath = CGMutablePath()
-                maskPath.addRect(bounds)
-                maskPath.addRect(vf)
                 NSGraphicsContext.current?.saveGraphicsState()
-                let ctx = NSGraphicsContext.current?.cgContext
+                NSBezierPath(rect: vf).addClip()
-                ctx?.addPath(maskPath)
+                drawFrozen(frozenImage)
-                ctx?.fillPath(using: .evenOdd)
-                NSColor.black.withAlphaComponent(0.35).setFill()
-                ctx?.addPath(maskPath)
-                ctx?.fillPath(using: .evenOdd)
                 NSGraphicsContext.current?.restoreGraphicsState()
 
                 let border = NSBezierPath(rect: vf)

Sources/Kapture/RecordingController.swift

@@ -0,0 +1,181 @@
+import AppKit
+import SwiftUI
+
+/// Shared recording state, observed by the menu bar menu and control bar.
+final class RecordingState: ObservableObject {
+    @Published var isRecording = false
+    @Published var elapsed: TimeInterval = 0
+}
+
+/// Owns a recording session: the red border around the recorded region and
+/// the floating timer/stop bar. Both chrome windows are excluded from the
+/// video. On stop, the file is auto-saved to ~/Movies and revealed in Finder.
+final class RecordingController {
+    static let shared = RecordingController()
+
+    let state = RecordingState()
+
+    private var recorder: ScreenRecorder?
+    private var chromeWindows: [NSWindow] = []
+    private var timer: Timer?
+
+    /// `region` is in AppKit global points; `windowID` records that window
+    /// instead of the region. Called by CaptureController after the
+    /// selection overlays are hidden.
+    func begin(region: NSRect, windowID: CGWindowID?, excludingWindowIDs: [Int]) {
+        guard !state.isRecording else { return }
+        showChrome(region: region)
+        let excluded = excludingWindowIDs + chromeWindows.map { $0.windowNumber }
+        state.isRecording = true
+
+        let recorder = ScreenRecorder()
+        self.recorder = recorder
+        // Give the window server a beat so the chrome shows up in the
+        // shareable-content snapshot and gets excluded from the video.
+        DispatchQueue.main.asyncAfter(deadline: .now() + 0.15) { [weak self] in
+            guard let self, self.recorder === recorder else { return }
+            recorder.start(region: region, windowID: windowID, excludingWindowIDs: excluded) { [weak self] ok in
+                DispatchQueue.main.async {
+                    guard let self else { return }
+                    if ok {
+                        self.startTimer()
+                    } else {
+                        self.finish(url: nil)
+                        ResultWindow.shared.show(image: ResultWindow.failureImage("Could not start the recording. Check Screen Recording permission."))
+                    }
+                }
+            }
+        }
+    }
+
+    func stop() {
+        guard state.isRecording else { return }
+        state.isRecording = false
+        timer?.invalidate()
+        timer = nil
+        recorder?.stop { [weak self] url in
+            DispatchQueue.main.async { self?.finish(url: url) }
+        }
+    }
+
+    /// Best-effort finalize on quit so the .mov isn't left truncated.
+    /// Blocks briefly — only call from applicationWillTerminate.
+    func finalizeForTermination() {
+        guard let recorder else { return }
+        let semaphore = DispatchSemaphore(value: 0)
+        recorder.stop { _ in semaphore.signal() }
+        _ = semaphore.wait(timeout: .now() + 3)
+    }
+
+    private func finish(url: URL?) {
+        state.isRecording = false
+        hideChrome()
+        recorder = nil
+        state.elapsed = 0
+        if let url {
+            CaptureController.log("rec: saved \(url.path)")
+            NSWorkspace.shared.activateFileViewerSelecting([url])
+        }
+    }
+
+    private func startTimer() {
+        let started = Date()
+        state.elapsed = 0
+        timer = Timer.scheduledTimer(withTimeInterval: 0.5, repeats: true) { [weak self] _ in
+            self?.state.elapsed = Date().timeIntervalSince(started)
+        }
+    }
+
+    // MARK: - Chrome
+
+    private func showChrome(region: NSRect) {
+        // Red border around the recorded region.
+        let border = NSPanel(
+            contentRect: region,
+            styleMask: [.borderless, .nonactivatingPanel],
+            backing: .buffered,
+            defer: false
+        )
+        border.level = .screenSaver
+        border.collectionBehavior = [.canJoinAllSpaces, .fullScreenAuxiliary, .stationary]
+        border.backgroundColor = .clear
+        border.isOpaque = false
+        border.hasShadow = false
+        border.ignoresMouseEvents = true
+        border.contentView = RecordingBorderView()
+        border.orderFrontRegardless()
+
+        // Floating timer/stop bar at the bottom centre of the region.
+        let bar = NSPanel(
+            contentRect: .zero,
+            styleMask: [.borderless, .nonactivatingPanel],
+            backing: .buffered,
+            defer: false
+        )
+        bar.level = .screenSaver
+        bar.collectionBehavior = [.canJoinAllSpaces, .fullScreenAuxiliary, .stationary]
+        bar.backgroundColor = .clear
+        bar.isOpaque = false
+        bar.hasShadow = false
+        let hosting = NSHostingView(rootView: RecordingBarView(state: state) { [weak self] in
+            self?.stop()
+        })
+        let size = hosting.fittingSize
+        bar.setContentSize(size)
+        bar.setFrameOrigin(NSPoint(x: region.midX - size.width / 2, y: region.minY + 14))
+        bar.contentView = hosting
+        bar.orderFrontRegardless()
+
+        chromeWindows = [border, bar]
+    }
+
+    private func hideChrome() {
+        chromeWindows.forEach { $0.orderOut(nil) }
+        chromeWindows = []
+    }
+}
+
+/// Draws the red rounded border around the recorded region.
+private final class RecordingBorderView: NSView {
+    override func draw(_ dirtyRect: NSRect) {
+        let path = NSBezierPath(roundedRect: bounds.insetBy(dx: 2, dy: 2), xRadius: 8, yRadius: 8)
+        NSColor.systemRed.setStroke()
+        path.lineWidth = 3
+        path.stroke()
+    }
+}
+
+/// The floating capsule bar: red dot, elapsed time, stop button.
+struct RecordingBarView: View {
+    @ObservedObject var state: RecordingState
+    let onStop: () -> Void
+
+    private var timeString: String {
+        let total = Int(state.elapsed)
+        return String(format: "%02d:%02d", total / 60, total % 60)
+    }
+
+    var body: some View {
+        HStack(spacing: 10) {
+            Circle()
+                .fill(Color.red)
+                .frame(width: 8, height: 8)
+            Text(timeString)
+                .font(.system(size: 12, weight: .medium).monospacedDigit())
+                .foregroundStyle(.white)
+            Button(action: onStop) {
+                Image(systemName: "stop.fill")
+                    .font(.system(size: 10, weight: .bold))
+                    .foregroundStyle(.white)
+                    .frame(width: 22, height: 22)
+                    .background(Circle().fill(Color.red))
+                    .contentShape(Circle())
+            }
+            .buttonStyle(.plain)
+            .help("Stop recording (⌃⇧⌘R)")
+        }
+        .padding(.horizontal, 12)
+        .padding(.vertical, 7)
+        .background(Capsule().fill(Color.black.opacity(0.78)))
+    }
+}

Sources/Kapture/ResultWindow.swift

@@ -82,7 +82,7 @@ final class ResultWindow {
 
 @MainActor
 final class CaptureModel: ObservableObject {
-    let image: CGImage
+    @Published var image: CGImage
 
     @Published var mode: CaptureMode = .screenshot
     @Published var extractedText: String?
@@ -90,12 +90,24 @@ final class CaptureModel: ObservableObject {
     @Published var statusMessage: String?
     /// Drag selection rect in IMAGE point space (nil = none)
     @Published var selection: CGRect?
+    /// Crop rect while the crop tool is active, in the DISPLAYED image's
+    /// pixel space (the original image once a crop exists).
+    @Published var cropRect: CGRect?
+    /// The uncropped original image — set on the first crop so crop mode can
+    /// show it and the crop can be adjusted back outward (like Photos).
+    @Published private(set) var originalImage: CGImage?
+    /// Origin of the current image within the original image (pixels).
+    @Published private(set) var cropOffset: CGPoint = .zero
     /// Freehand drawing strokes in IMAGE point space
     @Published var strokes: [Stroke] = []
     /// Redo stack of removed strokes
     @Published var redoStack: [Stroke] = []
+    /// Undo stack of pre-crop states (image + annotations + offset)
+    @Published private(set) var cropHistory: [(image: CGImage, strokes: [Stroke], redoStack: [Stroke], offset: CGPoint)] = []
     /// Whether the pen is active (drag draws instead of selecting)
     @Published var tool: Tool = .select
+    /// Actual-size view: 1 image pixel per screen pixel, scrollable.
+    @Published var isActualSize = false
     /// Current drawing color
     @Published var drawColor: NSColor = .systemRed
     /// Stroke thickness in points (image space)
@@ -105,6 +117,7 @@ final class CaptureModel: ObservableObject {
         case select
         case draw
         case redact
+        case crop
     }
 
     struct Stroke {
@@ -126,6 +139,53 @@ final class CaptureModel: ObservableObject {
     var hasSelection: Bool { selection != nil && selection!.width >= 2 && selection!.height >= 2 }
     var canUndo: Bool { !strokes.isEmpty }
     var canRedo: Bool { !redoStack.isEmpty }
+    var canUndoCrop: Bool { !cropHistory.isEmpty }
+
+    /// The image shown in crop mode: the original once a crop exists, so the
+    /// handles sit on the cropped region and can be dragged back outward.
+    var cropModeImage: CGImage { originalImage ?? image }
+
+    /// Enter crop mode: start from the current selection or the current
+    /// crop region, mapped into the displayed image's space.
+    func beginCropMode() {
+        if hasSelection {
+            // The selection is in current-image space; map it into the
+            // displayed (original) space.
+            cropRect = selection!.offsetBy(dx: cropOffset.x, dy: cropOffset.y)
+            selection = nil
+        } else {
+            cropRect = originalImage != nil
+                ? CGRect(origin: cropOffset, size: CGSize(width: image.width, height: image.height))
+                : CGRect(origin: .zero, size: CGSize(width: image.width, height: image.height))
+        }
+    }
+
+    func cancelCrop() {
+        cropRect = nil
+        if tool == .crop { tool = .select }
+    }
+
+    /// Apply the pending crop rect and leave crop mode.
+    func applyCrop() {
+        guard let rect = cropRect else { return }
+        cropRect = nil
+        tool = .select
+        crop(to: rect)
+    }
+
+    /// Restore the image and annotations from before the most recent crop.
+    func undoCrop() {
+        guard let snapshot = cropHistory.popLast() else { return }
+        image = snapshot.image
+        strokes = snapshot.strokes
+        redoStack = snapshot.redoStack
+        cropOffset = snapshot.offset
+        selection = nil
+        if tool == .crop {
+            cropRect = CGRect(origin: cropOffset, size: CGSize(width: image.width, height: image.height))
+        }
+        statusMessage = "Crop undone."
+    }
 
     func undoStroke() {
         guard let last = strokes.popLast() else { return }
@@ -215,8 +275,42 @@ final class CaptureModel: ObservableObject {
         return extractedText ?? "Select text in the screenshot, then click “Get Text”."
     }
 
-    func cropImage(to rectInImage: CGRect) -> CGImage? {
+    /// Crop to `rect` in the DISPLAYED image's pixel space (the original
-        return image.cropping(to: rectInImage)
+    /// image once a crop exists). Strokes are translated into the new
+    /// coordinate space; strokes fully outside the crop are dropped. The
+    /// previous state is pushed onto the crop undo stack.
+    func crop(to rectInDisplayedSpace: CGRect) {
+        let source = originalImage ?? image
+        let bounds = CGRect(origin: .zero, size: CGSize(width: source.width, height: source.height))
+        let rect = rectInDisplayedSpace.integral.intersection(bounds)
+        // No-op when the crop matches what's already visible.
+        let currentVisible = CGRect(origin: cropOffset, size: CGSize(width: image.width, height: image.height))
+        guard rect.width >= 2, rect.height >= 2, rect != currentVisible,
+              let cropped = source.cropping(to: rect) else { return }
+        cropHistory.append((image: image, strokes: strokes, redoStack: redoStack, offset: cropOffset))
+        image = cropped
+        if originalImage == nil { originalImage = source }
+        // Strokes live in current-image space: a point p maps into the
+        // original as p + old offset, then into the new crop as -rect.origin.
+        let dx = cropOffset.x - rect.minX
+        let dy = cropOffset.y - rect.minY
+        cropOffset = rect.origin
+        let newBounds = CGRect(origin: .zero, size: rect.size)
+        func translated(_ stroke: Stroke) -> Stroke? {
+            let points = stroke.points.map { CGPoint(x: $0.x + dx, y: $0.y + dy) }
+            let xs = points.map { $0.x }
+            let ys = points.map { $0.y }
+            let strokeBounds = CGRect(
+                x: xs.min()!, y: ys.min()!,
+                width: xs.max()! - xs.min()!, height: ys.max()! - ys.min()!
+            ).insetBy(dx: -stroke.width, dy: -stroke.width)
+            guard strokeBounds.intersects(newBounds) else { return nil }
+            return Stroke(points: points, width: stroke.width, color: stroke.color, isRedaction: stroke.isRedaction)
+        }
+        strokes = strokes.compactMap(translated)
+        redoStack = redoStack.compactMap(translated)
+        selection = nil
+        statusMessage = "Cropped to \(Int(rect.width))×\(Int(rect.height))."
     }
 
     func runOCR(over selectionOnly: CGRect? = nil) {
@@ -298,6 +392,141 @@ final class CaptureModel: ObservableObject {
     }
 }
 
+// MARK: - Cap-style design tokens
+
+/// Visual language modeled after the Cap screen recorder (cap.so):
+/// white card surfaces on a light canvas, capsule controls, circular
+/// icon buttons, and Cap's brand blue for primary actions.
+private enum CapStyle {
+    /// Cap's brand blue (#538EFF).
+    static let blue = Color(red: 83 / 255, green: 142 / 255, blue: 1)
+
+    private static func adaptive(_ light: NSColor, _ dark: NSColor) -> Color {
+        Color(nsColor: NSColor(name: nil, dynamicProvider: { appearance in
+            appearance.bestMatch(from: [.darkAqua, .aqua]) == .darkAqua ? dark : light
+        }))
+    }
+
+    /// Pill/track fill (segmented control track, capsule buttons).
+    static let track = adaptive(NSColor(white: 0.93, alpha: 1), NSColor(white: 1, alpha: 0.1))
+    /// Card/content surfaces.
+    static let card = adaptive(.white, NSColor(white: 0.17, alpha: 1))
+    /// Canvas behind the content card.
+    static let canvas = adaptive(NSColor(white: 0.96, alpha: 1), NSColor(white: 0.12, alpha: 1))
+    /// Hairline borders.
+    static let border = adaptive(NSColor(white: 0, alpha: 0.08), NSColor(white: 1, alpha: 0.12))
+    /// Soft blue highlight for active tools (Cap's "On" pill).
+    static let blueTint = adaptive(
+        NSColor(red: 218 / 255, green: 233 / 255, blue: 1, alpha: 1),
+        NSColor(red: 83 / 255, green: 142 / 255, blue: 1, alpha: 0.28)
+    )
+}
+
+private struct CapPressableStyle: ButtonStyle {
+    func makeBody(configuration: Configuration) -> some View {
+        configuration.label
+            .opacity(configuration.isPressed ? 0.7 : 1)
+            .scaleEffect(configuration.isPressed ? 0.96 : 1)
+    }
+}
+
+/// Sliding-pill segmented control (Cap's Screen/Window switcher).
+private struct CapModePicker: View {
+    @Binding var mode: CaptureModel.CaptureMode
+    @Namespace private var selection
+
+    var body: some View {
+        HStack(spacing: 2) {
+            item(.screenshot, title: "Screenshot")
+            item(.text, title: "Text")
+        }
+        .padding(2.5)
+        .background(Capsule().fill(CapStyle.track))
+    }
+
+    private func item(_ value: CaptureModel.CaptureMode, title: String) -> some View {
+        let isSelected = mode == value
+        return Button {
+            withAnimation(.spring(response: 0.28, dampingFraction: 0.85)) { mode = value }
+        } label: {
+            Text(title)
+                .font(.system(size: 12, weight: .medium))
+                .foregroundStyle(isSelected ? Color.primary : Color.secondary)
+                .padding(.horizontal, 13)
+                .padding(.vertical, 4.5)
+                .background {
+                    if isSelected {
+                        Capsule()
+                            .fill(CapStyle.card)
+                            .shadow(color: Color.black.opacity(0.14), radius: 1.5, y: 1)
+                            .matchedGeometryEffect(id: "mode", in: selection)
+                    }
+                }
+                .contentShape(Capsule())
+        }
+        .buttonStyle(CapPressableStyle())
+    }
+}
+
+/// Capsule button; primary renders in Cap blue.
+private struct CapCapsuleButton: View {
+    let title: String
+    let icon: String
+    var primary = false
+    var disabled = false
+    var help: String
+    var shortcut: KeyboardShortcut? = nil
+    let action: () -> Void
+
+    var body: some View {
+        Button(action: action) {
+            Label(title, systemImage: icon)
+                .font(.system(size: 12, weight: .medium))
+                .foregroundStyle(primary ? Color.white : Color.primary.opacity(0.85))
+                .padding(.horizontal, 11)
+                .padding(.vertical, 5.5)
+                .background(Capsule().fill(primary ? CapStyle.blue : CapStyle.track))
+                .contentShape(Capsule())
+        }
+        .buttonStyle(CapPressableStyle())
+        .keyboardShortcut(shortcut)
+        .disabled(disabled)
+        .opacity(disabled ? 0.5 : 1)
+        .help(help)
+    }
+}
+
+/// Circular icon button with hover fill and a blue-tinted active state.
+private struct CapIconButton: View {
+    let icon: String
+    var active = false
+    var disabled = false
+    var help: String
+    var shortcut: KeyboardShortcut? = nil
+    let action: () -> Void
+    @State private var hovering = false
+
+    var body: some View {
+        Button(action: action) {
+            Image(systemName: icon)
+                .font(.system(size: 13, weight: .medium))
+                .foregroundStyle(active ? CapStyle.blue : Color.secondary)
+                .frame(width: 29, height: 29)
+                .background(Circle().fill(active ? CapStyle.blueTint : (hovering ? CapStyle.track : Color.clear)))
+                .contentShape(Circle())
+        }
+        .buttonStyle(CapPressableStyle())
+        .keyboardShortcut(shortcut)
+        .onHover { hovering = $0 }
+        .animation(.easeOut(duration: 0.12), value: hovering)
+        .disabled(disabled)
+        .opacity(disabled ? 0.4 : 1)
+        .help(help)
+    }
+}
+
+// MARK: - Result window
+
 struct ResultView: View {
     @ObservedObject var model: CaptureModel
     let onClose: () -> Void
@@ -305,96 +534,88 @@ struct ResultView: View {
     var body: some View {
         VStack(spacing: 0) {
             // Toolbar
-            HStack(spacing: 10) {
+            HStack(spacing: 6) {
-                Picker("", selection: $model.mode) {
+                CapModePicker(mode: $model.mode)
-                    Text("Screenshot").tag(CaptureModel.CaptureMode.screenshot)
+
-                    Text("Text").tag(CaptureModel.CaptureMode.text)
+                CapIconButton(
+                    icon: "1.magnifyingglass",
+                    active: model.isActualSize,
+                    help: "Actual size — 1 image pixel per screen pixel (⌘0)",
+                    shortcut: KeyboardShortcut("0", modifiers: .command)
+                ) { model.isActualSize.toggle() }
+
+                if model.canUndoCrop {
+                    CapIconButton(
+                        icon: "arrow.uturn.backward",
+                        help: "Undo the last crop"
+                    ) { model.undoCrop() }
                 }
-                .pickerStyle(.segmented)
-                .fixedSize()
 
                 Spacer()
 
                 if model.hasSelection {
-                    Button {
+                    CapCapsuleButton(
-                        model.runOCRSelection()
+                        title: "OCR Selection", icon: "text.magnifyingglass",
-                    } label: {
+                        primary: true, disabled: model.isOCRRunning,
-                        Label("OCR Selection", systemImage: "text.magnifyingglass")
+                        help: "Recognize text inside the selected region"
-                    }
+                    ) { model.runOCRSelection() }
-                    .buttonStyle(.borderedProminent)
-                    .disabled(model.isOCRRunning)
-                    .help("Recognize text inside the selected region")
                 }
 
-                Button {
+                CapCapsuleButton(
-                    model.runOCR()
+                    title: "Get All Text", icon: "text.viewfinder",
-                } label: {
+                    primary: !model.hasSelection, disabled: model.isOCRRunning,
-                    Label("Get All Text", systemImage: "text.viewfinder")
+                    help: "Recognize all text in the screenshot"
-                }
+                ) { model.runOCR() }
-                .buttonStyle(.bordered)
-                .disabled(model.isOCRRunning)
-                .help("Recognize all text in the screenshot")
 
-                Divider().frame(height: 18)
+                CapIconButton(
-
+                    icon: model.tool == .draw ? "pencil.tip.crop.circle.fill" : "pencil.tip.crop.circle",
-                Button {
+                    active: model.tool == .draw,
+                    help: "Draw on the screenshot"
+                ) {
                     model.tool = model.tool == .draw ? .select : .draw
                     if model.tool != .select { model.selection = nil }
-                } label: {
+                    model.cropRect = nil
-                    Label("Draw", systemImage: model.tool == .draw ? "pencil.tip.crop.circle.fill" : "pencil.tip.crop.circle")
                 }
-                .buttonStyle(.bordered)
-                .foregroundStyle(model.tool == .draw ? .primary : .secondary)
-                .help("Draw on the screenshot")
 
-                Button {
+                CapIconButton(
+                    icon: model.tool == .redact ? "rectangle.fill.on.rectangle.fill" : "rectangle.dashed",
+                    active: model.tool == .redact,
+                    help: "Cover sensitive areas with black bars"
+                ) {
                     model.tool = model.tool == .redact ? .select : .redact
                     if model.tool != .select { model.selection = nil }
-                } label: {
+                    model.cropRect = nil
-                    Label("Redact", systemImage: model.tool == .redact ? "rectangle.fill.on.rectangle.fill" : "rectangle.dashed")
                 }
-                .buttonStyle(.bordered)
-                .foregroundStyle(model.tool == .redact ? .primary : .secondary)
-                .help("Cover sensitive areas with black bars")
 
-                Button {
+                CapIconButton(
-                    model.copyImage()
+                    icon: "crop",
-                } label: {
+                    active: model.tool == .crop,
-                    Label("Copy", systemImage: "doc.on.doc")
+                    help: "Crop the image"
+                ) {
+                    if model.tool == .crop {
+                        model.cancelCrop()
+                    } else {
+                        model.tool = .crop
+                        model.beginCropMode()
+                    }
                 }
-                .buttonStyle(.bordered)
-                .help("Copy image to clipboard")
 
-                Button {
+                CapIconButton(icon: "doc.on.doc", help: "Copy image to clipboard") { model.copyImage() }
-                    model.savePNG()
+                CapIconButton(icon: "square.and.arrow.down", help: "Save screenshot as PNG") { model.savePNG() }
-                } label: {
+                CapIconButton(icon: "xmark", help: "Close") { onClose() }
-                    Label("Save", systemImage: "square.and.arrow.down")
-                }
-                .buttonStyle(.bordered)
-                .help("Save screenshot as PNG");
-
-                Button {
-                    onClose()
-                } label: {
-                    Image(systemName: "xmark.circle.fill")
-                        .foregroundStyle(.secondary)
-                }
-                .buttonStyle(.plain)
-                .help("Close")
             }
-            .padding(.horizontal, 14)
+            .padding(.horizontal, 12)
-            .padding(.vertical, 10)
+            .padding(.vertical, 9)
 
-            Divider()
+            // Tool options (only when a draw tool is active)
-
-            // Tool toolbar (only when a draw tool is active)
             if model.tool != .select {
                 HStack(spacing: 14) {
-                    Label(model.tool == .redact ? "Redact" : "Draw", systemImage: model.tool == .redact ? "rectangle.fill" : "pencil.tip")
+                    Label(
-                        .font(.caption)
+                        model.tool == .redact ? "Redact" : model.tool == .crop ? "Crop" : "Draw",
-                        .foregroundStyle(.secondary)
+                        systemImage: model.tool == .redact ? "rectangle.fill" : model.tool == .crop ? "crop" : "pencil.tip"
-
+                    )
-                    Divider().frame(height: 18)
+                    .font(.caption)
+                    .foregroundStyle(.secondary)
 
                     if model.tool == .draw {
                         HStack(spacing: 6) {
@@ -405,10 +626,9 @@ struct ResultView: View {
                         .foregroundStyle(.secondary)
                         Slider(value: $model.strokeWidth, in: 1...12, step: 0.5)
                             .frame(width: 120)
+                            .tint(CapStyle.blue)
                             .help("Stroke thickness")
 
-                        Divider().frame(height: 18)
-
                         ColorPicker("", selection: Binding(
                             get: { Color(nsColor: model.drawColor) },
                             set: { model.drawColor = NSColor($0) }
@@ -416,68 +636,71 @@ struct ResultView: View {
                         .labelsHidden()
                         .frame(width: 28)
                         .help("Drawing color")
-                    } else {
+                    } else if model.tool == .redact {
                         Label("Drag to cover sensitive text", systemImage: "eye.slash")
                             .font(.caption)
                             .foregroundStyle(.secondary)
+                    } else {
+                        Label("Drag the corners or edges to adjust the crop", systemImage: "hand.draw")
+                            .font(.caption)
+                            .foregroundStyle(.secondary)
                     }
 
                     Spacer()
 
-                    Button {
+                    if model.tool == .crop {
-                        model.undoStroke()
+                        CapCapsuleButton(
-                    } label: {
+                            title: "Cancel", icon: "xmark",
-                        Label("Undo", systemImage: "arrow.uturn.backward")
+                            help: "Cancel cropping (Esc)",
-                    }
+                            shortcut: .cancelAction
-                    .buttonStyle(.bordered)
+                        ) { model.cancelCrop() }
-                    .controlSize(.small)
-                    .disabled(!model.canUndo)
-                    .keyboardShortcut("z", modifiers: .command)
-                    .help("Undo last stroke (⌘Z)")
 
-                    Button {
+                        CapCapsuleButton(
-                        model.redoStroke()
+                            title: "Crop Image", icon: "checkmark",
-                    } label: {
+                            primary: true,
-                        Label("Redo", systemImage: "arrow.uturn.forward")
+                            help: "Apply the crop (Return)",
-                    }
+                            shortcut: .defaultAction
-                    .buttonStyle(.bordered)
+                        ) { model.applyCrop() }
-                    .controlSize(.small)
+                    } else {
-                    .disabled(!model.canRedo)
+                        CapIconButton(
-                    .keyboardShortcut("z", modifiers: [.command, .shift])
+                            icon: "arrow.uturn.backward", disabled: !model.canUndo,
-                    .help("Redo stroke (⌘⇧Z)")
+                            help: "Undo last stroke (⌘Z)",
+                            shortcut: KeyboardShortcut("z", modifiers: .command)
+                        ) { model.undoStroke() }
 
-                    Button {
+                        CapIconButton(
-                        model.clearAnnotations()
+                            icon: "arrow.uturn.forward", disabled: !model.canRedo,
-                    } label: {
+                            help: "Redo stroke (⌘⇧Z)",
-                        Label("Clear", systemImage: "eraser")
+                            shortcut: KeyboardShortcut("z", modifiers: [.command, .shift])
+                        ) { model.redoStroke() }
+
+                        CapIconButton(
+                            icon: "eraser", disabled: model.strokes.isEmpty,
+                            help: "Remove all drawn annotations"
+                        ) { model.clearAnnotations() }
                     }
-                    .buttonStyle(.bordered)
-                    .controlSize(.small)
-                    .disabled(model.strokes.isEmpty)
-                    .help("Remove all drawn annotations")
                 }
-                .padding(.horizontal, 14)
+                .padding(.horizontal, 12)
-                .padding(.vertical, 8)
+                .padding(.vertical, 6)
-                .background(.bar)
-
-                Divider()
             }
 
             // Content
             if model.mode == .screenshot {
                 ScreenshotPane(model: model)
-                    .padding(12)
+                    .padding(10)
+                    .background(CapStyle.canvas)
             } else {
-                ZStack {
+                ScrollView {
-                    ScrollView {
+                    Text(model.displayText)
-                        Text(model.displayText)
+                        .font(.system(.body, design: .monospaced))
-                            .font(.system(.body, design: .monospaced))
+                        .textSelection(.enabled)
-                            .textSelection(.enabled)
+                        .frame(maxWidth: .infinity, alignment: .leading)
-                            .frame(maxWidth: .infinity, alignment: .leading)
+                        .padding(14)
-                            .padding(12)
-                    }
                 }
-                .frame(maxWidth: .infinity, maxHeight: .infinity)
+                .background(CapStyle.card, in: RoundedRectangle(cornerRadius: 10))
+                .overlay(RoundedRectangle(cornerRadius: 10).strokeBorder(CapStyle.border, lineWidth: 1))
+                .padding(10)
+                .background(CapStyle.canvas)
             }
 
             // Status bar
@@ -487,7 +710,11 @@ struct ResultView: View {
                         .controlSize(.small)
                 }
                 Text(model.statusMessage ?? (model.mode == .screenshot
-                    ? (model.hasSelection ? "Region selected — click OCR Selection." : "Drag to select a region, or Get All Text.")
+                    ? (model.tool == .crop
+                        ? "Adjust the crop — Return to apply, Esc to cancel."
+                        : (model.hasSelection
+                            ? "Region selected — OCR it, or adjust it with Crop."
+                            : (model.isActualSize ? "Actual size — scroll to pan, drag to select." : "Drag to select a region, or Get All Text.")))
                     : "Selectable text"))
                     .font(.caption)
                     .foregroundStyle(.secondary)
@@ -496,28 +723,37 @@ struct ResultView: View {
                 Spacer()
 
                 if model.mode == .text, model.extractedText != nil {
-                    Button {
+                    CapCapsuleButton(
-                        model.copyText()
+                        title: "Copy Text", icon: "doc.on.doc",
-                    } label: {
+                        help: "Copy recognized text to the clipboard"
-                        Label("Copy Text", systemImage: "doc.on.doc")
+                    ) { model.copyText() }
-                    }
-                    .buttonStyle(.bordered)
-                    .controlSize(.small)
                 }
             }
-            .padding(.horizontal, 14)
+            .padding(.horizontal, 12)
-            .padding(.vertical, 8)
+            .padding(.vertical, 7)
-            .background(.bar)
         }
-        .frame(minWidth: 520, minHeight: 420)
+        .background(Color(nsColor: .windowBackgroundColor))
+        .frame(minWidth: 600, minHeight: 420)
     }
 }
 
 struct ScreenshotPane: View {
     @ObservedObject var model: CaptureModel
 
+    /// In crop mode after a crop: the original image is displayed so the
+    /// crop handles sit on the cropped region and can be dragged back out.
+    private var displayedImage: CGImage {
+        model.tool == .crop ? model.cropModeImage : model.image
+    }
+
+    /// Strokes are stored in current-image space; when the original is
+    /// displayed in crop mode they shift by the cumulative crop offset.
+    private var strokeDisplayOffset: CGPoint {
+        model.tool == .crop ? model.cropOffset : .zero
+    }
+
     private var imageSize: CGSize {
-        CGSize(width: model.image.width, height: model.image.height)
+        CGSize(width: displayedImage.width, height: displayedImage.height)
     }
 
     private func geometry(for geo: GeometryProxy) -> (scale: CGFloat, drawSize: CGSize, origin: CGPoint) {
@@ -543,18 +779,150 @@ struct ScreenshotPane: View {
     }
 
     @State private var currentStroke: [CGPoint] = []
+    @State private var cropDrag: CropDrag?
+    @State private var cropStartRect = CGRect.zero
+
+    /// Which part of the crop rect a drag is manipulating.
+    private enum CropDrag {
+        case move, n, s, e, w, ne, nw, se, sw
+    }
+
+    /// Hit-test the drag start against the crop handles (corners, edge
+    /// midpoints), then the interior (move). Nil = outside the crop rect.
+    private func cropHandle(at viewPoint: CGPoint, cropView: CGRect) -> CropDrag? {
+        let points: [(CropDrag, CGPoint)] = [
+            (.nw, CGPoint(x: cropView.minX, y: cropView.minY)),
+            (.n, CGPoint(x: cropView.midX, y: cropView.minY)),
+            (.ne, CGPoint(x: cropView.maxX, y: cropView.minY)),
+            (.e, CGPoint(x: cropView.maxX, y: cropView.midY)),
+            (.se, CGPoint(x: cropView.maxX, y: cropView.maxY)),
+            (.s, CGPoint(x: cropView.midX, y: cropView.maxY)),
+            (.sw, CGPoint(x: cropView.minX, y: cropView.maxY)),
+            (.w, CGPoint(x: cropView.minX, y: cropView.midY)),
+        ]
+        for (drag, point) in points where hypot(point.x - viewPoint.x, point.y - viewPoint.y) <= 16 {
+            return drag
+        }
+        return cropView.contains(viewPoint) ? .move : nil
+    }
+
+    /// Compute the crop rect for a drag, clamped to the image and with a
+    /// minimum size. The dragged edge/corner follows the pointer; the
+    /// opposite side stays put.
+    private static func resizedCropRect(from start: CGRect, drag: CropDrag, delta: CGSize, bounds: CGRect) -> CGRect {
+        let minSize: CGFloat = 10
+        switch drag {
+        case .move:
+            var rect = start.offsetBy(dx: delta.width, dy: delta.height)
+            rect.origin.x = min(max(rect.origin.x, bounds.minX), bounds.maxX - rect.width)
+            rect.origin.y = min(max(rect.origin.y, bounds.minY), bounds.maxY - rect.height)
+            return rect
+        case .n, .s, .e, .w:
+            var minX = start.minX, maxX = start.maxX
+            var minY = start.minY, maxY = start.maxY
+            if drag == .w { minX = min(max(start.minX + delta.width, bounds.minX), start.maxX - minSize) }
+            if drag == .e { maxX = max(min(start.maxX + delta.width, bounds.maxX), start.minX + minSize) }
+            if drag == .n { minY = min(max(start.minY + delta.height, bounds.minY), start.maxY - minSize) }
+            if drag == .s { maxY = max(min(start.maxY + delta.height, bounds.maxY), start.minY + minSize) }
+            return CGRect(x: minX, y: minY, width: maxX - minX, height: maxY - minY)
+        case .nw, .ne, .sw, .se:
+            // Corner drag: the opposite corner is the anchor; normalize so
+            // the anchor stays fixed whichever way the pointer goes.
+            let anchor = CGPoint(
+                x: (drag == .nw || drag == .sw) ? start.maxX : start.minX,
+                y: (drag == .nw || drag == .ne) ? start.maxY : start.minY
+            )
+            let moved = CGPoint(
+                x: min(max(((drag == .nw || drag == .sw) ? start.minX : start.maxX) + delta.width, bounds.minX), bounds.maxX),
+                y: min(max(((drag == .nw || drag == .ne) ? start.minY : start.maxY) + delta.height, bounds.minY), bounds.maxY)
+            )
+            let rect = CGRect(
+                x: min(anchor.x, moved.x), y: min(anchor.y, moved.y),
+                width: abs(moved.x - anchor.x), height: abs(moved.y - anchor.y)
+            )
+            return (rect.width >= minSize && rect.height >= minSize) ? rect : start
+        }
+    }
+
+    private func updateCropDrag(_ value: DragGesture.Value, scale: CGFloat, origin: CGPoint) {
+        guard let current = model.cropRect else { return }
+        let bounds = CGRect(origin: .zero, size: imageSize)
+        if cropDrag == nil {
+            let cropView = CGRect(
+                x: origin.x + current.minX * scale, y: origin.y + current.minY * scale,
+                width: current.width * scale, height: current.height * scale
+            )
+            if let handle = cropHandle(at: value.startLocation, cropView: cropView) {
+                cropDrag = handle
+                cropStartRect = current
+            } else {
+                // Started outside the crop rect: draw a fresh one anchored
+                // where the drag began (handled by the .se anchor math).
+                let anchor = toImagePoint(value.startLocation, scale: scale, origin: origin)
+                guard bounds.contains(anchor) else { return }
+                cropDrag = .se
+                cropStartRect = CGRect(origin: anchor, size: .zero)
+            }
+        }
+        guard let drag = cropDrag else { return }
+        let delta = CGSize(width: value.translation.width / scale, height: value.translation.height / scale)
+        let newRect = Self.resizedCropRect(from: cropStartRect, drag: drag, delta: delta, bounds: bounds)
+        guard newRect.width >= 1, newRect.height >= 1 else { return }
+        model.cropRect = newRect
+    }
+
+    @Environment(\.displayScale) private var displayScale
 
     var body: some View {
         GeometryReader { geo in
-            let (scale, drawSize, origin) = geometry(for: geo)
+            if model.isActualSize {
+                // Actual size: 1 image pixel per screen pixel (view scale =
+                // 1/displayScale). Scrollable when larger than the viewport;
+                // centred when smaller.
+                let scale = 1 / max(displayScale, 0.01)
+                let drawSize = CGSize(width: imageSize.width * scale, height: imageSize.height * scale)
+                let origin = CGPoint(
+                    x: max(0, (geo.size.width - drawSize.width) / 2),
+                    y: max(0, (geo.size.height - drawSize.height) / 2)
+                )
+                ScrollView([.horizontal, .vertical]) {
+                    imageContent(scale: scale, drawSize: drawSize, origin: origin)
+                        .frame(
+                            width: max(drawSize.width, geo.size.width),
+                            height: max(drawSize.height, geo.size.height)
+                        )
+                }
+            } else {
+                let (scale, drawSize, origin) = geometry(for: geo)
+                imageContent(scale: scale, drawSize: drawSize, origin: origin)
+                    .frame(width: geo.size.width, height: geo.size.height)
+            }
+        }
+    }
 
-            ZStack {
+    /// The image card with annotations, selection and crop overlays, plus
-                Image(nsImage: NSImage(cgImage: model.image, size: .zero))
+    /// the drag gesture. Parameterized by scale/origin so it works both
+    /// fit-to-window and at actual size inside the ScrollView.
+    private func imageContent(scale: CGFloat, drawSize: CGSize, origin: CGPoint) -> some View {
+        let cardRect = CGRect(origin: origin, size: drawSize)
+        let cardClip = RoundedRectangle(cornerRadius: 10).path(in: cardRect)
+        let strokeOffset = strokeDisplayOffset
+
+        return ZStack {
+                // Card behind the image
+                RoundedRectangle(cornerRadius: 10)
+                    .fill(CapStyle.card)
+                    .shadow(color: Color.black.opacity(0.08), radius: 8, y: 2)
+                    .frame(width: drawSize.width, height: drawSize.height)
+                    .position(x: cardRect.midX, y: cardRect.midY)
+
+                Image(nsImage: NSImage(cgImage: displayedImage, size: .zero))
                     .resizable()
-                    .interpolation(imageSize.width >= geo.size.width ? .high : .none)
+                    .interpolation(scale < 1 ? .high : .none)
                     .aspectRatio(contentMode: .fit)
                     .frame(width: drawSize.width, height: drawSize.height)
-                    .position(x: origin.x + drawSize.width / 2, y: origin.y + drawSize.height / 2)
+                    .clipShape(RoundedRectangle(cornerRadius: 10))
+                    .position(x: cardRect.midX, y: cardRect.midY)
 
                 // Completed strokes
                 Canvas { context, _ in
@@ -564,23 +932,24 @@ struct ScreenshotPane: View {
                             let xs = stroke.points.map { $0.x }
                             let ys = stroke.points.map { $0.y }
                             let bar = CGRect(
-                                x: origin.x + (xs.min()! - 2) * scale,
+                                x: origin.x + (xs.min()! + strokeOffset.x - 2) * scale,
-                                y: origin.y + (ys.min()! - 2) * scale,
+                                y: origin.y + (ys.min()! + strokeOffset.y - 2) * scale,
                                 width: ((xs.max()! - xs.min()!) + 4) * scale,
                                 height: (max(stroke.width, ys.max()! - ys.min()!) + 4) * scale
                             )
                             context.fill(Path(bar), with: .color(.black))
                         } else {
                             var path = Path()
-                            path.move(to: CGPoint(x: origin.x + stroke.points[0].x * scale, y: origin.y + stroke.points[0].y * scale))
+                            path.move(to: CGPoint(x: origin.x + (stroke.points[0].x + strokeOffset.x) * scale, y: origin.y + (stroke.points[0].y + strokeOffset.y) * scale))
                             for point in stroke.points.dropFirst() {
-                                path.addLine(to: CGPoint(x: origin.x + point.x * scale, y: origin.y + point.y * scale))
+                                path.addLine(to: CGPoint(x: origin.x + (point.x + strokeOffset.x) * scale, y: origin.y + (point.y + strokeOffset.y) * scale))
                             }
                             // stroke.width is in image pixels; scale to view points
                             context.stroke(path, with: .color(Color(nsColor: stroke.color)), lineWidth: stroke.width * scale)
                         }
                     }
                 }
+                .clipShape(cardClip)
                 .allowsHitTesting(false)
 
                 // In-progress stroke
@@ -588,13 +957,71 @@ struct ScreenshotPane: View {
                     Canvas { context, _ in
                         var path = Path()
                         if currentStroke.count > 1 {
-                            path.move(to: CGPoint(x: origin.x + currentStroke[0].x * scale, y: origin.y + currentStroke[0].y * scale))
+                            path.move(to: CGPoint(x: origin.x + (currentStroke[0].x + strokeOffset.x) * scale, y: origin.y + (currentStroke[0].y + strokeOffset.y) * scale))
                             for point in currentStroke.dropFirst() {
-                                path.addLine(to: CGPoint(x: origin.x + point.x * scale, y: origin.y + point.y * scale))
+                                path.addLine(to: CGPoint(x: origin.x + (point.x + strokeOffset.x) * scale, y: origin.y + (point.y + strokeOffset.y) * scale))
                             }
                         }
                         context.stroke(path, with: .color(Color(nsColor: model.drawColor)), lineWidth: model.strokeWidth)
                     }
+                    .clipShape(cardClip)
+                    .allowsHitTesting(false)
+                }
+
+                // Card hairline border
+                RoundedRectangle(cornerRadius: 10)
+                    .strokeBorder(CapStyle.border, lineWidth: 1)
+                    .frame(width: drawSize.width, height: drawSize.height)
+                    .position(x: cardRect.midX, y: cardRect.midY)
+                    .allowsHitTesting(false)
+
+                if model.tool == .crop, let crop = model.cropRect {
+                    let cropView = CGRect(
+                        x: origin.x + crop.minX * scale,
+                        y: origin.y + crop.minY * scale,
+                        width: crop.width * scale,
+                        height: crop.height * scale
+                    )
+                    Canvas { context, size in
+                        // Dim everything outside the crop rect.
+                        var dim = Path()
+                        dim.addRect(CGRect(origin: .zero, size: size))
+                        dim.addRect(cropView)
+                        context.fill(dim, with: .color(.black.opacity(0.45)), style: FillStyle(eoFill: true))
+
+                        // Rule-of-thirds grid.
+                        var grid = Path()
+                        for i in 1..<3 {
+                            let x = cropView.minX + cropView.width * CGFloat(i) / 3
+                            grid.move(to: CGPoint(x: x, y: cropView.minY))
+                            grid.addLine(to: CGPoint(x: x, y: cropView.maxY))
+                            let y = cropView.minY + cropView.height * CGFloat(i) / 3
+                            grid.move(to: CGPoint(x: cropView.minX, y: y))
+                            grid.addLine(to: CGPoint(x: cropView.maxX, y: y))
+                        }
+                        context.stroke(grid, with: .color(.white.opacity(0.35)), lineWidth: 1)
+
+                        // Border.
+                        context.stroke(Path(cropView), with: .color(.white), lineWidth: 1.5)
+
+                        // Handles: white dots at corners and edge midpoints.
+                        let handles: [CGPoint] = [
+                            CGPoint(x: cropView.minX, y: cropView.minY),
+                            CGPoint(x: cropView.midX, y: cropView.minY),
+                            CGPoint(x: cropView.maxX, y: cropView.minY),
+                            CGPoint(x: cropView.maxX, y: cropView.midY),
+                            CGPoint(x: cropView.maxX, y: cropView.maxY),
+                            CGPoint(x: cropView.midX, y: cropView.maxY),
+                            CGPoint(x: cropView.minX, y: cropView.maxY),
+                            CGPoint(x: cropView.minX, y: cropView.midY),
+                        ]
+                        for point in handles {
+                            let dot = Path(ellipseIn: CGRect(x: point.x - 4, y: point.y - 4, width: 8, height: 8))
+                            context.fill(dot, with: .color(.white))
+                            context.stroke(dot, with: .color(.black.opacity(0.4)), lineWidth: 1)
+                        }
+                    }
+                    .clipShape(cardClip)
                     .allowsHitTesting(false)
                 }
 
@@ -606,8 +1033,8 @@ struct ScreenshotPane: View {
                         height: sel.height * scale
                     )
                     Rectangle()
-                        .fill(Color.accentColor.opacity(0.15))
+                        .fill(CapStyle.blue.opacity(0.15))
-                        .border(Color.accentColor, width: 1.5)
+                        .border(CapStyle.blue, width: 1.5)
                         .frame(width: viewRect.width, height: viewRect.height)
                         .position(x: viewRect.midX, y: viewRect.midY)
                         .allowsHitTesting(false)
@@ -617,7 +1044,9 @@ struct ScreenshotPane: View {
             .gesture(
                 DragGesture(minimumDistance: 0)
                     .onChanged { value in
-                        if model.tool != .select {
+                        if model.tool == .crop {
+                            updateCropDrag(value, scale: scale, origin: origin)
+                        } else if model.tool != .select {
                             let p = toImagePoint(value.location, scale: scale, origin: origin)
                             let imgRect = CGRect(origin: .zero, size: imageSize)
                             if imgRect.contains(p) {
@@ -636,7 +1065,9 @@ struct ScreenshotPane: View {
                         }
                     }
                     .onEnded { _ in
-                        if model.tool != .select {
+                        if model.tool == .crop {
+                            cropDrag = nil
+                        } else if model.tool != .select {
                             if currentStroke.count > 1 {
                                 model.addStroke(currentStroke, widthPx: model.strokeWidth / max(scale, 0.01))
                             }
@@ -648,6 +1079,5 @@ struct ScreenshotPane: View {
                         }
                     }
             )
-        }
     }
 }

Sources/Kapture/ScreenRecorder.swift

@@ -0,0 +1,203 @@
+import AppKit
+import AVFoundation
+import CoreMedia
+import ScreenCaptureKit
+
+/// Records a screen region (or a single window) to an H.264 .mov via
+/// SCStream -> AVAssetWriter. Works on macOS 13+ (no SCScreenshotManager).
+///
+/// Video-only for now: the audio path is wired behind `includeAudio`
+/// (off) — enabling sound later means setting the flag to true, which
+/// turns on `capturesAudio`, adds an AAC track, and starts appending
+/// audio sample buffers. That path is untested until enabled.
+final class ScreenRecorder: NSObject, SCStreamOutput, SCStreamDelegate {
+    /// Future: also record system audio into the .mov.
+    var includeAudio = false
+
+    private let queue = DispatchQueue(label: "dev.tzgyn.kapture.rec")
+    private var stream: SCStream?
+    private var writer: AVAssetWriter?
+    private var videoInput: AVAssetWriterInput?
+    private var audioInput: AVAssetWriterInput?
+    private var sessionStarted = false
+    private var outputURL: URL?
+
+    /// `region` is in AppKit global points. When `windowID` is given the
+    /// stream records that window directly (and follows it if it moves);
+    /// otherwise it records `region` via a display filter + sourceRect.
+    func start(region: NSRect, windowID: CGWindowID?, excludingWindowIDs: [Int], completion: @escaping (Bool) -> Void) {
+        Task {
+            do {
+                try await prepare(region: region, windowID: windowID, excludingWindowIDs: excludingWindowIDs)
+                completion(true)
+            } catch {
+                CaptureController.log("rec: start failed: \(error.localizedDescription)")
+                completion(false)
+            }
+        }
+    }
+
+    private func prepare(region: NSRect, windowID: CGWindowID?, excludingWindowIDs: [Int]) async throws {
+        let content = try await SCShareableContent.current
+
+        let excludedSet = Set(excludingWindowIDs.map { CGWindowID($0) })
+        let excluded = content.windows.filter { excludedSet.contains($0.windowID) }
+
+        let config = SCStreamConfiguration()
+        let filter: SCContentFilter
+        let pixelWidth: Int
+        let pixelHeight: Int
+
+        let regionCentre = NSPoint(x: region.midX, y: region.midY)
+        let screen = NSScreen.screens.first(where: { $0.frame.contains(regionCentre) }) ?? NSScreen.screens.first
+        let scale = screen?.backingScaleFactor ?? 2
+
+        if let windowID, let scWindow = content.windows.first(where: { $0.windowID == windowID }) {
+            filter = SCContentFilter(desktopIndependentWindow: scWindow)
+            pixelWidth = max(2, Int(scWindow.frame.width * scale) / 2 * 2)
+            pixelHeight = max(2, Int(scWindow.frame.height * scale) / 2 * 2)
+            CaptureController.log("rec: window id=\(windowID) \(pixelWidth)x\(pixelHeight)")
+        } else {
+            guard let screen else {
+                throw NSError(domain: "dev.tzgyn.kapture", code: 1, userInfo: [NSLocalizedDescriptionKey: "No screen for region"])
+            }
+            let cgID = (screen.deviceDescription[NSDeviceDescriptionKey("NSScreenNumber")] as? NSNumber)?.uint32Value ?? 0
+            guard let display = content.displays.first(where: { $0.displayID == cgID }) ?? content.displays.first else {
+                throw NSError(domain: "dev.tzgyn.kapture", code: 2, userInfo: [NSLocalizedDescriptionKey: "No display for region"])
+            }
+            filter = SCContentFilter(display: display, excludingWindows: excluded)
+            // sourceRect is display-local POINTS with a TOP-LEFT origin
+            // (same mapping cropFrozen uses for the frozen snapshots).
+            let local = CGRect(
+                x: region.minX - screen.frame.minX,
+                y: screen.frame.maxY - region.maxY,
+                width: region.width,
+                height: region.height
+            ).intersection(CGRect(x: 0, y: 0, width: display.frame.width, height: display.frame.height))
+            guard local.width >= 2, local.height >= 2 else {
+                throw NSError(domain: "dev.tzgyn.kapture", code: 3, userInfo: [NSLocalizedDescriptionKey: "Region outside display"])
+            }
+            config.sourceRect = local
+            pixelWidth = max(2, Int(local.width * scale) / 2 * 2)
+            pixelHeight = max(2, Int(local.height * scale) / 2 * 2)
+            CaptureController.log("rec: region \(region) sourceRect=\(local) \(pixelWidth)x\(pixelHeight)")
+        }
+
+        config.width = pixelWidth
+        config.height = pixelHeight
+        config.minimumFrameInterval = CMTime(value: 1, timescale: 60)
+        config.pixelFormat = kCVPixelFormatType_32BGRA
+        // Recordings SHOULD include the pointer (unlike stills).
+        config.showsCursor = true
+        config.queueDepth = 6
+        config.capturesAudio = includeAudio
+
+        let movies = FileManager.default.urls(for: .moviesDirectory, in: .userDomainMask).first
+            ?? URL(fileURLWithPath: NSHomeDirectory())
+        let url = movies.appendingPathComponent("Kapture-\(Self.timestamp()).mov")
+        let writer = try AVAssetWriter(url: url, fileType: .mov)
+
+        let videoInput = AVAssetWriterInput(mediaType: .video, outputSettings: [
+            AVVideoCodecKey: AVVideoCodecType.h264,
+            AVVideoWidthKey: pixelWidth,
+            AVVideoHeightKey: pixelHeight,
+        ])
+        videoInput.expectsMediaDataInRealTime = true
+        writer.add(videoInput)
+
+        var audioInput: AVAssetWriterInput?
+        if includeAudio {
+            let input = AVAssetWriterInput(mediaType: .audio, outputSettings: [
+                AVFormatIDKey: kAudioFormatMPEG4AAC,
+                AVSampleRateKey: 48000,
+                AVNumberOfChannelsKey: 2,
+            ])
+            input.expectsMediaDataInRealTime = true
+            writer.add(input)
+            audioInput = input
+        }
+
+        guard writer.startWriting() else {
+            throw writer.error ?? NSError(domain: "dev.tzgyn.kapture", code: 4, userInfo: [NSLocalizedDescriptionKey: "AVAssetWriter failed to start"])
+        }
+
+        let stream = SCStream(filter: filter, configuration: config, delegate: self)
+        try stream.addStreamOutput(self, type: .screen, sampleHandlerQueue: queue)
+        if includeAudio {
+            try stream.addStreamOutput(self, type: .audio, sampleHandlerQueue: queue)
+        }
+        try await stream.startCapture()
+
+        self.stream = stream
+        self.writer = writer
+        self.videoInput = videoInput
+        self.audioInput = audioInput
+        self.outputURL = url
+        CaptureController.log("rec: started -> \(url.lastPathComponent)")
+    }
+
+    /// Stops the stream and finalizes the file. Completion gets the URL on
+    /// success (called on an internal queue — hop to main for UI).
+    func stop(completion: @escaping (URL?) -> Void) {
+        Task {
+            try? await stream?.stopCapture()
+            stream = nil
+            queue.async {
+                guard let writer = self.writer else {
+                    completion(nil)
+                    return
+                }
+                self.videoInput?.markAsFinished()
+                self.audioInput?.markAsFinished()
+                let url = self.outputURL
+                self.writer = nil
+                self.videoInput = nil
+                self.audioInput = nil
+                self.sessionStarted = false
+                writer.finishWriting {
+                    CaptureController.log("rec: finished status=\(writer.status.rawValue)")
+                    completion(writer.status == .completed ? url : nil)
+                }
+            }
+        }
+    }
+
+    // MARK: SCStreamOutput (called on `queue`)
+
+    func stream(_ stream: SCStream, didOutputSampleBuffer sampleBuffer: CMSampleBuffer, of type: SCStreamOutputType) {
+        guard CMSampleBufferDataIsReady(sampleBuffer), let writer, let videoInput else { return }
+        switch type {
+        case .screen:
+            // Skip incomplete frames (macOS 13.1+ exposes a frame status).
+            if #available(macOS 13.1, *) {
+                guard let attachments = (CMSampleBufferGetSampleAttachmentsArray(sampleBuffer, createIfNecessary: false) as? [NSDictionary])?.first,
+                      let dict = attachments as? [String: Any],
+                      let statusRaw = dict[SCStreamFrameInfo.status.rawValue] as? Int,
+                      SCFrameStatus(rawValue: statusRaw) == .complete else { return }
+            }
+            guard videoInput.isReadyForMoreMediaData else { return }
+            if !sessionStarted {
+                sessionStarted = true
+                writer.startSession(atSourceTime: CMSampleBufferGetPresentationTimeStamp(sampleBuffer))
+            }
+            videoInput.append(sampleBuffer)
+        case .audio:
+            guard includeAudio, sessionStarted, let audioInput, audioInput.isReadyForMoreMediaData else { return }
+            audioInput.append(sampleBuffer)
+        default:
+            break
+        }
+    }
+
+    // MARK: SCStreamDelegate
+
+    func stream(_ stream: SCStream, didStopWithError error: Error) {
+        CaptureController.log("rec: stream stopped with error: \(error.localizedDescription)")
+    }
+
+    private static func timestamp() -> String {
+        let formatter = DateFormatter()
+        formatter.dateFormat = "yyyyMMdd-HHmmss"
+        return formatter.string(from: Date())
+    }
+}

build-app.sh

@@ -108,9 +108,9 @@ cat > "$APP/Contents/Info.plist" <<'PLIST'
     <key>CFBundleIconFile</key>
     <string>Icon</string>
     <key>CFBundleShortVersionString</key>
-    <string>1.10.0</string>
+    <string>1.11.1</string>
     <key>CFBundleVersion</key>
-    <string>100</string>
+    <string>111</string>
     <key>LSUIElement</key>
     <true/>
     <key>NSHighResolutionCapable</key>