[V0_FILE]typescriptreact:file="components/desktop-icon.tsx" isEdit="true" isMerged="true" "use client" import type React from "react" import { useState } from "react" import { useFileSystem } from "@/contexts/file-system-context" import type { FileItem } from "@/types/file-system" import { Folder, FileText, File } from "lucide-react" interface DesktopIconProps { file: FileItem onDoubleClick?: () => void } export function DesktopIcon({ file, onDoubleClick }: DesktopIconProps) { const { moveFile } = useFileSystem() const [isDragging, setIsDragging] = useState(false) const [dragOffset, setDragOffset] = useState({ x: 0, y: 0 }) const getIcon = () => { if (file.icon) { return

} if (file.type === "folder") { return } else if (file.type === "file") { if (file.extension === "txt") { return } else if (file.extension === "pdf") { return } else if (["jpg", "png", "gif"].includes(file.extension || "")) { return } } return } const handleDragStart = (e: React.DragEvent) => { setIsDragging(true) // Set drag image const dragImage = new Image() dragImage.src = "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" // Transparent image e.dataTransfer.setDragImage(dragImage, 0, 0) // Store the file ID in the drag data e.dataTransfer.setData( "application/json", JSON.stringify({ fileId: file.id, fileType: file.type, fileName: file.name, }), ) // Calculate offset from the cursor to the top-left of the element const rect = e.currentTarget.getBoundingClientRect() setDragOffset({ x: e.clientX - rect.left, y: e.clientY - rect.top, }) // Set the drag effect e.dataTransfer.effectAllowed = "move" } const handleDragEnd = () => { setIsDragging(false) } return (

{getIcon()} {file.name}

) } [V0_FILE]typescriptreact:file="components/menu-bar.tsx" isMerged="true" "use client" import { Wifi, Battery, Search, Cog } from "lucide-react" import { useEffect, useState } from "react" export function MenuBar() { const [time, setTime] = useState("") useEffect(() => { const updateTime = () => { const now = new Date() const options: Intl.DateTimeFormatOptions = { weekday: "short", hour: "numeric", minute: "2-digit", } setTime(now.toLocaleString("en-US", options)) } updateTime() const interval = setInterval(updateTime, 60000) return () => clearInterval(interval) }, []) return (

Finder File Edit View Go Window Help

{time}

) } [V0_FILE]typescriptreact:file="components/dock.tsx" isEdit="true" isMerged="true" "use client" import { useContextMenu } from "./context-menu/context-menu-provider" import { Play, X, FolderOpen } from "lucide-react" interface DockProps { onFinderClick: () => void onPreferencesClick: () => void onSafariClick: () => void onTerminalClick: () => void activeWindows: { finder: boolean systemPreferences: boolean safari: boolean terminal: boolean } } export function Dock({ onFinderClick, onPreferencesClick, onSafariClick, onTerminalClick, activeWindows }: DockProps) { const { showContextMenu } = useContextMenu() const dockIcons = [ { icon: "/icons/finder.webp", name: "Finder", onClick: onFinderClick, isActive: activeWindows.finder, contextMenu: (x: number, y: number) => { showContextMenu({ items: [ { label: "Open", icon: , onClick: onFinderClick, }, { divider: true }, { label: "Hide", icon: , onClick: () => console.log("Hide Finder"), disabled: !activeWindows.finder, }, { label: "Quit", icon: , onClick: () => console.log("Quit Finder"), disabled: true, // Finder can't be quit in macOS }, ], x, y, title: "Finder", }) }, }, { icon: "/icons/safari.webp", name: "Safari", onClick: onSafariClick, isActive: activeWindows.safari, contextMenu: (x: number, y: number) => { showContextMenu({ items: [ { label: "Open", icon: , onClick: onSafariClick, }, { divider: true }, { label: "Hide", icon: , onClick: () => console.log("Hide Safari"), disabled: !activeWindows.safari, }, { label: "Quit", icon: , onClick: () => console.log("Quit Safari"), disabled: !activeWindows.safari, }, { divider: true }, { label: "Show in Finder", icon: , onClick: () => console.log("Show Safari in Finder"), }, ], x, y, title: "Safari", }) }, }, { icon: "/icons/calculator.webp", name: "Calculator", onClick: () => {}, isActive: false, contextMenu: (x: number, y: number) => { showContextMenu({ items: [ { label: "Open", icon: , onClick: () => console.log("Open Calculator"), }, { divider: true }, { label: "Show in Finder", icon: , onClick: () => console.log("Show Calculator in Finder"), }, ], x, y, title: "Calculator", }) }, }, { icon: "/icons/terminal.webp", name: "Terminal", onClick: onTerminalClick, isActive: activeWindows.terminal, contextMenu: (x: number, y: number) => { showContextMenu({ items: [ { label: "Open", icon: , onClick: onTerminalClick, }, { divider: true }, { label: "Hide", icon: , onClick: () => console.log("Hide Terminal"), disabled: !activeWindows.terminal, }, { label: "Quit", icon: , onClick: () => console.log("Quit Terminal"), disabled: !activeWindows.terminal, }, { divider: true }, { label: "Show in Finder", icon: , onClick: () => console.log("Show Terminal in Finder"), }, ], x, y, title: "Terminal", }) }, }, { icon: "/icons/system-preferences.webp", name: "System Preferences", onClick: onPreferencesClick, isActive: activeWindows.systemPreferences, contextMenu: (x: number, y: number) => { showContextMenu({ items: [ { label: "Open", icon: , onClick: onPreferencesClick, }, { divider: true }, { label: "Hide", icon: , onClick: () => console.log("Hide System Preferences"), disabled: !activeWindows.systemPreferences, }, { label: "Quit", icon: , onClick: () => console.log("Quit System Preferences"), disabled: !activeWindows.systemPreferences, }, { divider: true }, { label: "Show in Finder", icon: , onClick: () => console.log("Show System Preferences in Finder"), }, ], x, y, title: "System Preferences", }) }, }, ] return (

{dockIcons.map((icon, index) => (

{icon.name}

))}

) } [V0_FILE]typescriptreact:file="components/window-controls.tsx" isEdit="true" isMerged="true" "use client" interface WindowControlsProps { onClose: () => void onMaximize?: () => void } export function WindowControls({ onClose, onMaximize }: WindowControlsProps) { return (

) } [V0_FILE]typescriptreact:file="components/draggable-window.tsx" isEdit="true" isMerged="true" "use client" import { type ReactNode, useRef, useState, useEffect, type MouseEvent } from "react" import { WindowControls } from "./window-controls" import { useContextMenu } from "./context-menu/context-menu-provider" import { Minimize2, Maximize2, X, ArrowDown } from "lucide-react" interface DraggableWindowProps { title: string children: ReactNode width: string | number height: string | number zIndex: number position: { x: number; y: number } onClose: () => void onFocus: () => void onDrag: (x: number, y: number) => void onResize?: (width: number, height: number) => void onMaximize?: () => void isMaximized?: boolean } export function DraggableWindow({ title, children, width, height, zIndex, position, onClose, onFocus, onDrag, onResize, onMaximize, isMaximized = false, }: DraggableWindowProps) { const [isDragging, setIsDragging] = useState(false) const [isResizing, setIsResizing] = useState(false) const [resizeDirection, setResizeDirection] = useState(null) const dragRef = useRef<{ startX: number; startY: number }>() const resizeRef = useRef<{ startX: number; startY: number; startWidth: number; startHeight: number }>() const windowRef = useRef(null) const { showContextMenu } = useContextMenu() const handleMouseDown = (e: MouseEvent) => { // Don't allow dragging when maximized if (isMaximized) return onFocus() setIsDragging(true) dragRef.current = { startX: e.clientX - position.x, startY: e.clientY - position.y, } } const handleMouseMove = (e: MouseEvent) => { if (isDragging && dragRef.current) { const newX = e.clientX - dragRef.current.startX const newY = e.clientY - dragRef.current.startY onDrag(newX, newY) } else if (isResizing && resizeRef.current && resizeDirection) { const currentWidth = typeof width === "string" ? Number.parseInt(width) : width const currentHeight = typeof height === "string" ? Number.parseInt(height) : height let newWidth = currentWidth let newHeight = currentHeight let newX = position.x let newY = position.y if (resizeDirection.includes("e")) { newWidth = resizeRef.current.startWidth + (e.clientX - resizeRef.current.startX) } if (resizeDirection.includes("s")) { newHeight = resizeRef.current.startHeight + (e.clientY - resizeRef.current.startY) } if (resizeDirection.includes("w")) { const deltaX = e.clientX - resizeRef.current.startX newWidth = resizeRef.current.startWidth - deltaX newX = position.x + deltaX } if (resizeDirection.includes("n")) { const deltaY = e.clientY - resizeRef.current.startY newHeight = resizeRef.current.startHeight - deltaY newY = position.y + deltaY } // Minimum window size newWidth = Math.max(300, newWidth) newHeight = Math.max(200, newHeight) if (onResize) { onResize(newWidth, newHeight) } if (resizeDirection.includes("w") || resizeDirection.includes("n")) { onDrag(newX, newY) } } } const handleMouseUp = () => { setIsDragging(false) setIsResizing(false) setResizeDirection(null) } const handleResizeStart = (e: MouseEvent, direction: string) => { // Don't allow resizing when maximized if (isMaximized) return e.stopPropagation() e.preventDefault() onFocus() setIsResizing(true) setResizeDirection(direction) resizeRef.current = { startX: e.clientX, startY: e.clientY, startWidth: typeof width === "string" ? Number.parseInt(width) : width, startHeight: typeof height === "string" ? Number.parseInt(height) : height, } } const handleTitleDoubleClick = () => { if (onMaximize) { onMaximize() } } const handleTitlebarContextMenu = (e: MouseEvent) => { e.preventDefault() showContextMenu({ items: [ { label: "Minimize", icon: , onClick: () => console.log("Minimize window"), }, { label: "Zoom", icon: , onClick: onMaximize, }, { label: "Close", icon: , onClick: onClose, danger: true, }, { divider: true }, { label: "Move to Desktop", icon: , onClick: () => console.log("Move to Desktop"), }, ], x: e.clientX, y: e.clientY, }) } // Clean up event listeners useEffect(() => { const handleGlobalMouseUp = () => { setIsDragging(false) setIsResizing(false) } const handleGlobalMouseMove = (e: MouseEvent) => { if (isDragging && dragRef.current) { const newX = e.clientX - dragRef.current.startX const newY = e.clientY - dragRef.current.startY onDrag(newX, newY) } } window.addEventListener("mouseup", handleGlobalMouseUp) window.addEventListener("mousemove", handleGlobalMouseMove as any) return () => { window.removeEventListener("mouseup", handleGlobalMouseUp) window.removeEventListener("mousemove", handleGlobalMouseMove as any) } }, [isDragging, onDrag]) // Calculate styles based on maximized state const windowStyle = isMaximized ? { width: "100%", height: "calc(100vh - 80px)", // Leave space for menu bar and dock left: 0, top: 28, // Menu bar height zIndex, transition: "all 0.3s ease", borderRadius: "0.5rem 0.5rem 0 0", // Only round the top corners when maximized } : { width: typeof width === "string" ? width : `${width}px`, height: typeof height === "string" ? height : `${height}px`, left: position.x, top: position.y, zIndex, transition: "all 0.3s ease", } return (

{title}

{children}

{/* Resize handles - only show when not maximized */} {!isMaximized && ( <>

handleResizeStart(e, "se")} />

handleResizeStart(e, "sw")} />

handleResizeStart(e, "ne")} />

handleResizeStart(e, "nw")} />

handleResizeStart(e, "e")} />

handleResizeStart(e, "w")} />

handleResizeStart(e, "s")} />

handleResizeStart(e, "n")} /> )}

) } [V0_FILE]typescriptreact:file="components/folder-icon.tsx" isMerged="true" interface FolderIconProps { name: string color: "blue" | "green" | "red" | "yellow" | "purple" } export function FolderIcon({ name, color = "blue" }: FolderIconProps) { const colorMap = { blue: "text-blue-400", green: "text-green-400", red: "text-red-400", yellow: "text-yellow-400", purple: "text-purple-400", } return (

{name}

) } [V0_FILE]typescriptreact:file="components/preference-icon.tsx" isMerged="true" import { Monitor, Layout, Mic, Search, Globe, Users, Accessibility, Clock, Puzzle, Shield, Download, Network, Bluetooth, Volume2, Printer, Keyboard, MousePointer, Battery, } from "lucide-react" interface PreferenceIconProps { name: string icon: string } export function PreferenceIcon({ name, icon }: PreferenceIconProps) { const getIcon = () => { switch (icon) { case "general": return case "desktop": return case "dock": return case "mission": return case "siri": return case "spotlight": return case "language": return case "notifications": return case "internet": return case "users": return case "accessibility": return case "screentime": return case "extensions": return case "security": return case "update": return case "network": return case "bluetooth": return case "sound": return case "printers": return case "keyboard": return case "trackpad": return case "mouse": return case "displays": return case "energy": return default: return } } return (

{getIcon()}

{name}

) } [V0_FILE]typescript:file="tailwind.config.ts" isMerged="true" import type { Config } from "tailwindcss" const config: Config = { darkMode: ["class"], content: [ "./pages/**/*.{js,ts,jsx,tsx,mdx}", "./components/**/*.{js,ts,jsx,tsx,mdx}", "./app/**/*.{js,ts,jsx,tsx,mdx}", "*.{js,ts,jsx,tsx,mdx}", ], theme: { extend: { colors: { border: "hsl(var(--border))", input: "hsl(var(--input))", ring: "hsl(var(--ring))", background: "hsl(var(--background))", foreground: "hsl(var(--foreground))", primary: { DEFAULT: "hsl(var(--primary))", foreground: "hsl(var(--primary-foreground))", }, secondary: { DEFAULT: "hsl(var(--secondary))", foreground: "hsl(var(--secondary-foreground))", }, destructive: { DEFAULT: "hsl(var(--destructive))", foreground: "hsl(var(--destructive-foreground))", }, muted: { DEFAULT: "hsl(var(--muted))", foreground: "hsl(var(--muted-foreground))", }, accent: { DEFAULT: "hsl(var(--accent))", foreground: "hsl(var(--accent-foreground))", }, popover: { DEFAULT: "hsl(var(--popover))", foreground: "hsl(var(--popover-foreground))", }, card: { DEFAULT: "hsl(var(--card))", foreground: "hsl(var(--card-foreground))", }, }, borderRadius: { lg: "var(--radius)", md: "calc(var(--radius) - 2px)", sm: "calc(var(--radius) - 4px)", }, }, }, plugins: [require("tailwindcss-animate")], } export default config [V0_FILE]typescriptreact:file="components/boot-screen.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import { useEffect, useState, useRef } from "react" interface BootScreenProps { onBootComplete: () => void startBoot: boolean } export function BootScreen({ onBootComplete, startBoot }: BootScreenProps) { const [progress, setProgress] = useState(0) const [opacity, setOpacity] = useState(0) const [isComplete, setIsComplete] = useState(false) const [hasInteracted, setHasInteracted] = useState(false) const audioRef = useRef(null) useEffect(() => { // Create audio element audioRef.current = new Audio("/sounds/mac-startup.mp3") audioRef.current.volume = 0.7 // Start at 70% volume return () => { // Cleanup if (audioRef.current) { audioRef.current.pause() audioRef.current = null } } }, []) useEffect(() => { if (!startBoot) return // Play boot sound with fade-in effect if (audioRef.current) { audioRef.current.currentTime = 0 audioRef.current.play().catch((err) => { console.log("Audio play failed:", err) }) // Fade in volume let volume = 0 audioRef.current.volume = volume const fadeInterval = setInterval(() => { if (volume < 0.7) { volume += 0.1 if (audioRef.current) audioRef.current.volume = volume } else { clearInterval(fadeInterval) } }, 100) } // Fade in const fadeInTimeout = setTimeout(() => { setOpacity(1) }, 300) // Start progress after fade in const progressStartTimeout = setTimeout(() => { setProgress(100) }, 800) // Set complete after progress finishes const completeTimeout = setTimeout(() => { setIsComplete(true) setOpacity(0) }, 3000) // Trigger onBootComplete after fade out const bootCompleteTimeout = setTimeout(() => { onBootComplete() }, 3500) return () => { clearTimeout(fadeInTimeout) clearTimeout(progressStartTimeout) clearTimeout(completeTimeout) clearTimeout(bootCompleteTimeout) } }, [onBootComplete, startBoot]) const handleStartClick = () => { setHasInteracted(true) } if (!startBoot) { return (

) } return (

{/* Apple Logo */}

{/* Progress Bar Container */}

{/* Progress Bar */}

) } [V0_FILE]css:file="app/globals.css" isEdit="true" isMerged="true" @tailwind base; @tailwind components; @tailwind utilities; body { font-family: Arial, Helvetica, sans-serif; } @layer utilities { .text-balance { text-wrap: balance; } .duration-2000 { transition-duration: 2000ms; } } /* macOS Mojave style scrollbars */ ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.2); border-radius: 8px; opacity: 0; transition: opacity 0.3s; } ::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.3); } /* Only show scrollbars when hovering or actively scrolling */ ::-webkit-scrollbar-thumb { visibility: hidden; } *:hover::-webkit-scrollbar-thumb, *:focus::-webkit-scrollbar-thumb, *:active::-webkit-scrollbar-thumb { visibility: visible; } /* For Firefox */ * { scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, 0.2) transparent; } @layer base { :root { --background: 0 0% 100%; --foreground: 0 0% 3.9%; --card: 0 0% 100%; --card-foreground: 0 0% 3.9%; --popover: 0 0% 100%; --popover-foreground: 0 0% 3.9%; --primary: 0 0% 9%; --primary-foreground: 0 0% 98%; --secondary: 0 0% 96.1%; --secondary-foreground: 0 0% 9%; --muted: 0 0% 96.1%; --muted-foreground: 0 0% 45.1%; --accent: 0 0% 96.1%; --accent-foreground: 0 0% 9%; --destructive: 0 84.2% 60.2%; --destructive-foreground: 0 0% 98%; --border: 0 0% 89.8%; --input: 0 0% 89.8%; --ring: 0 0% 3.9%; --chart-1: 12 76% 61%; --chart-2: 173 58% 39%; --chart-3: 197 37% 24%; --chart-4: 43 74% 66%; --chart-5: 27 87% 67%; --radius: 0.5rem; --sidebar-background: 0 0% 98%; --sidebar-foreground: 240 5.3% 26.1%; --sidebar-primary: 240 5.9% 10%; --sidebar-primary-foreground: 0 0% 98%; --sidebar-accent: 240 4.8% 95.9%; --sidebar-accent-foreground: 240 5.9% 10%; --sidebar-border: 220 13% 91%; --sidebar-ring: 217.2 91.2% 59.8%; } .dark { --background: 0 0% 3.9%; --foreground: 0 0% 98%; --card: 0 0% 3.9%; --card-foreground: 0 0% 98%; --popover: 0 0% 3.9%; --popover-foreground: 0 0% 98%; --primary: 0 0% 98%; --primary-foreground: 0 0% 9%; --secondary: 0 0% 14.9%; --secondary-foreground: 0 0% 98%; --muted: 0 0% 14.9%; --muted-foreground: 0 0% 63.9%; --accent: 0 0% 14.9%; --accent-foreground: 0 0% 98%; --destructive: 0 62.8% 30.6%; --destructive-foreground: 0 0% 98%; --border: 0 0% 14.9%; --input: 0 0% 14.9%; --ring: 0 0% 83.1%; --chart-1: 220 70% 50%; --chart-2: 160 60% 45%; --chart-3: 30 80% 55%; --chart-4: 280 65% 60%; --chart-5: 340 75% 55%; --sidebar-background: 240 5.9% 10%; --sidebar-foreground: 240 4.8% 95.9%; --sidebar-primary: 224.3 76.3% 48%; --sidebar-primary-foreground: 0 0% 100%; --sidebar-accent: 240 3.7% 15.9%; --sidebar-accent-foreground: 240 4.8% 95.9%; --sidebar-border: 240 3.7% 15.9%; --sidebar-ring: 217.2 91.2% 59.8%; } } @layer base { * { @apply border-border; } body { @apply bg-background text-foreground; } } [V0_FILE]typescriptreact:file="components/login-screen.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import type React from "react" import { useState, useEffect } from "react" import { Lock, ChevronRight } from "lucide-react" interface LoginScreenProps { onLogin: (username: string, password: string) => void error: string | null } export function LoginScreen({ onLogin, error }: LoginScreenProps) { const [username, setUsername] = useState("admin") const [password, setPassword] = useState("") const [shake, setShake] = useState(false) const [currentTime, setCurrentTime] = useState("") const [currentDate, setCurrentDate] = useState("") useEffect(() => { const updateDateTime = () => { const now = new Date() const timeOptions: Intl.DateTimeFormatOptions = { hour: "numeric", minute: "2-digit", } const dateOptions: Intl.DateTimeFormatOptions = { weekday: "long", month: "long", day: "numeric", } setCurrentTime(now.toLocaleString("en-US", timeOptions)) setCurrentDate(now.toLocaleString("en-US", dateOptions)) } updateDateTime() const interval = setInterval(updateDateTime, 60000) return () => clearInterval(interval) }, []) useEffect(() => { if (error) { setShake(true) const timer = setTimeout(() => setShake(false), 500) return () => clearTimeout(timer) } }, [error]) const handleSubmit = (e: React.FormEvent) => { e.preventDefault() onLogin(username, password) } return (

