some love 🫶🏼

[vyctorbrzezowski]

Preview: https://motion-studio-preview.vercel.app

Summary

Este PR consolida um passe de hardening e melhorias gerais no chrome da aplicação — sidebars, inspetor, controles de preview/stage, tema, exportação e navegação — com foco em polish operacional e QoL. Nenhum efeito foi alterado.

Inclui iteração e calibração dos fades de scroll da sidebar (topo + rodapé): overlays condicionais de 2rem, visíveis mas discretos, validados em light/dark.

Chrome e toolbar

• Alinhar chrome da toolbar de preview/stage com o restante do shell
• Flutuar controles de navegação do stage (anterior/próximo) sobre o canvas
• Centralizar controles de navegação entre efeitos no stage
• Corrigir região de drag do Electron bloqueando cliques nos controles superiores (pointer-events: none no overlay .drag-region + titlebar-drag nos headers interativos)
• Adicionar reset contextual do stage (só aparece quando há algo para resetar)

Sidebar

• Adicionar header de marca na sidebar com logo e título "Motion Studio"
• Usar asset favicon.png como logo (incluindo HTML windows e index.html)
• Mover toggle de tema/appearance para o header da sidebar
• Botão de tema icon-only (sem glass/borda) com hover sutil
• Chevron Lucide (ChevronDown) logo após o título de cada grupo, com rotação ao colapsar
• Permitir colapsar grupos da sidebar individualmente
• Expandir automaticamente o grupo ativo ao trocar de efeito
• Ajustar espaçamento dos títulos de seção
• Inset no highlight de item selecionado
• Largura da sidebar redimensionável com persistência em localStorage
• Reset da largura com duplo clique no separador
• Prevenir scroll horizontal na lista da sidebar
• Fade de scroll no topo e rodapé da lista quando há mais conteúdo fora da viewport — overlays com gradiente alinhado ao tema (--color-background), zona de 2rem, opacidade calibrada (pico ~68%, meio ~34%, cauda ~10%); some no topo/fim conforme posição do scroll
• Scrollbar customizada da sidebar no build web
• Expandir/colapsar todos os grupos do menu no hover da sidebar (Text Effects, Loading & Feedback, etc.) via ícones Minimize2 / Maximize2 à esquerda do toggle de tema

Inspetor e controles

• Reduzir espaçamento superior do inspetor
• Remover ação global de reset do inspetor
• Reestilizar sliders do inspetor (track, thumb, foco)
• Alinhar switches ao visual dos sliders
• Permitir entrada manual de valor nos sliders
• Renderizar selects curtos como blocos de escolha (choice blocks)
• Adicionar grid de presets de cor com paletas fixas
• Refinar layout dos presets de cor
• Botão de reset de cores contextual (só quando alteradas)
• Geração de cores aleatórias harmônicas (HSL)
• Botão de easing aleatório no painel de treatments
• Replay da animação de preview ao resetar controles
• Replay do treatment ao mudar controles

Tema e aparência

• Ciclar modos globais de appearance (system → dark → light)
• Melhorar contraste no light mode (botões, bordas, sidebar)
• Corrigir toggle de tema no build web (browser-glazeapi + localStorage)
• Ajustar hook de tema para funcionar no web

Canvas / stage / preview

• Controles flutuantes de fundo do canvas (padrão dots/grid/solid + tom)
• Refinar modos de background do canvas (presets combinando padrão + tom)
• Unificar tom do canvas no controle de background (ciclo de presets)
• Ajustar contraste dos controles do canvas para tema/tom mistos (pill segue canvasTone, não só o tema do app)
• Esconder overflow horizontal do stage quando com zoom
• Corrigir scroll infinito da página no dev web (min-h-0 nos stages + overflow: hidden em html/body/#root + root.unmount() no HMR)
• Estilos CSS para backgrounds dots/grid/solid e tons light/dark/system

Navegação

• Navegar entre efeitos com setas do teclado (←/→)

Exportação

• Controle de word wrap no diálogo de exportação
• Mostrar wrap só quando há overflow horizontal
• Offset do controle de wrap em relação à scrollbar
• Altura estável do diálogo ao trocar de aba
• Borda neutra na ação de download

Dev / HMR

• Corrigir empilhamento de roots React no HMR (root.unmount() no dispose de main e settings)

Limpeza

• Remover classes dark: redundantes nos controles do canvas
• Encurtar comentário da região de drag

Test plan

• Abrir app (Electron e/ou npm run dev:web) e confirmar layout geral sem regressões
• Sidebar: redimensionar, duplo clique para reset, colapsar/expandir grupos (individual e todos no hover com Minimize2/Maximize2)
• Sidebar: navegar efeitos e verificar auto-expansão do grupo ativo
• Sidebar: com lista longa, rolar e confirmar fades discretos no topo (quando scrollTop > 0) e rodapé (quando há itens abaixo); sem fade no topo quando no início nem no rodapé quando no fim
• Toggle de tema no header: ciclar system/dark/light; verificar persistência no web
• Stage: controles flutuantes de fundo/zoom; reset contextual; navegação prev/next; sem scroll infinito da página (hard refresh se aba antiga acumulou HMR)
• Inspetor: sliders (drag + entrada manual), switches, selects curtos, presets de cor e resets contextuais
• Setas ←/→ trocam de efeito; replay ao resetar controles
• Export dialog: wrap, troca de abas sem saltar altura, download
• Electron: arrastar janela pela chrome sem bloquear botões do topo
• Dev web: recarregar via HMR sem duplicar UI na #root