@chromvoid/headless-ui 0.1.0

package/dist/input/index.js

@@ -0,0 +1,156 @@
+import { action, atom } from '@reatom/core';
+export function createInput(options = {}) {
+    const idBase = options.idBase ?? 'input';
+    const valueAtom = atom(options.value ?? '', `${idBase}.value`);
+    const typeAtom = atom(options.type ?? 'text', `${idBase}.type`);
+    const disabledAtom = atom(options.disabled ?? false, `${idBase}.disabled`);
+    const readonlyAtom = atom(options.readonly ?? false, `${idBase}.readonly`);
+    const requiredAtom = atom(options.required ?? false, `${idBase}.required`);
+    const placeholderAtom = atom(options.placeholder ?? '', `${idBase}.placeholder`);
+    const clearableAtom = atom(options.clearable ?? false, `${idBase}.clearable`);
+    const passwordToggleAtom = atom(options.passwordToggle ?? false, `${idBase}.passwordToggle`);
+    const passwordVisibleAtom = atom(false, `${idBase}.passwordVisible`);
+    const focusedAtom = atom(false, `${idBase}.focused`);
+    const filled = () => valueAtom().length > 0;
+    const resolvedType = () => {
+        const t = typeAtom();
+        const visible = passwordVisibleAtom();
+        return t === 'password' && visible ? 'text' : t;
+    };
+    const showClearButton = () => clearableAtom() && filled() && !disabledAtom() && !readonlyAtom();
+    const showPasswordToggle = () => typeAtom() === 'password' && passwordToggleAtom();
+    const setValue = action((value) => {
+        valueAtom.set(value);
+        options.onInput?.(value);
+    }, `${idBase}.setValue`);
+    const setType = action((type) => {
+        typeAtom.set(type);
+        passwordVisibleAtom.set(false);
+    }, `${idBase}.setType`);
+    const setDisabled = action((disabled) => {
+        disabledAtom.set(disabled);
+    }, `${idBase}.setDisabled`);
+    const setReadonly = action((readonly) => {
+        readonlyAtom.set(readonly);
+    }, `${idBase}.setReadonly`);
+    const setRequired = action((required) => {
+        requiredAtom.set(required);
+    }, `${idBase}.setRequired`);
+    const setPlaceholder = action((placeholder) => {
+        placeholderAtom.set(placeholder);
+    }, `${idBase}.setPlaceholder`);
+    const setClearable = action((clearable) => {
+        clearableAtom.set(clearable);
+    }, `${idBase}.setClearable`);
+    const setPasswordToggle = action((toggle) => {
+        passwordToggleAtom.set(toggle);
+        if (!toggle) {
+            passwordVisibleAtom.set(false);
+        }
+    }, `${idBase}.setPasswordToggle`);
+    const togglePasswordVisibility = action(() => {
+        if (typeAtom() !== 'password' || !passwordToggleAtom())
+            return;
+        passwordVisibleAtom.set(!passwordVisibleAtom());
+    }, `${idBase}.togglePasswordVisibility`);
+    const setFocused = action((focused) => {
+        focusedAtom.set(focused);
+    }, `${idBase}.setFocused`);
+    const clear = action(() => {
+        if (disabledAtom() || readonlyAtom())
+            return;
+        valueAtom.set('');
+        options.onClear?.();
+    }, `${idBase}.clear`);
+    const handleInput = action((value) => {
+        if (disabledAtom() || readonlyAtom())
+            return;
+        setValue(value);
+    }, `${idBase}.handleInput`);
+    const handleKeyDown = action((event) => {
+        if (event.key === 'Escape') {
+            if (clearableAtom() && filled() && !disabledAtom() && !readonlyAtom()) {
+                clear();
+            }
+        }
+    }, `${idBase}.handleKeyDown`);
+    const contracts = {
+        getInputProps() {
+            const isDisabled = disabledAtom();
+            const isReadonly = readonlyAtom();
+            const isRequired = requiredAtom();
+            const currentPlaceholder = placeholderAtom();
+            const currentType = typeAtom();
+            return {
+                id: `${idBase}-input`,
+                type: resolvedType(),
+                'aria-disabled': isDisabled ? 'true' : undefined,
+                'aria-readonly': isReadonly ? 'true' : undefined,
+                'aria-required': isRequired ? 'true' : undefined,
+                placeholder: currentPlaceholder || undefined,
+                disabled: isDisabled || undefined,
+                readonly: isReadonly || undefined,
+                tabindex: isDisabled ? '-1' : '0',
+                autocomplete: currentType === 'password' ? 'off' : undefined,
+            };
+        },
+        getClearButtonProps() {
+            const isVisible = showClearButton();
+            return {
+                role: 'button',
+                'aria-label': 'Clear input',
+                tabindex: '-1',
+                hidden: isVisible ? undefined : true,
+                'aria-hidden': isVisible ? undefined : 'true',
+            };
+        },
+        getPasswordToggleProps() {
+            const isVisible = showPasswordToggle();
+            const isPwdVisible = passwordVisibleAtom();
+            return {
+                role: 'button',
+                'aria-label': isPwdVisible ? 'Hide password' : 'Show password',
+                'aria-pressed': isPwdVisible ? 'true' : 'false',
+                tabindex: isVisible ? '0' : '-1',
+                hidden: isVisible ? undefined : true,
+                'aria-hidden': isVisible ? undefined : 'true',
+            };
+        },
+    };
+    const state = {
+        value: valueAtom,
+        type: typeAtom,
+        disabled: disabledAtom,
+        readonly: readonlyAtom,
+        required: requiredAtom,
+        placeholder: placeholderAtom,
+        clearable: clearableAtom,
+        passwordToggle: passwordToggleAtom,
+        passwordVisible: passwordVisibleAtom,
+        focused: focusedAtom,
+        filled,
+        resolvedType,
+        showClearButton,
+        showPasswordToggle,
+    };
+    const actions = {
+        setValue,
+        setType,
+        setDisabled,
+        setReadonly,
+        setRequired,
+        setPlaceholder,
+        setClearable,
+        setPasswordToggle,
+        togglePasswordVisibility,
+        setFocused,
+        clear,
+        handleInput,
+        handleKeyDown,
+    };
+    return {
+        state,
+        actions,
+        contracts,
+    };
+}

