foldkit 0.78.0 → 0.80.0

package/README.md

@@ -170,6 +170,7 @@ This is what makes Foldkit unusually AI-friendly. The same property that makes t
 - **[Stopwatch](https://foldkit.dev/example-apps/stopwatch)** — Timer with start/stop/reset
 - **[Crash View](https://foldkit.dev/example-apps/crash-view)** — Custom crash fallback UI with crash reporting
 - **[Form](https://foldkit.dev/example-apps/form)** — Form validation with async email checking
+- **[Job Application](https://foldkit.dev/example-apps/job-application)** — Multi-step form with cross-field validation, file uploads, and per-step error indicators
 - **[Weather](https://foldkit.dev/example-apps/weather)** — HTTP requests with async state handling
 - **[Routing](https://foldkit.dev/example-apps/routing)** — URL routing with parser combinators
 - **[Query Sync](https://foldkit.dev/example-apps/query-sync)** — URL query parameter sync with filtering and sorting

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

@@ -3,9 +3,15 @@ import * as Calendar from '../../calendar/index.js';
 import type { CalendarDate } from '../../calendar/index.js';
 import * as Command from '../../command/index.js';
 import { type Attribute, type Html } from '../../html/index.js';
+/** 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 declare const ViewMode: S.Literal<["Days", "Months", "Years"]>;
+export type ViewMode = typeof ViewMode.Type;
 /** 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 declare const Model: S.Struct<{
     id: typeof S.String;
     today: S.filter<S.Struct<{
@@ -15,6 +21,7 @@ export declare const Model: S.Struct<{
     }>>;
     viewYear: typeof S.Int;
     viewMonth: S.filter<typeof S.Int>;
+    viewMode: S.Literal<["Days", "Months", "Years"]>;
     maybeFocusedDate: S.OptionFromSelf<S.filter<S.Struct<{
         year: typeof S.Int;
         month: S.filter<typeof S.Int>;
@@ -65,18 +72,30 @@ export declare const PressedKeyOnGrid: import("../../schema/index.js").CallableT
     key: typeof S.String;
     isShift: typeof 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 declare const ClickedPreviousMonthButton: import("../../schema/index.js").CallableTaggedStruct<"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 declare const ClickedNextMonthButton: import("../../schema/index.js").CallableTaggedStruct<"ClickedNextMonthButton", {}>;
-/** Sent when the user picks a month from the month dropdown. */
-export declare const SelectedMonthFromDropdown: import("../../schema/index.js").CallableTaggedStruct<"SelectedMonthFromDropdown", {
+/** Sent when the user clicks the calendar heading. Zooms out one mode
+ * level: Days → Months, Months → Years. Terminal in Years mode. */
+export declare const ClickedHeading: import("../../schema/index.js").CallableTaggedStruct<"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 declare const SelectedMonth: import("../../schema/index.js").CallableTaggedStruct<"SelectedMonth", {
     month: typeof S.Int;
 }>;
-/** Sent when the user picks a year from the year dropdown. */
-export declare const SelectedYearFromDropdown: import("../../schema/index.js").CallableTaggedStruct<"SelectedYearFromDropdown", {
+/** 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 declare const SelectedYear: import("../../schema/index.js").CallableTaggedStruct<"SelectedYear", {
     year: typeof 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 declare const PagedYears: import("../../schema/index.js").CallableTaggedStruct<"PagedYears", {
+    direction: S.Literal<[1, -1]>;
+}>;
 /** Sent when the grid container receives DOM focus. */
 export declare const FocusedGrid: import("../../schema/index.js").CallableTaggedStruct<"FocusedGrid", {}>;
 /** Sent when the grid container loses DOM focus. */
@@ -101,10 +120,12 @@ export declare const Message: S.Union<[import("../../schema/index.js").CallableT
 }>, import("../../schema/index.js").CallableTaggedStruct<"PressedKeyOnGrid", {
     key: typeof S.String;
     isShift: typeof S.Boolean;
-}>, import("../../schema/index.js").CallableTaggedStruct<"ClickedPreviousMonthButton", {}>, import("../../schema/index.js").CallableTaggedStruct<"ClickedNextMonthButton", {}>, import("../../schema/index.js").CallableTaggedStruct<"SelectedMonthFromDropdown", {
+}>, import("../../schema/index.js").CallableTaggedStruct<"ClickedPreviousMonthButton", {}>, import("../../schema/index.js").CallableTaggedStruct<"ClickedNextMonthButton", {}>, import("../../schema/index.js").CallableTaggedStruct<"ClickedHeading", {}>, import("../../schema/index.js").CallableTaggedStruct<"SelectedMonth", {
     month: typeof S.Int;
-}>, import("../../schema/index.js").CallableTaggedStruct<"SelectedYearFromDropdown", {
+}>, import("../../schema/index.js").CallableTaggedStruct<"SelectedYear", {
     year: typeof S.Int;
+}>, import("../../schema/index.js").CallableTaggedStruct<"PagedYears", {
+    direction: S.Literal<[1, -1]>;
 }>, import("../../schema/index.js").CallableTaggedStruct<"FocusedGrid", {}>, import("../../schema/index.js").CallableTaggedStruct<"BlurredGrid", {}>, import("../../schema/index.js").CallableTaggedStruct<"RefreshedToday", {
     today: S.filter<S.Struct<{
         year: typeof S.Int;
@@ -183,6 +204,17 @@ export declare const setDisabledDates: (model: Model, disabledDates: ReadonlyArr
 /** 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 declare const setDisabledDaysOfWeek: (model: Model, disabledDaysOfWeek: ReadonlyArray<Calendar.DayOfWeek>) => Model;
+/** 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 declare const dropToDays: (model: Model) => Model;
 /** Processes a calendar message and returns the next model, commands, and
  * optional OutMessage. */
 export declare const update: (model: Model, message: Message) => UpdateReturn;
@@ -198,39 +230,93 @@ export type DayCell<ParentMessage> = Readonly<{
     isInViewMonth: boolean;
     isDisabled: boolean;
 }>;
-/** A column header for the grid's first row (day-of-week labels). */
+/** A column header for the day grid's first row (day-of-week labels). */
 export type ColumnHeader<ParentMessage> = Readonly<{
     name: string;
     attributes: ReadonlyArray<Attribute<ParentMessage>>;
 }>;
-/** A single week row in the calendar grid, carrying its own row attributes
- * (role, aria-rowindex) alongside its 7 day cells. */
+/** A single week row in the day grid, carrying its own row attributes (role,
+ * aria-rowindex) alongside its 7 day cells. */
 export type Week<ParentMessage> = Readonly<{
     attributes: ReadonlyArray<Attribute<ParentMessage>>;
     cells: ReadonlyArray<DayCell<ParentMessage>>;
 }>;
-/** Attribute groups and derived data the calendar component provides to the
- * consumer's `toView` callback. */
-export type CalendarAttributes<ParentMessage> = Readonly<{
+/** Information about a single month cell in the rendered months grid.
+ * `label` is the locale-aware full month name (e.g. "September"); `shortLabel`
+ * is the locale-aware abbreviation (e.g. "Sep"). Render whichever fits the
+ * cell — never substring `label` to abbreviate, since that's not safe across
+ * locales. */
+export type MonthCell<ParentMessage> = Readonly<{
+    month: number;
+    label: string;
+    shortLabel: string;
+    cellAttributes: ReadonlyArray<Attribute<ParentMessage>>;
+    buttonAttributes: ReadonlyArray<Attribute<ParentMessage>>;
+    isSelected: boolean;
+    isFocused: boolean;
+    isCurrentMonth: boolean;
+    isDisabled: boolean;
+}>;
+/** Information about a single year cell in the rendered years grid. */
+export type YearCell<ParentMessage> = Readonly<{
+    year: number;
+    label: string;
+    cellAttributes: ReadonlyArray<Attribute<ParentMessage>>;
+    buttonAttributes: ReadonlyArray<Attribute<ParentMessage>>;
+    isSelected: boolean;
+    isFocused: boolean;
+    isCurrentYear: boolean;
+    isDisabled: boolean;
+}>;
+/** Attributes provided to the consumer when rendering the day grid. */
+export type DaysModeAttributes<ParentMessage> = Readonly<{
+    _tag: 'Days';
     root: ReadonlyArray<Attribute<ParentMessage>>;
     previousMonthButton: ReadonlyArray<Attribute<ParentMessage>>;
     nextMonthButton: ReadonlyArray<Attribute<ParentMessage>>;
+    headingButton: ReadonlyArray<Attribute<ParentMessage>>;
     heading: Readonly<{
         id: string;
         text: string;
     }>;
-    monthSelect: ReadonlyArray<Attribute<ParentMessage>>;
-    monthOptions: ReadonlyArray<Readonly<{
-        value: number;
-        label: string;
-    }>>;
-    yearSelect: ReadonlyArray<Attribute<ParentMessage>>;
-    yearOptions: ReadonlyArray<number>;
     grid: ReadonlyArray<Attribute<ParentMessage>>;
     headerRow: ReadonlyArray<Attribute<ParentMessage>>;
     columnHeaders: ReadonlyArray<ColumnHeader<ParentMessage>>;
     weeks: ReadonlyArray<Week<ParentMessage>>;
 }>;
+/** Attributes provided to the consumer when rendering the months grid. The
+ * 12 cells are pre-built in calendar (locale-ordered) — the consumer arranges
+ * them in whatever grid layout they prefer (3×4 is the typical choice). */
+export type MonthsModeAttributes<ParentMessage> = Readonly<{
+    _tag: 'Months';
+    root: ReadonlyArray<Attribute<ParentMessage>>;
+    headingButton: ReadonlyArray<Attribute<ParentMessage>>;
+    heading: Readonly<{
+        id: string;
+        text: string;
+    }>;
+    grid: ReadonlyArray<Attribute<ParentMessage>>;
+    cells: ReadonlyArray<MonthCell<ParentMessage>>;
+}>;
+/** Attributes provided to the consumer when rendering the years grid. The
+ * 12 cells span one paged window; prev/next buttons page by 12 years. */
+export type YearsModeAttributes<ParentMessage> = Readonly<{
+    _tag: 'Years';
+    root: ReadonlyArray<Attribute<ParentMessage>>;
+    previousPageButton: ReadonlyArray<Attribute<ParentMessage>>;
+    nextPageButton: ReadonlyArray<Attribute<ParentMessage>>;
+    heading: Readonly<{
+        id: string;
+        text: string;
+    }>;
+    grid: ReadonlyArray<Attribute<ParentMessage>>;
+    cells: ReadonlyArray<YearCell<ParentMessage>>;
+}>;
+/** Discriminated union of attribute groups and derived data the calendar
+ * component provides to the consumer's `toView` callback. The variant
+ * matches `model.viewMode` — pattern-match on `_tag` with `M.tagsExhaustive`
+ * to render each mode. */
+export type CalendarAttributes<ParentMessage> = DaysModeAttributes<ParentMessage> | MonthsModeAttributes<ParentMessage> | YearsModeAttributes<ParentMessage>;
 /** Configuration for rendering a calendar with `view`. */
 export type ViewConfig<ParentMessage> = Readonly<{
     model: Model;
@@ -245,12 +331,15 @@ export type ViewConfig<ParentMessage> = Readonly<{
     onSelectedDate?: (date: CalendarDate) => ParentMessage;
     previousMonthLabel?: string;
     nextMonthLabel?: string;
-    monthSelectLabel?: string;
-    yearSelectLabel?: string;
+    previousYearsPageLabel?: string;
+    nextYearsPageLabel?: string;
+    daysHeadingButtonLabel?: string;
+    monthsHeadingButtonLabel?: string;
 }>;
-/** 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. */
+/** 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 declare const view: <ParentMessage>(config: ViewConfig<ParentMessage>) => Html;
 /** Creates a memoized calendar view. Static config is captured in a closure;
  *  only `model` and `toParentMessage` are compared per render via `createLazy`. */

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/ui/calendar/index.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/ui/calendar/index.ts"],"names":[],"mappings":"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"}

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';

package/dist/ui/datePicker/index.d.ts

@@ -24,6 +24,7 @@ export declare const Model: S.Struct<{
         }>>;
         viewYear: typeof S.Int;
         viewMonth: S.filter<typeof S.Int>;
+        viewMode: S.Literal<["Days", "Months", "Years"]>;
         maybeFocusedDate: S.OptionFromSelf<S.filter<S.Struct<{
             year: typeof S.Int;
             month: S.filter<typeof S.Int>;
@@ -85,10 +86,12 @@ export declare const GotCalendarMessage: import("../../schema/index.js").Callabl
     }>, import("../../schema/index.js").CallableTaggedStruct<"PressedKeyOnGrid", {
         key: typeof S.String;
         isShift: typeof S.Boolean;
-    }>, import("../../schema/index.js").CallableTaggedStruct<"ClickedPreviousMonthButton", {}>, import("../../schema/index.js").CallableTaggedStruct<"ClickedNextMonthButton", {}>, import("../../schema/index.js").CallableTaggedStruct<"SelectedMonthFromDropdown", {
+    }>, import("../../schema/index.js").CallableTaggedStruct<"ClickedPreviousMonthButton", {}>, import("../../schema/index.js").CallableTaggedStruct<"ClickedNextMonthButton", {}>, import("../../schema/index.js").CallableTaggedStruct<"ClickedHeading", {}>, import("../../schema/index.js").CallableTaggedStruct<"SelectedMonth", {
         month: typeof S.Int;
-    }>, import("../../schema/index.js").CallableTaggedStruct<"SelectedYearFromDropdown", {
+    }>, import("../../schema/index.js").CallableTaggedStruct<"SelectedYear", {
         year: typeof S.Int;
+    }>, import("../../schema/index.js").CallableTaggedStruct<"PagedYears", {
+        direction: S.Literal<[1, -1]>;
     }>, import("../../schema/index.js").CallableTaggedStruct<"FocusedGrid", {}>, import("../../schema/index.js").CallableTaggedStruct<"BlurredGrid", {}>, import("../../schema/index.js").CallableTaggedStruct<"RefreshedToday", {
         today: S.filter<S.Struct<{
             year: typeof S.Int;

package/dist/ui/datePicker/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/ui/datePicker/index.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/ui/datePicker/index.ts"],"names":[],"mappings":"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"}

package/dist/ui/datePicker/index.js

@@ -108,7 +108,10 @@ export const update = (model, message) => M.value(message).pipe(withUpdateReturn
     Opened: () => {
         const [nextPopover, popoverCommands] = Popover.open(model.popover);
         return [
-            evo(model, { popover: () => nextPopover }),
+            evo(model, {
+                popover: () => nextPopover,
+                calendar: () => UiCalendar.dropToDays(model.calendar),
+            }),
             mapPopoverCommands(popoverCommands),
             Option.none(),
         ];
@@ -116,7 +119,10 @@ export const update = (model, message) => M.value(message).pipe(withUpdateReturn
     Closed: () => {
         const [nextPopover, popoverCommands] = Popover.close(model.popover);
         return [
-            evo(model, { popover: () => nextPopover }),
+            evo(model, {
+                popover: () => nextPopover,
+                calendar: () => UiCalendar.dropToDays(model.calendar),
+            }),
             mapPopoverCommands(popoverCommands),
             Option.none(),
         ];

package/dist/ui/virtualList/index.d.ts

@@ -68,8 +68,26 @@ export declare const update: (model: Model, message: Message) => readonly [Model
  *
  *  Should be called after the container has rendered. If the container is not
  *  yet in the DOM the Command silently no-ops (the model still transitions
- *  through `ScrollingToIndex` → `Idle` via the version-matched completion). */
+ *  through `ScrollingToIndex` → `Idle` via the version-matched completion).
+ *
+ *  Assumes uniform row heights: target scroll position is computed as
+ *  `index * model.rowHeightPx`. For variable-height rows, use
+ *  `scrollToIndexVariable`. */
 export declare const scrollToIndex: (model: Model, index: number) => readonly [Model, ReadonlyArray<Command.Command<Message>>];
+/** Variable-height counterpart of `scrollToIndex`. Walks the heights of items
+ *  before `index` to compute the target `scrollTop`. Use this when rendering
+ *  the list with `itemToRowHeightPx`; use `scrollToIndex` for uniform heights.
+ *
+ *  Out-of-range indices clamp to the corresponding edge: negative or zero
+ *  scrolls to the top, indices past the end scroll past the last row.
+ *
+ *  Note: when restoring `initialScrollTop` on the first measurement of a
+ *  variable-height list, the runtime falls back to uniform-height math (using
+ *  `model.rowHeightPx`) because items aren't reachable from the `update`
+ *  function. Consumers who need an accurate initial scroll on a
+ *  variable-height list should call `scrollToIndexVariable` after the first
+ *  `MeasuredContainer` arrives. */
+export declare const scrollToIndexVariable: <Item>(model: Model, items: ReadonlyArray<Item>, itemToRowHeightPx: (item: Item, index: number) => number, index: number) => readonly [Model, ReadonlyArray<Command.Command<Message>>];
 /** Slice of the data array that the view should render, plus the spacer
  *  heights that keep the scrollbar physically correct. The first row in the
  *  slice corresponds to data index `startIndex`. */
@@ -82,10 +100,25 @@ export type VisibleWindow = Readonly<{
 /** Computes the visible slice of a data array given the current scroll
  *  position, container height, row height, and an overscan buffer.
  *
+ *  Assumes uniform row heights via `model.rowHeightPx`. For variable-height
+ *  rows, use `visibleWindowVariable`.
+ *
  *  Returns `Option.none()` when the container has not yet been measured;
  *  callers should render a placeholder (or `Html.empty`) and wait for the
  *  first `MeasuredContainer` message. */
 export declare const visibleWindow: (model: Model, itemCount: number, overscan: number) => Option.Option<VisibleWindow>;
+/** Variable-height counterpart of `visibleWindow`. Walks the heights of every
+ *  item to build a prefix-sum array, then locates the visible slice with two
+ *  linear searches.
+ *
+ *  Cost is O(N) per call, walking the whole `items` array once to build the
+ *  prefix sums. For lists in the 10k-item range, this comfortably fits inside
+ *  a 60Hz scroll budget. Larger lists or hotter scroll paths can layer a
+ *  prefix-sum cache invalidated when items change; that lives behind the same
+ *  return shape so consumers don't have to know.
+ *
+ *  Returns `Option.none()` when the container has not yet been measured. */
+export declare const visibleWindowVariable: <Item>(model: Model, items: ReadonlyArray<Item>, itemToRowHeightPx: (item: Item, index: number) => number, overscan: number) => Option.Option<VisibleWindow>;
 /** Schema describing the subscription dependencies for container scroll and
  *  resize tracking. */
 export declare const SubscriptionDeps: S.Struct<{
@@ -150,6 +183,14 @@ export type ViewConfig<Message, Item> = Readonly<{
     items: ReadonlyArray<Item>;
     itemToKey: (item: Item, index: number) => string;
     itemToView: (item: Item, index: number) => Html;
+    /** Optional per-item row height in pixels. When provided, the list renders
+     *  with variable-height rows: each row's wrapper takes the height returned
+     *  by this callback, and scroll math walks the items to compute the visible
+     *  slice and spacers. When absent, all rows use `model.rowHeightPx`. Use
+     *  this for tables with wrapping cells, taller detail rows, or any list
+     *  where rows differ. Prefer the uniform `rowHeightPx` path when row
+     *  heights are stable: it avoids the per-render walk over `items`. */
+    itemToRowHeightPx?: (item: Item, index: number) => number;
     /** Number of rows rendered above and below the visible viewport. Higher
      *  values smooth out fast scroll at the cost of mounting more DOM. Default
      *  is 5; react-window uses 1 and react-virtualized uses 3. Pick a value

package/dist/ui/virtualList/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/ui/virtualList/index.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/ui/virtualList/index.ts"],"names":[],"mappings":"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"}

package/dist/ui/virtualList/index.js

@@ -1,4 +1,4 @@
-import { Array, Effect, Match as M, Number, Option, Schema as S, Stream, } from 'effect';
+import { Array, Effect, Match as M, Number, Option, Schema as S, Stream, pipe, } from 'effect';
 import * as Command from '../../command/index.js';
 import { createLazy, html, } from '../../html/index.js';
 import { m } from '../../message/index.js';
@@ -110,6 +110,16 @@ export const update = (model, message) => M.value(message).pipe(M.withReturnType
         }
     },
 }));
+const buildScrollToIndex = (model, index, targetScrollTop) => {
+    const nextVersion = Number.increment(model.pendingScrollVersion);
+    return [
+        evo(model, {
+            pendingScrollVersion: () => nextVersion,
+            pendingScroll: () => ScrollingToIndex({ index, version: nextVersion }),
+        }),
+        [applyScroll(model.id, targetScrollTop, nextVersion)],
+    ];
+};
 /** Programmatically scrolls the container so the row at `index` is visible.
  *  Returns the next model and a Command that mutates `element.scrollTop`. The
  *  natural scroll event then flows back through `ScrolledContainer` and the
@@ -121,22 +131,42 @@ export const update = (model, message) => M.value(message).pipe(M.withReturnType
  *
  *  Should be called after the container has rendered. If the container is not
  *  yet in the DOM the Command silently no-ops (the model still transitions
- *  through `ScrollingToIndex` → `Idle` via the version-matched completion). */
-export const scrollToIndex = (model, index) => {
-    const nextVersion = Number.increment(model.pendingScrollVersion);
-    const targetScrollTop = index * model.rowHeightPx;
-    return [
-        evo(model, {
-            pendingScrollVersion: () => nextVersion,
-            pendingScroll: () => ScrollingToIndex({ index, version: nextVersion }),
-        }),
-        [applyScroll(model.id, targetScrollTop, nextVersion)],
-    ];
+ *  through `ScrollingToIndex` → `Idle` via the version-matched completion).
+ *
+ *  Assumes uniform row heights: target scroll position is computed as
+ *  `index * model.rowHeightPx`. For variable-height rows, use
+ *  `scrollToIndexVariable`. */
+export const scrollToIndex = (model, index) => buildScrollToIndex(model, index, index * model.rowHeightPx);
+/** Variable-height counterpart of `scrollToIndex`. Walks the heights of items
+ *  before `index` to compute the target `scrollTop`. Use this when rendering
+ *  the list with `itemToRowHeightPx`; use `scrollToIndex` for uniform heights.
+ *
+ *  Out-of-range indices clamp to the corresponding edge: negative or zero
+ *  scrolls to the top, indices past the end scroll past the last row.
+ *
+ *  Note: when restoring `initialScrollTop` on the first measurement of a
+ *  variable-height list, the runtime falls back to uniform-height math (using
+ *  `model.rowHeightPx`) because items aren't reachable from the `update`
+ *  function. Consumers who need an accurate initial scroll on a
+ *  variable-height list should call `scrollToIndexVariable` after the first
+ *  `MeasuredContainer` arrives. */
+export const scrollToIndexVariable = (model, items, itemToRowHeightPx, index) => {
+    const cumulativeOffsets = prefixSum(items, itemToRowHeightPx);
+    const targetScrollTop = pipe(cumulativeOffsets, Array.get(Math.max(0, index)), Option.getOrElse(() => lastOrZero(cumulativeOffsets)));
+    return buildScrollToIndex(model, index, targetScrollTop);
 };
 const clampIndex = (index, itemCount) => Math.max(0, Math.min(index, itemCount));
+const prefixSum = (items, itemToRowHeightPx) => {
+    const heights = Array.map(items, itemToRowHeightPx);
+    return Array.scan(heights, 0, (cumulative, height) => cumulative + height);
+};
+const lastOrZero = (values) => pipe(values, Array.last, Option.getOrElse(() => 0));
 /** Computes the visible slice of a data array given the current scroll
  *  position, container height, row height, and an overscan buffer.
  *
+ *  Assumes uniform row heights via `model.rowHeightPx`. For variable-height
+ *  rows, use `visibleWindowVariable`.
+ *
  *  Returns `Option.none()` when the container has not yet been measured;
  *  callers should render a placeholder (or `Html.empty`) and wait for the
  *  first `MeasuredContainer` message. */
@@ -157,6 +187,41 @@ export const visibleWindow = (model, itemCount, overscan) => M.value(model.measu
         });
     },
 }));
+/** Variable-height counterpart of `visibleWindow`. Walks the heights of every
+ *  item to build a prefix-sum array, then locates the visible slice with two
+ *  linear searches.
+ *
+ *  Cost is O(N) per call, walking the whole `items` array once to build the
+ *  prefix sums. For lists in the 10k-item range, this comfortably fits inside
+ *  a 60Hz scroll budget. Larger lists or hotter scroll paths can layer a
+ *  prefix-sum cache invalidated when items change; that lives behind the same
+ *  return shape so consumers don't have to know.
+ *
+ *  Returns `Option.none()` when the container has not yet been measured. */
+export const visibleWindowVariable = (model, items, itemToRowHeightPx, overscan) => M.value(model.measurement).pipe(M.withReturnType(), M.tagsExhaustive({
+    Unmeasured: () => Option.none(),
+    Measured: ({ containerHeight }) => {
+        const itemCount = items.length;
+        const cumulativeOffsets = prefixSum(items, itemToRowHeightPx);
+        const totalHeight = lastOrZero(cumulativeOffsets);
+        const firstVisibleIndex = pipe(cumulativeOffsets, Array.findFirstIndex(Number.greaterThan(model.scrollTop)), Option.match({
+            onNone: () => itemCount,
+            onSome: index => Math.max(0, index - 1),
+        }));
+        const lastVisibleIndex = pipe(cumulativeOffsets, Array.findFirstIndex(Number.greaterThanOrEqualTo(model.scrollTop + containerHeight)), Option.getOrElse(() => itemCount));
+        const startIndex = clampIndex(firstVisibleIndex - overscan, itemCount);
+        const endIndex = clampIndex(lastVisibleIndex + overscan, itemCount);
+        const topSpacerHeight = pipe(cumulativeOffsets, Array.get(startIndex), Option.getOrElse(() => 0));
+        const offsetAtEnd = pipe(cumulativeOffsets, Array.get(endIndex), Option.getOrElse(() => totalHeight));
+        const bottomSpacerHeight = totalHeight - offsetAtEnd;
+        return Option.some({
+            startIndex,
+            endIndex,
+            topSpacerHeight,
+            bottomSpacerHeight,
+        });
+    },
+}));
 // SUBSCRIPTION
 const containerElement = (id) => Option.fromNullable(document.getElementById(id));
 /** Schema describing the subscription dependencies for container scroll and
@@ -278,7 +343,7 @@ const DEFAULT_OVERSCAN = 5;
  *  count of currently mounted rows. */
 export const view = (config) => {
     const { AriaPosinset, AriaSetsize, Class, DataAttribute, Id, Role, Style, keyed, } = html();
-    const { model, items, itemToKey, itemToView, overscan = DEFAULT_OVERSCAN, rowElement = 'li', className, attributes = [], } = config;
+    const { model, items, itemToKey, itemToView, itemToRowHeightPx, overscan = DEFAULT_OVERSCAN, rowElement = 'li', className, attributes = [], } = config;
     const containerAttributes = [
         Id(model.id),
         Role('list'),
@@ -293,7 +358,13 @@ export const view = (config) => {
         ...attributes,
     ];
     const renderContainer = (children) => keyed('ul')(model.id, containerAttributes, children);
-    return Option.match(visibleWindow(model, items.length, overscan), {
+    const maybeWindow = itemToRowHeightPx !== undefined
+        ? visibleWindowVariable(model, items, itemToRowHeightPx, overscan)
+        : visibleWindow(model, items.length, overscan);
+    const rowHeightFor = (item, dataIndex) => itemToRowHeightPx !== undefined
+        ? itemToRowHeightPx(item, dataIndex)
+        : model.rowHeightPx;
+    return Option.match(maybeWindow, {
         onNone: () => renderContainer([]),
         onSome: ({ startIndex, endIndex, topSpacerHeight, bottomSpacerHeight }) => {
             const visibleItems = items.slice(startIndex, endIndex);
@@ -306,7 +377,10 @@ export const view = (config) => {
                     DataAttribute('virtual-list-item-index', String(dataIndex)),
                     AriaSetsize(items.length),
                     AriaPosinset(dataIndex + 1),
-                    Style({ height: `${model.rowHeightPx}px`, display: 'grid' }),
+                    Style({
+                        height: `${rowHeightFor(item, dataIndex)}px`,
+                        display: 'grid',
+                    }),
                 ], [itemToView(item, dataIndex)]);
             });
             return renderContainer([topSpacer, ...renderedRows, bottomSpacer]);

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

@@ -1,3 +1,3 @@
-export { init, update, scrollToIndex, view, lazy, subscriptions, visibleWindow, Model, Message, ScrolledContainer, MeasuredContainer, CompletedApplyScroll, SubscriptionDeps, } from './index.js';
+export { init, update, scrollToIndex, scrollToIndexVariable, view, lazy, subscriptions, visibleWindow, visibleWindowVariable, Model, Message, ScrolledContainer, MeasuredContainer, CompletedApplyScroll, SubscriptionDeps, } from './index.js';
 export type { InitConfig, ViewConfig, VisibleWindow } from './index.js';
 //# sourceMappingURL=public.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"public.d.ts","sourceRoot":"","sources":["../../../src/ui/virtualList/public.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,IAAI,EACJ,MAAM,EACN,aAAa,EACb,IAAI,EACJ,IAAI,EACJ,aAAa,EACb,aAAa,EACb,KAAK,EACL,OAAO,EACP,iBAAiB,EACjB,iBAAiB,EACjB,oBAAoB,EACpB,gBAAgB,GACjB,MAAM,YAAY,CAAA;AAEnB,YAAY,EAAE,UAAU,EAAE,UAAU,EAAE,aAAa,EAAE,MAAM,YAAY,CAAA"}
+{"version":3,"file":"public.d.ts","sourceRoot":"","sources":["../../../src/ui/virtualList/public.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,IAAI,EACJ,MAAM,EACN,aAAa,EACb,qBAAqB,EACrB,IAAI,EACJ,IAAI,EACJ,aAAa,EACb,aAAa,EACb,qBAAqB,EACrB,KAAK,EACL,OAAO,EACP,iBAAiB,EACjB,iBAAiB,EACjB,oBAAoB,EACpB,gBAAgB,GACjB,MAAM,YAAY,CAAA;AAEnB,YAAY,EAAE,UAAU,EAAE,UAAU,EAAE,aAAa,EAAE,MAAM,YAAY,CAAA"}

package/dist/ui/virtualList/public.js

@@ -1 +1 @@
-export { init, update, scrollToIndex, view, lazy, subscriptions, visibleWindow, Model, Message, ScrolledContainer, MeasuredContainer, CompletedApplyScroll, SubscriptionDeps, } from './index.js';
+export { init, update, scrollToIndex, scrollToIndexVariable, view, lazy, subscriptions, visibleWindow, visibleWindowVariable, Model, Message, ScrolledContainer, MeasuredContainer, CompletedApplyScroll, SubscriptionDeps, } from './index.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "foldkit",
-  "version": "0.78.0",
+  "version": "0.80.0",
   "description": "A frontend framework for TypeScript, built on Effect, using The Elm Architecture",
   "type": "module",
   "main": "./dist/index.js",