Componentes

Widgets reutilizáveis fornecidos por koder_kit (Flutter) e koder_web_kit (web). Cada card aponta pra spec que define o comportamento; componentes ratificados também têm página de demo.

Componentes Koder-específicos

Componentes que shipam com `koder_kit` / `koder_web_kit`. Estes têm anatomia completa + import + exemplo de uso abaixo.

KoderSignInButton

Ratificado

Auth koder-app/behaviors.kmd §1

Botão de entrada com marca que delega ao Koder ID via OIDC. Trata redirect, parse do callback e emite um objeto de usuário tipado em sucesso.

KoderUserBadge

Ratificado

Auth koder-app/behaviors.kmd §1

Avatar + nome compacto que abre o menu de conta. Lê do mesmo contexto de auth que o KoderSignInButton popula.

KoderAuthGate

Ratificado

Auth koder-app/behaviors.kmd §1

Embrulha uma tela pra que só renderize quando o usuário está logado; senão redireciona ao sign-in com URL de retorno.

KoderTitleBar

Ratificado

Desktop desktop-apps/title-bar-double-click.kmd

Barra de título customizada de desktop com drag em áreas não-interativas e subwidget de área livre pra duplo-tap maximizar. Substitui wrappers ad-hoc com GestureDetector que sequestram o gesture arena.

KoderSafeScaffold

Ratificado

Layout app-layout/safe-area.kmd

Scaffold drop-in que respeita window insets em toda surface (notch mobile, barras de gesto, chrome desktop, safe-area-inset web).

KoderBackScope

Ratificado

Navegação navigation/back-behavior.kmd

Pop de uma rota por back/Esc; só sai do app na raiz. Centraliza back behavior pra que cada tela não re-implemente.

KoderErrorBanner

Ratificado

Erros errors/user-facing-messages.kmd

Surface de erro user-facing com mensagem humanizada, ID do erro e "ver detalhes" expansível. Fala o vocabulário canônico <PRODUTO>-<CAT>-<CODE>-<SEQ>.

KoderErrorReporter / KoderReportButton

Ratificado

Erros errors/reporting.kmd

Pipeline de telemetria opt-in + KoderReportButton pra reports de problema em um toque. Default OFF; nunca coleta sem consentimento.

KoderUpdateBanner

Documentado

Auth koder-app/behaviors.kmd §4

Banner não-blocking que anuncia release fresco, baixa silencioso e pede pra reiniciar. Toggle em Settings, default ON.

KoderL10n / KoderL10nSwitcher

Ratificado

i18n i18n/contract.kmd §R3

Autodetect de locale do device, persistência per surface e switcher widget. Backeado por chaves ICU com baseline en-US + pt-BR obrigatório.

KoderUIStylePicker

Documentado

Tema themes/ui-style.kmd

Grid de cards de preset com previews ao vivo dos 44 estilos UI ratificados. Seleção persiste em koder.ui_style.

KoderThemeToggle

Ratificado

Tema themes/light-dark.kmd

Toggle two-state claro/escuro com script inline anti-flash e listener matchMedia. Espelha a spec deste site verbatim.

KoderCommandPalette

Documentado

Navegação (no spec yet — koder_kit#029 tracks)

Command palette Ctrl+K com fuzzy match em ações in-app. Proposto em koder_kit#029.

KoderCachePurge

Documentado

Settings cache-purge/contract.kmd

Tile de Settings + serviço que limpa caches locais (HTTP, image, IndexedDB) com diálogo de confirmação e indicador de progresso per surface.

KoderDownloadButton

Ratificado

Hub landing-pages/download-button.kmd

Botão de download drop-in pra landings de produto; resolve o release mais novo por plataforma a partir de hub.koder.dev/apps/<slug>.

KodeVoiceSettingsTile

Documentado

Voz voice/wake-word.kmd

Tile de Settings pros 6 toggles de voz (enabled, talkMode, hotWord, backend, bargeIn, debugRecord). Todos OFF por default exceto bargeIn.

KoderSettingsTile / KoderSettingsGroup

Ratificado

Settings settings/patterns.kmd

Primitiva componível de Settings (tile + grupo + página) compartilhada por todo app Koder. Alimenta tiles ui_style, theme, idioma, voz e reporter.

Catálogo de paridade Material

Specs de componentes que casam com a superfície Material 3 — cada uma renderizada de `meta/docs/stack/specs/components/`. Só specs por enquanto; implementações de widget rastreiam separadamente no roadmap do `koder_kit`.

Legenda de maturidade

Ratificado: Spec ratificada, widget implementado no SDK e ao menos um produto Koder consome em produção.
Documentado: Spec ratificada; o widget está saindo num release recente do SDK ou no roadmap. Use o pattern inline da spec até o componente chegar.
Proposto: Ideia capturada num ticket do backlog; ainda sem spec ou implementação.