# Interface Discovery

**Quick summary:** Complete tour of the Luna Park editor: panels, navigation, and essential tools to get started.

---

## 1. Project access and creation

### Access the dashboard
1. Create an account on Luna Park
2. Click the **Dashboard** button (top-right of the landing page)
3. View the list of all your projects

### Create a new project
1. Click **New Project**
2. Customize:
    - **Title**: editable directly
    - **Icon**: selection of available icons
    - **Description**: free text
3. Example: "Next Billion Dollar Company"
4. Save and click on the project

## 2. The Explorer

### Main function
File and folder management area for the project.

### Create files
1. Right-click in the explorer → **New**
2. Choose file type (script, component, etc.)
3. Click on the file name to rename it directly
4. Press **Enter** to confirm the new name

### Folder organization
1. Create a folder: right-click → **New** → Folder
2. **Drag & Drop** to move files
3. Example: "Scripts" folder to organize scripts

### File save indicators
- **Blue filename**: file has unsaved changes
- **White filename**: file is saved
- **Save**: Use Ctrl+S or click the disk icon

## 3. Options Panel

### Contextual according to file
Displays options for the currently open/selected file.

### Types of options
- **Components/Layouts**: component elements
- **Scripts**: functions and variables
- **Opening**: double-click on a file in the Explorer

## 4. Console

### Purpose
Displays output and information from your **Visual Scripting Logic** blocks.

### Quick demonstration
1. Create a **Manual Play** node in Visual Scripting
2. Create a **Log** node and set its text to "Hello"
3. Connect the nodes with the white execution wire and click **Play**
4. "Hello" will appear in the Console panel

## 5. Inspector

### Role
Shows detailed information of the selected element.

### Usage
- **Click on Logic node** → Node inspector
- **Click on file** → File inspector
- **Click on Layout element** → Element inspector

## 6. Preview Panel (Main workspace)

### Display modes according to file type

#### For Scripts
Shows the **Visual Scripting editor** where you build logic using connected nodes

#### For visual elements
Three available modes:

**Builder**
- Shows visual borders around selected elements
- Interactive design mode for building your interface

**Logic**
- Create interactive behavior for specific elements
- Context-aware Visual Scripting editor

**Preview**
- Shows exactly how your application will look to end users
- Renders the final result as it will appear after export

### Preview formats
- **Desktop**: full browser format
- **Smartphone**: responsive mobile format
- **Full screen**: Preview on the entire screen (Escape to return)

## User interface

### Navigation
- **Double-click** to open a file
- **Single click** to select
- **Drag & Drop** to organize

### Shortcuts
- **Ctrl+S**: save
- **Escape**: exit full screen mode
- **Enter**: validate renaming

## Key concepts

### File types
- **Scripts**: logic and functions
- **Components**: reusable elements
- **Layouts**: pages and structures

### Basic workflow
1. **Create and organize** files using the Explorer
2. **Configure properties** in the Options panel
3. **Build logic** using Visual Scripting
4. **Test your work** in Preview mode and check Console for debugging
5. **Fine-tune details** using the Inspector