Canvass 🎨✨

A premium, high-fidelity, Canva-inspired visual design studio built directly in the browser using React, Vite, and TailwindCSS.

Canvass provides an elegant, modern, and production-ready design suite that supports vector manipulation, typography styling, real-time templates, image manipulation, and seamless exports.

---

🚀 Key Features

🎨 1. Canva-Inspired Interface & Aesthetic

• Modern White Theme: Sleek white headers, sidebars, and contextual toolbars paired with a violet brand accent (#8b5cf6).
• Sleek Dot-Grid Workspace: A premium design workspace with a light, non-intrusive dotted coordinate alignment grid.
• Double-Layer Canvas: Rendered with an outer overflow-visible sheet and an inner hidden clip workspace, allowing selection outlines, coordinates HUD, and floating pills to overflow beautifully without clipping during high-quality rendering.
• Glassmorphic Authentication: A stunning, full-featured login page with simulated social platforms (Google/Facebook), live input validation, eye toggles, and creator presets for a frictionless 1-click Pro experience.

⚙️ 2. High-Performance Contextual Controls

• Adaptive Toolbar: A custom h-14 header bar that dynamically changes controls based on selection:
  • Canvas Settings: Width/height controls, size presets (Square, Post, Story, YouTube, A4, Slide), and direct background swatches.
  • Text Manipulation: Interactive font lists, font size steppers, text effects (Neon Glow, Outline, Curved Text with intensity controls), style presets, alignments, and custom color pickers.
  • Parametric Shapes: Controls for corners (rectangles), stars (spikes & inner radius adjustments), and custom polygon sides.
  • Image Processing: Flip utilities (horizontal & vertical) and preset CSS image filters (Warm, Grayscale, Sepia, Blur, Invert).
• Layering & Alignment Controls: Quick layer buttons (Bring to front, Bring forward, Send backward, Send to back), duplication, and deletion.
• Smart Coordinate HUD: Displays current coordinates (X, Y) and dimensions (W × H) right above selected elements in real-time.

⚡ 3. Professional Vector & Bulk Operations

• Precise Drag Snapping: Smart center guidelines align elements automatically to the horizontal and vertical axes of the canvas.
• Multi-Element Nudging: Group nudging using arrow keys (1px) or Shift + arrow keys (10px) for quick layout tuning.
• Align & Distribute: Align multiple items to the left, center, right, top, middle, bottom, or distribute spacing evenly horizontally and vertically.
• Interactive Grouping: Full support for grouping (Ctrl + G) and ungrouping (Ctrl + Shift + G) elements.

---

⌨️ Global Keyboard Shortcuts

Shortcut	Action
Ctrl + Z	Undo
Ctrl + Y	Redo
Ctrl + C	Copy Selected Element
Ctrl + V	Paste Element (offsets position slightly)
Ctrl + D	Duplicate Element
Ctrl + G	Group Selected Elements
Ctrl + Shift + G	Ungroup Elements
Delete / Backspace	Delete Selection
Arrow Keys	Nudge Element by 1px
Shift + Arrow Keys	Nudge Element by 10px

---

🛠️ Technology Stack

• Frontend Framework: React 18 (Vite-powered for instant HMR)
• Styling: TailwindCSS 4 (CSS Variables & custom design tokens)
• Icons: Lucide React
• State Management: Zustand (Global state, historical undo/redo tracking)
• Canvas Export: HTML-to-Image (PNG & high-quality JPEG renderers)

---

📂 Project Structure

canva/
├── src/
│   ├── components/
│   │   ├── Canvas.jsx             # Dual-layer export workspace & snapping guides
│   │   ├── ContextualToolbar.jsx  # Contextual options bar with custom steppers/pickers
│   │   ├── ElementWrapper.jsx     # Vector handle controller & floating HUD
│   │   ├── Header.jsx             # Editable title, exports, and profile dropdown
│   │   ├── Sidebar.jsx            # Tab rail for Templates, Text, Elements, & Uploads
│   │   └── Login.jsx              # High-fidelity glassmorphic login screen
│   ├── store/
│   │   └── useCanvasStore.js      # Core canvas state, history stack, and authentication
│   ├── index.css                  # Custom styling, scrollbars, and grid textures
│   ├── App.jsx                    # Auth router and primary view layout
│   └── main.jsx
├── package.json
└── vite.config.js

---

⚡ Getting Started

1. Install dependencies:

   npm install

2. Run dev server:

   npm run dev

3. Build for production:

   npm run build

---

🔒 Simulated Credentials (for quick testing)

You can use the Quick Login Presets on the Login screen, or use these credentials:

• Email: creator@canvass.io
• Password: password (min. 6 characters required)