Design de pastas no Figma (LUI-178)

docs/design-system.md

@@ -204,7 +204,7 @@ Os estados são definidos uma vez aqui e valem para todo componente. A seção d
 
 **`nav-item`**: item da barra lateral. Altura de 40px, ícone de 20px e rótulo em `{typography.ui}`, `{rounded.sm}`, padding 8px × 12px. Ativo: fundo `{colors.primary-soft}`, texto e ícone em `{colors.primary}`, rótulo em `{typography.ui-strong}`.
 
-**`breadcrumb`**: caminho da pasta atual, no topo da área de conteúdo. Segmentos em `{typography.ui}` e `{colors.ink-muted}`, separados por um ícone de seta de 16px; o último segmento fica em `{colors.ink}` e `{typography.ui-strong}`. Cada segmento é um destino de arrastar e soltar. Quando não cabe, os segmentos do meio colapsam em "…", que abre um `{component.menu}`.
+**`breadcrumb`**: caminho da pasta atual, no topo da área de conteúdo. Segmentos em `{typography.ui}` e `{colors.ink-muted}`, separados por um ícone de seta de 16px; o último segmento fica em `{colors.ink}` e `{typography.ui-strong}`. Cada segmento é um link para a pasta. Quando não cabe, os segmentos do meio colapsam em "…", que abre um `{component.menu}`.
 
 **`toolbar`**: linha abaixo do breadcrumb, com altura de 48px. À esquerda, as ações da pasta ("Nova pasta") em `{component.button-utility}`. À direita, a alternância entre lista e grade. Com itens selecionados, a barra troca de conteúdo: mostra a contagem ("3 selecionados") e as ações em lote (baixar, mover, excluir).
 
@@ -268,8 +268,14 @@ Os estados são definidos uma vez aqui e valem para todo componente. A seção d
 ### Sobreposições e avisos
 
 **`menu`**: menu de contexto e menu "Mais ações". Fundo `{colors.surface-raised}`, borda em `{colors.hairline}`, `{rounded.lg}`, `{shadow.overlay}`, padding `{spacing.xxs}` e largura mínima de 200px. Itens com 36px de altura, ícone de 16px e rótulo em `{typography.ui}`, com `{rounded.sm}`. Ações destrutivas ficam por último, depois de um separador, em `{colors.danger}`.
+- **Linha de pasta:** "Renomear" e "Mover para…".
+- **Linha de arquivo:** "Baixar", "Renomear" e "Mover para…".
+- "Excluir" entra nos dois com a lixeira, como ação destrutiva, e não é desenhado antes disso.
 
-**`dialog`**: janela modal sobre `{colors.scrim}`. Fundo `{colors.surface-raised}`, `{rounded.lg}`, `{shadow.overlay}`, padding `{spacing.lg}`. Título em `{typography.title}`, corpo em `{typography.body}` e, no rodapé, os botões alinhados à direita, com o primário por último. Usos: nova pasta, renomear, mover (com árvore de pastas) e confirmação de exclusão definitiva.
+**`dialog`**: janela modal sobre `{colors.scrim}`. Fundo `{colors.surface-raised}`, `{rounded.lg}`, `{shadow.overlay}`, padding `{spacing.lg}`. Título em `{typography.title}`, corpo em `{typography.body}` e, no rodapé, os botões alinhados à direita, com o primário por último. Usos: nova pasta, renomear, mover e confirmação de exclusão definitiva. Estados: padrão, com erro e carregando (o botão primário no estado carregando). Tem duas variações de conteúdo:
+- **Campo de nome** (nova pasta e renomear): um `{component.text-field}` com o nome. Em "renomear" ele abre com o nome atual preenchido e selecionado por inteiro. O erro de nome inválido aparece abaixo do campo, em `{colors.danger}`, sem fechar o diálogo.
+- **Seletor de pastas** (mover): o caminho do nível atual no topo, em `{typography.ui}`, e abaixo uma lista de pastas com 36px de altura por linha, em `{typography.ui}`, que o usuário percorre um nível por vez (clicar numa pasta entra nela, e o caminho leva de volta). Só aparecem pastas. A pasta que está sendo movida e as descendentes dela ficam desabilitadas, com o ícone e o nome em `{colors.ink-disabled}`. No fim da lista, quando há mais pastas, fica o `{component.button-utility}` "Carregar mais". O primário "Mover" confirma o nível atual como destino. O seletor tem altura máxima de 320px e rola dentro do diálogo.
+Abaixo de `sm`, o diálogo ocupa a largura total, com margem de 16px.
 
 **`toast`**: confirmação breve, no canto inferior esquerdo. Fundo `{colors.surface-raised}`, borda em `{colors.hairline}`, `{rounded.lg}`, `{shadow.overlay}`, padding 12px × 16px, texto em `{typography.ui}`. Pode ter uma ação em `{component.text-link}` ("Desfazer", depois de mover um item para a lixeira). Some sozinho em 5 segundos; os de erro ficam até o usuário fechar.
 
