chore(release): bump patch version to 0.5.1

manifest.json

@@ -3,7 +3,7 @@
   "name": "browser.cpp",
   "short_name": "browser.cpp",
   "description": "In-browser C++20 IDE powered by Monaco Editor and WASM Clang",
-  "version": "0.5.0",
+  "version": "0.5.1",
   "minimum_chrome_version": "105",
   "icons": {
     "16": "icons/icon16.png",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "browser.cpp",
-  "version": "0.5.0",
+  "version": "0.5.1",
   "description": "In-browser C++20 IDE with WASM Clang toolchain",
   "private": true,
   "scripts": {

scripts/e2e-settings-memory-debug.test.mjs

@@ -161,3 +161,15 @@ test('Settings markup exposes the official UBSan help link in a protected new ta
   assert.match(html, /rel="noopener noreferrer"/);
   assert.doesNotMatch(html, /settings-save|Save settings|Apply settings/i);
 });
+
+test('Settings backdrop preserves accurate workspace theme previews', async () => {
+  const css = await readFile(new URL('../src/ui/styles.css', import.meta.url), 'utf8');
+  const backdrop = css.match(/\.settings-backdrop\s*\{([^}]*)\}/)?.[1];
+  const panel = css.match(/\.settings-panel\s*\{([^}]*)\}/)?.[1];
+
+  assert.ok(backdrop, 'Settings backdrop styles should exist for click-outside close');
+  assert.match(backdrop, /background:\s*transparent\s*;/);
+  assert.doesNotMatch(backdrop, /(?:opacity|filter|backdrop-filter)\s*:/);
+  assert.ok(panel, 'Settings drawer styles should exist');
+  assert.doesNotMatch(panel, /box-shadow\s*:/);
+});

scripts/smoke-browser.mjs

@@ -828,16 +828,24 @@ int main() {
     const openPanel = await evaluate(cdp, sessionId, `(() => {
       document.getElementById('btn-settings').click();
       const panel = document.getElementById('settings-panel');
+      const backdrop = document.getElementById('settings-backdrop');
       const style = getComputedStyle(panel);
+      const backdropStyle = getComputedStyle(backdrop);
       return {
         hidden: panel.hidden,
         ariaHidden: panel.getAttribute('aria-hidden'),
         position: style.position,
         right: style.right,
+        boxShadow: style.boxShadow,
+        backdropHidden: backdrop.hidden,
+        backdropBackground: backdropStyle.backgroundColor,
       };
     })()`);
     assert(openPanel.hidden === false && openPanel.ariaHidden === 'false', 'Settings panel did not open');
     assert(openPanel.position === 'fixed' && openPanel.right === '0px', 'Settings panel is not a right-side drawer');
+    assert(openPanel.backdropHidden === false, 'Settings backdrop should remain available for click-outside close');
+    assert(openPanel.backdropBackground === 'rgba(0, 0, 0, 0)', 'Settings backdrop must not fade theme previews');
+    assert(openPanel.boxShadow === 'none', 'Settings panel must not cast a shadow over workspace previews');
 
     const toggleChecked = await evaluate(cdp, sessionId, `(() => {
       const toggle = document.getElementById('setting-memory-debug');

src/ui/styles.css

@@ -176,7 +176,8 @@ select:focus {
   position: fixed;
   inset: var(--toolbar-h) 0 var(--statusbar-h) 0;
   z-index: 30;
-  background: rgb(17 17 27 / 55%);
+  /* Keep click-outside close without changing the colors being previewed. */
+  background: transparent;
 }
 
 .settings-panel {
@@ -190,7 +191,6 @@ select:focus {
   flex-direction: column;
   background: var(--mantle);
   border-left: 1px solid var(--surface1);
-  box-shadow: -8px 0 24px rgb(0 0 0 / 30%);
 }
 
 .settings-panel-header {