feat: consolidate testdrive-jsui to capabilities and implement plugin self-declaration

## Major Changes
- Moved all testdrive-jsui assets from root to capabilities/testdrive-jsui/
- Consolidated directory structure: js/, static/css/, static/images/, static/templates/
- Implemented plugin self-declaration (get_plugin_source_dir, get_asset_paths)
- Removed hardcoded plugin discovery from rendering.py
- Updated all asset paths to be relative to capability root

## Architecture Improvements
- Single source of truth for all testdrive-jsui assets
- Plugin declares its own location (no hardcoded paths)
- Generic plugin discovery using hasattr check
- Clean separation: all JS in .js files, no code mixing
- Standalone capability ready for independent use

## Files Changed
- markitect/plugins/testdrive_jsui.py: Added self-declaration methods
- markitect/plugins/rendering.py: Removed hardcoded discovery
- capabilities/testdrive-jsui/README.md: Added standalone usage documentation
- Moved 17 asset files to consolidated structure
- Deleted obsolete /testdrive-jsui/ root directory

## Testing
- All 17 assets verified and working
- Tested via CLI: markitect md-render --engine testdrive-jsui
- Full document rendering successful

Prepares testdrive-jsui to become a git submodule with proper dependency management.

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

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

capabilities/testdrive-jsui/README.md

@@ -1,21 +1,23 @@
-# TestDrive-JSUI Capability
+# TestDrive-JSUI
 
-A comprehensive JavaScript UI testing framework capability for MarkiTect. Provides seamless integration between Python and JavaScript testing environments, enabling safe development and testing of JavaScript UI components.
+A standalone JavaScript UI rendering engine and testing framework. Originally developed for MarkiTect, TestDrive-JSUI is designed as an independent, reusable capability that can be integrated into any Python project.
 
 ## 🎯 **Purpose**
 
 TestDrive-JSUI is designed to:
 
+- **📝 Render markdown with interactive JavaScript UI** for editing and viewing
+- **🔌 Work as a standalone plugin** or integrate with any Python project
 - **🔒 Protect existing JavaScript UI functionality** during refactoring and development
-- **🧪 Integrate JavaScript tests** into the main Python test suite
+- **🧪 Integrate JavaScript tests** into Python test suites
 - **🏗️ Provide a clean architecture** for JavaScript framework development
 - **📊 Enable comprehensive testing** of JavaScript UI components
-- **🚀 Support future extensibility** for JavaScript framework evolution
+- **🚀 Support extensibility** for JavaScript framework evolution
 
 ## 🏗️ **Architecture**
 
 ```
-testdrive-jsui/
+capabilities/testdrive-jsui/
 ├── src/testdrive_jsui/          # Python package
 │   ├── core/                    # Core framework components
 │   ├── components/              # UI component helpers
@@ -23,11 +25,26 @@ testdrive-jsui/
 │   └── testing/                 # Python-JS bridge
 │       ├── js_test_runner.py    # JavaScript test execution
 │       └── integration.py       # Pytest integration
-├── js/                          # JavaScript source
-│   ├── core/                    # Core JS components
-│   ├── components/              # UI components
+├── js/                          # JavaScript source (consolidated)
+│   ├── core/                    # Core JS (debug-system, section-manager)
+│   ├── components/              # UI components (dom-renderer, debug-panel)
+│   ├── controls/                # Control panels (edit, debug, status, contents)
+│   ├── plugins/                 # JS plugins
+│   ├── widgets/                 # UI widgets
 │   ├── utils/                   # JS utilities
-│   └── tests/                   # JavaScript tests
+│   ├── tests/                   # JavaScript tests
+│   ├── config-loader.js         # Configuration loader
+│   ├── main.js                  # Main entry point
+│   └── main-updated.js          # Updated main (refactored)
+├── static/                      # Static assets
+│   ├── css/                     # Stylesheets
+│   │   ├── editor.css           # Editor styles
+│   │   ├── controls.css         # Control panel styles
+│   │   └── themes/              # Theme files
+│   ├── images/                  # Image assets
+│   │   └── icons/               # UI icons
+│   └── templates/               # HTML templates
+│       └── index.html           # Main template
 ├── tests/                       # Python tests
 ├── Makefile                     # Capability commands
 ├── pyproject.toml              # Python package config
@@ -35,15 +52,40 @@ testdrive-jsui/
 └── README.md                   # This file
 ```
 
+**Key Design Principles:**
+
+- **Single Source of Truth**: All assets in one capability directory
+- **Self-Declaration**: Plugin declares its own paths (no hardcoded discovery)
+- **Clean Boundaries**: JSON config interface between Python and JavaScript
+- **No Code Mixing**: JavaScript stays in `.js` files, never embedded in Python
+- **Plugin Independence**: Can be moved/installed anywhere
+
 ## 🚀 **Quick Start**
 
 ### Prerequisites
 
 - **Python 3.8+** with pip
-- **Node.js 16+** with npm
-- **MarkiTect main project** installed
+- **Node.js 16+** with npm (optional, for JavaScript testing)
 
-### Installation
+### Standalone Installation
+
+TestDrive-JSUI can be used completely independently of MarkiTect:
+
+```bash
+# Clone or copy this directory
+git clone <repo-url> testdrive-jsui
+cd testdrive-jsui
+
+# Install Python package in development mode
+pip install -e .
+
+# (Optional) Install JavaScript dependencies for testing
+npm install
+```
+
+### Integration with MarkiTect
+
+If using within the MarkiTect project:
 
 ```bash
 # Navigate to the capability directory
@@ -58,6 +100,115 @@ make testdrive-jsui-status          # Check environment
 make testdrive-jsui-test-all        # Run all tests
 ```
 
+## 📦 **Standalone Usage**
+
+### As a Rendering Engine Plugin
+
+TestDrive-JSUI implements a plugin interface that allows it to be used independently:
+
+```python
+from pathlib import Path
+from testdrive_jsui import TestDriveJSUIEngine
+
+# Create engine instance
+engine = TestDriveJSUIEngine()
+
+# The engine declares its own location - no hardcoded paths!
+source_dir = engine.get_plugin_source_dir()
+print(f"Plugin located at: {source_dir}")
+
+# Get organized asset paths
+asset_paths = engine.get_asset_paths()
+# Returns: {'js': Path(...), 'css': Path(...), 'images': Path(...), 'templates': Path(...)}
+
+# Get required assets list
+assets = engine.get_required_assets()
+# Returns: {'js': [...], 'css': [...], 'images': [...], 'external': [...]}
+```
+
+### Rendering Documents
+
+Use the engine to render markdown content with an interactive JavaScript UI:
+
+```python
+from testdrive_jsui import TestDriveJSUIEngine
+from markitect.plugins.rendering import RenderingConfig
+from pathlib import Path
+
+# Create engine
+engine = TestDriveJSUIEngine()
+
+# Configure for development (serves from source)
+config = RenderingConfig(
+    asset_base_url='.',
+    development_mode=True,
+    plugin_source_dirs={'testdrive-jsui': engine.get_plugin_source_dir()}
+)
+
+# Render markdown content
+markdown_content = """
+# My Document
+
+This is a test of the **TestDrive-JSUI** rendering engine.
+
+## Features
+- Interactive editing
+- Section management
+- Debug controls
+"""
+
+html = engine.render_document(markdown_content, 'edit', config)
+
+# Save to file
+Path('output.html').write_text(html)
+print("✅ Rendered to output.html")
+```
+
+### Production Deployment
+
+For production, deploy assets to a static directory:
+
+```python
+from testdrive_jsui import TestDriveJSUIEngine
+from markitect.plugins.rendering import RenderingConfig
+from pathlib import Path
+
+engine = TestDriveJSUIEngine()
+
+# Configure for production
+config = RenderingConfig(
+    asset_base_url='/_static',
+    development_mode=False,
+    output_directory=Path('./dist')
+)
+
+# Assets will be copied to: dist/_static/plugins/testdrive-jsui/
+html = engine.render_document(content, 'view', config)
+```
+
+### Plugin Independence
+
+TestDrive-JSUI is designed to be fully independent:
+
+- ✅ **Self-contained**: All assets in one directory
+- ✅ **Self-declaring**: Plugin declares its own location
+- ✅ **No hardcoded paths**: Works regardless of installation location
+- ✅ **Clean interface**: Pure JSON configuration boundary
+- ✅ **No JavaScript in Python**: All JS in separate files
+- ✅ **Reusable**: Can be used in any Python project
+
+### Supported Modes
+
+```python
+# Check supported rendering modes
+modes = engine.get_supported_modes()
+# Returns: ['edit', 'view']
+
+# Validate a mode
+if engine.validate_mode('edit'):
+    html = engine.render_document(content, 'edit', config)
+```
+
 ## 🧪 **Testing**
 
 ### JavaScript Tests

capabilities/testdrive-jsui/js/config-loader.js

@@ -0,0 +1,168 @@
+/**
+ * Configuration Loader - Clean interface between Python and JavaScript
+ *
+ * This module provides the ONLY interface for Python-generated data.
+ * All dynamic data from Python must be passed through this JSON configuration.
+ */
+
+class MarkitectConfig {
+    constructor() {
+        this.config = null;
+        this.loaded = false;
+
+        // Simple immediate loading - if script is loaded, DOM is ready
+        this.loadConfig();
+    }
+
+    loadConfig() {
+        try {
+            const configElement = document.getElementById('markitect-config');
+            if (!configElement) {
+                throw new Error('Markitect configuration not found - missing markitect-config script element');
+            }
+
+            this.config = JSON.parse(configElement.textContent);
+            this.loaded = true;
+            console.log('✅ Markitect configuration loaded successfully');
+
+            // Validate required fields
+            this.validateConfig();
+
+        } catch (error) {
+            console.error('❌ Failed to load Markitect configuration:', error);
+            this.config = this.getDefaultConfig();
+        }
+    }
+
+    validateConfig() {
+        const required = ['markdownContent', 'mode'];
+        const missing = required.filter(key => !(key in this.config));
+
+        if (missing.length > 0) {
+            console.warn('⚠️ Missing required config fields:', missing);
+        }
+    }
+
+    getDefaultConfig() {
+        return {
+            markdownContent: '# Default Content\n\nConfiguration failed to load.',
+            markdownContentWithDogtag: '# Default Content\n\nConfiguration failed to load.',
+            dogtagContent: '',
+            mode: 'edit',
+            theme: 'github',
+            keyboardShortcuts: true,
+            autosave: false,
+            sections: true,
+            originalFilename: 'document',
+            version: 'Markitect v0.8.1',
+            repoName: 'Markitect',
+            base64References: {}
+        };
+    }
+
+    // Getter methods for clean access
+    get markdownContent() {
+        return this.config.markdownContent || '';
+    }
+
+    get markdownContentWithDogtag() {
+        return this.config.markdownContentWithDogtag || this.markdownContent;
+    }
+
+    get dogtagContent() {
+        return this.config.dogtagContent || '';
+    }
+
+    get mode() {
+        return this.config.mode || 'edit';
+    }
+
+    get isEditMode() {
+        return this.mode === 'edit';
+    }
+
+    get isInsertMode() {
+        return this.mode === 'insert';
+    }
+
+    get theme() {
+        return this.config.theme || 'github';
+    }
+
+    get originalFilename() {
+        return this.config.originalFilename || 'document';
+    }
+
+    get version() {
+        return this.config.version || 'Markitect v0.8.1';
+    }
+
+    get repoName() {
+        return this.config.repoName || 'Markitect';
+    }
+
+    get keyboardShortcuts() {
+        return this.config.keyboardShortcuts !== false;
+    }
+
+    get base64References() {
+        return this.config.base64References || {};
+    }
+
+    get restrictedHeadingLevels() {
+        return this.config.restrictedHeadingLevels || [1, 2, 3];
+    }
+
+    // Check if config is ready for access
+    isReady() {
+        return this.loaded && this.config !== null;
+    }
+
+    // Wait for config to be ready
+    waitForReady(callback, maxWait = 5000) {
+        const startTime = Date.now();
+        const checkReady = () => {
+            if (this.isReady()) {
+                callback();
+            } else if (Date.now() - startTime < maxWait) {
+                setTimeout(checkReady, 50);
+            } else {
+                console.error('❌ Configuration loading timeout after', maxWait, 'ms');
+                callback(); // Call anyway with default config
+            }
+        };
+        checkReady();
+    }
+
+    // Get full editor configuration object
+    getEditorConfig() {
+        if (!this.isReady()) {
+            console.warn('⚠️ Configuration not ready, using defaults');
+            return this.getDefaultConfig();
+        }
+
+        return {
+            mode: this.mode,
+            theme: this.theme,
+            keyboardShortcuts: this.keyboardShortcuts,
+            autosave: this.config.autosave || false,
+            sections: this.config.sections !== false,
+            originalFilename: this.originalFilename,
+            version: this.version,
+            repoName: this.repoName,
+            restrictedHeadingLevels: this.restrictedHeadingLevels
+        };
+    }
+}
+
+// Global configuration instance
+window.markitectConfig = new MarkitectConfig();
+
+// Legacy compatibility - expose common config values globally
+window.editorConfig = window.markitectConfig.getEditorConfig();
+window.markitectBase64References = window.markitectConfig.base64References;
+
+// Export for module use
+if (typeof module !== 'undefined' && module.exports) {
+    module.exports = MarkitectConfig;
+}

