Desktop

import { Desktop, useDesktopSettings, useKeyboardShortcuts, useOverlayManager, useWindowManager } from '@hanzo/ui'

export function Default() {
  return (
    <Desktop height={320} background="linear-gradient(135deg, #1d4ed8, #7c3aed)">
      <YStack
        position="absolute"
        t={24}
        l={24}
        width={220}
        rounded="$3"
        bg="$background"
        borderWidth={1}
        borderColor="$borderColor"
        overflow="hidden"
      >
        <XStack px="$3" py="$2" bg="$color3" items="center">
          <SizableText size="$2" fontWeight="600">
            Finder
          </SizableText>
        </XStack>
        <YStack p="$3">
          <SizableText size="$2" color="$color11">
            Two windows, one dock, no document scroll.
          </SizableText>
        </YStack>
      </YStack>
    </Desktop>
  )
}

export function SolidBackground() {
  return (
    <Desktop height={200} background="#111318">
      <SizableText position="absolute" b={16} l={16} size="$2" color="white">
        macOS Sonoma
      </SizableText>
    </Desktop>
  )
}

export function NoBackground() {
  return (
    <Desktop height={160}>
      <YStack width="100%" height="100%" items="center" justify="center">
        <SizableText size="$2" color="$color11">
          An empty desktop
        </SizableText>
      </YStack>
    </Desktop>
  )
}

Types

export type WindowId = string

export interface WindowState {
  [key: string]: boolean
}

export interface WindowManager {
  windows: WindowState
  activeWindow: WindowId | null
  openWindows: WindowId[]
  openWindow: (id: WindowId) => void
  closeWindow: (id: WindowId) => void
  toggleWindow: (id: WindowId) => void
  focusWindow: (id: WindowId) => void
  closeAllWindows: () => void
  isOpen: (id: WindowId) => boolean
}

export type ColorScheme = 'dark' | 'light' | 'auto'

export type DockPosition = 'bottom' | 'left' | 'right'

export interface DesktopSettings {
  theme: string
  colorScheme: ColorScheme
  backgroundImage?: string
  backgroundColor?: string
  dockPosition: DockPosition
  dockSize: number
  dockMagnification: boolean
  dockAutoHide: boolean
  windowTransparency: number
  fontSize: 'small' | 'medium' | 'large'
  reducedMotion: boolean
}

export interface DesktopSettingsActions {
  setTheme: (theme: string) => void
  setColorScheme: (scheme: ColorScheme) => void
  setBackgroundImage: (url?: string) => void
  setBackgroundColor: (color?: string) => void
  setDockPosition: (position: DockPosition) => void
  setDockSize: (size: number) => void
  setDockMagnification: (enabled: boolean) => void
  setDockAutoHide: (enabled: boolean) => void
  setWindowTransparency: (value: number) => void
  setFontSize: (size: 'small' | 'medium' | 'large') => void
  setReducedMotion: (enabled: boolean) => void
  toggleDarkMode: () => void
  resetToDefaults: () => void
}

export interface OverlayState {
  spotlight: boolean
  contextMenu: boolean
  modal: boolean
  drawer: boolean
  [key: string]: boolean
}

export interface OverlayManager {
  overlays: OverlayState
  isOpen: (id: string) => boolean
  open: (id: string) => void
  close: (id: string) => void
  toggle: (id: string) => void
  closeAll: () => void
}

export interface KeyboardShortcut {
  key: string
  meta?: boolean
  ctrl?: boolean
  alt?: boolean
  shift?: boolean
  action: () => void
  description?: string
  preventDefault?: boolean
}

export interface DesktopProps extends React.ComponentProps<typeof Frame> {
  /** A CSS `background` value (a gradient, a color, an image) behind the content. */
  background?: string
  children?: React.ReactNode
}

Exports