@justanarthur/modo-ui 0.6.0-canary.9 → 0.6.0

package/components/inputs/combobox/remote-demo.tsx

@@ -1,105 +0,0 @@
-/*
- * Local addition (not part of Fluid Functionalism): the docs stage of the
- * Combobox page's remote example. A fake server answers each query after a
- * beat, a page at a time, so the example stays hook-free.
- */
-
-import { useEffect, useState } from 'react'
-import Button from '../../button'
-import Combobox from './index'
-
-const CITIES = [
-  'Amsterdam',
-  'Athens',
-  'Barcelona',
-  'Berlin',
-  'Bratislava',
-  'Brussels',
-  'Bucharest',
-  'Budapest',
-  'Copenhagen',
-  'Dublin',
-  'Helsinki',
-  'Kyiv',
-  'Lisbon',
-  'Ljubljana',
-  'London',
-  'Madrid',
-  'Oslo',
-  'Paris',
-  'Prague',
-  'Riga',
-  'Rome',
-  'Sofia',
-  'Stockholm',
-  'Tallinn',
-  'Vienna',
-  'Vilnius',
-  'Warsaw',
-  'Zagreb',
-]
-
-const PAGE = 6
-
-interface RemoteDemoProps {
-  /** How long the fake server takes, in ms. Defaults to `600`. */
-  latency?: number
-}
-
-export default function RemoteDemo({ latency = 600 }: RemoteDemoProps) {
-  const [query, setQuery] = useState('')
-  const [limit, setLimit] = useState(PAGE)
-  const [items, setItems] = useState<string[]>([])
-  const [total, setTotal] = useState(0)
-  const [loading, setLoading] = useState(true)
-  // Base UI's change details tell typing from a pick that rewrites the field.
-  const [reason, setReason] = useState<string>()
-
-  useEffect(() => {
-    setLoading(true)
-    const timer = setTimeout(() => {
-      const matches = CITIES.filter(city => city.toLowerCase().includes(query.trim().toLowerCase()))
-      setItems(matches.slice(0, limit))
-      setTotal(matches.length)
-      setLoading(false)
-    }, latency)
-    return () => clearTimeout(timer)
-  }, [query, limit, latency])
-
-  return (
-    <div className="w-72 max-w-full">
-      <Combobox
-        items={items}
-        filter={null}
-        loading={loading}
-        inputValue={query}
-        onInputValueChange={(next, details) => {
-          setQuery(next)
-          setLimit(PAGE)
-          setReason(details.reason)
-        }}
-      >
-        <Combobox.Input placeholder="Search a city…" />
-        <Combobox.Content
-          footer={
-            items.length < total ? (
-              <Button variant="ghost" size="compact" className="w-full" onClick={() => setLimit(limit + PAGE)}>
-                Load more ({total - items.length})
-              </Button>
-            ) : undefined
-          }
-        >
-          <Combobox.Empty>No city matches.</Combobox.Empty>
-          <Combobox.List>
-            {item => (
-              <Combobox.Item key={String(item)} value={String(item)}>
-                {String(item)}
-              </Combobox.Item>
-            )}
-          </Combobox.List>
-        </Combobox.Content>
-      </Combobox>
-      {reason && <p className="mt-1 pl-3 text-caption text-muted-foreground">Last text change: {reason}</p>}
-    </div>
-  )
-}

package/components/inputs/date-time/calendar/examples.mdx

