test(themes): guard inactive Halo resources and SEO

中文：为未激活的 Halo 主题补齐资源隔离与 SEO 测试，并自动覆盖新注册主题。

Author: functionstackx

docs/themes.md

@@ -179,6 +179,17 @@ establish zero shared theme-selector overhead, guarantee search rankings, or
 replace production Core Web Vitals measurements. The shared pre-paint colors
 remain intentional to avoid a flash when an opted-in theme is restored.
 
+The isolation suites derive optional themes from `APP_THEMES`, so registering
+a new theme adds its embed and activation/teardown cases automatically.
+Halo is also included in the inactive-path asset and saved-preference guards.
+Keep artwork, font declarations, layout CSS and music behind the selection
+boundary. Do not add theme asset preload hints to shared layouts.
+The default-page checks seed saved music/sound opt-ins for every guarded theme;
+these preferences must not start media on light/dark pages or embeds.
+Crawler and theme-switch comparisons also cover robots, Open Graph and Twitter
+metadata. Run these tests on the implementation's final commit before merge;
+passing an earlier commit does not verify later changes.
+
 - Direct selection of every theme from the picker, keyboard navigation,
   persistence after reload, and cleanup on exit.
 - No CS:GO image requests on a cold light/dark landing; images load only

packages/app/cypress/e2e/optional-theme-isolation.cy.ts

@@ -1,29 +1,47 @@
+import { APP_THEMES } from '../../src/lib/themes';
+
+const optionalThemes = APP_THEMES.filter((theme) => !['light', 'dark', 'system'].includes(theme));
 const featureCode =
