feat(keys): j/k and the arrows walk Home's rails and every Plex grid and rail

Second slice of the E11 keyboard layer (S4b). S4a gave the feed, the library and the channel page
`j`/`k`, the arrows and Enter; Home's shelves and the whole Plex module were still Tab-stop country —
a Plex poster is its own Tab stop, and a rail's cards sat behind every control of the cards before.

- `lib/listNav`: a list that mounts every item no longer declares a count or columns — both are
  measured off the DOM when a key is pressed, so an auto-fill grid's columns follow its width and a
  rail is one row. ↑ on a list's top row and ↓ on its bottom row go on to the neighbouring list, onto
  the item horizontally nearest the one left (owner decision D4: ←→ within a rail, ↑↓ to the rail
  above or below). The first `j` skips cards a rail has scrolled out to the left.
- `Carousel keyboardNav` registers the scroller; the scroller gets a 4px inset (against a -4px margin,
  layout unchanged) so the focus ring is not clipped, and `[data-nav-index]` a 2.5rem inline scroll
  margin so a card stepped into view clears the rail's edge fade and paging arrow.
- `ui/NavGrid`: the plain, fully mounted grid that registers itself.
- `navIndex` on PlexPosterCard / SeasonCard / EpisodeCard (the card root is the item, the poster the
  open element — the ring goes round poster and title, D2), PosterTile and Home's ShelfTile (the button
  is the item); cast, related and collection-strip buttons carry the attrs directly.
- Wired: Home's comfort and resume rails; Plex Browse titles + episodes, Discover rails + genres,
  collection view, playlists/collections browse, person known-for + filmography, show seasons, season
  episodes, cast/related strips, info-page cast + collection strips.
- `listNav.wiring.contract.test`: every `Carousel` says `keyboardNav`, every card says `navIndex`, and a
  card with `navIndex` sits inside a NavGrid / Carousel / VirtualGrid — both halves are opt-in, and
  either one missing leaves a list the keyboard silently skips.

frontend/src/components/plexCards.tsx

@@ -4,6 +4,7 @@ import { type CSSProperties } from "react";
 import { formatRuntime } from "../lib/format";
 import { Carousel } from "./ui/Carousel";
 import type { PlexCard, PlexCastMember, PlexFilters, PlexSeasonDetail } from "../lib/api";
+import { navItemAttrs } from "../lib/listNav";
 
 // Presentational Plex cards + strips, split out of PlexBrowse (all purely prop-driven, no shared
 // state). Rendered by the browse grid, the person page, and the series show/season views.
@@ -52,6 +53,7 @@ export function PlexPosterCard({
   onInfo,
   onToggleWatched,
   menuProps,
+  navIndex,
 }: {
   card: PlexCard;
   onOpen: () => void;
@@ -61,6 +63,8 @@ export function PlexPosterCard({
    *  A function of the card rather than a ready-made object, so every card surface in the app takes
    *  `menuProps={menu.triggerProps}` and reads the same at every call site. */
   menuProps?: (c: PlexCard) => Record<string, unknown>;
+  /** Position in a keyboard-walkable grid or rail (lib/listNav); the poster is what Enter opens. */
+  navIndex?: number;
 }) {
   const { t } = useTranslation();
   const inProgress = (card.position_seconds ?? 0) > 0 && card.status !== "watched";
@@ -75,6 +79,7 @@ export function PlexPosterCard({
     <div
       className="group text-left"
       {...menuProps?.(card)}
+      {...(navIndex !== undefined && navItemAttrs(navIndex))}
       // content-visibility keeps off-screen posters cheap to render (smoother long-list scroll).
       style={{ contentVisibility: "auto", containIntrinsicSize: "auto 300px" } as CSSProperties}
     >
@@ -82,6 +87,7 @@ export function PlexPosterCard({
         onClick={onOpen}
         role="button"
         tabIndex={0}
+        data-nav-open=""
         onKeyDown={(e) => {
           if (e.key === "Enter" || e.key === " ") {
             e.preventDefault();
@@ -242,11 +248,13 @@ export function SeasonCard({
   onOpen,
   onToggleWatched,
   onAdd,
+  navIndex,
 }: {
   se: PlexSeasonDetail;
   onOpen: () => void;
   onToggleWatched?: () => void;
   onAdd?: () => void;
+  navIndex?: number;
 }) {
   const { t } = useTranslation();
   const watched = se.status === "watched";
@@ -254,11 +262,12 @@ export function SeasonCard({
     ? t("plex.series.markSeasonUnwatched")
     : t("plex.series.markSeasonWatched");
   return (
-    <div className="group text-left">
+    <div className="group text-left" {...(navIndex !== undefined && navItemAttrs(navIndex))}>
       <div
         onClick={onOpen}
         role="button"
         tabIndex={0}
+        data-nav-open=""
         onKeyDown={(e) => {
           if (e.key === "Enter" || e.key === " ") {
             e.preventDefault();
@@ -357,7 +366,7 @@ export function CastStrip({
       style={{ background: "color-mix(in srgb, var(--card) 55%, transparent)" }}
     >
       <h2 className="text-sm font-semibold mb-3">{t("plex.info.cast")}</h2>
-      <Carousel gap="gap-4" ariaLabel={t("plex.info.cast")}>
+      <Carousel gap="gap-4" ariaLabel={t("plex.info.cast")} keyboardNav={clickable}>
         {cast.map((c, i) => {
           const inner = (
             <>
@@ -390,6 +399,7 @@ export function CastStrip({
           return clickable ? (
             <button
               key={i}
+              {...navItemAttrs(i)}
               onClick={() =>
                 onOpenPerson ? onOpenPerson(c.name) : onFilter?.({ actors: [c.name] })
               }
@@ -427,10 +437,11 @@ export function RelatedStrip({
       style={{ background: "color-mix(in srgb, var(--card) 55%, transparent)" }}
     >
       <h2 className="text-sm font-semibold mb-3">{t("plex.series.related")}</h2>
-      <Carousel gap="gap-3" ariaLabel={t("plex.series.related")}>
-        {related.map((r) => (
+      <Carousel gap="gap-3" ariaLabel={t("plex.series.related")} keyboardNav>
+        {related.map((r, i) => (
           <button
             key={r.id}
+            {...navItemAttrs(i)}
             onClick={() => onOpen(r.id)}
             className="group w-[130px] shrink-0 text-left"
           >
@@ -463,12 +474,14 @@ export function EpisodeCard({
   onAdd,
   onToggleWatched,
   withShowTitle,
+  navIndex,
 }: {
   ep: PlexCard;
   onPlay: () => void;
   onAdd?: () => void;
   onToggleWatched?: () => void;
   withShowTitle?: boolean;
+  navIndex?: number;
 }) {
   const { t } = useTranslation();
   const inProgress = (ep.position_seconds ?? 0) > 0 && ep.status !== "watched";
@@ -478,11 +491,12 @@ export function EpisodeCard({
       ? Math.min(100, Math.round(((ep.position_seconds ?? 0) / ep.duration_seconds) * 100))
       : 0;
   return (
-    <div className="group">
+    <div className="group" {...(navIndex !== undefined && navItemAttrs(navIndex))}>
       <div
         onClick={onPlay}
         role="button"
         tabIndex={0}
+        data-nav-open=""
         onKeyDown={(e) => {
           if (e.key === "Enter" || e.key === " ") {
             e.preventDefault();