capabilities/testdrive-jsui/js/core/debug-system.js

@@ -0,0 +1,290 @@
+/**
+ * Independent Debug System for Markitect
+ * Uses IndexedDB for persistence and provides selection-based filtering
+ */
+class MarkitectDebugSystem {
+    constructor() {
+        this.db = null;
+        this.messages = [];
+        this.maxMessages = 1000;
+        this.isEnabled = true;
+        this.subscribers = [];
+
+        // Selection and filtering system
+        this.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'])
+        };
+
+        this.init();
+    }
+
+    // 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 = {
+            timestamp: new Date().toISOString(),
+            message: String(message),
+            category: category.toUpperCase(),
+            source: String(source),
+            context: context || {},
+            id: null // Will be set by IndexedDB
+        };
+
+        // Store in IndexedDB if available
+        if (this.db) {
+            try {
+                await this.saveMessage(messageObj);
+            } catch (error) {
+                console.warn('Failed to save debug message to IndexedDB:', error);
+            }
+        }
+
+        // Store in memory
+        this.messages.unshift(messageObj);
+
+        // Limit memory storage
+        if (this.messages.length > this.maxMessages) {
+            this.messages = this.messages.slice(0, this.maxMessages);
+        }
+
+        // Notify subscribers
+        this.notifySubscribers(messageObj);
+
+        // Console output for development
+        const consoleMethod = category.toLowerCase() === 'error' ? 'error' :
+                             category.toLowerCase() === 'warning' ? 'warn' : 'log';
+        console[consoleMethod](`[${source}] ${message}`, context);
+
+        return messageObj;
+    }
+
+    // Selection filtering logic
+    shouldIncludeMessage(message, category, source, context) {
+        if (!this.isEnabled) return false;
+
+        const eventType = context.eventType || 'UNKNOWN';
+        const criteria = this.selectionCriteria;
+
+        // Check event type filters
+        switch (eventType.toUpperCase()) {
+            case 'DOCUMENT':
+                if (!criteria.includeDocumentEvents) return false;
+                break;
+            case 'SYSTEM':
+                if (!criteria.includeSystemEvents) return false;
+                break;
+            case 'CONTROL':
+                if (!criteria.includeControlEvents) return false;
+                break;
+            case 'EDITING':
+                if (!criteria.includeEditingEvents) return false;
+                break;
+            case 'NAVIGATION':
+                if (!criteria.includeNavigationEvents) return false;
+                break;
+        }
+
+        // Check excluded sources
+        if (criteria.excludedSources.has(source)) {
+            return false;
+        }
+
+        // Check heading-specific filtering
+        if (context.sectionId && criteria.includedHeadings.size > 0) {
+            const sectionElement = document.getElementById(context.sectionId);
+            if (sectionElement) {
+                const heading = sectionElement.querySelector('h1, h2, h3, h4, h5, h6');
+                if (heading && !criteria.includedHeadings.has(heading.textContent.trim())) {
+                    return false;
+                }
+            }
+        }
+
+        return true;
+    }
+
+    // Save message to IndexedDB
+    async saveMessage(messageObj) {
+        return new Promise((resolve, reject) => {
+            const transaction = this.db.transaction(['messages'], 'readwrite');
+            const store = transaction.objectStore('messages');
+            const request = store.add(messageObj);
+
+            request.onsuccess = () => resolve(request.result);
+            request.onerror = () => reject(request.error);
+        });
+    }
+
+    // Load messages from IndexedDB
+    async loadMessages() {
+        if (!this.db) return [];
+
+        return new Promise((resolve, reject) => {
+            const transaction = this.db.transaction(['messages'], 'readonly');
+            const store = transaction.objectStore('messages');
+            const request = store.getAll();
+
+            request.onsuccess = () => {
+                this.messages = request.result.reverse(); // Most recent first
+                resolve(this.messages);
+            };
+            request.onerror = () => reject(request.error);
+        });
+    }
+
+    // Clear all messages
+    async clearMessages() {
+        this.messages = [];
+
+        if (this.db) {
+            return new Promise((resolve, reject) => {
+                const transaction = this.db.transaction(['messages'], 'readwrite');
+                const store = transaction.objectStore('messages');
+                const request = store.clear();
+
+                request.onsuccess = () => resolve();
+                request.onerror = () => reject(request.error);
+            });
+        }
+    }
+
+    // Get filtered messages
+    getMessages(filter = {}) {
+        let filteredMessages = [...this.messages];
+
+        if (filter.category) {
+            filteredMessages = filteredMessages.filter(msg =>
+                msg.category.toLowerCase() === filter.category.toLowerCase()
+            );
+        }
+
+        if (filter.source) {
+            filteredMessages = filteredMessages.filter(msg =>
+                msg.source.toLowerCase().includes(filter.source.toLowerCase())
+            );
+        }
+
+        if (filter.since) {
+            const sinceDate = new Date(filter.since);
+            filteredMessages = filteredMessages.filter(msg =>
+                new Date(msg.timestamp) >= sinceDate
+            );
+        }
+
+        if (filter.limit) {
+            filteredMessages = filteredMessages.slice(0, filter.limit);
+        }
+
+        return filteredMessages;
+    }
+
+    // Update selection criteria
+    updateSelectionCriteria(updates) {
+        Object.assign(this.selectionCriteria, updates);
+        this.notifySubscribers({ type: 'criteria-updated', criteria: this.selectionCriteria });
+    }
+
+    // Add heading to monitoring
+    addHeadingToMonitoring(headingText) {
+        this.selectionCriteria.includedHeadings.add(headingText);
+    }
+
+    // Remove heading from monitoring
+    removeHeadingFromMonitoring(headingText) {
+        this.selectionCriteria.includedHeadings.delete(headingText);
+    }
+
+    // Scan document for available headings
+    scanDocumentHeadings() {
+        const headings = document.querySelectorAll('h1, h2, h3, h4, h5, h6');
+        return Array.from(headings)
+            .map(h => h.textContent.trim())
+            .filter(text => text.length > 0 && !text.toLowerCase().includes('control'));
+    }
+
+    // Subscribe to debug messages
+    subscribe(callback) {
+        this.subscribers.push(callback);
+        return () => {
+            const index = this.subscribers.indexOf(callback);
+            if (index > -1) {
+                this.subscribers.splice(index, 1);
+            }
+        };
+    }
+
+    // Notify all subscribers
+    notifySubscribers(message) {
+        this.subscribers.forEach(callback => {
+            try {
+                callback(message);
+            } catch (error) {
+                console.error('Debug subscriber error:', error);
+            }
+        });
+    }
+
+    // Toggle debug system
+    setEnabled(enabled) {
+        this.isEnabled = enabled;
+        this.addMessage(
+            `Debug system ${enabled ? 'enabled' : 'disabled'}`,
+            'INFO',
+            'DebugSystem',
+            { eventType: 'SYSTEM' }
+        );
+    }
+
+    // Get statistics
+    getStats() {
+        const stats = {
+            total: this.messages.length,
+            byCategory: {},
+            bySource: {},
+            enabled: this.isEnabled,
+            criteria: { ...this.selectionCriteria }
+        };
+
+        this.messages.forEach(msg => {
+            stats.byCategory[msg.category] = (stats.byCategory[msg.category] || 0) + 1;
+            stats.bySource[msg.source] = (stats.bySource[msg.source] || 0) + 1;
+        });
+
+        return stats;
+    }
+}
+
+// Initialize and expose globally
+window.MarkitectDebugSystem = new MarkitectDebugSystem();

capabilities/testdrive-jsui/js/main-updated.js

