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

Clone the repository:

git clone <repository-url>
cd vue-site-builder

Install dependencies:
```
npm install
```
Run the development server:
```
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.