fix(wails): fix macOS title bar overlap and drag on buttons

The hidden inset title bar drew toolbar controls under traffic lights
and the native 50px drag zone intercepted button clicks. Use explicit
drag regions and macOS safe-area padding instead.

Co-authored-by: Cursor <cursoragent@cursor.com>

frontend/src/App.svelte

@@ -11,6 +11,7 @@
   } from './lib/keyboard';
   import { downloadProject, exportAudio, loadProject } from './lib/project';
   import { openProject, openVideo } from './lib/platform/files';
+  import { isMacOS } from './lib/platform/wails';
   import {
     addMarker,
     app,
@@ -33,6 +34,7 @@
   let controller: VideoController | null = null;
   let audioEngine = createAudioEngine();
   let statusMessage = $state('');
+  const macos = isMacOS();
   let lastScheduledTime = -1;
   const pendingPresses = new Map<string, string>();
 
@@ -198,16 +200,15 @@
 </script>
 
 <div class="app">
-  <header class="toolbar">
+  <header class="titlebar" class:macos>
-    <div class="file-actions">
+    <div class="titlebar-drag" aria-hidden="true"></div>
+    <div class="titlebar-actions">
       <button type="button" onclick={handleOpenVideo}>Open Video</button>
       <button type="button" onclick={handleOpenProject}>Open Project</button>
       <button type="button" onclick={() => void downloadProject()}>Save Project</button>
       <button type="button" onclick={handleExportAudio}>Export Audio</button>
-    </div>
-    <div class="meta">
       {#if app.videoName}
-        <span>{app.videoName}</span>
+        <span class="video-name">{app.videoName}</span>
       {/if}
       {#if app.duration}
         <label class="fps-control">
@@ -318,22 +319,52 @@
     display: flex;
     flex-direction: column;
     gap: 0.75rem;
-    padding: 1rem;
+    padding: 0 1rem 1rem;
     box-sizing: border-box;
   }
 
-  .toolbar {
+  .titlebar {
     display: flex;
-    flex-wrap: wrap;
+    flex-wrap: nowrap;
-    gap: 0.75rem;
     align-items: center;
-    justify-content: space-between;
+    gap: 0.75rem;
+    height: 40px;
+    flex-shrink: 0;
+    margin: 0 -1rem;
+    padding: 0 1rem;
   }
 
-  .file-actions {
+  .titlebar.macos {
+    padding-left: calc(1rem + 72px);
+  }
+
+  .titlebar-drag {
+    flex: 1;
+    align-self: stretch;
+    min-width: 2rem;
+    --wails-draggable: drag;
+  }
+
+  .titlebar-actions {
     display: flex;
+    flex-wrap: nowrap;
+    align-items: center;
     gap: 0.5rem;
-    flex-wrap: wrap;
+    margin-left: auto;
+    --wails-draggable: no-drag;
+  }
+
+  .titlebar button,
+  .titlebar input,
+  .titlebar label {
+    --wails-draggable: no-drag;
+  }
+
+  .video-name,
+  .status {
+    font-size: 0.85rem;
+    color: #a0aec0;
+    white-space: nowrap;
   }
 
   button,
@@ -351,13 +382,6 @@
     cursor: not-allowed;
   }
 
-  .meta {
-    display: flex;
-    gap: 1rem;
-    font-size: 0.85rem;
-    color: #a0aec0;
-  }
-
   .status {
     color: #68d391;
   }

frontend/src/lib/platform/wails.ts

@@ -0,0 +1,10 @@
+import { System } from '@wailsio/runtime';
+
+/** True when running inside the Wails desktop shell on macOS. */
+export function isMacOS(): boolean {
+  try {
+    return System.IsMac();
+  } catch {
+    return false;
+  }
+}

main.go

@@ -44,7 +44,7 @@ func main() {
 		MinWidth:  960,
 		MinHeight: 600,
 		Mac: application.MacWindow{
-			InvisibleTitleBarHeight: 50,
+			InvisibleTitleBarHeight: 0,
 			Backdrop:                application.MacBackdropTranslucent,
 			TitleBar:                application.MacTitleBarHiddenInset,
 		},