fix: iframe protocol mismatch in receiver reads.

playwright/layout-panels.spec.ts

@@ -3,6 +3,7 @@ import {
   expectCollapseButtonState,
   expectPreviewHasRenderedContent,
   getCollapseButton,
+  getPreviewFrame,
   getToolsButton,
   waitForInitialRender,
 } from './helpers/app-test-helpers.js'
@@ -61,6 +62,37 @@ test('dark theme defaults preview background to editor background', async ({ pag
   expect(toRgbChannels(colors.preview)).toEqual(toRgbChannels(colors.editor))
 })
 
+test('changing preview background keeps applied preview styles', async ({ page }) => {
+  await waitForInitialRender(page)
+
+  const previewFrameRoot = getPreviewFrame(page).locator('html')
+
+  await expect(previewFrameRoot).toHaveCount(1)
+  const hasComponentStylesBefore = await previewFrameRoot.evaluate(() => {
+    const styleElement = document.getElementById('knighted-preview-styles')
+    if (!(styleElement instanceof HTMLStyleElement)) {
+      return false
+    }
+
+    return styleElement.textContent?.includes('.counter-button') ?? false
+  })
+  expect(hasComponentStylesBefore).toBe(true)
+
+  await page.getByLabel('Background').fill('#b1aaaa')
+
+  const hasComponentStylesAfter = await previewFrameRoot.evaluate(() => {
+    const styleElement = document.getElementById('knighted-preview-styles')
+    if (!(styleElement instanceof HTMLStyleElement)) {
+      return false
+    }
+
+    return styleElement.textContent?.includes('.counter-button') ?? false
+  })
+  expect(hasComponentStylesAfter).toBe(true)
+
+  await expect(previewFrameRoot).toHaveCSS('background-color', 'rgb(177, 170, 170)')
+})
+
 test('fixed layout keeps preview panel height within editor stack height', async ({
   page,
 }) => {

src/modules/preview-runtime/iframe-preview-executor.js

@@ -56,6 +56,11 @@ const createIframeShellDocument = ({ channelId, parentOrigin, importMap }) => {
         entrySpecifier: '',
         reactRoot: null,
         renderedNodes: [],
+        visualConfig: {
+          cssText: '',
+          hostPadding: '',
+          backgroundColor: '',
+        },
       }
 
       const __knightedRuntimeErrorFingerprints = new Set()
@@ -110,24 +115,37 @@ const createIframeShellDocument = ({ channelId, parentOrigin, importMap }) => {
       }
 
       const __knightedApplyVisualConfig = ({ cssText = '', hostPadding = '', backgroundColor = '' }) => {
+        __knightedState.visualConfig = {
+          cssText: typeof cssText === 'string' ? cssText : '',
+          hostPadding: typeof hostPadding === 'string' ? hostPadding : '',
+          backgroundColor: typeof backgroundColor === 'string' ? backgroundColor : '',
+        }
+
         let styleElement = document.getElementById('knighted-preview-styles')
         if (!(styleElement instanceof HTMLStyleElement)) {
           styleElement = document.createElement('style')
           styleElement.id = 'knighted-preview-styles'
           document.head.append(styleElement)
         }
 
-        styleElement.textContent = __knightedToBaseStyles(hostPadding) + '\\n' + String(cssText)
+        styleElement.textContent =
+          __knightedToBaseStyles(__knightedState.visualConfig.hostPadding) +
+          '\\n' +
+          String(__knightedState.visualConfig.cssText)
 
-        if (typeof hostPadding === 'string' && hostPadding.trim().length > 0) {
-          document.documentElement.style.setProperty('--preview-host-padding', hostPadding.trim())
+        if (__knightedState.visualConfig.hostPadding.trim().length > 0) {
+          document.documentElement.style.setProperty(
+            '--preview-host-padding',
+            __knightedState.visualConfig.hostPadding.trim(),
+          )
         } else {
           document.documentElement.style.removeProperty('--preview-host-padding')
         }
 
-        if (typeof backgroundColor === 'string' && backgroundColor.length > 0) {
-          document.documentElement.style.backgroundColor = backgroundColor
-          document.body.style.backgroundColor = backgroundColor
+        if (__knightedState.visualConfig.backgroundColor.length > 0) {
+          document.documentElement.style.backgroundColor =
+            __knightedState.visualConfig.backgroundColor
+          document.body.style.backgroundColor = __knightedState.visualConfig.backgroundColor
           return
         }
 
@@ -285,7 +303,16 @@ const createIframeShellDocument = ({ channelId, parentOrigin, importMap }) => {
         const data = event.data
 
         if (data.type === __knightedMessageTypes.configPatch) {
-          __knightedApplyVisualConfig(data)
+          const patch =
+            data && typeof data.payload === 'object' && data.payload !== null
+              ? data.payload
+              : data && typeof data === 'object'
+                ? data
+                : {}
+          __knightedApplyVisualConfig({
+            ...__knightedState.visualConfig,
+            ...patch,
+          })
           return
         }