fix(ui): no button drops the keyboard focus when its own action disables it

A focused button that turns natively disabled loses the focus to <body> in
Chrome. The app disables the very button that was pressed on ~60 sites — a
mutation pending, a pager at its last page, undo with nothing left, a player
at the end of its queue, a form gone clean — so a keyboard user was thrown
out of the page on every such press.

One primitive instead of a fix per site: ui/FocusSafeButton renders a
focused-and-disabled (or busy) button as aria-disabled with a click guard,
and applies the native attribute again once the focus is elsewhere. It asks
the document at render time as well as listening for focus events, because
a window without focus fires none (measured). ui/Button and ui/form's Switch
are built on it; 57 hand-rolled buttons swapped their tag for it keeping
their classes, and three hand-copies of the rule (the channel page's Block
and Hide, ChannelDiscovery's Subscribe) now pass `busy`. The soft state's
dim look is one rule in index.css.

`local/focus-safe-disabled` refuses a new raw <button disabled>, pinned by
focusSafe.contract.test.ts. lib/plexDetailUi moved to components/: it is
components, and lib may not import the primitive.

Measured on localdev in Chrome: the audit log's Next button keeps the focus
on reaching the last page, reads aria-disabled, and the guarded click does
nothing.

frontend/src/components/PlexPlaylistView.tsx

@@ -39,6 +39,7 @@ import { useConfirm } from "./confirmContext";
 import { Button } from "./ui/Button";
 import { LoadingState, StateMessage } from "./ui/QueryState";
 import ViewSwitcher, { type ViewOption } from "./ViewSwitcher";
+import { FocusSafeButton } from "./ui/FocusSafeButton";
 
 // A playlist's items, grouped for readability: movies stay standalone, while a run of episodes from the
 // same show collapses into a season/show group so a whole series doesn't sprawl into an endless flat
@@ -180,14 +181,14 @@ function EpisodeRow({ ep, ctx, dense }: { ep: PlexCard; ctx: Ctx; dense: boolean
         </div>
         <div className="min-w-0 truncate text-[0.8125rem]">{ep.title}</div>
       </button>
-      <button
+      <FocusSafeButton
         onClick={() => ctx.onRemove([ep.id])}
         disabled={ctx.busy}
         className="shrink-0 rounded-sm p-1 text-muted hover:text-danger disabled:opacity-30"
         aria-label="remove"
       >
         <X className="h-4 w-4" />
-      </button>
+      </FocusSafeButton>
     </div>
   );
 }
@@ -223,14 +224,14 @@ function MovieRow({ item, ctx }: { item: PlexCard; ctx: Ctx }) {
           <Play className="h-4 w-4" fill="currentColor" />
         </div>
       </button>
-      <button
+      <FocusSafeButton
         onClick={() => ctx.onRemove([item.id])}
         disabled={ctx.busy}
         className="shrink-0 rounded-sm p-1 text-muted hover:text-danger disabled:opacity-30"
         aria-label="remove"
       >
         <X className="h-4 w-4" />
-      </button>
+      </FocusSafeButton>
     </div>
   );
 }
@@ -285,14 +286,14 @@ function ShowGroup({ block, ctx }: { block: Extract<Block, { kind: "show" }>; ct
             {t("plex.playlist.episodes", { count: block.items.length })}
           </div>
         </button>
-        <button
+        <FocusSafeButton
           onClick={() => ctx.onRemove(block.items.map((i) => i.id))}
           disabled={ctx.busy}
           title={t("plex.playlist.removeShow")}
           className="shrink-0 rounded-sm p-1 text-muted hover:text-danger disabled:opacity-30"
         >
           <X className="h-4 w-4" />
-        </button>
+        </FocusSafeButton>
       </div>
 
       {open && (
@@ -323,14 +324,14 @@ function ShowGroup({ block, ctx }: { block: Extract<Block, { kind: "show" }>; ct
                     <span className="text-2xs font-medium uppercase tracking-wide text-muted">
                       {seasonLabel(s)} · {s.items.length}
                     </span>
-                    <button
+                    <FocusSafeButton
                       onClick={() => ctx.onRemove(s.items.map((i) => i.id))}
                       disabled={ctx.busy}
                       title={t("plex.playlist.removeSeason")}
                       className="ml-1 rounded-sm p-0.5 text-muted hover:text-danger disabled:opacity-30"
                     >
                       <X className="h-3.5 w-3.5" />
-                    </button>
+                    </FocusSafeButton>
                   </div>
                   {sOpen && (
                     <div