Spec — Develop / Get Started

Index curto onboarding cross-platform. Renderizado em kds.koder.dev/get-started/ via tools/design-gen#013 (ticket pending). Esta spec define o contrato do conteúdo; design-gen ticket cobre a renderização.

R1 — Six canonical surfaces

R2 — Decision tree: which surface?

What's the target form factor?
├── Phone / tablet (consumer-facing)
│   ├── Cross-platform priority → Flutter (R1.1)
│   └── Native-only priority → Compose Android (R1.2) + SwiftUI iOS (R1.3) parallel
├── Web (admin dashboards, console UIs, marketing landings)
│   ├── Server-rendered HTMX + Templ → koder_web_kit (R1.4)
│   └── Highly interactive SPA → Flutter Web (R1.4)
├── XR (Vision Pro, Quest, Android XR)
│   └── Compose XR (R1.5) — preview
├── Wear OS
│   └── Compose Wear (R1.6) — preview, no Koder consumer yet
└── CLI / TUI
    └── Go + bubbletea; design system minimal (text + ANSI colors)

R3 — Quickstart per surface

R3.1 — Flutter

# Create new product
mkdir -p ~/dev/koder/products/horizontal/my-product/app
cd ~/dev/koder/products/horizontal/my-product/app
flutter create .

# Add koder_kit
cat >> pubspec.yaml <<EOF
dependencies:
  koder_kit:
    path: ../../../engines/sdk/koder_kit
EOF
flutter pub get

import 'package:flutter/material.dart';
import 'package:koder_kit/koder_kit.dart';

void main() {
  runApp(const KoderApp(
    productId: 'my-product',
    home: MyHomePage(),
  ));
}

R3.2 — Compose Android

// In your Activity / Compose root
import dev.koder.design.compose.theme.KoderDesignTheme

@Composable
fun MyApp() {
  KoderDesignTheme {
    // Your composables here; use Material 3 components with Koder skin
  }
}

R3.3 — SwiftUI iOS

import SwiftUI
import KoderDesignSwift

@main
struct MyApp: App {
  var body: some Scene {
    WindowGroup {
      ContentView()
        .koderDesignTheme()
    }
  }
}

R3.4 — Web (Templ + HTMX)

<!-- In a templ template -->
{{ template "koder-app-shell" . }}
<main>
  <koder-button variant="filled" hx-post="/action">Click me</koder-button>
</main>

R3.5 — XR

// Wrap your app root in Subspace + Koder XR overrides
KoderXrOverrides {
  KoderUserSubspace {
    KoderDesignTheme {
      // 2D content; auto-spatializes per xr-composables.kmd R6
    }
  }
}

R3.6 — Wear OS (preview)

// Compose Wear OS
KoderWearTheme {  // koder_kit_wear (futuro)
  KoderPrimaryLayout(
    titleSlot = { Text("My Watch") },
    mainSlot = { /* content */ },
    bottomSlot = { KoderEdgeButton(...) },
  )
}

R4 — Cross-link com behaviors.kmd

Every surface MUST ratify koder-app/behaviors.kmd:

R5 — i18n

R6 — Surface bindings (rendering)

Renderização gerenciada por tools/design-gen#013 (página /get-started/). Esta spec é o conteúdo source; design-gen ticket cobre tabs por surface, copy-paste code blocks, decision-tree component.

T-suite

Foundation-level — verified at content level:

• T1 All 6 surfaces listed in R1.
• T2 Decision tree (R2) covers all canonical form factors.
• T3 Quickstart per surface (R3) is copy-paste-runnable.
• T4 Cross-link com behaviors.kmd (R4) actionable.
• T5 i18n (R5) baseline en-US + pt-BR.

(T-suite por widget vive nas surface specs individuais.)

Cross-link

• Surface specs: specs/develop/*.kmd
• Behaviors: ../koder-app/behaviors.kmd
• i18n: ../i18n/contract.kmd
• Code samples toggle: code-samples-toggle.kmd (#049.60)
• Rendering ticket: tools/design-gen/backlog/pending/013-kds-get-started-page.md