[V0_FILE]typescriptreact:file="components/macos-window.tsx" isEdit="true" isMerged="true" "use client" import type { ReactNode } from "react" import { useState } from "react" interface MacOSWindowProps { children: ReactNode } export function MacOSWindow({ children }: MacOSWindowProps) { const [isMaximized, setIsMaximized] = useState(false) const [windowTitle, setWindowTitle] = useState("macOS Tahoe 26 Template") const handleClose = () => { // Simulate window close animation const windowElement = document.querySelector(".window-frame") windowElement?.classList.add("animate-pulse") setTimeout(() => { alert("Window would close in a real app") }, 200) } const handleMinimize = () => { const windowElement = document.querySelector(".window-frame") windowElement?.classList.add("scale-95", "opacity-50") setTimeout(() => { windowElement?.classList.remove("scale-95", "opacity-50") alert("Window minimized") }, 300) } const handleMaximize = () => { setIsMaximized(!isMaximized) } return (

{/* Window Frame with Liquid Glass Effect */}

{/* Title Bar */}

setWindowTitle( windowTitle === "macOS Tahoe 26 Template" ? "Interactive Template" : "macOS Tahoe 26 Template", ) } > {windowTitle}

{/* Window Content */}

{children}

) } [V0_FILE]typescriptreact:file="components/sidebar.tsx" isEdit="true" isMerged="true" "use client" import { Home, Folder, Star, Clock, Trash2, Settings, ChevronDown, ChevronRight } from "lucide-react" import { useState } from "react" interface SidebarProps { activeView: string onViewChange: (view: string) => void } export function Sidebar({ activeView, onViewChange }: SidebarProps) { const [expandedSections, setExpandedSections] = useState(["Favorites"]) const sidebarItems = [ { icon: Home, label: "Home" }, { icon: Folder, label: "Documents" }, { icon: Star, label: "Favorites" }, { icon: Clock, label: "Recent" }, { icon: Trash2, label: "Trash" }, { icon: Settings, label: "Settings" }, ] const favoriteItems = ["Important Files", "Work Projects", "Personal Photos", "Music Library"] const toggleSection = (section: string) => { setExpandedSections((prev) => (prev.includes(section) ? prev.filter((s) => s !== section) : [...prev, section])) } const handleItemClick = (item: string) => { onViewChange(item) } return (

{sidebarItems.map((item, index) => (

)} {item.label === "Favorites" && expandedSections.includes("Favorites") && (

{favoriteItems.map((fav, favIndex) => ( ))}

)}

))}

Liquid Glass