package/dist/interactions/composite-navigation.d.ts

@@ -0,0 +1,69 @@
+import { type Atom, type Computed } from '@reatom/core';
+export type CompositeNavigationOrientation = 'horizontal' | 'vertical';
+export type CompositeFocusStrategy = 'roving-tabindex' | 'aria-activedescendant';
+export type CompositeWrapMode = 'wrap' | 'clamp';
+export interface CompositeNavigationItem {
+    id: string;
+    disabled?: boolean;
+}
+export interface CompositeKeyboardEventLike {
+    key: string;
+    shiftKey: boolean;
+    ctrlKey: boolean;
+    metaKey: boolean;
+    altKey: boolean;
+}
+export interface CompositeKeyboardIntentContext {
+    orientation: CompositeNavigationOrientation;
+    homeEndEnabled?: boolean;
+}
+export type CompositeKeyboardIntent = 'NAV_NEXT' | 'NAV_PREV' | 'NAV_FIRST' | 'NAV_LAST';
+export interface CreateCompositeNavigationOptions {
+    items: readonly CompositeNavigationItem[];
+    idBase?: string;
+    orientation?: CompositeNavigationOrientation;
+    focusStrategy?: CompositeFocusStrategy;
+    wrapMode?: CompositeWrapMode;
+    initialActiveId?: string | null;
+}
+export interface CompositeNavigationState {
+    items: Atom<CompositeNavigationItem[]>;
+    activeId: Atom<string | null>;
+    enabledIds: Computed<readonly string[]>;
+    activeDomId: Computed<string | null>;
+    orientation: CompositeNavigationOrientation;
+    focusStrategy: CompositeFocusStrategy;
+    wrapMode: CompositeWrapMode;
+}
+export interface CompositeNavigationActions {
+    setItems(items: readonly CompositeNavigationItem[]): void;
+    setActive(id: string | null): void;
+    moveNext(): void;
+    movePrev(): void;
+    moveFirst(): void;
+    moveLast(): void;
+    handleKeyDown(event: CompositeKeyboardEventLike): void;
+}
+export interface CompositeContainerFocusProps {
+    tabindex: '0' | '-1';
+    'aria-activedescendant'?: string;
+}
+export interface CompositeItemFocusProps {
+    id: string;
+    tabindex: '0' | '-1';
+    'aria-disabled'?: 'true';
+    'data-active': 'true' | 'false';
+}
+export interface CompositeNavigationContracts {
+    getContainerFocusProps(): CompositeContainerFocusProps;
+    getItemFocusProps(id: string): CompositeItemFocusProps;
+}
+export interface CompositeNavigationModel {
+    readonly state: CompositeNavigationState;
+    readonly actions: CompositeNavigationActions;
+    readonly contracts: CompositeNavigationContracts;
+}
+export declare const getEnabledCompositeIds: (items: readonly CompositeNavigationItem[]) => string[];
+export declare const getNextCompositeIndex: (currentIndex: number, direction: 1 | -1, size: number, wrapMode: CompositeWrapMode) => number;
+export declare const mapCompositeNavigationIntent: (event: CompositeKeyboardEventLike, context: CompositeKeyboardIntentContext) => CompositeKeyboardIntent | null;
+export declare function createCompositeNavigation(options: CreateCompositeNavigationOptions): CompositeNavigationModel;

