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

@@ -3,6 +3,8 @@ import type { TFunction } from "i18next";
 import type { Video } from "../lib/api";
 import { formatDuration } from "../lib/format";
 import type { Column } from "../lib/tableColumns";
+import { IconButton } from "./ui/IconButton";
+import { Pressable } from "./ui/Pressable";
 
 // Column definitions for the playlist detail table, in their own file like `channelColumns.tsx`.
 //
@@ -56,7 +58,7 @@ export function playlistColumns({
       cardPrimary: true,
       render: (v) => (
         <div className="flex items-center gap-2.5 min-w-0">
-          <button
+          <Pressable
             onClick={() => onPlay(v)}
             aria-label={`${t("card.play")} — ${v.title}`}
             className="relative w-15.5 h-8.75 rounded-sm overflow-hidden bg-surface shrink-0 group"
@@ -67,15 +69,15 @@ export function playlistColumns({
             <span className="absolute inset-0 grid place-items-center bg-black/40 opacity-0 group-hover:opacity-100 group-focus-visible:opacity-100 transition">
               <Play className="w-4 h-4 text-white fill-current" />
             </span>
-          </button>
-          <button
+          </Pressable>
+          <Pressable
             onClick={() => onPlay(v)}
             // The row's "open" element: Enter on a keyboard-walked row (lib/listNav) plays it.
             data-nav-open=""
-            className="min-w-0 flex-1 text-left"
+            className="min-w-0 flex-1"
           >
             <span className="block text-[0.8125rem] text-fg truncate">{v.title}</span>
-          </button>
+          </Pressable>
         </div>
       ),
     },
@@ -129,14 +131,14 @@ export function playlistColumns({
       width: "2.5rem",
       nowrap: true,
       render: (v) => (
-        <button
+        <IconButton
+          variant="danger"
           onClick={() => onRemove(v)}
+          label={t("playlists.removeItemOf", { title: v.title })}
           title={t("playlists.removeItem")}
-          aria-label={t("playlists.removeItemOf", { title: v.title })}
-          className="text-muted hover:text-fg p-1"
         >
-          <X className="w-4 h-4" />
-        </button>
+          <X />
+        </IconButton>
       ),
     });
   }