feat(design): every button on its family, the chip primitive, the lint rule (E28 S3b2)

The second half of the button sweep: the remaining hand-rolled buttons in
feature components, the design lab and the components/ui composites now
stand on Button, IconButton, Pressable, Chip or DragHandle.

- Chip + DismissibleChip (filter / token / tag / suggest / ghost, 24px
  floor, 44 on touch) replace five chip geometries; FilterChipGroup
  renders Chips; overflow lanes measure a mirror painted by chipClass.
- The Plex control row is IconButton's player rung (36, 20px glyph,
  round, overlay; 44 on touch); the YT modal bar is on the sm rung with
  pressed cycle toggles and names that survive a folded label.
- New variants: IconButton ghost-accent, danger-soft; Button warn on a
  new state-warn utility. The .btn-{tone} recipes and btnCls are gone.
- Fixed on the way: membership rows (collection editor, Plex playlist
  add) announce checked/mixed; a one-letter tag chip was 21px wide;
  descriptionLinks moved out of lib/ (it renders components).
- local/button-primitive: a raw <button>/<FocusSafeButton> outside the
  control-primitive files is a lint error (contract-tested, seen red).

frontend/src/components/ui/tableHeader.tsx

@@ -8,6 +8,9 @@ import { type SortState } from "../../lib/columnSort";
 import { isActive, type Column, type FilterMap } from "../../lib/tableColumns";
 import { alignClass } from "./tableAlign";
 import { useStickyTop } from "./stickyTop";
+import { Button } from "./Button";
+import { IconButton } from "./IconButton";
+import { Pressable } from "./Pressable";
 
 // The column-header machinery — the sortable header row with its filter funnel + popover — lifted
 // OUT of DataTable so a non-DataTable body can render under the same headers. The column contract
@@ -75,17 +78,16 @@ function FilterFunnel<T>({
 
   return (
     <>
-      <button
+      <IconButton
+        variant={filterOn ? "ghost-accent" : "ghost"}
         ref={pop.refs.setReference}
         {...pop.getReferenceProps()}
-        aria-label={t("datatable.filter")}
-        // Generous padding: the icon alone was a 14x14 hit target, the smallest in the app.
-        className={`-m-1.5 p-1.5 transition ${
-          filterOn ? "text-accent" : "text-muted/60 hover:text-fg"
-        }`}
+        label={t("datatable.filter")}
+        // The icon alone was a 14x14 hit target, the smallest in the app; the sm rung is 28.
+        className="-my-1.5"
       >
-        <ListFilter className="w-3.5 h-3.5" />
-      </button>
+        <ListFilter className="size-3.5!" />
+      </IconButton>
       <PopoverSurface
         popover={pop}
         ariaLabel={col.header}
@@ -167,12 +169,13 @@ function FilterFunnel<T>({
           </FilterOptionList>
         )}
         {filterOn && (
-          <button
+          <Button
+            variant="link-muted"
             onClick={() => onApply(col.key, f.kind === "multi" ? [] : "")}
-            className="mt-1.5 w-full text-xs text-muted hover:text-accent transition"
+            className="mt-1.5 w-full text-xs"
           >
             {t("datatable.clear")}
-          </button>
+          </Button>
         )}
       </PopoverSurface>
     </>
@@ -229,7 +232,7 @@ export function ColumnHead<T>({
                     focusable no-op button, which put unlabeled dead stops in the tab order —
                     two of them per playlist table, whose grip and actions headers are empty. */}
                 {col.sortable ? (
-                  <button
+                  <Pressable
                     onClick={() => onToggleSort(col.key)}
                     className="inline-flex items-center gap-1 hover:text-fg cursor-pointer"
                   >
@@ -241,7 +244,7 @@ export function ColumnHead<T>({
                       ) : (
                         <ArrowDown className="w-3 h-3" />
                       ))}
-                  </button>
+                  </Pressable>
                 ) : (
                   <span>{col.header}</span>
                 )}