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/ui/FocusSafeButton.tsx

@@ -0,0 +1,66 @@
+import { forwardRef, useCallback, useRef, useState, type ButtonHTMLAttributes } from "react";
+
+// A `<button>` whose `disabled` never throws the focus out of the page.
+//
+// A focused button that turns natively disabled loses the focus — Chrome moves it to <body>
+// (measured, E11 S2) — and the app disables the very button that was just pressed on ~60 sites (a
+// mutation pending, a form gone clean after its save), so a keyboard user was dropped out of the page
+// on every submit. While THIS button holds the focus, `disabled` (and `busy`) is expressed as
+// `aria-disabled` plus a click guard instead: still focusable, announced as unavailable, and not
+// activatable — its preventDefault also cancels a form's implicit submission, which is a click on the
+// default button. The native attribute applies again once the focus is elsewhere (at the blur; in
+// a window without focus, which fires no blur, at the next render).
+//
+// Unstyled on purpose: `ui/Button` is built on it, and a hand-rolled `<button>` swaps its tag for
+// this one keeping its classes. The dimmed look of the soft state is one rule in index.css
+// (`[data-focus-safe][aria-disabled="true"]`), since a caller's `disabled:*` utilities match only the
+// native attribute.
+export const FocusSafeButton = forwardRef<
+  HTMLButtonElement,
+  ButtonHTMLAttributes<HTMLButtonElement> & {
+    /** Working: unavailable and announced as busy, whether focused or not. */
+    busy?: boolean;
+  }
+>(function FocusSafeButton({ disabled, busy = false, onClick, onFocus, onBlur, ...rest }, ref) {
+  const [focusEvent, setFocusEvent] = useState(false);
+  const node = useRef<HTMLButtonElement | null>(null);
+  const setNode = useCallback(
+    (el: HTMLButtonElement | null) => {
+      node.current = el;
+      if (typeof ref === "function") ref(el);
+      else if (ref) ref.current = el;
+    },
+    [ref],
+  );
+  // Focused by the event OR by the document's own answer at render time: when the window itself is
+  // not focused (another app in front) `.focus()` moves `activeElement` but fires no focus event
+  // (measured in Chrome), and the button disabled in that state lost the focus all the same.
+  const focused =
+    focusEvent || (!!node.current && node.current.ownerDocument.activeElement === node.current);
+  const soft = busy || (!!disabled && focused);
+  return (
+    <button
+      ref={setNode}
+      {...rest}
+      data-focus-safe=""
+      disabled={!!disabled && !focused}
+      aria-disabled={soft || undefined}
+      aria-busy={busy || undefined}
+      onClick={(e) => {
+        if (soft) {
+          e.preventDefault();
+          return;
+        }
+        onClick?.(e);
+      }}
+      onFocus={(e) => {
+        setFocusEvent(true);
+        onFocus?.(e);
+      }}
+      onBlur={(e) => {
+        setFocusEvent(false);
+        onBlur?.(e);
+      }}
+    />
+  );
+});