@@ -0,0 +1,287 @@
+/**
+ * Main Markitect JavaScript Entry Point - Clean Architecture Version
+ *
+ * Uses ONLY the JSON configuration interface - NO Python-generated JavaScript!
+ * Initializes all controls and systems when document is ready
+ * Implements graceful degradation for missing dependencies
+ */
+
+// Main application module
+const MarkitectMain = {
+    initialized: false,
+    config: null,
+
+    // Initialize the complete application
+    initialize: function() {
+        if (this.initialized) {
+            console.log('⚠️ MarkitectMain already initialized, skipping');
+            return;
+        }
+
+        console.log('🚀 MarkitectMain initializing...');
+
+        try {
+            // Get configuration - if not loaded, use defaults
+            this.config = window.markitectConfig;
+            if (!this.config || !this.config.loaded) {
+                console.warn('⚠️ Configuration not loaded, proceeding with defaults');
+                this.config = {
+                    markdownContent: document.querySelector('#markdown-content')?.textContent || '',
+                    mode: 'edit',
+                    theme: 'github'
+                };
+            }
+
+            // Initialize core systems
+            this.initializeCoreComponents();
+            this.initializeControlPanels();
+            this.setupEventHandlers();
+            this.renderContent();
+
+            this.initialized = true;
+            console.log('✅ MarkitectMain initialization complete');
+
+        } catch (error) {
+            console.error('❌ MarkitectMain initialization failed:', error);
+            this.fallbackMode();
+        }
+    },
+
+    // Initialize core modular components
+    initializeCoreComponents: function() {
+        console.log('🔧 Initializing core components...');
+
+        const container = document.getElementById('markdown-content') || document.body;
+
+        // Initialize section manager
+        if (typeof SectionManager !== 'undefined') {
+            this.sectionManager = new SectionManager();
+            console.log('✅ SectionManager initialized');
+        } else {
+            throw new Error('SectionManager not available');
+        }
+
+        // Initialize DOM renderer
+        if (typeof DOMRenderer !== 'undefined') {
+            this.domRenderer = new DOMRenderer(this.sectionManager, container);
+            console.log('✅ DOMRenderer initialized');
+        } else {
+            throw new Error('DOMRenderer not available');
+        }
+
+        // Initialize debug panel
+        if (typeof DebugPanel !== 'undefined') {
+            this.debugPanel = new DebugPanel();
+            console.log('✅ DebugPanel initialized');
+        }
+
+        // Initialize document controls
+        if (typeof DocumentControls !== 'undefined') {
+            this.documentControls = new DocumentControls();
+            this.documentControls.create();
+            console.log('✅ DocumentControls initialized');
+        }
+    },
+
+    // Initialize enhanced control panels with compass positioning
+    initializeControlPanels: function() {
+        console.log('🎛️ Initializing enhanced control panels with compass positioning...');
+
+        // ContentsControl (Northwest)
+        if (typeof ContentsControl !== 'undefined') {
+            this.contentsControl = new ContentsControl();
+            this.contentsControl.config.position = 'nw';
+            this.contentsControl.show();
+            window.contentsControl = this.contentsControl;
+            console.log('✅ ContentsControl initialized (Northwest) with enhanced ControlBase');
+        }
+
+        // StatusControl (East)
+        if (typeof StatusControl !== 'undefined') {
+            this.statusControl = new StatusControl();
+            this.statusControl.config.position = 'e';
+            this.statusControl.show();
+            window.statusControl = this.statusControl;
+            console.log('✅ StatusControl initialized (East) with enhanced ControlBase');
+        }
+
+        // DebugControl (Southeast)
+        if (typeof DebugControl !== 'undefined') {
+            this.debugControl = new DebugControl();
+            this.debugControl.config.position = 'se';
+            this.debugControl.show();
+            window.debugControl = this.debugControl;
+            console.log('✅ DebugControl initialized (Southeast) with enhanced ControlBase');
+        }
+
+        // EditControl (Northeast)
+        if (typeof EditControl !== 'undefined') {
+            this.editControl = new EditControl();
+            this.editControl.config.position = 'ne';
+            this.editControl.show();
+            window.editControl = this.editControl;
+            console.log('✅ EditControl initialized (Northeast) with enhanced ControlBase');
+        }
+    },
+
+    // Setup event handlers
+    setupEventHandlers: function() {
+        console.log('🔌 Setting up event handlers...');
+
+        if (!this.documentControls) return;
+
+        this.documentControls.setEventHandlers({
+            'save-document': () => {
+                console.log('💾 Save document clicked');
+                try {
+                    const currentMarkdown = this.sectionManager.getDocumentMarkdown();
+                    const now = new Date();
+                    const timestamp = now.toISOString().slice(0, 19).replace(/:/g, '-').replace('T', '-');
+                    const filename = `${this.config.originalFilename}-edited-${timestamp}.md`;
+
+                    const blob = new Blob([currentMarkdown], { type: 'text/markdown' });
+                    const url = URL.createObjectURL(blob);
+                    const a = document.createElement('a');
+                    a.href = url;
+                    a.download = filename;
+                    document.body.appendChild(a);
+                    a.click();
+                    document.body.removeChild(a);
+                    URL.revokeObjectURL(url);
+
+                    if (this.debugPanel) {
+                        this.debugPanel.addMessage(`Document saved as: ${filename}`, 'SUCCESS');
+                    }
+                    console.log(`✅ Document saved as: ${filename}`);
+
+                } catch (error) {
+                    if (this.debugPanel) {
+                        this.debugPanel.addMessage(`Save failed: ${error.message}`, 'ERROR');
+                    }
+                    console.error('❌ Save error:', error);
+                }
+            },
+
+            'reset-all': () => {
+                console.log('🔄 Reset all clicked');
+                try {
+                    this.domRenderer.hideCurrentEditor();
+                    const allSections = Array.from(this.sectionManager.sections.values());
+                    allSections.forEach(section => section.resetToOriginal());
+                    this.domRenderer.renderAllSections(allSections);
+
+                    if (this.debugPanel) {
+                        this.debugPanel.addMessage('Reset all sections to original state', 'INFO');
+                    }
+                } catch (error) {
+                    console.error('❌ Reset all failed:', error);
+                }
+            },
+
+            'show-status': () => {
+                const status = this.sectionManager.getDocumentStatus();
+                alert(`Document Status:\nTotal Sections: ${status.totalSections}\nEditing Sections: ${status.editingSections}`);
+            },
+
+            'toggle-debug': () => {
+                if (this.debugPanel) {
+                    this.debugPanel.toggle();
+                }
+            }
+        });
+
+        // Setup section manager event handlers
+        if (this.sectionManager && this.debugPanel) {
+            this.sectionManager.on('sections-created', (data) => {
+                this.debugPanel.addMessage(`Created ${data.count} sections`, 'INFO');
+            });
+
+            this.sectionManager.on('edit-started', (data) => {
+                this.debugPanel.addMessage(`Edit started for section: ${data.sectionId}`, 'DEBUG');
+            });
+
+            this.sectionManager.on('changes-accepted', (data) => {
+                this.debugPanel.addMessage(`Changes accepted for section: ${data.sectionId}`, 'SUCCESS');
+                this.updateSectionDOM(data.sectionId);
+            });
+
+            this.sectionManager.on('changes-cancelled', (data) => {
+                this.debugPanel.addMessage(`Changes cancelled for section: ${data.sectionId}`, 'WARNING');
+            });
+        }
+    },
+
+    // Render content using the configuration
+    renderContent: function() {
+        console.log('📄 Rendering markdown content...');
+
+        const markdownToRender = this.config.markdownContent || '';
+        if (markdownToRender.trim()) {
+            const sections = this.sectionManager.createSectionsFromMarkdown(markdownToRender);
+            this.domRenderer.renderAllSections(sections);
+
+            if (this.debugPanel) {
+                this.debugPanel.addMessage(`Initialized with ${sections.length} sections`, 'INFO');
+            }
+            console.log(`✅ Rendered ${sections.length} sections`);
+        } else {
+            if (this.debugPanel) {
+                this.debugPanel.addMessage('No markdown content to initialize', 'WARNING');
+            }
+            console.warn('⚠️ No markdown content to render');
+        }
+    },
+
+    // Update section DOM after changes
+    updateSectionDOM: function(sectionId) {
+        try {
+            const section = this.sectionManager.sections.get(sectionId);
+            if (section) {
+                const sectionElement = this.domRenderer.findSectionElement(sectionId);
+                if (sectionElement) {
+                    const newElement = this.domRenderer.renderSection(section);
+                    sectionElement.parentNode.replaceChild(newElement, sectionElement);
+
+                    if (this.debugPanel) {
+                        this.debugPanel.addMessage(`DOM updated for section: ${sectionId}`, 'INFO');
+                    }
+                }
+            }
+        } catch (error) {
+            console.error('❌ Failed to update section DOM:', error);
+        }
+    },
+
+    // Fallback mode if initialization fails
+    fallbackMode: function() {
+        console.warn('⚠️ Running in fallback mode');
+
+        // Basic content rendering fallback
+        const contentDiv = document.getElementById('markdown-content');
+        if (contentDiv && this.config && this.config.markdownContent) {
+            const basicHtml = this.config.markdownContent
+                .replace(/^# (.*$)/gim, '<h1>$1</h1>')
+                .replace(/^## (.*$)/gim, '<h2>$1</h2>')
+                .replace(/^### (.*$)/gim, '<h3>$1</h3>')
+                .replace(/\n\n/g, '</p><p>')
+                .replace(/\n/g, '<br>');
+
+            contentDiv.innerHTML = `<p>${basicHtml}</p>`;
+            console.log('✅ Fallback content rendered');
+        }
+    }
+};
+
+// Make components globally available for debugging
+window.MarkitectMain = MarkitectMain;
+
+// Auto-initialize when DOM is ready
+if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', function() {
+        // Small delay to ensure config is loaded
+        setTimeout(() => MarkitectMain.initialize(), 100);
+    });
+} else {
+    // DOM already ready
+    setTimeout(() => MarkitectMain.initialize(), 100);
+}

capabilities/testdrive-jsui/js/main.js

