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

@@ -1,5 +1,6 @@
 import { useState, type ReactNode } from "react";
-import { ArrowDown, ArrowUp, Check, ChevronDown } from "lucide-react";
+import { ArrowDown, ArrowUp, Check } from "lucide-react";
+import { SelectTrigger } from "./SelectTrigger";
 import { pickSort, type SortOption, type SortState } from "../../lib/columnSort";
 import { PopoverItem, PopoverSurface } from "./AnchoredPopover";
 import { useAnchoredPopover } from "./anchoredPopoverHooks";
@@ -64,8 +65,10 @@ export default function SortControl({
 
   return (
     <>
-      <button
-        type="button"
+      <SelectTrigger
+        context="toolbar"
+        open={open}
+        label={label}
         ref={pop.refs.setReference}
         {...pop.getReferenceProps()}
         // Carry the active sort key AND direction in the accessible name (the visible arrow is
@@ -74,21 +77,18 @@ export default function SortControl({
         aria-label={`${label}: ${summary}${
           showArrow && active ? `, ${active.dir === "asc" ? ascLabel : descLabel}` : ""
         }`}
-        className={`glass-card glass-hover inline-flex items-center gap-1.5 rounded-full border px-3 py-1 text-sm transition ${
-          open ? "border-accent" : "border-border"
-        }`}
-      >
-        <span className="text-muted">{label}:</span>
-        <span className="text-fg">{summary}</span>
-        {showArrow &&
+        trailing={
+          showArrow &&
           active &&
           (active.dir === "asc" ? (
             <ArrowUp className="h-3.5 w-3.5 shrink-0 text-muted" aria-hidden="true" />
           ) : (
             <ArrowDown className="h-3.5 w-3.5 shrink-0 text-muted" aria-hidden="true" />
-          ))}
-        <ChevronDown className="h-3.5 w-3.5 shrink-0 text-muted" aria-hidden="true" />
-      </button>
+          ))
+        }
+      >
+        {summary}
+      </SelectTrigger>
 
       <PopoverSurface
         popover={pop}