package/dist/interactions/composite-navigation.js

@@ -0,0 +1,169 @@
+import { action, atom, computed } from '@reatom/core';
+export const getEnabledCompositeIds = (items) => items.filter((item) => !item.disabled).map((item) => item.id);
+export const getNextCompositeIndex = (currentIndex, direction, size, wrapMode) => {
+    if (size <= 0)
+        return -1;
+    if (wrapMode === 'wrap') {
+        return (currentIndex + direction + size) % size;
+    }
+    const candidate = currentIndex + direction;
+    if (candidate < 0)
+        return 0;
+    if (candidate >= size)
+        return size - 1;
+    return candidate;
+};
+export const mapCompositeNavigationIntent = (event, context) => {
+    if (event.ctrlKey || event.metaKey || event.altKey) {
+        return null;
+    }
+    const nextKey = context.orientation === 'horizontal' ? 'ArrowRight' : 'ArrowDown';
+    const prevKey = context.orientation === 'horizontal' ? 'ArrowLeft' : 'ArrowUp';
+    if (event.key === nextKey)
+        return 'NAV_NEXT';
+    if (event.key === prevKey)
+        return 'NAV_PREV';
+    if (context.homeEndEnabled !== false) {
+        if (event.key === 'Home')
+            return 'NAV_FIRST';
+        if (event.key === 'End')
+            return 'NAV_LAST';
+    }
+    return null;
+};
+export function createCompositeNavigation(options) {
+    const idBase = options.idBase ?? 'composite-nav';
+    const orientation = options.orientation ?? 'horizontal';
+    const focusStrategy = options.focusStrategy ?? 'roving-tabindex';
+    const wrapMode = options.wrapMode ?? 'wrap';
+    const itemsAtom = atom([...options.items], `${idBase}.items`);
+    const enabledIdsAtom = computed(() => getEnabledCompositeIds(itemsAtom()), `${idBase}.enabledIds`);
+    const resolveInitialActiveId = () => {
+        const enabledIds = getEnabledCompositeIds(options.items);
+        if (options.initialActiveId != null && enabledIds.includes(options.initialActiveId)) {
+            return options.initialActiveId;
+        }
+        return enabledIds[0] ?? null;
+    };
+    const activeIdAtom = atom(resolveInitialActiveId(), `${idBase}.activeId`);
+    const itemDomId = (id) => `${idBase}-item-${id}`;
+    const activeDomIdAtom = computed(() => {
+        const activeId = activeIdAtom();
+        return activeId == null ? null : itemDomId(activeId);
+    }, `${idBase}.activeDomId`);
+    const ensureActiveInvariant = () => {
+        const enabledIds = enabledIdsAtom();
+        if (enabledIds.length === 0) {
+            activeIdAtom.set(null);
+            return;
+        }
+        const activeId = activeIdAtom();
+        if (activeId == null || !enabledIds.includes(activeId)) {
+            activeIdAtom.set(enabledIds[0] ?? null);
+        }
+    };
+    const move = (direction) => {
+        const enabledIds = enabledIdsAtom();
+        if (enabledIds.length === 0) {
+            activeIdAtom.set(null);
+            return;
+        }
+        const activeId = activeIdAtom();
+        if (activeId == null || !enabledIds.includes(activeId)) {
+            activeIdAtom.set(direction === -1 ? (enabledIds[enabledIds.length - 1] ?? null) : (enabledIds[0] ?? null));
+            return;
+        }
+        const currentIndex = enabledIds.indexOf(activeId);
+        const nextIndex = getNextCompositeIndex(currentIndex, direction, enabledIds.length, wrapMode);
+        activeIdAtom.set(enabledIds[nextIndex] ?? null);
+    };
+    const setItems = action((items) => {
+        itemsAtom.set([...items]);
+        ensureActiveInvariant();
+    }, `${idBase}.setItems`);
+    const setActive = action((id) => {
+        if (id == null) {
+            activeIdAtom.set(null);
+            return;
+        }
+        if (!enabledIdsAtom().includes(id))
+            return;
+        activeIdAtom.set(id);
+    }, `${idBase}.setActive`);
+    const moveNext = action(() => {
+        move(1);
+    }, `${idBase}.moveNext`);
+    const movePrev = action(() => {
+        move(-1);
+    }, `${idBase}.movePrev`);
+    const moveFirst = action(() => {
+        activeIdAtom.set(enabledIdsAtom()[0] ?? null);
+    }, `${idBase}.moveFirst`);
+    const moveLast = action(() => {
+        const enabledIds = enabledIdsAtom();
+        activeIdAtom.set(enabledIds[enabledIds.length - 1] ?? null);
+    }, `${idBase}.moveLast`);
+    const handleKeyDown = action((event) => {
+        const intent = mapCompositeNavigationIntent(event, { orientation });
+        switch (intent) {
+            case 'NAV_NEXT':
+                moveNext();
+                return;
+            case 'NAV_PREV':
+                movePrev();
+                return;
+            case 'NAV_FIRST':
+                moveFirst();
+                return;
+            case 'NAV_LAST':
+                moveLast();
+                return;
+            default:
+                return;
+        }
+    }, `${idBase}.handleKeyDown`);
+    const actions = {
+        setItems,
+        setActive,
+        moveNext,
+        movePrev,
+        moveFirst,
+        moveLast,
+        handleKeyDown,
+    };
+    const contracts = {
+        getContainerFocusProps() {
+            return {
+                tabindex: focusStrategy === 'aria-activedescendant' ? '0' : '-1',
+                'aria-activedescendant': focusStrategy === 'aria-activedescendant' ? (activeDomIdAtom() ?? undefined) : undefined,
+            };
+        },
+        getItemFocusProps(id) {
+            const item = itemsAtom().find((current) => current.id === id);
+            if (!item) {
+                throw new Error(`Unknown composite navigation item id: ${id}`);
+            }
+            const isActive = activeIdAtom() === id;
+            return {
+                id: itemDomId(id),
+                tabindex: focusStrategy === 'roving-tabindex' && isActive ? '0' : '-1',
+                'aria-disabled': item.disabled ? 'true' : undefined,
+                'data-active': isActive ? 'true' : 'false',
+            };
+        },
+    };
+    const state = {
+        items: itemsAtom,
+        activeId: activeIdAtom,
+        enabledIds: enabledIdsAtom,
+        activeDomId: activeDomIdAtom,
+        orientation,
+        focusStrategy,
+        wrapMode,
+    };
+    return {
+        state,
+        actions,
+        contracts,
+    };
+}