{currentTime}

{currentDate}

John Doe

) } function Sleep(props: React.SVGProps) { return ( ) } function Power(props: React.SVGProps) { return ( ) } function RefreshCw(props: React.SVGProps) { return ( ) } [V0_FILE]plaintext:file="public/icons/terminal.webp" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/terminal-2021-06-03-mZ4EKRW8GMtiQUZF4R1tjfl9rMLkKX.webp" isMerged="true" [V0_FILE]plaintext:file="public/icons/safari.webp" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/safari-2021-06-02-XRidC0lfz6N9ipxHBFNPhx0TMnuRIf.webp" isMerged="true" [V0_FILE]plaintext:file="public/icons/finder.webp" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/finder-2021-09-10-lEU6QXIc10qwva2mDOiOJbLhi7xx4a.webp" isMerged="true" [V0_FILE]plaintext:file="public/icons/calculator.webp" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/calculator-2021-04-29-boWqeqCGRXtmQLIVZtjmGoKyxCn0Fi.webp" isMerged="true" [V0_FILE]plaintext:file="public/icons/system-preferences.webp" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/system-preferences-2021-06-03-2eWlekU6dJaGL8kKIbXEf563xUrM8g.webp" isMerged="true" [V0_FILE]plaintext:file="public/icons/apple-favicon.png" url="https://v0.blob.com/2dc15c12fa3ff33d1bbf57f2829f3c1c.png" isMerged="true" [V0_FILE]plaintext:file="public/icons/icloud-favicon.png" url="https://v0.blob.com/5b5af3d1d9d87ea63f4eec0d9a714356.png" isMerged="true" [V0_FILE]plaintext:file="public/icons/news-favicon.png" url="https://v0.blob.com/f0b5708bcc39e7e3dcb12a3f11a38c67.png" isMerged="true" [V0_FILE]plaintext:file="public/icons/maps-favicon.png" url="https://v0.blob.com/cce9b7bcd8d50e3b2b8eea1c01c25b7b.png" isMerged="true" [V0_FILE]plaintext:file="public/icons/amirsalmani-favicon.png" url="https://sjc.microlink.io/Qfa37SvSU3Mqd-Wv3V95YDtRYLy5Xpo7nm72Qat6fyS7x_J3aiZbR7S_5I5qDkKr_A3QMMM9MIB2RsXRJXvzNg.jpeg" isMerged="true" [V0_FILE]typescriptreact:file="components/context-menu/context-menu.tsx" isMerged="true" "use client" import type React from "react" import { useEffect, useRef, useState } from "react" import { createPortal } from "react-dom" import { X } from "lucide-react" export interface ContextMenuItem { label: string icon?: React.ReactNode onClick?: () => void disabled?: boolean danger?: boolean divider?: boolean } interface ContextMenuProps { items: ContextMenuItem[] x: number y: number onClose: () => void title?: string width?: number } export function ContextMenu({ items, x, y, onClose, title, width = 220 }: ContextMenuProps) { const [position, setPosition] = useState({ x, y }) const menuRef = useRef(null) useEffect(() => { // Adjust position if menu would go off screen if (menuRef.current) { const rect = menuRef.current.getBoundingClientRect() const newPosition = { ...position } if (rect.right > window.innerWidth) { newPosition.x = window.innerWidth - rect.width - 10 } if (rect.bottom > window.innerHeight) { newPosition.y = window.innerHeight - rect.height - 10 } if (newPosition.x !== position.x || newPosition.y !== position.y) { setPosition(newPosition) } } }, [position]) useEffect(() => { const handleClickOutside = (e: MouseEvent) => { if (menuRef.current && !menuRef.current.contains(e.target as Node)) { onClose() } } const handleEscape = (e: KeyboardEvent) => { if (e.key === "Escape") { onClose() } } document.addEventListener("mousedown", handleClickOutside) document.addEventListener("keydown", handleEscape) return () => { document.removeEventListener("mousedown", handleClickOutside) document.removeEventListener("keydown", handleEscape) } }, [onClose]) // Animation classes const animationClasses = "animate-in fade-in zoom-in-95 duration-100" return createPortal(

{title && (

{title}

)}

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

{item.divider ? (

) : ( )}

))}

, document.body, ) } [V0_FILE]typescriptreact:file="components/context-menu/context-menu-provider.tsx" isMerged="true" "use client" import { createContext, useContext, useState, type ReactNode } from "react" import { ContextMenu, type ContextMenuItem } from "./context-menu" interface ContextMenuContextType { showContextMenu: (params: { items: ContextMenuItem[] x: number y: number title?: string width?: number }) => void hideContextMenu: () => void } const ContextMenuContext = createContext(undefined) export function ContextMenuProvider({ children }: { children: ReactNode }) { const [contextMenu, setContextMenu] = useState<{ items: ContextMenuItem[] x: number y: number title?: string width?: number visible: boolean } | null>(null) const showContextMenu = ({ items, x, y, title, width, }: { items: ContextMenuItem[] x: number y: number title?: string width?: number }) => { setContextMenu({ items, x, y, title, width, visible: true }) } const hideContextMenu = () => { setContextMenu(null) } return ( {children} {contextMenu && contextMenu.visible && ( )} ) } export function useContextMenu() { const context = useContext(ContextMenuContext) if (!context) { throw new Error("useContextMenu must be used within a ContextMenuProvider") } return context } [V0_FILE]typescriptreact:file="components/menu-bar/menu-bar.tsx" isEdit="true" isMerged="true" "use client" import { useState, useEffect, useRef } from "react" import { Wifi, Battery, SearchIcon, Cog, BellDot } from "lucide-react" import { AppleIcon } from "./apple-icon" import { MenuDropdown } from "./menu-dropdown" import { finderMenus, safariMenus, terminalMenus, systemPreferencesMenus, defaultMenus } from "./menu-data" import { AppleMenu } from "../apple-menu/apple-menu" import { SpotlightSearch } from "../spotlight-search/spotlight-search" import { ControlCenter } from "../control-center/control-center" import { NotificationCenter } from "../notification-center/notification-center" interface MenuBarProps { activeWindow: "finder" | "safari" | "terminal" | "systemPreferences" | null onLogout?: () => void } export function MenuBar({ activeWindow, onLogout }: MenuBarProps) { const [time, setTime] = useState("") const [activeMenu, setActiveMenu] = useState(null) const [isMouseInMenu, setIsMouseInMenu] = useState(false) const [isAppleMenuOpen, setIsAppleMenuOpen] = useState(false) const [isSpotlightOpen, setIsSpotlightOpen] = useState(false) const [isControlCenterOpen, setIsControlCenterOpen] = useState(false) const [isNotificationCenterOpen, setIsNotificationCenterOpen] = useState(false) const appleMenuRef = useRef(null) const controlCenterRef = useRef(null) const notificationCenterRef = useRef(null) const spotlightRef = useRef(null) // Get the appropriate menu data based on the active window const getMenuData = () => { switch (activeWindow) { case "finder": return { title: "Finder", menus: finderMenus } case "safari": return { title: "Safari", menus: safariMenus } case "terminal": return { title: "Terminal", menus: terminalMenus } case "systemPreferences": return { title: "System Preferences", menus: systemPreferencesMenus } default: return { title: "Finder", menus: defaultMenus } } } const { title, menus } = getMenuData() useEffect(() => { const updateTime = () => { const now = new Date() const options: Intl.DateTimeFormatOptions = { weekday: "short", hour: "numeric", minute: "2-digit", } setTime(now.toLocaleString("en-US", options)) } updateTime() const interval = setInterval(updateTime, 60000) return () => clearInterval(interval) }, []) useEffect(() => { const handleClickOutside = (event: MouseEvent) => { // Close Apple Menu if clicked outside if (isAppleMenuOpen && appleMenuRef.current && !appleMenuRef.current.contains(event.target as Node)) { setIsAppleMenuOpen(false) } // Close Control Center if clicked outside if (isControlCenterOpen && controlCenterRef.current && !controlCenterRef.current.contains(event.target as Node)) { setIsControlCenterOpen(false) } // Close Notification Center if clicked outside if ( isNotificationCenterOpen && notificationCenterRef.current && !notificationCenterRef.current.contains(event.target as Node) ) { setIsNotificationCenterOpen(false) } // Close Spotlight if clicked outside if (isSpotlightOpen && spotlightRef.current && !spotlightRef.current.contains(event.target as Node)) { setIsSpotlightOpen(false) } } const handleEscapeKey = (event: KeyboardEvent) => { if (event.key === "Escape") { setIsAppleMenuOpen(false) setIsControlCenterOpen(false) setIsNotificationCenterOpen(false) setIsSpotlightOpen(false) setActiveMenu(null) } } document.addEventListener("mousedown", handleClickOutside) document.addEventListener("keydown", handleEscapeKey) return () => { document.removeEventListener("mousedown", handleClickOutside) document.removeEventListener("keydown", handleEscapeKey) } }, [isAppleMenuOpen, isControlCenterOpen, isNotificationCenterOpen, isSpotlightOpen]) const handleMenuMouseEnter = (menuId: string) => { if (activeMenu) { setActiveMenu(menuId) } } const handleMenuClick = (menuId: string) => { // Close other menus/panels when opening a menu setIsAppleMenuOpen(false) setIsControlCenterOpen(false) setIsNotificationCenterOpen(false) setIsSpotlightOpen(false) setActiveMenu(activeMenu === menuId ? null : menuId) } const handleMouseLeave = () => { setIsMouseInMenu(false) // Add a small delay before closing the menu to make it feel more natural setTimeout(() => { if (!isMouseInMenu) { setActiveMenu(null) } }, 300) } const toggleAppleMenu = () => { // Close other menus/panels when opening Apple Menu setActiveMenu(null) setIsControlCenterOpen(false) setIsNotificationCenterOpen(false) setIsSpotlightOpen(false) setIsAppleMenuOpen(!isAppleMenuOpen) } const toggleSpotlight = () => { // Close other menus/panels when opening Spotlight setActiveMenu(null) setIsAppleMenuOpen(false) setIsControlCenterOpen(false) setIsNotificationCenterOpen(false) setIsSpotlightOpen(!isSpotlightOpen) } const toggleControlCenter = () => { // Close other menus/panels when opening Control Center setActiveMenu(null) setIsAppleMenuOpen(false) setIsNotificationCenterOpen(false) setIsSpotlightOpen(false) setIsControlCenterOpen(!isControlCenterOpen) } const toggleNotificationCenter = () => { // Close other menus/panels when opening Notification Center setActiveMenu(null) setIsAppleMenuOpen(false) setIsControlCenterOpen(false) setIsSpotlightOpen(false) setIsNotificationCenterOpen(!isNotificationCenterOpen) } return ( <>

{isAppleMenuOpen && }

{title} {menus.map((menu) => (

{activeMenu === menu.id && ( setIsMouseInMenu(true)} onMouseLeave={() => setIsMouseInMenu(false)} /> )}

))}

{isControlCenterOpen && }

