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

@@ -68,6 +68,9 @@ import { filterRows, isActive, type Column, type FilterMap } from "../lib/tableC
 import { GRIP_KEY, playlistColumns } from "./playlistColumns";
 import { useSortableA11y, useSortableItem } from "./ui/sortableA11y";
 import { DragHandle } from "./ui/DragHandle";
+import { Input } from "./ui/Input";
+import { CheckRow } from "./ui/NativeControls";
+import { useReturnFocus } from "./ui/useReturnFocus";
 
 // The playlist detail is a HYBRID table (E4 S4): real sortable/filterable column headers over a
 // body that is still a drag-reorderable @dnd-kit list.
@@ -170,6 +173,7 @@ export default function Playlists() {
   const confirm = useConfirm();
   const plActions = usePlaylistActions();
   const [renaming, setRenaming] = useState(false);
+  const renameFocus = useReturnFocus(renaming);
   const [renameValue, setRenameValue] = useState("");
   // The stored order is undoable: drag and "save this order" both go through `order.set`, so each
   // is reversible (buttons + Ctrl+Z/Y). onApply persists the new order to the server.
@@ -869,23 +873,31 @@ export default function Playlists() {
               <div className="min-w-0 flex-1">
                 <div className="flex items-center gap-2 min-w-0">
                   {renaming ? (
-                    <input
+                    <Input
+                      className="flex-1 text-lg font-semibold"
+                      size="heading"
                       autoFocus
                       value={renameValue}
                       onChange={(e) => setRenameValue(e.target.value)}
                       onBlur={saveRename}
                       onKeyDown={(e) => {
-                        if (e.key === "Enter") saveRename();
-                        if (e.key === "Escape") setRenaming(false);
+                        if (e.key === "Enter") {
+                          renameFocus.arm();
+                          saveRename();
+                        }
+                        if (e.key === "Escape") {
+                          renameFocus.arm();
+                          setRenaming(false);
+                        }
                       }}
                       aria-label={t("playlists.rename")}
-                      className="min-w-0 flex-1 text-lg font-semibold bg-surface border border-border rounded-md px-2 py-0.5 focus:outline-hidden focus:ring-2 focus:ring-accent/40"
                     />
                   ) : (
                     <>
                       <h2 className="text-lg font-semibold truncate">{plName(detail)}</h2>
                       {editable && (
                         <IconButton
+                          ref={renameFocus.target}
                           onClick={() => {
                             setRenameValue(detail.name);
                             setRenaming(true);
@@ -974,15 +986,13 @@ export default function Playlists() {
                       <span aria-hidden="true" className="text-xs text-muted/40">
                         ·
                       </span>
-                      <label className="inline-flex items-center gap-1.5 text-xs text-muted cursor-pointer select-none">
-                        <input
-                          type="checkbox"
-                          checked={groupBy}
-                          onChange={(e) => setGroupBy(e.target.checked)}
-                          className="accent-accent"
-                        />
+                      <CheckRow
+                        checked={groupBy}
+                        onChange={setGroupBy}
+                        className="text-xs text-muted"
+                      >
                         {t("playlists.groupByChannel")}
-                      </label>
+                      </CheckRow>
                       {viewActive && (
                         <Button
                           variant="link-muted"