Release v2.22.0 (#355)

Views: navigation, transitions and split-view behaviour.

See CHANGELOG.md for the full list.

Co-authored-by: Jean-Luc Makiola <business@jeanlucmakiola.de>
Reviewed-on: https://codeberg.org/jlmakiola/calendula/pulls/355

app/src/main/java/de/jeanlucmakiola/calendula/MainActivity.kt

@@ -32,6 +32,7 @@ import de.jeanlucmakiola.calendula.domain.EventForm
 import de.jeanlucmakiola.calendula.domain.buildInsertEventForm
 import de.jeanlucmakiola.calendula.ui.RootScreen
 import de.jeanlucmakiola.calendula.ui.common.LocalShowHourGrid
+import de.jeanlucmakiola.calendula.ui.common.LocalMultiDayCount
 import de.jeanlucmakiola.calendula.ui.common.LocalTimelineZoom
 import de.jeanlucmakiola.calendula.ui.common.rememberTimelineZoom
 import de.jeanlucmakiola.calendula.ui.common.LocalSoftenColors
@@ -169,6 +170,7 @@ class MainActivity : AppCompatActivity() {
             // weeks and switching between the week and day view.
             val timelineZoom = rememberTimelineZoom(
                 stored = settings.timelineScale,
+                hours = settings.timelineHours,
                 onPersist = settingsViewModel::setTimelineScale,
             )
             val fonts by settingsViewModel.fontState.collectAsStateWithLifecycle()
@@ -188,6 +190,7 @@ class MainActivity : AppCompatActivity() {
                         LocalUse24HourFormat provides use24Hour,
                         LocalShowHourGrid provides settings.showHourGrid,
                         LocalTimelineZoom provides timelineZoom,
+                        LocalMultiDayCount provides settings.multiDayCount,
                         LocalSoftenColors provides settings.softenColors,
                     ) {
                         RootScreen(

app/src/main/java/de/jeanlucmakiola/calendula/data/calendar/CalendarDataSource.kt

@@ -1261,6 +1261,13 @@ class AndroidCalendarDataSource @Inject constructor(
             values.toContentValues(),
         ) ?: throw WriteFailedException("modify occurrence event id=$eventId begin=$beginMillis")
         val exceptionId = ContentUris.parseId(uri)
+        form.colorKey?.let { key ->
+            resolver.update(
+                ContentUris.withAppendedId(CalendarContract.Events.CONTENT_URI, exceptionId),
+                ContentValues().apply { put(CalendarContract.Events.EVENT_COLOR_KEY, key) },
+                null, null,
+            )
+        }
         // Whether the provider copied the parent's reminder rows is its
         // business — reconciling against the actual rows handles both ways.
         reconcileReminders(exceptionId, encodedReminders(form, allDayReminderTimeMinutes))

app/src/main/java/de/jeanlucmakiola/calendula/data/calendar/EventWriteMapper.kt

@@ -247,6 +247,10 @@ internal fun buildEventUpdateValues(
  * DTSTART + DURATION itself, clearing the inherited RRULE in the process. This
  * matches how AOSP Calendar/Etar write exceptions; sending DTEND is what made
  * "only this event" fail on-device (Codeberg #16).
+ *
+ * A palette key is left out: the provider crashes on an exception insert that
+ * carries `EVENT_COLOR_KEY` (Codeberg #338), so the caller sets it with a plain
+ * update once the row exists.
  */
 internal fun buildOccurrenceExceptionValues(
     form: EventForm,
@@ -264,7 +268,7 @@ internal fun buildOccurrenceExceptionValues(
     put(CalendarContract.Events.ACCESS_LEVEL, form.accessLevel.toProviderValue())
     put(CalendarContract.Events.EVENT_LOCATION, form.location.trim().ifEmpty { null })
     put(CalendarContract.Events.DESCRIPTION, form.description.trim().ifEmpty { null })
-    putAll(eventColorColumns(form.colorKey, form.color))
+    if (form.colorKey == null) putAll(eventColorColumns(null, form.color))
 }
 
 /**

app/src/main/java/de/jeanlucmakiola/calendula/data/prefs/SettingsPrefs.kt

@@ -21,6 +21,7 @@ import de.jeanlucmakiola.calendula.ui.agenda.storageValue
 import de.jeanlucmakiola.calendula.ui.common.CalendarView
 import de.jeanlucmakiola.calendula.ui.common.IMPLEMENTED_VIEWS
 import de.jeanlucmakiola.calendula.ui.common.QuickSwitchConfig
+import de.jeanlucmakiola.calendula.ui.common.TimelineHours
 import de.jeanlucmakiola.calendula.ui.common.TimelineScale
 import de.jeanlucmakiola.calendula.ui.common.parseTimelineScale
 import de.jeanlucmakiola.calendula.ui.common.storageValue
@@ -287,6 +288,36 @@ class SettingsPrefs @Inject constructor(
         store.edit { it[TIMELINE_SCALE_KEY] = scale.storageValue() }
     }
 
+    /** How many days the multi-day view shows side by side (#193). */
+    val multiDayCount: Flow<Int> = store.data.map { prefs ->
+        (prefs[MULTI_DAY_COUNT_KEY] ?: DEFAULT_MULTI_DAY_COUNT).coerceIn(MULTI_DAY_COUNTS)
+    }
+
+    suspend fun setMultiDayCount(count: Int) {
+        store.edit { it[MULTI_DAY_COUNT_KEY] = count.coerceIn(MULTI_DAY_COUNTS) }
+    }
+
+    /**
+     * The hours the day, week and multi-day timelines fit to the screen when they
+     * open (#322). Off by default; the hours survive switching it off.
+     */
+    val timelineHours: Flow<TimelineHours> = store.data.map { prefs ->
+        TimelineHours.of(
+            enabled = prefs[TIMELINE_HOURS_ENABLED_KEY] ?: false,
+            startHour = prefs[TIMELINE_HOURS_START_KEY] ?: TimelineHours.DEFAULT_START_HOUR,
+            endHour = prefs[TIMELINE_HOURS_END_KEY] ?: TimelineHours.DEFAULT_END_HOUR,
+        )
+    }
+
+    suspend fun setTimelineHours(hours: TimelineHours) {
+        val valid = TimelineHours.of(hours.enabled, hours.startHour, hours.endHour)
+        store.edit {
+            it[TIMELINE_HOURS_ENABLED_KEY] = valid.enabled
+            it[TIMELINE_HOURS_START_KEY] = valid.startHour
+            it[TIMELINE_HOURS_END_KEY] = valid.endHour
+        }
+    }
+
     /**
      * Where the jump-to-today control lives (issue #60). Default OFF — the
      * historical layout, where it's an extended FAB that fades in above the "+"
@@ -948,10 +979,20 @@ class SettingsPrefs @Inject constructor(
             if (view in config.enabled) view.name else "!${view.name}"
         }
 
-    /** Keep the given order (de-duplicated), then append any views it omits. */
+    /** Keep stored order; insert the new multi-day view after Week on upgrades. */
     private fun completeViewOrder(seen: List<CalendarView>): List<CalendarView> {
-        val ordered = seen.distinct()
-        return ordered + IMPLEMENTED_VIEWS.filterNot { it in ordered }
+        val ordered = seen.distinct().toMutableList()
+        IMPLEMENTED_VIEWS.forEach { view ->
+            if (view !in ordered) {
+                val index = if (view == CalendarView.MultiDay && CalendarView.Week in ordered) {
+                    ordered.indexOf(CalendarView.Week) + 1
+                } else {
+                    ordered.size
+                }
+                ordered.add(index, view)
+            }
+        }
+        return ordered
     }
 
     companion object {
@@ -1017,8 +1058,14 @@ class SettingsPrefs @Inject constructor(
         internal const val DEFAULT_ALLDAY_REMINDER_TIME = 540
         private const val MINUTES_PER_DAY = 1_440
         internal val SNOOZE_MINUTES_KEY = intPreferencesKey("snooze_minutes")
+        internal val MULTI_DAY_COUNT_KEY = intPreferencesKey("multi_day_count")
+        internal val TIMELINE_HOURS_ENABLED_KEY = booleanPreferencesKey("timeline_hours_enabled")
+        internal val TIMELINE_HOURS_START_KEY = intPreferencesKey("timeline_hours_start")
+        internal val TIMELINE_HOURS_END_KEY = intPreferencesKey("timeline_hours_end")
         /** Default snooze delay for the notification "Snooze" action. */
         const val DEFAULT_SNOOZE_MINUTES = 10
+        const val DEFAULT_MULTI_DAY_COUNT = 3
+        val MULTI_DAY_COUNTS = 3..6
         internal val CALENDAR_REMINDER_OVERRIDE_KEY =
             stringPreferencesKey("per_calendar_reminder_override")
         internal val CALENDAR_ALLDAY_REMINDER_OVERRIDE_KEY =

app/src/main/java/de/jeanlucmakiola/calendula/data/reminders/ReminderNotifier.kt

@@ -88,6 +88,7 @@ class ReminderNotifier @Inject constructor(
             is24Hour = is24Hour,
             today = Instant.now().atZone(zone).toLocalDate(),
             firstDayOfWeek = firstDayOfWeek,
+            todayLabel = context.getString(R.string.reminder_day_today),
             tomorrowLabel = context.getString(R.string.reminder_day_tomorrow),
             yesterdayLabel = context.getString(R.string.reminder_day_yesterday),
         )

app/src/main/java/de/jeanlucmakiola/calendula/data/reminders/ReminderTimeText.kt

@@ -27,12 +27,12 @@ import java.util.Locale
  *                                                          alone would be ambiguous)
  * - timed, crossing days: "11 Jun, 23:30 – 12 Jun, 00:30" (medium date + short time,
  *                                                          already unambiguous)
- * - all-day, one day:     "11 Jun 2026"
- * - all-day, multi-day:   "11 Jun 2026 – 12 Jun 2026"
+ * - all-day, one day:     "Tomorrow" / "Thu" / "11 Jun 2026" (same relative rules,
+ *                                                          plus [todayLabel] — no time range to lean on)
+ * - all-day, multi-day:   "Tomorrow – 12 Jun 2026"        (relative start, explicit end)
  *
- * All-day instances already carry an explicit date, so they never gain a
- * relative prefix. They store UTC midnights with an exclusive end, so they are
- * read in UTC and the end day is the last *covered* day.
+ * All-day instances store UTC midnights with an exclusive end, so they are read
+ * in UTC and the end day is the last *covered* day (issue #308).
  */
 fun reminderTimeText(
     beginMillis: Long,
@@ -43,6 +43,7 @@ fun reminderTimeText(
     is24Hour: Boolean,
     today: LocalDate,
     firstDayOfWeek: DayOfWeek,
+    todayLabel: String,
     tomorrowLabel: String,
     yesterdayLabel: String,
 ): String {
@@ -53,11 +54,16 @@ fun reminderTimeText(
         val lastDay = Instant.ofEpochMilli(endMillis).atZone(ZoneOffset.UTC).toLocalDate()
             .minusDays(1)
             .coerceAtLeast(firstDay)
-        return if (lastDay == firstDay) {
-            dateFormat.format(firstDay)
-        } else {
-            dateFormat.format(firstDay) + RANGE + dateFormat.format(lastDay)
-        }
+        val start = relativeDayPrefix(
+            day = firstDay,
+            today = today,
+            firstDayOfWeek = firstDayOfWeek,
+            locale = locale,
+            dateFormat = dateFormat,
+            tomorrowLabel = tomorrowLabel,
+            yesterdayLabel = yesterdayLabel,
+        ) ?: todayLabel
+        return if (lastDay == firstDay) start else start + RANGE + dateFormat.format(lastDay)
     }
 
     val timeFormat = timeOfDayFormatter(is24Hour, locale)

app/src/main/java/de/jeanlucmakiola/calendula/domain/EventDisplayOrder.kt

@@ -0,0 +1,18 @@
+package de.jeanlucmakiola.calendula.domain
+
+import kotlinx.datetime.TimeZone
+
+/** Lower values appear first in lists and get the upper visible lanes in grids. */
+fun EventInstance.displayPriority(zone: TimeZone): Int = when {
+    isDeclined -> 3
+    spansMultipleDays(zone) -> 0
+    isAllDay -> 1
+    else -> 2
+}
+
+/** Shared order for agenda and split day lists. Grid bars add their lane geometry. */
+fun eventDisplayComparator(zone: TimeZone): Comparator<EventInstance> =
+    compareBy<EventInstance> { it.displayPriority(zone) }
+        .thenBy { it.start }
+        .thenBy { it.title }
+        .thenBy { it.instanceId }

app/src/main/java/de/jeanlucmakiola/calendula/ui/CalendarHost.kt

@@ -1,24 +1,40 @@
 package de.jeanlucmakiola.calendula.ui
 
 import androidx.activity.compose.BackHandler
+import androidx.activity.compose.PredictiveBackHandler
 import androidx.compose.animation.AnimatedContent
 import androidx.compose.animation.AnimatedVisibility
+import androidx.compose.animation.ExperimentalSharedTransitionApi
+import androidx.compose.animation.SharedTransitionLayout
+import androidx.compose.animation.core.SeekableTransitionState
+import androidx.compose.animation.core.rememberTransition
 import androidx.compose.animation.fadeIn
-import androidx.compose.animation.fadeOut
 import androidx.compose.animation.slideInHorizontally
-import androidx.compose.animation.slideOutHorizontally
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.padding
+import androidx.compose.material3.DrawerValue
+import androidx.compose.material3.ModalNavigationDrawer
+import androidx.compose.material3.Scaffold
+import androidx.compose.material3.TopAppBarDefaults
+import androidx.compose.material3.rememberDrawerState
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.setValue
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.CompositionLocalProvider
 import androidx.compose.runtime.LaunchedEffect
-import androidx.compose.runtime.getValue
 import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.mutableIntStateOf
 import androidx.compose.runtime.remember
+import androidx.compose.runtime.rememberCoroutineScope
 import androidx.compose.runtime.saveable.listSaver
 import androidx.compose.runtime.saveable.rememberSaveable
-import androidx.compose.runtime.setValue
 import androidx.compose.ui.Modifier
+import de.jeanlucmakiola.calendula.ui.common.screen
+import de.jeanlucmakiola.calendula.ui.common.ViewScreen
+import androidx.compose.ui.layout.onGloballyPositioned
+import androidx.compose.ui.layout.positionInWindow
+import androidx.compose.ui.platform.LocalDensity
 import androidx.hilt.navigation.compose.hiltViewModel
 import androidx.lifecycle.compose.collectAsStateWithLifecycle
 import de.jeanlucmakiola.calendula.domain.EventForm
@@ -26,18 +42,39 @@ import de.jeanlucmakiola.calendula.domain.EventInstance
 import de.jeanlucmakiola.calendula.ui.agenda.AgendaScreen
 import de.jeanlucmakiola.calendula.ui.calendars.BackupScreen
 import de.jeanlucmakiola.calendula.ui.calendars.CalendarsScreen
+import de.jeanlucmakiola.calendula.ui.common.BelowTopBarClip
+import de.jeanlucmakiola.calendula.ui.common.StayingPut
+import de.jeanlucmakiola.calendula.ui.common.CalendarDrawer
+import de.jeanlucmakiola.calendula.ui.common.CalendarFab
+import de.jeanlucmakiola.calendula.ui.common.CalendarTopBar
+import de.jeanlucmakiola.calendula.ui.common.ChromeHost
+import de.jeanlucmakiola.calendula.ui.common.ChromeSlot
+import de.jeanlucmakiola.calendula.ui.common.LocalChromeSlot
+import de.jeanlucmakiola.calendula.ui.common.next
 import de.jeanlucmakiola.floret.identity.fadeThrough
+import de.jeanlucmakiola.floret.identity.predictiveBackExit
+import de.jeanlucmakiola.floret.identity.rememberReduceMotion
 import de.jeanlucmakiola.calendula.ui.common.CalendarView
 import de.jeanlucmakiola.calendula.ui.common.EventMoveHost
 import de.jeanlucmakiola.calendula.ui.common.EventMoveScope
 import de.jeanlucmakiola.calendula.ui.common.LocalEventMove
 import de.jeanlucmakiola.calendula.ui.common.LocalManageCalendars
+import de.jeanlucmakiola.calendula.ui.common.LocalTimelineScroll
+import de.jeanlucmakiola.calendula.ui.common.LocalViewFocus
+import de.jeanlucmakiola.calendula.ui.common.ViewFocus
+import de.jeanlucmakiola.calendula.ui.common.ViewFocusSaver
+import de.jeanlucmakiola.calendula.ui.common.LocalViewMorph
 import de.jeanlucmakiola.calendula.ui.common.RescheduleViewModel
+import de.jeanlucmakiola.calendula.ui.common.TimelineScrollMemory
+import de.jeanlucmakiola.calendula.ui.common.LocalTimelineZoom
+import de.jeanlucmakiola.calendula.ui.common.ViewMorphScope
+import de.jeanlucmakiola.calendula.ui.common.rememberCalendarFadeSpec
+import de.jeanlucmakiola.calendula.ui.common.rememberViewMorphBoundsTransform
 import de.jeanlucmakiola.calendula.ui.common.drillToDay
+import de.jeanlucmakiola.calendula.ui.common.drillToWeek
 import de.jeanlucmakiola.calendula.ui.common.rememberCalendarSlideSpec
 import de.jeanlucmakiola.calendula.ui.common.selectView
 import de.jeanlucmakiola.calendula.ui.common.viewBaseStack
-import de.jeanlucmakiola.calendula.ui.day.DayScreen
 import de.jeanlucmakiola.calendula.ui.detail.EventDetailScreen
 import de.jeanlucmakiola.calendula.ui.edit.EventEditScreen
 import de.jeanlucmakiola.calendula.ui.edit.ImportSource
@@ -45,16 +82,21 @@ import de.jeanlucmakiola.calendula.ui.imports.ImportScreen
 import de.jeanlucmakiola.calendula.ui.month.MonthScreen
 import de.jeanlucmakiola.calendula.ui.search.SearchScreen
 import de.jeanlucmakiola.calendula.ui.settings.SettingsScreen
-import de.jeanlucmakiola.calendula.ui.week.WeekScreen
+import de.jeanlucmakiola.calendula.ui.week.TimelineScreen
+import kotlinx.coroutines.NonCancellable
+import kotlinx.coroutines.withContext
+import kotlinx.coroutines.launch
 import kotlinx.datetime.LocalDate
 import kotlinx.datetime.TimeZone
 import kotlinx.datetime.toLocalDateTime
+import kotlin.coroutines.cancellation.CancellationException
 import kotlin.time.Clock
 
 /**
  * Holds the top-level view back stack (spec M1) and swaps between the calendar
- * screens. Each screen owns its own ViewModel and date anchor; the view-switcher
- * pill in their top bars writes back here via [onSelectView].
+ * screens. Each screen owns its own ViewModel; they all open on the one focused
+ * date held here ([ViewFocus]), and the view-switcher pill in their top bars
+ * writes back here via [onSelectView].
  *
  * The stack's bottom is the user's [CalendarHostViewModel.defaultView] home view.
  * A lateral switch (pill / drawer) builds a visit history so back retraces it
@@ -71,6 +113,7 @@ import kotlin.time.Clock
  * as [WidgetNavRequest.OpenEvent], which also roots the back stack in the
  * widget's view.)
  */
+@OptIn(ExperimentalSharedTransitionApi::class)
 @Composable
 fun CalendarHost(
     modifier: Modifier = Modifier,
@@ -102,14 +145,25 @@ fun CalendarHost(
     var viewStack by rememberSaveable(stateSaver = viewStackSaver) {
         mutableStateOf(listOf(defaultView))
     }
+    var navigationVersion by remember { mutableIntStateOf(0) }
     val view = viewStack.last()
-    val onSelectView: (CalendarView) -> Unit = { viewStack = viewStack.selectView(it) }
+    // The date every view opens on and carries along (#184); tapping a day
+    // anywhere focuses it and opens the day view there.
+    val focus = rememberSaveable(saver = ViewFocusSaver) { ViewFocus(localToday()) }
 
-    // Tapping a day in the month grid opens the day view anchored to that date.
-    var pendingDayIso by rememberSaveable { mutableStateOf<String?>(null) }
+    val switchScope = rememberCoroutineScope()
+    val switchTo: ((List<CalendarView>) -> List<CalendarView>) -> Unit = { move ->
+        navigationVersion++
+        viewStack = move(viewStack)
+    }
+    val onSelectView: (CalendarView) -> Unit = { target -> switchTo { it.selectView(target) } }
     val onOpenDay: (LocalDate) -> Unit = { date ->
-        pendingDayIso = date.toString()
-        viewStack = viewStack.drillToDay()
+        focus.navigateTo(date)
+        switchTo { it.drillToDay() }
+    }
+    val onOpenWeek: (LocalDate) -> Unit = { date ->
+        focus.navigateTo(date)
+        switchTo { it.drillToWeek() }
     }
 
     // The event-detail screen (S4) is a full-screen destination hoisted here so
@@ -259,13 +313,14 @@ fun CalendarHost(
     // [requestedDetailKey]. Date/event opens root the stack in the widget's own
     // view so backing out returns there (then home), not to the default.
     LaunchedEffect(widgetNavRequest) {
+        if (widgetNavRequest != null) navigationVersion++
         when (val req = widgetNavRequest) {
             is WidgetNavRequest.OpenDate -> {
                 // Drill the day view in over the widget's view: drop any overlay
                 // that would cover it, so the open doesn't land under Settings/form.
                 dismissCoveringOverlays()
                 createDateIso = null
-                pendingDayIso = req.dateIso
+                focus.navigateTo(LocalDate.parse(req.dateIso))
                 // No widget source (an external date tap) roots over the default
                 // home view, so backing out of the day returns home then exits.
                 viewStack = viewBaseStack(defaultView, req.source ?: defaultView).drillToDay()
@@ -289,7 +344,7 @@ fun CalendarHost(
                 // default home — so backing out returns to the default, then exits.
                 dismissCoveringOverlays()
                 createDateIso = null
-                pendingDayIso = null
+                focus.navigateTo(localToday())
                 viewStack = viewBaseStack(defaultView, req.view ?: defaultView)
                 onWidgetNavConsumed()
             }
@@ -340,6 +395,9 @@ fun CalendarHost(
     }
 
     val slideSpec = rememberCalendarSlideSpec()
+    // Overlays leave from the predictive-back preview (#184): shrinking on from
+    // where the gesture let go instead of snapping back and sliding off.
+    val overlayExit = predictiveBackExit()
 
     // Base-level back: pop the view stack while no overlay covers it (each overlay
     // owns its own BackHandler and takes precedence). Disabled at the home view,
@@ -347,76 +405,158 @@ fun CalendarHost(
     val anyOverlayVisible = showSearch || detailKey != null || createDateIso != null ||
         editKey != null || showSettings || showCalendars || showBackup ||
         importUri != null || importForm != null
-    BackHandler(enabled = !anyOverlayVisible && viewStack.size > 1) {
-        viewStack = viewStack.dropLast(1)
+    // The view switch runs on a seekable transition, so a back gesture can scrub
+    // it (#185): the previous view morphs in under the finger, releasing finishes
+    // the pop and cancelling springs back. Reduced motion keeps a plain back.
+    val viewTransition = remember { SeekableTransitionState(view) }
+    LaunchedEffect(view) { viewTransition.animateTo(view) }
+    val reduceMotion = rememberReduceMotion()
+    val viewBackEnabled = !anyOverlayVisible && viewStack.size > 1
+    if (reduceMotion) {
+        BackHandler(enabled = viewBackEnabled) {
+            navigationVersion++
+            viewStack = viewStack.dropLast(1)
+        }
+    } else {
+        PredictiveBackHandler(enabled = viewBackEnabled) { events ->
+            val previous = viewStack[viewStack.size - 2]
+            try {
+                events.collect { viewTransition.seekTo(it.progress, targetState = previous) }
+                navigationVersion++
+                viewStack = viewStack.dropLast(1)
+            } catch (e: CancellationException) {
+                withContext(NonCancellable) { viewTransition.animateTo(viewTransition.currentState) }
+                throw e
+            }
+        }
     }
 
     Box(modifier = modifier.fillMaxSize()) {
-        // Switching between the peer views (month/week/day/agenda) is lateral
+        // Switching between the month, timeline and agenda screens is lateral
         // navigation, so it fades through rather than sliding — paging *within* a
-        // view keeps the directional slide. AnimatedContent keyed on the view type.
+        // view keeps the directional slide. What both views show morphs across
+        // (#184): see [ViewMorphKey]. Reduced motion keeps the plain fade.
         val viewSwitch = fadeThrough()
+        val morphBounds = rememberViewMorphBoundsTransform()
+        val morphFade = rememberCalendarFadeSpec()
+        val morphClip = remember { BelowTopBarClip() }
+        val stayingPut = remember { StayingPut() }
+        val chromeHost = remember { ChromeHost() }
+        val drawerState = rememberDrawerState(DrawerValue.Closed)
+        val density = LocalDensity.current
+        val topBarBottom = TopAppBarDefaults.windowInsets.getTop(density) +
+            with(density) { TopAppBarDefaults.TopAppBarExpandedHeight.toPx() }
+        val timelineScroll = remember { TimelineScrollMemory() }
+        // A timeline reached from another screen opens on the visible hours
+        // (#322); only a switch between timeline views carries the scroll over.
+        val timelineZoom = LocalTimelineZoom.current
+        LaunchedEffect(view.screen) {
+            if (view.screen != ViewScreen.Timeline && timelineZoom.hours.enabled) {
+                timelineScroll.midnightY = null
+            }
+        }
         CompositionLocalProvider(
             LocalEventMove provides moveScope,
+            LocalTimelineScroll provides timelineScroll,
+            LocalViewFocus provides focus,
             // The failure state's way out when every calendar is switched off
             // (#239); nothing else in the calendar surfaces navigates here.
-            LocalManageCalendars provides { showCalendars = true },
+            LocalManageCalendars provides remember { { showCalendars = true } },
         ) {
-        AnimatedContent(
-            targetState = view,
+        // One drawer, top bar and FAB for every screen (#184): a switch changes
+        // what they say, from what the screen on show publishes, rather than
+        // swapping them for another screen's.
+        ModalNavigationDrawer(
+            drawerState = drawerState,
+            // Open only via the menu button where edge-swipe would fight paging;
+            // the agenda has no paging to fight.
+            gesturesEnabled = drawerState.isOpen || view.screen == ViewScreen.Agenda,
+            drawerContent = {
+                CalendarDrawer(
+                    currentView = view,
+                    currentDate = chromeHost.chrome?.drawerDate ?: focus.date,
+                    drawerState = drawerState,
+                    viewOrder = drawerViewOrder,
+                    onSelectView = { target ->
+                        // Once the drawer is out of the way, so the switch is seen whole.
+                        val requestVersion = ++navigationVersion
+                        switchScope.launch {
+                            drawerState.close()
+                            if (navigationVersion == requestVersion) onSelectView(target)
+                        }
+                    },
+                    onJumpToDate = { target ->
+                        chromeHost.actions?.onJumpToDate?.invoke(target)
+                        switchScope.launch { drawerState.close() }
+                    },
+                    onSettings = {
+                        onOpenSettings()
+                        switchScope.launch { drawerState.close() }
+                    },
+                )
+            },
+        ) {
+        Scaffold(
+            topBar = {
+                CalendarTopBar(
+                    host = chromeHost,
+                    selectedView = view,
+                    quickSwitchViews = quickSwitchViews,
+                    onCycleView = { onSelectView(viewStack.last().next(quickSwitchViews)) },
+                    onOpenDrawer = { switchScope.launch { drawerState.open() } },
+                    onOpenSearch = onOpenSearch,
+                    showTodayButton = todayInToolbar,
+                )
+            },
+            floatingActionButton = { CalendarFab(chromeHost, todayInToolbar) },
+        ) { innerPadding ->
+        SharedTransitionLayout(
+            Modifier
+                .padding(innerPadding)
+                .fillMaxSize()
+.onGloballyPositioned { morphClip.top = topBarBottom - it.positionInWindow().y },
+        ) {
+        // Keyed on the screen, not the view: the day, multi-day and week views
+        // are one timeline that resizes between them itself (#184), so switching
+        // among them must not replay this transition.
+        rememberTransition(viewTransition, label = "view-switch").AnimatedContent(
             transitionSpec = { viewSwitch },
-            label = "view-switch",
+            contentKey = { it.screen },
         ) { currentView ->
-            when (currentView) {
-                CalendarView.Week -> WeekScreen(
-                    selectedView = currentView,
-                    onSelectView = onSelectView,
+            val screen = currentView.screen
+            val sharedScope = this@SharedTransitionLayout
+            val visibilityScope = this@AnimatedContent
+            val viewMorph = remember(reduceMotion, sharedScope, visibilityScope, morphBounds, morphFade, morphClip, stayingPut) {
+                if (reduceMotion) null else ViewMorphScope(sharedScope, visibilityScope, morphBounds, morphFade, morphClip, stayingPut)
+            }
+            CompositionLocalProvider(
+                LocalViewMorph provides viewMorph,
+                LocalChromeSlot provides ChromeSlot(chromeHost, current = screen == view.screen),
+            ) {
+            when (screen) {
+                ViewScreen.Timeline -> TimelineScreen(
+                    view = currentView,
                     onOpenDay = onOpenDay,
                     onEventClick = onEventClick,
-                    onOpenSettings = onOpenSettings,
-                    onOpenSearch = onOpenSearch,
                     onCreateEvent = onCreateEvent,
-                    quickSwitchViews = quickSwitchViews,
-                    drawerViewOrder = drawerViewOrder,
-                    todayInToolbar = todayInToolbar,
                 )
-                CalendarView.Day -> DayScreen(
-                    selectedView = currentView,
-                    onSelectView = onSelectView,
+                ViewScreen.Month -> MonthScreen(
+                    onOpenDay = onOpenDay,
+                    onOpenWeek = onOpenWeek,
                     onEventClick = onEventClick,
-                    onOpenSettings = onOpenSettings,
-                    onOpenSearch = onOpenSearch,
                     onCreateEvent = onCreateEvent,
-                    initialDateIso = pendingDayIso,
-                    quickSwitchViews = quickSwitchViews,
-                    drawerViewOrder = drawerViewOrder,
-                    todayInToolbar = todayInToolbar,
                 )
-                CalendarView.Month -> MonthScreen(
-                    selectedView = currentView,
-                    onSelectView = onSelectView,
+                ViewScreen.Agenda -> AgendaScreen(
                     onOpenDay = onOpenDay,
                     onEventClick = onEventClick,
-                    onOpenSettings = onOpenSettings,
-                    onOpenSearch = onOpenSearch,
                     onCreateEvent = onCreateEvent,
                     quickSwitchViews = quickSwitchViews,
-                    drawerViewOrder = drawerViewOrder,
-                    todayInToolbar = todayInToolbar,
-                )
-                CalendarView.Agenda -> AgendaScreen(
-                    selectedView = currentView,
-                    onSelectView = onSelectView,
-                    onOpenDay = onOpenDay,
-                    onEventClick = onEventClick,
-                    onOpenSettings = onOpenSettings,
-                    onOpenSearch = onOpenSearch,
-                    onCreateEvent = onCreateEvent,
-                    quickSwitchViews = quickSwitchViews,
-                    drawerViewOrder = drawerViewOrder,
-                    todayInToolbar = todayInToolbar,
                 )
             }
+            }
+        }
+        }
+        }
         }
         }
 
@@ -429,11 +569,12 @@ fun CalendarHost(
         AnimatedVisibility(
             visible = showSearch,
             enter = slideInHorizontally(slideSpec) { it } + fadeIn(),
-            exit = slideOutHorizontally(slideSpec) { it } + fadeOut(),
+            exit = overlayExit,
         ) {
             SearchScreen(
                 onBack = { showSearch = false },
                 onEventClick = onEventClick,
+                visible = showSearch,
             )
         }
 
@@ -442,7 +583,7 @@ fun CalendarHost(
         AnimatedVisibility(
             visible = detailKey != null,
             enter = slideInHorizontally(slideSpec) { it } + fadeIn(),
-            exit = slideOutHorizontally(slideSpec) { it } + fadeOut(),
+            exit = overlayExit,
         ) {
             activeKey?.let { key ->
                 EventDetailScreen(
@@ -462,6 +603,7 @@ fun CalendarHost(
                         importForm = form
                         detailKey = null
                     },
+                    visible = detailKey != null,
                 )
             }
         }
@@ -470,7 +612,7 @@ fun CalendarHost(
         AnimatedVisibility(
             visible = createDateIso != null,
             enter = slideInHorizontally(slideSpec) { it } + fadeIn(),
-            exit = slideOutHorizontally(slideSpec) { it } + fadeOut(),
+            exit = overlayExit,
         ) {
             (createDateIso ?: heldCreateIso)?.let { iso ->
                 EventEditScreen(
@@ -479,6 +621,7 @@ fun CalendarHost(
                     onClose = { createDateIso = null },
                     onSaved = { createDateIso = null },
                     onManageCalendars = { showCalendars = true },
+                    visible = createDateIso != null,
                 )
             }
         }
@@ -487,7 +630,7 @@ fun CalendarHost(
         AnimatedVisibility(
             visible = editKey != null,
             enter = slideInHorizontally(slideSpec) { it } + fadeIn(),
-            exit = slideOutHorizontally(slideSpec) { it } + fadeOut(),
+            exit = overlayExit,
         ) {
             (editKey ?: heldEditKey)?.let { key ->
                 EventEditScreen(
@@ -499,6 +642,7 @@ fun CalendarHost(
                         detailKey = null
                     },
                     onManageCalendars = { showCalendars = true },
+                    visible = editKey != null,
                 )
             }
         }
@@ -507,12 +651,13 @@ fun CalendarHost(
         AnimatedVisibility(
             visible = showSettings,
             enter = slideInHorizontally(slideSpec) { it } + fadeIn(),
-            exit = slideOutHorizontally(slideSpec) { it } + fadeOut(),
+            exit = overlayExit,
         ) {
             SettingsScreen(
                 onBack = { showSettings = false },
                 onManageCalendars = { showCalendars = true },
                 onOpenBackup = { showBackup = true },
+                visible = showSettings,
             )
         }
 
@@ -564,11 +709,12 @@ fun CalendarHost(
         AnimatedVisibility(
             visible = showCalendars,
             enter = slideInHorizontally(slideSpec) { it } + fadeIn(),
-            exit = slideOutHorizontally(slideSpec) { it } + fadeOut(),
+            exit = overlayExit,
         ) {
             CalendarsScreen(
                 onBack = { showCalendars = false },
                 onOpenBackup = { showBackup = true },
+                visible = showCalendars,
             )
         }
 
@@ -576,7 +722,7 @@ fun CalendarHost(
         AnimatedVisibility(
             visible = showBackup,
             enter = slideInHorizontally(slideSpec) { it } + fadeIn(),
-            exit = slideOutHorizontally(slideSpec) { it } + fadeOut(),
+            exit = overlayExit,
         ) {
             // Settings can open this screen without the manager underneath, so
             // its failure states' "Manage calendars" way out has to open the
@@ -603,6 +749,7 @@ fun CalendarHost(
                         showBackup = false
                         showCalendars = false
                     },
+                    visible = showBackup,
                 )
             }
         }
@@ -614,3 +761,6 @@ private val viewStackSaver = listSaver<List<CalendarView>, Int>(
     save = { stack -> stack.map(CalendarView::ordinal) },
     restore = { ordinals -> ordinals.map { CalendarView.entries[it] } },
 )
+
+private fun localToday(): LocalDate =
+    Clock.System.now().toLocalDateTime(TimeZone.currentSystemDefault()).date

app/src/main/java/de/jeanlucmakiola/calendula/ui/agenda/AgendaScreen.kt

@@ -1,5 +1,18 @@
 package de.jeanlucmakiola.calendula.ui.agenda
 
+import de.jeanlucmakiola.calendula.ui.common.PublishChrome
+import de.jeanlucmakiola.calendula.ui.common.ScreenActions
+import de.jeanlucmakiola.calendula.ui.common.ScreenBody
+import de.jeanlucmakiola.calendula.ui.common.ScreenChrome
+import de.jeanlucmakiola.calendula.ui.common.LocalViewFocus
+import de.jeanlucmakiola.calendula.ui.common.EnterOnFocus
+import kotlinx.coroutines.flow.drop
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.setValue
+import androidx.compose.runtime.snapshotFlow
+import androidx.compose.runtime.rememberUpdatedState
+import de.jeanlucmakiola.calendula.ui.common.ViewMorphKey
+import de.jeanlucmakiola.calendula.ui.common.morphEvent
 import androidx.compose.foundation.ExperimentalFoundationApi
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Box
@@ -18,34 +31,22 @@ import androidx.compose.foundation.lazy.itemsIndexed
 import androidx.compose.foundation.lazy.rememberLazyListState
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.filled.Coffee
-import androidx.compose.material.icons.filled.Menu
-import androidx.compose.material.icons.filled.Search
 import androidx.compose.material3.ButtonDefaults
-import androidx.compose.material3.DrawerValue
 import androidx.compose.material3.FilledTonalButton
 import androidx.compose.material3.ExperimentalMaterial3Api
 import androidx.compose.material3.Icon
-import androidx.compose.material3.IconButton
 import androidx.compose.material3.MaterialTheme
-import androidx.compose.material3.ModalNavigationDrawer
-import androidx.compose.material3.Scaffold
 import androidx.compose.material3.Text
-import androidx.compose.material3.TopAppBar
-import androidx.compose.material3.TopAppBarDefaults
-import androidx.compose.material3.rememberDrawerState
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.LaunchedEffect
 import androidx.compose.runtime.derivedStateOf
-import androidx.compose.runtime.getValue
 import androidx.compose.runtime.mutableStateOf
 import androidx.compose.runtime.remember
 import androidx.compose.runtime.rememberCoroutineScope
-import androidx.compose.runtime.setValue
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.text.style.TextAlign
-import androidx.compose.ui.text.style.TextOverflow
 import androidx.compose.ui.unit.dp
 import androidx.hilt.navigation.compose.hiltViewModel
 import androidx.lifecycle.compose.collectAsStateWithLifecycle
@@ -58,14 +59,9 @@ import de.jeanlucmakiola.calendula.ui.common.AppBarSpacing
 import de.jeanlucmakiola.calendula.ui.common.QuickSwitchConfig
 import de.jeanlucmakiola.calendula.ui.common.agendaRangeLabel
 import de.jeanlucmakiola.floret.identity.animateItemMotion
-import de.jeanlucmakiola.calendula.ui.common.CalendarDrawer
-import de.jeanlucmakiola.calendula.ui.common.CalendarFabColumn
-import de.jeanlucmakiola.calendula.ui.common.TodayAction
 import de.jeanlucmakiola.calendula.ui.common.CalendarFailure
 import de.jeanlucmakiola.calendula.ui.common.CalendarView
 import de.jeanlucmakiola.calendula.ui.common.IMPLEMENTED_VIEWS
-import de.jeanlucmakiola.calendula.ui.common.ViewSwitcherPill
-import de.jeanlucmakiola.calendula.ui.common.next
 import de.jeanlucmakiola.floret.components.positionOf
 import de.jeanlucmakiola.calendula.ui.common.rememberCurrentMinute
 import de.jeanlucmakiola.floret.locale.currentLocale
@@ -81,26 +77,22 @@ import kotlin.time.Instant
 @OptIn(ExperimentalMaterial3Api::class)
 @Composable
 fun AgendaScreen(
-    selectedView: CalendarView,
-    onSelectView: (CalendarView) -> Unit,
     onOpenDay: (LocalDate) -> Unit,
     onEventClick: (EventInstance) -> Unit,
-    onOpenSettings: () -> Unit,
-    onOpenSearch: () -> Unit,
     onCreateEvent: (LocalDate, Int?) -> Unit,
     quickSwitchViews: List<CalendarView> = IMPLEMENTED_VIEWS,
-    drawerViewOrder: List<CalendarView> = IMPLEMENTED_VIEWS,
-    todayInToolbar: Boolean = false,
     modifier: Modifier = Modifier,
     viewModel: AgendaViewModel = hiltViewModel(),
 ) {
+    // Opens on the focused date and hands back the day scrolled to the top.
+    val focus = LocalViewFocus.current
+    EnterOnFocus(viewModel) { if (it != viewModel.anchor.value) viewModel.goToDate(it) }
     val state by viewModel.state.collectAsStateWithLifecycle()
     val anchor by viewModel.anchor.collectAsStateWithLifecycle()
     val pastDisplay by viewModel.pastEventDisplay.collectAsStateWithLifecycle()
     val showToday by viewModel.showToday.collectAsStateWithLifecycle()
     val weekStart by viewModel.weekStart.collectAsStateWithLifecycle()
 
-    val drawerState = rememberDrawerState(DrawerValue.Closed)
     val scope = rememberCoroutineScope()
     var showRangePicker by remember { mutableStateOf(false) }
 
@@ -124,112 +116,88 @@ fun AgendaScreen(
     // requested: scrolling before the new rows compose leaves the list keyed to
     // a row that reappears further down, and it follows it there.
     LaunchedEffect(successState?.anchor) { listState.scrollToItem(0) }
-    val jumpToToday = {
+    val jumpToToday: () -> Unit = {
         // Off today, moving the anchor is what resets the list (above); on today
         // the window doesn't change, so the scroll back is the whole action.
         if (isOnToday) scope.launch { listState.animateScrollToItem(0) }
         viewModel.goToToday()
+        (state as? AgendaUiState.Success)?.today?.let { focus?.date = it }
     }
 
-    ModalNavigationDrawer(
-        drawerState = drawerState,
-        drawerContent = {
-            CalendarDrawer(
-                currentView = selectedView,
-                currentDate = anchor,
-                drawerState = drawerState,
-                viewOrder = drawerViewOrder,
-                onSelectView = { view ->
-                    onSelectView(view)
-                    scope.launch { drawerState.close() }
-                },
-                onJumpToDate = { target ->
-                    viewModel.goToDate(target)
-                    scope.launch { drawerState.close() }
-                },
-                onSettings = {
-                    onOpenSettings()
-                    scope.launch { drawerState.close() }
-                },
-            )
-        },
-    ) {
-        Scaffold(
-            modifier = modifier,
-            topBar = {
-                AgendaTopBar(
-                    selectedView = selectedView,
-                    onCycleView = { onSelectView(selectedView.next(quickSwitchViews)) },
-                    quickSwitchViews = quickSwitchViews,
-                    onOpenDrawer = { scope.launch { drawerState.open() } },
-                    onOpenSearch = onOpenSearch,
-                    showTodayButton = todayInToolbar,
-                    onToday = jumpToToday,
-                )
+    PublishChrome(
+        ScreenChrome(
+            title = stringResource(R.string.view_agenda),
+            titleDate = null,
+            drawerDate = anchor,
+            awayFromToday = !isOnToday || (scrolledAway && successState != null),
+            todayText = stringResource(R.string.agenda_today_action),
+        ),
+        ScreenActions(
+            onToday = jumpToToday,
+            onJumpToDate = { target ->
+                focus?.date = target
+                viewModel.goToDate(target)
             },
-            floatingActionButton = {
-                CalendarFabColumn(
-                    todayVisible = (!isOnToday || (scrolledAway && successState != null)) &&
-                        !todayInToolbar,
-                    todayText = stringResource(R.string.agenda_today_action),
-                    onToday = jumpToToday,
-                    onCreate = { onCreateEvent(anchor, null) },
-                )
-            },
-        ) { innerPadding ->
-            Column(
-                modifier = Modifier
-                    .fillMaxSize()
-                    .padding(innerPadding),
-            ) {
-                // One bar at the top: the "showing …" header on the left and the
-                // session range switcher on the right (one settings toggle).
-                successState?.takeIf { it.showRangeBar }?.let { s ->
-                    // end lines the selector up with whatever ends the top bar:
-                    // the view switcher's background, or — once #150 hides it —
-                    // the search icon's glyph.
-                    val selectorEnd = if (quickSwitchViews.size >= QuickSwitchConfig.MIN_CYCLE) {
-                        AppBarSpacing.Inset
-                    } else {
-                        AppBarSpacing.IconTrailingInset
-                    }
-                    Row(
-                        verticalAlignment = Alignment.CenterVertically,
-                        modifier = Modifier
-                            .fillMaxWidth()
-                            .padding(
-                                start = RANGE_BAR_TEXT_INSET,
-                                end = selectorEnd,
-                                top = 8.dp,
-                                bottom = 8.dp,
-                            ),
-                    ) {
-                        AgendaRangeBanner(
-                            range = s.range,
-                            start = s.anchor,
-                            end = s.rangeEnd,
-                            modifier = Modifier.weight(1f),
-                        )
-                        AgendaRangePill(
-                            range = s.range,
-                            isOverride = s.rangeIsOverride,
-                            onClick = { showRangePicker = true },
-                        )
-                    }
+            onCreate = { onCreateEvent(anchor, null) },
+        ),
+    )
+
+    ScreenBody(modifier = modifier) { innerPadding ->
+        Column(
+            modifier = Modifier
+                .fillMaxSize()
+                .padding(innerPadding),
+        ) {
+            // One bar at the top: the "showing …" header on the left and the
+            // session range switcher on the right (one settings toggle).
+            successState?.takeIf { it.showRangeBar }?.let { s ->
+                // end lines the selector up with whatever ends the top bar:
+                // the view switcher's background, or — once #150 hides it —
+                // the search icon's glyph.
+                val selectorEnd = if (quickSwitchViews.size >= QuickSwitchConfig.MIN_CYCLE) {
+                    AppBarSpacing.Inset
+                } else {
+                    AppBarSpacing.IconTrailingInset
                 }
-                AgendaContent(
-                    state = state,
-                    pastDisplay = pastDisplay,
-                    showToday = showToday,
-                    listState = listState,
-                    onRetry = viewModel::goToToday,
-                    onEventClick = onEventClick,
-                    onOpenDay = onOpenDay,
+                Row(
+                    verticalAlignment = Alignment.CenterVertically,
                     modifier = Modifier
-                        .weight(1f)
-                        .fillMaxWidth(),
-                )
+                        .fillMaxWidth()
+                        .padding(
+                            start = RANGE_BAR_TEXT_INSET,
+                            end = selectorEnd,
+                            top = 8.dp,
+                            bottom = 8.dp,
+                        ),
+                ) {
+                    AgendaRangeBanner(
+                        range = s.range,
+                        start = s.anchor,
+                        end = s.rangeEnd,
+                        modifier = Modifier.weight(1f),
+                    )
+                    AgendaRangePill(
+                        range = s.range,
+                        isOverride = s.rangeIsOverride,
+                        onClick = { showRangePicker = true },
+                    )
+                }
             }
+            AgendaContent(
+                state = state,
+                pastDisplay = pastDisplay,
+                showToday = showToday,
+                listState = listState,
+                onRetry = viewModel::goToToday,
+                onEventClick = onEventClick,
+                onOpenDay = onOpenDay,
+                onTopDay = if (successState?.anchor == anchor) {
+                    { focus?.date = it }
+                } else null,
+                modifier = Modifier
+                    .weight(1f)
+                    .fillMaxWidth(),
+            )
         }
     }
 
@@ -326,6 +294,7 @@ internal fun AgendaContent(
     onOpenDay: (LocalDate) -> Unit,
     modifier: Modifier = Modifier,
     listState: LazyListState = rememberLazyListState(),
+    onTopDay: ((LocalDate) -> Unit)? = null,
 ) {
     when (state) {
         AgendaUiState.Loading -> Box(modifier)
@@ -368,6 +337,7 @@ internal fun AgendaContent(
                     now = now,
                     onEventClick = onEventClick,
                     onOpenDay = onOpenDay,
+                    onTopDay = onTopDay,
                     modifier = modifier,
                 )
             }
@@ -386,8 +356,20 @@ private fun AgendaList(
     now: Instant,
     onEventClick: (EventInstance) -> Unit,
     onOpenDay: (LocalDate) -> Unit,
+    onTopDay: ((LocalDate) -> Unit)?,
     modifier: Modifier = Modifier,
 ) {
+    if (onTopDay != null) {
+        val itemDates by rememberUpdatedState(agendaItemDates(days))
+        val currentOnTopDay by rememberUpdatedState(onTopDay)
+        // The day the list opened on is where the view already is; only a
+        // scroll moves it on.
+        LaunchedEffect(listState) {
+            snapshotFlow { listState.firstVisibleItemIndex }
+                .drop(1)
+                .collect { index -> itemDates.getOrNull(index)?.let(currentOnTopDay) }
+        }
+    }
     LazyColumn(
         modifier = modifier,
         state = listState,
@@ -420,7 +402,7 @@ private fun AgendaList(
                         zone = zone,
                         position = positionOf(index, day.events.size),
                         dimmed = dimPast && event.hasEnded(now),
-                        modifier = animateItemMotion(),
+                        modifier = animateItemMotion().morphEvent(ViewMorphKey.event(event, day.date)),
                         onClick = { onEventClick(event) },
                     )
                 }
@@ -430,6 +412,13 @@ private fun AgendaList(
     }
 }
 
+/** The day of each item [AgendaList] lays out for [days], in its order. */
+internal fun agendaItemDates(days: List<AgendaDay>): List<LocalDate> =
+    days.flatMap { day ->
+        // Header, the placeholder or the events, then the gap.
+        List(2 + day.events.size.coerceAtLeast(1)) { day.date }
+    }
+
 @Composable
 private fun AgendaEmpty(modifier: Modifier = Modifier) {
     Column(
@@ -451,58 +440,3 @@ private fun AgendaEmpty(modifier: Modifier = Modifier) {
         )
     }
 }
-
-@OptIn(ExperimentalMaterial3Api::class)
-@Composable
-private fun AgendaTopBar(
-    selectedView: CalendarView,
-    onCycleView: () -> Unit,
-    quickSwitchViews: List<CalendarView>,
-    onOpenDrawer: () -> Unit,
-    onOpenSearch: () -> Unit,
-    showTodayButton: Boolean,
-    onToday: () -> Unit,
-) {
-    TopAppBar(
-        title = {
-            // A plain label rather than a CalendarTitleButton, so it takes that
-            // one's inset and one-line clamp itself.
-            Text(
-                text = stringResource(R.string.view_agenda),
-                style = MaterialTheme.typography.titleLarge,
-                maxLines = 1,
-                overflow = TextOverflow.Ellipsis,
-                modifier = Modifier.padding(start = AppBarSpacing.TitleInset),
-            )
-        },
-        navigationIcon = {
-            IconButton(onClick = onOpenDrawer) {
-                Icon(
-                    imageVector = Icons.Default.Menu,
-                    contentDescription = stringResource(R.string.month_open_menu),
-                )
-            }
-        },
-        actions = {
-            TodayAction(show = showTodayButton, onToday = onToday)
-            IconButton(onClick = onOpenSearch) {
-                Icon(
-                    imageVector = Icons.Default.Search,
-                    contentDescription = stringResource(R.string.search_action),
-                )
-            }
-            ViewSwitcherPill(
-                current = selectedView,
-                cycle = quickSwitchViews,
-                onCycle = onCycleView,
-            )
-        },
-        // Deliberately flat: M3 lifts the bar to mark content scrolling under
-        // it, but here the bar meets the header on the same surface and the
-        // tint is what makes that seam look like a separate block (#186).
-        colors = TopAppBarDefaults.topAppBarColors(
-            containerColor = MaterialTheme.colorScheme.surface,
-            scrolledContainerColor = MaterialTheme.colorScheme.surface,
-        ),
-    )
-}

app/src/main/java/de/jeanlucmakiola/calendula/ui/agenda/AgendaUiState.kt

@@ -1,6 +1,7 @@
 package de.jeanlucmakiola.calendula.ui.agenda
 
 import de.jeanlucmakiola.calendula.domain.EventInstance
+import de.jeanlucmakiola.calendula.domain.eventDisplayComparator
 import de.jeanlucmakiola.calendula.domain.FailureReason
 import de.jeanlucmakiola.calendula.domain.spanFirstDay
 import de.jeanlucmakiola.calendula.domain.spanLastDay
@@ -86,11 +87,7 @@ fun groupAgendaDays(
     return byDay.map { (date, dayEvents) ->
         AgendaDay(
             date = date,
-            events = dayEvents.sortedWith(
-                compareByDescending<EventInstance> { it.isAllDay }
-                    .thenBy { it.start }
-                    .thenBy { it.title },
-            ),
+            events = dayEvents.sortedWith(eventDisplayComparator(zone)),
         )
     }
 }

app/src/main/java/de/jeanlucmakiola/calendula/ui/calendars/BackupScreen.kt

@@ -82,6 +82,7 @@ private val RESTORE_MIME_TYPES = arrayOf(
 fun BackupScreen(
     onBack: () -> Unit,
     onImport: (Uri) -> Unit,
+    visible: Boolean = true,
     viewModel: CalendarsViewModel = hiltViewModel(),
 ) {
     val state by viewModel.backupState.collectAsStateWithLifecycle()
@@ -137,6 +138,7 @@ fun BackupScreen(
         scrollable = state is BackupUiState.Ready,
         snackbarHost = { SnackbarHost(snackbarHostState) },
         predictiveBack = true,
+        visible = visible,
     ) {
         when (val s = state) {
             BackupUiState.Loading -> BackupLoading()

app/src/main/java/de/jeanlucmakiola/calendula/ui/calendars/CalendarsScreen.kt

@@ -133,6 +133,7 @@ private const val NEW_CALENDAR_ID = Long.MIN_VALUE
 fun CalendarsScreen(
     onBack: () -> Unit,
     onOpenBackup: () -> Unit,
+    visible: Boolean = true,
     viewModel: CalendarsViewModel = hiltViewModel(),
 ) {
     val calendars by viewModel.calendars.collectAsStateWithLifecycle()
@@ -177,6 +178,7 @@ fun CalendarsScreen(
             onConsumeError = viewModel::consumeError,
             onOpenBackup = onOpenBackup,
             onBack = onBack,
+            visible = visible,
             onAdd = { editorSession++; editorId = NEW_CALENDAR_ID },
             onEdit = { calendar -> editorSession++; editorId = calendar.id },
             onSetVisible = viewModel::setCalendarVisible,
@@ -193,6 +195,7 @@ private fun CalendarsList(
     onConsumeError: () -> Unit,
     onOpenBackup: () -> Unit,
     onBack: () -> Unit,
+    visible: Boolean,
     onAdd: () -> Unit,
     onEdit: (CalendarSource) -> Unit,
     onSetVisible: (Long, Boolean) -> Unit,
@@ -218,6 +221,7 @@ private fun CalendarsList(
         onBack = onBack,
         snackbarHost = { SnackbarHost(snackbarHostState) },
         predictiveBack = true,
+        visible = visible,
     ) {
         // What the per-calendar / per-account switches below actually do.
         HintText(stringResource(R.string.calendars_visibility_hint))

app/src/main/java/de/jeanlucmakiola/calendula/ui/common/BlockPlacement.kt

@@ -3,6 +3,7 @@ package de.jeanlucmakiola.calendula.ui.common
 import androidx.compose.animation.Crossfade
 import androidx.compose.animation.core.FiniteAnimationSpec
 import androidx.compose.animation.core.animateDpAsState
+import androidx.compose.animation.core.animateFloatAsState
 import androidx.compose.animation.core.snap
 import androidx.compose.material3.ExperimentalMaterial3ExpressiveApi
 import androidx.compose.material3.MaterialTheme
@@ -13,15 +14,19 @@ import androidx.compose.runtime.getValue
 import androidx.compose.runtime.remember
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.layout.Layout
+import androidx.compose.ui.layout.ParentDataModifier
 import androidx.compose.ui.platform.LocalDensity
 import androidx.compose.ui.text.TextStyle
 import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.text.rememberTextMeasurer
 import androidx.compose.ui.text.style.TextDecoration
 import androidx.compose.ui.unit.Constraints
+import androidx.compose.ui.unit.Density
 import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.dp
 import de.jeanlucmakiola.floret.identity.rememberReduceMotion
+import kotlin.math.roundToInt
 
 /** Gap a timed block leaves to its neighbours in the column. */
 val BLOCK_OUTER_INSET = 1.dp
@@ -94,9 +99,6 @@ fun rememberBlockTextMetrics(height: Dp): BlockTextMetrics {
     )
 }
 
-/** Most lines a time label may wrap over before it is worth more than a title line. */
-const val MAX_TIME_LINES = 2
-
 /**
  * Lines [text] needs to render whole at [textWidth], capped at [max].
  *
@@ -126,29 +128,65 @@ fun blockTextLines(text: String, style: TextStyle, textWidth: Dp, max: Int): Int
  * Lines the time label may take at [textWidth], out of the [spare] height left
  * once the title and the label's own first line are paid for.
  *
- * A week column is narrower than a "09:30–11:00" range, so the label takes a
- * second line rather than lose its end — but only out of a line the title
- * measured itself as not needing, never one it would have filled.
+ * A week column is narrower than a "09:30–11:00" range — and a 12-hour
+ * "6:00 PM–7:00 PM" can want four lines — so the label wraps over as many as it
+ * needs rather than lose its end, but only out of lines the title measured
+ * itself as not needing, never one it would have filled.
  */
 @Composable
 fun blockTimeLines(label: String, textWidth: Dp, spare: Dp): Int {
     val timeLineHeight = rememberTrimmedLineHeight(
         MaterialTheme.typography.labelSmall.asEventTime(),
     )
-    return if (spare >= timeLineHeight) {
-        blockTextLines(
-            text = label,
-            // The style it is drawn in, or the budget measures a line the label
-            // never uses (#219).
-            style = MaterialTheme.typography.labelSmall.asEventTime(),
-            textWidth = textWidth,
-            max = MAX_TIME_LINES,
-        )
-    } else {
-        1
+    return blockTextLines(
+        text = label,
+        // The style it is drawn in, or the budget measures a line the label
+        // never uses (#219).
+        style = MaterialTheme.typography.labelSmall.asEventTime(),
+        textWidth = textWidth,
+        max = timeLinesWithin(spare, timeLineHeight),
+    )
+}
+
+/** Lines a time label may take: its own first one, plus every whole [timeLine] in [spare]. */
+internal fun timeLinesWithin(spare: Dp, timeLine: Dp): Int =
+    if (spare < timeLine || timeLine <= 0.dp) 1 else 1 + (spare / timeLine).toInt()
+
+/**
+ * The time range as a timed block draws it.
+ *
+ * Each time stays whole where the column is wide enough for one, so a 12-hour
+ * label never parts "6:00" from its "PM": the range breaks at the dash, which
+ * rides on whichever side has room for it. Where not even one time fits, the
+ * text wraps wherever it can.
+ */
+@Composable
+fun rememberBlockTimeRange(start: String, end: String, textWidth: Dp): String {
+    val measurer = rememberTextMeasurer()
+    val style = MaterialTheme.typography.labelSmall.asEventTime()
+    val widthPx = with(LocalDensity.current) { textWidth.roundToPx() }
+    return remember(start, end, style, widthPx, measurer) {
+        blockTimeRange(start, end) {
+            measurer.measure(text = it, style = style, softWrap = false).size.width <= widthPx
+        }
     }
 }
 
+internal fun blockTimeRange(start: String, end: String, fits: (String) -> Boolean): String {
+    val from = start.replace(' ', NO_BREAK_SPACE)
+    val to = end.replace(' ', NO_BREAK_SPACE)
+    return when {
+        fits("$from–$to") -> "$from–$to"
+        !fits(from) || !fits(to) -> "$start–$ZERO_WIDTH_SPACE$end"
+        fits("$from–") -> "$from–\n$to"
+        fits("–$to") -> "$from\n–$to"
+        else -> "$from\n$to"
+    }
+}
+
+private const val NO_BREAK_SPACE = ' '
+private const val ZERO_WIDTH_SPACE = '​'
+
 /**
  * A timed block's title, over at most [maxLines], breaking at word boundaries.
  *
@@ -224,9 +262,13 @@ fun BlockTimeLabel(
     }
 }
 
-/** Where a timed block sits in its column, after tweening. */
+/**
+ * Where a timed block sits in its column, after tweening: across as shares of
+ * the column's width, so a column resizing carries its blocks with it (#184),
+ * down in the timeline's own units.
+ */
 @Immutable
-data class BlockPlacement(val x: Dp, val y: Dp, val width: Dp, val height: Dp)
+data class BlockPlacement(val xFraction: Float, val widthFraction: Float, val y: Dp, val height: Dp)
 
 /**
  * A timed block's placement, tweened rather than jumped. Continuity comes from
@@ -239,17 +281,49 @@ data class BlockPlacement(val x: Dp, val y: Dp, val width: Dp, val height: Dp)
  */
 @OptIn(ExperimentalMaterial3ExpressiveApi::class)
 @Composable
-fun animatedBlockPlacement(x: Dp, y: Dp, width: Dp, height: Dp): BlockPlacement {
-    val spec: FiniteAnimationSpec<Dp> = if (rememberReduceMotion() ||
-        LocalTimelineZoom.current.isPinching
-    ) {
-        snap()
-    } else {
-        MaterialTheme.motionScheme.fastSpatialSpec()
+fun animatedBlockPlacement(xFraction: Float, widthFraction: Float, y: Dp, height: Dp): BlockPlacement {
+    val still = rememberReduceMotion() || LocalTimelineZoom.current.isPinching
+    val dpSpec: FiniteAnimationSpec<Dp> = if (still) snap() else MaterialTheme.motionScheme.fastSpatialSpec()
+    val shareSpec: FiniteAnimationSpec<Float> = if (still) snap() else MaterialTheme.motionScheme.fastSpatialSpec()
+    val animatedX by animateFloatAsState(xFraction, shareSpec, label = "block-x")
+    val animatedWidth by animateFloatAsState(widthFraction, shareSpec, label = "block-width")
+    val animatedY by animateDpAsState(y, dpSpec, label = "block-y")
+    val animatedHeight by animateDpAsState(height, dpSpec, label = "block-height")
+    return BlockPlacement(animatedX, animatedWidth, animatedY, animatedHeight)
+}
+
+/** Seats a block across its [placement]'s share of a [LaneColumn]. */
+fun Modifier.laneSlot(placement: BlockPlacement): Modifier =
+    then(LaneSlot(placement.xFraction, placement.widthFraction))
+
+private data class LaneSlot(val x: Float, val width: Float) : ParentDataModifier {
+    override fun Density.modifyParentData(parentData: Any?): Any = this@LaneSlot
+}
+
+/**
+ * A day column's blocks, each measured across the share of the column its
+ * [laneSlot] gives it; anything else fills the column. The shares are applied
+ * at layout time, so the column can change width every frame without its
+ * blocks recomposing.
+ */
+@Composable
+fun LaneColumn(modifier: Modifier = Modifier, content: @Composable () -> Unit) {
+    Layout(content = content, modifier = modifier) { measurables, constraints ->
+        val width = constraints.maxWidth
+        val loose = constraints.copy(minWidth = 0, minHeight = 0)
+        val placed = measurables.map { measurable ->
+            val slot = measurable.parentData as? LaneSlot
+            if (slot == null) {
+                measurable.measure(loose) to 0
+            } else {
+                val left = (slot.x * width).roundToInt()
+                val right = ((slot.x + slot.width) * width).roundToInt()
+                val laneWidth = (right - left).coerceAtLeast(0)
+                measurable.measure(loose.copy(minWidth = laneWidth, maxWidth = laneWidth)) to left
+            }
+        }
+        layout(width, constraints.maxHeight) {
+            placed.forEach { (placeable, x) -> placeable.placeRelative(x, 0) }
+        }
     }
-    val animatedX by animateDpAsState(x, spec, label = "block-x")
-    val animatedY by animateDpAsState(y, spec, label = "block-y")
-    val animatedWidth by animateDpAsState(width, spec, label = "block-width")
-    val animatedHeight by animateDpAsState(height, spec, label = "block-height")
-    return BlockPlacement(animatedX, animatedY, animatedWidth, animatedHeight)
 }

app/src/main/java/de/jeanlucmakiola/calendula/ui/common/CalendarChrome.kt

@@ -0,0 +1,161 @@
+package de.jeanlucmakiola.calendula.ui.common
+
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.PaddingValues
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.filled.Menu
+import androidx.compose.material.icons.filled.Search
+import androidx.compose.material3.ExperimentalMaterial3Api
+import androidx.compose.material3.Icon
+import androidx.compose.material3.IconButton
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.TopAppBar
+import androidx.compose.material3.TopAppBarDefaults
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.setValue
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.Immutable
+import androidx.compose.runtime.SideEffect
+import androidx.compose.runtime.Stable
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.staticCompositionLocalOf
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.res.stringResource
+import de.jeanlucmakiola.calendula.R
+import kotlinx.datetime.LocalDate
+
+/**
+ * What a calendar screen shows in the top bar, the FAB and the drawer, which the
+ * host draws once for all of them (#184): switching screens changes what they
+ * say rather than swapping one bar for another.
+ *
+ * @param titleDate the date the title's picker opens on, or null for a title
+ *   that is only a label.
+ * @param drawerDate the date the drawer's picker opens on.
+ * @param awayFromToday whether "today" is worth offering.
+ */
+@Immutable
+data class ScreenChrome(
+    val title: String,
+    val shortTitle: String = title,
+    val titleDate: LocalDate?,
+    val drawerDate: LocalDate,
+    val awayFromToday: Boolean,
+    val todayText: String,
+)
+
+/** What the chrome does for the screen on show; read when used, so not observed. */
+class ScreenActions(
+    val onToday: () -> Unit,
+    val onJumpToDate: (LocalDate) -> Unit,
+    val onCreate: () -> Unit,
+)
+
+/** The screen on show's [ScreenChrome] and [ScreenActions], for the host to draw. */
+@Stable
+class ChromeHost {
+    var chrome by mutableStateOf<ScreenChrome?>(null)
+        private set
+
+    var actions: ScreenActions? = null
+        private set
+
+    internal fun publish(chrome: ScreenChrome, actions: ScreenActions) {
+        this.chrome = chrome
+        this.actions = actions
+    }
+}
+
+/** The host's chrome, and whether the screen reading it is the one on show rather than one leaving. */
+class ChromeSlot(val host: ChromeHost, val current: Boolean)
+
+val LocalChromeSlot = staticCompositionLocalOf<ChromeSlot?> { null }
+
+/** Hands [chrome] and [actions] to the host, while this screen is the one on show. */
+@Composable
+fun PublishChrome(chrome: ScreenChrome, actions: ScreenActions) {
+    val slot = LocalChromeSlot.current ?: return
+    if (slot.current) SideEffect { slot.host.publish(chrome, actions) }
+}
+
+/** The top bar every calendar screen shares. */
+@OptIn(ExperimentalMaterial3Api::class)
+@Composable
+fun CalendarTopBar(
+    host: ChromeHost,
+    selectedView: CalendarView,
+    quickSwitchViews: List<CalendarView>,
+    onCycleView: () -> Unit,
+    onOpenDrawer: () -> Unit,
+    onOpenSearch: () -> Unit,
+    showTodayButton: Boolean,
+) {
+    val chrome = host.chrome
+    TopAppBar(
+        title = {
+            if (chrome != null) {
+                CalendarTitleButton(
+                    title = chrome.title,
+                    currentDate = chrome.titleDate,
+                    onJumpToDate = { host.actions?.onJumpToDate?.invoke(it) },
+                    shortTitle = chrome.shortTitle,
+                )
+            }
+        },
+        navigationIcon = {
+            IconButton(onClick = onOpenDrawer) {
+                Icon(
+                    imageVector = Icons.Default.Menu,
+                    contentDescription = stringResource(R.string.month_open_menu),
+                )
+            }
+        },
+        actions = {
+            TodayAction(show = showTodayButton, onToday = { host.actions?.onToday?.invoke() })
+            IconButton(onClick = onOpenSearch) {
+                Icon(
+                    imageVector = Icons.Default.Search,
+                    contentDescription = stringResource(R.string.search_action),
+                )
+            }
+            ViewSwitcherPill(
+                current = selectedView,
+                cycle = quickSwitchViews,
+                onCycle = onCycleView,
+            )
+        },
+        // Deliberately flat: M3 lifts the bar to mark content scrolling under
+        // it, but here the bar meets the header on the same surface and the
+        // tint is what makes that seam look like a separate block (#186).
+        colors = TopAppBarDefaults.topAppBarColors(
+            containerColor = MaterialTheme.colorScheme.surface,
+            scrolledContainerColor = MaterialTheme.colorScheme.surface,
+        ),
+    )
+}
+
+/** The FAB column every calendar screen shares. */
+@Composable
+fun CalendarFab(host: ChromeHost, todayInToolbar: Boolean) {
+    val chrome = host.chrome ?: return
+    CalendarFabColumn(
+        todayVisible = chrome.awayFromToday && !todayInToolbar,
+        todayText = chrome.todayText,
+        onToday = { host.actions?.onToday?.invoke() },
+        onCreate = { host.actions?.onCreate?.invoke() },
+    )
+}
+
+/**
+ * A calendar screen's body under the shared chrome, on the ground the screen's
+ * own Scaffold used to give it; the host's Scaffold has already made room for
+ * the bars, so [content] gets no padding of its own.
+ */
+@Composable
+fun ScreenBody(modifier: Modifier = Modifier, content: @Composable (PaddingValues) -> Unit) {
+    Box(modifier.fillMaxSize().background(MaterialTheme.colorScheme.background)) {
+        content(PaddingValues())
+    }
+}

app/src/main/java/de/jeanlucmakiola/calendula/ui/common/CalendarDrawer.kt

@@ -91,7 +91,7 @@ fun CalendarDrawer(
             DrawerSectionHeader(stringResource(R.string.view_section))
             viewOrder.forEachIndexed { index, view ->
                 GroupedRow(
-                    title = stringResource(view.labelRes),
+                    title = view.label(),
                     position = positionOf(index, viewOrder.size),
                     selected = view == currentView,
                     minHeight = 56.dp,

app/src/main/java/de/jeanlucmakiola/calendula/ui/common/CalendarPager.kt

@@ -0,0 +1,57 @@
+package de.jeanlucmakiola.calendula.ui.common
+
+import androidx.compose.animation.core.Animatable
+import androidx.compose.animation.core.FiniteAnimationSpec
+import androidx.compose.animation.core.VectorConverter
+import androidx.compose.foundation.pager.PagerState
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.LaunchedEffect
+import androidx.compose.runtime.derivedStateOf
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.remember
+import androidx.compose.runtime.rememberUpdatedState
+import androidx.compose.runtime.snapshotFlow
+import androidx.compose.ui.unit.Dp
+import androidx.compose.ui.unit.lerp
+import kotlinx.coroutines.flow.collectLatest
+import kotlin.math.floor
+
+/**
+ * One height for every page of something that varies from page to page — the
+ * timelines' all-day strip, the split grid's rows — blended between the two
+ * pages a swipe sits between, so what sits below it moves with the finger rather
+ * than jumping on settle. It follows the swipe directly and only springs when a
+ * page's own height changes at rest. [fallback] stands in until the pages have
+ * reported theirs, so it doesn't open from zero.
+ *
+ * @param heights each composed page's own height, by page index.
+ */
+@Composable
+fun pagedHeight(pagerState: PagerState, heights: Map<Int, Dp>, fallback: Dp): Dp {
+    val currentFallback by rememberUpdatedState(fallback)
+    val target by remember(pagerState, heights) {
+        derivedStateOf {
+            val position = pagerState.currentPage + pagerState.currentPageOffsetFraction
+            val from = floor(position).toInt()
+            val a = heights[from]
+            val b = heights[from + 1]
+            lerp(a ?: b ?: currentFallback, b ?: a ?: currentFallback, position - from)
+        }
+    }
+    val height = remember { Animatable(target, Dp.VectorConverter) }
+    LaunchedEffect(height) {
+        snapshotFlow { target to pagerState.isScrollInProgress }.collectLatest { (h, scrolling) ->
+            if (scrolling) height.snapTo(h) else height.animateTo(h)
+        }
+    }
+    return height.value
+}
+
+/** A deliberate jump (Today, jump-to-date): animated, or snapped under reduced motion. */
+suspend fun PagerState.jumpToPage(
+    page: Int,
+    reduceMotion: Boolean,
+    spec: FiniteAnimationSpec<Float>,
+) {
+    if (reduceMotion) scrollToPage(page) else animateScrollToPage(page, animationSpec = spec)
+}

app/src/main/java/de/jeanlucmakiola/calendula/ui/common/CalendarSwipe.kt

@@ -1,79 +0,0 @@
-package de.jeanlucmakiola.calendula.ui.common
-
-import androidx.compose.foundation.gestures.detectHorizontalDragGestures
-import androidx.compose.runtime.Composable
-import androidx.compose.ui.Modifier
-import androidx.compose.ui.input.pointer.pointerInput
-import androidx.compose.ui.platform.LocalDensity
-import androidx.compose.ui.unit.dp
-
-/**
- * Drag distance that turns a calendar page, shared by the month, week and day
- * views so all three answer a swipe at the same point.
- *
- * It was 6dp once, which is inside the distance a tap wanders: brushing the grid
- * changed the month, and a page that turns on an unintended gesture reads as the
- * animation misfiring rather than as the gesture being over-eager.
- */
-val CALENDAR_SWIPE_THRESHOLD = 24.dp
-
-/**
- * The whole-page horizontal swipe: one page per gesture, committed **the moment
- * the drag clears [CALENDAR_SWIPE_THRESHOLD]** rather than when the finger lifts.
- *
- * Waiting for the lift meant the page sat still under a finger that had already
- * travelled far enough to ask for it, and the answer only arrived once you let
- * go — which reads as the view being slow rather than as a deliberate commit.
- * Firing on the threshold is what makes the gesture feel like it is being
- * followed. The trade is that a drag can no longer be taken back by dragging the
- * other way; in practice, once you have moved 24dp deliberately you meant it, and
- * the page you land on is one swipe back.
- *
- * Deliberately **horizontal-only**. The week and day timelines scroll vertically
- * underneath this, and a two-dimensional detector here would claim those drags
- * before the inner scroll ever saw them. As it is, a horizontal drag crosses this
- * detector's slop while a vertical one is consumed below, and the two coexist.
- * (The month view's split style needs a vertical axis as well, so it keeps its
- * own axis-locking detector rather than using this.)
- */
-@Composable
-fun rememberCalendarPageSwipe(
-    onSwipeNext: () -> Unit,
-    onSwipePrev: () -> Unit,
-): Modifier {
-    val threshold = with(LocalDensity.current) { CALENDAR_SWIPE_THRESHOLD.toPx() }
-    return Modifier.pointerInput(onSwipeNext, onSwipePrev) {
-        var accum = 0f
-        // One page per gesture: without this a long drag would keep re-firing
-        // every time the accumulator crossed the threshold again.
-        var fired = false
-        detectHorizontalDragGestures(
-            onDragStart = {
-                accum = 0f
-                fired = false
-            },
-            onDragEnd = {
-                accum = 0f
-                fired = false
-            },
-            onDragCancel = {
-                accum = 0f
-                fired = false
-            },
-            onHorizontalDrag = { _, drag ->
-                accum += drag
-                if (!fired) {
-                    val commit = when {
-                        accum < -threshold -> onSwipeNext
-                        accum > threshold -> onSwipePrev
-                        else -> null
-                    }
-                    if (commit != null) {
-                        fired = true
-                        commit()
-                    }
-                }
-            },
-        )
-    }
-}

app/src/main/java/de/jeanlucmakiola/calendula/ui/common/CalendarTitleButton.kt

@@ -1,5 +1,13 @@
 package de.jeanlucmakiola.calendula.ui.common
 
+import androidx.compose.animation.AnimatedContent
+import androidx.compose.animation.AnimatedVisibility
+import androidx.compose.animation.expandHorizontally
+import androidx.compose.animation.shrinkHorizontally
+import androidx.compose.animation.SizeTransform
+import androidx.compose.animation.fadeIn
+import androidx.compose.animation.fadeOut
+import androidx.compose.animation.togetherWith
 import androidx.compose.foundation.clickable
 import androidx.compose.foundation.layout.BoxWithConstraints
 import androidx.compose.foundation.layout.Row
@@ -10,12 +18,12 @@ import androidx.compose.material.icons.filled.ArrowDropDown
 import androidx.compose.material3.Icon
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Text
-import androidx.compose.runtime.Composable
 import androidx.compose.runtime.getValue
+import androidx.compose.runtime.setValue
+import androidx.compose.runtime.Composable
 import androidx.compose.runtime.mutableStateOf
 import androidx.compose.runtime.remember
 import androidx.compose.runtime.saveable.rememberSaveable
-import androidx.compose.runtime.setValue
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.clip
@@ -33,7 +41,8 @@ import kotlinx.datetime.LocalDate
  * drawer uses and reporting the chosen day through [onJumpToDate].
  *
  * [currentDate] seeds the picker with whatever the bar is currently naming (the
- * visible day, week start or month anchor).
+ * visible day, week start or month anchor); null makes the title a plain label,
+ * as the agenda's is, and the caret folds away.
  *
  * [shortTitle] replaces [title] when the full one does not fit the width the app
  * bar hands the title slot (#165). Either way the line clamps to one and
@@ -42,7 +51,7 @@ import kotlinx.datetime.LocalDate
 @Composable
 fun CalendarTitleButton(
     title: String,
-    currentDate: LocalDate,
+    currentDate: LocalDate?,
     onJumpToDate: (LocalDate) -> Unit,
     modifier: Modifier = Modifier,
     shortTitle: String = title,
@@ -54,6 +63,7 @@ fun CalendarTitleButton(
             .heightIn(min = 48.dp)
             .clip(MaterialTheme.shapes.large)
             .clickable(
+                enabled = currentDate != null,
                 onClickLabel = stringResource(R.string.drawer_jump_to_date),
                 role = Role.Button,
             ) { showDatePicker = true }
@@ -71,21 +81,38 @@ fun CalendarTitleButton(
                     availableWidth = constraints.maxWidth,
                 )
             }
-            Text(
-                text = shown,
-                style = style,
-                maxLines = 1,
-                overflow = TextOverflow.Ellipsis,
+            // Cross-fades, so switching views or paging turns the title over
+            // rather than snapping it (#184).
+            val fadeSpec = rememberCalendarFadeSpec()
+            AnimatedContent(
+                targetState = shown,
+                transitionSpec = {
+                    (fadeIn(fadeSpec) togetherWith fadeOut(fadeSpec)).using(SizeTransform(clip = false))
+                },
+                contentAlignment = Alignment.CenterStart,
+            ) { text ->
+                Text(
+                    text = text,
+                    style = style,
+                    maxLines = 1,
+                    overflow = TextOverflow.Ellipsis,
+                )
+            }
+        }
+        AnimatedVisibility(
+            visible = currentDate != null,
+            enter = fadeIn(rememberCalendarFadeSpec()) + expandHorizontally(),
+            exit = fadeOut(rememberCalendarFadeSpec()) + shrinkHorizontally(),
+        ) {
+            Icon(
+                imageVector = Icons.Default.ArrowDropDown,
+                contentDescription = null,
+                tint = MaterialTheme.colorScheme.onSurfaceVariant,
             )
         }
-        Icon(
-            imageVector = Icons.Default.ArrowDropDown,
-            contentDescription = null,
-            tint = MaterialTheme.colorScheme.onSurfaceVariant,
-        )
     }
 
-    if (showDatePicker) {
+    if (showDatePicker && currentDate != null) {
         CalendarDatePickerDialog(
             initial = currentDate,
             onConfirm = {

app/src/main/java/de/jeanlucmakiola/calendula/ui/common/CalendarTransitions.kt

@@ -1,13 +1,7 @@
 package de.jeanlucmakiola.calendula.ui.common
 
-import androidx.compose.animation.ContentTransform
-import androidx.compose.animation.SizeTransform
 import androidx.compose.animation.core.FiniteAnimationSpec
-import androidx.compose.animation.fadeIn
-import androidx.compose.animation.fadeOut
-import androidx.compose.animation.slideInHorizontally
-import androidx.compose.animation.slideOutHorizontally
-import androidx.compose.animation.togetherWith
+import androidx.compose.animation.core.spring
 import androidx.compose.material3.ExperimentalMaterial3ExpressiveApi
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.runtime.Composable
@@ -19,12 +13,12 @@ import androidx.compose.ui.unit.IntOffset
  * the reduce-motion check — now live in floret-kit's identity module
  * (`expandEnter`, `collapseExit`, `itemEnter`, `animateItemMotion`,
  * `fadeThrough`, `Modifier.predictiveBack`, `rememberReduceMotion`). What stays
- * here is only what's specific to paging the calendar grid: the directional
- * month/week/day slide and the specs that feed it.
+ * here is only what's specific to paging the calendar grid: the specs its
+ * pagers settle with, and that the view switch reuses.
  */
 
 /**
- * The M3 Expressive spatial spring used for the month/week/day slide: the
+ * The M3 Expressive spatial spring the calendar's motion is built on: the
  * *default* spring-physics spec from the active motion scheme, rather than a
  * fixed easing curve.
  *
@@ -40,6 +34,12 @@ import androidx.compose.ui.unit.IntOffset
 fun rememberCalendarSlideSpec(): FiniteAnimationSpec<IntOffset> =
     MaterialTheme.motionScheme.defaultSpatialSpec()
 
+/** The same spring as [rememberCalendarSlideSpec], for a pager settling onto its page. */
+@OptIn(ExperimentalMaterial3ExpressiveApi::class)
+@Composable
+fun rememberCalendarPageSpec(): FiniteAnimationSpec<Float> =
+    MaterialTheme.motionScheme.defaultSpatialSpec()
+
 /**
  * The effects spec from the active motion scheme, for the opacity half of the
  * transition. Captured in composable scope alongside [rememberCalendarSlideSpec]
@@ -55,50 +55,17 @@ fun rememberCalendarFadeSpec(): FiniteAnimationSpec<Float> =
     MaterialTheme.motionScheme.defaultEffectsSpec()
 
 /**
- * Navigating between adjacent months/weeks/days, as M3's shared-axis X: the
- * outgoing page slides and fades one way while the incoming one arrives from the
- * other, position on a spring and opacity on an easing curve.
- *
- * @param slideDir     +1 = forward (incoming from the right), -1 = back, 0 = jump
- *                     (e.g. "today"); a jump reuses the forward direction.
- * @param spec         spatial animation spec, typically [rememberCalendarSlideSpec].
- * @param fadeSpec     effects spec for the opacity half, and for the whole
- *                     transition under reduced motion; typically
- *                     [rememberCalendarFadeSpec].
- * @param reduceMotion when true, drop the movement and cross-fade alone.
+ * A switch between views (#184): the default spatial spring, a little softer, as
+ * the whole screen reshapes rather than a page sliding by; softer still when
+ * [long], for a change the eye has further to follow.
  */
-fun calendarSlideTransition(
-    slideDir: Int,
-    spec: FiniteAnimationSpec<IntOffset>,
-    fadeSpec: FiniteAnimationSpec<Float>,
-    reduceMotion: Boolean,
-): ContentTransform {
-    if (reduceMotion) {
-        return fadeIn(fadeSpec).togetherWith(fadeOut(fadeSpec))
-    }
-    val dir = if (slideDir == 0) 1 else slideDir
-    return ContentTransform(
-        targetContentEnter =
-            slideInHorizontally(spec) { w -> dir * w / SLIDE_TRAVEL_DIVISOR } + fadeIn(fadeSpec),
-        initialContentExit =
-            slideOutHorizontally(spec) { w -> -dir * w / SLIDE_TRAVEL_DIVISOR } + fadeOut(fadeSpec),
-        // AnimatedContent clips to the animating container by default, which
-        // shears the pages against the viewport edge as they pass. Left off even
-        // where the two pages differ in height — the split grid stands as many
-        // rows as its month spans (#162) — since a page sliding out over the row
-        // below it reads as travel, and the shear reads as a fault.
-        sizeTransform = SizeTransform(clip = false),
+@Composable
+fun <T> rememberViewSwitchSpec(long: Boolean = false): FiniteAnimationSpec<T> =
+    spring(
+        dampingRatio = VIEW_SWITCH_DAMPING,
+        stiffness = if (long) LONG_VIEW_SWITCH_STIFFNESS else VIEW_SWITCH_STIFFNESS,
     )
-}
 
-/**
- * How far a page travels, as a fraction of the container width.
- *
- * A full width was the obvious reading of "paging", but the two pages are
- * stacked and both opaque, so a full-width slide showed one grid racing across
- * another — the movement carried the whole transition and had a long way to go.
- * Under M3's shared-axis pattern the offset only has to *hint* the direction
- * while the cross-fade does the swapping, so a fifth of the width is plenty and
- * leaves nothing skating past.
- */
-private const val SLIDE_TRAVEL_DIVISOR = 5
+private const val VIEW_SWITCH_DAMPING = 0.9f
+private const val VIEW_SWITCH_STIFFNESS = 450f
+private const val LONG_VIEW_SWITCH_STIFFNESS = 340f

app/src/main/java/de/jeanlucmakiola/calendula/ui/common/CalendarView.kt

@@ -1,37 +1,53 @@
 package de.jeanlucmakiola.calendula.ui.common
 
-import androidx.annotation.StringRes
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.filled.CalendarViewDay
 import androidx.compose.material.icons.filled.CalendarViewMonth
 import androidx.compose.material.icons.filled.CalendarViewWeek
 import androidx.compose.material.icons.filled.ViewAgenda
+import androidx.compose.material.icons.filled.ViewColumn
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.staticCompositionLocalOf
 import androidx.compose.ui.graphics.vector.ImageVector
+import androidx.compose.ui.res.pluralStringResource
+import androidx.compose.ui.res.stringResource
 import de.jeanlucmakiola.calendula.R
+import de.jeanlucmakiola.calendula.data.prefs.SettingsPrefs
 
 /** The top-level calendar views the user can switch between (spec M1). */
 enum class CalendarView {
     Month,
     Week,
+    MultiDay,
     Day,
     Agenda,
 }
 
-/** Switcher label, shared by the top-bar pill and the drawer's View section. */
-@get:StringRes
-val CalendarView.labelRes: Int
-    get() = when (this) {
-        CalendarView.Month -> R.string.view_month
-        CalendarView.Week -> R.string.view_week
-        CalendarView.Day -> R.string.view_day
-        CalendarView.Agenda -> R.string.view_agenda
+/** How many days the multi-day view shows (#193), provided once at the app root. */
+val LocalMultiDayCount = staticCompositionLocalOf { SettingsPrefs.DEFAULT_MULTI_DAY_COUNT }
+
+/**
+ * The view's name, shared by the top-bar pill, the drawer and Settings. The
+ * multi-day view is named after its day count ("3 days").
+ */
+@Composable
+fun CalendarView.label(): String = when (this) {
+    CalendarView.Month -> stringResource(R.string.view_month)
+    CalendarView.Week -> stringResource(R.string.view_week)
+    CalendarView.MultiDay -> {
+        val count = LocalMultiDayCount.current
+        pluralStringResource(R.plurals.view_multi_day, count, count)
     }
+    CalendarView.Day -> stringResource(R.string.view_day)
+    CalendarView.Agenda -> stringResource(R.string.view_agenda)
+}
 
 /** Leading icon for the view in the drawer's View section. */
 val CalendarView.icon: ImageVector
     get() = when (this) {
         CalendarView.Month -> Icons.Filled.CalendarViewMonth
         CalendarView.Week -> Icons.Filled.CalendarViewWeek
+        CalendarView.MultiDay -> Icons.Filled.ViewColumn
         CalendarView.Day -> Icons.Filled.CalendarViewDay
         CalendarView.Agenda -> Icons.Filled.ViewAgenda
     }
@@ -41,7 +57,13 @@ val CalendarView.icon: ImageVector
  * through these in order.
  */
 val IMPLEMENTED_VIEWS: List<CalendarView> =
-    listOf(CalendarView.Month, CalendarView.Week, CalendarView.Day, CalendarView.Agenda)
+    listOf(
+        CalendarView.Month,
+        CalendarView.Week,
+        CalendarView.MultiDay,
+        CalendarView.Day,
+        CalendarView.Agenda,
+    )
 
 /** Next view in [available], wrapping around. Falls back to Month if absent. */
 fun CalendarView.next(available: List<CalendarView> = IMPLEMENTED_VIEWS): CalendarView {
@@ -107,3 +129,16 @@ fun viewBaseStack(default: CalendarView, source: CalendarView): List<CalendarVie
 /** Push the day view as a drill-in over the current stack (no-op if already on it). */
 fun List<CalendarView>.drillToDay(): List<CalendarView> =
     if (lastOrNull() == CalendarView.Day) this else this + CalendarView.Day
+
+/** The screens the views are drawn by: the day, multi-day and week views share one timeline (#184). */
+enum class ViewScreen { Month, Timeline, Agenda }
+
+val CalendarView.screen: ViewScreen
+    get() = when (this) {
+        CalendarView.Month -> ViewScreen.Month
+        CalendarView.Agenda -> ViewScreen.Agenda
+        CalendarView.Week, CalendarView.MultiDay, CalendarView.Day -> ViewScreen.Timeline
+    }
+/** Push the week view over the month after a week-number tap. */
+fun List<CalendarView>.drillToWeek(): List<CalendarView> =
+    if (lastOrNull() == CalendarView.Week) this else this + CalendarView.Week

app/src/main/java/de/jeanlucmakiola/calendula/ui/common/HourGrid.kt

@@ -59,7 +59,11 @@ internal fun hourCellRadiusPx(cellHeight: Float, cellWidth: Float, maxRadius: Fl
  * coordinate space and keep spanning cells. [hourHeightPx] is one hour's pixel
  * height; [color] is resolved by the caller from the theme.
  */
-fun Modifier.hourGridCells(show: Boolean, hourHeightPx: Float, color: Color): Modifier =
+fun Modifier.hourGridCells(
+    show: Boolean,
+    hourHeightPx: Float,
+    color: Color,
+): Modifier =
     if (!show) {
         this
     } else {
@@ -71,10 +75,11 @@ fun Modifier.hourGridCells(show: Boolean, hourHeightPx: Float, color: Color): Mo
                 hourCellRadiusPx(cellHeight, size.width, HOUR_CELL_CORNER.toPx()),
             )
             val cellSize = Size(size.width, cellHeight)
+            val top = inset
             for (hour in 0 until 24) {
                 drawRoundRect(
                     color = color,
-                    topLeft = Offset(0f, hour * hourHeightPx + inset),
+                    topLeft = Offset(0f, hour * hourHeightPx + top),
                     size = cellSize,
                     cornerRadius = radius,
                 )

app/src/main/java/de/jeanlucmakiola/calendula/ui/common/OutOfViewEdges.kt

@@ -0,0 +1,328 @@
+package de.jeanlucmakiola.calendula.ui.common
+
+import androidx.compose.animation.core.FiniteAnimationSpec
+import androidx.compose.foundation.ScrollState
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.BoxScope
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.offset
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.shape.CircleShape
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.Immutable
+import androidx.compose.runtime.Stable
+import androidx.compose.runtime.SideEffect
+import androidx.compose.runtime.derivedStateOf
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableFloatStateOf
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.runtime.rememberCoroutineScope
+import androidx.compose.runtime.setValue
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.graphicsLayer
+import androidx.compose.ui.platform.LocalDensity
+import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.semantics.Role
+import androidx.compose.ui.semantics.contentDescription
+import androidx.compose.ui.semantics.onClick
+import androidx.compose.ui.semantics.role
+import androidx.compose.ui.semantics.semantics
+import androidx.compose.ui.unit.IntOffset
+import androidx.compose.ui.unit.dp
+import de.jeanlucmakiola.calendula.R
+import de.jeanlucmakiola.calendula.ui.week.TimedBlock
+import de.jeanlucmakiola.floret.identity.rememberReduceMotion
+import kotlinx.coroutines.CoroutineScope
+import kotlinx.coroutines.launch
+import kotlin.math.roundToInt
+
+/** Thickness of the out-of-view edge bar. */
+private val EDGE_BAR_THICKNESS = 3.dp
+
+/** Band the bar sits in, and the room a revealed event keeps from the edge. */
+private val EDGE_TOUCH_HEIGHT = 24.dp
+
+/** How far from the viewport's edge a tap on empty column still hits the bar. */
+private val EDGE_TAP_REACH = 16.dp
+
+/**
+ * How far the bar sits in from the viewport's edges — enough to clear the
+ * timeline's rounded 16dp corners on the outer columns.
+ */
+private val EDGE_BAR_VERTICAL_INSET = 4.dp
+private val EDGE_BAR_HORIZONTAL_INSET = 6.dp
+
+/** Distance outside the viewport over which a bar fades before its event appears. */
+private val EDGE_FADE_LEAD = 24.dp
+
+/** The nearest timed blocks wholly above and below a column's viewport. */
+@Immutable
+data class OutOfViewEvents(val above: TimedBlock?, val below: TimedBlock?) {
+    companion object {
+        val None = OutOfViewEvents(null, null)
+    }
+}
+
+/** Which edge of the viewport a hidden event sits past. */
+enum class ViewportEdge { Top, Bottom }
+
+/** Where [block]'s rendered bottom lands, in minutes — short blocks keep a floor. */
+internal fun renderedEndMin(block: TimedBlock): Float =
+    maxOf(block.endMin.toFloat(), block.startMin + MIN_EVENT_FRACTION * 60f)
+
+/**
+ * The blocks of one column lying out of a viewport spanning [topMin]..[bottomMin]
+ * (minutes of the day), nearest first. A block leaves this set as soon as any
+ * part of its rendered height enters the viewport.
+ */
+fun outOfViewEvents(
+    blocks: List<TimedBlock>,
+    topMin: Float,
+    bottomMin: Float,
+): OutOfViewEvents {
+    val above = blocks
+        .filter { renderedEndMin(it) <= topMin }
+        .maxWithOrNull(compareBy<TimedBlock>({ renderedEndMin(it) }, { it.startMin }))
+    val below = blocks
+        .filter { it.startMin >= bottomMin }
+        .minWithOrNull(compareBy<TimedBlock>({ it.startMin }, { -renderedEndMin(it) }))
+    return OutOfViewEvents(above, below)
+}
+
+/**
+ * The scroll offset that brings [block] into a [viewportPx]-tall viewport from
+ * past [edge], with [marginPx] of room so it clears the edge bar. An event above
+ * lands with its start at the top; one below lands whole at the bottom when it
+ * fits, and with its start at the top when it does not.
+ */
+fun revealScrollTarget(
+    block: TimedBlock,
+    edge: ViewportEdge,
+    hourPx: Float,
+    viewportPx: Int,
+    marginPx: Float,
+    maxScroll: Int,
+): Int {
+    val startPx = block.startMin / 60f * hourPx
+    val endPx = renderedEndMin(block) / 60f * hourPx
+    val target = when (edge) {
+        ViewportEdge.Top -> startPx - marginPx
+        ViewportEdge.Bottom -> minOf(endPx + marginPx - viewportPx, startPx - marginPx)
+    }
+    return target.roundToInt().coerceIn(0, maxOf(maxScroll, 0))
+}
+
+/**
+ * The edge whose bar a tap at [y] (content px) lands on, if that bar is showing
+ * and the tap is within [reachPx] of the viewport's edge.
+ */
+fun tappedEdge(
+    events: OutOfViewEvents,
+    y: Float,
+    viewportTop: Float,
+    viewportPx: Int,
+    reachPx: Float,
+): ViewportEdge? = when {
+    events.above != null && y - viewportTop <= reachPx -> ViewportEdge.Top
+    events.below != null && viewportTop + viewportPx - y <= reachPx -> ViewportEdge.Bottom
+    else -> null
+}
+
+/** Fade while the event is still outside; never draw its bar at the boundary. */
+internal fun edgeBarAlpha(gapPx: Float, fadeLeadPx: Float): Float = when {
+    gapPx <= 0f -> 0f
+    fadeLeadPx <= 0f -> 1f
+    else -> (gapPx / fadeLeadPx).coerceIn(0f, 1f)
+}
+
+/**
+ * The out-of-view state of one day column (#188): which events hide past its
+ * edges, and the scroll that reveals them.
+ *
+ * The bars take no touches themselves, so event blocks under them keep their
+ * taps and drags; the column's own tap handler offers taps to [tap] first.
+ */
+@Stable
+class OutOfViewEdges internal constructor(
+    private val scrollState: ScrollState,
+    private val scope: CoroutineScope,
+) {
+    internal var blocks by mutableStateOf(emptyList<TimedBlock>())
+    internal var hourPx by mutableFloatStateOf(0f)
+    internal var fadeLeadPx by mutableFloatStateOf(0f)
+    internal var marginPx by mutableFloatStateOf(0f)
+    internal var reachPx by mutableFloatStateOf(0f)
+    internal var reduceMotion = false
+    internal var revealSpec: FiniteAnimationSpec<Float>? = null
+
+    val events: OutOfViewEvents by derivedStateOf {
+        val viewport = scrollState.viewportSize
+        if (viewport <= 0 || hourPx <= 0f) {
+            OutOfViewEvents.None
+        } else {
+            val top = scrollState.value.toFloat()
+            outOfViewEvents(
+                blocks = blocks,
+                topMin = top / hourPx * 60f,
+                bottomMin = (top + viewport) / hourPx * 60f,
+            )
+        }
+    }
+
+    /** Scrolls the event hidden past [edge] into view, if there is one. */
+    fun reveal(edge: ViewportEdge) {
+        val block = if (edge == ViewportEdge.Top) events.above else events.below
+        block ?: return
+        val target = revealScrollTarget(
+            block = block,
+            edge = edge,
+            hourPx = hourPx,
+            viewportPx = scrollState.viewportSize,
+            marginPx = marginPx,
+            maxScroll = scrollState.maxValue,
+        )
+        val spec = revealSpec
+        scope.launch {
+            if (reduceMotion || spec == null) {
+                scrollState.scrollTo(target)
+            } else {
+                scrollState.animateScrollTo(target, spec)
+            }
+        }
+    }
+
+    /** Reveals the hidden event if a tap at [y] (content px) lands on a bar. */
+    fun tap(y: Float): Boolean {
+        val edge = tappedEdge(
+            events = events,
+            y = y,
+            viewportTop = scrollState.value.toFloat(),
+            viewportPx = scrollState.viewportSize,
+            reachPx = reachPx,
+        ) ?: return false
+        reveal(edge)
+        return true
+    }
+}
+
+@Composable
+fun rememberOutOfViewEdges(
+    blocks: List<TimedBlock>,
+    scrollState: ScrollState,
+    hourPx: Float,
+): OutOfViewEdges {
+    val scope = rememberCoroutineScope()
+    val edges = remember(scrollState, scope) { OutOfViewEdges(scrollState, scope) }
+    val density = LocalDensity.current
+    val reduceMotion = rememberReduceMotion()
+    val revealSpec = rememberCalendarPageSpec()
+    SideEffect {
+        edges.blocks = blocks
+        edges.hourPx = hourPx
+        edges.fadeLeadPx = with(density) { EDGE_FADE_LEAD.toPx() }
+        edges.marginPx = with(density) { EDGE_TOUCH_HEIGHT.roundToPx().toFloat() }
+        edges.reachPx = with(density) { EDGE_TAP_REACH.toPx() }
+        edges.reduceMotion = reduceMotion
+        edges.revealSpec = revealSpec
+    }
+    return edges
+}
+
+/**
+ * Thin bars at the top and bottom of a day column's visible viewport, tinted in
+ * the colour of the nearest timed event hidden past that edge (#188).
+ *
+ * Lives inside the column's scrolling content and follows the viewport by
+ * offsetting against [scrollState] at placement rather than recomposing every
+ * frame. Opacity follows the gap to the hidden event and reaches zero before
+ * the event enters view. Taps reach it through [OutOfViewEdges.tap]; screen
+ * readers get a button.
+ */
+@Composable
+fun BoxScope.OutOfViewEdgeBars(
+    edges: OutOfViewEdges,
+    scrollState: ScrollState,
+    dark: Boolean,
+) {
+    val touchPx = with(LocalDensity.current) { EDGE_TOUCH_HEIGHT.roundToPx() }
+    val events = edges.events
+    EdgeBar(
+        block = events.above,
+        edge = ViewportEdge.Top,
+        dark = dark,
+        onReveal = edges::reveal,
+        scrollState = scrollState,
+        hourPx = edges.hourPx,
+        fadeLeadPx = edges.fadeLeadPx,
+        modifier = Modifier
+            .align(Alignment.TopStart)
+            .offset { IntOffset(0, scrollState.value) },
+    )
+    EdgeBar(
+        block = events.below,
+        edge = ViewportEdge.Bottom,
+        dark = dark,
+        onReveal = edges::reveal,
+        scrollState = scrollState,
+        hourPx = edges.hourPx,
+        fadeLeadPx = edges.fadeLeadPx,
+        modifier = Modifier
+            .align(Alignment.TopStart)
+            .offset { IntOffset(0, scrollState.value + scrollState.viewportSize - touchPx) },
+    )
+}
+
+@Composable
+private fun EdgeBar(
+    block: TimedBlock?,
+    edge: ViewportEdge,
+    dark: Boolean,
+    onReveal: (ViewportEdge) -> Unit,
+    scrollState: ScrollState,
+    hourPx: Float,
+    fadeLeadPx: Float,
+    modifier: Modifier = Modifier,
+) {
+    block ?: return
+    val color = eventFill(block.event.color, dark, LocalSoftenColors.current)
+    val label = stringResource(
+        if (edge == ViewportEdge.Top) R.string.timeline_earlier_events else R.string.timeline_later_events,
+    )
+    Box(
+        modifier = modifier
+            .fillMaxWidth()
+            .height(EDGE_TOUCH_HEIGHT)
+            .graphicsLayer {
+                val gapPx = when (edge) {
+                    ViewportEdge.Top -> scrollState.value - renderedEndMin(block) / 60f * hourPx
+                    ViewportEdge.Bottom -> block.startMin / 60f * hourPx -
+                        (scrollState.value + scrollState.viewportSize)
+                }
+                alpha = edgeBarAlpha(gapPx, fadeLeadPx)
+            }
+            .semantics {
+                role = Role.Button
+                contentDescription = label
+                onClick {
+                    onReveal(edge)
+                    true
+                }
+            },
+        contentAlignment = if (edge == ViewportEdge.Top) Alignment.TopCenter else Alignment.BottomCenter,
+    ) {
+        Box(
+            modifier = Modifier
+                .fillMaxWidth()
+                .padding(
+                    horizontal = EDGE_BAR_HORIZONTAL_INSET,
+                    vertical = EDGE_BAR_VERTICAL_INSET,
+                )
+                .height(EDGE_BAR_THICKNESS)
+                .background(color, CircleShape),
+        )
+    }
+}

app/src/main/java/de/jeanlucmakiola/calendula/ui/common/PageStateCache.kt

@@ -0,0 +1,53 @@
+package de.jeanlucmakiola.calendula.ui.common
+
+import kotlinx.coroutines.CoroutineScope
+import kotlinx.coroutines.Job
+import kotlinx.coroutines.SupervisorJob
+import kotlinx.coroutines.flow.Flow
+import kotlinx.coroutines.flow.SharingStarted
+import kotlinx.coroutines.flow.StateFlow
+import kotlinx.coroutines.flow.stateIn
+import kotlinx.coroutines.plus
+
+/**
+ * One shared state per pager page — a week, a day, a month — so a page and the
+ * screen's anchor read the same query, and the pages either side stay loaded
+ * across a swipe.
+ *
+ * Every entry shares on its own job, cancelled when [keep] lets it go: a
+ * `stateIn` on the ViewModel's scope would stay running, holding its last state,
+ * until the ViewModel itself was cleared. Main thread only.
+ *
+ * @param keep whether a cached key is still worth holding once [get] asks for another.
+ */
+class PageStateCache<K, S>(
+    private val scope: CoroutineScope,
+    private val initial: S,
+    private val keep: (cached: K, requested: K) -> Boolean,
+    private val load: (K) -> Flow<S>,
+) {
+    private class Entry<S>(val state: StateFlow<S>, val job: Job)
+
+    private val entries = HashMap<K, Entry<S>>()
+
+    /** The number of entries held, for tests. */
+    internal val size: Int get() = entries.size
+
+    fun get(key: K): StateFlow<S> {
+        val iterator = entries.iterator()
+        while (iterator.hasNext()) {
+            val (cached, entry) = iterator.next()
+            if (cached != key && !keep(cached, key)) {
+                entry.job.cancel()
+                iterator.remove()
+            }
+        }
+        return entries.getOrPut(key) {
+            val job = SupervisorJob(scope.coroutineContext[Job])
+            Entry(
+                state = load(key).stateIn(scope + job, SharingStarted.WhileSubscribed(5_000L), initial),
+                job = job,
+            )
+        }.state
+    }
+}

app/src/main/java/de/jeanlucmakiola/calendula/ui/common/TimelineDrag.kt

@@ -284,8 +284,8 @@ class TimelineGeometry {
 }
 
 /**
- * Hoisted drag state for one timeline (#68). It lives above the per-page
- * `AnimatedContent`, so a page change mid-drag can't strand a ghost, and the
+ * Hoisted drag state for one timeline (#68). It lives above the pager, so a
+ * page change mid-drag can't strand a ghost, and the
  * block it renders is drawn in an overlay, clear of the day column's clip.
  */
 @Stable
@@ -710,7 +710,7 @@ fun TimelineDragOverlay(controller: TimelineDragController, modifier: Modifier =
         val startMin = drag.eventStartMin.mod(MINUTES_PER_DAY)
         val rawEnd = startMin + drag.eventSpanMin
         val endMin = if (rawEnd > MINUTES_PER_DAY) rawEnd % MINUTES_PER_DAY else rawEnd
-        val label = "${formatMinuteOfDay(startMin, use24Hour, locale)}–" +
+        val range = formatMinuteOfDay(startMin, use24Hour, locale) to
             formatMinuteOfDay(endMin, use24Hour, locale)
         // The timeline's own bounds. The copy is drawn over the whole calendar
         // so no column clip or rounded corner cuts it, but it still belongs to
@@ -764,7 +764,7 @@ fun TimelineDragOverlay(controller: TimelineDragController, modifier: Modifier =
                     title = title,
                     titleLines = drag.titleLines,
                     // Once for the whole event: repeated, it would name it per day.
-                    label = label.takeIf { index == labelled },
+                    range = range.takeIf { index == labelled },
                 )
             }
         }
@@ -784,7 +784,7 @@ private fun DragCopy(
     alpha: Float,
     title: String,
     titleLines: Int,
-    label: String?,
+    range: Pair<String, String>?,
 ) {
     val density = LocalDensity.current
     val width = with(density) { sizePx.width.toDp() }
@@ -814,6 +814,7 @@ private fun DragCopy(
         )
     }
     val left = metrics.available - metrics.titleHeight(lines)
+    val label = range?.let { rememberBlockTimeRange(it.first, it.second, textWidth) }
     val showTime = label != null && left >= metrics.timeLine
     val timeMaxLines = if (showTime) {
         blockTimeLines(label!!, textWidth, left - metrics.timeLine)

app/src/main/java/de/jeanlucmakiola/calendula/ui/common/TimelineHours.kt

@@ -0,0 +1,58 @@
+package de.jeanlucmakiola.calendula.ui.common
+
+import kotlin.math.abs
+import kotlin.math.roundToInt
+
+/**
+ * The hours the week and day timelines fit to the screen when they open (#322).
+ *
+ * Nothing outside the range is hidden: [TimelineScale.FitHours] only sizes the
+ * hour so that [startHour]..[endHour] fills the viewport, and the timeline opens
+ * scrolled to [startHour]. The hours are kept when [enabled] is switched off, so
+ * switching it back on restores the chosen range.
+ */
+data class TimelineHours(
+    val enabled: Boolean = false,
+    val startHour: Int = DEFAULT_START_HOUR,
+    val endHour: Int = DEFAULT_END_HOUR,
+) {
+    val span: Int get() = endHour - startHour
+
+    companion object {
+        const val DEFAULT_START_HOUR = 7
+        const val DEFAULT_END_HOUR = 22
+
+        /** Shortest range that can be chosen, in hours. */
+        const val MIN_SPAN = 2
+
+        /**
+         * A range with [startHour] and [endHour] held to the day and at least
+         * [MIN_SPAN] apart; the start gives way when the two collide.
+         */
+        fun of(enabled: Boolean, startHour: Int, endHour: Int): TimelineHours {
+            val end = endHour.coerceIn(MIN_SPAN, 24)
+            val start = startHour.coerceIn(0, end - MIN_SPAN)
+            return TimelineHours(enabled, start, end)
+        }
+
+        /** Start hours that still leave [MIN_SPAN] before [endHour]. */
+        fun startOptions(endHour: Int): List<Int> = (0..endHour - MIN_SPAN).toList()
+
+        /** End hours at least [MIN_SPAN] after [startHour]; 24 is midnight. */
+        fun endOptions(startHour: Int): List<Int> = (startHour + MIN_SPAN..24).toList()
+    }
+}
+
+/**
+ * The scroll offset that puts [startHour] at the top of a timeline laid out
+ * with [maxValue] scroll range over a [viewportPx] viewport, or null while that
+ * layout is not yet at [hourPx] per hour — the scale changes a frame before the
+ * content grows to match it, and scrolling against the old layout would land on
+ * the wrong hour.
+ */
+internal fun startHourScroll(maxValue: Int, viewportPx: Int, startHour: Int, hourPx: Float): Int? {
+    if (viewportPx <= 0 || maxValue < 0 || maxValue == Int.MAX_VALUE) return null
+    val laidOutHourPx = (maxValue + viewportPx) / 24f
+    if (abs(laidOutHourPx - hourPx) > 1f) return null
+    return (startHour * laidOutHourPx).roundToInt().coerceIn(0, maxValue)
+}

app/src/main/java/de/jeanlucmakiola/calendula/ui/common/TimelineScale.kt

@@ -38,6 +38,12 @@ sealed interface TimelineScale {
     /** A height the user pinched to. Build it through [custom], which clamps. */
     data class Custom(val hourHeight: Dp) : TimelineScale
 
+    /**
+     * [startHour]..[endHour] fills the viewport (#322). Applied when a timeline
+     * opens with [TimelineHours] on, never picked from the preset list.
+     */
+    data class FitHours(val startHour: Int, val endHour: Int) : TimelineScale
+
     companion object {
         /** The named steps the settings picker offers, coarse to roomy. */
         val presets: List<TimelineScale> = listOf(FitDay, Compact, Regular, Comfortable)
@@ -74,6 +80,9 @@ fun TimelineScale.hourHeight(viewportHeight: Dp): Dp = when (this) {
     is TimelineScale.Custom -> this.hourHeight
         .coerceAtMost(MAX_PINCH_HOUR_HEIGHT)
         .coerceAtLeast(fillHourHeight(viewportHeight))
+    is TimelineScale.FitHours -> (viewportHeight / (endHour - startHour).coerceIn(1, 24).toFloat())
+        .coerceAtMost(MAX_PINCH_HOUR_HEIGHT)
+        .coerceAtLeast(fillHourHeight(viewportHeight))
 }
 
 /**
@@ -134,6 +143,7 @@ val TimelineScale.labelRes: Int
         TimelineScale.Regular -> R.string.timeline_scale_regular
         TimelineScale.Comfortable -> R.string.timeline_scale_comfortable
         is TimelineScale.Custom -> R.string.timeline_scale_custom
+        is TimelineScale.FitHours -> R.string.settings_visible_hours
     }
 
 @get:StringRes
@@ -144,11 +154,15 @@ val TimelineScale.descriptionRes: Int
         TimelineScale.Regular -> R.string.timeline_scale_regular_summary
         TimelineScale.Comfortable -> R.string.timeline_scale_comfortable_summary
         is TimelineScale.Custom -> R.string.timeline_scale_custom_summary
+        is TimelineScale.FitHours -> R.string.settings_visible_hours_summary
     }
 
 /** Marks a stored custom height; the rest of the value is its dp. */
 private const val CUSTOM_PREFIX = "custom:"
 
+/** Marks a stored hour range, as `start-end`. */
+private const val HOURS_PREFIX = "hours:"
+
 /**
  * Stored names for the presets. Spelled out rather than taken from `toString()`
  * so R8 can't rename them out from under an existing install — and they match
@@ -171,6 +185,7 @@ private val PRESET_NAMES: Map<TimelineScale, String> = mapOf(
  */
 fun TimelineScale.storageValue(): String = when (this) {
     is TimelineScale.Custom -> CUSTOM_PREFIX + hourHeight.value
+    is TimelineScale.FitHours -> "$HOURS_PREFIX$startHour-$endHour"
     TimelineScale.FitDay,
     TimelineScale.Compact,
     TimelineScale.Regular,
@@ -188,5 +203,11 @@ fun parseTimelineScale(stored: String?): TimelineScale = when {
     stored.startsWith(CUSTOM_PREFIX) -> stored.removePrefix(CUSTOM_PREFIX).toFloatOrNull()
         ?.let { TimelineScale.custom(it.dp) }
         ?: TimelineScale.Regular
+    stored.startsWith(HOURS_PREFIX) -> stored.removePrefix(HOURS_PREFIX).split('-')
+        .mapNotNull { it.toIntOrNull() }
+        .takeIf { it.size == 2 }
+        ?.let { (start, end) -> TimelineHours.of(enabled = true, start, end) }
+        ?.let { TimelineScale.FitHours(it.startHour, it.endHour) }
+        ?: TimelineScale.Regular
     else -> PRESET_NAMES.entries.firstOrNull { it.value == stored }?.key ?: TimelineScale.Regular
 }

app/src/main/java/de/jeanlucmakiola/calendula/ui/common/TimelineScroll.kt

@@ -0,0 +1,111 @@
+package de.jeanlucmakiola.calendula.ui.common
+
+import androidx.compose.foundation.ScrollState
+import androidx.compose.foundation.rememberScrollState
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.setValue
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.LaunchedEffect
+import androidx.compose.runtime.Stable
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.runtime.rememberUpdatedState
+import androidx.compose.runtime.snapshotFlow
+import androidx.compose.runtime.staticCompositionLocalOf
+import androidx.compose.ui.platform.LocalDensity
+import androidx.compose.ui.unit.Dp
+import kotlinx.coroutines.flow.filterNotNull
+import kotlinx.coroutines.flow.first
+import kotlinx.coroutines.withTimeoutOrNull
+import kotlin.math.roundToInt
+
+/**
+ * Where 00:00 sat in the last timeline shown, measured from the top of its
+ * view's content, so the next timeline view opens on the same hours (#184): an
+ * event in both keeps its place and only grows sideways.
+ */
+class TimelineScrollMemory {
+    var midnightY: Float? = null
+}
+
+val LocalTimelineScroll = staticCompositionLocalOf<TimelineScrollMemory?> { null }
+
+/** A timeline's scroll, and where it opens before it can scroll there. */
+@Stable
+class TimelineScroll(val state: ScrollState, noonPending: Boolean, private val openingHour: Int?) {
+    /** Whether it is still to be put on noon, which it only can be once laid out. */
+    var noonPending by mutableStateOf(noonPending)
+        internal set
+
+    /** The top of what it shows, or will once open, over [content] pixels in a [viewport] pixels high. */
+    fun top(viewport: Float, content: Float): Float =
+        if (noonPending) {
+            (openingHour?.let { it * content / 24f } ?: (content - viewport) / 2f)
+                .coerceIn(0f, (content - viewport).coerceAtLeast(0f))
+        } else state.value.toFloat()
+}
+
+val LocalOpeningTimeline = staticCompositionLocalOf<TimelineScroll?> { null }
+
+/**
+ * The scroll state of a timeline whose scrolling area starts [timelineTop] below
+ * its view's content top. Opens where the last timeline left off, or on noon the
+ * first time.
+ */
+@Composable
+fun rememberTimelineScrollState(timelineTop: Dp): TimelineScroll {
+    val memory = LocalTimelineScroll.current
+    val density = LocalDensity.current
+    val zoom = LocalTimelineZoom.current
+    val topPx = with(density) { timelineTop.toPx() }
+    val remembered = memory?.midnightY
+    val scrollState = rememberScrollState(
+        initial = remembered?.let { (topPx - it).roundToInt().coerceAtLeast(0) } ?: 0,
+    )
+    val scroll = remember(scrollState) {
+        TimelineScroll(
+            scrollState,
+            noonPending = remembered == null,
+            openingHour = zoom.hours.takeIf { it.enabled }?.startHour,
+        )
+    }
+    val currentTop by rememberUpdatedState(topPx)
+    var firstOpen by remember(scrollState) { mutableStateOf(true) }
+    LaunchedEffect(scrollState, zoom, zoom.hours) {
+        if (firstOpen && remembered != null) {
+            firstOpen = false
+            return@LaunchedEffect
+        }
+        firstOpen = false
+        val startHour = zoom.open()
+        if (startHour == null) {
+            snapshotFlow { scrollState.maxValue }.first { it > 0 }
+            scrollState.scrollTo(scrollState.maxValue / 2)
+        } else {
+            // Fitted to the scroll viewport itself: the layout resolves scales
+            // against the viewport plus the all-day strip, which would push the
+            // end hour below the screen.
+            val viewport = snapshotFlow { scrollState.viewportSize }.first { it > 0 }
+            val hourHeight = zoom.scale.hourHeight(with(density) { viewport.toDp() })
+            zoom.holdFit(hourHeight)
+            val hourPx = with(density) { hourHeight.toPx() }
+            val target = withTimeoutOrNull(FIT_LAYOUT_TIMEOUT_MILLIS) {
+                snapshotFlow {
+                    startHourScroll(scrollState.maxValue, scrollState.viewportSize, startHour, hourPx)
+                }.filterNotNull().first()
+            } ?: (startHour * (scrollState.maxValue + scrollState.viewportSize) / 24)
+                .coerceIn(0, scrollState.maxValue.coerceAtLeast(0))
+            scrollState.scrollTo(target)
+        }
+        scroll.noonPending = false
+    }
+    if (memory != null) {
+        LaunchedEffect(scrollState, memory) {
+            snapshotFlow { currentTop - scrollState.value }.collect { memory.midnightY = it }
+        }
+    }
+    return scroll
+}
+
+/** How long an opening timeline waits to be laid out at its fitted hours before scrolling anyway. */
+private const val FIT_LAYOUT_TIMEOUT_MILLIS = 500L

app/src/main/java/de/jeanlucmakiola/calendula/ui/common/TimelineZoom.kt

@@ -49,13 +49,49 @@ class TimelineZoom(
     var isPinching: Boolean by mutableStateOf(false)
         private set
 
+    /** The visible-hours preference (#322); a timeline re-fits when it changes. */
+    var hours: TimelineHours by mutableStateOf(TimelineHours())
+        private set
+
+    private var stored: TimelineScale = initial
+
     /**
      * Take a value that came from the preference. Ignored mid-pinch: the stored
      * value is a frame or two behind the fingers there, and letting it land would
-     * snap the timeline back while the user is still pinching.
+     * snap the timeline back while the user is still pinching. With visible
+     * hours on it is only remembered, so a late-arriving preference can't undo
+     * the fit a timeline just opened with.
      */
     fun adopt(stored: TimelineScale) {
-        if (!isPinching) scale = stored
+        this.stored = stored
+        if (!isPinching && !hours.enabled) scale = stored
+    }
+
+    /** Take the visible-hours preference; switching it off hands back the stored scale. */
+    fun adoptHours(hours: TimelineHours) {
+        val wasEnabled = this.hours.enabled
+        this.hours = hours
+        if (wasEnabled && !hours.enabled && !isPinching) scale = stored
+    }
+
+    /**
+     * A timeline is opening. With visible hours on, the range replaces whatever
+     * scale is in force — a stored preset and a pinch alike — and its start hour
+     * is returned for the timeline to scroll to; otherwise null.
+     */
+    fun open(): Int? {
+        val hours = hours
+        if (!hours.enabled) return null
+        if (!isPinching) scale = TimelineScale.FitHours(hours.startHour, hours.endHour)
+        return hours.startHour
+    }
+
+    /**
+     * Holds the height [open] fitted, so a viewport that changes afterwards (the
+     * all-day strip following a swipe) doesn't rescale the hours under the scroll.
+     */
+    fun holdFit(hourHeight: Dp) {
+        if (!isPinching && scale is TimelineScale.FitHours) scale = TimelineScale.Custom(hourHeight)
     }
 
     fun beginPinch() {
@@ -66,9 +102,10 @@ class TimelineZoom(
         scale = TimelineScale.custom(hourHeight)
     }
 
+    /** Settles the pinch. With visible hours on it only lasts until the next [open]. */
     fun endPinch() {
         isPinching = false
-        persist(scale)
+        if (!hours.enabled) persist(scale)
     }
 }
 
@@ -82,16 +119,18 @@ private val DetachedTimelineZoom by lazy { TimelineZoom(TimelineScale.Regular) {
 val LocalTimelineZoom = staticCompositionLocalOf { DetachedTimelineZoom }
 
 /**
- * The app-wide [TimelineZoom], seeded from [stored] and writing settled pinches
- * back through [onPersist].
+ * The app-wide [TimelineZoom], seeded from [stored] and [hours] and writing
+ * settled pinches back through [onPersist].
  */
 @Composable
 fun rememberTimelineZoom(
     stored: TimelineScale,
+    hours: TimelineHours,
     onPersist: (TimelineScale) -> Unit,
 ): TimelineZoom {
     val persist by rememberUpdatedState(onPersist)
     val zoom = remember { TimelineZoom(stored) { persist(it) } }
+    LaunchedEffect(hours) { zoom.adoptHours(hours) }
     // Picking a preset in Settings has to reach the timelines, and so does the
     // stored value arriving after the first frame.
     LaunchedEffect(stored) { zoom.adopt(stored) }

app/src/main/java/de/jeanlucmakiola/calendula/ui/common/TodayAction.kt

@@ -7,9 +7,9 @@ import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.material3.IconButton
 import androidx.compose.material3.LocalContentColor
 import androidx.compose.material3.Text
+import androidx.compose.runtime.getValue
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.derivedStateOf
-import androidx.compose.runtime.getValue
 import androidx.compose.runtime.remember
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
@@ -59,7 +59,8 @@ fun TodayAction(show: Boolean, onToday: () -> Unit) {
     val description = stringResource(R.string.today_jump_action)
     IconButton(
         onClick = onToday,
-        modifier = Modifier.semantics { contentDescription = description },
+        modifier = Modifier
+            .semantics { contentDescription = description },
     ) {
         val textSize = with(LocalDensity.current) { GlyphTextHeight.toSp() }
         Box(

app/src/main/java/de/jeanlucmakiola/calendula/ui/common/ViewFocus.kt

@@ -0,0 +1,49 @@
+package de.jeanlucmakiola.calendula.ui.common
+
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.Stable
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.runtime.saveable.Saver
+import androidx.compose.runtime.setValue
+import androidx.compose.runtime.staticCompositionLocalOf
+import kotlinx.datetime.LocalDate
+
+/**
+ * The date every calendar view is looking at (#184), so switching views keeps
+ * the same days on screen and what is shown in both can travel between them.
+ *
+ * A view reads it once, as it comes on screen, and writes it back only when the
+ * user moves: a view settling where it opened must not nudge it, or switching
+ * back and forth would drift.
+ */
+@Stable
+class ViewFocus(initial: LocalDate) {
+    var date by mutableStateOf(initial)
+    /** Explicit navigation, including a request for the view already on screen. */
+    var navigationVersion by mutableStateOf(0)
+        private set
+
+    fun navigateTo(target: LocalDate) {
+        date = target
+        navigationVersion++
+    }
+}
+
+val ViewFocusSaver: Saver<ViewFocus, String> = Saver(
+    save = { it.date.toString() },
+    restore = { ViewFocus(LocalDate.parse(it)) },
+)
+
+val LocalViewFocus = staticCompositionLocalOf<ViewFocus?> { null }
+
+/**
+ * Runs [enter] with the focused date once, as the view comes on screen, before
+ * it reads its own position: its first frame is then already on that date.
+ */
+@Composable
+fun <T : Any> EnterOnFocus(key: T, enter: (LocalDate) -> Unit) {
+    val focus = LocalViewFocus.current
+    remember(key) { focus?.date?.also(enter) }
+}

app/src/main/java/de/jeanlucmakiola/calendula/ui/common/ViewMorph.kt

@@ -0,0 +1,177 @@
+package de.jeanlucmakiola.calendula.ui.common
+
+import androidx.compose.animation.AnimatedVisibilityScope
+import androidx.compose.animation.BoundsTransform
+import androidx.compose.animation.ExperimentalSharedTransitionApi
+import androidx.compose.animation.SharedTransitionScope
+import androidx.compose.animation.core.FiniteAnimationSpec
+import androidx.compose.animation.fadeIn
+import androidx.compose.animation.fadeOut
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.CompositionLocalProvider
+import androidx.compose.runtime.compositionLocalOf
+import androidx.compose.runtime.DisposableEffect
+import androidx.compose.runtime.mutableStateSetOf
+import androidx.compose.runtime.remember
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.geometry.Rect
+import androidx.compose.ui.graphics.Path
+import androidx.compose.ui.unit.Density
+import androidx.compose.ui.unit.LayoutDirection
+import de.jeanlucmakiola.calendula.domain.EventInstance
+import kotlinx.datetime.LocalDate
+
+/**
+ * What the views share when switching between them (#184): an event visible in
+ * both grows from where it sat into where it lands, a date label travels to its
+ * new seat, and everything else fades through.
+ *
+ * An element is tagged with the day it is drawn *from*, not just its instance: a
+ * multi-day event is drawn once per day, per week row or per timeline column,
+ * and only one element per key may take part. The segment that starts on the
+ * same day in both views is the one that travels; the rest fade where they are.
+ */
+sealed interface ViewMorphKey {
+    data class Event(val eventId: Long, val beginMillis: Long, val day: LocalDate) : ViewMorphKey
+
+    data class Day(val date: LocalDate) : ViewMorphKey
+
+
+    companion object {
+        /** [event]'s occurrence as drawn from [day]. */
+        fun event(event: EventInstance, day: LocalDate): Event =
+            Event(event.eventId, event.start.toEpochMilliseconds(), day)
+    }
+}
+
+/** The view switch's scopes and specs, captured where they exist. Null under reduced motion. */
+@OptIn(ExperimentalSharedTransitionApi::class)
+class ViewMorphScope(
+    val shared: SharedTransitionScope,
+    val visibility: AnimatedVisibilityScope,
+    val boundsTransform: BoundsTransform,
+    val fadeSpec: FiniteAnimationSpec<Float>,
+    val clip: BelowTopBarClip,
+    val stayingPut: StayingPut,
+    /** Read while matching, so a tag can sit out without leaving the modifier chain. */
+    val enabled: () -> Boolean = { true },
+) {
+    /** This scope with its tags switched off while [enabled] is false. */
+    fun gated(enabled: () -> Boolean): ViewMorphScope =
+        ViewMorphScope(shared, visibility, boundsTransform, fadeSpec, clip, stayingPut, enabled)
+
+    internal val config = object : SharedTransitionScope.SharedContentConfig {
+        override val SharedTransitionScope.SharedContentState.isEnabled: Boolean
+            get() = enabled()
+    }
+}
+
+/**
+ * The events a view has but keeps out of the switch, being scrolled out of
+ * sight: the other view leaves them untagged too, or its half would travel to
+ * nowhere and snap into place at the end.
+ */
+class StayingPut {
+    val keys = mutableStateSetOf<ViewMorphKey.Event>()
+}
+
+/** Marks [key] as staying put while [stays], for as long as it is composed. */
+@Composable
+fun StayPut(key: ViewMorphKey.Event, stays: Boolean) {
+    val stayingPut = LocalViewMorph.current?.stayingPut ?: return
+    if (!stays) return
+    DisposableEffect(stayingPut, key) {
+        stayingPut.keys += key
+        onDispose { stayingPut.keys -= key }
+    }
+}
+
+/**
+ * Keeps what travels below the top bar, which every view has at the same height:
+ * the overlay draws above the whole screen, so an event scrolled under the bar
+ * would otherwise cross it. [top] is the bar's bottom edge in the shared layout.
+ */
+@OptIn(ExperimentalSharedTransitionApi::class)
+class BelowTopBarClip : SharedTransitionScope.OverlayClip {
+    var top = 0f
+
+    override fun getClipPath(
+        sharedContentState: SharedTransitionScope.SharedContentState,
+        bounds: Rect,
+        layoutDirection: LayoutDirection,
+        density: Density,
+    ): Path = Path().apply { addRect(Rect(-FAR, top, FAR, FAR)) }
+
+    private companion object {
+        const val FAR = 1e6f
+    }
+}
+
+val LocalViewMorph = compositionLocalOf<ViewMorphScope?> { null }
+
+/**
+ * Whether a pager page may carry the morph tags: only the settled one. Its
+ * neighbours are composed ahead and repeat some of its dates, which would both
+ * claim its keys and fly in from off screen.
+ */
+fun morphPageActive(page: Int, settledPage: Int): Boolean = page == settledPage
+
+/** Provides the view morph to [content] only while [active] — see [morphPageActive]. */
+@Composable
+fun ViewMorphPage(active: Boolean, content: @Composable () -> Unit) {
+    val morph = LocalViewMorph.current
+    CompositionLocalProvider(LocalViewMorph provides morph.takeIf { active }, content = content)
+}
+
+/**
+ * Tags an event chip, bar, block or row. Its bounds are shared and the two faces
+ * cross-fade inside them; remeasured rather than scaled, so a title keeps its
+ * real size and is clipped while there is no room, instead of smearing.
+ *
+ * Goes after the element's offset and before its size, so the travelling bounds
+ * drive the measurement.
+ */
+@OptIn(ExperimentalSharedTransitionApi::class)
+@Composable
+fun Modifier.morphEvent(key: ViewMorphKey.Event): Modifier {
+    val morph = LocalViewMorph.current ?: return this
+    if (key in morph.stayingPut.keys) return this
+    return with(morph.shared) {
+        this@morphEvent.sharedBounds(
+            sharedContentState = rememberSharedContentState(key, morph.config),
+            animatedVisibilityScope = morph.visibility,
+            enter = fadeIn(morph.fadeSpec),
+            exit = fadeOut(morph.fadeSpec),
+            boundsTransform = morph.boundsTransform,
+            clipInOverlayDuringTransition = morph.clip,
+            resizeMode = SharedTransitionScope.ResizeMode.RemeasureToBounds,
+            zIndexInOverlay = 1f,
+        )
+    }
+}
+
+/** Tags a day's number, which is small on both sides, so it scales on its way. */
+@OptIn(ExperimentalSharedTransitionApi::class)
+@Composable
+fun Modifier.morphDay(date: LocalDate): Modifier {
+    val morph = LocalViewMorph.current ?: return this
+    return with(morph.shared) {
+        this@morphDay.sharedBounds(
+            sharedContentState = rememberSharedContentState(ViewMorphKey.Day(date), morph.config),
+            animatedVisibilityScope = morph.visibility,
+            enter = fadeIn(morph.fadeSpec),
+            exit = fadeOut(morph.fadeSpec),
+            boundsTransform = morph.boundsTransform,
+            clipInOverlayDuringTransition = morph.clip,
+            zIndexInOverlay = 1f,
+        )
+    }
+}
+
+/** The view switch's travel, on the same spring as the timeline's columns resizing. */
+@OptIn(ExperimentalSharedTransitionApi::class)
+@Composable
+fun rememberViewMorphBoundsTransform(): BoundsTransform {
+    val spec = rememberViewSwitchSpec<Rect>()
+    return remember(spec) { BoundsTransform { _, _ -> spec } }
+}

app/src/main/java/de/jeanlucmakiola/calendula/ui/common/ViewSwitcherPill.kt

@@ -1,12 +1,17 @@
 package de.jeanlucmakiola.calendula.ui.common
 
+import androidx.compose.animation.AnimatedContent
+import androidx.compose.animation.SizeTransform
+import androidx.compose.animation.fadeIn
+import androidx.compose.animation.fadeOut
+import androidx.compose.animation.togetherWith
 import androidx.compose.foundation.layout.padding
 import androidx.compose.material3.FilledTonalButton
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
-import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.unit.Dp
 
 /**
@@ -30,11 +35,23 @@ fun ViewSwitcherPill(
     trailingInset: Dp = AppBarSpacing.ContainerTrailingInset,
 ) {
     if (cycle.size < QuickSwitchConfig.MIN_CYCLE) return
+    val fadeSpec = rememberCalendarFadeSpec()
     FilledTonalButton(
         onClick = onCycle,
         shape = MaterialTheme.shapes.large,
-        modifier = modifier.padding(end = trailingInset),
+        modifier = modifier
+            .padding(end = trailingInset),
     ) {
-        Text(stringResource(current.labelRes))
+        // The label cross-fades and the pill eases to its width, so cycling
+        // views turns it over rather than snapping it (#184).
+        AnimatedContent(
+            targetState = current.label(),
+            transitionSpec = {
+                (fadeIn(fadeSpec) togetherWith fadeOut(fadeSpec)).using(SizeTransform(clip = false))
+            },
+            contentAlignment = Alignment.Center,
+        ) { label ->
+            Text(label)
+        }
     }
 }

app/src/main/java/de/jeanlucmakiola/calendula/ui/day/DayPaging.kt

@@ -0,0 +1,22 @@
+package de.jeanlucmakiola.calendula.ui.day
+
+import kotlinx.datetime.DateTimeUnit
+import kotlinx.datetime.LocalDate
+import kotlinx.datetime.daysUntil
+import kotlinx.datetime.plus
+
+/** Pages the day pager spans — a little under four centuries, centred on [PAGE_EPOCH]. */
+internal const val DAY_PAGE_COUNT: Int = 140_000
+
+private const val EPOCH_PAGE = DAY_PAGE_COUNT / 2
+
+/** The day at [EPOCH_PAGE]; any date works, it only has to stay fixed. */
+private val PAGE_EPOCH = LocalDate(2000, 1, 1)
+
+/** The day shown on pager [page]. */
+internal fun dayForPage(page: Int): LocalDate =
+    PAGE_EPOCH.plus(page - EPOCH_PAGE, DateTimeUnit.DAY)
+
+/** The pager page showing [date]. */
+internal fun dayPageFor(date: LocalDate): Int =
+    (EPOCH_PAGE + PAGE_EPOCH.daysUntil(date)).coerceIn(0, DAY_PAGE_COUNT - 1)

app/src/main/java/de/jeanlucmakiola/calendula/ui/day/DayScreen.kt

@@ -1,903 +0,0 @@
-package de.jeanlucmakiola.calendula.ui.day
-
-import androidx.compose.animation.AnimatedContent
-import androidx.compose.animation.core.animateDpAsState
-import androidx.compose.foundation.background
-import androidx.compose.foundation.clickable
-import androidx.compose.foundation.gestures.detectTapGestures
-import androidx.compose.foundation.isSystemInDarkTheme
-import androidx.compose.foundation.layout.Box
-import androidx.compose.foundation.layout.BoxWithConstraints
-import androidx.compose.foundation.layout.Column
-import androidx.compose.foundation.layout.Row
-import androidx.compose.foundation.layout.Spacer
-import androidx.compose.foundation.layout.fillMaxHeight
-import androidx.compose.foundation.layout.fillMaxSize
-import androidx.compose.foundation.layout.fillMaxWidth
-import androidx.compose.foundation.layout.height
-import androidx.compose.foundation.layout.offset
-import androidx.compose.foundation.layout.padding
-import androidx.compose.foundation.layout.width
-import androidx.compose.foundation.ScrollState
-import androidx.compose.foundation.rememberScrollState
-import androidx.compose.foundation.shape.RoundedCornerShape
-import androidx.compose.foundation.verticalScroll
-import androidx.compose.material.icons.Icons
-import androidx.compose.material.icons.filled.Menu
-import androidx.compose.material.icons.filled.Search
-import androidx.compose.material3.Card
-import androidx.compose.material3.CardDefaults
-import androidx.compose.material3.DrawerValue
-import androidx.compose.material3.ExperimentalMaterial3Api
-import androidx.compose.material3.Icon
-import androidx.compose.material3.IconButton
-import androidx.compose.material3.MaterialTheme
-import androidx.compose.material3.ModalNavigationDrawer
-import androidx.compose.material3.Scaffold
-import androidx.compose.material3.Text
-import androidx.compose.material3.TopAppBar
-import androidx.compose.material3.TopAppBarDefaults
-import androidx.compose.material3.rememberDrawerState
-import androidx.compose.runtime.Composable
-import androidx.compose.runtime.CompositionLocalProvider
-import androidx.compose.runtime.LaunchedEffect
-import androidx.compose.runtime.getValue
-import androidx.compose.runtime.key
-import androidx.compose.runtime.mutableIntStateOf
-import androidx.compose.runtime.remember
-import androidx.compose.runtime.rememberCoroutineScope
-import androidx.compose.runtime.rememberUpdatedState
-import androidx.compose.runtime.snapshotFlow
-import androidx.compose.runtime.setValue
-import androidx.compose.ui.Alignment
-import androidx.compose.ui.Modifier
-import androidx.compose.ui.draw.clip
-import androidx.compose.ui.draw.clipToBounds
-import androidx.compose.ui.graphics.RectangleShape
-import androidx.compose.ui.draw.alpha
-import androidx.compose.ui.input.pointer.pointerInput
-import androidx.compose.ui.layout.onGloballyPositioned
-import androidx.compose.ui.platform.LocalDensity
-import androidx.compose.ui.platform.LocalLayoutDirection
-import androidx.compose.ui.res.stringResource
-import androidx.compose.ui.semantics.contentDescription
-import androidx.compose.ui.semantics.customActions
-import androidx.compose.ui.semantics.semantics
-import androidx.compose.ui.unit.Dp
-import androidx.compose.ui.unit.LayoutDirection
-import androidx.compose.ui.unit.dp
-import androidx.hilt.navigation.compose.hiltViewModel
-import androidx.lifecycle.compose.collectAsStateWithLifecycle
-import de.jeanlucmakiola.calendula.R
-import de.jeanlucmakiola.calendula.domain.EventInstance
-import de.jeanlucmakiola.calendula.ui.common.LocalChipGround
-import de.jeanlucmakiola.calendula.ui.common.eventPaint
-import de.jeanlucmakiola.calendula.ui.common.eventSurface
-import de.jeanlucmakiola.calendula.ui.common.formatCalendarTitle
-import de.jeanlucmakiola.calendula.ui.common.CalendarDrawer
-import de.jeanlucmakiola.calendula.ui.common.CalendarTitleButton
-import de.jeanlucmakiola.calendula.ui.common.CalendarFabColumn
-import de.jeanlucmakiola.calendula.ui.common.TodayAction
-import de.jeanlucmakiola.calendula.ui.common.CalendarFailure
-import de.jeanlucmakiola.calendula.ui.common.CalendarView
-import de.jeanlucmakiola.calendula.ui.common.IMPLEMENTED_VIEWS
-import de.jeanlucmakiola.calendula.ui.common.BLOCK_OUTER_INSET
-import de.jeanlucmakiola.calendula.ui.common.BLOCK_TEXT_PADDING
-import de.jeanlucmakiola.calendula.ui.common.BlockTimeLabel
-import de.jeanlucmakiola.calendula.ui.common.BlockTitle
-import de.jeanlucmakiola.calendula.ui.common.rememberBlockTextMetrics
-import de.jeanlucmakiola.calendula.ui.common.blockTimeLines
-import de.jeanlucmakiola.calendula.ui.common.animatedBlockPlacement
-import de.jeanlucmakiola.calendula.ui.common.ghostAlpha
-import de.jeanlucmakiola.calendula.ui.common.LocalEventMove
-import de.jeanlucmakiola.calendula.ui.common.MoveRequest
-import de.jeanlucmakiola.calendula.ui.common.MoveTarget
-import de.jeanlucmakiola.calendula.ui.common.NowLine
-import de.jeanlucmakiola.calendula.ui.common.TimelineDragController
-import de.jeanlucmakiola.calendula.ui.common.TimelineDragOverlay
-import de.jeanlucmakiola.calendula.ui.common.TimelineDrop
-import de.jeanlucmakiola.calendula.ui.common.clipOffsetMinutes
-import de.jeanlucmakiola.calendula.ui.common.continuesAfter
-import de.jeanlucmakiola.calendula.ui.common.continuesBefore
-import de.jeanlucmakiola.calendula.ui.common.ChipCuts
-import de.jeanlucmakiola.calendula.ui.common.timedBlockCuts
-import de.jeanlucmakiola.calendula.ui.common.timedBlockShape
-import de.jeanlucmakiola.calendula.ui.common.eventDragAllowed
-import de.jeanlucmakiola.calendula.ui.common.eventMoveAction
-import de.jeanlucmakiola.calendula.ui.common.eventTitleOverflow
-import de.jeanlucmakiola.calendula.ui.common.rememberEventDragSource
-import de.jeanlucmakiola.calendula.ui.common.rememberTimelineDragController
-import de.jeanlucmakiola.calendula.ui.common.startInstant
-import de.jeanlucmakiola.calendula.ui.common.ViewSwitcherPill
-import de.jeanlucmakiola.calendula.ui.common.calendarSlideTransition
-import de.jeanlucmakiola.calendula.ui.common.rememberCalendarFadeSpec
-import de.jeanlucmakiola.calendula.ui.common.rememberCalendarPageSwipe
-import de.jeanlucmakiola.floret.identity.rememberReduceMotion
-import de.jeanlucmakiola.calendula.ui.common.next
-import de.jeanlucmakiola.calendula.ui.common.EventChipShape
-import de.jeanlucmakiola.calendula.ui.common.trimmedLines
-import de.jeanlucmakiola.calendula.ui.common.rememberCalendarSlideSpec
-import de.jeanlucmakiola.floret.locale.currentLocale
-import de.jeanlucmakiola.calendula.ui.common.LocalUse24HourFormat
-import de.jeanlucmakiola.calendula.ui.common.LocalShowHourGrid
-import de.jeanlucmakiola.calendula.ui.common.LocalTimelineZoom
-import de.jeanlucmakiola.calendula.ui.common.MIN_EVENT_FRACTION
-import de.jeanlucmakiola.calendula.ui.common.hourHeight
-import de.jeanlucmakiola.calendula.ui.common.rememberTimelinePinchZoom
-import de.jeanlucmakiola.calendula.ui.common.formatMinuteOfDay
-import de.jeanlucmakiola.calendula.ui.common.GUTTER_WIDTH
-import de.jeanlucmakiola.calendula.ui.common.HourGutter
-import de.jeanlucmakiola.calendula.ui.common.TIMELINE_CONTENT_END_INSET
-import de.jeanlucmakiola.calendula.ui.common.hourCellBlockInset
-import de.jeanlucmakiola.calendula.ui.common.hourGridCells
-import de.jeanlucmakiola.calendula.ui.common.tappedMinuteOfDay
-import de.jeanlucmakiola.calendula.ui.week.TimedBlock
-import kotlinx.coroutines.flow.first
-import kotlinx.coroutines.launch
-import kotlinx.datetime.LocalDate
-import kotlinx.datetime.TimeZone
-import kotlinx.datetime.toLocalDateTime
-import kotlin.time.Clock
-import java.util.Locale
-import kotlin.math.roundToInt
-
-/** One lane of the all-day strip, sized to a trimmed bar line (#190). */
-private val ALL_DAY_ROW_HEIGHT = 20.dp
-private val ALL_DAY_VERTICAL_PADDING = 6.dp
-
-/** Total all-day strip height for the day (0 when there are no all-day events). */
-internal fun DayUiState.Success.allDayStripHeight(): Dp {
-    if (allDay.isEmpty()) return 0.dp
-    val lanes = allDay.maxOf { it.lane } + 1
-    return ALL_DAY_ROW_HEIGHT * lanes + ALL_DAY_VERTICAL_PADDING * 2
-}
-
-@OptIn(ExperimentalMaterial3Api::class)
-@Composable
-fun DayScreen(
-    selectedView: CalendarView,
-    onSelectView: (CalendarView) -> Unit,
-    onEventClick: (EventInstance) -> Unit,
-    onOpenSettings: () -> Unit,
-    onOpenSearch: () -> Unit,
-    onCreateEvent: (LocalDate, Int?) -> Unit,
-    quickSwitchViews: List<CalendarView> = IMPLEMENTED_VIEWS,
-    drawerViewOrder: List<CalendarView> = IMPLEMENTED_VIEWS,
-    todayInToolbar: Boolean = false,
-    modifier: Modifier = Modifier,
-    initialDateIso: String? = null,
-    viewModel: DayViewModel = hiltViewModel(),
-) {
-    val state by viewModel.state.collectAsStateWithLifecycle()
-    val date by viewModel.date.collectAsStateWithLifecycle()
-
-    // When opened from the month grid, anchor to the tapped date.
-    LaunchedEffect(initialDateIso) {
-        initialDateIso?.let { viewModel.goToDate(LocalDate.parse(it)) }
-    }
-
-    val drawerState = rememberDrawerState(DrawerValue.Closed)
-    val scope = rememberCoroutineScope()
-
-    val isOnToday = when (val s = state) {
-        is DayUiState.Success -> s.date == s.today
-        else -> true
-    }
-
-    // Drives whether the title carries the year. Falls back to the clock only
-    // while the first load is in flight, when there is no state to read today from.
-    val currentYear = when (val s = state) {
-        is DayUiState.Success -> s.today.year
-        else -> Clock.System.now().toLocalDateTime(TimeZone.currentSystemDefault()).date.year
-    }
-
-    // Slide direction for the day transition: +1 = next, -1 = prev, 0 = jump.
-    var slideDir by remember { mutableIntStateOf(0) }
-    val goNext = { slideDir = 1; viewModel.goToNext() }
-    val goPrev = { slideDir = -1; viewModel.goToPrev() }
-    // Slide toward today: viewing the future → today comes in from the left
-    // (back), viewing the past → from the right (forward).
-    val jumpToToday = {
-        slideDir = when (val s = state) {
-            is DayUiState.Success -> if (s.today < s.date) -1 else 1
-            else -> 0
-        }
-        viewModel.goToToday()
-    }
-    // Drawer jump-to-date: slide from the side the target lies on.
-    val jumpToDate: (LocalDate) -> Unit = { target ->
-        slideDir = if (target < date) -1 else 1
-        viewModel.goToDate(target)
-    }
-
-    ModalNavigationDrawer(
-        drawerState = drawerState,
-        // Open only via the menu button — edge-swipe would fight the day swipe.
-        gesturesEnabled = drawerState.isOpen,
-        drawerContent = {
-            CalendarDrawer(
-                currentView = selectedView,
-                currentDate = date,
-                drawerState = drawerState,
-                viewOrder = drawerViewOrder,
-                onSelectView = { view ->
-                    onSelectView(view)
-                    scope.launch { drawerState.close() }
-                },
-                onJumpToDate = { target ->
-                    jumpToDate(target)
-                    scope.launch { drawerState.close() }
-                },
-                onSettings = {
-                    onOpenSettings()
-                    scope.launch { drawerState.close() }
-                },
-            )
-        },
-    ) {
-        Scaffold(
-            modifier = modifier,
-            topBar = {
-                DayTopBar(
-                    date = date,
-                    currentYear = currentYear,
-                    selectedView = selectedView,
-                    onCycleView = { onSelectView(selectedView.next(quickSwitchViews)) },
-                    quickSwitchViews = quickSwitchViews,
-                    onOpenDrawer = { scope.launch { drawerState.open() } },
-                    onOpenSearch = onOpenSearch,
-                    onJumpToDate = jumpToDate,
-                    showTodayButton = todayInToolbar,
-                    onToday = jumpToToday,
-                )
-            },
-            floatingActionButton = {
-                CalendarFabColumn(
-                    todayVisible = !isOnToday && !todayInToolbar,
-                    todayText = stringResource(R.string.day_today_action),
-                    onToday = jumpToToday,
-                    onCreate = { onCreateEvent(date, null) },
-                )
-            },
-        ) { innerPadding ->
-            DayContent(
-                state = state,
-                slideDir = slideDir,
-                onSwipeNext = goNext,
-                onSwipePrev = goPrev,
-                onRetry = jumpToToday,
-                onEventClick = onEventClick,
-                onCreateAt = { d, minutes -> onCreateEvent(d, minutes) },
-                modifier = Modifier
-                    .padding(innerPadding)
-                    .fillMaxSize(),
-            )
-        }
-    }
-}
-
-@Composable
-private fun DayContent(
-    state: DayUiState,
-    slideDir: Int,
-    onSwipeNext: () -> Unit,
-    onSwipePrev: () -> Unit,
-    onRetry: () -> Unit,
-    onEventClick: (EventInstance) -> Unit,
-    onCreateAt: (LocalDate, Int) -> Unit,
-    modifier: Modifier = Modifier,
-) {
-    val slideSpec = rememberCalendarSlideSpec()
-    val fadeSpec = rememberCalendarFadeSpec()
-    val reduceMotion = rememberReduceMotion()
-
-    // Hoisted above the per-day AnimatedContent so the vertical scroll position
-    // survives day-to-day swipes. We only centre on noon once, on first entry
-    // into the day view (i.e. when arriving from the month/week view).
-    val scrollState = rememberScrollState()
-    LaunchedEffect(Unit) {
-        snapshotFlow { scrollState.maxValue }.first { it > 0 }
-        // Half the scroll range *is* noon: the content spans a full 24 hours, so
-        // centring the range centres midday at whatever hour height is in force.
-        scrollState.scrollTo(scrollState.maxValue / 2)
-    }
-
-    // Single, hoisted all-day strip height — shared by the outgoing and incoming
-    // day during a swipe, so the strip slides along but never jumps in height.
-    val targetAllDayHeight = (state as? DayUiState.Success)?.allDayStripHeight() ?: 0.dp
-    val allDayHeight by animateDpAsState(
-        targetValue = targetAllDayHeight,
-        label = "day-all-day-strip-height",
-    )
-
-    // Whole-page horizontal swipe, one level above the timeline's vertical
-    // scroll: a horizontal drag crosses this detector's slop, while a vertical
-    // drag is consumed by the inner scroll first — the two gestures coexist.
-    val swipeModifier = rememberCalendarPageSwipe(onSwipeNext, onSwipePrev)
-
-    // Above the AnimatedContent: a page change mid-drag would strand the
-    // floating block inside the outgoing page.
-    val dragController = rememberTimelineDragController()
-    val move = LocalEventMove.current
-    val zone = remember { TimeZone.currentSystemDefault() }
-
-    Box(modifier = modifier) {
-        AnimatedContent(
-            targetState = state,
-            modifier = Modifier.fillMaxSize().then(swipeModifier),
-            contentKey = { s ->
-                when (s) {
-                    is DayUiState.Success -> "success-${s.date}"
-                    is DayUiState.Failure -> "failure-${s.reason}"
-                    DayUiState.Loading -> "loading"
-                }
-            },
-            transitionSpec = { calendarSlideTransition(slideDir, slideSpec, fadeSpec, reduceMotion) },
-            label = "day-transition",
-        ) { s ->
-            when (s) {
-                DayUiState.Loading -> DayLoading()
-                is DayUiState.Failure -> CalendarFailure(reason = s.reason, onRetry = onRetry)
-                is DayUiState.Success -> DaySuccess(
-                    state = s,
-                    scrollState = scrollState,
-                    allDayHeight = allDayHeight,
-                    dragController = dragController,
-                    onEventClick = onEventClick,
-                    onCreateAt = onCreateAt,
-                    onDrop = { drop ->
-                        move?.move(
-                            MoveRequest(
-                                eventId = drop.event.eventId,
-                                beginMillis = drop.event.start.toEpochMilliseconds(),
-                                endMillis = drop.event.end.toEpochMilliseconds(),
-                                target = MoveTarget.Start(drop.startInstant(zone)),
-                            ),
-                        )
-                    },
-                )
-            }
-        }
-        TimelineDragOverlay(dragController)
-    }
-}
-
-@Composable
-internal fun DaySuccess(
-    state: DayUiState.Success,
-    scrollState: ScrollState,
-    allDayHeight: Dp,
-    dragController: TimelineDragController,
-    onEventClick: (EventInstance) -> Unit,
-    onCreateAt: (LocalDate, Int) -> Unit,
-    onDrop: (TimelineDrop) -> Unit,
-) {
-    Column(modifier = Modifier.fillMaxSize()) {
-        // All-day strip collapses to nothing when the day has no all-day events,
-        // so the timeline sits directly under the app bar.
-        // This strip is painted on `surface`, so an outlined chip has to fill
-        // with that and not with the column's container (#230).
-        CompositionLocalProvider(
-            LocalChipGround provides MaterialTheme.colorScheme.surface,
-        ) {
-            AllDayStrip(
-                state = state,
-                height = allDayHeight,
-                onEventClick = onEventClick,
-                modifier = Modifier
-                    .fillMaxWidth()
-                    .background(MaterialTheme.colorScheme.surface),
-            )
-        }
-        // Breathing room between the top section and the scrolling timeline
-        // below.
-        Spacer(Modifier.height(8.dp))
-        Timeline(
-            state = state,
-            scrollState = scrollState,
-            dragController = dragController,
-            onEventClick = onEventClick,
-            onCreateAt = onCreateAt,
-            onDrop = onDrop,
-        )
-    }
-}
-
-@OptIn(ExperimentalMaterial3Api::class)
-@Composable
-private fun DayTopBar(
-    date: LocalDate,
-    currentYear: Int,
-    selectedView: CalendarView,
-    onCycleView: () -> Unit,
-    quickSwitchViews: List<CalendarView>,
-    onOpenDrawer: () -> Unit,
-    onOpenSearch: () -> Unit,
-    onJumpToDate: (LocalDate) -> Unit,
-    showTodayButton: Boolean,
-    onToday: () -> Unit,
-) {
-    val locale = currentLocale()
-    val (title, shortTitle) = remember(date, locale, currentYear) {
-        formatDayTitle(date, locale, currentYear) to
-            formatDayTitle(date, locale, currentYear, abbreviated = true)
-    }
-    TopAppBar(
-        title = {
-            CalendarTitleButton(
-                title = title,
-                currentDate = date,
-                onJumpToDate = onJumpToDate,
-                shortTitle = shortTitle,
-            )
-        },
-        navigationIcon = {
-            IconButton(onClick = onOpenDrawer) {
-                Icon(
-                    imageVector = Icons.Default.Menu,
-                    contentDescription = stringResource(R.string.month_open_menu),
-                )
-            }
-        },
-        actions = {
-            TodayAction(show = showTodayButton, onToday = onToday)
-            IconButton(onClick = onOpenSearch) {
-                Icon(
-                    imageVector = Icons.Default.Search,
-                    contentDescription = stringResource(R.string.search_action),
-                )
-            }
-            ViewSwitcherPill(
-                current = selectedView,
-                cycle = quickSwitchViews,
-                onCycle = onCycleView,
-            )
-        },
-        // Deliberately flat: M3 lifts the bar to mark content scrolling under
-        // it, but here the bar meets the header on the same surface and the
-        // tint is what makes that seam look like a separate block (#186).
-        colors = TopAppBarDefaults.topAppBarColors(
-            containerColor = MaterialTheme.colorScheme.surface,
-            scrolledContainerColor = MaterialTheme.colorScheme.surface,
-        ),
-    )
-}
-
-@Composable
-private fun AllDayStrip(
-    state: DayUiState.Success,
-    height: Dp,
-    onEventClick: (EventInstance) -> Unit,
-    modifier: Modifier = Modifier,
-) {
-    val dark = isSystemInDarkTheme()
-
-    Row(
-        modifier = modifier
-            // Height is hoisted + animated so it resizes smoothly; padding sits
-            // inside it so the content area is lanes * row height.
-            .height(height)
-            .padding(
-                top = ALL_DAY_VERTICAL_PADDING,
-                bottom = ALL_DAY_VERTICAL_PADDING,
-                end = TIMELINE_CONTENT_END_INSET,
-            ),
-    ) {
-        // Keep the gutter-width offset so the bars line up with the day column.
-        Spacer(Modifier.width(GUTTER_WIDTH))
-        // Bars are positioned absolutely by lane (vertical stacking); each spans
-        // the full day-column width. clipToBounds keeps bars from spilling out
-        // while the height animates.
-        BoxWithConstraints(
-            modifier = Modifier
-                .weight(1f)
-                .fillMaxHeight()
-                .clipToBounds(),
-        ) {
-            val barWidth = maxWidth
-            state.allDay.forEach { span ->
-                AllDayBar(
-                    event = span.event,
-                    dark = dark,
-                    onClick = { onEventClick(span.event) },
-                    modifier = Modifier
-                        .offset(y = ALL_DAY_ROW_HEIGHT * span.lane)
-                        .width(barWidth)
-                        .height(ALL_DAY_ROW_HEIGHT)
-                        .padding(horizontal = 1.dp, vertical = 1.dp),
-                )
-            }
-        }
-    }
-}
-
-@Composable
-private fun AllDayBar(
-    event: EventInstance,
-    dark: Boolean,
-    onClick: () -> Unit,
-    modifier: Modifier = Modifier,
-) {
-    val title = event.title.ifBlank { stringResource(R.string.event_untitled) }
-    val paint = eventPaint(event, dark)
-    Box(
-        modifier = modifier
-            .eventSurface(paint, EventChipShape)
-            .clickable(onClick = onClick)
-            .padding(horizontal = 6.dp, vertical = 2.dp)
-            .semantics { contentDescription = title },
-        contentAlignment = Alignment.CenterStart,
-    ) {
-        val titleOverflow = eventTitleOverflow()
-        Text(
-            text = title,
-            style = MaterialTheme.typography.labelSmall.trimmedLines(),
-            maxLines = 1,
-            overflow = titleOverflow.overflow,
-            softWrap = titleOverflow.softWrap,
-            color = paint.titleInk,
-            fontWeight = paint.titleWeight,
-            textDecoration = paint.decoration,
-        )
-    }
-}
-
-@Composable
-private fun Timeline(
-    state: DayUiState.Success,
-    scrollState: ScrollState,
-    dragController: TimelineDragController,
-    onEventClick: (EventInstance) -> Unit,
-    onCreateAt: (LocalDate, Int) -> Unit,
-    onDrop: (TimelineDrop) -> Unit,
-) {
-    val dark = isSystemInDarkTheme()
-    val zoom = LocalTimelineZoom.current
-    val density = LocalDensity.current
-    val isRtl = LocalLayoutDirection.current == LayoutDirection.Rtl
-    // What the hour grid takes off a block's ends, for the floating copy to
-    // take off its own. Per-end, a cut edge keeps it — that much the drag
-    // geometry decides itself, from the slice it is drawing.
-    val blockInsetPx = with(density) {
-        hourCellBlockInset(LocalShowHourGrid.current, cut = false).toPx()
-    }
-
-    // BoxWithConstraints rather than Box: the fit-the-whole-day scale needs the
-    // timeline's own viewport height, which is only known here — below the top
-    // bar, date header and all-day strip.
-    BoxWithConstraints(modifier = Modifier.fillMaxSize()) {
-        val hourHeight = zoom.scale.hourHeight(maxHeight)
-        val totalHeight = hourHeight * 24
-        // The pinch sits on the Row, above both scroll viewports: it has to
-        // outrank the vertical scroll, and it does that by watching the initial
-        // pass, which only reaches it if it is their ancestor.
-        val pinch = rememberTimelinePinchZoom(scrollState, maxHeight, hourHeight, zoom)
-        // Gutter and day column are two scroll viewports that SHARE one scroll
-        // state, so they stay perfectly aligned. The day-column viewport is a
-        // static, rounded-clipped window — the content scrolls inside it, so the
-        // soft corners are permanent at any scroll position.
-        Row(modifier = Modifier.fillMaxSize().then(pinch)) {
-            // Hour gutter (scrolls in sync with the day column). Start inset so the
-            // labels centre on the top bar hamburger, matching the week view.
-            HourGutter(
-                scrollState = scrollState,
-                hourHeight = hourHeight,
-                dragController = dragController,
-            )
-            // Day column: rounded, clipped scroll viewport (permanent corners).
-            Box(
-                modifier = Modifier
-                    .weight(1f)
-                    .fillMaxHeight()
-                    .padding(end = TIMELINE_CONTENT_END_INSET)
-                    .clip(RoundedCornerShape(16.dp))
-                    .verticalScroll(scrollState)
-                    .onGloballyPositioned { dragController.geometry.viewport = it },
-            ) {
-                DayColumnCard(
-                    blocks = state.timed,
-                    dark = dark,
-                    date = state.date,
-                    today = state.today,
-                    hourHeight = hourHeight,
-                    dragController = dragController,
-                    onEventClick = onEventClick,
-                    onCreateAt = onCreateAt,
-                    onDrop = onDrop,
-                    modifier = Modifier
-                        .fillMaxWidth()
-                        .height(totalHeight)
-                        // The scrolling content itself, so its root position
-                        // already folds in the scroll offset.
-                        .onGloballyPositioned { coords ->
-                            dragController.geometry.let {
-                                it.grid = coords
-                                it.scroll = scrollState
-                                it.hourPx = with(density) { hourHeight.toPx() }
-                                it.blockInsetPx = blockInsetPx
-                                it.columnGapPx = 0f
-                                it.columnWidthPx = coords.size.width.toFloat()
-                                it.days = listOf(state.date)
-                                it.isRtl = isRtl
-                            }
-                        },
-                )
-            }
-        }
-    }
-}
-
-@Composable
-private fun DayColumnCard(
-    blocks: List<TimedBlock>,
-    dark: Boolean,
-    date: LocalDate,
-    today: LocalDate,
-    hourHeight: Dp,
-    dragController: TimelineDragController,
-    onEventClick: (EventInstance) -> Unit,
-    onCreateAt: (LocalDate, Int) -> Unit,
-    onDrop: (TimelineDrop) -> Unit,
-    modifier: Modifier = Modifier,
-) {
-    val hourPx = with(LocalDensity.current) { hourHeight.toPx() }
-    val showHourGrid = LocalShowHourGrid.current
-    val zone = remember { TimeZone.currentSystemDefault() }
-    // Tells a settled drop when this column has caught up with it.
-    LaunchedEffect(blocks, dragController.settling) {
-        dragController.noteGrid(date, blocks)
-    }
-    // The tap detector outlives the composition that installed it — a pinch or a
-    // Settings change moves the hour height without restarting it — so it reads
-    // the height and the callback through state handles instead of capturing
-    // them, or taps land on the scale the column had before the zoom (#148).
-    val currentHourPx = rememberUpdatedState(hourPx)
-    val currentOnCreateAt = rememberUpdatedState(onCreateAt)
-    Card(
-        // Plain rectangular column — the soft corners come from the outer
-        // rounded scroll viewport, so inner rounding would look odd at the edges.
-        shape = RectangleShape,
-        colors = CardDefaults.cardColors(
-            // With the grid on, the container colour moves onto the hour cells
-            // and the column behind them recedes to surface, so an hour boundary
-            // reads as negative space between two surfaces.
-            containerColor = if (showHourGrid) {
-                MaterialTheme.colorScheme.surface
-            } else {
-                MaterialTheme.colorScheme.surfaceContainer
-            },
-        ),
-        modifier = modifier,
-    ) {
-        BoxWithConstraints(
-            modifier = Modifier
-                .fillMaxSize()
-                // The hour cells sit over the column background but under the
-                // event blocks (drawBehind paints before the children).
-                .hourGridCells(showHourGrid, hourPx, MaterialTheme.colorScheme.surfaceContainer)
-                // Tap an empty slot to create an event there. Taps on event
-                // blocks are consumed by their own click handler first, so this
-                // only fires on the column background. Snaps to the tapped hour.
-                .pointerInput(date) {
-                    detectTapGestures { offset ->
-                        currentOnCreateAt.value(
-                            date,
-                            tappedMinuteOfDay(offset.y, currentHourPx.value),
-                        )
-                    }
-                },
-        ) {
-            val colWidth = maxWidth
-            val minEventHeight = hourHeight * MIN_EVENT_FRACTION
-            // Keyed by event, so a block that changes time or lane is the *same*
-            // composable afterwards and tweens there. The ordinal disambiguates
-            // a column holding two occurrences of one series.
-            val ordinals = mutableMapOf<Long, Int>()
-            blocks.forEach { block ->
-                val ordinal = ordinals.merge(block.event.eventId, 1, Int::plus)!! - 1
-                key(block.event.eventId, ordinal) {
-                    val laneWidth = colWidth / block.laneCount
-                    val top = hourHeight * (block.startMin / 60f)
-                    val rawHeight = hourHeight * ((block.endMin - block.startMin) / 60f)
-                    val height = if (rawHeight < minEventHeight) minEventHeight else rawHeight
-                    val place = animatedBlockPlacement(
-                        x = laneWidth * block.lane,
-                        y = top,
-                        width = laneWidth,
-                        height = height,
-                    )
-                    // Where this block is cut at midnight, which decides both
-                    // its shape and the half-gap it gives up to the hour cells.
-                    val cuts = remember(block, date, zone) {
-                        timedBlockCuts(
-                            block.continuesBefore(date, zone),
-                            block.continuesAfter(date, zone),
-                        )
-                    }
-                    val topInset = hourCellBlockInset(showHourGrid, cuts.top)
-                    val bottomInset = hourCellBlockInset(showHourGrid, cuts.bottom)
-                    val blockHeight = (place.height - topInset - bottomInset)
-                        .coerceAtLeast(0.dp)
-                    EventBlock(
-                        block = block,
-                        dark = dark,
-                        height = blockHeight,
-                        width = place.width,
-                        date = date,
-                        cuts = cuts,
-                        topInset = topInset,
-                        dragController = dragController,
-                        onClick = { onEventClick(block.event) },
-                        onDrop = onDrop,
-                        modifier = Modifier
-                            .offset(x = place.x, y = place.y + topInset)
-                            .width(place.width)
-                            .height(blockHeight)
-                            .padding(horizontal = BLOCK_OUTER_INSET),
-                    )
-                }
-            }
-            // Current-time line, on top of the events, only on today's column.
-            if (date == today) {
-                NowLine(date = date, hourHeight = hourHeight)
-            }
-        }
-    }
-}
-
-@Composable
-private fun EventBlock(
-    block: TimedBlock,
-    dark: Boolean,
-    height: Dp,
-    width: Dp,
-    date: LocalDate,
-    cuts: ChipCuts,
-    topInset: Dp,
-    dragController: TimelineDragController,
-    onClick: () -> Unit,
-    onDrop: (TimelineDrop) -> Unit,
-    modifier: Modifier = Modifier,
-) {
-    val title = block.event.title.ifBlank { stringResource(R.string.event_untitled) }
-    val use24Hour = LocalUse24HourFormat.current
-    val locale = currentLocale()
-    val timeLabel = "${minToHm(block.startMin, use24Hour, locale)}–" +
-        minToHm(block.endMin, use24Hour, locale)
-    val density = LocalDensity.current
-    val metrics = rememberBlockTextMetrics(height)
-    // A block that cannot afford both lines spends its space on the title, and
-    // one too short even for that drops the title rather than serving a sliced one.
-    // Height alone decides: a duration threshold would keep hiding the time on a
-    // half-hour block the user has pinched open to three times the room it needs.
-    val showTime = metrics.available >= metrics.titleLine + metrics.timeLine
-    val showTitle = metrics.fitsTitle
-    val textWidth = width - (BLOCK_OUTER_INSET + BLOCK_TEXT_PADDING) * 2
-    // Only lines the block can actually draw: a block too short for the time is
-    // too short for a second title line too, and asking for one served a sliced
-    // one — as well as handing the drag copy a count it couldn't honour, so the
-    // title re-wrapped the moment the block was lifted (#267).
-    val titleBudget = metrics.titleBudget(metrics.available).coerceAtLeast(1)
-    val titleMaxLines = if (showTime) 1 else titleBudget.coerceAtMost(2)
-    // On a day column — wide enough for "09:30–11:00" several times over — the
-    // range never needs the second line, until lanes cut the column down.
-    val spare = metrics.available - metrics.titleHeight(titleMaxLines) -
-        if (showTime) metrics.timeLine else 0.dp
-    val timeMaxLines = if (showTime) blockTimeLines(timeLabel, textWidth, spare) else 1
-    val paint = eventPaint(block.event, dark)
-    val zone = remember { TimeZone.currentSystemDefault() }
-    val moveAction = eventMoveAction(block.event)
-    val draggable = eventDragAllowed(block.event)
-    // The drop takes this offset back off, so a tail clipped at midnight lands
-    // where the event's own start belongs (#253).
-    val clipOffset = remember(block, date, zone) { block.clipOffsetMinutes(date, zone) }
-    val shape = remember(cuts) { timedBlockShape(cuts.top, cuts.bottom) }
-    val topInsetPx = with(density) { topInset.toPx() }
-    val dragModifier = rememberEventDragSource(
-        enabled = draggable,
-        key = block.event.instanceId,
-        onPickUp = { pointer, blockRoot, _ ->
-            dragController.begin(
-                block = block,
-                clipOffsetMin = clipOffset,
-                titleLines = if (showTitle) titleMaxLines else 0,
-                pointerInRoot = pointer,
-                // Measured off the block's placement rather than off where the
-                // hour grid seats it: the copy is drawn from that placement and
-                // re-seated the same half-gap down (#267).
-                blockInRoot = blockRoot.copy(y = blockRoot.y - topInsetPx),
-            )
-        },
-        onMove = dragController::move,
-        onDrop = { dragController.finish()?.let(onDrop) },
-        onCancel = dragController::cancel,
-    )
-    val lifted = draggable && dragController.ghosts(block)
-    val ghost = ghostAlpha(lifted)
-    Box(
-        modifier = modifier
-            // The source stays put as a ghost while its floating copy travels.
-            .then(if (ghost < 1f) Modifier.alpha(ghost) else Modifier)
-            .eventSurface(paint, shape, cuts)
-            .clickable(onClick = onClick)
-            // After clickable, so it is the inner node and wins the main pass;
-            // the tap still works, since a drag consumes the up.
-            .then(dragModifier)
-            .padding(horizontal = BLOCK_TEXT_PADDING, vertical = metrics.inset)
-            .semantics {
-                contentDescription = "$title, $timeLabel"
-                if (moveAction != null) customActions = listOf(moveAction)
-            },
-    ) {
-        Column {
-            if (showTitle) {
-                BlockTitle(
-                    title = title,
-                    maxLines = titleMaxLines,
-                    color = paint.titleInk,
-                    textDecoration = paint.decoration,
-                    fontWeight = paint.titleWeight,
-                )
-            }
-            if (showTime) {
-                BlockTimeLabel(
-                    label = timeLabel,
-                    color = paint.secondaryInk,
-                    maxLines = timeMaxLines,
-                )
-            }
-        }
-    }
-}
-
-@Composable
-private fun DayLoading() {
-    val scale = LocalTimelineZoom.current.scale
-    val scrollState = rememberScrollState()
-    BoxWithConstraints(modifier = Modifier.fillMaxSize()) {
-        // Same scale resolution as the loaded timeline, so the skeleton's column
-        // doesn't resize the moment the real day arrives.
-        val hourHeight = scale.hourHeight(maxHeight)
-        val totalHeight = hourHeight * 24
-        // The skeleton wears the loaded column's own ground, so the arrival of
-        // the real day doesn't flash a solid block into a gapped grid.
-        val showHourGrid = LocalShowHourGrid.current
-        val hourPx = with(LocalDensity.current) { hourHeight.toPx() }
-        Row(
-            modifier = Modifier
-                .fillMaxSize()
-                .padding(end = TIMELINE_CONTENT_END_INSET)
-                .verticalScroll(scrollState),
-        ) {
-            Spacer(Modifier.width(GUTTER_WIDTH))
-            Box(
-                modifier = Modifier
-                    .weight(1f)
-                    .height(totalHeight)
-                    .padding(horizontal = 2.dp)
-                    .background(
-                        if (showHourGrid) MaterialTheme.colorScheme.surface
-                        else MaterialTheme.colorScheme.surfaceContainer,
-                    )
-                    .hourGridCells(showHourGrid, hourPx, MaterialTheme.colorScheme.surfaceContainer),
-            )
-        }
-    }
-}
-
-private fun minToHm(min: Int, is24Hour: Boolean, locale: Locale): String =
-    formatMinuteOfDay(min, is24Hour, locale)
-
-/** [abbreviated] drops the weekday, leaving the date itself (#165). */
-private fun formatDayTitle(
-    date: LocalDate,
-    locale: Locale,
-    currentYear: Int,
-    abbreviated: Boolean = false,
-): String =
-    formatCalendarTitle(
-        date = java.time.LocalDate.of(date.year, date.month.ordinal + 1, date.day),
-        locale = locale,
-        currentYear = currentYear,
-        skeleton = if (abbreviated) "dMMM" else "EEEdMMM",
-    )

app/src/main/java/de/jeanlucmakiola/calendula/ui/day/DayUiState.kt

@@ -1,25 +0,0 @@
-package de.jeanlucmakiola.calendula.ui.day
-
-import de.jeanlucmakiola.calendula.domain.FailureReason
-import de.jeanlucmakiola.calendula.ui.week.AllDaySpan
-import de.jeanlucmakiola.calendula.ui.week.TimedBlock
-import kotlinx.datetime.LocalDate
-
-/**
- * The day view is a single-column slice of the week view (spec S3). It reuses the
- * week's [TimedBlock] and [AllDaySpan] layout primitives — for one day, all-day
- * spans collapse to a single column ([AllDaySpan.startCol] == [AllDaySpan.endCol]
- * == 0) and only their [AllDaySpan.lane] (vertical stacking) matters.
- */
-sealed interface DayUiState {
-    data object Loading : DayUiState
-    data class Failure(val reason: FailureReason) : DayUiState
-    data class Success(
-        val date: LocalDate,
-        val today: LocalDate,
-        /** All-day/multi-day events covering this day, stacked by lane. */
-        val allDay: List<AllDaySpan>,
-        /** Timed events clipped to this day with overlap lanes resolved. */
-        val timed: List<TimedBlock>,
-    ) : DayUiState
-}

app/src/main/java/de/jeanlucmakiola/calendula/ui/day/DayViewModel.kt

@@ -1,110 +0,0 @@
-package de.jeanlucmakiola.calendula.ui.day
-
-import androidx.lifecycle.ViewModel
-import androidx.lifecycle.viewModelScope
-import dagger.hilt.android.lifecycle.HiltViewModel
-import de.jeanlucmakiola.calendula.data.calendar.CalendarRepository
-import de.jeanlucmakiola.calendula.data.di.IoDispatcher
-import de.jeanlucmakiola.calendula.domain.CalendarSource
-import de.jeanlucmakiola.calendula.domain.EventInstance
-import de.jeanlucmakiola.calendula.domain.FailureReason
-import de.jeanlucmakiola.calendula.domain.calendarListFailure
-import de.jeanlucmakiola.calendula.ui.week.layoutAllDay
-import de.jeanlucmakiola.calendula.ui.week.layoutDay
-import kotlinx.coroutines.CoroutineDispatcher
-import kotlinx.coroutines.ExperimentalCoroutinesApi
-import kotlinx.coroutines.flow.MutableStateFlow
-import kotlinx.coroutines.flow.SharingStarted
-import kotlinx.coroutines.flow.StateFlow
-import kotlinx.coroutines.flow.catch
-import kotlinx.coroutines.flow.combine
-import kotlinx.coroutines.flow.flatMapLatest
-import kotlinx.coroutines.flow.flowOn
-import kotlinx.coroutines.flow.stateIn
-import kotlinx.datetime.DateTimeUnit
-import kotlinx.datetime.LocalDate
-import kotlinx.datetime.TimeZone
-import kotlinx.datetime.atStartOfDayIn
-import kotlinx.datetime.atTime
-import kotlinx.datetime.minus
-import kotlinx.datetime.plus
-import kotlinx.datetime.toInstant
-import kotlinx.datetime.toLocalDateTime
-import kotlin.time.Clock
-import kotlin.time.Instant
-import javax.inject.Inject
-
-@OptIn(ExperimentalCoroutinesApi::class)
-@HiltViewModel
-class DayViewModel @Inject constructor(
-    private val repository: CalendarRepository,
-    @IoDispatcher private val io: CoroutineDispatcher,
-) : ViewModel() {
-
-    private val zone = TimeZone.currentSystemDefault()
-
-    private val todayDate: LocalDate
-        get() = Clock.System.now().toLocalDateTime(zone).date
-
-    private val _date = MutableStateFlow(todayDate)
-    val date: StateFlow<LocalDate> = _date
-
-    val state: StateFlow<DayUiState> = _date
-        .flatMapLatest { day ->
-            val range = dayRange(day, zone)
-            combine(
-                repository.calendars(),
-                repository.instances(range),
-            ) { calendars, instances ->
-                buildState(day, calendars, instances)
-            }
-        }
-        .catch { emit(DayUiState.Failure(FailureReason.ProviderUnavailable)) }
-        .flowOn(io)
-        .stateIn(
-            scope = viewModelScope,
-            started = SharingStarted.WhileSubscribed(5_000L),
-            initialValue = DayUiState.Loading,
-        )
-
-    fun goToPrev() {
-        _date.value = _date.value.minus(1, DateTimeUnit.DAY)
-    }
-
-    fun goToNext() {
-        _date.value = _date.value.plus(1, DateTimeUnit.DAY)
-    }
-
-    fun goToToday() {
-        _date.value = todayDate
-    }
-
-    /** Jump to a specific date (e.g. when opened from the month grid). */
-    fun goToDate(date: LocalDate) {
-        _date.value = date
-    }
-
-    private fun buildState(
-        day: LocalDate,
-        calendars: List<CalendarSource>,
-        instances: List<EventInstance>,
-    ): DayUiState {
-        calendarListFailure(calendars)?.let { return DayUiState.Failure(it) }
-        val days = listOf(day)
-        val allDay = instances.filter { it.isAllDay }
-        val timed = instances.filterNot { it.isAllDay }
-        return DayUiState.Success(
-            date = day,
-            today = todayDate,
-            allDay = layoutAllDay(allDay, days, zone),
-            timed = layoutDay(timed, day, zone),
-        )
-    }
-}
-
-/** Half-open instant range covering the single calendar [date]. */
-internal fun dayRange(date: LocalDate, zone: TimeZone): ClosedRange<Instant> {
-    val from = date.atStartOfDayIn(zone)
-    val to = date.atTime(23, 59, 59).toInstant(zone)
-    return from..to
-}

app/src/main/java/de/jeanlucmakiola/calendula/ui/day/DayViewPreview.kt

@@ -1,63 +0,0 @@
-package de.jeanlucmakiola.calendula.ui.day
-
-import androidx.compose.foundation.rememberScrollState
-import androidx.compose.runtime.Composable
-import androidx.compose.runtime.LaunchedEffect
-import androidx.compose.runtime.remember
-import androidx.compose.runtime.snapshotFlow
-import androidx.compose.ui.Modifier
-import androidx.compose.ui.unit.Dp
-import de.jeanlucmakiola.calendula.ui.common.ScaledViewPreview
-import de.jeanlucmakiola.calendula.ui.common.rememberTimelineDragController
-import de.jeanlucmakiola.calendula.ui.common.sampleTimelineEvents
-import de.jeanlucmakiola.calendula.ui.week.layoutAllDay
-import de.jeanlucmakiola.calendula.ui.week.layoutDay
-import kotlinx.coroutines.flow.first
-import kotlinx.datetime.LocalDate
-import kotlinx.datetime.TimeZone
-import kotlinx.datetime.toLocalDateTime
-import kotlin.time.Clock
-
-/**
- * A live, scaled-down Day view for the onboarding view chooser. Today's date is
- * real; only the events are stand-ins.
- */
-@Composable
-internal fun DayViewPreview(
-    height: Dp,
-    modifier: Modifier = Modifier,
-) {
-    val zone = remember { TimeZone.currentSystemDefault() }
-    val today = remember(zone) { Clock.System.now().toLocalDateTime(zone).date }
-    val state = remember(today, zone) { sampleDayState(today, zone) }
-    val scrollState = rememberScrollState()
-    LaunchedEffect(Unit) {
-        snapshotFlow { scrollState.maxValue }.first { it > 0 }
-        // Half the scroll range is noon — the same centring the live view does.
-        scrollState.scrollTo(scrollState.maxValue / 2)
-    }
-
-    ScaledViewPreview(height = height, modifier = modifier) {
-        DaySuccess(
-            state = state,
-            scrollState = scrollState,
-            allDayHeight = state.allDayStripHeight(),
-            dragController = rememberTimelineDragController(),
-            onEventClick = {},
-            onCreateAt = { _, _ -> },
-            onDrop = {},
-        )
-    }
-}
-
-/** Sample day state, laid out through the same helpers the live view uses. */
-private fun sampleDayState(today: LocalDate, zone: TimeZone): DayUiState.Success {
-    val days = listOf(today)
-    val events = sampleTimelineEvents(days, today, zone)
-    return DayUiState.Success(
-        date = today,
-        today = today,
-        allDay = layoutAllDay(events.filter { it.isAllDay }, days, zone),
-        timed = layoutDay(events, today, zone),
-    )
-}

app/src/main/java/de/jeanlucmakiola/calendula/ui/detail/EventDetailScreen.kt

@@ -140,6 +140,7 @@ fun EventDetailScreen(
     onBack: () -> Unit,
     onEdit: () -> Unit,
     onDuplicate: (EventForm) -> Unit,
+    visible: Boolean = true,
     viewModel: EventDetailViewModel = hiltViewModel(),
 ) {
     LaunchedEffect(eventId, beginMillis, endMillis) {
@@ -227,7 +228,7 @@ fun EventDetailScreen(
     }
 
     Scaffold(
-        modifier = Modifier.predictiveBack(onBack = onBack),
+        modifier = Modifier.predictiveBack(onBack = onBack, visible = visible),
         snackbarHost = { SnackbarHost(snackbarHostState) },
         topBar = {
             TopAppBar(

app/src/main/java/de/jeanlucmakiola/calendula/ui/edit/EventEditScreen.kt

@@ -99,6 +99,7 @@ import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.text.AnnotatedString
 import androidx.compose.ui.text.TextStyle
 import androidx.compose.ui.text.font.FontWeight
+import androidx.compose.ui.text.style.TextAlign
 import androidx.compose.ui.text.style.TextOverflow
 import androidx.compose.ui.text.input.ImeAction
 import androidx.compose.ui.text.input.KeyboardCapitalization
@@ -203,6 +204,7 @@ fun EventEditScreen(
     initialForm: EventForm? = null,
     initialFormSource: ImportSource = ImportSource.File,
     onManageCalendars: (() -> Unit)? = null,
+    visible: Boolean = true,
     viewModel: EventEditViewModel = hiltViewModel(),
 ) {
     LaunchedEffect(initialDateIso, editKey, initialForm) {
@@ -285,7 +287,7 @@ fun EventEditScreen(
     }
 
     Scaffold(
-        modifier = Modifier.predictiveBack(onBack = close),
+        modifier = Modifier.predictiveBack(onBack = close, visible = visible),
         snackbarHost = { SnackbarHost(snackbarHostState) },
         topBar = {
             TopAppBar(
@@ -608,6 +610,11 @@ private fun EventEditContent(
                 .padding(vertical = 4.dp)
                 .focusRequester(titleFocusRequester),
         )
+        FieldLengthCounter(
+            length = form.title.length,
+            max = MAX_SINGLE_LINE_FIELD,
+            modifier = Modifier.fillMaxWidth(),
+        )
         Spacer(Modifier.height(10.dp))
         Box(
             modifier = Modifier
@@ -797,25 +804,31 @@ private fun EventEditContent(
                 iconAtTop = true,
             ) {
                 Row(verticalAlignment = Alignment.Top) {
-                    InlineField(
-                        value = form.location,
-                        onValueChange = viewModel::setLocation,
-                        placeholder = stringResource(R.string.event_detail_location),
-                        // A location is as often a meeting URL as an address,
-                        // and "Zoom.us/j/123" reads wrong (#146).
-                        capitalization = KeyboardCapitalization.None,
-                        // Multi-line so a long address or meeting URL wraps and
-                        // the card grows instead of scrolling off one line
-                        // (#273). The field holds no newlines of its own, so
-                        // the IME's action key closes the keyboard rather than
-                        // inserting a break setLocation would only fold away.
-                        singleLine = false,
-                        imeAction = ImeAction.Done,
-                        modifier = Modifier
-                            .weight(1f)
-                            .animateContentSizeMotion()
-                            .padding(vertical = 4.dp),
-                    )
+                    Column(modifier = Modifier.weight(1f)) {
+                        InlineField(
+                            value = form.location,
+                            onValueChange = viewModel::setLocation,
+                            placeholder = stringResource(R.string.event_detail_location),
+                            // A location is as often a meeting URL as an address,
+                            // and "Zoom.us/j/123" reads wrong (#146).
+                            capitalization = KeyboardCapitalization.None,
+                            // Multi-line so a long address or meeting URL wraps and
+                            // the card grows instead of scrolling off one line
+                            // (#273). The field holds no newlines of its own, so
+                            // the IME's action key closes the keyboard rather than
+                            // inserting a break setLocation would only fold away.
+                            singleLine = false,
+                            imeAction = ImeAction.Done,
+                            modifier = Modifier
+                                .fillMaxWidth()
+                                .animateContentSizeMotion()
+                                .padding(vertical = 4.dp),
+                        )
+                        FieldLengthCounter(
+                            length = form.location.length,
+                            max = MAX_SINGLE_LINE_FIELD,
+                        )
+                    }
                     // The box is exactly one text line tall, so the button
                     // centres on the first line without making a single-line
                     // card taller than its text; requiredSize keeps the
@@ -2290,6 +2303,28 @@ private fun InlineField(
     )
 }
 
+/**
+ * A right-aligned "n/max" counter for a capped [InlineField] (#331), hidden
+ * until [length] gets close enough to [max] to matter — nobody needs to see
+ * "12/255" while typing a short title.
+ */
+@Composable
+private fun FieldLengthCounter(length: Int, max: Int, modifier: Modifier = Modifier) {
+    AnimatedVisibility(visible = length >= max - 55, modifier = modifier) {
+        Text(
+            text = "$length/$max",
+            style = MaterialTheme.typography.bodySmall,
+            color = if (length >= max) {
+                MaterialTheme.colorScheme.error
+            } else {
+                MaterialTheme.colorScheme.onSurfaceVariant
+            },
+            textAlign = TextAlign.End,
+            modifier = Modifier.fillMaxWidth(),
+        )
+    }
+}
+
 /**
  * Height of one [InlineField] line: the resolved [TextStyle.lineHeight] plus the
  * field's 4dp vertical padding. In dp, so it tracks the user's font scale

app/src/main/java/de/jeanlucmakiola/calendula/ui/edit/EventEditViewModel.kt

@@ -62,6 +62,26 @@ private const val TAG = "EventEdit"
 /** Any line break, with the whitespace around it, as one match. */
 private val LINE_BREAK = Regex("""[ \t]*\R[ \t]*""")
 
+/**
+ * Title and location are single-line provider columns that several CalDAV
+ * servers (Open-Xchange among them, #331) store as `VARCHAR(255)` and
+ * silently truncate past that on sync, with no error surfaced back to the
+ * app. 255 is the common floor, so it's what Calendula enforces up front.
+ */
+internal const val MAX_SINGLE_LINE_FIELD = 255
+
+/**
+ * Caps [new] at [max] chars, but only while growing past it — an [old] value
+ * that already exceeds [max] (imported, or synced in from elsewhere) may
+ * still shrink freely, it just can't grow any further. Never splits a
+ * surrogate pair at the cut point.
+ */
+internal fun capLength(new: String, old: String, max: Int = MAX_SINGLE_LINE_FIELD): String = when {
+    new.length <= max || new.length <= old.length -> new
+    old.length >= max -> old
+    else -> new.take(max).let { if (it.isNotEmpty() && it.last().isHighSurrogate()) it.dropLast(1) else it }
+}
+
 /**
  * Where a prefilled [EventEditViewModel.openImported] form came from. The sources
  * want different reminder handling (#49), and differ in whether they own the
@@ -533,13 +553,17 @@ class EventEditViewModel @Inject constructor(
     // The title field wraps (multi-line) so long titles stay visible (#33), but
     // a title is one logical line: drop any newline the IME's Enter key or a
     // paste would introduce, so it never reaches the provider's TITLE column.
-    fun setTitle(value: String) =
-        update { it.copy(title = value.replace("\n", "").replace("\r", "")) }
+    fun setTitle(value: String) = update {
+        val cleaned = value.replace("\n", "").replace("\r", "")
+        it.copy(title = capLength(cleaned, it.title))
+    }
     // The location wraps too (#273) but is likewise one logical line. A pasted
     // multi-line address joins the way the contact picker's does (#146), so it
     // never runs together into "12 Main St10115 Berlin".
-    fun setLocation(value: String) =
-        update { it.copy(location = value.replace(LINE_BREAK, ", ")) }
+    fun setLocation(value: String) = update {
+        val cleaned = value.replace(LINE_BREAK, ", ")
+        it.copy(location = capLength(cleaned, it.location))
+    }
     fun setDescription(value: String) = update { it.copy(description = value) }
     fun setAllDay(value: Boolean) {
         // Going all-day drops any pinned zone: the times become bare dates that

app/src/main/java/de/jeanlucmakiola/calendula/ui/imports/ImportScreen.kt

@@ -78,6 +78,7 @@ fun ImportScreen(
     onOpenSingle: (EventForm) -> Unit,
     forceMany: Boolean = false,
     onManageCalendars: (() -> Unit)? = null,
+    visible: Boolean = true,
     viewModel: ImportViewModel = hiltViewModel(),
 ) {
     // hiltViewModel() resolves to the Activity's store and is retained across
@@ -103,7 +104,7 @@ fun ImportScreen(
 
     Scaffold(
         modifier = Modifier
-            .predictiveBack(onBack = onClose)
+            .predictiveBack(onBack = onClose, visible = visible)
             .fillMaxSize(),
         topBar = {
             TopAppBar(

app/src/main/java/de/jeanlucmakiola/calendula/ui/licences/LicencesScreen.kt

@@ -23,13 +23,14 @@ import de.jeanlucmakiola.floret.components.positionOf
  * what the *recipient of the binary* is told. Each row opens the project's source.
  */
 @Composable
-internal fun LicencesScreen(onBack: () -> Unit) {
+internal fun LicencesScreen(onBack: () -> Unit, visible: Boolean = true) {
     val uriHandler = LocalUriHandler.current
 
     CollapsingScaffold(
         title = stringResource(R.string.licences_title),
         onBack = onBack,
         predictiveBack = true,
+        visible = visible,
     ) {
         Text(
             stringResource(R.string.licences_intro),

app/src/main/java/de/jeanlucmakiola/calendula/ui/month/MonthViewModel.kt

@@ -11,7 +11,9 @@ import de.jeanlucmakiola.calendula.domain.CalendarSource
 import de.jeanlucmakiola.calendula.domain.EventInstance
 import de.jeanlucmakiola.calendula.domain.FailureReason
 import de.jeanlucmakiola.calendula.domain.calendarListFailure
+import de.jeanlucmakiola.calendula.ui.common.PageStateCache
 import de.jeanlucmakiola.calendula.domain.isDeclined
+import de.jeanlucmakiola.calendula.domain.eventDisplayComparator
 import de.jeanlucmakiola.calendula.ui.week.coversDay
 import de.jeanlucmakiola.calendula.ui.week.layoutAllDay
 import de.jeanlucmakiola.calendula.ui.week.spansMultipleDays
@@ -25,6 +27,9 @@ import kotlinx.coroutines.flow.combine
 import kotlinx.coroutines.flow.flatMapLatest
 import kotlinx.coroutines.flow.flowOf
 import kotlinx.coroutines.flow.flowOn
+import kotlinx.coroutines.flow.filterNot
+import kotlinx.coroutines.flow.map
+import kotlin.math.abs
 import kotlinx.coroutines.flow.onEach
 import kotlinx.coroutines.flow.stateIn
 import kotlinx.datetime.DateTimeUnit
@@ -44,6 +49,9 @@ import kotlin.time.Clock
 import kotlin.time.Instant
 import javax.inject.Inject
 
+/** How many months either side of the requested one [MonthViewModel.month] keeps cached. */
+private const val MONTH_CACHE_SPAN = 2
+
 @OptIn(ExperimentalCoroutinesApi::class)
 @HiltViewModel
 class MonthViewModel @Inject constructor(
@@ -87,6 +95,21 @@ class MonthViewModel @Inject constructor(
     private val _month = MutableStateFlow(YearMonth(todayDate.year, todayDate.month))
     val month: StateFlow<YearMonth> = _month
 
+    /** The pager page the anchor month sits on, for the paged and split styles. */
+    val anchorPage: StateFlow<Int> = _month
+        .map { monthIndexOf(it) }
+        .stateIn(
+            scope = viewModelScope,
+            started = SharingStarted.WhileSubscribed(5_000L),
+            initialValue = monthIndexOf(_month.value),
+        )
+
+    /**
+     * The anchor month's state. Once loaded it never falls back to
+     * [MonthUiState.Loading]: moving the anchor keeps the last result until the
+     * new month arrives, since the pages draw their own months and this feeds
+     * the failure screen and the split style's day pane.
+     */
     val state: StateFlow<MonthUiState> =
         combine(_month, weekStart, viewStyle) { ym, ws, style -> Triple(ym, ws, style) }
             .flatMapLatest { (ym, ws, style) ->
@@ -94,22 +117,48 @@ class MonthViewModel @Inject constructor(
                 // Split draw, so under a scrolling style this query is a month
                 // of provider work for a view that isn't on screen.
                 if (style.isScrolling) return@flatMapLatest flowOf(MonthUiState.Loading)
-                val range = monthGridRange(ym, ws, zone)
-                combine(
-                    repository.calendars(),
-                    repository.instances(range),
-                ) { calendars, instances ->
-                    buildState(ym, ws, calendars, instances)
-                }
+                month(ym, ws).filterNot { it is MonthUiState.Loading }
             }
             .catch { emit(MonthUiState.Failure(FailureReason.ProviderUnavailable)) }
-            .flowOn(io)
             .stateIn(
                 scope = viewModelScope,
                 started = SharingStarted.WhileSubscribed(5_000L),
                 initialValue = MonthUiState.Loading,
             )
 
+    private val months = PageStateCache<Pair<YearMonth, DayOfWeek>, MonthUiState>(
+        scope = viewModelScope,
+        initial = MonthUiState.Loading,
+        // Far enough to cover the pages either side and a swipe back, so paging
+        // through a year doesn't keep a year of queries around. A week-start
+        // change lays every month out afresh.
+        keep = { (cached, cachedWs), (requested, ws) ->
+            cachedWs == ws && abs(monthIndexOf(cached) - monthIndexOf(requested)) <= MONTH_CACHE_SPAN
+        },
+    ) { (ym, ws) ->
+        combine(
+            repository.calendars(),
+            repository.instances(monthGridRange(ym, ws, zone)),
+        ) { calendars, instances ->
+            buildState(ym, ws, calendars, instances)
+        }
+            .catch { emit(MonthUiState.Failure(FailureReason.ProviderUnavailable)) }
+            .flowOn(io)
+    }
+
+    /**
+     * Month [ym] laid out with weeks starting on [ws], shared between its pager
+     * page and [state]. Main thread only.
+     */
+    fun month(ym: YearMonth, ws: DayOfWeek): StateFlow<MonthUiState> = months.get(ym to ws)
+
+    /** The pager came to rest on [page]; follow it unless it is already the anchor's. */
+    fun onPageSettled(page: Int) {
+        if (monthIndexOf(_month.value) == page) return
+        _month.value = yearMonthForIndex(page)
+        realignSelection()
+    }
+
     // --- Continuous + Dense styles (#38) ----------------------------------
     //
     // These scroll through every month there is, so they can't load "a month" —
@@ -244,12 +293,10 @@ class MonthViewModel @Inject constructor(
 
     // --- Split style (#53) ------------------------------------------------
     //
-    // The first selected-day concept in the app: the other views drill straight
-    // into a date, while the split style keeps one selected and lists it below
-    // the grid.
+    // Null means the full-month agenda; a date narrows the pane to that day.
 
-    private val _selectedDate = MutableStateFlow(todayDate)
-    val selectedDate: StateFlow<LocalDate> = _selectedDate
+    private val _selectedDate = MutableStateFlow<LocalDate?>(null)
+    val selectedDate: StateFlow<LocalDate?> = _selectedDate
 
     /**
      * Select [date], following it to its month if it sits in the grid's leading
@@ -257,33 +304,33 @@ class MonthViewModel @Inject constructor(
      * silently list a date the grid isn't pointing at.
      */
     fun selectDate(date: LocalDate) {
-        _selectedDate.value = date
         val target = YearMonth(date.year, date.month)
+        _selectedDate.value = if (target == _month.value && _selectedDate.value == date) null else date
         if (target != _month.value) _month.value = target
     }
 
-    /**
-     * Move the selection with the month: today if the new month holds it, else
-     * its 1st. Leaving the old date selected would list a day the grid no longer
-     * shows.
-     */
+    fun clearSelection() { _selectedDate.value = null }
+
+    /** A pane swipe walks days when filtered, months when showing the agenda. */
+    fun stepSplitPane(days: Int) {
+        val selected = _selectedDate.value
+        if (selected == null) {
+            _month.value = yearMonthForIndex(monthIndexOf(_month.value) + days)
+        } else {
+            val next = selected.plus(days, DateTimeUnit.DAY)
+            _selectedDate.value = next
+            _month.value = YearMonth(next.year, next.month)
+        }
+    }
+
+    /** Moving the grid to another month restores its full agenda. */
     private fun realignSelection() {
-        _selectedDate.value = selectionForMonth(_month.value, todayDate)
-    }
-
-    fun goToPrev() {
-        _month.value = _month.value.minus(1, DateTimeUnit.MONTH)
-        realignSelection()
-    }
-
-    fun goToNext() {
-        _month.value = _month.value.plus(1, DateTimeUnit.MONTH)
-        realignSelection()
+        _selectedDate.value = null
     }
 
     fun goToToday() {
         _month.value = YearMonth(todayDate.year, todayDate.month)
-        _selectedDate.value = todayDate
+        _selectedDate.value = null
     }
 
     /**
@@ -292,13 +339,12 @@ class MonthViewModel @Inject constructor(
      * otherwise sit wherever paged navigation last left it (today's month, on a
      * fresh open) — and a switch to a paged style, or a reseed of the other
      * scrolling style's list, would jump there instead of holding position. The
-     * selection is realigned alongside it so that landing on the Split style
-     * shows a live day in the month on screen rather than a stale, off-month one.
+     * selection is cleared alongside it so Split opens the visible month's agenda.
      */
     fun syncScrollMonth(ym: YearMonth) {
         if (_month.value == ym) return
         _month.value = ym
-        _selectedDate.value = selectionForMonth(ym, todayDate)
+        _selectedDate.value = null
     }
 
     /** Jump to the month containing [date] (drawer jump-to-date). */
@@ -461,11 +507,7 @@ internal fun instancesByDay(
     days.associateWith { day ->
         instances
             .filter { it.coversDay(day, zone) }
-            .sortedWith(
-                compareBy<EventInstance> { it.isDeclined }
-                    .thenByDescending { it.isAllDay }
-                    .thenBy { it.start },
-            )
+            .sortedWith(eventDisplayComparator(zone))
     }
 
 /**
@@ -506,11 +548,10 @@ private const val WINDOW_EDGE = 2
 internal fun edgeForPad(pad: Int): Int = minOf(WINDOW_EDGE, pad - 1).coerceAtLeast(0)
 
 /**
- * Which day the split style should select when the grid lands on [month]:
- * [today] when the month holds it, otherwise the 1st. Pure so the rule can be
- * tested without standing up a view model and a provider behind it.
+ * First day shown in the split agenda: today in the current month, otherwise
+ * the first of the visible month.
  */
-internal fun selectionForMonth(month: YearMonth, today: LocalDate): LocalDate =
+internal fun agendaStartForMonth(month: YearMonth, today: LocalDate): LocalDate =
     if (YearMonth(today.year, today.month) == month) {
         today
     } else {

app/src/main/java/de/jeanlucmakiola/calendula/ui/onboarding/ViewStep.kt

@@ -18,11 +18,11 @@ import de.jeanlucmakiola.calendula.data.prefs.resolveFirstDay
 import de.jeanlucmakiola.calendula.ui.agenda.AgendaViewPreview
 import de.jeanlucmakiola.calendula.ui.common.CalendarView
 import de.jeanlucmakiola.calendula.ui.common.IMPLEMENTED_VIEWS
+import de.jeanlucmakiola.calendula.ui.common.LocalMultiDayCount
 import de.jeanlucmakiola.calendula.ui.common.PickerDescription
 import de.jeanlucmakiola.calendula.ui.common.ViewPreviewFrame
 import de.jeanlucmakiola.calendula.ui.common.icon
-import de.jeanlucmakiola.calendula.ui.common.labelRes
-import de.jeanlucmakiola.calendula.ui.day.DayViewPreview
+import de.jeanlucmakiola.calendula.ui.common.label
 import de.jeanlucmakiola.calendula.ui.month.MonthStylePreview
 import de.jeanlucmakiola.calendula.ui.month.MonthViewStyle
 import de.jeanlucmakiola.calendula.ui.month.descriptionRes
@@ -67,14 +67,19 @@ internal fun ViewStep(
                     height = PREVIEW_HEIGHT,
                 )
                 CalendarView.Week -> WeekViewPreview(weekStart = weekStart, height = PREVIEW_HEIGHT)
-                CalendarView.Day -> DayViewPreview(height = PREVIEW_HEIGHT)
+                CalendarView.MultiDay -> WeekViewPreview(
+                    weekStart = weekStart,
+                    height = PREVIEW_HEIGHT,
+                    dayCount = LocalMultiDayCount.current,
+                )
+                CalendarView.Day -> WeekViewPreview(weekStart = weekStart, height = PREVIEW_HEIGHT, dayCount = 1)
                 CalendarView.Agenda -> AgendaViewPreview(height = PREVIEW_HEIGHT)
             }
         }
         IMPLEMENTED_VIEWS.forEachIndexed { index, view ->
             val isSelected = view == choice.defaultView
             GroupedRow(
-                title = stringResource(view.labelRes),
+                title = view.label(),
                 position = positionOf(index, IMPLEMENTED_VIEWS.size),
                 selected = isSelected,
                 leading = {

app/src/main/java/de/jeanlucmakiola/calendula/ui/search/SearchScreen.kt

@@ -126,6 +126,7 @@ fun SearchScreen(
     onBack: () -> Unit,
     onEventClick: (EventInstance) -> Unit,
     modifier: Modifier = Modifier,
+    visible: Boolean = true,
     viewModel: SearchViewModel = hiltViewModel(),
 ) {
     val query by viewModel.query.collectAsStateWithLifecycle()
@@ -184,7 +185,7 @@ fun SearchScreen(
     BackHandler(enabled = inSelection) { viewModel.clearSelection() }
 
     Scaffold(
-        modifier = modifier.predictiveBack(onBack = onBack, enabled = !inSelection),
+        modifier = modifier.predictiveBack(onBack = onBack, enabled = !inSelection, visible = visible),
         containerColor = MaterialTheme.colorScheme.surface,
         topBar = {
             SearchTopBar(

app/src/main/java/de/jeanlucmakiola/calendula/ui/settings/AppearanceSettings.kt

@@ -76,6 +76,7 @@ internal fun AppearanceScreen(
     state: SettingsUiState,
     viewModel: SettingsViewModel,
     onBack: () -> Unit,
+    visible: Boolean = true,
 ) {
     var showTheme by remember { mutableStateOf(false) }
     var showBrandFont by remember { mutableStateOf(false) }
@@ -96,6 +97,7 @@ internal fun AppearanceScreen(
         title = stringResource(R.string.settings_section_appearance),
         onBack = onBack,
         predictiveBack = true,
+        visible = visible,
     ) {
         // Theme & colour
         GroupedRow(

app/src/main/java/de/jeanlucmakiola/calendula/ui/settings/EventFormSettings.kt

@@ -41,6 +41,7 @@ internal fun EventFormScreen(
     state: SettingsUiState,
     viewModel: SettingsViewModel,
     onBack: () -> Unit,
+    visible: Boolean = true,
 ) {
     var showDefaultDuration by remember { mutableStateOf(false) }
     // The calendar whose duration-override picker is open, if any.
@@ -53,6 +54,7 @@ internal fun EventFormScreen(
         title = stringResource(R.string.settings_section_event_form),
         onBack = onBack,
         predictiveBack = true,
+        visible = visible,
     ) {
         SettingsHint(stringResource(R.string.settings_form_fields_hint))
         Spacer(Modifier.height(8.dp))

app/src/main/java/de/jeanlucmakiola/calendula/ui/settings/NotificationSettings.kt

@@ -63,6 +63,7 @@ internal fun NotificationsScreen(
     viewModel: SettingsViewModel,
     onBack: () -> Unit,
     onOpenSpecialDates: () -> Unit,
+    visible: Boolean = true,
 ) {
     val context = LocalContext.current
     val launcher = rememberLauncherForActivityResult(
@@ -92,6 +93,7 @@ internal fun NotificationsScreen(
         title = stringResource(R.string.settings_section_notifications),
         onBack = onBack,
         predictiveBack = true,
+        visible = visible,
     ) {
         GroupedRow(
             title = stringResource(R.string.settings_reminders),

app/src/main/java/de/jeanlucmakiola/calendula/ui/settings/SettingsScreen.kt

@@ -2,9 +2,7 @@ package de.jeanlucmakiola.calendula.ui.settings
 
 import androidx.compose.animation.AnimatedVisibility
 import androidx.compose.animation.fadeIn
-import androidx.compose.animation.fadeOut
 import androidx.compose.animation.slideInHorizontally
-import androidx.compose.animation.slideOutHorizontally
 import androidx.compose.foundation.Image
 import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.Box
@@ -66,6 +64,7 @@ import de.jeanlucmakiola.floret.crash.CrashReportDialog
 import de.jeanlucmakiola.floret.crash.CrashReporter
 import de.jeanlucmakiola.floret.crash.openIssueTracker
 import de.jeanlucmakiola.floret.crash.submitCrashReport
+import de.jeanlucmakiola.floret.identity.predictiveBackExit
 import de.jeanlucmakiola.floret.locale.AppLanguage
 
 /** The settings sub-screens reached from the hub's category rows. */
@@ -85,11 +84,14 @@ fun SettingsScreen(
     onManageCalendars: () -> Unit,
     onOpenBackup: () -> Unit,
     modifier: Modifier = Modifier,
+    visible: Boolean = true,
     viewModel: SettingsViewModel = hiltViewModel(),
 ) {
     val state by viewModel.state.collectAsStateWithLifecycle()
     var section by rememberSaveable { mutableStateOf<SettingsSection?>(null) }
     val slideSpec = rememberCalendarSlideSpec()
+    // Leaves from the predictive-back preview rather than sliding off at full size.
+    val overlayExit = predictiveBackExit()
 
     Box(
         modifier = modifier
@@ -101,61 +103,63 @@ fun SettingsScreen(
             onOpenSection = { section = it },
             onManageCalendars = onManageCalendars,
             onOpenBackup = onOpenBackup,
+            visible = visible,
         )
 
         AnimatedVisibility(
             visible = section == SettingsSection.Appearance,
             enter = slideInHorizontally(slideSpec) { it } + fadeIn(),
-            exit = slideOutHorizontally(slideSpec) { it } + fadeOut(),
+            exit = overlayExit,
         ) {
-            AppearanceScreen(state = state, viewModel = viewModel, onBack = { section = null })
+            AppearanceScreen(state = state, viewModel = viewModel, onBack = { section = null }, visible = section == SettingsSection.Appearance)
         }
         AnimatedVisibility(
             visible = section == SettingsSection.Views,
             enter = slideInHorizontally(slideSpec) { it } + fadeIn(),
-            exit = slideOutHorizontally(slideSpec) { it } + fadeOut(),
+            exit = overlayExit,
         ) {
-            ViewsScreen(state = state, viewModel = viewModel, onBack = { section = null })
+            ViewsScreen(state = state, viewModel = viewModel, onBack = { section = null }, visible = section == SettingsSection.Views)
         }
         AnimatedVisibility(
             visible = section == SettingsSection.EventForm,
             enter = slideInHorizontally(slideSpec) { it } + fadeIn(),
-            exit = slideOutHorizontally(slideSpec) { it } + fadeOut(),
+            exit = overlayExit,
         ) {
-            EventFormScreen(state = state, viewModel = viewModel, onBack = { section = null })
+            EventFormScreen(state = state, viewModel = viewModel, onBack = { section = null }, visible = section == SettingsSection.EventForm)
         }
         AnimatedVisibility(
             visible = section == SettingsSection.Notifications,
             enter = slideInHorizontally(slideSpec) { it } + fadeIn(),
-            exit = slideOutHorizontally(slideSpec) { it } + fadeOut(),
+            exit = overlayExit,
         ) {
             NotificationsScreen(
                 state = state,
                 viewModel = viewModel,
                 onBack = { section = null },
                 onOpenSpecialDates = { section = SettingsSection.SpecialDates },
+                visible = section == SettingsSection.Notifications,
             )
         }
         AnimatedVisibility(
             visible = section == SettingsSection.SpecialDates,
             enter = slideInHorizontally(slideSpec) { it } + fadeIn(),
-            exit = slideOutHorizontally(slideSpec) { it } + fadeOut(),
+            exit = overlayExit,
         ) {
-            SpecialDatesScreen(viewModel = viewModel, onBack = { section = null })
+            SpecialDatesScreen(viewModel = viewModel, onBack = { section = null }, visible = section == SettingsSection.SpecialDates)
         }
         AnimatedVisibility(
             visible = section == SettingsSection.Widgets,
             enter = slideInHorizontally(slideSpec) { it } + fadeIn(),
-            exit = slideOutHorizontally(slideSpec) { it } + fadeOut(),
+            exit = overlayExit,
         ) {
-            WidgetsScreen(state = state, viewModel = viewModel, onBack = { section = null })
+            WidgetsScreen(state = state, viewModel = viewModel, onBack = { section = null }, visible = section == SettingsSection.Widgets)
         }
         AnimatedVisibility(
             visible = section == SettingsSection.Licences,
             enter = slideInHorizontally(slideSpec) { it } + fadeIn(),
-            exit = slideOutHorizontally(slideSpec) { it } + fadeOut(),
+            exit = overlayExit,
         ) {
-            LicencesScreen(onBack = { section = null })
+            LicencesScreen(onBack = { section = null }, visible = section == SettingsSection.Licences)
         }
     }
 }
@@ -170,8 +174,14 @@ private fun SettingsHub(
     onOpenSection: (SettingsSection) -> Unit,
     onManageCalendars: () -> Unit,
     onOpenBackup: () -> Unit,
+    visible: Boolean,
 ) {
-    CollapsingScaffold(title = stringResource(R.string.settings_title), onBack = onBack, predictiveBack = true) {
+    CollapsingScaffold(
+        title = stringResource(R.string.settings_title),
+        onBack = onBack,
+        predictiveBack = true,
+        visible = visible,
+    ) {
         // Card and support row are one grouped block, so the call to action
         // continues the container instead of sitting inside it as a button.
         Box(Modifier.padding(horizontal = GroupedListInset)) { AboutCard() }

app/src/main/java/de/jeanlucmakiola/calendula/ui/settings/SettingsUiState.kt

@@ -13,6 +13,7 @@ import de.jeanlucmakiola.calendula.ui.agenda.AgendaRange
 import de.jeanlucmakiola.calendula.ui.common.CalendarView
 import de.jeanlucmakiola.calendula.ui.common.IMPLEMENTED_VIEWS
 import de.jeanlucmakiola.calendula.ui.common.QuickSwitchConfig
+import de.jeanlucmakiola.calendula.ui.common.TimelineHours
 import de.jeanlucmakiola.calendula.ui.common.TimelineScale
 import de.jeanlucmakiola.calendula.ui.month.MonthViewStyle
 import de.jeanlucmakiola.calendula.widget.WidgetSize
@@ -34,6 +35,8 @@ data class SettingsUiState(
     val timeFormat: TimeFormatPref = TimeFormatPref.AUTO,
     /** Whether the week/day timeline seats each hour in its own cell (v2.11). */
     val showHourGrid: Boolean = false,
+    /** Days the multi-day view shows side by side (#193). */
+    val multiDayCount: Int = SettingsPrefs.DEFAULT_MULTI_DAY_COUNT,
     /** How the Agenda screen treats events that already ended today. */
     val pastEventDisplay: PastEventDisplay = PastEventDisplay.SHOW,
     /** Whether the month/week grids fade events that have already finished. */
@@ -62,6 +65,7 @@ data class SettingsUiState(
     val monthViewStyle: MonthViewStyle = MonthViewStyle.Paged,
     /** How tall an hour is drawn in the week and day timelines (#56). */
     val timelineScale: TimelineScale = TimelineScale.Regular,
+    val timelineHours: TimelineHours = TimelineHours(),
     /** Order of the views in the navigation drawer (#24); every view is always listed. */
     val drawerViewOrder: List<CalendarView> = IMPLEMENTED_VIEWS,
     /** Optional event-form fields shown by default (rest behind "more fields"). */

app/src/main/java/de/jeanlucmakiola/calendula/ui/settings/SettingsViewModel.kt

@@ -36,6 +36,7 @@ import de.jeanlucmakiola.calendula.ui.agenda.AgendaRange
 import de.jeanlucmakiola.calendula.ui.agenda.storageValue
 import de.jeanlucmakiola.calendula.ui.common.CalendarView
 import de.jeanlucmakiola.calendula.ui.common.QuickSwitchConfig
+import de.jeanlucmakiola.calendula.ui.common.TimelineHours
 import de.jeanlucmakiola.calendula.ui.common.TimelineScale
 import de.jeanlucmakiola.calendula.ui.month.MonthViewStyle
 import de.jeanlucmakiola.calendula.ui.theme.AppFontSettings
@@ -148,11 +149,12 @@ class SettingsViewModel @Inject constructor(
                     combine(
                         prefs.todayButtonInToolbar,
                         prefs.dragToReschedule,
-                        ::Pair,
+                        prefs.multiDayCount,
+                        ::Triple,
                     ),
-                ) { hourLines, weekNumbers, showToday, soften, (todayInToolbar, dragToMove) ->
+                ) { hourLines, weekNumbers, showToday, soften, (todayInToolbar, dragToMove, multiDay) ->
                     DisplayToggles(
-                        hourLines, weekNumbers, showToday, soften, todayInToolbar, dragToMove,
+                        hourLines, weekNumbers, showToday, soften, todayInToolbar, dragToMove, multiDay,
                     )
                 },
             ) { view, screenRange, widgetRange, timeFormat, toggles ->
@@ -164,6 +166,7 @@ class SettingsViewModel @Inject constructor(
                     softenColors = toggles.softenColors,
                     todayButtonInToolbar = toggles.todayButtonInToolbar,
                     dragToReschedule = toggles.dragToReschedule,
+                    multiDayCount = toggles.multiDayCount,
                 )
             },
             combine(
@@ -178,9 +181,11 @@ class SettingsViewModel @Inject constructor(
                     prefs.drawerViewOrder,
                     prefs.monthViewStyle,
                     prefs.widgetSize,
-                    prefs.timelineScale,
-                ) { quickSwitch, drawer, monthStyle, widgetSize, timelineScale ->
-                    ViewCustomization(quickSwitch, drawer, monthStyle, widgetSize, timelineScale)
+                    combine(prefs.timelineScale, prefs.timelineHours, ::Pair),
+                ) { quickSwitch, drawer, monthStyle, widgetSize, (timelineScale, timelineHours) ->
+                    ViewCustomization(
+                        quickSwitch, drawer, monthStyle, widgetSize, timelineScale, timelineHours,
+                    )
                 },
             ) { showRangeBar, autofocus, pastEvents, dimCompleted, viewCustomization ->
                 MiscSettings(showRangeBar, autofocus, pastEvents, dimCompleted, viewCustomization)
@@ -197,6 +202,7 @@ class SettingsViewModel @Inject constructor(
                 softenColors = views.softenColors,
                 todayButtonInToolbar = views.todayButtonInToolbar,
                 dragToReschedule = views.dragToReschedule,
+                multiDayCount = views.multiDayCount,
                 agendaShowRangeBar = misc.showRangeBar,
                 autofocusEventTitle = misc.autofocusEventTitle,
                 pastEventDisplay = misc.pastEventDisplay,
@@ -206,6 +212,7 @@ class SettingsViewModel @Inject constructor(
                 monthViewStyle = misc.viewCustomization.monthViewStyle,
                 widgetSize = misc.viewCustomization.widgetSize,
                 timelineScale = misc.viewCustomization.timelineScale,
+                timelineHours = misc.viewCustomization.timelineHours,
                 allowColorOnUnsupportedCalendars = defaults.allowColor,
                 defaultReminderMinutes = defaults.defaultReminder,
                 defaultAllDayReminderMinutes = defaults.allDayReminder,
@@ -298,6 +305,7 @@ class SettingsViewModel @Inject constructor(
         val softenColors: Boolean,
         val todayButtonInToolbar: Boolean,
         val dragToReschedule: Boolean,
+        val multiDayCount: Int,
     )
 
     private data class DisplayToggles(
@@ -307,6 +315,7 @@ class SettingsViewModel @Inject constructor(
         val softenColors: Boolean,
         val todayButtonInToolbar: Boolean,
         val dragToReschedule: Boolean,
+        val multiDayCount: Int,
     )
 
     private data class MiscSettings(
@@ -323,6 +332,7 @@ class SettingsViewModel @Inject constructor(
         val monthViewStyle: MonthViewStyle,
         val widgetSize: WidgetSize,
         val timelineScale: TimelineScale,
+        val timelineHours: TimelineHours,
     )
 
     /** Contact special-dates sub-page (issue #15); its own flow — the main state is full. */
@@ -532,6 +542,10 @@ class SettingsViewModel @Inject constructor(
         viewModelScope.launch { prefs.setTimeFormat(pref) }
     }
 
+    fun setMultiDayCount(count: Int) {
+        viewModelScope.launch { prefs.setMultiDayCount(count) }
+    }
+
     fun setShowHourGrid(enabled: Boolean) {
         viewModelScope.launch { prefs.setShowHourGrid(enabled) }
     }
@@ -617,6 +631,10 @@ class SettingsViewModel @Inject constructor(
         viewModelScope.launch { prefs.setTimelineScale(scale) }
     }
 
+    fun setTimelineHours(hours: TimelineHours) {
+        viewModelScope.launch { prefs.setTimelineHours(hours) }
+    }
+
     fun setDrawerViewOrder(order: List<CalendarView>) {
         viewModelScope.launch { prefs.setDrawerViewOrder(order) }
     }

app/src/main/java/de/jeanlucmakiola/calendula/ui/settings/SpecialDatesSettings.kt

@@ -46,6 +46,7 @@ import de.jeanlucmakiola.floret.reminders.ReminderOverride
 internal fun SpecialDatesScreen(
     viewModel: SettingsViewModel,
     onBack: () -> Unit,
+    visible: Boolean = true,
 ) {
     val state by viewModel.specialDatesState.collectAsStateWithLifecycle()
     val settings by viewModel.state.collectAsStateWithLifecycle()
@@ -76,6 +77,7 @@ internal fun SpecialDatesScreen(
         title = stringResource(R.string.settings_section_special_dates),
         onBack = onBack,
         predictiveBack = true,
+        visible = visible,
     ) {
         // Paused banner: the permission was revoked after enabling.
         if (state.enabled && state.stalledPermission) {

app/src/main/java/de/jeanlucmakiola/calendula/ui/settings/ViewsSettings.kt

@@ -21,10 +21,12 @@ import androidx.compose.runtime.setValue
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.platform.LocalContext
+import androidx.compose.ui.res.pluralStringResource
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.unit.dp
 import de.jeanlucmakiola.calendula.R
 import de.jeanlucmakiola.calendula.data.prefs.PastEventDisplay
+import de.jeanlucmakiola.calendula.data.prefs.SettingsPrefs
 import de.jeanlucmakiola.calendula.data.prefs.TimeFormatPref
 import de.jeanlucmakiola.calendula.data.prefs.WeekStartPref
 import de.jeanlucmakiola.calendula.data.prefs.resolveFirstDay
@@ -32,11 +34,15 @@ import de.jeanlucmakiola.calendula.ui.common.AgendaRangePicker
 import de.jeanlucmakiola.calendula.ui.common.CalendarView
 import de.jeanlucmakiola.calendula.ui.common.IMPLEMENTED_VIEWS
 import de.jeanlucmakiola.calendula.ui.common.PickerDescription
+import de.jeanlucmakiola.calendula.ui.common.LocalUse24HourFormat
+import de.jeanlucmakiola.calendula.ui.common.TimelineHours
 import de.jeanlucmakiola.calendula.ui.common.TimelineScale
 import de.jeanlucmakiola.calendula.ui.common.agendaRangeLabel
 import de.jeanlucmakiola.calendula.ui.common.descriptionRes
+import de.jeanlucmakiola.calendula.ui.common.formatMinuteOfDay
 import de.jeanlucmakiola.calendula.ui.common.formatTimeOfDay
 import de.jeanlucmakiola.calendula.ui.common.icon
+import de.jeanlucmakiola.calendula.ui.common.label
 import de.jeanlucmakiola.calendula.ui.common.labelRes
 import de.jeanlucmakiola.calendula.ui.month.labelRes
 import de.jeanlucmakiola.floret.components.CollapsingScaffold
@@ -62,6 +68,7 @@ internal fun ViewsScreen(
     state: SettingsUiState,
     viewModel: SettingsViewModel,
     onBack: () -> Unit,
+    visible: Boolean = true,
 ) {
     var showMonthStyle by remember { mutableStateOf(false) }
     var showDefaultView by remember { mutableStateOf(false) }
@@ -70,11 +77,16 @@ internal fun ViewsScreen(
     var showPastEvents by remember { mutableStateOf(false) }
     var showAgendaScreenRange by remember { mutableStateOf(false) }
     var showTimelineScale by remember { mutableStateOf(false) }
+    var showMultiDayCount by remember { mutableStateOf(false) }
+    var showHoursStart by remember { mutableStateOf(false) }
+    var showHoursEnd by remember { mutableStateOf(false) }
+    val hours = state.timelineHours
 
     CollapsingScaffold(
         title = stringResource(R.string.settings_section_views),
         onBack = onBack,
         predictiveBack = true,
+        visible = visible,
     ) {
         val config = state.quickSwitchConfig
 
@@ -82,7 +94,7 @@ internal fun ViewsScreen(
         SectionHeader(stringResource(R.string.settings_views_all_header))
         GroupedRow(
             title = stringResource(R.string.settings_default_view),
-            summary = stringResource(state.defaultView.labelRes),
+            summary = state.defaultView.label(),
             position = Position.Top,
             onClick = { showDefaultView = true },
         )
@@ -159,11 +171,56 @@ internal fun ViewsScreen(
         Spacer(Modifier.height(8.dp))
         SectionHeader(stringResource(R.string.settings_week_day_header))
         GroupedRow(
-            title = stringResource(R.string.settings_timeline_scale),
-            summary = stringResource(state.timelineScale.labelRes),
+            title = stringResource(R.string.settings_multi_day_count),
+            summary = multiDayLabel(state.multiDayCount),
             position = Position.Top,
-            onClick = { showTimelineScale = true },
+            onClick = { showMultiDayCount = true },
         )
+        GroupedRow(
+            title = stringResource(R.string.settings_timeline_scale),
+            summary = if (hours.enabled) {
+                stringResource(R.string.settings_timeline_scale_by_visible_hours)
+            } else {
+                stringResource(state.timelineScale.labelRes)
+            },
+            position = Position.Middle,
+            dimmed = hours.enabled,
+            onClick = if (hours.enabled) null else ({ showTimelineScale = true }),
+        )
+        GroupedRow(
+            title = stringResource(R.string.settings_visible_hours),
+            summary = if (hours.enabled) {
+                stringResource(
+                    R.string.settings_visible_hours_on_summary,
+                    hourLabel(hours.startHour),
+                    hourLabel(hours.endHour),
+                )
+            } else {
+                stringResource(R.string.settings_visible_hours_summary)
+            },
+            position = Position.Middle,
+            trailing = {
+                Switch(
+                    checked = hours.enabled,
+                    onCheckedChange = { viewModel.setTimelineHours(hours.copy(enabled = it)) },
+                )
+            },
+            onClick = { viewModel.setTimelineHours(hours.copy(enabled = !hours.enabled)) },
+        )
+        if (hours.enabled) {
+            GroupedRow(
+                title = stringResource(R.string.settings_visible_hours_start),
+                summary = hourLabel(hours.startHour),
+                position = Position.Middle,
+                onClick = { showHoursStart = true },
+            )
+            GroupedRow(
+                title = stringResource(R.string.settings_visible_hours_end),
+                summary = hourLabel(hours.endHour),
+                position = Position.Middle,
+                onClick = { showHoursEnd = true },
+            )
+        }
         GroupedRow(
             title = stringResource(R.string.settings_hour_lines),
             summary = stringResource(R.string.settings_hour_lines_summary),
@@ -275,7 +332,7 @@ internal fun ViewsScreen(
             predictiveBack = true,
             options = IMPLEMENTED_VIEWS,
             selected = state.defaultView,
-            label = { stringResource(it.labelRes) },
+            label = { it.label() },
             leading = {
                 Icon(
                     imageVector = it.icon,
@@ -337,6 +394,18 @@ internal fun ViewsScreen(
             onDismiss = { showPastEvents = false },
         )
     }
+    if (showMultiDayCount) {
+        OptionPicker(
+            title = stringResource(R.string.settings_multi_day_count),
+            header = { PickerDescription(stringResource(R.string.settings_multi_day_count_hint)) },
+            predictiveBack = true,
+            options = SettingsPrefs.MULTI_DAY_COUNTS.toList(),
+            selected = state.multiDayCount,
+            label = { multiDayLabel(it) },
+            onSelect = viewModel::setMultiDayCount,
+            onDismiss = { showMultiDayCount = false },
+        )
+    }
     if (showTimelineScale) {
         OptionPicker(
             title = stringResource(R.string.settings_timeline_scale),
@@ -356,6 +425,30 @@ internal fun ViewsScreen(
             onDismiss = { showTimelineScale = false },
         )
     }
+    if (showHoursStart) {
+        OptionPicker(
+            title = stringResource(R.string.settings_visible_hours_start),
+            header = { PickerDescription(stringResource(R.string.settings_visible_hours_start_hint)) },
+            predictiveBack = true,
+            options = TimelineHours.startOptions(hours.endHour),
+            selected = hours.startHour,
+            label = { hourLabel(it) },
+            onSelect = { viewModel.setTimelineHours(hours.copy(startHour = it)) },
+            onDismiss = { showHoursStart = false },
+        )
+    }
+    if (showHoursEnd) {
+        OptionPicker(
+            title = stringResource(R.string.settings_visible_hours_end),
+            header = { PickerDescription(stringResource(R.string.settings_visible_hours_end_hint)) },
+            predictiveBack = true,
+            options = TimelineHours.endOptions(hours.startHour),
+            selected = hours.endHour,
+            label = { hourLabel(it) },
+            onSelect = { viewModel.setTimelineHours(hours.copy(endHour = it)) },
+            onDismiss = { showHoursEnd = false },
+        )
+    }
     if (showAgendaScreenRange) {
         AgendaRangePicker(
             title = stringResource(R.string.settings_agenda_range),
@@ -384,7 +477,7 @@ private fun ViewRow(
     trailing: @Composable (() -> Unit)? = null,
 ) {
     GroupedRow(
-        title = stringResource(view.labelRes),
+        title = view.label(),
         position = position,
         dimmed = dimmed,
         minHeight = ReorderableRowHeight,
@@ -449,3 +542,12 @@ internal fun pastEventDisplayLabelRes(mode: PastEventDisplay): Int = when (mode)
     PastEventDisplay.DIM -> R.string.settings_past_events_dim
     PastEventDisplay.HIDE -> R.string.settings_past_events_hide
 }
+
+@Composable
+private fun multiDayLabel(count: Int): String =
+    pluralStringResource(R.plurals.view_multi_day, count, count)
+
+/** A whole hour in the app's clock convention; 24 reads as the end of the day. */
+@Composable
+private fun hourLabel(hour: Int): String =
+    formatMinuteOfDay(hour * 60, LocalUse24HourFormat.current, currentLocale())

app/src/main/java/de/jeanlucmakiola/calendula/ui/settings/WidgetSettings.kt

@@ -42,6 +42,7 @@ internal fun WidgetsScreen(
     state: SettingsUiState,
     viewModel: SettingsViewModel,
     onBack: () -> Unit,
+    visible: Boolean = true,
 ) {
     var showAgendaWidgetRange by remember { mutableStateOf(false) }
     var showWidgetSize by remember { mutableStateOf(false) }
@@ -50,6 +51,7 @@ internal fun WidgetsScreen(
         title = stringResource(R.string.settings_section_widgets),
         onBack = onBack,
         predictiveBack = true,
+        visible = visible,
     ) {
         SettingsHint(stringResource(R.string.settings_widgets_hint))
         Spacer(Modifier.height(8.dp))

app/src/main/java/de/jeanlucmakiola/calendula/ui/week/ColumnGeometry.kt

@@ -0,0 +1,169 @@
+package de.jeanlucmakiola.calendula.ui.week
+
+import androidx.compose.foundation.layout.Box
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.Immutable
+import androidx.compose.runtime.Stable
+import androidx.compose.runtime.key
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.layout.Layout
+import androidx.compose.ui.unit.Dp
+import de.jeanlucmakiola.calendula.domain.EventInstance
+import kotlinx.datetime.DateTimeUnit
+import kotlinx.datetime.LocalDate
+import kotlinx.datetime.daysUntil
+import kotlinx.datetime.plus
+import kotlin.math.roundToInt
+
+/** A day column's place across the timeline, in pixels from its start edge. */
+@Immutable
+data class ColumnSlot(val left: Float, val width: Float) {
+    val right: Float get() = left + width
+}
+
+/**
+ * [date]'s column on a page showing this span across [width] pixels, with [gap]
+ * between columns. A date off the page carries on at the same pitch, off screen
+ * on its side — where a view switch slides it in from, or out to.
+ */
+fun DaySpan.slot(date: LocalDate, width: Float, gap: Float): ColumnSlot {
+    val pitch = (width + gap) / count
+    return ColumnSlot(left = start.daysUntil(date) * pitch, width = pitch - gap)
+}
+
+/** The last day of the span. */
+val DaySpan.end: LocalDate get() = start.plus(count - 1, DateTimeUnit.DAY)
+
+/**
+ * The timeline's columns: one page's, or — while switching between the day, the
+ * multi-day and the week view (#184) — every day of both pages, each column
+ * between where it sits in the one and where it sits in the other.
+ *
+ * @param progress how far from [from] to [to], read at layout time only.
+ */
+@Stable
+class ColumnGeometry(val from: DaySpan, val to: DaySpan, val progress: () -> Float) {
+
+    /** Every day either page shows, in order: the two overlap, so they run on unbroken. */
+    val dates: List<LocalDate> = run {
+        val first = minOf(from.start, to.start)
+        val last = maxOf(from.end, to.end)
+        (0..first.daysUntil(last)).map { first.plus(it, DateTimeUnit.DAY) }
+    }
+
+    fun slot(date: LocalDate, width: Float, gap: Float): ColumnSlot {
+        val a = from.slot(date, width, gap)
+        if (from == to) return a
+        val b = to.slot(date, width, gap)
+        val p = progress()
+        return ColumnSlot(lerp(a.left, b.left, p), lerp(a.width, b.width, p))
+    }
+
+    /** The span of columns [range] covers, between its extent on each page. */
+    fun extent(fromRange: ClosedRange<LocalDate>, toRange: ClosedRange<LocalDate>, width: Float, gap: Float): ColumnSlot {
+        val a = from.extent(fromRange, width, gap)
+        if (from == to && fromRange == toRange) return a
+        val b = to.extent(toRange, width, gap)
+        val p = progress()
+        val left = lerp(a.left, b.left, p)
+        return ColumnSlot(left, lerp(a.right, b.right, p) - left)
+    }
+
+    companion object {
+        /** One page's columns, standing still. */
+        fun of(span: DaySpan): ColumnGeometry = ColumnGeometry(span, span) { 0f }
+    }
+}
+
+private fun DaySpan.extent(range: ClosedRange<LocalDate>, width: Float, gap: Float): ColumnSlot {
+    val left = slot(range.start, width, gap).left
+    return ColumnSlot(left, slot(range.endInclusive, width, gap).right - left)
+}
+
+internal fun lerp(a: Float, b: Float, p: Float): Float = a + (b - a) * p
+
+/**
+ * Lays [content] out once per day of [geometry], each across its column. The
+ * columns are placed in the layout pass, so a view switch moving them every
+ * frame re-lays them out without recomposing them. Children fill the height
+ * the layout is given, or wrap it when it has none.
+ */
+@Composable
+fun TimelineColumns(
+    geometry: ColumnGeometry,
+    gap: Dp,
+    modifier: Modifier = Modifier,
+    content: @Composable (LocalDate) -> Unit,
+) {
+    val dates = geometry.dates
+    Layout(
+        content = {
+            dates.forEach { date ->
+                key(date) { Box(propagateMinConstraints = true) { content(date) } }
+            }
+        },
+        modifier = modifier,
+    ) { measurables, constraints ->
+        val width = constraints.maxWidth
+        val gapPx = gap.toPx()
+        val slots = dates.map { geometry.slot(it, width.toFloat(), gapPx) }
+        val placeables = measurables.mapIndexed { i, measurable ->
+            val left = slots[i].left.roundToInt()
+            val columnWidth = (slots[i].right.roundToInt() - left).coerceAtLeast(0)
+            measurable.measure(constraints.copy(minWidth = columnWidth, maxWidth = columnWidth))
+        }
+        val height = placeables.maxOfOrNull { it.height }?.coerceAtLeast(constraints.minHeight)
+            ?: constraints.minHeight
+        layout(width, height) {
+            placeables.forEachIndexed { i, placeable ->
+                placeable.placeRelative(slots[i].left.roundToInt(), 0)
+            }
+        }
+    }
+}
+
+/**
+ * An all-day bar as each page lays it out: the days it covers there, clipped to
+ * the page, and its lane. A bar only one page has keeps its days on the other,
+ * so it slides out with them rather than vanishing.
+ */
+@Immutable
+data class PlacedBar(
+    val event: EventInstance,
+    /** The day the bar is drawn from on the page it is tagged on, for the view morph. */
+    val keyDate: LocalDate,
+    val fromRange: ClosedRange<LocalDate>,
+    val toRange: ClosedRange<LocalDate>,
+    val fromLane: Int,
+    val toLane: Int,
+)
+
+/** [state]'s all-day bars, standing still. */
+internal fun staticBars(state: WeekUiState.Success): List<PlacedBar> =
+    state.allDaySpans.map { span ->
+        val range = state.days[span.startCol]..state.days[span.endCol]
+        PlacedBar(span.event, range.start, range, range, span.lane, span.lane)
+    }
+
+/**
+ * The all-day bars of both pages of a view switch, each once: matched by
+ * occurrence, placed on each page as that page lays it out.
+ */
+internal fun morphBars(from: WeekUiState.Success?, to: WeekUiState.Success?): List<PlacedBar> {
+    val fromBars = from?.let(::staticBars).orEmpty().associateBy { it.event.occurrence() }
+    val toBars = to?.let(::staticBars).orEmpty().associateBy { it.event.occurrence() }
+    return (fromBars.keys + toBars.keys).map { occurrence ->
+        val a = fromBars[occurrence]
+        val b = toBars[occurrence]
+        PlacedBar(
+            event = (a ?: b)!!.event,
+            keyDate = (a ?: b)!!.keyDate,
+            fromRange = (a ?: b)!!.fromRange,
+            toRange = (b ?: a)!!.toRange,
+            fromLane = (a ?: b)!!.fromLane,
+            toLane = (b ?: a)!!.toLane,
+        )
+    }
+}
+
+private fun EventInstance.occurrence(): Pair<Long, Long> = eventId to start.toEpochMilliseconds()

app/src/main/java/de/jeanlucmakiola/calendula/ui/week/TimelineMorph.kt

@@ -0,0 +1,32 @@
+package de.jeanlucmakiola.calendula.ui.week
+
+import androidx.compose.animation.core.Animatable
+import androidx.compose.runtime.Stable
+import kotlinx.coroutines.flow.StateFlow
+import kotlinx.datetime.LocalDate
+
+/**
+ * A switch between two timeline views in progress (#184): the page on screen
+ * when it started, the page it ends on, and how far between the two it is.
+ */
+@Stable
+internal class TimelineMorph(
+    val fromKind: TimelineKind,
+    val toKind: TimelineKind,
+    val from: DaySpan,
+    val to: DaySpan,
+    val fromState: StateFlow<WeekUiState>,
+    val toState: StateFlow<WeekUiState>,
+) {
+    val progress = Animatable(0f)
+
+    /** Whether the columns change size a lot, from a single day to a week or back, and take longer for it. */
+    val isLong: Boolean get() = maxOf(from.count, to.count) > LONG_SWITCH_RATIO * minOf(from.count, to.count)
+
+    /** Where each day's events come from: the page it was on, else the page it goes to. */
+    fun sourceOf(date: LocalDate): Side = if (date in from.start..from.end) Side.From else Side.To
+
+    enum class Side { From, To }
+}
+
+private const val LONG_SWITCH_RATIO = 3

app/src/main/java/de/jeanlucmakiola/calendula/ui/week/WeekPaging.kt

@@ -0,0 +1,107 @@
+package de.jeanlucmakiola.calendula.ui.week
+
+import kotlinx.datetime.DateTimeUnit
+import kotlinx.datetime.DayOfWeek
+import kotlinx.datetime.LocalDate
+import kotlinx.datetime.daysUntil
+import kotlinx.datetime.plus
+
+/** Pages the week pager spans — a little under four centuries, centred on [PAGE_EPOCH]. */
+internal const val WEEK_PAGE_COUNT: Int = 20_000
+
+private const val EPOCH_PAGE = WEEK_PAGE_COUNT / 2
+
+/** The week at [EPOCH_PAGE]; any date works, it only has to stay fixed. */
+private val PAGE_EPOCH = LocalDate(2000, 1, 3)
+
+/** First day of the week shown on pager [page], with weeks starting on [firstDay]. */
+internal fun weekStartForPage(page: Int, firstDay: DayOfWeek): LocalDate =
+    PAGE_EPOCH.startOfWeek(firstDay).plus((page - EPOCH_PAGE) * 7, DateTimeUnit.DAY)
+
+/** The pager page whose week contains [date], with weeks starting on [firstDay]. */
+internal fun weekPageFor(date: LocalDate, firstDay: DayOfWeek): Int {
+    val days = PAGE_EPOCH.startOfWeek(firstDay).daysUntil(date.startOfWeek(firstDay))
+    return (EPOCH_PAGE + days / 7).coerceIn(0, WEEK_PAGE_COUNT - 1)
+}
+
+/** How a timeline pager cuts the calendar into pages of [dayCount] days. */
+sealed interface PageGrid {
+    val dayCount: Int
+    val pageCount: Int
+
+    /** First day shown on pager [page]. */
+    fun startForPage(page: Int): LocalDate
+
+    /** The pager page showing [date]. */
+    fun pageFor(date: LocalDate): Int
+}
+
+/** Whole weeks, starting on [firstDay]. */
+data class WeekGrid(val firstDay: DayOfWeek) : PageGrid {
+    override val dayCount: Int get() = 7
+    override val pageCount: Int get() = WEEK_PAGE_COUNT
+    override fun startForPage(page: Int): LocalDate = weekStartForPage(page, firstDay)
+    override fun pageFor(date: LocalDate): Int = weekPageFor(date, firstDay)
+}
+
+/** Pages the multi-day pager spans — over three centuries at the widest page. */
+internal const val DAYS_PAGE_COUNT: Int = 40_000
+
+private const val DAYS_EPOCH_PAGE = DAYS_PAGE_COUNT / 2
+
+/** A fixed day the multi-day pages are counted from. */
+private val DAYS_EPOCH = LocalDate(2000, 1, 1)
+
+/**
+ * Runs of [dayCount] days (#193), offset [phase] days from a fixed epoch so any
+ * date can start a page. The phase stays put while paging and only changes when
+ * a jump moves another date to the first column.
+ */
+data class DaysGrid(override val dayCount: Int, val phase: Int) : PageGrid {
+    override val pageCount: Int get() = DAYS_PAGE_COUNT
+
+    override fun startForPage(page: Int): LocalDate =
+        DAYS_EPOCH.plus(phase + (page - DAYS_EPOCH_PAGE) * dayCount, DateTimeUnit.DAY)
+
+    override fun pageFor(date: LocalDate): Int =
+        (DAYS_EPOCH_PAGE + Math.floorDiv(DAYS_EPOCH.daysUntil(date) - phase, dayCount))
+            .coerceIn(0, DAYS_PAGE_COUNT - 1)
+
+    companion object {
+        /** The grid of [dayCount]-day pages on which [date] is a page's first day. */
+        fun startingAt(date: LocalDate, dayCount: Int): DaysGrid =
+            DaysGrid(dayCount, Math.floorMod(DAYS_EPOCH.daysUntil(date), dayCount))
+    }
+}
+
+/** Pages the day pager spans — a little under four centuries, centred on [DAY_EPOCH]. */
+internal const val DAY_PAGE_COUNT: Int = 140_000
+
+private const val DAY_EPOCH_PAGE = DAY_PAGE_COUNT / 2
+
+/** The day at [DAY_EPOCH_PAGE]; any date works, it only has to stay fixed. */
+private val DAY_EPOCH = LocalDate(2000, 1, 1)
+
+/** Single days: every date starts a page of its own. */
+data object DayGrid : PageGrid {
+    override val dayCount: Int get() = 1
+    override val pageCount: Int get() = DAY_PAGE_COUNT
+
+    override fun startForPage(page: Int): LocalDate =
+        DAY_EPOCH.plus(page - DAY_EPOCH_PAGE, DateTimeUnit.DAY)
+
+    override fun pageFor(date: LocalDate): Int =
+        (DAY_EPOCH_PAGE + DAY_EPOCH.daysUntil(date)).coerceIn(0, DAY_PAGE_COUNT - 1)
+}
+
+/**
+ * Where the focused date goes when the pager settles on [page] (#184): kept if
+ * the page still shows it, otherwise moved by the pages travelled, so it keeps
+ * its place in the page — the same weekday a week on.
+ */
+internal fun PageGrid.focusOnPage(focus: LocalDate, page: Int): LocalDate {
+    val start = startForPage(page)
+    val end = start.plus(dayCount - 1, DateTimeUnit.DAY)
+    if (focus in start..end) return focus
+    return focus.plus((page - pageFor(focus)) * dayCount, DateTimeUnit.DAY).coerceIn(start, end)
+}

app/src/main/java/de/jeanlucmakiola/calendula/ui/week/WeekViewModel.kt

@@ -9,18 +9,22 @@ import de.jeanlucmakiola.calendula.data.prefs.SettingsPrefs
 import de.jeanlucmakiola.calendula.data.prefs.resolveFirstDay
 import de.jeanlucmakiola.calendula.domain.CalendarSource
 import de.jeanlucmakiola.calendula.domain.EventInstance
+import de.jeanlucmakiola.calendula.domain.displayPriority
 import de.jeanlucmakiola.calendula.domain.FailureReason
 import de.jeanlucmakiola.calendula.domain.calendarListFailure
-import de.jeanlucmakiola.calendula.domain.isDeclined
+import de.jeanlucmakiola.calendula.ui.common.PageStateCache
 import kotlinx.coroutines.CoroutineDispatcher
 import kotlinx.coroutines.ExperimentalCoroutinesApi
+import kotlinx.coroutines.flow.Flow
 import kotlinx.coroutines.flow.MutableStateFlow
 import kotlinx.coroutines.flow.SharingStarted
 import kotlinx.coroutines.flow.StateFlow
 import kotlinx.coroutines.flow.catch
 import kotlinx.coroutines.flow.combine
 import kotlinx.coroutines.flow.distinctUntilChanged
+import kotlinx.coroutines.flow.filterNot
 import kotlinx.coroutines.flow.flatMapLatest
+import kotlinx.coroutines.flow.flowOf
 import kotlinx.coroutines.flow.flowOn
 import kotlinx.coroutines.flow.map
 import kotlinx.coroutines.flow.stateIn
@@ -30,6 +34,7 @@ import kotlinx.datetime.LocalDate
 import kotlinx.datetime.TimeZone
 import kotlinx.datetime.atStartOfDayIn
 import kotlinx.datetime.atTime
+import kotlinx.datetime.daysUntil
 import kotlinx.datetime.minus
 import kotlinx.datetime.plus
 import kotlinx.datetime.toInstant
@@ -38,19 +43,42 @@ import java.util.Locale
 import kotlin.time.Clock
 import kotlin.time.Instant
 import javax.inject.Inject
+import kotlin.math.abs
 
 const val MINUTES_PER_DAY: Int = 24 * 60
 
+/** How far from the requested page [PagedTimelineViewModel.span] keeps other pages cached. */
+private const val SPAN_CACHE_DAYS = 28
+
+/** A run of [count] days from [start]: what one timeline page shows. */
+data class DaySpan(val start: LocalDate, val count: Int)
+
+/** How the pager cuts the calendar, and the page the anchor sits on. */
+data class PagerPosition(val grid: PageGrid, val page: Int)
+
+/** Where [anchor] sits under [rule]. */
+fun positionOf(anchor: LocalDate, rule: (LocalDate) -> PageGrid): PagerPosition =
+    rule(anchor).let { PagerPosition(it, it.pageFor(anchor)) }
+
+/**
+ * A timeline paged in runs of days: the week view, and the multi-day view (#193).
+ * The pager leads; the anchor follows it once it settles, and the grid it is
+ * cut by is derived from the anchor through [gridRule], so a subclass decides
+ * whether a jump re-frames the pages or only moves between them.
+ *
+ * @param gridRule the grid to use for a given anchor, as the settings behind it change.
+ * @param initialRule the rule used until [gridRule] first emits.
+ */
 @OptIn(ExperimentalCoroutinesApi::class)
-@HiltViewModel
-class WeekViewModel @Inject constructor(
+abstract class PagedTimelineViewModel(
     private val repository: CalendarRepository,
     settingsPrefs: SettingsPrefs,
-    @IoDispatcher private val io: CoroutineDispatcher,
+    private val io: CoroutineDispatcher,
+    gridRule: Flow<(LocalDate) -> PageGrid>,
+    initialRule: (LocalDate) -> PageGrid,
 ) : ViewModel() {
 
     private val zone = TimeZone.currentSystemDefault()
-    private val locale: Locale = Locale.getDefault()
 
     /** Whether to fade events that have already finished (display concern only). */
     val dimCompletedEvents: StateFlow<Boolean> = settingsPrefs.dimCompletedEvents
@@ -63,76 +91,91 @@ class WeekViewModel @Inject constructor(
     private val todayDate: LocalDate
         get() = Clock.System.now().toLocalDateTime(zone).date
 
-    /** First day of the week, from the Settings preference (AUTO → locale). */
-    private val weekStart: StateFlow<DayOfWeek> = settingsPrefs.weekStart
-        .map { it.resolveFirstDay(locale) }
-        .stateIn(
-            scope = viewModelScope,
-            started = SharingStarted.WhileSubscribed(5_000L),
-            initialValue = DayOfWeek.MONDAY,
-        )
-
-    // Anchor is a representative day inside the visible week; the actual week
-    // start is derived against [weekStart], so changing the first-day preference
-    // re-frames the same week instead of jumping.
+    // A day on the visible page; the page itself comes from the grid, so a
+    // settings change re-frames the same days instead of jumping.
     private val _anchor = MutableStateFlow(todayDate)
+    val anchor: StateFlow<LocalDate> = _anchor
 
-    val weekStartDate: StateFlow<LocalDate> =
-        combine(_anchor, weekStart) { anchor, ws -> anchor.startOfWeek(ws) }
+    /**
+     * The grid for a given anchor, held eagerly so a screen can place its pager
+     * on its very first frame rather than a frame after the anchor moved.
+     */
+    val rule: StateFlow<(LocalDate) -> PageGrid> =
+        gridRule.stateIn(viewModelScope, SharingStarted.Eagerly, initialRule)
+
+    private val position: StateFlow<PagerPosition> =
+        combine(_anchor, rule) { anchor, rule -> positionOf(anchor, rule) }
+            .distinctUntilChanged()
             .stateIn(
                 scope = viewModelScope,
                 started = SharingStarted.WhileSubscribed(5_000L),
-                initialValue = todayDate.startOfWeek(DayOfWeek.MONDAY),
+                initialValue = positionOf(todayDate, initialRule),
             )
 
+    /**
+     * The anchor page's state. Once loaded it never falls back to [WeekUiState.Loading]:
+     * moving the anchor keeps the last result until the new page arrives, since
+     * the pages draw their own days and this only gates the failure screen.
+     */
     val state: StateFlow<WeekUiState> =
-        combine(_anchor, weekStart) { anchor, ws -> anchor.startOfWeek(ws) }
+        position.map { DaySpan(it.grid.startForPage(it.page), it.grid.dayCount) }
             .distinctUntilChanged()
-            .flatMapLatest { start ->
-                val range = weekRange(start, zone)
-                combine(
-                    repository.calendars(),
-                    repository.instances(range),
-                ) { calendars, instances ->
-                    buildState(start, calendars, instances)
-                }
-            }
+            .flatMapLatest { span -> span(span).filterNot { it is WeekUiState.Loading } }
             .catch { emit(WeekUiState.Failure(FailureReason.ProviderUnavailable)) }
-            .flowOn(io)
             .stateIn(
                 scope = viewModelScope,
                 started = SharingStarted.WhileSubscribed(5_000L),
                 initialValue = WeekUiState.Loading,
             )
 
-    fun goToPrev() {
-        _anchor.value = _anchor.value.minus(7, DateTimeUnit.DAY)
+    private val spans = PageStateCache<DaySpan, WeekUiState>(
+        scope = viewModelScope,
+        initial = WeekUiState.Loading,
+        // Far enough to cover the pages either side and a swipe back, so paging
+        // through a year doesn't keep a year of queries around.
+        keep = { cached, requested ->
+            cached.count == requested.count &&
+                abs(cached.start.daysUntil(requested.start)) <= SPAN_CACHE_DAYS
+        },
+    ) { span ->
+        combine(
+            repository.calendars(),
+            repository.instances(spanRange(span.start, span.count, zone)),
+        ) { calendars, instances ->
+            buildState(span, calendars, instances)
+        }
+            .catch { emit(WeekUiState.Failure(FailureReason.ProviderUnavailable)) }
+            .flowOn(io)
     }
 
-    fun goToNext() {
-        _anchor.value = _anchor.value.plus(7, DateTimeUnit.DAY)
+    /** The days of one page, shared between that page and [state]. Main thread only. */
+    fun span(span: DaySpan): StateFlow<WeekUiState> = spans.get(span)
+
+    /** The pager came to rest on [page]; follow it unless it is already the anchor's. */
+    fun onPageSettled(page: Int) {
+        val grid = rule.value(_anchor.value)
+        if (grid.pageFor(_anchor.value) != page) _anchor.value = grid.startForPage(page)
     }
 
-    fun goToToday() {
-        _anchor.value = todayDate
-    }
-
-    /** Jump to the week containing [date] (drawer jump-to-date). */
-    fun goToDate(date: LocalDate) {
+    /** Move the anchor to [date], re-framing the pages if the grid depends on it. */
+    fun jumpTo(date: LocalDate) {
         _anchor.value = date
     }
 
+    fun goToToday() = jumpTo(todayDate)
+    fun goToDate(date: LocalDate) = jumpTo(date)
+
     private fun buildState(
-        start: LocalDate,
+        span: DaySpan,
         calendars: List<CalendarSource>,
         instances: List<EventInstance>,
     ): WeekUiState {
         calendarListFailure(calendars)?.let { return WeekUiState.Failure(it) }
-        val days = (0 until 7).map { start.plus(it, DateTimeUnit.DAY) }
+        val days = (0 until span.count).map { span.start.plus(it, DateTimeUnit.DAY) }
         val allDay = instances.filter { it.isAllDay }
         val timed = instances.filterNot { it.isAllDay }
         return WeekUiState.Success(
-            weekStart = start,
+            weekStart = span.start,
             today = todayDate,
             days = days,
             allDaySpans = layoutAllDay(allDay, days, zone),
@@ -141,6 +184,58 @@ class WeekViewModel @Inject constructor(
     }
 }
 
+/** Whole weeks, starting on the first day from Settings (AUTO → locale). */
+@HiltViewModel
+class WeekViewModel @Inject constructor(
+    repository: CalendarRepository,
+    settingsPrefs: SettingsPrefs,
+    @IoDispatcher io: CoroutineDispatcher,
+) : PagedTimelineViewModel(
+    repository = repository,
+    settingsPrefs = settingsPrefs,
+    io = io,
+    gridRule = settingsPrefs.weekStart.map { pref ->
+        val grid = WeekGrid(pref.resolveFirstDay(Locale.getDefault()))
+        val rule: (LocalDate) -> PageGrid = { grid }
+        rule
+    },
+    initialRule = { WeekGrid(DayOfWeek.MONDAY) },
+)
+
+/**
+ * The multi-day view (#193): runs of the day count from Settings, with the
+ * anchor always a page's first day, so today — or a date jumped to — opens in
+ * the first column.
+ */
+@HiltViewModel
+class MultiDayViewModel @Inject constructor(
+    repository: CalendarRepository,
+    settingsPrefs: SettingsPrefs,
+    @IoDispatcher io: CoroutineDispatcher,
+) : PagedTimelineViewModel(
+    repository = repository,
+    settingsPrefs = settingsPrefs,
+    io = io,
+    gridRule = settingsPrefs.multiDayCount.map { count ->
+        { anchor: LocalDate -> DaysGrid.startingAt(anchor, count) }
+    },
+    initialRule = { DaysGrid.startingAt(it, SettingsPrefs.DEFAULT_MULTI_DAY_COUNT) },
+)
+
+/** The day view: the timeline one day at a time. */
+@HiltViewModel
+class DayViewModel @Inject constructor(
+    repository: CalendarRepository,
+    settingsPrefs: SettingsPrefs,
+    @IoDispatcher io: CoroutineDispatcher,
+) : PagedTimelineViewModel(
+    repository = repository,
+    settingsPrefs = settingsPrefs,
+    io = io,
+    gridRule = flowOf { _: LocalDate -> DayGrid },
+    initialRule = { DayGrid },
+)
+
 /**
  * Lay out all-day events as connected horizontal spans across the visible week.
  * Each event becomes one [AllDaySpan] from its first to its last covered column;
@@ -160,7 +255,13 @@ internal fun layoutAllDay(
         }
         // Declined bars are packed after every other one, so on any day they
         // cover they land in a lane below it (#230).
-        .sortedWith(compareBy({ it.event.isDeclined }, { it.startCol }, { it.endCol }))
+        .sortedWith(
+            compareBy<Raw> { it.event.displayPriority(zone) }
+                .thenBy { it.startCol }
+                .thenBy { it.endCol }
+                .thenBy { it.event.start }
+                .thenBy { it.event.instanceId },
+        )
 
     // What each lane already holds, rather than just how far right it reaches.
     // A single "last occupied column" only answers correctly while spans arrive
@@ -194,10 +295,10 @@ internal fun LocalDate.startOfWeek(weekStart: DayOfWeek): LocalDate {
     return minus(offset, DateTimeUnit.DAY)
 }
 
-/** Half-open instant range covering the seven days starting at [start]. */
-internal fun weekRange(start: LocalDate, zone: TimeZone): ClosedRange<Instant> {
+/** Instant range covering the [count] days starting at [start]. */
+internal fun spanRange(start: LocalDate, count: Int, zone: TimeZone): ClosedRange<Instant> {
     val from = start.atStartOfDayIn(zone)
-    val to = start.plus(6, DateTimeUnit.DAY).atTime(23, 59, 59).toInstant(zone)
+    val to = start.plus(count - 1, DateTimeUnit.DAY).atTime(23, 59, 59).toInstant(zone)
     return from..to
 }
 

app/src/main/java/de/jeanlucmakiola/calendula/ui/week/WeekViewPreview.kt

@@ -32,10 +32,13 @@ internal fun WeekViewPreview(
     weekStart: DayOfWeek,
     height: Dp,
     modifier: Modifier = Modifier,
+    dayCount: Int = 7,
 ) {
     val zone = remember { TimeZone.currentSystemDefault() }
     val today = remember(zone) { Clock.System.now().toLocalDateTime(zone).date }
-    val state = remember(today, weekStart, zone) { sampleWeekState(today, weekStart, zone) }
+    val state = remember(today, weekStart, dayCount, zone) {
+        sampleWeekState(today, weekStart, dayCount, zone)
+    }
     val scrollState = rememberScrollState()
     LaunchedEffect(Unit) {
         snapshotFlow { scrollState.maxValue }.first { it > 0 }
@@ -46,6 +49,8 @@ internal fun WeekViewPreview(
     ScaledViewPreview(height = height, modifier = modifier) {
         WeekSuccess(
             state = state,
+            showWeekNumber = dayCount == 7,
+            headerBias = if (dayCount == 1) TimelineKind.Day.headerBias else 0f,
             scrollState = scrollState,
             allDayHeight = state.allDayStripHeight(),
             dragController = rememberTimelineDragController(),
@@ -61,10 +66,11 @@ internal fun WeekViewPreview(
 private fun sampleWeekState(
     today: LocalDate,
     weekStart: DayOfWeek,
+    dayCount: Int,
     zone: TimeZone,
 ): WeekUiState.Success {
-    val start = today.startOfWeek(weekStart)
-    val days = (0 until 7).map { start.plus(it, DateTimeUnit.DAY) }
+    val start = if (dayCount == 7) today.startOfWeek(weekStart) else today
+    val days = (0 until dayCount).map { start.plus(it, DateTimeUnit.DAY) }
     val events = sampleTimelineEvents(days, today, zone)
     return WeekUiState.Success(
         weekStart = start,