foldkit 0.22.0 → 0.24.0

package/dist/ui/listbox/index.js

@@ -0,0 +1,509 @@
+import { Array, Effect, Match as M, Option, Predicate, Schema as S, String as Str, pipe, } from 'effect';
+import { OptionExt } from '../../effectExtensions';
+import { html } from '../../html';
+import { m } from '../../message';
+import { evo } from '../../struct';
+import * as Task from '../../task';
+import { groupContiguous } from '../group';
+import { findFirstEnabledIndex, isPrintableKey, keyToIndex } from '../keyboard';
+import { anchorHooks } from '../menu/anchor';
+import { resolveTypeaheadMatch } from '../typeahead';
+export { resolveTypeaheadMatch };
+// MODEL
+/** Schema for the activation trigger — whether the user interacted via mouse or keyboard. */
+export const ActivationTrigger = S.Literal('Pointer', 'Keyboard');
+/** Schema for the transition animation state, tracking enter/leave phases for CSS transition coordination. */
+export const TransitionState = S.Literal('Idle', 'EnterStart', 'EnterAnimating', 'LeaveStart', 'LeaveAnimating');
+/** Schema for the listbox orientation — whether items flow vertically or horizontally. */
+export const Orientation = S.Literal('Vertical', 'Horizontal');
+/** Schema for the listbox component's state, tracking open/closed status, active item, selected items, activation trigger, and typeahead search. */
+export const Model = S.Struct({
+    id: S.String,
+    isOpen: S.Boolean,
+    isAnimated: S.Boolean,
+    isModal: S.Boolean,
+    isMultiple: S.Boolean,
+    orientation: Orientation,
+    transitionState: TransitionState,
+    maybeActiveItemIndex: S.OptionFromSelf(S.Number),
+    activationTrigger: ActivationTrigger,
+    searchQuery: S.String,
+    searchVersion: S.Number,
+    selectedItems: S.Array(S.String),
+    maybeLastPointerPosition: S.OptionFromSelf(S.Struct({ screenX: S.Number, screenY: S.Number })),
+    maybeLastButtonPointerType: S.OptionFromSelf(S.String),
+});
+// MESSAGE
+/** Sent when the listbox opens via button click or keyboard. Contains an optional initial active item index — None for pointer, Some for keyboard. */
+export const Opened = m('Opened', {
+    maybeActiveItemIndex: S.OptionFromSelf(S.Number),
+});
+/** Sent when the listbox closes via Escape key or backdrop click. */
+export const Closed = m('Closed');
+/** Sent when focus leaves the listbox items container via Tab key or blur. */
+export const ClosedByTab = m('ClosedByTab');
+/** Sent when an item is highlighted via arrow keys or mouse hover. Includes activation trigger. */
+export const ActivatedItem = m('ActivatedItem', {
+    index: S.Number,
+    activationTrigger: ActivationTrigger,
+});
+/** Sent when the mouse leaves an enabled item. */
+export const DeactivatedItem = m('DeactivatedItem');
+/** Sent when an item is selected via Enter, Space, or click. Contains the item's string value. */
+export const SelectedItem = m('SelectedItem', { item: S.String });
+/** Sent when Enter or Space is pressed on the active item, triggering a programmatic click on the DOM element. */
+export const RequestedItemClick = m('RequestedItemClick', {
+    index: S.Number,
+});
+/** Sent when a printable character is typed for typeahead search. */
+export const Searched = m('Searched', {
+    key: S.String,
+    maybeTargetIndex: S.OptionFromSelf(S.Number),
+});
+/** Sent after the search debounce period to clear the accumulated query. */
+export const ClearedSearch = m('ClearedSearch', { version: S.Number });
+/** Sent when the pointer moves over a listbox item, carrying screen coordinates for tracked-pointer comparison. */
+export const MovedPointerOverItem = m('MovedPointerOverItem', {
+    index: S.Number,
+    screenX: S.Number,
+    screenY: S.Number,
+});
+/** Placeholder message used when no action is needed. */
+export const NoOp = m('NoOp');
+/** Sent internally when a double-rAF completes, advancing the transition to its animating phase. */
+export const AdvancedTransitionFrame = m('AdvancedTransitionFrame');
+/** Sent internally when all CSS transitions on the listbox items container have completed. */
+export const EndedTransition = m('EndedTransition');
+/** Sent internally when the listbox button moves in the viewport during a leave transition, cancelling the animation. */
+export const DetectedButtonMovement = m('DetectedButtonMovement');
+/** Sent when the user presses a pointer device on the listbox button. Records pointer type for click handling. */
+export const PressedPointerOnButton = m('PressedPointerOnButton', {
+    pointerType: S.String,
+    button: S.Number,
+});
+/** Union of all messages the listbox component can produce. */
+export const Message = S.Union(Opened, Closed, ClosedByTab, ActivatedItem, DeactivatedItem, SelectedItem, MovedPointerOverItem, RequestedItemClick, Searched, ClearedSearch, NoOp, AdvancedTransitionFrame, EndedTransition, DetectedButtonMovement, PressedPointerOnButton);
+// INIT
+const SEARCH_DEBOUNCE_MILLISECONDS = 350;
+const LEFT_MOUSE_BUTTON = 0;
+/** Creates an initial listbox model from a config. Defaults to closed with no active item and no selection. */
+export const init = (config) => ({
+    id: config.id,
+    isOpen: false,
+    isAnimated: config.isAnimated ?? false,
+    isModal: config.isModal ?? false,
+    isMultiple: config.isMultiple ?? false,
+    orientation: config.orientation ?? 'Vertical',
+    transitionState: 'Idle',
+    maybeActiveItemIndex: Option.none(),
+    activationTrigger: 'Keyboard',
+    searchQuery: '',
+    searchVersion: 0,
+    selectedItems: config.selectedItems ?? [],
+    maybeLastPointerPosition: Option.none(),
+    maybeLastButtonPointerType: Option.none(),
+});
+// UPDATE
+const closedModel = (model) => evo(model, {
+    isOpen: () => false,
+    transitionState: () => (model.isAnimated ? 'LeaveStart' : 'Idle'),
+    maybeActiveItemIndex: () => Option.none(),
+    activationTrigger: () => 'Keyboard',
+    searchQuery: () => '',
+    searchVersion: () => 0,
+    maybeLastPointerPosition: () => Option.none(),
+    maybeLastButtonPointerType: () => Option.none(),
+});
+const buttonSelector = (id) => `#${id}-button`;
+const itemsSelector = (id) => `#${id}-items`;
+const itemSelector = (id, index) => `#${id}-item-${index}`;
+const withUpdateReturn = M.withReturnType();
+/** Processes a listbox message and returns the next model and commands. */
+export const update = (model, message) => {
+    const maybeNextFrame = OptionExt.when(model.isAnimated, Task.nextFrame.pipe(Effect.as(AdvancedTransitionFrame())));
+    const maybeLockScroll = OptionExt.when(model.isModal, Task.lockScroll.pipe(Effect.as(NoOp())));
+    const maybeUnlockScroll = OptionExt.when(model.isModal, Task.unlockScroll.pipe(Effect.as(NoOp())));
+    const maybeInertOthers = OptionExt.when(model.isModal, Task.inertOthers(model.id, [
+        buttonSelector(model.id),
+        itemsSelector(model.id),
+    ]).pipe(Effect.as(NoOp())));
+    const maybeRestoreInert = OptionExt.when(model.isModal, Task.restoreInert(model.id).pipe(Effect.as(NoOp())));
+    const focusButton = Task.focus(buttonSelector(model.id)).pipe(Effect.ignore, Effect.as(NoOp()));
+    return M.value(message).pipe(withUpdateReturn, M.tagsExhaustive({
+        Opened: ({ maybeActiveItemIndex }) => {
+            const nextModel = evo(model, {
+                isOpen: () => true,
+                transitionState: () => (model.isAnimated ? 'EnterStart' : 'Idle'),
+                maybeActiveItemIndex: () => maybeActiveItemIndex,
+                activationTrigger: () => Option.match(maybeActiveItemIndex, {
+                    onNone: () => 'Pointer',
+                    onSome: () => 'Keyboard',
+                }),
+                searchQuery: () => '',
+                searchVersion: () => 0,
+                maybeLastPointerPosition: () => Option.none(),
+            });
+            return [
+                nextModel,
+                pipe(Array.getSomes([maybeNextFrame, maybeLockScroll, maybeInertOthers]), Array.prepend(Task.focus(itemsSelector(model.id)).pipe(Effect.ignore, Effect.as(NoOp())))),
+            ];
+        },
+        Closed: () => [
+            closedModel(model),
+            pipe(Array.getSomes([
+                maybeNextFrame,
+                maybeUnlockScroll,
+                maybeRestoreInert,
+            ]), Array.prepend(focusButton)),
+        ],
+        ClosedByTab: () => [
+            closedModel(model),
+            Array.getSomes([maybeNextFrame, maybeUnlockScroll, maybeRestoreInert]),
+        ],
+        ActivatedItem: ({ index, activationTrigger }) => [
+            evo(model, {
+                maybeActiveItemIndex: () => Option.some(index),
+                activationTrigger: () => activationTrigger,
+            }),
+            activationTrigger === 'Keyboard'
+                ? [
+                    Task.scrollIntoView(itemSelector(model.id, index)).pipe(Effect.ignore, Effect.as(NoOp())),
+                ]
+                : [],
+        ],
+        MovedPointerOverItem: ({ index, screenX, screenY }) => {
+            const isSamePosition = Option.exists(model.maybeLastPointerPosition, position => position.screenX === screenX && position.screenY === screenY);
+            if (isSamePosition) {
+                return [model, []];
+            }
+            return [
+                evo(model, {
+                    maybeActiveItemIndex: () => Option.some(index),
+                    activationTrigger: () => 'Pointer',
+                    maybeLastPointerPosition: () => Option.some({ screenX, screenY }),
+                }),
+                [],
+            ];
+        },
+        DeactivatedItem: () => model.activationTrigger === 'Pointer'
+            ? [evo(model, { maybeActiveItemIndex: () => Option.none() }), []]
+            : [model, []],
+        SelectedItem: ({ item }) => {
+            if (model.isMultiple) {
+                const nextSelectedItems = Array.contains(model.selectedItems, item)
+                    ? Array.filter(model.selectedItems, selected => selected !== item)
+                    : Array.append(model.selectedItems, item);
+                return [evo(model, { selectedItems: () => nextSelectedItems }), []];
+            }
+            return [
+                evo(closedModel(model), {
+                    selectedItems: () => [item],
+                }),
+                pipe(Array.getSomes([
+                    maybeNextFrame,
+                    maybeUnlockScroll,
+                    maybeRestoreInert,
+                ]), Array.prepend(focusButton)),
+            ];
+        },
+        RequestedItemClick: ({ index }) => [
+            model,
+            [
+                Task.clickElement(itemSelector(model.id, index)).pipe(Effect.ignore, Effect.as(NoOp())),
+            ],
+        ],
+        Searched: ({ key, maybeTargetIndex }) => {
+            const nextSearchQuery = model.searchQuery + key;
+            const nextSearchVersion = model.searchVersion + 1;
+            return [
+                evo(model, {
+                    searchQuery: () => nextSearchQuery,
+                    searchVersion: () => nextSearchVersion,
+                    maybeActiveItemIndex: () => Option.orElse(maybeTargetIndex, () => model.maybeActiveItemIndex),
+                }),
+                [
+                    Task.delay(SEARCH_DEBOUNCE_MILLISECONDS).pipe(Effect.as(ClearedSearch({ version: nextSearchVersion }))),
+                ],
+            ];
+        },
+        ClearedSearch: ({ version }) => {
+            if (version !== model.searchVersion) {
+                return [model, []];
+            }
+            return [evo(model, { searchQuery: () => '' }), []];
+        },
+        AdvancedTransitionFrame: () => M.value(model.transitionState).pipe(withUpdateReturn, M.when('EnterStart', () => [
+            evo(model, { transitionState: () => 'EnterAnimating' }),
+            [
+                Task.waitForTransitions(itemsSelector(model.id)).pipe(Effect.as(EndedTransition())),
+            ],
+        ]), M.when('LeaveStart', () => [
+            evo(model, { transitionState: () => 'LeaveAnimating' }),
+            [
+                Effect.raceFirst(Task.detectElementMovement(buttonSelector(model.id)).pipe(Effect.as(DetectedButtonMovement())), Task.waitForTransitions(itemsSelector(model.id)).pipe(Effect.as(EndedTransition()))),
+            ],
+        ]), M.orElse(() => [model, []])),
+        EndedTransition: () => M.value(model.transitionState).pipe(withUpdateReturn, M.whenOr('EnterAnimating', 'LeaveAnimating', () => [
+            evo(model, { transitionState: () => 'Idle' }),
+            [],
+        ]), M.orElse(() => [model, []])),
+        DetectedButtonMovement: () => M.value(model.transitionState).pipe(withUpdateReturn, M.when('LeaveAnimating', () => [
+            evo(model, { transitionState: () => 'Idle' }),
+            [],
+        ]), M.orElse(() => [model, []])),
+        PressedPointerOnButton: ({ pointerType, button }) => {
+            const withPointerType = evo(model, {
+                maybeLastButtonPointerType: () => Option.some(pointerType),
+            });
+            if (pointerType !== 'mouse' || button !== LEFT_MOUSE_BUTTON) {
+                return [withPointerType, []];
+            }
+            if (model.isOpen) {
+                return [
+                    closedModel(withPointerType),
+                    pipe(Array.getSomes([
+                        maybeNextFrame,
+                        maybeUnlockScroll,
+                        maybeRestoreInert,
+                    ]), Array.prepend(focusButton)),
+                ];
+            }
+            const nextModel = evo(withPointerType, {
+                isOpen: () => true,
+                transitionState: () => (model.isAnimated ? 'EnterStart' : 'Idle'),
+                maybeActiveItemIndex: () => Option.none(),
+                activationTrigger: () => 'Pointer',
+                searchQuery: () => '',
+                searchVersion: () => 0,
+                maybeLastPointerPosition: () => Option.none(),
+            });
+            return [
+                nextModel,
+                pipe(Array.getSomes([maybeNextFrame, maybeLockScroll, maybeInertOthers]), Array.prepend(Task.focus(itemsSelector(model.id)).pipe(Effect.ignore, Effect.as(NoOp())))),
+            ];
+        },
+        NoOp: () => [model, []],
+    }));
+};
+const itemId = (id, index) => `${id}-item-${index}`;
+/** Renders a headless listbox with typeahead search, keyboard navigation, selection tracking, and aria-activedescendant focus management. */
+export const view = (config) => {
+    const { div, input, AriaActiveDescendant, AriaControls, AriaDisabled, AriaExpanded, AriaHasPopup, AriaLabelledBy, AriaOrientation, AriaSelected, Attribute, Class, DataAttribute, Id, Name, OnBlur, OnClick, OnDestroy, OnInsert, OnKeyDownPreventDefault, OnKeyUpPreventDefault, OnPointerDown, OnPointerLeave, OnPointerMove, Role, Style, Tabindex, Type, Value, keyed, } = html();
+    const { model: { id, isOpen, isMultiple, orientation, transitionState, maybeActiveItemIndex, selectedItems, searchQuery, maybeLastButtonPointerType, }, toMessage, items, itemToConfig, isItemDisabled, isButtonDisabled, buttonContent, buttonClassName, itemsClassName, backdropClassName, className, itemGroupKey, groupToHeading, groupClassName, separatorClassName, anchor, name, form, isDisabled, isInvalid, } = config;
+    const itemToValue = config.itemToValue ?? (item => String(item));
+    const itemToSearchText = config.itemToSearchText ?? (item => itemToValue(item));
+    const isLeaving = transitionState === 'LeaveStart' || transitionState === 'LeaveAnimating';
+    const isVisible = isOpen || isLeaving;
+    const transitionAttributes = M.value(transitionState).pipe(M.when('EnterStart', () => [
+        DataAttribute('closed', ''),
+        DataAttribute('enter', ''),
+        DataAttribute('transition', ''),
+    ]), M.when('EnterAnimating', () => [
+        DataAttribute('enter', ''),
+        DataAttribute('transition', ''),
+    ]), M.when('LeaveStart', () => [
+        DataAttribute('leave', ''),
+        DataAttribute('transition', ''),
+    ]), M.when('LeaveAnimating', () => [
+        DataAttribute('closed', ''),
+        DataAttribute('leave', ''),
+        DataAttribute('transition', ''),
+    ]), M.orElse(() => []));
+    const isItemDisabledByIndex = (index) => Predicate.isNotUndefined(isItemDisabled) &&
+        pipe(items, Array.get(index), Option.exists(item => isItemDisabled(item, index)));
+    const isButtonEffectivelyDisabled = isDisabled || isButtonDisabled;
+    const nextKey = orientation === 'Horizontal' ? 'ArrowRight' : 'ArrowDown';
+    const previousKey = orientation === 'Horizontal' ? 'ArrowLeft' : 'ArrowUp';
+    const navigationKeys = [
+        nextKey,
+        previousKey,
+        'Home',
+        'End',
+        'PageUp',
+        'PageDown',
+    ];
+    const isNavigationKey = (key) => Array.contains(navigationKeys, key);
+    const firstEnabledIndex = findFirstEnabledIndex(items.length, 0, isItemDisabledByIndex)(0, 1);
+    const lastEnabledIndex = findFirstEnabledIndex(items.length, 0, isItemDisabledByIndex)(items.length - 1, -1);
+    const selectedItemIndex = pipe(Array.head(selectedItems), Option.flatMap(selectedItem => Array.findFirstIndex(items, item => itemToValue(item) === selectedItem)));
+    const handleButtonKeyDown = (key) => M.value(key).pipe(M.whenOr('Enter', ' ', 'ArrowDown', () => Option.some(toMessage(Opened({
+        maybeActiveItemIndex: Option.orElse(selectedItemIndex, () => Option.some(firstEnabledIndex)),
+    })))), M.when('ArrowUp', () => Option.some(toMessage(Opened({
+        maybeActiveItemIndex: Option.orElse(selectedItemIndex, () => Option.some(lastEnabledIndex)),
+    })))), M.orElse(() => Option.none()));
+    const handleButtonPointerDown = (pointerType, button) => Option.some(toMessage(PressedPointerOnButton({
+        pointerType,
+        button,
+    })));
+    const handleButtonClick = () => {
+        const isMouse = Option.exists(maybeLastButtonPointerType, type => type === 'mouse');
+        if (isMouse) {
+            return toMessage(NoOp());
+        }
+        else if (isOpen) {
+            return toMessage(Closed());
+        }
+        else {
+            return toMessage(Opened({ maybeActiveItemIndex: Option.none() }));
+        }
+    };
+    const handleSpaceKeyUp = (key) => OptionExt.when(key === ' ', toMessage(NoOp()));
+    const resolveActiveIndex = (key) => Option.match(maybeActiveItemIndex, {
+        onNone: () => M.value(key).pipe(M.whenOr(previousKey, 'End', 'PageDown', () => lastEnabledIndex), M.orElse(() => firstEnabledIndex)),
+        onSome: activeIndex => keyToIndex(nextKey, previousKey, items.length, activeIndex, isItemDisabledByIndex)(key),
+    });
+    const searchForKey = (key) => {
+        const nextQuery = searchQuery + key;
+        const maybeTargetIndex = resolveTypeaheadMatch(items, nextQuery, maybeActiveItemIndex, isItemDisabledByIndex, itemToSearchText, Str.isNonEmpty(searchQuery));
+        return Option.some(toMessage(Searched({ key, maybeTargetIndex })));
+    };
+    const handleItemsKeyDown = (key) => M.value(key).pipe(M.when('Escape', () => Option.some(toMessage(Closed()))), M.when('Enter', () => Option.map(maybeActiveItemIndex, index => toMessage(RequestedItemClick({ index })))), M.when(' ', () => Str.isNonEmpty(searchQuery)
+        ? searchForKey(' ')
+        : Option.map(maybeActiveItemIndex, index => toMessage(RequestedItemClick({ index })))), M.when(isNavigationKey, () => Option.some(toMessage(ActivatedItem({
+        index: resolveActiveIndex(key),
+        activationTrigger: 'Keyboard',
+    })))), M.when(isPrintableKey, () => searchForKey(key)), M.orElse(() => Option.none()));
+    const buttonAttributes = [
+        Id(`${id}-button`),
+        Type('button'),
+        Class(buttonClassName),
+        AriaHasPopup('listbox'),
+        AriaExpanded(isVisible),
+        AriaControls(`${id}-items`),
+        ...(isButtonEffectivelyDisabled
+            ? [AriaDisabled(true), DataAttribute('disabled', '')]
+            : [
+                OnPointerDown(handleButtonPointerDown),
+                OnKeyDownPreventDefault(handleButtonKeyDown),
+                OnKeyUpPreventDefault(handleSpaceKeyUp),
+                OnClick(handleButtonClick()),
+            ]),
+        ...(isVisible ? [DataAttribute('open', '')] : []),
+        ...(isInvalid ? [DataAttribute('invalid', '')] : []),
+    ];
+    const maybeActiveDescendant = Option.match(maybeActiveItemIndex, {
+        onNone: () => [],
+        onSome: index => [AriaActiveDescendant(itemId(id, index))],
+    });
+    const hooks = anchor
+        ? anchorHooks({ buttonId: `${id}-button`, anchor })
+        : undefined;
+    const anchorAttributes = hooks
+        ? [
+            Style({ position: 'absolute', margin: '0', visibility: 'hidden' }),
+            OnInsert(hooks.onInsert),
+            OnDestroy(hooks.onDestroy),
+        ]
+        : [];
+    const itemsContainerAttributes = [
+        Id(`${id}-items`),
+        Role('listbox'),
+        AriaOrientation(Str.toLowerCase(orientation)),
+        ...(isMultiple ? [Attribute('aria-multiselectable', 'true')] : []),
+        AriaLabelledBy(`${id}-button`),
+        ...maybeActiveDescendant,
+        Tabindex(0),
+        Class(itemsClassName),
+        ...anchorAttributes,
+        ...transitionAttributes,
+        ...(isLeaving
+            ? []
+            : [
+                OnKeyDownPreventDefault(handleItemsKeyDown),
+                OnKeyUpPreventDefault(handleSpaceKeyUp),
+                OnBlur(toMessage(ClosedByTab())),
+            ]),
+    ];
+    const listboxItems = Array.map(items, (item, index) => {
+        const isActiveItem = Option.exists(maybeActiveItemIndex, activeIndex => activeIndex === index);
+        const isDisabledItem = isItemDisabledByIndex(index);
+        const isSelectedItem = Array.contains(selectedItems, itemToValue(item));
+        const itemConfig = itemToConfig(item, {
+            isActive: isActiveItem,
+            isDisabled: isDisabledItem,
+            isSelected: isSelectedItem,
+        });
+        const isInteractive = !isDisabledItem && !isLeaving;
+        return keyed('div')(itemId(id, index), [
+            Id(itemId(id, index)),
+            Role('option'),
+            AriaSelected(isSelectedItem),
+            Class(itemConfig.className),
+            ...(isActiveItem ? [DataAttribute('active', '')] : []),
+            ...(isSelectedItem ? [DataAttribute('selected', '')] : []),
+            ...(isDisabledItem
+                ? [AriaDisabled(true), DataAttribute('disabled', '')]
+                : []),
+            ...(isInteractive
+                ? [
+                    OnClick(toMessage(SelectedItem({ item: itemToValue(item) }))),
+                    OnPointerMove((screenX, screenY, pointerType) => OptionExt.when(pointerType !== 'touch', toMessage(MovedPointerOverItem({ index, screenX, screenY })))),
+                    OnPointerLeave(pointerType => OptionExt.when(pointerType !== 'touch', toMessage(DeactivatedItem()))),
+                ]
+                : []),
+        ], [itemConfig.content]);
+    });
+    const renderGroupedItems = () => {
+        if (!itemGroupKey) {
+            return listboxItems;
+        }
+        const segments = groupContiguous(listboxItems, (_, index) => Array.get(items, index).pipe(Option.match({
+            onNone: () => '',
+            onSome: item => itemGroupKey(item, index),
+        })));
+        return Array.flatMap(segments, (segment, segmentIndex) => {
+            const maybeHeading = Option.fromNullable(groupToHeading?.(segment.key));
+            const headingId = `${id}-heading-${segment.key}`;
+            const headingElement = Option.match(maybeHeading, {
+                onNone: () => [],
+                onSome: heading => [
+                    keyed('div')(headingId, [Id(headingId), Role('presentation'), Class(heading.className)], [heading.content]),
+                ],
+            });
+            const groupContent = [...headingElement, ...segment.items];
+            const groupElement = keyed('div')(`${id}-group-${segment.key}`, [
+                Role('group'),
+                ...(Option.isSome(maybeHeading) ? [AriaLabelledBy(headingId)] : []),
+                ...(groupClassName ? [Class(groupClassName)] : []),
+            ], groupContent);
+            const separator = segmentIndex > 0 && separatorClassName
+                ? [
+                    keyed('div')(`${id}-separator-${segmentIndex}`, [Role('separator'), Class(separatorClassName)], []),
+                ]
+                : [];
+            return [...separator, groupElement];
+        });
+    };
+    const backdrop = keyed('div')(`${id}-backdrop`, [
+        Class(backdropClassName),
+        ...(isLeaving ? [] : [OnClick(toMessage(Closed()))]),
+    ], []);
+    const renderedItems = renderGroupedItems();
+    const visibleContent = [
+        backdrop,
+        keyed('div')(`${id}-items-container`, itemsContainerAttributes, renderedItems),
+    ];
+    const formAttribute = form ? [Attribute('form', form)] : [];
+    const hiddenInputs = name
+        ? Array.match(selectedItems, {
+            onEmpty: () => [input([Type('hidden'), Name(name), ...formAttribute])],
+            onNonEmpty: Array.map(selectedItem => input([
+                Type('hidden'),
+                Name(name),
+                Value(selectedItem),
+                ...formAttribute,
+            ])),
+        })
+        : [];
+    const wrapperAttributes = [
+        ...(className ? [Class(className)] : []),
+        ...(isVisible ? [DataAttribute('open', '')] : []),
+        ...(isDisabled ? [DataAttribute('disabled', '')] : []),
+        ...(isInvalid ? [DataAttribute('invalid', '')] : []),
+    ];
+    return div(wrapperAttributes, [
+        keyed('button')(`${id}-button`, buttonAttributes, [buttonContent]),
+        ...hiddenInputs,
+        ...(isVisible ? visibleContent : []),
+    ]);
+};

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