@@ -1,45 +0,0 @@
-import Calendar from './index'
-import { de } from 'react-day-picker/locale'
-
-# Single day
-
-Scroll through the months, or jump with the month and year columns.
-
-<Calendar mode="single" selected={new Date(2026, 9, 9)} />
-
-# Range
-
-`mode="range"` picks a span of days.
-
-<Calendar mode="range" selected={{ from: new Date(2026, 9, 9), to: new Date(2026, 9, 15) }} />
-
-# German
-
-A react-day-picker locale names the months and weekdays and starts the week on its first day.
-
-<Calendar mode="single" locale={de} selected={new Date(2026, 9, 9)} />
-
-# Columns first
-
-`columnsSide="start"` stands the year and month columns before the days.
-
-<Calendar mode="single" columnsSide="start" selected={new Date(2026, 9, 9)} />
-
-# Narrow
-
-Without room for the columns, they turn into strips above the days.
-
-<div className="w-72 max-w-full">
-  <Calendar mode="single" selected={new Date(2026, 9, 9)} />
-</div>
-
-# Fixed height
-
-A height class on the calendar sets its height in both layouts, with the columns beside the days or above them. The calendar needs a bounded height for this: without one every month in the window renders and it opens on the window start.
-
-<div className="flex flex-wrap items-start gap-4">
-  <Calendar mode="single" className="h-72" selected={new Date(2026, 9, 9)} />
-  <div className="w-72 max-w-full">
-    <Calendar mode="single" className="h-72" selected={new Date(2026, 9, 9)} />
-  </div>
-</div>

package/components/inputs/date-time/calendar/index.tsx