@@ -0,0 +1,201 @@
+/**
+ * Main Markitect JavaScript Entry Point
+ * Initializes all controls and systems when document is ready
+ * Implements graceful degradation for missing dependencies
+ * Supports Fail Fast strict mode for development
+ */
+
+// Development mode detection
+const MARKITECT_STRICT_MODE = (
+    window.location.hostname === 'localhost' ||
+    window.location.hostname === '127.0.0.1' ||
+    window.location.search.includes('strict=true') ||
+    window.markitectStrictMode === true
+);
+
+// Utility functions for safe initialization
+const MarkitectMain = {
+    // Safe dependency checking with timeout
+    checkDependencies: function() {
+        const dependencies = {
+            debugSystem: !!window.MarkitectDebugSystem,
+            control: !!window.Control,
+            statusControl: !!window.StatusControl,
+            debugControl: !!window.DebugControl,
+            contentsControl: !!window.ContentsControl,
+            editControl: !!window.EditControl
+        };
+
+        console.log('📋 Dependency check results:', dependencies);
+        return dependencies;
+    },
+
+    // Safe logging that works even without debug system
+    safeLog: function(message, level = 'INFO', component = 'Main', data = {}) {
+        console.log(`[${level}] ${component}: ${message}`);
+
+        // In strict mode, throw on errors for immediate development feedback
+        if (MARKITECT_STRICT_MODE && level === 'ERROR') {
+            console.error(`🚨 STRICT MODE: Throwing error for immediate diagnosis`);
+            throw new Error(`${component}: ${message}`);
+        }
+
+        // Try to use debug system if available
+        if (window.MarkitectDebugSystem && window.MarkitectDebugSystem.addMessage) {
+            try {
+                window.MarkitectDebugSystem.addMessage(message, level, component, { ...data, eventType: 'SYSTEM' });
+            } catch (error) {
+                console.warn('Debug system logging failed:', error);
+                if (MARKITECT_STRICT_MODE) {
+                    throw error; // Fail fast in development
+                }
+            }
+        }
+    },
+
+    // Safe control initialization with fallbacks
+    initializeControl: function(controlClass, controlName, icon = '🔧') {
+        const timeout = setTimeout(() => {
+            const message = `${controlName} initialization timed out`;
+            console.warn(message);
+            if (MARKITECT_STRICT_MODE) {
+                throw new Error(message); // Fail fast in development
+            }
+        }, 5000);
+
+        try {
+            if (!controlClass) {
+                const message = `${controlName} class not available, skipping`;
+                this.safeLog(message, MARKITECT_STRICT_MODE ? 'ERROR' : 'WARNING');
+                clearTimeout(timeout);
+                return null;
+            }
+
+            const controlInstance = new controlClass();
+            if (!controlInstance || typeof controlInstance.createControl !== 'function') {
+                throw new Error(`Invalid ${controlName} instance`);
+            }
+
+            const element = controlInstance.createControl();
+            if (!element) {
+                throw new Error(`${controlName} failed to create element`);
+            }
+
+            clearTimeout(timeout);
+            this.safeLog(`${controlName} initialized successfully`, 'SUCCESS');
+            return controlInstance;
+
+        } catch (error) {
+            clearTimeout(timeout);
+            this.safeLog(`${controlName} initialization failed: ${error.message}`, 'ERROR');
+
+            // Create minimal fallback control if core Control class exists
+            if (window.Control && controlName === 'StatusControl') {
+                return this.createFallbackControl(controlName, icon);
+            }
+
+            return null;
+        }
+    },
+
+    // Create minimal fallback control for essential controls
+    createFallbackControl: function(name, icon) {
+        try {
+            const fallback = Object.create(window.Control);
+            fallback.config = {
+                icon: icon,
+                title: `${name} (Fallback)`,
+                className: `${name.toLowerCase()}-fallback`,
+                defaultContent: `${name} is running in fallback mode due to initialization issues.`,
+                ariaLabel: `${name} Fallback Control`,
+                position: 'e'
+            };
+
+            const element = fallback.createControl();
+            if (element) {
+                this.safeLog(`${name} fallback control created`, 'INFO');
+                return { control: fallback };
+            }
+        } catch (error) {
+            this.safeLog(`Fallback control creation failed: ${error.message}`, 'ERROR');
+        }
+        return null;
+    },
+
+    // Main initialization with comprehensive error handling
+    initialize: function() {
+        this.safeLog('🚀 Initializing Markitect controls and systems...', 'INFO');
+
+        // Check dependencies first
+        const deps = this.checkDependencies();
+
+        if (!deps.control) {
+            this.safeLog('❌ Core Control system not available, cannot initialize UI controls', 'ERROR');
+            return;
+        }
+
+        const initializedControls = {};
+        let successCount = 0;
+        let totalAttempts = 0;
+
+        // Initialize controls with graceful degradation
+        const controlsToInit = [
+            { class: window.StatusControl, name: 'StatusControl', key: 'statusControl', icon: '📊', essential: true },
+            { class: window.DebugControl, name: 'DebugControl', key: 'debugControl', icon: '🪲', essential: false },
+            { class: window.ContentsControl, name: 'ContentsControl', key: 'contentsControl', icon: '☰', essential: false },
+            { class: window.EditControl, name: 'EditControl', key: 'editControl', icon: '✏️', essential: false }
+        ];
+
+        controlsToInit.forEach(({ class: controlClass, name, key, icon, essential }) => {
+            totalAttempts++;
+            const instance = this.initializeControl(controlClass, name, icon);
+
+            if (instance) {
+                initializedControls[key] = instance.control || instance;
+                window[key] = initializedControls[key];
+                successCount++;
+            } else if (essential) {
+                this.safeLog(`Essential control ${name} failed to initialize`, 'ERROR');
+            }
+        });
+
+        // Report initialization results
+        const successRate = Math.round((successCount / totalAttempts) * 100);
+        if (successCount === totalAttempts) {
+            this.safeLog('✅ All controls initialized successfully', 'SUCCESS');
+        } else if (successCount > 0) {
+            this.safeLog(`⚠️ Partial initialization: ${successCount}/${totalAttempts} controls (${successRate}%) initialized`, 'WARNING');
+        } else {
+            this.safeLog('❌ No controls could be initialized', 'ERROR');
+        }
+
+        // Set up global error handlers for runtime protection
+        this.setupErrorHandlers();
+
+        this.safeLog(`✅ Markitect initialization complete (${successCount}/${totalAttempts} controls active)`, 'INFO');
+    },
+
+    // Set up global error handlers
+    setupErrorHandlers: function() {
+        // Catch unhandled errors
+        window.addEventListener('error', (event) => {
+            this.safeLog(`Unhandled error: ${event.message} at ${event.filename}:${event.lineno}`, 'ERROR');
+        });
+
+        // Catch unhandled promise rejections
+        window.addEventListener('unhandledrejection', (event) => {
+            this.safeLog(`Unhandled promise rejection: ${event.reason}`, 'ERROR');
+            event.preventDefault(); // Prevent console spam
+        });
+    }
+};
+
+// Initialize when DOM is ready with additional safety
+if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', () => {
+        setTimeout(() => MarkitectMain.initialize(), 100); // Brief delay for dependencies
+    });
+} else {
+    // DOM already loaded
+    setTimeout(() => MarkitectMain.initialize(), 100);
+}

capabilities/testdrive-jsui/js/plugins/document-navigator-plugin.js

@@ -0,0 +1,207 @@
+/**
+ * DocumentNavigator Plugin Definition
+ *
+ * Plugin definition for the Substack-style document navigation widget.
+ * Provides floating table of contents with smooth scrolling and scroll spy.
+ */
+export default {
+    name: 'DocumentNavigator',
+    version: '1.0.0',
+    description: 'Substack-style floating document navigation with table of contents',
+    author: 'Markitect Core',
+    category: 'navigation',
+
+    // Dependencies that must be loaded first
+    dependencies: ['UIWidget'],
+
+    // Mixins to apply (none required for this widget)
+    mixins: [],
+
+    // Lazy load the actual widget class
+    async load() {
+        const { DocumentNavigator } = await import('../widgets/navigation/DocumentNavigator.js');
+        return DocumentNavigator;
+    },
+
+    // Default configuration
+    defaultOptions: {
+        position: 'left',               // 'left' or 'right' side
+        collapsed: true,                // Start in collapsed state
+        autoHide: true,                 // Hide on mobile devices
+        maxHeadingLevel: 3,            // Include H1, H2, H3
+        enableScrollSpy: true,          // Highlight current section
+        smoothScroll: true,             // Smooth scroll to headings
+        animationDuration: 300,         // Animation timing in ms
+        minHeadings: 2,                // Minimum headings to show widget
+        theme: 'default',              // Theme variant
+
+        // Layout options
+        width: '280px',                // Expanded width
+        collapsedWidth: '40px',        // Collapsed width
+        offset: {                      // Position offset
+            top: '80px',
+            side: '20px'
+        },
+
+        // Accessibility
+        enableKeyboard: true,           // Keyboard navigation support
+        ariaLabel: 'Document Navigation'
+    },
+
+    // Plugin lifecycle hooks
+    async onLoad(instance, options) {
+        console.log('DocumentNavigator plugin loaded:', {
+            headings: instance.headings.length,
+            position: options.position,
+            collapsed: options.collapsed
+        });
+
+        // Auto-initialize after load
+        await instance.initialize();
+
+        return instance;
+    },
+
+    async onUnload(instance) {
+        console.log('DocumentNavigator plugin unloading');
+        await instance.destroy();
+    },
+
+    // Feature flags and capabilities
+    capabilities: {
+        draggable: false,              // Not draggable (fixed position)
+        resizable: false,              // Not resizable (fixed width)
+        themeable: true,               // Supports themes
+        persistent: false,             // Rebuilds on page changes
+        responsive: true,              // Responsive behavior
+        keyboard: true,                // Keyboard accessible
+        scrollSpy: true,              // Scroll spy functionality
+        smoothScroll: true            // Smooth scroll navigation
+    },
+
+    // Integration requirements
+    requirements: {
+        container: true,               // Requires container element
+        headings: true,               // Requires document headings
+        scrollable: true              // Requires scrollable content
+    },
+
+    // Event types emitted by this widget
+    events: [
+        'rendered',                   // Widget rendered to DOM
+        'navigate',                   // User navigated to heading
+        'toggle',                     // Widget expanded/collapsed
+        'theme-changed',              // Theme was changed
+        'destroyed'                   // Widget was destroyed
+    ],
+
+    // CSS classes used by this widget
+    cssClasses: [
+        'document-navigator',         // Main widget class
+        'navigator-toggle',           // Toggle button
+        'navigator-list',            // Navigation list
+        'navigator-item',            // Navigation items
+        'navigator-link',            // Navigation links
+        'navigator-header',          // List header
+        'navigator-close',           // Close button
+        'navigator-empty'            // Empty state
+    ],
+
+    // Theme variants
+    themes: {
+        default: {
+            backgroundColor: 'rgba(255, 255, 255, 0.95)',
+            borderColor: '#e1e5e9',
+            textColor: '#333',
+            activeColor: '#1976d2',
+            activeBackground: '#e3f2fd'
+        },
+        dark: {
+            backgroundColor: 'rgba(45, 45, 45, 0.95)',
+            borderColor: '#555',
+            textColor: '#e0e0e0',
+            activeColor: '#64b5f6',
+            activeBackground: '#1e3a8a'
+        },
+        minimal: {
+            backgroundColor: 'rgba(248, 249, 250, 0.90)',
+            borderColor: '#dee2e6',
+            textColor: '#495057',
+            activeColor: '#007bff',
+            activeBackground: '#e7f1ff'
+        }
+    },
+
+    // Usage examples
+    examples: {
+        basic: {
+            description: 'Basic document navigator on the left side',
+            code: `
+                const navigator = await widgetSystem.createWidget('DocumentNavigator');
+                await navigator.show();
+            `
+        },
+        customized: {
+            description: 'Customized navigator with specific options',
+            code: `
+                const navigator = await widgetSystem.createWidget('DocumentNavigator', {
+                    position: 'right',
+                    collapsed: false,
+                    maxHeadingLevel: 4,
+                    theme: 'dark'
+                });
+                await navigator.show();
+            `
+        },
+        withContainer: {
+            description: 'Navigator for specific container content',
+            code: `
+                const container = document.getElementById('article-content');
+                const navigator = await widgetSystem.createWidget('DocumentNavigator', {
+                    container: container,
+                    minHeadings: 1
+                });
+                await navigator.show();
+            `
+        }
+    },
+
+    // Development and testing helpers
+    dev: {
+        testHeadingStructure() {
+            // Helper to create test content with headings
+            const testContent = `
+                <h1>Chapter 1: Introduction</h1>
+                <p>Lorem ipsum content...</p>
+                <h2>Section 1.1: Overview</h2>
+                <h3>Subsection 1.1.1: Details</h3>
+                <h2>Section 1.2: Implementation</h2>
+                <h1>Chapter 2: Advanced Topics</h1>
+                <h2>Section 2.1: Performance</h2>
+            `;
+
+            const container = document.createElement('div');
+            container.innerHTML = testContent;
+            container.style.cssText = 'height: 2000px; padding: 2rem;';
+            document.body.appendChild(container);
+
+            return container;
+        },
+
+        async createTestInstance(options = {}) {
+            // Helper to create test instance with sample content
+            const container = this.testHeadingStructure();
+
+            const navigator = new (await this.load())({
+                container,
+                collapsed: false,
+                ...options
+            });
+
+            await navigator.initialize();
+            await navigator.render();
+
+            return { navigator, container };
+        }
+    }
+};