@@ -0,0 +1,4 @@
+export { init, update, view, Model, Message, TransitionState, Orientation, } from './index';
+export type { ActivationTrigger, Opened, Closed, ClosedByTab, ActivatedItem, DeactivatedItem, SelectedItem, MovedPointerOverItem, Searched, ClearedSearch, NoOp, AdvancedTransitionFrame, EndedTransition, InitConfig, ViewConfig, ItemConfig, GroupHeading, } from './index';
+export type { AnchorConfig } from '../menu/anchor';
+//# sourceMappingURL=public.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"public.d.ts","sourceRoot":"","sources":["../../../src/ui/listbox/public.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,IAAI,EACJ,MAAM,EACN,IAAI,EACJ,KAAK,EACL,OAAO,EACP,eAAe,EACf,WAAW,GACZ,MAAM,SAAS,CAAA;AAEhB,YAAY,EACV,iBAAiB,EACjB,MAAM,EACN,MAAM,EACN,WAAW,EACX,aAAa,EACb,eAAe,EACf,YAAY,EACZ,oBAAoB,EACpB,QAAQ,EACR,aAAa,EACb,IAAI,EACJ,uBAAuB,EACvB,eAAe,EACf,UAAU,EACV,UAAU,EACV,UAAU,EACV,YAAY,GACb,MAAM,SAAS,CAAA;AAEhB,YAAY,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAA"}

