foldkit 0.79.0 → 0.81.0

package/dist/ui/calendar/index.js

@@ -7,14 +7,20 @@ import { m } from '../../message/index.js';
 import { evo } from '../../struct/index.js';
 import * as Task from '../../task/index.js';
 // MODEL
+/** Which grid the calendar is currently displaying. `Days` is the standard
+ * 6×7 day grid; `Months` is a 3×4 month-name grid for fast month jumps;
+ * `Years` is a 3×4 year grid paged in 12-year windows for fast year jumps. */
+export const ViewMode = S.Literal('Days', 'Months', 'Years');
 /** Schema for the calendar component's state. Tracks the visible month/year,
- * the keyboard-focused and user-selected dates, and the configuration that
- * governs navigation (locale, min/max, disabled days). */
+ * the keyboard-focused and user-selected dates, the active view mode, and
+ * the configuration that governs navigation (locale, min/max, disabled
+ * days). */
 export const Model = S.Struct({
     id: S.String,
     today: Calendar.CalendarDate,
     viewYear: S.Int,
     viewMonth: S.Int.pipe(S.between(1, 12)),
+    viewMode: ViewMode,
     maybeFocusedDate: S.OptionFromSelf(Calendar.CalendarDate),
     maybeSelectedDate: S.OptionFromSelf(Calendar.CalendarDate),
     isGridFocused: S.Boolean,
@@ -33,18 +39,24 @@ export const PressedKeyOnGrid = m('PressedKeyOnGrid', {
     key: S.String,
     isShift: S.Boolean,
 });
-/** Sent when the user clicks the previous-month navigation button. */
+/** Sent when the user clicks the previous-month navigation button in Days
+ * mode. (The Years mode prev/next-page buttons dispatch `PagedYears`.) */
 export const ClickedPreviousMonthButton = m('ClickedPreviousMonthButton');
-/** Sent when the user clicks the next-month navigation button. */
+/** Sent when the user clicks the next-month navigation button in Days
+ * mode. (The Years mode prev/next-page buttons dispatch `PagedYears`.) */
 export const ClickedNextMonthButton = m('ClickedNextMonthButton');
-/** Sent when the user picks a month from the month dropdown. */
-export const SelectedMonthFromDropdown = m('SelectedMonthFromDropdown', {
-    month: S.Int,
-});
-/** Sent when the user picks a year from the year dropdown. */
-export const SelectedYearFromDropdown = m('SelectedYearFromDropdown', {
-    year: S.Int,
-});
+/** Sent when the user clicks the calendar heading. Zooms out one mode
+ * level: Days → Months, Months → Years. Terminal in Years mode. */
+export const ClickedHeading = m('ClickedHeading');
+/** Sent when the user picks a month from the months grid. Jumps the view
+ * to that month and returns the calendar to Days mode. */
+export const SelectedMonth = m('SelectedMonth', { month: S.Int });
+/** Sent when the user picks a year from the years grid. Jumps the view to
+ * that year and transitions the calendar to Months mode for further drilling. */
+export const SelectedYear = m('SelectedYear', { year: S.Int });
+/** Sent when the user pages the years grid forward or backward by one
+ * window. Direction is `1` for next, `-1` for previous. */
+export const PagedYears = m('PagedYears', { direction: S.Literal(1, -1) });
 /** Sent when the grid container receives DOM focus. */
 export const FocusedGrid = m('FocusedGrid');
 /** Sent when the grid container loses DOM focus. */
@@ -56,7 +68,7 @@ export const RefreshedToday = m('RefreshedToday', {
 /** Sent when a FocusGrid command completes. */
 export const CompletedFocusGrid = m('CompletedFocusGrid');
 /** Union of all messages the calendar component can produce. */
-export const Message = S.Union(ClickedDay, PressedKeyOnGrid, ClickedPreviousMonthButton, ClickedNextMonthButton, SelectedMonthFromDropdown, SelectedYearFromDropdown, FocusedGrid, BlurredGrid, RefreshedToday, CompletedFocusGrid);
+export const Message = S.Union(ClickedDay, PressedKeyOnGrid, ClickedPreviousMonthButton, ClickedNextMonthButton, ClickedHeading, SelectedMonth, SelectedYear, PagedYears, FocusedGrid, BlurredGrid, RefreshedToday, CompletedFocusGrid);
 // OUT MESSAGE
 /** Emitted when the visible month changes due to navigation. Consumers of an
  * inline calendar may use this to load month-scoped data (holidays, events).
@@ -83,6 +95,7 @@ export const init = (config) => {
         today: config.today,
         viewYear: initialFocus.year,
         viewMonth: initialFocus.month,
+        viewMode: 'Days',
         maybeFocusedDate: Option.some(initialFocus),
         maybeSelectedDate: maybeInitialSelectedDate,
         isGridFocused: false,
@@ -126,25 +139,34 @@ export const setDisabledDates = (model, disabledDates) => evo(model, { disabledD
 /** Sets the days of the week that are disabled (e.g. weekends). Pass an
  * empty array to clear. Does NOT reconcile the current selection. */
 export const setDisabledDaysOfWeek = (model, disabledDaysOfWeek) => evo(model, { disabledDaysOfWeek: () => disabledDaysOfWeek });
+/** Returns the calendar to Days mode regardless of current depth. Useful for
+ * standalone (non-popovered) consumers that want to wire their own back-out
+ * gesture. Popovered consumers like `Ui.DatePicker` don't need this — Escape
+ * closes the popover, and the calendar resets to Days on next open.
+ *
+ * Reconciles `maybeFocusedDate` to a date inside the visible (`viewYear`,
+ * `viewMonth`) — Months/Years navigation can leave the cursor on a date
+ * outside the days grid (paged-away year, etc.), which would otherwise
+ * cause `aria-activedescendant` to point at a non-rendered cell and the
+ * next ArrowLeft to jump to the cursor's stale year. */
+export const dropToDays = (model) => {
+    const focusedDay = Option.match(model.maybeFocusedDate, {
+        onNone: () => 1,
+        onSome: date => Math.min(date.day, Calendar.daysInMonth(model.viewYear, model.viewMonth)),
+    });
+    return evo(model, {
+        viewMode: () => 'Days',
+        maybeFocusedDate: () => Option.some(Calendar.make(model.viewYear, model.viewMonth, focusedDay)),
+    });
+};
 const DAY_SKIP_CAP = 31;
 const MONTH_SKIP_CAP = 12;
-const isDateDisabled = (model, date) => {
-    const belowMin = Option.exists(model.maybeMinDate, min => Calendar.isBefore(date, min));
-    if (belowMin) {
-        return true;
-    }
-    const aboveMax = Option.exists(model.maybeMaxDate, max => Calendar.isAfter(date, max));
-    if (aboveMax) {
-        return true;
-    }
-    if (model.disabledDaysOfWeek.includes(Calendar.dayOfWeek(date))) {
-        return true;
-    }
-    if (model.disabledDates.some(Calendar.isEqual(date))) {
-        return true;
-    }
-    return false;
-};
+/** Number of years per Years-mode page. A 3×4 grid renders one window. */
+const YEARS_PAGE_SIZE = 12;
+const isDateDisabled = (model, date) => Option.exists(model.maybeMinDate, min => Calendar.isBefore(date, min)) ||
+    Option.exists(model.maybeMaxDate, max => Calendar.isAfter(date, max)) ||
+    model.disabledDaysOfWeek.includes(Calendar.dayOfWeek(date)) ||
+    model.disabledDates.some(Calendar.isEqual(date));
 /** Walks from `start` in `direction`, returning the first non-disabled date
  * within `cap` steps. Falls back to `start` if every candidate is disabled. */
 const skipDisabled = (model, start, direction, cap) => pipe(cap, Array.makeBy(step => Calendar.addDays(start, step * direction)), Array.findFirst(date => !isDateDisabled(model, date)), Option.getOrElse(() => start));
@@ -241,14 +263,52 @@ const applyViewMonthChange = (model, year, month, direction) => {
     });
     return [nextModel, [], Option.some(ChangedViewMonth({ year, month }))];
 };
-/** Direction the user moved when jumping to a new view month via dropdown.
- * Used by `skipDisabled` so a forward jump skips forward through disabled
- * dates and a backward jump skips backward. */
-const dropdownDirection = (model, year, month) => {
+/** Direction the user moved when jumping to a new view year/month via grid
+ * selection. Used by `skipDisabled` so a forward jump skips forward through
+ * disabled dates and a backward jump skips backward. */
+const jumpDirection = (model, year, month) => {
     const next = Calendar.make(year, month, 1);
     const current = Calendar.make(model.viewYear, model.viewMonth, 1);
     return Calendar.isAfter(next, current) ? 1 : -1;
 };
+/** Maps a keyboard key to a months-grid focus shift (in months). Months
+ * mode supports horizontal (±1), vertical (±row width), and PageUp/Down
+ * (±12) navigation. */
+const resolveMonthsKey = (key) => M.value(key).pipe(M.withReturnType(), M.when('ArrowLeft', () => -1), M.when('ArrowRight', () => 1), M.when('ArrowUp', () => -MONTHS_GRID_COLUMNS), M.when('ArrowDown', () => MONTHS_GRID_COLUMNS), M.when('PageUp', () => -MONTHS_IN_YEAR), M.when('PageDown', () => MONTHS_IN_YEAR), M.option);
+/** Maps a keyboard key to a years-grid focus shift (in years). Years mode
+ * supports horizontal (±1), vertical (±row width), and PageUp/Down (±12 =
+ * one window) navigation. */
+const resolveYearsKey = (key) => M.value(key).pipe(M.withReturnType(), M.when('ArrowLeft', () => -1), M.when('ArrowRight', () => 1), M.when('ArrowUp', () => -YEARS_GRID_COLUMNS), M.when('ArrowDown', () => YEARS_GRID_COLUMNS), M.when('PageUp', () => -YEARS_PAGE_SIZE), M.when('PageDown', () => YEARS_PAGE_SIZE), M.option);
+/** Applies a months-grid focus shift, updating `maybeFocusedDate` and
+ * `viewYear` to reflect the new focused date. `viewMonth` is preserved —
+ * Months mode keyboard navigation moves the cursor without committing. */
+const applyMonthsFocusShift = (model, monthShift) => {
+    const focused = currentOrFallbackFocus(model);
+    const nextFocus = Calendar.addMonths(focused, monthShift);
+    return [
+        evo(model, {
+            maybeFocusedDate: () => Option.some(nextFocus),
+            viewYear: () => nextFocus.year,
+        }),
+        [],
+        Option.none(),
+    ];
+};
+/** Applies a years-grid focus shift, updating only `maybeFocusedDate`.
+ * `viewYear` is preserved so the "selected" highlight (`year === viewYear`)
+ * stays on the calendar's centered year while the cursor moves freely. The
+ * visible 12-year page is derived from the cursor in the view layer. */
+const applyYearsFocusShift = (model, yearShift) => {
+    const focused = currentOrFallbackFocus(model);
+    const nextFocus = Calendar.addYears(focused, yearShift);
+    return [
+        evo(model, {
+            maybeFocusedDate: () => Option.some(nextFocus),
+        }),
+        [],
+        Option.none(),
+    ];
+};
 /** Processes a calendar message and returns the next model, commands, and
  * optional OutMessage. */
 export const update = (model, message) => M.value(message).pipe(withUpdateReturn, M.tagsExhaustive({
@@ -256,26 +316,38 @@ export const update = (model, message) => M.value(message).pipe(withUpdateReturn
         if (isDateDisabled(model, date)) {
             return [model, [], Option.none()];
         }
-        const [nextModel, maybeOutMessage] = commitSelection(model, date);
-        return [nextModel, [], maybeOutMessage];
+        else {
+            const [nextModel, maybeOutMessage] = commitSelection(model, date);
+            return [nextModel, [], maybeOutMessage];
+        }
     },
-    PressedKeyOnGrid: ({ key, isShift }) => {
+    PressedKeyOnGrid: ({ key, isShift }) => M.value(model.viewMode).pipe(withUpdateReturn, M.when('Days', () => {
         const focused = currentOrFallbackFocus(model);
         if (isCommitKey(key)) {
             if (isDateDisabled(model, focused)) {
                 return [model, [], Option.none()];
             }
-            const [nextModel, maybeOutMessage] = commitSelection(model, focused);
-            return [nextModel, [], maybeOutMessage];
-        }
-        return Option.match(resolveNavigationKey(key, isShift, focused, model.locale.firstDayOfWeek), {
-            onNone: () => [model, [], Option.none()],
-            onSome: ([candidate, direction, cap]) => {
-                const [nextModel, maybeOutMessage] = applyFocusMove(model, candidate, direction, cap);
+            else {
+                const [nextModel, maybeOutMessage] = commitSelection(model, focused);
                 return [nextModel, [], maybeOutMessage];
-            },
-        });
-    },
+            }
+        }
+        else {
+            return Option.match(resolveNavigationKey(key, isShift, focused, model.locale.firstDayOfWeek), {
+                onNone: () => [model, [], Option.none()],
+                onSome: ([candidate, direction, cap]) => {
+                    const [nextModel, maybeOutMessage] = applyFocusMove(model, candidate, direction, cap);
+                    return [nextModel, [], maybeOutMessage];
+                },
+            });
+        }
+    }), M.when('Months', () => Option.match(resolveMonthsKey(key), {
+        onNone: () => [model, [], Option.none()],
+        onSome: shift => applyMonthsFocusShift(model, shift),
+    })), M.when('Years', () => Option.match(resolveYearsKey(key), {
+        onNone: () => [model, [], Option.none()],
+        onSome: shift => applyYearsFocusShift(model, shift),
+    })), M.exhaustive),
     ClickedPreviousMonthButton: () => {
         const next = Calendar.subtractMonths(Calendar.make(model.viewYear, model.viewMonth, 1), 1);
         return applyViewMonthChange(model, next.year, next.month, -1);
@@ -284,8 +356,42 @@ export const update = (model, message) => M.value(message).pipe(withUpdateReturn
         const next = Calendar.addMonths(Calendar.make(model.viewYear, model.viewMonth, 1), 1);
         return applyViewMonthChange(model, next.year, next.month, 1);
     },
-    SelectedMonthFromDropdown: ({ month }) => applyViewMonthChange(model, model.viewYear, month, dropdownDirection(model, model.viewYear, month)),
-    SelectedYearFromDropdown: ({ year }) => applyViewMonthChange(model, year, model.viewMonth, dropdownDirection(model, year, model.viewMonth)),
+    ClickedHeading: () => M.value(model.viewMode).pipe(withUpdateReturn, M.when('Days', () => [
+        evo(model, { viewMode: () => 'Months' }),
+        [focusGrid(model.id)],
+        Option.none(),
+    ]), M.when('Months', () => [
+        evo(model, { viewMode: () => 'Years' }),
+        [focusGrid(model.id)],
+        Option.none(),
+    ]), M.when('Years', () => [model, [], Option.none()]), M.exhaustive),
+    SelectedMonth: ({ month }) => {
+        if (isMonthDisabled(model, model.viewYear, month)) {
+            return [model, [], Option.none()];
+        }
+        else {
+            const [nextModel, commands, maybeOutMessage] = applyViewMonthChange(model, model.viewYear, month, jumpDirection(model, model.viewYear, month));
+            return [
+                evo(nextModel, { viewMode: () => 'Days' }),
+                [...commands, focusGrid(model.id)],
+                maybeOutMessage,
+            ];
+        }
+    },
+    SelectedYear: ({ year }) => {
+        if (isYearDisabled(model, year)) {
+            return [model, [], Option.none()];
+        }
+        else {
+            const [nextModel, commands, maybeOutMessage] = applyViewMonthChange(model, year, model.viewMonth, jumpDirection(model, year, model.viewMonth));
+            return [
+                evo(nextModel, { viewMode: () => 'Months' }),
+                [...commands, focusGrid(model.id)],
+                maybeOutMessage,
+            ];
+        }
+    },
+    PagedYears: ({ direction }) => applyYearsFocusShift(model, direction * YEARS_PAGE_SIZE),
     FocusedGrid: () => [
         evo(model, { isGridFocused: () => true }),
         [],
@@ -305,7 +411,9 @@ export const update = (model, message) => M.value(message).pipe(withUpdateReturn
 }));
 // VIEW
 const headingId = (modelId) => `${modelId}-heading`;
-const cellId = (modelId, date) => `${modelId}-cell-${date.year}-${date.month}-${date.day}`;
+const dayCellId = (modelId, date) => `${modelId}-cell-${date.year}-${date.month}-${date.day}`;
+const monthCellId = (modelId, month) => `${modelId}-cell-month-${month}`;
+const yearCellId = (modelId, year) => `${modelId}-cell-year-${year}`;
 const DAY_NAMES_SUNDAY_FIRST = [
     'Sunday',
     'Monday',
@@ -342,24 +450,6 @@ const buildGrid = (viewYear, viewMonth, firstDayOfWeek) => {
     const weeks = Array.makeBy(WEEKS_IN_GRID, weekIndex => Array.makeBy(DAYS_IN_WEEK, dayIndex => Calendar.addDays(gridStart, weekIndex * DAYS_IN_WEEK + dayIndex)));
     return { gridStart, weeks };
 };
-const YEAR_RANGE_LOOKAHEAD = 10;
-const YEAR_RANGE_LOOKBEHIND = 100;
-/** Computes the inclusive year range the year dropdown should expose,
- * derived from min/max constraints if set, else a sensible default window
- * around today. */
-const resolveYearRange = (model) => {
-    const defaultStart = model.today.year - YEAR_RANGE_LOOKBEHIND;
-    const defaultEnd = model.today.year + YEAR_RANGE_LOOKAHEAD;
-    const start = Option.match(model.maybeMinDate, {
-        onNone: () => defaultStart,
-        onSome: min => min.year,
-    });
-    const end = Option.match(model.maybeMaxDate, {
-        onNone: () => defaultEnd,
-        onSome: max => max.year,
-    });
-    return [start, end];
-};
 const NAV_KEYS = new Set([
     'ArrowLeft',
     'ArrowRight',
@@ -372,52 +462,55 @@ const NAV_KEYS = new Set([
     'Enter',
     ' ',
 ]);
-/** Renders an accessible calendar grid. Builds ARIA attribute groups (grid,
- * row, gridcell, column header) plus the derived month grid, then delegates
- * layout to the consumer's `toView` callback. */
-export const view = (config) => {
-    const { AriaActiveDescendant, AriaColcount, AriaColindex, AriaDisabled, AriaLabel, AriaRowcount, AriaRowindex, AriaSelected, DataAttribute, Id, OnBlur, OnChange, OnClick, OnFocus, OnKeyDownPreventDefault, Role, Tabindex, Type, } = html();
-    const { model, toParentMessage, toView, onSelectedDate } = config;
+const MONTHS_GRID_COLUMNS = 3;
+const YEARS_GRID_COLUMNS = 3;
+const MONTHS_IN_YEAR = 12;
+/** Returns the start year of the 12-year window the years grid renders. */
+const yearsPageStart = (viewYear) => Math.floor(viewYear / YEARS_PAGE_SIZE) * YEARS_PAGE_SIZE;
+/** A month range is fully disabled when its last day is below the minimum
+ * or its first day is above the maximum. */
+const isMonthDisabled = (model, year, month) => {
+    const monthStart = Calendar.make(year, month, 1);
+    const monthEnd = Calendar.make(year, month, Calendar.daysInMonth(year, month));
+    return (Option.exists(model.maybeMinDate, min => Calendar.isBefore(monthEnd, min)) ||
+        Option.exists(model.maybeMaxDate, max => Calendar.isAfter(monthStart, max)));
+};
+/** A year is fully disabled when it falls entirely below the minimum date's
+ * year or entirely above the maximum date's year. */
+const isYearDisabled = (model, year) => Option.exists(model.maybeMinDate, min => year < min.year) ||
+    Option.exists(model.maybeMaxDate, max => year > max.year);
+const buildDaysAttributes = (config) => {
+    const { AriaActiveDescendant, AriaColcount, AriaColindex, AriaDisabled, AriaLabel, AriaRowcount, AriaRowindex, AriaSelected, DataAttribute, Id, Key, OnBlur, OnClick, OnFocus, OnKeyDownPreventDefault, Role, Tabindex, Type, } = html();
+    const { model, toParentMessage, onSelectedDate } = config;
     const { id, viewYear, viewMonth, maybeFocusedDate, maybeSelectedDate, today, locale, isGridFocused, } = model;
-    /** Returns the parent message to dispatch when the user commits a date. In
-     * controlled mode (when `onSelectedDate` is provided), dispatches the
-     * callback directly. In uncontrolled mode, routes through the internal
-     * `ClickedDay` message so the calendar's own update manages selection. */
     const dispatchSelectedDate = (date) => onSelectedDate !== undefined
         ? onSelectedDate(date)
         : toParentMessage(ClickedDay({ date }));
     const previousMonthLabel = config.previousMonthLabel ?? 'Previous month';
     const nextMonthLabel = config.nextMonthLabel ?? 'Next month';
-    const monthSelectLabel = config.monthSelectLabel ?? 'Select month';
-    const yearSelectLabel = config.yearSelectLabel ?? 'Select year';
+    const headingButtonLabel = config.daysHeadingButtonLabel ?? 'Switch to month picker';
     const headingText = `${locale.monthNames[viewMonth - 1]} ${viewYear}`;
-    const monthOptions = locale.monthNames.map((label, index) => ({
-        value: index + 1,
-        label,
-    }));
-    const [yearRangeStart, yearRangeEnd] = resolveYearRange(model);
-    const yearOptions = Array.makeBy(Math.max(0, yearRangeEnd - yearRangeStart + 1), index => yearRangeStart + index);
     const rotatedDayNames = rotateDayNames(DAY_NAMES_SUNDAY_FIRST, locale.firstDayOfWeek);
     const rotatedShortDayNames = rotateDayNames(locale.shortDayNames, locale.firstDayOfWeek);
     const { gridStart, weeks: weeksDates } = buildGrid(viewYear, viewMonth, locale.firstDayOfWeek);
-    const rootAttributes = [Id(id)];
-    const previousMonthButtonAttributes = [
+    const rootAttributes = [
+        Id(id),
+        Key('Days'),
+    ];
+    const previousMonthButton = [
         Type('button'),
         AriaLabel(previousMonthLabel),
         OnClick(toParentMessage(ClickedPreviousMonthButton())),
     ];
-    const nextMonthButtonAttributes = [
+    const nextMonthButton = [
         Type('button'),
         AriaLabel(nextMonthLabel),
         OnClick(toParentMessage(ClickedNextMonthButton())),
     ];
-    const monthSelectAttributes = [
-        AriaLabel(monthSelectLabel),
-        OnChange(value => toParentMessage(SelectedMonthFromDropdown({ month: Number(value) }))),
-    ];
-    const yearSelectAttributes = [
-        AriaLabel(yearSelectLabel),
-        OnChange(value => toParentMessage(SelectedYearFromDropdown({ year: Number(value) }))),
+    const headingButton = [
+        Type('button'),
+        AriaLabel(headingButtonLabel),
+        OnClick(toParentMessage(ClickedHeading())),
     ];
     const handleKeyDown = (key, modifiers) => {
         if (!NAV_KEYS.has(key)) {
@@ -428,7 +521,7 @@ export const view = (config) => {
         }
         return Option.some(toParentMessage(PressedKeyOnGrid({ key, isShift: modifiers.shiftKey })));
     };
-    const activeDescendantAttributes = pipe(maybeFocusedDate, Option.map(date => AriaActiveDescendant(cellId(id, date))), Option.toArray);
+    const activeDescendantAttributes = pipe(maybeFocusedDate, Option.map(date => AriaActiveDescendant(dayCellId(id, date))), Option.toArray);
     const gridAttributes = [
         Id(gridId(id)),
         Role('grid'),
@@ -470,7 +563,7 @@ export const view = (config) => {
             OptionExt.when(isDisabled, DataAttribute('disabled', '')),
         ]);
         const cellAttributes = [
-            Id(cellId(id, date)),
+            Id(dayCellId(id, date)),
             Role('gridcell'),
             AriaSelected(isSelected),
             AriaColindex(columnIndex + 1),
@@ -506,21 +599,216 @@ export const view = (config) => {
             cells: weekDates.map(buildDayCell),
         };
     });
-    return toView({
+    return {
+        _tag: 'Days',
         root: rootAttributes,
-        previousMonthButton: previousMonthButtonAttributes,
-        nextMonthButton: nextMonthButtonAttributes,
+        previousMonthButton,
+        nextMonthButton,
+        headingButton,
         heading: { id: headingId(id), text: headingText },
-        monthSelect: monthSelectAttributes,
-        monthOptions,
-        yearSelect: yearSelectAttributes,
-        yearOptions,
         grid: gridAttributes,
         headerRow: headerRowAttributes,
         columnHeaders,
         weeks,
+    };
+};
+const buildMonthsAttributes = (config) => {
+    const { AriaActiveDescendant, AriaDisabled, AriaLabel, AriaSelected, DataAttribute, Id, Key, OnBlur, OnClick, OnFocus, OnKeyDownPreventDefault, Role, Tabindex, Type, } = html();
+    const { model, toParentMessage } = config;
+    const { id, viewYear, viewMonth, maybeFocusedDate, today, locale, isGridFocused, } = model;
+    const headingButtonLabel = config.monthsHeadingButtonLabel ?? 'Switch to year picker';
+    const headingText = `${viewYear}`;
+    const rootAttributes = [
+        Id(id),
+        Key('Months'),
+    ];
+    const headingButton = [
+        Type('button'),
+        AriaLabel(headingButtonLabel),
+        OnClick(toParentMessage(ClickedHeading())),
+    ];
+    const focusedMonth = Option.match(maybeFocusedDate, {
+        onNone: () => viewMonth,
+        onSome: date => (date.year === viewYear ? date.month : viewMonth),
     });
+    const handleKeyDown = (key, modifiers) => {
+        if (!NAV_KEYS.has(key)) {
+            return Option.none();
+        }
+        else if (isCommitKey(key)) {
+            return OptionExt.when(!isMonthDisabled(model, viewYear, focusedMonth), toParentMessage(SelectedMonth({ month: focusedMonth })));
+        }
+        else {
+            return Option.some(toParentMessage(PressedKeyOnGrid({ key, isShift: modifiers.shiftKey })));
+        }
+    };
+    const activeDescendantAttributes = [
+        AriaActiveDescendant(monthCellId(id, focusedMonth)),
+    ];
+    const gridAttributes = [
+        Id(gridId(id)),
+        Role('grid'),
+        AriaLabel(`Month picker, ${headingText}`),
+        Tabindex(0),
+        OnFocus(toParentMessage(FocusedGrid())),
+        OnBlur(toParentMessage(BlurredGrid())),
+        OnKeyDownPreventDefault(handleKeyDown),
+        ...activeDescendantAttributes,
+    ];
+    const buildMonthCell = (month) => {
+        const label = locale.monthNames[month - 1] ?? String(month);
+        const shortLabel = locale.shortMonthNames[month - 1] ?? label;
+        const isSelected = month === viewMonth;
+        const isFocused = month === focusedMonth;
+        const isCurrentMonth = today.year === viewYear && today.month === month;
+        const isDisabled = isMonthDisabled(model, viewYear, month);
+        const stateDataAttributes = Array.getSomes([
+            OptionExt.when(isCurrentMonth, DataAttribute('today', '')),
+            OptionExt.when(isSelected, DataAttribute('selected', '')),
+            OptionExt.when(isFocused && isGridFocused, DataAttribute('focused', '')),
+            OptionExt.when(isDisabled, DataAttribute('disabled', '')),
+        ]);
+        const cellAttributes = [
+            Id(monthCellId(id, month)),
+            Role('gridcell'),
+            AriaSelected(isSelected),
+            ...stateDataAttributes,
+        ];
+        const buttonAttributes = [
+            Type('button'),
+            Tabindex(-1),
+            AriaLabel(`${label} ${viewYear}`),
+            AriaDisabled(isDisabled),
+            ...(isDisabled
+                ? []
+                : [OnClick(toParentMessage(SelectedMonth({ month })))]),
+        ];
+        return {
+            month,
+            label,
+            shortLabel,
+            cellAttributes,
+            buttonAttributes,
+            isSelected,
+            isFocused: isFocused && isGridFocused,
+            isCurrentMonth,
+            isDisabled,
+        };
+    };
+    const cells = Array.makeBy(MONTHS_IN_YEAR, monthIndex => buildMonthCell(monthIndex + 1));
+    return {
+        _tag: 'Months',
+        root: rootAttributes,
+        headingButton,
+        heading: { id: headingId(id), text: headingText },
+        grid: gridAttributes,
+        cells,
+    };
+};
+const buildYearsAttributes = (config) => {
+    const { AriaActiveDescendant, AriaDisabled, AriaLabel, AriaSelected, DataAttribute, Id, Key, OnBlur, OnClick, OnFocus, OnKeyDownPreventDefault, Role, Tabindex, Type, } = html();
+    const { model, toParentMessage } = config;
+    const { id, viewYear, maybeFocusedDate, today, isGridFocused } = model;
+    const previousYearsPageLabel = config.previousYearsPageLabel ?? 'Previous 12 years';
+    const nextYearsPageLabel = config.nextYearsPageLabel ?? 'Next 12 years';
+    const cursorYear = Option.match(maybeFocusedDate, {
+        onNone: () => viewYear,
+        onSome: date => date.year,
+    });
+    const pageStart = yearsPageStart(cursorYear);
+    const pageEnd = pageStart + YEARS_PAGE_SIZE - 1;
+    const headingText = `${pageStart}–${pageEnd}`;
+    const rootAttributes = [
+        Id(id),
+        Key('Years'),
+    ];
+    const previousPageButton = [
+        Type('button'),
+        AriaLabel(previousYearsPageLabel),
+        OnClick(toParentMessage(PagedYears({ direction: -1 }))),
+    ];
+    const nextPageButton = [
+        Type('button'),
+        AriaLabel(nextYearsPageLabel),
+        OnClick(toParentMessage(PagedYears({ direction: 1 }))),
+    ];
+    const focusedYear = cursorYear;
+    const handleKeyDown = (key, modifiers) => {
+        if (!NAV_KEYS.has(key)) {
+            return Option.none();
+        }
+        else if (isCommitKey(key)) {
+            return OptionExt.when(!isYearDisabled(model, focusedYear), toParentMessage(SelectedYear({ year: focusedYear })));
+        }
+        else {
+            return Option.some(toParentMessage(PressedKeyOnGrid({ key, isShift: modifiers.shiftKey })));
+        }
+    };
+    const activeDescendantAttributes = [
+        AriaActiveDescendant(yearCellId(id, focusedYear)),
+    ];
+    const gridAttributes = [
+        Id(gridId(id)),
+        Role('grid'),
+        AriaLabel(`Year picker, ${headingText}`),
+        Tabindex(0),
+        OnFocus(toParentMessage(FocusedGrid())),
+        OnBlur(toParentMessage(BlurredGrid())),
+        OnKeyDownPreventDefault(handleKeyDown),
+        ...activeDescendantAttributes,
+    ];
+    const buildYearCell = (year) => {
+        const label = String(year);
+        const isSelected = year === viewYear;
+        const isFocused = year === focusedYear;
+        const isCurrentYear = today.year === year;
+        const isDisabled = isYearDisabled(model, year);
+        const stateDataAttributes = Array.getSomes([
+            OptionExt.when(isCurrentYear, DataAttribute('today', '')),
+            OptionExt.when(isSelected, DataAttribute('selected', '')),
+            OptionExt.when(isFocused && isGridFocused, DataAttribute('focused', '')),
+            OptionExt.when(isDisabled, DataAttribute('disabled', '')),
+        ]);
+        const cellAttributes = [
+            Id(yearCellId(id, year)),
+            Role('gridcell'),
+            AriaSelected(isSelected),
+            ...stateDataAttributes,
+        ];
+        const buttonAttributes = [
+            Type('button'),
+            Tabindex(-1),
+            AriaLabel(label),
+            AriaDisabled(isDisabled),
+            ...(isDisabled ? [] : [OnClick(toParentMessage(SelectedYear({ year })))]),
+        ];
+        return {
+            year,
+            label,
+            cellAttributes,
+            buttonAttributes,
+            isSelected,
+            isFocused: isFocused && isGridFocused,
+            isCurrentYear,
+            isDisabled,
+        };
+    };
+    const cells = Array.makeBy(YEARS_PAGE_SIZE, offset => buildYearCell(pageStart + offset));
+    return {
+        _tag: 'Years',
+        root: rootAttributes,
+        previousPageButton,
+        nextPageButton,
+        heading: { id: headingId(id), text: headingText },
+        grid: gridAttributes,
+        cells,
+    };
 };
+/** Renders an accessible calendar. Builds mode-specific ARIA attribute
+ * groups and derived cell data, then delegates layout to the consumer's
+ * `toView` callback. The variant of `CalendarAttributes` passed to `toView`
+ * matches `model.viewMode`. */
+export const view = (config) => config.toView(M.value(config.model.viewMode).pipe(M.withReturnType(), M.when('Days', () => buildDaysAttributes(config)), M.when('Months', () => buildMonthsAttributes(config)), M.when('Years', () => buildYearsAttributes(config)), M.exhaustive));
 /** Creates a memoized calendar view. Static config is captured in a closure;
  *  only `model` and `toParentMessage` are compared per render via `createLazy`. */
 export const lazy = (staticConfig) => {

package/dist/ui/calendar/public.d.ts

@@ -1,3 +1,3 @@
-export { init, update, view, lazy, focusGrid, selectDate, setMinDate, setMaxDate, setDisabledDates, setDisabledDaysOfWeek, Model, Message, OutMessage, ChangedViewMonth, ClickedDay, PressedKeyOnGrid, ClickedPreviousMonthButton, ClickedNextMonthButton, SelectedMonthFromDropdown, SelectedYearFromDropdown, FocusedGrid, BlurredGrid, RefreshedToday, CompletedFocusGrid, FocusGrid, } from './index.js';
-export type { InitConfig, ViewConfig, CalendarAttributes, DayCell, ColumnHeader, Week, } from './index.js';
+export { init, update, view, lazy, focusGrid, selectDate, setMinDate, setMaxDate, setDisabledDates, setDisabledDaysOfWeek, dropToDays, Model, ViewMode, Message, OutMessage, ChangedViewMonth, ClickedDay, PressedKeyOnGrid, ClickedPreviousMonthButton, ClickedNextMonthButton, ClickedHeading, SelectedMonth, SelectedYear, PagedYears, FocusedGrid, BlurredGrid, RefreshedToday, CompletedFocusGrid, FocusGrid, } from './index.js';
+export type { InitConfig, ViewConfig, CalendarAttributes, DaysModeAttributes, MonthsModeAttributes, YearsModeAttributes, DayCell, ColumnHeader, Week, MonthCell, YearCell, } from './index.js';
 //# sourceMappingURL=public.d.ts.map

package/dist/ui/calendar/public.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"public.d.ts","sourceRoot":"","sources":["../../../src/ui/calendar/public.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,IAAI,EACJ,MAAM,EACN,IAAI,EACJ,IAAI,EACJ,SAAS,EACT,UAAU,EACV,UAAU,EACV,UAAU,EACV,gBAAgB,EAChB,qBAAqB,EACrB,KAAK,EACL,OAAO,EACP,UAAU,EACV,gBAAgB,EAChB,UAAU,EACV,gBAAgB,EAChB,0BAA0B,EAC1B,sBAAsB,EACtB,yBAAyB,EACzB,wBAAwB,EACxB,WAAW,EACX,WAAW,EACX,cAAc,EACd,kBAAkB,EAClB,SAAS,GACV,MAAM,YAAY,CAAA;AAEnB,YAAY,EACV,UAAU,EACV,UAAU,EACV,kBAAkB,EAClB,OAAO,EACP,YAAY,EACZ,IAAI,GACL,MAAM,YAAY,CAAA"}
+{"version":3,"file":"public.d.ts","sourceRoot":"","sources":["../../../src/ui/calendar/public.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,IAAI,EACJ,MAAM,EACN,IAAI,EACJ,IAAI,EACJ,SAAS,EACT,UAAU,EACV,UAAU,EACV,UAAU,EACV,gBAAgB,EAChB,qBAAqB,EACrB,UAAU,EACV,KAAK,EACL,QAAQ,EACR,OAAO,EACP,UAAU,EACV,gBAAgB,EAChB,UAAU,EACV,gBAAgB,EAChB,0BAA0B,EAC1B,sBAAsB,EACtB,cAAc,EACd,aAAa,EACb,YAAY,EACZ,UAAU,EACV,WAAW,EACX,WAAW,EACX,cAAc,EACd,kBAAkB,EAClB,SAAS,GACV,MAAM,YAAY,CAAA;AAEnB,YAAY,EACV,UAAU,EACV,UAAU,EACV,kBAAkB,EAClB,kBAAkB,EAClB,oBAAoB,EACpB,mBAAmB,EACnB,OAAO,EACP,YAAY,EACZ,IAAI,EACJ,SAAS,EACT,QAAQ,GACT,MAAM,YAAY,CAAA"}

package/dist/ui/calendar/public.js

@@ -1 +1 @@
-export { init, update, view, lazy, focusGrid, selectDate, setMinDate, setMaxDate, setDisabledDates, setDisabledDaysOfWeek, Model, Message, OutMessage, ChangedViewMonth, ClickedDay, PressedKeyOnGrid, ClickedPreviousMonthButton, ClickedNextMonthButton, SelectedMonthFromDropdown, SelectedYearFromDropdown, FocusedGrid, BlurredGrid, RefreshedToday, CompletedFocusGrid, FocusGrid, } from './index.js';
+export { init, update, view, lazy, focusGrid, selectDate, setMinDate, setMaxDate, setDisabledDates, setDisabledDaysOfWeek, dropToDays, Model, ViewMode, Message, OutMessage, ChangedViewMonth, ClickedDay, PressedKeyOnGrid, ClickedPreviousMonthButton, ClickedNextMonthButton, ClickedHeading, SelectedMonth, SelectedYear, PagedYears, FocusedGrid, BlurredGrid, RefreshedToday, CompletedFocusGrid, FocusGrid, } from './index.js';