# AeThex Studio

A powerful, browser-based IDE specifically designed for Roblox Lua development with AI assistance, modern tooling, and an intuitive interface.

![AeThex Studio](https://img.shields.io/badge/version-1.0.0-blue.svg) ![License](https://img.shields.io/badge/license-MIT-green.svg) ![Next.js](https://img.shields.io/badge/Next.js-14.2-black.svg) ![React](https://img.shields.io/badge/React-18.3-blue.svg)

## ✨ Features

### 🎨 **Modern Code Editor**
- **Monaco Editor** - The same editor that powers VS Code
- **Lua syntax highlighting** with autocomplete
- **Real-time code validation** and linting
- **Multi-file editing** with tab management
- **File tree navigation** with drag-and-drop organization

### 🤖 **AI-Powered Assistant**
- Built-in AI chat for code help and debugging
- Context-aware suggestions
- Code explanation and documentation
- Roblox API knowledge

### 📁 **Project Management**
- **File Tree** - Organize your scripts into folders
- **Drag-and-drop** - Rearrange files easily
- **Quick file search** (Cmd/Ctrl+P) - Find files instantly
- **Search in files** (Cmd/Ctrl+Shift+F) - Global text search

### 🎯 **Productivity Features**
- **25+ Code Templates** - Ready-made scripts for common tasks
  - Beginner templates (Hello World, Touch Detectors, etc.)
  - Gameplay systems (DataStore, Teams, Combat, etc.)
  - UI components (GUIs, Timers, etc.)
  - Advanced features (Pathfinding, Inventory, etc.)
- **Command Palette** (Cmd/Ctrl+K) - Quick access to all commands
- **Keyboard Shortcuts** - Professional IDE shortcuts
- **Code Preview** - Test your scripts instantly

### 💻 **Interactive Terminal & CLI**
- **Built-in Terminal** - Full-featured command line interface
- **10+ CLI Commands** for Roblox development:
  - `help` - Display available commands
  - `run` - Execute current Lua script
  - `check` - Validate syntax and find errors
  - `count` - Count lines, words, characters
  - `api <class>` - Lookup Roblox API documentation
  - `template [list|name]` - Browse and load templates
  - `export [filename]` - Export scripts to .lua files
  - `clear` - Clear terminal output
  - `info` - Display system information
  - `echo` - Print text to terminal
- **Command History** - Navigate previous commands with ↑/↓ arrows
- **Auto-completion** - Tab-complete command names
- **Smart Suggestions** - Context-aware command hints
- **Toggle with Cmd/Ctrl + `** - Quick terminal access

### 🎨 **Customization**
- **5 Beautiful Themes**:
  - **Dark** - Classic dark theme for comfortable coding
  - **Light** - Clean light theme for bright environments
  - **Synthwave** - Retro neon aesthetic
  - **Forest** - Calming green tones
  - **Ocean** - Deep blue theme
- **Persistent preferences** - Your settings are saved

### 📱 **Mobile Responsive**
- Optimized layouts for phones and tablets
- Touch-friendly controls
- Hamburger menu for mobile
- Collapsible panels

### 🚀 **Developer Experience**
- **Code splitting** for fast loading
- **Error boundaries** with graceful error handling
- **Loading states** with spinners
- **Toast notifications** for user feedback
- **Testing infrastructure** with Vitest

## 🎮 Perfect For

- **Roblox Developers** - Build game scripts faster
- **Students & Learners** - Learn Lua with templates and AI help
- **Rapid Prototyping** - Quickly test game ideas
- **Web-Based Development** - Code anywhere, no installation needed

## ⌨️ Keyboard Shortcuts

| Shortcut | Action |
|----------|--------|
| `Cmd/Ctrl + S` | Save file (auto-save enabled) |
| `Cmd/Ctrl + P` | Quick file search |
| `Cmd/Ctrl + K` | Command palette |
| `Cmd/Ctrl + N` | New project |
| `Cmd/Ctrl + F` | Find in editor |
| `Cmd/Ctrl + Shift + F` | Search in all files |
| ``Cmd/Ctrl + ` `` | Toggle terminal |

## 🚀 Getting Started

### Prerequisites
- Node.js 18+
- npm or yarn

### Installation

```bash
# Clone the repository
git clone https://github.com/AeThex-LABS/aethex-studio.git

# Navigate to the project directory
cd aethex-studio

# Install dependencies
npm install

# Start the development server
npm run dev
```

Visit `http://localhost:3000` to see the application.

### Building for Production

```bash
# Build the application
npm run build

# Start the production server
npm start
```

## 📖 Usage Guide

### Creating Your First Script

1. Click **"New File"** in the file tree
2. Choose a template or start from scratch
3. Write your Lua code in the Monaco editor
4. Click **"Preview"** to test
5. **Copy** or **Export** your script

### Using Templates

1. Click the **Templates** button in the toolbar
2. Browse categories: Beginner, Gameplay, UI, Tools, Advanced
3. Click a template to load it into your editor
4. Customize the code for your needs

### AI Assistant

1. Open the **AI Chat** panel (right side on desktop)
2. Ask questions about:
   - Roblox scripting
   - Code debugging
   - API usage
   - Best practices
3. Get instant, context-aware answers

### Organizing Files

- **Create folders** - Right-click in file tree
- **Drag and drop** - Move files between folders
- **Rename** - Click the menu (⋯) next to a file
- **Delete** - Use the menu to remove files

### Searching

- **Quick search** - `Cmd/Ctrl+P` to find files by name
- **Global search** - `Cmd/Ctrl+Shift+F` to search text across all files
- **In-editor search** - `Cmd/Ctrl+F` to find text in current file

## 🛠️ Tech Stack

- **Next.js 14** - React framework
- **React 18** - UI library
- **TypeScript** - Type safety
- **Monaco Editor** - Code editor
- **Tailwind CSS** - Styling
- **Radix UI** - Component primitives
- **Phosphor Icons** - Icon library
- **Vitest** - Testing framework
- **PostHog** - Analytics (optional)
- **Sentry** - Error tracking (optional)

## 🧪 Running Tests

```bash
# Run all tests
npm test

# Run tests in watch mode
npm run test:watch

# Run tests with UI
npm run test:ui

# Generate coverage report
npm run test:coverage
```

## 📂 Project Structure

```
aethex-studio/
├── src/
│   ├── components/        # React components
│   │   ├── ui/           # Reusable UI components
│   │   ├── CodeEditor.tsx
│   │   ├── FileTree.tsx
│   │   ├── AIChat.tsx
│   │   └── ...
│   ├── hooks/            # Custom React hooks
│   ├── lib/              # Utility functions
│   │   ├── templates.ts  # Code templates
│   │   └── ...
│   └── App.tsx           # Main application
├── app/                  # Next.js app directory
│   └── globals.css       # Global styles
├── public/               # Static assets
└── tests/                # Test files
```

## 🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

1. Fork the repository
2. Create your feature branch (`git checkout -b feature/AmazingFeature`)
3. Commit your changes (`git commit -m 'Add some AmazingFeature'`)
4. Push to the branch (`git push origin feature/AmazingFeature`)
5. Open a Pull Request

## 📝 Code Templates

AeThex Studio includes 25+ production-ready templates:

**Beginner:**
- Hello World, Player Join Handler, Part Touch Detector, etc.

**Gameplay:**
- DataStore System, Teleport Part, Team System, Combat System, etc.

**UI:**
- GUI Buttons, Proximity Prompts, Countdown Timers, etc.

**Tools:**
- Give Tool, Sound Manager, Admin Commands, Chat Commands, etc.

**Advanced:**
- Round System, Inventory System, Pathfinding NPC, Shop System, etc.

## 🐛 Bug Reports

Found a bug? Please open an issue on GitHub with:
- Description of the bug
- Steps to reproduce
- Expected vs actual behavior
- Screenshots (if applicable)

## 📜 License

This project is licensed under the MIT License - see the LICENSE file for details.

## 🙏 Acknowledgments

- **Monaco Editor** - For the powerful code editor
- **Roblox** - For the game platform
- **Radix UI** - For accessible component primitives
- **Vercel** - For Next.js framework

## 📧 Contact

- **Website**: [aethex.com](https://aethex.com)
- **GitHub**: [@AeThex-LABS](https://github.com/AeThex-LABS)
- **Issues**: [GitHub Issues](https://github.com/AeThex-LABS/aethex-studio/issues)

---

**Built with ❤️ by the AeThex team**

Happy coding! 🎮✨