fix: remove sdt hover in view mode (#2560)

* fix: remove sdt hover in view mode

* test(behavior): add regression tests for SDT hover in viewing mode (SD-2232)

Verify that hovering block and inline SDT containers in viewing mode
does not show background highlights. Covers both standard and
lock-mode hover paths across Chromium, Firefox, and WebKit.

---------

Co-authored-by: Caio Pizzol <caio@harbourshare.com>

Author: VladaHarbour

packages/layout-engine/painters/dom/src/styles.test.ts

@@ -1,5 +1,5 @@
 import { describe, expect, it } from 'vitest';
-import { ensureNativeSelectionStyles } from './styles.js';
+import { ensureNativeSelectionStyles, ensureSdtContainerStyles } from './styles.js';
 
 /**
  * Tests for style injection functions.
@@ -111,3 +111,22 @@ describe('ensureNativeSelectionStyles', () => {
     expect(document.head.contains(styleEl)).toBe(true);
   });
 });
+
+describe('ensureSdtContainerStyles', () => {
+  it('suppresses structured-content hover backgrounds in viewing mode, including grouped hover', () => {
+    ensureSdtContainerStyles(document);
+
+    const styleEl = document.querySelector('[data-superdoc-sdt-container-styles="true"]');
+    const cssText = styleEl?.textContent ?? '';
+
+    expect(cssText).toContain('.presentation-editor--viewing .superdoc-structured-content-block.sdt-group-hover');
+    expect(cssText).toContain('.presentation-editor--viewing .superdoc-structured-content-block.sdt-hover');
+    expect(cssText).toContain(
+      '.presentation-editor--viewing .superdoc-structured-content-block[data-lock-mode].sdt-hover',
+    );
+    expect(cssText).toContain(
+      '.presentation-editor--viewing .superdoc-structured-content-inline[data-lock-mode]:hover',
+    );
+    expect(cssText).toContain('background: none;');
+  });
+});

packages/layout-engine/painters/dom/src/styles.ts

@@ -544,11 +544,23 @@ const SDT_CONTAINER_STYLES = `
   border: none;
 }
 
+.presentation-editor--viewing .superdoc-structured-content-block.sdt-group-hover,
+.presentation-editor--viewing .superdoc-structured-content-block.sdt-hover,
+.presentation-editor--viewing .superdoc-structured-content-block[data-lock-mode].sdt-hover {
+  background: none;
+  border: none;
+}
+
 .presentation-editor--viewing .superdoc-structured-content-inline:hover {
   background: none;
   border: none;
 }
 
+.presentation-editor--viewing .superdoc-structured-content-inline[data-lock-mode]:hover {
+  background: none;
+  border: none;
+}
+
 .presentation-editor--viewing .superdoc-structured-content__label,
 .presentation-editor--viewing .superdoc-structured-content-inline__label {
   display: none !important;

tests/behavior/tests/sdt/structured-content.spec.ts

@@ -271,6 +271,59 @@ test.describe('viewing mode hides SDT affordances', () => {
 
     await superdoc.snapshot('inline SDT viewing mode');
   });
+
+  test('block SDT hover does not show background in viewing mode (SD-2232)', async ({ superdoc }) => {
+    await superdoc.type('Some text');
+    await superdoc.newLine();
+    await superdoc.waitForStable();
+    await insertBlockSdt(superdoc.page, 'Hover Block', 'Content');
+    await superdoc.waitForStable();
+
+    await superdoc.setDocumentMode('viewing');
+    await superdoc.waitForStable();
+
+    // Move mouse over the block SDT
+    const center = await getCenter(superdoc.page, BLOCK_SDT);
+    await superdoc.page.mouse.move(center.x, center.y);
+    await superdoc.waitForStable();
+
+    // Even if the sdt-hover class gets applied, the CSS override should
+    // suppress any visible background in viewing mode.
+    const bg = await superdoc.page.evaluate((sel) => {
+      const el = document.querySelector(sel);
+      if (!el) return null;
+      return getComputedStyle(el).backgroundColor;
+    }, BLOCK_SDT);
+
+    expect(bg === 'rgba(0, 0, 0, 0)' || bg === 'transparent').toBe(true);
+
+    await superdoc.snapshot('block SDT hover suppressed in viewing mode');
+  });
+
+  test('inline SDT hover does not show background in viewing mode (SD-2232)', async ({ superdoc }) => {
+    await superdoc.type('Hello ');
+    await superdoc.waitForStable();
+    await insertInlineSdt(superdoc.page, 'Hover Inline', 'value');
+    await superdoc.waitForStable();
+
+    await superdoc.setDocumentMode('viewing');
+    await superdoc.waitForStable();
+
+    // Move mouse over the inline SDT
+    const center = await getCenter(superdoc.page, INLINE_SDT);
+    await superdoc.page.mouse.move(center.x, center.y);
+    await superdoc.waitForStable();
+
+    const bg = await superdoc.page.evaluate((sel) => {
+      const el = document.querySelector(sel);
+      if (!el) return null;
+      return getComputedStyle(el).backgroundColor;
+    }, INLINE_SDT);
+
+    expect(bg === 'rgba(0, 0, 0, 0)' || bg === 'transparent').toBe(true);
+
+    await superdoc.snapshot('inline SDT hover suppressed in viewing mode');
+  });
 });
 
 // ==========================================================================