@svgrid/grid 1.2.22 → 1.2.24

package/dist/cell-render.d.ts

@@ -6,6 +6,10 @@ export declare function createCellRender<TFeatures extends TableFeatures = Table
     computeRowClass: (row: Row<TData>, rowIndex: number) => string;
     computeCellClass: (row: Row<TData>, column: Column<TData>) => string;
     computeCellTooltip: (row: Row<TData>, column: Column<TData>) => string | null;
+    computeCellValidity: (row: Row<TData>, column: Column<TData>) => {
+        invalid: boolean;
+        message: string | null;
+    };
     computeCellNote: (row: Row<TData>, column: Column<TData>) => string | null;
     getColumnEditorOptions: (column: Column<TData>, row?: Row<TData> | null) => CellEditorOption[];
     formatListCellValue: (column: Column<TData>, value: unknown, row?: Row<TData> | null) => string;

package/dist/cell-render.js

@@ -5,7 +5,7 @@ import { normalizeEditorOptions, } from "./index";
 import "./sv-grid-scrollbar";
 import { formatNumericWithConfig, getDateFormatter, resolveDatePattern, } from "./cell-formatting";
 import { resolveCellFormat, } from "./conditional-formatting";
-import { resolveClassList, getOptionLabel, asDate, } from "./SvGrid.helpers";
+import { getCellKey, resolveClassList, getOptionLabel, asDate, } from "./SvGrid.helpers";
 import { getPinnedCellValue, } from "./cell-values";
 export function createCellRender(ctx) {
     function cellConditionalFormat(row, column, value) {
@@ -69,6 +69,39 @@ export function createCellRender(ctx) {
         }
         return null;
     }
+    /**
+     * Resolve per-cell validity via the column's declarative `validate` hook.
+     * Runs for every rendered cell so pre-existing bad data is flagged on load.
+     * Returns `{ invalid, message }` - `invalid` drives the red highlight class,
+     * `message` (when present) becomes the cell's tooltip.
+     */
+    function computeCellValidity(row, column) {
+        const rule = column.columnDef.validate;
+        if (typeof rule !== "function")
+            return { invalid: false, message: null };
+        // Read the edit-aware value: inline edits land in `editedCellValues`
+        // (keyed rowId:colId) and are NOT written into the row's memoized value
+        // cache, so `getCellValueByColumnId` would return the stale pre-edit value
+        // and validation would never re-run after an edit. Consult the overlay
+        // first - same rule the display path (getCellDisplayValue) and summaries
+        // use - so a cell re-validates live as the user types.
+        const edited = ctx.editedCellValues ?? {};
+        const key = getCellKey(row.id, column.id);
+        const value = key in edited ? edited[key] : row.getCellValueByColumnId(column.id);
+        const out = rule({
+            value,
+            row: row.original,
+            rowIndex: row.index,
+            column,
+        });
+        // Valid: null / undefined / true. Invalid: false or a message string.
+        if (out == null || out === true)
+            return { invalid: false, message: null };
+        if (out === false)
+            return { invalid: true, message: null };
+        const msg = String(out);
+        return { invalid: true, message: msg.trim() ? msg : null };
+    }
     /**
      * Resolve a per-cell note (a longer comment / annotation). Notes
      * come from the grid's `notes` prop - a `{ [rowId]: { [columnId]: string } }`
@@ -236,6 +269,7 @@ export function createCellRender(ctx) {
         computeRowClass,
         computeCellClass,
         computeCellTooltip,
+        computeCellValidity,
         computeCellNote,
         getColumnEditorOptions,
         formatListCellValue,

package/dist/clipboard.js

@@ -355,6 +355,7 @@ export function createClipboard(ctx) {
         const endCol = Math.max(anchor.colIndex, focus.colIndex);
         const next = ctx.internalData.slice();
         let mutated = false;
+        const changes = [];
         for (let r = startRow; r <= endRow; r += 1) {
             const row = ctx.allRows[r];
             if (!row || isGroupRow(row))
@@ -381,8 +382,18 @@ export function createClipboard(ctx) {
                 // else. parseEditorValue handles the per-type coercion.
                 const editorType = (column.columnDef.editorType ??
                     "text");
-                updated[column.columnDef.field] = parseEditorValue(editorType, "");
+                const field = column.columnDef.field;
+                const oldValue = updated[field];
+                const cleared = parseEditorValue(editorType, "");
+                updated[field] = cleared;
                 rowChanged = true;
+                changes.push({
+                    rowIndex: dataIndex,
+                    columnId: column.id,
+                    oldValue,
+                    newValue: cleared,
+                    row: updated,
+                });
             }
             if (rowChanged) {
                 next[dataIndex] = updated;
@@ -392,6 +403,13 @@ export function createClipboard(ctx) {
         if (mutated) {
             ctx.internalData = next;
             ctx.grid.store.setState((prev) => ({ ...prev }));
+            // Fire onCellValueChange per cleared cell - same as paste's writeCellRaw -
+            // so consumers (formula engines, autosave) recompute. Clear IS a value
+            // change; without this, a HyperFormula-backed grid wouldn't re-evaluate.
+            if (ctx.props.onCellValueChange) {
+                for (const ch of changes)
+                    ctx.props.onCellValueChange(ch);
+            }
         }
         return mutated;
     }

package/dist/collaboration.d.ts

@@ -43,6 +43,8 @@ export type CollabMessage = {
 export type CollabTransport = {
     post(msg: CollabMessage): void;
     subscribe(handler: (msg: CollabMessage) => void): () => void;
+    /** Release any underlying resource (e.g. a BroadcastChannel). Optional. */
+    dispose?(): void;
 };
 export type Collaboration = {
     /** Broadcast where this user's cursor is (or null when it leaves). */

package/dist/collaboration.js

@@ -14,6 +14,9 @@ export function broadcastChannelTransport(name) {
             channel.addEventListener('message', listener);
             return () => channel.removeEventListener('message', listener);
         },
+        dispose() {
+            channel?.close();
+        },
     };
 }
 export function createCollaboration(options) {
@@ -93,6 +96,7 @@ export function createCollaboration(options) {
             unsubscribe();
             if (pruneTimer)
                 clearInterval(pruneTimer);
+            transport.dispose?.(); // release the channel (BroadcastChannel etc.)
         },
     };
 }

