foldkit 0.59.0 → 0.61.0

package/dist/ui/calendar/index.js

@@ -0,0 +1,515 @@
+import { Array, Effect, Match as M, Option, Schema as S, pipe } from 'effect';
+import * as Calendar from '../../calendar';
+import * as Command from '../../command';
+import { OptionExt } from '../../effectExtensions';
+import { createLazy, html } from '../../html';
+import { m } from '../../message';
+import { evo } from '../../struct';
+import * as Task from '../../task';
+// MODEL
+/** 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). */
+export const Model = S.Struct({
+    id: S.String,
+    today: Calendar.CalendarDate,
+    viewYear: S.Int,
+    viewMonth: S.Int.pipe(S.between(1, 12)),
+    maybeFocusedDate: S.OptionFromSelf(Calendar.CalendarDate),
+    maybeSelectedDate: S.OptionFromSelf(Calendar.CalendarDate),
+    isGridFocused: S.Boolean,
+    locale: Calendar.LocaleConfig,
+    maybeMinDate: S.OptionFromSelf(Calendar.CalendarDate),
+    maybeMaxDate: S.OptionFromSelf(Calendar.CalendarDate),
+    disabledDaysOfWeek: S.Array(Calendar.DayOfWeek),
+    disabledDates: S.Array(Calendar.CalendarDate),
+});
+// MESSAGE
+/** Sent when the user clicks a day cell in the grid. */
+export const ClickedDay = m('ClickedDay', { date: Calendar.CalendarDate });
+/** Sent when the user presses a key on the grid container. The update maps
+ * the key to a navigation or selection action. */
+export const PressedKeyOnGrid = m('PressedKeyOnGrid', {
+    key: S.String,
+    isShift: S.Boolean,
+});
+/** Sent when the user clicks the previous-month navigation button. */
+export const ClickedPreviousMonthButton = m('ClickedPreviousMonthButton');
+/** Sent when the user clicks the next-month navigation button. */
+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 grid container receives DOM focus. */
+export const FocusedGrid = m('FocusedGrid');
+/** Sent when the grid container loses DOM focus. */
+export const BlurredGrid = m('BlurredGrid');
+/** Sent when a long-lived session's "today" reference should be refreshed. */
+export const RefreshedToday = m('RefreshedToday', {
+    today: Calendar.CalendarDate,
+});
+/** Sent when a FocusGrid command completes. */
+export const CompletedFocusGrid = m('CompletedFocusGrid');
+/** Union of all messages the calendar component can produce. */
+export const Message = S.Union(ClickedDay, PressedKeyOnGrid, ClickedPreviousMonthButton, ClickedNextMonthButton, SelectedMonthFromDropdown, SelectedYearFromDropdown, 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).
+ *
+ * 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. */
+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;
+/** Creates an initial calendar model. The view month defaults to the month
+ * of the initial selected date, or today if no date is pre-selected. */
+export const init = (config) => {
+    const initialFocus = Option.getOrElse(config.maybeInitialSelectedDate ?? Option.none(), () => config.today);
+    return {
+        id: config.id,
+        today: config.today,
+        viewYear: initialFocus.year,
+        viewMonth: initialFocus.month,
+        maybeFocusedDate: Option.some(initialFocus),
+        maybeSelectedDate: config.maybeInitialSelectedDate ?? Option.none(),
+        isGridFocused: false,
+        locale: config.locale ?? Calendar.defaultEnglishLocale,
+        maybeMinDate: config.maybeMinDate ?? Option.none(),
+        maybeMaxDate: config.maybeMaxDate ?? Option.none(),
+        disabledDaysOfWeek: config.disabledDaysOfWeek ?? [],
+        disabledDates: config.disabledDates ?? [],
+    };
+};
+const withUpdateReturn = M.withReturnType();
+const gridId = (modelId) => `${modelId}-grid`;
+const gridSelector = (modelId) => `#${gridId(modelId)}`;
+/** Focuses the calendar grid container. */
+export const FocusGrid = Command.define('FocusGrid', CompletedFocusGrid);
+/** Builds a command that focuses the calendar grid container. Parent
+ * components like DatePicker dispatch this after opening to hand focus to
+ * the grid's keyboard layer. */
+export const focusGrid = (modelId) => FocusGrid(Task.focus(gridSelector(modelId)).pipe(Effect.ignore, Effect.as(CompletedFocusGrid())));
+/** Programmatically selects a date on the calendar, committing it as the
+ * chosen value and moving the cursor onto it. Use this in controlled-mode
+ * handlers (when the view's `onSelectedDate` callback is provided) to write
+ * the selection back to the calendar's internal state.
+ *
+ * Equivalent to dispatching `ClickedDay({ date })` through `update`. */
+export const selectDate = (model, date) => update(model, ClickedDay({ date }));
+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;
+};
+/** Walks from `start` in `direction`, returning the first non-disabled date
+ * within `cap` steps. Falls back to `start` if every candidate is disabled. */
+const skipDisabled = (model, start, direction, cap) => pipe(cap, Array.makeBy(step => Calendar.addDays(start, step * direction)), Array.findFirst(date => !isDateDisabled(model, date)), Option.getOrElse(() => start));
+const clampToRange = (model, candidate) => {
+    const afterMin = Option.match(model.maybeMinDate, {
+        onNone: () => candidate,
+        onSome: min => Calendar.max(candidate, min),
+    });
+    return Option.match(model.maybeMaxDate, {
+        onNone: () => afterMin,
+        onSome: max => Calendar.min(afterMin, max),
+    });
+};
+/** Resolves a navigation key press to the next focused date candidate,
+ * along with the direction and search cap for disabled-date skipping. */
+const resolveNavigationKey = (key, isShift, focused, firstDayOfWeek) => M.value(key).pipe(M.withReturnType(), M.when('ArrowLeft', () => [
+    Calendar.addDays(focused, -1),
+    -1,
+    DAY_SKIP_CAP,
+]), M.when('ArrowRight', () => [Calendar.addDays(focused, 1), 1, DAY_SKIP_CAP]), M.when('ArrowUp', () => [Calendar.addDays(focused, -7), -1, DAY_SKIP_CAP]), M.when('ArrowDown', () => [Calendar.addDays(focused, 7), 1, DAY_SKIP_CAP]), M.when('Home', () => [
+    Calendar.startOfWeek(focused, firstDayOfWeek),
+    -1,
+    DAY_SKIP_CAP,
+]), M.when('End', () => [
+    Calendar.endOfWeek(focused, firstDayOfWeek),
+    1,
+    DAY_SKIP_CAP,
+]), M.when('PageUp', () => [
+    isShift
+        ? Calendar.addYears(focused, -1)
+        : Calendar.addMonths(focused, -1),
+    -1,
+    MONTH_SKIP_CAP,
+]), M.when('PageDown', () => [
+    isShift ? Calendar.addYears(focused, 1) : Calendar.addMonths(focused, 1),
+    1,
+    MONTH_SKIP_CAP,
+]), M.option);
+const isCommitKey = (key) => key === 'Enter' || key === ' ';
+const currentOrFallbackFocus = (model) => Option.getOrElse(model.maybeFocusedDate, () => Calendar.make(model.viewYear, model.viewMonth, 1));
+/** Applies a date selection to the model: commits the selection, moves the
+ * cursor onto the date, and syncs the view month if the selection crosses a
+ * month boundary. Emits `ChangedViewMonth` only when the commit crosses a
+ * month boundary. */
+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];
+};
+/** Applies a focus move to the model, clamping to the allowed range and
+ * skipping disabled dates. Emits `ChangedViewMonth` if the move crossed a
+ * month boundary. */
+const applyFocusMove = (model, candidate, direction, cap) => {
+    const clamped = clampToRange(model, candidate);
+    const nextFocus = skipDisabled(model, clamped, direction, cap);
+    const crossedMonth = nextFocus.year !== model.viewYear || nextFocus.month !== model.viewMonth;
+    const nextModel = evo(model, {
+        maybeFocusedDate: () => Option.some(nextFocus),
+        viewYear: () => nextFocus.year,
+        viewMonth: () => nextFocus.month,
+    });
+    const maybeOutMessage = OptionExt.when(crossedMonth, ChangedViewMonth({ year: nextFocus.year, month: nextFocus.month }));
+    return [nextModel, maybeOutMessage];
+};
+/** Computes the focused-date cursor for a view-month change. Preserves the
+ * current day-of-month (clamping to the new month's length when needed),
+ * then runs the candidate through min/max clamping and disabled-date skipping
+ * so the cursor always lands on a real, navigable cell. */
+const moveFocusForViewChange = (model, year, month, direction) => {
+    const currentDay = Option.match(model.maybeFocusedDate, {
+        onNone: () => 1,
+        onSome: focused => focused.day,
+    });
+    const dayInNewMonth = Math.min(currentDay, Calendar.daysInMonth(year, month));
+    const candidate = Calendar.make(year, month, dayInNewMonth);
+    const clamped = clampToRange(model, candidate);
+    return skipDisabled(model, clamped, direction, DAY_SKIP_CAP);
+};
+const applyViewMonthChange = (model, year, month, direction) => {
+    if (year === model.viewYear && month === model.viewMonth) {
+        return [model, [], Option.none()];
+    }
+    const nextFocus = moveFocusForViewChange(model, year, month, direction);
+    const nextModel = evo(model, {
+        viewYear: () => year,
+        viewMonth: () => month,
+        maybeFocusedDate: () => Option.some(nextFocus),
+    });
+    return [nextModel, [], Option.some(ChangedViewMonth({ year, month }))];
+};
+/** Direction the user moved when jumping to a new view 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) => {
+    const next = Calendar.make(year, month, 1);
+    const current = Calendar.make(model.viewYear, model.viewMonth, 1);
+    return Calendar.isAfter(next, current) ? 1 : -1;
+};
+/** Processes a calendar message and returns the next model, commands, and
+ * optional OutMessage. */
+export const update = (model, message) => M.value(message).pipe(withUpdateReturn, M.tagsExhaustive({
+    ClickedDay: ({ date }) => {
+        if (isDateDisabled(model, date)) {
+            return [model, [], Option.none()];
+        }
+        const [nextModel, maybeOutMessage] = commitSelection(model, date);
+        return [nextModel, [], maybeOutMessage];
+    },
+    PressedKeyOnGrid: ({ key, isShift }) => {
+        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);
+                return [nextModel, [], maybeOutMessage];
+            },
+        });
+    },
+    ClickedPreviousMonthButton: () => {
+        const next = Calendar.subtractMonths(Calendar.make(model.viewYear, model.viewMonth, 1), 1);
+        return applyViewMonthChange(model, next.year, next.month, -1);
+    },
+    ClickedNextMonthButton: () => {
+        const next = Calendar.addMonths(Calendar.make(model.viewYear, model.viewMonth, 1), 1);
+        return applyViewMonthChange(model, next.year, next.month, 1);
+    },
+    SelectedMonthFromDropdown: ({ month }) => applyViewMonthChange(model, model.viewYear, month, dropdownDirection(model, model.viewYear, month)),
+    SelectedYearFromDropdown: ({ year }) => applyViewMonthChange(model, year, model.viewMonth, dropdownDirection(model, year, model.viewMonth)),
+    FocusedGrid: () => [
+        evo(model, { isGridFocused: () => true }),
+        [],
+        Option.none(),
+    ],
+    BlurredGrid: () => [
+        evo(model, { isGridFocused: () => false }),
+        [],
+        Option.none(),
+    ],
+    RefreshedToday: ({ today }) => [
+        evo(model, { today: () => today }),
+        [],
+        Option.none(),
+    ],
+    CompletedFocusGrid: () => [model, [], Option.none()],
+}));
+// VIEW
+const headingId = (modelId) => `${modelId}-heading`;
+const cellId = (modelId, date) => `${modelId}-cell-${date.year}-${date.month}-${date.day}`;
+const DAY_NAMES_SUNDAY_FIRST = [
+    'Sunday',
+    'Monday',
+    'Tuesday',
+    'Wednesday',
+    'Thursday',
+    'Friday',
+    'Saturday',
+];
+const DAY_OF_WEEK_INDEX = {
+    Sunday: 0,
+    Monday: 1,
+    Tuesday: 2,
+    Wednesday: 3,
+    Thursday: 4,
+    Friday: 5,
+    Saturday: 6,
+};
+/** Rotates the Sunday-first day-name array so that `firstDayOfWeek` becomes
+ * the first entry. Used to build column headers in locale-appropriate order. */
+const rotateDayNames = (names, firstDayOfWeek) => {
+    const [front, back] = Array.splitAt(names, DAY_OF_WEEK_INDEX[firstDayOfWeek]);
+    return [...back, ...front];
+};
+const WEEKS_IN_GRID = 6;
+const DAYS_IN_WEEK = 7;
+/** Builds the 6×7 grid of dates that a calendar view renders for a given
+ * month. The grid always has 6 rows to keep height stable across months.
+ * Returns the 2D grid alongside the starting date (top-left cell) so
+ * callers can derive per-week positions without recomputing. */
+const buildGrid = (viewYear, viewMonth, firstDayOfWeek) => {
+    const firstOfMonth = Calendar.make(viewYear, viewMonth, 1);
+    const gridStart = Calendar.startOfWeek(firstOfMonth, firstDayOfWeek);
+    const weeks = Array.makeBy(WEEKS_IN_GRID, weekIndex => Array.makeBy(DAYS_IN_WEEK, dayIndex => Calendar.addDays(gridStart, weekIndex * DAYS_IN_WEEK + dayIndex)));
+    return { gridStart, weeks };
+};
+const 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',
+    'ArrowUp',
+    'ArrowDown',
+    'Home',
+    'End',
+    'PageUp',
+    'PageDown',
+    '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 { 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 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 = [
+        Type('button'),
+        AriaLabel(previousMonthLabel),
+        OnClick(toParentMessage(ClickedPreviousMonthButton())),
+    ];
+    const nextMonthButtonAttributes = [
+        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 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));
+        }
+        return Option.some(toParentMessage(PressedKeyOnGrid({ key, isShift: modifiers.shiftKey })));
+    };
+    const activeDescendantAttributes = pipe(maybeFocusedDate, Option.map(date => AriaActiveDescendant(cellId(id, date))), Option.toArray);
+    const gridAttributes = [
+        Id(gridId(id)),
+        Role('grid'),
+        AriaLabel(`Calendar, ${headingText}`),
+        AriaRowcount(WEEKS_IN_GRID + 1),
+        AriaColcount(DAYS_IN_WEEK),
+        Tabindex(0),
+        OnFocus(toParentMessage(FocusedGrid())),
+        OnBlur(toParentMessage(BlurredGrid())),
+        OnKeyDownPreventDefault(handleKeyDown),
+        ...activeDescendantAttributes,
+    ];
+    const headerRowAttributes = [
+        Role('row'),
+        AriaRowindex(1),
+    ];
+    const columnHeaders = Array.zipWith(rotatedShortDayNames, rotatedDayNames, (name, fullName) => ({
+        name,
+        fullName,
+    })).map(({ name, fullName }, columnIndex) => ({
+        name,
+        attributes: [
+            Role('columnheader'),
+            AriaLabel(fullName),
+            AriaColindex(columnIndex + 1),
+        ],
+    }));
+    const buildDayCell = (date, columnIndex) => {
+        const isSelected = Option.exists(maybeSelectedDate, Calendar.isEqual(date));
+        const isFocused = Option.exists(maybeFocusedDate, Calendar.isEqual(date));
+        const isToday = Calendar.isEqual(today, date);
+        const isInViewMonth = date.month === viewMonth && date.year === viewYear;
+        const isDisabled = isDateDisabled(model, date);
+        const stateDataAttributes = Array.getSomes([
+            OptionExt.when(isToday, DataAttribute('today', '')),
+            OptionExt.when(isSelected, DataAttribute('selected', '')),
+            OptionExt.when(isFocused && isGridFocused, DataAttribute('focused', '')),
+            OptionExt.when(!isInViewMonth, DataAttribute('outside-month', '')),
+            OptionExt.when(isDisabled, DataAttribute('disabled', '')),
+        ]);
+        const cellAttributes = [
+            Id(cellId(id, date)),
+            Role('gridcell'),
+            AriaSelected(isSelected),
+            AriaColindex(columnIndex + 1),
+            ...stateDataAttributes,
+        ];
+        const buttonAttributes = [
+            Type('button'),
+            Tabindex(-1),
+            AriaLabel(Calendar.formatAriaLabel(date, locale)),
+            AriaDisabled(isDisabled),
+            ...(isDisabled ? [] : [OnClick(dispatchSelectedDate(date))]),
+        ];
+        return {
+            date,
+            label: String(date.day),
+            cellAttributes,
+            buttonAttributes,
+            isSelected,
+            isFocused: isFocused && isGridFocused,
+            isToday,
+            isInViewMonth,
+            isDisabled,
+        };
+    };
+    const weeks = weeksDates.map((weekDates, weekIndex) => {
+        const weekStart = Calendar.addDays(gridStart, weekIndex * DAYS_IN_WEEK);
+        return {
+            attributes: [
+                Role('row'),
+                AriaRowindex(weekIndex + 2),
+                AriaLabel(`Week of ${Calendar.formatLong(weekStart, locale)}`),
+            ],
+            cells: weekDates.map(buildDayCell),
+        };
+    });
+    return toView({
+        root: rootAttributes,
+        previousMonthButton: previousMonthButtonAttributes,
+        nextMonthButton: nextMonthButtonAttributes,
+        heading: { id: headingId(id), text: headingText },
+        monthSelect: monthSelectAttributes,
+        monthOptions,
+        yearSelect: yearSelectAttributes,
+        yearOptions,
+        grid: gridAttributes,
+        headerRow: headerRowAttributes,
+        columnHeaders,
+        weeks,
+    });
+};
+/** 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, currentToMessage) => view({
+        ...staticConfig,
+        model: currentModel,
+        toParentMessage: currentToMessage,
+    }), [model, toParentMessage]);
+};

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

@@ -0,0 +1,3 @@
+export { init, update, view, lazy, focusGrid, selectDate, Model, Message, OutMessage, ChangedViewMonth, ClickedDay, PressedKeyOnGrid, ClickedPreviousMonthButton, ClickedNextMonthButton, SelectedMonthFromDropdown, SelectedYearFromDropdown, FocusedGrid, BlurredGrid, RefreshedToday, CompletedFocusGrid, FocusGrid, } from './index';
+export type { InitConfig, ViewConfig, CalendarAttributes, DayCell, ColumnHeader, Week, } from './index';
+//# sourceMappingURL=public.d.ts.map

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

@@ -0,0 +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,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,SAAS,CAAA;AAEhB,YAAY,EACV,UAAU,EACV,UAAU,EACV,kBAAkB,EAClB,OAAO,EACP,YAAY,EACZ,IAAI,GACL,MAAM,SAAS,CAAA"}

package/dist/ui/calendar/public.js

@@ -0,0 +1 @@
+export { init, update, view, lazy, focusGrid, selectDate, Model, Message, OutMessage, ChangedViewMonth, ClickedDay, PressedKeyOnGrid, ClickedPreviousMonthButton, ClickedNextMonthButton, SelectedMonthFromDropdown, SelectedYearFromDropdown, FocusedGrid, BlurredGrid, RefreshedToday, CompletedFocusGrid, FocusGrid, } from './index';

package/dist/ui/combobox/multi.d.ts

@@ -1,6 +1,7 @@
 import { Schema as S } from 'effect';
+import type * as Command from '../../command';
 import { type Html } from '../../html';
-import { type BaseInitConfig, type BaseViewConfig } from './shared';
+import { type BaseInitConfig, type BaseViewConfig, type Message, SelectedItem } from './shared';
 /** Schema for the multi-select combobox component's state, tracking open/closed status, active item, input value, and selected items. */
 export declare const Model: S.extend<S.Struct<{
     id: typeof S.String;
@@ -55,7 +56,7 @@ export declare const update: (model: {
     readonly inputValue: string;
 } & {
     readonly selectedItems: readonly string[];
-}, message: import("./shared").Message) => readonly [{
+}, message: Message) => readonly [{
     readonly id: string;
     readonly isOpen: boolean;
     readonly isAnimated: boolean;
@@ -127,7 +128,7 @@ export declare const update: (model: {
         readonly message: {
             readonly _tag: "Showed";
         } | {
-            readonly _tag: "Hidden";
+            readonly _tag: "Hid";
         } | {
             readonly _tag: "AdvancedTransitionFrame";
         } | {
@@ -140,6 +141,8 @@ export declare const update: (model: {
         readonly _tag: "PressedToggleButton";
     }, never, never>;
 }>[]];
+/** Programmatically toggles an item in the multi-select combobox. Use this in domain-event handlers when the combobox uses `onSelectedItem`. */
+export declare const selectItem: (model: Model, item: string) => readonly [Model, ReadonlyArray<Command.Command<Message>>];
 /** Configuration for rendering a multi-select combobox with `view`. */
 export type ViewConfig<Message, Item extends string> = BaseViewConfig<Message, Item, Model>;
 /** Renders a headless multi-select combobox with keyboard navigation, selection tracking, and aria-activedescendant focus management. */
@@ -167,7 +170,7 @@ export declare const view: <Message, Item extends string>(config: Readonly<{
     } & {
         readonly selectedItems: readonly string[];
     };
-    toParentMessage: (message: import("./shared").Opened | import("./shared").Closed | import("./shared").ClosedByTab | import("./shared").ActivatedItem | import("./shared").DeactivatedItem | import("./shared").SelectedItem | import("./shared").MovedPointerOverItem | import("./shared").RequestedItemClick | import("./shared").UpdatedInputValue | import("./shared").PressedToggleButton) => Message;
+    toParentMessage: (message: import("./shared").Opened | import("./shared").Closed | import("./shared").ClosedByTab | import("./shared").ActivatedItem | import("./shared").DeactivatedItem | SelectedItem | import("./shared").MovedPointerOverItem | import("./shared").RequestedItemClick | import("./shared").UpdatedInputValue | import("./shared").PressedToggleButton) => Message;
     onSelectedItem?: (value: string) => Message;
     items: readonly Item[];
     itemToConfig: (item: Item, context: Readonly<{

package/dist/ui/combobox/multi.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"multi.d.ts","sourceRoot":"","sources":["../../../src/ui/combobox/multi.ts"],"names":[],"mappings":"AAAA,OAAO,EAAS,MAAM,IAAI,CAAC,EAAE,MAAM,QAAQ,CAAA;AAE3C,OAAO,EAAE,KAAK,IAAI,EAAc,MAAM,YAAY,CAAA;AAElD,OAAO,EACL,KAAK,cAAc,EAEnB,KAAK,cAAc,EAKpB,MAAM,UAAU,CAAA;AAIjB,yIAAyI;AACzI,eAAO,MAAM,KAAK;;;;;;;;;;;;;;;;;;;;;;GAEjB,CAAA;AAED,MAAM,MAAM,KAAK,GAAG,OAAO,KAAK,CAAC,IAAI,CAAA;AAIrC,8RAA8R;AAC9R,MAAM,MAAM,UAAU,GAAG,cAAc,GACrC,QAAQ,CAAC;IACP,aAAa,CAAC,EAAE,aAAa,CAAC,MAAM,CAAC,CAAA;CACtC,CAAC,CAAA;AAEJ,2IAA2I;AAC3I,eAAO,MAAM,IAAI,GAAI,QAAQ,UAAU,KAAG,KAGxC,CAAA;AAcF,yJAAyJ;AACzJ,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAwBjB,CAAA;AAIF,uEAAuE;AACvE,MAAM,MAAM,UAAU,CAAC,OAAO,EAAE,IAAI,SAAS,MAAM,IAAI,cAAc,CACnE,OAAO,EACP,IAAI,EACJ,KAAK,CACN,CAAA;AAED,yIAAyI;AACzI,eAAO,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;WAIf,CAAA;AAEF;mFACmF;AACnF,eAAO,MAAM,IAAI,GAAI,OAAO,EAAE,IAAI,SAAS,MAAM,EAC/C,cAAc,IAAI,CAChB,UAAU,CAAC,OAAO,EAAE,IAAI,CAAC,EACzB,OAAO,GAAG,iBAAiB,GAAG,gBAAgB,CAC/C,KACA,CAAC,CACF,KAAK,EAAE,KAAK,EACZ,eAAe,EAAE,cAAc,CAAC,OAAO,EAAE,IAAI,EAAE,KAAK,CAAC,CAAC,iBAAiB,CAAC,KACrE,IAAI,CAoBR,CAAA"}
+{"version":3,"file":"multi.d.ts","sourceRoot":"","sources":["../../../src/ui/combobox/multi.ts"],"names":[],"mappings":"AAAA,OAAO,EAAS,MAAM,IAAI,CAAC,EAAE,MAAM,QAAQ,CAAA;AAE3C,OAAO,KAAK,KAAK,OAAO,MAAM,eAAe,CAAA;AAC7C,OAAO,EAAE,KAAK,IAAI,EAAc,MAAM,YAAY,CAAA;AAElD,OAAO,EACL,KAAK,cAAc,EAEnB,KAAK,cAAc,EACnB,KAAK,OAAO,EACZ,YAAY,EAKb,MAAM,UAAU,CAAA;AAIjB,yIAAyI;AACzI,eAAO,MAAM,KAAK;;;;;;;;;;;;;;;;;;;;;;GAEjB,CAAA;AAED,MAAM,MAAM,KAAK,GAAG,OAAO,KAAK,CAAC,IAAI,CAAA;AAIrC,8RAA8R;AAC9R,MAAM,MAAM,UAAU,GAAG,cAAc,GACrC,QAAQ,CAAC;IACP,aAAa,CAAC,EAAE,aAAa,CAAC,MAAM,CAAC,CAAA;CACtC,CAAC,CAAA;AAEJ,2IAA2I;AAC3I,eAAO,MAAM,IAAI,GAAI,QAAQ,UAAU,KAAG,KAGxC,CAAA;AAcF,yJAAyJ;AACzJ,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAwBjB,CAAA;AAEF,gJAAgJ;AAChJ,eAAO,MAAM,UAAU,GACrB,OAAO,KAAK,EACZ,MAAM,MAAM,KACX,SAAS,CAAC,KAAK,EAAE,aAAa,CAAC,OAAO,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC,CACD,CAAA;AAI1D,uEAAuE;AACvE,MAAM,MAAM,UAAU,CAAC,OAAO,EAAE,IAAI,SAAS,MAAM,IAAI,cAAc,CACnE,OAAO,EACP,IAAI,EACJ,KAAK,CACN,CAAA;AAED,yIAAyI;AACzI,eAAO,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;WAIf,CAAA;AAEF;mFACmF;AACnF,eAAO,MAAM,IAAI,GAAI,OAAO,EAAE,IAAI,SAAS,MAAM,EAC/C,cAAc,IAAI,CAChB,UAAU,CAAC,OAAO,EAAE,IAAI,CAAC,EACzB,OAAO,GAAG,iBAAiB,GAAG,gBAAgB,CAC/C,KACA,CAAC,CACF,KAAK,EAAE,KAAK,EACZ,eAAe,EAAE,cAAc,CAAC,OAAO,EAAE,IAAI,EAAE,KAAK,CAAC,CAAC,iBAAiB,CAAC,KACrE,IAAI,CAoBR,CAAA"}

package/dist/ui/combobox/multi.js

@@ -1,7 +1,7 @@
 import { Array, Schema as S } from 'effect';
 import { createLazy } from '../../html';
 import { evo } from '../../struct';
-import { BaseModel, baseInit, closedBaseModel, makeUpdate, makeView, } from './shared';
+import { BaseModel, SelectedItem, baseInit, closedBaseModel, makeUpdate, makeView, } from './shared';
 // MODEL
 /** Schema for the multi-select combobox component's state, tracking open/closed status, active item, input value, and selected items. */
 export const Model = BaseModel.pipe(S.extend(S.Struct({ selectedItems: S.Array(S.String) })));
@@ -36,6 +36,8 @@ export const update = makeUpdate({
         selectedItems: () => toggleItem(model.selectedItems, item),
     }),
 });
+/** Programmatically toggles an item in the multi-select combobox. Use this in domain-event handlers when the combobox uses `onSelectedItem`. */
+export const selectItem = (model, item) => update(model, SelectedItem({ item, displayText: item }));
 /** Renders a headless multi-select combobox with keyboard navigation, selection tracking, and aria-activedescendant focus management. */
 export const view = makeView({
     isItemSelected: (model, itemValue) => Array.contains(model.selectedItems, itemValue),

package/dist/ui/combobox/multiPublic.d.ts

@@ -1,3 +1,3 @@
-export { init, update, view, lazy, Model } from './multi';
+export { init, update, selectItem, view, lazy, Model } from './multi';
 export type { InitConfig, ViewConfig } from './multi';
 //# sourceMappingURL=multiPublic.d.ts.map

package/dist/ui/combobox/multiPublic.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"multiPublic.d.ts","sourceRoot":"","sources":["../../../src/ui/combobox/multiPublic.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,SAAS,CAAA;AACzD,YAAY,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,SAAS,CAAA"}
+{"version":3,"file":"multiPublic.d.ts","sourceRoot":"","sources":["../../../src/ui/combobox/multiPublic.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,EAAE,UAAU,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,SAAS,CAAA;AACrE,YAAY,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,SAAS,CAAA"}

package/dist/ui/combobox/multiPublic.js

@@ -1 +1 @@
-export { init, update, view, lazy, Model } from './multi';
+export { init, update, selectItem, view, lazy, Model } from './multi';

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

@@ -1,4 +1,4 @@
-export { init, update, view, lazy, Model } from './single';
+export { init, update, selectItem, view, lazy, Model } from './single';
 export { Message, SelectedItem, CompletedLockScroll, CompletedUnlockScroll, CompletedSetupInert, CompletedTeardownInert, CompletedFocusInput, CompletedScrollIntoView, CompletedClickItem, GotTransitionMessage, LockScroll, UnlockScroll, InertOthers, RestoreInert, FocusInput, ScrollIntoView, ClickItem, DetectMovementOrTransitionEnd, } from './shared';
 export type { ActivationTrigger, Opened, Closed, ClosedByTab, ActivatedItem, DeactivatedItem, MovedPointerOverItem, RequestedItemClick, UpdatedInputValue, PressedToggleButton, ItemConfig, GroupHeading, } from './shared';
 export type { InitConfig, ViewConfig } from './single';

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

@@ -1 +1 @@
-{"version":3,"file":"public.d.ts","sourceRoot":"","sources":["../../../src/ui/combobox/public.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,UAAU,CAAA;AAE1D,OAAO,EACL,OAAO,EACP,YAAY,EACZ,mBAAmB,EACnB,qBAAqB,EACrB,mBAAmB,EACnB,sBAAsB,EACtB,mBAAmB,EACnB,uBAAuB,EACvB,kBAAkB,EAClB,oBAAoB,EACpB,UAAU,EACV,YAAY,EACZ,WAAW,EACX,YAAY,EACZ,UAAU,EACV,cAAc,EACd,SAAS,EACT,6BAA6B,GAC9B,MAAM,UAAU,CAAA;AAEjB,YAAY,EACV,iBAAiB,EACjB,MAAM,EACN,MAAM,EACN,WAAW,EACX,aAAa,EACb,eAAe,EACf,oBAAoB,EACpB,kBAAkB,EAClB,iBAAiB,EACjB,mBAAmB,EACnB,UAAU,EACV,YAAY,GACb,MAAM,UAAU,CAAA;AAEjB,YAAY,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,UAAU,CAAA;AAEtD,YAAY,EAAE,YAAY,EAAE,MAAM,WAAW,CAAA;AAE7C,OAAO,KAAK,KAAK,MAAM,eAAe,CAAA"}
+{"version":3,"file":"public.d.ts","sourceRoot":"","sources":["../../../src/ui/combobox/public.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,EAAE,UAAU,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,UAAU,CAAA;AAEtE,OAAO,EACL,OAAO,EACP,YAAY,EACZ,mBAAmB,EACnB,qBAAqB,EACrB,mBAAmB,EACnB,sBAAsB,EACtB,mBAAmB,EACnB,uBAAuB,EACvB,kBAAkB,EAClB,oBAAoB,EACpB,UAAU,EACV,YAAY,EACZ,WAAW,EACX,YAAY,EACZ,UAAU,EACV,cAAc,EACd,SAAS,EACT,6BAA6B,GAC9B,MAAM,UAAU,CAAA;AAEjB,YAAY,EACV,iBAAiB,EACjB,MAAM,EACN,MAAM,EACN,WAAW,EACX,aAAa,EACb,eAAe,EACf,oBAAoB,EACpB,kBAAkB,EAClB,iBAAiB,EACjB,mBAAmB,EACnB,UAAU,EACV,YAAY,GACb,MAAM,UAAU,CAAA;AAEjB,YAAY,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,UAAU,CAAA;AAEtD,YAAY,EAAE,YAAY,EAAE,MAAM,WAAW,CAAA;AAE7C,OAAO,KAAK,KAAK,MAAM,eAAe,CAAA"}

package/dist/ui/combobox/public.js

@@ -1,3 +1,3 @@
-export { init, update, view, lazy, Model } from './single';
+export { init, update, selectItem, view, lazy, Model } from './single';
 export { Message, SelectedItem, CompletedLockScroll, CompletedUnlockScroll, CompletedSetupInert, CompletedTeardownInert, CompletedFocusInput, CompletedScrollIntoView, CompletedClickItem, GotTransitionMessage, LockScroll, UnlockScroll, InertOthers, RestoreInert, FocusInput, ScrollIntoView, ClickItem, DetectMovementOrTransitionEnd, } from './shared';
 export * as Multi from './multiPublic';