🎨 AuraBoard — AI-Assisted Infinite Whiteboard

AuraBoard is a premium, local-first interactive whiteboard application built with React, TypeScript, and Vite. It runs completely in the browser locally and offers a suite of advanced drawing utilities, multi-board management, vector/raster asset exporting, and deep AI design capabilities powered by the OpenRouter API.

---

✨ Features

🖌️ Canvas Engine

• Infinite Pan & Zoom: Pan (hold Space + drag, or Middle-click drag) and zoom dynamically centered on your mouse cursor.
• Drawing Utilities: Brush/Pen (smooth freehand curves), Straight Line, Rectangle, Ellipse, Arrow, Text, and Eraser.
• Dynamic Smart Connectors: Connect arrow endpoints to active shapes (rectangles/ellipses). The arrow auto-binds to the border edge and dynamically adjusts its coordinates when shapes are dragged.
• Grid Snapping: Align components and connections perfectly using a toggleable grid snap configuration.
• Inline Editing: Double-click any rectangle, ellipse, or text element to immediately edit its inner text content with a focused text overlay.

⚙️ Local-First Data & Formatting

• Dashboard & Hub: Save, rename, load, and delete multiple boards. All data is persisted locally in the browser's localStorage.
• Rich Properties Panel: Modify stroke width, dashed/solid stroke styles, fill styles (none, solid, semi-transparent), stroke/fill colors (via custom color wheel picker or presets), and individual element opacity.
• Format Exporter:
  • SVG: Generate and download standard XML vector coordinates for use in Illustrator or web pages.
  • PNG: Export your drawings automatically scaled at 2x (Retina) quality, cropped exactly to the content bounds.
  • JSON: Download or import raw structural boards configuration files.

🧠 OpenRouter AI Assistant

• Prompt-to-Shape: Enter a prompt (e.g. "flowchart of user login verification" or "React hook lifecycle mind map") to have the AI compute, position, and render vector shapes directly onto the center of your canvas.
• Selection Analysis: Highlight elements on the board and click Explain inside the AI sidebar. The assistant reads the selected elements' context and explains the diagram or code concept.
• Tidy Sketches: Draw a rough shape, highlight it, and click Tidy Sketch to have the AI interpret the coordinates and replace the sketch with aligned, perfect geometric shapes.
• Persona Customization: Update API keys, switch between free models, and customize the AI system prompts dynamically in the Settings dashboard.

---

🛠️ Technology Stack

• Framework: React 18, TypeScript, Vite
• Rendering: HTML5 Canvas API (interactive canvas drawings & selection handles math)
• Styles: Modern Glassmorphism & Neon Dark Mode using Vanilla CSS
• Icons: Lucide React
• API Integrations: OpenRouter Client (Direct Client-Side Calls)

---

🚀 Local Installation & Execution

1. Clone or Navigate to Project Directory:

   git clone https://github.com/florexdev/archdoctor

   cd auraboard

2. Install Package Dependencies:

   npm install

3. Start Development Server:

   npm run dev

4. Open the local Vite URL in your web browser (usually http://localhost:5173/).

---

🔑 AI Configuration (OpenRouter)

To activate the AI Assistant features:

1. Go to OpenRouter.ai Keys and generate an API key.
2. Click the Settings Gear Icon at the top right of the AuraBoard toolbar.
3. Paste your API key and choose from the available free model options:
   • poolside/laguna-xs-2.1:free
   • cohere/north-mini-code:free (Recommended default)
   • nvidia/nemotron-nano-9b-v2:free
4. Toggle the AI Assistant panel using the Sparkles Button (or press Ctrl + Space).