package/dist/core.d.ts

@@ -173,7 +173,7 @@ export type ColumnDef<TFeatures extends TableFeatures, TData extends RowData> =
      * and `columnGroupShow: 'closed'` children show until the user expands it.
      */
     openByDefault?: boolean;
-    editorType?: 'text' | 'number' | 'date' | 'datetime' | 'time' | 'password' | 'checkbox' | 'list' | 'chips' | 'select' | 'rich-select' | 'autocomplete' | 'textarea' | 'color' | 'rating';
+    editorType?: 'text' | 'number' | 'date' | 'datetime' | 'time' | 'date-native' | 'datetime-native' | 'time-native' | 'password' | 'checkbox' | 'list' | 'chips' | 'select' | 'rich-select' | 'autocomplete' | 'textarea' | 'color' | 'rating';
     /**
      * Custom in-cell editor. Receives the cell context PLUS a `commit(value)`
      * and `cancel()` helper. Use when none of the built-in `editorType`s fit;
@@ -191,6 +191,27 @@ export type ColumnDef<TFeatures extends TableFeatures, TData extends RowData> =
      * string skips the tooltip.
      */
     tooltip?: string | ((ctx: CellContext<TData>) => string | null | undefined);
+    /**
+     * Declarative per-cell validation (Handsontable-style). Runs for EVERY
+     * rendered cell - including values already present in `data` on load, not
+     * just on edit - so bad data is flagged immediately. Invalid cells get the
+     * `sv-grid-cell-invalid` class (red highlight) and the returned message as
+     * their tooltip.
+     *
+     * Return value:
+     *   - `null` / `undefined` / `true` → valid (no highlight)
+     *   - `false`                       → invalid, no message
+     *   - a non-empty `string`          → invalid, string is the tooltip
+     *
+     * The value keeps rendering as-is (the grid does NOT roll it back); pair
+     * with `onCellValueChange` if you also want to reject the commit.
+     */
+    validate?: (params: {
+        value: unknown;
+        row: TData;
+        rowIndex: number;
+        column: Column<TData>;
+    }) => string | boolean | null | undefined;
     /**
      * Gate editing per column or per cell.
      *

package/dist/countries.d.ts

@@ -0,0 +1,15 @@
+/**
+ * countries - a compact country reference for SvPhoneInput / SvCountryInput.
+ * ISO 3166-1 alpha-2 code, display name, E.164 dial code, and a flag emoji
+ * (derived from the code so no image assets are needed). This is a curated
+ * common-set; extend `COUNTRIES` for full coverage.
+ */
+export type Country = {
+    code: string;
+    name: string;
+    dial: string;
+};
+/** Regional-indicator flag emoji from an ISO alpha-2 code. */
+export declare function flagEmoji(code: string): string;
+export declare const COUNTRIES: Country[];
+export declare const COUNTRY_BY_CODE: Map<string, Country>;

