feat(e5): first-class combobox platform mode + universal Combobox (A11Y-1)

The E5 filter pickers were a hand-rolled floating-ui combobox (MultiSelectChips)
with no combobox ARIA, no arrow-nav, and options in a body-portal — keyboard/SR
users could not operate it, and the bare role=listbox/option wiring actively
misled screen readers (deep-review A11Y-1, CONFIRMED 3/3 medium). Rather than
one-off-hack the a11y, add combobox as a first-class mode of the AnchoredPopover
platform and rebuild the pickers on a reusable component.

Platform (AnchoredPopover):
- new mode "combobox": reuses the whole positioning core (offset/flip/shift/size/
  hide, isPositioned + transform-clobber flash guards, FloatingPortal + fullscreen
  re-parent, topmost-only Escape layer). Differs only in the focus model — no
  useClick (open is field-driven), useRole role="combobox" so Floating UI wires the
  full ARIA tree (input role=combobox + aria-expanded/controls/autocomplete/
  activedescendant, listbox surface, option ids), and useListNavigation virtual:true
  so ↑/↓ move an aria-activedescendant pointer while DOM focus STAYS on the input.
- PopoverSurface: combobox surfaces host the item registry but are NOT focus-trapped.
- PopoverItem: virtual mode carries a stable id (the activedescendant target), never
  takes roving DOM focus, keeps the input focused on click (mousedown preventDefault),
  and its checked/selected truth wins over getItemProps' single-select guess.

Component (Combobox.tsx, new): the universal react-select/Overseerr combi-input —
chips-in-field + typed search + checklist. Supports multi/single select, client OR
server (async) filtering, custom rows, the big-vocabulary render cap + refine footer,
and a selected-label cache so a server-narrowed single-select still names its chip.

Rollout: MultiSelectChips (genre/age-rating/studio) → Combobox; the CollectionPicker
"+Add" popover → a single-select async Combobox (also fixes its arrow-keys-eaten
story), unifying the two filter idioms. PlexSearchBox is a documented future consumer.

Gate green (tsc, vitest 351, eslint, prettier, knip). Browser E2E on localdev:
role=combobox confirmed on both pickers; ↑/↓ moves aria-activedescendant with focus
staying on the input; Enter + click select; multi-select chips accumulate; Backspace
removes the last chip; async collection server-search picks + closes. No backend change.

frontend/src/components/AnchoredPopover.tsx

