feat: add refactored testdrive-jsui capability with consolidated architecture

Complete integration of refactored testdrive-jsui capability:

## Refactored Architecture
- js/ - All JavaScript source (controls, components, core)
- static/ - CSS, images, templates
- src/testdrive_jsui/ - Python package
- tests/ - Python tests

## Plugin Self-Declaration
- get_plugin_source_dir() - plugin declares own location
- get_asset_paths() - organized asset paths
- No hardcoded discovery logic

## Merged Content
- Baseline UI scaffold (tutorials, LICENSE, INTRODUCTION.md)
- Refactored capability implementation
- Comprehensive documentation

Ready for standalone use or integration with markitect.

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

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

js/tests/component-integration.test.js

@@ -0,0 +1,86 @@
+/**
+ * Component Integration Tests (Jest Version)
+ *
+ * Tests that extracted components work together properly.
+ * Verifies the complete workflow: Section Creation → Rendering → Editing → Saving
+ */
+
+describe('Component Integration Tests', () => {
+    let SectionManager, Section, DOMRenderer, FloatingMenu, EditState;
+    let sectionManager, domRenderer, container;
+
+    beforeAll(() => {
+        // Load extracted components
+        const sectionModule = require('../core/section-manager.js');
+        const domModule = require('../components/dom-renderer.js');
+
+        SectionManager = sectionModule.SectionManager;
+        Section = sectionModule.Section;
+        DOMRenderer = domModule.DOMRenderer;
+        FloatingMenu = domModule.FloatingMenu;
+        EditState = sectionModule.EditState;
+    });
+
+    beforeEach(() => {
+        // Setup fresh container and components for each test
+        container = document.createElement('div');
+        container.innerHTML = '<div id="markdown-content"></div>';
+        document.body.appendChild(container);
+
+        sectionManager = new SectionManager();
+        domRenderer = new DOMRenderer(sectionManager, container);
+    });
+
+    afterEach(() => {
+        // Cleanup
+        if (container && container.parentNode) {
+            container.parentNode.removeChild(container);
+        }
+    });
+
+    test('should load all extracted components', () => {
+        expect(SectionManager).toBeTruthy();
+        expect(Section).toBeTruthy();
+        expect(DOMRenderer).toBeTruthy();
+        expect(FloatingMenu).toBeTruthy();
+        expect(EditState).toBeTruthy();
+    });
+
+    test('should support complete section creation workflow', () => {
+        // Test basic functionality without complex DOM manipulation
+        expect(sectionManager).toBeInstanceOf(SectionManager);
+        expect(domRenderer).toBeInstanceOf(DOMRenderer);
+
+        // Test section creation from markdown
+        const testMarkdown = `# Test Header
+
+This is test content.
+
+![Test Image](test.jpg)`;
+
+        // Create sections from markdown (the right method)
+        expect(() => {
+            const sections = sectionManager.createSectionsFromMarkdown(testMarkdown);
+            expect(sections.length).toBeGreaterThan(0);
+        }).not.toThrow();
+    });
+
+    test('should have core DOM rendering methods', () => {
+        expect(typeof domRenderer.renderAllSections).toBe('function');
+        expect(typeof domRenderer.showEditor).toBe('function');
+        expect(typeof domRenderer.findSectionElement).toBe('function');
+    });
+
+    test('should preserve editor showing functionality', () => {
+        const mockSection = {
+            id: 'test-section-001',
+            type: 'header',
+            content: 'Test content'
+        };
+
+        // Test basic editor functionality
+        expect(() => {
+            domRenderer.showEditor(mockSection.id);
+        }).not.toThrow();
+    });
+});