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/lib/buttonPrimitive.contract.test.ts

@@ -0,0 +1,48 @@
+import { fileURLToPath } from "node:url";
+
+import { ESLint } from "eslint";
+import { describe, expect, it } from "vitest";
+
+// `local/button-primitive` (eslint.config.js): one primitive per button family (docs/DESIGN.md, E28
+// S3b). 268 hand-rolled buttons were swept onto ui/Button, IconButton, Pressable, Chip and
+// DragHandle; this pins that the rule keeping a new one out actually fires, and where it stands down.
+const RULE = "local/button-primitive";
+const FRONTEND = fileURLToPath(new URL("../../", import.meta.url));
+
+async function hits(source: string, filePath = "src/components/__probe.tsx"): Promise<number> {
+  const eslint = new ESLint({ cwd: FRONTEND });
+  const [result] = await eslint.lintText(source, { filePath });
+  return (result?.messages ?? []).filter((m) => m.ruleId === RULE).length;
+}
+
+describe("a hand-rolled button", () => {
+  it("is refused in a feature component, the lab and lib, raw or focus-safe", async () => {
+    const raw = 'export const A = () => <button className="px-3">x</button>;\n';
+    expect(await hits(raw)).toBe(1);
+    expect(await hits(raw, "src/design-lab/__probe.tsx")).toBe(1);
+    expect(await hits(raw, "src/lib/__probe.tsx")).toBe(1);
+    // …and in a ui/ COMPOSITE: a pager or a side panel is built from the primitives too.
+    expect(await hits(raw, "src/components/ui/Pager.tsx")).toBe(1);
+    expect(
+      await hits(
+        'import { FocusSafeButton } from "./ui/FocusSafeButton";\nexport const B = () => <FocusSafeButton>x</FocusSafeButton>;\n',
+      ),
+    ).toBe(1);
+  });
+
+  it("is allowed only in a control primitive, and the primitives pass everywhere", async () => {
+    for (const file of ["IconButton.tsx", "SegmentedToggle.tsx", "AnchoredPopover.tsx"])
+      expect(
+        await hits("export const C = () => <button>x</button>;\n", `src/components/ui/${file}`),
+      ).toBe(0);
+    // Named like a primitive but outside ui/: still refused.
+    expect(
+      await hits("export const E = () => <button>x</button>;\n", "src/components/Button.tsx"),
+    ).toBe(1);
+    expect(
+      await hits(
+        'import { Button } from "./ui/Button";\nexport const D = () => <Button>x</Button>;\n',
+      ),
+    ).toBe(0);
+  });
+});

frontend/src/lib/descriptionLinks.tsx

