fix(ui): the palette ranks what you typed, and lib stops leaning on components

Typing "theme" put the channel "The Meltzone Podcast" (matched only through its handle
`@themeltzone`) above every "Theme: …" row, and Enter opened the channel — the palette listed
matches in pure group order and always highlighted the first one.

- CommandPalette ranks each word: label starts with it > elsewhere in the label > only the hint,
  keywords or group name; an item ranks by its worst word, then the sum. The group order stays
  fixed, rows are ranked inside each group, and the best row overall starts highlighted. The
  highlight is held by id and follows the best match until the arrows or the pointer pick a row,
  so a channel list landing mid-typing no longer shifts it.
- A11y: result groups are `role="group"` named by their heading; `aria-expanded` is false with
  nothing to choose; the listbox stays mounted (hidden) so `aria-controls` never names a missing
  element, and "Nothing matches" sits outside it; a polite status announces the count once the
  typing pauses.
- `Column`/`FilterMap`/`filterRows`/`isActive` move from `ui/tableHeader` to `lib/tableColumns`,
  and the player's auto/loop modes from `playerModalControls` to `lib/playerModes` — three lib
  helpers imported the column contract from a ui component, and `playerModalHooks` its types from a
  feature component.
- eslint: `lib/` may not import from `components/` at any depth, type-only and re-exports included;
  the boundary contract test proves it fires. CLAUDE.md and the ui README say so.
- keymap: `dispatch`'s docblock sat stacked on `matchesShortcut`'s; moved onto `dispatch`.

frontend/src/components/ui/tableHeader.tsx

@@ -4,10 +4,12 @@ import { ArrowDown, ArrowUp, ListFilter, X } from "lucide-react";
 import { PopoverItem, PopoverSurface, useAnchoredPopover } from "./AnchoredPopover";
 import { useScrollFade } from "../../lib/useScrollFade";
 import { type SortState } from "../../lib/columnSort";
+import { isActive, type Column, type FilterMap } from "../../lib/tableColumns";
 
-// The column-header machinery — the column contract, the sortable header row with its filter
-// funnel + popover, and the filter predicate — lifted OUT of DataTable so a non-DataTable body can
-// render under the same headers.
+// 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
+// and the filter predicate it reads live in `lib/tableColumns` (lib helpers need them, and lib may
+// not import from components).
 //
 // Why it lives here and not in DataTable: DataTable owns its filter/sort/page state internally,
 // while the playlist manager's body is a drag-reorderable list whose order is the persisted
@@ -15,58 +17,6 @@ import { type SortState } from "../../lib/columnSort";
 // playlist keep its stored order and still get real column headers. Same move as E4 S3's
 // ChannelLayoutGrid, which builds a card view straight from the `Column<T>` render closures.
 
-type ColumnFilter<T> =
-  | { kind: "text"; get: (row: T) => string }
-  | {
-      kind: "select";
-      options: { value: string; label: string }[];
-      test: (row: T, value: string) => boolean;
-    }
-  | {
-      kind: "multi";
-      options: { value: string; label: string }[];
-      test: (row: T, values: string[]) => boolean;
-    };
-
-export interface Column<T> {
-  key: string;
-  header: string;
-  render: (row: T) => ReactNode;
-  align?: "left" | "right" | "center";
-  width?: string;
-  sortable?: boolean;
-  sortValue?: (row: T) => string | number;
-  filter?: ColumnFilter<T>;
-  // Keep the cell on one line so the column auto-sizes to its content (table-layout: auto).
-  nowrap?: boolean;
-  // Card fallback (below md): `cardPrimary` renders as the card heading (no label); `hideInCard`
-  // omits the column; `cardLabel:false` shows the value without its header label.
-  cardPrimary?: boolean;
-  hideInCard?: boolean;
-  cardLabel?: boolean;
-}
-
-export type FilterMap = Record<string, string | string[]>;
-
-export function isActive(value: string | string[] | undefined): boolean {
-  return Array.isArray(value) ? value.length > 0 : !!value;
-}
-
-/** Apply every column's own filter predicate. A column with no filter, or an empty value, passes. */
-export function filterRows<T>(rows: T[], columns: Column<T>[], filters: FilterMap): T[] {
-  return rows.filter((row) =>
-    columns.every((col) => {
-      const f = col.filter;
-      if (!f) return true;
-      const val = filters[col.key];
-      if (!isActive(val)) return true;
-      if (f.kind === "text") return f.get(row).toLowerCase().includes(String(val).toLowerCase());
-      if (f.kind === "select") return f.test(row, String(val));
-      return f.test(row, val as string[]);
-    }),
-  );
-}
-
 export const alignClass = (a?: "left" | "right" | "center") =>
   a === "right" ? "text-right" : a === "center" ? "text-center" : "text-left";