designmd-forge 1.2.0

package/dist/data/designs/ios-google-calendar-android.md

@@ -0,0 +1,565 @@
+# Google Calendar (iOS) — Jetpack Compose Implementation Guide
+
+Companion to [DESIGN.md](DESIGN.md) — the framework-neutral spec. This file ports Google Calendar's visual language to **Android with Jetpack Compose (Material 3)**: a color token object, a `Typography` set, paste-ready `@Composable`s (event card, Schedule day banner, FAB, Month grid), `Modifier`s, motion, and haptics.
+
+> Why a Compose guide for an iOS-referenced app? Google Calendar *is* a Material app — the iOS build is Material You wearing SF Pro. On Android this guide goes home: a real `FloatingActionButton` at Material elevation, the Material dual-shadow as `tonalElevation`/`shadowElevation`, and `sp`/`dp` instead of `pt`. Because it is Material-native, this is one of the few apps where you should **embrace `dynamicColorScheme()`** (see §8).
+
+Assumes Compose BOM `2024.09+`, Kotlin `2.0+`, `minSdk 24`, Material 3. (No remote images, so Coil is optional.)
+
+## 1. Color Tokens
+
+```kotlin
+// ui/theme/GCalColors.kt
+import androidx.compose.ui.graphics.Color
+
+object GCalColors {
+    // Canvas & Surfaces
+    val Canvas       = Color(0xFFFFFFFF)
+    val SurfaceGray  = Color(0xFFF1F3F4)
+    val SurfaceGray2 = Color(0xFFF8F9FA)
+    val Divider      = Color(0xFFDADCE0)
+
+    // Text
+    val Ink       = Color(0xFF202124) // Google's warm near-black, not #000
+    val Secondary = Color(0xFF5F6368)
+    val Tertiary  = Color(0xFF80868B)
+
+    // Brand & Actions
+    val Blue        = Color(0xFF1A73E8)
+    val BluePressed = Color(0xFF1557B0)
+    val BlueTint    = Color(0xFFE8F0FE) // selected rows / Today ring bg
+    val BlueDark    = Color(0xFF8AB4F8) // brighter blue for dark mode
+
+    // Event Colors (Material primary set)
+    val EventBlue   = Color(0xFF1A73E8)
+    val EventRed    = Color(0xFFD93025)
+    val EventYellow = Color(0xFFF9AB00)
+    val EventGreen  = Color(0xFF188038)
+
+    // 24-color user-selectable calendar palette
+    val Tomato     = Color(0xFFD50000)
+    val Flamingo   = Color(0xFFE67C73)
+    val Tangerine  = Color(0xFFF4511E)
+    val Banana     = Color(0xFFF6BF26)
+    val Sage       = Color(0xFF33B679)
+    val Basil      = Color(0xFF0B8043)
+    val Peacock    = Color(0xFF039BE5)
+    val Blueberry  = Color(0xFF3F51B5)
+    val Lavender   = Color(0xFF7986CB)
+    val Grape      = Color(0xFF8E24AA)
+    val Graphite   = Color(0xFF616161)
+    val Birch      = Color(0xFFA79B8E)
+    val Eucalyptus = Color(0xFF16A765)
+    val Cobalt     = Color(0xFF0277BD)
+    val CherryBlossom = Color(0xFFFAD165)
+    val Avocado    = Color(0xFF7CB342)
+    val Citron     = Color(0xFFC0CA33)
+    val Pistachio  = Color(0xFF9CCC65)
+    val Wisteria   = Color(0xFF5C6BC0)
+    val Amethyst   = Color(0xFFAB47BC)
+    val Rose       = Color(0xFFD81B60)
+    val Cocoa      = Color(0xFF795548)
+    val Slate      = Color(0xFF9E9E9E)
+
+    // Dark Mode (Google's warm near-black, NOT pure black)
+    val DarkCanvas   = Color(0xFF202124)
+    val DarkSurface1 = Color(0xFF2D2E30)
+    val DarkSurface2 = Color(0xFF3C4043)
+    val DarkDivider  = Color(0xFF3C4043)
+    val DarkText     = Color(0xFFE8EAED)
+    val DarkTextSec  = Color(0xFF9AA0A6)
+
+    // Material warm shadow tint (not pure black — a Google detail)
+    val ShadowTint = Color(0xFF3C4043)
+}
+```
+
+Wire it into a Material 3 scheme. Dark mode is `#202124` charcoal; the blue brightens to `#8AB4F8`.
+
+```kotlin
+// ui/theme/Theme.kt
+import androidx.compose.foundation.isSystemInDarkTheme
+import androidx.compose.material3.*
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.platform.LocalContext
+import android.os.Build
+
+private val GCalLight = lightColorScheme(
+    primary           = GCalColors.Blue,
+    onPrimary         = Color.White,
+    background         = GCalColors.Canvas,
+    onBackground       = GCalColors.Ink,
+    surface            = GCalColors.Canvas,
+    onSurface          = GCalColors.Ink,
+    surfaceVariant     = GCalColors.SurfaceGray,
+    secondaryContainer = GCalColors.BlueTint, // selected drawer row / Today ring bg
+    outline            = GCalColors.Divider,
+    error              = GCalColors.EventRed,
+)
+
+private val GCalDark = darkColorScheme(
+    primary           = GCalColors.BlueDark,
+    onPrimary         = GCalColors.DarkCanvas,
+    background         = GCalColors.DarkCanvas,
+    onBackground       = GCalColors.DarkText,
+    surface            = GCalColors.DarkSurface1,
+    onSurface          = GCalColors.DarkText,
+    surfaceVariant     = GCalColors.DarkSurface2,
+    secondaryContainer = GCalColors.BlueDark.copy(alpha = 0.24f),
+    outline            = GCalColors.DarkDivider,
+    error              = GCalColors.EventRed,
+)
+
+@Composable
+fun GCalTheme(
+    dark: Boolean = isSystemInDarkTheme(),
+    dynamic: Boolean = true,  // Material-native Google app — Material You ON by default
+    content: @Composable () -> Unit,
+) {
+    val ctx = LocalContext.current
+    val scheme = when {
+        dynamic && Build.VERSION.SDK_INT >= Build.VERSION_CODES.S ->
+            if (dark) dynamicDarkColorScheme(ctx) else dynamicLightColorScheme(ctx)
+        dark -> GCalDark
+        else -> GCalLight
+    }
+    MaterialTheme(colorScheme = scheme, typography = GCalTypography, content = content)
+}
+```
+
+## 2. Typography
+
+**Google Sans** for nav titles and prominent moments; **Roboto** (Android's system default — what iOS deliberately falls back to SF Pro for) for body and rows. Drop Google Sans TTFs in `res/font/`. Calendar avoids Bold — hierarchy is size + color, weights are Regular (400) and Medium (500). Times use tabular figures (`tnum`) — non-negotiable for column alignment.
+
+```kotlin
+// ui/theme/GCalType.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 GoogleSans = FontFamily(
+    Font(R.font.google_sans_regular, FontWeight.Normal),  // 400
+    Font(R.font.google_sans_medium,  FontWeight.Medium),  // 500
+)
+val Roboto = FontFamily(
+    Font(R.font.roboto_regular, FontWeight.Normal),
+    Font(R.font.roboto_medium,  FontWeight.Medium),
+)
+const val TNUM = "tnum" // tabular figures — apply to every time / day number
+
+// Named ramp — mirrors DESIGN.md §3 exactly (pt → sp 1:1, line-height = size × ratio)
+object GCalText {
+    val NavTitle      = TextStyle(GoogleSans, fontWeight = FontWeight.Medium, fontSize = 22.sp, lineHeight = 26.sp)
+    val DayNumberLg   = TextStyle(GoogleSans, fontWeight = FontWeight.Normal, fontSize = 36.sp, lineHeight = 36.sp, letterSpacing = (-0.4).sp)
+    val DayLabel      = TextStyle(GoogleSans, fontWeight = FontWeight.Medium, fontSize = 13.sp, lineHeight = 16.sp, letterSpacing = 0.8.sp)
+    val SectionHeader = TextStyle(GoogleSans, fontWeight = FontWeight.Medium, fontSize = 14.sp, lineHeight = 18.sp)
+    val EventTitle    = TextStyle(Roboto,     fontWeight = FontWeight.Medium, fontSize = 14.sp, lineHeight = 18.sp)
+    val EventDetail   = TextStyle(GoogleSans, fontWeight = FontWeight.Normal, fontSize = 22.sp, lineHeight = 28.sp, letterSpacing = (-0.1).sp)
+    val EventTime     = TextStyle(Roboto,     fontWeight = FontWeight.Normal, fontSize = 13.sp, lineHeight = 16.sp, fontFeatureSettings = TNUM)
+    val EventLocation = TextStyle(Roboto,     fontWeight = FontWeight.Normal, fontSize = 13.sp, lineHeight = 17.sp)
+    val BlockTitle    = TextStyle(Roboto,     fontWeight = FontWeight.Medium, fontSize = 12.sp, lineHeight = 16.sp)
+    val BlockTime     = TextStyle(Roboto,     fontWeight = FontWeight.Normal, fontSize = 11.sp, lineHeight = 13.sp, fontFeatureSettings = TNUM)
+    val DayNumber     = TextStyle(GoogleSans, fontWeight = FontWeight.Normal, fontSize = 14.sp, lineHeight = 14.sp, fontFeatureSettings = TNUM)
+    val TodayNumber   = TextStyle(GoogleSans, fontWeight = FontWeight.Medium, fontSize = 14.sp, lineHeight = 14.sp)
+    val WeekdayHeader = TextStyle(Roboto,     fontWeight = FontWeight.Medium, fontSize = 12.sp, lineHeight = 12.sp, letterSpacing = 0.4.sp)
+    val TimeGutter    = TextStyle(Roboto,     fontWeight = FontWeight.Normal, fontSize = 11.sp, lineHeight = 11.sp, fontFeatureSettings = TNUM)
+    val Sidebar       = TextStyle(Roboto,     fontWeight = FontWeight.Medium, fontSize = 14.sp, lineHeight = 18.sp)
+    val Button        = TextStyle(GoogleSans, fontWeight = FontWeight.Medium, fontSize = 14.sp, lineHeight = 14.sp, letterSpacing = 0.4.sp)
+    val TabLabel      = TextStyle(Roboto,     fontWeight = FontWeight.Medium, fontSize = 10.sp, lineHeight = 10.sp, letterSpacing = 0.1.sp)
+    val Caption       = TextStyle(Roboto,     fontWeight = FontWeight.Normal, fontSize = 12.sp, lineHeight = 16.sp)
+}
+
+// Map onto Material 3 slots so stock components inherit the brand
+val GCalTypography = Typography(
+    headlineSmall = GCalText.EventDetail,
+    titleLarge    = GCalText.NavTitle,
+    titleMedium   = GCalText.SectionHeader,
+    bodyMedium    = GCalText.EventTitle,
+    labelLarge    = GCalText.Button,
+    labelSmall    = GCalText.TabLabel,
+)
+```
+
+## 3. Signature Components
+
+### Event Card (Schedule View — hero component)
+
+```kotlin
+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.Place
+import androidx.compose.material3.*
+import androidx.compose.runtime.*
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.clip
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.text.style.TextOverflow
+import androidx.compose.ui.unit.dp
+
+@Composable
+fun EventCard(
+    title: String,
+    timeRange: String,           // "9:00 – 9:30 AM"
+    location: String?,
+    calendarColor: Color,        // e.g., GCalColors.Blueberry
+    onClick: () -> Unit,
+    modifier: Modifier = Modifier,
+) {
+    Surface(
+        modifier = modifier.fillMaxWidth().heightIn(min = 56.dp),
+        shape = RoundedCornerShape(4.dp), // Material compact-card radius — never 6dp+
+        color = MaterialTheme.colorScheme.surface,
+        // Material Level 1 dual-shadow ≈ a soft elevation; warm tint via shadow
+        shadowElevation = 1.dp,
+        tonalElevation = 1.dp,
+        onClick = onClick,
+    ) {
+        Row(Modifier.fillMaxWidth(), verticalAlignment = Alignment.Top) {
+            // 4dp left color bar — the calendar-source indicator
+            Box(Modifier.width(4.dp).fillMaxHeight().background(calendarColor))
+            Column(
+                Modifier.weight(1f).padding(horizontal = 16.dp, vertical = 12.dp),
+                verticalArrangement = Arrangement.spacedBy(4.dp),
+            ) {
+                Text(title, style = GCalText.EventTitle, color = GCalColors.Ink, maxLines = 2, overflow = TextOverflow.Ellipsis)
+                Text(timeRange, style = GCalText.EventTime, color = GCalColors.Secondary)
+                if (location != null) {
+                    Row(verticalAlignment = Alignment.CenterVertically, horizontalArrangement = Arrangement.spacedBy(4.dp)) {
+                        Icon(Icons.Filled.Place, null, tint = GCalColors.Secondary, modifier = Modifier.size(11.dp))
+                        Text(location, style = GCalText.EventLocation, color = GCalColors.Secondary, maxLines = 1, overflow = TextOverflow.Ellipsis)
+                    }
+                }
+            }
+        }
+    }
+}
+```
+
+### Schedule Day Banner
+
+```kotlin
+@Composable
+fun DayBanner(
+    dayNumber: String,           // "14"
+    dayLabel: String,            // "THU · MAY"
+    weatherIcon: androidx.compose.ui.graphics.vector.ImageVector?,
+    temperature: String?,
+    isToday: Boolean,
+) {
+    Row(
+        Modifier.fillMaxWidth().height(80.dp).padding(horizontal = 16.dp),
+        verticalAlignment = Alignment.CenterVertically,
+    ) {
+        Column(verticalArrangement = Arrangement.spacedBy(4.dp)) {
+            Text(dayLabel, style = GCalText.DayLabel, color = GCalColors.Secondary)
+            if (isToday) {
+                Box(Modifier.size(56.dp).clip(CircleShape).background(GCalColors.Blue), contentAlignment = Alignment.Center) {
+                    Text(dayNumber, style = GCalText.DayNumberLg, color = Color.White)
+                }
+            } else {
+                Text(dayNumber, style = GCalText.DayNumberLg, color = GCalColors.Ink)
+            }
+        }
+        Spacer(Modifier.weight(1f))
+        if (weatherIcon != null && temperature != null) {
+            Row(verticalAlignment = Alignment.CenterVertically, horizontalArrangement = Arrangement.spacedBy(8.dp)) {
+                Icon(weatherIcon, null, tint = GCalColors.EventYellow, modifier = Modifier.size(20.dp))
+                Text(temperature, style = GCalText.EventTitle, color = GCalColors.Ink)
+            }
+        }
+    }
+}
+```
+
+### Floating Action Button (Material elevation)
+
+Use the real Material `FloatingActionButton`. Material does **not** scale the FAB on press — it lifts via elevation. A pressed `FloatingActionButton` already animates `pressedElevation`, so let the component do it.
+
+```kotlin
+import androidx.compose.material.icons.filled.Add
+import androidx.compose.ui.hapticfeedback.HapticFeedbackType
+import androidx.compose.ui.platform.LocalHapticFeedback
+
+@Composable
+fun GCalFab(onClick: () -> Unit, modifier: Modifier = Modifier) {
+    val haptics = LocalHapticFeedback.current
+    FloatingActionButton(
+        onClick = {
+            haptics.performHapticFeedback(HapticFeedbackType.LongPress) // ≈ .impact(.medium)
+            onClick()
+        },
+        containerColor = MaterialTheme.colorScheme.primary, // #1A73E8 / #8AB4F8
+        contentColor = Color.White,
+        shape = CircleShape,
+        elevation = FloatingActionButtonDefaults.elevation(
+            defaultElevation = 6.dp,  // Material Level 6 — the highest in the app
+            pressedElevation = 12.dp, // lifts to Level 12 on press (no scale)
+        ),
+        modifier = modifier,
+    ) {
+        Icon(Icons.Filled.Add, contentDescription = "Create", modifier = Modifier.size(24.dp))
+    }
+}
+```
+
+### Month Grid Cell
+
+```kotlin
+@Composable
+fun MonthCell(
+    day: Int,
+    isToday: Boolean,
+    isCurrentMonth: Boolean,
+    eventColors: List<Color>, // up to 3 source-calendar dots
+    modifier: Modifier = Modifier,
+) {
+    Column(
+        modifier = modifier
+            .fillMaxWidth()
+            .heightIn(min = 52.dp)
+            .drawBehind {
+                drawLine(GCalColors.Divider, androidx.compose.ui.geometry.Offset(0f, 0f), androidx.compose.ui.geometry.Offset(size.width, 0f), 0.5.dp.toPx())
+            },
+        verticalArrangement = Arrangement.spacedBy(4.dp),
+    ) {
+        if (isToday) {
+            Box(Modifier.padding(2.dp).size(28.dp).clip(CircleShape).background(GCalColors.Blue), contentAlignment = Alignment.Center) {
+                Text("$day", style = GCalText.TodayNumber, color = Color.White)
+            }
+        } else {
+            Text(
+                "$day",
+                style = GCalText.DayNumber,
+                color = if (isCurrentMonth) GCalColors.Ink else GCalColors.Tertiary,
+                modifier = Modifier.padding(start = 6.dp, top = 6.dp),
+            )
+        }
+        Row(Modifier.padding(start = 6.dp), horizontalArrangement = Arrangement.spacedBy(2.dp)) {
+            eventColors.take(3).forEach { c ->
+                Box(Modifier.size(4.dp).clip(CircleShape).background(c))
+            }
+            if (eventColors.size > 3) {
+                Text("+${eventColors.size - 3}", style = GCalText.Caption.copy(fontSize = 9.sp), color = GCalColors.Tertiary)
+            }
+        }
+    }
+}
+```
+
+### Day/Week Tinted Event Block + RSVP Pills
+
+```kotlin
+@Composable
+fun TintedEventBlock(title: String, timeRange: String, calendarColor: Color, height: androidx.compose.ui.unit.Dp) {
+    Row(
+        Modifier
+            .fillMaxWidth()
+            .height(height)
+            .clip(RoundedCornerShape(4.dp))
+            .background(calendarColor.copy(alpha = 0.20f)), // 20% fill, full-sat title
+    ) {
+        Box(Modifier.width(3.dp).fillMaxHeight().background(calendarColor))
+        Column(Modifier.padding(horizontal = 6.dp, vertical = 4.dp), verticalArrangement = Arrangement.spacedBy(2.dp)) {
+            Text(title, style = GCalText.BlockTitle, color = calendarColor, maxLines = 1, overflow = TextOverflow.Ellipsis)
+            if (height > 32.dp) Text(timeRange, style = GCalText.BlockTime, color = calendarColor.copy(alpha = 0.85f))
+        }
+    }
+}
+
+@Composable
+fun RSVPPills(selected: String, onSelect: (String) -> Unit) {
+    Row(Modifier.fillMaxWidth(), horizontalArrangement = Arrangement.spacedBy(8.dp)) {
+        listOf("Yes", "No", "Maybe").forEach { option ->
+            val isSel = selected == option
+            Box(
+                Modifier
+                    .weight(1f)
+                    .height(40.dp)
+                    .clip(CircleShape)
+                    .background(if (isSel) GCalColors.Blue else Color.Transparent)
+                    .border(if (isSel) 0.dp else 1.dp, if (isSel) Color.Transparent else GCalColors.Divider, CircleShape)
+                    .clickable { onSelect(option) },
+                contentAlignment = Alignment.Center,
+            ) {
+                Text(option, style = GCalText.EventTitle, color = if (isSel) Color.White else GCalColors.Secondary)
+            }
+        }
+    }
+}
+```
+
+## 4. Google-Calendar-Specific Feature: FAB Action Menu + Concentric Ripple
+
+Tapping the FAB opens an action menu (Event / Task / Goal) that shares an element with the FAB position. Compose's `FloatingActionButton` already paints the Material ripple from the touch point — that *is* the concentric expansion. The menu rises as a `ModalBottomSheet` morphing from the FAB; on Compose 1.7+ use `SharedTransitionLayout` to morph the FAB into the sheet.
+
+```kotlin
+import androidx.compose.material.icons.filled.Event
+import androidx.compose.material.icons.filled.TaskAlt
+import androidx.compose.material.icons.filled.Flag
+import androidx.compose.material3.ExperimentalMaterial3Api
+import androidx.compose.material3.ModalBottomSheet
+import androidx.compose.material3.rememberModalBottomSheetState
+
+@OptIn(ExperimentalMaterial3Api::class)
+@Composable
+fun FabWithActionMenu(onCreate: (String) -> Unit) {
+    var showMenu by remember { mutableStateOf(false) }
+    val sheetState = rememberModalBottomSheetState()
+
+    GCalFab(onClick = { showMenu = true })
+
+    if (showMenu) {
+        ModalBottomSheet(onDismissRequest = { showMenu = false }, sheetState = sheetState) {
+            val actions = listOf(
+                Triple("Event", Icons.Filled.Event, GCalColors.EventBlue),
+                Triple("Task",  Icons.Filled.TaskAlt, GCalColors.EventYellow),
+                Triple("Goal",  Icons.Filled.Flag, GCalColors.EventGreen),
+            )
+            actions.forEach { (label, icon, tint) ->
+                Row(
+                    Modifier
+                        .fillMaxWidth()
+                        .height(48.dp)
+                        .clickable { showMenu = false; onCreate(label) }
+                        .padding(horizontal = 24.dp),
+                    verticalAlignment = Alignment.CenterVertically,
+                    horizontalArrangement = Arrangement.spacedBy(16.dp),
+                ) {
+                    Icon(icon, contentDescription = null, tint = tint, modifier = Modifier.size(24.dp))
+                    Text(label, style = GCalText.Sidebar, color = GCalColors.Ink)
+                }
+            }
+        }
+    }
+}
+```
+
+The **current-time indicator** in Day/Week view is a 2.dp `#D93025` line with a 10.dp leading dot; recompute its `y` offset every 60s from a `LaunchedEffect(Unit) { while (true) { tick = now(); delay(60_000) } }` and animate the position with a 1s `tween`.
+
+## 5. Navigation
+
+Google Calendar's primary navigation on phones is a **left drawer** (Schedule / Day / 3-Day / Week / Month), not a tab bar — use `ModalNavigationDrawer`. The bottom tab bar appears mainly on tablets; when present use Material 3 `NavigationBar`. Android has no live blur, so the sticky app bar is a 92%-opaque canvas `Surface`.
+
+```kotlin
+@Composable
+fun GCalDrawerRow(icon: androidx.compose.ui.graphics.vector.ImageVector, label: String, selected: Boolean, onClick: () -> Unit) {
+    Row(
+        Modifier
+            .fillMaxWidth()
+            .height(48.dp)
+            .clip(RoundedCornerShape(0.dp))
+            .background(if (selected) MaterialTheme.colorScheme.secondaryContainer else Color.Transparent)
+            .clickable(onClick = onClick)
+            .padding(horizontal = 16.dp),
+        verticalAlignment = Alignment.CenterVertically,
+        horizontalArrangement = Arrangement.spacedBy(16.dp),
+    ) {
+        Icon(icon, contentDescription = null, tint = if (selected) GCalColors.Blue else GCalColors.Secondary, modifier = Modifier.size(24.dp))
+        Text(label, style = GCalText.Sidebar, color = if (selected) GCalColors.Blue else GCalColors.Ink)
+    }
+}
+
+@Composable
+fun GCalTabletBar(selected: Int, onSelect: (Int) -> Unit) {
+    NavigationBar(containerColor = MaterialTheme.colorScheme.surface, tonalElevation = 0.dp) {
+        val items = listOf(
+            "Schedule" to Icons.AutoMirrored.Filled.ViewList,
+            "Day"      to Icons.Filled.CalendarViewDay,
+            "Week"     to Icons.Filled.CalendarViewWeek,
+            "Month"    to Icons.Filled.CalendarMonth,
+        )
+        items.forEachIndexed { i, (label, icon) ->
+            NavigationBarItem(
+                selected = selected == i,
+                onClick = { onSelect(i) },
+                icon = { Icon(icon, contentDescription = label, modifier = Modifier.size(22.dp)) },
+                label = { Text(label, style = GCalText.TabLabel) },
+                colors = NavigationBarItemDefaults.colors(
+                    selectedIconColor   = GCalColors.Blue,
+                    selectedTextColor   = GCalColors.Blue,
+                    unselectedIconColor = GCalColors.Secondary,
+                    unselectedTextColor = GCalColors.Secondary,
+                    indicatorColor      = GCalColors.BlueTint,
+                ),
+            )
+        }
+    }
+}
+```
+
+The drawer "My calendars" rows pair an 18.dp color square checkbox with the calendar name; tapping toggles visibility (filled square = visible, outlined = hidden). Selected view rows use `secondaryContainer` (= `#E8F0FE`).
+
+## 6. Motion
+
+| Moment | Compose recipe |
+|--------|----------------|
+| FAB tap | Material ripple from touch point (the concentric expand) + `pressedElevation` lift + `HapticFeedbackType.LongPress` (≈ `.impact(.medium)`) |
+| Action menu | `ModalBottomSheet` rises from FAB; `SharedTransitionLayout` morph on Compose 1.7+ |
+| Month-day tap | `Animatable` 1.0 → 1.05 → 1.0 `spring`, 250ms; transition to Day via `SharedTransitionLayout` zoom, 350ms |
+| Event detail open | `SharedTransitionLayout` + `Modifier.sharedElement(rememberSharedContentState(event.id), …)`, 300ms |
+| Current-time line | re-offset every 60s, animate position with 1s `tween` |
+| RSVP switch | `animateColorAsState` 200ms ease; no scale |
+| Drawer open/close | `ModalNavigationDrawer` 250ms with a `scrim` (`rgba(0,0,0,0.32)`) |
+
+```kotlin
+// Month-day tap bounce, then navigate
+@Composable
+fun MonthCellTappable(content: @Composable () -> Unit, onOpenDay: () -> Unit) {
+    val scale = remember { Animatable(1f) }
+    val haptics = LocalHapticFeedback.current
+    val scope = rememberCoroutineScope()
+    Box(
+        Modifier.scale(scale.value).clickable {
+            scope.launch {
+                scale.animateTo(1.05f, spring(stiffness = 500f)); scale.animateTo(1f, spring(stiffness = 500f))
+            }
+            haptics.performHapticFeedback(HapticFeedbackType.LongPress)
+            onOpenDay()
+        },
+    ) { content() }
+}
+```
+
+Haptics: prefer `LocalHapticFeedback`. `HapticFeedbackType.LongPress` ≈ iOS `.impact(.medium)`; `TextHandleMove` ≈ `.selection`. For richer control use `LocalView.current.performHapticFeedback(HapticFeedbackConstants.CONFIRM)` (API 30+).
+
+## 7. Icons
+
+Google Calendar uses Material Symbols natively; `androidx.compose.material:material-icons-extended` is the first-party match. The Google Calendar logo and any custom glyphs ship as vector drawables (`ImageVector.vectorResource(R.drawable.…)`).
+
+| Purpose | SF Symbol (iOS) | Material Icon (Compose) |
+|---------|-----------------|--------------------------|
+| FAB plus | `plus` | `Icons.Filled.Add` |
+| Schedule view | `list.bullet` | `Icons.AutoMirrored.Filled.ViewList` |
+| Day view | `calendar.day.timeline.left` | `Icons.Filled.CalendarViewDay` |
+| Week view | `calendar` | `Icons.Filled.CalendarViewWeek` |
+| Month view | `calendar` | `Icons.Filled.CalendarMonth` |
+| Location pin | `mappin.and.ellipse` | `Icons.Filled.Place` |
+| Reminder | `bell.fill` | `Icons.Filled.Notifications` |
+| Drawer menu | `line.horizontal.3` | `Icons.Filled.Menu` |
+| Settings | `gearshape` | `Icons.Filled.Settings` |
+| Search | `magnifyingglass` | `Icons.Filled.Search` |
+| Today | `calendar.badge.clock` | `Icons.Filled.Today` |
+| Weather sun | `sun.max.fill` | `Icons.Filled.WbSunny` |
+| Google Meet | `video.fill` | `Icons.Filled.Videocam` |
+| Add guest | `person.badge.plus` | `Icons.Filled.PersonAddAlt1` |
+| Add description | `text.alignleft` | `Icons.AutoMirrored.Filled.Notes` |
+| Event (action menu) | `calendar` | `Icons.Filled.Event` |
+| Task (action menu) | `checkmark.circle` | `Icons.Filled.TaskAlt` |
+| Goal (action menu) | `flag` | `Icons.Filled.Flag` |
+
+## 8. Minimum SDK & Accessibility Notes
+
+- **minSdk 24** (Compose floor is 21; `SharedTransitionLayout` and modern motion are comfortable at 24). `compileSdk 34+`, Compose BOM `2024.09+`, Kotlin `2.0+`.
+- **Edge-to-edge**: call `enableEdgeToEdge()` in the `Activity`; the white canvas wants dark status-bar icons (charcoal `#202124` in dark wants light icons). Use `Scaffold` insets so the FAB floats 16.dp above the gesture nav and the app bar clears the camera cutout. The Month grid is edge-to-edge (0.dp horizontal margin).
+- **Font scaling**: `sp` honors the user's font scale automatically — keep it on event titles, body, nav titles, sidebar items. Pin layout-sensitive text (Month-grid day numbers, 11sp time gutter, 12sp weekday headers, 10sp tab labels) by deriving size from `dp` or wrapping in `CompositionLocalProvider(LocalDensity provides Density(density, fontScale = 1f))` so the uniform grid cells and timeline columns never break. Clamp the 36sp Schedule day number at ~44sp max.
+- **Tabular figures**: keep `fontFeatureSettings = "tnum"` on every time / day-number style — column alignment ("9:00 AM / 10:30 AM") is layout-critical and breaks without it.
+- **TalkBack**: collapse the event card into one node with `Modifier.semantics(mergeDescendants = true)` — "Stand-up, 9 to 9:30 AM, Conference Room B, in Work calendar, double-tap to open." Announce the Today cell as "Today, May 14".
+- **Touch targets**: Material guidance is 48.dp minimum. The FAB (56.dp) and drawer rows (48.dp) are clear; ensure Month-grid cells expose a ≥48.dp tap zone and the 11.dp location glyph sits inside the ≥48.dp row.
+- **Contrast**: `#202124` on `#FFFFFF` exceeds AAA. `#5F6368` secondary meets AA only at 14sp+ Medium — the 13sp event-time text sits right at that boundary, so boost it toward `#3C4043` when the system "increase contrast" setting (`isHighTextContrastEnabled`) is on. In dark mode, swap the Material dual-shadow for a `surfaceColorAtElevation()` tonal tint since shadows vanish on `#202124`.
+- **Dynamic color**: **RECOMMENDED — embrace `dynamicColorScheme()`.** Google Calendar is a Material-native Google app; on Android 12+ it should adopt Material You and tint chrome (surfaces, the selected-row container, app bar) from the user's wallpaper. Keep only the *semantic* anchors fixed: the four event colors (Blue/Red/Yellow/Green), the full 24-swatch user calendar palette, and the red current-time indicator — these carry calendar-source meaning and must never drift with the wallpaper. The blue FAB may flow to the dynamic `primary` since it is the generic "create" action.