capabilities/testdrive-jsui/js/widgets/base/UIWidget.js

@@ -0,0 +1,215 @@
+/**
+ * UI Widget Base Class
+ *
+ * Extends Widget with DOM manipulation and visual functionality.
+ * Base for all widgets that render UI elements.
+ */
+import { Widget } from './Widget.js';
+
+export class UIWidget extends Widget {
+    constructor(options = {}) {
+        super(options);
+
+        // UI properties
+        this.element = null;
+        this.isVisible = false;
+        this.isRendered = false;
+        this.theme = options.theme || 'default';
+        this.cssClasses = new Set(['markitect-widget']);
+
+        // Animation support
+        this.animationDuration = options.animationDuration || 300;
+        this.enableAnimations = options.enableAnimations !== false;
+    }
+
+    /**
+     * Render the widget to DOM (abstract method)
+     */
+    async render() {
+        throw new Error('render() method must be implemented by subclass');
+    }
+
+    /**
+     * Show the widget
+     */
+    async show(options = {}) {
+        if (!this.isRendered) {
+            await this.render();
+        }
+
+        if (this.isVisible) {
+            return this;
+        }
+
+        this.isVisible = true;
+
+        if (this.element) {
+            if (this.enableAnimations && !options.immediate) {
+                await this.animateShow();
+            } else {
+                this.element.style.display = '';
+            }
+        }
+
+        this.emit('shown');
+        return this;
+    }
+
+    /**
+     * Hide the widget
+     */
+    async hide(options = {}) {
+        if (!this.isVisible) {
+            return this;
+        }
+
+        this.isVisible = false;
+
+        if (this.element) {
+            if (this.enableAnimations && !options.immediate) {
+                await this.animateHide();
+            } else {
+                this.element.style.display = 'none';
+            }
+        }
+
+        this.emit('hidden');
+        return this;
+    }
+
+    /**
+     * Toggle visibility
+     */
+    async toggle(options = {}) {
+        return this.isVisible ? this.hide(options) : this.show(options);
+    }
+
+    /**
+     * Show animation (override for custom animations)
+     */
+    async animateShow() {
+        if (!this.element) return;
+
+        return new Promise(resolve => {
+            this.element.style.transition = `opacity ${this.animationDuration}ms ease-in-out`;
+            this.element.style.opacity = '0';
+            this.element.style.display = '';
+
+            // Force reflow
+            this.element.offsetHeight;
+
+            this.element.style.opacity = '1';
+
+            setTimeout(() => {
+                this.element.style.transition = '';
+                resolve();
+            }, this.animationDuration);
+        });
+    }
+
+    /**
+     * Hide animation (override for custom animations)
+     */
+    async animateHide() {
+        if (!this.element) return;
+
+        return new Promise(resolve => {
+            this.element.style.transition = `opacity ${this.animationDuration}ms ease-in-out`;
+            this.element.style.opacity = '0';
+
+            setTimeout(() => {
+                this.element.style.display = 'none';
+                this.element.style.transition = '';
+                this.element.style.opacity = '';
+                resolve();
+            }, this.animationDuration);
+        });
+    }
+
+    /**
+     * CSS class management
+     */
+    addClass(className) {
+        this.cssClasses.add(className);
+        if (this.element) {
+            this.element.classList.add(className);
+        }
+        return this;
+    }
+
+    removeClass(className) {
+        this.cssClasses.delete(className);
+        if (this.element) {
+            this.element.classList.remove(className);
+        }
+        return this;
+    }
+
+    hasClass(className) {
+        return this.cssClasses.has(className);
+    }
+
+    /**
+     * Apply theme styling
+     */
+    applyTheme(themeName) {
+        const oldTheme = this.theme;
+        this.theme = themeName;
+
+        this.removeClass(`theme-${oldTheme}`);
+        this.addClass(`theme-${themeName}`);
+
+        this.emit('theme-changed', { oldTheme, newTheme: themeName });
+        return this;
+    }
+
+    /**
+     * Find child element by selector
+     */
+    findElement(selector) {
+        return this.element ? this.element.querySelector(selector) : null;
+    }
+
+    /**
+     * Find all child elements by selector
+     */
+    findElements(selector) {
+        return this.element ? this.element.querySelectorAll(selector) : [];
+    }
+
+    /**
+     * Override destroy to clean up DOM
+     */
+    async destroy() {
+        if (this.element && this.element.parentNode) {
+            this.element.parentNode.removeChild(this.element);
+        }
+
+        this.element = null;
+        this.isRendered = false;
+        this.isVisible = false;
+
+        await super.destroy();
+    }
+
+    /**
+     * Apply all CSS classes to element
+     */
+    applyCSSClasses(element = this.element) {
+        if (element) {
+            element.className = Array.from(this.cssClasses).join(' ');
+        }
+    }
+
+    /**
+     * Default configuration for UI widgets
+     */
+    getDefaultConfig() {
+        return {
+            ...super.getDefaultConfig(),
+            theme: 'default',
+            animationDuration: 300,
+            enableAnimations: true
+        };
+    }
+}

capabilities/testdrive-jsui/js/widgets/base/Widget.js

