designmd-forge 1.2.0

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

@@ -0,0 +1,471 @@
+# DeepSeek (iOS) — Jetpack Compose Implementation Guide
+
+Companion to [DESIGN.md](DESIGN.md) — the framework-neutral spec. This file ports DeepSeek's visual language to **Android with Jetpack Compose (Material 3)**: a color token object, a `Typography` set, paste-ready `@Composable`s, the reasoning trace + two-toggle composer, 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 (near-black calm, the single DeepSeek-Blue accent, the recessed reasoning trace with a blue left-bar, the dimmed-italic chain-of-thought subordinate to an upright answer, the DeepThink/Search toggle pair) while making everything idiomatic Android — `NavigationBar` instead of a UITabBar, `AnimatedVisibility` instead of a SwiftUI transition, `sp`/`dp` instead of `pt`.
+
+Assumes Compose BOM `2024.09+`, Kotlin `2.0+`, `minSdk 24`, Material 3. No color extraction — DeepSeek's palette is a fixed near-mono ramp + one accent, so Palette is not needed. DeepSeek ships both light and dark; a full dark scheme is primary. Do **not** enable Material You dynamic color — the single `#4D6BFE` accent must hold regardless of wallpaper.
+
+## 1. Color Tokens
+
+```kotlin
+// ui/theme/DSColors.kt
+import androidx.compose.ui.graphics.Color
+
+object DSColors {
+    // Canvas & Surfaces (Dark)
+    val Canvas      = Color(0xFF0E0E10)
+    val Surface1    = Color(0xFF1A1B1E)
+    val Surface2    = Color(0xFF232428)
+    val Surface3    = Color(0xFF2C2D31)
+    val ReasoningBg = Color(0xFF16171A) // DARKER than canvas — recessed
+    val Divider     = Color(0xFF2E2F33)
+
+    // Canvas & Surfaces (Light)
+    val CanvasLight      = Color(0xFFFFFFFF)
+    val Surface1Light    = Color(0xFFF5F6F8)
+    val ReasoningBgLight = Color(0xFFF7F8FA)
+    val DividerLight     = Color(0xFFE4E6EB)
+
+    // Text
+    val TextPrimary    = Color(0xFFECECEC)
+    val TextSecondary  = Color(0xFF9A9BA0)
+    val TextTertiary   = Color(0xFF6A6B70)
+    val ReasoningText  = Color(0xFF8A8B90) // dimmed italic chain-of-thought
+    val TextPrimaryLight = Color(0xFF1A1B1E)
+
+    // Brand — the single accent
+    val Blue        = Color(0xFF4D6BFE)
+    val BluePressed = Color(0xFF3B57E0)
+    val BlueSoft    = Color(0xFF1E2240)
+    val BlueSoftLight = Color(0xFFEBEFFF)
+    val BlueToken   = Color(0xFFC5CDFF)
+
+    // Semantic
+    val Success = Color(0xFF2EBD85)
+    val Error   = Color(0xFFE5484D)
+}
+```
+
+Wire it into both schemes. DeepSeek is calm and near-mono; the accent is `Blue` in both.
+
+```kotlin
+// ui/theme/Theme.kt
+import androidx.compose.foundation.isSystemInDarkTheme
+import androidx.compose.material3.darkColorScheme
+import androidx.compose.material3.lightColorScheme
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.runtime.Composable
+
+private val DSDark = darkColorScheme(
+    primary        = DSColors.Blue,           // the single accent
+    onPrimary      = Color(0xFFFFFFFF),
+    background     = DSColors.Canvas,
+    onBackground   = DSColors.TextPrimary,
+    surface        = DSColors.Surface1,
+    onSurface      = DSColors.TextPrimary,
+    surfaceVariant = DSColors.Surface2,
+    outline        = DSColors.Divider,
+    error          = DSColors.Error,
+)
+
+private val DSLight = lightColorScheme(
+    primary        = DSColors.Blue,
+    onPrimary      = Color(0xFFFFFFFF),
+    background     = DSColors.CanvasLight,
+    onBackground   = DSColors.TextPrimaryLight,
+    surface        = DSColors.Surface1Light,
+    onSurface      = DSColors.TextPrimaryLight,
+    surfaceVariant = Color(0xFFECEEF2),
+    outline        = DSColors.DividerLight,
+    error          = DSColors.Error,
+)
+
+@Composable
+fun DSTheme(
+    dark: Boolean = isSystemInDarkTheme(),
+    content: @Composable () -> Unit,
+) = MaterialTheme(                            // no dynamicColorScheme() — single fixed accent
+    colorScheme = if (dark) DSDark else DSLight,
+    typography  = DSTypography,
+    content     = content,
+)
+```
+
+## 2. Typography
+
+DeepSeek uses the system sans (Inter, SIL OFL — drop TTFs in `res/font/`, including an italic for the reasoning trace). Body 400, headings 700/800. The reasoning trace is the only italic in the system.
+
+```kotlin
+// ui/theme/DSType.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
+
+val Inter = FontFamily(
+    Font(R.font.inter_regular,   FontWeight.Normal),
+    Font(R.font.inter_italic,    FontWeight.Normal, FontStyle.Italic),
+    Font(R.font.inter_medium,    FontWeight.Medium),
+    Font(R.font.inter_semibold,  FontWeight.SemiBold),
+    Font(R.font.inter_bold,      FontWeight.Bold),
+    Font(R.font.inter_extrabold, FontWeight.ExtraBold),
+)
+val Mono = FontFamily.Monospace
+
+// Named ramp — mirrors DESIGN.md §3 exactly (pt → sp 1:1)
+object DSText {
+    val ScreenTitle   = TextStyle(Inter, fontWeight = FontWeight.ExtraBold, fontSize = 32.sp, lineHeight = 37.sp, letterSpacing = (-0.4).sp)
+    val EmptyHeadline = TextStyle(Inter, fontWeight = FontWeight.Bold,      fontSize = 26.sp, lineHeight = 33.sp, letterSpacing = (-0.3).sp)
+    val Section       = TextStyle(Inter, fontWeight = FontWeight.Bold,      fontSize = 18.sp, lineHeight = 24.sp, letterSpacing = (-0.2).sp)
+    val Body          = TextStyle(Inter, fontWeight = FontWeight.Normal,    fontSize = 15.sp, lineHeight = 24.sp)
+    val Action        = TextStyle(Inter, fontWeight = FontWeight.SemiBold,  fontSize = 15.sp, lineHeight = 15.sp)
+    val CardTitle     = TextStyle(Inter, fontWeight = FontWeight.SemiBold,  fontSize = 15.sp, lineHeight = 20.sp)
+    val Reasoning     = TextStyle(Inter, fontWeight = FontWeight.Normal,    fontSize = 13.sp, lineHeight = 20.sp, fontStyle = FontStyle.Italic) // dimmed italic
+    val Meta          = TextStyle(Inter, fontWeight = FontWeight.Normal,    fontSize = 14.sp, lineHeight = 20.sp)
+    val Caption       = TextStyle(Inter, fontWeight = FontWeight.Medium,    fontSize = 12.sp, lineHeight = 16.sp)
+    val Tab           = TextStyle(Inter, fontWeight = FontWeight.Medium,    fontSize = 10.sp, lineHeight = 10.sp, letterSpacing = 0.1.sp)
+    val Placeholder   = TextStyle(Inter, fontWeight = FontWeight.Normal,    fontSize = 15.sp, lineHeight = 20.sp)
+    val CodeInline    = TextStyle(Mono,  fontWeight = FontWeight.Normal,    fontSize = 13.sp, lineHeight = 18.sp)
+    val CodeBlock     = TextStyle(Mono,  fontWeight = FontWeight.Normal,    fontSize = 13.sp, lineHeight = 20.sp)
+    val Citation      = TextStyle(Mono,  fontWeight = FontWeight.SemiBold,  fontSize = 11.sp, lineHeight = 14.sp)
+}
+
+// Map onto Material 3 slots so stock components inherit the brand
+val DSTypography = Typography(
+    headlineLarge  = DSText.ScreenTitle,
+    headlineMedium = DSText.EmptyHeadline,
+    titleMedium    = DSText.Section,
+    bodyMedium     = DSText.Body,
+    labelSmall     = DSText.Tab,
+)
+```
+
+## 3. Signature Components
+
+### Reasoning Trace (the signature)
+
+```kotlin
+import androidx.compose.animation.AnimatedVisibility
+import androidx.compose.animation.core.animateFloatAsState
+import androidx.compose.animation.core.tween
+import androidx.compose.animation.expandVertically
+import androidx.compose.animation.fadeIn
+import androidx.compose.animation.fadeOut
+import androidx.compose.animation.shrinkVertically
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.*
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.filled.AutoAwesome
+import androidx.compose.material.icons.filled.KeyboardArrowDown
+import androidx.compose.material3.Icon
+import androidx.compose.material3.Text
+import androidx.compose.runtime.*
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.clip
+import androidx.compose.ui.draw.drawBehind
+import androidx.compose.ui.draw.rotate
+import androidx.compose.ui.geometry.Offset
+import androidx.compose.ui.unit.dp
+
+@Composable
+fun ReasoningTrace(durationSeconds: Int, thought: String) {
+    var collapsed by remember { mutableStateOf(false) }
+    val rot by animateFloatAsState(if (collapsed) -90f else 0f, tween(150), label = "chevron")
+
+    Column(
+        Modifier
+            .fillMaxWidth()
+            .clip(RoundedCornerShape(10.dp))
+            .background(DSColors.ReasoningBg)                 // DARKER than canvas
+            .drawBehind {                                     // 2dp blue left-bar
+                drawRect(DSColors.Blue, size = size.copy(width = 2.dp.toPx()), topLeft = Offset.Zero)
+            }
+            .padding(vertical = 12.dp, horizontal = 14.dp),
+    ) {
+        Row(
+            Modifier
+                .fillMaxWidth()
+                .clickableNoRipple { collapsed = !collapsed },
+            verticalAlignment = Alignment.CenterVertically,
+            horizontalArrangement = Arrangement.spacedBy(8.dp),
+        ) {
+            Icon(Icons.Filled.AutoAwesome, null, tint = DSColors.Blue, modifier = Modifier.size(14.dp))
+            Text("Thought for $durationSeconds seconds", style = DSText.Caption, color = DSColors.TextSecondary)
+            Text(if (collapsed) "· tap to expand" else "· tap to collapse",
+                 style = DSText.Caption, color = DSColors.TextTertiary)
+            Spacer(Modifier.weight(1f))
+            Icon(Icons.Filled.KeyboardArrowDown, null, tint = DSColors.TextTertiary,
+                 modifier = Modifier.size(14.dp).rotate(rot))
+        }
+        AnimatedVisibility(
+            visible = !collapsed,
+            enter = expandVertically(tween(200)) + fadeIn(tween(150)),
+            exit  = shrinkVertically(tween(200)) + fadeOut(tween(120)),
+        ) {
+            Text(thought, style = DSText.Reasoning, color = DSColors.ReasoningText,  // dimmed ITALIC
+                 modifier = Modifier.padding(top = 8.dp))
+        }
+    }
+}
+```
+
+### DeepThink / Search Toggle Pill
+
+```kotlin
+import androidx.compose.foundation.BorderStroke
+import androidx.compose.foundation.border
+import androidx.compose.foundation.clickable
+import androidx.compose.foundation.interaction.MutableInteractionSource
+import androidx.compose.ui.graphics.vector.ImageVector
+import androidx.compose.ui.hapticfeedback.HapticFeedbackType
+import androidx.compose.ui.platform.LocalHapticFeedback
+
+fun Modifier.clickableNoRipple(onClick: () -> Unit): Modifier = composed {
+    clickable(indication = null, interactionSource = remember { MutableInteractionSource() }) { onClick() }
+}
+
+@Composable
+fun TogglePill(title: String, icon: ImageVector, on: Boolean, onToggle: () -> Unit) {
+    val haptics = LocalHapticFeedback.current
+    Row(
+        Modifier
+            .clip(RoundedCornerShape(999.dp))
+            .background(if (on) DSColors.BlueSoft else DSColors.Surface1)
+            .border(BorderStroke(1.dp, if (on) DSColors.Blue else DSColors.Divider),
+                    RoundedCornerShape(999.dp))
+            .clickableNoRipple {
+                haptics.performHapticFeedback(HapticFeedbackType.LongPress); onToggle()
+            }
+            .padding(vertical = 7.dp, horizontal = 13.dp),
+        verticalAlignment = Alignment.CenterVertically,
+        horizontalArrangement = Arrangement.spacedBy(6.dp),
+    ) {
+        Icon(icon, null, tint = if (on) DSColors.Blue else DSColors.TextSecondary,
+             modifier = Modifier.size(14.dp))
+        Text(title, style = DSText.Action, color = if (on) DSColors.Blue else DSColors.TextSecondary)
+    }
+}
+```
+
+### User Bubble & Assistant Message
+
+```kotlin
+import androidx.compose.material.icons.filled.Adjust
+import androidx.compose.material.icons.outlined.ContentCopy
+import androidx.compose.material.icons.outlined.Refresh
+import androidx.compose.material.icons.outlined.ThumbDown
+import androidx.compose.material.icons.outlined.ThumbUp
+
+@Composable
+fun UserBubble(text: String) {
+    Row(Modifier.fillMaxWidth(), horizontalArrangement = Arrangement.End) {
+        Box(
+            Modifier
+                .widthIn(max = 280.dp)
+                .clip(RoundedCornerShape(topStart = 18.dp, topEnd = 18.dp,
+                                         bottomEnd = 4.dp, bottomStart = 18.dp)) // 4dp points at sender
+                .background(DSColors.BlueSoft)
+                .border(BorderStroke(1.dp, Color(0xFF2A3360)),
+                        RoundedCornerShape(topStart = 18.dp, topEnd = 18.dp,
+                                           bottomEnd = 4.dp, bottomStart = 18.dp))
+                .padding(vertical = 12.dp, horizontal = 16.dp)
+        ) { Text(text, style = DSText.Body, color = DSColors.TextPrimary) }
+    }
+}
+
+@Composable
+fun AssistantMessage(model: String, trace: (@Composable () -> Unit)?, answer: String) {
+    Column(Modifier.fillMaxWidth()) {
+        Row(verticalAlignment = Alignment.CenterVertically,
+            horizontalArrangement = Arrangement.spacedBy(7.dp)) {
+            Icon(Icons.Filled.Adjust, null, tint = DSColors.Blue, modifier = Modifier.size(18.dp))
+            Text(model, style = DSText.Caption, color = DSColors.TextSecondary)
+        }
+        Spacer(Modifier.height(8.dp))
+        trace?.invoke()
+        if (trace != null) Spacer(Modifier.height(10.dp))
+        Text(answer, style = DSText.Body, color = DSColors.TextPrimary)
+        Spacer(Modifier.height(10.dp))
+        Row(horizontalArrangement = Arrangement.spacedBy(16.dp)) {
+            listOf(Icons.Outlined.ContentCopy, Icons.Outlined.ThumbUp,
+                   Icons.Outlined.ThumbDown, Icons.Outlined.Refresh).forEach {
+                Icon(it, null, tint = DSColors.TextTertiary, modifier = Modifier.size(16.dp))
+            }
+        }
+    }
+}
+```
+
+### Composer (toggle row + input pill)
+
+```kotlin
+import androidx.compose.foundation.text.BasicTextField
+import androidx.compose.material.icons.filled.ArrowUpward
+import androidx.compose.material.icons.filled.Search
+import androidx.compose.material.icons.filled.Stop
+import androidx.compose.ui.graphics.SolidColor
+import androidx.compose.ui.text.input.TextFieldValue
+
+@Composable
+fun Composer(
+    value: TextFieldValue,
+    onValueChange: (TextFieldValue) -> Unit,
+    deepThink: Boolean, search: Boolean, isStreaming: Boolean,
+    onToggleDeepThink: () -> Unit, onToggleSearch: () -> Unit,
+    onSend: () -> Unit, onStop: () -> Unit,
+) {
+    val haptics = LocalHapticFeedback.current
+    Column(Modifier.padding(horizontal = 14.dp)) {
+        Row(horizontalArrangement = Arrangement.spacedBy(8.dp)) {
+            TogglePill("DeepThink (R1)", Icons.Filled.AutoAwesome, deepThink, onToggleDeepThink)
+            TogglePill("Search", Icons.Filled.Search, search, onToggleSearch)
+        }
+        Spacer(Modifier.height(8.dp))
+        Row(
+            Modifier
+                .fillMaxWidth().height(50.dp)
+                .clip(RoundedCornerShape(25.dp))
+                .background(DSColors.Surface1)
+                .border(BorderStroke(1.dp, DSColors.Divider), RoundedCornerShape(25.dp))
+                .padding(start = 18.dp, end = 7.dp),
+            verticalAlignment = Alignment.CenterVertically,
+            horizontalArrangement = Arrangement.spacedBy(10.dp),
+        ) {
+            Box(Modifier.weight(1f)) {
+                if (value.text.isEmpty())
+                    Text("Message DeepSeek", style = DSText.Placeholder, color = DSColors.TextTertiary)
+                BasicTextField(
+                    value = value, onValueChange = onValueChange,
+                    textStyle = DSText.Body.copy(color = DSColors.TextPrimary),
+                    cursorBrush = SolidColor(DSColors.Blue),
+                )
+            }
+            Box(
+                Modifier
+                    .size(36.dp)
+                    .clip(androidx.compose.foundation.shape.CircleShape)
+                    .background(if (isStreaming) DSColors.Error else DSColors.Blue)
+                    .clickableNoRipple {
+                        if (isStreaming) onStop()
+                        else { haptics.performHapticFeedback(HapticFeedbackType.LongPress); onSend() }
+                    },
+                contentAlignment = Alignment.Center,
+            ) {
+                Icon(if (isStreaming) Icons.Filled.Stop else Icons.Filled.ArrowUpward,
+                     null, tint = Color.White, modifier = Modifier.size(16.dp))
+            }
+        }
+    }
+}
+```
+
+## 4. Navigation
+
+DeepSeek has minimal chrome: a 3-tab bottom strip and a thin top bar with the whale wordmark. On Android, model the strip as a `NavigationBar`. There is no tint pill — active is just `Blue`.
+
+```kotlin
+import androidx.compose.material3.*
+import androidx.compose.material.icons.filled.ChatBubbleOutline
+import androidx.compose.material.icons.filled.History
+import androidx.compose.material.icons.filled.Settings
+
+@Composable
+fun DSBottomBar(selected: Int, onSelect: (Int) -> Unit) {
+    NavigationBar(containerColor = DSColors.Canvas, tonalElevation = 0.dp) {
+        val items = listOf(
+            "Chat"     to Icons.Filled.ChatBubbleOutline,
+            "History"  to Icons.Filled.History,
+            "Settings" to Icons.Filled.Settings,
+        )
+        items.forEachIndexed { i, (label, icon) ->
+            NavigationBarItem(
+                selected = selected == i,
+                onClick = { onSelect(i) },
+                icon = { Icon(icon, label, modifier = Modifier.size(22.dp)) },
+                label = { Text(label, style = DSText.Tab) },
+                colors = NavigationBarItemDefaults.colors(
+                    selectedIconColor   = DSColors.Blue,        // the single accent
+                    selectedTextColor   = DSColors.Blue,
+                    unselectedIconColor = DSColors.TextTertiary,
+                    unselectedTextColor = DSColors.TextTertiary,
+                    indicatorColor      = Color.Transparent,     // NO Material pill
+                ),
+            )
+        }
+    }
+}
+```
+
+The top bar is a `CenterAlignedTopAppBar` (`containerColor = DSColors.Canvas`) with a leading history/hamburger `IconButton`, a centered title row (custom whale `Icon` 22dp `Blue` + "DeepSeek" where "Seek" is a `Blue` span via `buildAnnotatedString`), and a trailing new-chat `IconButton`. History is a `LazyColumn` of conversation rows grouped by date `Section` headers.
+
+## 5. Motion
+
+DeepSeek motion is quiet — 150–300ms ease. The trace recedes (darker fill), it never elevates.
+
+| Moment | Compose recipe |
+|--------|----------------|
+| Toggle on/off | fill/border/content recolor on recompose; wrap in `animateColorAsState(tween(150))` for an explicit crossfade |
+| Trace collapse/expand | chevron `animateFloatAsState` 0 → -90° `tween(150)`; body `expandVertically(tween(200)) + fadeIn` / `shrinkVertically + fadeOut` |
+| Reasoning stream | append tokens to `thought` on a coroutine; live duration counter; a `#4D6BFE` caret blinks via `rememberInfiniteTransition` `tween(530, Reverse)` |
+| Send → stop | swap `ArrowUpward` ↔ `Stop`, container `Blue` ↔ `Error` on `isStreaming` |
+| Message append | new bubble `AnimatedVisibility` `slideInVertically { it } + fadeIn` `tween(200)` |
+| Citation tap | `ModalBottomSheet` source list — Material default slide-up |
+| Tab change | instant — no `AnimatedContent` |
+
+```kotlin
+// Trace expand — the canonical DeepSeek motion
+AnimatedVisibility(
+    visible = !collapsed,
+    enter = expandVertically(animationSpec = tween(200)) + fadeIn(tween(150)),
+    exit  = shrinkVertically(animationSpec = tween(200)) + fadeOut(tween(120)),
+) { /* dimmed italic chain-of-thought */ }
+```
+
+Haptics: `LocalHapticFeedback.performHapticFeedback(HapticFeedbackType.LongPress)` for the soft impact on toggle engage and send. On copy, fire a confirm cue (`HapticFeedbackConstants.CONFIRM` on API 30+, fallback `KEYBOARD_TAP`). Streaming start/stop is silent except the button morph.
+
+## 6. Icons
+
+The whale logomark should be a bundled vector (`ImageVector` from an XML/SVG asset) for brand fidelity; everything else maps to `androidx.compose.material:material-icons-extended`.
+
+| Purpose | SF Symbol (iOS) | Material Icon (Compose) |
+|---------|-----------------|--------------------------|
+| Chat (tab) | `bubble.left.and.bubble.right` | `Icons.Filled.ChatBubbleOutline` |
+| History (tab) | `clock.arrow.circlepath` | `Icons.Filled.History` |
+| Settings (tab) | `gearshape` | `Icons.Filled.Settings` |
+| DeepThink toggle | `brain` | `Icons.Filled.AutoAwesome` |
+| Search toggle | `magnifyingglass` | `Icons.Filled.Search` |
+| Whale / model glyph | custom whale asset | custom `ImageVector` (fallback `Icons.Filled.Adjust`) |
+| Send | `arrow.up` | `Icons.Filled.ArrowUpward` |
+| Stop streaming | `stop.fill` | `Icons.Filled.Stop` |
+| New chat | `square.and.pencil` | `Icons.Filled.EditNote` |
+| Hamburger / history | `line.3.horizontal` | `Icons.Filled.Menu` |
+| Copy | `doc.on.doc` | `Icons.Outlined.ContentCopy` |
+| Thumbs up / down | `hand.thumbsup` / `hand.thumbsdown` | `Icons.Outlined.ThumbUp` / `Icons.Outlined.ThumbDown` |
+| Regenerate | `arrow.clockwise` | `Icons.Outlined.Refresh` |
+| Share | `square.and.arrow.up` | `Icons.Filled.IosShare` |
+| Trace collapse | `chevron.down` | `Icons.Filled.KeyboardArrowDown` |
+| Citation source | `link` | `Icons.Filled.Link` |
+| Attach | `paperclip` | `Icons.Filled.AttachFile` |
+
+## 7. (reserved — see §4 Navigation)
+
+Navigation patterns (bottom bar, top bar, History list) are documented in §4. The source sheet for web-search citations is a Material `ModalBottomSheet` with `containerColor = DSColors.Surface1`, a 12dp top corner radius, and rows of `[n]` title + domain — opened when a `[n]` citation chip (`DSText.Citation`, `Blue` on a faint `BlueSoft` pill) is tapped.
+
+## 8. Minimum SDK & Accessibility Notes
+
+- **minSdk 24** (Compose floor is 21; per-corner `RoundedCornerShape`, `AnimatedVisibility`, modern motion are comfortable at 24). `compileSdk 34+`, Compose BOM `2024.09+`, Kotlin `2.0+`.
+- **Edge-to-edge**: call `enableEdgeToEdge()`; dark wants light-content system bars over `#0E0E10` (and dark-content in light mode). The composer (toggle row + input) must sit above the IME — use `Modifier.imePadding()` and `Modifier.navigationBarsPadding()`.
+- **Both schemes**: ship `DSDark` (primary) and `DSLight`. The invariant in both: the reasoning-trace background is *recessed* relative to the canvas (`#16171A` on `#0E0E10`; `#F7F8FA` on `#FFFFFF`) — recession, not elevation. Do **not** enable `dynamicColorScheme()` (Material You) — the single `#4D6BFE` accent must hold regardless of wallpaper.
+- **Single accent**: `#4D6BFE` is the only chrome color. Never add a second accent or a tinted active-tab indicator (active = `Blue` glyph+label, `indicatorColor = Transparent`).
+- **Reasoning is italic**: the chain-of-thought always uses `FontStyle.Italic` + `ReasoningText`. Never render it upright or in `TextPrimary`.
+- **Font scaling**: `sp` honors the user's font scale — keep it on message body, headings, reasoning text. Pin layout-sensitive text (10sp tab labels, citation chips, toggle text) via `CompositionLocalProvider(LocalDensity provides Density(density, fontScale = 1f))`.
+- **Touch targets**: Material guidance is 48.dp. Give toggle pills, the trace header, and the 16dp action icons a 48.dp hit area via padding; the send button is 36.dp with a 48.dp hit; History rows are full-row tappable.
+- **Contrast**: `#ECECEC` on `#0E0E10` is high; `#8A8B90` on `#16171A` is intentionally low-emphasis (reasoning) but still passes WCAG AA at 13sp; never rely on italic alone — the panel, blue left-bar, and TalkBack prefix carry "this is reasoning" too.
+- **TalkBack**: label the trace "Reasoning, thought for {N} seconds, {collapsed/expanded}, double-tap to toggle"; read the chain-of-thought as one block prefixed "Model reasoning:"; toggles "DeepThink, {on/off}" / "Search, {on/off}"; while streaming, expose the live duration as `stateDescription`, not repeated announcements.
+- **Reduce motion**: when `Settings.Global.ANIMATOR_DURATION_SCALE == 0`, disable the trace expand/collapse animation and chevron rotation (plain `Crossfade`), and the caret blink; the send→stop morph becomes an instant swap.
+- **Streaming state**: while the answer streams, the send control is a `#E5484D` stop button with `contentDescription = "Stop generating"`.