test(e2e): disambiguate html vs markdown iframes in theme.spec

#66's theme.spec was authored when markdown rendered in-document; this branch
moves markdown into its own sandboxed `srcdoc` iframe, so `.card iframe` now
matches two elements (Playwright strict-mode violation) and `.mdpart` no longer
exists. Target the html part via `iframe[src]` and read the shiki token through
the markdown frame (iframe.mdframe). Behavior covered is unchanged: all three
theming layers still move together.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

Author: benvinegar

e2e/theme.spec.ts

@@ -1,8 +1,9 @@
 import { expect, publishParts, test } from "./fixtures.ts";
 
 // A surface with the two parts whose theming runs through different layers: an
-// html part (re-themed by reloading its sandboxed iframe at /s/:id) and a
-// markdown part (re-highlighted in-document by shiki). Together with the chrome
+// html part (re-themed by reloading its sandboxed iframe at /s/:id, which has a
+// `src`) and a markdown part (rendered in its own sandboxed `srcdoc` iframe,
+// re-highlighted by shiki when its doc rebuilds). Together with the chrome
 // palette that covers the layers CLAUDE.md warns must move as one.
 const PARTS = [
   { kind: "html", html: "<p>surface body</p>" },
@@ -19,8 +20,13 @@ test("switching the board theme re-themes chrome, html parts, and markdown toget
 
   await page.goto(server.url);
   const card = page.locator(".card");
-  const iframe = card.locator("iframe");
-  const token = card.locator(".mdpart pre.shiki span[style*='color']").first();
+  // the html part is the iframe with a `src`; the markdown part is a separate
+  // `srcdoc` iframe (iframe.mdframe), and its shiki token lives inside it
+  const iframe = card.locator("iframe[src]");
+  const token = card
+    .frameLocator("iframe.mdframe")
+    .locator("pre.shiki span[style*='color']")
+    .first();
 
   // default theme is github; the iframe carries it in its src and the chrome
   // exposes the github light bg via the injected --bg var
@@ -69,7 +75,7 @@ test("the picked theme persists across a reload", async ({ page, server }) => {
   // of the default
   await page.reload();
   await expect(page.locator("#themeSel")).toHaveValue("gruvbox");
-  await expect(page.locator(".card iframe")).toHaveAttribute("src", /theme=gruvbox/);
+  await expect(page.locator(".card iframe[src]")).toHaveAttribute("src", /theme=gruvbox/);
   await expect
     .poll(() =>
       page.evaluate(() =>
@@ -89,14 +95,14 @@ test("a theme switch in one tab re-themes another open tab via SSE", async ({
   await page.goto(server.url);
   const other = await context.newPage();
   await other.goto(server.url);
-  await expect(other.locator(".card iframe")).toHaveAttribute("src", /theme=github/);
+  await expect(other.locator(".card iframe[src]")).toHaveAttribute("src", /theme=github/);
 
   // switch in the first tab; the second re-themes off the theme-changed SSE
   // event without its own user action
   await page.locator("#themeSel").selectOption("gruvbox");
 
   await expect(other.locator("#themeSel")).toHaveValue("gruvbox");
-  await expect(other.locator(".card iframe")).toHaveAttribute("src", /theme=gruvbox/);
+  await expect(other.locator(".card iframe[src]")).toHaveAttribute("src", /theme=gruvbox/);
   await expect
     .poll(() =>
       other.evaluate(() =>