node-mac-recorder 2.24.3 → 2.24.5

package/index.js

@@ -2,6 +2,12 @@ const { EventEmitter } = require("events");
 const path = require("path");
 const fs = require("fs");
 
+// Videonun ilk karesi yakalanana kadar beklenecek ust sinir.
+// Normalde birkac yuz ms; clamshell'de ekran envanteri yeniden kuruldugu icin
+// saniyelere cikabiliyor. Beklemek, cursor'i yanlis referansa baglamaktan iyidir.
+const VIDEO_START_TIMEOUT_MS = 12000;
+const VIDEO_START_POLL_MS = 10;
+
 // Auto-switch to Electron-safe implementation when running under Electron and binary exists
 let USE_ELECTRON_SAFE = false;
 let ElectronSafeMacRecorder = null;
@@ -860,77 +866,91 @@ class MacRecorder extends EventEmitter {
 
 				// Only start cursor if native recording started successfully
 				if (success) {
-					// For ScreenCaptureKit (async startup), wait briefly until native fully initialized
-					// ScreenCaptureKit needs ~150-300ms to start + ~150ms for first 10 frames
-					const waitStart = Date.now();
-					try {
-						while (Date.now() - waitStart < 600) {
-							try {
-								const nativeStatus = nativeBinding && nativeBinding.getRecordingStatus ? nativeBinding.getRecordingStatus() : true;
-								if (nativeStatus) {
-									console.log(`✅ SYNC: Native recording fully ready after ${Date.now() - waitStart}ms`);
-									break;
-								}
-							} catch (_) {}
-							await new Promise(r => setTimeout(r, 30));
+					// ==========================================================
+					// VIDEONUN ILK KARESINI BEKLE — SENKRONUN TEMELI
+					// ==========================================================
+					// getRecordingStatus() BU AMAC ICIN KULLANILAMAZ:
+					// ScreenCaptureKit stream'i henuz baslamadiysa native taraf
+					// `g_isRecording` fallback'ine dusup TRUE donuyor, yani
+					// "kayit komutu verildi"yi "kayit basladi" saniyor.
+					// Olculdu: "fully ready after 0ms" + videoStartTimestamp = 0.
+					// Sonucu: cursor timeline'i video'dan ONCE basliyor. Normal
+					// kosulda fark ~150-300ms, clamshell'de (ekran envanteri
+					// yeniden kuruldugu icin) SANIYELER — editordeki 1sn'lik
+					// telafi limiti bunu kapatamiyor ve cursor gorunur sekilde kayiyor.
+					//
+					// Dogru sinyal getVideoStartTimestamp(): native ilk kareyi
+					// yakalayip g_videoStartTime'i set ettiginde gecerli bir
+					// wall-clock degeri doner. Timeline'i buna baglayinca
+					// baslatma hizi (prewarm vb.) senkronu ETKILEMEZ.
+					const usesScreenCaptureKit =
+						this.options.preferScreenCaptureKit === true;
+
+					const readVideoStart = () => {
+						try {
+							const value = Number(
+								typeof nativeBinding.getVideoStartTimestamp === 'function'
+									? nativeBinding.getVideoStartTimestamp()
+									: 0
+							);
+							return Number.isFinite(value) && value > 0 ? value : 0;
+						} catch (_) {
+							return 0;
 						}
-					} catch (_) {}
+					};
+
+					// ONEMLI: Bu bekleme BLOKLAMAZ.
+					// Ilk kare, yakalandigi andan ~200ms+ sonra islenip bize ulasiyor
+					// (clamshell'de saniyeler). startRecording bunu beklerse kayit
+					// coktan basladigi halde UI "Starting..." gostergesinde takili
+					// kaliyor. Bu yuzden cursor/klavye HEMEN baslatiliyor (veri kaybi
+					// olmasin), video baslangici ARKA PLANDA yakalanip saklaniyor;
+					// stop sirasinda cursor JSON'una gercek offset yaziliyor ve
+					// editor bunu birebir telafi ediyor.
 					this.sessionTimestamp = sessionTimestamp;
+					this.videoStartTimestamp = 0;
 
-					// Native sync_timeline handles A/V alignment - no JS-level delay needed
 					const syncTimestamp = Date.now();
 					this.syncTimestamp = syncTimestamp;
 					this.recordingStartTime = syncTimestamp;
-					console.log(`🎯 CURSOR SYNC: Cursor tracking will use timestamp: ${syncTimestamp}`);
-
-					// CURSOR/VIDEO TIME ALIGNMENT:
-					// Cursor timeline'in t=0'i bu andir (syncTimestamp), ama videonun
-					// ILK KARESI daha once yakalanmis olabilir (ScreenCaptureKit
-					// baslatma gecikmesi + yukaridaki hazir-olma beklemesi). Editor
-					// "cursor'un ilk ornegi = video t=0" varsayarsa aradaki fark sabit
-					// bir zaman kaymasi olarak kalir. Native gercek video baslangicini
-					// biliyor; okuyup sakla ki stop'ta cursor JSON'una yazabilelim.
-					this.videoStartTimestamp = 0;
-					// Onceki kayittan kalan referans sizmasin
-					this.timelineStartTimestamp = 0;
-					try {
-						const nativeVideoStart =
-							typeof nativeBinding.getVideoStartTimestamp === 'function'
-								? Number(nativeBinding.getVideoStartTimestamp())
-								: 0;
-						if (Number.isFinite(nativeVideoStart) && nativeVideoStart > 0) {
-							this.videoStartTimestamp = nativeVideoStart;
-							console.log(
-								`🎯 SYNC: Video first-frame timestamp: ${nativeVideoStart} (cursor starts ${(syncTimestamp - nativeVideoStart).toFixed(0)}ms later)`
-							);
-						} else {
-							console.warn('⚠️ SYNC: Video start timestamp unavailable — cursor sync metadata will be skipped');
-						}
-					} catch (videoStartError) {
-						console.warn('⚠️ SYNC: Video start timestamp read failed:', videoStartError.message);
+					this.timelineStartTimestamp = syncTimestamp;
+
+					if (usesScreenCaptureKit) {
+						const watchStart = Date.now();
+						this._videoStartWatcherActive = true;
+						this._videoStartWatcher = (async () => {
+							while (
+								this._videoStartWatcherActive &&
+								Date.now() - watchStart < VIDEO_START_TIMEOUT_MS
+							) {
+								const value = readVideoStart();
+								if (value > 0) {
+									this.videoStartTimestamp = value;
+									console.log(
+										`✅ SYNC: Video ilk karesi ${Date.now() - watchStart}ms'de yakalandi (cursor'a gore ${(syncTimestamp - value).toFixed(0)}ms once)`
+									);
+									return value;
+								}
+								await new Promise(r => setTimeout(r, VIDEO_START_POLL_MS));
+							}
+							if (this._videoStartWatcherActive) {
+								console.warn(
+									`⚠️ SYNC: Video baslangici ${VIDEO_START_TIMEOUT_MS}ms icinde okunamadi — heuristik hizalamaya dusuluyor`
+								);
+							}
+							return 0;
+						})();
+						// Kayit akisini etkilemesin
+						this._videoStartWatcher.catch(() => {});
 					}
 
-					// ZAMAN REFERANSI: cursor/klavye timeline'i VIDEONUN ilk karesine
-					// hizalanir, JS'in "kayit hazir" dedigi ana degil.
-					//
-					// NEDEN: syncTimestamp, yukaridaki hazir-olma dongusunden sonraki an.
-					// Bu an ile videonun gercek t=0'i arasindaki fark, baslatma hizina
-					// gore DEGISIYOR (ornegin ScreenCaptureKit isitilmissa video cok daha
-					// erken basliyor). Cursor bu degisken ana baglanirsa her kayitta
-					// farkli bir kayma olusuyor ve editordeki telafi 1sn limitine
-					// takilabiliyor. Videonun kendi baslangicini referans alinca fark
-					// yapisal olarak sifir olur; hizlanma senkronu bozmaz.
-					const timelineStartTimestamp =
-						this.videoStartTimestamp > 0
-							? this.videoStartTimestamp
-							: syncTimestamp;
-					this.timelineStartTimestamp = timelineStartTimestamp;
-
-					if (timelineStartTimestamp !== syncTimestamp) {
-						console.log(
-							`🎯 SYNC: Timeline referansi video ilk karesine cekildi (${(syncTimestamp - timelineStartTimestamp).toFixed(0)}ms geri)`
-						);
-					}
+					// ZAMAN REFERANSI: cursor/klavye timeline'i SIMDI baslar
+					// (syncTimestamp). Videonun gercek t=0'i genelde bundan biraz
+					// oncedir; aradaki fark stop'ta cursor JSON'una yazilir ve
+					// editor birebir telafi eder. Bekleyip "sifir offset" elde
+					// etmek yerine bu yol tercih ediliyor cunku bekleme, kayit
+					// coktan basladigi halde UI'i "Starting..." halinde tutuyordu.
+					const timelineStartTimestamp = syncTimestamp;
 
 					const standardCursorOptions = {
 						videoRelative: true,
@@ -1044,11 +1064,43 @@ class MacRecorder extends EventEmitter {
 					}, 1000);
 
 					// Native kayıt gerçekten başladığını kontrol etmek için polling başlat
+					//
+					// KRITIK: getRecordingStatus() TEK BASINA KULLANILAMAZ.
+					// ScreenCaptureKit yolunda `isFullyInitialized` = 10 KARE sarti
+					// arıyor. Ama video writer ILK KAREDE basliyor — yani kayit
+					// coktan basladigi halde bu bayrak false kalabiliyor.
+					// ScreenCaptureKit statik ekranda yeni kare URETMEDIGI icin
+					// (sadece degisiklik oldugunda kare gonderir) kullanici kayda
+					// basip bekledigi anda 10 kare hic dolmuyor ve UI saniyelerce
+					// "Starting recorder..." gosteriyordu; bu sure de videoya giriyordu.
+					//
+					// Dogru sinyal ilk karedir: videoStartTimestamp > 0 (arka plandaki
+					// _videoStartWatcher set eder). Boylece UI, videonun gercek
+					// baslangici ile ayni ana kapanir.
 					let recordingStartedEmitted = false;
 					let checkRecordingStatus = null;
+					const isNativeRecordingLive = () => {
+						if (this.options.preferScreenCaptureKit === true) {
+							// SCK yolunda TEK dogru sinyal ilk karedir.
+							// getRecordingStatus() burada iki yonlu yaniltiyor:
+							//  - SCK stream'i henuz baslamadiysa g_isRecording
+							//    fallback'ine dusup ERKEN true doner (video yokken
+							//    "kayit basladi" denir)
+							//  - SCK basladiysa isFullyInitialized = 10 kare bekler,
+							//    statik ekranda bu hic dolmaz ve GEC true doner
+							// Hangisinin kazandigi yarisa bagli; ilk kare ise kesin.
+							return Number(this.videoStartTimestamp) > 0;
+						}
+						// AVFoundation yolu: video-start damgasi yok, eski sinyal
+						try {
+							return nativeBinding.getRecordingStatus();
+						} catch (_) {
+							return false;
+						}
+					};
 					const pollRecordingStatus = () => {
 						try {
-							const nativeStatus = nativeBinding.getRecordingStatus();
+							const nativeStatus = isNativeRecordingLive();
 							if (nativeStatus && !recordingStartedEmitted) {
 								recordingStartedEmitted = true;
 								clearInterval(checkRecordingStatus);
@@ -1174,13 +1226,25 @@ class MacRecorder extends EventEmitter {
 
 		return new Promise(async (resolve, reject) => {
 			const stopRequestedAt = Date.now();
+			// Sure, VIDEONUN baslangicindan olculur. recordingStartTime (JS'in
+			// hazir oldugunu fark ettigi an) videodan birkac on ms sonra oldugu
+			// icin buradan hesaplanan stopLimit videoyu kuyrugundan kirpiyordu.
+			const durationReference =
+				this.timelineStartTimestamp && this.timelineStartTimestamp > 0
+					? this.timelineStartTimestamp
+					: this.recordingStartTime;
 			const elapsedSeconds =
-				this.recordingStartTime && this.recordingStartTime > 0
-					? (stopRequestedAt - this.recordingStartTime) / 1000
+				durationReference && durationReference > 0
+					? (stopRequestedAt - durationReference) / 1000
 					: -1;
 			try {
 				console.log('🛑 SYNC: Stopping all recording components simultaneously');
 
+				// Video baslangicini bekleyen arka plan izleyicisini sonlandir.
+				// Deger geldiyse zaten this.videoStartTimestamp'e yazildi ve
+				// cursor metadata'sinda kullanilacak.
+				this._videoStartWatcherActive = false;
+
 				// SYNC FIX: Stop ALL components at the same time for perfect sync
 				// 1. Stop cursor tracking FIRST (it's instant)
 				if (this.cursorCaptureInterval) {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "node-mac-recorder",
-	"version": "2.24.3",
+	"version": "2.24.5",
 	"description": "Native macOS screen recording package for Node.js applications",
 	"main": "index.js",
 	"keywords": [

package/src/mac_recorder.mm

@@ -627,14 +627,39 @@ Napi::Value StartRecording(const Napi::CallbackInfo& info) {
                     // Use ScreenCaptureKit with window exclusion and timeout protection
                     NSError *sckError = nil;
 
-                    // A/V SYNC: Start camera non-blocking BEFORE ScreenCaptureKit
-                    // Camera warmup overlaps with async SCK initialization
+                    // A/V SYNC: Kamera SCK'dan ONCE baslatilir VE onayi burada beklenir.
+                    //
+                    // ESKIDEN: kamera non-blocking baslatilip SCK hemen schedule
+                    // ediliyor, kamera onayi SCK'dan SONRA bekleniyordu. Sorun:
+                    // SCK schedule edilir edilmez video ilk karesini yakalayip
+                    // KAYDA BASLIYOR, ama JS tarafi hala kamera onayini bekledigi
+                    // icin (startRecording senkron bir N-API cagrisi, event loop
+                    // bloke) "kayit basladi" sinyali ~1sn gec gidiyordu.
+                    // Olculdu: kamerali startRecording 1319ms / kamerasiz 508ms.
+                    // Bu fark dogrudan videonun basina fazlalik olarak yaziliyor
+                    // ve UI o sure boyunca "Starting recorder..." gosteriyordu.
+                    //
+                    // SIMDI: kamera hazir olduktan SONRA video baslar. Basta
+                    // fazlalik olusmaz ve kamera ile ekran ayni ana hizalanir.
                     if (captureCamera) {
-                        MRLog(@"🎥 Starting camera recording non-blocking (parallel with SCK init)");
+                        MRLog(@"🎥 Starting camera recording (before SCK, blocking until ready)");
                         if (!startCameraIfRequested(true, &cameraOutputPath, cameraDeviceId, outputPath, sessionTimestamp)) {
                             MRLog(@"❌ Camera failed to start - aborting recording");
                             return Napi::Boolean::New(env, false);
                         }
+
+                        if (!waitForCameraRecordingStart(8.0)) {
+                            double cameraStartTs = currentCameraRecordingStartTime();
+                            if (cameraStartTs > 0 || isCameraRecording()) {
+                                MRLog(@"⚠️ Camera did not confirm start within 8.0s but appears running; continuing");
+                            } else {
+                                MRLog(@"❌ Camera did not signal recording start within 8.0s");
+                                stopCameraRecording();
+                                return Napi::Boolean::New(env, false);
+                            }
+                        } else {
+                            MRLog(@"✅ Camera recording confirmed (before SCK start)");
+                        }
                     }
 
                     // Start SCK immediately - don't wait for camera confirmation
@@ -647,21 +672,10 @@ Napi::Value StartRecording(const Napi::CallbackInfo& info) {
                             MRLog(@"🎬 RECORDING METHOD: ScreenCaptureKit");
                             MRLog(@"✅ SYNC: ScreenCaptureKit recording started successfully");
 
-                            // A/V SYNC: Wait for camera AFTER SCK started
-                            if (captureCamera) {
-                                if (!waitForCameraRecordingStart(8.0)) {
-                                    double cameraStartTs = currentCameraRecordingStartTime();
-                                    if (cameraStartTs > 0 || isCameraRecording()) {
-                                        MRLog(@"⚠️ Camera did not confirm start within 8.0s but appears running; continuing");
-                                    } else {
-                                        MRLog(@"❌ Camera did not signal recording start within 8.0s");
-                                        stopCameraRecording();
-                                        [ScreenCaptureKitRecorder stopRecording];
-                                        return Napi::Boolean::New(env, false);
-                                    }
-                                }
-                                MRLog(@"✅ Camera recording confirmed (started in parallel with SCK)");
-                            }
+                            // NOT: Kamera onayi artik SCK'dan ONCE bekleniyor
+                            // (yukariya alindi) — burada blocking bir is kalmadi,
+                            // boylece SCK schedule edildikten sonra JS'e donus
+                            // gecikmiyor ve videonun basinda fazlalik olusmuyor.
 
                             g_isRecording = true;
                             MRMarkRecordingStartTimestamp();

package/src/screen_capture_kit.mm

@@ -167,6 +167,45 @@ static NSInteger g_frameCount = 0;
 static CFAbsoluteTime g_firstFrameTime = 0;
 static const NSInteger kSCKHighQualityVideoBitrate = 100 * 1000 * 1000;
 
+// ---- Prewarm edilmis SCShareableContent onbellegi ----
+// Kayit baslatilirken envanter cagrisini tamamen atlayabilmek icin saklanir.
+// ARC KAPALI: retain/release elle yonetiliyor.
+static id g_cachedShareableContent = nil;
+static CFAbsoluteTime g_cachedShareableContentTime = 0;
+// Bayat envanter yanlis pencere/ekran secimine yol acabilir; kisa tutuluyor.
+static const CFAbsoluteTime kShareableContentCacheTTLSeconds = 30.0;
+
+static void SCKStoreShareableContent(id content) {
+    if (!content) return;
+    @synchronized([ScreenCaptureKitRecorder class]) {
+        if (g_cachedShareableContent != content) {
+            [g_cachedShareableContent release];
+            g_cachedShareableContent = [content retain];
+        }
+        g_cachedShareableContentTime = CFAbsoluteTimeGetCurrent();
+    }
+}
+
+// Taze onbellek varsa doner ve onbellegi bosaltir (her kayit taze envanterle
+// baslasin diye tek kullanimlik). Yoksa nil.
+static id SCKTakeCachedShareableContent(void) {
+    @synchronized([ScreenCaptureKitRecorder class]) {
+        if (!g_cachedShareableContent) {
+            return nil;
+        }
+
+        CFAbsoluteTime age = CFAbsoluteTimeGetCurrent() - g_cachedShareableContentTime;
+        id content = [[g_cachedShareableContent retain] autorelease];
+        [g_cachedShareableContent release];
+        g_cachedShareableContent = nil;
+
+        if (age > kShareableContentCacheTTLSeconds) {
+            return nil;
+        }
+        return content;
+    }
+}
+
 // Quality helpers
 static NSString *SCKNormalizeQualityPreset(id preset) {
     if (![preset isKindOfClass:[NSString class]]) {
@@ -1041,16 +1080,24 @@ extern "C" NSString *ScreenCaptureKitCurrentAudioPath(void) {
 
 + (void)prewarmShareableContent {
     if (@available(macOS 15.0, *)) {
-        // Kayit sirasindaki ilk SCShareableContent cagrisi yavas olabiliyor
-        // (TCC kontrolu + pencere/ekran envanteri). Kayit baslamadan once bir kez
-        // cagirip macOS'un ic cache'ini isitiyoruz. Sonuc kullanilmiyor.
+        // Kayit sirasindaki SCShareableContent cagrisi yavas olabiliyor
+        // (TCC kontrolu + ekran/pencere envanteri). Ozellikle ekran
+        // konfigurasyonu degistikten sonra (clamshell) bu envanter sifirdan
+        // kuruluyor ve saniyeler surebiliyor.
+        //
+        // Sadece "isitmak" yetmiyordu: kayit aninda cagri YINE bastan
+        // yapiliyordu. Artik sonucu saklayip kayitta yeniden kullaniyoruz,
+        // yani bu adim tamamen atlanabiliyor.
         dispatch_async(dispatch_get_global_queue(DISPATCH_QUEUE_PRIORITY_BACKGROUND, 0), ^{
+            CFAbsoluteTime fetchStart = CFAbsoluteTimeGetCurrent();
             [SCShareableContent getShareableContentWithCompletionHandler:^(SCShareableContent *content, NSError *contentError) {
-                if (contentError) {
+                if (contentError || !content) {
                     MRLog(@"⚠️ Prewarm shareable content failed: %@", contentError.localizedDescription);
                     return;
                 }
-                MRLog(@"🔥 Prewarm: shareable content hazir (%lu ekran, %lu pencere)",
+                SCKStoreShareableContent(content);
+                NSLog(@"🔥 Prewarm: shareable content hazir ve saklandi (%.0fms, %lu ekran, %lu pencere)",
+                      (CFAbsoluteTimeGetCurrent() - fetchStart) * 1000.0,
                       (unsigned long)content.displays.count,
                       (unsigned long)content.windows.count);
             }];
@@ -1082,9 +1129,29 @@ extern "C" NSString *ScreenCaptureKitCurrentAudioPath(void) {
         return NO;
     }
 
+    // Prewarm ile alinmis taze envanter varsa cagriyi TAMAMEN atla.
+    // Bu cagri clamshell'de saniyeler surebiliyor ve kayit baslatmanin
+    // en buyuk gecikme kalemi.
+    if (@available(macOS 15.0, *)) {
+        SCShareableContent *prewarmed = (SCShareableContent *)SCKTakeCachedShareableContent();
+        if (prewarmed) {
+            NSLog(@"⚡ Prewarmed shareable content kullanildi — envanter cagrisi atlandi");
+            dispatch_async(controlQueue, ^{
+                SCKPerformRecordingSetup(configCopy, prewarmed);
+            });
+            // NOT: Burada onbellegi tazelemek YOK.
+            // Kayit setup'i calisirken yeni bir SCShareableContent istegi
+            // baslatmak sistem envanterini kayitla ayni anda sorgular ve
+            // kamera/stream baslatmayla yarisir. Tazeleme, kayit bittikten
+            // sonra desktop tarafindaki periyodik isitmaya birakiliyor.
+            return YES;
+        }
+    }
+
     // CRITICAL FIX: Use dispatch_get_global_queue instead of main_queue
     // because Node.js standalone doesn't run macOS main event loop (only Electron does)
     NSLog(@"🚀 Requesting shareable content...");
+    CFAbsoluteTime contentFetchStart = CFAbsoluteTimeGetCurrent();
     dispatch_async(dispatch_get_global_queue(DISPATCH_QUEUE_PRIORITY_HIGH, 0), ^{
         [SCShareableContent getShareableContentWithCompletionHandler:^(SCShareableContent *content, NSError *contentError) {
             if (contentError || !content) {
@@ -1092,7 +1159,8 @@ extern "C" NSString *ScreenCaptureKitCurrentAudioPath(void) {
                 SCKFailScheduling();
                 return;
             }
-            NSLog(@"✅ Got shareable content, starting recording setup...");
+            NSLog(@"✅ Got shareable content in %.0fms, starting recording setup...",
+                  (CFAbsoluteTimeGetCurrent() - contentFetchStart) * 1000.0);
             dispatch_async(controlQueue, ^{
                 SCKPerformRecordingSetup(configCopy, content);
             });

package/src/window_selector.mm

@@ -85,11 +85,31 @@ static bool shouldSkipSelectableWindowOwner(NSString *windowOwner) {
 }
 
 // Record icon helpers
-static NSImage *CreateRecordIconImage(CGFloat size) {
-    const CGFloat leadingInset = 24.0;
-    const CGFloat trailingSpacing = 6.0;
-    CGFloat width = leadingInset + size + trailingSpacing;
-    NSImage *image = [[[NSImage alloc] initWithSize:NSMakeSize(width, size)] autorelease];
+// ---------------------------------------------------------------------------
+// Marka butonu metrikleri — electron/main.cjs içindeki alan seçici `button.primary`
+// ile bire bir: padding 14px 26px | min-width 220px | radius 18px | font 15px/650
+// gap 10px | ikon 20px halka + 8px nokta | hover: translateY(-1px)
+// ---------------------------------------------------------------------------
+static const CGFloat kBrandFontSize = 15.0;
+static const CGFloat kBrandCornerRadius = 18.0;
+static const CGFloat kBrandPaddingX = 26.0;
+static const CGFloat kBrandPaddingY = 16.0;  // web 14px; NSButton'da metin
+                                             // biraz daha sıkışık durduğu için +2
+static const CGFloat kBrandMinWidth = 220.0;
+static const CGFloat kBrandIconDiameter = 20.0;
+static const CGFloat kBrandIconSpacing = 10.0;
+// Hover: web'de renk DEĞİŞMİYOR, buton 1px yukarı kalkıyor.
+static const CGFloat kBrandHoverLift = 1.0;
+
+// CSS açısı (0° = yukarı, saat yönü) -> NSGradient açısı (0° = sağa, saat yönü tersi)
+static const CGFloat kBrandBaseAngle = 259.0;   // CSS 190.98deg
+static const CGFloat kBrandGlossAngle = 249.25; // CSS 200.71deg
+
+// Alan seçicideki .primary-icon ile aynı: 20x20 halka, 2px beyaz kenarlık
+// (%90 alfa), ortasında 8px beyaz nokta. Sağdaki boşluk CSS'teki gap:10px.
+static NSImage *CreateRecordIconImage(CGFloat diameter, CGFloat trailingGap) {
+    CGFloat width = diameter + trailingGap;
+    NSImage *image = [[[NSImage alloc] initWithSize:NSMakeSize(width, diameter)] autorelease];
     if (!image) {
         return nil;
     }
@@ -97,26 +117,25 @@ static NSImage *CreateRecordIconImage(CGFloat size) {
     [image lockFocus];
 
     [[NSColor clearColor] setFill];
-    NSRectFill(NSMakeRect(0, 0, width, size));
+    NSRectFill(NSMakeRect(0, 0, width, diameter));
 
-    CGFloat strokeWidth = MAX(2.0, size * 0.12);
-    NSRect iconRect = NSMakeRect(leadingInset,
-                                 (size - size) / 2.0,
-                                 size,
-                                 size);
+    NSColor *iconColor = [NSColor colorWithSRGBRed:1.0 green:1.0 blue:1.0 alpha:0.9];
+
+    const CGFloat strokeWidth = 2.0;
+    NSRect iconRect = NSMakeRect(0, 0, diameter, diameter);
     NSRect outerRect = NSInsetRect(iconRect, strokeWidth / 2.0, strokeWidth / 2.0);
     NSBezierPath *outerPath = [NSBezierPath bezierPathWithOvalInRect:outerRect];
     [outerPath setLineWidth:strokeWidth];
-    [[NSColor whiteColor] setStroke];
+    [iconColor setStroke];
     [outerPath stroke];
 
-    CGFloat innerDiameter = size * 0.45;
+    const CGFloat innerDiameter = 8.0;
     NSRect innerRect = NSMakeRect(NSMidX(iconRect) - innerDiameter / 2.0,
                                   NSMidY(iconRect) - innerDiameter / 2.0,
                                   innerDiameter,
                                   innerDiameter);
     NSBezierPath *innerPath = [NSBezierPath bezierPathWithOvalInRect:innerRect];
-    [[NSColor whiteColor] setFill];
+    [iconColor setFill];
     [innerPath fill];
 
     [image unlockFocus];
@@ -128,7 +147,7 @@ static NSImage *CreateRecordIconImage(CGFloat size) {
 static NSImage *GetStartRecordIcon(void) {
     static NSImage *recordIcon = nil;
     if (!recordIcon) {
-        recordIcon = [CreateRecordIconImage(18.0) retain];
+        recordIcon = [CreateRecordIconImage(kBrandIconDiameter, kBrandIconSpacing) retain];
     }
     return recordIcon;
 }
@@ -146,15 +165,54 @@ static void ApplyStartRecordButtonIcon(NSButton *button) {
     [button setImage:icon];
     [button setImageScaling:NSImageScaleNone];
     [button setImagePosition:NSImageLeft];
+    // İç boşluk ApplyBrandButtonStyle'da ayarlanıyor (padding 14px 26px).
+}
 
-    if ([button respondsToSelector:@selector(setContentInsets:)]) {
-        NSEdgeInsets insets = NSEdgeInsetsMake(0, 12.0, 0, 12.0);
-        [button setContentInsets:insets];
+// ---------------------------------------------------------------------------
+// Marka butonu — pages/selection.vue içindeki .confirm-button ile aynı görünüm
+//
+//   background: linear-gradient(200.71deg, rgba(255,255,255,.57) -0.3%,
+//                               rgba(255,255,255,0) 70.49%),
+//               linear-gradient(190.98deg, #006aff 26.77%, #0030ff);
+//   color: #fff | padding: 8px 16px | border-radius: 6px | font-size: 14px
+//   hover: filter: brightness(0.92) | transition: 0.2s
+//
+// Arka plan drawRect'te çizilir: CAGradientLayer sublayer olarak eklenince
+// butonun başlığı ve ikonu gradient'in ALTINDA kalıyor.
+// ---------------------------------------------------------------------------
+static NSFont *BrandButtonFont(void) {
+    // CSS: font-size 15px, font-weight 650 (semibold ile bire bir yakın).
+    NSFont *inter = [NSFont fontWithName:@"Inter-SemiBold" size:kBrandFontSize];
+    if (inter) return inter;
+    return [NSFont systemFontOfSize:kBrandFontSize weight:NSFontWeightSemibold];
+}
+
+static NSGradient *BrandBaseGradient(void) {
+    static NSGradient *gradient = nil;
+    if (!gradient) {
+        NSColor *from = [NSColor colorWithSRGBRed:0.0 green:106.0 / 255.0 blue:1.0 alpha:1.0];
+        NSColor *to = [NSColor colorWithSRGBRed:0.0 green:48.0 / 255.0 blue:1.0 alpha:1.0];
+        gradient = [[NSGradient alloc] initWithColorsAndLocations:from, 0.2677, to, 1.0, nil];
     }
+    return gradient;
+}
 
-    if ([button respondsToSelector:@selector(setContentTintColor:)]) {
-        [button setContentTintColor:[NSColor whiteColor]];
+static NSGradient *BrandGlossGradient(void) {
+    static NSGradient *gradient = nil;
+    if (!gradient) {
+        NSColor *from = [NSColor colorWithSRGBRed:1.0 green:1.0 blue:1.0 alpha:0.57];
+        NSColor *to = [NSColor colorWithSRGBRed:1.0 green:1.0 blue:1.0 alpha:0.0];
+        gradient = [[NSGradient alloc] initWithColorsAndLocations:from, 0.0, to, 0.7049, nil];
     }
+    return gradient;
+}
+
+static void DrawBrandBackground(NSRect bounds) {
+    NSBezierPath *path = [NSBezierPath bezierPathWithRoundedRect:bounds
+                                                        xRadius:kBrandCornerRadius
+                                                        yRadius:kBrandCornerRadius];
+    [BrandBaseGradient() drawInBezierPath:path angle:kBrandBaseAngle];
+    [BrandGlossGradient() drawInBezierPath:path angle:kBrandGlossAngle];
 }
 
 // CGWindow (sol-üst orijin) <-> Cocoa (sol-alt orijin) dönüşümünde referans yükseklik
@@ -205,6 +263,10 @@ void updateScreenOverlays();
 // Custom button with hover effects
 @interface HoverButton : NSButton
 @property (nonatomic) BOOL isHovered;
+// Marka butonu (alan seçimindeki mavi buton) görünümü: arka plan drawRect'te
+// çizilir. CAGradientLayer sublayer olarak eklenirse butonun kendi çizimi
+// (başlık + ikon) ALTINDA kalıyor, o yüzden katman değil çizim kullanılıyor.
+@property (nonatomic) BOOL usesBrandStyle;
 - (void)setupHoverTracking;
 @end
 
@@ -368,7 +430,19 @@ void updateScreenOverlays();
 - (void)mouseEntered:(NSEvent *)event {
     self.isHovered = YES;
     [[NSCursor pointingHandCursor] set];
-    
+
+    // Marka butonu: hover'da web ile aynı şekilde HAFİF KOYULAŞIR
+    // (filter: brightness(0.92)). Gradient katmanlı olduğu için backgroundColor
+    // ile oynanamaz, örtü katmanının opacity'si kullanılır.
+    if (self.usesBrandStyle) {
+        // CSS: transform: translateY(-1px) — renk değişmiyor, buton kalkıyor.
+        [CATransaction begin];
+        [CATransaction setAnimationDuration:0.11];
+        self.layer.transform = CATransform3DMakeTranslation(0, kBrandHoverLift, 0);
+        [CATransaction commit];
+        return;
+    }
+
     // Brighten background on hover
     if (self.layer.backgroundColor) {
         CGFloat red, green, blue, alpha;
@@ -388,7 +462,15 @@ void updateScreenOverlays();
 - (void)mouseExited:(NSEvent *)event {
     self.isHovered = NO;
     [[NSCursor arrowCursor] set];
-    
+
+    if (self.usesBrandStyle) {
+        [CATransaction begin];
+        [CATransaction setAnimationDuration:0.11];
+        self.layer.transform = CATransform3DIdentity;
+        [CATransaction commit];
+        return;
+    }
+
     // Restore original background color
     NSString *title = [self title];
     if ([title isEqualToString:@"Start Record"]) {
@@ -412,18 +494,100 @@ void updateScreenOverlays();
 
 - (void)updateTrackingAreas {
     [super updateTrackingAreas];
-    
+
     // Remove old tracking areas
     for (NSTrackingArea *area in self.trackingAreas) {
         [self removeTrackingArea:area];
     }
-    
+
     // Add new tracking area
     [self setupHoverTracking];
 }
 
+// Marka arka planı drawRect'te çizildiği için başlık ve ikon her zaman ÜSTTE kalır.
+- (void)drawRect:(NSRect)dirtyRect {
+    if (self.usesBrandStyle) {
+        DrawBrandBackground([self bounds]);
+    }
+    [super drawRect:dirtyRect];
+}
+
 @end
 
+// Marka butonu stilini uygular: alan seçimindeki .confirm-button ile aynı
+// tipografi, köşe ve iç boşluk. Arka planı HoverButton.drawRect çiziyor.
+static void ApplyBrandButtonStyle(NSButton *button) {
+    if (!button) return;
+
+    [button setWantsLayer:YES];
+    [button setBordered:NO];
+    [button setFocusRingType:NSFocusRingTypeNone];
+    [button setShowsBorderOnlyWhileMouseInside:NO];
+
+    if ([button isKindOfClass:[HoverButton class]]) {
+        [(HoverButton *)button setUsesBrandStyle:YES];
+    }
+
+    CALayer *root = [button layer];
+    if (root) {
+        // Arka plan drawRect'te; katman tarafında hiçbir dolgu/kenar kalmasın.
+        root.backgroundColor = [[NSColor clearColor] CGColor];
+        root.borderWidth = 0.0;
+        root.borderColor = [[NSColor clearColor] CGColor];
+        root.shadowOpacity = 0.0;
+        root.shadowRadius = 0.0;
+        root.shadowOffset = CGSizeMake(0, 0);
+        root.masksToBounds = NO;
+    }
+
+    NSFont *font = BrandButtonFont();
+    [button setFont:font];
+
+    // İç boşluk web ile aynı: padding 14px 26px.
+    if ([button respondsToSelector:@selector(setContentInsets:)]) {
+        [button setContentInsets:NSEdgeInsetsMake(kBrandPaddingY, kBrandPaddingX,
+                                                  kBrandPaddingY, kBrandPaddingX)];
+    }
+    // Web'de ikon ve metin bir arada ortalanıyor (inline-flex + center).
+    // Bu olmadan NSButton ikonu sol kenara dayar, metni ortada bırakır.
+    if ([button respondsToSelector:@selector(setImageHugsTitle:)]) {
+        [button setImageHugsTitle:YES];
+    }
+
+    NSString *title = [button title] ?: @"";
+    NSMutableParagraphStyle *paragraph = [[NSMutableParagraphStyle alloc] init];
+    [paragraph setAlignment:NSTextAlignmentCenter];
+    NSDictionary *attributes = @{
+        NSForegroundColorAttributeName : [NSColor whiteColor],
+        NSParagraphStyleAttributeName : paragraph,
+        NSFontAttributeName : font
+    };
+    NSMutableAttributedString *attributed =
+        [[NSMutableAttributedString alloc] initWithString:title];
+    [attributed addAttributes:attributes range:NSMakeRange(0, [attributed length])];
+    [button setAttributedTitle:attributed];
+
+    // Boyut: içerik + padding, en az min-width 220px (web ile aynı).
+    NSSize textSize = [title sizeWithAttributes:attributes];
+    CGFloat contentWidth = ceil(textSize.width);
+    CGFloat contentHeight = ceil(textSize.height);
+    NSImage *icon = [button image];
+    if (icon) {
+        // İkon görüntüsü sağındaki gap'i (10px) zaten içeriyor.
+        contentWidth += [icon size].width;
+        contentHeight = MAX(contentHeight, [icon size].height);
+    }
+    NSRect frame = [button frame];
+    frame.size.width = MAX(kBrandMinWidth, contentWidth + kBrandPaddingX * 2.0);
+    frame.size.height = contentHeight + kBrandPaddingY * 2.0;
+    [button setFrame:frame];
+    [button setNeedsDisplay:YES];
+
+    [attributed release];
+    [paragraph release];
+}
+
+
 @implementation NoFocusWindow
 
 - (BOOL)canBecomeKeyWindow {
@@ -1207,28 +1371,10 @@ void updateOverlay() {
                 [targetSelectButton setBordered:NO];
                 [targetSelectButton setFont:[NSFont systemFontOfSize:16 weight:NSFontWeightRegular]];
                 
-                // CRITICAL VISUAL FIX: Super aggressive styling for external displays
-                [targetSelectButton setWantsLayer:YES];
-                [targetSelectButton.layer setBackgroundColor:[[NSColor redColor] CGColor]]; // BRIGHT RED for testing
-                [targetSelectButton.layer setCornerRadius:8.0];
-                [targetSelectButton.layer setBorderWidth:3.0]; // THICK border
-                [targetSelectButton.layer setBorderColor:[[NSColor yellowColor] CGColor]]; // YELLOW border
-                [targetSelectButton.layer setMasksToBounds:YES];
-                
-                // Force very visible styling
-                [targetSelectButton.layer setShadowColor:[[NSColor blackColor] CGColor]];
-                [targetSelectButton.layer setShadowOffset:CGSizeMake(5, 5)];
-                [targetSelectButton.layer setShadowRadius:10.0];
-                [targetSelectButton.layer setShadowOpacity:1.0];
-                
-                // Clean white text - normal weight
-                NSMutableAttributedString *titleString = [[NSMutableAttributedString alloc] 
-                    initWithString:[targetSelectButton title]];
-                [titleString addAttribute:NSForegroundColorAttributeName 
-                                    value:[NSColor whiteColor] 
-                                    range:NSMakeRange(0, [titleString length])];
-                [targetSelectButton setAttributedTitle:titleString];
-                
+                // Alan seçimindeki mavi buton ile aynı marka görünümü
+                ApplyStartRecordButtonIcon(targetSelectButton);
+                ApplyBrandButtonStyle(targetSelectButton);
+
                 // Set target and action
                 if (!g_delegate) {
                     g_delegate = [[WindowSelectorDelegate alloc] init];
@@ -1244,7 +1390,10 @@ void updateOverlay() {
                 NSLog(@"🆕 Added new button to Screen %ld overlay - total subviews now: %lu", targetScreenIndex, [targetOverlay.contentView subviews].count);
             }
 
+            // Butonun her gösterimde marka metriklerinde kalmasını garanti et
+            // (mevcut buton yeniden kullanılıyor olabilir).
             ApplyStartRecordButtonIcon(targetSelectButton);
+            ApplyBrandButtonStyle(targetSelectButton);
 
             // Position buttons - Start Record in center of selected window
             if (targetSelectButton) {
@@ -1614,15 +1763,17 @@ void updateScreenOverlays() {
                     if ([subview isKindOfClass:[NSButton class]]) {
                         NSButton *button = (NSButton *)subview;
                         if ([button.title isEqualToString:@"Start Record"]) {
-                            if (isActiveScreen) {
-                                // Active screen: bright, prominent button with new RGB color
-                                [button.layer setBackgroundColor:[[NSColor colorWithRed:77.0/255.0 green:30.0/255.0 blue:231.0/255.0 alpha:1.0] CGColor]];
-                                [button setAlphaValue:1.0];
-                            } else {
-                                // Inactive screen: dimmer button with new RGB color
-                                [button.layer setBackgroundColor:[[NSColor colorWithRed:77.0/255.0 green:30.0/255.0 blue:231.0/255.0 alpha:0.6] CGColor]];
-                                [button setAlphaValue:0.7];
+                            // Marka butonunun arka planı drawRect'te çiziliyor;
+                            // layer.backgroundColor set edilirse hapın altında
+                            // köşeli bir dikdörtgen olarak görünüyor.
+                            BOOL usesBrand = [button isKindOfClass:[HoverButton class]] &&
+                                             [(HoverButton *)button usesBrandStyle];
+                            if (!usesBrand) {
+                                [button.layer setBackgroundColor:
+                                    [[NSColor colorWithRed:77.0/255.0 green:30.0/255.0 blue:231.0/255.0
+                                                     alpha:(isActiveScreen ? 1.0 : 0.6)] CGColor]];
                             }
+                            [button setAlphaValue:isActiveScreen ? 1.0 : 0.7];
                         }
                     }
                     if ([subview isKindOfClass:[NSTextField class]]) {
@@ -1827,29 +1978,11 @@ bool startScreenSelection() {
             [selectButton setFont:[NSFont systemFontOfSize:16 weight:NSFontWeightRegular]];
             [selectButton setTag:i]; // Set screen index as tag
             
-            // Modern button styling with new RGB color
-            [selectButton setWantsLayer:YES];
-            [selectButton.layer setBackgroundColor:[[NSColor colorWithRed:90.0/255.0 green:50.0/255.0 blue:250.0/255.0 alpha:1.0] CGColor]];
-            [selectButton.layer setCornerRadius:8.0];
-            [selectButton.layer setBorderWidth:0.0];
-            
-            // Remove all button borders and decorations
-            [selectButton.layer setShadowOpacity:0.0];
-            [selectButton.layer setShadowRadius:0.0];
-            [selectButton.layer setShadowOffset:NSMakeSize(0, 0)];
-            [selectButton.layer setMasksToBounds:YES];
-            
-            // Clean white text - normal weight
-            [selectButton setFont:[NSFont systemFontOfSize:16 weight:NSFontWeightRegular]];
+            // Alan seçimindeki mavi buton ile aynı marka görünümü
             [selectButton setTitle:@"Start Record"];
-            NSMutableAttributedString *titleString = [[NSMutableAttributedString alloc] 
-                initWithString:[selectButton title]];
-            [titleString addAttribute:NSForegroundColorAttributeName 
-                                value:[NSColor whiteColor] 
-                                range:NSMakeRange(0, [titleString length])];
-            [selectButton setAttributedTitle:titleString];
-
             ApplyStartRecordButtonIcon(selectButton);
+            ApplyBrandButtonStyle(selectButton);
+
 
             // Clean button - no shadows or highlights
 
@@ -2314,29 +2447,10 @@ Napi::Value StartWindowSelection(const Napi::CallbackInfo& info) {
         [g_selectButton setBordered:NO];
         [g_selectButton setFont:[NSFont systemFontOfSize:16 weight:NSFontWeightRegular]];
         
-        // Modern button styling with new RGB color
-        [g_selectButton setWantsLayer:YES];
-        [g_selectButton.layer setBackgroundColor:[[NSColor colorWithRed:90.0/255.0 green:50.0/255.0 blue:250.0/255.0 alpha:1.0] CGColor]];
-        [g_selectButton.layer setCornerRadius:8.0];
-        [g_selectButton.layer setBorderWidth:0.0];
-        
-        // Remove all button borders and decorations
-        [g_selectButton.layer setShadowOpacity:0.0];
-        [g_selectButton.layer setShadowRadius:0.0];
-        [g_selectButton.layer setShadowOffset:NSMakeSize(0, 0)];
-        [g_selectButton.layer setMasksToBounds:YES];
-        [g_selectButton.layer setBorderWidth:0.0];
-        [g_selectButton.layer setBorderColor:[[NSColor clearColor] CGColor]];
-        
-        // Clean white text - normal weight
-        NSMutableAttributedString *titleString = [[NSMutableAttributedString alloc] 
-            initWithString:[g_selectButton title]];
-        [titleString addAttribute:NSForegroundColorAttributeName 
-                            value:[NSColor whiteColor] 
-                            range:NSMakeRange(0, [titleString length])];
-        [g_selectButton setAttributedTitle:titleString];
-
+        // Alan seçimindeki mavi buton ile aynı marka görünümü
         ApplyStartRecordButtonIcon(g_selectButton);
+        ApplyBrandButtonStyle(g_selectButton);
+
 
         // Create delegate for button action and timer
         g_delegate = [[WindowSelectorDelegate alloc] init];