foldkit 0.16.0 → 0.18.0

package/dist/ui/disclosure/index.js

@@ -0,0 +1,90 @@
+import { Match as M, Option, Schema as S } from 'effect';
+import { html } from '../../html';
+import { ts } from '../../schema';
+import { evo } from '../../struct';
+import * as Task from '../../task';
+// MODEL
+/** Schema for the disclosure component's state, tracking its unique ID and open/closed status. */
+export const Model = S.Struct({
+    id: S.String,
+    isOpen: S.Boolean,
+});
+// MESSAGE
+/** Sent when the disclosure button is clicked. Toggles the open/closed state. */
+export const Toggled = ts('Toggled');
+/** Sent to explicitly close the disclosure, regardless of its current state. */
+export const Closed = ts('Closed');
+/** Placeholder message used when no action is needed, such as after a focus command completes. */
+export const NoOp = ts('NoOp');
+/** Union of all messages the disclosure component can produce. */
+export const Message = S.Union(Toggled, Closed, NoOp);
+/** Creates an initial disclosure model from a config. Defaults to closed. */
+export const init = (config) => ({
+    id: config.id,
+    isOpen: config.isOpen ?? false,
+});
+// UPDATE
+const buttonId = (id) => `${id}-button`;
+const panelId = (id) => `${id}-panel`;
+/** Processes a disclosure message and returns the next model and commands. */
+export const update = (model, message) => M.value(message).pipe(M.withReturnType(), M.tagsExhaustive({
+    Toggled: () => {
+        const maybeFocusCommand = Option.liftPredicate(Task.focus(`#${buttonId(model.id)}`, () => NoOp()), () => model.isOpen);
+        return [
+            evo(model, { isOpen: () => !model.isOpen }),
+            Option.toArray(maybeFocusCommand),
+        ];
+    },
+    Closed: () => {
+        const maybeFocusCommand = Option.liftPredicate(Task.focus(`#${buttonId(model.id)}`, () => NoOp()), () => model.isOpen);
+        return [
+            evo(model, { isOpen: () => false }),
+            Option.toArray(maybeFocusCommand),
+        ];
+    },
+    NoOp: () => [model, []],
+}));
+/** Renders a headless disclosure component with accessible ARIA attributes and keyboard support. */
+export const view = (config) => {
+    const { div, empty, AriaControls, AriaDisabled, AriaExpanded, Class, DataAttribute, Disabled, Hidden, Id, OnClick, OnKeyDown, Tabindex, Type, keyed, } = html();
+    const { model: { id, isOpen }, toMessage, buttonClassName, buttonContent, panelClassName, panelContent, isDisabled, persistPanel, buttonElement = 'button', panelElement = 'div', className, } = config;
+    const isNativeButton = buttonElement === 'button';
+    const handleKeyDown = (key) => 
+    /* eslint-disable-next-line @typescript-eslint/consistent-type-assertions */
+    M.value(key).pipe(M.whenOr('Enter', ' ', () => toMessage(Toggled())), M.orElse(() => toMessage(NoOp())));
+    const disabledAttributes = [
+        Disabled(true),
+        AriaDisabled(true),
+        DataAttribute('disabled', ''),
+    ];
+    const interactionAttributes = isDisabled
+        ? disabledAttributes
+        : [
+            OnClick(toMessage(Toggled())),
+            ...(!isNativeButton ? [OnKeyDown(handleKeyDown)] : []),
+        ];
+    const buttonAttributes = [
+        Class(buttonClassName),
+        Id(buttonId(id)),
+        AriaExpanded(isOpen),
+        AriaControls(panelId(id)),
+        ...(isNativeButton ? [Type('button')] : [Tabindex(0)]),
+        ...(isOpen ? [DataAttribute('open', '')] : []),
+        ...interactionAttributes,
+    ];
+    const panelAttributes = [
+        Class(panelClassName),
+        Id(panelId(id)),
+        ...(isOpen ? [DataAttribute('open', '')] : []),
+    ];
+    const persistedPanel = keyed(panelElement)(panelId(id), [...panelAttributes, Hidden(!isOpen)], [panelContent]);
+    const activePanel = isOpen
+        ? keyed(panelElement)(panelId(id), panelAttributes, [panelContent])
+        : empty;
+    const panel = persistPanel ? persistedPanel : activePanel;
+    const wrapperAttributes = className ? [Class(className)] : [];
+    return div(wrapperAttributes, [
+        keyed(buttonElement)(buttonId(id), buttonAttributes, [buttonContent]),
+        panel,
+    ]);
+};

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