{isSpotlightOpen && setIsSpotlightOpen(false)} />} {isNotificationCenterOpen && setIsNotificationCenterOpen(false)} />} ) } [V0_FILE]typescriptreact:file="components/menu-bar/apple-icon.tsx" isMerged="true" export function AppleIcon({ className }: { className?: string }) { return ( ) } [V0_FILE]typescriptreact:file="components/menu-bar/menu-dropdown.tsx" isMerged="true" "use client" import { Check, ChevronRight } from "lucide-react" export interface MenuItem { id: string label: string shortcut?: string action?: () => void submenu?: MenuItem[] divider?: boolean checked?: boolean disabled?: boolean } interface MenuDropdownProps { items: MenuItem[] onMouseEnter?: () => void onMouseLeave?: () => void isSubmenu?: boolean parentWidth?: number } export function MenuDropdown({ items, onMouseEnter, onMouseLeave, isSubmenu = false, parentWidth = 0, }: MenuDropdownProps) { const handleItemClick = (item: MenuItem) => { if (item.action && !item.disabled) { item.action() } } return (

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

{item.divider ? (

) : (

{item.submenu && (

)}

))}

) } [V0_FILE]typescriptreact:file="components/menu-bar/menu-data.tsx" isMerged="true" import type { MenuItem } from "./menu-dropdown" // Apple Menu - Common for all apps export const appleMenu: MenuItem[] = [ { id: "about", label: "About This Mac", action: () => console.log("About This Mac") }, { id: "divider1", divider: true }, { id: "preferences", label: "System Preferences...", action: () => console.log("System Preferences") }, { id: "appstore", label: "App Store...", action: () => console.log("App Store") }, { id: "divider2", divider: true }, { id: "recent", label: "Recent Items", submenu: [{ id: "no-recent", label: "No Recent Items", disabled: true }] }, { id: "divider3", divider: true }, { id: "sleep", label: "Sleep", action: () => console.log("Sleep") }, { id: "restart", label: "Restart...", action: () => console.log("Restart") }, { id: "shutdown", label: "Shut Down...", action: () => console.log("Shut Down") }, { id: "divider4", divider: true }, { id: "logout", label: "Log Out Admin...", shortcut: "⇧⌘Q", action: () => console.log("Log Out") }, ] // Finder Menus export const finderMenus = [ { id: "finder", label: "Finder", items: [ { id: "about", label: "About Finder", action: () => console.log("About Finder") }, { id: "divider1", divider: true }, { id: "preferences", label: "Preferences...", shortcut: "⌘,", action: () => console.log("Preferences") }, { id: "divider2", divider: true }, { id: "empty-trash", label: "Empty Trash...", action: () => console.log("Empty Trash") }, { id: "divider3", divider: true }, { id: "services", label: "Services", submenu: [{ id: "no-services", label: "No Services Apply", disabled: true }], }, { id: "divider4", divider: true }, { id: "hide-finder", label: "Hide Finder", shortcut: "⌘H", action: () => console.log("Hide Finder") }, { id: "hide-others", label: "Hide Others", shortcut: "⌥⌘H", action: () => console.log("Hide Others") }, { id: "show-all", label: "Show All", action: () => console.log("Show All") }, ], }, { id: "file", label: "File", items: [ { id: "new-finder-window", label: "New Finder Window", shortcut: "⌘N", action: () => console.log("New Finder Window"), }, { id: "new-folder", label: "New Folder", shortcut: "⇧⌘N", action: () => console.log("New Folder") }, { id: "new-folder-with", label: "New Folder with Selection", shortcut: "⌥⌘N", action: () => console.log("New Folder with Selection"), }, { id: "new-smart-folder", label: "New Smart Folder", action: () => console.log("New Smart Folder") }, { id: "new-tab", label: "New Tab", shortcut: "⌘T", action: () => console.log("New Tab") }, { id: "divider1", divider: true }, { id: "open", label: "Open", shortcut: "⌘O", action: () => console.log("Open") }, { id: "open-with", label: "Open With", submenu: [ { id: "choose-app", label: "Choose Application...", action: () => console.log("Choose Application") }, ], }, { id: "divider2", divider: true }, { id: "close-window", label: "Close Window", shortcut: "⌘W", action: () => console.log("Close Window") }, { id: "get-info", label: "Get Info", shortcut: "⌘I", action: () => console.log("Get Info") }, { id: "rename", label: "Rename", action: () => console.log("Rename") }, { id: "divider3", divider: true }, { id: "compress", label: "Compress", action: () => console.log("Compress") }, { id: "divider4", divider: true }, { id: "duplicate", label: "Duplicate", shortcut: "⌘D", action: () => console.log("Duplicate") }, { id: "make-alias", label: "Make Alias", shortcut: "⌥⌘L", action: () => console.log("Make Alias") }, { id: "quick-look", label: "Quick Look", shortcut: "⌘Y", action: () => console.log("Quick Look") }, { id: "print", label: "Print", shortcut: "⌘P", action: () => console.log("Print") }, { id: "divider5", divider: true }, { id: "move-to-trash", label: "Move to Trash", shortcut: "⌘⌫", action: () => console.log("Move to Trash") }, { id: "eject", label: "Eject", shortcut: "⌘E", action: () => console.log("Eject") }, { id: "divider6", divider: true }, { id: "find", label: "Find", shortcut: "⌘F", action: () => console.log("Find") }, { id: "divider7", divider: true }, { id: "tags", label: "Tags...", action: () => console.log("Tags") }, ], }, { id: "edit", label: "Edit", items: [ { id: "undo", label: "Undo", shortcut: "⌘Z", action: () => console.log("Undo"), disabled: true }, { id: "redo", label: "Redo", shortcut: "⇧⌘Z", action: () => console.log("Redo"), disabled: true }, { id: "divider1", divider: true }, { id: "cut", label: "Cut", shortcut: "⌘X", action: () => console.log("Cut"), disabled: true }, { id: "copy", label: "Copy", shortcut: "⌘C", action: () => console.log("Copy"), disabled: true }, { id: "paste", label: "Paste", shortcut: "⌘V", action: () => console.log("Paste"), disabled: true }, { id: "select-all", label: "Select All", shortcut: "⌘A", action: () => console.log("Select All") }, { id: "divider2", divider: true }, { id: "show-clipboard", label: "Show Clipboard", action: () => console.log("Show Clipboard") }, { id: "divider3", divider: true }, { id: "start-dictation", label: "Start Dictation...", shortcut: "fn fn", action: () => console.log("Start Dictation"), }, { id: "emoji", label: "Emoji & Symbols", shortcut: "⌃⌘Space", action: () => console.log("Emoji & Symbols") }, ], }, { id: "view", label: "View", items: [ { id: "as-icons", label: "as Icons", shortcut: "⌘1", action: () => console.log("as Icons"), checked: true }, { id: "as-list", label: "as List", shortcut: "⌘2", action: () => console.log("as List") }, { id: "as-columns", label: "as Columns", shortcut: "⌘3", action: () => console.log("as Columns") }, { id: "as-gallery", label: "as Gallery", shortcut: "⌘4", action: () => console.log("as Gallery") }, { id: "divider1", divider: true }, { id: "use-groups", label: "Use Groups", shortcut: "⌘J", action: () => console.log("Use Groups"), checked: true }, { id: "sort-by", label: "Sort By", submenu: [ { id: "name", label: "Name", action: () => console.log("Sort by Name"), checked: true }, { id: "kind", label: "Kind", action: () => console.log("Sort by Kind") }, { id: "date-added", label: "Date Added", action: () => console.log("Sort by Date Added") }, { id: "date-modified", label: "Date Modified", action: () => console.log("Sort by Date Modified") }, { id: "size", label: "Size", action: () => console.log("Sort by Size") }, { id: "tags", label: "Tags", action: () => console.log("Sort by Tags") }, ], }, { id: "divider2", divider: true }, { id: "hide-sidebar", label: "Hide Sidebar", shortcut: "⌥⌘S", action: () => console.log("Hide Sidebar") }, { id: "hide-preview", label: "Hide Preview", shortcut: "⇧⌘P", action: () => console.log("Hide Preview") }, { id: "divider3", divider: true }, { id: "hide-toolbar", label: "Hide Toolbar", shortcut: "⌥⌘T", action: () => console.log("Hide Toolbar") }, { id: "show-all-tabs", label: "Show All Tabs", shortcut: "⇧⌘\\", action: () => console.log("Show All Tabs") }, { id: "hide-tab-bar", label: "Hide Tab Bar", shortcut: "⇧⌘T", action: () => console.log("Hide Tab Bar") }, { id: "hide-path-bar", label: "Hide Path Bar", shortcut: "⌥⌘P", action: () => console.log("Hide Path Bar") }, { id: "hide-status-bar", label: "Hide Status Bar", shortcut: "⌘/", action: () => console.log("Hide Status Bar") }, { id: "divider4", divider: true }, { id: "customize-toolbar", label: "Customize Toolbar...", action: () => console.log("Customize Toolbar") }, { id: "divider5", divider: true }, { id: "show-view-options", label: "Show View Options", shortcut: "⌘J", action: () => console.log("Show View Options"), }, ], }, { id: "go", label: "Go", items: [ { id: "back", label: "Back", shortcut: "⌘[", action: () => console.log("Back"), disabled: true }, { id: "forward", label: "Forward", shortcut: "⌘]", action: () => console.log("Forward"), disabled: true }, { id: "enclosing-folder", label: "Enclosing Folder", shortcut: "⌘↑", action: () => console.log("Enclosing Folder"), }, { id: "divider1", divider: true }, { id: "recents", label: "Recents", shortcut: "⇧⌘F", action: () => console.log("Recents") }, { id: "documents", label: "Documents", shortcut: "⇧⌘O", action: () => console.log("Documents") }, { id: "desktop", label: "Desktop", shortcut: "⇧⌘D", action: () => console.log("Desktop") }, { id: "downloads", label: "Downloads", shortcut: "⌥⌘L", action: () => console.log("Downloads") }, { id: "home", label: "Home", shortcut: "⇧⌘H", action: () => console.log("Home") }, { id: "computer", label: "Computer", shortcut: "⇧⌘C", action: () => console.log("Computer") }, { id: "airdrop", label: "AirDrop", shortcut: "⇧⌘R", action: () => console.log("AirDrop") }, { id: "network", label: "Network", shortcut: "⇧⌘K", action: () => console.log("Network") }, { id: "icloud", label: "iCloud Drive", shortcut: "⇧⌘I", action: () => console.log("iCloud Drive") }, { id: "applications", label: "Applications", shortcut: "⇧⌘A", action: () => console.log("Applications") }, { id: "utilities", label: "Utilities", shortcut: "⇧⌘U", action: () => console.log("Utilities") }, { id: "divider2", divider: true }, { id: "go-to-folder", label: "Go to Folder...", shortcut: "⇧⌘G", action: () => console.log("Go to Folder") }, { id: "connect-to-server", label: "Connect to Server...", shortcut: "⌘K", action: () => console.log("Connect to Server"), }, ], }, { id: "window", label: "Window", items: [ { id: "minimize", label: "Minimize", shortcut: "⌘M", action: () => console.log("Minimize") }, { id: "zoom", label: "Zoom", action: () => console.log("Zoom") }, { id: "cycle", label: "Cycle Through Windows", shortcut: "⌘`", action: () => console.log("Cycle Through Windows"), }, { id: "divider1", divider: true }, { id: "bring-all-to-front", label: "Bring All to Front", action: () => console.log("Bring All to Front") }, { id: "divider2", divider: true }, { id: "finder", label: "Finder", checked: true, action: () => console.log("Show Finder") }, ], }, { id: "help", label: "Help", items: [ { id: "finder-help", label: "macOS Help", action: () => console.log("macOS Help") }, { id: "divider1", divider: true }, { id: "see-whats-new", label: "See What's New in macOS", action: () => console.log("See What's New in macOS") }, { id: "new-to-mac", label: "New to Mac? Tour the Basics", action: () => console.log("New to Mac? Tour the Basics"), }, { id: "divider2", divider: true }, { id: "keyboard-shortcuts", label: "Keyboard Shortcuts", action: () => console.log("Keyboard Shortcuts") }, ], }, ] // Safari Menus export const safariMenus = [ { id: "safari", label: "Safari", items: [ { id: "about", label: "About Safari", action: () => console.log("About Safari") }, { id: "divider1", divider: true }, { id: "preferences", label: "Preferences...", shortcut: "⌘,", action: () => console.log("Preferences") }, { id: "divider2", divider: true }, { id: "clear-history", label: "Clear History...", action: () => console.log("Clear History") }, { id: "divider3", divider: true }, { id: "services", label: "Services", submenu: [{ id: "no-services", label: "No Services Apply", disabled: true }], }, { id: "divider4", divider: true }, { id: "hide-safari", label: "Hide Safari", shortcut: "⌘H", action: () => console.log("Hide Safari") }, { id: "hide-others", label: "Hide Others", shortcut: "⌥⌘H", action: () => console.log("Hide Others") }, { id: "show-all", label: "Show All", action: () => console.log("Show All") }, { id: "divider5", divider: true }, { id: "quit", label: "Quit Safari", shortcut: "⌘Q", action: () => console.log("Quit Safari") }, ], }, { id: "file", label: "File", items: [ { id: "new-window", label: "New Window", shortcut: "⌘N", action: () => console.log("New Window") }, { id: "new-private-window", label: "New Private Window", shortcut: "⇧⌘N", action: () => console.log("New Private Window"), }, { id: "new-tab", label: "New Tab", shortcut: "⌘T", action: () => console.log("New Tab") }, { id: "divider1", divider: true }, { id: "open-file", label: "Open File...", shortcut: "⌘O", action: () => console.log("Open File") }, { id: "open-location", label: "Open Location...", shortcut: "⌘L", action: () => console.log("Open Location") }, { id: "divider2", divider: true }, { id: "close-window", label: "Close Window", shortcut: "⌘W", action: () => console.log("Close Window") }, { id: "close-tab", label: "Close Tab", shortcut: "⌘W", action: () => console.log("Close Tab") }, { id: "save-as", label: "Save As...", shortcut: "⇧⌘S", action: () => console.log("Save As") }, { id: "divider3", divider: true }, { id: "share", label: "Share", submenu: [ { id: "email-link", label: "Email This Page", action: () => console.log("Email This Page") }, { id: "messages", label: "Messages", action: () => console.log("Messages") }, { id: "airdrop", label: "AirDrop", action: () => console.log("AirDrop") }, { id: "notes", label: "Notes", action: () => console.log("Notes") }, { id: "reminders", label: "Reminders", action: () => console.log("Reminders") }, ], }, { id: "divider4", divider: true }, { id: "print", label: "Print...", shortcut: "⌘P", action: () => console.log("Print") }, ], }, { id: "edit", label: "Edit", items: [ { id: "undo", label: "Undo", shortcut: "⌘Z", action: () => console.log("Undo"), disabled: true }, { id: "redo", label: "Redo", shortcut: "⇧⌘Z", action: () => console.log("Redo"), disabled: true }, { id: "divider1", divider: true }, { id: "cut", label: "Cut", shortcut: "⌘X", action: () => console.log("Cut"), disabled: true }, { id: "copy", label: "Copy", shortcut: "⌘C", action: () => console.log("Copy") }, { id: "paste", label: "Paste", shortcut: "⌘V", action: () => console.log("Paste") }, { id: "paste-and-match-style", label: "Paste and Match Style", shortcut: "⌥⇧⌘V", action: () => console.log("Paste and Match Style"), }, { id: "select-all", label: "Select All", shortcut: "⌘A", action: () => console.log("Select All") }, { id: "divider2", divider: true }, { id: "find", label: "Find", submenu: [ { id: "find", label: "Find...", shortcut: "⌘F", action: () => console.log("Find") }, { id: "find-next", label: "Find Next", shortcut: "⌘G", action: () => console.log("Find Next") }, { id: "find-previous", label: "Find Previous", shortcut: "⇧⌘G", action: () => console.log("Find Previous") }, { id: "use-selection", label: "Use Selection for Find", shortcut: "⌘E", action: () => console.log("Use Selection for Find"), }, { id: "jump-to-selection", label: "Jump to Selection", shortcut: "⌘J", action: () => console.log("Jump to Selection"), }, ], }, { id: "divider3", divider: true }, { id: "spelling", label: "Spelling and Grammar", submenu: [ { id: "show", label: "Show Spelling and Grammar", shortcut: "⌘:", action: () => console.log("Show Spelling and Grammar"), }, { id: "check-document", label: "Check Document Now", shortcut: "⌘;", action: () => console.log("Check Document Now"), }, { id: "divider1", divider: true }, { id: "check-spelling", label: "Check Spelling While Typing", action: () => console.log("Check Spelling While Typing"), checked: true, }, { id: "check-grammar", label: "Check Grammar With Spelling", action: () => console.log("Check Grammar With Spelling"), checked: true, }, { id: "correct-spelling", label: "Correct Spelling Automatically", action: () => console.log("Correct Spelling Automatically"), checked: true, }, ], }, { id: "substitutions", label: "Substitutions", submenu: [ { id: "show-substitutions", label: "Show Substitutions", action: () => console.log("Show Substitutions") }, { id: "divider1", divider: true }, { id: "smart-quotes", label: "Smart Quotes", action: () => console.log("Smart Quotes"), checked: true }, { id: "smart-dashes", label: "Smart Dashes", action: () => console.log("Smart Dashes"), checked: true }, { id: "text-replacement", label: "Text Replacement", action: () => console.log("Text Replacement"), checked: true, }, ], }, { id: "speech", label: "Speech", submenu: [ { id: "start-speaking", label: "Start Speaking", action: () => console.log("Start Speaking") }, { id: "stop-speaking", label: "Stop Speaking", action: () => console.log("Stop Speaking"), disabled: true }, ], }, ], }, { id: "view", label: "View", items: [ { id: "always-show-toolbar", label: "Always Show Toolbar in Full Screen", action: () => console.log("Always Show Toolbar in Full Screen"), checked: true, }, { id: "always-show-tab-bar", label: "Always Show Tab Bar", action: () => console.log("Always Show Tab Bar"), checked: true, }, { id: "show-favorites-bar", label: "Show Favorites Bar", shortcut: "⇧⌘B", action: () => console.log("Show Favorites Bar"), checked: true, }, { id: "show-status-bar", label: "Show Status Bar", action: () => console.log("Show Status Bar") }, { id: "divider1", divider: true }, { id: "stop", label: "Stop", shortcut: "⌘.", action: () => console.log("Stop") }, { id: "reload", label: "Reload Page", shortcut: "⌘R", action: () => console.log("Reload Page") }, { id: "divider2", divider: true }, { id: "text-size", label: "Text Size", submenu: [ { id: "bigger", label: "Make Text Bigger", shortcut: "⌘+", action: () => console.log("Make Text Bigger") }, { id: "smaller", label: "Make Text Smaller", shortcut: "⌘-", action: () => console.log("Make Text Smaller") }, { id: "default", label: "Actual Size", shortcut: "⌘0", action: () => console.log("Actual Size") }, ], }, { id: "divider3", divider: true }, { id: "enter-full-screen", label: "Enter Full Screen", shortcut: "⌃⌘F", action: () => console.log("Enter Full Screen"), }, ], }, { id: "history", label: "History", items: [ { id: "back", label: "Back", shortcut: "⌘[", action: () => console.log("Back"), disabled: true }, { id: "forward", label: "Forward", shortcut: "⌘]", action: () => console.log("Forward"), disabled: true }, { id: "divider1", divider: true }, { id: "home", label: "Home", action: () => console.log("Home") }, { id: "divider2", divider: true }, { id: "show-history", label: "Show All History", shortcut: "⌥⌘2", action: () => console.log("Show All History") }, { id: "clear-history", label: "Clear History...", action: () => console.log("Clear History") }, { id: "divider3", divider: true }, { id: "reopen-last-closed-tab", label: "Reopen Last Closed Tab", shortcut: "⇧⌘T", action: () => console.log("Reopen Last Closed Tab"), disabled: true, }, { id: "reopen-last-closed-window", label: "Reopen Last Closed Window", action: () => console.log("Reopen Last Closed Window"), disabled: true, }, { id: "divider4", divider: true }, { id: "recently-closed", label: "Recently Closed", submenu: [{ id: "no-recently-closed", label: "No Recently Closed Items", disabled: true }], }, ], }, { id: "bookmarks", label: "Bookmarks", items: [ { id: "add-bookmark", label: "Add Bookmark...", shortcut: "⌘D", action: () => console.log("Add Bookmark") }, { id: "add-bookmarks-for-tabs", label: "Add Bookmarks for These Tabs...", action: () => console.log("Add Bookmarks for These Tabs"), }, { id: "divider1", divider: true }, { id: "show-bookmarks", label: "Show Bookmarks", shortcut: "⌥⌘1", action: () => console.log("Show Bookmarks") }, { id: "show-bookmarks-sidebar", label: "Show Bookmarks Sidebar", shortcut: "⇧⌘L", action: () => console.log("Show Bookmarks Sidebar"), }, { id: "divider2", divider: true }, { id: "bookmarks-menu", label: "Bookmarks Menu", submenu: [ { id: "about-bookmarks", label: "About Bookmarks Menu", disabled: true }, { id: "divider1", divider: true }, { id: "apple", label: "Apple", action: () => console.log("Apple Bookmark") }, { id: "icloud", label: "iCloud", action: () => console.log("iCloud Bookmark") }, { id: "mac", label: "Mac", action: () => console.log("Mac Bookmark") }, ], }, ], }, { id: "window", label: "Window", items: [ { id: "minimize", label: "Minimize", shortcut: "⌘M", action: () => console.log("Minimize") }, { id: "zoom", label: "Zoom", action: () => console.log("Zoom") }, { id: "cycle", label: "Cycle Through Windows", shortcut: "⌘`", action: () => console.log("Cycle Through Windows"), }, { id: "divider1", divider: true }, { id: "show-downloads", label: "Downloads", shortcut: "⌥⌘L", action: () => console.log("Show Downloads") }, { id: "divider2", divider: true }, { id: "bring-all-to-front", label: "Bring All to Front", action: () => console.log("Bring All to Front") }, { id: "divider3", divider: true }, { id: "safari", label: "Safari", checked: true, action: () => console.log("Show Safari") }, ], }, { id: "help", label: "Help", items: [ { id: "safari-help", label: "Safari Help", action: () => console.log("Safari Help") }, { id: "divider1", divider: true }, { id: "report-website-issue", label: "Report Website Issue", action: () => console.log("Report Website Issue") }, { id: "report-fraud", label: "Report Fraudulent Website", action: () => console.log("Report Fraudulent Website"), }, ], }, ] // Terminal Menus export const terminalMenus = [ { id: "terminal", label: "Terminal", items: [ { id: "about", label: "About Terminal", action: () => console.log("About Terminal") }, { id: "divider1", divider: true }, { id: "preferences", label: "Preferences...", shortcut: "⌘,", action: () => console.log("Preferences") }, { id: "divider2", divider: true }, { id: "services", label: "Services", submenu: [{ id: "no-services", label: "No Services Apply", disabled: true }], }, { id: "divider3", divider: true }, { id: "hide-terminal", label: "Hide Terminal", shortcut: "⌘H", action: () => console.log("Hide Terminal") }, { id: "hide-others", label: "Hide Others", shortcut: "⌥⌘H", action: () => console.log("Hide Others") }, { id: "show-all", label: "Show All", action: () => console.log("Show All") }, { id: "divider4", divider: true }, { id: "quit", label: "Quit Terminal", shortcut: "⌘Q", action: () => console.log("Quit Terminal") }, ], }, { id: "shell", label: "Shell", items: [ { id: "new-window", label: "New Window", shortcut: "⌘N", action: () => console.log("New Window") }, { id: "new-tab", label: "New Tab", shortcut: "⌘T", action: () => console.log("New Tab") }, { id: "divider1", divider: true }, { id: "close-window", label: "Close Window", shortcut: "⇧⌘W", action: () => console.log("Close Window") }, { id: "close-tab", label: "Close Tab", shortcut: "⌘W", action: () => console.log("Close Tab") }, { id: "divider2", divider: true }, { id: "export-text-as", label: "Export Text As...", action: () => console.log("Export Text As") }, { id: "export-selected-text-as", label: "Export Selected Text As...", action: () => console.log("Export Selected Text As"), disabled: true, }, { id: "show-info", label: "Show Info", shortcut: "⌘I", action: () => console.log("Show Info") }, { id: "divider3", divider: true }, { id: "print", label: "Print...", shortcut: "⌘P", action: () => console.log("Print") }, ], }, { id: "edit", label: "Edit", items: [ { id: "undo", label: "Undo", shortcut: "⌘Z", action: () => console.log("Undo"), disabled: true }, { id: "redo", label: "Redo", shortcut: "⇧⌘Z", action: () => console.log("Redo"), disabled: true }, { id: "divider1", divider: true }, { id: "cut", label: "Cut", shortcut: "⌘X", action: () => console.log("Cut"), disabled: true }, { id: "copy", label: "Copy", shortcut: "⌘C", action: () => console.log("Copy") }, { id: "paste", label: "Paste", shortcut: "⌘V", action: () => console.log("Paste") }, { id: "paste-selection", label: "Paste Selection", action: () => console.log("Paste Selection") }, { id: "select-all", label: "Select All", shortcut: "⌘A", action: () => console.log("Select All") }, { id: "divider2", divider: true }, { id: "find", label: "Find", submenu: [ { id: "find", label: "Find...", shortcut: "⌘F", action: () => console.log("Find") }, { id: "find-next", label: "Find Next", shortcut: "⌘G", action: () => console.log("Find Next") }, { id: "find-previous", label: "Find Previous", shortcut: "⇧⌘G", action: () => console.log("Find Previous") }, { id: "use-selection", label: "Use Selection for Find", shortcut: "⌘E", action: () => console.log("Use Selection for Find"), }, { id: "jump-to-selection", label: "Jump to Selection", shortcut: "⌘J", action: () => console.log("Jump to Selection"), }, ], }, { id: "divider3", divider: true }, { id: "mark", label: "Mark", submenu: [ { id: "mark-prompt", label: "Mark Prompt", action: () => console.log("Mark Prompt") }, { id: "divider1", divider: true }, { id: "clear-mark", label: "Clear Mark", action: () => console.log("Clear Mark") }, ], }, { id: "divider4", divider: true }, { id: "start-dictation", label: "Start Dictation...", shortcut: "fn fn", action: () => console.log("Start Dictation"), }, { id: "emoji", label: "Emoji & Symbols", shortcut: "⌃⌘Space", action: () => console.log("Emoji & Symbols") }, ], }, { id: "view", label: "View", items: [ { id: "show-toolbar", label: "Show Toolbar", action: () => console.log("Show Toolbar"), checked: true }, { id: "customize-toolbar", label: "Customize Toolbar...", action: () => console.log("Customize Toolbar") }, { id: "divider1", divider: true }, { id: "line-wrap", label: "Allow Line Wrapping", action: () => console.log("Allow Line Wrapping"), checked: true, }, { id: "divider2", divider: true }, { id: "default-font", label: "Use Default Font", shortcut: "⌘0", action: () => console.log("Use Default Font") }, { id: "bigger", label: "Bigger", shortcut: "⌘+", action: () => console.log("Bigger") }, { id: "smaller", label: "Smaller", shortcut: "⌘-", action: () => console.log("Smaller") }, { id: "divider3", divider: true }, { id: "show-tab-bar", label: "Show Tab Bar", action: () => console.log("Show Tab Bar"), checked: true }, { id: "divider4", divider: true }, { id: "enter-full-screen", label: "Enter Full Screen", shortcut: "⌃⌘F", action: () => console.log("Enter Full Screen"), }, ], }, { id: "window", label: "Window", items: [ { id: "minimize", label: "Minimize", shortcut: "⌘M", action: () => console.log("Minimize") }, { id: "zoom", label: "Zoom", action: () => console.log("Zoom") }, { id: "cycle", label: "Cycle Through Windows", shortcut: "⌘`", action: () => console.log("Cycle Through Windows"), }, { id: "divider1", divider: true }, { id: "bring-all-to-front", label: "Bring All to Front", action: () => console.log("Bring All to Front") }, { id: "divider2", divider: true }, { id: "terminal", label: "Terminal", checked: true, action: () => console.log("Show Terminal") }, ], }, { id: "help", label: "Help", items: [ { id: "terminal-help", label: "Terminal Help", action: () => console.log("Terminal Help") }, { id: "divider1", divider: true }, { id: "command-line-tools", label: "Command Line Developer Tools", submenu: [ { id: "install", label: "Install", action: () => console.log("Install Command Line Tools") }, { id: "uninstall", label: "Uninstall", action: () => console.log("Uninstall Command Line Tools") }, ], }, ], }, ] // System Preferences Menus export const systemPreferencesMenus = [ { id: "system-preferences", label: "System Preferences", items: [ { id: "about", label: "About System Preferences", action: () => console.log("About System Preferences") }, { id: "divider1", divider: true }, { id: "services", label: "Services", submenu: [{ id: "no-services", label: "No Services Apply", disabled: true }], }, { id: "divider2", divider: true }, { id: "hide-system-preferences", label: "Hide System Preferences", shortcut: "⌘H", action: () => console.log("Hide System Preferences"), }, { id: "hide-others", label: "Hide Others", shortcut: "⌥⌘H", action: () => console.log("Hide Others") }, { id: "show-all", label: "Show All", action: () => console.log("Show All") }, { id: "divider3", divider: true }, { id: "quit", label: "Quit System Preferences", shortcut: "⌘Q", action: () => console.log("Quit System Preferences"), }, ], }, { id: "view", label: "View", items: [ { id: "as-icons", label: "as Icons", action: () => console.log("View as Icons"), checked: true }, { id: "as-list", label: "as List", action: () => console.log("View as List") }, { id: "organize-by", label: "Organize by Categories", action: () => console.log("Organize by Categories"), checked: true, }, { id: "divider1", divider: true }, { id: "customize", label: "Customize...", action: () => console.log("Customize") }, { id: "divider2", divider: true }, { id: "show-all", label: "Show All Preferences", action: () => console.log("Show All Preferences"), checked: true, }, ], }, { id: "window", label: "Window", items: [ { id: "minimize", label: "Minimize", shortcut: "⌘M", action: () => console.log("Minimize") }, { id: "zoom", label: "Zoom", action: () => console.log("Zoom") }, { id: "cycle", label: "Cycle Through Windows", shortcut: "⌘`", action: () => console.log("Cycle Through Windows"), }, { id: "divider1", divider: true }, { id: "bring-all-to-front", label: "Bring All to Front", action: () => console.log("Bring All to Front") }, { id: "divider2", divider: true }, { id: "system-preferences", label: "System Preferences", checked: true, action: () => console.log("Show System Preferences"), }, ], }, { id: "help", label: "Help", items: [ { id: "system-preferences-help", label: "System Preferences Help", action: () => console.log("System Preferences Help"), }, ], }, ] // Default menus when no window is active export const defaultMenus = [ { id: "finder", label: "Finder", items: [ { id: "about", label: "About Finder", action: () => console.log("About Finder") }, { id: "divider1", divider: true }, { id: "preferences", label: "Preferences...", shortcut: "⌘,", action: () => console.log("Preferences") }, { id: "divider2", divider: true }, { id: "empty-trash", label: "Empty Trash...", action: () => console.log("Empty Trash") }, { id: "divider3", divider: true }, { id: "services", label: "Services", submenu: [{ id: "no-services", label: "No Services Apply", disabled: true }], }, ], }, { id: "file", label: "File", items: [ { id: "new-finder-window", label: "New Finder Window", shortcut: "⌘N", action: () => console.log("New Finder Window"), }, { id: "new-folder", label: "New Folder", shortcut: "⇧⌘N", action: () => console.log("New Folder") }, { id: "divider1", divider: true }, { id: "close-window", label: "Close Window", shortcut: "⌘W", action: () => console.log("Close Window"), disabled: true, }, ], }, { id: "edit", label: "Edit", items: [ { id: "undo", label: "Undo", shortcut: "⌘Z", action: () => console.log("Undo"), disabled: true }, { id: "redo", label: "Redo", shortcut: "⇧⌘Z", action: () => console.log("Redo"), disabled: true }, { id: "divider1", divider: true }, { id: "cut", label: "Cut", shortcut: "⌘X", action: () => console.log("Cut"), disabled: true }, { id: "copy", label: "Copy", shortcut: "⌘C", action: () => console.log("Copy"), disabled: true }, { id: "paste", label: "Paste", shortcut: "⌘V", action: () => console.log("Paste"), disabled: true }, { id: "select-all", label: "Select All", shortcut: "⌘A", action: () => console.log("Select All"), disabled: true, }, ], }, { id: "view", label: "View", items: [ { id: "as-icons", label: "as Icons", shortcut: "⌘1", action: () => console.log("as Icons"), disabled: true }, { id: "as-list", label: "as List", shortcut: "⌘2", action: () => console.log("as List"), disabled: true }, { id: "as-columns", label: "as Columns", shortcut: "⌘3", action: () => console.log("as Columns"), disabled: true, }, { id: "as-gallery", label: "as Gallery", shortcut: "⌘4", action: () => console.log("as Gallery"), disabled: true, }, ], }, { id: "window", label: "Window", items: [ { id: "minimize", label: "Minimize", shortcut: "⌘M", action: () => console.log("Minimize"), disabled: true }, { id: "zoom", label: "Zoom", action: () => console.log("Zoom"), disabled: true }, { id: "divider1", divider: true }, { id: "bring-all-to-front", label: "Bring All to Front", action: () => console.log("Bring All to Front") }, ], }, { id: "help", label: "Help", items: [{ id: "macos-help", label: "macOS Help", action: () => console.log("macOS Help") }], }, ] [V0_FILE]typescriptreact:file="components/spotlight-search/spotlight-search.tsx" isMerged="true" "use client" import type React from "react" import { useState, useEffect, useRef } from "react" import { Search, X, Folder, Globe, Terminal, Settings, Calculator, Mail, Calendar, Music, Image } from "lucide-react" interface SpotlightSearchProps { onClose: () => void } interface SearchResult { id: string name: string type: "app" | "file" | "folder" | "website" icon: React.ReactNode action: () => void } export function SpotlightSearch({ onClose }: SpotlightSearchProps) { const [searchQuery, setSearchQuery] = useState("") const [results, setResults] = useState([]) const [selectedIndex, setSelectedIndex] = useState(0) const inputRef = useRef(null) const allItems: SearchResult[] = [ { id: "safari", name: "Safari", type: "app", icon: , action: () => console.log("Open Safari"), }, { id: "terminal", name: "Terminal", type: "app", icon: , action: () => console.log("Open Terminal"), }, { id: "system-preferences", name: "System Preferences", type: "app", icon: , action: () => console.log("Open System Preferences"), }, { id: "calculator", name: "Calculator", type: "app", icon: , action: () => console.log("Open Calculator"), }, { id: "mail", name: "Mail", type: "app", icon: , action: () => console.log("Open Mail"), }, { id: "calendar", name: "Calendar", type: "app", icon: , action: () => console.log("Open Calendar"), }, { id: "music", name: "Music", type: "app", icon: , action: () => console.log("Open Music"), }, { id: "photos", name: "Photos", type: "app", icon: , action: () => console.log("Open Photos"), }, { id: "documents", name: "Documents", type: "folder", icon: , action: () => console.log("Open Documents"), }, { id: "downloads", name: "Downloads", type: "folder", icon: , action: () => console.log("Open Downloads"), }, ] // Focus input on mount useEffect(() => { if (inputRef.current) { inputRef.current.focus() } }, []) // Filter results based on search query useEffect(() => { if (!searchQuery.trim()) { setResults([]) return } const filtered = allItems.filter((item) => item.name.toLowerCase().includes(searchQuery.toLowerCase())) setResults(filtered) setSelectedIndex(0) }, [searchQuery]) const handleKeyDown = (e: React.KeyboardEvent) => { if (e.key === "ArrowDown") { e.preventDefault() setSelectedIndex((prev) => (prev < results.length - 1 ? prev + 1 : prev)) } else if (e.key === "ArrowUp") { e.preventDefault() setSelectedIndex((prev) => (prev > 0 ? prev - 1 : prev)) } else if (e.key === "Enter" && results.length > 0) { e.preventDefault() const selected = results[selectedIndex] if (selected) { selected.action() onClose() } } } const handleResultClick = (result: SearchResult) => { result.action() onClose() } return (

