foldkit 0.111.1 → 0.112.0

package/dist/ui/calendar/index.js

@@ -1,824 +0,0 @@
-import { Array, Effect, Function, Match as M, Number, Option, Schema as S, pipe, } from 'effect';
-import * as Calendar from '../../calendar/index.js';
-import * as Command from '../../command/index.js';
-import * as Dom from '../../dom/index.js';
-import { OptionExt } from '../../effectExtensions/index.js';
-import { childAttributes, defineView, html, } from '../../html/index.js';
-import { m } from '../../message/index.js';
-import { evo } from '../../struct/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.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 `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;
-/** 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)));