@@ -0,0 +1,3 @@
+export { init, update, view, Model, Message } from './index';
+export type { Toggled, Closed, NoOp, InitConfig, ViewConfig } from './index';
+//# sourceMappingURL=public.d.ts.map

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

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

package/dist/ui/disclosure/public.js

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

package/dist/ui/index.d.ts

@@ -1,2 +1,5 @@
-export * as Tabs from './tabs';
+export * as Dialog from './dialog/public';
+export * as Disclosure from './disclosure/public';
+export * as Menu from './menu/public';
+export * as Tabs from './tabs/public';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/ui/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,IAAI,MAAM,QAAQ,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/ui/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,MAAM,iBAAiB,CAAA;AACzC,OAAO,KAAK,UAAU,MAAM,qBAAqB,CAAA;AACjD,OAAO,KAAK,IAAI,MAAM,eAAe,CAAA;AACrC,OAAO,KAAK,IAAI,MAAM,eAAe,CAAA"}

package/dist/ui/index.js

@@ -1 +1,4 @@
-export * as Tabs from './tabs';
+export * as Dialog from './dialog/public';
+export * as Disclosure from './disclosure/public';
+export * as Menu from './menu/public';
+export * as Tabs from './tabs/public';

package/dist/ui/keyboard.d.ts

@@ -0,0 +1,4 @@
+export declare const wrapIndex: (index: number, length: number) => number;
+export declare const findFirstEnabledIndex: (itemCount: number, focusedIndex: number, isDisabled: (index: number) => boolean) => (startIndex: number, direction: 1 | -1) => number;
+export declare const keyToIndex: (nextKey: string, previousKey: string, itemCount: number, focusedIndex: number, isDisabled: (index: number) => boolean) => ((key: string) => number);
+//# sourceMappingURL=keyboard.d.ts.map

package/dist/ui/keyboard.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"keyboard.d.ts","sourceRoot":"","sources":["../../src/ui/keyboard.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,SAAS,GAAI,OAAO,MAAM,EAAE,QAAQ,MAAM,KAAG,MACpB,CAAA;AAEtC,eAAO,MAAM,qBAAqB,GAE9B,WAAW,MAAM,EACjB,cAAc,MAAM,EACpB,YAAY,CAAC,KAAK,EAAE,MAAM,KAAK,OAAO,MAEvC,YAAY,MAAM,EAAE,WAAW,CAAC,GAAG,CAAC,CAAC,KAAG,MAQtC,CAAA;AAEL,eAAO,MAAM,UAAU,GACrB,SAAS,MAAM,EACf,aAAa,MAAM,EACnB,WAAW,MAAM,EACjB,cAAc,MAAM,EACpB,YAAY,CAAC,KAAK,EAAE,MAAM,KAAK,OAAO,KACrC,CAAC,CAAC,GAAG,EAAE,MAAM,KAAK,MAAM,CAW1B,CAAA"}

package/dist/ui/keyboard.js

