@foldkit/ui 0.112.0

package/dist/calendar/index.js

@@ -0,0 +1,825 @@
+import { Array, Effect, Function, Match as M, Number, Option, Schema as S, pipe, } from 'effect';
+import * as Calendar from 'foldkit/calendar';
+import * as Command from 'foldkit/command';
+import * as Dom from 'foldkit/dom';
+import { childAttributes, html, } from 'foldkit/html';
+import { m } from 'foldkit/message';
+import { evo } from 'foldkit/struct';
+import { defineView } from 'foldkit/submodel';
+import * as OptionExt from '../internal/optionExtensions.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.Literals(['Days', 'Months', 'Years']);
+/** Schema for the calendar component's state. Tracks the visible month/year,
+ * 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.check(S.isBetween({ minimum: 1, maximum: 12 })),
+    viewMode: ViewMode,
+    maybeFocusedDate: S.Option(Calendar.CalendarDate),
+    maybeSelectedDate: S.Option(Calendar.CalendarDate),
+    isGridFocused: S.Boolean,
+    locale: Calendar.LocaleConfig,
+    maybeMinDate: S.Option(Calendar.CalendarDate),
+    maybeMaxDate: S.Option(Calendar.CalendarDate),
+    disabledDaysOfWeek: S.Array(Calendar.DayOfWeek),
+    disabledDates: S.Array(Calendar.CalendarDate),
+});
+// MESSAGE
+/** Sent when the user clicks a day cell in the grid. */
+export const ClickedDay = m('ClickedDay', { date: Calendar.CalendarDate });
+/** Sent when the user presses a key on the grid container. The update maps
+ * the key to a navigation or selection action. */
+export const PressedKeyOnGrid = m('PressedKeyOnGrid', {
+    key: S.String,
+    isShift: S.Boolean,
+});
+/** 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 in Days
+ * mode. (The Years mode prev/next-page buttons dispatch `PagedYears`.) */
+export const ClickedNextMonthButton = m('ClickedNextMonthButton');
+/** 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.Literals([1, -1]),
+});
+/** Sent when the grid container receives DOM focus. */
+export const FocusedGrid = m('FocusedGrid');
+/** Sent when the grid container loses DOM focus. */
+export const BlurredGrid = m('BlurredGrid');
+/** Sent when a long-lived session's "today" reference should be refreshed. */
+export const RefreshedToday = m('RefreshedToday', {
+    today: Calendar.CalendarDate,
+});
+/** 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,
+    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).
+ * A click that commits a date in a different month emits `SelectedDate`, not
+ * `ChangedViewMonth`. The parent infers the month change from the date. */
+export const ChangedViewMonth = m('ChangedViewMonth', {
+    year: S.Int,
+    month: S.Int,
+});
+/** Emitted when the user commits a date selection via click or keyboard. The
+ * calendar's internal state already reflects the new selection by the time
+ * this fires; consumers react by lifting the date into their domain state
+ * (closing a popover, advancing a form step, etc.). */
+export const SelectedDate = m('SelectedDate', {
+    date: Calendar.CalendarDate,
+});
+/** Union of the calendar's OutMessages. */
+export const OutMessage = S.Union([ChangedViewMonth, SelectedDate]);
+/** Creates an initial calendar model. The view month defaults to the month
+ * of the initial selected date, or today if no date is pre-selected. */
+export const init = (config) => {
+    const maybeInitialSelectedDate = Option.fromNullishOr(config.initialSelectedDate);
+    const initialFocus = Option.getOrElse(maybeInitialSelectedDate, () => config.today);
+    return {
+        id: config.id,
+        today: config.today,
+        viewYear: initialFocus.year,
+        viewMonth: initialFocus.month,
+        viewMode: 'Days',
+        maybeFocusedDate: Option.some(initialFocus),
+        maybeSelectedDate: maybeInitialSelectedDate,
+        isGridFocused: false,
+        locale: config.locale ?? Calendar.defaultEnglishLocale,
+        maybeMinDate: Option.fromNullishOr(config.minDate),
+        maybeMaxDate: Option.fromNullishOr(config.maxDate),
+        disabledDaysOfWeek: config.disabledDaysOfWeek ?? [],
+        disabledDates: config.disabledDates ?? [],
+    };
+};
+const withUpdateReturn = M.withReturnType();
+const gridId = (modelId) => `${modelId}-grid`;
+const gridSelector = (modelId) => `#${gridId(modelId)}`;
+/** Focuses the calendar grid container. Parent components like DatePicker
+ * dispatch this after opening to hand focus to the grid's keyboard layer. */
+export const FocusGrid = Command.define('FocusGrid', { id: S.String }, CompletedFocusGrid)(({ id }) => Dom.focus(gridSelector(id)).pipe(Effect.ignore, Effect.as(CompletedFocusGrid())));
+/** Programmatically selects a date on the calendar, committing it as the
+ * chosen value and moving the cursor onto it. Use this in controlled-mode
+ * handlers (when the view's `onSelectedDate` callback is provided) to write
+ * the selection back to the calendar's internal state.
+ *
+ * Equivalent to dispatching `ClickedDay({ date })` through `update`. */
+export const selectDate = (model, date) => update(model, ClickedDay({ date }));
+/** Reflects an externally-sourced selected date onto the model without
+ *  emitting an OutMessage. When a date is given, sets the selection and
+ *  moves the view to the date's month so it stays visible, mirroring
+ *  `selectDate`'s state change minus the `SelectedDate` announcement. Pass
+ *  `Option.none()` to clear the selection (the view is left where it is).
+ *  Use this to mirror external truth (a URL parameter, a saved draft) onto
+ *  the calendar. Contrast with `selectDate`, a user or programmatic
+ *  *choice* that emits `SelectedDate`. Returns the model directly because
+ *  it produces no commands and no OutMessage. */
+export const reflectSelectedDate = Function.dual(2, (model, maybeDate) => Option.match(maybeDate, {
+    onNone: () => evo(model, { maybeSelectedDate: () => Option.none() }),
+    onSome: date => evo(model, {
+        maybeSelectedDate: () => Option.some(date),
+        maybeFocusedDate: () => Option.some(date),
+        viewYear: () => date.year,
+        viewMonth: () => date.month,
+    }),
+}));
+/** Reflects the minimum selectable date onto the model. Pass `Option.none()`
+ * to remove the minimum. Use this when the minimum derives from other Model
+ * state (e.g. a start date field whose current selection constrains an end
+ * date picker).
+ *
+ * Does NOT reconcile the current selection. If a previously-selected date
+ * is now below the new minimum, it remains selected. Callers should clear or
+ * reassign the selection explicitly if their domain requires it. */
+export const reflectMinDate = Function.dual(2, (model, maybeMinDate) => evo(model, { maybeMinDate: () => maybeMinDate }));
+/** Reflects the maximum selectable date onto the model. Pass `Option.none()`
+ * to remove the maximum. Does NOT reconcile the current selection. */
+export const reflectMaxDate = Function.dual(2, (model, maybeMaxDate) => evo(model, { maybeMaxDate: () => maybeMaxDate }));
+/** Reflects the list of individually-disabled dates onto the model. Pass an
+ * empty array to clear. Does NOT reconcile the current selection. */
+export const reflectDisabledDates = Function.dual(2, (model, disabledDates) => evo(model, { disabledDates: () => disabledDates }));
+/** Reflects the days of the week that are disabled (e.g. weekends) onto the
+ * model. Pass an empty array to clear. Does NOT reconcile the current
+ * selection. */
+export const reflectDisabledDaysOfWeek = Function.dual(2, (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 `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;
+/** 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));
+const clampToRange = (model, candidate) => {
+    const afterMin = Option.match(model.maybeMinDate, {
+        onNone: () => candidate,
+        onSome: min => Calendar.max(candidate, min),
+    });
+    return Option.match(model.maybeMaxDate, {
+        onNone: () => afterMin,
+        onSome: max => Calendar.min(afterMin, max),
+    });
+};
+/** Resolves a navigation key press to the next focused date candidate,
+ * along with the direction and search cap for disabled-date skipping. */
+const resolveNavigationKey = (key, isShift, focused, firstDayOfWeek) => M.value(key).pipe(M.withReturnType(), M.when('ArrowLeft', () => [
+    Calendar.addDays(focused, -1),
+    -1,
+    DAY_SKIP_CAP,
+]), M.when('ArrowRight', () => [Calendar.addDays(focused, 1), 1, DAY_SKIP_CAP]), M.when('ArrowUp', () => [Calendar.addDays(focused, -7), -1, DAY_SKIP_CAP]), M.when('ArrowDown', () => [Calendar.addDays(focused, 7), 1, DAY_SKIP_CAP]), M.when('Home', () => [
+    Calendar.startOfWeek(focused, firstDayOfWeek),
+    -1,
+    DAY_SKIP_CAP,
+]), M.when('End', () => [
+    Calendar.endOfWeek(focused, firstDayOfWeek),
+    1,
+    DAY_SKIP_CAP,
+]), M.when('PageUp', () => [
+    isShift
+        ? Calendar.addYears(focused, -1)
+        : Calendar.addMonths(focused, -1),
+    -1,
+    MONTH_SKIP_CAP,
+]), M.when('PageDown', () => [
+    isShift ? Calendar.addYears(focused, 1) : Calendar.addMonths(focused, 1),
+    1,
+    MONTH_SKIP_CAP,
+]), M.option);
+const isCommitKey = (key) => key === 'Enter' || key === ' ';
+const currentOrFallbackFocus = (model) => Option.getOrElse(model.maybeFocusedDate, () => Calendar.make(model.viewYear, model.viewMonth, 1));
+/** Applies a date selection to the model: commits the selection, moves the
+ * cursor onto the date, and syncs the view month if the selection crosses a
+ * month boundary. Always emits `SelectedDate` carrying the committed date;
+ * the parent infers month transitions from the date itself rather than from
+ * a separate `ChangedViewMonth` signal that would race with the selection. */
+const commitSelection = (model, date) => {
+    const nextModel = evo(model, {
+        maybeSelectedDate: () => Option.some(date),
+        maybeFocusedDate: () => Option.some(date),
+        viewYear: () => date.year,
+        viewMonth: () => date.month,
+    });
+    return [nextModel, Option.some(SelectedDate({ date }))];
+};
+/** Applies a focus move to the model, clamping to the allowed range and
+ * skipping disabled dates. Emits `ChangedViewMonth` if the move crossed a
+ * month boundary. */
+const applyFocusMove = (model, candidate, direction, cap) => {
+    const clamped = clampToRange(model, candidate);
+    const nextFocus = skipDisabled(model, clamped, direction, cap);
+    const crossedMonth = nextFocus.year !== model.viewYear || nextFocus.month !== model.viewMonth;
+    const nextModel = evo(model, {
+        maybeFocusedDate: () => Option.some(nextFocus),
+        viewYear: () => nextFocus.year,
+        viewMonth: () => nextFocus.month,
+    });
+    const maybeOutMessage = OptionExt.when(crossedMonth, ChangedViewMonth({ year: nextFocus.year, month: nextFocus.month }));
+    return [nextModel, maybeOutMessage];
+};
+/** Computes the focused-date cursor for a view-month change. Preserves the
+ * current day-of-month (clamping to the new month's length when needed),
+ * then runs the candidate through min/max clamping and disabled-date skipping
+ * so the cursor always lands on a real, navigable cell. */
+const moveFocusForViewChange = (model, year, month, direction) => {
+    const currentDay = Option.match(model.maybeFocusedDate, {
+        onNone: () => 1,
+        onSome: focused => focused.day,
+    });
+    const dayInNewMonth = Math.min(currentDay, Calendar.daysInMonth(year, month));
+    const candidate = Calendar.make(year, month, dayInNewMonth);
+    const clamped = clampToRange(model, candidate);
+    return skipDisabled(model, clamped, direction, DAY_SKIP_CAP);
+};
+const applyViewMonthChange = (model, year, month, direction) => {
+    if (year === model.viewYear && month === model.viewMonth) {
+        return [model, [], Option.none()];
+    }
+    const nextFocus = moveFocusForViewChange(model, year, month, direction);
+    const nextModel = evo(model, {
+        viewYear: () => year,
+        viewMonth: () => month,
+        maybeFocusedDate: () => Option.some(nextFocus),
+    });
+    return [nextModel, [], Option.some(ChangedViewMonth({ 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({
+    ClickedDay: ({ date }) => {
+        if (isDateDisabled(model, date)) {
+            return [model, [], Option.none()];
+        }
+        else {
+            const [nextModel, maybeOutMessage] = commitSelection(model, date);
+            return [nextModel, [], maybeOutMessage];
+        }
+    },
+    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()];
+            }
+            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);
+    },
+    ClickedNextMonthButton: () => {
+        const next = Calendar.addMonths(Calendar.make(model.viewYear, model.viewMonth, 1), 1);
+        return applyViewMonthChange(model, next.year, next.month, 1);
+    },
+    ClickedHeading: () => M.value(model.viewMode).pipe(withUpdateReturn, M.when('Days', () => [
+        evo(model, { viewMode: () => 'Months' }),
+        [FocusGrid({ id: model.id })],
+        Option.none(),
+    ]), M.when('Months', () => [
+        evo(model, { viewMode: () => 'Years' }),
+        [FocusGrid({ id: 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({ id: 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({ id: model.id })],
+                maybeOutMessage,
+            ];
+        }
+    },
+    PagedYears: ({ direction }) => applyYearsFocusShift(model, direction * YEARS_PAGE_SIZE),
+    FocusedGrid: () => [
+        evo(model, { isGridFocused: () => true }),
+        [],
+        Option.none(),
+    ],
+    BlurredGrid: () => [
+        evo(model, { isGridFocused: () => false }),
+        [],
+        Option.none(),
+    ],
+    RefreshedToday: ({ today }) => [
+        evo(model, { today: () => today }),
+        [],
+        Option.none(),
+    ],
+    CompletedFocusGrid: () => [model, [], Option.none()],
+}));
+// VIEW
+const headingId = (modelId) => `${modelId}-heading`;
+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',
+    'Tuesday',
+    'Wednesday',
+    'Thursday',
+    'Friday',
+    'Saturday',
+];
+const DAY_OF_WEEK_INDEX = {
+    Sunday: 0,
+    Monday: 1,
+    Tuesday: 2,
+    Wednesday: 3,
+    Thursday: 4,
+    Friday: 5,
+    Saturday: 6,
+};
+/** Rotates the Sunday-first day-name array so that `firstDayOfWeek` becomes
+ * the first entry. Used to build column headers in locale-appropriate order. */
+const rotateDayNames = (names, firstDayOfWeek) => {
+    const [front, back] = Array.splitAt(names, DAY_OF_WEEK_INDEX[firstDayOfWeek]);
+    return [...back, ...front];
+};
+const WEEKS_IN_GRID = 6;
+const DAYS_IN_WEEK = 7;
+/** Builds the 6×7 grid of dates that a calendar view renders for a given
+ * month. The grid always has 6 rows to keep height stable across months.
+ * Returns the 2D grid alongside the starting date (top-left cell) so
+ * callers can derive per-week positions without recomputing. */
+const buildGrid = (viewYear, viewMonth, firstDayOfWeek) => {
+    const firstOfMonth = Calendar.make(viewYear, viewMonth, 1);
+    const gridStart = Calendar.startOfWeek(firstOfMonth, 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 NAV_KEYS = new Set([
+    'ArrowLeft',
+    'ArrowRight',
+    'ArrowUp',
+    'ArrowDown',
+    'Home',
+    'End',
+    'PageUp',
+    'PageDown',
+    'Enter',
+    ' ',
+]);
+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 = (model, viewInputs) => {
+    const h = html();
+    const { id, viewYear, viewMonth, maybeFocusedDate, maybeSelectedDate, today, locale, isGridFocused, } = model;
+    const previousMonthLabel = viewInputs.previousMonthLabel ?? 'Previous month';
+    const nextMonthLabel = viewInputs.nextMonthLabel ?? 'Next month';
+    const headingButtonLabel = viewInputs.daysHeadingButtonLabel ?? 'Switch to month picker';
+    const headingText = `${locale.monthNames[viewMonth - 1]} ${viewYear}`;
+    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 = [h.Id(id), h.Key('Days')];
+    const previousMonthButton = [
+        h.Type('button'),
+        h.AriaLabel(previousMonthLabel),
+        h.OnClick(ClickedPreviousMonthButton()),
+    ];
+    const nextMonthButton = [
+        h.Type('button'),
+        h.AriaLabel(nextMonthLabel),
+        h.OnClick(ClickedNextMonthButton()),
+    ];
+    const headingButton = [
+        h.Type('button'),
+        h.AriaLabel(headingButtonLabel),
+        h.OnClick(ClickedHeading()),
+    ];
+    const handleKeyDown = (key, modifiers) => {
+        if (!NAV_KEYS.has(key)) {
+            return Option.none();
+        }
+        if (isCommitKey(key)) {
+            const maybeCommit = pipe(maybeFocusedDate, Option.filter(date => !isDateDisabled(model, date)), Option.map(date => ClickedDay({ date })));
+            if (Option.isSome(maybeCommit)) {
+                return maybeCommit;
+            }
+        }
+        return Option.some(PressedKeyOnGrid({ key, isShift: modifiers.shiftKey }));
+    };
+    const activeDescendantAttributes = pipe(maybeFocusedDate, Option.map(date => h.AriaActiveDescendant(dayCellId(id, date))), Option.toArray);
+    const gridAttributes = [
+        h.Id(gridId(id)),
+        h.Role('grid'),
+        h.AriaLabel(`Calendar, ${headingText}`),
+        h.AriaRowcount(Number.increment(WEEKS_IN_GRID)),
+        h.AriaColcount(DAYS_IN_WEEK),
+        h.Tabindex(0),
+        h.OnFocus(FocusedGrid()),
+        h.OnBlur(BlurredGrid()),
+        h.OnKeyDownPreventDefault(handleKeyDown),
+        ...activeDescendantAttributes,
+    ];
+    const headerRowAttributes = [h.Role('row'), h.AriaRowindex(1)];
+    const buildDayCell = (date, columnIndex) => {
+        const isSelected = Option.exists(maybeSelectedDate, Calendar.isEqual(date));
+        const isFocused = Option.exists(maybeFocusedDate, Calendar.isEqual(date));
+        const isToday = Calendar.isEqual(today, date);
+        const isInViewMonth = date.month === viewMonth && date.year === viewYear;
+        const isDisabled = isDateDisabled(model, date);
+        const stateDataAttributes = Array.getSomes([
+            OptionExt.when(isToday, h.DataAttribute('today', '')),
+            OptionExt.when(isSelected, h.DataAttribute('selected', '')),
+            OptionExt.when(isFocused && isGridFocused, h.DataAttribute('focused', '')),
+            OptionExt.when(!isInViewMonth, h.DataAttribute('outside-month', '')),
+            OptionExt.when(isDisabled, h.DataAttribute('disabled', '')),
+        ]);
+        const cellAttributes = [
+            h.Id(dayCellId(id, date)),
+            h.Role('gridcell'),
+            h.AriaSelected(isSelected),
+            h.AriaColindex(Number.increment(columnIndex)),
+            ...stateDataAttributes,
+        ];
+        const buttonAttributes = [
+            h.Type('button'),
+            h.Tabindex(-1),
+            h.AriaLabel(Calendar.formatAriaLabel(date, locale)),
+            h.AriaDisabled(isDisabled),
+            ...(isDisabled ? [] : [h.OnClick(ClickedDay({ date }))]),
+        ];
+        return {
+            date,
+            label: String(date.day),
+            cellAttributes: childAttributes(cellAttributes),
+            buttonAttributes: childAttributes(buttonAttributes),
+            isSelected,
+            isFocused: isFocused && isGridFocused,
+            isToday,
+            isInViewMonth,
+            isDisabled,
+        };
+    };
+    const weeks = weeksDates.map((weekDates, weekIndex) => {
+        const weekStart = Calendar.addDays(gridStart, weekIndex * DAYS_IN_WEEK);
+        return {
+            attributes: childAttributes([
+                h.Role('row'),
+                h.AriaRowindex(weekIndex + 2),
+                h.AriaLabel(`Week of ${Calendar.formatLong(weekStart, locale)}`),
+            ]),
+            cells: weekDates.map(buildDayCell),
+        };
+    });
+    const wrappedColumnHeaders = Array.zipWith(rotatedShortDayNames, rotatedDayNames, (name, fullName) => ({ name, fullName })).map(({ name, fullName }, columnIndex) => ({
+        name,
+        attributes: childAttributes([
+            h.Role('columnheader'),
+            h.AriaLabel(fullName),
+            h.AriaColindex(Number.increment(columnIndex)),
+        ]),
+    }));
+    return {
+        _tag: 'Days',
+        root: childAttributes(rootAttributes),
+        previousMonthButton: childAttributes(previousMonthButton),
+        nextMonthButton: childAttributes(nextMonthButton),
+        headingButton: childAttributes(headingButton),
+        heading: { id: headingId(id), text: headingText },
+        grid: childAttributes(gridAttributes),
+        headerRow: childAttributes(headerRowAttributes),
+        columnHeaders: wrappedColumnHeaders,
+        weeks,
+    };
+};
+const buildMonthsAttributes = (model, viewInputs) => {
+    const h = html();
+    const { id, viewYear, viewMonth, maybeFocusedDate, today, locale, isGridFocused, } = model;
+    const headingButtonLabel = viewInputs.monthsHeadingButtonLabel ?? 'Switch to year picker';
+    const headingText = `${viewYear}`;
+    const rootAttributes = [h.Id(id), h.Key('Months')];
+    const headingButton = [
+        h.Type('button'),
+        h.AriaLabel(headingButtonLabel),
+        h.OnClick(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), SelectedMonth({ month: focusedMonth }));
+        }
+        else {
+            return Option.some(PressedKeyOnGrid({ key, isShift: modifiers.shiftKey }));
+        }
+    };
+    const activeDescendantAttributes = [
+        h.AriaActiveDescendant(monthCellId(id, focusedMonth)),
+    ];
+    const gridAttributes = [
+        h.Id(gridId(id)),
+        h.Role('grid'),
+        h.AriaLabel(`Month picker, ${headingText}`),
+        h.Tabindex(0),
+        h.OnFocus(FocusedGrid()),
+        h.OnBlur(BlurredGrid()),
+        h.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, h.DataAttribute('today', '')),
+            OptionExt.when(isSelected, h.DataAttribute('selected', '')),
+            OptionExt.when(isFocused && isGridFocused, h.DataAttribute('focused', '')),
+            OptionExt.when(isDisabled, h.DataAttribute('disabled', '')),
+        ]);
+        const cellAttributes = [
+            h.Id(monthCellId(id, month)),
+            h.Role('gridcell'),
+            h.AriaSelected(isSelected),
+            ...stateDataAttributes,
+        ];
+        const buttonAttributes = [
+            h.Type('button'),
+            h.Tabindex(-1),
+            h.AriaLabel(`${label} ${viewYear}`),
+            h.AriaDisabled(isDisabled),
+            ...(isDisabled ? [] : [h.OnClick(SelectedMonth({ month }))]),
+        ];
+        return {
+            month,
+            label,
+            shortLabel,
+            cellAttributes: childAttributes(cellAttributes),
+            buttonAttributes: childAttributes(buttonAttributes),
+            isSelected,
+            isFocused: isFocused && isGridFocused,
+            isCurrentMonth,
+            isDisabled,
+        };
+    };
+    const cells = Array.makeBy(MONTHS_IN_YEAR, monthIndex => buildMonthCell(Number.increment(monthIndex)));
+    return {
+        _tag: 'Months',
+        root: childAttributes(rootAttributes),
+        headingButton: childAttributes(headingButton),
+        heading: { id: headingId(id), text: headingText },
+        grid: childAttributes(gridAttributes),
+        cells,
+    };
+};
+const buildYearsAttributes = (model, viewInputs) => {
+    const h = html();
+    const { id, viewYear, maybeFocusedDate, today, isGridFocused } = model;
+    const previousYearsPageLabel = viewInputs.previousYearsPageLabel ?? 'Previous 12 years';
+    const nextYearsPageLabel = viewInputs.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 = [h.Id(id), h.Key('Years')];
+    const previousPageButton = [
+        h.Type('button'),
+        h.AriaLabel(previousYearsPageLabel),
+        h.OnClick(PagedYears({ direction: -1 })),
+    ];
+    const nextPageButton = [
+        h.Type('button'),
+        h.AriaLabel(nextYearsPageLabel),
+        h.OnClick(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), SelectedYear({ year: focusedYear }));
+        }
+        else {
+            return Option.some(PressedKeyOnGrid({ key, isShift: modifiers.shiftKey }));
+        }
+    };
+    const activeDescendantAttributes = [
+        h.AriaActiveDescendant(yearCellId(id, focusedYear)),
+    ];
+    const gridAttributes = [
+        h.Id(gridId(id)),
+        h.Role('grid'),
+        h.AriaLabel(`Year picker, ${headingText}`),
+        h.Tabindex(0),
+        h.OnFocus(FocusedGrid()),
+        h.OnBlur(BlurredGrid()),
+        h.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, h.DataAttribute('today', '')),
+            OptionExt.when(isSelected, h.DataAttribute('selected', '')),
+            OptionExt.when(isFocused && isGridFocused, h.DataAttribute('focused', '')),
+            OptionExt.when(isDisabled, h.DataAttribute('disabled', '')),
+        ]);
+        const cellAttributes = [
+            h.Id(yearCellId(id, year)),
+            h.Role('gridcell'),
+            h.AriaSelected(isSelected),
+            ...stateDataAttributes,
+        ];
+        const buttonAttributes = [
+            h.Type('button'),
+            h.Tabindex(-1),
+            h.AriaLabel(label),
+            h.AriaDisabled(isDisabled),
+            ...(isDisabled ? [] : [h.OnClick(SelectedYear({ year }))]),
+        ];
+        return {
+            year,
+            label,
+            cellAttributes: childAttributes(cellAttributes),
+            buttonAttributes: childAttributes(buttonAttributes),
+            isSelected,
+            isFocused: isFocused && isGridFocused,
+            isCurrentYear,
+            isDisabled,
+        };
+    };
+    const cells = Array.makeBy(YEARS_PAGE_SIZE, offset => buildYearCell(pageStart + offset));
+    return {
+        _tag: 'Years',
+        root: childAttributes(rootAttributes),
+        previousPageButton: childAttributes(previousPageButton),
+        nextPageButton: childAttributes(nextPageButton),
+        heading: { id: headingId(id), text: headingText },
+        grid: childAttributes(gridAttributes),
+        cells,
+    };
+};
+/** Renders an accessible calendar. Publishes mode-specific ARIA attribute
+ *  bundles + 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 = defineView((model, viewInputs) => viewInputs.toView(M.value(model.viewMode).pipe(M.withReturnType(), M.when('Days', () => buildDaysAttributes(model, viewInputs)), M.when('Months', () => buildMonthsAttributes(model, viewInputs)), M.when('Years', () => buildYearsAttributes(model, viewInputs)), M.exhaustive)));