designmd-forge 1.2.0

package/dist/data/designs/ios-claude-android.md

@@ -0,0 +1,625 @@
+# Claude (iOS) — Jetpack Compose Implementation Guide
+
+Companion to [DESIGN.md](DESIGN.md) — the framework-neutral spec. This file ports Claude's visual language to **Android with Jetpack Compose (Material 3)**: a color token object, a `Typography` set, paste-ready `@Composable`s, `Modifier`s, motion, and haptics.
+
+> Why a Compose guide for an iOS-referenced app? The DESIGN.md tokens are platform-neutral. This file keeps the *visual* identity (Claude's cream paper canvas, single terracotta accent, Tiempos serif assistant prose) while making everything idiomatic Android — a translucent `Surface` instead of `.regularMaterial`, `FontFamily(Font(R.font.…))` instead of `Font.custom`, `sp`/`dp` instead of `pt`. The signature is text quality: Claude reads like an essayist, and the serif body is the manifest of that intent.
+
+Assumes Compose BOM `2024.09+`, Kotlin `2.0+`, `minSdk 24`, Material 3, and [Coil](https://coil-kt.github.io/coil/) `2.6+` only if you render remote avatars (Claude's mark is vector — no Palette needed).
+
+## 1. Color Tokens
+
+```kotlin
+// ui/theme/ClaudeColors.kt
+import androidx.compose.ui.graphics.Color
+
+object ClaudeColors {
+    // Canvas (the Claude paper)
+    val Cream     = Color(0xFFF8F4ED) // canvas — the most recognizable surface
+    val Paper     = Color(0xFFFBF9F4) // elevated: input fill, code badges
+    val Surface1  = Color(0xFFF0EAE0) // user pill, callouts
+    val Surface2  = Color(0xFFE8E0D2) // pressed / chip fills
+    val Sand      = Color(0xFFDDD2BD) // 0.5dp hairline dividers
+
+    // Text (warm-tinted ink — never pure black)
+    val Ink       = Color(0xFF2D2520) // primary
+    val Graphite  = Color(0xFF5A4F44) // secondary — sender labels
+    val Stone     = Color(0xFF8A7E72) // tertiary — placeholder, hints
+    val Bone      = Color(0xFFB5AB9E) // disabled
+
+    // Claude Orange (the signature accent — a verb, not a color)
+    val Orange        = Color(0xFFD97757)
+    val OrangePressed = Color(0xFFBE6242)
+    val OrangeSoft    = Color(0xFFF2DDD0) // active chip, "Thinking…" fill
+
+    // Code & Syntax (warm palette — never blue-tinted)
+    val CodeBg       = Color(0xFF1F1B16)
+    val CodeFg       = Color(0xFFE8E0D2)
+    val SyntaxKey    = Color(0xFFD97757) // keywords — Claude Orange
+    val SyntaxString = Color(0xFF7FB069) // sage
+    val SyntaxNum    = Color(0xFFE8B96F) // gold
+    val SyntaxFunc   = Color(0xFF9DA4F2) // periwinkle
+    val SyntaxCmt    = Color(0xFF8A7E72) // warm grey
+
+    // Semantic
+    val Success = Color(0xFF6B9D5E)
+    val Warning = Color(0xFFD49952)
+    val Error   = Color(0xFFC16654)
+    val Info    = Color(0xFF5A6273)
+
+    // Dark mode (warm dark — preserves the paper feel)
+    val DarkCanvas   = Color(0xFF1F1B16)
+    val DarkSurface1 = Color(0xFF2A2520)
+    val DarkSurface2 = Color(0xFF3A332C)
+    val DarkText     = Color(0xFFE8E0D2)
+    val DarkTextSec  = Color(0xFFB5AB9E)
+    val OrangeSoftDk = Color(0xFF4A352A)
+}
+```
+
+Claude defaults to the warm cream paper, so wire a `lightColorScheme` into the theme and provide a warm-dark counterpart. Claude Orange is never a Material container fill — it stays a deliberate accent.
+
+```kotlin
+// ui/theme/Theme.kt
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.darkColorScheme
+import androidx.compose.material3.lightColorScheme
+import androidx.compose.runtime.Composable
+
+private val ClaudeLight = lightColorScheme(
+    primary        = ClaudeColors.Orange,
+    onPrimary      = ClaudeColors.Paper,    // paper-white glyph on orange
+    background     = ClaudeColors.Cream,
+    onBackground   = ClaudeColors.Ink,
+    surface        = ClaudeColors.Paper,
+    onSurface      = ClaudeColors.Ink,
+    surfaceVariant = ClaudeColors.Surface1,
+    outline        = ClaudeColors.Sand,
+    error          = ClaudeColors.Error,
+)
+
+private val ClaudeDark = darkColorScheme(
+    primary        = ClaudeColors.Orange,   // unchanged — reads well on warm dark
+    onPrimary      = ClaudeColors.DarkCanvas,
+    background      = ClaudeColors.DarkCanvas,
+    onBackground   = ClaudeColors.DarkText,
+    surface        = ClaudeColors.DarkSurface1,
+    onSurface      = ClaudeColors.DarkText,
+    surfaceVariant = ClaudeColors.DarkSurface2,
+    outline        = ClaudeColors.DarkSurface2,
+    error          = ClaudeColors.Error,
+)
+
+@Composable
+fun ClaudeTheme(useDark: Boolean = false, content: @Composable () -> Unit) =
+    MaterialTheme(
+        colorScheme = if (useDark) ClaudeDark else ClaudeLight,
+        typography  = ClaudeTypography,
+        content     = content,
+    )
+```
+
+## 2. Typography
+
+Tiempos and Styrene are proprietary (Klim Type Foundry). Drop the TTFs in `res/font/` (lowercase, snake_case) and build two families. Fall back to **Source Serif** for the serif and the system sans (Roboto) — the closest free pairing on Android.
+
+```kotlin
+// ui/theme/ClaudeType.kt
+import androidx.compose.material3.Typography
+import androidx.compose.ui.text.TextStyle
+import androidx.compose.ui.text.font.Font
+import androidx.compose.ui.text.font.FontFamily
+import androidx.compose.ui.text.font.FontStyle
+import androidx.compose.ui.text.font.FontWeight
+import androidx.compose.ui.unit.sp
+
+// Assistant body & headings — the central typographic choice
+val Tiempos = FontFamily(
+    Font(R.font.tiempos_text_regular,      FontWeight.Normal),
+    Font(R.font.tiempos_text_italic,       FontWeight.Normal, FontStyle.Italic),
+    Font(R.font.tiempos_text_semibold,     FontWeight.SemiBold),
+    Font(R.font.tiempos_headline_semibold, FontWeight.Bold), // headings ramp
+)
+
+// UI chrome & user messages
+val Styrene = FontFamily(
+    Font(R.font.styrene_a_regular,  FontWeight.Normal),
+    Font(R.font.styrene_a_medium,   FontWeight.Medium),
+    Font(R.font.styrene_a_semibold, FontWeight.SemiBold),
+    Font(R.font.styrene_a_bold,     FontWeight.Bold),
+)
+
+val JetBrainsMono = FontFamily(
+    Font(R.font.jetbrains_mono_regular, FontWeight.Normal),
+    Font(R.font.jetbrains_mono_medium,  FontWeight.Medium),
+)
+
+// Named ramp — mirrors DESIGN.md §3 exactly (pt → sp 1:1)
+object ClaudeText {
+    val Display       = TextStyle(Tiempos, fontWeight = FontWeight.SemiBold, fontSize = 32.sp, lineHeight = 38.sp, letterSpacing = (-0.4).sp)
+    val ConvTitle     = TextStyle(Styrene, fontWeight = FontWeight.SemiBold, fontSize = 18.sp, lineHeight = 23.sp, letterSpacing = (-0.1).sp)
+    val H1            = TextStyle(Tiempos, fontWeight = FontWeight.SemiBold, fontSize = 24.sp, lineHeight = 31.sp, letterSpacing = (-0.2).sp)
+    val H2            = TextStyle(Tiempos, fontWeight = FontWeight.SemiBold, fontSize = 20.sp, lineHeight = 26.sp, letterSpacing = (-0.1).sp)
+    val H3            = TextStyle(Tiempos, fontWeight = FontWeight.SemiBold, fontSize = 17.sp, lineHeight = 23.sp)
+    val Body          = TextStyle(Tiempos, fontWeight = FontWeight.Normal,   fontSize = 16.sp, lineHeight = 25.sp) // 1.55× — non-negotiable
+    val BodyBold      = TextStyle(Tiempos, fontWeight = FontWeight.SemiBold, fontSize = 16.sp, lineHeight = 25.sp)
+    val BodyItalic    = TextStyle(Tiempos, fontWeight = FontWeight.Normal,   fontSize = 16.sp, lineHeight = 25.sp, fontStyle = FontStyle.Italic)
+    val User          = TextStyle(Styrene, fontWeight = FontWeight.Normal,   fontSize = 16.sp, lineHeight = 24.sp)
+    val Action        = TextStyle(Styrene, fontWeight = FontWeight.SemiBold, fontSize = 15.sp, lineHeight = 15.sp)
+    val Chip          = TextStyle(Styrene, fontWeight = FontWeight.Medium,   fontSize = 13.sp, lineHeight = 13.sp)
+    val SenderLabel   = TextStyle(Styrene, fontWeight = FontWeight.Medium,   fontSize = 13.sp, lineHeight = 13.sp)
+    val Meta          = TextStyle(Styrene, fontWeight = FontWeight.Normal,   fontSize = 12.sp, lineHeight = 16.sp)
+    val Caption       = TextStyle(Styrene, fontWeight = FontWeight.Normal,   fontSize = 11.sp, lineHeight = 14.sp)
+    val GroupHeader   = TextStyle(Styrene, fontWeight = FontWeight.Bold,     fontSize = 11.sp, lineHeight = 13.sp, letterSpacing = 0.4.sp)
+    val CodeInline    = TextStyle(JetBrainsMono, fontWeight = FontWeight.Medium, fontSize = 14.sp, lineHeight = 20.sp)
+    val CodeBlock     = TextStyle(JetBrainsMono, fontWeight = FontWeight.Normal, fontSize = 14.sp, lineHeight = 21.sp)
+    val CodeLang      = TextStyle(JetBrainsMono, fontWeight = FontWeight.Normal, fontSize = 11.sp, lineHeight = 13.sp)
+}
+
+// Map onto Material 3 slots so stock components inherit the brand
+val ClaudeTypography = Typography(
+    displaySmall  = ClaudeText.Display,
+    headlineLarge = ClaudeText.H1,
+    headlineSmall = ClaudeText.H2,
+    titleMedium   = ClaudeText.ConvTitle,
+    bodyMedium    = ClaudeText.Body,
+    labelMedium   = ClaudeText.Chip,
+)
+```
+
+## 3. Signature Components
+
+### Asterisk-Star Logomark (Claude's avatar)
+
+The 6-point asterisk-meets-star mark. Draw it on a Compose `Canvas` — never tint it anything but Claude Orange (or Bone for the disabled model-picker state).
+
+```kotlin
+import androidx.compose.foundation.Canvas
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.geometry.Offset
+import androidx.compose.ui.graphics.Path
+import androidx.compose.ui.unit.Dp
+import androidx.compose.ui.unit.dp
+import kotlin.math.cos
+import kotlin.math.sin
+
+@Composable
+fun ClaudeMark(
+    size: Dp = 18.dp,
+    color: Color = ClaudeColors.Orange,
+    modifier: Modifier = Modifier,
+) {
+    Canvas(modifier.size(size)) {
+        val cx = this.size.width / 2f
+        val cy = this.size.height / 2f
+        val r = minOf(cx, cy)
+        val inner = r * 0.18f
+        val path = Path()
+        repeat(6) { i ->
+            val a = (Math.PI / 3 * i - Math.PI / 2).toFloat()
+            val tip = Offset(cx + r * cos(a), cy + r * sin(a))
+            val la = a + (Math.PI / 2).toFloat()
+            val lBase = Offset(cx + inner * cos(la), cy + inner * sin(la))
+            val rBase = Offset(cx - inner * cos(la), cy - inner * sin(la))
+            path.moveTo(lBase.x, lBase.y)
+            path.quadraticBezierTo((lBase.x + tip.x) / 2 + 1, (lBase.y + tip.y) / 2 + 1, tip.x, tip.y)
+            path.quadraticBezierTo((tip.x + rBase.x) / 2 - 1, (tip.y + rBase.y) / 2 - 1, rBase.x, rBase.y)
+            path.close()
+        }
+        drawPath(path, color)
+    }
+}
+```
+
+### Assistant Message Block (the conversation hero)
+
+No bubble, no container — just type flowing across the cream canvas, the mark leading.
+
+```kotlin
+import androidx.compose.foundation.layout.*
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+
+@Composable
+fun AssistantMessage(
+    modelName: String,            // "Claude Opus 4.5"
+    body: androidx.compose.ui.text.AnnotatedString, // pre-rendered markdown
+    isStreaming: Boolean,
+    modifier: Modifier = Modifier,
+) {
+    Column(
+        modifier
+            .fillMaxWidth()
+            .padding(horizontal = 4.dp),
+        verticalArrangement = Arrangement.spacedBy(12.dp),
+    ) {
+        Row(
+            horizontalArrangement = Arrangement.spacedBy(8.dp),
+            verticalAlignment = Alignment.CenterVertically,
+        ) {
+            ClaudeMark(size = 18.dp)
+            Text("Claude", style = ClaudeText.SenderLabel, color = ClaudeColors.Graphite)
+            Text("·", color = ClaudeColors.Stone)
+            Text(modelName, style = ClaudeText.Chip, color = ClaudeColors.Stone)
+        }
+        Text(body, style = ClaudeText.Body, color = ClaudeColors.Ink) // 1.55× leading baked in
+        if (isStreaming) StreamingCursor()
+    }
+}
+```
+
+### Streaming Response Cursor (the orange caret)
+
+8dp × 18dp, blinks 600ms (300 on / 300 off). Pauses while a token arrives.
+
+```kotlin
+import androidx.compose.animation.core.*
+import androidx.compose.foundation.background
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.ui.draw.alpha
+import androidx.compose.ui.draw.clip
+import androidx.compose.ui.semantics.contentDescription
+import androidx.compose.ui.semantics.semantics
+
+@Composable
+fun StreamingCursor(modifier: Modifier = Modifier) {
+    val t = rememberInfiniteTransition(label = "cursor")
+    val a by t.animateFloat(
+        initialValue = 1f, targetValue = 0f,
+        animationSpec = infiniteRepeatable(tween(300, easing = LinearEasing), RepeatMode.Reverse),
+        label = "blink",
+    )
+    Box(
+        modifier
+            .size(width = 8.dp, height = 18.dp)
+            .clip(RoundedCornerShape(1.dp))
+            .alpha(a)
+            .background(ClaudeColors.Orange)
+            .semantics { contentDescription = "Claude is responding" },
+    )
+}
+```
+
+### User Message Pill
+
+A soft pill on Surface Warm 1 — never a bubble with a tail. Right-aligned, max 80% width.
+
+```kotlin
+import androidx.compose.foundation.layout.BoxWithConstraints
+
+@Composable
+fun UserMessage(text: String, modifier: Modifier = Modifier) {
+    Row(modifier.fillMaxWidth().padding(horizontal = 4.dp), horizontalArrangement = Arrangement.End) {
+        BoxWithConstraints {
+            Text(
+                text = text,
+                style = ClaudeText.User,
+                color = ClaudeColors.Ink,
+                modifier = Modifier
+                    .widthIn(max = maxWidth * 0.8f)
+                    .clip(RoundedCornerShape(18.dp))
+                    .background(ClaudeColors.Surface1)
+                    .padding(horizontal = 16.dp, vertical = 12.dp),
+            )
+        }
+    }
+}
+```
+
+### Chat Input (auto-grow + orange send circle)
+
+```kotlin
+import androidx.compose.foundation.border
+import androidx.compose.foundation.text.BasicTextField
+import androidx.compose.foundation.interaction.MutableInteractionSource
+import androidx.compose.foundation.interaction.collectIsPressedAsState
+import androidx.compose.foundation.clickable
+import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.filled.Add
+import androidx.compose.material.icons.filled.ArrowUpward
+import androidx.compose.material3.Icon
+import androidx.compose.runtime.*
+import androidx.compose.ui.draw.scale
+import androidx.compose.ui.graphics.SolidColor
+import androidx.compose.ui.hapticfeedback.HapticFeedbackType
+import androidx.compose.ui.platform.LocalHapticFeedback
+import androidx.compose.foundation.shape.CircleShape
+
+@Composable
+fun ChatInput(
+    value: String,
+    onValueChange: (String) -> Unit,
+    onSend: () -> Unit,
+    onAttach: () -> Unit,
+    modifier: Modifier = Modifier,
+) {
+    var focused by remember { mutableStateOf(false) }
+    val canSend = value.trim().isNotEmpty()
+    val haptics = LocalHapticFeedback.current
+    val sendInteraction = remember { MutableInteractionSource() }
+    val sendPressed by sendInteraction.collectIsPressedAsState()
+    val sendScale by animateFloatAsState(if (sendPressed) 0.94f else 1f, label = "send")
+
+    Row(
+        modifier
+            .fillMaxWidth()
+            .padding(horizontal = 16.dp, vertical = 8.dp)
+            .clip(RoundedCornerShape(24.dp))
+            .background(ClaudeColors.Paper)
+            .border(
+                width = if (focused) 1.5.dp else 1.dp,
+                color = if (focused) ClaudeColors.Orange else ClaudeColors.Sand,
+                shape = RoundedCornerShape(24.dp),
+            )
+            .padding(horizontal = 12.dp, vertical = 6.dp),
+        verticalAlignment = Alignment.Bottom,
+        horizontalArrangement = Arrangement.spacedBy(8.dp),
+    ) {
+        Icon(
+            Icons.Filled.Add, contentDescription = "Attach",
+            tint = ClaudeColors.Graphite,
+            modifier = Modifier.size(28.dp).padding(bottom = 8.dp).clickable(onClick = onAttach),
+        )
+        BasicTextField(
+            value = value,
+            onValueChange = onValueChange,
+            textStyle = ClaudeText.User.copy(color = ClaudeColors.Ink),
+            cursorBrush = SolidColor(ClaudeColors.Orange),
+            maxLines = 8,
+            modifier = Modifier
+                .weight(1f)
+                .padding(vertical = 14.dp)
+                .onFocusChanged { focused = it.isFocused },
+            decorationBox = { inner ->
+                if (value.isEmpty()) Text("Reply to Claude…", style = ClaudeText.User, color = ClaudeColors.Stone)
+                inner()
+            },
+        )
+        Box(
+            Modifier
+                .padding(bottom = 6.dp)
+                .size(40.dp)
+                .scale(sendScale)
+                .clip(CircleShape)
+                .background(if (canSend) (if (sendPressed) ClaudeColors.OrangePressed else ClaudeColors.Orange) else ClaudeColors.Surface2)
+                .clickable(sendInteraction, indication = null, enabled = canSend) {
+                    haptics.performHapticFeedback(HapticFeedbackType.LongPress) // ~iOS medium impact
+                    onSend()
+                },
+            contentAlignment = Alignment.Center,
+        ) {
+            Icon(
+                Icons.Filled.ArrowUpward,
+                contentDescription = "Send",
+                tint = if (canSend) ClaudeColors.Paper else ClaudeColors.Stone,
+                modifier = Modifier.size(16.dp),
+            )
+        }
+    }
+}
+```
+
+### Model Picker Chip
+
+```kotlin
+import androidx.compose.material.icons.filled.KeyboardArrowDown
+
+@Composable
+fun ModelPickerChip(modelName: String, onTap: () -> Unit, modifier: Modifier = Modifier) {
+    Row(
+        modifier
+            .clip(RoundedCornerShape(16.dp))
+            .background(ClaudeColors.Surface1)
+            .clickable(onClick = onTap)
+            .padding(horizontal = 12.dp, vertical = 6.dp),
+        verticalAlignment = Alignment.CenterVertically,
+        horizontalArrangement = Arrangement.spacedBy(6.dp),
+    ) {
+        ClaudeMark(size = 14.dp)
+        Text(modelName, style = ClaudeText.Chip, color = ClaudeColors.Ink)
+        Icon(Icons.Filled.KeyboardArrowDown, contentDescription = null, tint = ClaudeColors.Stone, modifier = Modifier.size(10.dp))
+    }
+}
+```
+
+### Code Block (warm dark, never blue)
+
+```kotlin
+import androidx.compose.foundation.horizontalScroll
+import androidx.compose.foundation.rememberScrollState
+import androidx.compose.material.icons.filled.Check
+import androidx.compose.material.icons.filled.ContentCopy
+import androidx.compose.ui.platform.LocalClipboardManager
+import androidx.compose.ui.text.AnnotatedString
+import kotlinx.coroutines.delay
+
+@Composable
+fun CodeBlock(
+    language: String,
+    code: AnnotatedString,           // pre-syntax-highlighted with the warm palette
+    modifier: Modifier = Modifier,
+) {
+    var copied by remember { mutableStateOf(false) }
+    val clipboard = LocalClipboardManager.current
+    val haptics = LocalHapticFeedback.current
+    LaunchedEffect(copied) { if (copied) { delay(1200); copied = false } }
+
+    Column(
+        modifier
+            .clip(RoundedCornerShape(12.dp))
+            .background(ClaudeColors.CodeBg)
+            .border(1.dp, ClaudeColors.Sand, RoundedCornerShape(12.dp)),
+    ) {
+        Row(
+            Modifier
+                .fillMaxWidth()
+                .background(ClaudeColors.DarkSurface2.copy(alpha = 0.4f))
+                .padding(horizontal = 12.dp, vertical = 8.dp),
+            verticalAlignment = Alignment.CenterVertically,
+        ) {
+            Text(language, style = ClaudeText.CodeLang, color = ClaudeColors.Stone)
+            Spacer(Modifier.weight(1f))
+            Icon(
+                imageVector = if (copied) Icons.Filled.Check else Icons.Filled.ContentCopy,
+                contentDescription = "Copy code",
+                tint = ClaudeColors.CodeFg,
+                modifier = Modifier
+                    .size(32.dp)
+                    .clip(CircleShape)
+                    .clickable {
+                        clipboard.setText(AnnotatedString(code.text))
+                        haptics.performHapticFeedback(HapticFeedbackType.TextHandleMove) // ~iOS light impact
+                        copied = true
+                    }
+                    .padding(8.dp),
+            )
+        }
+        Box(Modifier.horizontalScroll(rememberScrollState()).padding(16.dp)) {
+            Text(code, style = ClaudeText.CodeBlock, color = ClaudeColors.CodeFg, softWrap = false)
+        }
+    }
+}
+```
+
+## 4. Streaming Word-by-Word Animation (the signature dynamic)
+
+Claude has no color extraction — its distinctive dynamic system is the **word-by-word streaming with the blinking orange caret** and the **"Thinking…" pulse**. Stream prose by appending tokens and fading each word in (never character-by-character — readability over typewriter drama).
+
+```kotlin
+import androidx.compose.animation.AnimatedVisibility
+import androidx.compose.animation.fadeIn
+import androidx.compose.animation.core.tween
+import androidx.compose.foundation.layout.FlowRow
+
+@OptIn(androidx.compose.foundation.layout.ExperimentalLayoutApi::class)
+@Composable
+fun StreamedProse(words: List<String>, isStreaming: Boolean, modifier: Modifier = Modifier) {
+    FlowRow(modifier) {
+        words.forEachIndexed { i, w ->
+            AnimatedVisibility(visible = true, enter = fadeIn(tween(80))) { // 80ms per-word fade
+                Text("$w ", style = ClaudeText.Body, color = ClaudeColors.Ink)
+            }
+        }
+        if (isStreaming) StreamingCursor(Modifier.padding(start = 2.dp))
+    }
+}
+
+// "Thinking…" indicator — asterisk pulses 1.0 → 1.15 → 1.0 every 1200ms
+@Composable
+fun ThinkingIndicator(elapsedSeconds: Int? = null, modifier: Modifier = Modifier) {
+    val t = rememberInfiniteTransition(label = "think")
+    val pulse by t.animateFloat(
+        1f, 1.15f,
+        infiniteRepeatable(tween(1200, easing = FastOutSlowInEasing), RepeatMode.Reverse),
+        label = "pulse",
+    )
+    Row(
+        modifier
+            .clip(RoundedCornerShape(12.dp))
+            .background(ClaudeColors.OrangeSoft)
+            .padding(horizontal = 12.dp, vertical = 6.dp),
+        verticalAlignment = Alignment.CenterVertically,
+        horizontalArrangement = Arrangement.spacedBy(8.dp),
+    ) {
+        ClaudeMark(size = 14.dp, modifier = Modifier.scale(pulse))
+        Text(elapsedSeconds?.let { "Thought for ${it}s" } ?: "Thinking…", style = ClaudeText.Chip, color = ClaudeColors.Graphite)
+    }
+}
+```
+
+## 5. Navigation
+
+Claude has **no bottom tab bar** — it is a single-purpose chat with sidebar navigation. Use a `ModalNavigationDrawer` for conversation history; the top header is a slim 52dp `Row` over the cream canvas (no app bar elevation — content scrolls naturally underneath). Android has no live blur, so the header is just the opaque `Cream` surface.
+
+```kotlin
+import androidx.compose.material.icons.filled.Menu
+import androidx.compose.material.icons.filled.MoreHoriz
+import androidx.compose.material3.ModalDrawerSheet
+import androidx.compose.material3.ModalNavigationDrawer
+import androidx.compose.material3.rememberDrawerState
+import androidx.compose.material3.DrawerValue
+
+@Composable
+fun ConversationScaffold(modelName: String, content: @Composable () -> Unit) {
+    val drawer = rememberDrawerState(DrawerValue.Closed)
+    ModalNavigationDrawer(
+        drawerState = drawer,
+        drawerContent = {
+            ModalDrawerSheet(drawerContainerColor = ClaudeColors.Surface1) {
+                // "+ New chat" Paper button + date-grouped conversation rows
+            }
+        },
+    ) {
+        Column(Modifier.fillMaxSize().background(ClaudeColors.Cream)) {
+            Row(
+                Modifier.fillMaxWidth().height(52.dp).padding(horizontal = 16.dp),
+                verticalAlignment = Alignment.CenterVertically,
+            ) {
+                Icon(Icons.Filled.Menu, "Open history", tint = ClaudeColors.Ink, modifier = Modifier.size(18.dp))
+                Spacer(Modifier.weight(1f))
+                Text("Untitled chat", style = ClaudeText.ConvTitle, color = ClaudeColors.Ink)
+                Spacer(Modifier.weight(1f))
+                Icon(Icons.Filled.MoreHoriz, "Menu", tint = ClaudeColors.Ink, modifier = Modifier.size(18.dp))
+            }
+            content()
+        }
+    }
+}
+```
+
+## 6. Motion
+
+| Moment | Compose recipe |
+|--------|----------------|
+| Send tap | `animateFloatAsState` 1 → 0.94 with `spring`; `HapticFeedbackType.LongPress` (~iOS medium); then user pill slides up |
+| Streaming text | per-word `fadeIn(tween(80))` — never character-by-character |
+| Streaming cursor blink | `rememberInfiniteTransition` 1 → 0 over 300ms, `RepeatMode.Reverse` (600ms cycle) |
+| "Thinking…" pulse | infinite `scale` 1.0 → 1.15 over 1200ms, `FastOutSlowInEasing` |
+| Artifact card → modal | `SharedTransitionLayout` + `Modifier.sharedElement()` (Compose 1.7+); fallback `AnimatedVisibility` + `slideInVertically` |
+| Copy confirmation | icon `ContentCopy` → `Check` over 150ms, "Copied" toast slides up, auto-dismiss 1200ms |
+
+```kotlin
+// User message slide-up after send
+import androidx.compose.animation.slideInVertically
+AnimatedVisibility(
+    visible = sent,
+    enter = slideInVertically(animationSpec = tween(300)) { it / 2 } + fadeIn(tween(300)),
+) {
+    UserMessage(text = lastSent)
+}
+```
+
+Haptics: prefer `LocalHapticFeedback`. For richer control use `LocalView.current.performHapticFeedback(HapticFeedbackConstants.CONTEXT_CLICK)` (API 30+) or a `Vibrator` `VibrationEffect.createOneShot(12, …)` to approximate iOS's `.medium` send impact and `.light` copy tick.
+
+## 7. Icons
+
+Claude ships a custom asterisk-star mark (drawn on `Canvas` in §3). The rest map to `androidx.compose.material:material-icons-extended`; export any bespoke glyphs as vector drawables and load via `ImageVector.vectorResource(R.drawable.…)`.
+
+| Purpose | SF Symbol (iOS) | Material Icon (Compose) |
+|---------|-----------------|--------------------------|
+| Send (arrow) | `arrow.up` | `Icons.Filled.ArrowUpward` |
+| Attach (plus) | `plus.circle` | `Icons.Filled.Add` |
+| Copy | `doc.on.doc` | `Icons.Filled.ContentCopy` |
+| Copied confirmation | `checkmark` | `Icons.Filled.Check` |
+| Hamburger / sidebar | `line.3.horizontal` | `Icons.Filled.Menu` |
+| Overflow menu | `ellipsis` | `Icons.Filled.MoreHoriz` |
+| Model picker chevron | `chevron.down` | `Icons.Filled.KeyboardArrowDown` |
+| Close modal | `xmark.circle.fill` | `Icons.Filled.Cancel` |
+| Artifact — document | `doc.text` | `Icons.Filled.Description` |
+| Artifact — code | `chevron.left.forwardslash.chevron.right` | `Icons.Filled.Code` |
+| Artifact — chart | `chart.bar` | `Icons.Filled.BarChart` |
+| Artifact — open arrow | `arrow.up.right` | `Icons.Filled.NorthEast` |
+| Settings | `gearshape` | `Icons.Filled.Settings` |
+| New chat | `plus` | `Icons.Filled.Add` |
+| Asterisk-star mark | (custom) | Custom `Canvas` `ClaudeMark` — never substitute |
+
+## 8. Minimum SDK & Accessibility Notes
+
+- **minSdk 24** (Compose floor is 21; modern motion is comfortable at 24). `compileSdk 34+`, Compose BOM `2024.09+`, Kotlin `2.0+`.
+- **Edge-to-edge**: call `enableEdgeToEdge()` in the `Activity`. The cream canvas wants dark-content system bars (`WindowCompat` + `isAppearanceLightStatusBars = true`); apply `Modifier.windowInsetsPadding(WindowInsets.systemBars)` so the pinned input clears the gesture nav.
+- **Font scaling**: `sp` honors the user's font scale automatically — keep it on assistant body, headings, user messages, list items, blockquotes. Pin layout-sensitive text (model chip, timestamps, the 16dp send glyph, code language label) by deriving size from `dp` or wrapping in `CompositionLocalProvider(LocalDensity provides Density(density, fontScale = 1f))`. Cap code-block scaling at 18sp to prevent overflow.
+- **TalkBack**: make the assistant message a single node with `Modifier.semantics(mergeDescendants = true)` — announce model name then body; the streaming cursor announces "Claude is responding". Give the copy button `contentDescription = "Copy code"` and a separate role.
+- **Touch targets**: Material guidance is 48dp minimum. The 40dp send circle needs `Modifier.size(48.dp)` hit area via padding; the 10dp chevron and 32dp copy glyph likewise expand their hit area.
+- **Contrast**: Ink (`#2D2520`) on Cream (`#F8F4ED`) clears WCAG AAA at all sizes. The real low-contrast pair is **Stone `#8A7E72` on Cream** and Bone on Cream — validate the 11sp caption/group-header with a contrast checker and darken toward Graphite `#5A4F44` if your build targets compliance. Never put Claude Orange on small body text.
+- **Reduce motion**: when `Settings.Global.ANIMATOR_DURATION_SCALE == 0f`, skip the cursor blink and "Thinking…" pulse — cursor stays solid; word fade collapses to instant.
+- **Dynamic color**: do **not** enable Material You `dynamicLightColorScheme()` — Claude's brand requires the fixed `#F8F4ED` cream paper and the single terracotta accent regardless of wallpaper. Strong-brand app: keep the curated scheme.