feat: enhance ControlBase with advanced panel behavior patterns

Implement comprehensive control panel functionality based on reference patterns:

## New Features
- Icon-only collapsed state with compass positioning
- Expand/drag functionality for repositioning panels
- Bottom-left corner resize with minimum size constraints
- Collapse button returns to original position
- Header toggle for content visibility control

## Technical Improvements
- Enhanced DOM structure with expanded/collapsed states
- Robust event handling with automatic cleanup
- State management for drag, resize, expand operations
- Position restoration system for collapse behavior
- Comprehensive styling system with backdrop effects

## Components Added
- Enhanced ControlBase class with 5 core behaviors
- ContentsControl, StatusControl, EditControl, DebugControl panels
- Component discovery system with TDD implementation
- Legacy DocumentControlsLegacy for backward compatibility

## Testing & Documentation
- Interactive test page for behavior validation
- Comprehensive implementation notes
- TDD test suite with 84 passing tests
- Component listing automation

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

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

capabilities/testdrive-jsui/js/components/document-controls-legacy.js

@@ -1,17 +1,22 @@
 /**
- * DocumentControls Component
+ * DocumentControlsLegacy Component
  *
- * Extracted from monolithic editor.js as part of architecture refactoring.
+ * Legacy implementation extracted from monolithic editor.js as part of architecture refactoring.
  * Handles the floating control panel and document-level actions.
  *
+ * ⚠️ LEGACY COMPONENT: This implementation is maintained for backward compatibility.
+ * New projects should use the modern control system components instead.
+ *
  * Dependencies:
  * - None (standalone component)
  */
 
 /**
- * DocumentControls - Manages the floating control panel and its buttons
+ * DocumentControlsLegacy - Legacy floating control panel manager
+ *
+ * @deprecated This is a legacy implementation. Use modern control components for new development.
  */
-class DocumentControls {
+class DocumentControlsLegacy {
     constructor() {
         this.controlPanel = null;
         this.buttons = new Map();
@@ -270,10 +275,15 @@ class DocumentControls {
 
 // Export for use in tests and other modules
 if (typeof module !== 'undefined' && module.exports) {
-    module.exports = { DocumentControls };
+    module.exports = { DocumentControlsLegacy };
 }
 
-// Export for browser use
+// Export for browser use and global access
 if (typeof window !== 'undefined') {
-    window.DocumentControls = DocumentControls;
+    window.DocumentControlsLegacy = DocumentControlsLegacy;
+}
+
+// Also make available in global for tests
+if (typeof global !== 'undefined') {
+    global.DocumentControlsLegacy = DocumentControlsLegacy;
 }