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>
This commit is contained in:
2025-11-14 11:33:49 +01:00
parent 6ef2641bff
commit 4262310302
22 changed files with 3846 additions and 27 deletions

View File

@@ -37,14 +37,14 @@ runner.describe('DocumentControls Component Extraction', () => {
runner.it('should load extracted DocumentControls component', () => {
// Load the extracted component
delete require.cache[require.resolve('../components/document-controls.js')];
delete require.cache[require.resolve('../components/document-controls-legacy.js')];
try {
const module = require('../components/document-controls.js');
runner.expect(module.DocumentControls).toBeTruthy();
const module = require('../components/document-controls-legacy.js');
runner.expect(module.DocumentControlsLegacy).toBeTruthy();
// Set global for other tests
global.ExtractedDocumentControls = module.DocumentControls;
global.ExtractedDocumentControls = module.DocumentControlsLegacy;
} catch (error) {
throw new Error(`Failed to load extracted DocumentControls: ${error.message}`);
}