feat: namespace internal ui classes

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

@@ -1,16 +1,16 @@
 /* Custom toolbar styling */
 
 /* AI button icon styling with gradient */
-.super-editor .toolbar-icon__icon--ai {
+.super-editor .sd-toolbar-icon__icon--ai {
   position: relative;
   z-index: 1;
 }
 
-.super-editor .toolbar-icon__icon--ai svg {
+.super-editor .sd-toolbar-icon__icon--ai svg {
   fill: transparent;
 }
 
-.super-editor .toolbar-icon__icon--ai::before {
+.super-editor .sd-toolbar-icon__icon--ai::before {
   content: '';
   position: absolute;
   top: 0;
@@ -33,7 +33,7 @@
   transition: filter 0.2s ease;
 }
 
-.super-editor .toolbar-icon__icon--ai:hover::before {
+.super-editor .sd-toolbar-icon__icon--ai:hover::before {
   filter: brightness(1.3);
 }
 

packages/super-editor/src/editors/v1/components/SuperEditor.vue

@@ -1293,6 +1293,7 @@ onBeforeUnmount(() => {
     class="super-editor-container"
     :class="{ 'web-layout': isWebLayout, contained: isContained }"
     :style="containerStyle"
+    data-sd-part="editor-root"
   >
     <!-- Ruler: teleport to external container if specified, otherwise render inline (hidden in web layout) -->
     <Teleport

packages/super-editor/src/editors/v1/components/context-menu/ContextMenu.vue

@@ -652,7 +652,7 @@ onBeforeUnmount(() => {
         <template v-for="item in section.items" :key="item.id">
           <div
             class="context-menu-item"
-            :class="{ 'is-selected': item.id === selectedId }"
+            :class="{ 'sd-is-selected': item.id === selectedId }"
             @click="executeCommand(item)"
           >
             <!-- Custom rendered content or default rendering -->
@@ -772,7 +772,7 @@ onBeforeUnmount(() => {
   background: var(--sd-ui-menu-item-hover-bg, #f5f5f5);
 }
 
-.context-menu-item.is-selected {
+.context-menu-item.sd-is-selected {
   background: var(--sd-ui-menu-item-active-bg, #edf6ff);
   color: var(--sd-ui-menu-item-active-text, #0096fd);
   fill: var(--sd-ui-menu-item-active-text, #0096fd);
@@ -801,7 +801,7 @@ onBeforeUnmount(() => {
   width: 100%;
 }
 
-.popover {
+.sd-popover {
   background: var(--sd-ui-menu-bg, #ffffff);
   border-radius: var(--sd-ui-menu-radius, 0);
   box-shadow: var(--sd-ui-menu-shadow, 0 0 0 1px rgba(0, 0, 0, 0.05), 0px 10px 20px rgba(0, 0, 0, 0.1));

packages/super-editor/src/editors/v1/components/context-menu/tests/ContextMenu.test.js

@@ -594,7 +594,7 @@ describe('ContextMenu.vue', () => {
       await onContextMenuOpen({ menuPosition: { left: '100px', top: '200px' } });
       await nextTick();
 
-      expect(wrapper.find('.context-menu-item.is-selected').exists()).toBe(true);
+      expect(wrapper.find('.context-menu-item.sd-is-selected').exists()).toBe(true);
     });
 
     it('should navigate with arrow keys', async () => {
@@ -609,13 +609,13 @@ describe('ContextMenu.vue', () => {
       await searchInput.trigger('keydown', { key: 'ArrowDown' });
       await nextTick();
 
-      const selectedItems = wrapper.findAll('.context-menu-item.is-selected');
+      const selectedItems = wrapper.findAll('.context-menu-item.sd-is-selected');
       expect(selectedItems).toHaveLength(1);
 
       await searchInput.trigger('keydown', { key: 'ArrowUp' });
       await nextTick();
 
-      expect(wrapper.findAll('.context-menu-item.is-selected')).toHaveLength(1);
+      expect(wrapper.findAll('.context-menu-item.sd-is-selected')).toHaveLength(1);
     });
 
     it('should execute selected item on Enter', async () => {

packages/super-editor/src/editors/v1/components/popovers/Mentions.vue

@@ -75,7 +75,7 @@ const handleFocus = () => {
       @mouseleave="activeUserIndex = null"
       :key="user.email"
       class="user-row"
-      :class="{ selected: activeUserIndex === index }"
+      :class="{ 'sd-selected': activeUserIndex === index }"
     >
       <div v-if="user.name">
         <span v-if="user.name">{{ user.name }}</span>
@@ -89,7 +89,7 @@ const handleFocus = () => {
 </template>
 
 <style scoped>
-.selected {
+.sd-selected {
   background-color: #dbdbdb;
 }
 .mentions-container {

packages/super-editor/src/editors/v1/components/toolbar/AIWriter.vue

@@ -467,7 +467,7 @@ const handleInput = (event) => {
   display: flex;
 }
 
-.error {
+.sd-error {
   fill: #ed4337;
 }
 

packages/super-editor/src/editors/v1/components/toolbar/AlignmentButtons.vue

@@ -82,7 +82,7 @@ onMounted(() => {
     <div
       v-for="(button, index) in alignmentButtons"
       :key="button.key"
-      class="button-icon"
+      class="sd-button-icon"
       @click="select(button.key)"
       v-html="button.icon"
       data-item="btn-textAlign-option"
@@ -102,7 +102,7 @@ onMounted(() => {
   padding: 8px;
   box-sizing: border-box;
 
-  .button-icon {
+  .sd-button-icon {
     cursor: pointer;
     padding: 5px;
     font-size: var(--sd-ui-font-size-600, 16px);
@@ -129,7 +129,7 @@ onMounted(() => {
   }
 
   &.high-contrast {
-    .button-icon {
+    .sd-button-icon {
       &:hover {
         background-color: #000;
         color: #fff;

packages/super-editor/src/editors/v1/components/toolbar/ButtonGroup.test.js

@@ -55,7 +55,7 @@ describe('ButtonGroup dropdownOptions selected class', () => {
     const options = wrapper.findComponent({ name: 'ToolbarDropdown' }).props('options');
 
     expect(options[1].type).toBeUndefined();
-    expect(options[1].props.class).toBe('selected');
+    expect(options[1].props.class).toBe('sd-selected');
   });
 });
 
@@ -162,16 +162,16 @@ describe('ButtonGroup dropdown keyboard activation', () => {
     const item = createDropdownItem('plain-match');
     const wrapper = mountWithItem(item);
 
-    await wrapper.find('.toolbar-item-ctn').trigger('keydown', { key });
+    await wrapper.find('.sd-toolbar-item-ctn').trigger('keydown', { key });
 
     expect(item.expand.value).toBe(true);
   });
 });
 
 // Regression for the codex P2 finding on PR #3304: after Escape closes the
 // dropdown, ToolbarDropdown.rememberTriggerFocusTarget restores focus to the
-// inner `.toolbar-item` (ToolbarButton root, role="button", tabindex="0"),
-// not to `.toolbar-item-ctn`. ToolbarButton used to handle Enter with
+// inner `.sd-toolbar-item` (ToolbarButton root, role="button", tabindex="0"),
+// not to `.sd-toolbar-item-ctn`. ToolbarButton used to handle Enter with
 // `@keydown.enter.stop`, which silently swallowed the event before
 // ButtonGroup's roving-tabindex handler could see it. Pressing Enter on the
 // restored focus would emit `buttonClick` (no listener on the dropdown
@@ -180,7 +180,7 @@ describe('ButtonGroup dropdown keyboard activation', () => {
 //
 // Fix is the `allowEnterPropagation` prop on ToolbarButton: when true the
 // keydown handler does NOT stopPropagation, so Enter bubbles to
-// `.toolbar-item-ctn` and ButtonGroup.activateToolbarItem runs.
+// `.sd-toolbar-item-ctn` and ButtonGroup.activateToolbarItem runs.
 // Note: this only applies to non-split dropdown items. Split buttons
 // (bullet list / numbered list main button) call handleSplitMainClick on
 // Enter which itself stops propagation and runs the main command instead.
@@ -225,11 +225,11 @@ describe('ButtonGroup dropdown trigger keyboard activation (codex P2 regression)
       },
     });
 
-  it('Enter on the inner .toolbar-item bubbles up and opens the dropdown', async () => {
+  it('Enter on the inner .sd-toolbar-item bubbles up and opens the dropdown', async () => {
     const item = createFullDropdownItem('plain-match');
     wrapper = mountWithDropdownItem(item);
 
-    const innerItem = wrapper.find('.toolbar-dropdown-trigger .toolbar-item').element;
+    const innerItem = wrapper.find('.toolbar-dropdown-trigger .sd-toolbar-item').element;
     expect(innerItem.getAttribute('tabindex')).toBe('0');
     expect(innerItem.getAttribute('role')).toBe('button');
 
@@ -246,8 +246,8 @@ describe('ButtonGroup dropdown trigger keyboard activation (codex P2 regression)
     const item = createFullDropdownItem('plain-match');
     wrapper = mountWithDropdownItem(item);
 
-    const ctn = wrapper.find('.toolbar-item-ctn').element;
-    const innerItem = wrapper.find('.toolbar-dropdown-trigger .toolbar-item').element;
+    const ctn = wrapper.find('.sd-toolbar-item-ctn').element;
+    const innerItem = wrapper.find('.toolbar-dropdown-trigger .sd-toolbar-item').element;
 
     // Open the dropdown the way Tab + Enter does (focus on ctn).
     ctn.focus();
@@ -271,11 +271,11 @@ describe('ButtonGroup dropdown trigger keyboard activation (codex P2 regression)
     expect(item.expand.value).toBe(true);
   });
 
-  it('Space on the inner .toolbar-item also opens the dropdown (control)', async () => {
+  it('Space on the inner .sd-toolbar-item also opens the dropdown (control)', async () => {
     const item = createFullDropdownItem('plain-match');
     wrapper = mountWithDropdownItem(item);
 
-    const innerItem = wrapper.find('.toolbar-dropdown-trigger .toolbar-item').element;
+    const innerItem = wrapper.find('.toolbar-dropdown-trigger .sd-toolbar-item').element;
     innerItem.focus();
     innerItem.dispatchEvent(new KeyboardEvent('keydown', { key: ' ', bubbles: true }));
     await nextTick();
@@ -299,7 +299,7 @@ describe('ButtonGroup dropdown trigger keyboard activation (codex P2 regression)
     };
     wrapper = mountWithDropdownItem(item);
 
-    const innerItem = wrapper.find('.toolbar-dropdown-trigger .toolbar-item').element;
+    const innerItem = wrapper.find('.toolbar-dropdown-trigger .sd-toolbar-item').element;
     innerItem.focus();
     innerItem.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter', bubbles: true }));
     await nextTick();

packages/super-editor/src/editors/v1/components/toolbar/ButtonGroup.vue

@@ -172,7 +172,7 @@ const dropdownOptions = (item) => {
       ...option,
       props: {
         ...option.props,
-        class: isSelected ? 'selected' : '',
+        class: isSelected ? 'sd-selected' : '',
       },
     };
   });
@@ -187,7 +187,7 @@ const getDropdownAttributes = (option, item) => {
 
 const moveToNextButton = (e) => {
   const currentButton = e.target;
-  const nextButton = e.target.closest('.toolbar-item-ctn').nextElementSibling;
+  const nextButton = e.target.closest('.sd-toolbar-item-ctn').nextElementSibling;
   if (nextButton) {
     currentButton.setAttribute('tabindex', '-1');
     nextButton.setAttribute('tabindex', '0');
@@ -197,7 +197,7 @@ const moveToNextButton = (e) => {
 
 const moveToPreviousButton = (e) => {
   const currentButton = e.target;
-  const previousButton = e.target.closest('.toolbar-item-ctn').previousElementSibling;
+  const previousButton = e.target.closest('.sd-toolbar-item-ctn').previousElementSibling;
   if (previousButton) {
     currentButton.setAttribute('tabindex', '-1');
     previousButton.setAttribute('tabindex', '0');
@@ -285,7 +285,7 @@ const handleKeyDown = (e, item) => {
 };
 const handleFocus = (e) => {
   // Set the focus to the first button inside the button group that is not disabled
-  const firstButton = toolbarItemRefs.value.find((item) => !item.classList.contains('disabled'));
+  const firstButton = toolbarItemRefs.value.find((item) => !item.classList.contains('sd-disabled'));
   if (firstButton) {
     firstButton.setAttribute('tabindex', '0');
     firstButton.focus();
@@ -351,10 +351,10 @@ onBeforeUnmount(() => {
       :class="{
         narrow: item.isNarrow.value,
         wide: item.isWide.value,
-        disabled: item.disabled.value,
+        'sd-disabled': item.disabled.value,
       }"
       @keydown="(e) => handleKeyDown(e, item)"
-      class="toolbar-item-ctn"
+      class="sd-toolbar-item-ctn"
       ref="toolbarItemRefs"
       :tabindex="index === 0 ? 0 : -1"
       :data-item-id="item.id.value"
@@ -370,7 +370,7 @@ onBeforeUnmount(() => {
         :show="getExpanded(item)"
         :content-style="{ fontFamily: props.uiFontFamily }"
         placement="bottom-start"
-        class="toolbar-button sd-editor-toolbar-dropdown"
+        class="sd-toolbar-button sd-editor-toolbar-dropdown"
         @select="(key, option) => handleSelect(item, option)"
         @update:show="(open) => handleDropdownUpdateShowForItem(open, item)"
         :style="item.dropdownStyles.value"

packages/super-editor/src/editors/v1/components/toolbar/DocumentMode.vue

@@ -61,10 +61,10 @@ onMounted(() => {
 <template>
   <div class="document-mode" :class="{ 'high-contrast': isHighContrastMode }">
     <div
-      class="option-item"
+      class="sd-option-item"
       v-for="(option, index) in options"
       @click="handleClick(option)"
-      :class="{ disabled: option.disabled }"
+      :class="{ 'sd-disabled': option.disabled }"
       data-item="btn-documentMode-option"
       role="menuitem"
       ref="documentModeRefs"
@@ -100,7 +100,7 @@ onMounted(() => {
     fill: currentColor;
   }
 
-  .option-item {
+  .sd-option-item {
     display: flex;
     flex-direction: row;
     background-color: var(--sd-ui-dropdown-bg, #ffffff);
@@ -115,7 +115,7 @@ onMounted(() => {
   }
 
   &.high-contrast {
-    .option-item {
+    .sd-option-item {
       &:hover {
         background-color: #000;
         color: #fff;
@@ -135,7 +135,7 @@ onMounted(() => {
   }
 }
 
-.disabled {
+.sd-disabled {
   opacity: 0.5;
   cursor: not-allowed !important;
   pointer-events: none;

packages/super-editor/src/editors/v1/components/toolbar/IconGridRow.vue

@@ -107,9 +107,9 @@ const handleKeyDown = (event, rowIndex, optionIndex, option) => {
 };
 </script>
 <template>
-  <div class="option-row" v-for="(row, rowIndex) in icons" :key="rowIndex" role="group" ref="rowRefs">
+  <div class="sd-option-row" v-for="(row, rowIndex) in icons" :key="rowIndex" role="group" ref="rowRefs">
     <div
-      class="option"
+      class="sd-option"
       v-for="(option, optionIndex) in row"
       :key="optionIndex"
       :aria-label="option.label"
@@ -118,11 +118,11 @@ const handleKeyDown = (event, rowIndex, optionIndex, option) => {
       @click.stop.prevent="handleClick(option)"
       @keydown.prevent="(event) => handleKeyDown(event, rowIndex, optionIndex, option)"
     >
-      <div class="option__icon" v-html="option.icon" :style="option.style"></div>
+      <div class="sd-option__icon" v-html="option.icon" :style="option.style"></div>
 
       <div
         v-if="isActive(option)"
-        class="option__check"
+        class="sd-option__check"
         v-html="toolbarIcons.colorOptionCheck"
         :style="getCheckStyle(option.value, optionIndex)"
       ></div>
@@ -131,11 +131,11 @@ const handleKeyDown = (event, rowIndex, optionIndex, option) => {
 </template>
 
 <style scoped>
-.option-row {
+.sd-option-row {
   display: flex;
   flex-direction: row;
 }
-.option {
+.sd-option {
   border-radius: 50%;
   cursor: pointer;
   padding: 3px;
@@ -146,17 +146,17 @@ const handleKeyDown = (event, rowIndex, optionIndex, option) => {
   box-sizing: border-box;
 }
 
-.option:hover {
+.sd-option:hover {
   background-color: var(--sd-ui-dropdown-hover-bg, #d8dee5);
 }
 
-.option__icon {
+.sd-option__icon {
   width: 20px;
   height: 20px;
   flex-shrink: 0;
 }
 
-.option__check {
+.sd-option__check {
   width: 14px;
   height: 14px;
   flex-shrink: 0;