@@ -0,0 +1,141 @@
+/**
+ * Base Widget Class
+ *
+ * Foundation class for all Markitect UI widgets following the plugin architecture.
+ * Provides core functionality for event handling, state management, and lifecycle.
+ */
+export class Widget extends EventTarget {
+    constructor(options = {}) {
+        super();
+
+        // Core properties
+        this.id = options.id || `widget-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
+        this.container = options.container || document.body;
+        this.config = { ...this.getDefaultConfig(), ...options };
+
+        // State management
+        this.state = new Map();
+        this.isInitialized = false;
+        this.isDestroyed = false;
+
+        // Mixin support
+        this.mixins = [];
+
+        // Lifecycle hooks
+        this.onInitialize = options.onInitialize || (() => {});
+        this.onDestroy = options.onDestroy || (() => {});
+    }
+
+    /**
+     * Initialize the widget
+     */
+    async initialize() {
+        if (this.isInitialized || this.isDestroyed) {
+            return this;
+        }
+
+        try {
+            await this.onInitialize(this);
+            this.isInitialized = true;
+            this.emit('initialized');
+            return this;
+        } catch (error) {
+            this.emit('error', { phase: 'initialize', error });
+            throw error;
+        }
+    }
+
+    /**
+     * Destroy the widget and clean up resources
+     */
+    async destroy() {
+        if (this.isDestroyed) {
+            return;
+        }
+
+        try {
+            await this.onDestroy(this);
+            this.isDestroyed = true;
+            this.emit('destroyed');
+        } catch (error) {
+            this.emit('error', { phase: 'destroy', error });
+            throw error;
+        }
+    }
+
+    /**
+     * State management
+     */
+    setState(key, value) {
+        const oldValue = this.state.get(key);
+        this.state.set(key, value);
+        this.emit('state-changed', { key, value, oldValue });
+    }
+
+    getState(key, defaultValue = null) {
+        return this.state.get(key) ?? defaultValue;
+    }
+
+    /**
+     * Event emission wrapper
+     */
+    emit(eventType, data = {}) {
+        const event = new CustomEvent(eventType, {
+            detail: { widget: this, ...data }
+        });
+        this.dispatchEvent(event);
+    }
+
+    /**
+     * Apply mixin functionality
+     */
+    applyMixin(mixin) {
+        if (typeof mixin === 'object') {
+            Object.assign(this, mixin);
+            this.mixins.push(mixin);
+        }
+        return this;
+    }
+
+    /**
+     * Default configuration (override in subclasses)
+     */
+    getDefaultConfig() {
+        return {};
+    }
+
+    /**
+     * Utility method for creating DOM elements with styling
+     */
+    createElement(tag, options = {}) {
+        const element = document.createElement(tag);
+
+        if (options.className) {
+            element.className = options.className;
+        }
+
+        if (options.textContent) {
+            element.textContent = options.textContent;
+        }
+
+        if (options.innerHTML) {
+            element.innerHTML = options.innerHTML;
+        }
+
+        if (options.style) {
+            if (typeof options.style === 'string') {
+                element.style.cssText = options.style;
+            } else {
+                Object.assign(element.style, options.style);
+            }
+        }
+
+        if (options.attributes) {
+            Object.entries(options.attributes).forEach(([key, value]) => {
+                element.setAttribute(key, value);
+            });
+        }
+
+        return element;
+    }
+}

capabilities/testdrive-jsui/js/widgets/navigation/DocumentNavigator.js

@@ -0,0 +1,625 @@
+/**
+ * DocumentNavigator Widget
+ *
+ * Substack-style floating document navigation widget that displays a hierarchical
+ * table of contents based on document headings. Supports smooth scrolling,
+ * scroll spy, expand/collapse, and responsive behavior.
+ */
+import { UIWidget } from '../base/UIWidget.js';
+
+export class DocumentNavigator extends UIWidget {
+    constructor(options = {}) {
+        super(options);
+
+        // Navigation state
+        this.isCollapsed = this.config.collapsed;
+        this.currentSection = null;
+        this.headings = [];
+        this.navigationTree = [];
+
+        // Scroll spy state
+        this.scrollSpyEnabled = this.config.enableScrollSpy;
+        this.scrollThrottle = null;
+
+        // Event bindings
+        this.boundScrollHandler = this.handleScroll.bind(this);
+        this.boundResizeHandler = this.handleResize.bind(this);
+
+        // Initialize responsive behavior
+        this.mediaQuery = window.matchMedia('(max-width: 768px)');
+    }
+
+    getDefaultConfig() {
+        return {
+            ...super.getDefaultConfig(),
+            position: 'left',           // 'left' or 'right'
+            collapsed: true,            // Start collapsed
+            autoHide: true,             // Hide on mobile
+            maxHeadingLevel: 3,         // H1, H2, H3
+            enableScrollSpy: true,      // Highlight current section
+            smoothScroll: true,         // Smooth scroll behavior
+            animationDuration: 300,     // Animation timing
+            minHeadings: 2,            // Min headings to show navigator
+            theme: 'default',          // Theme support
+
+            // Styling options
+            width: '280px',
+            collapsedWidth: '40px',
+            offset: { top: '80px', side: '20px' },
+
+            // Accessibility
+            enableKeyboard: true,
+            ariaLabel: 'Document Navigation'
+        };
+    }
+
+    async initialize() {
+        await super.initialize();
+
+        // Extract headings from container
+        this.extractHeadings();
+        this.buildNavigationTree();
+
+        // Set up event listeners
+        if (this.scrollSpyEnabled) {
+            window.addEventListener('scroll', this.boundScrollHandler, { passive: true });
+        }
+
+        if (this.config.autoHide) {
+            window.addEventListener('resize', this.boundResizeHandler);
+            this.handleResize(); // Initial check
+        }
+
+        return this;
+    }
+
+    async render() {
+        if (this.isRendered) {
+            return this.element;
+        }
+
+        // Check if we have enough headings
+        if (this.headings.length < this.config.minHeadings) {
+            this.isRendered = true;
+            return null; // Don't render if too few headings
+        }
+
+        // Create main container
+        this.element = this.createElement('nav', {
+            className: 'document-navigator markitect-widget',
+            attributes: {
+                'aria-label': this.config.ariaLabel,
+                'role': 'navigation'
+            },
+            style: this.getNavigatorStyle()
+        });
+
+        // Apply CSS classes
+        this.applyCSSClasses();
+        this.addClass('theme-' + this.theme);
+        this.addClass('position-' + this.config.position);
+
+        // Create toggle button (always visible)
+        this.createToggleButton();
+
+        // Create navigation list (hidden when collapsed)
+        this.createNavigationList();
+
+        // Set initial visibility state
+        if (this.isCollapsed) {
+            await this.collapse({ immediate: true });
+        } else {
+            await this.expand({ immediate: true });
+        }
+
+        // Append to container
+        this.container.appendChild(this.element);
+
+        // Initialize scroll spy
+        if (this.scrollSpyEnabled) {
+            this.updateCurrentSection();
+        }
+
+        this.isRendered = true;
+        this.emit('rendered');
+
+        return this.element;
+    }
+
+    createToggleButton() {
+        this.toggleButton = this.createElement('button', {
+            className: 'navigator-toggle',
+            attributes: {
+                'type': 'button',
+                'aria-label': this.isCollapsed ? 'Expand navigation' : 'Collapse navigation',
+                'aria-expanded': !this.isCollapsed
+            },
+            innerHTML: this.getToggleIcon(),
+            style: this.getToggleStyle()
+        });
+
+        // Toggle on click
+        this.toggleButton.addEventListener('click', async () => {
+            await this.toggle();
+        });
+
+        // Keyboard support
+        if (this.config.enableKeyboard) {
+            this.toggleButton.addEventListener('keydown', this.handleKeyboard.bind(this));
+        }
+
+        this.element.appendChild(this.toggleButton);
+    }
+
+    createNavigationList() {
+        this.navigationList = this.createElement('div', {
+            className: 'navigator-list',
+            style: this.getListStyle()
+        });
+
+        if (this.headings.length === 0) {
+            this.createEmptyState();
+        } else {
+            this.populateNavigationList();
+        }
+
+        this.element.appendChild(this.navigationList);
+    }
+
+    createEmptyState() {
+        const emptyMessage = this.createElement('div', {
+            className: 'navigator-empty',
+            textContent: 'No headings found',
+            style: {
+                padding: '1rem',
+                textAlign: 'center',
+                color: '#666',
+                fontStyle: 'italic'
+            }
+        });
+
+        this.navigationList.appendChild(emptyMessage);
+    }
+
+    populateNavigationList() {
+        // Create header
+        const header = this.createElement('div', {
+            className: 'navigator-header',
+            innerHTML: `
+                <h3>Contents</h3>
+                <button class="navigator-close" aria-label="Close navigation">✕</button>
+            `,
+            style: {
+                display: 'flex',
+                justifyContent: 'space-between',
+                alignItems: 'center',
+                padding: '1rem 1rem 0.5rem',
+                borderBottom: '1px solid #eee',
+                marginBottom: '0.5rem'
+            }
+        });
+
+        // Close button functionality
+        const closeButton = header.querySelector('.navigator-close');
+        closeButton.addEventListener('click', async () => {
+            await this.collapse();
+        });
+
+        this.navigationList.appendChild(header);
+
+        // Create navigation items
+        const navContainer = this.createElement('div', {
+            className: 'navigator-items',
+            style: {
+                maxHeight: '70vh',
+                overflowY: 'auto',
+                padding: '0 0.5rem 1rem'
+            }
+        });
+
+        this.renderNavigationTree(navContainer, this.navigationTree);
+        this.navigationList.appendChild(navContainer);
+    }
+
+    renderNavigationTree(container, items, level = 0) {
+        items.forEach(item => {
+            const navItem = this.createElement('div', {
+                className: `navigator-item level-${level}`,
+                style: {
+                    marginLeft: `${level * 1}rem`,
+                    marginBottom: '0.25rem'
+                }
+            });
+
+            // Create clickable link
+            const link = this.createElement('a', {
+                className: 'navigator-link',
+                textContent: item.text,
+                attributes: {
+                    'href': `#${item.id}`,
+                    'data-target': item.id,
+                    'data-level': item.level,
+                    'role': 'button',
+                    'tabindex': '0'
+                },
+                style: {
+                    display: 'block',
+                    padding: '0.5rem 0.75rem',
+                    textDecoration: 'none',
+                    color: '#333',
+                    borderRadius: '4px',
+                    fontSize: level === 0 ? '0.9rem' : '0.8rem',
+                    fontWeight: level === 0 ? '600' : '400',
+                    transition: 'all 0.2s ease',
+                    cursor: 'pointer'
+                }
+            });
+
+            // Hover effects
+            link.addEventListener('mouseenter', () => {
+                link.style.backgroundColor = '#f0f0f0';
+            });
+
+            link.addEventListener('mouseleave', () => {
+                if (!link.classList.contains('active')) {
+                    link.style.backgroundColor = '';
+                }
+            });
+
+            // Click navigation
+            link.addEventListener('click', (e) => {
+                e.preventDefault();
+                this.navigateToHeading(item.id);
+            });
+
+            navItem.appendChild(link);
+
+            // Render children recursively
+            if (item.children && item.children.length > 0) {
+                this.renderNavigationTree(navItem, item.children, level + 1);
+            }
+
+            container.appendChild(navItem);
+        });
+    }
+
+    extractHeadings() {
+        const headingSelectors = [];
+        for (let i = 1; i <= this.config.maxHeadingLevel; i++) {
+            headingSelectors.push(`h${i}`);
+        }
+
+        const headingElements = this.container.querySelectorAll(headingSelectors.join(', '));
+
+        this.headings = Array.from(headingElements).map((heading, index) => {
+            // Ensure heading has an ID
+            if (!heading.id) {
+                heading.id = `heading-${index + 1}`;
+            }
+
+            return {
+                element: heading,
+                id: heading.id,
+                text: heading.textContent.trim(),
+                level: parseInt(heading.tagName.substring(1)),
+                offset: heading.offsetTop
+            };
+        });
+
+        return this.headings;
+    }
+
+    buildNavigationTree() {
+        this.navigationTree = [];
+        const stack = [];
+
+        this.headings.forEach(heading => {
+            const item = {
+                ...heading,
+                children: []
+            };
+
+            // Find correct parent based on heading level
+            while (stack.length > 0 && stack[stack.length - 1].level >= heading.level) {
+                stack.pop();
+            }
+
+            if (stack.length === 0) {
+                // Top level item
+                this.navigationTree.push(item);
+            } else {
+                // Child item
+                stack[stack.length - 1].children.push(item);
+            }
+
+            stack.push(item);
+        });
+
+        return this.navigationTree;
+    }
+
+    async toggle(options = {}) {
+        return this.isCollapsed ? this.expand(options) : this.collapse(options);
+    }
+
+    async expand(options = {}) {
+        if (!this.isCollapsed) {
+            return this;
+        }
+
+        this.isCollapsed = false;
+
+        if (this.toggleButton) {
+            this.toggleButton.setAttribute('aria-expanded', 'true');
+            this.toggleButton.setAttribute('aria-label', 'Collapse navigation');
+            this.toggleButton.innerHTML = this.getToggleIcon();
+        }
+
+        if (this.navigationList) {
+            if (this.enableAnimations && !options.immediate) {
+                await this.animateExpand();
+            } else {
+                this.navigationList.style.display = '';
+                this.element.style.width = this.config.width;
+            }
+        }
+
+        this.emit('toggle', { expanded: true });
+        return this;
+    }
+
+    async collapse(options = {}) {
+        if (this.isCollapsed) {
+            return this;
+        }
+
+        this.isCollapsed = true;
+
+        if (this.toggleButton) {
+            this.toggleButton.setAttribute('aria-expanded', 'false');
+            this.toggleButton.setAttribute('aria-label', 'Expand navigation');
+            this.toggleButton.innerHTML = this.getToggleIcon();
+        }
+
+        if (this.navigationList) {
+            if (this.enableAnimations && !options.immediate) {
+                await this.animateCollapse();
+            } else {
+                this.navigationList.style.display = 'none';
+                this.element.style.width = this.config.collapsedWidth;
+            }
+        }
+
+        this.emit('toggle', { expanded: false });
+        return this;
+    }
+
+    async animateExpand() {
+        return new Promise(resolve => {
+            this.navigationList.style.opacity = '0';
+            this.navigationList.style.display = '';
+
+            // Animate width and opacity
+            this.element.style.transition = `width ${this.animationDuration}ms ease-in-out`;
+            this.navigationList.style.transition = `opacity ${this.animationDuration}ms ease-in-out`;
+
+            // Force reflow
+            this.element.offsetWidth;
+
+            this.element.style.width = this.config.width;
+            this.navigationList.style.opacity = '1';
+
+            setTimeout(() => {
+                this.element.style.transition = '';
+                this.navigationList.style.transition = '';
+                resolve();
+            }, this.animationDuration);
+        });
+    }
+
+    async animateCollapse() {
+        return new Promise(resolve => {
+            this.element.style.transition = `width ${this.animationDuration}ms ease-in-out`;
+            this.navigationList.style.transition = `opacity ${this.animationDuration}ms ease-in-out`;
+
+            this.navigationList.style.opacity = '0';
+            this.element.style.width = this.config.collapsedWidth;
+
+            setTimeout(() => {
+                this.navigationList.style.display = 'none';
+                this.element.style.transition = '';
+                this.navigationList.style.transition = '';
+                resolve();
+            }, this.animationDuration);
+        });
+    }
+
+    navigateToHeading(headingId) {
+        const targetElement = document.getElementById(headingId);
+        if (!targetElement) {
+            console.warn(`Heading with ID '${headingId}' not found`);
+            return;
+        }
+
+        // Update active navigation item
+        this.setActiveItem(headingId);
+
+        // Scroll to target
+        if (this.config.smoothScroll) {
+            targetElement.scrollIntoView({
+                behavior: 'smooth',
+                block: 'start',
+                inline: 'nearest'
+            });
+        } else {
+            targetElement.scrollIntoView();
+        }
+
+        // Emit navigation event
+        this.emit('navigate', { target: headingId, element: targetElement });
+
+        // Optionally collapse after navigation on mobile
+        if (this.mediaQuery.matches && this.config.autoHide) {
+            setTimeout(() => this.collapse(), 500);
+        }
+    }
+
+    setActiveItem(headingId) {
+        // Remove previous active state
+        const previousActive = this.findElement('.navigator-link.active');
+        if (previousActive) {
+            previousActive.classList.remove('active');
+            previousActive.style.backgroundColor = '';
+        }
+
+        // Set new active state
+        const newActive = this.findElement(`[data-target="${headingId}"]`);
+        if (newActive) {
+            newActive.classList.add('active');
+            newActive.style.backgroundColor = '#e3f2fd';
+            newActive.style.color = '#1976d2';
+        }
+
+        this.currentSection = headingId;
+    }
+
+    handleScroll() {
+        if (!this.scrollSpyEnabled || !this.isRendered) {
+            return;
+        }
+
+        // Throttle scroll events
+        if (this.scrollThrottle) {
+            return;
+        }
+
+        this.scrollThrottle = setTimeout(() => {
+            this.updateCurrentSection();
+            this.scrollThrottle = null;
+        }, 100);
+    }
+
+    updateCurrentSection() {
+        const scrollPosition = window.pageYOffset + 100; // Offset for header
+        let currentHeading = null;
+
+        // Find the current heading based on scroll position
+        for (let i = this.headings.length - 1; i >= 0; i--) {
+            const heading = this.headings[i];
+            if (heading.element.offsetTop <= scrollPosition) {
+                currentHeading = heading;
+                break;
+            }
+        }
+
+        if (currentHeading && currentHeading.id !== this.currentSection) {
+            this.setActiveItem(currentHeading.id);
+        }
+    }
+
+    getCurrentSection() {
+        return this.currentSection;
+    }
+
+    handleResize() {
+        if (!this.config.autoHide) {
+            return;
+        }
+
+        if (this.mediaQuery.matches) {
+            // Mobile: hide navigator
+            if (this.element) {
+                this.element.style.display = 'none';
+            }
+        } else {
+            // Desktop: show navigator
+            if (this.element) {
+                this.element.style.display = '';
+            }
+        }
+    }
+
+    handleKeyboard(event) {
+        switch (event.key) {
+            case 'Enter':
+            case ' ':
+                event.preventDefault();
+                this.toggle();
+                break;
+            case 'Escape':
+                event.preventDefault();
+                this.collapse();
+                break;
+        }
+    }
+
+    getNavigatorStyle() {
+        const baseStyle = {
+            position: 'fixed',
+            top: this.config.offset.top,
+            zIndex: '1000',
+            backgroundColor: 'rgba(255, 255, 255, 0.95)',
+            border: '1px solid #e1e5e9',
+            borderRadius: '8px',
+            boxShadow: '0 2px 8px rgba(0, 0, 0, 0.15)',
+            backdropFilter: 'blur(8px)',
+            width: this.isCollapsed ? this.config.collapsedWidth : this.config.width,
+            maxHeight: '80vh',
+            overflow: 'hidden',
+            transition: 'width 0.3s ease-in-out'
+        };
+
+        // Position-specific styling
+        if (this.config.position === 'left') {
+            baseStyle.left = this.config.offset.side;
+        } else {
+            baseStyle.right = this.config.offset.side;
+        }
+
+        return baseStyle;
+    }
+
+    getToggleStyle() {
+        return {
+            width: '100%',
+            height: this.config.collapsedWidth,
+            border: 'none',
+            backgroundColor: 'transparent',
+            cursor: 'pointer',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            fontSize: '16px',
+            color: '#666',
+            transition: 'color 0.2s ease'
+        };
+    }
+
+    getListStyle() {
+        return {
+            display: this.isCollapsed ? 'none' : '',
+            opacity: this.isCollapsed ? '0' : '1'
+        };
+    }
+
+    getToggleIcon() {
+        if (this.isCollapsed) {
+            return this.config.position === 'left' ? '☰' : '☰';
+        } else {
+            return '✕';
+        }
+    }
+
+    async destroy() {
+        // Remove event listeners
+        window.removeEventListener('scroll', this.boundScrollHandler);
+        window.removeEventListener('resize', this.boundResizeHandler);
+
+        // Clear throttle
+        if (this.scrollThrottle) {
+            clearTimeout(this.scrollThrottle);
+        }
+
+        await super.destroy();
+    }
+}