package/dist/interactions/index.d.ts

@@ -0,0 +1,15 @@
+export type InteractionIntent = 'NAV_NEXT' | 'NAV_PREV' | 'NAV_FIRST' | 'NAV_LAST' | 'ACTIVATE' | 'TOGGLE_SELECTION' | 'DISMISS';
+export type InteractionSource = 'keyboard' | 'pointer' | 'programmatic';
+export interface InteractionEvent {
+    intent: InteractionIntent;
+    source: InteractionSource;
+    shiftKey?: boolean;
+    ctrlKey?: boolean;
+    metaKey?: boolean;
+    altKey?: boolean;
+}
+export type InteractionHandler = (event: InteractionEvent) => void;
+export * from './keyboard-intents.js';
+export * from './typeahead.js';
+export * from './composite-navigation.js';
+export * from './overlay-focus.js';

package/dist/interactions/index.js

@@ -0,0 +1,4 @@
+export * from './keyboard-intents.js';
+export * from './typeahead.js';
+export * from './composite-navigation.js';
+export * from './overlay-focus.js';

package/dist/interactions/keyboard-intents.d.ts

@@ -0,0 +1,16 @@
+export type ListOrientation = 'vertical' | 'horizontal';
+export type KeyboardSelectionMode = 'single' | 'multiple';
+export interface KeyboardEventLike {
+    key: string;
+    shiftKey: boolean;
+    ctrlKey: boolean;
+    metaKey: boolean;
+    altKey: boolean;
+}
+export interface ListKeyboardIntentContext {
+    orientation: ListOrientation;
+    selectionMode: KeyboardSelectionMode;
+    rangeSelectionEnabled: boolean;
+}
+export type ListKeyboardIntent = 'NAV_NEXT' | 'NAV_PREV' | 'NAV_FIRST' | 'NAV_LAST' | 'TOGGLE_SELECTION' | 'RANGE_NEXT' | 'RANGE_PREV' | 'RANGE_SELECT_ACTIVE' | 'ACTIVATE' | 'DISMISS' | 'SELECT_ALL';
+export declare function mapListboxKeyboardIntent(event: KeyboardEventLike, context: ListKeyboardIntentContext): ListKeyboardIntent | null;

