foldkit 0.100.1 → 0.102.0

package/dist/ui/calendar/index.js

@@ -1,9 +1,9 @@
-import { Array, Effect, Match as M, Option, Schema as S, pipe } from 'effect';
+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 { createLazy, html, } from '../../html/index.js';
+import { childAttributes, defineView, html, } from '../../html/index.js';
 import { m } from '../../message/index.js';
 import { evo } from '../../struct/index.js';
 // MODEL
@@ -87,19 +87,21 @@ export const Message = S.Union([
 // 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).
- *
- * Date selection does NOT use OutMessage — consumers subscribe via the
- * `onSelectedDate` callback in `ViewConfig`, matching the Listbox/Popover
- * controlled-component pattern. Use `Calendar.selectDate(model, date)` to
- * write back when handling the callback. */
+ * 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,
 });
-/** The calendar's OutMessage. Only one variant — `ChangedViewMonth` — which
- * fires when navigation shifts the visible month. Date selection goes through
- * the `onSelectedDate` ViewConfig callback, not OutMessage. */
-export const OutMessage = ChangedViewMonth;
+/** 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) => {
@@ -134,30 +136,50 @@ export const FocusGrid = Command.define('FocusGrid', { id: S.String }, Completed
  *
  * Equivalent to dispatching `ClickedDay({ date })` through `update`. */
 export const selectDate = (model, date) => update(model, ClickedDay({ date }));
-/** Sets the minimum selectable date. 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).
+/** 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
+ * 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 setMinDate = (model, maybeMinDate) => evo(model, { maybeMinDate: () => maybeMinDate });
-/** Sets the maximum selectable date. Pass `Option.none()` to remove the
- * maximum. Does NOT reconcile the current selection. */
-export const setMaxDate = (model, maybeMaxDate) => evo(model, { maybeMaxDate: () => maybeMaxDate });
-/** Sets the list of individually-disabled dates. Pass an empty array to
- * clear. Does NOT reconcile the current selection. */
-export const setDisabledDates = (model, disabledDates) => evo(model, { disabledDates: () => disabledDates });
-/** Sets the days of the week that are disabled (e.g. weekends). Pass an
+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 setDisabledDaysOfWeek = (model, disabledDaysOfWeek) => evo(model, { disabledDaysOfWeek: () => disabledDaysOfWeek });
+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
+ * 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
+ * `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. */
@@ -221,18 +243,17 @@ 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. Emits `ChangedViewMonth` only when the commit crosses a
- * month boundary. */
+ * 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 crossedMonth = date.year !== model.viewYear || date.month !== model.viewMonth;
     const nextModel = evo(model, {
         maybeSelectedDate: () => Option.some(date),
         maybeFocusedDate: () => Option.some(date),
         viewYear: () => date.year,
         viewMonth: () => date.month,
     });