package/dist/countries.js

@@ -0,0 +1,61 @@
+/** Regional-indicator flag emoji from an ISO alpha-2 code. */
+export function flagEmoji(code) {
+    return code
+        .toUpperCase()
+        .replace(/./g, (c) => String.fromCodePoint(127397 + c.charCodeAt(0)));
+}
+export const COUNTRIES = [
+    { code: 'US', name: 'United States', dial: '+1' },
+    { code: 'CA', name: 'Canada', dial: '+1' },
+    { code: 'GB', name: 'United Kingdom', dial: '+44' },
+    { code: 'IE', name: 'Ireland', dial: '+353' },
+    { code: 'FR', name: 'France', dial: '+33' },
+    { code: 'DE', name: 'Germany', dial: '+49' },
+    { code: 'ES', name: 'Spain', dial: '+34' },
+    { code: 'PT', name: 'Portugal', dial: '+351' },
+    { code: 'IT', name: 'Italy', dial: '+39' },
+    { code: 'NL', name: 'Netherlands', dial: '+31' },
+    { code: 'BE', name: 'Belgium', dial: '+32' },
+    { code: 'CH', name: 'Switzerland', dial: '+41' },
+    { code: 'AT', name: 'Austria', dial: '+43' },
+    { code: 'SE', name: 'Sweden', dial: '+46' },
+    { code: 'NO', name: 'Norway', dial: '+47' },
+    { code: 'DK', name: 'Denmark', dial: '+45' },
+    { code: 'FI', name: 'Finland', dial: '+358' },
+    { code: 'PL', name: 'Poland', dial: '+48' },
+    { code: 'CZ', name: 'Czechia', dial: '+420' },
+    { code: 'GR', name: 'Greece', dial: '+30' },
+    { code: 'BG', name: 'Bulgaria', dial: '+359' },
+    { code: 'RO', name: 'Romania', dial: '+40' },
+    { code: 'UA', name: 'Ukraine', dial: '+380' },
+    { code: 'RU', name: 'Russia', dial: '+7' },
+    { code: 'TR', name: 'Turkey', dial: '+90' },
+    { code: 'IL', name: 'Israel', dial: '+972' },
+    { code: 'AE', name: 'United Arab Emirates', dial: '+971' },
+    { code: 'SA', name: 'Saudi Arabia', dial: '+966' },
+    { code: 'IN', name: 'India', dial: '+91' },
+    { code: 'PK', name: 'Pakistan', dial: '+92' },
+    { code: 'CN', name: 'China', dial: '+86' },
+    { code: 'HK', name: 'Hong Kong', dial: '+852' },
+    { code: 'JP', name: 'Japan', dial: '+81' },
+    { code: 'KR', name: 'South Korea', dial: '+82' },
+    { code: 'SG', name: 'Singapore', dial: '+65' },
+    { code: 'MY', name: 'Malaysia', dial: '+60' },
+    { code: 'TH', name: 'Thailand', dial: '+66' },
+    { code: 'ID', name: 'Indonesia', dial: '+62' },
+    { code: 'PH', name: 'Philippines', dial: '+63' },
+    { code: 'VN', name: 'Vietnam', dial: '+84' },
+    { code: 'AU', name: 'Australia', dial: '+61' },
+    { code: 'NZ', name: 'New Zealand', dial: '+64' },
+    { code: 'ZA', name: 'South Africa', dial: '+27' },
+    { code: 'NG', name: 'Nigeria', dial: '+234' },
+    { code: 'EG', name: 'Egypt', dial: '+20' },
+    { code: 'KE', name: 'Kenya', dial: '+254' },
+    { code: 'MA', name: 'Morocco', dial: '+212' },
+    { code: 'BR', name: 'Brazil', dial: '+55' },
+    { code: 'AR', name: 'Argentina', dial: '+54' },
+    { code: 'CL', name: 'Chile', dial: '+56' },
+    { code: 'CO', name: 'Colombia', dial: '+57' },
+    { code: 'MX', name: 'Mexico', dial: '+52' },
+];
+export const COUNTRY_BY_CODE = new Map(COUNTRIES.map((c) => [c.code, c]));

