# Vue Site Builder

This project is a Vue.js application designed to be a visual site builder, allowing users to drag and drop various UI components onto an artboard, arrange them, and customize their properties. The goal is to provide a flexible and intuitive interface for designing web layouts, adhering to a modern, dark-themed aesthetic with rounded elements and a bluish tint.

## Features

### Theming & Design
- **Dark Theme & Modern UI**: The application features a minimal, dark-themed interface with rounded corners on all UI elements and a cohesive bluish tint across various components and controls, ensuring a sleek and consistent user experience.

### Project Management
- **Create New Projects**: Users can start new design projects.
- **Save/Load Projects**: (Planned/Future Feature) Persistence of project state.
- **Multiple Pages**: Each project can contain multiple design pages.

### Editor Functionality

#### Component Library
- **Diverse UI Components**: A wide range of common UI elements (headings, paragraphs, buttons, inputs, images, cards, navigation, feedback components, **dividers, spacers, video players, and maps**) are available for selection.
- **Categorized Components**: Components are grouped into logical categories (e.g., Layout, Typography, Forms, Content, Navigation, Feedback, **Media**) for easy discovery.
- **Drag-and-Drop**: Users can drag components from the library onto the artboard.
- **Hover Previews**: Hovering over a component in the library displays a scaled-down visual preview of the component, allowing users to quickly see what it looks like before dropping it onto the artboard.

#### Artboard
- **Dynamic Component Rendering**: Components dropped onto the artboard are rendered dynamically based on their `type`, utilizing dedicated Vue components for each UI element to ensure correct visual representation and behavior. Default component styles are theme-consistent and visually distinct.
- **Responsive Aspect Ratios & Scaling**: The artboard container now correctly scales its content to fit different aspect ratios and zoom levels. Components retain their percentage-based positions and sizes, adapting smoothly to new artboard dimensions without being cut off.
- **Zoom In/Out**: Users can zoom the artboard to focus on details or get an overview.
- **Grid System**:
    - **Toggle Grid Lines**: Grid lines can be shown or hidden.
    - **Snap to Grid**: Components can snap to the grid for precise alignment. The visual grid now dynamically scales with the artboard's dimensions and zoom level, ensuring perfect alignment with snapping points.
- **Component Placement and Manipulation**:
    - **Click-to-Select**: Components can be selected instantly by clicking them on the artboard, allowing immediate access to their properties in the Properties Panel.
    - **Move Tool**: Components can be moved around the artboard by clicking and dragging. The drag interaction is now more responsive with a reduced movement threshold.
    - **Smart Guides**: Visual guides appear to assist with aligning components relative to each other and the artboard (e.g., center alignment, edge alignment), supporting both horizontal and vertical snapping.
    - **Axis Locking**: Holding `Shift` while dragging locks movement to either the horizontal or vertical axis.
    - **Resizable Components**: Selected components display resize handles, allowing users to adjust their width and height.

#### Properties Panel
- **Enhanced Properties Editor**: When a component is selected, a comprehensive properties panel is displayed, allowing granular control over various aspects of the component.
- **Layout Controls**: Dedicated inputs for `X Position (%)`, `Y Position (%)`, `Width (%)`, and `Height (%)` enable precise placement and sizing.
- **Extended Style Controls**: Includes inputs for `Background Color`, `Text Color`, `Font Size (px)`, `Padding (px)`, `Border Color`, `Border Style`, `Border Width (px)`, `Border Radius (px)`, and individual `Margin` properties (`Top`, `Right`, `Bottom`, `Left` in px).
- **Unit Handling**: Numerical style properties (e.g., font size, padding, border width/radius, margins) are correctly handled with 'px' units.
- **Live Updates**: Changes made in the properties panel are immediately reflected on the artboard.

#### Other Panels
- **Pages Panel**: Manage and navigate between different pages within a project.
- **Logic Editor**: (Currently a placeholder) Intended for advanced users to add custom logic or interactivity to components.

#### Windows
- **Fixed Panels**: Floating windows/panels (e.g., Component Library, Properties Panel) are now fixed in their positions, providing a stable and uncluttered workspace.

## Setup Steps

1.  **Clone the repository:**
    ```bash
    git clone <repository-url>
    cd vue-site-builder
    ```

2.  **Install dependencies:**
    ```bash
    npm install
    ```

3.  **Run the development server:**
    ```bash
    npm run dev
    ```
    This will start the Vite development server, usually accessible at `http://localhost:5173/`.

## Project Structure (Key Files)

-   `src/main.js`: Entry point of the Vue application. Initializes Pinia and Vue Router.
-   `src/App.vue`: Main application layout and global CSS variables for theming.
-   `src/router/index.js`: Vue Router configuration.
-   `src/stores/projectStore.js`: Pinia store for managing project state, including pages and components.
-   `src/views/Editor.vue`: The main editor interface, responsible for integrating the component library, canvas, and property panels. It now imports component definitions from `StandardComponents.js`.
-   `src/components/ComponentLibrary.vue`: Displays the list of available UI components that can be dragged onto the artboard. Now includes hover previews.
-   `src/components/Artboard.vue`: The main canvas area where components are dropped and manipulated. Handles drag/drop, movement, resizing, and rendering of dynamic components with proper scaling and grid snapping.
-   `src/components/PropertiesPanel.vue`: Displays and allows editing of selected component properties with enhanced controls.
-   `src/components/DraggablePanel.vue`: (Renamed conceptually to FixedPanel) Base component for fixed UI panels.
-   `src/components/componentMap.js`: Maps component `type` strings to their corresponding Vue render components. Now includes new components like Divider, Spacer, Video, and Map.
-   `StandardComponents.js`: Defines the structure and default properties/styles for all UI components available in the library. This is the central source of truth for component definitions.
-   `src/components/render-components/`: This directory contains individual Vue components (`H1Component.vue`, `ButtonComponent.vue`, `ImgComponent.vue`, **`DividerComponent.vue`, `SpacerComponent.vue`, `VideoComponent.vue`, `MapComponent.vue`**, etc.) responsible for rendering specific UI elements on the artboard. Their default styles are theme-consistent and visually distinct.

## Development Notes

-   **Component Diversity**: The application uses a dynamic component rendering approach. Each UI element (e.g., button, image, input) has its own dedicated Vue component in `src/components/render-components/`. This allows for flexible styling and property management per component type.
-   **Component Definition**: Components available in the library are defined in `StandardComponents.js`. Each definition includes `type`, `name`, `group`, and a `defaults` object containing `props` (for data like `text`, `src`, `placeholder`) and `style` (for CSS properties).
-   **State Management**: `Pinia` is used for global state management, particularly for `projectStore` which holds the current project's data, active page, and components.
-   **Theming**: Global CSS variables in `App.vue` (`--bg-color`, `--panel-color`, `--accent-color`, `--border-color`, `--text-color`, `--border-radius`) provide a centralized and consistent dark theme.

## To-Do / Future Enhancements

-   Implement full functionality for currently placeholder components (e.g., `LogicEditor`).
-   Add more advanced layout tools (e.g., grouping, alignment tools, distribution).
-   Implement Undo/Redo functionality.
-   Integrate persistent storage for projects (e.g., LocalStorage, IndexedDB, or a backend).
-   Further refine the properties panel with dynamic input types based on property types (e.g., dropdowns for enums, toggles for booleans).
-   Code generation: currently logs to console, needs a proper export feature.