capabilities/testdrive-jsui/static/css/controls.css

@@ -0,0 +1,129 @@
+/**
+ * TestDrive JSUI Control Panel Styles
+ *
+ * Styles for individual control panels
+ */
+
+/* Contents Control (Northwest) */
+.contents-control {
+    max-height: 300px;
+    overflow-y: auto;
+}
+
+.contents-control .toc-item {
+    padding: 0.25rem 0;
+    cursor: pointer;
+    border-radius: 3px;
+    padding-left: 0.5rem;
+}
+
+.contents-control .toc-item:hover {
+    background-color: #f8f9fa;
+}
+
+.contents-control .toc-h1 { font-weight: bold; }
+.contents-control .toc-h2 { margin-left: 1rem; }
+.contents-control .toc-h3 { margin-left: 2rem; font-size: 0.9em; }
+
+/* Status Control (East) */
+.status-control {
+    text-align: center;
+}
+
+.status-metric {
+    padding: 0.5rem;
+    margin: 0.25rem 0;
+    background: #f8f9fa;
+    border-radius: 4px;
+}
+
+.status-metric .metric-value {
+    font-size: 1.5em;
+    font-weight: bold;
+    color: #007bff;
+}
+
+.status-metric .metric-label {
+    font-size: 0.8em;
+    color: #6c757d;
+}
+
+/* Debug Control (Southeast) */
+.debug-control {
+    font-family: monospace;
+}
+
+/* Removed debug-header styles - using base class title formatting */
+
+.debug-control .debug-logs {
+    max-height: 200px;
+    overflow-y: auto;
+    background: #f8f9fa;
+    padding: 0.5rem;
+    margin: 0 -0.75rem -0.75rem -0.75rem;
+    border-radius: 0 0 5px 5px;
+    font-size: 0.8em;
+}
+
+/* Edit Control (Northeast) */
+.edit-control {
+    text-align: center;
+}
+
+.edit-control .control-button {
+    display: block;
+    width: 100%;
+    margin: 0.5rem 0;
+    padding: 0.5rem;
+    background: #007bff;
+    color: #fff;
+    border: none;
+    border-radius: 4px;
+    cursor: pointer;
+    font-size: 0.9em;
+}
+
+.edit-control .control-button:hover {
+    background: #0056b3;
+}
+
+.edit-control .control-button:disabled {
+    background: #6c757d;
+    cursor: not-allowed;
+}
+
+.edit-control .control-button.danger {
+    background: #dc3545;
+}
+
+.edit-control .control-button.danger:hover {
+    background: #c82333;
+}
+
+/* Control panel animations */
+.markitect-control-panel {
+    transition: all 0.3s ease;
+}
+
+.markitect-control-panel.entering {
+    opacity: 0;
+    transform: scale(0.9);
+}
+
+.markitect-control-panel.entered {
+    opacity: 1;
+    transform: scale(1);
+}
+
+/* Responsive adjustments */
+@media (max-width: 768px) {
+    .markitect-control-panel {
+        position: fixed !important;
+        top: auto !important;
+        bottom: 10px !important;
+        left: 10px !important;
+        right: 10px !important;
+        transform: none !important;
+        max-width: none !important;
+    }
+}

capabilities/testdrive-jsui/static/css/editor.css