@@ -2,6 +2,7 @@ import {
   createContext,
   useContext,
   useEffect,
+  useId,
   useLayoutEffect,
   useRef,
   useState,
@@ -61,14 +62,29 @@ import { useFullscreenElement } from "../lib/fullscreen";
 // right role (menuitem / menuitemradio+aria-checked / option+aria-selected). A menu that also holds a
 // free-text input (the tag creator) must stopPropagation non-Escape keys on that input so ↑/↓ and
 // typeahead act on the text, not the list — see ChannelTags.
+//
+// S? adds a "combobox" mode — the ONE right way to build a typeable combobox (a search/filter input
+// with a listbox of options below), so a hand-rolled floating-ui engine (the old MultiSelectChips /
+// PlexSearchBox pattern) is no longer needed. It differs from menu/listbox in exactly the focus model:
+//   - the trigger IS a text input, so open is driven by the caller (focus/typing), NOT useClick;
+//   - focus STAYS on the input — the surface is NOT focus-trapped and list items are never DOM-focused;
+//     arrow-nav is VIRTUAL (useListNavigation `virtual:true` → the ↑/↓/Home/End handler rides on the
+//     input's getReferenceProps and moves an `aria-activedescendant` pointer, not real focus).
+// Because `role:"combobox"` is passed to useRole, Floating UI wires the whole ARIA tree for free: the
+// reference input gets role=combobox + aria-expanded/controls/autocomplete/activedescendant, the surface
+// gets role=listbox, and each <PopoverItem role="option"> gets its option id (so activedescendant has a
+// target). The caller mounts the INPUT as `refs.setReference` (makes it a "typeable combobox reference")
+// and the field box as `refs.setPositionReference` (so the panel anchors under the whole chips+input
+// field). The universal <Combobox> component wraps all of this — call sites use it, not this mode raw.
 
 // Internal to the platform; call sites pass the string literal via `mode`, they don't name the type.
-type PopoverMode = "menu" | "listbox" | "hover" | "dialog";
+type PopoverMode = "menu" | "listbox" | "hover" | "dialog" | "combobox";
 
 export interface AnchoredPopoverOptions {
   open: boolean;
   onOpenChange: (open: boolean, event?: Event) => void;
-  /** "menu"/"listbox"/"dialog" open on click; "hover" opens on hover+focus (tooltips, hover cards). */
+  /** "menu"/"listbox"/"dialog" open on click; "hover" opens on hover+focus (tooltips, hover cards);
+   *  "combobox" is a typeable input + listbox where focus stays in the field (use via <Combobox>). */
   mode?: PopoverMode;
   placement?: Placement;
   /** Gap between trigger and panel, px. Default 4. */
@@ -99,9 +115,14 @@ type AnchoredPopover = ReturnType<typeof useAnchoredPopover>;
 export function useAnchoredPopover(opts: AnchoredPopoverOptions) {
   const mode = opts.mode ?? "menu";
   const isHover = mode === "hover";
+  const isCombobox = mode === "combobox";
   // Roving-keyboard list surfaces: a menu of actions or a listbox of options. A "dialog" popover holds
   // arbitrary focusable content (its own Tab order), and "hover" is a passive tooltip — neither roves.
   const isNav = mode === "menu" || mode === "listbox";
+  // Surfaces that host a navigable item list (registry + list-navigation): the roving menu/listbox AND
+  // the virtual-nav combobox. The combobox navigates WITHOUT moving DOM focus (see below), so it is kept
+  // out of `isNav` (which also gates the focus trap + typeahead + roving tabindex) and folded in here.
+  const roves = isNav || isCombobox;
   // null when not inside a <FloatingTree> — the hook still works, just without nested-layer awareness.
   const nodeId = useFloatingNodeId();
 
@@ -143,6 +164,19 @@ export function useAnchoredPopover(opts: AnchoredPopoverOptions) {
             }),
           ]
         : []),
+      // A combobox panel matches the field's width (with a sane floor for a very narrow rail); its inner
+      // scroll box owns the height cap. `rects.reference` is the POSITION reference — the whole chips+input
+      // field box (the caller mounts it via setPositionReference), not the bare input.
+      ...(isCombobox
+        ? [
+            size({
+              padding: 8,
+              apply({ rects, elements }) {
+                elements.floating.style.width = `${Math.max(rects.reference.width, 192)}px`;
+              },
+            }),
+          ]
+        : []),
       hide({ padding: 8 }),
     ],
   });
@@ -156,7 +190,9 @@ export function useAnchoredPopover(opts: AnchoredPopoverOptions) {
     }
   }, [opts.open]);
 