{/* Search input */}

setSearchQuery(e.target.value)} onKeyDown={handleKeyDown} className="w-full h-10 pl-10 pr-10 bg-[#1d1d1d] rounded-md text-white/90 placeholder-white/50 focus:outline-none focus:ring-2 focus:ring-blue-500/70" /> {searchQuery && ( )}

{/* Results */} {results.length > 0 && (

{results.map((result, index) => (

handleResultClick(result)} >

{result.icon}

{result.name}

{result.type}

))}

)} {/* No results */} {searchQuery && results.length === 0 && (

No results found for "{searchQuery}"

)} {/* Empty state */} {!searchQuery &&

Type to search for apps, files, and more

}

) } [V0_FILE]typescriptreact:file="components/control-center/control-center.tsx" isMerged="true" "use client" import { useState } from "react" import { Sun, Volume2, Wifi, Bluetooth, BellOff, Share2, MonitorSmartphone, Cast, Keyboard } from "lucide-react" export function ControlCenter() { const [brightness, setBrightness] = useState(80) const [volume, setVolume] = useState(60) const [wifiEnabled, setWifiEnabled] = useState(true) const [bluetoothEnabled, setBluetoothEnabled] = useState(true) const [dndEnabled, setDndEnabled] = useState(false) const [airdropEnabled, setAirdropEnabled] = useState(true) return (

{/* Main controls - top row */}

{/* Brightness control */}

Display

setBrightness(Number.parseInt(e.target.value))} className="w-full h-1 bg-white/20 rounded-full appearance-none cursor-pointer [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:h-4 [&::-webkit-slider-thumb]:w-4 [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:bg-white" />

{/* Volume control */}

Sound

setVolume(Number.parseInt(e.target.value))} className="w-full h-1 bg-white/20 rounded-full appearance-none cursor-pointer [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:h-4 [&::-webkit-slider-thumb]:w-4 [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:bg-white" />

{/* Toggle controls - middle row */}

{/* Wi-Fi toggle */}

setWifiEnabled(!wifiEnabled)} > Wi-Fi

{/* Bluetooth toggle */}

setBluetoothEnabled(!bluetoothEnabled)} > Bluetooth

{/* AirDrop toggle */}

setAirdropEnabled(!airdropEnabled)} > AirDrop

{/* Do Not Disturb toggle */}

setDndEnabled(!dndEnabled)} > Do Not Disturb

{/* Additional controls - bottom row */}

{/* Screen Mirroring */}

Screen Mirroring

{/* Display */}

Display

{/* Keyboard Brightness */}

