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/fieldStyles.ts

@@ -0,0 +1,41 @@
+import clsx from "clsx";
+
+// The A4 field frame (docs/DESIGN.md): one bordered box for every text field, whether the frame is the
+// <input> itself (`Input`, `Textarea`) or a wrapper that holds an icon, chips or a clear button beside
+// a bare `InnerInput` (a log search, the Combobox). `focus-within` covers both: an input is within
+// itself. Its own file so `Input.tsx` exports components only (react-refresh).
+
+export type FieldSize =
+  | "md" // 32 — a form field, lines up with a `md` Button
+  | "sm" // 28 — a toolbar search, a field in a popover or an inline rename, lines up with the toolbar row
+  | "xs" // 24 — inside a table row or a pager
+  | "heading" // an inline rename of a page title: the field takes the heading's own type (the caller's)
+  | "free"; // the caller lays the box out (a multi-line field, a chip field that wraps)
+
+// On a coarse pointer the text is 1rem, so a tablet browser does not zoom the page on focus (not on a
+// heading, whose type is already larger).
+const SIZES: Record<FieldSize, string> = {
+  md: "h-8 px-3 text-sm pointer-coarse:text-base",
+  sm: "h-7 px-2.5 text-sm pointer-coarse:text-base",
+  xs: "h-6 px-2 text-xs pointer-coarse:text-base",
+  heading: "px-2 py-0.5",
+  free: "",
+};
+
+// The edge is --edge-strong (the fg mixed 55% into the bg, ≥ 3:1 on every scheme — WCAG 1.4.11); focus
+// turns it into a 2px accent edge (the border plus a 1px ring), the outlined-field convention. Invalid
+// is the danger edge, focused or not. On a coarse pointer the box grows to the 44 touch target.
+const BASE =
+  "min-w-0 border edge-strong bg-transparent text-fg placeholder:text-muted transition-colors " +
+  "focus-within:border-accent focus-within:ring-1 focus-within:ring-accent focus-within:outline-hidden " +
+  "aria-invalid:border-danger aria-invalid:ring-danger has-aria-invalid:border-danger has-aria-invalid:ring-danger " +
+  "disabled:cursor-not-allowed disabled:opacity-50 has-disabled:cursor-not-allowed has-disabled:opacity-50 " +
+  "pointer-coarse:min-h-(--touch-target)";
+
+export function fieldClass({
+  size = "md",
+  pill = false,
+}: { size?: FieldSize; pill?: boolean } = {}) {
+  // A4: a toolbar search is a pill; every other field r8.
+  return clsx(BASE, SIZES[size], pill ? "rounded-full" : "rounded-lg");
+}