Navigation component #60

MartinBozhilov-coh · 2025-11-25T15:29:35Z

I made a minimal integration of the Navigation component inside the Menu UI for easier testing. You can:

Navigate between the gameplay and graphics tabs with Q and E
Navigate the menu item components with arrow buttons (and gamepad d-pad)
Press left and right arrow when the menu item with the stepper is focused to switch its options

alien1976 · 2025-12-02T14:27:18Z

docs/src/content/docs/components/Utility/Navigation.mdx

+:::caution[Reserved Action Names]
+Avoid creating custom actions with names starting with `move-focus-*` (e.g., `move-focus-left`, `move-focus-right`, etc.). These names are reserved and used internally by the spatial navigation system for managing focus between UI elements.
+:::


Can we outline all the actions that are reserved? For example we can describe them in the IM documentation and here we can leave a link to them.

alien1976 · 2025-12-02T14:51:59Z

docs/src/content/docs/components/Utility/Navigation.mdx

+
+**With an anchor element:**
+
+Sometimes you want a component to respond to actions when a different element is focused (like a child button):


Can we add more descriptive example - for example how to propagate action when a row with a dropdown is focused. The dropdown should receive the actions from the row via the anchor.

Added a new section with more in-depth explanation

alien1976 · 2025-12-02T15:41:51Z

src/components/Utility/Navigation/areaMethods/useAreaMethods.ts

+        if (!areas.has(area)) {
+            console.warn(`Area "${area}" not registered. Available areas:`, Array.from(areas));
+            return;
+        }


We can move this into method (e.g isAreaValid) and reuse it.

const isAreaValid = (area: string) => { if (!areas.has(area)) { console.warn(`Area "${area}" not registered. Available areas:`, Array.from(areas)); return false; } return true; }

