fix: make DownloadButton SSR-safe with useId and CSS reduced motion

Replace JS-based useMediaQuery with CSS motion-reduce: variants to
eliminate hydration mismatches during prerender. Add useId() for unique
menu IDs matching PackageManagerSelect pattern.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Author: Adebesin-Cell

app/components/Package/DownloadButton.vue

@@ -21,7 +21,7 @@ const highlightedIndex = shallowRef(-1)
 const dropdownPosition = shallowRef<{ top: number; right: number } | null>(null)
 
 const { t } = useI18n()
-const menuId = 'download-menu'
+const menuId = `${useId()}-download-menu`
 const menuItems = computed(() => {
   const items = [{ id: 'package', label: t('package.download.package'), icon: 'i-lucide:package' }]
   if (props.installSize) {
@@ -177,8 +177,6 @@ function downloadDependenciesScript() {
   URL.revokeObjectURL(url)
 }
 
-const prefersReducedMotion = useMediaQuery('(prefers-reduced-motion: reduce)')
-
 useEventListener('scroll', () => isOpen.value && close(), { passive: true })
 
 defineOptions({
@@ -202,24 +200,23 @@ defineOptions({
   >
     {{ $t('package.download.button') }}
     <span
-      class="i-lucide:chevron-down ms-1"
+      class="i-lucide:chevron-down ms-1 transition-transform duration-200 motion-reduce:transition-none"
       :class="[
         size === 'small' ? 'w-3 h-3' : 'w-3.5 h-3.5',
         { 'rotate-180': isOpen },
-        prefersReducedMotion ? '' : 'transition-transform duration-200',
       ]"
       aria-hidden="true"
     />
   </ButtonBase>
 
   <Teleport to="body">
     <Transition
-      :enter-active-class="prefersReducedMotion ? '' : 'transition-opacity duration-150'"
-      :enter-from-class="prefersReducedMotion ? '' : 'opacity-0'"
+      enter-active-class="transition-opacity duration-150 motion-reduce:duration-0"
+      enter-from-class="opacity-0"
       enter-to-class="opacity-100"
-      :leave-active-class="prefersReducedMotion ? '' : 'transition-opacity duration-100'"
+      leave-active-class="transition-opacity duration-100 motion-reduce:duration-0"
       leave-from-class="opacity-100"
-      :leave-to-class="prefersReducedMotion ? '' : 'opacity-0'"
+      leave-to-class="opacity-0"
     >
       <div
         v-if="isOpen"