-  /THREE\.WebGLRenderer|WebGLRenderer:|LOS SANTOS 3D|minecraft-click\.mp3|ender-dragon\.mp3|Loading Luigi Circuit|inferencex-minecraft-worlds|mc-panorama-cube|\.mc-hotbar-wrap|\.csgo-scene|\.gta-scene|\.mc-dragon-flyacross|\.kart-scene|\.halo-scene|font-family:\s*["']?(?:Monocraft|Pricedown|ChaletComprime|Industry)/i;
-const featureAsset =
-  /\/decorative\/(?:minecraft|csgo|gta|kart|halo)\/|minecraft-click\.mp3|Monocraft-|Pricedown|ChaletComprime|Industry-|youtube(?:-nocookie)?\.com|ytimg\.com/i;
+  /THREE\.WebGLRenderer|WebGLRenderer:|LOS SANTOS 3D|minecraft-click\.mp3|ender-dragon\.mp3|Loading Luigi Circuit|inferencex-minecraft-worlds|mc-panorama-cube|\.mc-hotbar-wrap|\.csgo-scene|\.gta-scene|\.mc-dragon-flyacross|\.kart-scene|\.halo-scene|halo-theme\.css|font-family:\s*["']?(?:Monocraft|Pricedown|ChaletComprime|Industry|Halo)/i;
+const featureAsset = new RegExp(
+  `/decorative/(?:${optionalThemes.join('|')})/|minecraft-click\\.mp3|Monocraft-|Pricedown|ChaletComprime|Industry-|halo[^/]*\\.(?:woff2?|ttf|otf|mp3|ogg|wav)|youtube(?:-nocookie)?\\.com|ytimg\\.com`,
+  'i',
+);
 const featureElements =
   '[data-testid="minecraft-game"], [data-testid="minecraft-play-banner"], [data-testid="kart-game"], [data-testid$="-theme-banner"], .mc-dragon-flyacross';
 const isFeatureAsset = (url: string) => featureAsset.test(decodeURIComponent(url));
 
+function saveMediaOptIns(win: Window, enabled: boolean) {
+  for (const theme of optionalThemes) {
+    win.localStorage.setItem(`${theme}-music`, String(enabled));
+    win.localStorage.setItem(`${theme}-sound`, String(enabled));
+  }
+}
+
 function expectNoOptionalResources(requests: string[]) {
   cy.window().then((win) => {
     // Request interception catches in-flight requests too; resource timing only lists completed ones.
     expect(requests.filter(isFeatureAsset), 'optional requests started').to.deep.equal([]);
     const resources = win.performance.getEntriesByType('resource');
     expect(resources.filter((entry) => isFeatureAsset(entry.name))).to.have.length(0);
     expect(
-      [...win.document.fonts].filter((font) => /monocraft|pricedown|chalet/i.test(font.family)),
+      [...win.document.fonts].filter((font) =>
+        /monocraft|pricedown|chalet|industry|halo/i.test(font.family),
+      ),
     ).to.have.length(0);
     for (const resource of resources.filter((entry) => /\.(?:js|css)(?:\?|$)/.test(entry.name)))
       cy.request(resource.name).its('body').should('not.match', featureCode);
   });
   cy.get(featureElements).should('not.exist');
+  cy.get('audio, video, iframe[src*="youtube"]').should('not.exist');
 }
 const seo = (doc: Document) => [
   doc.title,
   doc.querySelector('meta[name="description"]')?.getAttribute('content'),
   doc.querySelector('link[rel="canonical"]')?.getAttribute('href'),
+  ...[
+    ...doc.querySelectorAll('meta[name="robots"], meta[property^="og:"], meta[name^="twitter:"]'),
+  ].map((node) => node.outerHTML),
   ...[...doc.querySelectorAll('link[hreflang], script[type="application/ld+json"]')].map(
     (node) => node.outerHTML,
   ),
@@ -50,8 +68,7 @@ describe('optional themes stay off the default page', () => {
           if (theme === 'default') win.localStorage.removeItem('theme');
           else win.localStorage.setItem('theme', theme);
           // Stored opt-ins must not start media outside the selected theme.
-          win.localStorage.setItem('minecraft-music', 'true');
-          win.localStorage.setItem('minecraft-sound', 'true');
+          saveMediaOptIns(win, true);
         },
       });
       if (theme === 'light' || theme === 'dark') cy.get('html').should('have.class', theme);
@@ -71,7 +88,7 @@ describe('optional themes stay off the default page', () => {
     });
   }
 
-  for (const theme of ['minecraft', 'csgo', 'gta', 'kart', 'halo']) {
+  for (const theme of optionalThemes) {
     for (const prefix of ['', '/zh']) {
       it(`${prefix || 'English'} embed ignores saved ${theme} before and after hydration`, () => {
         const requests: string[] = [];
@@ -81,9 +98,7 @@ describe('optional themes stay off the default page', () => {
         cy.visit(`${prefix}/embed/model/deepseek-v4?theme=light`, {
           onBeforeLoad(win) {
             win.localStorage.setItem('theme', theme);
-            win.localStorage.setItem('minecraft-music', 'true');
-            win.localStorage.setItem('minecraft-sound', 'true');
-            win.localStorage.setItem('halo-music', 'true');
+            saveMediaOptIns(win, true);
           },
         });
         cy.get('html').should('have.class', 'light').and('have.attr', 'data-inferencex-embed');
@@ -116,11 +131,7 @@ describe('optional themes stay off the default page', () => {
             (link) => isFeatureAsset(link.getAttribute('href') ?? ''),
           ),
         ).to.have.length(0);
-        expect(
-          doc.querySelector(
-            '[data-testid="kart-game"], [data-testid="gta-theme-banner"], [data-testid="csgo-theme-banner"], [data-testid="halo-theme-banner"]',
-          ),
-        ).to.equal(null);
+        expect(doc.querySelector(featureElements)).to.equal(null);
         // Metadata and indexable headings are in raw HTML, without running JavaScript.
         cy.request(route).then((normal) => {
           const normalDoc = new DOMParser().parseFromString(normal.body, 'text/html');
@@ -135,9 +146,7 @@ describe('optional themes stay off the default page', () => {
     cy.visit('/about', {
       onBeforeLoad(win) {
         win.localStorage.setItem('theme', 'light');
-        win.localStorage.setItem('minecraft-music', 'false');
-        win.localStorage.setItem('minecraft-sound', 'false');
-        win.localStorage.setItem('halo-music', 'false');
+        saveMediaOptIns(win, false);
       },
     });
     // The server-rendered trigger is visible before its click handler hydrates.
@@ -146,7 +155,7 @@ describe('optional themes stay off the default page', () => {
       .and('contain', 'currently');
     cy.document().then((doc) => {
       const baseline = seo(doc);
-      for (const theme of ['csgo', 'gta', 'minecraft', 'kart', 'halo']) {
+      for (const theme of optionalThemes) {
         cy.get('[data-testid="theme-toggle"]').click();
         cy.get(`[data-testid="theme-option-${theme}"]`).click();
         if (theme === 'minecraft') cy.get('canvas').should('exist');

packages/app/src/lib/optional-theme-imports.test.ts

@@ -2,18 +2,22 @@ import { existsSync, readFileSync, readdirSync, statSync } from 'node:fs';
 import path from 'node:path';
 import ts from 'typescript';
 import { describe, expect, it } from 'vitest';
+import { APP_THEMES } from './themes';
 
 const src = path.resolve(import.meta.dirname, '..');
-const optionalDirectory = /^components\/(?:minecraft|csgo|gta|kart|halo)\//;
+const optionalThemes = APP_THEMES.filter((theme) => !['light', 'dark', 'system'].includes(theme));
+const optionalDirectory = new RegExp(`^components/(?:${optionalThemes.join('|')})/`);
 // These wrappers contain only activation gates and dynamic imports.
 const wrappers = new Set([
   'components/minecraft/minecraft-splash.tsx',
   'components/minecraft/minecraft-toggles-lazy.tsx',
   'components/halo/halo-toggles-lazy.tsx',
 ]);
 const engine = /^(?:three|@react-three\/[^/]+|@dimforge\/rapier[^/]*)(?:\/|$)/;
-const optionalAsset =
-  /(?:\/decorative\/(?:minecraft|csgo|gta|kart|halo)\/|minecraft-click\.mp3|Monocraft-|Pricedown|ChaletComprime|Industry-)/i;
+const optionalAsset = new RegExp(
+  `(?:/decorative/(?:${optionalThemes.join('|')})/|minecraft-click\\.mp3|Monocraft-|Pricedown|ChaletComprime|Industry-|halo[^/]*\\.(?:woff2?|ttf|otf|mp3|ogg|wav))`,
+  'i',
+);
 
 /** Static runtime imports, including re-exports. Dynamic imports stay behind their gate. */
 function imports(text: string): string[] {