fix(demo): bundle asciinema CSS statically so the player loads in production

The dynamic `import("asciinema-player/dist/bundle/asciinema-player.css")`
caused Vite to emit the asciinema CSS as a separate chunk that was not
served from GitHub Pages (404). The preload helper rejected, the catch
in DemoSection set status="error", and the demo silently fell back to
hero.svg. Make the CSS a top-level static import so it folds into the
main page CSS bundle.

Also invert the cast theme relative to the page theme (dark cast on
light page, light cast on dark page) by passing `theme` to
asciinema-player's `create()` instead of wrapping the host element with
a `.ap-theme-*` class, and update the unit tests accordingly.

Author: misonijnik

src/components/DemoSection.tsx

@@ -1,7 +1,9 @@
 import { useEffect, useRef, useState } from "react";
+import "asciinema-player/dist/bundle/asciinema-player.css";
 
 type PlayerStatus = "loading" | "ready" | "error";
 type Theme = "light" | "dark";
+type DemoTheme = "opentaint-light" | "opentaint-dark";
 
 type PlayerHandle = { dispose: () => void };
 
@@ -16,8 +18,8 @@ type PlayerModule = {
 const HERO_SRC = "/demo/hero.cast";
 const HERO_FALLBACK_SRC = "/demo/hero.svg";
 
-const themeClass = (theme: Theme) =>
-  theme === "dark" ? "ap-theme-opentaint-dark" : "ap-theme-opentaint-light";
+const demoThemeFor = (pageTheme: Theme): DemoTheme =>
+  pageTheme === "dark" ? "opentaint-light" : "opentaint-dark";
 
 const readInitialTheme = (): Theme =>
   typeof document !== "undefined" && document.documentElement.classList.contains("dark")
@@ -37,21 +39,23 @@ export function DemoSection() {
   const heroRef = useRef<HTMLDivElement | null>(null);
   const heroHandleRef = useRef<PlayerHandle | null>(null);
 
+  const demoTheme = demoThemeFor(theme);
+
   useEffect(() => {
     if (reducedMotion) return;
 
     let cancelled = false;
     const load = async () => {
       try {
         const mod = (await import("asciinema-player")) as PlayerModule;
-        await import("asciinema-player/dist/bundle/asciinema-player.css");
-        if (cancelled || !heroRef.current || heroHandleRef.current) return;
+        if (cancelled || !heroRef.current) return;
         heroHandleRef.current = mod.create(HERO_SRC, heroRef.current, {
           autoPlay: true,
           loop: true,
           preload: true,
           controls: false,
           poster: "npt:0:0.1",
+          theme: demoTheme,
           terminalFontFamily: "'JetBrains Mono', monospace",
         });
         setStatus("ready");
@@ -66,7 +70,7 @@ export function DemoSection() {
       heroHandleRef.current?.dispose();
       heroHandleRef.current = null;
     };
-  }, [reducedMotion]);
+  }, [reducedMotion, demoTheme]);
 
   useEffect(() => {
     if (typeof document === "undefined") return;
@@ -85,10 +89,8 @@ export function DemoSection() {
     return () => mq.removeEventListener?.("change", onChange);
   }, []);
 
-  const wrapper = themeClass(theme);
-
   return (
-    <div className={`mx-auto max-w-[68.4rem] ${wrapper}`}>
+    <div className="mx-auto max-w-[68.4rem]">
       <div className="overflow-hidden sm:rounded-md sm:border sm:border-border sm:bg-secondary/50">
         {reducedMotion || status === "error" ? (
           <img
@@ -101,7 +103,6 @@ export function DemoSection() {
           <div
             ref={heroRef}
             data-testid="demo-hero-player"
-            className={wrapper}
             aria-label="OpenTaint scan demo, running continuously"
           />
         )}

src/components/__tests__/DemoSection.test.tsx

@@ -49,6 +49,11 @@ const flushAsync = async () => {
   });
 };
 
+const lastCreateOptions = () => {
+  const call = createPlayerMock.mock.calls.at(-1);
+  return (call?.[2] ?? {}) as Record<string, unknown>;
+};
+
 describe("DemoSection", () => {
   it("mounts the hero player", async () => {
     render(<DemoSection />);
@@ -57,31 +62,39 @@ describe("DemoSection", () => {
     expect(createPlayerMock).toHaveBeenCalledTimes(1);
   });
 
-  it("applies the dark theme class when the document has .dark", async () => {
+  it("uses the dark cast theme on a light page", async () => {
+    render(<DemoSection />);
+    await flushAsync();
+    expect(lastCreateOptions().theme).toBe("opentaint-dark");
+  });
+
+  it("uses the light cast theme on a dark page", async () => {
     document.documentElement.classList.add("dark");
     render(<DemoSection />);
     await flushAsync();
-    const hero = screen.getByTestId("demo-hero-player");
-    expect(hero.className).toContain("ap-theme-opentaint-dark");
+    expect(lastCreateOptions().theme).toBe("opentaint-light");
   });
 
-  it("swaps the theme class when [data-theme-toggle] is clicked", async () => {
+  it("re-creates the player with the inverse theme when [data-theme-toggle] is clicked", async () => {
     const toggle = document.createElement("button");
     toggle.setAttribute("data-theme-toggle", "");
     document.body.appendChild(toggle);
 
     render(<DemoSection />);
     await flushAsync();
-    const hero = screen.getByTestId("demo-hero-player");
-    expect(hero.className).toContain("ap-theme-opentaint-light");
+    expect(lastCreateOptions().theme).toBe("opentaint-dark");
+    const firstHandle = playerInstances.at(-1);
 
     await act(async () => {
       document.documentElement.classList.add("dark");
       toggle.click();
       await Promise.resolve();
     });
+    await flushAsync();
 
-    expect(hero.className).toContain("ap-theme-opentaint-dark");
+    expect(firstHandle?.dispose).toHaveBeenCalled();
+    expect(createPlayerMock).toHaveBeenCalledTimes(2);
+    expect(lastCreateOptions().theme).toBe("opentaint-light");
     toggle.remove();
   });
 

src/styles/demo-theme.css

@@ -1,12 +1,15 @@
 /*
- * Custom asciinema-player themes that match the site's light/dark palette.
- * Applied via wrapper class: .ap-theme-opentaint-light or .ap-theme-opentaint-dark.
+ * Custom asciinema-player themes that intentionally contrast with the site
+ * theme: the dark cast is shown on the light page and vice versa.
+ *
+ * Asciinema-player applies `asciinema-player-theme-<name>` to its inner
+ * `.ap-player` element when `create(..., { theme: "<name>" })` is used.
  * See src/components/DemoSection.tsx for the selector logic.
  */
 
-.ap-theme-opentaint-light {
-  --term-color-background: hsl(var(--card));
-  --term-color-foreground: hsl(var(--foreground));
+.ap-player.asciinema-player-theme-opentaint-light {
+  --term-color-background: hsl(0 0% 100%);
+  --term-color-foreground: hsl(215 14% 8%);
   --term-color-0: #3f3f46;
   --term-color-1: #dc2626;
   --term-color-2: #16a34a;
@@ -25,9 +28,9 @@
   --term-color-15: #27272a;
 }
 
-.ap-theme-opentaint-dark {
-  --term-color-background: hsl(var(--card));
-  --term-color-foreground: hsl(var(--foreground));
+.ap-player.asciinema-player-theme-opentaint-dark {
+  --term-color-background: hsl(215 10% 7%);
+  --term-color-foreground: hsl(215 6% 92%);
   --term-color-0: #52525b;
   --term-color-1: #f87171;
   --term-color-2: #4ade80;