feat: add multiple package sync sources and API integration

- Added undici dependency and implemented three package fetcher variants (simple text parsing, v2 with better error handling, and official repository sync)
- Integrated real API calls in PlatformSelector and PackageBrowser components with fallback to mock data
- Extended sync API route to support multiple data sources (debian-simple, ubuntu-simple, debian-official-v2, etc.) with platform initialization

src/components/PlatformSelector.tsx

@@ -1,9 +1,9 @@
 "use client"
 
-import { useState } from 'react'
+import { useState, useEffect } from 'react'
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
 import { Button } from '@/components/ui/button'
-import { platforms } from '@/data/mockData'
+import { apiClient } from '@/lib/api/client'
 import { useLocale } from '@/contexts/LocaleContext'
 import { Platform } from '@/types'
 
@@ -14,6 +14,44 @@ interface PlatformSelectorProps {
 
 export function PlatformSelector({ selectedPlatform, onPlatformSelect }: PlatformSelectorProps) {
   const { t } = useLocale()
+  const [platforms, setPlatforms] = useState<Platform[]>([])
+  const [loading, setLoading] = useState(true)
+
+  useEffect(() => {
+    const loadPlatforms = async () => {
+      try {
+        const platformsData = await apiClient.getPlatforms()
+        setPlatforms(platformsData)
+      } catch (error) {
+        console.error('Failed to load platforms:', error)
+        // Fallback to mock data if API fails
+        const { platforms: mockPlatforms } = await import('@/data/mockData')
+        setPlatforms(mockPlatforms)
+      } finally {
+        setLoading(false)
+      }
+    }
+
+    loadPlatforms()
+  }, [])
+
+  if (loading) {
+    return (
+      <Card className="w-full">
+        <CardHeader className="pb-4">
+          <CardTitle className="text-lg">{t('platform.select')}</CardTitle>
+          <CardDescription className="text-sm">
+            {t('platform.description')}
+          </CardDescription>
+        </CardHeader>
+        <CardContent className="pt-0">
+          <div className="text-center py-8 text-muted-foreground">
+            Loading platforms...
+          </div>
+        </CardContent>
+      </Card>
+    )
+  }
 
   return (
     <Card className="w-full">