@@ -1,370 +0,0 @@
-/*
- * Local addition (not part of Fluid Functionalism): a scrolling calendar on
- * react-day-picker (daypicker.dev), styled through its `classNames` and
- * custom components with DS utilities (its stylesheet isn't loaded). Props
- * pass through to DayPicker, the way shadcn's Calendar does.
- */
-
-import {
-  addDays,
-  addYears,
-  endOfYear,
-  format,
-  isSameYear,
-  type Locale,
-  startOfMonth,
-  startOfWeek,
-  startOfYear,
-} from 'date-fns'
-import {
-  Fragment,
-  type ReactElement,
-  type ReactNode,
-  useCallback,
-  useEffect,
-  useLayoutEffect,
-  useMemo,
-  useRef,
-  useState,
-} from 'react'
-import { type DayButtonProps, DayPicker, type DayPickerProps, type DayProps, type MonthProps } from 'react-day-picker'
-import { defaultLocale, fieldLabel } from '../../../../lib/date-locale'
-import { dividedColumns, ScrollColumn } from '../../../../lib/scroll-column'
-import { useShape } from '../../../../lib/shape-context'
-import { type SizeVariant, useSize } from '../../../../lib/size-context'
-import { cn } from '../../../../lib/utils'
-import { SizeProvider } from '../../../../primitives/sizes'
-import { monthKey, useMonthWindow } from './use-month-window'
-
-const WEEKEND = { dayOfWeek: [0, 6] }
-
-/** The day picked for the columns' dot and the first scroll: a single date, or a range's start. */
-function pickedDate(props: DayPickerProps): Date | undefined {
-  if (props.mode === 'single') return props.selected
-  if (props.mode === 'range') return props.selected?.from
-  return undefined
-}
-
-/** Stamps each month with its key, so the window can find and measure it. */
-function Month({ calendarMonth, displayIndex: _, ...props }: MonthProps) {
-  return <div {...props} data-calendar-month={monthKey(calendarMonth.date)} />
-}
-
-/** The day's cell: draws a range's band behind the pills. */
-function Day({ day: _, modifiers, className, ...props }: DayProps) {
-  const start = modifiers.range_start && !modifiers.range_end
-  const end = modifiers.range_end && !modifiers.range_start
-  return (
-    <td
-      {...props}
-      className={cn(
-        'relative p-0',
-        // FF's fills: a committed span is `bg-active` (Checkbox's merged
-        // rows), the preview one step lighter at `bg-hover`.
-        !modifiers.hidden && modifiers.range_middle && 'bg-active',
-        !modifiers.hidden && modifiers.preview && !modifiers.selected && 'bg-hover',
-        (start || end) && 'before:absolute before:inset-y-0 before:bg-active',
-        start && 'before:start-1/2 before:end-0',
-        end && 'before:start-0 before:end-1/2',
-        className,
-      )}
-    />
-  )
-}
-
-function DayButton({ day: _, modifiers, className, ...props }: DayButtonProps) {
-  const ref = useRef<HTMLButtonElement>(null)
-  // DayPicker's own DayButton does this: keyboard focus follows `focused`.
-  useEffect(() => {
-    if (modifiers.focused) ref.current?.focus()
-  }, [modifiers.focused])
-  const shape = useShape()
-  const sizeClasses = useSize()
-  const pill = modifiers.selected && !modifiers.range_middle
-
-  return (
-    <button
-      ref={ref}
-      {...props}
-      className={cn(
-        'relative flex items-center justify-center tabular-nums outline-none cursor-pointer',
-        'transition-[color,background-color] duration-fast focus-visible:ring-1 focus-visible:ring-focus-ring',
-        'disabled:opacity-50 disabled:cursor-default',
-        sizeClasses.variant === 'compact' ? 'size-7' : 'size-9',
-        sizeClasses.text,
-        shape.item,
-        // FF keeps red for errors: weekends step back to the muted text.
-        modifiers.weekend && 'text-muted-foreground',
-        modifiers.today &&
-          'after:absolute after:bottom-1 after:left-1/2 after:size-1 after:-translate-x-1/2 after:rounded-full after:bg-current',
-        // Foreground is FF's primary (its primary button's fill), text-background on it.
-        pill ? 'bg-foreground text-background weight-semibold hover:bg-foreground/90' : 'enabled:hover:bg-hover',
-        className,
-      )}
-    />
-  )
-}
-
-/** The Calendar's own props, beside DayPicker's. */
-interface CalendarOwnProps {
-  /** The locale: a react-day-picker / date-fns locale (`import { de } from 'react-day-picker/locale'`). Names months and weekdays, picks the first day of the week. Defaults to `enUS`. */
-  locale?: Locale
-  /** Pins the calendar to one step of the size ladder (36px days, compact 28px). Defaults to the surrounding SizeProvider. */
-  size?: SizeVariant
-  /** Which side of the days the month and year columns stand on; the month column keeps next to the days. Defaults to `'end'`. */
-  columnsSide?: 'start' | 'end'
-  /** Accessible names of the month and year columns (`{ month, year }`). Default to the locale's names for the fields. */
-  columnLabels?: { month?: string; year?: string }
-  /** More columns, given the layout's orientation — the date picker's hours and minutes. */
-  extraColumns?: (orientation: 'vertical' | 'horizontal') => ReactNode
-  /** Which side of the days the extra columns stand on, outside the month and year columns when they share it. Defaults to `'end'`. */
-  extraColumnsSide?: 'start' | 'end'
-  /** Classes for the calendar's box. */
-  className?: string
-}
-
-/** DayPicker's props (`mode`, `selected`, `onSelect`, matchers…) and the Calendar's own. */
-type CalendarProps = DayPickerProps & CalendarOwnProps
-
-/**
- * A calendar that scrolls through the months instead of paging, with month
- * and year columns to jump by.
- *
- * Months run on in one list, each under its name, with the weekday row pinned
- * above them; weekends step back to the muted text and today carries a dot. The month column
- * marks the month being read and the year column its year, so either works
- * as a scrollbar you can click: a month or a year scrolls the calendar there.
- * The picked day, month and year show a filled pill or a dot. The columns
- * stand after the days by default; `columnsSide="start"` puts them before
- * (and `extraColumnsSide` places any extra ones). When the calendar is too
- * narrow for them, they turn into strips above it. The list renders a window of months and moves it as you scroll, so the
- * range is as long as `startMonth` / `endMonth` allow (100 years back and 50
- * ahead by default).
- *
- * It is react-day-picker's DayPicker underneath: `mode` (`'single'`,
- * `'range'`), `selected` / `onSelect`, `disabled` and `hidden` matchers,
- * `modifiers`, `weekStartsOn`, `dir` and the other DayPicker props pass
- * through. Its navigation props don't apply: the calendar scrolls.
- * DatePicker and DateRangePicker put it in a field.
- *
- * @example {@include ./examples.mdx}
- */
-function Calendar({
-  locale = defaultLocale,
-  size,
-  columnsSide = 'end',
-  columnLabels,
-  extraColumns,
-  extraColumnsSide = 'end',
-  className,
-  ...props
-}: CalendarProps): ReactElement {
-  const sizeClasses = useSize(size)
-  const picked = pickedDate(props)
-  const today = useMemo(() => new Date(), [])
-  const start = startOfMonth(props.startMonth ?? startOfYear(addYears(today, -100)))
-  const end = startOfMonth(props.endMonth ?? endOfYear(addYears(today, 50)))
-  const anchor = picked ?? props.month ?? props.defaultMonth ?? today
-  const scroll = useMonthWindow(start, end, anchor)
-  const { jumpTo, visible } = scroll
-
-  // Before the first measure, the month the list opens on.
-  const currentKey = scroll.current ?? monthKey(anchor)
-  const yearInView = Number(currentKey.slice(0, 4))
-  const monthInView = Number(currentKey.slice(5, 7)) - 1
-
-  // A pick from outside the calendar (typed into a picker's field) scrolls to it.
-  const pickedTime = picked?.getTime()
-  const pickedRef = useRef(pickedTime)
-  useEffect(() => {
-    if (pickedTime === pickedRef.current) return
-    pickedRef.current = pickedTime
-    if (pickedTime !== undefined && !visible.includes(monthKey(new Date(pickedTime)))) jumpTo(new Date(pickedTime))
-  }, [pickedTime, jumpTo, visible])
-
-  // The columns stand beside the grid while they fit, and turn into strips
-  // above it when they don't. The width they need is remembered, so the
-  // strips only turn back once there is room again.
-  const rootRef = useRef<HTMLDivElement>(null)
-  const [wide, setWide] = useState(true)
-  const needed = useRef(0)
-  useLayoutEffect(() => {
-    const root = rootRef.current
-    if (!root) return
-    const check = () => {
-      if (wide && root.scrollWidth > root.clientWidth + 1) {
-        needed.current = root.scrollWidth
-        setWide(false)
-      } else if (!wide && root.clientWidth >= needed.current) setWide(true)
-    }
-    check()
-    const observer = new ResizeObserver(check)
-    observer.observe(root)
-    return () => observer.disconnect()
-  }, [wide])
-
-  // Turning changes the grid's height: put the picked day (or today) back in the middle.
-  const turned = useRef(wide)
-  useLayoutEffect(() => {
-    if (turned.current === wide) return
-    turned.current = wide
-    scroll.centreDay(picked ?? today)
-  })
-
-  // Range picking previews the span under the pointer before the second click.
-  const [hovered, setHovered] = useState<Date>()
-  const from = props.mode === 'range' ? props.selected?.from : undefined
-  const previewing = from && props.mode === 'range' && !props.selected?.to && hovered
-  const preview = previewing ? (hovered < from ? { from: hovered, to: from } : { from, to: hovered }) : false
-
-  const weekStartsOn = props.weekStartsOn ?? locale.options?.weekStartsOn ?? 0
-  const weekdays = useMemo(() => {
-    const first = startOfWeek(today, { weekStartsOn })
-    return Array.from({ length: 7 }, (_, i) => addDays(first, i))
-  }, [today, weekStartsOn])
-
-  const months = useMemo(
-    () =>
-      Array.from({ length: 12 }, (_, m) => ({
-        value: m,
-        label: format(new Date(2000, m, 1), 'LLL', { locale }),
-        disabled: new Date(yearInView, m, 1) < start || new Date(yearInView, m, 1) > end,
-      })),
-    [locale, yearInView, start.getTime(), end.getTime()],
-  )
-  const years = useMemo(
-    () =>
-      Array.from({ length: end.getFullYear() - start.getFullYear() + 1 }, (_, i) => {
-        const year = start.getFullYear() + i
-        return { value: year, label: String(year) }
-      }),
-    [start.getFullYear(), end.getFullYear()],
-  )
-
-  const jumpToYear = useCallback((year: number) => jumpTo(new Date(year, monthInView, 1)), [jumpTo, monthInView])
-  const orientation = wide ? 'vertical' : 'horizontal'
-  const column = wide ? 'w-16 shrink-0' : 'w-full'
-
-  const monthColumn = (
-    <ScrollColumn
-      key="month"
-      label={columnLabels?.month ?? fieldLabel(locale, 'month')}
-      options={months}
-      value={picked && isSameYear(picked, new Date(yearInView, 0, 1)) ? picked.getMonth() : null}
-      follow={monthInView}
-      inView={m => m === monthInView}
-      onValueChange={m => jumpTo(new Date(yearInView, m, 1))}
-      orientation={orientation}
-      className={column}
-    />
-  )
-  const yearColumn = (
-    <ScrollColumn
-      key="year"
-      label={columnLabels?.year ?? fieldLabel(locale, 'year')}
-      options={years}
-      value={picked?.getFullYear() ?? null}
-      follow={yearInView}
-      inView={y => y === yearInView}
-      onValueChange={jumpToYear}
-      orientation={orientation}
-      className={column}
-    />
-  )
-  const extras = extraColumns?.(orientation)
-  // Outward from the days: the month column, the year column, then the extras.
-  // Keyed fragments, so a side's children keep their identity as the extras come and go.
-  const extrasPart = extras ? <Fragment key="extras">{extras}</Fragment> : null
-  const before = [extraColumnsSide === 'start' && extrasPart, columnsSide === 'start' && [yearColumn, monthColumn]]
-  const after = [columnsSide === 'end' && [monthColumn, yearColumn], extraColumnsSide === 'end' && extrasPart]
-  const side = (place: 'start' | 'end') =>
-    wide
-      ? cn(dividedColumns, 'h-full shrink-0 border-border', place === 'start' ? 'border-e' : 'border-s')
-      : 'order-first flex w-full flex-col [&>*]:border-b [&>*]:border-border'
-
-  const grid = (
-    <div className={cn('flex min-h-0 shrink-0 flex-col', wide ? 'h-full' : 'flex-1 self-center')}>
-      <div aria-hidden className="flex border-b border-border px-1 pb-1">
-        {weekdays.map(day => (
-          <span
-            key={day.getDay()}
-            className={cn(
-              'flex items-center justify-center text-caption',
-              sizeClasses.variant === 'compact' ? 'w-7' : 'w-9',
-              'text-muted-foreground',
-            )}
-          >
-            {format(day, 'EEEEEE', { locale })}
-          </span>
-        ))}
-      </div>
-      <div
-        ref={scroll.scrollerRef}
-        onScroll={scroll.measure}
-        className="relative min-h-0 flex-1 overflow-y-auto overflow-x-hidden px-1 scrollbar-hide scroll-fade [--scroll-fade-size:16px] [overflow-anchor:none]"
-      >
-        <DayPicker
-          {...props}
-          locale={locale}
-          month={scroll.first}
-          numberOfMonths={scroll.count}
-          startMonth={start}
-          endMonth={end}
-          onMonthChange={scroll.recentre}
-          hideNavigation
-          hideWeekdays
-          showOutsideDays={false}
-          modifiers={{ weekend: WEEKEND, preview, ...props.modifiers }}
-          onDayMouseEnter={(date, modifiers, e) => {
-            setHovered(date)
-            props.onDayMouseEnter?.(date, modifiers, e)
-          }}
-          onDayMouseLeave={(date, modifiers, e) => {
-            setHovered(undefined)
-            props.onDayMouseLeave?.(date, modifiers, e)
-          }}
-          formatters={{
-            // The current year's months go by name alone, the rest with their year.
-            formatCaption: month => format(month, isSameYear(month, today) ? 'LLLL' : 'LLLL y', { locale }),
-            ...props.formatters,
-          }}
-          components={{ Month, Day, DayButton, ...props.components }}
-          classNames={{
-            months: 'flex flex-col',
-            month: 'pb-2',
-            month_caption: cn(
-              'px-2 pt-2 pb-1 text-subtitle weight-semibold',
-              sizeClasses.variant === 'compact' && 'text-subtitle-compact',
-            ),
-            month_grid: 'border-collapse',
-            ...props.classNames,
-          }}
-        />
-      </div>
-    </div>
-  )
-
-  const content = (
-    <div
-      ref={rootRef}
-      dir={props.dir}
-      className={cn(
-        'flex w-max max-w-full overflow-hidden',
-        wide ? 'h-80 flex-row' : 'h-[min(30rem,65dvh)] flex-col',
-        className,
-      )}
-    >
-      {/* Strips are reordered by CSS, not in the tree, so turning doesn't remount the grid. */}
-      {before.some(Boolean) ? <div className={side('start')}>{before}</div> : null}
-      {grid}
-      {after.some(Boolean) ? <div className={side('end')}>{after}</div> : null}
-    </div>
-  )
-
-  return size ? <SizeProvider size={size}>{content}</SizeProvider> : content
-}
-
-export type { CalendarProps }
-export { Calendar }
-
-export default Calendar

