designmd-forge 1.2.0

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

@@ -0,0 +1,553 @@
+# Perplexity (iOS) — Jetpack Compose Implementation Guide
+
+Companion to [DESIGN.md](DESIGN.md) — the framework-neutral spec. This file ports Perplexity's visual language to **Android with Jetpack Compose (Material 3)**: a color token object, a `Typography` set, paste-ready `@Composable`s, the triple-circle brand mark, inline citation chips, 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 (Perplexity's near-black research-notebook canvas, the single cyan-teal accent, inline citations + source cards, the triple-circle mark) while making everything idiomatic Android — `NavigationBar` instead of a UITabBar, a `Path`-drawn mark instead of a SwiftUI `Shape`, `LazyRow` source cards, `sp`/`dp` instead of `pt`.
+
+Assumes Compose BOM `2024.09+`, Kotlin `2.0+`, `minSdk 24`, Material 3, and [Coil](https://coil-kt.github.io/coil/) `2.6+` for source-card favicons and Discover hero images. No color extraction — the accent is a fixed teal scale, so Palette is not needed. Perplexity is dark-first; a light scheme is provided.
+
+## 1. Color Tokens
+
+```kotlin
+// ui/theme/PerplexityColors.kt
+import androidx.compose.ui.graphics.Color
+
+object PerplexityColors {
+    // Canvas (dark-first)
+    val Canvas   = Color(0xFF0A0A0A) // near-black — every screen by default
+    val Surface1 = Color(0xFF171717) // input field, source card, modal
+    val Surface2 = Color(0xFF1F1F1F) // chips, pressed
+    val Surface3 = Color(0xFF2A2A2A) // sheets, sticky headers
+    val Divider  = Color(0xFF2A2A2A)
+
+    // Text (on dark)
+    val TextPrimary   = Color(0xFFFAFAFA) // off-white — NOT pure white
+    val TextSecondary = Color(0xFFA1A1A1)
+    val TextTertiary  = Color(0xFF6E6E6E)
+    val TextMuted     = Color(0xFF4A4A4A)
+
+    // Perplexity Teal (the single signature accent)
+    val Teal       = Color(0xFF20B8CD)
+    val TealBright = Color(0xFF3DD6EC) // streaming cursor, hover
+    val TealDeep   = Color(0xFF1591A3) // pressed, light-mode teal
+    val TealSoft   = Color(0xFF0F3A42) // Pro Steps fill, focused chip bg
+
+    // Code & syntax
+    val CodeBg     = Color(0xFF0E0E0E)
+    val CodeFg     = Color(0xFFE5E5E5)
+    val SyntaxStr  = Color(0xFFA8E063) // lime
+    val SyntaxNum  = Color(0xFFF2A65A) // soft orange
+    val SyntaxFunc = Color(0xFFB988F2) // soft purple
+
+    // Semantic
+    val Success = Color(0xFF22C55E)
+    val Warning = Color(0xFFF59E0B)
+    val Error   = Color(0xFFEF4444)
+    val ProGold = Color(0xFFE0B341)
+
+    // Light mode (supported, but Perplexity defaults dark)
+    val LightCanvas    = Color(0xFFFFFFFF)
+    val LightSurface1  = Color(0xFFF7F7F7)
+    val LightSurface2  = Color(0xFFEFEFEF)
+    val LightDivider   = Color(0xFFE5E5E5)
+    val LightTextPri   = Color(0xFF111111)
+    val LightTextSec   = Color(0xFF555555)
+    val TealLight      = Color(0xFF1591A3) // darker teal for WCAG AA on white
+}
+```
+
+Wire it into both schemes. Perplexity is dark-first; the light scheme preserves all teal accents but darkens the teal to `#1591A3` for WCAG on white.
+
+```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
+
+private val PerplexityDark = darkColorScheme(
+    primary        = PerplexityColors.Teal,
+    onPrimary      = PerplexityColors.Canvas,  // intentional: dark text on teal (WCAG)
+    background     = PerplexityColors.Canvas,
+    onBackground   = PerplexityColors.TextPrimary,
+    surface        = PerplexityColors.Surface1,
+    onSurface      = PerplexityColors.TextPrimary,
+    surfaceVariant = PerplexityColors.Surface2,
+    outline        = PerplexityColors.Divider,
+    error          = PerplexityColors.Error,
+)
+
+private val PerplexityLight = lightColorScheme(
+    primary        = PerplexityColors.TealLight,
+    onPrimary      = PerplexityColors.LightCanvas,
+    background     = PerplexityColors.LightCanvas,
+    onBackground   = PerplexityColors.LightTextPri,
+    surface        = PerplexityColors.LightSurface1,
+    onSurface      = PerplexityColors.LightTextPri,
+    surfaceVariant = PerplexityColors.LightSurface2,
+    outline        = PerplexityColors.LightDivider,
+    error          = PerplexityColors.Error,
+)
+
+@Composable
+fun PerplexityTheme(
+    dark: Boolean = isSystemInDarkTheme(),
+    content: @Composable () -> Unit,
+) = MaterialTheme(
+    colorScheme = if (dark) PerplexityDark else PerplexityLight,
+    typography = PerplexityTypography,
+    content = content,
+)
+```
+
+## 2. Typography
+
+Perplexity is a two-face system: **FK Grotesk Neue** (Florian Karsten — chrome/brand voice) and **Inter** (answer body). Drop both in `res/font/`; FK Grotesk Mono drives citation numerals. Fall back to **Inter** for both (closest geometric-humanist substitute that ships everywhere). Code uses JetBrains Mono.
+
+```kotlin
+// ui/theme/PerplexityType.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.FontWeight
+import androidx.compose.ui.unit.sp
+
+val FKGrotesk = FontFamily(
+    Font(R.font.fk_grotesk_neue_regular,  FontWeight.Normal),
+    Font(R.font.fk_grotesk_neue_medium,   FontWeight.Medium),
+    Font(R.font.fk_grotesk_neue_semibold, FontWeight.SemiBold),
+    Font(R.font.fk_grotesk_neue_bold,     FontWeight.Bold),
+)
+val FKGroteskMono = FontFamily(Font(R.font.fk_grotesk_mono_medium, FontWeight.Medium))
+val Inter = FontFamily(
+    Font(R.font.inter_regular,  FontWeight.Normal),
+    Font(R.font.inter_medium,   FontWeight.Medium),
+    Font(R.font.inter_semibold, FontWeight.SemiBold),
+    Font(R.font.inter_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 PerplexityText {
+    val Display     = TextStyle(FKGrotesk, fontWeight = FontWeight.Bold,     fontSize = 30.sp, lineHeight = 35.sp, letterSpacing = (-0.5).sp)
+    val Question    = TextStyle(FKGrotesk, fontWeight = FontWeight.SemiBold, fontSize = 22.sp, lineHeight = 28.sp, letterSpacing = (-0.3).sp)
+    val Section     = TextStyle(FKGrotesk, fontWeight = FontWeight.SemiBold, fontSize = 18.sp, lineHeight = 23.sp, letterSpacing = (-0.1).sp)
+    val Subsection  = TextStyle(FKGrotesk, fontWeight = FontWeight.SemiBold, fontSize = 16.sp, lineHeight = 21.sp)
+    val Body        = TextStyle(Inter,     fontWeight = FontWeight.Normal,   fontSize = 16.sp, lineHeight = 24.sp) // 1.5 — denser than Claude
+    val BodyBold    = TextStyle(Inter,     fontWeight = FontWeight.SemiBold, fontSize = 16.sp, lineHeight = 24.sp)
+    val ListItem    = TextStyle(Inter,     fontWeight = FontWeight.Normal,   fontSize = 16.sp, lineHeight = 24.sp)
+    val SourceTitle = TextStyle(Inter,     fontWeight = FontWeight.Medium,   fontSize = 13.sp, lineHeight = 17.sp)
+    val SourceDom   = TextStyle(Inter,     fontWeight = FontWeight.Normal,   fontSize = 11.sp, lineHeight = 14.sp)
+    val Citation    = TextStyle(FKGroteskMono, fontWeight = FontWeight.Medium, fontSize = 11.sp, lineHeight = 11.sp)
+    val SearchHint  = TextStyle(Inter,     fontWeight = FontWeight.Normal,   fontSize = 16.sp, lineHeight = 22.sp)
+    val Button      = TextStyle(FKGrotesk, fontWeight = FontWeight.SemiBold, fontSize = 15.sp, lineHeight = 15.sp)
+    val ProBadge    = TextStyle(FKGrotesk, fontWeight = FontWeight.Bold,     fontSize = 11.sp, lineHeight = 11.sp, letterSpacing = 0.2.sp)
+    val Tab         = TextStyle(FKGrotesk, fontWeight = FontWeight.Medium,   fontSize = 10.sp, lineHeight = 10.sp, letterSpacing = 0.2.sp)
+    val Meta        = TextStyle(Inter,     fontWeight = FontWeight.Normal,   fontSize = 12.sp, lineHeight = 16.sp)
+    val Caption     = TextStyle(Inter,     fontWeight = FontWeight.Normal,   fontSize = 11.sp, lineHeight = 14.sp)
+    val SenderLabel = TextStyle(FKGrotesk, fontWeight = FontWeight.Medium,   fontSize = 13.sp, lineHeight = 17.sp)
+    val GroupHeader = TextStyle(FKGrotesk, fontWeight = FontWeight.Bold,     fontSize = 11.sp, lineHeight = 13.sp, letterSpacing = 0.4.sp)
+    val CodeBlock   = TextStyle(JetBrainsMono, fontWeight = FontWeight.Normal, fontSize = 14.sp, lineHeight = 21.sp)
+    val CodeInline  = TextStyle(JetBrainsMono, fontWeight = FontWeight.Medium, fontSize = 14.sp, lineHeight = 20.sp)
+    val CodeLang    = TextStyle(JetBrainsMono, fontWeight = FontWeight.Normal, fontSize = 11.sp, lineHeight = 14.sp)
+}
+
+// Map onto Material 3 slots so stock components inherit the brand
+val PerplexityTypography = Typography(
+    headlineLarge = PerplexityText.Display,
+    titleLarge    = PerplexityText.Section,
+    titleMedium   = PerplexityText.Subsection,
+    bodyMedium    = PerplexityText.Body,
+    labelSmall    = PerplexityText.Tab,
+)
+```
+
+## 3. Signature Components
+
+### The Triple-Circle Brand Mark
+
+```kotlin
+import androidx.compose.foundation.Canvas
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.geometry.Offset
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.graphics.drawscope.Stroke
+import androidx.compose.ui.unit.Dp
+import androidx.compose.ui.unit.dp
+import kotlin.math.cos
+import kotlin.math.sin
+
+@Composable
+fun PerplexityMark(
+    size: Dp = 20.dp,
+    color: Color = PerplexityColors.Teal, // NEVER any color outside the teal scale
+    modifier: Modifier = Modifier,
+) {
+    Canvas(modifier.size(size)) {
+        val c = Offset(this.size.width / 2f, this.size.height / 2f)
+        val r = minOf(this.size.width, this.size.height) * 0.32f
+        val d = r * 0.65f
+        // Three overlapping circles in a triangular formation
+        val angles = floatArrayOf(-Math.PI.toFloat() / 2f, Math.PI.toFloat() / 6f, 5f * Math.PI.toFloat() / 6f)
+        angles.forEach { a ->
+            drawCircle(
+                color = color,
+                radius = r,
+                center = Offset(c.x + d * cos(a), c.y + d * sin(a)),
+                style = Stroke(width = r * 0.5f),
+            )
+        }
+    }
+}
+```
+
+### Search Input (the home of the app, with teal focus glow)
+
+```kotlin
+import androidx.compose.foundation.background
+import androidx.compose.foundation.border
+import androidx.compose.foundation.interaction.MutableInteractionSource
+import androidx.compose.foundation.layout.*
+import androidx.compose.foundation.shape.CircleShape
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.foundation.text.BasicTextField
+import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.filled.ArrowUpward
+import androidx.compose.material.icons.filled.AttachFile
+import androidx.compose.material3.Icon
+import androidx.compose.material3.Text
+import androidx.compose.runtime.*
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.draw.clip
+import androidx.compose.ui.focus.onFocusChanged
+import androidx.compose.ui.hapticfeedback.HapticFeedbackType
+import androidx.compose.ui.platform.LocalHapticFeedback
+
+@Composable
+fun SearchInput(
+    text: String,
+    onTextChange: (String) -> Unit,
+    onSubmit: () -> Unit,
+    onAttach: () -> Unit,
+    modifier: Modifier = Modifier,
+) {
+    var focused by remember { mutableStateOf(false) }
+    val canSend = text.trim().isNotEmpty()
+    val haptics = LocalHapticFeedback.current
+
+    Row(
+        modifier = modifier
+            .fillMaxWidth()
+            // Teal focus glow — the only "glow" in the app (Android has no live blur; a teal
+            // halo border is the analog of the iOS rgba(32,184,205,0.25) 4pt ring)
+            .then(if (focused) Modifier.border(4.dp, PerplexityColors.Teal.copy(alpha = 0.25f), RoundedCornerShape(28.dp)) else Modifier)
+            .clip(RoundedCornerShape(24.dp))
+            .background(PerplexityColors.Surface1)
+            .border(
+                width = if (focused) 1.5.dp else 1.dp,
+                color = if (focused) PerplexityColors.Teal else PerplexityColors.Surface3,
+                shape = RoundedCornerShape(24.dp),
+            )
+            .padding(horizontal = 18.dp),
+        verticalAlignment = Alignment.Bottom,
+        horizontalArrangement = Arrangement.spacedBy(8.dp),
+    ) {
+        BasicTextField(
+            value = text,
+            onValueChange = onTextChange,
+            textStyle = PerplexityText.SearchHint.copy(color = PerplexityColors.TextPrimary),
+            cursorBrush = androidx.compose.ui.graphics.SolidColor(PerplexityColors.Teal),
+            modifier = Modifier
+                .weight(1f)
+                .padding(vertical = 14.dp)
+                .onFocusChanged { focused = it.isFocused },
+            maxLines = 8,
+            decorationBox = { inner ->
+                if (text.isEmpty()) Text("Ask anything…", style = PerplexityText.SearchHint, color = PerplexityColors.TextTertiary)
+                inner()
+            },
+        )
+        Icon(
+            Icons.Filled.AttachFile, contentDescription = "Attach",
+            tint = PerplexityColors.TextSecondary,
+            modifier = Modifier.padding(bottom = 14.dp).size(18.dp)
+                .clickable(MutableInteractionSource(), indication = null, onClick = onAttach),
+        )
+        Box(
+            Modifier
+                .padding(bottom = 10.dp)
+                .size(36.dp)
+                .clip(CircleShape)
+                .background(if (canSend) PerplexityColors.Teal else PerplexityColors.Surface3)
+                .clickable(enabled = canSend) {
+                    haptics.performHapticFeedback(HapticFeedbackType.LongPress) // .medium
+                    onSubmit()
+                },
+            contentAlignment = Alignment.Center,
+        ) {
+            Icon(
+                Icons.Filled.ArrowUpward,
+                contentDescription = "Send",
+                tint = if (canSend) PerplexityColors.Canvas else PerplexityColors.TextTertiary, // dark on teal
+                modifier = Modifier.size(14.dp),
+            )
+        }
+    }
+}
+```
+
+### Source Card (horizontal scroll above every answer)
+
+```kotlin
+import androidx.compose.foundation.lazy.LazyRow
+import androidx.compose.foundation.lazy.itemsIndexed
+import androidx.compose.ui.layout.ContentScale
+import coil.compose.AsyncImage
+
+data class Source(val number: Int, val faviconUrl: String?, val domain: String, val title: String)
+
+@Composable
+fun SourceCard(source: Source, onClick: () -> Unit, modifier: Modifier = Modifier) {
+    Column(
+        modifier
+            .width(200.dp)
+            .height(80.dp)
+            .clip(RoundedCornerShape(12.dp))
+            .background(PerplexityColors.Surface1)
+            .border(1.dp, PerplexityColors.Surface3, RoundedCornerShape(12.dp))
+            .clickable(onClick = onClick)
+            .padding(12.dp),
+        verticalArrangement = Arrangement.spacedBy(6.dp),
+    ) {
+        Row(verticalAlignment = Alignment.CenterVertically, horizontalArrangement = Arrangement.spacedBy(6.dp)) {
+            AsyncImage(
+                model = source.faviconUrl,
+                contentDescription = null,
+                modifier = Modifier.size(16.dp).clip(RoundedCornerShape(3.dp)),
+                contentScale = ContentScale.Crop,
+            )
+            Text(source.domain, style = PerplexityText.SourceDom, color = PerplexityColors.TextSecondary, modifier = Modifier.weight(1f), maxLines = 1)
+            Box(
+                Modifier.clip(RoundedCornerShape(3.dp)).background(PerplexityColors.Surface2).padding(horizontal = 5.dp, vertical = 1.dp),
+            ) {
+                Text("${source.number}", style = PerplexityText.Citation.copy(fontWeight = FontWeight.Bold, fontSize = 10.sp), color = PerplexityColors.TextSecondary)
+            }
+        }
+        Text(source.title, style = PerplexityText.SourceTitle, color = PerplexityColors.TextPrimary, maxLines = 2)
+    }
+}
+
+@Composable
+fun SourceCardRow(sources: List<Source>, onSource: (Source) -> Unit, onShowAll: () -> Unit) {
+    LazyRow(
+        contentPadding = PaddingValues(horizontal = 16.dp),
+        horizontalArrangement = Arrangement.spacedBy(12.dp),
+    ) {
+        itemsIndexed(sources) { _, s -> SourceCard(s, { onSource(s) }) }
+        item {
+            Box(
+                Modifier
+                    .width(120.dp).height(80.dp)
+                    .clip(RoundedCornerShape(12.dp))
+                    .background(PerplexityColors.Surface2)
+                    .clickable(onClick = onShowAll),
+                contentAlignment = Alignment.Center,
+            ) {
+                Text("Show all ${sources.size} sources", style = PerplexityText.SourceDom, color = PerplexityColors.TextSecondary)
+            }
+        }
+    }
+}
+```
+
+## 4. Inline Citation Chips + Source-Card Scroll-To
+
+Perplexity's defining interaction: numbered `[1]` chips typeset *inline* within the answer prose (never a footer), each tapping through to its matching source card with a teal flash. iOS uses `ScrollViewReader.scrollTo`; Android uses a `LazyListState`/scroll-to-index plus an `Animatable` border flash on the target card.
+
+```kotlin
+import androidx.compose.animation.core.Animatable
+import androidx.compose.animation.core.tween
+
+@Composable
+fun CitationChip(
+    number: Int,
+    onTap: () -> Unit,
+    modifier: Modifier = Modifier,
+) {
+    var focused by remember { mutableStateOf(false) }
+    val haptics = LocalHapticFeedback.current
+
+    Box(
+        modifier
+            .padding(2.dp) // expands toward a ~32dp tap target
+            .clip(RoundedCornerShape(4.dp))
+            .background(if (focused) PerplexityColors.TealSoft else PerplexityColors.Surface2)
+            .border(1.dp, if (focused) PerplexityColors.Teal else PerplexityColors.Surface3, RoundedCornerShape(4.dp))
+            .clickable {
+                focused = true
+                haptics.performHapticFeedback(HapticFeedbackType.TextHandleMove) // .soft
+                onTap()
+            }
+            .padding(horizontal = 5.dp)
+            .heightIn(min = 18.dp),
+        contentAlignment = Alignment.Center,
+    ) {
+        Text(
+            "$number",
+            style = PerplexityText.Citation,
+            color = if (focused) PerplexityColors.Teal else PerplexityColors.TextSecondary,
+        )
+    }
+    // Caller resets `focused` ~300ms after the scroll completes
+}
+
+// Render answer prose with tappable chips: split markdown into text runs + [n] tokens and
+// emit a Text(...) interleaved with CitationChip(...) inside a FlowRow so they wrap inline.
+@Composable
+fun rememberCitationScroll(): Pair<LazyListState, suspend (Int) -> Unit> {
+    val state = androidx.compose.foundation.lazy.rememberLazyListState()
+    val flash = remember { Animatable(0f) }
+    val scrollTo: suspend (Int) -> Unit = { index ->
+        state.animateScrollToItem(index) // 400ms-feel ease handled by LazyList
+        flash.snapTo(1f); flash.animateTo(0f, tween(200)) // 200ms teal border flash on arrival
+    }
+    return state to scrollTo
+}
+```
+
+The streaming answer ends with a teal caret: a `6.dp × 16.dp` `TealBright` box blinking on a `rememberInfiniteTransition` at a 500ms interval (faster than Claude's 600ms), removed when the answer completes. The "Searching the web…" indicator (3 teal dots, 200ms stagger, 1200ms cycle, `SenderLabel` text trailing) shows immediately on submit and is replaced by `SourceCardRow`.
+
+## 5. Navigation
+
+Perplexity has a 4-tab bottom bar (Home / Discover / Library / Spaces). Use Material 3 `NavigationBar`; the iOS bar matches the canvas with **no blur on scroll**, so an opaque `Canvas` surface is exact (no translucency needed here). Active is off-white `#FAFAFA` with a teal indicator dot under the label; inactive `#6E6E6E`.
+
+```kotlin
+import androidx.compose.material.icons.filled.*
+
+@Composable
+fun PerplexityBottomBar(selected: Int, onSelect: (Int) -> Unit) {
+    val haptics = LocalHapticFeedback.current
+    NavigationBar(
+        containerColor = PerplexityColors.Canvas,
+        tonalElevation = 0.dp,
+    ) {
+        val items = listOf(
+            "Home"     to Icons.Filled.Search,
+            "Discover" to Icons.Filled.Explore,
+            "Library"  to Icons.Filled.Bookmarks,
+            "Spaces"   to Icons.Filled.Workspaces,
+        )
+        items.forEachIndexed { i, (label, icon) ->
+            val active = selected == i
+            NavigationBarItem(
+                selected = active,
+                onClick = {
+                    haptics.performHapticFeedback(HapticFeedbackType.TextHandleMove) // .selection
+                    onSelect(i)
+                },
+                icon = {
+                    Column(horizontalAlignment = Alignment.CenterHorizontally) {
+                        Icon(icon, contentDescription = label, modifier = Modifier.size(22.dp))
+                        Spacer(Modifier.height(4.dp))
+                        Box(
+                            Modifier.size(width = 16.dp, height = 2.dp)
+                                .background(if (active) PerplexityColors.Teal else Color.Transparent),
+                        )
+                    }
+                },
+                label = { Text(label, style = PerplexityText.Tab) },
+                colors = NavigationBarItemDefaults.colors(
+                    selectedIconColor = PerplexityColors.TextPrimary,   // off-white
+                    selectedTextColor = PerplexityColors.TextPrimary,
+                    unselectedIconColor = PerplexityColors.TextTertiary, // #6E6E6E
+                    unselectedTextColor = PerplexityColors.TextTertiary,
+                    indicatorColor = Color.Transparent, // no Material pill — Perplexity uses a teal dot
+                ),
+            )
+        }
+    }
+}
+```
+
+The conversation-history sidebar is a `ModalNavigationDrawer` (`ModalDrawerSheet`, `Canvas` background) with a full-width "+ New thread" button (`Surface1` fill, 1.dp `Surface3` border, 10.dp radius) followed by date-grouped thread rows (`GroupHeader` uppercase headers, 56.dp rows with `Inter` title + timestamp).
+
+## 6. Motion
+
+Perplexity motion is live and information-paced — slightly faster than Claude, restrained but responsive.
+
+| Moment | Compose recipe |
+|--------|----------------|
+| Send tap | circle scale 1 → 0.94 → 1 `tween(200)` + `HapticFeedbackType.LongPress` (medium); question slides up, "Searching…" fades in `tween(250)` |
+| Source cards appear | `LazyRow` items `animateItemPlacement` + per-item `slideInVertically(tween(350))` with 60ms stagger (cascade) |
+| Citation → source | `LazyListState.animateScrollToItem` + target card `Animatable` border flash `tween(200)` teal |
+| Streaming text | word-by-word `AnimatedVisibility`/`fadeIn` at ~60ms per word |
+| Streaming cursor | `rememberInfiniteTransition` alpha 1 → 0, 500ms |
+| Pro toggle | indicator `animateDpAsState` slide `tween(200)`, label color cross-fade, `.selection` haptic |
+| Pro Steps expand | `AnimatedVisibility(expandVertically(tween(300)))`, 30ms per-step stagger |
+| Tab switch | teal dot `fadeIn` `tween(200)`, `.selection` haptic |
+
+```kotlin
+// "Searching the web…" — three teal dots, 200ms stagger, 1200ms cycle
+@Composable
+fun SearchingIndicator() {
+    val t = rememberInfiniteTransition(label = "searching")
+    Row(verticalAlignment = Alignment.CenterVertically, horizontalArrangement = Arrangement.spacedBy(8.dp)) {
+        Row(horizontalArrangement = Arrangement.spacedBy(6.dp)) {
+            repeat(3) { i ->
+                val s by t.animateFloat(
+                    1f, 1.3f,
+                    infiniteRepeatable(tween(600, delayMillis = i * 200), RepeatMode.Reverse),
+                    label = "dot$i",
+                )
+                Box(
+                    Modifier.size(6.dp).graphicsLayer { scaleX = s; scaleY = s }
+                        .clip(CircleShape).background(PerplexityColors.Teal),
+                )
+            }
+        }
+        Text("Searching the web…", style = PerplexityText.SenderLabel, color = PerplexityColors.TextSecondary)
+    }
+}
+```
+
+Haptics: prefer `LocalHapticFeedback`. Use `HapticFeedbackType.LongPress` for the medium send impact and `HapticFeedbackType.TextHandleMove` for the soft citation tap; for finer control use `LocalView.current.performHapticFeedback(HapticFeedbackConstants.CLOCK_TICK)` or a `Vibrator` `VibrationEffect.createOneShot(8, ...)`.
+
+## 7. Icons
+
+Perplexity ships custom glyphs; the closest first-party set is `androidx.compose.material:material-icons-extended`. The triple-circle mark is NOT an icon — draw it via `Canvas` (§3) and never tint it outside the teal scale.
+
+| Purpose | SF Symbol (iOS) | Material Icon (Compose) |
+|---------|-----------------|--------------------------|
+| Send | `arrow.up` | `Icons.Filled.ArrowUpward` |
+| Attach | `paperclip` | `Icons.Filled.AttachFile` |
+| Copy | `doc.on.doc` | `Icons.Filled.ContentCopy` |
+| Share | `square.and.arrow.up` | `Icons.Filled.IosShare` |
+| Save | `bookmark` / `bookmark.fill` | `Icons.Outlined.BookmarkBorder` / `Icons.Filled.Bookmark` |
+| Pro sparkles | `sparkles` | `Icons.Filled.AutoAwesome` |
+| Step check | `checkmark.circle.fill` | `Icons.Filled.CheckCircle` |
+| Chevron up/down | `chevron.up` / `chevron.down` | `Icons.Filled.KeyboardArrowUp` / `KeyboardArrowDown` |
+| Related arrow | `arrow.right` | `Icons.Filled.ArrowForward` |
+| Home (tab) | `magnifyingglass` | `Icons.Filled.Search` |
+| Discover (tab) | `safari` | `Icons.Filled.Explore` |
+| Library (tab) | `books.vertical` | `Icons.Filled.Bookmarks` |
+| Spaces (tab) | `square.stack.3d.down.right` | `Icons.Filled.Workspaces` |
+| Sidebar | `line.3.horizontal` | `Icons.Filled.Menu` |
+| Overflow | `ellipsis` | `Icons.Filled.MoreHoriz` |
+| Settings | `gearshape` | `Icons.Filled.Settings` |
+| Show all sources | `chevron.right` | `Icons.Filled.ChevronRight` |
+
+## 8. Minimum SDK & Accessibility Notes
+
+- **minSdk 24** (Compose floor is 21; `Canvas` mark + infinite-transition motion are comfortable at 24). `compileSdk 34+`, Compose BOM `2024.09+`, Kotlin `2.0+`.
+- **Edge-to-edge**: call `enableEdgeToEdge()`; the near-black canvas wants light-content system bars (dark-content in light mode). The 56dp header sits below the camera cutout; the search input pins above the IME — use `Modifier.imePadding()` so it never hides behind the keyboard; the tab bar clears the gesture nav via `Scaffold` insets.
+- **Font scaling**: `sp` honors the user's font scale — keep it on answer body, all headings, list items, source titles, question titles, related questions. Code scales but cap it (`fontSize` clamp at 18sp) to prevent overflow. Pin layout-sensitive text (citation chips, 11sp source domains, 10sp tab labels, code-language label) by deriving from `dp` or `CompositionLocalProvider(LocalDensity provides Density(density, fontScale = 1f))`.
+- **TalkBack**: the answer block announces "Answer from Perplexity" then the body once; citation chips read "Citation 1, button — opens source 1: {title}" via `Modifier.semantics { ... }` + a custom "Open source" action so users reach the source without scrolling; source cards read "Source 1, {domain}, {title}, button". Announce "Generating answer" once on stream start and "Answer complete" on finalize — never per token.
+- **Touch targets**: Material guidance is 48.dp minimum. The 36.dp send circle gets a 48–56.dp hit area; the 18.dp citation chip is wrapped to a ~32–48.dp target via padding; source cards and related-question rows are full-row tappable.
+- **Contrast**: `#FAFAFA` on `#0A0A0A` exceeds WCAG AAA; `#A1A1A1` meets AA at 14sp+; `#6E6E6E` only at 18sp+ — do not use TextTertiary on small body text. Teal CTAs use Canvas `#0A0A0A` text (reversed from typical) for AA; in light mode the teal darkens to `#1591A3`.
+- **Reduce motion**: when `Settings.Global.ANIMATOR_DURATION_SCALE == 0`, skip the searching-dot pulse, the source-card cascade, the streaming-cursor blink, and the focus-ring glow — preserve haptics.
+- **Dynamic / dark color**: do **not** enable Material You `dynamicColorScheme()` — Perplexity's single teal accent and near-black canvas are brand-load-bearing and must not retint to the user's wallpaper. The triple-circle mark must stay within the teal scale (`#20B8CD` / `#3DD6EC` / `#1591A3`) in every theme. Light mode flips canvas/surface/text and darkens teal to `#1591A3` for WCAG; everything else is preserved.