@@ -1,150 +0,0 @@
-import type { ReactNode } from "react";
-import type { TFunction } from "i18next";
-
-// Turn a video description into clickable nodes:
-//  - bare timestamps (mm:ss / hh:mm:ss) → seek the inline player
-//  - a YouTube link to the *current* video → seek (to its t= if any)
-//  - a YouTube link to *another* video → load it in the inline player
-//  - emails → mailto:, hashtags → YouTube's hashtag page, other URLs → new tab
-// Pure logic (no React state), factored out of PlayerModal so it's testable on its own.
-const URL_RE = /(https?:\/\/[^\s<>]+)/g;
-// One pass over plain text for the three inline token kinds (email | hashtag | timestamp).
-const INLINE_RE =
-  /([A-Za-z0-9._%+-]+@[A-Za-z0-9-]+\.[A-Za-z0-9.-]+)|(#[\p{L}\p{N}_]+)|(\b(?:\d{1,2}:)?\d{1,2}:\d{2}\b)/gu;
-
-function tsToSeconds(ts: string): number {
-  const parts = ts.split(":").map((n) => parseInt(n, 10));
-  const [a = 0, b = 0, c = 0] = parts; // hh:mm:ss or mm:ss — absent segments default to 0
-  return parts.length === 3 ? a * 3600 + b * 60 + c : a * 60 + b;
-}
-
-// Parse a YouTube `t`/`start` param: "90", "90s", or "1h2m3s".
-function parseStart(t: string | null): number | null {
-  if (!t) return null;
-  if (/^\d+$/.test(t)) return parseInt(t, 10) || null;
-  const m = t.match(/^(?:(\d+)h)?(?:(\d+)m)?(?:(\d+)s)?$/);
-  if (!m) return null;
-  const total =
-    parseInt(m[1] || "0", 10) * 3600 + parseInt(m[2] || "0", 10) * 60 + parseInt(m[3] || "0", 10);
-  return total || null;
-}
-
-// Extract a video id (+ optional start) from a YouTube URL, else null.
-function parseYouTube(url: string): { id: string; start: number | null } | null {
-  let u: URL;
-  try {
-    u = new URL(url);
-  } catch {
-    return null;
-  }
-  const host = u.hostname.replace(/^www\./, "");
-  let id: string | null = null;
-  if (host === "youtu.be") {
-    id = u.pathname.slice(1) || null;
-  } else if (host === "youtube.com" || host === "m.youtube.com" || host === "music.youtube.com") {
-    if (u.pathname === "/watch") id = u.searchParams.get("v");
-    else {
-      const m = u.pathname.match(/^\/(?:shorts|embed|live)\/([^/?#]+)/);
-      if (m) id = m[1] ?? null;
-    }
-  }
-  if (!id) return null;
-  return { id, start: parseStart(u.searchParams.get("t") || u.searchParams.get("start")) };
-}
-
-export function renderDescription(
-  text: string,
-  opts: {
-    currentId: string;
-    onSeek: (seconds: number) => void;
-    onLoadVideo: (id: string, start: number | null) => void;
-    t: TFunction;
-  },
-): ReactNode[] {
-  const { t } = opts;
-  const out: ReactNode[] = [];
-  let key = 0;
-  const linkCls = "text-accent hover:underline break-all";
-  // Tidy YouTube descriptions: drop trailing spaces and remove blank lines entirely
-  // (they're just noise in the popover), keeping single line breaks.
-  const clean = text
-    .replace(/[ \t]+\n/g, "\n")
-    .replace(/\n{2,}/g, "\n")
-    .trim();
-  for (const chunk of clean.split(URL_RE)) {
-    if (/^https?:\/\//.test(chunk)) {
-      const href = chunk.replace(/[.,;:!?)\]]+$/, "");
-      const yt = parseYouTube(href);
-      if (yt) {
-        const sameVideo = yt.id === opts.currentId;
-        out.push(
-          <button
-            key={key++}
-            onClick={() =>
-              sameVideo ? opts.onSeek(yt.start ?? 0) : opts.onLoadVideo(yt.id, yt.start)
-            }
-            className={linkCls}
-            title={sameVideo ? t("player.jumpToTime") : t("player.playInApp")}
-          >
-            {href}
-          </button>,
-        );
-      } else {
-        out.push(
-          <a key={key++} href={href} target="_blank" rel="noreferrer" className={linkCls}>
-            {href}
-          </a>,
-        );
-      }
-      continue;
-    }
-    // Plain text: pull out emails, hashtags and bare timestamps.
-    INLINE_RE.lastIndex = 0;
-    let last = 0;
-    let m: RegExpExecArray | null;
-    while ((m = INLINE_RE.exec(chunk))) {
-      if (m.index > last) out.push(<span key={key++}>{chunk.slice(last, m.index)}</span>);
-      if (m[1]) {
-        // Email — trim trailing punctuation the domain rule may have swallowed.
-        const email = m[1].replace(/[.,;:]+$/, "");
-        out.push(
-          <a key={key++} href={`mailto:${email}`} className={linkCls}>
-            {email}
-          </a>,
-        );
-        if (m[1].length > email.length)
-          out.push(<span key={key++}>{m[1].slice(email.length)}</span>);
-      } else if (m[2]) {
-        // Hashtag → YouTube's hashtag feed (mirrors native YouTube behavior).
-        const tag = m[2].slice(1);
-        out.push(
-          <a
-            key={key++}
-            href={`https://www.youtube.com/hashtag/${encodeURIComponent(tag)}`}
-            target="_blank"
-            rel="noreferrer"
-            className={linkCls}
-          >
-            {m[2]}
-          </a>,
-        );
-      } else {
-        // Reached only when neither m[1] (email) nor m[2] (hashtag) matched, so the third
-        // alternative — the timestamp group — is the one that fired.
-        const ts = m[3]!;
-        out.push(
-          <button
-            key={key++}
-            onClick={() => opts.onSeek(tsToSeconds(ts))}
-            className="text-accent hover:underline"
-          >
-            {ts}
-          </button>,
-        );
-      }
-      last = m.index + m[0].length;
-    }
-    if (last < chunk.length) out.push(<span key={key++}>{chunk.slice(last)}</span>);
-  }
-  return out;
-}