package/dist/createAutocomplete.svelte.d.ts

@@ -0,0 +1,77 @@
+/**
+ * createAutocomplete - the HEADLESS core behind <SvAutoComplete>: a free-text
+ * field with a live-filtered suggestion list (accepts ANY typed value; the
+ * suggestions are shortcuts). Roving active index + keyboard, exposed as
+ * **prop-getters** you spread onto YOUR OWN markup. No styles/DOM/portal - those
+ * stay in the styled component.
+ *
+ * ```svelte
+ * <script lang="ts">
+ *   import { createAutocomplete } from '@svgrid/grid'
+ *   let value = $state('')
+ *   const ac = createAutocomplete({ value: () => value, suggestions: () => list, onChange: (v) => (value = v) })
+ * </script>
+ * <input {...ac.inputProps()} />
+ * {#if ac.open}
+ *   <ul {...ac.listboxProps()}>
+ *     {#each ac.filtered as opt, i (opt.value)}<li {...ac.optionProps(i)}>{opt.label}</li>{/each}
+ *   </ul>
+ * {/if}
+ * ```
+ */
+import { type ListOption } from './list-option';
+/** Reactive inputs are passed as getters so the core tracks live prop changes. */
+export type AutocompleteConfig = {
+    value: () => string;
+    onChange?: (value: string) => void;
+    /** Suggestions - strings or {value,label} (label shown, value inserted). */
+    suggestions: () => ReadonlyArray<string | ListOption>;
+    minChars?: () => number;
+    disabled?: () => boolean;
+    ariaLabel?: () => string | undefined;
+    /** DOM focus hook provided by the renderer; the core never touches the DOM. */
+    focusInput?: () => void;
+};
+export declare function createAutocomplete(config: AutocompleteConfig): {
+    /** Panel open state. */
+    readonly open: boolean;
+    /** Highlighted suggestion index into `filtered`. */
+    readonly activeIndex: number;
+    /** Suggestions after the live substring filter (capped at 10). */
+    readonly filtered: ListOption[];
+    /** Controlled text value. */
+    readonly value: string;
+    isActive: (i: number) => boolean;
+    setActive: (i: number) => void;
+    maybeOpen: () => void;
+    close: () => void;
+    pick: (o: ListOption | undefined) => void;
+    onInput: (e: Event) => void;
+    onKeydown: (e: KeyboardEvent) => void;
+    /** Spread onto the text <input>. */
+    inputProps: () => {
+        role: "combobox";
+        'aria-expanded': boolean;
+        'aria-autocomplete': "list";
+        'aria-label': string | undefined;
+        value: string;
+        disabled: boolean;
+        oninput: (e: Event) => void;
+        onfocus: () => void;
+        onkeydown: (e: KeyboardEvent) => void;
+    };
+    /** Spread onto the listbox container. */
+    listboxProps: () => {
+        role: "listbox";
+    };
+    /** Spread onto the suggestion at `index` (index into `filtered`). */
+    optionProps: (index: number) => {
+        role: "option";
+        tabindex: number;
+        'aria-selected': boolean;
+        'data-idx': number;
+        onclick: () => void;
+        onpointermove: () => void;
+    };
+};
+export type Autocomplete = ReturnType<typeof createAutocomplete>;