-  const click = useClick(context, { enabled: !isHover });
+  // A combobox opens from the field's own focus/typing (wired by <Combobox>), never a click-to-toggle —
+  // a click on the input must place the caret, not close the just-opened list.
+  const click = useClick(context, { enabled: !isHover && !isCombobox });
   const hover = useHover(context, {
     enabled: isHover,
     move: false,
@@ -170,9 +206,19 @@ export function useAnchoredPopover(opts: AnchoredPopoverOptions) {
   // stopPropagation the Escape away from a Modal/player underneath, or double-close both.) Outside-
   // press stays with floating-ui (tree-aware).
   const dismiss = useDismiss(context, { escapeKey: false });
-  const role = useRole(context, { role: opts.role ?? (isHover ? "tooltip" : "menu") });
+  // `role:"combobox"` makes Floating UI wire the whole typeable-combobox ARIA tree: the reference input
+  // → role=combobox + aria-expanded/controls/autocomplete + aria-activedescendant (from the virtual nav),
+  // the surface → role=listbox, the items → role=option + their option ids. (`combobox` maps to the
+  // `listbox` aria-role internally.) So <Combobox> sets NO aria-* by hand.
+  const role = useRole(context, {
+    role: opts.role ?? (isHover ? "tooltip" : isCombobox ? "combobox" : "menu"),
+  });
   const listNav = useListNavigation(context, {
-    enabled: isNav,
+    enabled: roves,
+    // Virtual navigation for a combobox: DOM focus stays on the text input while ↑/↓ move an
+    // `aria-activedescendant` pointer over the options (the handler rides on getReferenceProps → the
+    // input). A menu/listbox uses real roving focus instead.
+    virtual: isCombobox,
     listRef: elementsRef,
     activeIndex,
     // Keyboard (and pointer, when floating-ui owns it) navigation takes the visual highlight back from
@@ -188,12 +234,15 @@ export function useAnchoredPopover(opts: AnchoredPopoverOptions) {
     // `isListIndexDisabled`.) No explicit index list needed.
     loop: true,
     // Focus the first item on open for BOTH click and keyboard (the default 'auto' skips pointer-opens,
-    // which strands focus on the menu container — arrows then can't enter the roving list at all).
-    focusItemOnOpen: true,
-    // A menu that hosts a free-text input must NOT pull focus onto a list item when the pointer merely
-    // passes over it (the library default) — that blurs the input mid-typing and mis-routes the next
-    // Enter to the hovered item. Turned off together with typeahead for such menus.
-    focusItemOnHover: !opts.hostsInput,
+    // which strands focus on the menu container — arrows then can't enter the roving list at all). A
+    // combobox opens with NO active item — the caret is in the input, and the first ↓ lands on the first
+    // option; auto-highlighting item 0 on open would fight the typed query.
+    focusItemOnOpen: isCombobox ? false : true,
+    // A menu that hosts a free-text input, and every combobox, must NOT pull focus onto a list item when
+    // the pointer merely passes over it (the library default) — that blurs the input mid-typing and
+    // mis-routes the next Enter to the hovered item. The visual hover highlight is driven off hoverIndex
+    // instead (see PopoverItem), so the pointer still highlights without stealing the caret.
+    focusItemOnHover: isCombobox ? false : !opts.hostsInput,
   });
   const typeahead = useTypeahead(context, {
     enabled: isNav && (opts.typeahead ?? true) && !opts.hostsInput,
@@ -222,6 +271,8 @@ export function useAnchoredPopover(opts: AnchoredPopoverOptions) {
     nodeId,
     mode,
     isNav,
+    isCombobox,
+    roves,
     open: opts.open,
     selectedIndex: opts.selectedIndex ?? null,
     refs,
@@ -245,6 +296,9 @@ interface PopoverListContextValue {
   highlightIndex: number | null;
   setHoverIndex: (index: number | null) => void;
   getItemProps: AnchoredPopover["getItemProps"];
+  /** Combobox surface: items are navigated VIRTUALLY (aria-activedescendant), so a <PopoverItem> never
+   *  takes DOM focus (roving tabindex off) and keeps the caret in the input on click. */
+  virtual: boolean;
 }
 const PopoverListContext = createContext<PopoverListContextValue | null>(null);
 
@@ -302,6 +356,12 @@ export function PopoverItem({
   label?: string;
 } & Omit<ButtonHTMLAttributes<HTMLButtonElement>, "onSelect" | "role" | "children" | "className">) {
   const ctx = useContext(PopoverListContext);
+  const virtual = ctx?.virtual ?? false;
+  // A virtual (combobox) option needs a STABLE DOM id from first render: the input's aria-activedescendant
+  // is set to the active option's `.id` when the arrow handler reads it, so the id must already be there
+  // (Floating UI's own on-activation id assignment races the re-render and lands empty through our
+  // indirection). A menu/listbox item uses roving DOM focus instead and needs no id.
+  const generatedId = useId();
   const textLabel = label ?? (typeof children === "string" ? children : undefined);
   const { ref, index } = useListItem({ label: textLabel });
   // Roving tabindex / DOM focus follow the KEYBOARD position (activeIndex); the visible highlight
@@ -309,12 +369,12 @@ export function PopoverItem({
   const focusActive = ctx?.activeIndex === index;
   const visualActive = ctx?.highlightIndex === index;
 
-  const ariaProps =
-    role === "menuitemradio" || role === "menuitemcheckbox"
-      ? { role, "aria-checked": !!checked }
-      : role === "option"
-        ? { role, "aria-selected": !!selected }
-        : { role };
+  // The checked/selected state is rendered as an EXPLICIT attribute after {...handlers} below (so it
+  // wins): for a combobox `role:"combobox"` makes getItemProps emit its own `aria-selected` off the
+  // single selectedIndex, which is always false for a MULTI-select — our per-value truth must override.
+  const ariaChecked =
+    role === "menuitemradio" || role === "menuitemcheckbox" ? !!checked : undefined;
+  const ariaSelected = role === "option" ? !!selected : undefined;
 
   // Route the caller's own props (onClick, onFocus, …) THROUGH floating-ui's item-prop getter, which
   // composes handlers rather than dropping them — spreading `{...rest}` separately would let the
@@ -332,19 +392,37 @@ export function PopoverItem({
     rest.onMouseMove?.(e);
     if (ctx && !disabled && index != null && ctx.highlightIndex !== index) ctx.setHoverIndex(index);
   };
+  // In a combobox, clicking an option must NOT move DOM focus off the input (that would close the list
+  // and drop the caret) — preventDefault the mousedown so focus stays put; the onClick still selects.
+  const mergedMouseDown = (e: React.MouseEvent<HTMLButtonElement>) => {
+    rest.onMouseDown?.(e);
+    if (virtual) e.preventDefault();
+  };
   const handlers = ctx
-    ? ctx.getItemProps({ ...rest, onClick: mergedClick, onMouseMove: mergedMouseMove })
-    : { ...rest, onClick: mergedClick };
+    ? ctx.getItemProps({
+        ...rest,
+        onClick: mergedClick,
+        onMouseMove: mergedMouseMove,
+        onMouseDown: mergedMouseDown,
+      })
+    : { ...rest, onClick: mergedClick, onMouseDown: mergedMouseDown };
 
   return (
     <button
       ref={ref}
       type="button"
-      {...ariaProps}
+      role={role}
       {...handlers}
-      // These win over anything in `handlers` — the roving tabindex must not be a caller override,
-      // and disabled/className/data-active are the platform's to set.
-      tabIndex={focusActive ? 0 : -1}
+      // A virtual option carries its own stable id (the aria-activedescendant target); it wins over any
+      // id Floating UI's getItemProps would inject on activation.
+      id={virtual ? generatedId : undefined}
+      // These win over anything in `handlers` — the roving tabindex must not be a caller override, the
+      // checked/selected truth must beat getItemProps' single-select guess, and disabled/className/
+      // data-active are the platform's to set. A virtual (combobox) item never holds DOM focus, so its
+      // tabindex is always -1; navigation is by aria-activedescendant.
+      aria-checked={ariaChecked}
+      aria-selected={ariaSelected}
+      tabIndex={virtual ? -1 : focusActive ? 0 : -1}
       data-active={visualActive ? "true" : undefined}
       disabled={disabled}
       className={`outline-hidden ${
@@ -409,6 +487,8 @@ function PopoverSurfaceInner({
     isPositioned,
     mode,
     isNav,
+    isCombobox,
+    roves,
     selectedIndex,
     activeIndex,
     highlightIndex,
@@ -441,9 +521,10 @@ function PopoverSurfaceInner({
   if (ariaLabel) delete floatingProps["aria-labelledby"];
 
   const zClass = mode === "hover" ? "z-tooltip" : "z-popover";
-  // Everything but a passive hover card manages focus by default (trap into the surface, return to
-  // the trigger on close).
-  const managed = focusManaged ?? mode !== "hover";
+  // A menu/listbox/dialog traps focus into the surface (and returns it on close). A hover card is
+  // passive, and a COMBOBOX must leave focus in the input (its list is navigated virtually) — neither
+  // is focus-managed.
+  const managed = focusManaged ?? (mode !== "hover" && !isCombobox);
 
   const surface = (
     <div
@@ -477,11 +558,11 @@ function PopoverSurfaceInner({
     </div>
   );
 
-  // Menu/listbox surfaces host the item registry (FloatingList) + active-state context so nested
-  // <PopoverItem>s can self-register and rove.
-  const positioned = isNav ? (
+  // Menu/listbox AND combobox surfaces host the item registry (FloatingList) + active-state context so
+  // nested <PopoverItem>s can self-register and rove/aria-activedescendant.
+  const positioned = roves ? (
     <PopoverListContext.Provider
-      value={{ activeIndex, highlightIndex, setHoverIndex, getItemProps }}
+      value={{ activeIndex, highlightIndex, setHoverIndex, getItemProps, virtual: isCombobox }}
     >
       <FloatingList elementsRef={elementsRef} labelsRef={labelsRef}>
         {surface}