@@ -493,7 +499,7 @@ Com a web rodando no contêiner, abra a tela pelo MCP do Playwright, capture em
 
 - O produto ainda não tem nome nem logotipo. Onde este documento diz "marca do produto", a interface usa um marcador de texto até a identidade ser definida.
 - O contraste dos pares de cor (texto sobre superfície, nos dois temas) foi escolhido para atender à WCAG AA, mas ainda não foi medido com ferramenta. A medição acontece quando os tokens forem implementados.
-- O arquivo do Figma tem as fundações (variáveis, estilos de texto e de sombra), os componentes usados na autenticação (`auth-card`, `banner`, `button-primary`, `button-icon`, `text-field`, `password-field` e `text-link`), os usados pelas telas do Drive (`app-bar`, `sidebar`, `nav-item`, `breadcrumb`, `toolbar`, `account-menu`, `search-input`, `quota-meter`, `segmented-control`, `button-utility`, `menu`, `file-list`, `file-row`, `checkbox`, `empty-state`, `dropzone`, `upload-panel` e `upload-item`, com o "Carregar mais", o estado de espera pelo arquivo e o aviso de pasta solta), as telas da página Autenticação e as da página Drive: a casca, com a gaveta da navegação e o menu da conta, a lista com arquivos, a Pasta raiz vazia, a zona de soltar, o painel de envios em cada estado e o aviso de pasta solta. Os demais componentes (`file-card`, `preview-viewer`, `button-secondary`, `button-danger`, `dialog`, `toast`, `share-dialog`, `public-share-page`, `plan-card` e `plan-card-current`) ainda não existem no Figma, e as páginas Link público e Planos ainda estão vazias.
+- O arquivo do Figma tem as fundações (variáveis, estilos de texto e de sombra), os componentes usados na autenticação (`auth-card`, `banner`, `button-primary`, `button-icon`, `text-field`, `password-field` e `text-link`), os usados pelas telas do Drive (`app-bar`, `sidebar`, `nav-item`, `breadcrumb`, `toolbar`, `account-menu`, `search-input`, `quota-meter`, `segmented-control`, `button-utility`, `menu` (com o menu da linha de pasta e o de arquivo), `file-list`, `file-row`, `checkbox`, `empty-state`, `dropzone`, `upload-panel` e `upload-item`, com o "Carregar mais", o estado de espera pelo arquivo e o aviso de pasta solta), os de pastas (`button-secondary`, `dialog`, com o campo de nome e o seletor de pastas, e `toast`), as telas da página Autenticação e as da página Drive: a casca, com a gaveta da navegação e o menu da conta, a lista com arquivos, a Pasta raiz vazia, a zona de soltar, o painel de envios em cada estado e o aviso de pasta solta, e as de pastas (a pasta com conteúdo e com o menu da linha, a pasta vazia, os diálogos de nova pasta, renomear e mover em cada estado e os avisos de confirmação). Os demais componentes (`file-card`, `preview-viewer`, `button-danger`, `share-dialog`, `public-share-page`, `plan-card` e `plan-card-current`) ainda não existem no Figma, e as páginas Link público e Planos ainda estão vazias.
 - No código, existem os componentes usados na autenticação e os da casca e da lista do Drive: `app-bar`, `sidebar` (com a gaveta abaixo de `lg`), `nav-item`, `account-menu`, `menu`, `button-utility`, `file-list` (com o "Carregar mais"), `file-row` e `empty-state`, só com as partes que as funcionalidades já entregues usam. Os demais entram com as telas que os usam.
 - Não há seletor manual de tema. O tema segue o sistema operacional.
 - Os controles internos de vídeo, áudio e PDF do `{component.preview-viewer}` são os do navegador e não seguem estes tokens.

docs/tickets/LUI-177/LUI-178/aceite.md

