Crie um editor gráfico online semelhante ao Polotno Studio

, com foco em design intuitivo, edição em tempo real e exportação de imagens.

O sistema deve permitir ao usuário:

Criar, importar e editar designs (imagens, textos, formas, ícones).

Manipular elementos via drag-and-drop, redimensionar, rotacionar, agrupar e alterar ordem (camadas).

Personalizar texto com escolha de fonte, tamanho, cor, alinhamento, espaçamento e sombra.

Adicionar imagens a partir do upload local ou de uma biblioteca gratuita (ex: Unsplash API opcional).

Adicionar formas e ícones vetoriais (SVG) com opção de mudar cor e opacidade.

Gerenciar múltiplas páginas ou quadros dentro de um mesmo projeto (como slides ou telas).

Salvar e carregar projetos no navegador (LocalStorage) e futuramente em banco de dados (ex: Firebase).

Exportar o design final como imagem (PNG, JPG) ou PDF em alta resolução.

Interface responsiva, moderna e leve, com layout limpo e fluido (estilo Canva/Polotno).

Modo escuro/claro automático e suporte a múltiplos idiomas (começando com PT-BR e EN).

⚙️ Requisitos técnicos sugeridos

Frontend: React + TypeScript + TailwindCSS + Zustand (ou Redux) para estado.

Canvas: Use Konva.js ou Fabric.js para manipulação gráfica 2D.

Backend (opcional): Node.js + Express ou Firebase Functions (para salvar projetos e uploads).

Armazenamento local: IndexedDB ou LocalStorage para rascunhos automáticos.

Exportação: Utilize html-to-image ou konva.toDataURL() para geração de PNG/PDF.

UI Components: ShadCN/UI ou Radix UI para painéis laterais, sliders e botões.

Design:

Painel lateral esquerdo: elementos (textos, imagens, formas, templates).

Painel lateral direito: propriedades e estilos do item selecionado.

Barra superior: novo projeto, desfazer/refazer, salvar, exportar.

Área central: canvas editável com zoom e guias de alinhamento.

🚀 Funcionalidades extras (para roadmap futuro)

Camadas com visibilidade/lock.

Upload e remoção de fontes customizadas.

Templates salvos.

Colaboração em tempo real (WebSocket).

Geração de imagens com IA (ex: via API de imagem).

💡 Exemplo de instrução curta alternativa (para versão resumida):

Crie um editor de design online tipo Polotno Studio, com React + Tailwind + Konva.js.
Deve permitir adicionar texto, imagens e formas, editar estilo, mover via drag-and-drop, salvar no navegador e exportar como PNG/PDF.
Interface moderna e responsiva, com painéis laterais para controle dos elementos e estilo.

README.md

@@ -1,10 +1,13 @@
 ---
-title: Designcraft Studio
-emoji: 🌖
-colorFrom: indigo
-colorTo: green
+title: DesignCraft Studio  ✨🎨
+colorFrom: green
+colorTo: red
+emoji: 🐳
 sdk: static
 pinned: false