@@ -0,0 +1,7 @@
+import { Array, Match as M, Option, Predicate, pipe } from 'effect';
+export const wrapIndex = (index, length) => ((index % length) + length) % length;
+export const findFirstEnabledIndex = (itemCount, focusedIndex, isDisabled) => (startIndex, direction) => pipe(itemCount, Array.makeBy((step) => wrapIndex(startIndex + step * direction, itemCount)), Array.findFirst(Predicate.not(isDisabled)), Option.getOrElse(() => focusedIndex));
+export const keyToIndex = (nextKey, previousKey, itemCount, focusedIndex, isDisabled) => {
+    const find = findFirstEnabledIndex(itemCount, focusedIndex, isDisabled);
+    return (key) => M.value(key).pipe(M.when(nextKey, () => find(focusedIndex + 1, 1)), M.when(previousKey, () => find(focusedIndex - 1, -1)), M.whenOr('Home', 'PageUp', () => find(0, 1)), M.whenOr('End', 'PageDown', () => find(itemCount - 1, -1)), M.orElse(() => focusedIndex));
+};

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

@@ -0,0 +1,136 @@
+import { Option, Schema as S } from 'effect';
+import type { Html } from '../../html';
+import type { Command } from '../../runtime/runtime';
+/** Schema for the activation trigger — whether the user interacted via mouse or keyboard. */
+export declare const ActivationTrigger: S.Literal<["Pointer", "Keyboard"]>;
+export type ActivationTrigger = typeof ActivationTrigger.Type;
+/** Schema for the menu component's state, tracking open/closed status, active item, activation trigger, and typeahead search. */
+export declare const Model: S.Struct<{
+    id: typeof S.String;
+    isOpen: typeof S.Boolean;
+    maybeActiveItemIndex: S.OptionFromSelf<typeof S.Number>;
+    activationTrigger: S.Literal<["Pointer", "Keyboard"]>;
+    searchQuery: typeof S.String;
+    searchVersion: typeof S.Number;
+    maybeLastPointerPosition: S.OptionFromSelf<S.Struct<{
+        screenX: typeof S.Number;
+        screenY: typeof S.Number;
+    }>>;
+}>;
+export type Model = typeof Model.Type;
+/** Sent when the menu opens via button click or keyboard. Contains an optional initial active item index — None for pointer, Some for keyboard. */
+export declare const Opened: import("../../schema").CallableTaggedStruct<"Opened", {
+    maybeActiveItemIndex: S.OptionFromSelf<typeof S.Number>;
+}>;
+/** Sent when the menu closes via Escape key or backdrop click. */
+export declare const Closed: import("../../schema").CallableTaggedStruct<"Closed", {}>;
+/** Sent when focus leaves the menu items container via Tab key. */
+export declare const ClosedByTab: import("../../schema").CallableTaggedStruct<"ClosedByTab", {}>;
+/** Sent when an item is highlighted via arrow keys or mouse hover. Includes activation trigger. */
+export declare const ItemActivated: import("../../schema").CallableTaggedStruct<"ItemActivated", {
+    index: typeof S.Number;
+    activationTrigger: S.Literal<["Pointer", "Keyboard"]>;
+}>;
+/** Sent when the mouse leaves an enabled item. */
+export declare const ItemDeactivated: import("../../schema").CallableTaggedStruct<"ItemDeactivated", {}>;
+/** Sent when an item is selected via Enter, Space, or click. */
+export declare const ItemSelected: import("../../schema").CallableTaggedStruct<"ItemSelected", {
+    index: typeof S.Number;
+}>;
+/** Sent when a printable character is typed for typeahead search. */
+export declare const Searched: import("../../schema").CallableTaggedStruct<"Searched", {
+    key: typeof S.String;
+    maybeTargetIndex: S.OptionFromSelf<typeof S.Number>;
+}>;
+/** Sent after the search debounce period to clear the accumulated query. */
+export declare const SearchCleared: import("../../schema").CallableTaggedStruct<"SearchCleared", {
+    version: typeof S.Number;
+}>;
+/** Sent when the pointer moves over a menu item, carrying screen coordinates for tracked-pointer comparison. */
+export declare const PointerMovedOverItem: import("../../schema").CallableTaggedStruct<"PointerMovedOverItem", {
+    index: typeof S.Number;
+    screenX: typeof S.Number;
+    screenY: typeof S.Number;
+}>;
+/** Placeholder message used when no action is needed. */
+export declare const NoOp: import("../../schema").CallableTaggedStruct<"NoOp", {}>;
+/** Union of all messages the menu component can produce. */
+export declare const Message: S.Union<[import("../../schema").CallableTaggedStruct<"Opened", {
+    maybeActiveItemIndex: S.OptionFromSelf<typeof S.Number>;
+}>, import("../../schema").CallableTaggedStruct<"Closed", {}>, import("../../schema").CallableTaggedStruct<"ClosedByTab", {}>, import("../../schema").CallableTaggedStruct<"ItemActivated", {
+    index: typeof S.Number;
+    activationTrigger: S.Literal<["Pointer", "Keyboard"]>;
+}>, import("../../schema").CallableTaggedStruct<"ItemDeactivated", {}>, import("../../schema").CallableTaggedStruct<"ItemSelected", {
+    index: typeof S.Number;
+}>, import("../../schema").CallableTaggedStruct<"PointerMovedOverItem", {
+    index: typeof S.Number;
+    screenX: typeof S.Number;
+    screenY: typeof S.Number;
+}>, import("../../schema").CallableTaggedStruct<"Searched", {
+    key: typeof S.String;
+    maybeTargetIndex: S.OptionFromSelf<typeof S.Number>;
+}>, import("../../schema").CallableTaggedStruct<"SearchCleared", {
+    version: typeof S.Number;
+}>, import("../../schema").CallableTaggedStruct<"NoOp", {}>]>;
+export type Opened = typeof Opened.Type;
+export type Closed = typeof Closed.Type;
+export type ClosedByTab = typeof ClosedByTab.Type;
+export type ItemActivated = typeof ItemActivated.Type;
+export type ItemDeactivated = typeof ItemDeactivated.Type;
+export type ItemSelected = typeof ItemSelected.Type;
+export type PointerMovedOverItem = typeof PointerMovedOverItem.Type;
+export type Searched = typeof Searched.Type;
+export type SearchCleared = typeof SearchCleared.Type;
+export type NoOp = typeof NoOp.Type;
+export type Message = typeof Message.Type;
+/** Configuration for creating a menu model with `init`. */
+export type InitConfig = Readonly<{
+    id: string;
+}>;
+/** Creates an initial menu model from a config. Defaults to closed with no active item. */
+export declare const init: (config: InitConfig) => Model;
+/** Processes a menu message and returns the next model and commands. */
+export declare const update: (model: Model, message: Message) => [Model, ReadonlyArray<Command<Message>>];
+/** Configuration for an individual menu item's appearance. */
+export type ItemConfig = Readonly<{
+    className: string;
+    content: Html;
+}>;
+/** Configuration for a group heading rendered above a group of items. */
+export type GroupHeading = Readonly<{
+    content: Html;
+    className: string;
+}>;
+/** Configuration for rendering a menu with `view`. */
+export type ViewConfig<Message, Item extends string> = Readonly<{
+    model: Model;
+    toMessage: (message: Opened | Closed | ClosedByTab | ItemActivated | ItemDeactivated | ItemSelected | PointerMovedOverItem | Searched) => Message;
+    items: ReadonlyArray<Item>;
+    itemToConfig: (item: Item, context: Readonly<{
+        isActive: boolean;
+        isDisabled: boolean;
+    }>) => ItemConfig;
+    isItemDisabled?: (item: Item, index: number) => boolean;
+    itemToSearchText?: (item: Item, index: number) => string;
+    isButtonDisabled?: boolean;
+    buttonContent: Html;
+    buttonClassName: string;
+    itemsClassName: string;
+    backdropClassName: string;
+    className?: string;
+    itemGroupKey?: (item: Item, index: number) => string;
+    groupToHeading?: (groupKey: string) => GroupHeading | undefined;
+    groupClassName?: string;
+    separatorClassName?: string;
+}>;
+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>;
+/** 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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/ui/menu/index.ts"],"names":[],"mappings":"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"}

package/dist/ui/menu/index.js

@@ -0,0 +1,297 @@
+import { Array, Match as M, Option, Schema as S, String as Str, pipe, } from 'effect';
+import { html } from '../../html';
+import { ts } from '../../schema';
+import { evo } from '../../struct';
+import * as Task from '../../task';
+import { findFirstEnabledIndex, keyToIndex, wrapIndex } from '../keyboard';
+// MODEL
+/** Schema for the activation trigger — whether the user interacted via mouse or keyboard. */
+export const ActivationTrigger = S.Literal('Pointer', 'Keyboard');
+/** Schema for the menu component's state, tracking open/closed status, active item, activation trigger, and typeahead search. */
+export const Model = S.Struct({
+    id: S.String,
+    isOpen: S.Boolean,
+    maybeActiveItemIndex: S.OptionFromSelf(S.Number),
+    activationTrigger: ActivationTrigger,
+    searchQuery: S.String,
+    searchVersion: S.Number,
+    maybeLastPointerPosition: S.OptionFromSelf(S.Struct({ screenX: S.Number, screenY: S.Number })),
+});
+// MESSAGE
+/** Sent when the menu opens via button click or keyboard. Contains an optional initial active item index — None for pointer, Some for keyboard. */
+export const Opened = ts('Opened', {
+    maybeActiveItemIndex: S.OptionFromSelf(S.Number),
+});
+/** Sent when the menu closes via Escape key or backdrop click. */
+export const Closed = ts('Closed');
+/** Sent when focus leaves the menu items container via Tab key. */
+export const ClosedByTab = ts('ClosedByTab');
+/** Sent when an item is highlighted via arrow keys or mouse hover. Includes activation trigger. */
+export const ItemActivated = ts('ItemActivated', {
+    index: S.Number,
+    activationTrigger: ActivationTrigger,
+});
+/** Sent when the mouse leaves an enabled item. */
+export const ItemDeactivated = ts('ItemDeactivated');
+/** Sent when an item is selected via Enter, Space, or click. */
+export const ItemSelected = ts('ItemSelected', { index: S.Number });
+/** Sent when a printable character is typed for typeahead search. */
+export const Searched = ts('Searched', {
+    key: S.String,
+    maybeTargetIndex: S.OptionFromSelf(S.Number),
+});
+/** Sent after the search debounce period to clear the accumulated query. */
+export const SearchCleared = ts('SearchCleared', { version: S.Number });
+/** Sent when the pointer moves over a menu item, carrying screen coordinates for tracked-pointer comparison. */
+export const PointerMovedOverItem = ts('PointerMovedOverItem', {
+    index: S.Number,
+    screenX: S.Number,
+    screenY: S.Number,
+});
+/** Placeholder message used when no action is needed. */
+export const NoOp = ts('NoOp');
+/** Union of all messages the menu component can produce. */
+export const Message = S.Union(Opened, Closed, ClosedByTab, ItemActivated, ItemDeactivated, ItemSelected, PointerMovedOverItem, Searched, SearchCleared, NoOp);
+// INIT
+const SEARCH_DEBOUNCE_MILLISECONDS = 350;
+/** Creates an initial menu model from a config. Defaults to closed with no active item. */
+export const init = (config) => ({
+    id: config.id,
+    isOpen: false,
+    maybeActiveItemIndex: Option.none(),
+    activationTrigger: 'Keyboard',
+    searchQuery: '',
+    searchVersion: 0,
+    maybeLastPointerPosition: Option.none(),
+});
+// UPDATE
+const closedModel = (model) => evo(model, {
+    isOpen: () => false,
+    maybeActiveItemIndex: () => Option.none(),
+    activationTrigger: () => 'Keyboard',
+    searchQuery: () => '',
+    searchVersion: () => 0,
+    maybeLastPointerPosition: () => Option.none(),
+});
+const buttonSelector = (id) => `#${id}-button`;
+const itemsSelector = (id) => `#${id}-items`;
+const itemSelector = (id, index) => `#${id}-item-${index}`;
+/** Processes a menu message and returns the next model and commands. */
+export const update = (model, message) => M.value(message).pipe(M.withReturnType(), M.tagsExhaustive({
+    Opened: ({ maybeActiveItemIndex }) => [
+        evo(model, {
+            isOpen: () => true,
+            maybeActiveItemIndex: () => maybeActiveItemIndex,
+            activationTrigger: () => Option.match(maybeActiveItemIndex, {
+                onNone: () => 'Pointer',
+                onSome: () => 'Keyboard',
+            }),
+            searchQuery: () => '',
+            searchVersion: () => 0,
+            maybeLastPointerPosition: () => Option.none(),
+        }),
+        [Task.focus(itemsSelector(model.id), () => NoOp())],
+    ],
+    Closed: () => [
+        closedModel(model),
+        [Task.focus(buttonSelector(model.id), () => NoOp())],
+    ],
+    ClosedByTab: () => [closedModel(model), []],
+    ItemActivated: ({ index, activationTrigger }) => [
+        evo(model, {
+            maybeActiveItemIndex: () => Option.some(index),
+            activationTrigger: () => activationTrigger,
+        }),
+        activationTrigger === 'Keyboard'
+            ? [Task.scrollIntoView(itemSelector(model.id, index), () => NoOp())]
+            : [],
+    ],
+    PointerMovedOverItem: ({ 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 }),
+            }),
+            [],
+        ];
+    },
+    ItemDeactivated: () => model.activationTrigger === 'Pointer'
+        ? [evo(model, { maybeActiveItemIndex: () => Option.none() }), []]
+        : [model, []],
+    ItemSelected: () => [
+        closedModel(model),
+        [Task.focus(buttonSelector(model.id), () => 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, () => SearchCleared({ version: nextSearchVersion })),
+            ],
+        ];
+    },
+    SearchCleared: ({ version }) => {
+        if (version !== model.searchVersion) {
+            return [model, []];
+        }
+        return [evo(model, { searchQuery: () => '' }), []];
+    },
+    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];
+    });
+};
+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, OnKeyDownPreventDefault, OnMouseLeave, OnPointerMove, Role, Tabindex, Type, keyed, } = html();
+    const { model: { id, isOpen, maybeActiveItemIndex, searchQuery }, toMessage, items, itemToConfig, isItemDisabled, itemToSearchText = (item) => item, isButtonDisabled, buttonContent, buttonClassName, itemsClassName, backdropClassName, className, itemGroupKey, groupToHeading, groupClassName, separatorClassName, } = config;
+    const isDisabled = (index) => !!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);
+    const handleButtonKeyDown = (key) => M.value(key).pipe(M.whenOr('Enter', ' ', 'ArrowDown', () => Option.some(toMessage(Opened({
+        maybeActiveItemIndex: Option.some(firstEnabledIndex),
+    })))), M.when('ArrowUp', () => Option.some(toMessage(Opened({
+        maybeActiveItemIndex: Option.some(lastEnabledIndex),
+    })))), M.orElse(() => Option.none()));
+    const handleButtonClick = () => isOpen
+        ? toMessage(Closed())
+        : toMessage(Opened({ maybeActiveItemIndex: Option.none() }));
+    const resolveActiveIndex = keyToIndex('ArrowDown', 'ArrowUp', items.length, Option.getOrElse(maybeActiveItemIndex, () => 0), isDisabled);
+    const handleItemsKeyDown = (key) => M.value(key).pipe(M.when('Escape', () => Option.some(toMessage(Closed()))), M.whenOr('Enter', ' ', () => Option.map(maybeActiveItemIndex, (index) => toMessage(ItemSelected({ index })))), M.whenOr('ArrowDown', 'ArrowUp', 'Home', 'End', 'PageUp', 'PageDown', () => Option.some(toMessage(ItemActivated({
+        index: resolveActiveIndex(key),
+        activationTrigger: 'Keyboard',
+    })))), M.when((key) => key.length === 1, () => {
+        const nextQuery = searchQuery + key;
+        const maybeTargetIndex = resolveTypeaheadMatch(items, nextQuery, maybeActiveItemIndex, isDisabled, itemToSearchText, Str.isNonEmpty(searchQuery));
+        return Option.some(toMessage(Searched({ key, maybeTargetIndex })));
+    }), M.orElse(() => Option.none()));
+    const buttonAttributes = [
+        Id(`${id}-button`),
+        Type('button'),
+        Class(buttonClassName),
+        AriaHasPopup('menu'),
+        AriaExpanded(isOpen),
+        AriaControls(`${id}-items`),
+        ...(isButtonDisabled
+            ? [AriaDisabled(true), DataAttribute('disabled', '')]
+            : [
+                OnKeyDownPreventDefault(handleButtonKeyDown),
+                OnClick(handleButtonClick()),
+            ]),
+        ...(isOpen ? [DataAttribute('open', '')] : []),
+    ];
+    const maybeActiveDescendant = Option.match(maybeActiveItemIndex, {
+        onNone: () => [],
+        onSome: (index) => [AriaActiveDescendant(itemId(id, index))],
+    });
+    const itemsContainerAttributes = [
+        Id(`${id}-items`),
+        Role('menu'),
+        AriaLabelledBy(`${id}-button`),
+        ...maybeActiveDescendant,
+        Tabindex(0),
+        Class(itemsClassName),
+        OnKeyDownPreventDefault(handleItemsKeyDown),
+        OnBlur(toMessage(ClosedByTab())),
+    ];
+    const menuItems = Array.map(items, (item, index) => {
+        const isActiveItem = Option.exists(maybeActiveItemIndex, (activeIndex) => activeIndex === index);
+        const isDisabledItem = isDisabled(index);
+        const itemConfig = itemToConfig(item, {
+            isActive: isActiveItem,
+            isDisabled: isDisabledItem,
+        });
+        return keyed('div')(itemId(id, index), [
+            Id(itemId(id, index)),
+            Role('menuitem'),
+            Tabindex(-1),
+            Class(itemConfig.className),
+            ...(isActiveItem ? [DataAttribute('active', '')] : []),
+            ...(isDisabledItem
+                ? [AriaDisabled(true), DataAttribute('disabled', '')]
+                : [
+                    OnClick(toMessage(ItemSelected({ index }))),
+                    OnPointerMove((screenX, screenY) => toMessage(PointerMovedOverItem({ index, screenX, screenY }))),
+                    OnMouseLeave(toMessage(ItemDeactivated())),
+                ]),
+        ], [itemConfig.content]);
+    });
+    const renderGroupedItems = () => {
+        if (!itemGroupKey) {
+            return menuItems;
+        }
+        const segments = groupContiguous(menuItems, (_, 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 && 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), OnClick(toMessage(Closed()))], []);
+    const renderedItems = renderGroupedItems();
+    const openContent = [
+        backdrop,
+        keyed('div')(`${id}-items-container`, itemsContainerAttributes, renderedItems),
+    ];
+    const wrapperAttributes = [
+        ...(className ? [Class(className)] : []),
+        ...(isOpen ? [DataAttribute('open', '')] : []),
+    ];
+    return div(wrapperAttributes, [
+        keyed('button')(`${id}-button`, buttonAttributes, [buttonContent]),
+        ...(isOpen ? openContent : []),
+    ]);
+};

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

@@ -0,0 +1,3 @@
+export { init, update, view, Model, Message } from './index';
+export type { ActivationTrigger, Opened, Closed, ClosedByTab, ItemActivated, ItemDeactivated, ItemSelected, PointerMovedOverItem, Searched, SearchCleared, NoOp, InitConfig, ViewConfig, ItemConfig, GroupHeading, } from './index';
+//# sourceMappingURL=public.d.ts.map

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

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

package/dist/ui/menu/public.js

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