From 85e504b4a62b9fa83c6b6bbc937838d62764a3c0 Mon Sep 17 00:00:00 2001
From: KCM <knightedcodemonkey@gmail.com>
Date: Mon, 16 Mar 2026 11:59:17 -0500
Subject: [PATCH 1/2] fix: inheritable properites leaking in.

---
 docs/next-steps.md | 12 ++++++++++++
 src/app.js         | 16 +++++++++++++++-
 src/styles.css     | 35 ++++++++++++++---------------------
 3 files changed, 41 insertions(+), 22 deletions(-)

diff --git a/docs/next-steps.md b/docs/next-steps.md
index 0c103af..10b0683 100644
--- a/docs/next-steps.md
+++ b/docs/next-steps.md
@@ -9,3 +9,15 @@ Focused follow-up work for `@knighted/develop`.
 2. **Preview UX polish**
    - Keep tooltip affordances for mode-specific behavior.
    - Continue tightening panel control alignment and spacing without introducing extra markup.
+
+3. **In-browser component/style linting**
+   - Explore running lint checks for component and style sources directly in the playground.
+   - Prefer CDN-delivered tooling where possible and preserve graceful fallback behavior when unavailable.
+
+4. **In-browser component type checking**
+   - Explore TypeScript/JSX type checking for component source in-browser using CDN-delivered tooling.
+   - Keep diagnostics responsive and surface clear inline/editor feedback without blocking the preview loop.
+
+5. **In-browser component testing**
+   - Explore authoring and running component-focused tests in-browser (for example, a Vitest-compatible flow) using CDN-delivered tooling.
+   - Define a lightweight test UX that supports writing tests, running them on demand, and displaying results in-app.
diff --git a/src/app.js b/src/app.js
index 35662f7..2adb992 100644
--- a/src/app.js
+++ b/src/app.js
@@ -455,13 +455,27 @@ const updateStyleWarning = () => {
   styleWarning.textContent = `${styleLabels[mode]} is compiled in-browser via @knighted/css/browser.`
 }
 
+const shadowPreviewBaseStyles = `
+:host {
+  all: initial;
+  display: var(--preview-host-display, block);
+  flex: var(--preview-host-flex, 1 1 auto);
+  min-height: var(--preview-host-min-height, 180px);
+  padding: var(--preview-host-padding, 18px);
+  overflow: var(--preview-host-overflow, auto);
+  position: var(--preview-host-position, relative);
+  z-index: var(--preview-host-z-index, 1);
+  box-sizing: border-box;
+}
+`
+
 const applyStyles = (target, cssText) => {
   if (!target) return
 
   const styleTag = document.createElement('style')
   const isShadowTarget = target instanceof ShadowRoot
   styleTag.textContent = isShadowTarget
-    ? cssText
+    ? `${shadowPreviewBaseStyles}\n${cssText}`
     : `@scope (#preview-host) {\n${cssText}\n}`
   target.append(styleTag)
 }
diff --git a/src/styles.css b/src/styles.css
index 868ca87..ed49abd 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -510,13 +510,21 @@ textarea:focus {
 }
 
 .preview-host {
-  flex: 1 1 auto;
-  min-height: 180px;
-  padding: 18px;
-  overflow: auto;
-  position: relative;
+  --preview-host-display: block;
+  --preview-host-flex: 1 1 auto;
+  --preview-host-min-height: 180px;
+  --preview-host-padding: 18px;
+  --preview-host-overflow: auto;
+  --preview-host-position: relative;
+  --preview-host-z-index: 1;
+  display: var(--preview-host-display);
+  flex: var(--preview-host-flex);
+  min-height: var(--preview-host-min-height);
+  padding: var(--preview-host-padding);
+  overflow: var(--preview-host-overflow);
+  position: var(--preview-host-position);
   background: var(--surface-preview);
-  z-index: 1;
+  z-index: var(--preview-host-z-index);
 }
 
 .preview-host[data-style-compiling='true']::before {
@@ -613,7 +621,6 @@ textarea:focus {
   padding: 0;
 }
 
-.shadow-hint::before,
 .shadow-hint::after {
   opacity: 0;
   visibility: hidden;
@@ -624,18 +631,6 @@ textarea:focus {
     visibility 120ms ease;
 }
 
-.shadow-hint::before {
-  content: '';
-  position: absolute;
-  top: calc(100% + 4px);
-  right: 4px;
-  border-left: 6px solid transparent;
-  border-right: 6px solid transparent;
-  border-bottom: 6px solid var(--surface-tooltip);
-  transform: translateY(-4px);
-  z-index: 31;
-}
-
 .shadow-hint::after {
   content: attr(data-tooltip);
   position: absolute;
@@ -656,9 +651,7 @@ textarea:focus {
   z-index: 30;
 }
 
-.shadow-hint:hover::before,
 .shadow-hint:hover::after,
-.shadow-hint:focus-visible::before,
 .shadow-hint:focus-visible::after {
   opacity: 1;
   visibility: visible;

From 092cca1faa2435bf964715bf9f88eef232cfca70 Mon Sep 17 00:00:00 2001
From: KCM <knightedcodemonkey@gmail.com>
Date: Mon, 16 Mar 2026 12:10:01 -0500
Subject: [PATCH 2/2] fix: preserve background and color theme.

---
 src/app.js | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/app.js b/src/app.js
index 2adb992..0980823 100644
--- a/src/app.js
+++ b/src/app.js
@@ -464,6 +464,8 @@ const shadowPreviewBaseStyles = `
   padding: var(--preview-host-padding, 18px);
   overflow: var(--preview-host-overflow, auto);
   position: var(--preview-host-position, relative);
+  background: var(--surface-preview);
+  color-scheme: var(--control-color-scheme, dark);
   z-index: var(--preview-host-z-index, 1);
   box-sizing: border-box;
 }