From b4b30058b7bda697cd96aa110a765f7514cfc731 Mon Sep 17 00:00:00 2001
From: Cursor Agent <cursoragent@cursor.com>
Date: Thu, 15 Oct 2026 08:41:53 +0000
Subject: [PATCH] fix(dev): keep error overlay CSS in adoptedStyleSheets

Page-text readers were picking up overlay <style> text inside the
shadow root. Move rules into a CSSStyleSheet so only the dialog copy
remains in the text tree.

Co-authored-by: Kent C. Dodds <me+github@kentcdodds.com>
---
 src/dev/live-reload.ts       | 9 ++++++---
 test/dev-live-reload.test.ts | 9 +++++++++
 2 files changed, 15 insertions(+), 3 deletions(-)

diff --git a/src/dev/live-reload.ts b/src/dev/live-reload.ts
index 1579d9c..54adbcb 100644
--- a/src/dev/live-reload.ts
+++ b/src/dev/live-reload.ts
@@ -111,8 +111,9 @@ function showOverlay(view) {
 	const host = document.createElement('kody-dev-overlay');
 	const root = host.attachShadow({ mode: 'open' });
 	const label = view.kind === 'build' ? 'Build error' : 'Runtime error';
-	root.innerHTML = \`
-<style>
+	// Keep CSS out of the text tree (page-text readers / textContent walkers).
+	const sheet = new CSSStyleSheet();
+	sheet.replaceSync(\`
 	.backdrop { position: fixed; inset: 0; z-index: 2147483647; background: rgba(10, 4, 7, .82); display: flex; align-items: flex-start; justify-content: center; overflow: auto; font: 14px/1.5 ui-sans-serif, system-ui, sans-serif; }
 	.panel { margin: 48px 16px; max-width: 960px; width: 100%; background: #1a1015; color: #f5e9ee; border: 1px solid #3a2530; border-radius: 10px; padding: 20px 24px; box-shadow: 0 20px 60px rgba(0,0,0,.5); }
 	.top { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
@@ -123,7 +124,9 @@ function showOverlay(view) {
 	.request { color: #bfa9b3; font-size: 13px; margin: 0 0 12px; }
 	pre { margin: 12px 0 0; padding: 14px; overflow: auto; background: #0e080b; border: 1px solid #3a2530; border-radius: 8px; font: 13px/1.55 ui-monospace, SFMono-Regular, Menlo, monospace; white-space: pre; }
 	.hint { color: #bfa9b3; font-size: 12px; margin-top: 12px; }
-</style>
+\`);
+	root.adoptedStyleSheets = [sheet];
+	root.innerHTML = \`
 <div class="backdrop" role="alertdialog" aria-modal="true" aria-labelledby="kody-dev-title">
 	<div class="panel">
 		<div class="top"><span class="label"></span><button type="button" aria-label="Dismiss">×</button></div>
diff --git a/test/dev-live-reload.test.ts b/test/dev-live-reload.test.ts
index f7b0caf..8aec2c5 100644
--- a/test/dev-live-reload.test.ts
+++ b/test/dev-live-reload.test.ts
@@ -3,11 +3,20 @@ import { request } from 'node:http'
 import { test } from 'node:test'
 import {
 	injectLiveReloadScript,
+	liveReloadClientSource,
 	liveReloadScriptTag,
 	shouldInjectLiveReload,
 } from '../src/dev/live-reload.js'
 import { waitFor, withDevServer } from './dev-server-harness.js'
 
+test('error overlay CSS uses adoptedStyleSheets, not a light-DOM <style> text node', () => {
+	assert.match(liveReloadClientSource, /adoptedStyleSheets/)
+	assert.match(liveReloadClientSource, /CSSStyleSheet/)
+	assert.match(liveReloadClientSource, /replaceSync/)
+	assert.doesNotMatch(liveReloadClientSource, /<style>/)
+	assert.doesNotMatch(liveReloadClientSource, /<\/style>/)
+})
+
 test('injectLiveReloadScript prefers </head>, then </body>, then appends once', () => {
 	assert.equal(
 		injectLiveReloadScript('<html><head><title>x</title></head><body></body></html>'),