story-generator/docs/modo-foco.md

Modo Foco

Visão Geral

O Modo Foco é uma funcionalidade projetada para melhorar a experiência de leitura e gravação de histórias, focando na concentração e acessibilidade.

Funcionalidades

1. Ativação Automática

• Inicia automaticamente ao começar uma gravação
• Desativa automaticamente ao parar a gravação
• Pode ser ativado/desativado manualmente através do botão dedicado

2. Interface Adaptativa

• Remove distrações visuais durante a leitura
• Aumenta o foco no texto atual
• Transições suaves entre estados

3. Controles de Acessibilidade

• Ajuste de tamanho da fonte (12px - 32px)
• Controle de espaçamento entre letras
• Controle de espaçamento entre palavras
• Ajuste de altura da linha
• Velocidade de leitura personalizável

4. Organização dos Controles

Seção 1 (Controles Principais)

• Maiúsculas/Minúsculas
• Sílabas
• Destacar palavras

Seção 2 (Controles de Formatação)

• Tamanho da fonte
• Espaçamento entre letras
• Espaçamento entre palavras
• Altura da linha
• Velocidade de leitura

5. Indicadores Visuais

• Ícones intuitivos para cada função
• Feedback visual do estado atual
• Timer de gravação
• Destaque de palavras durante a leitura

Estilos e Temas

• Modo claro com fundo suave
• Contraste adequado para leitura
• Sombras sutis para hierarquia visual
• Design responsivo para diferentes tamanhos de tela

Integração

• Componente AudioRecorder para gravações
• Componente TextControls para formatação
• Sistema de destaque de palavras
• Gerenciamento de estado global

Uso Técnico

Ativação do Modo Foco

// Em AudioRecorder
const startRecording = async () => {
  if (!focusModeActive && onFocusModeToggle) {
    onFocusModeToggle();
  }
  // ... resto do código
};

Desativação do Modo Foco

// Em AudioRecorder
const stopRecording = () => {
  // ... código de parada da gravação
  if (focusModeActive && onFocusModeToggle) {
    onFocusModeToggle();
  }
};

Considerações de Acessibilidade

• Alto contraste para melhor legibilidade
• Suporte a diferentes tamanhos de fonte
• Controles de espaçamento para dislexia
• Feedback visual claro das ações

Próximos Passos

1. Implementar persistência das preferências do usuário
2. Adicionar mais opções de temas
3. Expandir controles de acessibilidade
4. Melhorar feedback de progresso da leitura