designmd-forge 1.2.0

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

@@ -0,0 +1,475 @@
+# Miro (iOS) — Jetpack Compose Implementation Guide
+
+Companion to [DESIGN.md](DESIGN.md) — the framework-neutral spec. This file ports Miro's visual language to **Android with Jetpack Compose (Material 3)**: a color token object, a `Typography` set, paste-ready `@Composable`s, the gesture-driven infinite canvas, the floating toolbar, 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 (Miro Yellow on ink, the infinite dotted-grid canvas, paper sticky notes, the floating toolbar, Miro Blue selection, live cursors) while making everything idiomatic Android — `pointerInput` transform gestures instead of UIKit gestures, a `NavigationBar` for Boards-home, a `Popup` for tool sub-palettes, `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 board thumbnails and image objects. No color extraction — Miro's palette is fixed (yellow/ink/blue + fixed sticky pastels), so Palette is not needed. Do not enable Material You dynamic color: the Miro Yellow + ink identity must hold regardless of wallpaper.
+
+## 1. Color Tokens
+
+```kotlin
+// ui/theme/MiroColors.kt
+import androidx.compose.ui.graphics.Color
+
+object MiroColors {
+    // Board & Chrome (Light)
+    val Board          = Color(0xFFF5F5F7)
+    val Grid           = Color(0xFFD7D7DE)
+    val Chrome         = Color(0xFFFFFFFF)
+    val SurfaceGray    = Color(0xFFF1F1F4)
+    val SurfacePressed = Color(0xFFE6E6EB)
+    val Divider        = Color(0xFFE3E3E8)
+
+    // Board & Chrome (Dark)
+    val DarkCanvas   = Color(0xFF1B1B1F)
+    val DarkBoard    = Color(0xFF202024)
+    val DarkGrid     = Color(0xFF38383F)
+    val DarkSurface1 = Color(0xFF26262B)
+    val DarkSurface2 = Color(0xFF313138)
+
+    // Text
+    val Ink           = Color(0xFF050038) // Miro Ink — primary text on light, glyph on yellow
+    val TextSecondary = Color(0xFF6B6B7B)
+    val TextTertiary  = Color(0xFF9A9AA4)
+    val DarkTextPrimary = Color(0xFFECECEF)
+    val NoteInk       = Color(0xFF2A2A33)
+
+    // Brand / interactive
+    val Yellow        = Color(0xFFFFD02F)
+    val YellowPressed = Color(0xFFE8B800)
+    val Blue          = Color(0xFF4262FF) // selection / interaction
+    val BluePressed   = Color(0xFF2F4AE0)
+
+    // Sticky note palette — full-color in both modes
+    val NoteYellow = Color(0xFFFEF3B6)
+    val NotePink   = Color(0xFFF8C8D8)
+    val NoteGreen  = Color(0xFFC7E8C7)
+    val NoteBlue   = Color(0xFFBCE0F5)
+    val NoteOrange = Color(0xFFFCD9B6)
+    val NoteViolet = Color(0xFFDCC9F0)
+
+    // Semantic
+    val Error   = Color(0xFFE5484D)
+    val Success = Color(0xFF2EA56A)
+    val Warning = Color(0xFFF0A92B)
+}
+
+// Multiplayer cursor colors — round-robin per collaborator
+val MiroCursorColors = listOf(
+    Color(0xFF4262FF), Color(0xFFF24822), Color(0xFF14AE5C),
+    Color(0xFF9747FF), Color(0xFFF2A900), Color(0xFFE5489E),
+)
+```
+
+Wire it into both schemes. Miro is light-first; the dark scheme uses `#202024` board, never true black. Primary is `Yellow` with `onPrimary` = `Ink`.
+
+```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 MiroLight = lightColorScheme(
+    primary        = MiroColors.Yellow,
+    onPrimary      = MiroColors.Ink,
+    secondary      = MiroColors.Blue,
+    background     = MiroColors.Board,
+    onBackground   = MiroColors.Ink,
+    surface        = MiroColors.Chrome,
+    onSurface      = MiroColors.Ink,
+    surfaceVariant = MiroColors.SurfaceGray,
+    outline        = MiroColors.Divider,
+    error          = MiroColors.Error,
+)
+
+private val MiroDark = darkColorScheme(
+    primary        = MiroColors.Yellow,
+    onPrimary      = MiroColors.Ink,
+    secondary      = MiroColors.Blue,
+    background     = MiroColors.DarkBoard,
+    onBackground   = MiroColors.DarkTextPrimary,
+    surface        = MiroColors.DarkSurface1,
+    onSurface      = MiroColors.DarkTextPrimary,
+    surfaceVariant = MiroColors.DarkSurface2,
+    outline        = MiroColors.DarkGrid,
+    error          = MiroColors.Error,
+)
+
+@Composable
+fun MiroTheme(
+    dark: Boolean = isSystemInDarkTheme(),
+    content: @Composable () -> Unit,
+) = MaterialTheme(
+    colorScheme = if (dark) MiroDark else MiroLight,
+    typography = MiroTypography,
+    content = content,
+)
+```
+
+## 2. Typography
+
+Miro's UI face is **Inter** (drop the TTFs in `res/font/`); Caveat is an optional handwriting sticky face; JetBrains Mono is code-embed only. UI hierarchy, not editorial rhythm; board title 800; `pt → sp` 1:1.
+
+```kotlin
+// ui/theme/MiroType.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 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),
+    Font(R.font.inter_extrabold, FontWeight.ExtraBold),
+)
+val Caveat = FontFamily(Font(R.font.caveat_semibold, FontWeight.SemiBold))
+val JetBrainsMono = FontFamily(Font(R.font.jetbrains_mono_regular, FontWeight.Normal))
+
+object MiroText {
+    val BoardTitle = TextStyle(Inter, fontWeight = FontWeight.ExtraBold, fontSize = 28.sp, lineHeight = 34.sp, letterSpacing = (-0.5).sp)
+    val H1         = TextStyle(Inter, fontWeight = FontWeight.Bold,      fontSize = 22.sp, lineHeight = 28.sp, letterSpacing = (-0.3).sp)
+    val FrameLabel = TextStyle(Inter, fontWeight = FontWeight.Bold,      fontSize = 18.sp, lineHeight = 23.sp, letterSpacing = (-0.2).sp)
+    val Sticky     = TextStyle(Inter, fontWeight = FontWeight.SemiBold,  fontSize = 16.sp, lineHeight = 21.sp)
+    val Body       = TextStyle(Inter, fontWeight = FontWeight.Normal,    fontSize = 16.sp, lineHeight = 24.sp)
+    val Control    = TextStyle(Inter, fontWeight = FontWeight.SemiBold,  fontSize = 15.sp, lineHeight = 15.sp)
+    val Button     = TextStyle(Inter, fontWeight = FontWeight.Bold,      fontSize = 15.sp, lineHeight = 15.sp)
+    val Meta       = TextStyle(Inter, fontWeight = FontWeight.Normal,    fontSize = 14.sp, lineHeight = 19.sp)
+    val Caption    = TextStyle(Inter, fontWeight = FontWeight.SemiBold,  fontSize = 12.sp, lineHeight = 12.sp, letterSpacing = 0.2.sp)
+    val Connector  = TextStyle(Inter, fontWeight = FontWeight.Medium,    fontSize = 13.sp, lineHeight = 16.sp)
+    val ListRow    = TextStyle(Inter, fontWeight = FontWeight.Medium,    fontSize = 16.sp, lineHeight = 21.sp)
+    val Tab        = TextStyle(Inter, fontWeight = FontWeight.SemiBold,  fontSize = 10.sp, lineHeight = 10.sp, letterSpacing = 0.1.sp)
+    val Avatar     = TextStyle(Inter, fontWeight = FontWeight.Bold,      fontSize = 11.sp, lineHeight = 11.sp, letterSpacing = 0.2.sp)
+}
+
+val MiroTypography = Typography(
+    headlineLarge  = MiroText.BoardTitle,
+    headlineMedium = MiroText.H1,
+    titleMedium    = MiroText.FrameLabel,
+    bodyMedium     = MiroText.Body,
+    labelSmall     = MiroText.Tab,
+)
+```
+
+## 3. Signature Components
+
+### Infinite Canvas (transform gestures + dotted grid)
+
+```kotlin
+import androidx.compose.foundation.background
+import androidx.compose.foundation.gestures.detectTransformGestures
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.runtime.*
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.drawBehind
+import androidx.compose.ui.geometry.Offset
+import androidx.compose.ui.graphics.graphicsLayer
+import androidx.compose.ui.input.pointer.pointerInput
+import androidx.compose.ui.unit.dp
+
+@Composable
+fun MiroCanvas(dark: Boolean, content: @Composable () -> Unit) {
+    var scale by remember { mutableFloatStateOf(1f) }
+    var offset by remember { mutableStateOf(Offset.Zero) }
+    val gridColor = if (dark) MiroColors.DarkGrid else MiroColors.Grid
+
+    Box(
+        Modifier
+            .fillMaxSize()
+            .background(if (dark) MiroColors.DarkBoard else MiroColors.Board)
+            .pointerInput(Unit) {
+                detectTransformGestures { _, pan, zoom, _ ->
+                    scale = (scale * zoom).coerceIn(0.2f, 5f)
+                    offset += pan
+                }
+            }
+            .drawBehind {
+                val step = 28.dp.toPx() * scale
+                if (step >= 6f) {
+                    var x = offset.x % step
+                    while (x < size.width) {
+                        var y = offset.y % step
+                        while (y < size.height) { drawCircle(gridColor, radius = 0.75f * scale, center = Offset(x, y)); y += step }
+                        x += step
+                    }
+                }
+            },
+    ) {
+        Box(Modifier.graphicsLayer {
+            translationX = offset.x; translationY = offset.y
+            scaleX = scale; scaleY = scale
+            transformOrigin = androidx.compose.ui.graphics.TransformOrigin(0f, 0f)
+        }) { content() }
+    }
+}
+```
+
+### Sticky Note — *signature*
+
+```kotlin
+import androidx.compose.foundation.clickable
+import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material3.Text
+import androidx.compose.ui.draw.clip
+import androidx.compose.ui.draw.shadow
+import androidx.compose.ui.text.style.TextAlign
+import androidx.compose.foundation.border
+
+@Composable
+fun MiroStickyNote(text: String, fill: Color = MiroColors.NoteYellow, selectedInit: Boolean = false) {
+    var selected by remember { mutableStateOf(selectedInit) }
+    Box(Modifier.size(96.dp).clickable { selected = !selected }) {
+        Box(
+            Modifier.size(96.dp)
+                .shadow(9.dp, RoundedCornerShape(4.dp), spotColor = Color.Black.copy(alpha = 0.18f))
+                .clip(RoundedCornerShape(4.dp)).background(fill).padding(10.dp),
+            contentAlignment = Alignment.Center,
+        ) {
+            Text(text, style = MiroText.Sticky, color = MiroColors.NoteInk, textAlign = TextAlign.Center, maxLines = 5)
+            // For true auto-fit, measure with TextMeasurer and shrink fontSize until it fits.
+        }
+        if (selected) {
+            Box(Modifier.matchParentSize().padding((-4).dp).border(2.dp, MiroColors.Blue, RoundedCornerShape(6.dp)))
+            Box(Modifier.align(Alignment.BottomCenter).offset(y = 8.dp)
+                .size(width = 30.dp, height = 4.dp).clip(RoundedCornerShape(3.dp)).background(MiroColors.Blue))
+        }
+    }
+}
+```
+
+### Floating Toolbar
+
+```kotlin
+import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.filled.*
+import androidx.compose.material3.Icon
+import androidx.compose.ui.graphics.vector.ImageVector
+import androidx.compose.ui.hapticfeedback.HapticFeedbackType
+import androidx.compose.ui.platform.LocalHapticFeedback
+
+private val toolIcons = listOf(
+    Icons.Filled.NearMe, Icons.Filled.StickyNote2, Icons.Filled.Edit,
+    Icons.Filled.Category, Icons.Filled.TextFields, Icons.Filled.CropFree,
+    Icons.Filled.ChatBubbleOutline, Icons.Filled.Add,
+)
+
+@Composable
+fun MiroToolbar(active: Int, onSelect: (Int) -> Unit) {
+    val haptics = LocalHapticFeedback.current
+    Row(
+        Modifier
+            .shadow(16.dp, RoundedCornerShape(16.dp), spotColor = Color.Black.copy(alpha = 0.22f))
+            .clip(RoundedCornerShape(16.dp))
+            .background(MiroColors.Chrome)
+            .border(1.dp, MiroColors.Divider, RoundedCornerShape(16.dp))
+            .padding(8.dp),
+        horizontalArrangement = Arrangement.spacedBy(4.dp),
+    ) {
+        toolIcons.forEachIndexed { i, icon ->
+            Box(
+                Modifier.size(40.dp).clip(RoundedCornerShape(11.dp))
+                    .background(if (i == active) MiroColors.Yellow else Color.Transparent)
+                    .clickable { haptics.performHapticFeedback(HapticFeedbackType.TextHandleMove); onSelect(i) },
+                contentAlignment = Alignment.Center,
+            ) {
+                Icon(icon, null, tint = if (i == active) MiroColors.Ink else MiroColors.TextSecondary, modifier = Modifier.size(20.dp))
+            }
+        }
+    }
+}
+```
+
+### Primary Button (Yellow)
+
+```kotlin
+@Composable
+fun MiroPrimaryButton(title: String, onClick: () -> Unit) {
+    val interaction = remember { MutableInteractionSource() }
+    val pressed by interaction.collectIsPressedAsState()
+    Box(
+        Modifier
+            .graphicsLayer { val s = if (pressed) 0.98f else 1f; scaleX = s; scaleY = s }
+            .clip(RoundedCornerShape(10.dp))
+            .background(if (pressed) MiroColors.YellowPressed else MiroColors.Yellow)
+            .clickable(interaction, indication = null) { onClick() }
+            .padding(vertical = 13.dp, horizontal = 26.dp),
+        contentAlignment = Alignment.Center,
+    ) { Text(title, style = MiroText.Button, color = MiroColors.Ink) }
+}
+```
+
+### Multiplayer Cursor
+
+```kotlin
+import androidx.compose.animation.core.animateOffsetAsState
+import androidx.compose.animation.core.tween
+import androidx.compose.ui.draw.rotate
+
+@Composable
+fun MiroCursor(name: String, colorIndex: Int, target: Offset) {
+    val color = MiroCursorColors[colorIndex % MiroCursorColors.size]
+    // Interpolate between network updates so the cursor glides, never jumps
+    val pos by animateOffsetAsState(target, tween(50), label = "cursor")
+    Row(
+        Modifier.graphicsLayer { translationX = pos.x; translationY = pos.y },
+        verticalAlignment = Alignment.CenterVertically, horizontalArrangement = Arrangement.spacedBy(5.dp),
+    ) {
+        Icon(Icons.Filled.NearMe, null, tint = color, modifier = Modifier.size(14.dp).rotate(-35f))
+        Box(Modifier.clip(RoundedCornerShape(10.dp)).background(color).padding(horizontal = 7.dp, vertical = 2.dp)) {
+            Text(name, style = MiroText.Avatar, color = Color.White)
+        }
+    }
+}
+```
+
+## 4. Board Editor + Zoom / Tool Sub-palette
+
+Miro's creation UX flows through the floating toolbar; long-pressing a tool opens its sub-palette. On Android use a `Popup` so it floats above the canvas with the right shadow and a tap-outside dismiss.
+
+```kotlin
+import androidx.compose.ui.window.Popup
+import androidx.compose.ui.window.PopupProperties
+
+@Composable
+fun MiroToolSubPalette(swatches: List<Color>, onPick: (Color) -> Unit, onDismiss: () -> Unit) {
+    Popup(onDismissRequest = onDismiss, properties = PopupProperties(focusable = true)) {
+        Row(
+            Modifier
+                .shadow(14.dp, RoundedCornerShape(12.dp), spotColor = Color.Black.copy(alpha = 0.22f))
+                .clip(RoundedCornerShape(12.dp)).background(MiroColors.Chrome)
+                .border(1.dp, MiroColors.Divider, RoundedCornerShape(12.dp))
+                .padding(10.dp),
+            horizontalArrangement = Arrangement.spacedBy(8.dp),
+        ) {
+            swatches.forEach { c ->
+                Box(Modifier.size(24.dp).clip(androidx.compose.foundation.shape.CircleShape).background(c).clickable { onPick(c) })
+            }
+        }
+    }
+}
+```
+
+### Zoom Pill
+
+```kotlin
+@Composable
+fun MiroZoomPill(percent: Int, onZoom: (Int) -> Unit) {
+    Column(
+        Modifier
+            .shadow(10.dp, RoundedCornerShape(12.dp), spotColor = Color.Black.copy(alpha = 0.16f))
+            .clip(RoundedCornerShape(12.dp)).background(MiroColors.Chrome),
+        horizontalAlignment = Alignment.CenterHorizontally,
+    ) {
+        Box(Modifier.size(38.dp).clickable { onZoom(25) }, contentAlignment = Alignment.Center) {
+            Icon(Icons.Filled.Add, "Zoom in", tint = MiroColors.Ink, modifier = Modifier.size(18.dp))
+        }
+        Text("$percent%", style = MiroText.Caption, color = MiroColors.TextSecondary,
+            modifier = Modifier.padding(vertical = 4.dp))
+        Box(Modifier.size(38.dp).clickable { onZoom(-25) }, contentAlignment = Alignment.Center) {
+            Icon(Icons.Filled.Remove, "Zoom out", tint = MiroColors.Ink, modifier = Modifier.size(18.dp))
+        }
+    }
+}
+```
+
+## 5. Navigation
+
+Inside a board there is no bottom bar (the toolbar floats over the canvas). The Boards-home shell uses a `NavigationBar`; active is `Ink`, no tint pill.
+
+```kotlin
+import androidx.compose.material3.*
+
+@Composable
+fun MiroHomeBar(selected: Int, onSelect: (Int) -> Unit) {
+    NavigationBar(containerColor = MiroColors.Chrome, tonalElevation = 0.dp) {
+        val items = listOf(
+            "Boards"    to Icons.Filled.GridView,
+            "Templates" to Icons.Filled.Dashboard,
+            "Activity"  to Icons.Filled.Notifications,
+            "Profile"   to Icons.Filled.AccountCircle,
+        )
+        items.forEachIndexed { i, (label, icon) ->
+            NavigationBarItem(
+                selected = selected == i, onClick = { onSelect(i) },
+                icon = { Icon(icon, label, modifier = Modifier.size(24.dp)) },
+                label = { Text(label, style = MiroText.Tab) },
+                colors = NavigationBarItemDefaults.colors(
+                    selectedIconColor = MiroColors.Ink,
+                    unselectedIconColor = MiroColors.TextSecondary,
+                    indicatorColor = Color.Transparent, // no Material pill — Miro has none
+                ),
+            )
+        }
+    }
+}
+```
+
+## 6. Motion
+
+Miro motion is springy and tactile — objects feel like physical paper; remote cursors glide.
+
+| Moment | Compose recipe |
+|--------|----------------|
+| Pan / zoom | `detectTransformGestures`; clamp scale 0.2–5; offset accumulates |
+| Zoom-to-fit (double-tap) | `animateFloatAsState` scale → 1 + `animateOffsetAsState` offset → 0 `tween(350)` |
+| Object create (sticky) | `AnimatedVisibility` scale-in from 0.85 `spring(dampingRatio = MediumBouncy)` + soft haptic |
+| Object drag | follow finger; `scale 1.03` + shadow bloom; settle `spring(dampingRatio = 0.82)`; soft haptic on drop |
+| Connector draw | rubber-band line follows pointer; magnet-snap to anchor + rigid haptic |
+| Tool select | active fill `Crossfade`/`animateColorAsState` ~120ms; sub-palette `Popup` spring pop |
+| Selection box | `AnimatedVisibility` `fadeIn(tween(120))` when selected |
+| Multiplayer cursor | `animateOffsetAsState(target, tween(50))` so it glides between updates |
+| Sheet present | `ModalBottomSheet` spring `(dampingRatio = 0.82)`; ink-tinted scrim |
+
+```kotlin
+// Zoom-to-fit — the canonical reset
+val animScale by animateFloatAsState(targetScale, tween(350), label = "fit")
+val animOffset by animateOffsetAsState(targetOffset, tween(350), label = "fitOffset")
+```
+
+Haptics: `LocalHapticFeedback.performHapticFeedback(HapticFeedbackType.LongPress)` for soft impact on object create / drag drop; use `HapticFeedbackType.TextHandleMove` for the lighter tool-select tick; a rigid pulse on connector snap. Auto-save is silent; show a "Saved"/"Syncing…" snackbar only on conflict or offline.
+
+## 7. Icons
+
+Use `androidx.compose.material:material-icons-extended`. Sticky-note text is user content (not an icon); the active tool fills `MiroColors.Yellow` with an `Ink` glyph.
+
+| Purpose | SF Symbol (iOS) | Material Icon (Compose) |
+|---------|-----------------|--------------------------|
+| Select tool | `cursorarrow` | `Icons.Filled.NearMe` |
+| Sticky note tool | `square.fill` | `Icons.Filled.StickyNote2` |
+| Pen tool | `pencil.tip` | `Icons.Filled.Edit` |
+| Shapes tool | `square.on.circle` | `Icons.Filled.Category` |
+| Text tool | `textformat` | `Icons.Filled.TextFields` |
+| Frame tool | `rectangle.dashed` | `Icons.Filled.CropFree` |
+| Comment tool | `bubble.left` | `Icons.Filled.ChatBubbleOutline` |
+| More tool | `plus` | `Icons.Filled.Add` |
+| Zoom in / out | `plus` / `minus` | `Icons.Filled.Add` / `Icons.Filled.Remove` |
+| Fit / minimap | `arrow.up.left.and.arrow.down.right` | `Icons.Filled.OpenInFull` |
+| Back | `chevron.left` | `Icons.Filled.ArrowBack` |
+| Board menu | `chevron.down` | `Icons.Filled.ExpandMore` |
+| Board actions | `ellipsis` | `Icons.Filled.MoreHoriz` |
+| Collaborators | `person.2.fill` | `Icons.Filled.People` |
+| Share | `square.and.arrow.up` | `Icons.Filled.IosShare` |
+| Cursor (remote) | `cursorarrow.rays` | `Icons.Filled.NearMe` |
+| Boards (home) | `square.grid.2x2` | `Icons.Filled.GridView` |
+| Templates (home) | `rectangle.on.rectangle` | `Icons.Filled.Dashboard` |
+| Activity (home) | `bell` / `bell.fill` | `Icons.Filled.Notifications` |
+| Profile (home) | `person.crop.circle` | `Icons.Filled.AccountCircle` |
+
+## 8. Minimum SDK & Accessibility Notes
+
+- **minSdk 24** (Compose floor is 21; transform gestures + `Popup` are comfortable at 24). `compileSdk 34+`, Compose BOM `2024.09+`, Kotlin `2.0+`.
+- **Edge-to-edge**: call `enableEdgeToEdge()`; the board top bar is translucent over the canvas (light-content system bars on the light board, dark-content in dark mode if the chrome is light there). Float toolbar + zoom pill above the gesture nav bar.
+- **Canvas perf**: drive pan/zoom with a single `graphicsLayer` transform; draw the grid in `drawBehind` (skip when `step < 6f`); virtualize off-screen objects on large boards; offload the realtime layer off the main thread.
+- **Font scaling**: `sp` honors the user's font scale — keep it on board title, H1, body, list rows; pin layout-sensitive text (toolbar labels, 12sp zoom %, avatar initials, connector labels, 10sp tab labels) via `dp`-derived sizes or `CompositionLocalProvider(LocalDensity provides Density(density, fontScale = 1f))`. Sticky-note text should auto-fit its box (measure + shrink), independent of font scale.
+- **TalkBack**: the infinite canvas is hard to navigate non-visually — expose objects as an accessible list with a "Find on board" search; label sticky notes "Sticky note: {text}, {color}"; toolbar tools labeled by name + selected state; announce remote presence sparingly ("{name} is editing").
+- **Touch targets**: Material guidance is 48.dp. Give 40.dp toolbar tiles, 38.dp zoom buttons, and resize handles a 48.dp hit area via padding; list rows/buttons ≥ 48.dp.
+- **Contrast**: `#050038` on `#FFD02F` passes WCAG AA for the primary button; `#2A2A33` on every sticky pastel passes AA; verify `#4262FF` selection chrome against both board colors.
+- **Reduce motion**: when `Settings.Global.ANIMATOR_DURATION_SCALE == 0`, disable pan inertia, the object scale-in, and zoom-to-fit animation (jump instead); keep the selection box; freeze cursor interpolation to discrete updates.
+- **Dark mode**: invert chrome to `#26262B` and board to `#202024` — **sticky notes stay full-color** (paper doesn't go dark); Miro Yellow / Blue selection unchanged; cursor colors unchanged. Shadows are nearly invisible on dark, so a 1dp `DarkGrid` border on the floating toolbar/popovers is the elevation cue. Do **not** enable `dynamicColorScheme()` — the Miro Yellow + ink identity must hold regardless of wallpaper.