feat: integrate advanced control panels with feature toggles

Added feature toggle system to TestDriveJSUI library:

Integration:
- Added control configuration (editControl, statusControl, contentsControl, debugControl)
- Added compass positioning configuration (nw, ne, e, se, s, sw, w)
- Implemented initializeAdvancedControls() method
- Updated destroy() to clean up all control panels
- Maintained backward compatibility with simple controls

Configuration:
- controls.editControl (default: true)
- controls.statusControl (default: true)
- controls.contentsControl (default: true)
- controls.debugControl (default: false)
- controls.simpleControls (default: false) - legacy mode

Usage:
new TestDriveJSUI({
    container: '#editor',
    controls: {
        editControl: true,
        statusControl: false,
        contentsControl: true
    }
});

This integrates the existing advanced control system (ControlBase, EditControl,
StatusControl, ContentsControl, DebugControl) into the new library API.

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

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

js/testdrive-jsui.js

@@ -40,6 +40,26 @@ class TestDriveJSUI {
             shortcuts: options.shortcuts !== false,  // default true
             sections: options.sections !== false,    // default true
             debug: options.debug || false,
+
+            // Advanced control panels (compass-positioned)
+            controls: {
+                editControl: options.controls?.editControl !== false,     // default true
+                statusControl: options.controls?.statusControl !== false, // default true
+                contentsControl: options.controls?.contentsControl !== false, // default true
+                debugControl: options.controls?.debugControl || false,    // default false
+
+                // Legacy simple control panel (top-right box)
+                simpleControls: options.controls?.simpleControls || false // default false
+            },
+
+            // Control positioning (compass: nw, ne, e, se, s, sw, w)
+            controlPositions: {
+                editControl: options.controlPositions?.editControl || 'ne',
+                statusControl: options.controlPositions?.statusControl || 'e',
+                contentsControl: options.controlPositions?.contentsControl || 'nw',
+                debugControl: options.controlPositions?.debugControl || 'se'
+            },
+
             ...options
         };
 
@@ -48,6 +68,13 @@ class TestDriveJSUI {
         this.sectionManager = null;
         this.domRenderer = null;
         this.documentControls = null;
+
+        // Advanced control panel instances
+        this.editControl = null;
+        this.statusControl = null;
+        this.contentsControl = null;
+        this.debugControl = null;
+
         this.isInitialized = false;
         this.listeners = new Map();
 
@@ -108,10 +135,6 @@ class TestDriveJSUI {
             console.error('TestDriveJSUI: DOMRenderer not loaded');
             return;
         }
-        if (typeof DocumentControls === 'undefined') {
-            console.error('TestDriveJSUI: DocumentControls not loaded');
-            return;
-        }
 
         // Create section manager
         this.sectionManager = new SectionManager();
@@ -119,12 +142,20 @@ class TestDriveJSUI {
         // Create DOM renderer
         this.domRenderer = new DOMRenderer(this.sectionManager, this.container);
 
-        // Create document controls
+        // Initialize control panels based on configuration
-        this.documentControls = new DocumentControls();
+        if (this.config.controls.simpleControls) {
-        this.documentControls.create();
+            // Legacy simple controls (top-right box)
-
+            if (typeof DocumentControls === 'undefined') {
-        // Set up event handlers for controls
+                console.warn('TestDriveJSUI: DocumentControls not loaded');
-        this.setupControlHandlers();
+            } else {
+                this.documentControls = new DocumentControls();
+                this.documentControls.create();
+                this.setupControlHandlers();
+            }
+        } else {
+            // Advanced compass-positioned control panels
+            this.initializeAdvancedControls();
+        }
 
         // Parse markdown into sections and render
         this.sectionManager.createSectionsFromMarkdown(this.config.markdown);
@@ -199,6 +230,55 @@ class TestDriveJSUI {
         });
     }
 
+    /**
+     * Initialize advanced compass-positioned control panels
+     */
+    initializeAdvancedControls() {
+        console.log('🎛️ Initializing advanced control panels...');
+
+        // ContentsControl (Table of Contents)
+        if (this.config.controls.contentsControl && typeof ContentsControl !== 'undefined') {
+            this.contentsControl = new ContentsControl();
+            this.contentsControl.config.position = this.config.controlPositions.contentsControl;
+            this.contentsControl.show();
+            console.log(`✅ ContentsControl initialized (${this.config.controlPositions.contentsControl})`);
+        }
+
+        // StatusControl (Document Statistics)
+        if (this.config.controls.statusControl && typeof StatusControl !== 'undefined') {
+            this.statusControl = new StatusControl();
+            this.statusControl.config.position = this.config.controlPositions.statusControl;
+            this.statusControl.show();
+            console.log(`✅ StatusControl initialized (${this.config.controlPositions.statusControl})`);
+        }
+
+        // DebugControl (Debug Logs)
+        if (this.config.controls.debugControl && typeof DebugControl !== 'undefined') {
+            this.debugControl = new DebugControl();
+            this.debugControl.config.position = this.config.controlPositions.debugControl;
+            this.debugControl.show();
+            console.log(`✅ DebugControl initialized (${this.config.controlPositions.debugControl})`);
+        }
+
+        // EditControl (Document Actions)
+        if (this.config.controls.editControl && typeof EditControl !== 'undefined') {
+            this.editControl = new EditControl();
+            this.editControl.config.position = this.config.controlPositions.editControl;
+            this.editControl.show();
+            console.log(`✅ EditControl initialized (${this.config.controlPositions.editControl})`);
+        }
+
+        // Setup keyboard shortcuts if enabled
+        if (this.config.shortcuts) {
+            this.setupKeyboardShortcuts();
+        }
+
+        // Setup autosave if enabled
+        if (this.config.autosave) {
+            this.setupAutosave();
+        }
+    }
+
     /**
      * Setup keyboard shortcuts
      */
@@ -515,11 +595,25 @@ class TestDriveJSUI {
             clearInterval(this.autosaveInterval);
         }
 
-        // Destroy document controls
+        // Destroy simple document controls
         if (this.documentControls) {
             this.documentControls.destroy();
         }
 
+        // Destroy advanced control panels
+        if (this.editControl) {
+            this.editControl.destroy();
+        }
+        if (this.statusControl) {
+            this.statusControl.destroy();
+        }
+        if (this.contentsControl) {
+            this.contentsControl.destroy();
+        }
+        if (this.debugControl) {
+            this.debugControl.destroy();
+        }
+
         // Clear container
         if (this.container) {
             this.container.innerHTML = '';
@@ -529,6 +623,10 @@ class TestDriveJSUI {
         this.sectionManager = null;
         this.domRenderer = null;
         this.documentControls = null;
+        this.editControl = null;
+        this.statusControl = null;
+        this.contentsControl = null;
+        this.debugControl = null;
         this.listeners.clear();
         this.isInitialized = false;