Focus boundary SG components example

This RSG 2.0 SDK app demonstrates FocusBoundary behavior with SceneGraph-backed components inside a TypeScript-driven focus flow.

This app isolates the FocusBoundary examples that mix native SceneGraph nodes with TypeScript focus management.

Examples

The app includes these examples:

Directional Focus: A basic FocusBoundary with two horizontal SceneGraph Buttons and vertical navigation between rows.
Focus Boundary SG Button: A FocusBoundary with native SceneGraph Buttons and a LabelList as siblings.
Gain Focus Signal: Moves focus across native SceneGraph buttons declaratively by binding each leaf's gainFocus to a signal. This example does not use setFocus, useFocusActions, <Show>, or a remount.
Initial Focus Handoff: A preview-to-player handoff where each leaf is virtually registered (useFocusable, gainFocus={isFocused()}) and focus follows the active stage through initialFocus and <Show>. This example does not use setFocus, but it unmounts the inactive leaf on each handoff.
Imperative Focus: Two persistent native Button leaves move focus between each other through useFocusActions().setFocus(ref) on onButtonSelected. This example does not use <Show> or a remount; gainFocus={isFocused()} follows the boundary. It is the imperative complement to the two declarative handoffs.

These concepts apply across the examples:

FocusBoundary can coordinate focus across SceneGraph-backed components.
useFocusable can drive gainFocus on native nodes when they become virtually focused.
Mixed virtual and native controls can share a single TypeScript-driven navigation model.
For a native SceneGraph leaf, the declarative focus mechanism is gainFocus, not initialFocus. You should bind gainFocus to a signal and change the signal to move focus; this approach does not require setFocus or a remount. initialFocus is read only at registration and boundary re-entry and is not reactive; as a result, it cannot move focus among leaves that are already mounted.

You can use these keys to navigate the app:

You can use these commands to build, test, and lint the app:

npx rk dev          # Build + deploy to Roku device
pnpm test           # Run tests
pnpm run lint       # Lint sources