# {{PROJECT_NAME}}

A modern desktop application built with:

- **Vite** - Fast build tool and dev server
- **React** - UI framework
- **TypeScript** - Type safety
- **Tauri** - Desktop app framework
- **TailwindCSS** - Utility-first CSS
- **Orchard9 Design System** - Component library

## Features

### Theme Switching

This application includes built-in theme support with automatic persistence. The ThemeProvider automatically saves theme preferences to localStorage and detects system preferences.

Available themes:
- **Grove Light** (default) - A clean, nature-inspired light theme
- **Grove Dark** - A comfortable dark theme for low-light environments
- **Light/Dark** - Standard light and dark themes
- **Additional themes** - Cupcake, Business, and more

To implement theme switching in your app:

```tsx
import { useTheme } from '@orchard9ai/design-system'

function ThemeSwitcher() {
  const { theme, setTheme, themes } = useTheme()
  
  return (
    <select value={theme} onChange={(e) => setTheme(e.target.value)}>
      {themes.map(themeName => (
        <option key={themeName} value={themeName}>
          {themeName}
        </option>
      ))}
    </select>
  )
}
```

#### Advanced Theme Configuration

The ThemeProvider also supports an `onThemeChange` callback for custom logic:

```tsx
import { ThemeProvider, type Theme } from '@orchard9ai/design-system'

function App() {
  const handleThemeChange = (theme: Theme) => {
    // Analytics tracking
    analytics.track('theme_changed', { theme })
    
    // Custom logic
    console.log('User selected theme:', theme)
  }

  return (
    <ThemeProvider 
      defaultTheme="grove-light" 
      onThemeChange={handleThemeChange}
    >
      {/* Your app */}
    </ThemeProvider>
  )
}
```

The theme is automatically persisted to localStorage and will be restored on subsequent visits.

### Accessibility Features

- **Focus Management**: All interactive elements have visible focus states
- **Skip Navigation**: Press Tab on page load to skip to main content
- **Keyboard Navigation**: Full keyboard support throughout the application

## Development

Install dependencies:

```bash
{{PACKAGE_MANAGER}} install
```

Start the development server:

```bash
{{PACKAGE_MANAGER}} run tauri:dev
```

## Building

Build for production:

```bash
{{PACKAGE_MANAGER}} run tauri:build
```

## Project Structure

```
{{PROJECT_NAME}}/
├── src/                  # React source code
│   ├── components/       # React components
│   ├── pages/           # Application pages
│   ├── App.tsx          # Main React component
│   ├── main.tsx         # React entry point
│   └── index.css        # Global styles
├── src-tauri/           # Tauri Rust code
│   ├── src/main.rs      # Rust entry point
│   ├── Cargo.toml       # Rust dependencies
│   └── tauri.conf.json  # Tauri configuration
├── public/              # Static assets
└── package.json         # Node.js dependencies
```