package/dist/createAutocomplete.svelte.js

@@ -0,0 +1,100 @@
+/**
+ * createAutocomplete - the HEADLESS core behind <SvAutoComplete>: a free-text
+ * field with a live-filtered suggestion list (accepts ANY typed value; the
+ * suggestions are shortcuts). Roving active index + keyboard, exposed as
+ * **prop-getters** you spread onto YOUR OWN markup. No styles/DOM/portal - those
+ * stay in the styled component.
+ *
+ * ```svelte
+ * <script lang="ts">
+ *   import { createAutocomplete } from '@svgrid/grid'
+ *   let value = $state('')
+ *   const ac = createAutocomplete({ value: () => value, suggestions: () => list, onChange: (v) => (value = v) })
+ * </script>
+ * <input {...ac.inputProps()} />
+ * {#if ac.open}
+ *   <ul {...ac.listboxProps()}>
+ *     {#each ac.filtered as opt, i (opt.value)}<li {...ac.optionProps(i)}>{opt.label}</li>{/each}
+ *   </ul>
+ * {/if}
+ * ```
+ */
+import { filterOptions } from './list-option';
+export function createAutocomplete(config) {
+    const minChars = () => config.minChars?.() ?? 1;
+    let open = $state(false);
+    let active = $state(0);
+    const asOptions = $derived(config.suggestions().map((s) => (typeof s === 'string' ? { value: s, label: s } : s)));
+    const filtered = $derived(config.value().length >= minChars() ? filterOptions(asOptions, config.value()).slice(0, 10) : []);
+    function maybeOpen() { open = filtered.length > 0; if (open)
+        active = 0; }
+    function pick(o) { if (!o)
+        return; config.onChange?.(String(o.value)); open = false; config.focusInput?.(); }
+    function close() { open = false; }
+    function onInput(e) { config.onChange?.(e.currentTarget.value); queueMicrotask(maybeOpen); }
+    function onKeydown(e) {
+        if (!open) {
+            if (e.key === 'ArrowDown') {
+                queueMicrotask(maybeOpen);
+            }
+            return;
+        }
+        if (e.key === 'ArrowDown') {
+            e.preventDefault();
+            active = Math.min(active + 1, filtered.length - 1);
+        }
+        else if (e.key === 'ArrowUp') {
+            e.preventDefault();
+            active = Math.max(active - 1, 0);
+        }
+        else if (e.key === 'Enter') {
+            e.preventDefault();
+            pick(filtered[active]);
+        }
+        else if (e.key === 'Escape') {
+            close();
+        }
+    }
+    return {
+        /** Panel open state. */
+        get open() { return open; },
+        /** Highlighted suggestion index into `filtered`. */
+        get activeIndex() { return active; },
+        /** Suggestions after the live substring filter (capped at 10). */
+        get filtered() { return filtered; },
+        /** Controlled text value. */
+        get value() { return config.value(); },
+        isActive: (i) => i === active,
+        setActive: (i) => { active = i; },
+        maybeOpen,
+        close,
+        pick,
+        onInput,
+        onKeydown,
+        /** Spread onto the text <input>. */
+        inputProps: () => ({
+            role: 'combobox',
+            'aria-expanded': open,
+            'aria-autocomplete': 'list',
+            'aria-label': config.ariaLabel?.(),
+            value: config.value(),
+            disabled: config.disabled?.() ?? false,
+            oninput: onInput,
+            onfocus: maybeOpen,
+            onkeydown: onKeydown,
+        }),
+        /** Spread onto the listbox container. */
+        listboxProps: () => ({
+            role: 'listbox',
+        }),
+        /** Spread onto the suggestion at `index` (index into `filtered`). */
+        optionProps: (index) => ({
+            role: 'option',
+            tabindex: -1,
+            'aria-selected': index === active,
+            'data-idx': index,
+            onclick: () => pick(filtered[index]),
+            onpointermove: () => { active = index; },
+        }),
+    };
+}

