foldkit 0.100.1 → 0.102.0

package/dist/ui/menu/index.js

@@ -2,7 +2,7 @@ import { Array, Effect, Equal, Match as M, Option, Predicate, Schema as S, Strin
 import * as Command from '../../command/index.js';
 import * as Dom from '../../dom/index.js';
 import { OptionExt } from '../../effectExtensions/index.js';
-import { createLazy, html, } from '../../html/index.js';
+import { defineView, html, } from '../../html/index.js';
 import { m } from '../../message/index.js';
 import * as Mount from '../../mount/index.js';
 import { evo } from '../../struct/index.js';
@@ -16,7 +16,7 @@ import { groupContiguous } from '../group.js';
 import { findFirstEnabledIndex, isPrintableKey, keyToIndex, } from '../keyboard.js';
 import { resolveTypeaheadMatch } from '../typeahead.js';
 // MODEL
-/** Schema for the activation trigger — whether the user interacted via mouse or keyboard. */
+/** Schema for the activation trigger: whether the user interacted via mouse or keyboard. */
 export const ActivationTrigger = S.Literals(['Pointer', 'Keyboard']);
 const PointerOrigin = S.Struct({
     screenX: S.Number,
@@ -39,7 +39,7 @@ export const Model = S.Struct({
     maybePointerOrigin: S.Option(PointerOrigin),
 });
 // MESSAGE
-/** Sent when the menu opens via button click or keyboard. Contains an optional initial active item index — None for pointer, Some for keyboard. */
+/** 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 = m('Opened', {
     maybeActiveItemIndex: S.Option(S.Number),
 });
@@ -55,7 +55,10 @@ export const ActivatedItem = m('ActivatedItem', {
 /** Sent when the mouse leaves an enabled item. */
 export const DeactivatedItem = m('DeactivatedItem');
 /** Sent when an item is selected via Enter, Space, or click. */
-export const SelectedItem = m('SelectedItem', { index: S.Number });
+export const SelectedItem = m('SelectedItem', {
+    index: S.Number,
+    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,
@@ -82,15 +85,13 @@ export const CompletedLockScroll = m('CompletedLockScroll');
 /** Sent when the scroll unlock command completes. */
 export const CompletedUnlockScroll = m('CompletedUnlockScroll');
 /** Sent when the inert-others command completes. */
-export const CompletedSetupInert = m('CompletedSetupInert');
+export const CompletedInertOthers = m('CompletedInertOthers');
 /** Sent when the restore-inert command completes. */
-export const CompletedTeardownInert = m('CompletedTeardownInert');
+export const CompletedRestoreInert = m('CompletedRestoreInert');
 /** Sent when the scroll-into-view command completes after keyboard activation. */
 export const CompletedScrollIntoView = m('CompletedScrollIntoView');
 /** Sent when the programmatic click command completes. */
 export const CompletedClickItem = m('CompletedClickItem');
-/** Sent when the advance-focus command completes. */
-export const CompletedAdvanceFocus = m('CompletedAdvanceFocus');
 /** Sent when a mouse click on the button is ignored because pointer-down already handled the toggle. */
 export const IgnoredMouseClick = m('IgnoredMouseClick');
 /** Sent when a Space key-up is captured to prevent page scrolling. */
@@ -133,11 +134,10 @@ export const Message = S.Union([
     CompletedFocusButton,
     CompletedLockScroll,
     CompletedUnlockScroll,
-    CompletedSetupInert,
-    CompletedTeardownInert,
+    CompletedInertOthers,
+    CompletedRestoreInert,
     CompletedScrollIntoView,
     CompletedClickItem,
-    CompletedAdvanceFocus,
     IgnoredMouseClick,
     SuppressedSpaceScroll,
     CompletedAnchorMenu,
@@ -146,6 +146,14 @@ export const Message = S.Union([
     PressedPointerOnButton,
     ReleasedPointerOnItems,
 ]);
+// OUT MESSAGE
+/** Sent to the parent when a menu item is selected. Carries both the selected value (from the `viewInputs.items` array supplied at view time) and its index. The menu has already closed when this fires; the parent does not need to dispatch `Ui.Menu.close`. */
+export const Selected = m('Selected', {
+    value: S.String,
+    index: S.Number,
+});
+/** Union of out-messages the menu component can produce. Surfaced as the third element of `update`'s return tuple and pattern-matched by the parent. */
+export const OutMessage = S.Union([Selected]);
 // INIT
 const SEARCH_DEBOUNCE_MILLISECONDS = 350;
 const LEFT_MOUSE_BUTTON = 0;
@@ -185,9 +193,9 @@ export const LockScroll = Command.define('LockScroll', CompletedLockScroll)(Dom.
 /** Re-enables page scrolling after the menu closes. */
 export const UnlockScroll = Command.define('UnlockScroll', CompletedUnlockScroll)(Dom.unlockScroll.pipe(Effect.as(CompletedUnlockScroll())));
 /** Marks all elements outside the menu as inert for modal behavior. */
-export const InertOthers = Command.define('InertOthers', { id: S.String }, CompletedSetupInert)(({ id }) => Dom.inertOthers(id, [buttonSelector(id), itemsSelector(id)]).pipe(Effect.as(CompletedSetupInert())));
+export const InertOthers = Command.define('InertOthers', { id: S.String }, CompletedInertOthers)(({ id }) => Dom.inertOthers(id, [buttonSelector(id), itemsSelector(id)]).pipe(Effect.as(CompletedInertOthers())));
 /** Removes the inert attribute from elements outside the menu. */
-export const RestoreInert = Command.define('RestoreInert', { id: S.String }, CompletedTeardownInert)(({ id }) => Dom.restoreInert(id).pipe(Effect.as(CompletedTeardownInert())));
+export const RestoreInert = Command.define('RestoreInert', { id: S.String }, CompletedRestoreInert)(({ id }) => Dom.restoreInert(id).pipe(Effect.as(CompletedRestoreInert())));
 /** Moves focus to the menu items container after opening. */
 export const FocusItems = Command.define('FocusItems', { id: S.String }, CompletedFocusItems)(({ id }) => Dom.focus(itemsSelector(id)).pipe(Effect.ignore, Effect.as(CompletedFocusItems())));
 /** Moves focus back to the menu button after closing. */
@@ -202,7 +210,7 @@ export const DelayClearSearch = Command.define('DelayClearSearch', { version: S.
 export const DetectMovementOrAnimationEnd = Command.define('DetectMovementOrAnimationEnd', { id: S.String }, GotAnimationMessage)(({ id }) => Effect.raceFirst(Dom.detectElementMovement(buttonSelector(id)).pipe(Effect.as(GotAnimationMessage({ message: AnimationEndedAnimation() }))), Dom.waitForAnimationSettled(itemsSelector(id)).pipe(Effect.as(GotAnimationMessage({ message: AnimationEndedAnimation() })))));
 const delegateToAnimation = (model, animationMessage) => {
     const [nextAnimation, animationCommands, maybeOutMessage] = animationUpdate(model.animation, animationMessage);
-    const mappedCommands = animationCommands.map(Command.mapEffect(Effect.map(message => GotAnimationMessage({ message }))));
+    const mappedCommands = Command.mapMessages(animationCommands, message => GotAnimationMessage({ message }));
     const additionalCommands = Option.match(maybeOutMessage, {
         onNone: () => [],
         onSome: M.type().pipe(M.tagsExhaustive({
@@ -215,6 +223,7 @@ const delegateToAnimation = (model, animationMessage) => {
     return [
         evo(model, { animation: () => nextAnimation }),
         [...mappedCommands, ...additionalCommands],
+        Option.none(),
     ];
 };
 /** Processes a menu message and returns the next model and commands. */
@@ -241,19 +250,20 @@ export const update = (model, message) => {
             return [
                 evo(nextModel, { isOpen: () => true }),
                 [...openCommands, ...animationCommands],
+                Option.none(),
             ];
         }
-        return [evo(baseModel, { isOpen: () => true }), openCommands];
+        return [evo(baseModel, { isOpen: () => true }), openCommands, Option.none()];
     };
-    const closeMenu = (baseModel, commands) => {
+    const closeMenu = (baseModel, commands, maybeOutMessage = Option.none()) => {
         const closed = closedModel(baseModel);
         if (model.isAnimated) {
             const [nextModel, animationCommands] = delegateToAnimation(closed, AnimationHid());
-            return [nextModel, [...commands, ...animationCommands]];
+            return [nextModel, [...commands, ...animationCommands], maybeOutMessage];
         }
-        return [closed, commands];
+        return [closed, commands, maybeOutMessage];
     };
-    return M.value(message).pipe(withUpdateReturn, M.tagsExhaustive({
+    return M.value(message).pipe(withUpdateReturn, M.tag('CompletedFocusItems', 'CompletedFocusButton', 'CompletedLockScroll', 'CompletedUnlockScroll', 'CompletedInertOthers', 'CompletedRestoreInert', 'CompletedScrollIntoView', 'CompletedClickItem', 'SuppressedSpaceScroll', 'CompletedAnchorMenu', 'CompletedPortalMenuBackdrop', () => [model, [], Option.none()]), M.tagsExhaustive({
         Opened: ({ maybeActiveItemIndex }) => openMenu(evo(model, {
             maybeActiveItemIndex: () => maybeActiveItemIndex,
             activationTrigger: () => Option.match(maybeActiveItemIndex, {
@@ -267,7 +277,7 @@ export const update = (model, message) => {
         Closed: () => closeMenu(model, closeWithFocusCommands),
         BlurredItems: () => {
             if (Option.exists(model.maybeLastButtonPointerType, Equal.equals('mouse'))) {
-                return [model, []];
+                return [model, [], Option.none()];
             }
             return closeMenu(model, closeWithoutFocusCommands);
         },
@@ -279,11 +289,12 @@ export const update = (model, message) => {
             activationTrigger === 'Keyboard'
                 ? [ScrollIntoView({ id: model.id, index })]
                 : [],
+            Option.none(),
         ],
         MovedPointerOverItem: ({ index, screenX, screenY }) => {
             const isSamePosition = Option.exists(model.maybeLastPointerPosition, position => position.screenX === screenX && position.screenY === screenY);
             if (isSamePosition) {
-                return [model, []];
+                return [model, [], Option.none()];
             }
             return [
                 evo(model, {
@@ -292,15 +303,21 @@ export const update = (model, message) => {
                     maybeLastPointerPosition: () => Option.some({ screenX, screenY }),
                 }),
                 [],
+                Option.none(),
             ];
         },
         DeactivatedItem: () => model.activationTrigger === 'Pointer'
-            ? [evo(model, { maybeActiveItemIndex: () => Option.none() }), []]
-            : [model, []],
-        SelectedItem: () => closeMenu(model, closeWithFocusCommands),
+            ? [
+                evo(model, { maybeActiveItemIndex: () => Option.none() }),
+                [],
+                Option.none(),
+            ]
+            : [model, [], Option.none()],
+        SelectedItem: ({ index, item }) => closeMenu(model, closeWithFocusCommands, Option.some(Selected({ value: item, index }))),
         RequestedItemClick: ({ index }) => [
             model,
             [ClickItem({ id: model.id, index })],
+            Option.none(),
         ],
         Searched: ({ key, maybeTargetIndex }) => {
             const nextSearchQuery = model.searchQuery + key;
@@ -312,13 +329,14 @@ export const update = (model, message) => {
                     maybeActiveItemIndex: () => Option.orElse(maybeTargetIndex, () => model.maybeActiveItemIndex),
                 }),
                 [DelayClearSearch({ version: nextSearchVersion })],
+                Option.none(),
             ];
         },
         ClearedSearch: ({ version }) => {
             if (version !== model.searchVersion) {
-                return [model, []];
+                return [model, [], Option.none()];
             }
-            return [evo(model, { searchQuery: () => '' }), []];
+            return [evo(model, { searchQuery: () => '' }), [], Option.none()];
         },
         GotAnimationMessage: ({ message: animationMessage }) => delegateToAnimation(model, animationMessage),
         PressedPointerOnButton: ({ pointerType, button, screenX, screenY, timeStamp, }) => {
@@ -326,7 +344,7 @@ export const update = (model, message) => {
                 maybeLastButtonPointerType: () => Option.some(pointerType),
             });
             if (pointerType !== 'mouse' || button !== LEFT_MOUSE_BUTTON) {
-                return [withPointerType, []];
+                return [withPointerType, [], Option.none()];
             }
             if (model.isOpen) {
                 const [closed, commands] = closeMenu(withPointerType, closeWithFocusCommands);
@@ -335,6 +353,7 @@ export const update = (model, message) => {
                         maybeLastButtonPointerType: () => Option.some(pointerType),
                     }),
                     commands,
+                    Option.none(),
                 ];
             }
             return openMenu(evo(withPointerType, {
@@ -358,7 +377,7 @@ export const update = (model, message) => {
                 isMovementBelowThreshold ||
                 isHoldTimeBelowThreshold ||
                 hasNoActiveItem) {
-                return [model, []];
+                return [model, [], Option.none()];
             }
             return [
                 model,
@@ -368,24 +387,14 @@ export const update = (model, message) => {
                         index: model.maybeActiveItemIndex.value,
                     }),
                 ],
+                Option.none(),
             ];
         },
-        CompletedFocusItems: () => [model, []],
-        CompletedFocusButton: () => [model, []],
-        CompletedLockScroll: () => [model, []],
-        CompletedUnlockScroll: () => [model, []],
-        CompletedSetupInert: () => [model, []],
-        CompletedTeardownInert: () => [model, []],
-        CompletedScrollIntoView: () => [model, []],
-        CompletedClickItem: () => [model, []],
-        CompletedAdvanceFocus: () => [model, []],
         IgnoredMouseClick: () => [
             evo(model, { maybeLastButtonPointerType: () => Option.none() }),
             [],
+            Option.none(),
         ],
-        SuppressedSpaceScroll: () => [model, []],
-        CompletedAnchorMenu: () => [model, []],
-        CompletedPortalMenuBackdrop: () => [model, []],
     }));
 };
 /** The anchor-positioning Mount this Menu renders on its panel. Exposed so
@@ -408,18 +417,19 @@ export const open = (model) => update(model, Opened({ maybeActiveItemIndex: Opti
 /** Programmatically closes the menu, updating the model and returning
  *  focus and modal commands. Use this in domain-event handlers to close the menu. */
 export const close = (model) => update(model, Closed());
-/** Programmatically selects a menu item at the given index, closing the menu and returning
- *  focus commands. Use this in domain-event handlers when the menu uses `onSelectedItem`. */
-export const selectItem = (model, index) => update(model, SelectedItem({ index }));
+/** Programmatically selects a menu item, closing the menu and returning
+ *  focus commands plus a `Selected` OutMessage. Use this in domain-event handlers. */
+export const selectItem = (model, item, index) => update(model, SelectedItem({ index, item }));
 export { groupContiguous, resolveTypeaheadMatch };
 const itemId = (id, index) => `${id}-item-${index}`;
-/** Renders a headless menu with typeahead search, keyboard navigation, and aria-activedescendant focus management. */
-export const view = (config) => {
+const internalView = () => 
+/* eslint-disable-next-line @typescript-eslint/consistent-type-assertions */
+menuViewImpl;
+const menuViewImpl = defineView((model, viewInputs) => {
     const h = html();
-    const { model: { id, isOpen, animation: { transitionState }, maybeActiveItemIndex, searchQuery, maybeLastButtonPointerType, }, toParentMessage, onSelectedItem, items, itemToConfig, isItemDisabled, itemToSearchText = (item) => item, isButtonDisabled, buttonContent, buttonClassName, buttonAttributes = [], itemsClassName, itemsAttributes = [], itemsScrollClassName, itemsScrollAttributes = [], backdropClassName, backdropAttributes = [], className, attributes = [], itemGroupKey, groupToHeading, groupClassName, groupAttributes = [], separatorClassName, separatorAttributes = [], anchor, } = config;
-    const dispatchSelectedItem = (index) => onSelectedItem
-        ? onSelectedItem(index)
-        : toParentMessage(SelectedItem({ index }));
+    const { id, isOpen, animation: { transitionState }, maybeActiveItemIndex, searchQuery, maybeLastButtonPointerType, } = model;
+    const { items, itemToConfig, isItemDisabled, itemToSearchText = (item) => item, isButtonDisabled, buttonContent, buttonClassName, buttonAttributes = [], itemsClassName, itemsAttributes = [], itemsScrollClassName, itemsScrollAttributes = [], backdropClassName, backdropAttributes = [], className, attributes = [], itemGroupKey, groupToHeading, groupClassName, groupAttributes = [], separatorClassName, separatorAttributes = [], anchor, } = viewInputs;
+    const dispatchSelectedItem = (item, index) => SelectedItem({ index, item });
     const isLeaving = transitionState === 'LeaveStart' || transitionState === 'LeaveAnimating';
     const isVisible = isOpen || isLeaving;
     const animationAttributes = M.value(transitionState).pipe(M.when('EnterStart', () => [
@@ -445,45 +455,41 @@ export const view = (config) => {
         if (isOpen) {
             return handleItemsKeyDown(key);
         }
-        return M.value(key).pipe(M.whenOr('Enter', ' ', 'ArrowDown', () => Option.some(toParentMessage(Opened({
-            maybeActiveItemIndex: Option.some(firstEnabledIndex),
-        })))), M.when('ArrowUp', () => Option.some(toParentMessage(Opened({
-            maybeActiveItemIndex: Option.some(lastEnabledIndex),
-        })))), M.orElse(() => Option.none()));
+        return M.value(key).pipe(M.whenOr('Enter', ' ', 'ArrowDown', () => Option.some(Opened({ maybeActiveItemIndex: Option.some(firstEnabledIndex) }))), M.when('ArrowUp', () => Option.some(Opened({ maybeActiveItemIndex: Option.some(lastEnabledIndex) }))), M.orElse(() => Option.none()));
     };
-    const handleButtonPointerDown = (pointerType, button, screenX, screenY, timeStamp) => Option.some(toParentMessage(PressedPointerOnButton({
+    const handleButtonPointerDown = (pointerType, button, screenX, screenY, timeStamp) => Option.some(PressedPointerOnButton({
         pointerType,
         button,
         screenX,
         screenY,
         timeStamp,
-    })));
+    }));
     const handleButtonClick = () => {
         const isMouse = Option.exists(maybeLastButtonPointerType, type => type === 'mouse');
         if (isMouse) {
-            return toParentMessage(IgnoredMouseClick());
+            return IgnoredMouseClick();
         }
         else if (isOpen) {
-            return toParentMessage(Closed());
+            return Closed();
         }
         else {
-            return toParentMessage(Opened({ maybeActiveItemIndex: Option.none() }));
+            return Opened({ maybeActiveItemIndex: Option.none() });
         }
     };
-    const handleSpaceKeyUp = (key) => OptionExt.when(key === ' ', toParentMessage(SuppressedSpaceScroll()));
+    const handleSpaceKeyUp = (key) => OptionExt.when(key === ' ', SuppressedSpaceScroll());
     const resolveActiveIndex = keyToIndex('ArrowDown', 'ArrowUp', items.length, Option.getOrElse(maybeActiveItemIndex, () => 0), isDisabled);
     const searchForKey = (key) => {
         const nextQuery = searchQuery + key;
         const maybeTargetIndex = resolveTypeaheadMatch(items, nextQuery, maybeActiveItemIndex, isDisabled, itemToSearchText, Str.isNonEmpty(searchQuery));
-        return Option.some(toParentMessage(Searched({ key, maybeTargetIndex })));
+        return Option.some(Searched({ key, maybeTargetIndex }));
     };
-    const handleItemsKeyDown = (key) => M.value(key).pipe(M.when('Escape', () => Option.some(toParentMessage(Closed()))), M.when('Enter', () => Option.map(maybeActiveItemIndex, index => toParentMessage(RequestedItemClick({ index })))), M.when(' ', () => Str.isNonEmpty(searchQuery)
+    const handleItemsKeyDown = (key) => M.value(key).pipe(M.when('Escape', () => Option.some(Closed())), M.when('Enter', () => Option.map(maybeActiveItemIndex, index => RequestedItemClick({ index }))), M.when(' ', () => Str.isNonEmpty(searchQuery)
         ? searchForKey(' ')
-        : Option.map(maybeActiveItemIndex, index => toParentMessage(RequestedItemClick({ index })))), M.whenOr('ArrowDown', 'ArrowUp', 'Home', 'End', 'PageUp', 'PageDown', () => Option.some(toParentMessage(ActivatedItem({
+        : Option.map(maybeActiveItemIndex, index => RequestedItemClick({ index }))), M.whenOr('ArrowDown', 'ArrowUp', 'Home', 'End', 'PageUp', 'PageDown', () => Option.some(ActivatedItem({
         index: resolveActiveIndex(key),
         activationTrigger: 'Keyboard',
-    })))), M.when(isPrintableKey, () => searchForKey(key)), M.orElse(() => Option.none()));
-    const handleItemsPointerUp = (screenX, screenY, pointerType, timeStamp) => OptionExt.when(pointerType === 'mouse', toParentMessage(ReleasedPointerOnItems({ screenX, screenY, timeStamp })));
+    }))), M.when(isPrintableKey, () => searchForKey(key)), M.orElse(() => Option.none()));
+    const handleItemsPointerUp = (screenX, screenY, pointerType, timeStamp) => OptionExt.when(pointerType === 'mouse', ReleasedPointerOnItems({ screenX, screenY, timeStamp }));
     const resolvedButtonAttributes = [
         h.Id(`${id}-button`),
         h.Type('button'),
@@ -514,7 +520,7 @@ export const view = (config) => {
     const anchorAttributes = anchor
         ? [
             h.Style({ position: 'absolute', margin: '0', visibility: 'hidden' }),
-            h.OnMount(Mount.mapMessage(AnchorMenu({ buttonId: `${id}-button`, anchor }), toParentMessage)),
+            h.OnMount(AnchorMenu({ buttonId: `${id}-button`, anchor })),
         ]
         : [];
     const itemsContainerAttributes = [
@@ -531,7 +537,7 @@ export const view = (config) => {
                 h.OnKeyDownPreventDefault(handleItemsKeyDown),
                 h.OnKeyUpPreventDefault(handleSpaceKeyUp),
                 h.OnPointerUp(handleItemsPointerUp),
-                h.OnBlur(toParentMessage(BlurredItems())),
+                h.OnBlur(BlurredItems()),
             ]),
         ...(itemsClassName ? [h.Class(itemsClassName)] : []),
         ...itemsAttributes,
@@ -553,13 +559,13 @@ export const view = (config) => {
                 : []),
             ...(isInteractive
                 ? [
-                    h.OnClick(dispatchSelectedItem(index)),
+                    h.OnClick(dispatchSelectedItem(item, index)),
                     ...(isActiveItem
                         ? []
                         : [
-                            h.OnPointerMove((screenX, screenY, pointerType) => OptionExt.when(pointerType !== 'touch', toParentMessage(MovedPointerOverItem({ index, screenX, screenY })))),
+                            h.OnPointerMove((screenX, screenY, pointerType) => OptionExt.when(pointerType !== 'touch', MovedPointerOverItem({ index, screenX, screenY }))),
                         ]),
-                    h.OnPointerLeave(pointerType => OptionExt.when(pointerType !== 'touch', toParentMessage(DeactivatedItem()))),
+                    h.OnPointerLeave(pointerType => OptionExt.when(pointerType !== 'touch', DeactivatedItem())),
                 ]
                 : []),
             ...(itemConfig.className ? [h.Class(itemConfig.className)] : []),
@@ -589,7 +595,9 @@ export const view = (config) => {
             const groupContent = [...headingElement, ...segment.items];
             const groupElement = h.keyed('div')(`${id}-group-${segment.key}`, [
                 h.Role('group'),
-                ...(Option.isSome(maybeHeading) ? [h.AriaLabelledBy(headingId)] : []),
+                ...(Option.isSome(maybeHeading)
+                    ? [h.AriaLabelledBy(headingId)]
+                    : []),
                 ...(groupClassName ? [h.Class(groupClassName)] : []),
                 ...groupAttributes,
             ], groupContent);
@@ -599,7 +607,9 @@ export const view = (config) => {
                 ? [
                     h.keyed('div')(`${id}-separator-${segmentIndex}`, [
                         h.Role('separator'),
-                        ...(separatorClassName ? [h.Class(separatorClassName)] : []),
+                        ...(separatorClassName
+                            ? [h.Class(separatorClassName)]
+                            : []),
                         ...separatorAttributes,
                     ], []),
                 ]
@@ -608,16 +618,19 @@ export const view = (config) => {
         });
     };
     const backdrop = h.keyed('div')(`${id}-backdrop`, [
-        h.OnMount(Mount.mapMessage(PortalMenuBackdrop(), toParentMessage)),
-        ...(isLeaving ? [] : [h.OnClick(toParentMessage(Closed()))]),
+        h.OnMount(PortalMenuBackdrop()),
+        ...(isLeaving ? [] : [h.OnClick(Closed())]),
         ...(backdropClassName ? [h.Class(backdropClassName)] : []),
         ...backdropAttributes,
     ], []);
     const renderedItems = renderGroupedItems();
-    const scrollableItems = itemsScrollClassName || Array.isReadonlyArrayNonEmpty(itemsScrollAttributes)
+    const scrollableItems = itemsScrollClassName ||
+        Array.isReadonlyArrayNonEmpty(itemsScrollAttributes)
         ? [
             h.div([
-                ...(itemsScrollClassName ? [h.Class(itemsScrollClassName)] : []),
+                ...(itemsScrollClassName
+                    ? [h.Class(itemsScrollClassName)]
+                    : []),
                 ...itemsScrollAttributes,
             ], renderedItems),
         ]
@@ -637,14 +650,32 @@ export const view = (config) => {
         ]),
         ...(isVisible ? visibleContent : []),
     ]);
-};
-/** Creates a memoized menu view. Static config is captured in a closure;
- *  only `model` and `toParentMessage` are compared per render via `createLazy`. */
-export const lazy = (staticConfig) => {
-    const lazyView = createLazy();
-    return (model, toParentMessage) => lazyView((currentModel, currentToParentMessage) => view({
-        ...staticConfig,
-        model: currentModel,
-        toParentMessage: currentToParentMessage,
-    }), [model, toParentMessage]);
+});
+/** Pairs the menu's `view` and `update` (and programmatic helpers)
+ *  behind a single Item-typed entry point. Declaring the menu once at
+ *  module scope ensures the view's `Item` type and the OutMessage's
+ *  `item` type can't drift:
+ *
+ *  ```ts
+ *  const ActionMenu = Ui.Menu.create<Action>()
+ *
+ *  // In view:
+ *  h.submodel({ view: ActionMenu.view, ... })
+ *
+ *  // In update:
+ *  const [next, commands, maybeOutMessage] = ActionMenu.update(model.menu, message)
+ *  // maybeOutMessage: Option<Ui.Menu.OutMessage<Action>>
+ *  ```
+ */
+export const create = () => {
+    const cast = (result) => 
+    /* eslint-disable-next-line @typescript-eslint/consistent-type-assertions */
+    result;
+    return {
+        view: internalView(),
+        update: (model, message) => cast(update(model, message)),
+        selectItem: (model, item, index) => cast(selectItem(model, item, index)),
+        open: model => cast(open(model)),
+        close: model => cast(close(model)),
+    };
 };

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

@@ -1,4 +1,4 @@
-export { init, update, open, close, selectItem, view, lazy, Model, Message, SelectedItem, CompletedLockScroll, CompletedUnlockScroll, CompletedSetupInert, CompletedTeardownInert, CompletedFocusItems, CompletedFocusButton, CompletedScrollIntoView, CompletedClickItem, CompletedAnchorMenu, CompletedPortalMenuBackdrop, AnchorMenu, PortalMenuBackdrop, ClearedSearch, GotAnimationMessage, LockScroll, UnlockScroll, InertOthers, RestoreInert, FocusItems, FocusButton, ScrollIntoView, ClickItem, DelayClearSearch, DetectMovementOrAnimationEnd, } from './index.js';
-export type { ActivationTrigger, Opened, Closed, BlurredItems, ActivatedItem, DeactivatedItem, MovedPointerOverItem, RequestedItemClick, Searched, PressedPointerOnButton, ReleasedPointerOnItems, IgnoredMouseClick, SuppressedSpaceScroll, InitConfig, ViewConfig, ItemConfig, GroupHeading, } from './index.js';
+export { init, create, Model, Message, OutMessage, Selected, SelectedItem, CompletedLockScroll, CompletedUnlockScroll, CompletedInertOthers, CompletedRestoreInert, CompletedFocusItems, CompletedFocusButton, CompletedScrollIntoView, CompletedClickItem, CompletedAnchorMenu, CompletedPortalMenuBackdrop, AnchorMenu, PortalMenuBackdrop, ClearedSearch, GotAnimationMessage, LockScroll, UnlockScroll, InertOthers, RestoreInert, FocusItems, FocusButton, ScrollIntoView, ClickItem, DelayClearSearch, DetectMovementOrAnimationEnd, } from './index.js';
+export type { ActivationTrigger, Opened, Closed, BlurredItems, ActivatedItem, DeactivatedItem, MovedPointerOverItem, RequestedItemClick, Searched, PressedPointerOnButton, ReleasedPointerOnItems, IgnoredMouseClick, SuppressedSpaceScroll, InitConfig, ViewInputs, ItemConfig, GroupHeading, } from './index.js';
 export type { AnchorConfig } from '../anchor.js';
 //# sourceMappingURL=public.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"public.d.ts","sourceRoot":"","sources":["../../../src/ui/menu/public.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,IAAI,EACJ,MAAM,EACN,IAAI,EACJ,KAAK,EACL,UAAU,EACV,IAAI,EACJ,IAAI,EACJ,KAAK,EACL,OAAO,EACP,YAAY,EACZ,mBAAmB,EACnB,qBAAqB,EACrB,mBAAmB,EACnB,sBAAsB,EACtB,mBAAmB,EACnB,oBAAoB,EACpB,uBAAuB,EACvB,kBAAkB,EAClB,mBAAmB,EACnB,2BAA2B,EAC3B,UAAU,EACV,kBAAkB,EAClB,aAAa,EACb,mBAAmB,EACnB,UAAU,EACV,YAAY,EACZ,WAAW,EACX,YAAY,EACZ,UAAU,EACV,WAAW,EACX,cAAc,EACd,SAAS,EACT,gBAAgB,EAChB,4BAA4B,GAC7B,MAAM,YAAY,CAAA;AAEnB,YAAY,EACV,iBAAiB,EACjB,MAAM,EACN,MAAM,EACN,YAAY,EACZ,aAAa,EACb,eAAe,EACf,oBAAoB,EACpB,kBAAkB,EAClB,QAAQ,EACR,sBAAsB,EACtB,sBAAsB,EACtB,iBAAiB,EACjB,qBAAqB,EACrB,UAAU,EACV,UAAU,EACV,UAAU,EACV,YAAY,GACb,MAAM,YAAY,CAAA;AAEnB,YAAY,EAAE,YAAY,EAAE,MAAM,cAAc,CAAA"}
+{"version":3,"file":"public.d.ts","sourceRoot":"","sources":["../../../src/ui/menu/public.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,IAAI,EACJ,MAAM,EACN,KAAK,EACL,OAAO,EACP,UAAU,EACV,QAAQ,EACR,YAAY,EACZ,mBAAmB,EACnB,qBAAqB,EACrB,oBAAoB,EACpB,qBAAqB,EACrB,mBAAmB,EACnB,oBAAoB,EACpB,uBAAuB,EACvB,kBAAkB,EAClB,mBAAmB,EACnB,2BAA2B,EAC3B,UAAU,EACV,kBAAkB,EAClB,aAAa,EACb,mBAAmB,EACnB,UAAU,EACV,YAAY,EACZ,WAAW,EACX,YAAY,EACZ,UAAU,EACV,WAAW,EACX,cAAc,EACd,SAAS,EACT,gBAAgB,EAChB,4BAA4B,GAC7B,MAAM,YAAY,CAAA;AAEnB,YAAY,EACV,iBAAiB,EACjB,MAAM,EACN,MAAM,EACN,YAAY,EACZ,aAAa,EACb,eAAe,EACf,oBAAoB,EACpB,kBAAkB,EAClB,QAAQ,EACR,sBAAsB,EACtB,sBAAsB,EACtB,iBAAiB,EACjB,qBAAqB,EACrB,UAAU,EACV,UAAU,EACV,UAAU,EACV,YAAY,GACb,MAAM,YAAY,CAAA;AAEnB,YAAY,EAAE,YAAY,EAAE,MAAM,cAAc,CAAA"}

package/dist/ui/menu/public.js

@@ -1 +1 @@
-export { init, update, open, close, selectItem, view, lazy, Model, Message, SelectedItem, CompletedLockScroll, CompletedUnlockScroll, CompletedSetupInert, CompletedTeardownInert, CompletedFocusItems, CompletedFocusButton, CompletedScrollIntoView, CompletedClickItem, CompletedAnchorMenu, CompletedPortalMenuBackdrop, AnchorMenu, PortalMenuBackdrop, ClearedSearch, GotAnimationMessage, LockScroll, UnlockScroll, InertOthers, RestoreInert, FocusItems, FocusButton, ScrollIntoView, ClickItem, DelayClearSearch, DetectMovementOrAnimationEnd, } from './index.js';
+export { init, create, Model, Message, OutMessage, Selected, SelectedItem, CompletedLockScroll, CompletedUnlockScroll, CompletedInertOthers, CompletedRestoreInert, CompletedFocusItems, CompletedFocusButton, CompletedScrollIntoView, CompletedClickItem, CompletedAnchorMenu, CompletedPortalMenuBackdrop, AnchorMenu, PortalMenuBackdrop, ClearedSearch, GotAnimationMessage, LockScroll, UnlockScroll, InertOthers, RestoreInert, FocusItems, FocusButton, ScrollIntoView, ClickItem, DelayClearSearch, DetectMovementOrAnimationEnd, } from './index.js';