refactor(ui): the popover engine and every render-phase ref write compile under the React Compiler

E32 S3. The compiler skipped 93 functions; it now skips 29 (try/finally shapes, two suppressions,
VirtualGrid). react-hooks/refs hits 245 -> 31.

- Popover engine: `ref={pop.refs.setReference}` made the compiler treat the whole popover handle as
  a ref, so every component holding one was skipped (21 call sites, the engine and its surface
  among them). The setter is destructured now; the same for useScrollFade and useReturnFocus.
- Render-phase `ref.current = x` writes moved to `useEffectEvent` where only effects read them,
  else to the new `useLatest` (written in a layout effect) / `useStableCallback`.
- FocusSafeButton (under every Button) read the focused element during render; it reads it through
  useSyncExternalStore, which React asks on every render instead of a cached memo.

Bugs this surfaced, fixed:
- Combobox: a chip could keep showing its raw id. The label cache was a ref an effect filled after
  the render that needed it; it is state merged during render now (test seen RED).
- useUndoable rendered from a ref plus a forced re-render; compiled, that memoizes a stale value.
  The history is state now, mirrored in a ref for the stable callbacks.
- ConfigPanel and the saved-views editor re-seeded their drafts in an effect, painting the stale
  draft for a frame; both adjust during render against the remembered key.
- Toaster's handover is written after commit instead of during render; a new test pins that the
  inherited set is taken once, at the takeover (seen RED on a per-render re-read).
- IssueComposer mutated a ref prop as a one-shot focus token; it is plain state.
- PlexBrowse wrote its info-scroll memory from an effect declared before the ref, past its own
  "one writer" rule; the writer comes first now and the effect goes through it.

The compiler ratchet drops to the measured 29 and now also requires FocusSafeButton and the popover
engine to compile.

frontend/src/components/ConfigPanel.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useId, useMemo, useRef, useState } from "react";
+import { useId, useMemo, useState } from "react";
 import { qk } from "../lib/queryKeys";
 import { useTranslation } from "react-i18next";
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
@@ -28,6 +28,23 @@ import { SURFACE } from "./ui/surfaces";
 // registry's own order (`sysconfig.SPECS`), so a new group lands where the backend puts it instead of
 // needing a second, hand-kept order list here.
 
+/** The admin's draft, plus the secrets marked to reset-to-default on the next Save (that can't be
+ *  expressed by clearing the field: an empty secret field means "leave unchanged"). Re-seeded from
+ *  `baseline` DURING render when `seedKey` changes, never on every new baseline: an unchanged refetch
+ *  produces a new object, and re-seeding on that is exactly the clobbering of an in-progress draft
+ *  that CB2 was about. (It was an effect: the first frame after a load painted the empty draft.) */
+function useSeededDraft(baseline: Record<string, string>, seedKey: string) {
+  const [draft, setDraft] = useState<Record<string, string>>({});
+  const [secretReset, setSecretReset] = useState<Record<string, boolean>>({});
+  const [seededFor, setSeededFor] = useState<string | null>(null);
+  if (seededFor !== seedKey) {
+    setSeededFor(seedKey);
+    setDraft(baseline);
+    setSecretReset({});
+  }
+  return { draft, setDraft, secretReset, setSecretReset };
+}
+
 export default function ConfigPanel() {
   const { t } = useTranslation();
   const panel = useTabPanel();
@@ -46,13 +63,9 @@ export default function ConfigPanel() {
     return m;
   }, [items]);
 
-  const [draft, setDraft] = useState<Record<string, string>>({});
-  // Secrets the admin marked to reset-to-default on the next Save (can't be expressed by
-  // clearing the field, since an empty secret field means "leave unchanged").
-  const [secretReset, setSecretReset] = useState<Record<string, boolean>>({});
   const [saveState, setSaveState] = useState<SaveState>("idle");
   // Bumped after our own save so the draft re-seeds from fresh server values; a plain mid-edit
-  // refetch does NOT (see the effect below).
+  // refetch does NOT (see the seed below).
   const [reseedToken, setReseedToken] = useState(0);
   // One tab per config group (persisted). Called before the loading guard so hook order is
   // stable; the active id is clamped to a real group at render time once data has loaded.
@@ -63,15 +76,10 @@ export default function ConfigPanel() {
   // load, registry change) or an explicit post-save bump — so a refetch that resolves mid-edit
   // (e.g. an invalidation) can no longer clobber the admin's in-progress draft (CB2).
   const dataVersion = useMemo(() => items.map((i) => i.key).join("|"), [items]);
-  // The baseline is read through a ref, not named as a dependency: an unchanged refetch produces a
-  // new object, and re-seeding on that is exactly the clobbering of an in-progress draft that CB2
-  // was about. `dataVersion` (the config SHAPE) and the post-save token are the real triggers.
-  const baselineRef = useRef(baseline);
-  baselineRef.current = baseline;
-  useEffect(() => {
-    setDraft(baselineRef.current);
-    setSecretReset({});
-  }, [dataVersion, reseedToken]);
+  const { draft, setDraft, secretReset, setSecretReset } = useSeededDraft(
+    baseline,
+    `${reseedToken}:${dataVersion}`,
+  );
 
   const isDirty = (it: ConfigItem): boolean => {
     if (it.secret) return (draft[it.key] ?? "").trim() !== "" || !!secretReset[it.key];