test(frontend): cover the lifecycle, the voice and the repaints

Component and store cases for everything in this series, several of
which exist because the thing they pin is invisible everywhere else:

- `view-lifecycle` and `keyboard-reach` — a document listener count
  that does not grow across a simulated navigate cycle, and a tab
  sequence that reaches the sidebar and plays a row without a mouse.
- `notifications`, `notification-store`, `confirm-dialog`,
  `empty-states` — the four levels, the (level, region, key)
  coalescing window, and loading/failed/empty as three states.
- `card-grid-repaint` — fails if `artists-view`'s or `genres-view`'s
  per-render arrow functions are hoisted to stable fields, which is
  the audit's own recommendation and takes the cards from 1 highlighted
  to 0. It exists for no other reason.
- `lazy-track-details` — reads the five sources and fails on a
  returning static import, the same shape as `TestNoDirectRuntimeEmits`
  and for the same reason: the invariant is about what the code does
  *not* say.
- `now-playing` — a position report that changes nothing must not
  touch the DOM again, and a track change must. The first fails
  against the old unconditional `updated()`.
- `playlist-virtualization`, `list-render-cost`, `selection`, `icons`,
  and the store cases for the library-filter race, the never-settling
  waiter and the per-playlist patch.

frontend/test/support/render.ts

@@ -67,6 +67,39 @@ export function shadowAll<E extends Element = Element>(
   return [...(host.shadowRoot?.querySelectorAll<E>(selector) ?? [])];
 }
 
+/**
+ * Query through nested shadow roots.
+ *
+ * A component that composes another component is still one thing to the
+ * user, and to Playwright — `shadow()` stops at the first boundary,
+ * which makes an assertion depend on which component happens to own the
+ * markup today.
+ */
+export function deepShadow<E extends Element = Element>(
+  root: Element,
+  selector: string,
+): E | null {
+  const queue: Array<Element | ShadowRoot> = [root.shadowRoot ?? root];
+
+  while (queue.length > 0) {
+    const node = queue.shift()!;
+    const hit = node.querySelector<E>(selector);
+
+    if (hit) return hit;
+
+    for (const el of node.querySelectorAll('*')) {
+      if (el.shadowRoot) queue.push(el.shadowRoot);
+    }
+  }
+
+  return null;
+}
+
+/** Trimmed text content of the first deep match, or null if absent. */
+export function deepText(host: Element, selector: string): string | null {
+  return deepShadow(host, selector)?.textContent?.trim() ?? null;
+}
+
 /** Trimmed text content of the first match, or null if absent. */
 export function text(host: Element, selector: string): string | null {
   return shadow(host, selector)?.textContent?.trim() ?? null;