Keyboard

) } [V0_FILE]typescriptreact:file="components/notification-center/notification-center.tsx" isMerged="true" "use client" import type React from "react" import { useState, useEffect } from "react" import { X, Calendar, Cloud, Bell, Info, Download, RefreshCw } from "lucide-react" interface Notification { id: string title: string message: string time: string icon: React.ReactNode app: string } export function NotificationCenter({ onClose }: { onClose: () => void }) { const [notifications, setNotifications] = useState([ { id: "1", title: "System Update", message: "macOS Mojave update is available. Click to install.", time: "10:30 AM", icon: , app: "System Preferences", }, { id: "2", title: "iCloud Storage", message: "Your iCloud storage is almost full. Manage your storage now.", time: "Yesterday", icon: , app: "iCloud", }, { id: "3", title: "Calendar", message: "Meeting with Design Team in 30 minutes", time: "Yesterday", icon: , app: "Calendar", }, { id: "4", title: "Download Complete", message: "mojave-wallpaper.jpg has been downloaded", time: "Monday", icon: , app: "Safari", }, ]) const [date, setDate] = useState("") useEffect(() => { const now = new Date() const options: Intl.DateTimeFormatOptions = { weekday: "long", month: "long", day: "numeric", year: "numeric", } setDate(now.toLocaleDateString("en-US", options)) }, []) const clearAllNotifications = () => { setNotifications([]) } const removeNotification = (id: string) => { setNotifications((prev) => prev.filter((notification) => notification.id !== id)) } return (

{/* Header */}

Notification Center

{date}

{/* Notifications */}

{notifications.length > 0 ? ( <> {notifications.map((notification) => (

{notification.icon}

{notification.title}

{notification.time}

{notification.message}

{notification.app}

))} ) : (

No Notifications

)}

{/* Today section */}

Today

{date.split(",")[0]}

{new Date().toLocaleTimeString("en-US", { hour: "numeric", minute: "2-digit" })}

Weather information unavailable

) } [V0_FILE]plaintext:file="public/sounds/mac-boot.mp3" url="https://v0.blob.com/YXNzZXRzL21hYy1ib290LXNvdW5kLm1wMw==.mp3" isMerged="true" [V0_FILE]typescriptreact:file="contexts/file-system-context.tsx" isEdit="true" isMerged="true" "use client" import { createContext, useContext, useState, useEffect, type ReactNode } from "react" import { type FileSystem, type FileItem, initialFileSystem } from "@/types/file-system" import { SimpleToast } from "@/components/ui/toast" interface FileSystemContextType { fileSystem: FileSystem moveFile: (fileId: string, targetParent: string) => void createFile: (name: string, type: "file" | "folder", parent: string, extension?: string) => void deleteFile: (fileId: string) => void renameFile: (fileId: string, newName: string) => void getFilesByParent: (parent: string) => FileItem[] } const FileSystemContext = createContext(undefined) export function FileSystemProvider({ children }: { children: ReactNode }) { const [fileSystem, setFileSystem] = useState(initialFileSystem) const [toast, setToast] = useState<{ message: string; visible: boolean }>({ message: "", visible: false }) // Load file system from localStorage on mount useEffect(() => { const savedFileSystem = localStorage.getItem("macos-file-system") if (savedFileSystem) { try { setFileSystem(JSON.parse(savedFileSystem)) } catch (error) { console.error("Failed to parse saved file system:", error) } } }, []) // Save file system to localStorage when it changes useEffect(() => { localStorage.setItem("macos-file-system", JSON.stringify(fileSystem)) }, [fileSystem]) const moveFile = (fileId: string, targetParent: string) => { setFileSystem((prev) => { const file = prev.items[fileId] if (!file) return prev const currentParent = file.parent // Remove from current parent array const updatedPrev = { ...prev, [currentParent]: prev[currentParent as keyof typeof prev].filter((id) => id !== fileId) as string[], } // Add to new parent array updatedPrev[targetParent as keyof typeof updatedPrev] = [ ...(updatedPrev[targetParent as keyof typeof updatedPrev] as string[]), fileId, ] // Update file's parent reference updatedPrev.items = { ...updatedPrev.items, [fileId]: { ...updatedPrev.items[fileId], parent: targetParent, modified: new Date().toLocaleDateString(), }, } // Show toast notification setToast({ message: `Moved "${file.name}" to ${targetParent}`, visible: true, }) // Hide toast after 3 seconds setTimeout(() => { setToast({ message: "", visible: false }) }, 3000) return updatedPrev }) } const createFile = (name: string, type: "file" | "folder", parent: string, extension?: string) => { setFileSystem((prev) => { const newId = `${parent}-${Date.now()}` const newFile: FileItem = { id: newId, name, type, parent, extension, modified: new Date().toLocaleDateString(), size: type === "file" ? "0 KB" : undefined, } return { ...prev, items: { ...prev.items, [newId]: newFile, }, [parent]: [...(prev[parent as keyof typeof prev] as string[]), newId], } }) } const deleteFile = (fileId: string) => { setFileSystem((prev) => { const file = prev.items[fileId] if (!file) return prev const { [fileId]: _, ...remainingItems } = prev.items return { ...prev, items: remainingItems, [file.parent]: prev[file.parent as keyof typeof prev].filter((id) => id !== fileId) as string[], trash: [...prev.trash, fileId], } }) } const renameFile = (fileId: string, newName: string) => { setFileSystem((prev) => { const file = prev.items[fileId] if (!file) return prev return { ...prev, items: { ...prev.items, [fileId]: { ...prev.items[fileId], name: newName, modified: new Date().toLocaleDateString(), }, }, } }) } const getFilesByParent = (parent: string): FileItem[] => { const fileIds = fileSystem[parent as keyof typeof fileSystem] as string[] return fileIds.map((id) => fileSystem.items[id]) } return ( {children} {toast.visible && } ) } export function useFileSystem() { const context = useContext(FileSystemContext) if (context === undefined) { throw new Error("useFileSystem must be used within a FileSystemProvider") } return context } [V0_FILE]typescriptreact:file="components/ui/toast.tsx" isEdit="true" isMerged="true" "use client" import * as React from "react" import * as ToastPrimitives from "@radix-ui/react-toast" import { cva, type VariantProps } from "class-variance-authority" import { X } from "lucide-react" import { cn } from "@/lib/utils" import { useEffect, useState } from "react" const ToastProvider = ToastPrimitives.Provider const ToastViewport = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) ToastViewport.displayName = ToastPrimitives.Viewport.displayName const toastVariants = cva( "group pointer-events-auto relative flex w-full items-center justify-between space-x-4 overflow-hidden rounded-md border p-6 pr-8 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full", { variants: { variant: { default: "border bg-background text-foreground", destructive: "destructive group border-destructive bg-destructive text-destructive-foreground", }, }, defaultVariants: { variant: "default", }, }, ) const Toast = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef & VariantProps >(({ className, variant, ...props }, ref) => { return }) Toast.displayName = ToastPrimitives.Root.displayName const ToastAction = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) ToastAction.displayName = ToastPrimitives.Action.displayName const ToastClose = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) ToastClose.displayName = ToastPrimitives.Close.displayName const ToastTitle = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) ToastTitle.displayName = ToastPrimitives.Title.displayName const ToastDescription = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) ToastDescription.displayName = ToastPrimitives.Description.displayName type ToastProps = React.ComponentPropsWithoutRef type ToastActionElement = React.ReactElement // Simple toast component that doesn't require a provider interface SimpleToastProps { message: string } const SimpleToast = ({ message }: SimpleToastProps) => { const [isVisible, setIsVisible] = useState(true) useEffect(() => { const timer = setTimeout(() => { setIsVisible(false) }, 3000) return () => clearTimeout(timer) }, []) return (

{message}

) } export { type ToastProps, type ToastActionElement, ToastProvider, ToastViewport, Toast, ToastTitle, ToastDescription, ToastClose, ToastAction, SimpleToast, } [V0_FILE]typescriptreact:file="components/safari-window.tsx" isPartial="true" isFixed="true" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import type React from "react" import { useState, useRef, useEffect, type MouseEvent } from "react" import { DraggableWindow } from "./draggable-window" import { ArrowLeft, ArrowRight, RefreshCw, Shield, Star, Plus, SidebarClose, Search, X, ChevronDown, Copy, ExternalLink, Code, } from "lucide-react" import { useContextMenu } from "./context-menu/context-menu-provider" interface SafariWindowProps { zIndex: number position: { x: number; y: number } size: { width: number; height: number } onClose: () => void onFocus: () => void onDrag: (x: number, y: number) => void onResize: (width: number, height: number) => void onMaximize: () => void isMaximized?: boolean } interface Tab { id: string title: string url: string favicon?: string isActive: boolean } export function SafariWindow({ zIndex, position, size, onClose, onFocus, onDrag, onResize, onMaximize, isMaximized, }: SafariWindowProps) { const [tabs, setTabs] = useState([ { id: "tab1", title: "Amir Salmani", url: "https://amirsalmani.com", favicon: "/icons/safari.webp", isActive: true, }, ]) const [inputUrl, setInputUrl] = useState("https://amirsalmani.com") const [currentUrl, setCurrentUrl] = useState("https://amirsalmani.com") const [canGoBack, setCanGoBack] = useState(false) const [canGoForward, setCanGoForward] = useState(false) const [isLoading, setIsLoading] = useState(false) const iframeRef = useRef(null) const urlHistory = useRef([]) const historyPosition = useRef(0) const { showContextMenu } = useContextMenu() const addTab = () => { // Set all tabs to inactive const updatedTabs = tabs.map((tab) => ({ ...tab, isActive: false, })) // Add new active tab setTabs([ ...updatedTabs, { id: `tab${tabs.length + 1}`, title: "New Tab", url: "about:blank", isActive: true, }, ]) setInputUrl("about:blank") setCurrentUrl("about:blank") urlHistory.current = ["about:blank"] historyPosition.current = 0 setCanGoBack(false) setCanGoForward(false) } const closeTab = (id: string, e: React.MouseEvent) => { e.stopPropagation() if (tabs.length === 1) { // Don't close the last tab return } const tabIndex = tabs.findIndex((tab) => tab.id === id) const isActiveTab = tabs[tabIndex].isActive // Remove the tab const newTabs = tabs.filter((tab) => tab.id !== id) // If we closed the active tab, activate another one if (isActiveTab && newTabs.length > 0) { const newActiveIndex = Math.min(tabIndex, newTabs.length - 1) newTabs[newActiveIndex].isActive = true setInputUrl(newTabs[newActiveIndex].url) setCurrentUrl(newTabs[newActiveIndex].url) // Reset history for the newly active tab urlHistory.current = [newTabs[newActiveIndex].url] historyPosition.current = 0 setCanGoBack(false) setCanGoForward(false) } setTabs(newTabs) } const activateTab = (id: string) => { const updatedTabs = tabs.map((tab) => ({ ...tab, isActive: tab.id === id, })) const activeTab = updatedTabs.find((tab) => tab.id === id) if (activeTab) { setInputUrl(activeTab.url) setCurrentUrl(activeTab.url) // Reset history for the newly active tab urlHistory.current = [activeTab.url] historyPosition.current = 0 setCanGoBack(false) setCanGoForward(false) } setTabs(updatedTabs) } const handleUrlSubmit = (e: React.FormEvent) => { e.preventDefault() let url = inputUrl.trim() // Add https:// if missing if (!url.startsWith("http://") && !url.startsWith("https://")) { url = `https://${url}` setInputUrl(url) } // Update the current tab const updatedTabs = tabs.map((tab) => { if (tab.isActive) { return { ...tab, url, title: url.replace(/^https?:\/\//, "").split("/")[0], } } return tab }) setTabs(updatedTabs) setCurrentUrl(url) // Add to history urlHistory.current = urlHistory.current.slice(0, historyPosition.current + 1) urlHistory.current.push(url) historyPosition.current = urlHistory.current.length - 1 setCanGoBack(historyPosition.current > 0) setCanGoForward(false) setIsLoading(true) } const handleRefresh = () => { if (iframeRef.current) { setIsLoading(true) iframeRef.current.src = currentUrl } } const handleGoBack = () => { if (historyPosition.current > 0) { historyPosition.current-- const prevUrl = urlHistory.current[historyPosition.current] // Update the current tab const updatedTabs = tabs.map((tab) => { if (tab.isActive) { return { ...tab, url: prevUrl, title: prevUrl.replace(/^https?:\/\//, "").split("/")[0], } } return tab }) setTabs(updatedTabs) setInputUrl(prevUrl) setCurrentUrl(prevUrl) setIsLoading(true) setCanGoBack(historyPosition.current > 0) setCanGoForward(historyPosition.current < urlHistory.current.length - 1) } } const handleGoForward = () => { if (historyPosition.current < urlHistory.current.length - 1) { historyPosition.current++ const nextUrl = urlHistory.current[historyPosition.current] // Update the current tab const updatedTabs = tabs.map((tab) => { if (tab.isActive) { return { ...tab, url: nextUrl, title: nextUrl.replace(/^https?:\/\//, "").split("/")[0], } } return tab }) setTabs(updatedTabs) setInputUrl(nextUrl) setCurrentUrl(nextUrl) setIsLoading(true) setCanGoBack(historyPosition.current > 0) setCanGoForward(historyPosition.current < urlHistory.current.length - 1) } } const handleIframeLoad = () => { setIsLoading(false) } const handleSafariContextMenu = (e: MouseEvent) => { e.preventDefault() showContextMenu({ items: [ { label: "Reload Page", icon: , onClick: handleRefresh, }, { label: "Copy Link", icon: , onClick: () => { navigator.clipboard.writeText(currentUrl) }, }, { divider: true }, { label: "Open in New Window", icon: , onClick: () => console.log("Open in New Window"), }, { label: "Inspect", icon:

,
          onClick: () => console.log("Inspect"),
        },
      ],
      x: e.clientX,
      y: e.clientY,
    })
  }

  // Initialize history on mount
  useEffect(() => {
    urlHistory.current = [currentUrl]
    historyPosition.current = 0
  }, [])

  const activeTab = tabs.find((tab) => tab.isActive) || tabs[0]

  return (
    
      
        {/* Tab Bar */}
        
          
            {tabs.map((tab) => (
               activateTab(tab.id)}
                className={`flex items-center gap-1 px-3 py-1 rounded-t-lg mr-1 max-w-[200px] min-w-[100px] cursor-default ${
                  tab.isActive ? "bg-[#3a3a3a]" : "bg-[#323232] hover:bg-[#353535]"
                }`}
              >
                {tab.favicon ? (
                  
                ) : (
                  
                )}
                {tab.title}
                
              
            ))}
          
          
        

        {/* Toolbar */}
        
          
            
            
          

          {/* Address Bar */}
          
            
              
               setInputUrl(e.target.value)}
                className="bg-transparent border-none outline-none text-sm text-white/80 flex-1"
              />
              
            
          

          
            
            
            
          
        

        {/* Bookmarks Bar */}
        
          
            
              
              Amir Salmani
            
            
              
              Safari
            
            
              
              iCloud
            
            
              
              News
            
            
              
              Maps
            
          
          
            
          
        

        {/* Safari Content with iframe */}
        
          {activeTab.url === "about:blank" ? (
            
              
                
              
              New Tab
              
                
                   setInputUrl(e.target.value)}
                    className="w-full h-10 px-10 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500"
                  />
                
                
              
            
          ) : (
            
              
            </div>
          )}
        </div>
      </div>
    </DraggableWindow>
  )
}

[V0_FILE]typescriptreact:file="components/terminal-window.tsx" isPartial="true" isFixed="true" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

import { useState, useRef, useEffect, type KeyboardEvent, type MouseEvent } from "react"
import { DraggableWindow } from "./draggable-window"
import { useContextMenu } from "./context-menu/context-menu-provider"
import { Clipboard, Trash2, Copy, CheckSquare, Plus } from "lucide-react"

interface TerminalWindowProps {
  zIndex: number
  position: { x: number; y: number }
  size: { width: number; height: number }
  onClose: () => void
  onFocus: () => void
  onDrag: (x: number, y: number) => void
  onResize: (width: number, height: number) => void
  onMaximize: () => void
  isMaximized?: boolean
}

interface TerminalEntry {
  type: "input" | "output"
  content: string
}