package/dist/ui/listbox/public.js

@@ -0,0 +1 @@
+export { init, update, view, Model, Message, TransitionState, Orientation, } from './index';

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

@@ -1,6 +1,8 @@
-import { Option, Schema as S } from 'effect';
+import { Schema as S } from 'effect';
 import type { Command } from '../../command';
 import { type Html } from '../../html';
+import { groupContiguous } from '../group';
+import { resolveTypeaheadMatch } from '../typeahead';
 import type { AnchorConfig } from './anchor';
 /** Schema for the activation trigger — whether the user interacted via mouse or keyboard. */
 export declare const ActivationTrigger: S.Literal<["Pointer", "Keyboard"]>;
@@ -182,14 +184,7 @@ export type ViewConfig<Message, Item extends string> = Readonly<{
     separatorClassName?: string;
     anchor?: AnchorConfig;
 }>;
-type Segment<A> = Readonly<{
-    key: string;
-    items: ReadonlyArray<A>;
-}>;
-export declare const groupContiguous: <A>(items: ReadonlyArray<A>, toKey: (item: A, index: number) => string) => ReadonlyArray<Segment<A>>;
-/** Finds the first enabled item whose search text starts with the query, searching forward from the active item and wrapping around. On a fresh search, starts after the active item; on a refinement, includes the active item. */
-export declare const resolveTypeaheadMatch: <Item extends string>(items: ReadonlyArray<Item>, query: string, maybeActiveItemIndex: Option.Option<number>, isDisabled: (index: number) => boolean, itemToSearchText: (item: Item, index: number) => string, isRefinement: boolean) => Option.Option<number>;
+export { groupContiguous, resolveTypeaheadMatch };
 /** Renders a headless menu with typeahead search, keyboard navigation, and aria-activedescendant focus management. */
 export declare const view: <Message, Item extends string>(config: ViewConfig<Message, Item>) => Html;
