@navyk/opentui-core

opentui-core renderables for navyk, a focus-based keyboard navigation system.

Install

bun add @navyk/opentui-core

What this package provides

• TargetRenderable: base focusable node with focus/focus-within lifecycle
• ScopeRenderable: keymap-driven focus routing to descendants by id
• CellRenderable: scope node with local focus semantics for grids
• GridRenderable: 2D local navigation and focus recovery helpers

Focus model

• focus: active focused node (what receives key events)
• focusWithin: ancestor chain of the active focus
• focusLocal: local selection inside a GridRenderable
• focusCurrentFocusLocal: optional bridge from grid focus to focused local cell

Minimal example

import { createCliRenderer } from "@opentui/core";
import {
    CellRenderable,
    GridRenderable,
    ScopeRenderable,
    type MovementKeymaps,
} from "@navyk/opentui-core";

const renderer = await createCliRenderer();

const movement: MovementKeymaps = {
    overflowBehavior: "stop",
    left: { name: "left" },
    right: { name: "right" },
    up: { name: "up" },
    down: { name: "down" },
};

const app = new ScopeRenderable(renderer, {
    id: "app",
    defaultFocus: "main-grid",
    width: "100%",
    height: "100%",
    targets: {
        "main-grid": { name: "escape" },
    },
});

const grid = new GridRenderable(renderer, {
    id: "main-grid",
    size: [2, 2],
    movement,
    focusCurrentFocusLocal: true,
    width: "100%",
    height: "100%",
});

for (let i = 0; i < 4; i += 1) {
    grid.add(
        new CellRenderable(renderer, {
            id: `cell-${i}`,
            width: "50%",
            height: "50%",
        }),
    );
}

app.add(grid);
renderer.root.add(app);
app.focus();