Mockup de interface de usuário para ferramenta de comparação JSON em tons escuros

Objetivo: Criar um protótipo de interface de usuário para um aplicativo desktop em modo escuro, para uma ferramenta de comparação de JSON chamada {argument name="app name" default="Tilted Diffs"}, exibindo comparações de respostas de API intituladas {argument name="diff title" default="API Response — Checkout v2"}. Tela: Captura de tela de desktop widescreen 16:10, aproximadamente 1152×768, com uma janela de aplicativo no estilo macOS flutuando sobre um fundo gradiente azul escuro. Utilize sombras sutis, cantos arredondados, bordas finas e uma estética refinada de ferramenta de desenvolvedor. Layout: O aplicativo compreende quatro áreas principais: uma barra lateral esquerda, uma barra de ferramentas superior que abrange a área do editor e três painéis verticais do editor de código. O primeiro painel do editor é selecionado com um halo de foco azul brilhante. O painel do meio exibe destaques coloridos de diferenças embutidas. O painel mais à direita é mais estreito e parcialmente visível, assemelhando-se a uma aba de arquivo adicional ou a uma terceira coluna de comparação. Barra lateral esquerda: O canto superior esquerdo exibe um botão de semáforo do macOS: três círculos, vermelho, amarelo e verde, respectivamente. Abaixo do nome do aplicativo, há uma caixa de pesquisa com o texto de exemplo "Pesquisar diferenças..." e sugestões de teclado. Abaixo, estão oito itens salvos na lista de diferenças, cada um com um pequeno ícone de documento e um registro de data e hora: 1) "Resposta da API — Checkout v2", mostrando "Hoje, 10h24", destacado em azul como o item selecionado; 2) "Perfil do Usuário — API Pública", mostrando "Ontem, 16h18"; 3) "Endpoint de Pedidos — v1 vs v2", mostrando "20 de maio de 2025, 9h14"; 4) "Catálogo de Produtos — Região da UE", mostrando "19 de maio de 2025, 14h47"; 5) "Resposta de Autenticação — SSO", mostrando "18 de maio de 2025, 11h03"; 6) "Resumo de Faturamento — 2º Trimestre", mostrando "17 de maio de 2025, 15h22"; 7) “Webhook Payload — Stripe”, mostrando “16 de maio de 2025, 10h11”; 8) A mensagem “Resultados da pesquisa — Relevância” exibe “15 de maio de 2025, 17h35”. A parte inferior apresenta um botão azul proeminente “+ Nova Diff” e um pequeno ícone de engrenagem. A barra de ferramentas superior exibe “Resposta da API — Checkout v2” à esquerda, acompanhada por um pequeno ícone de lápis de edição. Um controle segmentado no meio contém dois rótulos: “Editores” (selecionado em azul) e “Diff” (desselecionado). O lado direito contém quatro atalhos de teclado compactos rotulados como “⌘T adicionar coluna”, “⌘D alternar diff” e “⌘← / ⌘→ mover foco”, com pequeno espaçamento entre os grupos. O painel do editor usa uma fonte de código monoespaçada, números de linha, realce de sintaxe JSON, um painel azul-marinho escuro e bordas arredondadas finas. O painel esquerdo é intitulado "source.json" e exibe um ícone de documento e um menu de três pontos. O painel central é intitulado "target.json" e exibe um ícone de documento e um menu de três pontos. O painel direito, mais estreito, é intitulado "more.json" e exibe apenas o lado esquerdo do código, sugerindo que há estouro de linha. Cada painel do editor completo possui uma barra de status na parte inferior exibindo "Ln 1, Col 1", "Spaces: 2", "UTF-8", "LF" e "JSON". O conteúdo do código exibe a resposta JSON do pedido de finalização da compra. Ele usa o requestId "req_8f3a9b42", o orderId "ord_123456", a moeda USD e informações sobre o produto e o frete para os fones de ouvido sem fio e a bolsa de viagem. A versão de origem à esquerda deve incluir o carimbo de data/hora "2025-05-21T10:24:31Z", versão "v1", status "pendente", valor total 129,99, preço unitário dos fones de ouvido sem fio 99,99 (desconto nulo), quantidade de estojo de viagem 1, preço unitário 30,00 (desconto nulo), método de envio "padrão", prazo estimado de 5 dias e endereço "123 Market St". A versão intermediária de destino deve exibir um marcador de diferença na margem esquerda e ser destacada com linhas coloridas: vermelho para linhas excluídas, verde para linhas adicionadas e amarelo para linhas modificadas. Deve incluir alterações como: timestamp alterado de "2025-05-20T15:11:09Z" para "2025-05-21T10:24:31Z", versão alterada para v2, status alterado de pendente para confirmado, totalAmount alterado para 139,99, preço unitário do fone de ouvido sem fio alterado para 109,99 com um desconto de 10,00, quantidade de estojos de viagem alterada para 2, método de entrega alterado para expresso e estimatedDays alterado para 2. Aproximadamente 32 linhas de código numerado devem ser exibidas em cada editor completo. Estilo visual: Interface avançada de ferramenta de desenvolvimento SaaS, renderização nítida em nível vetorial, tema escuro, cor de destaque azul cobalto, texto cinza suave, capturas de tela da interface do usuário realistas e limpas, sem figuras humanas, sem marcas d'água e sem bordas do navegador fora da janela do aplicativo. Mantenha todo o texto claro e alinhado à grade.