-export {};
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/ui/menu/index.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/ui/menu/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAML,MAAM,IAAI,CAAC,EAGZ,MAAM,QAAQ,CAAA;AAEf,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,eAAe,CAAA;AAE5C,OAAO,EAAE,KAAK,IAAI,EAAQ,MAAM,YAAY,CAAA;AAI5C,OAAO,EAAE,eAAe,EAAE,MAAM,UAAU,CAAA;AAE1C,OAAO,EAAE,qBAAqB,EAAE,MAAM,cAAc,CAAA;AAEpD,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,UAAU,CAAA;AAI5C,6FAA6F;AAC7F,eAAO,MAAM,iBAAiB,oCAAmC,CAAA;AACjE,MAAM,MAAM,iBAAiB,GAAG,OAAO,iBAAiB,CAAC,IAAI,CAAA;AAE7D,8GAA8G;AAC9G,eAAO,MAAM,eAAe,qFAM3B,CAAA;AACD,MAAM,MAAM,eAAe,GAAG,OAAO,eAAe,CAAC,IAAI,CAAA;AAQzD,iIAAiI;AACjI,eAAO,MAAM,KAAK;;;;;;;;;;;;;;;;;;;;EAehB,CAAA;AAEF,MAAM,MAAM,KAAK,GAAG,OAAO,KAAK,CAAC,IAAI,CAAA;AAIrC,mJAAmJ;AACnJ,eAAO,MAAM,MAAM;;EAEjB,CAAA;AACF,kEAAkE;AAClE,eAAO,MAAM,MAAM,2DAAc,CAAA;AACjC,2EAA2E;AAC3E,eAAO,MAAM,WAAW,gEAAmB,CAAA;AAC3C,mGAAmG;AACnG,eAAO,MAAM,aAAa;;;EAGxB,CAAA;AACF,kDAAkD;AAClD,eAAO,MAAM,eAAe,oEAAuB,CAAA;AACnD,gEAAgE;AAChE,eAAO,MAAM,YAAY;;EAAyC,CAAA;AAClE,kHAAkH;AAClH,eAAO,MAAM,kBAAkB;;EAE7B,CAAA;AACF,qEAAqE;AACrE,eAAO,MAAM,QAAQ;;;EAGnB,CAAA;AACF,4EAA4E;AAC5E,eAAO,MAAM,aAAa;;EAA4C,CAAA;AACtE,gHAAgH;AAChH,eAAO,MAAM,oBAAoB;;;;EAI/B,CAAA;AACF,yDAAyD;AACzD,eAAO,MAAM,IAAI,yDAAY,CAAA;AAC7B,oGAAoG;AACpG,eAAO,MAAM,uBAAuB,4EAA+B,CAAA;AACnE,2FAA2F;AAC3F,eAAO,MAAM,eAAe,oEAAuB,CAAA;AACnD,sHAAsH;AACtH,eAAO,MAAM,sBAAsB,2EAA8B,CAAA;AACjE,kHAAkH;AAClH,eAAO,MAAM,sBAAsB;;;;;;EAMjC,CAAA;AACF,uGAAuG;AACvG,eAAO,MAAM,sBAAsB;;;;EAIjC,CAAA;AAEF,4DAA4D;AAC5D,eAAO,MAAM,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAiBnB,CAAA;AAED,MAAM,MAAM,MAAM,GAAG,OAAO,MAAM,CAAC,IAAI,CAAA;AACvC,MAAM,MAAM,MAAM,GAAG,OAAO,MAAM,CAAC,IAAI,CAAA;AACvC,MAAM,MAAM,WAAW,GAAG,OAAO,WAAW,CAAC,IAAI,CAAA;AACjD,MAAM,MAAM,aAAa,GAAG,OAAO,aAAa,CAAC,IAAI,CAAA;AACrD,MAAM,MAAM,eAAe,GAAG,OAAO,eAAe,CAAC,IAAI,CAAA;AACzD,MAAM,MAAM,YAAY,GAAG,OAAO,YAAY,CAAC,IAAI,CAAA;AACnD,MAAM,MAAM,oBAAoB,GAAG,OAAO,oBAAoB,CAAC,IAAI,CAAA;AACnE,MAAM,MAAM,kBAAkB,GAAG,OAAO,kBAAkB,CAAC,IAAI,CAAA;AAC/D,MAAM,MAAM,QAAQ,GAAG,OAAO,QAAQ,CAAC,IAAI,CAAA;AAC3C,MAAM,MAAM,aAAa,GAAG,OAAO,aAAa,CAAC,IAAI,CAAA;AACrD,MAAM,MAAM,IAAI,GAAG,OAAO,IAAI,CAAC,IAAI,CAAA;AACnC,MAAM,MAAM,uBAAuB,GAAG,OAAO,uBAAuB,CAAC,IAAI,CAAA;AACzE,MAAM,MAAM,eAAe,GAAG,OAAO,eAAe,CAAC,IAAI,CAAA;AACzD,MAAM,MAAM,sBAAsB,GAAG,OAAO,sBAAsB,CAAC,IAAI,CAAA;AACvE,MAAM,MAAM,sBAAsB,GAAG,OAAO,sBAAsB,CAAC,IAAI,CAAA;AACvE,MAAM,MAAM,sBAAsB,GAAG,OAAO,sBAAsB,CAAC,IAAI,CAAA;AAEvE,MAAM,MAAM,OAAO,GAAG,OAAO,OAAO,CAAC,IAAI,CAAA;AASzC,kNAAkN;AAClN,MAAM,MAAM,UAAU,GAAG,QAAQ,CAAC;IAChC,EAAE,EAAE,MAAM,CAAA;IACV,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,OAAO,CAAC,EAAE,OAAO,CAAA;CAClB,CAAC,CAAA;AAEF,2FAA2F;AAC3F,eAAO,MAAM,IAAI,GAAI,QAAQ,UAAU,KAAG,KAaxC,CAAA;AAsBF,KAAK,YAAY,GAAG,CAAC,KAAK,EAAE,aAAa,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC,CAAC,CAAA;AAG5D,wEAAwE;AACxE,eAAO,MAAM,MAAM,GAAI,OAAO,KAAK,EAAE,SAAS,OAAO,KAAG,YAuUvD,CAAA;AAID,8DAA8D;AAC9D,MAAM,MAAM,UAAU,GAAG,QAAQ,CAAC;IAChC,SAAS,EAAE,MAAM,CAAA;IACjB,OAAO,EAAE,IAAI,CAAA;CACd,CAAC,CAAA;AAEF,yEAAyE;AACzE,MAAM,MAAM,YAAY,GAAG,QAAQ,CAAC;IAClC,OAAO,EAAE,IAAI,CAAA;IACb,SAAS,EAAE,MAAM,CAAA;CAClB,CAAC,CAAA;AAEF,sDAAsD;AACtD,MAAM,MAAM,UAAU,CAAC,OAAO,EAAE,IAAI,SAAS,MAAM,IAAI,QAAQ,CAAC;IAC9D,KAAK,EAAE,KAAK,CAAA;IACZ,SAAS,EAAE,CACT,OAAO,EACH,MAAM,GACN,MAAM,GACN,WAAW,GACX,aAAa,GACb,eAAe,GACf,YAAY,GACZ,oBAAoB,GACpB,kBAAkB,GAClB,QAAQ,GACR,sBAAsB,GACtB,sBAAsB,GACtB,IAAI,KACL,OAAO,CAAA;IACZ,KAAK,EAAE,aAAa,CAAC,IAAI,CAAC,CAAA;IAC1B,YAAY,EAAE,CACZ,IAAI,EAAE,IAAI,EACV,OAAO,EAAE,QAAQ,CAAC;QAAE,QAAQ,EAAE,OAAO,CAAC;QAAC,UAAU,EAAE,OAAO,CAAA;KAAE,CAAC,KAC1D,UAAU,CAAA;IACf,cAAc,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,KAAK,OAAO,CAAA;IACvD,gBAAgB,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,KAAK,MAAM,CAAA;IACxD,gBAAgB,CAAC,EAAE,OAAO,CAAA;IAC1B,aAAa,EAAE,IAAI,CAAA;IACnB,eAAe,EAAE,MAAM,CAAA;IACvB,cAAc,EAAE,MAAM,CAAA;IACtB,iBAAiB,EAAE,MAAM,CAAA;IACzB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,KAAK,MAAM,CAAA;IACpD,cAAc,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,YAAY,GAAG,SAAS,CAAA;IAC/D,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,kBAAkB,CAAC,EAAE,MAAM,CAAA;IAC3B,MAAM,CAAC,EAAE,YAAY,CAAA;CACtB,CAAC,CAAA;AAEF,OAAO,EAAE,eAAe,EAAE,qBAAqB,EAAE,CAAA;AAIjD,sHAAsH;AACtH,eAAO,MAAM,IAAI,GAAI,OAAO,EAAE,IAAI,SAAS,MAAM,EAC/C,QAAQ,UAAU,CAAC,OAAO,EAAE,IAAI,CAAC,KAChC,IAkaF,CAAA"}