package/dist/createCalendar.svelte.d.ts

@@ -0,0 +1,192 @@
+/**
+ * createCalendar - the HEADLESS core behind <SvCalendar>, in the same spirit as
+ * `createListbox` / `createSvGrid`: a runes-based state machine (view page +
+ * drill level, roving focus, every Smart `selectionMode`, range hover preview,
+ * full keyboard) with **prop-getters** you spread onto YOUR OWN markup. No
+ * styles, no DOM assumptions. It reuses the framework-free date engine in
+ * ./datetime for all the actual date math / selection / restriction, so this
+ * file only owns the reactive component-level state + interaction wiring.
+ *
+ * ```svelte
+ * <script lang="ts">
+ *   import { createCalendar } from '@svgrid/grid'
+ *   let value = $state<Date | null>(new Date())
+ *   const cal = createCalendar({ value: () => value, onChange: (d) => (value = d[0] ?? null) })
+ * </script>
+ * <div {...cal.gridProps()}>
+ *   {#each cal.panels[0].matrix as week}
+ *     {#each week as cell}
+ *       <button {...cal.dayProps(cell, cal.panels[0].month)}>{cell.date.getDate()}</button>
+ *     {/each}
+ *   {/each}
+ * </div>
+ * ```
+ *
+ * The styled <SvCalendar> is one renderer over this core; it keeps the render-only
+ * concerns (WAAPI view-change animation, mouse-wheel navigation, DOM refs) itself.
+ */
+import { type DateLike, type MonthMatrixCell } from './datetime/date-core';
+import { type SelectionMode } from './datetime/date-selection';
+import { type RestrictOptions } from './datetime/date-restrict';
+export type DisplayMode = 'month' | 'year' | 'decade';
+export type CalendarNameFormat = 'narrow' | 'short' | 'long';
+/** Selected value(s). Single Date for one/zeroOrOne, array for multi modes. */
+export type CalendarValue = Date | number | string | ReadonlyArray<Date | number | string> | null;
+/** A one-click shortcut shown in the presets rail. `value` is a single date
+ *  (or an [start, end] range for range mode); pass a function for "today"-
+ *  relative shortcuts that resolve at click time. */
+export type CalendarPreset = {
+    label: string;
+    value: Date | number | string | readonly [Date | number | string, Date | number | string] | (() => Date | number | string | readonly [Date | number | string, Date | number | string]);
+};
+/** How the calendar animates a navigation / drill (a render concern the styled
+ *  component acts on; the core only reports the direction). */
+export type CalendarAnimation = 'slide' | 'fade' | 'none';
+/** Why the visible view last changed - drives the styled component's animation. */
+export type CalendarNavDir = 'next' | 'prev' | 'drillDown' | 'drillUp' | 'fade';
+/** Per-day interaction/visual state (booleans the renderer maps to classes). */
+export type CalendarDayState = {
+    disabled: boolean;
+    selected: boolean;
+    important: boolean;
+    today: boolean;
+    outside: boolean;
+    focused: boolean;
+    preview: boolean;
+};
+/** Reactive inputs are passed as getters so the core tracks live prop changes;
+ *  callbacks are plain closures. */
+export type CalendarConfig = {
+    value: () => CalendarValue;
+    onChange?: (dates: Date[]) => void;
+    onNavigate?: (viewDate: Date, displayMode: DisplayMode) => void;
+    selectionMode?: () => SelectionMode;
+    min?: () => DateLike | null;
+    max?: () => DateLike | null;
+    restrictedDates?: () => RestrictOptions['restrictedDates'];
+    importantDates?: () => ReadonlyArray<DateLike> | ((d: Date) => boolean) | null;
+    firstDayOfWeek?: () => number;
+    weeks?: () => number;
+    months?: () => number;
+    displayMode?: () => DisplayMode;
+    disabled?: () => boolean;
+    readonly?: () => boolean;
+    locale?: () => string;
+    dayNameFormat?: () => CalendarNameFormat;
+    monthNameFormat?: () => CalendarNameFormat;
+    dateTooltip?: () => ((date: Date) => string | null | undefined) | undefined;
+};
+/** Normalize a calendar value to an ordered day-midnight list (pure). */
+export declare function normalizeCalendarValue(v: CalendarValue): Date[];
+export declare function createCalendar(config: CalendarConfig): {
+    readonly view: Date;
+    readonly mode: DisplayMode;
+    readonly title: string;
+    readonly panels: {
+        month: Date;
+        title: string;
+        matrix: MonthMatrixCell[][];
+    }[];
+    readonly weekdayHeaders: {
+        label: string;
+        weekday: number;
+    }[];
+    readonly yearCells: {
+        index: number;
+        label: string;
+        current: boolean;
+        selected: boolean;
+    }[];
+    readonly decadeCells: {
+        year: number;
+        outside: boolean;
+        current: boolean;
+        selected: boolean;
+    }[];
+    readonly selectedDates: Date[];
+    readonly previewRange: Date[] | null;
+    readonly focusDate: Date;
+    readonly hoverDate: Date | null;
+    readonly canClear: boolean;
+    readonly isInteractive: boolean;
+    /** Increments on every view/drill change; the styled component watches it to
+     *  replay its WAAPI animation on the updated DOM. */
+    readonly navToken: number;
+    /** Why the view last changed (read untracked from the animation effect). */
+    readonly navDir: CalendarNavDir;
+    dayState: (d: Date, panelMonth: Date) => CalendarDayState;
+    inPreview: (d: Date) => boolean;
+    formatFullDate: (d: Date) => string;
+    formatMonthTitle: (d: Date) => string;
+    pickDay: (d: Date, e?: {
+        ctrlKey?: boolean;
+        metaKey?: boolean;
+        shiftKey?: boolean;
+    }) => void;
+    step: (dir: -1 | 1) => void;
+    drillUp: () => void;
+    pickMonth: (monthIndex: number) => void;
+    pickYear: (year: number) => void;
+    goToday: () => void;
+    applyPreset: (p: CalendarPreset) => void;
+    clearSelection: () => void;
+    setHover: (d: Date | null) => Date | null;
+    onKeydown: (e: KeyboardEvent) => void;
+    /** Previous / Next navigation button. */
+    navProps(dir: -1 | 1): {
+        type: "button";
+        disabled: boolean;
+        'aria-label': string;
+        onclick: () => void;
+    };
+    /** The centered title button that drills up (month -> year -> decade). */
+    titleProps(): {
+        type: "button";
+        disabled: boolean;
+        'aria-live': "polite";
+        onclick: () => void;
+    };
+    /** The grid container: keyboard + ARIA. Works for month, year and decade
+     *  modes (the handler dispatches on the current mode). */
+    gridProps(): {
+        role: "grid";
+        'aria-label': string;
+        tabindex: number;
+        onkeydown: (e: KeyboardEvent) => void;
+    };
+    /** A single day button in the month grid. Combine with `dayState` for the
+     *  visual class flags. */
+    dayProps(cell: MonthMatrixCell, panelMonth: Date): {
+        type: "button";
+        role: "gridcell";
+        'aria-selected': boolean;
+        'aria-disabled': boolean;
+        'aria-current': "date" | undefined;
+        'aria-label': string;
+        title: string | undefined;
+        tabindex: number;
+        disabled: boolean;
+        onclick: (e: MouseEvent) => void;
+        onpointerenter: () => Date | null;
+        onpointerleave: () => Date | null;
+    };
+    /** A month cell in year mode. */
+    monthCellProps(monthIndex: number): {
+        type: "button";
+        disabled: boolean;
+        onclick: () => void;
+    };
+    /** A year cell in decade mode. */
+    yearCellProps(year: number): {
+        type: "button";
+        disabled: boolean;
+        onclick: () => void;
+    };
+    /** A preset shortcut button. */
+    presetProps(preset: CalendarPreset): {
+        type: "button";
+        disabled: boolean;
+        onclick: () => void;
+    };
+};
+export type Calendar = ReturnType<typeof createCalendar>;