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/AccountPanel.tsx

@@ -13,6 +13,7 @@ import { copyText } from "../lib/clipboard";
 import { formatDateTime } from "../lib/format";
 import { invalidateUserAccess } from "../lib/adminUsers";
 import type { AdminUserAccess, AdminUserRow } from "../lib/api/admin";
+import { FocusSafeButton } from "./ui/FocusSafeButton";
 
 // The admin's answer to "why can this person not get in?", and the place every recovery action for
 // one account lives (E12 · S5, design option C).
@@ -195,17 +196,17 @@ export default function AccountPanel({
           </div>
           <div className="space-y-2">
             {a.can_activate && (
-              <button
+              <FocusSafeButton
                 onClick={() => activate.mutate()}
                 disabled={activate.isPending}
                 className="w-full glass-card glass-hover flex items-center gap-2 px-3 py-2.5 rounded-lg text-xs border border-accent/40 text-accent disabled:opacity-50 transition"
               >
                 <Check className="w-4 h-4 shrink-0" />
                 <span className="flex-1 text-left">{t("users.account.activate")}</span>
-              </button>
+              </FocusSafeButton>
             )}
 
-            <button
+            <FocusSafeButton
               onClick={() => resend.mutate()}
               // The demo account's address is never confirmed, and the server refuses to mail it — as
               // it refuses it a set-password link below (deep-review E11 round 3).
@@ -222,9 +223,9 @@ export default function AccountPanel({
               {a.email_configured && a.email_verified && (
                 <span className="text-muted">{t("users.account.alreadyConfirmed")}</span>
               )}
-            </button>
+            </FocusSafeButton>
 
-            <button
+            <FocusSafeButton
               onClick={() => issue.mutate()}
               disabled={issue.isPending || user.is_demo}
               className="w-full glass-card glass-hover flex items-center gap-2 px-3 py-2.5 rounded-lg text-xs border border-accent/40 text-accent disabled:opacity-50 transition"
@@ -233,7 +234,7 @@ export default function AccountPanel({
               <span className="flex-1 text-left">
                 {link ? t("users.account.setPasswordAgain") : t("users.account.setPassword")}
               </span>
-            </button>
+            </FocusSafeButton>
           </div>
 
           {link && (