package/dist/ui/menu/index.js

@@ -1,10 +1,12 @@
-import { Array, Effect, Match as M, Option, Schema as S, String as Str, pipe, } from 'effect';
+import { Array, Effect, Match as M, Option, Predicate, Schema as S, String as Str, pipe, } from 'effect';
 import { OptionExt } from '../../effectExtensions';
 import { html } from '../../html';
 import { m } from '../../message';
 import { evo } from '../../struct';
 import * as Task from '../../task';
-import { findFirstEnabledIndex, keyToIndex, wrapIndex } from '../keyboard';
+import { groupContiguous } from '../group';
+import { findFirstEnabledIndex, isPrintableKey, keyToIndex } from '../keyboard';
+import { resolveTypeaheadMatch } from '../typeahead';
 import { anchorHooks } from './anchor';
 // MODEL
 /** Schema for the activation trigger — whether the user interacted via mouse or keyboard. */
@@ -92,6 +94,7 @@ export const ReleasedPointerOnItems = m('ReleasedPointerOnItems', {
 export const Message = S.Union(Opened, Closed, ClosedByTab, ActivatedItem, DeactivatedItem, SelectedItem, MovedPointerOverItem, RequestedItemClick, Searched, ClearedSearch, NoOp, AdvancedTransitionFrame, EndedTransition, DetectedButtonMovement, PressedPointerOnButton, ReleasedPointerOnItems);
 // INIT
 const SEARCH_DEBOUNCE_MILLISECONDS = 350;
+const LEFT_MOUSE_BUTTON = 0;
 const POINTER_HOLD_THRESHOLD_MILLISECONDS = 200;
 const POINTER_MOVEMENT_THRESHOLD_PIXELS = 5;
 /** Creates an initial menu model from a config. Defaults to closed with no active item. */
@@ -251,7 +254,7 @@ export const update = (model, message) => {
             const withPointerType = evo(model, {
                 maybeLastButtonPointerType: () => Option.some(pointerType),
             });
-            if (pointerType !== 'mouse' || button !== 0) {
+            if (pointerType !== 'mouse' || button !== LEFT_MOUSE_BUTTON) {
                 return [withPointerType, []];
             }
             if (model.isOpen) {
@@ -303,30 +306,8 @@ export const update = (model, message) => {
         NoOp: () => [model, []],
     }));
 };
-export const groupContiguous = (items, toKey) => {
-    const tagged = Array.map(items, (item, index) => ({
-        key: toKey(item, index),
-        item,
-    }));
-    return Array.chop(tagged, nonEmpty => {
-        const key = Array.headNonEmpty(nonEmpty).key;
-        const [matching, rest] = Array.span(nonEmpty, tagged => tagged.key === key);
-        return [{ key, items: Array.map(matching, ({ item }) => item) }, rest];
-    });
-};
+export { groupContiguous, resolveTypeaheadMatch };
 const itemId = (id, index) => `${id}-item-${index}`;
-/** Finds the first enabled item whose search text starts with the query, searching forward from the active item and wrapping around. On a fresh search, starts after the active item; on a refinement, includes the active item. */
-export const resolveTypeaheadMatch = (items, query, maybeActiveItemIndex, isDisabled, itemToSearchText, isRefinement) => {
-    const lowerQuery = Str.toLowerCase(query);
-    const offset = isRefinement ? 0 : 1;
-    const startIndex = Option.match(maybeActiveItemIndex, {
-        onNone: () => 0,
-        onSome: index => index + offset,
-    });
-    const isEnabledMatch = (index) => !isDisabled(index) &&
-        pipe(items, Array.get(index), Option.exists(item => pipe(itemToSearchText(item, index), Str.toLowerCase, Str.startsWith(lowerQuery))));
-    return pipe(items.length, Array.makeBy(step => wrapIndex(startIndex + step, items.length)), Array.findFirst(isEnabledMatch));
-};
 /** Renders a headless menu with typeahead search, keyboard navigation, and aria-activedescendant focus management. */
 export const view = (config) => {
     const { div, AriaActiveDescendant, AriaControls, AriaDisabled, AriaExpanded, AriaHasPopup, AriaLabelledBy, Class, DataAttribute, Id, OnBlur, OnClick, OnDestroy, OnInsert, OnKeyDownPreventDefault, OnKeyUpPreventDefault, OnPointerDown, OnPointerLeave, OnPointerMove, OnPointerUp, Role, Style, Tabindex, Type, keyed, } = html();
@@ -348,7 +329,7 @@ export const view = (config) => {
         DataAttribute('leave', ''),
         DataAttribute('transition', ''),
     ]), M.orElse(() => []));
-    const isDisabled = (index) => !!isItemDisabled &&
+    const isDisabled = (index) => Predicate.isNotUndefined(isItemDisabled) &&
         pipe(items, Array.get(index), Option.exists(item => isItemDisabled(item, index)));
     const firstEnabledIndex = findFirstEnabledIndex(items.length, 0, isDisabled)(0, 1);
     const lastEnabledIndex = findFirstEnabledIndex(items.length, 0, isDisabled)(items.length - 1, -1);
@@ -388,7 +369,7 @@ export const view = (config) => {
         : Option.map(maybeActiveItemIndex, index => toMessage(RequestedItemClick({ index })))), M.whenOr('ArrowDown', 'ArrowUp', 'Home', 'End', 'PageUp', 'PageDown', () => Option.some(toMessage(ActivatedItem({
         index: resolveActiveIndex(key),
         activationTrigger: 'Keyboard',
-    })))), M.when(key => key.length === 1, () => searchForKey(key)), M.orElse(() => Option.none()));
+    })))), M.when(isPrintableKey, () => searchForKey(key)), M.orElse(() => Option.none()));
     const handleItemsPointerUp = (screenX, screenY, pointerType, timeStamp) => OptionExt.when(pointerType === 'mouse', toMessage(ReleasedPointerOnItems({ screenX, screenY, timeStamp })));
     const buttonAttributes = [
         Id(`${id}-button`),
@@ -450,7 +431,6 @@ export const view = (config) => {
         return keyed('div')(itemId(id, index), [
             Id(itemId(id, index)),
             Role('menuitem'),
-            Tabindex(-1),
             Class(itemConfig.className),
             ...(isActiveItem ? [DataAttribute('active', '')] : []),
             ...(isDisabledItem