+tags:
+  - deepsite-v3
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+# Welcome to your new DeepSite project!
+This project was created with [DeepSite](https://huggingface.co/deepsite).

components/navbar.js

@@ -0,0 +1,113 @@
+class CustomNavbar extends HTMLElement {
+    connectedCallback() {
+        this.attachShadow({ mode: 'open' });
+        this.shadowRoot.innerHTML = `
+            <style>
+                .navbar {
+                    height: 4rem;
+                    background-color: var(--primary);
+                    color: white;
+                    display: flex;
+                    align-items: center;
+                    justify-content: space-between;
+                    padding: 0 1.5rem;
+                    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+                }
+                
+                .logo {
+                    font-weight: 600;
+                    font-size: 1.25rem;
+                    display: flex;
+                    align-items: center;
+                    gap: 0.5rem;
+                }
+                
+                .actions {
+                    display: flex;
+                    gap: 1rem;
+                }
+                
+                .btn {
+                    padding: 0.5rem 1rem;
+                    border-radius: 0.375rem;
+                    font-weight: 500;
+                    cursor: pointer;
+                    display: flex;
+                    align-items: center;
+                    gap: 0.5rem;
+                    transition: all 0.2s;
+                }
+                
+                .btn-primary {
+                    background-color: white;
+                    color: var(--primary);
+                }
+                
+                .btn-primary:hover {
+                    background-color: #f3f4f6;
+                }
+                
+                .btn-secondary {
+                    background-color: rgba(255, 255, 255, 0.1);
+                    color: white;
+                }
+                
+                .btn-secondary:hover {
+                    background-color: rgba(255, 255, 255, 0.2);
+                }
+                
+                .icon {
+                    width: 1.25rem;
+                    height: 1.25rem;
+                }
+            </style>
+            
+            <nav class="navbar">
+                <div class="logo">
+                    <i data-feather="pen-tool" class="icon"></i>
+                    <span>DesignCraft Studio</span>
+                </div>
+                
+                <div class="actions">
+                    <button class="btn btn-secondary" id="save-btn" tooltip="Salvar (Ctrl+S)">
+                        <i data-feather="save" class="icon"></i>
+                        <span class="hidden md:inline">Salvar</span>
+                    </button>
+                    <button class="btn btn-secondary" id="undo-btn" tooltip="Desfazer (Ctrl+Z)">
+                        <i data-feather="rotate-ccw" class="icon"></i>
+                    </button>
+                    <button class="btn btn-secondary" id="redo-btn" tooltip="Refazer (Ctrl+Y)">
+                        <i data-feather="rotate-cw" class="icon"></i>
+                    </button>
+                    <button class="btn btn-primary" id="export-btn" tooltip="Exportar (Ctrl+E)">
+                        <i data-feather="download" class="icon"></i>
+                        <span class="hidden md:inline">Exportar</span>
+                    </button>
+                </div>
+            </nav>
+        `;
+        
+        // Add event listeners
+        this.shadowRoot.getElementById('save-btn').addEventListener('click', () => {
+            saveProject();
+            this.showToast('Projeto salvo com sucesso!');
+        });
+        
+        this.shadowRoot.getElementById('export-btn').addEventListener('click', () => {
+            document.querySelector('custom-export-modal').setAttribute('open', 'true');
+        });
+    }
+    
+    showToast(message) {
+        const toast = document.createElement('div');
+        toast.className = 'fixed bottom-4 right-4 bg-green-500 text-white px-4 py-2 rounded-md shadow-lg';
+        toast.textContent = message;
+        document.body.appendChild(toast);
+        
+        setTimeout(() => {
+            toast.remove();
+        }, 3000);
+    }
+}
+
+customElements.define('custom-navbar', CustomNavbar);

components/properties-panel.js

@@ -0,0 +1 @@
+class CustomPropertiesPanel extends

components/toolbar.js

@@ -0,0 +1,173 @@
+class CustomToolbar extends HTMLElement {
+    connectedCallback() {
+        this.attachShadow({ mode: 'open' });
+        this.shadowRoot.innerHTML = `
+            <style>
+                .toolbar {
+                    width: 4rem;
+                    background-color: white;
+                    border-right: 1px solid #e5e7eb;
+                    display: flex;
+                    flex-direction: column;
+                    align-items: center;
+                    padding: 1rem 0;
+                    gap: 0.5rem;
+                    overflow-y: auto;
+                }
+                
+                .dark .toolbar {
+                    background-color: #1f2937;
+                    border-right-color: #374151;
+                }
+                
+                .tool-btn {
+                    width: 2.5rem;
+                    height: 2.5rem;
+                    border-radius: 0.375rem;
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                    cursor: pointer;
+                    transition: all 0.2s;
+                    color: #4b5563;
+                }
+                
+                .dark .tool-btn {
+                    color: #9ca3af;
+                }
+                
+                .tool-btn:hover {
+                    background-color: #e5e7eb;
+                    color: #1f2937;
+                }
+                
+                .dark .tool-btn:hover {
+                    background-color: #374151;
+                    color: #f3f4f6;
+                }
+                
+                .tool-btn.active {
+                    background-color: var(--primary-light);
+                    color: white;
+                }
+                
+                .dark .tool-btn.active {
+                    background-color: var(--primary-dark);
+                }
+                
+                .tool-separator {
+                    width: 80%;
+                    height: 1px;
+                    background-color: #e5e7eb;
+                    margin: 0.5rem 0;
+                }
+                
+                .dark .tool-separator {
+                    background-color: #374151;
+                }
+                
+                .icon {
+                    width: 1.25rem;
+                    height: 1.25rem;
+                }
+            </style>
+            
+            <div class="toolbar">
+                <button class="tool-btn" id="select-tool" tooltip="Selecionar (V)">
+                    <i data-feather="mouse-pointer" class="icon"></i>
+                </button>
+                
+                <button class="tool-btn" id="text-tool" tooltip="Texto (T)">
+                    <i data-feather="type" class="icon"></i>
+                </button>
+                
+                <button class="tool-btn" id="image-tool" tooltip="Imagem (I)">
+                    <i data-feather="image" class="icon"></i>
+                </button>
+                
+                <div class="tool-separator"></div>
+                
+                <button class="tool-btn" id="rectangle-tool" tooltip="Retângulo (R)">
+                    <i data-feather="square" class="icon"></i>
+                </button>
+                
+                <button class="tool-btn" id="circle-tool" tooltip="Círculo (C)">
+                    <i data-feather="circle" class="icon"></i>
+                </button>
+                
+                <button class="tool-btn" id="line-tool" tooltip="Linha (L)">
+                    <i data-feather="minus" class="icon"></i>
+                </button>
+                
+                <div class="tool-separator"></div>
+                
+                <button class="tool-btn" id="undo-btn" tooltip="Desfazer (Ctrl+Z)">
+                    <i data-feather="rotate-ccw" class="icon"></i>
+                </button>
+                
+                <button class="tool-btn" id="redo-btn" tooltip="Refazer (Ctrl+Y)">
+                    <i data-feather="rotate-cw" class="icon"></i>
+                </button>
+                
+                <div class="tool-separator"></div>
+                
+                <button class="tool-btn" id="zoom-in-btn" tooltip="Zoom In (+)">
+                    <i data-feather="zoom-in" class="icon"></i>
+                </button>
+                
+                <button class="tool-btn" id="zoom-out-btn" tooltip="Zoom Out (-)">
+                    <i data-feather="zoom-out" class="icon"></i>
+                </button>
+            </div>
+        `;
+        
+        // Add event listeners for tools
+        this.shadowRoot.getElementById('text-tool').addEventListener('click', () => {
+            this.setActiveTool('text-tool');
+            this.addTextElement();
+        });
+    }
+    
+    setActiveTool(toolId) {
+        const tools = this.shadowRoot.querySelectorAll('.tool-btn');
+        tools.forEach(tool => {
+            tool.classList.remove('active');
+        });
+        
+        const activeTool = this.shadowRoot.getElementById(toolId);
+        if (activeTool) {
+            activeTool.classList.add('active');
+        }
+    }
+    
+    addTextElement() {
+        const stage = window.designStage;
+        const layer = window.designLayer;
+        
+        const text = new Konva.Text({
+            x: 50,
+            y: 50,
+            text: 'Clique para editar',
+            fontSize: 20,
+            fontFamily: 'Inter',
+            fill: '#000000',
+            draggable: true
+        });
+        
+        layer.add(text);
+        stage.add(layer);
+        
+        // Add to state
+        state.elements.push({
+            type: 'text',
+            x: 50,
+            y: 50,
+            text: 'Clique para editar',
+            fontSize: 20,
+            fontFamily: 'Inter',
+            color: '#000000'
+        });
+    }
+}
+
+customElements.define('custom-toolbar', CustomToolbar);

index.html

@@ -1,19 +1,58 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>
+<!DOCTYPE html>
+<html lang="pt-BR">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>DesignCraft Studio - Editor Gráfico Online</title>
+    <link rel="stylesheet" href="style.css">
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
+    <script src="https://unpkg.com/feather-icons"></script>
+    <script src="https://unpkg.com/konva@8.3.2/konva.min.js"></script>
+</head>
+<body class="bg-gray-50 dark:bg-gray-900 transition-colors duration-200">
+    <custom-navbar></custom-navbar>
+    <main class="flex h-[calc(100vh-4rem)]">
+        <custom-toolbar></custom-toolbar>
+        <div class="flex-1 relative overflow-hidden">
+            <div id="canvas-container" class="absolute inset-0 flex items-center justify-center bg-gray-100 dark:bg-gray-800">
+                <div id="stage-container" class="shadow-xl"></div>
+            </div>
+        </div>
+        <custom-properties-panel></custom-properties-panel>
+    </main>
+    <custom-footer></custom-footer>
+
+    <!-- Modals -->
+    <custom-image-upload-modal></custom-image-upload-modal>
+    <custom-export-modal></custom-export-modal>
+
+    <!-- Components -->
+    <script src="components/navbar.js"></script>
+    <script src="components/toolbar.js"></script>
+    <script src="components/properties-panel.js"></script>
+    <script src="components/footer.js"></script>
+    <script src="components/image-upload-modal.js"></script>
+    <script src="components/export-modal.js"></script>
+
+    <script src="script.js"></script>
+    <script>
+        feather.replace();
+        // Initialize Konva stage
+        document.addEventListener('DOMContentLoaded', () => {
+            const stage = new Konva.Stage({
+                container: 'stage-container',
+                width: 800,
+                height: 600
+            });
+            const layer = new Konva.Layer();
+            stage.add(layer);
+            
+            // Store stage reference
+            window.designStage = stage;
+            window.designLayer = layer;
+        });
+    </script>
+<script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
+</body>
+</html>

script.js

@@ -0,0 +1,122 @@
+// Global state management
+const state = {
+    currentProject: null,
+    selectedElement: null,
+    elements: [],
+    history: [],
+    historyIndex: -1,
+    canvasSize: { width: 800, height: 600 },
+    colorPalette: ['#6366F1', '#F59E0B', '#10B981', '#EF4444', '#3B82F6', '#8B5CF6', '#EC4899'],
+    fonts: ['Inter', 'Arial', 'Helvetica', 'Times New Roman', 'Courier New', 'Georgia', 'Verdana'],
+    darkMode: window.matchMedia('(prefers-color-scheme: dark)').matches
+};
+
+// Initialize dark mode
+function initDarkMode() {
+    if (state.darkMode) {
+        document.documentElement.classList.add('dark');
+    } else {
+        document.documentElement.classList.remove('dark');
+    }
+}
+
+// Save project to localStorage
+function saveProject() {
+    if (state.currentProject) {
+        const projectData = {
+            id: state.currentProject.id,
+            name: state.currentProject.name,
+            elements: state.elements,
+            canvasSize: state.canvasSize,
+            createdAt: new Date().toISOString(),
+            updatedAt: new Date().toISOString()
+        };
+        localStorage.setItem(`project_${state.currentProject.id}`, JSON.stringify(projectData));
+    }
+}
+
+// Load project from localStorage
+function loadProject(projectId) {
+    const projectData = localStorage.getItem(`project_${projectId}`);
+    if (projectData) {
+        const parsedData = JSON.parse(projectData);
+        state.currentProject = {
+            id: parsedData.id,
+            name: parsedData.name,
+            createdAt: parsedData.createdAt,
+            updatedAt: parsedData.updatedAt
+        };
+        state.elements = parsedData.elements || [];
+        state.canvasSize = parsedData.canvasSize || { width: 800, height: 600 };
+        
+        // Render elements on canvas
+        renderElements();
+    }
+}
+
+// Render elements on canvas
+function renderElements() {
+    const stage = window.designStage;
+    const layer = window.designLayer;
+    
+    // Clear existing elements
+    layer.destroyChildren();
+    
+    // Set canvas size
+    stage.width(state.canvasSize.width);
+    stage.height(state.canvasSize.height);
+    
+    // Render each element
+    state.elements.forEach(element => {
+        let konvaElement;
+        
+        switch (element.type) {
+            case 'text':
+                konvaElement = new Konva.Text({
+                    x: element.x,
+                    y: element.y,
+                    text: element.text,
+                    fontSize: element.fontSize,
+                    fontFamily: element.fontFamily,
+                    fill: element.color,
+                    align: element.align,
+                    width: element.width,
+                    draggable: true
+                });
+                break;
+            case 'image':
+                // Image rendering logic
+                break;
+            case 'shape':
+                // Shape rendering logic
+                break;
+        }
+        
+        if (konvaElement) {
+            layer.add(konvaElement);
+        }
+    });
+    
+    stage.add(layer);
+}
+
+// Initialize app
+document.addEventListener('DOMContentLoaded', () => {
+    initDarkMode();
+    
+    // Listen for dark mode changes
+    window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', e => {
+        state.darkMode = e.matches;
+        initDarkMode();
+    });
+    
+    // Create new project if none exists
+    if (!state.currentProject) {
+        state.currentProject = {
+            id: Date.now().toString(),
+            name: 'Novo Projeto',
+            createdAt: new Date().toISOString(),
+            updatedAt: new Date().toISOString()
+        };
+    }
+});

