diff --git a/relicts/AllControlsRudimentary.html b/relicts/AllControlsRudimentary.html
new file mode 100755
index 00000000..9ae613f9
--- /dev/null
+++ b/relicts/AllControlsRudimentary.html
@@ -0,0 +1,3846 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Development Guardrails</title>
+    <style>
+            body {
+                font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif;
+                max-width: 800px;
+                margin: 0 auto;
+                padding: 2rem;
+                line-height: 1.6;
+                color: #333333;
+                background-color: #ffffff;
+            }
+            #markdown-content {
+                min-height: 200px;
+            }
+            h1, h2, h3, h4, h5, h6 {
+                color: #333333;
+                
+            }
+            pre {
+                background-color: #f6f8fa;
+                color: #333333;
+                padding: 1rem;
+                border-radius: 6px;
+                overflow-x: auto;
+                border: 1px solid #d0d7de;
+            }
+            code {
+                background-color: #f6f8fa;
+                color: #333333;
+                padding: 0.2em 0.4em;
+                border-radius: 3px;
+                font-size: 0.9em;
+            }
+            pre code {
+                background: none;
+                padding: 0;
+            }
+            blockquote {
+                border-left: 4px solid #dfe2e5;
+                margin: 0;
+                padding-left: 1rem;
+                color: #6a737d;
+            }
+            table {
+                font-size: 0.85em;
+                border-collapse: collapse;
+                margin: 1rem 0;
+                width: 100%;
+                border: 1px solid #d0d7de;
+            }
+            th, td {
+                font-size: inherit;
+                border: 1px solid #d0d7de;
+                padding: 0.5rem;
+                text-align: left;
+            }
+            th {
+                background-color: #f6f8fa;
+                font-weight: 600;
+            }
+            img {
+                max-width: 12cm;
+                max-height: 20cm;
+                height: auto;
+                display: block;
+                margin: 1rem auto;
+            }</style>
+
+    <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"
+            onload="window.markitectMarkedLoaded = true"
+            onerror="window.markitectMarkedError = true"></script>
+</head>
+<body class="markitect-edit-mode">
+
+    <div id="markdown-content"></div>
+
+    <script>
+        const markdownContent = "# Development Guardrails\n\n## JavaScript Code Principles\n\n### 1. No Inline JavaScript in Python\n**NEVER write JavaScript code directly from Python code**\n\n\u274c **Wrong:**\n```python\nscript = f\"\"\"\nfunction myFunction() {{\n    console.log(\"Hello {name}\");\n}}\n\"\"\"\n```\n\n\u2705 **Correct:**\n```python\n# Load from external files only\ncomponents = [\n    'js/core/section-manager.js',\n    'js/components/debug-panel.js',\n    'js/components/document-controls.js'\n]\n```\n\n### 2. Why This Rule Exists\n- **Quoting Problems**: String escaping in Python corrupts JavaScript\n- **Syntax Errors**: Template literals and complex JS break when embedded\n- **Maintainability**: JS code should be in .js files for proper tooling\n- **Architecture**: Follows the established modular component system\n\n### 3. Proper Approach\n1. Create separate `.js` files in `markitect/static/js/components/`\n2. Load them via `_get_clean_editor_scripts()`\n3. Wire up components in the initialization script only\n\n## Testing and Validation\n\n### 1. Always Validate Generated HTML\n- Check that HTML files actually render content\n- Validate JavaScript syntax before deployment\n- Test both viewing and editing modes\n\n### 2. Detect JavaScript Errors Programmatically\n- Run syntax validation on generated JS\n- Check for common error patterns\n- Fail fast when JS is malformed\n\n### 3. Manual Testing Backup\n- If automated checks pass but functionality fails\n- Open generated HTML in browser\n- Check console for runtime errors\n- Report specific error messages\n\n## Architecture Principles\n\n### 1. Separation of Concerns\n- Python: File generation, template management\n- JavaScript: UI components, interaction logic\n- HTML: Structure and content only\n\n### 2. Modular Component System\n- Each UI component in separate file\n- Lazy loading where appropriate\n- Clear dependency management\n\n### 3. Error Handling\n- Graceful degradation when components fail\n- Clear error messages for debugging\n- Fallback modes when possible\n\n## Breaking These Rules\n\nIf you find yourself writing JavaScript in Python strings:\n1. **STOP** - Step back and reconsider\n2. Create a proper component file instead\n3. Use the existing component loading system\n4. Add validation to catch the issue early\n\nThese guardrails exist because we've seen the problems when they're violated.";
+        const markdownContentWithDogtag = "# Development Guardrails\n\n## JavaScript Code Principles\n\n### 1. No Inline JavaScript in Python\n**NEVER write JavaScript code directly from Python code**\n\n\u274c **Wrong:**\n```python\nscript = f\"\"\"\nfunction myFunction() {{\n    console.log(\"Hello {name}\");\n}}\n\"\"\"\n```\n\n\u2705 **Correct:**\n```python\n# Load from external files only\ncomponents = [\n    'js/core/section-manager.js',\n    'js/components/debug-panel.js',\n    'js/components/document-controls.js'\n]\n```\n\n### 2. Why This Rule Exists\n- **Quoting Problems**: String escaping in Python corrupts JavaScript\n- **Syntax Errors**: Template literals and complex JS break when embedded\n- **Maintainability**: JS code should be in .js files for proper tooling\n- **Architecture**: Follows the established modular component system\n\n### 3. Proper Approach\n1. Create separate `.js` files in `markitect/static/js/components/`\n2. Load them via `_get_clean_editor_scripts()`\n3. Wire up components in the initialization script only\n\n## Testing and Validation\n\n### 1. Always Validate Generated HTML\n- Check that HTML files actually render content\n- Validate JavaScript syntax before deployment\n- Test both viewing and editing modes\n\n### 2. Detect JavaScript Errors Programmatically\n- Run syntax validation on generated JS\n- Check for common error patterns\n- Fail fast when JS is malformed\n\n### 3. Manual Testing Backup\n- If automated checks pass but functionality fails\n- Open generated HTML in browser\n- Check console for runtime errors\n- Report specific error messages\n\n## Architecture Principles\n\n### 1. Separation of Concerns\n- Python: File generation, template management\n- JavaScript: UI components, interaction logic\n- HTML: Structure and content only\n\n### 2. Modular Component System\n- Each UI component in separate file\n- Lazy loading where appropriate\n- Clear dependency management\n\n### 3. Error Handling\n- Graceful degradation when components fail\n- Clear error messages for debugging\n- Fallback modes when possible\n\n## Breaking These Rules\n\nIf you find yourself writing JavaScript in Python strings:\n1. **STOP** - Step back and reconsider\n2. Create a proper component file instead\n3. Use the existing component loading system\n4. Add validation to catch the issue early\n\nThese guardrails exist because we've seen the problems when they're violated.\n\n---\n*-- html from markdown by <a href=\"https://coulomb.social/open/MarkiTect\" target=\"_blank\">MarkiTect</a> on 2025-11-12 01:49:38 by <a href=\"https://coulomb.social/open/worsch\" target=\"_blank\">worsch</a>*";
+        const dogtagContent = "\n\n---\n*-- html from markdown by <a href=\"https://coulomb.social/open/MarkiTect\" target=\"_blank\">MarkiTect</a> on 2025-11-12 01:49:38 by <a href=\"https://coulomb.social/open/worsch\" target=\"_blank\">worsch</a>*";
+        window.markitectBase64References = {};
+        
+        const MARKITECT_EDIT_MODE = true;
+        const MARKITECT_EDITOR_CONFIG = {
+            mode: 'edit',
+            theme: 'github',
+            keyboardShortcuts: true,
+            autosave: false,
+            sections: true,
+            originalFilename: 'GUARDRAILS',
+            version: 'Markitect v0.8.1.dev26+ge0bc5daee',
+            repoName: 'Markitect'
+        };
+        window.editorConfig = MARKITECT_EDITOR_CONFIG;
+
+        // === js/core/section-manager.js ===
+/**
+ * SectionManager Component
+ *
+ * Extracted from monolithic editor.js as part of architecture refactoring.
+ * Manages the collection of sections and their state transitions.
+ *
+ * Dependencies:
+ * - EditState enum (imported)
+ * - SectionType enum (imported)
+ * - Section class (imported)
+ * - debug function (imported)
+ */
+
+// Import dependencies - these will be separate modules
+const EditState = Object.freeze({
+    ORIGINAL: 'original',
+    EDITING: 'editing',
+    MODIFIED: 'modified',
+    SAVED: 'saved'
+});
+
+const SectionType = Object.freeze({
+    HEADING: 'heading',
+    PARAGRAPH: 'paragraph',
+    LIST: 'list',
+    CODE: 'code',
+    QUOTE: 'quote',
+    TABLE: 'table',
+    HR: 'hr',
+    IMAGE: 'image'
+});
+
+// Debug function (will be extracted to utils)
+function debug(message, category = 'INFO') {
+    // Simple console debug for now - will be enhanced later
+    console.log(`DEBUG ${category}: ${message}`);
+}
+
+/**
+ * Section Class - manages individual section state and content
+ */
+class Section {
+    constructor(id, markdown, type) {
+        this.id = id;
+        this.originalMarkdown = markdown;
+        this.currentMarkdown = markdown;
+        this.editingMarkdown = markdown;
+        this.pendingMarkdown = null;
+        this.type = type;
+        this.state = EditState.ORIGINAL;
+        this.domElement = null;
+        this.lastSaved = null;
+        this.created = new Date();
+    }
+
+    static generateId(markdown, position, strategy = 'hash', parentId = null) {
+        return this.generateIdWithStrategy(markdown, position, strategy, parentId);
+    }
+
+    static generateIdWithStrategy(markdown, position, strategy = 'hash', parentId = null) {
+        const sanitizedContent = this.sanitizeContentForId(markdown);
+        const normalizedContent = this.normalizeContentForHashing(sanitizedContent);
+        const sectionType = this.detectType(markdown);
+
+        switch (strategy) {
+            case 'timestamp':
+                return this.generateTimestampId(normalizedContent, position, sectionType);
+            case 'sequential':
+                return this.generateSequentialId(normalizedContent, position, sectionType);
+            case 'hierarchical':
+                return this.generateHierarchicalId(normalizedContent, position, parentId);
+            case 'hash':
+            default:
+                return this.generateAdvancedId(normalizedContent, position, sectionType);
+        }
+    }
+
+    static generateAdvancedId(content, position, sectionType) {
+        const contentHash = this.generateCryptoHash(content);
+        const safeType = sectionType || 'paragraph';
+        const typePrefix = safeType.substring(0, 3);
+        const positionHex = position.toString(16).padStart(2, '0');
+
+        return `section-${typePrefix}-${contentHash}-${positionHex}`;
+    }
+
+    static generateCryptoHash(content) {
+        let hash = 0;
+        if (content.length === 0) return '00000000';
+
+        for (let i = 0; i < content.length; i++) {
+            const char = content.charCodeAt(i);
+            hash = ((hash << 5) - hash) + char;
+            hash = hash & hash;
+        }
+
+        const hexHash = Math.abs(hash).toString(16).padStart(8, '0');
+        return hexHash.substring(0, 8);
+    }
+
+    static normalizeContentForHashing(content) {
+        if (!content || typeof content !== 'string') {
+            return '';
+        }
+
+        return content
+            .trim()
+            .replace(/\s+/g, ' ')
+            .replace(/\r\n/g, '\n')
+            .toLowerCase();
+    }
+
+    static sanitizeContentForId(content) {
+        if (!content || typeof content !== 'string') {
+            return '';
+        }
+
+        return content
+            .replace(/<[^>]*>/g, '')
+            .replace(/javascript:/gi, '')
+            .replace(/[^\w\s\-_.#]/g, '')
+            .trim();
+    }
+
+    static generateTimestampId(content, position = 0, sectionType = 'paragraph') {
+        const timestamp = Date.now().toString(36);
+        const contentSnippet = this.generateCryptoHash(content || '').substring(0, 4);
+        const safeType = sectionType || 'paragraph';
+        const typePrefix = safeType.substring(0, 3);
+
+        return `section-${typePrefix}-${contentSnippet}-${timestamp}`;
+    }
+
+    static generateSequentialId(content, position, sectionType = 'paragraph') {
+        const safeType = sectionType || 'paragraph';
+        const typePrefix = safeType.substring(0, 3);
+        const seqNumber = (position || 0).toString().padStart(3, '0');
+        const contentHash = this.generateCryptoHash(content || '').substring(0, 4);
+
+        return `section-${typePrefix}-seq${seqNumber}-${contentHash}`;
+    }
+
+    static generateHierarchicalId(content, position, parentId = null) {
+        const contentHash = this.generateCryptoHash(content || '').substring(0, 6);
+
+        if (parentId) {
+            const childIndex = (position || 0).toString().padStart(2, '0');
+            return `${parentId}-child-${childIndex}-${contentHash}`;
+        } else {
+            return `section-root-${position || 0}-${contentHash}`;
+        }
+    }
+
+    static detectType(markdown) {
+        if (!markdown || typeof markdown !== 'string') {
+            return SectionType.PARAGRAPH;
+        }
+
+        const content = markdown.replace(/^\n+|\n+$/g, '');
+        if (!content) {
+            return SectionType.PARAGRAPH;
+        }
+
+        const trimmed = content.trim();
+
+        // Detection order matters - most specific first
+        if (this.isHeading(trimmed)) {
+            return SectionType.HEADING;
+        }
+
+        if (this.isImage(trimmed)) {
+            return SectionType.IMAGE;
+        }
+
+        if (this.isCodeBlock(trimmed)) {
+            return SectionType.CODE;
+        }
+
+        return SectionType.PARAGRAPH;
+    }
+
+    static isHeading(trimmed) {
+        const headingPattern = /^#{1,6}\s+.+/;
+        return headingPattern.test(trimmed);
+    }
+
+    static isImage(trimmed) {
+        const imagePattern = /!\[.*?\]\([^)]+\)/;
+        return imagePattern.test(trimmed);
+    }
+
+    static isCodeBlock(trimmed) {
+        if (trimmed.startsWith('```') || trimmed.startsWith('~~~')) {
+            return true;
+        }
+        if (trimmed.includes('```') || trimmed.includes('~~~')) {
+            const codeBlockPattern = /```[\s\S]*?```|~~~[\s\S]*?~~~/;
+            if (codeBlockPattern.test(trimmed)) {
+                return true;
+            }
+        }
+        return false;
+    }
+
+    startEdit() {
+        if (this.state === EditState.EDITING) {
+            throw new Error(`Section ${this.id} is already being edited`);
+        }
+        this.editingMarkdown = this.pendingMarkdown || this.currentMarkdown;
+        this.state = EditState.EDITING;
+        return this.editingMarkdown;
+    }
+
+    updateContent(markdown) {
+        if (this.state !== EditState.EDITING) {
+            throw new Error(`Section ${this.id} is not in editing state`);
+        }
+        this.editingMarkdown = markdown;
+    }
+
+    acceptChanges() {
+        if (this.state !== EditState.EDITING) {
+            throw new Error(`Section ${this.id} is not in editing state`);
+        }
+        this.currentMarkdown = this.editingMarkdown;
+        this.editingMarkdown = null;
+        this.pendingMarkdown = null;
+        this.state = EditState.SAVED;
+        this.lastSaved = new Date();
+        return this.currentMarkdown;
+    }
+
+    cancelChanges() {
+        if (this.state !== EditState.EDITING) {
+            throw new Error(`Section ${this.id} is not in editing state`);
+        }
+        this.editingMarkdown = null;
+        if (this.pendingMarkdown !== null) {
+            this.state = EditState.MODIFIED;
+            return this.pendingMarkdown;
+        } else if (this.lastSaved !== null) {
+            this.state = EditState.SAVED;
+            return this.currentMarkdown;
+        } else {
+            this.state = this.hasChanges() ? EditState.MODIFIED : EditState.ORIGINAL;
+            return this.currentMarkdown;
+        }
+    }
+
+    stopEditing() {
+        if (this.state !== EditState.EDITING) {
+            return this.state;
+        }
+
+        if (this.editingMarkdown && this.editingMarkdown !== this.currentMarkdown) {
+            this.pendingMarkdown = this.editingMarkdown;
+            this.state = EditState.MODIFIED;
+        } else {
+            this.pendingMarkdown = null;
+            if (this.lastSaved !== null) {
+                this.state = EditState.SAVED;
+            } else {
+                this.state = this.hasChanges() ? EditState.MODIFIED : EditState.ORIGINAL;
+            }
+        }
+
+        this.editingMarkdown = null;
+        return this.state;
+    }
+
+    resetToOriginal() {
+        this.currentMarkdown = this.originalMarkdown;
+        this.editingMarkdown = this.originalMarkdown;
+        this.pendingMarkdown = null;
+        this.state = EditState.ORIGINAL;
+        return this.originalMarkdown;
+    }
+
+    isEditing() {
+        return this.state === EditState.EDITING;
+    }
+
+    hasChanges() {
+        return this.currentMarkdown !== this.originalMarkdown;
+    }
+
+    getStatus() {
+        return {
+            id: this.id,
+            state: this.state,
+            hasChanges: this.hasChanges(),
+            isEditing: this.isEditing(),
+            contentLength: this.currentMarkdown.length,
+            lastSaved: this.lastSaved,
+            type: this.type,
+            originalLength: this.originalMarkdown.length,
+            currentLength: this.currentMarkdown.length
+        };
+    }
+
+    isImage() {
+        return this.type === SectionType.IMAGE;
+    }
+
+    redetectType(content = null) {
+        const markdown = content || this.currentMarkdown;
+        const oldType = this.type;
+        this.type = Section.detectType(markdown);
+
+        if (oldType !== this.type) {
+            debug(`Section ${this.id} type changed from ${oldType} to ${this.type}`, 'TYPE_DETECTION');
+        }
+
+        return this.type;
+    }
+}
+
+/**
+ * SectionManager - Manages the collection of sections
+ */
+class SectionManager {
+    constructor() {
+        this.sections = new Map();
+        this.listeners = new Map();
+        this.statusInterval = null;
+        this.lastStatusUpdate = new Date().toISOString();
+    }
+
+    on(event, callback) {
+        if (!this.listeners.has(event)) {
+            this.listeners.set(event, []);
+        }
+        this.listeners.get(event).push(callback);
+    }
+
+    emit(event, data) {
+        if (this.listeners.has(event)) {
+            this.listeners.get(event).forEach(callback => callback(data));
+        }
+    }
+
+    createSectionsFromMarkdown(markdownContent) {
+        // Split content into blocks separated by double newlines
+        const blocks = markdownContent.split(/\n\s*\n/);
+        const sections = [];
+        let position = 0;
+
+        for (const block of blocks) {
+            const trimmedBlock = block.trim();
+            if (!trimmedBlock) continue;
+
+            // Check if this block should be split further
+            const lines = trimmedBlock.split('\n');
+            let currentSection = '';
+
+            for (let i = 0; i < lines.length; i++) {
+                const line = lines[i];
+                const isHeading = /^#{1,6}\s/.test(line.trim());
+                const isImage = /^\s*!\[.*?\]\(.*?\)\s*$/.test(line);
+
+                // Each heading or image starts a new section
+                if ((isHeading || isImage) && currentSection.trim()) {
+                    // Save the previous section
+                    const sectionId = Section.generateId(currentSection, position);
+                    const sectionType = Section.detectType(currentSection);
+                    const section = new Section(sectionId, currentSection.trim(), sectionType);
+                    sections.push(section);
+                    this.sections.set(sectionId, section);
+                    position++;
+                    currentSection = line;
+                } else {
+                    if (currentSection) currentSection += '\n';
+                    currentSection += line;
+                }
+            }
+
+            // Save the final section from this block
+            if (currentSection.trim()) {
+                const sectionId = Section.generateId(currentSection, position);
+                const sectionType = Section.detectType(currentSection);
+                const section = new Section(sectionId, currentSection.trim(), sectionType);
+                sections.push(section);
+                this.sections.set(sectionId, section);
+                position++;
+            }
+        }
+
+        this.emit('sections-created', { sections, count: sections.length });
+        return sections;
+    }
+
+    startEditing(sectionId) {
+        debug('MANAGER: startEditing called for: ' + sectionId, 'MANAGER');
+
+        const section = this.sections.get(sectionId);
+        if (!section) {
+            throw new Error(`Section ${sectionId} not found`);
+        }
+
+        if (section.isEditing()) {
+            debug('MANAGER: Section already in editing state: ' + sectionId, 'MANAGER');
+            return section.editingMarkdown;
+        }
+
+        debug('MANAGER: Starting edit for section: ' + sectionId, 'MANAGER');
+        const content = section.startEdit();
+
+        debug('MANAGER: About to emit edit-started event for: ' + sectionId, 'MANAGER');
+        this.emit('edit-started', { sectionId, content, section: section.getStatus() });
+        debug('MANAGER: Emitted edit-started event for: ' + sectionId, 'MANAGER');
+
+        return content;
+    }
+
+    updateContent(sectionId, markdown) {
+        const section = this.sections.get(sectionId);
+        if (!section) {
+            throw new Error(`Section ${sectionId} not found`);
+        }
+
+        const oldType = section.type;
+        section.updateContent(markdown);
+        const newType = section.redetectType(markdown);
+
+        const eventData = {
+            sectionId,
+            markdown,
+            section: section.getStatus(),
+            typeChanged: oldType !== newType,
+            oldType,
+            newType
+        };
+
+        this.emit('content-updated', eventData);
+
+        if (oldType !== newType) {
+            this.emit('section-type-changed', {
+                sectionId,
+                oldType,
+                newType,
+                section: section.getStatus()
+            });
+        }
+    }
+
+    acceptChanges(sectionId) {
+        const section = this.sections.get(sectionId);
+        if (!section) {
+            throw new Error(`Section ${sectionId} not found`);
+        }
+
+        const content = section.acceptChanges();
+        this.emit('changes-accepted', { sectionId, content, section: section.getStatus() });
+        return content;
+    }
+
+    cancelChanges(sectionId) {
+        const section = this.sections.get(sectionId);
+        if (!section) {
+            throw new Error(`Section ${sectionId} not found`);
+        }
+
+        const content = section.cancelChanges();
+        this.emit('changes-cancelled', { sectionId, content, section: section.getStatus() });
+        return content;
+    }
+
+    resetSection(sectionId) {
+        const section = this.sections.get(sectionId);
+        if (!section) {
+            throw new Error(`Section ${sectionId} not found`);
+        }
+
+        const content = section.resetToOriginal();
+        this.emit('section-reset', { sectionId, content, section: section.getStatus() });
+        return content;
+    }
+
+    getDocumentMarkdown() {
+        const sortedSections = Array.from(this.sections.values())
+            .sort((a, b) => a.created - b.created);
+
+        return sortedSections.map(section => section.currentMarkdown).join('\n\n');
+    }
+
+    getAllSections() {
+        return Array.from(this.sections.values());
+    }
+
+    getDocumentStatus() {
+        const sections = Array.from(this.sections.values());
+        const editingSections = sections.filter(section => section.isEditing).length;
+
+        return {
+            totalSections: sections.length,
+            editingSections: editingSections
+        };
+    }
+
+    extractHeadings(content) {
+        if (!content) return [];
+        const lines = content.split('\n');
+        return lines.filter(line => /^#{1,6}\s/.test(line.trim()));
+    }
+
+    handleSectionSplit(sectionId, newContent) {
+        const section = this.sections.get(sectionId);
+        if (!section) {
+            throw new Error(`Section ${sectionId} not found`);
+        }
+
+        // Remove the original section
+        this.sections.delete(sectionId);
+
+        // Create new sections from the content
+        const newSections = this.createSectionsFromMarkdown(newContent);
+
+        // Emit section-split event
+        this.emit('section-split', {
+            originalSectionId: sectionId,
+            newSections: newSections,
+            count: newSections.length
+        });
+
+        return newSections;
+    }
+
+    createSectionsFromContent(content) {
+        return this.createSectionsFromMarkdown(content);
+    }
+}
+
+// Export for use in tests and other modules
+if (typeof module !== 'undefined' && module.exports) {
+    module.exports = { SectionManager, Section, EditState, SectionType };
+}
+
+// Export for browser use
+if (typeof window !== 'undefined') {
+    window.SectionManager = SectionManager;
+    window.Section = Section;
+    window.EditState = EditState;
+    window.SectionType = SectionType;
+}
+
+// === js/components/debug-panel.js ===
+/**
+ * DebugPanel Component
+ *
+ * Extracted from monolithic editor.js as part of architecture refactoring.
+ * Handles debug message display and management for client-side debugging.
+ *
+ * Dependencies:
+ * - None (standalone component)
+ */
+
+/**
+ * DebugPanel - Manages debug message display and interaction
+ */
+class DebugPanel {
+    constructor() {
+        this.messages = [];
+        this.isActive = false;
+        this.maxMessages = 1000; // Keep last 1000 messages
+    }
+
+    /**
+     * Add a debug message
+     */
+    addMessage(message, category = 'INFO') {
+        const messageObj = {
+            message,
+            category,
+            timestamp: new Date().toLocaleTimeString()
+        };
+
+        this.messages.push(messageObj);
+
+        // Keep only last maxMessages
+        if (this.messages.length > this.maxMessages) {
+            this.messages = this.messages.slice(-this.maxMessages);
+        }
+
+        // Auto-update if panel is visible
+        if (this.isActive) {
+            this.update();
+        }
+    }
+
+    /**
+     * Toggle the debug panel on/off
+     */
+    toggle() {
+        const debugContainer = document.getElementById('debug-messages-container');
+        const debugButton = document.getElementById('toggle-debug');
+
+        if (!debugContainer || !debugButton) {
+            console.warn('DebugPanel: Required DOM elements not found');
+            return;
+        }
+
+        if (this.isActive) {
+            this.hide();
+        } else {
+            this.show();
+        }
+    }
+
+    /**
+     * Show the debug panel
+     */
+    show() {
+        const debugContainer = document.getElementById('debug-messages-container');
+        const debugButton = document.getElementById('toggle-debug');
+
+        if (!debugContainer || !debugButton) {
+            console.warn('DebugPanel: Required DOM elements not found');
+            return;
+        }
+
+        debugContainer.style.display = 'block';
+        debugButton.textContent = '🔍 Debug (ON)';
+        debugButton.style.background = '#28a745';
+        this.isActive = true;
+        this.update();
+    }
+
+    /**
+     * Hide the debug panel
+     */
+    hide() {
+        const debugContainer = document.getElementById('debug-messages-container');
+        const debugButton = document.getElementById('toggle-debug');
+
+        if (!debugContainer || !debugButton) {
+            console.warn('DebugPanel: Required DOM elements not found');
+            return;
+        }
+
+        debugContainer.style.display = 'none';
+        debugButton.textContent = '🔍 Debug';
+        debugButton.style.background = '#6c757d';
+        this.isActive = false;
+    }
+
+    /**
+     * Update the debug panel with current messages
+     */
+    update() {
+        const debugContainer = document.getElementById('debug-messages-container');
+        if (!debugContainer || !this.isActive) {
+            return;
+        }
+
+        if (this.messages.length === 0) {
+            debugContainer.innerHTML = '<div style="color: #6c757d; font-style: italic; padding: 12px;">No debug messages yet. Click sections to generate debug output.</div>';
+            return;
+        }
+
+        // Show the last 50 messages in reverse order (newest first)
+        const recentMessages = this.messages.slice(-50).reverse();
+
+        const messagesHtml = recentMessages.map(msg => {
+            const categoryColor = {
+                'INFO': '#17a2b8',
+                'WARNING': '#ffc107',
+                'ERROR': '#dc3545',
+                'SUCCESS': '#28a745',
+                'DEBUG': '#6f42c1'
+            }[msg.category] || '#6c757d';
+
+            return `
+                <div style="margin-bottom: 6px; padding: 4px; border-left: 3px solid ${categoryColor}; background: white; border-radius: 2px;">
+                    <span style="color: #6c757d; font-size: 11px;">[${msg.timestamp}]</span>
+                    <span style="color: ${categoryColor}; font-weight: bold;">${msg.category}:</span>
+                    <span style="color: #333;">${msg.message}</span>
+                </div>
+            `;
+        }).join('');
+
+        debugContainer.innerHTML = `
+            <div style="margin-bottom: 8px; padding: 6px; background: #e9ecef; border-radius: 4px; font-weight: bold; color: #495057;">
+                Debug Messages (${this.messages.length} total, showing last ${recentMessages.length})
+                <button id="debug-clear-btn" style="float: right; background: #dc3545; color: white; border: none; padding: 2px 6px; border-radius: 2px; font-size: 11px; cursor: pointer;">Clear</button>
+            </div>
+            <div style="max-height: 250px; overflow-y: auto;">
+                ${messagesHtml}
+            </div>
+        `;
+
+        // Add event listener for clear button
+        const clearBtn = debugContainer.querySelector('#debug-clear-btn');
+        if (clearBtn) {
+            clearBtn.addEventListener('click', () => {
+                this.clear();
+            });
+        }
+
+        // Auto-scroll to bottom to show newest messages
+        const scrollContainer = debugContainer.querySelector('div[style*="overflow-y"]');
+        if (scrollContainer) {
+            scrollContainer.scrollTop = scrollContainer.scrollHeight;
+        }
+    }
+
+    /**
+     * Clear all debug messages
+     */
+    clear() {
+        this.messages = [];
+        this.update();
+    }
+
+    /**
+     * Get the number of messages
+     */
+    getMessageCount() {
+        return this.messages.length;
+    }
+
+    /**
+     * Get recent messages
+     */
+    getRecentMessages(count = 10) {
+        return this.messages.slice(-count);
+    }
+}
+
+// Export for use in tests and other modules
+if (typeof module !== 'undefined' && module.exports) {
+    module.exports = { DebugPanel };
+}
+
+// Export for browser use
+if (typeof window !== 'undefined') {
+    window.DebugPanel = DebugPanel;
+}
+
+// === js/components/document-controls.js ===
+/**
+ * DocumentControls Component
+ *
+ * Extracted from monolithic editor.js as part of architecture refactoring.
+ * Handles the floating control panel and document-level actions.
+ *
+ * Dependencies:
+ * - None (standalone component)
+ */
+
+/**
+ * DocumentControls - Manages the floating control panel and its buttons
+ */
+class DocumentControls {
+    constructor() {
+        this.controlPanel = null;
+        this.buttons = new Map();
+        this.eventHandlers = new Map();
+        this.isVisible = true;
+    }
+
+    /**
+     * Create the control panel and add it to the DOM
+     */
+    create() {
+        if (this.controlPanel) {
+            this.destroy(); // Remove existing panel
+        }
+
+        // Also remove any existing panel with the same ID in the DOM
+        const existingPanel = document.getElementById('markitect-global-controls');
+        if (existingPanel && existingPanel.parentNode) {
+            existingPanel.parentNode.removeChild(existingPanel);
+        }
+
+        // Create the floating control panel
+        this.controlPanel = document.createElement('div');
+        this.controlPanel.id = 'markitect-global-controls';
+        this.controlPanel.style.cssText = `
+            position: fixed;
+            top: 20px;
+            right: 20px;
+            background: rgba(248, 249, 250, 0.95);
+            border: 1px solid #dee2e6;
+            border-radius: 8px;
+            padding: 12px;
+            box-shadow: 0 4px 12px rgba(0,0,0,0.15);
+            z-index: 1000;
+            backdrop-filter: blur(8px);
+            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+            font-size: 14px;
+            min-width: 200px;
+        `;
+
+        // Add title
+        const title = document.createElement('div');
+        title.style.cssText = `
+            font-weight: 600;
+            margin-bottom: 8px;
+            color: #495057;
+            border-bottom: 1px solid #dee2e6;
+            padding-bottom: 4px;
+        `;
+        title.textContent = 'Document Controls';
+
+        // Create button container
+        const buttonContainer = document.createElement('div');
+        buttonContainer.id = 'button-container';
+        buttonContainer.style.cssText = `
+            display: flex;
+            flex-direction: column;
+            gap: 6px;
+        `;
+
+        this.controlPanel.appendChild(title);
+        this.controlPanel.appendChild(buttonContainer);
+
+        // Add default buttons
+        this.addDefaultButtons();
+
+        // Add debug messages container
+        this.addDebugContainer();
+
+        // Add to DOM
+        document.body.appendChild(this.controlPanel);
+    }
+
+    /**
+     * Add default buttons to the control panel
+     */
+    addDefaultButtons() {
+        // Save Document button
+        this.addButton('save-document', '💾 Save Document', '#28a745');
+
+        // Reset All button
+        this.addButton('reset-all', '🔄 Reset All', '#ffc107', '#212529');
+
+        // Show Status button
+        this.addButton('show-status', '📊 Show Status', '#17a2b8');
+
+        // Debug button
+        this.addButton('toggle-debug', '🔍 Debug', '#6c757d');
+    }
+
+    /**
+     * Add debug container to the control panel
+     */
+    addDebugContainer() {
+        const debugContainer = document.createElement('div');
+        debugContainer.id = 'debug-messages-container';
+        debugContainer.style.cssText = `
+            margin-top: 12px;
+            max-height: 300px;
+            overflow-y: auto;
+            border: 1px solid #dee2e6;
+            border-radius: 4px;
+            background: #f8f9fa;
+            padding: 8px;
+            font-family: 'Courier New', monospace;
+            font-size: 12px;
+            line-height: 1.4;
+            display: none;
+        `;
+
+        this.controlPanel.appendChild(debugContainer);
+    }
+
+    /**
+     * Add a button to the control panel
+     */
+    addButton(id, text, backgroundColor, textColor = 'white') {
+        const buttonContainer = this.controlPanel.querySelector('#button-container');
+        if (!buttonContainer) {
+            throw new Error('Button container not found. Call create() first.');
+        }
+
+        const button = document.createElement('button');
+        button.id = id;
+        button.textContent = text;
+        button.style.cssText = `
+            background: ${backgroundColor};
+            color: ${textColor};
+            border: none;
+            padding: 8px 12px;
+            border-radius: 4px;
+            cursor: pointer;
+            font-size: 13px;
+            font-weight: 500;
+            transition: background-color 0.2s;
+        `;
+
+        buttonContainer.appendChild(button);
+        this.buttons.set(id, button);
+
+        return button;
+    }
+
+    /**
+     * Remove a button from the control panel
+     */
+    removeButton(id) {
+        const button = this.buttons.get(id);
+        if (button && button.parentNode) {
+            button.parentNode.removeChild(button);
+            this.buttons.delete(id);
+            this.eventHandlers.delete(id);
+        }
+    }
+
+    /**
+     * Set event handlers for buttons
+     */
+    setEventHandlers(handlers) {
+        for (const [buttonId, handler] of Object.entries(handlers)) {
+            const button = this.buttons.get(buttonId);
+            if (button) {
+                // Remove existing handler if any
+                if (this.eventHandlers.has(buttonId)) {
+                    button.removeEventListener('click', this.eventHandlers.get(buttonId));
+                }
+
+                // Add new handler
+                button.addEventListener('click', handler);
+                this.eventHandlers.set(buttonId, handler);
+            }
+        }
+    }
+
+    /**
+     * Show the control panel
+     */
+    show() {
+        if (this.controlPanel) {
+            this.controlPanel.style.display = 'block';
+            this.isVisible = true;
+        }
+    }
+
+    /**
+     * Hide the control panel
+     */
+    hide() {
+        if (this.controlPanel) {
+            this.controlPanel.style.display = 'none';
+            this.isVisible = false;
+        }
+    }
+
+    /**
+     * Update status display (can be extended as needed)
+     */
+    updateStatus(status) {
+        // This method can be extended to show status information
+        // For now, it just stores the status for potential display
+        this.lastStatus = status;
+
+        // Could update a status indicator in the panel if needed
+        if (status && this.controlPanel) {
+            const title = this.controlPanel.querySelector('div');
+            if (title) {
+                const statusText = `Document Controls (${status.totalSections} sections, ${status.editingSections} editing)`;
+                // Could update title or add status indicator
+            }
+        }
+    }
+
+    /**
+     * Get the control panel element
+     */
+    getControlPanel() {
+        return this.controlPanel;
+    }
+
+    /**
+     * Destroy the control panel and clean up
+     */
+    destroy() {
+        if (this.controlPanel && this.controlPanel.parentNode) {
+            this.controlPanel.parentNode.removeChild(this.controlPanel);
+        }
+
+        // Clean up references
+        this.controlPanel = null;
+        this.buttons.clear();
+        this.eventHandlers.clear();
+        this.isVisible = true;
+    }
+
+    /**
+     * Check if the control panel is visible
+     */
+    isVisible() {
+        return this.isVisible && this.controlPanel && this.controlPanel.style.display !== 'none';
+    }
+
+    /**
+     * Get all button IDs
+     */
+    getButtonIds() {
+        return Array.from(this.buttons.keys());
+    }
+
+    /**
+     * Get a specific button by ID
+     */
+    getButton(id) {
+        return this.buttons.get(id);
+    }
+}
+
+// Export for use in tests and other modules
+if (typeof module !== 'undefined' && module.exports) {
+    module.exports = { DocumentControls };
+}
+
+// Export for browser use
+if (typeof window !== 'undefined') {
+    window.DocumentControls = DocumentControls;
+}
+
+// === js/components/dom-renderer.js ===
+/**
+ * DOMRenderer Component
+ *
+ * Extracted from monolithic editor.js as part of architecture refactoring.
+ * Handles all DOM interactions and UI rendering for section editing.
+ *
+ * Dependencies:
+ * - FloatingMenu component (to be extracted)
+ * - debug function (imported from utils)
+ */
+
+// Import dependencies (placeholders for now)
+function debug(message, category = 'INFO') {
+    console.log(`DEBUG ${category}: ${message}`);
+}
+
+/**
+ * Simple FloatingMenu implementation (will be extracted to separate component later)
+ */
+class FloatingMenu {
+    constructor(sectionId, type, renderer) {
+        this.sectionId = sectionId;
+        this.type = type;
+        this.renderer = renderer;
+        this.element = null;
+        this.isVisible = false;
+    }
+
+    show(contentElement, controlsElement) {
+        if (this.isVisible) this.hide();
+
+        const targetElement = this.renderer.findSectionElement(this.sectionId);
+        if (!targetElement) return null;
+
+        // Get content dimensions and position
+        const rect = targetElement.getBoundingClientRect();
+        const viewport = {
+            width: window.innerWidth,
+            height: window.innerHeight
+        };
+
+        // Calculate content width and responsive extension
+        const contentWidth = rect.width;
+        const buttonAreaWidth = 120; // Space needed for buttons
+        const minMenuWidth = Math.max(300, contentWidth); // At least content width or 300px
+        const preferredMenuWidth = contentWidth + buttonAreaWidth;
+
+        // Check if we have space to extend to the right
+        const spaceOnRight = viewport.width - rect.right;
+        const canExtendRight = spaceOnRight >= buttonAreaWidth + 20; // 20px margin
+
+        // Determine final menu width
+        let menuWidth;
+        if (canExtendRight && viewport.width >= 800) { // Only on wide screens
+            menuWidth = Math.min(preferredMenuWidth, viewport.width - rect.left - 20);
+        } else {
+            menuWidth = Math.min(minMenuWidth, viewport.width - 40); // 20px margins
+        }
+
+        // Create floating menu element
+        this.element = document.createElement('div');
+        this.element.className = 'ui-edit-floating-menu';
+        this.element.style.cssText = `
+            position: fixed;
+            z-index: 10000;
+            background: white;
+            border: 1px solid #ddd;
+            border-radius: 8px;
+            box-shadow: 0 4px 12px rgba(0,0,0,0.15);
+            padding: 0;
+            width: ${menuWidth}px;
+            box-sizing: border-box;
+        `;
+
+        // Add headline
+        const headline = document.createElement('div');
+        headline.className = 'ui-edit-headline';
+        headline.textContent = `Editing ${this.type === 'image' ? 'Image' : 'Section'}`;
+        headline.style.cssText = `
+            background: #f8f9fa;
+            border-bottom: 1px solid #ddd;
+            padding: 8px 16px;
+            font-weight: 600;
+            font-size: 12px;
+            color: #495057;
+            border-radius: 8px 8px 0 0;
+            text-transform: uppercase;
+            letter-spacing: 0.5px;
+        `;
+
+        // Create content wrapper with padding
+        const contentWrapper = document.createElement('div');
+        contentWrapper.style.cssText = `
+            padding: 16px;
+        `;
+
+        this.element.appendChild(headline);
+
+        // Position directly over content (overlay positioning)
+        let left = rect.left;
+        let top = rect.top;
+
+        // Ensure menu doesn't go off-screen horizontally
+        if (left + menuWidth > viewport.width) {
+            left = viewport.width - menuWidth - 20;
+        }
+        if (left < 10) {
+            left = 10;
+        }
+
+        // For vertical positioning, prefer staying on top of content
+        // Only move if absolutely necessary
+        const menuHeight = this.type === 'image' ? 350 : 200; // Better height estimates
+        const wouldGoOffBottom = top + menuHeight > viewport.height;
+        const wouldGoOffTop = top < 10;
+
+        if (wouldGoOffBottom && !wouldGoOffTop) {
+            // Try to fit by moving up, but keep some overlay if possible
+            const maxTop = viewport.height - menuHeight - 10;
+            top = Math.max(rect.top - 50, maxTop); // Prefer staying near original position
+        } else if (wouldGoOffTop) {
+            top = 10; // Minimum distance from top
+        }
+        // Otherwise, keep the original overlay position
+
+        this.element.style.left = `${left}px`;
+        this.element.style.top = `${top}px`;
+
+        // Add content to wrapper
+        if (contentElement) {
+            contentWrapper.appendChild(contentElement);
+        }
+        if (controlsElement) {
+            contentWrapper.appendChild(controlsElement);
+        }
+
+        this.element.appendChild(contentWrapper);
+
+        // Add close button to headline
+        const closeButton = document.createElement('button');
+        closeButton.textContent = '×';
+        closeButton.style.cssText = `
+            position: absolute;
+            top: 4px;
+            right: 8px;
+            background: none;
+            border: none;
+            font-size: 18px;
+            cursor: pointer;
+            color: #666;
+            width: 24px;
+            height: 24px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            border-radius: 4px;
+            transition: background-color 0.2s ease;
+        `;
+        closeButton.addEventListener('mouseover', () => {
+            closeButton.style.backgroundColor = '#e9ecef';
+        });
+        closeButton.addEventListener('mouseout', () => {
+            closeButton.style.backgroundColor = 'transparent';
+        });
+        closeButton.addEventListener('click', (event) => {
+            event.stopPropagation();
+            this.hide();
+        });
+        this.element.appendChild(closeButton);
+
+        document.body.appendChild(this.element);
+        this.isVisible = true;
+
+        return this.element;
+    }
+
+    hide() {
+        if (this.element && this.element.parentNode) {
+            this.element.parentNode.removeChild(this.element);
+        }
+        this.element = null;
+        this.isVisible = false;
+
+        // Stop editing state in the section manager
+        const section = this.renderer.sectionManager.sections.get(this.sectionId);
+        if (section && section.isEditing()) {
+            section.stopEditing();
+        }
+
+        // Remove from editing sections
+        this.renderer.editingSections.delete(this.sectionId);
+    }
+}
+
+/**
+ * DOMRenderer - Handles DOM interactions and section rendering
+ */
+class DOMRenderer {
+    constructor(sectionManager, container) {
+        this.sectionManager = sectionManager;
+        this.container = container;
+        this.editingSections = new Set();
+        this.currentFloatingMenu = null;
+        this.eventListenersAttached = false;
+        this.lastClickTime = 0;
+        this.clickDebounceMs = 300; // Prevent rapid clicks
+
+        // Enhanced Event System - Track event types
+        this.eventHistory = [];
+        this.eventStats = {
+            'section-click': 0,
+            'section-hover-enter': 0,
+            'section-hover-leave': 0,
+            'keyboard-shortcut': 0,
+            'section-drag-start': 0,
+            'section-drag-over': 0,
+            'section-drop': 0,
+            'section-focus-in': 0,
+            'section-focus-out': 0,
+            'section-context-menu': 0
+        };
+
+        // Bind event handlers
+        this.handleSectionClick = this.handleSectionClick.bind(this);
+        this.handleKeydown = this.handleKeydown.bind(this);
+
+        this.setupEventListeners();
+    }
+
+    setupEventListeners() {
+        this.sectionManager.on('sections-created', (data) => {
+            this.renderAllSections(data.sections);
+        });
+        this.sectionManager.on('edit-started', (data) => {
+            debug('EVENT: edit-started event received for: ' + data.sectionId, 'EVENT');
+            this.showEditor(data.sectionId, data.content);
+        });
+    }
+
+    /**
+     * Render all sections to the DOM
+     */
+    renderAllSections(sections) {
+        debug('21: renderAllSections called with ' + sections.length + ' sections', 'RENDER');
+
+        // Clear container
+        this.container.innerHTML = '';
+        debug('22: Container cleared', 'RENDER');
+
+        const contentArea = this.container.querySelector('#markdown-content') || this.container;
+
+        // Render each section
+        sections.forEach((section, index) => {
+            debug('23: Creating element for section ' + (index + 1) + ': ' + section.id, 'RENDER');
+            const element = this.renderSection(section);
+            if (element) {
+                contentArea.appendChild(element);
+            }
+        });
+
+        debug('24: All section elements added to container', 'RENDER');
+
+        // Attach event listeners only once
+        if (!this.eventListenersAttached) {
+            this.container.addEventListener('click', this.handleSectionClick);
+            this.eventListenersAttached = true;
+            debug('25: Enhanced event listeners attached for the first time', 'RENDER');
+        } else {
+            debug('25: Event listeners already attached, skipping', 'RENDER');
+        }
+
+        debug('25: Container content length: ' + this.container.innerHTML.length, 'RENDER');
+    }
+
+    /**
+     * Render a single section to DOM element
+     */
+    renderSection(section) {
+        const element = document.createElement('div');
+        element.className = 'ui-edit-section';
+        element.setAttribute('data-section-id', section.id);
+
+        // Add section content
+        // Render all sections using markdown rendering (images need HTML conversion too)
+        const content = this.simpleMarkdownRender(section.currentMarkdown);
+        element.innerHTML = content;
+
+        // Add styling
+        element.style.cssText = `
+            margin: 16px 0;
+            padding: 12px;
+            border: 1px solid transparent;
+            border-radius: 4px;
+            cursor: pointer;
+            transition: all 0.2s ease;
+        `;
+
+        element.addEventListener('mouseenter', () => {
+            element.style.backgroundColor = 'rgba(0, 122, 204, 0.05)';
+            element.style.borderColor = 'rgba(0, 122, 204, 0.2)';
+        });
+
+        element.addEventListener('mouseleave', () => {
+            if (!section.isEditing()) {
+                element.style.backgroundColor = 'transparent';
+                element.style.borderColor = 'transparent';
+            }
+        });
+
+        debug('SECTION: Section element setup complete for ' + section.id, 'SECTION');
+        return element;
+    }
+
+    /**
+     * Simple markdown rendering (placeholder)
+     */
+    simpleMarkdownRender(markdown) {
+        return markdown
+            .replace(/^# (.*$)/gim, '<h1>$1</h1>')
+            .replace(/^## (.*$)/gim, '<h2>$1</h2>')
+            .replace(/^### (.*$)/gim, '<h3>$1</h3>')
+            .replace(/!\[(.*?)\]\((.*?)\)/gim, '<img src="$2" alt="$1" style="max-width: 100%; height: auto; display: block; margin: 1rem auto;" />')
+            .replace(/\[([^\]]+)\]\(([^)]+)\)/gim, '<a href="$2" target="_blank">$1</a>')
+            .replace(/\*\*(.*?)\*\*/gim, '<strong>$1</strong>')
+            .replace(/\*(.*?)\*/gim, '<em>$1</em>')
+            .replace(/\n/gim, '<br>');
+    }
+
+    /**
+     * Find DOM element for a section
+     */
+    findSectionElement(sectionId) {
+        return this.container.querySelector(`[data-section-id="${sectionId}"]`);
+    }
+
+    /**
+     * Handle section click events
+     */
+    handleSectionClick(event) {
+        debug('handleSectionClick: Click detected on target: ' + event.target.tagName + ' ' + (event.target.className || ''), 'CLICK');
+
+        // Debounce rapid clicks
+        const now = Date.now();
+        if (now - this.lastClickTime < this.clickDebounceMs) {
+            debug('handleSectionClick: Click debounced (too rapid)', 'CLICK');
+            return;
+        }
+        this.lastClickTime = now;
+
+        // Don't handle clicks on form elements, buttons, or links
+        if (event.target.closest('textarea, button, input, a')) {
+            debug('handleSectionClick: Ignoring click on form element', 'CLICK');
+            return;
+        }
+
+        const sectionElement = event.target.closest('.ui-edit-section');
+        debug('handleSectionClick: Found section element: ' + (sectionElement ? sectionElement.getAttribute('data-section-id') : 'null'), 'CLICK');
+        if (!sectionElement) return;
+
+        const sectionId = sectionElement.getAttribute('data-section-id');
+        debug('handleSectionClick: Section ID: ' + sectionId, 'CLICK');
+        if (!sectionId) return;
+
+        // Track the click event
+        this.trackEvent('section-click', {
+            sectionId,
+            event,
+            timestamp: Date.now()
+        });
+
+        // Check if this section is already being edited
+        const section = this.sectionManager.sections.get(sectionId);
+        debug('handleSectionClick: Found section object: ' + (section ? 'YES' : 'NO'), 'CLICK');
+
+        if (section && section.isEditing()) {
+            debug('handleSectionClick: Section already being edited, checking if dialog is visible: ' + sectionId, 'CLICK');
+            // If section is editing but no dialog is visible, allow re-opening
+            const existingDialog = document.querySelector('.ui-edit-floating-menu');
+            if (existingDialog) {
+                debug('handleSectionClick: Dialog already visible, ignoring click', 'CLICK');
+                return;
+            } else {
+                debug('handleSectionClick: Section editing but no dialog visible, proceeding to show editor', 'CLICK');
+            }
+        }
+
+        debug('handleSectionClick: About to start editing for section: ' + sectionId, 'CLICK');
+
+        try {
+            debug('handleSectionClick: Calling sectionManager.startEditing', 'CLICK');
+            this.sectionManager.startEditing(sectionId);
+            debug('handleSectionClick: Successfully called startEditing', 'CLICK');
+        } catch (error) {
+            debug('handleSectionClick: ERROR in startEditing: ' + error.message, 'ERROR');
+            console.error('Failed to start editing:', error);
+        }
+    }
+
+    /**
+     * Show editor for a section
+     */
+    showEditor(sectionId, content) {
+        debug('showEditor: called for section: ' + sectionId, 'EDITOR');
+
+        const element = this.findSectionElement(sectionId);
+        debug('showEditor: Found element: ' + (element ? 'YES' : 'NO'), 'EDITOR');
+        if (!element) return;
+
+        debug('showEditor: About to hide current editor', 'EDITOR');
+        this.hideCurrentEditor();
+        debug('showEditor: Hidden current editor', 'EDITOR');
+
+        const section = this.sectionManager.sections.get(sectionId);
+        const isImageSection = section && section.isImage();
+
+        if (isImageSection) {
+            this.showImageEditor(sectionId, section);
+            return;
+        }
+
+        // Create content area for text editing
+        const editorContent = document.createElement('div');
+        editorContent.className = 'ui-edit-editor-content';
+
+        // Check if we have space for side-by-side layout
+        const targetElement = this.findSectionElement(sectionId);
+        const rect = targetElement ? targetElement.getBoundingClientRect() : null;
+        const viewport = { width: window.innerWidth, height: window.innerHeight };
+        const hasWideLayout = rect && viewport.width >= 800 && (viewport.width - rect.right) >= 120;
+
+        if (hasWideLayout) {
+            // Side-by-side layout: textarea on left, controls on right
+            editorContent.style.cssText = `
+                display: flex;
+                gap: 16px;
+                flex: 1;
+                min-width: 0;
+                align-items: flex-start;
+            `;
+        } else {
+            // Stacked layout: textarea above, controls below
+            editorContent.style.cssText = `
+                display: flex;
+                flex-direction: column;
+                gap: 12px;
+                flex: 1;
+                min-width: 0;
+            `;
+        }
+
+        // Create textarea container
+        const textareaContainer = document.createElement('div');
+        textareaContainer.style.cssText = hasWideLayout ? 'flex: 1; min-width: 0;' : 'width: 100%;';
+
+        // Create textarea
+        const textarea = document.createElement('textarea');
+        textarea.value = content || section.currentMarkdown;
+        textarea.style.cssText = `
+            width: 100%;
+            min-height: 120px;
+            padding: 12px;
+            border: 1px solid #ddd;
+            border-radius: 4px;
+            font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
+            font-size: 14px;
+            line-height: 1.5;
+            resize: vertical;
+            box-sizing: border-box;
+        `;
+
+        // Create controls
+        const controls = document.createElement('div');
+        if (hasWideLayout) {
+            controls.style.cssText = `
+                display: flex;
+                flex-direction: column;
+                gap: 8px;
+                min-width: 100px;
+                flex-shrink: 0;
+            `;
+        } else {
+            controls.style.cssText = `
+                display: flex;
+                gap: 8px;
+                justify-content: flex-end;
+                flex-wrap: wrap;
+            `;
+        }
+
+        const acceptButton = document.createElement('button');
+        acceptButton.textContent = hasWideLayout ? '✓' : 'Accept';
+        acceptButton.style.cssText = `
+            background: #28a745;
+            color: white;
+            border: none;
+            padding: ${hasWideLayout ? '8px 12px' : '8px 16px'};
+            border-radius: 4px;
+            cursor: pointer;
+            ${hasWideLayout ? 'width: 100%;' : ''}
+            font-size: ${hasWideLayout ? '14px' : '13px'};
+        `;
+
+        const cancelButton = document.createElement('button');
+        cancelButton.textContent = hasWideLayout ? '✗' : 'Cancel';
+        cancelButton.style.cssText = `
+            background: #dc3545;
+            color: white;
+            border: none;
+            padding: ${hasWideLayout ? '8px 12px' : '8px 16px'};
+            border-radius: 4px;
+            cursor: pointer;
+            ${hasWideLayout ? 'width: 100%;' : ''}
+            font-size: ${hasWideLayout ? '14px' : '13px'};
+        `;
+
+        const resetButton = document.createElement('button');
+        resetButton.textContent = hasWideLayout ? '↺' : '↺ Reset';
+        resetButton.style.cssText = `
+            background: #fd7e14;
+            color: white;
+            border: none;
+            padding: ${hasWideLayout ? '8px 12px' : '8px 16px'};
+            border-radius: 4px;
+            cursor: pointer;
+            ${hasWideLayout ? 'width: 100%;' : ''}
+            font-size: ${hasWideLayout ? '14px' : '13px'};
+        `;
+
+        controls.appendChild(acceptButton);
+        controls.appendChild(cancelButton);
+        controls.appendChild(resetButton);
+
+        // Assemble the layout
+        textareaContainer.appendChild(textarea);
+
+        if (hasWideLayout) {
+            editorContent.appendChild(textareaContainer);
+            editorContent.appendChild(controls);
+        } else {
+            editorContent.appendChild(textareaContainer);
+            editorContent.appendChild(controls);
+        }
+
+        // Create floating menu
+        const floatingMenu = new FloatingMenu(sectionId, 'text', this);
+        this.currentFloatingMenu = floatingMenu;
+        this.editingSections.add(sectionId);
+
+        floatingMenu.show(editorContent);
+
+        // Add event listeners
+        acceptButton.addEventListener('click', () => {
+            this.sectionManager.updateContent(sectionId, textarea.value);
+            this.sectionManager.acceptChanges(sectionId);
+            floatingMenu.hide();
+            this.currentFloatingMenu = null; // Clear reference
+        });
+
+        cancelButton.addEventListener('click', () => {
+            this.sectionManager.cancelChanges(sectionId);
+            floatingMenu.hide();
+            this.currentFloatingMenu = null; // Clear reference
+        });
+
+        resetButton.addEventListener('click', () => {
+            // Reset textarea to original content and apply the change
+            const section = this.sectionManager.sections.get(sectionId);
+            if (section) {
+                textarea.value = section.originalMarkdown;
+                // Actually update the section content to original and accept the changes
+                this.sectionManager.updateContent(sectionId, section.originalMarkdown);
+                this.sectionManager.acceptChanges(sectionId);
+                // Close the editor
+                floatingMenu.hide();
+                this.currentFloatingMenu = null;
+            }
+        });
+
+        // Auto-focus textarea
+        setTimeout(() => textarea.focus(), 100);
+    }
+
+    /**
+     * Show advanced image editor with drag & drop, file upload, and preview
+     */
+    showImageEditor(sectionId, section) {
+        debug('showImageEditor: called for image section: ' + sectionId, 'EDITOR');
+
+        // Track staging state for this editor
+        const stagingState = {
+            originalMarkdown: section.originalMarkdown,
+            currentAltText: '',
+            currentImageSrc: '',
+            stagedImageSrc: null,
+            stagedAltText: null,
+            hasChanges: false
+        };
+
+        // Parse markdown to extract image info
+        const imageMatch = section.currentMarkdown.match(/!\[(.*?)\]\((.*?)\)/);
+        if (imageMatch) {
+            const [, altText, imageSrc] = imageMatch;
+            stagingState.currentAltText = altText;
+            stagingState.currentImageSrc = imageSrc;
+        }
+
+        // Check if we have space for side-by-side layout
+        const targetElement = this.findSectionElement(sectionId);
+        const rect = targetElement ? targetElement.getBoundingClientRect() : null;
+        const viewport = { width: window.innerWidth, height: window.innerHeight };
+        const hasWideLayout = rect && viewport.width >= 800 && (viewport.width - rect.right) >= 120;
+
+        // Create image editor content area
+        const editorContent = document.createElement('div');
+        editorContent.className = 'ui-edit-image-content';
+
+        if (hasWideLayout) {
+            // Side-by-side layout: content on left, controls on right
+            editorContent.style.cssText = `
+                display: flex;
+                gap: 16px;
+                flex: 1;
+                min-width: 0;
+                align-items: flex-start;
+            `;
+        } else {
+            // Stacked layout: content above, controls below
+            editorContent.style.cssText = `
+                display: flex;
+                flex-direction: column;
+                gap: 15px;
+                flex: 1;
+                min-width: 0;
+            `;
+        }
+
+        // Create content container for image and alt text
+        const contentContainer = document.createElement('div');
+        contentContainer.style.cssText = hasWideLayout ? 'flex: 1; min-width: 0;' : 'width: 100%;';
+        if (!hasWideLayout) {
+            contentContainer.style.cssText += `
+                display: flex;
+                flex-direction: column;
+                gap: 15px;
+            `;
+        } else {
+            contentContainer.style.cssText += `
+                display: flex;
+                flex-direction: column;
+                gap: 12px;
+            `;
+        }
+
+        // Image preview with drop zone
+        const imagePreview = document.createElement('div');
+        imagePreview.className = 'ui-edit-image-preview';
+        imagePreview.style.cssText = `
+            width: 100%;
+            height: 180px;
+            text-align: center;
+            background: white;
+            padding: 12px;
+            border-radius: 8px;
+            border: 2px dashed #007bff;
+            transition: all 0.3s ease;
+            cursor: pointer;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+            position: relative;
+            box-sizing: border-box;
+            overflow: hidden;
+        `;
+
+        // Function to update image preview
+        const updateImagePreview = (imageSrc, altText) => {
+            imagePreview.innerHTML = '';
+
+            if (imageSrc) {
+                const img = document.createElement('img');
+                img.src = imageSrc;
+                img.alt = altText || '';
+                img.style.cssText = `
+                    max-width: 100%;
+                    max-height: 150px;
+                    border-radius: 4px;
+                    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
+                `;
+                imagePreview.appendChild(img);
+
+                // Add overlay for drop zone
+                const overlay = document.createElement('div');
+                overlay.className = 'drop-overlay';
+                overlay.style.cssText = `
+                    position: absolute;
+                    top: 0;
+                    left: 0;
+                    right: 0;
+                    bottom: 0;
+                    background: rgba(0, 123, 255, 0.1);
+                    border-radius: 6px;
+                    display: none;
+                    align-items: center;
+                    justify-content: center;
+                    color: #007bff;
+                    font-weight: bold;
+                    font-size: 16px;
+                `;
+                overlay.textContent = '📁 Drop new image here';
+                imagePreview.appendChild(overlay);
+            } else {
+                // Show drop zone placeholder
+                const placeholder = document.createElement('div');
+                placeholder.style.cssText = `
+                    text-align: center;
+                    color: #6c757d;
+                    font-size: 14px;
+                `;
+                placeholder.innerHTML = `
+                    <div style="font-size: 48px; margin-bottom: 12px;">📁</div>
+                    <div style="margin-bottom: 8px;"><strong>Drop image here or click to select</strong></div>
+                    <div style="font-size: 12px;">Supports JPG, PNG, GIF, WebP</div>
+                `;
+                imagePreview.appendChild(placeholder);
+            }
+        };
+
+        // Initialize preview
+        updateImagePreview(stagingState.currentImageSrc, stagingState.currentAltText);
+
+        // File input for image selection
+        const fileInput = document.createElement('input');
+        fileInput.type = 'file';
+        fileInput.accept = 'image/*';
+        fileInput.style.display = 'none';
+
+        // Function to handle image file selection
+        const handleImageFile = (file) => {
+            if (file && file.type.startsWith('image/')) {
+                const reader = new FileReader();
+                reader.onload = (event) => {
+                    stagingState.stagedImageSrc = event.target.result;
+                    stagingState.hasChanges = true;
+                    updateImagePreview(stagingState.stagedImageSrc, altTextInput.value);
+                    updateChangeIndicator();
+                };
+                reader.readAsDataURL(file);
+            }
+        };
+
+        // Drag and drop functionality
+        imagePreview.addEventListener('dragover', (e) => {
+            e.preventDefault();
+            imagePreview.style.borderColor = '#28a745';
+            imagePreview.style.backgroundColor = '#f8fff8';
+            const overlay = imagePreview.querySelector('.drop-overlay');
+            if (overlay) overlay.style.display = 'flex';
+        });
+
+        imagePreview.addEventListener('dragleave', (e) => {
+            e.preventDefault();
+            imagePreview.style.borderColor = '#007bff';
+            imagePreview.style.backgroundColor = 'white';
+            const overlay = imagePreview.querySelector('.drop-overlay');
+            if (overlay) overlay.style.display = 'none';
+        });
+
+        imagePreview.addEventListener('drop', (e) => {
+            e.preventDefault();
+            imagePreview.style.borderColor = '#007bff';
+            imagePreview.style.backgroundColor = 'white';
+            const overlay = imagePreview.querySelector('.drop-overlay');
+            if (overlay) overlay.style.display = 'none';
+
+            const files = e.dataTransfer.files;
+            if (files.length > 0) {
+                handleImageFile(files[0]);
+            }
+        });
+
+        // Click to select file
+        imagePreview.addEventListener('click', () => {
+            fileInput.click();
+        });
+
+        fileInput.addEventListener('change', (e) => {
+            if (e.target.files.length > 0) {
+                handleImageFile(e.target.files[0]);
+            }
+        });
+
+        // Alt text editor
+        const altTextContainer = document.createElement('div');
+        altTextContainer.className = 'ui-edit-alt-text-container';
+        altTextContainer.style.cssText = `
+            display: flex;
+            flex-direction: column;
+            gap: 8px;
+        `;
+
+        const altTextLabel = document.createElement('label');
+        altTextLabel.textContent = 'Alt Text Description:';
+        altTextLabel.style.cssText = `
+            font-size: 13px;
+            font-weight: 600;
+            color: #333;
+            margin: 0;
+        `;
+
+        const altTextInput = document.createElement('input');
+        altTextInput.type = 'text';
+        altTextInput.value = stagingState.currentAltText;
+        altTextInput.style.cssText = `
+            width: 100%;
+            padding: 10px 12px;
+            border: 1px solid #ddd;
+            border-radius: 6px;
+            font-size: 14px;
+            box-sizing: border-box;
+            outline: none;
+            transition: border-color 0.2s ease;
+        `;
+
+        altTextInput.addEventListener('focus', () => {
+            altTextInput.style.borderColor = '#007bff';
+        });
+
+        altTextInput.addEventListener('blur', () => {
+            altTextInput.style.borderColor = '#ddd';
+        });
+
+        // Track alt text changes
+        altTextInput.addEventListener('input', () => {
+            stagingState.stagedAltText = altTextInput.value;
+            stagingState.hasChanges = altTextInput.value !== stagingState.currentAltText || stagingState.stagedImageSrc !== null;
+            updateChangeIndicator();
+        });
+
+        altTextContainer.appendChild(altTextLabel);
+        altTextContainer.appendChild(altTextInput);
+
+        // Change indicator
+        const changeIndicator = document.createElement('div');
+        changeIndicator.className = 'change-indicator';
+        changeIndicator.style.cssText = `
+            padding: 8px 12px;
+            background: #fff3cd;
+            border: 1px solid #ffeaa7;
+            border-radius: 6px;
+            color: #856404;
+            font-size: 12px;
+            text-align: center;
+            display: none;
+            font-weight: 500;
+        `;
+        changeIndicator.textContent = '⚠️ You have unsaved changes';
+
+        const updateChangeIndicator = () => {
+            if (stagingState.hasChanges) {
+                changeIndicator.style.display = 'block';
+            } else {
+                changeIndicator.style.display = 'none';
+            }
+        };
+
+        // Assemble content container
+        contentContainer.appendChild(imagePreview);
+        contentContainer.appendChild(altTextContainer);
+        contentContainer.appendChild(changeIndicator);
+        contentContainer.appendChild(fileInput);
+
+        // Create controls
+        const controls = document.createElement('div');
+        controls.className = 'ui-edit-controls';
+        if (hasWideLayout) {
+            controls.style.cssText = `
+                display: flex;
+                flex-direction: column;
+                gap: 8px;
+                min-width: 100px;
+                flex-shrink: 0;
+            `;
+        } else {
+            controls.style.cssText = `
+                display: flex;
+                flex-direction: column;
+                gap: 8px;
+                width: 100%;
+            `;
+        }
+
+        const acceptBtn = document.createElement('button');
+        acceptBtn.textContent = hasWideLayout ? '✓' : '✓ Accept';
+        acceptBtn.style.cssText = `
+            padding: ${hasWideLayout ? '8px 12px' : '8px 12px'};
+            font-size: ${hasWideLayout ? '14px' : '12px'};
+            border-radius: 6px;
+            border: none;
+            color: white;
+            cursor: pointer;
+            font-weight: 600;
+            transition: all 0.2s ease;
+            width: 100%;
+            text-align: center;
+            background: #28a745;
+        `;
+
+        const cancelBtn = document.createElement('button');
+        cancelBtn.textContent = hasWideLayout ? '✗' : '✗ Cancel';
+        cancelBtn.style.cssText = `
+            padding: ${hasWideLayout ? '8px 12px' : '8px 12px'};
+            font-size: ${hasWideLayout ? '14px' : '12px'};
+            border-radius: 6px;
+            border: none;
+            color: white;
+            cursor: pointer;
+            font-weight: 600;
+            transition: all 0.2s ease;
+            width: 100%;
+            text-align: center;
+            background: #dc3545;
+        `;
+
+        const resetBtn = document.createElement('button');
+        resetBtn.textContent = hasWideLayout ? '↺' : '↺ Reset';
+        resetBtn.style.cssText = `
+            padding: ${hasWideLayout ? '8px 12px' : '8px 12px'};
+            font-size: ${hasWideLayout ? '14px' : '12px'};
+            border-radius: 6px;
+            border: none;
+            color: white;
+            cursor: pointer;
+            font-weight: 600;
+            transition: all 0.2s ease;
+            width: 100%;
+            text-align: center;
+            background: #fd7e14;
+        `;
+
+        controls.appendChild(acceptBtn);
+        controls.appendChild(cancelBtn);
+        controls.appendChild(resetBtn);
+
+
+        // Event handlers
+        acceptBtn.addEventListener('click', () => {
+            // Apply staged changes only when accept is clicked
+            if (stagingState.hasChanges) {
+                let newMarkdown = stagingState.originalMarkdown;
+
+                // Apply image source change if staged
+                if (stagingState.stagedImageSrc !== null) {
+                    const currentImageMatch = newMarkdown.match(/!\[(.*?)\]\((.*?)\)/);
+                    if (currentImageMatch) {
+                        newMarkdown = newMarkdown.replace(
+                            /!\[(.*?)\]\((.*?)\)/,
+                            `![${currentImageMatch[1]}](${stagingState.stagedImageSrc})`
+                        );
+                    }
+                }
+
+                // Apply alt text change if staged
+                if (stagingState.stagedAltText !== null) {
+                    newMarkdown = newMarkdown.replace(
+                        /!\[(.*?)\]/,
+                        `![${stagingState.stagedAltText}]`
+                    );
+                }
+
+                // Update section with final changes
+                this.sectionManager.updateContent(sectionId, newMarkdown);
+            }
+
+            // Accept changes and hide editor
+            this.sectionManager.acceptChanges(sectionId);
+            this.currentFloatingMenu.hide();
+            this.currentFloatingMenu = null;
+        });
+
+        cancelBtn.addEventListener('click', () => {
+            // Discard all staged changes and hide editor
+            this.sectionManager.cancelChanges(sectionId);
+            this.currentFloatingMenu.hide();
+            this.currentFloatingMenu = null;
+        });
+
+        resetBtn.addEventListener('click', (event) => {
+            event.preventDefault();
+            event.stopPropagation();
+
+            // Reset to original content
+            const originalImageMatch = stagingState.originalMarkdown.match(/!\[(.*?)\]\((.*?)\)/);
+
+            if (originalImageMatch) {
+                const [, originalAltText, originalImageSrc] = originalImageMatch;
+
+                // Update staging state to original values
+                stagingState.currentAltText = originalAltText;
+                stagingState.currentImageSrc = originalImageSrc;
+
+                // Clear any staged changes
+                stagingState.stagedImageSrc = null;
+                stagingState.stagedAltText = null;
+                stagingState.hasChanges = false;
+
+                // Reset alt text input to original
+                altTextInput.value = originalAltText;
+
+                // Trigger input event to ensure UI consistency
+                const inputEvent = new Event('input', { bubbles: true, cancelable: true });
+                altTextInput.dispatchEvent(inputEvent);
+
+                // Reset preview to original image
+                updateImagePreview(originalImageSrc, originalAltText);
+
+                // Update change indicator
+                updateChangeIndicator();
+
+                // Actually update the section content to original and accept the changes
+                this.sectionManager.updateContent(sectionId, stagingState.originalMarkdown);
+                this.sectionManager.acceptChanges(sectionId);
+
+                // Close the editor
+                this.currentFloatingMenu.hide();
+                this.currentFloatingMenu = null;
+            }
+        });
+
+        // Assemble the final layout
+        if (hasWideLayout) {
+            editorContent.appendChild(contentContainer);
+            editorContent.appendChild(controls);
+        } else {
+            editorContent.appendChild(contentContainer);
+            editorContent.appendChild(controls);
+        }
+
+        // Create floating menu
+        const floatingMenu = new FloatingMenu(sectionId, 'image', this);
+        this.currentFloatingMenu = floatingMenu;
+        this.editingSections.add(sectionId);
+
+        floatingMenu.show(editorContent);
+    }
+
+    /**
+     * Hide current editor
+     */
+    hideCurrentEditor() {
+        debug('EDITOR: hideCurrentEditor called', 'EDITOR');
+
+        if (this.currentFloatingMenu) {
+            this.currentFloatingMenu.hide();
+            this.currentFloatingMenu = null;
+        }
+
+        debug('EDITOR: hideCurrentEditor completed', 'EDITOR');
+    }
+
+    /**
+     * Track event for analytics
+     */
+    trackEvent(eventType, data) {
+        const eventRecord = {
+            type: eventType,
+            data: data,
+            timestamp: new Date().toISOString()
+        };
+
+        this.eventHistory.push(eventRecord);
+        if (this.eventStats.hasOwnProperty(eventType)) {
+            this.eventStats[eventType]++;
+        }
+
+        // Keep only last 100 events
+        if (this.eventHistory.length > 100) {
+            this.eventHistory = this.eventHistory.slice(-100);
+        }
+    }
+
+    /**
+     * Get event statistics
+     */
+    getEventStats() {
+        const totalEvents = Object.values(this.eventStats).reduce((sum, count) => sum + count, 0);
+
+        return {
+            stats: { ...this.eventStats },
+            totalEvents,
+            recentEvents: this.eventHistory.slice(-10)
+        };
+    }
+
+    /**
+     * Handle keyboard shortcuts
+     */
+    handleKeydown(event) {
+        // Basic keyboard shortcut handling
+        if (event.ctrlKey || event.metaKey) {
+            if (event.key === 'Enter') {
+                // Accept changes
+                const activeSection = Array.from(this.editingSections)[0];
+                if (activeSection) {
+                    this.trackEvent('keyboard-shortcut', { shortcut: 'ctrl+enter', action: 'accept' });
+                }
+            } else if (event.key === 'Escape') {
+                // Cancel changes
+                const activeSection = Array.from(this.editingSections)[0];
+                if (activeSection) {
+                    this.trackEvent('keyboard-shortcut', { shortcut: 'escape', action: 'cancel' });
+                    this.hideCurrentEditor();
+                }
+            }
+        }
+    }
+}
+
+// Export for use in tests and other modules
+if (typeof module !== 'undefined' && module.exports) {
+    module.exports = { DOMRenderer, FloatingMenu };
+}
+
+// Export for browser use
+if (typeof window !== 'undefined') {
+    window.DOMRenderer = DOMRenderer;
+    window.FloatingMenu = FloatingMenu;
+}
+
+// === js/controls/control-base.js ===
+/**
+ * Base Control Class for Markitect UI Controls
+ * Provides common functionality for positioning, drag, resize, expand/collapse
+ * Supports Fail Fast strict mode for development
+ */
+
+// Development mode detection (must match main.js)
+const MARKITECT_STRICT_MODE = (
+    window.location.hostname === 'localhost' ||
+    window.location.hostname === '127.0.0.1' ||
+    window.location.search.includes('strict=true') ||
+    window.markitectStrictMode === true
+);
+
+const Control = {
+    // Default configuration
+    config: {
+        icon: '🔧',
+        title: 'Control',
+        className: 'base-control',
+        defaultContent: 'Control content',
+        ariaLabel: 'Base Control',
+        position: 'w',  // Default compass position: west (middle-left)
+        footer: null  // If null, will use default Markitect copyright
+    },
+
+    // Utility functions for safe operations
+    safeOperation: function(operation, fallback = null, context = 'Unknown') {
+        try {
+            return operation();
+        } catch (error) {
+            console.warn(`Control operation failed in ${context}:`, error);
+
+            // Fail Fast in development mode
+            if (MARKITECT_STRICT_MODE) {
+                console.error(`🚨 STRICT MODE: Control operation failed in ${context}`);
+                throw error; // Re-throw for immediate debugging
+            }
+
+            if (window.MarkitectDebugSystem) {
+                window.MarkitectDebugSystem.addMessage(
+                    `Safe operation failed: ${error.message}`,
+                    'WARNING',
+                    'Control',
+                    { context, eventType: 'ERROR' }
+                );
+            }
+            return typeof fallback === 'function' ? fallback() : fallback;
+        }
+    },
+
+    safeQuerySelector: function(selector, parent = document) {
+        try {
+            if (!parent || !parent.querySelector) {
+                return null;
+            }
+            return parent.querySelector(selector);
+        } catch (error) {
+            console.warn(`Invalid selector: ${selector}`, error);
+            return null;
+        }
+    },
+
+    safeQuerySelectorAll: function(selector, parent = document) {
+        try {
+            if (!parent || !parent.querySelectorAll) {
+                return [];
+            }
+            return Array.from(parent.querySelectorAll(selector));
+        } catch (error) {
+            console.warn(`Invalid selector: ${selector}`, error);
+            return [];
+        }
+    },
+
+    // Version and default footer
+    getMarkitectVersion: function() {
+        return this.safeOperation(() => {
+            // Try to get version from various sources
+            if (window.markitectVersion) {
+                return window.markitectVersion;
+            }
+
+            // Check for generator meta tag in document head
+            const generatorMeta = this.safeQuerySelector('meta[name="generator"]');
+            if (generatorMeta) {
+                const content = generatorMeta.getAttribute('content');
+                if (content && content.includes('Markitect')) {
+                    // Extract version from generator content
+                    // Expected formats: "Markitect 1.0.0" or "Markitect/1.0.0" or "Markitect v1.0.0"
+                    const versionMatch = content.match(/Markitect[\s\/v]*([\d\.]+[\w\-\.]*)/i);
+                    if (versionMatch && versionMatch[1]) {
+                        return versionMatch[1];
+                    }
+                }
+            }
+
+            // Fallback version with generation timestamp
+            const now = new Date();
+            const timestamp = now.toISOString().slice(0, 19).replace('T', ' ');
+            return `Generated ${timestamp}`;
+        }, () => 'Unknown Version', 'getMarkitectVersion');
+    },
+
+    getDefaultFooter: function() {
+        return `© Markitect ${this.getMarkitectVersion()}`;
+    },
+
+    getFooter: function() {
+        if (this.config.footer !== null) {
+            return this.config.footer;
+        }
+        return this.getDefaultFooter();
+    },
+
+    // Compass positioning system (top-aligned for proper expansion)
+    compassPositions: {
+        'n': { top: '20px', left: '50%', transform: 'translateX(-50%)' },
+        'nne': { top: '40px', right: '120px' },
+        'ne': { top: '20px', right: '20px' },
+        'ene': { top: '80px', right: '20px' },
+        'e': { top: '50vh', right: '20px', transform: 'translateY(-20px)' },
+        'ese': { top: 'calc(50vh + 80px)', right: '20px', transform: 'translateY(-20px)' },
+        'se': { bottom: '20px', right: '20px' },
+        'sse': { bottom: '40px', right: '120px' },
+        's': { bottom: '20px', left: '50%', transform: 'translateX(-50%)' },
+        'ssw': { bottom: '40px', left: '120px' },
+        'sw': { bottom: '20px', left: '20px' },
+        'wsw': { bottom: '80px', left: '20px' },
+        'w': { top: '50vh', left: '20px', transform: 'translateY(-20px)' },
+        'wnw': { top: 'calc(50vh - 80px)', left: '20px', transform: 'translateY(-20px)' },
+        'nw': { top: '20px', left: '20px' },
+        'nnw': { top: '40px', left: '120px' }
+    },
+
+    // State management
+    isExpanded: false,
+    isDragging: false,
+    isResizing: false,
+    element: null,
+
+    createControl: function() {
+        return this.safeOperation(() => {
+            console.log(`Creating ${this.config.title} control...`);
+
+            // Validate configuration
+            if (!this.config || !this.config.title) {
+                throw new Error('Invalid control configuration');
+            }
+
+            // Ensure document.body exists
+            if (!document.body) {
+                throw new Error('Document body not available');
+            }
+
+            // Create main control element
+            this.element = document.createElement('div');
+            this.element.className = `control-panel ${this.config.className || ''}`;
+            this.element.setAttribute('role', 'dialog');
+            this.element.setAttribute('aria-label', this.config.ariaLabel || this.config.title);
+
+            // Position the control using compass system
+            const position = this.compassPositions[this.config.position] || this.compassPositions['w'];
+            Object.assign(this.element.style, {
+                position: 'fixed',
+                zIndex: '1000',
+                ...position
+            });
+
+            // Build the control structure
+            this.buildControlStructure();
+
+            // Add to document
+            document.body.appendChild(this.element);
+
+            console.log(`${this.config.title} control created and positioned at ${this.config.position}`);
+            return this.element;
+        }, () => {
+            console.error(`Failed to create ${this.config?.title || 'Unknown'} control`);
+            return null;
+        }, 'createControl');
+    },
+
+    buildControlStructure: function() {
+        this.safeOperation(() => {
+            if (!this.element) {
+                throw new Error('Control element not available');
+            }
+
+            // Sanitize configuration values
+            const safeIcon = (this.config.icon || '🔧').replace(/[<>"'&]/g, '');
+            const safeTitle = (this.config.title || 'Control').replace(/[<>"'&]/g, '');
+            const safeContent = (this.config.defaultContent || 'Control content').replace(/[<>]/g, '');
+
+            this.element.innerHTML = `
+                <div class="control-header" style="
+                    display: flex; align-items: center; justify-content: space-between;
+                    padding: 0.5rem; background: #f8f9fa; border-radius: 6px;
+                    cursor: pointer; user-select: none; font-size: 0.9rem;
+                    box-shadow: 0 2px 8px rgba(0,0,0,0.1); border: 1px solid #dee2e6;
+                    transition: all 0.2s ease; min-width: 120px;">
+                    <div style="display: flex; align-items: center; gap: 0.5rem;">
+                        <span style="font-size: 1.2rem;">${safeIcon}</span>
+                        <span class="control-title" style="font-weight: 500; color: #495057;">${safeTitle}</span>
+                    </div>
+                    <button class="control-close" style="
+                        background: none; border: none; font-size: 1.1rem; color: #6c757d;
+                        cursor: pointer; padding: 0; width: 20px; height: 20px;
+                        display: none; align-items: center; justify-content: center;
+                        border-radius: 50%; transition: all 0.2s ease;"
+                        onmouseover="this.style.backgroundColor='#e9ecef'"
+                        onmouseout="this.style.backgroundColor=''"
+                        onclick="event.stopPropagation();">×</button>
+                </div>
+                <div class="control-content" style="
+                    display: none; background: white; border: 1px solid #dee2e6;
+                    border-radius: 6px; margin-top: 0.5rem; max-width: 350px;
+                    min-width: 250px; max-height: 400px; overflow-y: auto;
+                    box-shadow: 0 4px 12px rgba(0,0,0,0.15);">
+                    <div style="padding: 1rem;">
+                        ${safeContent}
+                    </div>
+                    <div class="control-footer" style="display: none;"></div>
+                </div>
+            `;
+
+            // Set up event listeners with error protection
+            this.safeOperation(() => this.setupEventListeners(), null, 'setupEventListeners');
+            this.safeOperation(() => this.addResizeHandle(), null, 'addResizeHandle');
+            this.safeOperation(() => this.addDragFunctionality(), null, 'addDragFunctionality');
+        }, () => {
+            console.error('Failed to build control structure');
+            if (this.element) {
+                this.element.innerHTML = '<div style="color: red; padding: 0.5rem;">Control failed to load</div>';
+            }
+        }, 'buildControlStructure');
+    },
+
+    setupEventListeners: function() {
+        const header = this.safeQuerySelector('.control-header', this.element);
+        const closeBtn = this.safeQuerySelector('.control-close', this.element);
+
+        if (!header || !closeBtn) {
+            console.warn('Control header or close button not found');
+            return;
+        }
+
+        // Toggle expand/collapse on header click
+        header.addEventListener('click', (e) => {
+            this.safeOperation(() => {
+                e.stopPropagation();
+                this.toggle();
+            }, null, 'headerClick');
+        });
+
+        // Close button
+        closeBtn.addEventListener('click', (e) => {
+            this.safeOperation(() => {
+                e.stopPropagation();
+                this.collapse();
+            }, null, 'closeClick');
+        });
+
+        // Show/hide close button and resize handle on hover with bounds checking
+        this.element.addEventListener('mouseenter', () => {
+            this.safeOperation(() => {
+                if (this.isExpanded && closeBtn) {
+                    closeBtn.style.display = 'flex';
+                    const resizeHandle = this.safeQuerySelector('.resize-handle', this.element);
+                    if (resizeHandle) {
+                        resizeHandle.style.display = 'block';
+                    }
+                }
+            }, null, 'mouseEnter');
+        });
+
+        this.element.addEventListener('mouseleave', () => {
+            this.safeOperation(() => {
+                if (closeBtn) {
+                    closeBtn.style.display = 'none';
+                }
+                const resizeHandle = this.safeQuerySelector('.resize-handle', this.element);
+                if (resizeHandle) {
+                    resizeHandle.style.display = 'none';
+                }
+            }, null, 'mouseLeave');
+        });
+    },
+
+    addResizeHandle: function() {
+        const resizeHandle = document.createElement('div');
+        resizeHandle.className = 'resize-handle';
+        resizeHandle.innerHTML = '';  // Small circle via CSS
+        resizeHandle.style.cssText = `
+            position: absolute; bottom: 2px; right: 2px;
+            width: 8px; height: 8px; cursor: nw-resize;
+            display: none; background: #6c757d; border-radius: 50%;
+        `;
+
+        this.element.appendChild(resizeHandle);
+
+        // Resize functionality
+        let startX, startY, startWidth, startHeight;
+
+        resizeHandle.addEventListener('mousedown', (e) => {
+            e.preventDefault();
+            e.stopPropagation();
+            this.isResizing = true;
+
+            const content = this.element.querySelector('.control-content');
+            const rect = content.getBoundingClientRect();
+
+            startX = e.clientX;
+            startY = e.clientY;
+            startWidth = rect.width;
+            startHeight = rect.height;
+
+            document.addEventListener('mousemove', handleResize);
+            document.addEventListener('mouseup', stopResize);
+        });
+
+        const handleResize = (e) => {
+            if (!this.isResizing) return;
+
+            const content = this.element.querySelector('.control-content');
+            const deltaX = e.clientX - startX;
+            const deltaY = e.clientY - startY;
+
+            const newWidth = Math.max(200, startWidth + deltaX);
+            const newHeight = Math.max(100, startHeight + deltaY);
+
+            content.style.width = `${newWidth}px`;
+            content.style.height = `${newHeight}px`;
+        };
+
+        const stopResize = () => {
+            this.isResizing = false;
+            document.removeEventListener('mousemove', handleResize);
+            document.removeEventListener('mouseup', stopResize);
+        };
+    },
+
+    addDragFunctionality: function() {
+        const header = this.safeQuerySelector('.control-header', this.element);
+        if (!header) {
+            console.warn('Header not found for drag functionality');
+            return;
+        }
+
+        let startX, startY, startLeft, startTop, dragTimeout;
+
+        header.addEventListener('mousedown', (e) => {
+            this.safeOperation(() => {
+                if (e.target.closest('.control-close')) return;
+
+                // Clear any existing drag timeout
+                if (dragTimeout) {
+                    clearTimeout(dragTimeout);
+                }
+
+                this.isDragging = true;
+                const rect = this.element.getBoundingClientRect();
+
+                startX = e.clientX;
+                startY = e.clientY;
+                startLeft = rect.left;
+                startTop = rect.top;
+
+                document.addEventListener('mousemove', handleDrag);
+                document.addEventListener('mouseup', stopDrag);
+
+                // Safety timeout to prevent infinite dragging
+                dragTimeout = setTimeout(() => {
+                    if (this.isDragging) {
+                        console.warn('Drag operation timed out');
+                        stopDrag();
+                    }
+                }, 30000); // 30 second timeout
+            }, null, 'dragStart');
+        });
+
+        const handleDrag = (e) => {
+            this.safeOperation(() => {
+                if (!this.isDragging || !this.element) return;
+
+                const deltaX = e.clientX - startX;
+                const deltaY = e.clientY - startY;
+
+                // Constrain to viewport bounds
+                const viewportWidth = window.innerWidth || document.documentElement.clientWidth;
+                const viewportHeight = window.innerHeight || document.documentElement.clientHeight;
+
+                const newLeft = Math.max(0, Math.min(viewportWidth - 100, startLeft + deltaX));
+                const newTop = Math.max(0, Math.min(viewportHeight - 50, startTop + deltaY));
+
+                this.element.style.left = `${newLeft}px`;
+                this.element.style.top = `${newTop}px`;
+                this.element.style.right = 'auto';
+                this.element.style.bottom = 'auto';
+                this.element.style.transform = 'none';
+            }, null, 'dragMove');
+        };
+
+        const stopDrag = () => {
+            this.safeOperation(() => {
+                this.isDragging = false;
+                if (dragTimeout) {
+                    clearTimeout(dragTimeout);
+                    dragTimeout = null;
+                }
+                document.removeEventListener('mousemove', handleDrag);
+                document.removeEventListener('mouseup', stopDrag);
+            }, null, 'dragStop');
+        };
+    },
+
+    expand: function() {
+        this.safeOperation(() => {
+            if (this.isExpanded) return;
+
+            const content = this.safeQuerySelector('.control-content', this.element);
+            const closeBtn = this.safeQuerySelector('.control-close', this.element);
+
+            if (!content || !closeBtn) {
+                console.warn('Control content or close button not found for expansion');
+                return;
+            }
+
+            content.style.display = 'block';
+            closeBtn.style.display = 'flex';
+            this.isExpanded = true;
+
+            // Style footer
+            this.styleFooter();
+
+            console.log(`${this.config.title || 'Unknown'} control expanded`);
+        }, null, 'expand');
+    },
+
+    collapse: function() {
+        this.safeOperation(() => {
+            if (!this.isExpanded) return;
+
+            const content = this.safeQuerySelector('.control-content', this.element);
+            const closeBtn = this.safeQuerySelector('.control-close', this.element);
+            const resizeHandle = this.safeQuerySelector('.resize-handle', this.element);
+
+            if (content) {
+                content.style.display = 'none';
+                content.style.width = '';
+                content.style.height = '';
+            }
+            if (closeBtn) {
+                closeBtn.style.display = 'none';
+            }
+            if (resizeHandle) {
+                resizeHandle.style.display = 'none';
+            }
+            this.isExpanded = false;
+
+            console.log(`${this.config.title || 'Unknown'} control collapsed`);
+        }, null, 'collapse');
+    },
+
+    toggle: function() {
+        this.safeOperation(() => {
+            if (this.isExpanded) {
+                this.collapse();
+            } else {
+                if (this.buildContent) {
+                    this.buildContent();
+                } else {
+                    this.expand();
+                }
+            }
+        }, null, 'toggle');
+    },
+
+    styleFooter: function() {
+        this.safeOperation(() => {
+            const footer = this.safeQuerySelector('.control-footer', this.element);
+            if (!footer) return;
+
+            const footerText = this.getFooter();
+
+            if (footerText && footerText.trim()) {
+                // Sanitize footer text
+                const safeText = footerText.replace(/[<>"'&]/g, '');
+                footer.textContent = safeText;
+                footer.style.cssText = `
+                    display: block; padding: 0.5rem; font-size: 0.7rem;
+                    color: #6c757d; text-align: center; font-style: italic;
+                    background: #f8f9fa; border-top: 1px solid #e9ecef;
+                    border-radius: 0 0 6px 6px;
+                `;
+            } else {
+                footer.style.display = 'none';
+            }
+        }, null, 'styleFooter');
+    },
+
+    // Virtual method - should be overridden by specific controls
+    buildContent: function() {
+        this.safeOperation(() => {
+            console.log(`${this.config.title || 'Unknown'} control - buildContent should be overridden`);
+            this.expand();
+        }, () => {
+            console.error('Failed to build content, expanding basic control');
+            this.expand();
+        }, 'buildContent');
+    }
+};
+
+// Export for use in other modules
+window.Control = Control;
+
+// === js/controls/contents-control.js ===
+/**
+ * Contents Control - Displays document table of contents
+ * Implements the Robustness Principle with Fail Fast mode support
+ */
+
+class ContentsControl {
+    constructor() {
+        this.control = Object.create(Control);
+        this.control.config = {
+            icon: '☰',
+            title: 'Contents',
+            className: 'contents-control',
+            defaultContent: 'Click to view table of contents',
+            ariaLabel: 'Contents Control',
+            position: 'w'
+        };
+
+        // Bind methods to control
+        this.control.buildContent = () => {
+            const content = this.control.element.querySelector('.control-content');
+            const headings = this.extractHeadings();
+
+            content.innerHTML = `
+                <div style="padding: 1rem; font-size: 0.8rem;">
+                    <h4 style="margin-top: 0;">Table of Contents</h4>
+                    <div style="max-height: 250px; overflow-y: auto;">
+                        ${headings.length > 0 ?
+                            headings.map(heading =>
+                                `<div style="margin-bottom: 0.3rem; padding-left: ${(heading.level - 1) * 15}px;">
+                                    <a href="#${heading.id}"
+                                       style="text-decoration: none; color: #0066cc; font-size: ${0.9 - (heading.level - 1) * 0.05}rem;"
+                                       onclick="document.getElementById('${heading.id}')?.scrollIntoView({behavior: 'smooth'})">
+                                        ${heading.text}
+                                    </a>
+                                </div>`
+                            ).join('') :
+                            '<p>No headings found in document</p>'
+                        }
+                    </div>
+                    <div style="margin-top: 1rem; font-size: 0.7rem; color: #666;">
+                        ${headings.length} heading${headings.length !== 1 ? 's' : ''} found
+                    </div>
+                </div>
+            `;
+            this.control.isExpanded = true;
+        };
+
+        this.control.toggle = () => {
+            if (this.control.isExpanded) {
+                this.control.element.querySelector('.control-content').style.display = 'none';
+                this.control.isExpanded = false;
+            } else {
+                this.control.buildContent();
+                this.control.element.querySelector('.control-content').style.display = 'block';
+            }
+        };
+    }
+
+    extractHeadings() {
+        const headings = [];
+        const elements = document.querySelectorAll('h1, h2, h3, h4, h5, h6');
+
+        elements.forEach((heading, index) => {
+            const level = parseInt(heading.tagName.charAt(1));
+            const text = heading.textContent || heading.innerText || '';
+            let id = heading.id;
+
+            // Generate ID if not present
+            if (!id) {
+                id = text.toLowerCase()
+                    .replace(/[^\w\s-]/g, '')
+                    .replace(/\s+/g, '-')
+                    .replace(/-+/g, '-')
+                    .replace(/^-|-$/g, '') || `heading-${index}`;
+                heading.id = id;
+            }
+
+            headings.push({
+                level: level,
+                text: text.trim(),
+                id: id
+            });
+        });
+
+        return headings;
+    }
+
+    createControl() {
+        return this.control.createControl();
+    }
+}
+
+window.ContentsControl = ContentsControl;
+
+// === js/controls/status-control.js ===
+/**
+ * Status Control - Document statistics and change tracking
+ */
+class StatusControl {
+    constructor() {
+        this.control = Object.create(Control);
+
+        // Configure for status functionality
+        this.control.config = {
+            icon: '📊',
+            title: 'Status',
+            className: 'status-control',
+            defaultContent: 'Document statistics and changes',
+            ariaLabel: 'Status Control',
+            position: 'e',  // East positioning
+            footer: `Updated ${new Date().toLocaleTimeString()}`
+        };
+
+        // Initialize change tracking
+        this.control.changeTracking = {
+            headings: new Set(),
+            sections: new Set(),
+            images: new Set(),
+            tables: new Set(),
+            lastScanTime: null,
+            initialCounts: {
+                headings: 0,
+                sections: 0,
+                images: 0,
+                tables: 0,
+                lines: 0,
+                words: 0,
+                characters: 0
+            }
+        };
+
+        this.bindMethods();
+    }
+
+    bindMethods() {
+        // Bind utility functions
+        this.control.safeTextExtraction = this.safeTextExtraction.bind(this);
+        this.control.sanitizeText = this.sanitizeText.bind(this);
+        this.control.validateElement = this.validateElement.bind(this);
+        this.control.safeStatsOperation = this.safeStatsOperation.bind(this);
+
+        // Bind existing methods
+        this.control.calculateStats = this.calculateStats.bind(this);
+        this.control.isContentSection = this.isContentSection.bind(this);
+        this.control.isContentTable = this.isContentTable.bind(this);
+        this.control.updateChangeTracking = this.updateChangeTracking.bind(this);
+        this.control.buildContent = this.buildContent.bind(this);
+        this.control.refreshStats = this.refreshStats.bind(this);
+        this.control.resetChangeTracking = this.resetChangeTracking.bind(this);
+        this.control.setupAutoRefresh = this.setupAutoRefresh.bind(this);
+
+        // Override collapse to clean up intervals
+        const originalCollapse = this.control.collapse;
+        this.control.collapse = () => {
+            if (this.control.autoRefreshInterval) {
+                clearInterval(this.control.autoRefreshInterval);
+                this.control.autoRefreshInterval = null;
+            }
+            originalCollapse.call(this.control);
+        };
+    }
+
+    // Utility functions for safe operations
+    safeTextExtraction(element) {
+        if (!this.validateElement(element)) {
+            return '';
+        }
+
+        try {
+            const text = element.textContent || element.innerText || '';
+            return this.sanitizeText(text.trim());
+        } catch (error) {
+            console.warn('Text extraction failed:', error);
+            return '';
+        }
+    }
+
+    sanitizeText(text) {
+        if (typeof text !== 'string') {
+            return '';
+        }
+
+        // Remove potentially harmful characters and limit length
+        const maxLength = 100000; // 100KB text limit
+        const sanitized = text
+            .replace(/[\x00-\x08\x0B\x0C\x0E-\x1F\x7F]/g, '') // Remove control chars
+            .slice(0, maxLength); // Limit length
+
+        return sanitized;
+    }
+
+    validateElement(element) {
+        return element &&
+               element.nodeType === Node.ELEMENT_NODE &&
+               element.isConnected &&
+               !element.closest('.control-panel'); // Avoid control elements
+    }
+
+    safeStatsOperation(operation, fallback = 0, context = 'stats') {
+        try {
+            const result = operation();
+            // Validate numeric results
+            return typeof result === 'number' && isFinite(result) ? result : fallback;
+        } catch (error) {
+            console.warn(`Stats operation failed in ${context}:`, error);
+            if (window.MarkitectDebugSystem) {
+                window.MarkitectDebugSystem.addMessage(
+                    `Stats operation failed: ${error.message}`,
+                    'WARNING',
+                    'StatusControl',
+                    { context, eventType: 'ERROR' }
+                );
+            }
+            return fallback;
+        }
+    }
+
+    calculateStats() {
+        const stats = {
+            headings: { total: 0, changed: 0 },
+            sections: { total: 0, changed: 0 },
+            images: { total: 0, changed: 0 },
+            tables: { total: 0, changed: 0 },
+            document: { lines: 0, words: 0, characters: 0 },
+            sections_detail: { lines: 0, words: 0, characters: 0 },
+            tables_detail: { lines: 0, words: 0, characters: 0 }
+        };
+
+        return this.safeStatsOperation(() => {
+            // Count headings (h1-h6, excluding control titles)
+            const headings = this.control.safeQuerySelectorAll('h1, h2, h3, h4, h5, h6');
+            const maxElements = 10000; // Limit processing to prevent DoS
+
+            headings.slice(0, maxElements).forEach(heading => {
+                if (!this.validateElement(heading)) return;
+
+                const text = this.safeTextExtraction(heading).toLowerCase();
+                // Skip control headings with enhanced filtering
+                const controlKeywords = ['contents', 'debug', 'status', 'control', 'menu', 'toolbar'];
+                const isControlHeading = controlKeywords.some(keyword => text.includes(keyword));
+
+                if (text.length > 0 && !isControlHeading) {
+                    stats.headings.total++;
+                    const fullText = this.safeTextExtraction(heading);
+                    if (this.control.changeTracking.headings.has(fullText)) {
+                        stats.headings.changed++;
+                    }
+                }
+            });
+
+            // Count sections (content blocks excluding headings and table cells)
+            const sections = this.control.safeQuerySelectorAll('p, blockquote, pre, li, div');
+            sections.slice(0, maxElements).forEach(section => {
+                if (this.isContentSection(section)) {
+                    stats.sections.total++;
+                    const sectionText = this.safeTextExtraction(section);
+                    if (sectionText.length > 0) {
+                        const lines = this.safeStatsOperation(() => sectionText.split('\n').length, 0, 'countLines');
+                        const words = this.safeStatsOperation(() =>
+                            sectionText.split(/\s+/).filter(w => w.length > 0).length, 0, 'countWords');
+                        const characters = Math.min(sectionText.length, 1000000); // Cap at 1MB
+
+                        stats.sections_detail.lines += lines;
+                        stats.sections_detail.words += words;
+                        stats.sections_detail.characters += characters;
+
+                        if (this.control.changeTracking.sections.has(sectionText)) {
+                            stats.sections.changed++;
+                        }
+                    }
+                }
+            });
+
+            // Count tables as separate entities
+            const tables = this.control.safeQuerySelectorAll('table');
+            tables.slice(0, maxElements).forEach(table => {
+                if (this.isContentTable(table)) {
+                    stats.tables.total++;
+                    const tableText = this.safeTextExtraction(table);
+                    if (tableText.length > 0) {
+                        const lines = this.safeStatsOperation(() => tableText.split('\n').length, 0, 'countTableLines');
+                        const words = this.safeStatsOperation(() =>
+                            tableText.split(/\s+/).filter(w => w.length > 0).length, 0, 'countTableWords');
+                        const characters = Math.min(tableText.length, 1000000); // Cap at 1MB
+
+                        stats.tables_detail.lines += lines;
+                        stats.tables_detail.words += words;
+                        stats.tables_detail.characters += characters;
+
+                        // Generate safer table identifier
+                        const tableId = this.sanitizeText(table.id ||
+                            table.outerHTML.substring(0, 100).replace(/[<>"'&]/g, ''));
+                        if (this.control.changeTracking.tables.has(tableId)) {
+                            stats.tables.changed++;
+                        }
+                    }
+                }
+            });
+
+            // Count images with validation
+            const images = this.control.safeQuerySelectorAll('img');
+            images.slice(0, maxElements).forEach(img => {
+                if (this.validateElement(img)) {
+                    stats.images.total++;
+                    // Safely extract and validate image source
+                    const imgSrc = this.sanitizeText(img.src || img.getAttribute('src') || '');
+                    if (imgSrc && this.control.changeTracking.images.has(imgSrc)) {
+                        stats.images.changed++;
+                    }
+                }
+            });
+
+            // Calculate total document stats with protection
+            const bodyText = this.safeTextExtraction(document.body);
+            if (bodyText) {
+                const cleanText = bodyText.replace(/\s+/g, ' ');
+                stats.document.lines = this.safeStatsOperation(() =>
+                    bodyText.split('\n').length, 0, 'countDocLines');
+                stats.document.words = this.safeStatsOperation(() =>
+                    cleanText.split(/\s+/).filter(w => w.length > 0).length, 0, 'countDocWords');
+                stats.document.characters = Math.min(cleanText.length, 10000000); // Cap at 10MB
+            }
+
+            return stats;
+        }, stats, 'calculateStats');
+    }
+
+    isContentSection(element) {
+        return this.safeStatsOperation(() => {
+            if (!this.validateElement(element)) {
+                return false;
+            }
+
+            // Enhanced control detection with timeout protection
+            let current = element;
+            let depth = 0;
+            const maxDepth = 50; // Prevent infinite loops
+
+            while (current && current !== document.body && depth < maxDepth) {
+                if (current.classList && (
+                    current.classList.contains('control-panel') ||
+                    current.classList.contains('control-content') ||
+                    current.classList.contains('control-header') ||
+                    current.className.includes('control') ||
+                    current.id?.includes('control')
+                )) {
+                    return false;
+                }
+                current = current.parentElement;
+                depth++;
+            }
+
+            // Skip if element is inside a table (tables are counted separately)
+            if (element.closest && element.closest('table')) {
+                return false;
+            }
+
+            // Skip if element has no meaningful text content
+            const text = this.safeTextExtraction(element);
+            return text.length > 0 && text.length < 50000; // Reasonable size limit
+        }, false, 'isContentSection');
+    }
+
+    isContentTable(table) {
+        return this.safeStatsOperation(() => {
+            if (!this.validateElement(table) || table.tagName !== 'TABLE') {
+                return false;
+            }
+
+            // Enhanced control detection with depth limiting
+            let current = table;
+            let depth = 0;
+            const maxDepth = 50;
+
+            while (current && current !== document.body && depth < maxDepth) {
+                if (current.classList && (
+                    current.classList.contains('control-panel') ||
+                    current.classList.contains('control-content') ||
+                    current.classList.contains('control-header') ||
+                    current.className.includes('control') ||
+                    current.id?.includes('control')
+                )) {
+                    return false;
+                }
+                current = current.parentElement;
+                depth++;
+            }
+
+            // Check if table has meaningful content with limits
+            const text = this.safeTextExtraction(table);
+            return text.length > 0 && text.length < 100000; // Reasonable table size limit
+        }, false, 'isContentTable');
+    }
+
+    updateChangeTracking() {
+        const now = Date.now();
+
+        // Headings
+        const headings = document.querySelectorAll('h1, h2, h3, h4, h5, h6');
+        headings.forEach(heading => {
+            const text = heading.textContent.trim();
+            if (text && !text.toLowerCase().includes('control')) {
+                const changed = heading.dataset.lastModified &&
+                              (now - parseInt(heading.dataset.lastModified)) < 300000; // 5 minutes
+                if (changed) {
+                    this.control.changeTracking.headings.add(text);
+                }
+            }
+        });
+
+        // Sections
+        const sections = document.querySelectorAll('p, blockquote, pre, li, div');
+        sections.forEach(section => {
+            if (this.isContentSection(section)) {
+                const text = section.textContent.trim();
+                if (text.length > 0) {
+                    const changed = section.dataset.lastModified &&
+                                  (now - parseInt(section.dataset.lastModified)) < 300000; // 5 minutes
+                    if (changed) {
+                        this.control.changeTracking.sections.add(text);
+                    }
+                }
+            }
+        });
+
+        // Tables
+        const tables = document.querySelectorAll('table');
+        tables.forEach(table => {
+            if (this.isContentTable(table)) {
+                const tableId = table.id || table.outerHTML.substring(0, 100);
+                const changed = table.dataset.lastModified &&
+                              (now - parseInt(table.dataset.lastModified)) < 300000; // 5 minutes
+                if (changed) {
+                    this.control.changeTracking.tables.add(tableId);
+                }
+            }
+        });
+
+        // Images
+        const images = document.querySelectorAll('img');
+        images.forEach(img => {
+            const src = img.src || img.getAttribute('src') || '';
+            const changed = img.dataset.lastModified &&
+                          (now - parseInt(img.dataset.lastModified)) < 300000; // 5 minutes
+            if (changed && src) {
+                this.control.changeTracking.images.add(src);
+            }
+        });
+
+        this.control.changeTracking.lastScanTime = now;
+    }
+
+    buildContent() {
+        this.control.safeOperation(() => {
+            console.log("📊 Building status control content...");
+
+            const content = this.control.safeQuerySelector('.control-content', this.control.element);
+            if (!content) {
+                console.error("📊 Status control content element not found");
+                return;
+            }
+
+            // Update tracking and calculate stats with timeout protection
+            const timeout = setTimeout(() => {
+                console.warn('Status content build operation timed out');
+            }, 10000); // 10 second timeout
+
+            this.updateChangeTracking();
+            const stats = this.calculateStats();
+
+            clearTimeout(timeout);
+
+            // Sanitize numeric values to prevent injection
+            const safeStats = {
+                document: {
+                    lines: Math.max(0, Math.floor(stats.document.lines || 0)),
+                    words: Math.max(0, Math.floor(stats.document.words || 0)),
+                    characters: Math.max(0, Math.floor(stats.document.characters || 0))
+                },
+                headings: {
+                    total: Math.max(0, Math.floor(stats.headings.total || 0)),
+                    changed: Math.max(0, Math.floor(stats.headings.changed || 0))
+                },
+                sections: {
+                    total: Math.max(0, Math.floor(stats.sections.total || 0)),
+                    changed: Math.max(0, Math.floor(stats.sections.changed || 0))
+                },
+                sections_detail: {
+                    lines: Math.max(0, Math.floor(stats.sections_detail.lines || 0)),
+                    words: Math.max(0, Math.floor(stats.sections_detail.words || 0)),
+                    characters: Math.max(0, Math.floor(stats.sections_detail.characters || 0))
+                },
+                tables: {
+                    total: Math.max(0, Math.floor(stats.tables.total || 0)),
+                    changed: Math.max(0, Math.floor(stats.tables.changed || 0))
+                },
+                tables_detail: {
+                    lines: Math.max(0, Math.floor(stats.tables_detail.lines || 0)),
+                    words: Math.max(0, Math.floor(stats.tables_detail.words || 0)),
+                    characters: Math.max(0, Math.floor(stats.tables_detail.characters || 0))
+                },
+                images: {
+                    total: Math.max(0, Math.floor(stats.images.total || 0)),
+                    changed: Math.max(0, Math.floor(stats.images.changed || 0))
+                }
+            };
+
+            // Use safe stats for display with proper escaping
+            content.innerHTML = `
+                <div style="font-size: 0.8rem; line-height: 1.4; color: #495057;">
+                    <!-- Document Overview -->
+                    <div style="margin-bottom: 0.75rem; padding: 0.5rem; background: #f8f9fa; border-radius: 4px;">
+                        <div style="font-weight: 600; color: #212529; margin-bottom: 0.5rem;">📄 Document</div>
+                        <div style="font-size: 0.7rem;">
+                            <span>Lines: <strong>${safeStats.document.lines.toLocaleString()}</strong> | Words: <strong>${safeStats.document.words.toLocaleString()}</strong> | Chars: <strong>${safeStats.document.characters.toLocaleString()}</strong></span>
+                        </div>
+                    </div>
+
+                    <!-- Headings -->
+                    <div style="margin-bottom: 0.75rem; padding: 0.5rem; background: #f3e5f5; border-radius: 4px;">
+                        <div style="font-weight: 600; color: #7b1fa2;">
+                            📋 Headings: <strong>${safeStats.headings.total}</strong>
+                            ${safeStats.headings.changed > 0 ? `<span style="color: #28a745; font-size: 0.6rem;"> (+${safeStats.headings.changed})</span>` : ''}
+                        </div>
+                    </div>
+
+                    <!-- Sections -->
+                    <div style="margin-bottom: 0.75rem; padding: 0.5rem; background: #e3f2fd; border-radius: 4px;">
+                        <div style="font-weight: 600; color: #1565c0; margin-bottom: 0.5rem;">
+                            📄 Sections: <strong>${safeStats.sections.total}</strong>
+                            ${safeStats.sections.changed > 0 ? `<span style="color: #28a745; font-size: 0.6rem;"> (+${safeStats.sections.changed})</span>` : ''}
+                        </div>
+                        <div style="font-size: 0.7rem;">
+                            <span>Lines: <strong>${safeStats.sections_detail.lines.toLocaleString()}</strong> | Words: <strong>${safeStats.sections_detail.words.toLocaleString()}</strong> | Chars: <strong>${safeStats.sections_detail.characters.toLocaleString()}</strong></span>
+                        </div>
+                    </div>
+
+                    <!-- Tables -->
+                    <div style="margin-bottom: 0.75rem; padding: 0.5rem; background: #fff3e0; border-radius: 4px;">
+                        <div style="font-weight: 600; color: #ef6c00; margin-bottom: 0.5rem;">
+                            🗂️ Tables: <strong>${safeStats.tables.total}</strong>
+                            ${safeStats.tables.changed > 0 ? `<span style="color: #28a745; font-size: 0.6rem;"> (+${safeStats.tables.changed})</span>` : ''}
+                        </div>
+                        <div style="font-size: 0.7rem;">
+                            <span>Lines: <strong>${safeStats.tables_detail.lines.toLocaleString()}</strong> | Words: <strong>${safeStats.tables_detail.words.toLocaleString()}</strong> | Chars: <strong>${safeStats.tables_detail.characters.toLocaleString()}</strong></span>
+                        </div>
+                    </div>
+
+                    <!-- Images -->
+                    <div style="margin-bottom: 0.75rem; padding: 0.5rem; background: #e8f5e8; border-radius: 4px;">
+                        <div style="font-weight: 600; color: #2e7d32;">
+                            🖼️ Images: <strong>${safeStats.images.total}</strong>
+                            ${safeStats.images.changed > 0 ? `<span style="color: #28a745; font-size: 0.6rem;"> (+${safeStats.images.changed})</span>` : ''}
+                        </div>
+                    </div>
+
+                    <!-- Actions with safer onclick handlers -->
+                    <div style="display: flex; gap: 0.25rem; margin-top: 0.5rem;">
+                        <button id="status-refresh-btn"
+                                style="flex: 1; padding: 0.4rem; background: #6c757d; color: white;
+                                       border: none; border-radius: 3px; cursor: pointer; font-size: 0.7rem;">
+                            🔄 Refresh
+                        </button>
+                        <button id="status-reset-btn"
+                                style="flex: 1; padding: 0.4rem; background: #dc3545; color: white;
+                                       border: none; border-radius: 3px; cursor: pointer; font-size: 0.7rem;">
+                            🔄 Reset Changes
+                        </button>
+                    </div>
+
+                </div>
+            `;
+
+            // Add safer event listeners instead of inline onclick
+            const refreshBtn = content.querySelector('#status-refresh-btn');
+            const resetBtn = content.querySelector('#status-reset-btn');
+
+            if (refreshBtn) {
+                refreshBtn.addEventListener('click', () => {
+                    this.control.safeOperation(() => {
+                        if (window.statusControl && window.statusControl.refreshStats) {
+                            window.statusControl.refreshStats();
+                        }
+                    }, null, 'refreshButton');
+                });
+            }
+
+            if (resetBtn) {
+                resetBtn.addEventListener('click', () => {
+                    this.control.safeOperation(() => {
+                        if (window.statusControl && window.statusControl.resetChangeTracking) {
+                            window.statusControl.resetChangeTracking();
+                        }
+                    }, null, 'resetButton');
+                });
+            }
+
+            console.log("📊 Status control content built successfully");
+
+            // Set up auto-refresh
+            this.setupAutoRefresh();
+
+            // Show panel and expand
+            this.control.expand();
+
+        }, () => {
+            console.error("📊 Error in buildContent: Failed to build status control content");
+            const content = this.control.safeQuerySelector('.control-content', this.control.element);
+            if (content) {
+                content.innerHTML = '<div style="color: #dc3545;">Status loading failed</div>';
+            }
+        }, 'buildContent');
+    }
+
+    refreshStats() {
+        if (this.control.isExpanded) {
+            this.updateChangeTracking();
+            // Update footer timestamp
+            this.control.config.footer = `Updated ${new Date().toLocaleTimeString()}`;
+            this.control.styleFooter();
+
+            const content = this.control.element.querySelector('.control-content');
+            if (content) {
+                const stats = this.calculateStats();
+                // Update the display without rebuilding entire content
+                this.buildContent();
+            }
+        }
+    }
+
+    resetChangeTracking() {
+        if (confirm('Reset all document changes? This will revert all sections to their original state.')) {
+            console.log('📊 Resetting document changes...');
+
+            // Reset using available infrastructure
+            if (window.sectionManager && window.domRenderer) {
+                // Use the proper document management infrastructure
+                try {
+                    // Hide any open editors
+                    window.domRenderer.hideCurrentEditor();
+
+                    // Reset all sections to original state
+                    const allSections = Array.from(window.sectionManager.sections.values());
+                    allSections.forEach(section => {
+                        section.resetToOriginal();
+                    });
+
+                    // Re-render all sections
+                    window.domRenderer.renderAllSections(allSections);
+
+                    console.log('📊 Document reset successful');
+
+                    // Add to debug system
+                    if (window.MarkitectDebugSystem) {
+                        window.MarkitectDebugSystem.addMessage(
+                            `Document reset completed - ${allSections.length} sections restored`,
+                            'SUCCESS',
+                            'StatusControl',
+                            { eventType: 'SYSTEM' }
+                        );
+                    }
+
+                } catch (error) {
+                    console.error('📊 Document reset failed:', error);
+
+                    if (window.MarkitectDebugSystem) {
+                        window.MarkitectDebugSystem.addMessage(
+                            `Document reset failed: ${error.message}`,
+                            'ERROR',
+                            'StatusControl',
+                            { eventType: 'SYSTEM' }
+                        );
+                    }
+                }
+            } else {
+                // Fallback to page reload if infrastructure not available
+                console.log('📊 Document management infrastructure not available, using page reload');
+                window.location.reload();
+            }
+
+            // Clear our own change tracking
+            this.control.changeTracking.headings.clear();
+            this.control.changeTracking.sections.clear();
+            this.control.changeTracking.images.clear();
+            this.control.changeTracking.tables.clear();
+            this.control.changeTracking.lastScanTime = Date.now();
+
+            // Refresh our display
+            this.refreshStats();
+        }
+    }
+
+    setupAutoRefresh() {
+        if (this.control.autoRefreshInterval) {
+            clearInterval(this.control.autoRefreshInterval);
+        }
+
+        this.control.autoRefreshInterval = setInterval(() => {
+            if (this.control.isExpanded) {
+                this.refreshStats();
+            }
+        }, 30000); // 30 seconds
+    }
+
+    createControl() {
+        return this.control.createControl();
+    }
+}
+
+// Export for global access
+window.StatusControl = StatusControl;
+
+// === js/controls/debug-control.js ===
+/**
+ * Debug Control - Displays debug information and system messages
+ * Implements the Robustness Principle with Fail Fast mode support
+ */
+
+class DebugControl {
+    constructor() {
+        this.control = Object.create(Control);
+        this.control.config = {
+            icon: '🪲',
+            title: 'Debug',
+            className: 'debug-control',
+            defaultContent: 'Click to view debug information',
+            ariaLabel: 'Debug Control',
+            position: 'w'
+        };
+
+        // Bind methods to control
+        this.control.buildContent = () => {
+            const content = this.control.element.querySelector('.control-content');
+            const messages = window.MarkitectDebugSystem ?
+                window.MarkitectDebugSystem.getMessages() : [];
+
+            content.innerHTML = `
+                <div style="padding: 1rem; font-size: 0.8rem;">
+                    <h4 style="margin-top: 0;">Debug Messages</h4>
+                    <div style="max-height: 200px; overflow-y: auto;">
+                        ${messages.length > 0 ?
+                            messages.slice(-10).map(msg =>
+                                `<div style="margin-bottom: 0.5rem; padding: 0.3rem; background: #f8f9fa; border-radius: 3px;">
+                                    <strong>[${msg.category}]</strong> ${msg.component}: ${msg.message}
+                                    <div style="font-size: 0.7rem; color: #666;">${msg.displayTime}</div>
+                                </div>`
+                            ).join('') :
+                            '<p>No debug messages yet</p>'
+                        }
+                    </div>
+                    <button onclick="if(window.MarkitectDebugSystem) window.MarkitectDebugSystem.clearMessages(); this.closest('.control-panel').querySelector('.control-content').innerHTML = '<div style=&quot;padding: 1rem; font-size: 0.8rem;&quot;><h4 style=&quot;margin-top: 0;&quot;>Debug Messages</h4><p>Messages cleared</p></div>'"
+                            style="margin-top: 0.5rem; padding: 0.3rem 0.6rem; font-size: 0.7rem; background: #dc3545; color: white; border: none; border-radius: 3px; cursor: pointer;">
+                        Clear Messages
+                    </button>
+                </div>
+            `;
+            this.control.isExpanded = true;
+        };
+
+        this.control.toggle = () => {
+            if (this.control.isExpanded) {
+                this.control.element.querySelector('.control-content').style.display = 'none';
+                this.control.isExpanded = false;
+            } else {
+                this.control.buildContent();
+                this.control.element.querySelector('.control-content').style.display = 'block';
+            }
+        };
+    }
+
+    createControl() {
+        return this.control.createControl();
+    }
+}
+
+window.DebugControl = DebugControl;
+
+// === js/controls/edit-control.js ===
+/**
+ * Edit Control - Document editing tools and actions
+ * Implements the Robustness Principle with Fail Fast mode support
+ */
+
+class EditControl {
+    constructor() {
+        this.control = Object.create(Control);
+        this.control.config = {
+            icon: '✏️',
+            title: 'Edit',
+            className: 'edit-control',
+            defaultContent: 'Document editing tools',
+            ariaLabel: 'Edit Control',
+            position: 'e'
+        };
+
+        // Bind methods to control
+        this.control.buildContent = () => {
+            const content = this.control.element.querySelector('.control-content');
+
+            content.innerHTML = `
+                <div style="padding: 1rem; font-size: 0.8rem;">
+                    <h4 style="margin-top: 0;">Edit Tools</h4>
+
+                    <div style="margin-bottom: 1rem;">
+                        <button onclick="window.print()"
+                                style="width: 100%; padding: 0.5rem; margin-bottom: 0.5rem; background: #28a745; color: white; border: none; border-radius: 3px; cursor: pointer; font-size: 0.8rem;">
+                            🖨️ Print Document
+                        </button>
+
+                        <button onclick="navigator.clipboard?.writeText(window.location.href) || prompt('Copy this URL:', window.location.href)"
+                                style="width: 100%; padding: 0.5rem; margin-bottom: 0.5rem; background: #17a2b8; color: white; border: none; border-radius: 3px; cursor: pointer; font-size: 0.8rem;">
+                            📋 Copy Link
+                        </button>
+
+                        <button onclick="window.scrollTo({top: 0, behavior: 'smooth'})"
+                                style="width: 100%; padding: 0.5rem; margin-bottom: 0.5rem; background: #6c757d; color: white; border: none; border-radius: 3px; cursor: pointer; font-size: 0.8rem;">
+                            ⬆️ Scroll to Top
+                        </button>
+                    </div>
+
+                    <div style="margin-top: 1rem; font-size: 0.7rem; color: #666; border-top: 1px solid #dee2e6; padding-top: 0.5rem;">
+                        <strong>Page Info:</strong><br>
+                        Title: ${document.title}<br>
+                        Words: ~${(document.body.textContent || '').split(/\\s+/).filter(w => w.length > 0).length}<br>
+                        Modified: ${document.lastModified}
+                    </div>
+                </div>
+            `;
+            this.control.isExpanded = true;
+        };
+
+        this.control.toggle = () => {
+            if (this.control.isExpanded) {
+                this.control.element.querySelector('.control-content').style.display = 'none';
+                this.control.isExpanded = false;
+            } else {
+                this.control.buildContent();
+                this.control.element.querySelector('.control-content').style.display = 'block';
+            }
+        };
+    }
+
+    createControl() {
+        return this.control.createControl();
+    }
+}
+
+window.EditControl = EditControl;
+
+
+// === Component Initialization ===
+document.addEventListener('DOMContentLoaded', function() {
+    // Create container for the markdown content
+    const container = document.getElementById('markdown-content') || document.body;
+
+    // Initialize components
+    const sectionManager = new SectionManager();
+    const domRenderer = new DOMRenderer(sectionManager, container);
+    const debugPanel = new DebugPanel();
+    const documentControls = new DocumentControls();
+
+    // Create document controls
+    documentControls.create();
+
+    // Step 4: Initialize modern Control-based architecture with compass positioning
+    console.log("🎛️ Initializing modern Control system with compass positioning...");
+
+    // ContentsControl (positioned upper left - nw)
+    const contentsControl = new ContentsControl();
+    contentsControl.control.config.position = 'nw';  // Upper left
+    contentsControl.createControl();
+    window.contentsControl = contentsControl;
+
+    // StatusControl (positioned right - e)
+    const statusControl = new StatusControl();
+    statusControl.control.config.position = 'e';  // Right
+    statusControl.createControl();
+    window.statusControl = statusControl;
+
+    // DebugControl (positioned lower right - se)
+    const debugControl = new DebugControl();
+    debugControl.control.config.position = 'se';  // Lower right
+    debugControl.createControl();
+    window.debugControl = debugControl;
+
+    // EditControl (positioned upper right - ne)
+    const editControl = new EditControl();
+    editControl.control.config.position = 'ne';  // Upper right
+    editControl.createControl();
+    window.editControl = editControl;
+
+    console.log("🎛️ Modern Control system initialized with compass positioning");
+
+    // Wire up event handlers
+    documentControls.setEventHandlers({
+        'save-document': () => {
+            console.log('Save document clicked');
+            try {
+                // Get current markdown content from section manager
+                const currentMarkdown = sectionManager.getDocumentMarkdown();
+
+                // Create filename with timestamp suffix following the established convention
+                const now = new Date();
+                const timestamp = now.toISOString().slice(0, 19).replace(/:/g, '-').replace('T', '-');
+
+                // Extract original filename from config or use default
+                const originalFilename = window.editorConfig?.originalFilename || 'document';
+                const editedFilename = `${originalFilename}-edited-${timestamp}.md`;
+
+                // Create and download the file
+                const blob = new Blob([currentMarkdown], { type: 'text/markdown' });
+                const url = URL.createObjectURL(blob);
+                const a = document.createElement('a');
+                a.href = url;
+                a.download = editedFilename;
+                document.body.appendChild(a);
+                a.click();
+                document.body.removeChild(a);
+                URL.revokeObjectURL(url);
+
+                // Log success to debug panel
+                debugPanel.addMessage(`Document saved as: ${editedFilename}`, 'SUCCESS');
+                console.log(`Document successfully saved as: ${editedFilename}`);
+
+            } catch (error) {
+                debugPanel.addMessage(`Save failed: ${error.message}`, 'ERROR');
+                console.error('Save error:', error);
+            }
+        },
+        'reset-all': () => {
+            console.log('Reset all clicked');
+            // Hide any open editors
+            domRenderer.hideCurrentEditor();
+            // Reset all sections to original state
+            const allSections = Array.from(sectionManager.sections.values());
+            allSections.forEach(section => {
+                section.resetToOriginal();
+            });
+            // Re-render all sections
+            domRenderer.renderAllSections(allSections);
+            debugPanel.addMessage(`Reset all sections to original state`, 'INFO');
+        },
+        'show-status': () => {
+            const status = sectionManager.getDocumentStatus();
+            alert(`Document Status:\nTotal Sections: ${status.totalSections}\nEditing Sections: ${status.editingSections}`);
+        },
+        'toggle-debug': () => {
+            debugPanel.toggle();
+        }
+    });
+
+    // Set up debug panel integration
+    sectionManager.on('sections-created', (data) => {
+        debugPanel.addMessage(`Created ${data.count} sections`, 'INFO');
+    });
+
+    sectionManager.on('edit-started', (data) => {
+        debugPanel.addMessage(`Edit started for section: ${data.sectionId}`, 'DEBUG');
+    });
+
+    sectionManager.on('changes-accepted', (data) => {
+        debugPanel.addMessage(`Changes accepted for section: ${data.sectionId}`, 'SUCCESS');
+        // Re-render the section to show updated content
+        const section = sectionManager.sections.get(data.sectionId);
+        if (section) {
+            const sectionElement = domRenderer.findSectionElement(data.sectionId);
+            if (sectionElement) {
+                const newElement = domRenderer.renderSection(section);
+                sectionElement.parentNode.replaceChild(newElement, sectionElement);
+                debugPanel.addMessage(`DOM updated for section: ${data.sectionId}`, 'INFO');
+            }
+        }
+    });
+
+    sectionManager.on('changes-cancelled', (data) => {
+        debugPanel.addMessage(`Changes cancelled for section: ${data.sectionId}`, 'WARNING');
+    });
+
+    // Initialize with markdown content
+    const markdownToRender = markdownContent || '';
+    if (markdownToRender.trim()) {
+        const sections = sectionManager.createSectionsFromMarkdown(markdownToRender);
+        domRenderer.renderAllSections(sections);
+        debugPanel.addMessage(`Initialized with ${sections.length} sections`, 'INFO');
+    } else {
+        debugPanel.addMessage('No markdown content to initialize', 'WARNING');
+    }
+
+    // Make components globally available for debugging
+    window.markitectComponents = {
+        sectionManager,
+        domRenderer,
+        debugPanel,
+        documentControls
+    };
+
+    console.log('Markitect modular editor initialized successfully');
+});
+
+
+        // Always render content first (graceful degradation)
+        document.addEventListener('DOMContentLoaded', function() {
+            console.log("🎯 Rendering content in edit mode...");
+
+            // Initialize edit/insert capabilities first (always needed)
+            if ((typeof MARKITECT_EDIT_MODE !== 'undefined' && MARKITECT_EDIT_MODE) ||
+                (typeof MARKITECT_INSERT_MODE !== 'undefined' && MARKITECT_INSERT_MODE)) {
+                const mode = (typeof MARKITECT_INSERT_MODE !== 'undefined' && MARKITECT_INSERT_MODE) ? 'insert' : 'edit';
+                console.log(`🚀 Initializing clean ${mode} capabilities...`);
+                try {
+                    console.log("Creating clean editor instance...");
+                    initializeCleanEditor();
+                    if (mode === 'insert') {
+                        console.log("✅ Clean insert mode active - click any section to edit (headings 1-3 protected)");
+                    } else {
+                        console.log("✅ Clean edit mode active - click any section to edit");
+                    }
+                } catch (error) {
+                    console.error(`❌ Clean ${mode} mode failed to initialize:`, error);
+                }
+            }
+
+            // Check if modular components are being used for content rendering
+            if (typeof SectionManager !== 'undefined') {
+                console.log("✓ Modular components detected - skipping fallback content rendering");
+                console.log("✓ Content will be rendered by modular architecture");
+                return;
+            }
+
+            const contentDiv = document.getElementById('markdown-content');
+
+            // Step 1: Ensure content is always displayed (fallback for non-modular mode)
+            if (contentDiv) {
+                if (typeof marked !== 'undefined') {
+                    try {
+                        const html = marked.parse(markdownContentWithDogtag);
+                        // Add target="_blank" to all links
+                        const htmlWithTargetBlank = html.replace(/<a href="([^"]*)"([^>]*)>/g, '<a href="$1" target="_blank"$2>');
+                        contentDiv.innerHTML = htmlWithTargetBlank;
+                        console.log("✓ Content rendered successfully");
+                    } catch (error) {
+                        contentDiv.innerHTML = '<p>Error rendering markdown: ' + error.message + '</p>';
+                        console.error("Content rendered with errors");
+                        console.error("Markdown parsing failed:", error.message);
+                    }
+                } else {
+                    // Fallback: display raw markdown with basic formatting
+                    const fallbackHtml = markdownContent
+                        .replace(/^# (.*$)/gim, '<h1>$1</h1>')
+                        .replace(/^## (.*$)/gim, '<h2>$1</h2>')
+                        .replace(/^### (.*$)/gim, '<h3>$1</h3>')
+                        .replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>')
+                        .replace(/\*(.*?)\*/g, '<em>$1</em>')
+                        .replace(/^- (.*$)/gim, '<li>$1</li>')
+                        .replace(/\n\n/g, '<br><br>')
+                        .replace(/\n/g, '<br>');
+                    contentDiv.innerHTML = '<div style="white-space: pre-wrap;">' + fallbackHtml + '</div>';
+                    console.warn("Content rendered with fallback parser");
+                    console.warn("CDN library failed to load - using basic fallback rendering");
+                }
+            }
+
+            // Step 3: Initialize scroll indicators
+            try {
+                initializeScrollIndicators();
+            } catch (error) {
+                console.error("Scroll indicators failed to initialize:", error);
+            }
+        });
+
+        window.addEventListener('load', function() {
+            if (window.markitectMarkedError) {
+                console.error("CDN library failed to load - network or firewall blocking marked.js");
+            }
+        });
+    </script>
+</body>
+</html>
\ No newline at end of file
diff --git a/relicts/ControlFooter.html b/relicts/ControlFooter.html
new file mode 100755
index 00000000..e515f684
--- /dev/null
+++ b/relicts/ControlFooter.html
@@ -0,0 +1,201 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Test Control Footer Feature</title>
+    <meta name="filename" content="footer-test.md">
+    <style>
+        body {
+            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+            margin: 0;
+            padding: 20px;
+            background-color: #f5f5f5;
+        }
+
+        .test-content {
+            background: white;
+            padding: 2rem;
+            border-radius: 8px;
+            margin-bottom: 1rem;
+            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+        }
+
+        .feature-box {
+            background: #e8f5e8;
+            padding: 1rem;
+            border-radius: 4px;
+            margin: 1rem 0;
+            border-left: 4px solid #2e7d32;
+        }
+
+        .example-box {
+            background: #f8f9fa;
+            padding: 1rem;
+            border-radius: 4px;
+            margin: 1rem 0;
+            border-left: 4px solid #6c757d;
+            font-family: monospace;
+            font-size: 0.9rem;
+        }
+
+        .info-box {
+            background: #e3f2fd;
+            padding: 1rem;
+            border-radius: 4px;
+            margin: 1rem 0;
+            border-left: 4px solid #1565c0;
+        }
+    </style>
+</head>
+<body>
+    <div class="test-content">
+        <h1>Control Footer Feature Test</h1>
+
+        <div class="feature-box">
+            <strong>✨ New Feature: Control Footers</strong>
+            <p>All controls now have configurable footers with a default Markitect copyright notice!</p>
+
+            <ul>
+                <li><strong>Default Footer:</strong> "© Markitect [VERSION]" when no custom footer is provided</li>
+                <li><strong>Custom Footer:</strong> Controls can override with custom text</li>
+                <li><strong>Styling:</strong> Consistent small grey footer with border at bottom of controls</li>
+                <li><strong>Auto-styling:</strong> Footer automatically styled when control expands</li>
+            </ul>
+        </div>
+
+        <h2>Expected Footer Examples</h2>
+
+        <div class="example-box">
+            <strong>Default Footer (Status Control, Debug Control, Contents Control):</strong><br>
+            <code>© Markitect 2024.11.11</code>
+
+            <br><br>
+            <strong>Custom Footer (Edit Control):</strong><br>
+            <code>Document management • [current time]</code>
+        </div>
+
+        <div class="info-box">
+            <strong>Testing Instructions:</strong>
+            <ol>
+                <li>Open any control (Contents, Status, Debug, Edit)</li>
+                <li>Look at the bottom of the expanded control</li>
+                <li>Verify footer appears with appropriate text</li>
+                <li>Check that footer has light grey background and border</li>
+                <li>Edit Control should show custom footer with timestamp</li>
+                <li>Other controls should show "© Markitect [version]"</li>
+            </ol>
+        </div>
+
+        <h3>Footer Styling</h3>
+
+        <p>The footer should have the following characteristics:</p>
+        <ul>
+            <li><strong>Position:</strong> Bottom of control panel</li>
+            <li><strong>Background:</strong> Light grey (#f8f9fa)</li>
+            <li><strong>Border:</strong> Top border (#e9ecef)</li>
+            <li><strong>Text:</strong> Small, italicized, centered</li>
+            <li><strong>Color:</strong> Muted grey (#6c757d)</li>
+        </ul>
+
+        <h3>Version Detection</h3>
+
+        <p>The footer tries to get the version from:</p>
+        <ol>
+            <li><code>window.markitectVersion</code> (if set)</li>
+            <li>Fallback to <code>2024.11.11</code></li>
+        </ol>
+
+        <div class="feature-box">
+            <strong>Implementation Details:</strong>
+            <ul>
+                <li><strong>Base Class:</strong> Added footer functionality to both Control classes</li>
+                <li><strong>Template Update:</strong> Added footer div to control HTML template</li>
+                <li><strong>Auto-styling:</strong> <code>styleFooter()</code> called automatically on expand</li>
+                <li><strong>Configuration:</strong> <code>config.footer</code> property controls footer text</li>
+            </ul>
+        </div>
+
+        <p>This document provides test content to verify that all control footers are working correctly with both default and custom footer text.</p>
+    </div>
+
+    <script>
+        // Set a custom version for testing
+        window.markitectVersion = '1.2.3-test';
+
+        // Mock section manager
+        window.sectionManager = {
+            getDocumentMarkdown: function() {
+                return `# Footer Test\n\nTest content for footer functionality.\n\nGenerated: ${new Date().toISOString()}`;
+            }
+        };
+
+        // Load the clean document manager
+        fetch('/markitect/clean_document_manager.py')
+            .then(response => response.text())
+            .then(pythonCode => {
+                const jsMatches = pythonCode.match(/'''(\s*(?:\/\/.*\n)*\s*(?:if \(window\.location\.href\.includes\(['"]edit['"].*?(?:\n.*?)*?}\s*)\s*'''/gs);
+
+                if (jsMatches && jsMatches.length > 0) {
+                    const jsCode = jsMatches[0].replace(/'''/g, '').trim();
+
+                    const script = document.createElement('script');
+                    script.textContent = `
+                        Object.defineProperty(window.location, 'href', {
+                            value: 'http://localhost:8080/edit?file=footer-test.md',
+                            writable: false
+                        });
+
+                        ${jsCode}
+
+                        setTimeout(() => {
+                            console.log('🦶 Testing Control Footer Feature...');
+
+                            // Test all controls have footer functionality
+                            const controls = [
+                                window.contentsControl,
+                                window.statusControl,
+                                window.debugControl,
+                                window.editControl
+                            ].filter(Boolean);
+
+                            console.log(\`📊 Found \${controls.length} controls to test\`);
+
+                            controls.forEach((control, index) => {
+                                if (control && control.getFooter) {
+                                    const defaultFooter = control.getDefaultFooter();
+                                    const actualFooter = control.getFooter();
+
+                                    console.log(\`\${index + 1}. \${control.config.title} Control:\`);
+                                    console.log(\`   Default footer: "\${defaultFooter}"\`);
+                                    console.log(\`   Actual footer: "\${actualFooter}"\`);
+                                    console.log(\`   Custom footer set: \${control.config.footer !== null}\`);
+                                    console.log(\`   Version: \${control.getMarkitectVersion()}\`);
+                                } else {
+                                    console.log(\`\${index + 1}. Control missing footer functionality\`);
+                                }
+                            });
+
+                            // Test version detection
+                            if (controls.length > 0) {
+                                const version = controls[0].getMarkitectVersion();
+                                if (version === '1.2.3-test') {
+                                    console.log('✅ Version detection working (using window.markitectVersion)');
+                                } else {
+                                    console.log(\`⚠️ Version detection: \${version} (expected 1.2.3-test)\`);
+                                }
+                            }
+
+                            console.log('👀 Open any control to see the footer at the bottom!');
+
+                        }, 2000);
+                    `;
+                    document.head.appendChild(script);
+                }
+            })
+            .catch(error => {
+                console.error('Error loading clean_document_manager.py:', error);
+            });
+    </script>
+</body>
+</html>
\ No newline at end of file
diff --git a/relicts/DebugControlContent.html b/relicts/DebugControlContent.html
new file mode 100755
index 00000000..8aef0ca6
--- /dev/null
+++ b/relicts/DebugControlContent.html
@@ -0,0 +1,4092 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Test Document</title>
+    
+    <style>
+            body {
+                font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif;
+                max-width: 800px;
+                margin: 0 auto;
+                padding: 2rem;
+                line-height: 1.6;
+                color: #333333;
+                background-color: #ffffff;
+            }
+            #markdown-content {
+                min-height: 200px;
+            }
+            h1, h2, h3, h4, h5, h6 {
+                color: #333333;
+                
+            }
+            pre {
+                background-color: #f6f8fa;
+                color: #333333;
+                padding: 1rem;
+                border-radius: 6px;
+                overflow-x: auto;
+                border: 1px solid #d0d7de;
+            }
+            code {
+                background-color: #f6f8fa;
+                color: #333333;
+                padding: 0.2em 0.4em;
+                border-radius: 3px;
+                font-size: 0.9em;
+            }
+            pre code {
+                background: none;
+                padding: 0;
+            }
+            blockquote {
+                border-left: 4px solid #dfe2e5;
+                margin: 0;
+                padding-left: 1rem;
+                color: #6a737d;
+            }
+            table {
+                font-size: 0.85em;
+                border-collapse: collapse;
+                margin: 1rem 0;
+                width: 100%;
+                border: 1px solid #d0d7de;
+            }
+            th, td {
+                font-size: inherit;
+                border: 1px solid #d0d7de;
+                padding: 0.5rem;
+                text-align: left;
+            }
+            th {
+                background-color: #f6f8fa;
+                font-weight: 600;
+            }
+            img {
+                max-width: 12cm;
+                max-height: 20cm;
+                height: auto;
+                display: block;
+                margin: 1rem auto;
+            }</style>
+
+    <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"
+            onload="window.markitectMarkedLoaded = true"
+            onerror="window.markitectMarkedError = true"></script>
+</head>
+<body class="markitect-edit-mode">
+
+    <div id="markdown-content"></div>
+
+    <script>
+        const markdownContent = "# Test Document\n\nIntroduction section with some content.\n\n## Features\n\nThis section describes various features.\n\n### Feature A\n\nDetails about the first feature.\n\n### Feature B\n\nInformation about the second feature.\n\n## Conclusion\n\nFinal summary section.\n";
+        const markdownContentWithDogtag = "# Test Document\n\nIntroduction section with some content.\n\n## Features\n\nThis section describes various features.\n\n### Feature A\n\nDetails about the first feature.\n\n### Feature B\n\nInformation about the second feature.\n\n## Conclusion\n\nFinal summary section.\n\n\n---\n*-- html from markdown by <a href=\"https://coulomb.social/open/MarkiTect\" target=\"_blank\">MarkiTect</a> on 2025-11-11 00:01:28 by <a href=\"https://coulomb.social/open/worsch\" target=\"_blank\">worsch</a>*";
+        const dogtagContent = "\n\n---\n*-- html from markdown by <a href=\"https://coulomb.social/open/MarkiTect\" target=\"_blank\">MarkiTect</a> on 2025-11-11 00:01:28 by <a href=\"https://coulomb.social/open/worsch\" target=\"_blank\">worsch</a>*";
+        window.markitectBase64References = {};
+        
+        const MARKITECT_EDIT_MODE = true;
+        const MARKITECT_EDITOR_CONFIG = {
+            mode: 'edit',
+            theme: 'github',
+            keyboardShortcuts: true,
+            autosave: false,
+            sections: true,
+            originalFilename: 'tmp1x9ds_fj',
+            version: 'Markitect v0.8.1.dev23+g3839a6761.d20251110',
+            repoName: 'Markitect'
+        };
+
+        // Make config available globally
+        window.editorConfig = MARKITECT_EDITOR_CONFIG;
+
+        // === js/core/section-manager.js ===
+/**
+ * SectionManager Component
+ *
+ * Extracted from monolithic editor.js as part of architecture refactoring.
+ * Manages the collection of sections and their state transitions.
+ *
+ * Dependencies:
+ * - EditState enum (imported)
+ * - SectionType enum (imported)
+ * - Section class (imported)
+ * - debug function (imported)
+ */
+
+// Import dependencies - these will be separate modules
+const EditState = Object.freeze({
+    ORIGINAL: 'original',
+    EDITING: 'editing',
+    MODIFIED: 'modified',
+    SAVED: 'saved'
+});
+
+const SectionType = Object.freeze({
+    HEADING: 'heading',
+    PARAGRAPH: 'paragraph',
+    LIST: 'list',
+    CODE: 'code',
+    QUOTE: 'quote',
+    TABLE: 'table',
+    HR: 'hr',
+    IMAGE: 'image'
+});
+
+// Debug function (will be extracted to utils)
+function debug(message, category = 'INFO') {
+    // Simple console debug for now - will be enhanced later
+    console.log(`DEBUG ${category}: ${message}`);
+}
+
+/**
+ * Section Class - manages individual section state and content
+ */
+class Section {
+    constructor(id, markdown, type) {
+        this.id = id;
+        this.originalMarkdown = markdown;
+        this.currentMarkdown = markdown;
+        this.editingMarkdown = markdown;
+        this.pendingMarkdown = null;
+        this.type = type;
+        this.state = EditState.ORIGINAL;
+        this.domElement = null;
+        this.lastSaved = null;
+        this.created = new Date();
+    }
+
+    static generateId(markdown, position, strategy = 'hash', parentId = null) {
+        return this.generateIdWithStrategy(markdown, position, strategy, parentId);
+    }
+
+    static generateIdWithStrategy(markdown, position, strategy = 'hash', parentId = null) {
+        const sanitizedContent = this.sanitizeContentForId(markdown);
+        const normalizedContent = this.normalizeContentForHashing(sanitizedContent);
+        const sectionType = this.detectType(markdown);
+
+        switch (strategy) {
+            case 'timestamp':
+                return this.generateTimestampId(normalizedContent, position, sectionType);
+            case 'sequential':
+                return this.generateSequentialId(normalizedContent, position, sectionType);
+            case 'hierarchical':
+                return this.generateHierarchicalId(normalizedContent, position, parentId);
+            case 'hash':
+            default:
+                return this.generateAdvancedId(normalizedContent, position, sectionType);
+        }
+    }
+
+    static generateAdvancedId(content, position, sectionType) {
+        const contentHash = this.generateCryptoHash(content);
+        const safeType = sectionType || 'paragraph';
+        const typePrefix = safeType.substring(0, 3);
+        const positionHex = position.toString(16).padStart(2, '0');
+
+        return `section-${typePrefix}-${contentHash}-${positionHex}`;
+    }
+
+    static generateCryptoHash(content) {
+        let hash = 0;
+        if (content.length === 0) return '00000000';
+
+        for (let i = 0; i < content.length; i++) {
+            const char = content.charCodeAt(i);
+            hash = ((hash << 5) - hash) + char;
+            hash = hash & hash;
+        }
+
+        const hexHash = Math.abs(hash).toString(16).padStart(8, '0');
+        return hexHash.substring(0, 8);
+    }
+
+    static normalizeContentForHashing(content) {
+        if (!content || typeof content !== 'string') {
+            return '';
+        }
+
+        return content
+            .trim()
+            .replace(/\s+/g, ' ')
+            .replace(/\r\n/g, '\n')
+            .toLowerCase();
+    }
+
+    static sanitizeContentForId(content) {
+        if (!content || typeof content !== 'string') {
+            return '';
+        }
+
+        return content
+            .replace(/<[^>]*>/g, '')
+            .replace(/javascript:/gi, '')
+            .replace(/[^\w\s\-_.#]/g, '')
+            .trim();
+    }
+
+    static generateTimestampId(content, position = 0, sectionType = 'paragraph') {
+        const timestamp = Date.now().toString(36);
+        const contentSnippet = this.generateCryptoHash(content || '').substring(0, 4);
+        const safeType = sectionType || 'paragraph';
+        const typePrefix = safeType.substring(0, 3);
+
+        return `section-${typePrefix}-${contentSnippet}-${timestamp}`;
+    }
+
+    static generateSequentialId(content, position, sectionType = 'paragraph') {
+        const safeType = sectionType || 'paragraph';
+        const typePrefix = safeType.substring(0, 3);
+        const seqNumber = (position || 0).toString().padStart(3, '0');
+        const contentHash = this.generateCryptoHash(content || '').substring(0, 4);
+
+        return `section-${typePrefix}-seq${seqNumber}-${contentHash}`;
+    }
+
+    static generateHierarchicalId(content, position, parentId = null) {
+        const contentHash = this.generateCryptoHash(content || '').substring(0, 6);
+
+        if (parentId) {
+            const childIndex = (position || 0).toString().padStart(2, '0');
+            return `${parentId}-child-${childIndex}-${contentHash}`;
+        } else {
+            return `section-root-${position || 0}-${contentHash}`;
+        }
+    }
+
+    static detectType(markdown) {
+        if (!markdown || typeof markdown !== 'string') {
+            return SectionType.PARAGRAPH;
+        }
+
+        const content = markdown.replace(/^\n+|\n+$/g, '');
+        if (!content) {
+            return SectionType.PARAGRAPH;
+        }
+
+        const trimmed = content.trim();
+
+        // Detection order matters - most specific first
+        if (this.isHeading(trimmed)) {
+            return SectionType.HEADING;
+        }
+
+        if (this.isImage(trimmed)) {
+            return SectionType.IMAGE;
+        }
+
+        if (this.isCodeBlock(trimmed)) {
+            return SectionType.CODE;
+        }
+
+        return SectionType.PARAGRAPH;
+    }
+
+    static isHeading(trimmed) {
+        const headingPattern = /^#{1,6}\s+.+/;
+        return headingPattern.test(trimmed);
+    }
+
+    static isImage(trimmed) {
+        const imagePattern = /!\[.*?\]\([^)]+\)/;
+        return imagePattern.test(trimmed);
+    }
+
+    static isCodeBlock(trimmed) {
+        if (trimmed.startsWith('```') || trimmed.startsWith('~~~')) {
+            return true;
+        }
+        if (trimmed.includes('```') || trimmed.includes('~~~')) {
+            const codeBlockPattern = /```[\s\S]*?```|~~~[\s\S]*?~~~/;
+            if (codeBlockPattern.test(trimmed)) {
+                return true;
+            }
+        }
+        return false;
+    }
+
+    startEdit() {
+        if (this.state === EditState.EDITING) {
+            throw new Error(`Section ${this.id} is already being edited`);
+        }
+        this.editingMarkdown = this.pendingMarkdown || this.currentMarkdown;
+        this.state = EditState.EDITING;
+        return this.editingMarkdown;
+    }
+
+    updateContent(markdown) {
+        if (this.state !== EditState.EDITING) {
+            throw new Error(`Section ${this.id} is not in editing state`);
+        }
+        this.editingMarkdown = markdown;
+    }
+
+    acceptChanges() {
+        if (this.state !== EditState.EDITING) {
+            throw new Error(`Section ${this.id} is not in editing state`);
+        }
+        this.currentMarkdown = this.editingMarkdown;
+        this.editingMarkdown = null;
+        this.pendingMarkdown = null;
+        this.state = EditState.SAVED;
+        this.lastSaved = new Date();
+        return this.currentMarkdown;
+    }
+
+    cancelChanges() {
+        if (this.state !== EditState.EDITING) {
+            throw new Error(`Section ${this.id} is not in editing state`);
+        }
+        this.editingMarkdown = null;
+        if (this.pendingMarkdown !== null) {
+            this.state = EditState.MODIFIED;
+            return this.pendingMarkdown;
+        } else if (this.lastSaved !== null) {
+            this.state = EditState.SAVED;
+            return this.currentMarkdown;
+        } else {
+            this.state = this.hasChanges() ? EditState.MODIFIED : EditState.ORIGINAL;
+            return this.currentMarkdown;
+        }
+    }
+
+    stopEditing() {
+        if (this.state !== EditState.EDITING) {
+            return this.state;
+        }
+
+        if (this.editingMarkdown && this.editingMarkdown !== this.currentMarkdown) {
+            this.pendingMarkdown = this.editingMarkdown;
+            this.state = EditState.MODIFIED;
+        } else {
+            this.pendingMarkdown = null;
+            if (this.lastSaved !== null) {
+                this.state = EditState.SAVED;
+            } else {
+                this.state = this.hasChanges() ? EditState.MODIFIED : EditState.ORIGINAL;
+            }
+        }
+
+        this.editingMarkdown = null;
+        return this.state;
+    }
+
+    resetToOriginal() {
+        this.currentMarkdown = this.originalMarkdown;
+        this.editingMarkdown = this.originalMarkdown;
+        this.pendingMarkdown = null;
+        this.state = EditState.ORIGINAL;
+        return this.originalMarkdown;
+    }
+
+    isEditing() {
+        return this.state === EditState.EDITING;
+    }
+
+    hasChanges() {
+        return this.currentMarkdown !== this.originalMarkdown;
+    }
+
+    getStatus() {
+        return {
+            id: this.id,
+            state: this.state,
+            hasChanges: this.hasChanges(),
+            isEditing: this.isEditing(),
+            contentLength: this.currentMarkdown.length,
+            lastSaved: this.lastSaved,
+            type: this.type,
+            originalLength: this.originalMarkdown.length,
+            currentLength: this.currentMarkdown.length
+        };
+    }
+
+    isImage() {
+        return this.type === SectionType.IMAGE;
+    }
+
+    redetectType(content = null) {
+        const markdown = content || this.currentMarkdown;
+        const oldType = this.type;
+        this.type = Section.detectType(markdown);
+
+        if (oldType !== this.type) {
+            debug(`Section ${this.id} type changed from ${oldType} to ${this.type}`, 'TYPE_DETECTION');
+        }
+
+        return this.type;
+    }
+}
+
+/**
+ * SectionManager - Manages the collection of sections
+ */
+class SectionManager {
+    constructor() {
+        this.sections = new Map();
+        this.listeners = new Map();
+        this.statusInterval = null;
+        this.lastStatusUpdate = new Date().toISOString();
+    }
+
+    on(event, callback) {
+        if (!this.listeners.has(event)) {
+            this.listeners.set(event, []);
+        }
+        this.listeners.get(event).push(callback);
+    }
+
+    emit(event, data) {
+        if (this.listeners.has(event)) {
+            this.listeners.get(event).forEach(callback => callback(data));
+        }
+    }
+
+    createSectionsFromMarkdown(markdownContent) {
+        // Split content into blocks separated by double newlines
+        const blocks = markdownContent.split(/\n\s*\n/);
+        const sections = [];
+        let position = 0;
+
+        for (const block of blocks) {
+            const trimmedBlock = block.trim();
+            if (!trimmedBlock) continue;
+
+            // Check if this block should be split further
+            const lines = trimmedBlock.split('\n');
+            let currentSection = '';
+
+            for (let i = 0; i < lines.length; i++) {
+                const line = lines[i];
+                const isHeading = /^#{1,6}\s/.test(line.trim());
+                const isImage = /^\s*!\[.*?\]\(.*?\)\s*$/.test(line);
+
+                // Each heading or image starts a new section
+                if ((isHeading || isImage) && currentSection.trim()) {
+                    // Save the previous section
+                    const sectionId = Section.generateId(currentSection, position);
+                    const sectionType = Section.detectType(currentSection);
+                    const section = new Section(sectionId, currentSection.trim(), sectionType);
+                    sections.push(section);
+                    this.sections.set(sectionId, section);
+                    position++;
+                    currentSection = line;
+                } else {
+                    if (currentSection) currentSection += '\n';
+                    currentSection += line;
+                }
+            }
+
+            // Save the final section from this block
+            if (currentSection.trim()) {
+                const sectionId = Section.generateId(currentSection, position);
+                const sectionType = Section.detectType(currentSection);
+                const section = new Section(sectionId, currentSection.trim(), sectionType);
+                sections.push(section);
+                this.sections.set(sectionId, section);
+                position++;
+            }
+        }
+
+        this.emit('sections-created', { sections, count: sections.length });
+        return sections;
+    }
+
+    startEditing(sectionId) {
+        debug('MANAGER: startEditing called for: ' + sectionId, 'MANAGER');
+
+        const section = this.sections.get(sectionId);
+        if (!section) {
+            throw new Error(`Section ${sectionId} not found`);
+        }
+
+        if (section.isEditing()) {
+            debug('MANAGER: Section already in editing state: ' + sectionId, 'MANAGER');
+            return section.editingMarkdown;
+        }
+
+        debug('MANAGER: Starting edit for section: ' + sectionId, 'MANAGER');
+        const content = section.startEdit();
+
+        debug('MANAGER: About to emit edit-started event for: ' + sectionId, 'MANAGER');
+        this.emit('edit-started', { sectionId, content, section: section.getStatus() });
+        debug('MANAGER: Emitted edit-started event for: ' + sectionId, 'MANAGER');
+
+        return content;
+    }
+
+    updateContent(sectionId, markdown) {
+        const section = this.sections.get(sectionId);
+        if (!section) {
+            throw new Error(`Section ${sectionId} not found`);
+        }
+
+        const oldType = section.type;
+        section.updateContent(markdown);
+        const newType = section.redetectType(markdown);
+
+        const eventData = {
+            sectionId,
+            markdown,
+            section: section.getStatus(),
+            typeChanged: oldType !== newType,
+            oldType,
+            newType
+        };
+
+        this.emit('content-updated', eventData);
+
+        if (oldType !== newType) {
+            this.emit('section-type-changed', {
+                sectionId,
+                oldType,
+                newType,
+                section: section.getStatus()
+            });
+        }
+    }
+
+    acceptChanges(sectionId) {
+        const section = this.sections.get(sectionId);
+        if (!section) {
+            throw new Error(`Section ${sectionId} not found`);
+        }
+
+        const content = section.acceptChanges();
+        this.emit('changes-accepted', { sectionId, content, section: section.getStatus() });
+        return content;
+    }
+
+    cancelChanges(sectionId) {
+        const section = this.sections.get(sectionId);
+        if (!section) {
+            throw new Error(`Section ${sectionId} not found`);
+        }
+
+        const content = section.cancelChanges();
+        this.emit('changes-cancelled', { sectionId, content, section: section.getStatus() });
+        return content;
+    }
+
+    resetSection(sectionId) {
+        const section = this.sections.get(sectionId);
+        if (!section) {
+            throw new Error(`Section ${sectionId} not found`);
+        }
+
+        const content = section.resetToOriginal();
+        this.emit('section-reset', { sectionId, content, section: section.getStatus() });
+        return content;
+    }
+
+    getDocumentMarkdown() {
+        const sortedSections = Array.from(this.sections.values())
+            .sort((a, b) => a.created - b.created);
+
+        return sortedSections.map(section => section.currentMarkdown).join('\n\n');
+    }
+
+    getAllSections() {
+        return Array.from(this.sections.values());
+    }
+
+    getDocumentStatus() {
+        const sections = Array.from(this.sections.values());
+        const editingSections = sections.filter(section => section.isEditing).length;
+
+        return {
+            totalSections: sections.length,
+            editingSections: editingSections
+        };
+    }
+
+    extractHeadings(content) {
+        if (!content) return [];
+        const lines = content.split('\n');
+        return lines.filter(line => /^#{1,6}\s/.test(line.trim()));
+    }
+
+    handleSectionSplit(sectionId, newContent) {
+        const section = this.sections.get(sectionId);
+        if (!section) {
+            throw new Error(`Section ${sectionId} not found`);
+        }
+
+        // Remove the original section
+        this.sections.delete(sectionId);
+
+        // Create new sections from the content
+        const newSections = this.createSectionsFromMarkdown(newContent);
+
+        // Emit section-split event
+        this.emit('section-split', {
+            originalSectionId: sectionId,
+            newSections: newSections,
+            count: newSections.length
+        });
+
+        return newSections;
+    }
+
+    createSectionsFromContent(content) {
+        return this.createSectionsFromMarkdown(content);
+    }
+}
+
+// Export for use in tests and other modules
+if (typeof module !== 'undefined' && module.exports) {
+    module.exports = { SectionManager, Section, EditState, SectionType };
+}
+
+// Export for browser use
+if (typeof window !== 'undefined') {
+    window.SectionManager = SectionManager;
+    window.Section = Section;
+    window.EditState = EditState;
+    window.SectionType = SectionType;
+}
+
+// === js/components/debug-panel.js ===
+/**
+ * DebugPanel Component
+ *
+ * Extracted from monolithic editor.js as part of architecture refactoring.
+ * Handles debug message display and management for client-side debugging.
+ *
+ * Dependencies:
+ * - None (standalone component)
+ */
+
+/**
+ * DebugPanel - Manages debug message display and interaction
+ */
+class DebugPanel {
+    constructor() {
+        this.messages = [];
+        this.isActive = false;
+        this.maxMessages = 1000; // Keep last 1000 messages
+    }
+
+    /**
+     * Add a debug message
+     */
+    addMessage(message, category = 'INFO') {
+        const messageObj = {
+            message,
+            category,
+            timestamp: new Date().toLocaleTimeString()
+        };
+
+        this.messages.push(messageObj);
+
+        // Keep only last maxMessages
+        if (this.messages.length > this.maxMessages) {
+            this.messages = this.messages.slice(-this.maxMessages);
+        }
+
+        // Auto-update if panel is visible
+        if (this.isActive) {
+            this.update();
+        }
+    }
+
+    /**
+     * Toggle the debug panel on/off
+     */
+    toggle() {
+        const debugContainer = document.getElementById('debug-messages-container');
+        const debugButton = document.getElementById('toggle-debug');
+
+        if (!debugContainer || !debugButton) {
+            console.warn('DebugPanel: Required DOM elements not found');
+            return;
+        }
+
+        if (this.isActive) {
+            this.hide();
+        } else {
+            this.show();
+        }
+    }
+
+    /**
+     * Show the debug panel
+     */
+    show() {
+        const debugContainer = document.getElementById('debug-messages-container');
+        const debugButton = document.getElementById('toggle-debug');
+
+        if (!debugContainer || !debugButton) {
+            console.warn('DebugPanel: Required DOM elements not found');
+            return;
+        }
+
+        debugContainer.style.display = 'block';
+        debugButton.textContent = '🔍 Debug (ON)';
+        debugButton.style.background = '#28a745';
+        this.isActive = true;
+        this.update();
+    }
+
+    /**
+     * Hide the debug panel
+     */
+    hide() {
+        const debugContainer = document.getElementById('debug-messages-container');
+        const debugButton = document.getElementById('toggle-debug');
+
+        if (!debugContainer || !debugButton) {
+            console.warn('DebugPanel: Required DOM elements not found');
+            return;
+        }
+
+        debugContainer.style.display = 'none';
+        debugButton.textContent = '🔍 Debug';
+        debugButton.style.background = '#6c757d';
+        this.isActive = false;
+    }
+
+    /**
+     * Update the debug panel with current messages
+     */
+    update() {
+        const debugContainer = document.getElementById('debug-messages-container');
+        if (!debugContainer || !this.isActive) {
+            return;
+        }
+
+        if (this.messages.length === 0) {
+            debugContainer.innerHTML = '<div style="color: #6c757d; font-style: italic; padding: 12px;">No debug messages yet. Click sections to generate debug output.</div>';
+            return;
+        }
+
+        // Show the last 50 messages in reverse order (newest first)
+        const recentMessages = this.messages.slice(-50).reverse();
+
+        const messagesHtml = recentMessages.map(msg => {
+            const categoryColor = {
+                'INFO': '#17a2b8',
+                'WARNING': '#ffc107',
+                'ERROR': '#dc3545',
+                'SUCCESS': '#28a745',
+                'DEBUG': '#6f42c1'
+            }[msg.category] || '#6c757d';
+
+            return `
+                <div style="margin-bottom: 6px; padding: 4px; border-left: 3px solid ${categoryColor}; background: white; border-radius: 2px;">
+                    <span style="color: #6c757d; font-size: 11px;">[${msg.timestamp}]</span>
+                    <span style="color: ${categoryColor}; font-weight: bold;">${msg.category}:</span>
+                    <span style="color: #333;">${msg.message}</span>
+                </div>
+            `;
+        }).join('');
+
+        debugContainer.innerHTML = `
+            <div style="margin-bottom: 8px; padding: 6px; background: #e9ecef; border-radius: 4px; font-weight: bold; color: #495057;">
+                Debug Messages (${this.messages.length} total, showing last ${recentMessages.length})
+                <button id="debug-clear-btn" style="float: right; background: #dc3545; color: white; border: none; padding: 2px 6px; border-radius: 2px; font-size: 11px; cursor: pointer;">Clear</button>
+            </div>
+            <div style="max-height: 250px; overflow-y: auto;">
+                ${messagesHtml}
+            </div>
+        `;
+
+        // Add event listener for clear button
+        const clearBtn = debugContainer.querySelector('#debug-clear-btn');
+        if (clearBtn) {
+            clearBtn.addEventListener('click', () => {
+                this.clear();
+            });
+        }
+
+        // Auto-scroll to bottom to show newest messages
+        const scrollContainer = debugContainer.querySelector('div[style*="overflow-y"]');
+        if (scrollContainer) {
+            scrollContainer.scrollTop = scrollContainer.scrollHeight;
+        }
+    }
+
+    /**
+     * Clear all debug messages
+     */
+    clear() {
+        this.messages = [];
+        this.update();
+    }
+
+    /**
+     * Get the number of messages
+     */
+    getMessageCount() {
+        return this.messages.length;
+    }
+
+    /**
+     * Get recent messages
+     */
+    getRecentMessages(count = 10) {
+        return this.messages.slice(-count);
+    }
+}
+
+// Export for use in tests and other modules
+if (typeof module !== 'undefined' && module.exports) {
+    module.exports = { DebugPanel };
+}
+
+// Export for browser use
+if (typeof window !== 'undefined') {
+    window.DebugPanel = DebugPanel;
+}
+
+// === js/components/document-controls.js ===
+/**
+ * DocumentControls Component
+ *
+ * Extracted from monolithic editor.js as part of architecture refactoring.
+ * Handles the floating control panel and document-level actions.
+ *
+ * Dependencies:
+ * - None (standalone component)
+ */
+
+/**
+ * DocumentControls - Manages the floating control panel and its buttons
+ */
+class DocumentControls {
+    constructor() {
+        this.controlPanel = null;
+        this.buttons = new Map();
+        this.eventHandlers = new Map();
+        this.isVisible = true;
+    }
+
+    /**
+     * Create the control panel and add it to the DOM
+     */
+    create() {
+        if (this.controlPanel) {
+            this.destroy(); // Remove existing panel
+        }
+
+        // Also remove any existing panel with the same ID in the DOM
+        const existingPanel = document.getElementById('markitect-global-controls');
+        if (existingPanel && existingPanel.parentNode) {
+            existingPanel.parentNode.removeChild(existingPanel);
+        }
+
+        // Create the floating control panel
+        this.controlPanel = document.createElement('div');
+        this.controlPanel.id = 'markitect-global-controls';
+        this.controlPanel.style.cssText = `
+            position: fixed;
+            top: 20px;
+            right: 20px;
+            background: rgba(248, 249, 250, 0.95);
+            border: 1px solid #dee2e6;
+            border-radius: 8px;
+            padding: 12px;
+            box-shadow: 0 4px 12px rgba(0,0,0,0.15);
+            z-index: 1000;
+            backdrop-filter: blur(8px);
+            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+            font-size: 14px;
+            min-width: 200px;
+        `;
+
+        // Add title
+        const title = document.createElement('div');
+        title.style.cssText = `
+            font-weight: 600;
+            margin-bottom: 8px;
+            color: #495057;
+            border-bottom: 1px solid #dee2e6;
+            padding-bottom: 4px;
+        `;
+        title.textContent = 'Document Controls';
+
+        // Create button container
+        const buttonContainer = document.createElement('div');
+        buttonContainer.id = 'button-container';
+        buttonContainer.style.cssText = `
+            display: flex;
+            flex-direction: column;
+            gap: 6px;
+        `;
+
+        this.controlPanel.appendChild(title);
+        this.controlPanel.appendChild(buttonContainer);
+
+        // Add default buttons
+        this.addDefaultButtons();
+
+        // Add debug messages container
+        this.addDebugContainer();
+
+        // Add to DOM
+        document.body.appendChild(this.controlPanel);
+    }
+
+    /**
+     * Add default buttons to the control panel
+     */
+    addDefaultButtons() {
+        // Save Document button
+        this.addButton('save-document', '💾 Save Document', '#28a745');
+
+        // Reset All button
+        this.addButton('reset-all', '🔄 Reset All', '#ffc107', '#212529');
+
+        // Show Status button
+        this.addButton('show-status', '📊 Show Status', '#17a2b8');
+
+        // Debug button
+        this.addButton('toggle-debug', '🔍 Debug', '#6c757d');
+    }
+
+    /**
+     * Add debug container to the control panel
+     */
+    addDebugContainer() {
+        const debugContainer = document.createElement('div');
+        debugContainer.id = 'debug-messages-container';
+        debugContainer.style.cssText = `
+            margin-top: 12px;
+            max-height: 300px;
+            overflow-y: auto;
+            border: 1px solid #dee2e6;
+            border-radius: 4px;
+            background: #f8f9fa;
+            padding: 8px;
+            font-family: 'Courier New', monospace;
+            font-size: 12px;
+            line-height: 1.4;
+            display: none;
+        `;
+
+        this.controlPanel.appendChild(debugContainer);
+    }
+
+    /**
+     * Add a button to the control panel
+     */
+    addButton(id, text, backgroundColor, textColor = 'white') {
+        const buttonContainer = this.controlPanel.querySelector('#button-container');
+        if (!buttonContainer) {
+            throw new Error('Button container not found. Call create() first.');
+        }
+
+        const button = document.createElement('button');
+        button.id = id;
+        button.textContent = text;
+        button.style.cssText = `
+            background: ${backgroundColor};
+            color: ${textColor};
+            border: none;
+            padding: 8px 12px;
+            border-radius: 4px;
+            cursor: pointer;
+            font-size: 13px;
+            font-weight: 500;
+            transition: background-color 0.2s;
+        `;
+
+        buttonContainer.appendChild(button);
+        this.buttons.set(id, button);
+
+        return button;
+    }
+
+    /**
+     * Remove a button from the control panel
+     */
+    removeButton(id) {
+        const button = this.buttons.get(id);
+        if (button && button.parentNode) {
+            button.parentNode.removeChild(button);
+            this.buttons.delete(id);
+            this.eventHandlers.delete(id);
+        }
+    }
+
+    /**
+     * Set event handlers for buttons
+     */
+    setEventHandlers(handlers) {
+        for (const [buttonId, handler] of Object.entries(handlers)) {
+            const button = this.buttons.get(buttonId);
+            if (button) {
+                // Remove existing handler if any
+                if (this.eventHandlers.has(buttonId)) {
+                    button.removeEventListener('click', this.eventHandlers.get(buttonId));
+                }
+
+                // Add new handler
+                button.addEventListener('click', handler);
+                this.eventHandlers.set(buttonId, handler);
+            }
+        }
+    }
+
+    /**
+     * Show the control panel
+     */
+    show() {
+        if (this.controlPanel) {
+            this.controlPanel.style.display = 'block';
+            this.isVisible = true;
+        }
+    }
+
+    /**
+     * Hide the control panel
+     */
+    hide() {
+        if (this.controlPanel) {
+            this.controlPanel.style.display = 'none';
+            this.isVisible = false;
+        }
+    }
+
+    /**
+     * Update status display (can be extended as needed)
+     */
+    updateStatus(status) {
+        // This method can be extended to show status information
+        // For now, it just stores the status for potential display
+        this.lastStatus = status;
+
+        // Could update a status indicator in the panel if needed
+        if (status && this.controlPanel) {
+            const title = this.controlPanel.querySelector('div');
+            if (title) {
+                const statusText = `Document Controls (${status.totalSections} sections, ${status.editingSections} editing)`;
+                // Could update title or add status indicator
+            }
+        }
+    }
+
+    /**
+     * Get the control panel element
+     */
+    getControlPanel() {
+        return this.controlPanel;
+    }
+
+    /**
+     * Destroy the control panel and clean up
+     */
+    destroy() {
+        if (this.controlPanel && this.controlPanel.parentNode) {
+            this.controlPanel.parentNode.removeChild(this.controlPanel);
+        }
+
+        // Clean up references
+        this.controlPanel = null;
+        this.buttons.clear();
+        this.eventHandlers.clear();
+        this.isVisible = true;
+    }
+
+    /**
+     * Check if the control panel is visible
+     */
+    isVisible() {
+        return this.isVisible && this.controlPanel && this.controlPanel.style.display !== 'none';
+    }
+
+    /**
+     * Get all button IDs
+     */
+    getButtonIds() {
+        return Array.from(this.buttons.keys());
+    }
+
+    /**
+     * Get a specific button by ID
+     */
+    getButton(id) {
+        return this.buttons.get(id);
+    }
+}
+
+// Export for use in tests and other modules
+if (typeof module !== 'undefined' && module.exports) {
+    module.exports = { DocumentControls };
+}
+
+// Export for browser use
+if (typeof window !== 'undefined') {
+    window.DocumentControls = DocumentControls;
+}
+
+// === js/components/dom-renderer.js ===
+/**
+ * DOMRenderer Component
+ *
+ * Extracted from monolithic editor.js as part of architecture refactoring.
+ * Handles all DOM interactions and UI rendering for section editing.
+ *
+ * Dependencies:
+ * - FloatingMenu component (to be extracted)
+ * - debug function (imported from utils)
+ */
+
+// Import dependencies (placeholders for now)
+function debug(message, category = 'INFO') {
+    console.log(`DEBUG ${category}: ${message}`);
+}
+
+/**
+ * Simple FloatingMenu implementation (will be extracted to separate component later)
+ */
+class FloatingMenu {
+    constructor(sectionId, type, renderer) {
+        this.sectionId = sectionId;
+        this.type = type;
+        this.renderer = renderer;
+        this.element = null;
+        this.isVisible = false;
+    }
+
+    show(contentElement, controlsElement) {
+        if (this.isVisible) this.hide();
+
+        const targetElement = this.renderer.findSectionElement(this.sectionId);
+        if (!targetElement) return null;
+
+        // Get content dimensions and position
+        const rect = targetElement.getBoundingClientRect();
+        const viewport = {
+            width: window.innerWidth,
+            height: window.innerHeight
+        };
+
+        // Calculate content width and responsive extension
+        const contentWidth = rect.width;
+        const buttonAreaWidth = 120; // Space needed for buttons
+        const minMenuWidth = Math.max(300, contentWidth); // At least content width or 300px
+        const preferredMenuWidth = contentWidth + buttonAreaWidth;
+
+        // Check if we have space to extend to the right
+        const spaceOnRight = viewport.width - rect.right;
+        const canExtendRight = spaceOnRight >= buttonAreaWidth + 20; // 20px margin
+
+        // Determine final menu width
+        let menuWidth;
+        if (canExtendRight && viewport.width >= 800) { // Only on wide screens
+            menuWidth = Math.min(preferredMenuWidth, viewport.width - rect.left - 20);
+        } else {
+            menuWidth = Math.min(minMenuWidth, viewport.width - 40); // 20px margins
+        }
+
+        // Create floating menu element
+        this.element = document.createElement('div');
+        this.element.className = 'ui-edit-floating-menu';
+        this.element.style.cssText = `
+            position: fixed;
+            z-index: 10000;
+            background: white;
+            border: 1px solid #ddd;
+            border-radius: 8px;
+            box-shadow: 0 4px 12px rgba(0,0,0,0.15);
+            padding: 0;
+            width: ${menuWidth}px;
+            box-sizing: border-box;
+        `;
+
+        // Add headline
+        const headline = document.createElement('div');
+        headline.className = 'ui-edit-headline';
+        headline.textContent = `Editing ${this.type === 'image' ? 'Image' : 'Section'}`;
+        headline.style.cssText = `
+            background: #f8f9fa;
+            border-bottom: 1px solid #ddd;
+            padding: 8px 16px;
+            font-weight: 600;
+            font-size: 12px;
+            color: #495057;
+            border-radius: 8px 8px 0 0;
+            text-transform: uppercase;
+            letter-spacing: 0.5px;
+        `;
+
+        // Create content wrapper with padding
+        const contentWrapper = document.createElement('div');
+        contentWrapper.style.cssText = `
+            padding: 16px;
+        `;
+
+        this.element.appendChild(headline);
+
+        // Position directly over content (overlay positioning)
+        let left = rect.left;
+        let top = rect.top;
+
+        // Ensure menu doesn't go off-screen horizontally
+        if (left + menuWidth > viewport.width) {
+            left = viewport.width - menuWidth - 20;
+        }
+        if (left < 10) {
+            left = 10;
+        }
+
+        // For vertical positioning, prefer staying on top of content
+        // Only move if absolutely necessary
+        const menuHeight = this.type === 'image' ? 350 : 200; // Better height estimates
+        const wouldGoOffBottom = top + menuHeight > viewport.height;
+        const wouldGoOffTop = top < 10;
+
+        if (wouldGoOffBottom && !wouldGoOffTop) {
+            // Try to fit by moving up, but keep some overlay if possible
+            const maxTop = viewport.height - menuHeight - 10;
+            top = Math.max(rect.top - 50, maxTop); // Prefer staying near original position
+        } else if (wouldGoOffTop) {
+            top = 10; // Minimum distance from top
+        }
+        // Otherwise, keep the original overlay position
+
+        this.element.style.left = `${left}px`;
+        this.element.style.top = `${top}px`;
+
+        // Add content to wrapper
+        if (contentElement) {
+            contentWrapper.appendChild(contentElement);
+        }
+        if (controlsElement) {
+            contentWrapper.appendChild(controlsElement);
+        }
+
+        this.element.appendChild(contentWrapper);
+
+        // Add close button to headline
+        const closeButton = document.createElement('button');
+        closeButton.textContent = '×';
+        closeButton.style.cssText = `
+            position: absolute;
+            top: 4px;
+            right: 8px;
+            background: none;
+            border: none;
+            font-size: 18px;
+            cursor: pointer;
+            color: #666;
+            width: 24px;
+            height: 24px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            border-radius: 4px;
+            transition: background-color 0.2s ease;
+        `;
+        closeButton.addEventListener('mouseover', () => {
+            closeButton.style.backgroundColor = '#e9ecef';
+        });
+        closeButton.addEventListener('mouseout', () => {
+            closeButton.style.backgroundColor = 'transparent';
+        });
+        closeButton.addEventListener('click', (event) => {
+            event.stopPropagation();
+            this.hide();
+        });
+        this.element.appendChild(closeButton);
+
+        document.body.appendChild(this.element);
+        this.isVisible = true;
+
+        return this.element;
+    }
+
+    hide() {
+        if (this.element && this.element.parentNode) {
+            this.element.parentNode.removeChild(this.element);
+        }
+        this.element = null;
+        this.isVisible = false;
+
+        // Stop editing state in the section manager
+        const section = this.renderer.sectionManager.sections.get(this.sectionId);
+        if (section && section.isEditing()) {
+            section.stopEditing();
+        }
+
+        // Remove from editing sections
+        this.renderer.editingSections.delete(this.sectionId);
+    }
+}
+
+/**
+ * DOMRenderer - Handles DOM interactions and section rendering
+ */
+class DOMRenderer {
+    constructor(sectionManager, container) {
+        this.sectionManager = sectionManager;
+        this.container = container;
+        this.editingSections = new Set();
+        this.currentFloatingMenu = null;
+        this.eventListenersAttached = false;
+        this.lastClickTime = 0;
+        this.clickDebounceMs = 300; // Prevent rapid clicks
+
+        // Enhanced Event System - Track event types
+        this.eventHistory = [];
+        this.eventStats = {
+            'section-click': 0,
+            'section-hover-enter': 0,
+            'section-hover-leave': 0,
+            'keyboard-shortcut': 0,
+            'section-drag-start': 0,
+            'section-drag-over': 0,
+            'section-drop': 0,
+            'section-focus-in': 0,
+            'section-focus-out': 0,
+            'section-context-menu': 0
+        };
+
+        // Bind event handlers
+        this.handleSectionClick = this.handleSectionClick.bind(this);
+        this.handleKeydown = this.handleKeydown.bind(this);
+
+        this.setupEventListeners();
+    }
+
+    setupEventListeners() {
+        this.sectionManager.on('sections-created', (data) => {
+            this.renderAllSections(data.sections);
+        });
+        this.sectionManager.on('edit-started', (data) => {
+            debug('EVENT: edit-started event received for: ' + data.sectionId, 'EVENT');
+            this.showEditor(data.sectionId, data.content);
+        });
+    }
+
+    /**
+     * Render all sections to the DOM
+     */
+    renderAllSections(sections) {
+        debug('21: renderAllSections called with ' + sections.length + ' sections', 'RENDER');
+
+        // Clear container
+        this.container.innerHTML = '';
+        debug('22: Container cleared', 'RENDER');
+
+        const contentArea = this.container.querySelector('#markdown-content') || this.container;
+
+        // Render each section
+        sections.forEach((section, index) => {
+            debug('23: Creating element for section ' + (index + 1) + ': ' + section.id, 'RENDER');
+            const element = this.renderSection(section);
+            if (element) {
+                contentArea.appendChild(element);
+            }
+        });
+
+        debug('24: All section elements added to container', 'RENDER');
+
+        // Attach event listeners only once
+        if (!this.eventListenersAttached) {
+            this.container.addEventListener('click', this.handleSectionClick);
+            this.eventListenersAttached = true;
+            debug('25: Enhanced event listeners attached for the first time', 'RENDER');
+        } else {
+            debug('25: Event listeners already attached, skipping', 'RENDER');
+        }
+
+        debug('25: Container content length: ' + this.container.innerHTML.length, 'RENDER');
+    }
+
+    /**
+     * Render a single section to DOM element
+     */
+    renderSection(section) {
+        const element = document.createElement('div');
+        element.className = 'ui-edit-section';
+        element.setAttribute('data-section-id', section.id);
+
+        // Add section content
+        // Render all sections using markdown rendering (images need HTML conversion too)
+        const content = this.simpleMarkdownRender(section.currentMarkdown);
+        element.innerHTML = content;
+
+        // Add styling
+        element.style.cssText = `
+            margin: 16px 0;
+            padding: 12px;
+            border: 1px solid transparent;
+            border-radius: 4px;
+            cursor: pointer;
+            transition: all 0.2s ease;
+        `;
+
+        element.addEventListener('mouseenter', () => {
+            element.style.backgroundColor = 'rgba(0, 122, 204, 0.05)';
+            element.style.borderColor = 'rgba(0, 122, 204, 0.2)';
+        });
+
+        element.addEventListener('mouseleave', () => {
+            if (!section.isEditing()) {
+                element.style.backgroundColor = 'transparent';
+                element.style.borderColor = 'transparent';
+            }
+        });
+
+        debug('SECTION: Section element setup complete for ' + section.id, 'SECTION');
+        return element;
+    }
+
+    /**
+     * Simple markdown rendering (placeholder)
+     */
+    simpleMarkdownRender(markdown) {
+        return markdown
+            .replace(/^# (.*$)/gim, '<h1>$1</h1>')
+            .replace(/^## (.*$)/gim, '<h2>$1</h2>')
+            .replace(/^### (.*$)/gim, '<h3>$1</h3>')
+            .replace(/!\[(.*?)\]\((.*?)\)/gim, '<img src="$2" alt="$1" style="max-width: 100%; height: auto; display: block; margin: 1rem auto;" />')
+            .replace(/\[([^\]]+)\]\(([^)]+)\)/gim, '<a href="$2" target="_blank">$1</a>')
+            .replace(/\*\*(.*?)\*\*/gim, '<strong>$1</strong>')
+            .replace(/\*(.*?)\*/gim, '<em>$1</em>')
+            .replace(/\n/gim, '<br>');
+    }
+
+    /**
+     * Find DOM element for a section
+     */
+    findSectionElement(sectionId) {
+        return this.container.querySelector(`[data-section-id="${sectionId}"]`);
+    }
+
+    /**
+     * Handle section click events
+     */
+    handleSectionClick(event) {
+        debug('handleSectionClick: Click detected on target: ' + event.target.tagName + ' ' + (event.target.className || ''), 'CLICK');
+
+        // Debounce rapid clicks
+        const now = Date.now();
+        if (now - this.lastClickTime < this.clickDebounceMs) {
+            debug('handleSectionClick: Click debounced (too rapid)', 'CLICK');
+            return;
+        }
+        this.lastClickTime = now;
+
+        // Don't handle clicks on form elements, buttons, or links
+        if (event.target.closest('textarea, button, input, a')) {
+            debug('handleSectionClick: Ignoring click on form element', 'CLICK');
+            return;
+        }
+
+        const sectionElement = event.target.closest('.ui-edit-section');
+        debug('handleSectionClick: Found section element: ' + (sectionElement ? sectionElement.getAttribute('data-section-id') : 'null'), 'CLICK');
+        if (!sectionElement) return;
+
+        const sectionId = sectionElement.getAttribute('data-section-id');
+        debug('handleSectionClick: Section ID: ' + sectionId, 'CLICK');
+        if (!sectionId) return;
+
+        // Track the click event
+        this.trackEvent('section-click', {
+            sectionId,
+            event,
+            timestamp: Date.now()
+        });
+
+        // Check if this section is already being edited
+        const section = this.sectionManager.sections.get(sectionId);
+        debug('handleSectionClick: Found section object: ' + (section ? 'YES' : 'NO'), 'CLICK');
+
+        if (section && section.isEditing()) {
+            debug('handleSectionClick: Section already being edited, checking if dialog is visible: ' + sectionId, 'CLICK');
+            // If section is editing but no dialog is visible, allow re-opening
+            const existingDialog = document.querySelector('.ui-edit-floating-menu');
+            if (existingDialog) {
+                debug('handleSectionClick: Dialog already visible, ignoring click', 'CLICK');
+                return;
+            } else {
+                debug('handleSectionClick: Section editing but no dialog visible, proceeding to show editor', 'CLICK');
+            }
+        }
+
+        debug('handleSectionClick: About to start editing for section: ' + sectionId, 'CLICK');
+
+        try {
+            debug('handleSectionClick: Calling sectionManager.startEditing', 'CLICK');
+            this.sectionManager.startEditing(sectionId);
+            debug('handleSectionClick: Successfully called startEditing', 'CLICK');
+        } catch (error) {
+            debug('handleSectionClick: ERROR in startEditing: ' + error.message, 'ERROR');
+            console.error('Failed to start editing:', error);
+        }
+    }
+
+    /**
+     * Show editor for a section
+     */
+    showEditor(sectionId, content) {
+        debug('showEditor: called for section: ' + sectionId, 'EDITOR');
+
+        const element = this.findSectionElement(sectionId);
+        debug('showEditor: Found element: ' + (element ? 'YES' : 'NO'), 'EDITOR');
+        if (!element) return;
+
+        debug('showEditor: About to hide current editor', 'EDITOR');
+        this.hideCurrentEditor();
+        debug('showEditor: Hidden current editor', 'EDITOR');
+
+        const section = this.sectionManager.sections.get(sectionId);
+        const isImageSection = section && section.isImage();
+
+        if (isImageSection) {
+            this.showImageEditor(sectionId, section);
+            return;
+        }
+
+        // Create content area for text editing
+        const editorContent = document.createElement('div');
+        editorContent.className = 'ui-edit-editor-content';
+
+        // Check if we have space for side-by-side layout
+        const targetElement = this.findSectionElement(sectionId);
+        const rect = targetElement ? targetElement.getBoundingClientRect() : null;
+        const viewport = { width: window.innerWidth, height: window.innerHeight };
+        const hasWideLayout = rect && viewport.width >= 800 && (viewport.width - rect.right) >= 120;
+
+        if (hasWideLayout) {
+            // Side-by-side layout: textarea on left, controls on right
+            editorContent.style.cssText = `
+                display: flex;
+                gap: 16px;
+                flex: 1;
+                min-width: 0;
+                align-items: flex-start;
+            `;
+        } else {
+            // Stacked layout: textarea above, controls below
+            editorContent.style.cssText = `
+                display: flex;
+                flex-direction: column;
+                gap: 12px;
+                flex: 1;
+                min-width: 0;
+            `;
+        }
+
+        // Create textarea container
+        const textareaContainer = document.createElement('div');
+        textareaContainer.style.cssText = hasWideLayout ? 'flex: 1; min-width: 0;' : 'width: 100%;';
+
+        // Create textarea
+        const textarea = document.createElement('textarea');
+        textarea.value = content || section.currentMarkdown;
+        textarea.style.cssText = `
+            width: 100%;
+            min-height: 120px;
+            padding: 12px;
+            border: 1px solid #ddd;
+            border-radius: 4px;
+            font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
+            font-size: 14px;
+            line-height: 1.5;
+            resize: vertical;
+            box-sizing: border-box;
+        `;
+
+        // Create controls
+        const controls = document.createElement('div');
+        if (hasWideLayout) {
+            controls.style.cssText = `
+                display: flex;
+                flex-direction: column;
+                gap: 8px;
+                min-width: 100px;
+                flex-shrink: 0;
+            `;
+        } else {
+            controls.style.cssText = `
+                display: flex;
+                gap: 8px;
+                justify-content: flex-end;
+                flex-wrap: wrap;
+            `;
+        }
+
+        const acceptButton = document.createElement('button');
+        acceptButton.textContent = hasWideLayout ? '✓' : 'Accept';
+        acceptButton.style.cssText = `
+            background: #28a745;
+            color: white;
+            border: none;
+            padding: ${hasWideLayout ? '8px 12px' : '8px 16px'};
+            border-radius: 4px;
+            cursor: pointer;
+            ${hasWideLayout ? 'width: 100%;' : ''}
+            font-size: ${hasWideLayout ? '14px' : '13px'};
+        `;
+
+        const cancelButton = document.createElement('button');
+        cancelButton.textContent = hasWideLayout ? '✗' : 'Cancel';
+        cancelButton.style.cssText = `
+            background: #dc3545;
+            color: white;
+            border: none;
+            padding: ${hasWideLayout ? '8px 12px' : '8px 16px'};
+            border-radius: 4px;
+            cursor: pointer;
+            ${hasWideLayout ? 'width: 100%;' : ''}
+            font-size: ${hasWideLayout ? '14px' : '13px'};
+        `;
+
+        const resetButton = document.createElement('button');
+        resetButton.textContent = hasWideLayout ? '↺' : '↺ Reset';
+        resetButton.style.cssText = `
+            background: #fd7e14;
+            color: white;
+            border: none;
+            padding: ${hasWideLayout ? '8px 12px' : '8px 16px'};
+            border-radius: 4px;
+            cursor: pointer;
+            ${hasWideLayout ? 'width: 100%;' : ''}
+            font-size: ${hasWideLayout ? '14px' : '13px'};
+        `;
+
+        controls.appendChild(acceptButton);
+        controls.appendChild(cancelButton);
+        controls.appendChild(resetButton);
+
+        // Assemble the layout
+        textareaContainer.appendChild(textarea);
+
+        if (hasWideLayout) {
+            editorContent.appendChild(textareaContainer);
+            editorContent.appendChild(controls);
+        } else {
+            editorContent.appendChild(textareaContainer);
+            editorContent.appendChild(controls);
+        }
+
+        // Create floating menu
+        const floatingMenu = new FloatingMenu(sectionId, 'text', this);
+        this.currentFloatingMenu = floatingMenu;
+        this.editingSections.add(sectionId);
+
+        floatingMenu.show(editorContent);
+
+        // Add event listeners
+        acceptButton.addEventListener('click', () => {
+            this.sectionManager.updateContent(sectionId, textarea.value);
+            this.sectionManager.acceptChanges(sectionId);
+            floatingMenu.hide();
+            this.currentFloatingMenu = null; // Clear reference
+        });
+
+        cancelButton.addEventListener('click', () => {
+            this.sectionManager.cancelChanges(sectionId);
+            floatingMenu.hide();
+            this.currentFloatingMenu = null; // Clear reference
+        });
+
+        resetButton.addEventListener('click', () => {
+            // Reset textarea to original content and apply the change
+            const section = this.sectionManager.sections.get(sectionId);
+            if (section) {
+                textarea.value = section.originalMarkdown;
+                // Actually update the section content to original and accept the changes
+                this.sectionManager.updateContent(sectionId, section.originalMarkdown);
+                this.sectionManager.acceptChanges(sectionId);
+                // Close the editor
+                floatingMenu.hide();
+                this.currentFloatingMenu = null;
+            }
+        });
+
+        // Auto-focus textarea
+        setTimeout(() => textarea.focus(), 100);
+    }
+
+    /**
+     * Show advanced image editor with drag & drop, file upload, and preview
+     */
+    showImageEditor(sectionId, section) {
+        debug('showImageEditor: called for image section: ' + sectionId, 'EDITOR');
+
+        // Track staging state for this editor
+        const stagingState = {
+            originalMarkdown: section.originalMarkdown,
+            currentAltText: '',
+            currentImageSrc: '',
+            stagedImageSrc: null,
+            stagedAltText: null,
+            hasChanges: false
+        };
+
+        // Parse markdown to extract image info
+        const imageMatch = section.currentMarkdown.match(/!\[(.*?)\]\((.*?)\)/);
+        if (imageMatch) {
+            const [, altText, imageSrc] = imageMatch;
+            stagingState.currentAltText = altText;
+            stagingState.currentImageSrc = imageSrc;
+        }
+
+        // Check if we have space for side-by-side layout
+        const targetElement = this.findSectionElement(sectionId);
+        const rect = targetElement ? targetElement.getBoundingClientRect() : null;
+        const viewport = { width: window.innerWidth, height: window.innerHeight };
+        const hasWideLayout = rect && viewport.width >= 800 && (viewport.width - rect.right) >= 120;
+
+        // Create image editor content area
+        const editorContent = document.createElement('div');
+        editorContent.className = 'ui-edit-image-content';
+
+        if (hasWideLayout) {
+            // Side-by-side layout: content on left, controls on right
+            editorContent.style.cssText = `
+                display: flex;
+                gap: 16px;
+                flex: 1;
+                min-width: 0;
+                align-items: flex-start;
+            `;
+        } else {
+            // Stacked layout: content above, controls below
+            editorContent.style.cssText = `
+                display: flex;
+                flex-direction: column;
+                gap: 15px;
+                flex: 1;
+                min-width: 0;
+            `;
+        }
+
+        // Create content container for image and alt text
+        const contentContainer = document.createElement('div');
+        contentContainer.style.cssText = hasWideLayout ? 'flex: 1; min-width: 0;' : 'width: 100%;';
+        if (!hasWideLayout) {
+            contentContainer.style.cssText += `
+                display: flex;
+                flex-direction: column;
+                gap: 15px;
+            `;
+        } else {
+            contentContainer.style.cssText += `
+                display: flex;
+                flex-direction: column;
+                gap: 12px;
+            `;
+        }
+
+        // Image preview with drop zone
+        const imagePreview = document.createElement('div');
+        imagePreview.className = 'ui-edit-image-preview';
+        imagePreview.style.cssText = `
+            width: 100%;
+            height: 180px;
+            text-align: center;
+            background: white;
+            padding: 12px;
+            border-radius: 8px;
+            border: 2px dashed #007bff;
+            transition: all 0.3s ease;
+            cursor: pointer;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+            position: relative;
+            box-sizing: border-box;
+            overflow: hidden;
+        `;
+
+        // Function to update image preview
+        const updateImagePreview = (imageSrc, altText) => {
+            imagePreview.innerHTML = '';
+
+            if (imageSrc) {
+                const img = document.createElement('img');
+                img.src = imageSrc;
+                img.alt = altText || '';
+                img.style.cssText = `
+                    max-width: 100%;
+                    max-height: 150px;
+                    border-radius: 4px;
+                    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
+                `;
+                imagePreview.appendChild(img);
+
+                // Add overlay for drop zone
+                const overlay = document.createElement('div');
+                overlay.className = 'drop-overlay';
+                overlay.style.cssText = `
+                    position: absolute;
+                    top: 0;
+                    left: 0;
+                    right: 0;
+                    bottom: 0;
+                    background: rgba(0, 123, 255, 0.1);
+                    border-radius: 6px;
+                    display: none;
+                    align-items: center;
+                    justify-content: center;
+                    color: #007bff;
+                    font-weight: bold;
+                    font-size: 16px;
+                `;
+                overlay.textContent = '📁 Drop new image here';
+                imagePreview.appendChild(overlay);
+            } else {
+                // Show drop zone placeholder
+                const placeholder = document.createElement('div');
+                placeholder.style.cssText = `
+                    text-align: center;
+                    color: #6c757d;
+                    font-size: 14px;
+                `;
+                placeholder.innerHTML = `
+                    <div style="font-size: 48px; margin-bottom: 12px;">📁</div>
+                    <div style="margin-bottom: 8px;"><strong>Drop image here or click to select</strong></div>
+                    <div style="font-size: 12px;">Supports JPG, PNG, GIF, WebP</div>
+                `;
+                imagePreview.appendChild(placeholder);
+            }
+        };
+
+        // Initialize preview
+        updateImagePreview(stagingState.currentImageSrc, stagingState.currentAltText);
+
+        // File input for image selection
+        const fileInput = document.createElement('input');
+        fileInput.type = 'file';
+        fileInput.accept = 'image/*';
+        fileInput.style.display = 'none';
+
+        // Function to handle image file selection
+        const handleImageFile = (file) => {
+            if (file && file.type.startsWith('image/')) {
+                const reader = new FileReader();
+                reader.onload = (event) => {
+                    stagingState.stagedImageSrc = event.target.result;
+                    stagingState.hasChanges = true;
+                    updateImagePreview(stagingState.stagedImageSrc, altTextInput.value);
+                    updateChangeIndicator();
+                };
+                reader.readAsDataURL(file);
+            }
+        };
+
+        // Drag and drop functionality
+        imagePreview.addEventListener('dragover', (e) => {
+            e.preventDefault();
+            imagePreview.style.borderColor = '#28a745';
+            imagePreview.style.backgroundColor = '#f8fff8';
+            const overlay = imagePreview.querySelector('.drop-overlay');
+            if (overlay) overlay.style.display = 'flex';
+        });
+
+        imagePreview.addEventListener('dragleave', (e) => {
+            e.preventDefault();
+            imagePreview.style.borderColor = '#007bff';
+            imagePreview.style.backgroundColor = 'white';
+            const overlay = imagePreview.querySelector('.drop-overlay');
+            if (overlay) overlay.style.display = 'none';
+        });
+
+        imagePreview.addEventListener('drop', (e) => {
+            e.preventDefault();
+            imagePreview.style.borderColor = '#007bff';
+            imagePreview.style.backgroundColor = 'white';
+            const overlay = imagePreview.querySelector('.drop-overlay');
+            if (overlay) overlay.style.display = 'none';
+
+            const files = e.dataTransfer.files;
+            if (files.length > 0) {
+                handleImageFile(files[0]);
+            }
+        });
+
+        // Click to select file
+        imagePreview.addEventListener('click', () => {
+            fileInput.click();
+        });
+
+        fileInput.addEventListener('change', (e) => {
+            if (e.target.files.length > 0) {
+                handleImageFile(e.target.files[0]);
+            }
+        });
+
+        // Alt text editor
+        const altTextContainer = document.createElement('div');
+        altTextContainer.className = 'ui-edit-alt-text-container';
+        altTextContainer.style.cssText = `
+            display: flex;
+            flex-direction: column;
+            gap: 8px;
+        `;
+
+        const altTextLabel = document.createElement('label');
+        altTextLabel.textContent = 'Alt Text Description:';
+        altTextLabel.style.cssText = `
+            font-size: 13px;
+            font-weight: 600;
+            color: #333;
+            margin: 0;
+        `;
+
+        const altTextInput = document.createElement('input');
+        altTextInput.type = 'text';
+        altTextInput.value = stagingState.currentAltText;
+        altTextInput.style.cssText = `
+            width: 100%;
+            padding: 10px 12px;
+            border: 1px solid #ddd;
+            border-radius: 6px;
+            font-size: 14px;
+            box-sizing: border-box;
+            outline: none;
+            transition: border-color 0.2s ease;
+        `;
+
+        altTextInput.addEventListener('focus', () => {
+            altTextInput.style.borderColor = '#007bff';
+        });
+
+        altTextInput.addEventListener('blur', () => {
+            altTextInput.style.borderColor = '#ddd';
+        });
+
+        // Track alt text changes
+        altTextInput.addEventListener('input', () => {
+            stagingState.stagedAltText = altTextInput.value;
+            stagingState.hasChanges = altTextInput.value !== stagingState.currentAltText || stagingState.stagedImageSrc !== null;
+            updateChangeIndicator();
+        });
+
+        altTextContainer.appendChild(altTextLabel);
+        altTextContainer.appendChild(altTextInput);
+
+        // Change indicator
+        const changeIndicator = document.createElement('div');
+        changeIndicator.className = 'change-indicator';
+        changeIndicator.style.cssText = `
+            padding: 8px 12px;
+            background: #fff3cd;
+            border: 1px solid #ffeaa7;
+            border-radius: 6px;
+            color: #856404;
+            font-size: 12px;
+            text-align: center;
+            display: none;
+            font-weight: 500;
+        `;
+        changeIndicator.textContent = '⚠️ You have unsaved changes';
+
+        const updateChangeIndicator = () => {
+            if (stagingState.hasChanges) {
+                changeIndicator.style.display = 'block';
+            } else {
+                changeIndicator.style.display = 'none';
+            }
+        };
+
+        // Assemble content container
+        contentContainer.appendChild(imagePreview);
+        contentContainer.appendChild(altTextContainer);
+        contentContainer.appendChild(changeIndicator);
+        contentContainer.appendChild(fileInput);
+
+        // Create controls
+        const controls = document.createElement('div');
+        controls.className = 'ui-edit-controls';
+        if (hasWideLayout) {
+            controls.style.cssText = `
+                display: flex;
+                flex-direction: column;
+                gap: 8px;
+                min-width: 100px;
+                flex-shrink: 0;
+            `;
+        } else {
+            controls.style.cssText = `
+                display: flex;
+                flex-direction: column;
+                gap: 8px;
+                width: 100%;
+            `;
+        }
+
+        const acceptBtn = document.createElement('button');
+        acceptBtn.textContent = hasWideLayout ? '✓' : '✓ Accept';
+        acceptBtn.style.cssText = `
+            padding: ${hasWideLayout ? '8px 12px' : '8px 12px'};
+            font-size: ${hasWideLayout ? '14px' : '12px'};
+            border-radius: 6px;
+            border: none;
+            color: white;
+            cursor: pointer;
+            font-weight: 600;
+            transition: all 0.2s ease;
+            width: 100%;
+            text-align: center;
+            background: #28a745;
+        `;
+
+        const cancelBtn = document.createElement('button');
+        cancelBtn.textContent = hasWideLayout ? '✗' : '✗ Cancel';
+        cancelBtn.style.cssText = `
+            padding: ${hasWideLayout ? '8px 12px' : '8px 12px'};
+            font-size: ${hasWideLayout ? '14px' : '12px'};
+            border-radius: 6px;
+            border: none;
+            color: white;
+            cursor: pointer;
+            font-weight: 600;
+            transition: all 0.2s ease;
+            width: 100%;
+            text-align: center;
+            background: #dc3545;
+        `;
+
+        const resetBtn = document.createElement('button');
+        resetBtn.textContent = hasWideLayout ? '↺' : '↺ Reset';
+        resetBtn.style.cssText = `
+            padding: ${hasWideLayout ? '8px 12px' : '8px 12px'};
+            font-size: ${hasWideLayout ? '14px' : '12px'};
+            border-radius: 6px;
+            border: none;
+            color: white;
+            cursor: pointer;
+            font-weight: 600;
+            transition: all 0.2s ease;
+            width: 100%;
+            text-align: center;
+            background: #fd7e14;
+        `;
+
+        controls.appendChild(acceptBtn);
+        controls.appendChild(cancelBtn);
+        controls.appendChild(resetBtn);
+
+
+        // Event handlers
+        acceptBtn.addEventListener('click', () => {
+            // Apply staged changes only when accept is clicked
+            if (stagingState.hasChanges) {
+                let newMarkdown = stagingState.originalMarkdown;
+
+                // Apply image source change if staged
+                if (stagingState.stagedImageSrc !== null) {
+                    const currentImageMatch = newMarkdown.match(/!\[(.*?)\]\((.*?)\)/);
+                    if (currentImageMatch) {
+                        newMarkdown = newMarkdown.replace(
+                            /!\[(.*?)\]\((.*?)\)/,
+                            `![${currentImageMatch[1]}](${stagingState.stagedImageSrc})`
+                        );
+                    }
+                }
+
+                // Apply alt text change if staged
+                if (stagingState.stagedAltText !== null) {
+                    newMarkdown = newMarkdown.replace(
+                        /!\[(.*?)\]/,
+                        `![${stagingState.stagedAltText}]`
+                    );
+                }
+
+                // Update section with final changes
+                this.sectionManager.updateContent(sectionId, newMarkdown);
+            }
+
+            // Accept changes and hide editor
+            this.sectionManager.acceptChanges(sectionId);
+            this.currentFloatingMenu.hide();
+            this.currentFloatingMenu = null;
+        });
+
+        cancelBtn.addEventListener('click', () => {
+            // Discard all staged changes and hide editor
+            this.sectionManager.cancelChanges(sectionId);
+            this.currentFloatingMenu.hide();
+            this.currentFloatingMenu = null;
+        });
+
+        resetBtn.addEventListener('click', (event) => {
+            event.preventDefault();
+            event.stopPropagation();
+
+            // Reset to original content
+            const originalImageMatch = stagingState.originalMarkdown.match(/!\[(.*?)\]\((.*?)\)/);
+
+            if (originalImageMatch) {
+                const [, originalAltText, originalImageSrc] = originalImageMatch;
+
+                // Update staging state to original values
+                stagingState.currentAltText = originalAltText;
+                stagingState.currentImageSrc = originalImageSrc;
+
+                // Clear any staged changes
+                stagingState.stagedImageSrc = null;
+                stagingState.stagedAltText = null;
+                stagingState.hasChanges = false;
+
+                // Reset alt text input to original
+                altTextInput.value = originalAltText;
+
+                // Trigger input event to ensure UI consistency
+                const inputEvent = new Event('input', { bubbles: true, cancelable: true });
+                altTextInput.dispatchEvent(inputEvent);
+
+                // Reset preview to original image
+                updateImagePreview(originalImageSrc, originalAltText);
+
+                // Update change indicator
+                updateChangeIndicator();
+
+                // Actually update the section content to original and accept the changes
+                this.sectionManager.updateContent(sectionId, stagingState.originalMarkdown);
+                this.sectionManager.acceptChanges(sectionId);
+
+                // Close the editor
+                this.currentFloatingMenu.hide();
+                this.currentFloatingMenu = null;
+            }
+        });
+
+        // Assemble the final layout
+        if (hasWideLayout) {
+            editorContent.appendChild(contentContainer);
+            editorContent.appendChild(controls);
+        } else {
+            editorContent.appendChild(contentContainer);
+            editorContent.appendChild(controls);
+        }
+
+        // Create floating menu
+        const floatingMenu = new FloatingMenu(sectionId, 'image', this);
+        this.currentFloatingMenu = floatingMenu;
+        this.editingSections.add(sectionId);
+
+        floatingMenu.show(editorContent);
+    }
+
+    /**
+     * Hide current editor
+     */
+    hideCurrentEditor() {
+        debug('EDITOR: hideCurrentEditor called', 'EDITOR');
+
+        if (this.currentFloatingMenu) {
+            this.currentFloatingMenu.hide();
+            this.currentFloatingMenu = null;
+        }
+
+        debug('EDITOR: hideCurrentEditor completed', 'EDITOR');
+    }
+
+    /**
+     * Track event for analytics
+     */
+    trackEvent(eventType, data) {
+        const eventRecord = {
+            type: eventType,
+            data: data,
+            timestamp: new Date().toISOString()
+        };
+
+        this.eventHistory.push(eventRecord);
+        if (this.eventStats.hasOwnProperty(eventType)) {
+            this.eventStats[eventType]++;
+        }
+
+        // Keep only last 100 events
+        if (this.eventHistory.length > 100) {
+            this.eventHistory = this.eventHistory.slice(-100);
+        }
+    }
+
+    /**
+     * Get event statistics
+     */
+    getEventStats() {
+        const totalEvents = Object.values(this.eventStats).reduce((sum, count) => sum + count, 0);
+
+        return {
+            stats: { ...this.eventStats },
+            totalEvents,
+            recentEvents: this.eventHistory.slice(-10)
+        };
+    }
+
+    /**
+     * Handle keyboard shortcuts
+     */
+    handleKeydown(event) {
+        // Basic keyboard shortcut handling
+        if (event.ctrlKey || event.metaKey) {
+            if (event.key === 'Enter') {
+                // Accept changes
+                const activeSection = Array.from(this.editingSections)[0];
+                if (activeSection) {
+                    this.trackEvent('keyboard-shortcut', { shortcut: 'ctrl+enter', action: 'accept' });
+                }
+            } else if (event.key === 'Escape') {
+                // Cancel changes
+                const activeSection = Array.from(this.editingSections)[0];
+                if (activeSection) {
+                    this.trackEvent('keyboard-shortcut', { shortcut: 'escape', action: 'cancel' });
+                    this.hideCurrentEditor();
+                }
+            }
+        }
+    }
+}
+
+// Export for use in tests and other modules
+if (typeof module !== 'undefined' && module.exports) {
+    module.exports = { DOMRenderer, FloatingMenu };
+}
+
+// Export for browser use
+if (typeof window !== 'undefined') {
+    window.DOMRenderer = DOMRenderer;
+    window.FloatingMenu = FloatingMenu;
+}
+
+
+// === Component Initialization ===
+document.addEventListener('DOMContentLoaded', function() {
+    // Create container for the markdown content
+    const container = document.getElementById('markdown-content') || document.body;
+
+    // Initialize components
+    const sectionManager = new SectionManager();
+    const domRenderer = new DOMRenderer(sectionManager, container);
+    const debugPanel = new DebugPanel();
+    const documentControls = new DocumentControls();
+
+    // Create document controls
+    documentControls.create();
+
+    // Define abstract Control class for UI controls (same as viewing mode)
+    const Control = {
+        // Abstract control properties
+        element: null,
+        isExpanded: false,
+        isHeaderOnly: false,  // New state for header-only mode
+        isDragging: false,
+        isResizing: false,  // New state for resizing mode
+        dragOffset: { x: 0, y: 0 },
+        resizeStartSize: { width: 280, height: 'auto' },
+        originalPosition: { top: '80px', left: '20px' },
+        defaultSize: { width: 280, minWidth: 200, minHeight: 150 },
+
+        // Configuration properties (to be overridden by subclasses)
+        config: {
+            icon: '?',
+            title: 'Control',
+            className: 'control',
+            defaultContent: 'Template only',
+            ariaLabel: 'Control',
+            position: 'w'  // Default compass position: west (middle-left)
+        },
+
+        // Compass positioning system (top-aligned for proper expansion)
+        compassPositions: {
+            // North positions (top)
+            'n':   { top: '20px', left: '50%', transform: 'translateX(-50%)' },
+            'nne': { top: '20px', left: '65%', transform: 'translateX(-50%)' },
+            'ne':  { top: '20px', right: '20px' },
+            'ene': { top: '80px', right: '20px' },  // Top-aligned instead of center
+
+            // East positions (right)
+            'e':   { top: '50vh', right: '20px', transform: 'translateY(-20px)' },  // Anchor at icon level
+            'ese': { top: 'calc(65vh - 20px)', right: '20px' },  // Top-aligned
+            'se':  { bottom: '20px', right: '20px' },
+            'sse': { bottom: '20px', right: '35%', transform: 'translateX(50%)' },
+
+            // South positions (bottom)
+            's':   { bottom: '20px', left: '50%', transform: 'translateX(-50%)' },
+            'ssw': { bottom: '20px', left: '35%', transform: 'translateX(-50%)' },
+            'sw':  { bottom: '20px', left: '20px' },
+            'wsw': { bottom: '80px', left: '20px' },  // Top-aligned instead of center
+
+            // West positions (left) - top-aligned for proper expansion
+            'w':   { top: '50vh', left: '20px', transform: 'translateY(-20px)' },  // Anchor at icon level
+            'wnw': { top: '80px', left: '20px' },  // Top-aligned instead of center
+            'nw':  { top: '20px', left: '20px' },
+            'nnw': { top: '20px', left: '35%', transform: 'translateX(-50%)' }
+        },
+
+        // Get expansion direction based on compass position
+        getExpansionDirection: function() {
+            const pos = this.config.position;
+            const rightBorderPositions = ['ne', 'ene', 'e', 'ese', 'se'];
+            const bottomBorderPositions = ['sw', 'ssw', 's', 'sse', 'se'];
+
+            return {
+                header: rightBorderPositions.includes(pos) ? 'left' : 'right',
+                body: bottomBorderPositions.includes(pos) ? 'up' : 'down'
+            };
+        },
+
+        // Calculate position styles based on compass direction
+        getPositionStyles: function() {
+            const compassPos = this.compassPositions[this.config.position] || this.compassPositions['w'];
+            return {
+                position: 'fixed',
+                top: compassPos.top || 'auto',
+                right: compassPos.right || 'auto',
+                bottom: compassPos.bottom || 'auto',
+                left: compassPos.left || 'auto',
+                transform: compassPos.transform || 'none',
+                zIndex: 1001
+            };
+        },
+
+        // Abstract methods (to be implemented by subclasses)
+        buildContent: function() {
+            const content = this.element.querySelector('.control-content');
+            content.innerHTML = `<p style="padding: 1rem; color: #666;">${this.config.defaultContent}</p>`;
+        },
+
+        // Concrete methods (shared by all controls)
+        createControl: function() {
+            console.log(`🎛️ Creating ${this.config.title} control...`);
+
+            this.element = document.createElement('div');
+            this.element.className = this.config.className;
+            this.element.innerHTML = `
+                <button class="control-toggle" aria-label="${this.config.ariaLabel}">${this.config.icon}</button>
+                <div class="control-panel" style="display: none;">
+                    <div class="control-header">
+                        <span class="control-icon">${this.config.icon}</span>
+                        <h3>${this.config.title}</h3>
+                        <button class="control-close">✕</button>
+                    </div>
+                    <div class="control-content">Loading...</div>
+                </div>
+            `;
+
+            // Position using compass direction
+            const positionStyles = this.getPositionStyles();
+            this.element.style.cssText = `
+                position: ${positionStyles.position};
+                top: ${positionStyles.top};
+                right: ${positionStyles.right};
+                bottom: ${positionStyles.bottom};
+                left: ${positionStyles.left};
+                transform: ${positionStyles.transform};
+                z-index: ${positionStyles.zIndex};
+                background: rgba(255, 255, 255, 0.95);
+                border: 1px solid #e1e5e9;
+                border-radius: 8px;
+                box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+                backdrop-filter: blur(8px);
+                width: 40px;
+                transition: all 0.3s ease;
+                font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+            `;
+
+            // Store original position for reset
+            this.originalPosition = {
+                top: positionStyles.top,
+                right: positionStyles.right,
+                bottom: positionStyles.bottom,
+                left: positionStyles.left,
+                transform: positionStyles.transform
+            };
+
+            // Style toggle button
+            const toggleBtn = this.element.querySelector('.control-toggle');
+            toggleBtn.style.cssText = `
+                width: 100%;
+                height: 40px;
+                border: none;
+                background: transparent;
+                cursor: pointer;
+                font-size: 16px;
+                color: #666;
+                transition: color 0.2s ease;
+            `;
+
+            // Handle click to build content on-demand
+            toggleBtn.addEventListener('click', () => {
+                if (this.isExpanded) {
+                    this.collapse();
+                } else {
+                    console.log(`🎛️ ${this.config.title} toggle clicked - building content...`);
+                    this.buildContent();
+                }
+            });
+
+            // Close button handler
+            const closeBtn = this.element.querySelector('.control-close');
+            closeBtn.addEventListener('click', () => {
+                this.collapse();
+            });
+
+            document.body.appendChild(this.element);
+            console.log(`🎛️ ${this.config.title} control created`);
+        },
+
+        styleHeader: function() {
+            const header = this.element.querySelector('.control-header');
+
+            // Style the header to show icon, title, and close button in one line
+            // Match the height of the collapsed icon state (40px)
+            header.style.cssText = `
+                display: flex;
+                align-items: center;
+                justify-content: space-between;
+                height: 40px;
+                padding: 0 1rem;
+                border-bottom: 1px solid #eee;
+                margin-bottom: 0;
+            `;
+
+            const icon = header.querySelector('.control-icon');
+            if (icon) {
+                icon.style.cssText = `
+                    font-size: 16px;
+                    color: #666;
+                    margin-right: 0.5rem;
+                    cursor: grab;
+                    user-select: none;
+                `;
+
+                // Make icon draggable
+                this.setupDragHandlers(icon);
+            }
+
+            const title = header.querySelector('h3');
+            if (title) {
+                title.style.cssText = `
+                    margin: 0;
+                    font-size: 0.9rem;
+                    font-weight: 600;
+                    flex-grow: 1;
+                    line-height: 1;
+                    cursor: pointer;
+                    user-select: none;
+                `;
+
+                // Add click handler to toggle header-only mode
+                title.addEventListener('click', () => {
+                    this.toggleHeaderOnly();
+                });
+            }
+
+            const closeBtn = header.querySelector('.control-close');
+            if (closeBtn) {
+                closeBtn.style.cssText = `
+                    background: none;
+                    border: none;
+                    font-size: 14px;
+                    cursor: pointer;
+                    color: #666;
+                    padding: 0;
+                    width: 20px;
+                    height: 20px;
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                `;
+            }
+        },
+
+        styleContent: function() {
+            const content = this.element.querySelector('.control-content');
+            const expansion = this.getExpansionDirection();
+
+            // Style the content area based on expansion direction
+            let contentStyles = `
+                padding: 0.5rem;
+                overflow-y: auto;
+            `;
+
+            if (expansion.body === 'up') {
+                // Body expands upward (for bottom border positions)
+                contentStyles += `
+                    max-height: calc(80vh - 40px);
+                `;
+                content.parentElement.style.flexDirection = 'column-reverse';
+            } else {
+                // Body expands downward (default)
+                contentStyles += `
+                    max-height: calc(80vh - 40px);
+                `;
+                content.parentElement.style.flexDirection = 'column';
+            }
+
+            content.style.cssText = contentStyles;
+        },
+
+        expand: function() {
+            this.isExpanded = true;
+            const panel = this.element.querySelector('.control-panel');
+            const toggleBtn = this.element.querySelector('.control-toggle');
+
+            // Get expansion direction based on compass position
+            const expansion = this.getExpansionDirection();
+
+            // Apply expansion styling based on direction
+            if (expansion.header === 'left') {
+                // Header expands to the left (for right border positions)
+                this.element.style.width = '300px';
+                this.element.style.transformOrigin = 'top right';
+            } else {
+                // Header expands to the right (default)
+                this.element.style.width = '300px';
+                this.element.style.transformOrigin = 'top left';
+            }
+
+            panel.style.display = 'block';
+            toggleBtn.style.display = 'none';
+
+            this.styleHeader();
+            this.styleContent();
+            this.addResizeHandle();
+        },
+
+        collapse: function() {
+            this.isExpanded = false;
+            this.isHeaderOnly = false;  // Reset header-only state
+            const panel = this.element.querySelector('.control-panel');
+            const toggleBtn = this.element.querySelector('.control-toggle');
+            panel.style.display = 'none';
+
+            // Reset size to default
+            this.element.style.width = '40px';
+            this.element.style.height = 'auto';
+
+            // Remove resize handle
+            this.removeResizeHandle();
+
+            toggleBtn.style.display = 'block';
+
+            // Reset position to original compass location
+            this.element.style.top = this.originalPosition.top;
+            this.element.style.right = this.originalPosition.right;
+            this.element.style.bottom = this.originalPosition.bottom;
+            this.element.style.left = this.originalPosition.left;
+            this.element.style.transform = this.originalPosition.transform;
+        },
+
+        toggleHeaderOnly: function() {
+            if (!this.isExpanded) {
+                // If collapsed, first expand normally
+                this.buildContent();
+                return;
+            }
+
+            const content = this.element.querySelector('.control-content');
+
+            if (this.isHeaderOnly) {
+                // Show content area (go to full expanded mode)
+                this.isHeaderOnly = false;
+                content.style.display = 'block';
+                console.log(`🎛️ ${this.config.title} expanded to full view`);
+            } else {
+                // Hide content area (go to header-only mode)
+                this.isHeaderOnly = true;
+                content.style.display = 'none';
+                console.log(`🎛️ ${this.config.title} collapsed to header only`);
+            }
+        },
+
+        setupDragHandlers: function(dragElement) {
+            dragElement.addEventListener('mousedown', (e) => {
+                this.isDragging = true;
+                const rect = this.element.getBoundingClientRect();
+                const iconRect = dragElement.getBoundingClientRect();
+
+                // Calculate offset relative to the icon position, not the element
+                this.dragOffset.x = e.clientX - rect.left;
+                this.dragOffset.y = iconRect.top - rect.top + (iconRect.height / 2);  // Keep mouse at icon center
+
+                dragElement.style.cursor = 'grabbing';
+
+                e.preventDefault();
+            });
+
+            document.addEventListener('mousemove', (e) => {
+                if (!this.isDragging || !this.isExpanded) return;
+
+                const newX = e.clientX - this.dragOffset.x;
+                const newY = e.clientY - this.dragOffset.y;
+
+                // Keep within viewport bounds
+                const maxX = window.innerWidth - this.element.offsetWidth;
+                const maxY = window.innerHeight - this.element.offsetHeight;
+
+                const boundedX = Math.max(0, Math.min(newX, maxX));
+                const boundedY = Math.max(0, Math.min(newY, maxY));
+
+                this.element.style.left = boundedX + 'px';
+                this.element.style.top = boundedY + 'px';
+            });
+
+            document.addEventListener('mouseup', () => {
+                if (this.isDragging) {
+                    this.isDragging = false;
+                    dragElement.style.cursor = 'grab';
+                }
+            });
+        },
+
+        // Add resize handle to expanded control (same as viewing mode)
+        addResizeHandle: function() {
+            // Remove existing resize handle if any
+            this.removeResizeHandle();
+
+            const resizeHandle = document.createElement('div');
+            resizeHandle.className = 'control-resize-handle';
+            resizeHandle.innerHTML = '↘';
+            resizeHandle.style.cssText = `
+                position: absolute;
+                bottom: 0;
+                right: 0;
+                width: 20px;
+                height: 20px;
+                background: rgba(108, 117, 125, 0.8);
+                color: white;
+                cursor: nw-resize;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                font-size: 12px;
+                line-height: 1;
+                border-top-left-radius: 4px;
+                user-select: none;
+                z-index: 1002;
+            `;
+
+            this.element.appendChild(resizeHandle);
+            this.setupResizeHandlers(resizeHandle);
+        },
+
+        // Remove resize handle
+        removeResizeHandle: function() {
+            const existingHandle = this.element.querySelector('.control-resize-handle');
+            if (existingHandle) {
+                existingHandle.remove();
+            }
+        },
+
+        // Set up resize event handlers
+        setupResizeHandlers: function(resizeHandle) {
+            resizeHandle.addEventListener('mousedown', (e) => {
+                this.isResizing = true;
+                const rect = this.element.getBoundingClientRect();
+                this.resizeStartSize = {
+                    width: rect.width,
+                    height: rect.height,
+                    startX: e.clientX,
+                    startY: e.clientY
+                };
+
+                resizeHandle.style.cursor = 'nw-resize';
+                resizeHandle.style.background = 'rgba(40, 167, 69, 0.9)';
+
+                e.preventDefault();
+                e.stopPropagation(); // Prevent triggering drag
+            });
+
+            document.addEventListener('mousemove', (e) => {
+                if (!this.isResizing || !this.isExpanded) return;
+
+                const deltaX = e.clientX - this.resizeStartSize.startX;
+                const deltaY = e.clientY - this.resizeStartSize.startY;
+
+                const newWidth = Math.max(this.defaultSize.minWidth, this.resizeStartSize.width + deltaX);
+                const newHeight = Math.max(this.defaultSize.minHeight, this.resizeStartSize.height + deltaY);
+
+                // Check viewport bounds
+                const maxWidth = window.innerWidth - this.element.offsetLeft;
+                const maxHeight = window.innerHeight - this.element.offsetTop;
+
+                const boundedWidth = Math.min(newWidth, maxWidth - 20);
+                const boundedHeight = Math.min(newHeight, maxHeight - 20);
+
+                this.element.style.width = boundedWidth + 'px';
+                this.element.style.height = boundedHeight + 'px';
+
+                // Ensure content areas resize properly
+                this.updateContentSize();
+            });
+
+            document.addEventListener('mouseup', () => {
+                if (this.isResizing) {
+                    this.isResizing = false;
+                    resizeHandle.style.cursor = 'nw-resize';
+                    resizeHandle.style.background = 'rgba(108, 117, 125, 0.8)';
+                }
+            });
+        },
+
+        // Update content area sizes during resize
+        updateContentSize: function() {
+            const content = this.element.querySelector('.control-content');
+            if (content) {
+                // Adjust content height to fit the resized control
+                const headerHeight = 40; // Header is 40px
+                const padding = 16; // Account for padding
+                const controlHeight = this.element.offsetHeight;
+                const availableHeight = controlHeight - headerHeight - padding;
+
+                content.style.maxHeight = Math.max(100, availableHeight) + 'px';
+            }
+        }
+    };
+
+    // Create ContentsControl for edit mode (new implementation based on Control class)
+    try {
+        const contentsControl = Object.create(Control);
+
+        // Configure for contents navigation in edit mode
+        contentsControl.config = {
+            icon: '☰',
+            title: 'Contents',
+            className: 'contents-control edit-mode',
+            defaultContent: 'No headings found',
+            ariaLabel: 'Document Navigation',
+            position: 'wnw'  // West-north-west positioning
+        };
+
+        // Override buildContent method for navigation functionality
+        contentsControl.buildContent = function() {
+            const content = this.element.querySelector('.control-content');
+
+            // Build navigation content from current DOM
+            const allHeadings = document.querySelectorAll('h1, h2, h3');
+            // Filter out headings that contain "Contents" or similar navigation-related text
+            const headings = Array.from(allHeadings).filter(heading => {
+                const text = heading.textContent.trim().toLowerCase();
+                return !text.includes('contents') && !text.includes('table of contents') && !text.includes('navigation');
+            });
+            console.log("📋 Found headings for navigation:", headings.length);
+
+            if (headings.length === 0) {
+                content.innerHTML = '<p style="padding: 1rem; color: #666;">No headings found</p>';
+            } else {
+                let navHtml = '';
+                headings.forEach((heading, index) => {
+                    if (!heading.id) {
+                        heading.id = `heading-${index + 1}`;
+                    }
+                    const level = parseInt(heading.tagName.substring(1));
+                    const indent = (level - 1) * 1;
+                    navHtml += `
+                        <a href="#${heading.id}"
+                           style="display: block; padding: 0.5rem; margin-left: ${indent}rem;
+                                  text-decoration: none; color: #333; font-size: 0.9rem;
+                                  border-radius: 4px; cursor: pointer;"
+                           onmouseover="this.style.backgroundColor='#f5f5f5'"
+                           onmouseout="this.style.backgroundColor=''"
+                           onclick="event.preventDefault(); document.getElementById('${heading.id}').scrollIntoView({behavior: 'smooth'}); if (window.innerWidth <= 768) setTimeout(() => contentsControl.collapse(), 500);">
+                            ${heading.textContent.trim()}
+                        </a>
+                    `;
+                });
+                content.innerHTML = navHtml;
+            }
+
+            // Show panel
+            this.expand();
+        };
+
+        // Initialize the ContentsControl
+        contentsControl.createControl();
+
+        // Make globally available for mobile collapse
+        window.contentsControl = contentsControl;
+    } catch (error) {
+        console.error("ContentsControl failed to initialize:", error);
+    }
+
+    // Step 7: Initialize Independent Debug System
+    try {
+        // Create independent debug system using IndexedDB for persistence
+        window.MarkitectDebugSystem = {
+            db: null,
+            messages: [],
+            maxMessages: 1000,
+            isEnabled: true,
+            subscribers: [],
+
+            // Selection and filtering system
+            selectionCriteria: {
+                includeDocumentEvents: true,
+                includeSystemEvents: false,
+                includeControlEvents: true,
+                includeEditingEvents: true,
+                includeNavigationEvents: false,
+                includedHeadings: new Set(), // Track which document headings to monitor
+                excludedSources: new Set(['ContentsControl', 'DocumentNavigator'])
+            },
+
+            // Initialize IndexedDB for persistence
+            async init() {
+                return new Promise((resolve, reject) => {
+                    const request = indexedDB.open('MarkitectDebugDB', 1);
+
+                    request.onerror = () => reject(request.error);
+                    request.onsuccess = () => {
+                        this.db = request.result;
+                        this.loadMessages().then(resolve);
+                    };
+
+                    request.onupgradeneeded = (e) => {
+                        const db = e.target.result;
+                        if (!db.objectStoreNames.contains('messages')) {
+                            const store = db.createObjectStore('messages', { keyPath: 'id', autoIncrement: true });
+                            store.createIndex('timestamp', 'timestamp', { unique: false });
+                            store.createIndex('category', 'category', { unique: false });
+                        }
+                    };
+                });
+            },
+
+            // Add a debug message with selection filtering
+            async addMessage(message, category = 'INFO', source = 'System', context = {}) {
+                // Check if this message should be included based on selection criteria
+                if (!this.shouldIncludeMessage(message, category, source, context)) {
+                    return null;
+                }
+
+                const messageObj = {
+                    message: String(message),
+                    category: category.toUpperCase(),
+                    source: source,
+                    context: context,
+                    timestamp: new Date().toISOString(),
+                    displayTime: new Date().toLocaleTimeString()
+                };
+
+                // Add to memory
+                this.messages.push(messageObj);
+
+                // Keep only last maxMessages in memory
+                if (this.messages.length > this.maxMessages) {
+                    this.messages = this.messages.slice(-this.maxMessages);
+                }
+
+                // Persist to IndexedDB
+                if (this.db) {
+                    try {
+                        const transaction = this.db.transaction(['messages'], 'readwrite');
+                        const store = transaction.objectStore('messages');
+                        await store.add(messageObj);
+                    } catch (e) {
+                        console.warn('Failed to persist debug message:', e);
+                    }
+                }
+
+                // Notify subscribers
+                this.subscribers.forEach(callback => {
+                    try { callback(messageObj); } catch (e) { console.error('Debug subscriber error:', e); }
+                });
+
+                return messageObj;
+            },
+
+            // Selection filtering logic
+            shouldIncludeMessage(message, category, source, context) {
+                if (!this.isEnabled) return false;
+
+                // Check excluded sources
+                if (this.selectionCriteria.excludedSources.has(source)) {
+                    return false;
+                }
+
+                // Category-based filtering
+                const categoryChecks = {
+                    'DOCUMENT': () => this.selectionCriteria.includeDocumentEvents,
+                    'SYSTEM': () => this.selectionCriteria.includeSystemEvents,
+                    'CONTROL': () => this.selectionCriteria.includeControlEvents,
+                    'EDITING': () => this.selectionCriteria.includeEditingEvents,
+                    'NAVIGATION': () => this.selectionCriteria.includeNavigationEvents
+                };
+
+                // Check if we have a specific category filter
+                if (context.eventType && categoryChecks[context.eventType]) {
+                    return categoryChecks[context.eventType]();
+                }
+
+                // Document heading specific filtering
+                if (context.headingId) {
+                    return this.selectionCriteria.includedHeadings.has(context.headingId) ||
+                           this.selectionCriteria.includedHeadings.size === 0; // Include all if none specifically selected
+                }
+
+                // Default: include based on general settings
+                return category === 'ERROR' || // Always include errors
+                       this.selectionCriteria.includeSystemEvents;
+            },
+
+            // Document structure awareness
+            scanDocumentStructure() {
+                const headings = document.querySelectorAll('h1, h2, h3, h4, h5, h6');
+                const documentStructure = {
+                    headings: [],
+                    totalSections: 0
+                };
+
+                headings.forEach((heading, index) => {
+                    // Skip control headings (like Contents, Debug, etc.)
+                    const text = heading.textContent.trim().toLowerCase();
+                    if (text.includes('contents') || text.includes('debug') ||
+                        text.includes('control') || text.includes('navigation')) {
+                        return;
+                    }
+
+                    if (!heading.id) {
+                        heading.id = `document-heading-${index + 1}`;
+                    }
+
+                    documentStructure.headings.push({
+                        id: heading.id,
+                        text: heading.textContent.trim(),
+                        level: parseInt(heading.tagName.substring(1)),
+                        element: heading
+                    });
+                });
+
+                documentStructure.totalSections = documentStructure.headings.length;
+                this.documentStructure = documentStructure;
+
+                // Auto-include all document headings for monitoring
+                this.selectionCriteria.includedHeadings.clear();
+                documentStructure.headings.forEach(heading => {
+                    this.selectionCriteria.includedHeadings.add(heading.id);
+                });
+
+                this.addMessage(`Document structure scanned: ${documentStructure.totalSections} sections found`,
+                              'INFO', 'DocumentScanner', { eventType: 'DOCUMENT', headings: documentStructure.headings });
+
+                return documentStructure;
+            },
+
+            // Selection management methods
+            includeHeading(headingId) {
+                this.selectionCriteria.includedHeadings.add(headingId);
+            },
+
+            excludeHeading(headingId) {
+                this.selectionCriteria.includedHeadings.delete(headingId);
+            },
+
+            includeSource(source) {
+                this.selectionCriteria.excludedSources.delete(source);
+            },
+
+            excludeSource(source) {
+                this.selectionCriteria.excludedSources.add(source);
+            },
+
+            // Get selection criteria for UI
+            getSelectionCriteria() {
+                return {
+                    ...this.selectionCriteria,
+                    includedHeadings: Array.from(this.selectionCriteria.includedHeadings),
+                    excludedSources: Array.from(this.selectionCriteria.excludedSources)
+                };
+            },
+
+            // Load messages from IndexedDB
+            async loadMessages() {
+                if (!this.db) return;
+
+                try {
+                    const transaction = this.db.transaction(['messages'], 'readonly');
+                    const store = transaction.objectStore('messages');
+                    const request = store.getAll();
+
+                    request.onsuccess = () => {
+                        this.messages = request.result.slice(-this.maxMessages);
+                        console.log(`📊 Loaded ${this.messages.length} debug messages from IndexedDB`);
+                    };
+                } catch (e) {
+                    console.warn('Failed to load debug messages:', e);
+                }
+            },
+
+            // Clear all messages
+            async clearMessages() {
+                this.messages = [];
+
+                if (this.db) {
+                    try {
+                        const transaction = this.db.transaction(['messages'], 'readwrite');
+                        const store = transaction.objectStore('messages');
+                        await store.clear();
+                    } catch (e) {
+                        console.warn('Failed to clear debug messages from DB:', e);
+                    }
+                }
+
+                this.subscribers.forEach(callback => {
+                    try { callback({ type: 'clear' }); } catch (e) { console.error('Debug subscriber error:', e); }
+                });
+            },
+
+            // Subscribe to debug updates
+            subscribe(callback) {
+                this.subscribers.push(callback);
+                return () => {
+                    const index = this.subscribers.indexOf(callback);
+                    if (index > -1) this.subscribers.splice(index, 1);
+                };
+            },
+
+            // Get messages (with filtering)
+            getMessages(category = null, limit = null) {
+                let filtered = this.messages;
+
+                if (category) {
+                    filtered = filtered.filter(msg => msg.category === category.toUpperCase());
+                }
+
+                if (limit) {
+                    filtered = filtered.slice(-limit);
+                }
+
+                return filtered;
+            },
+
+            // Get recent messages
+            getRecentMessages(count = 50) {
+                return this.messages.slice(-count);
+            },
+
+            // Export messages as JSON
+            exportMessages() {
+                return JSON.stringify(this.messages, null, 2);
+            }
+        };
+
+        // Initialize the debug system
+        window.MarkitectDebugSystem.init().then(() => {
+            console.log('📊 Markitect Debug System initialized');
+
+            // Add initial message
+            window.MarkitectDebugSystem.addMessage('Markitect Debug System initialized', 'INFO', 'DebugSystem', {eventType: 'SYSTEM'});
+
+        }).catch(error => {
+            console.warn('📊 Debug System initialization failed, using memory only:', error);
+            window.MarkitectDebugSystem.addMessage('Debug System initialized (memory only)', 'WARNING', 'DebugSystem', {eventType: 'SYSTEM'});
+        });
+
+    } catch (error) {
+        console.error("Debug System initialization failed:", error);
+    }
+
+    // Step 8: Initialize DebugControl (new implementation based on Control class)
+    try {
+        const debugControl = Object.create(Control);
+
+        // Configure for debug functionality
+        debugControl.config = {
+            icon: '🪲',
+            title: 'Debug',
+            className: 'debug-control',
+            defaultContent: 'Debug panel controls',
+            ariaLabel: 'Debug Control',
+            position: 'ese'  // East-south-east positioning
+        };
+
+        // Override buildContent method for debug functionality
+        debugControl.buildContent = function() {
+            console.log("🪲 Building debug control content...");
+
+            try {
+                const content = this.element.querySelector('.control-content');
+                if (!content) {
+                    console.error("🪲 Debug control content element not found");
+                    return;
+                }
+
+                // Build debug control panel with selection and filtering
+                content.innerHTML = `
+                    <div style="padding: 0.5rem;">
+                        <!-- Debug Control Header -->
+                        <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.5rem;
+                                    padding-bottom: 0.5rem; border-bottom: 1px solid #eee;">
+                            <h4 style="margin: 0; font-size: 0.9rem; font-weight: 600;">Debug Messages</h4>
+                            <div>
+                                <button onclick="window.MarkitectDebugSystem?.scanDocumentStructure()"
+                                        style="padding: 0.25rem 0.5rem; background: #28a745; color: white;
+                                               border: none; border-radius: 3px; cursor: pointer; font-size: 0.7rem; margin-right: 0.25rem;">
+                                    📊 Scan
+                                </button>
+                                <button onclick="window.MarkitectDebugSystem?.clearMessages()"
+                                        style="padding: 0.25rem 0.5rem; background: #dc3545; color: white;
+                                               border: none; border-radius: 3px; cursor: pointer; font-size: 0.7rem;">
+                                    Clear
+                                </button>
+                            </div>
+                        </div>
+
+                        <!-- Selection Controls -->
+                        <div style="margin-bottom: 0.5rem; padding: 0.5rem; background: #f8f9fa; border-radius: 4px; font-size: 0.8rem;">
+                            <div style="font-weight: bold; margin-bottom: 0.25rem;">Event Types:</div>
+                            <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 0.25rem;">
+                                <label style="display: flex; align-items: center; cursor: pointer;">
+                                    <input type="checkbox" id="docEvents" checked onchange="window.MarkitectDebugSystem.selectionCriteria.includeDocumentEvents = this.checked" style="margin-right: 0.25rem;">
+                                    <span style="font-size: 0.75rem;">Document</span>
+                                </label>
+                                <label style="display: flex; align-items: center; cursor: pointer;">
+                                    <input type="checkbox" id="editEvents" checked onchange="window.MarkitectDebugSystem.selectionCriteria.includeEditingEvents = this.checked" style="margin-right: 0.25rem;">
+                                    <span style="font-size: 0.75rem;">Editing</span>
+                                </label>
+                                <label style="display: flex; align-items: center; cursor: pointer;">
+                                    <input type="checkbox" id="ctrlEvents" checked onchange="window.MarkitectDebugSystem.selectionCriteria.includeControlEvents = this.checked" style="margin-right: 0.25rem;">
+                                    <span style="font-size: 0.75rem;">Controls</span>
+                                </label>
+                                <label style="display: flex; align-items: center; cursor: pointer;">
+                                    <input type="checkbox" id="sysEvents" onchange="window.MarkitectDebugSystem.selectionCriteria.includeSystemEvents = this.checked" style="margin-right: 0.25rem;">
+                                    <span style="font-size: 0.75rem;">System</span>
+                                </label>
+                            </div>
+                        </div>
+
+                        <!-- Debug Switch -->
+                        <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.5rem;
+                                    padding: 0.5rem; background: #e9ecef; border-radius: 4px;">
+                            <span style="font-size: 0.9rem; font-weight: bold;">Debug System:</span>
+                            <label style="display: flex; align-items: center; cursor: pointer;">
+                                <input type="checkbox" id="debugToggle" checked
+                                       onchange="window.MarkitectDebugSystem.isEnabled = this.checked; document.getElementById('debugStatus').textContent = this.checked ? 'ON' : 'OFF'; document.getElementById('debugStatus').style.color = this.checked ? '#28a745' : '#dc3545';"
+                                       style="margin-right: 0.5rem;">
+                                <span id="debugStatus" style="color: #28a745; font-weight: bold;">ON</span>
+                            </label>
+                        </div>
+
+                        <!-- Debug Messages Container -->
+                        <div id="debugMessagesContainer" style="max-height: 180px; overflow-y: auto;
+                                                               border: 1px solid #ddd; border-radius: 4px;
+                                                               background: #f8f9fa; font-family: monospace; font-size: 0.8rem;">
+                            <div style="padding: 0.5rem; color: #666; text-align: center;">
+                                Click 📊 Scan to analyze document structure
+                            </div>
+                        </div>
+
+                        <!-- Export and Tools -->
+                        <div style="margin-top: 0.5rem; display: flex; gap: 0.25rem;">
+                            <button onclick="navigator.clipboard.writeText(window.MarkitectDebugSystem.exportMessages()).then(() => window.MarkitectDebugSystem.addMessage('Debug messages exported to clipboard', 'SUCCESS', 'DebugControl'))"
+                                    style="flex: 1; padding: 0.4rem; background: #17a2b8; color: white;
+                                           border: none; border-radius: 3px; cursor: pointer; font-size: 0.8rem;">
+                                📋 Export
+                            </button>
+                            <button onclick="console.table(window.MarkitectDebugSystem.getSelectionCriteria())"
+                                    style="flex: 1; padding: 0.4rem; background: #6f42c1; color: white;
+                                           border: none; border-radius: 3px; cursor: pointer; font-size: 0.8rem;">
+                                🔍 Criteria
+                            </button>
+                        </div>
+                    </div>
+                `;
+
+                console.log("🪲 Debug control HTML content built successfully");
+
+                // Note: Debug switch state is set directly in HTML (checked attribute)
+                // No need to call updateDebugStatus() since checkbox manages its own state
+
+                // Set up periodic update of debug messages
+                try {
+                    this.setupMessageUpdates();
+                } catch (e) {
+                    console.log("🪲 Message updates setup failed:", e);
+                }
+
+                // Show panel and call expand
+                console.log("🪲 Calling expand...");
+                this.expand();
+                console.log("🪲 Expand called successfully");
+
+            } catch (error) {
+                console.error("🪲 Error in buildContent:", error);
+                // Fallback simple content
+                const content = this.element.querySelector('.control-content');
+                if (content) {
+                    content.innerHTML = `<div style="padding: 1rem; color: #666;">Debug control error: ${error.message}</div>`;
+                    this.expand();
+                }
+            }
+        };
+
+        // Add method to update debug switch status (updated for new debug system)
+        debugControl.updateDebugStatus = function() {
+            const checkbox = this.element.querySelector('#debugToggle');
+            const statusText = this.element.querySelector('#debugStatus');
+
+            if (checkbox && statusText) {
+                try {
+                    if (window.MarkitectDebugSystem) {
+                        // Use the new debug system's enabled state
+                        const isEnabled = window.MarkitectDebugSystem.isEnabled;
+                        checkbox.checked = isEnabled;
+                        statusText.textContent = isEnabled ? 'ON' : 'OFF';
+                        statusText.style.color = isEnabled ? '#28a745' : '#dc3545';
+                    } else {
+                        // Fallback when debug system is not available
+                        checkbox.checked = false;
+                        statusText.textContent = 'UNAVAILABLE';
+                        statusText.style.color = '#dc3545';
+                    }
+                } catch (e) {
+                    console.log("🪲 Error updating debug status:", e);
+                    checkbox.checked = false;
+                    statusText.textContent = 'ERROR';
+                    statusText.style.color = '#dc3545';
+                }
+            }
+        };
+
+        // Add method to setup message updates
+        debugControl.setupMessageUpdates = function() {
+            try {
+                // Update messages every 500ms when debug control is open
+                this.messageUpdateInterval = setInterval(() => {
+                    if (this.isExpanded && !this.isHeaderOnly) {
+                        this.updateMessages();
+                        // Note: updateDebugStatus() removed - checkbox manages its own state
+                    }
+                }, 500);
+                console.log("🪲 Message update interval set up successfully");
+            } catch (e) {
+                console.log("🪲 Failed to set up message updates:", e);
+            }
+        };
+
+        // Add method to update debug messages display using new system
+        debugControl.updateMessages = function() {
+            const container = this.element.querySelector('#debugMessagesContainer');
+            if (!container) return;
+
+            try {
+                if (window.MarkitectDebugSystem) {
+                    const messages = window.MarkitectDebugSystem.getRecentMessages(50);
+                    if (messages && messages.length > 0) {
+                        // Show messages in reverse order (newest first)
+                        const reversedMessages = [...messages].reverse();
+                        container.innerHTML = `
+                            <div style="padding: 0.25rem 0.5rem; background: #e9ecef; font-size: 0.7rem; color: #6c757d;">
+                                ${messages.length} messages (newest first) |
+                                <span onclick="window.MarkitectDebugSystem.addMessage('Test message from debug control', 'INFO', 'DebugControl', {eventType: 'CONTROL'})"
+                                      style="cursor: pointer; text-decoration: underline;">Add Test</span>
+                            </div>
+                            ${reversedMessages.map(msg => `
+                                <div style="padding: 0.25rem 0.5rem; border-bottom: 1px solid #e9ecef;
+                                            color: ${this.getMessageColor(msg.category)};">
+                                    <div style="display: flex; justify-content: space-between; align-items: flex-start;">
+                                        <div style="flex: 1;">
+                                            <small style="color: #6c757d;">[${msg.displayTime}]</small>
+                                            <span style="font-weight: bold; margin: 0 0.25rem 0 0.5rem;">${msg.category}:</span>
+                                            ${msg.message}
+                                        </div>
+                                        ${msg.source ? `<small style="color: #868e96; font-size: 0.7rem; margin-left: 0.5rem;">${msg.source}</small>` : ''}
+                                    </div>
+                                    ${msg.context && msg.context.headingId ? `
+                                        <div style="font-size: 0.7rem; color: #6c757d; padding-left: 1rem;">
+                                            📍 Section: ${msg.context.headingId}
+                                        </div>
+                                    ` : ''}
+                                </div>
+                            `).join('')}
+                        `;
+                    } else {
+                        container.innerHTML = `
+                            <div style="padding: 0.5rem; color: #666; text-align: center;">
+                                No debug messages yet<br>
+                                <button onclick="window.MarkitectDebugSystem.addMessage('First debug message', 'INFO')"
+                                        style="margin-top: 0.5rem; padding: 0.25rem 0.5rem; background: #28a745; color: white; border: none; border-radius: 3px; cursor: pointer;">
+                                    Add Test Message
+                                </button>
+                            </div>
+                        `;
+                    }
+                } else {
+                    container.innerHTML = `
+                        <div style="padding: 0.5rem; color: #dc3545; text-align: center;">
+                            Debug system not initialized
+                        </div>
+                    `;
+                }
+            } catch (e) {
+                console.log("🪲 Error updating messages:", e);
+                container.innerHTML = `
+                    <div style="padding: 0.5rem; color: #dc3545; text-align: center;">
+                        Error loading messages: ${e.message}
+                    </div>
+                `;
+            }
+        };
+
+        // Add method to get message colors by type
+        debugControl.getMessageColor = function(type) {
+            const colors = {
+                'ERROR': '#dc3545',
+                'WARNING': '#fd7e14',
+                'SUCCESS': '#28a745',
+                'INFO': '#17a2b8',
+                'DEBUG': '#6f42c1'
+            };
+            return colors[type] || '#495057';
+        };
+
+        // Override collapse to clean up intervals
+        const originalCollapse = debugControl.collapse;
+        debugControl.collapse = function() {
+            if (this.messageUpdateInterval) {
+                clearInterval(this.messageUpdateInterval);
+                this.messageUpdateInterval = null;
+            }
+            originalCollapse.call(this);
+        };
+
+        // Create and show the debug control
+        console.log("🪲 Creating debug control...");
+        debugControl.createControl();
+        console.log("🪲 Debug control created, element:", debugControl.element);
+
+        // Make debug control globally accessible
+        window.debugControl = debugControl;
+        console.log("🪲 Debug control setup complete and globally accessible");
+    } catch (error) {
+        console.error("DebugControl failed to initialize:", error);
+    }
+
+
+    // Wire up event handlers
+    documentControls.setEventHandlers({
+        'save-document': () => {
+            console.log('Save document clicked');
+            try {
+                // Get current markdown content from section manager
+                const currentMarkdown = sectionManager.getDocumentMarkdown();
+
+                // Create filename with timestamp suffix following the established convention
+                const now = new Date();
+                const timestamp = now.toISOString().slice(0, 19).replace(/:/g, '-').replace('T', '-');
+
+                // Extract original filename from config or use default
+                const originalFilename = window.editorConfig?.originalFilename || 'document';
+                const editedFilename = `${originalFilename}-edited-${timestamp}.md`;
+
+                // Create and download the file
+                const blob = new Blob([currentMarkdown], { type: 'text/markdown' });
+                const url = URL.createObjectURL(blob);
+                const a = document.createElement('a');
+                a.href = url;
+                a.download = editedFilename;
+                document.body.appendChild(a);
+                a.click();
+                document.body.removeChild(a);
+                URL.revokeObjectURL(url);
+
+                // Log success to debug system
+                window.MarkitectDebugSystem?.addMessage(`Document saved as: ${editedFilename}`, 'SUCCESS', 'DocumentSaver', {eventType: 'DOCUMENT'});
+                console.log(`Document successfully saved as: ${editedFilename}`);
+
+            } catch (error) {
+                window.MarkitectDebugSystem?.addMessage(`Save failed: ${error.message}`, 'ERROR', 'DocumentSaver', {eventType: 'DOCUMENT'});
+                console.error('Save error:', error);
+            }
+        },
+        'reset-all': () => {
+            console.log('Reset all clicked');
+            // Hide any open editors
+            domRenderer.hideCurrentEditor();
+            // Reset all sections to original state
+            const allSections = Array.from(sectionManager.sections.values());
+            allSections.forEach(section => {
+                section.resetToOriginal();
+            });
+            // Re-render all sections
+            domRenderer.renderAllSections(allSections);
+            window.MarkitectDebugSystem?.addMessage(`Reset all sections to original state`, 'INFO', 'SectionManager', {eventType: 'EDITING'});
+        }
+    });
+
+    // Set up debug system integration with section-aware logging
+    sectionManager.on('sections-created', (data) => {
+        window.MarkitectDebugSystem?.addMessage(`Created ${data.count} sections`, 'INFO', 'SectionManager', {eventType: 'DOCUMENT'});
+    });
+
+    sectionManager.on('edit-started', (data) => {
+        window.MarkitectDebugSystem?.addMessage(`Edit started for section: ${data.sectionId}`, 'DEBUG', 'SectionManager', {eventType: 'EDITING', sectionId: data.sectionId});
+    });
+
+    sectionManager.on('changes-accepted', (data) => {
+        window.MarkitectDebugSystem?.addMessage(`Changes accepted for section: ${data.sectionId}`, 'SUCCESS', 'SectionManager', {eventType: 'EDITING', sectionId: data.sectionId});
+        // Re-render the section to show updated content
+        const section = sectionManager.sections.get(data.sectionId);
+        if (section) {
+            const sectionElement = domRenderer.findSectionElement(data.sectionId);
+            if (sectionElement) {
+                const newElement = domRenderer.renderSection(section);
+                sectionElement.parentNode.replaceChild(newElement, sectionElement);
+                window.MarkitectDebugSystem?.addMessage(`DOM updated for section: ${data.sectionId}`, 'INFO', 'DOMRenderer', {eventType: 'EDITING', sectionId: data.sectionId});
+            }
+        }
+    });
+
+    sectionManager.on('changes-cancelled', (data) => {
+        window.MarkitectDebugSystem?.addMessage(`Changes cancelled for section: ${data.sectionId}`, 'WARNING', 'SectionManager', {eventType: 'EDITING', sectionId: data.sectionId});
+    });
+
+    // Initialize with markdown content
+    const markdownToRender = markdownContent || '';
+    if (markdownToRender.trim()) {
+        const sections = sectionManager.createSectionsFromMarkdown(markdownToRender);
+        domRenderer.renderAllSections(sections);
+        window.MarkitectDebugSystem?.addMessage(`Initialized with ${sections.length} sections`, 'INFO', 'DocumentRenderer', {eventType: 'DOCUMENT'});
+    } else {
+        window.MarkitectDebugSystem?.addMessage('No markdown content to initialize', 'WARNING', 'DocumentRenderer', {eventType: 'DOCUMENT'});
+    }
+
+    // Make components globally available for debugging
+    window.markitectComponents = {
+        sectionManager,
+        domRenderer,
+        debugPanel,
+        documentControls
+    };
+
+    console.log('Markitect modular editor initialized successfully');
+});
+
+
+        // Always render content first (graceful degradation)
+        document.addEventListener('DOMContentLoaded', function() {
+            console.log("Rendering content...");
+
+            // Check if modular components are being used
+            if (typeof SectionManager !== 'undefined') {
+                console.log("✓ Modular components detected - skipping direct content rendering");
+                console.log("✓ Content will be rendered by modular architecture");
+                return;
+            }
+
+            const contentDiv = document.getElementById('markdown-content');
+
+            // Step 1: Ensure content is always displayed (fallback for non-modular mode)
+            if (contentDiv) {
+                if (typeof marked !== 'undefined') {
+                    try {
+                        const html = marked.parse(markdownContentWithDogtag);
+                        // Add target="_blank" to all links
+                        const htmlWithTargetBlank = html.replace(/<a href="([^"]*)"([^>]*)>/g, '<a href="$1" target="_blank"$2>');
+                        contentDiv.innerHTML = htmlWithTargetBlank;
+                        console.log("✓ Content rendered successfully");
+                        console.log('✓ Markdown rendered successfully');
+                    } catch (error) {
+                        contentDiv.innerHTML = '<p>Error rendering markdown: ' + error.message + '</p>';
+                        console.error("Content rendered with errors");
+                        console.error("Markdown parsing failed:", error.message);
+                    }
+                } else {
+                    // Fallback: display raw markdown with basic formatting
+                    const fallbackHtml = markdownContent
+                        .replace(/^# (.*$)/gim, '<h1>$1</h1>')
+                        .replace(/^## (.*$)/gim, '<h2>$1</h2>')
+                        .replace(/^### (.*$)/gim, '<h3>$1</h3>')
+                        .replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>')
+                        .replace(/\*(.*?)\*/g, '<em>$1</em>')
+                        .replace(/^- (.*$)/gim, '<li>$1</li>')
+                        .replace(/\n\n/g, '<br><br>')
+                        .replace(/\n/g, '<br>');
+                    contentDiv.innerHTML = '<div style="white-space: pre-wrap;">' + fallbackHtml + '</div>';
+                    console.warn("Content rendered with fallback parser");
+                    console.warn("CDN library failed to load - using basic fallback rendering");
+                }
+            }
+
+            // Step 2: Initialize edit/insert capabilities if enabled
+            if ((typeof MARKITECT_EDIT_MODE !== 'undefined' && MARKITECT_EDIT_MODE) ||
+                (typeof MARKITECT_INSERT_MODE !== 'undefined' && MARKITECT_INSERT_MODE)) {
+                const mode = (typeof MARKITECT_INSERT_MODE !== 'undefined' && MARKITECT_INSERT_MODE) ? 'insert' : 'edit';
+                console.log(`Initializing clean ${mode} capabilities...`);
+                try {
+                    console.log("Creating clean editor instance...");
+                    initializeCleanEditor();
+                    if (mode === 'insert') {
+                        console.log("✓ Clean insert mode active - click any section to edit (headings 1-3 protected)");
+                    } else {
+                        console.log("✓ Clean edit mode active - click any section to edit");
+                    }
+                } catch (error) {
+                    console.error(`Clean ${mode} mode failed to initialize:`, error);
+                }
+            }
+
+            // Step 3: Initialize document scroll indicators (always available)
+            try {
+                initializeScrollIndicators();
+            } catch (error) {
+                console.error("Scroll indicators failed to initialize:", error);
+            }
+
+            // Step 4: Define abstract Control class for UI controls
+            const Control = {
+                // Abstract control properties
+                element: null,
+                isExpanded: false,
+                isHeaderOnly: false,  // New state for header-only mode
+                isDragging: false,
+                isResizing: false,  // New state for resizing mode
+                dragOffset: { x: 0, y: 0 },
+                resizeStartSize: { width: 280, height: 'auto' },
+                originalPosition: { top: '80px', left: '20px' },
+                defaultSize: { width: 280, minWidth: 200, minHeight: 150 },
+
+                // Configuration properties (to be overridden by subclasses)
+                config: {
+                    icon: '?',
+                    title: 'Control',
+                    className: 'control',
+                    defaultContent: 'Template only',
+                    ariaLabel: 'Control',
+                    position: 'w'  // Default compass position: west (middle-left)
+                },
+
+                // Compass positioning system (top-aligned for proper expansion)
+                compassPositions: {
+                    // North positions (top)
+                    'n':   { top: '20px', left: '50%', transform: 'translateX(-50%)' },
+                    'nne': { top: '20px', left: '65%', transform: 'translateX(-50%)' },
+                    'ne':  { top: '20px', right: '20px' },
+                    'ene': { top: '80px', right: '20px' },  // Top-aligned instead of center
+
+                    // East positions (right)
+                    'e':   { top: '50vh', right: '20px', transform: 'translateY(-20px)' },  // Anchor at icon level
+                    'ese': { top: 'calc(65vh - 20px)', right: '20px' },  // Top-aligned
+                    'se':  { bottom: '20px', right: '20px' },
+                    'sse': { bottom: '20px', right: '35%', transform: 'translateX(50%)' },
+
+                    // South positions (bottom)
+                    's':   { bottom: '20px', left: '50%', transform: 'translateX(-50%)' },
+                    'ssw': { bottom: '20px', left: '35%', transform: 'translateX(-50%)' },
+                    'sw':  { bottom: '20px', left: '20px' },
+                    'wsw': { bottom: '80px', left: '20px' },  // Top-aligned instead of center
+
+                    // West positions (left) - top-aligned for proper expansion
+                    'w':   { top: '50vh', left: '20px', transform: 'translateY(-20px)' },  // Anchor at icon level
+                    'wnw': { top: '80px', left: '20px' },  // Top-aligned instead of center
+                    'nw':  { top: '20px', left: '20px' },
+                    'nnw': { top: '20px', left: '35%', transform: 'translateX(-50%)' }
+                },
+
+                // Get expansion direction based on compass position
+                getExpansionDirection: function() {
+                    const pos = this.config.position;
+                    const rightBorderPositions = ['ne', 'ene', 'e', 'ese', 'se'];
+                    const bottomBorderPositions = ['sw', 'ssw', 's', 'sse', 'se'];
+
+                    return {
+                        header: rightBorderPositions.includes(pos) ? 'left' : 'right',
+                        body: bottomBorderPositions.includes(pos) ? 'up' : 'down'
+                    };
+                },
+
+                // Calculate position styles based on compass direction
+                getPositionStyles: function() {
+                    const compassPos = this.compassPositions[this.config.position] || this.compassPositions['w'];
+                    return {
+                        position: 'fixed',
+                        top: compassPos.top || 'auto',
+                        right: compassPos.right || 'auto',
+                        bottom: compassPos.bottom || 'auto',
+                        left: compassPos.left || 'auto',
+                        transform: compassPos.transform || 'none',
+                        zIndex: 1000
+                    };
+                },
+
+                // Abstract methods (to be implemented by subclasses)
+                buildContent: function() {
+                    const content = this.element.querySelector('.control-content');
+                    content.innerHTML = `<p style="padding: 1rem; color: #666;">${this.config.defaultContent}</p>`;
+                },
+
+                // Concrete methods (shared by all controls)
+                createControl: function() {
+                    console.log(`🎛️ Creating ${this.config.title} control...`);
+
+                    this.element = document.createElement('div');
+                    this.element.className = this.config.className;
+                    this.element.innerHTML = `
+                        <button class="control-toggle" aria-label="${this.config.ariaLabel}">${this.config.icon}</button>
+                        <div class="control-panel" style="display: none;">
+                            <div class="control-header">
+                                <span class="control-icon">${this.config.icon}</span>
+                                <h3>${this.config.title}</h3>
+                                <button class="control-close">✕</button>
+                            </div>
+                            <div class="control-content">Loading...</div>
+                        </div>
+                    `;
+
+                    // Position using compass direction
+                    const positionStyles = this.getPositionStyles();
+                    this.element.style.cssText = `
+                        position: ${positionStyles.position};
+                        top: ${positionStyles.top};
+                        right: ${positionStyles.right};
+                        bottom: ${positionStyles.bottom};
+                        left: ${positionStyles.left};
+                        transform: ${positionStyles.transform};
+                        z-index: ${positionStyles.zIndex};
+                        background: rgba(255, 255, 255, 0.95);
+                        border: 1px solid #e1e5e9;
+                        border-radius: 8px;
+                        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+                        backdrop-filter: blur(8px);
+                        width: 40px;
+                        transition: all 0.3s ease;
+                        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+                    `;
+
+                    // Store original position for reset
+                    this.originalPosition = {
+                        top: positionStyles.top,
+                        right: positionStyles.right,
+                        bottom: positionStyles.bottom,
+                        left: positionStyles.left,
+                        transform: positionStyles.transform
+                    };
+
+                    // Style toggle button
+                    const toggleBtn = this.element.querySelector('.control-toggle');
+                    toggleBtn.style.cssText = `
+                        width: 100%;
+                        height: 40px;
+                        border: none;
+                        background: transparent;
+                        cursor: pointer;
+                        font-size: 16px;
+                        color: #666;
+                        transition: color 0.2s ease;
+                    `;
+
+                    // Handle click to build content on-demand
+                    toggleBtn.addEventListener('click', () => {
+                        if (this.isExpanded) {
+                            this.collapse();
+                        } else {
+                            console.log(`🎛️ ${this.config.title} toggle clicked - building content...`);
+                            this.buildContent();
+                        }
+                    });
+
+                    // Close button handler
+                    const closeBtn = this.element.querySelector('.control-close');
+                    closeBtn.addEventListener('click', () => {
+                        this.collapse();
+                    });
+
+                    // Responsive behavior
+                    window.addEventListener('resize', () => {
+                        if (window.innerWidth <= 768) {
+                            this.element.style.display = 'none';
+                        } else {
+                            this.element.style.display = '';
+                        }
+                    });
+
+                    document.body.appendChild(this.element);
+
+                    // Hide on mobile
+                    if (window.innerWidth <= 768) {
+                        this.element.style.display = 'none';
+                    }
+
+                    console.log(`🎛️ ${this.config.title} control created`);
+                },
+
+                styleHeader: function() {
+                    const header = this.element.querySelector('.control-header');
+
+                    // Style the header to show icon, title, and close button in one line
+                    // Match the height of the collapsed icon state (40px)
+                    header.style.cssText = `
+                        display: flex;
+                        align-items: center;
+                        justify-content: space-between;
+                        height: 40px;
+                        padding: 0 1rem;
+                        border-bottom: 1px solid #eee;
+                        margin-bottom: 0;
+                    `;
+
+                    const icon = header.querySelector('.control-icon');
+                    if (icon) {
+                        icon.style.cssText = `
+                            font-size: 16px;
+                            color: #666;
+                            margin-right: 0.5rem;
+                            cursor: grab;
+                            user-select: none;
+                        `;
+
+                        // Make icon draggable
+                        this.setupDragHandlers(icon);
+                    }
+
+                    const title = header.querySelector('h3');
+                    if (title) {
+                        title.style.cssText = `
+                            margin: 0;
+                            font-size: 0.9rem;
+                            font-weight: 600;
+                            flex-grow: 1;
+                            line-height: 1;
+                            cursor: pointer;
+                            user-select: none;
+                        `;
+
+                        // Add click handler to toggle header-only mode
+                        title.addEventListener('click', () => {
+                            this.toggleHeaderOnly();
+                        });
+                    }
+
+                    const closeBtn = header.querySelector('.control-close');
+                    if (closeBtn) {
+                        closeBtn.style.cssText = `
+                            background: none;
+                            border: none;
+                            font-size: 14px;
+                            cursor: pointer;
+                            color: #666;
+                            padding: 0;
+                            width: 20px;
+                            height: 20px;
+                            display: flex;
+                            align-items: center;
+                            justify-content: center;
+                        `;
+                    }
+                },
+
+                styleContent: function() {
+                    const content = this.element.querySelector('.control-content');
+                    const expansion = this.getExpansionDirection();
+
+                    // Style the content area based on expansion direction
+                    let contentStyles = `
+                        padding: 0.5rem;
+                        overflow-y: auto;
+                    `;
+
+                    if (expansion.body === 'up') {
+                        // Body expands upward (for bottom border positions)
+                        contentStyles += `
+                            max-height: calc(80vh - 40px);
+                        `;
+                        content.parentElement.style.flexDirection = 'column-reverse';
+                    } else {
+                        // Body expands downward (default)
+                        contentStyles += `
+                            max-height: calc(80vh - 40px);
+                        `;
+                        content.parentElement.style.flexDirection = 'column';
+                    }
+
+                    content.style.cssText = contentStyles;
+                },
+
+                expand: function() {
+                    this.isExpanded = true;
+                    const panel = this.element.querySelector('.control-panel');
+                    const toggleBtn = this.element.querySelector('.control-toggle');
+
+                    // Get expansion direction based on compass position
+                    const expansion = this.getExpansionDirection();
+
+                    // Apply expansion styling based on direction
+                    if (expansion.header === 'left') {
+                        // Header expands to the left (for right border positions)
+                        this.element.style.width = '280px';
+                        this.element.style.transformOrigin = 'top right';
+                    } else {
+                        // Header expands to the right (default)
+                        this.element.style.width = '280px';
+                        this.element.style.transformOrigin = 'top left';
+                    }
+
+                    panel.style.display = 'block';
+                    toggleBtn.style.display = 'none';
+
+                    this.styleHeader();
+                    this.styleContent();
+                    this.addResizeHandle();
+                },
+
+                collapse: function() {
+                    this.isExpanded = false;
+                    this.isHeaderOnly = false;  // Reset header-only state
+                    const panel = this.element.querySelector('.control-panel');
+                    const toggleBtn = this.element.querySelector('.control-toggle');
+                    panel.style.display = 'none';
+
+                    // Reset size to default
+                    this.element.style.width = '40px';
+                    this.element.style.height = 'auto';
+
+                    // Remove resize handle
+                    this.removeResizeHandle();
+
+                    toggleBtn.style.display = 'block';
+
+                    // Reset position to original compass location
+                    this.element.style.top = this.originalPosition.top;
+                    this.element.style.right = this.originalPosition.right;
+                    this.element.style.bottom = this.originalPosition.bottom;
+                    this.element.style.left = this.originalPosition.left;
+                    this.element.style.transform = this.originalPosition.transform;
+                },
+
+                toggleHeaderOnly: function() {
+                    if (!this.isExpanded) {
+                        // If collapsed, first expand normally
+                        this.buildContent();
+                        return;
+                    }
+
+                    const content = this.element.querySelector('.control-content');
+
+                    if (this.isHeaderOnly) {
+                        // Show content area (go to full expanded mode)
+                        this.isHeaderOnly = false;
+                        content.style.display = 'block';
+                        console.log(`🎛️ ${this.config.title} expanded to full view`);
+                    } else {
+                        // Hide content area (go to header-only mode)
+                        this.isHeaderOnly = true;
+                        content.style.display = 'none';
+                        console.log(`🎛️ ${this.config.title} collapsed to header only`);
+                    }
+                },
+
+                setupDragHandlers: function(dragElement) {
+                    dragElement.addEventListener('mousedown', (e) => {
+                        this.isDragging = true;
+                        const rect = this.element.getBoundingClientRect();
+                        const iconRect = dragElement.getBoundingClientRect();
+
+                        // Calculate offset relative to the icon position, not the element
+                        this.dragOffset.x = e.clientX - rect.left;
+                        this.dragOffset.y = iconRect.top - rect.top + (iconRect.height / 2);  // Keep mouse at icon center
+
+                        dragElement.style.cursor = 'grabbing';
+
+                        e.preventDefault();
+                    });
+
+                    document.addEventListener('mousemove', (e) => {
+                        if (!this.isDragging || !this.isExpanded) return;
+
+                        const newX = e.clientX - this.dragOffset.x;
+                        const newY = e.clientY - this.dragOffset.y;
+
+                        // Keep within viewport bounds
+                        const maxX = window.innerWidth - this.element.offsetWidth;
+                        const maxY = window.innerHeight - this.element.offsetHeight;
+
+                        const boundedX = Math.max(0, Math.min(newX, maxX));
+                        const boundedY = Math.max(0, Math.min(newY, maxY));
+
+                        this.element.style.left = boundedX + 'px';
+                        this.element.style.top = boundedY + 'px';
+                    });
+
+                    document.addEventListener('mouseup', () => {
+                        if (this.isDragging) {
+                            this.isDragging = false;
+                            dragElement.style.cursor = 'grab';
+                        }
+                    });
+                },
+
+                // Add resize handle to expanded control
+                addResizeHandle: function() {
+                    // Remove existing resize handle if any
+                    this.removeResizeHandle();
+
+                    const resizeHandle = document.createElement('div');
+                    resizeHandle.className = 'control-resize-handle';
+                    resizeHandle.innerHTML = '↘';
+                    resizeHandle.style.cssText = `
+                        position: absolute;
+                        bottom: 0;
+                        right: 0;
+                        width: 20px;
+                        height: 20px;
+                        background: rgba(108, 117, 125, 0.8);
+                        color: white;
+                        cursor: nw-resize;
+                        display: flex;
+                        align-items: center;
+                        justify-content: center;
+                        font-size: 12px;
+                        line-height: 1;
+                        border-top-left-radius: 4px;
+                        user-select: none;
+                        z-index: 1001;
+                    `;
+
+                    this.element.appendChild(resizeHandle);
+                    this.setupResizeHandlers(resizeHandle);
+                },
+
+                // Remove resize handle
+                removeResizeHandle: function() {
+                    const existingHandle = this.element.querySelector('.control-resize-handle');
+                    if (existingHandle) {
+                        existingHandle.remove();
+                    }
+                },
+
+                // Set up resize event handlers
+                setupResizeHandlers: function(resizeHandle) {
+                    resizeHandle.addEventListener('mousedown', (e) => {
+                        this.isResizing = true;
+                        const rect = this.element.getBoundingClientRect();
+                        this.resizeStartSize = {
+                            width: rect.width,
+                            height: rect.height,
+                            startX: e.clientX,
+                            startY: e.clientY
+                        };
+
+                        resizeHandle.style.cursor = 'nw-resize';
+                        resizeHandle.style.background = 'rgba(40, 167, 69, 0.9)';
+
+                        e.preventDefault();
+                        e.stopPropagation(); // Prevent triggering drag
+                    });
+
+                    document.addEventListener('mousemove', (e) => {
+                        if (!this.isResizing || !this.isExpanded) return;
+
+                        const deltaX = e.clientX - this.resizeStartSize.startX;
+                        const deltaY = e.clientY - this.resizeStartSize.startY;
+
+                        const newWidth = Math.max(this.defaultSize.minWidth, this.resizeStartSize.width + deltaX);
+                        const newHeight = Math.max(this.defaultSize.minHeight, this.resizeStartSize.height + deltaY);
+
+                        // Check viewport bounds
+                        const maxWidth = window.innerWidth - this.element.offsetLeft;
+                        const maxHeight = window.innerHeight - this.element.offsetTop;
+
+                        const boundedWidth = Math.min(newWidth, maxWidth - 20);
+                        const boundedHeight = Math.min(newHeight, maxHeight - 20);
+
+                        this.element.style.width = boundedWidth + 'px';
+                        this.element.style.height = boundedHeight + 'px';
+
+                        // Ensure content areas resize properly
+                        this.updateContentSize();
+                    });
+
+                    document.addEventListener('mouseup', () => {
+                        if (this.isResizing) {
+                            this.isResizing = false;
+                            resizeHandle.style.cursor = 'nw-resize';
+                            resizeHandle.style.background = 'rgba(108, 117, 125, 0.8)';
+                        }
+                    });
+                },
+
+                // Update content area sizes during resize
+                updateContentSize: function() {
+                    const content = this.element.querySelector('.control-content');
+                    if (content) {
+                        // Adjust content height to fit the resized control
+                        const headerHeight = 40; // Header is 40px
+                        const padding = 16; // Account for padding
+                        const controlHeight = this.element.offsetHeight;
+                        const availableHeight = controlHeight - headerHeight - padding;
+
+                        content.style.maxHeight = Math.max(100, availableHeight) + 'px';
+                    }
+                }
+            };
+
+            // Step 5: Initialize ContentsControl (new implementation based on Control class)
+            try {
+                const contentsControl = Object.create(Control);
+
+                // Configure for contents navigation
+                contentsControl.config = {
+                    icon: '☰',
+                    title: 'Contents',
+                    className: 'contents-control',
+                    defaultContent: 'No headings found',
+                    ariaLabel: 'Document Navigation',
+                    position: 'wnw'  // West-north-west positioning
+                };
+
+                // Override buildContent method for navigation functionality
+                contentsControl.buildContent = function() {
+                    const content = this.element.querySelector('.control-content');
+
+                    // Build navigation content from current DOM
+                    const allHeadings = document.querySelectorAll('h1, h2, h3');
+                    // Filter out headings that contain "Contents" or similar navigation-related text
+                    const headings = Array.from(allHeadings).filter(heading => {
+                        const text = heading.textContent.trim().toLowerCase();
+                        return !text.includes('contents') && !text.includes('table of contents') && !text.includes('navigation');
+                    });
+                    console.log("📋 Found headings for navigation:", headings.length);
+
+                    if (headings.length === 0) {
+                        content.innerHTML = '<p style="padding: 1rem; color: #666;">No headings found</p>';
+                    } else {
+                        let navHtml = '';
+                        headings.forEach((heading, index) => {
+                            if (!heading.id) {
+                                heading.id = `heading-${index + 1}`;
+                            }
+                            const level = parseInt(heading.tagName.substring(1));
+                            const indent = (level - 1) * 1;
+                            navHtml += `
+                                <a href="#${heading.id}"
+                                   style="display: block; padding: 0.5rem; margin-left: ${indent}rem;
+                                          text-decoration: none; color: #333; font-size: 0.9rem;
+                                          border-radius: 4px; cursor: pointer;"
+                                   onmouseover="this.style.backgroundColor='#f5f5f5'"
+                                   onmouseout="this.style.backgroundColor=''"
+                                   onclick="event.preventDefault(); document.getElementById('${heading.id}').scrollIntoView({behavior: 'smooth'}); if (window.innerWidth <= 768) setTimeout(() => contentsControl.collapse(), 500);">
+                                    ${heading.textContent.trim()}
+                                </a>
+                            `;
+                        });
+                        content.innerHTML = navHtml;
+                    }
+
+                    // Show panel
+                    this.expand();
+                };
+
+                // Initialize the ContentsControl
+                contentsControl.createControl();
+
+                // Make globally available for mobile collapse
+                window.contentsControl = contentsControl;
+            } catch (error) {
+                console.error("ContentsControl failed to initialize:", error);
+            }
+
+        });
+
+        // Handle CDN loading errors
+        window.addEventListener('load', function() {
+            if (window.markitectMarkedError) {
+                console.error("CDN library failed to load - network or firewall blocking marked.js");
+            }
+        });
+    </script>
+</body>
+</html>
\ No newline at end of file
diff --git a/relicts/StatusPsychadelic.html b/relicts/StatusPsychadelic.html
new file mode 100755
index 00000000..4a4f6e36
--- /dev/null
+++ b/relicts/StatusPsychadelic.html
@@ -0,0 +1,2316 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Changelog</title>
+    
+    <style>
+            body {
+                font-family: Georgia, Times New Roman, serif;
+                max-width: 650px;
+                margin: 0 auto;
+                padding: 2rem;
+                line-height: 1.6;
+                color: #333333;
+                background-color: #ffffff;
+            }
+            #markdown-content {
+                min-height: 200px;
+            }
+            h1, h2, h3, h4, h5, h6 {
+                color: #333333;
+                margin-top: 2rem;
+                margin-bottom: 1rem;
+            }
+            h1 {
+                text-align: center;
+                font-size: 2.2em;
+                border-bottom: 2px solid #333333;
+                padding-bottom: 0.5rem;
+            }
+            p {
+                text-align: justify;
+                margin-bottom: 1.2rem;
+            }
+            pre {
+                background-color: #f6f8fa;
+                color: #333333;
+                padding: 1rem;
+                border-radius: 6px;
+                overflow-x: auto;
+                border: 1px solid #d0d7de;
+            }
+            code {
+                background-color: #f6f8fa;
+                color: #333333;
+                padding: 0.2em 0.4em;
+                border-radius: 3px;
+                font-size: 0.9em;
+            }
+            pre code {
+                background: none;
+                padding: 0;
+            }
+            blockquote {
+                border-left: 4px solid #dfe2e5;
+                margin: 0;
+                padding-left: 1rem;
+                color: #6a737d;
+            }
+            table {
+                font-size: 0.85em;
+                border-collapse: collapse;
+                margin: 1rem 0;
+                width: 100%;
+                border: 1px solid #d0d7de;
+            }
+            th, td {
+                font-size: inherit;
+                border: 1px solid #d0d7de;
+                padding: 0.5rem;
+                text-align: left;
+            }
+            th {
+                background-color: #f6f8fa;
+                font-weight: 600;
+            }
+            a {
+                color: #777777;
+                text-decoration: underline;
+            }
+            a:hover {
+                color: #999999;
+            }
+            .markitect-edit-mode .ui-edit-floater-panel {
+                background: linear-gradient(45deg, #ff6b35, #f7931e, #ffd23f, #06ffa5);
+                border: 1px solid #ff1493;
+                box-shadow: 0 4px 12px rgba(255,20,147,0.4);
+                color: #ffffff;
+            }
+            .markitect-edit-mode .ui-edit-floater-header {
+                color: #ffffff;
+            }
+            .markitect-edit-mode .ui-edit-floater-header h3 {
+                color: #ffffff;
+            }
+            .markitect-edit-mode .ui-edit-inline-panel {
+                background: linear-gradient(45deg, #ff6b35, #f7931e, #ffd23f, #06ffa5);
+                border: 1px solid #ff1493;
+                box-shadow: 0 2px 8px rgba(255,20,147,0.4);
+                color: #ffffff;
+                border-radius: 8px;
+                padding: 12px;
+                margin: 8px 0;
+            }
+            .markitect-edit-mode .ui-edit-button {
+                background: rgba(255,255,255,0.2);
+                color: #ffffff;
+                border: 1px solid #ff1493;
+                padding: 8px 12px;
+                border-radius: 4px;
+                cursor: pointer;
+                font-size: 12px;
+                min-width: 70px;
+                font-weight: 500;
+                transition: all 0.2s;
+            }
+            .markitect-edit-mode .ui-edit-button:hover {
+                background: rgba(255,20,147,0.3);
+            }
+            .markitect-edit-mode .ui-edit-button:active,
+            .markitect-edit-mode .ui-edit-button.active {
+                background: rgba(255,20,147,0.5);
+            }
+            .markitect-edit-mode .ui-edit-button-accept {
+                background: #4caf50;
+                color: white;
+            }
+            .markitect-edit-mode .ui-edit-button-accept:hover {
+                background: #388e3c;
+            }
+            .markitect-edit-mode .ui-edit-button-cancel {
+                background: #f44336;
+                color: white;
+            }
+            .markitect-edit-mode .ui-edit-button-cancel:hover {
+                background: #d32f2f;
+            }
+            .markitect-edit-mode .ui-edit-button-reset {
+                background: #ff9800;
+                color: white;
+            }
+            .markitect-edit-mode .ui-edit-button-reset:hover {
+                background: #f57c00;
+            }
+            .markitect-edit-mode .ui-edit-button-secondary {
+                background: #6c757d;
+                color: white;
+            }
+            .markitect-edit-mode .ui-edit-button-secondary:hover {
+                background: #545b62;
+            }
+            .markitect-edit-mode .ui-edit-section-frame {
+                border: 2px solid #ff1493;
+                box-shadow: 0 0 0 3px #ff149333;
+            }
+            .markitect-edit-mode .ui-edit-textarea {
+                border: 1px solid #ff1493;
+                color: #ffffff;
+                background: rgba(255,255,255,0.2);
+            }
+            .markitect-edit-mode .ui-edit-textarea:focus {
+                border-color: #ff1493;
+                box-shadow: 0 0 0 2px #ff149333;
+            }
+            .markitect-edit-mode .ui-edit-modal-overlay {
+                position: fixed;
+                top: 0;
+                left: 0;
+                width: 100%;
+                height: 100%;
+                background: rgba(0, 0, 0, 0.5);
+                z-index: 999;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                opacity: 0;
+                visibility: hidden;
+                transition: opacity 0.3s, visibility 0.3s;
+            }
+            .markitect-edit-mode .ui-edit-modal-overlay.active {
+                opacity: 1;
+                visibility: visible;
+            }
+            .markitect-edit-mode .ui-edit-modal {
+                background: linear-gradient(45deg, #ff6b35, #f7931e, #ffd23f, #06ffa5);
+                border: 1px solid #ff1493;
+                box-shadow: 0 8px 32px rgba(255,20,147,0.4);
+                color: #ffffff;
+                border-radius: 8px;
+                max-width: 600px;
+                max-height: 80vh;
+                width: 90%;
+                overflow: hidden;
+                transform: scale(0.9) translateY(-20px);
+                transition: transform 0.3s;
+            }
+            .markitect-edit-mode .ui-edit-modal-overlay.active .ui-edit-modal {
+                transform: scale(1) translateY(0);
+            }
+            .markitect-edit-mode .ui-edit-modal-header {
+                padding: 20px 24px 16px;
+                border-bottom: 1px solid #ff1493;
+                display: flex;
+                justify-content: space-between;
+                align-items: center;
+            }
+            .markitect-edit-mode .ui-edit-modal-title {
+                margin: 0;
+                font-size: 18px;
+                font-weight: 600;
+                color: #ffffff;
+            }
+            .markitect-edit-mode .ui-edit-modal-close {
+                background: none;
+                border: none;
+                font-size: 24px;
+                cursor: pointer;
+                color: #ffffff;
+                padding: 4px;
+                border-radius: 4px;
+                width: 32px;
+                height: 32px;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                transition: background-color 0.2s;
+            }
+            .markitect-edit-mode .ui-edit-modal-close:hover {
+                background: rgba(255,20,147,0.3);
+            }
+            .markitect-edit-mode .ui-edit-modal-body {
+                padding: 20px 24px;
+                overflow-y: auto;
+                max-height: 60vh;
+            }
+            .markitect-edit-mode .ui-edit-modal-content {
+                white-space: pre-line;
+                line-height: 1.5;
+                font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif;
+                font-size: 14px;
+            }
+            .markitect-edit-mode .ui-edit-modal-section {
+                margin-bottom: 16px;
+            }
+            .markitect-edit-mode .ui-edit-modal-section:last-child {
+                margin-bottom: 0;
+            }
+            .markitect-edit-mode .ui-edit-modal-section-title {
+                font-weight: 600;
+                margin-bottom: 8px;
+                color: #ffffff;
+            }
+            .markitect-edit-mode .ui-edit-modal-footer {
+                padding: 16px 24px 20px;
+                border-top: 1px solid #ff1493;
+                text-align: right;
+            }
+
+            /* Confirmation Dialog Styles */
+            .markitect-edit-mode .ui-edit-confirmation-modal {
+                max-width: 500px;
+            }
+            .markitect-edit-mode .ui-edit-confirmation-content {
+                font-size: 16px;
+                line-height: 1.5;
+                margin-bottom: 24px;
+                color: #ffffff;
+            }
+            .markitect-edit-mode .ui-edit-confirmation-warning {
+                background: linear-gradient(45deg, #ffa500, #ff8c00);
+                border: 1px solid #ff1493;
+                color: #ffffff;
+                padding: 12px 16px;
+                border-radius: 6px;
+                margin: 16px 0;
+                font-size: 14px;
+            }
+            .markitect-edit-mode .ui-edit-confirmation-buttons {
+                display: flex;
+                gap: 12px;
+                justify-content: flex-end;
+            }
+            .markitect-edit-mode .ui-edit-button-confirm {
+                background: linear-gradient(45deg, #ff0066, #cc0044);
+                color: white;
+                border: none;
+                padding: 10px 20px;
+                border-radius: 6px;
+                font-size: 14px;
+                font-weight: 500;
+                cursor: pointer;
+                transition: background-color 0.2s, transform 0.1s;
+            }
+            .markitect-edit-mode .ui-edit-button-confirm:hover {
+                background: linear-gradient(45deg, #ff3388, #dd1155);
+                transform: translateY(-1px);
+            }
+            .markitect-edit-mode .ui-edit-button-confirm:active {
+                transform: translateY(0);
+            }
+            .markitect-edit-mode .ui-edit-button-confirm:focus {
+                outline: 2px solid #ff1493;
+                outline-offset: 2px;
+            }
+            .markitect-edit-mode .ui-edit-button-cancel {
+                background: linear-gradient(45deg, #8a2be2, #4b0082);
+                color: white;
+                border: none;
+                padding: 10px 20px;
+                border-radius: 6px;
+                font-size: 14px;
+                font-weight: 500;
+                cursor: pointer;
+                transition: background-color 0.2s, transform 0.1s;
+            }
+            .markitect-edit-mode .ui-edit-button-cancel:hover {
+                background: linear-gradient(45deg, #9932cc, #6a1a9a);
+                transform: translateY(-1px);
+            }
+            .markitect-edit-mode .ui-edit-button-cancel:active {
+                transform: translateY(0);
+            }
+            .markitect-edit-mode .ui-edit-button-cancel:focus {
+                outline: 2px solid #ff1493;
+                outline-offset: 2px;
+            }
+
+            /* Document Scroll Indicators */
+            .ui-scroll-indicator {
+                position: fixed;
+                left: 50%;
+                transform: translateX(-50%);
+                width: 60px;
+                height: 30px;
+                background: linear-gradient(45deg, #ff6b35, #f7931e, #ffd23f, #06ffa5);
+                border: 1px solid #ff1493;
+                border-radius: 15px;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                cursor: pointer;
+                opacity: 0;
+                visibility: hidden;
+                transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.2s ease, background-color 0.2s ease;
+                z-index: 1000;
+                box-shadow: 0 4px 12px rgba(255,20,147,0.4);
+            }
+            .ui-scroll-indicator:hover {
+                transform: translateX(-50%) scale(1.05);
+            }
+            .ui-scroll-indicator:not(.disabled):hover {
+                background: rgba(255,20,147,0.3);
+            }
+            .ui-scroll-indicator.active {
+                opacity: 0.9;
+                visibility: visible;
+            }
+            .ui-scroll-indicator.disabled {
+                background: rgba(255,20,147,0.5);
+                cursor: not-allowed;
+                opacity: 0.6;
+            }
+            .ui-scroll-indicator.disabled:hover {
+                transform: translateX(-50%);
+                background: rgba(255,20,147,0.5);
+            }
+            .ui-scroll-indicator-up {
+                top: 20px;
+            }
+            .ui-scroll-indicator-down {
+                bottom: 20px;
+            }
+            .ui-scroll-indicator::before {
+                content: '';
+                width: 0;
+                height: 0;
+                border-style: solid;
+                transition: border-color 0.2s ease;
+            }
+            .ui-scroll-indicator-up::before {
+                border-left: 8px solid transparent;
+                border-right: 8px solid transparent;
+                border-bottom: 12px solid #ffffff;
+            }
+            .ui-scroll-indicator-down::before {
+                border-left: 8px solid transparent;
+                border-right: 8px solid transparent;
+                border-top: 12px solid #ffffff;
+            }
+            .ui-scroll-indicator.disabled.ui-scroll-indicator-up::before {
+                border-bottom-color: linear-gradient(45deg, #8a2be2, #4b0082);
+            }
+            .ui-scroll-indicator.disabled.ui-scroll-indicator-down::before {
+                border-top-color: linear-gradient(45deg, #8a2be2, #4b0082);
+            }
+
+            /* Insert Mode Specific Styles */
+            .markitect-insert-mode .ui-edit-floater-panel {
+                background: linear-gradient(45deg, #ff6b35, #f7931e, #ffd23f, #06ffa5);
+                border: 1px solid #ff1493;
+                box-shadow: 0 4px 12px rgba(255,20,147,0.4);
+                color: #ffffff;
+            }
+            .markitect-insert-mode .ui-edit-floater-header {
+                color: #ffffff;
+            }
+            .markitect-insert-mode .ui-edit-floater-header h3 {
+                color: #ffffff;
+            }
+            .markitect-insert-mode .ui-edit-inline-panel {
+                background: linear-gradient(45deg, #ff6b35, #f7931e, #ffd23f, #06ffa5);
+                border: 1px solid #ff1493;
+                box-shadow: 0 2px 8px rgba(255,20,147,0.4);
+                color: #ffffff;
+                border-radius: 8px;
+                padding: 12px;
+                margin: 8px 0;
+            }
+            .markitect-insert-mode .ui-insert-protected-panel {
+                border-left: 4px solid #ff9800;
+            }
+            .markitect-insert-mode .ui-insert-heading-display {
+                font-family: 'SF Mono', Monaco, 'Cascadia Code', monospace;
+                font-size: 14px;
+                font-weight: bold;
+                padding: 8px 12px;
+                background: linear-gradient(45deg, #ffa500, #ff8c00);
+                border: 1px solid #ff1493;
+                border-radius: 4px;
+                border-left: 4px solid #007bff;
+                color: #ffffff;
+                margin-bottom: 8px;
+            }
+            .markitect-insert-mode .ui-insert-content-editor {
+                border: 1px solid #ff1493;
+                color: #ffffff;
+                background: rgba(255,255,255,0.2);
+            }
+            .markitect-insert-mode .ui-insert-content-editor:focus {
+                border-color: #ff1493;
+                box-shadow: 0 0 0 2px #ff149333;
+            }
+            .markitect-insert-mode .ui-edit-button {
+                background: rgba(255,255,255,0.2);
+                color: #ffffff;
+                border: 1px solid #ff1493;
+                padding: 8px 12px;
+                border-radius: 4px;
+                cursor: pointer;
+                font-size: 12px;
+                min-width: 70px;
+                font-weight: 500;
+                transition: all 0.2s;
+            }
+            .markitect-insert-mode .ui-edit-button:hover {
+                background: rgba(255,20,147,0.3);
+            }
+            .markitect-insert-mode .ui-edit-button:active,
+            .markitect-insert-mode .ui-edit-button.active {
+                background: rgba(255,20,147,0.5);
+            }
+            .markitect-insert-mode .ui-edit-button-accept {
+                background: #4caf50;
+                color: white;
+            }
+            .markitect-insert-mode .ui-edit-button-accept:hover {
+                background: #388e3c;
+            }
+            .markitect-insert-mode .ui-edit-button-cancel {
+                background: #f44336;
+                color: white;
+            }
+            .markitect-insert-mode .ui-edit-button-cancel:hover {
+                background: #d32f2f;
+            }
+            .markitect-insert-mode .ui-edit-button-reset {
+                background: #ff9800;
+                color: white;
+            }
+            .markitect-insert-mode .ui-edit-button-reset:hover {
+                background: #f57c00;
+            }
+            .markitect-insert-mode .ui-edit-section-frame {
+                border: 2px solid #ff1493;
+                box-shadow: 0 0 0 3px #ff149333;
+            }
+
+            /* Modal Overlay and Dialog Styles for Insert Mode */
+            .markitect-insert-mode .ui-edit-modal-overlay {
+                position: fixed;
+                top: 0;
+                left: 0;
+                width: 100%;
+                height: 100%;
+                background: rgba(0, 0, 0, 0.5);
+                z-index: 999;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                opacity: 0;
+                visibility: hidden;
+                transition: opacity 0.3s, visibility 0.3s;
+            }
+            .markitect-insert-mode .ui-edit-modal-overlay.active {
+                opacity: 1;
+                visibility: visible;
+            }
+            .markitect-insert-mode .ui-edit-modal {
+                background: linear-gradient(45deg, #ff6b35, #f7931e, #ffd23f, #06ffa5);
+                border: 1px solid #ff1493;
+                box-shadow: 0 8px 32px rgba(255,20,147,0.4);
+                color: #ffffff;
+                border-radius: 8px;
+                max-width: 600px;
+                max-height: 80vh;
+                width: 90%;
+                overflow: hidden;
+                transform: scale(0.9) translateY(-20px);
+                transition: transform 0.3s;
+            }
+            .markitect-insert-mode .ui-edit-modal-overlay.active .ui-edit-modal {
+                transform: scale(1) translateY(0);
+            }
+            .markitect-insert-mode .ui-edit-modal-header {
+                padding: 20px 24px 16px;
+                border-bottom: 1px solid #ff1493;
+                display: flex;
+                justify-content: space-between;
+                align-items: center;
+            }
+            .markitect-insert-mode .ui-edit-modal-title {
+                margin: 0;
+                font-size: 18px;
+                font-weight: 600;
+                color: #ffffff;
+            }
+            .markitect-insert-mode .ui-edit-modal-close {
+                background: transparent;
+                border: none;
+                font-size: 24px;
+                cursor: pointer;
+                color: #ffffff;
+                padding: 0;
+                width: 32px;
+                height: 32px;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                border-radius: 4px;
+                transition: background-color 0.2s;
+            }
+            .markitect-insert-mode .ui-edit-modal-close:hover {
+                background: rgba(255,20,147,0.3);
+            }
+            .markitect-insert-mode .ui-edit-modal-body {
+                padding: 20px 24px;
+                max-height: 400px;
+                overflow-y: auto;
+                color: #ffffff;
+            }
+            .markitect-insert-mode .ui-edit-modal-section {
+                margin-bottom: 8px;
+                color: #ffffff;
+            }
+            .markitect-insert-mode .ui-edit-modal-footer {
+                padding: 16px 24px 20px;
+                border-top: 1px solid #ff1493;
+                text-align: right;
+            }
+
+            /* Confirmation Dialog Styles for Insert Mode */
+            .markitect-insert-mode .ui-edit-confirmation-modal {
+                max-width: 500px;
+            }
+            .markitect-insert-mode .ui-edit-confirmation-content {
+                font-size: 16px;
+                line-height: 1.5;
+                margin-bottom: 24px;
+                color: #ffffff;
+            }
+            .markitect-insert-mode .ui-edit-confirmation-warning {
+                background: linear-gradient(45deg, #ffa500, #ff8c00);
+                color: #ffffff;
+                border: 1px solid #ff1493;
+                border-radius: 6px;
+                padding: 12px 16px;
+                margin: 16px 0;
+                font-size: 14px;
+                line-height: 1.4;
+            }
+            .markitect-insert-mode .ui-edit-confirmation-buttons {
+                display: flex;
+                gap: 12px;
+                justify-content: flex-end;
+                margin-top: 24px;
+            }
+            .markitect-insert-mode .ui-edit-button-confirm {
+                background: #dc3545;
+                color: white;
+                border: 1px solid #dc3545;
+                padding: 10px 20px;
+                border-radius: 6px;
+                font-size: 14px;
+                font-weight: 500;
+                cursor: pointer;
+                transition: all 0.2s;
+            }
+            .markitect-insert-mode .ui-edit-button-confirm:hover {
+                background: #c82333;
+                border-color: #bd2130;
+            }
+            .markitect-insert-mode .ui-edit-button-cancel {
+                background: rgba(255,255,255,0.2);
+                color: #ffffff;
+                border: 1px solid #ff1493;
+                padding: 10px 20px;
+                border-radius: 6px;
+                font-size: 14px;
+                font-weight: 500;
+                cursor: pointer;
+                transition: all 0.2s;
+            }
+            .markitect-insert-mode .ui-edit-button-cancel:hover {
+                background: rgba(255,20,147,0.3);
+            }
+            </style>
+
+    <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"
+            onload="window.markitectMarkedLoaded = true"
+            onerror="window.markitectMarkedError = true"></script>
+</head>
+<body class="markitect-edit-mode">
+
+    <div id="markdown-content"></div>
+
+    <script>
+        const markdownContent = "# Changelog\n\nAll notable changes to this project will be documented in this file.\n\nThe format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),\nand this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).\n\n## [Unreleased]\n\n## [0.6.0] - 2025-10-28\n\n### Added\n- **Custom Status Modal System**: Professional theme-consistent status dialogs replacing browser alerts with proper branding and accessibility\n- **HTML Generation Dogtag**: Automatic attribution with timestamp and username linking for generated HTML documents\n- **Enhanced Link Navigation**: All document links now open in new tabs without triggering edit mode for improved user experience\n- **Comprehensive UI Framework Documentation**: Complete guide (UserInterfaceFramework.md) for consistent UI development patterns\n- **Database Integration**: Added store_document method to CleanDocumentManager with proper front matter parsing\n- **Enhanced AST Processing**: Improved title extraction from front matter and heading detection with cache file generation\n\n### Changed\n- **Complete Document Manager Cleanup**: Removed 2000+ lines of legacy code while maintaining full backward compatibility\n- **Clean Architecture Implementation**: DocumentManager now extends CleanDocumentManager with clean wrapper pattern\n- **Improved Error Handling**: Enhanced validation and graceful error recovery throughout the system\n- **Standardized CSS Naming**: Consistent class naming conventions across all UI components\n\n### Fixed\n- **Test Suite Compatibility**: Updated all tests to work with clean implementation architecture\n- **JavaScript Syntax Issues**: Resolved template literal and string escaping problems in generated HTML\n- **Link Behavior**: Fixed issue where document links were incorrectly triggering edit mode\n- **Front Matter Parsing**: Proper integration with FrontMatterParser for metadata extraction\n\n### Technical\n- Added --nodogtag CLI option for clean output when attribution is not desired\n- Enhanced ingest_file method with proper title extraction from front matter and headings\n- Implemented theme-aware modal overlay patterns with proper CSS styling\n- Fixed CSS escape sequences and JavaScript syntax validation issues\n\n## [0.5.0] - 2025-10-26\n\n### Added\n- **Clean TDD-Driven Editor Architecture**: Complete rewrite with object-oriented JavaScript architecture featuring Section, SectionManager, and DOMRenderer classes\n- **Enhanced Test Framework**: Comprehensive testing framework with clean separation of concerns for robust development\n- **Multiple Concurrent Section Editing**: Support for editing multiple sections simultaneously with intelligent management\n- **Intelligent Section Splitting**: Advanced heading detection and section management capabilities\n- **Four-Layer Content Management**: Sophisticated content state management (original, current, pending, editing layers)\n- **Enhanced Status Dialog**: Repository info display showing version, git commit status, and actual save filename\n- **Elegant Slide-in Control Panel**: Floating control panel for edit mode with improved UX\n- **Intelligent Auto-sizing Textarea**: Optimal editing experience with smart textarea resizing\n- **Enhanced Empty Line Preservation**: Better markdown structure preservation with automatic paragraph separation\n\n### Fixed\n- **Textarea Sizing and Font Preservation**: Resolved sizing issues and maintained consistent font rendering\n- **Markdown Structure Preservation**: Fixed roundtrip formatting issues in save functionality\n- **Section Duplication Prevention**: Eliminated duplicate sections when saving edited content\n- **Section Position Preservation**: Prevented unwanted section jumping during editing\n- **CSS Embedding Issues**: Resolved import errors in HTML template generation\n- **Control Panel UX**: Hidden control ribbon when panel is expanded for cleaner interface\n\n### Changed\n- **Action Semantics**: Proper implementation of Accept, Cancel, and Reset operations\n- **Global Reset Functionality**: Enhanced reset capabilities across the editor\n- **Makefile Organization**: Reorganized installation targets for better user experience\n\n### Technical Improvements\n- Complete legacy editor system replacement\n- Test-driven development approach implementation\n- Enhanced UI/UX with better section positioning\n- Improved content management workflow\n\n## [0.4.0] - 2025-10-25\n\n### Added\n- feat: add comprehensive testing and error tracking for edit mode\n\n### Fixed\n- fix: resolve md-render --edit functionality and add enhanced version tracking\n- fix: resolve critical JavaScript syntax errors in md-render --edit\n- fix: resolve md-ingest Path object conversion error\n\n### Other\n- chore: clean up repository documentation files for release\n\n## [0.3.0] - 2025-10-25\n\n### Added\n- **Kaizen-agentic Framework Integration**: Integrated capability submodule for enhanced development workflow\n- **Test Reorganization System**: Reorganized tests by capability with improved modularity\n- **Capability Inclusion Management**: Comprehensive system for managing capability inclusions\n- **Todofile System**: Implemented todofile system to replace NEXT.md for better task tracking\n\n### Changed\n- **Directory Organization**: Logical separation and reorganization of project structure\n- **Historical File Organization**: Cleaner structure with better file organization\n\n## [0.2.0] - 2025-10-20\n\n### Added\n- **GraphQL Interface**: Advanced querying capabilities with full GraphQL implementation\n- **Full-text Search**: FTS5 backend integration for powerful search functionality\n- **Plugin Architecture**: Extensible framework with comprehensive plugin support\n- **Query Paradigms**: 14 different query paradigms for flexible data access\n- **Cost Management**: Activity tracking and resource cost management\n- **Template Rendering**: Template system with validation capabilities\n- **CLI Consolidation**: Unified command-line interface\n- **Production Asset Management**: Content-addressable storage system\n- **17 Kaizen-agentic Agents**: Integrated development agent ecosystem\n\n### Changed\n- **Performance Optimization**: 60-85% performance improvement through system optimization\n- **Error Handling**: Enterprise-grade error handling and recovery mechanisms\n- **Resource Management**: Memory-efficient and scalable architecture\n\n### Fixed\n- **Cross-platform Validation**: Comprehensive validation for Unix/Windows/macOS\n- **Type Safety**: Enhanced type safety and security validation\n- **Test Coverage**: 1983/1983 tests passing (100% success rate)\n\n## [0.1.0] - 2025-10-15\n\n### Added\n- **Development Infrastructure**: Comprehensive Makefile for development workflow\n- **Project Documentation**: ProjectStatusDigest.md and ProjectDiary.md for tracking\n- **TDD Workspace System**: Structured Test-Driven Development workflow implementation\n- **Issue Management**: Gitea integration for issue tracking and management\n- **Virtual Environment Management**: Enhanced venv detection and shell activation\n- **Wiki Integration**: Submodule tracking for project documentation\n- **Core Repository Setup**: Initial project structure and configuration\n\n### Changed\n- **Build System**: Enhanced build targets with venv Python and PYTHONPATH support\n- **Target Naming**: Renamed workspace targets to TDD Workspace with tdd- prefix\n\nxxx\n\n\n---\n*-- html from markdown by <a href=\"https://coulomb.social/open/MarkiTect\" target=\"_blank\">MarkiTect</a> on 2025-10-28 23:52:58 by <a href=\"https://coulomb.social/open/worsch\" target=\"_blank\">worsch</a>*";
+        
+        const MARKITECT_EDIT_MODE = true;
+        const MARKITECT_EDITOR_CONFIG = {
+            mode: 'edit',
+            theme: 'github',
+            keyboardShortcuts: true,
+            autosave: false,
+            sections: true,
+            originalFilename: 'CHANGELOG',
+            version: 'Markitect v0.5.0.dev+dd3a000',
+            repoName: 'Markitect'
+        };
+
+        // Make config available globally
+        window.editorConfig = MARKITECT_EDITOR_CONFIG;
+
+        
+        // Clean Editor Architecture
+        /**
+ * Test-Driven Section Editor Implementation
+ *
+ * A clean, object-oriented approach to handling section editing
+ * that can be tested independently of the DOM.
+ */
+
+// Enums for clear state management
+const EditState = Object.freeze({
+    ORIGINAL: 'original',
+    EDITING: 'editing',
+    MODIFIED: 'modified',
+    SAVED: 'saved'
+});
+
+const SectionType = Object.freeze({
+    HEADING: 'heading',
+    PARAGRAPH: 'paragraph',
+    LIST: 'list',
+    CODE: 'code',
+    BLOCKQUOTE: 'blockquote'
+});
+
+/**
+ * Section class - Core business logic for a single editable section
+ */
+class Section {
+    constructor(id, originalMarkdown, sectionType = SectionType.PARAGRAPH) {
+        this.id = id;
+        this.originalMarkdown = originalMarkdown;
+        this.currentMarkdown = originalMarkdown;
+        this.editingMarkdown = null;
+        this.pendingMarkdown = null;
+        this.sectionType = sectionType;
+        this.headingLevel = Section.detectHeadingLevel(originalMarkdown);
+        this.state = EditState.ORIGINAL;
+        this.domElement = null;
+        this.lastSaved = null;
+        this.created = new Date();
+    }
+
+    startEdit() {
+        if (this.state === EditState.EDITING) {
+            throw new Error(`Section ${this.id} is already being edited`);
+        }
+        this.editingMarkdown = this.pendingMarkdown || this.currentMarkdown;
+        this.state = EditState.EDITING;
+        return this.editingMarkdown;
+    }
+
+    updateContent(markdown) {
+        if (this.state !== EditState.EDITING) {
+            throw new Error(`Section ${this.id} is not in editing state`);
+        }
+        this.editingMarkdown = markdown;
+    }
+
+    acceptChanges() {
+        if (this.state !== EditState.EDITING) {
+            throw new Error(`Section ${this.id} is not in editing state`);
+        }
+        this.currentMarkdown = this.editingMarkdown;
+        this.editingMarkdown = null;
+        this.pendingMarkdown = null;
+        this.state = EditState.SAVED;
+        this.lastSaved = new Date();
+        return this.currentMarkdown;
+    }
+
+    cancelChanges() {
+        if (this.state !== EditState.EDITING) {
+            throw new Error(`Section ${this.id} is not in editing state`);
+        }
+        this.editingMarkdown = null;
+        if (this.pendingMarkdown !== null) {
+            this.state = EditState.MODIFIED;
+            return this.pendingMarkdown;
+        } else if (this.lastSaved !== null) {
+            this.state = EditState.SAVED;
+            return this.currentMarkdown;
+        } else {
+            this.state = this.hasChanges() ? EditState.MODIFIED : EditState.ORIGINAL;
+            return this.currentMarkdown;
+        }
+    }
+
+    resetToOriginal() {
+        this.currentMarkdown = this.originalMarkdown;
+        this.editingMarkdown = null;
+        this.pendingMarkdown = null;
+        this.lastSaved = null;
+        this.state = EditState.ORIGINAL;
+        return this.originalMarkdown;
+    }
+
+    stopEditing() {
+        if (this.state !== EditState.EDITING) {
+            return this.state;
+        }
+
+        // If we have editing changes that differ from current content, preserve them as pending
+        if (this.editingMarkdown && this.editingMarkdown !== this.currentMarkdown) {
+            this.pendingMarkdown = this.editingMarkdown;
+            this.state = EditState.MODIFIED; // Has pending changes
+        } else {
+            // No changes made during this edit session
+            this.pendingMarkdown = null;
+            if (this.lastSaved !== null) {
+                this.state = EditState.SAVED;
+            } else {
+                this.state = this.hasChanges() ? EditState.MODIFIED : EditState.ORIGINAL;
+            }
+        }
+
+        this.editingMarkdown = null;
+        return this.state;
+    }
+
+    hasChanges() {
+        return this.currentMarkdown !== this.originalMarkdown;
+    }
+
+    isEditing() {
+        return this.state === EditState.EDITING;
+    }
+
+    getStatus() {
+        return {
+            id: this.id,
+            state: this.state,
+            hasChanges: this.hasChanges(),
+            isEditing: this.isEditing(),
+            contentLength: this.currentMarkdown.length,
+            lastSaved: this.lastSaved,
+            sectionType: this.sectionType
+        };
+    }
+
+    static generateId(content, position) {
+        const str = content.substring(0, 100) + position.toString();
+        let hash = 0;
+        for (let i = 0; i < str.length; i++) {
+            const char = str.charCodeAt(i);
+            hash = ((hash << 5) - hash) + char;
+            hash = hash & hash;
+        }
+        return `section_${Math.abs(hash)}_${position}`;
+    }
+
+    static detectType(markdown) {
+        const trimmed = markdown.trim();
+        if (trimmed.startsWith('#')) return SectionType.HEADING;
+        if (trimmed.startsWith('```')) return SectionType.CODE;
+        if (trimmed.startsWith('>')) return SectionType.BLOCKQUOTE;
+        if (trimmed.startsWith('-') || trimmed.startsWith('*') || /^\d+\./.test(trimmed)) {
+            return SectionType.LIST;
+        }
+        return SectionType.PARAGRAPH;
+    }
+
+    static detectHeadingLevel(markdown) {
+        const trimmed = markdown.trim();
+        const match = trimmed.match(/^(#{1,6})\s/);
+        return match ? match[1].length : null;
+    }
+
+    isHeading() {
+        return this.sectionType === SectionType.HEADING;
+    }
+
+    isProtectedHeading() {
+        if (!this.isHeading()) return false;
+        // Check if we're in insert mode and if this heading level is protected
+        const config = window.editorConfig || {};
+        const restrictedLevels = config.restrictedHeadingLevels || [];
+        return config.mode === 'insert' && restrictedLevels.includes(this.headingLevel);
+    }
+
+    getHeadingText() {
+        if (!this.isHeading()) return null;
+        // Extract first line for heading text
+        const firstLine = this.originalMarkdown.trim().split('\n')[0];
+        const match = firstLine.match(/^(#{1,6})\s+(.+)$/);
+        return match ? match[2] : null;
+    }
+
+    getHeadingContent() {
+        if (!this.isHeading()) return this.currentMarkdown;
+        const lines = this.currentMarkdown.split('\n');
+        // Return content after the heading line
+        return lines.slice(1).join('\n');
+    }
+}
+
+/**
+ * SectionManager class - Manages the collection of sections
+ */
+class SectionManager {
+    constructor() {
+        this.sections = new Map();
+        // Note: Removed single editingSection tracking to allow multiple concurrent edits
+        this.listeners = new Map();
+    }
+
+    on(event, callback) {
+        if (!this.listeners.has(event)) {
+            this.listeners.set(event, []);
+        }
+        this.listeners.get(event).push(callback);
+    }
+
+    emit(event, data) {
+        if (this.listeners.has(event)) {
+            this.listeners.get(event).forEach(callback => callback(data));
+        }
+    }
+
+    createSectionsFromMarkdown(markdownContent) {
+        const lines = markdownContent.split('\n');
+        const sections = [];
+        let currentSection = '';
+        let position = 0;
+
+        for (let i = 0; i < lines.length; i++) {
+            const line = lines[i];
+            const isHeading = /^#{1,6}\s/.test(line);
+            const isNewParagraph = line.trim() && i > 0 && !lines[i-1].trim();
+            const isNewSection = isHeading || isNewParagraph;
+
+            if (isNewSection && currentSection.trim()) {
+                const sectionId = Section.generateId(currentSection, position);
+                const sectionType = Section.detectType(currentSection);
+                const section = new Section(sectionId, currentSection.trim(), sectionType);
+                sections.push(section);
+                this.sections.set(sectionId, section);
+                position++;
+                currentSection = line;
+            } else {
+                if (currentSection) currentSection += '\n';
+                currentSection += line;
+            }
+        }
+
+        if (currentSection.trim()) {
+            const sectionId = Section.generateId(currentSection, position);
+            const sectionType = Section.detectType(currentSection);
+            const section = new Section(sectionId, currentSection.trim(), sectionType);
+            sections.push(section);
+            this.sections.set(sectionId, section);
+        }
+
+        this.emit('sections-created', { sections, count: sections.length });
+        return sections;
+    }
+
+    startEditing(sectionId) {
+        const section = this.sections.get(sectionId);
+        if (!section) {
+            throw new Error(`Section ${sectionId} not found`);
+        }
+
+        // Check if section is already being edited
+        if (section.isEditing()) {
+            console.log('Section already in editing state:', sectionId);
+            return section.editingMarkdown;
+        }
+
+        const content = section.startEdit();
+        // Note: No longer tracking single editingSection - allowing multiple
+        this.emit('edit-started', { sectionId, content, section: section.getStatus() });
+        return content;
+    }
+
+    updateContent(sectionId, markdown) {
+        const section = this.sections.get(sectionId);
+        if (!section) {
+            throw new Error(`Section ${sectionId} not found`);
+        }
+        section.updateContent(markdown);
+        this.emit('content-updated', { sectionId, markdown, section: section.getStatus() });
+    }
+
+    acceptChanges(sectionId) {
+        const section = this.sections.get(sectionId);
+        if (!section) {
+            throw new Error(`Section ${sectionId} not found`);
+        }
+
+        // For protected headings in insert mode, validate that heading hasn't changed
+        if (section.isProtectedHeading()) {
+            const originalHeadingLine = section.originalMarkdown.split('\n')[0];
+            const newHeadingLine = section.editingMarkdown.split('\n')[0];
+            if (originalHeadingLine !== newHeadingLine) {
+                throw new Error(`Cannot modify protected heading in insert mode. Heading level ${section.headingLevel} is read-only.`);
+            }
+        }
+
+        // Check if the edited content contains new headings that would create splits
+        const newContent = section.editingMarkdown;
+        const originalContent = section.originalMarkdown;
+        const shouldSplit = this.checkForSectionSplits(newContent, originalContent);
+
+        if (shouldSplit) {
+            // Handle section splitting
+            this.handleSectionSplit(sectionId, newContent);
+        } else {
+            // Normal accept without splitting
+            const content = section.acceptChanges();
+            // Note: No longer tracking single editingSection
+            this.emit('changes-accepted', { sectionId, content, section: section.getStatus() });
+        }
+
+        return section.currentMarkdown;
+    }
+
+    checkForSectionSplits(content, originalContent) {
+        if (!content) return false;
+
+        // Split by lines and check for headings
+        const lines = content.split('\n');
+        const originalLines = originalContent ? originalContent.split('\n') : [];
+
+        let newHeadingCount = 0;
+        let originalHeadingCount = 0;
+
+        // Count headings in new content
+        for (const line of lines) {
+            if (/^#{1,6}\s/.test(line.trim())) {
+                newHeadingCount++;
+            }
+        }
+
+        // Count headings in original content
+        for (const line of originalLines) {
+            if (/^#{1,6}\s/.test(line.trim())) {
+                originalHeadingCount++;
+            }
+        }
+
+        // Split if:
+        // 1. We have multiple headings now, OR
+        // 2. We added headings where there were none before, OR
+        // 3. We have more headings than we started with
+        return newHeadingCount > 1 ||
+               (originalHeadingCount === 0 && newHeadingCount > 0) ||
+               newHeadingCount > originalHeadingCount;
+    }
+
+    handleSectionSplit(originalSectionId, content) {
+        console.log('Splitting section:', originalSectionId);
+
+        const originalSection = this.sections.get(originalSectionId);
+        if (!originalSection) return;
+
+        // Accept the current changes first
+        originalSection.acceptChanges();
+
+        // Split the content into new sections
+        const newSections = this.createSectionsFromContent(content, originalSectionId);
+
+        // Get all sections as an ordered array to maintain document order
+        const allSectionsArray = Array.from(this.sections.values());
+        const originalIndex = allSectionsArray.findIndex(s => s.id === originalSectionId);
+
+        // Clear the sections map and rebuild it with proper order
+        this.sections.clear();
+
+        // Add sections before the original
+        for (let i = 0; i < originalIndex; i++) {
+            const section = allSectionsArray[i];
+            this.sections.set(section.id, section);
+        }
+
+        // Add the new split sections
+        newSections.forEach(section => {
+            this.sections.set(section.id, section);
+        });
+
+        // Add sections after the original
+        for (let i = originalIndex + 1; i < allSectionsArray.length; i++) {
+            const section = allSectionsArray[i];
+            this.sections.set(section.id, section);
+        }
+
+        // Note: No longer tracking single editingSection
+
+        // Emit event to trigger UI re-render
+        this.emit('section-split', {
+            originalSectionId,
+            newSections: newSections.map(s => s.getStatus()),
+            allSections: Array.from(this.sections.values())
+        });
+    }
+
+    createSectionsFromContent(content, baseSectionId) {
+        const lines = content.split('\n');
+        const sections = [];
+        let currentSection = '';
+        let position = 0;
+
+        for (let i = 0; i < lines.length; i++) {
+            const line = lines[i];
+            const isHeading = /^#{1,6}\s/.test(line.trim());
+
+            if (isHeading) {
+                // When we encounter a heading, complete any previous section
+                if (currentSection.trim()) {
+                    const sectionId = `${baseSectionId}_split_${position}`;
+                    const sectionType = Section.detectType(currentSection);
+                    const section = new Section(sectionId, currentSection.trim(), sectionType);
+                    sections.push(section);
+                    position++;
+                }
+                // Start new section with this heading
+                currentSection = line;
+            } else {
+                // Add content to current section
+                if (currentSection) currentSection += '\n';
+                currentSection += line;
+            }
+        }
+
+        // Add the final section if it has content
+        if (currentSection.trim()) {
+            const sectionId = `${baseSectionId}_split_${position}`;
+            const sectionType = Section.detectType(currentSection);
+            const section = new Section(sectionId, currentSection.trim(), sectionType);
+            sections.push(section);
+        }
+
+        return sections;
+    }
+
+    cancelChanges(sectionId) {
+        const section = this.sections.get(sectionId);
+        if (!section) {
+            throw new Error(`Section ${sectionId} not found`);
+        }
+        const content = section.cancelChanges();
+        // Note: No longer tracking single editingSection
+        this.emit('changes-cancelled', { sectionId, content, section: section.getStatus() });
+        return content;
+    }
+
+    resetToOriginal(sectionId) {
+        const section = this.sections.get(sectionId);
+        if (!section) {
+            throw new Error(`Section ${sectionId} not found`);
+        }
+        const content = section.resetToOriginal();
+        this.emit('section-reset', { sectionId, content, section: section.getStatus() });
+        return content;
+    }
+
+    stopEditing(sectionId) {
+        const section = this.sections.get(sectionId);
+        if (!section) {
+            throw new Error(`Section ${sectionId} not found`);
+        }
+
+        const newState = section.stopEditing();
+        // Note: No longer tracking single editingSection
+
+        this.emit('edit-stopped', { sectionId, newState, section: section.getStatus() });
+        return newState;
+    }
+
+    getAllSections() {
+        return Array.from(this.sections.values());
+    }
+
+    getDocumentMarkdown() {
+        return this.getAllSections()
+            .map(section => section.currentMarkdown)
+            .join('\n\n');
+    }
+}
+
+/**
+ * DOM Renderer - Handles DOM interactions
+ */
+class DOMRenderer {
+    constructor(sectionManager, containerElement) {
+        this.sectionManager = sectionManager;
+        this.container = containerElement;
+        // Note: Removed single currentSection tracking to allow multiple concurrent edits
+        this.editingSections = new Set(); // Track multiple editing sections
+
+        this.handleSectionClick = this.handleSectionClick.bind(this);
+        this.handleAccept = this.handleAccept.bind(this);
+        this.handleCancel = this.handleCancel.bind(this);
+        this.handleReset = this.handleReset.bind(this);
+        this.handleKeydown = this.handleKeydown.bind(this);
+
+        this.setupEventListeners();
+    }
+
+    setupEventListeners() {
+        this.sectionManager.on('sections-created', (data) => {
+            this.renderAllSections(data.sections);
+        });
+        this.sectionManager.on('edit-started', (data) => {
+            this.showEditor(data.sectionId, data.content);
+        });
+        this.sectionManager.on('edit-stopped', (data) => {
+            this.hideEditor(data.sectionId);
+            // Don't update content - let pending changes remain
+        });
+        this.sectionManager.on('changes-accepted', (data) => {
+            this.hideEditor(data.sectionId);
+            this.updateSectionContent(data.sectionId, data.content);
+        });
+        this.sectionManager.on('changes-cancelled', (data) => {
+            this.hideEditor(data.sectionId);
+            this.updateSectionContent(data.sectionId, data.content);
+        });
+        this.sectionManager.on('section-reset', (data) => {
+            this.updateTextareaContent(data.content, data.sectionId);
+        });
+        this.sectionManager.on('section-split', (data) => {
+            console.log('Handling section split in UI');
+            this.handleSectionSplit(data);
+        });
+    }
+
+    renderAllSections(sections) {
+        this.container.innerHTML = '';
+        sections.forEach(section => {
+            const element = this.createSectionElement(section);
+            section.domElement = element;
+            this.container.appendChild(element);
+        });
+        this.container.addEventListener('click', this.handleSectionClick);
+    }
+
+    createSectionElement(section) {
+        const element = document.createElement('div');
+        element.setAttribute('data-section-id', section.id);
+
+        if (typeof marked !== 'undefined') {
+            const html = marked.parse(section.currentMarkdown);
+            // Add target="_blank" to all links
+            const htmlWithTargetBlank = html.replace(/<a href="([^"]*)"([^>]*)>/g, '<a href="$1" target="_blank"$2>');
+            element.innerHTML = htmlWithTargetBlank;
+        } else {
+            element.innerHTML = `<p>${section.currentMarkdown}</p>`;
+        }
+
+        // Setup styling and event handlers
+        this.setupSectionElement(element);
+
+        return element;
+    }
+
+    handleSectionClick(event) {
+        // Don't handle clicks on form elements, buttons, or links
+        if (event.target.closest('textarea, button, input, a')) {
+            return;
+        }
+
+        const sectionElement = event.target.closest('.ui-edit-section');
+        if (!sectionElement) return;
+
+        const sectionId = sectionElement.getAttribute('data-section-id');
+        if (!sectionId) return;
+
+        // Check if this section is already being edited
+        const section = this.sectionManager.sections.get(sectionId);
+        if (section && section.isEditing()) {
+            console.log('Section already being edited:', sectionId);
+            return;
+        }
+
+        try {
+            console.log('Starting edit for section:', sectionId);
+            this.sectionManager.startEditing(sectionId);
+        } catch (error) {
+            console.error('Failed to start editing:', error);
+        }
+    }
+
+    showEditor(sectionId, content) {
+        const element = this.findSectionElement(sectionId);
+        if (!element) return;
+
+        this.hideCurrentEditor();
+
+        const section = this.sectionManager.sections.get(sectionId);
+        const isProtectedHeading = section && section.isProtectedHeading();
+
+        const editorContainer = document.createElement('div');
+        editorContainer.className = isProtectedHeading ? 'ui-edit-inline-panel ui-insert-protected-panel' : 'ui-edit-inline-panel';
+        editorContainer.style.cssText = `
+            display: flex;
+            flex-direction: column;
+            gap: 8px;
+            width: 100%;
+        `;
+
+        // If this is a protected heading, show the heading display
+        if (isProtectedHeading) {
+            const headingDisplay = document.createElement('div');
+            headingDisplay.className = 'ui-insert-heading-display';
+            const headingText = section.getHeadingText();
+            const headingLevel = section.headingLevel;
+            const headingMarkdown = '#'.repeat(headingLevel) + ' ' + headingText;
+            headingDisplay.textContent = headingMarkdown;
+            headingDisplay.style.cssText = `
+                font-family: 'SF Mono', Monaco, 'Cascadia Code', monospace;
+                font-size: 14px;
+                font-weight: bold;
+                padding: 8px 12px;
+                background: rgba(0, 0, 0, 0.05);
+                border-radius: 4px;
+                border-left: 4px solid #007bff;
+                color: #333;
+            `;
+            editorContainer.appendChild(headingDisplay);
+        }
+
+        // Create content editing area
+        const editingArea = document.createElement('div');
+        editingArea.style.cssText = `
+            display: flex;
+            gap: 12px;
+            align-items: flex-start;
+        `;
+
+        const textarea = document.createElement('textarea');
+        textarea.className = isProtectedHeading ? 'ui-edit-textarea ui-insert-content-editor' : 'ui-edit-textarea ui-edit-textarea-main';
+
+        // For protected headings, only show content after the heading
+        const textareaContent = isProtectedHeading ? section.getHeadingContent() : content;
+        textarea.value = textareaContent;
+
+        textarea.style.cssText = `
+            flex: 1;
+            min-height: 100px;
+            font-family: 'SF Mono', Monaco, 'Cascadia Code', monospace;
+            border-radius: 6px;
+            padding: 12px;
+            font-size: 14px;
+            line-height: 1.5;
+            resize: vertical;
+        `;
+
+        textarea.addEventListener('input', () => {
+            if (isProtectedHeading) {
+                // Reconstruct full content with protected heading
+                const headingLine = section.originalMarkdown.split('\n')[0];
+                const fullContent = headingLine + '\n' + textarea.value;
+                this.sectionManager.updateContent(sectionId, fullContent);
+            } else {
+                this.sectionManager.updateContent(sectionId, textarea.value);
+            }
+        });
+        textarea.addEventListener('keydown', this.handleKeydown);
+
+        const controls = document.createElement('div');
+        controls.style.cssText = `
+            display: flex;
+            flex-direction: column;
+            gap: 6px;
+        `;
+
+        const createButton = (text, className, handler) => {
+            const btn = document.createElement('button');
+            btn.textContent = text;
+            btn.className = className;
+            btn.addEventListener('click', handler);
+            return btn;
+        };
+
+        controls.appendChild(createButton('✓ Accept', 'ui-edit-button ui-edit-button-accept', () => this.handleAccept(sectionId)));
+        controls.appendChild(createButton('✗ Cancel', 'ui-edit-button ui-edit-button-cancel', () => this.handleCancel(sectionId)));
+        controls.appendChild(createButton('🔄 Reset', 'ui-edit-button ui-edit-button-reset', () => this.handleReset(sectionId)));
+
+        editingArea.appendChild(textarea);
+        editingArea.appendChild(controls);
+        editorContainer.appendChild(editingArea);
+
+        element.innerHTML = '';
+        element.appendChild(editorContainer);
+
+        textarea.focus();
+        // Track this section as being edited
+        this.editingSections.add(sectionId);
+    }
+
+    hideCurrentEditor() {
+        // This method is no longer needed since we support multiple editors
+        // Individual editors are hidden via hideEditor(sectionId)
+    }
+
+    hideEditor(sectionId) {
+        // Remove from editing sections set
+        this.editingSections.delete(sectionId);
+
+        // Force re-render the section to ensure it displays correctly
+        const section = this.sectionManager.sections.get(sectionId);
+        if (section) {
+            this.updateSectionContent(sectionId, section.currentMarkdown);
+        }
+    }
+
+    updateSectionContent(sectionId, content) {
+        const element = this.findSectionElement(sectionId);
+        if (!element) return;
+
+        if (typeof marked !== 'undefined') {
+            const html = marked.parse(content);
+            // Add target="_blank" to all links
+            const htmlWithTargetBlank = html.replace(/<a href="([^"]*)"([^>]*)>/g, '<a href="$1" target="_blank"$2>');
+            element.innerHTML = htmlWithTargetBlank;
+        } else {
+            element.innerHTML = `<p>${content}</p>`;
+        }
+
+        // Restore the section styling and click behavior
+        this.setupSectionElement(element);
+    }
+
+    setupSectionElement(element) {
+        element.className = 'ui-edit-section';
+        element.style.cssText = `
+            margin: 16px 0;
+            padding: 12px;
+            border-radius: 6px;
+            cursor: pointer;
+            transition: all 0.2s ease;
+            border: 2px solid transparent;
+        `;
+
+        // Remove any existing event listeners to avoid duplicates
+        element.removeEventListener('mouseenter', element._mouseenterHandler);
+        element.removeEventListener('mouseleave', element._mouseleaveHandler);
+
+        // Create new handlers and store references
+        element._mouseenterHandler = () => {
+            element.style.backgroundColor = 'rgba(0, 0, 0, 0.02)';
+            element.style.borderColor = 'rgba(0, 0, 0, 0.1)';
+        };
+
+        element._mouseleaveHandler = () => {
+            element.style.backgroundColor = '';
+            element.style.borderColor = 'transparent';
+        };
+
+        element.addEventListener('mouseenter', element._mouseenterHandler);
+        element.addEventListener('mouseleave', element._mouseleaveHandler);
+    }
+
+    updateTextareaContent(content, sectionId) {
+        // Find the specific textarea for this section
+        const element = this.findSectionElement(sectionId);
+        if (element) {
+            const textarea = element.querySelector('textarea');
+            if (textarea) {
+                textarea.value = content;
+            }
+        }
+    }
+
+    handleSectionSplit(data) {
+        // Clear the editor state for the original section
+        this.editingSections.delete(data.originalSectionId);
+
+        // Find the original section element and its position
+        const originalElement = this.findSectionElement(data.originalSectionId);
+        if (!originalElement) {
+            console.error('Original section element not found');
+            return;
+        }
+
+        // Get the position of the original element
+        const originalPosition = Array.from(this.container.children).indexOf(originalElement);
+
+        // Create new section elements for the split sections
+        const newElements = [];
+        data.newSections.forEach(sectionData => {
+            const section = this.sectionManager.sections.get(sectionData.id);
+            if (section) {
+                const element = this.createSectionElement(section);
+                section.domElement = element;
+                newElements.push(element);
+            }
+        });
+
+        // Remove the original element
+        originalElement.remove();
+
+        // Insert new elements at the original position
+        if (originalPosition < this.container.children.length) {
+            const nextElement = this.container.children[originalPosition];
+            newElements.forEach(element => {
+                this.container.insertBefore(element, nextElement);
+            });
+        } else {
+            // If original was at the end, just append
+            newElements.forEach(element => {
+                this.container.appendChild(element);
+            });
+        }
+
+        // Show success message
+        console.log(`Section split into ${data.newSections.length} sections`);
+
+        // Notify the main editor about the split
+        if (window.markitectCleanEditor) {
+            window.markitectCleanEditor.showMessage(
+                `✂️ Section split into ${data.newSections.length} sections!`,
+                'success'
+            );
+        }
+    }
+
+    findSectionElement(sectionId) {
+        return this.container.querySelector(`[data-section-id="${sectionId}"]`);
+    }
+
+    handleAccept(sectionId) {
+        try {
+            console.log('Accepting changes for section:', sectionId);
+            this.sectionManager.acceptChanges(sectionId);
+            console.log('Changes accepted successfully');
+        } catch (error) {
+            console.error('Failed to accept changes:', error);
+        }
+    }
+
+    handleCancel(sectionId) {
+        try {
+            console.log('Canceling changes for section:', sectionId);
+            this.sectionManager.cancelChanges(sectionId);
+            console.log('Changes canceled successfully');
+        } catch (error) {
+            console.error('Failed to cancel changes:', error);
+        }
+    }
+
+    handleReset(sectionId) {
+        try {
+            this.sectionManager.resetToOriginal(sectionId);
+        } catch (error) {
+            console.error('Failed to reset section:', error);
+        }
+    }
+
+    handleKeydown(event) {
+        if (!this.currentSection) return;
+        if (event.ctrlKey || event.metaKey) {
+            switch (event.key) {
+                case 'Enter':
+                    event.preventDefault();
+                    this.handleAccept(this.currentSection);
+                    break;
+                case 'Escape':
+                    event.preventDefault();
+                    this.handleCancel(this.currentSection);
+                    break;
+            }
+        }
+        if (event.key === 'Escape') {
+            event.preventDefault();
+            this.handleCancel(this.currentSection);
+        }
+    }
+}
+
+/**
+ * Main Editor Integration
+ */
+class MarkitectCleanEditor {
+    constructor(markdownContent, containerElement, options = {}) {
+        this.options = {
+            theme: 'github',
+            keyboardShortcuts: true,
+            autosave: false,
+            ...options
+        };
+
+        this.sectionManager = new SectionManager();
+        this.domRenderer = new DOMRenderer(this.sectionManager, containerElement);
+        this.originalMarkdown = markdownContent;
+        this.initialize();
+    }
+
+    initialize() {
+        try {
+            const sections = this.sectionManager.createSectionsFromMarkdown(this.originalMarkdown);
+            console.log(`✓ Initialized clean editor with ${sections.length} sections`);
+
+            // Add global control panel
+            this.addGlobalControls();
+
+            return true;
+        } catch (error) {
+            console.error('Failed to initialize clean editor:', error);
+            return false;
+        }
+    }
+
+    addGlobalControls() {
+        // Create floating control panel
+        const panel = document.createElement('div');
+        panel.id = 'ui-edit-floater';
+        panel.className = 'ui-edit-floater-panel';
+        panel.innerHTML = `
+            <div class="ui-edit-floater-header">
+                <h3>📝 Editor</h3>
+                <div class="ui-edit-floater-status" id="editor-status">Ready</div>
+            </div>
+            <div class="ui-edit-floater-actions">
+                <button id="save-document" class="ui-edit-button ui-edit-button-accept">💾 Save Document</button>
+                <button id="reset-all" class="ui-edit-button ui-edit-button-reset">🔄 Reset All</button>
+                <button id="show-status" class="ui-edit-button ui-edit-button-secondary">📊 Show Status</button>
+            </div>
+        `;
+
+        // Style the panel
+        panel.style.cssText = `
+            position: fixed;
+            top: 20px;
+            right: 20px;
+            border-radius: 8px;
+            padding: 16px;
+            z-index: 1000;
+            font-family: system-ui, -apple-system, sans-serif;
+            min-width: 200px;
+            max-width: 250px;
+        `;
+
+        // Add internal styling for structural layout (theme colors come from CSS)
+        const style = document.createElement('style');
+        style.textContent = `
+            .ui-edit-floater-header h3 {
+                margin: 0 0 8px 0;
+                font-size: 16px;
+            }
+            .ui-edit-floater-status {
+                font-size: 12px;
+                margin-bottom: 12px;
+            }
+            .ui-edit-button {
+                display: block;
+                width: 100%;
+                margin: 6px 0;
+                padding: 10px 12px;
+                border-radius: 4px;
+                cursor: pointer;
+                font-size: 14px;
+                font-weight: 500;
+                transition: all 0.2s;
+                border: 1px solid transparent;
+            }
+        `;
+        document.head.appendChild(style);
+
+        document.body.appendChild(panel);
+
+        // Add event listeners
+        document.getElementById('save-document').addEventListener('click', () => this.saveDocument());
+        document.getElementById('reset-all').addEventListener('click', () => this.resetAllSections());
+        document.getElementById('show-status').addEventListener('click', () => this.showStatus());
+
+        // Update status periodically
+        this.statusInterval = setInterval(() => this.updateGlobalStatus(), 2000);
+    }
+
+    updateGlobalStatus() {
+        const statusEl = document.getElementById('editor-status');
+        if (!statusEl) return;
+
+        const sections = this.sectionManager.getAllSections();
+        const modified = sections.filter(s => s.hasChanges()).length;
+        const editing = sections.filter(s => s.isEditing()).length;
+
+        if (editing > 0) {
+            statusEl.textContent = `Editing ${editing} section${editing !== 1 ? 's' : ''}`;
+            statusEl.className = 'ui-edit-floater-status editing';
+        } else if (modified > 0) {
+            statusEl.textContent = `${modified} section${modified !== 1 ? 's' : ''} modified`;
+            statusEl.style.color = '';
+        } else {
+            statusEl.textContent = 'All sections saved ✓';
+            statusEl.style.color = '';
+        }
+    }
+
+    saveDocument() {
+        const markdown = this.getDocumentMarkdown();
+        const blob = new Blob([markdown], { type: 'text/markdown' });
+        const url = URL.createObjectURL(blob);
+
+        // Generate intelligent filename
+        const filename = this.generateSaveFilename();
+
+        const a = document.createElement('a');
+        a.href = url;
+        a.download = filename;
+        a.style.display = 'none';
+        document.body.appendChild(a);
+        a.click();
+        document.body.removeChild(a);
+        URL.revokeObjectURL(url);
+
+        console.log('📄 Document saved as:', filename);
+        this.showMessage(`Document saved as: ${filename}`, 'success');
+    }
+
+    generateSaveFilename() {
+        // Try to get original filename from config
+        let baseName = 'document';
+
+        // Method 1: Use original filename from config if available
+        if (typeof MARKITECT_EDITOR_CONFIG !== 'undefined' && MARKITECT_EDITOR_CONFIG.originalFilename) {
+            baseName = MARKITECT_EDITOR_CONFIG.originalFilename;
+        }
+
+        // Method 2: Try to extract from page title
+        if (baseName === 'document') {
+            const title = document.title;
+            if (title && title !== 'Markdown Document' && !title.includes('Debug') && !title.includes('Test')) {
+                baseName = title.toLowerCase()
+                    .replace(/[^a-z0-9\s-]/g, '') // Remove special chars
+                    .replace(/\s+/g, '-') // Replace spaces with dashes
+                    .replace(/-+/g, '-') // Collapse multiple dashes
+                    .replace(/^-|-$/g, ''); // Remove leading/trailing dashes
+            }
+        }
+
+        // Method 3: Try to extract from URL pathname
+        if (baseName === 'document') {
+            const urlPath = window.location.pathname;
+            const match = urlPath.match(/\/([^\/]+)\.html?$/);
+            if (match) {
+                const urlBaseName = match[1];
+                if (!urlBaseName.includes('debug') && !urlBaseName.includes('test')) {
+                    baseName = urlBaseName.replace(/_/g, '-');
+                }
+            }
+        }
+
+        // Method 4: Try to extract from first heading
+        if (baseName === 'document') {
+            const firstHeading = this.sectionManager.getAllSections()
+                .find(section => section.sectionType === 'heading');
+            if (firstHeading) {
+                baseName = firstHeading.originalMarkdown
+                    .replace(/^#+\s*/, '') // Remove markdown heading syntax
+                    .toLowerCase()
+                    .replace(/[^a-z0-9\s-]/g, '')
+                    .replace(/\s+/g, '-')
+                    .replace(/-+/g, '-')
+                    .replace(/^-|-$/g, '')
+                    .substring(0, 30); // Limit length
+            }
+        }
+
+        // Generate timestamp
+        const now = new Date();
+        const timestamp = now.toISOString()
+            .replace(/T/, '-')
+            .replace(/:/g, '-')
+            .replace(/\.\d{3}Z$/, '');
+
+        // Check if there are modifications
+        const hasModifications = this.sectionManager.getAllSections()
+            .some(section => section.hasChanges());
+
+        if (hasModifications) {
+            return `${baseName}-edited-${timestamp}.md`;
+        } else {
+            return `${baseName}-${timestamp}.md`;
+        }
+    }
+
+    /**
+     * Show custom confirmation dialog with theme-consistent styling
+     * @param {string} message - The confirmation message
+     * @param {string} confirmText - Text for confirm button (default: "Confirm")
+     * @param {string} cancelText - Text for cancel button (default: "Cancel")
+     * @param {string} warningText - Optional warning text to highlight consequences
+     * @returns {Promise<boolean>} - True if confirmed, false if cancelled
+     */
+    showConfirmation(message, confirmText = "Confirm", cancelText = "Cancel", warningText = null) {
+        return new Promise((resolve) => {
+            // Remove any existing modal
+            const existingModal = document.querySelector('.ui-edit-modal-overlay');
+            if (existingModal) {
+                existingModal.remove();
+            }
+
+            // Create modal overlay
+            const overlay = document.createElement('div');
+            overlay.className = 'ui-edit-modal-overlay';
+
+            // Create modal content
+            const modal = document.createElement('div');
+            modal.className = 'ui-edit-modal ui-edit-confirmation-modal';
+
+            // Create header
+            const header = document.createElement('div');
+            header.className = 'ui-edit-modal-header';
+
+            const title = document.createElement('h3');
+            title.className = 'ui-edit-modal-title';
+            title.textContent = 'Confirm Action';
+
+            const closeBtn = document.createElement('button');
+            closeBtn.className = 'ui-edit-modal-close';
+            closeBtn.innerHTML = '×';
+            closeBtn.setAttribute('aria-label', 'Close');
+
+            header.appendChild(title);
+            header.appendChild(closeBtn);
+
+            // Create body
+            const body = document.createElement('div');
+            body.className = 'ui-edit-modal-body';
+
+            const content = document.createElement('div');
+            content.className = 'ui-edit-confirmation-content';
+            content.textContent = message;
+            body.appendChild(content);
+
+            // Add warning section if provided
+            if (warningText) {
+                const warning = document.createElement('div');
+                warning.className = 'ui-edit-confirmation-warning';
+                warning.textContent = warningText;
+                body.appendChild(warning);
+            }
+
+            // Create footer with action buttons
+            const footer = document.createElement('div');
+            footer.className = 'ui-edit-modal-footer';
+
+            const buttonContainer = document.createElement('div');
+            buttonContainer.className = 'ui-edit-confirmation-buttons';
+
+            const cancelBtn = document.createElement('button');
+            cancelBtn.className = 'ui-edit-button-cancel';
+            cancelBtn.textContent = cancelText;
+
+            const confirmBtn = document.createElement('button');
+            confirmBtn.className = 'ui-edit-button-confirm';
+            confirmBtn.textContent = confirmText;
+
+            buttonContainer.appendChild(cancelBtn);
+            buttonContainer.appendChild(confirmBtn);
+            footer.appendChild(buttonContainer);
+
+            // Assemble modal
+            modal.appendChild(header);
+            modal.appendChild(body);
+            modal.appendChild(footer);
+            overlay.appendChild(modal);
+            document.body.appendChild(overlay);
+
+            // Function to close modal and resolve
+            const closeModal = (result) => {
+                overlay.remove();
+                resolve(result);
+            };
+
+            // Event listeners
+            closeBtn.addEventListener('click', () => closeModal(false));
+            cancelBtn.addEventListener('click', () => closeModal(false));
+            confirmBtn.addEventListener('click', () => closeModal(true));
+
+            // Close on overlay click
+            overlay.addEventListener('click', (e) => {
+                if (e.target === overlay) {
+                    closeModal(false);
+                }
+            });
+
+            // Keyboard support
+            const handleKeyDown = (e) => {
+                if (e.key === 'Escape') {
+                    closeModal(false);
+                } else if (e.key === 'Enter') {
+                    closeModal(true);
+                }
+            };
+
+            document.addEventListener('keydown', handleKeyDown);
+
+            // Clean up event listener when modal is closed
+            const originalResolve = resolve;
+            resolve = (result) => {
+                document.removeEventListener('keydown', handleKeyDown);
+                originalResolve(result);
+            };
+
+            // Show modal with animation
+            setTimeout(() => {
+                overlay.classList.add('active');
+                // Focus the confirm button for accessibility
+                confirmBtn.focus();
+            }, 10);
+        });
+    }
+
+    async resetAllSections() {
+        const confirmed = await this.showConfirmation(
+            'Reset all content to original markdown?',
+            'Reset Document',
+            'Keep Changes',
+            'This will permanently lose all edits and remove any split sections. This action cannot be undone.'
+        );
+
+        if (confirmed) {
+            // Clear the section manager completely
+            this.sectionManager.sections.clear();
+            // Note: No longer tracking single editingSection
+
+            // Recreate sections from original markdown
+            const sections = this.sectionManager.createSectionsFromMarkdown(this.originalMarkdown);
+
+            console.log('🔄 All sections reset to original structure');
+            this.showMessage('Document reset to original structure', 'info');
+        }
+    }
+
+    showStatus() {
+        const sections = this.sectionManager.getAllSections();
+        const total = sections.length;
+        const modified = sections.filter(s => s.hasChanges()).length;
+        const editing = sections.filter(s => s.isEditing()).length;
+
+        // Get the actual save filename that will be used
+        const saveFilename = this.generateSaveFilename();
+
+        // Create structured content for the modal
+        const modalContent = {
+            title: `📊 ${window.editorConfig.repoName} Status`,
+            sections: [
+                {
+                    title: 'Application Information',
+                    content: `${window.editorConfig.version}`
+                },
+                {
+                    title: 'File Information',
+                    content: `Save file: ${saveFilename}
+Source: ${window.editorConfig.originalFilename}
+URL: ${window.location.protocol}//${window.location.host}${window.location.pathname}`
+                },
+                {
+                    title: 'Document Status',
+                    content: `• Total sections: ${total}
+• Modified sections: ${modified}
+• Currently editing: ${editing}
+• Unsaved changes: ${modified > 0 || editing > 0 ? 'Yes' : 'No'}`
+                },
+                {
+                    title: 'Section Behavior',
+                    content: `• Each section is a logical unit (heading + content until next heading)
+• Content with line breaks stays in one section
+• To split content: Create new headings (# ## ###)
+• Sections don't auto-split on line breaks`
+                },
+                {
+                    title: 'Editing Controls',
+                    content: `• Click any section to edit its content
+• Accept (✓) - Save changes to that section
+• Cancel (✗) - Discard changes, return to previous state
+• Reset (🔄) - Restore original content for that section
+• Save Document - Download all current content
+• Reset All - Restore entire document to original state`
+                }
+            ]
+        };
+
+        this.showModal(modalContent);
+    }
+
+    showModal(content) {
+        // Remove any existing modal
+        const existingModal = document.querySelector('.ui-edit-modal-overlay');
+        if (existingModal) {
+            existingModal.remove();
+        }
+
+        // Create modal overlay
+        const overlay = document.createElement('div');
+        overlay.className = 'ui-edit-modal-overlay';
+
+        // Create modal content
+        const modal = document.createElement('div');
+        modal.className = 'ui-edit-modal';
+
+        // Create header
+        const header = document.createElement('div');
+        header.className = 'ui-edit-modal-header';
+
+        const title = document.createElement('h3');
+        title.className = 'ui-edit-modal-title';
+        title.textContent = content.title;
+
+        const closeBtn = document.createElement('button');
+        closeBtn.className = 'ui-edit-modal-close';
+        closeBtn.innerHTML = '×';
+        closeBtn.setAttribute('aria-label', 'Close');
+
+        header.appendChild(title);
+        header.appendChild(closeBtn);
+
+        // Create body
+        const body = document.createElement('div');
+        body.className = 'ui-edit-modal-body';
+
+        // Add sections
+        content.sections.forEach(section => {
+            const sectionDiv = document.createElement('div');
+            sectionDiv.className = 'ui-edit-modal-section';
+
+            const sectionTitle = document.createElement('div');
+            sectionTitle.className = 'ui-edit-modal-section-title';
+            sectionTitle.textContent = section.title;
+
+            const sectionContent = document.createElement('div');
+            sectionContent.className = 'ui-edit-modal-content';
+            sectionContent.textContent = section.content;
+
+            sectionDiv.appendChild(sectionTitle);
+            sectionDiv.appendChild(sectionContent);
+            body.appendChild(sectionDiv);
+        });
+
+        // Create footer with close button
+        const footer = document.createElement('div');
+        footer.className = 'ui-edit-modal-footer';
+
+        const footerCloseBtn = document.createElement('button');
+        footerCloseBtn.className = 'ui-edit-button ui-edit-button-accept';
+        footerCloseBtn.textContent = 'Close';
+        footer.appendChild(footerCloseBtn);
+
+        // Assemble modal
+        modal.appendChild(header);
+        modal.appendChild(body);
+        modal.appendChild(footer);
+        overlay.appendChild(modal);
+
+        // Add to page
+        document.body.appendChild(overlay);
+
+        // Close handlers
+        const closeModal = () => {
+            overlay.classList.remove('active');
+            setTimeout(() => {
+                if (overlay.parentNode) {
+                    overlay.parentNode.removeChild(overlay);
+                }
+            }, 300);
+        };
+
+        closeBtn.addEventListener('click', closeModal);
+        footerCloseBtn.addEventListener('click', closeModal);
+
+        // Close on overlay click (but not modal content)
+        overlay.addEventListener('click', (e) => {
+            if (e.target === overlay) {
+                closeModal();
+            }
+        });
+
+        // Close on Escape key
+        const handleKeydown = (e) => {
+            if (e.key === 'Escape') {
+                closeModal();
+                document.removeEventListener('keydown', handleKeydown);
+            }
+        };
+        document.addEventListener('keydown', handleKeydown);
+
+        // Show modal with animation
+        requestAnimationFrame(() => {
+            overlay.classList.add('active');
+        });
+
+        // Focus management
+        setTimeout(() => {
+            closeBtn.focus();
+        }, 100);
+    }
+
+    showMessage(message, type = 'info') {
+        const messageDiv = document.createElement('div');
+        messageDiv.textContent = message;
+
+        const colors = {
+            'success': '#28a745',
+            'error': '#dc3545',
+            'info': '#007acc'
+        };
+
+        messageDiv.style.cssText = `
+            position: fixed;
+            top: 20px;
+            left: 50%;
+            transform: translateX(-50%);
+            background: ${colors[type] || colors.info};
+            color: white;
+            padding: 12px 20px;
+            border-radius: 4px;
+            box-shadow: 0 2px 8px rgba(0,0,0,0.2);
+            z-index: 10001;
+            font-size: 14px;
+            max-width: 400px;
+            text-align: center;
+        `;
+
+        document.body.appendChild(messageDiv);
+
+        setTimeout(() => {
+            if (messageDiv.parentNode) {
+                messageDiv.parentNode.removeChild(messageDiv);
+            }
+        }, 3000);
+    }
+
+    getDocumentMarkdown() {
+        return this.sectionManager.getDocumentMarkdown();
+    }
+}
+
+// Initialize the clean editor system
+let markitectCleanEditor;
+
+function initializeCleanEditor() {
+    const container = document.getElementById('markdown-content');
+    if (!container) {
+        console.error('Markdown content container not found');
+        return;
+    }
+
+    if (typeof window.MarkitectEditor === 'undefined') {
+        console.error('MarkitectEditor not found');
+        return;
+    }
+
+    markitectCleanEditor = new window.MarkitectEditor.MarkitectCleanEditor(markdownContent, container);
+    window.markitectCleanEditor = markitectCleanEditor; // Make globally available
+    console.log('✅ Clean section editor initialized successfully');
+}
+
+// Document scroll indicators
+function initializeScrollIndicators() {
+    // Create scroll indicators
+    const scrollUpIndicator = document.createElement('div');
+    scrollUpIndicator.className = 'ui-scroll-indicator ui-scroll-indicator-up';
+    scrollUpIndicator.setAttribute('aria-label', 'Scroll to top');
+    scrollUpIndicator.setAttribute('title', 'Scroll up');
+
+    const scrollDownIndicator = document.createElement('div');
+    scrollDownIndicator.className = 'ui-scroll-indicator ui-scroll-indicator-down';
+    scrollDownIndicator.setAttribute('aria-label', 'Scroll to bottom');
+    scrollDownIndicator.setAttribute('title', 'Scroll down');
+
+    document.body.appendChild(scrollUpIndicator);
+    document.body.appendChild(scrollDownIndicator);
+
+    let scrollIndicatorTimeout = null;
+
+    // Function to show/hide indicators based on scroll position and mouse position
+    function updateScrollIndicators(mouseY = null) {
+        const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
+        const windowHeight = window.innerHeight;
+        const documentHeight = document.documentElement.scrollHeight;
+
+        // Determine if scrolling is possible in each direction
+        const canScrollUp = scrollTop > 0;
+        const canScrollDown = scrollTop < documentHeight - windowHeight;
+
+        // Only show indicators if there's any scroll possibility or if document is short
+        let showUp = false;
+        let showDown = false;
+
+        // Show indicators on mouseover near top/bottom of viewport
+        if (mouseY !== null) {
+            const topZone = 100; // pixels from top
+            const bottomZone = windowHeight - 100; // pixels from bottom
+
+            if (mouseY <= topZone) {
+                showUp = true;
+            }
+            if (mouseY >= bottomZone) {
+                showDown = true;
+            }
+        }
+
+        // Update indicator visibility and state
+        if (showUp) {
+            scrollUpIndicator.classList.add('active');
+            if (canScrollUp) {
+                scrollUpIndicator.classList.remove('disabled');
+            } else {
+                scrollUpIndicator.classList.add('disabled');
+            }
+        } else {
+            scrollUpIndicator.classList.remove('active');
+        }
+
+        if (showDown) {
+            scrollDownIndicator.classList.add('active');
+            if (canScrollDown) {
+                scrollDownIndicator.classList.remove('disabled');
+            } else {
+                scrollDownIndicator.classList.add('disabled');
+            }
+        } else {
+            scrollDownIndicator.classList.remove('active');
+        }
+
+        // Auto-hide after a delay when mouse moves away
+        if (scrollIndicatorTimeout) {
+            clearTimeout(scrollIndicatorTimeout);
+        }
+        scrollIndicatorTimeout = setTimeout(() => {
+            scrollUpIndicator.classList.remove('active');
+            scrollDownIndicator.classList.remove('active');
+        }, 2000);
+    }
+
+    // Mouse move handler
+    function handleMouseMove(e) {
+        updateScrollIndicators(e.clientY);
+    }
+
+    // Smooth scroll function
+    function smoothScroll(targetY, duration = 500) {
+        const startY = window.pageYOffset;
+        const difference = targetY - startY;
+        const startTime = performance.now();
+
+        function step(currentTime) {
+            const elapsed = currentTime - startTime;
+            const progress = Math.min(elapsed / duration, 1);
+
+            // Easing function (ease-out)
+            const easeOut = 1 - Math.pow(1 - progress, 3);
+
+            window.scrollTo(0, startY + difference * easeOut);
+
+            if (progress < 1) {
+                requestAnimationFrame(step);
+            }
+        }
+
+        requestAnimationFrame(step);
+    }
+
+    // Click handlers for smooth scrolling
+    scrollUpIndicator.addEventListener('click', () => {
+        const currentScroll = window.pageYOffset;
+        const targetScroll = Math.max(0, currentScroll - window.innerHeight * 0.8);
+        smoothScroll(targetScroll);
+    });
+
+    scrollDownIndicator.addEventListener('click', () => {
+        const currentScroll = window.pageYOffset;
+        const maxScroll = document.documentElement.scrollHeight - window.innerHeight;
+        const targetScroll = Math.min(maxScroll, currentScroll + window.innerHeight * 0.8);
+        smoothScroll(targetScroll);
+    });
+
+    // Event listeners
+    document.addEventListener('mousemove', handleMouseMove);
+    document.addEventListener('scroll', () => updateScrollIndicators());
+
+    // Initial check
+    updateScrollIndicators();
+
+    console.log('✅ Document scroll indicators initialized');
+}
+
+// Export for testing and usage
+if (typeof module !== 'undefined' && module.exports) {
+    module.exports = { Section, SectionManager, DOMRenderer, MarkitectCleanEditor };
+} else {
+    window.MarkitectEditor = { Section, SectionManager, DOMRenderer, MarkitectCleanEditor };
+}
+        
+
+        // Always render content first (graceful degradation)
+        document.addEventListener('DOMContentLoaded', function() {
+            console.log("Rendering content...");
+
+            const contentDiv = document.getElementById('markdown-content');
+
+            // Step 1: Ensure content is always displayed
+            if (contentDiv) {
+                if (typeof marked !== 'undefined') {
+                    try {
+                        const html = marked.parse(markdownContent);
+                        // Add target="_blank" to all links
+                        const htmlWithTargetBlank = html.replace(/<a href="([^"]*)"([^>]*)>/g, '<a href="$1" target="_blank"$2>');
+                        contentDiv.innerHTML = htmlWithTargetBlank;
+                        console.log("✓ Content rendered successfully");
+                        console.log('✓ Markdown rendered successfully');
+                    } catch (error) {
+                        contentDiv.innerHTML = '<p>Error rendering markdown: ' + error.message + '</p>';
+                        console.error("Content rendered with errors");
+                        console.error("Markdown parsing failed:", error.message);
+                    }
+                } else {
+                    // Fallback: display raw markdown with basic formatting
+                    const fallbackHtml = markdownContent
+                        .replace(/^# (.*$)/gim, '<h1>$1</h1>')
+                        .replace(/^## (.*$)/gim, '<h2>$1</h2>')
+                        .replace(/^### (.*$)/gim, '<h3>$1</h3>')
+                        .replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>')
+                        .replace(/\*(.*?)\*/g, '<em>$1</em>')
+                        .replace(/^- (.*$)/gim, '<li>$1</li>')
+                        .replace(/\n\n/g, '<br><br>')
+                        .replace(/\n/g, '<br>');
+                    contentDiv.innerHTML = '<div style="white-space: pre-wrap;">' + fallbackHtml + '</div>';
+                    console.warn("Content rendered with fallback parser");
+                    console.warn("CDN library failed to load - using basic fallback rendering");
+                }
+            }
+
+            // Step 2: Initialize edit/insert capabilities if enabled
+            if ((typeof MARKITECT_EDIT_MODE !== 'undefined' && MARKITECT_EDIT_MODE) ||
+                (typeof MARKITECT_INSERT_MODE !== 'undefined' && MARKITECT_INSERT_MODE)) {
+                const mode = (typeof MARKITECT_INSERT_MODE !== 'undefined' && MARKITECT_INSERT_MODE) ? 'insert' : 'edit';
+                console.log(`Initializing clean ${mode} capabilities...`);
+                try {
+                    console.log("Creating clean editor instance...");
+                    initializeCleanEditor();
+                    if (mode === 'insert') {
+                        console.log("✓ Clean insert mode active - click any section to edit (headings 1-3 protected)");
+                    } else {
+                        console.log("✓ Clean edit mode active - click any section to edit");
+                    }
+                } catch (error) {
+                    console.error(`Clean ${mode} mode failed to initialize:`, error);
+                }
+            }
+
+            // Step 3: Initialize document scroll indicators (always available)
+            try {
+                initializeScrollIndicators();
+            } catch (error) {
+                console.error("Scroll indicators failed to initialize:", error);
+            }
+        });
+
+        // Handle CDN loading errors
+        window.addEventListener('load', function() {
+            if (window.markitectMarkedError) {
+                console.error("CDN library failed to load - network or firewall blocking marked.js");
+            }
+        });
+    </script>
+</body>
+</html>
\ No newline at end of file
