Components

Reusable widgets shipped by koder_kit (Flutter) and koder_web_kit (web). Each tile points at the spec that defines its behavior; ratified components also have a live demo page.

Koder-specific components

Components shipping with `koder_kit` / `koder_web_kit`. These have a full anatomy + import + usage example below.

KoderSignInButton

Ratified

Auth koder-app/behaviors.kmd §1

Branded sign-in entry point that delegates to Koder ID via OIDC. Handles redirect, callback parsing, and emits a typed user object on success.

KoderUserBadge

Ratified

Auth koder-app/behaviors.kmd §1

Compact avatar + name display, opens the account menu. Reads from the same auth context that KoderSignInButton populates.

KoderAuthGate

Ratified

Auth koder-app/behaviors.kmd §1

Wraps a screen so it only renders when the user is signed in; otherwise routes to the sign-in flow with a return-to URL.

KoderTitleBar

Ratified

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

Custom desktop title bar with drag-to-move on non-interactive areas and a free-area subwidget for double-tap maximize. Replaces ad-hoc GestureDetector wrappers that hijack the gesture arena.

KoderSafeScaffold

Ratified

Layout app-layout/safe-area.kmd

Drop-in Scaffold replacement that respects window insets on every surface (mobile notches, gesture bars, desktop chrome, web safe-area-inset).

KoderBackScope

Ratified

Navigation navigation/back-behavior.kmd

Pops one route per back/Esc press; exits the app only at the root. Centralizes back behavior so each screen does not re-implement it.

KoderErrorBanner

Ratified

Errors errors/user-facing-messages.kmd

User-facing error surface with humanized message, error ID, and a "see details" expander. Speaks the canonical <PRODUCT>-<CAT>-<CODE>-<SEQ> error vocabulary.

KoderErrorReporter / KoderReportButton

Ratified

Errors errors/reporting.kmd

Opt-in telemetry pipeline + KoderReportButton for one-tap problem reports. Default OFF; never collects without consent.

KoderUpdateBanner

Documented

Auth koder-app/behaviors.kmd §4

Non-blocking banner that announces a fresh release, downloads it silently, and prompts to restart. Toggle lives in Settings, default ON.

KoderL10n / KoderL10nSwitcher

Ratified

i18n i18n/contract.kmd §R3

Locale autodetect from the device, persistence per surface, and a switcher widget. Backed by ICU keys with en-US baseline + pt-BR mandatory.

KoderUIStylePicker

Documented

Theme themes/ui-style.kmd

Grid of preset cards with live previews for the 44 ratified UI styles. Selection persists under koder.ui_style.

KoderThemeToggle

Ratified

Theme themes/light-dark.kmd

Two-state light/dark toggle with anti-flash inline script and matchMedia listener. Mirrors the spec on this site verbatim.

KoderCommandPalette

Documented

Navigation (no spec yet — koder_kit#029 tracks)

Ctrl+K command palette with fuzzy match across in-app actions. Proposed in koder_kit#029.

KoderCachePurge

Documented

Settings cache-purge/contract.kmd

Settings tile + service that clears local caches (HTTP, image, IndexedDB) with a confirmation dialog and a per-surface progress indicator.

KoderDownloadButton

Ratified

Hub landing-pages/download-button.kmd

Drop-in download button for product landing pages; resolves the latest release per platform from hub.koder.dev/apps/<slug>.

KodeVoiceSettingsTile

Documented

Voice voice/wake-word.kmd

Settings tile for the 6 voice toggles (enabled, talkMode, hotWord, backend, bargeIn, debugRecord). All OFF by default except bargeIn.

KoderSettingsTile / KoderSettingsGroup

Ratified

Settings settings/patterns.kmd

Composable Settings tile + group + page primitive shared by every Koder app. Powers ui_style, theme, language, voice, and reporter tiles.

Material parity catalogue

Cada spec de componente en `meta/docs/stack/specs/components/` — el corpus completo, derivado en el build para que el índice nunca se desvíe de las specs. Cada una enlaza a su página de spec-doc; la insignia indica si ya hay demo en vivo.

Maturity legend

Ratified: Spec ratified, widget implemented in the SDK, and at least one Koder product consumes it in production.
Documented: Spec ratified; widget either landed in a recent SDK release or is on the roadmap. Use the inline pattern from the spec until the component ships.
Proposed: Idea captured in a backlog ticket; not yet specified or implemented.