const focusFirst = (area: string) => { if (!isAreaValid(area)) return;

alien1976 · 2025-12-02T15:54:24Z

src/custom-components/Menu/Options/Audio/Audio.tsx

 import { keybindPresetContent } from "@custom-components/Menu/SidePanel/keybindsPanelContent";
 import KeyBind from "@custom-components/Menu/KeyBind/KeyBind";
-import eventBus from "@components/tools/EventBus";
+import eventBus from "@components/Utility/EventBus";


Some import statements here are not used. we can remove them

alien1976

Seems that stepper is not working when you navigate to graphics and then return to gameplay.

Press E -> navigates to Graphics
Press Q -> Navigates back to gameplay
Press Arrow Left/Right -> should change the stepper value but it doesn't

MihailTodorov · 2025-12-29T10:37:18Z

src/components/BaseComponent/BaseComponent.tsx

+    let anchorElement: HTMLElement | null = null;
+    if (anchor) {
+        if (typeof anchor === 'string') {
+            waitForFrames(() => anchorElement = document.querySelector(anchor));


Why do we wait for frames here?

Sometimes some elements can't be found.

Copilot

Pull request overview

This PR implements a comprehensive Navigation component that provides keyboard and gamepad input handling for the Menu UI. The integration enables tab switching between Gameplay and Graphics sections using Q/E keys, menu item navigation with arrow keys and D-pad, and stepper control via left/right inputs. The implementation is built on top of the Coherent Gameface Interaction Manager and includes spatial navigation, a flexible action mapping system, and context-aware scope management.

Adds new Navigation component with action and area management systems
Integrates Navigation into the Menu UI with keyboard (Q/E, arrows) and gamepad (D-pad, shoulder buttons) controls
Updates EventBus import paths from @components/tools/EventBus to @components/Utility/EventBus

Reviewed changes

Copilot reviewed 21 out of 24 changed files in this pull request and generated 23 comments.

Show a summary per file

File	Description
src/views/menu/Menu.tsx	Wraps menu in Navigation component, adds default actions for tab switching and test buttons for development
src/views/menu/util/index.ts	Updates EventBus import path to new Utility directory
src/custom-components/Menu/Options/Graphics/Graphics.tsx	Wraps content in Navigation.Area for spatial navigation
src/custom-components/Menu/Options/Gameplay/Gameplay.tsx	Wraps content in Navigation.Area, adds navigation actions to Stepper, changes subtitle default to visible
src/custom-components/Menu/Options/Audio/Audio.tsx	Updates EventBus import path
src/custom-components/Menu/MenuItem/MenuItem.tsx	Adds focus handling and menu-item class for navigation targeting
src/components/types/ComponentProps.d.ts	Adds navigation-actions prop and anchor support for components
src/components/Utility/Navigation/types.ts	Defines action configuration types and navigation config interface
src/components/Utility/Navigation/keybindings/keybindings.types.ts	Defines keyboard and gamepad button binding types
src/components/Utility/Navigation/defaults.ts	Configures default navigation actions (move, select, back)
src/components/Utility/Navigation/areaMethods/useAreaMethods.ts	Implements area registration, focus management, and pause/resume functionality
src/components/Utility/Navigation/areaMethods/areaMethods.types.ts	Defines interface for area-related navigation methods
src/components/Utility/Navigation/actionMethods/useActionMethods.ts	Implements action registration, execution, and state management
src/components/Utility/Navigation/actionMethods/actionMethods.types.ts	Defines interface for action-related navigation methods
src/components/Utility/Navigation/NavigationArea.tsx	Subcomponent for defining navigable UI areas with automatic cleanup
src/components/Utility/Navigation/Navigation.tsx	Main Navigation component providing context and API for navigation system
src/components/Utility/EventBus/index.ts	Adds line numbers to EventBus (no functional changes)
src/components/Basic/Stepper/Stepper.tsx	Integrates navigationActions directive for move-left/move-right support
src/components/BaseComponent/BaseComponent.tsx	Adds navigationActions directive for subscribing components to navigation actions
package.json	Adds coherent-gameface-interaction-manager dependency (v2.4.4)
docs/src/content/docs/components/index.mdx	Adds Utility category to component documentation
docs/src/content/docs/components/Utility/Navigation.mdx	Comprehensive documentation for Navigation component and action system
docs/src/content/docs/components/Basic/stepper.mdx	Documents Stepper's navigation action support
docs/src/assets/components/utility/navigation.svg	Adds Navigation component icon

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Copilot · 2025-12-29T10:42:15Z

src/custom-components/Menu/Options/Gameplay/Gameplay.tsx

-                    </Stepper>
+        <Navigation.Area name="menu" selector="menu-item" focused>
+            <MenuItem id="difficulty" name='Difficulty'>
+                <Stepper anchor=".menu-item" onChange={emitChange} style={{width: '15vmax'}} navigation-actions={{select: () => console.log('custom select implementation')}}>


The console.log statement 'custom select implementation' appears to be debug/placeholder code. Consider removing this or implementing the actual custom select behavior for the difficulty stepper.

Suggested change

<Stepper anchor=".menu-item" onChange={emitChange} style={{width: '15vmax'}} navigation-actions={{select: () => console.log('custom select implementation')}}>

<Stepper anchor=".menu-item" onChange={emitChange} style={{width: '15vmax'}}>

Copilot · 2025-12-29T10:42:15Z

src/components/Utility/Navigation/keybindings/keybindings.types.ts

+    | 'left-sholder'
+    | 'right-sholder'
+    | 'left-sholder-bottom'
+    | 'right-sholder-bottom'


The gamepad button binding 'right-sholder-bottom' is misspelled. It should be 'right-shoulder-bottom' to match the correct spelling.

Suggested change

| 'right-sholder-bottom'

| 'right-shoulder-bottom'

Copilot · 2025-12-29T10:42:15Z

docs/src/content/docs/components/Utility/Navigation.mdx

+
+const App = () => {
+    const defaultActions: ActionMap = {
+        'tab-left': {key: {binds: ['Q'], type: ['press']}, button: {binds: ['left-shoulder'], type: 'press'}, callback: menuLeft, global: true},


The word 'sholder' in the comment is misspelled. It should be 'shoulder' to be consistent with the corrected gamepad button names.

src/views/menu/Menu.tsx

Copilot · 2025-12-29T10:42:19Z

src/components/Basic/Stepper/Stepper.tsx


    props.componentClasses = () => stepperClasses();
-    const { className, inlineStyles, forwardEvents, forwardAttrs } = useBaseComponent(props);
+    const { className, inlineStyles, forwardEvents, forwardAttrs, navigationActions } = useBaseComponent(props);


Unused variable navigationActions.

Suggested change

const { className, inlineStyles, forwardEvents, forwardAttrs, navigationActions } = useBaseComponent(props);

const { className, inlineStyles, forwardEvents, forwardAttrs } = useBaseComponent(props);

Copilot · 2025-12-29T10:42:20Z

src/components/Utility/Navigation/Navigation.tsx

+// @ts-ignore
+import { gamepad } from 'coherent-gameface-interaction-manager';
+import NavigationArea from "./NavigationArea";
+import eventBus from "@components/Utility/EventBus";


Unused import eventBus.

Suggested change

import eventBus from "@components/Utility/EventBus";

Copilot · 2025-12-29T10:42:20Z

src/components/Utility/Navigation/NavigationArea.tsx

@@ -0,0 +1,48 @@
+import { children, createEffect, on, onCleanup, onMount, ParentComponent, useContext } from "solid-js"


Unused import useContext.

Suggested change

import { children, createEffect, on, onCleanup, onMount, ParentComponent, useContext } from "solid-js"

import { children, createEffect, on, onCleanup, onMount, ParentComponent } from "solid-js"

Copilot · 2025-12-29T10:42:20Z

src/components/Utility/Navigation/NavigationArea.tsx

@@ -0,0 +1,48 @@
+import { children, createEffect, on, onCleanup, onMount, ParentComponent, useContext } from "solid-js"
+import { NavigationContext, useNavigation } from "./Navigation";


Unused import NavigationContext.

Suggested change

import { NavigationContext, useNavigation } from "./Navigation";

import { useNavigation } from "./Navigation";

Copilot · 2025-12-29T10:42:21Z

src/custom-components/Menu/Options/Audio/Audio.tsx

 import { keybindPresetContent } from "@custom-components/Menu/SidePanel/keybindsPanelContent";
 import KeyBind from "@custom-components/Menu/KeyBind/KeyBind";
-import eventBus from "@components/tools/EventBus";
+import eventBus from "@components/Utility/EventBus";


Unused import eventBus.

Suggested change

import eventBus from "@components/Utility/EventBus";

* Extend button, toggleButton and checkbox and add docs * Extend sliders to use navigation * Extend tooltip to implement actions * Extend dropdown with navigation actions * handle dropdown nav edge cases * Add nav actions to inputs and add reusable input wrapper component * Refactor Navigation pause/resume to avoid deinit cycles * Extend Accordion to use navigation actions * Fix anchor and action type inconsistencies across components * Fix IM types after ts migration * resolve pr comments

…log entry,

MartinBozhilov-coh requested review from MihailTodorov and alien1976 November 25, 2025 15:29

MartinBozhilov-coh self-assigned this Nov 25, 2025

alien1976 requested changes Dec 2, 2025

View reviewed changes

MihailTodorov approved these changes Dec 29, 2025

View reviewed changes

MihailTodorov requested a review from Copilot December 29, 2025 10:38

Copilot started reviewing on behalf of MihailTodorov December 29, 2025 10:38 View session

Copilot AI reviewed Dec 29, 2025

View reviewed changes

MartinBozhilov-coh added 21 commits January 28, 2026 14:57

Add Navigation component and expose api

ffc1183

Add type suggestions for keys and buttons

1f38cdd

Add directive support for components to implement

0464b56

Add a way to pause and resume actions

c5ff49b

Add spatial nav pause/resume

1e1a4e9

Add documentation and move component to Utility folder

8c95e8c

Add demo integration in the Menu UI for testing

c99a48c

update im version

60f6133

Make components default actions extendable

8a5f22c

Resolve PR comments

4b28782

Add nav actions to segment

109862d

Add nav actions to radio component

4b65c5b

Fix actions not executing due to focus loss on accidental clicks

a732361

Change how layout components with no methods access ref, added change…

df949a7

…log entry,

Fix dropdown bug that loses focus from navigation when closed with mouse

a3f6fbf

Extended textblocks to support navigation actions

c70f6e2

Add new default action and extend XYSlider

6c1d5b7

Change onAction prop type in docs to include passed args

a5adf0d

Make the pan action paused by default

febd138

Add anchor and onAction props to Layout components

67bc23c

MartinBozhilov-coh added 5 commits January 28, 2026 15:00

Change how pausing an action works

e7b0bb0

Extended scroll to use pan action

bffb9ed

Add ref access guide in navigation docs

305e5ba

Improve pause/resume logic and resolve pr comments

14813f4

Resolve PR comments

e75acae

MartinBozhilov-coh force-pushed the navigation-component branch from b25550c to e75acae Compare January 28, 2026 13:02


		With an anchor element:

		Sometimes you want a component to respond to actions when a different element is focused (like a child button):

	<Stepper anchor=".menu-item" onChange={emitChange} style={{width: '15vmax'}} navigation-actions={{select: () => console.log('custom select implementation')}}>
	<Stepper anchor=".menu-item" onChange={emitChange} style={{width: '15vmax'}}>

	const { className, inlineStyles, forwardEvents, forwardAttrs, navigationActions } = useBaseComponent(props);
	const { className, inlineStyles, forwardEvents, forwardAttrs } = useBaseComponent(props);

		@@ -0,0 +1,48 @@
		import { children, createEffect, on, onCleanup, onMount, ParentComponent, useContext } from "solid-js"

		@@ -0,0 +1,48 @@
		import { children, createEffect, on, onCleanup, onMount, ParentComponent, useContext } from "solid-js"
		import { NavigationContext, useNavigation } from "./Navigation";

	import { NavigationContext, useNavigation } from "./Navigation";
	import { useNavigation } from "./Navigation";

Navigation component #60

Are you sure you want to change the base?

Navigation component #60

Uh oh!

Conversation

MartinBozhilov-coh commented Nov 25, 2025

Uh oh!

alien1976 Dec 2, 2025

Choose a reason for hiding this comment

Uh oh!

alien1976 Dec 2, 2025

Choose a reason for hiding this comment

Uh oh!

MartinBozhilov-coh Jan 5, 2026

Choose a reason for hiding this comment

Uh oh!

alien1976 Dec 2, 2025

Choose a reason for hiding this comment

Uh oh!

alien1976 Dec 2, 2025

Choose a reason for hiding this comment

Uh oh!

alien1976 left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

MihailTodorov Dec 29, 2025

Choose a reason for hiding this comment

Uh oh!

MartinBozhilov-coh Jan 5, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Copilot AI Dec 29, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Dec 29, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Dec 29, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Copilot AI Dec 29, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Dec 29, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Dec 29, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Dec 29, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Dec 29, 2025

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

alien1976 left a comment •

edited

Loading

MartinBozhilov-coh Jan 5, 2026 •

edited

Loading