@@ -0,0 +1,47 @@
+# Aceite do LUI-178
+
+Ticket de design: nenhum critério tem marca de teste. O de documento é conferido pela leitura do `docs/design-system.md` no diff do PR, e os de revisão humana, pelo arquivo do Figma. O Figma é a origem do código: os tickets seguintes (LUI-179, LUI-180 e LUI-181) leem daqui o diálogo, o aviso, o menu da linha e o breadcrumb, em vez de cada um desenhar o seu.
+
+A luz e o escuro de cada tela são conferidos trocando o modo da coleção `colors` do frame de Light para Dark: nenhuma camada pode ficar com a cor do tema claro. O que o design system já descreve (`dialog`, `toast`, `button-secondary`) não é redefinido: o ticket leva essas peças ao Figma e acrescenta ao documento só o que falta, que são a variação de seletor de pastas do diálogo, os menus da linha e o breadcrumb sem arrastar e soltar.
+
+## LUI-178-CA1
+
+**Marca:** revisão humana
+
+**Cenário:** Dado o arquivo do Figma depois do ticket, quando o revisor abre a página Componentes, então o `dialog` é um conjunto com as variações de campo de nome (criar e renomear) e de seletor de pastas (mover), cada uma nos estados padrão, com erro e carregando, e a vitrine em Light e em Dark; e, ao inspecionar as camadas, nenhuma cor, tamanho de fonte, raio, espaçamento ou sombra está fora de uma variável ou de um estilo.
+
+## LUI-178-CA2
+
+**Marca:** revisão humana
+
+**Cenário:** Dado o arquivo do Figma depois do ticket, quando o revisor abre a página Componentes, então o `toast` (com a variação de erro, que fica até o usuário fechar) e o `button-secondary` são conjuntos com os estados como variantes e a vitrine em Light e em Dark, sem cor, tamanho de fonte, raio, espaçamento ou sombra fora de uma variável ou de um estilo.
+
+## LUI-178-CA3
+
+**Marca:** revisão humana
+
+**Cenário:** Dado o arquivo do Figma depois do ticket, quando o revisor abre o `menu` da página Componentes, então há o menu da linha de pasta, com "Renomear" e "Mover para…", e o da linha de arquivo, com "Baixar", "Renomear" e "Mover para…", e nenhum dos dois tem "Excluir".
+
+## LUI-178-CA4
+
+**Marca:** revisão humana
+
+**Cenário:** Dado o arquivo do Figma depois do ticket, quando o revisor abre o `breadcrumb` da página Componentes, então ele tem a variante completa e a colapsada, com os trechos do meio em "…" que abre um `menu`, e nenhum trecho aparece como destino de arrastar e soltar.
+
+## LUI-178-CA5
+
+**Marca:** revisão humana
+
+**Cenário:** Dado a página Drive do Figma, quando o revisor abre as telas de pasta, então há, em 390 e em 1280 px, a pasta com conteúdo (breadcrumb, barra de ferramentas com "Nova pasta" e "Enviar", e a lista com pastas e arquivos, uma linha de pasta com o menu "Mais ações" aberto) e a pasta vazia, com o convite para enviar ou criar o primeiro item; e, ao trocar o modo da coleção `colors` de cada frame de Light para Dark, nenhuma camada fica com a cor do tema claro.
+
+## LUI-178-CA6
+
+**Marca:** revisão humana
+
+**Cenário:** Dado a página Drive do Figma, quando o revisor abre as telas dos diálogos, então há, em 390 e em 1280 px, o de nova pasta, o de renomear (com o nome atual selecionado e o erro de nome inválido) e o de mover (seletor no nível inicial "Meus arquivos", em um nível mais fundo com o caminho e com "Carregar mais", e com a pasta movida e as descendentes desabilitadas), todos com o aviso de confirmação do `toast` mostrado numa tela depois da ação; e, ao trocar o modo da coleção `colors` de cada frame de Light para Dark, nenhuma camada fica com a cor do tema claro. Em 390 px os diálogos ocupam a largura total, com margem de 16 px.
+
+## LUI-178-CA7
+
+**Marca:** documento
+
+**Cenário:** Dado o `docs/design-system.md` deste PR, quando a seção "Componentes" é lida, então o `{component.breadcrumb}` não diz mais que cada segmento é destino de arrastar e soltar, o `{component.dialog}` descreve a variação de seletor de pastas (nível a nível, com o caminho do nível, "Carregar mais" e as pastas impedidas desabilitadas), o `{component.menu}` traz as ações da linha de pasta e de arquivo, e cada peça nova cita só tokens das tabelas do documento; e, na seção "Lacunas conhecidas", o item sobre o Figma lista `dialog`, `toast` e `button-secondary` como existentes e as telas de pasta da página Drive.