designmd-forge 1.2.0

package/dist/data/designs/ios-apple-notes-android.md

@@ -0,0 +1,675 @@
+# Apple Notes (iOS) — Jetpack Compose Implementation Guide
+
+Companion to [DESIGN.md](DESIGN.md) — the framework-neutral spec. This file ports Apple Notes's paper-soft aesthetic to **Android with Jetpack Compose (Material 3)**: a color token object, a `Typography` set, paste-ready `@Composable`s, the iconic yellow folder glyph drawn with `Canvas`, 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 (Apple Notes' warm cream-paper canvas, the iconic 3D yellow tab-folder glyph, single Notes-Orange action color, the calmest body type in mobile) while making everything idiomatic Android — hierarchical `NavHost` navigation instead of `NavigationStack`, a `Canvas` `Path` for the folder glyph instead of SwiftUI `Canvas`, a translucent `Surface` instead of `.regularMaterial` (Android has no live blur), `sp`/`dp` instead of `pt`. Notes supports light and dark, so we wire a full Material 3 light + dark scheme; the cream canvas is deliberately *warmer than white*.
+
+Assumes Compose BOM `2024.09+`, Kotlin `2.0+`, `minSdk 24`, Material 3. No remote-image or color-extraction libraries are needed — Notes has no photography and no dynamic palette; the only "graphic" is the hand-drawn folder glyph.
+
+## 1. Color Tokens
+
+```kotlin
+// ui/theme/NotesColors.kt
+import androidx.compose.ui.graphics.Color
+
+object NotesColors {
+    // Canvas & Surfaces (Light — warm cream paper)
+    val Cream        = Color(0xFFFFFBED) // primary canvas — warmer than white by ~3%
+    val CreamSurf1   = Color(0xFFFAF6E3) // search field, focused section
+    val CreamSurf2   = Color(0xFFF2EDD6) // pressed rows, chip fills
+    val DividerLight = Color(0xFFEDEAD8) // warm hairline dividers
+
+    // Canvas & Surfaces (Dark)
+    val DarkPaper   = Color(0xFF1A1A1A) // true dark gray — preserves paper feel, NOT pure black
+    val DarkSurf1   = Color(0xFF262626)
+    val DarkSurf2   = Color(0xFF333333)
+    val DarkDivider = Color(0xFF2A2A2A)
+
+    // Brand
+    val Orange          = Color(0xFFF09A38) // FAB, folder stroke, cursor, link, selection accent
+    val OrangePressed   = Color(0xFFD87E1F)
+    val OrangeTint      = Color(0xFFFFF1DD) // selected-row / chip background
+    val FolderYellow    = Color(0xFFF5D773) // the iconic folder glyph fill
+    val FolderHighlight = Color(0xFFFAE8A0) // folder top-edge highlight (depth)
+    val HighlightYellow = Color(0xFFFFEB78) // text-selection highlight ONLY
+
+    // Text
+    val Ink       = Color(0xFF1C1C1E) // primary — titles, body, folder names
+    val Slate     = Color(0xFF8E8E93) // secondary — preview, date, metadata
+    val Mute      = Color(0xFFC7C7CC) // tertiary — placeholder, disabled
+    val SoftWhite = Color(0xFFF2F2F2) // primary text on dark
+
+    // Semantic
+    val Success = Color(0xFF34C759)
+    val Warning = Color(0xFFFFCC00)
+    val Error   = Color(0xFFFF3B30)
+    val InfoBlue = Color(0xFF0A84FF)
+    val LockYellow = Color(0xFFFFCC00)
+
+    // Highlight palette (text-selection colors inside the note body)
+    val HighlightGreen  = Color(0xFFB3E47B)
+    val HighlightBlue   = Color(0xFFA0D8FF)
+    val HighlightPink   = Color(0xFFFFB3DB)
+    val HighlightPurple = Color(0xFFD4B3FF)
+}
+```
+
+Notes supports light and dark equally — wire both Material 3 schemes. The cream/dark-paper canvas and the single Orange accent carry the brand; the folder yellow is glyph-only and never a scheme role.
+
+```kotlin
+// ui/theme/Theme.kt
+import androidx.compose.material3.lightColorScheme
+import androidx.compose.material3.darkColorScheme
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.foundation.isSystemInDarkTheme
+
+private val NotesLight = lightColorScheme(
+    primary        = NotesColors.Orange,
+    onPrimary      = Color.White,
+    background     = NotesColors.Cream,          // warm cream, never #FFFFFF
+    onBackground   = NotesColors.Ink,
+    surface        = NotesColors.Cream,
+    onSurface      = NotesColors.Ink,
+    surfaceVariant = NotesColors.CreamSurf1,
+    outline        = NotesColors.DividerLight,
+    error          = NotesColors.Error,
+)
+
+private val NotesDark = darkColorScheme(
+    primary        = NotesColors.Orange,         // unchanged across light/dark
+    onPrimary      = Color.White,
+    background     = NotesColors.DarkPaper,       // true dark gray, not pure black
+    onBackground   = NotesColors.SoftWhite,
+    surface        = NotesColors.DarkPaper,
+    onSurface      = NotesColors.SoftWhite,
+    surfaceVariant = NotesColors.DarkSurf1,
+    outline        = NotesColors.DarkDivider,
+    error          = NotesColors.Error,
+)
+
+@Composable
+fun NotesTheme(
+    darkTheme: Boolean = isSystemInDarkTheme(),
+    content: @Composable () -> Unit,
+) = MaterialTheme(
+    colorScheme = if (darkTheme) NotesDark else NotesLight,
+    typography  = NotesTypography,
+    content     = content,
+)
+```
+
+## 2. Typography
+
+Apple Notes is 100% SF Pro — including the rare SF Pro Display **Heavy (800)** on the large "Notes" nav title and the calm SF Pro Text 17pt/1.5 body. SF Pro is unavailable on Android — use the system font (Roboto), reserving a bundled `Inter` for a tighter metric match. The note body's generous 1.5 line-height (25sp at 17sp) is the centerpiece — preserve it exactly. Honor font scaling everywhere (Notes skews older-demographic).
+
+```kotlin
+// ui/theme/NotesType.kt
+import androidx.compose.material3.Typography
+import androidx.compose.ui.text.TextStyle
+import androidx.compose.ui.text.font.FontFamily
+import androidx.compose.ui.text.font.FontWeight
+import androidx.compose.ui.unit.sp
+
+private val SF = FontFamily.Default          // swap to FontFamily(Font(R.font.inter_…))
+private val SFMono = FontFamily.Monospace    // code-formatted text inside notes
+
+// Named ramp — mirrors DESIGN.md §3 exactly (pt → sp 1:1)
+object NotesText {
+    val LargeNav    = TextStyle(SF, fontWeight = FontWeight.Black,    fontSize = 34.sp, lineHeight = 37.sp, letterSpacing = (-0.4).sp) // Heavy (800)
+    val FolderSec   = TextStyle(SF, fontWeight = FontWeight.Bold,     fontSize = 22.sp, lineHeight = 26.sp, letterSpacing = (-0.3).sp)
+    val RowTitle    = TextStyle(SF, fontWeight = FontWeight.SemiBold, fontSize = 16.sp, lineHeight = 21.sp, letterSpacing = (-0.1).sp)
+    val RowPreview  = TextStyle(SF, fontWeight = FontWeight.Normal,   fontSize = 14.sp, lineHeight = 19.sp)
+    val RowDate     = TextStyle(SF, fontWeight = FontWeight.Normal,   fontSize = 12.sp, lineHeight = 16.sp)
+    val FolderRow   = TextStyle(SF, fontWeight = FontWeight.Normal,   fontSize = 17.sp, lineHeight = 22.sp)
+    val BodyTitle   = TextStyle(SF, fontWeight = FontWeight.SemiBold, fontSize = 20.sp, lineHeight = 26.sp, letterSpacing = (-0.2).sp)
+    val BodyHeading = TextStyle(SF, fontWeight = FontWeight.SemiBold, fontSize = 17.sp, lineHeight = 24.sp)
+    val Body        = TextStyle(SF, fontWeight = FontWeight.Normal,   fontSize = 17.sp, lineHeight = 25.sp) // 1.5× — Apple's calmest body
+    val BodyMono    = TextStyle(SFMono, fontWeight = FontWeight.Normal, fontSize = 15.sp, lineHeight = 22.sp)
+    val TagChip     = TextStyle(SF, fontWeight = FontWeight.Medium,   fontSize = 14.sp, lineHeight = 14.sp)
+    val Toolbar     = TextStyle(SF, fontWeight = FontWeight.Medium,   fontSize = 11.sp, lineHeight = 11.sp, letterSpacing = 0.1.sp)
+    val Button      = TextStyle(SF, fontWeight = FontWeight.SemiBold, fontSize = 17.sp, lineHeight = 17.sp)
+    val SearchHint  = TextStyle(SF, fontWeight = FontWeight.Normal,   fontSize = 17.sp, lineHeight = 17.sp)
+}
+
+// Map onto Material 3 slots so stock components inherit the brand
+val NotesTypography = Typography(
+    headlineLarge = NotesText.LargeNav,
+    headlineSmall = NotesText.FolderSec,
+    titleMedium   = NotesText.RowTitle,
+    bodyLarge     = NotesText.Body,
+    bodyMedium    = NotesText.RowPreview,
+    labelLarge    = NotesText.Button,
+    labelSmall    = NotesText.Toolbar,
+)
+```
+
+## 3. Signature Components
+
+### Yellow Folder Glyph (the iconic mark)
+
+Apple's cross-app yellow tab-folder, drawn with a Compose `Canvas` `Path` — fill `#F5D773`, 1dp `#F09A38` stroke, a 0.5dp warm top-edge highlight, and a subtle 2° forward tilt for the hand-painted depth illusion.
+
+```kotlin
+import androidx.compose.foundation.Canvas
+import androidx.compose.foundation.layout.size
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.rotate
+import androidx.compose.ui.geometry.Offset
+import androidx.compose.ui.graphics.Path
+import androidx.compose.ui.graphics.drawscope.Stroke
+import androidx.compose.ui.unit.Dp
+import androidx.compose.ui.unit.dp
+
+@Composable
+fun FolderGlyph(modifier: Modifier = Modifier, size: Dp = 24.dp) {
+    Canvas(
+        modifier
+            .size(width = size, height = size * 0.78f)
+            .rotate(-2f), // subtle forward tilt — physical-folder feel
+    ) {
+        val w = this.size.width
+        val h = this.size.height
+        val tabH = h * 0.18f
+        val tabW = w * 0.45f
+        val top = tabH
+
+        val folder = Path().apply {
+            moveTo(0f, top)
+            lineTo(0f, h)
+            lineTo(w, h)
+            lineTo(w, top - 2f)
+            lineTo(tabW + 6f, top - 2f)
+            cubicTo(tabW + 4f, 0f, tabW + 2f, 0f, tabW, 0f)
+            lineTo(4f, 0f)
+            cubicTo(2f, 0f, 0f, 2f, 0f, 4f)
+            close()
+        }
+        drawPath(folder, color = NotesColors.FolderYellow)
+        drawPath(folder, color = NotesColors.Orange, style = Stroke(width = 1.dp.toPx()))
+        // Top-edge highlight for depth
+        drawLine(
+            color = NotesColors.FolderHighlight,
+            start = Offset(6f, top + 1f),
+            end = Offset(w - 6f, top + 1f),
+            strokeWidth = 0.5.dp.toPx(),
+        )
+    }
+}
+```
+
+### Note Row (the three-line centerpiece)
+
+```kotlin
+import androidx.compose.foundation.background
+import androidx.compose.foundation.clickable
+import androidx.compose.foundation.interaction.MutableInteractionSource
+import androidx.compose.foundation.interaction.collectIsPressedAsState
+import androidx.compose.foundation.layout.*
+import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.filled.PushPin
+import androidx.compose.material3.Icon
+import androidx.compose.material3.Text
+import androidx.compose.runtime.*
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.draw.scale
+import androidx.compose.ui.text.style.TextOverflow
+
+@Composable
+fun NoteRow(
+    title: String,
+    preview: String,
+    date: String,
+    isPinned: Boolean,
+    onClick: () -> Unit,
+    modifier: Modifier = Modifier,
+) {
+    val interaction = remember { MutableInteractionSource() }
+    val pressed by interaction.collectIsPressedAsState()
+    val scale by androidx.compose.animation.core.animateFloatAsState(
+        if (pressed) 0.99f else 1f, label = "rowScale")
+    val haptics = androidx.compose.ui.platform.LocalHapticFeedback.current
+
+    Column(
+        modifier = modifier
+            .fillMaxWidth()
+            .scale(scale)
+            .background(if (isPinned) NotesColors.CreamSurf1 else NotesColors.Cream)
+            .clickable(interaction, indication = null) {
+                haptics.performHapticFeedback(
+                    androidx.compose.ui.hapticfeedback.HapticFeedbackType.TextHandleMove) // ~iOS .selection
+                onClick()
+            },
+    ) {
+        Column(Modifier.padding(start = 16.dp, end = 16.dp, top = 16.dp).heightIn(min = 68.dp)) {
+            Row(verticalAlignment = Alignment.CenterVertically,
+                horizontalArrangement = Arrangement.spacedBy(6.dp)) {
+                if (isPinned) {
+                    Icon(Icons.Filled.PushPin, contentDescription = "Pinned",
+                        tint = NotesColors.Orange, modifier = Modifier.size(11.dp))
+                }
+                Text(title, style = NotesText.RowTitle, color = NotesColors.Ink,
+                    maxLines = 1, overflow = TextOverflow.Ellipsis)
+            }
+            Text(preview, style = NotesText.RowPreview, color = NotesColors.Slate,
+                maxLines = 1, overflow = TextOverflow.Ellipsis,
+                modifier = Modifier.padding(top = 4.dp))
+            Text(date, style = NotesText.RowDate, color = NotesColors.Slate,
+                modifier = Modifier.padding(top = 2.dp))
+        }
+        Box(Modifier.fillMaxWidth().height(0.5.dp).background(NotesColors.DividerLight))
+    }
+}
+```
+
+Swipe actions (Pin / Add to Folder / Delete) use Material 3 `SwipeToDismissBox` with a custom background lane: Pin = `NotesColors.Orange`, Add to Folder = `Slate`, Delete = `Error`.
+
+### Folder Row
+
+```kotlin
+import androidx.compose.material.icons.automirrored.filled.KeyboardArrowRight
+import androidx.compose.material.icons.filled.AutoAwesome
+
+@Composable
+fun FolderRow(
+    name: String,
+    count: Int,
+    isSmart: Boolean = false,
+    onClick: () -> Unit,
+    modifier: Modifier = Modifier,
+) {
+    Row(
+        modifier = modifier
+            .fillMaxWidth()
+            .height(44.dp)
+            .background(NotesColors.Cream)
+            .clickable(onClick = onClick)
+            .padding(horizontal = 16.dp),
+        verticalAlignment = Alignment.CenterVertically,
+        horizontalArrangement = Arrangement.spacedBy(12.dp),
+    ) {
+        if (isSmart) {
+            Icon(Icons.Filled.AutoAwesome, contentDescription = null,
+                tint = NotesColors.Orange, modifier = Modifier.size(14.dp))
+        }
+        FolderGlyph(size = 24.dp)
+        Text(name, style = NotesText.FolderRow, color = NotesColors.Ink,
+            modifier = Modifier.weight(1f))
+        Text("$count", style = NotesText.FolderRow, color = NotesColors.Slate)
+        Icon(Icons.AutoMirrored.Filled.KeyboardArrowRight, contentDescription = null,
+            tint = NotesColors.Slate, modifier = Modifier.size(16.dp))
+    }
+}
+```
+
+### New Note FAB (orange-tinted shadow)
+
+The orange-tinted glow (`rgba(240,154,56,0.30) 0 4px 12px`) is non-negotiable brand — set the `Modifier.shadow` `spotColor`/`ambientColor` to Notes Orange, never neutral.
+
+```kotlin
+import androidx.compose.animation.core.Animatable
+import androidx.compose.foundation.shape.CircleShape
+import androidx.compose.material.icons.filled.Edit
+import androidx.compose.ui.draw.clip
+import androidx.compose.ui.draw.shadow
+import androidx.compose.ui.hapticfeedback.HapticFeedbackType
+import androidx.compose.ui.platform.LocalHapticFeedback
+import kotlinx.coroutines.launch
+
+@Composable
+fun NewNoteFab(onClick: () -> Unit, modifier: Modifier = Modifier) {
+    val haptics = LocalHapticFeedback.current
+    val scope = rememberCoroutineScope()
+    val scale = remember { Animatable(1f) }
+
+    Box(
+        modifier = modifier
+            .size(56.dp)
+            .scale(scale.value)
+            .shadow(
+                elevation = 12.dp,
+                shape = CircleShape,
+                spotColor = NotesColors.Orange.copy(alpha = 0.30f),   // orange-tinted, NOT neutral
+                ambientColor = NotesColors.Orange.copy(alpha = 0.30f),
+            )
+            .clip(CircleShape)
+            .background(NotesColors.Orange)
+            .clickable {
+                haptics.performHapticFeedback(HapticFeedbackType.LongPress) // ~iOS .medium impact
+                scope.launch {
+                    scale.animateTo(0.95f, androidx.compose.animation.core.tween(80))
+                    scale.animateTo(1.05f, androidx.compose.animation.core.spring(
+                        dampingRatio = 0.5f, stiffness = 500f))
+                    scale.animateTo(1f, androidx.compose.animation.core.spring())
+                }
+                onClick()
+            },
+        contentAlignment = Alignment.Center,
+    ) {
+        Icon(Icons.Filled.Edit, contentDescription = "New note",
+            tint = Color.White, modifier = Modifier.size(24.dp))
+    }
+}
+```
+
+### Primary CTA
+
+```kotlin
+import androidx.compose.foundation.shape.RoundedCornerShape
+
+@Composable
+fun NotesPrimaryButton(label: String, onClick: () -> Unit, modifier: Modifier = Modifier) {
+    val interaction = remember { MutableInteractionSource() }
+    val pressed by interaction.collectIsPressedAsState()
+    val scale by androidx.compose.animation.core.animateFloatAsState(
+        if (pressed) 0.98f else 1f, label = "ctaScale")
+    val haptics = LocalHapticFeedback.current
+
+    Box(
+        modifier = modifier
+            .fillMaxWidth()
+            .heightIn(min = 44.dp)
+            .scale(scale)
+            .clip(RoundedCornerShape(12.dp))
+            .background(if (pressed) NotesColors.OrangePressed else NotesColors.Orange)
+            .clickable(interaction, indication = null) {
+                haptics.performHapticFeedback(HapticFeedbackType.TextHandleMove) // ~iOS .light impact
+                onClick()
+            }
+            .padding(horizontal = 24.dp, vertical = 12.dp),
+        contentAlignment = Alignment.Center,
+    ) {
+        Text(label, style = NotesText.Button, color = Color.White)
+    }
+}
+```
+
+### Tag Chip
+
+```kotlin
+@Composable
+fun TagChip(name: String, isSelected: Boolean, onClick: () -> Unit) {
+    val haptics = LocalHapticFeedback.current
+    Row(
+        modifier = Modifier
+            .height(32.dp)
+            .clip(RoundedCornerShape(16.dp))
+            .background(if (isSelected) NotesColors.Orange else NotesColors.OrangeTint)
+            .clickable {
+                haptics.performHapticFeedback(HapticFeedbackType.TextHandleMove) // ~iOS .selection
+                onClick()
+            }
+            .padding(horizontal = 12.dp, vertical = 6.dp),
+        verticalAlignment = Alignment.CenterVertically,
+        horizontalArrangement = Arrangement.spacedBy(4.dp),
+    ) {
+        Text("#", style = NotesText.TagChip,
+            color = if (isSelected) Color.White else NotesColors.Orange)
+        Text(name, style = NotesText.TagChip,
+            color = if (isSelected) Color.White else NotesColors.Orange)
+    }
+}
+```
+
+### Search Bar
+
+```kotlin
+import androidx.compose.foundation.border
+import androidx.compose.foundation.text.BasicTextField
+import androidx.compose.material.icons.filled.Mic
+import androidx.compose.material.icons.filled.Search
+
+@Composable
+fun NotesSearchBar(value: String, onValueChange: (String) -> Unit) {
+    var focused by remember { mutableStateOf(false) }
+    Row(
+        modifier = Modifier
+            .fillMaxWidth()
+            .height(36.dp)
+            .clip(RoundedCornerShape(10.dp))
+            .background(NotesColors.CreamSurf1)
+            .border(
+                width = if (focused) 2.dp else 0.dp,
+                color = if (focused) NotesColors.Orange else Color.Transparent,
+                shape = RoundedCornerShape(10.dp),
+            )
+            .padding(horizontal = 12.dp),
+        verticalAlignment = Alignment.CenterVertically,
+        horizontalArrangement = Arrangement.spacedBy(8.dp),
+    ) {
+        Icon(Icons.Filled.Search, contentDescription = null,
+            tint = NotesColors.Slate, modifier = Modifier.size(14.dp))
+        Box(Modifier.weight(1f)) {
+            if (value.isEmpty()) {
+                Text("Search", style = NotesText.SearchHint, color = NotesColors.Slate)
+            }
+            BasicTextField(
+                value = value,
+                onValueChange = onValueChange,
+                textStyle = NotesText.Body.copy(color = NotesColors.Ink),
+                singleLine = true,
+                cursorBrush = androidx.compose.ui.graphics.SolidColor(NotesColors.Orange),
+                modifier = Modifier.fillMaxWidth()
+                    .onFocusChanged { focused = it.isFocused },
+            )
+        }
+        Icon(Icons.Filled.Mic, contentDescription = "Voice search",
+            tint = NotesColors.Slate, modifier = Modifier.size(14.dp))
+    }
+}
+```
+
+### Checklist Item
+
+```kotlin
+import androidx.compose.material.icons.filled.Check
+import androidx.compose.ui.text.style.TextDecoration
+
+@Composable
+fun ChecklistItem(text: String, checked: Boolean, onToggle: () -> Unit) {
+    val haptics = LocalHapticFeedback.current
+    val circleScale = remember { Animatable(if (checked) 1f else 0f) }
+    LaunchedEffect(checked) {
+        circleScale.animateTo(if (checked) 1f else 0f,
+            androidx.compose.animation.core.tween(200))
+    }
+    val alpha by androidx.compose.animation.core.animateFloatAsState(
+        if (checked) 0.6f else 1f,
+        androidx.compose.animation.core.tween(300), label = "checkAlpha")
+
+    Row(verticalAlignment = Alignment.CenterVertically,
+        horizontalArrangement = Arrangement.spacedBy(12.dp)) {
+        Box(
+            Modifier
+                .size(24.dp)
+                .border(1.5.dp, NotesColors.Slate, CircleShape)
+                .clickable(
+                    interactionSource = remember { MutableInteractionSource() },
+                    indication = null,
+                ) {
+                    haptics.performHapticFeedback(HapticFeedbackType.LongPress) // ~iOS .success
+                    onToggle()
+                },
+            contentAlignment = Alignment.Center,
+        ) {
+            Box(
+                Modifier
+                    .size(24.dp)
+                    .scale(circleScale.value)
+                    .clip(CircleShape)
+                    .background(NotesColors.Orange),
+                contentAlignment = Alignment.Center,
+            ) {
+                if (circleScale.value > 0.5f) {
+                    Icon(Icons.Filled.Check, contentDescription = null,
+                        tint = Color.White, modifier = Modifier.size(12.dp))
+                }
+            }
+        }
+        Text(
+            text,
+            style = NotesText.Body,
+            color = if (checked) NotesColors.Slate else NotesColors.Ink,
+            textDecoration = if (checked) TextDecoration.LineThrough else null,
+            modifier = Modifier.androidx.compose.ui.draw.alpha(alpha),
+        )
+    }
+}
+```
+
+### Pinned Card (horizontal scroll)
+
+```kotlin
+@Composable
+fun PinnedCard(title: String, preview: String, onClick: () -> Unit) {
+    Column(
+        modifier = Modifier
+            .size(width = 160.dp, height = 96.dp)
+            .clip(RoundedCornerShape(10.dp))
+            .background(NotesColors.CreamSurf1)
+            .clickable(onClick = onClick)
+            .padding(12.dp),
+        verticalArrangement = Arrangement.spacedBy(4.dp),
+    ) {
+        Row(verticalAlignment = Alignment.Top) {
+            Text(title, style = NotesText.RowTitle.copy(fontSize = 15.sp),
+                color = NotesColors.Ink, maxLines = 1, overflow = TextOverflow.Ellipsis,
+                modifier = Modifier.weight(1f))
+            Icon(Icons.Filled.PushPin, contentDescription = "Pinned",
+                tint = NotesColors.Orange, modifier = Modifier.size(11.dp))
+        }
+        Text(preview, style = NotesText.RowDate.copy(fontSize = 12.sp),
+            color = NotesColors.Slate, maxLines = 3, overflow = TextOverflow.Ellipsis)
+    }
+}
+```
+
+## 4. The Note Editor Canvas (the paper)
+
+Apple Notes' calmest, most distinctive surface: a chrome-free editable canvas — no card, no border, just the cream paper with the orange blinking cursor and 1.5-line-height body. iOS uses a `UITextView`; Compose uses a `BasicTextField` with no decoration.
+
+```kotlin
+import androidx.compose.foundation.text.BasicTextField
+import androidx.compose.ui.graphics.SolidColor
+import androidx.compose.ui.text.input.TextFieldValue
+
+@Composable
+fun NoteEditor(
+    title: TextFieldValue,
+    body: TextFieldValue,
+    onTitleChange: (TextFieldValue) -> Unit,
+    onBodyChange: (TextFieldValue) -> Unit,
+) {
+    Column(
+        Modifier
+            .fillMaxSize()
+            .background(NotesColors.Cream) // the canvas IS the paper — no card, no border
+            .padding(horizontal = 20.dp, vertical = 16.dp),
+    ) {
+        BasicTextField(
+            value = title,
+            onValueChange = onTitleChange,
+            textStyle = NotesText.BodyTitle.copy(color = NotesColors.Ink),
+            cursorBrush = SolidColor(NotesColors.Orange), // orange cursor
+            modifier = Modifier.fillMaxWidth(),
+        )
+        Spacer(Modifier.height(4.dp))
+        BasicTextField(
+            value = body,
+            onValueChange = onBodyChange,
+            textStyle = NotesText.Body.copy(color = NotesColors.Ink), // 17sp / 25sp line-height
+            cursorBrush = SolidColor(NotesColors.Orange),
+            modifier = Modifier.fillMaxSize(),
+        )
+    }
+}
+```
+
+Compose's `BasicTextField` cursor blink (≈500ms) approximates iOS's 600ms orange cursor — the `SolidColor(NotesColors.Orange)` `cursorBrush` is the load-bearing detail. The system text-selection handles are tinted via `LocalTextSelectionColors` to `NotesColors.HighlightYellow` (the highlight color is reserved exclusively for selection — never a UI fill).
+
+## 5. Navigation (no tab bar — hierarchical)
+
+Apple Notes has **no bottom tab bar** — navigation is strictly hierarchical: Folders → Note list → Editor. Do **not** add a Material `NavigationBar`. Use Navigation Compose with a standard slide transition; tint every top-bar action Notes Orange.
+
+```kotlin
+import androidx.navigation.compose.NavHost
+import androidx.navigation.compose.composable
+import androidx.navigation.compose.rememberNavController
+
+@Composable
+fun NotesApp() {
+    val nav = rememberNavController()
+    NavHost(navController = nav, startDestination = "folders") {
+        composable("folders")  { FoldersScreen(onOpen = { nav.navigate("notes/$it") }) }
+        composable("notes/{folderId}") { NotesListScreen(onOpen = { nav.navigate("editor/$it") }) }
+        composable("editor/{noteId}")  { NoteEditorScreen() }
+    }
+}
+```
+
+iOS push/pop maps to `androidx.navigation` enter/exit transitions: `slideInHorizontally { it } + fadeIn()` / `slideOutHorizontally { -it / 4 } + fadeOut()`, ~350ms — the standard platform slide. The collapsing large title ("Notes" 34sp Heavy → 17sp inline) maps to `LargeTopAppBar` + `TopAppBarDefaults.exitUntilCollapsedScrollBehavior()`. When content scrolls under it, swap the bar container to a 92%-opaque cream `Surface` (no live blur on Android).
+
+## 6. Motion
+
+| Moment | Compose recipe |
+|--------|----------------|
+| Note row tap | `animateFloatAsState` 1 → 0.99; then nav `slideInHorizontally` editor (~350ms); `HapticFeedbackType.TextHandleMove` (~iOS `.selection`) |
+| New Note FAB tap | `Animatable` 0.95 → 1.05 → 1 ~250ms `spring(dampingRatio = 0.5f)`; `HapticFeedbackType.LongPress` (~`.medium`) |
+| Checklist toggle | circle `Animatable` scale 0 → 1 over 200ms, text strike + alpha 1 → 0.6 over 300ms; `HapticFeedbackType.LongPress` (~`.success`) |
+| Pin / Unpin swipe | `SwipeToDismissBox` reveals Pin lane; `HapticFeedbackType.TextHandleMove`; row animates between sections ~400ms `spring` |
+| Cursor blink | `BasicTextField` default (~500ms) ≈ iOS 600ms orange cursor |
+| Search field focus | `animateDpAsState` border 0 → 2dp Orange; Cancel slides in `slideInHorizontally` ~250ms |
+| Folder glyph tilt | static -2° `Modifier.rotate`; optional `SensorManager` parallax (clamp ≤5°) |
+
+```kotlin
+// FAB bounce — exact 0.95 → 1.05 → 1
+@Composable
+fun rememberFabBounce(): Pair<Animatable<Float, *>, suspend () -> Unit> {
+    val scale = remember { Animatable(1f) }
+    val play: suspend () -> Unit = {
+        scale.animateTo(0.95f, tween(80))
+        scale.animateTo(1.05f, spring(dampingRatio = 0.5f, stiffness = 500f))
+        scale.animateTo(1f, spring())
+    }
+    return scale to play
+}
+```
+
+Haptics: prefer `LocalHapticFeedback`. For richer control use `LocalView.current.performHapticFeedback(HapticFeedbackConstants.CONTEXT_CLICK)` (API 30+) — map `.light` (CTA) to `VibrationEffect.createOneShot(8, ...)`, `.medium` (FAB) to `VibrationEffect.createOneShot(15, ...)`, `.selection` (tag chip, row tap, pin swipe) to a short tick, and `.success` (checklist complete) to a double-buzz `VibrationEffect.createWaveform(longArrayOf(0, 40, 60, 40), -1)`, mirroring iOS `.notificationOccurred(.success)`.
+
+## 7. Icons
+
+Apple Notes uses SF Symbols; the closest first-party set is `androidx.compose.material:material-icons-extended`. The iconic **yellow folder glyph** and the **checklist circle** are hand-drawn (see §3) rather than icons. Ship any non-matching glyph as a vector drawable via `ImageVector.vectorResource(R.drawable.…)`.
+
+| Component | SF Symbol (iOS) | Material Icon (Compose) |
+|-----------|-----------------|--------------------------|
+| New Note FAB | `square.and.pencil` | `Icons.Filled.Edit` |
+| Pin indicator | `pin.fill` | `Icons.Filled.PushPin` |
+| Smart folder | `sparkles` | `Icons.Filled.AutoAwesome` |
+| Search | `magnifyingglass` | `Icons.Filled.Search` |
+| Voice search | `mic.fill` | `Icons.Filled.Mic` |
+| Clear search | `xmark.circle.fill` | `Icons.Filled.Cancel` |
+| Checklist (empty) | custom circle (1.5dp stroke) | custom composable (see §3) |
+| Checklist (filled) | `checkmark` over filled circle | `Icons.Filled.Check` over circle |
+| Share | `square.and.arrow.up` | `Icons.Filled.IosShare` |
+| More menu | `ellipsis.circle` | `Icons.Filled.MoreHoriz` |
+| Back chevron | `chevron.left` | `Icons.AutoMirrored.Filled.ArrowBackIos` |
+| Row chevron | `chevron.right` | `Icons.AutoMirrored.Filled.KeyboardArrowRight` |
+| Photo (toolbar) | `camera` | `Icons.Filled.PhotoCamera` |
+| Checklist (toolbar) | `checklist` | `Icons.Filled.Checklist` |
+| Table (toolbar) | `tablecells` | `Icons.Filled.TableChart` |
+| Format (toolbar) | `textformat` | `Icons.Filled.TextFormat` |
+| Lock | `lock.fill` | `Icons.Filled.Lock` |
+| Folder glyph | — | custom `Canvas` path (see §3), yellow `#F5D773` + orange `#F09A38` |
+
+## 8. Minimum SDK & Accessibility Notes
+
+- **minSdk 24** (Compose floor is 21; `Canvas` folder glyph + `BasicTextField` + Navigation Compose are 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 (dark icons) system bars; the dark-paper canvas wants light-content. Apply `Scaffold` insets / `Modifier.windowInsetsPadding(WindowInsets.systemBars)` so the FAB sits 16.dp above the gesture nav and the large title clears the status bar / display cutout.
+- **Font scaling**: Notes is the most Dynamic-Type-sensitive app on the platform (older-demographic skew) — `sp` honors the user's font scale; keep it on note titles, body, preview, date, and folder names. The body must stay at `17sp × scale` with the 1.5 line-height intact at every size (the calmness scales up, never breaks). Even tag chips should scale (wrap horizontally rather than truncate). Only pin truly layout-locked text (11sp toolbar labels, 17sp search placeholder).
+- **TalkBack**: read a note row as one node — `Modifier.semantics(mergeDescendants = true) { contentDescription = "$title, $preview, $date" }`; a folder row as `"$name folder, $count notes"`; a checklist item as `"${if (checked) "Checked" else "Unchecked"}: $text, double tap to toggle"`. The folder glyph is decorative — `contentDescription = null` (the row label carries meaning).
+- **Touch targets**: Material guidance is 48.dp minimum. The note row (84dp) and FAB (56dp) are well clear; bump the 24.dp checklist circle, 32.dp tag chips, and 14–16.dp toolbar/chevron glyphs to a 48.dp hit box via padding.
+- **Contrast**: Ink `#1C1C1E` on cream `#FFFBED` meets WCAG AAA. Slate `#8E8E93` on cream meets AA only at ≥18sp — for the 12sp date and 14sp preview, this is below AA; raise to Medium (500) weight if strict AA compliance is required (Apple ships it at Regular by design).
+- **Reduce motion**: when `Settings.Global.ANIMATOR_DURATION_SCALE == 0f`, skip the FAB scale bounce, the checklist circle-fill scale, and the folder-glyph parallax tilt — apply the end state instantly.
+- **Locked notes**: implement biometric unlock with `androidx.biometric:biometric` (`BiometricPrompt`); fall back to device credential after 3 failed attempts. Render the locked row with a 24.dp lock glyph + "This note is locked." in `NotesText.RowPreview` italic instead of the preview.
+- **Dynamic color**: do **not** enable Material You `dynamicColorScheme()` — the cream `#FFFBED` paper canvas, Notes Orange `#F09A38`, and the iconic Folder Yellow `#F5D773` are signature cross-app Apple brand assets (Finder, iCloud Drive, Files share the same folder) and must not recolor to the user's wallpaper.