package/dist/interactions/keyboard-intents.js

@@ -0,0 +1,33 @@
+const isSelectAllShortcut = (event) => (event.ctrlKey || event.metaKey) && event.key.toLocaleLowerCase() === 'a';
+export function mapListboxKeyboardIntent(event, context) {
+    const nextKey = context.orientation === 'horizontal' ? 'ArrowRight' : 'ArrowDown';
+    const prevKey = context.orientation === 'horizontal' ? 'ArrowLeft' : 'ArrowUp';
+    const rangeEnabled = context.selectionMode === 'multiple' && context.rangeSelectionEnabled;
+    if (event.key === nextKey) {
+        if (rangeEnabled && event.shiftKey)
+            return 'RANGE_NEXT';
+        return 'NAV_NEXT';
+    }
+    if (event.key === prevKey) {
+        if (rangeEnabled && event.shiftKey)
+            return 'RANGE_PREV';
+        return 'NAV_PREV';
+    }
+    if (event.key === 'Home')
+        return 'NAV_FIRST';
+    if (event.key === 'End')
+        return 'NAV_LAST';
+    if (event.key === 'Escape')
+        return 'DISMISS';
+    if (event.key === ' ' || event.key === 'Spacebar') {
+        if (rangeEnabled && event.shiftKey)
+            return 'RANGE_SELECT_ACTIVE';
+        return 'TOGGLE_SELECTION';
+    }
+    if (event.key === 'Enter')
+        return 'ACTIVATE';
+    if (context.selectionMode === 'multiple' && isSelectAllShortcut(event)) {
+        return 'SELECT_ALL';
+    }
+    return null;
+}

package/dist/interactions/overlay-focus.d.ts

