Controller and keyboard

1. Mark everything that can be chosen with data-focus. The two buttons in the bar already have it in the HTML. Add it to the card and to the empty library button:
   { class: "tarjeta", "data-focus": "", "data-id": g.id, "data-firma": firma, title: g.title, onclick: () => jugar(g.id) },
   // …
   h("button", { class: "boton", "data-focus": "", onclick: () => ejg.ui.open("add-folder") }, "Añadir juegos")
   
2. Create the focus and connect it to the actions. Add this at the top of main.js:
   import { createFocus, bindNav } from "/_sdk/kit/focus.js";
   import { hints } from "/_sdk/kit/hints.js";
   
   and, after ready():
   const foco = createFocus();
   
   bindNav(foco, {
     y: () => {
       const id = Number(foco.current?.dataset.id);
       if (!id) return false;
       ejg.game.favorite(id);
     },
     menu: () => {
       ejg.ui.open("menu");
     },
   });
   
   // When a launcher screen closes (settings, search…), take the focus back.
   ejg.on("focus-return", () => foco.restore());
   
   // The bar buttons open launcher screens.
   for (const b of document.querySelectorAll("[data-ui]")) {
     b.addEventListener("click", () => ejg.ui.open(b.dataset.ui));
   }
   
3. Show the focus in CSS. The focused element has the class is-focused:
   button:focus { outline: none; } /* focus is drawn with .is-focused */
   .acciones button.is-focused { color: var(--texto); background: color-mix(in srgb, var(--texto) 12%, transparent); }
   .tarjeta.is-focused .caratula { transform: scale(1.03); box-shadow: 0 0 0 3px var(--acento); }
   .tarjeta.is-focused .nombre { color: var(--texto); }
   
4. Make sure something is always focused. At the end of pintar(), after keyed(…):
   // If the focused element is gone (at startup, or because its card was rebuilt
   // when the cover arrived), focus moves to its replacement, or to the first.
   if (!foco.current?.isConnected) {
     const otra = (idEnfocado && rejilla.querySelector(`[data-id="${idEnfocado}"]`)) || rejilla.querySelector("[data-focus]");
     if (otra) foco.focus(otra, { noScroll: true, silent: true });
   }
   
   with const idEnfocado = foco.current?.dataset.id; at the start of pintar().

• bindNav(focus, { action: function }): the arrows move focus and accept clicks the focused element (with its sound). Your functions run first. If one returns false, the action is not treated as handled. For back, that means ejGames handles it (it closes whatever it has open and, in Big Picture, opens the quick menu).
• foco.current is the focused element. foco.focus(el) focuses a specific one and foco.first(container) focuses the first in a container. With { silent: true } it makes no sound, and with { noScroll: true } it does not scroll.
• ejg.game.favorite(id) toggles the favorite (or sets it if you pass true/false). You do not need to repaint by hand: the change arrives through library.onChange and the card updates itself.
• data-focus-group (on #rejilla) remembers the last focused element of the group. If you go up to the bar and come back down, you return to the same cover.
• With the mouse, passing over an element focuses it, and leaving removes the mark, so it does not stay stuck. With a controller the cursor is hidden.

​

The hint bar

const pistas = hints(document.querySelector("#pistas"), [["accept", "Jugar"], ["y", "Favorito"], ["menu", "Menú"]]);

.pistas {
  position: fixed; right: 20px; bottom: 16px; z-index: 20;
  display: flex; gap: 18px; padding: 8px 14px; border-radius: 99px;
  background: rgb(0 0 0 / 0.55); backdrop-filter: blur(8px); font-size: 13px;
}
.pistas:empty, html[data-input="mouse"] .pistas { display: none; }