feat(design): the field family, the dropdown trigger, native controls, the no-raw-input lint rule (E28 S3c)

- ui/Input, Textarea, InnerInput + fieldClass (A4): the >= 3:1 edge, a 2px accent
  focus edge, the danger edge for invalid, md/sm/xs/heading rungs, 1rem and 44 on touch
- ui/SelectTrigger (A5): SortControl, FilterSelect, the view switcher and the date
  filter on one trigger, a pill in a toolbar, r8 in a form
- ui/NativeControls (A6): Checkbox, CheckRow, Slider, ColorInput
- every raw input swept (~100 sites); inputCls retired; local/input-primitive
- useReturnFocus: an in-place editor hands the focus back to its trigger on
  Enter/Escape (the playlist and Plex title renames, the priority number);
  the Plex playlist rename gains Escape and an accessible name
- back to top: a round 48 FAB (owner decision); DESIGN.md A2 and the log

frontend/src/components/PlexCollectionView.tsx

@@ -23,6 +23,8 @@ import { LoadingState, StateMessage } from "./ui/QueryState";
 import NavGrid from "./ui/NavGrid";
 import { Button } from "./ui/Button";
 import { IconButton } from "./ui/IconButton";
+import { Input } from "./ui/Input";
+import { useReturnFocus } from "./ui/useReturnFocus";
 
 // The Collection info page (ask B): a hero (art/title/cert/year-range/count/runtime/summary) + the
 // ordered member grid, a Play-all / Shuffle over the playable leaves, and — for a NON-external,
@@ -90,6 +92,7 @@ export default function PlexCollectionView({
 
   const [expanded, setExpanded] = useState(false);
   const [renaming, setRenaming] = useState(false);
+  const renameFocus = useReturnFocus(renaming);
   const [name, setName] = useState("");
   const [adding, setAdding] = useState(false);
   const [busy, setBusy] = useState(false);
@@ -268,17 +271,24 @@ export default function PlexCollectionView({
             customizeMenu={null}
           >
             {renaming ? (
-              <input
+              <Input
+                className="w-full text-2xl font-semibold"
+                size="heading"
                 autoFocus
                 value={name}
                 onChange={(e) => setName(e.target.value)}
                 onBlur={doRename}
                 onKeyDown={(e) => {
-                  if (e.key === "Enter") doRename();
-                  if (e.key === "Escape") setRenaming(false);
+                  if (e.key === "Enter") {
+                    renameFocus.arm();
+                    doRename();
+                  }
+                  if (e.key === "Escape") {
+                    renameFocus.arm();
+                    setRenaming(false);
+                  }
                 }}
                 aria-label={t("plex.collection.rename")}
-                className="glass-card w-full rounded-lg px-2 py-1 text-2xl font-semibold focus:outline-hidden focus:ring-2 focus:ring-accent/40"
               />
             ) : (
               <div className="flex items-center gap-2">
@@ -345,6 +355,7 @@ export default function PlexCollectionView({
               {canEdit && (
                 <>
                   <ActionBtn
+                    ref={renameFocus.target}
                     onClick={() => {
                       setName(d.title);
                       setRenaming(true);
@@ -470,13 +481,13 @@ function AddItemPanel({
     <div className="glass-card mb-6 rounded-2xl p-4">
       <div className="mb-3 flex items-center gap-2">
         <Search className="h-4 w-4 text-muted" />
-        <input
+        <Input
+          className="flex-1"
           autoFocus
           value={term}
           onChange={(e) => setTerm(e.target.value)}
           placeholder={t("plex.collection.addSearch")}
           aria-label={t("plex.collection.addSearch")}
-          className="glass-card flex-1 rounded-lg px-3 py-1.5 text-sm focus:outline-hidden focus:ring-2 focus:ring-accent/40"
         />
         <IconButton size="md" onClick={onClose} label={t("common.close")}>
           <X />