Experience the new translucent design language that reflects and refracts its surroundings.

) } [V0_FILE]typescriptreact:file="components/toolbar.tsx" isEdit="true" isMerged="true" "use client" import { Search, Grid3X3, List, MoreHorizontal, SlidersHorizontal, Share, Plus } from "lucide-react" import { useState } from "react" export function Toolbar() { const [viewMode, setViewMode] = useState<"grid" | "list">("grid") const [searchValue, setSearchValue] = useState("") const [showFilters, setShowFilters] = useState(false) return (

Documents

setSearchValue(e.target.value)} className="pl-10 pr-4 py-2 w-64 rounded-lg bg-white/20 backdrop-blur-sm border border-white/30 text-sm text-gray-700 placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-blue-500/50 focus:bg-white/30 focus:border-blue-500/30 transition-all duration-200 hover:bg-white/25" /> {searchValue && ( )}

{showFilters && (

Filter by:

)}

) } [V0_FILE]typescriptreact:file="components/apps/calculator.tsx" isMerged="true" "use client" import { useState } from "react" import { X } from "lucide-react" interface CalculatorProps { onClose: () => void } export function Calculator({ onClose }: CalculatorProps) { const [display, setDisplay] = useState("0") const [previousValue, setPreviousValue] = useState(null) const [operation, setOperation] = useState(null) const [waitingForOperand, setWaitingForOperand] = useState(false) const inputNumber = (num: string) => { if (waitingForOperand) { setDisplay(num) setWaitingForOperand(false) } else { setDisplay(display === "0" ? num : display + num) } } const inputOperation = (nextOperation: string) => { const inputValue = Number.parseFloat(display) if (previousValue === null) { setPreviousValue(inputValue) } else if (operation) { const currentValue = previousValue || 0 const newValue = calculate(currentValue, inputValue, operation) setDisplay(String(newValue)) setPreviousValue(newValue) } setWaitingForOperand(true) setOperation(nextOperation) } const calculate = (firstValue: number, secondValue: number, operation: string) => { switch (operation) { case "+": return firstValue + secondValue case "-": return firstValue - secondValue case "×": return firstValue * secondValue case "÷": return firstValue / secondValue case "=": return secondValue default: return secondValue } } const performCalculation = () => { const inputValue = Number.parseFloat(display) if (previousValue !== null && operation) { const newValue = calculate(previousValue, inputValue, operation) setDisplay(String(newValue)) setPreviousValue(null) setOperation(null) setWaitingForOperand(true) } } const clear = () => { setDisplay("0") setPreviousValue(null) setOperation(null) setWaitingForOperand(false) } const buttons = [ ["C", "±", "%", "÷"], ["7", "8", "9", "×"], ["4", "5", "6", "-"], ["1", "2", "3", "+"], ["0", ".", "="], ] return (

{/* Title Bar */}

Calculator

{/* Display */}

{display}

{/* Buttons */}

{buttons.map((row, rowIndex) => (

{row.map((btn) => ( ))}

))}

) } [V0_FILE]typescriptreact:file="components/apps/notes.tsx" isMerged="true" "use client" import { useState } from "react" import { X, Plus, Search, Edit3, Trash2, Save } from "lucide-react" interface Note { id: string title: string content: string lastModified: Date } interface NotesProps { onClose: () => void } export function Notes({ onClose }: NotesProps) { const [notes, setNotes] = useState([ { id: "1", title: "Welcome to Notes", content: "This is your first note! You can create, edit, and delete notes here. The interface uses the beautiful Liquid Glass design language.", lastModified: new Date(Date.now() - 1000 * 60 * 30), // 30 minutes ago }, { id: "2", title: "Meeting Notes", content: "Discuss the new macOS Tahoe features:\n- Liquid Glass design\n- Enhanced transparency\n- Improved performance\n- Better accessibility", lastModified: new Date(Date.now() - 1000 * 60 * 60 * 2), // 2 hours ago }, { id: "3", title: "Shopping List", content: "• Groceries\n• Office supplies\n• Birthday gift for Sarah\n• New laptop charger", lastModified: new Date(Date.now() - 1000 * 60 * 60 * 24), // 1 day ago }, ]) const [selectedNote, setSelectedNote] = useState(notes[0]) const [isEditing, setIsEditing] = useState(false) const [editContent, setEditContent] = useState("") const [editTitle, setEditTitle] = useState("") const [searchQuery, setSearchQuery] = useState("") const filteredNotes = notes.filter( (note) => note.title.toLowerCase().includes(searchQuery.toLowerCase()) || note.content.toLowerCase().includes(searchQuery.toLowerCase()), ) const createNewNote = () => { const newNote: Note = { id: Date.now().toString(), title: "Untitled Note", content: "", lastModified: new Date(), } setNotes((prev) => [newNote, ...prev]) setSelectedNote(newNote) setIsEditing(true) setEditTitle(newNote.title) setEditContent(newNote.content) } const startEditing = () => { if (selectedNote) { setIsEditing(true) setEditTitle(selectedNote.title) setEditContent(selectedNote.content) } } const saveNote = () => { if (selectedNote) { const updatedNote = { ...selectedNote, title: editTitle || "Untitled Note", content: editContent, lastModified: new Date(), } setNotes((prev) => prev.map((note) => (note.id === selectedNote.id ? updatedNote : note))) setSelectedNote(updatedNote) setIsEditing(false) } } const deleteNote = (noteId: string) => { setNotes((prev) => prev.filter((note) => note.id !== noteId)) if (selectedNote?.id === noteId) { const remainingNotes = notes.filter((note) => note.id !== noteId) setSelectedNote(remainingNotes[0] || null) } } const formatDate = (date: Date) => { const now = new Date() const diffInHours = (now.getTime() - date.getTime()) / (1000 * 60 * 60) if (diffInHours < 1) { return "Just now" } else if (diffInHours < 24) { return `${Math.floor(diffInHours)} hours ago` } else { return date.toLocaleDateString() } } return (

{/* Title Bar */}

Notes

{/* Sidebar */}

{/* Search and New Note */}

setSearchQuery(e.target.value)} className="w-full pl-10 pr-4 py-2 bg-white/20 border border-white/30 rounded-lg text-gray-800 placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-yellow-500/50 backdrop-blur-sm" />

{/* Notes List */}

{filteredNotes.map((note) => ( ))}

{/* Main Content */}

{selectedNote ? ( <> {/* Note Header */}

{isEditing ? ( setEditTitle(e.target.value)} className="text-xl font-semibold text-gray-800 bg-transparent border-none outline-none w-full" placeholder="Note title..." /> ) : (

{selectedNote.title}

)}

Last modified {formatDate(selectedNote.lastModified)}

{isEditing ? ( ) : ( )}

{/* Note Content */}

{isEditing ? (

setEditContent(e.target.value)}
                        className="w-full h-full bg-transparent border-none outline-none text-gray-800 resize-none text-base leading-relaxed"
                        placeholder="Start writing your note..."
                      />
                    ) : (
                      <div className="h-full overflow-y-auto">
                        <pre className="text-gray-800 text-base leading-relaxed whitespace-pre-wrap font-sans">
                          {selectedNote.content}
                        </pre>
                      </div>
                    )}
                  </div>
                </>
              ) : (
                <div className="flex-1 flex items-center justify-center">
                  <div className="text-center">
                    <div className="w-16 h-16 bg-yellow-500/20 rounded-full flex items-center justify-center mx-auto mb-4">
                      <Edit3 className="w-8 h-8 text-yellow-600" />
                    </div>
                    <h3 className="text-lg font-medium text-gray-800 mb-2">No Note Selected</h3>
                    <p className="text-gray-600">Choose a note from the sidebar or create a new one</p>
                  </div>
                </div>
              )}
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/apps/music.tsx" isMerged="true"
"use client"

import { useState, useEffect } from "react"
import { X, Play, Pause, SkipBack, SkipForward, Volume2, Shuffle, Repeat, Heart, MoreHorizontal } from "lucide-react"

interface Track {
  id: string
  title: string
  artist: string
  album: string
  duration: string
  coverUrl: string
}

interface MusicProps {
  onClose: () => void
}

export function Music({ onClose }: MusicProps) {
  const [isPlaying, setIsPlaying] = useState(false)
  const [currentTrack, setCurrentTrack] = useState(0)
  const [currentTime, setCurrentTime] = useState(0)
  const [volume, setVolume] = useState(75)
  const [isShuffled, setIsShuffled] = useState(false)
  const [repeatMode, setRepeatMode] = useState<"off" | "all" | "one">("off")
  const [likedTracks, setLikedTracks] = useState<string[]>(["1", "3"])
  const [activeView, setActiveView] = useState<"library" | "playlists" | "radio">("library")

const tracks: Track[] = [
    {
      id: "1",
      title: "Liquid Dreams",
      artist: "Glass Harmony",
      album: "Tahoe Sessions",
      duration: "3:42",
      coverUrl: "/abstract-blue-glass-album-cover.png",
    },
    {
      id: "2",
      title: "Mountain Echoes",
      artist: "Sierra Sounds",
      album: "Alpine Collection",
      duration: "4:15",
      coverUrl: "/purple-mountain-album.png",
    },
    {
      id: "3",
      title: "Crystal Waves",
      artist: "Transparent Audio",
      album: "Refraction",
      duration: "3:28",
      coverUrl: "/crystal-waves-album-cover-teal.png",
    },
    {
      id: "4",
      title: "Neon Nights",
      artist: "Digital Dreams",
      album: "Synthwave Paradise",
      duration: "5:03",
      coverUrl: "/neon-synthwave-album-cover-pink.png",
    },
    {
      id: "5",
      title: "Forest Whispers",
      artist: "Nature's Symphony",
      album: "Organic Sounds",
      duration: "6:21",
      coverUrl: "/forest-nature-album-cover-green.png",
    },
  ]

const currentTrackData = tracks[currentTrack]
  const totalDuration = 240 // Mock duration in seconds

useEffect(() => {
    let interval: NodeJS.Timeout
    if (isPlaying) {
      interval = setInterval(() => {
        setCurrentTime((prev) => {
          if (prev >= totalDuration) {
            handleNext()
            return 0
          }
          return prev + 1
        })
      }, 1000)
    }
    return () => clearInterval(interval)
  }, [isPlaying, totalDuration])

const togglePlay = () => {
    setIsPlaying(!isPlaying)
  }

const handleNext = () => {
    if (isShuffled) {
      setCurrentTrack(Math.floor(Math.random() * tracks.length))
    } else {
      setCurrentTrack((prev) => (prev + 1) % tracks.length)
    }
    setCurrentTime(0)
  }

const handlePrevious = () => {
    if (currentTime > 3) {
      setCurrentTime(0)
    } else {
      setCurrentTrack((prev) => (prev - 1 + tracks.length) % tracks.length)
      setCurrentTime(0)
    }
  }

const toggleLike = (trackId: string) => {
    setLikedTracks((prev) => (prev.includes(trackId) ? prev.filter((id) => id !== trackId) : [...prev, trackId]))
  }

const formatTime = (seconds: number) => {
    const mins = Math.floor(seconds / 60)
    const secs = seconds % 60
    return `${mins}:${secs.toString().padStart(2, "0")}`
  }

const progressPercentage = (currentTime / totalDuration) * 100

return (
    <div className="flex-1 p-6">
      <div className="max-w-6xl mx-auto h-full">
        <div className="bg-white/20 backdrop-blur-xl border border-white/30 rounded-2xl shadow-2xl overflow-hidden h-full flex flex-col">
          {/* Title Bar */}
          <div className="flex items-center justify-between p-4 bg-white/10 border-b border-white/20">
            <h2 className="text-lg font-semibold text-gray-800">Music</h2>
            <button onClick={onClose} className="p-1 hover:bg-white/20 rounded-full transition-colors">
              <X className="w-4 h-4 text-gray-600" />
            </button>
          </div>

<div className="flex flex-1 overflow-hidden">
            {/* Sidebar */}
            <div className="w-64 bg-white/10 border-r border-white/20 p-4">
              <nav className="space-y-2">
                {[
                  { key: "library", label: "Library" },
                  { key: "playlists", label: "Playlists" },
                  { key: "radio", label: "Radio" },
                ].map((item) => (
                  <button
                    key={item.key}
                    onClick={() => setActiveView(item.key as any)}
                    className={`w-full text-left px-3 py-2 rounded-lg transition-colors ${
                      activeView === item.key
                        ? "bg-red-500/20 text-red-700 font-medium"
                        : "text-gray-600 hover:bg-white/10 hover:text-gray-800"
                    }`}
                  >
                    {item.label}
                  </button>
                ))}
              </nav>

<div className="mt-8">
                <h3 className="text-sm font-medium text-gray-700 mb-3">Recently Played</h3>
                <div className="space-y-2">
                  {tracks.slice(0, 3).map((track, index) => (
                    <button
                      key={track.id}
                      onClick={() => {
                        setCurrentTrack(tracks.indexOf(track))
                        setCurrentTime(0)
                      }}
                      className="w-full flex items-center gap-3 p-2 rounded-lg hover:bg-white/10 transition-colors"
                    >
                      <img
                        src={track.coverUrl || "/placeholder.svg"}
                        alt={track.album}
                        className="w-10 h-10 rounded-md object-cover"
                      />
                      <div className="flex-1 text-left">
                        <p className="text-sm font-medium text-gray-800 truncate">{track.title}</p>
                        <p className="text-xs text-gray-600 truncate">{track.artist}</p>
                      </div>
                    </button>
                  ))}
                </div>
              </div>
            </div>

{/* Main Content */}
            <div className="flex-1 flex flex-col">
              {/* Now Playing */}
              <div className="p-8 bg-gradient-to-br from-red-500/20 to-pink-500/20">
                <div className="flex items-center gap-8">
                  <img
                    src={currentTrackData.coverUrl || "/placeholder.svg"}
                    alt={currentTrackData.album}
                    className="w-32 h-32 rounded-2xl shadow-2xl object-cover"
                  />
                  <div className="flex-1">
                    <h1 className="text-3xl font-bold text-gray-800 mb-2">{currentTrackData.title}</h1>
                    <p className="text-xl text-gray-600 mb-1">{currentTrackData.artist}</p>
                    <p className="text-lg text-gray-500">{currentTrackData.album}</p>

{/* Controls */}
                    <div className="flex items-center gap-4 mt-6">
                      <button
                        onClick={() => setIsShuffled(!isShuffled)}
                        className={`p-2 rounded-full transition-colors ${
                          isShuffled ? "bg-red-500 text-white" : "bg-white/20 text-gray-600 hover:bg-white/30"
                        }`}
                      >
                        <Shuffle className="w-5 h-5" />
                      </button>

<button
                        onClick={togglePlay}
                        className="p-4 bg-red-500 hover:bg-red-600 rounded-full transition-colors shadow-lg"
                      >
                        {isPlaying ? (
                          <Pause className="w-8 h-8 text-white" />
                        ) : (
                          <Play className="w-8 h-8 text-white ml-1" />
                        )}
                      </button>

<button
                        onClick={() =>
                          setRepeatMode(repeatMode === "off" ? "all" : repeatMode === "all" ? "one" : "off")
                        }
                        className={`p-2 rounded-full transition-colors ${
                          repeatMode !== "off" ? "bg-red-500 text-white" : "bg-white/20 text-gray-600 hover:bg-white/30"
                        }`}
                      >
                        <Repeat className="w-5 h-5" />
                      </button>

<button
                        onClick={() => toggleLike(currentTrackData.id)}
                        className={`p-2 rounded-full transition-colors ${
                          likedTracks.includes(currentTrackData.id)
                            ? "bg-red-500 text-white"
                            : "bg-white/20 text-gray-600 hover:bg-white/30"
                        }`}
                      >
                        <Heart className="w-5 h-5" />
                      </button>
                    </div>
                  </div>
                </div>

{/* Progress Bar */}
                <div className="mt-6">
                  <div className="flex items-center gap-3 text-sm text-gray-600">
                    <span>{formatTime(currentTime)}</span>
                    <div className="flex-1 bg-white/20 rounded-full h-2 overflow-hidden">
                      <div
                        className="h-full bg-red-500 transition-all duration-1000 ease-linear"
                        style={{ width: `${progressPercentage}%` }}
                      />
                    </div>
                    <span>{formatTime(totalDuration)}</span>
                  </div>
                </div>

{/* Volume Control */}
                <div className="flex items-center gap-3 mt-4">
                  <Volume2 className="w-5 h-5 text-gray-600" />
                  <div className="w-32 bg-white/20 rounded-full h-2 overflow-hidden">
                    <div className="h-full bg-gray-600" style={{ width: `${volume}%` }} />
                  </div>
                  <input
                    type="range"
                    min="0"
                    max="100"
                    value={volume}
                    onChange={(e) => setVolume(Number(e.target.value))}
                    className="w-32 opacity-0 absolute pointer-events-auto"
                  />
                </div>
              </div>

{/* Track List */}
              <div className="flex-1 overflow-y-auto p-6">
                <h2 className="text-xl font-semibold text-gray-800 mb-4">Up Next</h2>
                <div className="space-y-2">
                  {tracks.map((track, index) => (
                    <button
                      key={track.id}
                      onClick={() => {
                        setCurrentTrack(index)
                        setCurrentTime(0)
                      }}
                      className={`w-full flex items-center gap-4 p-3 rounded-lg transition-colors ${
                        index === currentTrack ? "bg-red-500/20 border border-red-500/30" : "hover:bg-white/10"
                      }`}
                    >
                      <img
                        src={track.coverUrl || "/placeholder.svg"}
                        alt={track.album}
                        className="w-12 h-12 rounded-lg object-cover"
                      />
                      <div className="flex-1 text-left">
                        <h3 className="font-medium text-gray-800">{track.title}</h3>
                        <p className="text-sm text-gray-600">
                          {track.artist} • {track.album}
                        </p>
                      </div>
                      <div className="flex items-center gap-2">
                        <button
                          onClick={(e) => {
                            e.stopPropagation()
                            toggleLike(track.id)
                          }}
                          className={`p-1 rounded-full transition-colors ${
                            likedTracks.includes(track.id) ? "text-red-500" : "text-gray-400 hover:text-gray-600"
                          }`}
                        >
                          <Heart className="w-4 h-4" />
                        </button>
                        <span className="text-sm text-gray-500">{track.duration}</span>
                        <button className="p-1 text-gray-400 hover:text-gray-600 transition-colors">
                          <MoreHorizontal className="w-4 h-4" />
                        </button>
                      </div>
                    </button>
                  ))}
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]png:file="public/abstract-blue-glass-album-cover.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/abstract-blue-glass-album-cover-0W4VBH7rIr5guzzXGVCvg2VKACcD0a.png" isMerged="true"
[V0_FILE]png:file="public/purple-mountain-album.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/purple-mountain-album-7PgaEnrKZFoSKps3sWoVMfROWX2FpS.png" isMerged="true"
[V0_FILE]png:file="public/crystal-waves-album-cover-teal.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/crystal-waves-album-cover-teal-DCIC2jE2NORBgXgxSwt1self72qUNN.png" isMerged="true"
[V0_FILE]png:file="public/neon-synthwave-album-cover-pink.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/neon-synthwave-album-cover-pink-by8AIhCFOjiTkoFjp4X9Dfe3XcPVZS.png" isMerged="true"
[V0_FILE]png:file="public/forest-nature-album-cover-green.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/forest-nature-album-cover-green-B2lC3Z1mBnBqzZIjjPomtRpnR7yFhs.png" isMerged="true"
[V0_FILE]typescriptreact:file="components/apps/photos.tsx" isMerged="true"
"use client"

import { useState } from "react"
import { X, Grid3X3, List, Search, Heart, Share, Download, ChevronLeft, ChevronRight } from "lucide-react"

interface Photo {
  id: string
  title: string
  date: string
  location: string
  url: string
  thumbnail: string
  category: "nature" | "city" | "portrait" | "abstract"
  liked: boolean
}

interface PhotosProps {
  onClose: () => void
}

export function Photos({ onClose }: PhotosProps) {
  const [viewMode, setViewMode] = useState<"grid" | "list">("grid")
  const [selectedPhoto, setSelectedPhoto] = useState<Photo | null>(null)
  const [searchQuery, setSearchQuery] = useState("")
  const [selectedCategory, setSelectedCategory] = useState<string>("all")
  const [likedPhotos, setLikedPhotos] = useState<string[]>(["1", "3", "5"])

const photos: Photo[] = [
    {
      id: "1",
      title: "Mountain Sunrise",
      date: "2024-01-15",
      location: "Lake Tahoe, CA",
      url: "/mountain-sunrise-landscape.png",
      thumbnail: "/mountain-sunrise-landscape.png",
      category: "nature",
      liked: true,
    },
    {
      id: "2",
      title: "City Lights",
      date: "2024-01-10",
      location: "San Francisco, CA",
      url: "/city-lights-night-skyline.png",
      thumbnail: "/city-lights-night-skyline.png",
      category: "city",
      liked: false,
    },
    {
      id: "3",
      title: "Abstract Glass",
      date: "2024-01-08",
      location: "Studio",
      url: "/abstract-glass-art-colorful.png",
      thumbnail: "/abstract-glass-art-colorful.png",
      category: "abstract",
      liked: true,
    },
    {
      id: "4",
      title: "Forest Path",
      date: "2024-01-05",
      location: "Yosemite, CA",
      url: "/forest-path-sunlight-trees.png",
      thumbnail: "/forest-path-sunlight-trees.png",
      category: "nature",
      liked: false,
    },
    {
      id: "5",
      title: "Urban Architecture",
      date: "2024-01-03",
      location: "Los Angeles, CA",
      url: "/modern-architecture-building.png",
      thumbnail: "/modern-architecture-building.png",
      category: "city",
      liked: true,
    },
    {
      id: "6",
      title: "Ocean Waves",
      date: "2024-01-01",
      location: "Monterey Bay, CA",
      url: "/ocean-waves-sunset-beach.png",
      thumbnail: "/ocean-waves-sunset-beach.png",
      category: "nature",
      liked: false,
    },
  ]

const categories = [
    { key: "all", label: "All Photos", count: photos.length },
    { key: "nature", label: "Nature", count: photos.filter((p) => p.category === "nature").length },
    { key: "city", label: "City", count: photos.filter((p) => p.category === "city").length },
    { key: "abstract", label: "Abstract", count: photos.filter((p) => p.category === "abstract").length },
    { key: "liked", label: "Favorites", count: likedPhotos.length },
  ]

const filteredPhotos = photos.filter((photo) => {
    const matchesSearch =
      photo.title.toLowerCase().includes(searchQuery.toLowerCase()) ||
      photo.location.toLowerCase().includes(searchQuery.toLowerCase())
    const matchesCategory =
      selectedCategory === "all" ||
      photo.category === selectedCategory ||
      (selectedCategory === "liked" && likedPhotos.includes(photo.id))
    return matchesSearch && matchesCategory
  })

const toggleLike = (photoId: string) => {
    setLikedPhotos((prev) => (prev.includes(photoId) ? prev.filter((id) => id !== photoId) : [...prev, photoId]))
  }

const openPhoto = (photo: Photo) => {
    setSelectedPhoto(photo)
  }

const closePhoto = () => {
    setSelectedPhoto(null)
  }

const navigatePhoto = (direction: "prev" | "next") => {
    if (!selectedPhoto) return

const currentIndex = filteredPhotos.findIndex((p) => p.id === selectedPhoto.id)
    let newIndex

if (direction === "prev") {
      newIndex = currentIndex > 0 ? currentIndex - 1 : filteredPhotos.length - 1
    } else {
      newIndex = currentIndex < filteredPhotos.length - 1 ? currentIndex + 1 : 0
    }

setSelectedPhoto(filteredPhotos[newIndex])
  }

return (
    <div className="flex-1 p-6">
      <div className="max-w-7xl mx-auto h-full">
        <div className="bg-white/20 backdrop-blur-xl border border-white/30 rounded-2xl shadow-2xl overflow-hidden h-full flex flex-col">
          {/* Title Bar */}
          <div className="flex items-center justify-between p-4 bg-white/10 border-b border-white/20">
            <h2 className="text-lg font-semibold text-gray-800">Photos</h2>
            <button onClick={onClose} className="p-1 hover:bg-white/20 rounded-full transition-colors">
              <X className="w-4 h-4 text-gray-600" />
            </button>
          </div>

<div className="flex flex-1 overflow-hidden">
            {/* Sidebar */}
            <div className="w-64 bg-white/10 border-r border-white/20 p-4">
              {/* Search */}
              <div className="relative mb-6">
                <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 w-4 h-4 text-gray-500" />
                <input
                  type="text"
                  placeholder="Search photos..."
                  value={searchQuery}
                  onChange={(e) => setSearchQuery(e.target.value)}
                  className="w-full pl-10 pr-4 py-2 bg-white/20 border border-white/30 rounded-lg text-gray-800 placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-blue-500/50 backdrop-blur-sm"
                />
              </div>

{/* Categories */}
              <div className="space-y-1">
                {categories.map((category) => (
                  <button
                    key={category.key}
                    onClick={() => setSelectedCategory(category.key)}
                    className={`w-full flex items-center justify-between px-3 py-2 rounded-lg transition-colors ${
                      selectedCategory === category.key
                        ? "bg-blue-500/20 text-blue-700 font-medium"
                        : "text-gray-600 hover:bg-white/10 hover:text-gray-800"
                    }`}
                  >
                    <span>{category.label}</span>
                    <span className="text-sm opacity-60">{category.count}</span>
                  </button>
                ))}
              </div>

{/* View Controls */}
              <div className="mt-8 pt-4 border-t border-white/20">
                <div className="flex items-center gap-2">
                  <button
                    onClick={() => setViewMode("grid")}
                    className={`p-2 rounded-lg transition-colors ${
                      viewMode === "grid" ? "bg-blue-500/20 text-blue-700" : "text-gray-600 hover:bg-white/10"
                    }`}
                  >
                    <Grid3X3 className="w-4 h-4" />
                  </button>
                  <button
                    onClick={() => setViewMode("list")}
                    className={`p-2 rounded-lg transition-colors ${
                      viewMode === "list" ? "bg-blue-500/20 text-blue-700" : "text-gray-600 hover:bg-white/10"
                    }`}
                  >
                    <List className="w-4 h-4" />
                  </button>
                </div>
              </div>
            </div>

{/* Main Content */}
            <div className="flex-1 p-6 overflow-y-auto">
              <div className="flex items-center justify-between mb-6">
                <h3 className="text-xl font-semibold text-gray-800">
                  {selectedCategory === "all"
                    ? "All Photos"
                    : categories.find((c) => c.key === selectedCategory)?.label}
                  <span className="text-gray-500 ml-2">({filteredPhotos.length})</span>
                </h3>
              </div>

{viewMode === "grid" ? (
                <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
                  {filteredPhotos.map((photo) => (
                    <div
                      key={photo.id}
                      className="group relative aspect-square bg-white/10 rounded-xl overflow-hidden cursor-pointer hover:scale-105 transition-all duration-300 shadow-lg hover:shadow-xl"
                      onClick={() => openPhoto(photo)}
                    >
                      <img
                        src={photo.thumbnail || "/placeholder.svg"}
                        alt={photo.title}
                        className="w-full h-full object-cover"
                      />
                      <div className="absolute inset-0 bg-gradient-to-t from-black/60 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300" />
                      <div className="absolute bottom-0 left-0 right-0 p-3 text-white transform translate-y-full group-hover:translate-y-0 transition-transform duration-300">
                        <h4 className="font-medium text-sm truncate">{photo.title}</h4>
                        <p className="text-xs opacity-80">{photo.location}</p>
                      </div>
                      <button
                        onClick={(e) => {
                          e.stopPropagation()
                          toggleLike(photo.id)
                        }}
                        className={`absolute top-3 right-3 p-2 rounded-full backdrop-blur-sm transition-all duration-200 ${
                          likedPhotos.includes(photo.id)
                            ? "bg-red-500 text-white"
                            : "bg-white/20 text-white hover:bg-white/30"
                        }`}
                      >
                        <Heart className="w-4 h-4" />
                      </button>
                    </div>
                  ))}
                </div>
              ) : (
                <div className="space-y-3">
                  {filteredPhotos.map((photo) => (
                    <div
                      key={photo.id}
                      className="flex items-center gap-4 p-4 bg-white/10 rounded-xl hover:bg-white/20 transition-colors cursor-pointer"
                      onClick={() => openPhoto(photo)}
                    >
                      <img
                        src={photo.thumbnail || "/placeholder.svg"}
                        alt={photo.title}
                        className="w-16 h-16 rounded-lg object-cover"
                      />
                      <div className="flex-1">
                        <h4 className="font-medium text-gray-800">{photo.title}</h4>
                        <p className="text-sm text-gray-600">{photo.location}</p>
                        <p className="text-xs text-gray-500">{photo.date}</p>
                      </div>
                      <div className="flex items-center gap-2">
                        <button
                          onClick={(e) => {
                            e.stopPropagation()
                            toggleLike(photo.id)
                          }}
                          className={`p-2 rounded-full transition-colors ${
                            likedPhotos.includes(photo.id)
                              ? "bg-red-500 text-white"
                              : "bg-white/20 text-gray-600 hover:bg-white/30"
                          }`}
                        >
                          <Heart className="w-4 h-4" />
                        </button>
                      </div>
                    </div>
                  ))}
                </div>
              )}
            </div>
          </div>
        </div>
      </div>

{/* Photo Viewer Modal */}
      {selectedPhoto && (
        <div className="fixed inset-0 bg-black/80 backdrop-blur-sm flex items-center justify-center z-50">
          <div className="relative max-w-6xl max-h-[90vh] w-full mx-4">
            {/* Navigation */}
            <button
              onClick={() => navigatePhoto("prev")}
              className="absolute left-4 top-1/2 transform -translate-y-1/2 p-3 bg-white/20 backdrop-blur-sm rounded-full text-white hover:bg-white/30 transition-colors z-10"
            >
              <ChevronLeft className="w-6 h-6" />
            </button>
            <button
              onClick={() => navigatePhoto("next")}
              className="absolute right-4 top-1/2 transform -translate-y-1/2 p-3 bg-white/20 backdrop-blur-sm rounded-full text-white hover:bg-white/30 transition-colors z-10"
            >
              <ChevronRight className="w-6 h-6" />
            </button>

{/* Close Button */}
            <button
              onClick={closePhoto}
              className="absolute top-4 right-4 p-3 bg-white/20 backdrop-blur-sm rounded-full text-white hover:bg-white/30 transition-colors z-10"
            >
              <X className="w-6 h-6" />
            </button>

{/* Image */}
            <img
              src={selectedPhoto.url || "/placeholder.svg"}
              alt={selectedPhoto.title}
              className="w-full h-full object-contain rounded-2xl"
            />

{/* Info Bar */}
            <div className="absolute bottom-0 left-0 right-0 p-6 bg-gradient-to-t from-black/80 to-transparent rounded-b-2xl">
              <div className="flex items-center justify-between text-white">
                <div>
                  <h3 className="text-xl font-semibold mb-1">{selectedPhoto.title}</h3>
                  <p className="text-sm opacity-80">
                    {selectedPhoto.location} • {selectedPhoto.date}
                  </p>
                </div>
                <div className="flex items-center gap-3">
                  <button
                    onClick={() => toggleLike(selectedPhoto.id)}
                    className={`p-2 rounded-full transition-colors ${
                      likedPhotos.includes(selectedPhoto.id) ? "bg-red-500 text-white" : "bg-white/20 hover:bg-white/30"
                    }`}
                  >
                    <Heart className="w-5 h-5" />
                  </button>
                  <button className="p-2 bg-white/20 hover:bg-white/30 rounded-full transition-colors">
                    <Share className="w-5 h-5" />
                  </button>
                  <button className="p-2 bg-white/20 hover:bg-white/30 rounded-full transition-colors">
                    <Download className="w-5 h-5" />
                  </button>
                </div>
              </div>
            </div>
          </div>
        </div>
      )}
    </div>
  )
}
[V0_FILE]png:file="public/mountain-sunrise-landscape.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/mountain-sunrise-landscape-2OTr2FhfxEWpYlqSJSXkhz36YlTslZ.png" isMerged="true"
[V0_FILE]png:file="public/city-lights-night-skyline.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/city-lights-night-skyline-zxWKiwc2StXmccTRhgOWAJLv0RpuW3.png" isMerged="true"
[V0_FILE]png:file="public/abstract-glass-art-colorful.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/abstract-glass-art-colorful-fyBs9Y0GVVnz4f6601b0pyCeViHbj6.png" isMerged="true"
[V0_FILE]png:file="public/forest-path-sunlight-trees.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/forest-path-sunlight-trees-jCNh1Of55Vtmc5sE8VexiGGOcv22HN.png" isMerged="true"
[V0_FILE]png:file="public/modern-architecture-building.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/modern-architecture-building-rgRbUCLDn4k2JvRUYTn6qDSPGYiEJi.png" isMerged="true"
[V0_FILE]png:file="public/ocean-waves-sunset-beach.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/ocean-waves-sunset-beach-QdKYLfRdXfA9rDbdZfGFcJL6K36EyY.png" isMerged="true"
[V0_FILE]typescriptreact:file="components/apps/settings.tsx" isFixed="true" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

import { useState } from "react"
import {
  X,
  Monitor,
  Wifi,
  Bluetooth,
  Volume2,
  Bell,
  Shield,
  Users,
  Palette,
  Globe,
  ChevronRight,
  Moon,
  Sun,
  Eye,
} from "lucide-react"

interface SettingsProps {
  onClose: () => void
}

interface SettingCategory {
  id: string
  title: string
  icon: any
  description: string
}

export function Settings({ onClose }: SettingsProps) {
  const [selectedCategory, setSelectedCategory] = useState("general")
  const [accentColor, setAccentColor] = useState("blue")
  const [settings, setSettings] = useState({
    // General
    darkMode: false,
    autoUpdate: true,
    startupSound: true,
    // Display
    brightness: 75,
    nightShift: false,
    trueTone: true,
    resolution: "default",
    // Sound
    volume: 80,
    alertVolume: 60,
    soundEffects: true,
    // Network
    wifi: true,
    bluetooth: true,
    airdrop: "contacts",
    // Privacy
    locationServices: true,
    analytics: false,
    crashReports: true,
    // Notifications
    doNotDisturb: false,
    showPreviews: "always",
    badgeApp: true,
  })

const applyAccentColor = (color: string) => {
    setAccentColor(color)
    // Apply to CSS custom properties for system-wide theming
    document.documentElement.style.setProperty("--accent-color", getAccentColorValue(color))
    document.documentElement.style.setProperty("--accent-color-light", getAccentColorValue(color, 0.2))
    document.documentElement.style.setProperty("--accent-color-dark", getAccentColorValue(color, 0.8))
  }

const getAccentColorValue = (color: string, opacity = 1) => {
    const colors = {
      blue: `rgba(59, 130, 246, ${opacity})`,
      purple: `rgba(147, 51, 234, ${opacity})`,
      pink: `rgba(236, 72, 153, ${opacity})`,
      red: `rgba(239, 68, 68, ${opacity})`,
      orange: `rgba(249, 115, 22, ${opacity})`,
      yellow: `rgba(245, 158, 11, ${opacity})`,
      green: `rgba(34, 197, 94, ${opacity})`,
    }
    return colors[color as keyof typeof colors] || colors.blue
  }

const updateSetting = (key: string, value: any) => {
    setSettings((prev) => ({ ...prev, [key]: value }))
  }

const renderSettingContent = () => {
    switch (selectedCategory) {
      case "general":
        return (
          <div className="space-y-6">
            <div>
              <h3 className="text-lg font-semibold text-gray-800 mb-4">System Preferences</h3>
              <div className="space-y-4">
                <div className="flex items-center justify-between p-4 bg-white/10 rounded-xl">
                  <div>
                    <h4 className="font-medium text-gray-800">Automatic Updates</h4>
                    <p className="text-sm text-gray-600">Keep your Mac up to date automatically</p>
                  </div>
                  <button
                    onClick={() => updateSetting("autoUpdate", !settings.autoUpdate)}
                    className={`relative w-11 h-6 rounded-full transition-all duration-200 ${
                      settings.autoUpdate ? "bg-blue-500" : "bg-gray-300"
                    }`}
                  >
                    <div
                      className={`absolute top-1 w-4 h-4 bg-white rounded-full shadow-sm transition-all duration-200 ${
                        settings.autoUpdate ? "left-6" : "left-1"
                      }`}
                    />
                  </button>
                </div>

<div className="flex items-center justify-between p-4 bg-white/10 rounded-xl">
                  <div>
                    <h4 className="font-medium text-gray-800">Startup Sound</h4>
                    <p className="text-sm text-gray-600">Play sound when Mac starts up</p>
                  </div>
                  <button
                    onClick={() => updateSetting("startupSound", !settings.startupSound)}
                    className={`relative w-11 h-6 rounded-full transition-all duration-200 ${
                      settings.startupSound ? "bg-blue-500" : "bg-gray-300"
                    }`}
                  >
                    <div
                      className={`absolute top-1 w-4 h-4 bg-white rounded-full shadow-sm transition-all duration-200 ${
                        settings.startupSound ? "left-6" : "left-1"
                      }`}
                    />
                  </button>
                </div>
              </div>
            </div>

<div>
              <h3 className="text-lg font-semibold text-gray-800 mb-4">Storage</h3>
              <div className="p-4 bg-white/10 rounded-xl">
                <div className="flex items-center justify-between mb-3">
                  <span className="text-gray-800 font-medium">Macintosh HD</span>
                  <span className="text-gray-600">512 GB available of 1 TB</span>
                </div>
                <div className="w-full bg-gray-300 rounded-full h-2">
                  <div className="bg-blue-500 h-2 rounded-full" style={{ width: "50%" }}></div>
                </div>
                <div className="flex justify-between text-xs text-gray-600 mt-2">
                  <span>Used: 512 GB</span>
                  <span>Free: 512 GB</span>
                </div>
              </div>
            </div>
          </div>
        )

case "display":
        return (
          <div className="space-y-6">
            <div>
              <h3 className="text-lg font-semibold text-gray-800 mb-4">Display Settings</h3>
              <div className="space-y-4">
                <div className="p-4 bg-white/10 rounded-xl">
                  <div className="flex items-center justify-between mb-3">
                    <h4 className="font-medium text-gray-800">Brightness</h4>
                    <span className="text-gray-600">{settings.brightness}%</span>
                  </div>
                  <input
                    type="range"
                    min="0"
                    max="100"
                    value={settings.brightness}
                    onChange={(e) => updateSetting("brightness", Number(e.target.value))}
                    className="w-full h-2 bg-gray-300 rounded-lg appearance-none cursor-pointer slider"
                  />
                </div>

<div className="flex items-center justify-between p-4 bg-white/10 rounded-xl">
                  <div className="flex items-center gap-3">
                    <Moon className="w-5 h-5 text-gray-600" />
                    <div>
                      <h4 className="font-medium text-gray-800">Night Shift</h4>
                      <p className="text-sm text-gray-600">Warmer colors at night</p>
                    </div>
                  </div>
                  <button
                    onClick={() => updateSetting("nightShift", !settings.nightShift)}
                    className={`relative w-11 h-6 rounded-full transition-all duration-200 ${
                      settings.nightShift ? "bg-orange-500" : "bg-gray-300"
                    }`}
                  >
                    <div
                      className={`absolute top-1 w-4 h-4 bg-white rounded-full shadow-sm transition-all duration-200 ${
                        settings.nightShift ? "left-6" : "left-1"
                      }`}
                    />
                  </button>
                </div>

<div className="flex items-center justify-between p-4 bg-white/10 rounded-xl">
                  <div>
                    <h4 className="font-medium text-gray-800">True Tone</h4>
                    <p className="text-sm text-gray-600">Automatically adjust display to ambient lighting</p>
                  </div>
                  <button
                    onClick={() => updateSetting("trueTone", !settings.trueTone)}
                    className={`relative w-11 h-6 rounded-full transition-all duration-200 ${
                      settings.trueTone ? "bg-blue-500" : "bg-gray-300"
                    }`}
                  >
                    <div
                      className={`absolute top-1 w-4 h-4 bg-white rounded-full shadow-sm transition-all duration-200 ${
                        settings.trueTone ? "left-6" : "left-1"
                      }`}
                    />
                  </button>
                </div>
              </div>
            </div>
          </div>
        )

case "sound":
        return (
          <div className="space-y-6">
            <div>
              <h3 className="text-lg font-semibold text-gray-800 mb-4">Sound Settings</h3>
              <div className="space-y-4">
                <div className="p-4 bg-white/10 rounded-xl">
                  <div className="flex items-center justify-between mb-3">
                    <h4 className="font-medium text-gray-800">Output Volume</h4>
                    <span className="text-gray-600">{settings.volume}%</span>
                  </div>
                  <input
                    type="range"
                    min="0"
                    max="100"
                    value={settings.volume}
                    onChange={(e) => updateSetting("volume", Number(e.target.value))}
                    className="w-full h-2 bg-gray-300 rounded-lg appearance-none cursor-pointer slider"
                  />
                </div>

<div className="p-4 bg-white/10 rounded-xl">
                  <div className="flex items-center justify-between mb-3">
                    <h4 className="font-medium text-gray-800">Alert Volume</h4>
                    <span className="text-gray-600">{settings.alertVolume}%</span>
                  </div>
                  <input
                    type="range"
                    min="0"
                    max="100"
                    value={settings.alertVolume}
                    onChange={(e) => updateSetting("alertVolume", Number(e.target.value))}
                    className="w-full h-2 bg-gray-300 rounded-lg appearance-none cursor-pointer slider"
                  />
                </div>

<div className="flex items-center justify-between p-4 bg-white/10 rounded-xl">
                  <div>
                    <h4 className="font-medium text-gray-800">Sound Effects</h4>
                    <p className="text-sm text-gray-600">Play user interface sound effects</p>
                  </div>
                  <button
                    onClick={() => updateSetting("soundEffects", !settings.soundEffects)}
                    className={`relative w-11 h-6 rounded-full transition-all duration-200 ${
                      settings.soundEffects ? "bg-blue-500" : "bg-gray-300"
                    }`}
                  >
                    <div
                      className={`absolute top-1 w-4 h-4 bg-white rounded-full shadow-sm transition-all duration-200 ${
                        settings.soundEffects ? "left-6" : "left-1"
                      }`}
                    />
                  </button>
                </div>
              </div>
            </div>
          </div>
        )

case "network":
        return (
          <div className="space-y-6">
            <div>
              <h3 className="text-lg font-semibold text-gray-800 mb-4">Network & Connectivity</h3>
              <div className="space-y-4">
                <div className="flex items-center justify-between p-4 bg-white/10 rounded-xl">
                  <div className="flex items-center gap-3">
                    <Wifi className="w-5 h-5 text-gray-600" />
                    <div>
                      <h4 className="font-medium text-gray-800">Wi-Fi</h4>
                      <p className="text-sm text-gray-600">Connected to "Home Network"</p>
                    </div>
                  </div>
                  <button
                    onClick={() => updateSetting("wifi", !settings.wifi)}
                    className={`relative w-11 h-6 rounded-full transition-all duration-200 ${
                      settings.wifi ? "bg-green-500" : "bg-gray-300"
                    }`}
                  >
                    <div
                      className={`absolute top-1 w-4 h-4 bg-white rounded-full shadow-sm transition-all duration-200 ${
                        settings.wifi ? "left-6" : "left-1"
                      }`}
                    />
                  </button>
                </div>

<div className="flex items-center justify-between p-4 bg-white/10 rounded-xl">
                  <div className="flex items-center gap-3">
                    <Bluetooth className="w-5 h-5 text-gray-600" />
                    <div>
                      <h4 className="font-medium text-gray-800">Bluetooth</h4>
                      <p className="text-sm text-gray-600">2 devices connected</p>
                    </div>
                  </div>
                  <button
                    onClick={() => updateSetting("bluetooth", !settings.bluetooth)}
                    className={`relative w-11 h-6 rounded-full transition-all duration-200 ${
                      settings.bluetooth ? "bg-blue-500" : "bg-gray-300"
                    }`}
                  >
                    <div
                      className={`absolute top-1 w-4 h-4 bg-white rounded-full shadow-sm transition-all duration-200 ${
                        settings.bluetooth ? "left-6" : "left-1"
                      }`}
                    />
                  </button>
                </div>

<div className="p-4 bg-white/10 rounded-xl">
                  <h4 className="font-medium text-gray-800 mb-3">AirDrop</h4>
                  <div className="space-y-2">
                    {["off", "contacts", "everyone"].map((option) => (
                      <button
                        key={option}
                        onClick={() => updateSetting("airdrop", option)}
                        className={`w-full text-left px-3 py-2 rounded-lg transition-colors ${
                          settings.airdrop === option
                            ? "bg-blue-500/20 text-blue-700 font-medium"
                            : "text-gray-600 hover:bg-white/10"
                        }`}
                      >
                        {option === "off" ? "Receiving Off" : option === "contacts" ? "Contacts Only" : "Everyone"}
                      </button>
                    ))}
                  </div>
                </div>
              </div>
            </div>
          </div>
        )

case "privacy":
        return (
          <div className="space-y-6">
            <div>
              <h3 className="text-lg font-semibold text-gray-800 mb-4">Privacy & Security</h3>
              <div className="space-y-4">
                <div className="flex items-center justify-between p-4 bg-white/10 rounded-xl">
                  <div className="flex items-center gap-3">
                    <Globe className="w-5 h-5 text-gray-600" />
                    <div>
                      <h4 className="font-medium text-gray-800">Location Services</h4>
                      <p className="text-sm text-gray-600">Allow apps to access your location</p>
                    </div>
                  </div>
                  <button
                    onClick={() => updateSetting("locationServices", !settings.locationServices)}
                    className={`relative w-11 h-6 rounded-full transition-all duration-200 ${
                      settings.locationServices ? "bg-blue-500" : "bg-gray-300"
                    }`}
                  >
                    <div
                      className={`absolute top-1 w-4 h-4 bg-white rounded-full shadow-sm transition-all duration-200 ${
                        settings.locationServices ? "left-6" : "left-1"
                      }`}
                    />
                  </button>
                </div>

<div className="flex items-center justify-between p-4 bg-white/10 rounded-xl">
                  <div>
                    <h4 className="font-medium text-gray-800">Analytics & Improvements</h4>
                    <p className="text-sm text-gray-600">Share analytics data with Apple</p>
                  </div>
                  <button
                    onClick={() => updateSetting("analytics", !settings.analytics)}
                    className={`relative w-11 h-6 rounded-full transition-all duration-200 ${
                      settings.analytics ? "bg-blue-500" : "bg-gray-300"
                    }`}
                  >
                    <div
                      className={`absolute top-1 w-4 h-4 bg-white rounded-full shadow-sm transition-all duration-200 ${
                        settings.analytics ? "left-6" : "left-1"
                      }`}
                    />
                  </button>
                </div>

<div className="flex items-center justify-between p-4 bg-white/10 rounded-xl">
                  <div>
                    <h4 className="font-medium text-gray-800">Crash Reports</h4>
                    <p className="text-sm text-gray-600">Automatically send crash reports</p>
                  </div>
                  <button
                    onClick={() => updateSetting("crashReports", !settings.crashReports)}
                    className={`relative w-11 h-6 rounded-full transition-all duration-200 ${
                      settings.crashReports ? "bg-blue-500" : "bg-gray-300"
                    }`}
                  >
                    <div
                      className={`absolute top-1 w-4 h-4 bg-white rounded-full shadow-sm transition-all duration-200 ${
                        settings.crashReports ? "left-6" : "left-1"
                      }`}
                    />
                  </button>
                </div>
              </div>
            </div>
          </div>
        )

case "notifications":
        return (
          <div className="space-y-6">
            <div>
              <h3 className="text-lg font-semibold text-gray-800 mb-4">Notifications</h3>
              <div className="space-y-4">
                <div className="flex items-center justify-between p-4 bg-white/10 rounded-xl">
                  <div className="flex items-center gap-3">
                    <Moon className="w-5 h-5 text-gray-600" />
                    <div>
                      <h4 className="font-medium text-gray-800">Do Not Disturb</h4>
                      <p className="text-sm text-gray-600">Silence notifications and calls</p>
                    </div>
                  </div>
                  <button
                    onClick={() => updateSetting("doNotDisturb", !settings.doNotDisturb)}
                    className={`relative w-11 h-6 rounded-full transition-all duration-200 ${
                      settings.doNotDisturb ? "bg-purple-500" : "bg-gray-300"
                    }`}
                  >
                    <div
                      className={`absolute top-1 w-4 h-4 bg-white rounded-full shadow-sm transition-all duration-200 ${
                        settings.doNotDisturb ? "left-6" : "left-1"
                      }`}
                    />
                  </button>
                </div>

<div className="p-4 bg-white/10 rounded-xl">
                  <h4 className="font-medium text-gray-800 mb-3">Show Previews</h4>
                  <div className="space-y-2">
                    {["always", "unlocked", "never"].map((option) => (
                      <button
                        key={option}
                        onClick={() => updateSetting("showPreviews", option)}
                        className={`w-full text-left px-3 py-2 rounded-lg transition-colors ${
                          settings.showPreviews === option
                            ? "bg-blue-500/20 text-blue-700 font-medium"
                            : "text-gray-600 hover:bg-white/10"
                        }`}
                      >
                        {option === "always" ? "Always" : option === "unlocked" ? "When Unlocked" : "Never"}
                      </button>
                    ))}
                  </div>
                </div>

<div className="flex items-center justify-between p-4 bg-white/10 rounded-xl">
                  <div>
                    <h4 className="font-medium text-gray-800">Badge App Icon</h4>
                    <p className="text-sm text-gray-600">Show notification badges on app icons</p>
                  </div>
                  <button
                    onClick={() => updateSetting("badgeApp", !settings.badgeApp)}
                    className={`relative w-11 h-6 rounded-full transition-all duration-200 ${
                      settings.badgeApp ? "bg-red-500" : "bg-gray-300"
                    }`}
                  >
                    <div
                      className={`absolute top-1 w-4 h-4 bg-white rounded-full shadow-sm transition-all duration-200 ${
                        settings.badgeApp ? "left-6" : "left-1"
                      }`}
                    />
                  </button>
                </div>
              </div>
            </div>
          </div>
        )

case "appearance":
        return (
          <div className="space-y-6">
            <div>
              <h3 className="text-lg font-semibold text-gray-800 mb-4">Appearance</h3>
              <div className="space-y-4">
                <div className="flex items-center justify-between p-4 bg-white/10 rounded-xl">
                  <div className="flex items-center gap-3">
                    {settings.darkMode ? (
                      <Moon className="w-5 h-5 text-gray-600" />
                    ) : (
                      <Sun className="w-5 h-5 text-gray-600" />
                    )}
                    <div>
                      <h4 className="font-medium text-gray-800">Dark Mode</h4>
                      <p className="text-sm text-gray-600">Use dark appearance</p>
                    </div>
                  </div>
                  <button
                    onClick={() => updateSetting("darkMode", !settings.darkMode)}
                    className={`relative w-11 h-6 rounded-full transition-all duration-200 ${
                      settings.darkMode ? "bg-gray-800" : "bg-gray-300"
                    }`}
                  >
                    <div
                      className={`absolute top-1 w-4 h-4 bg-white rounded-full shadow-sm transition-all duration-200 ${
                        settings.darkMode ? "left-6" : "left-1"
                      }`}
                    />
                  </button>
                </div>

<div className="p-4 bg-white/10 rounded-xl">
                  <h4 className="font-medium text-gray-800 mb-3">Accent Color</h4>
                  <p className="text-sm text-gray-600 mb-4">
                    Choose an accent color for buttons, selections, and links
                  </p>
                  <div className="flex gap-3">
                    {[
                      { color: "blue", bg: "bg-blue-500", name: "Blue" },
                      { color: "purple", bg: "bg-purple-500", name: "Purple" },
                      { color: "pink", bg: "bg-pink-500", name: "Pink" },
                      { color: "red", bg: "bg-red-500", name: "Red" },
                      { color: "orange", bg: "bg-orange-500", name: "Orange" },
                      { color: "yellow", bg: "bg-yellow-500", name: "Yellow" },
                      { color: "green", bg: "bg-green-500", name: "Green" },
                    ].map((accent) => (
                      <button
                        key={accent.color}
                        onClick={() => applyAccentColor(accent.color)}
                        className={`w-10 h-10 rounded-full ${accent.bg} hover:scale-110 transition-all duration-200 border-2 ${
                          accentColor === accent.color ? "border-white shadow-lg scale-110" : "border-white/50"
                        } relative group`}
                        title={accent.name}
                      >
                        {accentColor === accent.color && (
                          <div className="absolute inset-0 rounded-full bg-white/30 animate-pulse" />
                        )}
                      </button>
                    ))}
                  </div>
                  <p className="text-xs text-gray-500 mt-2">
                    Current: {accentColor.charAt(0).toUpperCase() + accentColor.slice(1)}
                  </p>
                </div>
              </div>
            </div>
          </div>
        )

default:
        return (
          <div className="flex items-center justify-center h-64">
            <p className="text-gray-600">Select a category to view settings</p>
          </div>
        )
    }
  }

return (
    <div className="flex-1 p-6">
      <div className="max-w-6xl mx-auto h-full">
        <div className="bg-white/20 backdrop-blur-xl border border-white/30 rounded-2xl shadow-2xl overflow-hidden h-full flex flex-col">
          {/* Title Bar */}
          <div className="flex items-center justify-between p-4 bg-white/10 border-b border-white/20">
            <h2 className="text-lg font-semibold text-gray-800">System Preferences</h2>
            <button onClick={onClose} className="p-1 hover:bg-white/20 rounded-full transition-colors">
              <X className="w-4 h-4 text-gray-600" />
            </button>
          </div>

<div className="flex flex-1 overflow-hidden">
            {/* Sidebar */}
            <div className="w-80 bg-white/10 border-r border-white/20 p-4 overflow-y-auto">
              <div className="space-y-2">
                {[
                  { id: "general", title: "General", icon: Monitor, description: "Software update, storage, AirDrop" },
                  { id: "display", title: "Display", icon: Eye, description: "Brightness, Night Shift, resolution" },
                  { id: "sound", title: "Sound", icon: Volume2, description: "Volume, sound effects, alerts" },
                  { id: "network", title: "Network", icon: Wifi, description: "Wi-Fi, Bluetooth, sharing" },
                  {
                    id: "privacy",
                    title: "Privacy & Security",
                    icon: Shield,
                    description: "Location, analytics, permissions",
                  },
                  { id: "notifications", title: "Notifications", icon: Bell, description: "Alerts, badges, sounds" },
                  { id: "users", title: "Users & Groups", icon: Users, description: "Account settings, login items" },
                  {
                    id: "appearance",
                    title: "Appearance",
                    icon: Palette,
                    description: "Theme, accent colors, sidebar",
                  },
                ].map((category) => (
                  <button
                    key={category.id}
                    onClick={() => setSelectedCategory(category.id)}
                    className={`w-full flex items-center gap-3 p-3 rounded-xl transition-all duration-200 ${
                      selectedCategory === category.id
                        ? "bg-blue-500/20 text-blue-700 shadow-sm scale-[1.02]"
                        : "text-gray-600 hover:bg-white/10 hover:text-gray-800 hover:scale-[1.01]"
                    }`}
                  >
                    <div
                      className={`p-2 rounded-lg ${
                        selectedCategory === category.id ? "bg-blue-500/30" : "bg-white/20"
                      }`}
                    >
                      <category.icon className="w-5 h-5" />
                    </div>
                    <div className="flex-1 text-left">
                      <h3 className="font-medium">{category.title}</h3>
                      <p className="text-xs opacity-70">{category.description}</p>
                    </div>
                    <ChevronRight className="w-4 h-4 opacity-50" />
                  </button>
                ))}
              </div>
            </div>

{/* Main Content */}
            <div className="flex-1 p-6 overflow-y-auto">{renderSettingContent()}</div>
          </div>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/apps/app-store.tsx" isFixed="true" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

import { useState } from "react"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Badge } from "@/components/ui/badge"
import { Search, Star, X, Download, Check } from "lucide-react"

interface App {
  id: string
  name: string
  developer: string
  category: string
  rating: number
  price: string
  description: string
  icon: string
  screenshots: string[]
  size: string
  version: string
  installed: boolean
}

const apps: App[] = [
  {
    id: "excel",
    name: "Microsoft Excel",
    developer: "Microsoft Corporation",
    category: "Productivity",
    rating: 4.5,
    price: "$6.99/month",
    description: "Create, view, edit, and share spreadsheets using the Excel spreadsheet app.",
    icon: "📊",
    screenshots: ["/excel-spreadsheet.png"],
    size: "1.2 GB",
    version: "16.77",
    installed: false,
  },
  {
    id: "powerpoint",
    name: "Microsoft PowerPoint",
    developer: "Microsoft Corporation",
    category: "Productivity",
    rating: 4.4,
    price: "$6.99/month",
    description: "Create, edit, view, present, or share presentations quickly and easily.",
    icon: "📽️",
    screenshots: ["/powerpoint-presentation.png"],
    size: "1.1 GB",
    version: "16.77",
    installed: false,
  },
  {
    id: "word",
    name: "Microsoft Word",
    developer: "Microsoft Corporation",
    category: "Productivity",
    rating: 4.6,
    price: "$6.99/month",
    description: "Write and edit documents with rich formatting tools and collaboration features.",
    icon: "📝",
    screenshots: ["/word-document.png"],
    size: "1.3 GB",
    version: "16.77",
    installed: false,
  },
  {
    id: "photoshop",
    name: "Adobe Photoshop",
    developer: "Adobe Inc.",
    category: "Graphics & Design",
    rating: 4.7,
    price: "$20.99/month",
    description: "Professional image editing and graphic design software.",
    icon: "🎨",
    screenshots: ["/photoshop-interface.png"],
    size: "2.1 GB",
    version: "24.7",
    installed: false,
  },
  {
    id: "illustrator",
    name: "Adobe Illustrator",
    developer: "Adobe Inc.",
    category: "Graphics & Design",
    rating: 4.5,
    price: "$20.99/month",
    description: "Create vector graphics, logos, and illustrations.",
    icon: "✏️",
    screenshots: ["/abstract-vector-design.png"],
    size: "1.8 GB",
    version: "27.9",
    installed: false,
  },
  {
    id: "premiere",
    name: "Adobe Premiere Pro",
    developer: "Adobe Inc.",
    category: "Video",
    rating: 4.6,
    price: "$20.99/month",
    description: "Professional video editing software for filmmakers and content creators.",
    icon: "🎬",
    screenshots: ["/premiere-pro-editing.png"],
    size: "3.2 GB",
    version: "23.6",
    installed: false,
  },
  {
    id: "vscode",
    name: "Visual Studio Code",
    developer: "Microsoft Corporation",
    category: "Developer Tools",
    rating: 4.8,
    price: "Free",
    description: "Lightweight but powerful source code editor with IntelliSense and debugging.",
    icon: "💻",
    screenshots: ["/vscode-code-editor.png"],
    size: "85 MB",
    version: "1.84",
    installed: false,
  },
  {
    id: "terminal",
    name: "Terminal Pro",
    developer: "Apple Inc.",
    category: "Developer Tools",
    rating: 4.3,
    price: "Free",
    description: "Advanced terminal emulator with modern features and customization.",
    icon: "⌨️",
    screenshots: ["/terminal-command-line.png"],
    size: "45 MB",
    version: "2.13",
    installed: false,
  },
  {
    id: "github",
    name: "GitHub Desktop",
    developer: "GitHub, Inc.",
    category: "Developer Tools",
    rating: 4.4,
    price: "Free",
    description: "Simplify your Git workflow with a beautiful desktop application.",
    icon: "🐙",
    screenshots: ["/github-desktop-interface.png"],
    size: "120 MB",
    version: "3.3.4",
    installed: false,
  },
  {
    id: "netflix",
    name: "Netflix",
    developer: "Netflix, Inc.",
    category: "Entertainment",
    rating: 4.2,
    price: "Free",
    description: "Watch TV shows and movies recommended just for you.",
    icon: "🎭",
    screenshots: ["/netflix-streaming-interface.png"],
    size: "180 MB",
    version: "15.42",
    installed: false,
  },
  {
    id: "spotify",
    name: "Spotify",
    developer: "Spotify AB",
    category: "Music",
    rating: 4.5,
    price: "Free",
    description: "Music for everyone. Millions of songs, podcasts and playlists.",
    icon: "🎵",
    screenshots: ["/generic-music-player.png"],
    size: "140 MB",
    version: "1.2.25",
    installed: false,
  },
  {
    id: "chess",
    name: "Chess Master",
    developer: "Game Studio",
    category: "Games",
    rating: 4.7,
    price: "$4.99",
    description: "Play chess against AI or friends with beautiful 3D graphics.",
    icon: "♟️",
    screenshots: ["/3d-chess-game.png"],
    size: "250 MB",
    version: "3.1",
    installed: false,
  },
  {
    id: "figma",
    name: "Figma",
    developer: "Figma, Inc.",
    category: "Graphics & Design",
    rating: 4.8,
    price: "Free",
    description: "Collaborative interface design tool for teams.",
    icon: "🎯",
    screenshots: ["/figma-design-interface.png"],
    size: "95 MB",
    version: "116.15",
    installed: false,
  },
  {
    id: "slack",
    name: "Slack",
    developer: "Slack Technologies",
    category: "Business",
    rating: 4.3,
    price: "Free",
    description: "Team communication and collaboration platform.",
    icon: "💬",
    screenshots: ["/placeholder-8vn5t.png"],
    size: "170 MB",
    version: "4.34",
    installed: false,
  },
  {
    id: "zoom",
    name: "Zoom",
    developer: "Zoom Video Communications",
    category: "Business",
    rating: 4.1,
    price: "Free",
    description: "Video conferencing and online meetings platform.",
    icon: "📹",
    screenshots: ["/placeholder.svg?height=300&width=400"],
    size: "85 MB",
    version: "5.16",
    installed: false,
  },
  {
    id: "notion",
    name: "Notion",
    developer: "Notion Labs, Inc.",
    category: "Productivity",
    rating: 4.6,
    price: "Free",
    description: "All-in-one workspace for notes, tasks, wikis, and databases.",
    icon: "📋",
    screenshots: ["/placeholder.svg?height=300&width=400"],
    size: "120 MB",
    version: "2.0.34",
    installed: false,
  },
  {
    id: "discord",
    name: "Discord",
    developer: "Discord Inc.",
    category: "Social Networking",
    rating: 4.4,
    price: "Free",
    description: "Voice, video and text communication for gamers and communities.",
    icon: "🎮",
    screenshots: ["/placeholder.svg?height=300&width=400"],
    size: "95 MB",
    version: "0.0.280",
    installed: false,
  },
  {
    id: "blender",
    name: "Blender",
    developer: "Blender Foundation",
    category: "Graphics & Design",
    rating: 4.7,
    price: "Free",
    description: "Free and open source 3D creation suite.",
    icon: "🎲",
    screenshots: ["/placeholder.svg?height=300&width=400"],
    size: "280 MB",
    version: "4.0",
    installed: false,
  },
  {
    id: "xcode",
    name: "Xcode",
    developer: "Apple Inc.",
    category: "Developer Tools",
    rating: 4.2,
    price: "Free",
    description: "Complete developer toolset for creating apps for Mac, iPhone, and iPad.",
    icon: "🔨",
    screenshots: ["/placeholder.svg?height=300&width=400"],
    size: "11.2 GB",
    version: "15.0",
    installed: false,
  },
  {
    id: "safari",
    name: "Safari",
    developer: "Apple Inc.",
    category: "Web Browsers",
    rating: 4.5,
    price: "Free",
    description: "Fast, secure web browser with privacy features built-in.",
    icon: "🧭",
    screenshots: ["/placeholder.svg?height=300&width=400"],
    size: "75 MB",
    version: "17.0",
    installed: false,
  },
]

interface AppStoreProps {
  onClose: () => void
  onAppInstall: (appId: string) => void
}

export function AppStore({ onClose, onAppInstall }: AppStoreProps) {
  const [searchQuery, setSearchQuery] = useState("")
  const [selectedCategory, setSelectedCategory] = useState("All")
  const [selectedApp, setSelectedApp] = useState<App | null>(null)
  const [installedApps, setInstalledApps] = useState<string[]>([])
  const [installingApps, setInstallingApps] = useState<string[]>([])

const categories = [
    "All",
    "Productivity",
    "Graphics & Design",
    "Developer Tools",
    "Entertainment",
    "Music",
    "Games",
    "Business",
    "Social Networking",
    "Video",
    "Web Browsers",
  ]

const filteredApps = apps.filter((app) => {
    const matchesSearch =
      app.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
      app.developer.toLowerCase().includes(searchQuery.toLowerCase())
    const matchesCategory = selectedCategory === "All" || app.category === selectedCategory
    return matchesSearch && matchesCategory
  })

const handleInstall = (app: App) => {
    setInstallingApps((prev) => [...prev, app.id])

// Simulate installation process
    setTimeout(() => {
      setInstalledApps((prev) => [...prev, app.id])
      setInstallingApps((prev) => prev.filter((id) => id !== app.id))
      onAppInstall(app.id)
      setSelectedApp(null)
    }, 2000)
  }

const isInstalled = (appId: string) => installedApps.includes(appId)
  const isInstalling = (appId: string) => installingApps.includes(appId)

return (
    <div className="h-full bg-white/20 backdrop-blur-xl border border-white/30 rounded-xl overflow-hidden glass-morphism">
      {/* Header */}
      <div className="flex items-center justify-between p-4 border-b border-white/20 bg-white/5">
        <h1 className="text-2xl font-bold text-gray-800">App Store</h1>
        <Button variant="ghost" size="sm" onClick={onClose} className="hover:bg-white/20 interactive-button focus-ring">
          <X className="h-4 w-4" />
        </Button>
      </div>

{selectedApp ? (
        // App Detail View
        <div className="h-full overflow-y-auto scrollbar-thin scrollbar-thumb-white/20 scrollbar-track-transparent p-6">
          <Button
            variant="ghost"
            onClick={() => setSelectedApp(null)}
            className="mb-4 hover:bg-white/20 interactive-button focus-ring"
          >
            ← Back to Store
          </Button>

<div className="flex gap-6 mb-6">
            <div className="text-6xl float-animation">{selectedApp.icon}</div>
            <div className="flex-1">
              <h2 className="text-3xl font-bold text-gray-800 mb-2">{selectedApp.name}</h2>
              <p className="text-gray-600 mb-2">{selectedApp.developer}</p>
              <div className="flex items-center gap-4 mb-4">
                <div className="flex items-center gap-1">
                  <Star className="h-4 w-4 fill-yellow-400 text-yellow-400" />
                  <span className="font-medium">{selectedApp.rating}</span>
                </div>
                <Badge variant="secondary" className="glass-morphism">
                  {selectedApp.category}
                </Badge>
                <span className="text-sm text-gray-600">{selectedApp.size}</span>
              </div>

<div className="flex items-center gap-4 mb-6">
                <div className="text-2xl font-bold text-blue-600">{selectedApp.price}</div>
                <Button
                  onClick={() => handleInstall(selectedApp)}
                  disabled={isInstalled(selectedApp.id) || isInstalling(selectedApp.id)}
                  className={`px-8 interactive-button focus-ring transition-all duration-300 ${
                    isInstalled(selectedApp.id)
                      ? "bg-green-500 hover:bg-green-600 text-white"
                      : isInstalling(selectedApp.id)
                        ? "bg-blue-400 text-white cursor-not-allowed loading-shimmer"
                        : "bg-blue-500 hover:bg-blue-600 text-white pulse-glow"
                  }`}
                >
                  {isInstalled(selectedApp.id) ? (
                    <>
                      <Check className="h-4 w-4 mr-2" />
                      Installed
                    </>
                  ) : isInstalling(selectedApp.id) ? (
                    <>
                      <Download className="h-4 w-4 mr-2 animate-bounce" />
                      Installing...
                    </>
                  ) : (
                    <>
                      <Download className="h-4 w-4 mr-2" />
                      Install
                    </>
                  )}
                </Button>
              </div>
            </div>
          </div>

<div className="mb-6 glass-morphism p-4 rounded-lg">
            <h3 className="text-xl font-semibold mb-3">Description</h3>
            <p className="text-gray-700 leading-relaxed">{selectedApp.description}</p>
          </div>

<div className="glass-morphism p-4 rounded-lg">
            <h3 className="text-xl font-semibold mb-3">Screenshots</h3>
            <div className="grid grid-cols-1 md:grid-cols-2 gap-4 overflow-y-auto max-h-96 scrollbar-thin scrollbar-thumb-white/20 scrollbar-track-transparent">
              {selectedApp.screenshots.map((screenshot, index) => (
                <img
                  key={index}
                  src={screenshot || "/placeholder.svg"}
                  alt={`${selectedApp.name} screenshot ${index + 1}`}
                  className="rounded-lg border border-white/30 w-full h-48 object-cover hover:scale-105 transition-transform duration-300 cursor-pointer selectable"
                />
              ))}
            </div>
          </div>
        </div>
      ) : (
        // Main Store View
        <div className="h-full flex flex-col">
          {/* Search and Filters */}
          <div className="p-4 border-b border-white/20 bg-white/5">
            <div className="relative mb-4">
              <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-gray-400" />
              <Input
                placeholder="Search apps..."
                value={searchQuery}
                onChange={(e) => setSearchQuery(e.target.value)}
                className="pl-10 bg-white/30 border-white/30 placeholder:text-gray-500 focus-ring interactive-button"
              />
            </div>

<div className="flex gap-2 overflow-x-auto scrollbar-thin scrollbar-thumb-white/20 scrollbar-track-transparent pb-2">
              {categories.map((category) => (
                <Button
                  key={category}
                  variant={selectedCategory === category ? "default" : "ghost"}
                  size="sm"
                  onClick={() => setSelectedCategory(category)}
                  className={`whitespace-nowrap interactive-button focus-ring transition-all duration-200 ${
                    selectedCategory === category ? "bg-blue-500 text-white pulse-glow" : "hover:bg-white/20 selectable"
                  }`}
                >
                  {category}
                </Button>
              ))}
            </div>
          </div>

{/* Apps Grid */}
          <div className="flex-1 overflow-y-auto scrollbar-thin scrollbar-thumb-white/20 scrollbar-track-transparent p-4">
            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
              {filteredApps.map((app) => (
                <div
                  key={app.id}
                  className="glass-morphism rounded-xl p-4 cursor-pointer selectable interactive-button focus-ring transition-all duration-300"
                  onClick={() => setSelectedApp(app)}
                  tabIndex={0}
                  onKeyDown={(e) => e.key === "Enter" && setSelectedApp(app)}
                >
                  <div className="flex items-start gap-3 mb-3">
                    <div className="text-3xl float-animation">{app.icon}</div>
                    <div className="flex-1 min-w-0">
                      <h3 className="font-semibold text-gray-800 truncate">{app.name}</h3>
                      <p className="text-sm text-gray-600 truncate">{app.developer}</p>
                    </div>
                  </div>

<div className="flex items-center justify-between mb-2">
                    <div className="flex items-center gap-1">
                      <Star className="h-3 w-3 fill-yellow-400 text-yellow-400" />
                      <span className="text-sm font-medium">{app.rating}</span>
                    </div>
                    <Badge variant="secondary" className="text-xs glass-morphism">
                      {app.category}
                    </Badge>
                  </div>

<div className="flex items-center justify-between">
                    <span className="font-bold text-blue-600">{app.price}</span>
                    <Button
                      size="sm"
                      onClick={(e) => {
                        e.stopPropagation()
                        handleInstall(app)
                      }}
                      disabled={isInstalled(app.id) || isInstalling(app.id)}
                      className={`text-xs px-3 interactive-button focus-ring transition-all duration-300 ${
                        isInstalled(app.id)
                          ? "bg-green-500 hover:bg-green-600 text-white"
                          : isInstalling(app.id)
                            ? "bg-blue-400 text-white cursor-not-allowed loading-shimmer"
                            : "bg-blue-500 hover:bg-blue-600 text-white"
                      }`}
                    >
                      {isInstalled(app.id) ? (
                        <>
                          <Check className="h-3 w-3 mr-1" />
                          Installed
                        </>
                      ) : isInstalling(app.id) ? (
                        <>
                          <Download className="h-3 w-3 mr-1 animate-spin" />
                          Installing
                        </>
                      ) : (
                        <>
                          <Download className="h-3 w-3 mr-1" />
                          Install
                        </>
                      )}
                    </Button>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </div>
      )}
    </div>
  )
}
[V0_FILE]png:file="public/excel-spreadsheet.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/excel-spreadsheet-G6y9yWsjteNmdhb1MySGIQ2opLnc8r.png" isMerged="true"
[V0_FILE]png:file="public/powerpoint-presentation.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/powerpoint-presentation-W49PNM5KzosjzazkV3zFvbJYJjcuIM.png" isMerged="true"
[V0_FILE]png:file="public/word-document.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/word-document-XQz350GJENe9PqNLEn38ziQ09G67pz.png" isMerged="true"
[V0_FILE]png:file="public/photoshop-interface.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/photoshop-interface-nm4PwAgX4dOV3JGHxqYc9qM67lVOSd.png" isMerged="true"
[V0_FILE]png:file="public/abstract-vector-design.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/abstract-vector-design-f3cOZs0PfNUNfR0FhAUhRbDuBG1AfJ.png" isMerged="true"
[V0_FILE]png:file="public/premiere-pro-editing.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/premiere-pro-editing-KOmXdINYlxhpaWAloS7zighWB5153r.png" isMerged="true"
[V0_FILE]png:file="public/vscode-code-editor.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/vscode-code-editor-0Q0bOoms6a8gfEsqbYz7VokibYzAxj.png" isMerged="true"
[V0_FILE]png:file="public/terminal-command-line.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/terminal-command-line-gOE0i2ic9pxWRqxmjU4G1czSwh8MdC.png" isMerged="true"
[V0_FILE]png:file="public/github-desktop-interface.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/github-desktop-interface-kUxYo9pgdPouxyBSD0VMsBcM2mVhJD.png" isMerged="true"
[V0_FILE]png:file="public/netflix-streaming-interface.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/netflix-streaming-interface-1jGPVlrm2EJpezoAPrGVkkuOS57WcS.png" isMerged="true"
[V0_FILE]png:file="public/generic-music-player.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/generic-music-player-dhtTAvKy9L2Uc2NDvfsIOdVELZopXJ.png" isMerged="true"
[V0_FILE]png:file="public/3d-chess-game.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/3d-chess-game-Dua3NfWCix8OADnQ0ykDEFYf1ZzsaG.png" isMerged="true"
[V0_FILE]png:file="public/figma-design-interface.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/figma-design-interface-erDdSt0ALvwUwj2BM4Bu9jCP1BglLP.png" isMerged="true"
[V0_FILE]png:file="public/placeholder-8vn5t.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/placeholder-ObxMt4d3T5MDA2Ca7JyHf5lCNuxMZN.png" isMerged="true"
[V0_FILE]typescriptreact:file="components/apps/excel.tsx" isMerged="true"
"use client"

import { useState } from "react"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { X, Plus, Save, FileText, Calculator, BarChart3 } from "lucide-react"

interface Cell {
  value: string
  formula?: string
}

interface ExcelProps {
  onClose: () => void
}

export function Excel({ onClose }: ExcelProps) {
  const [cells, setCells] = useState<{ [key: string]: Cell }>({
    A1: { value: "Product" },
    B1: { value: "Price" },
    C1: { value: "Quantity" },
    D1: { value: "Total" },
    A2: { value: "Laptop" },
    B2: { value: "999" },
    C2: { value: "5" },
    D2: { value: "4995", formula: "=B2*C2" },
    A3: { value: "Mouse" },
    B3: { value: "25" },
    C3: { value: "10" },
    D3: { value: "250", formula: "=B3*C3" },
  })

const [selectedCell, setSelectedCell] = useState("A1")
  const [formulaBar, setFormulaBar] = useState("")

const columns = ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J"]
  const rows = Array.from({ length: 20 }, (_, i) => i + 1)

const getCellId = (col: string, row: number) => `${col}${row}`

const handleCellClick = (cellId: string) => {
    setSelectedCell(cellId)
    const cell = cells[cellId]
    setFormulaBar(cell?.formula || cell?.value || "")
  }

const handleCellChange = (cellId: string, value: string) => {
    setCells((prev) => ({
      ...prev,
      [cellId]: { value, formula: value.startsWith("=") ? value : undefined },
    }))
  }

const handleFormulaSubmit = () => {
    if (formulaBar.startsWith("=")) {
      // Simple formula evaluation for demo
      const result = evaluateFormula(formulaBar)
      setCells((prev) => ({
        ...prev,
        [selectedCell]: { value: result.toString(), formula: formulaBar },
      }))
    } else {
      setCells((prev) => ({
        ...prev,
        [selectedCell]: { value: formulaBar },
      }))
    }
  }

const evaluateFormula = (formula: string): number => {
    // Simple formula parser for demo (B2*C2, etc.)
    const cellRefs = formula.match(/[A-Z]\d+/g) || []
    let expression = formula.substring(1) // Remove =

cellRefs.forEach((ref) => {
      const cellValue = cells[ref]?.value || "0"
      expression = expression.replace(ref, cellValue)
    })

try {
      return eval(expression)
    } catch {
      return 0
    }
  }

return (
    <div className="h-full bg-white/20 backdrop-blur-xl border border-white/30 rounded-xl overflow-hidden flex flex-col">
      {/* Header */}
      <div className="flex items-center justify-between p-3 border-b border-white/20 bg-white/10">
        <div className="flex items-center gap-3">
          <div className="text-2xl">📊</div>
          <h1 className="text-lg font-semibold text-gray-800">Microsoft Excel</h1>
        </div>
        <Button variant="ghost" size="sm" onClick={onClose} className="hover:bg-white/20">
          <X className="h-4 w-4" />
        </Button>
      </div>

{/* Toolbar */}
      <div className="flex items-center gap-2 p-2 border-b border-white/20 bg-white/5">
        <Button size="sm" variant="ghost" className="hover:bg-white/20">
          <Save className="h-4 w-4 mr-1" />
          Save
        </Button>
        <Button size="sm" variant="ghost" className="hover:bg-white/20">
          <FileText className="h-4 w-4 mr-1" />
          New
        </Button>
        <Button size="sm" variant="ghost" className="hover:bg-white/20">
          <Plus className="h-4 w-4 mr-1" />
          Insert
        </Button>
        <Button size="sm" variant="ghost" className="hover:bg-white/20">
          <BarChart3 className="h-4 w-4 mr-1" />
          Chart
        </Button>
        <Button size="sm" variant="ghost" className="hover:bg-white/20">
          <Calculator className="h-4 w-4 mr-1" />
          Functions
        </Button>
      </div>

{/* Formula Bar */}
      <div className="flex items-center gap-2 p-2 border-b border-white/20 bg-white/5">
        <div className="w-16 text-sm font-medium text-gray-700">{selectedCell}</div>
        <Input
          value={formulaBar}
          onChange={(e) => setFormulaBar(e.target.value)}
          onKeyDown={(e) => e.key === "Enter" && handleFormulaSubmit()}
          placeholder="Enter formula or value..."
          className="flex-1 bg-white/30 border-white/30"
        />
      </div>

{/* Spreadsheet */}
      <div className="flex-1 overflow-auto">
        <div className="inline-block min-w-full">
          {/* Column Headers */}
          <div className="flex sticky top-0 bg-white/20 border-b border-white/20">
            <div className="w-12 h-8 border-r border-white/20 bg-white/10"></div>
            {columns.map((col) => (
              <div
                key={col}
                className="w-24 h-8 border-r border-white/20 flex items-center justify-center text-sm font-medium text-gray-700 bg-white/10"
              >
                {col}
              </div>
            ))}
          </div>

{/* Rows */}
          {rows.map((row) => (
            <div key={row} className="flex">
              {/* Row Header */}
              <div className="w-12 h-8 border-r border-b border-white/20 flex items-center justify-center text-sm font-medium text-gray-700 bg-white/10">
                {row}
              </div>

{/* Cells */}
              {columns.map((col) => {
                const cellId = getCellId(col, row)
                const cell = cells[cellId]
                const isSelected = selectedCell === cellId

return (
                  <div
                    key={cellId}
                    className={`w-24 h-8 border-r border-b border-white/20 relative ${
                      isSelected ? "bg-blue-200/50 ring-2 ring-blue-400" : "hover:bg-white/20"
                    }`}
                    onClick={() => handleCellClick(cellId)}
                  >
                    <input
                      type="text"
                      value={cell?.value || ""}
                      onChange={(e) => handleCellChange(cellId, e.target.value)}
                      className="w-full h-full px-1 text-sm bg-transparent border-none outline-none"
                      onFocus={() => handleCellClick(cellId)}
                    />
                  </div>
                )
              })}
            </div>
          ))}
        </div>
      </div>

{/* Status Bar */}
      <div className="flex items-center justify-between p-2 border-t border-white/20 bg-white/5 text-sm text-gray-600">
        <div>Ready</div>
        <div>Sheet 1 of 1</div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/apps/powerpoint.tsx" isFixed="true" isQuickEdit="true" isMerged="true"
"use client"

import { useState } from "react"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { X, Plus, Play, Square, Type, ImageIcon, BarChart3 } from "lucide-react"

interface Slide {
  id: number
  title: string
  content: string
  background: string
}

interface PowerPointProps {
  onClose: () => void
}

export function PowerPoint({ onClose }: PowerPointProps) {
  const [slides, setSlides] = useState<Slide[]>([
    {
      id: 1,
      title: "Welcome to Our Presentation",
      content: "This is the first slide of our amazing presentation about innovation and growth.",
      background: "bg-gradient-to-br from-blue-500 to-purple-600",
    },
    {
      id: 2,
      title: "Our Mission",
      content: "To create innovative solutions that transform the way people work and collaborate.",
      background: "bg-gradient-to-br from-green-500 to-teal-600",
    },
    {
      id: 3,
      title: "Key Features",
      content: "• Advanced Analytics\n• Real-time Collaboration\n• Cloud Integration\n• Mobile Support",
      background: "bg-gradient-to-br from-orange-500 to-red-600",
    },
  ])

const [currentSlide, setCurrentSlide] = useState(0)
  const [isPresenting, setIsPresenting] = useState(false)

const addSlide = () => {
    const newSlide: Slide = {
      id: slides.length + 1,
      title: "New Slide",
      content: "Click to add content",
      background: "bg-gradient-to-br from-indigo-500 to-purple-600",
    }
    setSlides([...slides, newSlide])
  }

const updateSlide = (field: "title" | "content", value: string) => {
    const updatedSlides = slides.map((slide, index) => (index === currentSlide ? { ...slide, [field]: value } : slide))
    setSlides(updatedSlides)
  }

const nextSlide = () => {
    if (currentSlide < slides.length - 1) {
      setCurrentSlide(currentSlide + 1)
    }
  }

const prevSlide = () => {
    if (currentSlide > 0) {
      setCurrentSlide(currentSlide - 1)
    }
  }

if (isPresenting) {
    return (
      <div className="h-full bg-black flex items-center justify-center relative">
        <div
          className={`w-full h-full flex flex-col items-center justify-center text-white p-12 ${slides[currentSlide]?.background}`}
        >
          <h1 className="text-6xl font-bold mb-8 text-center">{slides[currentSlide]?.title}</h1>
          <div className="text-2xl leading-relaxed text-center whitespace-pre-line max-w-4xl">
            {slides[currentSlide]?.content}
          </div>
        </div>

<div className="absolute bottom-4 left-1/2 transform -translate-x-1/2 flex items-center gap-4">
          <Button onClick={prevSlide} disabled={currentSlide === 0} variant="secondary">
            Previous
          </Button>
          <span className="text-white">
            {currentSlide + 1} / {slides.length}
          </span>
          <Button onClick={nextSlide} disabled={currentSlide === slides.length - 1} variant="secondary">
            Next
          </Button>
          <Button onClick={() => setIsPresenting(false)} variant="secondary">
            Exit
          </Button>
        </div>
      </div>
    )
  }

return (
    <div className="h-full bg-white/20 backdrop-blur-xl border border-white/30 rounded-xl overflow-hidden flex">
      {/* Slide Thumbnails */}
      <div className="w-64 border-r border-white/20 bg-white/10 overflow-y-auto">
        <div className="p-3 border-b border-white/20">
          <Button onClick={addSlide} size="sm" className="w-full bg-blue-500 hover:bg-blue-600 text-white">
            <Plus className="h-4 w-4 mr-1" />
            New Slide
          </Button>
        </div>

<div className="p-2 space-y-2">
          {slides.map((slide, index) => (
            <div
              key={slide.id}
              onClick={() => setCurrentSlide(index)}
              className={`p-3 rounded-lg cursor-pointer transition-all ${
                currentSlide === index ? "bg-blue-200/50 ring-2 ring-blue-400" : "bg-white/20 hover:bg-white/30"
              }`}
            >
              <div className={`w-full h-20 rounded mb-2 ${slide.background} flex items-center justify-center`}>
                <div className="text-white text-xs font-medium text-center px-2">{slide.title}</div>
              </div>
              <div className="text-xs text-gray-600 text-center">Slide {index + 1}</div>
            </div>
          ))}
        </div>
      </div>

{/* Main Content */}
      <div className="flex-1 flex flex-col">
        {/* Header */}
        <div className="flex items-center justify-between p-3 border-b border-white/20 bg-white/10">
          <div className="flex items-center gap-3">
            <div className="text-2xl">📽️</div>
            <h1 className="text-lg font-semibold text-gray-800">Microsoft PowerPoint</h1>
          </div>
          <Button variant="ghost" size="sm" onClick={onClose} className="hover:bg-white/20">
            <X className="h-4 w-4" />
          </Button>
        </div>

{/* Toolbar */}
        <div className="flex items-center gap-2 p-2 border-b border-white/20 bg-white/5">
          <Button
            onClick={() => setIsPresenting(true)}
            size="sm"
            className="bg-green-500 hover:bg-green-600 text-white"
          >
            <Play className="h-4 w-4 mr-1" />
            Present
          </Button>
          <Button size="sm" variant="ghost" className="hover:bg-white/20">
            <Type className="h-4 w-4 mr-1" />
            Text
          </Button>
          <Button size="sm" variant="ghost" className="hover:bg-white/20">
            <ImageIcon className="h-4 w-4 mr-1" />
            Image
          </Button>
          <Button size="sm" variant="ghost" className="hover:bg-white/20">
            <BarChart3 className="h-4 w-4 mr-1" />
            Chart
          </Button>
          <Button size="sm" variant="ghost" className="hover:bg-white/20">
            <Square className="h-4 w-4 mr-1" />
            Shape
          </Button>
        </div>

{/* Slide Editor */}
        <div className="flex-1 p-6 overflow-auto">
          <div className="max-w-4xl mx-auto">
            <div
              className={`w-full aspect-video rounded-lg ${slides[currentSlide]?.background} p-8 flex flex-col justify-center text-white mb-6`}
            >
              <Input
                value={slides[currentSlide]?.title || ""}
                onChange={(e) => updateSlide("title", e.target.value)}
                className="text-4xl font-bold bg-transparent border-none text-white placeholder:text-white/70 mb-4"
                placeholder="Click to add title"
              />
              <textarea
                value={slides[currentSlide]?.content || ""}
                onChange={(e) => updateSlide("content", e.target.value)}
                className="text-xl bg-transparent border-none text-white placeholder:text-white/70 resize-none outline-none"
                placeholder="Click to add content"
                rows={6}
              />
            </div>

<div className="flex items-center justify-between text-sm text-gray-600">
              <div>
                Slide {currentSlide + 1} of {slides.length}
              </div>
              <div className="flex gap-2">
                <Button onClick={prevSlide} disabled={currentSlide === 0} size="sm" variant="ghost">
                  Previous
                </Button>
                <Button onClick={nextSlide} disabled={currentSlide === slides.length - 1} size="sm" variant="ghost">
                  Next
                </Button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/apps/word.tsx" isMerged="true"
"use client"

import { useState } from "react"
import { Button } from "@/components/ui/button"
import { X, Save, FileText, Bold, Italic, Underline, AlignLeft, AlignCenter, AlignRight, List } from "lucide-react"

interface WordProps {
  onClose: () => void
}

export function Word({ onClose }: WordProps) {
  const [content, setContent] = useState(`Welcome to Microsoft Word

This is a sample document to demonstrate the word processing capabilities of our macOS Tahoe system.

Key Features:
• Rich text formatting
• Document templates
• Collaboration tools
• Cloud synchronization

You can edit this document by clicking anywhere in the text area. The toolbar above provides various formatting options to enhance your document.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.`)

const [wordCount, setWordCount] = useState(content.split(" ").length)
  const [formatting, setFormatting] = useState({
    bold: false,
    italic: false,
    underline: false,
    align: "left",
  })

const handleContentChange = (value: string) => {
    setContent(value)
    setWordCount(value.split(" ").filter((word) => word.length > 0).length)
  }

const toggleFormat = (format: keyof typeof formatting) => {
    setFormatting((prev) => ({
      ...prev,
      [format]: !prev[format],
    }))
  }

const setAlignment = (align: string) => {
    setFormatting((prev) => ({
      ...prev,
      align,
    }))
  }

return (
    <div className="h-full bg-white/20 backdrop-blur-xl border border-white/30 rounded-xl overflow-hidden flex flex-col">
      {/* Header */}
      <div className="flex items-center justify-between p-3 border-b border-white/20 bg-white/10">
        <div className="flex items-center gap-3">
          <div className="text-2xl">📝</div>
          <h1 className="text-lg font-semibold text-gray-800">Microsoft Word</h1>
        </div>
        <Button variant="ghost" size="sm" onClick={onClose} className="hover:bg-white/20">
          <X className="h-4 w-4" />
        </Button>
      </div>

{/* Toolbar */}
      <div className="flex items-center gap-1 p-2 border-b border-white/20 bg-white/5 flex-wrap">
        <Button size="sm" variant="ghost" className="hover:bg-white/20">
          <Save className="h-4 w-4 mr-1" />
          Save
        </Button>
        <Button size="sm" variant="ghost" className="hover:bg-white/20">
          <FileText className="h-4 w-4 mr-1" />
          New
        </Button>

<Button
          size="sm"
          variant={formatting.bold ? "default" : "ghost"}
          onClick={() => toggleFormat("bold")}
          className={formatting.bold ? "bg-blue-500 text-white" : "hover:bg-white/20"}
        >
          <Bold className="h-4 w-4" />
        </Button>
        <Button
          size="sm"
          variant={formatting.italic ? "default" : "ghost"}
          onClick={() => toggleFormat("italic")}
          className={formatting.italic ? "bg-blue-500 text-white" : "hover:bg-white/20"}
        >
          <Italic className="h-4 w-4" />
        </Button>
        <Button
          size="sm"
          variant={formatting.underline ? "default" : "ghost"}
          onClick={() => toggleFormat("underline")}
          className={formatting.underline ? "bg-blue-500 text-white" : "hover:bg-white/20"}
        >
          <Underline className="h-4 w-4" />
        </Button>

<Button
          size="sm"
          variant={formatting.align === "left" ? "default" : "ghost"}
          onClick={() => setAlignment("left")}
          className={formatting.align === "left" ? "bg-blue-500 text-white" : "hover:bg-white/20"}
        >
          <AlignLeft className="h-4 w-4" />
        </Button>
        <Button
          size="sm"
          variant={formatting.align === "center" ? "default" : "ghost"}
          onClick={() => setAlignment("center")}
          className={formatting.align === "center" ? "bg-blue-500 text-white" : "hover:bg-white/20"}
        >
          <AlignCenter className="h-4 w-4" />
        </Button>
        <Button
          size="sm"
          variant={formatting.align === "right" ? "default" : "ghost"}
          onClick={() => setAlignment("right")}
          className={formatting.align === "right" ? "bg-blue-500 text-white" : "hover:bg-white/20"}
        >
          <AlignRight className="h-4 w-4" />
        </Button>

{/* Document Area */}
      <div className="flex-1 p-6 overflow-auto">
        <div className="max-w-4xl mx-auto bg-white rounded-lg shadow-lg min-h-full">
          <div className="p-12">
            <textarea
              value={content}
              onChange={(e) => handleContentChange(e.target.value)}
              className={`w-full h-full min-h-96 resize-none border-none outline-none text-gray-800 leading-relaxed ${
                formatting.bold ? "font-bold" : ""
              } ${formatting.italic ? "italic" : ""} ${formatting.underline ? "underline" : ""} ${
                formatting.align === "center"
                  ? "text-center"
                  : formatting.align === "right"
                    ? "text-right"
                    : "text-left"
              }`}
              style={{ fontSize: "16px", lineHeight: "1.6" }}
              placeholder="Start typing your document..."
            />
          </div>
        </div>
      </div>

{/* Status Bar */}
      <div className="flex items-center justify-between p-2 border-t border-white/20 bg-white/5 text-sm text-gray-600">
        <div>Page 1 of 1</div>
        <div>{wordCount} words</div>
        <div>English (US)</div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/apps/photoshop.tsx" isMerged="true"
"use client"

import type React from "react"

import { useState, useRef } from "react"
import { Button } from "@/components/ui/button"
import { Slider } from "@/components/ui/slider"
import { X, Brush, Eraser, Type, Square, Circle, Palette, Layers, Eye, EyeOff } from "lucide-react"

interface Layer {
  id: number
  name: string
  visible: boolean
  opacity: number
}

interface PhotoshopProps {
  onClose: () => void
}

export function Photoshop({ onClose }: PhotoshopProps) {
  const canvasRef = useRef<HTMLCanvasElement>(null)
  const [selectedTool, setSelectedTool] = useState("brush")
  const [brushSize, setBrushSize] = useState([10])
  const [selectedColor, setSelectedColor] = useState("#000000")
  const [layers, setLayers] = useState<Layer[]>([
    { id: 1, name: "Background", visible: true, opacity: 100 },
    { id: 2, name: "Layer 1", visible: true, opacity: 100 },
  ])
  const [isDrawing, setIsDrawing] = useState(false)

const tools = [
    { id: "brush", icon: Brush, name: "Brush" },
    { id: "eraser", icon: Eraser, name: "Eraser" },
    { id: "text", icon: Type, name: "Text" },
    { id: "rectangle", icon: Square, name: "Rectangle" },
    { id: "circle", icon: Circle, name: "Circle" },
  ]

const colors = [
    "#000000",
    "#FFFFFF",
    "#FF0000",
    "#00FF00",
    "#0000FF",
    "#FFFF00",
    "#FF00FF",
    "#00FFFF",
    "#FFA500",
    "#800080",
  ]

const toggleLayerVisibility = (layerId: number) => {
    setLayers(layers.map((layer) => (layer.id === layerId ? { ...layer, visible: !layer.visible } : layer)))
  }

const updateLayerOpacity = (layerId: number, opacity: number) => {
    setLayers(layers.map((layer) => (layer.id === layerId ? { ...layer, opacity } : layer)))
  }

const startDrawing = (e: React.MouseEvent<HTMLCanvasElement>) => {
    setIsDrawing(true)
    const canvas = canvasRef.current
    if (!canvas) return

const ctx = canvas.getContext("2d")
    if (!ctx) return

const rect = canvas.getBoundingClientRect()
    const x = e.clientX - rect.left
    const y = e.clientY - rect.top

ctx.beginPath()
    ctx.moveTo(x, y)
  }

const draw = (e: React.MouseEvent<HTMLCanvasElement>) => {
    if (!isDrawing) return

const canvas = canvasRef.current
    if (!canvas) return

const ctx = canvas.getContext("2d")
    if (!ctx) return

const rect = canvas.getBoundingClientRect()
    const x = e.clientX - rect.left
    const y = e.clientY - rect.top

ctx.lineWidth = brushSize[0]
    ctx.lineCap = "round"
    ctx.strokeStyle = selectedTool === "eraser" ? "#FFFFFF" : selectedColor

ctx.lineTo(x, y)
    ctx.stroke()
    ctx.beginPath()
    ctx.moveTo(x, y)
  }

const stopDrawing = () => {
    setIsDrawing(false)
  }

return (
    <div className="h-full bg-gray-900 text-white flex">
      {/* Tools Panel */}
      <div className="w-16 bg-gray-800 border-r border-gray-700 flex flex-col items-center py-4 gap-2">
        {tools.map((tool) => {
          const Icon = tool.icon
          return (
            <Button
              key={tool.id}
              variant={selectedTool === tool.id ? "default" : "ghost"}
              size="sm"
              onClick={() => setSelectedTool(tool.id)}
              className={`w-12 h-12 p-0 ${
                selectedTool === tool.id ? "bg-blue-600 hover:bg-blue-700" : "hover:bg-gray-700"
              }`}
              title={tool.name}
            >
              <Icon className="h-5 w-5" />
            </Button>
          )
        })}
      </div>

{/* Main Canvas Area */}
      <div className="flex-1 flex flex-col">
        {/* Header */}
        <div className="flex items-center justify-between p-3 bg-gray-800 border-b border-gray-700">
          <div className="flex items-center gap-3">
            <div className="text-2xl">🎨</div>
            <h1 className="text-lg font-semibold">Adobe Photoshop</h1>
          </div>
          <Button variant="ghost" size="sm" onClick={onClose} className="hover:bg-gray-700">
            <X className="h-4 w-4" />
          </Button>
        </div>

{/* Toolbar */}
        <div className="flex items-center gap-4 p-3 bg-gray-800 border-b border-gray-700">
          <div className="flex items-center gap-2">
            <span className="text-sm">Brush Size:</span>
            <Slider value={brushSize} onValueChange={setBrushSize} max={50} min={1} step={1} className="w-24" />
            <span className="text-sm w-8">{brushSize[0]}</span>
          </div>

<div className="flex items-center gap-2">
            <Palette className="h-4 w-4" />
            <div className="flex gap-1">
              {colors.map((color) => (
                <button
                  key={color}
                  onClick={() => setSelectedColor(color)}
                  className={`w-6 h-6 rounded border-2 ${selectedColor === color ? "border-white" : "border-gray-600"}`}
                  style={{ backgroundColor: color }}
                />
              ))}
            </div>
          </div>
        </div>

{/* Canvas */}
        <div className="flex-1 bg-gray-700 p-4 overflow-auto">
          <div className="bg-white rounded-lg shadow-lg inline-block">
            <canvas
              ref={canvasRef}
              width={800}
              height={600}
              className="border border-gray-300 cursor-crosshair"
              onMouseDown={startDrawing}
              onMouseMove={draw}
              onMouseUp={stopDrawing}
              onMouseLeave={stopDrawing}
            />
          </div>
        </div>
      </div>

{/* Layers Panel */}
      <div className="w-64 bg-gray-800 border-l border-gray-700">
        <div className="p-3 border-b border-gray-700">
          <h3 className="font-semibold flex items-center gap-2">
            <Layers className="h-4 w-4" />
            Layers
          </h3>
        </div>

<div className="p-2 space-y-1">
          {layers.map((layer) => (
            <div key={layer.id} className="bg-gray-700 rounded p-2">
              <div className="flex items-center justify-between mb-2">
                <span className="text-sm font-medium">{layer.name}</span>
                <Button
                  variant="ghost"
                  size="sm"
                  onClick={() => toggleLayerVisibility(layer.id)}
                  className="w-6 h-6 p-0 hover:bg-gray-600"
                >
                  {layer.visible ? <Eye className="h-3 w-3" /> : <EyeOff className="h-3 w-3" />}
                </Button>
              </div>

<div className="flex items-center gap-2">
                <span className="text-xs">Opacity:</span>
                <Slider
                  value={[layer.opacity]}
                  onValueChange={(value) => updateLayerOpacity(layer.id, value[0])}
                  max={100}
                  min={0}
                  step={1}
                  className="flex-1"
                />
                <span className="text-xs w-8">{layer.opacity}%</span>
              </div>
            </div>
          ))}
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/apps/illustrator.tsx" isMerged="true"
"use client"

import { useState } from "react"
import { Button } from "@/components/ui/button"
import { Slider } from "@/components/ui/slider"
import { X, MousePointer, Square, Circle, Triangle, Type, Palette, RotateCcw, RotateCw } from "lucide-react"

interface Shape {
  id: number
  type: string
  x: number
  y: number
  width: number
  height: number
  fill: string
  stroke: string
  rotation: number
}

interface IllustratorProps {
  onClose: () => void
}

export function Illustrator({ onClose }: IllustratorProps) {
  const [selectedTool, setSelectedTool] = useState("select")
  const [shapes, setShapes] = useState<Shape[]>([
    {
      id: 1,
      type: "rectangle",
      x: 100,
      y: 100,
      width: 150,
      height: 100,
      fill: "#3B82F6",
      stroke: "#1E40AF",
      rotation: 0,
    },
    {
      id: 2,
      type: "circle",
      x: 300,
      y: 150,
      width: 120,
      height: 120,
      fill: "#EF4444",
      stroke: "#DC2626",
      rotation: 0,
    },
  ])
  const [selectedShape, setSelectedShape] = useState<number | null>(null)
  const [fillColor, setFillColor] = useState("#3B82F6")
  const [strokeColor, setStrokeColor] = useState("#1E40AF")

const tools = [
    { id: "select", icon: MousePointer, name: "Selection" },
    { id: "rectangle", icon: Square, name: "Rectangle" },
    { id: "circle", icon: Circle, name: "Circle" },
    { id: "triangle", icon: Triangle, name: "Triangle" },
    { id: "text", icon: Type, name: "Text" },
  ]

const colors = [
    "#3B82F6",
    "#EF4444",
    "#10B981",
    "#F59E0B",
    "#8B5CF6",
    "#EC4899",
    "#06B6D4",
    "#84CC16",
    "#F97316",
    "#6B7280",
  ]

const addShape = (type: string) => {
    const newShape: Shape = {
      id: Date.now(),
      type,
      x: Math.random() * 400 + 50,
      y: Math.random() * 300 + 50,
      width: type === "circle" ? 100 : 120,
      height: 100,
      fill: fillColor,
      stroke: strokeColor,
      rotation: 0,
    }
    setShapes([...shapes, newShape])
  }

const updateShape = (id: number, updates: Partial<Shape>) => {
    setShapes(shapes.map((shape) => (shape.id === id ? { ...shape, ...updates } : shape)))
  }

const deleteShape = (id: number) => {
    setShapes(shapes.filter((shape) => shape.id !== id))
    setSelectedShape(null)
  }

const renderShape = (shape: Shape) => {
    const commonProps = {
      key: shape.id,
      onClick: () => setSelectedShape(shape.id),
      className: `cursor-pointer ${selectedShape === shape.id ? "ring-2 ring-blue-400" : ""}`,
      style: {
        transform: `rotate(${shape.rotation}deg)`,
        transformOrigin: "center",
      },
    }

switch (shape.type) {
      case "rectangle":
        return (
          <rect
            {...commonProps}
            x={shape.x}
            y={shape.y}
            width={shape.width}
            height={shape.height}
            fill={shape.fill}
            stroke={shape.stroke}
            strokeWidth="2"
          />
        )
      case "circle":
        return (
          <circle
            {...commonProps}
            cx={shape.x + shape.width / 2}
            cy={shape.y + shape.height / 2}
            r={shape.width / 2}
            fill={shape.fill}
            stroke={shape.stroke}
            strokeWidth="2"
          />
        )
      case "triangle":
        const points = `${shape.x + shape.width / 2},${shape.y} ${shape.x},${shape.y + shape.height} ${shape.x + shape.width},${shape.y + shape.height}`
        return <polygon {...commonProps} points={points} fill={shape.fill} stroke={shape.stroke} strokeWidth="2" />
      default:
        return null
    }
  }

const selectedShapeData = shapes.find((s) => s.id === selectedShape)

return (
    <div className="h-full bg-gray-900 text-white flex">
      {/* Tools Panel */}
      <div className="w-16 bg-gray-800 border-r border-gray-700 flex flex-col items-center py-4 gap-2">
        {tools.map((tool) => {
          const Icon = tool.icon
          return (
            <Button
              key={tool.id}
              variant={selectedTool === tool.id ? "default" : "ghost"}
              size="sm"
              onClick={() => {
                setSelectedTool(tool.id)
                if (tool.id !== "select" && tool.id !== "text") {
                  addShape(tool.id)
                }
              }}
              className={`w-12 h-12 p-0 ${
                selectedTool === tool.id ? "bg-blue-600 hover:bg-blue-700" : "hover:bg-gray-700"
              }`}
              title={tool.name}
            >
              <Icon className="h-5 w-5" />
            </Button>
          )
        })}
      </div>

{/* Main Canvas Area */}
      <div className="flex-1 flex flex-col">
        {/* Header */}
        <div className="flex items-center justify-between p-3 bg-gray-800 border-b border-gray-700">
          <div className="flex items-center gap-3">
            <div className="text-2xl">✏️</div>
            <h1 className="text-lg font-semibold">Adobe Illustrator</h1>
          </div>
          <Button variant="ghost" size="sm" onClick={onClose} className="hover:bg-gray-700">
            <X className="h-4 w-4" />
          </Button>
        </div>

{/* Toolbar */}
        <div className="flex items-center gap-4 p-3 bg-gray-800 border-b border-gray-700">
          <div className="flex items-center gap-2">
            <Palette className="h-4 w-4" />
            <span className="text-sm">Fill:</span>
            <div className="flex gap-1">
              {colors.slice(0, 5).map((color) => (
                <button
                  key={color}
                  onClick={() => setFillColor(color)}
                  className={`w-6 h-6 rounded border-2 ${fillColor === color ? "border-white" : "border-gray-600"}`}
                  style={{ backgroundColor: color }}
                />
              ))}
            </div>
          </div>

<div className="flex items-center gap-2">
            <span className="text-sm">Stroke:</span>
            <div className="flex gap-1">
              {colors.slice(5).map((color) => (
                <button
                  key={color}
                  onClick={() => setStrokeColor(color)}
                  className={`w-6 h-6 rounded border-2 ${strokeColor === color ? "border-white" : "border-gray-600"}`}
                  style={{ backgroundColor: color }}
                />
              ))}
            </div>
          </div>

{selectedShape && (
            <div className="flex items-center gap-2 ml-auto">
              <Button
                size="sm"
                variant="ghost"
                onClick={() =>
                  selectedShapeData && updateShape(selectedShape, { rotation: selectedShapeData.rotation - 15 })
                }
                className="hover:bg-gray-700"
              >
                <RotateCcw className="h-4 w-4" />
              </Button>
              <Button
                size="sm"
                variant="ghost"
                onClick={() =>
                  selectedShapeData && updateShape(selectedShape, { rotation: selectedShapeData.rotation + 15 })
                }
                className="hover:bg-gray-700"
              >
                <RotateCw className="h-4 w-4" />
              </Button>
              <Button size="sm" variant="destructive" onClick={() => selectedShape && deleteShape(selectedShape)}>
                Delete
              </Button>
            </div>
          )}
        </div>

{/* Canvas */}
        <div className="flex-1 bg-gray-700 p-4 overflow-auto">
          <div className="bg-white rounded-lg shadow-lg inline-block">
            <svg width="800" height="600" className="border border-gray-300">
              <defs>
                <pattern id="grid" width="20" height="20" patternUnits="userSpaceOnUse">
                  <path d="M 20 0 L 0 0 0 20" fill="none" stroke="#f0f0f0" strokeWidth="1" />
                </pattern>
              </defs>
              <rect width="100%" height="100%" fill="url(#grid)" />
              {shapes.map(renderShape)}
            </svg>
          </div>
        </div>
      </div>

{/* Properties Panel */}
      <div className="w-64 bg-gray-800 border-l border-gray-700">
        <div className="p-3 border-b border-gray-700">
          <h3 className="font-semibold">Properties</h3>
        </div>

{selectedShapeData ? (
          <div className="p-3 space-y-4">
            <div>
              <label className="text-sm font-medium">Width</label>
              <Slider
                value={[selectedShapeData.width]}
                onValueChange={(value) => updateShape(selectedShape!, { width: value[0] })}
                max={300}
                min={10}
                step={1}
                className="mt-1"
              />
              <span className="text-xs text-gray-400">{selectedShapeData.width}px</span>
            </div>

<div>
              <label className="text-sm font-medium">Height</label>
              <Slider
                value={[selectedShapeData.height]}
                onValueChange={(value) => updateShape(selectedShape!, { height: value[0] })}
                max={300}
                min={10}
                step={1}
                className="mt-1"
              />
              <span className="text-xs text-gray-400">{selectedShapeData.height}px</span>
            </div>

<div>
              <label className="text-sm font-medium">Rotation</label>
              <Slider
                value={[selectedShapeData.rotation]}
                onValueChange={(value) => updateShape(selectedShape!, { rotation: value[0] })}
                max={360}
                min={0}
                step={15}
                className="mt-1"
              />
              <span className="text-xs text-gray-400">{selectedShapeData.rotation}°</span>
            </div>

<div>
              <label className="text-sm font-medium">Fill Color</label>
              <input
                type="color"
                value={selectedShapeData.fill}
                onChange={(e) => updateShape(selectedShape!, { fill: e.target.value })}
                className="w-full h-8 rounded border border-gray-600 bg-gray-700 mt-1"
              />
            </div>

<div>
              <label className="text-sm font-medium">Stroke Color</label>
              <input
                type="color"
                value={selectedShapeData.stroke}
                onChange={(e) => updateShape(selectedShape!, { stroke: e.target.value })}
                className="w-full h-8 rounded border border-gray-600 bg-gray-700 mt-1"
              />
            </div>
          </div>
        ) : (
          <div className="p-3 text-gray-400 text-sm">Select a shape to edit properties</div>
        )}
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/apps/premiere.tsx" isMerged="true"
"use client"

import { useState } from "react"
import { Button } from "@/components/ui/button"
import { Slider } from "@/components/ui/slider"
import { X, Play, Pause, Square, SkipBack, SkipForward, Volume2, Scissors, Copy } from "lucide-react"

interface VideoClip {
  id: number
  name: string
  duration: number
  startTime: number
  track: number
  color: string
}

interface PremiereProps {
  onClose: () => void
}

export function Premiere({ onClose }: PremiereProps) {
  const [isPlaying, setIsPlaying] = useState(false)
  const [currentTime, setCurrentTime] = useState([0])
  const [volume, setVolume] = useState([75])
  const [selectedClip, setSelectedClip] = useState<number | null>(null)

const [clips, setClips] = useState<VideoClip[]>([
    { id: 1, name: "Intro.mp4", duration: 5, startTime: 0, track: 1, color: "#3B82F6" },
    { id: 2, name: "Main_Scene.mp4", duration: 15, startTime: 5, track: 1, color: "#10B981" },
    { id: 3, name: "Outro.mp4", duration: 3, startTime: 20, track: 1, color: "#F59E0B" },
    { id: 4, name: "Background_Music.mp3", duration: 23, startTime: 0, track: 2, color: "#8B5CF6" },
  ])

const totalDuration = Math.max(...clips.map((clip) => clip.startTime + clip.duration))
  const timelineScale = 800 / totalDuration // pixels per second

const togglePlayback = () => {
    setIsPlaying(!isPlaying)
  }

const formatTime = (seconds: number) => {
    const mins = Math.floor(seconds / 60)
    const secs = Math.floor(seconds % 60)
    return `${mins.toString().padStart(2, "0")}:${secs.toString().padStart(2, "0")}`
  }

const handleClipClick = (clipId: number) => {
    setSelectedClip(clipId === selectedClip ? null : clipId)
  }

const duplicateClip = (clipId: number) => {
    const clip = clips.find((c) => c.id === clipId)
    if (!clip) return

const newClip: VideoClip = {
      ...clip,
      id: Date.now(),
      name: `${clip.name} (Copy)`,
      startTime: clip.startTime + clip.duration,
    }
    setClips([...clips, newClip])
  }

const deleteClip = (clipId: number) => {
    setClips(clips.filter((c) => c.id !== clipId))
    setSelectedClip(null)
  }

return (
    <div className="h-full bg-gray-900 text-white flex flex-col">
      {/* Header */}
      <div className="flex items-center justify-between p-3 bg-gray-800 border-b border-gray-700">
        <div className="flex items-center gap-3">
          <div className="text-2xl">🎬</div>
          <h1 className="text-lg font-semibold">Adobe Premiere Pro</h1>
        </div>
        <Button variant="ghost" size="sm" onClick={onClose} className="hover:bg-gray-700">
          <X className="h-4 w-4" />
        </Button>
      </div>

<div className="flex flex-1">
        {/* Media Panel */}
        <div className="w-64 bg-gray-800 border-r border-gray-700">
          <div className="p-3 border-b border-gray-700">
            <h3 className="font-semibold">Project Media</h3>
          </div>

<div className="p-2 space-y-2">
            {clips.map((clip) => (
              <div
                key={clip.id}
                className={`p-2 rounded cursor-pointer transition-colors ${
                  selectedClip === clip.id ? "bg-blue-600" : "bg-gray-700 hover:bg-gray-600"
                }`}
                onClick={() => handleClipClick(clip.id)}
              >
                <div className="text-sm font-medium">{clip.name}</div>
                <div className="text-xs text-gray-400">{formatTime(clip.duration)}</div>
              </div>
            ))}
          </div>
        </div>

{/* Main Content */}
        <div className="flex-1 flex flex-col">
          {/* Preview Monitor */}
          <div className="flex-1 bg-black flex items-center justify-center">
            <div className="w-96 h-56 bg-gray-800 rounded-lg flex items-center justify-center border-2 border-gray-600">
              <div className="text-center">
                <div className="text-4xl mb-2">📹</div>
                <div className="text-gray-400">Video Preview</div>
                <div className="text-sm text-gray-500 mt-1">
                  {formatTime(currentTime[0])} / {formatTime(totalDuration)}
                </div>
              </div>
            </div>
          </div>

{/* Transport Controls */}
          <div className="flex items-center justify-center gap-4 p-4 bg-gray-800 border-t border-gray-700">
            <Button variant="ghost" size="sm" className="hover:bg-gray-700">
              <SkipBack className="h-5 w-5" />
            </Button>

<Button onClick={togglePlayback} size="sm" className="bg-blue-600 hover:bg-blue-700 w-12 h-12 rounded-full">
              {isPlaying ? <Pause className="h-6 w-6" /> : <Play className="h-6 w-6" />}
            </Button>

<div className="flex items-center gap-2 ml-8">
              <Volume2 className="h-4 w-4" />
              <Slider value={volume} onValueChange={setVolume} max={100} min={0} step={1} className="w-24" />
              <span className="text-sm w-8">{volume[0]}%</span>
            </div>
          </div>

{/* Timeline */}
          <div className="h-64 bg-gray-800 border-t border-gray-700 overflow-x-auto">
            <div className="p-4">
              <div className="flex items-center justify-between mb-4">
                <h3 className="font-semibold">Timeline</h3>
                <div className="flex gap-2">
                  {selectedClip && (
                    <>
                      <Button
                        size="sm"
                        variant="ghost"
                        onClick={() => duplicateClip(selectedClip)}
                        className="hover:bg-gray-700"
                      >
                        <Copy className="h-4 w-4" />
                      </Button>
                      <Button size="sm" variant="ghost" className="hover:bg-gray-700">
                        <Scissors className="h-4 w-4" />
                      </Button>
                      <Button size="sm" variant="destructive" onClick={() => selectedClip && deleteClip(selectedClip)}>
                        Delete
                      </Button>
                    </>
                  )}
                </div>
              </div>

{/* Timeline Ruler */}
              <div className="relative mb-2">
                <div className="h-6 bg-gray-700 rounded flex items-center px-2">
                  {Array.from({ length: Math.ceil(totalDuration) + 1 }, (_, i) => (
                    <div key={i} className="absolute text-xs text-gray-400" style={{ left: `${i * timelineScale}px` }}>
                      {formatTime(i)}
                    </div>
                  ))}
                </div>
              </div>

{/* Video Track */}
              <div className="mb-2">
                <div className="text-sm text-gray-400 mb-1">Video 1</div>
                <div className="h-12 bg-gray-700 rounded relative">
                  {clips
                    .filter((clip) => clip.track === 1)
                    .map((clip) => (
                      <div
                        key={clip.id}
                        className={`absolute h-10 rounded cursor-pointer border-2 flex items-center px-2 ${
                          selectedClip === clip.id ? "border-white" : "border-transparent"
                        }`}
                        style={{
                          left: `${clip.startTime * timelineScale}px`,
                          width: `${clip.duration * timelineScale}px`,
                          backgroundColor: clip.color,
                          top: "4px",
                        }}
                        onClick={() => handleClipClick(clip.id)}
                      >
                        <span className="text-xs text-white font-medium truncate">{clip.name}</span>
                      </div>
                    ))}
                </div>
              </div>

{/* Audio Track */}
              <div>
                <div className="text-sm text-gray-400 mb-1">Audio 1</div>
                <div className="h-12 bg-gray-700 rounded relative">
                  {clips
                    .filter((clip) => clip.track === 2)
                    .map((clip) => (
                      <div
                        key={clip.id}
                        className={`absolute h-10 rounded cursor-pointer border-2 flex items-center px-2 ${
                          selectedClip === clip.id ? "border-white" : "border-transparent"
                        }`}
                        style={{
                          left: `${clip.startTime * timelineScale}px`,
                          width: `${clip.duration * timelineScale}px`,
                          backgroundColor: clip.color,
                          top: "4px",
                        }}
                        onClick={() => handleClipClick(clip.id)}
                      >
                        <span className="text-xs text-white font-medium truncate">{clip.name}</span>
                      </div>
                    ))}
                </div>
              </div>

{/* Playhead */}
              <div
                className="absolute top-0 bottom-0 w-0.5 bg-red-500 pointer-events-none"
                style={{ left: `${currentTime[0] * timelineScale + 16}px` }}
              />
            </div>
          </div>
        </div>

{/* Effects Panel */}
        <div className="w-64 bg-gray-800 border-l border-gray-700">
          <div className="p-3 border-b border-gray-700">
            <h3 className="font-semibold">Effects</h3>
          </div>

<div className="p-2 space-y-2">
            {["Blur", "Color Correction", "Transition", "Audio Fade", "Crop", "Scale"].map((effect) => (
              <div key={effect} className="p-2 bg-gray-700 rounded cursor-pointer hover:bg-gray-600 transition-colors">
                <div className="text-sm">{effect}</div>
              </div>
            ))}
          </div>
        </div>
      </div>

{/* Playback Timeline */}
      <div className="p-3 bg-gray-800 border-t border-gray-700">
        <Slider
          value={currentTime}
          onValueChange={setCurrentTime}
          max={totalDuration}
          min={0}
          step={0.1}
          className="w-full"
        />
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/apps/vscode.tsx" isMerged="true"
"use client"

import { useState } from "react"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { X, Search, FileText, Folder, Play, Bug, GitBranch, Settings } from "lucide-react"

interface File {
  id: string
  name: string
  type: "file" | "folder"
  content?: string
  children?: File[]
}

interface VSCodeProps {
  onClose: () => void
}

export function VSCode({ onClose }: VSCodeProps) {
  const [selectedFile, setSelectedFile] = useState<string | null>("app.tsx")
  const [searchQuery, setSearchQuery] = useState("")

const fileTree: File[] = [
    {
      id: "src",
      name: "src",
      type: "folder",
      children: [
        {
          id: "app.tsx",
          name: "App.tsx",
          type: "file",
          content: `import React from 'react';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import Header from './components/Header';
import Home from './pages/Home';
import About from './pages/About';

function App() {
  return (
    <Router>
      <div className="App">
        <Header />
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/about" element={<About />} />
        </Routes>
      </div>
    </Router>
  );
}

export default App;`,
        },
        {
          id: "components",
          name: "components",
          type: "folder",
          children: [
            {
              id: "header.tsx",
              name: "Header.tsx",
              type: "file",
              content: `import React from 'react';
import './Header.css';

const Header: React.FC = () => {
  return (
    <header className="header">
      <nav>
        <ul>
          <li><a href="/">Home</a></li>
          <li><a href="/about">About</a></li>
        </ul>
      </nav>
    </header>
  );
};

export default Header;`,
            },
          ],
        },
      ],
    },
    {
      id: "package.json",
      name: "package.json",
      type: "file",
      content: `{
  "name": "my-react-app",
  "version": "1.0.0",
  "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-router-dom": "^6.8.0"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test"
  }
}`,
    },
  ]

const flattenFiles = (files: File[]): File[] => {
    const result: File[] = []
    files.forEach((file) => {
      result.push(file)
      if (file.children) {
        result.push(...flattenFiles(file.children))
      }
    })
    return result
  }

const allFiles = flattenFiles(fileTree)
  const currentFile = allFiles.find((f) => f.id === selectedFile)

const renderFileTree = (files: File[], depth = 0) => {
    return files.map((file) => (
      <div key={file.id}>
        <div
          className={`flex items-center gap-2 px-2 py-1 cursor-pointer hover:bg-gray-700 ${
            selectedFile === file.id ? "bg-blue-600" : ""
          }`}
          style={{ paddingLeft: `${depth * 16 + 8}px` }}
          onClick={() => file.type === "file" && setSelectedFile(file.id)}
        >
          {file.type === "folder" ? (
            <Folder className="h-4 w-4 text-blue-400" />
          ) : (
            <FileText className="h-4 w-4 text-gray-400" />
          )}
          <span className="text-sm">{file.name}</span>
        </div>
        {file.children && renderFileTree(file.children, depth + 1)}
      </div>
    ))
  }

return (
    <div className="h-full bg-gray-900 text-white flex flex-col">
      {/* Header */}
      <div className="flex items-center justify-between p-2 bg-gray-800 border-b border-gray-700">
        <div className="flex items-center gap-3">
          <div className="text-xl">💻</div>
          <h1 className="text-sm font-semibold">Visual Studio Code</h1>
        </div>
        <Button variant="ghost" size="sm" onClick={onClose} className="hover:bg-gray-700">
          <X className="h-4 w-4" />
        </Button>
      </div>

{/* Menu Bar */}
      <div className="flex items-center gap-4 px-3 py-1 bg-gray-800 border-b border-gray-700 text-sm">
        <span className="hover:bg-gray-700 px-2 py-1 rounded cursor-pointer">File</span>
        <span className="hover:bg-gray-700 px-2 py-1 rounded cursor-pointer">Edit</span>
        <span className="hover:bg-gray-700 px-2 py-1 rounded cursor-pointer">View</span>
        <span className="hover:bg-gray-700 px-2 py-1 rounded cursor-pointer">Go</span>
        <span className="hover:bg-gray-700 px-2 py-1 rounded cursor-pointer">Run</span>
        <span className="hover:bg-gray-700 px-2 py-1 rounded cursor-pointer">Terminal</span>
      </div>

<div className="flex flex-1">
        {/* Activity Bar */}
        <div className="w-12 bg-gray-800 border-r border-gray-700 flex flex-col items-center py-2 gap-3">
          <Button variant="ghost" size="sm" className="w-10 h-10 p-0 hover:bg-gray-700">
            <FileText className="h-5 w-5" />
          </Button>
          <Button variant="ghost" size="sm" className="w-10 h-10 p-0 hover:bg-gray-700">
            <Search className="h-5 w-5" />
          </Button>
          <Button variant="ghost" size="sm" className="w-10 h-10 p-0 hover:bg-gray-700">
            <GitBranch className="h-5 w-5" />
          </Button>
          <Button variant="ghost" size="sm" className="w-10 h-10 p-0 hover:bg-gray-700">
            <Play className="h-5 w-5" />
          </Button>
          <Button variant="ghost" size="sm" className="w-10 h-10 p-0 hover:bg-gray-700">
            <Bug className="h-5 w-5" />
          </Button>
          <Button variant="ghost" size="sm" className="w-10 h-10 p-0 hover:bg-gray-700 mt-auto">
            <Settings className="h-5 w-5" />
          </Button>
        </div>

{/* Sidebar */}
        <div className="w-64 bg-gray-800 border-r border-gray-700">
          <div className="p-3 border-b border-gray-700">
            <h3 className="text-sm font-semibold mb-2">EXPLORER</h3>
            <div className="relative">
              <Search className="absolute left-2 top-1/2 transform -translate-y-1/2 h-3 w-3 text-gray-400" />
              <Input
                placeholder="Search files..."
                value={searchQuery}
                onChange={(e) => setSearchQuery(e.target.value)}
                className="pl-7 h-7 text-xs bg-gray-700 border-gray-600"
              />
            </div>
          </div>

<div className="overflow-y-auto">{renderFileTree(fileTree)}</div>
        </div>

{/* Main Editor */}
        <div className="flex-1 flex flex-col">
          {/* Tab Bar */}
          <div className="flex bg-gray-800 border-b border-gray-700">
            {selectedFile && (
              <div className="flex items-center gap-2 px-3 py-2 bg-gray-700 border-r border-gray-600">
                <FileText className="h-3 w-3" />
                <span className="text-sm">{currentFile?.name}</span>
                <Button variant="ghost" size="sm" className="w-4 h-4 p-0 hover:bg-gray-600">
                  <X className="h-3 w-3" />
                </Button>
              </div>
            )}
          </div>

{/* Editor Content */}
          <div className="flex-1 p-4 bg-gray-900 overflow-auto">
            {currentFile ? (
              <pre className="text-sm font-mono leading-relaxed">
                <code className="text-gray-300">{currentFile.content}</code>
              </pre>
            ) : (
              <div className="flex items-center justify-center h-full text-gray-500">
                <div className="text-center">
                  <div className="text-6xl mb-4">💻</div>
                  <div className="text-lg">Welcome to VS Code</div>
                  <div className="text-sm">Select a file to start editing</div>
                </div>
              </div>
            )}
          </div>
        </div>
      </div>

{/* Status Bar */}
      <div className="flex items-center justify-between px-3 py-1 bg-blue-600 text-white text-xs">
        <div className="flex items-center gap-4">
          <span>main</span>
          <span>TypeScript React</span>
          <span>UTF-8</span>
        </div>
        <div className="flex items-center gap-4">
          <span>Ln 1, Col 1</span>
          <span>Spaces: 2</span>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/apps/terminal.tsx" isMerged="true"
"use client"

import type React from "react"

import { useState, useRef, useEffect } from "react"
import { Button } from "@/components/ui/button"
import { X, Minus, Square } from "lucide-react"

interface TerminalLine {
  id: number
  type: "command" | "output" | "error"
  content: string
  timestamp: Date
}

interface TerminalProps {
  onClose: () => void
}

export function Terminal({ onClose }: TerminalProps) {
  const [lines, setLines] = useState<TerminalLine[]>([
    {
      id: 1,
      type: "output",
      content: "Welcome to Terminal Pro - macOS Tahoe 26",
      timestamp: new Date(),
    },
    {
      id: 2,
      type: "output",
      content: "Type 'help' for available commands",
      timestamp: new Date(),
    },
  ])
  const [currentCommand, setCurrentCommand] = useState("")
  const [commandHistory, setCommandHistory] = useState<string[]>([])
  const [historyIndex, setHistoryIndex] = useState(-1)
  const inputRef = useRef<HTMLInputElement>(null)
  const terminalRef = useRef<HTMLDivElement>(null)

const commands = {
    help: () => [
      "Available commands:",
      "  ls          - List directory contents",
      "  pwd         - Print working directory",
      "  cd          - Change directory",
      "  mkdir       - Create directory",
      "  touch       - Create file",
      "  cat         - Display file contents",
      "  echo        - Display text",
      "  date        - Show current date and time",
      "  whoami      - Show current user",
      "  clear       - Clear terminal",
      "  help        - Show this help message",
    ],
    ls: () => ["Documents", "Downloads", "Desktop", "Pictures", "Music", "Videos", "Applications"],
    pwd: () => ["/Users/user"],
    date: () => [new Date().toString()],
    whoami: () => ["user"],
    clear: () => [],
    echo: (args: string[]) => [args.join(" ")],
    cat: (args: string[]) => {
      const filename = args[0]
      if (!filename) return ["cat: missing file operand"]
      return [
        `Contents of ${filename}:`,
        "This is a sample file content.",
        "You can view file contents using the cat command.",
      ]
    },
    mkdir: (args: string[]) => {
      const dirname = args[0]
      if (!dirname) return ["mkdir: missing operand"]
      return [`Directory '${dirname}' created`]
    },
    touch: (args: string[]) => {
      const filename = args[0]
      if (!filename) return ["touch: missing file operand"]
      return [`File '${filename}' created`]
    },
    cd: (args: string[]) => {
      const dirname = args[0] || "~"
      return [`Changed directory to ${dirname}`]
    },
  }

const executeCommand = (command: string) => {
    const trimmedCommand = command.trim()
    if (!trimmedCommand) return

// Add command to history
    setCommandHistory((prev) => [...prev, trimmedCommand])
    setHistoryIndex(-1)

// Add command line
    const commandLine: TerminalLine = {
      id: Date.now(),
      type: "command",
      content: `$ ${trimmedCommand}`,
      timestamp: new Date(),
    }

const [cmd, ...args] = trimmedCommand.split(" ")

if (cmd === "clear") {
      setLines([])
      return
    }

let output: string[] = []
    if (cmd in commands) {
      const commandFunc = commands[cmd as keyof typeof commands]
      if (typeof commandFunc === "function") {
        output = commandFunc(args)
      }
    } else {
      output = [`Command not found: ${cmd}. Type 'help' for available commands.`]
    }

const outputLines: TerminalLine[] = output.map((line, index) => ({
      id: Date.now() + index + 1,
      type: cmd in commands ? "output" : "error",
      content: line,
      timestamp: new Date(),
    }))

setLines((prev) => [...prev, commandLine, ...outputLines])
  }

const handleKeyDown = (e: React.KeyboardEvent) => {
    if (e.key === "Enter") {
      executeCommand(currentCommand)
      setCurrentCommand("")
    } else if (e.key === "ArrowUp") {
      e.preventDefault()
      if (commandHistory.length > 0) {
        const newIndex = historyIndex === -1 ? commandHistory.length - 1 : Math.max(0, historyIndex - 1)
        setHistoryIndex(newIndex)
        setCurrentCommand(commandHistory[newIndex])
      }
    } else if (e.key === "ArrowDown") {
      e.preventDefault()
      if (historyIndex !== -1) {
        const newIndex = historyIndex + 1
        if (newIndex >= commandHistory.length) {
          setHistoryIndex(-1)
          setCurrentCommand("")
        } else {
          setHistoryIndex(newIndex)
          setCurrentCommand(commandHistory[newIndex])
        }
      }
    }
  }

useEffect(() => {
    if (terminalRef.current) {
      terminalRef.current.scrollTop = terminalRef.current.scrollHeight
    }
  }, [lines])

useEffect(() => {
    if (inputRef.current) {
      inputRef.current.focus()
    }
  }, [])

return (
    <div className="h-full bg-black text-green-400 font-mono flex flex-col">
      {/* Header */}
      <div className="flex items-center justify-between p-2 bg-gray-800 border-b border-gray-700">
        <div className="flex items-center gap-3">
          <div className="text-xl">⌨️</div>
          <h1 className="text-sm font-semibold text-white">Terminal Pro</h1>
        </div>
        <div className="flex items-center gap-1">
          <Button variant="ghost" size="sm" className="w-6 h-6 p-0 hover:bg-gray-700">
            <Minus className="h-3 w-3 text-white" />
          </Button>
          <Button variant="ghost" size="sm" className="w-6 h-6 p-0 hover:bg-gray-700">
            <Square className="h-3 w-3 text-white" />
          </Button>
          <Button variant="ghost" size="sm" onClick={onClose} className="w-6 h-6 p-0 hover:bg-gray-700">
            <X className="h-3 w-3 text-white" />
          </Button>
        </div>
      </div>

{/* Terminal Content */}
      <div ref={terminalRef} className="flex-1 p-4 overflow-y-auto">
        {lines.map((line) => (
          <div key={line.id} className={`mb-1 ${line.type === "error" ? "text-red-400" : "text-green-400"}`}>
            {line.content}
          </div>
        ))}

{/* Current Input Line */}
        <div className="flex items-center">
          <span className="text-green-400 mr-2">$</span>
          <input
            ref={inputRef}
            type="text"
            value={currentCommand}
            onChange={(e) => setCurrentCommand(e.target.value)}
            onKeyDown={handleKeyDown}
            className="flex-1 bg-transparent border-none outline-none text-green-400 font-mono"
            placeholder="Enter command..."
          />
        </div>
      </div>

{/* Status Bar */}
      <div className="flex items-center justify-between px-3 py-1 bg-gray-800 border-t border-gray-700 text-xs text-gray-400">
        <div>Terminal Pro v2.13</div>
        <div>{lines.length} lines</div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/apps/github.tsx" isMerged="true"
"use client"

import { useState } from "react"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Badge } from "@/components/ui/badge"
import { X, GitBranch, GitCommit, GitPullRequest, Star, Eye, GitFork, Search, Plus } from "lucide-react"

interface Repository {
  id: number
  name: string
  description: string
  language: string
  stars: number
  forks: number
  watchers: number
  isPrivate: boolean
  lastCommit: string
}

interface Commit {
  id: string
  message: string
  author: string
  date: string
  hash: string
}

interface GitHubProps {
  onClose: () => void
}

export function GitHub({ onClose }: GitHubProps) {
  const [activeTab, setActiveTab] = useState("repositories")
  const [searchQuery, setSearchQuery] = useState("")

const repositories: Repository[] = [
    {
      id: 1,
      name: "my-react-app",
      description: "A modern React application with TypeScript and Tailwind CSS",
      language: "TypeScript",
      stars: 42,
      forks: 8,
      watchers: 15,
      isPrivate: false,
      lastCommit: "2 hours ago",
    },
    {
      id: 2,
      name: "api-server",
      description: "RESTful API server built with Node.js and Express",
      language: "JavaScript",
      stars: 23,
      forks: 5,
      watchers: 8,
      isPrivate: true,
      lastCommit: "1 day ago",
    },
    {
      id: 3,
      name: "mobile-app",
      description: "Cross-platform mobile app using React Native",
      language: "JavaScript",
      stars: 67,
      forks: 12,
      watchers: 25,
      isPrivate: false,
      lastCommit: "3 days ago",
    },
  ]

const commits: Commit[] = [
    {
      id: "1",
      message: "Add user authentication system",
      author: "john-doe",
      date: "2 hours ago",
      hash: "a1b2c3d",
    },
    {
      id: "2",
      message: "Fix responsive design issues",
      author: "jane-smith",
      date: "5 hours ago",
      hash: "e4f5g6h",
    },
    {
      id: "3",
      message: "Update dependencies to latest versions",
      author: "john-doe",
      date: "1 day ago",
      hash: "i7j8k9l",
    },
    {
      id: "4",
      message: "Implement dark mode toggle",
      author: "alex-dev",
      date: "2 days ago",
      hash: "m0n1o2p",
    },
  ]

const pullRequests = [
    {
      id: 1,
      title: "Add search functionality",
      author: "contributor1",
      status: "open",
      comments: 3,
      date: "1 day ago",
    },
    {
      id: 2,
      title: "Fix memory leak in data processing",
      author: "contributor2",
      status: "merged",
      comments: 7,
      date: "3 days ago",
    },
  ]

const getLanguageColor = (language: string) => {
    const colors: { [key: string]: string } = {
      TypeScript: "bg-blue-500",
      JavaScript: "bg-yellow-500",
      Python: "bg-green-500",
      Java: "bg-red-500",
      Go: "bg-cyan-500",
    }
    return colors[language] || "bg-gray-500"
  }

const filteredRepos = repositories.filter(
    (repo) =>
      repo.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
      repo.description.toLowerCase().includes(searchQuery.toLowerCase()),
  )

return (
    <div className="h-full bg-white text-gray-900 flex flex-col">
      {/* Header */}
      <div className="flex items-center justify-between p-3 border-b border-gray-200">
        <div className="flex items-center gap-3">
          <div className="text-2xl">🐙</div>
          <h1 className="text-lg font-semibold">GitHub Desktop</h1>
        </div>
        <Button variant="ghost" size="sm" onClick={onClose} className="hover:bg-gray-100">
          <X className="h-4 w-4" />
        </Button>
      </div>

{/* Navigation */}
      <div className="flex items-center gap-1 p-2 border-b border-gray-200">
        <Button
          variant={activeTab === "repositories" ? "default" : "ghost"}
          size="sm"
          onClick={() => setActiveTab("repositories")}
          className={activeTab === "repositories" ? "bg-blue-500 text-white" : ""}
        >
          <GitBranch className="h-4 w-4 mr-1" />
          Repositories
        </Button>
        <Button
          variant={activeTab === "commits" ? "default" : "ghost"}
          size="sm"
          onClick={() => setActiveTab("commits")}
          className={activeTab === "commits" ? "bg-blue-500 text-white" : ""}
        >
          <GitCommit className="h-4 w-4 mr-1" />
          Commits
        </Button>
        <Button
          variant={activeTab === "pulls" ? "default" : "ghost"}
          size="sm"
          onClick={() => setActiveTab("pulls")}
          className={activeTab === "pulls" ? "bg-blue-500 text-white" : ""}
        >
          <GitPullRequest className="h-4 w-4 mr-1" />
          Pull Requests
        </Button>
      </div>

{/* Content */}
      <div className="flex-1 overflow-auto">
        {activeTab === "repositories" && (
          <div className="p-4">
            <div className="flex items-center justify-between mb-4">
              <div className="relative flex-1 max-w-md">
                <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-gray-400" />
                <Input
                  placeholder="Search repositories..."
                  value={searchQuery}
                  onChange={(e) => setSearchQuery(e.target.value)}
                  className="pl-10"
                />
              </div>
              <Button className="bg-green-600 hover:bg-green-700 text-white">
                <Plus className="h-4 w-4 mr-1" />
                New Repository
              </Button>
            </div>

<div className="space-y-4">
              {filteredRepos.map((repo) => (
                <div key={repo.id} className="border border-gray-200 rounded-lg p-4 hover:bg-gray-50 transition-colors">
                  <div className="flex items-start justify-between mb-2">
                    <div className="flex items-center gap-2">
                      <h3 className="text-lg font-semibold text-blue-600 hover:underline cursor-pointer">
                        {repo.name}
                      </h3>
                      {repo.isPrivate && <Badge variant="secondary">Private</Badge>}
                    </div>
                    <div className="text-sm text-gray-500">{repo.lastCommit}</div>
                  </div>

<p className="text-gray-600 mb-3">{repo.description}</p>

<div className="flex items-center justify-between">
                    <div className="flex items-center gap-4">
                      <div className="flex items-center gap-1">
                        <div className={`w-3 h-3 rounded-full ${getLanguageColor(repo.language)}`}></div>
                        <span className="text-sm text-gray-600">{repo.language}</span>
                      </div>
                      <div className="flex items-center gap-1 text-sm text-gray-600">
                        <Star className="h-4 w-4" />
                        {repo.stars}
                      </div>
                      <div className="flex items-center gap-1 text-sm text-gray-600">
                        <GitFork className="h-4 w-4" />
                        {repo.forks}
                      </div>
                      <div className="flex items-center gap-1 text-sm text-gray-600">
                        <Eye className="h-4 w-4" />
                        {repo.watchers}
                      </div>
                    </div>
                    <Button variant="outline" size="sm">
                      Clone
                    </Button>
                  </div>
                </div>
              ))}
            </div>
          </div>
        )}

{activeTab === "commits" && (
          <div className="p-4">
            <h2 className="text-xl font-semibold mb-4">Recent Commits</h2>
            <div className="space-y-3">
              {commits.map((commit) => (
                <div key={commit.id} className="border border-gray-200 rounded-lg p-4 hover:bg-gray-50">
                  <div className="flex items-start justify-between">
                    <div className="flex-1">
                      <h3 className="font-medium text-gray-900 mb-1">{commit.message}</h3>
                      <div className="flex items-center gap-4 text-sm text-gray-600">
                        <span>{commit.author}</span>
                        <span>{commit.date}</span>
                        <code className="bg-gray-100 px-2 py-1 rounded text-xs">{commit.hash}</code>
                      </div>
                    </div>
                    <GitCommit className="h-5 w-5 text-gray-400 mt-1" />
                  </div>
                </div>
              ))}
            </div>
          </div>
        )}

{activeTab === "pulls" && (
          <div className="p-4">
            <h2 className="text-xl font-semibold mb-4">Pull Requests</h2>
            <div className="space-y-3">
              {pullRequests.map((pr) => (
                <div key={pr.id} className="border border-gray-200 rounded-lg p-4 hover:bg-gray-50">
                  <div className="flex items-start justify-between">
                    <div className="flex-1">
                      <div className="flex items-center gap-2 mb-1">
                        <h3 className="font-medium text-gray-900">{pr.title}</h3>
                        <Badge variant={pr.status === "open" ? "default" : "secondary"}>{pr.status}</Badge>
                      </div>
                      <div className="flex items-center gap-4 text-sm text-gray-600">
                        <span>by {pr.author}</span>
                        <span>{pr.comments} comments</span>
                        <span>{pr.date}</span>
                      </div>
                    </div>
                    <GitPullRequest className="h-5 w-5 text-gray-400 mt-1" />
                  </div>
                </div>
              ))}
            </div>
          </div>
        )}
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/apps/netflix.tsx" isMerged="true"
"use client"

import { useState } from "react"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { X, Search, Play, Plus, ThumbsUp, ThumbsDown, Volume2 } from "lucide-react"

interface Movie {
  id: number
  title: string
  description: string
  genre: string
  rating: string
  duration: string
  year: number
  thumbnail: string
  isNew: boolean
}

interface NetflixProps {
  onClose: () => void
}

export function Netflix({ onClose }: NetflixProps) {
  const [searchQuery, setSearchQuery] = useState("")
  const [selectedMovie, setSelectedMovie] = useState<Movie | null>(null)
  const [isPlaying, setIsPlaying] = useState(false)

const movies: Movie[] = [
    {
      id: 1,
      title: "Stranger Things",
      description: "When a young boy vanishes, a small town uncovers a mystery involving secret experiments.",
      genre: "Sci-Fi Drama",
      rating: "TV-14",
      duration: "8 Episodes",
      year: 2023,
      thumbnail: "/placeholder.svg?height=300&width=200&text=Stranger+Things",
      isNew: true,
    },
    {
      id: 2,
      title: "The Crown",
      description: "Follows the political rivalries and romance of Queen Elizabeth II's reign.",
      genre: "Historical Drama",
      rating: "TV-MA",
      duration: "10 Episodes",
      year: 2023,
      thumbnail: "/placeholder.svg?height=300&width=200&text=The+Crown",
      isNew: false,
    },
    {
      id: 3,
      title: "Wednesday",
      description: "Wednesday Addams navigates her years as a student at Nevermore Academy.",
      genre: "Comedy Horror",
      rating: "TV-14",
      duration: "8 Episodes",
      year: 2023,
      thumbnail: "/placeholder.svg?height=300&width=200&text=Wednesday",
      isNew: true,
    },
    {
      id: 4,
      title: "Ozark",
      description: "A financial advisor drags his family from Chicago to the Missouri Ozarks.",
      genre: "Crime Drama",
      rating: "TV-MA",
      duration: "4 Seasons",
      year: 2022,
      thumbnail: "/placeholder.svg?height=300&width=200&text=Ozark",
      isNew: false,
    },
    {
      id: 5,
      title: "The Witcher",
      description: "Geralt of Rivia, a solitary monster hunter, struggles to find his place.",
      genre: "Fantasy",
      rating: "TV-MA",
      duration: "3 Seasons",
      year: 2023,
      thumbnail: "/placeholder.svg?height=300&width=200&text=The+Witcher",
      isNew: false,
    },
    {
      id: 6,
      title: "Money Heist",
      description: "An unusual group of robbers attempt to carry out the most perfect robbery.",
      genre: "Crime Thriller",
      rating: "TV-MA",
      duration: "5 Seasons",
      year: 2021,
      thumbnail: "/placeholder.svg?height=300&width=200&text=Money+Heist",
      isNew: false,
    },
  ]

const categories = [
    { name: "Trending Now", movies: movies.slice(0, 3) },
    { name: "New Releases", movies: movies.filter((m) => m.isNew) },
    { name: "Drama Series", movies: movies.filter((m) => m.genre.includes("Drama")) },
    {
      name: "Sci-Fi & Fantasy",
      movies: movies.filter((m) => m.genre.includes("Sci-Fi") || m.genre.includes("Fantasy")),
    },
  ]

const filteredMovies = movies.filter(
    (movie) =>
      movie.title.toLowerCase().includes(searchQuery.toLowerCase()) ||
      movie.genre.toLowerCase().includes(searchQuery.toLowerCase()),
  )

const handlePlayMovie = (movie: Movie) => {
    setSelectedMovie(movie)
    setIsPlaying(true)
  }

if (isPlaying && selectedMovie) {
    return (
      <div className="h-full bg-black flex items-center justify-center relative">
        <div className="w-full h-full bg-gray-900 flex items-center justify-center">
          <div className="text-center text-white">
            <div className="text-6xl mb-4">🎬</div>
            <h1 className="text-4xl font-bold mb-2">{selectedMovie.title}</h1>
            <p className="text-xl mb-4">Now Playing...</p>
            <div className="w-96 h-2 bg-gray-700 rounded-full mx-auto mb-4">
              <div className="w-1/4 h-full bg-red-600 rounded-full"></div>
            </div>
          </div>
        </div>

<div className="absolute bottom-4 left-1/2 transform -translate-x-1/2 flex items-center gap-4">
          <Button onClick={() => setIsPlaying(false)} variant="secondary">
            Pause
          </Button>
          <Button
            onClick={() => {
              setIsPlaying(false)
              setSelectedMovie(null)
            }}
            variant="secondary"
          >
            Stop
          </Button>
          <Button variant="secondary">
            <Volume2 className="h-4 w-4" />
          </Button>
        </div>

<Button
          onClick={() => {
            setIsPlaying(false)
            setSelectedMovie(null)
          }}
          variant="ghost"
          size="sm"
          className="absolute top-4 right-4 text-white hover:bg-white/20"
        >
          <X className="h-6 w-6" />
        </Button>
      </div>
    )
  }

return (
    <div className="h-full bg-black text-white overflow-hidden">
      {/* Header */}
      <div className="flex items-center justify-between p-4 bg-black/90 backdrop-blur-sm">
        <div className="flex items-center gap-6">
          <div className="text-2xl font-bold text-red-600">NETFLIX</div>
          <nav className="flex gap-6 text-sm">
            <span className="hover:text-gray-300 cursor-pointer">Home</span>
            <span className="hover:text-gray-300 cursor-pointer">TV Shows</span>
            <span className="hover:text-gray-300 cursor-pointer">Movies</span>
            <span className="hover:text-gray-300 cursor-pointer">My List</span>
          </nav>
        </div>
        <div className="flex items-center gap-4">
          <div className="relative">
            <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-gray-400" />
            <Input
              placeholder="Search titles..."
              value={searchQuery}
              onChange={(e) => setSearchQuery(e.target.value)}
              className="pl-10 bg-black/50 border-gray-600 text-white placeholder:text-gray-400"
            />
          </div>
          <Button variant="ghost" size="sm" onClick={onClose} className="hover:bg-white/20">
            <X className="h-4 w-4" />
          </Button>
        </div>
      </div>

{/* Hero Section */}
      {!searchQuery && (
        <div className="relative h-96 bg-gradient-to-r from-purple-900 to-blue-900 flex items-center">
          <div className="absolute inset-0 bg-black/40"></div>
          <div className="relative z-10 p-8 max-w-2xl">
            <h1 className="text-5xl font-bold mb-4">Stranger Things</h1>
            <p className="text-lg mb-6">
              When a young boy vanishes, a small town uncovers a mystery involving secret experiments, terrifying
              supernatural forces, and one strange little girl.
            </p>
            <div className="flex gap-4">
              <Button onClick={() => handlePlayMovie(movies[0])} className="bg-white text-black hover:bg-gray-200">
                <Play className="h-5 w-5 mr-2" />
                Play
              </Button>
              <Button variant="secondary" className="bg-gray-600 hover:bg-gray-700">
                <Plus className="h-5 w-5 mr-2" />
                My List
              </Button>
            </div>
          </div>
        </div>
      )}

{/* Content */}
      <div className="flex-1 overflow-y-auto p-6">
        {searchQuery ? (
          <div>
            <h2 className="text-2xl font-bold mb-4">Search Results</h2>
            <div className="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-4">
              {filteredMovies.map((movie) => (
                <div key={movie.id} className="group cursor-pointer" onClick={() => setSelectedMovie(movie)}>
                  <div className="relative overflow-hidden rounded-lg">
                    <img
                      src={movie.thumbnail || "/placeholder.svg"}
                      alt={movie.title}
                      className="w-full h-64 object-cover group-hover:scale-105 transition-transform"
                    />
                    {movie.isNew && (
                      <div className="absolute top-2 left-2 bg-red-600 text-xs px-2 py-1 rounded">NEW</div>
                    )}
                    <div className="absolute inset-0 bg-black/60 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center">
                      <Button
                        onClick={(e) => {
                          e.stopPropagation()
                          handlePlayMovie(movie)
                        }}
                        size="sm"
                      >
                        <Play className="h-4 w-4" />
                      </Button>
                    </div>
                  </div>
                  <h3 className="mt-2 font-medium">{movie.title}</h3>
                  <p className="text-sm text-gray-400">{movie.genre}</p>
                </div>
              ))}
            </div>
          </div>
        ) : (
          <div className="space-y-8">
            {categories.map((category) => (
              <div key={category.name}>
                <h2 className="text-xl font-bold mb-4">{category.name}</h2>
                <div className="flex gap-4 overflow-x-auto pb-4">
                  {category.movies.map((movie) => (
                    <div
                      key={movie.id}
                      className="flex-shrink-0 w-48 group cursor-pointer"
                      onClick={() => setSelectedMovie(movie)}
                    >
                      <div className="relative overflow-hidden rounded-lg">
                        <img
                          src={movie.thumbnail || "/placeholder.svg"}
                          alt={movie.title}
                          className="w-full h-64 object-cover group-hover:scale-105 transition-transform"
                        />
                        {movie.isNew && (
                          <div className="absolute top-2 left-2 bg-red-600 text-xs px-2 py-1 rounded">NEW</div>
                        )}
                        <div className="absolute inset-0 bg-black/60 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center">
                          <Button
                            onClick={(e) => {
                              e.stopPropagation()
                              handlePlayMovie(movie)
                            }}
                            size="sm"
                          >
                            <Play className="h-4 w-4" />
                          </Button>
                        </div>
                      </div>
                      <h3 className="mt-2 font-medium">{movie.title}</h3>
                      <p className="text-sm text-gray-400">{movie.genre}</p>
                    </div>
                  ))}
                </div>
              </div>
            ))}
          </div>
        )}
      </div>

{/* Movie Detail Modal */}
      {selectedMovie && !isPlaying && (
        <div className="absolute inset-0 bg-black/80 flex items-center justify-center z-50">
          <div className="bg-gray-900 rounded-lg p-6 max-w-2xl w-full mx-4">
            <div className="flex justify-between items-start mb-4">
              <h2 className="text-2xl font-bold">{selectedMovie.title}</h2>
              <Button variant="ghost" size="sm" onClick={() => setSelectedMovie(null)}>
                <X className="h-4 w-4" />
              </Button>
            </div>

<div className="flex gap-4 mb-4">
              <img
                src={selectedMovie.thumbnail || "/placeholder.svg"}
                alt={selectedMovie.title}
                className="w-32 h-48 object-cover rounded"
              />
              <div className="flex-1">
                <p className="text-gray-300 mb-4">{selectedMovie.description}</p>
                <div className="space-y-2 text-sm">
                  <div>
                    <span className="text-gray-400">Genre:</span> {selectedMovie.genre}
                  </div>
                  <div>
                    <span className="text-gray-400">Rating:</span> {selectedMovie.rating}
                  </div>
                  <div>
                    <span className="text-gray-400">Duration:</span> {selectedMovie.duration}
                  </div>
                  <div>
                    <span className="text-gray-400">Year:</span> {selectedMovie.year}
                  </div>
                </div>
              </div>
            </div>

<div className="flex gap-4">
              <Button onClick={() => handlePlayMovie(selectedMovie)} className="bg-white text-black hover:bg-gray-200">
                <Play className="h-4 w-4 mr-2" />
                Play
              </Button>
              <Button variant="secondary">
                <Plus className="h-4 w-4 mr-2" />
                Add to List
              </Button>
              <Button variant="ghost">
                <ThumbsUp className="h-4 w-4" />
              </Button>
              <Button variant="ghost">
                <ThumbsDown className="h-4 w-4" />
              </Button>
            </div>
          </div>
        </div>
      )}
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/apps/spotify.tsx" isMerged="true"
"use client"

import { useState } from "react"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Slider } from "@/components/ui/slider"
import { X, Search, Play, Pause, SkipBack, SkipForward, Shuffle, Repeat, Volume2, Heart } from "lucide-react"

interface Track {
  id: number
  title: string
  artist: string
  album: string
  duration: string
  cover: string
  isLiked: boolean
}

interface Playlist {
  id: number
  name: string
  description: string
  cover: string
  tracks: Track[]
}

interface SpotifyProps {
  onClose: () => void
}

export function Spotify({ onClose }: SpotifyProps) {
  const [isPlaying, setIsPlaying] = useState(false)
  const [currentTrack, setCurrentTrack] = useState<Track | null>(null)
  const [volume, setVolume] = useState([75])
  const [progress, setProgress] = useState([0])
  const [searchQuery, setSearchQuery] = useState("")
  const [activeView, setActiveView] = useState("home")

const tracks: Track[] = [
    {
      id: 1,
      title: "Blinding Lights",
      artist: "The Weeknd",
      album: "After Hours",
      duration: "3:20",
      cover: "/placeholder.svg?height=300&width=300&text=Blinding+Lights",
      isLiked: true,
    },
    {
      id: 2,
      title: "Watermelon Sugar",
      artist: "Harry Styles",
      album: "Fine Line",
      duration: "2:54",
      cover: "/placeholder.svg?height=300&width=300&text=Watermelon+Sugar",
      isLiked: false,
    },
    {
      id: 3,
      title: "Levitating",
      artist: "Dua Lipa",
      album: "Future Nostalgia",
      duration: "3:23",
      cover: "/placeholder.svg?height=300&width=300&text=Levitating",
      isLiked: true,
    },
    {
      id: 4,
      title: "Good 4 U",
      artist: "Olivia Rodrigo",
      album: "SOUR",
      duration: "2:58",
      cover: "/placeholder.svg?height=300&width=300&text=Good+4+U",
      isLiked: false,
    },
  ]

const playlists: Playlist[] = [
    {
      id: 1,
      name: "Today's Top Hits",
      description: "The most played songs right now",
      cover: "/placeholder.svg?height=300&width=300&text=Top+Hits",
      tracks: tracks.slice(0, 2),
    },
    {
      id: 2,
      name: "Chill Vibes",
      description: "Relax and unwind with these chill tracks",
      cover: "/placeholder.svg?height=300&width=300&text=Chill+Vibes",
      tracks: tracks.slice(2),
    },
  ]

const handlePlayTrack = (track: Track) => {
    setCurrentTrack(track)
    setIsPlaying(true)
    setProgress([0])
  }

const togglePlayback = () => {
    setIsPlaying(!isPlaying)
  }

const toggleLike = (trackId: number) => {
    // In a real app, this would update the backend
    console.log(`Toggle like for track ${trackId}`)
  }

const filteredTracks = tracks.filter(
    (track) =>
      track.title.toLowerCase().includes(searchQuery.toLowerCase()) ||
      track.artist.toLowerCase().includes(searchQuery.toLowerCase()),
  )

return (
    <div className="h-full bg-black text-white flex flex-col">
      {/* Header */}
      <div className="flex items-center justify-between p-4 bg-black border-b border-gray-800">
        <div className="flex items-center gap-6">
          <div className="text-2xl font-bold text-green-500">Spotify</div>
          <nav className="flex gap-6 text-sm">
            <span
              className={`hover:text-white cursor-pointer ${activeView === "home" ? "text-white" : "text-gray-400"}`}
              onClick={() => setActiveView("home")}
            >
              Home
            </span>
            <span
              className={`hover:text-white cursor-pointer ${activeView === "search" ? "text-white" : "text-gray-400"}`}
              onClick={() => setActiveView("search")}
            >
              Search
            </span>
            <span
              className={`hover:text-white cursor-pointer ${activeView === "library" ? "text-white" : "text-gray-400"}`}
              onClick={() => setActiveView("library")}
            >
              Your Library
            </span>
          </nav>
        </div>
        <Button variant="ghost" size="sm" onClick={onClose} className="hover:bg-white/20">
          <X className="h-4 w-4" />
        </Button>
      </div>

<div className="flex flex-1 overflow-hidden">
        {/* Sidebar */}
        <div className="w-64 bg-black border-r border-gray-800 p-4">
          <div className="space-y-4">
            <div>
              <h3 className="text-sm font-semibold text-gray-400 mb-2">PLAYLISTS</h3>
              <div className="space-y-2">
                {playlists.map((playlist) => (
                  <div
                    key={playlist.id}
                    className="flex items-center gap-3 p-2 rounded hover:bg-gray-800 cursor-pointer"
                  >
                    <img src={playlist.cover || "/placeholder.svg"} alt={playlist.name} className="w-10 h-10 rounded" />
                    <div>
                      <div className="text-sm font-medium">{playlist.name}</div>
                      <div className="text-xs text-gray-400">{playlist.tracks.length} songs</div>
                    </div>
                  </div>
                ))}
              </div>
            </div>

<div>
              <h3 className="text-sm font-semibold text-gray-400 mb-2">RECENTLY PLAYED</h3>
              <div className="space-y-2">
                {tracks.slice(0, 3).map((track) => (
                  <div key={track.id} className="flex items-center gap-3 p-2 rounded hover:bg-gray-800 cursor-pointer">
                    <img src={track.cover || "/placeholder.svg"} alt={track.title} className="w-10 h-10 rounded" />
                    <div>
                      <div className="text-sm font-medium">{track.title}</div>
                      <div className="text-xs text-gray-400">{track.artist}</div>
                    </div>
                  </div>
                ))}
              </div>
            </div>
          </div>
        </div>

{/* Main Content */}
        <div className="flex-1 overflow-y-auto">
          {activeView === "home" && (
            <div className="p-6">
              <h1 className="text-3xl font-bold mb-6">Good evening</h1>

<div className="mb-8">
                <h2 className="text-xl font-bold mb-4">Recently played</h2>
                <div className="grid grid-cols-3 gap-4">
                  {tracks.slice(0, 6).map((track) => (
                    <div
                      key={track.id}
                      className="flex items-center bg-gray-800/50 rounded hover:bg-gray-700 cursor-pointer group"
                    >
                      <img src={track.cover || "/placeholder.svg"} alt={track.title} className="w-16 h-16 rounded-l" />
                      <div className="flex-1 p-3">
                        <div className="font-medium">{track.title}</div>
                        <div className="text-sm text-gray-400">{track.artist}</div>
                      </div>
                      <Button
                        onClick={() => handlePlayTrack(track)}
                        size="sm"
                        className="mr-3 opacity-0 group-hover:opacity-100 bg-green-500 hover:bg-green-600 rounded-full w-10 h-10 p-0"
                      >
                        <Play className="h-4 w-4" />
                      </Button>
                    </div>
                  ))}
                </div>
              </div>

<div>
                <h2 className="text-xl font-bold mb-4">Made for you</h2>
                <div className="grid grid-cols-4 gap-4">
                  {playlists.map((playlist) => (
                    <div
                      key={playlist.id}
                      className="bg-gray-800/30 p-4 rounded-lg hover:bg-gray-800/50 cursor-pointer group"
                    >
                      <img
                        src={playlist.cover || "/placeholder.svg"}
                        alt={playlist.name}
                        className="w-full aspect-square rounded-lg mb-3"
                      />
                      <h3 className="font-medium mb-1">{playlist.name}</h3>
                      <p className="text-sm text-gray-400">{playlist.description}</p>
                      <Button
                        size="sm"
                        className="mt-3 opacity-0 group-hover:opacity-100 bg-green-500 hover:bg-green-600 rounded-full w-10 h-10 p-0"
                      >
                        <Play className="h-4 w-4" />
                      </Button>
                    </div>
                  ))}
                </div>
              </div>
            </div>
          )}

{activeView === "search" && (
            <div className="p-6">
              <div className="relative mb-6">
                <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-gray-400" />
                <Input
                  placeholder="What do you want to listen to?"
                  value={searchQuery}
                  onChange={(e) => setSearchQuery(e.target.value)}
                  className="pl-10 bg-gray-800 border-gray-700 text-white placeholder:text-gray-400"
                />
              </div>

{searchQuery ? (
                <div>
                  <h2 className="text-xl font-bold mb-4">Search Results</h2>
                  <div className="space-y-2">
                    {filteredTracks.map((track) => (
                      <div key={track.id} className="flex items-center gap-4 p-3 rounded hover:bg-gray-800 group">
                        <Button
                          onClick={() => handlePlayTrack(track)}
                          size="sm"
                          variant="ghost"
                          className="opacity-0 group-hover:opacity-100 w-10 h-10 p-0"
                        >
                          <Play className="h-4 w-4" />
                        </Button>
                        <img src={track.cover || "/placeholder.svg"} alt={track.title} className="w-12 h-12 rounded" />
                        <div className="flex-1">
                          <div className="font-medium">{track.title}</div>
                          <div className="text-sm text-gray-400">{track.artist}</div>
                        </div>
                        <div className="text-sm text-gray-400">{track.duration}</div>
                        <Button
                          onClick={() => toggleLike(track.id)}
                          size="sm"
                          variant="ghost"
                          className="w-10 h-10 p-0"
                        >
                          <Heart className={`h-4 w-4 ${track.isLiked ? "fill-green-500 text-green-500" : ""}`} />
                        </Button>
                      </div>
                    ))}
                  </div>
                </div>
              ) : (
                <div>
                  <h2 className="text-xl font-bold mb-4">Browse all</h2>
                  <div className="grid grid-cols-4 gap-4">
                    {["Pop", "Hip-Hop", "Rock", "Jazz", "Electronic", "Classical", "Country", "R&B"].map((genre) => (
                      <div
                        key={genre}
                        className="bg-gradient-to-br from-purple-600 to-blue-600 p-4 rounded-lg cursor-pointer hover:scale-105 transition-transform"
                      >
                        <h3 className="text-lg font-bold">{genre}</h3>
                      </div>
                    ))}
                  </div>
                </div>
              )}
            </div>
          )}

{activeView === "library" && (
            <div className="p-6">
              <h1 className="text-3xl font-bold mb-6">Your Library</h1>
              <div className="space-y-4">
                {tracks
                  .filter((track) => track.isLiked)
                  .map((track) => (
                    <div key={track.id} className="flex items-center gap-4 p-3 rounded hover:bg-gray-800 group">
                      <Button
                        onClick={() => handlePlayTrack(track)}
                        size="sm"
                        variant="ghost"
                        className="opacity-0 group-hover:opacity-100 w-10 h-10 p-0"
                      >
                        <Play className="h-4 w-4" />
                      </Button>
                      <img src={track.cover || "/placeholder.svg"} alt={track.title} className="w-12 h-12 rounded" />
                      <div className="flex-1">
                        <div className="font-medium">{track.title}</div>
                        <div className="text-sm text-gray-400">{track.artist}</div>
                      </div>
                      <div className="text-sm text-gray-400">{track.duration}</div>
                      <Heart className="h-4 w-4 fill-green-500 text-green-500" />
                    </div>
                  ))}
              </div>
            </div>
          )}
        </div>
      </div>

{/* Now Playing Bar */}
      <div className="bg-gray-900 border-t border-gray-800 p-4">
        <div className="flex items-center justify-between">
          {/* Current Track Info */}
          <div className="flex items-center gap-3 flex-1">
            {currentTrack && (
              <>
                <img
                  src={currentTrack.cover || "/placeholder.svg"}
                  alt={currentTrack.title}
                  className="w-14 h-14 rounded"
                />
                <div>
                  <div className="font-medium">{currentTrack.title}</div>
                  <div className="text-sm text-gray-400">{currentTrack.artist}</div>
                </div>
                <Button onClick={() => toggleLike(currentTrack.id)} size="sm" variant="ghost" className="w-8 h-8 p-0">
                  <Heart className={`h-4 w-4 ${currentTrack.isLiked ? "fill-green-500 text-green-500" : ""}`} />
                </Button>
              </>
            )}
          </div>

{/* Playback Controls */}
          <div className="flex flex-col items-center gap-2 flex-1">
            <div className="flex items-center gap-4">
              <Button size="sm" variant="ghost">
                <Shuffle className="h-4 w-4" />
              </Button>
              <Button size="sm" variant="ghost">
                <SkipBack className="h-4 w-4" />
              </Button>
              <Button
                onClick={togglePlayback}
                size="sm"
                className="bg-white text-black hover:bg-gray-200 rounded-full w-10 h-10 p-0"
              >
                {isPlaying ? <Pause className="h-5 w-5" /> : <Play className="h-5 w-5" />}
              </Button>
              <Button size="sm" variant="ghost">
                <SkipForward className="h-4 w-4" />
              </Button>
              <Button size="sm" variant="ghost">
                <Repeat className="h-4 w-4" />
              </Button>
            </div>
            <div className="flex items-center gap-2 w-full max-w-md">
              <span className="text-xs text-gray-400">0:00</span>
              <Slider value={progress} onValueChange={setProgress} max={100} min={0} step={1} className="flex-1" />
              <span className="text-xs text-gray-400">{currentTrack?.duration || "0:00"}</span>
            </div>
          </div>

{/* Volume Control */}
          <div className="flex items-center gap-2 flex-1 justify-end">
            <Volume2 className="h-4 w-4" />
            <Slider value={volume} onValueChange={setVolume} max={100} min={0} step={1} className="w-24" />
          </div>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/apps/chess.tsx" isEdit="true" isMerged="true"
"use client"

import { useState } from "react"
import { Button } from "@/components/ui/button"
import { X, RotateCcw, Flag } from "lucide-react"

interface Piece {
  type: PieceType
  color: PieceColor
}

interface ChessProps {
  onClose: () => void
}

export function Chess({ onClose }: ChessProps) {
  const [selectedSquare, setSelectedSquare] = useState<string | null>(null)
  const [currentPlayer, setCurrentPlayer] = useState<PieceColor>("white")
  const [gameStatus, setGameStatus] = useState<"playing" | "check" | "checkmate" | "draw">("playing")

const initialBoard: { [key: string]: Piece } = {
    a8: { type: "rook", color: "black" },
    b8: { type: "knight", color: "black" },
    c8: { type: "bishop", color: "black" },
    d8: { type: "queen", color: "black" },
    e8: { type: "king", color: "black" },
    f8: { type: "bishop", color: "black" },
    g8: { type: "knight", color: "black" },
    h8: { type: "rook", color: "black" },
    a7: { type: "pawn", color: "black" },
    b7: { type: "pawn", color: "black" },
    c7: { type: "pawn", color: "black" },
    d7: { type: "pawn", color: "black" },
    e7: { type: "pawn", color: "black" },
    f7: { type: "pawn", color: "black" },
    g7: { type: "pawn", color: "black" },
    h7: { type: "pawn", color: "black" },
    a1: { type: "rook", color: "white" },
    b1: { type: "knight", color: "white" },
    c1: { type: "bishop", color: "white" },
    d1: { type: "queen", color: "white" },
    e1: { type: "king", color: "white" },
    f1: { type: "bishop", color: "white" },
    g1: { type: "knight", color: "white" },
    h1: { type: "rook", color: "white" },
    a2: { type: "pawn", color: "white" },
    b2: { type: "pawn", color: "white" },
    c2: { type: "pawn", color: "white" },
    d2: { type: "pawn", color: "white" },
    e2: { type: "pawn", color: "white" },
    f2: { type: "pawn", color: "white" },
    g2: { type: "pawn", color: "white" },
    h2: { type: "pawn", color: "white" },
  }

const [board, setBoard] = useState(initialBoard)

const getPieceSymbol = (piece: Piece): string => {
    const symbols = {
      white: {
        king: "🤴🏻",
        queen: "👸🏻",
        rook: "🏰",
        bishop: "⛪",
        knight: "🐎",
        pawn: "👤",
      },
      black: {
        king: "🤴🏿",
        queen: "👸🏿",
        rook: "🏯",
        bishop: "🕌",
        knight: "🐴",
        pawn: "👥",
      },
    }
    return symbols[piece.color][piece.type]
  }

const handleSquareClick = (square: string) => {
    if (selectedSquare === square) {
      setSelectedSquare(null)
      return
    }

if (selectedSquare) {
      // Attempt to move piece
      const piece = board[selectedSquare]
      if (piece && piece.color === currentPlayer) {
        const newBoard = { ...board }
        delete newBoard[selectedSquare]
        newBoard[square] = piece
        setBoard(newBoard)
        setCurrentPlayer(currentPlayer === "white" ? "black" : "white")
      }
      setSelectedSquare(null)
    } else {
      // Select piece
      const piece = board[square]
      if (piece && piece.color === currentPlayer) {
        setSelectedSquare(square)
      }
    }
  }

const resetGame = () => {
    setBoard(initialBoard)
    setCurrentPlayer("white")
    setSelectedSquare(null)
    setGameStatus("playing")
  }

const files = ["a", "b", "c", "d", "e", "f", "g", "h"]
  const ranks = ["8", "7", "6", "5", "4", "3", "2", "1"]

return (
    <div className="h-full bg-gradient-to-br from-emerald-50 to-emerald-100 flex flex-col">
      {/* Header */}
      <div className="flex items-center justify-between p-4 bg-emerald-900 text-white">
        <div className="flex items-center gap-3">
          <div className="text-2xl">♟️</div>
          <h1 className="text-lg font-semibold">Chess Master</h1>
        </div>
        <Button variant="ghost" size="sm" onClick={onClose} className="hover:bg-emerald-800 text-white">
          <X className="h-4 w-4" />
        </Button>
      </div>

{/* Game Info */}
      <div className="flex items-center justify-between p-4 bg-emerald-100 border-b border-emerald-200">
        <div className="flex items-center gap-4">
          <div className="text-lg font-semibold">
            Current Player:{" "}
            <span className={currentPlayer === "white" ? "text-gray-800" : "text-gray-600"}>
              {currentPlayer === "white" ? "White" : "Black"}
            </span>
          </div>
          {gameStatus !== "playing" && (
            <div className="text-lg font-bold text-red-600">
              {gameStatus === "check" && "Check!"}
              {gameStatus === "checkmate" && "Checkmate!"}
              {gameStatus === "draw" && "Draw!"}
            </div>
          )}
        </div>
        <div className="flex gap-2">
          <Button onClick={resetGame} variant="outline" size="sm">
            <RotateCcw className="h-4 w-4 mr-1" />
            New Game
          </Button>
          <Button variant="outline" size="sm">
            <Flag className="h-4 w-4 mr-1" />
            Resign
          </Button>
        </div>
      </div>

{/* Chess Board */}
      <div className="flex-1 flex items-center justify-center p-8">
        <div className="bg-emerald-800 p-4 rounded-lg shadow-2xl">
          <div className="grid grid-cols-8 gap-0 border-2 border-emerald-900">
            {ranks.map((rank) =>
              files.map((file) => {
                const square = `${file}${rank}`
                const isLight = (files.indexOf(file) + ranks.indexOf(rank)) % 2 === 0
                const piece = board[square]
                const isSelected = selectedSquare === square

return (
                  <div
                    key={square}
                    onClick={() => handleSquareClick(square)}
                    className={`
                      w-16 h-16 flex items-center justify-center text-2xl cursor-pointer relative
                      ${isLight ? "bg-emerald-100" : "bg-emerald-600"}
                      ${isSelected ? "ring-4 ring-blue-400" : ""}
                      hover:brightness-110 transition-all
                    `}
                  >
                    {piece && (
                      <span
                        className={`select-none drop-shadow-lg transform hover:scale-110 transition-transform ${piece.color === "white" ? "filter brightness-110" : "filter brightness-90"}`}
                      >
                        {getPieceSymbol(piece)}
                      </span>
                    )}

{/* Square coordinates */}
                    {rank === "1" && (
                      <div className="absolute bottom-0 right-1 text-xs text-emerald-800 font-bold">{file}</div>
                    )}
                    {file === "a" && (
                      <div className="absolute top-1 left-1 text-xs text-emerald-800 font-bold">{rank}</div>
                    )}
                  </div>
                )
              }),
            )}
          </div>
        </div>
      </div>

{/* Game Controls */}
      <div className="p-4 bg-emerald-100 border-t border-emerald-200">
        <div className="flex items-center justify-between">
          <div className="text-sm text-emerald-800">
            Click on a piece to select it, then click on a destination square to move.
          </div>
          <div className="flex items-center gap-4 text-sm text-emerald-800">
            <div>Move: {Math.floor((Object.keys(initialBoard).length - Object.keys(board).length) / 2) + 1}</div>
            <div>Captured: {Object.keys(initialBoard).length - Object.keys(board).length}</div>
          </div>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/wallpaper-selector.tsx" isEdit="true" isMerged="true"
"use client"
import { Button } from "@/components/ui/button"
import { X, Check } from "lucide-react"

interface Wallpaper {
  id: string
  name: string
  type: "gradient" | "image" | "animated"
  preview: string
  className: string
}

interface WallpaperSelectorProps {
  onClose: () => void
  onWallpaperChange: (wallpaper: Wallpaper) => void
  currentWallpaper: string
}

export function WallpaperSelector({ onClose, onWallpaperChange, currentWallpaper }: WallpaperSelectorProps) {
  const wallpapers: Wallpaper[] = [
    {
      id: "tahoe-default",
      name: "Tahoe",
      type: "animated",
      preview: "macOS Tahoe default wallpaper",
      className: "bg-gradient-to-br from-blue-400 via-purple-500 to-pink-500",
    },
    {
      id: "monterey",
      name: "Monterey",
      type: "gradient",
      preview: "macOS Monterey inspired",
      className: "bg-gradient-to-br from-purple-600 via-blue-600 to-teal-500",
    },
    {
      id: "big-sur",
      name: "Big Sur",
      type: "gradient",
      preview: "macOS Big Sur inspired",
      className: "bg-gradient-to-br from-pink-400 via-purple-400 to-indigo-600",
    },
    {
      id: "ventura",
      name: "Ventura",
      type: "animated",
      preview: "macOS Ventura inspired",
      className: "bg-gradient-to-br from-blue-500 via-cyan-400 to-teal-400",
    },
    {
      id: "sonoma",
      name: "Sonoma",
      type: "gradient",
      preview: "macOS Sonoma inspired",
      className: "bg-gradient-to-br from-orange-400 via-red-500 to-pink-600",
    },
    {
      id: "sequoia",
      name: "Sequoia",
      type: "animated",
      preview: "macOS Sequoia inspired",
      className: "bg-gradient-to-br from-green-500 via-emerald-500 to-teal-600",
    },
    {
      id: "catalina",
      name: "Catalina",
      type: "gradient",
      preview: "macOS Catalina inspired",
      className: "bg-gradient-to-br from-blue-600 via-purple-600 to-indigo-800",
    },
    {
      id: "mojave-light",
      name: "Mojave Light",
      type: "gradient",
      preview: "macOS Mojave day mode",
      className: "bg-gradient-to-br from-yellow-300 via-orange-400 to-red-500",
    },
    {
      id: "mojave-dark",
      name: "Mojave Dark",
      type: "animated",
      preview: "macOS Mojave night mode",
      className: "bg-gradient-to-br from-gray-800 via-gray-900 to-black",
    },
    {
      id: "high-sierra",
      name: "High Sierra",
      type: "gradient",
      preview: "macOS High Sierra inspired",
      className: "bg-gradient-to-br from-blue-400 via-indigo-500 to-purple-600",
    },
    {
      id: "sierra",
      name: "Sierra",
      type: "gradient",
      preview: "macOS Sierra inspired",
      className: "bg-gradient-to-br from-gray-400 via-gray-600 to-gray-800",
    },
    {
      id: "el-capitan",
      name: "El Capitan",
      type: "gradient",
      preview: "macOS El Capitan inspired",
      className: "bg-gradient-to-br from-blue-300 via-blue-500 to-blue-700",
    },
    {
      id: "yosemite",
      name: "Yosemite",
      type: "animated",
      preview: "macOS Yosemite inspired",
      className: "bg-gradient-to-br from-green-400 via-blue-500 to-purple-600",
    },
    {
      id: "mavericks",
      name: "Mavericks",
      type: "gradient",
      preview: "macOS Mavericks inspired",
      className: "bg-gradient-to-br from-blue-500 via-teal-500 to-cyan-600",
    },
    {
      id: "mountain-lion",
      name: "Mountain Lion",
      type: "gradient",
      preview: "macOS Mountain Lion inspired",
      className: "bg-gradient-to-br from-gray-600 via-gray-700 to-gray-900",
    },
    {
      id: "lion",
      name: "Lion",
      type: "animated",
      preview: "macOS Lion inspired",
      className: "bg-gradient-to-br from-purple-500 via-indigo-600 to-blue-700",
    },
  ]

const handleWallpaperSelect = (wallpaper: Wallpaper) => {
    onWallpaperChange(wallpaper)
    onClose()
  }

return (
    <div className="fixed inset-0 bg-black/50 backdrop-blur-sm flex items-center justify-center z-50">
      <div className="bg-white/90 backdrop-blur-xl border border-white/30 rounded-2xl p-6 max-w-5xl w-full mx-4 max-h-[85vh] overflow-y-auto scrollbar-thin scrollbar-thumb-white/20 scrollbar-track-transparent">
        <div className="flex items-center justify-between mb-6">
          <div>
            <h2 className="text-2xl font-bold text-gray-800">Desktop & Screen Saver</h2>
            <p className="text-sm text-gray-600 mt-1">Choose a wallpaper for your desktop</p>
          </div>
          <Button variant="ghost" size="sm" onClick={onClose} className="hover:bg-white/20">
            <X className="h-4 w-4" />
          </Button>
        </div>

<div className="mb-6">
          <h3 className="text-lg font-semibold text-gray-700 mb-3">macOS Wallpapers</h3>
          <p className="text-sm text-gray-500 mb-4">Official macOS-inspired wallpapers from different versions</p>
        </div>

<div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
          {wallpapers.map((wallpaper) => (
            <div
              key={wallpaper.id}
              className="relative group cursor-pointer"
              onClick={() => handleWallpaperSelect(wallpaper)}
            >
              <div
                className={`w-full h-32 rounded-lg border-2 transition-all duration-200 ${
                  currentWallpaper === wallpaper.id
                    ? "border-blue-500 ring-2 ring-blue-200 shadow-lg"
                    : "border-white/30 hover:border-white/50 hover:shadow-md"
                } ${wallpaper.className} relative overflow-hidden`}
              >
                {wallpaper.type === "animated" && (
                  <div className="absolute inset-0 overflow-hidden pointer-events-none">
                    <div className="absolute top-1/4 left-1/4 w-20 h-20 bg-white/15 rounded-full blur-xl animate-pulse"></div>
                    <div className="absolute bottom-1/4 right-1/4 w-16 h-16 bg-white/10 rounded-full blur-lg animate-pulse delay-1000"></div>
                    <div className="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-12 h-12 bg-white/12 rounded-full blur-md animate-pulse delay-500"></div>
                    <div className="absolute top-3/4 left-1/3 w-8 h-8 bg-white/8 rounded-full blur-sm animate-pulse delay-1500"></div>
                  </div>
                )}

{/* Selection indicator */}
                {currentWallpaper === wallpaper.id && (
                  <div className="absolute top-2 right-2 bg-blue-500 text-white rounded-full p-1.5 shadow-lg">
                    <Check className="h-3 w-3" />
                  </div>
                )}

<div className="absolute inset-0 bg-black/30 opacity-0 group-hover:opacity-100 transition-all duration-200 flex items-center justify-center rounded-lg">
                  <div className="text-white text-sm font-medium bg-black/20 px-3 py-1 rounded-full backdrop-blur-sm">
                    Select
                  </div>
                </div>
              </div>

<div className="mt-3 text-center">
                <h3 className="font-medium text-gray-800 text-sm">{wallpaper.name}</h3>
                <p className="text-xs text-gray-600 mt-1">{wallpaper.preview}</p>
                <div className="flex items-center justify-center gap-1 mt-2">
                  <div
                    className={`w-2 h-2 rounded-full ${
                      wallpaper.type === "gradient"
                        ? "bg-blue-400"
                        : wallpaper.type === "animated"
                          ? "bg-purple-400"
                          : "bg-green-400"
                    }`}
                  ></div>
                  <span className="text-xs text-gray-500 capitalize">{wallpaper.type}</span>
                </div>
              </div>
            </div>
          ))}
        </div>

<div className="mt-8 text-center border-t border-white/20 pt-6">
          <p className="text-sm text-gray-600">Wallpapers inspired by macOS versions from Lion to Tahoe</p>
          <p className="text-xs text-gray-500 mt-1">
            Animated wallpapers include floating elements • Gradient wallpapers are static
          </p>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]css:file="app/globals.css" isEdit="true" isMerged="true"
@import "tailwindcss";
@import "tw-animate-css";

@custom-variant dark (&:is(.dark *));

:root {
  --background: oklch(1 0 0);
  --foreground: oklch(0.145 0 0);
  --card: oklch(1 0 0);
  --card-foreground: oklch(0.145 0 0);
  --popover: oklch(1 0 0);
  --popover-foreground: oklch(0.145 0 0);
  --primary: oklch(0.205 0 0);
  --primary-foreground: oklch(0.985 0 0);
  --secondary: oklch(0.97 0 0);
  --secondary-foreground: oklch(0.205 0 0);
  --muted: oklch(0.97 0 0);
  --muted-foreground: oklch(0.556 0 0);
  --accent: oklch(0.97 0 0);
  --accent-foreground: oklch(0.205 0 0);
  --destructive: oklch(0.577 0.245 27.325);
  --destructive-foreground: oklch(0.577 0.245 27.325);
  --border: oklch(0.922 0 0);
  --input: oklch(0.922 0 0);
  --ring: oklch(0.708 0 0);
  --chart-1: oklch(0.646 0.222 41.116);
  --chart-2: oklch(0.6 0.118 184.704);
  --chart-3: oklch(0.398 0.07 227.392);
  --chart-4: oklch(0.828 0.189 84.429);
  --chart-5: oklch(0.769 0.188 70.08);
  --radius: 0.625rem;
  --sidebar: oklch(0.985 0 0);
  --sidebar-foreground: oklch(0.145 0 0);
  --sidebar-primary: oklch(0.205 0 0);
  --sidebar-primary-foreground: oklch(0.985 0 0);
  --sidebar-accent: oklch(0.97 0 0);
  --sidebar-accent-foreground: oklch(0.205 0 0);
  --sidebar-border: oklch(0.922 0 0);
  --sidebar-ring: oklch(0.708 0 0);

/* Added high contrast color variables for better readability */
  --text-high-contrast: oklch(0.1 0 0);
  --text-medium-contrast: oklch(0.3 0 0);
  --text-low-contrast: oklch(0.5 0 0);
  --glass-text-primary: oklch(0.15 0 0);
  --glass-text-secondary: oklch(0.35 0 0);
  --glass-bg-primary: rgba(255, 255, 255, 0.25);
  --glass-bg-secondary: rgba(255, 255, 255, 0.15);
  --glass-border: rgba(255, 255, 255, 0.35);
}

.dark {
  --background: oklch(0.145 0 0);
  --foreground: oklch(0.985 0 0);
  --card: oklch(0.145 0 0);
  --card-foreground: oklch(0.985 0 0);
  --popover: oklch(0.145 0 0);
  --popover-foreground: oklch(0.985 0 0);
  --primary: oklch(0.985 0 0);
  --primary-foreground: oklch(0.205 0 0);
  --secondary: oklch(0.269 0 0);
  --secondary-foreground: oklch(0.985 0 0);
  --muted: oklch(0.269 0 0);
  --muted-foreground: oklch(0.708 0 0);
  --accent: oklch(0.269 0 0);
  --accent-foreground: oklch(0.985 0 0);
  --destructive: oklch(0.396 0.141 25.723);
  --destructive-foreground: oklch(0.637 0.237 25.331);
  --border: oklch(0.269 0 0);
  --input: oklch(0.269 0 0);
  --ring: oklch(0.439 0 0);
  --chart-1: oklch(0.488 0.243 264.376);
  --chart-2: oklch(0.696 0.17 162.48);
  --chart-3: oklch(0.769 0.188 70.08);
  --chart-4: oklch(0.627 0.265 303.9);
  --chart-5: oklch(0.645 0.246 16.439);
  --sidebar: oklch(0.205 0 0);
  --sidebar-foreground: oklch(0.985 0 0);
  --sidebar-primary: oklch(0.488 0.243 264.376);
  --sidebar-primary-foreground: oklch(0.985 0 0);
  --sidebar-accent: oklch(0.269 0 0);
  --sidebar-accent-foreground: oklch(0.985 0 0);
  --sidebar-border: oklch(0.269 0 0);
  --sidebar-ring: oklch(0.439 0 0);

/* Dark mode high contrast colors */
  --text-high-contrast: oklch(0.95 0 0);
  --text-medium-contrast: oklch(0.8 0 0);
  --text-low-contrast: oklch(0.6 0 0);
  --glass-text-primary: oklch(0.9 0 0);
  --glass-text-secondary: oklch(0.7 0 0);
  --glass-bg-primary: rgba(255, 255, 255, 0.15);
  --glass-bg-secondary: rgba(255, 255, 255, 0.08);
  --glass-border: rgba(255, 255, 255, 0.25);
}

@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-card: var(--card);
  --color-card-foreground: var(--card-foreground);
  --color-popover: var(--popover);
  --color-popover-foreground: var(--popover-foreground);
  --color-primary: var(--primary);
  --color-primary-foreground: var(--primary-foreground);
  --color-secondary: var(--secondary);
  --color-secondary-foreground: var(--secondary-foreground);
  --color-muted: var(--muted);
  --color-muted-foreground: var(--muted-foreground);
  --color-accent: var(--accent);
  --color-accent-foreground: var(--accent-foreground);
  --color-destructive: var(--destructive);
  --color-destructive-foreground: var(--destructive-foreground);
  --color-border: var(--border);
  --color-input: var(--input);
  --color-ring: var(--ring);
  --color-chart-1: var(--chart-1);
  --color-chart-2: var(--chart-2);
  --color-chart-3: var(--chart-3);
  --color-chart-4: var(--chart-4);
  --color-chart-5: var(--chart-5);
  --radius-sm: calc(var(--radius) - 4px);
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 4px);
  --color-sidebar: var(--sidebar);
  --color-sidebar-foreground: var(--sidebar-foreground);
  --color-sidebar-primary: var(--sidebar-primary);
  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
  --color-sidebar-accent: var(--sidebar-accent);
  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
  --color-sidebar-border: var(--sidebar-border);
  --color-sidebar-ring: var(--sidebar-ring);
}

@layer base {
  * {
    @apply border-border outline-ring/50;
  }
  body {
    @apply bg-background text-foreground;
  }
}

@layer utilities {
  /* Enhanced glass morphism with better contrast */
  .liquid-glass {
    background: var(--glass-bg-primary);
    backdrop-filter: blur(20px);
    border: 1px solid var(--glass-border);
    color: var(--glass-text-primary);
  }

.liquid-glass-hover {
    @apply hover:border-white/50 transition-all duration-300;
    background: var(--glass-bg-secondary);
  }

.liquid-glass-hover:hover {
    background: rgba(255, 255, 255, 0.3);
  }

/* High contrast text utilities */
  .text-high-contrast {
    color: var(--text-high-contrast);
  }

.text-medium-contrast {
    color: var(--text-medium-contrast);
  }

.text-low-contrast {
    color: var(--text-low-contrast);
  }

.glass-text-primary {
    color: var(--glass-text-primary);
  }

.glass-text-secondary {
    color: var(--glass-text-secondary);
  }

.glass-reflection {
    position: relative;
  }

.glass-reflection::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 50%;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.1) 0%, transparent 100%);
    border-radius: inherit;
    pointer-events: none;
  }

/* Enhanced scrollbar with better visibility */
  .scrollbar-thin {
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.4) transparent;
  }

.scrollbar-thin::-webkit-scrollbar {
    width: 8px;
    height: 8px;
  }

.scrollbar-thin::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.1);
    border-radius: 4px;
  }

.scrollbar-thin::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.4);
    border-radius: 4px;
    backdrop-filter: blur(10px);
    transition: all 0.2s ease;
    border: 1px solid rgba(255, 255, 255, 0.2);
  }

.scrollbar-thin::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.6);
    transform: scaleY(1.1);
  }

.scrollbar-thumb-white\/20::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.4);
  }

.scrollbar-track-transparent::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.05);
  }

/* Enhanced interactive elements with better contrast */
  .interactive-button {
    @apply transition-all duration-200 ease-out;
    transform-origin: center;
    color: var(--glass-text-primary);
  }

.interactive-button:hover {
    transform: scale(1.02);
    color: var(--text-high-contrast);
  }

.interactive-button:active {
    transform: scale(0.98);
  }

.focus-ring:focus {
    @apply outline-none ring-2 ring-blue-400/70 ring-offset-2 ring-offset-transparent;
  }

.selectable {
    @apply cursor-pointer select-none;
    color: var(--glass-text-primary);
  }

.selectable:hover {
    background: rgba(255, 255, 255, 0.15);
    color: var(--text-high-contrast);
  }

.selected {
    background: rgba(255, 255, 255, 0.25);
    @apply shadow-sm;
    color: var(--text-high-contrast);
  }

/* Enhanced glass morphism with better readability */
  .glass-morphism {
    background: var(--glass-bg-primary);
    backdrop-filter: blur(20px);
    border: 1px solid var(--glass-border);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
    transition: all 0.3s ease;
    color: var(--glass-text-primary);
  }

.glass-morphism:hover {
    background: rgba(255, 255, 255, 0.3);
    border-color: rgba(255, 255, 255, 0.5);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.2);
    transform: translateY(-2px);
    color: var(--text-high-contrast);
  }

.float-animation {
    animation: float 3s ease-in-out infinite;
  }

@keyframes float {
    0%,
    100% {
      transform: translateY(0px);
    }
    50% {
      transform: translateY(-5px);
    }
  }

.pulse-glow {
    animation: pulse-glow 2s ease-in-out infinite;
  }

@keyframes pulse-glow {
    0%,
    100% {
      box-shadow: 0 0 8px rgba(59, 130, 246, 0.6);
    }
    50% {
      box-shadow: 0 0 25px rgba(59, 130, 246, 0.9), 0 0 35px rgba(59, 130, 246, 0.5);
    }
  }

.loading-shimmer {
    background: linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.15) 0%,
      rgba(255, 255, 255, 0.4) 50%,
      rgba(255, 255, 255, 0.15) 100%
    );
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
  }

@keyframes shimmer {
    0% {
      background-position: -200% 0;
    }
    100% {
      background-position: 200% 0;
    }
  }

/* Enhanced slider with better visibility */
  .slider::-webkit-slider-thumb {
    appearance: none;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: linear-gradient(135deg, #3b82f6, #1d4ed8);
    cursor: pointer;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.2), 0 0 0 2px rgba(255, 255, 255, 0.3);
    transition: all 0.2s ease;
  }

.slider::-webkit-slider-thumb:hover {
    transform: scale(1.15);
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3), 0 0 0 3px rgba(255, 255, 255, 0.4);
  }

.slider::-moz-range-thumb {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: linear-gradient(135deg, #3b82f6, #1d4ed8);
    cursor: pointer;
    border: 2px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.2);
    transition: all 0.2s ease;
  }

.slider::-moz-range-thumb:hover {
    transform: scale(1.15);
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);
    border-color: rgba(255, 255, 255, 0.4);
  }

/* Enhanced glass card with better contrast */
  .glass-card {
    background: var(--glass-bg-primary);
    backdrop-filter: blur(20px);
    border: 1px solid var(--glass-border);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
    color: var(--glass-text-primary);
  }

.glass-card:hover {
    background: rgba(255, 255, 255, 0.3);
    border-color: rgba(255, 255, 255, 0.5);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.2);
    color: var(--text-high-contrast);
  }

@keyframes pulse-glow {
    0%,
    100% {
      box-shadow: 0 0 8px rgba(59, 130, 246, 0.6);
    }
    50% {
      box-shadow: 0 0 25px rgba(59, 130, 246, 0.9);
    }
  }

.animate-pulse-glow {
    animation: pulse-glow 2s ease-in-out infinite;
  }

/* Enhanced button styles with better contrast */
  .btn-glass {
    background: var(--glass-bg-primary);
    backdrop-filter: blur(15px);
    border: 1px solid var(--glass-border);
    color: var(--glass-text-primary);
    font-weight: 500;
    transition: all 0.2s ease;
  }

.btn-glass:hover {
    background: rgba(255, 255, 255, 0.3);
    border-color: rgba(255, 255, 255, 0.5);
    color: var(--text-high-contrast);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  }

.btn-glass:active {
    transform: translateY(0);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  }
}

/* Enhanced backdrop blur support */
@supports (backdrop-filter: blur(20px)) {
  .backdrop-blur-xl {
    backdrop-filter: blur(20px);
  }

.backdrop-blur-md {
    backdrop-filter: blur(12px);
  }

.backdrop-blur-sm {
    backdrop-filter: blur(6px);
  }
}
[V0_FILE]typescriptreact:file="components/home-menu.tsx" isEdit="true" isMerged="true"
"use client"

import { useState, useEffect } from "react"
import { Apple, Wifi, Battery, Settings, Search, Grid3X3, Calendar, Power, RotateCcw, Moon } from "lucide-react"

interface HomeMenuProps {
  onAppLaunch: (app: string) => void
  installedApps?: string[]
  onShowWidgets?: () => void
  onRestart?: () => void
  onShutdown?: () => void
}

export function HomeMenu({ onAppLaunch, installedApps = [], onShowWidgets, onRestart, onShutdown }: HomeMenuProps) {
  const [showAppleMenu, setShowAppleMenu] = useState(false)
  const [showControlCenter, setShowControlCenter] = useState(false)
  const [isDarkMode, setIsDarkMode] = useState(false)
  const [showSpotlight, setShowSpotlight] = useState(false)
  const [spotlightQuery, setSpotlightQuery] = useState("")
  const [currentTime, setCurrentTime] = useState(new Date())
  // Added time display dropdown state
  const [showTimeDropdown, setShowTimeDropdown] = useState(false)

useEffect(() => {
    const timer = setInterval(() => {
      setCurrentTime(new Date())
    }, 1000)
    return () => clearInterval(timer)
  }, [])

useEffect(() => {
    const handleKeyDown = (e: KeyboardEvent) => {
      if ((e.metaKey || e.ctrlKey) && e.key === " ") {
        e.preventDefault()
        setShowSpotlight(true)
      }
      if (e.key === "Escape") {
        setShowSpotlight(false)
        setSpotlightQuery("")
      }
    }

window.addEventListener("keydown", handleKeyDown)
    return () => window.removeEventListener("keydown", handleKeyDown)
  }, [])

const apps = [
    { name: "Finder", icon: "📁", color: "bg-blue-500" }, // Added Finder app
    { name: "Mail", icon: "📧", color: "bg-blue-600" }, // Added Mail app
    { name: "Calculator", icon: "🧮", color: "bg-gray-800" },
    { name: "Notes", icon: "📝", color: "bg-yellow-400" },
    { name: "Music", icon: "🎵", color: "bg-red-500" },
    { name: "Photos", icon: "🖼️", color: "bg-blue-500" },
    { name: "Browser", icon: "🌐", color: "bg-blue-600" },
    { name: "Settings", icon: "⚙️", color: "bg-gray-600" },
    { name: "App Store", icon: "🛍️", color: "bg-blue-600" },
    ...installedApps.slice(0, 3).map((app) => ({
      name: app,
      icon: "📱",
      color: "bg-purple-500",
    })),
  ]

const allApps = [
    "Finder", // Added Finder to searchable apps
    "Mail", // Added Mail to searchable apps
    "Calculator",
    "Notes",
    "Music",
    "Photos",
    "Browser",
    "Settings",
    "App Store",
    "Excel",
    "PowerPoint",
    "Word",
    "Photoshop",
    "Illustrator",
    "Premiere",
    "VS Code",
    "Terminal",
    "GitHub",
    "Netflix",
    "Spotify",
    "Chess",
    ...installedApps,
  ]

const filteredApps = allApps.filter((app) => app.toLowerCase().includes(spotlightQuery.toLowerCase())).slice(0, 8)

const handleSpotlightLaunch = (appName: string) => {
    onAppLaunch(appName.toLowerCase().replace(/\s+/g, ""))
    setShowSpotlight(false)
    setSpotlightQuery("")
  }

// Added system control functions
  const handleRestart = () => {
    setShowAppleMenu(false)
    if (onRestart) {
      onRestart()
    }
  }

const handleShutdown = () => {
    setShowAppleMenu(false)
    if (onShutdown) {
      onShutdown()
    }
  }

const handleSleep = () => {
    setShowAppleMenu(false)
    // Simulate sleep mode by dimming the screen
    document.body.style.filter = "brightness(0.1)"
    setTimeout(() => {
      document.body.style.filter = "brightness(1)"
    }, 2000)
  }

// Added world clock data for time dropdown
  const worldClocks = [
    { city: "Cupertino", timezone: "America/Los_Angeles", flag: "🇺🇸" },
    { city: "New York", timezone: "America/New_York", flag: "🇺🇸" },
    { city: "London", timezone: "Europe/London", flag: "🇬🇧" },
    { city: "Paris", timezone: "Europe/Paris", flag: "🇫🇷" },
    { city: "Tokyo", timezone: "Asia/Tokyo", flag: "🇯🇵" },
    { city: "Sydney", timezone: "Australia/Sydney", flag: "🇦🇺" },
  ]

return (
    <>
      {/* Menu Bar */}
      <div className="fixed top-0 left-0 right-0 h-8 bg-black/20 backdrop-blur-xl border-b border-white/10 flex items-center justify-between px-4 z-50">
        {/* Left side - Apple menu */}
        <div className="flex items-center gap-4">
          <button
            onClick={() => setShowAppleMenu(!showAppleMenu)}
            className="p-1 hover:bg-white/10 rounded transition-colors transform hover:scale-105"
          >
            <Apple className="w-4 h-4 text-white" />
          </button>
          <span className="text-sm font-medium text-white">macOS Tahoe</span>
        </div>

{/* Center - Enhanced time display and spotlight */}
        <div className="flex items-center gap-4">
          <button
            onClick={() => setShowSpotlight(true)}
            className="p-1 hover:bg-white/10 rounded transition-colors transform hover:scale-105"
            title="Spotlight Search (⌘+Space)"
          >
            <Search className="w-4 h-4 text-white" />
          </button>
          {/* Enhanced time display with dropdown */}
          <button
            onClick={() => setShowTimeDropdown(!showTimeDropdown)}
            className="flex items-center gap-2 px-2 py-1 hover:bg-white/10 rounded transition-colors transform hover:scale-105"
            title="Click for world clock"
          >
            <Calendar className="w-3 h-3 text-white/80" />
            <div className="text-sm text-white font-medium">
              {currentTime.toLocaleDateString([], { weekday: "short", month: "short", day: "numeric" })}
            </div>
            <div className="text-sm text-white font-bold">
              {currentTime.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" })}
            </div>
          </button>
        </div>

{/* Right side - Control Center */}
        <div className="flex items-center gap-2">
          {onShowWidgets && (
            <button
              onClick={onShowWidgets}
              className="p-1 hover:bg-white/10 rounded transition-colors transform hover:scale-105"
              title="Show Widgets"
            >
              <Grid3X3 className="w-4 h-4 text-white" />
            </button>
          )}
          <button className="p-1 hover:bg-white/10 rounded transition-colors transform hover:scale-105">
            <Wifi className="w-4 h-4 text-white" />
          </button>
          <button className="p-1 hover:bg-white/10 rounded transition-colors transform hover:scale-105">
            <Battery className="w-4 h-4 text-white" />
          </button>
          <button
            onClick={() => setShowControlCenter(!showControlCenter)}
            className="p-1 hover:bg-white/10 rounded transition-colors transform hover:scale-105"
          >
            <Settings className="w-4 h-4 text-white" />
          </button>
        </div>
      </div>

{/* Enhanced Apple Menu with system controls */}
      {showAppleMenu && (
        <div className="fixed top-8 left-4 w-64 bg-white/20 backdrop-blur-xl border border-white/30 rounded-xl shadow-2xl z-50 animate-in slide-in-from-top-2 duration-200">
          <div className="p-2">
            <div className="space-y-1">
              <button
                onClick={() => {
                  onAppLaunch("Settings")
                  setShowAppleMenu(false)
                }}
                className="w-full flex items-center gap-3 p-3 hover:bg-white/10 rounded-lg transition-colors text-left text-white/90"
              >
                <Settings className="w-4 h-4" />
                <span className="text-sm">System Preferences...</span>
              </button>

<button
                onClick={handleSleep}
                className="w-full flex items-center gap-3 p-3 hover:bg-white/10 rounded-lg transition-colors text-left text-white/90"
              >
                <Moon className="w-4 h-4" />
                <span className="text-sm">Sleep</span>
              </button>

<button
                onClick={handleRestart}
                className="w-full flex items-center gap-3 p-3 hover:bg-white/10 rounded-lg transition-colors text-left text-white/90"
              >
                <RotateCcw className="w-4 h-4" />
                <span className="text-sm">Restart...</span>
              </button>

<button
                onClick={handleShutdown}
                className="w-full flex items-center gap-3 p-3 hover:bg-white/10 rounded-lg transition-colors text-left text-white/90"
              >
                <Power className="w-4 h-4" />
                <span className="text-sm">Shut Down...</span>
              </button>
            </div>
          </div>
        </div>
      )}

{/* Spotlight Search Modal */}
      {showSpotlight && (
        <div className="fixed inset-0 bg-black/50 flex items-start justify-center pt-32 z-50">
          <div className="w-full max-w-2xl bg-white/20 backdrop-blur-xl border border-white/30 rounded-xl shadow-2xl animate-in slide-in-from-top-4 duration-300">
            <div className="p-4">
              <div className="relative mb-4">
                <Search className="absolute left-4 top-1/2 transform -translate-y-1/2 w-5 h-5 text-white/60" />
                <input
                  type="text"
                  placeholder="Spotlight Search"
                  value={spotlightQuery}
                  onChange={(e) => setSpotlightQuery(e.target.value)}
                  className="w-full pl-12 pr-4 py-4 bg-transparent text-white placeholder-white/60 text-lg focus:outline-none"
                  autoFocus
                />
              </div>

{spotlightQuery && (
                <div className="space-y-2 max-h-64 overflow-y-auto">
                  {filteredApps.map((app, index) => (
                    <button
                      key={app}
                      onClick={() => handleSpotlightLaunch(app)}
                      className="w-full flex items-center gap-4 p-3 hover:bg-white/10 rounded-lg transition-colors text-left"
                    >
                      <div className="w-8 h-8 bg-blue-500 rounded-lg flex items-center justify-center text-white font-bold">
                        {app[0]}
                      </div>
                      <div>
                        <div className="text-white font-medium">{app}</div>
                        <div className="text-white/60 text-sm">Application</div>
                      </div>
                    </button>
                  ))}
                </div>
              )}
            </div>
          </div>
        </div>
      )}

{/* Added enhanced time dropdown with world clock */}
      {showTimeDropdown && (
        <div className="fixed top-8 left-1/2 transform -translate-x-1/2 w-80 bg-white/20 backdrop-blur-xl border border-white/30 rounded-xl shadow-2xl z-50 animate-in slide-in-from-top-2 duration-200">
          <div className="p-4">
            {/* Current Date and Time */}
            <div className="text-center mb-6 pb-4 border-b border-white/20">
              <div className="text-2xl font-bold text-white mb-1">
                {currentTime.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit", second: "2-digit" })}
              </div>
              <div className="text-sm text-white/80">
                {currentTime.toLocaleDateString([], {
                  weekday: "long",
                  year: "numeric",
                  month: "long",
                  day: "numeric",
                })}
              </div>
            </div>

{/* World Clock */}
            <div>
              <h3 className="text-white font-medium mb-3 flex items-center gap-2">
                <span>🌍</span>
                World Clock
              </h3>
              <div className="space-y-2">
                {worldClocks.map((clock) => (
                  <div
                    key={clock.timezone}
                    className="flex items-center justify-between p-2 hover:bg-white/10 rounded-lg transition-colors"
                  >
                    <div className="flex items-center gap-3">
                      <span className="text-lg">{clock.flag}</span>
                      <span className="text-sm text-white">{clock.city}</span>
                    </div>
                    <div className="text-sm font-mono text-white/90">
                      {new Date().toLocaleTimeString("en-US", {
                        timeZone: clock.timezone,
                        hour: "2-digit",
                        minute: "2-digit",
                      })}
                    </div>
                  </div>
                ))}
              </div>
            </div>

{/* Quick Actions */}
            <div className="mt-4 pt-4 border-t border-white/20">
              <div className="grid grid-cols-2 gap-2">
                <button
                  onClick={() => {
                    onAppLaunch("Calendar")
                    setShowTimeDropdown(false)
                  }}
                  className="p-2 bg-white/10 hover:bg-white/20 rounded-lg transition-colors text-sm text-white flex items-center gap-2"
                >
                  <Calendar className="w-4 h-4" />
                  Calendar
                </button>
                <button className="p-2 bg-white/10 hover:bg-white/20 rounded-lg transition-colors text-sm text-white flex items-center gap-2">
                  <span>⏰</span>
                  Alarms
                </button>
              </div>
            </div>
          </div>
        </div>
      )}

{/* Enhanced Dock with better animations */}
      <div className="fixed bottom-4 left-1/2 transform -translate-x-1/2 z-40">
        <div className="flex items-center gap-2 px-4 py-3 bg-white/20 backdrop-blur-xl border border-white/30 rounded-2xl shadow-2xl">
          {apps.map((app, index) => (
            <button
              key={index}
              onClick={() => onAppLaunch(app.name === "App Store" ? "App Store" : app.name)}
              className={`w-12 h-12 ${app.color} rounded-xl flex items-center justify-center text-xl hover:scale-125 hover:-translate-y-2 transition-all duration-300 shadow-lg hover:shadow-2xl transform-gpu`}
              title={app.name}
              style={{
                transitionDelay: `${index * 50}ms`,
              }}
            >
              {app.icon}
            </button>
          ))}
        </div>
      </div>

{/* Click outside to close menus */}
      {(showAppleMenu || showControlCenter || showTimeDropdown || showSpotlight) && (
        <div
          className="fixed inset-0 z-30"
          onClick={() => {
            setShowAppleMenu(false)
            setShowControlCenter(false)
            setShowTimeDropdown(false)
            setShowSpotlight(false)
            setSpotlightQuery("")
          }}
        />
      )}
    </>
  )
}
[V0_FILE]typescriptreact:file="components/widgets/widget-system.tsx" isMerged="true"
"use client"

import { useState, useEffect } from "react"
import { X, Plus, Calendar, Clock, Thermometer, Activity, Music, Mail, Calculator } from "lucide-react"

interface Widget {
  id: string
  type: string
  title: string
  size: "small" | "medium" | "large"
  position: { x: number; y: number }
  data?: any
}

interface WidgetSystemProps {
  onClose: () => void
}

export function WidgetSystem({ onClose }: WidgetSystemProps) {
  const [widgets, setWidgets] = useState<Widget[]>([
    {
      id: "clock-1",
      type: "clock",
      title: "World Clock",
      size: "medium",
      position: { x: 50, y: 50 },
    },
    {
      id: "weather-1",
      type: "weather",
      title: "Weather",
      size: "large",
      position: { x: 300, y: 50 },
    },
    {
      id: "calendar-1",
      type: "calendar",
      title: "Calendar",
      size: "medium",
      position: { x: 50, y: 200 },
    },
  ])
  const [showWidgetGallery, setShowWidgetGallery] = useState(false)
  const [currentTime, setCurrentTime] = useState(new Date())

useEffect(() => {
    const timer = setInterval(() => {
      setCurrentTime(new Date())
    }, 1000)
    return () => clearInterval(timer)
  }, [])

const availableWidgets = [
    { type: "clock", title: "Clock", icon: Clock, description: "Display current time and world clocks" },
    { type: "weather", title: "Weather", icon: Thermometer, description: "Current weather and forecast" },
    { type: "calendar", title: "Calendar", icon: Calendar, description: "Upcoming events and schedule" },
    { type: "activity", title: "Activity", icon: Activity, description: "System performance monitor" },
    { type: "music", title: "Music", icon: Music, description: "Now playing and music controls" },
    { type: "mail", title: "Mail", icon: Mail, description: "Recent emails and notifications" },
    { type: "calculator", title: "Calculator", icon: Calculator, description: "Quick calculations" },
  ]

const addWidget = (type: string) => {
    const newWidget: Widget = {
      id: `${type}-${Date.now()}`,
      type,
      title: availableWidgets.find((w) => w.type === type)?.title || type,
      size: "medium",
      position: { x: Math.random() * 200 + 100, y: Math.random() * 200 + 100 },
    }
    setWidgets((prev) => [...prev, newWidget])
    setShowWidgetGallery(false)
  }

const removeWidget = (id: string) => {
    setWidgets((prev) => prev.filter((w) => w.id !== id))
  }

const renderWidget = (widget: Widget) => {
    const sizeClasses = {
      small: "w-32 h-32",
      medium: "w-48 h-48",
      large: "w-64 h-64",
    }

switch (widget.type) {
      case "clock":
        return (
          <div className={`${sizeClasses[widget.size]} glass-morphism rounded-2xl p-4 relative group`}>
            <button
              onClick={() => removeWidget(widget.id)}
              className="absolute top-2 right-2 w-6 h-6 bg-red-500/80 hover:bg-red-500 rounded-full flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity"
            >
              <X className="w-3 h-3 text-white" />
            </button>
            <div className="text-center h-full flex flex-col justify-center">
              <div className="text-2xl font-bold text-high-contrast mb-2">
                {currentTime.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" })}
              </div>
              <div className="text-sm text-medium-contrast">
                {currentTime.toLocaleDateString([], { weekday: "long", month: "short", day: "numeric" })}
              </div>
              <div className="mt-4 space-y-1">
                <div className="text-xs text-low-contrast">
                  New York:{" "}
                  {new Date().toLocaleTimeString("en-US", {
                    timeZone: "America/New_York",
                    hour: "2-digit",
                    minute: "2-digit",
                  })}
                </div>
                <div className="text-xs text-low-contrast">
                  London:{" "}
                  {new Date().toLocaleTimeString("en-US", {
                    timeZone: "Europe/London",
                    hour: "2-digit",
                    minute: "2-digit",
                  })}
                </div>
                <div className="text-xs text-low-contrast">
                  Tokyo:{" "}
                  {new Date().toLocaleTimeString("en-US", {
                    timeZone: "Asia/Tokyo",
                    hour: "2-digit",
                    minute: "2-digit",
                  })}
                </div>
              </div>
            </div>
          </div>
        )

case "weather":
        return (
          <div className={`${sizeClasses[widget.size]} glass-morphism rounded-2xl p-4 relative group`}>
            <button
              onClick={() => removeWidget(widget.id)}
              className="absolute top-2 right-2 w-6 h-6 bg-red-500/80 hover:bg-red-500 rounded-full flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity"
            >
              <X className="w-3 h-3 text-white" />
            </button>
            <div className="h-full flex flex-col">
              <div className="flex items-center justify-between mb-4">
                <h3 className="font-semibold text-high-contrast">San Francisco</h3>
                <div className="text-2xl">☀️</div>
              </div>
              <div className="text-3xl font-bold text-high-contrast mb-2">72°F</div>
              <div className="text-sm text-medium-contrast mb-4">Sunny</div>
              <div className="flex-1 space-y-2">
                <div className="flex justify-between text-xs text-low-contrast">
                  <span>Today</span>
                  <span>72° / 58°</span>
                </div>
                <div className="flex justify-between text-xs text-low-contrast">
                  <span>Tomorrow</span>
                  <span>75° / 61°</span>
                </div>
                <div className="flex justify-between text-xs text-low-contrast">
                  <span>Wednesday</span>
                  <span>68° / 55°</span>
                </div>
              </div>
            </div>
          </div>
        )

case "calendar":
        return (
          <div className={`${sizeClasses[widget.size]} glass-morphism rounded-2xl p-4 relative group`}>
            <button
              onClick={() => removeWidget(widget.id)}
              className="absolute top-2 right-2 w-6 h-6 bg-red-500/80 hover:bg-red-500 rounded-full flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity"
            >
              <X className="w-3 h-3 text-white" />
            </button>
            <div className="h-full flex flex-col">
              <h3 className="font-semibold text-high-contrast mb-4">Today</h3>
              <div className="space-y-3 flex-1">
                <div className="flex items-start gap-3">
                  <div className="w-2 h-2 bg-blue-500 rounded-full mt-2"></div>
                  <div>
                    <div className="text-sm font-medium text-high-contrast">Team Meeting</div>
                    <div className="text-xs text-medium-contrast">10:00 AM - 11:00 AM</div>
                  </div>
                </div>
                <div className="flex items-start gap-3">
                  <div className="w-2 h-2 bg-green-500 rounded-full mt-2"></div>
                  <div>
                    <div className="text-sm font-medium text-high-contrast">Lunch with Sarah</div>
                    <div className="text-xs text-medium-contrast">12:30 PM - 1:30 PM</div>
                  </div>
                </div>
                <div className="flex items-start gap-3">
                  <div className="w-2 h-2 bg-orange-500 rounded-full mt-2"></div>
                  <div>
                    <div className="text-sm font-medium text-high-contrast">Project Review</div>
                    <div className="text-xs text-medium-contrast">3:00 PM - 4:00 PM</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        )

case "activity":
        return (
          <div className={`${sizeClasses[widget.size]} glass-morphism rounded-2xl p-4 relative group`}>
            <button
              onClick={() => removeWidget(widget.id)}
              className="absolute top-2 right-2 w-6 h-6 bg-red-500/80 hover:bg-red-500 rounded-full flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity"
            >
              <X className="w-3 h-3 text-white" />
            </button>
            <div className="h-full flex flex-col">
              <h3 className="font-semibold text-high-contrast mb-4">System Activity</h3>
              <div className="space-y-4 flex-1">
                <div>
                  <div className="flex justify-between text-sm mb-1">
                    <span className="text-medium-contrast">CPU</span>
                    <span className="text-high-contrast">23%</span>
                  </div>
                  <div className="w-full bg-white/20 rounded-full h-2">
                    <div className="bg-blue-500 h-2 rounded-full" style={{ width: "23%" }}></div>
                  </div>
                </div>
                <div>
                  <div className="flex justify-between text-sm mb-1">
                    <span className="text-medium-contrast">Memory</span>
                    <span className="text-high-contrast">67%</span>
                  </div>
                  <div className="w-full bg-white/20 rounded-full h-2">
                    <div className="bg-green-500 h-2 rounded-full" style={{ width: "67%" }}></div>
                  </div>
                </div>
                <div>
                  <div className="flex justify-between text-sm mb-1">
                    <span className="text-medium-contrast">Disk</span>
                    <span className="text-high-contrast">45%</span>
                  </div>
                  <div className="w-full bg-white/20 rounded-full h-2">
                    <div className="bg-orange-500 h-2 rounded-full" style={{ width: "45%" }}></div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        )

case "music":
        return (
          <div className={`${sizeClasses[widget.size]} glass-morphism rounded-2xl p-4 relative group`}>
            <button
              onClick={() => removeWidget(widget.id)}
              className="absolute top-2 right-2 w-6 h-6 bg-red-500/80 hover:bg-red-500 rounded-full flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity"
            >
              <X className="w-3 h-3 text-white" />
            </button>
            <div className="h-full flex flex-col">
              <div className="flex items-center gap-3 mb-4">
                <div className="w-12 h-12 bg-gradient-to-br from-purple-500 to-pink-500 rounded-lg flex items-center justify-center">
                  <Music className="w-6 h-6 text-white" />
                </div>
                <div className="flex-1 min-w-0">
                  <div className="text-sm font-medium text-high-contrast truncate">Bohemian Rhapsody</div>
                  <div className="text-xs text-medium-contrast truncate">Queen</div>
                </div>
              </div>
              <div className="flex items-center justify-center gap-4">
                <button className="w-8 h-8 bg-white/20 hover:bg-white/30 rounded-full flex items-center justify-center transition-colors">
                  <span className="text-white text-sm">⏮</span>
                </button>
                <button className="w-10 h-10 bg-white/30 hover:bg-white/40 rounded-full flex items-center justify-center transition-colors">
                  <span className="text-white text-lg">⏸</span>
                </button>
                <button className="w-8 h-8 bg-white/20 hover:bg-white/30 rounded-full flex items-center justify-center transition-colors">
                  <span className="text-white text-sm">⏭</span>
                </button>
              </div>
            </div>
          </div>
        )

case "mail":
        return (
          <div className={`${sizeClasses[widget.size]} glass-morphism rounded-2xl p-4 relative group`}>
            <button
              onClick={() => removeWidget(widget.id)}
              className="absolute top-2 right-2 w-6 h-6 bg-red-500/80 hover:bg-red-500 rounded-full flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity"
            >
              <X className="w-3 h-3 text-white" />
            </button>
            <div className="h-full flex flex-col">
              <div className="flex items-center justify-between mb-4">
                <h3 className="font-semibold text-high-contrast">Mail</h3>
                <div className="w-5 h-5 bg-red-500 rounded-full flex items-center justify-center">
                  <span className="text-xs text-white font-bold">3</span>
                </div>
              </div>
              <div className="space-y-3 flex-1">
                <div className="flex items-start gap-3">
                  <div className="w-2 h-2 bg-blue-500 rounded-full mt-2"></div>
                  <div className="flex-1 min-w-0">
                    <div className="text-sm font-medium text-high-contrast truncate">Project Update</div>
                    <div className="text-xs text-medium-contrast truncate">john@company.com</div>
                  </div>
                </div>
                <div className="flex items-start gap-3">
                  <div className="w-2 h-2 bg-green-500 rounded-full mt-2"></div>
                  <div className="flex-1 min-w-0">
                    <div className="text-sm font-medium text-high-contrast truncate">Meeting Notes</div>
                    <div className="text-xs text-medium-contrast truncate">sarah@team.com</div>
                  </div>
                </div>
                <div className="flex items-start gap-3">
                  <div className="w-2 h-2 bg-orange-500 rounded-full mt-2"></div>
                  <div className="flex-1 min-w-0">
                    <div className="text-sm font-medium text-high-contrast truncate">Weekly Report</div>
                    <div className="text-xs text-medium-contrast truncate">manager@company.com</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        )

case "calculator":
        return (
          <div className={`${sizeClasses[widget.size]} glass-morphism rounded-2xl p-4 relative group`}>
            <button
              onClick={() => removeWidget(widget.id)}
              className="absolute top-2 right-2 w-6 h-6 bg-red-500/80 hover:bg-red-500 rounded-full flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity"
            >
              <X className="w-3 h-3 text-white" />
            </button>
            <div className="h-full flex flex-col">
              <div className="bg-black/20 rounded-lg p-3 mb-3">
                <div className="text-right text-lg font-mono text-high-contrast">1,234.56</div>
              </div>
              <div className="grid grid-cols-3 gap-2 flex-1">
                {["C", "±", "%", "7", "8", "9", "4", "5", "6", "1", "2", "3", "0"].map((btn, i) => (
                  <button
                    key={i}
                    className="bg-white/20 hover:bg-white/30 rounded-lg text-sm font-medium text-high-contrast transition-colors"
                  >
                    {btn}
                  </button>
                ))}
              </div>
            </div>
          </div>
        )

default:
        return (
          <div className={`${sizeClasses[widget.size]} glass-morphism rounded-2xl p-4 relative group`}>
            <button
              onClick={() => removeWidget(widget.id)}
              className="absolute top-2 right-2 w-6 h-6 bg-red-500/80 hover:bg-red-500 rounded-full flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity"
            >
              <X className="w-3 h-3 text-white" />
            </button>
            <div className="text-center text-high-contrast">
              <div className="text-lg font-semibold">{widget.title}</div>
              <div className="text-sm text-medium-contrast">Widget content</div>
            </div>
          </div>
        )
    }
  }

return (
    <div className="fixed inset-0 bg-black/30 backdrop-blur-sm z-50 flex items-center justify-center">
      <div className="w-full h-full relative overflow-hidden">
        {/* Widget Gallery Button */}
        <button
          onClick={() => setShowWidgetGallery(true)}
          className="fixed top-20 right-6 w-12 h-12 bg-blue-500/80 hover:bg-blue-500 rounded-full flex items-center justify-center transition-colors shadow-lg"
        >
          <Plus className="w-6 h-6 text-white" />
        </button>

{/* Close Button */}
        <button
          onClick={onClose}
          className="fixed top-20 left-6 w-12 h-12 bg-red-500/80 hover:bg-red-500 rounded-full flex items-center justify-center transition-colors shadow-lg"
        >
          <X className="w-6 h-6 text-white" />
        </button>

{/* Widgets */}
        {widgets.map((widget) => (
          <div
            key={widget.id}
            className="absolute"
            style={{
              left: `${widget.position.x}px`,
              top: `${widget.position.y}px`,
            }}
          >
            {renderWidget(widget)}
          </div>
        ))}

{/* Widget Gallery */}
        {showWidgetGallery && (
          <div className="fixed inset-0 bg-black/50 backdrop-blur-sm flex items-center justify-center z-60">
            <div className="w-full max-w-2xl mx-4 bg-white/90 backdrop-blur-xl border border-white/30 rounded-2xl shadow-2xl">
              <div className="p-6">
                <div className="flex items-center justify-between mb-6">
                  <h2 className="text-2xl font-bold text-gray-800">Widget Gallery</h2>
                  <button
                    onClick={() => setShowWidgetGallery(false)}
                    className="w-8 h-8 bg-gray-200 hover:bg-gray-300 rounded-full flex items-center justify-center transition-colors"
                  >
                    <X className="w-4 h-4 text-gray-600" />
                  </button>
                </div>
                <div className="grid grid-cols-2 md:grid-cols-3 gap-4">
                  {availableWidgets.map((widget) => (
                    <button
                      key={widget.type}
                      onClick={() => addWidget(widget.type)}
                      className="p-4 bg-gray-50 hover:bg-gray-100 rounded-xl transition-colors text-left"
                    >
                      <widget.icon className="w-8 h-8 text-blue-500 mb-2" />
                      <div className="font-medium text-gray-800">{widget.title}</div>
                      <div className="text-sm text-gray-600">{widget.description}</div>
                    </button>
                  ))}
                </div>
              </div>
            </div>
          </div>
        )}
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/widgets/time-widget.tsx" isMerged="true"
"use client"

import { useState, useEffect } from "react"
import { Globe } from "lucide-react"

interface TimeWidgetProps {
  size?: "small" | "medium" | "large"
  showDate?: boolean
  showWorldClock?: boolean
  className?: string
}

export function TimeWidget({
  size = "medium",
  showDate = true,
  showWorldClock = false,
  className = "",
}: TimeWidgetProps) {
  const [currentTime, setCurrentTime] = useState(new Date())

useEffect(() => {
    const timer = setInterval(() => {
      setCurrentTime(new Date())
    }, 1000)
    return () => clearInterval(timer)
  }, [])

const timeZones = [
    { name: "New York", timezone: "America/New_York" },
    { name: "London", timezone: "Europe/London" },
    { name: "Tokyo", timezone: "Asia/Tokyo" },
    { name: "Sydney", timezone: "Australia/Sydney" },
  ]

const sizeClasses = {
    small: "text-sm",
    medium: "text-base",
    large: "text-lg",
  }

return (
    <div className={`glass-morphism rounded-xl p-4 ${className}`}>
      {/* Main Time Display */}
      <div className="text-center mb-4">
        <div
          className={`font-bold text-high-contrast ${size === "large" ? "text-4xl" : size === "medium" ? "text-2xl" : "text-xl"} mb-2`}
        >
          {currentTime.toLocaleTimeString([], {
            hour: "2-digit",
            minute: "2-digit",
            second: size === "large" ? "2-digit" : undefined,
          })}
        </div>

{showDate && (
          <div className={`text-medium-contrast ${sizeClasses[size]}`}>
            {currentTime.toLocaleDateString([], {
              weekday: "long",
              year: "numeric",
              month: "long",
              day: "numeric",
            })}
          </div>
        )}
      </div>

{/* World Clock */}
      {showWorldClock && (
        <div className="space-y-2 border-t border-white/20 pt-4">
          <div className="flex items-center gap-2 mb-3">
            <Globe className="w-4 h-4 text-medium-contrast" />
            <span className="text-sm font-medium text-medium-contrast">World Clock</span>
          </div>
          {timeZones.map((tz) => (
            <div key={tz.timezone} className="flex justify-between items-center">
              <span className="text-sm text-medium-contrast">{tz.name}</span>
              <span className="text-sm font-mono text-high-contrast">
                {new Date().toLocaleTimeString("en-US", {
                  timeZone: tz.timezone,
                  hour: "2-digit",
                  minute: "2-digit",
                })}
              </span>
            </div>
          ))}
        </div>
      )}
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/page.tsx" isFixed="true" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

import type React from "react"

import { useState } from "react"
import { MacOSWindow } from "@/components/macos-window"
import { Sidebar } from "@/components/sidebar"
import { Toolbar } from "@/components/toolbar"
import { ContentArea } from "@/components/content-area"
import { HomeMenu } from "@/components/home-menu"
import { Calculator } from "@/components/apps/calculator"
import { Notes } from "@/components/apps/notes"
import { Music } from "@/components/apps/music"
import { Photos } from "@/components/apps/photos"
import { Settings } from "@/components/apps/settings"
import { AppStore } from "@/components/apps/app-store"
import { Excel } from "@/components/apps/excel"
import { PowerPoint } from "@/components/apps/powerpoint"
import { Word } from "@/components/apps/word"
import { Photoshop } from "@/components/apps/photoshop"
import { Illustrator } from "@/components/apps/illustrator"
import { Premiere } from "@/components/apps/premiere"
import { VSCode } from "@/components/apps/vscode"
import { Terminal } from "@/components/apps/terminal"
import { GitHub } from "@/components/apps/github"
import { Netflix } from "@/components/apps/netflix"
import { Spotify } from "@/components/apps/spotify"
import { Chess } from "@/components/apps/chess"
import { Browser } from "@/components/apps/browser"
import { Mail } from "@/components/apps/mail"
import { Finder } from "@/components/apps/finder"
import { WallpaperSelector } from "@/components/wallpaper-selector"
import { WidgetSystem } from "@/components/widgets/widget-system"

interface Wallpaper {
  id: string
  name: string
  type: "gradient" | "image" | "animated"
  preview: string
  className: string
}

// Updated wallpaper configurations to match official macOS backgrounds
const wallpaperConfigs: { [key: string]: { className: string; animated: boolean } } = {
  "tahoe-default": {
    className: "bg-gradient-to-br from-blue-400 via-purple-500 to-pink-500",
    animated: true,
  },
  monterey: {
    className: "bg-gradient-to-br from-purple-600 via-blue-600 to-teal-500",
    animated: false,
  },
  "big-sur": {
    className: "bg-gradient-to-br from-pink-400 via-purple-400 to-indigo-600",
    animated: false,
  },
  ventura: {
    className: "bg-gradient-to-br from-blue-500 via-cyan-400 to-teal-400",
    animated: true,
  },
  sonoma: {
    className: "bg-gradient-to-br from-orange-400 via-red-500 to-pink-600",
    animated: false,
  },
  sequoia: {
    className: "bg-gradient-to-br from-green-500 via-emerald-500 to-teal-600",
    animated: true,
  },
  catalina: {
    className: "bg-gradient-to-br from-blue-600 via-purple-600 to-indigo-800",
    animated: false,
  },
  "mojave-light": {
    className: "bg-gradient-to-br from-yellow-300 via-orange-400 to-red-500",
    animated: false,
  },
  "mojave-dark": {
    className: "bg-gradient-to-br from-gray-800 via-gray-900 to-black",
    animated: true,
  },
  "high-sierra": {
    className: "bg-gradient-to-br from-blue-400 via-indigo-500 to-purple-600",
    animated: false,
  },
  sierra: {
    className: "bg-gradient-to-br from-gray-400 via-gray-600 to-gray-800",
    animated: false,
  },
  "el-capitan": {
    className: "bg-gradient-to-br from-blue-300 via-blue-500 to-blue-700",
    animated: false,
  },
  yosemite: {
    className: "bg-gradient-to-br from-green-400 via-blue-500 to-purple-600",
    animated: true,
  },
  mavericks: {
    className: "bg-gradient-to-br from-blue-500 via-teal-500 to-cyan-600",
    animated: false,
  },
  "mountain-lion": {
    className: "bg-gradient-to-br from-gray-600 via-gray-700 to-gray-900",
    animated: false,
  },
  lion: {
    className: "bg-gradient-to-br from-purple-500 via-indigo-600 to-blue-700",
    animated: true,
  },
}

export default function Home() {
  const [activeView, setActiveView] = useState("Home")
  const [launchedApps, setLaunchedApps] = useState<string[]>([])
  const [installedApps, setInstalledApps] = useState<string[]>([])
  const [currentWallpaper, setCurrentWallpaper] = useState("tahoe-default")
  const [showWallpaperSelector, setShowWallpaperSelector] = useState(false)
  const [showWidgets, setShowWidgets] = useState(false)
  const [windowPositions, setWindowPositions] = useState<{ [key: string]: { x: number; y: number; zIndex: number } }>(
    {},
  )
  const [draggedWindow, setDraggedWindow] = useState<string | null>(null)
  const [maxZIndex, setMaxZIndex] = useState(1000)
  // Added system state management
  const [isRestarting, setIsRestarting] = useState(false)
  const [isShuttingDown, setIsShuttingDown] = useState(false)

// Added system control handlers
  const handleRestart = () => {
    setIsRestarting(true)
    // Simulate restart process
    setTimeout(() => {
      // Reset all app states
      setLaunchedApps([])
      setActiveView("Home")
      setWindowPositions({})
      setIsRestarting(false)
      // Show restart animation
      document.body.style.filter = "brightness(0)"
      setTimeout(() => {
        document.body.style.filter = "brightness(1)"
      }, 1000)
    }, 2000)
  }

const handleShutdown = () => {
    setIsShuttingDown(true)
    // Simulate shutdown process
    setTimeout(() => {
      document.body.style.filter = "brightness(0)"
      document.body.innerHTML =
        '<div style="position: fixed; inset: 0; background: black; display: flex; align-items: center; justify-content: center; color: white; font-size: 24px;">System Shut Down</div>'
    }, 2000)
  }

const handleAppLaunch = (appName: string) => {
    if (!launchedApps.includes(appName)) {
      setLaunchedApps((prev) => [...prev, appName])
    }
    setActiveView(appName)
  }

const handleAppClose = (appName: string) => {
    setLaunchedApps((prev) => prev.filter((app) => app !== appName))
    if (activeView === appName) {
      setActiveView("Home")
    }
  }

const handleAppInstall = (appId: string) => {
    if (!installedApps.includes(appId)) {
      setInstalledApps((prev) => [...prev, appId])

// Auto-launch the app in a new tab after installation
      setTimeout(() => {
        handleAppLaunch(appId)
      }, 500)
    }
  }

const handleWallpaperChange = (wallpaper: Wallpaper) => {
    setCurrentWallpaper(wallpaper.id)
  }

const handleDesktopRightClick = (e: React.MouseEvent) => {
    e.preventDefault()
    setShowWallpaperSelector(true)
  }

const handleWindowDrag = (appName: string, deltaX: number, deltaY: number) => {
    setWindowPositions((prev) => ({
      ...prev,
      [appName]: {
        ...prev[appName],
        x: (prev[appName]?.x || 0) + deltaX,
        y: (prev[appName]?.y || 0) + deltaY,
        zIndex: prev[appName]?.zIndex || maxZIndex,
      },
    }))
  }

const handleWindowFocus = (appName: string) => {
    const newZIndex = maxZIndex + 1
    setMaxZIndex(newZIndex)
    setWindowPositions((prev) => ({
      ...prev,
      [appName]: {
        ...prev[appName],
        x: prev[appName]?.x || 0,
        y: prev[appName]?.y || 0,
        zIndex: newZIndex,
      },
    }))
    setActiveView(appName)
  }

const renderActiveContent = () => {
    switch (activeView) {
      case "Mail":
        return <Mail onClose={() => handleAppClose("Mail")} />
      case "Finder":
        return <Finder onClose={() => handleAppClose("Finder")} />
      case "Calculator":
        return <Calculator onClose={() => handleAppClose("Calculator")} />
      case "Notes":
        return <Notes onClose={() => handleAppClose("Notes")} />
      case "Music":
        return <Music onClose={() => handleAppClose("Music")} />
      case "Photos":
        return <Photos onClose={() => handleAppClose("Photos")} />
      case "Settings":
        return <Settings onClose={() => handleAppClose("Settings")} />
      case "App Store":
        return <AppStore onClose={() => handleAppClose("App Store")} onAppInstall={handleAppInstall} />
      case "Browser":
        return <Browser onClose={() => handleAppClose("Browser")} />
      case "excel":
        return <Excel onClose={() => handleAppClose("excel")} />
      case "powerpoint":
        return <PowerPoint onClose={() => handleAppClose("powerpoint")} />
      case "word":
        return <Word onClose={() => handleAppClose("word")} />
      case "photoshop":
        return <Photoshop onClose={() => handleAppClose("photoshop")} />
      case "illustrator":
        return <Illustrator onClose={() => handleAppClose("illustrator")} />
      case "premiere":
        return <Premiere onClose={() => handleAppClose("premiere")} />
      case "vscode":
        return <VSCode onClose={() => handleAppClose("vscode")} />
      case "terminal":
        return <Terminal onClose={() => handleAppClose("terminal")} />
      case "github":
        return <GitHub onClose={() => handleAppClose("github")} />
      case "netflix":
        return <Netflix onClose={() => handleAppClose("netflix")} />
      case "spotify":
        return <Spotify onClose={() => handleAppClose("spotify")} />
      case "chess":
        return <Chess onClose={() => handleAppClose("chess")} />
      case "figma":
        return (
          <div className="flex-1 p-6 text-center">
            <div className="text-6xl mb-4">🎯</div>
            <h2 className="text-2xl font-bold text-gray-800 mb-4">Figma</h2>
            <p className="text-gray-600">Collaborative interface design tool for teams.</p>
          </div>
        )
      case "slack":
        return (
          <div className="flex-1 p-6 text-center">
            <div className="text-6xl mb-4">💬</div>
            <h2 className="text-2xl font-bold text-gray-800 mb-4">Slack</h2>
            <p className="text-gray-600">Team communication and collaboration platform.</p>
          </div>
        )
      case "zoom":
        return (
          <div className="flex-1 p-6 text-center">
            <div className="text-6xl mb-4">📹</div>
            <h2 className="text-2xl font-bold text-gray-800 mb-4">Zoom</h2>
            <p className="text-gray-600">Video conferencing and online meetings platform.</p>
          </div>
        )
      case "notion":
        return (
          <div className="flex-1 p-6 text-center">
            <div className="text-6xl mb-4">📋</div>
            <h2 className="text-2xl font-bold text-gray-800 mb-4">Notion</h2>
            <p className="text-gray-600">All-in-one workspace for notes, tasks, wikis, and databases.</p>
          </div>
        )
      case "discord":
        return (
          <div className="flex-1 p-6 text-center">
            <div className="text-6xl mb-4">🎮</div>
            <h2 className="text-2xl font-bold text-gray-800 mb-4">Discord</h2>
            <p className="text-gray-600">Voice, video and text communication for gamers and communities.</p>
          </div>
        )
      case "blender":
        return (
          <div className="flex-1 p-6 text-center">
            <div className="text-6xl mb-4">🎲</div>
            <h2 className="text-2xl font-bold text-gray-800 mb-4">Blender</h2>
            <p className="text-gray-600">Free and open source 3D creation suite.</p>
          </div>
        )
      case "xcode":
        return (
          <div className="flex-1 p-6 text-center">
            <div className="text-6xl mb-4">🔨</div>
            <h2 className="text-2xl font-bold text-gray-800 mb-4">Xcode</h2>
            <p className="text-gray-600">Complete developer toolset for creating apps for Mac, iPhone, and iPad.</p>
          </div>
        )
      case "safari":
        return <Browser onClose={() => handleAppClose("safari")} />
      default:
        return <ContentArea />
    }
  }

const wallpaperConfig = wallpaperConfigs[currentWallpaper] || wallpaperConfigs["tahoe-default"]

return (
    <div
      className={`min-h-screen p-8 relative overflow-hidden ${wallpaperConfig.className}`}
      onContextMenu={handleDesktopRightClick}
      style={{ height: "100vh", overflowY: "auto", scrollBehavior: "smooth" }}
    >
      {wallpaperConfig.animated && (
        <div className="absolute inset-0 overflow-hidden pointer-events-none">
          <div className="absolute top-1/4 left-1/4 w-96 h-96 bg-gradient-to-r from-blue-400/20 to-purple-400/20 rounded-full blur-3xl animate-pulse"></div>
          <div className="absolute bottom-1/4 right-1/4 w-80 h-80 bg-gradient-to-r from-teal-400/20 to-blue-400/20 rounded-full blur-3xl animate-pulse delay-1000"></div>
          <div className="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-64 h-64 bg-gradient-to-r from-purple-400/20 to-pink-400/20 rounded-full blur-3xl animate-pulse delay-500"></div>
          <div className="absolute top-10 right-10 w-32 h-32 bg-gradient-to-r from-yellow-400/20 to-orange-400/20 rounded-full blur-2xl animate-bounce"></div>
          <div className="absolute bottom-10 left-10 w-40 h-40 bg-gradient-to-r from-green-400/20 to-teal-400/20 rounded-full blur-2xl animate-bounce delay-700"></div>
        </div>
      )}

{/* Added system status overlays */}
      {isRestarting && (
        <div className="fixed inset-0 bg-black/80 flex items-center justify-center z-[9999]">
          <div className="text-center text-white">
            <div className="animate-spin w-12 h-12 border-4 border-white border-t-transparent rounded-full mx-auto mb-4"></div>
            <h2 className="text-2xl font-semibold mb-2">Restarting...</h2>
            <p className="text-white/80">Please wait while macOS Tahoe restarts</p>
          </div>
        </div>
      )}

{isShuttingDown && (
        <div className="fixed inset-0 bg-black/80 flex items-center justify-center z-[9999]">
          <div className="text-center text-white">
            <div className="animate-pulse w-12 h-12 bg-white rounded-full mx-auto mb-4"></div>
            <h2 className="text-2xl font-semibold mb-2">Shutting Down...</h2>
            <p className="text-white/80">Saving your work and closing applications</p>
          </div>
        </div>
      )}

<div className="fixed top-0 left-0 right-0 z-50">
        <HomeMenu
          onAppLaunch={handleAppLaunch}
          installedApps={installedApps}
          onShowWidgets={() => setShowWidgets(true)}
          onRestart={handleRestart}
          onShutdown={handleShutdown}
        />
      </div>

<div className="pt-16 h-full">
        <MacOSWindow>
          <div className="flex h-full overflow-hidden">
            <Sidebar activeView={activeView} onViewChange={setActiveView} />
            <div className="flex-1 flex flex-col overflow-hidden">
              <Toolbar />
              <div className="flex-1 overflow-y-auto overflow-x-hidden scrollbar-thin scrollbar-thumb-white/20 scrollbar-track-transparent">
                {renderActiveContent()}
              </div>
            </div>
          </div>
        </MacOSWindow>
      </div>

{launchedApps.map((appName, index) => {
        if (appName === activeView) return null
        const position = windowPositions[appName] || { x: 100 + index * 50, y: 100 + index * 50, zIndex: 1000 + index }

return (
          <div
            key={appName}
            className="fixed bg-white/10 backdrop-blur-xl border border-white/20 rounded-xl shadow-2xl transition-all duration-200 hover:shadow-3xl"
            style={{
              left: `${position.x}px`,
              top: `${position.y}px`,
              zIndex: position.zIndex,
              width: "700px",
              height: "500px",
              minWidth: "500px",
              minHeight: "400px",
            }}
            onClick={() => handleWindowFocus(appName)}
          >
            <div
              className="flex items-center justify-between p-3 bg-white/5 border-b border-white/10 cursor-move hover:bg-white/10 transition-colors"
              onMouseDown={(e) => {
                setDraggedWindow(appName)
                const startX = e.clientX - position.x
                const startY = e.clientY - position.y

const handleMouseMove = (e: MouseEvent) => {
                  handleWindowDrag(appName, e.clientX - startX - position.x, e.clientY - startY - position.y)
                }

const handleMouseUp = () => {
                  setDraggedWindow(null)
                  document.removeEventListener("mousemove", handleMouseMove)
                  document.removeEventListener("mouseup", handleMouseUp)
                }

document.addEventListener("mousemove", handleMouseMove)
                document.addEventListener("mouseup", handleMouseUp)
              }}
            >
              <div className="flex items-center space-x-2">
                <div
                  className="w-3 h-3 bg-red-500 rounded-full hover:bg-red-400 cursor-pointer transition-colors"
                  onClick={(e) => {
                    e.stopPropagation()
                    handleAppClose(appName)
                  }}
                ></div>
                <div className="w-3 h-3 bg-yellow-500 rounded-full hover:bg-yellow-400 cursor-pointer transition-colors"></div>
                <div
                  className="w-3 h-3 bg-green-500 rounded-full hover:bg-green-400 cursor-pointer transition-colors"
                  onClick={(e) => {
                    e.stopPropagation()
                    setActiveView(appName)
                  }}
                ></div>
              </div>
              <span className="text-white/80 text-sm font-medium capitalize">{appName}</span>
              <div className="w-16"></div>
            </div>

<div className="h-full overflow-y-auto overflow-x-hidden scrollbar-thin scrollbar-thumb-white/20 scrollbar-track-transparent">
              <div className="p-6 text-center">
                <div className="text-white/60 mb-4">
                  <div className="text-4xl mb-2">📱</div>
                  <h3 className="text-lg font-medium capitalize">{appName}</h3>
                  <p className="text-sm">Running in background mode</p>
                </div>
                <button
                  className="px-6 py-3 bg-blue-500/20 hover:bg-blue-500/30 rounded-lg border border-blue-400/30 text-blue-200 transition-all duration-200 hover:scale-105"
                  onClick={(e) => {
                    e.stopPropagation()
                    setActiveView(appName)
                  }}
                >
                  Focus Window
                </button>
              </div>
            </div>
          </div>
        )
      })}

{showWallpaperSelector && (
        <WallpaperSelector
          onClose={() => setShowWallpaperSelector(false)}
          onWallpaperChange={handleWallpaperChange}
          currentWallpaper={currentWallpaper}
        />
      )}

{showWidgets && <WidgetSystem onClose={() => setShowWidgets(false)} />}
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/apps/browser.tsx" isFixed="true" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

import type React from "react"
import { useState, useEffect } from "react"
import { Search, ArrowLeft, ArrowRight, RotateCcw, Star, Plus, X, Globe, Shield, BookmarkIcon } from "lucide-react"

interface BrowserProps {
  onClose: () => void
}

interface Tab {
  id: string
  title: string
  url: string
  favicon?: string
  isLoading?: boolean
}

interface Bookmark {
  id: string
  title: string
  url: string
  favicon?: string
}

const searchResults = [
  {
    title: "macOS Tahoe - Apple's Latest Operating System",
    url: "https://apple.com/macos/tahoe",
    description:
      "Discover the new features and improvements in macOS Tahoe, including the revolutionary Liquid Glass design language.",
  },
  {
    title: "Liquid Glass Design - The Future of UI",
    url: "https://developer.apple.com/design/liquid-glass",
    description: "Learn about Apple's new Liquid Glass design system that creates translucent, reflective interfaces.",
  },
  {
    title: "Web Development Best Practices 2024",
    url: "https://vercel.com/blog/web-dev-2024",
    description: "Modern web development techniques and frameworks for building fast, scalable applications.",
  },
  {
    title: "React 18 Features and Updates",
    url: "https://react.dev/blog/react-18",
    description: "Explore the latest features in React 18 including concurrent rendering and automatic batching.",
  },
  {
    title: "TypeScript Advanced Patterns",
    url: "https://typescript.org/docs/advanced",
    description: "Master advanced TypeScript patterns for better type safety and developer experience.",
  },
]

const mockWebsites = [
  {
    url: "https://google.com",
    title: "Google",
    content: (searchQuery?: string) => (
      <div className="bg-white min-h-screen">
        <div className="flex flex-col items-center justify-center min-h-screen bg-white">
          <div className="text-6xl font-light text-blue-600 mb-8">Google</div>
          <div className="w-full max-w-md">
            <div className="relative">
              <input
                type="text"
                placeholder="Search Google or type a URL"
                defaultValue={searchQuery || ""}
                className="w-full px-4 py-3 border border-gray-300 rounded-full focus:outline-none focus:ring-2 focus:ring-blue-500"
              />
              <Search className="absolute right-4 top-3.5 w-5 h-5 text-gray-400" />
            </div>
            <div className="flex justify-center space-x-4 mt-8">
              <button className="px-4 py-2 bg-gray-100 hover:bg-gray-200 rounded text-sm">Google Search</button>
              <button className="px-4 py-2 bg-gray-100 hover:bg-gray-200 rounded text-sm">I'm Feeling Lucky</button>
            </div>
          </div>

{searchQuery && (
            <div className="w-full max-w-2xl mt-12 px-4">
              <div className="text-sm text-gray-600 mb-4">
                About {Math.floor(Math.random() * 1000000).toLocaleString()} results (
                {(Math.random() * 0.5 + 0.1).toFixed(2)} seconds)
              </div>
              <div className="space-y-6">
                {searchResults
                  .filter(
                    (result) =>
                      result.title.toLowerCase().includes(searchQuery.toLowerCase()) ||
                      result.description.toLowerCase().includes(searchQuery.toLowerCase()),
                  )
                  .slice(0, 5)
                  .map((result, index) => (
                    <div key={index} className="group cursor-pointer">
                      <div className="text-sm text-green-700 mb-1">{result.url}</div>
                      <h3 className="text-xl text-blue-600 hover:underline group-hover:underline mb-1">
                        {result.title}
                      </h3>
                      <p className="text-gray-700 text-sm leading-relaxed">{result.description}</p>
                    </div>
                  ))}

{searchResults.filter(
                  (result) =>
                    result.title.toLowerCase().includes(searchQuery.toLowerCase()) ||
                    result.description.toLowerCase().includes(searchQuery.toLowerCase()),
                ).length === 0 && (
                  <div className="text-center py-8">
                    <p className="text-gray-600">No results found for "{searchQuery}"</p>
                    <p className="text-sm text-gray-500 mt-2">Try different keywords or check your spelling</p>
                  </div>
                )}
              </div>
            </div>
          )}
        </div>
      </div>
    ),
  },
  {
    url: "https://github.com",
    title: "GitHub",
    content: () => (
      <div className="bg-gray-900 min-h-screen text-white">
        <div className="bg-gray-800 p-4 border-b border-gray-700">
          <div className="flex items-center justify-between max-w-6xl mx-auto">
            <div className="flex items-center space-x-4">
              <div className="text-2xl font-bold">GitHub</div>
              <nav className="flex space-x-6">
                <a href="#" className="hover:text-gray-300">
                  Product
                </a>
                <a href="#" className="hover:text-gray-300">
                  Solutions
                </a>
                <a href="#" className="hover:text-gray-300">
                  Open Source
                </a>
                <a href="#" className="hover:text-gray-300">
                  Pricing
                </a>
              </nav>
            </div>
            <div className="flex items-center space-x-4">
              <button className="px-4 py-2 border border-gray-600 rounded hover:bg-gray-700">Sign in</button>
              <button className="px-4 py-2 bg-green-600 hover:bg-green-700 rounded">Sign up</button>
            </div>
          </div>
        </div>
        <div className="max-w-6xl mx-auto p-8">
          <div className="text-center py-16">
            <h1 className="text-5xl font-bold mb-6">Let's build from here</h1>
            <p className="text-xl text-gray-400 mb-8">The world's leading AI-powered developer platform.</p>
            <div className="flex justify-center space-x-4">
              <button className="px-6 py-3 bg-green-600 hover:bg-green-700 rounded-lg font-semibold">
                Start a free enterprise trial
              </button>
              <button className="px-6 py-3 border border-gray-600 hover:bg-gray-800 rounded-lg">
                Sign up for GitHub
              </button>
            </div>
          </div>
        </div>
      </div>
    ),
  },
  {
    url: "https://vercel.com",
    title: "Vercel",
    content: () => (
      <div className="bg-black min-h-screen text-white">
        <div className="border-b border-gray-800 p-4">
          <div className="flex items-center justify-between max-w-6xl mx-auto">
            <div className="flex items-center space-x-8">
              <div className="text-2xl font-bold">▲ Vercel</div>
              <nav className="flex space-x-6">
                <a href="#" className="hover:text-gray-300">
                  Products
                </a>
                <a href="#" className="hover:text-gray-300">
                  Solutions
                </a>
                <a href="#" className="hover:text-gray-300">
                  Resources
                </a>
                <a href="#" className="hover:text-gray-300">
                  Pricing
                </a>
              </nav>
            </div>
            <div className="flex items-center space-x-4">
              <button className="px-4 py-2 hover:bg-gray-900 rounded">Login</button>
              <button className="px-4 py-2 bg-white text-black hover:bg-gray-200 rounded">Sign Up</button>
            </div>
          </div>
        </div>
        <div className="max-w-6xl mx-auto p-8">
          <div className="text-center py-20">
            <h1 className="text-6xl font-bold mb-6">Develop. Preview. Ship.</h1>
            <p className="text-xl text-gray-400 mb-8 max-w-2xl mx-auto">
              Vercel is the platform for frontend developers, providing the speed and reliability innovators need to
              create at the moment of inspiration.
            </p>
            <div className="flex justify-center space-x-4">
              <button className="px-6 py-3 bg-white text-black hover:bg-gray-200 rounded font-semibold">
                Start Deploying
              </button>
              <button className="px-6 py-3 border border-gray-600 hover:bg-gray-900 rounded">Get a Demo</button>
            </div>
          </div>
        </div>
      </div>
    ),
  },
  {
    url: "https://apple.com",
    title: "Apple",
    content: () => (
      <div className="bg-white min-h-screen">
        <div className="bg-gray-900 text-white p-4">
          <div className="flex items-center justify-center max-w-6xl mx-auto">
            <nav className="flex space-x-8">
              <a href="#" className="hover:text-gray-300">
                🍎
              </a>
              <a href="#" className="hover:text-gray-300">
                Store
              </a>
              <a href="#" className="hover:text-gray-300">
                Mac
              </a>
              <a href="#" className="hover:text-gray-300">
                iPad
              </a>
              <a href="#" className="hover:text-gray-300">
                iPhone
              </a>
              <a href="#" className="hover:text-gray-300">
                Watch
              </a>
              <a href="#" className="hover:text-gray-300">
                AirPods
              </a>
              <a href="#" className="hover:text-gray-300">
                TV & Home
              </a>
              <a href="#" className="hover:text-gray-300">
                Support
              </a>
            </nav>
          </div>
        </div>
        <div className="text-center py-16 bg-gradient-to-b from-blue-50 to-white">
          <h1 className="text-5xl font-bold text-gray-900 mb-4">iPhone 15 Pro</h1>
          <p className="text-xl text-gray-600 mb-8">Titanium. So strong. So light. So Pro.</p>
          <div className="flex justify-center space-x-4">
            <button className="px-6 py-3 bg-blue-600 text-white hover:bg-blue-700 rounded-full">Learn more</button>
            <button className="px-6 py-3 border border-blue-600 text-blue-600 hover:bg-blue-50 rounded-full">
              Buy
            </button>
          </div>
        </div>
      </div>
    ),
  },
  {
    url: "https://youtube.com",
    title: "YouTube",
    content: () => (
      <div className="bg-white min-h-screen">
        <div className="bg-white border-b p-4">
          <div className="flex items-center justify-between max-w-6xl mx-auto">
            <div className="flex items-center space-x-4">
              <div className="text-2xl font-bold text-red-600">YouTube</div>
            </div>
            <div className="flex-1 max-w-2xl mx-8">
              <div className="relative">
                <input
                  type="text"
                  placeholder="Search"
                  className="w-full pl-10 pr-4 py-2 bg-white/10 border border-white/20 rounded-l-full focus:outline-none focus:ring-2 focus:ring-blue-400/50"
                />
                <button className="px-6 py-2 bg-gray-100 border border-l-0 border-gray-300 rounded-r-full hover:bg-gray-200">
                  <Search className="w-5 h-5" />
                </button>
              </div>
            </div>
            <div className="flex items-center space-x-4">
              <button className="px-4 py-2 border border-gray-300 rounded hover:bg-gray-50">Sign in</button>
            </div>
          </div>
        </div>
        <div className="max-w-6xl mx-auto p-8">
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
            {[1, 2, 3, 4, 5, 6].map((i) => (
              <div key={i} className="bg-white rounded-lg shadow hover:shadow-lg transition-shadow">
                <div className="w-full h-48 bg-gray-200 rounded-t-lg flex items-center justify-center">
                  <div className="text-4xl">▶️</div>
                </div>
                <div className="p-4">
                  <h3 className="font-semibold mb-2">Sample Video Title {i}</h3>
                  <p className="text-gray-600 text-sm">Channel Name • 1M views • 2 days ago</p>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    ),
  },
]

export function Browser({ onClose }: BrowserProps) {
  const [tabs, setTabs] = useState<Tab[]>([{ id: "1", title: "New Tab", url: "about:blank" }])
  const [activeTabId, setActiveTabId] = useState("1")
  const [addressBarValue, setAddressBarValue] = useState("")
  const [bookmarks, setBookmarks] = useState<Bookmark[]>([
    { id: "1", title: "Google", url: "https://google.com" },
    { id: "2", title: "GitHub", url: "https://github.com" },
    { id: "3", title: "Vercel", url: "https://vercel.com" },
    { id: "4", title: "Apple", url: "https://apple.com" },
  ])
  const [showBookmarks, setShowBookmarks] = useState(false)
  const [history, setHistory] = useState<string[]>([])
  const [historyIndex, setHistoryIndex] = useState(-1)
  const [draggedTab, setDraggedTab] = useState<string | null>(null)
  const [dragOverTab, setDragOverTab] = useState<string | null>(null)
  const [currentSearchQuery, setCurrentSearchQuery] = useState<string>("")

const activeTab = tabs.find((tab) => tab.id === activeTabId)

const isSearchQuery = (input: string): boolean => {
    // If it contains spaces, it's likely a search query
    if (input.includes(" ")) return true

// If it doesn't contain a dot and doesn't start with http, it's likely a search
    if (!input.includes(".") && !input.startsWith("http")) return true

// If it's a single word without common TLDs, treat as search
    const commonTLDs = [".com", ".org", ".net", ".edu", ".gov", ".io", ".co", ".app"]
    const hasCommonTLD = commonTLDs.some((tld) => input.toLowerCase().includes(tld))

return !hasCommonTLD
  }

const createNewTab = () => {
    const newTab: Tab = {
      id: Date.now().toString(),
      title: "New Tab",
      url: "about:blank",
    }
    setTabs((prev) => [...prev, newTab])
    setActiveTabId(newTab.id)
    setAddressBarValue("")
    setCurrentSearchQuery("")
  }

const closeTab = (tabId: string, e?: React.MouseEvent) => {
    if (e) {
      e.stopPropagation()
    }

if (tabs.length === 1) {
      onClose()
      return
    }

const tabIndex = tabs.findIndex((tab) => tab.id === tabId)
    const newTabs = tabs.filter((tab) => tab.id !== tabId)
    setTabs(newTabs)

if (activeTabId === tabId) {
      const newActiveIndex = Math.min(tabIndex, newTabs.length - 1)
      setActiveTabId(newTabs[newActiveIndex].id)
      setAddressBarValue(newTabs[newActiveIndex].url)
    }
  }

const handleTabDragStart = (e: React.DragEvent, tabId: string) => {
    setDraggedTab(tabId)
    e.dataTransfer.effectAllowed = "move"
  }

const handleTabDragOver = (e: React.DragEvent, tabId: string) => {
    e.preventDefault()
    e.dataTransfer.dropEffect = "move"
    setDragOverTab(tabId)
  }

const handleTabDragLeave = () => {
    setDragOverTab(null)
  }

const handleTabDrop = (e: React.DragEvent, targetTabId: string) => {
    e.preventDefault()

if (!draggedTab || draggedTab === targetTabId) {
      setDraggedTab(null)
      setDragOverTab(null)
      return
    }

const draggedIndex = tabs.findIndex((tab) => tab.id === draggedTab)
    const targetIndex = tabs.findIndex((tab) => tab.id === targetTabId)

const newTabs = [...tabs]
    const [draggedTabObj] = newTabs.splice(draggedIndex, 1)
    newTabs.splice(targetIndex, 0, draggedTabObj)

setTabs(newTabs)
    setDraggedTab(null)
    setDragOverTab(null)
  }

const handleTabDragEnd = () => {
    setDraggedTab(null)
    setDragOverTab(null)
  }

const navigateToUrl = (input: string) => {
    let url = input
    let searchQuery = ""

// Determine if this is a search query or URL
    if (isSearchQuery(input)) {
      // It's a search query - redirect to Google with search
      url = "https://google.com"
      searchQuery = input
      setCurrentSearchQuery(input)
    } else {
      // It's a URL
      if (!input.startsWith("http://") && !input.startsWith("https://") && !input.startsWith("about:")) {
        url = "https://" + input
      }
      setCurrentSearchQuery("")
    }

const updatedTabs = tabs.map((tab) =>
      tab.id === activeTabId
        ? {
            ...tab,
            url,
            title: searchQuery
              ? `Search: ${searchQuery}`
              : url.includes("://")
                ? url.split("://")[1].split("/")[0]
                : url,
            isLoading: true,
          }
        : tab,
    )
    setTabs(updatedTabs)

// Add to history
    setHistory((prev) => [...prev, url])
    setHistoryIndex((prev) => prev + 1)

// Simulate loading
    setTimeout(() => {
      const mockSite = mockWebsites.find((site) => url.includes(site.url.replace("https://", "")))
      const finalTabs = tabs.map((tab) =>
        tab.id === activeTabId
          ? {
              ...tab,
              title: searchQuery
                ? `Search: ${searchQuery}`
                : mockSite?.title || url.split("://")[1]?.split("/")[0] || url,
              isLoading: false,
            }
          : tab,
      )
      setTabs(finalTabs)
    }, 1000)
  }

const handleAddressBarSubmit = (e: React.FormEvent) => {
    e.preventDefault()
    if (addressBarValue.trim()) {
      navigateToUrl(addressBarValue.trim())
    }
  }

const goBack = () => {
    if (historyIndex > 0) {
      setHistoryIndex((prev) => prev - 1)
      const previousUrl = history[historyIndex - 1]
      setAddressBarValue(previousUrl)
      navigateToUrl(previousUrl)
    }
  }

const goForward = () => {
    if (historyIndex < history.length - 1) {
      setHistoryIndex((prev) => prev + 1)
      const nextUrl = history[historyIndex + 1]
      setAddressBarValue(nextUrl)
      navigateToUrl(nextUrl)
    }
  }

const refresh = () => {
    if (activeTab?.url && activeTab.url !== "about:blank") {
      navigateToUrl(activeTab.url)
    }
  }

const addBookmark = () => {
    if (activeTab && activeTab.url !== "about:blank") {
      const newBookmark: Bookmark = {
        id: Date.now().toString(),
        title: activeTab.title,
        url: activeTab.url,
      }
      setBookmarks((prev) => [...prev, newBookmark])
    }
  }

const renderWebContent = () => {
    if (!activeTab || activeTab.url === "about:blank") {
      return (
        <div className="flex-1 bg-white flex flex-col items-center justify-center">
          <div className="text-center">
            <Globe className="w-16 h-16 text-gray-400 mx-auto mb-4" />
            <h2 className="text-2xl font-semibold text-gray-700 mb-2">Welcome to Safari</h2>
            <p className="text-gray-500 mb-8">Start browsing by entering a URL or search term</p>

<div className="grid grid-cols-2 md:grid-cols-4 gap-4 max-w-2xl">
              {mockWebsites.slice(0, 4).map((site) => (
                <button
                  key={site.url}
                  onClick={() => {
                    setAddressBarValue(site.url)
                    navigateToUrl(site.url)
                  }}
                  className="p-4 bg-gray-50 hover:bg-gray-100 rounded-lg transition-colors"
                >
                  <div className="w-12 h-12 bg-blue-500 rounded-lg mx-auto mb-2 flex items-center justify-center text-white font-bold">
                    {site.title[0]}
                  </div>
                  <div className="text-sm font-medium">{site.title}</div>
                </button>
              ))}
            </div>
          </div>
        </div>
      )
    }

if (activeTab.isLoading) {
      return (
        <div className="flex-1 bg-white flex items-center justify-center">
          <div className="text-center">
            <div className="animate-spin w-8 h-8 border-4 border-blue-500 border-t-transparent rounded-full mx-auto mb-4"></div>
            <p className="text-gray-600">Loading...</p>
          </div>
        </div>
      )
    }

const mockSite = mockWebsites.find((site) => activeTab.url.includes(site.url.replace("https://", "")))

if (mockSite) {
      return <div className="flex-1 overflow-y-auto">{mockSite.content(currentSearchQuery)}</div>
    }

return (
      <div className="flex-1 bg-white flex items-center justify-center">
        <div className="text-center">
          <div className="text-6xl mb-4">🌐</div>
          <h2 className="text-xl font-semibold text-gray-700 mb-2">Page not found</h2>
          <p className="text-gray-500">This is a demo browser with limited websites</p>
        </div>
      </div>
    )
  }

useEffect(() => {
    if (activeTab) {
      setAddressBarValue(activeTab.url === "about:blank" ? "" : activeTab.url)
    }
  }, [activeTabId, activeTab])

useEffect(() => {
    const handleKeyDown = (e: KeyboardEvent) => {
      if (e.metaKey || e.ctrlKey) {
        switch (e.key) {
          case "t":
            e.preventDefault()
            createNewTab()
            break
          case "w":
            e.preventDefault()
            if (tabs.length > 1) {
              closeTab(activeTabId)
            }
            break
          case "r":
            e.preventDefault()
            refresh()
            break
          case "[":
            e.preventDefault()
            goBack()
            break
          case "]":
            e.preventDefault()
            goForward()
            break
        }
      }
    }

window.addEventListener("keydown", handleKeyDown)
    return () => window.removeEventListener("keydown", handleKeyDown)
  }, [activeTabId, tabs.length])

return (
    <div className="h-full bg-white/5 backdrop-blur-xl border border-white/20 rounded-xl overflow-hidden flex flex-col">
      {/* Browser Header */}
      <div className="bg-white/10 border-b border-white/20 p-3">
        <div className="flex items-center justify-between mb-3">
          <div className="flex items-center space-x-2">
            <button onClick={onClose} className="w-3 h-3 bg-red-500 rounded-full hover:bg-red-400 transition-colors" />
            <button className="w-3 h-3 bg-yellow-500 rounded-full hover:bg-yellow-400 transition-colors" />
            <button className="w-3 h-3 bg-green-500 rounded-full hover:bg-green-400 transition-colors" />
          </div>
          <span className="text-white/80 text-sm font-medium">Safari</span>
          <div className="w-16" />
        </div>

{/* Tab Bar */}
        <div className="flex items-center space-x-1 mb-3 overflow-x-auto">
          {tabs.map((tab) => (
            <div
              key={tab.id}
              draggable
              onDragStart={(e) => handleTabDragStart(e, tab.id)}
              onDragOver={(e) => handleTabDragOver(e, tab.id)}
              onDragLeave={handleTabDragLeave}
              onDrop={(e) => handleTabDrop(e, tab.id)}
              onDragEnd={handleTabDragEnd}
              className={`flex items-center space-x-2 px-3 py-2 rounded-t-lg cursor-pointer transition-all duration-200 min-w-0 max-w-48 group ${
                tab.id === activeTabId
                  ? "bg-white/20 text-white shadow-lg"
                  : "bg-white/5 text-white/60 hover:bg-white/10"
              } ${dragOverTab === tab.id && draggedTab !== tab.id ? "border-l-2 border-blue-400" : ""} ${
                draggedTab === tab.id ? "opacity-50 scale-95" : ""
              }`}
              onClick={() => setActiveTabId(tab.id)}
            >
              {tab.isLoading && (
                <div className="w-3 h-3 border border-white/40 border-t-transparent rounded-full animate-spin" />
              )}
              <span className="text-xs flex-1 truncate min-w-0">{tab.isLoading ? "Loading..." : tab.title}</span>
              <button
                onClick={(e) => closeTab(tab.id, e)}
                className="w-4 h-4 hover:bg-white/20 rounded flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity flex-shrink-0"
              >
                <X className="w-3 h-3" />
              </button>
            </div>
          ))}
          <button
            onClick={createNewTab}
            className="w-8 h-8 bg-white/10 hover:bg-white/20 rounded-lg flex items-center justify-center transition-colors flex-shrink-0"
            title="New Tab (⌘T)"
          >
            <Plus className="w-4 h-4 text-white/80" />
          </button>
        </div>

{/* Navigation Bar */}
        <div className="flex items-center space-x-2">
          <button
            onClick={goBack}
            disabled={historyIndex <= 0}
            className="p-2 hover:bg-white/10 rounded disabled:opacity-50 disabled:cursor-not-allowed transition-colors flex-shrink-0"
            title="Back (⌘[)"
          >
            <ArrowLeft className="w-4 h-4 text-white/80" />
          </button>
          <button
            onClick={goForward}
            disabled={historyIndex >= history.length - 1}
            className="p-2 hover:bg-white/10 rounded disabled:opacity-50 disabled:cursor-not-allowed transition-colors flex-shrink-0"
            title="Forward (⌘])"
          >
            <ArrowRight className="w-4 h-4 text-white/80" />
          </button>
          <button
            onClick={refresh}
            className="p-2 hover:bg-white/10 rounded transition-colors flex-shrink-0"
            title="Refresh (⌘R)"
          >
            <RotateCcw className="w-4 h-4 text-white/80" />
          </button>

<form onSubmit={handleAddressBarSubmit} className="flex-1">
            <div className="relative">
              <div className="absolute left-3 top-1/2 transform -translate-y-1/2">
                <Shield className="w-4 h-4 text-green-400" />
              </div>
              <input
                type="text"
                value={addressBarValue}
                onChange={(e) => setAddressBarValue(e.target.value)}
                placeholder="Search or enter website name"
                className="w-full pl-10 pr-4 py-2 bg-white/10 border border-white/20 rounded-lg text-white placeholder-white/50 focus:outline-none focus:ring-2 focus:ring-blue-400/50 focus:bg-white/15"
              />
            </div>
          </form>

<button
            onClick={addBookmark}
            className="p-2 hover:bg-white/10 rounded transition-colors flex-shrink-0"
            title="Add Bookmark"
          >
            <Star className="w-4 h-4 text-white/80" />
          </button>
          <button
            onClick={() => setShowBookmarks(!showBookmarks)}
            className="p-2 hover:bg-white/10 rounded transition-colors flex-shrink-0"
            title="Show Bookmarks"
          >
            <BookmarkIcon className="w-4 h-4 text-white/80" />
          </button>
        </div>

{/* Bookmarks Bar */}
        {showBookmarks && (
          <div className="flex items-center space-x-2 mt-2 pt-2 border-t border-white/10">
            {bookmarks.map((bookmark) => (
              <button
                key={bookmark.id}
                onClick={() => {
                  setAddressBarValue(bookmark.url)
                  navigateToUrl(bookmark.url)
                }}
                className="px-3 py-1 bg-white/10 hover:bg-white/20 rounded text-xs text-white/80 transition-colors"
              >
                {bookmark.title}
              </button>
            ))}
          </div>
        )}
      </div>

{/* Web Content */}
      {renderWebContent()}
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/apps/mail.tsx" isMerged="true"
"use client"

import { useState } from "react"
import {
  Search,
  Star,
  Archive,
  Trash2,
  Reply,
  Forward,
  MoreHorizontal,
  Paperclip,
  Send,
  Inbox,
  SendIcon as Sent,
  DraftingCompassIcon as Drafts,
  Flag,
} from "lucide-react"

interface MailProps {
  onClose: () => void
}

interface Email {
  id: string
  from: string
  subject: string
  preview: string
  time: string
  isRead: boolean
  isStarred: boolean
  isFlagged: boolean
  hasAttachment: boolean
  folder: string
}

const mockEmails: Email[] = [
  {
    id: "1",
    from: "Apple",
    subject: "Welcome to macOS Tahoe",
    preview: "Discover the new Liquid Glass design language and enhanced features in macOS Tahoe...",
    time: "9:30 AM",
    isRead: false,
    isStarred: true,
    isFlagged: false,
    hasAttachment: false,
    folder: "inbox",
  },
  {
    id: "2",
    from: "GitHub",
    subject: "Your weekly digest",
    preview: "Here's what happened in your repositories this week. 15 new commits, 3 pull requests...",
    time: "Yesterday",
    isRead: true,
    isStarred: false,
    isFlagged: true,
    hasAttachment: true,
    folder: "inbox",
  },
  {
    id: "3",
    from: "Vercel",
    subject: "Deployment successful",
    preview: "Your project has been successfully deployed to production. View your live site...",
    time: "2 days ago",
    isRead: true,
    isStarred: false,
    isFlagged: false,
    hasAttachment: false,
    folder: "inbox",
  },
  {
    id: "4",
    from: "Team",
    subject: "Project update meeting",
    preview: "Let's schedule a meeting to discuss the latest project updates and next steps...",
    time: "3 days ago",
    isRead: false,
    isStarred: false,
    isFlagged: false,
    hasAttachment: true,
    folder: "inbox",
  },
]

export function Mail({ onClose }: MailProps) {
  const [selectedEmail, setSelectedEmail] = useState<Email | null>(null)
  const [emails, setEmails] = useState(mockEmails)
  const [selectedFolder, setSelectedFolder] = useState("inbox")
  const [searchQuery, setSearchQuery] = useState("")
  const [isComposing, setIsComposing] = useState(false)

const folders = [
    {
      name: "inbox",
      label: "Inbox",
      icon: Inbox,
      count: emails.filter((e) => e.folder === "inbox" && !e.isRead).length,
    },
    { name: "sent", label: "Sent", icon: Sent, count: 0 },
    { name: "drafts", label: "Drafts", icon: Drafts, count: 2 },
    { name: "starred", label: "Starred", icon: Star, count: emails.filter((e) => e.isStarred).length },
    { name: "trash", label: "Trash", icon: Trash2, count: 0 },
  ]

const filteredEmails = emails.filter((email) => {
    const matchesFolder = selectedFolder === "starred" ? email.isStarred : email.folder === selectedFolder
    const matchesSearch =
      email.from.toLowerCase().includes(searchQuery.toLowerCase()) ||
      email.subject.toLowerCase().includes(searchQuery.toLowerCase())
    return matchesFolder && matchesSearch
  })

const toggleStar = (emailId: string) => {
    setEmails((prev) => prev.map((email) => (email.id === emailId ? { ...email, isStarred: !email.isStarred } : email)))
  }

const markAsRead = (emailId: string) => {
    setEmails((prev) => prev.map((email) => (email.id === emailId ? { ...email, isRead: true } : email)))
  }

return (
    <div className="h-full bg-white/5 backdrop-blur-xl border border-white/20 rounded-xl overflow-hidden flex flex-col">
      {/* Header */}
      <div className="bg-white/10 border-b border-white/20 p-3">
        <div className="flex items-center justify-between mb-3">
          <div className="flex items-center space-x-2">
            <button onClick={onClose} className="w-3 h-3 bg-red-500 rounded-full hover:bg-red-400 transition-colors" />
            <button className="w-3 h-3 bg-yellow-500 rounded-full hover:bg-yellow-400 transition-colors" />
            <button className="w-3 h-3 bg-green-500 rounded-full hover:bg-green-400 transition-colors" />
          </div>
          <span className="text-white/80 text-sm font-medium">Mail</span>
          <div className="w-16" />
        </div>

{/* Toolbar */}
        <div className="flex items-center justify-between">
          <div className="flex items-center space-x-2">
            <button
              onClick={() => setIsComposing(true)}
              className="px-4 py-2 bg-blue-500 hover:bg-blue-600 text-white rounded-lg transition-colors text-sm font-medium"
            >
              Compose
            </button>
            <button className="p-2 hover:bg-white/10 rounded transition-colors">
              <Archive className="w-4 h-4 text-white/80" />
            </button>
            <button className="p-2 hover:bg-white/10 rounded transition-colors">
              <Trash2 className="w-4 h-4 text-white/80" />
            </button>
          </div>

<div className="flex-1 max-w-md mx-4">
            <div className="relative">
              <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 w-4 h-4 text-white/50" />
              <input
                type="text"
                placeholder="Search mail"
                value={searchQuery}
                onChange={(e) => setSearchQuery(e.target.value)}
                className="w-full pl-10 pr-4 py-2 bg-white/10 border border-white/20 rounded-lg text-white placeholder-white/50 focus:outline-none focus:ring-2 focus:ring-blue-400/50"
              />
            </div>
          </div>
        </div>
      </div>

<div className="flex-1 flex overflow-hidden">
        {/* Sidebar */}
        <div className="w-64 bg-white/5 border-r border-white/20 p-4">
          <div className="space-y-2">
            {folders.map((folder) => (
              <button
                key={folder.name}
                onClick={() => setSelectedFolder(folder.name)}
                className={`w-full flex items-center justify-between p-3 rounded-lg transition-colors ${
                  selectedFolder === folder.name ? "bg-blue-500/20 text-white" : "hover:bg-white/10 text-white/80"
                }`}
              >
                <div className="flex items-center space-x-3">
                  <folder.icon className="w-4 h-4" />
                  <span className="text-sm font-medium">{folder.label}</span>
                </div>
                {folder.count > 0 && (
                  <span className="bg-blue-500 text-white text-xs px-2 py-1 rounded-full">{folder.count}</span>
                )}
              </button>
            ))}
          </div>
        </div>

{/* Email List */}
        <div className="w-80 bg-white/5 border-r border-white/20 overflow-y-auto">
          <div className="p-4">
            <h2 className="text-white font-semibold mb-4 capitalize">{selectedFolder}</h2>
            <div className="space-y-2">
              {filteredEmails.map((email) => (
                <div
                  key={email.id}
                  onClick={() => {
                    setSelectedEmail(email)
                    markAsRead(email.id)
                  }}
                  className={`p-3 rounded-lg cursor-pointer transition-colors border ${
                    selectedEmail?.id === email.id
                      ? "bg-blue-500/20 border-blue-400/50"
                      : "hover:bg-white/10 border-transparent"
                  } ${!email.isRead ? "bg-white/5" : ""}`}
                >
                  <div className="flex items-start justify-between mb-2">
                    <div className="flex items-center space-x-2">
                      <span className={`text-sm font-medium ${!email.isRead ? "text-white" : "text-white/80"}`}>
                        {email.from}
                      </span>
                      {!email.isRead && <div className="w-2 h-2 bg-blue-500 rounded-full" />}
                    </div>
                    <div className="flex items-center space-x-1">
                      {email.hasAttachment && <Paperclip className="w-3 h-3 text-white/60" />}
                      {email.isFlagged && <Flag className="w-3 h-3 text-orange-400" />}
                      <button
                        onClick={(e) => {
                          e.stopPropagation()
                          toggleStar(email.id)
                        }}
                        className="hover:scale-110 transition-transform"
                      >
                        <Star
                          className={`w-3 h-3 ${email.isStarred ? "text-yellow-400 fill-current" : "text-white/60"}`}
                        />
                      </button>
                    </div>
                  </div>
                  <div className={`text-sm mb-1 ${!email.isRead ? "text-white font-medium" : "text-white/80"}`}>
                    {email.subject}
                  </div>
                  <div className="text-xs text-white/60 mb-2 line-clamp-2">{email.preview}</div>
                  <div className="text-xs text-white/50">{email.time}</div>
                </div>
              ))}
            </div>
          </div>
        </div>

{/* Email Content */}
        <div className="flex-1 flex flex-col">
          {selectedEmail ? (
            <>
              <div className="bg-white/5 border-b border-white/20 p-4">
                <div className="flex items-center justify-between mb-3">
                  <h1 className="text-lg font-semibold text-white">{selectedEmail.subject}</h1>
                  <div className="flex items-center space-x-2">
                    <button className="p-2 hover:bg-white/10 rounded transition-colors">
                      <Reply className="w-4 h-4 text-white/80" />
                    </button>
                    <button className="p-2 hover:bg-white/10 rounded transition-colors">
                      <Forward className="w-4 h-4 text-white/80" />
                    </button>
                    <button className="p-2 hover:bg-white/10 rounded transition-colors">
                      <MoreHorizontal className="w-4 h-4 text-white/80" />
                    </button>
                  </div>
                </div>
                <div className="flex items-center justify-between text-sm text-white/80">
                  <div>From: {selectedEmail.from}</div>
                  <div>{selectedEmail.time}</div>
                </div>
              </div>
              <div className="flex-1 p-6 overflow-y-auto">
                <div className="text-white/90 leading-relaxed">
                  <p className="mb-4">{selectedEmail.preview}</p>
                  <p className="mb-4">
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore
                    et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.
                  </p>
                  <p className="mb-4">
                    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
                    pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit
                    anim id est laborum.
                  </p>
                  <p>
                    Best regards,
                    <br />
                    {selectedEmail.from}
                  </p>
                </div>
              </div>
            </>
          ) : (
            <div className="flex-1 flex items-center justify-center">
              <div className="text-center">
                <Inbox className="w-16 h-16 text-white/40 mx-auto mb-4" />
                <h2 className="text-xl font-semibold text-white/80 mb-2">No email selected</h2>
                <p className="text-white/60">Choose an email from the list to read it</p>
              </div>
            </div>
          )}
        </div>
      </div>

{/* Compose Modal */}
      {isComposing && (
        <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50">
          <div className="w-full max-w-2xl bg-white/10 backdrop-blur-xl border border-white/20 rounded-xl overflow-hidden">
            <div className="bg-white/10 border-b border-white/20 p-4">
              <div className="flex items-center justify-between">
                <h3 className="text-white font-semibold">New Message</h3>
                <button
                  onClick={() => setIsComposing(false)}
                  className="text-white/60 hover:text-white transition-colors"
                >
                  ×
                </button>
              </div>
            </div>
            <div className="p-4 space-y-4">
              <input
                type="email"
                placeholder="To:"
                className="w-full px-3 py-2 bg-white/10 border border-white/20 rounded text-white placeholder-white/50 focus:outline-none focus:ring-2 focus:ring-blue-400/50"
              />
              <input
                type="text"
                placeholder="Subject:"
                className="w-full px-3 py-2 bg-white/10 border border-white/20 rounded text-white placeholder-white/50 focus:outline-none focus:ring-2 focus:ring-blue-400/50"
              />
              <textarea
                placeholder="Message:"
                rows={8}
                className="w-full px-3 py-2 bg-white/10 border border-white/20 rounded text-white placeholder-white/50 focus:outline-none focus:ring-2 focus:ring-blue-400/50 resize-none"
              />
              <div className="flex items-center justify-between">
                <button className="p-2 hover:bg-white/10 rounded transition-colors">
                  <Paperclip className="w-4 h-4 text-white/80" />
                </button>
                <div className="flex items-center space-x-2">
                  <button
                    onClick={() => setIsComposing(false)}
                    className="px-4 py-2 hover:bg-white/10 rounded transition-colors text-white/80"
                  >
                    Cancel
                  </button>
                  <button className="px-4 py-2 bg-blue-500 hover:bg-blue-600 text-white rounded transition-colors flex items-center space-x-2">
                    <Send className="w-4 h-4" />
                    <span>Send</span>
                  </button>
                </div>
              </div>
            </div>
          </div>
        </div>
      )}
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/apps/finder.tsx" isFixed="true" isQuickEdit="true" isMerged="true"
"use client"

import React from "react"

import { useState } from "react"
import {
  Folder,
  ImageIcon,
  Music,
  Video,
  FileText,
  Archive,
  Search,
  ArrowLeft,
  ArrowRight,
  Home,
  Star,
  Clock,
  Trash2,
  Grid3X3,
  List,
  Download,
  Settings,
} from "lucide-react"

interface FinderProps {
  onClose: () => void
}

interface FileItem {
  id: string
  name: string
  type: "folder" | "file"
  size?: string
  modified: string
  icon: any
  color: string
  path: string
}

const mockFiles: FileItem[] = [
  {
    id: "1",
    name: "Documents",
    type: "folder",
    modified: "Today",
    icon: Folder,
    color: "text-blue-500",
    path: "/Documents",
  },
  {
    id: "2",
    name: "Downloads",
    type: "folder",
    modified: "Yesterday",
    icon: Download,
    color: "text-green-500",
    path: "/Downloads",
  },
  {
    id: "3",
    name: "Pictures",
    type: "folder",
    modified: "2 days ago",
    icon: ImageIcon,
    color: "text-purple-500",
    path: "/Pictures",
  },
  {
    id: "4",
    name: "Music",
    type: "folder",
    modified: "3 days ago",
    icon: Music,
    color: "text-red-500",
    path: "/Music",
  },
  {
    id: "5",
    name: "Videos",
    type: "folder",
    modified: "1 week ago",
    icon: Video,
    color: "text-orange-500",
    path: "/Videos",
  },
  {
    id: "6",
    name: "Project Proposal.pdf",
    type: "file",
    size: "2.4 MB",
    modified: "Today",
    icon: FileText,
    color: "text-red-400",
    path: "/Documents/Project Proposal.pdf",
  },
  {
    id: "7",
    name: "Vacation Photos.zip",
    type: "file",
    size: "45.2 MB",
    modified: "Yesterday",
    icon: Archive,
    color: "text-yellow-500",
    path: "/Downloads/Vacation Photos.zip",
  },
  {
    id: "8",
    name: "Meeting Notes.txt",
    type: "file",
    size: "12 KB",
    modified: "2 days ago",
    icon: FileText,
    color: "text-gray-400",
    path: "/Documents/Meeting Notes.txt",
  },
]

export function Finder({ onClose }: FinderProps) {
  const [currentPath, setCurrentPath] = useState("/")
  const [selectedItems, setSelectedItems] = useState<string[]>([])
  const [viewMode, setViewMode] = useState<"grid" | "list">("list")
  const [searchQuery, setSearchQuery] = useState("")
  const [selectedSidebar, setSelectedSidebar] = useState("home")

const sidebarItems = [
    { id: "home", label: "Home", icon: Home, color: "text-blue-500" },
    { id: "documents", label: "Documents", icon: Folder, color: "text-blue-500" },
    { id: "downloads", label: "Downloads", icon: Download, color: "text-green-500" },
    { id: "pictures", label: "Pictures", icon: ImageIcon, color: "text-purple-500" },
    { id: "music", label: "Music", icon: Music, color: "text-red-500" },
    { id: "videos", label: "Videos", icon: Video, color: "text-orange-500" },
    { id: "recent", label: "Recent", icon: Clock, color: "text-gray-400" },
    { id: "starred", label: "Starred", icon: Star, color: "text-yellow-500" },
    { id: "trash", label: "Trash", icon: Trash2, color: "text-red-400" },
  ]

const filteredFiles = mockFiles.filter((file) => file.name.toLowerCase().includes(searchQuery.toLowerCase()))

const handleItemClick = (item: FileItem) => {
    if (item.type === "folder") {
      setCurrentPath(item.path)
    }
    setSelectedItems([item.id])
  }

const handleItemDoubleClick = (item: FileItem) => {
    if (item.type === "folder") {
      setCurrentPath(item.path)
    }
  }

const getFileIcon = (item: FileItem) => {
    const IconComponent = item.icon
    return <IconComponent className={`w-5 h-5 ${item.color}`} />
  }

return (
    <div className="h-full bg-white/5 backdrop-blur-xl border border-white/20 rounded-xl overflow-hidden flex flex-col">
      {/* Header */}
      <div className="bg-white/10 border-b border-white/20 p-3">
        <div className="flex items-center justify-between mb-3">
          <div className="flex items-center space-x-2">
            <button onClick={onClose} className="w-3 h-3 bg-red-500 rounded-full hover:bg-red-400 transition-colors" />
            <button className="w-3 h-3 bg-yellow-500 rounded-full hover:bg-yellow-400 transition-colors" />
            <button className="w-3 h-3 bg-green-500 rounded-full hover:bg-green-400 transition-colors" />
          </div>
          <span className="text-white/80 text-sm font-medium">Finder</span>
          <div className="w-16" />
        </div>

{/* Toolbar */}
        <div className="flex items-center justify-between">
          <div className="flex items-center space-x-2">
            <button className="p-2 hover:bg-white/10 rounded transition-colors">
              <ArrowLeft className="w-4 h-4 text-white/80" />
            </button>
            <button className="p-2 hover:bg-white/10 rounded transition-colors">
              <ArrowRight className="w-4 h-4 text-white/80" />
            </button>
            <div className="flex items-center space-x-1 ml-4">
              <button
                onClick={() => setViewMode("list")}
                className={`p-2 rounded transition-colors ${viewMode === "list" ? "bg-white/20" : "hover:bg-white/10"}`}
              >
                <List className="w-4 h-4 text-white/80" />
              </button>
              <button
                onClick={() => setViewMode("grid")}
                className={`p-2 rounded transition-colors ${viewMode === "grid" ? "bg-white/20" : "hover:bg-white/10"}`}
              >
                <Grid3X3 className="w-4 h-4 text-white/80" />
              </button>
            </div>
          </div>

<div className="flex-1 max-w-md mx-4">
            <div className="relative">
              <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 w-4 h-4 text-white/50" />
              <input
                type="text"
                placeholder="Search"
                value={searchQuery}
                onChange={(e) => setSearchQuery(e.target.value)}
                className="w-full pl-10 pr-4 py-2 bg-white/10 border border-white/20 rounded-lg text-white placeholder-white/50 focus:outline-none focus:ring-2 focus:ring-blue-400/50"
              />
            </div>
          </div>

{/* Path Bar */}
        <div className="mt-3 flex items-center space-x-2 text-sm text-white/80">
          <button className="hover:text-white transition-colors">Home</button>
          {currentPath !== "/" && (
            <>
              <span>/</span>
              <button className="hover:text-white transition-colors">{currentPath.split("/").pop()}</button>
            </>
          )}
        </div>
      </div>

<div className="flex-1 flex overflow-hidden">
        {/* Sidebar */}
        <div className="w-48 bg-white/5 border-r border-white/20 p-4">
          <div className="space-y-1">
            {sidebarItems.map((item) => (
              <button
                key={item.id}
                onClick={() => setSelectedSidebar(item.id)}
                className={`w-full flex items-center space-x-3 p-2 rounded-lg transition-colors text-left ${
                  selectedSidebar === item.id ? "bg-blue-500/20 text-white" : "hover:bg-white/10 text-white/80"
                }`}
              >
                <item.icon className={`w-4 h-4 ${item.color}`} />
                <span className="text-sm">{item.label}</span>
              </button>
            ))}
          </div>
        </div>

{/* Main Content */}
        <div className="flex-1 p-4 overflow-y-auto">
          {viewMode === "list" ? (
            <div className="space-y-1">
              {/* Header */}
              <div className="grid grid-cols-12 gap-4 p-2 text-xs text-white/60 font-medium border-b border-white/10">
                <div className="col-span-6">Name</div>
                <div className="col-span-2">Size</div>
                <div className="col-span-4">Modified</div>
              </div>

{/* Files */}
              {filteredFiles.map((item) => (
                <div
                  key={item.id}
                  onClick={() => handleItemClick(item)}
                  onDoubleClick={() => handleItemDoubleClick(item)}
                  className={`grid grid-cols-12 gap-4 p-2 rounded-lg cursor-pointer transition-colors ${
                    selectedItems.includes(item.id) ? "bg-blue-500/20 text-white" : "hover:bg-white/10 text-white/80"
                  }`}
                >
                  <div className="col-span-6 flex items-center space-x-3">
                    {getFileIcon(item)}
                    <span className="text-sm truncate">{item.name}</span>
                  </div>
                  <div className="col-span-2 text-sm text-white/60">{item.size || "--"}</div>
                  <div className="col-span-4 text-sm text-white/60">{item.modified}</div>
                </div>
              ))}
            </div>
          ) : (
            <div className="grid grid-cols-4 gap-4">
              {filteredFiles.map((item) => (
                <div
                  key={item.id}
                  onClick={() => handleItemClick(item)}
                  onDoubleClick={() => handleItemDoubleClick(item)}
                  className={`p-4 rounded-lg cursor-pointer transition-colors text-center ${
                    selectedItems.includes(item.id) ? "bg-blue-500/20 text-white" : "hover:bg-white/10 text-white/80"
                  }`}
                >
                  <div className="flex justify-center mb-2">
                    <div className="w-12 h-12 flex items-center justify-center">
                      {React.createElement(item.icon, { className: `w-8 h-8 ${item.color}` })}
                    </div>
                  </div>
                  <div className="text-sm truncate">{item.name}</div>
                  <div className="text-xs text-white/60 mt-1">{item.modified}</div>
                </div>
              ))}
            </div>
          )}

{filteredFiles.length === 0 && (
            <div className="flex items-center justify-center h-64">
              <div className="text-center">
                <Folder className="w-16 h-16 text-white/40 mx-auto mb-4" />
                <h3 className="text-lg font-semibold text-white/80 mb-2">No items found</h3>
                <p className="text-white/60">This folder is empty or no items match your search</p>
              </div>
            </div>
          )}
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/content-area.tsx" isEdit="true"
"use client"

import { Apple, Sparkles, Zap, Globe, Shield, Heart } from "lucide-react"
import { useState } from "react"

export function ContentArea() {
  const [selectedFeature, setSelectedFeature] = useState<number | null>(null)

const features = [
    {
      name: "Liquid Glass Design",
      description: "Experience the revolutionary translucent interface that adapts to your workflow",
      icon: Sparkles,
      color: "blue",
      gradient: "from-blue-400 to-cyan-500",
    },
    {
      name: "Enhanced Performance",
      description: "Lightning-fast operations with optimized system architecture",
      icon: Zap,
      color: "yellow",
      gradient: "from-yellow-400 to-orange-500",
    },
    {
      name: "Advanced Security",
      description: "Next-generation privacy protection with built-in encryption",
      icon: Shield,
      color: "green",
      gradient: "from-green-400 to-emerald-500",
    },
    {
      name: "Seamless Integration",
      description: "Connect all your devices and services in perfect harmony",
      icon: Globe,
      color: "purple",
      gradient: "from-purple-400 to-pink-500",
    },
    {
      name: "Intuitive Experience",
      description: "Designed for humans, powered by intelligence",
      icon: Heart,
      color: "red",
      gradient: "from-red-400 to-rose-500",
    },
  ]

return (
    <div className="flex-1 p-8 overflow-auto">
      {/* Welcome Section */}
      <div className="text-center mb-12">
        <div className="flex items-center justify-center mb-6">
          <Apple className="w-16 h-16 text-white/80 mr-4" />
          <div>
            <h1 className="text-4xl font-bold text-white mb-2">Welcome to macOS Tahoe</h1>
            <p className="text-xl text-white/80">The future of computing, today</p>
          </div>
        </div>

<div className="max-w-2xl mx-auto">
          <p className="text-lg text-white/70 leading-relaxed">
            Experience the next evolution of macOS with revolutionary Liquid Glass design, enhanced performance, and
            seamless integration across all your devices.
          </p>
        </div>
      </div>

{/* Features Grid */}
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mb-12">
        {features.map((feature, index) => (
          <div
            key={index}
            onMouseEnter={() => setSelectedFeature(index)}
            onMouseLeave={() => setSelectedFeature(null)}
            className={`group relative p-6 rounded-2xl backdrop-blur-sm border transition-all duration-500 cursor-pointer shadow-lg hover:shadow-2xl transform hover:scale-[1.02] ${
              selectedFeature === index
                ? "bg-white/25 border-white/40 shadow-white/20"
                : "bg-gradient-to-br from-white/15 to-white/5 border-white/20 hover:border-white/40 hover:bg-white/20"
            }`}
          >
            {/* Animated background gradient */}
            <div
              className={`absolute inset-0 rounded-2xl bg-gradient-to-br ${feature.gradient} opacity-0 group-hover:opacity-10 transition-opacity duration-500`}
            />

<h3 className="font-semibold text-white text-lg mb-2 group-hover:text-white transition-colors">
                {feature.name}
              </h3>

<p className="text-white/70 text-sm leading-relaxed group-hover:text-white/90 transition-colors">
                {feature.description}
              </p>
            </div>

{/* Hover effect overlay */}
            {selectedFeature === index && (
              <div className="absolute inset-0 rounded-2xl bg-gradient-to-br from-white/5 to-transparent animate-in fade-in duration-300" />
            )}
          </div>
        ))}
      </div>

{/* Interactive Components Showcase */}
      <div className="space-y-8">
        <div className="text-center">
          <h2 className="text-2xl font-semibold text-white mb-2">Interactive Liquid Glass Components</h2>
          <p className="text-white/70">Experience the beauty of translucent design</p>
        </div>

{/* Getting Started Section */}
      <div className="mt-12 p-8 rounded-2xl bg-gradient-to-br from-white/10 to-white/5 backdrop-blur-sm border border-white/20">
        <div className="text-center">
          <h3 className="text-xl font-semibold text-white mb-4">Ready to Get Started?</h3>
          <p className="text-white/70 mb-6 max-w-md mx-auto">
            Explore the dock below to launch your favorite apps, or use Spotlight search to find anything instantly.
          </p>
          <div className="flex items-center justify-center gap-4 text-sm text-white/60">
            <div className="flex items-center gap-2">
              <kbd className="px-2 py-1 bg-white/20 rounded text-xs">⌘</kbd>
              <span>+</span>
              <kbd className="px-2 py-1 bg-white/20 rounded text-xs">Space</kbd>
              <span>for Spotlight</span>
            </div>
            <div className="w-px h-4 bg-white/20" />
            <span>Click dock icons to launch apps</span>
          </div>
        </div>
      </div>
    </div>
  )
}

function InteractiveComponentsShowcase() {
  const [sliderValue, setSliderValue] = useState(50)
  const [toggleStates, setToggleStates] = useState({ notifications: true, darkMode: false, autoSave: true })
  const [selectedTab, setSelectedTab] = useState("overview")

const toggleSetting = (key: keyof typeof toggleStates) => {
    setToggleStates((prev) => ({ ...prev, [key]: !prev[key] }))
  }

return (
    <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
      {/* Interactive Controls */}
      <div className="p-6 rounded-xl bg-gradient-to-br from-white/15 to-white/5 backdrop-blur-sm border border-white/20 hover:border-white/30 transition-all duration-300">
        <h3 className="font-medium text-white mb-4">Interactive Controls</h3>
        <div className="space-y-4">
          {/* Slider */}
          <div>
            <label className="text-sm text-white/80 mb-2 block">Volume: {sliderValue}%</label>
            <input
              type="range"
              min="0"
              max="100"
              value={sliderValue}
              onChange={(e) => setSliderValue(Number(e.target.value))}
              className="w-full h-2 bg-white/20 rounded-lg appearance-none cursor-pointer slider"
            />
          </div>

{/* Toggles */}
          <div className="space-y-3">
            {Object.entries(toggleStates).map(([key, value]) => (
              <div key={key} className="flex items-center justify-between">
                <span className="text-sm text-white/80 capitalize">{key.replace(/([A-Z])/g, " $1")}</span>
                <button
                  onClick={() => toggleSetting(key as keyof typeof toggleStates)}
                  className={`relative w-11 h-6 rounded-full transition-all duration-200 ${
                    value ? "bg-blue-500" : "bg-white/20"
                  }`}
                >
                  <div
                    className={`absolute top-1 w-4 h-4 bg-white rounded-full shadow-sm transition-all duration-200 ${
                      value ? "left-6" : "left-1"
                    }`}
                  />
                </button>
              </div>
            ))}
          </div>
        </div>
      </div>

{/* Tabbed Interface */}
      <div className="p-6 rounded-xl bg-gradient-to-br from-white/15 to-white/5 backdrop-blur-sm border border-white/20 hover:border-white/30 transition-all duration-300">
        <h3 className="font-medium text-white mb-4">Tabbed Interface</h3>
        <div className="space-y-4">
          <div className="flex gap-1 p-1 rounded-lg bg-white/10">
            {["overview", "details", "settings"].map((tab) => (
              <button
                key={tab}
                onClick={() => setSelectedTab(tab)}
                className={`flex-1 px-3 py-2 rounded-md text-sm font-medium transition-all duration-200 ${
                  selectedTab === tab
                    ? "bg-white/20 text-white shadow-sm"
                    : "text-white/70 hover:text-white hover:bg-white/10"
                }`}
              >
                {tab.charAt(0).toUpperCase() + tab.slice(1)}
              </button>
            ))}
          </div>
          <div className="p-4 rounded-lg bg-white/10 min-h-[80px] flex items-center justify-center">
            <p className="text-sm text-white/70 text-center">
              {selectedTab === "overview" && "Overview content with charts and summaries"}
              {selectedTab === "details" && "Detailed information and specifications"}
              {selectedTab === "settings" && "Configuration options and preferences"}
            </p>
          </div>
        </div>
      </div>
    </div>
  )
}</article></body></html>

Liquid Glass

Documents

Calculator

Notes

{note.title}

{selectedNote.title}

About

Tags

Share

About

Tags

Share

More Templates Like This

About

Tags

Share

About

Tags

Share

More Templates Like This