designmd-forge 1.2.0

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

@@ -0,0 +1,575 @@
+# Notion (iOS) — Jetpack Compose Implementation Guide
+
+Companion to [DESIGN.md](DESIGN.md) — the framework-neutral spec. This file ports Notion's visual language to **Android with Jetpack Compose (Material 3)**: a color token object, a `Typography` set, paste-ready `@Composable`s, the block editor + `/` command palette, 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 (Notion's paper-white canvas, warm `#37352F` text, near-invisible chrome, the `/` palette as the creation gesture) while making everything idiomatic Android — `NavigationBar` instead of a UITabBar, a `Popup` instead of a SwiftUI overlay, a `ModalDrawerSheet` instead of a swipe-in sidebar, `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 cover images and mention avatars. No color extraction — Notion's palette is fixed pastels, so Palette is not needed. Notion is light-mode-first; a full dark scheme is provided.
+
+## 1. Color Tokens
+
+```kotlin
+// ui/theme/NotionColors.kt
+import androidx.compose.ui.graphics.Color
+
+object NotionColors {
+    // Canvas & Surfaces (Light)
+    val Canvas         = Color(0xFFFFFFFF)
+    val SurfaceGray    = Color(0xFFF7F6F3)
+    val SurfacePressed = Color(0xFFEFEEE9)
+    val Divider        = Color(0xFFEAECEC)
+
+    // Canvas & Surfaces (Dark)
+    val DarkCanvas   = Color(0xFF191919) // Notion's dark — NOT pure black
+    val DarkSurface1 = Color(0xFF202020)
+    val DarkSurface2 = Color(0xFF2F2F2F)
+    val DarkDivider  = Color(0xFF373737)
+
+    // Text
+    val TextPrimary     = Color(0xFF37352F) // warm dark gray — NOT pure black
+    val TextSecondary   = Color(0xFF9B9A97)
+    val TextTertiary    = Color(0xFFC3C2BF)
+    val DarkTextPrimary = Color(0xFFE6E6E4)
+
+    // Brand (interactive)
+    val Black    = Color(0xFF000000) // "New page" / primary CTA — no brand accent
+    val LinkBlue = Color(0xFF2E75CC)
+    val DarkLink = Color(0xFF529CCA)
+
+    // Page background pastels (light) — also callout/highlight fills
+    val BgGray   = Color(0xFFF1F1EF)
+    val BgBrown  = Color(0xFFF4EEEE)
+    val BgOrange = Color(0xFFFAEBDD)
+    val BgYellow = Color(0xFFFBF3DB)
+    val BgGreen  = Color(0xFFEDF3EC)
+    val BgBlue   = Color(0xFFE7F3F8)
+    val BgPurple = Color(0xFFF6F3F9)
+    val BgPink   = Color(0xFFFAF1F5)
+    val BgRed    = Color(0xFFFDEBEC)
+
+    // Callout / highlight text colors (saturated pastels)
+    val TextBrown  = Color(0xFF64473A)
+    val TextOrange = Color(0xFFD9730D)
+    val TextYellow = Color(0xFFDFAB01)
+    val TextGreen  = Color(0xFF0F7B6C)
+    val TextBlue   = Color(0xFF0B6E99)
+    val TextPurple = Color(0xFF6940A5)
+    val TextPink   = Color(0xFFAD1A72)
+    val TextRed    = Color(0xFFE03E3E)
+}
+```
+
+Wire it into both schemes. Notion is light-first (paper); the dark scheme uses the signature `#191919` charcoal, never true black.
+
+```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 NotionLight = lightColorScheme(
+    primary        = NotionColors.Black,
+    onPrimary      = NotionColors.Canvas,
+    background     = NotionColors.Canvas,
+    onBackground   = NotionColors.TextPrimary,
+    surface        = NotionColors.SurfaceGray,
+    onSurface      = NotionColors.TextPrimary,
+    surfaceVariant = NotionColors.SurfacePressed,
+    outline        = NotionColors.Divider,
+    error          = NotionColors.TextRed,
+)
+
+private val NotionDark = darkColorScheme(
+    primary        = NotionColors.DarkTextPrimary, // inverted CTA
+    onPrimary      = NotionColors.DarkCanvas,
+    background     = NotionColors.DarkCanvas,
+    onBackground   = NotionColors.DarkTextPrimary,
+    surface        = NotionColors.DarkSurface1,
+    onSurface      = NotionColors.DarkTextPrimary,
+    surfaceVariant = NotionColors.DarkSurface2,
+    outline        = NotionColors.DarkDivider,
+    error          = NotionColors.TextRed,
+)
+
+@Composable
+fun NotionTheme(
+    dark: Boolean = isSystemInDarkTheme(),
+    content: @Composable () -> Unit,
+) = MaterialTheme(
+    colorScheme = if (dark) NotionDark else NotionLight,
+    typography = NotionTypography,
+    content = content,
+)
+```
+
+## 2. Typography
+
+Notion's type family is **user-switchable**: Inter (default sans), Lora (serif), IBM Plex Mono (mono) — all SIL OFL, drop the TTFs in `res/font/`. Respect the user's choice globally via a `CompositionLocal`; never hard-code Inter. Body 400, headings 700; document rhythm, not UI rhythm.
+
+```kotlin
+// ui/theme/NotionType.kt
+import androidx.compose.material3.Typography
+import androidx.compose.runtime.compositionLocalOf
+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_medium,   FontWeight.Medium),
+    Font(R.font.inter_semibold, FontWeight.SemiBold),
+    Font(R.font.inter_bold,     FontWeight.Bold),
+)
+val Lora = FontFamily(
+    Font(R.font.lora_regular, FontWeight.Normal),
+    Font(R.font.lora_bold,    FontWeight.Bold),
+)
+val IBMPlexMono = FontFamily(
+    Font(R.font.ibm_plex_mono_regular, FontWeight.Normal),
+)
+
+enum class NotionFontFamily(val family: FontFamily) {
+    Sans(Inter), Serif(Lora), Mono(IBMPlexMono)
+}
+// Provide at the app root; switch from Settings — applies to all pages
+val LocalNotionFont = compositionLocalOf { NotionFontFamily.Sans }
+
+// Named ramp — mirrors DESIGN.md §3 exactly (pt → sp 1:1). Default = Inter.
+object NotionText {
+    val PageTitle  = TextStyle(Inter, fontWeight = FontWeight.Bold,     fontSize = 32.sp, lineHeight = 38.sp, letterSpacing = (-0.5).sp)
+    val H1         = TextStyle(Inter, fontWeight = FontWeight.Bold,     fontSize = 24.sp, lineHeight = 30.sp, letterSpacing = (-0.3).sp)
+    val H2         = TextStyle(Inter, fontWeight = FontWeight.Bold,     fontSize = 20.sp, lineHeight = 26.sp, letterSpacing = (-0.2).sp)
+    val H3         = TextStyle(Inter, fontWeight = FontWeight.Bold,     fontSize = 16.sp, lineHeight = 22.sp, letterSpacing = (-0.1).sp)
+    val Body       = TextStyle(Inter, fontWeight = FontWeight.Normal,   fontSize = 16.sp, lineHeight = 24.sp)
+    val BodyDense  = TextStyle(Inter, fontWeight = FontWeight.Normal,   fontSize = 15.sp, lineHeight = 21.sp)
+    val Caption    = TextStyle(Inter, fontWeight = FontWeight.Normal,   fontSize = 14.sp, lineHeight = 20.sp)
+    val Button     = TextStyle(Inter, fontWeight = FontWeight.SemiBold, fontSize = 14.sp, lineHeight = 14.sp)
+    val Link       = TextStyle(Inter, fontWeight = FontWeight.Normal,   fontSize = 16.sp, lineHeight = 24.sp)
+    val Mention    = TextStyle(Inter, fontWeight = FontWeight.Medium,   fontSize = 16.sp, lineHeight = 24.sp)
+    val Quote      = TextStyle(Lora,  fontWeight = FontWeight.Normal,   fontSize = 17.sp, lineHeight = 26.sp, fontStyle = FontStyle.Italic)
+    val CodeInline = TextStyle(IBMPlexMono, fontWeight = FontWeight.Normal, fontSize = 14.sp, lineHeight = 20.sp)
+    val CodeBlock  = TextStyle(IBMPlexMono, fontWeight = FontWeight.Normal, fontSize = 13.sp, lineHeight = 20.sp)
+    val Tab        = TextStyle(Inter, fontWeight = FontWeight.Medium,   fontSize = 11.sp, lineHeight = 11.sp, letterSpacing = 0.1.sp)
+    val Sidebar    = TextStyle(Inter, fontWeight = FontWeight.Medium,   fontSize = 14.sp, lineHeight = 18.sp)
+}
+
+// Helper: rebind a base style onto the user's chosen family
+fun TextStyle.withNotionFamily(f: NotionFontFamily): TextStyle = copy(fontFamily = f.family)
+
+// Map onto Material 3 slots so stock components inherit the brand
+val NotionTypography = Typography(
+    headlineLarge = NotionText.PageTitle,
+    headlineMedium = NotionText.H1,
+    titleMedium   = NotionText.H3,
+    bodyMedium    = NotionText.Body,
+    labelSmall    = NotionText.Tab,
+)
+```
+
+## 3. Signature Components
+
+### Page Header (Cover + Emoji + Title)
+
+```kotlin
+import androidx.compose.foundation.layout.*
+import androidx.compose.foundation.text.BasicTextField
+import androidx.compose.material3.Text
+import androidx.compose.runtime.*
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.clip
+import androidx.compose.ui.layout.ContentScale
+import androidx.compose.ui.unit.dp
+import coil.compose.AsyncImage
+
+@Composable
+fun PageHeader(
+    coverUrl: String?,
+    emoji: String?,
+    title: String,
+    onTitleChange: (String) -> Unit,
+) {
+    Column(Modifier.fillMaxWidth()) {
+        if (coverUrl != null) {
+            AsyncImage(
+                model = coverUrl,
+                contentDescription = null,
+                modifier = Modifier.fillMaxWidth().height(120.dp), // full-bleed, square corners
+                contentScale = ContentScale.Crop,
+            )
+        }
+        if (emoji != null) {
+            Text(
+                emoji,
+                fontSize = 64.sp,
+                modifier = Modifier
+                    .padding(start = 16.dp)
+                    .offset(y = if (coverUrl != null) (-32).dp else 0.dp), // overlaps cover
+            )
+        }
+        BasicTextField(
+            value = title,
+            onValueChange = onTitleChange,
+            textStyle = NotionText.PageTitle.copy(color = NotionColors.TextPrimary),
+            modifier = Modifier.padding(horizontal = 16.dp).padding(top = 8.dp, bottom = 16.dp),
+            decorationBox = { inner ->
+                if (title.isEmpty()) Text("Untitled", style = NotionText.PageTitle, color = NotionColors.TextTertiary)
+                inner()
+            },
+        )
+    }
+}
+```
+
+### Paragraph Block (with long-press handles)
+
+```kotlin
+import androidx.compose.animation.AnimatedVisibility
+import androidx.compose.animation.fadeIn
+import androidx.compose.animation.fadeOut
+import androidx.compose.animation.core.tween
+import androidx.compose.foundation.gestures.detectTapGestures
+import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.filled.Add
+import androidx.compose.material.icons.filled.DragIndicator
+import androidx.compose.material3.Icon
+import androidx.compose.ui.hapticfeedback.HapticFeedbackType
+import androidx.compose.ui.input.pointer.pointerInput
+import androidx.compose.ui.platform.LocalHapticFeedback
+
+@Composable
+fun ParagraphBlock(
+    text: String,
+    onTextChange: (String) -> Unit,
+    onInsertBelow: () -> Unit,
+    onOpenMenu: () -> Unit,
+    modifier: Modifier = Modifier,
+) {
+    var handlesVisible by remember { mutableStateOf(false) }
+    val haptics = LocalHapticFeedback.current
+
+    Row(
+        modifier = modifier
+            .fillMaxWidth()
+            .padding(horizontal = 16.dp, vertical = 3.dp)
+            .pointerInput(Unit) {
+                detectTapGestures(
+                    onLongPress = {
+                        haptics.performHapticFeedback(HapticFeedbackType.LongPress) // soft impact analog
+                        handlesVisible = true
+                    },
+                    onTap = { handlesVisible = false },
+                )
+            },
+        verticalAlignment = Alignment.Top,
+        horizontalArrangement = Arrangement.spacedBy(4.dp),
+    ) {
+        AnimatedVisibility(handlesVisible, enter = fadeIn(tween(120)), exit = fadeOut(tween(120))) {
+            Row {
+                Icon(
+                    Icons.Filled.Add, contentDescription = "Insert block below",
+                    tint = NotionColors.TextSecondary,
+                    modifier = Modifier.size(20.dp).pointerInput(Unit) { detectTapGestures { onInsertBelow() } },
+                )
+                Icon(
+                    Icons.Filled.DragIndicator, contentDescription = "Block menu", // ⋮⋮⋮
+                    tint = NotionColors.TextSecondary,
+                    modifier = Modifier.size(20.dp).pointerInput(Unit) { detectTapGestures { onOpenMenu() } },
+                )
+            }
+        }
+        BasicTextField(
+            value = text,
+            onValueChange = onTextChange,
+            textStyle = NotionText.Body.copy(color = NotionColors.TextPrimary),
+            modifier = Modifier.weight(1f),
+            decorationBox = { inner ->
+                if (text.isEmpty()) Text("Type '/' for commands", style = NotionText.Body, color = NotionColors.TextSecondary)
+                inner()
+            },
+        )
+    }
+}
+```
+
+### Callout Block
+
+```kotlin
+@Composable
+fun CalloutBlock(
+    emoji: String,
+    text: String,
+    backgroundColor: Color = NotionColors.BgYellow,
+    textColor: Color = NotionColors.TextYellow,
+    modifier: Modifier = Modifier,
+) {
+    Row(
+        modifier
+            .fillMaxWidth()
+            .padding(horizontal = 16.dp)
+            .clip(RoundedCornerShape(4.dp)) // no border — pastel bg only
+            .background(backgroundColor)
+            .padding(16.dp),
+        horizontalArrangement = Arrangement.spacedBy(10.dp),
+        verticalAlignment = Alignment.Top,
+    ) {
+        Text(emoji, fontSize = 20.sp)
+        Text(text, style = NotionText.Body, color = textColor)
+    }
+}
+```
+
+### Toggle Block
+
+```kotlin
+import androidx.compose.animation.core.animateFloatAsState
+import androidx.compose.animation.expandVertically
+import androidx.compose.animation.shrinkVertically
+import androidx.compose.material.icons.filled.ChevronRight
+import androidx.compose.ui.draw.rotate
+
+@Composable
+fun ToggleBlock(
+    title: String,
+    modifier: Modifier = Modifier,
+    content: @Composable () -> Unit,
+) {
+    var open by remember { mutableStateOf(false) }
+    val rotation by animateFloatAsState(if (open) 90f else 0f, tween(150), label = "toggleChevron")
+    val haptics = LocalHapticFeedback.current
+
+    Column(modifier.fillMaxWidth()) {
+        Row(
+            Modifier
+                .fillMaxWidth()
+                .clickable(indication = null, interactionSource = remember { MutableInteractionSource() }) {
+                    haptics.performHapticFeedback(HapticFeedbackType.LongPress) // soft
+                    open = !open
+                }
+                .padding(horizontal = 16.dp, vertical = 6.dp),
+            verticalAlignment = Alignment.CenterVertically,
+            horizontalArrangement = Arrangement.spacedBy(4.dp),
+        ) {
+            Icon(
+                Icons.Filled.ChevronRight,
+                contentDescription = if (open) "Collapse" else "Expand",
+                tint = NotionColors.TextSecondary,
+                modifier = Modifier.size(14.dp).rotate(rotation),
+            )
+            Text(title, style = NotionText.Body.copy(fontWeight = FontWeight.Medium), color = NotionColors.TextPrimary)
+        }
+        AnimatedVisibility(open, enter = expandVertically(tween(200)) + fadeIn(), exit = shrinkVertically(tween(200)) + fadeOut()) {
+            Box(Modifier.padding(start = 24.dp)) { content() } // children indented 24dp
+        }
+    }
+}
+```
+
+### Mention Chip (inline)
+
+```kotlin
+import androidx.compose.foundation.shape.CircleShape
+
+@Composable
+fun MentionChip(name: String, avatarUrl: String?, modifier: Modifier = Modifier) {
+    Row(
+        modifier
+            .clip(RoundedCornerShape(2.dp))
+            .background(NotionColors.LinkBlue.copy(alpha = 0.1f)) // 10% blue behind
+            .padding(horizontal = 4.dp, vertical = 2.dp),
+        verticalAlignment = Alignment.CenterVertically,
+        horizontalArrangement = Arrangement.spacedBy(4.dp),
+    ) {
+        if (avatarUrl != null) {
+            AsyncImage(
+                model = avatarUrl, contentDescription = null,
+                modifier = Modifier.size(16.dp).clip(CircleShape),
+                contentScale = ContentScale.Crop,
+            )
+        } else {
+            Box(Modifier.size(16.dp).clip(CircleShape).background(NotionColors.LinkBlue.copy(alpha = 0.2f)))
+        }
+        Text("@$name", style = NotionText.Mention, color = NotionColors.LinkBlue)
+    }
+}
+```
+
+## 4. Block Editor + `/` Command Palette
+
+Notion's creation UX flows through two affordances: the long-press block handles (§3) and the `/` command palette. On iOS it's a cursor-anchored overlay; on Android use a `Popup` so it floats above the page with the right shadow and a tap-outside dismiss.
+
+```kotlin
+import androidx.compose.foundation.lazy.LazyColumn
+import androidx.compose.foundation.lazy.itemsIndexed
+import androidx.compose.material.icons.filled.*
+import androidx.compose.ui.graphics.vector.ImageVector
+import androidx.compose.ui.unit.IntOffset
+import androidx.compose.ui.window.Popup
+import androidx.compose.ui.window.PopupProperties
+
+data class BlockOption(val icon: ImageVector, val title: String, val subtitle: String)
+
+val defaultSlashOptions = listOf(
+    BlockOption(Icons.Filled.Notes, "Text", "Just start writing with plain text."),
+    BlockOption(Icons.Filled.Title, "Heading 1", "Big section heading."),
+    BlockOption(Icons.Filled.Title, "Heading 2", "Medium section heading."),
+    BlockOption(Icons.Filled.ToggleOn, "Toggle list", "Collapsible content."),
+    BlockOption(Icons.Filled.Image, "Image", "Upload or embed with a link."),
+    BlockOption(Icons.Filled.Lightbulb, "Callout", "Make writing stand out."),
+    BlockOption(Icons.Filled.Code, "Code", "Capture a code snippet."),
+    BlockOption(Icons.Filled.TableChart, "Table", "Add a database table."),
+)
+
+@Composable
+fun SlashCommandPalette(
+    options: List<BlockOption> = defaultSlashOptions,
+    anchorOffset: IntOffset,
+    onPick: (BlockOption) -> Unit,
+    onDismiss: () -> Unit,
+) {
+    var selected by remember { mutableIntStateOf(0) }
+    Popup(
+        offset = anchorOffset, // cursor-anchored
+        onDismissRequest = onDismiss,
+        properties = PopupProperties(focusable = true),
+    ) {
+        Column(
+            Modifier
+                .width(280.dp)
+                .heightIn(max = 360.dp)
+                .clip(RoundedCornerShape(6.dp))
+                // Android has no live blur — a 1dp border doubles as the dark-mode elevation cue
+                .background(NotionColors.Canvas)
+                .border(1.dp, NotionColors.Divider, RoundedCornerShape(6.dp))
+                .shadow(12.dp, RoundedCornerShape(6.dp), spotColor = Color.Black.copy(alpha = 0.08f))
+                .padding(vertical = 6.dp),
+        ) {
+            LazyColumn {
+                itemsIndexed(options) { i, opt ->
+                    Row(
+                        Modifier
+                            .fillMaxWidth()
+                            .height(40.dp)
+                            .background(if (i == selected) NotionColors.SurfacePressed else Color.Transparent)
+                            .clickable { selected = i; onPick(opt) }
+                            .padding(horizontal = 12.dp),
+                        verticalAlignment = Alignment.CenterVertically,
+                        horizontalArrangement = Arrangement.spacedBy(12.dp),
+                    ) {
+                        Icon(opt.icon, contentDescription = null, tint = NotionColors.TextPrimary, modifier = Modifier.size(20.dp))
+                        Column(verticalArrangement = Arrangement.spacedBy(1.dp)) {
+                            Text(opt.title, style = NotionText.Button.copy(fontWeight = FontWeight.Medium), color = NotionColors.TextPrimary)
+                            Text(opt.subtitle, style = NotionText.Tab.copy(fontSize = 12.sp), color = NotionColors.TextSecondary)
+                        }
+                    }
+                }
+            }
+        }
+    }
+}
+```
+
+Detect `/` at the start of a block's text and raise the palette; arrow keys move `selected`, tap or Enter calls `onPick`, which replaces the current block with the chosen type. The same `Popup` pattern serves the `@`-mention picker (person/page/date rows).
+
+## 5. Navigation
+
+Notion has minimal chrome: a slide-in left sidebar and a 4-tab bottom strip. On Android, model the sidebar as a Material 3 `ModalNavigationDrawer` (edge-swipe + hamburger) and the strip as a `NavigationBar`. There is no tint pill — active is just the dark text color.
+
+```kotlin
+@Composable
+fun NotionBottomBar(selected: Int, onSelect: (Int) -> Unit) {
+    NavigationBar(
+        containerColor = NotionColors.Canvas,
+        tonalElevation = 0.dp,
+    ) {
+        val items = listOf(
+            "Home"     to Icons.Filled.Home,
+            "Search"   to Icons.Filled.Search,
+            "Updates"  to Icons.Filled.Notifications,
+            "Settings" to Icons.Filled.Settings,
+        )
+        items.forEachIndexed { i, (label, icon) ->
+            NavigationBarItem(
+                selected = selected == i,
+                onClick = { onSelect(i) },
+                icon = { Icon(icon, contentDescription = label, modifier = Modifier.size(24.dp)) },
+                label = { Text(label, style = NotionText.Tab) },
+                colors = NavigationBarItemDefaults.colors(
+                    selectedIconColor = NotionColors.TextPrimary,   // dark text, no tint
+                    selectedTextColor = NotionColors.TextPrimary,
+                    unselectedIconColor = NotionColors.TextSecondary,
+                    unselectedTextColor = NotionColors.TextSecondary,
+                    indicatorColor = Color.Transparent, // no Material pill — Notion has none
+                ),
+            )
+        }
+    }
+}
+```
+
+The sidebar (`ModalDrawerSheet`, 280.dp, `SurfaceGray` background) holds the workspace header, Teamspaces/Shared/Private sections, and 32.dp page rows (leading 16.dp emoji, `Sidebar` text, trailing ⋯). Active page row uses `SurfacePressed`; nested pages indent 24.dp per level with a leading chevron. Material's `drawerState` gives the edge-swipe + 250ms open/close for free.
+
+## 6. Motion
+
+Notion motion is quiet — 150–300ms ease-out, never aggressive. Shadows signal "floating, tap outside to dismiss," nothing more.
+
+| Moment | Compose recipe |
+|--------|----------------|
+| Toggle expand/collapse | chevron `animateFloatAsState` 0 → 90° `tween(150)`; children `expandVertically(tween(200))` + `fadeIn` |
+| Block handle reveal | `AnimatedVisibility` `fadeIn(tween(120))` after `detectTapGestures { onLongPress }` |
+| `/` palette | `Popup` content `fadeIn` + 4dp `slideInVertically` `tween(150)`; arrow selection instant |
+| Block reorder (drag) | `LazyColumn` + `Modifier.draggable`; neighbors shift `animateItemPlacement(tween(200))`; soft haptic on drop |
+| Page navigation | Nav3/`NavHost` slide push `tween(300)` |
+| Sidebar swipe | `ModalNavigationDrawer` `drawerState` — 1:1 drag, 50% threshold, `spring(dampingRatio = 0.8f)` |
+| Text selection | blue `#2E75CC` @ 20% overlay appears instantly (no animation) |
+
+```kotlin
+// Toggle children slide — the canonical Notion motion
+AnimatedVisibility(
+    visible = open,
+    enter = expandVertically(animationSpec = tween(200)) + fadeIn(tween(200)),
+    exit = shrinkVertically(animationSpec = tween(200)) + fadeOut(tween(150)),
+) { /* indented children */ }
+```
+
+Haptics: prefer `LocalHapticFeedback.performHapticFeedback(HapticFeedbackType.LongPress)` for the soft impact on toggle expand, block drag start, and command-palette open. For a softer tick use `LocalView.current.performHapticFeedback(HapticFeedbackConstants.CLOCK_TICK)`. Auto-save is silent — no motion, no haptic; only show a "Saved" snackbar on manual save or error.
+
+## 7. Icons
+
+Notion ships custom block-type glyphs; the closest first-party set is `androidx.compose.material:material-icons-extended`. The block handle (⋮⋮⋮) maps to `DragIndicator`; the page-emoji icon is user text, not an icon.
+
+| Purpose | SF Symbol (iOS) | Material Icon (Compose) |
+|---------|-----------------|--------------------------|
+| Home (tab) | `house` / `house.fill` | `Icons.Filled.Home` |
+| Search (tab) | `magnifyingglass` | `Icons.Filled.Search` |
+| Updates (tab) | `bell` / `bell.fill` | `Icons.Filled.Notifications` |
+| Settings (tab) | `gear` | `Icons.Filled.Settings` |
+| Hamburger | `sidebar.leading` | `Icons.Filled.Menu` |
+| Back | `chevron.left` | `Icons.Filled.ArrowBack` |
+| Block menu (⋮⋮⋮) | `ellipsis.circle` | `Icons.Filled.DragIndicator` |
+| Insert below | `plus` | `Icons.Filled.Add` |
+| Toggle chevron | `chevron.right` / `chevron.down` | `Icons.Filled.ChevronRight` (rotate 90°) |
+| Copy code | `doc.on.doc` | `Icons.Filled.ContentCopy` |
+| Share | `square.and.arrow.up` | `Icons.Filled.IosShare` |
+| Checkbox block | `square` / `checkmark.square.fill` | `Icons.Outlined.CheckBoxOutlineBlank` / `Icons.Filled.CheckBox` |
+| Link | `link` | `Icons.Filled.Link` |
+| Page icon (default) | `doc.text` | `Icons.Filled.Description` |
+| Database table | `tablecells` | `Icons.Filled.TableChart` |
+| Database board | `rectangle.3.group` | `Icons.Filled.ViewKanban` |
+| Database calendar | `calendar` | `Icons.Filled.CalendarMonth` |
+| Database gallery | `square.grid.2x2` | `Icons.Filled.GridView` |
+
+## 8. Minimum SDK & Accessibility Notes
+
+- **minSdk 24** (Compose floor is 21; `Popup` + modern motion are comfortable at 24). `compileSdk 34+`, Compose BOM `2024.09+`, Kotlin `2.0+`.
+- **Edge-to-edge**: call `enableEdgeToEdge()`; light canvas wants dark-content system bars (and light-content in dark mode). The top nav respects the camera cutout; the `/` palette must position above the IME — use `Modifier.imePadding()` on the editor and place the `Popup` relative to the cursor so it never hides behind the keyboard.
+- **Font scaling**: `sp` honors the user's font scale — keep it on page title, headings, body, captions, code (it stays monospace as it scales). Pin layout-sensitive text (block handles, 11sp tab labels, sidebar labels, mention chips, palette option text) by deriving from `dp` or `CompositionLocalProvider(LocalDensity provides Density(density, fontScale = 1f))`.
+- **User font choice**: read `LocalNotionFont` everywhere and apply `style.withNotionFamily(...)` — never hard-code Inter; Lora/IBM Plex Mono must apply globally.
+- **TalkBack**: label paragraph blocks "Paragraph: {content}"; toggles "Toggle: {title}, expanded/collapsed"; expose block handles via `Modifier.semantics { customActions = listOf(...) }` (Insert below, Open menu, Move) so they're reachable without the long-press; label `/` palette rows with title + subtitle.
+- **Touch targets**: Material guidance is 48.dp. Give the 20.dp block handles and 14.dp toggle chevron a 48.dp hit area via `Modifier.size(48.dp)` padding; sidebar rows are 32.dp tall but full-row tappable; primary buttons ≥ 36.dp.
+- **Contrast**: `#37352F` on `#FFFFFF` passes WCAG AA for body at 16sp. The pastel callout pairs (e.g. `#DFAB01` on `#FBF3DB`) are carefully matched — validate any custom pair, especially yellow, with a contrast checker.
+- **Reduce motion**: when `Settings.Global.ANIMATOR_DURATION_SCALE == 0`, disable the chevron rotation and toggle slide — substitute a plain `Crossfade`; keep the selection highlight (it conveys state).
+- **Dark mode**: invert via the `Dark*` palette — `#191919`, NOT true black; `#37352F` text becomes `#E6E6E4`. Shadows are nearly invisible on dark, so the 1dp `DarkDivider` border on floating panels (palette, mention picker, block menu) is the elevation cue. Do **not** enable Material You `dynamicColorScheme()` — Notion's paper-and-warm-text identity must hold regardless of wallpaper (Notion has no brand accent to harmonize with one).