@@ -0,0 +1,40 @@
+import { type Atom, type Computed } from '@reatom/core';
+export type OverlayOpenSource = 'keyboard' | 'pointer' | 'programmatic';
+export type OverlayDismissIntent = 'escape' | 'outside-pointer' | 'outside-focus' | 'programmatic';
+export interface OverlayKeyboardEventLike {
+    key: string;
+}
+export interface CreateOverlayFocusOptions {
+    idBase?: string;
+    initialOpen?: boolean;
+    initialTriggerId?: string | null;
+    trapFocus?: boolean;
+    restoreFocus?: boolean;
+}
+export interface OverlayFocusState {
+    isOpen: Atom<boolean>;
+    openedBy: Atom<OverlayOpenSource | null>;
+    triggerId: Atom<string | null>;
+    restoreTargetId: Atom<string | null>;
+    lastDismissIntent: Atom<OverlayDismissIntent | null>;
+    isFocusTrapped: Computed<boolean>;
+    shouldRestoreFocus: boolean;
+}
+export interface OverlayFocusActions {
+    setTrigger(id: string | null): void;
+    open(source?: OverlayOpenSource, triggerId?: string | null): void;
+    close(intent?: OverlayDismissIntent): void;
+    dismiss(intent: OverlayDismissIntent): void;
+    trap(): void;
+    restore(): void;
+    handleKeyDown(event: OverlayKeyboardEventLike): void;
+    handleOutsidePointer(): void;
+    handleOutsideFocus(): void;
+}
+export interface OverlayFocusModel {
+    readonly state: OverlayFocusState;
+    readonly actions: OverlayFocusActions;
+}
+export declare const mapOverlayDismissIntent: (event: OverlayKeyboardEventLike) => OverlayDismissIntent | null;
+export declare const shouldTrapOverlayFocus: (isOpen: boolean, trapFocus: boolean) => boolean;
+export declare function createOverlayFocus(options?: CreateOverlayFocusOptions): OverlayFocusModel;

package/dist/interactions/overlay-focus.js

@@ -0,0 +1,93 @@
+import { action, atom, computed } from '@reatom/core';
+export const mapOverlayDismissIntent = (event) => {
+    if (event.key === 'Escape')
+        return 'escape';
+    return null;
+};
+export const shouldTrapOverlayFocus = (isOpen, trapFocus) => isOpen && trapFocus;
+export function createOverlayFocus(options = {}) {
+    const idBase = options.idBase ?? 'overlay-focus';
+    const trapFocus = options.trapFocus ?? true;
+    const restoreFocus = options.restoreFocus ?? true;
+    const isOpenAtom = atom(options.initialOpen ?? false, `${idBase}.isOpen`);
+    const openedByAtom = atom(null, `${idBase}.openedBy`);
+    const triggerIdAtom = atom(options.initialTriggerId ?? null, `${idBase}.triggerId`);
+    const restoreTargetIdAtom = atom(null, `${idBase}.restoreTargetId`);
+    const lastDismissIntentAtom = atom(null, `${idBase}.lastDismissIntent`);
+    const forceTrapAtom = atom(false, `${idBase}.forceTrap`);
+    const isFocusTrappedAtom = computed(() => shouldTrapOverlayFocus(isOpenAtom(), trapFocus || forceTrapAtom()), `${idBase}.isFocusTrapped`);
+    const setTrigger = action((id) => {
+        triggerIdAtom.set(id);
+    }, `${idBase}.setTrigger`);
+    const open = action((source = 'programmatic', triggerId = triggerIdAtom()) => {
+        if (triggerId != null) {
+            triggerIdAtom.set(triggerId);
+        }
+        lastDismissIntentAtom.set(null);
+        restoreTargetIdAtom.set(null);
+        openedByAtom.set(source);
+        isOpenAtom.set(true);
+    }, `${idBase}.open`);
+    const close = action((intent = 'programmatic') => {
+        if (!isOpenAtom()) {
+            lastDismissIntentAtom.set(intent);
+            return;
+        }
+        isOpenAtom.set(false);
+        openedByAtom.set(null);
+        lastDismissIntentAtom.set(intent);
+        if (restoreFocus) {
+            restoreTargetIdAtom.set(triggerIdAtom());
+        }
+    }, `${idBase}.close`);
+    const dismiss = action((intent) => {
+        close(intent);
+    }, `${idBase}.dismiss`);
+    const trap = action(() => {
+        forceTrapAtom.set(true);
+    }, `${idBase}.trap`);
+    const restore = action(() => {
+        forceTrapAtom.set(false);
+        restoreTargetIdAtom.set(null);
+    }, `${idBase}.restore`);
+    const handleKeyDown = action((event) => {
+        const intent = mapOverlayDismissIntent(event);
+        if (intent != null) {
+            dismiss(intent);
+        }
+    }, `${idBase}.handleKeyDown`);
+    const handleOutsidePointer = action(() => {
+        if (!isOpenAtom())
+            return;
+        dismiss('outside-pointer');
+    }, `${idBase}.handleOutsidePointer`);
+    const handleOutsideFocus = action(() => {
+        if (!isOpenAtom())
+            return;
+        dismiss('outside-focus');
+    }, `${idBase}.handleOutsideFocus`);
+    const actions = {
+        setTrigger,
+        open,
+        close,
+        dismiss,
+        trap,
+        restore,
+        handleKeyDown,
+        handleOutsidePointer,
+        handleOutsideFocus,
+    };
+    const state = {
+        isOpen: isOpenAtom,
+        openedBy: openedByAtom,
+        triggerId: triggerIdAtom,
+        restoreTargetId: restoreTargetIdAtom,
+        lastDismissIntent: lastDismissIntentAtom,
+        isFocusTrapped: isFocusTrappedAtom,
+        shouldRestoreFocus: restoreFocus,
+    };
+    return {
+        state,
+        actions,
+    };
+}

