Can I vibecode Snappa?

Build a comprehensive personal replacement for Snappa, a cloud-based graphic design tool, in an empty repository.
Use Next.js 15, TypeScript, React, Tailwind CSS, IndexedDB, and HTML5 Canvas (or Fabric.js/Konva) for a rich editing experience.
The core loop revolves around composing fixed-size social media graphics using local images, text, and pre-built templates, followed by exporting the final design as a high-resolution PNG or SVG.

### UI & Aesthetics
The application must feel premium and deeply engaging. Use a modern, dark-themed design system (or a highly polished light theme with glassmorphic elements) featuring vibrant accent colors, smooth micro-interactions on hover, and clear typography (e.g., Inter or Roboto).
- **Workspace:** A central drag-and-drop canvas area with zoom, pan, and alignment snapping.
- **Sidebar (Left):** Categorized tabs for Templates, Local Images (with a drag-and-drop upload zone), Text, Shapes, and Backgrounds.
- **Toolbar (Top):** Context-aware properties panel for the currently selected object (e.g., font size, color picker, opacity, layer order, duplicate, delete) and an 'Export' button.
- **Sidebar (Right) / Context Menu:** Canvas settings like preset dimensions (e.g., 1080x1080 for IG, 1200x628 for Facebook).

### UX & Interactions
- Provide instant visual feedback for all actions. Ensure resizing, rotating, and dragging objects feels buttery smooth.
- Implement keyboard shortcuts for common actions (Delete, Copy, Paste, Undo, Redo, Group).
- Show clear loading states, success toasts upon export, and recoverable error messages if an operation fails.

### State & Data Models
- Use a robust state management approach to handle the `Project` state, which includes a list of `Elements` (Text, Image, Shape), their properties (x, y, width, height, rotation, z-index, content), and canvas metadata (width, height, background).
Build a highly intuitive, lightning-fast social media graphics creation tool inspired by Snappa. The application must be built using React, TypeScript, and a Canvas/SVG hybrid approach, designed specifically to help marketers and creators pump out perfectly sized graphics with zero friction.

Core Features & Functionality:
1. **Preset Canvas Sizes**: A welcome screen offering one-click canvas generation perfectly sized for specific platforms (e.g., YouTube Thumbnail, Instagram Post, Facebook Cover, Twitter Header).
2. **Background & Asset Library**: A search-driven sidebar allowing users to browse and insert backgrounds, high-quality stock patterns, and vector icons onto the canvas.
3. **Text & Typography Engine**: Robust text handling allowing users to add headings, subheadings, and body text with extensive font choices, text shadow, letter spacing, and line-height controls.
4. **Layer Management & Effects**: Simple layer ordering (bring forward, send backward), opacity controls, and image effects (blur, darken, color overlay) for background images.
5. **One-Click Resize**: A magical feature that takes a completed design and intelligently adapts its layout to a different preset size (e.g., turning an Instagram Square into a Twitter Post).

Design & Aesthetics:
- The user experience must be incredibly snappy and frictionless. The UI should be bright, modern, and inviting, utilizing a clean light mode or a sophisticated dark mode.
- Use vibrant accent colors for primary actions, paired with sleek, minimalist icons and ample whitespace in the toolbars.
- Implement smooth, responsive interactions for resizing and rotating elements on the canvas, with clear visual guides (smart guides) appearing to aid alignment.
- The interface should feel spacious, maximizing the central canvas area while keeping essential tools readily accessible in a well-organized sidebar.
- Typography throughout the app must be modern and energetic, using fonts like Poppins or Plus Jakarta Sans.

Technical Requirements:
- Canvas Rendering: Use the HTML5 Canvas API or an SVG-based DOM approach to render the composition accurately, ensuring what you see in the editor perfectly matches the final export.
- Smart Guides Algorithm: Implement an algorithm that detects proximity to the center or edges of other objects and the canvas bounds, drawing alignment lines and snapping elements into place.
- State Management: Efficiently manage the properties of all canvas objects (x, y, width, height, rotation, z-index, filters) using a scalable state solution like Zustand.
- Export Engine: Generate high-quality PNG and JPG exports directly in the browser, ensuring text rendering is crisp and accurate to the chosen fonts.
- Responsive Editor: Ensure the editor UI itself is fully responsive, though the canvas maintains its fixed aspect ratio based on the chosen preset.