# Browser IDE SDK

🚀 Production-ready React SDK для запуска React-проектов прямо в браузере с использованием Sandpack.

## Features

- 📝 **Code Editor** — полноценный редактор с подсветкой синтаксиса
- 🔄 **Hot Module Replacement** — мгновенное обновление при изменении кода
- 📂 **File Tree** — навигация по файлам проекта
- 🖥️ **Live Preview** — превью в реальном времени
- 💻 **Terminal** — терминал на базе xterm.js
- 🎨 **Themes** — темная и светлая темы
- 📱 **Responsive** — адаптивный дизайн
- ⚡ **Caching** — кэширование загруженных файлов

## Quick Start

```bash
npm install
npm run dev
```

Откройте [http://localhost:3000](http://localhost:3000)

## Usage

```tsx
import { BrowserIDE } from './browser-ide-sdk';
import { useState } from 'react';

function App() {
  const [activeFile, setActiveFile] = useState('/src/App.tsx');

  const githubTree = [
    {
      path: 'src/App.tsx',
      type: 'blob',
      sha: 'abc123',
      url: 'https://api.github.com/repos/.../contents/src/App.tsx'
    }
    // ...
  ];

  return (
    <BrowserIDE
      githubTree={githubTree}
      activeFile={activeFile}
      onActiveFileChange={setActiveFile}
      startCommand="npm run dev"
      defaultViewMode="split"
      theme="dark"
    />
  );
}
```

## View Modes

| Mode | Description |
|------|-------------|
| `code` | Только редактор кода |
| `preview` | Только превью |
| `split` | Редактор + превью (50/50) |

## API Documentation

Полная документация API доступна в файле [API.md](./API.md).

## Project Structure

```
src/
├── browser-ide-sdk/
│   ├── index.ts          # Экспорты SDK
│   ├── types.ts          # TypeScript типы
│   ├── githubLoader.ts   # Загрузчик GitHub файлов
│   ├── BrowserIDE.tsx    # Главный компонент
│   ├── FileTree.tsx      # Файловое дерево
│   ├── Terminal.tsx      # Терминал
│   └── styles.css        # Стили
├── App.tsx               # Demo приложение
└── main.tsx              # Entry point
```

## Technologies

- **React 18** — UI framework
- **TypeScript** — Type safety
- **Sandpack** — Browser bundler & preview
- **xterm.js** — Terminal emulator
- **Vite** — Build tool

## License

MIT