package/components/inputs/date-time/calendar/use-month-window.ts

@@ -1,173 +0,0 @@
-import { addMonths, differenceInCalendarMonths, format, startOfMonth } from 'date-fns'
-import { useCallback, useLayoutEffect, useRef, useState } from 'react'
-
-/** Months rendered at once, and how far the window moves when the reader nears its edge. */
-const WINDOW = 25
-const SHIFT = 12
-
-const monthKey = (date: Date) => format(date, 'yyyy-MM')
-
-/** A rendered month's element in the scroller (the Calendar's `Month` stamps the key). */
-const findMonth = (scroller: HTMLElement, key: string) =>
-  scroller.querySelector<HTMLElement>(`[data-calendar-month="${key}"]`)
-
-/** What the next layout pass scrolls to: back to where the reader was, a month's top, or a day in the middle. */
-interface Pending {
-  keep?: { key: string; delta: number }
-  month?: string
-  day?: Date
-}
-
-/**
- * The calendar's scroll: an endless-feeling list of months between `start` and
- * `end` that renders only `WINDOW` of them. Nearing either rendered edge moves
- * the window by `SHIFT` months and puts the reader back on the month they were
- * reading. Also reports the months in view, for the month and year columns.
- */
-function useMonthWindow(start: Date, end: Date, anchor: Date) {
-  const total = differenceInCalendarMonths(end, start) + 1
-  const count = Math.min(WINDOW, total)
-  const startTime = start.getTime()
-
-  const clamp = useCallback(
-    (first: Date) => {
-      const from = new Date(startTime)
-      const last = addMonths(from, total - count)
-      return first < from ? from : first > last ? last : startOfMonth(first)
-    },
-    [startTime, total, count],
-  )
-
-  const [first, setFirst] = useState(() => clamp(addMonths(startOfMonth(anchor), -Math.floor(WINDOW / 2))))
-  const [visible, setVisible] = useState<string[]>([])
-  // The month taking up most of the view: the one the columns mark.
-  const [current, setCurrent] = useState<string>()
-  const scrollerRef = useRef<HTMLDivElement>(null)
-  const firstRef = useRef(first)
-  firstRef.current = first
-  const pending = useRef<Pending | null>({ day: anchor })
-  // Set while a smooth jump runs: moving the window under it would cut it short.
-  const settling = useRef(false)
-
-  const topMonth = useCallback(() => {
-    const scroller = scrollerRef.current
-    if (!scroller) return undefined
-    const top = scroller.scrollTop
-    return [...scroller.querySelectorAll<HTMLElement>('[data-calendar-month]')].find(
-      el => el.offsetTop + el.offsetHeight > top,
-    )
-  }, [])
-
-  const moveWindow = useCallback(
-    (nextFirst: Date, target?: string) => {
-      const next = clamp(nextFirst)
-      if (next.getTime() === firstRef.current.getTime()) return
-      const scroller = scrollerRef.current
-      const top = topMonth()
-      pending.current = {
-        month: target,
-        keep:
-          scroller && top
-            ? { key: top.dataset.calendarMonth ?? '', delta: top.offsetTop - scroller.scrollTop }
-            : undefined,
-      }
-      setFirst(next)
-    },
-    [clamp, topMonth],
-  )
-
-  /** Scrolls a rendered day into the middle of the list, at once. */
-  const centreDay = useCallback((date: Date) => {
-    const scroller = scrollerRef.current
-    const day = scroller?.querySelector<HTMLElement>(`[data-day="${format(date, 'yyyy-MM-dd')}"]`)
-    if (!scroller || !day) return
-    const s = scroller.getBoundingClientRect()
-    const d = day.getBoundingClientRect()
-    // In layout pixels: the panel may still be scaled by its opening morph.
-    const scale = s.height / scroller.offsetHeight || 1
-    scroller.scrollTop += (d.top - s.top) / scale - (scroller.clientHeight - day.offsetHeight) / 2
-  }, [])
-
-  /** Reports the months in view and, when `move` is set, shifts the window if the reader is near its edge. */
-  const read = useCallback(
-    (move: boolean) => {
-      const scroller = scrollerRef.current
-      if (!scroller) return
-      const top = scroller.scrollTop
-      const bottom = top + scroller.clientHeight
-      const shown = [...scroller.querySelectorAll<HTMLElement>('[data-calendar-month]')]
-        .map(el => ({
-          key: el.dataset.calendarMonth ?? '',
-          height: Math.min(bottom, el.offsetTop + el.offsetHeight) - Math.max(top, el.offsetTop),
-        }))
-        .filter(m => m.height > 0)
-      const inView = shown.map(m => m.key)
-      setVisible(prev => (prev.join() === inView.join() ? prev : inView))
-      setCurrent(
-        shown.reduce<(typeof shown)[number] | undefined>((a, m) => (a && a.height >= m.height ? a : m), undefined)?.key,
-      )
-      if (!move || settling.current) return
-
-      // A reader this close to an edge moves the window. The margin is capped well inside what a shift
-      // gives back, so a list with no height of its own (a height class the stylesheet lacks, `h-auto`)
-      // can't keep the reader "near" an edge after every move and walk the window to the end of the range.
-      const margin = Math.min(scroller.clientHeight, scroller.scrollHeight / 4)
-      if (top < margin) moveWindow(addMonths(firstRef.current, -SHIFT))
-      else if (scroller.scrollHeight - bottom < margin) moveWindow(addMonths(firstRef.current, SHIFT))
-    },
-    [moveWindow],
-  )
-  const measure = useCallback(() => read(true), [read])
-
-  // Runs after the window moves (and on mount) to restore the reader's place.
-  useLayoutEffect(() => {
-    const scroller = scrollerRef.current
-    const p = pending.current
-    pending.current = null
-    if (!scroller || !p) return
-    const target = p.month && findMonth(scroller, p.month)
-    const kept = p.keep && findMonth(scroller, p.keep.key)
-    if (target) scroller.scrollTop = target.offsetTop
-    else if (kept && p.keep) scroller.scrollTop = kept.offsetTop - p.keep.delta
-    else if (p.day) centreDay(p.day)
-    // Reports only: moving the window from here would nest one update inside the last, and
-    // the scroll the restore causes calls `measure` for the next shift.
-    read(false)
-  }, [first])
-
-  /** Scrolls a month to the top: smoothly when it is rendered, else by moving the window to it. */
-  const jumpTo = useCallback(
-    (month: Date, behavior: ScrollBehavior = 'smooth') => {
-      const scroller = scrollerRef.current
-      const key = monthKey(month)
-      const el = scroller && findMonth(scroller, key)
-      if (!scroller || !el) {
-        moveWindow(addMonths(startOfMonth(month), -Math.floor(WINDOW / 2)), key)
-        return
-      }
-      if (behavior === 'smooth') {
-        settling.current = true
-        const done = () => {
-          settling.current = false
-          scroller.removeEventListener('scrollend', done)
-          measure()
-        }
-        scroller.addEventListener('scrollend', done)
-        // Browsers without `scrollend` (and a jump that doesn't move) still settle.
-        setTimeout(done, 600)
-      }
-      scroller.scrollTo({ top: el.offsetTop, behavior })
-    },
-    [measure, moveWindow],
-  )
-
-  /** Keyboard focus left the window: recentre it on that month and keep the reader's place. */
-  const recentre = useCallback(
-    (month: Date) => moveWindow(addMonths(startOfMonth(month), -Math.floor(WINDOW / 2))),
-    [moveWindow],
-  )
-
-  return { first, count, visible, current, scrollerRef, measure, jumpTo, recentre, centreDay }
-}
-
-export { monthKey, useMonthWindow }