style.css

@@ -1,28 +1,88 @@
-body {
-	padding: 2rem;
-	font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
+
+:root {
+    --primary: #6366f1;
+    --primary-light: #818cf8;
+    --primary-dark: #4f46e5;
+    --secondary: #f59e0b;
+    --secondary-light: #fbbf24;
+    --secondary-dark: #d97706;
+}
+
+* {
+    font-family: 'Inter', sans-serif;
+    box-sizing: border-box;
+}
+
+/* Scrollbar styling */
+::-webkit-scrollbar {
+    width: 8px;
+    height: 8px;
+}
+
+::-webkit-scrollbar-track {
+    background: #f1f1f1;
+}
+
+::-webkit-scrollbar-thumb {
+    background: #c1c1c1;
+    border-radius: 4px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+    background: #a1a1a1;
+}
+
+.dark ::-webkit-scrollbar-track {
+    background: #2d3748;
+}
+
+.dark ::-webkit-scrollbar-thumb {
+    background: #4a5568;
 }
 
-h1 {
-	font-size: 16px;
-	margin-top: 0;
+.dark ::-webkit-scrollbar-thumb:hover {
+    background: #718096;
 }
 
-p {
-	color: rgb(107, 114, 128);
-	font-size: 15px;
-	margin-bottom: 10px;
-	margin-top: 5px;
+/* Konva canvas styling */
+#stage-container {
+    background-color: white;
+    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
 }
 
-.card {
-	max-width: 620px;
-	margin: 0 auto;
-	padding: 16px;
-	border: 1px solid lightgray;
-	border-radius: 16px;
+.dark #stage-container {
+    background-color: #1f2937;
 }
 
-.card p:last-child {
-	margin-bottom: 0;
+/* Tooltip styling */
+[tooltip] {
+    position: relative;
 }
+
+[tooltip]::before {
+    content: attr(tooltip);
+    position: absolute;
+    bottom: 100%;
+    left: 50%;
+    transform: translateX(-50%);
+    padding: 0.25rem 0.5rem;
+    background-color: #333;
+    color: white;
+    border-radius: 0.25rem;
+    font-size: 0.75rem;
+    white-space: nowrap;
+    opacity: 0;
+    pointer-events: none;
+    transition: opacity 0.2s;
+    z-index: 50;
+}
+
+[tooltip]:hover::before {
+    opacity: 1;
+}
+
+.dark [tooltip]::before {
+    background-color: #f3f4f6;
+    color: #111827;
+}