export function TerminalWindow({
  zIndex,
  position,
  size,
  onClose,
  onFocus,
  onDrag,
  onResize,
  onMaximize,
  isMaximized,
}: TerminalWindowProps) {
  const [history, setHistory] = useState<TerminalEntry[]>([
    { type: "output", content: "Last login: " + new Date().toLocaleString() + " on ttys001" },
  ])
  const [currentInput, setCurrentInput] = useState("")
  const [currentDirectory, setCurrentDirectory] = useState("~")
  const terminalRef = useRef<HTMLDivElement>(null)
  const inputRef = useRef<HTMLInputElement>(null)
  const { showContextMenu } = useContextMenu()

  // Mock file system
  const fileSystem = {
    "~": ["Documents", "Downloads", "Desktop", "Applications", ".bash_profile", ".zshrc"],
    "~/Documents": ["work", "personal", "report.pdf", "notes.txt"],
    "~/Downloads": ["image.png", "archive.zip", "installer.dmg"],
    "~/Desktop": ["screenshot.png", "project.txt"],
  }

  const getPrompt = () => {
    return `amirsalmani@macos ${currentDirectory} % `
  }

  const handleCommand = (command: string) => {
    const args = command.trim().split(" ")
    const cmd = args[0].toLowerCase()

    let output = ""

    switch (cmd) {
      case "ls":
        const dir =
          currentDirectory === "~"
            ? "~"
            : currentDirectory.startsWith("~/")
              ? currentDirectory
              : `~/${currentDirectory}`
        if (fileSystem[dir]) {
          output = fileSystem[dir].join("\n")
        } else {
          output = `ls: ${dir}: No such file or directory`
        }
        break

      case "cd":
        if (args.length === 1 || args[1] === "~") {
          setCurrentDirectory("~")
        } else if (args[1] === "..") {
          if (currentDirectory === "~") {
            output = "cd: cannot go above home directory"
          } else {
            const parts = currentDirectory.split("/")
            parts.pop()
            setCurrentDirectory(parts.join("/") || "~")
          }
        } else {
          const targetDir = args[1].startsWith("~/")
            ? args[1]
            : currentDirectory === "~"
              ? `~/${args[1]}`
              : `${currentDirectory}/${args[1]}`

          const simplifiedTarget = targetDir.replace(/\/\//g, "/")

          if (fileSystem[simplifiedTarget]) {
            setCurrentDirectory(simplifiedTarget)
          } else {
            output = `cd: ${args[1]}: No such file or directory`
          }
        }
        break

      case "clear":
        setHistory([])
        return

      case "echo":
        output = args.slice(1).join(" ")
        break

      case "pwd":
        output = currentDirectory
        break

      case "date":
        output = new Date().toString()
        break

      case "whoami":
        output = "amirsalmani"
        break

      case "":
        // Empty command, just show a new prompt
        break

      default:
        output = `zsh: command not found: ${cmd}`
    }

    // Add command to history
    setHistory((prev) => [
      ...prev,
      { type: "input", content: getPrompt() + command },
      ...(output ? [{ type: "output", content: output }] : []),
    ])

    setCurrentInput("")
  }

  const handleKeyDown = (e: KeyboardEvent<HTMLInputElement>) => {
    if (e.key === "Enter") {
      handleCommand(currentInput)
    }
  }

  const handleTerminalContextMenu = (e: MouseEvent) => {
    e.preventDefault()
    showContextMenu({
      items: [
        {
          label: "Clear Console",
          icon: <Trash2 className="h-4 w-4" />,
          onClick: () => handleCommand("clear"),
        },
        {
          label: "Paste",
          icon: <Clipboard className="h-4 w-4" />,
          onClick: async () => {
            try {
              const text = await navigator.clipboard.readText()
              setCurrentInput((prev) => prev + text)
              if (inputRef.current) {
                inputRef.current.focus()
              }
            } catch (err) {
              console.error("Failed to read clipboard contents: ", err)
            }
          },
        },
        {
          label: "Copy",
          icon: <Copy className="h-4 w-4" />,
          onClick: () => {
            const selection = window.getSelection()?.toString()
            if (selection) {
              navigator.clipboard.writeText(selection)
            }
          },
        },
        {
          label: "Select All",
          icon: <CheckSquare className="h-4 w-4" />,
          onClick: () => {
            if (terminalRef.current) {
              const range = document.createRange()
              range.selectNodeContents(terminalRef.current)
              const selection = window.getSelection()
              if (selection) {
                selection.removeAllRanges()
                selection.addRange(range)
              }
            }
          },
        },
        { divider: true },
        {
          label: "New Terminal Tab",
          icon: <Plus className="h-4 w-4" />,
          onClick: () => console.log("New Terminal Tab"),
        },
      ],
      x: e.clientX,
      y: e.clientY,
    })
  }

  // Auto-scroll to bottom when history changes
  useEffect(() => {
    if (terminalRef.current) {
      terminalRef.current.scrollTop = terminalRef.current.scrollHeight
    }
  }, [history])

  // Focus input when terminal is focused
  useEffect(() => {
    if (inputRef.current) {
      inputRef.current.focus()
    }
  }, [])

  return (
    <DraggableWindow
      title="Terminal"
      width={size.width}
      height={size.height}
      zIndex={zIndex}
      position={position}
      onClose={onClose}
      onFocus={onFocus}
      onDrag={onDrag}
      onResize={onResize}
      onMaximize={onMaximize}
      isMaximized={isMaximized}
    >
      <div
        className="flex flex-col h-full bg-black text-white font-mono text-sm p-2 overflow-hidden"
        onClick={() => {
          if (inputRef.current) {
            inputRef.current.focus()
          }
        }}
        onContextMenu={handleTerminalContextMenu}
      >
        <div ref={terminalRef} className="flex-1 overflow-auto whitespace-pre-wrap">
          {history.map((entry, index) => (
            <div key={index} className={entry.type === "input" ? "text-green-400" : "text-white"}>
              {entry.content}
            </div>
          ))}
        </div>

        <div className="flex items-center">
          <span className="text-green-400">{getPrompt()}</span>
          <input
            ref={inputRef}
            type="text"
            value={currentInput}
            onChange={(e) => setCurrentInput(e.target.value)}
            onKeyDown={handleKeyDown}
            className="flex-1 bg-transparent border-none outline-none text-white caret-white"
            autoFocus
          />
        </div>
      </div>
    </DraggableWindow>
  )
}

[V0_FILE]typescriptreact:file="components/system-preferences-window.tsx" isEdit="true" isMerged="true"
"use client"

import { DraggableWindow } from "./draggable-window"
import { PreferenceIcon } from "./preference-icon"
import { Search } from "lucide-react"

interface SystemPreferencesWindowProps {
  zIndex: number
  position: { x: number; y: number }
  size?: { width: number; height: number }
  onClose: () => void
  onFocus: () => void
  onDrag: (x: number, y: number) => void
  onResize?: (width: number, height: number) => void
  onMaximize?: () => void
  isMaximized?: boolean
}

export function SystemPreferencesWindow({
  zIndex,
  position,
  size,
  onClose,
  onFocus,
  onDrag,
  onResize,
  onMaximize,
  isMaximized,
}: SystemPreferencesWindowProps) {
  const preferences = [
    { name: "General", icon: "general" },
    { name: "Desktop & Screen Saver", icon: "desktop" },
    { name: "Dock", icon: "dock" },
    { name: "Mission Control", icon: "mission" },
    { name: "Siri", icon: "siri" },
    { name: "Spotlight", icon: "spotlight" },
    { name: "Language & Region", icon: "language" },
    { name: "Notifications", icon: "notifications" },
    { name: "Internet Accounts", icon: "internet" },
    { name: "Users & Groups", icon: "users" },
    { name: "Accessibility", icon: "accessibility" },
    { name: "Screen Time", icon: "screentime" },
    { name: "Extensions", icon: "extensions" },
    { name: "Security & Privacy", icon: "security" },
    { name: "Software Update", icon: "update" },
    { name: "Network", icon: "network" },
    { name: "Bluetooth", icon: "bluetooth" },
    { name: "Sound", icon: "sound" },
    { name: "Printers & Scanners", icon: "printers" },
    { name: "Keyboard", icon: "keyboard" },
    { name: "Trackpad", icon: "trackpad" },
    { name: "Mouse", icon: "mouse" },
    { name: "Displays", icon: "displays" },
    { name: "Energy Saver", icon: "energy" },
  ]

  return (
    <DraggableWindow
      title="System Preferences"
      width={size?.width || 680}
      height={size?.height || 500}
      zIndex={zIndex}
      position={position}
      onClose={onClose}
      onFocus={onFocus}
      onDrag={onDrag}
      onResize={onResize}
      onMaximize={onMaximize}
      isMaximized={isMaximized}
    >
      <div className="p-4 h-[calc(500px-2.5rem)]">
        <div className="relative mb-6">
          <Search className="absolute left-2 top-2.5 w-4 h-4 text-white/50" />
          <input
            type="text"
            placeholder="Search"
            className="h-8 w-full bg-[#1d1d1d] rounded-md pl-8 pr-2 text-sm text-white/80 focus:outline-none focus:ring-1 focus:ring-blue-500"
          />
        </div>

        <div className="grid grid-cols-4 gap-4 overflow-auto">
          {preferences.map((pref, index) => (
            <PreferenceIcon key={index} name={pref.name} icon={pref.icon} />
          ))}
        </div>
      </div>
    </DraggableWindow>
  )
}

[V0_FILE]typescriptreact:file="components/apple-menu/apple-menu.tsx" isEdit="true" isMerged="true"
"use client"

import { Info, Settings, ShoppingBag, Clock, XCircle, Moon, RefreshCw, Power, LogOut, ChevronRight } from "lucide-react"

interface AppleMenuProps {
  onLogout?: () => void
}

export function AppleMenu({ onLogout }: AppleMenuProps) {
  const menuItems = [
    {
      id: "about",
      label: "About This Mac",
      icon: <Info className="h-4 w-4" />,
      action: () => console.log("About This Mac"),
    },
    { id: "divider1", divider: true },
    {
      id: "preferences",
      label: "System Preferences...",
      icon: <Settings className="h-4 w-4" />,
      action: () => console.log("System Preferences"),
    },
    {
      id: "appstore",
      label: "App Store...",
      icon: <ShoppingBag className="h-4 w-4" />,
      action: () => console.log("App Store"),
    },
    { id: "divider2", divider: true },
    {
      id: "recent",
      label: "Recent Items",
      icon: <Clock className="h-4 w-4" />,
      hasSubmenu: true,
      action: () => console.log("Recent Items"),
    },
    { id: "divider3", divider: true },
    {
      id: "forcequit",
      label: "Force Quit...",
      icon: <XCircle className="h-4 w-4" />,
      shortcut: "⌥⌘⎋",
      action: () => console.log("Force Quit"),
    },
    { id: "divider4", divider: true },
    { id: "sleep", label: "Sleep", icon: <Moon className="h-4 w-4" />, action: () => console.log("Sleep") },
    {
      id: "restart",
      label: "Restart...",
      icon: <RefreshCw className="h-4 w-4" />,
      action: () => console.log("Restart"),
    },
    {
      id: "shutdown",
      label: "Shut Down...",
      icon: <Power className="h-4 w-4" />,
      action: () => console.log("Shut Down"),
    },
    { id: "divider5", divider: true },
    {
      id: "logout",
      label: "Log Out Admin...",
      icon: <LogOut className="h-4 w-4" />,
      shortcut: "⇧⌘Q",
      action: onLogout || (() => console.log("Log Out")),
    },
  ]

  return (
    <div className="absolute left-0 top-full mt-1 py-1 bg-[#2a2a2a]/95 backdrop-blur-md rounded-md shadow-xl border border-[#3a3a3a]/50 w-64 animate-in fade-in zoom-in-95 duration-100">
      {menuItems.map((item) => (
        <div key={item.id}>
          {item.divider ? (
            <div className="h-px bg-[#3a3a3a]/50 my-1 mx-1" />
          ) : (
            <button
              className="w-full text-left px-4 py-1.5 flex items-center justify-between hover:bg-blue-500/90 text-white/90"
              onClick={item.action}
            >
              <div className="flex items-center gap-3">
                {item.icon}
                <span>{item.label}</span>
              </div>
              <div className="flex items-center">
                {item.shortcut && <span className="text-xs text-white/50 ml-4">{item.shortcut}</span>}
                {item.hasSubmenu && <ChevronRight className="h-3.5 w-3.5 ml-2" />}
              </div>
            </button>
          )}
        </div>
      ))}
    </div>
  )
}

[V0_FILE]typescriptreact:file="components/macos-desktop.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

import type React from "react"

import { type ReactNode, useCallback, useState } from "react"
import { DesktopIcon } from "./desktop-icon"
import { FolderPlus, RefreshCw, Settings, Image } from "lucide-react"
import { useContextMenu } from "./context-menu/context-menu-provider"
import { useFileSystem } from "@/contexts/file-system-context"

interface MacOSDesktopProps {
  children: ReactNode
}

export function MacOSDesktop({ children }: MacOSDesktopProps) {
  const { showContextMenu } = useContextMenu()
  const { getFilesByParent, moveFile } = useFileSystem()
  const [isDragOver, setIsDragOver] = useState(false)

  const desktopFiles = getFilesByParent("desktop")

  const handleContextMenu = useCallback(
    (e: React.MouseEvent) => {
      e.preventDefault()
      showContextMenu({
        items: [
          {
            label: "New Folder",
            icon: <FolderPlus className="h-4 w-4" />,
            onClick: () => console.log("New Folder clicked"),
          },
          {
            label: "Change Wallpaper",
            icon: <Image className="h-4 w-4" />,
            onClick: () => console.log("Change Wallpaper clicked"),
          },
          { divider: true },
          {
            label: "Refresh",
            icon: <RefreshCw className="h-4 w-4" />,
            onClick: () => console.log("Refresh clicked"),
          },
          {
            label: "Show View Options",
            icon: <Settings className="h-4 w-4" />,
            onClick: () => console.log("Show View Options clicked"),
          },
        ],
        x: e.clientX,
        y: e.clientY,
      })
    },
    [showContextMenu],
  )

  const handleDragOver = (e: React.DragEvent) => {
    e.preventDefault()
    e.dataTransfer.dropEffect = "move"
    setIsDragOver(true)
  }

  const handleDragLeave = () => {
    setIsDragOver(false)
  }

  const handleDrop = (e: React.DragEvent) => {
    e.preventDefault()
    setIsDragOver(false)

    try {
      const data = JSON.parse(e.dataTransfer.getData("application/json"))
      if (data.fileId) {
        moveFile(data.fileId, "desktop")
      }
    } catch (error) {
      console.error("Error handling drop:", error)
    }
  }

  return (
    <div
      className={`relative h-screen w-screen overflow-hidden bg-cover bg-center bg-no-repeat ${
        isDragOver ? "bg-blue-500/10" : ""
      }`}
      style={{
        backgroundImage:
          "url('https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Mojave.jpg-hdg3vqcacn0TYgsBwdpHZ5QOOvX6he.jpeg')",
        backgroundColor: "#1a1a1a",
      }}
      onContextMenu={handleContextMenu}
      onDragOver={handleDragOver}
      onDragLeave={handleDragLeave}
      onDrop={handleDrop}
    >
      <div className="absolute right-6 top-6">
        <DesktopIcon
          file={{
            id: "macintosh-hd",
            name: "Macintosh HD",
            type: "folder",
            parent: "root",
          }}
        />
      </div>

      <div className="absolute left-6 top-6 grid grid-cols-1 gap-4">
        {desktopFiles.map((file) => (
          <DesktopIcon key={file.id} file={file} onDoubleClick={() => console.log(`Open ${file.name}`)} />
        ))}
      </div>

      {children}
    </div>
  )
}

[V0_FILE]plaintext:file="public/sounds/mac-startup.mp3" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/mac-startup_7xOaB3X-tdrWcMXRtsUplgYS8y41T2aHpAao8G.mp3" isMerged="true"


[V0_FILE]plaintext:file="public/images/user-profile.webp" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/DALL%C2%B7E%202025-03-23%2019.16.35%20-%20A%20professional%20and%20modern%20digital%20portrait%20of%20a%20fictional%20person%20named%20John%20Doe.%20He%20is%20a%20young%20male%20software%20developer%2C%20wearing%20a%20dark%20hoodie%20and%20sitt-8rQCBVuRs6cRQNXfrbT1BcAMmkVALv.webp" isMerged="true"


[V0_FILE]plaintext:file="public/documents/persian-book.pdf" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/DALL%C2%B7E%202025-03-23%2019.16.35%20-%20A%20professional%20and%20modern%20digital%20portrait%20of%20a%20fictional%20person%20named%20John%20Doe.%20He%20is%20a%20young%20male%20software%20developer%2C%20wearing%20a%20dark%20hoodie%20and%20sitt-8rQCBVuRs6cRQNXfrbT1BcAMmkVALv.webp" isMerged="true"


[V0_FILE]typescriptreact:file="types/file-system.ts" isEdit="true" isMerged="true"
export interface FileItem {
  id: string
  name: string
  type: "file" | "folder" | "app"
  icon?: string
  parent: string
  size?: string
  modified?: string
  extension?: string
  content?: string
  path?: string
}

export interface FileSystem {
  items: Record<string, FileItem>
  desktop: string[]
  documents: string[]
  downloads: string[]
  applications: string[]
  trash: string[]
}

export const initialFileSystem: FileSystem = {
  items: {
    "desktop-1": {
      id: "desktop-1",
      name: "Untitled Document",
      type: "file",
      parent: "desktop",
      extension: "txt",
      size: "2 KB",
      modified: new Date().toLocaleDateString(),
      content: "Welcome to macOS Mojave!",
    },
    "desktop-2": {
      id: "desktop-2",
      name: "Projects",
      type: "folder",
      parent: "desktop",
      modified: new Date().toLocaleDateString(),
    },
    "desktop-3": {
      id: "desktop-3",
      name: "Vacation Photos",
      type: "folder",
      parent: "desktop",
      modified: new Date().toLocaleDateString(),
    },
    "documents-1": {
      id: "documents-1",
      name: "Resume",
      type: "file",
      parent: "documents",
      extension: "pdf",
      size: "245 KB",
      modified: new Date().toLocaleDateString(),
    },
    "documents-2": {
      id: "documents-2",
      name: "Meeting Notes",
      type: "file",
      parent: "documents",
      extension: "txt",
      size: "4 KB",
      modified: new Date().toLocaleDateString(),
    },
    "documents-3": {
      id: "documents-3",
      name: "Persian Book",
      type: "file",
      parent: "documents",
      extension: "pdf",
      size: "1.2 MB",
      modified: new Date().toLocaleDateString(),
      path: "/documents/persian-book.pdf",
    },
    "downloads-1": {
      id: "downloads-1",
      name: "mojave-wallpaper",
      type: "file",
      parent: "downloads",
      extension: "jpg",
      size: "3.2 MB",
      modified: new Date().toLocaleDateString(),
    },
    "applications-1": {
      id: "applications-1",
      name: "Safari",
      type: "app",
      parent: "applications",
      icon: "/icons/safari.webp",
      modified: new Date().toLocaleDateString(),
    },
    "applications-2": {
      id: "applications-2",
      name: "Terminal",
      type: "app",
      parent: "applications",
      icon: "/icons/terminal.webp",
      modified: new Date().toLocaleDateString(),
    },
  },
  desktop: ["desktop-1", "desktop-2", "desktop-3"],
  documents: ["documents-1", "documents-2", "documents-3"],
  downloads: ["downloads-1"],
  applications: ["applications-1", "applications-2"],
  trash: [],
}

[V0_FILE]typescriptreact:file="components/finder-window.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

import type React from "react"

import { useState } from "react"
import { DraggableWindow } from "./draggable-window"
import {
  Search,
  Grid3X3,
  List,
  ChevronRight,
  Clock,
  Cloud,
  Home,
  Download,
  ComputerIcon as Desktop,
  FileIcon as Document,
  Image,
  Film,
  Music,
  ArrowUpDown,
  Eye,
  ChevronLeft,
} from "lucide-react"
import { useFileSystem } from "@/contexts/file-system-context"
import type { FileItem } from "@/types/file-system"

interface FinderWindowProps {
  zIndex: number
  position: { x: number; y: number }
  size: { width: number; height: number }
  onClose: () => void
  onFocus: () => void
  onDrag: (x: number, y: number) => void
  onResize: (width: number, height: number) => void
  onMaximize: () => void
  isMaximized?: boolean
  onOpenFile?: (file: FileItem) => void
}

interface SidebarItem {
  id: string
  name: string
  icon: React.ReactNode
  isActive?: boolean
  location: string
}

type ViewMode = "icon" | "list" | "column"

export function FinderWindow({
  zIndex,
  position,
  size,
  onClose,
  onFocus,
  onDrag,
  onResize,
  onMaximize,
  isMaximized,
  onOpenFile,
}: FinderWindowProps) {
  const { getFilesByParent, moveFile } = useFileSystem()
  const [viewMode, setViewMode] = useState<ViewMode>("icon")
  const [currentLocation, setCurrentLocation] = useState("desktop")
  const [searchQuery, setSearchQuery] = useState("")
  const [isDragOver, setIsDragOver] = useState(false)
  const [dragOverItem, setDragOverItem] = useState<string | null>(null)

  const favoriteItems: SidebarItem[] = [
    { id: "recents", name: "Recents", icon: <Clock className="w-4 h-4 text-blue-400" />, location: "recents" },
    { id: "airdrop", name: "AirDrop", icon: <Cloud className="w-4 h-4 text-blue-400" />, location: "airdrop" },
    {
      id: "applications",
      name: "Applications",
      icon: <Grid3X3 className="w-4 h-4 text-blue-400" />,
      location: "applications",
    },
    {
      id: "desktop",
      name: "Desktop",
      icon: <Desktop className="w-4 h-4 text-blue-400" />,
      isActive: currentLocation === "desktop",
      location: "desktop",
    },
    {
      id: "documents",
      name: "Documents",
      icon: <Document className="w-4 h-4 text-blue-400" />,
      isActive: currentLocation === "documents",
      location: "documents",
    },
    {
      id: "downloads",
      name: "Downloads",
      icon: <Download className="w-4 h-4 text-blue-400" />,
      isActive: currentLocation === "downloads",
      location: "downloads",
    },
    { id: "home", name: "Home", icon: <Home className="w-4 h-4 text-blue-400" />, location: "home" },
  ]

  const locationItems: SidebarItem[] = [
    { id: "icloud", name: "iCloud Drive", icon: <Cloud className="w-4 h-4 text-gray-400" />, location: "icloud" },
    { id: "macintosh", name: "Macintosh HD", icon: <Home className="w-4 h-4 text-gray-400" />, location: "macintosh" },
  ]

  // Get files for current location
  const files = getFilesByParent(currentLocation)

  const getFileIcon = (file: FileItem) => {
    if (file.icon) {
      return <img src={file.icon || "/placeholder.svg"} alt={file.name} className="w-10 h-10" />
    }

    if (file.type === "folder") {
      return (
        <div className="w-10 h-10 text-blue-400">
          <svg viewBox="0 0 24 24" fill="currentColor">
            <path d="M22 19a2 2 0 01-2 2H4a2 2 0 01-2-2V5a2 2 0 012-2h5l2 3h9a2 2 0 012 2v11z" />
          </svg>
        </div>
      )
    } else if (file.type === "file") {
      if (file.extension === "txt") {
        return <Document className="w-10 h-10 text-blue-500" />
      } else if (file.extension === "pdf") {
        return <Document className="w-10 h-10 text-red-500" />
      } else if (["jpg", "png", "gif"].includes(file.extension || "")) {
        return <Image className="w-10 h-10 text-purple-400" />
      } else if (["mp4", "mov", "avi"].includes(file.extension || "")) {
        return <Film className="w-10 h-10 text-pink-500" />
      } else if (["mp3", "wav", "m4a"].includes(file.extension || "")) {
        return <Music className="w-10 h-10 text-red-500" />
      }
    }

    return <Document className="w-10 h-10 text-gray-400" />
  }

  const filteredFiles = searchQuery
    ? files.filter((file) => file.name.toLowerCase().includes(searchQuery.toLowerCase()))
    : files

  const handleSidebarItemClick = (location: string) => {
    setCurrentLocation(location)
  }

  const handleDragOver = (e: React.DragEvent, folderId?: string) => {
    e.preventDefault()
    e.dataTransfer.dropEffect = "move"
    setIsDragOver(true)
    if (folderId) {
      setDragOverItem(folderId)
    }
  }

  const handleDragLeave = () => {
    setIsDragOver(false)
    setDragOverItem(null)
  }

  const handleDrop = (e: React.DragEvent, targetFolder?: string) => {
    e.preventDefault()
    setIsDragOver(false)
    setDragOverItem(null)

    try {
      const data = JSON.parse(e.dataTransfer.getData("application/json"))
      if (data.fileId) {
        if (targetFolder) {
          // Move to specific folder
          moveFile(data.fileId, targetFolder)
        } else {
          // Move to current location
          moveFile(data.fileId, currentLocation)
        }
      }
    } catch (error) {
      console.error("Error handling drop:", error)
    }
  }

  const handleFileDragStart = (e: React.DragEvent, file: FileItem) => {
    e.dataTransfer.setData(
      "application/json",
      JSON.stringify({
        fileId: file.id,
        fileType: file.type,
        fileName: file.name,
      }),
    )
    e.dataTransfer.effectAllowed = "move"
  }

  const handleFileDoubleClick = (file: FileItem) => {
    if (file.type === "folder") {
      // Navigate into the folder
      setCurrentLocation(file.id)
    } else if (onOpenFile) {
      // Open the file
      onOpenFile(file)
    }
  }

  return (
    <DraggableWindow
      title="Finder"
      width={size.width}
      height={size.height}
      zIndex={zIndex}
      position={position}
      onClose={onClose}
      onFocus={onFocus}
      onDrag={onDrag}
      onResize={onResize}
      onMaximize={onMaximize}
      isMaximized={isMaximized}
    >
      <div className="flex h-full">
        {/* Sidebar */}
        <div className="w-48 bg-[#252525] p-2 text-white/80 text-sm">
          <div className="mb-4">
            <h3 className="text-xs uppercase text-white/50 px-2 py-1">Favorites</h3>
            <div className="space-y-1">
              {favoriteItems.map((item) => (
                <div
                  key={item.id}
                  className={`px-2 py-1 rounded cursor-default flex items-center gap-2 ${
                    item.isActive || currentLocation === item.location ? "bg-blue-500/30" : "hover:bg-white/10"
                  }`}
                  onClick={() => handleSidebarItemClick(item.location)}
                  onDragOver={(e) => handleDragOver(e, item.location)}
                  onDragLeave={handleDragLeave}
                  onDrop={(e) => handleDrop(e, item.location)}
                >
                  {item.icon}
                  <span>{item.name}</span>
                </div>
              ))}
            </div>
          </div>

          <div className="mb-4">
            <h3 className="text-xs uppercase text-white/50 px-2 py-1">Locations</h3>
            <div className="space-y-1">
              {locationItems.map((item) => (
                <div
                  key={item.id}
                  className="px-2 py-1 rounded hover:bg-white/10 cursor-default flex items-center gap-2"
                  onClick={() => handleSidebarItemClick(item.location)}
                >
                  {item.icon}
                  <span>{item.name}</span>
                </div>
              ))}
            </div>
          </div>

          <div>
            <h3 className="text-xs uppercase text-white/50 px-2 py-1">Tags</h3>
            <div className="space-y-1">
              <div className="px-2 py-1 rounded hover:bg-white/10 cursor-default flex items-center gap-2">
                <div className="w-3 h-3 rounded-full bg-red-500"></div>
                <span>Red</span>
              </div>
              <div className="px-2 py-1 rounded hover:bg-white/10 cursor-default flex items-center gap-2">
                <div className="w-3 h-3 rounded-full bg-orange-500"></div>
                <span>Orange</span>
              </div>
              <div className="px-2 py-1 rounded hover:bg-white/10 cursor-default flex items-center gap-2">
                <div className="w-3 h-3 rounded-full bg-yellow-500"></div>
                <span>Yellow</span>
              </div>
              <div className="px-2 py-1 rounded hover:bg-white/10 cursor-default flex items-center gap-2">
                <div className="w-3 h-3 rounded-full bg-green-500"></div>
                <span>Green</span>
              </div>
              <div className="px-2 py-1 rounded hover:bg-white/10 cursor-default flex items-center gap-2">
                <div className="w-3 h-3 rounded-full bg-blue-500"></div>
                <span>Blue</span>
              </div>
              <div className="px-2 py-1 rounded hover:bg-white/10 cursor-default flex items-center gap-2">
                <div className="w-3 h-3 rounded-full bg-purple-500"></div>
                <span>Purple</span>
              </div>
            </div>
          </div>
        </div>

        {/* Main content */}
        <div
          className={`flex-1 flex flex-col ${isDragOver && !dragOverItem ? "bg-blue-500/10" : ""}`}
          onDragOver={(e) => handleDragOver(e)}
          onDragLeave={handleDragLeave}
          onDrop={(e) => handleDrop(e)}
        >
          {/* Path Bar */}
          <div className="h-8 bg-[#2d2d2d] border-b border-[#3a3a3a] flex items-center px-4">
            <div className="flex items-center gap-1 text-xs text-white/70">
              <button className="hover:text-white">
                <ChevronLeft className="w-4 h-4" />
              </button>
              <button className="hover:text-white">
                <ChevronRight className="w-4 h-4" />
              </button>
              <div className="flex items-center ml-2">
                <span className="hover:text-white cursor-default">~</span>
                <span className="mx-1">/</span>
                <span className="hover:text-white cursor-default capitalize">{currentLocation}</span>
              </div>
            </div>
          </div>

          {/* Toolbar */}
          <div className="h-10 bg-[#2d2d2d] border-b border-[#3a3a3a] flex items-center px-4 gap-4">
            <div className="flex items-center gap-1">
              <button
                className={`w-8 h-8 rounded hover:bg-white/10 flex items-center justify-center ${
                  viewMode === "icon" ? "bg-white/20" : ""
                }`}
                onClick={() => setViewMode("icon")}
              >
                <Grid3X3 className="w-4 h-4 text-white/70" />
              </button>
              <button
                className={`w-8 h-8 rounded hover:bg-white/10 flex items-center justify-center ${
                  viewMode === "list" ? "bg-white/20" : ""
                }`}
                onClick={() => setViewMode("list")}
              >
                <List className="w-4 h-4 text-white/70" />
              </button>
              <button className="w-8 h-8 rounded hover:bg-white/10 flex items-center justify-center">
                <Eye className="w-4 h-4 text-white/70" />
              </button>
              <button className="w-8 h-8 rounded hover:bg-white/10 flex items-center justify-center">
                <ArrowUpDown className="w-4 h-4 text-white/70" />
              </button>
            </div>

            <div className="ml-auto relative">
              <Search className="absolute left-2 top-1.5 w-4 h-4 text-white/50" />
              <input
                type="text"
                placeholder="Search"
                value={searchQuery}
                onChange={(e) => setSearchQuery(e.target.value)}
                className="h-7 w-48 bg-[#1d1d1d] rounded-md pl-8 pr-2 text-sm text-white/80 focus:outline-none focus:ring-1 focus:ring-blue-500"
              />
            </div>
          </div>

          {/* Files area */}
          {viewMode === "icon" ? (
            <div className="flex-1 p-4 grid grid-cols-4 gap-4 overflow-auto">
              {filteredFiles.map((file) => (
                <div
                  key={file.id}
                  className={`flex flex-col items-center justify-between w-24 h-24 gap-1 p-2 rounded ${
                    dragOverItem === file.id && file.type === "folder" ? "bg-blue-500/30" : "hover:bg-white/10"
                  } cursor-default`}
                  draggable
                  onDragStart={(e) => handleFileDragStart(e, file)}
                  onDragOver={(e) => (file.type === "folder" ? handleDragOver(e, file.id) : undefined)}
                  onDragLeave={handleDragLeave}
                  onDrop={(e) => (file.type === "folder" ? handleDrop(e, file.id) : undefined)}
                  onDoubleClick={() => handleFileDoubleClick(file)}
                >
                  {getFileIcon(file)}
                  <span className="text-white text-xs text-center">{file.name}</span>
                </div>
              ))}
            </div>
          ) : (
            <div className="flex-1 overflow-auto">
              <table className="w-full text-sm text-white/80">
                <thead className="sticky top-0 bg-[#2d2d2d]">
                  <tr className="border-b border-[#3a3a3a]">
                    <th className="text-left py-2 px-4 font-medium">Name</th>
                    <th className="text-left py-2 px-4 font-medium">Date Modified</th>
                    <th className="text-left py-2 px-4 font-medium">Size</th>
                    <th className="text-left py-2 px-4 font-medium">Kind</th>
                  </tr>
                </thead>
                <tbody>
                  {filteredFiles.map((file) => (
                    <tr
                      key={file.id}
                      className={`border-b border-[#3a3a3a] ${
                        dragOverItem === file.id && file.type === "folder" ? "bg-blue-500/30" : "hover:bg-white/5"
                      }`}
                      draggable
                      onDragStart={(e) => handleFileDragStart(e, file)}
                      onDragOver={(e) => (file.type === "folder" ? handleDragOver(e, file.id) : undefined)}
                      onDragLeave={handleDragLeave}
                      onDrop={(e) => (file.type === "folder" ? handleDrop(e, file.id) : undefined)}
                      onDoubleClick={() => handleFileDoubleClick(file)}
                    >
                      <td className="py-2 px-4 flex items-center gap-2">
                        <div className="w-5 h-5">{getFileIcon(file)}</div>
                        <span>{file.name}</span>
                      </td>
                      <td className="py-2 px-4">{file.modified}</td>
                      <td className="py-2 px-4">{file.size || "--"}</td>
                      <td className="py-2 px-4">
                        {file.type === "folder"
                          ? "Folder"
                          : file.type === "app"
                            ? "Application"
                            : file.extension
                              ? file.extension.toUpperCase()
                              : "File"}
                      </td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
          )}

          {/* Status bar */}
          <div className="h-6 bg-[#2d2d2d] border-t border-[#3a3a3a] flex items-center px-4 text-xs text-white/60">
            <span>{filteredFiles.length} items</span>
            <span className="ml-auto">42.5 GB available</span>
          </div>
        </div>
      </div>
    </DraggableWindow>
  )
}

[V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" isMerged="true"
"use client"

import { useState, useEffect } from "react"
import { MacOSDesktop } from "@/components/macos-desktop"
import { MenuBar } from "@/components/menu-bar/menu-bar"
import { Dock } from "@/components/dock"
import { FinderWindow } from "@/components/finder-window"
import { SystemPreferencesWindow } from "@/components/system-preferences-window"
import { SafariWindow } from "@/components/safari-window"
import { TerminalWindow } from "@/components/terminal-window"
import { PDFReaderWindow } from "@/components/pdf-reader-window"
import { BootScreen } from "@/components/boot-screen"
import { LoginScreen } from "@/components/login-screen"
import { ContextMenuProvider } from "@/components/context-menu/context-menu-provider"
import { FileSystemProvider } from "@/contexts/file-system-context"
import type { FileItem } from "@/types/file-system"

// Define the app state interface
interface AppState {
  currentScreen: "boot" | "login" | "desktop"
  windows: {
    finder: {
      open: boolean
      zIndex: number
      position: { x: number; y: number }
      size: { width: number; height: number }
      isMaximized: boolean
      prevState?: { position: { x: number; y: number }; size: { width: number; height: number } }
    }
    systemPreferences: {
      open: boolean
      zIndex: number
      position: { x: number; y: number }
      size: { width: number; height: number }
      isMaximized: boolean
      prevState?: { position: { x: number; y: number }; size: { width: number; height: number } }
    }
    safari: {
      open: boolean
      zIndex: number
      position: { x: number; y: number }
      size: { width: number; height: number }
      isMaximized: boolean
      prevState?: { position: { x: number; y: number }; size: { width: number; height: number } }
    }
    terminal: {
      open: boolean
      zIndex: number
      position: { x: number; y: number }
      size: { width: number; height: number }
      isMaximized: boolean
      prevState?: { position: { x: number; y: number }; size: { width: number; height: number } }
    }
    pdfReader?: {
      open: boolean
      zIndex: number
      position: { x: number; y: number }
      size: { width: number; height: number }
      isMaximized: boolean
      prevState?: { position: { x: number; y: number }; size: { width: number; height: number } }
      file?: FileItem
    }
  }
  activeWindow: keyof typeof initialWindows | "pdfReader" | null
  isLoggedIn: boolean
}

// Initial window state
const initialWindows = {
  finder: {
    open: false,
    zIndex: 1,
    position: { x: 100, y: 80 },
    size: { width: 800, height: 600 },
    isMaximized: false,
  },
  systemPreferences: {
    open: false,
    zIndex: 0,
    position: { x: 150, y: 100 },
    size: { width: 680, height: 500 },
    isMaximized: false,
  },
  safari: {
    open: false,
    zIndex: 0,
    position: { x: 200, y: 120 },
    size: { width: 900, height: 600 },
    isMaximized: false,
  },
  terminal: {
    open: false,
    zIndex: 0,
    position: { x: 250, y: 140 },
    size: { width: 600, height: 400 },
    isMaximized: false,
  },
  pdfReader: {
    open: false,
    zIndex: 0,
    position: { x: 300, y: 160 },
    size: { width: 800, height: 700 },
    isMaximized: false,
  },
}

// Initial app state
const initialAppState: AppState = {
  currentScreen: "boot",
  windows: initialWindows,
  activeWindow: null,
  isLoggedIn: false,
}

export default function Home() {
  const [startBoot, setStartBoot] = useState(false)
  const [appState, setAppState] = useState<AppState>(initialAppState)
  const [loginError, setLoginError] = useState<string | null>(null)

  // Load saved state from localStorage on mount
  useEffect(() => {
    const savedState = localStorage.getItem("macos-desktop")
    if (savedState) {
      try {
        const parsedState = JSON.parse(savedState) as AppState

        // If user was logged in, restore desktop state
        if (parsedState.isLoggedIn) {
          setAppState({
            ...parsedState,
            currentScreen: "desktop", // Always start at desktop if logged in
          })
        } else {
          // Otherwise start at boot screen
          setAppState({
            ...initialAppState,
            currentScreen: "boot",
          })
        }
      } catch (error) {
        console.error("Failed to parse saved state:", error)
      }
    }
  }, [])

  // Save state to localStorage when it changes
  useEffect(() => {
    localStorage.setItem("macos-desktop", JSON.stringify(appState))
  }, [appState])

  const toggleWindow = (window: keyof typeof initialWindows) => {
    setAppState((prev) => {
      const isOpening = !prev.windows[window].open
      let newActiveWindow = prev.activeWindow

      if (isOpening) {
        newActiveWindow = window
      } else if (window === prev.activeWindow) {
        // Find the next highest z-index window to activate
        const sortedWindows = Object.entries(prev.windows)
          .filter(([key, val]) => val.open && key !== window)
          .sort((a, b) => b[1].zIndex - a[1].zIndex)

        newActiveWindow =
          sortedWindows.length > 0 ? (sortedWindows[0][0] as keyof typeof initialWindows | "pdfReader") : null
      }

      return {
        ...prev,
        windows: {
          ...prev.windows,
          [window]: {
            ...prev.windows[window],
            open: !prev.windows[window].open,
            zIndex: prev.windows[window].open ? prev.windows[window].zIndex : getHighestZIndex(prev.windows) + 1,
          },
        },
        activeWindow: newActiveWindow,
      }
    })
  }

  const openPDFReader = (file: FileItem) => {
    setAppState((prev) => {
      return {
        ...prev,
        windows: {
          ...prev.windows,
          pdfReader: {
            ...prev.windows.pdfReader!,
            open: true,
            zIndex: getHighestZIndex(prev.windows) + 1,
            file: file,
          },
        },
        activeWindow: "pdfReader",
      }
    })
  }

  const closePDFReader = () => {
    setAppState((prev) => {
      // Find the next highest z-index window to activate
      const sortedWindows = Object.entries(prev.windows)
        .filter(([key, val]) => val.open && key !== "pdfReader")
        .sort((a, b) => b[1].zIndex - a[1].zIndex)

      const newActiveWindow =
        sortedWindows.length > 0 ? (sortedWindows[0][0] as keyof typeof initialWindows | "pdfReader") : null

      return {
        ...prev,
        windows: {
          ...prev.windows,
          pdfReader: {
            ...prev.windows.pdfReader!,
            open: false,
          },
        },
        activeWindow: newActiveWindow,
      }
    })
  }

  const bringToFront = (window: keyof typeof initialWindows | "pdfReader") => {
    setAppState((prev) => {
      if (!prev.windows[window]?.open) return prev

      return {
        ...prev,
        windows: {
          ...prev.windows,
          [window]: {
            ...prev.windows[window]!,
            zIndex: getHighestZIndex(prev.windows) + 1,
          },
        },
        activeWindow: window,
      }
    })
  }

  const updatePosition = (window: keyof typeof initialWindows | "pdfReader", x: number, y: number) => {
    setAppState((prev) => ({
      ...prev,
      windows: {
        ...prev.windows,
        [window]: {
          ...prev.windows[window]!,
          position: { x, y },
        },
      },
    }))
  }

  const updateSize = (window: keyof typeof initialWindows | "pdfReader", width: number, height: number) => {
    setAppState((prev) => ({
      ...prev,
      windows: {
        ...prev.windows,
        [window]: {
          ...prev.windows[window]!,
          size: { width, height },
        },
      },
    }))
  }

  const getHighestZIndex = (windows: AppState["windows"]) => {
    return Math.max(
      windows.finder.zIndex,
      windows.systemPreferences.zIndex,
      windows.safari.zIndex,
      windows.terminal.zIndex,
      windows.pdfReader?.zIndex || 0,
    )
  }

  const handleBootComplete = () => {
    setAppState((prev) => ({
      ...prev,
      currentScreen: prev.isLoggedIn ? "desktop" : "login",
    }))
  }

  const handleLogin = (username: string, password: string) => {
    if ((username === "admin" || username === "John Doe") && password === "admin") {
      setLoginError(null)
      setAppState((prev) => ({
        ...prev,
        currentScreen: "desktop",
        isLoggedIn: true,
      }))
    } else {
      setLoginError("Invalid username or password")
    }
  }

  const handleLogout = () => {
    setAppState((prev) => ({
      ...prev,
      isLoggedIn: false,
      currentScreen: "login",
    }))
  }

  const maximizeWindow = (window: keyof typeof initialWindows | "pdfReader") => {
    setAppState((prev) => {
      const currentWindow = prev.windows[window]!

      // If already maximized, restore to previous state
      if (currentWindow.isMaximized) {
        const prevState = currentWindow.prevState || {
          position: {
            x: 100 + Object.keys(initialWindows).indexOf(window as keyof typeof initialWindows) * 50,
            y: 80 + Object.keys(initialWindows).indexOf(window as keyof typeof initialWindows) * 20,
          },
          size: {
            width:
              window === "finder"
                ? 800
                : window === "systemPreferences"
                  ? 680
                  : window === "safari"
                    ? 900
                    : window === "pdfReader"
                      ? 800
                      : 600,
            height:
              window === "finder"
                ? 600
                : window === "systemPreferences"
                  ? 500
                  : window === "safari"
                    ? 600
                    : window === "pdfReader"
                      ? 700
                      : 400,
          },
        }

        return {
          ...prev,
          windows: {
            ...prev.windows,
            [window]: {
              ...prev.windows[window]!,
              position: prevState.position,
              size: prevState.size,
              isMaximized: false,
              prevState: undefined,
            },
          },
        }
      }
      // Otherwise, maximize and save current state
      else {
        return {
          ...prev,
          windows: {
            ...prev.windows,
            [window]: {
              ...prev.windows[window]!,
              prevState: {
                position: { ...currentWindow.position },
                size: { ...currentWindow.size },
              },
              isMaximized: true,
            },
          },
        }
      }
    })
  }

  return (
    <ContextMenuProvider>
      <FileSystemProvider>
        <div className="dark">
          {appState.currentScreen === "boot" && (
            <>
              {!startBoot ? (
                <div className="fixed inset-0 bg-black flex flex-col items-center justify-center z-50">
                  <div className="flex flex-col items-center">
                    <svg className="w-20 h-20 text-white mb-8" viewBox="0 0 1024 1024" fill="currentColor">
                      <path d="M747.4 535.7c-.4-68.2 30.5-119.6 92.9-157.5-34.9-50-87.7-77.5-157.3-82.8-65.9-5.2-138 38.4-164.4 38.4-27.9 0-91.7-36.6-150.5-35.6-77.1 1.1-147.7 46.4-187.3 117.4-81.3 144.2-20.7 355.9 57.4 472.3 38.5 55.8 83.9 118.2 143.9 115.9 58.1-2.2 79.8-36.9 149.6-36.9 69.9 0 90.1 36.9 151.3 35.6 62.5-1.3 102-56.4 140-112.5 43.6-64.6 61.7-127.8 62.7-131-1.4-.6-120.4-47.3-121.7-188.3zm-121.6-349.2c31.5-39.8 52.8-94.9 46.9-150.5-45.3 6-101.9 34.1-134.7 75.3-29.5 35.8-54.1 95.1-47.5 150.7 50.3 4.1 101.6-25.8 135.3-75.5z" />
                    </svg>
                    <button
                      onClick={() => setStartBoot(true)}
                      className="bg-white/10 hover:bg-white/20 text-white px-6 py-2 rounded-full transition-colors"
                    >
                      Click to Start
                    </button>
                  </div>
                </div>
              ) : (
                <BootScreen onBootComplete={handleBootComplete} startBoot={startBoot} />
              )}
            </>
          )}

          {appState.currentScreen === "login" && <LoginScreen onLogin={handleLogin} error={loginError} />}

          {appState.currentScreen === "desktop" && (
            <MacOSDesktop>
              <MenuBar activeWindow={appState.activeWindow} onLogout={handleLogout} />

              {appState.windows.finder.open && (
                <FinderWindow
                  zIndex={appState.windows.finder.zIndex}
                  position={appState.windows.finder.position}
                  size={appState.windows.finder.size}
                  onClose={() => toggleWindow("finder")}
                  onFocus={() => bringToFront("finder")}
                  onDrag={(x, y) => updatePosition("finder", x, y)}
                  onResize={(width, height) => updateSize("finder", width, height)}
                  onMaximize={() => maximizeWindow("finder")}
                  isMaximized={appState.windows.finder.isMaximized}
                  onOpenFile={openPDFReader}
                />
              )}

              {appState.windows.systemPreferences.open && (
                <SystemPreferencesWindow
                  zIndex={appState.windows.systemPreferences.zIndex}
                  position={appState.windows.systemPreferences.position}
                  size={appState.windows.systemPreferences.size}
                  onClose={() => toggleWindow("systemPreferences")}
                  onFocus={() => bringToFront("systemPreferences")}
                  onDrag={(x, y) => updatePosition("systemPreferences", x, y)}
                  onResize={(width, height) => updateSize("systemPreferences", width, height)}
                  onMaximize={() => maximizeWindow("systemPreferences")}
                  isMaximized={appState.windows.systemPreferences.isMaximized}
                />
              )}

              {appState.windows.safari.open && (
                <SafariWindow
                  zIndex={appState.windows.safari.zIndex}
                  position={appState.windows.safari.position}
                  size={appState.windows.safari.size}
                  onClose={() => toggleWindow("safari")}
                  onFocus={() => bringToFront("safari")}
                  onDrag={(x, y) => updatePosition("safari", x, y)}
                  onResize={(width, height) => updateSize("safari", width, height)}
                  onMaximize={() => maximizeWindow("safari")}
                  isMaximized={appState.windows.safari.isMaximized}
                />
              )}

              {appState.windows.terminal.open && (
                <TerminalWindow
                  zIndex={appState.windows.terminal.zIndex}
                  position={appState.windows.terminal.position}
                  size={appState.windows.terminal.size}
                  onClose={() => toggleWindow("terminal")}
                  onFocus={() => bringToFront("terminal")}
                  onDrag={(x, y) => updatePosition("terminal", x, y)}
                  onResize={(width, height) => updateSize("terminal", width, height)}
                  onMaximize={() => maximizeWindow("terminal")}
                  isMaximized={appState.windows.terminal.isMaximized}
                />
              )}

              {appState.windows.pdfReader?.open && appState.windows.pdfReader.file && (
                <PDFReaderWindow
                  zIndex={appState.windows.pdfReader.zIndex}
                  position={appState.windows.pdfReader.position}
                  size={appState.windows.pdfReader.size}
                  filePath={appState.windows.pdfReader.file.path || ""}
                  fileName={appState.windows.pdfReader.file.name}
                  onClose={closePDFReader}
                  onFocus={() => bringToFront("pdfReader")}
                  onDrag={(x, y) => updatePosition("pdfReader", x, y)}
                  onResize={(width, height) => updateSize("pdfReader", width, height)}
                  onMaximize={() => maximizeWindow("pdfReader")}
                  isMaximized={appState.windows.pdfReader.isMaximized}
                />
              )}

              <Dock
                onFinderClick={() => toggleWindow("finder")}
                onPreferencesClick={() => toggleWindow("systemPreferences")}
                onSafariClick={() => toggleWindow("safari")}
                onTerminalClick={() => toggleWindow("terminal")}
                activeWindows={{
                  finder: appState.windows.finder.open,
                  systemPreferences: appState.windows.systemPreferences.open,
                  safari: appState.windows.safari.open,
                  terminal: appState.windows.terminal.open,
                }}
              />
            </MacOSDesktop>
          )}
        </div>
      </FileSystemProvider>
    </ContextMenuProvider>
  )
}

[V0_FILE]typescriptreact:file="components/pdf-reader-window.tsx" isEdit="true" isQuickEdit="true"
"use client"

import { useState } from "react"
import { DraggableWindow } from "./draggable-window"
import { ChevronLeft, ChevronRight, ZoomIn, ZoomOut, Printer, Download, Search } from "lucide-react"

interface PDFReaderWindowProps {
  zIndex: number
  position: { x: number; y: number }
  size: { width: number; height: number }
  filePath: string
  fileName: string
  onClose: () => void
  onFocus: () => void
  onDrag: (x: number, y: number) => void
  onResize: (width: number, height: number) => void
  onMaximize: () => void
  isMaximized?: boolean
}

export function PDFReaderWindow({
  zIndex,
  position,
  size,
  filePath,
  fileName,
  onClose,
  onFocus,
  onDrag,
  onResize,
  onMaximize,
  isMaximized,
}: PDFReaderWindowProps) {
  const [currentPage, setCurrentPage] = useState(1)
  const [totalPages] = useState(30) // Assuming 30 pages for this example
  const [zoom, setZoom] = useState(100)

  const handleNextPage = () => {
    if (currentPage < totalPages) {
      setCurrentPage(currentPage + 1)
    }
  }

  const handlePrevPage = () => {
    if (currentPage > 1) {
      setCurrentPage(currentPage - 1)
    }
  }

  const handleZoomIn = () => {
    setZoom(Math.min(zoom + 10, 200))
  }

  const handleZoomOut = () => {
    setZoom(Math.max(zoom - 10, 50))
  }

  return (
    <DraggableWindow
      title={`Preview - ${fileName}`}
      width={size.width}
      height={size.height}
      zIndex={zIndex}
      position={position}
      onClose={onClose}
      onFocus={onFocus}
      onDrag={onDrag}
      onResize={onResize}
      onMaximize={onMaximize}
      isMaximized={isMaximized}
    >
      <div className="flex flex-col h-full">
        {/* Toolbar */}
        <div className="flex items-center gap-2 p-2 bg-[#2d2d2d] border-b border-[#3a3a3a]">
          <div className="flex items-center gap-1">
            <button
              className={`w-8 h-8 rounded-full ${
                currentPage > 1 ? "hover:bg-white/10 text-white/70" : "text-white/30"
              } flex items-center justify-center`}
              onClick={handlePrevPage}
              disabled={currentPage <= 1}
            >
              <ChevronLeft className="w-4 h-4" />
            </button>
            <div className="text-white/70 text-sm">
              Page {currentPage} of {totalPages}
            </div>
            <button
              className={`w-8 h-8 rounded-full ${
                currentPage < totalPages ? "hover:bg-white/10 text-white/70" : "text-white/30"
              } flex items-center justify-center`}
              onClick={handleNextPage}
              disabled={currentPage >= totalPages}
            >
              <ChevronRight className="w-4 h-4" />
            </button>
          </div>

          <div className="h-5 w-px bg-white/20 mx-2"></div>

          <div className="flex items-center gap-1">
            <button
              className="w-8 h-8 rounded-full hover:bg-white/10 flex items-center justify-center text-white/70"
              onClick={handleZoomOut}
            >
              <ZoomOut className="w-4 h-4" />
            </button>
            <div className="text-white/70 text-sm">{zoom}%</div>
            <button
              className="w-8 h-8 rounded-full hover:bg-white/10 flex items-center justify-center text-white/70"
              onClick={handleZoomIn}
            >
              <ZoomIn className="w-4 h-4" />
            </button>
          </div>

          <div className="h-5 w-px bg-white/20 mx-2"></div>

          <div className="flex items-center gap-1">
            <button className="w-8 h-8 rounded-full hover:bg-white/10 flex items-center justify-center text-white/70">
              <Printer className="w-4 h-4" />
            </button>
            <button className="w-8 h-8 rounded-full hover:bg-white/10 flex items-center justify-center text-white/70">
              <Download className="w-4 h-4" />
            </button>
          </div>

          <div className="ml-auto relative">
            <Search className="absolute left-2 top-1.5 w-4 h-4 text-white/50" />
            <input
              type="text"
              placeholder="Search"
              className="h-7 w-48 bg-[#1d1d1d] rounded-md pl-8 pr-2 text-sm text-white/80 focus:outline-none focus:ring-1 focus:ring-blue-500"
            />
          </div>
        </div>

        {/* PDF Content */}
        <div className="flex-1 bg-[#1a1a1a] overflow-auto flex items-center justify-center p-4">
          <div
            className="bg-white shadow-lg"
            style={{
              width: `${(8.5 * zoom) / 100}in`,
              height: `${(11 * zoom) / 100}in`,
              direction: "rtl", // For Persian text which is right-to-left
            }}
          >
            <div className="p-8 h-full overflow-auto text-black" style={{ fontSize: `${zoom / 100}rem` }}>
              {/* Display different content based on current page */}
              {currentPage === 1 && (
                <div className="font-serif text-right" style={{ lineHeight: 1.8 }}>
                  <h1 className="text-xl font-bold mb-4">سخن ناشر</h1>
                  <p className="mb-3">
                    هنگام جسـتار را ادبیـات بی‌قرار خوانده‌اند. تعریف جسـتار روایی برای هـر خواننده خوانـدن متن، شـکل
                    می‌گیـرد، فرو می‌ریزد و دوباره سـاخته می‌شـود. قواعد ثابتی در میـان نیسـت و بـه قول انَی دیـارد،
                    جسـتارنویس هر بار باید فـرم خودش را بسـازد.
                  </p>
                  <p className="mb-3">
                    اما نویسـندگانی کـه بـا ایـن ژانـر دسـت‌وپنجه نـرم کرده‌اند بـدون ادعـای ارائـه‌ی تعریـف نظـری برای
                    ایـن قالب نوشـتن، تعبیرهای قابل‌تأملـی دربارهی جسـتار دارند که کنار هـم دیدن‌شـان تصویـر ذهنی مـا از
                    این ژانـر را روشـن‌تر می‌کند.
                  </p>
                  <p className="mb-3">
                    جستارنویسان، این ژانر را فرمی گریزپا می‌دانند؛ فرمی سـیال برای گفتن از رخدادهایی که بر منِ نویسـنده
                    گذشـته و ردپای‌شـان نه در زندگی او که بر هویتش به جا مانده؛ رخدادهایی که راوی می‌کوشد به مددشان تکه‌ای
                    شخصی و خاص را در جورچین مفاهیم کیهانی، جهانی و عام جا دهد.
                  </p>
                </div>
              )}

              {currentPage === 2 && (
                <div className="font-serif text-right" style={{ lineHeight: 1.8 }}>
                  <h1 className="text-xl font-bold mb-4">فصل اول</h1>
                  <p className="mb-3">
                    در این فصل به بررسی مفهوم ادبیات معاصر و تأثیر آن بر فرهنگ ایرانی می‌پردازیم. ادبیات معاصر ایران با
                    تحولات اجتماعی و سیاسی قرن بیستم پیوندی ناگسستنی دارد و بازتاب‌دهنده‌ی دگرگونی‌های عمیق جامعه‌ی ایرانی
                    است.
                  </p>
                  <p className="mb-3">
                    نویسندگان این دوره با بهره‌گیری از سنت‌های ادبی کهن و آشنایی با جریان‌های ادبی جهان، زبان و بیانی نو در
                    ادبیات فارسی پدید آوردند که هم ریشه در گذشته داشت و هم به نیازهای زمانه پاسخ می‌داد.
                  </p>
                  <p className="mb-3">
                    در این میان، داستان‌نویسی به عنوان قالبی مدرن، جایگاه ویژه‌ای یافت و به ابزاری برای بازنمایی واقعیت‌های
                    اجتماعی و انسانی تبدیل شد. نویسندگانی چون صادق هدایت، بزرگ علوی و صادق چوبک با آثار خود مسیر تازه‌ای
                    را در ادبیات داستانی ایران گشودند.
                  </p>
                </div>
              )}

              {currentPage === 3 && (
                <div className="font-serif text-right" style={{ lineHeight: 1.8 }}>
                  <h1 className="text-xl font-bold mb-4">فصل دوم</h1>
                  <p className="mb-3">
                    شعر معاصر فارسی با نوآوری‌های نیما یوشیج دگرگون شد. او با شکستن قالب‌های سنتی و ایجاد زبانی نو، افق‌های
                    تازه‌ای را پیش روی شاعران گشود. پس از او، شاعرانی چون احمد شاملو، فروغ فرخزاد، مهدی اخوان ثالث و
                    سهراب سپهری هر یک به شیوه‌ی خود این راه را ادامه دادند.
                  </p>
                  <p className="mb-3">
                    شعر نو فارسی توانست بسیاری از مفاهیم و تجربه‌های انسان معاصر را که در قالب‌های سنتی نمی‌گنجید، بیان
                    کند. این شعر با زبانی ساده‌تر و نزدیک‌تر به زبان گفتار، اما غنی از تصاویر و استعاره‌های بدیع، توانست با
                    مخاطب ارتباطی عمیق‌تر برقرار کند.
                  </p>
                  <p className="mb-3">
                    در این دوره، شعر از حالت تغزلی صرف خارج شد و به مسائل اجتماعی، سیاسی و فلسفی پرداخت. شاعران با نگاهی
                    انتقادی به جامعه و تاریخ، تلاش کردند تصویری واقع‌بینانه از شرایط انسان معاصر ارائه دهند.
                  </p>
                </div>
              )}

              {currentPage > 3 && (
                <div className="font-serif text-right" style={{ lineHeight: 1.8 }}>
                  <h1 className="text-xl font-bold mb-4">صفحه {currentPage}</h1>
                  <p className="mb-3">
                    این صفحه در حال آماده‌سازی است. لطفاً به صفحات قبلی مراجعه کنید یا به صفحات بعدی بروید.
                  </p>
                  <p className="mb-3">محتوای کتاب در حال تکمیل است. با تشکر از صبر و شکیبایی شما.</p>
                </div>
              )}
            </div>
          </div>
        </div>

        {/* Status bar */}
        <div className="h-6 bg-[#2d2d2d] border-t border-[#3a3a3a] flex items-center px-4 text-xs text-white/60">
          <span>PDF Document • {fileName}</span>
          <span className="ml-auto">
            {zoom}% • Page {currentPage} of {totalPages}
          </span>
        </div>
      </div>
    </DraggableWindow>
  )
}
</article></body></html>

About

Tags

Share

More Templates Like This

About

Tags

Share

About

Tags

Share

More Templates Like This