package/dist/interactions/typeahead.d.ts

@@ -0,0 +1,20 @@
+import type { KeyboardEventLike } from './keyboard-intents.js';
+export interface TypeaheadState {
+    buffer: string;
+    lastInputAt: number;
+}
+export interface TypeaheadItem {
+    id: string;
+    text: string;
+}
+export declare const normalizeTypeaheadText: (value: string) => string;
+export declare const createInitialTypeaheadState: () => TypeaheadState;
+export declare const isTypeaheadEvent: (event: KeyboardEventLike) => boolean;
+export declare const advanceTypeaheadState: (previous: TypeaheadState, key: string, now: number, timeoutMs: number) => {
+    query: string;
+    next: {
+        buffer: string;
+        lastInputAt: number;
+    };
+};
+export declare const findTypeaheadMatch: (query: string, items: readonly TypeaheadItem[], startIndex: number) => string | null;

package/dist/interactions/typeahead.js

@@ -0,0 +1,41 @@
+export const normalizeTypeaheadText = (value) => value.trim().toLocaleLowerCase();
+export const createInitialTypeaheadState = () => ({
+    buffer: '',
+    lastInputAt: 0,
+});
+const isSameCharacterSequence = (value) => value.length > 0 && [...value].every((character) => character === value[0]);
+export const isTypeaheadEvent = (event) => {
+    if (event.key.length !== 1 || event.key === ' ')
+        return false;
+    if (event.ctrlKey || event.metaKey || event.altKey)
+        return false;
+    return normalizeTypeaheadText(event.key).length > 0;
+};
+export const advanceTypeaheadState = (previous, key, now, timeoutMs) => {
+    const normalizedKey = normalizeTypeaheadText(key);
+    const expired = now - previous.lastInputAt > timeoutMs;
+    const baseBuffer = expired ? '' : previous.buffer;
+    const candidateBuffer = `${baseBuffer}${normalizedKey}`;
+    const query = isSameCharacterSequence(candidateBuffer) ? normalizedKey : candidateBuffer;
+    return {
+        query,
+        next: {
+            buffer: candidateBuffer,
+            lastInputAt: now,
+        },
+    };
+};
+export const findTypeaheadMatch = (query, items, startIndex) => {
+    if (query.length === 0 || items.length === 0)
+        return null;
+    for (let offset = 0; offset < items.length; offset += 1) {
+        const index = (startIndex + offset) % items.length;
+        const item = items[index];
+        if (item == null)
+            continue;
+        if (item.text.startsWith(query)) {
+            return item.id;
+        }
+    }
+    return null;
+};