feat: implement systematic CSS naming convention for editor elements

Naming Convention: SCOPE-COMPONENT-ELEMENT-SUBELEMENT
- ui = User Interface (editor controls, panels, buttons)
- dc = Document Content (typography, layout)
- md = Mode (light/dark color schemes)
- br = Branding (accent colors, corporate styling)

New CSS Classes:
- ui-edit-floater-panel (main floating control panel)
- ui-edit-floater-header (panel header area)
- ui-edit-floater-actions (button container)
- ui-edit-floater-status (status display)
- ui-edit-button (all action buttons)
- ui-edit-button-accept (save/accept buttons)
- ui-edit-button-cancel (cancel buttons)
- ui-edit-button-reset (reset buttons)
- ui-edit-section-frame (editable section borders)
- ui-edit-textarea-main (text editing areas)

Updated Theme CSS:
- All UI themes now target systematic class names
- Granular control over specific button types
- Consistent theming across all editor components
- Better separation of concerns (panel vs buttons vs textareas)

Benefits:
- Easy theme targeting with predictable class names
- Scalable for future UI components
- Clear hierarchy and naming consistency
- Maintainable and extensible architecture

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>

markitect/clean_document_manager.py

@@ -301,33 +301,46 @@ class CleanDocumentManager:
         ui_css = ""
         if props.get('editor_panel_bg'):
             ui_css = f"""
-            .markitect-edit-mode #markitect-global-controls {{
+            .markitect-edit-mode .ui-edit-floater-panel {{
                 background: {props['editor_panel_bg']};
                 border: 1px solid {props.get('editor_panel_border', '#dee2e6')};
                 box-shadow: 0 4px 12px {props.get('editor_shadow', 'rgba(0,0,0,0.1)')};
                 color: {props.get('editor_text_color', '#212529')};
             }}
-            .markitect-edit-mode .control-btn {{
+            .markitect-edit-mode .ui-edit-floater-header {{
+                color: {props.get('editor_text_color', '#212529')};
+            }}
+            .markitect-edit-mode .ui-edit-button {{
                 background: {props.get('editor_button_bg', '#ffffff')};
                 color: {props.get('editor_text_color', '#212529')};
                 border: 1px solid {props.get('editor_panel_border', '#dee2e6')};
             }}
-            .markitect-edit-mode .control-btn:hover {{
+            .markitect-edit-mode .ui-edit-button:hover {{
                 background: {props.get('editor_button_hover', '#e9ecef')};
             }}
-            .markitect-edit-mode .control-btn:active,
+            .markitect-edit-mode .ui-edit-button:active,
-            .markitect-edit-mode .control-btn.active {{
+            .markitect-edit-mode .ui-edit-button.active {{
                 background: {props.get('editor_button_active', '#dee2e6')};
             }}
-            .markitect-edit-mode .markitect-section-editable {{
+            .markitect-edit-mode .ui-edit-button-accept {{
+                background: {props.get('editor_button_bg', '#4caf50')};
+            }}
+            .markitect-edit-mode .ui-edit-button-cancel {{
+                background: {props.get('editor_button_bg', '#f44336')};
+            }}
+            .markitect-edit-mode .ui-edit-button-reset {{
+                background: {props.get('editor_button_bg', '#ff9800')};
+            }}
+            .markitect-edit-mode .ui-edit-section-frame {{
                 border: 2px solid {props.get('editor_focus_color', '#0066cc')};
                 box-shadow: 0 0 0 3px {props.get('editor_focus_color', '#0066cc')}33;
             }}
-            .markitect-edit-mode textarea {{
+            .markitect-edit-mode .ui-edit-textarea {{
                 border: 1px solid {props.get('editor_panel_border', '#dee2e6')};
                 color: {props.get('editor_text_color', '#212529')};
+                background: {props.get('editor_button_bg', '#ffffff')};
             }}
-            .markitect-edit-mode textarea:focus {{
+            .markitect-edit-mode .ui-edit-textarea:focus {{
                 border-color: {props.get('editor_focus_color', '#0066cc')};
                 box-shadow: 0 0 0 2px {props.get('editor_focus_color', '#0066cc')}33;
             }}"""
@@ -1021,7 +1034,7 @@ class DOMRenderer {
             return;
         }
 
-        const sectionElement = event.target.closest('.markitect-section-editable');
+        const sectionElement = event.target.closest('.ui-edit-section');
         if (!sectionElement) return;
 
         const sectionId = sectionElement.getAttribute('data-section-id');
@@ -1057,6 +1070,7 @@ class DOMRenderer {
         `;
 
         const textarea = document.createElement('textarea');
+        textarea.className = 'ui-edit-textarea ui-edit-textarea-main';
         textarea.value = content;
         textarea.style.cssText = `
             flex: 1;
@@ -1085,6 +1099,16 @@ class DOMRenderer {
         const createButton = (text, color, handler) => {
             const btn = document.createElement('button');
             btn.textContent = text;
+
+            // Add CSS classes based on button type
+            btn.className = 'ui-edit-button';
+            if (text.includes('Accept')) {
+                btn.className += ' ui-edit-button-accept';
+            } else if (text.includes('Cancel')) {
+                btn.className += ' ui-edit-button-cancel';
+            } else if (text.includes('Reset')) {
+                btn.className += ' ui-edit-button-reset';
+            }
             btn.style.cssText = `
                 padding: 8px 12px;
                 border: none;
@@ -1145,7 +1169,7 @@ class DOMRenderer {
     }
 
     setupSectionElement(element) {
-        element.className = 'markitect-section-editable';
+        element.className = 'ui-edit-section ui-edit-section-frame';
         element.style.cssText = `
             margin: 16px 0;
             padding: 12px;
@@ -1327,16 +1351,17 @@ class MarkitectCleanEditor {
     addGlobalControls() {
         // Create floating control panel
         const panel = document.createElement('div');
-        panel.id = 'markitect-global-controls';
+        panel.id = 'ui-edit-floater';
+        panel.className = 'ui-edit-floater-panel';
         panel.innerHTML = `
-            <div class="control-header">
+            <div class="ui-edit-floater-header">
                 <h3>📝 Editor</h3>
-                <div class="control-status" id="editor-status">Ready</div>
+                <div class="ui-edit-floater-status" id="editor-status">Ready</div>
             </div>
-            <div class="control-actions">
+            <div class="ui-edit-floater-actions">
-                <button id="save-document" class="control-btn primary">💾 Save Document</button>
+                <button id="save-document" class="ui-edit-button ui-edit-button-accept">💾 Save Document</button>
-                <button id="reset-all" class="control-btn warning">🔄 Reset All</button>
+                <button id="reset-all" class="ui-edit-button ui-edit-button-reset">🔄 Reset All</button>
-                <button id="show-status" class="control-btn secondary">📊 Show Status</button>
+                <button id="show-status" class="ui-edit-button ui-edit-button-secondary">📊 Show Status</button>
             </div>
         `;