fix(css): scope ProseMirror CSS to prevent bleeding into host apps (SD-1850)

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

@@ -6539,7 +6539,7 @@ describe('Link accessibility - Focus styles', () => {
     const styleTag = document.querySelector('[data-superdoc-link-styles]');
     expect(styleTag).toBeTruthy();
     expect(styleTag?.textContent).toContain(':focus-visible');
-    expect(styleTag?.textContent).toContain('sr-only');
+    expect(styleTag?.textContent).toContain('superdoc-sr-only');
   });
 
   it('should not inject styles twice', () => {
@@ -6954,7 +6954,7 @@ describe('Link accessibility - Tooltip aria-describedby', () => {
     // Look for the description element in the mount, not document
     const descElem = mount.querySelector(`#${describedBy}`);
     expect(descElem?.textContent).toBe('Visit our homepage for more information');
-    expect(descElem?.className).toContain('sr-only');
+    expect(descElem?.className).toContain('superdoc-sr-only');
   });
 
   it('should maintain title attribute for visual tooltip', () => {

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

@@ -4047,7 +4047,7 @@ export class DomPainter {
     const descId = `link-desc-${linkId}`;
     const descElem = this.doc.createElement('span');
     descElem.id = descId;
-    descElem.className = 'sr-only'; // Screen reader only class
+    descElem.className = 'superdoc-sr-only'; // Screen reader only class
     descElem.textContent = tooltip;
 
     // Insert description element after the link

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

@@ -185,7 +185,7 @@ const LINK_AND_TOC_STYLES = `
 }
 
 /* Screen reader only content (WCAG SC 1.3.1) */
-.sr-only {
+.superdoc-sr-only {
   position: absolute;
   width: 1px;
   height: 1px;

packages/super-editor/src/assets/styles/elements/ai.css

@@ -1,16 +1,16 @@
 /* Custom toolbar styling */
 
 /* AI button icon styling with gradient */
-.toolbar-icon__icon--ai {
+.super-editor .toolbar-icon__icon--ai {
   position: relative;
   z-index: 1;
 }
 
-.toolbar-icon__icon--ai svg {
+.super-editor .toolbar-icon__icon--ai svg {
   fill: transparent;
 }
 
-.toolbar-icon__icon--ai::before {
+.super-editor .toolbar-icon__icon--ai::before {
   content: '';
   position: absolute;
   top: 0;
@@ -33,12 +33,12 @@
   transition: filter 0.2s ease;
 }
 
-.toolbar-icon__icon--ai:hover::before {
+.super-editor .toolbar-icon__icon--ai:hover::before {
   filter: brightness(1.3);
 }
 
 /* AI text appear animation */
-@keyframes aiTextAppear {
+@keyframes superdoc-aiTextAppear {
   from {
     opacity: 0;
     transform: translateY(5px);
@@ -49,27 +49,27 @@
   }
 }
 
-.sd-ai-text-appear {
+.super-editor .sd-ai-text-appear {
   display: inline;
   opacity: 0;
-  animation: aiTextAppear 0.7s ease-out forwards;
+  animation: superdoc-aiTextAppear 0.7s ease-out forwards;
   animation-fill-mode: both;
   will-change: opacity, transform;
   /* Ensure each mark is treated as a separate animation context */
   contain: content;
 }
 
-.sd-ai-loader {
+.super-editor .sd-ai-loader {
   display: flex;
   justify-content: flex-start;
 }
 
-.sd-ai-loader > img {
+.super-editor .sd-ai-loader > img {
   width: fit-content;
   height: 40px;
 }
 
-@keyframes ai-pulse {
+@keyframes superdoc-ai-pulse {
   0% {
     background-color: rgba(99, 102, 241, 0.1);
   }
@@ -81,6 +81,6 @@
   }
 }
 
-.sd-ai-highlight-pulse {
-  animation: ai-pulse 1.5s ease-in-out infinite;
+.super-editor .sd-ai-highlight-pulse {
+  animation: superdoc-ai-pulse 1.5s ease-in-out infinite;
 }

packages/super-editor/src/assets/styles/elements/page-number.css

@@ -1,20 +1,20 @@
-.sd-editor-auto-page-number,
-.sd-editor-auto-total-pages {
+.super-editor .sd-editor-auto-page-number,
+.super-editor .sd-editor-auto-total-pages {
   transition: all 250ms ease;
   border-bottom: 1px solid #9a9a9a;
   cursor: not-allowed;
 }
 
-.sd-editor-auto-page-number:hover,
-.sd-editor-auto-total-pages:hover {
+.super-editor .sd-editor-auto-page-number:hover,
+.super-editor .sd-editor-auto-total-pages:hover {
   border-bottom-color: #4f4f4f;
 }
 
-.sd-editor-auto-page-number-content {
+.super-editor .sd-editor-auto-page-number-content {
   pointer-events: none;
 }
 
-.ProseMirror.view-mode {
+.super-editor .ProseMirror.view-mode {
   .sd-editor-auto-page-number,
   .sd-editor-auto-total-pages {
     border: none;