fix(desktop): integrate macOS titlebar controls

desktop-dev.html

@@ -7,6 +7,20 @@
       content="width=device-width, initial-scale=1.0, interactive-widget=resizes-content"
     />
     <title>SeekMoon Development</title>
+    <script>
+      // The native host overlays macOS window controls on this development
+      // entry. Mark it before styles load so the first frame reserves the
+      // traffic lights just like the packaged desktop entry.
+      {
+        const hostPlatform =
+          navigator.userAgentData?.platform ||
+          navigator.platform ||
+          navigator.userAgent;
+        if (hostPlatform.toLowerCase().includes("mac")) {
+          document.documentElement.classList.add("macos-titlebar-overlay");
+        }
+      }
+    </script>
     <!-- Proton uses this file's directory as its asset root. Keeping the file
          at the repository root lets CEF serve source CSS, cached vendor files,
          and Moon's _build artifact without copying them into a data_dir. -->

desktop/index.html

@@ -11,6 +11,20 @@
       content="width=device-width, initial-scale=1.0, interactive-widget=resizes-content"
     />
     <title>SeekMoon</title>
+    <script>
+      // The native host overlays macOS window controls on this desktop entry.
+      // Mark it before styles load so the first frame already reserves their
+      // space; the separate browser-console entry keeps its ordinary layout.
+      {
+        const hostPlatform =
+          navigator.userAgentData?.platform ||
+          navigator.platform ||
+          navigator.userAgent;
+        if (hostPlatform.toLowerCase().includes("mac")) {
+          document.documentElement.classList.add("macos-titlebar-overlay");
+        }
+      }
+    </script>
     <!-- The embedded code viewer's styles, assembled from the editor dependency
          by the packager (see build_viewer_stylesheet). -->
     <link rel="stylesheet" href="viewer.css" />

desktop/main.mbt

@@ -122,6 +122,14 @@ async fn main {
   let app = @proton.asset("SeekMoon", frontend_entry, width=1120, height=760).debug_level(
     1,
   )
+  // On macOS, let the page paint beneath the system-positioned traffic lights.
+  // Proton does not expose their coordinates, so the desktop entry reserves
+  // their leading space and aligns its header height to their center instead.
+  let app = if @platform.apple_os_mac {
+    app.titlebar_style(Overlay)
+  } else {
+    app
+  }
   // Proton auto-fills only the Application menu; Edit and Window must be
   // declared or macOS loses their key equivalents (Cmd+A/C/V/X/Z, Cmd+W/M),
   // which is what dispatches editing shortcuts to every text field. The

desktop/package/internal/packaging/packaging.mbt

@@ -720,6 +720,21 @@ async test "development app stylesheet imports every production source" {
   assert_eq(imports, expected)
 }
 
+///|
+/// Both native launch paths use Proton's macOS titlebar overlay. Keep their
+/// early platform marker together while leaving the remote browser console in
+/// its ordinary page layout, where no native traffic lights exist.
+async test "native HTML entries reserve macOS window controls" {
+  let ws = locate_workspace()
+  for entry in [ws.at("index.html"), ws.repo_at("desktop-dev.html")] {
+    let html = @asyncfs.read_file(entry).text()
+    assert_true(html.contains("navigator.platform"))
+    assert_true(html.contains("macos-titlebar-overlay"))
+  }
+  let browser = @asyncfs.read_file(ws.at("frontend/browser/index.html")).text()
+  assert_false(browser.contains("macos-titlebar-overlay"))
+}
+
 ///|
 /// Concatenate the embedded viewer's CSS into a single `viewer.css` next to the
 /// frontend bundle, mirroring the editor's own `scripts/build-web` step. The

desktop/styles/base.css

@@ -215,3 +215,45 @@ select {
 .app.sidebar-collapsed .content.panel-expanded .editor-tabsbar {
   padding-left: 54px;
 }
+
+/* Proton leaves the macOS traffic lights at their system position and does not
+   expose a coordinate override. A 36px desktop header shares their 18px center
+   line, so reuse the app's header as the titlebar instead of keeping a separate
+   blank native row. The 80px leading inset clears the green light by roughly
+   9px at the normal macOS scale; an open sidebar already keeps the main column
+   beyond the lights. */
+:root.macos-titlebar-overlay {
+  --macos-titlebar-height: 36px;
+  --macos-titlebar-leading-content: 80px;
+}
+
+:root.macos-titlebar-overlay main {
+  --topbar-height: var(--macos-titlebar-height);
+}
+
+:root.macos-titlebar-overlay .sidebar-header,
+:root.macos-titlebar-overlay .editor-tabsbar {
+  height: var(--macos-titlebar-height);
+}
+
+:root.macos-titlebar-overlay .sidebar-header,
+:root.macos-titlebar-overlay .app.sidebar-collapsed .topbar {
+  padding-left: calc(var(--macos-titlebar-leading-content) + 4px);
+}
+
+:root.macos-titlebar-overlay .page-sidebar-toggle,
+:root.macos-titlebar-overlay
+  .app.sidebar-collapsed
+  .content.panel-expanded
+  .topbar
+  > .topbar-toggle {
+  top: 4px;
+  left: var(--macos-titlebar-leading-content);
+}
+
+:root.macos-titlebar-overlay
+  .app.sidebar-collapsed
+  .content.panel-expanded
+  .editor-tabsbar {
+  padding-left: calc(54px + var(--macos-titlebar-leading-content) - 14px);
+}