@@ -0,0 +1,101 @@
+/**
+ * TestDrive JSUI Editor Styles
+ *
+ * Base styles for the markdown editor interface
+ */
+
+.markitect-edit-mode {
+    position: relative;
+}
+
+/* Section editing styles */
+.markitect-section {
+    position: relative;
+    padding: 0.5rem;
+    margin: 0.5rem 0;
+    border: 1px solid transparent;
+    border-radius: 4px;
+    cursor: pointer;
+    transition: all 0.2s ease;
+}
+
+.markitect-section:hover {
+    background-color: #f8f9fa;
+    border-color: #e9ecef;
+}
+
+.markitect-section.editing {
+    background-color: #fff;
+    border-color: #007bff;
+    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
+}
+
+/* Editor styles */
+.markitect-editor {
+    width: 100%;
+    min-height: 100px;
+    padding: 0.75rem;
+    border: none;
+    background: transparent;
+    font-family: inherit;
+    font-size: inherit;
+    line-height: inherit;
+    resize: vertical;
+}
+
+.markitect-editor:focus {
+    outline: none;
+}
+
+/* Control panel positioning */
+.markitect-control-panel {
+    position: fixed;
+    z-index: 1000;
+    background: #fff;
+    border: 1px solid #dee2e6;
+    border-radius: 6px;
+    padding: 0.75rem;
+    min-width: 200px;
+    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+}
+
+/* Compass positioning */
+.markitect-control-nw { top: 20px; left: 20px; }
+.markitect-control-ne { top: 20px; right: 20px; }
+.markitect-control-e { top: 50%; right: 20px; transform: translateY(-50%); }
+.markitect-control-se { bottom: 20px; right: 20px; }
+.markitect-control-s { bottom: 20px; left: 50%; transform: translateX(-50%); }
+.markitect-control-sw { bottom: 20px; left: 20px; }
+.markitect-control-w { top: 50%; left: 20px; transform: translateY(-50%); }
+
+/* Control panel states */
+.markitect-control-collapsed {
+    width: 40px;
+    height: 40px;
+    overflow: hidden;
+}
+
+.markitect-control-expanded {
+    max-width: 300px;
+    max-height: 400px;
+}
+
+/* Debug styles */
+.markitect-debug-panel {
+    font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
+    font-size: 12px;
+    background: #2d3748;
+    color: #e2e8f0;
+    max-height: 300px;
+    overflow-y: auto;
+}
+
+.markitect-debug-message {
+    padding: 0.25rem 0.5rem;
+    border-bottom: 1px solid #4a5568;
+}
+
+.markitect-debug-error { color: #fed7d7; }
+.markitect-debug-warning { color: #faf089; }
+.markitect-debug-success { color: #9ae6b4; }
+.markitect-debug-info { color: #bee3f8; }

capabilities/testdrive-jsui/static/css/themes/github.css

@@ -0,0 +1,138 @@
+/**
+ * TestDrive JSUI GitHub Theme
+ *
+ * GitHub-inspired theme for the markdown editor
+ */
+
+:root {
+    --github-primary: #0969da;
+    --github-border: #d0d7de;
+    --github-bg-subtle: #f6f8fa;
+    --github-fg-default: #1f2328;
+    --github-fg-muted: #656d76;
+    --github-success: #1a7f37;
+    --github-danger: #d1242f;
+    --github-warning: #9a6700;
+}
+
+/* GitHub-style editor */
+.markitect-edit-mode {
+    color: var(--github-fg-default);
+}
+
+.markitect-section {
+    border: 1px solid transparent;
+}
+
+.markitect-section:hover {
+    background-color: var(--github-bg-subtle);
+    border-color: var(--github-border);
+}
+
+.markitect-section.editing {
+    border-color: var(--github-primary);
+    box-shadow: 0 0 0 0.2rem rgba(9, 105, 218, 0.25);
+}
+
+/* GitHub-style control panels */
+.markitect-control-panel {
+    background: #ffffff;
+    border: 1px solid var(--github-border);
+    color: var(--github-fg-default);
+}
+
+/* GitHub-style buttons */
+.edit-control .control-button {
+    background: var(--github-primary);
+    border: 1px solid transparent;
+    font-weight: 500;
+}
+
+.edit-control .control-button:hover {
+    background: #0860ca;
+}
+
+.edit-control .control-button.danger {
+    background: var(--github-danger);
+}
+
+.edit-control .control-button.danger:hover {
+    background: #b91c1c;
+}
+
+/* GitHub-style status metrics */
+.status-metric {
+    background: var(--github-bg-subtle);
+    border: 1px solid var(--github-border);
+}
+
+.status-metric .metric-value {
+    color: var(--github-primary);
+}
+
+.status-metric .metric-label {
+    color: var(--github-fg-muted);
+}
+
+/* GitHub-style debug panel */
+.markitect-debug-panel {
+    background: #24292f;
+    color: #f0f6fc;
+    border: 1px solid #30363d;
+}
+
+.markitect-debug-message {
+    border-bottom: 1px solid #30363d;
+}
+
+.markitect-debug-error {
+    color: #f85149;
+    background-color: rgba(248, 81, 73, 0.1);
+}
+
+.markitect-debug-warning {
+    color: #f0c674;
+    background-color: rgba(240, 198, 116, 0.1);
+}
+
+.markitect-debug-success {
+    color: #56d364;
+    background-color: rgba(86, 211, 100, 0.1);
+}
+
+.markitect-debug-info {
+    color: #79c0ff;
+    background-color: rgba(121, 192, 255, 0.1);
+}
+
+/* GitHub-style table of contents */
+.contents-control .toc-item {
+    color: var(--github-fg-default);
+}
+
+.contents-control .toc-item:hover {
+    background-color: var(--github-bg-subtle);
+    color: var(--github-primary);
+}
+
+/* GitHub-style scrollbars */
+.contents-control::-webkit-scrollbar,
+.debug-control .debug-logs::-webkit-scrollbar {
+    width: 8px;
+}
+
+.contents-control::-webkit-scrollbar-track,
+.debug-control .debug-logs::-webkit-scrollbar-track {
+    background: var(--github-bg-subtle);
+}
+
+.contents-control::-webkit-scrollbar-thumb,
+.debug-control .debug-logs::-webkit-scrollbar-thumb {
+    background: var(--github-border);
+    border-radius: 4px;
+}
+
+.contents-control::-webkit-scrollbar-thumb:hover,
+.debug-control .debug-logs::-webkit-scrollbar-thumb:hover {
+    background: var(--github-fg-muted);
+}

capabilities/testdrive-jsui/static/images/icons/edit.png

@@ -0,0 +1,4 @@
+# Placeholder for edit icon
+# In a real implementation, this would be a PNG image file
+# For testing purposes, this file exists to verify asset deployment
+EDIT_ICON_PLACEHOLDER=true

capabilities/testdrive-jsui/static/images/icons/reset.png

@@ -0,0 +1,2 @@
+# Placeholder for reset icon
+RESET_ICON_PLACEHOLDER=true

capabilities/testdrive-jsui/static/images/icons/save.png

@@ -0,0 +1,2 @@
+# Placeholder for save icon
+SAVE_ICON_PLACEHOLDER=true

capabilities/testdrive-jsui/static/templates/index.html

@@ -0,0 +1,112 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="generator" content="TestDrive JSUI {version}">
+    <title>{title}</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>
+
+    <!-- Plugin-specific CSS -->
+    {css_content}
+
+    <!-- External dependencies -->
+    <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"
+            onload="window.markitectMarkedLoaded = true"
+            onerror="console.error('CDN library failed to load - network or firewall blocking marked.js'); window.markitectMarkedError = true;"></script>
+</head>
+<body class="{mode_class}">
+
+    <!-- Content container with fallback content -->
+    <div id="markdown-content">
+        {fallback_content}
+    </div>
+
+    <!-- Configuration Data Interface - Clean JSON configuration -->
+    <script id="markitect-config" type="application/json">{config_json}</script>
+
+    <!-- Plugin JavaScript Assets -->
+    {js_scripts}
+
+    <!-- Initialization Script -->
+    <script>
+        window.addEventListener('load', function() {
+            console.log('🎯 TestDrive JSUI loading complete');
+
+            // Handle CDN loading errors
+            if (window.markitectMarkedError) {
+                console.error("CDN library failed to load - network or firewall blocking marked.js");
+            }
+
+            // Note: MarkitectMain auto-initializes via main-updated.js
+            // No manual initialization needed here
+        });
+    </script>
+</body>
+</html>

capabilities/testdrive-jsui/test-documents/sample.md

@@ -0,0 +1,57 @@
+# TestDrive JSUI Sample Document
+
+This is a sample markdown document for testing the TestDrive JavaScript UI plugin.
+
+## Features to Test
+
+### Basic Editing
+- Click any section to edit it
+- Use the save button to download your changes
+- Reset button restores original content
+
+### Control Panels
+- **Contents Control** (Northwest): Document outline and navigation
+- **Status Control** (East): Current document statistics
+- **Debug Control** (Southeast): Development information and logs
+- **Edit Control** (Northeast): Main editing actions
+
+### Markdown Support
+Test various markdown elements:
+
+**Bold text** and *italic text*
+
+> This is a blockquote
+> with multiple lines
+
+```javascript
+// Code blocks with syntax highlighting
+function testFunction() {
+    console.log("Hello from TestDrive JSUI!");
+    return true;
+}
+```
+
+### Lists
+1. Numbered list item one
+2. Numbered list item two
+3. Numbered list item three
+
+- Bullet list item
+- Another bullet item
+  - Nested bullet item
+  - Another nested item
+
+### Tables
+
+| Feature | Status | Notes |
+|---------|--------|--------|
+| Section editing | ✅ Working | Click to edit |
+| Asset loading | ✅ Working | External scripts |
+| Configuration | ✅ Working | JSON interface |
+| Controls | 🚧 Testing | Compass positioning |
+
+### Links and Images
+Visit the [Markitect repository](https://github.com/markitect/markitect) for more information.
+
+---
+*Test document for TestDrive JSUI plugin development*

capabilities/testdrive-jsui/test.html

@@ -0,0 +1,149 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>TestDrive JSUI - Standalone Test</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;
+        }
+        .test-banner {
+            background: #e3f2fd;
+            border: 1px solid #1976d2;
+            border-radius: 4px;
+            padding: 1rem;
+            margin-bottom: 2rem;
+            text-align: center;
+        }
+    </style>
+
+    <!-- External dependencies -->
+    <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"
+            onload="window.markitectMarkedLoaded = true"
+            onerror="console.error('CDN library failed to load'); window.markitectMarkedError = true;"></script>
+</head>
+<body class="markitect-edit-mode">
+
+    <div class="test-banner">
+        <h2>🧪 TestDrive JSUI - Standalone Test Environment</h2>
+        <p>This is a standalone test page for developing JavaScript UI components.</p>
+        <p><strong>Development Mode:</strong> Assets loaded directly from static/ directory</p>
+    </div>
+
+    <!-- Content container with test content -->
+    <div id="markdown-content">
+        <h1>TestDrive JSUI Sample Document</h1>
+        <p>This is a sample markdown document for testing the TestDrive JavaScript UI plugin.</p>
+        <h2>Features to Test</h2>
+        <h3>Basic Editing</h3>
+        <ul>
+        <li>Click any section to edit it</li>
+        <li>Use the save button to download your changes</li>
+        <li>Reset button restores original content</li>
+        </ul>
+        <h3>Control Panels</h3>
+        <ul>
+        <li><strong>Contents Control</strong> (Northwest): Document outline and navigation</li>
+        <li><strong>Status Control</strong> (East): Current document statistics</li>
+        <li><strong>Debug Control</strong> (Southeast): Development information and logs</li>
+        <li><strong>Edit Control</strong> (Northeast): Main editing actions</li>
+        </ul>
+    </div>
+
+    <!-- Configuration for JavaScript -->
+    <script id="markitect-config" type="application/json">
+    {
+        "pluginName": "testdrive-jsui",
+        "assetBaseUrl": ".",
+        "developmentMode": true,
+        "markdownContent": "# TestDrive JSUI Sample Document\n\nThis is a sample markdown document for testing the TestDrive JavaScript UI plugin.\n\n## Features to Test\n\n### Basic Editing\n- Click any section to edit it\n- Use the save button to download your changes\n- Reset button restores original content\n\n### Control Panels\n- **Contents Control** (Northwest): Document outline and navigation\n- **Status Control** (East): Current document statistics\n- **Debug Control** (Southeast): Development information and logs\n- **Edit Control** (Northeast): Main editing actions",
+        "markdownContentWithDogtag": "# TestDrive JSUI Sample Document\n\nThis is a sample markdown document for testing the TestDrive JavaScript UI plugin.\n\n## Features to Test\n\n### Basic Editing\n- Click any section to edit it\n- Use the save button to download your changes\n- Reset button restores original content\n\n### Control Panels\n- **Contents Control** (Northwest): Document outline and navigation\n- **Status Control** (East): Current document statistics\n- **Debug Control** (Southeast): Development information and logs\n- **Edit Control** (Northeast): Main editing actions\n\n---\n*TestDrive JSUI Standalone Test*",
+        "dogtagContent": "\n\n---\n*TestDrive JSUI Standalone Test*",
+        "mode": "edit",
+        "theme": "github",
+        "keyboardShortcuts": true,
+        "autosave": false,
+        "sections": true,
+        "originalFilename": "test-document",
+        "base64References": {},
+        "version": "TestDrive JSUI v1.0.0",
+        "repoName": "testdrive-jsui"
+    }
+    </script>
+
+    <!-- JavaScript Assets - Development Mode (direct file references) -->
+    <script src="static/js/core/debug-system.js"></script>
+    <script src="static/js/core/section-manager.js"></script>
+    <script src="static/js/components/debug-panel.js"></script>
+    <script src="static/js/components/document-controls.js"></script>
+    <script src="static/js/components/dom-renderer.js"></script>
+    <script src="../capabilities/testdrive-jsui/js/controls/control-base.js"></script>
+    <script src="../capabilities/testdrive-jsui/js/controls/contents-control.js"></script>
+    <script src="../capabilities/testdrive-jsui/js/controls/status-control.js"></script>
+    <script src="../capabilities/testdrive-jsui/js/controls/debug-control.js"></script>
+    <script src="../capabilities/testdrive-jsui/js/controls/edit-control.js"></script>
+    <script src="static/js/config-loader.js"></script>
+    <script src="static/js/main-updated.js"></script>
+
+    <!-- Initialization -->
+    <script>
+        window.addEventListener('load', function() {
+            console.log('🧪 TestDrive JSUI standalone test loading...');
+
+            // Handle CDN loading errors
+            if (window.markitectMarkedError) {
+                console.error("CDN library failed to load");
+            }
+
+            // Initialize main application
+            try {
+                if (typeof MarkitectMain !== 'undefined') {
+                    console.log('🚀 Starting MarkitectMain initialization...');
+                    MarkitectMain.initialize();
+                } else {
+                    console.warn('⚠️ MarkitectMain not available');
+
+                    // Show helpful debug information
+                    console.log('Available globals:', Object.keys(window).filter(k => k.includes('Markitect') || k.includes('Section') || k.includes('Control')));
+                }
+            } catch (error) {
+                console.error('❌ TestDrive JSUI initialization failed:', error);
+                console.log('📄 Content should still be visible in fallback mode');
+            }
+        });
+    </script>
+</body>
+</html>