-    const maybeOutMessage = OptionExt.when(crossedMonth, ChangedViewMonth({ year: date.year, month: date.month }));
-    return [nextModel, maybeOutMessage];
+    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
@@ -292,7 +313,7 @@ const resolveMonthsKey = (key) => M.value(key).pipe(M.withReturnType(), M.when('
  * 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 —
+ * `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);
@@ -491,76 +512,58 @@ const isMonthDisabled = (model, year, month) => {
  * 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 buildDaysAttributes = (model, viewInputs) => {
     const h = html();
-    const { model, toParentMessage, onSelectedDate } = config;
     const { id, viewYear, viewMonth, maybeFocusedDate, maybeSelectedDate, today, locale, isGridFocused, } = model;
-    const dispatchSelectedDate = (date) => onSelectedDate !== undefined
-        ? onSelectedDate(date)
-        : toParentMessage(ClickedDay({ date }));
-    const previousMonthLabel = config.previousMonthLabel ?? 'Previous month';
-    const nextMonthLabel = config.nextMonthLabel ?? 'Next month';
-    const headingButtonLabel = config.daysHeadingButtonLabel ?? 'Switch to month picker';
+    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 rootAttributes = [h.Id(id), h.Key('Days')];
     const previousMonthButton = [
         h.Type('button'),
         h.AriaLabel(previousMonthLabel),
-        h.OnClick(toParentMessage(ClickedPreviousMonthButton())),
+        h.OnClick(ClickedPreviousMonthButton()),
     ];
     const nextMonthButton = [
         h.Type('button'),
         h.AriaLabel(nextMonthLabel),
-        h.OnClick(toParentMessage(ClickedNextMonthButton())),
+        h.OnClick(ClickedNextMonthButton()),
     ];
     const headingButton = [
         h.Type('button'),
         h.AriaLabel(headingButtonLabel),
-        h.OnClick(toParentMessage(ClickedHeading())),
+        h.OnClick(ClickedHeading()),
     ];
     const handleKeyDown = (key, modifiers) => {
         if (!NAV_KEYS.has(key)) {
             return Option.none();
         }
-        if (isCommitKey(key) && onSelectedDate !== undefined) {
-            return pipe(maybeFocusedDate, Option.filter(date => !isDateDisabled(model, date)), Option.map(onSelectedDate));
+        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(toParentMessage(PressedKeyOnGrid({ key, isShift: modifiers.shiftKey })));
+        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(WEEKS_IN_GRID + 1),
+        h.AriaRowcount(Number.increment(WEEKS_IN_GRID)),
         h.AriaColcount(DAYS_IN_WEEK),
         h.Tabindex(0),
-        h.OnFocus(toParentMessage(FocusedGrid())),
-        h.OnBlur(toParentMessage(BlurredGrid())),
+        h.OnFocus(FocusedGrid()),
+        h.OnBlur(BlurredGrid()),
         h.OnKeyDownPreventDefault(handleKeyDown),
         ...activeDescendantAttributes,
     ];
-    const headerRowAttributes = [
-        h.Role('row'),
-        h.AriaRowindex(1),
-    ];
-    const columnHeaders = Array.zipWith(rotatedShortDayNames, rotatedDayNames, (name, fullName) => ({
-        name,
-        fullName,
-    })).map(({ name, fullName }, columnIndex) => ({
-        name,
-        attributes: [
-            h.Role('columnheader'),
-            h.AriaLabel(fullName),
-            h.AriaColindex(columnIndex + 1),
-        ],
-    }));
+    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));
@@ -578,7 +581,7 @@ const buildDaysAttributes = (config) => {
             h.Id(dayCellId(id, date)),
             h.Role('gridcell'),
             h.AriaSelected(isSelected),
-            h.AriaColindex(columnIndex + 1),
+            h.AriaColindex(Number.increment(columnIndex)),
             ...stateDataAttributes,
         ];
         const buttonAttributes = [
@@ -586,13 +589,13 @@ const buildDaysAttributes = (config) => {
             h.Tabindex(-1),
             h.AriaLabel(Calendar.formatAriaLabel(date, locale)),
             h.AriaDisabled(isDisabled),
-            ...(isDisabled ? [] : [h.OnClick(dispatchSelectedDate(date))]),
+            ...(isDisabled ? [] : [h.OnClick(ClickedDay({ date }))]),
         ];
         return {
             date,
             label: String(date.day),
-            cellAttributes,
-            buttonAttributes,
+            cellAttributes: childAttributes(cellAttributes),
+            buttonAttributes: childAttributes(buttonAttributes),
             isSelected,
             isFocused: isFocused && isGridFocused,
             isToday,
@@ -603,41 +606,45 @@ const buildDaysAttributes = (config) => {
     const weeks = weeksDates.map((weekDates, weekIndex) => {
         const weekStart = Calendar.addDays(gridStart, weekIndex * DAYS_IN_WEEK);
         return {
-            attributes: [
+            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: rootAttributes,
-        previousMonthButton,
-        nextMonthButton,
-        headingButton,
+        root: childAttributes(rootAttributes),
+        previousMonthButton: childAttributes(previousMonthButton),
+        nextMonthButton: childAttributes(nextMonthButton),
+        headingButton: childAttributes(headingButton),
         heading: { id: headingId(id), text: headingText },
-        grid: gridAttributes,
-        headerRow: headerRowAttributes,
-        columnHeaders,
+        grid: childAttributes(gridAttributes),
+        headerRow: childAttributes(headerRowAttributes),
+        columnHeaders: wrappedColumnHeaders,
         weeks,
     };
 };
-const buildMonthsAttributes = (config) => {
+const buildMonthsAttributes = (model, viewInputs) => {
     const h = html();
-    const { model, toParentMessage } = config;
     const { id, viewYear, viewMonth, maybeFocusedDate, today, locale, isGridFocused, } = model;
-    const headingButtonLabel = config.monthsHeadingButtonLabel ?? 'Switch to year picker';
+    const headingButtonLabel = viewInputs.monthsHeadingButtonLabel ?? 'Switch to year picker';
     const headingText = `${viewYear}`;
-    const rootAttributes = [
-        h.Id(id),
-        h.Key('Months'),
-    ];
+    const rootAttributes = [h.Id(id), h.Key('Months')];
     const headingButton = [
         h.Type('button'),
         h.AriaLabel(headingButtonLabel),
-        h.OnClick(toParentMessage(ClickedHeading())),
+        h.OnClick(ClickedHeading()),
     ];
     const focusedMonth = Option.match(maybeFocusedDate, {
         onNone: () => viewMonth,
@@ -648,10 +655,10 @@ const buildMonthsAttributes = (config) => {
             return Option.none();
         }
         else if (isCommitKey(key)) {
-            return OptionExt.when(!isMonthDisabled(model, viewYear, focusedMonth), toParentMessage(SelectedMonth({ month: focusedMonth })));
+            return OptionExt.when(!isMonthDisabled(model, viewYear, focusedMonth), SelectedMonth({ month: focusedMonth }));
         }
         else {
-            return Option.some(toParentMessage(PressedKeyOnGrid({ key, isShift: modifiers.shiftKey })));
+            return Option.some(PressedKeyOnGrid({ key, isShift: modifiers.shiftKey }));
         }
     };
     const activeDescendantAttributes = [
@@ -662,8 +669,8 @@ const buildMonthsAttributes = (config) => {
         h.Role('grid'),
         h.AriaLabel(`Month picker, ${headingText}`),
         h.Tabindex(0),
-        h.OnFocus(toParentMessage(FocusedGrid())),
-        h.OnBlur(toParentMessage(BlurredGrid())),
+        h.OnFocus(FocusedGrid()),
+        h.OnBlur(BlurredGrid()),
         h.OnKeyDownPreventDefault(handleKeyDown),
         ...activeDescendantAttributes,
     ];
@@ -691,38 +698,35 @@ const buildMonthsAttributes = (config) => {
             h.Tabindex(-1),
             h.AriaLabel(`${label} ${viewYear}`),
             h.AriaDisabled(isDisabled),
-            ...(isDisabled
-                ? []
-                : [h.OnClick(toParentMessage(SelectedMonth({ month })))]),
+            ...(isDisabled ? [] : [h.OnClick(SelectedMonth({ month }))]),
         ];
         return {
             month,
             label,
             shortLabel,
-            cellAttributes,
-            buttonAttributes,
+            cellAttributes: childAttributes(cellAttributes),
+            buttonAttributes: childAttributes(buttonAttributes),
             isSelected,
             isFocused: isFocused && isGridFocused,
             isCurrentMonth,
             isDisabled,
         };
     };
-    const cells = Array.makeBy(MONTHS_IN_YEAR, monthIndex => buildMonthCell(monthIndex + 1));
+    const cells = Array.makeBy(MONTHS_IN_YEAR, monthIndex => buildMonthCell(Number.increment(monthIndex)));
     return {
         _tag: 'Months',
-        root: rootAttributes,
-        headingButton,
+        root: childAttributes(rootAttributes),
+        headingButton: childAttributes(headingButton),
         heading: { id: headingId(id), text: headingText },
-        grid: gridAttributes,
+        grid: childAttributes(gridAttributes),
         cells,
     };
 };
-const buildYearsAttributes = (config) => {
+const buildYearsAttributes = (model, viewInputs) => {
     const h = 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 previousYearsPageLabel = viewInputs.previousYearsPageLabel ?? 'Previous 12 years';
+    const nextYearsPageLabel = viewInputs.nextYearsPageLabel ?? 'Next 12 years';
     const cursorYear = Option.match(maybeFocusedDate, {
         onNone: () => viewYear,
         onSome: date => date.year,
@@ -730,19 +734,16 @@ const buildYearsAttributes = (config) => {
     const pageStart = yearsPageStart(cursorYear);
     const pageEnd = pageStart + YEARS_PAGE_SIZE - 1;
     const headingText = `${pageStart}–${pageEnd}`;
-    const rootAttributes = [
-        h.Id(id),
-        h.Key('Years'),
-    ];
+    const rootAttributes = [h.Id(id), h.Key('Years')];
     const previousPageButton = [
         h.Type('button'),
         h.AriaLabel(previousYearsPageLabel),
-        h.OnClick(toParentMessage(PagedYears({ direction: -1 }))),
+        h.OnClick(PagedYears({ direction: -1 })),
     ];
     const nextPageButton = [
         h.Type('button'),
         h.AriaLabel(nextYearsPageLabel),
-        h.OnClick(toParentMessage(PagedYears({ direction: 1 }))),
+        h.OnClick(PagedYears({ direction: 1 })),
     ];
     const focusedYear = cursorYear;
     const handleKeyDown = (key, modifiers) => {
@@ -750,10 +751,10 @@ const buildYearsAttributes = (config) => {
             return Option.none();
         }
         else if (isCommitKey(key)) {
-            return OptionExt.when(!isYearDisabled(model, focusedYear), toParentMessage(SelectedYear({ year: focusedYear })));
+            return OptionExt.when(!isYearDisabled(model, focusedYear), SelectedYear({ year: focusedYear }));
         }
         else {
-            return Option.some(toParentMessage(PressedKeyOnGrid({ key, isShift: modifiers.shiftKey })));
+            return Option.some(PressedKeyOnGrid({ key, isShift: modifiers.shiftKey }));
         }
     };
     const activeDescendantAttributes = [
@@ -764,8 +765,8 @@ const buildYearsAttributes = (config) => {
         h.Role('grid'),
         h.AriaLabel(`Year picker, ${headingText}`),
         h.Tabindex(0),
-        h.OnFocus(toParentMessage(FocusedGrid())),
-        h.OnBlur(toParentMessage(BlurredGrid())),
+        h.OnFocus(FocusedGrid()),
+        h.OnBlur(BlurredGrid()),
         h.OnKeyDownPreventDefault(handleKeyDown),
         ...activeDescendantAttributes,
     ];
@@ -792,15 +793,13 @@ const buildYearsAttributes = (config) => {
             h.Tabindex(-1),
             h.AriaLabel(label),
             h.AriaDisabled(isDisabled),
-            ...(isDisabled
-                ? []
-                : [h.OnClick(toParentMessage(SelectedYear({ year })))]),
+            ...(isDisabled ? [] : [h.OnClick(SelectedYear({ year }))]),
         ];
         return {
             year,
             label,
-            cellAttributes,
-            buttonAttributes,
+            cellAttributes: childAttributes(cellAttributes),
+            buttonAttributes: childAttributes(buttonAttributes),
             isSelected,
             isFocused: isFocused && isGridFocused,
             isCurrentYear,
@@ -810,26 +809,16 @@ const buildYearsAttributes = (config) => {
     const cells = Array.makeBy(YEARS_PAGE_SIZE, offset => buildYearCell(pageStart + offset));
     return {
         _tag: 'Years',
-        root: rootAttributes,
-        previousPageButton,
-        nextPageButton,
+        root: childAttributes(rootAttributes),
+        previousPageButton: childAttributes(previousPageButton),
+        nextPageButton: childAttributes(nextPageButton),
         heading: { id: headingId(id), text: headingText },
-        grid: gridAttributes,
+        grid: childAttributes(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) => {
-    const lazyView = createLazy();
-    return (model, toParentMessage) => lazyView((currentModel, currentToParentMessage) => view({
-        ...staticConfig,
-        model: currentModel,
-        toParentMessage: currentToParentMessage,
-    }), [model, toParentMessage]);
-};
+/** 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)));

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

@@ -1,3 +1,3 @@
-export { init, update, view, lazy, 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';
+export { init, update, view, selectDate, reflectSelectedDate, reflectMinDate, reflectMaxDate, reflectDisabledDates, reflectDisabledDaysOfWeek, dropToDays, Model, ViewMode, Message, OutMessage, ChangedViewMonth, SelectedDate, ClickedDay, PressedKeyOnGrid, ClickedPreviousMonthButton, ClickedNextMonthButton, ClickedHeading, SelectedMonth, SelectedYear, PagedYears, FocusedGrid, BlurredGrid, RefreshedToday, CompletedFocusGrid, FocusGrid, } from './index.js';
+export type { InitConfig, ViewInputs, 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,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"}
+{"version":3,"file":"public.d.ts","sourceRoot":"","sources":["../../../src/ui/calendar/public.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,IAAI,EACJ,MAAM,EACN,IAAI,EACJ,UAAU,EACV,mBAAmB,EACnB,cAAc,EACd,cAAc,EACd,oBAAoB,EACpB,yBAAyB,EACzB,UAAU,EACV,KAAK,EACL,QAAQ,EACR,OAAO,EACP,UAAU,EACV,gBAAgB,EAChB,YAAY,EACZ,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, 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 { init, update, view, selectDate, reflectSelectedDate, reflectMinDate, reflectMaxDate, reflectDisabledDates, reflectDisabledDaysOfWeek, dropToDays, Model, ViewMode, Message, OutMessage, ChangedViewMonth, SelectedDate, ClickedDay, PressedKeyOnGrid, ClickedPreviousMonthButton, ClickedNextMonthButton, ClickedHeading, SelectedMonth, SelectedYear, PagedYears, FocusedGrid, BlurredGrid, RefreshedToday, CompletedFocusGrid, FocusGrid, } from './index.js';